@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@500&display=swap');
@font-face {
    font-family: 'PRISTINA';
    src: url(../font/PRISTINA.woff);
    font-weight: 400;
    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: '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, 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: 'Noto Sans KR', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'PRISTINA';
*/
.ko{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.en{
    font-family: 'Poppins', sans-serif;
    font-weight: 500; 
    font-style: normal;
}
.font_1{
    font-family: 'PRISTINA';
}

.bold{
    font-weight: 700;
}
.upp{
    text-transform: uppercase;
}
.cap{
    text-transform: capitalize;
}
.t-shadow{
    text-shadow: 0px 3px 6px rgba(0,0,0,.16);
}


/* ==========================================================================
    #FONT-SIZE
========================================================================== */
.f60{ font-size: 60px;}
.f36{ font-size: 36px;}
.f32{ font-size: 32px;}
.f24{ font-size: 24px;}
.f20{ font-size: 20px;}
.f18{ font-size: 18px;}
.f16{ font-size: 16px;}
.f14{ font-size: 14px;}
.f12{ font-size: 12px;}


/* ==========================================================================
    #COLOR
========================================================================== */
.cf{color: #fff; }
.color_1{color: #CFB699;}
.color_2{color: #466E82; }
.cc{color: #CCCCCC; }
.ce{color: #eee; }
.c9{color: #999; }

::selection{ background-color: #CFB699; 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
    ========================================================================== */
#btn01{ display: inline-block; width: 240px; height: 50px; line-height: 48px; text-align: center; font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 500; color: #CFB699; border: 1px solid #CFB699; transition: .3s; text-transform: uppercase;}
#btn01:hover{ background-color: #CFB699; color: #fff; }

#btn01.v1{ color: #fff; border: 1px solid #fff;}
#btn01.v1:hover{ background-color: #466E82; border: 1px solid #466E82;}

#btn01.v2{ color: #fff; border: 1px solid #466E82; background-color: #466E82;}
#btn01.v2:hover{ background-color: #466E82; border: 1px solid #466E82;}

#btn02{ display: inline-block; width: 200px; height: 40px; line-height: 38px; text-align: center; font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 500; color: #fff; border: 1px solid #fff; transition: .3s; text-transform: uppercase;}
#btn02:hover{ background-color: #fff; color: #CFB699; }

#btn02.v1{ color: #CFB699; border: 1px solid #CFB699; transition: .3s; text-transform: uppercase;}
#btn02.v1:hover{ background-color: #466E82; color: #fff; border: 1px solid #466E82; }

/* ==========================================================================
    #SCROLLBAR
    ========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #CFB699; 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: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 16px; overflow-x: hidden; }
.wrap1520{ width: 100%; max-width: 1540px; padding: 0 10px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.wrap1920{ width: 100%; max-width: 1920px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}

.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;}
.bg-img{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-parallax { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-attachment: fixed;}
.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;}


/* swiper */
.swiper-button-prev, .swiper-button-next {outline: none !important; background-image: unset!important; width: 63px; height: 101px; text-align: center; font-size: 100px; transition: .3s; color: #fff;}
.swiper-button-prev{ left: 200px;}
.swiper-button-next{ right: 200px;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-bullet{ position: relative; width: 10px; height: 10px; background: rgba(255,255,255,.5); opacity: 1; margin: 10px!important; transition: .3s; }
.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: 70px;}
.swiper-pagination-progressbar{ background-color: #fff;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #466E82;}
.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: 162px; height: 2px;
}

/* ==========================================================================
    #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 .pag-wrap{position: absolute; bottom: 140px; left: 0; right: 0; margin: 0 auto; width: fit-content; position: relative; }
.full-swiper .pag-wrap .full-pag{ position: relative; top: -5px;}
.full-swiper .pag-wrap > div{ display: inline-block; position: relative; z-index: 10; margin: 0 10px;}
.full-swiper .swiper-play{ position: absolute; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; z-index: 10; bottom: 155px; left: 0; right: 0; margin: 0 auto; cursor: pointer;}
.full-swiper .swiper-play .swiper-button-pause, .full-swiper .swiper-play .swiper-button-play{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 38px; text-align: center; font-size: 20px; color: #fff;}

/* ==========================================================================
    #ROOM-SWIPER
========================================================================== */
#slidetab-wrap{ display: flex; justify-content: center; padding-bottom: 20px;}
#slidetab-wrap a{ display: inline-block; transition: .3s; margin: 0 12px; font-size: 20px; color: #ccc; }
#slidetab-wrap a:hover, #slidetab-wrap a.active{ color: #466E82; font-weight: 700;}

.room-swiper{ height: auto; position: relative; overflow: hidden; width: calc(100% - 260px); left: 0; right: 0; margin: 0 auto;}
.room-wrap{ position: relative;}
.room-wrap .content{ display: none;}
.room-wrap .content.show{display: block;}
.room-wrap .img-wrap{ width: 100%; height: 250px; margin-bottom: 25px; overflow: hidden; }
.room-wrap .img-wrap .img{ position: relative; width: 100%; height: 100%; transition: .3s;}
.room-wrap .text-wrap h3{ padding-bottom: 15px; }
.room-wrap .text-wrap p{ padding-bottom: 20px;}
.room-wrap .content:hover #btn02{background-color: #466E82; color: #fff; border: 1px solid #466E82;}
.room-wrap .content:hover .img-wrap .img{ transform: scale(1.1);}
.swiper-wrap .swiper-button-prev, .swiper-wrap .swiper-button-next { width: 35px; height: 40px; line-height: 35px; background-color: transparent; }
.swiper-wrap .swiper-button-next:hover, .swiper-wrap .swiper-container-rtl .swiper-button-prev:hover,
.swiper-wrap .swiper-button-prev:hover, .swiper-wrap .swiper-container-rtl .swiper-button-next:hover{ background-color: transparent; }
.swiper-wrap .swiper-button-prev, .swiper-wrap .swiper-button-next { color: #ccc;}
.swiper-wrap .swiper-button-prev:hover, .swiper-wrap .swiper-button-next:hover{ color: #CFB699;}
.room-btn{position: absolute; top: calc(50% - 40px); text-align: center; }
.room-prev{ left: 0;}
.room-next{ right: 0;}

/* ==========================================================================
    #SPECIAL-SECTION
    ========================================================================== */
.special-section{ width: 100%; height: 640px; overflow: hidden;}
.special-section .special-swiper{ width: 100%; height: 100%;}
.special-section a{ display: block; height: 100%; position: relative; }
.special-section .bg-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.special-section .text-wrap{ position: absolute; text-align: center; top: 0; left: 0; width: 100%; height: 100%; display: flex; background-color: rgba(0,0,0,0.7); transition: .3s; flex-direction: column; justify-content: space-between; padding: 40px 0;}
.special-section .top-num{ top: 40px; left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: center;}
.special-section .middle i{ padding-bottom: 10px; opacity: .4; transition: .3s;}
.special-section .middle h3{ padding-bottom: 0; transition: .3s;}
.special-section .middle h4{ padding-bottom: 15px; height: 1px; opacity: 0; transition: .3s;}
.special-section .middle p{ line-height: 26px; height: 1px; opacity: 0; transition: .3s;}
.special-section #btn02{ left: 0; right: 0; margin: 0 auto; opacity: 0; }

.special-section a:hover .text-wrap{ background-color: rgba(70,110,130,0.7);}
.special-section a:hover .middle i{ opacity: 1;}
.special-section a:hover .middle h3{ padding-bottom: 15px;}
.special-section a:hover .middle h4{ height: 35px; opacity: 1;}
.special-section a:hover .middle p{ height: 46px; opacity: 1;}
.special-section a:hover #btn02{ opacity: 1;}

/* ==========================================================================
    #TRAVEL-LIST
    ========================================================================== */
.travel-section{ background-color: #F5F5F5; padding: 120px 0; text-align: center;}
.travel-section .tit i{ padding-bottom: 20px;}
.travel-section .tit h3{ padding-bottom: 12px;}
.travel-section .tit p{ line-height: 26px;}

#travel-list{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#travel-list > a{ width: calc(20% - 16px); font-size: 0; margin-top: 40px; }
#travel-list .img-wrap{ width: 100%; height: 288px; background-color: rgba(0,0,0); position: relative;}
#travel-list .bg-img{ width: 100%; height: 100%; position: relative; transition: .3s;}
#travel-list .more{ position: absolute; width: calc(100% - 40px); height: calc(100% - 40px); top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: .3s; opacity: 0;}
#travel-list .more p{ position: absolute; display: block; width: 100%; height: 100%; line-height: 248px; top:0; left: 0; }
#travel-list .more::before,
#travel-list .more::after,
#travel-list .more p::before,
#travel-list .more p::after {
	content: '';
	position: absolute;
	width: auto; height: auto;
	background: #CFB699;
	opacity: 0.8;
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	z-index: 3;
}
#travel-list .more::before,
#travel-list .more::after {
	width: 0;
	height: 1px;
}
#travel-list .more::before {
	top: 0;
	left: 0;
}
#travel-list .more::after {
	right: 0;
	bottom: 0;
}
#travel-list .more p::before,
#travel-list .more p::after {
	width: 1px;
	height: 0;
}
#travel-list .more p::before {
	top: 0;
	right: 0;
}
#travel-list .more p::after {
	bottom: 0;
	left: 0;
}
#travel-list > a:hover .more::before,
#travel-list > a:hover .more::after {
	width: 100%;
}
#travel-list > a:hover .more p::before,
#travel-list > a:hover .more p::after {
	height: 100%;
}
/* #travel-list .more:after{ content: ''; position: absolute; width: calc(100% - 40px); height: calc(100% - 40px); border: 1px solid #CFB699; left: 20px; top: 20px; box-sizing: border-box;} */
#travel-list .text-area{ border-top: 2px solid #CFB699; background-color: #fff; padding: 22px 0;}
#travel-list .text-area p.color_1{ padding-bottom: 10px;}
#travel-list .text-area h3{ padding-bottom: 5px;}
#travel-list > a:hover .more{ opacity: 1;}
#travel-list > a:hover .bg-img{ opacity: .3;}

/* ==========================================================================
    #SUB-TOP
    ========================================================================== */
#sub-top{ height: 610px; margin-top: 90px;}
#sub-top .sub-tit{ position: absolute; top: calc(50% - 100px); width: 100%; text-align: center;}
#sub-top .sub-tit h3{ padding-bottom: 30px;}


/* ==========================================================================
    #TAB
    ========================================================================== */
#tab{ border-bottom: 1px solid #ccc; padding: 20px 0; }
#tab h3{ padding-bottom: 10px;}
#tab ul{ font-size: 0;}
#tab ul li{ display: inline-block; padding: 0 20px;}
#tab ul li:first-child{ padding-left:0}
#tab ul li:last-child{ padding-right: 0;}
#tab ul li a{ position: relative; transition: .3;}
#tab ul li a:after{ content: ''; position: absolute; bottom: -17px; left: 0; right: 0; margin: 0 auto; width: 46px; height: 1px; background-color: #466E82; transition: .3s; transform: scaleX(0);}
#tab ul li a:hover{ color: #466E82;}
#tab ul li a:hover:after{ transform: scaleX(1);}
#tab ul li a.active{ color: #466E82;}
#tab ul li a.active:after{ transform: scaleX(1);}