/* 폰트 */
.f_manru {font-family: Esamanru, sans-serif;}
.f_neo {font-family: "Nanum Square Neo", sans-serif; }
.f_gmarket {font-family: 'Gmarket Sans', sans-serif; }

.font12 {
    font-size: 12px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font24 {
    font-size: 24px;
}

.font30 {
    font-size: 30px;
}

.font36 {
    font-size: 36px;
}

.font48 {
    font-size: 48px;
}

.vertical_bar {
    vertical-align: top;
    color: #ddd;
    margin: 0 20px;
}


#main_content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quick_menu {
    z-index: 10;
    width: 1400px;
    position: fixed;
    top: 540px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.quick_menu > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    z-index: 10;
    pointer-events: auto;
}

.quick_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #dcddde;
}

.quick_item {
    width: 72px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.quick_item.gray {
    background: #999999;
    border: 1px solid #999999;
}

.quick_item:hover {
    background: #f6f6f6;
}

.quick_item.gray:hover {
    background: #868686;
}

.quick_item:active {
    background: #ffffff;
}

.quick_item.gray:active {
    background: #999999;
}

.quick_item.high1 {
    height: 80px;
    cursor: pointer;
}

.main_section.step1 {
    position: relative;
    width: 100%;
}

.main_section.step1 .swiper-container {
    width: 100%;
}

.main_section.step1 .swiper-container .swiper-wrapper {
    width: 100%;
}
.main_section.step1 .swiper-container .swiper-wrapper .swiper-slide {

    display: flex;
    align-items: center;
    justify-content: center;
}
.main_section.step1 .swiper-container .swiper-wrapper .swiper-slide .banner_content{
    width: 1080px;
    height: 300px;
    margin: 0 auto;
    padding: 50px 0 0 30px;
    box-sizing: border-box;
    /*width: 1080px;*/
    /*min-width: 1080px;*/
    /*height:300px;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: flex-start;*/
    /*justify-content: center;*/
    /*padding-left: 1.75rem;*/
    /*padding-right: 1.75rem;*/
    /*box-sizing: border-box;*/
    /*gap: 0.75rem;*/
}

.main_section.step1 .swiper-container .swiper-wrapper .swiper-slide .banner_content .type {
    margin-bottom: 10px;
    width: 76px;
    height: 26px;
    line-height: 24px;
    color: #000;
    text-align: center;
    border: 1px solid #000;
    border-radius: 12px;
}

.main_section.step1 .slide_controls {
    width: 100%;
    position: absolute;
    bottom: 30px;
    left: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_section.step1 .slide_controls .swiper_navigations_wrap {
    width: 1080px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.main_section.step1 .slide_controls .swiper_navigations_wrap .swiper_navigations {
    width: 160px;
    height: 36px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.main_section.step1 .slide_controls .swiper_nav_button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.main_section.step1 .slide_controls .swiper_pagination {
    width: 50px;
    color: #ffffff;
    font-size: 13px;
    font-family: Esamanru, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1px;
}

.main_section.step2 {position: relative;width: 100%;display: flex;align-items: center;justify-content: center;}
.main_section.step2 .section { position: relative; width: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 60px; gap: 1.25rem;}

.main_section.step2 .section .title_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_section.step2 .section .title_wrap h2 {
    font-size: 24px;
    font-weight: 600;
}

.step2 .section .title_wrap .curriculum_link {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.step2 .section .title_wrap .curriculum_link:hover {
    color: #0070ff;
}

.main_section.step2 .section .lecture_introduce_wrap {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.main_section.step2 .section .lecture_menu {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main_section.step2 .section .lecture_menu ul {
    border-top: 1px solid #000;
}

.main_section.step2 .section .lecture_menu ul li {
    cursor: pointer;
}

.main_section.step2 .section .lecture_menu ul li span {
    width: 180px;
    display: block;
    padding: 23px;
    box-sizing: border-box;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #ddd;
    font-family: "Nanum Square Neo", sans-serif;
}

.main_section.step2 .section .lecture_menu ul li span:hover {
    color: #0070ff;
}

.main_section.step2 .section .lecture_menu ul li.active span {
    color: #0070ff;
}

.main_section.step2 .section .card_container {
    width: 100%;
}
.lecture-intro-arrow {z-index: 10;}
.lecture-intro-arrow::after {opacity: 0;}
.lecture-intro-arrow.prev {position: absolute;top: 296px;left: 1062px;width: 36px;height: 40px;background: url("/resource/images/main/lecture/arrow6-2.png") no-repeat;}
.lecture-intro-arrow.next {position: absolute;top: 296px;left: 184px;width: 36px;height: 36px;background: url("/resource/images/main/lecture/arrow6-1.png") no-repeat;}

.main_section.step2 .section .card_container ul {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main_section.step2 .section .card_container .mySwiper2 ul {
    width: auto; /* 필요한 스타일 지정 */
    gap: 0;
}

.main_section.step2 .section .card_container .card_wrap {
    position: relative;
    width: 280px !important;
    height: 400px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
}

.main_section.step2 .section .card_container.analysis .card_wrap {
    width: 100% !important;
}

.step2 .section .card_container .card_wrap .img_wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 260px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.step2 .section .card_container .card_wrap .img_wrap .subject {
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 12px;
}

.step2 .section .card_container .card_wrap .img_wrap h1 {
    font-family: "Nanum Square Neo", sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
}

.step2 .section .card_container .card_wrap .img_wrap h2 {
    font-family: "Nanum Square Neo", sans-serif;
    font-size: 22px;
    color: #fff;
    margin-top: 5px;
}

.step2 .section .card_container .card_wrap .img_wrap p {
    margin-top: 20px;
    font-size: 14px;
    color: #6d6e71;
    line-height: 20px;
}

.step2 .section .card_container .card_wrap .img_wrap div.ribbon {
    position: absolute;
    bottom: 10px;
    left: 0;
    height: 30px;
    padding: 0 30px 0 20px;
    box-sizing: border-box;
    line-height: 30px;
    font-size: 13px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

.step2 .section .card_container .card_wrap .context_wrap {
    position: absolute;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    top: 260px;
    padding: 20px;
    font-size: 16px;
}

.step2 .section .card_container .card_wrap .context_wrap > div {
    position: absolute;
}

.step2 .section .card_container .card_wrap .context_wrap .dc {
    bottom: 0;
    color: #f00;
}

.step2 .section .card_container .card_wrap .context_wrap .cost {
    bottom: -3px;
    right: 20px;
    font-size: 28px;
    font-weight: 700;
}

/* 버튼 : 라운드 라인 / 라운드 기본 */
.btn_line a {
    display: block;
    padding: 20px 0 20px 20px;
    text-align: center;
    color: #FFF;
    border: 2px solid #fff;
    border-radius: 80px;
    box-sizing: border-box;
}

.btn_line a img {
    margin-left: 10px;
    vertical-align: baseline;
}

.btn_line:hover img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(197deg) brightness(107%) contrast(102%);
}

.btn_line a:hover {
    background: #fff;
    color: #000;
}

.btn_fill {
    margin: 0 auto;
    clear: both;
}

.btn_fill a {
    display: flex;
    padding: 25px 0 25px 20px;
    text-align: center;
    color: #fff;
    background: #333;
    border-radius: 80px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn_fill a img {
    margin-left: 10px;
}

.btn_fill a:hover {
    background: #000;
}

/* 혜택 */
.benefit {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f8f8f8;
    border: 2px solid #ddd;
    border-radius: 25px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
}

.benefit.blue {
    background: #dcedff;
    border: 2px solid #bbddff;
}

.benefit .plus {
    width: 180px;
    min-width: 180px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: #fff;
    border: 2px solid #0070ff;
    border-radius: 25px;
    color: #0070ff;
    font-weight: 600;
    box-sizing: border-box;
    padding: 0 26px;
    white-space: nowrap;
}

.benefit .plus img {
    vertical-align: middle;
    margin-right: 10px;
}

.benefit p {
    width: 100%;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    padding-right: 155px;
    gap: 0.25rem;
}

.step3 .section {
    width: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 100px 0 80px;
}

.step3 .section .main_tab {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #000;
}

.step3 .section .main_tab ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.step3 .section .main_tab ul li {
    cursor: pointer;
}

.step3 .section .main_tab ul li a {
    display: inline-block;
    padding: 0 40px 15px 0;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: bold;
    color: #aaaaaa;
}

.step3 .section .main_tab ul li a:hover {
    color: #0070ff;
}

.step3 .section .main_tab ul li.active a {
    color: #333;
}

.step3 .section .analysis_program {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.step3 .section .analysis_program .analysis_program_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step3 .section .analysis_program .coa_wrap, .aoa_wrap {
    width: 530px;
    height: 210px;
    float: left;
}

.step3 .section .analysis_program .coa_wrap p, .aoa_wrap p {
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    margin-top: 135px;
}

.step3 .section .analysis_program .coa_wrap {
    margin-right: 20px;
    background: url("/resource/images/main/program_coa.png") no-repeat;
}

.step3 .section .analysis_program .aoa_wrap {
    background: url("/resource/images/main/program_aoa.png") no-repeat;
}

.step3 .section .analysis_program .analysis_program_benefits {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.step3 .section .sucbid_review {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.step3 .section .sucbid_review .review_wrap {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.step3 .section .sucbid_review .review_wrap > ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.step3 .section .sucbid_review ul li.review_row {
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;
}
.step3 .section .sucbid_review ul li.review_row > ul{
    display: flex;
    align-items: center;
}

.step3 .section .sucbid_review ul li.review_row ul li.subject {
    display: block;
    width: 70px;
    height: 24px;
    margin-right: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 12px;
}

.step3 .section .sucbid_review ul li.review_row ul li.coa {
    color: #ab1b41;
    border-color: #ab1b41;
}

.step3 .section .sucbid_review ul li.review_row ul li.aoa {
    color: #0d1274;
    border-color: #0d1274;
}

.step3 .section .sucbid_review ul li.review_row ul li.review_title {
    width: 800px;
}

.step3 .section .sucbid_review ul li.review_row ul li.review_title a {
    color: #555555;
}

.step3 .section .sucbid_review ul li.review_row ul li.review_title a:hover {
    color: #0070ff;
}

.step3 .section .sucbid_review ul li.review_row ul li.review_date {
    width: 100px;
    text-align: right;
    color: #555555;
}

section.step4  {width: 100%; background: #f8f8f8;}
section.step4 .section {position: relative; height: 730px;}

.step4 .section .title_wrap {position: absolute; top: 160px; width: 250px;}
.step4 .section .title_wrap .sub_title {margin-top: 15px;}
.step4 .section .title_wrap .btn_line {margin-top: 20px;}
.step4 .section .title_wrap .btn_line a { display: block; padding: 20px 0 17px; text-align: center; color: #0070ff; border: 2px solid #0070ff; border-radius: 40px; box-sizing: border-box;}
.step4 .section .title_wrap .btn_line a p.arrow {display: inline-flex; width: 10px; height: 16px; background: url("/resource/images/main/arrow3.png") no-repeat; margin-left: 5px; vertical-align: middle;}
.step4 .section .title_wrap .btn_line:hover p.arrow {background: url("/resource/images/main/arrow2.png");}
.step4 .section .title_wrap .btn_line a:hover {background: #0070ff; color: #fff;}

.step4 .section .contents_wrap {position: relative; top: 80px; float: right; width: 770px; height: 600px;}
.step4 .section .review_container {position: absolute; top: 30px; height: 530px;}
.step4 .section .review_container .review_wraper {padding: 10px; box-sizing: border-box;}
.step4 .section .review_container .review_wraper .review_wrap {opacity: 0; position: relative; height: 180px; border-radius: 10px; box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; cursor: pointer;}
.step4 .section .review_container .review_wraper .review_wrap.swiper-slide-prev,
.step4 .section .review_container .review_wraper .review_wrap.swiper-slide-next {opacity: 0.4;}

.step4 .section .review_container .review_wraper .review_wrap.swiper-slide-active {opacity: 1;}

.step4 .section .review_container .review_wraper .review_wrap .review_card {padding: 30px; width: 750px; height: 180px; background: #fff; box-sizing: border-box;}
.step4 .section .review_container .review_wraper .review_wrap .review_card div {float: left;}
.step4 .section .review_container .review_wraper .review_wrap .title {position: absolute; top: 35px; left: 30px; font-size: 18px; font-weight: bold; color: #000;}
.step4 .section .review_container .review_wraper .review_wrap .txt {position: absolute; width: 650px; top: 75px; left: 30px; font-size: 16px;  letter-spacing : -0.03em; color : #333; margin-right: 50px;}
.step4 .section .review_container .review_wraper .review_wrap .info {position: absolute; top: 37px; left: 450px;}

.step4 .section .review_container .review_wraper .review_wrap .info ul li { display: inline; padding-left: 15px; font-size: 14px; color: #888888; line-height: 20px;}

.step4 .review_container .review_wraper .review_wrap::before{display: block; position:absolute; width:100%; height:100%; background-color:#fff;
    border-radius: 40px 40px 40px;
    opacity:0.6; transition:opacity 0.4s; content:'';}

/* 후기 컬러 */
.step4 .review_container .review_wraper .review_wrap .review_card .subject {position: absolute; top: 0; right: 0; width: 45px; height: 180px; color: #fff; font-size: 16px; text-align: center; line-height: 45px; writing-mode: vertical-rl; text-orientation: sideways;}
.step4 .review_container .review_wraper .review_wrap.basic .review_card .subject {background:#fdb910;} /* 입찰기본 */
.step4 .review_container .review_wraper .review_wrap.eligibility .review_card .subject {background:#3cb878;} /* 적격심사 */
.step4 .review_container .review_wraper .review_wrap.one_day .review_card .subject {background:#fd8b10;} /* 원데이 */
.step4 .review_container .review_wraper .review_wrap.s_class .review_card .subject {background:#ab1b41;}  /* S클래스 */
.step4 .review_container .review_wraper .review_wrap.vip .review_card .subject {background:#1f2d62;} /* VIP클래스 */
.step4 .review_container .review_wraper .review_wrap.special1 .review_card .subject {background:#736452;} /* 조충환 */
.step4 .review_container .review_wraper .review_wrap.special2 .review_card .subject {background:#0a655f;} /* 한전/변전단가 */
.step4 .review_container .review_wraper .review_wrap.special3 .review_card .subject {background:#0889e2;} /* 간이종심제 최상위 */
.step4 .review_container .review_wraper .review_wrap.kepco .review_card .subject {background: #0a655f;} /* 한전 배전단가 분석교육 */

/* 후기 hover 테두리 */
.step4 .review_container .review_wraper .review_wrap.basic:hover {border: 1px solid #fdb910; box-sizing: border-box;} /* 입찰기본 */
.step4 .review_container .review_wraper .review_wrap.eligibility:hover {border: 1px solid #3cb878; box-sizing: border-box;} /* 적격심사 */
.step4 .review_container .review_wraper .review_wrap.one_day:hover {border: 1px solid #fd8b10; box-sizing: border-box;} /* 원데이 */
.step4 .review_container .review_wraper .review_wrap.s_class:hover {border: 1px solid #ab1b41; box-sizing: border-box;}  /* S클래스 */
.step4 .review_container .review_wraper .review_wrap.vip:hover {border: 1px solid #1f2d62; box-sizing: border-box;} /* VIP클래스 */
.step4 .review_container .review_wraper .review_wrap.special1:hover {border: 1px solid #736452; box-sizing: border-box;} /* 조충환 */
.step4 .review_container .review_wraper .review_wrap.special2:hover {border: 1px solid #0a655f; box-sizing: border-box;} /* 한전/변전단가 */
.step4 .review_container .review_wraper .review_wrap.special3:hover {border: 1px solid #0889e2; box-sizing: border-box;} /* 간이종심제 최상위 */
.step4 .review_container .review_wraper .review_wrap.kepco:hover {border: 1px solid #0a655f; box-sizing: border-box;} /* 한전 배전단가 분석교육 */

/* 낙찰후기 화살표*/
.real_review_arrow {z-index: 10;}
.real_review_arrow::after {opacity: 0;}
.real_review_arrow.prev {position: absolute; top: 20px; left: 335px; width: 50px; height: 26px; background: url("/resource/images/main/review_prev.png") no-repeat;}
.real_review_arrow.next {position: absolute; top: 570px; left: 335px; width: 50px; height: 26px; background: url("/resource/images/main/review_next.png") no-repeat;}
.real_review_arrow.prev:hover {background: url("/resource/images/main/review_prev_on.png") no-repeat;}
.real_review_arrow.next:hover {background: url("/resource/images/main/review_next_on.png") no-repeat;}

/* 맞춤강의 */
section.step5{width: 100%; background: url("/resource/images/main/bg.png") center; height: 400px;}
.step5 .section .title {padding: 100px 0 20px; color: #fff; text-align: center;}
.step5 .section .sub_title {color: #fff; text-align: center;}



/* 진짜 1위는 다릅니다 */
section.step6{width: 100%; background: #14100d url("/resource/images/main/bg_best.png") center no-repeat;}
section.step6 .section {position: relative; text-align: center; height: 1000px;}
section.step6 .section .sub_title {padding-top: 170px;
    font-family: "Gmarket Sans", sans-serif; font-size: 30px; font-weight: 300; color: #fff2bc;}
section.step6 .section .context_wrap .text {
    font-family: 'Gmarket Sans', sans-serif; position: absolute; color: #fff2bc;}


/* 공지사항 / 교육컨텐츠 연계서비스 */
section.step7  {display: flex;}
section.step7 .section .title_wrap {position: relative; margin-bottom: 10PX; width: 100%; border-bottom: 1px solid #ddd;}
section.step7 .section .title_wrap h2 {display: inline-block; font-size: 20px; margin-bottom: 15px;  font-weight: 700;}
section.step7 .section .title_wrap .more {position: absolute; top: 5px; right: 0;}

section.step7 .section {width: 100%; padding: 50px 0;}
section.step7 .section >div {float: left;}
section.step7 .section .notice_container {padding-right: 60px; width: 620px; box-sizing: border-box; border-right: 1px solid#ddd;}

section.step7 .notice_wrap ul li.notice_row {width: 100%; padding: 5px 0; box-sizing: border-box;}
section.step7 .notice_wrap ul li.notice_row ul  {display: flex; justify-content: space-between;}
section.step7 .notice_wrap ul li.notice_row ul li.notice_title {width: 455px;}
section.step7 .notice_wrap ul li.notice_row ul li.notice_title a {color: #555555;}
section.step7 .notice_wrap ul li.notice_row ul li.notice_title a:hover {color: #0070ff;}
section.step7 .notice_wrap ul li.notice_row ul li.notice_date {width: 100px; right: 0; text-align: right; color: #555555;}

section.step7 .section .service_container {padding-left: 60px; box-sizing: border-box; font-size: 1.5em; font-weight: 700;}
section.step7 .section .service_container .service_wrap {margin-top: 30px;}
section.step7 .section .service_container .service_wrap>button {margin-right: 30px;}
section.step7 .section .service_container .service_wrap>button:last-child {margin-right: 0;}