/* Change the color to your own background color */
 input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
 transition: background-color 5000s ease-in-out 0s;
 -webkit-transition: background-color 9999s ease-out;
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
 -webkit-text-fill-color: #4b5e64 !important;
}
input[type="text"]:focus,input[type="password"]:focus{box-shadow:0 0 5px rgba(73,158,185,0.3);}
select::-ms-expand {display: none;}
select{width: 100%; height: 42px; line-height: 40px; border: 1px solid #dcdcdc; border-radius:5px; display: block; }
input[type="text"],input[type="password"]{padding: 0 4%; width: 92%; height: 40px; line-height: 40px; border: 1px solid #dcdcdc; background: #fff; display: block; margin: 0px; border-radius:5px;}
input[type="radio"]{transform:scale(1.3); margin: 0 5px 0 0;}
input[type="checkbox"]{transform:scale(1.3); margin: 0 5px 0 0;}
textarea{width: 96%; display: block;background: #fff; border: 1px solid #dcdcdc; border-radius:10px; margin-top: 10px; padding: 15px 2%;}
.inner{width: 1180px; margin: auto;}
.nothing{height: 80px; line-height: 80px; text-align: center; background: #f8f8f8; border-radius:10px; border: 1px solid #e8e8e8; font-size: 18px; color: #4c5e6c;}
.login-infotext{font-size: 16px; font-weight: 500; color: #395061; height: 30px; padding-top: 120px; background: #f1f4f5 url('/images/pass_img.png') 50% 20px no-repeat; border-radius:10px;}
#header{border-bottom: 1px solid #e8e8e8; height: 80px; line-height: 80px;}
#header .inner{}
#header .inner ul{display: inline-block; float: right; margin-top: 10px;}
#header .inner ul li{width: 70px; line-height: 0; float: left;}
#header .inner ul li a{display: inline-block; width: 100%; text-align: center; line-height: 1; padding-top: 38px; font-size: 13px; background-position: 50% 5px; background-repeat: no-repeat; background-size:23px; color: #8f9ba4;}
#header .inner ul li:first-child a{background-image: url('/images/document.svg');}
#header .inner ul li:last-child a{background-image: url('/images/logout.svg');}
#header .inner h1{display: inline-block; float: left;}
#header .inner h1 a{display: block;}
#header .inner h1 a span{float: left; display: inline-block; margin-left: 15px; height: 36px; font-size: 22px; font-weight:700; word-spacing:-3px;}
#header .inner h1 a img{float: left; height: 36px; margin-top: 20px;}
#content{}
#content.login-content{}
#footer{position: relative; bottom: 0; left: 0; width: 100%; height: 35px; background: #333; text-align: center; line-height: 35px; color: #888; font-size: 12px;}
#fmLogin #user_id{margin-top: 30px;}
#fmLogin #auth_number{margin-top: 30px;}
#timeLine{width: 100%; height: 45px; margin-bottom: 30px; line-height: 45px; background: #f8f8f8; border-bottom: 1px solid #e8e8e8; }
#timeLine #userName{display: inline-block; font-size: 15px; padding-left:40px; background: url('https://www.kbqa.or.kr/images/common/sign_in.png') 0 50% no-repeat;}
#timeLine #userName strong{font-weight: 700;}
#timeLine .date-time{display: inline-block; float: right;}
#timeLine .date-time dt{color: #666; display: inline-block;}
#timeLine .date-time dd{color: #4c5e6c; display: inline-block; font-weight: 900; margin-left: 10px;}

#examLogin{width: 100%; height: 100%; background: url('/images/baking_bg.png') 0 0 no-repeat; background-size:cover; position: fixed;}
#examLogin .login-box{width: 400px; padding: 60px 50px 40px; border-radius:15px; background: #fff; position: fixed; top: 50%; left: 50%; margin-top: -230px; margin-left: -250px; text-align: center; box-shadow:5px 5px 10px rgba(0,0,0,0.5)}
#examLogin .login-box .title{}
#examLogin .login-box .title img{display: block; margin: auto;}
#examLogin .login-box .title strong{display: block; margin: 10px 0 20px; font-size: 24px; word-spacing: -1px; text-align: center; font-weight:500;}
#examLogin .login-box button{cursor: pointer; display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #4b5e64; margin: 20px 0; color: #fff; border:0; outline:none; border-radius:5px; font-size: 16px;}
#examLogin .login-box button:hover{background: #395061;}
#examLogin .login-box label{display: none;}
#examLogin .login-box input[type="text"]{margin-bottom: 15px;}
#examLogin .login-box .find-area{display: inline-block;}
#examLogin .login-box .find-area a{color: #888; display: inline-block; line-height: 1;}
#examLogin .login-box .find-area a:first-child{margin-right: 5px; padding-right: 10px; border-right:1px solid #dcdcdc;}

.box-notice{border-bottom: 2px solid #4c5e6c; height:50px; line-height: 50px; padding-left: 40px; background: url('/images/info_chat.svg') 0 50% no-repeat; background-size:28px;}
.box-notice a{border-bottom: 1px solid #4c5e6c; color: #4c5e6c;	}
.box-notice strong{font-size: 20px; font-weight: 500; margin-right: 10px; color: #4c5e6c;}
.box-notice span{color: #888; font-size: 14px;}
.exam-list-design{}
.exam-list-design .inner{}
.exam-list-design .inner > ul{margin-top: 20px;}
.exam-list-design .inner > ul > li{border-radius:10px; position: relative; border: 1px solid #e8e8e8; padding: 20px; margin-bottom: 10px;}
.examContent{}
.examContent h5{font-size: 22px; margin-bottom: 15px; font-weight: 700;}
.examContent h5 strong{position: relative; top: -2px; font-weight: 500; font-size: 16px; margin-right: 10px; color: #b09b72; background: rgba(176,155,114,0.1); padding: 4px 10px; border-radius:20px;}
li.no .examContent h5 strong{color: #888; background: rgba(150,150,150,0.1);}
.examContent dl{margin-bottom:3px;}
.examContent dl dt{display: inline-block; font-weight: 700; margin-right: 8px; color: #666;}
.examContent dl dd{display: inline-block;  color: #666;}
.examContent dl dd span{line-height: 1;}
.examContent dl:nth-of-type(3) dd span:after{display: inline-block; margin: 0 8px; width: 2px; height: 12px;position: relative; top: 2px; background: #dcdcdc; content: '';}
.examContent dl:nth-of-type(3) dd span:last-child:after{display: none;}
.exam-result{width: 100px; height: 68px; padding-top: 42px; border-radius:10px; position: absolute; right: 20px; top: 22px; background: #f8f8f8; border: 1px solid #e8e8e8; text-align: center; font-size: 30px; font-weight: 700; color: #4c5e6c !important;}
.exam-result span{font-size: 20px; display: block;}
.exam-start{width: 100px; height: 35px; padding-top: 65px; border-radius:10px; position: absolute; right: 20px; top: 15px; background: #b09b72 url('/images/list.svg') 50% 20px no-repeat; text-align: center; background-size:30px; color: #fff !important;}
li.no .exam-start{ background: #ccc url('/images/list.svg') 50% 20px no-repeat; text-align: center; background-size:30px; color: #fff;}
.exam-start:hover{color: #fff;}
.btn-area{text-align: center; margin: 40px auto 60px;}
.btn-area .btn{display: inline-block;}
.btn-area .btn:first-child{margin-right: 10px;}
.btn{border-radius:8px; height: 45px; line-height: 45px; text-align: center; width: 300px; display: block;}
.btn.start-btn{background: #b09b72; color: #fff;}
.btn.start-btn:hover{background: #9c8862;}
.btn.line{border-radius:10px; border: 2px solid #000;}
.btn.line.gray{color: #888; border-color: #e8e8e8;}
.btn.line.gray:hover{background: #f8f8f8;}
.btn.end-btn{background: #b09b72; color: #fff;}
.btn.end-btn:hover{background: #9c8862;}
.information-box.list-info{margin-top: 30px;}
.information-box{border-radius:10px; border: 1px solid #e8e8e8; padding:15px 30px 30px; background: #f8f8f8; clear:both;}
.information-box strong{display: block; padding: 10px 0; font-size: 18px; font-weight: 700; padding-left: 35px; background: url('/images/error.svg') 0 50% no-repeat; background-size:25px;}
.information-box ul{}
.information-box ul li{margin-bottom: 5px; color: #666;}
.information-box ul li:before{display: inline-block; width: 4px; height: 4px; background: #ccc; border-radius:4px; margin-right: 5px; position: relative; top:-3px; content: '';}
.refresh{margin: 40px auto 60px;}

#examPaper{}
#examPaper .exam-title{width: 100%; text-align: center;}
#examPaper .exam-title h2{font-size: 30px; padding-top:20px; font-weight: 700;}
#examPaper .exam-title h2 strong{font-size: 25px; width: 120px; margin: 20px auto 10px; color: #888; display: block; text-align: center; border-radius:35px; border: 2px solid #aaa;}
#examPaper .exam-title dl:first-of-type dt{display: inline-block;}
#examPaper .exam-title dl:first-of-type{margin: 10px 0;}
#examPaper .sub-title{font-size: 20px; margin: 15px 0 15px;}
#examPaper .sub-title strong{font-weight: 700; margin-right: 10px; padding: 5px 10px; background: #eee; border-radius:25px;}
#examPaper .exam-title dl dt{display: none;}
#examPaper .exam-title dl dd span{}
#examPaper .exam-title dl dd span:after{display: inline-block; margin: 0 8px; width: 1px; height: 10px; background: #dcdcdc; content: ''; }
#examPaper .exam-title dl dd span:last-child:after{display: none;}
#examPaper .exam-title:after{display: block; content: ''; clear:both;}
#examPaper form{clear:both; border-top: 2px solid #333;}
#examPaper .inner > table{border-top: 2px solid #333;}
#examPaper .inner > table th{background: #f8f8f8; text-align: center; height: 50px; border-bottom: 1px solid #e8e8e8; font-weight: 400; border-right: 1px solid #e8e8e8;}
#examPaper .inner > table td{text-align: center; height: 80px; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;}
#examPaper .inner > table th:last-child{border-right: 0;}
#examPaper .inner > table td:last-child{border-right: 0;}
#examPaper .inner > table td strong{font-weight: 700; font-size: 20px; position: relative; top:1px; margin-right: 3px; color: #b09b72;}
#examPaper .inner > table td h6{font-size: 20px; font-weight: 700; line-height: 1;}
.exam-body{}
.exam-body table{border-top: 1px solid #dcdcdc;}
.exam-body table th{background: #f8f8f8; border-bottom: 1px solid #e8e8e8; height: 50px; width: 15%; text-align: center; font-weight: 400;}
.exam-body table td{border-bottom: 1px solid #e8e8e8; height:50px; text-indent: 15px;}
.exam-body > ul{}
.exam-body > ul > li{padding: 30px 0; border-bottom: 1px solid #e8e8e8;}
.exam-body > ul > li .q-num{padding-bottom: 10px;}
.exam-body > ul > li .form-box{margin: 10px 0; position: relative;}
.exam-body > ul > li .form-box input{margin-right: 10px;}
.exam-body > ul > li .form-box input[type="radio"]{width: 25px; height: 25px; z-index: 10; margin-right: 0; opacity: 0; position: absolute;}
.exam-body > ul > li .form-box input[type="radio"]:checked + .radio-design{background: #b09b72; color: #fff;}
.exam-body > ul > li .form-box .radio-design{margin-right: 10px; display: inline-block; width: 25px; height: 25px; border-radius:25px; line-height: 25px;font-weight: 700; color: #888; text-align: center; background: #eee;}
.exam-body > ul > li .q-num strong{font-size: 22px; font-weight: 700; margin-right: 10px;}
.exam-body > ul > li .q-num .q-title{font-size: 18px; display: inline-block;}
.exam-body > ul > li .q-example{font-size: 15px; background: #f8f8f8; border-radius:5px; border: 1px solid #e8e8e8; padding: 15px; margin-bottom: 10px;}
.exam-body > ul > li .q-num span.num{display: inline-block; position: relative; top: -2px; right: -10px; background: rgba(100,100,100,0.1); color: #666; padding: 0 10px; line-height: 25px; border-radius:25px; font-size: 15px;}
.exam-title{float: left; width: 55%; padding: 20px 0 40px;}
.exam-title h3{font-size: 24px; margin-bottom: 10px; font-weight: 700;}
.exam-title dl{}
.exam-title dl dt{display: inline-block; margin-right: 10px; font-weight: 700;}
.exam-title dl dd{display: inline-block;}

#examIndex .inner > dl{width: 45%; float: right;}
#examIndex .inner > dl dt{display: none;}
#examIndex .inner > dl dd{width: 100%;}
#examIndex .inner > dl dd span{border-radius:10px; margin-left: 2%; padding:70px 0 10px; background-color: #f8f8f8; background-repeat: no-repeat; background-position: 50% 20px; background-size:35px; display: block; width: 23%; float: left; text-align: center; color: #4c5e6c; font-weight: 500;}
#examIndex .inner > dl dd span:nth-of-type(1){background-image: url('/images/history.svg');}
#examIndex .inner > dl dd span:nth-of-type(2){background-image: url('/images/edit.svg');}
#examIndex .inner > dl dd span:nth-of-type(3){background-image: url('/images/summary.svg');}
#examIndex .inner > dl dd span:nth-of-type(4){background-image: url('/images/student.svg');}

#examPaper{}
#examPaper .btn.line{margin: 40px auto 60px;}
.active-time{}
#timeLine .date-time.active-time dd{font-size: 24px; color: #d69c45;}

#examNav{width: 200px; overflow: hidden; height: 100%; position: fixed; right: 0; top: 0; background: #394a5f; z-index: 100; box-shadow:0 -5px 10px rgba(0,0,0,0.3);}
#examNav .title{height: 70px; line-height: 70px;}
#examNav .title h6{padding-left: 20px; font-size: 18px; color: #fff;}
#examNav .title h6 strong{font-size: 30px; font-weight: 700; color: #d0b98d;}
#examNav ul{width: 220px; overflow-y: scroll;}
#examNav ul li{line-height: 40px; padding: 0 20px;}
#examNav ul li.chek strong{color: #fff; background: #b09b72;}
#examNav ul li strong{display: inline-block; width: 25px; height: 25px; border-radius:25px; background: #27323e; line-height: 25px;  text-align: center; font-size: 13px; color: rgba(255,255,255,0.3); font-weight: 900; margin-right: 10px;}
#examNav ul li span{color: #fff;}
#examNav ul li span.num{border-radius:5px; font-size: 12px; margin-left:5px; position: relative; top: -1px; opacity: 0.7;}

.popup{display: none;}
.popup .information-box{width: 650px; min-height: 240px; position: fixed; top: 50%; left: 50%; margin-left: -345px; margin-top: -150px; height: auto; padding: 30px 20px; box-shadow:5px 5px 10px rgba(0,0,0,0.2)}
.popup .information-box .close{position: absolute; top: 5px; right: 5px; width: 60px; height: 60px; font-size: 0; display: block; text-indent: -9999px; background: url('/images/close.svg') 50% 50% no-repeat; background-size:25px;}
.info{width: 34px; height: 34px; display: inline-block; position: absolute; right: 15px; top: 15px; background: #27323e url('/images/error_w.svg') 50% 50% no-repeat; border-radius:34px; background-size:20px; font-size: 0; text-indent: -9999px;}