@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');
/* float clearfix */
.clearfix {*zoom:1}
.clearfix:after {content:"";display:block;clear:both}

.redtx{color: #d22020 !important;}
.mo-block{display:none;}
@media ( max-width: 767px ) {}
@media ( max-width: 575px ) {
.mo-block{display:block;}
}


/* header - menu.css */

/* index */
.premium-resort {display: table; position: relative; width: 100%; height: 99vh;  background-position: center; background-size: cover; text-align: center; padding-top: 110px;}
.premium-resort img{width:100%;}
.premium-resort .txt-box{position:absolute;top:100px;left:0;right:0;margin:auto; width:100%;}
.premium-resort .t-title{font-size:34px;color:#000000;font-family: 'Nanum Myeongjo', serif;letter-spacing:3px;margin:5px 0;}
.premium-resort .b-txt{margin-top:20px;font-size:16px;color:#000000;}
.premium-resort .b-txt em{width:30px;height:1px;background:#000000;display:inline-block;vertical-align:5px;}
.premium-resort .b-txt span{text-transform: uppercase;}
.boxy-warp{max-width:1200px;margin:auto;padding:100px 0;}
.reservation {background:url("../img/main/freser_bg.jpg")  no-repeat; background-size: cover; display:table;text-align:center;position:relative;padding:200px 0 200px;width:100%;background-position:center;center;}

.reservation .con-box{display:table-cell;vertical-align: middle;}
.reservation .con-box h1{font-size:30px;color:#fff;font-family: 'Nanum Myeongjo', serif;font-weight:100;letter-spacing: 5px;margin:5px 0;}
.reservation .con-box a {letter-spacing:2px;color:#fff;font-size:14px;text-transform: uppercase;background:url("../img/main/main-btn-bg1.png") repeat;width:174px;padding:5px 0;text-align:center;margin:30px 0 10px;display:inline-block;}
.grid-list{display:table;width:100%;}
.grid-list a {display: block;}
.grid-list ul li {float:left; width:50%; position:relative; overflow: hidden; repeat;height:100%;color:#fff;}
.grid-list ul li img{width:100%;position:relative;z-index:-1;}
.grid-list ul li .grid-ov-txt{position:absolute;width:100%;height:100%;text-align:center;}
.grid-list ul li .grid-ov-txt .ml9 {line-height:71%;}
.grid-list ul li .grid-ov-txt .e-txt {font-size:40px;font-family: 'Noto Serif KR', serif;text-transform: uppercase;border-bottom:1px solid #fff;line-height:88%;display:inline-block;color:#fff;}
.grid-list ul li .grid-ov-txt .e-txt span {line-height:71%;}
.grid-list ul li .grid-ov-txt .k-txt{font-size:20px;margin-top:20px;color:#fff;}
.grid-list ul li.on{background:none;position:relative;color:#333;}
.grid-list ul li.on img{;}
.grid-list ul li.on .grid-ov-txt{color:#333;}
.grid-list ul li.on .grid-ov-txt .grid-ov{color:#333;}
.grid-list ul li.on .grid-ov-txt .e-txt{border-bottom:1px solid #000;color:#000;}
.grid-list ul li.on .grid-ov-txt .k-txt{color:#000;}
.lSSlideWrapper{max-width:94% !important;margin:auto;overflow:visible !important;}
.bx-wrapper{border:0;    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;}
.bx-wrapper .bx-prev {background:url("../img/main/left-icon.png") no-repeat;width:34px !important;height:64px !important;left:-50px;}
.bx-wrapper .bx-next {background:url("../img/main/right-icon.png") no-repeat;width:34px !important;height:64px !important;right:-50px;}
.bx-wrapper .bx-prev:hover {background:url("../img/main/left-icon.png") no-repeat;width:34px !important;height:64px !important;left:-50px;}
.bx-wrapper .bx-next:hover {background:url("../img/main/right-icon.png") no-repeat;width:34px !important;height:64px !important;right:-50px;}
.bx-wrapper .img-box{/*height:370px;*/overflow: hidden;}
.m-bxslider{display:none}
.slick-prev, .slick-next{margin-top:0;}
.ml9 {
  position: relative;
  font-weight: 200;
  font-size: 4em;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
}


.ml12 .letter {
  display: inline-block;
}
@media ( max-width: 1000px ) {	
	.premium-resort .txt-box{position:inherit;margin:50px 0;}
	.premium-resort .txt-box .t-title{color:#333;}
	.premium-resort .txt-box .b-txt{color:#333;}
	.premium-resort .txt-box .b-txt em{background:#333;}
	.reservation{height:auto;padding:40px 0;}
	.reservation .con-box a{margin-top:20px;}
	.lSAction>.lSPrev{display:none;}
	.lSAction>.lSNext{display:none;}
}
@media ( max-width: 767px ) {
	.lSSlideWrapper{    max-width: 84% !important;
    margin: auto;
    overflow: visible !important;}
	.reservation .con-box h1{font-size:20px;}
	.premium-resort{height: 50vh; transition: all 0.3s;background-size: cover; }
	.premium-resort .t-title {font-size: 18px;}
	.premium-resort .txt-box .t-title{font-size:24px;}
	.premium-resort .b-txt {margin-top:10px;}
	.premium-resort .b-txt span{font-size:11px;}
	.premium-resort .txt-box .b-txt span{font-size:11px;}
	.pc-bxslider{display:none;}
	.m-bxslider{display:block;}
	.grid-list ul li{width:100%;float:none;}
	.grid-list ul li .grid-ov-txt .e-txt{font-size:24px;}
	.grid-list ul li .grid-ov-txt .k-txt{font-size:13px;margin-top:10px;}
	.bx-wrapper .img-box{/*height:230px;*/}
	.bx-viewport{width:90% !important;left:10px;margin:auto;overflow: visible !important;}

}

@media ( max-width: 575px ) {
	.premium-resort{height: 40vh; padding-top:80px;}

}

/* foot */
#footer{width: 100%;border-top: 1px solid #eaeaea; padding: 70px 0 0; background: #fff;}
#footer .inner{width: 90%; margin: 0 auto; }
#footer .copy {width: 100%; padding: 0 0 1%; border-bottom:1px solid #000;}
#footer .copy-bt{display:table;width:100%;margin-top:15px;padding-bottom:70px;}
#footer .copy-bt .l-con{float:left;width:70%;font-size:13px;line-height:150%;}
#footer .copy-bt .r-con{float:right;width:30%;text-align:right;}
#footer .copy-bt .r-con .t-btn a{font-size:13px;border-right:1px solid #313131;line-height:100%;padding:0 15px;}
#footer .copy-bt .r-con .t-btn a:last-child{padding-right:0;border-right:0;}
#footer .copy-bt .r-con .b-btn{float:right;margin-top:10px;}
#footer .copy-bt .r-con .b-btn a{padding:5px 15px;border:1px solid #313131;float:left;}
#footer .copy-bt .r-con .b-btn a:nth-child(2){border-left:0;background:#313131;color:#fff;}
#footer .copy li{letter-spacing: -0.5pt;}
#footer .copy li:first-child{font-size: 18px; font-weight: 700;}
#footer .copy li:first-child img {margin: 0 15px 0 0; vertical-align: unset;}
#footer .copy li:nth-child(2){font-size: 16px; line-height: 180%;}
#footer .copy li:nth-child(2) b{font-size: 18px;}
#footer .copy li:last-child{font-size: 16px; line-height: 40px;}
#footer .copy li span {font-family: serif; font-size: 1.4vw; font-weight: normal}
#footer .info{width: 30%;  float: left;}
#footer .info li{text-align: right;}
#footer .info li{font-size: 16px; line-height: 35px;}
#footer .info li a{margin-left: 20px;}
#footer .info li a b{color: #4dadb1;}
#footer .info li{margin:7px 0  0 20px;}
/*.tms_bt{cursor: pointer;}*/

@media screen and (max-width:1080px){
    #footer .copy,
	#footer .info{float: none; width: 100%;}
    #footer .info li{text-align: left; margin:7px 0  0 0;}
    #footer .info li a{margin-right: 20px; margin-left: 0;}
    #footer .copy{margin-bottom: 20px;}
    #footer .info{margin-bottom: 70px;}
}

@media ( max-width: 767px ) {
    #footer .copy li span {display: block; font-size: 5vw;}
	#footer .copy-bt .l-con{width:100%; float:none; font-size: 13px;}
	#footer .copy-bt .r-con{width:100%; float:none;text-align:left;margin-top:20px;}
	#footer .copy-bt .r-con .t-btn a:first-child{padding-left:0;}
	#footer .copy-bt .r-con .b-btn{float:none;display:table;width:100%;}
}

@media ( max-width: 575px ) {
    #footer .copy li:first-child{font-size: 16px;}
    #footer .copy li:nth-child(2){font-size: 14px; }
    #footer .copy li:nth-child(2) b{font-size: 15px;}
    #footer .copy li:last-child{font-size: 14px;}
    #footer .info li:last-child{font-size: 14px;}
}


/* bt_top */
#back-top {display: none; position: fixed; right: 10px; bottom: 50px; z-index: 999; width: 60px; height: 60px; cursor: pointer;}
#back-top span.t_bt {display: block; width: 60px; height: 60px; background:url('../img/common/fbt_top.png') no-repeat center center; opacity: 0.8;}
#back-top span:hover {opacity: 1;}


/* mvisual */
#msliders {position: relative; width: 100%; height: 100%;}

#vwrapper {position: relative; top: 0; left: 0; z-index: -999; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
#vwrapper iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    transform: translate(-50%, -50%);
}
.vp_bt_box {position: absolute; top: 58%; left: 50%; z-index: 999; min-width: 60px; text-align: center; margin: 0 0 0 -30px;}
.vp_bt_stop,
.vp_bt_play {width: 60px; height: 60px; cursor: pointer;}
.vp_bt_play {display: none;}
.vp_bt_box div img {display: block;}

@media ( max-width: 767px ) {
    #msliders {/* height: 65vh !important; */ transition: all 0.3s;}

    .vp_bt_box {top:55%; min-width: 40px; margin:0 0 0 -20px;}
    .vp_bt_stop, .vp_bt_play {width: 40px; height: 40px; cursor: pointer;}
    .vp_bt_stop img,
	.vp_bt_play img {width: 40px; height: 40px; cursor: pointer;}
}

.scroll {display: block; position: absolute; left: 0; z-index: 20; width: 100%; text-align: center; padding: 0 8px; margin: 0; opacity: 0.7; transform: translate(0,-50%); pointer-events: none; animation: scrollani 2s infinite;}
.scroll.scroll_main {bottom: 16%;}
.scroll.scroll_rooms {bottom: 10%;}
.scroll.scroll_tour {top: 84%;}
.scroll span {display: block; font-size: 0.8vw; letter-spacing: 0; color: #fff; margin: 0 0 9px;}
.scroll .scroll_visual {display: block; width: 100%; height: 17px; background: url('../img/common/scroll.png') center top no-repeat;}

@keyframes scrollani {
    0% {padding-bottom: 0px;}
	50% {padding-bottom: 10px;}
    100% {padding-bottom: 0px;}
}

@media ( max-width: 1000px ) {
	.scroll span {font-size: 1.6vw;}
}

@media ( max-width: 767px ) {
	.scroll.scroll_tour {top: 40%;}
	.scroll.scroll_rooms {display: none;}
	.scroll.scroll_main {display: none;}
}

#mtit {position: absolute; top: 48%; z-index: 10; width: 100%; text-align: center; color: #fff;}
#mtit h2 {font-family: 'Noto Sans HK', sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-size: 60px; font-weight: 100; line-height: 100%; text-transform: uppercase; letter-spacing: 5pt; opacity: 0.8;}
#mtit p {font-size: 18px; font-weight: 100; text-transform: uppercase; letter-spacing: 2pt;}
#mtit h1 {font-size: 75px; line-height: 100%;}
#tflip {height: 70px; overflow: hidden;}
#tflip > div > div {display: inline-block; height: 45px; color: #fff; margin-bottom: 45px;}
#tflip div:first-child {animation: show 10s linear infinite;}
#mtit > img {width:100%;}

@keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
}

@media ( max-width: 575px ) {
    #mtit h2 {font-size: 30px;}
    #mtit p {font-size: 14px; letter-spacing: 0.7pt;}
    #mtit h1 {font-size: 42px;}
    #tflip {height:50px;}
}

.mtit{text-align: center;}
.mtitc{text-align: center;}
.mtit h1{font-family: 'Nanum Myeongjo', serif; font-size: 65px; letter-spacing: -2pt; margin: 140px 0 30px;}
.mtit h2{color: #707070; font-size: 16px; font-weight: normal; line-height: 180%; }
.mtit2{text-align: left; color: #fff;}
.mtit2 h1{font-family: 'Nanum Myeongjo', serif; font-size: 65px; letter-spacing: -2pt; padding: 140px 0 30px;}
.mtit2 h2{font-size: 16px; font-weight: normal; line-height: 180%; }
.mtit2{text-align: left; color: #fff;}
.mtit3 h1{font-family: 'Nanum Myeongjo', serif; font-size: 65px; letter-spacing: -2pt; padding: 140px 0 30px;}
.mtit3 h1 span{font-size:45px;}
.mtit3 h2{font-size: 16px; font-weight: normal; line-height: 180%; color: #707070; }
.mtit3 h3{font-family: 'Courgette', cursive; font-size: 15px;  line-height: 180%; color: #d6d6d6;  font-weight: normal; padding-top: 50px;}
@media ( max-width: 767px ) {
    .mtit h1{font-size: 40px; letter-spacing: -2pt; margin: 80px 0 30px;}
    .mtit2 h1, .mtit3 h1{font-size: 40px; letter-spacing: -2pt; margin: 0; padding: 80px 0 30px;}
    .mtit h2, .mtit2 h2, .mtit3 h2{font-size: 15px; }
}


/* mroom preview - slick.css */


/* mspecial */
#msp{margin: 0 0 80px;}
#msp .msp_txt{width: 70%; margin: 0 auto;}
#msp .msp_txt div.mtit2{width:50%; float: left;}
#msp .msp_txt div.msp_tt{width:40%; float: left; padding-top: 135px; margin-left: 10%;}
#msp .msp_txt div.msp_tt li{float: left; width: 50%;}
#msp .msp_txt div.msp_tt li a{color: #fff; line-height: 40px; font-size: 15px; display: inline-block;position: relative; text-indent: 30px; }
#msp .msp_txt div.msp_tt li a:after{position:absolute;top:20px;left:0px;width:8px;height:2px;display:block;background:#fff;content:''}
#msp .msp_txt div.msp_tt li a:before{position:absolute;top:17px;left:3px;display:block;width:2px;height:8px;background:#fff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#msp .msp_txt div.msp_tt li a:hover:before{top:21px;height:0; }
#msp .msp_txt div.msp_tt li a:hover:after{background:#fff;}
@media screen and (max-width:1000px){
    #msp .msp_txt{width: 90%; }
    #msp .msp_txt div.mtit2{float: none; width: 100%; transition: all 0.3s;}
    #msp .msp_txt div.msp_tt{float: none; width: 100%; margin-left: 0; transition: all 0.3s; padding-top: 50px; }
}
.magrid {
    /* center */
    margin: 0px auto 0;
}
.magrid:after {
    content: '';
    display: block;
    clear: both;
}
.grid-item {
    position: relative;
    box-sizing: border-box;
    width: 50%;
    height: auto;
    float: left;
    margin: 0;
    overflow: hidden;
}
.grid-ov-box{position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 30; opacity: 0; transition: all 0.3s; color: #fff; text-align: center;  display: inherit; }
.grid-ov{display: table-cell; width: 100%; height: 100%; vertical-align: middle; font-size: 15px; }
.grid-ov b{font-size: 20px; font-weight: normal; margin-top: 10px; display: inline-block;}
.grid-ov-box:hover{opacity: 1.0; transition: all 0.3s;}
.grid-ov-txt{display:table;width:100%;height:100%;}
@media ( max-width: 575px ) {
    .grid-ov{font-size: 14px;}
    .grid-ov b{font-size: 16px;}
}
.grid-item:hover img{
    -webkit-transform:rotate(15deg) scale(1.4);
    -moz-transform:rotate(15deg) scale(1.4);
    -ms-transform:rotate(15deg) scale(1.4);
    -o-transform:rotate(15deg) scale(1.4);
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
}

.grid-item img{
    width: 100%; height: 100%;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}
@media (max-width:1000px){
    .magrid {
        /* center */
        margin: 50px auto 0;
    }
    .grid-item {
        height:auto;
    }
}
@media (max-width:575px){
    .grid-item {
        width: 157px;
        height: 100px;
        margin: 5px;
    }
}

/* mabout */
#mab{position: relative; background:url("../img/main/mab_bg.png") center top repeat-y;  padding: 0 0 150px; overflow: hidden;}
#mab .mabbg{height: 200px; background: #282e32 url("../img/main/msp_bg.png") center top repeat-y; color: #2c3337; font-size: 270px; font-weight: bold; line-height: 60%; z-index: -1; overflow: hidden;}
#mab .mabbg2{height: 120px; color: #f7f7f7;   font-size: 170px; font-weight: bold; line-height: 100%; z-index: -1; overflow: hidden; position: absolute; bottom: 0; display: none; letter-spacing: -5pt;}
#mab .mab_txt{width: 70%; margin: 0 auto;  position: relative;}
#mab .mab_txt .mtit3{width:50%; float: left; }
#mab .mab_txt .mab_img{width:50%; float: right; margin-top: -100px; position: relative; }
#mab .mab_txt .mab_img img{width: 100%; height: auto; }
@media screen and (max-width:1000px){
    #mab{padding: 0 0 80px;}
    #mab .mab_txt{width: 90%;}
    #mab .mab_txt .mtit3{float: none; width: 100%; text-align: center;}
    #mab .mab_txt .mab_img{float: none; display: none;}
    #mab .mabbg{display: none;}
    #mab .mabbg2{display: block;}
}

/* mfreser */
#mreser{background:url("../img/main/freser_bg.jpg") center top no-repeat; color: #fff; text-align: center; padding: 140px 0;}
#mreser h1{font-family: 'Courgette', cursive; font-weight: normal; font-size: 70px;}
#mreser h2 b{font-weight: normal; letter-spacing: 10pt;}
#mreser h2{font-size: 17px; font-weight: normal; line-height: 70px;}
#mreser a{font-size: 18px;  color: #fff; background:url("../img/common/arr01.png") right 0 top 8px no-repeat; padding: 0 45px; margin-top: 60px; display: inline-block;  transition: all 0.3s;}
#mreser a:hover{background:url("../img/common/arr01.png") right 10px top 8px no-repeat; transition: all 0.3s;}
@media screen and (max-width:1000px){
    #mreser{padding: 80px 0;}
}
@media (max-width:767px){
    #mreser h1{font-family: 'Courgette', cursive; font-weight: normal; font-size: 50px;}
    #mreser h2{line-height: 50px;}
    #mreser h2 b{font-weight: normal; letter-spacing: 4pt;}
    #mreser a{margin-top: 30px;}
}


/* landscape */
#abtit {position: absolute; top: 45%; z-index: 10; width: 100%; text-align: center; color: #fff;}
#abtit h1 {font-size: 2.1vw; font-weight: normal; text-transform: uppercase; letter-spacing: 0.15em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin: 0 0 1%; opacity: 0.7;}
#abtit h2 {font-size: 1.04vw; font-weight: normal; letter-spacing: 0.4em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin: 0 0 1%;}
#abtit h3 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#abtit h3 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #fff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin: 0 5px;}

#about {position: relative; padding: 0; overflow: hidden;}
#about div {width: 50%; float: left;}
#about div:nth-child(1) {padding: 10% 9.6% 0 11.6%;}
#about div:nth-child(2) {padding: 10% 11.4% 0 0;}
#about div:nth-child(3) {padding: 0 0 10% 11.4%;}
#about div:nth-child(4) {padding: 10% 11.6% 0 9.6%;}
#about div img {display: inline-block; width: 100%;}
#about div h1 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em; margin: 20px 0 0;}
#about div:nth-child(1) h1 {text-align: right;}
#about div h1 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #000; margin: 0 5px;}

#about2 {position: relative; text-align: center; padding: 0 0 100px; transition: all 0.3s;}
#about2 .bg {position: absolute; top: 110px; z-index: -1; width: 100%; height: 140vh; overflow: hidden; background: #efefef;}
#about2 .pro_img {}
#about2 .pro_img li {width: 57.5%; margin: 0 auto;}
#about2 .pro_img li img {width: 100%; height: auto; transition: all 0.3s;}
#about2 .pro_img li:first-child {margin: 0 auto 6%;}
#about2 .pro_img li:last-child {}
#about2 h1 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em; margin: 20px 0 0;}
#about2 h1 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #000; margin: 0 5px;}

@media ( max-width: 1000px ) {
	#abtit {}
	#abtit h1 {font-size: 4.2vw;}
	#abtit h2 {font-size: 2.08vw;}
}

@media ( max-width: 767px ) {
	#abtit {}
	#abtit h1 {font-size: 5.25vw;}
	#abtit h2 {font-size: 3.12vw;}

    #about {padding: 0 0 80px;}
	#about div {width: 100%; float: none;}
	#about div:nth-child(1) {padding: 10% 9.6% 0 11.6%;}
	#about div:nth-child(2) {padding: 10% 11.4% 0 0;}
	#about div:nth-child(3) {padding: 0 0 10% 11.4%;}
	#about div:nth-child(4) {padding: 10% 11.6% 0 9.6%;}

    #about2 {transition: all 0.3s;}
    #about2 .bg {height: 100vh;}
    #about2 .pro_img li {width: 90%;}
}
@media ( max-width: 575px ) {}


/* rooms */
#rooms {position: relative; width: 100%; overflow: hidden;}
#rooms .rstit {position: absolute; top: 18%; z-index: 10; width: 100%; text-align: center; color: #fff;}
#rooms .rstit h1 {font-family: 'Noto Serif KR', serif; font-size: 1.25vw; font-weight: lighter; text-transform: uppercase; letter-spacing: 0.4em; margin: 0 0 1%;}
#rooms .rstit h2 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em;}
#rooms .rstit h2 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #fff; margin: 0 5px;}
#rooms img {display: block; width: 100%;}
#roomstxt {padding: 6% 5% 0;}

@media screen and (max-width:1000px){
	#rooms .rstit {top: 20%;}
	#rooms .rstit h1 {font-size: 2.5vw;}
}

@media screen and (max-width:750px){
	#rooms .rstit {display: none;}
	#rooms img {width: 130%; margin: 0 0 0 -15%;}
}

/* room g */
#rtit {position: absolute; right: 8%; bottom: 8%; z-index: 10; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#rtit h1 {font-size: 3.8vw; font-weight: normal; text-transform: uppercase; margin: 0;}
#rtit h2 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em;}
#rtit h2 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #fff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin: 0 5px;}
#rcon {width: 100%; margin: 0 auto 10%;}
#rcon .con {}
#rcon .con .box {width: 50%; float: left;}
#rcon .con:nth-child(2) .box {float: right;}
#rcon .con .ibox img {display: block; width: 100%;}
#rcon .con .tbox {padding: 15% 0 15% 10%;}
#rcon .con .tbox h1 {position: relative; font-family: 'Noto Serif KR', serif; font-size: 2.45vw; font-style: italic; font-weight: normal; line-height: 130%; text-transform: uppercase; margin: 0 0 3%;}
#rcon .con .tbox h1 .line {display: block; position: absolute; width: 100%; height: 1px; background: #000;}
#rcon .con:nth-child(1) .tbox h1 .line {bottom: 16%; left: -25%;}
#rcon .con:nth-child(2) .tbox h1 .line {bottom: 8%;}
#rcon .con .tbox h2 {font-size: 1.73vw; font-weight: lighter; line-height: 150%; letter-spacing: 0.05em; margin: 0 0 3%;}
#rcon .con .tbox h3 {font-size: 0.85vw; text-align: left; font-weight: lighter; line-height: 190%; letter-spacing: 0.025em;}
#rinfo {position: relative; width: 60%; text-align: center; padding: 0; margin: 0 auto 2%;}
#rinfo .line {position: absolute; left: 0; z-index: -1; width: 100%; height: 1px; background: #000; }
#rinfo .line.tline {top: 2%;}
#rinfo .line.bline {bottom: 2.5%;}
#rinfo h1 {display: inline-block; font-size: 0.75vw; font-weight: normal; line-height: 180%; text-transform: uppercase; letter-spacing: 0.4em; background: #000; color: #fff; padding: 0 3.5%; margin: 0 0 3%;}
#rinfo h2 {font-size: 2.5vw; font-weight: lighter; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 1.5%;}
#rinfo .txline {display: inline-block; width: 7vw; height: 1px; background: #000; margin: 0 0 2.5%;}
#rinfo h3 {font-size: 0.85vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1%;}
#rinfo div {font-size: 0.75vw; font-weight: normal; line-height: 220%; letter-spacing: 0.05em; margin: 0 0 2.5%;}
#rinfo div .red {color: #b60303;}
#rinfo a {display: inline-block; font-size: 0.75vw; font-weight: normal; line-height: 245%; text-transform: uppercase; letter-spacing: 0.2em; background: #b60303; color: #fff; padding: 0 3.5%; margin: 2% 0 0;}
.rprice {width: 82%; margin: 0 auto 5%;}
#room_des {margin-bottom:5%}
@media screen and ( max-width: 1000px ){
	#rtit h1 {font-size: 7vw;}
	#rcon .con .tbox h3 {font-size: 1.3vw;}
    #rinfo {width: 90%;}
	#rinfo h1 {font-size: 1.5vw;}
	#rinfo h2 {font-size: 5vw;}
	#rinfo .txline {width: 14vw;}
	#rinfo h3 {font-size: 1.7vw;}
	#rinfo div {font-size: 1.5vw;}
	#rinfo a {font-size: 1.5vw;}
}

@media ( max-width: 767px ) {
	#rtit h1 {font-size: 9vw;}
	#rcon .con .box {width: 100%; float: none;}
	#rcon .con .tbox {padding: 25% 0 25% 10%;}
	#rcon .con .tbox h1 {font-size: 6vw;}
	#rcon .con .tbox h2 {font-size: 4.5vw;}
	#rcon .con .tbox h3 {font-size: 2.6vw;}
    #rinfo {width: 100%; padding: 0 5%;}
	#rinfo h1 {font-size: 2.8vw; padding: 0 5%; margin: 0 0 7%;}
	#rinfo h2 {font-size: 10vw; margin: 0 0 3%;}
	#rinfo .txline {width: 28vw; margin: 0 0 7%;}
	#rinfo h3 {font-size: 3.4vw; margin: 0 0 2%;}
	#rinfo div {font-size: 2.8vw; margin: 0 0 6%;}
	#rinfo a {font-size: 2.8vw;}
	.rprice {width: 90%; margin-bottom:10%}
}

/* special */
#spe {position: relative; padding: 0; overflow: hidden;}
#spe div {width: 50%; float: left;}
#spe div:nth-child(1) {padding: 15% 12% 1% 22%;}
#spe div:nth-child(2) {padding: 10% 11.4% 0 0;}
#spe div:nth-child(3) {padding: 0 0 10% 11.4%;}
#spe div:nth-child(4) {padding:5%;}
#spe div img {display: inline-block; width: 100%;}
#spe div img.img04 {width:74%;}
#spe .conbg {width:75%; background:#c9c9c9; }
#spe .conbg1 {width:80%; background:#c9c9c9; }
#spe .conbg2 {width:80%;}
#spe div h1 {font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 100; line-height:88%; letter-spacing: -0.3px; text-align: center; margin: 40px 0 0;}
#spe div h1 span {display:inline-block; border-bottom:1px solid #000;}
#spe div h2 {font-size: 15px;  font-weight:300; line-height: 210%; text-align: center; padding:24% 20% 45% 0;}
#spe div h2.tx01 {font-size: 0.8vw; letter-spacing: -0.05em; font-weight:100; line-height: 210%; text-align: center; padding:10% 14% 27% 0;}
#spe div h2.tx02 {font-size: 0.8vw; letter-spacing: -0.05em; font-weight:100; line-height: 210%; text-align: center;}
#spe div h2.tx03 {font-size: 0.8vw; letter-spacing: -0.05em; font-weight:100; line-height: 210%; text-align: center;  padding:40% 14% 62% 0;}
#spe div .tx04 {font-size: 15px; letter-spacing: -0.05em; font-weight:100; line-height: 210%; text-align: center; padding:1.5% 20% 40% 0;}
#spe div:nth-child(1) h1, h3 {text-align: center;}
#spe div .line {display: inline-block; width: 2.7vw; height: 1px; vertical-align: middle; background: #000; margin: 0 5px;}
#spe div h3 {font-size: 20px; text-transform: uppercase; letter-spacing: 0.1px; font-weight:100; margin: 15px 0 0;}
@media ( max-width: 1000px ) {
	#spe div h2 {font-size: 1.5vw;}
}
@media ( max-width: 767px ) {
    #spe {padding: 0 0 80px;}
	#spe div {width: 100%; float: none;}
	#spe div:nth-child(1) {padding: 8% 15% 3% 14%;}
	#spe div:nth-child(2) {padding: 10% 11.4% 0 0;}
	#spe div:nth-child(3) {padding: 0 0 10% 11.4%;}
	#spe div:nth-child(4) {}
	#spe div img.img04 {width:100%;}
	#spe .conbg {width:100%;}
	#spe .conbg1 {width:100%;}
	#spe div h1 {font-size: 5.5vw;}
	#spe div h2 {font-size: 2.5vw; padding:0 0 5% 5%;}
	#spe div h2.tx01 {font-size: 2.5vw; padding:0 0 16% 5%; margin-top:30px;}
	#spe div h2.tx03 {font-size: 2.5vw; padding:10% 0 10% 10%;}
	#spe div h3 {font-size: 4vw;}
	#spe div .tx04 {font-size: 12px; padding:0 8% 5% 0;}
}
@media ( max-width: 575px ) {
}


/* tour */
#tour_cont {position: relative; width: 100%; text-align: center; background: #c9c9c9; padding: 0 0 100px;}
#tour_cont .timg {position: relative;}
#tour_cont .timg img {display: block; width: 100%;}
#tour_cont .timg .totit {position: absolute; top: 30%; width: 100%; color: #fff;}
#tour_cont .timg .totit h1 {font-family: 'Noto Serif KR', serif; font-size: 2.45vw; font-weight: lighter; line-height: 210%; margin: 0 0 2%;}
#tour_cont .timg .totit h1 span {display: inline-block; padding: 0 1.37%; border: 1px solid #fff;}
#tour_cont .timg .totit h2 {font-size: 0.9vw; font-weight: normal; line-height: 200%; letter-spacing: 0.05em; margin: 0 0 1.5%;}
#tour_cont .timg .totit h3 {font-size: 0.68vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#tour_cont .timg .totit h3 .line {display: inline-block; width: 1.3vw; height: 1px; vertical-align: middle; background: #fff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin: 0 5px;}
#tour_cont .con {margin: -16.6% 0 0;}
.tour_box {display: inline-block; position: relative; width: 83%; vertical-align: top; background: #fff; margin: 0 0 5%;
    /*@include -webkit-transition(1s);*/
    /*-webkit-transition: width 0.1s;*/
    /*-webkit-transition: height 0.1s;*/
    /*-webkit-transition: display 0.1s;*/
    /*-webkit-transition: margin 0.1s;*/
}
.tour_box div {width: 50%; float: left; overflow: hidden;}
.tour_box .box {color: #313131;}
.tour_box .ibox {}
.tour_box .tbox {position: relative; text-align: left; padding: 12% 0 0 7%;}
.tour_box .ibox img {width: 100%; height: auto;}
.tour_box .tbox h1 {font-size: 1.1vw; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 2%;}
.tour_box .tbox h2 {font-size: 1.75vw; font-weight: lighter; letter-spacing: 0.05em; margin: 0 0 2%;}
.tour_box .tbox .line {display: inline-block; position: absolute; left: 0; width: 90%; height: 1px; background: #000;}
.tour_box .tbox h3 {font-size: 0.83vw; font-weight: normal; text-align: left; line-height: 210%; letter-spacing: 0.025em; padding: 2% 0 0;}

@media (max-width: 1000px) {
	#tour_cont .timg .totit h1 {font-size: 4.9vw;}
	#tour_cont .timg .totit h1 span {padding: 0 2.75%;}
	#tour_cont .timg .totit h2 {font-size: 1.8vw;}
	.tour_box div {width: 100%; float: none;}
	.tour_box .tbox {padding: 12% 0 12% 7%;}
	.tour_box .tbox h1 {font-size: 1.6vw;}
	.tour_box .tbox h2 {font-size: 2.2vw;}
	.tour_box .tbox h3 {font-size: 1.2vw;}
}

@media (max-width: 767px) {
	#tour_cont .timg img {width: 150%; margin: 0 0 0 -25%;}
    .tour_box {display: block; width: 90%; margin: 0 auto 5%;}
	.tour_box .tbox h1 {font-size: 2.2vw;}
	.tour_box .tbox h2 {font-size: 3.5vw;}
	.tour_box .tbox h3 {font-size: 1.7vw;}
}


/* timg - reser - traffic - */
#timg {position: relative; width: 100%; height: 52.583vh; overflow: hidden;}
#timg.reser {background: url('../img/sub/timg_reser.jpg') center; background-size: cover;}
#timg.traffic {background: url('../img/sub/timg_traffic.jpg') center; background-size: cover;}
#timg .timg_txt {position: absolute; top: 48%; z-index: 30; width: 100%; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#timg.reser .timg_txt {color: #313131; text-shadow: none;}
#timg .timg_txt h1 {font-size: 1.6vw; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.8%;}
#timg .timg_txt h2 {font-size: 1.05vw; font-weight: normal; letter-spacing: 0.4em;}

@media (max-width:1000px) {
	#timg .timg_txt h1 {font-size: 2.8vw;}
	#timg .timg_txt h2 {font-size: 1.8vw;}
}
@media (max-width:767px) {
	#timg .timg_txt h1 {font-size: 4.8vw;}
	#timg .timg_txt h2 {font-size: 3.15vw;}
}

#tcont * {transition: all .1s; -webkit-transition: all .1s;}
#tcont {width: 90%; min-height: 200px; margin: 150px auto;}
#tcont .tit {position: relative; font-size: 18px; line-height: 30px; padding-top: 10px; margin-bottom: 20px;}
#tcont .tit:after {content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 3px; background: #707070;}
#tcont .titt {font-size: 15px; line-height: 180%; color: #4d4d4e;}
#tcont .titt > div {margin-bottom: 7px;}
#tcont .titt > div > li {float: left;}
#tcont .titt > div > li:first-child {width: 11px;}
#tcont .titt > div > li:last-child {width: 95%;}
#tcont_sp {width: 100%;}
.tabsy {margin-top: 30px; }
.tab_con {display: block; text-align: center; padding: 0; margin: 30px auto 0;}
.tabButton {font-size: 15px; font-weight: bold; padding: 15px 20px;}
.tab {width: 100%; text-align: left;}

.tabsy>button{width:100%;font-size:100%;margin:0;outline:0;border:0;vertical-align:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent}
.tabsy>.tabButton{display:block;margin-top:1px;background:#ededed;color:#000;text-align:center;-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
.tabsy>.tabButton2{width: 100%;}
.tabsy>input{display:none}
.tabsy>input:checked+label+.tab{display:block;clear: both !important; float: none !important;}
.tabsy>input:checked+label+.tab>.content{-webkit-animation:showTab 250ms ease-in-out;animation:showTab 250ms ease-in-out; width: 100% !important; padding: 30px 0;}
.tabsy>.tab{display:none; }

@-webkit-keyframes showTab{
    from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}
    to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}

@keyframes showTab{
    from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}
    to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}

@media screen and (min-width: 768px) {
    .tab_con {width:100%;}
}

@media screen and (min-width: 767px){
    .tabsy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
    .tabsy>.tabButton{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;cursor:pointer; }
    .tabsy>input:checked+label{background:#3b4146;color:#FFF}
    .tabsy>.tab{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}
    .tabsy>.tabButton2{width: 20% !important;}
}

@media ( max-width: 767px ) {
    #tcont {margin: 80px auto;}
}

#ptable {border-bottom:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid; width:100%; margin-left:auto; margin-right:auto;}
#ptable th {border-top:#d9d9d9 1px solid; border-left:#d9d9d9 1px solid; background: #ededed; font-weight: 300;color:#323232; text-align: center;}
#ptable td {padding: 12px 0 ; border-top:#d9d9d9 1px solid; border-left:#d9d9d9 1px solid; font-size:13px; text-align: center; line-height: 120%;}


