@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; flex-wrap:wrap; align-content:flex-end; position:relative; height:575rem; padding-bottom:var(--lnb_height); background: var(--black); color: #fff; box-sizing:border-box;}
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.company::before{ background-image:url(../images/content/sub_visual01.jpg); opacity: .7; }
.area_subVisual.service::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.contact::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.gallery::before{ background-image:url(../images/content/sub_visual04.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual h2 {margin-bottom:60px; font-size: var(--font_size62); font-weight:800;}
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual :is(p, h2){ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual p + h2{ animation-delay: .4s; }
}
@media(max-width:1279px){
	.area_subVisual{height:380rem;}
}

@media (max-width:767px){
	
	.area_subVisual h2 {margin-bottom:30rem;}

}

/* lnb */
.lnb {position:absolute; bottom:0; width:100%; height:var(--lnb_height); border-top:1px solid rgba(255, 255, 255, .2); z-index:11; animation: sub_visual_text .6s .6s both;}
.lnb ul {margin: 0 auto; }  
.lnb ul li {display:inline-block; margin-right:55rem;}
.lnb ul li:first-child {padding-left:0 ;background :none} 
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {position:relative; display:block; padding:38rem 0; font-weight:600; color:rgba(255, 255, 255, .5); transition: 0.2s;}
.lnb ul li:hover a,
.lnb ul li.on a {color:#fff;}
.lnb ul li:hover a::before,
.lnb ul li.on a::before{position:absolute; left:0; top:0; content:''; width:100%; height:2px; background:#fff;}

.lnb.fixed {position:fixed; top:0; bottom:auto; width:100%;  background:#111; transition:all .3s; z-index:88;}
.area_subVisual.contact .lnb.fixed,
.area_subVisual.gallery .lnb.fixed{position:absolute; top:auto; bottom:0; background:transparent; transition:none;}



:root{
	--lnb_height: 100rem;
}

/*.lnb ul li a.on{ color:#fff; }*/

@media(max-width:1279px){
	.area_subVisual{height:350rem;}
	.area_subVisual h2 {margin-bottom:30rem;}
}

@media (max-width:767px){
	:root{
		--lnb_height: 60rem;
	}

	.lnb{overflow-x:auto; width:100%;overflow-y: hidden; }
	.lnb ul {display:table; height:100% !important; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb ul li{position:relative; display:table-cell; padding:0 15px; vertical-align:middle;}
	.lnb ul li:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}
	.lnb ul li a {display:block; padding:0; white-space:nowrap;}
	.lnb ul li:hover a::before,
	.lnb ul li.on a::before{display:none;}
	.lnb ul li.on::before{position:absolute; left:0; top:0; content:''; width:100%; height:2px; background:#fff;}

}

/* common content */
#content{ min-height:300px; padding: 7.5em 0; }

#content.company,
#content.service {padding-top:0;}

.sub_title,
.ss_title {margin-bottom: 0.810em;}
.sub_title h2,
.ss_title {font-size:var(--font_size37); font-weight:600;}

.sub_section {padding-top:7.5em;}

.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):is(:first-child){ border-left: 0; }
.common_table :is(th, td):is(:last-child){ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: var(--font_size17); font-weight: 500; }

@media (max-width:767px){
	#content {padding: 4.286em 0;}
	.sub_section {padding-top:4.286em;}
}
/* vw 반응형을 활용한 사이트입니다
16px은 16rem처럼 단위를 바꿔서 사용해주세요
글씨 크기의 경우 base에 있는 변수 var(--font_size16)을 활용하세요 */



/* profile */
.area_profile .box {display:flex; gap: 2em; justify-content:space-between; }
.area_profile .box dl {width: 60%;}
.area_profile .box dl dt {font-size:var(--font_size24); font-weight:800;}
.area_profile .box dl dd {padding-right:50rem; margin-top:20rem; line-height:1.6; color:var(--gray);}
.area_profile .box article {position:relative; display:flex; align-items:center; justify-content:flex-end; margin-left:100px;}
.area_profile .box article:before {position:absolute; left:50%; top:50%; content:''; width:80%; height:30%; background:#f7f7f7; transform:translate(-50%, -50%);}
.area_profile .box article > *{position:relative;}
.area_profile .box article p {padding:30rem;  font-size:var(--font_size19); font-weight:700; border-radius:100%; box-sizing:border-box; aspect-ratio:1/1; background:#f1f0f0; border:1px solid #efefef;}
.area_profile .box article i {padding:0 15rem;}
.area_profile .box article div {display:grid; align-items:center; padding:30rem; background:var(--primary); border-radius:100%; aspect-ratio:1/1; box-shadow:10px 10px 30px rgba(200, 28, 31, .15);}
.area_profile .profile_img {width: 40%;text-align: right;}
.area_profile .profile_img img {object-fit: contain; max-width: 100%;}

/* culture */
.area_culture ul {display:grid; grid-template-columns: repeat(3, 1fr); gap:0 40rem;}
.area_culture ul li {position:relative; color:var(--gray); line-height:1.6;}
.area_culture ul li em {display:block; margin-bottom:10rem; font-size:var(--font_size14); font-weight:600; color:var(--primary); text-transform:uppercase;}
.area_culture ul li h3 {position:relative; font-size:var(--font_size19); font-weight:800; color:#aaa; margin-bottom:20rem; padding-bottom:20rem; border-bottom:1px solid var(--border);}
.area_culture ul li h3 span {color:var(--black);}
.area_culture ul li h3 img {position:absolute; right:25px; bottom:20rem; height:25rem; opacity:.15;}

/* quality */
.area_quality ul {display:grid; grid-template-columns: 1fr 50rem 1fr 50rem 1fr 50rem 1fr;}
.area_quality ul li {position:relative;}
.area_quality ul li img {max-width:100%;}
.area_quality ul li p {position:absolute; bottom:0; width:100%; padding:25px; color:#fff; font-weight:700; box-sizing:border-box;}
.area_quality ul li p span {color:var(--primary);}
.area_quality ul i {position:relative;}
.area_quality ul i span {position:absolute; left:50%; top:50%; width:33.33%; height:4px; background:#ccc; transform:translate(-50%, -50%);}
.area_quality ul i span:last-child {transform:translate(-50%, -50%) rotate(90deg);}

/* history */
.area_history ul {position:relative; margin-left:10px; padding:1px 0 20px;}
.area_history ul:before {position:absolute; left:-1px; top:0; content:''; width:1px; height:100%; background:var(--border);}
.area_history ul li {display:flex; margin-top:30px; align-items:center;}
.area_history ul li h3 {position:relative; padding-left:100rem; font-size:var(--font_size24); font-weight:800; transition:.3s;}
.area_history ul li h3:before {position:absolute; left:0; content:''; width:80rem; height:1px; inset:0; margin:auto auto auto 0; box-sizing:border-box; border-top:1px dashed var(--border); transition:.3s;}
.area_history ul li h3 i {position:absolute; inset:0; margin:auto auto auto 0; width:0.708333em; height:0.708333em; padding:4px; border-radius:100%; border:1px solid #bbb; box-sizing:border-box; transform:translateX(-50%);  transition:.3s;}
.area_history ul li h3 i span {display:inline-block; width:100%; height:100%; background:#bbb; border-radius:100%;}
.area_history ul li p {display:inline-block; margin-left:50rem; padding:18rem 25rem; color:var(--gray); border-radius:7px; border:1px solid #ccc;  transition:.3s;}

.area_history ul li:hover h3 {color:var(--primary);}
.area_history ul li:hover h3 i,
.area_history ul li:hover p {border-color:var(--primary);}
.area_history ul li:hover h3:before {border-color:#999;}
.area_history ul li:hover h3 i span {background:var(--primary);}


/* partner */
.area_partner .box{background:url(../images/content/company_partner_bg.jpg)no-repeat center/cover;}
.area_partner .box h3{padding:120rem 10rem; box-sizing:border-box; font-size:var(--font_size25); text-align:center; color:#fff;}
.area_partner .box h3 > br{display:none;}
.area_partner .box .partner_logo{display:flex; margin:auto; padding:45rem 0; justify-content:space-evenly; align-items:center; background:#fff; width:85%;}
.area_partner .box .partner_logo li{height:60rem;}
.area_partner .box .partner_logo li img{display:block; height:100%;}

@media(max-width:1279px){
    .area_partner .box h3{padding:100rem 10rem;}
    .area_partner .box .partner_logo{padding:35rem 0;}
    .area_partner .box .partner_logo li{height:45rem;}
}
@media(max-width:767px){
    .area_partner .box h3 > br{display:block;}
    .area_partner .box h3{padding:70rem 10rem;}
    .area_partner .box .partner_logo{padding:25rem 0; flex-wrap:wrap; width:90%;}
    .area_partner .box .partner_logo li{width:45%; height:35rem;}
    .area_partner .box .partner_logo li:nth-child(n+3){margin-top:20rem;}
    .area_partner .box .partner_logo li img{margin:auto;}
}


/* establishment history */
.area_history02 .img_box{position:relative;}
.area_history02 .img_box .img{display:block; padding:40rem; margin:auto; max-width:1186px; width:100%; box-sizing:border-box; border:1px solid #ddd;}
.area_history02 .img_box .img img{width:100%;}
.area_history02 .img_box .mo_view{display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.area_history02 i{display:none; margin-top:15rem; font-size:var(--font_size14); color:#888;}
@media(max-width:767px){
    .area_history02 .img_box .img{padding:20rem;}
    .area_history02 .img_box .mo_view{display:block;}
    .area_history02 i{display:block;}
}
/* establishment history > mobile */
.mo_history_img{display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; background:#111;}
.mo_history_img .img{display:block; padding:10rem; max-width:1186px; width:100%; box-sizing:border-box; background:#fff;}
.mo_history_img .img img{width:100%;}


/* area_service */
.area_service .ss_define {display:flex; justify-content:space-between;}
.area_service .ss_define div {width:50%; }
.area_service .ss_define div p {margin-top:20rem; line-height:1.6; color:var(--gray);}
.area_service .ss_define img {max-width:100%;}
.area_service .box {margin-top:50rem;}
.area_service .box h3 {margin-bottom:15rem; font-size:var(--font_size19); font-weight:700;}
.area_service .box ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.area_service .box ul li {display:flex; padding:20rem 25rem; background:#f7f7f7;}
.area_service .box ul li span {position:relative; font-weight:600; color:#aaa; padding-right:25rem; margin-right:25rem;}
.area_service .box ul li span:after {position:absolute; right:0; top:4.2rem; content:''; width:1px; height:15px; background:var(--border);}
.area_service .box.li_3 ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}



@media(max-width:1279px){
	.area_profile .box dl dd {padding-right:0;}
	/* .area_profile .box {display:grid; grid-template-columns:1fr; gap:50rem 0; word-break:break-word;} */
	/* .area_profile .box dl dd {padding-right:0;}
	.area_profile .box article {justify-content:flex-start; margin-left:0;}
	.area_profile .box article:before {left:0; width:50%;} */
}

@media(max-width:1080px){
	.area_profile .box {flex-direction: column;}
	.area_profile .box dl {width: 100%;}
	.area_profile .box dl dd {padding-right: 0;}
	.area_profile .profile_img {width: 100%; text-align: left;}
	.area_profile .profile_img img {object-fit: cover;width: 100%;}
}

@media (max-width:1024px){
	.area_quality ul {display:flex; flex-wrap:wrap; gap:50rem 0; grid-template-columns:auto;}
	.area_quality ul li {width:calc((100% - 50rem)/2);}
	.area_quality ul li img {width:100%;}
	.area_quality ul i {width:50rem;}
	.area_quality ul i span {height:2px;}
	.area_quality ul i.m_hide {display:none;}

	.area_service .ss_define {flex-wrap:wrap; gap:30rem 0;}
	.area_service .ss_define div {width:100%;}
	.area_service .box ul {grid-template-columns:repeat(2, 1fr) !important;}
}


@media (max-width:767px){

	.area_profile .box article {justify-content:space-between;}
	.area_profile .box article p,
	.area_profile .box article div {padding:20rem;}
	.area_profile .box article:before {width:90%; left:50%;}
	.area_profile .box article div img {height:35rem}
	.area_profile .box article i {padding: 0;}

	.area_culture ul {grid-template-columns:1fr; gap:40rem 0;}
	.area_culture ul li h3 {margin-bottom:15rem; padding-bottom:15rem;}

	.area_history ul li {flex-wrap:wrap; padding-left:50rem;}
	.area_history ul li h3 {padding-left:50rem; margin-left:-50rem;}
	.area_history ul li h3:before {width:30rem;}
	.area_history ul li p {margin-top:10px; margin-left:0; width:100%; box-sizing:border-box;}

	.area_service .box ul {grid-template-columns:1fr !important;}

}

@media (max-width:420px){

	.area_quality ul {gap:0;}
	.area_quality ul li {width:100%;}
	.area_quality ul i {display:block; width:100%; height:50rem;}
	.area_quality ul i span {width:15px;}
	.area_quality ul i.m_hide {display:block;}



}