@charset "utf-8";

@font-face {
    font-family: 'notokr';
    src: url('../webfont/notokr-regular.eot');
    src: url('../webfont/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('../webfont/notokr-regular.woff2') format('woff2'),
         url('../webfont/notokr-regular.woff') format('woff'),
         url('../webfont/notokr-regular.ttf') format('truetype'),
         url('../webfont/notokr-regular.svg#notokr-regular') format('svg');
    font-style: normal;
}
@font-face {
    font-family: 'notokr';
    src: url('../webfont/notokr-medium.eot');
    src: url('../webfont/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('../webfont/notokr-medium.woff2') format('woff2'),
         url('../webfont/notokr-medium.woff') format('woff'),
         url('../webfont/notokr-medium.ttf') format('truetype'),
         url('../webfont/notokr-medium.svg#notokr-medium') format('svg');
    font-weight: 700;
    font-style: normal;
}


/********************   초기화   ********************/
/** Eric Meyer's Reset css v2.0 (http://meyerweb.com/eric/tools/css/reset/) **/ 
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, en, 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, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; } 

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } 
ul,ol { list-style:none; } 
blockquote, q { quotes:none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ""; content:none; } 
table { border-spacing:0; border-collapse:collapse; }

/* 초기화 추가 */ 
img { margin:0; vertical-align: middle; } 
fieldset, img, iframe { border:0; } 
h1, h2, h3, h4, h5, h6 { font-style:normal; }
hr { display:block; margin:1em 0; padding:0; height:1px; border:0; border-top:1px solid #ccc; }
address, caption, cite, code, dfn, em, var { font-style:normal; font-weight:normal; }

audio, canvas, video { display:inline-block; }
audio:not([controls]) { display:none; height: 0; }
audio, canvas, img, video { vertical-align:middle; }

legend,.hidden { overflow:hidden; width: 0; height:0; font-size:0; line-height:0; }
a { color:#666; text-decoration:none; } 
a:hover { color:#333; } 
a:active, a:hover, a:focus { text-decoration:none; }

input, textarea, button { margin:0; border:0; vertical-align:middle; outline: none; }
input, selectbox, textarea { line-height:1.2; vertical-align:middle; }

button, selectbox { text-transform:none; }
button, input { line-height:normal; }

textarea { resize:vertical; overflow:auto; }

iframe { outline: none; } 
input[type=text]::-ms-clear, input[type=password]::-ms-clear { display:none; } 
legend { display:none; visibility:hidden; }  /* Screen Reader */

a[href], input[type='submit'], input[type='image'], input[type='button'], label[for], label, button, pointer { cursor: pointer; }

* { box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}

img { image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden; }

/********************   CSS Document   ********************/
html { overflow-y:scroll; font-size:10px; }
body { color:#545454; font-family:notokr, roboto, sans-serif; font-size:1.4rem; line-height:1.5; letter-spacing: -0.5px; word-break: keep-all; } 

@media screen and (max-width:480px){
html { font-size:9px; }
}


.wrap { position: relative; width: 100%; }
#content { outline: none; }

.skip a { display:block; height:0; overflow:hidden; }
.skip a:active, .skip a:focus { position:relative; top:auto; font-size:1.6rem; width: 100%; height: 30px; background:#000; color: #fff; text-align: center; font-weight:700; line-height: 30px; }
.skip a:focus { border: 1px solid #fff; outline:1px solid #fff; }

.clearfix { *zoom:1; }
.clearfix a:focus { display:inline-block;}/*  border:1px solid #000; outline: 1px solid #000; */
.clearfix:after { display: block; clear: both; content: ""; }

/* Text */
.txt-blue { color:#3A70D0; font-weight: 700; }
.txt-blue2 { color:#3966C8; font-weight: 700; }
.txt-cyan { color:#007DB3; font-weight: 700; }
.txt-red { color:#E70F68; font-weight: 700; }
.txt-green { color:#0B775D; }
.txt-coral { color:#CC221A; }
.txt-skyblue { color:#0F709B; }

.i-required { margin-right: 5px; color:#E70F68; font-weight: 700; vertical-align: middle;}
.i-blank { display: inline-block; width: 12px; }
@media screen and (max-width:1280px){
    .i-blank { display: none; }
}

.blank { display: inline-block; width: 12px; }
@media screen and (max-width:660px){
    .blank { display: block; }
}


.fw700 { font-weight: 700; }

.fs16 { font-size:1.6rem!important; }
.fs18 { font-size:1.8rem!important; }
.fs2 { font-size:2rem!important; }

.align-c { text-align: center; }


/* Common */
.relative { position: relative; }

.fl { float: left; }
.fr { float: right; }

.overflow-x { overflow-x: auto; }

.ellipsis { overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap; }


.btn-container-r { width:100%; vertical-align:middle; text-align:right; } 
.btn-container-c { width:100%; vertical-align:middle; text-align:center; }

.mt0 { margin-top:0px!important; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px!important; }


.mb0 { margin-bottom:0px!important; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }

.ml0 { margin-left:0px!important; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml31 { margin-left: 31px; }

.mr5 { margin-right: 50px; }
.mr20 { margin-right: 20px; }

.pt50 { padding-top: 50px; }

.w10 { width:10%; }
.w15 { width:15%; }
.w20 { width:20%; }
.w30 { width:30%; }
.w35 { width:35%; }
.w40 { width:40%; }
.w49 { width:49%; }
.w50 { width:50%!important; }
.w60 { width:60%; }
.w70 { width:70%; }
.w74 { width:74%; }
.w80 { width:80%; }
.w100 { width: 100%; }

.img-w100 { width:100%; }

@media screen and (max-width:480px){
    .block { display: block; }
}

.flex-c { display: flex; align-items: center; justify-content: center; }

.linkbox { display: inline-block; margin-left: 30px; padding: 1rem 5.5rem 1rem 2rem ; border: 1px solid #2f7de9; background:#f5f9fc url(../images/i_link.png) 92% center no-repeat; background-size:17px; color: #086efb; font-size:1.6rem; }
.linkbox:hover { background:#fff url(../images/i_link.png) 92% center no-repeat; background-size:17px; color: #086efb; }

/* Text sound only */
.txt-sound {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/*
*:focus {outline-width:2px !important;outline-style:dotted;outline-color: 000 !important;outline-offset:0 !important;}
*/
.hidden { position: relative; display: inline-block; overflow: hidden; z-index: -1; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }


/********************  Button   ********************/
button { display:inline-block; margin:0;  border:none;  transition:border-color .3s ease, background-color .3s ease, color .3s ease; }
button > img { margin-right:5px; vertical-align:middle; }
/*
button:focus { border:2px dotted #000!important; }
*/
.btn-main { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#777; border:1px solid #777; border-radius:3px; color: #fff; text-align:center; line-height:45px; font-size:1.4rem; vertical-align:middle;  }
.btn-main:hover { border:1px solid #444; background-color:#444; }

.btn-mainline { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#fff; border:1px solid #bbb; border-radius:3px; color:#666; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; } 
.btn-mainline:hover { background-color:#fff; border:1px solid #0077cb; }

.btn-formlogin { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#258197; border:1px solid #258197; border-radius:3px; color: #fff; text-align:center; line-height:45px; font-size:1.4rem; vertical-align:middle;  }
.btn-formlogin:hover { border:1px solid #1198b9; background-color:#1198b9; }

.btn-formotp { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#448dd9; border:1px solid #448dd9; border-radius:3px; color: #fff; text-align:center; line-height:45px; font-size:1.4rem; vertical-align:middle;  }
.btn-formotp:hover { border:1px solid #489af0; background-color:#489af0; }


.btn-gray { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#bbb; border:1px solid #bbb; border-radius:3px; color:#fff; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; } 
.btn-gray:hover { border:1px solid #0077cb; background-color:#0077cb; }
.btn-gray:focus { border:2px dotted #000!important; }

.btn-redline { margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#fff; border:1px solid #E70F68; border-radius:3px; color:#E70F68; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; } 
.btn-redline:hover { border:1px solid rgb(255, 25, 211); background-color:#fff; }

.btn-top { position: fixed; right: 30px; bottom: 30px; z-index:9999; display: inline-block; padding-top:10px; width:56px; height:56px; background: #777; border-radius: 60px; border: 1px solid #444; color:#fff; font-size:1.3rem; line-height: 12px; letter-spacing: -0.25px; text-align: center;transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; box-shadow:0 0 8px #6d8afd; }
.btn-top:hover { cursor: pointer; /*background: #2f7de9;*/background: #666; color:#fff; }
.btn-top:active { /*background-color: #2f7de9;*/background-color: #555; }
.btn-top.show { opacity:1;  visibility: visible; }
.btn-top:focus { /*border-color: #6d8afd;*/border-color: #444; }
/*@media  all and (max-width:480px) { 
    .btn-top { display: none; }
}*/

.btn-search { padding: 0 15px; min-width:80px; height:45px; /*background: #004aaa;*/background: #666; color: #fff; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; }
.btn-search > img { margin-top: -5px; width:18px; }
.btn-search:hover { /*background:#003b88;*/background:#444; }

.btn-excel { padding: 0 15px; min-width:80px; height:45px; background: #16884E; color: #fff; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; }
.btn-excel > img { margin-top: -5px; width:18px; }
.btn-excel:hover { background:#16884E; }

.btn-reset { padding: 0 15px; min-width:80px; height:45px; background: #0077cb; color: #fff; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; }
.btn-reset:hover { background:#2f7de9; }

.btn-regist {  display:inline-block; margin: 0 3px; padding: 0 15px; min-width:80px; height:45px; background-color:#fff; border:1px solid #bbb; border-radius:3px; color:#666; line-height:45px; font-size:1.4rem; vertical-align:middle; text-align:center; transition:border-color .3s ease, background-color .3s ease, color .3s ease; } 
.btn-regist:hover { background-color:#fff; border:1px solid #0077cb; }

.btn-pop-blue { display:inline-block;  margin: 0 3px; padding: 0 30px; min-width:80px; height:45px; background-color:#0077cb; border:1px solid #0077cb; border-radius:3px; color: #fff; text-align:center; line-height:45px; font-size:1.4rem; vertical-align:middle; transition:border-color .3s ease, background-color .3s ease, color .3s ease; } 
.btn-pop-blue:hover { color: #fff;  border:1px solid #00a9e0; background-color:#00a9e0; }

.btn-pop-gray { display:inline-block;  margin: 0 3px; padding: 0 30px; min-width:80px; height:45px; background-color:#555; border:1px solid #555; border-radius:3px; color: #fff; text-align:center; line-height:45px; font-size:1.4rem; vertical-align:middle; transition:border-color .3s ease, background-color .3s ease, color .3s ease; } 
.btn-pop-gray:hover { color: #fff; border:1px solid #000; background-color:#000; }


/********************   Form   ********************/ /* 전체 높이 10px확장 */
.set { position:relative; display:inline-block; box-sizing:border-box; padding:0; vertical-align:middle; } /* form 요소끼리 그룹지어 주는 경우 class="set"사용 */

select { margin: 0 1px; padding:0 25px 1px 10px; height:45px; border:1px solid #cdcdcd; background:#fff url(../images/i_select.gif) no-repeat right center; color:#333; vertical-align:middle; font-size:1.6rem; font-family:notokr, roboto, sans-serif; -ms-appearance:none; -webkit-appearance:none; appearance:none; } 
select::-ms-expand { display:none; } 
select:disabled { border:1px solid #dedfe0; background:#fff url(../images/i_select_dis.gif) no-repeat right center; background-color:#f6f6f6; color:#999; }

input[type="text"], input[type="password"] { box-sizing: border-box; margin: 0 1px; padding:0 10px 2px 10px; height:45px; border:1px solid #cdcdcd; color:#333; vertical-align: middle; font-size:1.6rem; font-family:notokr, roboto, sans-serif; transition: all 0.3s ease-in-out; } 

input[type="image"] { margin:0; padding:0; border:0; vertical-align:middle; }
input[type="text"]:read-only { border: 0; }
input[type="text"]:disabled { background-color:#f6f6f6; border:1px solid #cdcdcd; color:#999; }
/*
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="search"]:focus, 
select:focus { border:1px solid #666; background-color:#fff; }
*/
textarea { overflow-y:auto; padding:3px 0 2px 10px; border:1px solid #cdcdcd; color:#333; vertical-align:middle; text-align:left; font-size:1.6rem; font-family:notokr, roboto, sans-serif; line-height:16px; transition:all 0.3s ease-in-out; } 
textarea:focus { border-color:#666; background-color:#fff; }
textarea:disabled { background-color:#f6f6f6; border:1px solid #cdcdcd; color:#999; }

input:input-placeholder, 
textarea:input-placeholder { color: #999; } 
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #999; } 
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder { color: #999; }

input[type="checkbox"] { width: 20px; height: 20px; vertical-align: text-top; }
input[type="checkbox"] + label { margin-left: 10px; color: #666;  } 

input[type="radio"] { width: 20px; height: 20px; vertical-align: text-top; }
input[type="radio"] + label { margin-left: 10px; color: #666; } 

/********************   Header   ********************/
.header-wrap { position: fixed; top:0; width: 100%; height: 100px;  z-index: 999; background: #fff; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.2); }

/* info */
.header-wrap .info { position: relative; display: inline-block; z-index: 9999; color:#555; font-size:1.6rem; line-height: 40px; }
    .header-wrap .info .user { margin-right: 5px; color: #3A70D0; font-weight: 700; }

@media only screen and (min-width: 1200px) {
    .header-wrap .info i { display: none; }
    .header-wrap .slide-down { display: none; }  
}

@media only screen and (max-width: 1199px) {
    .header-wrap .hide { display: none; }
    
    .header-wrap .info i { color: #3A70D0; font-size:1.4rem; }
    
    .slide-down { position: absolute; max-height: 0; overflow: hidden;}
    .slide-down.toggled-div { padding:5px 20px; max-height: 200px; width:400px; background: #fff; border:1px solid #b7b7b7; border-radius: 4px; box-shadow: 0 6px 12px rgb(0 0 0 / 18%); }
    .js-slide-down { display: none; }
}
@media only screen and (max-width:1024px) {
    .header-wrap .info { display: none; }
}

/* info-m */
.header-wrap .gnb-wrap .info-m { margin: 5%; color: #d3dfed; font-size:1.6rem; font-weight: 400!important; }
.header-wrap .gnb-wrap .info-m i { margin-right:5px; }
.header-wrap .gnb-wrap .info-m .user { margin-bottom: 5px; }

/* gnb */
.header-wrap .header-container { position: relative; margin:0 auto; max-width: 1300px; width:100%; background: #fff; *zoom:1; }
.header-wrap .header-container .gnb { position:relative; float:right; }
.header-wrap .header-container .gnb li { float:left; color:#555; font-size:1.6rem; line-height: 40px; }
.header-wrap .header-container .gnb li:after { display:inline-block; content: ""; margin:0 17px; width:1px; height:14px; background: #b7b7b7; line-height: 40px; }
.header-wrap .header-container .gnb li:last-child:after { display:none; }
.header-wrap .header-container .gnb li:nth-last-child(2):after { display:none; }
.header-wrap .header-container .gnb li a { display: inline-block; color:#555; line-height: 40px; }
.header-wrap .header-container .gnb li>span { margin:0 17px 0 50px;}
.header-wrap .header-container .gnb li .zoom-default { margin: 0 10px; }
.header-wrap .header-container .gnb li a.zoom-plus { width:16px; height:18px; background: url(../images/btn_plus.png) 0 0 no-repeat; border:0; vertical-align:middle; text-indent: 100%; overflow: hidden; white-space: nowrap; cursor: pointer; }
.header-wrap .header-container .gnb li a.zoom-minus { width:16px; height:18px; background: url(../images/btn_minus.png) 0 0 no-repeat; border:0;  vertical-align:middle; text-indent: 100%; overflow: hidden; white-space: nowrap; cursor: pointer; }

@media only screen and (max-width: 1400px) {
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .logo-p { margin-left: 20px;}
    .header-wrap .header-container .gnb  { margin-right:30px;}
    .header-wrap .info { margin-left: 30px; }
}

@media only screen and (min-width: 1025px) {
    .nav-m {display: none; }
    .nav-toggle {display: none; }
    .logo-m {display: none; }
    
    .header-wrap .gnb-wrap { width:100%; height:60px; /*background: #236ec4;*/ background-size: contain; }
    .header-wrap .gnb-wrap .nav-wrap-p { position:relative; margin:0 auto; padding: 0; max-width:1180px; height:60px; }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p { position:relative; top:-24px; }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .logo-p { float: left; }

    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul { position: absolute; left:0; z-index: 999;  margin-left: 401px; width:calc(100% - 401px); color:#fff;  }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul:hover:after, 
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul:focus:after,
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul.active:after { border:1px; content:""; display:block; position:absolute; z-index:10; width:4000px; /*height:470px;*/height:200px; top:60px; left:50%; margin-left:-2000px;  background: #fff ; box-shadow:0 8px 4px -4px rgba(0, 0, 0, 0.3); transition: all 0.25s ease; }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul > li { position:relative; float:left; width:20%; }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul > li > a { position:relative; display:block; font-size:1.6rem; font-weight:400; /*color:#fff;*/ text-align:center; line-height:58px; }
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul > li > a:before { position: absolute; bottom:-20px; left: 50%; content: ''; transition:all 0.5s; opacity: 0; 
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;    
        }  
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul > li:hover > a:before,
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul > li:hover > a:after { bottom:-2px; opacity: 1; }

    /* mega-col-ul - 2단 */  
    .header-wrap .gnb-wrap .nav-wrap-p .nav-p .gnb-ul .mega-col-ul { display:none; position:absolute; top:48px; z-index:15; width:100%; height:150px; padding:20px 15px 10px; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul:hover .mega-col-ul, 
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul:focus .mega-col-ul,
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul.active .mega-col-ul { display:block; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li:first-child > ul { border-left:0; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul { border-left:1px solid #ddd; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul > li > h3 { text-align:center; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul > li > h3 > a { color: #5157ca;  font-size:1.8rem; font-weight:700; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul .menu-ul > li > a { display:block; padding:3px 0; font-size:1.6rem; text-align:center; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul .menu-ul > li > a:hover { text-decoration:none; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-col-ul > li.line:before { content:''; display:block; margin: 20px auto; width:10%; height:2px; background:#6f8dff; }

    /* mega-sub-ul - 1단 */
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul .mega-sub-ul { display:none; position:absolute; top:49px; z-index:15; width:100%; height:150px; padding:20px 0 10px; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul:hover .mega-sub-ul, 
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul:focus .mega-sub-ul,
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul.active .mega-sub-ul { display:block; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-sub-ul { padding: 20px 15px; border-left:1px solid #fff; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-sub-ul > li > a { display:block; padding:3px 0; font-size:1.4rem; text-align:center; }
    .header-wrap .gnb-wrap .nav-wrap-p .gnb-ul > li .mega-sub-ul > li > a:hover { text-decoration:none; } 
}

@media  all and (max-width:1024px) {
    
    .header-wrap .header-container .gnb { display:none; }
	.nav-p{ display:none; }
    
    .header-wrap { height: 60px; box-shadow: none;  }
    .header-wrap .gnb-wrap { padding: 0; height:60px; }
    .header-wrap .gnb-wrap .nav-wrap-m { position: relative; top:-24px; height: 60px; background: #fff; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.4); }
    .logo-m { display: inline-block; margin-top:12px; color: #333; font-size: 2.2rem; font-weight: 700; }
    
    /* nav-toggle */
    .nav-toggle { margin:-10px 14px 0 2%; padding:14px 0 16px; width:35px; height: 60px; background:none; cursor: pointer; }
    .nav-toggle span { text-indent:-9999px; }
    .nav-toggle span,
    .nav-toggle span:before,
    .nav-toggle span:after { position: absolute; display: block; content: ""; width: 35px; height: 3px; border-radius: 1px; border-color:#fff;  background: #000; cursor: pointer; }
    .nav-toggle span:before { top: -10px; }
    .nav-toggle span:after { bottom: -10px; }

    .nav-toggle span,
    .nav-toggle span:before,
    .nav-toggle span:after { transition: all 300ms ease-in-out; }

    .nav-toggle.active span { background-color: transparent; }

    .nav-toggle.active span:before,
    .nav-toggle.active span:after { top: 0; }
    .nav-toggle.active span:before { transform: rotate(45deg); }
    .nav-toggle.active span:after { top: 10px; transform: translatey(-10px) rotate(-45deg); }
    
    /* nav-m */  
    .nav-m { position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; margin: 0; width:60%; background:#515481; border-color: rgba(100%, 100%, 100%, 0.3); font-size:1.8rem; transform:translateX(-110%); box-shadow:3px 1px 3px 0px rgba(0, 0, 0, 0.3);}
    .nav-m.active { transform:translateX(0); transition:all .2s ease-out; }

    .nav-m .header-m  { position:fixed; padding-left:10px; width: 100%; height:60px; background: #fff; } 
    .nav-m .gnb-container { margin-top:60px; height:calc( 100vh - 60px); overflow-y:auto; }
    /* link-ul */
    .nav-m .gnb-container .link-ul { display:flex; flex-wrap:nowrap; width: 100%; border-bottom: 1px solid rgba(100%, 100%, 100%, 0.2); }
    .nav-m .gnb-container .link-ul li { display:inline-block; width:33.333%; background: rgba(100%, 100%, 100%, 0.1); border-right: 1px solid rgba(100%, 100%, 100%, 0.2); text-align: center; }
    .nav-m .gnb-container .link-ul li > a { padding:10px 5px; height:50px; line-height: 50px; font-size:1.8rem; color: #fff; }
    .nav-m .gnb-container .link-ul li:last-child { border-right:0; }
    
    /* gnb-ul-m */
    .nav-m .gnb-container .gnb-ul-m > li { position:relative; }
    .nav-m .gnb-container .gnb-ul-m > li > a { position:relative; display:block; color: #fff;  }
    .nav-m .gnb-container .gnb-ul-m > li:first-child { border-top:1px solid rgba(100%, 100%, 100%, 0.6);}
    .nav-m .gnb-container .gnb-ul-m > li:last-child::after { display: block; content: ""; width: 100%; }
    .gnb-ul-m .menu-title { position: relative; display: block; padding:8px 4% 12px; border-bottom:1px solid rgba(153, 153, 153, 0.3); transition: all 0.4s ease; cursor: pointer; }
    .gnb-ul-m .menu-title > a { color:#fff; font-size:1.6rem; font-weight:400; }

    .gnb-ul-m li i { position: absolute; top:19px; right:0; color: #fff; font-size:1.8rem; transition: all 0.4s ease;  }
    .gnb-ul-m li i.xi-angle-down { right:4%; left: auto; font-size:1.6rem; }
    .gnb-ul-m li.open .menu-title { color: #fff; }
    .gnb-ul-m li.open i { color: #fff; }
    .gnb-ul-m li.open i.xi-angle-down { transform: rotate(180deg); }
    .gnb-ul-m li.default .menu-ul {display: block;}
    
    .gnb-ul-m .menu-ul { display: none; background: #fff; font-size:1.6rem; font-weight: 400; }
    .gnb-ul-m .menu-ul > li > h3 { padding: 12px 4% 14px; color: #555; font-size:1.6rem; font-weight: 400; }
    .gnb-ul-m .menu-ul .sub-ul { padding: 14px 0 14px 4%; background: #eff4fa; color: #666; }
    .gnb-ul-m .menu-ul .sub-ul li a { display:inline-block; padding:5px 0; color: #666; text-decoration: none; }/*transition: all 0.25s ease; */
    .gnb-ul-m .menu-ul .sub-ul a:before { content: "-"; margin-right:5px; }
    .gnb-ul-m .menu-ul .sub-ul a:hover { color: #194bb3; font-weight:700; }
    .gnb-ul-m .menu-ul .sub-ul a.active { color: #194bb3; font-weight:700; }
    
}

@media  all and (max-width:768px) {
    .nav-m { width: 70%; }
}

@media  all and (max-width:480px) {    
    .header-wrap .gnb-wrap .nav-wrap-m { position: relative; top:-21px; }    
    .nav-toggle { margin:-7px 14px 0 2%; }
    .logo-m { margin-top:14px; }
    .nav-m { width:90%; }
}

@media  all and (max-width:320px) {
    .nav-toggle { margin:-7px 7px 0 2%; }    
    .logo-m { font-size: 2.2rem; }
}

@media  all and (max-width:280px) {
    .nav-m { width:100%; }
    .logo-m { font-size: 2.1rem; }
}


/********************   Sub Layout   ********************/
.sub-wrap { position: relative; display: flex; flex-direction: row; flex-wrap: wrap;  align-items: stretch; align-content: stretch; margin: 130px auto 0; padding: 0; max-width: 1300px; *zoom:1; }/*justify-content: space-between;*/
.sub-wrap:after { display: block; clear: both; content: ""; }

@media only screen and (max-width:1400px) {
.sub-wrap { padding: 0 20px; width: 100%; max-width: 1300px; }
}

.sub-wrap .content-article { padding:0 0 0 1%; width: 64%; background:#fff; font-size:1.6rem; line-height:1.4em; font-family:notokr, roboto, sans-serif; }
.sub-header { position:relative; min-height: 40px; height:auto; background: url(../images/bg_subheader.png) 0 bottom repeat-x; }
.sub-header > h1 { position: absolute; bottom:45px; color: #333; font-size:2.4rem; font-weight:800; line-height: 1;  }
.sub-header .historypath-ul { position: absolute; right: 0; bottom:0; padding-bottom: 20px; font-family:notokr, roboto, sans-serif; font-size:1.6rem; }
.sub-header .historypath-ul > li { display: inline-block; color:#747474; word-break: keep-all; line-height: 1.5em; }
.sub-header .historypath-ul > li > i { color:#ccc; font-size:1em; margin:0 5px;}

/* 통합로그인 */
.sub-header.unify { min-height: 100px; } 
.sub-header.unify  > h1 { bottom:20px; }

@media all and (max-width:1024px){    
    .sub-wrap { margin:60px auto 0; padding: 0; }
	.sub-wrap .content-article { /*padding: 0 30px;*/padding: 0px; flex-basis: 100%; width: 100%; }
    
    .sub-header { min-height: auto; background:none; }
    .sub-header > h1 { position: relative; margin-top:73px; display:block; min-width: 100%; }
    .sub-header .historypath-ul { position: relative; margin-top:15px; display:block; /*padding-bottom:40px;*/ min-width: 100%; background: url(../images/bg_subheader.png) 0 bottom repeat-x;  }
    
    /* 통합로그인 */
    .sub-header.unify { min-height: auto; }
    .sub-header.unify > h1 { margin-top:0px;  }
    .sub-header.unify .historypath-ul { margin-top:-10px; padding-bottom:30px; }
}

@media all and (max-width:480px){
	.sub-wrap .content-article { padding:0 2px; }/*padding:0 30px; font-size:1.3rem; */
.sub-header > h1 { letter-spacing: -1px; }
}
@media all and (max-width:320px){
	.sub-wrap .content-article { padding:0 20px; }
}
@media all and (max-width:280px){
    .sub-wrap .content-article { padding:0 10px; }
}

.sub-wrap .content-article .content-wrap { position: relative; border: 1px solid rgba(0, 0, 0, 0);/* rgba(0, 0, 0, 0)*/ }

/********************   RNB   ********************/
.sub-wrap .rnb-wrap { padding: 0 0 0 1%; max-width: 255px; width:20%; }/* position: relative; z-index:10;*/

@media all and (max-width:1024px){    
	.sub-wrap .rnb-wrap { display:none; }
}

/********************   LNB   ********************/
.sub-wrap .lnb-wrap { padding: 0; max-width: 255px; width:16%; }/* position: relative; z-index:10;*/

@media all and (max-width:1024px){    
	.sub-wrap .lnb-wrap { display:none; }
}

.sub-wrap .lnb-wrap h1.lnb-title { max-width: 255px; width:100%; height: 70px; /*background: #515481;*/background: #444; color: #fff; font-size:3.2rem; font-weight:400; text-align: center; line-height: 70px;}

.lnb-ul { width: 100%; border-right: 1px solid #ddd;  border-left: 1px solid #ddd; }
.lnb-ul li { border-bottom: 1px solid #ddd; }
.lnb-ul .lnbsub-title { position: relative; display: block; padding: 16px 15px 16px 15px;  color:#555; font-size:1.4rem; font-weight:400; transition: all 0.4s ease; cursor: pointer; }
.lnb-ul .lnbsub-title a.active { color: #194bb3; font-weight:700; }
.lnb-ul li:last-child .lnbsub-title { border-bottom: 0; }
.lnb-ul li i { position: absolute; top: 16px; left: 12px; color: #595959; font-size:1.8rem; transition: all 0.4s ease; }
.lnb-ul li i.xi-angle-down { right: 12px; left: auto; font-size:1.6rem; }
.lnb-ul li i.xi-angle-right { right: 12px; left: auto; font-size:1.6rem; }
.lnb-ul li.open .lnbsub-title { color: #555; }
.lnb-ul li.open i { color: #00c0b0; }
.lnb-ul li.open i.xi-angle-down { transform: rotate(180deg); }
.lnb-ul li.default .lnbsub-ul {display: block;}
.lnbsub-ul { display: none; /*padding:18px 15px 18px 0;*/ /*background: #eff4fa;*/ font-size:1.6rem; }
.lnbsub-ul li { border-bottom:0; }
.lnbsub-ul a { display: block; padding:7px 15px; color: #666; text-decoration: none; }/*transition: all 0.25s ease; */
.lnbsub-ul a.menu:before { content: "-"; margin-right:5px; }
.lnbsub-ul a:before { content: "*"; margin-right:5px; }
.lnbsub-ul a:hover { color: #194bb3; font-weight:700; }
.lnbsub-ul a.active { color: #194bb3; font-weight:700; }
.rnb-wrap .lnb-ul { box-sizing: border-box; overflow: hidden; }
.rnb-wrap .lnbsub-title a,
.rnb-wrap .lnbsub-ul a {
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
}


/********************   Footer   ********************/
.footer-wrap { /*margin-top:50px;*/ padding: 0; width: 100%; font-family:notokr, roboto, sans-serif; }
.footer-wrap:after { display: block; visibility: hidden; clear: both; content: ""; }
.footer-wrap .footer-container { position: relative; overflow:visible; margin: 0px auto;  max-width: 1400px; *zoom:1; }
.footer-wrap .footer-container:after { display: block; clear: both; content: ""; }

.footer-wrap .footlink-wrap { position: relative; padding:13px 0; background: #ebedef; }
.footer-wrap .footlink-wrap.line { padding:0; }
.footer-wrap .footlink-wrap .link { float: left; width: 40%; }
.footer-wrap .footlink-wrap .link:last-child { width: 60%; text-align: right; }
.footer-wrap .footlink-wrap .link a { padding:5px 0; color: #555; font-size:1.6rem; word-break: keep-all; line-height:2em; }
.footer-wrap .footlink-wrap .link a:after { display:inline-block; content: ""; margin:0 15px; width: 1px; height:20px; background:#b1b2b4; vertical-align:middle; }
.footer-wrap .footlink-wrap .link:first-child a:first-child:after { margin:0 40px; }
.footer-wrap .footlink-wrap .link a:last-child { border-right: none; }
.footer-wrap .footlink-wrap .link a:last-child:after { display:none; }
.footer-wrap .footlink-wrap .link a > img { margin-top: -5px; margin-right: 10px; width: 32px; }
.footer-wrap .footlink-wrap .link a:hover { color: #2f7de9; }
.footer-wrap .address-wrap { position: relative; background:#fff; font-size:1.6rem; }
.footer-wrap .address-wrap .mark { position: absolute; top:30px; right: 220px; vertical-align: middle; }
.footer-wrap .address-wrap .mark > img { width: 90px; }
.footer-wrap .address-wrap .selectbox { position: absolute; top: 0; right: 0; margin-top:40px; text-align: left; }
/*.footer-wrap .address-wrap .selectbox select { padding: 5px 10px; width: 160px; border: 1px solid #6e7278; color: #fff; }*/
.footer-wrap .address { display: inline-block; padding:33px 0 40px 73px; background: url(../images/logo_me.png) 0 45% no-repeat; background-size:42px; color: #666; font-size:1.6rem; line-height: 20px; }
.footer-wrap .address > .line:before { display:inline-block; content: ""; margin:0 10px; width: 1px; height:15px; background:#b1b2b4; vertical-align:middle; }

.sitelink { position: relative; width: 200px; float: right; }
.sitelink > a { display: block; height: 36px; background-color: #fff; border: 1px solid #cecece; border-radius:6px; color: #555; line-height: 34px; text-indent: 10px;  font-size:1.4rem; }
.sitelink > a i { position: absolute; top: 12px; right: 10px; }
.sitelink-ul { position: absolute; bottom: 36px; left: 0px; width: 200px; padding: 10px 0; background: #fff; border: 1px solid #cecece; border-bottom: 0; z-index: 999; display: none; }
.sitelink-ul a { display: block; padding: 10px 15px; color: #555;  font-size:1.4rem; }
.sitelink-ul a:hover { color: #2f7de9; }

@media only screen and (max-width:1400px) {
.footer-wrap .footer-container { margin: 0 30px; max-width: 1400px; }
}

@media only screen and (max-width:1024px) {
    .footer-wrap .footlink-wrap .link:first-child a:first-child:after { margin:0 15px; }
    .footer-wrap .address-wrap .address { display: block;  padding-left:0; background:none; text-align: center; }
    .footer-wrap .address-wrap .mark { display: none; }
    .footer-wrap .address-wrap .select-container { text-align: center; vertical-align: middle; }
    .footer-wrap .address-wrap .selectbox { position: relative; top: auto; right: auto; display: inline-block; vertical-align: middle; }
}

@media only screen and (max-width:768px) {   
    .footer-wrap .footlink-wrap { padding: 10px 0; }
    .footer-wrap .footlink-wrap .link { width: 100%; text-align: center; }
    .footer-wrap .footlink-wrap .link:last-child { margin-top:15px; width: 100%; text-align: center; }   
    
}

@media only screen and (max-width:480px) {  
    .footer-wrap .footlink-wrap .link a:after { margin:0 5px 0 8px; }
    .footer-wrap .footlink-wrap .link:first-child a:first-child:after { margin:0 20px; }
    .footer-wrap .footlink-wrap .link a > img { display: none; }
    
    .footer-wrap .address { display: inline-block; padding:30px 0; }
    .footer-wrap .address > .line:before { margin:0 5px; height:10px; }
}


/********************   Popup  ********************/
.layer-pop { position: fixed; top: 0; left: 0; z-index: 99; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); overflow: hidden; }
.layer-pop.on { display: block; }
.pop-inner { position:absolute; margin:0; padding: 0; width:auto; background: #fff; border-radius: 0.4rem; border:1px solid #2a2a2a; box-shadow: 0 0 10px rgba(0,  0, 0, 0.5); }

.pop-inner.gray { background: #f3f4f7;  }
[class^="pop-header"] { padding:12px 10px 13px; width: 100%; height:auto; }
[class^="pop-header"] > h2 { color: #394ab8; text-align: center; font-size:2.2rem; font-weight:400; }

.pop-container { padding: 20px 20px 0;}

.pop-close { display: inline-block; padding: 7px 30px; background: #555; border:1px solid #555; border-radius:3px; color: #fff; text-align: center; font-size:1.8rem; vertical-align:middle; }

.pop-close:hover{ background: #000; border:1px solid #000; color: #fff; }

/* 비밀번호 입력 */
.pop-inner.pw { width: 360px; top:40%; left:calc(50% - 180px); }
.pop-header-pw { margin:0; padding: 0; width: 100%; }
.pop-header-pw > h2 { padding:15px 10px; border-bottom: 2px solid #2f7de9; color: #2f7de9; font-size:2.4rem; }
.pop-header-pw > p { display: block; margin: 10px 0; text-align: center; }

@media only screen and (max-width:480px) { 
    .pop-wrap.pw { width:90%; left:5%; right: 5%; }

}
@media only screen and (max-width:280px) { 
    .pop-inner.pw { width: 260px; left:calc(50% - 130px); }
}

.pop-wrap { display: none; z-index:99999; margin:0; padding: 0; width:auto; background: #fff;  border:0; border-radius:0; box-shadow: 0 0 10px rgba(0,  0, 0, 0.5); }
.pop-wrap.gray { background: #f3f4f7;  }

.pop-close { display: inline-block; padding: 7px 30px; background: #555; border:1px solid #555; border-radius:3px; color: #fff; text-align: center; font-size:1.8rem; vertical-align:middle; }

.pop-close:hover{ background: #000; border:1px solid #000; color: #fff; }

@media only screen and (max-width:480px) { 
    .pop-wrap { width:90%; }

}

/********************  loading   ********************/
.pop-inner.loading { padding:40px 20px; width: 400px; height: 300px; top:40%; left:calc(50% - 160px); background: #fff; text-align: center; font-size: 1.8rem; }
@media only screen and (max-width:480px) { 
    .pop-inner.loading { padding:40px 20px; width: 320px; height: 300px; top:40%; left:calc(50% - 160px); background: #fff; text-align: center; font-size: 1.8rem; }
}
@media only screen and (max-width:280px) { 
    .pop-inner.loading { padding:40px 10px; width:260px; height:180px; left:calc(50% - 130px); font-size: 1.6rem; }
}

.load-box { margin:25px auto 0; }
.loading { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb; }

.load-box .loading:nth-last-child(1) {
  animation: loadingC 0.6s 0.1s linear infinite;
}
.load-box .loading:nth-last-child(2) {
  animation: loadingC 0.6s 0.2s linear infinite;
}
.load-box .loading:nth-last-child(3) {
  animation: loadingC 0.6s 0.3s linear infinite;
}

@keyframes loadingC {
  0% {    transform: translate(0, 0); }
  50% {    transform: translate(0, 15px); }
  100% {    transform: translate(0, 0); }
}



/********************   Login Layout   ********************/

/* 로그인 */
.bg-loginpage { background: #f6f6f9; }

.loginpage-wrap { position: relative; margin: 180px auto 70px; padding: 0 50px; max-width: 1400px; width:90%;  background:#fff; font-size:1.6rem; line-height:1.4em; font-family:notokr, roboto, sans-serif; *zoom:1; }
.loginpage-wrap:after { display: block; clear: both; content: ""; }
.loginpage-container { margin: 0 auto; padding-bottom: 50px; width: 90%;  }

.loginpage-wrap.unify { margin: 150px auto 70px; }/* 통합로그인 */


@media only screen and (max-width:1024px) {     
    .bg-loginpage { background: #fff!important; }
    
    .loginpage-wrap { margin:135px auto 0!important; padding:0 30px; width: 100%; }
    .loginpage-container { width: 100%; }
    
    .loginpage-wrap.unify { margin:110px auto 0!important; }/* 통합로그인 */
}

@media all and (max-width:375px){
	.loginpage-wrap { padding:0 20px; }
}
@media all and (max-width:280px){
    .loginpage-wrap { padding:0 10px; }
}

/* info-box */
.info-box { margin: 0 10px; padding: 50px 0;  }
.info-box > h4.txt-blue { margin-bottom: 20px; color:#3366cc; font-size:2rem; }

/* 통합로그인 */
.info-box.unify { padding:30px 0 0;  }
.info-box.unify > h4.txt-blue { margin-bottom: 0px; }

/* logincol-ul */
.loginpage-wrap .logincol-ul {  display: table; width: 100%; }
.loginpage-wrap .logincol-ul li {  display:table-cell; width:50%; height: auto; text-align: center; vertical-align: top;  }
.loginpage-wrap .logincol-ul li > div { margin: 0 5px;  padding: 40px 15px; border: 1px solid #d6d6d6; }


@media only screen and (max-width:768px) { 
    .loginpage-wrap .logincol-ul { display: block; }
    .loginpage-wrap .logincol-ul li { display: block; margin: 0; min-width: 100%; }
    .loginpage-wrap .logincol-ul li:first-child { margin-bottom: 10px; }
}

.loginpage-wrap .logincol-ul h3.title { margin-bottom:10px; }
.loginpage-wrap .loginbtn-dl { margin-top:40px; width: 100%; }
@media only screen and (max-width:360px) { 
    .loginpage-wrap .loginbtn-dl button { margin-bottom: 10px; width:100%; }
}


.loginpage-wrap .logincol-ul .login-form { display: table; margin: 0 auto; padding:31px 0px 20px; width:90%; border: 0; }
.loginpage-wrap .logincol-ul .login-form::after { display: block; content: ''; clear: both; }

/* btn */
.btn-loginbig { display: block; margin: 10px auto ; padding:50px 10px 10px; max-width:100%; width:120px; height:110px; background:#258197 url(../images/img_login01.png) center 0 no-repeat; background-size:80px; border: 1px solid #258197; border-radius:10%; color: #fff;  font-size:1.6rem; font-weight: 700; letter-spacing: -1px; }
.btn-loginbig:hover { background:#209eaf url(../images/img_login01.png) center 0 no-repeat; background-size:80px;  border: 1px solid #209eaf; }
.btn-loginbig:focus { border: 2px solid #000; }

.btn-certifibig { display: block; margin: 10px auto ; padding:50px 10px 10px; max-width:100%; width:120px; height:110px; background:#448dd9 url(../images/img_login02.png) center 0 no-repeat; background-size:80px; border: 1px solid #448dd9; border-radius:10%; color: #fff;  font-size:1.6rem; font-weight: 700; letter-spacing: -1px; }
.btn-certifibig:hover { background:#3a78b9 url(../images/img_login02.png) center 0 no-repeat; background-size:80px; border: 1px solid #3a78b9; }
.btn-certifibig:focus { border: 2px solid #000; }

@media all and (max-width:280px){
    .loginpage-wrap .logincol-ul .loginbtn-dl .btn-mainline { display: block; margin: 10px auto; width: 90%; } 
}

/* dot-ul - style.css 동일 */
.dot-ul { margin-top: 20px; }
.dot-ul li { position: relative; padding: 5px 0 5px 10px;  line-height: 1.4em; word-break:keep-all; }
.dot-ul li:before { position: absolute; top:15px; left: 0; display: inline-block; content: "";  width:3px; height:3px; border-radius: 3px; background:#747474;  }

/* 통합로그인 */
.dot-ul.unify { margin-top: 10px; } 
.dot-ul.unify li { padding: 3px 0 3px 10px;  line-height: 1.2em; }
.dot-ul.unify li:before { top:12px; }

/* 인증서 로그인 아이디비번입력 */
.loginpage-wrap .logincol-ul .login-form .login-box { display: table-cell; width: 80%; }
.loginpage-wrap .logincol-ul .login-form .login-box .set { margin-bottom: 10px; display: block; width: 100%;  }
.loginpage-wrap .logincol-ul .login-form .login-box .set > label { display: inline-flex; width: 70px; }
.loginpage-wrap .logincol-ul .login-form .login-box .set input { display: inline-flex; width: calc(100% - 90px); }

.loginpage-wrap .logincol-ul .login-form .check-box { padding-left: 80px; width: 100%; text-align: left; }
.loginpage-wrap .logincol-ul .login-form .sumit-box { display: table-cell; width: 20%; vertical-align: top; }
.loginpage-wrap .logincol-ul .login-form .sumit-box .btn-loginsumit { display: inline-block; padding:37px 10px; width:100%; height:100%; background:#258197; border: 1px solid #258197; border-radius:6px; color: #fff;  font-size:1.6rem; }
.loginpage-wrap .logincol-ul .login-form .sumit-box .btn-loginsumit:hover { background:#209eaf; border: 1px solid #209eaf; }
.loginpage-wrap .logincol-ul .login-form .sumit-box .btn-loginsumit:focus { border: 2px solid #000; }

@media only screen and (max-width:768px) { 
    .loginpage-wrap .logincol-ul .login-form { width:70%; }
}
@media only screen and (max-width:480px) { 
    .loginpage-wrap .logincol-ul .login-form { width:100%; }
    .loginpage-wrap .logincol-ul .login-form .login-box .set > label { display: none; }
    .loginpage-wrap .logincol-ul .login-form .login-box { width:70%; }
    .loginpage-wrap .logincol-ul .login-form .login-box .set input { display: inline-flex; width: calc(100% - 15px);}
    .loginpage-wrap .logincol-ul .login-form .sumit-box { width: 30%; }
    .loginpage-wrap .logincol-ul .login-form .check-box { padding-left:10px; width: 100%; }
}

/* 아이디 로그인 */
.loginpage-wrap .login-form { margin: 0 auto; padding:70px 70px 60px;  width:600px; border: 1px solid #d6d6d6; }
.loginpage-wrap .login-form::after { display: block; content: ''; clear: both; }

.loginpage-wrap .login-form.unify { margin: 0 auto; padding:30px 0 20px; width: 100%;  border:0;  } /* 통합로그인 */

@media all and (max-width:600px){
    .loginpage-wrap .login-form { padding:70px 30px 60px;  width:100%; }
}

@media all and (max-width:480px){
    .info-form.unify .idsearch-box .w15 { width: 19%!important; } /* 통합로그인 핸드폰번호*/
    .info-form.unify .idsearch-box .w49 { width: 64%!important; } /* 통합로그인 인증번호, 비밀번호 */
}

@media all and (max-width:280px){
    .info-form.unify .idsearch-box .w15 { width: 30%!important; } /* 통합로그인 핸드폰번호*/
    .info-form.unify .idsearch-box .w49 { width: 100%!important; } /* 통합로그인 인증번호, 비밀번호 */
    .info-form.unify .idsearch-box .btn-gray { display: block; width: 100%; } /* 통합로그인 인증버튼 */
    
}

.loginpage-wrap .login-form .login-box { display: table-cell; width: 80%; }
.loginpage-wrap .login-form .login-box .set { margin-bottom: 10px; width: 100%; }
.loginpage-wrap .login-form .login-box .set > label { display: inline-flex; width: 80px; }
.loginpage-wrap .login-form .login-box .set input { display: inline-flex; width: calc(100% - 100px); }


.loginpage-wrap .login-form .check-box { padding-left: 80px; width: 100%; text-align: left; }
.loginpage-wrap .login-form .sumit-box { display: table-cell; width: 20%; vertical-align: top; }
.loginpage-wrap .login-form .sumit-box .btn-loginsumit { display: inline-block; padding:37px 10px; width:100%; height:100%; background:#777; border: 1px solid #777; border-radius:6px; color: #fff;  font-size:1.6rem; }
.loginpage-wrap .login-form .sumit-box .btn-loginsumit:hover { background:#444; border: 1px solid #444; }
.loginpage-wrap .login-form .sumit-box .btn-loginsumit:focus { border: 2px solid #000; }

.loginpage-wrap .guide-dl { margin-top:30px; padding: 30px; text-align: left; }
.loginpage-wrap .guide-dl dt { margin-bottom:10px; padding-left: 30px; background: url(../images/i_info.png) 0 0 no-repeat; background-size:20px; font-size: 2rem; font-weight: 700; }
.loginpage-wrap .guide-dl dd { line-height: 1.5; }
.loginpage-wrap .guide-dl dd > p { margin-bottom: 20px; }

.loginpage-wrap .txt-cmt { margin:0 auto 10px; width: 70%; text-align: right; font-weight: 700; }
.loginpage-wrap .txt-cmt.wide { margin:0 auto -15px; width:100%; }

@media all and (max-width:480px){
    .loginpage-wrap .login-form { padding:40px 30px 40px;  } 
    .loginpage-wrap .login-form .login-box .set > label { display: none; }
    .loginpage-wrap .login-form .login-box { width:70%; }
    .loginpage-wrap .login-form .login-box .set input { display: inline-flex; width: calc(100% - 15px);}
    .loginpage-wrap .login-form .sumit-box { width: 30%; }
    .loginpage-wrap .login-form .check-box { padding-left:0; width: 100%; }
    
    .loginpage-wrap .guide-dl { padding:0; }
}

@media all and (max-width:375px){
    .loginpage-wrap .login-form { padding:40px 10px 40px;  } 
    
}

@media all and (max-width:280px){
    .loginpage-wrap .login-form .login-box { width:75%; }
    .loginpage-wrap .login-form .login-box .set input { display: inline-flex; width: calc(100% - 10px);}
    .loginpage-wrap .login-form .sumit-box { width: 25%; }
    
    .btn-mainline.unify { margin-bottom: 5px; width:100%!important; }
}

/* 아이디조회 */
.loginpage-wrap .info-form.wide { width:100%; }
.loginpage-wrap .info-form { margin: 0 auto; padding:50px 7% 60px; width:70%; border: 1px solid #d6d6d6; }
.loginpage-wrap .info-form::after { display: block; content: ''; clear: both; }
.loginpage-wrap .info-form.unify { margin-top: 20px; padding:20px 7% 10px; }/* 통합로그인 */
    
.loginpage-wrap .info-form h4 { margin:30px 0 20px; padding-left:31px; background:url(../images/bullet02.png) left 6px no-repeat; background-size: 16px; color:#3366cc; font-size:2rem; line-height: 1.2; word-break:keep-all; }
.loginpage-wrap .info-form h4.line::after { display: block; content: ""; margin-top: 10px; margin-left:-40px; width:calc( 100% + 40px); height: 2px; background:#4e7ad3; }

.loginpage-wrap .info-form .textarea { margin-top:10px; width: 100%; height:22rem; padding: 10px 15px 30px; background-color: #f9f9f9; line-height: 1.8; overflow-y: auto; }
.loginpage-wrap .info-form .textarea h3 { color:#004aaa; }
.loginpage-wrap .info-form .textarea h3::before { display: inline-block; content: ""; margin-top: 20px; margin-right: 10px; width:16px; height:16px; background:url(../images/bullet06.png) left center no-repeat; background-size: 16px; }

.loginpage-wrap .info-form .idsearch-box { width: 100%; }
.loginpage-wrap .info-form .idsearch-box .set { margin-bottom: 10px; width: 100%; }
.loginpage-wrap .info-form .idsearch-box .set.col { width: 49%;  }
.loginpage-wrap .info-form .idsearch-box .set .txt-label { display: inline-block; margin-top: 10px; width:120px; vertical-align: top; }
.loginpage-wrap .info-form .idsearch-box .set .w30 { width:8rem; }
.loginpage-wrap .info-form .idsearch-box .set .w50 { width:26.6rem; }
/*통합로그인 */
.loginpage-wrap .info-form .idsearch-box .inline { display: inline-block; width: calc( 100% - 124px);}
.loginpage-wrap .info-form .idsearch-box .w246 { width: 24.6rem; }
.loginpage-wrap .info-form.unify .idsearch-box .w73  { width:7.3rem; }
.loginpage-wrap .info-form .idsearch-box .email2 { width: 22.2rem; }
.loginpage-wrap .info-form .idsearch-box .w133 { width: 13.3rem; }/*통합로그인 비밀번호찾기*/


@media all and (max-width:1440px){
.loginpage-wrap .info-form .idsearch-box .w246 { width: 24.6rem; }/*통합로그인 */
}
@media all and (min-width:1280px) and (max-width:1410px){
    .loginpage-wrap .info-form .idsearch-box .w246.email3 { display: block; margin-top: 10px; }/*통합로그인 */
}
@media all and (min-width:1280px) and (max-width:1349px){
    .loginpage-wrap .info-form .idsearch-box .w133.email-3 { display: block; margin-top: 10px; margin-left: 123px; }/*통합로그인 비밀번호찾기*/
}

@media all and (max-width:1280px){
    .loginpage-wrap .info-form { width:85%; }
    .loginpage-wrap .txt-cmt { width:85%; }
    .loginpage-wrap .info-form .idsearch-box .inline { display:block; width:100%; }
    .loginpage-wrap .info-form .idsearch-box .set .txt-label.none { display: none; }
    
    .loginpage-wrap .info-form.unify .idsearch-box .set .txt-label { display:block; margin-bottom:0px; width: 100%; font-weight: 700; } /* 통합로그인 */
}
@media all and (min-width:1024px) and (max-width:1233px){
    .loginpage-wrap .info-form .idsearch-box .w246.email3 { display: block; margin-top: 10px; }/*통합로그인 */
}
@media all and (max-width:971px){
    .loginpage-wrap .info-form .idsearch-box .w246.email3 { display: block; margin-top: 10px; }/*통합로그인 */
}
@media all and (max-width:577px){
    .loginpage-wrap .info-form .idsearch-box .w133.email-3 { display: block; margin-top: 10px; }/*통합로그인 비밀번호찾기*/
}

@media all and (max-width:795px){
    .loginpage-wrap .info-form { width:100%; }
    .loginpage-wrap .txt-cmt { width:100%; }
    
    /*통합로그인 */
    .loginpage-wrap .info-form .idsearch-box .email2 { width:45%; }
    .loginpage-wrap .info-form .idsearch-box .w246.email3 { width:45%; }
    .loginpage-wrap .info-form .idsearch-box .w246.pw { width:55%; }
}
@media all and (max-width:670px){
    .loginpage-wrap .info-form { padding:10px 5% 30px; }    
    .loginpage-wrap .info-form .idsearch-box .set { margin: 10px 0; }
    /*통합로그인 */
    .loginpage-wrap .info-form .idsearch-box .set.col { width:100%; }
    .loginpage-wrap .info-form .idsearch-box .set .txt-label { display:block; margin-bottom: 10px; width: 100%; font-weight: 700; }
    .loginpage-wrap .info-form .idsearch-box .w246 { width: 45%; }
    .loginpage-wrap .info-form .idsearch-box .dashed { display: block; padding-bottom: 20px; width: 100%; border-bottom: 1px solid #efefef; }
}

@media all and (max-width:414px){
    .loginpage-wrap .info-form { padding:20px 0 30px; border-top: 1px solid #d6d6d6; border-right:0; border-bottom: 1px solid #d6d6d6; border-left:0; }
    .loginpage-wrap .info-form .idsearch-box .set .w30 { width:7rem; }
    .loginpage-wrap .info-form .idsearch-box .set .w50 { width:23.6rem; }
    
    /*통합로그인 */
    .loginpage-wrap .info-form.unify .idsearch-box .w73 { width: 30%; }    
    .loginpage-wrap .info-form .idsearch-box .w246.info { width:calc( 100% - 2px ); }
    .loginpage-wrap .info-form .idsearch-box .email2 { width:45%; }
    .loginpage-wrap .info-form .idsearch-box .w246.email3 { width:45%; }
    .loginpage-wrap .info-form .idsearch-box .w246.pw { width:calc( 100% - 2px ); }
    .loginpage-wrap .info-form .idsearch-box .w50.user { width:calc( 100% - 2px )!important;}/*통합로그인 비밀번호찾기*/
    .loginpage-wrap .info-form .idsearch-box .w49.pw { width:calc( 100% - 2px )!important;}/*통합로그인 비밀번호찾기*/
    
    .loginpage-wrap .info-form.unify { padding:20px 0 30px; }
}
@media all and (max-width:280px){
    .loginpage-wrap .info-form .idsearch-box .btn-gray { margin-top: 15px; }
    .loginpage-wrap .info-form .idsearch-box .w133.email-2 { width: 13rem; }
}


/* 인증서 등록 */
.loginpage-wrap .regist-wrap { margin: 0 auto; padding:0px 7% 60px; width:100%; border: 1px solid #d6d6d6; }
.loginpage-wrap .regist-wrap::after { display: block; content: ''; clear: both; }
.loginpage-wrap .regist-wrap h4.title { margin:50px 0 20px; padding-left:31px; background:url(../images/bullet02.png) left 6px no-repeat; background-size: 16px; color:#3366cc; font-size:2rem; line-height: 1.2; word-break:keep-all; }
/* 통합로그인 */
.loginpage-wrap .regist-wrap.unify { padding:0px 5% 30px; }
.loginpage-wrap .regist-wrap.unify h4.title { margin:30px 0 10px; }

.loginpage-wrap .regist-wrap .textarea { margin-top:10px; width: 100%; height:22rem; padding: 10px 15px 30px; background-color: #f9f9f9; line-height: 1.8; overflow-y: auto; }
.loginpage-wrap .regist-wrap .textarea h1 { margin-top: 20px; color:#333; font-size: 2.2rem; }
.loginpage-wrap .regist-wrap .textarea h3 { color:#333; }
.loginpage-wrap .regist-wrap .textarea h3::before { display: inline-block; content: ""; margin-top: 20px; margin-right: 10px; width:16px; height:16px; background:url(../images/bullet06.png) left center no-repeat; background-size: 16px; }
/* 통합로그인 */
.loginpage-wrap .regist-wrap.unify .textarea { margin-top:0px; font-size:1.4rem; line-height: 1.3; }
.loginpage-wrap .regist-wrap.unify .textarea h1 { margin-top: 15px; margin-bottom: 0; font-size:1.8rem; }
.loginpage-wrap .regist-wrap.unify .textarea h3 { margin-top: 0; font-size:1.5rem; }
.loginpage-wrap .regist-wrap.unify .textarea h3::before { margin-top:5px; margin-bottom: -1px; margin-right:5px; width:14px; height:14px; background:url(../images/bullet06.png) left center no-repeat; background-size: 14px;}

.loginpage-wrap .check-all { margin-bottom: 10px; text-align: right; }
.loginpage-wrap .check-require { margin-top: 10px; text-align:left; }



/* 완료 메세지 */
.loginpage-wrap .message-box { margin:0 auto; padding:30px; text-align: center; }
.loginpage-wrap .message-box > h3 { margin-bottom: 30px; color:#3366cc; font-size: 2rem; font-weight: 700; }
.loginpage-wrap .message-box .i-message { display:inline-block; margin:-3px 5px 0 0; width:20px;  }
.loginpage-wrap .message-box .dot-ul { text-align: left; }
@media all and (max-width:280px){
    .loginpage-wrap .message-box { padding:20px; }
}

/* 통합로그인 */
.loginpage-wrap .message-box.unify { padding:10px 30px 20px;}
.loginpage-wrap .message-box.unify > h3 { margin-bottom:20px; }

/* 회원정보 수정 */
.loginpage-wrap .member-box { width: 100%; }
.loginpage-wrap .member-box .set { margin-bottom: 10px; width: 100%; }
.loginpage-wrap .member-box .set > label { display: inline-flex; width:150px; }
.loginpage-wrap .member-box .set > span.label { display: inline-flex; width:150px; }
.loginpage-wrap .member-box .set .label-otp { display: inline-flex; width:140px; }
.loginpage-wrap .member-box .set .label-otp-row { display: inline-flex; width:140px; }
.loginpage-wrap .member-box .set input { display: inline-flex; width: calc(100% - 160px);}
.loginpage-wrap .member-box.info .set input.num { width:9rem; }
.loginpage-wrap .member-box .set select { display: inline-flex; width: calc(100% - 160px);}
.loginpage-wrap .member-box select.col { display: inline-flex; width: calc(100% - 336px);}

.loginpage-wrap .login-form .cmt-info { margin-top:10px; padding-left: 30px; background: url(../images/i_info.png) 0 4px no-repeat; background-size:20px; }

@media all and (max-width:768px){  
    .loginpage-wrap .member-box.info .set > label { display: block; width: 100%; }
    .loginpage-wrap .member-box.info .set input { display: inline-flex; width:100%;}
    .loginpage-wrap .member-box.info .set input.num { width:31.2%; }
}

@media all and (max-width:730px){    
    .loginpage-wrap .member-box .set .label-otp { display:block; margin-bottom: 10px; width: 100%; font-weight: 700; }
    .loginpage-wrap .member-box .set .label-otp-row { display:block; margin-top:30px; margin-bottom: 10px; width: 100%; font-weight: 700; }
    .loginpage-wrap .member-box select.col { width:100%; }
    .loginpage-wrap .member-box .btn-gray { margin-top:15px; width:100%; }
    .loginpage-wrap .member-box .input-otp { width:100%!important; }
}

@media all and (max-width:590px){  
    .loginpage-wrap .member-box.info .set input.num { width:30.5%; }
}
@media all and (max-width:480px){  
    .loginpage-wrap .member-box.info .set input.num { width:30%; }
}

@media all and (max-width:414px){
    .loginpage-wrap .member-box .set > label { width:120px; letter-spacing: -1px; }
    .loginpage-wrap .member-box .set > span.label { width:120px; letter-spacing: -1px; }
    .loginpage-wrap .member-box .set input { width: calc(100% - 130px); }
    .loginpage-wrap .member-box .set select { width: calc(100% - 130px); }
    .loginpage-wrap .member-box select.col { width:100%; }
    
}

@media all and (max-width:280px){
    .loginpage-wrap .member-box .set > label { width:110px; letter-spacing: -2px; }
    .loginpage-wrap .member-box .set > span.label { width:110px; letter-spacing: -2px; }
    .loginpage-wrap .member-box .set input { width: calc(100% - 120px); }
    .loginpage-wrap .member-box .set select { width: calc(100% - 120px); }
    .loginpage-wrap .member-box select.col { width:100%; }
    .loginpage-wrap .member-box.info .set input.num { width:29.5%; }
}

/* 통합 로그인 */
.loginflow-ul { display:flex; flex-direction: row; align-items: stretch; justify-content: space-around; margin-top:30px; padding:0 2rem; width: 100%; }
.loginflow-ul li { position: relative; padding: 10px 15px; width:30%; border:2px solid #5494db; text-align: center; font-size: 2.4rem; line-height: 1.2; }
.loginflow-ul li::before { position: absolute; top: 50%; right: 0; display: block; content: ""; width: 0px; border: 10px solid transparent; border-right: 0; border-left: 10px solid #5494db; transform: translate(100%, -50%); }
.loginflow-ul li:last-child::before { display: none; }
.loginflow-ul li.active { background: #5494db; color: #fff; }

@media all and (max-width:768px){
    .loginflow-ul { padding: 0; }
    .loginflow-ul li { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
}

    
/********************   SITEMAP   ********************/
.sitemap-wrap { position: relative; margin: 180px auto 70px; padding: 0 50px 50px; max-width: 1400px; width:90%; height: auto;  background:#fff; font-size:1.6rem; line-height:1.4em; font-family:notokr, roboto, sans-serif; *zoom:1; }

.sitemap-header { position:relative; min-height: 130px; height:auto; background: url(../images/bg_subheader.png) 0 bottom repeat-x; }
.sitemap-header > h1 { position: absolute; bottom:45px; width: 100%; color: #333; text-align: center; font-size:4rem; font-weight:400; line-height: 1; }

.sitemap-ul { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:15px; margin-top: 50px; margin-right:15px; width: 100%; max-width: 1400px; height: auto; }
.sitemap-ul:after { display: block; clear: both; content: ""; }



@media only screen and (max-width: 1024px) { 
    .sitemap-wrap { margin:60px auto 0; padding:0 30px; width: 100%; }
    .sitemap-ul { margin: 0; padding:40px 0 0; height: auto;grid-template-columns: 1fr 1fr; }
    .sitemap-ul .box { height: auto; }
}

@media only screen and (max-width: 768px) {
    .sitemap-ul { grid-template-columns: 1fr; }
  }
@media all and (max-width:320px){
	.sitemap-wrap { padding:0 20px; }
}
@media all and (max-width:280px){
    .sitemap-wrap { padding:0 10px; }
}

.sitemap-ul h2.gnb { padding: 15px; background: #e2eeff; border:2px solid #0075cf; color:#3366cc; text-align: center; font-size: 2.2rem; font-weight: 400;  }
.sitemap-ul h3.sub { padding: 15px 20px; background: #f9f9f9; color:#258197; font-size: 2rem; font-weight: 400; }
.sitemap-ul > li > ul { border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; border-left:1px solid #d6d6d6; }
.sitemap-ul .menu-ul { margin-bottom: 20px!; padding: 15px 20px; font-size: 1.8rem;}
.sitemap-ul .menu-ul > li { position: relative; padding:8px 0  8px 10px; }
.sitemap-ul .menu-ul > li:before { position: absolute; top:17px; left: 0; display: inline-block; content: "";  width:3px; height:3px; border-radius: 3px; background:#999;  }
.sitemap-ul .menu-ul a:hover { color:#086efb; text-decoration: underline; }

.etc-box { display: table; margin:50px 0; width: 100%; border-top:2px solid #0075cf; }
.etc-box:after { display: block; clear: both; content: ""; }
.etc-box > h3 { display: table-cell; padding: 30px; width: 26%; color:#3366cc; font-size: 2.2rem; font-weight: 400; }
.etc-box > ul { display: table-cell; }
.etc-box > ul > li { float: left; padding-top:10px; width: 25%; }
.etc-box > ul > li:before { margin-right: 5px; content: "-"; }
.etc-box > ul > li > a:hover { color:#086efb; text-decoration: underline; }

@media only screen and (max-width:1024px) {
    .etc-box {  margin-bottom:50px;  }
    .etc-box > h3 { width:20%; }
}
@media only screen and (max-width: 768px) {
    .etc-box { display: block; padding: 0 10px; }
    .etc-box > h3 { display: block; padding:30px 0px; width: 100%; }
    .etc-box > ul { display: block; }
    .etc-box > ul > li { width: 30%; }
}

@media only screen and (max-width: 580px) {
    .etc-box > ul > li { width: 50%; }
}


/********************   fileupload   ********************/
.fileupload-ul {  margin: 10px 0 10px; padding:10px; width: 100%; border:1px solid #ebebeb; }
.fileupload-ul > li { display:table; margin:10px 0; padding:5px; width: 100%; border:1px dashed #ebebeb; line-height: 1.2; }

.fileupload-ul .left { display:table-cell; width:70%; color:#3A70D0; text-align: left; cursor: pointer; }
.fileupload-ul .left > span:hover { text-decoration: underline; }
.fileupload-ul .right { display:table-cell; width:30%; text-align: right; cursor: pointer;  }

.fileupload-ul a.delete { display: inline-block; margin-left:5px; padding:5px; border:1px solid #bbb; font-size: 1.2rem; }
.fileupload-ul a.delete:hover { border:1px solid #3A70D0; }

@media all and (max-width:480px){   
    .fileupload-ul .left { display: block; width: 100%; }
    .fileupload-ul .right { display: block; width: 100%; }
}

.fileupload-ul-block {  margin: 10px 0 10px; padding:10px; width: 100%; }
.fileupload-ul-block > li { display:table; margin:10px 0; padding:5px; width: 100%; border:1px dashed #ebebeb; line-height: 1.2; }

.fileupload-ul-block .left { display:table-cell; width:70%; color:#3A70D0; text-align: left; cursor: pointer; }
.fileupload-ul-block .left > span:hover { text-decoration: underline; }
.fileupload-ul-block .right { display:table-cell; width:30%; text-align: right; cursor: pointer;  }

.fileupload-ul-block a.delete { display: inline-block; margin-left:5px; padding:5px; border:1px solid #bbb; font-size: 1.2rem; }
.fileupload-ul-block a.delete:hover { border:1px solid #3A70D0; }

@media all and (max-width:768px){  
    .fileupload-ul-block {  margin:0; }
}

@media all and (max-width:480px){   
    .fileupload-ul-block .left { display: block; width: 100%; }
    .fileupload-ul-block .right { display: block; width: 100%; }
}