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

/* sub visual */
.area_subVisual{ overflow: hidden; position:relative; height:500rem; padding-top: var(--header_height); box-sizing: border-box; color: #fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: var(--black) 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/visual1.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/visual2.jpg); }
.area_subVisual.social::before{ background-image:url(../images/content/visual3.jpg); }
.area_subVisual.online::before{ background-image:url(../images/content/visual4.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/visual4.jpg); }
.area_subVisual .inr{ display: flex; align-items: center; padding-top: 0.6%; box-sizing: border-box; }
.area_subVisual h2{ font-size: var(--fs65); letter-spacing: 0; }
@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: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(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:300rem;}
}

/* lnb */
.lnb_wrap{ background: #1c499e; font-size: 16rem; font-weight: 500; color: #fff; }
.lnb_wrap .inr{ display: flex; }
.lnb__home{ position: relative; margin-right: clamp(0px, calc( 101 / var(--inner) * 100vw ), 101rem); display: none; align-items: center; }
.lnb__home::before{ content: ''; position: absolute; inset: 0; margin: auto calc(clamp(0px, calc( 50 / var(--inner) * 100vw ), 50rem) * -1) auto auto; display: inline-block; width: 4rem; height: 4rem; background: currentColor; border-radius: 50%; transform: translateX(70%); opacity: .3; }
.lnb__svg{ height: 1em; fill: currentColor; }
.lnb ul{ display: flex; gap: clamp(10rem, calc( 49 / var(--inner) * 100vw ), 49rem); }
.lnb a{ display: flex; align-items: center; height: 70rem; letter-spacing: 0; }
.lnb a:not(:is(.on, :hover)){ opacity: .3; }
@media(min-width:768px){
	.lnb__home{ display: flex; }
	.lnb_wrap{ font-size: 18rem; }
}

/* common content */
.cont_inr {position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem);  height: 100%; box-sizing: border-box; z-index: 2; }
#content{ min-height:560px; padding: 114rem 0; }
.sub_title{ margin-bottom: 69rem; padding: 0 0 35rem; text-align: center; border-bottom: 1px solid #e1e1e1; }
.sub_title__eng{ font-size: 18rem; font-weight: 600; opacity: .4; }
.sub_title__title{ margin-top: 0.33333333em; font-size:var(--fs45); font-weight: 700; }
section + section{ margin-top: 61rem; }
.justified_layout{ display: grid; row-gap: 40rem; }
.common_h3{ font-size: var(--fs35); font-weight: 700; color: #111; }
.common_p{ margin-top: 14rem; font-size: 17rem; letter-spacing: 0; color: #666; }

.common_table{ position: relative; text-align: center; color: #111; }
.common_table::before{ content: ''; position: absolute; inset: 0; border: 1px solid #888; pointer-events: none; }
.common_table :is(thead, tfoot){ background: #f7f7f7; font-size: 18rem; font-weight: 700; }
.common_table :is(tbody, tr + tr){ border-top: 1px solid #dfdfdf; }
.common_table th{ padding: 16rem 10rem 15rem; }
.common_table td{ padding: 13.2rem 10rem 12rem; }
.common_table :is(th + th, td + td){ border-left: 1px solid #c3c3c3; }
.common_table td{ font-size: 17rem; }

.separator{ margin: 59rem 0; height: 6rem; background: repeating-linear-gradient(-45deg, #f8f8f8 0px, #f8f8f8 4px, #e2e2e2 4px, #e2e2e2 5px); }
@media(min-width:768px){
	.justified_layout{ grid-template-columns: 28.57142857% 1fr; }
	.justified_layout .common_h3{ margin-top: -.31428571em; }
}


/* TODO: separator 작업하면서 서브 페이지 완료, 비주얼 나머지 이미지 추가, 페이지 스크롤 애니메이션 효과 추가 */


/* 인사말 */
.sub_about1__pic figure img {width: 100%;}
.sub_about1__pic {display: flex; flex-direction: column; gap: 20rem; width: 100%;}
.sub_about1 .cont_inr {display: flex; gap: 80rem; flex-direction: column;}
.sub_about1__con {width: 100%;display: flex; flex-direction: column; gap: 40rem; justify-content: flex-end;}
.sub_about1__con .common__h2 { position: relative; font-size: 30rem;font-weight: 500; line-height: 1.2em;}
.sub_about1__con .common__h2::before{ content: ''; position: absolute; left: -50rem; top: -40rem; display: inline-block; width: 80rem; height: 80rem; background: linear-gradient(120deg, var(--primary), #e7f2ff); border-radius: 50%; z-index: -1; }
.sub_about1__txt {font-size: 18rem; display: flex; flex-direction: column; gap: 18rem;}
.sub_about1__txt p:last-child {text-align: right; margin-top: 20rem;}


@media(min-width:960px){
	.sub_about1 .cont_inr {flex-direction: row;}
	.sub_about1__con { gap: 60rem; }
	
}
@media(min-width:1280px){
	.sub_about1__pic figure img {width: auto;}
	.sub_about1__con .common__h2 {font-size: 32rem;}
	
}

/* 조직도 */
.sub_about2__con img {width: 100%;}
.org {display: none;}
@media(min-width:600px){
	.org {display: block;}
	.org_m {display: none;}
}

/* 연혁 */
.sub_about3__banner > div { top: 20rem; position: relative;}
.sub_about3__banner > div img {width: 100%; max-width: 580px;}
.sub_about3__banner > div .common__title {position: absolute; bottom: -4%; z-index: 1;}
.sub_about3__banner > div .common__title .common__h2 {font-size: 60rem; color: #1c4a9f; text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); line-height: 1; font-family: 'montserrat';}
.sub_about3__banner > figure {display: none;}

.sub_about3__ul{ position: relative; padding-top: 100rem; width: 100%;}
.sub_about3__ul::before{ content: ''; position: absolute; inset: 80rem auto -9rem clamp(95rem, calc( 115 / var(--inner) * 100vw), 115rem); width: 1rem; background: #e1e1e1; }
.sub_about3__li{ display: flex; align-items: flex-start; flex-direction: column; margin: 10rem auto 60rem clamp(80rem, calc( 115 / var(--inner) * 100vw), 90rem)}
.sub_about3__li + .sub_about3__li{ margin-top: 80rem; }
.sub_about3__li::before{ content: ''; position: absolute; top: 6rem; display: inline-block; aspect-ratio: 1/1; width: 25rem; box-sizing: border-box; background: #f7f7f7; border: 5px solid #1c4ca0; border-radius: 50%;}
.sub_about3__year{  font-size: 24rem; font-weight: 700; color: var(--black);  margin-left: 50rem; width: calc(100% - 50rem); padding-bottom: 5rem; border-bottom: 1px solid #d9d9d9;}
.sub_about3__event{ position: relative;  top: 10rem; flex: 1; text-transform: uppercase; font-size: 17rem; font-weight: 300; margin-left: 50rem;}
.sub_about3__item {font-size: 17rem; display: flex; align-items: center; gap: 15rem;}
.sub_about3__item b {font-size: 24rem; color: #8d8d8d; }
.sub_about3__con {position: relative; overflow: hidden;}

@media(min-width:960px){
	.sub_about3__con {display: flex;    margin-bottom: -114rem;}
	.sub_about3__ul{ position: relative; padding-top: 10rem; width: 100%;}
	.sub_about3__ul::before{ inset: 0 auto -9rem clamp(95rem, calc( 115 / var(--inner) * 100vw), 115rem);  }
	.sub_about3__banner > figure {display: block; position: absolute;width: 100%;}
	.sub_about3__banner > figure img {width: 100%;}
	
}
@media(min-width:1280px){
	.sub_about3__ul{  width: calc(100% - 580px);}
	.sub_about3__banner > div .common__title {left: 6%;}
	.sub_about3__li{  margin: 10rem auto 60rem clamp(103rem, calc( 115 / var(--inner) * 100vw), 90rem)}
	
	
}

/* 오시는길 */
.sub_about4__info {display: flex; flex-direction: column;}
.sub_about4__info >  div {font-size: 35rem; font-weight: 600; display: flex; align-items: flex-end; line-height: 1; border: 1px solid #dddddd; border-radius: 0 30px 0 30px; padding: 30rem 10rem; justify-content: center; gap: 20rem; margin: 20rem 0;}
.sub_about4__info ul {border-top: 1px solid #000; border-bottom: 1px solid #d9d9d9; margin-bottom: 40rem; padding: 30rem 20rem 10rem; display: flex; flex-direction: column; gap: 20rem;}
.sub_about4__info ul li {display: flex; flex-direction: column; align-items: center; font-size: 17rem; gap: 10rem; border-bottom: 1px solid #ededed; padding-bottom: 20rem;}
.sub_about4__info ul li:last-child {border: none;}
.sub_about4__info ul li b {display: flex; gap: 10rem; font-size: 18rem;}
.sub_about4__info ul li b span:first-child {width: 30px;text-align: center;}
.sub_about4__info ul li b span:last-child {}
.sub_about4 .wrap_controllers {display: none;}
.root_daum_roughmap {max-width: 1400px; max-height:420px; width: 100% !important;}

@media(min-width:960px){
	.sub_about4__con:last-child .sub_about4__info {margin-bottom: 0;}
	.sub_about4__info {flex-direction: row; gap: 10%; margin: 60rem 0;}
	.sub_about4__info > div {margin: 0; width: 100%;}
	.sub_about4__info ul li {border-bottom: none; flex-direction: row; gap: 40rem;}
	.sub_about4__info ul {gap: 0; margin-bottom: 0; width: 100%;}
	.sub_about4__info ul li b {width: 80rem;}
	.sub_about4__info ul li div {width: 2px; height: 12px; background:  #1c4ca0; }
}

@media(min-width:1280px){
	.sub_about4__info > div {max-width: 400px;}

}

.tabs_wrap {margin-bottom: 69rem;}
.tabs{ display: flex; flex-wrap: wrap }
.tabs li{ flex: 1; padding: 0 15px; border-bottom: 2px solid #ededed; line-height: 2.9em; text-align: center; box-sizing: border-box; cursor: pointer; font-size: 20rem; transition: .2s; }
.tabs li a {display: block; height: 100%;}
.tabs li.current{     background: #1c499e;color: #fff; box-shadow: 0px 5px 16px 4px rgba(0, 0, 0, 0.05); }
.tabs span{ white-space: nowrap }
.tab_link{ cursor: pointer }
/* .tab_content{ display: none; transition: .4s;} */
.tab_content.current{ display: block }


.sub_prod1__img_wrap1{ margin-top: 23rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; row-gap: 60rem; padding: 84rem 5% 64rem; background: #f7f7f7; border: 1px solid #eee; }
.sub_prod1__img{ mix-blend-mode: darken; }
.sub_prod1__img.i1{ width: 40%; }
.sub_prod1__img.i2{ width: 100%; order: 3; }
.sub_prod1__img.i3{ width: 50%; }
.sub_prod1__img.i4{ width: 100%; }
.sub_prod1__item_wrap{ counter-reset: num; margin-top: 15rem; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(25rem, calc( 38 / var(--inner) * 100vw ), 38rem) clamp(10rem, calc( 56 / var(--inner) * 100vw ), 56rem); padding: 40rem 20rem 38rem; background: #dfdfdf; box-sizing: border-box; font-size: 17rem; font-weight: 600; color: #111; }
.sub_prod1__item_wrap li{ counter-increment: num; position: relative; }
.sub_prod1__item_wrap li::before{ content: counter(num); position: relative; top: -0.16666667em; margin-right: 16rem; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; background: #111; border-radius: 50%; font-size: 12rem; line-height: 1; color: #fff; }
.sub_prod1__img_wrap2{ display: grid; gap: 20rem; }
.sub_prod1__img_wrap2 img{ width: 100%; }

.prod_down {background: var(--primary); color: #fff; display: block; width: 100%; text-align: center; margin-top: 10rem; padding: 10rem; box-sizing: border-box;}

@media(min-width:768px){
	.sub_prod1__img_wrap1{ padding-inline: 10%; }
	.sub_prod1__item_wrap{ padding-inline: clamp(20rem, calc( 158 / var(--inner) * 100vw ), 158rem); }
	.sub_prod1__img_wrap2{ grid-template-columns: repeat(2, 1fr); }
	.prod_down {width: 80%;}
}
@media(min-width:1280px){
	.sub_prod1__img_wrap1{ padding-right: 127rem; padding-left: 117rem; }
	.sub_prod1__img.i1{ width: 11.71428571%; }
	.sub_prod1__img.i2{ width: 39.21428571%; order: unset; }
	.sub_prod1__img.i3{ width: 21.92857143%; }
	.sub_prod1__item_wrap{ padding-inline: clamp(20rem, calc( 158 / var(--inner) * 100vw ), 158rem); }
}


.sub_prod__img_wrap ul {display: flex; flex-direction: column; gap: 20rem;}
.sub_prod__img_wrap ul li {display: flex; justify-content: flex-start; gap: 20rem; flex-direction: column;}
.sub_prod__img_wrap ul li > div {width: 100%; display: flex; gap: 20rem; flex-direction: column;}
.sub_prod__img_wrap ul li:last-child {gap: 20rem;}
.sub_prod__img_wrap ul li:last-child > div:last-child {width: auto;}
.sub_prod__img_wrap ul li > div img {max-width: 690px; width: 100%;}

@media(min-width:768px){
	.sub_prod__img_wrap ul li {flex-direction: row; }
	.sub_prod__img_wrap ul li:last-child {gap: 20rem;}
	.sub_prod__img_wrap ul li > div {width: 50%; }
	.sub_prod__img_wrap ul li:last-child > div:last-child {width: 50%;}
	
}
@media(min-width:1080px){
	.sub_prod__img_wrap ul li > div {width:calc(50% - 10rem); }
	.sub_prod__img_wrap ul li:last-child > div:last-child img {width: auto;}
	.sub_prod__img_wrap ul li:last-child {gap: 20rem;}
	.sub_prod__img_wrap ul li:last-child > div:last-child {width: auto;}
 

}