/* Written By MJS */

*{-webkit-text-size-adjust:none}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,fieldset,th,td,input,textarea,button,select{font-family: 'MyLotteLight';margin:0;padding:0;font-weight:normal}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li{list-style:none}
a{border:0;padding:0;margin:0;text-decoration:none;color:#333}
ol,ul,dl{list-style:none}
img{float:left;border:0;padding:0;margin:0;}
legend,caption{display:none}
table{border-collapse:collapse;border-spacing:0}
input{vertical-align:middle;padding:0;border:0;margin:0;}
select{padding:0;border:0;margin:0;}

body{min-width:320px;max-width:1000px;height:100%;margin:0 auto;}

@font-face { font-family: 'MyLotteLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.0/MyLotteLight.woff') format('woff'); font-weight: normal; font-style: normal; }




/*================================== 상단 ==================================*/
#main-navbar{position:relative;float:left;width:92%;height:40px;padding:10px 4%;background:url(../img/bg_black.png) repeat;z-index:10;}

#toggle-sidebar{position:absolute;left:0;top:5px;width:60px;height:60px;cursor:pointer;z-index:10;}
a.call{position:absolute;right:0;top:5px;width:60px;height:60px;z-index:10;}


/* 로고 */
.logo{position:relative;float:left;width:100%;text-align:center;}
.logo a{float:left;width:100%;height:40px;line-height:40px;font-size:26px;font-weight:600;color:#fff;z-index:100;}


#main-sidebar{position:fixed;top:0;bottom:0;background:#e5e5e5;z-index:1000000000000;}
#main-sidebar .close-sb{height:48px;line-height:48px;background:#333;padding:0 0 0 3%;border-bottom:1px solid #000;font-size:18px;color:#fff;cursor:pointer;}
#main-sidebar ul li > a{display:block;height:18px;line-height:18px;padding:12px 0 12px 5%;border-bottom:1px solid #ccc;font-size:16px;font-weight:600;color:#555;}
#main-sidebar ul li > a:hover{background:#333;border-bottom:1px solid #010101;color:#fff;}
#main-sidebar ul li li > a{display:block;padding:8px 0 8px 5%;background:#f7f7f7;border-bottom:1px solid #dedee0;font-size:13px;color:#555;}
#main-sidebar ul li li > a .class_point1{width:30px;display:inline-block;line-height:18px;font-size:10px;font-weight:600;color:white;background:red;text-align:center;padding:0;margin:0;margin-right:4px;}
#main-sidebar ul li li > a .class_point2{width:30px;display:inline-block;line-height:18px;font-size:10px;font-weight:600;color:white;background:green;text-align:center;padding:0;margin:0;margin-right:4px;}






/*================================== 메인 ==================================*/
/* 메인슬라이드 멘트 */
.ment{position:absolute;left:0;top:18%;width:100%;text-align:center;z-index:10000000000;text-shadow: 2px 2px 2px black;}
.ment b{float:left;width:100%;line-height:26px;font-size:20px;font-weight:600;color:#fff;}
.ment p{float:left;width:100%;line-height:14px;font-size:14px;color:#fff;margin:3% 0 5% 0;display:none;}


/* 동영상 백그라운드 */
#main_video{position:relative;float:left;width:100%;margin:10px 0;overflow:hidden;background:#000;}


/* 메인타이틀 */
.main_title{position:relative;float:left;width:100%;line-height:100%;font-size:30px;letter-spacing:-1px;text-align:center;margin-bottom:5%;color:#000;}
.main_title span{float:left;width:100%;line-height:100%;font-size:12px;color:#999;margin-top:3%;}


/* 메인 100% 좌우 버튼 슬라이드 3개 공통 */
#mslider100{position:relative;float:left;width:100%;overflow:hidden;z-index:10;}
.main_slider{position:absolute;left:0;top:0;width:100%;z-index:10000000000;}
.main_slider .layout{position:relative;float:left;width:100%;}
.main_slider .bx-wrapper img{max-width:100%;height:auto;display:block;}
.main_slider .bx-controls-direction{position:absolute;left:0;top:50%;width:100%;height:40px;margin-top:-20px;text-indent:-9999px;z-index:1000000;}
.main_slider .bx-controls-direction a.bx-prev{position:absolute;left:0;top:0;width:35px;height:40px;background:url('../img/arrow_left2.png') no-repeat;background-size:35px;}
.main_slider .bx-controls-direction a.bx-next{position:absolute;right:0;top:0;width:35px;height:40px;background:url('../img/arrow_right2.png') no-repeat;background-size:35px;}
.main_slider .bx-default-pager,.bx-controls-auto,.bx-stop{display:none;text-indent:-9999px;}
.ment2{position:absolute;top:30%;left:0;width:100%;text-align:center;text-shadow: 2px 2px 2px black;}
.ment2 b{float:left;width:100%;font-size:18px;color:#fff;margin-bottom:4%;}
.ment2 p{line-height:14px;font-size:11px;color:#fff;border:none !important;background:none !important;}

.main_res{position:absolute;top:32%;left:0;width:100%;text-align:center;}
.main_res b{float:left;width:100%;font-size:18px;color:#fff;margin-bottom:4%;text-align:center;text-shadow: 2px 2px 2px black;}
.main_res input{display:inline-block;width:100px;height:24px;line-height:100%;font-size:12px;text-align:center;border:none;color:#fff;background:#000;}
.main_res input:hover{background:#333;}


/* 객실보기 */
#main_room{position:relative;float:left;width:92%;padding:8% 4% 4% 4%;background:#f7f7f7;z-index:1000;}
.mr_box{position:relative;float:left;width:100%;height:auto;margin-bottom:4%;overflow:hidden;}
.mr_box .bx-wrapper img{max-width:100%;height:auto;display:block;}
.bx-pager{display:none;}

.mr_txt{position:relative;float:left;width:90%;padding:10px 4.8%;background:#fff;border:1px solid #ccc;border-top:none;z-index:1000;}
.mr_txt b{float:left;width:100%;line-height:22px;font-size:16px;font-weight:1000;color:#000;}
.mr_txt input{position:absolute;right:5%;top:10px;height:22px;line-height:100%;font-size:10px;font-weight:600;padding:0 10px;border:1px solid #000;color:#fff;background:#000;}


/* 서비스, 부대시설 */
#main_rolling{position:relative;float:left;width:86%;background:#fff;padding:8% 8%;z-index:100000000;}
.arrow_rolling{position:relative;float:left;width:91%;background:#f7f7f7;padding:3%;border:1px solid #ccc;}
.arrow_rolling .layout{position:relative;float:left;width:100%;}
.arrow_rolling .bx-viewport{position:relative;float:left;width:100%;}
.arrow_rolling b{float:left;width:100%;line-height:18px;font-size:13px;text-align:center;margin-top:8px;}
.arrow_rolling .bx-controls-direction{position:absolute;left:0;top:50%;width:100%;height:48px;margin-top:-24px;text-indent:-9999px;z-index:1000000000000;}
.arrow_rolling .bx-controls-direction a.bx-prev{position:absolute;left:-34px;top:0;width:24px;height:48px;background: url('../img/arrow_left.png') no-repeat;background-size:24px;}
.arrow_rolling .bx-controls-direction a.bx-next{position:absolute;right:-34px;top:0;width:24px;height:48px;background: url('../img/arrow_right.png') no-repeat;background-size:24px;}
.arrow_rolling .bx-default-pager,.bx-controls-auto,.bx-stop{display:none;text-indent:-9999px;}
.arrow_rolling ul{position:relative;float:left;width:100%;}
.arrow_rolling ul li{float:left;width:7% !important;}
.arrow_rolling ul li img{max-width:100%;height:auto;display:block;}






/*================================== 하단 ==================================*/
#footer{position:relative;float:left;width:100%;background:#333;}
.copy{position:relative;float:left;width:100%;padding-top:4%;color:#aaa;font-size:11px;}
.copy p{text-align:center;}


/* 버튼 style */
#button{position:relative;float:left;width:100%;background:#333;padding:4% 0 6% 0;text-align:center;}
.btn{margin:1%;padding:2% 4%;font-size:12px;color:#555;border:none;background:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
behavior:url(ie-css3.htc);}





/*================================== 서브 공통 style ==================================*/
/* 서브 확대되는 배경 슬라이드 */
#slideshow-banner{position:fixed;left:0;top:0;width:100%;height:1000px;overflow:hidden;}
#slideshow-banner ul{position:absolute;top:0;left:50%;width:2000px;height:1000px;margin-left:-1000px;overflow:hidden;/* 흐림효과 filter:alpha(opacity=30);opacity:0.3;-moz-opacity:0.3;*/}
#slideshow-banner ul .slideshow-item{position:relative;float:left;height:1000px;}
.slideshow-transform{transform:scale(1.1, 1.1);transition:transform 10s;}


/* 서브탭메뉴 1줄 3개 */
.sub_tab{position:relative;float:left;width:94%;text-align:center;margin:10% 3% -1px 3%;overflow:hidden;}
.sub_tab b{float:left;width:100%;line-height:100%;font-size:22px;font-weight:400;letter-spacing:-1px;text-align:center;color:#000;margin-bottom:4%;}
.sub_tab ul{float:left;width:100%;border-left:1px solid #ccc;border-top:1px solid #ccc;}
.sub_tab ul li{float:left;width:33%;height:28px;background:#fff;border:1px solid #ccc;border-left:none;border-top:none;text-align:center;}
.sub_tab ul li a{float:left;width:100%;height:28px;line-height:28px;font-size:13px;color:#555;background:#f6f6f6;}
.sub_tab ul li a:hover{background:#f4f4f4;}
.sub_tab ul li a.on{font-weight:600;color:#fff;border:1px solid #333;background:#333;}
/* 서브탭메뉴 1줄 2개 */
.sub_tab2{position:relative;float:left;width:94%;text-align:center;margin:10% 3% -1px 3%;overflow:hidden;}
.sub_tab2 b{float:left;width:100%;line-height:100%;font-size:22px;font-weight:400;letter-spacing:-1px;text-align:center;color:#000;margin-bottom:4%;}
.sub_tab2 ul{float:left;width:100%;border-left:1px solid #ccc;border-top:1px solid #ccc;}
.sub_tab2 ul li{float:left;width:49.6%;height:28px;background:#fff;border:1px solid #ccc;border-left:none;border-top:none;text-align:center;}
.sub_tab2 ul li a{float:left;width:100%;height:28px;line-height:28px;font-size:13px;color:#555;background:#f6f6f6;}
.sub_tab2 ul li a:hover{background:#f4f4f4;}
.sub_tab2 ul li a.on{font-weight:600;color:#fff;border:1px solid #333;background:#333;}


/* 서브컨텐츠 */
#sub_contents{position:relative;float:left;width:100%;z-index:1000;}
.page_content{position:relative;float:left;width:85.6%;padding:10% 4%;margin:0 3% 3% 3%;min-height:360px;background:#fff;border:1px solid #ccc;}


/* 서브타이틀 */
.sub_title{float:left;width:95%;line-height:100%;padding-left:3%;font-size:18px;letter-spacing:-1px;font-weight:600;color:#000;border-left:3px solid #999;margin:6% 0 3% 0;}





/*================================== 서브 내용 ==================================*/
/* 인사말 */
#greeting{position:relative;float:left;width:100%;line-height:18px;font-size:13px;text-align:center;color:#666;}
#greeting b{float:left;width:100%;line-height:26px;font-size:20px;font-weight:400;letter-spacing:-1px;font-family:'Nanum Myeongjo' !important;color:#000;}
#greeting .gree_img{position:relative;float:left;width:100%;margin:5% 0;border-bottom:10px solid #e2f4f8;}
#greeting .gree_img img{float:left;width:100%;}
#greeting .gree_img p{position:absolute;left:50px;top:70px;font-size:50px;font-weight:400;text-align:left;letter-spacing:-2px;color:#fff;font-family:'Nanum Myeongjo' !important;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;}
#greeting .gree_img span{float:left;width:100%;font-size:16px;letter-spacing:-1px;font-family:'Nanum Gothic';margin-top:24px;}


/* 찾아오시는길 */
.cont{border:1px solid #e0e0e0;}


/* 외관 및 주변전경 */
.photo_list{position:relative;float:left;width:100%;}
.photo_list ul{position:relative;float:left;width:100%;}  
.photo_list ul li{position:relative;float:left;width:100%;overflow:hidden;margin-bottom:2%;}  
.photo_list ul li img{float:left;height:100%;cursor:pointer;}   
.photo_list ul li p{position:absolute;left:0;bottom:0;width:100%;height:36px;line-height:36px;font-size:13px;text-align:center;color:#fff;background:url(../img/bg_black.png) repeat;z-index:1000;}
.photo_list img{float:left;height:190px;cursor:pointer;}   
/* 마우스 오버시 효과 */
.photo_list ul li:hover img{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s}
/*  마우스 아웃시 효과 */
.photo_list ul li img{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s}





/*=================================== 객실안내 ===================================*/
/* 객실 100% 이미지 슬라이더 */
#room_slide{position:relative;float:left;width:100%;}
#room_slide ul{float:left;width:100%;}
#room_slide ul li{float:left;width:100%;margin-bottom:2%;}


/* 객실요금표 */
.room_tbl{position:relative;float:left;width:50%;}
.room_tbl table{float:left;width:100%;background:#fff;}
.room_tbl table th{font-size:13px;color:#333;background:#f4f4f4;}
.room_tbl table td{font-size:12px;color:#555;}
.room_tbl table th,.room_tbl table td{border:1px solid #ccc;padding:8px 5px;text-align:center;}






/* 부대시설 */
.fac_list{position:relative;float:left;width:100%;}
.fac_list ul{float:left;width:100%;}
.fac_list ul li{float:left;width:99.8%;border:1px solid #e0e0e0;}
.fac_list ul li img{float:left;width:100.3%;margin:-1px 0 0 -1px;}
.fac_list .fac_text{float:left;width:92%;padding:15px 4%;background:#fff;}
.fac_list .fac_text b{float:left;width:100%;line-height:100%;font-size:16px;font-weight:400;color:#000;margin-bottom:2%;}
.fac_list .fac_text p{float:left;width:100%;line-height:16px;font-size:12px;color:#666;}


/* 주변볼거리 */
.tour_list{position:relative;float:left;width:100%;padding-bottom:4%;margin-bottom:4%;border-bottom:1px dashed #ccc;}
.tour_title{position:relative;float:left;width:100%;line-height:26px;font-size:16px;font-weight:400;color:#000;margin-bottom:3%;}
.tour_list img{float:left;width:100%;}
.tour_text{float:left;width:100%;line-height:16px;font-size:12px;color:#898989;text-align:justify;margin-top:4%;}
a.tour_more{position:absolute;right:0;top:0;height:22px;line-height:22px;padding:0 10px;font-size:11px;color:#fff;background:#777;}


/* 예약관련 */
.res_tbl{position:relative;float:left;width:100%;margin-bottom:20px;}
.res_tbl table{position:relative;float:left;width:100%;background:#fff;border-top:3px solid #e0e0e0;}
.res_tbl table th{font-weight:400;color:#000;background:#f9f9f9;}
.res_tbl table td{color:#888;}
.res_tbl table td b{float:left;width:100%;color:#000;font-weight:600;}
.res_tbl table th,.res_tbl table td{font-size:12px;line-height:16px;padding:1%;text-align:center;border:1px solid #e0e0e0;}
.res_tbl table td.res_line{border-bottom:1px solid #999}
.res_tbl table th.res_line2{border-bottom:3px solid #e0e0e0}
.text_box{position:relative;float:left;width:100%;}








/* 이미지크기 제멋대로일때 조정해주는 style */
@media screen and (min-width:0) and (max-width:420px) {
#mslider100{height:180px !important;}
}

@media screen and (min-width:421px) and (max-width:767px) {
#mslider100{height:300px !important;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
#mslider100{background:gold;height:380px !important;}
}

@media screen and (min-width:1024px) and (max-width:1920px) {
#mslider100{height:500px !important;}
}