/* =========================================
   높이 750px 이하 nav_menu 영역 변화 따른 대응
   ========================================= */
@media (max-height: 750px) {
    .fp_nav_menu {
        max-height: 550px;
    }
}

@media (max-width: 1413px) {
    #section13.section .flex_wrap {
        gap: 5%;
    }

    #section_footer.section .content.is_visible {
        transform: translateY(-150px);
    }

    body.page_end #menu_info {
        bottom: 330px;
    }

    body.page_end #menu_info.en {
        bottom: 465px;
    }

    .bottom_footer_inner {
        max-width: 850px;
    }

    .f_isms_txt_wrap {
        gap: 30px;
    }

    .f_copy_md { display: block; }
    .f_copy_lg { display: none; }
}

/* =========================================
   1024px 이하 화면 대응 (메뉴, 네비게이션)
   ========================================= */
@media (max-width: 1024px) {
    /* section 화면 */
    .section .flex_wrap {
        flex-direction: column;
        justify-content: flex-start;
        gap: 40px;
    }

    #section13.section .flex_wrap {
        gap: 40px;
    }

    .section .flex_wrap.reverse {
        flex-direction: column-reverse;
    }

    .text_area {
        align-items: center;
        text-align: center;
    }

    .section .text_title, .section.en .text_title {
        font-size: 40px;
    }

    .section .text_sub_title, .section.en .text_sub_title {
        word-break: keep-all;
        font-size: 20px;
    }

    .section .text_content, .section.en .text_content {
        font-size: 12px;
    }

    .mobile_area {
        max-width: 220px;
    }

    .kiosk_area {
        max-width: 240px;
    }

    .mobile_frame {
        max-width: 220px;
    }

    #section6.section .flex_wrap {
        transform: translateY(110px);
    }

    .kiosk_frame {
        max-width: 240px;
    }

    .service15_frame {
        display: none;
    }

    /* navigation 메뉴 */
    #fp_nav_wrap { display: none; }

    /* 우하단 메뉴 */
    .communication_btns, #btn_scroll_bottom, .menu_btn {
        display: block;
    }

    .page_indicator {
        display: block;
    }

    #menu_info {
        bottom: 60px;
    }

    body.page_end #menu_info, body.page_end #menu_info.en {
        bottom: 60px;
    }

    #menu_info.open {
        bottom: 70px;
    }

    body.page_end #menu_info.open, body.page_end #menu_info.open.en {
        bottom: 70px;
    }

    .menu_wrap.closed {
        height: 0;
        transition: all 0.5s ease;
    }

    .menu_wrap.hide_menu {
        overflow: hidden;
    }

    .menu_wrap.open {
        height: 140px;
        transition: height 0.5s ease;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
    }

    body.page_end .comu_btn_wrap p {
        border: 1px solid #006db0;
        border-radius: 20px;
    }

    body.page_end #translate_btn_wrap button {
        border: 1px solid #006db0;
        border-radius: 20px;
    }
    body.page_end #btn_scroll_top, body.page_end #btn_scroll_bottom {
        background-color: rgb(0,109,176) !important;
    }

    .badge_pop_info.visible {
        display: none;
    }

    /* 하단 copyright 문구 */
    .f_copy_md { display: block; }
    .f_copy_lg { display: none; }
}

@media (width: 1024px) and (orientation:portrait)  {
    .mobile_area {
        max-width: 290px;
    }

    .kiosk_area {
        max-width: 300px;
    }

    .mobile_frame {
        max-width: 290px;
    }

    #section6.section .flex_wrap {
        transform: translateY(0);
    }

    .kiosk_frame {
        width: 300px;
        max-width: 300px;
    }
}

/* =========================================
   태블릿 크기 대응 (769px 이상 1024px 이하)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .f_isms_area {
        gap: 0;
    }

    .f_isms_txt_wrap {
        justify-content: center;
    }
}

@media (max-width: 768px) and (orientation:portrait)  {
    @keyframes tail {
        0% { width: 0; }
        15% { width: 250px; }
        30% { width: 0; }
        100% { width: 0; }
    }

    @keyframes shooting {
        0% { transform: translateX(0); }
        30% { transform: translateX(1050px); }
        100% { transform: translateX(0px); }
    }

    .shooting-star {
        top: 55dvh;
        left: 0;
    }
}

/* =========================================
   모바일 크기 대응 (768px 이하)
   ========================================= */
