@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@import url('https://fonts.googleapis.com/css?family=Prata');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);

body { overflow:hidden;}
#contents {position:relative; opacity:0; filter: alpha(opacity=0;); width:100%; zoom:1;}
#contents:after {clear:both;content:"";display:block;}
.mainCon { position:relative;}
.section { position:relative; height:100vh; z-index:1;}
#section0 { }
.mainNav, .mainBg { background:#000;}
.mainNav:after, .mainBg:after {content:"";display:block;clear:both;}
.mainBg li {position:relative; float:left; width:33.33%; height:80px;}
.mainNav li { position:relative; float:left; width:33.33%; height:calc(50vh - 40px);}
.mainNav li a { display:block; }
.mainNav li span { color:#fff; -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;}
.mainNav .bg01, .mainNav .bg02, .mainNav .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important;}
.mainBg .bg01, .mainBg .bg02, .mainBg .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center top !important; background-size:cover !important;}
.mainNav .title { position:absolute; width:70%; left:15%; z-index:3;}
.mainNav .mainNav01 .title, .mainNav .mainNav03 .title { text-align: center;}
.mainNav .mainNav01 .title, .mainNav .mainNav02 .title { bottom:30%; text-align: center;}
.mainNav .mainNav03 .title, .mainNav .mainNav04 .title { top:40%; text-align: center;}
.mainNav .mainNav05 .title, .mainNav .mainNav06 .title { top:40%; text-align: center;}

.mainNav .mainNav01:hover .title, .mainNav .mainNav02:hover .title { bottom:25%;}
.mainNav .mainNav03:hover .title, .mainNav .mainNav04:hover .title, .mainNav .mainNav05:hover .title, .mainNav .mainNav06:hover .title { top:45%;}

