@charset "utf-8";
/* 웹폰트 */
@font-face { font-family: Arial; src: url(/font/arial.eot), url(/font/arial.woff);  } 
@font-face { font-family: hongik; src:  url(/font/Typo_Hongikingan_L_0.eot), url(/font/Typo_Hongikingan_L_0j.woff);  } 

@font-face { font-family: roboto; src: url(/font/roboto.eot), url(/font/roboto.woff);  } 
@font-face { font-family: nas; src: url(/font/NanumSquare.eot), url(/font/NanumSquare.woff);  } 
@font-face { font-family: daum; src: url(/font/Daum_Regular_0.eot), url(/font/Daum_Regular_0.woff);  } 

/* popup*/
#pop{position: fixed;  left:850px; top:100px; width:450px; height:auto; z-index:99; text-align:center; background-color:#fff; z-index: 999; }

/* place_holder */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #b9b4ae; font-size: 10px; 
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #b9b4ae; font-size: 10px; 
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #b9b4ae; font-size: 10px; 
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #b9b4ae; font-size: 10px; 
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #b9b4ae; font-size: 10px; 
}


/* 초기화 */
html { font-family: NanumBarunGothic, Dotum, Arial ; }
h1, h2, h3 ,h4 { font-weight: normal; }
 ul, li, h1, h2, h3, h4, p, address, small, section , hr, img,dl, dt, dd, figure, figcaption, article   { margin: 0; padding: 0; }