@media (max-width: 768px) {
    .header .nav { display: none; }
    .section h2 { font-size: 18px; }
    .section .desc { font-size: 16px; }
    #scrollBtn { display: none; }

    /* 메인화면 로고, 별똥별 */
    .star-1 { top: 40%; left: 5%; }
    .star-2 { top: 25%; left: 5%; }
    .star-3 { top: 12%; left: 16%; }
    .star-4 { top: 7%; left: 45%; }
    .star-5 { top: 12%; left: 70%; }
    .star-6 { top: 20%; left: 80%; }
    .star-7 { top: 35%; left: 85%; }
    .star-8 { top: 55%; left: 80%; }
    .star-9 { top: 75%; left: 75%; }
    .star-10 { top: 80%; left: 65%; }
    .star-11 { top: 75%; left: 20%; }
    .star-12 { top: 60%; left: 10%; }
    .star-13 { top: 50%; left: 15%; }
    .star-14 { top: 65%; left: 60%; }
    .star-15 { top: 75%; left: 75%; }
    .star-16 { top: 55%; left: 35%; }
    .star-17 { top: 25%; left: 60%; }
    .star-18 { top: 75%; left: 15%; }

    .index_logo i { font-size: 50px; }
    .shooting_star_wrap {
        height: 100dvh;
        top: 0;
        left: -45vw;
        transform: rotateZ(125deg);
    }
    .shooting_star {
        top: 55dvh;
        left: 0;
    }

    /* service1 (dozn api center) */
    #api_w { display: none!important; }
    #api_m {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
        max-width: 700px;
        flex: 1;
    }

    /* section 화면들 */
    .section .flex_wrap {
        gap: 25px;
    }

    .btn_more_link a {
        display: flex;
        justify-content: center;
    }

    .btn_more_link img {
        width: 70%;
    }

    /* 마지막 섹션 'Coming Soon' 텍스트 위치 보정 */
    #section_footer.section .content.is_visible {
        transform: translateY(-150px);
    }

    /* 푸터 전체 패딩 줄임 */
    .bottom_footer {
        padding: 20px 15px;
    }

    /* 푸터 내부 영역 간격 줄임 */
    .bottom_footer_inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .f_logo_area {
        align-self: flex-start;
    }

    .f_logo img {
        width: 90px;
        height: 45px;
    }

    .f_info_area {
        flex: 1 1 auto;
        order: unset;
        margin-top: 0;
        font-size: 12px; /* 폰트 크기 축소 */
        line-height: 1.5; /* 줄 간격 축소 */
    }

    .f_links {
        gap: 12px;
        margin-bottom: 15px; /* 하단 여백 축소 */
    }

    .section .f_links {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-row-gap: 5px;
    }

    .section .f_links.en {
        gap: 5px;
    }

    .f_address span {
        display: inline;
        white-space: break-spaces;
    }

    .f_address p {
        flex-direction: column;
        gap: 2px; /* 주소 텍스트 줄 간격 축소 */
        margin-bottom: 0;
    }

    .f_address .divider {
        display: none;
    }

    .f_isms_area {
        align-items: flex-start;
        gap: 10px; /* ISMS 영역 내부 간격 축소 */
    }

    .f_isms_txt_wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px; /* 마크와 텍스트 사이 간격 축소 */
    }

    .isms_mark {
        width: 60px;
        height: 60px;
        padding: 8px 6px; /* 마크 패딩 축소 */
        font-size: 14px;
    }

    .isms_mark img {
        width: 60px;
        height: 60px;
    }

    .isms_txt, .isms_txt_mobile {
        font-size: 11px; /* ISMS 텍스트 크기 축소 */
        line-height: 1.4;
        min-width: auto; /* 모바일에서는 최소 너비 해제 */
    }

    .f_copy {
        font-size: 11px; /* 카피라이트 크기 축소 */
    }

    .f_copy_md {
        margin-left: 0;
    }
}

/*
   ===========================
     모바일 화면 큐브
   ===========================
 */
