@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body { margin: 0; padding: 0; background-color: #000; color: #fff; font-family: 'Nanum Gothic'; }
img { width: 100%; }

.in_body { width: 100%; max-width: 992px; margin: 0 auto; position: relative; }

#section1 { width: 100%; height: 1300px; }
#section1 .top_logo { position: absolute; width: 412px; height: 0; top: 0; left: calc(50% - 206px); overflow: hidden; opacity: 1; }
#section1 .left_screen { position: absolute; width: 561px; height: 450px; top: 295px; left: calc(50% - 538px); overflow: hidden; opacity: 1; transform: scaleX(0); transform-origin: center center; }
#section1 .right_screen { position: absolute; width: 594px; height: 476px; top: 319px; right: calc(50% - 567px); opacity: 1; }
#section1 .text1 { position: absolute; width: 707px; height: 141px; top: 694px; left: calc(50% - 354px + 300px); opacity: 0; }
#section1 .text2 { position: absolute; width: 600px; height: 240px; top: 774px; left: calc(50% - 300px + 300px); opacity: 0; }
#section1 .text3 { position: absolute; width: 853px; height: 170px; top: 1010px; left: calc(50% - 427px + 300px); opacity: 0; }
#section1 .text3 .cursor_icon { position: absolute; width: 114px; height: 114px; right: -16px; bottom: -17px; }

#section2 { width: 100%; height: 1002px; background-color: #001727; }
#section2 .text1 { position: absolute; width: 1000px; height: 133px; top: 33px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section2 .slide_area.swiper { position: absolute; width: 1703px; height: 653px; top: 226px; left: calc(50% - 852px); overflow: hidden; opacity: 0; transition: none; }
#section2 .slide_area .swiper-wrapper { align-items: flex-start; }
#section2 .slide_area .swiper-wrapper .swiper-slide { width: auto; flex-shrink: 0; flex-grow: 0; height: auto; }
#section2 .slide_area .swiper-wrapper .swiper-slide > img { width: auto; height: 653px; }
.swiper-button-next.custom-next,.swiper-button-prev.custom-prev { position: absolute; top: 0; width: 15%; height: 100%; margin-top: 0; background-color: transparent; z-index: 10; }
.swiper-button-next.custom-next { right: 0; left: auto; }
.swiper-button-prev.custom-prev { left: 0; right: auto; }
.swiper-button-next::after, .swiper-button-prev::after { content: ''; display: none; }

#section3 { width: 100%; height: 690px; background-color: #000517; }
#section3 .text1 { position: absolute; width: 1000px; height: 133px; top: 33px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section3 .text2 { position: absolute; width: 1000px; height: 200px; top: 78px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section3 .solution { position: absolute; width: 1000px; height: 500px; top: 190px; left: calc(50% - 500px); opacity: 1; transform: scaleX(0); transform-origin: center center; }

#section4 { width: 100%; height: 874px; position: relative; overflow: hidden; }
#section4 .section4-bg-move { position: absolute; top: 0; left: 0; width: 120%; height: 120%; background: url(img/sepecial_back.jpg) no-repeat 0% 0%; background-size: cover; left: -10%; top: -10%; }
#section4 .in_body { z-index: 2; }
#section4 .text1 { position: absolute; width: 1000px; height: 133px; top: 38px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section4 .box1 { position: absolute; width: 692px; height: 594px; z-index: 4; top: 199px; left: calc(50% - 352px); background-color: rgba(0,29,48,.9); text-align: center; font-size: 18px; font-style: italic; font-smooth: antialiased; font-weight: bold; line-height: 32px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: none; }
#section4 .box2 { position: absolute; width: 692px; height: 594px; z-index: 3; top: 211px; left: calc(50% - 340px); background-color: rgba(0,37,59,.5); }

#section5 { width: 100%; height: 707px; }
#section5 .text1 { position: absolute; width: 1000px; height: 133px; top: 55px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section5 .box1 { position: absolute; width: 300px; height: 375px; top: 249px; left: calc(50% - 315px); opacity: 1; transform: scaleX(0); transform-origin: center center; }
#section5 .box2 { position: absolute; width: 300px; height: 375px; top: 249px; right: calc(50% - 315px); opacity: 1; transform: scaleX(0); transform-origin: center center; }

#section6 { width: 100%; height: 840px; background-color: #00101f; }
#section6 .text1 { position: absolute; width: 1000px; height: 133px; top: 46px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section6 .round_box { position: absolute; width: 1216px; height: 401px; top: 238px; left: calc(50% - 608px); }
#section6 .round_box .item1 { position: absolute; width: 506px; height: 303px; top: 67px; left: calc(50% - 253px); z-index: 5; }
#section6 .round_box .item2 { position: absolute; width: 362px; height: 217px; top: 41px; left: 12px; z-index: 4; opacity: .7; }
#section6 .round_box .item3 { position: absolute; width: 130px; height: 78px; top: 26px; left: calc(50% - 28px - 130px); z-index: 3; opacity: .4; }
#section6 .round_box .item4 { position: absolute; width: 130px; height: 78px; top: 26px; right: calc(50% - 28px - 130px); z-index: 3; opacity: .4; }
#section6 .round_box .item5 { position: absolute; width: 362px; height: 217px; top: 41px; right: 12px; z-index: 4; opacity: .7; }
#section6 .text2 { position: absolute; width: 1000px; height: 200px; top: 640px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }

#section7 { width: 100%; height: 760px; background: url(img/security_back.jpg) no-repeat center center; background-size: cover; }
#section7 .text1 { position: absolute; width: 1000px; height: 133px; top: 49px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section7 .area { position: absolute; width: 828px; height: 430px; top: 248px; left: calc(50% - 414px); }
#section7 .area > div { position: absolute; width: 400px; height: 200px; opacity: 1; transform: scaleX(0); transform-origin: center center; }
#section7 .area .box1 { top: 0; left:0; }
#section7 .area .box2 { top: 0; right:0; }
#section7 .area .box3 { bottom: 0; left:0; }
#section7 .area .box4 { bottom: 0; right:0; }

#section8 { width: 100%; height: 490px; background-image: linear-gradient(to bottom, #003860, #001727); }
#section8 .text1 { position: absolute; width: 1000px; height: 133px; top: 31px; left: calc(50% - 500px + 300px); opacity: 0; transition: none; }
#section8 .area { position: absolute; width: 1375px; height: 222px; top: 201px; left: calc(50% - 688px); display: flex; }
#section8 .area_left { width: 78px; }
#section8 .area_left .customer-prev-pc { width: 50px; height: 70px; cursor: pointer; } 
#section8 .area_center.swiper { width: 100%; overflow: hidden; } 
#section8 .area_center .swiper-wrapper { display: flex; }
#section8 .area_center .swiper-slide { width: 296px !important; height: 222px; margin-right: 9px; flex-shrink: 0; } 
#section8 .area_right { width: 78px; }
#section8 .area_right .customer-next-pc { width: 50px; height: 70px; cursor: pointer; } 
#section8 .customer-prev-pc::after,
#section8 .customer-next-pc::after { content: ''; display: none; }

/* PC 환경에서는 모바일 전용 화살표 숨김 */
#section8 .customer-prev-mobile,
#section8 .customer-next-mobile {
    display: none;
}

