@charset "UTF-8";

/* ===========================
    서브페이지 전용 CSS
    기존 style.css와 충돌 방지
=========================== */

:root {
    --maincolor1: #f0620a;
    --maincolor2: #04456f;
    --dark-blue: #13384f;
    --text: #1f1f1f;
    --bg-light: #f8f8f8;
}

.features-section .container .h2bg_left,
.features-section .container .h2bg_right {z-index: 0;}

.h2bg_left.smalltext {
    top: -33px;
}
.h2bg_right.smalltext {
    top: -33px;
}

/* ===========================
    Product Picker Section
=========================== */
.product-picker {
    padding: 0px 0 10px;
}

.container.sec1 {
    margin-top: 180px;
}

.product-nav {
    padding: 30px 0 80px; border-bottom: 1px solid #D9D9D9;
}

.product-list {
    display: flex; justify-content: center; gap: 28px; flex-wrap: nowrap;
    margin: 0; padding: 0; list-style: none;
}

.product-btn {
    display: grid; justify-items: center; gap: 10px;
    min-width: 120px; text-decoration: none; color: var(--text);
}

.product-btn .thumb {
    display: grid; place-items: center;
    width: 12.8vw;
    border-radius: 50%; background: #F8F8F8; outline: 10px solid transparent; transition: .2s; overflow: hidden;
}

.product-btn .thumb img {
    width: 100%; object-fit: contain;
}

.product-btn .label {
    font-size: 1.8rem; text-align: center; white-space: nowrap; transition: .1s; margin-top: 20px;
}

/* hover 효과 */
.product-btn:hover .thumb {
    outline: 10px solid var(--maincolor1); transform: translateY(-5px);
}

.product-btn:hover .label {
    font-weight: 600;
}

/* 선택(활성) 상태 */
.product-btn.is-active .thumb {
    outline: 10px solid var(--maincolor1);
}

.product-btn.is-active .label {
    font-weight: 600;
}


/* ===========================
    Product Detail Section
=========================== */
.detail-wrap {
    display: flex; align-items: flex-start; gap: 60px;
}

/* 좌측: 갤러리 영역 */
.detail-gallery {
    width: 39vw; flex-shrink: 0;
}

/* 메인 이미지 슬라이더 */
.prodMainSwiper {
    width: 100%; height: 610px;
    margin-bottom: 20px; border: 1px solid #e5e5e5; overflow: hidden;
}

.prodMainSwiper .swiper-slide {
    display: flex; justify-content: center; align-items: center;
    aspect-ratio: 1 / 1; background: #fff;
}

.prodMainSwiper .swiper-slide img {
    width: 100%; height: 100%; object-fit: contain;
}

/* 썸네일 네비게이션 영역 */
.thumb-nav {
    display: flex; align-items: center; gap: 10px;
}

/* 이전/다음 버튼 */
.prod-nav-btn {
    display: flex; justify-content: center; align-items: center;
    width: 30px; height: 80px;
    flex-shrink: 0; background: transparent; border: none; cursor: pointer; transition: .2s;
}

.prod-nav-btn:hover svg path {
    stroke: var(--maincolor1);
}

.prod-nav-btn:disabled {
    opacity: 0.3; cursor: default;
}

/* 썸네일 슬라이더 */
.prodThumbSwiper {
    flex: 1; overflow: hidden;
}

.prodThumbSwiper .swiper-slide {
    display: flex; justify-content: center; align-items: center;
    width: 90px; height: 90px;
    border: 1px solid #e5e5e5; background: #fff; cursor: pointer; transition: border-color .2s; overflow: hidden;
}

.prodThumbSwiper .swiper-slide img {
    width: 100%; height: 100%; object-fit: cover;
}

/* 썸네일 선택 상태 */
.prodThumbSwiper .swiper-slide-thumb-active {
    border-color: var(--maincolor1); border-width: 2px;
}

.prodThumbSwiper .swiper-slide:hover {
    border-color: var(--maincolor1);
}


/* 우측: 제품 정보 영역 */
.detail-info {
    flex: 1; padding-top: 10px;
}

.product-name {
    font-size: 2.4rem; font-weight: 600; color: var(--text); margin-bottom: 30px; margin-top: 75px; padding-bottom: 20px;
}

/* 스펙 리스트 */
.spec-list {
    margin-bottom: 60px;
}

.spec-row {
    display: flex; gap: 30px;
    margin-bottom: 20px; padding-bottom: 20px;
}

.spec-row:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

.spec-row dt {
    flex-shrink: 0; font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 2;
}

.spec-row dd {
    flex: 1; font-size: 1.6rem; font-weight: 500; line-height: 2; color: #555; margin: 0;
}

