/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.SemiPkgProcessKDT div,
.SemiPkgProcessKDT a {
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    box-sizing: border-box;
}



.lbti_banner,
.top_banner,
.left_nav_btn,
.left_nav_wrap,
#top_btn2,
#topBtn4Rn {
    display: none;
}

._poAb {
    position: absolute;
}

._poRe {
    position: relative;
}

._onlyPc {
    display: block;
}

._onlyPcFlex {
    display: flex;
}

.conSec1 {
    background: #000003;
}

.conDev1Div1 {
    background: url('/assets/data/img/promotion/SemiPkgProcessKDT/2604/pc/1/bg.png') no-repeat center center;
    background-size: cover;
}

.conDev1Div2 {
    position: relative;
    ;
}

.conDev1Div2Text {
    font-size: 18px;
    color: white;
    left: 664px;
    top: 239px;
    width: 290px;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/* ._infoTxt {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 170%; 
    letter-spacing: -0.36px;
    right: 160px;
    bottom: 260px;
}
._infoTxt2 {
    bottom: 163px;
} */
.conSec2 {
    background: "";
    padding: 100px 0;
}

.conSec2 ._tit {
    color: #FFF;
    font-size: 42px;
    font-weight: 700;
    line-height: 100%;
    /* 42px */
    letter-spacing: 2.1px;
    margin-bottom: 18px;
}

.conSec2 ._txt {
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    line-height: 160%;
    /* 27.2px */
}

.conSec3 {
    background: #F5F5F5;
}

.conSec4 {
    background: #1C1C1C;
}

.conSec5 {
    background: #000;
}

.conSec6 {
    background: #EEE;
}


.slide_slick2 {
    width: 876px;
    height: 294px;
    top: 611px;
    left: 112px;
}

.slide_slick2 .slick_title {
    color: #020202;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    /* 30px */
    letter-spacing: -0.4px;
    margin-bottom: 14px;
    text-align: left;
}

.slick_list_wrp .container__image {
    width: 622px;
    height: 350px;
    object-fit: cover;
}

.slick_list_wrp2 .container__image {
    width: 876px;
    height: 250px;
    object-fit: cover;
}

.slick_list_wrp3 .slick_item {
    width: 255px;
    height: 753px;
    /* 높이를 고정하지 않고 이미지 비율에 맞춤 */
    object-fit: cover;
    margin-right: 10px;
}

.slick_box1 {
    top: 1750px;
    left: 159px;
    width: 785px;
    height: 154px;
}

.slick-arrow {
    font-size: 0;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -43px;
}

.slick-arrow.slick-prev {
    background: url('/assets/data/img/promotion/SemiPkgProcessKDT/2604/pc/4/BTN_left.svg') no-repeat center center;
    left: -72px;
    top: 143px;
    height: 50px;
    width: 50px;
}

.slick-arrow.slick-next {
    background: url('/assets/data/img/promotion/SemiPkgProcessKDT/2604/pc/4/BTN_right.svg') no-repeat center center;
    right: -72px;
    top: 143px;
    height: 50px;
    width: 50px;
}

/* 아코디언 아이템 */
.accordion-item {
    border-radius: 3px;
    overflow: hidden;
}

.accordion-item.lecture .accordion-header {
    background-color: #2E3138;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    word-break: keep-all;
}

.accordion-item.lecture .accordion-header:hover {
    background-color: #2E3138;
}

.accordion-item.project .accordion-header {
    background: linear-gradient(90deg, #1047B5 0%, #0B0E16 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-align: left;
    word-break: keep-all;
}

/* 
.accordion-item.project .accordion-header .lecture-title {
    color: #000;
} */
.accordion-item.project .accordion-header:hover {
    opacity: 0.9;
}

.lecture-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff;
    flex: 1;
}

.arrow-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.accordion-item.active .arrow-icon {
    transform: rotate(180deg);
}

/* 아코디언 콘텐츠 - Grid 방식 사용 */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    background-color: #373D3D;
    overflow: hidden;
}

.accordion-content-inner {
    min-height: 0;
    padding: 0 10px;
    transition: padding 0.3s ease;
}

.accordion-item.project .accordion-content {
    background: linear-gradient(90deg, #1047B5 0%, #0B0E16 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.accordion-item.active .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-item.active .accordion-content-inner {
    padding: 10px;
}

.accordion-content p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: #fff;
    margin: 5px 0;
    text-align: left;
}

.accordion-content p:first-child {
    margin-top: 0;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}

