@charset "utf-8";

.sub_title{width: 100%;height: 350px;text-align: center;}
.sub_title h2{line-height: 350px;font-size: 4rem;display: inline-block;position: relative;color:#fff;}

.sub_title01{background: url('../img/sub_title_bg01.jpg') no-repeat 50% 50%;background-size: cover;}
.sub_title02{background: url('../img/sub_title_bg02.jpg') no-repeat 50% 50%;background-size: cover;}
.sub_title03{background: url('../img/sub_title_bg03.jpg') no-repeat 50% 50%;background-size: cover;}
.sub_title04{background: url('../img/sub_title_bg04.jpg') no-repeat 50% 50%;background-size: cover;}
.sub_title05{background: url('../img/sub_title_bg05.jpg') no-repeat 50% 50%;background-size: cover;}

.ovf{overflow: auto;}

.mobile_notice{display: none;background: #f8f8f8;padding: 20px;width: 50%;margin: 0 auto;border-radius: 90px;}

.sub_cont_tit{width: 100%;text-align: center;}
.cont_wrap h3{position: relative;font-size: 3.5rem;text-align: center;font-weight: 600;display: inline-block;margin-bottom: 70px;margin-top: 100px;}
.cont_wrap h3::after{content: '';display: block;width: 100%;left: 0;position: absolute;height: 5px;background: #088b67;top: 49px;border-radius: 100px;}
/********** sub nav *********/
#sub_nav{max-width: 1400px;width: 90%;margin: 0 auto;position: relative;z-index: 50;}
.location_area{width: 100%;height: 50px;background: #f8f8f8;margin-top: -50px;border-radius: 20px 20px 0 0;border-bottom: 1px solid #ddd;font-size: 1.6rem;}
.location_area .loc_h{background: url('../img/i_home.png') no-repeat 50% 50%;width: 50px;height: 50px;}
.location_area li{float: left;position: relative;height: 100%;width: 180px;text-align: left;line-height: 50px;text-indent: 20px;background: #f8f8f8;}
.location_area > li{border: 1px solid #ccc;border-bottom: none;border-left: none;border-top: none;}
.location_area > li button{font-size: 1.6rem;width: 100%;height: 100%;position: absolute;left: 0px;text-align: left;text-indent: 20px;}
.location_area > li button::after{content: '';display: block;background: url('../img/down_arrow.png') no-repeat;width: 15px;height: 8px;float: right;margin: 6px 10px;position: absolute;right: 3px;top: 50%;margin-top: -4px;}
.location_area > li ul{position: absolute;display: none;top: 100%;width: 100%;left: -1px;}
.location_area > li li{border: 1px solid #ccc;margin-top: -1px;width: 100%;}
.location_area > li li:nth-child(1){margin-top: 0px;}

/*******평생직업교육포털********/
.lecture_sch{width: 100%;height: auto;border: 1px solid #cbcbcb;border-left: none;padding: 40px 20px;border-right: none;}
.lecture_sch h4{font-size: 2.8rem;display: inline-block;margin-bottom: 30px;width: 100%;text-align: center;font-weight: 500;}
.lecture_sch ul{display: flex;flex-wrap: wrap;justify-content: center;}
.lecture_sch li{float: left;width: 150px;text-align: center;margin-bottom: 20px;line-height:1;}

.lec_schform input{width: 20%;height: 40px;display: block;float: left;border-radius: 10px 0 0 10px;}
.lec_schform{display: flex;justify-content: center;}
.sch_btn{width: 80px;height: 40px;background: #31387d;color: #fff;font-size: 1.6rem;font-weight: 300;border-radius: 0 10px 10px 0;}
.lec_schform select{width: auto !important;float: left;display: block;height: 40px;color: #000;margin: 0 5px 0px 0;border-radius: 10px;}

.lec_schbox{line-height: 100px;display: flex;justify-content: center;flex-wrap: wrap;}
.lec_schbox span{margin: 0 0 15px 0;height: 100px;width: 100px;border: 1px dashed #d4d4d4;border-radius: 15px;}
.lec_active span{border: 3px solid #333;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.14);}
.lec_schbox span img{display: block;margin:0 auto;margin-top: 30px;}
.lec_schbox p{font-size: 1.6rem;word-break: keep-all;}

.lec_total b{color: #16916f;}

.tb1{width: 100%;min-width: 865px;}
.tb1 thead{background: #f8f8f8;border-top: 2px solid #000;border-bottom: 1px solid #000;}
.tb1 thead th{vertical-align: middle;padding: 15px;color: #000;font-weight: 500;}
.tb1 tbody td{vertical-align: middle;text-align: center;padding: 15px;border-bottom:1px solid #ddd;word-break: keep-all;}

.btn_s1{background: #333;padding: 2px 10px;border-radius: 5px;color: #fff;}

.mobile_notice img {display: block;height: 50px;margin: 0 auto;}

/********수강안내 - 수강신청절차**********/
.sequence_pc img, .sequence_mb img{width: 100%;}
.sequence_mb{display: none;}

/*********수강신청 - 전체교육과정**********/
.card_cont .sub_tab5{width:100%;}
.card_cont .sub_tab5 li{float:left;width: calc(20% - 10px);text-align:center;height: 55px;border:1px solid #ddd;border-radius: 5px;margin: 7px 5px;}
.card_cont .sub_tab5 li~li{}
.card_cont .sub_tab5 li button{font-size:1.6rem;line-height: 55px;width: 100%;}

.h5_title{font-size:20px;font-weight:500;margin: 20px 0 10px 0;}
.h5_title::before{content:'';display:block;background:url('../img/point.png') no-repeat;width: 20px;height: 20px;float: left;}

.tb2{border-top:2px solid #000;width: 100%;min-width:865px;}
.tb2 tr{border-bottom: 1px solid #e3e3e3;}
.tb2 tr th, .tb2 tr td {padding:10px 20px;vertical-align: middle;}
.tb2 th{color: #000;font-weight: 500;background:#f5f5f5;vertical-align: middle;}

.btn_box1{margin:0 auto;width: 30%;}
.btn_box1 button{width:48%;float:left;background:#0750A4;color:#fff;height:45px;margin:1%;border-radius: 7px;font-size: 1.8rem;}

.edu_count{text-align: center;width:100%;background:#f5f5f5;padding:30px;border-radius:10px;}
.edu_count p{color: #000;font-size:2.4rem;}
.edu_count span{font-weight:600; color:#E92A77;}
.edu_page_box ul{padding: 0 0 0 20px;line-height:26px;}
.edu_page_box b{color:#000}

/***********원격교육콘텐츠 - 온라인강의************/
.tb4 .video_title{text-align:left;vertical-align: middle;text-indent: 10px;}
.tb4 .video_title a{display:inline-block;}
.tb4 .video_title a::after{content:'';display:block;width:22px;height:22px;background:url('../img/play_btn.png') no-repeat;float: right;margin-left: 10px;}
.tb4{border-top:2px solid #000;width: 100%;min-width:865px;}
.tb4 tr{border-bottom: 1px solid #e3e3e3;}
.tb4 tr th, .tb4 tr td {padding:10px 20px;vertical-align: middle;}
.tb4 th{color: #000;font-weight: 500;background:#f5f5f5;vertical-align: middle;}
.tb4 td{text-align:center;}
.tb4  td, .tb4  th{border:1px solid #ddd;}

.btn_box2{margin:0 auto;width: 15%;}
.btn_box2 button{width:100%;background:#0750A4;color:#fff;height:45px;border-radius: 7px;font-size: 1.8rem;}

/***********원격교육콘텐츠 - 직업능력************/
.photoList a{width: 23%;display: block;height: auto;float: left;margin: 0 1% 30px;}
.photoList a:hover img{transform:scale(1.1);transition:all 0.6s ease;}
.photoList .img{border:1px solid #e3e3e3;border-radius:5px;overflow:hidden;}
.photoList .tit{display:inline-block; width:100%;margin:5px 0 0;}
.photoList .txt{display:inline-block;}
.photoList .lec_total{padding:0 1%;}
.photoList {display: flex;flex-wrap: wrap;align-items: flex-start;}
.photoList .lec_total {display:block;width: 100%;margin-bottom:20px;}

.total_area{padding:0px 1%;}

.pg_wrap{height:35px; width:100%;}
.pg li:hover{color: #16916f;transition:all 0s;}
.pg li{float:left;width: auto;height:35px;line-height:35px;text-align:center;background: #f9f9f9;}
.pg a{width:100%;height:100%;padding: 0 15px;}
.pg{height:35px;margin:0 auto;display: flex;justify-content: center;}

.pg_start{border-radius:10px 0  0 10px;font-size:2.5rem;padding:0;}
.pg_end{border-radius:0 10px 10px 0;font-size:2.5rem;padding:0;}
.pg_prev{padding:0;}
.pg_next{padding:0;}
.pg_current{color: #16916f;}

/****************원격교육콘텐츠 - 직업능력*****************/
.bbsView .head {padding: 15px 2%;border-bottom: 1px solid #bdbdbd;height: auto;background: #f5f5f5;border-top: 2px solid #000;}
.replyList		{ clear:both; border-top:2px solid #333;}
.replyList ul li		{width:100%;padding: 15px 1%;border-bottom:1px solid #e5e5e5;overflow:hidden;}
.replyList span.tt		{ font-size:13px; margin-top:10px; float:left; font-weight:600; color:#222;}
.replyList span.date	{ font-size:12px; margin:10px 0 0 15px; float:left;  color:#777;}
.replyList span.re_del	{ float:left; margin-left:5px; padding-top:10px}
.replyList .bar		{color:#ddd; margin:0 6px}
.replyList .txt2	{clear:both;padding-top:10px;}




@media screen and (max-width: 1079px) {
    .lec_schform input{width: 60%}

	.photoList a{width:48%;}
}

@media screen and (max-width: 969px) {
    .mobile_notice{display: block;}

    .sequence_pc{display: none;}
    .sequence_mb{display: block;}

	.card_cont .sub_tab5 li{width: 48%;margin: 10px 1%;}
	.card_cont .sub_tab5 li:last-child{}

	.btn_box1{width:80%;}
}

@media screen and (max-width:767px){
    .mobile_notice{width: 100%}
    .location_area > li{width: 130px;}
    .lecture_sch li{width: 48%;margin-bottom: 15px;margin-right: 2%;}
    .lec_schbox{line-height: 1;}

    .lecture_sch ul{width: 95%;}
    .lec_schbox span{display: none;}
    .lec_schbox button{margin: 0 30px 0px 0;/* padding: 10px 20px; */height: 50px;width: 100%;border: 1px dashed #d4d4d4;border-radius: 15px;}
    button.lec_active {border: 3px solid #333;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.14);}

	.btn_box1{width:100%;}

	.photoList a{width:100%; margin:0 0 30px;}
	.photoList .lec_total{padding:0;}
}
.div_flex {display: flex;justify-content: space-between;flex-direction: row;align-items: flex-start;}
@media screen and (max-width: 969px) {
	.div_flex {flex-direction: column;}
	.preview {width: 100% !important;}
}