/* CSS Document */

/* Common */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');

* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  }
body {margin:0; font-family: 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif, Apple SD Gothic Neo;  color: #454142;  font-size:18px; line-height: 1.3; word-break: keep-all;   }
.container {max-width: 1230px; width:100%; padding:0 15px; margin:0 auto; clear: both; display: block}
img {border: 0; vertical-align: middle }
input, select, button {vertical-align: middle}
a {cursor: pointer}
a:link, a:visited {color: #000;  text-decoration: none }
a:hover, a:active {color: #1ec09f; animation-delay: 0.5s;  transition: 0.5s;  }
.bg-white {background: #ffffff}
.text-red {color:#EE0000}
.text-green {color:#1cc09f}
.text-center {text-align: center}
ul {list-style: none; padding-left:0}
h1 {color:#000; }
.overflow-x-auto {overflow-x: auto}  .overflow-y-auto {overflow-y: auto}

footer {clear: both; margin:15px 0; padding:0; list-style: none; font-size: 12px; color:#707070 }
.footer_left, .footer_right {width: 49.5%; display: inline-block; padding:3px 0}
.footer_right {text-align: right ; font-size: 14px; }
.footer_right img {width:17px;}  .footer_right strong {color: #1ec09f; }
.footer_gotop {padding-top:5px; width:35px; height:35px; border-radius: 50px; text-align: center;  background: rgba(209, 210, 213, 0.9) ; display: block;
	                float: right ; margin:-6px -5px 0 15px; }
.footer_gotop:hover {background: #1ec09f;}   .footer_gotop img { width: 16px; }  

form {margin:0; padding:0}
input[type="radio"]  {width:25px;height:25px; vertical-align:middle}
input[type="checkbox"] {width:25px;height:25px; border-radius: 3px; vertical-align:middle}
input[type="text"], select {height: 40px; padding:5px;  font-size:15px; width:100%} 

.btn {text-align: center; font-size: 20px; min-width: 180px;  border-radius: 5px;  display: inline-block;  padding: 12px 25px; color: #ffffff !important; background: #17b39e; text-decoration: none }
.btn:hover { background: #000000;  color: #24f5cb !important;  text-decoration: none; -webkit-animation-delay: 0.5s;  animation-delay: 0.5s; transition: 0.5s; }

.btn.other {background: #347fd4;}
.btn.other:hover {background: #000000; color: #6ba7eb !important;}

.btn2 {text-align: center; min-width: 130px;  border-radius: 50px;  display: inline-block;  padding: 10px 20px; color: #ffffff !important; background: #17b39e; text-decoration: none }
.btn2:hover { background: #000000;  color: #24f5cb !important;  text-decoration: none; -webkit-animation-delay: 0.5s;  animation-delay: 0.5s; transition: 0.5s;}
 
.btn3 {text-align: center; font-size: 15px;  min-width: 100px; border:2px #1cc09f solid; border-radius: 50px;  display: inline-block;  padding: 5px 15px; color: #1cc09f !important;  text-decoration: none }
.btn3:hover { background: #000000;  color: #24f5cb !important;  text-decoration: none; -webkit-animation-delay: 0.5s;  animation-delay: 0.5s; transition: 0.5s;}
a:hover .btn3 { background: #000000;  color: #24f5cb !important;  text-decoration: none; -webkit-animation-delay: 0.5s;  animation-delay: 0.5s; transition: 0.5s;}

@media all and (max-width: 780px){
	body {font-size: 15px;}
	.footer_left, .footer_right {width: 100%; text-align: left }
	h1 {font-size:23px;}
	.btn {font-size: 16px; padding: 10px 18px; }
}


/* Main */
.main header {padding-top:15px;}
.main header .logo_ylw {width: 172px; max-width:40% }
.main header .logo_kpc {width: 192px; max-width:42%; float:right }

.main header .left_title {width:60%; display: inline-block}
.main header .left_title h1 {color:#000; margin:80px 0 40px 0}
.main header .right_img {width:39%; display: inline-block; text-align: right}
.main header .right_img img {width: 382px; max-width: 100%; margin: -80px 0 -100px 0}

.main section {clear: both; background: #f3f4f8; padding: 85px 0 20px 0;}

@media all and (max-width: 780px){
.main header .left_title {width: 100%}
.main header .left_title h1 {margin:30px 0 20px 0}
.main header .right_img {display: none}
.main section {padding: 20px 0 0 0;}
}

.main section .link {border:1px #e7eaec solid; border-left: 7px #1ec09f solid; background: #ffffff; border-radius: 4px; padding: 25px; margin-bottom:25px; float:left; overflow: hidden; position: relative; font-size:22px; color:#000000; cursor: pointer; text-decoration: none }
.main section .link img {width: 50%; max-width: 188px; position: absolute; bottom:0}

.main section .link .go {position: absolute; right:20px; bottom:20px; font-size: 16px; background: #1ec09f; color:#ffffff; padding:10px 30px; border-radius: 50px;}

.main section .link:hover {border:1px #1ec09f solid; border-left: 7px #006d5c solid; background: #1ec09f; color:#ffffff; animation-delay: 0.5s;  transition: 0.5s; }
.main section .link:hover .go {background: #000000; color:#24f5cb;  animation-delay: 0.5s;  transition: 0.5s; }

.main section .link1 {width:32%; height:350px; margin-right:2%; }
.main section .link1.nolink {float:left;margin-bottom:25px;}
.main section .link2 {width:32%; height:163px; }
.main section .sublink {float:none;display:block;height:163px;}

@media all and (max-width: 980px){
.main section .link1 {width:48%; height:350px; margin-right:2%; }
.main section .link2 {width:48%; height:140px; margin-right:2%; }
}

@media all and (max-width: 640px){
.main section .link {font-size:17px;}
.main section .link .pc {display: none} 	
.main section .link1 {width:100%; height:280px; margin-right:0; }
.main section .link2 {width:100%; height:100px; margin-right:0; }
.main section .link1.nolink {height:225px;}
.main section .sublink {height:100px;}
#main_notice_list td {font-size:15px !important;}
}


/* Exam Login */
.examlogin header {padding-top:15px;}
.examlogin header .left_title {width:60%; display: inline-block}
.examlogin header .left_title h1 {margin:30px 0}
.examlogin header .right_img {width:35%; display: inline-block; text-align: right}
.examlogin header .right_img img {width: 309px; max-width: 100%; margin: -180px 0 -50px 0}

.examlogin section {clear: both; background: #f3f4f8; padding: 70px 20px 20px 20px;}
.examlogin section th {font-weight: normal; text-align: left; padding-right:10px;}
.examlogin section td {padding: 5px 0}

@media all and (max-width: 780px){
.examlogin header .left_title {width: 100%}
.examlogin header .right_img {display: none}
.examlogin section  {padding: 15px;}
}
.header_gohome {padding:12px; width:55px; height:55px; border-radius: 50px; text-align: center;  background: #1ec09f; display: block }
.header_gohome:hover {background: #006d5c}   .header_gohome img { width: 26px; opacity: 0.7}  .header_gohome:hover img {opacity: 1}
.help_link img {width: 26px}


/* Exam Detail */
.examdetail {background: #f3f4f8 }
.examdetail .left_content {width: calc(100% + -220px); float:left; }  
.examdetail .left_content h2 {margin: 20px 0 15px 0}
.examdetail .left_content .timer {float: right; padding-top:5px;}
.examdetail .left_content .bg-white {border:1px #e7eaec solid; padding: 30px; margin-top:15px; }
.examdetail .left_content .bg-white h2  {margin-top:0; margin-bottom: 15px; padding-bottom:15px; border-bottom:2px #202020 solid}
.examdetail .left_content .q_text { width: calc(100% + -250px); display: inline-block; padding-right:10px; }  
/*
.examdetail .left_content .q_text h3 {margin:10px 0; font-weight: normal}
.examdetail .left_content .q_text p {display: block; margin-top: 30px; padding: 25px 0 0 0; border-top:1px #e7eaec solid }
*/
.examdetail .left_content .q_img { width:242px; float:right; text-align: center; padding-bottom:15px; } 
.examdetail .left_content .q_img .thumbnail { width:242px; border:1px #e7eaec solid; margin-bottom:10px;}
.examdetail .left_content ul {clear:both; border-top:1px #202020 solid; margin-top:15px; padding-top: 5px;}
.examdetail .left_content ul li {margin: 35px 0; padding-left:50px; }
.examdetail .left_content ul li .num {display: block; float:left; width:40px; padding-top:5px; text-align: center;  height:40px; border:2px #1cc09f solid; border-radius: 50px; margin-left:-50px; margin-top:-10px; font-weight: bold; font-size:20px; color:#1cc09f }
.examdetail .left_content ul li a:hover .num, .examdetail .left_content ul li .num_active {background: #1cc09f; color:#ffffff}
.examdetail .left_content .review {text-align: right} .examdetail .left_content .review p {margin:5px 0 10px 0; color: #808080; font-size:13px;}

.examdetail .right_list {width: 200px ; float:right; background: #e9e9f1;  padding: 10px; margin-bottom: 15px; } 
.examdetail .right_list h4 {margin:10px 0; text-align: center; font-weight: normal}
.examdetail .right_list .bg-white  {background: #ffffff; border:1px #e7eaec solid; padding: 10px; }
.examdetail .right_list ul {display: inline-block; margin:5px 0 5px 4px; font-size:15px; }
.examdetail .right_list ul li {display: inline-block; }
.examdetail .right_list ul li:first-child {text-align: center; width:45px; border:1px #1cc09f solid; color:#1cc09f }
.examdetail .right_list ul .active {background: #1cc09f; color:#ffffff !important }
.examdetail .right_list ul li:nth-child(2) {width:75px; padding-left:7px;} 
.examdetail .right_list ul li:nth-child(3) {width:15px;}
.examdetail .right_list ul li:nth-child(3) img {width:15px;}
.examdetail .right_list .btn {margin-top:5px;}

@media all and (min-width: 851px){
	.examdetail .left_content .bg-white  { height: calc(100vh + -130px) ; overflow-y: auto}   
	.examdetail .left_content .bg-white.erp_link  { height: calc(100vh + -202px) ; overflow-y: auto}   
	.examdetail .right_list  .bg-white { height: calc(100vh + -145px) ; overflow-y: auto}    
}
@media all and (max-width: 1230px){
	.examdetail .left_content {width: calc(100% + -200px);}   
	.examdetail .left_content .bg-white  { padding:20px; }	
	.examdetail .right_list {margin-right:-15px}
	
}
@media all and (max-width: 780px){
	.examdetail .left_content {width: 100%;}   
	.examdetail .right_list {margin-right:0; width: 100%}
}
@media all and (max-width: 560px){
	.examdetail .left_content .timer {width:100%; float:none; display: block}	
	.examdetail .left_content .q_text {width: 100%; display: block;  padding-right: 0}   
	.examdetail .left_content .q_img {width:100%; display: block; }
}

/* Mock Exam */
.topmenu {border-bottom: 1px #e7eaec solid; min-height: 50px;}
.topmenu ul {margin:0; padding:0}
.topmenu ul li {display: inline-block; margin-right: 5%} 
.topmenu ul li:last-child {margin-right: 0} 
.topmenu ul li a {display: inline-block; line-height:25px; padding: 12px 0 12px 0; font-size:15px; }
.topmenu ul li:hover, .topmenu ul .active  {border-bottom: 2px #1ec09f solid}
.topmenu ul .gohome { margin-top: -3px }
.topmenu ul .gohome a {padding: 1px; width:35px; height:35px; border-radius: 50px; text-align: center;  background: #1ec09f; display: block;  }
.topmenu ul .gohome:hover {border-bottom:0} 
.topmenu ul .gohome:hover a {background: #006d5c; } 
.topmenu ul .gohome img { width: 20px; opacity: 0.7} 
.topmenu ul .gohome:hover img {opacity: 1}

.mock header .left_title {width:65%; display: inline-block}
.mock header .left_title h1 {margin: 80px 0 30px 0}
.mock header .right_img {width:30%; display: inline-block; text-align: right}
.mock header .right_img img {width: 250px; max-width: 100%; margin: -80px 0 -25px 0}

.mock section {clear: both; background: #f3f4f8; padding: 3.5% 5%;}

.mocklist_table {width:100%; border-top: 1px #dcdfe1 solid;}
.mocklist_table th {font-weight: normal; text-align: left; padding: 3px 0;  border-bottom: 1px #dcdfe1 solid;}
.mocklist_table td {padding: 3px 0; border-bottom: 1px #dcdfe1 solid; width:20%}
.mocklist_table td .btn2 {width:100%; min-width: 60px; border-radius: 4px} 
.mocklist_table td .btn2 img {width: 8px; margin: 0 0 2px 10px}
@media all and (max-width: 780px){
.mock header .left_title {width: 100%}
.mock header .left_title h1 {margin: 30px 0}	
.mock header .right_img {display: none}
.mock section  {padding: 15px;}
.mocklist_table td .btn2 img {display: none}
}

.mock .search_set {}
.mock .search_set div:first-child {width:30%; float:left }
.mock .search_set div:nth-child(2) {width:40%; float:left } 
.mock .search_set div:nth-child(2) input[type="text"] {width: calc(100% + -55px) }
.mock .search_set div:nth-child(2) button {width:38px; height:40px; margin:0 0 0 -2px; padding:5px; background: #1ec09f; border:0; cursor: pointer}
.mock .search_set div:nth-child(2) button:hover {background: #006d5c}
.mock .search_set div:last-child  {width:30%; float:left }

.pagination {margin:25px 0 10px 0; line-height:25px; }
.pagination a {padding: 3px; width: 35px; height: 35px; text-align: center;  background: #1ec09f; display: inline-block;  }
.pagination a img { width: 8px; opacity: 0.7} 
.pagination a:hover {background: #006d5c} 
.pagination a:hover img {opacity: 1}

.mockinfo_table {margin: -15px auto 0 auto; width:100%; max-width: 800px;  }
.mockinfo_table th {width: 20%; font-weight: normal; text-align: left; padding: 20px 8px 20px 0;  font-weight: bold;  border-bottom: 1px #dcdfe1 solid; color:#006d5c}
.mockinfo_table td {padding: 20px 0; border-bottom: 1px #dcdfe1 solid; }


/* Mock Score */
.score {font-size:16px;}
@media all and (max-width: 780px){
	.score {font-size: 14px;}
}
.score_table {width:100%; border-top: 1px #dcdfe1 solid; border-left: 1px #dcdfe1 solid;   }
.score_table th {width: 20%; font-weight: normal; padding: 10px;  border-bottom: 1px #dcdfe1 solid; border-right: 1px #dcdfe1 solid;  background: #f3f4f8}
.score_table td {padding: 10px; border-bottom: 1px #dcdfe1 solid; border-bottom: 1px #dcdfe1 solid; border-right: 1px #dcdfe1 solid;  }
.overflow-x-auto .score_table th { width: 5% ; font-size: 14px; padding: 10px 1px;  }
.overflow-x-auto .score_table td {text-align: center ; font-size: 14px; padding:  10px 5px;  }
.overflow-x-auto .score_table td img {max-width: 18px;}
.score h4 {margin-bottom:10px;}

@page {size:21cm 29.7cm; margin: 30px 10px}
@media print{
	.topmenu, .btn, .btn3, footer {display:none}
	.overflow-x-auto {overflow-x: visible} 
}


/* bbweb style : style_bbweb.css included */
.qhead {position:relative;}
.qhead img {position:absolute; left:0;top:-4px; opacity:0.8;}
.btn3.noani:hover {background: #fff;  color: #1cc09f !important;  -webkit-animation-delay: 0s;  animation-delay: 0s; transition: 0s;}
.subjective_item {text-align: center; font-size: 15px;  min-width: 100px; border:2px #ddd solid; border-radius: 50px;  display: inline-block;  padding: 5px 15px; text-decoration: none; margin-right:10px;}
.correct_answer {color:#347fd4;}

.examdetail .left_content .erp_link_box {text-align:right; clear:both; margin-top:20px; font-size:14px;}
.examdetail .left_content .q_text .title {margin:10px 0; font-weight: normal}
.examdetail .left_content .q_text .comment {display: block; margin-top: 30px; padding: 25px 0 0 0; border-top:1px #e7eaec solid }
.examdetail .left_content .q_img .thumbnail { width:242px; border:1px #e7eaec solid; margin-bottom:10px; background-size:cover; background-position:center center;}
.examdetail .left_content ul li {margin: 15px 0; padding-left:30px; position:relative;}
.examdetail .left_content ul li img.icon_check {position:absolute;width:20px;height:20px; left:-20px;top:5px;}
.examdetail .left_content .review {text-align: right; margin-bottom:50px;} .examdetail .left_content .review p {margin:5px 0 10px 0; color: #808080; font-size:13px;}
.examdetail .right_list ul li:nth-child(2) {width:76px; padding-left:7px; white-space:nowrap;} 

.icontainer {
    display: inline-block;
    position: relative;
    height:30px;
    margin:0 0 0 -30px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.icontainer.txt {
    /* label텍스트가 있는 경우*/
    padding-left:35px;
}
.icontainer.left {
    /* 가운데정렬이 아닌 왼쪽정렬인 경우*/
    margin-left:0;
}
.icontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.icontainer.disabled {
	cursor:default;
}
.icontainer.disabled input {
	cursor:default;
}
.checkmark,
.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border:solid 1px #46bf9e;
    border-radius: 3px;
}
.radiomark {
    border-radius: 50%;
}
.icontainer.hover:hover input ~ .checkmark,
.icontainer.hover:hover input ~ .radiomark {
    background-color: #8adac4;
}
.icontainer.hover:hover input ~ .radiomark:after {
    color:#fff;
}
.icontainer input:checked ~ .checkmark,
.icontainer input:checked ~ .radiomark {
    background-color: #46bf9e;
}

li.correct_answer .icontainer input ~ .radiomark:after {
    color:#fff;
}
li.correct_answer .icontainer input ~ .checkmark,
li.correct_answer .icontainer input ~ .radiomark {
    background-color: #347fd4;
    border:solid 1px #347fd4;
}
/*
.icontainer input[disabled] ~ .checkmark,
.icontainer input[disabled] ~ .radiomark {
    background-color: #ddd;
    border:solid 1px #ddd;
}
*/
.checkmark:after,
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}
ul li:nth-child(1) .radiomark:after {content: "1";}
ul li:nth-child(2) .radiomark:after {content: "2";}
ul li:nth-child(3) .radiomark:after {content: "3";}
ul li:nth-child(4) .radiomark:after {content: "4";}
ul li:nth-child(5) .radiomark:after {content: "5";}
ul li:nth-child(6) .radiomark:after {content: "6";}
ul li:nth-child(1) .icontainer input:checked ~ .radiomark:after {color:#fff;}
ul li:nth-child(2) .icontainer input:checked ~ .radiomark:after {color:#fff;}
ul li:nth-child(3) .icontainer input:checked ~ .radiomark:after {color:#fff;}
ul li:nth-child(4) .icontainer input:checked ~ .radiomark:after {color:#fff;}
ul li:nth-child(5) .icontainer input:checked ~ .radiomark:after {color:#fff;}
ul li:nth-child(6) .icontainer input:checked ~ .radiomark:after {color:#fff;}

.icontainer input:checked ~ .checkmark:after,
.icontainer input:checked ~ .radiomark:after {
    display: block;
}

.icontainer .radiomark:after {
    display: block;
    top: 1px;
    left: 9px;
    font-size: 20px;
	font-weight:bold;
	color:#46bf9e;
}
.icontainer .checkmark:after {
    left: 7px;
    top: 1px;
    width: 10px;
    height: 16px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.footer_menu {display:inline-block; margin-right:40px;}
.footer_menu a {padding-right:5px; color:#93d500 !important; font-weight:700 !important; text-decoration:underline;}
@media all and (max-width: 1024px){
	.footer_menu {display:block; margin-right:0; margin-bottom:10px;}
}

#main_notice_list {width:100%; margin-top:20px;}
#main_notice_list td {font-size:18px; text-align:left; padding:5px 0; vertical-align:top;}
#main_notice_list td.title {width:90%;}
#main_notice_list td.date {white-space:nowrap; text-align:right; padding-left:20px;}

@media all and (max-width: 620px){
	.topmenu ul li {margin-right: 1%} 
}
/* bbweb style end */