/* 견적 문의 버튼 */
.btn-inquiry {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 56px;
    font-size: 1.8rem; font-weight: 500; color: #fff; background: var(--maincolor1); text-decoration: none; transition: background .2s; margin-bottom: 25px;
}

.btn-inquiry:hover {
    background: var(--maincolor2);
}

/* 해시태그 리스트 */
.hashtag-list {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
    margin: 0; padding: 0; list-style: none;
}

.hashtag-list li {
    font-size: 1.6rem; font-weight: 600; color: var(--text); background: #efefef; padding: 8px 18px; border-radius: 10px; transition: .2s;
}


/* ===========================
    prod_intro
=========================== */
.prod_intro {
    background: url(../images/sub_prod_textBg.png) #F8F8F8;
    width: 100%;
}
.prod_intro h2 {
    padding-top: 40px;
}
.prod_intro h2 .tbo {
    
}
.prod_intro h2 .tb {
    
}
.prod_intro p {
    font-size: 2rem; font-weight: 500; text-align: center; line-height: 2; padding: 20px 0 40px;
}


/* ===========================
    Features Section (특장점)
=========================== */
.features-section {
    background: #fff;
}

h2.section-title.smalltext {
    position: relative;
    margin-bottom: 100px;
}

.features-list {
    display: flex; flex-direction: column; gap: 80px;
}

/* 특장점 아이템 */
.feature-item {
    display: flex; align-items: center; gap: 50px;
}

.feature-item .feature-img {
    width: 38vw;
    flex-shrink: 0; margin: 0;
}

.feature-item .feature-img img {
    width: 100%; height: auto;
}

.feature-item .feature-content {
    padding-left: 30px;
}

.feature-item .feature-content h3 {
    display: flex; align-items: center; gap: 19px;
    font-size: 2.4rem; font-weight: 700; margin-bottom: 45px;
}

.feature-item .feature-content h3 .bar {
    display: inline-block;
    width: 4px; height: 20px;
    background: var(--maincolor1);
}

.feature-item .feature-content p {
    font-size: 2rem; font-weight: 500; line-height: 1.9; margin-bottom: 18px;
}

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

/* 모니터링 그룹 */
.monitoring-group {
    display: flex; flex-direction: column; gap: 20px;
}

.monitoring-type h4 {
    font-size: 2rem; font-weight: 700; margin-bottom: 8px;
}

.monitoring-type p {
    margin-bottom: 0;
}


/* ===========================
    Specs Section (제품 스펙)
=========================== */
.specs-section {
    padding: 100px 0 0;
}
body.prod05 .specs-table-wrap {
    margin: 0 auto;
}

.specs-content {
    display: flex; align-items: flex-start; flex-direction: column; text-align: center;
}

/* 제품 전면도 */
.specs-diagram {
}

.specs-diagram img {
    width: 100%;
}


/* 제품 사양 테이블 */
.specs-table-wrap {
    width: 46.7vw; margin: 160px auto 0;
}

.specs-table {
    width: 100%; margin-top: 80px;
}

.specs-table thead tr {
    border-bottom: 2px solid #ADADAD;
}

.specs-table thead th {
    font-size: 2rem; font-weight: 600; padding: 17px 0; text-align: left; color: #3d3d3d;
}

.specs-table tbody th,
.specs-table tbody td {
    font-size: 2rem; padding: 20px 0px; border-bottom: 2px solid #e3e3e3; color: #3d3d3d;
}

.specs-table tbody tr:first-child th,
.specs-table tbody tr:first-child td {
    padding-top: 45px;
}

.specs-table tbody th {
    width: 16.8vw; font-weight: 500; text-align: left;
}

.specs-table tbody td {
    font-weight: 500; color: #555; text-align: left;
}


/* ===========================
    option (Time-lapse)
=========================== */
.option_tl {
    text-align: center;
}
.option_tl .container .tl-content {
    padding-top: 10px;
}
.option_tl .container .tl-content .tl01 {
    margin-bottom: 200px;
}
.option_tl .container .tl-content .tl01 p {
    font-weight: 500; font-size: 2rem; line-height: 2; padding: 40px 0 80px;
}
.option_tl .container .tl-content .tl01 img {
    width: 100%;
}

