/* ========================================
   Splash Screen
   ======================================== */

body.splash-active {
    overflow: hidden;
    pointer-events: none;
}

body.splash-active .loading_animation {
    pointer-events: all;
}

body.splash-active .header_root_container {
    visibility: hidden;
}

.loading_animation {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

@media (min-width: 768px) {
    .page-template-page-main .desktop.loading_animation { display: flex; }
    .page-template-page-main .mobile.loading_animation { display: none !important; }
    .desktop.loading_animation .video_loading {
        width: 1440px;
        height: 810px;
    }
}

@media (max-width: 767.98px) {
    .page-template-page-main .desktop.loading_animation { display: none !important; }
    .page-template-page-main .mobile.loading_animation { display: flex; }
    .mobile.loading_animation .video_loading {
        width: 360px;
        height: 480px;
    }
}

/* ========================================
   Main Page - Hero Section
   ======================================== */

.main-hero {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.main-hero .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.25);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.67);
    transition: opacity 0.6s ease;
}

/* --- 메인 페이지: GNB 로고 (데스크탑에서도 표시) --- */

/* --- 메인 페이지: 데스크탑에서 스크롤큐 숨김 (Hero 위에서만) --- */

/* --- WATCH VIDEO 모드 --- */
.main-hero.watching-ui .hero-overlay {
    opacity: 0;
}

.header_root_container {
    transition: opacity 0.6s ease;
}

.header_root_container.hero-hidden {
    opacity: 0;
    pointer-events: none !important;
}

/* watching-ui: UI 슬라이드 + 오버레이 제거 */
/* watching-bar: 하단바 등장 (JS에서 딜레이 후 추가) */

/* ========================================
   Desktop (min-width: 768px)
   ======================================== */
