@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:440rem; text-align:left; color: #fff; }
.subVisual .inr {padding-top: 5em;}
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/sub_visual01.jpg')}
.subVisual.business::before{ background-image:url('/images/content/sub_visual02.jpg')}
.subVisual.gallery::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_visual05.jpg')}
.subVisual h2{font-family: var(--font-kcg); font-size: var(--fs42); font-weight: 500; margin-bottom: 0.3em;}
.subVisual span {display: block; font-size: 17rem; font-weight: 300; }

@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: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}

/* lnb */
.lnb{ background: var(--white);border-bottom: 1px solid #e5e5e5; text-align:center; font-size:17rem; font-weight: 500; color: #cacaca; z-index:5; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 32rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 70rem;}
.lnb a:hover,
.lnb a.on{ color: var(--primary); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-top: 2px solid currentColor; }
@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; }
}

/* common content */
#content{min-height:300px; padding:100rem 0;}
.sub_title{margin-bottom:50rem;}
.sub_title h2 {position: relative; font: 500 var(--fs35)/1.5 var(--font-kcg); text-align: center; padding-top: 20rem;}
.sub_title h2::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(45deg); width: 7rem; height: 7rem; 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; }

@media(max-width:767px){
	.hide_mo {display: none;}
	#content{padding:60rem 0;}
	.sub_title{margin-bottom:30rem;}
}

/* about1 - 인사말 */
.about1 {display: flex; gap: 50rem; align-items: flex-end; justify-content: space-between;}
.about1 h3 { font: 500 var(--fs35)/1.4 var(--font-kcg); margin-bottom: 30rem;}
.about1 h3 em {display: block; font-weight: 500; font-size: 16rem; color: var(--primary); margin-bottom: 15rem;}
.about1 dl {position: relative; padding: 60rem 0; background: #f6f7f9;}
.about1 dl::before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f6f7f9; z-index: -1;}
.about1 dd{font-size: 17rem; line-height: 1.6;}
.about1 dd+dd{margin-top: 25rem;}
.about1 dd.ceo {display: flex; align-items: center; gap: 10rem; margin-top: 40rem;}
.about1 dd.ceo b {font-size: var(--fs25); font-weight: 400;}
.about1__img img {width: 100%; max-width: 100%;}

@media(max-width:767px){
	.about1__img {display: none;}
	.about1 h3 {margin-bottom: 20rem;}
	.about1 h3 em {margin-bottom: 10rem;}
	.about1 dl {padding: 40rem 0;}
	.about1 dd+dd{margin-top: 15rem;} 
	.about1 dd.ceo {margin-top: 20rem;}
}

/* about2 - 오시는길 */
.about2 {}
.location__map {}
.location__txt {}
.location__map .root_daum_roughmap {width: 100%;}
.location__map .root_daum_roughmap .wrap_map {height: 500rem;}
.location__map .hide {display: none;}
.location__map .map_border {display: none;}
.location__txt {display: flex; align-items: center;justify-content: center; padding: 50rem; background: #f6f7f9;}
.location__txt h4 img {width: 155rem;}
.location__txt .info {position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20rem 50rem; margin-left: 60rem; padding-left:60rem;}
.location__txt .info::after {content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #e1e1e1;}
.location__txt .info dl:first-child {margin-left: 0;}
.location__txt dl {font-size: 17rem;}
.location__txt dl dt {margin-bottom: 6rem; font-weight: 600;}
.location__txt dl dd {color: #444;}
.location__txt dl dd:has(p) {display: flex; align-items: center;}
.location__txt dl dd > p {display: flex; align-items: center; margin-right: 20rem;}

@media(max-width:767px){
	.location__map .root_daum_roughmap .wrap_map {height: 400rem;}
	.location__txt {flex-direction: column; padding: 40rem 30rem;  align-items: flex-start; }
	.location__txt h4 img {width: 140rem;}
	.location__txt .info {width: 100%; flex-direction: column; align-items: flex-start; padding-left: 0; gap: 15rem; margin-left: 0; padding-top: 30rem; margin-top: 30rem;}
	.location__txt .info::after {width: 100%; height: 1px;}
	.location__txt dl {font-size: 16rem;}
	
}

/* business - 창업절차 */
.business {}
.business h3 {font-size:var(--fs32); font-weight: 700; line-height: 1.4; margin-bottom: 50rem;}
.business h3 em {display: block; font-weight: 500; font-size: 16rem; color: var(--primary); margin-bottom: 10rem;}
.business__list {display: grid; gap: 15rem; grid-template-columns: repeat(3,1fr);}
.business__list li {padding: 60rem 50rem; display: flex; flex-wrap: wrap; gap: 15rem 40rem; align-items: center; box-sizing: border-box; border-radius: 4rem; border: 1rem solid #e5e5e5; }
.business__list img {height:66rem;}
.business__list dt {font-size: var(--fs18); font-weight: 700; margin-bottom: 10rem;}
.business__list dd {color: #444;}
.business .line {position:relative; width:100%; height:10px; margin-top:30px; border-radius:10px; background:#f4f5f9; box-shadow:inset 3px 3px 5px rgba(0, 0, 0, .05);}
.business .line p {position:absolute; height:100%; border-radius:10px; background:var(--primary); animation: process 10s linear infinite ;}
.business .line p:after {position:absolute; right:2px; top:50%; content:''; width:6px; height:6px; border-radius:10px; background:#fff; transform:translateY(-50%);}

@-webkit-keyframes process {
	0% {width:0%;}
	100% {width:100%;}
}

@media(max-width:767px){
	.business__list {grid-template-columns: repeat(1,1fr);}
	.business__list li {padding: 35rem;}
	.business__list img {height:55rem;}
}