.option_tl .container .tl-content .tl02 {
    margin-bottom: 200px;
}
.option_tl .container .tl-content .tl02 > ul {
    padding-top: 40px;
}
.option_tl .container .tl-content .tl02 > ul li .fst_li,
.option_tl .container .tl-content .tl02 > ul li .sec_li {
    display: flex; justify-content: center; gap: 3.33vw;
}
.option_tl .container .tl-content .tl02 > ul li .fst_li li,
.option_tl .container .tl-content .tl02 > ul li .sec_li li {
    position: relative;
}
.option_tl .container .tl-content .tl02 > ul li .fst_li li p,
.option_tl .container .tl-content .tl02 ul li .sec_li li p {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.8;
}
.option_tl .container .tl-content .tl03 {
    display: flex; flex-direction: column; align-items: center;
}
.tl03 .sub_title_db {
    width: 41.1vw; margin-top: 0;
}
.tl03_text_wrap {
    display: flex; margin: 40px 0 80px; gap: 30px; justify-content: center;
}
.tl03_text_wrap p {
    display: flex; flex-direction: column; gap: 20px;
    text-align: start; font-weight: 500; font-size: 2rem; padding-left: 20px; border-left: 2px solid #ADADAD;
}
.tl03_text_wrap p span {
    display: block;
}
.tl03_notice_title {
    display: flex; align-items: center;
    width: 41.1vw; font-size: 2rem; font-weight: 700; white-space: nowrap;
}
.tl03_notice_title span {
    padding: 0 20px;
}
.tl03_notice_title .notice_bar {
    width: 100%; height: 2px; border: 1px solid #ADADAD;
}
.tl03_notice_box {
    width: 41.1vw;
}
.tl03_notice_box .notice01,
.tl03_notice_box .notice02,
.tl03_notice_box .notice03,
.tl03_notice_box .notice04 {
    margin-top: 20px; font-size: 2.2rem; font-weight: 400; line-height: 2; color: #fff; padding: 18px 0; border-radius: 5px;
}
.tl03_notice_box .notice01 {
    background: #AC7F5E;
}
.tl03_notice_box .notice02 {
    background: #CD891B;
}
.tl03_notice_box .notice03 {
    background: #949494;
}
.tl03_notice_box .notice04 {
    background: #346491;
}



/* ----------------------------------------------------------------------- */
/* ===========================
    Responsive - Tablet
=========================== */
@media screen and (max-width: 1200px) {
    .sub_title_db {
        font-size: 2rem;
    }
    .specs-table {
        width: 80%; margin: 0 auto;
    }
    .detail-wrap {
        gap: 40px;
    }
    
    .detail-gallery {
        width: 450px;
    }
    
    .prodThumbSwiper .swiper-slide {
        width: 75px; height: 75px;
    }

    .product-btn .label {
        width: 100px; font-size: 1.5rem; margin-top: 10px; white-space: normal;
    }

    /* Features */
    .feature-item {
        gap: 40px;
    }
    
    .feature-item .feature-img {
        width: 450px;
    }
    
    /* Specs */
    .specs-content {
        flex-direction: column; gap: 50px;
    }
    
    .specs-diagram,
    .specs-table-wrap {
        width: 100%;
    }
}


