@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

/* subLayout */

#contents {position:relative; z-index:5;}
#contents:after, #contents_layer:after {content: "";display:block; clear:both;}
#contents_layer {position:relative; opacity:0; filter: alpha(opacity=0;);  z-index:5; }
.subNav { position:fixed; width:100%; height:40px; left:0; bottom:-40px; background:#eaeaea /*url(../images/bg/white_50.png)*/; z-index:15; }
.subNav > div {position:relative;}
.subNav ul  { position:absolute; right:10px; top:10px; }
.subNav ul li { float:left; margin:0 10px;}
.subNav ul li a { font-size:1.1em; line-height:1.5em; color:#021e2f; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.subNav ul li a:hover, .subNav ul li a:focus { border-bottom:1px solid #021e2f;}
.subNav ul li.this a { color:#000; border-bottom:1px solid #000;}

/*.subArea {min-height:100vh;  }*/
.topArea { position:relative; background:#f5f5f5; z-index:1;}
.topArea, .topArea .lSSlideWrapper, .topArea .lightslider li { height:calc(100vh - 40px); }
.board .topArea, .board .topArea .lSSlideWrapper, .board .topArea .lightslider li { height:50vh; }
.service .topArea .lSSlideWrapper { width:50%;}
.subTitle01 { position:absolute; right:100px; top:50%; margin-top:-0.5em; font-family: 'Josefin Sans', sans-serif; font-size:3.4em; color:#fff; text-transform:uppercase; font-weight:700; line-height:1em; opacity:0; filter: alpha(opacity=0;); z-index:5;}
.reserve .subTitle01, .board .subTitle01 { right:50px;}
.subTitle02 { font-size:1em; color:#fff; }
.subTitle02 .title01 { display:block; font-family: 'Josefin Sans', sans-serif; font-size:8em; color:#fff; text-transform:uppercase; font-weight:700; line-height:1em;}
.subTitle02 .title02 {display:block;font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:100;}
.subTitle02 .title02 span { font-family: 'Dancing Script', cursive; color:#e4cc98; font-style:italic; font-size:1.4em;}
.room00 .subTitle02 { position:absolute; width:26%; right:5%; top:30%; text-align:center; z-index:2;}
.room00 .subTitle02 .title01 { font-size:3.4em; margin-bottom:0.2em;}
.room00 .subTitle02 .title02 {font-family: 'Heebo', sans-serif; font-weight:300; letter-spacing:0.05em;  }
.subTitle03 { position:relative; color:#fff; text-align:center; padding-top:35%; opacity:0; filter: alpha(opacity=0;); }
.subTitle03 .title01 { display:block; font-family: 'Josefin Sans', sans-serif; font-size:2.2em; color:#fff; text-transform:uppercase; font-weight:700; line-height:1.5em; letter-spacing:0.1em;}
.subTitle03 .title02 { display:block; font-size:1.2em; line-height:1.5em; font-weight:100; margin:0.5em 0 0.2em;}
.subTitle03 .title03 { display:block; font-size:0.7em; font-weight:100;}

.active .subTitle01, .active .subTitle02, .active .subTitle03 { opacity:1; filter: alpha(opacity=100;); transition: all 0.6s ease 0.5s; }

@media  (max-width: 1280px){
.subTitle03 .title01 { font-size:1.8em; font-size:2.8vw; }
.subTitle03 .title02 { font-size:1.1em; }
.subTitle03 .title03 { font-size:0.65em; }
}

.topArea_text { position:absolute; right:50px; font-size:1.1em; bottom:2em; text-align:right; color:#fff; text-transform:uppercase; font-weight:100; letter-spacing:0.05em; opacity:0; filter: alpha(opacity=0;); z-index:5;}
.active .topArea_text { opacity:1; filter: alpha(opacity=100;); transition: all 0.3s ease 0.9s;}
.topArea .lSAction { position:absolute; width:100%; left:0; top:50%; margin-top:-20px; z-index:2;}
.topArea .lSAction > a { position:absolute; display:inline-block; width:40px; height:40px; top:0; margin:0; font-size:3em; line-height:40px; color:#fff; text-align:center; opacity:1; filter: alpha(opacity=100;); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;z-index:2;}
.topArea .lSAction > a.lSPrev { left:20px;}
.topArea .lSAction > a.lSPrev:hover { left:10px;}
.topArea .lSAction > a.lSNext {right:20px;}
.topArea .lSAction > a.lSNext:hover { right:10px;}
.topArea .count { position:absolute; display:block; width:60px; right:50px; bottom:40px; text-align:center; font-family: 'Playfair Display', serif; font-size:1.5em; line-height:1.5em; color:#fff;  -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);z-index:5;}
.topArea .count .current { position:absolute; right:35px; top:-10px;}
.topArea .count .count_line {}
.topArea .count .total { position:absolute; left:35px; bottom:-5px;}
.topLine { position:absolute; width:1px; height:44%; background:url(../images/bg/white_30.png); top:28%; z-index:2;}
.board .topLine, .board .lSAction { display:none !important;}
.topLine01 { left:80px;}
.topLine02 { right:80px;}
.topArea .btn_scroll, .topArea_tour .btn_scroll { position:absolute; display:block; width:110px; left:50%; bottom:70px; margin-left:-55px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity:0; filter: alpha(opacity=0;); z-index:3;}
.topArea .btn_scroll:hover, .topArea .btn_scroll:focus { bottom:30px;}

.active.topArea .btn_scroll, .topArea_tour .active .btn_scroll { opacity:1; filter: alpha(opacity=100;); bottom:40px; transition: all 0.3s ease 1.2s; }


#subCon { position:relative; }
.reserve #subCon { background:#fff;}
.fix_bg { position:fixed; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center center !important;  
background-size:cover !important; opacity:0; filter: alpha(opacity=0;); z-index:1;}
.fix_con { position:relative; height:60vh; text-align:center; color:#fff;}
.map .fix_con { height:20vw;}

.fix_con dl { position:absolute; width:100%; top:50%; }

.active.fix_con { height:100vh; transition: all 0.8s ease 0s; }
.map .active.fix_con {height:36vw; transition: all 0.8s ease 0s; }

.fix_con dt { font-family: 'Josefin Sans', sans-serif; font-size:3.2em; text-transform:uppercase; font-weight:700; line-height:1.4em; letter-spacing:0.12em; }
.fix_con dt p { font-size:4.6em; line-height:0.8em; letter-spacing:0; margin:-0.8em 0 0.2em;}
.fix_con dd { font-family: 'Droid Serif', serif; font-size:1.05em; line-height:1.6em; letter-spacing:0.05em; font-style:italic; opacity:0.8; filter: alpha(opacity=80;); }
.map .fix_con dd {font-family: 'Noto Sans KR', sans-serif; font-size:1.05em; line-height:1.6em; letter-spacing:0.05em; font-style:normal; }
.room01 .fix_bg {background:url(../images/room/roomBg01.jpg);}
.room02 .fix_bg {background:url(../images/room/roomBg02.jpg);}
.room03 .fix_bg {background:url(../images/room/roomBg03.jpg);}
.room04 .fix_bg {background:url(../images/room/roomBg04.jpg);}
.room05 .fix_bg {background:url(../images/room/roomBg05.jpg);}
.room06 .fix_bg {background:url(../images/room/roomBg06.jpg);}
.room07 .fix_bg {background:url(../images/room/roomBg07.jpg);}
.room08 .fix_bg {background:url(../images/room/roomBg08.jpg);}
.room09 .fix_bg {background:url(../images/room/roomBg09.jpg);}
.room10 .fix_bg {background:url(../images/room/roomBg10.jpg);}
.special01 .fix_bg {background:url(../images/special/specialBg_01.jpg);}
.special02 .fix_bg {background:url(../images/special/specialBg_02.jpg);}
.special03 .fix_bg {background:url(../images/special/specialBg_03.jpg);}
.map .fix_bg {background:url(../images/map/mapBg.jpg);}

.scrollArea { text-align:center; padding:3.2em 0;  opacity:0; filter: alpha(opacity=0;); }
.active.scrollArea {opacity:1; filter: alpha(opacity=100;); transition: all 0.3s ease 0.6s;  }
/* sub contents title */


@media  (max-width: 1480px){

.topArea, .topArea .lSSlideWrapper, .topArea .lightslider li { height:70vw; }
.board .topArea, .board .topArea .lSSlideWrapper, .board .topArea .lightslider li { height:35vw; }
.fix_con { height:36vw;}
.active.fix_con { height:56vw; }
.map .active.fix_con  { height:60vw; }

}



@media  (max-width: 1024px){

}


@media  (max-width: 770px){

}


@media  (max-width: 560px){
}

@media  (max-width: 480px){


}



@media  (max-width: 380px){

}