@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px;padding:80px 0 120px; position: relative; border-bottom: 1px solid #ededed;}
.sub_title{margin-bottom:80px;}
.sub_title h2{text-align:center; color:#111; font-size:35px;}

/* 서브비쥬얼 */
.area_subVisual{position:relative; height:420px; padding:0 15px; background: 50% / cover; position: relative;}
.area_subVisual h2{ color:#fff;  font-size:60rem;}
.area_subVisual p{ text-align:center;}
.area_subVisual .inr {display: flex; justify-content: space-between; align-items: flex-end; position: static;}

.area_subVisual.about {background-image: url(../images/content/sub_visual01.jpg) }
.area_subVisual.business {background-image:url(../images/content/sub_visual02.jpg);}
.area_subVisual.lab {background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.board {background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.common {background-image:url(../images/content/sub_visual04.jpg);}

.area_subVisual__title {margin-bottom: 30rem; gap: 10rem;}

.area_breadcrumb{ position: relative; top: -1rem; left: 8px; display: flex; gap: 45rem; color: #fff; opacity: 0.6; }
.area_breadcrumb .home{ position: relative; top: 3rem; right: 3rem; width: 18rem; height: 16rem; 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; }
/* lnb */
.lnb {z-index:11;right:0;bottom:0;width:100%;height: 80px;background: #fff;text-align:center; max-width: 920px; position: absolute; border-radius: 20px 0 0 0;}
.lnb ul {height: 80px; margin:0 180rem 0 60rem; display: flex;}
.lnb ul li {padding: 27px 20px 26px; position: relative;display: flex; align-items: center;}
.lnb ul li:has(.on) {order: -1; display: flex; gap: 14rem; align-items: center; }
.lnb ul li a.on::before {content: ''; display: block; height: 6px; width: 6px; border-radius: 50%; background: #023d81;}
.lnb ul li:has(.on)::after {content: ''; display: block; height: 1px; width: 80rem; background: #666666;}
.lnb ul li a {font-weight: 500;font-size:20rem ;color: #000;transition: 0.2s; font-weight: 600; opacity: 0.4;}
.lnb ul li:hover a,
.lnb ul li a.on {opacity: 1; }
.lnb ul li a.on  {    margin-right: 26rem;display: flex;align-items: center;gap: 14rem;}



@media(min-width:1921px){
	.lnb {max-width: 960px;}
}
@media all and (max-width:1279px){
	.lnb {max-width: 70%;}
	.lnb ul {margin: 0 0rem 0 40rem;}
	.lnb ul li a {font-size: 18rem;}

}
@media all and (max-width:767px){
	.area_subVisual .inr {flex-direction: column;justify-content: center; align-items: flex-start;padding-bottom: 20rem;}
	.area_subVisual__title {margin-bottom: 0;}
	.lnb {max-width: 100%;}
	.lnb ul {margin-left: 0rem;}
	.lnb ul li a.on {margin-right: 0;}
	.lnb ul li.on::after {width: 40rem;}
	.lnb ul li a {font-size: 16rem;}

	div#content.sub{padding:50px 0;}
	.area_subVisual{height:300px;}
	.area_subVisual h2{font-size:30rem;}
	.sub_title{margin-bottom:30px;}
	.sub_title h2{font-size:22px;}
}

@media all and (max-width:600px){
	.lnb ul li.on::before {margin-left: 10rem;}
	.lnb{overflow-x:auto; width:100%;overflow-y: hidden;}
	.lnb ul li a{display:block; padding:0; font-size:15px; white-space:nowrap;}
	.lnb ul li:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}
}

@media all and (max-width:400px){
	.area_subVisual h2 {font-size: 60rem;}
}

/* 인사말 */
.about1_bg {position: absolute; top: 0; left: 0; width: 100%; z-index: -1;}
.about1_bg img {width: 100%;}
.sub_about1 .sub__banner {margin: 120rem 0; }
.sub__banner { position: relative;}
.sub__banner img {width: 100%;}
.sub__banner .img_banner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff;}
.sub__banner .img_banner p {font-size: 30rem; font-weight: 300;}
.sub__banner .img_banner h2 {font-size: 58rem; line-height: 1;}
.sub_about1 .cont_inr {display: flex; justify-content: space-between;}
.sub_about1 .common__h2 {font-size: 38rem; line-height: 1.2;margin-bottom: 80rem;}
.sub_about1 .common__h2 b {color: #023d81;}
.sub_about1__txt {font-size: 20rem; font-weight: 500;}
.sub_about1__txt p {margin-bottom: 30rem;}
.sub_about1__txt p:last-child {margin-top: 80rem;}
.sub_about1__con {width: 50%; display: flex; flex-direction: column; justify-content: center; padding-left: 40rem;}
@media (max-width: 1280px) {
	.sub_about1__con {width: 100%; padding: 30rem; box-sizing: border-box;}
	.sub_about1 .cont_inr {flex-direction: column;}
	.sub_about1__pic img {width: 100%;} 
	

	/* .cont_inr:nth-of-type(1) .sub_about1__con {margin-top: 30rem;} */
}

@media all and (max-width:767px){
	.sub__banner img {height: 100%; object-fit: cover;}
	.sub__banner {height: 240rem;}
	.sub__banner .img_banner p {font-size: 20rem;}
	.sub__banner .img_banner h2 {font-size: 36rem;}
}

/* 연혁 */
.sub_about2__item b {margin: 0 40rem 0 0rem; color: #8d8d8d; font-size: 24rem;}
.sub_about2__ul {position: relative;}
.sub_about2__ul::before {content: ''; width: 1px; height: 100%; background: #ccc; position: absolute; left: 50%; transform: translateX(-50%);}
.sub_about2__li {position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 80rem;}
.sub_about2__li::before {content: ''; width: 11px; height: 11px; background: #023d81; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
.sub_about2__li::after {content: ''; width: 25px; height: 25px; background: #023d81; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.2;  border-radius: 50%;}
.sub_about2__li .sub_about2__year {width: calc(50% - 80rem); text-align: right; font-size: 50rem; font-family: 'montserrat'; font-weight: 700; line-height: 1;}
.sub_about2__li .sub_about2__event {width: calc(50% - 80rem); font-size: 20rem;}
.sub_about2__li:nth-of-type(2n) {flex-direction: row-reverse;}
.sub_about2__li:nth-of-type(2n) .sub_about2__item {display: flex; flex-direction: row-reverse;}
.sub_about2__li:nth-of-type(2n) .sub_about2__item b {margin: 0 0 0 40rem;}
.sub_about2__li:nth-of-type(2n) .sub_about2__year {text-align: left;}

@media all and (max-width:767px){
	.sub_about2__item b {display: block;}
	.sub_about2__li:nth-of-type(2n) .sub_about2__item {flex-direction: column;}
	.sub_about2__li:nth-of-type(2n) .sub_about2__item b {margin: 0;}
	.sub_about2__li .sub_about2__year {width: calc(50% - 60rem); }
.sub_about2__li .sub_about2__event {width: calc(50% - 60rem); }
}

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


/* 오시는길 */
.sub_about5__info {position: relative; display: flex; flex-direction: column; width: 580rem; height: 320rem; border: 1px solid #ededed; box-sizing: border-box; padding: 60rem; background: #fff;}
.sub_about5__info .about05_bg {position: absolute; bottom: 10%; right: 5%;}
.sub_about5__info >  div {font-size: 30rem; font-weight: 600; display: flex; align-items: flex-end; line-height: 1;  gap: 20rem;  margin-bottom: 60rem;}
.sub_about5__info ul {margin-bottom: 40rem;display: flex; flex-direction: column; gap: 10rem;}
.sub_about5__info ul li {display: flex;  align-items: center; font-size: 18rem; gap: 30rem;}
.sub_about5__info ul li:last-child {border: none;}
.sub_about5__info ul li b {display: flex; gap: 10rem; font-size: 18rem;}
.sub_about5__info ul li b span:first-child {width: 30px;text-align: center;}
.sub_about5 .wrap_controllers {display: none;}
.root_daum_roughmap {max-width: 1200px; max-height:400px; height: 100%; width: 100% !important;}
.root_daum_roughmap .wrap_map {height:400px !important;}
.sub_about5__con {position: relative;}
.sub_about5__con:first-child .root_daum_roughmap {margin: 0 0 0 auto;}
.sub_about5__con:first-child .sub_about5__info {margin-top: -200rem;}
/* .sub_about5__con:last-child .root_daum_roughmap {padding: 120rem 0 0 0;} */
/* .sub_about5__con:last-child .sub_about5__info {position: absolute; top: 0; right: 0;} */

@media all and (max-width:767px){
	.sub_about5__con:last-child .root_daum_roughmap {margin-top: 40rem;}
	.sub_about5__info {width: 100%; padding: 40rem;}
	.sub_about5__con:first-child .sub_about5__info {margin-top: 0;}
	.sub_about5__con:last-child .sub_about5__info {position: static;}
	.sub_about5__con:last-child .root_daum_roughmap {padding: 0;}
	.sub_about5__info > div img {width: 50%;}
}

/* 마스터배치 */
.sub_business1 .business__pic {display: flex;}
.sub_business1 .business__pic:nth-of-type(2) {flex-direction: row-reverse; margin-top: 60rem;}
.business_feat > ul {display: flex; gap: 40rem; }
.business_feat > ul li {width: 25%;}
.business_feat > ul li img {width: 100%;}
.business_feat > h2 {font-size: 35px; color: #111; text-align: center; margin: 120rem 0 80rem; line-height: 1;}

.table_wrap h2 {display: none; color: #ccc; font-size: 16rem !important; margin: 60rem 0 10rem !important; font-weight: 500;}
.common_table{ position: relative; text-align: center; color: #111; margin-top: 60rem; }
.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; border-top: 2px solid #023d81;}
.common_table :is(tbody, tr + tr){ border-top: 1px solid #dfdfdf; }
.common_table th{ padding: 16rem 10rem 15rem; }
.common_table td{ padding: 30rem 20rem; }
.common_table :is(th + th, td + td){ border-left: 1px solid #c3c3c3; }
.common_table td{ font-size: 17rem; border-left: 1px solid #c3c3c3;}
.common_table td:first-child {border: none;}
.common_table td ul {display: flex; flex-wrap: wrap;}
.common_table td ul li {width:50%;}

.business__list {margin-top: 80rem;}
.business__list h2{padding: 15rem 30rem; background: #023d81; color: #fff; border-radius: 20rem; font-size: 20rem; display: inline-block;}
.business__list ul {border: 1px solid #ccc; border-radius: 20rem;  padding: 60rem 60rem 50rem; display: flex; gap: 40rem; flex-wrap: wrap; font-size: 18rem; font-weight: 500; margin-top: -30rem;}
.business__list ul li {    display: flex;align-items: center;gap: 10rem;}
.business__list ul li::before {content: ''; display: block; width: 10px; height: 10px; background: #023d81; border-radius: 50%;}

@media all and (max-width:1280px){
	.sub_business1 .business__pic:nth-of-type(2) {flex-direction: column;}
	.business_feat > ul {flex-wrap:wrap}
	.business_feat > ul li {width: calc(50% - 20rem);}
}
@media all and (max-width:767px){
	
	.business_feat h2 {font-size: 22px; margin: 80rem 0 60rem;}
	.business_feat > ul {flex-direction: column;}
	.business_feat > ul li {width: 100%;}
	.table_wrap h2 {display: block;}
	.table_wrap {overflow: auto;}
	.common_table {width: 690px; margin-top: 0rem;}
}
/* 컴파운드 */
.business__pic {display: flex; gap: 40rem; align-items: center;}
.business__pic figcaption div {background: #023d81; width: 60rem; height: 4px;}
.business__pic figcaption p {font-size: 18rem; }
.business__pic figcaption p:first-of-type {margin: 40rem 0 ;}
.business__pic figcaption {padding: 60rem 40rem; border-radius: 20rem; border: 1px solid #cccccc; box-sizing: border-box;}


@media all and (max-width:1280px){
	.business__pic.business__pic {flex-direction: column;}
	.business__pic.business__pic figure img {width: 100%;}

}

/* 드라이컬러 */
.sub_business3 .business__pic {display: flex;}
.sub_business3 .business__pic:nth-of-type(2) {flex-direction: row-reverse; margin-top: 60rem;}

@media all and (max-width:1280px){
	.sub_business3 .business__pic:nth-of-type(2) {flex-direction: column;}
}




/* 연구실 소개 */
.sub_lab1__con ul {display: flex; gap: 40rem; margin-top: 60rem;}
.sub_lab1__con ul li {border-radius: 20rem; border: 1px solid #cccccc; box-sizing: border-box; padding: 70rem 60rem; width: 50%; position: relative;}
.sub_lab1__con ul li h2 {font-size: 32rem;}
.sub_lab1__con ul li div {background: #023d81; width: 60rem; height: 4px; margin: 40rem 0 60rem;}
.sub_lab1__con ul li figure {position: absolute; top: 40rem; right: 40rem;}

@media all and (max-width:1080px){
	.sub_lab1__con ul li figure img {width: 100rem;}
	.sub_lab1__con ul {flex-direction: column;}
	.sub_lab1__con ul li {width: 100%;}
}

/* 설비현황 */
.sub_lab2__li {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -60rem;}
.sub_lab2__li li {margin-top: 60rem; width: 31.4%;}
.sub_lab2__li li figure img {width: 100%;}
.sub_lab2__li li:nth-of-type(4) {width: 42.8%;}
.sub_lab2__li li:nth-of-type(5) {width: 54.2%;}

.sub_lab2__li figcaption {color: #023d81; font-size: 24rem; font-weight: 600; position: relative; display: flex; align-items: center; gap: 10rem;}
.sub_lab2__li figcaption::before{content: ''; border: 5px solid #ebebeb; width: 20px; height: 20px; background: #023d81;display: inline-block;box-sizing: border-box;}

@media all and (max-width:767px){
	.sub_lab2__li {flex-direction: column;}
	.sub_lab2__li li {width: 100%;}
	.sub_lab2__li li:nth-of-type(4) {width: 100%;}
	.sub_lab2__li li:nth-of-type(5) {width: 100%;}
}