@charset "utf-8";

/*-------------------------- common css --------------------------*/
.hr{height:1px;border-bottom:1px solid #dddddd; width: 100%;}
.hr1200{height:1px;border-bottom:1px solid #dddddd; width: 1200px; margin: 0 auto;}
.hrblack{height:1px;border-bottom:1px solid #000; width: 100%;}
.hrgrey{height:1px;border-bottom:1px solid #ccc; width: 100%;}
.hrblank{height:1px; width: 100%;}
.border{ border-bottom:1px solid #cccccc;}
.btNoene{border-top: none !important;}
.btop1{border-top: 1px solid #ddd;}
.bbot1{border-bottom: 1px solid #ddd;}
.displayB{ display: block !important;}
.displayIB{ display: inline-block;}
.displayN{display: none;}
.underline {text-decoration:underline;}
.notScroll {overflow: hidden;width: 100%; height: 100vh; touch-action:none;}

/* font color, style */
.orange{color:#ff970f;}
.blue{color:#007bc2 !important;}
.skyblue{color:#e7edee !important;}
.red {color:#e61818 !important;}
.beige{color:#f6f3e0;}
.darkGray{ color: #535b5d !important;}
.white{ color: #fff !important;}
.en {font-family: 'Playfair Display', serif;}

.center{ text-align: center !important;}
.left{ text-align: left !important;}
.right{ text-align: right !important;}
.marginA{ margin: auto !important;}
.fl-l{ float: left !important;}
.fl-r{ float: right !important;}

.font14{ font-size: 14px !important;}
.font16{ font-size: 16px !important;}
.font18{ font-size: 18px !important;}
.font20{ font-size: 20px !important;}
.font24{ font-size: 24px !important;}
.preLine{ white-space: pre-line;}

.wp10{ width: 10% !important;}
.wp15{ width: 15% !important;}
.wp20{ width: 20% !important;}
.wp25{ width: 25% !important;}
.wp27{ width: 27% !important;}
.wp28{ width: 28% !important;}
.wp30{ width: 30% !important;}
.wp32{ width: 32% !important;}
.wp33{ width: 33% !important;}
.wp34{ width: 34% !important;}
.wp35{ width: 35% !important;}
.wp40{ width: 40% !important;}
.wp45{ width: 45% !important;}
.wp50{ width: 50% !important;}
.wp60{ width: 60% !important;}
.wp70{ width: 70% !important;}
.wp80{ width: 80% !important;}wp90wp90
.wp90{ width: 90% !important;}
.wp9155{ width: 91.55% !important;}
.wp97{ width: 97% !important;}
.wp100{ width: 100% !important;}
.height60{ height: 60px !important;}
.height100{ height: 100px !important;}
.height200{ height: 200px !important;}
.height300{ height: 300px !important;}
.height400{ height: 400px !important;}
.height500{ height: 500px !important;}

.marginRight2{ margin-right: 2% !important;}
.margin0{ margin: 0px auto !important;}
.margin5{ margin: 5px auto;}
.margin10{ margin: 10px auto;}
.margin15{ margin: 15px auto;}
.margin20{ margin: 20px auto;}
.margin25{ margin: 25px auto;}
.margin30{ margin: 30px auto !important;}
.margin40{ margin: 40px auto;}
.margin50{ margin: 50px auto;}
.padding0{padding: 0 !important;}
.padding5{padding:5px 0 !important;}
.padding10{padding:10px 0 !important;}
.padding15{padding:15px 0 !important;}
.padding20{padding:20px 0 !important;}
.padding30{padding:30px 0 !important;}
.padding50{padding:50px 0 !important;}
.padding70{padding:70px 0 !important;}

.mt0{margin-top: 0 !important;}
.mt10{ margin-top:10px !important;}
.mt20{ margin-top:20px !important;}
.mt30{ margin-top:30px !important;}
.mt50{ margin-top:50px !important;}
.mt60{ margin-top:60px !important;}
.mt100{ margin-top:100px !important;}
.mr0{margin-right: 0 !important;}
.pt0{ padding-top:0px !important;}
.pt5{ padding-top:5px !important;}
.pt10{ padding-top:10px !important;}
.pt15{ padding-top:15px !important;}
.pt20{ padding-top:20px !important;}
.pt30{ padding-top:30px !important;}
.pt45{padding-top: 45px !important;}
.pt50{padding-top: 50px !important;}
.pr5{padding-right: 5px !important;}

.mb0{ margin-bottom:0px !important;}
.mb8{ margin-bottom:8px !important;}
.mb10{ margin-bottom:10px !important;}
.mb15{ margin-bottom:15px !important;}
.mb20{ margin-bottom:20px !important;}
.mb30{ margin-bottom:30px !important;}
.mb40{ margin-bottom:40px !important;}
.mb50{ margin-bottom:50px !important;}
.mb70{ margin-bottom:70px !important;}
.mb80{ margin-bottom:80px !important;}
.mb100{ margin-bottom:100px !important;}
.mb250{ margin-bottom:250px !important;}
.pb0{ padding-bottom: 0px !important;}
.pb5{ padding-bottom: 5px !important;}
.pb10{ padding-bottom: 10px !important;}
.pb15{ padding-bottom: 15px !important;}
.pb20{ padding-bottom: 20px !important;}
.pb30{ padding-bottom: 30px !important;}
.pb40{ padding-bottom: 40px !important;}
.pb50{ padding-bottom: 50px !important;}
.pb70{ padding-bottom: 70px !important;}

/*---------------------------- main contents_all ---------------------------*/
/*------- section01 -------*/
#section-01 {
    position: relative;
    top: 0;
    width: 100%;
    height: 937px;
    z-index: 9;
}
.sec-01-tit {font-size: 36px; letter-spacing: 0.9px; color: #e1e1e1;  position: absolute; z-index: 9; right: 50%; transform: translateX(50%); top: 40%; padding-bottom: 6px; font-weight: 600;}

.sec-01-tit .main-logo {display: block; margin: 0 auto 15px;}
.sec-01-tit .big {font-size: 44px; letter-spacing: 1.1px; text-transform: uppercase;}
.sec-01-tit .sub {display: block; font-size: 18px; letter-spacing: -0.45px; font-family: 'noto sans, serif'; text-align: center; font-weight: 400;}

/* Swiper slide */
.sec-01-slide {overflow: hidden;  position: relative;  width: 100%;  height: 937px;}
.sec-01-slide img {width: 100%; object-fit:cover; height: 937px;} 

.mySwiper .swiper-slide img{
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: -webkit-transform 3s; 
    transition: -webkit-transform 3s; 
    transition: transform 3s; 
    transition: transform 3s, -webkit-transform 3s; 
}
.mySwiper .swiper-slide-active img{
    -webkit-transform: scale(1.04); 
    transform: scale(1.04); 
}

/* 추가된 CSS */
.swiper-horizontal>.mySwiper .swiper-pagination-bullets, .mySwiper .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { width: 100% !important; bottom: 192px}
.mySwiper .swiper-horizontal>.mySwiper .swiper-pagination-bullets .swiper-pagination-bullet, .mySwiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 7px !important}

.mySwiper .swiper-pagination-bullet {
    width: 80px !important;
    height: 2px !important;
    display: inline-block;
    border-radius: 0 !important;
    opacity: 0.55 !important;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.25) !important;
}
.mySwiper .swiper-pagination-bullet::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mySwiper .swiper-pagination-bullet-active {
    background-color: rgba(255, 255, 255, 0.25) !important;
}
.mySwiper .swiper-pagination-bullet-active::before {
    background-color: rgba(255, 255, 255, 0.75);
    animation: slide-progress 2s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.mySwiper .swiper-paused .swiper-pagination-bullet-active::before {
    animation-play-state: paused;
}
@keyframes slide-progress {
    0% {
        transform: translateX(-100%);
   }
    100% {
        transform: translateX(0);
   }
}

/* Layer pop */
.main-pop {position: absolute; top: 120px; z-index: 99; width: 500px; height: 700px;}
.mySwiperpop .swiper-pagination { position: relative; bottom: -0 !important; padding-top: 8px;}
.mySwiperpop .swiper-pagination-bullet {background-color: #00000000; border: 1px solid #ffffff !important; opacity: 1 !important; width: 15px; height: 15px;}
.mySwiperpop .swiper-pagination-bullet-active {background: #ffffff !important;}

/*------- section02 -------*/
#section-02 {
    position: relative;
    top: 0;
    width: 100%;
    min-width: 1280px;
    height: 1320px;
    background-color: #e7edee;
}
.sec-02-top {background: url('../images/main/sec02_bg_top.png') no-repeat top / 100%; width: 100%; height: 100%;}
.sec-02-tit {font-size: 46px; letter-spacing: 0.9px; color: #fff; text-transform: uppercase; font-weight: 600; padding: 100px 0 50px;}
.sec-02-tit .big {font-size: 58px; letter-spacing: 1.1px;}
.sec-02-tit .sub {display: block; font-size: 18px; letter-spacing: -0.45px; font-family: 'noto sans, serif'; font-weight: 400; color: #d6cc82;}

/* Swiper slide */
.sec-02-slide {overflow: hidden;  position: relative;  width: 100%;  height: 937px;}
.sec-02-slide .img-box{width: 100%; height: auto; overflow: hidden;} 
.img-box ul {width: 100%; height: auto; position: relative;} 
.img-box ul li{display: inline-block;} 
.img-box ul li:nth-child(1){width: 49%; height: 947px; margin-right: 1%;} 
.img-box ul li:nth-child(2){width: 50%; height: 465px; position: absolute; top: 0;} 
.img-box ul li:nth-child(3){max-width: 680px; height: auto; position: absolute; bottom: 100px; left: 53%; transform: translateX(-50%);} 
.img-box ul li img {width: 100%; height: 100%; overflow: hidden; object-fit: cover;}
.img-box .img-tit {text-align: right; font-size: 32px; line-height: 40px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); position: absolute; bottom: 73px; right: 91px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); font-weight: 600;}

.img-box .content {width: 100%; height: 100%;}
.img-box .content .course-tit{font-size: 40px; line-height: 40px; text-transform: uppercase; color: #a99d5f; padding-bottom: 5px; font-weight: 900;}
.img-box .content .course-sub{font-size: 24px; line-height: 36px; color: #535b5d; font-weight: 500; padding-bottom: 14px;}
.img-box .content .course-con{font-size: 17px; line-height: 29px; letter-spacing: -0.43px; color: #535b5d; padding-bottom: 40px;}

/* Swiper animation */
.fade-in-left {
	-webkit-animation: fade-in-left 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-30px);
              transform: translateX(-30px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
.fade-in-right {
	-webkit-animation: fade-in-right 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation-delay: 0.5s;
}
@keyframes fade-in-right {
    0% {
      -webkit-transform: translateX(20px);
              transform: translateX(20px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
.fadeIn {
	-webkit-animation: fadeIn 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fadeIn 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation-delay: 1.2s;
}
@keyframes fadeIn {
    0% {
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(10px);
                transform: translateX(10px);
        opacity: 1;
      }
    }
.img-box .content .sec-02-btn {
    display: block;
    width: 160px;
    height: 48px;
    background: #a99d5f;
    border-radius: 8px 0;
    padding: 12px 0;    
    color: #fff !important;
    font-size: 17px;
    text-align: center;
    text-transform: uppercase;    
    cursor: pointer;
  }  

/* 추가된 CSS */
.swiper-horizontal>.mySwiper_02 .swiper-pagination-bullets, .mySwiper_02 .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {width: auto !important; top: 95px; left: 65px;}
.mySwiper_02 .swiper-horizontal>.mySwiper_02 .swiper-pagination-bullets .swiper-pagination-bullet, .mySwiper_02 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {display: flex !important;}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
    right: 0 !important;
    left: 62px !important;
    top: 94px !important;
    transform:none !important; 
    width: 30px !important;
    height: 500px !important;
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 !important;
    display: block;
}
.mySwiper_02 .swiper-pagination-bullet {
    width: 10px !important;
    height: 300px !important;
    display: inline-block;
    border-radius: 0 !important;
    position: relative;
    background-color: #ffffff00;
    opacity: 1 !important;
}
.mySwiper_02 .swiper-pagination-bullet::before{ transition: 0.3s color ease; font-size: 16px; color: hsla(0, 0%, 100%, 0.35);  font-family: 'Playfair Display', serif;}
.mySwiper_02 .swiper-pagination-bullet::after{ position: absolute; content: ''; width: 2px; height: 88px; background-color: rgba(255, 255, 255, 0.35); display: block;}

.mySwiper_02 .swiper-pagination-bullet:nth-of-type(1) {width: 10px !important; height: 200px !important;}
.mySwiper_02 .swiper-pagination-bullet:nth-of-type(1)::before{ content: 'Beach Course'; display: block;  writing-mode: vertical-rl; position: absolute;}
.mySwiper_02 .swiper-pagination-bullet:nth-of-type(1)::after{right: -1px; top:103px;}

.mySwiper_02 .swiper-pagination-bullet:nth-of-type(2) {width: 10px !important; height: 250px !important;}
.mySwiper_02 .swiper-pagination-bullet:nth-of-type(2)::before{ content: 'Stone Course'; display: block; writing-mode: vertical-rl; position: absolute;}
.mySwiper_02 .swiper-pagination-bullet:last-child::after{display: none;}

.mySwiper_02 .swiper-pagination-bullet-active::before{ color: rgb(255, 255, 255) !important; transition: 0.3s all;}
.mySwiper_02 .swiper-pagination-bullet-active::after{ background-color: rgb(255, 255, 255) !important; transition: 0.3s all;}

/*------- section03 -------*/
#section-03 {
    position: relative;
    top: 0;
    width: 100%;
    height: 937px;
    background-color: #fff;
}
.sec-03-con {width: 100%; height: auto;}
.sec-03-tit {font-size: 46px; letter-spacing: 0.9px; color: #535b5d; text-transform: uppercase; padding-bottom: 6px; font-weight: 600; padding: 100px 0 50px; text-align: center;}
.sec-03-tit .big {font-size: 58px; letter-spacing: 1.1px;}
.sec-03-tit .sub {display: block; font-size: 18px; letter-spacing: -0.45px; font-family: 'noto sans, serif'; font-weight: 400;}

/* Slick slide */
.sec-03-slide {width: 86%; height: auto; margin: 0 auto;}
.sec-03-slide .sec-03-slide {width: 100%; height: auto; margin: 0 auto; }
.sec-03-slide .slick-initialized .slick-slide {width: 352px !important; margin-right: 20px; display: inline-block; overflow: hidden !important;}
.sec-03-slide .slider-wrap { width: 100% !important; display: inline-block !important;}
.sec-03-slide .slider-wrap .cont a {overflow: hidden !important; display: block;}
.sec-03-slide .slider-wrap .cont a img { width: 100%; height: 352px; overflow: hidden; transition: 0.2s all ease;  margin-bottom: 24px;}
.sec-03-slide .slider-wrap .cont a .img-area{ height: 352px; overflow: hidden; margin-bottom: 15px;}
.sec-03-slide .slider-wrap .cont a .img-area img { width: auto;}
.sec-03-slide .slider-wrap .cont a:hover .img-area img{ transform: scale(1.1); filter: brightness(80%);}
.sec-03-slide .slider-wrap .cont .tit {color: #535b5d; font-size: 22px; margin-bottom: 5px; font-weight: 300; letter-spacing: -0.55px; font-weight: 600; position: relative; display: inline-block;}
.sec-03-slide .slider-wrap .cont .tit:hover {color: #2f3334;}
.sec-03-slide .slider-wrap .cont .tit:hover::after {position: absolute; content: ''; width: 100%; height: 1px; background-color: #2f3334; bottom: -3px; left: 0; transition: 0.2s all ease; }
.sec-03-slide .slider-wrap .cont .con {color: #535b5d; font-size: 16px; line-height: 29px; letter-spacing: -0.4px; font-weight: 300;}
.sec-03-slide .slick-dots{
    position:absolute !important; 
    width:100% !important; 
    height: 2px !important; 
    bottom: -65px !important;
    display:flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    align-items: center !important; 
    align-content: flex-end !important; 
    background: #cccccc; 
    overflow: hidden !important;
}
.sec-03-slide .slick-dots li{
    width: 25% !important;
    height: 100% !important; 
    background: #cccccc !important; 
    transition:0.5s all !important;
    margin: 0 !important;
}
.sec-03-slide .slick-dots li button:before{font-size: 0 !important;}
.sec-03-slide .slick-dots li.slick-active{background: #306b8e !important; transition:0.5s all;}

/*------- section04 -------*/
#section-04 {
    position: relative;
    top: 0;
    width: 100%;
    height: 480px;
  }
.sec-04-con {width: 100%; height: auto; font-size: 0;}

.sec-04-left {width: 50%; height: 480px; float: left; position: relative; margin: 0; overflow: hidden;}
.sec-04-left .line-effect {width: 95%; height: 90%; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px 0; position: absolute; transform: translate(2.5%, 5.5%); z-index: 100;}

.sec-04-left .con-area {width: 100%; height: auto; color: #fff; position: absolute; top: 50%; transform: translateY(-50%);text-align: center; z-index: 101;}
.sec-04-left .con-area .tit {font-size: 40px; text-transform: uppercase; font-weight: 600; padding-bottom: 15px;}
.sec-04-left .con-area .con {font-size: 17px; line-height: 29px; font-weight: 300; padding-bottom: 35px;}
.sec-04-left .img-area{width: 100%; height: 100%; overflow: hidden;} 
.sec-04-left .img-area img{width: 100%; height: 100%;}
.sec-04-left:hover .img-area img{ transform: scale(1.1); transition: 0.5s;}
.sec-04-left .sec-04-btn {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 48px; 
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px 0;
    padding: 10px 0;    
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;    
    transition: all 0.2s ease-out;
    cursor: pointer;
  }
.sec-04-left .sec-04-btn:hover {background-color: #2f3334; border: 1px solid #2f3334;}
.sec-04-right {width: 50%; height: 480px;float: left; position: relative; overflow: hidden;}
.sec-04-right .line-effect {width: 95%; height: 90%; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px 0; position: absolute; transform: translate(2.5%, 5.5%); z-index: 100;}
.sec-04-right .con-area {width: 100%; height: auto; color: #fff; position: absolute; top: 50%; transform: translateY(-50%);text-align: center; z-index: 101;}
.sec-04-right .con-area .tit {font-size: 40px; text-transform: uppercase; font-weight: 600; padding-bottom: 15px;}
.sec-04-right .con-area .con {font-size: 17px; line-height: 29px; font-weight: 300; padding-bottom: 35px;}
.sec-04-right .img-area{width: 100%; height: 100%; overflow: hidden;} 
.sec-04-right .img-area img{width: 100%; height: 100%;}
.sec-04-right:hover .img-area img{ transform: scale(1.1); transition: 0.5s;}
.sec-04-right .sec-04-btn {
  display: block;
  margin: 0 auto;
  width: 140px;
  height: 48px; 
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px 0;
  padding: 10px 0;    
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;    
  transition: all 0.2s ease-out;
  cursor: pointer;
  }
.sec-04-right .sec-04-btn:hover {background-color: #2f3334; border: 1px solid #2f3334;}

/*=============================== tomas 추가 ======================= */
/* 메인팝업*/
.main-pop {
  position: absolute;
  top: 15%;
  z-index: 100;
  width: 300px;
  display: none;
}

.pop-slider {
  border-bottom: 0;
  width: 100%;
  margin: 0 auto;
}

.main-pop .pop-close {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #211b34;
  color: #fff;
  padding: 0 16px;
  line-height: 40px;
  margin: -1px auto 0;
}
.main-pop .pop-close a {
  display: inline-block;
}
.btn-pop-close {
  color: #fff;
}