@charset "UTF-8";

@import url(font.css);
@import url(reset.css);
@import url(sub_Product.css);
@import url(sub_Solution01.css);
@import url(sub_solution.css);
@import url(sub_Company.css);
@import url(sub_Tech02.css);

/* --------------------------------------------------------------------------- */
/* 기본 설정들 */
html {
    font-size: 10px !important;
    overflow-x: clip;
}
body {
    position: relative;
    font-family: 'Pretendard'; background: #ffffff; overflow-x: clip;  word-break: keep-all;
}
:root {
    --maincolor1: #f0620a;
    --maincolor2: #04456f;
    --dark-blue: #13384f;
    --text: #1f1f1f;
    --bg-light: #f8f8f8;
}
.logo img {width: 190px;}

.container {position: relative; max-width: 1520px; margin: 0 10.4vw; margin-top: 200px;}

.sideBar {position: fixed; right: 2.3vw; top: 90%; transform: translateY(-50%); z-index: 999;}
.sideBar .btnKakao {transition: .3s;}
.sideBar .btnKakao:hover, .sideBar .btnTop:hover {transform: translateY(-10px);}
.sideBar .btnTop {margin-top: 15px; transition: .3s;}

h2 {z-index: 10;
    font-size: 3.5rem; line-height: 1.7; text-align: center; color: var(--text); font-weight: 400; margin-top: 95px;}
.tbo {color: var(--maincolor1); font-weight: 600;}
.tb {font-weight: 600;}
strong {font-weight: 600;}
h2.smalltext {font-size: 2.8rem;}
.h2bg_left {
    position: absolute; left: -200px; top: -20px; z-index: -1;
    display: flex;
    background: url(../images/title_bg_left.png) no-repeat; width: 36vw; height: 103px;
    background-position: right center;
}
.h2bg_right {
    position: absolute; right: -200px; top: -20px; z-index: -1;
    display: flex;
    background: url(../images/title_bg_right.png) no-repeat; width: 36vw; height: 103px;
}
.h2bg_left.smalltext {
    top: -28px;
}
.h2bg_right.smalltext {
    top: -28px;
}
.sub_title_db {
    width: 42vw; font-size: 2.8rem; font-weight: 600; color: #fff; background: var(--dark-blue); padding: 13px 0; border-radius: 30px; margin: 50px auto 40px;
}

/* PC/모바일 분기 기본 설정 */
.pc {display: block;}
.mo {display: none;}

/* 모바일 전화 버튼 (PC에서 숨김) */
.mobileCall {display: none;}



/* --------------------------------------------------------------------------- */
/* 시~~작 */

