/* 정동산업 — 공통 BEM (include/common.css) */

/************* 전역 *************/
.inner { width:100%; max-width:1240px; margin:0 auto; }
.inner--fill { max-width:none; padding-right:calc((100% - 1240px) / 2); padding-left:calc((100% - 1240px) / 2); }
@media(max-width:1280px){
    .inner { padding:0 4%; }
    .inner--fill { padding-right:4%; padding-left:4%; }
}
@media(max-width:768px){
    .inner { padding:0 5%; }
    .inner--fill { padding-right:5%; padding-left:5%; }
}

.sub-container { padding-top:0; padding-bottom:6.25em; min-height:5rem;}
@media(max-width:1080px){ .sub-container { padding-bottom:4.5em; } }
@media(max-width:768px){ .sub-container { padding-bottom:3.5em; } }

/************* Header *************/
.header {
    position:fixed; top:0; left:0;
    width:100%;
    z-index:100;
    transition: 0.35s;
}

.header--active {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(8px)
}

.header__inner {
    position:relative;
    max-width:1872px;
    padding: 0 16px;
    width:100%;
    height:8.875em;
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    transition: 0.35s;
}

.header--active .header__inner {
    height: 6.25em;
}

.header__logo {
    display: block;
}
.header__logo img {width:6.9375em; transition: 0.35s;}

.header__logo--sub img {
    filter:brightness(0) invert(1)
}

.header--active .header__logo--sub img {
    filter:brightness(1) invert(0)
}


.header__nav {
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    padding:.5em;
    border-radius:2.5em;
    background:rgba(53,53,53,.3);
    backdrop-filter:blur(1.25em); -webkit-backdrop-filter:blur(1.25em);
}
.header__nav-list {
    display:flex; align-items:center; gap:.5em;
}
.header__nav-item { position:relative; list-style:none; }
.header__nav-link {
    display:flex; align-items:center; justify-content:center;
    width:8em; padding:.75em;
    border-radius:1.5em;
    font-size:1em; font-weight:500; line-height:1.4;
    letter-spacing:-0.03125em;
    color:#fff; white-space:nowrap;
    transition:color .15s, background .15s;
}
.header__nav-link--active {
    background:#fff; color:#353535; font-weight:700;
    box-shadow:0 .25em .25em rgba(0,0,0,.1);
}

.header__nav-sub {
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    padding-top:1em;
    opacity:0; visibility:hidden;
    transition:opacity .15s, visibility .15s;
}
.header__nav-sub-list {
    min-width:10em;
    padding:.75em 1.25em;
    background:#fff;
    border-radius:.75em;
    box-shadow:0 .375em .75em rgba(0,0,0,.08);
    text-align:center;
}
.header__nav-sub-item { list-style:none; }
.header__nav-sub-link {
    display:block; padding:.5em 0;
    font-size:.9375em; font-weight:500; line-height:1.4;
    letter-spacing:-0.03125em;
    color:#353535; white-space:nowrap;
    transition:color .15s;
}
.header__nav-sub-link--active { color:var(--main-color); font-weight:700; }

.header__nav-sub-cate { padding:.25em 0; }
.header__nav-sub-cate-item { list-style:none; }
.header__nav-sub-cate-link {
    display:block; padding:.375em 0;
    font-size:.875em; font-weight:500;
    color:#666; white-space:nowrap;
    transition:color .15s;
}
.header__nav-sub-cate-link--active { color:var(--main-color); }

.header__nav-item:hover .header__nav-sub,
.header__nav-item:focus-within .header__nav-sub {
    opacity:1; visibility:visible;
}

@media(hover:hover){
    .header__nav-link:hover { color:var(--main-color); }
    .header__nav-sub-link:hover { color:var(--main-color); }
    .header__nav-sub-cate-link:hover { color:var(--main-color); }
}

.header__right {
    display:flex; align-items:center; gap:.75em;
}

