@charset "utf-8";
.product-hero-section {background-image: url(/img/sub/product-hero-bg.webp);}
/* 생산제품 */
.product-intro-section .inner {display: flex; align-items: flex-start; column-gap: var(--space-100); justify-content: space-between;}
.product-intro-section .img-wrap {width: 50%; max-width: 538px; height: auto; aspect-ratio: 538/339;}
.product-intro-section .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.product-features-section .features-list {margin-top: var(--fs-40); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-20); row-gap: var(--fs-28);}
.product-features-section .features-list2 {grid-template-columns: repeat(2, 1fr);}
.product-features-section .features-card {padding: var(--fs-40) var(--fs-30); border: 1px solid var(--color-border1); background-color: var(--color-white); display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px;}
.product-features-section .features-card .num {color: var(--color-font6);}
.product-features-section .features-card .features-card-subtit {color: var(--color-static1);}
/* 제품 소개 - 층 구조 (텍스트 포함 이미지) */
.product-overview-section .layer-figure {margin: var(--fs-40) auto 0; width: fit-content; max-width: 100%;}
.product-overview-section .layer-figure img {max-width: 100%; height: auto;}
.product-details-section .code-figure {margin-top: var(--fs-40);}
.product-details-section .code-box {padding: var(--space-60) var(--fs-40); border: 1px solid var(--color-border1); background-color: var(--color-white);}
.product-details-section .code-list {display: flex; align-items: start;}
.product-details-section .code-item {flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;}
.product-details-section .code-key {text-decoration: underline;}
.product-details-section .code-item.is-name .code-key {color: var(--color-static1);}
.product-details-section .code-item.is-copper .code-key {color: var(--color-static5);}
.product-details-section .code-item.is-film .code-key {color: var(--color-static2);}
.product-details-section .code-item.is-etc .code-key {color: var(--color-font3);}
.product-details-section .code-item.is-type .code-key {color: var(--color-font1);}
.product-details-section .code-label {display: flex; flex-direction: column; align-items: center;}
.product-details-section .code-label::before {content: ''; width: 1px; height: var(--fs-30); background-color: var(--color-border2); display: block; margin-block: var(--fs-20);}
.product-details-section .code-label2 {color: var(--color-font2);}
.product-details-section .code-desc-list {margin-top: var(--fs-20); display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px;}
.product-details-section .code-desc {position: relative; padding-left: 15px; text-align: left;}
.product-details-section .code-desc::before {content: ''; display: block; width: 5px; height: 5px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: var(--color-static1);}
.product-details-section .code-desc-txt {color: var(--color-font3);}
.product-details-section .code-note {margin-top: var(--fs-40); text-align: right; color: var(--color-font3);}
.product-lineup-section .lineup-list {margin-top: var(--fs-40); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-60);}
.product-lineup-section .lineup-item {border-bottom: 1px solid var(--color-border1); padding-block: var(--fs-20); display: flex; align-items: center; column-gap: var(--fs-30); color: var(--color-static5);}
.product-lineup-section .lineup-item:nth-child(even) {color: var(--color-static1);}
.product-lineup-section .lineup-ico {width: 16px; height: 16px; flex-shrink: 0;}
.product-specs-section .custom-table-wrap {margin-top: var(--fs-40);}
.product-specs-section .custom-table th {font-size: var(--fs-18);}
.product-specs-section .custom-table th:not(.group-th) {background-color: var(--color-white); color: var(--color-font1); border-right: 1px solid var(--color-border1);}
.product-specs-section .custom-table td {color: var(--color-font3);}
.product-specs-section .custom-table td > * + * {margin-top: 0;}
.product-use-section .use-list {margin-top: var(--fs-40); display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--fs-20);}
.product-use-section .use-item {width: 25%; position: relative; padding: var(--fs-30) var(--fs-12); display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: var(--fs-14);}
.product-use-section .use-item::before {content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: var(--color-border1);}
.product-use-section .use-item:first-child::before {content: none;}
.product-use-section .use-item:nth-child(5) {grid-column: 2 / span 2;}
.product-use-section .use-item:nth-child(5)::before {content: none;}
.product-use-section .use-item .ico-box {flex-shrink: 0; background-color: var(--color-font6); width: var(--fs-52); height: var(--fs-52); display: flex; align-items: center; justify-content: center;}
.product-use-section .use-item .ico-box::after {right: -2px; top: -2px;}
.product-use-section .use-item .txt-wrap {display: flex; flex-direction: column; row-gap: var(--fs-14);}
.product-use-section .use-item .txt-wrap span {color: var(--color-font3);}

.product-use-section .use-list2 .use-item {width: 20%;}
.product-use-section .use-list2 .use-item:nth-child(5)::before {content: '';}

/* 관련제품 */
.product-tab-section {padding-bottom: 0;}
.product-table-section {padding-block: var(--fs-30) !important;}
.product-table-section .custom-table-wrap {margin-top: var(--fs-40);}
/* 응용분야 */
.application-section .img-wrap {margin-top: var(--fs-40); width: 100%; height: auto; aspect-ratio: 1320/742;}
.application-section .img-wrap img {width: 100%; height: 100%; object-fit: contain;}

@media screen and (max-width: 1024px) {
    .product-intro-section .inner {flex-direction: column; row-gap: 40px;}
    .product-intro-section .img-wrap {width: 100%;}
    .product-features-section .features-list {grid-template-columns: repeat(2, 1fr);}
    .product-details-section .code-box {padding: 30px 24px;}
    .product-lineup-section .lineup-list {column-gap: 40px;}
}

@media screen and (max-width: 768px) {
    .product-features-section .features-list {grid-template-columns: repeat(1, 1fr);}
    .product-details-section .code-box {padding: 24px 20px;}
    .product-lineup-section .lineup-list {column-gap: 32px;}

    .product-use-section .use-list {display: flex; flex-wrap: wrap;}
    .product-use-section .use-item,
    .product-use-section .use-list2 .use-item {width: 50%;}
    .product-use-section .use-item:nth-child(odd)::before,
    .product-use-section .use-list2 .use-item:nth-child(odd)::before {content: none;}

    .product-details-section .code-list {flex-direction: column; row-gap: 10px;}
    .product-details-section .code-item,
    .product-details-section .code-label {flex-direction: row;}
    .product-details-section .code-item {align-items: flex-start; flex-wrap: wrap;}
    .product-details-section .code-key {height: 40px; width: 36px; flex-shrink: 0;}
    .product-details-section .code-label {height: 40px; width: 160px; flex-shrink: 0;}
    .product-details-section .code-label2 {width: 100%; padding-left: 96px; margin-top: 4px; font-size: 14px; text-align: left;}
    .product-details-section .code-label::before {width: var(--fs-30); height: 1px; margin-inline: var(--fs-20);}
    .product-details-section .code-desc-list {width: 100%; padding-left: 96px; margin-top: 4px;}
}

@media screen and (max-width: 480px) {
    .product-tab-section .inner {width: 100%;}
    .product-tab-section .tab-list .tab {flex: 1;}
    .product-lineup-section .lineup-list {grid-template-columns: repeat(1, 1fr);}

    .product-use-section .use-item,
    .product-use-section .use-list2 .use-item {width: 100%;}
    .product-use-section .use-item::before,
    .product-use-section .use-list2 .use-item::before {content: none;}
}

@media screen and (max-width: 375px) {
    .product-table-section .custom-table td .square-btn {width: 100%;}
    .product-table-section .custom-table td .square-btn img {display: none;}
}