@charset "utf-8";

/* ----------------------------------
Name: main.css
Version: 1.0
-------------------------------------*/
.photo_area img{width: 100%;height: 100%;object-fit: cover;}
/* 메인비쥬얼 */
.mainLayer_top{height: 40px;background: #1e1e1e;font-size:0.937rem;color: #fff;}
.mainLayer_top .mainLayer_in{display: flex;justify-content: space-between;align-items: center;max-width: 1400px;margin-left: auto;margin-right: auto;line-height: 40px;}
.mainLayer_top .mainLayer_in div:first-child{width: 160px;}
.mainLayer_top .mainLayer_in .tit{position: relative;display: inline-block;padding-left: 32px;text-align: center;}
.mainLayer_top .mainLayer_in .tit::before{content: '';position: absolute;top:9px;left:3px;width: 20px;height: 20px;background:url('../../images/front/icon/icon_notice.svg') no-repeat center center;background-size: cover;z-index: 9;}
.mainLayer_top .mainLayer_in .tit::after{content: '';position: absolute;top:7px;left:0;width: 25px;height: 25px;background: #fcc505;border-radius: 50%;}
.mainLayer_top .mainLayer_in .close_area{display: flex;align-items: center;}
.mainLayer_top .mainLayer_in .close_area label{display: inline-block;padding: 0 5px;}
.mainLayer_top .mainLayer_in .close_area button{width: 18px;height: 18px;background: url('../../images/front/icon/icon_close_w.svg') no-repeat center center;background-size: cover;font-size: 0;}

.main_visual_wrap{overflow: hidden;position: relative;height: 800px;margin: 0 40px 120px 40px;background: radial-gradient(circle at 60% 20%, #739ee7 0%, #5a8cdc 40%, #3c66c8 100%);border-radius: 60px;}
.main_visual_wrap::before{content: '';position: absolute;top: 80px;left: 50%;transform: translateX(-50%);width: 705px;height: 337px;background: url('../../images/front/main/main_visual_bg.png') no-repeat;}
.main_visual_wrap .main_cont{position: relative;max-width: 1400px;margin: 0 auto;}
.main_visual_wrap .main_cont .tit_area{position: relative;padding-top: 150px;margin-bottom: 130px;color: #fff;text-align: center;z-index: 9;}
.main_visual_wrap .main_cont .tit_area .tit01{font-size: 1.375rem;font-weight: 500;}
.main_visual_wrap .main_cont .tit_area .tit02{margin-bottom: 20px;font-size: 4.5rem;font-weight: 700;color: #fff;}
.main_visual_wrap .main_cont .tit_area .date{position: relative;font-size: 1.56rem;font-weight: 800;}
.main_visual_wrap .main_cont .tit_area .date span:first-child{position: relative;padding-right: 70px;}
.main_visual_wrap .main_cont .tit_area .date span:first-child::before{content: '';position: absolute;bottom: 5px;right: 10px;width: 50px;height: 3px;background-color: #fff;}
.visual_object{position: absolute;top:0;left:50%;transform: translateX(-50%);width: 100%;}
.visual_object img{position: relative;}
.visual_object .object01{position: absolute;top: 60px;left: 220px;}
.visual_object .object01::before{content: '';position: absolute;top: -90px;left:-100px;width: 480px;height: 460px;background: url('../../images/front/main/visual_obj_bg01.png') no-repeat;z-index: -1;}
.visual_object .object01 .d1{animation-delay: .2s;}
.visual_object .object02{position: absolute;top: 190px;right:200px;animation-delay: .10s;}
.visual_object .object02::before{content: '';position: absolute;top:-20px;left:30px;width: 342px;height: 342px;background: url('../../images/front/main/visual_obj_bg02.png') no-repeat;z-index: -1;}
.visual_object .object02 .d2{animation-delay: .8s;}
.visual_object .float {display: inline-block;animation: floating 3.5s ease-in-out infinite;will-change: transform;}
@keyframes floating {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}
.main_box{position: relative;display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.6rem;margin: 0 50px;z-index: 9;}
.main_box .box{position: relative;height: 260px;padding: 35px 55px;background-color: #fff;border-radius: var(--border-radius-lg);text-align: center;}
.main_box .box:hover{box-shadow: 0 5px 30px rgb(0 0 0 / 30%);transform: translate(0, -10px);transition: 0.3s ease-in-out;}
.main_box .box button{position: relative;padding-right: 50px;border: 1px solid #0d1e51;background-color: #0d1e51;}
.main_box .box button::before{content: '';position: absolute;top:14px;right:10px;width: 17px;height: 15px;background: url('../../images/front/component/icon/ico_arrow_w.svg') no-repeat;transform: rotate(90deg);background-size: 100%;}
.main_box .num{font-weight: 900;color: #496bc6;}
.main_box .tit{margin: 13px 0;font-size: 1.75rem;font-weight: 700;color: #312f2f;line-height: 35px;}
.main_box .text{height: 70px;}
.main_box .box .o1{position: absolute;bottom: -20px;left: -70px;width: 110px;}
.main_box .box .o2{position: absolute;bottom: -20px;right: -10px;width: 70px;}
.main_box .box .o3{position: absolute;bottom: -20px;right: -20px;width: 87px;}
.main_box .box .o4{position: absolute;top: 0;right: 0;}
.main_box .box .o5{position: absolute;top: 120px;right: -20px;width: 100px;}

/* 컨텐츠 */
.main_content{max-width: 1400px;margin: 0 auto;line-height: 1.3;}
.main_content .tit_area{text-align: center;margin-bottom: 50px;}
.main_content .tit_area h3{margin-bottom: 10px;font-size: 2.5rem;font-weight: 600;color: #222;letter-spacing: -1px;}
.main_content .tit_area h3 .bold{font-weight: 800;}
.main_content .con{margin-bottom: 120px;}

/* 실무특강 */
.main_live{position: relative;margin-bottom: 150px;}
.main_live::before{content: '';position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);width: 100vw;height: 250px;background-color: #f5f6f8;z-index: -1;}
.main_live .object{display: none;position: absolute;bottom: -30px;z-index: 99;}
.main_live .object .o1{position: absolute;top: -200px;left: -70px;width: 130px;}
.main_live .object .o2{position: absolute;top: -150px;right: -1430px;}
.main_live .tit_area h3{position: relative;display: inline-block;}
.main_live .tit_area h3::before{content: '';position: absolute;top: -10px;right: -55px;width: 46px;height: 47px;background: url("../../images/front/main/icon_live.png");}
.live_list{display: flex;flex-wrap: wrap;gap: 0 2.5rem;}
.live_list .box{width: calc((100% - 7.5rem) / 4);overflow: hidden;margin-bottom: 40px;border-radius: var(--border-radius-lg);border: 1px #ddd solid;}
.live_list .box:hover{transform: translate(0, -10px);transition: 0.3s ease-in-out;}
.live_list .box .live_header{position: relative;overflow: hidden;height: 180px;}
.live_list .box .live_header .tit{position: absolute;top: 50px;left: 50%;transform: translateX(-50%);width: 100%;padding: 0 20px;font-size: 1.25rem;font-weight: 600;color: #fff;text-align: center;z-index: 9;display: -webkit-box;-webkit-line-clamp: 2;/* 줄 수 */-webkit-box-orient: vertical;overflow: hidden;}
.live_list .box .live_header img{display: block;height: 100%;object-fit: cover;}
.live_list .box .live_header .overlay {position: absolute;inset: 0;background: rgba( 0, 0, 0,0.35);}
.live_list .box .live_header .badge{position: absolute;top: 10px;right: 10px;height: 32px;background: white;font-size: 12px;font-weight: 800;color: #000;line-height: 28px;padding: 0 20px 0 12px;border-radius: 20px;border: 2px solid #d91305;z-index: 9;}
.live_list .box .live_header .badge::before{content: '';position: absolute;top: 6px;right: 8px;width: 9px;height: 9px;background-color: #d91305;border-radius: 50px;animation: blink 1s infinite;}
.live_tooltip{position: fixed;background: rgba(0,0,0,0.85);color: #fff;font-size: 12px;padding: 6px 10px;border-radius: 6px;white-space: nowrap;display: none;z-index: 9999;pointer-events: none;}
.live_tooltip::after{content: "";position: absolute;left: 50%;bottom: -6px;transform: translateX(-50%);border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid rgba(0,0,0,0.85);}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
.live_list .box .live_con{position: relative;padding: 75px 20px 30px;text-align: center;background: #fff;}
.live_list .box .live_con .photo_area{position: absolute;top: -65px;left: 50%;transform: translateX(-50%);width: 130px;height: 130px;border-radius: 50%;border: 4px solid #fff;overflow: hidden;}
.live_list .box .live_con .photo_area img{width: 100%;height: 100%;object-fit: cover;}
.live_list .box .live_con:hover .person_info .name{text-decoration: underline;}
.live_list .time_wrap{padding-bottom: 0;margin: 0;border-bottom: none;}

.person_info .category{margin-bottom: 3px;font-weight: 700;color: #2a5acc;}
.person_info .name{margin-bottom: 3px;font-size: 1.5rem;font-weight: 700;}
.person_info:hover .name{text-decoration: underline;}
.person_info .company{margin-bottom: 10px;color: #666;}
.person_info .people{position: relative;padding-left: 10px;}
.person_info .people::before{content: '';position: absolute;top: 0;left: -15px;width: 20px;height: 18px;background: url('../../images/front/component/icon/ico_group.svg') no-repeat;background-size: cover;}

/* 멘토링 */
.main_teacher .teacher_list{margin: 0 50px;justify-content: space-around;gap: 5rem;}
.main_teacher .teacher_list .box{margin-bottom: 0;}
.main_teacher .teacher_list .box .photo_area{width: 235px;height: 235px;border-radius: 100%;}
.main_teacher .teacher_list .box::before{display: none;}

.teacher_list{display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 2rem}
.teacher_list .box{position: relative;width: 254px;margin-bottom: 40px;text-align: center;transition: 0.3s ease-in-out;}
.teacher_list .box .person_info {display: inline-block;}
.teacher_list .box:hover{transform: translate( 0, -7px);}
.teacher_list .box::before{content: '';opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 2px solid #1b2d71;border-radius: var(--border-radius-xl);box-sizing: border-box;z-index: 1;pointer-events: none;}
.teacher_list .box:hover::before{opacity: 1;}
.teacher_list .box .photo_area{overflow: hidden;position: relative;height: 255px;margin-bottom: 20px;border-radius: var(--border-radius-xl);background: #e9ecf1;}
.teacher_list .box .photo_area .badge{position: absolute;top: 10px;left: 10px;height: 28px;border: 1px solid;background-color: var(--point-color);border-color: var(--point-color);border-radius: 50px;font-size: 11px;font-weight: 800;color: #fff;line-height: 28px;padding: 0 10px;}
.teacher_list .box .name{font-size: 1.5rem;}

.rating_area{display: flex;justify-content: center;margin-top: 10px;margin-bottom: 20px;}
.rating_area .stars{margin-right: 10px;}
.rating_area .stars .star{display: inline-block;width: 17px;height: 16px;background: url('../../images/front/icon/icon_star.png') no-repeat;background-size: cover;}
.rating_area .stars .star.on{background: url('../../images/front/icon/icon_star_on.png') no-repeat;background-size: cover;}
.b_mark {overflow: hidden;position: absolute;top: 13px;right: 13px;width: 24px;height: 24px;text-indent: -99999px;}
.b_mark::before{content: '';position: absolute;top: 0;left:0;width: 24px;height: 24px;background: url('/images/front/component/icon/icon_heart.svg') no-repeat center center;background-size: cover;}
.b_mark.on::before{background: url('/images/front/component/icon/icon_heart_on.svg') no-repeat;background-size: cover;}
.b_mark:hover::before{background: url('/images/front/component/icon/icon_heart_on.svg') no-repeat;background-size: cover;}

/* 이벤트 */
.main_event{position: relative;display: inline-block;width: 100%;height: 110px;padding: 37px 60px;background-color: #f1d122;border-radius: var(--border-radius-lg);}
.main_event::before{content: 'EVENT';position: absolute;bottom: -20px;right:300px;font-size: 4.6rem;font-weight: 900;color: #eec119;}
.main_event .tit_area{text-align: left;}
.main_event .tit_area h3{display: inline-block;margin-right: 10px;font-size: 1.875rem;}
.main_event .tit_area .text{display: inline-block;font-size: 1.125rem;font-weight: 500;color: #3a3413;}
.main_event .object .o1{position: absolute;bottom: 20px;right: 150px;width: 140px;z-index: 9;filter: drop-shadow(0 25px 5px rgba(0,0,0,0.1));}
.main_event .object .o2{position: absolute;bottom: 0;right: 40px;filter: drop-shadow(0 25px 5px rgba(0,0,0,0.1));animation: floating02 2s ease-in-out infinite;will-change: transform;}
@keyframes floating02 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 자격증 */
.main_coruse{margin-bottom: 80px;}

/* 내 정보 */
.main_myinfo {position:relative;display: flex; justify-content: space-between; align-items: center; margin-top: 65px; margin-bottom: 25px; width: 100%; padding: 20px 30px; border: 2px solid var(--primary-color); border-radius: var(--border-radius-xl);}
.main_myinfo .my_left {display: flex; align-items: center;}
.main_myinfo .my_left .badge {margin-right: 10px; padding: 8px 12px; border-radius: 50px; background-color: var(--primary-color);font-size: 0.93rem;font-weight: 600;color: #fff;}
.main_myinfo .my_left h2 {display: inline-block; margin-bottom: 0;font-size: 1.375rem;font-weight: 600;color: #000;}
.main_myinfo .my_left h2 span {font-size: 1.25rem;font-weight: 700;color: #000;}
.main_myinfo .my_left button {margin: 0 10px;}
.main_myinfo .my_left span {font-size: 0.93rem;color: #666;}
.main_myinfo .date{position: absolute;top:30px;right:30px;}

.main_myinfo .my_right {display: flex;align-items: center;gap: 1.5rem;}
.main_myinfo .my_right p {display: inline-block; position: relative;padding-left: 26px;}
.main_myinfo .my_right p::before {content: ''; position: absolute;top: 0;left: 0; width: 20px; height: 18px;background: url('../../images/front/component/icon/ico_name.svg') no-repeat center center;}
.main_myinfo .my_right span {display: inline-block;position: relative;padding-left: 24px;}
.main_myinfo .my_right span::before {content: ''; position: absolute;top: -2px;left: 0;width: 23px; height: 23px;background: url('../../images/front/component/icon/ico_map.svg') no-repeat;background-size: cover;}

/* 강사예약정보 */
.box_wrap p.tit02 {margin-bottom: 15px; font-size: 1.345rem; font-weight: 700; color: #000;}
.box_wrap .inner_tbl tr {font-weight: 400; color: #1e1e1e;}
.box_wrap .inner_tbl tr .tbl_tit p {position:relative; padding-left: 100px; font-size: 1.25rem; font-weight: 600; color: #121519;}
.box_wrap .inner_tbl tr .tbl_tit p span {display: block;font-weight: 400; color: #666;}
.box_wrap .inner_tbl tr .tbl_tit p::before {content: ''; position: absolute; top: 50%; left: 0; width: 68px; height: 58px; margin-top: -29px; border-radius: 15px; background: url('../../images/front/sub/test_teacher.png') no-repeat center center; background-size: cover;}
.box_wrap .inner_tbl.main_type table {border-top: 0;}
.box_wrap .inner_tbl.main_type thead th {border-bottom: 0; border-left: 0; }
.box_wrap .inner_tbl.main_type thead th:first-child {border-radius: 12px 0 0 12px;}
.box_wrap .inner_tbl.main_type thead th:last-child {border-radius: 0 12px 12px 0;}
.box_wrap .inner_tbl.main_type td {border-left: 0;}
.box_wrap .inner_tbl.main_type thead th:last-child, .box_wrap .inner_tbl.main_type td:last-child {border-right: 0;}
.box_wrap .inner_tbl.main_type td {padding: 20px 10px;}
.box_wrap .inner_tbl.main_type .tbl_tit{font-size: 1.06rem;font-weight: 600;color: #111;}
.box_wrap .btn_wrap {position: relative; margin: 0;}
.box_wrap .btn_wrap .btn.primary {min-width: 160px; border: 1px solid #4e6ee5; background-color: #4e6ee5;}
.box_wrap.main_reserve .btn_wrap .btn.primary {position: relative; min-width: 160px; border: 1px solid #4e6ee5; background-color: #4e6ee5;}
.box_wrap.main_reserve .no_result{margin-bottom: 30px;}
.box_wrap .btn_wrap span {position: absolute; bottom: 10px; left: 50%; margin-left: -300px; padding: 5px 10px; border-radius: 3px; background-color: #1e1e1e; font-size: 13px; color: #fff;}
.box_wrap .btn_wrap span::after {content: ''; position: absolute; bottom: 10px; right: -7px; width: 8px; height: 10px; background-color: #1e1e1e; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); display: inline-block;}

/* 강사추천 */
.main_recomend {margin-top: 60px;}
.main_recomend h2 {margin-bottom: 20px;}
.main_recomend .text_slide {width: 100%;height: 50px;margin-bottom: 20px;padding: 5px;background-color: #f7f8fa;}
.main_recomend .text_slide p {font-weight: 600;color: #f34244;margin-top: 12px;}
.main_recomend .recomend_list {position: relative;}
.main_recomend .recomend_list .btn_area {display: flex; justify-content: space-between; position: absolute; top: 17%; width: 100%; margin-top: -25px; z-index: 2;}
.main_recomend .recomend_list .btn_area a {display: block; position: relative;}
.main_recomend .recomend_list .btn_area a::before {content: ''; position: absolute; width: 50px; height: 50px; border: 1px solid #d2d7dc; border-radius: 50px; background: url('../../images/front/icon/icon_dot.png') no-repeat center center #fff;}
.main_recomend .recomend_list .btn_area a.btn_prev::before {top: 0; left: -25px; transform: rotate(180deg);}
.main_recomend .recomend_list .btn_area a.btn_next::before {top: 0; right: -25px;}
.main_recomend .recomend_list .btn_area a p {font-size: 0;}

.box_wrap.main_reserve .btn_more{top: 45px;right: 50px;}

@media (max-width: 1400px){
	.container {padding: 0;}
	.main_content .con {padding: 0 30px;}
	
	/* 강의리스트 */
	.main_class .list ul {gap: 30px;}
	
	/* 패키지 */
	.main_package {padding: 30px!important;}
	.package_list {gap: 30px;}
	
	/* 강사추천 */
	.main_recomend .recomend_list .teacher_list {overflow: hidden;}
}
@media (max-width: 1200px){
	nav {display: none;}
	
	/* 강사리스트 */
	.teacher_list {justify-content: flex-start;}
	.teacher_list .box {width: 30%;}
	
    /* 패키지 */
    .package_list {flex-wrap: wrap;}
	.package_list .box {width: 47%;}
	
	/* 내 정보 */
	.main_myinfo {flex-direction: column; align-items: flex-start; margin-top: 35px;}
	.main_myinfo .my_right {display: flex; justify-content: flex-end; width: 100%; margin-top: 15px;}
}
@media (max-width: 800px){	
	.main_visual_wrap {height: 600px;}
	.main_visual_wrap .main_visual {display: none;}
	.main_visual_wrap .tit_cont .tit {margin-bottom: 100px; font-size: 3.25rem;}
	
	/* 강사리스트 */
	.teacher_list .box {width: 47%;}
	
	/* 광고 */
	.main_record li {padding-top: 220px;}
	.main_record li::before {width: 200px; height: 200px;}
	
	/* 내 정보 */
	.main_myinfo .my_left {display: grid; grid-template-columns: 1fr 6fr; width: 100%; gap: 10px 5px;}
	.main_myinfo .my_left .badge {grid-column: 1/2; max-width: 80px; min-width: 65px; text-align: center;}
	.main_myinfo .my_left h2 {grid-column: 2/3;}
	.main_myinfo .my_left button {grid-column: 1/2; max-width: 80px; margin: 0;}
	.main_myinfo .my_left span {grid-column: 2/3;}
}
@media screen and (max-width:640px){/* mobile version */
	.mainLayer_top {height: 80px;}
	.mainLayer_top .mainLayer_in {flex-direction: column;}
	.main_visual_wrap .tit_cont{width: 100%;}
	.main_visual_wrap .tit_cont .tit {margin-bottom: 100px;}
	.main_content .con {margin-bottom: 50px;}
	.container {margin-top: 50px;}
	.container .content .sub_title{margin: 40px 0;}
	
	/* 내 정보 */
	.main_myinfo{padding: 20px;}
	
	/* 강의리스트 */
	.main_class .list li a {padding: 40px;}

	/* 강사리스트 */
	.teacher_list .box {width: 100%;}
	
   	/* 패키지 */
	.main_package {padding: 50px 0; }
	.main_package h2 {margin-bottom: 35px;}
	.package_list .box {width: 100%; height: 310px; padding: 30px;}
	.package_list .box .subtitle {margin-bottom: 20px;}
	.package_list .box .final_price {margin-bottom: 20px;}
	
	/* 광고 */
	.main_record h2 {margin-bottom: 35px;}
	.main_record ul {flex-direction: column; gap: 25px;}
	.main_record li {width: 100%;}
	.main_record li .text {margin-bottom: 10px;}
	
	/* 내 정보 */
	.main_myinfo .my_left h2 {grid-column: 1/3;}
	.main_myinfo .my_right {flex-wrap: wrap; gap: 5px 15px;}
	.main_myinfo .my_right p {margin: 0; padding-left: 25px;}
	.main_myinfo .my_right span {margin: 0; padding-left: 20px;}
	
	/* 예약정보 */
	.box_wrap .btn_wrap span {display: none;}
}