/* ----------------------------------------------------------------------- */
/* ===========================
    Responsive - Mobile
=========================== */
@media screen and (max-width: 768px) {
    .prod .container {
        margin-top: 70px!important;
    }

    /* Product Picker */
    .container.sec1 {
        margin-top: 120px;
    }
    
    .product-nav {
        padding: 20px 0 40px;
    }
    
    .product-list {
        gap: 15px; flex-wrap: wrap;
    }
    
    .product-btn .thumb {
        width: 100px;
    }

    /* 선택(활성) 상태 */
    .product-btn.is-active .thumb {
        outline: 6px solid var(--maincolor1);
    }
    
    .product-btn .label {
        width: 100px; font-size: 1.5rem; margin-top: 10px; white-space: normal;
    }

    h2.smalltext {
        font-size: 1.8rem;
    }

    h2.section-title {
        display: block !important;
        visibility: visible !important;
        position: relative;
        z-index: 10;
    }
    .prod_intro p {
        font-size: 1.6rem;
    }

    .specs-table-wrap {
        margin: 0 auto;
    }
    
    /* Product Detail */
    .product-detail {
        padding: 40px 0;
    }
    
    .detail-wrap {
        flex-direction: column; gap: 30px; align-items: center;
    }
    
    .detail-gallery {
        width: 100%;
    }
    
    .swiper {
        width: 89vw; height: auto;
    }
    .prodMainSwiper .swiper-slide {
        aspect-ratio: 1 / 1; 
    }
    
    .prodThumbSwiper .swiper-slide {
        width: 65px; height: 65px;
    }
    
    .product-name {
        font-size: 2.2rem; margin-bottom: 20px; padding-bottom: 15px;
    }
    
    .spec-row {
        flex-direction: column; gap: 10px;
        margin-bottom: 20px; padding-bottom: 20px;
    }
    
    .spec-row dt {
        width: auto; font-size: 1.5rem;
    }
    
    .spec-row dd {
        font-size: 1.4rem;
    }
    
    .btn-inquiry {
        height: 50px; font-size: 1.6rem;
    }
    
    .hashtag-list li {
        font-size: 1.3rem; padding: 6px 14px;
    }

    /* Features Section */
    .features-section {
        padding: 60px 0;
    }

    h2.section-title.smalltext {
        font-size: 2.2rem; margin-bottom: 50px;
    }
    
    .features-list {
        gap: 50px;
    }
    
    .feature-item {
        flex-direction: column; gap: 25px;
    }
    
    .feature-item .feature-img {
        width: 100%;
    }
    
    .feature-item .feature-content {
        width: 100%; padding-left: 15px;
    }
    
    .feature-item .feature-content h3 {
        font-size: 1.8rem;
    }
    
    .feature-item .feature-content p {
        font-size: 1.4rem;
    }
    
    .monitoring-type h4 {
        font-size: 1.5rem;
    }
    
    /* Specs Section */
    .specs-section {
        padding: 60px 0;
    }
    
    .sub_title_db {
        width: 60vw; font-size: 1.6rem; padding: 8px 20px;
    }
    .tl03 .sub_title_db {
        width: 60vw;
    }
    
    .diagram-wrap {
        padding: 25px;
    }
    
    .diagram-label {
        display: none;
    }
    
    .specs-table thead th {
        font-size: 1.6rem; padding: 12px 15px;
    }
    
    .specs-table tbody th,
    .specs-table tbody td {
        font-size: 1.6rem; padding: 12px 15px;
    }
    
    .specs-table {
        width: 100%;
    }

    .specs-table tbody th {
        width: 110px;
    }

    .option_tl .container .tl-content .tl01,
    .option_tl .container .tl-content .tl02,
    .option_tl .container .tl-content .tl03 {
        margin-bottom: 100px;
    }

    .option_tl .container .tl-content .tl01 p {
        font-size: 1.6rem;
    }

    .fst_li, .sec_li {
        flex-direction: column; align-items: center; 
    }

    .option_tl .container .tl-content .tl02 > ul li .fst_li li p, .option_tl .container .tl-content .tl02 ul li .sec_li li p {
        font-size: 1.8rem;
    }

    .option_tl .container .tl-content .tl02 > ul li .fst_li, .option_tl .container .tl-content .tl02 > ul li .sec_li {
        padding-top: 3.33vw;
    }

    .tl03_text_wrap {
        flex-direction: column;
    }
    .tl03_text_wrap p {
        font-size: 1.6rem;
    }

    .tl03_notice_box {
        width: 100%;
    }

    .tl03_notice_box .notice01, .tl03_notice_box .notice02, .tl03_notice_box .notice03, .tl03_notice_box .notice04 {
        font-size: 1.8rem;
    }

    .tl03_notice_title {
        justify-content: center;
    }
    .tl03_notice_title .notice_bar {
        min-width: 54px;
    }

}

/* =============================================== */
/* 견적 문의 모달 */
/* =============================================== */
.inquiry-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100000;
    justify-content: center; align-items: center;
}
.inquiry-modal-overlay.active { display: flex; }

.inquiry-modal {
    position: relative; background: #fff; border-radius: 20px;
    padding: 50px 45px 45px; width: 440px; max-width: 90vw;
    box-sizing: border-box; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.inquiry-modal .modal-close {
    position: absolute; top: 20px; right: 28px;
    background: none; border: none; font-size: 3.5rem; color: #888;
    cursor: pointer; line-height: 1; padding: 5px;
}
.inquiry-modal .modal-close:hover { color: #333; }
.inquiry-modal .modal-title {
    font-size: 1.8rem; font-weight: 600; color: var(--text);
    text-align: center; margin-bottom: 30px;
}
.inquiry-modal .modal-buttons {
    display: flex; flex-direction: column; gap: 12px;
}
.inquiry-modal .modal-buttons a {
    display: flex; justify-content: center; align-items: center;
    height: 52px; border-radius: 10px; font-size: 1.6rem; font-weight: 500;
    color: #fff; text-decoration: none; transition: .2s;
    position: relative;
}
.inquiry-modal .modal-buttons a:hover {
    transform: translateY(-5px);
}
.inquiry-modal .modal-buttons .tel   { background: var(--maincolor2); }
.inquiry-modal .modal-buttons .email { background: var(--maincolor1); }
.inquiry-modal .modal-buttons .kakao { background: #f9e000; color: #3c1e1e; }

/* 이메일 복사 툴팁 (모달 내) */
.inquiry-modal .email-copy-tooltip {
    position: absolute; bottom: calc(100% + 8px); 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;
}

.inquiry-modal .email-copy-tooltip.show {
    opacity: 1; transform: translate(-50%, 0);
}