@charset "utf-8";

/*탭메뉴*/
.tab { overflow: hidden; }
	.tab ul li{ float: left;padding: 12px 0; text-align: center; border: 1px solid #ebf0f7; border-left: 0; border-bottom: 0; cursor: pointer; }
	.tab ul li:first-child{ border-left: 1px solid #ebf0f7; }
	.tab ul .on{ color: #fff; background: #8085ed; border-color: #8085ed; }
	.tab ul li:hover{ color: #fff; background: #8085ed; border-color: #8085ed; }

	.tab .tab_02 li{ width: 50%; }
	.tab .tab_03 li{ width: 33.3%; }
	.tab .tab_04 li{ width: 25%; }
	.tab .tab_05 li{ width: 20%; padding: 0 }
	.tab .tab_06 li{ width: 16.66%; }

    .slide-box { width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }

.tab_menu { padding: 0 0 20px 0; }
    .tab_menu ul { display: flex; flex-wrap: wrap; gap: 10px; }
    .tab_menu ul li { width: calc(25% - 8px); text-align: center; }
    .tab_menu ul li .on,
    .tab_menu ul li button:hover { color: #7ec952; font-weight: 600; border-bottom: 4px solid #7ec952; }
    .tab_menu li button { padding: 0 10px; background: none; }
@media (max-width:991px) {
    .tab_menu { margin: -2em 0 10px 0; padding: 0; }
    .tab_menu ul { flex-wrap: nowrap; }
    .tab_menu ul li { width: fit-content; }
}

/* 검색 */
.search { padding: 3% 5%; border-radius: 5px; background: #e5e5e5; }
	.search ul { display: flex; align-items: center; gap: 10px; }
	.search li:nth-child(1) { width: 80%; }
	.search li:nth-child(2) { width: 20%; }
	.search input { border-radius: 5px; }
@media (max-width:991px) {
    .search { margin-top: 0; }
}

/* -- 개시물 없음 -- */
.no_data{ padding: 10% 0; text-align: center; }
	.no_data i{ font-size: 3em; }
	.no_data p{ padding: 10px 0 0 0; }

/* 상품 리스트 */
.prod_list { display: flex; flex-direction: column; gap: 20px; padding: 30px 0 0 0; }
	.prod_list ul { display: flex; flex-wrap: wrap; border: 1px solid #f1f1f1; }
		.prod_list ul .img { width: 295px; }
        .prod_list ul .text { width: calc(100% - 295px); padding: 10px 0; }
@media (max-width:991px) {
	.prod_list { padding: 15px 0 0 0; font-size: 1em; }
}
/* 이미지 */
.prod_list .img { padding: 20px; text-align: center; }
.prod_list .img a { display: block; width: 100%; border-radius: 10px; overflow: hidden; }
	.prod_list .img button { margin: 20px 0; padding: 5px 10px; border-radius: 5px; }
@media (max-width:991px) {
    .prod_list .img { display: none; }
    .prod_list ul .text { width: 100%; }
}

/* 정보 */
.prod_list .in_top { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-bottom: 2px solid #f1f1f1; }
	.prod_list .in_top .icon { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
	.prod_list .in_top .icon span { padding: 5px 10px; font-size: 12px; line-height: 1em; border-radius: 5px; }
    .prod_list .in_top .tt { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; max-height: 2.4em; overflow: hidden; }
    .prod_list .in_top .s_tt { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9em; line-height: 1.1em; color: #777; }
		.prod_list .in_top .s_tt button { height: fit-content; padding: 5px 20px; border-radius: 2px; border-radius: 5px; }

.prod_list .in_btm { padding: 10px; }
	.prod_list .in_btm .pink_co { font-weight: 800; }
    .prod_list .in_btm button { padding: 0 5px; background: #fff; }
    .prod_list .in_btm span { display: inline-block; padding: 0 0 2px 0; font-weight: 400; border-bottom: 1px solid #3a5896; }
    .prod_list .in_btm dl { display: flex; flex-wrap: wrap; gap: 5px 0; padding: 10px 0 0 0; }
    .prod_list .in_btm dt { width: 16%; }
    .prod_list .in_btm dd:nth-child(2n) { width: 24%; }
    .prod_list .in_btm dd:nth-child(2n+1) { width: 18%; padding: 0 5px; }
    .prod_list .in_btm dd:nth-child(6) { margin-left: 16%; }
    @media (max-width:991px) {
        .prod_list .in_top { margin: 0 10px; padding: 10px 0; }
        .prod_list .in_btm { padding: 10px; font-size: 0.9em; }
		.prod_list .in_btm th { display: inline-block; width: 60px; }
        .prod_list .in_btm .text-right { display: none; }
        .prod_list .in_btm td { display: inline-block; }
        .prod_list .in_btm dl { position: relative; padding: 5px 0 0 70px; }
        .prod_list .in_btm dt { position: absolute; left: 0; width: 60px; align-self: auto; }
        .prod_list .in_btm dd:nth-child(2n) { width: 45%; }
        .prod_list .in_btm dd:nth-child(2n+1) { width: 55%; }
        .prod_list .in_btm dd:nth-child(6) { margin-left: 0; }
        .prod_list .in_btm span { border-bottom: 0; }
	}

/* -- 페이징 -- */
#page { padding: 20px 0 0 0; text-align: center; clear: both; }
	#page a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; }
	#page a:hover { color: #4254f3; }
	#page .on {border-radius: 50%; color: #fff; background: #4254f3; }
	#page .on:hover{ color: #fff; }
	#page .first, #page .prev, #page .next ,#page .last{ width: 20px; height: 40px; background: url('../../img/common/arrow.png') no-repeat; vertical-align: top; }
	#page .first{ background-position: -40px 8px; }
	#page .prev{ background-position: 0px 8px; margin: 0 2% 0 0; }
	#page .next{ background-position: -20px 8px; margin: 0 0 0 2%; }
	#page .last{ background-position: -60px 8px; }

/* 상세페이지 */

/* 타이틀 */
.book h5, .guide h5 { padding: 0 0 15px 0; }

.top_wrap { display: flex; flex-wrap: wrap; width: 100%; padding: 0 0 10px 0; }
	.top_wrap > .l_box { display: flex; flex-direction: column; gap: 20px; width: 40%; }
	.top_wrap > .r_box { display: flex; flex-direction: column; gap: 20px; width: calc(100% - 40%); padding-left: 30px; }
@media (max-width:991px) {
	.top_wrap > .l_box,
	.top_wrap > .r_box { display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 0 0 15px 0; }
}

.l_box .img { border-radius: 20px; overflow: hidden; }

/* 미리보기 팝업 */
.product_view .top_wrap .pop { display: flex; justify-content: space-between; gap: 10px; }
    .product_view .top_wrap .pop button { background: #fff; }
    @media (max-width:991px) {
        .product_view .top_wrap .pop button { width: calc(50% - 5px); border: 1px solid #e5e5e5; border-radius: 5px; }
    }
/* 정보 */

/* 학습기간 */
/* .product_view .top_wrap .date h5 { padding: 0 0 10px 0; } */

/* 컨텐츠 제목 */
.product_view .top_wrap .title { padding: 0 0 10px 0; }
    .product_view .top_wrap .title .icon { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 0 0 10px 0; }
    .product_view .top_wrap .title .icon span { padding: 5px 10px; font-size: 12px; line-height: 1em; border-radius: 50px; }

/* 코드 */
.product_view .top_wrap .code ul { display: flex; gap: 2px; }
.product_view .top_wrap .code ul li { width: 50%; padding: 10px 0; text-align: center; background: #e5e5e5; }

/* 훈련비용 */
.product_view .cost p { padding: 10px 0 0 0; }
    .product_view .cost table{ font-size: 0.9em; line-height: 1.5em; color: #444; }
    .product_view .cost td { width: 80%; }
    .product_view .cost th { width: 20%; vertical-align: top; padding: 5px 0; text-align: right; color: #e94c57; }
	.product_view .cost label { padding: 5px 0 5px 25px; }
    .product_view .cost input[type="radio"] + i { position: absolute; left: 0; top: 4px; }

/* 총 금액 */
.product_view .total { padding: 15px; border: 1px solid #e5e5e5; }
    .product_view .total td { width: 60%; }
    .product_view .total th { width: 40%; font-size: 1.12em; text-align: right; color: #e94c57; }
    .product_view .total .bo { font-size: 1.12em; padding: 15px 0 0 0; border-top: 1px solid #e5e5e5; }
    .product_view .total .pd_b { padding: 0 0 15px 0; }
@media (max-width:991px) {
    .product_view .total { padding: 15px 0 0 0; border: 0; border-top: 1px solid #e5e5e5; }
	.product_view .total .bo { padding: 0 0 0 0; border-top: 0; }
    .product_view .total .pd_b { padding: 0 0 0 0; }
}

/* 버튼 */
.product_view .btn_wrap { display: flex; justify-content: center; align-items: center; gap: 10px; }
    .product_view .btn_wrap input { width: 50%; border: 0; border-radius: 5px; }
    .product_view .btn_wrap a { display: inline-block; width: 100%; text-align: center; line-height: 50px; border-radius: 5px; }

/* 이미지 */
.image { padding: 0 0 30px 0; }

/* 교재정보 */
.book { padding: 0 0 30px 0; }
    .book dl { display: flex; flex-wrap: wrap; gap: 10px; }
    .book dl dt { width: 300px; }
    .book dl dd { display: flex; flex-direction: column; gap: 5px; width: calc(100% - 310px); }
    .book dd span { display: inline-block; width: 50px; }
    .book dd a { display: inline-block; border-radius: 50px; padding: 5px 20px; }
    @media (max-width:991px) {
        .book dl dt { width: 100px; }
        .book dl dd { width: calc(100% - 110px); }
    }

/* 과정안내 */
.guide { padding: 30px 0; border-top: 1px solid #e5e5e5; }
    

/* 텝메뉴 */
.product_view .tab_by { display: none; padding: 20px; border: 1px solid #ebf0f7; }
	.product_view .tab_by.on { display: block; }
    @media (max-width:991px) {
        .product_view .tab_by { padding: 10px; }
	}

/* 과정소개 */
#intro > div { padding: 10px 0 20px 0; }

/* 자격증 소개 */
#license th { padding: 10px; text-align: center; border: 1px solid #e5e5e5; background: #f1f1f1; }
	#license td { padding: 10px; border: 1px solid #e5e5e5; }
	#license table + table { margin: 10px 0 0 0; }
	#license td table { text-align: center; font-size: 0.9em; }
	
/* 연계과정 */
#linked > div { padding: 0 0 50px 0	; }
#linked > div:last-of-type { padding: 0; }
	#linked h5 { display: block; padding: 0 0 10px 0; }
	
/* 수료기준 */
#finish th { padding: 10px 5px; text-align: center; border: 1px solid #e5e5e5; background: #f1f1f1; }
	#finish td { padding: 10px 0; text-align: center; border: 1px solid #e5e5e5; }

/* 강의구성 */
#course th { padding: 10px; text-align: center; border: 1px solid #e5e5e5; background: #f1f1f1; }
	#course td { padding: 10px; text-align: center; border: 1px solid #e5e5e5; }
	#course td:nth-child(2) { text-align: left; }

/* 강사소개 */
#teacher .img { float: right; }
    #teacher h5 { padding: 0 0 10px 0; }
    @media (max-width:991px) {
        #teacher .img { float: left; width: 100%; padding: 0 0 20px 0; }
        #teacher .img img { width: 150px; }
        #teacher h5 { padding: 0 0 5px 0; }
	}

/* 탐색 결과표 모달창 */
.results_table .modal-footer { padding: 0 15px 30px 15px; }
    .results_table h4 { line-height: 1em; text-align: center; }
    .results_table h5 { padding: 15px 0; text-align: center; }

/* 미리보기 모달창 */
.vod_wrap{ display: none; position: fixed; top: 5%; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 200; background: #fff; }
	.vod_wrap .vod_body{ display: inline-block; max-width: 1280px; margin: 0 auto; z-index: 20; position: relative; background: #fff; transition: all 0.3s ease 0.2s; }
	.vod_wrap .vod_frame{ position: relative; background: #fff; }
	.vod_wrap .vod_bg{ position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.3 ); }
	.vod_wrap .vod_btn, .vod_wrap .btn_close_vod_wrap{ position: absolute; top: 0; right: -51px; width: 50px; height: 50px; border: 0; background: #fff; } 
	
	.vod_wrap .vod_mob video{ display: block; width: 100%; }
	.vod_wrap .vod_mob ul{ overflow: hidden; text-align: right; font-size: 0; }
	.vod_wrap .vod_mob ul li{ display: inline-block; width: 50px; line-height: 50px; height: 50px; text-align: center; font-size: 16px; border: 1px solid #ddd; border-left: 0; }
	.vod_wrap .vod_mob ul li:nth-child(1){ border-left: 1px solid #ddd; }

	@media (max-width:991px) {
		.vod_wrap { top: 100%; left: 0; right: auto; margin: 0; width: 160vh; height: 160vw; text-align: left; transform: rotate(-90deg); transform-origin: top left; overflow-x: scroll; }
		.vod_wrap .vod_bg{ background: rgba( 255, 255, 255, 1 ); }
		.vod_body .title .name { display: none; }
		.vod_wrap .vod_btn, .vod_wrap .btn_close_vod_wrap{ right: 37%; color: #fff; background: #000;}

		.vod_wrap .vod_frame {transform: scale(.60); transform-origin: 0 0; margin: 0 0 0 3%; }
		.vod_wrap .vod_frame { text-align: left; }
		.vod_wrap .vod_frame > button{ display: inline-block; font-size: 2em; height: 70px; padding: 0 20px; }
		.vod_wrap .vod_frame > .time{ display: inline-block; font-size: 2em; height: 70px; line-height: 70px; padding: 0 0 0 10px;  }
		.vod_wrap .vod_info { display:none; }

		.vod_wrap .vod_mob { width: 55%; margin: 0 0 0 3%; }
		.vod_wrap .vod_mob ul li{ width: 30px; line-height: 27px; height: 30px; font-size: 14px; }
	}
	@media (max-width:390px) {
		.vod_wrap .vod_frame {transform: scale(.55); }
		.vod_wrap .vod_mob ul li{ font-size: 12px; }
	}
	
/* 결제정보 팝업 */
.pay_info .modal-header { border-bottom: 1px solid #f1f1f1; }
    .pay_info th { width: 150px; padding: 5px 0; font-weight: 400; color: #777; }
    .pay_info td { padding: 5px; }
    .pay_info .input_box { display: flex; align-items: center; gap: 5px; max-width: 50%; }
    .pay_info .list li { padding: 5px 0; }
    .pay_info .list label { padding: 0 0 0 30px; }
    .pay_info .list label i { position: absolute; top: 0; left: 0; }
    @media (max-width:991px) {
        .pay_info hr { margin: 10px 0; }
        .pay_info th { width: 70px; }
        .pay_info .input_box { max-width: 100%; }
        
	}