@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:410rem; padding-top: 40rem; text-align:center; color: #fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.notice::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.online::before{ background-image:url(../images/content/sub_visual04.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual h2{ font-size: var(--fs40); }
@media(prefers-reduced-motion:no-preference){
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.area_subVisual .inr *{ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual .inr *:nth-child(2){ animation-delay: .4s; }
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}
@media(max-width:1279px){
	.area_subVisual{height:300rem;}
}

/* lnb */
.lnb_wrap {border-bottom:1px solid #ddd;}
.lnb { left:0; bottom:0; width:100%;  text-align:center; z-index:11; max-width: 1400rem; margin: 0 auto; display: flex; justify-content: space-between;}
.lnb ul { height: 4.0625em; position: relative; display: flex;} 
.lnb ul li {}
.lnb ul li:first-child {padding-left:0 ;background :none} 
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {font-weight: 500;font-size:18rem;color: #a9a9a9;transition: 0.2s; font-weight: 600; padding: 0 30px; height: 100%; display: flex; align-items: center;}
.lnb ul li:hover a, 
.lnb ul li a.on{ color: var(--primary); border-bottom: 5px solid var(--primary);}
.area_breadcrumb{ position: relative; top: -1rem; left: 8px; display: flex; gap: 45rem; align-items: center; color: #666;}
.area_breadcrumb .home{ position: relative; top: -1rem; right: 3rem; width: 18rem; height: 20rem; 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:1279px){
	.lnb {width: 98%;}
}
@media (max-width:767px){
	.area_breadcrumb {display: none;}
	.lnb{overflow-x:auto; width:100%;overflow-y: hidden; }
	.lnb ul{display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb ul li{display:table-cell; padding:0 15px; vertical-align:middle;}
	.lnb ul li a{ white-space:nowrap; padding: 0;}
	.lnb ul li a.on::before{ width: 4px; height: 4px; }
	.lnb ul li:first-child a.on::before{ right: calc( 100% - 10px ); }
}

/* common content */
#content{ min-height:300px; padding: 90rem 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }

.common_h2{position: relative; margin-left: 0.69047619em; font-family: 'poppins'; font-size: var(--fs42); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; color: var(--primary);}
.common_h2::before{ content: ''; position: absolute; left: -0.47619048em; top: -0.47619048em;  display: inline-block; width: 0.73809524em; height: 0.85714286em; background: url(/images/common/cat.png) no-repeat 50% / contain; z-index: -1; }

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


/* 인사말 */
.sub_about1__pic {background: url(/images/content/about01_bg01.jpg) no-repeat center/cover; aspect-ratio: 1400/800; position: relative; z-index: -1;}
.sub_about1__cont h2 {font-size: 42rem; font-weight: 800; color: var(--primary); text-align: right; position: relative; padding-right: 70rem; margin-bottom: 100rem;}
.sub_about1__cont h2::after {content: ''; display: block; width: 180rem; height: 180rem; background: #e6ebef; border-radius: 50%; position: absolute;top: -100%; right: 0; z-index: -1;}
.sub_about1__cont > p {font-size: 20rem; color: #444; margin:0 40rem 40rem ;}
.sub_about1__banner {background: url(/images/content/about01_bg02.jpg) no-repeat center/cover; aspect-ratio: 1400/280; position: relative; padding: 0 40rem; box-sizing: border-box; display: flex; justify-content: center;  align-items: center; margin-top: 100rem;}
.sub_about1__banner::before {content: url(/images/common/logo.png); position: absolute; top: 25rem; left: 20rem; opacity: 0.4;}
.sub_about1__banner ul {display: flex; width: 100%; margin-top: 40rem;}
.sub_about1__banner ul li {width: calc(100%/3); color: #fff; display: flex; flex-direction: column; align-items: center; position: relative; box-sizing: border-box; padding: 0 20rem; text-align: center;}
.sub_about1__banner ul li::before {content: ''; display: block; width: 2px; height: 60rem; background: #fff; position: absolute; right: -1px;}
.sub_about1__banner ul li:last-child::before {display: none;}
.sub_about1__banner ul li span {height: 60rem;}
.sub_about1__banner ul li p a {color: #fff; width: 100%; display: block; }

@media(max-width:1279px){
	.sub_about1__banner ul li {gap: 10rem;}
	.sub_about1__banner ul {margin-top: 15rem;}
}
@media(max-width:767px){
	.sub_about1__cont > p {margin: 0 10rem 40rem;}
	.sub_about1__banner ul {flex-direction: column; gap: 30rem;}
	.sub_about1__banner ul li {width: 100%;padding-bottom: 30rem; gap: 30rem;}
	.sub_about1__banner ul li::before {width: 40rem; height: 2rem; right: 50%; transform: translateX(50%); bottom: 0;}
	.sub_about1__banner ul li span {height: auto;}
	.sub_about1__banner {padding: 40rem 20rem;}
}


/* 연혁 */
.sub_about2 .sub_about2__cont {position: relative;}
.sub_about2 .sub_about2__cont:before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1rem; height: 100%; overflow: hidden; background: #ddd;}
.sub_about2 .his_box {display: flex; position: relative; margin: 70rem 0; box-sizing: border-box;}
.sub_about2 .his_box:nth-child(even){flex-direction: row-reverse;}
.sub_about2 .his_box:nth-child(odd){text-align: right;}
.sub_about2 .his_box:before {content: ''; position: absolute; top:7rem; left: 50%; transform: translate(-50%, 0%); width: 22rem; height: 22rem; border-radius: 50%; border: 1rem solid #ddd; background: #fff; transition: all .4s ;}
.sub_about2 .his_box:after {content: ''; position: absolute; top:15rem; left: 50%; transform: translate(-50%, 0%); width: 8rem; height: 8rem; border-radius: 50%; background: #ddd; transition: all .4s;}
.sub_about2 .his_box.active:before {border: 1rem solid var(--primary);}
.sub_about2 .his_box.active:after {background: var(--primary);}
.sub_about2 .his_box h3 {font-size: var(--fs40); font-weight: 800;line-height: 1; padding: 0 80rem 40rem;}
.sub_about2 .his_box dl {}
.sub_about2 .his_box dd {font-size: 18rem; font-weight: 400; display: flex; padding: 0 80rem; border-top: 1px solid #ededed; padding-top: 30rem;}
.sub_about2 .his_box dd + dd {margin-top: 30rem; }
.sub_about2 .his_box > div {width: 50%;  box-sizing: border-box;}
.sub_about2 .his_box dl dd div {line-height: 1.3;}
.sub_about2 .his_box dl dd div:nth-of-type(2) {width: calc(100% - 90rem); display: flex; flex-direction: column; gap: 10rem;}
.sub_about2 .his_box dl dd .month {font-size: 20rem; color: #fff; font-weight: 600; width: 80rem;height: 80rem;background:var(--primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.sub_about2 .his_box div dl dd {display: flex; gap: 20rem; align-items: center;}
.sub_about2 .his_box:nth-of-type(2n-1) div dl dd {flex-direction: row-reverse;}

@media (max-width: 1280px){
	.sub_about2 .his_box dd {padding: 30rem 0 0 40rem;}
	.sub_about2 .his_box:nth-of-type(2n-1) div dl dd {padding: 30rem 40rem 0 0;}

}

@media (max-width: 767px){
	.sub_about2 .his_box {padding: 30rem 0;}
	.sub_about2 .his_box:before {width: 20rem; height: 20rem; top: 35rem;}
	.sub_about2 .his_box:after {width: 6rem; height: 6rem; top: 43rem;}
	.sub_about2 .his_box > div {padding: 0;}
	.sub_about2 .his_box dd {font-size: 15rem;}
	.sub_about2 .his_box dl dd .month {font-size: 18rem; width: 60rem; height: 60rem; }
	.sub_about2 .his_box div dl dd {flex-direction: column; padding: 30rem 5rem 0 5rem;}
	.sub_about2 .his_box:nth-of-type(2n-1) div dl dd {flex-direction: column; padding: 30rem 5rem 0 5rem;}
	.sub_about2 .his_box dl dd div {text-align: center;}
	.sub_about2 .his_box dl dd div:nth-of-type(2) {width: 100%;}
}

/* 조직도 */

.sub_about3__pic figure img {width: 100%;}
.sub_about3__pic .about3_m {display: none;}

@media(max-width:767px){
	
	.sub_about3__pic .about3_pc {display: none;}
	.sub_about3__pic .about3_m {display: block;}
	
}


/* 오시는길 */

.sub_about4__map .root_daum_roughmap {width: 100%; }
.sub_about4__map .root_daum_roughmap .wrap_map {height: 400rem;}
.sub_about4__map .wrap_controllers {display: none;}

.sub_about4__txt {border: 1px solid #ededed; box-sizing: border-box; padding: 40rem 40rem 60rem; margin-top: 20rem;}
.sub_about4__txt p {font-size: 16rem;color: #666; text-align: left; margin: 20rem 0 10rem; }
.sub_about4__txt ul {display: flex; margin-top: 20rem;}
.sub_about4__txt ul li {width: calc(100%/3); display: flex; flex-direction: column; align-items: center; position: relative;}
.sub_about4__txt ul li::before {content: ''; display: block; width: 1px; height: 80rem; background: #ccc; position: absolute; left: 0; top: 50%;    transform: translateY(-50%);}
.sub_about4__txt ul li:first-child:before {display: none;}
.sub_about4__txt ul li h2 {margin: 20rem 0 10rem;}
.sub_about4__txt ul li p {text-align: center;}

.sub_about4__txt >  div {font-size: 28rem; font-weight: 600;  padding: 0 0 30rem; border-bottom: 1px solid #ededed;}
.sub_about4__txt >  div b {color: var(--primary); position: relative;}
.sub_about4__txt >  div p {color: var(--primary); font-size: 18rem; font-weight: 800;}
.sub_about4__txt >  div h2 {line-height: 1.2;}

@media(max-width:767px){
	.sub_about4__txt > div {font-size: 20rem;}
	.sub_about4__txt ul {flex-direction: column; gap: 40rem;}
	.sub_about4__txt ul li {width: 100%;}
	.sub_about4__txt ul li::before {top: -10%; left: 50%; transform: translate(-50%,0); width: 20%; height: 1px;}
	
}