@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans');*/

*,html {margin:0; padding:0; box-sizing:border-box}
body{position:relative; margin:0; padding:0; height:100%; color:#000; font-family:'Noto Sans Korean', sans-serif; font-size:13px; letter-spacing:-0.8px}
div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,iframe,fieldset,input,table,tr,th,td,button,textarea,select,thead,tbody,tfoot,pre,option {margin:0; padding:0}
article, aside, footer, header, nav, section, main, figure, figcaption {display: block}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%}
ul,ol,li,dl,dt,dd {list-style:none}
caption,em,address {font-style:normal}
fieldset,img {border:0}
img {vertical-align:top}
caption,legend {width:1px;height:1px;font-size:1px;line-height:0;text-indent:-9999px}
a {color:#333; text-decoration:none}
strong, h2, h3 {font-weight:normal; letter-spacing:-1px}

@font-face {
	font-family:'Noto Sans Korean';
	font-style: normal;
	font-weight: 400;
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Regular-Hestia.eot);
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Regular-Hestia.woff2) format('woff2'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Regular-Hestia.woff) format('woff'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Regular-Hestia.ttf) format('truetype');
}

@font-face {
	font-family:'Noto Sans Korean';
	font-style: normal;
	font-weight: 500;
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Medium-Hestia.eot);
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Medium-Hestia.woff2) format('woff2'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Medium-Hestia.woff) format('woff'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Medium-Hestia.ttf) format('truetype');
}
@font-face {
	font-family:'Noto Sans Korean';
	font-style: normal;
	font-weight:800;
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Bold-Hestia.eot);
	src: url(../font-awesome/fonts/notosans/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Bold-Hestia.woff2) format('woff2'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Bold-Hestia.woff) format('woff'),
		url(../font-awesome/fonts/notosans/NotoSansKR-Bold-Hestia.ttf) format('truetype');
}

button{border:0;background:none;cursor:pointer}

