@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:450rem; text-align:center; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/sub_vis1.jpg'); }
.subVisual.business::before{ background-image:url('/images/content/sub_vis2.jpg'); }
.subVisual.product::before{ background-image:url('/images/content/sub_vis3.jpg'); }
.subVisual.board::before{ background-image:url('/images/content/sub_vis4.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/sub_vis3.jpg'); }
.subVisual .inr {text-align: left; margin-top: 180rem;}
.subVisual h2{display: inline-block; font-size: var(--fs40); margin-bottom: 20rem; position: relative;}
.subVisual h2::before {content: ''; display: inline-block; width: 60rem; height: 1rem; background: #ededed; position: absolute; right: -75rem; bottom:30%;    }
.subVisual h2::after {content: ''; display: inline-block; width: 9rem; height: 9rem; background: var(--primary); border-radius: 50%; position: absolute; right: -75rem; bottom:25%;    }
@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{ background: #2b2b2b; border-bottom: 1px solid #ddd; text-align:center; font-size:18rem; font-weight: 500; color: #dadada; z-index:5;  display: none;}
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 28rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 4.0625em; }
.lnb a:hover,
.lnb a.on{ color: var(--primary); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }

.area_breadcrumb{ position: relative; top: -1rem; left: 8px; display: flex; gap: 45rem; color: #fff; opacity: 0.8;     justify-content: flex-end; margin-top: 100rem;}
.area_breadcrumb .home{ position: relative; top: 3rem; right: 3rem; width: 18rem; height: 16rem; background: url('/images/content/icon_home.png') no-repeat 50% / contain; }
.area_breadcrumb p + p{ position: relative; }
.area_breadcrumb p + p::before{ content: ''; position: absolute; top: 6rem; left: -24rem; width: 7rem; height: 11rem; background: url('/images/content/icon_gt.png') no-repeat 50% / contain; }
.area_breadcrumb [data-menu-snb]:empty{ display: none; }
@media(max-width:767px){
	.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{ --border: #e1e1e1; position:relative; border-bottom: 1px solid var(--border); font-weight: 300; z-index: 7; }
.lnb__inr{ position: relative; display: grid; grid-template-columns: 66rem 1fr 1fr; height: 66rem; }
.lnb__inr > *{ height: inherit; border-right: 1px solid var(--border); }
.lnbHome{ display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border); }
.lnbHome__svg{ height: 15rem; fill: var(--gray); }
.gnb1 .lnb__summary::after{ display: none; }
.gnb2:not(:has(.sub_menu)) .lnb__summary:not(:has(+ *))::after{ display: none; }
.lnb__summary{ display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 2rem 25rem 0 19rem; box-sizing: border-box; font-size: 16rem; font-weight: 300; color: var(--gray); }
.lnb__summary[data-menu-snb="2"]{ cursor: pointer; }
.lnb__summary::after{ content: ''; position: relative; top: -4rem; left: 5rem; display: inline-block; width: 7rem; height: 7rem; border: solid var(--black); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.lnb__summary:not(:has(+ *))::after{ top: -1rem; left: 1rem; width: 10rem; height: 7rem; clip-path: polygon(0 0, 100% 0, 100% 2rem, 0 2rem, 0 5rem, 100% 5rem, 100% 100%, 0 100%); }
.lnb__gnb[open] .lnb__summary::after{ transform: rotate(-135deg); }
.lnb__gnb .sub_menu{ background: #fff; box-shadow: 0 4rem 4rem #0003; }
.lnb__gnb .sub_menu a{ display: block; padding: 10rem 20rem; }
@media(prefers-reduced-motion:no-preference){
	.lnb__gnb{ clip-path: inset(0 -10rem); transition: 0s linear; }
	.lnb__gnb[open]{ clip-path: inset(0 -10rem -500rem); transition-duration: .4s; }
	.lnb__gnb[open] .lnb__summary::after{ transition: .4s; }
}
@media(min-width:768px){
	.lnb__inr{ grid-template-columns: 66rem 240rem 240rem; }
} */


/* common content */
#content{ min-height:300px; padding: 80rem 0 120rem; overflow:hidden;}
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:35rem; }
h2.sub_tit{position:relative; margin-bottom:30rem; padding-left:18rem; font-size:30rem; color:#111;}
h2.sub_tit:before{content:''; display:block; position:absolute; top:10rem; left:0; width:4rem; height:25rem; background:var(--primary);}

.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; }

.mt60{margin-top:60rem;}
.mt90{margin-top:90rem;}
.mt120{margin-top:120rem;}

@media(max-width:1279px){
    #content{padding:80rem 0 100rem;}
    .mt60{margin-top:55rem;}
    .mt90{margin-top:60rem;}
    .mt120{margin-top:100rem;}
}
@media(max-width:767px){
    #content{padding:80rem 0 80rem;}
    h2.sub_tit{margin-bottom:15rem; font-size: 25rem;}
    h2.sub_tit:before {top: 8rem; width:2rem; height:22rem;}
    .mt60{margin-top:40rem;}
    .mt90{margin-top:50rem;}
    .mt120{margin-top:80rem;}
}


/* 회사소개 */
.area_about .greeting{text-align:center;}
.area_about .greeting span{display:block; position:relative; margin:0 auto 50rem; width:1px; height:100rem; background:#ccc;}
.area_about .greeting span:after{content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:10rem; height:10rem; border-radius:50%; background:var(--primary);}
.area_about .greeting p{font-size:20rem; color:#777;}
.area_about .greeting p+p {margin-top: 30rem;}
.area_about .greeting p em{display:block; margin-bottom:20rem; font-weight:800; font-size:var(--fs40); color:#aaa;}
.area_about .greeting p em b{color:var(--primary); font-weight:800;}
.area_about .greeting .img{margin-top:50rem;}
.area_about .greeting .img img{display:block; width:100%; height:100%; object-fit:cover;}
.area_about .history .list{display:flex; justify-content:space-between;}
.area_about .history .list .box{width:calc(50% - 40rem);}
.area_about .history .list .box h3{margin-bottom:15rem; font-weight:900; color:var(--primary); font-size:var(--fs40);}
.area_about .history .list .box ul{}
.area_about .history .list .box ul li:first-child{border-top:1px solid #888;}
.area_about .history .list .box ul li{display:flex; padding:15rem 0; font-size:18rem; border-bottom:1px dashed #ddd;}
.area_about .history .list .box ul li em{width:100rem; color:#111; font-weight:800;}
.area_about .history .list .box ul li p{width:calc(100% - 100rem); color:#555;}
.area_about .history .list .box ul li p b{color:#3579c9;}
.area_about .main_pr .list{display:flex; margin-left:-40rem; flex-wrap:wrap;}
.area_about .main_pr .list li{width:calc(100% / 2); padding-left:40rem;}
.area_about .main_pr .list li:nth-child(n+3){margin-top:40rem;}
.area_about .main_pr .list li > div{display:flex; padding:15rem; width:100%; height:100%; border:1px solid #ddd;}
.area_about .main_pr .list li .img{display:block; width:35%;}
.area_about .main_pr .list li .img img{display:block; width:100%;}
.area_about .main_pr .list li .txt{padding:15rem 0 15rem 30rem; width:65%;}
.area_about .main_pr .list li .txt em{display:block; margin-bottom:10rem; font-weight:bold; color:#222; font-size:20rem; transition:0.2s ease;}
.area_about .main_pr .list li .txt p{color:#555; font-size:18rem;}
@media(hover:hover){
    .area_about .main_pr .list li > div:hover .txt em{color:#3579c9;}
}
@media(max-width:1279px){
    .area_about .greeting span{height:80rem;}
    .area_about .history .list{display:block;}
    .area_about .history .list .box{width:100%;}
    .area_about .history .list .box+.box{margin-top:30rem;}
    .area_about .history .list .box h3{margin-bottom:10rem;}
    .area_about .main_pr .list{display:block; margin-left:0;}
    .area_about .main_pr .list li{padding-left:0; width:100%;}
    .area_about .main_pr .list li:nth-child(n+2){margin-top:20rem;}
    .area_about .main_pr .list li .img{width:20%;}
    .area_about .main_pr .list li .txt{width:80%;}
}
@media(max-width:767px){
    .area_about .greeting p > br{display:none;}
    .area_about .greeting .img{margin-top:30rem; height:200rem;}
    .area_about .main_pr .list li > div{display:block; padding:25rem 15rem;}
    .area_about .main_pr .list li .img{margin:auto; width:60%;}
    .area_about .main_pr .list li .txt{margin-top:25rem; border-top:1px dashed #ddd; width:100%; padding:25rem 0 0 0;}
}
@media(max-width:480px){
    .area_about .main_pr .list li .img{width:100%;}
    .area_about .main_pr .list li > div{padding:15rem 15rem 25rem;}
    .area_about .main_pr .list li .txt{border-top:none; padding:0;}
}

/* 사업분야 */
.area_biz{}
.area_biz .cont01{}
.area_biz .cont01 span{display:block; position:relative; margin:0 auto 50rem; width:1px; height:100rem; background:#ccc;}
.area_biz .cont01 span:after{content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:10rem; height:10rem; border-radius:50%; background:var(--primary);}
.area_biz .cont01 h2{font-weight:800; font-size:var(--fs40); color:#aaa; text-align:center;}
.area_biz .cont01 h2 em{color:#000;}
.area_biz .cont01 .txt{display:flex; flex-wrap:wrap; margin-top:50rem; margin-left:-40rem;}
.area_biz .cont01 .txt li{padding-left:40rem; width:calc(100% / 3);}
.area_biz .cont01 .txt li div{padding:40rem 30rem; width:100%; height:100%; border:1px solid #ddd; text-align:center}
.area_biz .cont01 .txt li div dl.eng {padding-top: 20rem; margin-top: 20rem; border-top: 1px dashed #e5e5e5;}
.area_biz .cont01 .txt li div dt{display:block; font-size:22rem; color:#111; font-weight:700;}
.area_biz .cont01 .txt li div dt:after{content:''; display:block; position:relative; margin:10rem auto 12rem; width:20rem; height:2rem;}
.area_biz .cont01 .txt li div dd{font-size:17rem; color:#555;}
.area_biz .cont01 .txt li:nth-child(1) div dt:after{background:#3579c9;}
.area_biz .cont01 .txt li:nth-child(2) div dt:after{background:var(--primary);}
.area_biz .cont01 .txt li:nth-child(3) div dt:after{background:#457038;}
.area_biz .cont01 > .img{display:grid;grid-template-columns: repeat(2,1fr); gap: 30rem; padding:60rem 20rem; border-bottom:1px solid #ddd;}
.area_biz .cont01 > .img img{display:block; width: 100%; max-width: 100%;}
.area_biz .cont01 > .img img:nth-child(2){margin-top:30rem;}
.area_biz .cont01 > .img img:nth-child(4){margin-top:30rem;}
.area_biz .cont01 .box h3{position:relative; margin-bottom:15rem; font-size:25rem; color:#111; font-weight:700;}
.area_biz .cont01 .box h4{margin-bottom:5rem; color:#3579c9; font-size:20rem; font-weight:600;}
.area_biz .cont01 .box p{font-size:18rem; color:#555;}
.area_biz .cont01 .box .img{margin-top:30rem;}
.area_biz .cont01 .box01 .list{display:flex; margin-top:15rem; height:70rem; line-height:70rem; font-size:20rem; font-weight:500; border:1px solid #222;}
.area_biz .cont01 .box01 .list em{display:block; text-align:center; width:150rem; background:#222; height:100%; color:#fff;}
.area_biz .cont01 .box01 .list ul{display:flex; width:calc(100% - 150rem);}
.area_biz .cont01 .box01 .list ul li{color:#333; width:calc(100% / 3); text-align:center;}
.area_biz .cont01 .box01 .list ul li+li{border-left:1px dashed #ddd;}
.area_biz .cont01 .box01 .img{display:flex; justify-content:space-between;}
.area_biz .cont01 .box01 .img img{display:block; height:430rem;}
.area_biz .cont01 .box02 .img{display:block; width:100%;}
.area_biz .cont01 .box02 .img img{display:block; width:100%;}
@media(max-width:1279px){
    .area_biz .cont01 span{height:80rem;}
    .area_biz .cont01 .txt{margin-top:40rem; margin-left:-15rem;}
    .area_biz .cont01 .txt li{padding-left:15rem;}
    .area_biz .cont01 .txt li div{padding:30rem 18rem;}
    .area_biz .cont01 .txt li div dt:after{margin:8rem auto 10rem;}
    .area_biz .cont01 .box01 .img img{height:290rem;}
}
@media(max-width:767px){
    .area_biz .cont01 h2{font-size:28rem;}
    .area_biz .cont01 .txt{margin-left:0;}
    .area_biz .cont01 .txt li{padding-left:0; width:100%; transition-delay:0 !important;}
    .area_biz .cont01 .txt li+li{margin-top:20rem;}
    .area_biz .cont01 > .img{grid-template-columns: repeat(1,1fr); gap: 20rem;padding:40rem 0 }
    .area_biz .cont01 > .img img{display:block; width: 100%; max-width: 100%;}
    .area_biz .cont01 > .img img:nth-child(2), .area_biz .cont01 > .img img:nth-child(4){margin-top:0rem}
    .area_biz .cont01 .box .img{margin-top:20rem;}
    .area_biz .cont01 .box01 .list{height:60rem; line-height:60rem; font-size:18rem;}
    .area_biz .cont01 .box01 .list em{width:70rem;}
    .area_biz .cont01 .box01 .list ul{width:calc(100% - 70rem);}
    .area_biz .cont01 .box01 .img img{height:133rem;}
}