@charset "utf-8";

/* mian Background Slide */

.no-overflow {
  overflow: hidden;
}
.hero-slider{z-index:-1;position:absolute;top:0;left:0;}

.columns{
  position: relative;
}
.hero-image img{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 980px;
  position: relative;
  z-index: 1;
}

	
.slick-slider { overflow: hidden; }
    
.slick-slider div.slick-active .hero-image img{
  animation: myMove 6s 1 ease-in-out;
}
@keyframes myMove {
  from { transform: scale(1.2,1.2); transform-origin: 50% 50%; }
  to { transform: scale(1.0,1.0); transform-origin: 50% 50%; }
}
.over-content { 
    position:absolute; 
    top:50px; 
    left:50px;
    width:300px; 
    height:300px; 
    background:#FFFFCC; 
    text-align:center; 
    line-height:300px;
}

.main-text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
    color: #fff;
    transform: translate(-50%, -50%);
    text-align: center;
}
.main-text h1 {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
	margin-bottom:23px;
}
.main-text h2 {
  font-size: 32px;
  font-weight: 400;
  font-family: 'NanumMyeongjo';
}


#wrap {margin:0;padding:0;position:relative;width:100%;}

/*---------------- header ----------------*/
#mainWrap{top:0;left:0;width:100%;height:980px;position:absolute;z-index:10}
#mainWrap .mainHeader{width:100%;z-index:100;position:relative;/*background: rgba(0, 0, 0, 0.6)*/}
#mainWrap .mainHeader .gnbBox{width:1040px;margin:0 auto;}
#mainWrap .mainHeader .gnbBox .gnbList{width:100%;margin:0 auto;overflow:hidden;}
#mainWrap .mainHeader .gnbBox .gnbList li{float:left;padding:26px 0px;}
#mainWrap .mainHeader .gnbBox .gnbList a{width:130px;display:block;font-weight:500;color:#fff;padding:13px 0;font-size:15px;text-align:center; font-weight: 600;}
#mainWrap .mainHeader .gnbBox .gnbList a:hover{font-weight:bold;color:#fff;;font-weight:bold;text-decoration:none;background:url('/images/gnbBar.png')no-repeat bottom;}

#mainWrap .mainHeader .gnbBox .gnbList .logoBox{text-align:center;margin:0 auto;padding:0;}
#mainWrap .mainHeader .gnbBox .gnbList .logoBox > a{display:block;}
#mainWrap .mainHeader .gnbBox .gnbList .logoBox > a > img{width: 109px;}

#mainWrap .mainHeader .topBtn{position:absolute;top:30px;right:10px;}
#mainWrap .mainHeader .topBtn img{display:inline-block;vertical-align:middle;}

#mainWrap .mainHeader .topBtn.login{right:120px;width:31px;}
#mainWrap .mainHeader .topBtn.weather{right:70px;width:31px;}

#mainWrap .mainHeader .topBtn.logout{right:120px;width:31px;}