li { list-style: none;  }
img { border: none; }
a { text-decoration: none; color: #28324e; }
a:hover {  color: #e82d4c; }
.hidden { display: none; }

article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { 
     display:block;
 }


* { font-family: NanumBarunGothic; }

table { border-collapse: collapse;  }

@media screen and (min-width: 1210px) {
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

html, body {  height: 100%;   }
.header {  width: 300px; position: absolute; left: 0; height: 100%; display: block; background: #000;   }
.logo_img { width: 200px; display: block; margin: 0 auto; margin-top: 100px;  }
.navi_li > a { color: #fff; font-family: aparajita; font-size: 2em;  width: 100%; display: block; text-align: center;  }
.navi_li > a:hover { text-decoration: underline; }
.navi_ul { width: 100%; margin-top: 100px; }
.navi_li { width: 100%; }






/* footer */
.footer { width: 300px; height: 200px; position: absolute;  top: 650px;   }
.just_for_line { width: 70%; height: 2px; display: block; background: #fff; margin: 0 auto; margin-bottom:  20px;  }

.address { color: #fff; font-style: normal;  font-size: 12px; text-align: center; margin-bottom: 4px;   }
.phone1 { display: block; font-size: 12px; text-align: center; color: #fff; margin-bottom: 4px; }
.phone2 { display: block; font-size: 12px; text-align: center; color: #fff; margin-bottom: 4px; }

.ceo { color: #fff; font-size: 13px; text-align: center;  }

.copy_box { cursor: pointer; font-size: 13px; border: 2px solid #fff; width: 140px; height: 35px; line-height: 35px; text-align: center; color: #fff; margin: 0 auto; margin-top: 20px;  }



.slide_navi {   height: 20px; position: absolute; bottom: 50px; text-align: center;   }

.sn_li { width: 10px;  height: 10px; border-radius: 100%; background: #fff;  float: left;  margin-right: 5px;  cursor: pointer; }

.sn_li_selected { background: orange; }


.slide_direction {  color: #fff;  }

.prev {position: absolute;  top: 40%; left: 400px; font-size: 46px;  color: #fff; float: left; display: block; width: 50px; height: 50px; }
.next {position: absolute;  top: 40%; right: 100px; font-size: 46px;  color: #fff; float: left; display: block; width: 50px; height: 50px; }




/* view_info */

.view_info_btn { position: fixed; bottom: 100px; width: 100px; height: 100px; display: block; text-align: center; line-height: 100px; color: #fff; border-radius: 100%; border: 2px solid #fff;  font-family: nanum; text-transform: uppercase; cursor: pointer; }

.view_info_box { position: absolute; width: 500px; height: 340px; background: rgba(255,255,255,0.8); margin: 0 auto; display: block; bottom: -400px;  padding-bottom: 20px; }


.vi_title { text-align: center; font-size: 36px; margin-top: 20px; } 
.vi_title_sub {text-align: center; margin-top: 0px; font-size: 14px; }
.vi_content1 { font-size: 14px; margin-top: 20px; width: 460px; margin-left: 20px; margin-top: 10px; }
.vi_content2 { font-size: 14px; width: 460px; margin-left: 20px; margin-top: 10px; }
.vi_content3 { font-size: 14px; width: 460px; margin-left: 20px;  margin-top: 10px; }
.vi_content4 {  font-size: 14px; width: 460px; margin-left: 20px; margin-top: 10px; }
.vi_btn { width: 300px; margin: 0 auto; margin-top: 20px; height: 30px; display: block;  }
.vi_btn_a {display: block; float: left;  width: 140px; height:35px; line-height: 35px;  display: block; text-align: center; border: 1px solid #000; margin-right: 10px;}
.vi_btn_b {display: block; float: left;  width: 140px; height:35px; line-height: 35px; display: block; text-align: center; border: 1px solid #000;}



/*서브네비*/
.sub_navi { position: fixed; background: rgba(255,255,255,0.8); width: 0px; height: 100%; left: 300px; top:0; display: block; z-index: 999;}
.sub_navi_ul { display: none;  margin-top: 260px;  z-index: 999;}
.sub_navi_ul > li > a { display: block; width: 200px; height: 40px; line-height: 40px; text-align: center;  }

.househill_ul { margin-top: 310px; }
.cafehill_ul { margin-top: 350px; }
.reservation_ul { margin-top: 400px; }
.community_ul { margin-top: 440px; }
.introduction_ul { margin-top: 480px; }
.location_ul { margin-top: 530px; }


/*sub sub*/
.sub_sub_navi { position: fixed; background: rgba(200,200,200,0.8); width: 0px; height: 100%; left: 500px; top:0; display: block; z-index: 999;}
.sub_sub_navi_ul { display: none;  margin-top: 260px;  }
.sub_sub_navi_ul > li > a { display: block; width: 200px; height: 40px; line-height: 40px; text-align: center;  }

.ssn_gl_b { margin-top: 300px;  }
.ssn_gl_c { margin-top: 340px;  }


/* 모바일일때 방 상세 네비*/
.mobile_ss_navi { display: none; }

}



@media screen and (min-width: 701px) and ( max-width: 1209px) { 
body { width: 100%; height: 100%; margin: 0; padding: 0;  }

html, body {  height: 100%;  }
.header {  width: 100%; position: fixed; left: 0; height: 70px; display: block; background: #000;  z-index: 99; }
.logo_img { width: 100px; display: block;  margin-top: 20px; margin-left: 3%; float: left;  }

.navi {  width: 50px; height: 50px; display: block; float: right; margin-top: 10px; margin-right: 3%; background: url("/images/menu.png") no-repeat center;  cursor: pointer;   }

.navi_ul { width: 100%; overflow: hidden; position: absolute; top: 70px; background: #000; left: 0;  border-top: 1px solid #fff; padding-top: 20px; border-bottom: 1px solid #ccc; display: none; padding-bottom: 40px;  }


.navi_li > a { color: #fff; font-family: aparajita; font-size: 1.5em;  width: 100%; display: block; text-align: center; height: 40px; line-height: 40px; }
.navi_li > a:hover { text-decoration: underline; }

.navi_li { width: 100%;   height: 40px; }



/* footer */
.footer { width: 100%; height: 90px;  background: #000; padding-top: 10px;  clear: both;  }
.just_for_line { width: 100%; height: 1px; display: none; background: #fff; margin: 0 auto; margin-bottom:  20px;  }

.address { color: #fff; font-style: normal;  font-size: 11px; text-align: center; margin-bottom: 4px; margin-top: 13px;    }
.phone1 { display: block; font-size: 11px; text-align: center; color: #fff; margin-bottom: 4px; }
.phone2 { display: block; font-size: 11px; text-align: center; color: #fff; margin-bottom: 4px; }

.ceo { color: #fff; font-size: 12px; text-align: center;  }

.copy_box { cursor: pointer; font-size: 13px; border: 2px solid #fff; width: 140px; height: 35px; line-height: 35px; text-align: center; color: #fff; margin: 0 auto; margin-top: 20px;  }



.slide_navi {   height: 20px; position: absolute; bottom: 20px; text-align: center;  display: none; }

.sn_li { width: 10px;  height: 10px; border-radius: 100%; background: #fff;  float: left;  margin-right: 5px;  cursor: pointer; }

.sn_li_selected { background: orange; }



/*서브네비*/
.sub_navi { position: fixed; background: rgba(80,80,80,0.8); width: 100%;  left: 0; top: 300px; display: none; z-index: 999;}
.sub_navi_ul { display: none;  width: 100%;   z-index: 999;}
.sub_navi_ul > li > a { display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; color: #fff;  }

.sub_navi_ul > li > a:hover { color: red;  }





.main_section {  display: block; overflow: hidden;  }


.sub_sub_navi { display: none;  }

.mobile_ss_navi { }




.view_info_btn { position: fixed; bottom: 100px; width: 100px; height: 100px; text-align: center; line-height: 100px; color: #fff; border-radius: 100%; border: 2px solid #fff;  font-family: nanum; text-transform: uppercase; cursor: pointer; display: none; }

.view_info_box { width: 96%; height: 340px; margin: 0 auto; display: block;   padding-bottom: 20px; }


.vi_title { text-align: center; font-size: 22px; margin-top: 20px; } 
.vi_title_sub {text-align: center; margin-top: 10px; font-size: 14px; }
.vi_content1 { font-size: 14px; margin-top: 20px; width: 94%; margin-left: 20px; margin-top: 10px; }
.vi_content2 { font-size: 14px; width: 94%;margin-left: 20px; margin-top: 10px; }
.vi_content3 { font-size: 14px; width: 94%; margin-left: 20px;  margin-top: 10px; }
.vi_content4 {  font-size: 14px; width: 94%; margin-left: 20px; margin-top: 10px; }
.vi_btn { width: 300px; margin: 0 auto; margin-top: 20px; height: 30px; display: block;  }
.vi_btn_a {display: block; float: left;  width: 140px; height:35px; line-height: 35px;  display: block; text-align: center; border: 1px solid #000; margin-right: 10px; font-size: 14px; }
.vi_btn_b {display: block; float: left;  width: 140px; height:35px; line-height: 35px; display: block; text-align: center; border: 1px solid #000;  font-size: 14px; }




}


@media screen and (max-width: 700px) {  
body { width: 100%; height: 100%; margin: 0; padding: 0;  }

html, body {  height: 100%;  }
.header {  width: 100%; position: fixed; left: 0; height: 70px; display: block; background: #000;  z-index: 99; }
.logo_img { width: 100px; display: block;  margin-top: 20px; margin-left: 3%; float: left;  }

.navi {  width: 50px; height: 50px; display: block; float: right; margin-top: 10px; margin-right: 3%; background: url("/images/menu.png") no-repeat center;  cursor: pointer;   }

.navi_ul { width: 100%; overflow: hidden; position: absolute; top: 70px; background: #000; left: 0;  border-top: 1px solid #fff; padding-top: 20px; border-bottom: 1px solid #ccc; display: none; padding-bottom: 40px;  }


.navi_li > a { color: #fff; font-family: aparajita; font-size: 1.5em;  width: 100%; display: block; text-align: center; height: 40px; line-height: 40px; }
.navi_li > a:hover { text-decoration: underline; }

.navi_li { width: 100%;   height: 40px; }



/* footer */
.footer { width: 100%; height: 90px;  background: #000; padding-top: 10px;  clear: both;  }
.just_for_line { width: 100%; height: 1px; display: none; background: #fff; margin: 0 auto; margin-bottom:  20px;  }

.address { color: #fff; font-style: normal;  font-size: 11px; text-align: center; margin-bottom: 4px; margin-top: 13px;    }
.phone1 { display: block; font-size: 11px; text-align: center; color: #fff; margin-bottom: 4px; }
.phone2 { display: block; font-size: 11px; text-align: center; color: #fff; margin-bottom: 4px; }

.ceo { color: #fff; font-size: 12px; text-align: center;  }

.copy_box { cursor: pointer; font-size: 13px; border: 2px solid #fff; width: 140px; height: 35px; line-height: 35px; text-align: center; color: #fff; margin: 0 auto; margin-top: 20px;  }



.slide_navi {   height: 20px; position: absolute; bottom: 20px; text-align: center;  display: none; }

.sn_li { width: 10px;  height: 10px; border-radius: 100%; background: #fff;  float: left;  margin-right: 5px;  cursor: pointer; }

.sn_li_selected { background: orange; }




/*서브네비*/
.sub_navi { position: fixed; background: rgba(80,80,80,0.8); width: 100%;  left: 0; top: 300px; display: none; z-index: 999;}
.sub_navi_ul { display: none;  width: 100%;   z-index: 999;}
.sub_navi_ul > li > a { display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; color: #fff;  }

.sub_navi_ul > li > a:hover { color: red;  }





.main_section {  display: block; overflow: hidden;  }


.sub_sub_navi { display: none;  }

.mobile_ss_navi { }




.view_info_btn { position: fixed; bottom: 100px; width: 100px; height: 100px; text-align: center; line-height: 100px; color: #fff; border-radius: 100%; border: 2px solid #fff;  font-family: nanum; text-transform: uppercase; cursor: pointer; display: none; }

.view_info_box { width: 96%; height: 340px; margin: 0 auto; display: block;   padding-bottom: 20px; }


.vi_title { text-align: center; font-size: 22px; margin-top: 20px; } 
.vi_title_sub {text-align: center; margin-top: 10px; font-size: 14px; }
.vi_content1 { font-size: 14px; margin-top: 20px; width: 94%; margin-left: 20px; margin-top: 10px; }
.vi_content2 { font-size: 14px; width: 94%;margin-left: 20px; margin-top: 10px; }
.vi_content3 { font-size: 14px; width: 94%; margin-left: 20px;  margin-top: 10px; }
.vi_content4 {  font-size: 14px; width: 94%; margin-left: 20px; margin-top: 10px; }
.vi_btn { width: 300px; margin: 0 auto; margin-top: 20px; height: 30px; display: block;  }
.vi_btn_a {display: block; float: left;  width: 140px; height:35px; line-height: 35px;  display: block; text-align: center; border: 1px solid #000; margin-right: 10px; font-size: 14px; }
.vi_btn_b {display: block; float: left;  width: 140px; height:35px; line-height: 35px; display: block; text-align: center; border: 1px solid #000;  font-size: 14px; }





}