@import "compass/css3";
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@charset "utf-8";
/* CSS Document */
@import "reset.css";
html,body{height:100%}
body { margin:0; padding:0;  font-family :'Nanum Square', sans-serif "Nanum Gothic", sans-serif; 'Noto Sans KR', 'Noto Sans KR' }

#header{position: relative; width:100%; height:auto;}
#footer{position: relative; width:100%; height:100px; background-color: #eeeeee;}
#wrap  {position: relative; width:100%; height:auto;}

#wrap_start {position: relative; box-sizing: border-box; width:100%; padding-bottom: 0px; top:0;  overflow: hidden;; min-width: 980px; margin-top:-120px; }  
#content {position: relative; box-sizing: border-box; width:100%; padding-bottom: 0px; height: auto; min-width: 980px;}
#content #main_content {position: relative; top:0; left:0; box-sizing: border-box; min-width: 980px;}        
#content #main_content .visual_img {position: relative; box-sizing: border-box; width: 100%; height : 400px; overflow: hidden; z-index: -9999;  min-width: 1240px;}
#content #main_content .visual_img img {position : relative; width:100%; height : 400px; overflow: hidden; opacity: .78; }
    
.visual_all{position: absolute; box-sizing: border-box; overflow: hidden; top:0; left:0; z-index: 1000; height: auto;width: 700px;left: 50%;transform: translateX(-50%); margin-top: 200px; text-align: center;}
.visual_text p {font-size: 20px; color: #fff; font-family: 'Sunflower', sans-serif;}
.visual_text span {font-size: 45px;color: #fff; padding: 15px 100px 20px 100px; border: 4px solid #fff;font-family: 'Sunflower', sans-serif; font-weight: bold}
.about {margin-top: 50px;  width: 180px; text-align: center; height: auto; font-size: 20px; z-index: 1000;}
.about p {color: #fff; vertical-align: middle; padding: 10px 20px;border: 3px solid #fff; border-radius: 100px; font-size: 18px; }
.about p:hover{background-color: #fff;border-radius: 100px; color: #000;}

/****************************************************************************회사소개**************************************************************************/

.about_text { position: relative;width: 980px; padding: 20px 0; margin: auto;font-size: 20px; color: #000; font-weight: 900; border-bottom: 1px solid #ddd; text-align: center;}
.about_png {position: relative; margin: auto; overflow: auto; box-sizing: border-box; width: 980px; padding: 80px 0 10px 0;}
.about_png img {}
.content_area {position: relative; overflow: auto; box-sizing: border-box; width: 800px; margin: auto; left:20%; transform: translateX(-20%); font-family: 'Sunflower', sans-serif;}
.content_area p {line-height: 25px; font-size: 1.1em; color: #000;margin: 80px 0 100px 0;}
.content_area p span{font-size: 4em;  line-height: 40px; font-weight: 100;color: #000;}
.map  {position: relative; overflow: auto; box-sizing: border-box; width: 100%;; margin: auto; min-width: 980px; margin: 30px 0 0px 0; top: 0; }
.daum_map {height: 400px;  margin: auto; margin-bottom: 10px;}
.map p{width: 900px; margin: auto; padding:10px 10px;border: 1px solid #0f69a5; font-size: 15px; color: #000; cursor: pointer; text-align: center;}
.map p:hover {width: 900px; margin: auto; padding:10px 10px;background-color: #0f69a5; font-size: 15px; color: #fff; }


/****************************************************************************객실소개**************************************************************************/


.step03  {position: relative;  box-sizing: border-box; width:980px; min-width:980px; margin: auto }
.step03 .bg_gallery {width:980px; overflow: auto; position: absolute; top:0; left: 0; z-index: -0;}
.step03 .bg_gallery img {width: 100%;}
.step03 .slid {position: relative;width: 910px;  overflow: auto;margin: auto; box-sizing: border-box;}
.step03 .slid_main {margin-top: 50px;width: 900px;padding: 3px 3px; }
.step03 .slid_main img {width: 100%; height: 600px; }
.step03 .thumbnail .slid_list {}
.step03 .thumbnail .list_img {width: 160px; height: 110px; float: left; margin: 6px 6px;padding: 5px 5px; cursor: pointer; border:0; }
.step03 .thumbnail img {width: 100%; height: 100%; overflow: hidden;}
.prev {position: absolute; top:0; left: 0; width: 50px;margin-top: 500px;padding-left: 3px; }
.prev img {width: 100%; height: auto! important;;}
.next {position: absolute; top:0; right: 0; width: 50px; margin-top: 500px;padding-right: 7px;}
.next img{width: 100%; height: auto! important;;}
.nav {position: relative;z-index: 999; color: #000; width: 890px;text-align: center; margin: auto; overflow: auto;margin-top: 50px; }
.nav .nav_list a{float: left;width: 100%; text-align: center; margin: auto;overflow: auto; color: #000; }
.nav .no a {float: left;width: 30%; padding: 9px; margin: 1px 1px; border: 1px solid #000; box-sizing: border-box; cursor: pointer; color: #000; font-family: 'Sunflower', sans-serif;}
.nav .a_active a {float: left;width: 30%; padding: 9px; margin: 1px 1px; border: 1px solid #000; box-sizing: border-box; cursor: pointer; color: #fff; background-color: #000; font-family: 'Sunflower', sans-serif;}
.about_text_01 {text-align: center;margin-top: 50px;font-size: 20px;color: #aaa; font-family: 'Sunflower', sans-serif;}






/****************************************************************************이용안내**************************************************************************/
.tg  {border-collapse:collapse;border-spacing:0; border-bottom: 1px solid #000;}
.tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;border: }
.tg th{font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px; background: #eee; font-weight: bold;}
.tg .tg-s6z2{text-align:center}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-s6z5{margin-top: 100px; text-align:center}
.about_text_02 {text-align:left;margin-top: 50px;font-size: 15px;color: #000;line-height: 30px;}
.about_text_02 span{font-size: 25px; font-weight: bold; color: black;}
.about_text_02 .cencle {color: #aaa;}


.about_img img {
	opacity: .78;
}

.nav_2 {position: relative;z-index: 999; color: #000;width: 500px;text-align: center; margin: auto; overflow: auto;margin-top: 50px; }
.nav_2 .nav_list_2 {float: left;width: 100%; text-align: center; margin: auto; }
.nav_2 .nav_list_2 .no a{float: left;width: 49.5%; padding: 9px; margin: 1px 1px; border: 1px solid #000; box-sizing: border-box; cursor: pointer; color: #000;}
.nav_2 .nav_list_2 .no a:hover{background-color: #000; color: #fff;}
.nav_2 .no a:link {color: #000;}
.nav_2 .no a:visited {background-color: #000; color: #000;}
.nav_2 .no a:active {background-color: #000; color: #fff;}
.nav_2 .no a:hover{background-color: #000; color: #fff;}

.nav_2 .nav_list_2 .a_active a{float: left;width: 49.5%; padding: 9px; margin: 1px 1px; border: 1px solid #000; box-sizing: border-box; cursor: pointer; background-color: #000; color: #fff;}



/****************************************************************************관광지**************************************************************************/


.step04 {position: relative;  box-sizing: border-box;  width: 980px;margin:0 auto; margin-top: 100px;}
.instar_img {width: 100%; margin-top: 80px; margin-top: 100px;}
.instar_img ul {overflow: auto;}
.in_list_text {position: absolute; top: 0; left: 0;font-size: 40px; width: 300px; height: 200px; text-align: center;padding-top: 100px;opacity: 1;overflow: auto; z-index: 9999}
.in_list_text:hover {opacity: 0; width: 300px; height: 200px;}
.instar_img .in_list { float: left;width: 300px; height: 300px;overflow: hidden; padding:0; margin-top: 0px;}


.in_list_{position: relative; width: 31%; float: left;overflow: hidden;  margin: 10px; height:200px; }
.in_list_ img{width: 31%; height: auto; overflow: hidden;}
.in_list_ .image {display: block;width: 100%;height: auto;}
.in_list_ .overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease;background-color: #000;}
.in_list_:hover .overlay {opacity: .9;}
.in_list_ .text {color: white;font-size: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}


.nav_3 {position: relative;z-index: 999; color: #000;width: 350px;text-align: center; margin: auto; overflow: auto;margin-top: 50px; }
.nav_3 .nav_list {float: left;width: 100%; text-align: center; margin: auto; }
.nav_3 .no {float: left;width: 10%; padding: 9px; margin: 1px 1px; border: 1px solid #000; box-sizing: border-box; cursor: pointer; color: #000;}
.nav_3 .no:hover{background-color: #000; color: #fff;}

.nav_3 .no a:hover{background-color: #000; color: #fff;}
.nav_3 .no a:link {color: #000;}
.nav_3 .no a:visited {background-color: #000; color: #fff;}
.nav_3 .no a:active {background-color: #000; color: #fff;}





/****************************************************************************한옥스토리**************************************************************************/
.visual_story {position: absolute; box-sizing: border-box; overflow: hidden; top:0; left:0; z-index: 1000; height: auto;width: 700px;left: 50%;transform: translateX(-50%); margin-top: 200px; text-align: left;}
.visual_story .visual_text p {font-size: 2em; color: #fff; font-family: 'Sunflower', sans-serif; font-weight: bold;}
.visual_story .visual_text_02 p {font-size: 1.5em; color: #aaa; font-family: 'Sunflower', sans-serif; font-weight: normal;margin-top: -50px;}
#content #main_content .visual_img_02 {position: relative; box-sizing: border-box; width: 100%; height : 1500px; overflow: hidden; z-index: -9999;  min-width: 1240px;}
#content #main_content .visual_img_02 img {position : relative; width:100%; height :1000px; overflow: hidden; opacity: .78;}

.content_area_02 {position: absolute; top:0; left: 0; overflow: auto; box-sizing: border-box; width: 980px; left: 50%;transform: translateX(-50%); margin-top: 250px; height: auto;}
.img_list {width: 100%;}



/****************************************************************************갤러리**************************************************************************/
.page_menu_3{position: relative; overflow: auto; box-sizing: border-box; width: 980px; margin: auto; margin-top: 30px; }
.page_menu_3 .contect a{float: left; width: 218px; height: 20px; text-align: center; padding: 10px 10px; margin: 0px 0px 0px 0; font-size: 15px;border-bottom: 1px solid #ddd; color:#0f69a5;background-color: #eee;; font-weight: 900; vertical-align: middle;}
.page_menu_3 .contect:hover{background-color: #0f69a5; color: #fff;}
.page_menu_3 .contect a:link {text-decoration: none; color: #0f69a5;;}
.page_menu_3 .contect a:visited {text-decoration: none; color:  #0f69a5;}
.page_menu_3 .contect a:active {text-decoration: none; color: #0f69a5;}
.page_menu_3 .contect a:hover {background-color: #0f69a5; color: #fff;}
.page_menu_3 .contect_2{float: left; width: 218px; height: 20px; text-align: center; padding: 10px 10px; margin: 0px 0px 0px 0; font-size: 15px;border-bottom: 1px solid #ddd; color:#0f69a5;; font-weight: 900; vertical-align: middle;background-color: #eee;}

.page_op {position: relative; overflow: auto; box-sizing: border-box; width: 980px; margin: auto;height: auto;}
.page_op .page_no {width: 435px;; height: auto; box-sizing: border-box;overflow: auto; margin: auto;}
.page_op .op_01 {overflow: auto; margin: 0 0 30px 0;}
.page_op .number {float: left;padding: 5px 10px; margin: 0 2px 0 1px; border: 1px solid #aaa; font-size: 15px;  cursor: pointer; }
.page_op .number:hover{background-color: #eee;}

.text_op {width: 310px; margin: auto;}
.text_op .op_02 {overflow: auto; margin: 0 0 50px 0; display: none;}
.text_op .op_02 .admin_menu { float: left; padding: 5px 10px; font-size: 15px; border-left: 1px solid #aaa; cursor: pointer; }
.text_op .op_02 .save {border-right: 1px solid #aaa;}


.img_list  {position: relative; overflow: auto; box-sizing: border-box; width: 980px; margin: auto;height: auto;}
.img_list .block_img {position: relative; width: 470px;  margin-top: 30px;border-bottom: 1px solid #ddd; margin:80px 20px 50px 00px; float: left; }
.img_list .pro_pic_text {font-size: 30px; font-weight: 900; color: #000; padding: 10px 0 0 0;}
.img_list .pro_pic_subtext {font-size: 15px; color: #555;padding: 5px 0;} 
.img_list .pro_pic {width: 400px; height:280px; margin-bottom:50px; overflow: hidden;  float: left; margin-left: 0px; box-shadow: 5px 5px 2px #ccc;}
.img_list img {width: 100%; height: 100%; }




/***************************************************************************관리자로그인**************************************************************************/
.login_area {position: relative; overflow: auto; min-width: 980px; box-sizing: border-box; height: 500px; margin: 200px 0 100px;}
.login {width: 360px; margin: auto;}
.log_line {overflow: auto; width: 60px; border-top: 5px solid #0f69a5;margin: auto;}
.login p{text-align: center; color: #333; font-size: 25px; font-weight: ;margin-top: 10px;}
.login .id_text .input_text {width: 345px; overflow: hidden; height: 40px; color: #0f69a5; font-size: 18px; padding: 5px 5px; border: 1px solid #aaa;}
.login .pw_text .input_text {width: 345px; overflow: hidden; height: 40px; color: #0f69a5;  font-size: 18px; padding: 5px 5px; margin: 0 0 5px 0;border: 1px solid #aaa;}
.login .bt {width: 350px; overflow: hidden; text-align: center;padding: 15px 5px;background-color: #0f69a5; color: #fff; font-weight: 900; font-size: 18px;}