.toggleMenu span.move::before{ content: ''; display: block;position: fixed;width:23px;height:18px;top:26px;right:25px;background:url('/images/gnbBtn2.png')no-repeat center;background-size:100%;}
/* main ReservationBox */
.monthSelect{width:330px;height:110px;line-height:110px;font-size:16px;font-weight:500;text-align:center;border:1px solid #dddddd;border-right:0;color:#9b9b9b;float:left;background:#fff;cursor:pointer;}
.monthSelect .mArrow{display:block;width:20px;float:right;margin:45px 15px 45px 0;}

.monthBox{position:absolute;top:1px;left:0;margin-top:-375px;width:330px;height: 375px;border: solid 1px #e3e3e3;background:#fff;display: none; padding: 10px;overflow:hidden;}
.monthBox .monthChoice{width:220px;overflow:hidden;margin:0 auto;height:40px;}
.monthBox .monthChoice > a{float:left;padding:10px;} 
.monthBox .monthChoice .month{float:left;margin:10px auto;color:#1d1d1d;font-weight:bold;width:150px;font-size:19px;text-align:center;}

.monthBox .calTxt{width:100%;margin:10px auto;text-align:center;font-size:15px;letter-spacing:0;}
.mainCalendar{ border:1px solid #fff; background-color: rgba(255,255,255,0.5); padding:25px 45px; position: absolute; top:34%; right:0; margin-right:7px; width: 440px; margin-left: -220px; height: 460px; margin-top: -230px;}
.mainCalendar h2{ text-align: center; font-size: 16px;font-weight: 400; letter-spacing: -1px; padding-top: 0; font-family:'Noto Sans KR', sans-serif;}
.mainCalendar h3{ width: 100%; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -1px; padding-top: 0; font-family:'Noto Sans KR', sans-serif;}

.mainCalendarBox{ padding:20px 0;}
.monthTit{ width:100%; overflow: hidden; text-align: center; margin: 0 0 20px;}
.monthTit span{ float:left; width: 35%; text-align: right; line-height: 40px; cursor: pointer; font-size: 30px;}
.monthTit span:last-child{ text-align: left;}
.monthTit h3{ text-align: center; float: left; width: 30%; font-size: 40px; line-height: 40px; font-family:'Noto Sans KR', sans-serif;}

.mCalendar{ width: 100%; margin: 0 auto;}
.mCalendar thead th{ height:30px; vertical-align: middle; font-size: 14px; color: #1f1f1f;font-weight: 400;font-family:'Noto Sans KR', sans-serif; }
.mCalendar thead th:first-child{ color: #89060a;}
.mCalendar thead th:last-child{ color: #004797;}
.mCalendar td{font-size: 18px; font-weight: 400; text-align: center; color: #fff; vertical-align: middle;  height: 40px;font-family:'Noto Sans KR', sans-serif;}
.mCalendar td.choice{background-color:#444; border-radius: 50%; width: 40px; height: 40px; display: block; color: #fff !important; margin: auto; line-height: 40px;}
.mCalendar td.possible{ color: #292929; cursor: pointer;}
.mCalendar td.possible span{ display: block; position: absolute; font-size: 12px; color: #fff; background-color: #ea5815; border-radius: 20px; padding: 0 5px; margin-left: 3%;}

.mCalendar tr td.possible:first-child{ color: #89060a;}
.mCalendar tr td.possible:last-child{ color: #004797;}

/*---�޴�---*/
.siteAll{position:absolute;top:27px;right:0;width:55px;height:55px;padding:10px 0; display:block; cursor:pointer; }
.siteAll .toggleMenu {
	float:right;
	border: none;
	cursor: pointer;
	display: inline-block;
	outline: none;
	padding: 0;
	pointer-events: initial;
	position: absolute;
	vertical-align: middle;
	z-index: 1110;	
	background-size:100% 100%;
	top:0;
	right:0;
}

/*---�ܹ��Ÿ޴�---*/
/*메인 삼선바*/
/*.toggleMenu span::before{ content: ''; display: block;position: absolute;width:32px;height:25px;top:0;right:20px;background:url('/images/gnbBtn2.png')no-repeat center;background-size:100%;}*/
.toggleMenu.active span::before{ content: '';background:none}
.toggleMenu.active::after{ content: ''; display: block;position: fixed;width:39px;height:39px;right:250px;top:150px;background:url('/images/x-box.png')no-repeat center;-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;}
/*---�޴�---*/
#menu {
	background-color: rgba(255,255,255,1);
	height: 100%;
	left: 0;
	opacity: 0;
	overflow: hidden;
	position: fixed;
	text-align: left;
	top: 0;
	-webkit-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
	visibility: hidden;
	width: 100%;
	z-index: 101;
}
#menu.open {
	opacity: 1;
	visibility: visible;
}
#menu.open li:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#menu.open li:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#menu.open li:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}        animation-delay: 1s;

#menu.open li {
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
#menu ul:hover a {
	opacity: 0.5;
}
#menu ul a {
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

#menu .main-nav {
	position: relative;
	top: 45%;
	left: 50%;
	width:1200px;
	overflow:hidden;
	margin-left: -600px;
	-webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
}
#menu .main-nav .hambergerLogo{margin:0 auto 70px;display:block;}
#menu .main-nav > ul.menuTitleBox{float:left;width:200px;}
#menu .main-nav > ul.menuTitleBox > li{width:160px;text-align:center;padding:10px 0;}
#menu .main-nav > ul.menuTitleBox > li > a.title{font-size:22px;font-weight:500;color:#3a3a3a;height:40px;line-height:40px;}
#menu .main-nav > ul.menuTitleBox > li > a{font-size:18px;height:40px;line-height:40px;}
#menu .main-nav > ul > li > a:hover {
	opacity: 1;
	font-size:18px;
	font-weight:bold;
	color:#7d4698;
}

/* main scrollmenu */
#scrollmenuwrap{position:relative;width:100%;z-index:99999;}
#scrollmenu {width:100%;margin:0 auto;height:310px;background:#3e3e49;position:absolute;top:0px;text-align:left;z-index: 99999;display:none;min-width:1200px;}
#scrollmenu .logoBox{width:340px;height:50px;margin:0 auto;}

#scrollmenu .menuBox{width:1040px;height:300px;margin:0 auto;z-index: 99999}
#scrollmenu .menu {position:relative;top:0;}
#scrollmenu .menu .subMenu {position:absolute;cursor:pointer;letter-spacing:-1px;width:130px;height:290px;border-right:1px solid #4a4a4a;margin-top:10px;text-align:center;}
/*#scrollmenu .menu .subMenu.ul1 {left: 50px;}
#scrollmenu .menu .subMenu.ul2 {left: 180px;}
#scrollmenu .menu .subMenu.ul3 {left: 310px;}
#scrollmenu .menu .subMenu.ul4 {left: 440px;}
#scrollmenu .menu .subMenu.ul5 {left: 570px;}
#scrollmenu .menu .subMenu.ul6 {left: 700px;}
#scrollmenu .menu .subMenu.ul7 {left: 830px;border-right:0;}*/
#scrollmenu .menu .subMenu.ul1 {left: 0px;}
#scrollmenu .menu .subMenu.ul2 {left: 130px;}
#scrollmenu .menu .subMenu.ul3 {left: 260px;border-right:0;}
#scrollmenu .menu .subMenu.ul4 {left: 520px;}
#scrollmenu .menu .subMenu.ul5 {left: 650px;}
#scrollmenu .menu .subMenu.ul6 {left: 780px;}
#scrollmenu .menu .subMenu.ul7 {left: 910px;border-right:0;}

#scrollmenu .menu .subMenu li a {display:block;color:#fff;padding:13px 0;}
#scrollmenu .menu .subMenu li a:hover {color:#df9b22;font-weight:bold;}

#mainWrap .mainTxtBox{overflow:hidden;width:920px;margin:330px 0;float:right;}
#mainWrap .mainTxtBox .mainTxt{display:block;}

/* mainTxt img motion */
/* img Deco */
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.0s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.0s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-9-16 15:5:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


/*200217�߰�*/
.mainBtn{ padding: 12px 0; display: inline-block; margin-right: 5px; border:1px solid #fff; color: #fff; width: 120px; text-align: center; transition: 0.2s all ease;}
.mainBtn:hover{ background-color: #46413b; border:1px solid #46413b; color: #fff; transition: 0.2s all ease;}


/* mainSecondCont */
/** ������
===================================*/
.bx-wrapper2 {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper2 img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper2 {}
.bx-wrapper2 .bx-pager,
.bx-wrapper2 .bx-controls-auto {
  position: absolute;
  bottom: 10px;
  width: 100%;
}
/* PAGER */
.bx-wrapper2 .bx-pager {
  text-align: center;
  padding-top: 20px;
}
.bx-wrapper2 .bx-pager.bx-default-pager a {
  background: #fff;
  text-indent: -9999px;
  display: block;
  width: 14px;
  height: 14px;
  border-radius:50%;
  margin: 0 5px;
  outline: 0;
}
.bx-wrapper2 .bx-pager.bx-default-pager a:hover,
.bx-wrapper2 .bx-pager.bx-default-pager a.active,
.bx-wrapper2 .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper2 .bx-pager-item,
.bx-wrapper2 .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper2 .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper2 .bx-prev:hover,
.bx-wrapper2 .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper2 .bx-prev {
  left:30px;
  background:url(../images/controls_arw2L.png) no-repeat;
}
.bx-wrapper2 .bx-next {
  right:30px;
  background:url(../images/controls_arw2R.png) no-repeat;
}
.bx-wrapper2 .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  outline: 0;
  width: 49px;
  height: 96px;
  text-indent: -9999px;
  z-index: 38;
}
.bx-wrapper2 .bx-controls-direction a.disabled {
  display: none;
}

.mainSecondCont{width:100%;height:1340px;padding-top:600px;background:url('/images/main/mainSecondBg.jpg')no-repeat center;background-size:cover;position:relative;}
.mainSecondCont .mainContentsBox{width:1000px;height:540px;position:absolute;top:0px;left:50%;margin-left:-500px;}
.mainSecondCont .mainContentsBox .slideBox{width:1000px;height:320px;overflow:hidden;}

.mainSecondCont .mainContentsBox .mainLinkBox{width:1000px;height:220px;overflow:hidden;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul{float:left;width:250px;height:220px;padding:20px 25px;background:#fff;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul.colorBg{background:#282d41;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul.colorBg > li{font-size:12px;line-height:16px;color:#a9a9a9;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul.colorBg > li.title{color:#fff;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul.colorBg > li.btn{background:#fff;color:#282d41;}

.mainSecondCont .mainContentsBox .mainLinkBox > ul > li.img{display:block;margin-bottom:17px;}

.mainSecondCont .mainContentsBox .mainLinkBox > ul > li{font-size:12px;line-height:18px;color:#797979;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul > li.title{font-size:15px;color:#353535;font-weight:600;margin-bottom:5px;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul > li.btn{width:80px;font-size:13px;text-align:center;padding:5px 0;border-radius:15px;margin-top:40px;background:#282d41;color:#fff;cursor:pointer;}
.mainSecondCont .mainContentsBox .mainLinkBox > ul > li.btn.btn2{margin-top:15px;}

.mainSecondCont .mainContentsBox .mainLinkBox > ul.imgBg{background:url('/images/main/mainLinkBg.jpg')no-repeat center;}


.mainSecondCont .mainSecondCourse{width:1200px;margin:0 auto;}
.mainSecondCont .mainSecondCourse:before, .mainSecondCont .mainSecondCourse:after { content:""; display:table;}
.mainSecondCont .mainSecondCourse:after { clear:both;}
.mainSecondCont .mainSecondCourse .article{
	width: 400px;
	height: 535px;
	background: #fff;
	cursor: pointer;
	float: left;
	text-align: center;
	text-transform: none;
	z-index: 1;
    padding:120px 0 30px;
	-webkit-backface-visibility: hidden;
	box-shadow: 
		0px 0px 0px 1px rgba(222,222,222,1);
	-webkit-transition: 
		opacity 0.2s linear, 
		-webkit-transform 0.2s ease-in-out, 
		box-shadow 0.2s ease-in-out;
	-moz-transition: 
		opacity 0.2s linear, 
		-moz-transform 0.2s ease-in-out, 
		box-shadow 0.2s ease-in-out;
	-o-transition: 
		opacity 0.2s linear, 
		-o-transform 0.2s ease-in-out, 
		box-shadow 0.2s ease-in-out;
	-ms-transition: 
		opacity 0.2s linear, 
		-ms-transform 0.2s ease-in-out, 
		box-shadow 0.2s ease-in-out;
	transition: 
		opacity 0.2s linear, 
		transform 0.2s ease-in-out, 
		box-shadow 0.2s ease-in-out;
}

.mainSecondCont .mainSecondCourse .article h2{font-size:40px;font-weight:700;margin-bottom:10px;text-align:center;color:#37404e;}
.mainSecondCont .mainSecondCourse .article h4{font-size:20px;text-align:center;color:#37404e;font-weight:600;}
.mainSecondCont .mainSecondCourse .article span.bar{display:block;width:38px;height:3px;background:#fff;margin:50px auto;}
.mainSecondCont .mainSecondCourse .article p{font-size:15px;text-align:center;color:#37404e;}
.mainSecondCont .mainSecondCourse .article .linkBtn{width:150px;background:#3d8ecc;color:#fff;border-radius:20px;margin:70px auto 0;text-align:center;padding:12px 0;}


.mainSecondCont .mainSecondCourse .article.active{
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-o-transform: scale(1.02);
	-ms-transform: scale(1.02);
	transform: scale(1.02);
	background:#3d8ecc;
	box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.2);
	z-index: 3;	
	opacity: 1;
}
.mainSecondCont .mainSecondCourse .article.active h2{color:#fff;}
.mainSecondCont .mainSecondCourse .article.active h4{color:#fff;}
.mainSecondCont .mainSecondCourse .article.active span.bar{width:38px;height:3px;background:#fff;margin:50px auto;}
.mainSecondCont .mainSecondCourse .article.active p{color:#fff;}
.mainSecondCont .mainSecondCourse .article.active .linkBtn{background:#fff;color:#37404e;}


/* thirdCont */
.thirdCont{background:#f5f5f5;width:100%;height:700px;}
.thirdCont .titleTxt{font-size:38px;width:300px;font-weight:600;margin:0 auto;padding:100px 0 50px;text-align:center;}

.thirdCont .infoListBox{width:1200px;margin:0 auto;overflow:hidden;}
.thirdCont .infoListBox .noticeBox{width:1200px;height:140px;padding:40px;background:#fff;overflow:hidden;margin-bottom:15px;box-shadow:0px 2px 2px #e1e1e1;}
.thirdCont .infoListBox .noticeBox .notice{width:1020px;float:left;}
.thirdCont .infoListBox .noticeBox .notice .title{padding-right:10px;margin-bottom:15px;}
.thirdCont .infoListBox .noticeBox .notice .title > a{font-size:24px;font-weight:600;color:#030303;text-overflow:ellipsis;overflow:hidden;white-space:normal;}
.thirdCont .infoListBox .noticeBox .notice .date{font-size:12px;}

.thirdCont .infoListBox .noticeBox .noticeMore{width:100px;float:left;}
.thirdCont .infoListBox .noticeBox .noticeMore a.list{font-size:15px;margin-top:20px;line-height:23px;color:#000000;overflow:hidden;display:block;}
.thirdCont .infoListBox .noticeBox .noticeMore a.list > img{float:right;}

.thirdCont .infoListBox .infoList{width:595px;margin-right:10px;float:left;}
.thirdCont .infoListBox .infoList:last-child{margin-right:0;}
.thirdCont .infoListBox .infoList .infoBox{width:595px;height:140px;padding:0 40px;box-shadow:0px 2px 2px #e1e1e1;background:#fff;margin-bottom:15px;overflow:hidden;}

.thirdCont .infoListBox .infoList .infoBox .title{float:left;width:200px;height:140px;line-height:140px;font-size:24px;font-weight:600;color:#030303;text-overflow:ellipsis;overflow:hidden;white-space:normal;}
.thirdCont .infoListBox .infoList .infoBox .text{float:right;font-size:17px;padding:45px 0;line-height:25px;text-align:right;color:#666666;}
.thirdCont .infoListBox .infoList .infoBox .text.txt1{padding:43px 0;font-weight:bold;font-size:20px;color:#030303;}
.thirdCont .infoListBox .infoList .infoBox .text.txt2{padding:57px 0;}
.thirdCont .infoListBox .infoList .infoBox .text .miniTxt{display:block;margin-top:7px;}





/****quick menu****/
area:focus{
    border: none;
    outline: none;
    outline-style: none;
    -moz-outline-style: none;
}
.quickMenu{
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 10;
    display: none;
}
.quickMenu ul{width: 52px;}

.quickMenu ul li{
    padding: 12px;
    height: 50px;
    background-color:#3f90c9;
    color: #fff;
    border-radius: 30px;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: center;
    float: right;
}
.quickMenu ul li:nth-of-type(2){
    background-color: #1d7aba;
}
.quickMenu ul li:nth-of-type(3){
    background-color: #065c98;
}
.quickMenu a{
    display: block;
    margin-bottom: 10px;
}
.quickMenu li{width: 52px; transition: 0.3s all;}
.quickMenu ul li span{opacity: 0; width: 0; transition: 0.01s all;}
.quickMenu li:hover{width: 135px}
.quickMenu li:hover span{opacity: 1; width: 60px; transition: 1s all;}


/*240731 메인 영상추가*/
.video-wrap{width: 100%; height: 100vh; overflow: hidden;}
.video-wrap video{width: 100%; height: 100%; object-fit: cover;}


/*메인팝업리뉴얼*/
.main_popup_new {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	flex-direction: column;
	z-index: 99;
}

.pop-swiper {
  position: relative;
  width: 100%;
}

.pop-swiper .swiper-slide {
  position: relative;
	width: 250px !important;
}

.pop-swiper .swiper-slide img {
  width: 250px;
	height: 266px;
	object-fit: cover;
  overflow: hidden;
}

.pop-bottom-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 33px;
	max-width: 1280px;
}

.main-pop {
	max-width: 1280px;
}

.main-pop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
	color: #fff;
	font-weight: 600;
}

.main-pop-nav .swiper-btn-prev,
.main-pop-nav .swiper-btn-next{
  cursor: pointer;
}

.main-pop-nav .swiper-pagination {
  flex: none;
  position: static;
  width: auto;
}

.btn-pop-close {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-pop-close button{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 60px;
  padding: 5px 24px;
	font-size: 12px;
}