@media (min-width: 768px) {

    /* --- Hero Container --- */
    /* 스케일 단위: 가로(1440) vs 세로(810) 중 작은 비율 사용 → 클리핑 방지 */
    .main-hero.desktop {
        --s: min(100vw / 1440, 100vh / 810);
        height: 100vh;
    }

    /* --- UI Container (중앙 정렬, max-width 1180) --- */
    .main-hero.desktop .hero-ui {
        position: relative;
        z-index: 2;
        max-width: calc(var(--s) * 1180);
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: calc(var(--s) * 30);
        padding-top: calc(var(--s) * 38);
        box-sizing: border-box;
        transition: transform 0.6s ease, opacity 0.6s ease;
    }

    .main-hero.desktop.watching-ui .hero-ui {
        transform: translateX(-100%);
        opacity: 0;
    }

    /* --- Title Area --- */
    .main-hero.desktop .hero-title-area {
        position: relative;
        display: inline-flex;
        align-items: baseline;
    }

    .main-hero.desktop .hero-title {
        font-family: "brandon-grotesque", sans-serif;
        font-weight: 900;
        font-size: calc(var(--s) * 60);
        line-height: 1;
        color: #ff6b00;
        margin: 0;
        white-space: nowrap;
    }

    .main-hero.desktop .hero-subtitle {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        font-size: calc(var(--s) * 16);
        line-height: 1;
        color: #ffffff;
        margin: 0;
        margin-left: calc(var(--s) * 40);
        padding-top: calc(var(--s) * 22);
        white-space: nowrap;
        align-self: flex-start;
    }

    /* --- Brand Cards Row (cards + WATCH VIDEO) --- */
    .main-hero.desktop .hero-brands-row {
        position: relative;
        display: flex;
        align-items: center;
    }

    .main-hero.desktop .hero-brands {
        display: flex;
        gap: calc(var(--s) * 20);
    }

    .main-hero.desktop .brand-card {
        position: relative;
        display: block;
        overflow: hidden;
        height: calc(var(--s) * 440);
    }

    .main-hero.desktop .brand-coding {
        width: calc(var(--s) * 528);
    }

    .main-hero.desktop .brand-biz,
    .main-hero.desktop .brand-wms {
        width: calc(var(--s) * 306);
    }

    .main-hero.desktop .brand-card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .main-hero.desktop .brand-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: background 0.3s ease;
    }

    .main-hero.desktop .coding-overlay {
        background: rgba(242, 92, 41, 0.7);
    }

    .main-hero.desktop .biz-overlay {
        background: rgba(242, 92, 41, 0.7);
    }

    .main-hero.desktop .wms-overlay {
        background: rgba(51, 102, 255, 0.5);
    }

    .main-hero.desktop .brand-card-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .main-hero.desktop .brand-card-logo {
        object-fit: contain;
    }

    .main-hero.desktop .brand-coding .brand-card-logo {
        width: calc(var(--s) * 197);
    }

    .main-hero.desktop .brand-biz .brand-card-logo {
        width: calc(var(--s) * 146);
    }

    .main-hero.desktop .brand-wms .brand-card-logo {
        height: calc(var(--s) * 60);
    }

    .main-hero.desktop .brand-card-name {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(var(--s) * 21);
        line-height: 1.2;
        color: #ffffff;
        text-align: center;
        margin: calc(var(--s) * 25) 0 0;
        transition: color 0.3s ease;
    }

    .main-hero.desktop .brand-card-desc {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        font-size: calc(var(--s) * 16);
        line-height: 1.25;
        color: #ffffff;
        text-align: center;
        margin: calc(var(--s) * 11) 0 0;
        transition: color 0.3s ease;
    }

    /* --- Brand Card: 로고 래퍼 + 겹침 (opacity 크로스페이드) --- */
    .main-hero.desktop .brand-logo-wrap {
        position: relative;
        display: grid;
        height: calc(var(--s) * 60);
        place-items: center;
    }

    .main-hero.desktop .brand-logo-wrap .logo-white,
    .main-hero.desktop .brand-logo-wrap .logo-dark {
        grid-area: 1 / 1;
        transition: opacity 0.3s ease;
    }

    .main-hero.desktop .brand-logo-wrap .logo-dark {
        opacity: 0;
    }

    /* --- Brand Card: 호버 → 오버레이를 흰색으로 전환 --- */
    .main-hero.desktop .brand-card:hover .brand-card-overlay {
        background: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .main-hero.desktop .brand-card:hover .logo-white {
        opacity: 0;
    }

    .main-hero.desktop .brand-card:hover .logo-dark {
        opacity: 1;
    }

    .main-hero.desktop .brand-card:hover .brand-card-name {
        color: #222222;
    }

    .main-hero.desktop .brand-card:hover .brand-card-desc {
        color: #f74602;
    }

    .main-hero.desktop .brand-biz:hover .brand-card-desc {
        color: #122E57;
    }

    .main-hero.desktop .brand-wms:hover .brand-card-desc {
        color: #3366FF;
    }

    /* --- WATCH VIDEO --- */
    .main-hero.desktop .hero-watch {
        display: flex;
        align-items: center;
        gap: calc(var(--s) * 8);
        margin-left: calc(var(--s) * 30);
        cursor: pointer;
        color: #ffffff;
        white-space: nowrap;
        text-decoration: none;
    }

    .main-hero.desktop .watch-chevron {
        width: calc(var(--s) * 10);
        height: calc(var(--s) * 60);
    }

    .main-hero.desktop .watch-text {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: calc(var(--s) * 12);
        line-height: 1.5;
    }

    /* --- CTA Bar --- */
    .main-hero.desktop .hero-cta-bar {
        display: flex;
        gap: calc(var(--s) * 21);
        align-items: center;
    }

    .main-hero.desktop .cta-label {
        display: flex;
        align-items: center;
        width: calc(var(--s) * 427);
        height: calc(var(--s) * 80);
        background: #111111;
        padding: 0 calc(var(--s) * 22);
        box-sizing: border-box;
    }

    .main-hero.desktop .cta-label span {
        font-family: "brandon-grotesque", sans-serif;
        font-weight: 700;
        font-size: calc(var(--s) * 24);
        line-height: 1;
        color: #ff6b00;
        white-space: nowrap;
    }

    .main-hero.desktop .cta-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--s) * 230);
        height: calc(var(--s) * 80);
        border: calc(var(--s) * 2) solid #f74602;
        box-sizing: border-box;
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(var(--s) * 18);
        color: #f74602;
        text-align: center;
        white-space: nowrap;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .main-hero.desktop .cta-button:hover {
        background: #ffffff;
        color: #f74602;
        border-color: #ffffff;
    }

    /* --- Bottom Bar (기본 숨김, watching 모드에서 등장) --- */
    .main-hero.desktop .hero-bottom-bar {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        max-width: calc(var(--s) * 1180);
        width: 100%;
        z-index: 2;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        box-sizing: border-box;
        transition: transform 0.6s ease, opacity 0.6s ease;
        opacity: 0;
        pointer-events: none;
    }

    .main-hero.desktop.watching-bar .hero-bottom-bar {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .main-hero.desktop .bottom-bar-inner {
        display: flex;
        align-items: stretch;
        background: #111111;
    }

    .main-hero.desktop .bottom-link {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(var(--s) * 18);
        text-decoration: underline;
        white-space: nowrap;
        background: #111111;
        padding: calc(var(--s) * 14) calc(var(--s) * 20) calc(var(--s) * 18);
        display: flex;
        align-items: center;
    }

    .main-hero.desktop .manifesto-link {
        color: #ff6b00;
    }

    .main-hero.desktop .menu-link {
        color: #ffffff;
    }
}