header {
    position: absolute; top: 0; left: 0; z-index: 1000;
    display: block;
    width: 100%; background: rgba(255, 255, 255, 0); transition: background 0.2s ease-in-out;
}
header:hover {
    background: #fff;
}
header.on {
    background: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- GNB 스타일 --- */
header .topset {
    position: relative; z-index: 30;
    display: flex; justify-content: space-between; align-items: center;
    width: 79vw; height: 86px; margin: 0 10.4vw;
}
    header .topset .gnb {
        display: flex;
        height: 100%;
    }
    header .topset .gnb > li {
        position: relative;
        display: flex; align-items: center;
        flex-direction: column; /* 이거 없으면 주황색 바 안 두꺼워짐 */
    }
        header .topset .gnb > li > a {
            display: flex; align-items: center; justify-content: center;
            width: 11.9vw; height: 100%; padding: 0 10px; padding-top: 5px; font-size: 2rem; color: #fff; font-weight: 500; border-bottom: 2px solid transparent; /* 보더 있되 투명하게 */
        }

        /* 헤더 호버 시 전체 글씨색 변경 */
        header:hover .topset .gnb > li > a {color: var(--text);}
        header:hover .topset .blog a {color: var(--maincolor2); transition: .3s;}

        /* ✨ GNB 특정 메뉴 호버 시: 컬러 변경 및 하단 보더 */
        header .topset .gnb > li:hover > a {
            border-bottom: 2px solid var(--maincolor1);
            color: var(--maincolor1); font-weight: 600;
        }

        /* --- LNB 스타일 --- */
        header .topset .gnb .lnb {
            position: absolute; top: 86px; left: 50%; z-index: 20; transform: translateX(-50%);
            display: block;
            width: 100%; padding-top: 5px; text-align: center; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
        }
        /* 헤더에 on 클래스가 붙으면 LNB 표시 */
        header.on .topset .gnb .lnb {
            max-height: 320px; opacity: 1; padding-top: 5px;
        }

        header .topset .gnb .lnb li a {
            display: block;
            padding: 20px 0px; font-size: 1.6rem; color: var(--text); font-weight: 500; transition: 0.2s; white-space: nowrap;
        }

        /* ✨ LNB 호버 시: 배경색 변경 및 글씨색 반전 */
        header .topset .gnb .lnb li a:hover {
            background-color: var(--maincolor1); color: #fff;
        }
        
        /* ✨ 현재 페이지 LNB 스타일 */
        header .topset .gnb .lnb li a.current {
            background-color: #fff; color: var(--maincolor1); font-weight: 500;
        }
        
        /* ✨ 현재 페이지 LNB는 호버 효과 무시 */
        header .topset .gnb .lnb li a.current:hover {
            background-color: #fff; color: var(--maincolor1);
        }
        header .lnb_bg {
            position: absolute; top: 86px; left: 0; z-index: 10;
            display: block;
            width: 100%; height: 0; background: #fff; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1); overflow: hidden; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease;
            clip-path: inset(0px -100px -100px -100px); /* 위쪽 영역(그림자) 자르기 */
        }
        /* 헤더에 on 클래스가 붙으면 배경 표시 */
        header.on .lnb_bg {
            height: 333px; opacity: 1;
        }

        /* 블로그 버튼 및 이미지 설정 */
        header .topset .blog a {
            display: flex; align-items: center;
            font-size: 1.8rem; color: #fff; font-weight: 300; transition: color 0.3s; padding: 20px 0;
        }
        header .topset .blog img {
            width: 100%;
        }
        header .topset .blog img.blog_icon_sub {
            display: none;
        }

        /* 블로그 호버 시 이미지 변경 효과 */
        header .topset .blog a:hover {
            font-weight: 600;
        }
        header .topset .blog a .blog_icon {
            margin-left: 0.78vw; width: 35px;
        }

        /* 블로그 영역 호버 시 이미지 소스 변경 */
        header:hover .topset .blog a .blog_icon {
            content: url('../images/btn_go2.png');
        }

/* 햄버거 버튼 (PC에서 숨김) */
.hamburger {
    display: none;
}


#hero {}
/* Swiper 전체 테마 색상을 사용자 정의 컬러로 변경 */
.mySwiper {
    --swiper-theme-color: #fff; /* 페이지네이션, 화살표 색상 통합 변경 */
    --swiper-navigation-size: 43px;
}
.swiper {
    width: 100%; height: 100%;
}
    .swiper-slide {
        display: flex; justify-content: center; align-items: center;
        font-size: 18px;
    }
    .swiper-slide img {
        width: 100%;
    }
        /* --- 페이지네이션 커스텀 --- */
        /* 기본 공통 스타일 (10x10 사이즈) */
        #hero .mySwiper .swiper-pagination-bullet {
            width: 10px; height: 10px; background: transparent; border: 1px solid #fff; box-sizing: border-box; transition: .3s;
            opacity: 1; /* 기본 투명도 제거 */
        }

        /* 활성화된(현재 페이지) 점 스타일 */
        #hero .mySwiper .swiper-pagination-bullet-active {
            background: #fff; border: none;
        }

        #hero .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
            bottom: var(--swiper-pagination-bottom, 30px);
        }

        /* --- 좌우 화살표 커스텀 --- */
        #hero .mySwiper .swiper-button-next,
        #hero .mySwiper .swiper-button-prev {
            top: 50%; transform: translateY(-50%);
            color: #fff;
        }

        /* 화살표 위치 세부 조정 */
        #hero .mySwiper .swiper-button-next {
            right: 3.64vw;
            width: 60px; height: 60px; background: url('../images/hero_arrow_right.svg') no-repeat center; background-size: contain;
        }
        #hero .mySwiper .swiper-button-prev {
            left: 3.64vw;
            width: 60px; height: 60px; background: url('../images/hero_arrow_left.svg') no-repeat center; background-size: contain;
        }

        /* 기존 화살표 없애기 */
        .mySwiper .swiper-navigation-icon {
            display: none;
        }

        #hero .swiper-slide > div {
            position: absolute; top: 50%; left: 195px; transform: translateY(-50%);
            width: 535px;
        }
        #hero .swiper-slide > div p {
            color: #fff;
        }
        #hero .swiper-slide > div p:first-child {
            font-size: 4rem; font-weight: 600; line-height: 140%;
        }
        #hero .swiper-slide > div p:last-child {
            font-size: 1.8rem; line-height: 160%; margin-top: 25px;
        }


