@charset "utf-8";

body {
    overflow-x:hidden
}

/*스크롤 위아래 버튼*/
.scroll-btn {position:fixed; right:20px; bottom:40px; z-index:15}
.scroll-btn a.up-btn:after {content:"\e932"; display:inline-block; font-family:"xeicon"; font-size:50px; line-height:50px; color:rgba(0,0,0,.3)}
.scroll-btn a.down-btn:after {content:"\e938"; display:block; font-family:"xeicon"; font-size:50px; line-height:50px; color:rgba(0,0,0,.6)}

/*헤더 영역*/
#header {position:relative; height:60px; background:#012438}
#header h1 {position:absolute; top:16px; left:16px; color:transparent; font-size:1px; width:185px; height:30px; background:url(../img/h1-logo.png)no-repeat 0 0 / 185px auto; overflow:hidden}
#header .main-nav {position:absolute; top:21px; right:16px; width:20px; height:17px; background:rgba(255,255,255,.6); cursor:pointer}
#header .mina-nav .hmb-menu {position:absolute; width:20px; height:3px; background:red}

/*햄버거 메뉴*/
#header a.total {display:block; position:absolute; top:21px; right:16px; width:20px; height:17px; overflow:hidden}
#header a.total span {display:block; position:absolute; top:50%; transform:translateY(-50%); width:100%; height:3px; background:#fff; color:transparent; transition:all .5s}
#header a.total span:before, #header a.total span:after {
    content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:#fff; transition:all .5s
}
#header a.total span:before {top:-6px}
#header a.total span:after {top:6px}

#header a.total.on span {background:rgba(255,255,255,0)}
#header a.total.on span:before {top:0; transform:rotate(45deg)}
#header a.total.on span:after {top:0; transform:rotate(-45deg)}

/*메뉴 영역*/
#header .mn-nav {position:absolute; top:60px; left:0; border-top:1px solid #555; width:100%; background:#012438; box-shadow:0 3px 8px rgba(0,0,0,.6); z-index:16}
#header .mn-nav > ul {padding:12px 0}
#header .mn-nav > ul > li > a {display:block; padding:20px 26px; color:rgba(255,255,255,.8); font-size:20px; font-family:"Kukdetopokki-normal"; line-height:100%; letter-spacing:-1px}
#header .mn-nav > ul > li > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:26px}
#header .mn-nav > ul > li > a.on:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:26px}
#header .mn-nav > ul > li:nth-child(2) > a:after {display:none}
#header .mn-nav .sns-btn {border-top:1px solid #555; text-align:center}
#header .mn-nav .sns-btn i {padding:30px 12px; color:rgba(255,255,255,.7); font-size:32px; line-height:100%}

#header .mn-nav > ul ul.sub {background:#01293f}
#header .mn-nav > ul ul.sub > li > a {display:block; padding:10px 36px; color:rgba(255,255,255,.6); font-size:18px; font-weight:300; line-height:100%; letter-spacing:-1px}
#header .mn-nav > ul ul.sub > li > a:before {content:"\e91b"; font-family:"xeicon"; margin-right:6px}

/*비디오 영역*/
#visual {
    position:relative; 
    padding-bottom:56.25%; /*16:9*/
    /*padding-top:30px;*/ 
    height:0; 
    overflow:hidden
}
#video-wrap {position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1}
#video-wrap h2 {position:absolute; left:50%; bottom:70px; transform:translateX(-50%); color:rgba(255,255,255,.8); font-size:13px; font-weight:400; line-height:13px}
#video-wrap span.mouse-scroll {position:absolute; animation:scroll 1s linear infinite;
    left:50%; bottom:18px; transform:translate(-50%, 0); font-size:1px; color:transparent; width:28px; height:40px; background:url(../img/img-mouse-scroll.png)no-repeat center / 28px auto}
@keyframes scroll {
    0% {transform:translate(-50%, 2px)}
    50% {transform:translate(-50%, -2px)}
    100% {transform:translate(-50%, 2px)}
}

