@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/
:root{ --lnb-height: 65rem; }

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:520rem; padding: calc(var(--header-height) + .2%) 0 var(--lnb-height); text-align:center; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/vis-1.jpg'); }
.subVisual.koweb_product::before{ background-image:url('/images/content/vis-2.jpg'); }
.subVisual.board_notice::before{ background-image:url('/images/content/vis-3.jpg'); }
.subVisual.koweb_online_counsel::before{ background-image:url('/images/content/vis-4.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/vis-4.jpg'); }
.subVisual h2{ margin-bottom: 0.28571429em; font-size: var(--fs42); }

@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 .3s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .6s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* lnb */
.lnb{ position: relative; margin-top: calc( var(--lnb-height) * -1); text-align: center; font-size:17rem; font-weight: 500; color: #fff; z-index: 5; }
.lnb::before{ content: ''; position: absolute; inset: 0; border-top: 1px solid color-mix(in srgb, currentColor, #0000 80%); z-index: -1; }
.lnb ul{ display: flex; justify-content: center; }
.lnb a{ position: relative; display: flex; align-items: center; justify-content: center; min-width: 160rem; height: var(--lnb-height); padding: 2rem 1ch 0; }
.lnb a.on{ background: var(--primary); }
@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: clamp(70rem, calc( 113 / var(--inr) * 100vw ), 113rem) 0; }
.sub_title{ margin-bottom: 60rem; text-align: center; }
.sub_title [data-menu-eng]{ font-size: 18rem; letter-spacing: .02em; color: var(--primary); }
.sub_title [data-menu-snb]{ margin-top: 0.65714286em; font-size:var(--fs35); }
.sub_title::after{ content: ''; margin: 28rem auto 40rem; display: block; width: 1px; height: 40rem; background: linear-gradient(180deg, var(--primary) 50%, #e5e5e5 50%); }
br.mo-show {display: none;}

@media(max-width:767px){
	.sub_title{ margin-bottom: 30rem;}
	.sub_title::after{ margin: 18rem auto 30rem; height: 30rem; }
	/* br.mo-show {display: block;} */
}
/* ABOUT1 - 인사말 */
.about1 {}
.about1 .info{}
.about1 .title .cs {display: flex; justify-content: space-between; align-items: center; margin-bottom:20rem;}
.about1 .title .cs ul {display: flex; align-items: center; gap: 15rem;  font-weight: 500; color: #888;}
.about1 .title .cs span {display: block; font-weight: 600; color: var(--primary); }
.about1 .title h2 {font-size: var(--fs35); line-height: 1.4; }
.about1 .img{width: 100%; height: 300rem; background: #ddd; margin: 30rem 0 35rem;}
.about1 .img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
.about1 .text {padding: 0 20rem; font-size: 17rem; line-height: 1.7; color: #555; box-sizing: border-box;}
.about1 .text dd+dd {margin-top: 30rem;}
.about1 .text p.ceo_sign {font-size: 18rem;  font-weight: 600; color: #000; margin-top: 40rem; }
.about1 .text p.ceo_sign span {position: relative; padding-left: 15rem; margin-left: 15rem;}
.about1 .text p.ceo_sign span::before{content: ''; position: absolute; top: 5rem; left: 0; width: 1rem; height: 12rem; background: #c8c8c8;}

@media(max-width:767px){
	.about1 .title .cs ul {font-size: 15rem;}
	.about1 .title .cs {margin-bottom: 15rem;}
	.about1 .title span { font-size: 15rem; font-weight: 500; }
	.about1 .title h2 {font-size: 22rem; line-height: 1.3;}
	.about1 .img {height: 220rem; margin: 20rem 0 25rem;}
	.about1 .text {font-size: 15rem; line-height: 1.6; padding: 0;}
	.about1 .text dd+dd {margin-top: 20rem;}
	.about1 .text p.ceo_sign {font-size: 16rem; margin-top: 25rem;}
	.about1 .text p.ceo_sign span {padding-left: 10rem; margin-left: 10rem;}
	.about1 .text p.ceo_sign span::before {top: 3rem;}
}

/* ABOUT2 - 연혁 */
.about2 {text-align: center;}
.history-cont {display: flex; flex-direction: column; padding-bottom: 60rem;}
.history-item {position: relative; width: 50%; margin-left: auto; padding:0 60rem 90rem; padding-right: 0; text-align: left; box-sizing: border-box;}
.history-item::before {position: absolute; left: 0; top: 35rem; content: ''; width: 1px; height: 100%; background: #eaeaea;}
.history-item::after {position: absolute; left: 0; top: 35rem; content: ''; width: 1px; height: 0; background: #91bc3c; transition: height .7s;}
.history-item:last-child {padding-bottom: 0 !important;}
.history-item:last-child::before {height: 0;}
.history-item i {position: absolute; left: -3rem; top: 33rem; width: 8rem; height: 8rem; border-radius: 100%; background: #c5c5c5; transition: .5s;}
.history-item i::before {position: absolute; left:50%; top: 50%; content:''; width: 23rem; height: 23rem; border-radius: 100%; background: #bcbcbc; transform: translate(-50%, -50%); opacity: .2; transition: .5s;}
.history-item h4 {margin-bottom: 20rem; font-size: 35rem; font-weight: 800; }
.history-item dl {display: flex; align-items: flex-start;}
.history-item dl + dl {margin-top: 15rem;}
.history-item dt {display: inline-block; min-width: 90rem; margin-right: 15rem; text-align: center; font-size: 15rem; font-weight:400; padding: 5rem 15rem; border-radius: 30rem; background: #91bc3c; color: #fff; }
.history-item .list li {position: relative; padding-left: 18rem; margin-top: 5rem;}
.history-item .list li::before {position: absolute; content: ''; top: 10rem; left: 0; width: 7rem; height: 1rem; background: #888;}
.history-item.active i,
.history-item.active i::before{background:#91bc3c;}
.history-item.active::after {height: 100%;}
.history-item:last-child.active::after {height: 0;}
.history-item:nth-child(2n) {margin-left: 0; padding-left: 0; padding-right: 60rem; text-align: right;}
.history-item:nth-child(2n)::before,
.history-item:nth-child(2n)::after {left: auto; right: -1px;}
.history-item:nth-child(2n) i {left: auto; right: -5rem;}
.history-item:nth-child(2n) dl {flex-direction: row-reverse;}
.history-item:nth-child(2n) dt {margin-left: 25rem; margin-right: 0;}

@media(max-width:767px){
	.history-item {width: 100%; padding: 0 0 60rem 60rem;}
	.history-item::before,
	.history-item::after {top: 20rem; left: 25rem;}
	.history-item h4 {margin-bottom: 15rem; font-size:25rem;}
	.history-item dl {align-items: flex-start;}
	.history-item dt {min-width: 82rem}
	.history-item i,
	.history-item:nth-child(2n) i {left: 21rem; top: 15rem;}
	.history-cont {text-align: left;}
	.history-cont::before {left: 25rem;}
	.history-item:nth-child(2n) {text-align: left; padding-right: 0; padding-left: 60rem;}
	.history-item:nth-child(2n) dl {flex-direction: row;}
	.history-item:nth-child(2n) dt {margin-left: 0; margin-right: 25rem;}
	.history-item:nth-child(2n)::before,
	.history-item:nth-child(2n)::after {left: 25rem; right: auto;}
}

/* ABOUT3 - 오시는길 */
.about3 { }
.about3 .map{width: 100%;}
.about3 .root_daum_roughmap{width: 100%;}
.about3 .root_daum_roughmap .wrap_map{height: 450rem; border-bottom: 1px solid #dfdfdf;}
.about3 .root_daum_roughmap .wrap_controllers {display: none;}
.about3 .map_info {position: relative; width: 95%; margin: -42rem auto 0; display: grid; grid-template-columns: repeat(3,1fr); text-align: center; padding: 30rem 0; box-sizing: border-box; background: var(--primary);box-shadow: 0px 2rem 10rem rgba(0, 0, 0, 0.1); z-index: 20;}
.about3 .map_info li {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10rem 15rem; font-weight: 300; padding: 0 20rem; align-items: center; color: #fff;}
.about3 .map_info li+li {border-left: 1rem dotted rgba(255, 255, 255, 0.3);}
.about3 .map_info span {font-weight: 500;}

@media(max-width:767px){
	.about3 .map {margin-bottom: 0;}
	.about3 .root_daum_roughmap .wrap_map {height: 350rem;}
	.about3 .map_info {grid-template-columns: repeat(1,1fr); width:100%;padding: 0; margin: 0; background: 0; box-shadow: none;}
	.about3 .map_info li {padding: 20rem 0; align-items: flex-start; flex-direction: column; color: #000;}
	.about3 .map_info li+li {border-left: 0; border-top: 1rem dotted #c8c8c8;}
}