/* ========================================
   Mobile (max-width: 767.98px)
   ======================================== */
@media (max-width: 767.98px) {

    /* --- Hero Container --- */
    .main-hero.mobile {
        height: calc(100vw / 360 * 640);
    }

    /* --- UI Container --- */
    .main-hero.mobile .hero-ui {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: calc(100vw / 360 * 90) calc(100vw / 360 * 24) 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: calc(100vw / 360 * 20);
    }

    /* --- Title Area --- */
    .main-hero.mobile .hero-title-area {
        flex-shrink: 0;
    }

    .main-hero.mobile .hero-title {
        font-family: "brandon-grotesque", sans-serif;
        font-weight: 900;
        font-size: calc(100vw / 360 * 40);
        line-height: 1.1;
        color: #ff6b00;
        margin: 0;
    }

    .main-hero.mobile .hero-subtitle {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        font-size: calc(100vw / 360 * 16);
        line-height: 1;
        color: #ffffff;
        margin: calc(100vw / 360 * 16) 0 0;
    }

    /* --- Brand Cards --- */
    .main-hero.mobile .hero-brands {
        display: flex;
        flex-direction: column;
        gap: calc(100vw / 360 * 10);
        flex-shrink: 0;
    }

    .main-hero.mobile .brand-card {
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .main-hero.mobile .brand-coding {
        height: calc(100vw / 360 * 176);
    }

    .main-hero.mobile .brand-biz,
    .main-hero.mobile .brand-wms {
        height: calc(100vw / 360 * 80);
    }

    .main-hero.mobile .brand-card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .main-hero.mobile .brand-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: background 0.3s ease;
    }

    .main-hero.mobile .coding-overlay {
        background: rgba(242, 92, 41, 0.7);
    }

    .main-hero.mobile .biz-overlay {
        background: rgba(242, 92, 41, 0.7);
    }

    .main-hero.mobile .wms-overlay {
        background: rgba(51, 102, 255, 0.5);
    }

    /* --- Brand Card Content: 코딩 = 세로 중앙, ON/WMS = 가로 (텍스트좌 로고우) --- */
    .main-hero.mobile .brand-card-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 calc(100vw / 360 * 18);
        box-sizing: border-box;
        z-index: 1;
    }

    /* 코딩 카드: 세로 중앙 정렬 */
    .main-hero.mobile .brand-coding .brand-card-content {
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    /* BIZ/WMS 카드: 가로, 텍스트 좌측 + 로고 우측 */
    .main-hero.mobile .brand-biz .brand-card-content,
    .main-hero.mobile .brand-wms .brand-card-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .main-hero.mobile .brand-card-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* --- 로고 래퍼 + 겹침 (opacity 크로스페이드) --- */
    .main-hero.mobile .brand-logo-wrap {
        display: grid;
        flex-shrink: 0;
    }

    .main-hero.mobile .brand-logo-wrap .logo-white,
    .main-hero.mobile .brand-logo-wrap .logo-dark {
        grid-area: 1 / 1;
        transition: opacity 0.3s ease;
    }

    .main-hero.mobile .brand-logo-wrap .logo-dark {
        opacity: 0;
    }

    /* --- 로고 사이즈 --- */
    .main-hero.mobile .brand-card-logo {
        object-fit: contain;
    }

    .main-hero.mobile .brand-coding .brand-card-logo {
        width: calc(100vw / 360 * 136);
        height: calc(100vw / 360 * 40);
    }

    .main-hero.mobile .brand-biz .brand-card-logo {
        width: calc(100vw / 360 * 70);
        height: calc(100vw / 360 * 24);
    }

    .main-hero.mobile .brand-wms .brand-card-logo {
        height: calc(100vw / 360 * 32);
    }

    /* --- 텍스트 --- */
    .main-hero.mobile .brand-card-name {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(100vw / 360 * 16);
        line-height: 1;
        color: #ffffff;
        margin: 0;
        transition: color 0.3s ease;
    }

    .main-hero.mobile .brand-coding .brand-card-name {
        margin-top: calc(100vw / 360 * 14);
        text-align: center;
    }

    .main-hero.mobile .brand-card-desc {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        font-size: calc(100vw / 360 * 12);
        line-height: 1.4;
        color: #ffffff;
        margin: calc(100vw / 360 * 6) 0 0;
        transition: color 0.3s ease;
    }

    .main-hero.mobile .brand-coding .brand-card-desc {
        font-size: calc(100vw / 360 * 14);
        text-align: center;
    }

    /* --- Brand Card: 호버 → 오버레이를 흰색으로 전환 --- */
    .main-hero.mobile .brand-card:hover .brand-card-overlay {
        background: rgba(255, 255, 255, 1);
    }

    .main-hero.mobile .brand-card:hover .logo-white {
        opacity: 0;
    }

    .main-hero.mobile .brand-card:hover .logo-dark {
        opacity: 1;
    }

    .main-hero.mobile .brand-card:hover .brand-card-name {
        color: #222222;
    }

    .main-hero.mobile .brand-card:hover .brand-card-desc {
        color: #f74602;
    }

    .main-hero.mobile .brand-biz:hover .brand-card-desc {
        color: #122E57;
    }

    .main-hero.mobile .brand-wms:hover .brand-card-desc {
        color: #3366FF;
    }

    /* ========================================
       Mobile CTA Section (Hero 아래 별도 블록)
       ======================================== */
    .main-cta.mobile {
        background: #000000;
        padding: calc(100vw / 360 * 30) calc(100vw / 360 * 24) calc(100vw / 360 * 116);
    }

    .main-cta.mobile .cta-title {
        font-family: "brandon-grotesque", sans-serif;
        font-weight: 700;
        font-size: calc(100vw / 360 * 18);
        line-height: 1;
        color: #ff6b00;
        text-align: center;
        margin: 0;
    }

    .main-cta.mobile .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: calc(100vw / 360 * 10);
        margin-top: calc(100vw / 360 * 29);
    }

    .main-cta.mobile .cta-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vw / 360 * 64);
        border: 2px solid #f74602;
        box-sizing: border-box;
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(100vw / 360 * 16);
        color: #f74602;
        text-align: center;
        white-space: nowrap;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .main-cta.mobile .cta-button:hover {
        background: #ffffff;
        color: #f74602;
        border-color: #ffffff;
    }

    .main-cta.mobile .cta-manifesto {
        display: block;
        text-align: center;
        margin-top: calc(100vw / 360 * 30);
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: calc(100vw / 360 * 12);
        color: #c4c4c4;
        text-decoration: underline;
    }
}

