/* 공통 */
.evt_wrp{display:block;}
.evt_wrp_mo{display:none;}
.inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.ce_align {text-align: center;}
.bg {padding: 150px 0;}
img{max-width: 100%;height:auto;}

/* 원형배너 */
.visual .circle_banner{position: absolute; right: 0;top: 26%;z-index: 1;}
.visual .circle_banner p{font-size: clamp(14px, 2.2vw, 22px); font-weight: 400; color:#fff;}
.visual .circle_banner h2{font-size: clamp(16px, 2.7vw, 27px); font-weight: 900; color:#fff;}
.visual .circle_banner_1{margin-bottom:20px;background: #18a49c;}
.visual .circle_banner_2{background: #7600f8;}
.visual .circle_banner_com {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 2px;
    padding:15px;
}
.evt_wrp .visual .circle_banner__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 5px 20px;
    border-radius: 999px;
    background:#111;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.evt_wrp .visual .circle_banner__link:hover{
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}
.evt_wrp .visual .circle_banner__link:active{
    transform: scale(0.97);
}


/* 바텀배너 */
.bottom_banner{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #18a49c;
    width: 100%;
    height:100px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.bottom_banner .inner{display:flex; justify-content: space-between; align-items: center;}
.bottom_banner .left_txt span{color:#ffea00;}
.bottom_banner .left_txt p:first-child{font-size:35px; font-weight: 900;padding-bottom:5px;color:#fff;}
.bottom_banner .left_txt p:last-child{font-size:14px; font-weight: 400;color:#fff;}
.bottom_banner .right_txt{height:100%;}
.bottom_banner .right_txt_btn{background:#111; color:#fff; font-size:35px; font-weight: 700;height: 100%;padding:0 40px;
    display: flex;align-items: center;justify-content: center;
}

/* 비주얼 */
.visual {
    background: url(https://image.engineerlab.co.kr/data/www/engr/promotion/2026/0512_pr_jgp/visual/bg.jpg) no-repeat top center / cover;
    min-height: 3150px;
}

.visual_txt {
    padding-top: 122px;
    font-size: 25px;
    color: #ccc;
    font-weight: 300;
    letter-spacing: 20px;
}

.visual_txt span {
    color: #fff;
    font-weight: 500;
}

.visual_left {
    position: absolute;
    top: 263px;
    left: 57px;
    z-index: 1;
}

.visual_center {
    text-align: center;
    position: relative;
}
.visual_center .badge_icon{
    position: absolute;
    right: 0;
    top: 51px;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
.visual_right {
    position: absolute;
    top: 610px;
    right: 0;
}

.io_once {
    opacity: 0;
}

.io_once.is-visible {
    animation: io_once_fade 1s ease-in-out forwards;
}

@keyframes io_once_fade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.icon_wrap {
    margin-top: 60px;
}

.icon_wrap ul {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* 사진 롤링 */
.roll_box {
    padding: 60px 0 80px;
    width: 100%;
    overflow: hidden;
}

.roll_line {
    margin-bottom: 20px;
}

.roll_line:last-child {
    margin-bottom: 0;
}

.roll_move {
    display: flex;
    width: max-content;
    animation: roll_x 45s linear infinite;
    will-change: transform;
}

.roll_line_rev .roll_move {
    animation-direction: reverse;
    animation-duration: 50s;
}

.roll_set {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.roll_set img {
    border-radius: 10px;
}

@keyframes roll_x {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* 컨텐츠1 */
.cont_1_bg {
    background: #fff;
}

.typo_wrap {
    text-align: center;
    padding-bottom: 55px;
}



.tabs_lec {
    margin: 50px auto 30px;
    display: flex;
    justify-content: space-between;
}

.tabs_lec li {
    position: relative;
    display: inline-flex;
    width: 33.3%;
    text-align: center;
    background: #eee;
    border-radius: 3px;
    padding: 20px;
    font-size: 30px;
    cursor: pointer;
    margin-right: 5px;
    justify-content: center;
    align-items: center;
}

.tabs_lec li.active {
    background: #18a49c;
    font-weight: 800;
    color: #fff;
}

/* 강의탭 원형 */
.sub_tab_icon_wrap {
    position: absolute;
    top: 0;
    left: 15px;
    transform: translateY(-50%);
    cursor: auto;
}

.sub_tab_icon_wrap .sub_tab_icon {
    width: 100px;
    height: 100px;
    background-color: #f73e30;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub_tab_icon_wrap p {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.sub_tab_icon_wrap p span {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}


/* 쌍기사 탭 카드형 디자인 */
.lec_card_row {
    display: flex;
    gap: 24px;
    padding-bottom: 10px;
}

.lec_card_flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lec_card {
    flex: 1;
    border: 2px solid #18a49c;
    border-radius: 16px;
    padding: 28px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.lec_card form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lec_card_tit {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.lec_card_info {
    margin-bottom: 18px;
}

.lec_card_info li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 20px;
    word-break: keep-all;
    border-bottom: 1px solid #f0f0f0;
}

.lec_card_info li:last-child {
    align-items: flex-start;
    line-height: 1.8;
    border-bottom: 0;
}

.lec_card_info li b {
    width: 15%;
    color: #555;
    font-weight: 500;
    margin-right: 20px;
    flex-shrink: 0;
}

.lec_card_info li.benefit b {
    color: #18a49c;
    font-weight: 700;
}

.lec_card_info li span {
    color: #111;
    line-height: 1.8;
}

.lec_card_book {
    margin-top: auto;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.lec_card_book label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    height: 100%;
    padding: 30px;
}

.lec_card_book input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: #333;
    flex-shrink: 0;
}

.lec_card_book .book_toggle_label {
    cursor: pointer;
}

.book-toggle {
    display: none;
}

.book_chk_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #ccc;
    border-radius: 3px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.book_chk_icon.checked {
    background: #333;
}

.book_chk_icon::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}

.lec_card_price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 0;
}

.lec_card_price em {
    color: #18a49c;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
}

.lec_card_price .total-amt {
    color: #18a49c;
    font-size: 40px;
    font-weight: 800;
}

.lec_card_btns {
    display: flex;
    gap: 10px;
    margin: 0;
}

.lec_card_btns a {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    border-radius: 50px;
    font-size: 25px;
    font-weight: 900;
}

.lec_card_btns a:first-child {
    background: #222;
    color: #fff;
}

.lec_card_btns a:last-child {
    background: #18a49c;
    color: #fff;
}




/* 종로학원 실기반 프로모(탭3 우측) */
.lec_card_promo {
    border: 0;
    padding: 0;
}

.lec_card_promo .offln_promo {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    background: url(https://image.engineerlab.co.kr/data/www/engr/promotion/2026/0512_pr_jgp/1/img.jpg) no-repeat center center / cover;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
}

.offln_stat_row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.offln_stat_circle {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.offln_stat_meta {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.offln_stat_body {}

.offln_stat_strong {

    font-size: 22px;
    display: block;
    font-weight: 800;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.offln_stat_strong sup {
    font-size: 0.6em;
    font-weight: 700;
    vertical-align: super;
}

.offln_cta_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 20px;
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(12px);
    border: 1px solid #808080;
    -webkit-backdrop-filter: blur(12px);
    width: 80%;
    margin: 0 auto;
}

.offln_cta_titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.offln_cta_academy {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}

.offln_cta_tit {
    font-size: 35px;
    font-weight: 800;
    color: #222;
    background: linear-gradient(180deg, #fffcdd 0%, #fff600 40%, #e8dc00 100%);
    padding: 14px 18px;
    border-radius: 14px;
    margin: 10px 0 30px;

}

.offln_cta_btn {
    width: 240px;
    padding: 10px 0;
    background: #353535;
    font-size: 20px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid #fff600;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.offln_cta_btn:hover {
    background: #222;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.offln_cta_btn:focus-visible {
    outline: 3px solid rgba(24, 164, 156, 0.45);
    outline-offset: 3px;
}

.offln_notes {
    margin-top: 20px;
    font-size: 14px;
    color: #ccc;
}

.offln_notes li+li {
    margin-top: 5px;
}

/* 강력추천 */
.lec_card {
    position: relative;
    overflow: hidden;
}

.belt_badge {
    position: absolute;
    top: -50px;
    right: -40px;
}

/* 혜택 */
.ev_benefit_wrap {
    margin-top: 80px;
    text-align: center;
}

.ev_benefit_wrap a:first-child {
    padding-top: 0;
}

.ev_benefit_wrap a {
    padding-top: 20px;
    display: block;
}

/* 컨텐츠2 */
.cont_2_bg {
    background: #f5f5f5;
}

.cont_2_item ul {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}



/* 컨텐츠3 */
.cont_3_bg {
    padding: 100px 0 40px;
    background: linear-gradient(45deg, #42558a 0%, #32b7b6 100%);
}

/* 스크롤 다운 인디케이터 — 마우스(캡슐) + 원형 휠 이동 */
.arrow_wrap {
    position: relative;
    width: 34px;
    height: 78px;
    margin: 28px auto 0;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 14px 24px -12px rgba(255, 255, 255, 0.35);
}

.arrow_item {
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transform: translate3d(-50%, 11px, 0);
    opacity: 0;
    animation: arrowWheelDown 2.2s linear infinite;
    backface-visibility: hidden;
}

@keyframes arrowWheelDown {
    0%,
    100% {
        opacity: 0;
        transform: translate3d(-50%, 11px, 0) scale(0.92);
    }
    10% {
        opacity: 1;
        transform: translate3d(-50%, 11px, 0) scale(1);
    }
    48% {
        opacity: 1;
        transform: translate3d(-50%, 48px, 0) scale(1);
    }
    58% {
        opacity: 0;
        transform: translate3d(-50%, 56px, 0) scale(0.92);
    }
    58.01%,
    99.99% {
        opacity: 0;
        transform: translate3d(-50%, 11px, 0) scale(0.92);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arrow_item {
        animation: none;
        opacity: 0.85;
        transform: translate3d(-50%, 36px, 0) scale(1);
    }
}

/* 컨텐츠3-01 (PC: 쇼츠 썸네일 가로 정렬) */
.cont_3_01_bg {background: #fff; padding: 100px 0;}
.cont_3_01_item ul{display: flex; flex-wrap: nowrap; gap: 20px; justify-content: center;}
.cont_3_01_item ul li{cursor: pointer;}

/* 쇼츠 모달 (9:16) */
.sr_only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.shorts_modal{
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.shorts_modal.is_open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.shorts_modal__backdrop{
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.shorts_modal__dialog{
    position: relative;
    z-index: 1;
    width: 360px;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.45));
}
.shorts_modal__frame{
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}
.shorts_modal__frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* 컨텐츠3-02 */
.cont_3_02_bg {background: #f5f5f5; padding: 100px 0;}
.cont_3_02_bg img{max-width:auto;}
.cont_3_02_bg .sub_text{font-size:14px; font-weight: 400; color:#333; margin-top:10px; word-break: keep-all;display: flex;}
.cont_3_02_bg .sub_text::before{content: '※'; margin-right: 5px;}
.cont_3_02_bg .sub_text a{color: #0006ff;text-decoration: underline;}

/* 컨텐츠3-03 */
.cont_3_03_bg {background: #212529; padding: 100px 0;}


/* 컨텐츠3-04 */
.cont_3_04_bg {padding: 100px 0;}
.cont_3_04_bg .curriculum_wrap{}
.cont_3_04_bg .sub_text{margin-top:10px;}

/* 컨텐츠4 */
.cont_4_item{position: relative;}
.cont_4_item .click_wrap{
    position: absolute;
    right:0;
    top:-30px;
    z-index: 2;
    animation: bounce 1s infinite;
    cursor: pointer;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* cont_4 강의 미리보기 유튜브 (16:9) */
.cont4_preview_modal{
    position: fixed;
    inset: 0;
    z-index: 10051;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.cont4_preview_modal.is_open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.cont4_preview_modal__backdrop{
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.78);
    cursor: pointer;
}
.cont4_preview_modal__dialog{
    position: relative;
    z-index: 1;
    width: 980px;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.45));
}
/* 강의 미리보기·쇼츠·적중 팝업 공통 닫기 버튼 */
.cont4_preview_modal__close,
.shorts_modal__close,
.c4hit_modal__close{
    position: absolute;
    top: -45px;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: background 0.15s;
}
.cont4_preview_modal__close:hover,
.shorts_modal__close:hover,
.c4hit_modal__close:hover{background: rgba(0, 0, 0, 0.85);}
.cont4_preview_modal__frame{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}
.cont4_preview_modal__frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* cont_4 적중 슬라이드 팝업 (1215_pr_jpg 동일 구성) */
.c4hit_modal{
    position: fixed;
    inset: 0;
    z-index: 10052;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.c4hit_modal.is_open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.c4hit_modal__backdrop{
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}
.c4hit_modal__dialog{
    position: relative;
    z-index: 1;
    width: 900px;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    background: #2b776b;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.c4hit_modal__body{
    overflow-y: auto;
    overflow-x: hidden;
    padding: 36px 24px 40px;
    -webkit-overflow-scrolling: touch;
}
.c4hit_modal .evt_cont_typo h2{
    font-size: 42px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    text-align: center;
    color: #fff;
    line-height: 1.35;
    margin: 0;
}
.c4hit_modal .evt_cont_typo h2 strong{
    font-weight: 800;
    background: #000;
    padding: 0 12px;
    color: #fff;
    display: inline-block;
    margin-top: 0.15em;
}
.c4hit_conts_wrap{
    padding-top: 28px;
}
.c4hit_evt_conts .slide_box{position: relative; height: 100%; text-align: center;}
.c4hit_evt_conts .slide_box.pc{display: block;}
.c4hit_evt_conts .slide_box.mo{display: none;}
.c4hit_evt_conts .swiper-container{
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
}
.c4hit_evt_conts .swiper-slide img{
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}
.c4hit_evt_conts .swiper-button-prev,
.c4hit_evt_conts .swiper-button-next{
    color: #fff;
}
.c4hit_evt_conts .swiper-arrow-prev{left: 4px;}
.c4hit_evt_conts .swiper-arrow-next{right: 4px;}
.c4hit_evt_conts .swiper-pagination{
    position: static;
    margin-top: 16px;
    width: 100%;
    text-align: center;
}
.c4hit_evt_conts .swiper-pagination span{
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #9ec4be;
    border-radius: 50%;
    margin: 0 5px;
    transition: background 0.15s;
}
.c4hit_evt_conts .swiper-pagination span.active{background: #fff;}
.c4hit_evt_conts .sub__text{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 28px;
    line-height: 1.55;
    padding: 0 8px;
}

/* 모바일 전용 적중 팝업 (#cont4_hit_modal_mo) */
#cont4_hit_modal_mo.c4hit_modal{
    align-items: flex-end;
    padding: 0;
}
#cont4_hit_modal_mo .c4hit_modal__dialog{
    width: 100%;
    max-width: 100%;
    max-height: min(92vh, 720px);
    border-radius: 16px 16px 0 0;
}
#cont4_hit_modal_mo .c4hit_modal__body{
    padding: 18px 12px 24px;
}
#cont4_hit_modal_mo .evt_cont_typo h2{
    font-size: 20px;
    line-height: 1.35;
}
#cont4_hit_modal_mo .evt_cont_typo h2 strong{
    padding: 0 8px;
    margin-top: 0.2em;
}
#cont4_hit_modal_mo .c4hit_conts_wrap{
    padding-top: 14px;
}
#cont4_hit_modal_mo .c4hit_slide_mo,
#cont4_hit_modal_mo .c4hit_evt_conts .slide_box.mo{
    display: block !important;
}
#cont4_hit_modal_mo .c4hit_evt_conts .slide_box.pc{
    display: none !important;
}
#cont4_hit_modal_mo .c4hit_evt_conts .sub__text{
    font-size: 11px;
    margin-top: 14px;
    line-height: 1.5;
    padding: 0 2px;
}
#cont4_hit_modal_mo .c4hit_evt_conts .swiper-arrow-prev{left: 2px;}
#cont4_hit_modal_mo .c4hit_evt_conts .swiper-arrow-next{right: 2px;}

/* 컨텐츠5 */
.cont_5_bg{
    background: url(https://image.engineerlab.co.kr/data/www/engr/promotion/2026/0512_pr_jgp/5/bg.jpg) no-repeat center center / cover;
    padding: 100px 0;
}

.cont_5_bg .sub_typo{
    text-align: center;
    margin-bottom:30px;
    color:#00a394;
    font-size:35px;
    font-weight: 700;
}

.cont_5_bg .sub_typo p{
    border-radius: 99px;
    color:#00a394;
    display:inline-block;
    font-size:35px;
    font-weight: 700;
    padding:10px 30px;
    text-align: center;
    background-color:#fff;
}

.cont_5_roll{
    background-color:#fff;
    height: 500px;
    width: 100%;
    border:1px solid #ccc;
    margin-top: -10px;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

/* cont_5 후기 롤링 (1215와 동일 동작, 리스트형 레이아웃) */
.cont_5_review_swiper{
    width: 100%;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    padding: 14px 30px;
    box-sizing: border-box;
}
.cont_5_review_swiper li{
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    height:40px;
}
.cont_5_review__row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap:20px;
}
.cont_5_review__quote{
    font-size: 25px;
    font-weight: 700;
    text-align: left;
    word-break: keep-all;
}
.cont_5_review__hl{
    background-color: #d1f2f0;
    color:#16a59d;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.cont_5_review__label{
    flex-shrink: 0;
    max-width: 34%;
    min-width: 5.5em;
    color: #999;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-align: right;
    white-space: normal;
}

@media screen and (min-width: 1200px) {
    .fixed-btns{bottom: 113px !important;}
}

@media screen and (max-width: 1200px) {
    .inner{padding:0 20px;}
    .visual_center .badge_icon{
        top: 44%;
        z-index: 1;
        left:0;
    }

}

@media screen and (max-width: 820px) {
    .visual_center .badge_icon{
        top: 4%;
        max-width: 100%;
        width: 29%;
        right:0;
        left:auto;
    }
    .c4hit_evt_conts .slide_box.pc{display: none;}
    .c4hit_evt_conts .slide_box.mo{display: block;}

    .evt_wrp{display:none;}
    .evt_wrp_mo{display:block; overflow: hidden;}
    .bg{padding: 60px 0;}
    .typo_wrap{padding-bottom: 30px;}

    /* 바텀배너 */
    .bottom_banner .left_txt p:first-child{font-size:25px;}
    .bottom_banner .left_txt p:last-child{font-size:9px;}
    .bottom_banner .right_txt_btn{font-size:25px; padding:10px;}
    .bottom_banner .right_txt{height:auto;}
    /* 비주얼 */
    .visual{
        background: url(https://image.engineerlab.co.kr/data/www/engr/promotion/2026/0512_pr_jgp/visual/m_bg.jpg)
         no-repeat top center / cover;
        aspect-ratio: 720 / 1950;
        min-height: auto;
    }
    .visual_txt{font-size:12px;    letter-spacing: 6px;padding-top:40px;}
    .visual_left{left: 10px;width: 40%;top:195px;}
    .visual_right{right: -50px;width: 100%;top: 367px;}
    .icon_wrap{margin-top: 30px;}
    .roll_move{animation: roll_x 10s linear infinite;width: 100%;}
    .roll_line_rev .roll_move{animation-duration: 20s;}
    .roll_box{margin-top:-40px;    padding: 0 0 80px;}

    /* 탭 */
    .tabs_lec{margin: 40px auto 20px;}
    .tabs_lec li{font-size:clamp(14px, 13.5px + 0.125vw, 16px);padding: 10px;}
    .sub_tab_icon_wrap{top: -16px;left: -14px;}
    .sub_tab_icon_wrap .sub_tab_icon {
        max-width: 80px;
        max-height: 80px;
        min-width: 55px;
        min-height: 55px;
        width:14vw;
        height:auto;
        aspect-ratio: 1 / 1;
    }
    .sub_tab_icon_wrap p{font-size:clamp(11px, 10.4px + 0.1875vw, 14px);}



    /* 상품 카드 가로 스와이프 (모바일 .evt_wrp_mo 전용 — PC .evt_wrp 동일 클래스/id 있으나 표시 안 됨) */
    .evt_wrp_mo #tab_con1_mo .lec_card_row,
    .evt_wrp_mo #tab_con2_mo .lec_card_row,
    .evt_wrp_mo #tab_con3_mo .lec_card_row {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 16px 0 24px;
        scrollbar-width: none;
        box-sizing: border-box;
    }
    .evt_wrp_mo #tab_con1_mo .lec_card_row::-webkit-scrollbar,
    .evt_wrp_mo #tab_con2_mo .lec_card_row::-webkit-scrollbar,
    .evt_wrp_mo #tab_con3_mo .lec_card_row::-webkit-scrollbar {
        display: none;
    }
    .evt_wrp_mo #tab_con1_mo .lec_card_row > .lec_card,
    .evt_wrp_mo #tab_con2_mo .lec_card_row > .lec_card,
    .evt_wrp_mo #tab_con3_mo .lec_card_row > .lec_card {
        flex: 0 0 90%;
        scroll-snap-align: start;
        min-width: 0;
    }
    .evt_wrp_mo .lec_card {
        padding: 20px 16px;
    }
    .evt_wrp_mo .lec_card_tit {
        font-size: 18px;
    }
    .evt_wrp_mo .lec_card_info li {
        font-size: 14px;
    }
    .evt_wrp_mo .lec_card_price .total-amt {
        font-size: 28px;
    }
    .evt_wrp_mo .lec_card_btns a {
        font-size: 15px;
        padding: 12px 0;
    }
    .evt_wrp_mo .lec_card_book {
        padding: 15px;
        margin-bottom: 10px;
    }
    .evt_wrp_mo .lec_card_book label {
        font-size: 14px;
        padding: 15px;
    }
    .evt_wrp_mo .lec_card_info {
        margin-bottom: 0;
    }
    .evt_wrp_mo .lec_card_price {
        margin-bottom: 7px;
    }
    .evt_wrp_mo .lec_card_price em {
        font-size: 14px;
    }
    .evt_wrp_mo .lec_card_price strong {
        font-size: 25px;
    }
    .evt_wrp_mo #tab_con1_mo .lec_card:first-child .belt_badge {
        top: -36px;
        right: -130px;
    }
    .evt_wrp_mo #tab_con1_mo .lec_card:first-child .belt_badge img {
        width: 60%;
    }
    .evt_wrp_mo #tab_con2_mo .lec_card:nth-child(2) .belt_badge {
        top: -36px;
        right: -130px;
    }
    .evt_wrp_mo #tab_con2_mo .lec_card:nth-child(2) .belt_badge img {
        width: 60%;
    }
    .lec_card_promo{padding:0 !important;}
    .offln_stat_circle {width:110px; height: 110px;;}
    .offln_stat_meta{font-size:16px;}
    .offln_stat_strong{font-size:18px;word-break: keep-all;}
    .offln_cta_box{width:100%;padding:20px 0;}
    .offln_cta_academy{font-size:16px;}
    .offln_cta_tit{font-size:22px;margin: 0 auto 20px;padding: 15px;}
    .offln_notes{font-size:12px;}

    /* 컨텐츠2 */
    .cont_2_item ul{grid-template-columns: repeat(1, 1fr); gap:10px;text-align: center;}
    .cont_2_item ul li{width:100%;}

    /* 컨텐츠3 */
    .cont_3_bg, .cont_3_02_bg, .cont_3_03_bg, .cont_3_04_bg{padding: 40px 0;}
    .arrow_wrap{overflow: hidden;height: 55px;width: 25px;margin: 0 auto;}
    .cont_3_01_bg{padding: 40px 0;}
    /* 쇼츠 Swiper (.evt_wrp_mo 전용, PC 블록은 숨김) */
    .evt_wrp_mo .cont_3_shorts_swiper {
        overflow: hidden;
        padding-bottom: 32px;
        box-sizing: border-box;
    }
    .evt_wrp_mo .cont_3_shorts_swiper .swiper-slide {
        cursor: pointer;
        box-sizing: border-box;
    }
    .evt_wrp_mo .cont_3_shorts_swiper .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    .evt_wrp_mo .cont_3_shorts_pagination {
        position: relative !important;
        margin-top: 16px !important;
        bottom: auto !important;
        line-height: 1;
    }
    .evt_wrp_mo .cont_3_shorts_pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #ccc;
        opacity: 1;
    }
    .evt_wrp_mo .cont_3_shorts_pagination .swiper-pagination-bullet-active {
        background: #18a49c;
    }
    .swiper-container{padding-top:0;}

    /* 컨텐츠4 */
    .cont_4_item .click_wrap{width:20%;top:0;}

    /* 컨텐츠5 — 모바일 (.evt_wrp_mo): 후기 롤링 높이·타이포·2줄 말줄임 */
    .evt_wrp_mo .cont_5_bg {
        padding: 48px 0;
    }
    .evt_wrp_mo .cont_5_bg .sub_typo {
        margin-bottom: 14px;
    }
    .evt_wrp_mo .cont_5_bg .sub_typo p {
        font-size: 14px;
        padding: 5px 16px;
        font-weight: 600;
    }
    .evt_wrp_mo .cont_5_bg .typo_wrap img {
        width: 100%;
        height: auto;
        display: block;
    }
    .evt_wrp_mo .cont_5_img img {
        width: 100%;
        height: auto;
        display: block;
    }
    .evt_wrp_mo .cont_5_roll {
        height: auto;
        min-height: 0;
        margin-top: 0;
        border-radius: 8px;
    }
    .evt_wrp_mo .cont_5_review_swiper {
        height: 260px;
        padding: 10px 14px;
    }
    .evt_wrp_mo .cont_5_review_swiper li {
        height: auto;
        min-height: 56px;
        padding: 8px 0;
        box-sizing: border-box;
    }
    .evt_wrp_mo .cont_5_review__row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .evt_wrp_mo .cont_5_review__quote {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
        word-break: keep-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .evt_wrp_mo .cont_5_review__label {
        align-self: flex-end;
        max-width: 100%;
        min-width: 0;
        font-size: 12px;
        line-height: 1.35;
        text-align: right;
    }
    .evt_wrp_mo .cont_5_review__hl {
        padding: 0 3px;
        font-size: inherit;
    }
    .cont_3_02_bg .sub_text, .cont_3_04_bg .sub_text{font-size:12px;}
    .ev_benefit_wrap{margin-top:20px;}
    .offln_cta_btn{width:195px;}
}

@media screen and (max-width:820px) and (min-width:395px) {
    .br_395{display:none}
}