@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* font */
@font-face {
  font-family: 'Nanum-regular';
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/NanumGothic-Regular.eot);
  src: url(./fonts/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(./fonts/NanumGothic-Regular.woff2) format('woff2'),
       url(./fonts/NanumGothic-Regular.woff) format('woff'),
       url(./fonts/NanumGothic-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum-Bold';
  font-style: normal;
  font-weight: 700;
  src: url(./fonts/NanumGothic-Bold.eot);
  src: url(./fonts/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(./fonts/NanumGothic-Bold.woff2) format('woff2'),
       url(./fonts/NanumGothic-Bold.woff) format('woff'),
       url(./fonts/NanumGothic-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum-Extra';
  font-style: normal;
  font-weight: 700;
  src: url(./fonts/NanumGothic-ExtraBold.eot);
  src: url(./fonts/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(./fonts/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(./fonts/NanumGothic-ExtraBold.woff) format('woff'),
       url(./fonts/NanumGothic-ExtraBold.ttf) format('truetype');
}


/*------------ BASIC Start -----------*/
body, ul, ol, li, div, p, h1, h2, h3, h4, h5, h6, dd, dt, dl, form, fieldset, aside, legend, input, textarea, button, select, table, thead, tbody, th, tr, td, img, header, footer, section, article, figure, figcaption {margin:0; padding:0;}
body, ul, ol, li, div, p, h1, h2, h3, h4, h5, h6, dd, dt, dl, form, img, input, fieldset, aside, footer, header, figure, figcaption {border:none;}
html, body {min-width:320px; width:100%; height:100%; background: #fff; font-size:14px; color: #333; text-align:left; font-family: 'Nanum-regular', Malgun Gothic, Dotum;}
body #main{overflow:hidden;}

@-webkit-keyframes hue{from{-webkit-filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(-360deg)}}
ul, ol, li { list-style:none;}
a { text-decoration:none;}
img {border:none;vertical-align:middle;}
address {font-style:normal;}
input { /*-webkit-appearance: none;*/}


select {background: none repeat scroll 0 0 #fff; border:1px solid #d4d4d4; color:#888; font-size:13px; margin:0; overflow:auto; padding:4px 4px 3px; vertical-align:middle;}
input[type=text] {padding:5px; border:1px solid #ccc; font-size:12px; vertical-align:middle; color:#888;}
textarea {padding:5px; border:1px solid #ccc; font-size:12px; vertical-align:middle; color:#888;}
input[type=password] {padding:5px; border:1px solid #ccc; font-size:12px; vertical-align:middle; color:#888;}
input[type=radio] {margin-right:3px; border:0; vertical-align:middle;}
input.type_radio {margin:-3px 3px 0px 0px;}

*::-moz-selection {background: #efeabc;color: #fff;}
mark, 
*::selection {background: #efeabc;color: #fff;}
.wrap {width:100%;height:100%;position:relative;display:block;width:100%;height:100%}
.inner{position:relative;display:block;width:1000px;margin:0 auto;}

/*------------ Layout -----------*/

/***** Header *****/
header {position:relative;left: 0;top: 0;width: 100%; height:180px; z-index:9999;}
header #util_area{position:relative; display:block; overflow:hidden; height:100px; width:100%; background:url("../img/common/header_bg.png") repeat-x top center;}
header h1.logo a {position: absolute;top:27px;left:50%;display:block; margin:0 0 0 -140px; z-index:1000; width:207px; height:49px; background:url('../img/common/header_logo.png') top center no-repeat; text-indent:-999em;}
/*
h1 {text-align: center;padding: 70px 0 0;-webkit-animation: hue 5s infinite linear;}
h1 a {display:inline-block;color:#efeabc;font-size:72px;position: relative;left:0;top:0;}
h1 a span {font-size:60px;}
h1 a:after {content:'with NTABI';display: block;position: absolute;right: 0;top:0;color: #fff;font-size: 18px;}
*/

/* Util - name 고정 */
header .top_util {position:relative;float:right; margin:37px 0 0;}
header .top_util ul > li {position:relative;display:inline-block;float:left;padding:0 15px; line-height:22px;}
header .top_util ul > li:before {content:""; display:block; position:absolute;right:0;top:7px;width:1px;height:10px;background:#b99200}
header .top_util ul > li:last-child:before{width:0}
header .top_util a {color:#b99200;font-size:13px;}
header .top_util a:hover {text-decoration:underline;}
header .top_util ul li:last-child{margin-right:0}

/***** GNB *****/
#gnb{position:relative; z-index:9999; height:80px; clear:both; background:url("../img/common/gnb_bg.png") no-repeat top center;}
#gnb:after{display:block;clear:both;content:''}
#gnb .gnb_inner {width:1000px;margin:0 auto}
#gnb .gnb_inner:after {content:""; display:block; clear:both;}
#gnb .gnb_bg {position:absolute;z-index:0;top:80px;width:100%;height:0}
#gnb .gnb_bg:after{content:"";display:block;clear:both;visibility:hidden;}

/* GNB - 1depth */
nav.gnb_area {float:left;z-index:999;width:1000px;}
nav.gnb_area > ul {position:relative;z-index:2;*zoom:1;width:100%;}
nav.gnb_area > ul:after {content:"";display:block;clear:both}
nav.gnb_area > ul > li {float:left;position:relative;width:25%}
nav.gnb_area > ul > li:after {content:""; display:block; position:absolute;left:0;top:20px;width:1px;height:19px;background:#d8c00d}
nav.gnb_area > ul > li:first-child:after{width:0}
nav.gnb_area > ul > li > a {display:block;height:60px;line-height:60px;color:#534a04;font-family:'Nanum-Bold';text-align:center;font-size:17px}
nav.gnb_area > ul > li > a.on,
nav.gnb_area > ul > li > a:hover {height:55px;line-height:60px;color:#ff7800/*;border-bottom:3px solid #7b0019*/}

/* GNB - 2depth */
nav.gnb_area > ul > li > div {display:none;position:absolute;z-index:20;left:0;top:100px;width:250px;height:160px;border-right:1px solid #efefef}
nav.gnb_area > ul > li:last-child > div {border-right:0}
nav.gnb_area > ul > li > div > ul {height:240px;padding:0 0 0 20px}
/*nav.gnb_area > ul > li > div > ul:hover {background:#ff7800}*/
nav.gnb_area > ul > li > div > ul > li {padding:0 10px}
nav.gnb_area > ul > li > div > ul > li a {display:block;font-size:14px;padding:6px 0px;line-height:15px;color:#333}
nav.gnb_area > ul > li > div > ul:hover a {color:#000}
nav.gnb_area > ul > li > div > ul:hover a:hover {text-decoration:underline;}
nav.on .nav_bg {display:block;position:absolute;left:0;top:46px;z-index:0;width:100%;height:260px;border-bottom:1px solid #e5e5e5; background:#fff url("../img/common/gnb_bg2.png") no-repeat top center;}
nav.gnb_area .nav_bg span {position:relative;left:50%;display:block;width:880px;height:180px;margin-left:-700px;overflow-x:hidden}

/* GNB-3depth */
nav.gnb_area ul.gnbview {position:relative;padding:0 0 0 5px}
nav.gnb_area ul.gnbview > li {display:block;width:100%;height:20px;line-height:20px;padding:0;}
nav.gnb_area ul.gnbview > li a {font-size:12px;padding:0 0 0 10px;background:url(../img/common/icon_nav_off.gif) no-repeat 0 3px}
nav.gnb_area > ul > li > div > ul:hover li ul.gnbview > li a {background:url(../img/common/icon_nav_on.gif) no-repeat 0 3px}
nav.gnb_area ul.gnbview > li a:after {display:none}
nav.gnb_area ul.gnbview > li a:hover {color:#fff;text-decoration:underline}

/***** Footer *****/
#main footer {position: relative;left: 0;top:0px;z-index:2;width: 100%;height:200px;font-size:12px;padding:15px 0;text-align:center;color:#999;background-color:#ffffff;position: absolute;top:auto;bottom:0px;margin-top:0;}
#sub footer {position: relative;left: 0;top:0px;z-index:2;width: 100%;height:200px;font-size:12px;padding:15px 0;text-align:center;color:#999;background-color:#ffffff;}
footer address {display:block; font-style:normal; color:#808080; font-size:13px; font-family:'Nanum-regular'; padding-top:15px; line-height:1.8em;}
footer cite {display:block; font-style:normal; color:#808080; font-size:13px; font-family:'Nanum-regular'; padding-top:3px;}
footer ul li {display:inline-block;}
footer ul li a {font-size:15px; color:#808080;font-family:'Nanum-Bold';text-align:center; margin:0 12px}
footer ul li a:hover {color:#020202;}

/* 배너 */
.main_footer_link{border-bottom:1px solid #e7e7e7;height:72px;width:1000px;margin-top:8px}
.main_footer_link>div>.mfl_btn_to_left{display:block;float:left;width:12px;height:27px;margin:13px 36px 0 0;background:url(../img/main/fl_btn_to_left.png) no-repeat center center;}
.main_footer_link>div>.mfl_btn_to_left.on{background:url(../img/main/fl_btn_to_left_on.png) no-repeat center center}
.main_footer_link>div>.mfl_btn_to_right{display:block;float:left;width:12px;height:27px;margin:13px 0 0 36px;background:url(../img/main/fl_btn_to_right.png) no-repeat center center;}
.main_footer_link>div>.mfl_btn_to_right.on{background:url(../img/main/fl_btn_to_right_on.png) no-repeat center center}
.main_footer_link>div>.mfl_link_list{position:relative;display:block;float:left;width:900px;height:50px;overflow:hidden;}
.main_footer_link>div>.mfl_link_list>ul>li{display:block;float:left;width:154px;height:50px;margin-left:31px}
.main_footer_link>div>.mfl_link_list>ul>li:first-child{margin-left:0;}
.main_footer_link>div>.mfl_link_list>ul>li>.mfl_link{display:block;width:154px;height:48px;border:1px solid #ebebeb;background:#fff;}
.main_footer_link>div>.mfl_link_list>ul>li>.mfl_link>img{float:left;}
.main_footer_link>div>.mfl_link_list>ul>li.off>*{display:none}

/***** Main *****/
#main {position:fixed;left:0;top:0;display:block;content:'';width:100%;height:100%;background:#72a9ad url("../img/main/bg.jpg") no-repeat center top;/*opacity:.2;filter:alpha(opacity=20);*/}
.contents_wrap{position: relative; width:1000px; margin:0 auto; display:block;content:'';}

.usj_map {position: absolute;left:50%;top:0%;z-index: 1;height: 100%;width: 924px;margin: 0 auto 0;}
.usj_map figure.usj_item {z-index: 3;}
.usj_map div.usj_item {z-index: 2;}
.usj_map figcaption.usj_item {z-index: 1;}
.usj_map .usj_item {position: absolute;left: 0%;top: 310px;transition: all 1s;-webkit-transition: all 1s;}
.usj_map figcaption.usj_item1 {z-index: 13;}
.usj_map figcaption.usj_item2,
.usj_map figcaption.usj_item3 {z-index: 16;}
.usj_map figcaption.usj_item4,
.usj_map figcaption.usj_item5 {z-index: 14;}
.usj_map div.usj_item1 {z-index: 17;}
.usj_map figure.usj_item1,
.usj_map figure.usj_item3 {z-index: 19;}
.usj_map figure.usj_item2 {z-index: 18;}
.usj_map figure.usj_item4,
.usj_map figure.usj_item5 {z-index: 15;}
.usj_map .usj_item.on {top: 300px;/*z-index: 999 !important;*/}
.usj_map figure.usj_item.on,
.usj_map div.usj_item1.on,
.usj_map figcaption.usj_item2.on {z-index: 999 !important;}
.usj_map .usj_item4.on,
.usj_map .usj_item5.on {z-index: 16;}
.usj_map figcaption.usj_item1.on,
.usj_map figcaption.usj_item6.on,
.usj_map figcaption.usj_item7.on,
.usj_map figcaption.usj_item8.on {z-index: 15;}

.btn_group {position: absolute;left:0;top:0;bottom:0;z-index: 1;width: 100%;}
ul.btn_group {z-index: 1;}
ol.btn_group {z-index: 1000;}

ol.btn_group li.usj_btn {position:absolute;width:100px;height:100px;overflow:hidden;}
ol.btn_group li.usj_btn a {display: block;width:100%;height:100%;color:transparent;font-size:0;position:absolute;left:0;top:0;background:#f00;opacity:0;filter:alpha(opacity=0);}
/*
ul.btn_group li.usj_btn {width: 200px;display: block;position:absolute;top:50%;text-align: center;font-weight: 600;}
ul.btn_group li.usj_btn h4 {font-size: 25px;color: #c9dcdd;}
ul.btn_group li.usj_btn.on h4 {color: #fff;}
ul.btn_group li.usj_btn:after,
ul.btn_group li.usj_btn:before {width: 1px;height: 40px;display: none;content:'';position:absolute;left:50%;top:40px;background: #c9dcdd;}
ul.btn_group li.usj_btn.on:after,
ul.btn_group li.usj_btn.on:before {background: #fff;}
ul.btn_group li.usj_btn:after {right: -30%;margin:0 -30px 0 0;}
ul.btn_group li.usj_btn:before {left: -30%;margin-left:0 0 0 -30px;}

ul.btn_group li.usj_btn4:after,
ul.btn_group li.usj_btn4:before {width: 40px;height: 1px;display: none;content:'';position:absolute;left:-50px;top:12px;background: #c9dcdd;}

ul.btn_group li.usj_btn1{left:50%;top:70px;margin:0 0 0 -70px;}
ul.btn_group li.usj_btn2 {left:50%;top:90px;margin:0 0 0 -367px;}
ul.btn_group li.usj_btn3 {right:50%;top:110px;margin:0 -430px 0 0;}
ul.btn_group li.usj_btn4{right:50%;top:310px;margin:0 -715px 0 0;}
ul.btn_group li.usj_btn5{left:50%;top:240px;margin:0 0 0 -217px;}

ul.btn_group li.usj_btn1:after,
ul.btn_group li.usj_btn2:after,
ul.btn_group li.usj_btn3:after,
ul.btn_group li.usj_btn5:after {display: block;}
ul.btn_group li.usj_btn4:before{display: block;}
*/
.usj_item {-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
.usj_map {-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}


.usj_btn_warp {position:absolute; width:100px; height:100px;  z-index:9999; display:block;}
.usj_btn_warp a {display: block;width:100%;height:100%;color:transparent;}

.usj_btn_warp {width: 200px;display: block;position:absolute;top:50%;text-align: center;font-weight: 600;}
.usj_btn_warp h4 {font-size: 25px;color: #c9dcdd;}
.usj_btn_warp.on h4 {color: #fff;}
.usj_btn_warp:after,
.usj_btn_warp:before {width: 1px;height: 40px;display: none;content:'';position:absolute;left:50%;top:40px;background: #c9dcdd;}
.usj_btn_warp.on:after,
.usj_btn_warp.on:before {background: #fff;}
.usj_btn_warp:after {right: -30%;margin:0 -30px 0 0;}
.usj_btn_warp:before {left: -30%;margin-left:0 0 0 -30px;}

.usj_btn_warp.usj_btn4:after,
.usj_btn_warp.usj_btn4:before {width: 40px;height: 1px;display: none;content:'';position:absolute;left:-40px;top:12px;background: #c9dcdd;}

.usj_btn_warp.usj_btn1{left:50%;top:70px;margin:0 0 0 -70px;}
.usj_btn_warp.usj_btn2 {left:50%;top:90px;margin:0 0 0 -367px; }
.usj_btn_warp.usj_btn3 {right:50%;top:110px;margin:0 -430px 0 0;}
.usj_btn_warp.usj_btn4{right:50%;top:390px;margin:0 -715px 0 0;}
.usj_btn_warp.usj_btn5{left:50%;top:240px;margin:0 0 0 -217px;}

.usj_btn_warp.usj_btn1:after,
.usj_btn_warp.usj_btn2:after,
.usj_btn_warp.usj_btn3:after,
.usj_btn_warp.usj_btn5:after {display: block;}
.usj_btn_warp.usj_btn4:before{display: block;}



/***** Sub *****/
#sub {position:relative;display:block;content:'';width:100%;height:100%;z-index:0;}
#container {position:relative;margin:170px 0 0 0; padding:50px 0 0 0;}/*background:#f9f9f9;*/
#container:after {content:"";display:block;clear:both;}

#visual{position: absolute;left:0;top:0;width:100%;height:175px;padding-top:175px;background:url('../img/sub/visual_bg.gif') left center repeat-x;}
#visual .visual_sub1{width:100%;height:175px;background:url('../img/sub/visual_sub2.png') center center no-repeat;}
#visual .visual_sub1 span{font-family:'Nanum-bold';color:#fff;font-size:35px;text-align:center;display:block;line-height:160px; display:none;}

/* 서브 패스 */
.path ol {position: absolute; right:0; top:10px;}
.path ol li {float:left; padding-left:25px; font-family:'Nanum-regular'; color:#808080; font-size:13px; background:url('../img/common/path_arr.gif') 10px center no-repeat; line-height:1.2em; }
.path ol li:first-child {padding-left:0;background:none}
.path ol li:first-child img {margin-top:4px;}
.path ol li.last {font-family:'Nanum-bold';}

/* 서브 컨텐츠영역 탑   */
.sub_title {width:100%;margin-bottom:30px;overflow:hidden;border-bottom:1px solid #ddd;}
.sub_title h2 {margin:0 0 20px;font-size:28px;color:#333; }
.sub_title p {color:#555;font-size:14px}

/* Snb */
#snb {float:left;width:220px;margin-bottom:100px; }
#snb h2 {color:#fff;font-size:20px;font-family:'Nanum-bold';line-height:65px;padding-left:20px}
#snb .menu_title {height:65px;background: url(../img/sub/side_tit_bg.gif) left center no-repeat}

#snb .snb_menu {border-left:1px solid #e1e1e5;border-right:1px solid #e1e1e5;background-color:#fff}
#snb .snb_menu li a {display:block;height:45px;line-height:45px;letter-spacing:-0.03em;padding-left:20px;font-size:15px;color:#333;border-bottom:1px solid #ddd; background:url('../img/sub/snb_arw_on.png') 95% center no-repeat}
#snb .snb_menu li .ecp {letter-spacing:-1.5px}
#snb .snb_menu li.on a, #snb .snb_menu li a:hover {background:#f5f5f5 url('../img/sub/snb_arw.png') 95% center no-repeat}
#snb .snb_menu li a.last{border-bottom:1px solid #0798de !important}
#snb .snb_bottom a {display:block;height:45px;line-height:43px;letter-spacing:-0.03em;padding-left:20px;font-size:13px;border-bottom:1px solid #ddd; background:url('../img/sub/snb_btn.png') 95% center no-repeat;margin-top:15px;}
#snb .snb_bottom a:hover {text-decoration:underline;}
#content {float:left; margin-left:45px; width:735px; padding-bottom:150px;}

/* quickWrap */
#quickWrap {position:fixed; top:0; right:0; width:80px; height:100%; background:#fff; border-left:1px solid #e7e7e8; z-index:9999;}
#quickWrap a.quick_top {position:absolute; bottom:0px; padding-top:0px; background-color:Red; height:61px; width:100%;}
#quickWrap a.quick_top button.btn-top {position:absolute; width:100%; border:0px; bottom:0; left:0; height:61px; background:#5897a4; color:#fff; text-indent:0; text-transform:uppercase;}
/*#quickWrap button {width:100%; border:none; text-indent:-9999px; cursor:pointer; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
#quickWrap button.btn-top {position:absolute; bottom:0; height:61px; background:#5897a4; color:#fff; text-indent:0; text-transform:uppercase;}*/
#quickWrap a {position:relative; display:block; width:100%; height:45px; /*text-indent:-9999px;*/ padding-top:80px; text-align:center; font-size:12px; line-height:18px; border-bottom:1px solid #e7e7e8; color:#393939;}
#quickWrap a:hover {color:#589e9d;}

#quickWrap a.quick-icon1 {background:url('../img/sub/icon_quick_menu01.png') no-repeat center 35px;}
#quickWrap a.quick-icon2 {background:url('../img/sub/icon_quick_menu02.png') no-repeat center 30px;}
#quickWrap a.quick-icon3 {background:url('../img/sub/icon_quick_menu05.png') no-repeat center 30px;}
#quickWrap a.quick-icon4 {background:url('../img/sub/icon_quick_menu04.png') no-repeat center 30px;}
#quickWrap a.quick-icon5 {background:url('../img/sub/icon_quick_menu06.png') no-repeat center 35px;}
#quickWrap a.quick-icon6 {background:url('../img/sub/icon_quick_menu03.png') no-repeat center 35px;}
#quickWrap a.quick-icon1:hover, #quickWrap a.quick-icon1:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu01_on.png') no-repeat  center 35px;;}
#quickWrap a.quick-icon2:hover, #quickWrap a.quick-icon2:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu02_on.png') no-repeat center 30px;}
#quickWrap a.quick-icon3:hover, #quickWrap a.quick-icon3:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu05_on.png') no-repeat center 30px;}
#quickWrap a.quick-icon4:hover, #quickWrap a.quick-icon4:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu04_on.png') no-repeat center 30px;}
#quickWrap a.quick-icon5:hover, #quickWrap a.quick-icon5:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu06_on.png') no-repeat center 35px;}
#quickWrap a.quick-icon6:hover, #quickWrap a.quick-icon6:focus {background:#f0f0f0 url('../img/sub/icon_quick_menu03_on.png') no-repeat center 35px;}