@media(max-width:552px){
    .section_header { z-index: 1; }

    /* 안드로이드 기기 브라우저 큐브 */
    #section_intro #box:hover .box .side, #section_intro #box.active .box .side {
        -webkit-transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(0px);
        transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    }

    #section_intro #box:hover .box .side:not(:first-child) p,
    #section_intro #box.active .box .side:not(:first-child) p {
        -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
    }
    #section_intro #box:hover .box .side.en:not(:first-child) p,
    #section_intro #box.active .box .side.en:not(:first-child) p {
        -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(34px) translateY(5px) translateZ(100px);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(34px) translateY(5px) translateZ(100px);
    }

    #section_intro #box:hover .box .side:nth-child(2),
    #section_intro #box.active .box .side:nth-child(2) {
        left: 50%;
        top: -15%;
        margin-top: -150px;
        margin-left: -100px;
    }
    #section_intro #box:hover .box .side:nth-child(3),
    #section_intro #box.active .box .side:nth-child(3) {
        left: 50%;
        top: -50%;
        margin-right: 0;
    }
    #section_intro #box:hover .box .side:nth-child(4),
    #section_intro #box.active .box .side:nth-child(4) {
        left: 25%;
        top: 85%;
        margin-left: 40px;
        margin-top: -25px;
    }
    #section_intro #box:hover .box .side:nth-child(5),
    #section_intro #box.active .box .side:nth-child(5) {
        left: -50%;
        top: 85%;
        margin-left: 10px;
        margin-top: -25px;
    }
    #section_intro #box:hover .box .side:nth-child(6),
    #section_intro #box.active .box .side:nth-child(6) {
        left: 0;
        top: -50%;
        margin-left: -100px;
    }

    /* 그외 모바일 브라우저 큐브 */
    /* 큐브 펼침 상태일 때 배경(흰색영역) 설정 */
    #section_intro .cube_wrap:hover .cube .face,
    #section_intro .cube_wrap.active .cube .face {
        -webkit-transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(0px);
        transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    }

    /* 큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 텍스트 방향 및 크기 변경 */
    #section_intro .cube_wrap:hover .cube .face:not(:first-child) p,
    #section_intro .cube_wrap.active .cube .face:not(:first-child) p {
        -webkit-transform: scale(1.2);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(33px) translateY(0px) translateZ(100px);
    }

    /* 큐브 펼침 상태일 때 첫번째면(더즌로고) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(1),
    #section_intro .cube_wrap.active .cube .face:nth-child(1) {
        gap: 5px;
    }

    /* 큐브 펼침 상태일 때 두번째면(무장애) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(2),
    #section_intro .cube_wrap.active .cube .face:nth-child(2) {
        left: 50%;
        top: -15%;
        margin-top: -150px;
        margin-left: -100px;
    }

    /* 큐브 펼침 상태일 때 세번째면(모니터링) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(3),
    #section_intro .cube_wrap.active .cube .face:nth-child(3) {
        left: 50%;
        top: -50%;
        margin-right: 0;
    }

    /* 큐브 펼침 상태일 때 네번째면(빠른피드백) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(4),
    #section_intro .cube_wrap.active .cube .face:nth-child(4) {
        left: 25%;
        top: 75%;
        margin-left: 40px;
        margin-top: -25px;
    }

    /* 큐브 펼침 상태일 때 다섯번째면(정확한 정보) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(5),
    #section_intro .cube_wrap.active .cube .face:nth-child(5) {
        left: -50%;
        top: 75%;
        margin-left: 10px;
        margin-top: -25px;
    }

    /* 큐브 펼침 상태일 때 여섯번째면(유저 편의) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(6),
    #section_intro .cube_wrap.active .cube .face:nth-child(6) {
        left: 0;
        top: -50%;
        margin-left: -100px;
    }

    /* service1 (dozn api center) */
    .api_item img {
        width: 100%;
    }

    .section .content {
        padding: 0 10px;
    }

    .section .text_title, .section.en .text_title {
        font-size: 30px;
    }

    .section .text_sub_title {
        font-size: 18px;
    }

    .section.en .text_sub_title {
        font-size: 16px;
    }

    .section .text_content, .section.en .text_content {
        font-size: 10px;
        word-break: keep-all;
    }

    .pc_area {
        max-width: 480px;
    }

    /* 마지막 섹션 'Coming Soon' 텍스트 위치 보정 */
    #section_footer.section .content.is_visible {
        transform: translateY(-250px);
    }

    .f_info_area {
        font-size: 11px;
    }

    .isms_txt {
        display: none;
    }

    .isms_txt_mobile {
        display: block;
    }
}