/*float*/
._flt {
    width: 100%;
    height: 64px;
    margin: 0 auto;
    left: 0;
    bottom: 40px;
    z-index: 10;
}

._flt ._fltCon {
    width: 840px;
    margin: 0 auto;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.35);
    padding: 10px 10px 10px 20px;
}

.countdown-bar {
    justify-content: space-between;
    align-items: center;
}

.countdown-text {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 148%;
    /* 23.68px */
    letter-spacing: -0.32px;
}

a.apply-btn {
    height: 44px;
    padding: 7px 27px;
    line-height: 27px;
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.3px;
    border-radius: 9px;
    background: #C80821;
    box-sizing: border-box;
}

a.apply-btn .btn-text {
    color: #FFED27;
    font-size: 13px;
    font-weight: 700;
    line-height: 148%;
    /* 19.24px */
    letter-spacing: -0.26px;
}

.reserv_wrp .countdown-text {
    color: #989898;
}

.reserv_wrp .apply-btn {
    background: #191919;
}

.kdt-tab-nav {
    width: 100%;
    background: #fff;
    /* 스크롤 전: 일반 흐름 위치 */
}

/* 상단 고정 상태 */
.kdt-tab-nav.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 고정됐을 때 밀림 방지용 placeholder */
.kdt-tab-nav-placeholder {
    display: none;
}

.kdt-tab-nav-placeholder.is-active {
    display: block;
}

/* 탭 내부 레이아웃 */
.kdt-tab-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 0 213px;
    background: #222;
}

/* 탭 아이템 */
.kdt-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    padding: 25px 40px;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #878787;
    transition: color 0.2s, border-color 0.2s;
}

/* .kdt-tab-item:hover {
    color: #FF354F;
} */
@media (hover: hover) and (pointer: fine) {
  .kdt-tab-item:hover {
    color: #FF354F;
  }
}
.kdt-tab-item.is-active {
    color: #FF354F;
    border-bottom: 2px solid #FF354F;
}

/* 비활성 패딩 조정 (Figma: layout_L3B0I4 → padding: 25px 0) */
.kdt-tab-item:not(.is-active) {
    padding: 25px 0;
}

.conDiv4Box {
    width: 980px;
    padding: 50px 178px 107px;
    border-radius: 11px;
    border: 1px solid #424242;
    background: #000;
    margin: auto;
    position: relative;
}

.conDev4BoxTitle {
    color: #FFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.44px;
    margin-bottom: 25px;
}