.header__contact {
    display:flex; align-items:center; justify-content:center;
    width:10em; height:3.875em;
    border-radius:2.5em;
    background:rgba(53,53,53,.3);
    backdrop-filter:blur(1.25em); -webkit-backdrop-filter:blur(1.25em);
    font-size:1em; font-weight:500; letter-spacing:-0.03125em;
    color:#fff; white-space:nowrap;
    transition: 0.35s;
}

.header__contact--main {
    background-color: #353535;
    color: #fff;
}

.header--active .header__contact {
    background-color: #353535;
    color: #fff;
}

@media(hover:hover){
    .header__contact:hover {
        background-color: var(--main-color);
        color: #fff;
    }
}

.header__hamburger {
    width:3.875em; height:3.875em; padding:0;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    border:0; border-radius:50%;
    background-color: #fff;    
    cursor:pointer;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    transition: 0.35s;
}
.header__hamburger-wrap {
    display: flex;
    flex-direction:column;
    align-items: flex-end;
    gap:0.25em;
    width:1.375em;
}

.header__hamburger-bar {
    display:block; height:3px;
    background:var(--main-color);
    transition: 0.35s;
}

.header__hamburger-bar:first-of-type {
    width: 100%;
}

.header__hamburger-bar:last-of-type {
    width:0.75em;
}

@media(hover:hover) {
    .header__hamburger:hover {
        background-color: var(--main-color);
    }

    .header__hamburger:hover .header__hamburger-bar {
        background-color: #fff;
    }
}

/************* Sub Visual *************/
.sub-visual {
    box-sizing:border-box;
    position:relative; width:100%;
    min-height:37.5em;
    padding-top:8.875em;
    overflow:hidden; background:#353535;
    display:flex; flex-direction:column;
}
.sub-visual__bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
}

.sub-visual__inner {
    box-sizing:border-box;
    position:relative;
    flex:1;
    padding-top:7.125em;
    display:flex; flex-direction:column;
}
.sub-visual__title {
    font-size:4.25em; font-weight:700; line-height:1.3;
    letter-spacing:-0.03em; color:#fff;
    white-space:nowrap;
}

/************* Sub Nav (2depth) *************/
.sub-nav { margin-top:auto; }
.sub-nav__list {
    display:flex; align-items:flex-end;
}
.sub-nav__item {flex:1;}
.sub-nav__link {
    display:flex; align-items:center; justify-content:center;
    width: 100%;
    height:3.75em;
    background:#fff;
    border-right:1px solid #ddd; border-bottom:1px solid #ddd;
    font-size:1em; font-weight:500; line-height:1.4; letter-spacing:-0.03125em;
    color:#353535; white-space:nowrap;
    transition:background .15s, color .15s, height .15s;
}
.sub-nav__item:last-child .sub-nav__link { border-right:0; }
.sub-nav__link--active {
    height:4.5em;
    background:var(--main-color); color:#fff; font-weight:700;
    border:0;
}

