@charset "utf-8";

/* Base */
.subpage {
  --primary: #0057A3;
  --primary-light: #3584FB;
  --primary-lighter: #00B9FF;
  padding-block: 130px 150px;
}

.breadcrumb {display: flex; font-size: 15px; font-weight: 500; color: #878787; justify-content: flex-end;}
.breadcrumb span {display: flex; align-items: center;}
.breadcrumb span:not(:last-child)::after {content: ''; display: block; width: 0; height: 0; border-left: 8px solid #878787; border-block: 5px solid transparent; margin: 0 0.7em;}
.breadcrumb span:last-child {font-weight: 700;}

.sp-head-title {padding-block: 110px 100px; text-align: center;}
.sp-head-title .tag {display: block; font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--primary); margin-bottom: 0.5em;}
.sp-head-title .title {font-size: 55px; font-weight: 700; line-height: 1.3; color: black;}
.sp-head-desc {font-size: 18px;}

.tab-buttons {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 80px;}
.tab-buttons .button {width: calc((100% - 80px) / 5); display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #dadada; border-radius: 100px; height: 50px; font-size: 18px; color: #adadad; font-weight: 600; line-height: 1.3;}
.tab-buttons .button.active {border: 2px solid var(--primary); color: var(--primary); font-weight: 700;}

.anchor {scroll-margin-top: 150px;}

@media screen and (max-width: 1399px) {
  .subpage {padding-block: 90px 120px;}

  .sp-head-title {padding-block: 90px 50px;}
  .sp-head-title .tag {font-size: 20px;}
  .sp-head-title .title {font-size: 42px;}
  .sp-head-desc {font-size: 16px;}

  .tab-buttons {gap: 10px; margin-bottom: 60px;}
  .tab-buttons .button {width: calc((100% - 20px) / 3); font-size: 16px; height: 44px;}
}
@media screen and (max-width: 767px) {
  .subpage {padding-block: 80px 100px;}

  .sp-head-title {padding-block: 80px 40px;}
  .sp-head-title .tag {font-size: 15px;}
  .sp-head-title .title {font-size: 32px;}
  .sp-head-desc {font-size: 16px;}

  .tab-buttons {margin-bottom: 50px;}
  .tab-buttons .button {width: calc((100% - 10px) / 2);}
}



/* Greeting */
.greeting-content {display: flex; align-items: flex-start; gap: 80px; margin-bottom: 120px;}
.greeting-content .content .title {font-size: 32px; color: black; font-weight: 700; line-height: 1.3; margin-bottom: 1em;}
.greeting-content .content .title b {color: var(--primary);}
.greeting-content .content p {font-size: 22px; line-height: 1.8; margin-bottom: 0.8em;}
.greeting-content .content .sign-wrap {font-size: 22px; display: flex; align-items: center; gap: 0.6em; justify-content: flex-end;}
.greeting-content .content .sign-wrap .sign {margin-bottom: 0.8em;}

.greeting-banner {position: relative;}
.greeting-banner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.greeting-banner .content {position: relative; z-index: 10; color: white; display: flex; gap: 30px; justify-content: space-between; align-items: flex-start; padding: 118px 0 52px 0;}
.greeting-banner .content .title {font-size: 30px; line-height: 1.5; padding-top: 1.5em; font-weight: 400;}

@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}



/* History */
.hist {}
.hist__block:nth-child(even) {background: #F8F8F8;}
.hist__container {display: flex; position: relative; padding-block: 100px 120px;}
.hist__block:first-child .hist__container {padding-top: 0;}
.hist__container::before {position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #D8D8D8; content: '';}
.hist__head {width: 50%; padding-right: 150px; display: flex; flex-direction: column; align-items: flex-start;}
.hist__head .period {color: var(--primary); font-size: 22px; font-family: var(--ff-secondary); font-weight: 7600; line-height: 1.2; margin-bottom: 0.5em;}
.hist__head .slogan {font-size: 38px; font-weight: 700; line-height: 1.3; color: black; word-break: keep-all; margin-bottom: 1em; display: block;}
.hist__head .thumb {}
.hist__head .thumb-2 {margin-top: auto;}
.hist__body {width: 50%;}
.hist__body .year_ls {font-size: 18px;}
.hist__body .year_ls__item {position: relative; display: flex; gap: 15px; padding-left: 35px; padding-bottom: 40px;}
.hist__body .year_ls__item:last-child {padding-bottom: 0;}
.hist__body .year_ls__item::before {position: absolute; top: .75em; left: 0; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; content: ''; background: #DBDBDB;}
.hist__body .year_ls__item .year {font-weight: 700; position: absolute; top: 0; right: calc(100% + 35px);}
.hist__body .year_ls__item .month_ls__item {display: flex; gap: 30px; padding-bottom: 15px;}
.hist__body .year_ls__item .month_ls__item:last-child {padding-bottom: 0;}
.hist__body .year_ls__item .month_ls__item .month {width: 34px; font-weight: 700; color: var(--main-color); flex-shrink: 0;}
.hist__body .year_ls__item .month_ls__item .cont {}
.hist__body .year_ls__item .month_ls__item .cont > li:not(:last-child) {margin-bottom: 0.3em;}

.hist.bg .hist__head {}
.hist.bg .hist__head .sbj,
.hist.bg .hist__body,
.hist.bg .hist__body .year_ls__item .year {color: #fff;}
.hist.bg .hist__body .year_ls__item .month_ls__item .month {color: #008CF8;}
.hist.bg .hist__body .year_ls__item::before {border-color: #008CF8;}

@media screen and (max-width: 1399px) {
  .hist__head {padding-right: 120px;}
  .hist__head .period {font-size: 16px;}
  .hist__head .slogan {font-size: 24px;}
  .hist__body .year_ls {font-size: 15px;}
  .hist__body .year_ls__item {padding: 0 0 35px 35px;}
  .hist__body .year_ls__item .month_ls__item {gap: 20px;}
}
@media screen and (max-width: 767px) {
  .hist__container {flex-direction: column; gap: 20px;}
  .hist__container::before {left: 0px;}
  .hist:last-child .hist__container {padding-bottom: 100px;}
  .hist__head {padding-right: 0; width: 100%; padding-left: 25px; position: relative;}
  .hist__head::before {position: absolute; top: 9px; left: 0; content: ''; width: 21px; height: 21px; box-sizing: border-box; border-radius: 50%; background: white; border: 5px solid var(--primary); transform: translate(-50%, -50%);}
  .hist.bg .hist__head::before {border-color: #008CF8;}
  .hist__head .period {font-size: 16px;}
  .hist__head .slogan {font-size: 20px; margin-bottom: 0;}
  .hist__head .thumb {margin-block: 20px;}
  .hist__body {width: 100%;}
  .hist__body .year_ls {font-size: 14px;}
  .hist__body .year_ls__item {flex-direction: column; padding: 0 0 45px 18px; gap: 10px;}
  .hist__body .year_ls__item::before {top: 14px;}
  .hist__body .year_ls__item .year {position: static; display: block; font-size: 16px;}
}


/* Organization */
.org {position: relative; padding-block: 100px 130px;}
.org .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.org .slogan {color: white; font-size: 34px; font-weight: 500;}
.org .diagram {display: block; margin-inline: auto; margin-top: -100px;}
@media screen and (max-width: 1399px) {
  .org {padding-block: 80px 100px;}
  .org .slogan {font-size: 24px; text-align: center; margin-bottom: 2em;}
  .org .diagram {margin-top: 0;}
}
@media screen and (max-width: 767px) {
  .org .slogan {font-size: 20px;}
}



/* CI */
.ci-banner {position: relative; padding-block: 60px;}
.ci-banner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.ci-banner .content {display: flex; align-items: center; gap: 50px; justify-content: space-between; color: white;}
.ci-banner .content .hanja {display: flex; text-align: center; gap: 35px; padding-top: 30px; flex-shrink: 0;}
.ci-banner .content .hanja .item {}
.ci-banner .content .hanja .item img {display: block; margin-bottom: 15px;}
.ci-banner .content .hanja .item span {display: block; opacity: 0.8; font-size: 18px;}
.ci-banner .content .slogan {font-size: 28px; line-height: 1.5;}

.ci-contents {padding-block: 110px 0;}
.ci-section {display: grid; grid-template-columns: 170px 1fr; gap: 80px;}
.ci-section-title {font-size: 30px; font-weight: 700; color: var(--primary); padding-top: 0.8em; line-height: 1.3; border-top: 4px solid #CBD9EB; text-transform: uppercase;}
.ci-section-body {}
.ci-article {padding-block: 35px 66px; display: grid; grid-template-columns: 386fr 534fr; border-top: 1px solid #B7B7B7; gap: 15px;}
.ci-section:last-child .ci-article:last-child {padding-bottom: 0;}
.ci-article-content {}
.ci-article-content .title {font-size: 28px; color: black; line-height: 1.3; margin-bottom: 0.3em; text-transform: uppercase;}
.ci-article-content .desc {font-size: 18px; color: #878787;}
.ci-article-thumb {}
.color-sys {display: grid; grid-template-columns: 29fr 24fr;}
.color-sys .color-box {background: #0B4EA2; color: white; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 500;}
.color-sys .color-codes {padding: 35px 50px; border: 1px solid #D4D4D4;}
.color-sys .color-codes > li {}
.color-sys .color-codes > li .key {}
.color-sys .color-codes > li .val {}

@media screen and (max-width: 1399px) {
  .ci-banner .content {flex-direction: column; align-items: center; text-align: center; gap: 30px;}
  .ci-banner .content .hanja .item img {width: 80px;}
  .ci-banner .content .slogan {font-size: 24px;}

  .ci-section {gap: 40px;}
  .ci-section-title {font-size: 24px; border-top-width: 2px;}
  .ci-article {padding-block: 25px 50px; grid-template-columns: repeat(1, 1fr);}
  .ci-article-content .title {font-size: 20px;}
  .ci-article-content .desc {font-size: 16px;}
  .color-sys .color-codes {padding: 35px 24px;}
}
@media screen and (max-width: 767px) {
  .ci-banner .content .hanja {gap: 15px;}
  .ci-banner .content .hanja .item img {width: 60px;}
  .ci-banner .content .slogan {font-size: 20px;}

  .ci-contents {padding-top: 80px;}
  .ci-section {grid-template-columns: repeat(1, 1fr); gap: 20px;}
  .ci-section-title {font-size: 20px;}
  .ci-article {padding-block: 15px 60px;}
  .ci-article-content .title {font-size: 18px;}
  .color-sys {grid-template-columns: repeat(1, 1fr);}
  .color-sys .color-box {padding-block: 50px;}
  .color-sys .color-codes {padding: 20px;}
}



/* Global network */
.global-network-banner {background: #F8F8F8; padding-block: 40px 110px;}
.global-network-banner .diagram  {display: block; width: 1400px; margin-inline: auto;}

@media screen and (max-width: 1399px) {
  .global-network-banner {padding-block: 70px;}
}
@media screen and (max-width: 767px) {
  .global-network-banner {padding-block: 60px;}
}



/* Location */
.map-container {position: relative; overflow: hidden; width: 100%; height: 400px; background: #f4f3f2;}
.map-container :where(.map, iframe) {position: absolute; top: 50%; left: 50%; width: calc(100% + 500px); height: calc(100% + 500px); transform: translate(-50%, -50%);}

.location-map {height: 460px; position: relative; z-index: 10;}
.location-info {position: relative;}
.location-info-table {font-size: 20px; width: 100%; background: #fff;}
.location-info-table tr {border-bottom: 1px solid #D1D1D1;}
.location-info-table :where(th, td) {padding: 20px 24px;}
.location-info-table th {background: #F8F8F8; width: 140px;}
.location-info-table .company-name {color: var(--primary);}

.location-way {width: 100%; word-break: keep-all;}
.location-way tr {border-block: 1px solid #D8D8D8;}
.location-way th {color: black; text-align: center;}
.location-way :where(th, td) {padding: 2em;}
.location-way thead {background: #F8F8F8;}
.location-way thead th {font-size: 20px; font-weight: 700; padding: 0.6em 1em;}
.location-way tbody {}
.location-way tbody th {font-size: 20px; position: relative;}
.location-way tbody th::after {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); content: ''; display: block; background: #D8D8D8; height: calc(100% - 30px); width: 1px;}
.location-way tbody td {font-size: 20px;}

@media screen and (max-width: 1399px) {
  .location-info-table {display: block; font-size: 15px;}
  .location-info-table tbody {display: block; width: 100%;}
  .location-info-table tr {display: grid; grid-template-columns: 100px 1fr; width: 100%; border: none;}
  .location-info-table :where(th, td) {padding: 15px 15px; border-bottom: 1px solid #d1d1d1;}
  .location-info-table tr th {text-align: left!important; width: 100%;}

  .location-way :where(th, td) {padding: 1em;}
  .location-way thead th {font-size: 16px;}
  .location-way tbody th {font-size: 14px;}
  .location-way tbody td {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .location-map {height: 360px;}
  .location-info {padding-inline: 0; margin-top: 0;}
  .location-info-table {font-size: 14px;}
  .location-info-table tr {grid-template-columns: 80px 1fr;}
  .location-info-table :where(th, td) {padding: 10px; line-height: 1.5;}
  .location-info-table .company-name {display: block;}
}



/* Major customer */
.major-customer-section {padding-bottom: 150px;}
.major-customer-section.banner {background: #f9f8f8; padding-block: 100px;}
.major-customer-title {font-size: 38px; margin-bottom: 1em;}
.major-customer-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.major-customer-list > li {border-radius: 10px; overflow: hidden; border: 1px solid #dfdfdf;}
.major-customer-list > li img {display: block; width: 100%; mix-blend-mode: multiply;}
.major-customer-noti {font-size: 17px; color: #9F9F9F; margin-top: 1em;}

@media screen and (max-width: 1399px) {
  .major-customer-section {padding-bottom: 90px;}
  .major-customer-section.banner {padding-block: 80px;}
  .major-customer-title {font-size: 24px;}
  .major-customer-list {gap: 10px;}
  .major-customer-noti {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .major-customer-section {padding-bottom: 70px;}
  .major-customer-section.banner {padding-block: 60px;}
  .major-customer-title {font-size: 20px;}
  .major-customer-list {gap: 5px; grid-template-columns: repeat(3, 1fr);}
}



/* Product lineup */
.subpage:has(.lineup-intro) {padding-top: 100px;}
.subpage.heating {--primary: #FF9900; --primary-light: #FFB300; --primary-lighter: #FF9900;}
.lineup-intro {position: relative; height: 774px;}
.lineup-intro .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.lineup-intro .content {color: white; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding-bottom: 115px;}
.lineup-intro .sp-head-title {text-align: left; padding-block: 160px 40px;}
.lineup-intro .sp-head-title .tag {color: var(--primary-light);}
.lineup-intro .sp-head-title .title {color: white; font-weight: 300;}
.lineup-intro .sp-head-desc {opacity: 0.8; margin-bottom: 1em;}
.lineup-intro .icons {display: flex; margin-top: auto;}
.lineup-intro .icons > li {text-align: center; width: 170px;}
.lineup-intro .icons > li .icon {display: block; 
  margin-inline: auto;}
.lineup-intro .icons > li span {display: block; margin-top: 0.2em; font-weight: 700;}

.lineup-section {padding-top: 130px;}
.lineup-section .section-title {font-size: 42px; text-transform: uppercase; color: black; margin-bottom: 70px;}
.lineup-section .section-title small {font-size: 0.56em; color: #B2B2B2; display: block;}

.prod-lineup {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 25px;}
.prod-lineup.col-3 {grid-template-columns: repeat(3, 1fr);}
.prod-lineup > li {}
.prod-lineup > li > a {display: flex; flex-direction: column; align-items: flex-start; position: relative; border-top: 4px solid var(--primary-light); background: #F6F6F6; height: 100%;}
.prod-lineup > li > a .head {padding: 22px 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; margin-bottom: 15px;}
.prod-lineup > li > a .head .title {font-size: 28px; font-weight: 700; color: black; word-break: keep-all;}
.prod-lineup > li > a .head .title .tag {display: block; color: var(--primary-light); font-weight: 700; line-height: 1; margin-bottom: 0.3em; font-size: 0.714em;}
.prod-lineup > li > a .head svg {}
.prod-lineup > li > a .thumb {margin-top: auto;}


@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .subpage:has(.lineup-intro) {padding-top: 60px;}
  .lineup-intro {height: 550px;}
  .lineup-intro .content {padding-bottom: 60px;}
  .lineup-intro .sp-head-title {padding-block: 70px 30px;}
  .lineup-intro .icons {gap: 10px;}
  .lineup-intro .icons > li {width: 130px; padding: 20px 15px; background: rgb(0,0,0,0.6); border-radius: 10px; backdrop-filter: blur(5px);}
  .lineup-intro .icons > li span {font-size: 15px;}

  .lineup-section {padding-top: 90px;}
  .lineup-section .section-title {font-size: 34px; margin-bottom: 30px;}

  .prod-lineup {grid-template-columns: repeat(3, 1fr)!important; gap: 40px 15px;}
  .prod-lineup > li > a .head {padding: 20px 15px;}
  .prod-lineup > li > a .head .title {font-size: 20px;}
  .prod-lineup > li > a .head svg {width: 20px;}
}
@media screen and (max-width: 767px) {
  .subpage:has(.lineup-intro) {padding-top: 50px;}
  .lineup-intro .content {padding-bottom: 30px;}
  .lineup-intro {height: auto;}
  .lineup-intro .icons {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 50px;}
  .lineup-intro .icons > li {padding: 15px 10px;}
  .lineup-intro .icons > li .icon {width: 50px;}
  .lineup-intro .icons > li span {font-size: 14px;}

  .lineup-section {padding-top:60px;}
  .lineup-section .section-title {font-size: 24px; margin-bottom: 20px;}

  .prod-lineup {grid-template-columns: repeat(2, 1fr)!important; gap: 40px 10px;}
  .prod-lineup > li > a {border-top-width: 2px;}
  .prod-lineup > li > a .head {padding: 15px;}
  .prod-lineup > li > a .head .title {font-size: 16px;}
  .prod-lineup > li > a .head svg {display: none;}
}


/* Product LNB */
.subpage:has(.prd-lnb-bar) {padding-top: 0px;}
body:has(.prd-lnb-bar) .header {position: relative;}
.prd-lnb-bar {
  --theme-1: var(--primary-light);
  --theme-2: var(--primary);
  --bg: #fff; 
  --dropdown-bg: #f9f8f8; 
  --border-color: #e0e0e0; 
  position: sticky; top: 0; left: 0; width: 100%; background: var(--bg); font-size: 17px; color: var(--gray-dark); border-top: 1px solid #BEBEBE; z-index: 5555;
}
.prd-lnb-bar-head {height: 60px; display: flex; position: relative; z-index: 100;}
.prd-lnb-bar-head .cur-category {width: 200px; display: flex; align-items: center; justify-content: flex-start; padding:0 20px; color:#8a8a8a; border-left: 1px solid #dedede; position: relative;}
.prd-lnb-bar-head .cur-category::before {content:""; position: absolute; top:50%; right:0; width: 1px; height: 20px; background: #BEBEBE; transform: translate(0,-50%);}
.prd-lnb-bar-head .cur-category span {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.prd-lnb-bar-head .dropdown {--padding-inline: 1em; position: relative;}
.prd-lnb-bar-head .dropdown-toggle {padding-inline: var(--padding-inline); display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 2em; min-width: 200px; border-inline: 1px solid var(--border-color); border:none; border-right: 1px solid #dedede;}
.prd-lnb-bar-head .dropdown-toggle .text {color: var(--theme-1); font-weight: 700; font-family: var(--ff-primary);}
.prd-lnb-bar-head .dropdown-toggle .icon {flex-shrink: 0;}
.prd-lnb-bar-head .dropdown-menu {position: absolute; top: 100%; left: 0; background: var(--dropdown-bg); padding-block: 0.8em; padding-inline: 1.2em 2em; display: none; border-top: 1px solid var(--border-color);}
.prd-lnb-bar-head .dropdown:hover .dropdown-menu {display: block;}
.prd-lnb-bar-head .dropdown-menu a {display: block; padding-block: .2em; white-space: nowrap;}

.prd-lnb-bar-head .all-prd {display: flex; align-items: center; gap: 1em; font-size: 15px; margin-left: auto; border-inline: 1px solid var(--border-color); padding-inline: 2em;}

.prd-tab-btns {background: var(--theme-1); height: 44px;}
.prd-tab-btns .container--wide {display: flex; height: 100%;}
.prd-tab-btns .btn {display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; border-right: 1px solid rgb(255,255,255,.5); color: rgba(255, 255, 255, 0.4); font-size: 15px; font-weight: 700;}
.prd-tab-btns .btn:first-child {border-left: 1px solid rgb(255,255,255,.5);}
.prd-tab-btns .btn.active {background: var(--theme-2); z-index: 10; color: #FFFFFF;}

@media (hover: hover) {
  .prd-lnb-bar-head .dropdown-menu a:hover {opacity: .7;}
  .prd-tab-btns .btn:not(.active):hover {opacity: .7;}
  .prd-lnb-bar-head .all-prd:hover {color: var(--primary);}
  .prd-lnb-bar-head .all-prd:hover :where(path, line) {stroke: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .prd-lnb-bar {font-size: 16px;}
  .prd-lnb-bar .container--wide {width: clamp(100%, 100%, 100%)!important;}
}
@media screen and (max-width: 767px) {
  .prd-lnb-bar {display: none;}
}



/* Product Detail */
.prd-detail-intro {position: relative; padding-block: 110px; color: white; word-break: keep-all;}
.prd-detail-intro .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.prd-detail-intro .content {position: relative;}
.prd-detail-intro .content .head {width: 50%; margin-bottom: 130px;}
.prd-detail-intro .content .head .tag {display: block; font-size: 21px; font-family: var(--ff-secondary); text-transform: uppercase; font-weight: 600; opacity: 0.46; margin-bottom: 0.6em;}
.prd-detail-intro .content .head .title {font-size: 60px; font-weight: 700; display: block; line-height: 1.3; margin-bottom: 0.8em;}
.prd-detail-intro .content .head .subtitle {font-size: 36px; color: var(--primary-lighter); font-weight: 700; line-height: 1.3; margin-bottom: 0.5em; display: block;}
.prd-detail-intro .content .head .desc {font-size: 17px; line-height: 1.8;}
.prd-detail-intro .content .thumb {position: absolute; top: 0px; right: 0px;}

.prd-detail-intro .content .features {}
.prd-detail-intro .content .features-title {font-size: 36px; font-weight: 700; color: #434343; text-transform: uppercase; line-height: 1; margin-bottom: 0.7em;}
.prd-detail-intro .content .features .wrapper {display: flex; gap: 25px;}
.prd-detail-intro .content .features .wrapper .group {}
.prd-detail-intro .content .features .wrapper .group .title {color: var(--primary-lighter); font-size: 20px; font-weight: 700; margin-bottom: 0.3em;}
.prd-detail-intro .content .features .wrapper .group .cont {border-top: 2px solid #707070; padding-top: 15px; padding-right: 40px;}
.prd-detail-intro .content .features .wrapper .group .cont:has(.wrap) {display: flex; gap: 25px;}
.prd-detail-intro .content .features .wrapper .group .cont .tit {color: var(--primary-lighter); font-weight: 700; flex-shrink: 0;}
.prd-detail-intro .content .features .wrapper .group .cont .ls {}
.prd-detail-intro .content .features .wrapper .group .cont .ls > li {padding-left: 1em; position: relative;}
.prd-detail-intro .content .features .wrapper .group .cont .ls > li:not(:last-child) {margin-bottom: 0.4em;}
.prd-detail-intro .content .features .wrapper .group .cont .ls > li::before {position: absolute; top: 0.75em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: white; transform: translate(0, -50%); content: ''; display: block;}
.prd-detail-intro .content .features .wrapper .group .cont .wrap:has(.tit) {display: flex; gap: 20px;}
.prd-detail-intro .content .features .noti {color: #B2B2B2; margin-top: 2em; display: flex; gap: 1em;}

.prd-section-wrapper {padding-top: 150px; color: #575757;}
.prd-section {padding-bottom: 150px;}
.prd-section:last-child {padding-bottom: 0;}
.prd-section-head {margin-bottom: 67px; display: flex; justify-content: space-between; align-items: center;}
.prd-section-title {font-size: 42px; color: black; line-height: 1.3;}
.prd-section-title .title {text-transform: uppercase;}
.prd-section-title small {font-size: 0.6em; color: #B2B2B2;}

.prd-tab-buttons {display: flex; gap: 17px;}
.prd-tab-buttons.vertical {flex-direction: column; width: 240px;}
.prd-tab-buttons a {display: flex; align-items: center; justify-content: center; text-align: center; background: #EFEFEF; color: #B2B2B2; font-size: 20px; line-height: 1.3; min-width: 240px; min-height: 52px; padding: 0.3em 0.5em; text-align: center; display: flex; align-items: center; justify-content: center;}
.prd-tab-buttons a.active {background: black; color: white; font-weight: 700;}

.prd-spec-container {position: relative;}
.prd-spec-container .prd-tab-buttons {position: absolute; top: 0; left: 0; flex-direction: column; width: 240px;}
.prd-spec-table {
  --theme-primary: #00B9FF;
  --theme-primary-light: #E7F8FF;
  --theme-secondary: #3584FB;
  --theme-secondary-light: #ECF3FE;
  table-layout: fixed; 
  width: 100%; 
  line-height: 1.3;
}
.heating .prd-spec-table {
  --theme-primary: #FF8000;
  --theme-primary-light: #FFF3E7;
  --theme-secondary: #FF8000;
  --theme-secondary-light: #FFF3E7;
  table-layout: fixed; 
  width: 100%; 
  line-height: 1.3;
}
.prd-spec-table .col-th {width: 272px;}
.prd-spec-table colgroup:has(.col-th-2) .col-th {width: 162px;}
.prd-spec-table .col-th-2 {width: 110px;}
.prd-spec-table .col-th-3 {width: 124px;}
.prd-spec-table colgroup:has(.col-th-3) :is(.col-th, .col-th-2) {width: 124px;}
.prd-spec-table :where(tr) {border-bottom: 1px solid #afafaf;}
.prd-spec-table :where(th, td) {padding: 0.7em; border-right: 1px solid #E1E1E1;}
.prd-spec-table :where(th:last-child, td:last-child) {border-right: none;}
.prd-spec-table :where(th) {}
.prd-spec-table :where(td) {text-align: center;}
.prd-spec-table thead.thumb {}
.prd-spec-table thead.thumb tr {border-bottom: none;}
.prd-spec-table thead.thumb td {border-right: 9px solid white; padding: 0;}
.prd-spec-table thead.thumb th {border-top: 6px solid var(--theme-primary); padding-inline: 0;}
.prd-spec-table thead.thumb th:not(:last-child) {border-right: 6px solid white;}
.prd-spec-table thead.thumb th .tit {display: block; color: var(--theme-primary); font-size: 29px; font-weight: 700; line-height: 1.3; margin-bottom: 1em;}
.prd-spec-table thead.thumb th img {display: block; margin-inline: auto;}
.prd-spec-table thead.thumb th.theme-2 {border-top-color: var(--theme-secondary);}
.prd-spec-table thead.thumb th.theme-2 .tit {color: var(--theme-secondary);}
.prd-spec-table thead:not(.thumb) {font-size: 18px;}
.prd-spec-table thead:not(.thumb) tr {}
.prd-spec-table thead:not(.thumb) tr :where(.border-bottom),
.prd-spec-table thead:not(.thumb) tr:last-child :where(th, td) {border-bottom: 2px solid #757575;}
.prd-spec-table thead:not(.thumb) th {background: #F6F6F6; color: #575757}
.prd-spec-table thead:not(.thumb) td {font-weight: 700; color: var(--theme-primary); background: var(--theme-primary-light); border-bottom-color: var(--theme-primary)!important; border-left: 4px solid white;}
.prd-spec-table thead:not(.thumb) td.theme-2 {color: var(--theme-secondary); background: var(--theme-secondary-light); border-bottom-color: var(--theme-secondary);}
.prd-spec-table thead:not(.thumb) td:first-of-type {border-left: 9px solid white;}
.prd-spec-table tbody {}
.prd-spec-table tbody tr {}
.prd-spec-table tbody th {background: #ECECEC; color: #575757;}
.prd-spec-table tbody th.depth2 {background: #F4F4F4;}
.prd-spec-table tbody th.depth3 {background: #FCFCFC;}
.prd-spec-table tbody td {}
.prd-spec-table tbody td:first-of-type {border-left: 9px solid white;}
.prd-spec-caution,
.prd-spec-noti {font-size: 15px; color: #575757; text-align: right; margin-top: 1em; display: flex; gap: 0.5em; justify-content: flex-end;}
.prd-spec-noti::before {content: '※';}
.prd-spec-caution {justify-content: flex-start; text-align: left; gap: 1em;}
.prd-spec-caution::before {content: '주의'; font-weight: 700; flex-shrink: 0;}

.prd-flow-content {}
.prd-flow-visual {background: #FCFCFC; border: 1px solid #E1E1E1;}
.prd-flow-visual img {display: block; margin-inline: auto;}
.prd-flow-list {margin-top: 25px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 33px; color: #575757;}
.prd-flow-list > li {display: flex; gap: 17px; font-size: 20px; border-top: 1px solid #C8C8C8; align-items: center;}
.prd-flow-list > li:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {border-top: none;}
.prd-flow-list > li .num {width: 40px; height: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; background: #F3F3F3; color: #3584FB; font-weight: 700; flex-shrink: 0;}
.heating .prd-flow-list > li .num {color: var(--primary);}
.prd-flow-list > li .val {line-height: 1.3; padding-block: 0.5em;}

.prd-section.purpose {padding-block: 120px 160px; background: #F3F3F3;}
.prd-purpose-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;}
.prd-purpose-item {display: flex; flex-direction: column; border-bottom: 1px solid #707070;}
.prd-purpose-item .thumb {display: block; border-radius: 15px;}
.prd-purpose-item .ls {}
.prd-purpose-item .ls > li {border-bottom: 1px solid #707070; padding-block: 1.76em; line-height: 1.4; font-size: 17px; color: #575757;}
.prd-purpose-item .ls > li .tit {font-size: 20px; font-weight: 700; color: #575757; display: block; margin-bottom: 0.3em;}
.prd-purpose-item .ls > li:last-child {border-bottom: none;}

@media (hover: hover) {}
@media screen and (min-width: 1400px) {
  .prd-purpose-list.col-3 {grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 1399px) {
  .prd-detail-intro {padding-block: 120px 80px;}
  .prd-detail-intro .content .head {text-align: center; width: 100%; margin-bottom: 30px;}
  .prd-detail-intro .content .head .tag {font-size: 18px;}
  .prd-detail-intro .content .head .title {font-size: 42px;}
  .prd-detail-intro .content .head .subtitle {font-size: 28px;}
  .prd-detail-intro .content .head .desc {font-size: 16px;}
  .prd-detail-intro .content .thumb {position: static; margin-bottom: 30px; display: block; margin-inline: auto; width: 400px;}

  .prd-detail-intro .content .features {font-size: 14px;}
  .prd-detail-intro .content .features .wrapper {flex-direction:column;}
  .prd-detail-intro .content .features .wrapper .group .title {font-size: 18px;}
  .prd-detail-intro .content .features .wrapper .group .cont {padding-right: 0;}
  .prd-detail-intro .content .features .wrapper .group .cont .wrap {width: 100%;}
  .prd-detail-intro .content .features .wrapper .group .cont .wrap:has(.tit) {flex-direction: column; gap: 5px;}

  .prd-section-wrapper {padding-top: 100px;}
  .prd-section {padding-bottom: 90px;}
  .prd-section-head {margin-bottom: 40px;}
  .prd-section-title {font-size: 28px;}

  .prd-tab-buttons {gap: 5px;}
  .prd-tab-buttons a {font-size: 16px; min-height: 0; padding: 0.5em 1.2em; border-radius: 100px; min-width: 0;}

  .prd-spec-overflow {overflow-x: auto;}
  .prd-spec-overflow::before {content: '▶ 좌우로 스와이프해주세요.'; position: sticky; left: 0; top: 0; font-size: 14px; color: #B2B2B2; margin-bottom: 0.5em; display: block;}
  .prd-spec-table {font-size: 14px;}
  .prd-spec-overflow .prd-spec-table {min-width: 1024px;}
  .prd-spec-table .col-th {width: 150px;}
  .prd-spec-table colgroup:has(.col-th-2) .col-th {width: 100px;}
  .prd-spec-table .col-th-2 {width: 100px;}
  .prd-spec-table :where(th, td) {padding-inline: 0.3em;}
  .prd-spec-table thead:not(.thumb) {font-size: 14px;}
  .prd-spec-noti {font-size: 13px; text-align: left; justify-content: flex-start;}
  .prd-spec-container .prd-tab-buttons {flex-direction: row; position: relative; width: 100%; margin-bottom: 20px;}
  .prd-spec-table thead.thumb th {border-top-width: 2px;}
  .prd-spec-table thead.thumb th .tit {font-size: 15px;}
  .prd-spec-table thead.thumb th img {width: 320px;}

  .prd-flow-list {grid-template-columns: repeat(3, 1fr); gap: 0;}
  .prd-flow-list > li {font-size: 16px; border-block: 1px solid #C8C8C8!important; margin-top: -1px; background: white;}

  .prd-section.purpose {padding-block: 80px 80px;}
  .prd-purpose-list {gap: 40px 15px; grid-template-columns: repeat(3, 1fr);}
  .prd-purpose-item .thumb {border-radius: 10px;}
  .prd-purpose-item .ls > li {padding-block: 20px; font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .prd-detail-intro {padding-block: 80px 60px;}
  .prd-detail-intro .content .head {}
  .prd-detail-intro .content .head .tag {font-size: 16px;}
  .prd-detail-intro .content .head .title {font-size: 28px;}
  .prd-detail-intro .content .head .subtitle {font-size: 20px;}
  .prd-detail-intro .content .thumb {}

  .prd-detail-intro .content .features-title {font-size: 24px;}
  .prd-detail-intro .content .features .wrapper {gap: 35px;}
  .prd-detail-intro .content .features .wrapper .group .title {font-size: 16px;}
  .prd-detail-intro .content .features .wrapper .group .cont {padding-top: 10px; flex-direction: column;}
  .prd-detail-intro .content .features .wrapper .group .cont:has(.wrap) {gap: 10px;}
  .prd-detail-intro .content .features .wrapper .group .cont .wrap {width: 100%;}

  .prd-detail-intro .content .features .noti {display: block;}
  .prd-detail-intro .content .features .noti b {display: block;}

  .prd-section-wrapper {padding-top: 60px;}
  .prd-section {padding-bottom: 70px;}
  .prd-section-head {margin-bottom: 30px; flex-direction: column; align-items: flex-start; gap: 20px;}
  .prd-section-title {font-size: 24px;}
  .prd-section-title small {display: block; margin-top: 0.3em;}

  .prd-flow-list {grid-template-columns: repeat(2, 1fr); margin-top: 0;}
  .prd-flow-list > li {font-size: 15px; gap: 10px;}

  .prd-purpose-list {grid-template-columns: repeat(2, 1fr); gap: 40px 10px;}
  .prd-purpose-item .ls > li {font-size: 15px;}
}




/* Detail customs */
.am-series .prd-detail-intro .content .features .wrapper .group {width: 100%; }
.dh-05hg .selection-cart-row.row-1 {display: grid; grid-template-columns: 4fr 3fr; gap: 20px; margin-bottom: 38px;}
.mw-series .standard-spec .prd-spec-container {display: flex; gap: 40px;}
.mw-series .standard-spec .prd-spec-container .prd-tab-buttons {flex-shrink: 0; position: static;}
.mw-series .prd-flow-visual {display: grid; grid-template-columns: repeat(2, 1fr); padding-block: 60px;}
.mw-series .prd-flow-visual-item {position: relative; padding: 0 70px;}
.mw-series .prd-flow-visual-item::after {position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #E1E1E1; content: ''; display: block;}
.mw-series .prd-flow-visual-item:nth-child(2n):after {display: none;}
.mw-series .prd-flow-visual-item .title {font-size: 20px; font-weight: 700; color: black; margin-bottom: 1em; line-height: 1.3; display: block;}
.mw-series .prd-flow-visual-item img {display: block;}

@media screen and (min-width: 1400px) {
  .w-series .prd-detail-intro .content .head {margin-bottom: 50px;}
  .w-series .prd-detail-intro .content .thumb {top: auto; bottom: -150px;}
  .w-series .prd-detail-intro .content .features .wrapper .group .cont .ls {display: grid; grid-template-columns: auto auto; gap: 0 40px;}
  .ams-series .prd-detail-intro .content .head {margin-bottom: 50px;}
  .al-series .prd-detail-intro .content .head {margin-bottom: 50px;}
  .i-series .prd-detail-intro .content .head {margin-bottom: 50px;}
  .dhs-series .prd-detail-intro .content .head {width: 60%; margin-bottom: 80px;}
  .dhs-series .prd-spec-container .prd-tab-buttons {width: 360px;}
  .dhb-series .prd-detail-intro .content .head {margin-bottom: 50px;}
  .dhb-series .prd-detail-intro .content .thumb {top: auto; bottom: -150px;}
  .mw-series .prd-detail-intro .content .head,
  .dh-05hg .prd-detail-intro .content .head {margin-bottom: 50px;}
  .mw-series .prd-detail-intro .content .thumb,
  .dh-05hg .prd-detail-intro .content .thumb {top: auto; bottom: -150px;}
  .mw-series .prd-detail-intro .content .features .wrapper .group .cont .ls {display: grid; grid-template-columns: auto auto; gap: 0 40px;}
}
@media screen and (max-width: 1399px) {
  .dh-05hg .prd-spec-table colgroup col:first-child,
  .dhb-series .prd-spec-table colgroup col:first-child {width: 80px;}
  .dh-05hg .prd-spec-table colgroup col:nth-child(2),
  .dhb-series .prd-spec-table colgroup col:nth-child(2) {width: 180px;}
  .mw-series .standard-spec .prd-spec-container {display: block;}
  .mw-series .prd-flow-visual {padding-block: 40px;}
  .mw-series .prd-flow-visual-item {padding: 0 30px;}
  .mw-series .prd-flow-visual-item .title {font-size: 18px;}
}
@media screen and (max-width: 767px) {
  .dh-05hg .prd-spec-table colgroup col:first-child {width: 80px;}
  .dh-05hg .prd-spec-table colgroup col:nth-child(2) {width: auto;}
  .mw-series .prd-flow-visual {grid-template-columns: repeat(1, 1fr); padding-block: 0; padding-inline: 20px;}
  .mw-series .prd-flow-visual-item {padding: 25px 0;}
  .mw-series .prd-flow-visual-item::after {top: auto; bottom: 0; width: 100%; height: 1px;}
  .mw-series .prd-flow-visual-item .title {font-size: 16px;}
}



/* Format */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}