/* 화면이 768px 이하일 때 width를 auto로 변경 */
@media screen and (max-width: 768px) {

    ._onlyPc {
        display: none;
    }

    ._onlyPcFlex {
        display: none;
    }

    .lec_info_wrp {
        padding: 40px 16px;
        background: #000003;
    }

    .info_box_wrp {
        gap: 15px;
        margin-bottom: 16px;
    }

    .info_box {
        padding: 14px;
        width: 164px;
        height: 72px;
        border-radius: 10px;
        background: #000003;
        position: relative;
    }

    .info_box::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        padding: 1px;
        /* border 두께 */
        background: linear-gradient(135deg, #6D4033, #6C1627);
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .info_box .__tit {
        color: #B2B2B2;
        font-size: 12px;
        font-weight: 700;
        line-height: 170%;
        /* 20.4px */
        letter-spacing: -0.24px;
        margin-bottom: 2px;
        text-align: left;
    }

    .info_box .__txt {
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 170%;
        /* 22.1px */
        letter-spacing: -0.26px;
        text-align: left;
    }

    .info_box2 {
        width: 100%;
        margin-bottom: 16px;
    }

    .ntc_txt {
        color: #A3A3A3;
        font-size: 10px;
        font-weight: 400;
        line-height: 170%;
        /* 17px */
        letter-spacing: -0.2px;
        text-align: center;
    }

    .conSec2 {
        padding: 70px 21.5px;
    }

    .conSec2 ._tit {
        font-size: 27px;
        margin-bottom: 8px;
    }

    .conSec2 ._txt {
        font-size: 14px;

    }

    .timerBox {
        margin-top: 22px;
        width: 100%;
        height: 63px;
        padding: 20px 18px 17px 18px;
        gap: 15px;
    }

    .time_txt {
        width: 36px;
        height: 26px;
        line-height: 26px;
        font-size: 26px;
    }

    .time_txt2 {
        font-size: 10px;
    }

    .rowSlide_tit {
        color: #000;
        font-size: 27px;
        font-weight: 700;
        line-height: 152%;
        text-align: center;
        margin-bottom: 30px;
    }

    .rowSlide_tit span {
        font-size: 15px;
        font-weight: 500;
        line-height: 152%;
    }

    .video_wrp {
        width: 100%;
        height: 187px;
        padding: 68px 32px;
    }

    .mo_img_bg {
        background-color: #fff;
    }

    .ing_video_box ._tit {
        color: #8F8F8F;
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        line-height: 152%;
        /* 19.76px */
        letter-spacing: -0.26px;
        margin-top: 7px;
    }

    .add_6_img {
        margin-top: -3px;
        background: #fff;
        padding-bottom: 57px;
    }

    .mo_slick_box {
        width: 300px;
        padding: 23px 6px 25px 7px;
        flex-direction: column;
        gap: 18px;
        border: 2px solid #FFF;
        background: #F6F6F6;
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .mo_slick_box ._tit {
        color: #020202;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        line-height: 152%;
        letter-spacing: -0.36px;
        margin-bottom: 18px;
    }

    .mo_slick_box ._con_box {
        width: 255px;
        height: 154px;
        margin: 0 auto;
        margin-bottom: 18px;
    }

    ._btm {
        width: 205px;
        margin: 0 auto;
    }

    ._btm .__txt {
        text-align: left;
        color: #222;
        font-size: 15px;
        font-weight: 500;
        line-height: 178%;
        letter-spacing: -0.3px;
    }

    ._btm .__txt1 {
        font-size: 15px;
        color: #0056C7;
    }

    .slide_slick {
        top: unset;
        left: 80px;
        bottom: 30.9%;
    }

    .mo_slick_box2 {
        width: 100%;
        padding: 20px 0 20px 30px;
        background-color: #fff;
    }

    .mo_slick_box2 ._tit {
        color: #020202;
        font-size: 20px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: -0.4px;
        text-align: left;
    }

    .slick_list_wrp2_mo {
        margin-top: 16px;
    }

    .slick_list_wrp2_mo .slick_item {
        width: 330px;
        height: auto;
        /* 높이를 고정하지 않고 이미지 비율에 맞춤 */
        margin-right: 10px;
    }

    .slick_list_wrp2_mo .container__image,
    .slick_list_wrp3_mo .container__image {
        width: 100%;
        height: 100%;
        /* 1. 이미지가 잘리지 않고 전체가 다 보이게 설정 */
        object-fit: contain;
    }

    .slick_wrp3 {
        margin-top: 25px;
        margin-bottom: 10px;
        padding: 22px 38px;
        border-radius: 8px;
        border: 2px solid #FFF;
        background: #F6F6F6;
        margin: 40px 16px;
    }

    .slick_list_wrp3_mo .slick_item {
        width: 255px;
        height: 154px;
        /* 높이를 고정하지 않고 이미지 비율에 맞춤 */
        margin-right: 1px;
    }

    .slick-arrow {
        top: -45px;
    }

    .slick_wrp3 .slick_txt {
        margin-top: 19px;
        color: #A41C37;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        line-height: 152%;
        /* 27.36px */
        letter-spacing: -0.36px;
    }

    ._flt {
        bottom: 0;
        height: 60px;
    }

    ._flt ._fltCon {
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .countdown-text {
        font-size: 13px;
        width: 150px;
    }

    a.apply-btn {
        padding: 10px 15px;
        font-size: 13px;
        height: 40px;
        line-height: 20px;
        box-sizing: border-box;
    }

    .conSec6 {
        background-color: #fff;
    }


    .kdt-tab-inner {
        padding: 0;
        gap: 0;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .kdt-tab-inner::-webkit-scrollbar {
        display: none;
    }

    .kdt-tab-item,
    .kdt-tab-item:not(.is-active) {
        width: auto;
        flex-shrink: 0;
        padding: 16px 20px;
        font-size: 14px;
    }

    .conDiv4Box {
        width: 100%;
        padding: 27px 25px;
    }

    .slick_list_wrp .container__image {
        width: 330px;
        height: auto;
        margin-right: 10px;
    }

    .slick-arrow.slick-prev {
        background: url('/assets/data/img/promotion/SemiPkgProcessKDT/2604/mo/4/BTN_left.svg') no-repeat center center;
        left: -26px;
        top: 62px;
        height: 25px;
        width: 25px;
    }

    .slick-arrow.slick-next {
        background: url('/assets/data/img/promotion/SemiPkgProcessKDT/2604/mo/4/BTN_right.svg') no-repeat center center;
        right: -26px;
        top: 62px;
        height: 25px;
        width: 25px;
    }

}