@charset "utf-8";
@import url("https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css");
@import url( ./fonts.css );

/* 초기화 */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
p, address,
form, fieldset, legend, input, select, textarea,
table, caption, col, colgroup, thead, tfoot, tbody, th, td{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal;}
html, fieldset, img, abbr, acronym{border:0 none;}
ol, ul, li, dl, dt, dd{list-style:none;}
table{border-collapse:collapse; border-spacing:0;}
caption, th, td{font-weight:normal;}
address, caption, em{font-weight:normal; font-style:normal;}
caption{display:none;}
legend{display:none;}
html{}
body{min-width:320px; margin:0; padding:0; font-size:14px; font-family:"Noto Sans Korean", sans-serif; overflow-x:hidden;}
textarea, select{font-size:12px; font-family:"notosans",sans-serif;}
select{height:24px; margin:0; padding:2px; border:1px solid #d7d7d7; font-family:"notosans",sans-serif; background:#fff;}
p{margin:0; padding:0; word-break:keep-all; word-wrap:break-word;}
div{word-break:keep-all; word-wrap:break-word;}
hr{display:none;}
pre{overflow-x:scroll; font-size:1.1em;}
a{color:#222; text-decoration:none;}
button{cursor:pointer;}
iframe{max-width:100%;}
*, :after, :before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.dn{display:none;}

.mT30{margin-top:30px;}
.mT50{margin-top:50px;}

.blind{font-size:0; left:-1000em; line-height:0; position:absolute;}


/* 상단 */


#header-section{width:100%; height:100px; z-index:10000; border-bottom:1px solid #25224b; -webkit-transition:height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition:height 0.5s; transition:height 0.5s; position:relative;}
#header-section .header-area{width:1200px; margin:0 auto; padding:0 0; position:relative;}
#header-section #gnb{height:100px; position:relative;}
#header-section #gnb .logo{top:26px; left:0; position:absolute;}
#header-section #gnb .gnb{margin-left:450px; float:left;}
#header-section #gnb .gnb:after{clear:both; content:""; display:block;}
#header-section .gnb .gb-ul{}
#header-section .gnb .gb-ul:after{clear:both; content:""; display:block;}
#header-section .gnb .gb-ul .gb-1li{height:100px; position:relative; float:left;}
#header-section .gnb .gb-ul .gb-1li .gb-1a{height:100px; padding:0 30px; font-weight:700; font-size:18px; line-height:100px; text-align:center; color:#383838; display:table; vertical-align:middle; position:relative;}
#header-section .gnb .gb-ul .gb-1li:last-child .gb-1a{padding:0 20px;}
#header-section .gnb .gb-ul .gb-1li .gb-1a:after{width:0; max-width:100%; height:4px; left:50%; bottom:-4px; z-index:20000; background:#fff; content:""; position:absolute; transition:all 0.33s ease-out 0s; -moz-transition:all 0.33s ease-out 0s; -webkit-transition:all 0.33s ease-out 0s; -ms-transition:all 0.33s ease-out 0s; -o-transition:all 0.33s ease-out 0s; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);}
#header-section .gnb .gb-ul .gb-1li .gb-1a.on:after,
#header-section .gnb .gb-ul .gb-1li .gb-1a:hover:after{width:60px;}
#header-section .gnb .gb-ul .gb-1li:last-child{padding-left:20px;}
#header-section .gnb .gb-ul .gb-1li .gb-2ul{height:0; z-index:10000; opacity:0; overflow:hidden; position:absolute;}
#header-section .gnb .gb-ul .gb-1li .gb-2ul li{float:left;}
#header-section .gnb .gb-ul .gb-1li .gb-2ul li a{padding:0 18px; font-size:14px; line-height:60px; color:#fff; display:table; position:relative;}
#header-section .gnb .gb-ul .gb-1li .gb-2ul li a:after{width:1px; height:14px; top:50%; right:0; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); background:rgba(225,225,225,.5); content:""; display:block; position:absolute;}
#header-section .gnb .gb-ul .gb-1li .gb-2ul li:last-child a:after{display:none;}
#header-section .gnb .gb-ul .gb-1li:nth-child(1) .gb-2ul{width:920px; left:-150px;}
#header-section .gnb .gb-ul .gb-1li:nth-child(2) .gb-2ul{width:550px; left:20px;}
#header-section .gnb .gb-ul .gb-1li:nth-child(3) .gb-2ul{width:770px; left:-200px;}
#header-section .gnb .gb-ul .gb-1li:nth-child(4) .gb-2ul{width:300px; left:-60px;}
#header-section .gnb .gb-ul .gb-1li:nth-child(5) .gb-2ul{width:200px; left:-50px;}
#header-section .gnb .gb-ul .gb-1li:nth-child(6) .gb-2ul{width:200px; left:-60px;}
#header-section .gb-all{width:50px; height:50px; top:26px; right:0; text-indent:-9000px; background:url("../img/btn_allmenu.gif") no-repeat center center; display:block; position:absolute;}
#header-section .btn_mall{top:26px; right:60px; position:absolute;}
#header-section .btn_mall a{display:inline-block; width:130px; line-height:50px; background:#DE2524; color:#fff; border-radius:50px; text-align:center;}
.gnb-bg-box{width:100%; height:0; top:100px; left:0; z-index:100; background-color:rgba(0,66,148,1); display:none; position:absolute;}

#allMenu-section{width:100%; height:0; top:0; left:0; z-index:99999; background:rgba(0,0,0,.93); position:fixed; opacity:0; overflow:hidden;}
#allMenu-section .allMenu-area{width:100%; max-width:1200px; margin:14px auto; padding:0 10px;}
#allMenu-section .allMenu-area:after{clear:both; content:""; display:block;}
#allMenu-section .allMenu-area .am-top{text-align:right;}
#allMenu-section .allMenu-area ul.am-ul{margin:0 -37px;}
#allMenu-section .allMenu-area ul.am-ul:after{clear:both; content:""; display:block;}
#allMenu-section .allMenu-area ul.am-ul li.am-1li{width:20%; padding:0 37px; float:left;}
#allMenu-section .allMenu-area ul.am-ul li.am-1li:nth-child(4):after{clear:both; content:""; display:block;}
#allMenu-section .allMenu-area .am-box{height:330px; margin-top:40px;}
#allMenu-section .allMenu-area .am-box h2{font-weight:500; font-size:26px; line-height:70px; color:#fff; border-top:2px solid #004294; border-bottom:1px solid #7b7b7b; display:block; position:relative;}
#allMenu-section .allMenu-area .am-box ul{margin-top:10px;}
#allMenu-section .allMenu-area .am-box ul li{}
#allMenu-section .allMenu-area .am-box ul li a{font-size:18px; line-height:36px; color:#fff; display:block;}

#main-vod{max-height:930px; background:url("../img/vod_bg.jpg") no-repeat; background-size:cover; overflow:hidden; position:relative;}
#main-vod video{vertical-align:middle;}
#main-vod .vod-bg{width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.4); position:absolute;}
#main-vod .vod-txt{width:100%; top:50%; left:0; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); z-index:99999; text-align:center; color:#fff; position:absolute;}
#main-vod .vod-txt div{font-weight:300; font-size:34px; line-height:120%; color:#fff; display:none;}
#main-vod .vod-txt h1{margin-top:40px; font-weight:600; font-size:62px; line-height:120%; color:#fff; display:none;}
#main-vod .vod-txt p{margin-top:40px; font-weight:300; font-size:22px; line-height:140%; color:#fff; display:none;}
#main-vod .down{width:45px; height:104px; left:50%; bottom:40px; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); z-index:9999; position:absolute;}
#main-vod .down div{position:relative;}
#main-vod .down span{width:45px; height:104px; background:url("../img/mdown.png") no-repeat; display:block; position:absolute;}

#footer-section{width:100%; background:#222222; padding:40px 0;}
#footer-section .content{width:1100px;margin:0 auto;}
#footer-section .content:after{clear:both;display:block; content:"";}
#footer-section .content .logo{border-bottom:1px solid #393939; padding-bottom:20px;}
#footer-section .content .logo:after{clear:both;display:block; content:"";}
#footer-section .content .logo h1{float:left;}
#footer-section .content .logo ul{float:right; margin-top:15px;}
#footer-section .content .logo ul:after{clear:both;display:block; content:"";}
#footer-section .content .logo ul li{float:left; font-size:14px;}
#footer-section .content .logo ul li a{color:#757575; position:relative; padding:0 15px;}
#footer-section .content .logo ul li a:after{width:1px; height:11px; top:5px; right:0px; background:#757575; content:""; display:block; position:absolute;}
#footer-section .content .logo ul li:last-child a{padding:0 0 0 15px;}
#footer-section .content .logo ul li:last-child a:after{width:0px;}
#footer-section .content .copy{padding-top:30px;}
#footer-section .content .copy:after{clear:both;display:block; content:"";}
#footer-section .content .copy p{float:left; color:#5d5d5d;}
#footer-section .content .copy p span{margin-top:10px; font-size:13px; display:inline-block;}
#footer-section .content .copy ul{float:right; color:#a9a9a9;}
#footer-section .content .copy ul li:first-child{font-size:14px;}
#footer-section .content .copy ul li:last-child{font-size:34px; font-weight:700;}


#svisual-section{background:url("../img/svisual.jpg") no-repeat center top; background-size:cover; overflow:hidden;}
#svisual-section .sv-txt{height:180px; text-align:center; position:relative;}
#svisual-section .sv-txt div{width:100%; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); position:absolute;}
#svisual-section .sv-txt h1{font-weight:300; font-size:36px; color:#fff;}
#svisual-section .sv-txt h1 strong{font-weight:700;}
#svisual-section .sv-txt p{font-weight:400; font-size:20px; color:#fff;}

#lnb {z-index:9998; width:100%; height:60px; background:#fff; border-bottom:1px solid #e1dfe2;}
#lnb .container {width:1180px; height:60px; padding:0; }
#lnb .container .home {display: inline-block; width:70px; height:60px;border-right:1px solid #e1dfe2; font-size:0; line-height:60px; vertical-align: middle; background:url('../img/ico_home.gif') no-repeat center center;}
#lnb .container > a.home {border-left:1px solid #e1dfe2; padding:0; margin:0;}
#lnb .container > a {float:left; position:relative; display:block; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2; -webkit-transition:0.3s; transition:0.3s}
#lnb .container > div {float:left; position:relative; width:240px; height:60px; border-right:1px solid #e2e2e2; -webkit-transition:0.3s; transition:0.3s}
#lnb .container > div > a { display:block; width:100%; height:60px; padding:0 50px 0 15px; line-height:60px; font-size:18px; color:#222; transition:all .3s ease;}
#lnb .container > div > a:after { content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:0px; background:#0086ec; transition:all .3s ease;}
#lnb .container > div > a i { position: absolute; top:50%; right:21px; display:inline-block; width:12px; height:12px; margin-top:-6px;}
#lnb .container > div > a i:before { content:''; display:block; position: absolute; top:50%; left:0; width:100%; height:2px; margin-top:-1px; background:#000; transition: all .3s ease;}
#lnb .container > div > a i:after { content:''; display:block; position: absolute; top:0%; left:50%; width:2px; height:100%; margin-left:-1px; background:#000; transition: all .3s ease;}
#lnb .container > div > div {display:none; position:absolute; top:60px; left:-1px; padding:30px 0; width:100%; background:#f9f9f9; border:1px solid #e2e2e2; border-top:0;z-index:9998;}
#lnb .container > div > div > a {display:block; padding:0 30px; font-size:16px; color:#555; line-height:1.3; margin-top:15px}
#lnb .container > div > div > a:first-child {margin-top:0;}
#lnb .container > div > div > a.current {font-weight:bold; color:#0e468c}
#lnb .container > div > a.on i:after { transform: rotate(90deg);}

#lnb .container > div:last-child > a { font-weight:bold; color:#fff; background:#004294;}
#lnb .container > div:last-child > a:after { height:0;}
#lnb .container > div:last-child > a i:before,
#lnb .container > div:last-child > a i:after { background:#fff;}
#lnb .container > div:last-child .depthList li a.on { color:#fff}

#wrap.sub #container-section{width:100%; max-width:1100px; margin:0 auto; padding:50px 0 100px;}

.page-title{text-align:center; font-size:36px; font-weight:700; color:#333; padding-bottom:20px; position:relative; margin-bottom:50px;}
.page-title:after{width:50px; height:3px; bottom:0; left:50%; margin-left:-25px; background:#004294; content:""; display:block; position:absolute;}
h2.sub-title{font-size:30px; color:#202020; font-weight:700; margin-bottom:20px; position:relative; padding-left:16px;}
h2.sub-title:after{width:5px; height:28px; top:10px; left:0px; background:#004942; content:""; display:block; position:absolute;}