@charset "UTF-8";

/*
================================================================================
메인콘텐츠
================================================================================
*/

.swiper-container-vertical > .swiper-wrapper {
   flex-direction: column;
 }
 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.main_con{position: relative;font-family: 'noto sans SC', sans-serif;letter-spacing: -1px;overflow: hidden;}
.main_con a{font-family: 'noto sans SC', sans-serif;}
.main_con::before{position: absolute;top: 0;left: 0;width: 100%;height: 770px;content: '';background-image: linear-gradient(180deg, #f8fafd, #fff);}
 
.main_con h2,
.main_con h3{font-family: 'noto sans SC', sans-serif;}

.main_top_con{position: relative;background-color: #f2f3f8;}

.mnCon1{position: relative;}
.mnCon1 .txt{position: absolute;top: 30%;left: 0;padding: 0 20px;width: 100%;font-family: 'GmarketSans';font-size: 22px;color: #fff;font-weight: bold;text-align: center;line-height: 1.4;letter-spacing: 0;word-break: keep-all;text-shadow: 0 0 20px rgba(0,0,0,0.5);z-index: 20;}
.mnCon1 .txt b{display: block;margin-top: 40px;font-family: 'GmarketSans';font-size: 90px;letter-spacing: 30px;line-height: 1;}
.mnCon1 .mSlide1{border-radius:0 0 200px;}
.mnCon1 .mSlide1 ul li{height: 900px;background-repeat: no-repeat;background-position: center center;background-size: cover;}
.mnCon1 .mSlide1 ul li.bg1{background-image: url('/images/foreign/main/visual01.jpg');}
.mnCon1 .mSlide1 ul li.bg2{background-image: url('/images/foreign/main/visual01.jpg');}
.mnCon1 .control{position: absolute;left: 50%;bottom: 100px;display: flex;align-items: center;/*gap: 10px;*/text-indent: -999px;overflow: hidden;transform:translateX(-50%);z-index: 20;}
.mnCon1 .control .vPage1{position: relative;display: flex;align-items: center;gap: 10px;margin-right: 10px;width: 90px;height: 40px;color: #fff;}
.mnCon1 .control .vPage1::after{position: absolute;top: 50%;left: 45%;width: 0;height: 50px;content: '';border-left: 1px solid #fff;opacity: 0.5;transform: translateY(-50%) rotate(35deg);}
.mnCon1 .control .vPage1 span{width: 50px;text-indent: 0;font-family:'GmarketSans';font-size: 16px;color: #fff;line-height: 1;}
.mnCon1 .control .vPage1 span::before{content: '0';}
.mnCon1 .control .vPage1 .swiper-pagination-current{font-size: 24px;}
.mnCon1 .control button{position: relative;margin: 0 5px;width: 60px;height: 60px;text-indent: -999px;overflow: hidden;background-repeat: no-repeat;background-position: center center;background-color: rgba(0, 0, 0, 0.6);border-radius: 50%;}
.mnCon1 .control .prevSlide1{background-image: url('/images/foreign/main/ico_prev.png');}
.mnCon1 .control .nextSlide1{background-image: url('/images/foreign/main/ico_next.png');}
.mnCon1 .control .stopSlide1::before,
.mnCon1 .control .startSlide1::before{position: absolute;top: 50%;left: 50%;content: '';transform: translate(-50%, -50%);}
.mnCon1 .control .stopSlide1::before{width: 8px;height: 21px;border: 1px solid #fff;border-width: 0 3px;}
.mnCon1 .control .startSlide1::before{width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 11px solid #fff;}

.main_mid_con{position: relative;background-image: linear-gradient(180deg, #f2f3f8, #f2f3f8, #fff);}

.mnCon2{margin: 0 auto;padding: 80px 40px;max-width: 1480px;}
.mnCon2 ul{display: flex;align-items: center;justify-content: space-between;/*gap: 40px;*/}
.mnCon2 ul li{position: relative;margin: 20px 0;width: 25%;}
.mnCon2 ul li:not(:first-child):after{position: absolute;top: 50%;left: -30px;content: '';width: 3px;height: 9px;background: url('/images/foreign/main/ico_kan.png') no-repeat center center;transform: translateY(-50%);}
.mnCon2 ul li a{display: flex;align-items: center;padding-left: 70px;height: 60px;font-family: 'noto sans SC', sans-serif;font-size: 17px;color: #000;font-weight: bold;word-break: keep-all;background-repeat: no-repeat;background-position: left center;}
.mnCon2 ul li a:hover{text-decoration: underline;text-underline-offset: 5px;}
.mnCon2 ul li.ic1 a{background-image: url('/images/foreign/main/ico_link1.png');}
.mnCon2 ul li.ic2 a{background-image: url('/images/foreign/main/ico_link2.png');}
.mnCon2 ul li.ic3 a{background-image: url('/images/foreign/main/ico_link3.png');}
.mnCon2 ul li.ic4 a{background-image: url('/images/foreign/main/ico_link4.png');}

.mnCon3{position: relative;padding: 160px 0 90px 40px;}
.mnCon3::before{position: absolute;top: 0;left: 50%;width: 1080px;height: 560px;content: '';background: url('/images/foreign/main/history_bg.png') no-repeat left top;transform: translateX(-93%);z-index: 2;}
.mnCon3::after{position: absolute;bottom: 0;left: 50%;width: 1000px;height: 434px;content: '';background-image:linear-gradient(to right, #fcedef, #f2f1fa);border-radius: 30px 30px 130px;transform: translateX(-20%);z-index: 1;}
.mnCon3 .con_box{position: relative;margin: 0 auto;padding-left: 320px;max-width: 1400px;z-index: 2;}
.mnCon3 .con_box h2{position: absolute;top: 0;left: 0;font-size: 54px;color: #fff;font-weight: bold;}
.mnCon3 .con_box h2 span{color: #8b669e;font-weight: bold;}
.mnCon3 .con_box .con{overflow: auto;}
.mnCon3 .con_box .con ul{display: flex;/*gap: 30px;*/padding-right: 30px;width: 1080px;}
.mnCon3 .con_box .con ul li{flex: 1;padding-left:30px;}
.mnCon3 .con_box .con ul li a{position: relative;display: block;overflow: hidden;background-repeat: no-repeat;background-size: cover;border-radius: 30px 30px 75px ;}
.mnCon3 .con_box .con ul li a .tit{position: absolute;left: 0;bottom: 0;padding: 50px 50px 30px;width: 100%;font-family: 'GmarketSans';font-size: 22px;color: #fff;font-weight: bold;background-image: linear-gradient(transparent, rgba(0,0,0,0.5));}
.mnCon3 .con_box .con ul li a:hover .tit{text-decoration: underline;text-underline-offset: 5px;}
.mnCon3 .con_box .btnMore{position: absolute;left: 0;top: 270px;}
.mnCon3 .con_box .btnMore a{display: block;width: 124px;font-family: 'GmarketSans';font-size: 16px;color: #fff;line-height: 48px;text-align: center;background-color: rgba(0,0,0,0.4);border-radius: 20px 5px;}
.mnCon3 .con_box .btnMore a:hover{text-decoration: underline;text-underline-offset: 5px;}

.main_bot_con{position: relative;padding-top: 120px;background: url('/images/foreign/main/festival_bg2.png') no-repeat 0 center;}
.main_bot_con::before{position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';background: url('/images/foreign/main/festival_bg.png') no-repeat center top;z-index: 1;}

.mnCon4{position: relative;margin: 0 auto 150px;padding:0 40px 65px;max-width: 1400px;height: 740px;z-index: 2;}
.mnCon4::after{display: block;clear: both;content: '';}
.mnCon4 h2{margin-bottom: 65px;font-size: 34px;color: #b9b9b9;font-weight: bold;text-align: center;line-height: 1;}
.mnCon4 h3{position: relative;margin-bottom: 50px;text-align: right;z-index: 2;}
.mnCon4 h3 span{display:inline-block;font-size: 112px;color: #0098f6;font-weight: 900;background: -webkit-gradient(linear, right top, left bottom, color-stop(0, #09dc8e), color-stop(100, #0098f6));background: -webkit-linear-gradient(to right, #09dc8e, #0098f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;line-height: 1.1;letter-spacing: -6px;}
.mnCon4 .img{position: absolute;top:150px;left: 50%;width: 960px;overflow: hidden;transform: translateX(-105%);border-radius:0 20px 70px 0;box-shadow: 10px 10px 40px rgba(0,0,0,0.1);}
.mnCon4 .con{position: relative;float: right;width: 45%;}
.mnCon4 .con p{font-family: 'noto sans SC', sans-serif;font-size: 16px;color: #444;word-break: keep-all;letter-spacing: -0.5px;}
.mnCon4 .con .txt1{margin-bottom: 20px;}
.mnCon4 .con .txt2{margin-bottom: 40px;}
.mnCon4 .con .btnMore{display: inline-block;}
.mnCon4 .con .btnMore a{display: block;width: 124px;font-family: 'GmarketSans';font-size: 16px;color: #fff;line-height: 48px;text-align: center;background-color: rgba(15,91,102,0.4);border-radius: 20px 5px;}
.mnCon4 .con .btnMore a:hover{text-decoration: underline;text-underline-offset: 5px;}

.mnCon5{position: relative;padding:0 0 100px;z-index: 2;}
.mnCon5::before{position: absolute;left: 0;bottom: 0;width: 100%;height: 290px;content: '';background-color: #2a2c3f;}
.mnCon5 .con_box{position:relative;margin: 0 auto;padding: 0 40px;max-width: 1500px;}
.mnCon5 .con_box h2{margin-bottom: 65px;font-size: 34px;color: #4daaa4;font-weight: bold;text-align: center;line-height: 1;}
.mnCon5 .con_box .btnMore{position: absolute;top: 0;right: 0;}
.mnCon5 .con_box .btnMore a{display: block;width: 40px;height: 40px;text-indent: -999px;overflow: hidden;background:#fff url('/images/foreign/main/ico_more.png') no-repeat center center;border-radius: 15px;}
.mnCon5 .con_box .con{overflow: auto;margin:0 -40px;padding-left: 40px;}
.mnCon5 .con_box ul{display: flex;justify-content: space-between;/*gap: 40px;*/width: 1400px;}
.mnCon5 .con_box ul li{position:relative;flex: 1;padding:0 20px 25px;}
.mnCon5 .con_box ul li a{position:relative;display: block;}
.mnCon5 .con_box ul li a::before{position: absolute;left: 20px;bottom: 0;width:100%;height:100%;content: '';border: 1px solid #fff;border-radius: 25px;opacity: 0.2;}
.mnCon5 .con_box ul li .photo{position: relative;display: block;overflow: hidden;border-radius: 25px;}
.mnCon5 .con_box ul li .photo img{width: 100%;}
.mnCon5 .con_box ul li .tit{display: flex;align-items: center;justify-content: center;height: 70px;font-size: 18px;color: #fff;text-align: center;word-break: keep-all;}
.mnCon5 .con_box ul li a:hover .tit{text-decoration: underline;text-underline-offset: 5px;}

/* 영문 */
#wrapper.eng .main_con,
#wrapper.eng .main_con a,
#wrapper.eng .main_con h2,
#wrapper.eng .main_con h3,
#wrapper.eng .mnCon2 ul li a,
#wrapper.eng .mnCon4 .con p{font-family: 'GmarketSans';word-break: keep-all;}

/* 중문 */
.mnCon4.chi h3{padding-top: 100px;}


/*
================================================================================
반응형 메인콘텐츠
================================================================================
*/

/* PC Device */
@media all and (max-width:1400px){

  
}

/* Tablet Device */
@media all and (max-width:1250px){

  .mnCon4 h3 span{font-size: 82px;}

}

/* Tablet Device */
@media all and (max-width:1100px){

  

}


/* Tablet Device */
@media all and (max-width:990px){

  .mnCon1 .txt{font-size: 20px;}
  .mnCon1 .txt b{font-size: 80px;letter-spacing: 14px;}

  .mnCon2 ul{flex-wrap: wrap;margin: 0 auto;max-width: 600px;}
  .mnCon2 ul li{width: 35%;}
  .mnCon2 ul li:not(:first-child):after{left: -50%;}
  .mnCon2 ul li:nth-child(3)::after{display: none;}

  .mnCon3{padding: 80px 0 90px;}
  .mnCon3::before{left: auto;right: 0;transform: translateX(0);}
  .mnCon3 .con_box{padding-left: 0;}
  .mnCon3 .con_box h2{position: relative;margin-bottom: 20px;padding-left: 30px;line-height: 1.4;}
  .mnCon3 .con_box h2 span{font-size: 54px;}
  .mnCon3 .con_box .con{scroll-snap-type: x mandatory;}
  .mnCon3 .con_box .con ul li{scroll-snap-align: center;}
  .mnCon3 .con_box .btnMore{top: 90px;left: auto;right: 30px;}

  .mnCon4{padding: 0;height: auto;}
  .mnCon4 h3{margin-bottom: 0;text-align: center;}
  .mnCon4 h3 span{font-size:70px; background: linear-gradient(to right, #0098f6, #09dc8e);color: transparent;-webkit-background-clip: text;}
  .mnCon4 .img{position: relative;top: 0;left: 0;margin-bottom: 40px;width: 100%;transform: translateY(0);border-radius: 0;}
  .mnCon4 .con{float: none;width: 100%;text-align: center;}
  .mnCon4 .con .txt1{padding: 40px 20px 0;}
  .mnCon4 .con .txt2{display: none;}

  .mnCon5 .con_box .con{margin: 0 -40px;padding-left: 20px;scroll-snap-type: x mandatory;}
  .mnCon5 .con_box ul li{scroll-snap-align: center;}

  /* 중문 */
  .mnCon4.chi h3{padding-top: 0;}

}

/* mobile Device */
@media all and (max-width:640px){
  
  .mnCon1 .mSlide1{border-radius: 0;}
  .mnCon1 .mSlide1 ul li{height: 560px;}

  .mnCon1 .txt{font-size: 16px;}
  .mnCon1 .txt b{margin-top: 20px;font-size: 40px;letter-spacing: 10px;}

  .mnCon1 .control{bottom: 30px;/*gap: 5px;*/}
  .mnCon1 .control .vPage1{width: 80px;}
  .mnCon1 .control .vPage1::after{height: 30px;}
  .mnCon1 .control .vPage1 .swiper-pagination-current{font-size: 18px}
  .mnCon1 .control .vPage1 span{font-size: 14px;}
  .mnCon1 .control button{margin: 0 2px;width: 40px;height: 40px;background-size: 10px;}
  .mnCon1 .control .stopSlide1::before{width: 6px;height: 15px;}
  .mnCon1 .control .startSlide1::before{border-width: 7px 0 7px 7px;}

  .mnCon2{padding: 40px 20px;}
  .mnCon2 ul{/*gap:30px 0;*/}
  .mnCon2 ul li{margin: 15px 0;width: 50%;}
  .mnCon2 ul li:not(:first-child):after{left: 0;top: 25px;transform: translateY(0);}
  .mnCon2 ul li a{padding: 70px 0 0;height: auto;justify-content: center;font-size: 16px;text-align: center;background-position: center top;}

  .mnCon3{padding: 40px 0;}
  .mnCon3::before{right: -150px;height: 440px;}
  .mnCon3::after{transform: translateX(-10%);}
  .mnCon3 .con_box h2{padding-left: 20px;font-size:30px}
  .mnCon3 .con_box h2 span{font-size: 30px;}
  .mnCon3 .con_box .btnMore{top: 30px;right: 20px;}
  .mnCon3 .con_box .btnMore a{width: 100px;font-size: 14px;line-height: 40px;}
  .mnCon3 .con_box .con ul{padding-right: 20px;width: 900px;}
  .mnCon3 .con_box .con ul li{padding-left: 20px;}
  .mnCon3 .con_box .con ul li a .tit{padding: 20px ;font-size: 18px;}

  .main_bot_con{padding-top: 50px;}
  .mnCon4{margin-bottom: 70px;}
  .mnCon4 h2{margin-bottom: 30px;font-size: 22px;}
  .mnCon4 h3 span{font-size: 40px;letter-spacing: -3px;}
  .mnCon4 .img{margin-bottom:20px;}
  .mnCon4 .con .txt1{padding: 30px 20px 0;font-size: 14px;word-break: break-all;}
  .mnCon4 .con .btnMore a{width: 100px;font-size: 14px;line-height: 40px;}

  .mnCon5{padding-bottom: 50px;}
  .mnCon5::before{height: 190px;}
  .mnCon5 .con_box{padding: 0 20px;}
  .mnCon5 .con_box h2{margin-bottom: 30px;font-size: 22px;}
  .mnCon5 .con_box .con{margin: 0 -20px;padding-left: 10px;}
  .mnCon5 .con_box ul{/*gap: 25px;*/width: 900px;}
  .mnCon5 .con_box ul li{padding:0 10px 10px;}
  .mnCon5 .con_box ul li .photo{margin-bottom: 10px;}
  .mnCon5 .con_box ul li .tit{padding: 0 10px 5px;height: 40px;font-size: 14px;line-height: 1.1;}
  .mnCon5 .con_box ul li a{height: 100%;}
  .mnCon5 .con_box ul li a::before{left: 10px;bottom: -5px;border-radius: 20px;}
  .mnCon5 .con_box .btnMore{top: -10px;right: 20px;}

  
}

/* mobile Device */
@media all and (max-width:500px){

  

}