/* main */
.main-container {position:relative; margin:0 auto; padding-top:57px; width:1200px}
.main-container h1 {width:490px; height:63px; background:url('../images/main/img-h1.png') 0 0 no-repeat; color:transparent}
.main-container .intro {margin-top:40px; line-height:40px; font-size:22px; text-align:center; letter-spacing:-1.5px}
.main-container .intro strong {font-size:25px; font-weight:800}
.main-container .sys-step {margin:27px 0 0 50px; overflow:hidden}
.main-container .sys-step li {position:relative; float:left; padding-top:22px; width:164px; height:164px; border-radius:50%; background:#f8f8f8;}
.main-container .sys-step li + li {margin-left:146px}
.main-container .sys-step li + li:before {position:absolute; left:-97px; top:50%; display:block; margin-top:-13px; width:39px; height:26px; background:url('../images/main/bg-arrow.png') 0 0 no-repeat; content:""}
.main-container .sys-step li .num {position:relative; display:block; padding-left:30px; font-size:30px; font-weight:800}
.main-container .sys-step li .num:after {position:absolute; left:0; top:0; display:block; width:30px; height:34px; background-image:url('../images/main/ico-step.png'); background-repeat:no-repeat; content:""}
.main-container .sys-step li:nth-child(1) .num:after {left:65px; top:8px; background-position:0 0}
.main-container .sys-step li:nth-child(2) .num:after {left:76px; top:9px; background-position:0 -50px}
.main-container .sys-step li:nth-child(3) .num:after {left:70px; top:11px; background-position:0 -100px}
.main-container .sys-step li:nth-child(4) .num:after {left:72px; top:14px; background-position:0 -150px}
.main-container .sys-step li:nth-child(5) .num:after {left:74px; top:11px; background-position:0 -200px}
.main-container .sys-step li .num em {font-weight:400}
.main-container .sys-step li p {margin-top:16px; line-height:22px; color:#555; font-size:16px; text-align:center}
.main-container .sys-step li p .tit {display:block; font-size:20px; font-weight:800; color:#000}
.main-container .title {display:block; margin-top:20px; font-size:30px; font-weight:400; text-align:center} /* 20201231 수정 */
.main-container .title span {font-size:35px; font-weight:800; color:#126aa2}
.main-container .period {margin:20px 0 30px; border-radius:8px; height:237px; background:#126ea9; -webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.17); -ms-box-shadow: 0px 6px 8px rgba(0,0,0,0.17); -moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.17); box-shadow: 0px 6px 8px rgba(0,0,0,0.17); overflow:hidden}
.main-container .period > div {position:relative; float:left; padding:28px 54px 0 55px; width:50%; text-align:center}
.main-container .period > div .tit {margin-bottom:25px; font-size:28px; font-weight:500; color:#fff; -webkit-text-shadow:0px 3px 6px  rgba(0,0,0,0.17); -ms-text-shadow:0px 3px 6px  rgba(0,0,0,0.17); -moz-text-shadow:0px 3px 6px  rgba(0,0,0,0.17); text-shadow:0px 3px 6px  rgba(0,0,0,0.17);}
.main-container .period > div .tit strong {font-size:35px; font-weight:800}
.main-container .period .date {width:100%; height:92px; line-height:92px; border-radius:4px; background:#84defb; box-shadow:0px 7px 6px rgba(0,0,0,0.17); font-size:24px; font-weight:800}
.main-container .period .txt-noti {margin-top:12px; color:#fbf787; font-size:20px; text-align:left}
.main-container .period .btn-group {display:block; overflow:hidden}
.main-container .period .btn-group a {position:relative; display:block; float:left; width:240px; height:54px; line-height:54px; border-radius:4px; background:#f8f8f8 url('../images/main/ico-link.png') right 20px center no-repeat; color:#373636; font-size:18px; font-weight:800}
.main-container .period .btn-group a:before {position:absolute; left:19px; top:13px; display:block; width:27px; height:26px; background:url('../images/ico-exl.png') 0 0 no-repeat; content:""}
.main-container .period .btn-group a:after {position:absolute; right:19px; top:17px; display:block; width:17px; height:18px; background:url('../images/ico-down.png') 0 0 no-repeat; content:""}
.main-container .period .btn-group a:last-child {float:right}
.main-container .footer {padding-left:50px; padding-bottom:50px; overflow:hidden}
.main-container .footer .logo {display:block; float:left}
.main-container .footer .logo .ml40 {margin-left:40px}
.main-container .address {float:left; margin-left:65px; line-height:24px; font-size:15px}
.main-container .address .addr {display:inline-block; font-weight:500}
.main-container .address .mail {display:inline-block; margin-left:14px; padding-left:28px; background:url('../images/ico-mail.png') 0 center no-repeat; font-weight:500; letter-spacing:-0.5px; text-decoration:underline}
.main-container .address .copy {display:block; color:#9a9898; font-size:14px; font-weight:400}
.main-container .address .copy em {color:#000; font-weight:800}
/* 20201229 추가 */
.main-container .user-guide {margin-top:53px}
.main-container .user-guide:after {display:block; clear:both; content:""}
.main-container .user-guide a {display:block; height:103px; line-height:101px; color:#000}
.main-container .user-guide .login {float:right; width:842px; border:1px solid #856b01; background:#fcdb57 url('../images/main/bg-login.png') 65px center no-repeat; box-shadow:0px 5px 6px rgba(0,0,0,0.17); font-size:35px; font-weight:800; text-align:center}
.main-container .user-guide .manual {float:left; padding-left:63px; width:352px; height:103px; border:1px solid #e2dede; background:#f8f8f8; font-size:23px; font-weight:500}
.main-container .user-guide .manual span {display:inline-block; padding-right:45px; background:url('../images/main/ico-download.png') right center no-repeat}
/* 20201231 추가 */
.main-container .contact {margin-top:22px; padding:19px 20px 23px 143px; background:#f8f8f8 url('../images/main/bg-qna.png') 40px center no-repeat}
.main-container .contact p {line-height:30px; font-size:16px}
.main-container .contact p strong {font-weight:800}
.main-container .contact p .mail {padding-left:34px; background:url('../images/ico-mail.png') 8px center no-repeat; font-weight:500; color:#000; letter-spacing:-0.5px; text-decoration:underline}