@charset "utf-8";



/* base */
/*
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,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,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;word-wrap:break-word}
*/
html {font-size: 62.5%; box-sizing: border-box;}
html,body{margin:0;padding:0;scrollbar-width: thin;}
body{color:#191919;font-style:normal;-webkit-text-size-adjust:none}/* -webkit-text-size-adjust:none 웹표준 검사에 오류로 표시 */
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,table,form,fieldset{margin:0;padding:0}
body,input,.w2input,textarea,select,button,table{font-family:'NotoSansCJKkr', 'Malgun Gothic', 'Dotum', sans-serif; font-size:1.4rem;}
table{empty-cells:show}
caption,legend{display:none}
a img,img{vertical-align:top;}
img,fieldset{border:0}
ul,dl,dd {list-style:none;margin:0;padding:0;}
ul li img {vertical-align:top}
em,i,address{font-style:normal}
a{display: inline-block; vertical-align: middle; text-decoration: none; cursor: pointer;}
a:hover,a:active,a:visited,a:focus{}/* text-decoration:underline */
*, ::before, ::after {background-repeat: no-repeat; box-sizing: inherit;}


/* NotoSansCJKkr 구글 본고딕 */

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 400;
    src: local('☺'),
    url('font/NotoSansCJKkr-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight:600;
    src: local('☺'),
    url('font/NotoSansCJKkr-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 500;
    src: local('☺'),
    url('font/NotoSansCJKkr-Medium.otf') format('opentype');
}


.wrapper{padding:0;margin:0;width: 100%;height: 100%;}
.wrapper.sys{background-image:url(../images/bg_sys.jpg);background-size: cover; background-color: #cfe0fe;background-position: 0 center;}
.wrapper.error_404{background-image:radial-gradient(rarthest-corner at 60% 70%#f1f7ff,#e6eeff); background-color: #e6eeff;background-position: 0 center;}
.conArea{width: 35%;margin: 0 auto;min-width: 37rem;/* border: solid .1rem #ddd; */padding: 6rem 0 0;}
.conArea h1{background-image: url(../images/ci.svg);background-size: 19rem;font-size: 0;width: 36.5rem;height: 6.5rem;margin: 0 auto; background-position: center 0;}
.sys .conArea .conBox{width:100%;border-radius: 1.9rem;background-color:#fff;box-shadow: 0.1rem 0.1rem 2rem rgb(0 0 0 / 20%);padding: 3.5rem;font-weight:400;}
.sys .conArea .conBox h2{font-size:4rem;text-align: center;}
.sys .conArea .conBox .conText{padding-top: 29.6rem;background-image: url(../images/img_sys.svg);background-size: 16rem;background-position: center 3.9rem; text-align: center;}
.error_404 .conText{background-image: url(../images/img_404.svg);background-size: 24rem;background-position: center 0;padding-top: 30rem;}
.error_404 .conText >div{display:flex; align-items:center; justify-content:center; flex-direction: column;}
.error_404 .conText .con_tit{font-size:3.4rem; color:#4876ef}
.error_404 .conText .con_tit,
.error_404 .conText .reference span{font-weight:600}

.notiArea{background-color:#f9fafc; padding:4rem; margin-top:4rem}

.notiArea ul{display: flex; justify-content: flex-start; align-items: center; margin-bottom: 2rem;}
.notiArea ul:last-child{margin-bottom: 0;}
.notiArea li,
.error_404 .conText >div p{color:#111}
.notiArea li+li{padding-left:3rem}
.conText span,
.notiArea .tit,
.conArea .conBox h2{font-weight:600; color:#134AA9}
.notiArea,
.conArea .conBox .conText,
.error_404 .conText >div p:nth-child(2){font-size:1.8rem; }
.error_404 .conText >div p:nth-child(2){padding-top:.6rem}

.reference,
.error_404 .conText >div .reference{color:#555; font-size: 1.4rem; text-align: center; padding-top:1.8rem;}


.fs14{font-size:1.4rem !important}
.fs16{font-size:1.6rem !important}
.fs17{font-size:1.7rem !important}
.fs20{font-size:2rem !important}
.fs24{font-size:2.4rem !important}
.red {color:#ff0000 !important;}
.blue {color:#4876ef !important;}

.tac {text-align: center !important;}
.tal {text-align: left !important;}
.tar, .txt_right {text-align: right !important;}

.bold{font-weight: 600;}

.mt20{margin-top:2rem}
.mt30{margin-top:3rem}