@media(max-width: 480px) {
    /* section 화면들 */
    .section .flex_wrap {
        transform: translateY(70px);
    }

    #section4.section .flex_wrap,
    #section8.section .flex_wrap,
    #section9.section .flex_wrap,
    #section10.section .flex_wrap {
        transform: translateY(0px);
    }

    #section4.section.en .flex_wrap,
    #section8.section.en .flex_wrap,
    #section9.section.en .flex_wrap,
    #section10.section.en .flex_wrap {
        transform: translateY(0px);
    }

    #section_footer.section .flex_wrap {
        transform: translateY(0px);
    }

    .text_area {
        gap: 10px;
    }

    .pc_area {
        max-width: 335px;
    }

    .pc_frame {
        max-width: 335px;
    }
}

@media (max-width: 480px) and (max-height: 552px) {
    .face .logo_img img {
        width: 130px;
    }

    /* 큐브 펼침 상태일 때 두번째면(무장애) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(2),
    #section_intro .cube_wrap.active .cube .face:nth-child(2) {
        left: 50%;
        top: -5%;
        margin-top: -150px;
        margin-left: -100px;
    }

    /* 큐브 펼침 상태일 때 세번째면(모니터링) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(3),
    #section_intro .cube_wrap.active .cube .face:nth-child(3) {
        left: 50%;
        top: -40%;
        margin-right: 0;
    }

    /* 큐브 펼침 상태일 때 여섯번째면(유저 편의) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(6),
    #section_intro .cube_wrap.active .cube .face:nth-child(6) {
        left: 0;
        top: -40%;
        margin-left: -100px;
    }

    #api_m_wrap {
        margin-top: 5px;
    }

    .mobile_area {
        max-width: 200px;
    }

    .pc_area {
        max-width: 285px;
    }

    .kiosk_area {
        max-width: 180px;
    }

    .kiosk_frame {
        max-width: 180px;
    }

    .pc_frame {
        max-width: 285px;
    }

    .mobile_frame {
        max-width: 200px;
    }

    .bottom_footer_inner {
        gap: 5px;
    }

    .f_links {
        margin-bottom: 5px;
    }
}

/* 폴드8 대응 - 폴드 접었을 때 */
@media (max-width: 495px) and (max-height: 610px) and (min-aspect-ratio: 100/165) {
    #api_m_container {
        display: flex;
        flex-direction: row;
        width: 82%;
    }

    #api_m_wrap {
        margin-top: 5px;
    }

    .api_item {
        width: 180px;
    }

    /* section 화면 */
    .section .flex_wrap {
        /*flex-direction: column;*/
        /*justify-content: flex-start;*/
        gap: 40px;
    }

    #section13.section .flex_wrap {
        gap: 40px;
    }

    .section .flex_wrap.reverse {
        /*flex-direction: column-reverse;*/
    }

    .text_area {
        /*align-items: center;*/
        /*text-align: center;*/
    }

    .pc_area {
        max-width: 335px;
    }

    .pc_frame {
        max-width: 335px;
    }

    .kiosk_area {
        max-width: 140px;
    }

    #section6.section .flex_wrap {
        transform: translateY(40px);
    }

    #section6.section .text_title, .section.en .text_title {
        font-size: 24px;
    }

    #section6.section .text_sub_title {
        font-size: 14px;
    }

    #section6.section.en .text_sub_title {
        font-size: 12px;
    }
}