@media all and (max-width:1703px) {
    #section2 .in_body { max-width: unset; }
    #section2 .slide_area.swiper { width: 100%; left: 0; }
}
@media all and (max-width:576px) {
    .in_body { max-width: 100vw; }
    #section1 { width: 100vw; height: auto; }
    
    .mobile_screen { display: flex; width: 100%; }

    #section1 .top_logo { position: relative; width: 50%; height: auto; margin: 0 auto; top: unset; left: unset; overflow: unset; }
    #section1 .left_screen { position: relative; width: 50%; height: auto; top: unset; left: unset; transform: scaleX(1); }
    #section1 .right_screen { position: relative; width: 50%; height: auto; top: unset; right: unset; }
    #section1 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; margin: 0 auto; }
    #section1 .text2 { position: relative; width: 75%; height: auto; top: unset; left: unset; opacity: 1; margin: 0 auto; }
    #section1 .text3 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; margin: 0 auto; }
    #section1 .text3 .cursor_icon { position: absolute; width: 45px; height: 45px; right: 0px; bottom: 0px; }

    #section2 { width: calc(100vw - 40px); height: auto; background-color: #001727; padding: 20px; }
    #section2 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 0 auto; }
    #section2 .slide_area.swiper { position: relative; width: 100%; height: 420px; top: unset; left: unset; overflow: hidden; opacity: 1; transition: none; }
    #section2 .slide_area .swiper-wrapper { align-items: flex-start; }
    #section2 .slide_area .swiper-wrapper .swiper-slide { width: auto; flex-shrink: 0; flex-grow: 0; height: auto; }
    #section2 .slide_area .swiper-wrapper .swiper-slide > img { width: auto; height: 420px; }
    .swiper-button-next.custom-next,.swiper-button-prev.custom-prev { position: absolute; top: 0; width: 15%; height: 100%; margin-top: 0; background-color: transparent; z-index: 10; }
    .swiper-button-next.custom-next { right: 0; left: auto; }
    .swiper-button-prev.custom-prev { left: 0; right: auto; }
    .swiper-button-next::after, .swiper-button-prev::after { content: ''; display: none; }

    #section3 { width: 100vw; height: auto; background-color: #000517; }
    #section3 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 0 auto 20px; }
    #section3 .text2 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 20px auto 0; }
    #section3 .solution { position: relative; width: 80%; height: auto; top: unset; left: unset; opacity: 1; transform: scaleX(1); transform-origin: center center; margin: 0 auto; }

    #section4 { width: 100vw; height: auto; position: relative; overflow: hidden; }
    #section4 .section4-bg-move { display: none; }
    #section4 .in_body { z-index: 2; background: url(img/sepecial_back.jpg) no-repeat center center; background-size: cover; padding: 20px 0; }
    #section4 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 0 auto; }
    #section4 .box1 { position: relative; width: 90%; height: auto; z-index: 4; top: unset; left: unset; background-color: rgba(0,29,48,.9); text-align: center; font-size: 10px; font-style: italic; font-smooth: antialiased; font-weight: bold; line-height: 20px; display: flex; flex-direction: column; justify-content: center; opacity: 1; transition: none; margin: 0 auto; padding: 20px 0; }
    #section4 .box2 { display: none; }

    #section5 { width: 100vw; height: auto; }
    #section5 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 20px auto 10px; }
    #section5 .box1 { position: relative; width: 80%; height: auto; top: unset; left: unset; opacity: 1; transform: scaleX(1); transform-origin: center center; margin: 0 auto 10px; }
    #section5 .box2 { position: relative; width: 80%; height: auto; top: unset; right: unset; opacity: 1; transform: scaleX(1); transform-origin: center center; margin: 0 auto 20px; }

    #section6 { width: 100vw; height: auto; background-color: #00101f; }
    #section6 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 20px auto 0; }
    #section6 .round_box { 
        position: relative; 
        width: 90%; 
        /* === 아래 두 줄을 수정 === */
        /* height: 100px; 를 제거하거나 auto로 변경 */
        height: 0; /* height를 0으로 설정하여 content-based height를 제거 */
        padding-bottom: 30%; /* 부모의 너비 대비 높이를 설정 (예: 4:3 비율) */
        /* ======================== */
        top: unset; 
        left: unset; 
        margin: 0 auto 20px; 
    }
    #section6 .round_box .item1 { position: absolute; width: 40%; height: auto; top: 25%; left: 30%; z-index: 5; }
    #section6 .round_box .item2 { position: absolute; width: 28%; height: auto; top: 15%; left: 15%; z-index: 4; opacity: .7; }
    #section6 .round_box .item3 { position: absolute; width: 14%; height: auto; top: 5%; left: 35%; z-index: 3; opacity: .4; }
    #section6 .round_box .item4 { position: absolute; width: 14%; height: auto; top: 5%; right: 35%; z-index: 3; opacity: .4; }
    #section6 .round_box .item5 { position: absolute; width: 28%; height: auto; top: 15%; right: 15%; z-index: 4; opacity: .7; }
    #section6 .text2 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none;  margin: 0 auto; }

    #section7 { width: 100vw; height: auto; background: url(img/security_back.jpg) no-repeat center center; background-size: cover; }
    #section7 .text1 { position: relative; width: 90%; height: auto; top: unset; left: unset; opacity: 1; transition: none; margin: 0 auto; }
    #section7 .area { position: relative; width: 90%; height: auto; top: unset; left: unset; margin: 0 auto; }
    #section7 .area > div { position: relative; width: 100%; height: auto; opacity: 1; transform: scaleX(1); transform-origin: center center; margin-bottom: 10px; }
    #section7 .area .box1 { top: unset; left:unset; }
    #section7 .area .box2 { top: unset; right:unset; }
    #section7 .area .box3 { bottom: unset; left:unset; }
    #section7 .area .box4 { bottom: unset; right:unset; }

    #section8 {width: 100vw;height: auto;background-image: linear-gradient(to bottom, #003860, #001727);padding: 20px 0;}
    #section8 .text1 {position: relative;width: 90%;height: auto;top: unset;left: unset;opacity: 1;transition: none;margin: 0 auto;}
    #section8 .area_left,#section8 .area_right {display: none;}
    #section8 .customer-prev-pc,#section8 .customer-next-pc {display: none;}

    /* 전체 영역을 중앙 정렬(margin: 0 auto) 상태에서 left: -15px를 주어 왼쪽으로 이동량 증가 */
    #section8 .area {position: relative;width: 90%;max-width: 500px;height: auto;top: unset;left: -15px;display: block;margin: 0 auto;} /* 👈 왼쪽으로 15px 이동 */

    #section8 .area_center.swiper {width: 100%;overflow: hidden;position: relative;padding: 0 10px;height: 222px;}
    /* 2개 노출을 위해 width: calc(50% - 9px) 강제 지정 유지 */
    #section8 .area_center .swiper-slide {width: calc(50% - 9px) !important;height: 222px;margin-right: 9px;flex-shrink: 0;}
    #section8 .area_center .swiper-slide img {width: 100%;height: 100%;object-fit: contain;}

    /* 화살표 위치 조정 */
    #section8 .customer-prev-mobile,#section8 .customer-next-mobile {display: flex;position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 40px;margin: 0;z-index: 10;cursor: pointer;}
    #section8 .customer-prev-mobile {left: 5px;}
    #section8 .customer-next-mobile {right: 0px;} /* 오른쪽 화살표는 0px 유지 */

    #section8 .customer-prev-mobile img,#section8 .customer-next-mobile img {width: 100%;height: auto;}
    #section8 .customer-prev-mobile::after,#section8 .customer-next-mobile::after {content: '';display: none;}
}