#section1 {
    overflow-x: clip;
}
#section1 .container {
}
    #section1 .container .productList {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px 19px;
        list-style: none; padding: 0; margin: 0;
    }
    #section1 .container .productList > li {
        width: 25.7vw; overflow: visible; border: 1px solid var(--maincolor1); box-sizing: border-box; transition: .3s;
    }
    #section1 .container .productList > li:hover {
        transform: translateY(-15px);
    }

    /* border radius 조절을 위한 영역 */
    #section1 .container .productList > li:first-child,
    #section1 .container .productList > li:nth-child(3) {
        border-radius: 20px 20px 0 0;
    }
    #section1 .container .productList > li:nth-child(2) {
        border-radius: 0px; border: 1px solid var(--maincolor1); border-left: none; border-right: none;
    }
    #section1 .container .productList > li:nth-child(4),
    #section1 .container .productList > li:last-child {
        border-radius: 20px;
    }
    #section1 .container .productList > li:nth-child(5) {
        border-radius: 0 0 20px 20px;
    }
    
    #section1 .container .productList li a {
        display: block;
        height: 100%; text-decoration: none; color: inherit;
    }
        #section1 .container .productList li a .productImg {
            position: relative;
            display: flex; justify-content: center; align-items: center;
            width: 100%; height: 280px; margin-top: 20px;
        }
        #section1 .container .productList li a .textBox {
            position: relative;
            height: auto; padding: 40px 2.6vw; background: #ffffff; transition: background 0.2s; border-radius: 0 0 20px 20px;
        }
        #section1 .container .productList > li:first-child a .textBox,
        #section1 .container .productList > li:nth-child(3) a .textBox {
            border-radius: 0;
        }
            #section1 .container .productList li a .textBox strong {
                display: block;
                font-size: 2.2rem; font-weight: 700; color: var(--text); margin-bottom: 15px;
            }
            #section1 .container .productList li a .textBox strong::before {
                content: "";
                position: absolute; top: 25px; left: 2.6vw;
                width: 20px; height: 3px; background: var(--maincolor1);
            }
            #section1 .container .productList li a .textBox p {
                font-size: 1.6rem; line-height: 2; font-weight: 500; color: #333; margin-bottom: 20px;
            }
            #section1 .container .productList li a .textBox .productTag {
                display: flex; gap: 10px; justify-content: center;
            }
                #section1 .container .productList li a .textBox .productTag li {
                    width: 4.63vw; height: 100%; font-size: 1.5rem; font-weight: 600; color: var(--text); background: #EFEFEF; padding: 5px 0px; border-radius: 10px; transition: .3s; text-align: center;
                }

        /* 두 번째 li */
        #section1 .container .productList > li:nth-child(2) {
            display: flex; justify-content: space-between; align-items: center; flex-direction: column;
            background: #F8F8F8;
        }

        /* Hover 효과 */
        #section1 .container .productList > li:hover .textBox {
            background: var(--maincolor1);
        }
        #section1 .container .productList > li:hover .textBox strong {
            color: #ffffff;
        }
        #section1 .container .productList > li:hover .textBox p {
            color: #ffffff;
        }
        #section1 .container .productList li:hover a .textBox strong::before {
            background: #fff;
        }
        #section1 .container .productList li:hover a .textBox .productTag li {
            background: #fff;
        }


#section2 {
    
}
#section2 .container .h2bg_left,
#section2 .container .h2bg_right {
    top: 7px;
}
#section2 .container .btn_more {
    display: flex; justify-content: center; align-items: center;
    max-width: 182px; padding: 15px 0px; font-weight: 500; font-size: 2.4rem; background: var(--maincolor1); border-radius: 15px; color: #fff; margin: 0 auto; margin-top: 42px; transition: .2s;
}
#section2 .container .sec2_contentBox {
    display: grid; grid-template-columns: repeat(3, 25.4vw); gap: 20px; justify-content: center;
    margin: 30px auto 0;
}
    #section2 .container .sec2_contentBox .content_wrap {
        display: flex; justify-content: center; align-items: center;
        height: 600px; border-radius: 30px; transition: .2s;
    }
    #section2 .container .sec2_contentBox .content_wrap .tech {
        position: relative;
        width: 100%; height: 600px; border-radius: 30px; overflow: hidden; transition: .4s;
    }
    #section2 .container .sec2_contentBox .bottom {
        transform: translateY(130px);
    }
    #section2 .container .sec2_contentBox .tech::after {
        content: "";
        position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
        width: 289px; height: 146px; background: rgba(0, 0, 0, 0.5); filter: blur(68.5px);
    }
    #section2 .container .sec2_contentBox .tech:nth-child(2)::after {
        background: rgba(0, 0, 0, 0.2);
    }
    #section2 .container .sec2_contentBox .tech:last-child::after {
        width: 227px; height: 146px; background: rgba(0, 0, 0, 0.1);
    }
    #section2 .container .sec2_contentBox .tech span {
        position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%);
        color: #fff; font-weight: 500; font-size: 2.6rem; white-space: nowrap; text-align: center; line-height: 160%;
    }
    #section2 .container .sec2_contentBox .tech img {
        width: 100%; height: 100%; object-fit: cover; transition: .4s ease-in-out;
    }

/* Hover 효과 */
#section2 .container .btn_more:hover {
    background-color: #13384f;
}
    #section2 .container .sec2_contentBox .content_wrap:hover .tech {
        border-radius: 50%;
        height: 25.4vw
    }
    #section2 .container .sec2_contentBox .content_wrap:hover .tech img {
        transform: scale(1.3); filter: brightness(70%)
    }
    #section2 .container .sec2_contentBox .content_wrap:hover .tech img.longWidth {
        transform: scale(1.6);
    }


#section3 {
    position: relative; margin-top: 350px;
}
#section3 h2 {}
#section3 h2 .tb {}
#section3 .btn_more {
    display: flex; justify-content: center; align-items: center;
    max-width: 182px; padding: 15px 0px; font-weight: 500; font-size: 2.4rem; background: var(--dark-blue); border-radius: 15px; color: #fff; margin: 0 auto; margin-top: 42px; transition: .2s;
}

/* Section 3 Swiper 커스텀 */
#section3 {
}
/* Section 3 Swiper 컨테이너 */
.sec3Swiper {
    width: 100%;
    overflow: hidden; /* 슬라이더 밖으로 나가는 이미지 숨김 */
    padding: 50px 0 80px;
}

.sec3Swiper .swiper-wrapper {
    /* 이미지가 잘리지 않도록 정렬 */
    display: flex;
    align-items: center;
}