/* ========================================
   Section 2 - STAY ALIVE IN YOUR OWN LIFE
   ======================================== */

@keyframes hover-opacity {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 768px) {
    .section2 {
        padding-top: calc(100vw / 1440 * 200);
        padding-left: calc(100vw / 1440 * 240);
    }

    .section2 .section_title {
        font-family: brandon-grotesque;
    }

    .section2 .section_content {
        position: relative;
        width: 100%;
        height: calc(100vw / 1440 * 500);
        margin-top: calc(100vw / 1440 * 80);
    }

    .section2 .section_button {
        position: absolute;
        z-index: 150;
        width: calc(100vw / 1440 * 154);
        height: calc(100vw / 1440 * 80);
        background-image: url(../images/main/index_desktop_section2_btn.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.3s;
    }

    .section2 .section_button:hover {
        background-image: url(../images/main/index_desktop_section2_hover_btn.svg);
        transition: 0.3s;
    }

    .section2 .section2_video {
        position: absolute;
        width: calc(100vw / 1440 * 1120);
        height: calc(100vw / 1440 * 500);
        right: 0;
        top: 0;
        object-fit: cover;
    }
}

@media (max-width: 767.98px) {
    .section2 {
        padding-top: calc(100vw / 360 * 100);
    }

    .section2 .section_title_container {
        padding-left: calc(100vw / 360 * 24);
        margin-top: calc(100vw / 360 * 34);
    }

    .section2 .section_title {
        font-family: brandon-grotesque;
    }

    .section2 .section2_video {
        width: 100vw;
        height: auto;
        object-fit: cover;
    }

    .section2 .button_wrap {
        margin-top: calc(100vw / 360 * 34);
        text-align: right;
        padding-right: calc(100vw / 360 * 24);
    }

    .section2 .button_wrap a {
        display: inline-block;
    }

    .section2 .section_button {
        display: flex;
        align-items: center;
        width: calc(100vw / 360 * 205);
        height: calc(100vw / 360 * 56);
        border: 1.8px solid #f74902;
        padding-top: calc(100vw / 360 * 17);
        padding-bottom: calc(100vw / 360 * 17);
        padding-left: calc(100vw / 360 * 16);
        box-sizing: border-box;
    }

    .section_button .button_title {
        color: #f74902;
        font-weight: 700;
    }

    .section_button .button_arrow {
        margin-left: calc(100vw / 360 * 12);
        width: calc(100vw / 360 * 40);
        height: auto;
    }
}

/* ========================================
   Section 3 - LEADS AND CONNECTS WITH CHILDREN
   ======================================== */

@media (min-width: 768px) {
    .section3 {
        padding-top: calc(100vw / 1440 * 284);
        padding-left: calc(100vw / 1440 * 240);
    }

    .section3 .section_title {
        font-family: brandon-grotesque;
        color: #111111;
    }

    .section3 .section_description {
        margin-top: calc(100vw / 1440 * 16);
        color: #555555;
    }

    .section3 .section_content {
        width: calc(100vw / 1440 * 960);
        margin-top: calc(100vw / 1440 * 40);
    }

    .section3 .brand_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: calc(100vw / 1440 * 20);
        row-gap: calc(100vw / 1440 * 40);
    }

    .section3 .brand_item {
        text-align: center;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .section3 .brand {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100vw / 1440 * 220);
        box-sizing: border-box;
    }

    .section3 .brand1 {
        background: #ff6b00;
    }

    .section3 .brand2 {
        background: #ffffff;
        border: 1px solid #e5e5e5;
    }

    .section3 .brand3 {
        background: #ffffff;
        border: 1px solid #e5e5e5;
    }

    .section3 .brand4 {
        background: #004880;
    }

    .section3 .brand .brand_logo {
        object-fit: contain;
    }

    .section3 .brand1 .brand_logo {
        width: calc(100vw / 1440 * 228);
        height: calc(100vw / 1440 * 67);
    }

    .section3 .brand2 .brand_logo {
        width: calc(100vw / 1440 * 216);
        height: calc(100vw / 1440 * 42);
    }

    .section3 .brand3 .brand_logo {
        width: calc(100vw / 1440 * 191);
        height: calc(100vw / 1440 * 64);
    }

    .section3 .brand4 .brand_logo {
        width: calc(100vw / 1440 * 167);
        height: calc(100vw / 1440 * 117);
    }

    .section3 .brand_name {
        font-family: "Brandon Grotesque", brandon-grotesque, sans-serif;
        font-weight: 900;
        font-size: calc(100vw / 1440 * 24);
        line-height: 1.5;
        color: #000000;
        margin: calc(100vw / 1440 * 30) 0 0;
    }

    .section3 .brand_desc {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        font-size: calc(100vw / 1440 * 16);
        line-height: 1.6;
        color: #888888;
        margin: calc(100vw / 1440 * 8) 0 0;
    }

    .section3 .brand_desc p {
        margin: 0;
    }

    .section3 .section_button {
        display: block;
        margin-top: calc(100vw / 1440 * 60);
        width: calc(100vw / 1440 * 187);
        height: calc(100vw / 1440 * 80);
        background-image: url(../images/main/index_desktop_section3_btn.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.3s;
    }

    .section3 .section_button:hover {
        background-image: url(../images/main/index_desktop_section3_hover_btn.svg);
        transition: 0.3s;
    }
}

@media (max-width: 767.98px) {
    .section3 {
        padding-top: calc(100vw / 360 * 120);
    }

    .section3 .section_title_container {
        padding-left: calc(100vw / 360 * 24);
        margin-top: calc(100vw / 360 * 34);
    }

    .section3 .section_title {
        font-family: brandon-grotesque;
    }

    .section3 .section_content {
        width: 100%;
        margin-top: 0;
    }

    .section3 .swiper-wrapper {
        margin: 0px;
        padding: 0px;
    }

    .section3 .swiper-slide {
        list-style: none;
        width: 100vw;
        height: calc(100vw / 360 * 258);
    }

    .section3 .carousel_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .section3 .swiper-pagination {
        right: calc(100vw / 360 * 24) !important;
        left: auto !important;
        bottom: calc(100vw / 360 * 14) !important;
        width: auto !important;
    }

    .section3 .swiper-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #555555;
        border: none;
        opacity: 1;
    }

    .section3 .swiper-pagination .swiper-pagination-bullet-active {
        background: #bbbbbb !important;
    }


    .section3 .button_wrap {
        margin-top: calc(100vw / 360 * 34);
        text-align: right;
        padding-right: calc(100vw / 360 * 24);
    }

    .section3 .button_wrap a {
        display: inline-block;
    }

    .section3 .section_button {
        display: flex;
        align-items: center;
        width: calc(100vw / 360 * 205);
        height: calc(100vw / 360 * 56);
        border: 1.8px solid #f74902;
        padding-top: calc(100vw / 360 * 17);
        padding-bottom: calc(100vw / 360 * 17);
        padding-left: calc(100vw / 360 * 16);
        box-sizing: border-box;
    }

    .section3 .section_button .button_title {
        color: #f74902;
        font-weight: 700;
    }

    .section3 .section_button .button_arrow {
        margin-left: calc(100vw / 360 * 12);
        width: calc(100vw / 360 * 40);
        height: auto;
    }
}

