@charset "utf-8";
/* CSS Document */
html, body {font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;}
body {min-width: 950px; overflow-y:scroll; background:#ebebeb; letter-spacing: -0.02em;}

#header {width: 100%; background: url('https://img.assesta.com/online_test/assesta/header-bg.gif');}
.header-wrap {width: 950px; height: 120px; margin: 0 auto; text-align: center;}
.header-wrap .header-logo img {height: 50px; margin-top: 12px; }
.header-wrap .header-user {font-size: 15px; float: right; position: relative; top: -10px;}
.header-wrap .header-exam {font-size: 15px; font-weight: bold; color: #fff; margin-top: 30px; text-align: left;}

#footer {width: 950px; padding: 20px 0; margin: 0 auto; }
#footer .copyright {text-align: center; font-size: 13px; color:#000;}

/* 메인 */
.main-top {width: 100%; height: 400px; text-align: center; background: url('https://img.assesta.com/online_test/assesta/main-img02.jpg') top center repeat-x;}
.main-mid {width: 100%; min-width: 950px; min-height: 400px; background: #043764;}
.main-mid p {padding-top: 50px; font-size: 32px; text-align: center; color: #fece3c; }
.main-login {margin: 50px auto;}
.main-login .row {height: 40px;}
.main-login .cell {font-size: 17px; color: #fff; font-weight: 300; line-height: 1.4em; vertical-align: middle;}
.main-login .col1 {width: 130px;}
.main-login .col2 {width: 200px;}
.main-btn-start {text-align: center;}
.main-btn-start img {cursor: pointer;}

/* 개인정보 동의 */
.agree-box {border: 1px solid #ccc; padding: 30px; margin-top: 30px;}
.agree-box > h2 {font-size: 16px; margin-bottom: 20px; line-height: 160%;} 
.agree-box > h2:last-child {margin-bottom: 0;}
.agree-box > ul {margin-top: -10px; margin-bottom: 20px;}
.agree-box > ul li {font-size: 15px; line-height: 180%;}

.agree-check {margin-top: 15px; clear: both;}
.agree-check-input {position: absolute; z-index: -1; width: 0; height: 0; opacity: 0;}
.agree-check-label {user-select: none; margin-bottom: 0; cursor: pointer; vertical-align: middle;}
.agree-check-label > svg {margin-right: 10px;}
.agree-check-label > svg > polyline {fill:none; stroke:#ccc; stroke-width:2px; stroke-miterlimit:10; stroke-dashoffset: 0; stroke-dasharray: 30;}
.agree-check-input:checked ~  .agree-check-label > svg > polyline {stroke:#fff; animation: dash 0.5s linear alternate 1;}
@keyframes dash {from {stroke-dashoffset: 30;} to{stroke-dashoffset: 0;}}
.agree-check-input:checked ~  .agree-check-label > svg > circle {fill: #ffcc3e; stroke: none; animation: on 0.3s;}
@keyframes on {from {r:0; opacity: 0;} to{r: 11; opacity: 1;}}
.agree-check-label > span {position: relative; top: -7px;}

/* 콘텐츠 */
.con-box {width: 830px; min-height: 250px; margin: 0 auto; background: #fff; padding: 30px 60px;}
/*.con-box:after {content: ''; display: block; clear: both; float: none;}*/

/* 버튼 */
.btn-area {width: 835px; height: 35px; margin: 0 auto; text-align: center; border-top: 1px solid #292929; margin-top: 30px; padding-top: 15px;}
.btn-area li {display: inline-block;}
.btn-area li img {cursor: pointer;}

/* 오리엔테이션 */
.ot-tit {width: 835px; padding: 20px 0 25px; margin: 0 auto; text-align: center; background: #043763; color: #fff; font-size: 24px;}
.ot-img {margin-top: 20px; text-align: center;}
.ot-tab {text-align: right;}


/* 진행률 프로그레스바 */
.progress {width: 347px; height: 0; float: right; position: relative; top: -30px;}
.progress-bg {height: 12px; background: url('https://img.assesta.com/online_test/assesta/progress.png') 0 3px no-repeat;}
.progress-per {position: relative; z-index: 100; top: 0px; left: 0px; height: 8px; background: #e4012e;}

.table-progress {width: 100%;}
.table-progress tr td {font-size: 12px;}

/* 팝업 레이어 */
.layer-loading {width: 206px; height: 110px; overflow: auto; display: block; background: #fff; padding-top: 20px; text-align: center; border: 1px solid #ccc;}
.layer-loading p {padding-top: 15px;}

.pop-wrap {width: 540px; display: block; background:#fff;}
.pop-close {position:relative; top: -80px; right: 10px; float: right; height: 0; cursor: pointer;}
.pop-type01 p {text-align: center; height: 80px; padding-top: 10px; line-height: 90px; font-size: 24px; background:#20a7c5 url('https://img.assesta.com/online_test/kospo/ico-pop.png') 10px 20px no-repeat; color: #fff;}
.pop-con {padding: 20px 40px;}
.pop-con li {font-size: 16px; line-height: 1.6em;}

.pop-inlinebtn	{text-align: center}
.pop-inlinebtn a {display: inline-block; padding: 15px 5px;;}


/* 검사 실시 */
.exam-box {width: 100%; min-height:400px;}
.exam-desc {height: 35px; margin-top: 25px;}

.table-exam {width: 100%; border-collapse: collapse; border-spacing: 0;table-layout: fixed;}
.table-exam th {border-bottom: 1px solid #043763; border-top: 1px solid #043763; font-size: 13px; text-align: center; color: #fff; background: #043763; height: 30px; line-height: 30px;}
.table-exam td {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; padding: 6px 10px;}
.table-exam td:first-child {border-left: 1px solid #ddd;}
.table-exam td.q_finish	{color: #888;}
.icon_check {position: absolute; margin-left: -25px; margin-top: -20px; display: block;}

/* 문항 선택 시 글자 크기 조정 */
.q_view10{font-size: 13px; line-height:1.4em; }
.q_view5{font-size: 16px; line-height:1.4em; }
.q_view3{font-size: 20px; line-height:1.6em;}

/* 임시저장 */
.ico-img {margin: 40px 0; text-align: center;}

.save-txt {text-align:center; font-size: 24px; font-weight: bold;}
.save_txt-desc {text-align: center; font-size: 17px; line-height: 1.8em; margin: 30px 0 60px;}

/* 응답지 보기 */
.answer-desc {height: 35px; margin-top: 26px;}
.answer-box {width: auto; margin: 0 auto;}
.answer-box ul {text-align: center;}
.answer-box ul li {display: inline-block; width: 125px; margin: 0 3px; vertical-align: top;}

.table-answer {width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
.table-answer th {text-align: center; color: #fff; background: #043763; font-size: 14px; height: 30px; line-height: 30px;}
.table-answer td {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; font-size: 13px; height: 27px; vertical-align: middle;}
.table-answer td:first-child {border-left: 1px solid #ddd;}
.table-answer td a {color: #1A1A1A;}
.table-answer td.omr_nocheck a {color: #e4012e!important; font-weight: bold;}
.table-answer img {padding: 0 8px; vertical-align: middle;}

/* loading */
.loading {min-height:400px; text-align: center; padding-top: 50px;}
.loading-gif img {margin-top: 80px;}