@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,600italic,700,800);
@import url(https://fonts.googleapis.com/css?family=Amiri:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

@font-face {
    font-family: "NanumBarunGothic";
    font-style: normal;
    font-weight: normal;
    src: url("./fonts/NanumBarunGothic.eot?#iefix") format("embedded-opentype"), url("./fonts/NanumBarunGothic.woff") format("woff"), url("./fonts/NanumBarunGothic.ttf") format("truetype");
}


@font-face {
  font-family: 'Social-Shapes';
    src:  url('./fonts/Social-Shapes.ttf.woff') format('woff'),
    url('./fonts/Social-Shapes.ttf.svg#Social-Shapes') format('svg'),
    url('./fonts/Social-Shapes.ttf.eot'),
    url('./fonts/Social-Shapes.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
  font-family: "Josefin Sans";
    src:  url('./fonts/JosefinSans-Bold.woff') format('woff'),
    url('./fonts/JosefinSans-Bold.svg#Social-Shapes') format('svg'),
    url('./fonts/JosefinSans-Bold.eot'),
    url('./fonts/JosefinSans-Bold.eot?#iefix') format('embedded-opentype'); 
    font-weight: 700;
    font-style: normal;
}
*/
html{width:100%;height:100%;overflow-y:auto;-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,select,textarea,form,fieldset,legend,body{margin:0;padding:0; font-family:"Open Sans","NanumBarunGothic", "Malgun Gothic","Nanum Gothic",NanumGothic,Dotum,"돋움",Arial; }
*+html body body, *+html body div, *+html body li, *+html body dt, *+html body dd, *+html body p, *+html body tr, *+html body td, *+html body h2 {font-family: "NanumBarunGothic", "Malgun Gothic","Nanum Gothic",NanumGothic,Dotum,"돋움",Arial;}
body{visibility:visible; width:100%; font-size:13px;color:#666;line-height:1.5em;  background:#fff;}
img,fieldset{border:none;}
em,address{font-style:normal;}
a{text-decoration:none;color:#666;}
li{list-style:none;}
select,textarea{border-radius:0;}
.clear {}
.clear:after {content:"";display:block;clear:both;}
.blind{visibility:hidden;width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
.img_100 {width:100%;vertical-align:top;}
select{min-width:50px;height:26px;margin:0;padding:0;font-size:12px;line-height:26px;font-family:Dotum,sans-serif;}
.underline {text-decoration:underline; }
.fr { float:right;}
.tl { text-align:left;}
.tc { text-align:center;}
.tr { text-align:right;}
.vt {vertical-align:top !important;}
.mb0 { margin-bottom:0 !important;}
.mb3 { margin-bottom:3px !important;}
.mb20 { margin-bottom:20px !important;}
* {box-sizing: border-box;}
.border_box { border-box;box-sizing: border-box;}

.transAll015 { transition: all 0.15s ease-in-out; }
.transAll03 { transition: all 0.3s ease-in-out; }

.strongColor01 { color:#d70e0e;}

.block1280, .block1024, .block768, .block560, .block480, .block380 {display:none;}
.in-block1280, .in-block1024, .in-block768, .in-block560, .in-block480, .in-block380 {display:none;}

#skip{position:fixed;top:-9999px;left:0;z-index:1000;width:240px;height:30px;background:#676462;}
#skip a{display:block;height:30px;padding:0 0 0 20px;line-height:30px;font-size:12px;color:white;}
#skip.on{top:0;}

/* top */
#header { position:absolute; width:100%; opacity:0; filter: alpha(opacity=0;); z-index:10; }
.logo { position:absolute; left:30px; top:40px; z-index:10;}
.btn_nav { position:absolute; display:none; width:36px; height:30px; right:10px; top:10px; transition: all 0.3s ease-in-out;
 z-index:21;}
.btn_nav span {position: absolute; display: block; width:32px; height:3px; left:50%;  background: #fff; transform: translate(-50%, 0px); transition: all 0.2s ease-in-out; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);  }
.btn_nav .line01 { top: 2px;}
.btn_nav .line02 {top: calc(50% - 1px); }
.btn_nav .line03 {bottom: 2px; }
.btn_nav div {position: absolute; display: block; width:32px; height:3px; left:50%;  background: none; transform: translate(-50%, 0px); transition: all 0.2s ease-in-out; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); text-align:center; color:#FFF; font-style:oblique;  }
.btn_nav .line04 {bottom: -2px; }

.btn_nav.on .line01 { transform: translate(-50%, 12px) rotate(45deg);}
.btn_nav.on .line02 {opacity:0; }
.btn_nav.on .line03 {transform: translate(-50%, -12px) rotate(-45deg); }
.btn_nav.on .line04 {opacity:0; }

.btn_reserv { position:fixed; display:inline-block; right:40px; top:40px; z-index:10;
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); box-shadow:2px 2px 3px rgba(0, 0, 0, 0.1);}
.btn_reserv img { vertical-align:top;}
.btn_menu { display:none;}
#gnb { position:absolute;left:30px; top:200px; z-index:10;}
.gnb > li {  margin:0; }
.gnb li a.depth1 { display:inline-block; font-size:15px; color:#fff; line-height:28px; text-transform:uppercase; font-weight:600;}
.gnb li a.depth1:hover, .gnb li a.depth1:focus, .gnb li.on a.depth1, .gnb li:hover a.depth1, .gnb li:focus a.depth1 { text-decoration:underline;}
.gnb li.this a.depth1 { font-weight:700;}
.gnb_sub { height:0; width:100%; min-width:500px; transition: all 0.3s ease-in-out; overflow:hidden;}
.gnb > li:hover .gnb_sub, .gnb > li:focus .gnb_sub { height:26px;}
.gnb > li.gnb2:hover .gnb_sub , .gnb > li.gnb2 :focus .gnb_sub { height:64px;}
.gnb_sub:after, .gnb_sub > ul:after {content:"";display:block;clear:both;}
/*.gnb li.this .gnb_sub { display:block;opacity:1; filter: alpha(opacity=100;);}*/
.gnb_sub li { float:left; display:inline; margin-right:15px;}
.gnb_sub li a { color:#fff; font-size:13px; line-height:18px; }
.gnb_sub li a:hover, .gnb_sub li a:focus { text-decoration:underline;}
.gnb_sub li.this a { font-weight:700;}

.header_link { position:absolute; right:10px; top:30px; z-index:5;}
.header_link li { float:left; margin-right:20px;}
.header_link li a { color:#fff; font-size:13px;}
.header_link i { display:inline-block !important; width:1.1em; font-size:1.1em; vertical-align:middle;}

.btn_reser { position:absolute; left:25px; bottom:0; z-index:30; opacity:0; filter: alpha(opacity=0;);}
.btn_reser a { display:block; padding:0 0 0 8px; }
.btn_reser a:hover, .btn_reser a:focus {padding:0 8px 0 0;}


/* sns */
.social {font-family: 'Social-Shapes'; }
#header .sns_link { position:absolute; right:30px; top:36px; z-index:10;}
.main #header .sns_link { top:60px;}
.sns_link li { float:left; margin-left:7px; }
.sns_link a {opacity:0.75; filter: alpha(opacity=75;);-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}
.sns_link a:hover, .sns_link a:focus { opacity:1; filter: alpha(opacity=100;);}
.sns_link span { display:block; width:35px; height:35px; font-size:48px; line-height:35px; color:#727272;}

#footer .sns_link span {  color:#fff;}

#footer .sns_link { margin-top:30px;}
#footer .sns_link li { margin:0 7px 0 0; }
#footer a { color:#fff;}

.btn_footer { position:absolute; display:inline-block; right:25px; bottom:0; z-index:35; background:url(../images/common/btn_infomore_bg.png); }
.btn_footer.on {position:fixed; background-position:0 -35px;}

#footer { position:relative; padding:0; z-index:55; }
.main #footer { position:fixed; bottom:-450px;}
.footer_img { position:relative; width:100%; vertical-align:top; z-index:1; z}
.footer_bg { position:relative; width:98%; max-width:1760px; margin:0 auto -4%; padding:30px 2%; color:#fff; background:#272727; z-index:2;}
.footer_area { position:relative; width:100%; max-width:1120px; margin:0 auto;  }
.footer_area:after {content:"";display:block;clear:both;}
.footer_info { width:100%; max-width:860px;}
.footer_info th { padding:2px 0 10px; font-size:16px; line-height:22px; text-align:left;}
.footer_info td { padding:1px 0;}
.footer_info span { font-size:0.7em;}
.footer_info02 { position:absolute; right:0; top:0;}
.footer_info02 h2 {padding:2px 0 10px; font-size:16px; line-height:22px;}
.footer_info02 p { padding:2px 0 13px; font-family: 'Montserrat', sans-serif; font-size:15px; line-height:22px;}
.footer_area i  { display:inline-block; width:1.3em; font-size:1.1em; color:#fff; vertical-align:middle;}

.hanoktown { font-family:"Roboto",sans-serif; font-size:11px; text-transform:uppercase; }

.b-close { position:fixed; display:block; width:26px; height:26px; line-height:26px; text-align:center; background:#000; font-size:14px; font-weight:bold; color:#fff; right:50%;}
#popup_reser { display:none; position:fixed !important; width:900px !important; top:20px !important; overflow-y:auto; border:5px solid #000; background:#fff;}
#popup_reser .b-close { top:20px; margin-right:-485px;}
.resevation_frame { width:96%; padding:0 2%; height:3500px; background:#fff;}

#popup_privacy { position:fixed; display:none; width:560px; top:100px !important; overflow-y:auto; border:5px solid #000; background:#fff;}
.privacy_frame { width:100%; height:5800px; background:#fff;}
#popup_privacy .b-close {top:100px; margin-right:-325px;}

.lSSlideOuter li img { width:100%; vertical-align:top;}
.main_slider .lSSlideOuter, .topArea .lSSlideOuter { position:absolute;  width:100%; height:100%; left:0; top:0; z-index:1;}
.main_slider .lSSlideWrappe, .topArea .lSSlideWrappe  { position:absolute; width:100%; height:100%; left:0; top:0;}
.main_slider .lSSlideWrapper, .topArea .lSSlideWrapper { position:absolute; width:100%; height:100%; left:0; top:0;}
.main_slider .lightSlider, .topArea .lightSlider {position:absolute !important; width:100% !important; height:100% !important; left:0; top:0; z-index:1;}
.main_slider .lightSlider li, .topArea .lightSlider li {position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-size:cover !important; background-position:center center !important;}
.lSAction { position:absolute; width:107px; height:35px; bottom:0; z-index:5; }
.main .lSAction { right:163px;}
.sub .lSAction { left:50%; margin-left:-53px;}
.lSAction a { position:absolute; display:block; width:35px; height:35px; top:0; margin:0; background:url(../images/common/slider_arrow.gif);}
.lSAction a.lSPrev { left:0;}
.lSAction a.lSNext { right:0;background-position:-70px 0;}
.lSPager.lSpg { position:absolute; width:35px; height:35px; bottom:0;; margin:0; background:#fff !important;}
.lSPager.lSpg li { display:none !important; padding:0 !important; }
.lSPager.lSpg li.active { display:block !important;}
.lSSlideOuter .lSPager.lSpg > li a, .lSSlideOuter .lSPager.lSpg > li.active a { text-indent:0;  width:35px; height:35px;  line-height:35px; border-radius:0 !important; background-color:none !importnat; color:#000;}
.main .lSPager.lSpg { right:199px;}
.sub .topArea .lSPager.lSpg { left:50%; margin-left:-17px !important;}
.sub .lSPager.lSpg { left:50%; margin-left:-35px !important;}

.roomPreview .lSAction { height:50px; width:112px; margin-left:-56px;}
.roomPreview .lSAction a {width:50px; height:50px; background:url(../images/room/room_arrow.png); }
.roomPreview .lSAction a.lSNext {background-position:-50px 0; }

.cafe_01 .lSSlideWrapper { padding-bottom:36px;}
.cafe_01 .lSAction { width:200px; height:20px; margin-left:-100px;}
.cafe_01 .lSAction a, .special_01 .lSAction a, .tour_01 .lSAction a { width:34px; height:18px; top:2px; background:url(../images/cafe/cafe_arrow.png);}
.cafe_01 .lSAction a.lSNext, .special_01 .lSAction a.lSNext { background-position:-34px 0;}
.cafe_01 .lSPager, .special_01 .lSPager { height:20px; margin-left:-35px !important;}
.cafe_01 .lSSlideOuter .lSPager.lSpg > li a, .cafe_01 .lSSlideOuter .lSPager.lSpg > li.active a,
.special_01 .lSSlideOuter .lSPager.lSpg > li a, .special_01 .lSSlideOuter .lSPager.lSpg > li.active a,
.tour_01 .lSSlideOuter .lSPager.lSpg > li a, .tour_01 .lSSlideOuter .lSPager.lSpg > li.active a
{ height:20px; line-height:20px; font-family:"Amiri","NanumBarunGothic",serif; font-size:22px; font-style:italic; }
.special_01 .lSAction, .tour_01 .lSAction {width:200px; height:40px; left:auto; right:0; margin:0 !important; background:#fff; padding:10px;}
.special_01 .lSPager, .tour_01 .lSPager { height:20px; left:auto !important; margin:0 !important; right:100px; bottom:10px; z-index:5;}
.special_01 .lSAction a, .tour_01 .lSAction a { top:12px;}
.special_01 .lSAction a.lSPrev, .tour_01 .lSAction a.lSPrev { left:10px;}
.special_01 .lSAction a.lSNext, .tour_01 .lSAction a.lSNext { right:10px; background-position:-34px 0;}



@media \0screen { /* IE8 웹폰트 설정*/
}

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

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

@media  (max-width: 1280px){

.none1280 {display:none;} 
.block1280 {display:block;}
.in-block1280 {display:inline-block;}

}

@media  (max-width: 1200px){

}

@media  (max-width: 1024px){

.none1024 {display:none;} 
.block1024 {display:block;}
.in-block1024 {display:inline-block;}

body {font-size:15px; line-height:20px;}

.logo { left:15px; top:15px;}
.logo img { width:84px;}

.btn_nav { display:block; right:15px; top:15px;}
#gnb { position:fixed; width:240px !important; height:100%; left:auto; right:-240px; top:0; padding:50px 0 0 20px; background:url(../images/bg/black_90.png); transition: all 0.2s ease-in-out;}
#gnb.on { right:0;}
.gnb li a.depth1 { font-size:26px; color:#fff; line-height:42px; text-transform:uppercase; font-weight:600;}
.gnb_sub { display:none;}


.main #footer { position:fixed; bottom:-250px; z-index:1}
.header_link { display:none;}

.footer_bg { margin:0 auto -5%; padding:20px 3%;}
.footer_tel { font-size:16px; text-align:center; margin-bottom:10px; font-weight:600;}
.footer_area i  { width:1em;}

.roomPreview .lSAction { height:25px; width:56px; margin-left:-28px;}
.roomPreview .lSAction a {width:25px; height:25px; background-size:50px 25px;}
.roomPreview .lSAction a.lSNext {background-position:-25px 0; }

}

@media  (max-width: 768px){

.none768 {display:none;} 
.block768 {display:block;}
.in-block768 {display:inline-block;}

.footer_info {  width:100%; max-width:420px;margin:0 auto;}
.footer_info th { padding:2px 2px 5px; font-size:13px; line-height:16px;}
.footer_info td { padding:1px 2px 0; font-size:10px; line-height:12px;}


}

@media  (max-width: 560px){

.none560 {display:none;} 
.block560 {display:block;}
.in-block560 {display:inline-block;}


.main .lSAction { right:138px;}
.main .lSPager.lSpg { right:174px;}
.main .btn_footer { bottom:220px; right:0; z-index:5;}
.footer_bg { padding:10px 1%; color:#fff;}

}

@media  (max-width: 480px){

.none480 {display:none;} 
.block480 {display:block;}
.in-block480 {display:inline-block;}
}


@media  (max-width: 380px){

.none380 {display:none;} 
.block380 {display:block;}
.in-block380 {display:inline-block;}	
}

@media  (max-width: 360px){
.footer_info td { letter-spacing:-0.5px;}
}