@charset "utf-8";
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
body { font-size: 24px; line-height: 1.5; font-family: '나눔고딕', 'Nanum Gothic', sans-serif; color: #6a6d6f; letter-spacing: -0.1vw; letter-spacing: -1px; padding: 0; margin: 0; }
.wrap { position: relative; width: 100%; margin: 0 auto; float: left; overflow: hidden; display: inline-block; }/*background:url(../img/m/test.jpg) 0 33px;*/
a { text-decoration: none; color: #5c5c5c; }
ul, li, span, div, p { }
.h3 div, .h3 span, .h2 div, .h2 span { display: inline-block; }
ul, li { margin: 0; padding: 0; }
.hide { display: none; }
.font12 { font-size: 12px; }
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.font16 { font-size: 16px; }
.font20 { font-size: 20px; }
.font22 { font-size: 22px; }
.font23 { font-size: 23px; }
.font24 { font-size: 24px; }
.font30 { font-size: 30px; }
.font34 { font-size: 34px; }
.font40 { font-size: 40px; }
.font60 { font-size: 60px; }
.w100 { width: 100%; }
.tc { text-align: center; }
.icon01 { width: 50px; height: 50px; background: url(../img/m/img04_1.png) center no-repeat; float: right; }
.text { margin-top: 3.5%; margin-bottom: 3.5%; }
header { position: fixed; z-index: 100; top: 0px; left: 0px; width: 100%; height: 90px; float: left; display: inline-block; color: #fff; border-bottom: 2px solid #194297; }
header a { color: #fff; }
header > div { width: 100%; }
header .h1 { text-align: center; height: 90px; overflow: hidden; background: #fff; }
a { display: inline-block; }
header .h1 a:nth-child(1) { background: url(../img/m/img00.png) no-repeat; width: 55px; height: 49px; position: absolute; left: 20px; top: 22px; }
header .h1 a:nth-child(2) { background: url(../img/m/img01.png) no-repeat; width: 222px; height: 54px; text-align: center; top: 22px; position: relative; }
header .h1 a:nth-child(3) { background: url(../img/m/img03.png) no-repeat; width: 90px; height: 90px; position: absolute; right: 0; top: 0; }
header .h2 a.totalview { width: 100%; background: #71719e; font-size: 24px; }
header .h2 .icon01 { border: 1px solid #9595b8; box-sizing: border-box; margin: 20px 30px; float: right; }
header .h2 .text { margin: 30px 0 0 24px; }
header .totalmenu { width: 100%; height: 0; transition-duration: 500ms; background: #f7f7f9; overflow: hidden; }
header .totalmenu a { width: 90px; height: 127px; margin: 25px 0 0 28px; }
header .totalmenu a:nth-child(1) { background: url(../img/m/img13.png); }
header .totalmenu a:nth-child(2) { background: url(../img/m/img14.png); }
header .totalmenu a:nth-child(3) { background: url(../img/m/img15.png); }
header .totalmenu a:nth-child(4) { background: url(../img/m/img16.png); }
header .totalmenu a:nth-child(5) { background: url(../img/m/img17.png); }
header .totalmenu.view { height: 181px; }
footer { height: 373px; background: #2c2c2c; padding: 0 20px; box-sizing: border-box; }
footer .privercy { border: 1px solid #909090; color: #fff; border: 1px solid #555163; padding: 15px 30px; margin: 40px 0 0 0; font-size: 18px; font-weight: bold; float: left; }
footer > div { width: 100%; }
footer .f1 { height: 140px; }
footer .f1 a { width: 33.29999%; height: 100%; float: left; }
footer .f2 { height: 221px; }
footer .f2 a { float: left; height: 100%; }
footer .f3 { color: #fff; text-align: left; }
footer .f3_1 { font-size: 30px; font-weight: bold; margin: 38px 0 10px 0; text-align: left; }
footer .f3_2 { font-size: 18px; margin: 0 0 0 0; text-align: left; color: #878686; }
footer .f3_2 a { color: #878686; }
footer .qb { transition-duration: 500ms; position: fixed; bottom: 256px; z-index: 6; right: 20px }
footer .qb .quickbox { width: 100%; height: 0; background: url(../img/m/img07_1.png); position: relative; transition-duration: 500ms; bottom: -400px; }
footer .qb.view { bottom: 169px; position: absolute; transition-duration: 500ms; }
footer .qb.view .icon02 { position: absolute; top: -53px; left: 50%; margin: 0px 0 0 -66px; z-index: 2; }
footer .qb.view .quickbox { height: 320px; width: 100%; position: relative; transition-duration: 500ms; bottom: 0; }
footer .qb.view .quickbox a { width: 90px; height: 129px; margin: 106px 0 0 27px; }
footer .qb.view .quickbox a:nth-child(1) { background: url(../img/m/img08.png); }
footer .qb.view .quickbox a:nth-child(2) { background: url(../img/m/img09.png); }
footer .qb.view .quickbox a:nth-child(3) { background: url(../img/m/img10.png); }
footer .qb.view .quickbox a:nth-child(4) { background: url(../img/m/img11.png); }
footer .qb.view .quickbox a:nth-child(5) { background: url(../img/m/img12.png); }
footer .copy { color: #676767; }
footer .qb.view .quickbox a.close { background: url(../img/m/img06.png) no-repeat; width: 50px; height: 50px; bottom: -25px; left: 50%; margin: 0 0 0 -25px; position: absolute; }
.main .h3 { display: none; }
.left { position: fixed; width: 100%; height: 100%; z-index: -1; overflow-y: scroll; left: 0; transition-duration: 500ms; opacity: 0; }
.left .h1 { text-align: center; height: 90px; overflow: hidden; background: #fff; z-index: 17; width: 100%; }
.left .h1 a:nth-child(1) { background: url(../img/m/img02.png) no-repeat; width: 55px; height: 49px; position: absolute; left: 20px; top: 22px; }
.left .h1 a:nth-child(2) { background: url(../img/m/img01.png) no-repeat; width: 222px; height: 54px; text-align: center; top: 22px; position: relative; }
.left .h1 a:nth-child(3) { background: url(../img/m/img03.png) no-repeat; width: 90px; height: 90px; position: absolute; right: 0; top: 0; }
.left .menu { position: absolute; z-index: 111; top: 181px; width: 100%; height: 100%; right: 0; margin: 0 0 214px 0; }
.left .allmenu { margin: 80px 0 50px 0; z-index: 12; text-align: center; width: 100%; }
.left .allmenu img { text-align: center; }
.left .menu a { color: #fff; }
.left .menu .top { background: url(../img/m/img18.png) no-repeat 35px 34px #373650; width: 100%; height: 124px; border-bottom: 1px solid #4e4d69; }
.left .menu .top .close { background: url(../img/m/img19.png) no-repeat; width: 49px; height: 49px; float: right; margin: 35px 30px 0 0; }
.left .menu ul { width: calc(100% - 180px); height: auto; transition-duration: 500ms; position: relative; margin: 25px auto 0 auto;     padding: 0 0;}
.left .menu ul li { width: 100%; height: 0; overflow: hidden; transition-duration: 500ms; }
.left .menu ul.view li { height: auto; }
/*.left .menu ul.view li { height: 521px; transition-duration: 500ms; }
.left .menu ul.e1.view li { height: 608px; }
.left .menu ul.e3.view li { height: 691px; }
.left .menu ul.e4.view li { height: 435px; }
.left .menu ul.e5.view li { height: 696px; }
.left .menu ul.e6.view li { height: 435px; }
.left .menu ul.e7.view li { height: 260px; }
.left .menu ul.e8.view li { height: 435px; }

*/
.left .menu ul.view { border-bottom: 1px solid #fff; border-top: 1px solid #fff; padding: 17px 0; margin: 102px auto 0 auto; }
.left .menu ul a { width: 100%; padding: 6px 30px; box-sizing: border-box; float: left; text-align: center; color: #75fde1; font-weight: bold; }
.left .menu ul > a { font-size: 31px; padding: 0; color: #fff; }
.left .menu ul.view > a { font-size: 52px; font-weight: bold; position: absolute; top: -90px; }
.left .bg { position: absolute; z-index: 5; width: 100%; height: 100%; background: #000; opacity: 0.8; top: 0; left: 0; }
.left.view { left: 0; opacity: 1; z-index: 110; }
.left.view .bg { position: fixed; background: #363f4a; opacity: 0.95; }
.depth3 { padding: 30px; background: #ebebf3; box-sizing: border-box; width: 100%; display: none; }
.depth3 a { width: calc(33.29999% - 4px); border: 4px solid #fff; box-sizing: border-box; color: #202020; border-radius: 40px; text-align: center; padding: 15px 0; margin: 2px; }
.depth3 a.ov { width: calc(33.29999% - 4px); border: 4px solid #580ed5; background: #580ed5; color: #fff; box-sizing: border-box; }
/* 태블릿: 1024 이하 */

.content { margin: 90px 0 0 0; }
.content .h3 { width: 100%; position: relative; }
.content .h3 .h3_1, .content .h3 .h3_2 { width: 50.2%; float: left; }
.content .h3 .h3_1 { background: #e7eaee; }
.content .h3 .h3_2 { background: #dbe5ee; }
.content .h3 ul { background: #e7eaee; transition-duration: 500ms; height: 0; overflow: hidden; position: absolute; left: 0; top: 68px; width: 100%; z-index: 80; }
.content .h3 .h3_2 ul { background: #dbe5ee; }
.content .h3 .h3_2 { float: right; width: 49.8%; left: 50.2%; left: 0; }
.content .h3 .h3_2 ul { background: #dbe5ee; }
.content .h3 ul a { margin: 10px 10px; font-size: 22px; width: calc(100% - 20px); }
 .content .h3 .h3_2 ul.nav2 > a{ display:none;}
.content .h3 ul li { width: 100%; }
.content .h3 .h3_2 ul li { width: 100%; height: auto; display: inline-block; }
.content .h3 a { float: left; width: 100%; color: #003876; letter-spacing: -3px; }
.content .h3 { color: #003876; }
.content .h3 a span { float: left; }
.content .h3 a span.icon01 { float: right; margin: 10px 11px 0 0; }
.content .h3 a .text { margin: 22px 0 22px 26px; }
.content .h3 div > a span.text { margin: 16px 0 16px 26px; }
.content .h3view { height: auto; }
.content .h3view ul { }
.content .h3 ul.h3view_bottom { height: auto; }
 @media handheld, only screen and (max-width: 1023px) {
}
/* 스마트 폰: 767px 이하 */
@media handheld, only screen and (max-width: 767px) {
}
/* 스마트 폰: 480px 이하 */
@media handheld, only screen and (max-width: 480px) {
}

/* 스마트 폰: 480px 이하 */
@media handheld, only screen and (max-height: 620px) {
header { position: relative; }
}
 @media handheld, only screen and (max-width: 640px) {
.font12 { font-size: 2.4vw; }
.font13 { font-size: 2.5vw; }
.font14 { font-size: 3.8vw; }
.font16 { font-size: 2.7vw; }
.footertop .itemBox04 .dl01 span { font-size: 2.3vw; font-size-adjust: auto; }
.font20 { font-size: 4.2vw; }
.font22 { font-size: 3.8vw; }
.font23 { font-size: 3.25vw; line-height: 4vw; }
.font24 { font-size: 3.5vw; }
.font25 { font-size: 4.3vw; line-height: 6vw; }
.font30 { font-size: 3.8vw; }
.font32 { font-size: 4vw; }
.font34 { font-size: 4.2vw; }
.font36 { font-size: 6vw; }
.font60 { font-size: 9.2vw; }
.font40 { font-size: 6.5vw; }
.footertop .footerbox2 .dl01 dd b { margin: -3% 0% 0 -110%; }
}
/* 아이폰 4 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}