@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700);

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

html{width:100%;height:100%;overflow-y:auto;visibility:visible; -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: "nanumsquare","NanumBarunGothic", "dotum", serif !important; }
*+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{position:relative; visibility:visible; width:100%; font-family:"Raleway","Arial",sans-serif; font-size:1.05em; line-height:1.85em ;color:#000; word-wrap: break-word; }
img,fieldset{border:none;}
em,address{font-style:normal;}
a{text-decoration:none;color:#000;}
li{list-style:none;}
select,textarea{border-radius:0;}

.blind{visibility:hidden;width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
.clear {zoom:1;}
.clear:after {content:"";display:block;clear:both;}
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; }
.tl { text-align:left;}
.tc { text-align:center;}
.tr { text-align:right;}
.vt { vertical-align:top;}
.img_100 { width:100%; vertical-align:top;}


/*- 여기서부터 작업시작했음-*/
#header { position:absolute; width:100%; height: 100px; background: url(../images/header_bg.png) left top repeat-x;  z-index: 100;}
#header h1 { position:absolute; left: 0; top:0; display: none;}
#header .menu { position:relative; width:100%; max-width:900px; margin: 0 auto;}
#header .menu > li { float: left; width: 14.28%;}
#header .menu > li a { display:block; text-align:center;font-family: 'Josefin Sans', sans-serif; color: #fff; font-size: 18px; line-height: 49px;}
#header .menu > li a:hover, #header .menu > li a:focus { background: #fff; color: #000;}
#header .menu li ul { position:absolute; top:49px; margin-left: -50px; display: none; width:150%;}
#header .menu li:hover ul, #header .menu li:focus ul { display: block;}
#header .menu ul li { float: left; margin-right: 0px; text-align:center;}
#header .menu ul a { color: #fff; font-size:13px; font-weight:700; line-height:26px; padding:0 10px; }
#header .btn_reser { position: absolute; width:14%; max-width: 168px; right: 5px; top: 5px;}
@media  (max-width: 700px){
 #header { position:absolute; width:100%; height: 20px; background: url(../images/header_bg.png) left top repeat-x;  z-index: 100;}
#header h1 { position:absolute; left: 0; top:0; display: none;}
#header .menu { position:relative; width:80%; max-width:700px; margin: 0 auto;}
#header .menu > li { float: left; width: 14.28%;}
#header .menu > li a { display:block; text-align:center;font-family: 'Josefin Sans', sans-serif; color: #fff; font-size: 7px; line-height: 20px;}
#header .menu > li a:hover, #header .menu > li a:focus { background: #fff; color: #000;}
#header .menu li ul { position:absolute; top:20px; margin-left: -30px;display: none; width:150%;}
#header .menu li:hover ul, #header .menu li:focus ul { display: block;}
#header .menu ul li { float: left; margin-right:-15px; text-align:center;}
#header .menu ul a { color: #fff; font-size:5px; font-weight:700; line-height:16px; padding:0 10px; }
#header .btn_reser { position: absolute; width:14%; max-width: 168px; right: 5px; top: 35px;}
}



#topArea { position: relative; z-index: 1;}
.topArea_text { position: absolute; width:31.5%;left:50%; top:30%; margin-left: -15.75%; text-align: center; z-index: 10; }
.topArea_text h1 img { width:35%; max-width: 206px;z-index: 10;}
.topArea_text h2 img { width:100%; max-width: 540px;  margin-top:10%; z-index: 10;}
.topArea_text h3 img { width:100%; max-width: 573px;  margin-top:25%; z-index: 10;}

/*갤러리 서브로고*/
#left_topArea { position: relative; z-index: 10;}
.left_topArea_text { position: absolute; width:31.5%;left:2%; top:65%; z-index: 10; }
.left_topArea_text h1 img { width:35%; max-width: 206px; z-index: 10;}
.left_topArea_text h2 img { width:100%; max-width: 470px; z-index: 10;}

/*약도 서브로고*/
#map_topArea { position: relative; z-index: 1;}
.map_topArea_text { position: absolute; width:31.5%;left:50%; top:11.5%; margin-left: -15.75%; text-align: center;  }
.map_topArea_text h1 img { width:35%; max-width: 206px;}
.map_topArea_text h3 img { width:100%; max-width: 573px;  margin-top:25%;}

/*메인*/
#mainCon { background: url(../images/bg1.jpg); }
#mainCon:after {content:"";display:block;clear: both;}
.mainCon_01, .mainCon_02, .mainCon_03 {float:left; display:inline-block; width:33.33%; }
.main_sea{margin:0; padding:0; vertical-align:top; line-height:0;
 background-repeat: repeat; background-image: url("../images/bg1.jpg");}


/*메인인스타그램*/
.instagram{ position:relative; left:9%; margin-top:29%; font-size:13px; }
.instagram img{ width:80%; max-width: 404px; }
@media  (max-width: 700px){
 .instagram{ position:relative; left:9%; margin-top:29%; font-size:4px; }
}

/*카피*/
#footer { position: relative; border-top:1px solid #ddd; padding:50px; }
#footer .tel{ font-size:18px; font-weight: 700; margin-bottom: 10px; }
#footer .ad{ font-size:13px; line-height: 18px; font-weight: 700;}
.link_copy { position: absolute; right: 40px; top:70px;}
.link_copy li { float:left; display:inline; margin-left:5px; }
@media  (max-width: 700px){
#footer { position: relative; border-top:1px solid #ddd; padding:10px; }
#footer .tel{ font-size:9px; font-weight: 700; margin-bottom: 10px; }
#footer .ad{ font-size:7px; line-height: 11px; font-weight: 700;}
.link_copy { position: absolute; right: 40px; top:70px;}
.link_copy li { float:left; display:inline; margin-left:5px; }
}



/*서브메뉴*/
.smenu1{border-bottom:1px solid #ddd; padding:15px; text-align: center;}
.smenu1 li{display: inline;  font-size:15px; margin:0 15px; font-weight: 700;}
.smenu1 li a:hover, #smenu1 li a:focus {color: #459324;}
@media  (max-width: 700px){
    .smenu1 li{font-size:10px; margin:0 4px; font-weight: 700;}
}

/*인사말*/
#subCon1 .subCon_01{ position: relative; }
.subCon_01{ margin: 0 auto; text-align: center; padding-top: 30px; font-size:14px; line-height: 18px;}
.subCon_01_text {margin: 0 auto; position: relative;text-align: center; width:25.6%;
    max-width: 485px; z-index: 3;  padding-top:7%;}
.subCon_01_text img{width:100%}
.subCon_01_img {margin:-9% 0 0 0; position: relative; z-index: 1;}
#subCon1 .subCon_02{ position: relative;}
.subCon_02 { margin: 0 auto; text-align: center; padding-top: 10%;}
.subCon_02 .text1_1{font-size:25px; padding-bottom:2%;}
.subCon_02 .text1_2{font-size:14px; padding-bottom:2%; line-height: 20px;}
.subCon_02 .text1_3{font-size:14px; padding-bottom:10%; line-height: 20px;}
#subCon1 .subCon_03{ position: relative;}
.subCon_03 {margin: 0 auto; text-align: center; padding-top:13%;}
.subCon_03 p { font-size:14px; padding-bottom:15%; line-height: 20px;}
@media  (max-width: 700px){
 .subCon_02 .text1_1{font-size:14px; padding-bottom:2%;}
 .subCon_02 .text1_2{font-size:8px; padding-bottom:2%; line-height: 15px;}
 .subCon_02 .text1_3{font-size:8px; padding-bottom:10%; line-height: 15px;}
#subCon1 .subCon_03{ position: relative;}
 .subCon_03 p { font-size:8px; padding-bottom:15%; line-height: 15px;}
}


/*객실미리보기*/
.room_pre:after {content:"";display:block;clear: both;}
.room_map_text{margin:3% auto; width:300px;}
.room_pre li{ float:left; display:inline-block; width:14.28%;}
.room_pre li:hover, .room_pre li:focus{background:#edecec;}

.room_map_bg{position: relative;}
.room_map_bg .room_point1{position:absolute; left:23.5%; bottom:45%; width:4%; z-index:5;}
.room_map_bg .room_point2{position:absolute; left:31.7%; bottom:45%; width:4%; z-index:5;}
.room_map_bg .room_point3{position:absolute; left:44%; bottom:50%; width:4%; z-index:5;}
.room_map_bg .room_point4{position:absolute; left:52.8%; bottom:65%; width:4%; z-index:5;}
.room_map_bg .room_point5{position:absolute; left:61%; bottom:65%; width:4%; z-index:5;}
.room_map_bg .room_point6{position:absolute; left:68.5%; bottom:65%; width:4%; z-index:5;}
.room_map_bg .room_point7{position:absolute; left:74.4%; bottom:65%; width:4%; z-index:5;}
.room_map_bg .room_point1:hover, .room_map_bg .room_point1:focus { background: none;}
.room_map_bg .room_point2:hover, .room_map_bg .room_point2:focus { background: none;}
.room_map_bg .room_point3:hover, .room_map_bg .room_point3:focus { background: none;}
.room_map_bg .room_point4:hover, .room_map_bg .room_point4:focus { background: none;}
.room_map_bg .room_point5:hover, .room_map_bg .room_point5:focus { background: none;}
.room_map_bg .room_point6:hover, .room_map_bg .room_point6:focus { background: none;}
.room_map_bg .room_point7:hover, .room_map_bg .room_point7:focus { background: none;}

/*rooms*/
#sub2:after {content:"";display:block;clear: both;}
#sub2{position:relative;}
.sub2_1_1{margin:0 0; width:42%; max-width:807px;}
.sub2_1_1 img{width:100%}
.sub2_1_2{position:absolute; width:48%; text-align:right;  right:10%; top:15%; }
.sub2_1_2 p{ padding-top:5%; font-size:14px; line-height: 20px;}
@media  (max-width: 1300px){
 .sub2_1_2 p{  padding-top:0%; font-size:12px; line-height: 18px;}
 .sub2_1_2 h2{ font-size:18px; }
}
@media  (max-width: 700px){
 .sub2_1_2 p{  padding-top:5%; font-size:8px; line-height: 12px;}
 .sub2_1_2 h2{ font-size:10px; }
}
.text_iframe{position:absolute;padding-top:3%;width:100%;height:100%;background-color:yellow;}
.text2_2{padding-top:3%;width:100%;}
.sub2_1_3 { text-align: right; margin-right: 10%;}
.sub2_1_3 img{ width:11.4%;  max-width:218px; }

.room_img{margin:0 auto; width:80.2%; max-width:1540px; padding-top:5%;}
.room_img img{width:100%}
.out_text{margin:3% auto; width:18%; max-width:300px;}
.out_text img{width:100%;}


/*특별함 버튼 인클루드*/
.special_bt{margin:0; margin-bottom:100px; padding:0; vertical-align:top; line-height:0; }
.special_bt li a { display: block; background: #fff;}
.special_bt li a:hover, .special_bt li a:focus { background: #feea11;}
.special_bt li img {width:100%; vertical-align:top;}

/*특별함*/
#sub3:after {content:"";display:block;clear: both;}
.sub3_1_1, .sub3_1_2{float:left; width:33.33%; }
.sub3_1_1{ margin-top:33.3%;}
.sub3_1_2{position: relative; padding:33.33% 0 0 0; }
.text3{ position: absolute;  width:100%; height:28.6%; top:0%;  
background-image: url("../images/bg1.jpg"); background-repeat: repeat;}
.text3 h2{ padding-top:100px; text-align: center; }
.text3_1{ font-size:22px; padding-top: 80px; text-align: center;}
.text3_2{ font-size:14px; line-height: 24px; text-align: center;}
@media  (max-width: 1300px){
 .text3 h2{ padding-top:70px; text-align: center; }
 .text3_1 { font-size:16px; padding-top: 40px; text-align: center; }
 .text3_2 { font-size:12px; line-height: 20px; text-align: center;}
}
@media  (max-width: 700px){
 .text3 h2{ font-size:11px; padding-top:10px; text-align: center; }
 .text3_1 { font-size:6px; padding-top:5%; text-align: center; }
 .text3_2 { font-size:4px; padding-top:1%; line-height: 6px; text-align: center;}
}

/*여행지*/
.sub40_img{margin-bottom: 10%;}
.subCon4{ position:relative;width:60.8%; max-width:1168px;  margin:0 auto;}
.sub41_img{ }
.sub41_img img {width: 100%; vertical-align: top;}
.sub42_img{margin-top: 12%;}
.text4{ position:absolute;  left: 70%; top:0; z-index:5;}
.text4_1 h2{ padding-bottom:7%;}
.text4_1 { width:180%; font-size:14px; line-height: 20px; padding-top:10%;}
@media  (max-width: 700px){
 .text4_1 { width:180%; font-size:4px; line-height: 8px; padding-top:5%;}
}



/*- (미디어쿼리) 텍스트 크기 줄이기 -
정상적으로 코딩하고 나서 미디어쿼리로 축소사이즈 추가하면됨

@media  (max-width: 1520px){
 .text5_2 li { font-size:12px; line-height:17px;}
}

*/

/*예약*/
.sub5_1{position: relative;}
.sub5_1 img{ margin:2.5% 13.5%; width:22.7%; max-width:436px; }
.staywith{position:absolute; width:50%; left: 40%; top:10%; }
.text5_1{position:absolute;  left: 40%; top:325px; z-index:6;}
.text5_1 li { font-size:15px; line-height:26px; color:8b8b8b; font-weight: 700; }

@media  (max-width: 1520px){
  .text5_1 li { font-size:13px;color:8b8b8b; line-height:20px; }
}
@media  (max-width: 700px){
  .text5_1{position:absolute;  left: 40%; top:20%; z-index:6;}
  .text5_1 li { font-size:4px;color:8b8b8b; line-height:8px; }
}

.sub5_2{position: relative; overflow:auto; }
.sub5_2 img {padding-top: 3%;}
.text5_2{position:absolute;  left:55%; top:20%; }
.text5_3{position:absolute; text-align: right; right:55%; top:70%; }
.text5_2, .text5_3{font-size:15px; line-height:22px; color:#fff; font-weight: 700;}
.T-big{font-size:18px; line-height:26px; text-decoration: underline; color:#fff; font-weight: 700;}
@media  (max-width: 1520px){
  .text5_2 li{ font-size:13px; line-height:17px; }
  .text5_3 li{ font-size:13px; line-height:17px; }
}
@media  (max-width: 700px){
  .text5_2{position:absolute;  left:55%; top:15%; }
  .text5_2 h2 { font-size:4px;} 
  .text5_2 li{ font-size:9px; line-height:13px; color:#000; }
  .text5_3{position:absolute; text-align: right; right:55%; top:65%; }
  .text5_3 h2 { font-size:4px;}
  .text5_3 li{ font-size:9px; line-height:13px; }
}
.staywith2{ padding-top:30px; text-align: center;}
@media  (max-width: 600px){
  .staywith2{ padding-top:30px; text-align: center; width:100%}
}


/*약도*/
#subCon6{padding-top:2%;}
.subCon_06{ margin-left:58%;}
.subCon_06 h2 { padding-bottom:5%; }
.subCon_06 p { font-size:14px; padding-bottom:20%; line-height: 20px;}
.map_iframe{ width:50%; height:100%;  margin-left:5%;}
@media  (max-width: 1300px){
  .subCon_06 p{ font-size:12px; line-height:16px; }
}
@media  (max-width: 700px){
  .subCon_06{ margin-left:5%;}
    .subCon_06 h2 { font-size:12px; padding-bottom:5%; }
    .subCon_06 p { font-size:8px; padding-bottom:20%; line-height:14px;}
    .map_iframe{ width:95%; height:100%; margin:5%; }
}


/*커뮤니티*/
.subCon_07{ margin-top: 700px;}
#subCon7 .subCon_07_1{ position: relative; width:900px;}
.subCon_07_1{ margin: 0 auto; text-align: center; padding-top: 30px; font-size:14px; line-height: 18px;}
@media  (max-width: 600px){
 #subCon7 .subCon_07_1{ position: relative; width:100%;}
}


/*갤러리버튼*/

   /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('../images/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 44px;
            height: 46px;
            cursor: pointer;
            background: url('../images/a12.png') no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }