@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@font-face {
    font-family: 'BernadineAleyshia';
    src: url('../font/BernadineAleyshia.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
    #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: 'Pretendard';
    -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;} 

/* ==========================================================================
    #FONT
   ========================================================================== */
/* 
    font-family: 'Pretendard';
    font-family: 'BernadineAleyshia';
*/
.ko{
    font-family: 'Pretendard';
}  

.en{
    font-family: 'BernadineAleyshia';
}


.re{ font-weight: 400;}
.med{ font-weight: 500;}
.sebold{ font-weight: 600;}
.bold{ font-weight: 700;}

.upp{
    text-transform: uppercase;
}
.cap{
    text-transform: capitalize;
}
.t-shadow{
    text-shadow: 2px 0px 4px rgba(0,0,0,.2);
}

/* ==========================================================================
    #FONTSIZE
========================================================================== */
.f12{ font-size: 12px;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f24{ font-size: 24px;}
.f32{ font-size: 32px;}
.f40{ font-size: 40px;}
.f60{ font-size: 60px;}
.f120{ font-size: 120px;}


/* ==========================================================================
    #COLOR
========================================================================== */
:root {
    --color1: #EEF7F5;
    --color2: #81A69B;
    --point: #FFDDAA;
    --cf: #fff;
    --c9: #999;
    --c70: #707070;
    --c8: #888;
    --c2: #222;
}

.cf{color: var(--cf); }
.color1{color: var(--color1);}
.color2{ color: var(--color2); }
.point{ color: var(--point);}
.c2{color: var(--c2); }
.c70{color: var(--c70); }
.c8{ color: var(--c8);}
.c9{ color: var(--c9);}

.op4{ opacity: .4;}


::selection{ background-color: var(--color2); color: #fff;}


/* ==========================================================================
    #COL
    ========================================================================== */
.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);}


/* ==========================================================================
    #BTN
    ========================================================================== */
#btn-wrap{ position: relative;}
#btn-wrap.p-side.btn-prev{ height: 80px; width: 184px;}
#btn-wrap.p-side.btn-next{ height: 80px; width: 156px;}
#btn-wrap.p-side > p{ position: absolute; transition: .5s; display: inline-block; width: fit-content;}

#prevnext{ display: inline-block; height: 80px; width: 115px; position: absolute;}
#prevnext .circle{ position: absolute; display: block; width: 80px; height: 80px; border-radius: 50%; transition: .5s;}
#prevnext .line{ position: absolute; display: block; width: 40px; height: 1px; transition: .5s;}
#prevnext .line:after{ content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; display: block; top: -5px; transition: .5s;}

#btn-wrap.color-g > p{ color: #888;}
#btn-wrap.color-g #prevnext .circle{ border: 1px solid #888;}
#btn-wrap.color-g #prevnext .line{ background-color: #888;}
#btn-wrap.color-g #prevnext .line:after{ background-color: #888;}

#btn-wrap.color-w > p{ color: #fff; opacity: .7;}
#btn-wrap.color-w #prevnext .circle{ border: 1px solid #fff; opacity: .7;}
#btn-wrap.color-w #prevnext .line{ background-color: #fff; opacity: .7;}
#btn-wrap.color-w #prevnext .line:after{ background-color: #fff; opacity: .7;}

#btn-wrap.p-side.btn-prev > p{ right: 0;}
#btn-wrap.btn-prev #prevnext{ left: 0;}
#btn-wrap.btn-prev #prevnext .circle{ left: 0; top: 0;}
#btn-wrap.btn-prev #prevnext .line{ right: 0; top: 50%;}
#btn-wrap.btn-prev #prevnext .line:after{ left: 0; }

#btn-wrap.p-side.btn-next > p{ left: 0;}
#btn-wrap.btn-next #prevnext{ right: 0;}
#btn-wrap.btn-next #prevnext .circle{ right: 0; top: 0;}
#btn-wrap.btn-next #prevnext .line{ left: 0; top: 50%;}
#btn-wrap.btn-next #prevnext .line:after{ right: 0; }

/* hover */
#btn-wrap.color-g:hover > p{ color: #81A69B;}
#btn-wrap:hover .line{ width: 80px;}
#btn-wrap.color-g:hover #prevnext .circle{ border: 1px solid #81A69B;}
#btn-wrap.color-g:hover #prevnext .line{ background-color: #81A69B;}
#btn-wrap.color-g:hover #prevnext .line:after{ background-color: #81A69B;}

#btn-wrap.color-w:hover > p{ opacity: 1;}
#btn-wrap.color-w:hover #prevnext .circle{ opacity: 1;}
#btn-wrap.color-w:hover #prevnext .line{ opacity: 1;}
#btn-wrap.color-w:hover #prevnext .line:after{ opacity: 1;}


/* ==========================================================================
    #SCROLLBAR
    ========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #81A69B; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }


/* ==========================================================================
    #FLOAT
    ========================================================================== */
.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}




