@charset "utf-8";



@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    src: local('NotoSansKR-Regular'),
         local('NotoSansKR Regular'),
         url(../fonts/NotoSansKR-Regular.eot),
         url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
         url(../fonts/NotoSansKR-Regular.woff) format('woff'),
         url(../fonts/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 500;
    src: local('NotoSansKR-Medium'),
         local('NotoSansKR Medium'),
         url(../fonts/NotoSansKR-Medium.eot),
         url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
         url(../fonts/NotoSansKR-Medium.woff) format('woff'),
         url(../fonts/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 700;
    src: local('NotoSansKR-Bold'),
         local('NotoSansKR Bold'),
         url(../fonts/NotoSansKR-Bold.eot),
         url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
         url(../fonts/NotoSansKR-Bold.woff) format('woff'),
         url(../fonts/NotoSansKR-Bold.otf) format('opentype');
}





*{margin:0;padding:0}
html{overflow-y:auto}
body{padding:0;background:#fff;font-family:'NotoSansKR', MalgunGothic, 'Malgun Gothic', 맑은고딕, '맑은 고딕', dotum,'돋움', Arial, sans-serif;color:#666;font-weight:400;line-height:1.3;-webkit-text-size-adjust:none;word-break:keep-all;word-wrap:break-word;}
a{color:#666;text-decoration:none}
img{vertical-align:top}
img,fieldset,iframe{border:0 none}
li{list-style:none}
table, td{border-collapse:collapse}
h1, h2, h3, h4, h5, h6{font-weight:400}
em{font-style:normal}


/* 웹 접근성 텍스트 숨김처리 */
caption, legend, .ally-hidden{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip-path:polygon(0 0, 0 0, 0 0)}
caption{display:none}







/* accessbility */
#skip-go{display:block}
#skip-go p{position:fixed;left:-1000px;top:0}
#skip-go ul li a{z-index:1000;display:block;position:fixed;left:-1000px;top:0;background-color:#11589b;font-size:1em;color:#fff;text-align:center} 
#skip-go ul li a:hover, #skip-go ul li a:active, #skip-go ul li a:focus{left:0;min-width:200px;padding:10px 30px;box-sizing:border-box;text-decoration:underline}





/* header */
#header{position:relative;border-bottom:1px solid #eee}
.header{padding:20px 50px}
.header:after{content:"";clear:both;display:block}
.header > h1{float:left}
.header > h1:after{content:"";clear:both;display:block}
.header > h1 a{float:left;background:url("../images/CI.png") left center no-repeat}
.header > h1 a span{float:left;padding-left:86px;font-size:1.25rem;/*20px*/color:#303F9F;font-weight:600;letter-spacing:-0.03em}
.header > span{float:right}
.header > span .userMenual{display:inline-block;padding-left:20px;background:url("../images/icon_manual.png") left center no-repeat;font-size:1.063rem;/*17px*/}

#container{position:relative;width:100%}

/* footer */
#footer{clear:both;position:relative;overflow:hidden;width:100%;padding:35px 0;border-top:1px solid #eee;box-sizing:border-box;letter-spacing:-0.03em}
.footer{margin:auto;position:relative;width:1400px}
.footer > p a{margin-left:30px;font-size:1.125rem;/*18px*/color:#222}
.footer > p a:hover{text-decoration:underline}
.footer > p a:first-child{margin-left:0}
.footer > ul{margin:20px 0}
.footer > ul:after{content:"";clear:both;display:block}
.footer > ul li{float:left;margin-left:25px;}
.footer > ul li:first-child{margin-top:7px;margin-left:0}
.footer > ul li strong{display:block;margin-bottom:4px;font-size:1.125rem;/*18px*/color:#222;font-weight:600}
.footer > span{font-size:0.875rem;/*14px*/}


/* loginForm */
.loginForm{position:relative;width:100%;margin:auto;padding:95px 0;background:#F9FAFA;text-align:center}
.loginForm > p{margin-bottom:30px;font-size:1.25rem;/*20px*/color:#222;font-weight:500}
.loginBox > li{margin-top:10px}
.loginBox > li:first-child{margin-top:0}
.loginBox > li input{width:500px;height:50px;padding:10px;border:1px solid #ccc;box-sizing:border-box;font-size:1.063rem;/*17px*/color:#222}
.loginBox > li input:focus{background:#F3FDFF}
.loginBox > li input[type="submit"]{border:none;background:#0B74DD;font-size:1.25rem;/*20px*/color:#fff;font-weight:600}

.helpLink{margin-top:30px}
.helpLink a{font-size:1.125rem;/*18px*/color:#444}
.helpLink a:after{content:"|";position:relative;top:-2px;margin-right:10px;padding-left:10px;font-size:0.875rem;/*14px*/color:#ddd}
.helpLink a:last-child:after{content:""}

.standardBrowser{position:relative;margin-top:55px}
.standardBrowser > p{margin-bottom:15px;font-size:0.9375rem;/*15px*/color:#E53935}
.standardBrowser > ul li{display:inline-block;margin-left:40px}
.standardBrowser > ul li:first-child{margin-left:0}
.standardBrowser > ul li.chrome{padding-top:55px;background:url("../images/CI_chrome.png") center top no-repeat}
.standardBrowser > ul li.firefox{padding-top:55px;background:url("../images/CI_firefox.png") center top no-repeat}
.standardBrowser > ul li span{font-size:0.9375rem;/*15px*/color:#718598}






@media screen and (max-width: 1420px) {
    /* footer */
    #footer{width:100%;padding:30px 20px 40px}
    .footer{width:100%}
    .footer > p a{margin-left:30px;font-size:1.063rem;/*17px*/}
    .footer > ul{margin:15px 0}
    .footer > ul li{margin-left:20px;font-size:0.9375rem;/*15px*/}
    .footer > ul li:first-child{margin-left:0}
    .footer > ul li strong{display:block;margin-bottom:4px;font-size:1.125rem;/*18px*/color:#222;font-weight:600}
}




@media screen and (max-width: 1250px) {
    /* footer */
    .footer > ul{margin:15px 0}
    .footer > ul li strong{display:block;margin-bottom:4px;font-size:1.125rem;/*18px*/color:#222;font-weight:600} 
}




@media screen and (max-width: 1023px) {

    /* header */
    .header{padding:20px 30px}
    .header > h1 a span{font-size:1.125rem;/*18px*/}
    .header > span .userMenual{font-size:1rem;/*16px*/}
    
    /* footer */
    #footer{padding:30px 30px 30px}    
    .footer > ul li{float:none;margin-left:0;margin-top:20px}

    /* loginForm */
    .loginForm{padding:60px 0}


}



@media screen and (max-width: 768px) {

    /* header */
    .header{padding:20px 20px}
    .header > h1 a span{font-size:1.063rem;/*17px*/}
    .header > span .userMenual{font-size:0.9375rem;/*15px*/}

    /* footer */
    #footer{padding:20px 20px 20px}
    .footer > p a{margin-left:30px}
    .footer > ul{margin:15px 0}
    .footer > ul li{float:none;margin-left:0;margin-top:15px;font-size:0.875rem;/*14px*/}
    .footer > ul li:first-child{margin-left:0}
    .footer > ul li:nth-child(2){float:none}
    .footer > ul li:last-child{float:none}

    /* loginForm */
    #container{padding-bottom:0}
    .loginForm{width:calc(100% - 40px);padding:40px 20px;background:#F9FAFA}
    .loginForm > p{margin-bottom:20px;font-size:1.125rem;/*18px*/}
    .loginBox > li input{width:100%;font-size:1rem;/*16px*/}
    .loginBox > li input[type="submit"]{font-size:1.125rem;/*18px*/}

    .helpLink{margin-top:25px}
    .helpLink a{font-size:1.063rem;/*17px*/}
    .helpLink a:after{top:-2px;font-size:0.8125rem;/*13px*/}

    .standardBrowser{margin-top:45px}
    .standardBrowser > ul li{padding:0 5px}
    .standardBrowser > ul li span{font-size:0.8125rem;/*14px*/}

}




@media screen and (max-width: 568px) {

    /* footer */
    .footer > p a{margin-left:20px;font-size:0.9375rem;/*15px*/}

    /* loginForm */
    .loginBox > li input{height:40px;padding:5px;font-size:0.9375rem;/*15px*/}
    .loginBox > li input[type="submit"]{font-size:1rem;/*16px*/}

    .helpLink a{font-size:1rem;/*16px*/}

    .standardBrowser{margin-top:35px}
}



@media screen and (max-width: 480px) {

    /* footer */
    .footer > ul li:first-child{display:none}
}




@media screen and (max-width: 400px) {
    
    /* header */
    .header > h1{float:none;display:block}
    .header > span{float:none;display:block;margin-top:20px}

}




@media screen and (max-width: 360px) {

    .footer > p a{margin-left:10px;font-size:0.875rem;/*14px*/}

}