/* 폴드8 대응 - 폴드 펼쳤을 때 */
@media (max-width: 1023px) and (max-height: 550px) and (min-aspect-ratio: 1.5/1) {
    /* 안드로이드 기기 브라우저 큐브 */
    #section_intro #box:hover .box .side, #section_intro #box.active .box .side {
        -webkit-transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(0px);
        transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    }

    #section_intro #box:hover .box .side:not(:first-child) p,
    #section_intro #box.active .box .side:not(:first-child) p {
        -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
    }
    #section_intro #box:hover .box .side.en:not(:first-child) p,
    #section_intro #box.active .box .side.en:not(:first-child) p {
        -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(34px) translateY(5px) translateZ(100px);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(34px) translateY(5px) translateZ(100px);
    }

    #section_intro #box:hover .box .side:nth-child(2),
    #section_intro #box.active .box .side:nth-child(2) {
        left: 50%;
        top: -15%;
        margin-top: -150px;
        margin-left: -100px;
    }
    #section_intro #box:hover .box .side:nth-child(3),
    #section_intro #box.active .box .side:nth-child(3) {
        left: 50%;
        top: -50%;
        margin-right: 0;
    }
    #section_intro #box:hover .box .side:nth-child(4),
    #section_intro #box.active .box .side:nth-child(4) {
        left: 25%;
        top: 85%;
        margin-left: 40px;
        margin-top: -25px;
    }
    #section_intro #box:hover .box .side:nth-child(5),
    #section_intro #box.active .box .side:nth-child(5) {
        left: -50%;
        top: 85%;
        margin-left: 10px;
        margin-top: -25px;
    }
    #section_intro #box:hover .box .side:nth-child(6),
    #section_intro #box.active .box .side:nth-child(6) {
        left: 0;
        top: -50%;
        margin-left: -100px;
    }

    /* 그외 모바일 브라우저 큐브 */
    /* 큐브 펼침 상태일 때 배경(흰색영역) 설정 */
    #section_intro .cube_wrap:hover .cube .face,
    #section_intro .cube_wrap.active .cube .face {
        -webkit-transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(0px);
        transform: scale(.6) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    }

    /* 큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 텍스트 방향 및 크기 변경 */
    #section_intro .cube_wrap:hover .cube .face:not(:first-child) p,
    #section_intro .cube_wrap.active .cube .face:not(:first-child) p {
        -webkit-transform: scale(1.2);
        transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(33px) translateY(0px) translateZ(100px);
    }

    /* 큐브 펼침 상태일 때 첫번째면(더즌로고) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(1),
    #section_intro .cube_wrap.active .cube .face:nth-child(1) {
        gap: 5px;
    }

    /* 큐브 펼침 상태일 때 두번째면(무장애) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(2),
    #section_intro .cube_wrap.active .cube .face:nth-child(2) {
        left: 50%;
        top: -15%;
        margin-top: -150px;
        margin-left: -100px;
    }

    /* 큐브 펼침 상태일 때 세번째면(모니터링) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(3),
    #section_intro .cube_wrap.active .cube .face:nth-child(3) {
        left: 50%;
        top: -50%;
        margin-right: 0;
    }

    /* 큐브 펼침 상태일 때 네번째면(빠른피드백) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(4),
    #section_intro .cube_wrap.active .cube .face:nth-child(4) {
        left: 25%;
        top: 75%;
        margin-left: 40px;
        margin-top: -25px;
    }

    /* 큐브 펼침 상태일 때 다섯번째면(정확한 정보) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(5),
    #section_intro .cube_wrap.active .cube .face:nth-child(5) {
        left: -50%;
        top: 75%;
        margin-left: 10px;
        margin-top: -25px;
    }

    /* 큐브 펼침 상태일 때 여섯번째면(유저 편의) 표면(흰색영역) 위치 설정 */
    #section_intro .cube_wrap:hover .cube .face:nth-child(6),
    #section_intro .cube_wrap.active .cube .face:nth-child(6) {
        left: 0;
        top: -50%;
        margin-left: -100px;
    }

    #api_w {
        width: 60%;
    }

    .section .flex_wrap, .section .flex_wrap.reverse {
        flex-direction: initial;
        justify-content: center;
    }

    .mobile_area {
        max-width: 200px;
    }

    .pc_area {
        max-width: 360px;
    }

    .pc_frame {
        max-width: 360px;
    }

    .kiosk_area {
        max-width: 200px;
    }

    .text_area {
        align-items: flex-start;
        text-align: left;
    }

    #section6.section .flex_wrap {
        transform: translateY(0);
    }
}