@charset "utf-8";
/* Default */
@import url(notokr.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea {margin:0; padding:0; border:0; outline:0; background:transparent}
body, select, input, textarea {font-family:'NotoSans', "sans-serif", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움"; color:#333; font-size:13px}
ul, ol, li {list-style:none}
section, article, aside, hgroup, header, footer, nav, figure, figcaption, summary {display:block}
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal}
a, img, input, select {outline:none}
table {width:100%; border-collapse:collapse; border-spacing:0; background:#fff}
caption {display:none}
textarea {resize:none}
hr {display:none}
legend {display:none}
em, i {font-style:normal}
button {cursor:pointer; border:none; background:none}
a {text-decoration:none; cursor:pointer}
a:hover {text-decoration:underline; color:#666}
a:link, a:visited, a:active, a:hover {text-decoration:none}
a.st01 {text-decoration:underline !important; cursor:pointer; color:#e45124}
a.st01:link, a.st01:visited, a.st01:active, a.st01:hover {text-decoration:underline}
.clearfix {clear:both}
.clearfix:after {content:"."; clear:both; display:block; height:0; visibility:hidden}
.clear-both {clear:both}
.displayNone {display:none}
.clear {display:block; _display:inline-block}
input[type='text'], input[type='password'] {padding:3px; border:1px solid #a4bed4; border-image:none; color:#222; background:#fff}
input[readonly], textarea[readonly] {background-color:#f3f4f8; color:#343434}
input[disabled], textarea[disabled], select[disabled] {background-color:#eee !important; color:#777 !important}
* html .checkbox {margin-top:-2px; margin-right:0}
* html .radio {margin-top:-2px; margin-right:0}
*:first-child + html .radio {margin-top:-4px; margin-right:0}
input[type=checkbox], input[type=radio] {margin-right:3px}
*:first-child + html .checkbox {margin-top:-4px; margin-right:0}
select {padding:2px; border:1px solid #a4bed4; border-image:none; vertical-align:middle; background:#fff}
body {overflow:hidden; height:100%}
.wrapper {overflow:hidden; width:100%; min-width:1200px; height:100%}
.bg {background-image:url("../images/slide.jpg"); background-position:center; background-repeat:no-repeat; background-size:cover}
.bg-overlay {background-color:rgba(60, 72, 88, 0.3); position:absolute; top:0; right:0; left:0; bottom:0; width:100%; height:100%}
.header {overflow:visible; width:100%; height:70px; position:relative}
.header .mconts {width:1200px; height:70px; margin:0 auto}
.header .mconts h1 {float:left; margin-top:22px}
.header .mconts h1 a {display:block; overflow:hidden; width:212px; height:46px; background:url("../images/top-logo.png") no-repeat; font-size:0}
.content {overflow:hidden; position:relative; width:100%; min-height:400px; height:auto}
.mainSlide {position:relative; width:1200px; height:892px; margin:0 auto; overflow:hidden; top:40px}
.container {width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:left}
.container h1 {font-size:50px; background:linear-gradient(to right, rgb(255 255 255), rgb(255 255 255), rgb(241 238 238), rgb(255 255 255), rgba(0, 0, 0, 0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:h1anim 4s linear forwards; background-size:500% auto; display:inline-block; background-position:150% center; background-repeat:no-repeat; margin:20px 0; color:#fff}
.container h2 {font-size:20px; background:linear-gradient(to right, rgb(255 255 255), rgb(255 255 255), rgb(241 238 238), rgb(255 255 255), rgba(0, 0, 0, 0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:h1anim 8s linear forwards; background-size:500% auto; display:inline-block; background-position:150% center; background-repeat:no-repeat; margin:15px 0; letter-spacing:-1px; color:#fff}
.container h2 span {font-size:16px}
.container h3 {font-size:28px; background:linear-gradient(to right, rgb(255 255 255), rgb(255 255 255), rgb(241 238 238), rgb(255 255 255), rgba(0, 0, 0, 0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:h1anim 12s linear forwards; background-size:500% auto; display:inline-block; background-position:150% center; background-repeat:no-repeat; margin:15px 0; letter-spacing:-1px; line-height:27px; color:#fff}
.container h3 span {font-size:16px}
@keyframes h1anim {from {background-position:150% center}
 to {background-position:0 center}}
.innoList {position:absolute; top:350px; width:100%}
.innoList ul {display:block; height:196px; width:100%}
.innoList ul li {float:left; width:24%; margin:0 1.2% 0 0; box-sizing:border-box; background:rgba(1, 27, 53, 0.45); padding:40px 13px; border:5px solid #e8e8e8; position: relative; left: 10%;}
.innoList ul li:last-child {margin:0}
.innoList ul li h5 {color:#fff; font-size:30px; margin-bottom:10px}
.innoList ul li h5 small {font-weight:500}
.innoList ul li p {color:#fff; letter-spacing:-1px; margin-bottom:10px; font-size:0.875rem}
.innoList ul li .btnWrap {width:100%; display:flex; justify-content:space-between}
.innoList ul li a {color:#fff; padding:5px; width:43%; align-content:flex-end; text-align:center}
.innoList ul li a:after {display:inline-block; content:""; color:#fff; width:5px; height:9px; margin-left:10px; margin-top:4px; background:url("../images/icon_arrow_right.png") no-repeat}
.innoList ul li a:hover {background:#fff; color:#000}
.innoList ul li a:hover:after {display:inline-block; content:""; color:#fff; width:5px; height:9px; margin-left:10px; margin-top:4px; background:url("../images/icon_arrow_right2.png") no-repeat}
.innoList ul li .goSite {background:rgba(0, 66, 144, 0.5); border:1px solid #0d3b71}
.innoList ul li .goSite:hover {background:#fff; border:1px solid #fff; color:#000}
.innoList ul li .goInfo {background:rgba(0, 144, 128, 0.5); border:1px solid #086862}
.innoList ul li .goInfo:hover {background:#fff; border:1px solid #fff; color:#000}
/* modal */
.modal {display:none; position:fixed; z-index:1; padding-top:100px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.4)}
.popup_close {float:right !important; right:0; padding:0 !important}
.popup_title_area {position:relative; height:46px; background:#215ca9}
.popup_title_area p {float:left; padding:9px 0 0 16px; margin:0 0 0 0; font-size:19px; font-weight:bold; color:#fff; line-height:25px}
.compWrap {position:relative; padding:30px 20px 10px;margin-bottom:20px; width:95%; height:560px; overflow-y:auto}
.compWrap-s {position:relative; padding:40px 20px 10px;margin-bottom:20px; width:90%; height:220px; overflow-y:auto; text-align:center}
.compWrap-t {position:relative; padding:15px 20px 5px;margin-bottom:10px; width:90%; height:240px; overflow-y:auto; text-align:center; word-break:keep-all}
.txt-ready {font-size:18px; margin-top:10px; font-weight:600; color:#333}
.txt-info {font-size:14px; margin-top:10px; font-weight:500; color:#333; letter-spacing:-.5px}
.compWrap .sTitle {margin-top:-3px}
.sTitle {color:#393939; font-size:20px; font-weight:600; line-height:22px}
.line-bottom {border-bottom:1px solid #e3e3e3}
.dotConList {margin-top:12px; margin-bottom:20px; padding-bottom:10px}
.dotConList li {margin-top:3px; padding-left:14px; line-height:22px; position:relative; margin-left:5px; font-size:15px}
.dotConList li:before {content:''; display:block; position:absolute; left:0; top:7px; width:4px; height:4px; border:2px solid #215ca9; border-radius:50%; box-sizing:border-box}
.dotConList li:first-child {margin-top:1px}
.lineConList {margin:7px 0 8px}
.lineConList p {margin:0; padding:0 0 0 16px; font-size:14px; line-height:24px; color:#555; font-weight:300; position:relative}
.lineConList p:before {content:""; width:6px; height:2px; position:absolute; top:10px; left:0; border-radius:4px; background:#787878}
.img-bg {border:8px solid #eaeaea; padding:10px}
[id^=modal] {display:none; position:fixed; top:0; left:0}
[id^=modal]:target {display:block}
.popup {width:100%; height:100%; z-index:99999}
.popup__overlay {position:fixed; z-index:1; display:block; top:0; left:0; height:100%; width:100%; background:#000000b3}
.popup__wrapper {position:absolute; width:960px; height:690px;z-index:9;border-radius:8px; background:#fff; padding:0}
.popup__wrapper-s {position:absolute; width:400px; height:320px;z-index:9;border-radius:8px; background:#fff; padding:0}
.popup__close {position:absolute; top:16px; right:26px}
.layer_bg {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.7); left:0; top:0}