body{  font-family: 'Pretendard'; font-weight: 400; font-size: 16px; overflow-x: hidden; }
.wrap1600{ width: 100%; max-width: 1640px; padding: 0 20px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.wrap1330{ width: 100%; max-width: 1370px; padding: 0 20px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.bg-img{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.v-middle{ width: 100%; height: 100%; display: table-cell; vertical-align: middle;}
.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: inline-block!important;}
.none-pc{ display: none!important;}
.flex-wrap{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

#tit{ position: relative; }
#tit h3{ padding-bottom: 30px;}

.deco-text{  animation-name : lotate;
    animation-duration : 10s;
    animation-iteration-count : infinite;  
    animation-timing-function : linear;    }
@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}
/* swiper */
.swiper-button-prev, .swiper-button-next {outline: none !important; background-image: unset!important; width: 184px; height: 80px; line-height: 80px; transition: .5s;}
.swiper-button-prev{ left: 30px;}
.swiper-button-next{ right: 30px;}
.swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover,
.swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{  transition: .5s; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: 1; color: #7d7d7d;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination, .swiper-pagination .number, .swiper-pagination .bar{ font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; color: #7D7D7D;}
.swiper-pagination .number{ font-weight: 700; color: #0097FE;}
.swiper-pagination .bar{ padding: 0 5px;}

.swiper-pagination-progressbar{ background-color: #ccc; position: relative; height: 4px; border-radius: 2px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #0097FE;}

.swiper-pagination-bullet{ position: relative; width: 12px; height: 12px; background: transparent; border: 1px solid #fff; opacity: 1; margin: 6px!important; transition: .5s; box-shadow: 2px 0 4px rgba(0,0,0,.2); }
.swiper-pagination-bullet-active{ background: rgba(255,255,255,1); opacity: 1; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 30px;}

/* ==========================================================================
    #FULL-SWIPER
========================================================================== */
.full-swiper{ height: 100%; position: relative; overflow: hidden;}
.full-swiper .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center;}
.full-swiper .wrap1600{ position: absolute; height: 100%; top: 0; z-index: 10; left: 0; right: 0;}
.full-btn{position: absolute; top: calc(50% - 25px); text-align: center; }
.full-pag{ font-size: 24px; bottom: 60px; font-family: 'BernadineAleyshia'!important; pointer-events: none; color: #fff;}
.full-pag span{ font-family: 'BernadineAleyshia'!important;}

/* ==========================================================================
    #ROOMS-SWIPER
========================================================================== */
.room-swiper{ width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center;}
.room-swiper .swiper-slide h3{ padding-bottom: 20px;}
.room-swiper .swiper-slide .img-wrap{ width: 100%; height: 506px; background-color: #000; position: relative; margin-bottom: 15px;}
.room-swiper .swiper-slide .img-wrap h4{ position: absolute; z-index: 10; width: fit-content; left: 0; right: 0; margin: 0 auto; top: calc(50% - 10px); opacity: 0; transition: .5s;}
.room-swiper .swiper-slide .img-wrap h4 i{ display: block;}
.room-swiper .swiper-slide:hover .img-wrap h4{ opacity: 1;}
.room-swiper .swiper-slide:hover .img-wrap .img{opacity: .4;}
.room-swiper .swiper-slide p{ padding-bottom: 10px;}

/* ==========================================================================
    #TRAVEL-SWIPER
========================================================================== */
.travel-swiper{ width: 1060px; position: relative; left: 0; right: 0; margin: 0 auto; text-align: center;}
.travel-swiper .img-wrap{ position: relative; display: inline-block; width: 100%; height: 663px; background-color: #000; transition: .5s; margin-bottom: 40px;} 
.travel-swiper .swiper-slide .img-wrap h4{ position: absolute; z-index: 10; width: fit-content; left: 0; right: 0; margin: 0 auto; top: calc(50% - 10px); opacity: 0; transition: .5s; }
.travel-swiper .swiper-slide .img-wrap h4 i{ display: block;}
.travel-swiper .swiper-slide:hover .img-wrap h4{ opacity: 1;}
.travel-swiper .swiper-slide:hover .img-wrap .img{opacity: .6;}
.travel-swiper .swiper-slide{ transform: scale(.7) rotate(10deg); transform-origin: center; transition: .5s; opacity: .4;}
.travel-swiper .swiper-slide.swiper-slide-active{ transform: scale(1) rotate(0);  opacity: 1;}
.travel-swiper .swiper-slide h3{ padding-bottom: 10px; opacity: 0; transition: .5s;}
.travel-swiper .swiper-slide p{ opacity: 0; transition: .5s;}
.travel-swiper .swiper-slide.swiper-slide-active h3{ opacity: 1;}
.travel-swiper .swiper-slide.swiper-slide-active p{ opacity: 1;}
.travel-btn{ top: 30px;}

/* ==========================================================================
    #SUB-TOP
    ========================================================================== */
#sub-top{ position: relative; width: 100%; height: 31.25vw; background-color: #000; }
#sub-top .img{ opacity: .6;}
#sub-top h3{ position: absolute; width: 100%; top: calc(50% - 20px); text-align: center;}


/* ==========================================================================
    #TAB
========================================================================== */
#tab{ width: 100%; display: flex; flex-direction: column; font-size: 0;}
#tab a{ position: relative; display: block; width: 100%; padding-bottom: 20px; text-align: left; border-bottom: 1px solid rgba(153,153,153,.5); margin-bottom: 40px;}
#tab a:after{ content: ''; display: block; position: absolute; width: 115px; height: 3px; background-color: #81A69B; transition: .5s; left: 0; bottom: -2px; transform: scaleX(0); transform-origin: left;}
#tab a h4{ padding-bottom: 10px; transition: .5s;}
#tab a p{ transition: .5s;}
#tab a.active:after{ transform: scaleX(1); }
#tab a.active h4{ color: #81A69B;}
#tab a.active p{ color: #81A69B;}
#tab a:hover:after{ transform: scaleX(1); }
#tab a:hover h4{ color: #81A69B;}
#tab a:hover p{ color: #81A69B;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    /* ==========================================================================
    #FONTSIZE
    ========================================================================== */
    .mf12{ font-size: 12px;}
    .mf14{ font-size: 14px;}
    .mf16{ font-size: 16px;}
    .mf20{ font-size: 20px;}
    .mf24{ font-size: 24px;}
    .mf30{ font-size: 30px;}
    .mf48{ font-size: 48px;}
    

    /* ==========================================================================
    **MOBILE**#COL
   ========================================================================== */
    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}



    /* ==========================================================================
    **MOBILE**#BTN
    ========================================================================== */
    #btn-wrap.p-side.btn-prev{ height: 63px; width: 80px;}
    #btn-wrap.p-side.btn-next{ height: 63px; width: 80px;}

    #btn-wrap.p-side.btn-prev > p{ top: 0; left: 0; right: unset; line-height: 14px;}
    #btn-wrap.p-side.btn-next > p{ top: 0; left: unset; right: 0; line-height: 14px;}


    #prevnext{ height: 40px; width: 80px; bottom: 0;}
    #prevnext .circle{ width: 40px; height: 40px; }
    #prevnext .line{ position: absolute; display: block; width: 42px; }
    #prevnext .line:after{ width: 5px; height: 5px; top: -2px; }

    /* hover */
    #btn-wrap:hover .line{ width: 61px;}




    body{ font-family: 'Pretendard'; overflow-x: hidden; position: relative;  }
    body > section{ width: 100%; min-width: unset; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}
    .none-mo{ display: none!important;}
    .none-pc{ display: inline-block!important;}
    .wrap1600{ width: 100%; padding: 0 20px; position: relative; margin: 0 auto; box-sizing: border-box; }
    .wrap1330{ width: 100%; padding: 0 20px; position: relative; margin: 0 auto; box-sizing: border-box;}

    #tit h3{ padding-bottom: 10px;}
    #tit p{ line-height: 24px;}

    /* swiper */
    .swiper-button-prev, .swiper-button-next { width: 80px; height: 63px; line-height: 23px; font-size: 12px; }
    .swiper-button-prev{ left: 15px;}
    .swiper-button-next{ right: 15px;}

    .swiper-pagination, .swiper-pagination .number, .swiper-pagination .bar{ font-size: 14px;}
    .swiper-pagination .bar{ padding: 0 3px;}


    .swiper-pagination-bullet{width: 8px; height: 8px; margin: 0 4px!important; }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 15px;}

    .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
        width: calc(100% - 24px);
    }
    .swiper-pagination-progressbar{ width: calc(100% - 24px); background-color: #ccc; position: relative; height: 2px; }
    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #0097FE;}

   /* ==========================================================================
    #FULL-SWIPER
    ========================================================================== */
    .full-btn{top: calc(50% - 15px); }
    .full-btn p{ display: none!important;}
    .full-pag{ font-size: 12px; bottom: 20px; font-family: 'BernadineAleyshia'!important; }
    .full-pag span{ font-family: 'BernadineAleyshia'!important;}


    /* ==========================================================================
    #ROOMS-SWIPER
    ========================================================================== */
    .room-swiper .swiper-slide h3{ padding-bottom: 25px;}
    .room-swiper .swiper-slide .img-wrap{ height: 50.26vw; margin-bottom: 10px;}
    .room-swiper .swiper-slide p{ padding-bottom: 10px;}
    .room-btn{ top: 0; margin-top: unset; height: 40px;}
    .room-btn #btn-wrap.p-side.btn-prev{ height: 40px;}
    .room-btn  #btn-wrap.p-side.btn-next{ height: 40px;}
    .room-btn #btn-wrap.color-w #prevnext .circle{ border: 1px solid #888; opacity: .7;}
    .room-btn #btn-wrap.color-w #prevnext .line{ background-color: #888; opacity: .7;}
    .room-btn #btn-wrap.color-w #prevnext .line:after{ background-color: #888; opacity: .7;}
    .room-prev{ left: 0;}
    .room-next{ right: 0;}

    /* ==========================================================================
    #TRAVEL-SWIPER
    ========================================================================== */
    .travel-swiper{ width: 66.67vw; }
    .travel-swiper .img-wrap{ height: 50.26vw; margin-bottom: 15px;}
    .travel-swiper .swiper-slide{ transform: scale(.7) rotate(10deg); transform-origin: center; transition: .5s; opacity: .4;}
    .travel-swiper .swiper-slide.swiper-slide-active{ transform: scale(1) rotate(0);  opacity: 1;}
    .travel-btn{ display: none;}

    /* ==========================================================================
    #SUB-TOP
    ========================================================================== */
    #sub-top{height: 64.10vw; margin-top: 50px;}
    #sub-top h3{ top: calc(50% - 10px);}


    /* ==========================================================================
    #TAB
    ========================================================================== */
    #tab{ width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
    #tab a{ width: calc(50% - 5px); margin-bottom: 80px;}
    #tab a:after{ width: 80px; }



}