@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/
header {position: relative; color: var(--black)}
.logo-bk {display: block;}
.logo-wh {display: none;}

/* .sub .inr {max-width: 1400rem; margin: 0 auto;} */
/* sub visual */
.subVisual {overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative;}
.subVisual .inr {display: flex; justify-content: space-between; padding: 110rem 0 80rem; box-sizing: border-box;}
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
/* 서브 비주얼 작업 시 top.html:68 파일명, 숫자 양식 맞춰주세요 */
/* .subVisual.fan::before{ background-image:url('/images/content/sub_visual-1.webp'); } */
.subVisual h2[data-menu-snb="1"]{ font-size: var(--fs50); font-weight: 700;}
.subVisual .area_navi {display: flex; align-items: center;}
.subVisual .area_navi img {height: 15rem;}
.subVisual .area_navi li {color: #777; position: relative; font-weight: 300;}
.subVisual .area_navi li + li {padding-left: 18px; margin-left: 16px;}
.subVisual .area_navi li + li::before {position: absolute; content: ''; top: 10rem; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #aaa;}

@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* lnb */
.lnb_wrap {border-bottom: 1px solid #ddd;}
.lnb {font-size:18rem; font-weight: 500; color: #ddd; z-index:5; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 35rem 0 0 }
.lnb a{ position: relative; display: flex; align-items: center; height: 4.0625em; }
.lnb a:hover,
.lnb a.isVisiting{ color: var(--primary); }
.lnb a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }

@media(max-width:767px){
	.subVisual .inr {padding: 80rem 0 50rem;}
	.subVisual .area_navi li + li {padding-left: 14px; margin-left: 12px;}
	.subVisual .area_navi li + li::before {top: 11rem;}
	.lnb{ overflow: auto clip; white-space:nowrap; }
	.lnb ul{ display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb li{ display:table-cell; }
}

/* common content */
main#content{ min-height:300px; padding: 90rem 0;}
.sub_title{ margin-bottom: 50rem;}
.sub_title h2{text-align:center; font-size:var(--fs40); font-weight: 700; }
#content:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */

/* 공통 */
.ss-tit {margin-bottom:40rem;}
.ss-tit h3 {position: relative; font-size: var(--fs35); line-height: 1; padding-left: 20rem;}
.ss-tit h3::before {content: ''; position: absolute; top: 1rem;left: 0; width: 4rem; height: 100%; background: var(--primary);}
.ss-tit p {font-size: var(--fs18); color: #555; margin-top: 25rem;}
.sub_h5 {font-size: var(--fs22); font-weight: 500;}
.sub_h5 .num {color: var(--primary); font-weight: 600; display: inline-block; margin-right: 8rem; }
.mr50 {margin-top: 50rem;}
.mr80 {margin-top: 80rem;}
.mr100 {margin-top: 100rem;}

/* table */
.table table {width: 100%; text-align: center; border-top: 2rem solid #111;}
.table table thead {background: #f8f8f8;}
.table table th {font-weight: 500; font-size: var(--fs17);border-left: 1rem solid #ddd; }
.table table th, td {padding: 18rem 10rem; box-sizing: border-box;}
.table table tbody td:first-child {border-left: 0;}
.table table tbody th:first-child {border-left: 0;}
.table table thead th:first-child {border-left: 0;}
.table table tbody th {border-bottom: 1rem solid #ddd;}
.table table td {color: #555; border-left: 1rem solid #ddd; border-bottom: 1rem solid #ddd;}
.table table .br_n {border-left: 0;}
.table table tbody tr:first-child {border-top: 1rem solid #ddd;}
.table table tbody tr:first-child td.red {border-top: 1rem solid var(--primary);}
.table table tbody tr:last-child td.red {border-bottom: 1rem solid var(--primary);}
.table table tbody td.red {color: #ed5c00; font-weight: 500; border-left: 1rem solid var(--primary); border-right: 1rem solid var(--primary); background: rgba(244, 115, 33, 0.02);}

@media(max-width:767px){
	main#content{padding: 60rem 0;}
	.ss-tit {margin-bottom:25rem;}
	.ss-tit p {margin-top: 15rem;}
	.sub_h5 .num {margin-right: 5rem; }
	.mr50 {margin-top: 30rem;}
	.mr80 {margin-top: 40rem;}
	.mr100 {margin-top: 50rem;}
	.table table { border-top: 1rem solid #111;}
	.table table th, td {padding: 12rem 6rem; font-size: 14rem;}
}

/* HVLS FAN */
.Fan {}
.Fan .hvls {display: flex; gap: 20rem; align-items: center; justify-content: space-between; padding: 60rem 70rem; box-sizing: border-box; border: 10rem solid #f5f5f5;}
.Fan .hvls .txt h3 {font-size: var(--fs48); font-weight: 700; }
.Fan .hvls .txt span {display: block; font-size: var(--fs18); margin-bottom: 8rem; font-weight: 600; color: var(--primary);}
.Fan .hvls .txt p {font-size: var(--fs18);line-height: 1.8; margin-top: 20rem; color: #555;}
.Fan .hvls .img {width: 38%;}
.Fan .hvls .img img {width: 100%; height: 100%; max-width: 100%;}
.Fan .ssBox .fanTable {margin-top:30rem;}
.Fan .ssBox .box.b3 .con {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem; justify-content: space-between;}
.Fan .ssBox .box.b4 .fanTable {overflow-x: auto;}
.Fan .ssBox .box.b4 .fanTable table {min-width: 700rem}

/* 공통 */
.iconList {display: grid; grid-template-columns: repeat(4,1fr); padding: 110rem 0; background: #f8f8f8; box-sizing: border-box;}
.iconList li {display: flex; flex-direction: column; align-items: center; text-align: center; }
.iconList li .icon {height: 50rem;}
.iconList li .icon img {height: 100%; max-height: 100%;}
.iconList dt img {width: 15rem;}
.iconList dt {font-size: var(--fs18); margin-bottom: 10rem; font-weight: 600;}
.iconList dl {margin-top: 22rem;}
.iconList dd {color: #555;}
.ssBox {margin-top: 50rem;}
.ssBox .box + .box {margin-top: 40rem;}
.ssBox .tit h5 {margin-bottom: 15rem;}
.ssBox .tit p {font-size: var(--fs18); color: #555;}
.ssBox .con {padding: 30rem; box-sizing: border-box; border: 10rem solid #f5f5f5; width: 100%; margin-top: 30rem; text-align: center;}
.ssBox .con img {max-width: 100%; object-fit: contain;}
.ssBox .con span {display: inline-block; margin-top: 20rem; padding: 10rem 25rem; box-sizing: border-box; background: #222; color: #fff; border-radius: 30rem;}
.tab-cont {overflow: hidden; visibility: hidden; height: 0;}
.tab-cont.active {overflow: visible; visibility: visible; height: 100%;}
.tab-menu {display: flex; justify-content: center; align-items: center; margin-bottom: 60rem;}
.tab-menu li {display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--fs18); height: 75rem; background: #f8f8f8; color:#aaa}
.tab-menu li + li {border-left: 1rem solid #e8e8e8;}
.tab-menu li.active {background: var(--primary); color: #fff;} 
.product .tab-menu li {width:25%;}

/* Air cooler - 에어쿨러 */
.ACooler {}
.ACooler .cooler {display: flex; align-items: center; justify-content: space-between; padding: 50rem 70rem; box-sizing: border-box; border: 10rem solid #f5f5f5;}
.ACooler .cooler .txt h3 {font-size: var(--fs48); font-weight: 700; }
.ACooler .cooler .txt span {display: block; font-size: var(--fs18); margin-bottom: 8rem; font-weight: 600; color: var(--primary);}
.ACooler .cooler .txt p {font-size: var(--fs18);line-height: 1.8; margin-top: 20rem; color: #555;}
.ACooler .cooler .img img {width: 100%; height: 100%; max-height: 400rem;}
.ACooler .ssBox {margin-top: 50rem;}
.ACooler .ssBox .box + .box {margin-top: 40rem;}
.ACooler .ssBox {margin-top: 50rem;}
.ACooler .ssBox .box.b3 .con {}
.ACooler .ssBox .box.b4 .con {display: grid; grid-template-columns: repeat(2,1fr); gap: 20rem; justify-content: space-between;}
.ACooler .prBox {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem;}
.ACooler .prBox li {padding: 35rem; box-sizing: border-box; background: #f8f8f8;}
.ACooler .prBox .prImg {width: 100%; background: #fff; padding: 50rem 10rem; text-align: center; box-sizing: border-box;}
.ACooler .prBox .prImg img {height: 100%; max-height: 10%;}
.ACooler .prBox .prInfo dt {font-size: var(--fs25); font-weight: 600; margin: 30rem 0 20rem; }
.ACooler .prBox .prInfo dd {font-size: var(--fs18); color: #555;}
.ACooler .prBox .prInfo dd + dd {margin-top: 8rem;}

@media(max-width:767px){
	.Fan .hvls {flex-direction: column; gap: 35rem; padding: 35rem 20rem; border: 6rem solid #f5f5f5;}
	.Fan .hvls .txt p {line-height: 1.5; margin-top: 10rem;}
	.Fan .hvls .img {width: 80%; align-self: flex-end;}
	.Fan .ssBox .box.b3 .con {grid-template-columns: repeat(1,1fr); gap: 30rem;}
	.Fan .ssBox .box.b4 .con { grid-template-columns: repeat(1,1fr);}
	/* 공통 */
	.iconList {grid-template-columns: repeat(1,1fr); gap: 30rem; padding: 60rem 0;}
	.iconList li .icon {height: 40rem;}
	.iconList dl {margin-top: 15rem;}
	.ssBox .con {border: 6rem solid #f5f5f5; padding: 30rem 20rem;}
	.ssBox .con span {padding: 6rem 25rem; margin-top: 15rem;}
	.tab-menu {flex-wrap: wrap; justify-content: flex-start; margin-bottom: 45rem;}
	.tab-menu li {height: 60rem;}
	.product .tab-menu li {width:50%;}
	/* 에어쿨러 */
	.ACooler .cooler {flex-direction: column; gap: 35rem; padding: 35rem 20rem; border: 6rem solid #f5f5f5;}
	.ACooler .cooler .txt p {line-height: 1.5; margin-top: 10rem;}
	.ACooler .ssBox .box.b4 .con { grid-template-columns: repeat(1,1fr); gap: 30rem;}
}

/* product - 제품사양 */
.product .prTit {padding-left: 30rem; border-left: 5rem solid var(--primary);}
.product .prTit span {display: block; font-size: var(--fs20); color: #777; margin-bottom: 10rem;}
.product .prTit h3 {display: block; font-size: var(--fs45); font-weight: 700;}
.product .prTit dd {font-size: var(--fs18); color: #555;}
.product .prTit dd + dd {margin-top: 6rem;}
.product .prBtn {display: inline-block; font-size: var(--fs18); margin-top: 30rem; padding: 20rem 40rem; border: 1rem solid #e8e8e8; color: #555;}
.product .prImg { text-align: center; border: 1rem solid #ddd; padding: 20rem 20rem; box-sizing: border-box; margin: 40rem 0}
.product .prImg img {object-fit: contain;}
.product .prInfo h5 {font-size: var(--fs25); font-weight: 500; display: flex; align-items: center; margin-bottom: 20rem; gap: 10rem;}
.product .prInfo dd {font-size: var(--fs18); color: #555;}
.product .prInfo table {}
.product .prInfo tbody th {background: #fafafa;}
.product .hvlsList {display: grid; gap: 35rem; grid-template-columns: repeat(3,1fr);}
.product .hvlsList li .img {width: 100%; padding: 20rem; box-sizing: border-box; border-radius: 10rem; border: 1rem solid #e8e8e8;}
.product .hvlsList li .img img {width: 100%;}
.product .hvlsList li p {font-size: var(--fs22); font-weight: 700; text-align: center; margin-top: 30rem;}

/* technology - 기술소개 */
.technology {}
.technology h5 {font-size: var(--fs25); font-weight: 500; display: flex; align-items: center; margin-bottom: 20rem; gap: 10rem;}
.techList {display: grid; gap:50rem 40rem; grid-template-columns: repeat(2,1fr);}
.techList .img {width: 100%;border: 1rem solid #e8e8e8; margin-bottom: 25rem;}
.techList .img img {width: 100%; max-width: 100%; object-fit: cover;}
.techList .txt {}
.techList .txt dt {display: flex; align-items: center; gap: 10rem; font-size: var(--fs22); font-weight: 500; margin-bottom: 20rem;}
.techList .txt dt span {font-weight: 600; color: var(--primary);}
.techList .txt dd {font-size: var(--fs17); color: #555;}
.techList .txt dd + dd {margin-top: 5rem;}
.techSpec table th {font-size: var(--fs18); font-weight: 600;}
.techSpec tbody td img {object-fit: contain;width: 100%; max-width: 80%;} 
.techSpec tbody td.img {padding: 10rem 0;}
.techSpec table tbody td:first-child {border-left: 1rem solid #ddd;}
.certiList {display: grid; gap:40rem 20rem; grid-template-columns: repeat(4,1fr); text-align: center;}
.certiList .img {width: 100%; padding: 30rem; border: 1rem solid #e8e8e8; box-sizing: border-box; margin-bottom: 20rem; }
.certiList .img img {max-width: 100%; object-fit: contain;}
.certiList p {font-size: var(--fs17);}

@media(max-width:767px){
	.product .prTit {padding-left: 20rem; border-left:4rem solid var(--primary);}
	.product .prTit span {margin-bottom: 0;}
	.product .prInfo h5 {gap: 8rem; margin-bottom: 15rem;}
	.product .prImg {width: 100%; margin: 25rem 0}
	.product .prImg img {width: 100%; max-width: 100%;}
	.product .table {overflow-x: auto;}
	.product .table table {min-width: 900rem;}
	.product .table th {font-weight: 500;}

	.techList {gap:30rem; grid-template-columns: repeat(1,1fr);}
	.techList .img {margin-bottom: 20rem;}
	.techList .txt dt {margin-bottom: 10rem;}
	.techSpec tbody td img {max-width: 100%;} 
	.certiList {gap:20rem 15rem; grid-template-columns: repeat(2,1fr)}
	.certiList .img {margin-bottom: 10rem;}
}



/* 설치사례 커스텀 */
.caseBox {margin-top: 100rem; padding: 90rem 0 110rem; margin-bottom: -90rem; background: #222; color: #fff;}
.caseBox h5 {font-size: var(--fs35); font-weight:600; text-align: center; margin-bottom: 55rem;}
.caseList {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20rem; text-align: center;}
.caseList li {display: flex; flex-direction: column; align-items: center; gap: 25rem;}
.caseList li:nth-child(even) {margin-top: 60rem; flex-direction: column-reverse;}
.caseList li .img {width: 280rem; height: 360rem; border-radius: 150rem; overflow: hidden;}
.caseList li .img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover; vertical-align: top;}
.caseList li p {font-size: var(--fs18); }

@media(max-width:1279px){
	.caseList {justify-content: center; gap: 30rem;}
	.caseList li:nth-child(n+4) {margin-top: 0; flex-direction: column;}
}
@media(max-width:767px){
	.caseBox { margin-top: 60rem; padding: 50rem 0; margin-bottom: -60rem;}
	.caseBox h5 {margin-bottom: 30rem;}
	.caseList {display: grid; grid-template-columns: repeat(2,1fr); gap: 20rem;}
	.caseList li .img {width: 180rem; height: 200rem;}
	.caseList li {gap: 10rem; flex-direction: column !important;}
	.caseList li:nth-child(even) {margin-top: 0;}
}

/* 공지사항 커스텀 */
.noticeBox {position: relative; margin-top: 100rem; margin-bottom: -90rem; background: #222;}
/* .noticeBox::before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #222; z-index: -1;} */
.noticeBox .inner {display: grid; align-items: center; }
.noticeCs .notice__title h3 {font-size: var(--fs42); letter-spacing: -1.75rem; font-weight:700; color: #fff;} 
.noticeCs .notice__title span {display: block; font-size: var(--fs17); color: var(--primary); margin-bottom: 8rem;} 
.noticeCs .notice__info {margin-top: 30rem;} 
.noticeCs .notice__info dd {font-weight: 300; color: #fff;} 
.noticeCs .notice__info dd +  dd {margin-top: 12rem;}
.noticeCs .notice__info dd:nth-child(2) {display: flex; align-items: center; gap: 30rem;}
.noticeCs .online_btn { margin-top: 50rem; display: inline-flex; align-items: center; gap: 37rem; padding: 20rem 27rem; background: var(--primary); font-size: 15rem; color: #fff;}
.noticeCs .arrow {translate: 0 1rem; width: 14rem; height: auto; fill: #fff; }
.noticeMap {width: 100%;} 
.noticeMap .root_daum_roughmap {width: 100%; height: 550rem; border-top: 1rem solid #ddd;}
.noticeMap .root_daum_roughmap .wrap_map {height: 100%;}
.noticeMap .map_border, .wrap_controllers {display: none;}

@media(hover){
	.noticeCs .online_btn:not(:hover){ background: #434343; }
}
@media(min-width:767px){
	.noticeBox .inner {grid-template-columns: minmax(4vw, auto) [start] minmax(39.0625%, 750rem) [center] 50% [end];}
	.noticeCs {grid-column: start/center; padding-right: 100rem;}
	.noticeMap {grid-column: center/end;} 
}

@media(max-width:767px){
	.noticeCs {padding: clamp(70rem, calc( 110 / var(--inr) * 100vw ), 110rem) 0 60rem; padding-inline: 4vw;}
	.noticeCs .online_btn {margin-top: 30rem;}
	.noticeCs .notice__info {margin-top: 20rem;}
}