/************* Content Tab (3depth) *************/
.content-tab {
    width:100%;
    display:flex; justify-content:center;    

}
.content-tab__list { display:flex; justify-content:center; }
.content-tab__item { list-style:none; flex:none; }
.content-tab__link {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:19.375em; height:3.75em;
    border-left:1px solid #ddd;
    border-top:1px solid #ddd;
    font-size:1em; font-weight:500; line-height:1.4; letter-spacing:-0.03125em;
    color:#353535; text-align:center;
    transition:color .15s;
}
.content-tab__item:last-child .content-tab__link { border-right:1px solid #ddd; }
.content-tab__link--active { color:var(--main-color); font-weight:700; }
.content-tab__link--active::before {
    content:''; position:absolute; left:-1px; top:-1px;
    width:calc(100% + 2px); height:3px;
    background:var(--main-color);
}
.content-tab--filled .content-tab__link--active {
    background:var(--main-color); color:#fff;
}
.content-tab--filled .content-tab__link--active::before { display:none; }

/************* Breadcrumb (독립 블록) *************/
.breadcrumb {
    display:inline-flex; align-items:center; gap:.5em;
    font-size:1.25em;
    font-weight:700; line-height:1.4; letter-spacing:-0.03125em;
    color:var(--main-color);
}
.breadcrumb__en,
.breadcrumb__ko { white-space:nowrap; }
.breadcrumb__arrow { flex:none; width:1.6em; height:1.6em; }

/************* Sub Hero (Section-1 A) *************/
.sub-hero {
    display: flex;
    flex-direction:column;
    gap:100px;
    text-align:center;
    border-bottom:1px solid #ddd;
    min-height: 21.25em;
}
.sub-hero__inner {
    padding-top: 6.25em;
    max-width:1240px;
    margin: 0 auto;
}
.sub-hero__lead {
    margin-top:1.1em;
    font-size:2.25em; 
    font-weight:700;
    line-height:1.4; 
    letter-spacing:-0.03em;
    color:#353535;
}
.sub-hero__title {
    margin-top:8px;
    font-size:3.75em; font-weight:900;
    line-height:1.4; letter-spacing:-0.04em;
    color:#353535; white-space:nowrap;
}
.sub-hero__title--gradient {
    background:linear-gradient(to right, #00a1e9, #104270);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

/************* Sub Title (Section-1 B / C) *************/
.sub-title {
    width:100%;
    min-height:21.3125em;              /* 341px */
    background:#fff; text-align:center;
    border-bottom:1px solid #ddd;
}
.sub-title__inner {
    padding:6.25em 0;
    display:flex; flex-direction:column; align-items:center;
    gap:2.5em;                         /* 40px en/ko */
}
.sub-title__en {
    font-size:1.25em; font-weight:700;
    line-height:1.4; letter-spacing:-0.03125em;
    color:var(--main-color); white-space:nowrap;
}
.sub-title__ko {
    font-size:3.25em; font-weight:700;
    line-height:1.4; letter-spacing:-0.04em;
    color:#353535; white-space:nowrap;
}

/************* Sec Title (재사용) *************/
.sec-title { display:inline-flex; align-items:center; gap:1.25em; }
.sec-title__bar { flex:none; width:.1875em; height:2.25em; background:var(--main-color); }
.sec-title__text {
    font-size:2.5em; font-weight:700; line-height:1.6; letter-spacing:-0.0625em; color:#353535;
}

/************* Sec Lead (sec-title 하위 리드 문단) *************/
.sec-lead {
    font-size:1em; font-weight:500; line-height:1.8; letter-spacing:-0.03125em;
    color:#656565;
}

/************* Footer *************/
.footer { position:relative; width:100%; background:#353535; color:#a5a5a5; padding:2.58em 0 2.5em;  font-size: var(--fz);}
.footer .inner { position:relative; min-height:10em; }
.footer__top {
    display:flex; align-items:center; gap:1em;
    margin-bottom: 1.35em;
    padding-bottom:1.1em;
    border-bottom:1px solid #656565
}
.footer__top-link {
    font-size:.875em; line-height:1.4; letter-spacing:-0.03125em;
    color:#a5a5a5; white-space:nowrap;
}
.footer__top-sep { width:1px; height:.5em; background:#a5a5a5; }
.footer__divider { width:100%; height:1px; background:#a5a5a5; opacity:.5; margin-bottom:1.25em; }
.footer__body { display:flex; align-items:center; gap:2.5em; }
.footer__logo { flex:none; display:inline-flex; align-items:center; width:7em; height:5.375em; }
.footer__logo img { width:100%; height:100%; object-fit:contain; }
.footer__info { display:flex; flex-direction:column; gap:.5em; max-width:60em; }
.footer__info-row { display:flex; align-items:center; flex-wrap:wrap; gap:1em; }
.footer__info-item {
    font-size:.875em; line-height:1.4; letter-spacing:-0.03125em;
    color:#a5a5a5; white-space:nowrap;
}
.footer__info-sep { width:1px; height:.5em; background:#656565; }
.footer__copyright {
    margin-top:2.3em;
    font-size:.875em; font-weight:500; line-height:1.4; letter-spacing:-0.03125em;
    color:#a5a5a5;
}
.footer__buttons {
    position:absolute; right:0; top:7.375em;
    display:flex; align-items:center; gap:1em;
}
.footer__btn {
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #fff; border-radius:2.5em;
    width: 9.625em; height: 3.125em;
    font-weight:500; line-height:1.4; letter-spacing:-0.03125em;
    color:#fff; white-space:nowrap;
    background:transparent; cursor:pointer;
    transition:background .15s, color .15s;
}
.footer__btn:hover { background:#fff; color:#353535; }
.footer__btn--top {
    width:3.125em; height:3.125em; padding:0;
    background-color: #656566;
    border-color : #656565;
    border-radius:50%;
}
.footer__btn--top svg { width:.875em; height:.4375em; }
.footer__btn--top path {transition: 0.15s;}
.footer__btn--top:hover path {
    stroke: #000;
}



.product-lead {
    position:relative;
    min-height:12.5em;                              /* 200px */
    overflow:hidden;
}
.product-lead__bg {
    position:absolute; inset:0;
    background-image:url('./img/lead-texture.jpg');
    background-size:cover; background-position:center;    
}
.product-lead__inner {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:4em 16px;                                  /* 64px top/bottom */
    text-align:center;
}
.product-lead__text {
    font-size:1.25em; font-weight:500;              /* 20px */
    line-height:1.8; letter-spacing:-0.03125em;
    color:#656565;
}

/* Swiper 영역 */
.product-swiper {
    position:relative;
    padding:0 3.75em 6.25em;                               /* 좌우 40px + 여백 20px */
    margin-bottom: 6.25em;
    border-bottom:1px solid #ddd
}

.product-swiper--sm {
    padding-bottom: 3.75em;
    margin-bottom: 3.75em;
}

.product-swiper .swiper { overflow:hidden; }
.product-swiper .swiper-wrapper { align-items:stretch; }
.product-swiper .swiper-slide {
    height:auto;
}

.product-main {
    overflow: hidden;
}

/* 슬라이드 카드 */
.product-card {
    display:flex; flex-direction:column;
    min-height:27.125em;                            /* 434px */
    background:#FFFFFF;
    border:1px solid #DDDDDD;
    height: 100%;
    opacity:.5;
    cursor: pointer;
    transition:opacity .3s, background .3s, border-color .3s, color .3s;
}
.product-swiper .swiper-slide-active .product-card {
    opacity:1;
}
.product-swiper .swiper-slide-active .product-card__body {
    background:#00A1E9;
    border-color:transparent;
}
.product-card__photo {
    width:100%; aspect-ratio:358/320;                /* 카드 이미지 비율 358:320 */
    overflow:hidden;
}
.product-card__photo img {
    width:100%; height:100%;
    object-fit:cover; display:block;
}
.product-card__body {
    padding:1.75em;                                 /* 28px */
    display:flex; flex-direction:column;
    flex:1;
    gap:.25em;                                      /* 4px */
}
.product-card__en {
    font-size:1em; font-weight:500;                 /* 16px */
    line-height:1.4; letter-spacing:-0.03125em;
    color:#00A1E9;
}
.product-card__ko {
    font-size:1.25em; font-weight:700;              /* 20px */
    line-height:1.6; letter-spacing:-0.03125em;
    color:#353535;
}
.product-swiper .swiper-slide-active .product-card__en,
.product-swiper .swiper-slide-active .product-card__ko {
    color:#FFFFFF;
}

/* Swiper 화살표 */
.product-swiper__nav {
    position:absolute; top:50%;
    transform:translateY(-50%);
    opacity: .75;
    width:2.5em; height:2.5em;                      /* 40px */
    padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--main-color); cursor:pointer;
    z-index:2;
    transition:.15s;
}
.product-swiper__nav--prev { left:0; }
.product-swiper__nav--next { right:0; }

.product-swiper__nav img {
    width: 1.75em;
    filter:brightness(0) invert(1)
}

@media(hover:hover) {
    .product-card:hover {
        opacity: 1;
        background-color: var(--main-color);
    }

    .product-card:hover .product-card__en,
    .product-card:hover .product-card__ko {
        color: #fff;
    }

    .product-swiper__nav:hover {
        opacity: 1;
    }
}
/* ==================================================================
 * Responsive — 1280 / 1080 / 768 / 500
 * ================================================================== */

/* ----- 1280 ----- */
@media(max-width:1280px){
    /* Header */
    .header__inner { height:6.25em; padding:0 4%; }
    .header__nav { display:none; }
    .header__contact { width:auto; padding:0 1.25em; height:3em; font-size:.95em; }
    .header__hamburger { width:3em; height:3em; }

    /* Sub Visual */
    .sub-visual { min-height:30em; padding-top:6.25em; }
    .sub-visual__inner { padding-top:5em; }
    .sub-visual__title { font-size:3.5em; }

    /* Sub Hero / Sub Title */
    .sub-hero { gap:60px; min-height:18em; }
    .sub-hero__inner { padding-top:4.5em; }
    .sub-hero__title { font-size:3em; white-space:normal; }
    .sub-hero__lead { font-size:1.875em; }
    .sub-title__inner { padding:4.5em 0; gap:2em; }
    .sub-title__ko { font-size:2.75em; white-space:normal; }

    /* Footer */
    .footer__buttons { position:static; margin-top:1.75em; justify-content:flex-end; }

    /* Product Swiper */
    .product-swiper { padding:0 2.5em 4.5em; margin-bottom:4.5em; }
    .product-card { min-height:auto; }
}

/* ----- 1080 ----- */
@media(max-width:1080px){
    .sub-visual { min-height:26em; }
    .sub-visual__title { font-size:3em; }

    .sub-hero { gap:48px; min-height:16em; }
    .sub-hero__inner { padding-top:4em; }
    .sub-hero__title { font-size:2.625em; }
    .sub-hero__lead { font-size:1.625em; }

    .sub-title { min-height:16em; }
    .sub-title__inner { padding:4em 0; gap:1.5em; }
    .sub-title__ko { font-size:2.375em; }
    .sub-title__en { font-size:1.125em; }

    .sec-title { gap:1em; }
    .sec-title__bar { width:.1875em; height:1.875em; }
    .sec-title__text { font-size:2.125em; }

    .breadcrumb { font-size:1.125em; }

    /* Sub Nav 줄어듦 */
    .sub-nav__link { height:3.25em; font-size:.95em; }
    .sub-nav__link--active { height:4em; }

    /* Content Tab */
    .content-tab__link { width:14em; height:3.25em; font-size:.95em; }

    /* Footer */
    .footer__body { gap:1.75em; }
    .footer__btn { width:8.5em; height:2.875em; font-size:.95em; }

    /* Product */
    .product-lead { min-height:10em; }
    .product-lead__inner { padding:3em 16px; }
    .product-lead__text { font-size:1.125em; line-height:1.7; }

    .product-swiper { padding:0 2em 3.75em; margin-bottom:3.75em; }
    .product-card__body { padding:1.25em; }
}

/* ----- 768 ----- */
@media(max-width:768px){
    /* Header */
    .header__inner { height:5em; padding:0 5%; }
    .header__logo img { width:5em; }
    .header__contact { font-size:.875em; padding:0 1em; height:2.625em; }
    .header__hamburger { width:2.625em; height:2.625em; }
    .header--active .header__inner { height:4.5em; }

    /* Sub Visual */
    .sub-visual { min-height:20em; padding-top:5em; }
    .sub-visual__inner { padding-top:3.5em; }
    .sub-visual__title { font-size:2.25em; }

    /* Sub Nav (Tab) — 가로 스크롤 */
    .sub-nav__list { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .sub-nav__list::-webkit-scrollbar { display:none; }
    .sub-nav__link { padding:0 1.25em; height:2.875em; font-size:.875em; }
    .sub-nav__link--active { height:3.375em; }

    /* Content Tab — 가로 스크롤 */
    .content-tab { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .content-tab::-webkit-scrollbar { display:none; }
    .content-tab__list { width:max-content; min-width:100%; flex-wrap:nowrap; }
    .content-tab__item { flex:0 0 auto; }
    .content-tab__link { width:auto; padding:0 1.5em; height:2.875em; font-size:1.0625em; }

    /* Sub Hero / Sub Title */
    .sub-hero { gap:32px; min-height:auto;}
    .sub-hero__inner { padding-top:3em; padding-left:5%; padding-right:5%; }
    .sub-hero__title { font-size:2em; }
    .sub-hero__lead { font-size:1.25em; }

    .sub-title { min-height:12em; }
    .sub-title__inner { padding:3em 5%; gap:1em; }
    .sub-title__ko { font-size:1.75em; }
    .sub-title__en { font-size:1em; }

    /* Sec Title */
    .sec-title { gap:.75em; }
    .sec-title__bar { width:3px; height:1.5em; }
    .sec-title__text { font-size:1.625em; }

    /* Breadcrumb */
    .breadcrumb { font-size:1em; gap:.4em; }
    .breadcrumb__arrow { width:1.4em; height:1.4em; }

    /* Footer */
    .footer { padding:2em 0 2em; }
    .footer__top { gap:.5em; flex-wrap:wrap; padding-bottom:1em; margin-bottom:1em; }
    .footer__top-link { font-size:.8125em; }
    .footer__body { flex-direction:column; align-items:flex-start; gap:1.25em; }
    .footer__logo { width:5.5em; height:4em; }
    .footer__info-row { gap:.5em .75em; }
    .footer__info-item { font-size:.8125em; }
    .footer__copyright { font-size:.8125em; margin-top:1.5em; }
    .footer__buttons { width:100%; flex-wrap:wrap; gap:.625em; justify-content:flex-start; margin-top:1.5em; }
    .footer__btn { font-size:.875em; width:auto; padding:0 1em; height:2.625em; flex:1 1 auto; }
    .footer__btn--top { width:2.625em; height:2.625em; flex:0 0 2.625em; padding:0; }

    /* Product Lead / Swiper */
    .product-lead { min-height:8em; }
    .product-lead__inner { padding:2.25em 16px; }
    .product-lead__text { font-size:1em; }

    .product-swiper { padding:0 0 2.75em; margin-bottom:2.75em; }
    .product-swiper__nav { width:2em; height:2em; }
    .product-swiper__nav--prev { left:.25em; }
    .product-swiper__nav--next { right:.25em; }
    .product-card__body { padding:1em; }
    .product-card__ko { font-size:1.125em; }
}

/* ----- 500 ----- */
@media(max-width:500px){
    .sub-visual { min-height:16em; padding-top:4.5em; }
    .sub-visual__inner { padding-top:2.5em; }
    .sub-visual__title { font-size:1.875em; }

    .sub-hero { gap:24px; }
    .sub-hero__inner { padding-top:2.25em; }
    .sub-hero__title { font-size:1.625em; }
    .sub-hero__lead { font-size:1.0625em; }

    .sub-title { min-height:10em; }
    .sub-title__inner { padding:2.5em 5%; }
    .sub-title__ko { font-size:1.5em; }

    .sec-title__text { font-size:1.375em; }

    .footer__top { gap:.4em .5em; }
    .footer__top-link { font-size:.75em; }
    .footer__top-sep { display:none; }

}