.mainNav .title01 {font-family: 'Josefin Sans', sans-serif; font-size:7em; letter-spacing:-5px; line-height:1em;}
.mainNav .title01 > span {position:relative; display:inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition:none; -o-transition: none; transition: none;}
.mainNav .title01 span span { position:absolute; display:block; width:4px; height:4px; left:50%; top:-0.2em; margin-left:-4px; border-radius:50%; background:#e4cc98;  }
.mainNav .title02 { font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:200;}
.mainNav .title02 span {font-family: 'Droid Serif', serif; color:#e4cc98; font-style:italic; }
.mainNav .title03 { position:absolute; width:100%; bottom:0; font-family: 'Alex Brush', cursive; opacity:0; filter: alpha(opacity=0;);  text-align:center;}
.mainNav .title04 { position:absolute; bottom:0.3em; font-family: 'Flamenco', cursive; font-size:5em; font-weight:300; line-height:1em; opacity:0; filter: alpha(opacity=0;); }
.mainNav .title05 {font-family: 'Josefin Sans', sans-serif; font-size:7em; letter-spacing:-5px; line-height:1em;}
.mainNav .title05 > span {position:relative; display:inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition:none; -o-transition: none; transition: none;}
.mainNav .title05 span span { position:absolute; display:block; width:4px; height:4px; left:50%; top:-0.2em; margin-left:-4px; border-radius:50%; background:#e4cc98;  }
.mainNav .title06 { font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:200;}
.mainNav .title06 span {font-family: 'Droid Serif', serif; color:#e4cc98; font-style:italic; }

.mainNav .mainNav01 .title04, .mainNav .mainNav03 .title04 { right:0;}
.mainNav .mainNav02 .title04, .mainNav .mainNav04 .title04 { left:0;}
.mainNav .mainNav05 .title04, .mainNav .mainNav03 .title04 { right:0;}
.mainNav .mainNav06 .title04, .mainNav .mainNav04 .title04 { left:0;}

.mainNav .title > span { display:block;}
.mainNav .bg01, .mainBg .bg01 { z-index:1;}
.mainNav .bg02, .mainBg .bg02 {opacity:0; filter: alpha(opacity=0;); z-index:2;}
.mainNav .bg03, .mainBg .bg03 {opacity:0; filter: alpha(opacity=0;); z-index:3;}
.mainNav a.on .title { text-align:center;}
.mainNav a.on .title01 { font-size:7em;}
.mainNav a.on .title01 span span { opacity:0; filter: alpha(opacity=0;);  }
.mainNav a.on .title03 { font-size:15em; line-height:1.05em; opacity:0.5;  filter: alpha(opacity=50;); }
.mainNav a.on .title04 { opacity:1; filter: alpha(opacity=100;); }
.mainNav a.on .bg02, .mainBg li.on .bg02 {opacity:1; filter: alpha(opacity=100;); }
.mainNav a.off .bg01, .mainBg li.off .bg01 { opacity:0; filter: alpha(opacity=0;); }
.mainNav a.off .bg03, .mainBg li.off .bg03 { opacity:0.7; filter: alpha(opacity=70;);}
.mainNav .mainNav01 .bg01, .mainBg li.mainNav01 .bg01 { background:url(/web/img/room/mienne/prv_01.jpg);}
.mainNav .mainNav02 .bg01, .mainBg li.mainNav02 .bg01 { background:url(/web/img/room/mienne/prv_02.jpg);}
.mainNav .mainNav03 .bg01, .mainBg li.mainNav03 .bg01 { background:url(/web/img/room/mienne/prv_03.jpg);}
.mainNav .mainNav04 .bg01 { background:url(/web/img/room/mienne/prv_04.jpg);}
.mainNav .mainNav05 .bg01 { background:url(/web/img/room/mienne/prv_05.jpg);}
.mainNav .mainNav06 .bg01 { background:url(/web/img/room/mienne/prv_06.jpg);}
.mainNav .mainNav01 .bg02, .mainBg li.mainNav01 .bg02 { background:url(/web/img/room/mienne/prv_B_01.jpg);}
.mainNav .mainNav02 .bg02, .mainBg li.mainNav02 .bg02 { background:url(/web/img/room/mienne/prv_B_02.jpg);}
.mainNav .mainNav03 .bg02, .mainBg li.mainNav03 .bg02 { background:url(/web/img/room/mienne/prv_B_03.jpg);}
.mainNav .mainNav04 .bg02 { background:url(/web/img/room/mienne/prv_B_04.jpg);}
.mainNav .mainNav05 .bg02 { background:url(/web/img/room/mienne/prv_B_05.jpg);}
.mainNav .mainNav05 .bg02 { background:url(/web/img/room/mienne/prv_B_06.jpg);}
.mainNav .mainNav01 .bg03, .mainBg li.mainNav01 .bg03 { background:url(/web/img/room/mienne/prv_M_01.jpg);}
.mainNav .mainNav02 .bg03, .mainBg li.mainNav02 .bg03 { background:url(/web/img/room/mienne/prv_M_02.jpg);}
.mainNav .mainNav03 .bg03, .mainBg li.mainNav03 .bg03 { background:url(/web/img/room/mienne/prv_M_03.jpg);}
.mainNav .mainNav04 .bg03 { background:url(/web/img/room/mienne/prv_M_04.jpg);}
.mainNav .mainNav05 .bg03 { background:url(/web/img/room/mienne/prv_M_05.jpg);}
.mainNav .mainNav06 .bg03 { background:url(/web/img/room/mienne/prv_M_06.jpg);}



.mainNav, .mainBg { background:#000;}
.mainNav:after, .mainBg:after {content:"";display:block;clear:both;}
.mainBg li {position:relative; float:left; width:33.33%; height:80px;}
.mainNav li { position:relative; float:left; width:33.33%; height:calc(50vh - 40px);}
.mainNav li a { display:block; }
.mainNav li span { color:#fff; -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;}
.mainNav .bg01, .mainNav .bg02, .mainNav .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important;}
.mainBg .bg01, .mainBg .bg02, .mainBg .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center top !important; background-size:cover !important;}
.mainNav .title { position:absolute; width:70%; left:15%; z-index:3;}
.mainNav .mainNav01 .title, .mainNav .mainNav03 .title { text-align: center;}
.mainNav .mainNav01 .title, .mainNav .mainNav02 .title { bottom:30%; text-align: center;}
.mainNav .mainNav03 .title { top:20%; text-align: center;}
.mainNav .mainNav04 .title { top:30%; text-align: center;}
.mainNav .mainNav05 .title, .mainNav .mainNav06 .title { top:30%; text-align: center;}

.mainNav .mainNav01:hover .title, .mainNav .mainNav02:hover .title { bottom:25%;}
.mainNav .mainNav03:hover .title, .mainNav .mainNav04:hover .title, .mainNav .mainNav05:hover .title, .mainNav .mainNav06:hover .title { top:25%;}

.mainNav .title01 {font-family: 'Josefin Sans', sans-serif; font-size:7em; letter-spacing:-5px; line-height:1em;}
.mainNav .title01 > span {position:relative; display:inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition:none; -o-transition: none; transition: none;}
.mainNav .title01 span span { position:absolute; display:block; width:4px; height:4px; left:50%; top:-0.2em; margin-left:-4px; border-radius:50%; background:#e4cc98;  }
.mainNav .title02 { font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:200;}
.mainNav .title02 span {font-family: 'Droid Serif', serif; color:#e4cc98; font-style:italic; }
.mainNav .title03 { position:absolute; width:100%; bottom:0; font-family: 'Alex Brush', cursive; opacity:0; filter: alpha(opacity=0;);  text-align:center;}
.mainNav .title04 { position:absolute; bottom:0.3em; font-family: 'Flamenco', cursive; font-size:5em; font-weight:300; line-height:1em; opacity:0; filter: alpha(opacity=0;); }
.mainNav .title05 {font-family: 'Josefin Sans', sans-serif; font-size:7em; letter-spacing:-5px; line-height:1em;}
.mainNav .title05 > span {position:relative; display:inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition:none; -o-transition: none; transition: none;}
.mainNav .title05 span span { position:absolute; display:block; width:4px; height:4px; left:50%; top:-0.2em; margin-left:-4px; border-radius:50%; background:#e4cc98;  }
.mainNav .title06 { font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:200;}
.mainNav .title06 span {font-family: 'Droid Serif', serif; color:#e4cc98; font-style:italic; }

.mainNav .mainNav01 .title04, .mainNav .mainNav03 .title04 { right:0;}
.mainNav .mainNav02 .title04, .mainNav .mainNav04 .title04 { left:0;}
.mainNav .mainNav05 .title04, .mainNav .mainNav03 .title04 { right:0;}
.mainNav .mainNav06 .title04, .mainNav .mainNav04 .title04 { left:0;}

.mainNav .title > span { display:block;}
.mainNav .bg01, .mainBg .bg01 { z-index:1;}
.mainNav .bg02, .mainBg .bg02 {opacity:0; filter: alpha(opacity=0;); z-index:2;}
.mainNav .bg03, .mainBg .bg03 {opacity:0; filter: alpha(opacity=0;); z-index:3;}
.mainNav a.on .title { text-align:center;}
.mainNav a.on .title01 { font-size:7em;}
.mainNav a.on .title01 span span { opacity:0; filter: alpha(opacity=0;);  }
.mainNav a.on .title03 { font-size:15em; line-height:1.05em; opacity:0.5;  filter: alpha(opacity=50;); }
.mainNav a.on .title04 { opacity:1; filter: alpha(opacity=100;); }
.mainNav a.on .bg02, .mainBg li.on .bg02 {opacity:1; filter: alpha(opacity=100;); }
.mainNav a.off .bg01, .mainBg li.off .bg01 { opacity:0; filter: alpha(opacity=0;); }
.mainNav a.off .bg03, .mainBg li.off .bg03 { opacity:0.7; filter: alpha(opacity=70;);}
.mainNav .mainNav01 .bg01, .mainBg li.mainNav01 .bg01 { background:url(/web/img/room/mienne/prv_01.jpg);}
.mainNav .mainNav02 .bg01, .mainBg li.mainNav02 .bg01 { background:url(/web/img/room/mienne/prv_02.jpg);}
.mainNav .mainNav03 .bg01, .mainBg li.mainNav03 .bg01 { background:url(/web/img/room/mienne/prv_03.jpg);}
.mainNav .mainNav04 .bg01 { background:url(/web/img/room/mienne/prv_04.jpg);}
.mainNav .mainNav05 .bg01 { background:url(/web/img/room/mienne/prv_05.jpg);}
.mainNav .mainNav06 .bg01 { background:url(/web/img/room/mienne/prv_06.jpg);}
.mainNav .mainNav01 .bg02, .mainBg li.mainNav01 .bg02 { background:url(/web/img/room/mienne/prv_B_01.jpg);}
.mainNav .mainNav02 .bg02, .mainBg li.mainNav02 .bg02 { background:url(/web/img/room/mienne/prv_B_02.jpg);}
.mainNav .mainNav03 .bg02, .mainBg li.mainNav03 .bg02 { background:url(/web/img/room/mienne/prv_B_03.jpg);}
.mainNav .mainNav04 .bg02 { background:url(/web/img/room/mienne/prv_B_04.jpg);}
.mainNav .mainNav05 .bg02 { background:url(/web/img/room/mienne/prv_B_05.jpg);}
.mainNav .mainNav06 .bg02 { background:url(/web/img/room/mienne/prv_B_06.jpg);}
.mainNav .mainNav01 .bg03, .mainBg li.mainNav01 .bg03 { background:url(/web/img/room/mienne/prv_M_01.jpg);}
.mainNav .mainNav02 .bg03, .mainBg li.mainNav02 .bg03 { background:url(/web/img/room/mienne/prv_M_02.jpg);}
.mainNav .mainNav03 .bg03, .mainBg li.mainNav03 .bg03 { background:url(/web/img/room/mienne/prv_M_03.jpg);}
.mainNav .mainNav04 .bg03 { background:url(/web/img/room/mienne/prv_M_04.jpg);}
.mainNav .mainNav05 .bg03 { background:url(/web/img/room/mienne/prv_M_05.jpg);}
.mainNav .mainNav06 .bg03 { background:url(/web/img/room/mienne/prv_M_06.jpg);}




.mainLink { position:fixed; right:20px; top:55%; margin-top:-140px; z-index:10; }
.mainLink li { padding:14px 0; }
.mainLink li a { display:inline-block; width:200px; opacity:.8; height:28px; border-radius:50%; font-family: 'Prata', serif; color:#fff; font-size:1.8em; line-height:26px; text-align:left; -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; letter-spacing:-1px;}
.mainLink li.active a, .mainLink li a:hover, .mainLink li a:focus { opacity:1; font-size:2em;}

.lSSlideOuter  { position:relative;  z-index:1;}
.lSSlideWrapper { z-index:1;}
.lightslider { height:100vh !important; padding-bottom:0 !important;}
.lSAction { position:absolute; width:100px; left:20%; top:39%; z-index:2;}
.lSAction > a { position:absolute; display:inline-block; width:40px; height:40px; top:0; margin:0; font-size:2em; 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;}
.lSAction > a.lSPrev { left:10px;}
.lSAction > a.lSPrev:hover { left:0px;}
.lSAction > a.lSNext {right:10px;}
.lSAction > a.lSNext:hover { right:0px;}
.main_typo { position:absolute; width:25%; left:3%; top:10%; text-align: left; color:#fff; z-index:3; }
.main_typo dt { margin-top:-60%;}
.main_typo dt a {font-family: 'Alex Brush', cursive; font-size:1vw; line-height:0.3em; margin:-0.7em 0 0.15em; opacity:0; filter: alpha(opacity=0;); display:inline-block; color:#fff; -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;}
.main_typo dt a:hover, .main_typo dt a:focus { transform: rotateY(360deg); -ms-transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}
.main_typo dd {opacity:0; filter: alpha(opacity=0;);}
.main_typo dd p { color:#fff;font-family: 'Josefin Sans', sans-serif; font-size:8em; letter-spacing:-8px;}
.main_typo dd p img{ width:100%;}
.main_typo dd div {font-family: 'Jeju Myeongjo', serif; font-size:1.2em; letter-spacing:-2px; line-height:1.6em;  font-style:italic; text-shadow:1px 1px 4px #333;}

.main_typo2 { position:absolute; width:40%; left:30%; top:45%; text-align:center; color:#fff; z-index:2; }
.main_typo2 dt { margin-top:-40%;}
.main_typo2 dt a {font-family: 'Alex Brush', cursive; font-size:1vw; line-height:0.3em; margin:-0.7em 0 0.15em; opacity:0; filter: alpha(opacity=0;); display:inline-block; color:#fff; -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;}
.main_typo2 dt a:hover, .main_typo dt a:focus { transform: rotateY(360deg); -ms-transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}

.main_typo3 { position:absolute; width:50%; left:5%; top:23%; text-align:left; color:#fff; z-index:3; }
.main_typo3 dd {}
.main_typo3 dd p { color:#465c7a;font-family: 'Josefin Sans', sans-serif; font-size:7em; letter-spacing:-8px; line-height:0.9em; margin-bottom:0.3em;}
.main_typo3 dd p img{ width:100%;}
.main_typo3 dd div {font-family: 'Jeju Myeongjo', serif; font-size:1.4em; letter-spacing:-2px; line-height:1.3em;  font-style:italic; color:#4b607c;}

.count { position:absolute; display:block; width:60px; left:25%; top:39.1%; 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;}
.count .current { position:absolute; right:35px; top:-10px;}
.count .count_line {}
.count .total { position:absolute; left:35px; bottom:-5px;}

.main_scroll { position:absolute; display:block; width:50px; left:50%; bottom:-100px; margin-left:-55px;  opacity:0; filter: alpha(opacity=0;); z-index:3;}
.main_scroll img{ width:100%;}
.main_scroll span { display:block; width:1.5px; height:245px; background:#fff; margin:0 auto 0; -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; }
.main_scroll:hover span, .main_scroll:focus span { height:195px;}

.active .main_typo dt a {opacity:1; filter: alpha(opacity=100;); font-size:16vw; transition: all 0.5s ease 0.6s;}
.active .main_typo dd {opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease 0.6s;}
.active .main_scroll { opacity:1; filter: alpha(opacity=100;); bottom:0; transition: all 0.2s ease 1.3s; }

.mainBottom { position:fixed; height:157px; left:-20px;; bottom:-40px; z-index:10;}
.mainBottom a img { width:100%;}

.room_info_B{ display:none;position:absolute; width:900px;z-index:10000; left:25%; top:15%; background-image:url(/web/img/room/room_info_bg.png); background-repeat:no-repeat;}
.room_info_B2{ display:none;position:absolute; width:1500px;z-index:10000; left:12%; top:15%; background-image:url(/web/img/room/room_info_bg.png); background-repeat:no-repeat;}
@media  (max-width: 1280px){

.section, .lightslider { height:70vw !important;}
}
@media  (min-width: 1366px){
	.main_typo dd p img{ width:100% !important;}
	.main_typo dd p{ width:60% !important;}
	.main_scroll span{ height:100px !important;}
	.main_scroll:hover span, .main_scroll:focus span { height:50px !important;}
	.room_info_B{ width:900px !important; left:14% !important; top:11%;}
	.mainNav .title01{ font-size:5.5em !important;}
	.mainNav a.on .title01{ font-size:5.8em !important;}
	.main_typo{ width:35% !important; top:15% !important}
	.lSAction{ top:45% !important;}
	.room_info_B{width:800px !important; left:25%  !important;}
	.room_info_B2{ width:900px !important; left:15% !important; top:15%;}
	.count{ left:27% !important; top:45% !important;}
	
}
@media  (min-width: 1440px){
	.main_typo dd p img{ width:70% !important;}
	.main_typo dd p{ width:100% !important;}
	.main_scroll span{ height:100px !important;}
	.main_scroll:hover span, .main_scroll:focus span { height:50px !important;}
	.room_info_B{ width:900px !important; left:14% !important; top:11%;}
	.mainNav .title01{ font-size:5.5em !important;}
	.mainNav a.on .title01{ font-size:5.8em !important;}
	
}

@media  (min-width: 1600px){
	.main_typo dd p{ width:60% !important;}
	.main_typo dd p img{ width:100% !important;}
	.lSAction{top:43% !important;}
	.main_scroll span{ height:100px !important;}
	.main_scroll:hover span, .main_scroll:focus span { height:40px !important;}
	.count{left:26% !important; top:43.1% !important;}
	.room_info_B2{width:1200px  !important; left:15%  !important;}

}

@media  (min-width: 1920px){
	.main_typo dd p{ width:100% !important;}
	.main_typo{ width:25% !important; top:10% !important;}
	.lSAction{top:41% !important;}
	.main_scroll span{ height:245px !important;}
	.main_scroll:hover span, .main_scroll:focus span { height:195px !important;}
	.count{left:25% !important; top:41.1% !important;}
	.room_info_B{width:900px !important; left:25%  !important;}
	.room_info_B2{width:1500px !important; left:12%  !important;}
}




#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;max-width:970px;height:0}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}