@import url("https://use.typekit.net/dmj0vfa.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

/* font */
.ha{
    font-family: hwt-artz, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.05rem;
}

.enr{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.enb{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.kor{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kob{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.upp{ text-transform: uppercase;}

/* color */
.cm{ color: #a3cc01;}
.cs{ color: #263a4f;}
.cg{ color: #636d7a;}
.cf{ color: #fff;}
.c6{ color: #666;}
.c37{ color: #373737;}
.c87{color: #878787;}

/* ========== reset ============== */

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    -webkit-text-size-adjust: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: none;} 

address{font-style: normal;}
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, a, select{cursor: pointer; outline: none; color: #263a4f;} 
input{ outline: none;}

label.away{position: absolute;left: -999em;} 

/* 공통 */
body{ font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 400; color: #263a4f; overflow-x: hidden; transition: .5s;}
body > section{ width: 100%; height: auto; position: relative; overflow: hidden; }
.wrap1200{ width: 1200px; position: relative; margin: 0 auto; box-sizing: border-box; }
/* .video-box, #fullvideo {pointer-events: none;} */


/* 스크롤바 */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #a3cc01; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }


.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both;}


.pt80{ padding-top: 80px;}
.pt100{ padding-top: 100px;}
.pt120{ padding-top: 120px;}

.pb80{padding-bottom: 80px;}
.pb100{padding-bottom: 100px;}
.pb120{padding-bottom: 120px;}

.col-1{ width: 100%;}
.col-2{ width: 50%;}
.col-3{ width: 33.3%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}

.img{ background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 56.25%; position: relative;}

.btn01{ display: inline-block; width: 130px; height: 30px; text-align: center; line-height: 30px; font-size: 11px; color: #fff; border-radius: 15px; }

.btn02{ display: inline-block; width: 130px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #fff; border-radius: 20px;}

.btn-hover{ background-color: #a3cc01; transition: .3s; }
.btn-hover:hover{ background-color: #263a4f;}


.none-mo{ display: block!important;}
.none-pc{ display: none!important;}


/* swiper */
.swiper-button-next, .swiper-button-prev{ background-image: unset!important;}
.swiper-button-next i, .swiper-button-prev i{ font-size: 60px; color: #fff; opacity: .8;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .5;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-bullet{ width: 11px; height: 11px; background: transparent; opacity: 1; border: 1px solid #fff; margin: 0 5px; transition: .3s; box-shadow: 0 1px 1px rgba(51,51,51,0.2);}
.swiper-pagination-bullet-active{ position: relative; background: #fff; opacity: 1; }

/* full-swiper */
.full-pag{ position: absolute; bottom: 100px; left: 0; right: 0; margin: 0 auto;}
.full-next{ right: 100px;}
.full-prev{ left: 100px; }

/* room-swiper */
.room-tabarea{ font-size: 0; text-align: left;}
.room-tabarea li{ display: inline-block; }
.room-tabarea li a{ display: block; font-size: 16px; margin-right: 30px; padding-bottom: 5px; margin-bottom: 25px; position: relative; color: #263a4f; transition: .3s;}
.room-tabarea li a::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #a3cc01; transform: scaleX(0); transition: .3s;}

.room-tabarea li a.active{ color: #a3cc01;}
.room-tabarea li a.active::after{ transform: scaleX(1);}

.room-next{ right: -130px;}
.room-prev{ left: -130px;}
.room-next i, .room-prev i{ font-size: 60px; color: #263a4f; opacity: .8;}
.room-swiper .swiper-slide a.inner{ position: relative; display: block; width: 100%; height: auto; padding-bottom: 35px;}
.room-swiper .swiper-slide a.inner h4{ font-size: 14px; padding-top: 30px; padding-bottom: 20px;}
.room-swiper .swiper-slide a.inner .btn01{ background-color: #a3cc01; font-size: 11px; color: #fff; transition: .3s;}
.room-swiper .swiper-slide a.inner:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0px solid #a3cc01; transition: .3s; box-sizing: border-box;}
.room-swiper .swiper-slide:hover a.inner:after{border: 5px solid #a3cc01;}
.room-swiper .swiper-slide:hover a.inner .btn01{ background-color: #263a4f;}

.room-swiper .swiper-slide.hide{ display: none;}

/* special/swimming */
.common-section{ position: relative}

.common-section .tab-slidewrap{ display: none;}
.common-section .tab-slidewrap.active{ display: block;}


.common-section .info-area{ position: absolute; width: 500px; top: 22.92vw; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 1; display: none;}
.common-section .info-area h3{ font-size: 50px; line-height: 50px; text-shadow: 2px 0 2px rgba(51,51,51,0.6); padding-bottom: 20px;}
.common-section .info-area a.open{ left: 0; right: 0; margin: 0 auto; width: 45px; height: 45px; line-height: 45px; border-radius: 3px; border: 5px solid #fff; text-align: center; box-shadow: 2px 0 2px rgba(51,51,51,0.6);}
.common-section .info-area a.open img{ display: inline-block; width: 27px; height: 27px; position: relative; top: 3px; transition: .3s;}
.common-section .info-area a.open.active img{ transform: rotate(45deg); }

.common-section .full-tabarea{ position: absolute; top: 45.31vw; z-index: 1; width: 100%;}
.common-section .full-tabarea ul{ width: 100%; text-align: center;}
.common-section .full-tabarea li{ display: inline-block;}
.common-section .full-tabarea a{ font-size: 16px; line-height: 30px; text-shadow: 2px 0 2px rgba(51,51,51,0.6); opacity: .8; padding: 0 15px; transition: .3s;}
.common-section .full-tabarea a.active{ font-size: 30px; opacity: 1; line-height: 30px; }

.common-section .info-area .info{ display: none; width: 100%; height: 300px; background-color: rgba(255,255,255,.9); border: 5px solid #fff; padding: 25px 40px 0; overflow: hidden; position: relative; top: -3px;}
.common-section .info-area .info h4{ padding-bottom: 20px; margin-bottom: 30px; position: relative; font-size: 20px;}
.common-section .info-area .info h4:after{content: ''; position: absolute; display: block; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 20px; height: 2px; background-color: #263a4f;}
.common-section .info-area .info .fl{ width: 50%;}
.common-section .info-area .info .fl:last-child{ padding-left: 20px;}
.common-section .info-area .info li{ font-size: 14px; line-height: 18px; color: #263a4f; opacity: .8; text-align: left;}
.common-section .info-area .info li.tit{ opacity: 1; padding-bottom: 10px;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    body{ font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 400;  color: #263a4f; overflow-x: hidden; position: relative; }
    body > section{ width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}
    .none-mo{ display: none!important;}
    .none-pc{ display: block!important;}
    .wrap1200{ width: 100%; padding: 0 15px; position: relative; margin: 0 auto; box-sizing: border-box; }


    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: 33.3%;}
    .m-col-4{ width: 25%;}
    .m-col-5{ width: 20%;}

    .mpt20{ padding-top: 20px;}
    .mpt40{ padding-top: 40px;}
    .mpt50{ padding-top: 50px;}
    .mpt60{ padding-top: 60px;}

    .mpb40{padding-bottom: 40px;}
    .mpb50{padding-bottom: 50px;}
    .mpb60{padding-bottom: 60px;}

    body::-webkit-scrollbar {display: none; }


    .btn01{ display: inline-block; width: 100px; height: 30px; font-weight: 700; text-align: center; line-height: 30px; font-size: 12px; color: #fff; border-radius: 10px; }



    /* swiper */
    .swiper-button-next, .swiper-button-prev{ top: calc(50% - 30px);}
    .swiper-button-next i, .swiper-button-prev i{ font-size: 30px; }

    .swiper-pagination-bullet{ width: 8px; height: 8px; border: 1px solid #263a4f; margin: 0 2.5px; }
    .swiper-pagination-bullet-active{background: #263a4f; }

    .full-pag{ position: relative; padding-top: 15px; padding-bottom: 20px; bottom: 0; left: 0; right: 0; margin: 0 auto;}
    .full-next{ right: 24px;}
    .full-prev{ left: 24px; }

    /* room-swiper */
    .room-tabarea{ font-size: 0; text-align: center;}
    .room-tabarea li{ display: inline-block; }
    .room-tabarea li a{ display: block; font-size: 12px; margin-right: 5.5px; margin-left: 5.5px; margin-bottom: 20px; }
    .room-tabarea li a::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5px; }

    .room-swiper{ position: relative;}

    .room-next{ right: 18px; top: calc(50% + 40px);}
    .room-prev{ left: 18px; top: calc(50% + 40px);}
    .room-next i, .room-prev i{ font-size: 30px; color: #fff; }
    .room-pag{ position: absolute; bottom: 22px!important;}

    .room-swiper .swiper-slide a.inner{ position: relative; display: block; width: 100%; height: auto; padding-bottom: 48px;}
    .room-swiper .swiper-slide a.inner h4{ font-size: 12px; padding-top: 15px; padding-bottom: 15px;}
    .room-swiper .swiper-slide a.inner .btn01{ background-color: #a3cc01; font-size: 12px; color: #fff; transition: .3s;}
    .room-swiper .swiper-slide a.inner:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0px solid #a3cc01; transition: .3s; box-sizing: border-box;}
    .room-swiper .swiper-slide:hover a.inner:after{border: 3px solid #a3cc01;}
    .room-swiper .swiper-slide:hover a.inner .btn01{ background-color: #263a4f;}

   /* special/swimming */
    .common-section{ position: relative; margin-top: 75px;}

    .common-section .tab-slidewrap{ display: none;}
    .common-section .tab-slidewrap.active{ display: block; position: relative;}

    .common-section .tab-slidewrap .full-next, .common-section .tab-slidewrap .full-prev{ top: 50%;}

    .common-section .full-tabarea{ position: relative; top: 0; z-index: 1; width: 100%; height: 45px; }
    .common-section .full-tabarea ul{ width: 100%; height: 100%; text-align: center;}
    .common-section .full-tabarea li{ display: inline-block;}
    .common-section .full-tabarea a{ font-size: 15px; line-height: 45px; text-shadow: 2px 0 2px rgba(51,51,51,0); color: #263a4f; opacity: .3; padding: 0 7.5px; transition: .3s;}
    .common-section .full-tabarea a.active{ color: #a3cc01; font-size: 20px; opacity: 1; line-height: 45px; }


    .common-section .info-area{ position: relative; width: 100%; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 1; background-color: #f3f3f3; padding: 40px 15px 50px; text-align: left;}
    .common-section .info-area h3{ color: #263a4f; font-size: 25px; line-height: 25px; text-shadow: 2px 0 2px rgba(51,51,51,0); padding-bottom: 37.5px;}

    .common-section .info-area .info{ display: block!important; width: 100%; height: auto; background-color: unset; border: unset; padding: 0 15px; overflow: hidden; position: relative; top: 0;}
    .common-section .info-area .info h4{ padding-bottom: 20px; margin-bottom: 30px; position: relative; font-size: 12px;}
    .common-section .info-area .info h4:after{content: ''; position: absolute; display: block; bottom: 0; left: 0; right: unset; margin:unset; width: 20px; height: 2px; background-color: #263a4f;}
    .common-section .info-area .info .fl{ width: 50%; max-width: 172.5px;}
    .common-section .info-area .info .fl:last-child{ padding-left: 30px;}
    .common-section .info-area .info li{ font-size: 10px; line-height: 16px; color: #263a4f; opacity: .8; text-align: left;}
    .common-section .info-area .info li.tit{ font-size: 12px; opacity: 1; padding-bottom: 10px;}

}