.sec3Swiper .swiper-slide {
    flex-direction: column;
    width: 80%; /* 화면에 보일 메인 이미지의 너비 (적절히 조절 가능) */
    height: auto; cursor: grab;
    transition: .5s; /* 부드러운 전환 효과 */
    
    /* [핵심] 비활성화된 슬라이드 상태 (흐리고 밝게) */
    opacity: 0.3;
}
    .swiper-3d .swiper-slide-shadow-left,
    .swiper-3d .swiper-slide-shadow-right {
        background-image: none;
    }

/* [핵심] 활성화된(가운데) 슬라이드 상태 */
.sec3Swiper .swiper-slide-active {
    opacity: 1;
    filter: brightness(1) grayscale(0);
    transform: scale(1); /* 중앙 이미지는 100% 크기 */
    z-index: 10;
}

.sec3Swiper .swiper-slide img {
    width: 100%;
    display: block;
}
.sec3Swiper .swiper-slide .slide-text {
    font-size: 2.4rem; margin-top: 30px; font-weight: 300;
}

/* hover 효과 */
#section3 .btn_more:hover {
    background: var(--maincolor1);
}


#section4 {

}
#section4 .container h2 {

}
#section4 .container h2 .tbo {

}
#section4 .container h2 .tb {

}
#section4 .container .support {
    display: grid; grid-template-columns: repeat(3, 19vw); gap: 84px; justify-content: center;
    margin: 100px auto 0;
}
    #section4 .container .support .sup {
        display: flex; justify-content: center; align-items: center; flex-direction: column;
        border-radius: 30px; padding: 5.72vw 6.7vw 5.2vw; box-shadow: 0 5px 50px rgba(0, 0, 0, 0.1);
    }
    #section4 .container .support .sup span {
        display: block;
        font-size: 1.8rem; font-weight: 500; margin-top: 30px; white-space: nowrap;
    }
#section4 .container p {
    text-align: center; margin-top: 60px; color: var(--text); font-size: 1.8rem; line-height: 1.8;
}
    #section4 .container p strong {
        font-weight: 500;
    }
    #section4 .container .btn_wrap {
        display: flex; gap: 1vw; justify-content: center;
        max-width: 66vw; font-size: 2.4rem; font-weight: 300; margin: 50px auto 0;
    }
        #section4 .container .tel,
        #section4 .container .email {
            display: block;
            display: flex; justify-content: center; align-items: center; gap: 10px;
            width: 32.39vw; height: 51px; background: var(--maincolor1); color: #fff; transition: .2s;
        }
        #section4 .container .tel {
            background: var(--maincolor2);
        }
        #section4 .container strong {
            font-weight: 500;
        }

        /* Hover 효과 */
        #section4 .btn_wrap:hover .tel,
        #section4 .btn_wrap:hover .email {
            transform: scale(0.9);
            transition: 0.3s;
        }

        #section4 .container .tel:hover,
        #section4 .container .email:hover {
            transform: scale(1.1);
        }

        /* 이메일 복사 툴팁 */
        #section4 .container .email {
            position: relative;
        }
        .email-copy-tooltip {
            position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 20px);
            background: #fff; color: #1f1f1f; padding: 6px 14px;
            font-size: 1.5rem; white-space: nowrap; border-radius: 10px; font-weight: 600; border: 2px solid var(--maincolor1);
            pointer-events: none; opacity: 0; transition: .3s;
            z-index: 100;
        }
        .email-copy-tooltip.show {
            opacity: 0.9; transform: translate(-50%, 0);
        }


footer {
    width: 100%; background: #343434; padding: 70px auto;
}
footer .tec_container {
    display: flex; gap: 1.8vw; align-items: center; justify-content: space-evenly; justify-self: center;
    max-width: 1300px; padding: 70px;
}
footer .tec_container .logoFoot {
    margin-right: 4.84vw;
}
    footer .tec_container p {
        color: #797979; font-size: 1.6rem; line-height: 1.6;
    }
    footer .tec_container p span {
        font-size: 1.4rem;
    }





/* --------------------------------------------------------------------------- */
/* 서브 공통 */
header.sub {
    position: relative;
}
    header.sub .topset .gnb > li > a {
        color: var(--text);
    }
    header.sub .topset .blog a {
        color: var(--maincolor2);
    }
    /* ✨ GNB 특정 메뉴 호버 시: 컬러 변경 및 하단 보더 */
    header.sub .topset .gnb > li:hover > a ,
    header.sub .topset .gnb > li.current > a {
        border-bottom: 2px solid var(--maincolor1);
        color: var(--maincolor1); font-weight: 600;
    }
    header.sub .topset .blog img.blog_icon_sub {
        display: block;
        margin-left: 0.78vw; width: 35px;
    }
    header.sub .topset .blog img.blog_icon {
        display: none;
    }




/* --------------------------------------------------------------------------- */
/* 반응형 시작 */
@media screen and (max-width: 1760px) {
    header .topset .gnb > li > a {
    }
}




/* --------------------------------------------------------------------------- */
/* 태블릿 */
@media screen and (max-width: 1024px) {

}