/*콘텐츠 영역*/
#contents {text-align:center}
#contents .cont-box1 h2.tit {padding-top:58px; font-family:"Kukdetopokki-bold"; font-size:30px; color:#292929; line-height:100%; letter-spacing:-1px}
#contents .cont-box1 img {display:inline-block; padding-top:28px; height:178px}
#contents .cont-box1 p.txt1 {padding:25px 0 28px; color:#000; font-size:16px; font-weight:300; line-height:1.6; letter-spacing:-1px}
#contents .cont-box1 p.btn {display:inline-block; padding:10px 20px; color:#002b43; font-size:14px; font-weight:500; line-height:100%; letter-spacing:-1px; border:2px solid #002b43; border-radius:3px}
#contents .cont-box1 p.btn:after {content:"\e907"; font-family:"xeicon"; margin-left:6px}

#contents .cont-box2 h2.tit {padding-top:58px; font-family:"Kukdetopokki-bold"; font-size:30px; color:#292929; line-height:100%; letter-spacing:-1px}
#contents .cont-box2 span {margin-left:6px; font-family:"Noto Sans KR"; font-size:8px; color:#fff; background:#fd464c; padding:3px 6px; border-radius:8px; vertical-align:top}
#contents .cont-box2 img {display:inline-block; padding-top:18px; height:178px}
#contents .cont-box2 p.txt1 {padding:25px 0 28px; color:#000; font-size:16px; font-weight:300; line-height:1.6; letter-spacing:-1px}
#contents .cont-box2 p.btn {display:inline-block; padding:10px 20px; color:#002b43; font-size:14px; font-weight:500; line-height:100%; letter-spacing:-1px; border:2px solid #002b43; border-radius:3px}
#contents .cont-box2 p.btn:after {content:"\e907"; font-family:"xeicon"; margin-left:6px}

#contents .cont-box3 {padding-bottom:100px}
#contents .cont-box3 h2.tit {padding-top:58px; font-family:"Kukdetopokki-bold"; font-size:30px; color:#292929; line-height:100%; letter-spacing:-1px}
#contents .cont-box3 img {display:inline-block; padding-top:28px; height:178px}
#contents .cont-box3 p.txt1 {padding:25px 0 28px; color:#000; font-size:16px; font-weight:300; line-height:1.6; letter-spacing:-1px}
#contents .cont-box3 p.btn {display:inline-block; padding:10px 20px; color:#002b43; font-size:14px; font-weight:500; line-height:100%; letter-spacing:-1px; border:2px solid #002b43; border-radius:3px}
#contents .cont-box3 p.btn:after {content:"\e907"; font-family:"xeicon"; margin-left:6px}

#contents .fonts-box {border-top:1px solid #ccc; padding-top:84px}
#contents .fonts-box h2.tit {padding-bottom:38px; font-size:24px; font-weight:300; color:#292929; line-height:100%; letter-spacing:-1px}
#contents .fonts-box h2.tit span {font-family:"Kukdetopokki-bold"; font-size:26px}
#contents .fonts-box p.btn {display:inline-block; padding:12px 38px; color:#fff; font-size:16px; font-weight:500; background:#002438; line-height:100%; letter-spacing:-1px; border-radius:3px}

#contents .event-box {padding:68px 0 114px 0}
#contents .event-box h2.tit {padding-bottom:38px; font-size:24px; font-weight:300; color:#292929; line-height:100%; letter-spacing:-1px}
#contents .event-box h2.tit span {font-family:"Kukdetopokki-bold"; font-size:26px}
#contents .event-box p.btn {display:inline-block; padding:12px 38px; color:#fff; font-size:16px; font-weight:500; background:#002438; line-height:100%; letter-spacing:-1px; border-radius:3px}

/*푸터 영역*/
#footer {border-top:1px solid #555; background:#012438; padding:26px 0; text-align:center}
#footer address {color:rgba(255,255,255,.6); font-size:14px; font-weight:500; line-height:1.8; letter-spacing:-1px}
#footer address span {letter-spacing:0}