@charset "utf-8";

/* reset */
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;color: #333;}
html,body{width: 100%;height: 100%; font-family: 'Nanum Gothic', sans-serif; background: #fff;}
input{outline: none;}
input:-ms-input-placeholder{color: #a8a8a8;}
input:-webkit-input-placeholder{color: #a8a8a8;}
input:-moz-input-placeholder{color: #a8a8a8;}
table{border-spacing:0px;border-style:none;padding:0px;}
td{border-spacing:0px;border-style:none;padding:0px;}
button{outline: none;border: none; cursor: pointer;}
select{outline: none;background: #fff; }
textarea{border:1px solid #999; outline: none;font-family: 'Nanum Gothic', sans-serif;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
::-webkit-scrollbar { width: 4px; /*스크롤바의 너비*/ } 
::-webkit-scrollbar-thumb { background-color: #ccc; /*스크롤바의 색상*/ } 
::-webkit-scrollbar-track { background-color: #f1f1f1; /*스크롤바 트랙 색상*/ }


/* layout */
#skip-navigation ul li{font-size:0;line-height:0}
#skip-navigation ul li a{display:block;width:100%;padding: 12px 0;color:#fff;position:absolute;left:0;top:-100px;text-align:center;z-index:1002;background:#2b70c4;border:0 none;}
#skip-navigation ul li a:active, #skip-navigation ul li a:focus{top:0;font-size:14px;line-height:1.5;text-decoration:underline;}
/**

/* 코딩 시작 ------------------------------------------ */
#wrap{width: 100%; margin: 0 auto;position: relative;overflow-x: hidden; }
#hd{width: 100%;height: 88px;position: fixed;left: 0;z-index: 999;border-top: 1px solid #fff;border-bottom: 1px solid #fff; top: 0px; background-color: rgba(0,0,0,0.8);}

/* 로고 */
#hd .logo{float: left;width: 10%; padding-left: 50px;margin-top: 26px;box-sizing: border-box;}

/* header 스크롤 내렸을때 CSS .active */
.hd1.active{background:rgba(0,0,0,0.8);top: 0!important; border: 0!important; }


/* 왼쪽 네비게이션 ------------------------------------------------------------*/
.menubt{float: left;width: 75%;transition:all 0.5s;}
.menubt > .menuBg{width: 50%;margin: 0 auto; overflow: hidden;}
.menubt > .menuBg > li{float: left;width: 25%; padding-top: 25px;box-sizing: border-box;}
.menubt > .menuBg > li > a{color: #fff; text-align: center; height: 52px;font-size: 22px; display: block;font-weight: bold; line-height: 40px;font-weight: bold;}
.menubt > .menuBg > li > a:hover{font-weight: bold;margin-top: -5px;background-image: url(/nhc/images/hv-cicle.png);background-repeat: no-repeat;background-size: 8px 8px;background-position: center 40px;}

.menubt > .menuBg > li:active .subBa{display: block;}
.menubt > .menuBg > li:focus .subBa{display: block;}
.menubt > .menuBg > li:focus-within .subBa{display: block;}



/* 서브 네이게이션 왼쪽 안내 문구 */
.infotxt{padding: 50px;position: absolute;width: 25%;height: 350px;box-sizing: border-box;}
.infotxt h2{font-size: 32px;color: #222;}
.infotxt p{font-size: 18px;color: #555;padding-top: 20px;}

/* 서브 네이게이션 오른쪽 안내 이미지1 */
.infoimg{padding: 50px;position: absolute; right:0; top:0; width: 30%;height: 350px;box-sizing: border-box;}
.infoimg p{width: 80%;margin: 0 auto;height: 230px;}
.infoimg p img{display: block;width: 100%;height: 100%;}
.depth1 .infoimg > a, .depth2 .infoimg > a{text-align: center;margin: 0 auto; padding-top: 10px; display: table; position: relative; }
.depth1 .infoimg > a::after, .depth2 .infoimg > a::after{content: ""; padding: 5px;background-position: center;
background: url(/nhc/images/right-arrow-i.png) no-repeat;background-size: contain; position: absolute;right: -20px; top:18px;}


/* 서브 네비게이션 */
.subBa{display: none; clear: both;z-index: 2000;position: absolute;top: 88px;left: 0;width: 100%;height: 400px;
border-bottom: 1px solid #ccc; background: #fff;transition: 0.8s;}
.subBa .sub{ position: relative; width: 45%;margin: 0 auto;overflow: hidden;margin-left: 25%;height: 400px; 
border-left: 1px solid #ccc; border-right: 1px solid #ccc;box-sizing: border-box;}
.subBa .sub > li{float: left;width: 33%;padding-top: 30px; }
.subBa .sub > li:nth-of-type(1){padding-left: 20px; box-sizing: border-box; height: 150px; position: relative;}
.subBa .sub > li:nth-of-type(1)::after{ content: ""; background: #ccc; width: 1px; height: 400px; position: absolute; right: 0; top:0; z-index: 100;}
.subBa .sub > li:nth-of-type(2){padding-left: 20px;box-sizing: border-box; height: 150px;position: relative;}
.subBa .sub > li:nth-of-type(2)::after{ content: ""; background: #ccc; width: 1px; height: 400px; position: absolute; right: 0; top:0; z-index: 100;}
.subBa .sub > li:nth-of-type(3){padding-left: 20px;box-sizing: border-box; height: 150px; }
.subBa .sub > li:nth-of-type(4){padding-left: 20px;box-sizing: border-box;height: 250px;  }
.subBa .sub > li:nth-of-type(5){padding-left: 20px;box-sizing: border-box; height: 250px;  }
.subBa .sub > li:nth-of-type(6){padding-left: 20px;box-sizing: border-box;height: 250px;  }

/* 서브메뉴 수정 10.15 */
.subBg2 .sub > li:nth-of-type(1){padding-left: 20px; box-sizing: border-box; height: 110px; position: relative;}
.subBg2 .sub > li:nth-of-type(2){padding-left: 20px;box-sizing: border-box; height: 110px;position: relative;}
.subBg2 .sub > li:nth-of-type(3){padding-left: 20px;box-sizing: border-box; height: 110px; }
.subBg2 .sub > li:nth-of-type(4){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg2 .sub > li:nth-of-type(5){padding-left: 20px;box-sizing: border-box; height: 110px;  }
.subBg2 .sub > li:nth-of-type(6){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg2 .sub > li:nth-of-type(7){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg2 .sub > li:nth-of-type(8){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg2 .sub > li:nth-of-type(9){padding-left: 20px;box-sizing: border-box;height: 110px;  }

.subBg3 .sub > li:nth-of-type(1){padding-left: 20px; box-sizing: border-box; height: 110px; position: relative;}
.subBg3 .sub > li:nth-of-type(2){padding-left: 20px;box-sizing: border-box; height: 110px;position: relative;}
.subBg3 .sub > li:nth-of-type(3){padding-left: 20px;box-sizing: border-box; height: 110px; }
.subBg3 .sub > li:nth-of-type(4){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg3 .sub > li:nth-of-type(5){padding-left: 20px;box-sizing: border-box; height: 110px;  }
.subBg3 .sub > li:nth-of-type(6){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg3 .sub > li:nth-of-type(7){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg3 .sub > li:nth-of-type(8){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg3 .sub > li:nth-of-type(9){padding-left: 20px;box-sizing: border-box;height: 110px;  }

.subBg4 .sub > li:nth-of-type(1){padding-left: 20px; box-sizing: border-box; height: 110px; position: relative;}
.subBg4 .sub > li:nth-of-type(2){padding-left: 20px;box-sizing: border-box; height: 110px;position: relative;}
.subBg4 .sub > li:nth-of-type(3){padding-left: 20px;box-sizing: border-box; height: 110px; }
.subBg4 .sub > li:nth-of-type(4){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg4 .sub > li:nth-of-type(5){padding-left: 20px;box-sizing: border-box; height: 110px;  }
.subBg4 .sub > li:nth-of-type(6){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg4 .sub > li:nth-of-type(7){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg4 .sub > li:nth-of-type(8){padding-left: 20px;box-sizing: border-box;height: 110px;  }
.subBg4 .sub > li:nth-of-type(9){padding-left: 20px;box-sizing: border-box;height: 110px;  }

.subBa .sub li a.subtxt{color: #000;font-size: 22px;font-weight: bold;position: relative; }
.subBa .sub li:nth-child(1) a.subtxt{margin-left: 1px;}
.subBa .sub li:nth-child(4) a.subtxt{margin-left: 1px;}
.subBa .sub li:nth-child(7) a.subtxt{margin-left: 1px;}
.subBa .sub li a.subtxt::before{content: "|" ; position: absolute; left: -23px; font-weight: bold;z-index: 100;}
.subBa .sub li a.subtxt:hover{color: #ff6600;font-size: 22px;font-weight: bold;position: relative; }
.subBa .sub li a.subtxt::before:hover{content: "|" ; position: absolute; left: -23px; font-weight: bold;z-index: 100;}
.subBa .sub li a img{margin-top: 20px;}
.depth3_ul > li:nth-of-type(1){padding-top: 10px!important;}
.depth3_ul > li{ width: 100%!important; padding: 5px!important;}
.depth3_ul > li a:hover{ color: #ff6600;}
.depth3 .infoimg ul{overflow: hidden;width: 95%;margin: 0 auto;padding-top: 10px; }
.depth3 .infoimg ul li{float: left; box-sizing: border-box;}
.depth3 .infoimg ul li a{position: relative;display: block; padding-left: 40px; box-sizing: border-box;}
.depth3 .infoimg ul li:nth-of-type(1){width: 46%; margin-right: 4%; background: #fbf1f0;padding: 35px 20px;box-sizing: border-box;border-radius: 15px;margin-bottom: 20px;}
.depth3 .infoimg ul li:nth-of-type(2){width: 46%; background: #e9fbf3;padding:35px 20px;box-sizing: border-box;border-radius: 15px;margin-bottom: 20px;}
.depth3 .infoimg ul li:nth-of-type(3){width: 46%; margin-right: 4%; background: #f5f1fc;padding: 35px 20px;box-sizing: border-box;border-radius: 15px;}
.depth3 .infoimg ul li:nth-of-type(4){width: 46%; background: #e8f5fb;padding:35px 20px;box-sizing: border-box;border-radius: 15px;}
.depth3 .infoimg ul li:nth-of-type(1) a::before{content: "";background: url(/nhc/images/top-menu-i01.png) no-repeat;position: absolute;left: 20px;width: 34px;height: 35px;top: -4px;}
.depth3 .infoimg ul li:nth-of-type(2) a::before{content: "";background: url(/nhc/images/top-menu-i02.png) no-repeat;position: absolute;left: 15px;width: 30px;height: 30px;top: -4px;}
.depth3 .infoimg ul li:nth-of-type(3) a::before{content: "";background: url(/nhc/images/top-menu-i03.png) no-repeat;position: absolute;left: 15px;width: 31px;height: 32px;top: -4px;}
.depth3 .infoimg ul li:nth-of-type(4) a::before{content: "";background: url(/nhc/images/top-menu-i04.png) no-repeat;position: absolute;left: 5px;width: 31px;height: 29px;top: -4px; }
.depth3 .infoimg ul li > a{font-weight: bold; display: block; font-size: 16px;text-align: center;}

.subBa .sub li a.sub-link{position: relative;}
.subBa .sub li a.sub-link::after{content: "";background: url(/nhc/images/link-i.png) no-repeat; position: absolute;right: -18px; bottom:5px; width: 14px;height: 14px;background-size: cover;}

/* 오른쪽 네비게이션 */
.snsbt{float: right;height: 88px;position: relative;padding-right: 50px;box-sizing: border-box;}
.snsbt .snsRight li{float: left;padding: 26px 22px 0 0;box-sizing: border-box;}
.snsbt .snsRight li:nth-of-type(3){padding-right:0;box-sizing: border-box;}
.snsbt .snsRight li a{display: block;}

/* 모바일 토글메뉴 */
.menu_toggle {width: 44px;height: 40px;position: absolute;top: 15px;right:15px;transition: all .5s;display: none;z-index: 950;cursor: pointer;}
.menu_toggle span {width: 100%;height: 2px;display: block;background: #fff;transition: all .5s;}
.menu_toggle span:nth-child(2) {margin: 8px 0;}
.menu_toggle.active {right:50%;}
.menu_toggle.active .m_menu_i{display: none;}
.menu_toggle.active .m_menu_close{display: block!important;}
.menu_toggle.active span {background: #fff;}

/* 모바일 메뉴 */
#mobile_menu::before {content: '';}
#mb_nav {position: fixed;top: 0;right: -100%;z-index: 950;height: 100%;width: 100%;}
.mb_nav_bg {width: 100%;background: rgba(0, 0, 0, 0.5);height: 100%;position: absolute;top: 0;left: 0;opacity: 0;}
#mb_nav.on .mb_nav_bg {opacity: 1;transition-duration: 0.7s;transition-delay: 0.3s;}
#mb_nav .mb_nav_wr {background: #f6f6f6;width: 100%;height: 100%;max-width: 50%;position: absolute;top: 0;right: 0;overflow-y: scroll;}
#mb_nav .mb_dept1 {background: #fff;padding: 0 25px;}
#mb_nav .mb_dept1_li {border-bottom: 1px solid #e7e7e7;padding: 15px 0;}
#mb_nav .mb_dept1_li:last-child {border-bottom: 0;}
#mb_nav .mb_dept1_a {font-size: 16px;color: #555;font-weight: 500;display: block;position: relative;}
#mb_nav .mb_dept2 {padding-left: 22px;display: none;}
#mb_nav .mb_dept2_ul {margin-top: 22px;}
#mb_nav .mb_dept2_ul li:last-child a {margin-bottom: 0}
#mb_nav .mb_dept2_ul a {color: #333;font-size: 15px;margin-bottom: 18px;}
#mb_nav .mb_dept1_li.active .dep_btn .line2 {opacity: 0;transition-duration: 0.7s;}
.dep_btn {position: absolute;right: 0;top: 10px;}
.dep_btn .line1 {display: block;width: 16px;height: 2px;background: #f15d21;}
.dep_btn .line2 {display: block;width: 2px;height: 16px;background: #f15d21;margin-top: -9px;margin-left: 7px;opacity: 1;transition-duration: 0.5s;}
#mb_nav .header_sns {margin: 20px 30px 0;}
#mb_nav .header_sns>ul li {margin-right: 20px;}
.mb_nav_top .mb_top {overflow: hidden;}
.mb_nav_top .mb_top>ul {float: right;overflow: hidden;}
.mb_nav_top .mb_top>ul li {float: left;width: 100%;padding:10px 20px; box-sizing: border-box; }
.mb_nav_top .mb_top>ul li a {font-size: 14px;display: block;padding: 5px;text-align: left;color: #fff;padding-left: 30px;line-height: 30px;height: 40px;}

.menu_toggle.active .menu_toggle_db {padding-top: 3px;}
.mb_nav_top .mb_top>ul.mb_lang {float: left;}
.mb_nav_top .mb_top>ul.mb_lang li {position: relative;padding-right: 12px;margin-right: 12px;}
.mb_nav_top .mb_top>ul.mb_lang li a {font-size: 14px;color: #fff;font-weight: 300;}
.mb_nav_top .mb_top>ul.mb_lang li.active a {font-weight: 500;}
.mb_nav_top .mb_top>ul.mb_lang li::after {content: '';height: 9px;width: 1px;background: #eab3b0;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}
.mb_nav_top .mb_top>ul.mb_lang li:last-child::after {display: none;}
.mb_bottom {background: #b8afa9;padding: 8px 25px 8px;}
.mb_bottom ul {overflow: hidden;width: 40%;margin: 0 auto;}
.mb_bottom ul>li {float: left;margin-left: 12px;}
.mb_bottom ul>li:first-child {margin-left: 0;}
.mb_bottom ul>li a {color: #fff;font-size: 14px;display: block;}
.edit_mt_color {color: yellow!important;font-weight: 500;}
.followquick_mo_btn {display: none;position: fixed;top: 120px;right: 0;z-index: 400;cursor: pointer;}
.mo_step_img {display: none;}
.mo_step_img2 {display: none;}

.quick_menu_button_wrap2 ul li {float: left;width: 100%;background: slateblue;padding-left: 20px;box-sizing: border-box;}
.quick_menu_button_wrap2 ul li a {color: #fff;display: block;text-align: left;height: 50px;line-height: 50px;position: relative;text-indent: 43px;}
.quick_menu_button_wrap2 ul li img {position: absolute;left: 10px;top: 10px;width: 22px;margin: 0 auto;margin-right: 10px;}

.mb_dept2_ul li a.sub-link{position: relative;}
.mb_dept2_ul li a.sub-link::after{content: ""; background: url(/nhc/images/link-i.png) no-repeat;width: 12px;height: 12px;
background-size: cover; position: absolute; right: -20px; bottom:3px; }




/* 우측 상단 전체메뉴 */
.fullscreen_menu{display:none;}
.fullscreen_menu h2{text-align: center;font-size: 50px;color: #fff; margin-top: 6%; }
.fullscreen_menu{position:absolute;z-index: 2000;width:100%;height:100vh;background:rgba(54,54,54,0.9);}
.menu_wrap{ padding-top: 100px; position:absolute;top:55%;left:50%; transform: translate(-50%,-50%);width: 1440px;overflow: hidden; }
.menu_wrap > li{list-style: none;margin-bottom: 40px;border-bottom: 1px solid #fff;overflow: hidden;padding-bottom: 30px;}
.menu_wrap > li > a{color:#fff;text-decoration:none;  font-size: 28px; width: 18%;float: left;font-weight: bold;}
.menu_wrap ul.sub{width: 78%;float: left;}
.menu_wrap ul.sub li{float: left;margin-right: 35px;}
.menu_wrap ul.sub li a{color: #fff;font-size: 20px; position: relative; }
.menu_wrap > li > a:hover, .menu_wrap ul.sub li a:hover{color: #f7941d;font-weight: bold;}
.menu_wrap ul.sub li a:after {content: "|";opacity: 0.8;padding-left: 18px;font-size: 18px;color: #ccc;position: absolute;top: -1px;}
.menu_wrap ul.sub li:last-child a:after {content: "";}
.close_btn{right: 5%;top: 10%; position: absolute; }
.close_btn a{display: inline-block;color : #fff;margin:10px;}

.menu_wrap ul.sub3depth li a::after{content: "";}
.menu_wrap ul.sub3depth ul.depth3_ul li{padding: 4px 0 0 0!important;}
.menu_wrap ul.sub3depth ul.depth3_ul li:first-child{padding:10px 0 0 0!important;}
.menu_wrap ul.sub3depth ul.depth3_ul li a{font-size: 16px;color: #bbb;}
.menu_wrap ul.sub3depth li{width: 18%; margin-right: 2%;position: relative;}
.menu_wrap ul.sub3depth > li::after {content: "";border-right: 1px dotted #fff; position: absolute; top:0; right: 0; width: 1px; height: 125px;opacity: 0.4;}
.menu_wrap ul.sub3depth > li:last-child::after {content: "";border-right: 0;}
.menu_wrap ul.sub3depth li:last-child{margin-right: 0%;}



/* 우측 상단 검색바 */
.search-area{ display: none;z-index: 2000; position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background:rgba(54,54,54,0.9);}
.inner-search .logo{ position: absolute; left: 5%; top:10%;}
.inner-search .search-close{position: absolute; right: 5%;top: 10%;}
.search-form {position: relative;padding-top: 340px;width: 625px;margin: 0 auto;}
.search-form input#search-field {display: block;width: 100%;background: #fff;border: 0;font-size: 20px;line-height: 50px;
color: #444444;outline: none;padding: 10px 30px;width: 95%;box-sizing: border-box;font-weight: normal;height: 70px;}
.search-form button {margin: 0;padding: 0;width: 120px;height: 70px;background:blueviolet; font-size: 25px;color: #fff;font-weight: bold;
cursor: pointer;display: block;border: 0;position: absolute;bottom: 0;right: -90px;}
.blind {position: absolute;width: 1px;height: 0;font-size: 0;line-height: 0;text-align: left;text-indent: -999em;left: -9999px;overflow: hidden;}



/* page-1 -  visual */
.sec {width: 100%;height: 100vh;position: relative;}
#page-1 .visual{width: 100%; height: 100vh;position: relative;}
#page-1 video {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
.play{color: #fff; text-indent: -9999px; padding: 10px; border-radius: 50px; z-index: 100;cursor: pointer; font-size:16px;position: absolute;right:240px;bottom:100px;}
.play:hover {background: rgba(255,255,255,0.2) url(/nhc/images/play_i01.png) center no-repeat; width: 150px; padding: 20px; border-radius: 50px;}
.play{ width: 150px;height: 27px; padding: 20px; border-radius: 50px; background:transparent url(/nhc/images/play_i01.png) center no-repeat; }
.play.active{width: 150px;height: 27px; padding: 20px; border-radius: 50px; background:transparent url(/nhc/images/play_i02.png) center no-repeat; }
.play.active:hover {background: rgba(255,255,255,0.2) url(/nhc/images/play_i02.png) center no-repeat; width: 150px; padding: 20px; border-radius: 50px; }
.b_bg {position: absolute;top: 0;left: 0;background: rgba(0,0,0,0.3);width: 100%;height: 100vh;}


/* 메인 비쥬얼 슬라이드 */
#page-1{background: transparent;position: relative; }
#page-1 .main_bxslider li.slideImg1{width: 100%; background: url(/nhc/images/main_bg01.png) no-repeat; background-size: cover; background-position: center; } 
#page-1 .main_bxslider li.slideImg2{width: 100%;background: url(/nhc/images/main_bg02.png) no-repeat; background-size: cover; background-position: center; }
#page-1 .main_bxslider li.slideImg3{width: 100%;background: url(/nhc/images/main_bg03.png) no-repeat; background-size: cover; background-position: center; }
#page-1 .main_bxslider li.slideImg4{width: 100%;background: url(/nhc/images/main_bg04.png) no-repeat; background-size: cover; background-position: center; }
#page-1 .main_bxslider li.slideImg5{width: 100%;background: url(/nhc/images/main_bg05.png) no-repeat; background-size: cover; background-position: center; }
#page-1 .main_bxslider li.slideImg6{width: 100%;background: url(/nhc/images/main_bg06.png) no-repeat; background-size: cover; background-position: center; }

#page-1 .bx-controls{ width: 1440px;margin: 0 auto; z-index: 99; } 
#page-1 .bx-pager{font-size: 20px;color: #fff;position: absolute;top:250px;z-index: 100;} 
#page-1 .bx-controls-direction{ bottom:150px; z-index: 99;position: absolute;}
#page-1 .bx-controls-direction .bx-prev{ text-indent: -9999px; background: url(/nhc/images/box-prev.png) no-repeat; background-size: 50px 50px; width: 50px;height: 50px;display: block; float: left; }
#page-1 .bx-controls-direction .bx-next{ margin-left: -2px; text-indent: -9999px; background: url(/nhc/images/box-next.png) no-repeat; background-size: 50px 50px; width: 50px;height: 50px;display: block; float: right; }


#page-1 .main_cont h2{color: #fff;font-size: 44px;}
.visual ul{position: relative;margin: 0 auto;width: 100%;overflow: hidden;height: 100vh;}
.visual ul li{width: 100%; height: 100vh; background: transparent; }
.visual .btnbox{overflow: hidden;padding-top: 30px; }
.visual .btnbox a{float: left; margin-right: 20px;}
.detail_view{width: 160px;height: 60px;display: block;text-align: center;line-height: 60px;border:1px solid #fff;color: #fff;font-size: 18px;font-weight: bold;}
.detail_view:hover{background: #ff6600; border:1px solid #ff6600;  color: #fff; transition: all 0.3s; }
.reservation{width: 160px;height: 60px;display: block;text-align: center;line-height: 60px;background: #fff;color: #333; font-size: 18px;font-weight: bold;}
.reservation:hover{border:1px solid #ff6600; color: #fff;background: #ff6600; transition: all 0.3s;}
.main_cont {width: 1440px;margin: 0 auto; height: 100vh; padding-top:280px;box-sizing: border-box; position: relative;}


.main_cont h2{text-align: left;font-size: 87px;color: #fff;font-weight: 400;margin: 0 auto;}
.main_cont span.main_txt3{font-size: 20px;text-align: center;display: block;
padding: 50px 30px;width: 482px;margin: 0 auto;color: #fff;line-height: 1.8;}
span.txt_bold{color: #fff;font-size: 66px; display: block; font-weight: bold;}

.visual .info{position: absolute; width: 100%; bottom:0;background: #ccc;opacity: 0.9; height: 74px;line-height: 70px;z-index: 940;}
.visual .infobox{width: 1440px;margin: 0 auto;}
.visual .infobox .info-txt{font-size: 25px;font-weight: bold;padding-right: 20px;}
.visual .infobox .info-txt2 strong{font-size: 20px;}
.visual .infobox b{font-weight: normal;}
.visual .infobox .info-txt2{font-size: 18px;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
.pl70{padding-left: 70px;}





/* page-2 온라인 예약서비스/알림창 ------------------------------------------ */

#page-2{width: 100%; height: 100vh;position: relative; padding-top:250px; box-sizing: border-box; }
#page-2 .page2_line{font-size: 70px;position: absolute; top:60px;left:240px;border-bottom: 2px solid #000; width: 700px; }


/* cont-quick */
.cont-quick{position: relative;box-sizing: border-box;}
.cont-quick .container{position: relative;}
.cont-quick .swiper-container{position: absolute;top: 0;left: 50%;width: calc(50% - -408px);margin-left: -408px;padding-left:0;}
.cont-quick .swiper-container img{ display: block; max-width:100%;height: 100%;}
.cont-quick .swiper-slide{width: 660px; height: 400px; margin-top: 70px; }
.cont-quick .swiper-pagination{bottom: 100px;left: 260px;width: auto;font-size: 16px;font-weight: 300;}
.cont-quick .swiper-pagination span{position:relative;display:inline-block;margin: 0 7px;padding-left:10px;font-weight: 400;}
.cont-quick .swiper-pagination span:after{display:block; content:"0"; position:absolute; top:0; left:0;}
.cont-quick .swiper-pagination-fraction{color:#a3a3a3;}
.cont-quick .swiper-pagination-current{color:#ffffff;}
.cont-quick .swiper-pagination-total{color:#a3a3a3; }
.cont-quick .swiper-button-prev, .cont-quick .swiper-button-next{top:auto;bottom: 104px;width: 25px;height: 13px;/* background-size: 10px 18px; */}
.cont-quick .swiper-button-prev{left: 230px; background:url(/nhc/images/ico-page-prev.png) 0 0 no-repeat;}
.cont-quick .swiper-button-prev:hover{background:url(/nhc/images/ico-page-prev_on.png) 0 0 no-repeat;}
.cont-quick .swiper-button-next{left: 340px; background:url(/nhc/images/ico-page-next.png) 0 0 no-repeat;}
.cont-quick .swiper-button-next:hover{background:url(/nhc/images/ico-page-next_on.png) 0 0 no-repeat;}

.cont-quick .tit-wrap{width: 35%; height: 550px; background: url(/nhc/images/nhcbox-bg.png) no-repeat; background-size: cover; padding: 80px 0 0 180px; box-sizing: border-box; }
.cont-quick .tit-wrap .tit{padding-top: 10px;color:#fff;font-size: 45px;font-weight:600;letter-spacing:-0.020em;}
.cont-quick .tit-wrap .text{color:#fff;font-size:18px;font-weight: 300;letter-spacing:-0.020em;line-height: 1.3;}
.cont-quick .tit-wrap ul{padding-top: 50px;}
.cont-quick .tit-wrap ul li{padding: 10px 0;}
.cont-quick .tit-wrap ul li.btn1{background:url(/nhc/images/scacule-i.png) left center no-repeat;}
.cont-quick .tit-wrap ul li.btn2{background:url(/nhc/images/arlam-w.png) left center no-repeat;}
.cont-quick .tit-wrap ul li.btn1.active{background:url(/nhc/images/scacule-o.png) left center no-repeat;}
.cont-quick .tit-wrap ul li.btn2.active{background:url(/nhc/images/arlam-o.png) left center no-repeat;}
.cont-quick .tit-wrap ul li a{display: block;padding: 7px 0 7px 60px;color:#fff;font-size:21px;font-weight: 500;letter-spacing:-0.020em;}
.cont-quick .tit-wrap ul li.active a{color:#ff9000;}

.cont-quick .text-wrap{position:absolute;width: 100%;height: 100%;top: 0;left: 0; }
.cont-quick .swiper-slide-active .text-wrap{display:block;}
.cont-quick .text-wrap p{display: block;position:relative;padding: 50px 70px 30px 70px; }
.cont-quick .text-wrap p:after{display:block;content:"";position:absolute;bottom: 30px;right: -30px;width:90px;height:22px;}
.cont-quick .text-wrap .tit{position:relative;color: #fff;font-size: 25px;font-weight: 500;letter-spacing: -0.020em;font-weight: bold; }
.cont-quick .text-wrap .tit:after{display:block;position:absolute;bottom: -10px;left: -5px;color: rgba(255, 255, 255, 0.15);font-family: 'Nanum Gothic', serif;font-weight: bold;font-size: 80px;}
.cont-quick .text-wrap .text{display: block;padding-top: 15px;color: #fff;font-size: 16px;font-weight: 300;letter-spacing: -0.040em;line-height: 1.35;}
.cont-quick .text-wrap > a{color: #fff; font-size: 20px;border: 1px solid #fff;padding:30px;margin: 0px 70px 30px 70px;
display: block;text-align: left;box-sizing: border-box;}
.cont-quick .text-wrap > a:hover{background-color: #fff;color: #333;transition: 0.1s; }


/* cont-intro */
.cont-intro{padding: 70px 0;background:#e5e5e9 url(/nhc/images/bg-intro.png) center center no-repeat;}
.cont-intro .tit{color: #101f25;font-size: 30px;text-align: center;letter-spacing: -0.020em;line-height: 1.3;}
.cont-intro ul{padding: 60px 0;text-align: center;}
.cont-intro ul li{display: inline-block;padding: 0 50px;text-align: center;}
.cont-intro ul li img{display: block;}
.cont-intro ul li span{display: block;padding-top: 10px;color: #384246;font-size: 20px;font-weight: 300;letter-spacing: -0.020em;}
.cont-intro a.more{display: block;width: 200px;margin: 0 auto;padding: 15px 0;border: 1px solid #101f25;border-radius: 50px;color: #101f25;font-size: 18px;text-align: center;}
.cont-intro a.more:hover, .cont-intro a.more:focus{background:#101f25; color:#fff;}

.popup_bxslider {width: 100%; left: 0;top:0;}
.popup_bxslider > div{height: 400px;}
.popup_bxslider .bx-viewport{height: 400px;}
#page-2 .bx-controls{ left: 0;top: 0;} 
#page-2 .bx-pager{font-size: 20px;color: #fff;position: absolute;top:0px; left:80px;background:rgba(0, 0, 0, 0.5);z-index: 50;height: 40px;padding: 0 10px; line-height: 40px;} 
#page-2 .bx-controls-direction{ top:0; left:0; z-index: 99;position: absolute;}
#page-2 .bx-controls-direction .bx-prev{ text-indent: -9999px;background: rgba(0, 0, 0, 0.5) url(/nhc/images/arrow_sp.png) no-repeat; background-position: center;width: 40px;height: 40px;display: block; float: left; }
#page-2 .bx-controls-direction .bx-next{ border-left: 1px solid #fff;border-right: 1px solid #fff; box-sizing: border-box; text-indent: -9999px;background: rgba(0, 0, 0, 0.5) url(/nhc/images/arrow_sw.png) no-repeat; background-position: center; width: 40px;height: 40px;display: block; float: right; }
.popupImg{display: block;height: 400px;background-size: contain;background-position: 50% 50%;background-repeat: no-repeat; background-color: #fff;}
.popupImg01{ background-image: url(/nhc/images/img-quick5.png);list-style: none;position: relative;}
.popupImg02{ background-image: url(/nhc/images/img-quick4.png);list-style: none;position: relative;}


/* page3 - New 공지사항-------------------------------------------------------------- */


#page-3{width: 100%; height: 100vh;position: relative; background: #f9f9f9;padding-top: 100px;box-sizing: border-box;}
.cont_wrap{width: 1440px;margin: 0 auto;}
#page-3 .cont_wrap .nexbox > h2{font-size: 70px;position: relative;}
#page-3 .cont_wrap .nexbox > h2::before{content: "";width: 280px;height: 2px;background-color: #000;position: absolute;top: 50px;left: -310px;background-repeat: no-repeat;}
#vtab {padding-top: 20px;height: 100%;}
#vtab > ul > li{padding: 5px 0;}
#vtab > ul > li > a {color: #555;font-size: 26px;list-style-type: none;text-align: left;padding-bottom: 10px;position: relative;border-right: none;}
#vtab > ul > li a::after{content: ""; padding-left: 10px; margin-left: 10px; background: url(/nhc/images/right-arrow-i.png) no-repeat; 
background-position: right; background-size:contain ; }
#vtab > ul > li.selected a {color: #000;font-weight: bold;opacity: 1;z-index: 10;background-color: #fafafa !important;position: relative;}
#vtab > ul {float: left; width: 12%;text-align: left;display: block;margin: auto 0;padding: 0;position: relative;top: 30px;}
#vtab > div {float: left; width: 78%;background-color: #fafafa;margin-left: 110px;padding: 12px;position: relative;z-index: 9;}
#vtab > div > h4 {color: #800;font-size: 1.2em;padding-top: 5px;margin-top: 0;}
#vtab .news_list li{float: left;width: 30%; margin-right: 3%;position: relative; }
#vtab .news_list li:nth-child(2){margin-top: -50px;}
#vtab .news_list li:nth-child(3){margin-right: 0%;}
#vtab .news_list li img{display: block; width: 100%;}
#vtab .news_list li h2{font-size: 20px; padding-top: 20px;}
#vtab a.new_view{clear: both; width: 200px;display: block;color: #000;position: absolute;top:80%;left: 50%;transform: translate(-50%,0);
margin: 100px auto; border: 1px solid #000;height: 50px; line-height: 50px; text-align: center;}
#vtab .txt-bg{position: absolute;left: 0;right: 0;bottom: 49px;top: 0;background: rgba(0,0,0,0.7);opacity: 0.5;}
#vtab .new-txt{color: #fff;position: absolute;color: #fff;padding: 50px 30px;box-sizing: border-box;}
#vtab .txt-bg:hover{background: #fff; opacity: 0.1; transition: all 0.3s;cursor: pointer; }




/* page4 - 전시관 둘러보기 ---------------------------------------------------- */
#page-4{width: 100%; height: 100vh; background:url(/nhc/images/page4-bg.png) no-repeat;background-size: cover; margin: 0 auto; position: relative; padding-top: 30px;box-sizing: border-box;}
#page-4 .cont-wrap{width: 1440px;margin: 0 auto;}
#page-4 .link-line{font-size: 30px; box-sizing: border-box; font-weight: bold; color: #333;border: 1px solid #333;
padding: 20px 30px;position: absolute;left: 100px;top: 120px;}
.mGallery .gallery-area {overflow-x: auto;display: flex;width: 100%;height: 100%;box-sizing: border-box;}
.mGallery .gallery-area .container { position: relative;width: 1440px;max-width: 1440px;}
.mGallery .gallery-area .container::before {content: "";position: absolute; left: 290px; right: 0px; 
height: 100%; background: url(/nhc/images/line2.png) 0 0 no-repeat; background-position: right 350px;}
.mGallery .gallery-road-g {display: flex;flex-shrink: 0;width: 100%;}
.mGallery .gallery-road-g > li { position: relative;width: 100%;}
.mGallery .gallery-road-g .tit-area * {transition: all 0.3s;}
.mGallery .gallery-road-g .tit-area {display: block;position: absolute;padding-left: 56px; z-index: 10;box-sizing: border-box;cursor: pointer;transition: all 0.3s;}
.mGallery .gallery-road-g .tit-area:hover .link-.link-play::before {  opacity: 1;}
.mGallery .gallery-road-g .road-step-area {position: relative; width: 1440px;height: 800px;}
.mGallery .gallery-road-g .road-step-area li {position: absolute; z-index: 10;}
.mGallery .gallery-road-g .road-step-area li p,
.mGallery .gallery-road-g .road-step-area li img { position: absolute; white-space: nowrap; max-width: none; max-height: none;transition: all 0.5s; cursor: pointer;}
.mGallery .gallery-road-g .road-step-area li img:hover,
.mGallery .gallery-road-g .road-step-area li img:active,
.mGallery .gallery-road-g .road-step-area li img:focus{transform: translateY(-20px); }

.mGallery .gallery-road-g .road-step-area li img.img-step2-1:hover,
.mGallery .gallery-road-g .road-step-area li img.img-step2-1:active,
.mGallery .gallery-road-g .road-step-area li img.img-step2-1:focus{transform: translateX(-20px); }


.mGallery .gallery-road-g .road-step-area .txt strong { display: block; color: #333333; font-size: 26px; line-height: 1.2; font-weight: bold;}
.mGallery .gallery-road-g .road-step-area .txt p { padding-top: 5px; font-size: 16px;color: #555555;}
.mGallery .gallery-road1 .road-step-area {box-sizing: border-box;}
  
/* 식물존 */
.mGallery .gallery-road1 .road-step-area .road-step1 { bottom: 0px;left: 400px; }
.mGallery .gallery-road1 .road-step-area .road-step1 .txt {margin: 310px 0px 10px 51px;}
.mGallery .gallery-road1 .road-step-area .txt-step1-2 span {  display: block; text-indent: 20px;}
.mGallery .gallery-road1 .road-step-area .img-step1-1 { top: 0px; left: 0px; }
.mGallery .gallery-road1 .road-step-area .img-step1-3 {  display: none;}

/* 동물 존 */
.mGallery .gallery-road1 .road-step-area .road-step2 {top: 428px;left: 223px;}
.mGallery .gallery-road1 .road-step-area .road-step2 .txt {margin: 256px 0 0 -150px;}
.mGallery .gallery-road1 .road-step-area .img-step2-1 {top: 0px;left: -200px;}

/* 지질 존 */
.mGallery .gallery-road1 .road-step-area .road-step3 {top: 70px; left: 360px;}
.mGallery .gallery-road1 .road-step-area .road-step3 .txt{margin: 320px 0px 0px 100px;}
.mGallery .gallery-road1 .road-step-area .img-step3-1 { top: 0px; left: 40px;}
.mGallery .gallery-road1 .road-step-area .img-step3-2 { top: 5px; left: 410px; }

/* 천연보호구역 존 */
.mGallery .gallery-road1 .road-step-area .road-step4 { top: 70px; left: 865px;}
.mGallery .gallery-road1 .road-step-area .road-step4 .txt{ margin: 320px 0px 0px -55px; }
.mGallery .gallery-road1 .road-step-area .txt-step4-2 {  top: -170px; left: 139px;}
.mGallery .gallery-road1 .road-step-area .img-step4-1 { top: 0px; left: -100px; }
.mGallery .gallery-road1 .road-step-area .img-step4-2 { top: -346px; left: 105px;}

/* 명승 존 */
.mGallery .gallery-road1 .road-step-area .road-step5 { top: 70px; right: 185px;}
.mGallery .gallery-road1 .road-step-area .img-step5-1{top:0;left:0px;}
.mGallery .gallery-road1 .road-step-area .road-step5 .txt{margin:320px -60px -330px 50px;}

/* 한반도의 자연유산 존 */
.mGallery .gallery-road1 .road-step-area .img-step6-1{top:0;left: 0px;}
.mGallery .gallery-road1 .road-step-area .road-step6 {bottom: 0px; right: 10px;}
.mGallery .gallery-road1 .road-step-area .road-step6 .txt{margin: 310px 24px 10px -20px;}

/* 메머드 존 */
.mGallery .gallery-road1 .road-step-area .img-step7-1{top:0;left:0;}
.mGallery .gallery-road1 .road-step-area .road-step7 { bottom: 0px;left: 760px;}
.mGallery .gallery-road1 .road-step-area .road-step7 .txt { margin: 310px 0px 10px 51px;}






/* footer ------------------------------------------ */
footer{ clear: both; height: 180px; background: #222;}
footer .cont_wrap{  position: relative;width: 100%;margin: 0 auto;padding: 0 50px;box-sizing: border-box;margin: 0 auto; }
.ft_top{padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #ccc;}
.ft_top ul{overflow: hidden;}
.ft_top ul li{float: left;margin-right: 50px;  }
.ft_top ul li a{display: block; color: #fff; font-size: 15px;position: relative; padding-right: 30px; }
.ft_top ul li a:after{content: "|"; opacity: 0.8; padding-left: 30px; font-size: 18px; color: #ccc; position: absolute;top:-1px;}
.ft_top ul li a:hover{color: #0084ff;}
.ft_top ul li a:active{color: #0084ff;}
.ft_top ul li a.on{color: #0084ff;}
.ft_top ul li:nth-of-type(6) a:after{content: ""; }
a.bottom_logo{width:220px; float: left;}
.ft-bt{padding: 30px 0;box-sizing: border-box; position: relative; }
.ft_txt{ font-size: 14px; padding-left: 40px; color: #fff; font-weight: bold;float: left; }
.ft_txt a{color: #fff; }
.ft_txt span{display: block; color: #fff; font-weight: lighter;}


/* 링크사이트 */
.select-link {position: absolute;top: 20px;right:0px;width: 218px;z-index: 90;}
.select-link > .link-title, .select-link select {height: 30px;padding: 0 0px;border: solid 1px #dadadc;letter-spacing: 0;font-size: 13px;font-weight: normal;}
.select-link > .link-title a { display: block; line-height: 2; font-size: 13px; }
.select-link > .link-site { position: absolute; bottom: 29px; width: 148px; padding: 10px; background: #fff; border: solid 1px #dadadc; line-height: 1.8; }
.select-link a { color: #626262; }
.select-link a.link-btn, .select-link input[type="submit"]{display: block;font-size: 13px;position: absolute;top: 0;right: 0;height: 16px;padding: 7px 10px;border: 0;background: #666;color: #fff;}
.f-menu > li.mi{position: absolute;top: 24px;right: 0;background: none;}
.f-menu > li.wa{position: absolute;top: 24px;right: 70px;background: none;}