@charset "utf-8";

/* 온라인 수강신청 */
/* step1 */
.application_step {background-color: #eae9e7;}
.application_step .step3 .step_wrap {display: none}
.application_step .open .step_wrap {display: block;}

.application_step .step_title {padding: 10px; background: url("../images/application/step_bg.gif") no-repeat 100% 100% #da2226; background-size: 15px 15px;}
.application_step .step_title .step_number {display: none;}
.application_step .step_title strong {font-size: 15px; color: #fff;}
.application_step .step_wrap {padding: 10px; border-left: 1px solid #cacaca; border-right: 1px solid #cacaca;}
.application_step .step_wrap label,
.application_step .step_wrap .label {position: relative; display: block; box-sizing: border-box; font-weight: bold; color: #777; background-color: #fff; border-radius: 5px; line-height: 16px;}
.application_step .step_wrap input {position: absolute; overflow: hidden; width: 0; height: 0; opacity: 0;}

.application_step .step_wrap label + label,
.application_step .step_wrap .step_menu_wrap + label {margin-top: 5px;}
.application_step .step_wrap .step_menu_wrap {margin-top: 5px; background-color: #fff; border-radius: 5px;}
.application_step .step_wrap .step_menu_wrap label {font-weight: normal;}
.application_step .step_wrap .step_menu_wrap.close label {display: none;}
.application_step .step_btn {display: -webkit-flex; display: flex; display: -webkit-box; display: box; /* margin-top: -7px; padding: 0 10px 10px; */ padding: 10px; border: 1px solid #cacaca; border-top: 0 none;}
.application_step .step_btn button,
.application_step .step_btn a {-webkit-flex: 1; flex: 1; -webkit-box-flex: 1; box-flex: 1; display: block; border: 0; padding: 8px 10px; border-radius: 3px; font-weight: bold; font-size: 15px; color: #fff; text-align: center;}
.application_step .step_btn button {background-color: #534d4d;}
.application_step .step_btn button:before {content:""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; background: url("../images/application/reset.png") no-repeat 0 0; background-size: cover;}
.application_step .step_btn a {margin-left: 4px; background-color: #f23b3f;}
.application_step .step1 .step_wrap.campus label:before,
.application_step .step1 .step_wrap.lecture label:after,
.application_step .step2 .step_wrap label:after,
.application_step .step4 .step_wrap input + label:after {content: ""; box-sizing: border-box; display: inline-block; width: 24px; height: 24px; border: 2px solid #dcdcdc; border-radius: 21px; background-color: #fff;}
.application_step .step1 .step_wrap.campus label:before {vertical-align: top; margin-right: 4px;}
.application_step .step1 .step_wrap.lecture label:after,
.application_step .step2 .step_wrap label:after {position: absolute; top: 4px; right: 10px;}

.application_step .step1 .campus .list {display: -webkit-flex; display: flex; display: -webkit-box; display: box;}
.application_step .step1 .campus .list label {-webkit-flex: 1; flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 0 0 0 3px; padding: 4px 0; line-height: 24px; text-align: center;}
.application_step .step1 .lecture .list label, .application_step .step2 .step_wrap label, .application_step .step2 .step_wrap .label {padding: 8px 30px 8px 10px;}
.application_step .step3 .step_wrap {border: 0 none; background-color: #534d4d;}
.application_step .step3 .step_wrap .list {overflow: hidden; text-align: center;}
.application_step .step3 .step_wrap label {float: left; box-sizing: border-box; width: 62px; height: 62px; margin: 4px 0 0 4px; padding: 0; border-radius: 62px; border: 1px solid #a8a5a5; background-color: transparent; line-height:62px; color: #fff; text-align: center;}
.application_step .step3 .step_wrap .checked {background-color: #f23b3f; border-color: #f23b3f;}
.application_step .step4 .step_wrap li {overflow: hidden; box-sizing: border-box; margin-bottom: 7px; background-color: #fff; border-radius: 5px;}
.application_step .step4 .step_wrap input + label:after {position: absolute; top: 10px; left: 60px;}
.application_step .step4 .step_wrap .time {padding: 10px; border-bottom: 1px solid #ddd; background-color: #f8f8f8; color: #777;}
.application_step .step4 .step_wrap .time .bul_txt {margin-right: 4px;}
.application_step .step4 .step_wrap .time .status {float: right;}
.application_step .step4 .step_wrap .time .status .offline {color: #da2226;}
.application_step .step4 .step_wrap .time .status .recommend {color: #f57e20;}
.application_step .step4 .step_wrap .time .status .closest {color: #777;}
.application_step .step4 .step_wrap .time .status .ended {color: #222;}
.application_step .step4 .step_wrap label {position: relative; min-height: 92px; padding: 10px 10px 10px 90px;}
.application_step .step4 .step_wrap label > span {display: block;}
.application_step .step4 .step_wrap .img {position: absolute; left: 10px; top: 10px; margin-right: 10px;}
.application_step .step4 .step_wrap .img em {overflow: hidden; display: block; width: 72px; height: 72px; border-radius: 50%;}
.application_step .step4 .step_wrap .img img {width: 72px; height: 72px;}
.application_step .step4 .step_wrap .lecture {margin-top: 10px; font-size: 14px}
.application_step .step4 .step_wrap .teacher {font-weight: normal; color: #777;}
.application_step .step4 .step_wrap .pay {font-weight: normal; font-size: 15px; color: #da2226;}
.application_step .step4 .step_wrap .add_btn {display: -webkit-flex; display: flex; display: -webkit-box; display: box; padding: 0 10px 8px;}
.application_step .step4 .step_wrap .add_btn .button {display: block; -webkit-flex: 1; flex: 1; -webkit-box-flex: 1; box-flex: 1;}
.application_step .step4 .step_wrap .add_btn .button + .button {margin-left: 4px;}

.application_step .step_wrap .checked {color: #fff; background-color: #f23b3f;}
.application_step .step1 .step_wrap.campus .checked:before,
.application_step .step1 .step_wrap.lecture .checked:after,
.application_step .step2 .step_wrap .checked:after,
.application_step .step4 .step_wrap .checked label:after {background: url("../images/application/application_check.png") no-repeat 0 0 #fff; background-size: cover;}
.application_step .step4 .step_wrap .checked {border: 2px solid #da2226; margin-bottom: 5px;}
.application_step .step4 .step_wrap .checked .time {padding: 8px 8px 10px;}
.application_step .step4 .step_wrap .checked label {padding: 10px 8px 10px 88px;}
.application_step .step4 .step_wrap .checked label:after {left: 58px;}
.application_step .step4 .step_wrap .checked label + label {margin-left: 3px;}
.application_step .step4 .step_wrap .checked .img {left: 8px;}
.application_step .step4 .step_wrap .checked .add_btn { padding: 0 8px 8px;}
.application_step .step4 .step_wrap .checked .add_btn .button {-webkit-flex: 1; flex: 1; -webkit-box-flex: 1; box-flex: 1;}
.application_step .step4 .step_wrap .checked .add_btn .button + .button {margin-left: 4px;}

/*수강신청-캠별 색 구분_2020_0129*/
/*캠별 색구분*/
.application_step .step_wrap .checked4{
    background-color: #048b7c;
}
.application_step .step_wrap .checked6{
	background-color: #9f4b98;
}
.application_step .step_wrap .checked8{
	background-color: #3ba3f2;
}
.application_step .step_wrap .checked4:after{
	background: url(../images/application/application_check_g.png) no-repeat 0 0 #fff!important;
	border: 2px solid #048b7c!important;
    background-size: cover!important;
}
.application_step .step_wrap .checked5:after{
    background: url(../images/application/application_check.png) no-repeat 0 0 #fff!important;
	border: 2px solid #f23b3f!important;
    background-size: cover!important;
}
.application_step .step_wrap .checked6:after{
	background: url(../images/application/application_check_s.png) no-repeat 0 0 #fff!important; 
    border: 2px solid #9f4b98!important;
    background-size: cover!important;
}
.application_step .step_wrap .checked8:after{
	background: url(../images/application/application_check_oncam.png) no-repeat 0 0 #fff!important; 
    border: 2px solid #3ba3f2!important;
    background-size: cover!important;
}
.application_step .step1 .step_wrap.lecture .checked4:after{
    border: 2px solid #048b7c;
}
.application_step .step1 .step_wrap.lecture .checked5:after{
    border: 2px solid #f23b3f;
}
.application_step .step1 .step_wrap.lecture .checked6:after{
    border: 2px solid #9f4b98;
}
.application_step .step1 .step_wrap.lecture .checked8:after{
    border: 2px solid #3ba3f2;
}
.application_step .step1 .step_wrap.campus .checked4:before, .application_step .step4 .step_wrap .checked4 label:after{
    background: url(../images/application/application_check_g.png) no-repeat 0 0 #fff;
    border: 2px solid #048b7c;
    background-size: cover;
}
.application_step .step1 .step_wrap.campus .checked5:before, .application_step .step4 .step_wrap .checked5 label:after{
    background: url(../images/application/application_check.png) no-repeat 0 0 #fff;
    border: 2px solid #f23b3f;
    background-size: cover;
}
.application_step .step1 .step_wrap.campus .checked6:before, .application_step .step4 .step_wrap .checked6 label:after{
    background: url(../images/application/application_check_s.png) no-repeat 0 0 #fff;
    border: 2px solid #9f4b98;
    background-size: cover;
}
.application_step .step1 .step_wrap.campus .checked8:before, .application_step .step4 .step_wrap .checked8 label:after{
    background: url(../images/application/application_check_oncam.png) no-repeat 0 0 #fff;
    border: 2px solid #3ba3f2;
    background-size: cover;
}
.application_step .step3 .step_wrap .checked4 {
    background-color: #048b7c;
    border-color: #048b7c;
}
.application_step .step3 .step_wrap .checked6 {
    background-color: #9f4b98;
    border-color: #9f4b98;
}
.application_step .step3 .step_wrap .checked8 {
    background-color: #3ba3f2;
    border-color: #3ba3f2;
}

/* //step1 */

.application .use_sisa_point {background-color: #fafafa; text-align: center;}
.application .use_sisa_point .my_point strong,
.application .use_sisa_point .my_point strong em {font-size: 15px; color: #222;}
.application .use_sisa_point .use_point { vertical-align: top;}
.application .use_sisa_point .use_point input {width: 100px; text-align: right;}
.application .use_sisa_point .use_point .txt_point {padding-left: 10px; padding-right: 20px; color: #777;}

.application .payment_info {margin-bottom: 10px; border: 1px solid #d4d4d4;}
.application .payment_info dl {position: relative; display: table; width: 100%;}
.application .payment_info dl + dl dt, .application .payment_info dl + dl dd {border-top-width: 1px; border-top-style: solid;}
.application .payment_info dt, .application .payment_info dd {display: table-cell; height: 40px; vertical-align: middle;}
.application .payment_info dt {width: 100px; background-color: #444; font-weight: bold; font-size:; color: #fff; text-align: center; border-color: #616161;}
.application .payment_info dd {padding-left: 15px;  border-color: #d4d4d4;}
.application .payment_info dd span {font-weight: bold; font-size: 15px;}
.application .payment_info dd .caption {font-weight: normal; color: #da2226;}
.application .payment_info .discount dd span {color: #da2226;}
.application .payment_info .use_point dd span {color: #da2226;}
.application .payment_info .result dd span {}
.application .payment_info .add_point dd span {color: #da2226;}

.application .payment_info .order_num dd {font-weight: normal;}
.application .payment_info .discount dt:before,
.application .payment_info .use_point dt:before,
.application .payment_info .result dt:before,
.application .payment_info .add_point dt:before {content:''; display: block; position: absolute; top: -7px; left: 43px; width: 15px; height: 15px; background: url("../images/application/bul_payment_info.png") no-repeat 0 0 ; background-size: 15px auto; z-index: 1;}
.application .payment_info .discount dt:before,
.application .payment_info .use_point dt:before {background-position: 0 0;}
.application .payment_info .result dt:before {background-position: 0 -40px;}
.application .payment_info .add_point dt:before {background-position: 0 -20px;}
.application .payment_selection dl {overflow: hidden;}
.application .payment_selection dt, .application .payment_selection dd {float: left;}
.application .payment_selection dt {margin-right: 15px; padding-left: 8px; font-weight: bold; color: #222;}
.application .payment_selection dd {color: #777;}
.application .payment_selection input[type="radio"] {margin-right: 4px;}
.application .payment_selection label {color: #777;}
.application .payment_selection .result {background-color: #fafafa;}
.application .payment_selection .result .amount {margin-bottom: 10px; font-weight: bold; font-size: 25px; line-height: 1; text-align: right; color: #da2226; letter-spacing: -1px;}
.application .payment_selection .result .amount em {font-weight: bold; font-size: 25px; color: #da2226; letter-spacing: -1px;}
.application .payment_selection .result .button {width: 100%; height: auto; padding: 16px 0; font-size: 14px; line-height: 14px;}

/* 수강신청 불가 */
.application .message_box.online_disabled {padding: 35px 0;}
.application .message_box.online_disabled .message_tit {margin-bottom: 10px;}
.application .message_box.online_disabled p {font-size: 14px; line-height: 1.5;}

/* 레벨테스트 */
.leveltest_intro .intro_txt {margin-bottom: 20px; text-align: center;}
.leveltest_intro .intro_txt .sub_txt {margin-bottom: 10px; line-height: 1.5; color: #777;}
.leveltest_intro .intro_txt .title {font-weight: bold; font-size: 15px; color: #bf1b1e; line-height: 1.5;}
.application .leveltest_intro {margin-bottom: 10px;}
.application .leveltest_intro .test_btn_area {margin-bottom: 10px;}
.application .leveltest_intro .test_exam,
.application .leveltest_intro .test_conversation {display: block; padding: 20px 30px 20px 120px;}
.application .leveltest_intro .test_offline {display: block; padding: 20px 30px 20px 120px;}
.application .leveltest_intro .test_exam {background: url("../images/application/bg_leveltest_exam.png") no-repeat 0 50% #da2226; background-size: 120px auto;}
.application .leveltest_intro .test_conversation {background: url("../images/application/bg_leveltest_conversation.png") no-repeat 0 50% #ec4623; background-size: 120px auto;}
.application .leveltest_intro .test_offline {background: url("../images/application/bg_leveltest_offline.png") no-repeat 0 50% #ec8823; background-size: 120px auto;}
.application .leveltest_intro .test_title {font-weight: bold; font-size: 15px; color: #fff;}
.application .leveltest_intro .test_txt {margin-top: 10px; color: #fff;}
.application .leveltest_intro .start {width: 120px; margin-top: 10px; padding: 8px 0; border: 1px solid #fff; font-weight: bold; color: #fff; text-align: center;}
.application .level_select {max-width: 500px; margin: 0 auto;}
.application .level_select .level_box + .level_box {margin-top: 5px;}
.application .level_select .level_box .test_name {padding: 20px 0; font-weight: bold; font-size: 15px; text-align: center; color: #fff; background: url("../images/application/bg_levelbox.png") repeat 0 0; background-size:  10px 10px;}
.application .level_select .test_guide {height: 0; overflow: hidden;}
.application .level_select .test_guide .layer_wrap {position: relative; box-sizing: border-box; width: 100%; padding: 10px; background-color: #fff; border: 1px solid #ddd;}
.application .level_select .test_guide .layer_wrap:before {content: ""; display: block; width: 15px; height: 15px; position: absolute; top: -9px; left: 50%; margin-left: -9px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.application .level_select .level_box.active .test_guide{height: auto; padding-top: 12px;}
.application .level_select .test_guide .level_tit {font-weight: bold;}
.application .level_select .test_guide .level_txt {padding: 10px 0; color: #777; line-height: 1.5;}
.application .level_select .level_10 .test_name {background-color: #da2226;}
.application .level_select .level_9 .test_name {background-color: #de3323;}
.application .level_select .level_8 .test_name {background-color: #e24520;}
.application .level_select .level_7 .test_name {background-color: #e5571d;}
.application .level_select .level_6 .test_name {background-color: #ea6c19;}
.application .level_select .level_5 .test_name {background-color: #f39612;}
.application .level_select .level_4 .test_name {background-color: #f39612;}
.application .level_select .level_3 .test_name {background-color: #f7a90e;}
.application .level_select .level_2 .test_name {background-color: #fbba0b;}
.application .level_select .level_1 .test_name {background-color: #ffcc08;}
.application .message_box.test_result .tit {font-size: 15px; color: #da2226;}
.application .message_box.test_result .result_graph {margin: 15px auto 10px;}
.application .message_box.test_result .txt {font-size: 13px;}
.application .message_box.test_result .sub_txt {margin-top: 5px; font-weight: normal; line-height: 1.5; color: #777;}
.application .level_question {margin-bottom: 10px; padding: 10px; border: 1px solid #d4d4d4; font-weight: bold; font-size: 15px; color: #222;}
.application .level_question img {max-width: 100%;}
.application .level_test {border: 1px solid #d4d4d4;}
.application .level_test + .level_test {margin-top: 20px;}
.application .level_test .guide_area {position: relative; background-color: #fafafa;}
.application .level_test .guide_area .txt {padding: 15px 75px 15px 15px; min-height: 35px; font-size: 15px; line-height: 1.25; border-bottom: 1px solid #d4d4d4;}
.application .level_test .guide_area .count {position: absolute; right: 15px; top: 15px;}
.application .level_test .guide_area .count span {font-size: 18px; line-height: 1; color: #777;}
.application .level_test .guide_area .count span strong {font-size: 30px; color: #bf1b1e;}
.application .level_test .selection {padding: 20px;}
.application .level_test .selection .question {font-weight: bold; font-size: 15px; color: #222;}
.application .level_test .selection .media {overflow: hidden; position: relative; margin-bottom: 10px;}
.application .level_test .selection .media * {display: block; overflow: hidden; position: relative; width: 100%;}
.application .level_test .selection .media audio {display: block; overflow: hidden; position: relative; width: 100%; min-height: 30px; color: inherit; background: #121212 url('../images/application/btn_play.png') no-repeat 10px center; background-size: 30px; -webkit-appearance: inherit;}
.application .level_test .selection .media audio.stop {background: #121212 url('../images/application/btn_stop.png') no-repeat 10px center; background-size: 30px;}
.application .level_test .selection .media img {max-width: 100%;}
.application .level_test .selection .media + .question {padding-top: 28px;}
.application .level_test .selection .anwser li + li {margin-top: 20px;}
.application .level_test .selection .anwser * {color: #777;}
.application .level_test .selection .anwser input[type="radio"] {margin-right: 5px;}
.application .my_leveltest .graph_area {border: 10px solid #f8552f;}
.application .my_leveltest .graph_desc .tit {margin-bottom: 10px; font-weight: bold; font-size: 15px; color: #da2226;}
.application .my_leveltest .graph_desc .txt {font-weight: bold;}
.application .my_leveltest .graph_desc .sub_txt {font-weight: bold; color: #777;}

/* 근로자직업능력개발훈련제도 */
.application.employee .text_box {overflow: hidden; font-size: 14px; color: #777; line-height: 24px;}
.application.employee .text_box > div {padding: 12px 15px; border: 1px solid #d4d4d4; text-align: center; color: #777;}
.application.employee .text_box > div + div {margin-top: 5px;}
.application.employee .text_box > div:nth-child(even) {background: #f7f7f7;}
.application.employee .support_amount {overflow: hidden; position: relative; padding: 20px 10px; border: 5px solid #da2226; text-align: center; background-color: #f6f6f6;}
.application.employee .support_amount:before,
.application.employee .support_amount:after {content: ""; display: block; position: absolute; width: 40px; height: 40px; background-color: #da2226; box-shadow: 1px 0 rgba(150,150,150,0.5);}
.application.employee .support_amount:before {top: -20px; left: -20px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.application.employee .support_amount:after {right: -20px; bottom: -20px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
.application.employee .support_amount strong {font-size: 15px;}
.application.employee .support_amount p {margin-top: 5px; color: #777;}
.application.employee .number {overflow: hidden;}
.application.employee .number li {position: relative; padding: 15px 0 15px 50px; border-bottom: 1px dashed #dcdcdc; line-height: 1.5;}
.application.employee .number .num1:before {content:'';}
.application.employee .number li p {margin-top: 10px; font-size: 11px;}
.application.employee .number li p + p {margin-top: 4px;}
.application.employee .number li:before {position: absolute; left: 0; top: 15px; display: inline-block; width: 36px; height: 36px; background-color: #da2226; border-radius: 36px; font-style: italic; font-size: 20px; line-height: 36px; color: #fff; text-align: center; text-indent: -3px;}
.application.employee .number .num1:before {content:'1';}
.application.employee .number .num2:before {content:'2';}
.application.employee .number .num3:before {content:'3';}
.application.employee .number .num4:before {content:'4';}
.application.employee .card_apply_step .step_box + .step_box {margin-top: 7px;}
.application.employee .card_apply_step .step_box .tit {padding: 8px 10px; background-color: #da2226; font-weight: bold; color: #fff;}
.application.employee .card_apply_step .step_box ul {padding: 8px 10px; border: 1px solid #d4d4d4; border-top: 0 none;}
.application.employee .card_apply_step .step_box li {line-height: 1.8; color: #777; letter-spacing: -1px;}
.application.employee .btn_class {padding-top: 10px; text-align: right;}
.application.employee .tbl_wrap.type_info td {color: #777;}

/* 시간표 */
.timetable_area {margin-top: 15px;}
.timetable_area img {width: 100%;}