/* --------------------------------------------------------------------------- */
/* 모바일 */
@media screen and (max-width: 1240px) {
    .pc {
        display: none !important;
    }
    .mo {
        display: block !important;
    }
    
    html {
        font-size: 10px; margin: 0; padding: 0;
    }
    
    body {
        margin: 0; padding: 0;
    }
    
    .container {
        position: relative;
        display: flex; flex-direction: column;
        max-width: 100%; margin: 0 20px; margin-top: 170px !important;
    }

    .sideBar {
        right: 15px; top: 85%;
    }
    .sideBar .btnKakao img,
    .sideBar .btnTop img {
        width: 50px;
    }
    .sideBar .btnKakao:hover, .sideBar .btnTop:hover {transform: none;}

    h2 {
        font-size: 2.4rem; line-height: 1.5; margin-top: 0px; margin-bottom: 20px;
    }

    h2.section-title {
        display: block !important;
        visibility: visible !important;
        position: relative;
        z-index: 10;
    }
    .h2bg_left {
        top: -35px;
    }
    .h2bg_right {
        top: -35px;
    }


    /* === HEADER 모바일 === */
    header {
        position: absolute; top: 0; left: 0; z-index: 1000;
        width: 100%; height: 70px; background: transparent !important; box-shadow: none;
        transition: background 0.3s ease;
    }

    /* 헤더 호버 효과 제거 (모바일) */
    header:hover {
        background: transparent;
    }

    /* 메뉴 열렸을 때 헤더 */
    header.menu-open {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100vh; height: 100dvh; background: #fff !important;
    }

    header .topset {
        position: relative; z-index: 30;
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: 70px; margin: 0; padding: 0 20px;
    }

    /* 메뉴 열렸을 때 topset */
    header.menu-open .topset {
        display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
        height: 100vh; height: 100dvh; padding-top: 0;
    }
    
    /* 로고 - 가운데 정렬 */
    header .topset .logo {
        position: relative;
        display: flex; justify-content: center; align-items: center;
        height: 70px;
    }
    
    header .topset .logo img {
        width: 140px;
    }

    /* 메뉴 열렸을 때 로고 - 위치 동일하게 유지 */
    header.menu-open .topset .logo {
        position: relative;
        height: 70px;
    }

    /* 햄버거 버튼 - absolute로 왼쪽 고정 */
    .hamburger {
        position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 100;
        display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
        width: 33px; height: 22px; padding: 0; background: transparent; border: none; cursor: pointer; -webkit-appearance: none; appearance: none;
    }

    .hamburger span {
        display: block;
        width: 33px; height: 3px; background: #fff; border-radius: 2px; transition: all 0.3s ease; -webkit-transform: translateZ(0); transform: translateZ(0);
    }

    /* 서브페이지 햄버거 버튼 색상 */
    header.sub .hamburger span {
        background: var(--maincolor1);
    }

    /* 햄버거 라인 간격 5px (총 높이 22px = 3px*3 + 5px*2 + 여유 4px) */
    .hamburger span:nth-child(2) {
        margin: 6px 0;
    }

    /* 메뉴 열렸을 때 햄버거 -> 화살표 (위치 고정 유지) */
    header.menu-open .hamburger {
        position: absolute; top: 24px; left: 20px; transform: none;
    }

    header.menu-open .hamburger span {
        background: var(--maincolor1);
    }

    header.menu-open .hamburger span:nth-child(1) {
        width: 18px; transform: rotate(-45deg) translate(-3px, 0px);
    }

    header.menu-open .hamburger span:nth-child(2) {
        width: 28px; transform: translateX(0); margin: 5px 0;
    }

    header.menu-open .hamburger span:nth-child(3) {
        width: 18px; transform: rotate(45deg) translate(-3px, 0px);
    }

    /* GNB 모바일 */
    header .topset .gnb {
        display: none; flex-direction: column; align-items: center; justify-content: center !important;
        width: 100%; height: auto;
    }

    /* 메뉴 열렸을 때 GNB 표시 - 강제 표시 */
    header.menu-open .topset .gnb,
    header.sub.menu-open .topset .gnb {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        flex: 1;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 50;
        padding: 20px 0;
    }

    header .topset .gnb > li {
        position: relative;
        display: flex; flex-direction: column; align-items: center;
        border-bottom: none; /* 모바일에서는 li 보더 제거, a에서 처리 */
    }

    /* 첫 번째 gnb 위쪽 라인 제거 */
    header .topset .gnb > li:first-child {
        border-top: none;
    }

    header .topset .gnb > li > a {
        position: relative;
        display: flex; justify-content: center; align-items: center;
        width: 230px; height: auto; padding: 2vh 0; font-size: 2rem; font-weight: 500; color: var(--text);
        border-bottom: 2px solid #EFEFEF; /* 기본은 회색 선 */
    }

    /* 모바일 GNB hover 효과 제거 (PC 스타일 덮어쓰기) */
    header .topset .gnb > li:hover > a,
    header .topset .gnb > li > a:hover,
    header.sub .topset .gnb > li:hover > a {
        color: var(--text); font-weight: 500;
        border-bottom: 2px solid #EFEFEF;
    }

    /* GNB 활성화(펼쳐짐) 시 주황색으로 변경 */
    header .topset .gnb > li.active > a,
    header .topset .gnb > li.active:hover > a,
    header .topset .gnb > li.active > a:hover,
    header.sub .topset .gnb > li.active > a,
    header.sub .topset .gnb > li.active:hover > a {
        color: var(--maincolor1); font-weight: 600;
        border-bottom: 2px solid var(--maincolor1);
    }

    /* LNB 모바일 - 슬라이드 애니메이션 */
    header .topset .gnb .lnb {
        position: relative; top: auto; left: auto; transform: none;
        display: flex; flex-direction: column; align-items: center;
        width: 100%; max-height: 0; padding: 0; opacity: 0; overflow: visible;
        pointer-events: none; /* 닫혀있을 때 클릭 방지 */
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    
    /* LNB 아래쪽에 주황색 선 추가 */
    header .topset .gnb > li.active .lnb::after {
        content: "";
        position: absolute; bottom: 0; left: 0;
        width: 100%; height: 2px; background: var(--maincolor1);
    }

    /* LNB 활성화 시 슬라이드로 표시 */
    header .topset .gnb > li.active .lnb {
        max-height: 300px; padding: 1.2vh 0 1.8vh; opacity: 1;
        pointer-events: auto; /* 열렸을 때 클릭 허용 */
    }

    header .topset .gnb .lnb li {
        width: 100%; text-align: center;
    }

    header .topset .gnb .lnb li a {
        display: inline-block;
        padding: 1.4vh 30px; font-size: 1.6rem; font-weight: 400; color: var(--text); border-radius: 30px; transition: none;
    }

    /* LNB 호버 효과 제거 (모바일) */
    header .topset .gnb .lnb li a:hover {
        background: transparent; color: var(--text);
    }
    
    /* 모바일 - 현재 페이지 LNB 스타일 */
    header .topset .gnb .lnb li a.current {
        background: transparent; color: var(--maincolor1); font-weight: 500;
    }
    
    /* 모바일 - 현재 페이지 LNB는 호버 효과 무시 */
    header .topset .gnb .lnb li a.current:hover {
        background: transparent; color: var(--maincolor1);
    }

    /* 모바일 - 서브페이지 현재 GNB 기본 스타일 (PC 스타일 덮어쓰기) */
    header.sub .topset .gnb > li.current > a {
        color: var(--text); font-weight: 500;
        border-bottom: 2px solid #EFEFEF;
    }

    /* 모바일 - 서브페이지 현재 GNB 스타일 (메뉴 열렸을 때만) */
    header.sub.menu-open .topset .gnb > li.current > a {
        color: var(--maincolor1); font-weight: 600;
        border-bottom: 2px solid var(--maincolor1);
    }

    /* LNB 배경 숨기기 */
    header .lnb_bg {
        display: none;
    }

    /* 블로그 버튼 모바일 */
    header .topset .blog {
        position: relative; bottom: auto; left: auto; transform: none;
        display: none; margin-top: 0; z-index: 60;
        flex-shrink: 0;
        padding: 15px 0;
    }

    header.menu-open .topset .blog {
        display: flex;
        justify-content: center;
    }

    header .topset .blog a {
        display: flex; justify-content: center; align-items: center;
        font-size: 1.8rem; font-weight: 400; color: var(--maincolor2); padding: 10px 0;
    }
    header .topset .blog a span {
        font-weight: 600;
    }

    /* 블로그 호버 효과 제거 (모바일) */
    header .topset .blog a:hover {
        font-weight: 400;
    }

    header .topset .blog a .blog_icon {
        display: none;
    }

    header .topset .blog a .blog_icon_sub {
        display: inline-block;
        margin-left: 10px; width: 28px; height: auto;
    }

    /* 모바일 전화 버튼 */
    .mobileCall {
        position: relative; bottom: auto; left: auto;
        display: none !important; justify-content: center; align-items: center; gap: 8px;
        width: 100%; height: 73px; background: var(--maincolor2); font-size: 1.8rem; font-weight: 400; color: #fff; border-radius: 30px 30px 0 0; text-decoration: none;
        flex-shrink: 0;
        margin-top: auto;
    }

    header.menu-open .mobileCall {
        display: flex !important;
    }

    .mobileCall img {
        width: 20px; height: 20px;
    }

    .mobileCall strong {
        font-weight: 500;
    }

    /* === HERO 모바일 === */
    #hero {
        position: relative; top: 0; left: 0;
        width: 100vw; height: 430px; margin: 0; padding: 0;
    }
    
    #hero .mySwiper {
        width: 100%; height: 100%;
    }
    
    #hero .swiper-slide {
        width: 100%; height: 100%;
    }
    
    #hero .swiper-slide img {
        width: 100%; height: 100%; object-fit: cover; object-position: center center;
    }

    #hero .swiper-slide > div {
        position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);
        width: 75%;
    }

    #hero .swiper-slide > div p:first-child {
        font-size: 2.2rem; line-height: 1.4;
    }

    #hero .swiper-slide > div p:last-child {
        font-size: 1.4rem; line-height: 1.5; margin-top: 12px;
    }

    #hero .mySwiper .swiper-button-next,
    #hero .mySwiper .swiper-button-prev {
        display: none;
    }

    #hero .mySwiper .swiper-pagination-bullet {
        width: 8px; height: 8px;
    }

    #hero .swiper-horizontal > .swiper-pagination-bullets {
        bottom: 20px;
    }

    /* === SECTION 1 === */
    #section1 .container {
        margin-top: 40px !important;
    }

    /* 모바일 섹션1 타이틀 영역 */
    #section1 .sec1Mobile .sec1Title {
        display: flex; flex-direction: column; align-items: center;
        width: 100%; padding: 30px 20px 0; margin-bottom: 20px; background: #F8F8F8; border-top: 1px solid var(--maincolor1); border-bottom: 1px solid var(--maincolor1);
    }

    #section1 .sec1Mobile .sec1Title h2 {
        font-size: 2.2rem; line-height: 1.5; margin-top: 0; text-align: center;
    }

    #section1 .sec1Mobile .sec1Title img {
        width: 120px; max-width: 300px; margin-top: 20px;
    }

    /* === SECTION 1 모바일 Swiper 스타일 === */
    .sec1MobileSwiper {
        position: relative;
        width: 100%; margin-top: 20px; padding-bottom: 50px; overflow: visible;
        --swiper-theme-color: var(--maincolor1);
        --swiper-navigation-size: 25px;
    }
    
    .sec1MobileSwiper .swiper-wrapper {
        display: flex; align-items: stretch;
    }
    
    .sec1MobileSwiper .swiper-slide {
        display: flex; flex-direction: column;
        width: 85%; min-height: 550px; height: auto; background: #fff; border-radius: 30px 30px 0 0; border: 1px solid var(--maincolor1); overflow: visible;
    }

    .sec1MobileSwiper .swiper-slide a {
        display: flex; flex-direction: column;
        width: 100%; height: 100%; text-decoration: none; color: inherit;
    }
    
    .sec1MobileSwiper .swiper-slide .productImg {
        position: relative;
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: 303px;
    }
    
    .sec1MobileSwiper .swiper-slide .productImg img {
        max-height: 170px; max-width: 90%; object-fit: contain; transform: scale(1.8);
    }
    
    .sec1MobileSwiper .swiper-slide .textBox {
        position: relative;
        width: 100%; min-height: 260px; background: #fff; flex: 1; padding: 30px 25px; transition: background 0.3s ease;
    }
    
    /* 활성화된 슬라이드의 textBox는 주황색 */
    .sec1MobileSwiper .swiper-slide-active .textBox {
        background: var(--maincolor1);
    }
    
    .sec1MobileSwiper .swiper-slide .textBox strong {
        display: block;
        font-size: 2rem; font-weight: 600; color: var(--text); margin-bottom: 10px; transition: color 0.3s ease;
    }
    
    /* 활성화된 슬라이드의 텍스트는 흰색 */
    .sec1MobileSwiper .swiper-slide-active .textBox strong {
        color: #fff;
    }
    
    .sec1MobileSwiper .swiper-slide .textBox p {
        font-size: 1.6rem; line-height: 1.8; font-weight: 500; color: var(--text); margin-bottom: 15px; transition: color 0.3s ease;
    }
    
    /* 활성화된 슬라이드의 p 태그는 흰색 */
    .sec1MobileSwiper .swiper-slide-active .textBox p {
        color: #fff;
    }
    
    .sec1MobileSwiper .swiper-slide .textBox .productTag {
        display: flex; gap: 5px; justify-content: center; flex-wrap: wrap;
    }
    
    .sec1MobileSwiper .swiper-slide .textBox .productTag li {
        min-width: 60px; font-size: 1.4rem; font-weight: 600; color: var(--text); background: #fff; padding: 0px 17px; border-radius: 10px; text-align: center; list-style: none; line-height: 2; transition: background 0.3s ease;
    }
    
    /* 활성화된 슬라이드의 태그 배경 */
    .sec1MobileSwiper .swiper-slide-active .textBox .productTag li {
        background: #fff;
    }
    
    /* Swiper 페이지네이션 */
    .sec1MobileSwiper .swiper-pagination {
        bottom: 10px;
    }
    
    .sec1MobileSwiper .swiper-pagination-bullet {
        width: 8px; height: 8px; background: transparent; opacity: 1; border: 1px solid var(--maincolor1);
    }
    
    .sec1MobileSwiper .swiper-pagination-bullet-active {
        background: var(--maincolor1);
    }
    
    /* Swiper 화살표 */
    .sec1MobileSwiper .swiper-button-next,
    .sec1MobileSwiper .swiper-button-prev {
        top: 50%; transform: translateY(-50%);
        width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--maincolor1); background: #fff;
    }
    
    .sec1MobileSwiper .swiper-button-next::after,
    .sec1MobileSwiper .swiper-button-prev::after {
        font-size: 14px; font-weight: 700; color: var(--maincolor1);
    }
    .swiper-navigation-icon {
        display: none;
    }
    
    .sec1MobileSwiper .swiper-button-next {
        right: 0px; background-color: #fff; background-image: url('../images/sec1_arrow_right_m.svg'); background-repeat: no-repeat; background-position: center;
    }
    
    .sec1MobileSwiper .swiper-button-prev {
        left: 0px; background-color: #fff; background-image: url('../images/sec1_arrow_left_m.svg'); background-repeat: no-repeat; background-position: center;
    }

    /* === SECTION 2 === */
    #section2 .container {
        margin-top: 60px;
    }
    
    #section2 .container .h2bg_left,
    #section2 .container .h2bg_right {
        top: -25px;
    }

    #section2 .container .btn_more {
        max-width: 196px; padding: 12px 60px; font-size: 1.6rem; margin-top: 25px; order: 2; border-radius: 10px;
    }

    #section2 .container .sec2_contentBox {
        display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px;
        margin: 30px 0 0; margin-top: 60px; order: 1;
    }

    #section2 .container .sec2_contentBox .content_wrap {
        height: 180px; border-radius: 15px;
    }

    #section2 .container .sec2_contentBox .content_wrap .tech {
        height: 180px; border-radius: 15px;
    }

    #section2 .container .sec2_contentBox .bottom {
        transform: translateY(0);
    }

    #section2 .container .sec2_contentBox .tech::after {
        width: 150px; height: 80px; filter: blur(40px);
    }

    #section2 .container .sec2_contentBox .tech:last-child::after {
        width: 120px; height: 80px;
    }

    #section2 .container .sec2_contentBox .tech span {
        width: 105px; font-size: 1.6rem; line-height: 1.6; white-space: pre-line; padding: 0 10px; word-break: keep-all;
    }

    /* Hover 효과 모바일에서 제거 */
    #section2 .container .sec2_contentBox .content_wrap:hover .tech {
        border-radius: 15px; height: 180px;
    }

    #section2 .container .sec2_contentBox .content_wrap:hover .tech img {
        transform: none !important; filter: none !important;
    }

    #section2 .container .sec2_contentBox .content_wrap:hover .tech img.longWidth {
        transform: none !important;
    }

    /* === SECTION 3 === */
    #section3 {
        display: flex; flex-direction: column;
        margin-top: 60px;
    }

    #section3 .btn_more {
        max-width: 196px; padding: 12px 74px; font-size: 1.6rem; margin-top: 25px; order: 2; border-radius: 10px;
    }

    .sec3Swiper {
        padding: 50px 0 0px; order: 1;
    }

    .sec3Swiper .swiper-slide {
        width: 85%; height: auto;
    }

    .sec3Swiper .swiper-slide img {
        width: 100%; height: auto; min-height: 280px; object-fit: cover;
    }

    .sec3Swiper .swiper-slide .slide-text {
        font-size: 1.5rem; margin-top: 15px; text-align: center;
    }

    /* === SECTION 4 === */
    #section4 .container {
        margin-top: 60px;
    }

    #section4 .container .support {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
        margin: 40px auto 0;
    }

    #section4 .container .support .sup {
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        padding: 27px 27px; border-radius: 15px; box-shadow: 0 3px 26px rgba(0, 0, 0, 0.1);
    }

    #section4 .container .support .sup img {
        width: 50px; height: auto;
    }

    #section4 .container .support .sup span {
        position: absolute; bottom: -30px;
        font-size: 1.5rem; white-space: nowrap;
    }

    #section4 .container > p {
        font-size: 1.5rem; font-weight: 500; line-height: 1.6; margin-top: 60px; padding: 0 10px; word-break: keep-all;
    }
    #section4 .container > p strong {
        font-weight: 600;
    }

    /* 버튼을 박스 바깥으로 이동 및 세로 정렬 */
    #section4 .container .btn_wrap {
        display: flex; flex-direction: column; gap: 15px;
        max-width: 100%; margin: 30px 0 0; padding: 0;
    }
    #section4 .container .tel,
    #section4 .container .email {
        display: flex; justify-content: center; align-items: center; gap: 10px;
        width: 100%; height: auto; padding: 15px 20px; font-size: 1.9rem;
    }
    #section4 .container .tel img,
    #section4 .container .email img {
        width: 20px; height: 20px;
    }
    #section4 .container .btn_wrap span {
        display: none;
    }

    /* Hover 효과 모바일에서 제거 */
    #section4 .btn_wrap:hover .tel,
    #section4 .btn_wrap:hover .email {
        transform: scale(1);
    }

    #section4 .container .tel:hover,
    #section4 .container .email:hover {
        transform: scale(1);
    }

    /* === FOOTER === */
    footer {
        padding: 40px 0; margin-top: 100px; padding-bottom: 80px;
    }

    footer .tec_container {
        display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
        padding: 0 30px; margin-top: 0 !important;
    }

    footer .tec_container .logoFoot {
        margin-right: 0; margin-bottom: 10px;
    }

    footer .tec_container .logoFoot img {
        width: 120px;
    }

    footer .tec_container p {
        position: relative;
        font-size: 1.4rem; line-height: 1.6;
    }

    footer .tec_container p span {
        font-size: 1.4rem; font-weight: 600;
    }
    footer .tec_container p:last-child span {
        display: block;
        margin-top: 10px;
    }
}


@media (max-width: 768px) {
    .h2bg_left,
    .h2bg_right {
        display: none;
    }
    .h2bg_left {
        content: "";
        position: absolute; left: 0px; top: -35px; z-index: -1;
        display: flex;
        background: url(../images/title_bg_left_m.png) no-repeat center; width: 100%; height: 103px;
        background-position: left;
    }
    .h2bg_right {
        content: "";
        position: absolute; right: 0px; top: -35px; z-index: -1;
        display: flex;
        background: url(../images/title_bg_right_m.png) no-repeat center; width: 100%; height: 103px;
        background-position: right;
    }

    header.menu-open .topset .gnb, header.sub.menu-open .topset .gnb {
        padding: 0;
    }

    header .topset .gnb > li > a {
        font-size: 1.8rem;
    }

    header .topset .blog {
        padding: 0;
    }
}