@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Noto+Sans+KR&display=swap');
@import url("https://use.typekit.net/slo6myi.css");

@font-face {
    font-family: 'paybooc-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* 
    font-family: 'NanumBarunGothic', sans-serif;
    font-family: 'Chelsea Market', cursive;
    font-family: 'Nunito', sans-serif;
 */


/* ==========================================================================
   #FONT
   ========================================================================== */
.en{
    font-family: 'Concert One', cursive;
    font-weight: 400;
}
.ebg{
    font-family: brandon-grotesque,sans-serif;
    font-weight: 400;
    font-style: normal;  
}
.kol{
    font-family: 'paybooc-Light';
    font-weight: normal;
}
.kom{
    font-family: 'paybooc-Medium';
    font-weight: normal;
}
.kob{
    font-family: 'paybooc-Bold';
    font-weight: normal;
}
.noto{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}
.upp{
    text-transform: uppercase;
}
.cap{
    text-transform: capitalize;
}
.t-shadow{
    text-shadow: 0 0 30px rgba(0,0,0,.3);
}
/* ==========================================================================
   #COLOR
   ========================================================================== */
   .cf{color: #fff; transition: .5s;}
   .t-point1{color: #839e38; transition: .5s;}
   .c50{color: #505050; transition: .5s;}
   .c6d{color: #6d6d6d; transition: .5s;}
   .c8{ color: #888;}
/* ========== 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: 'paybooc-Light';
    -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, li {
	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;} 
input{ outline: none;}

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

/* 공통 */
body{ font-family: 'paybooc-Light'; font-size: 14px; color: #666; overflow-x: hidden; }
body > section{ width: 100%; height: 100vh; position: relative; overflow: hidden; }
.wrap1438{ width: 1438px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}

.content-wrap{ position: relative; z-index: 1;}
.content-wrap .tit h3{ font-size: 50px; padding-bottom: 15px; }
.content-wrap .tit .tit-deco{ display: inline-block; margin-bottom: 60px; width: 188px; height: 14px;}

.sub-content-wrap .tit p.upp{ font-size: 12px; padding-bottom: 25px; letter-spacing: 1px;}
.sub-content-wrap .tit h3{ font-size: 48px; padding-bottom: 30px; }
.sub-content-wrap .tit p.kor{ font-size: 13px; line-height: 24px; padding-bottom: 60px;}



.fullSlogan { position: absolute; left: 240px; bottom: 260px; text-align: left; z-index: 10;  width: 600px; }
.fullSlogan h2{ font-size: 70px; line-height: 70px;  padding-bottom: 25px; position: relative; width: 600px; }
.fullSlogan h3{ font-size: 20px; line-height: 40px;}

.swiper-button-prev, .swiper-button-next {outline: none !important;}

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

.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}

.col-1{ width: 100%;}
.col-2{ width: 50%;}
.col-3{ width: 33.33%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}
.col-7{ width: calc(100%/7);}

.img{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;  position: absolute; top: 0; left: 0; transition: .5s;}

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


.btn01{ display: inline-block; border: 1px solid #839e38; background-color: transparent; text-align: center; color: #505050; width: 150px; height: 40px; line-height: 38px; border-radius: 20px; transition: .5s; font-size: 16px; }
.btn01:hover{  border: 1px solid #839e38; background-color: #839e38; color: #fff;   }


/* loading */
#loading{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; background-color: #fff; z-index: 2000;}
#loading .circle{ position: absolute; width: 40px; height: 40px; left: 0; right: 0; margin: 0 auto; top: 48%; border-radius: 50%; background-color: #839e387a; transition: .5s;}
#loading .circle1{ 
    animation-name: circle1;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transition: .5s;}
#loading .circle2{ 
    animation-name: circle2;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transition: .5s;}
@keyframes circle1{
    0%{transform: scale(1);}
    50%{transform: scale(.3);}
    100%{ transform: scale(1);}
}
@keyframes circle2{
    0%{transform: scale(.3);}
    50%{ transform: scale(1);}
    100%{ transform: scale(.3);}
}

/* fullpage-nav */
#fp-nav.left{ left: 50px; top: unset; bottom: 200px;}
#fp-nav ul li, .fp-slidesNav ul li{ width: 12px; height: 12px; margin: 20px 0;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 12px; height: 12px; border-radius:6px; background:rgba(255,255,255,1); text-align: center; transition: .5s; left: 0; top: 0; margin: 0;}
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span{ width: 50px; height: 12px; border-radius: 6px; background: #fff; margin: 0; }
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{ width: 12px; height: 12px; margin: 0; }
/* addgreen */
#fp-nav.addgreen ul li a span, .fp-slidesNav.addgreen ul li a span{ background:#839e38;}
#fp-nav.addgreen ul li a.active span, 
.fp-slidesNav.addgreen ul li a.active span, 
#fp-nav.addgreen ul li:hover a.active span, 
.fp-slidesNav.addgreen ul li:hover a.active span{background: #d1ef7d; }
/* addgray */
#fp-nav.addgray ul li a span, .fp-slidesNav.addgray ul li a span{ background:#839e38;}
#fp-nav.addgray ul li a.active span, 
.fp-slidesNav.addgray ul li a.active span, 
#fp-nav.addgray ul li:hover a.active span, 
.fp-slidesNav.addgray ul li:hover a.active span{background: #a7a7a7; }
/* addpink */
#fp-nav.addpink ul li a span, .fp-slidesNav.addpink ul li a span{ background:#fff;}
#fp-nav.addpink ul li a.active span, 
.fp-slidesNav.addpink ul li a.active span, 
#fp-nav.addpink ul li:hover a.active span, 
.fp-slidesNav.addpink ul li:hover a.active span{background: #e99abd; }
/* addwgray */
#fp-nav.addwgray ul li a span, .fp-slidesNav.addwgray ul li a span{ background:#fff;}
#fp-nav.addwgray ul li a.active span, 
.fp-slidesNav.addwgray ul li a.active span, 
#fp-nav.addwgray ul li:hover a.active span, 
.fp-slidesNav.addwgray ul li:hover a.active span{background: #c1cf9c; }
/* addgpink */
#fp-nav.addgpink ul li a span, .fp-slidesNav.addgpink ul li a span{ background:#839e38;}
#fp-nav.addgpink ul li a.active span, 
.fp-slidesNav.addgpink ul li a.active span, 
#fp-nav.addgpink ul li:hover a.active span, 
.fp-slidesNav.addgpink ul li:hover a.active span{background: #e99abd; }



/* scroll */
.scrolldown{ display: block; width: 120px; height: 60px; left: 0; right: 0; margin: 0 auto; text-align: center;}
.scrolldown p{ font-size: 12px;}


.fullimg-tit .scroll-ani div, #section1 .scroll-ani div{background-color: #222;}



.scroll-ani{ text-align: center; height: 35px; margin-bottom: 25px; position: relative;}
.scroll-ani div{ display: inline-block; background-color: #fff;}
.scroll-ani div.line{ width: 1px; height: 35px;}
.scroll-ani div.dot{ width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 0; right: 0; margin: 0 auto;
    animation-name: dotdown;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
    transition: .5s;}

@keyframes dotdown{
    0%{
        top: 0;
    }
    70%{
        top: 30px;
    }
    100%{
        top: 30px;
    }
}

/* swiper */
.swiper-button-next i, .swiper-button-prev i{ font-size: 60px; color: #839e38; opacity: 1;}
.swiper-button-next i{ position: relative; left: 3px;}
.swiper-button-prev i{ position: relative; right: 3px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-image: none!important; width: 63px; height: 63px; border-radius: 50%; line-height: 59px; background-color: #fff; border: 2px solid #839e38; transition: .5s;}
.swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover,
.swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{background-color: #839e38; border: 2px solid #839e38; transition: .5s;}
.swiper-button-next:hover i, .swiper-button-prev:hover i{ color: #fff; opacity: 1;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: 0;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-bullet{ width: 12px; height: 12px; border-radius: 6px; background: #fff; opacity: 1; margin: 0 10px!important; transition: .5s; }
.swiper-pagination-bullet-active{ width: 40px; border-radius: 6px; position: relative; opacity: 1; background: #839e38;}

#blackbg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,0.9); z-index: 1001; display: none;}


/* room-swiper */
.room-tit-wrap{ padding-bottom: 50px;}
.room-tit-wrap h3{ font-size: 50px;}
.room-tit-wrap h3 span{ font-size: 18px; padding-left: 15px; position: relative; top: -6px; }
.room-swiper{ overflow: hidden;}
.room-swiper a.inner{ display: block; position: relative; width: 100%; height: auto; font-size: 0; overflow: hidden; border-radius: 10px; text-align: center; padding-bottom: 30px;}
.room-swiper a.inner:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; border: 2px solid #839e38; box-sizing: border-box; opacity: 0; transition: .5s; }
.room-swiper .swiper-slide:hover a.inner:after{ opacity: 1; }
.room-swiper .swiper-slide:hover .btn01{  border: 1px solid #839e38; background-color: #839e38; color: #fff;   }
.room-swiper .img-wrap{ position: relative; width: 100%; height: 520px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition: .5s; overflow: hidden;}
.room-swiper .swiper-slide:hover .img-wrap{ border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.room-swiper h3{ font-size: 20px; line-height: 20px; padding-top: 30px; padding-bottom: 15px;}
.room-swiper p{ font-size: 12px; line-height: 12px; padding-bottom: 20px;}
.room-swiper p span{ padding-right: 12px;}

.room-next{ top: calc(50% - 10px); right: -126px;}
.room-prev{ top: calc(50% - 10px); left: -126px; }



/* fac,travel */
.fac-swiper, .travel-swiper{ overflow: hidden; padding: 0 40px;}
.fac-swiper a.inner, .travel-swiper a.inner{ display: block; position: relative; width: 100%; height: auto; font-size: 0;border-radius: 10px; text-align: center; padding-bottom: 30px;}
.fac-swiper .swiper-slide:hover .btn01, .travel-swiper .swiper-slide:hover .btn01{  border: 1px solid #839e38; background-color: #839e38; color: #fff;   }
.fac-swiper .img-wrap, .travel-swiper .img-wrap{ position: relative; width: 453px; height: 453px; border-radius: 50%; transition: .5s; overflow: hidden; }
.fac-swiper .img-wrap p, .travel-swiper .img-wrap p{ position: absolute; top: 48%; text-align: center; width: 100%; font-size: 16px; opacity: 0; }
.fac-swiper .swiper-slide:hover .img-wrap p, .travel-swiper .swiper-slide:hover .img-wrap p{ opacity: 1;}
.fac-swiper .img-wrap .img, .travel-swiper .img-wrap .img{ opacity: .7; }
.fac-swiper .swiper-slide:hover .img-wrap .img, .travel-swiper .swiper-slide:hover .img-wrap .img{ opacity: 1; }
.fac-swiper .swiper-slide:hover .img-wrap, .travel-swiper .swiper-slide:hover .img-wrap{ box-shadow: 0 29px 49px rgba(159,159,159,.4); }

.fac-swiper h3, .travel-swiper h3{ font-size: 20px; line-height: 20px; padding-top: 30px; padding-bottom: 30px;}

.fac-next, .travel-next{ top: calc(50% - 80px); right: -86px;}
.fac-prev, .travel-prev{ top: calc(50% - 80px); left: -86px; }


#full-section{ width:100%; height:calc(100vh - 80px); position:relative; color:#fff; background-color: #222; font-size:24px; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; margin-top: 80px;}
#full-section .text-wrap{ position: absolute; top: 45%; z-index: 10; width: 700px; left: 0; right: 0; margin: 0 auto; text-align: center;}
#full-section .text-wrap h3{ font-size: 70px; padding-bottom: 26px; line-height: 60px;}
#full-section .text-wrap p{ font-size: 22px;}

/* full-swiper */
.full-swiper{ width: 100%; height: 100%; overflow: hidden;}
.full-swiper .img-wrap{ width: 100%; height: 100%; }

.full-pag{ display: block; position: absolute; text-align: center; bottom: 100px; width: 100%; }
.full-next{ right: 50px;}
.full-prev{ left: 50px; }
.full-swiper .swiper-button-next.swiper-button-disabled, .full-swiper .swiper-button-prev.swiper-button-disabled{ opacity: .5;}




/* =================== 1023px =================== */
@media (max-width: 1023px) {
    body{ font-family: 'paybooc-Light'; font-size: 12px;  color: #555; 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;}
    .wrap1438{ width: 100%; padding: 0 10px; position: relative; margin: 0 auto; box-sizing: border-box; }
    #full-section{ width:100%; height:0; padding-top: 56.25%; position:relative; color:#fff; font-size:24px; background-size: cover; background-repeat: no-repeat; background-position: center; margin-top: 50px;}
    #full-section .text-wrap{ position: absolute; top: 43%; z-index: 10; width: 300px; left: 0; right: 0; margin: 0 auto; text-align: center;}
    #full-section .text-wrap h3{ font-size: 28px; padding-bottom: 10px; line-height: 24px;}
    #full-section .text-wrap p{ font-size: 11px;}

    
    .fullSlogan { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: unset; top: calc(50% - 50px); text-align: left; z-index: 10;  width: 300px; text-align: center; }
    .fullSlogan h2{ font-size: 28px; line-height:28px;  padding-bottom: 0; position: relative; width: auto; }
    .fullSlogan h3{ font-size: 11px; line-height: 20px;}


    #fp-nav.left{ display: none;}


    .content-wrap .tit h3{ font-size: 30px; padding-bottom: 10px;}
    .content-wrap .tit .tit-deco{ width: 94px; height: 7px; margin-bottom: 25px;}

    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}


    .btn01{ width: 80px; height: 20px; line-height: 18px; border-radius: 10px; transition: .5s; font-size: 10px; }
    .btn01.en{ line-height: 14px;}




    .swiper-button-next i, .swiper-button-prev i{ font-size: 25px; color: #839e38; opacity: 1;}
    .swiper-button-next i{ position: relative; left: 1px;}
    .swiper-button-prev i{ position: relative; right: 1px;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev,
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-image: none!important; width: 29px; height: 29px; border-radius: 50%; line-height: 27px; background-color: #fff; border: 1px solid #839e38; transition: .5s;}
    
    .swiper-pagination-bullet{ width: 6px; height: 6px; border-radius: 3px; background: #fff; opacity: 1; margin: 0 5px!important; transition: .5s; }
    .swiper-pagination-bullet-active{ width: 20px; border-radius: 3px; position: relative; opacity: 1; background: #839e38;}
    
    /* room-swiper */
    .room-tit-wrap{ padding-bottom: 20px; text-align: center;}
    .room-tit-wrap h3{ font-size: 25px; line-height: 20px;}
    .room-tit-wrap h3 span{ font-size: 11px; padding-left: 0; top: 0;}
    .room-swiper a.inner{ border-radius: 5px;padding-bottom: 15px;}
    .room-swiper a.inner:after{ border-radius: 5px; border: 1px solid #839e38;}
    .room-swiper .img-wrap{ height: 46.40vw; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
    .room-swiper .swiper-slide:hover .img-wrap{ height: 46.40vw; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
    .room-swiper h3{ font-size: 14px; line-height: 14px; padding-top: 15px; padding-bottom: 4px;}
    .room-swiper p{ font-size: 10px;
        line-height: 12px;
        padding-bottom: 10px;}
    .room-swiper p span{ padding-right: 5px;}

    .room-next{ top: unset; bottom: 31.33vw; right: 5px;}
    .room-prev{ top: unset; bottom: 31.33vw; left: 5px; }

    /* fac,travel */
    .fac-swiper, .travel-swiper{ overflow: hidden; padding: 0;}
    .fac-swiper a.inner, .travel-swiper a.inner{ padding-bottom: 0;}
    .fac-swiper .swiper-slide:hover .btn01, .travel-swiper .swiper-slide:hover .btn01{  border: 1px solid #839e38; background-color: #839e38; color: #fff;   }
    .fac-swiper .img-wrap, .travel-swiper .img-wrap{ width: 42.40vw; height: 42.40vw; display: inline-block; }
    .fac-swiper .img-wrap p, .travel-swiper .img-wrap p{ position: absolute; top: 48%; text-align: center; width: 100%; font-size: 10px; opacity: 0; }
    .fac-swiper .swiper-slide:hover .img-wrap, .travel-swiper .swiper-slide:hover .img-wrap{ box-shadow: 0 15px 20px rgba(159,159,159,.4); }

    .fac-swiper h3, .travel-swiper h3{ font-size: 12px; line-height: 12px; padding-top: 10px; padding-bottom: 10px;}

    .fac-next, .travel-next{ top: unset; bottom: calc(40px + 20.33vw); right: 0;}
    .fac-prev, .travel-prev{ top: unset; bottom: calc(40px + 20.33vw); left: 0; }




    /* full-swiper */
    .full-swiper{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .full-swiper .img-wrap{ width: 100%; height: 100%; }
    
    .full-pag{ display: block; position: absolute; text-align: center; bottom: 15px; width: 100%;}
    .full-next{ right: 5px;}
    .full-prev{ left: 5px; }




    /* scroll */
    .scrolldown{ display: block; width: 120px; height: 50px; left: 0; right: 0; margin: 0 auto; text-align: center;}
    .scrolldown p{ font-size: 10px;}

    .scroll-ani{ height: 24px; margin-bottom: 15px;}
    .scroll-ani div.line{ width: 1px; height: 24px;}
    @keyframes dotdown{
        0%{
            top: 0;
        }
        70%{
            top: 19px;
        }
        100%{
            top: 19px;
        }
    }
    
}