@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:480rem; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/sub_visual01.jpg'); }
.subVisual.product::before{ background-image:url('/images/content/sub_visual02.jpg'); }
.subVisual.status::before{ background-image:url('/images/content/sub_visual03.jpg'); }
.subVisual.board::before{ background-image:url('/images/content/sub_visual04.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/sub_visual01.jpg'); }
.subVisual .inr{display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:80rem; height:100%;}
.subVisual h2{font-size:50rem; line-height:1; color:#fff;}
.subVisual p{margin-top:20rem; font-size:18rem; color:#fff;}
@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 */
.lnbWrap{background:#fff; border-bottom:1px solid #ededed; z-index:5;}
.lnb ul{margin:0 auto;}
.lnb li{display:inline-block;}
.lnb a{position:relative; display:flex; padding:0 35rem; align-items:center; height:70rem; font-size:18rem; font-weight:500; color:#aaa; transition:0.2s;}
.lnb a.on{color:var(--primary); font-weight:bold;}
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom:3rem solid var(--primary); }
@media(hover:hover){
    .lnb a:hover{color:var(--primary);}
}
@media(max-width:1279px){
    .subVisual{height:450rem;}
}
@media(max-width:767px){
    .subVisual{height:400rem;}
    .subVisual .inr{padding-bottom:50rem;}
    .subVisual h2{font-size:40rem;}
	.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; }
    .lnb a{padding:0 20rem; height:60rem;}
}

/* common content */
#content{position:relative; min-height:300px; padding:120rem 0; }
.sub_title{margin-bottom:120rem;}
.sub_title h2{text-align:center; font-size:var(--fs35); color:#000;}
.subLine{display:none; justify-content:space-between; position:absolute; top:0; left:50%; transform:translateX(-50%); max-width:1520rem; width:96%; height:100%;}
.subLine span{display:block; height:100%; width:1px; background:#ededed;}
.subLine.st01 span{opacity:0.2;}
.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }
table.table thead th{background:#e4ecf1;}
table.table th, table.table td{padding:15rem 10rem;}

.mt100{margin-top:100rem;}

.sub_tit1{position:relative; margin-bottom:30rem; padding-left:20rem; font-size:30rem; color:#000; line-height:1.3;}
.sub_tit1:before{content:''; display:block; position:absolute; left:0; top:5rem; width:8rem; height:28rem; background:var(--primary);}

@media(max-width:1279px){
    #content{padding:100rem 0;}
    .sub_title{margin-bottom:100rem;}
    .mt100{margin-top:80rem;}
}
@media(max-width:767px){
    #content{padding:70rem 0;}
    .sub_title{margin-bottom:70rem;}
    .mt100{margin-top:60rem;}
    .sub_tit1{}
    .sub_tit1:before{}
}


/* 회사소개 > 인사말 */
.greeting{display:flex; justify-content:space-between;}
.greetingImg{width:calc(50% - 40rem);}
.greetingImg img{display:block; height:100%; width:100%; object-fit:cover; object-position:bottom;}
.greetingTxt{padding-top:30rem; width:calc(50% - 40rem);}
.greetingTxt p{font-size:18rem; color:#444;}
.greetingTxt p+p{margin-top:20rem;}
.greetingTxt p b{color:var(--primary);}
.greetingTxt span{display:block; margin-top:30rem; font-size:18rem; color:#222; font-weight:600; text-align:end;}
.greetingTxt span em{display:inline-block; margin-right:6rem; color:#888;}
@media(max-width:1279px){
    .greetingImg{width:calc(50% - 30rem);}
    .greetingTxt{padding-top:0; width:calc(50% - 30rem);}
    .greetingTxt p > br{display:none;}
}
@media(max-width:767px){
    .greeting{display:block;}
    .greetingImg{width:100%; height:240rem;}
    .greetingTxt{margin-top:40rem; width:100%;}
}


/* 회사소개 > 연혁 */
.history{position:relative;}
.historyBox{position:relative; padding-left:clamp(20rem, 6.07142857%, 85rem); box-sizing:border-box;}
.historyBox + div{ margin-top: 35rem; }
.historyBox::before{ content: ''; position:absolute; top:10rem; left:-6rem; width:12rem; height:12rem; background:#fff; border:3px solid var(--primary); border-radius:50%; box-sizing:border-box; }
.historyBox_year{margin-bottom:15rem; font-size:var(--fs30); font-weight:800; color:var(--primary);}
.historyBox_ul1{font-size:18rem; color: var(--gray); }
.historyBox_ul1__li{display:flex; margin-top: 7rem; }
.historyBox_ul1__li.mt15{margin-top:15rem;}
.historyBox_ul1__li em{font-weight:bold; color:#111; display:block; width:40rem;}
.historyBox_ul1__li p{width:calc(100% - 40rem);}
.historyBar{ overflow: hidden; position: absolute; inset: 14rem 0 6rem; width: 1px; background: #ddd; z-index: -1; }
.historyBar::before{ content: ''; position: absolute; inset: 0; background: var(--primary); z-index: 1; }
@media(prefers-reduced-motion:no-preference){
	.historyBox,
	.historyBox::before{ transition: .4s; }
	.historyBox:not(.seActive){ opacity: .7; }
	.historyBox:not(.seActive)::before{ border-color: #ddd; }
	.historyBar::before{ height: var(--height); }
}
@media(min-width:768px){
	.historyBox{ width: 50%; }
	.historyBox:nth-child(odd){ margin-left: auto; }
	.historyBox:nth-child(even){ padding: 0 clamp(20rem, 6.07142857%, 85rem) 0 0; text-align: right; }
	.historyBox:nth-child(even)::before{ left: auto; right: -6rem;  }
    .historyBox:nth-child(even) li{flex-direction:row-reverse;}
	.historyBar{ margin: auto; }
}


/* 회사소개 > 조직도 */
.group img{display:block; margin:auto; max-width:800rem; width:100%;}


/* 회사소개 > 인증서 */
.certiList{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:50rem 40rem;}
.certiList_li{}
.certiList_li div{padding:6rem; height:100%; width:100%; background:#f1f1f1;}
.certiList_li span{display:block; width:100%;}
.certiList_li span img{display:block; width:100%;}
.certiList_li em{display:block; padding:20rem 10rem 14rem; font-size:17rem; color:#333;}
@media(max-width:1279px){
    .certiList{grid-template-columns:1fr 1fr 1fr; gap:35rem 20rem;}
}
@media(max-width:767px){
    .certiList{grid-template-columns:1fr 1fr; gap:25rem 15rem;}
}


/* 회사소개 > 오시는길 */
.locationMap{width:100%; height:500rem;}
.locationMap .root_daum_roughmap_landing{width:100% !important; height:100%;}
.locationMap .root_daum_roughmap .wrap_map{height:100% !important;}
.locationMap .root_daum_roughmap .map_border{display:none;}
.locationMap .root_daum_roughmap .wrap_controllers{display:none;}
.locationInfo{display:flex; justify-content:space-between; align-items:center; margin-top:30rem;}
.locationInfo_h2{font-size:var(--fs35); color:#111; font-weight:800;}
.locationInfo_box{display:flex;}
.locationInfo_box li{display:flex; font-size:18rem; color:#555;}
.locationInfo_box li+li{margin-left:50rem;}
.locationInfo_box em{display:inline-block; margin-right:8rem; color:#111; font-weight:700;}
@media(max-width:1279px){
    .locationInfo{display:block;}
    .locationInfo_box{margin-top:20rem; padding:25rem 20rem; background:#f5f5f5;}
}
@media(max-width:767px){
    .locationInfo_box{display:block;}
    .locationInfo_box li+li{margin-left:0; margin-top:15rem;}
    .locationInfo_box em{margin-right:0; width:60rem;}
    .locationInfo_box p,
    .locationInfo_box a{width:calc(100% - 60rem);}
}


/* 제품소개 */
.prdCont em{display:block; position:relative; padding-left:16rem; font-size:20rem; color:#222; font-weight:600;}
.prdCont em:before{content:''; display:block; position:absolute; top:12rem; left:0; width:6rem; height:6rem; background:var(--primary);}
.prdCont1 em{margin-bottom:12rem;}
.prdCont_ul1{display:grid; grid-template-columns:1fr 1fr 1fr; gap:50rem 40rem;}
.prdCont_ul1 span{display:block; width:100%; border:1px solid #ddd;}
.prdCont_ul1 img{display:block; height:100%; width:100%;}
.prdCont_ul2{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20rem 40rem;}
.prdCont_ul2 li{display:flex; flex-direction:column; justify-content:center; padding:20rem; border:1px solid #ddd; background:#fff;}
.prdCont_ul2 em{display:block; position:relative; padding-left:16rem; font-size:20rem; color:#222; font-weight:600;}
.prdCont_ul2 em:before{content:''; display:block; position:absolute; top:12rem; left:0; width:6rem; height:6rem; background:var(--primary);}
.prdCont4 i{display:block; padding-left:16rem; font-size:18rem; color:#888; margin-top:3rem;}
@media(max-width:1279px){
    .prdCont_ul1{gap:30rem 20rem;}
    .prdCont_ul2{gap:20rem;}
}
@media(max-width:767px){
    .prdCont em{padding-left:13rem; font-size:17rem;}
    .prdCont em:before{top:10rem;}
    .prdCont_ul1{grid-template-columns:1fr 1fr; gap:25rem 15rem;}
    .prdCont_ul2{grid-template-columns:1fr; gap:15rem;}
    .prdCont_ul2 li{padding:12rem;}
    .prdCont4 i{padding-left:13rem; font-size:16rem;}
}


/* 설비현황 */
.state1Cont h2{margin-bottom:30rem; text-align:center; font-size:25rem;}
.state1Cont h2 i{display:block; margin-top:10rem; font-weight:normal; font-size:18rem; color:#888;}
@media(max-width:767px){
    .state1Cont_table{overflow-x:scroll;}
}