/* ========================================
   Section 4 - THE REASON WHY D.LAB CHANGES THE WORLD
   ======================================== */

@media (min-width: 768px) {
    .section4 {
        padding-top: calc(100vw / 1440 * 360);
        width: 100%;
    }

    .section4 .section_title_container {
        width: 100%;
        padding-left: calc(100vw / 1440 * 240);
        box-sizing: border-box;
        text-align: left;
    }

    .section4 .section_title {
        font-family: brandon-grotesque;
        color: #111111;
    }

    .section4 .section_description {
        margin-top: calc(100vw / 1440 * 16);
        color: #555555;
    }

    .section4 .section_content {
        position: relative;
        width: 100%;
        height: calc(100vw / 1440 * 720);
        margin-top: calc(100vw / 1440 * 80);
    }

    .section4 .labs_img {
        width: 100vw;
        height: auto;
    }

    .section4 .section_button {
        position: absolute;
        top: calc(100vw / 1440 * 60);
        left: calc(100vw / 1440 * 240);
        z-index: 150;
        display: flex;
        width: calc(100vw / 1440 * 171);
        height: calc(100vw / 1440 * 80);
        background-image: url(../images/main/index_desktop_section4_btn.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.3s;
    }

    .section4 .section_button:hover {
        background-image: url(../images/main/index_desktop_section4_hover_btn.svg);
        transition: 0.3s;
    }
}

@media (max-width: 767.98px) {
    .section4 {
        padding-top: calc(100vw / 360 * 180);
    }

    .section4 .section_title_container {
        padding-left: calc(100vw / 360 * 24);
    }

    .section4 .section_title {
        font-family: brandon-grotesque;
    }

    .section4 .section_content {
        position: relative;
        width: 100%;
        margin-top: calc(100vw / 360 * 40);
        height: calc(100vw / 360 * 392);
    }

    .section4 .labs_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .section4 .section_button {
        position: absolute;
        top: calc(100vw / 360 * 32);
        right: calc(100vw / 360 * 24);
        z-index: 150;
        display: flex;
        align-items: center;
        width: calc(100vw / 360 * 205);
        height: calc(100vw / 360 * 56);
        border: 1.8px solid white;
        padding-top: calc(100vw / 360 * 17);
        padding-bottom: calc(100vw / 360 * 17);
        padding-left: calc(100vw / 360 * 16);
        box-sizing: border-box;
    }

    .section4 .section_button .button_title {
        color: white;
        font-weight: 700;
    }

    .section4 .section_button .button_arrow {
        margin-left: calc(100vw / 360 * 16);
        width: calc(100vw / 360 * 40);
        height: auto;
    }
}