@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:470rem; padding: var(--header_height) 0 2%; text-align:center; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/vis1.jpg'); }
.subVisual.business::before{ background-image:url('/images/content/vis2.jpg'); }
.subVisual.board::before{ background-image:url('/images/content/vis3.jpg'); }
.subVisual.koweb_online_counsel::before{ background-image:url('/images/content/vis4.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/vis4.jpg'); }
.subVisual__h2{ margin-bottom: 0.35555556em; font-size: var(--fs45); }
@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 > *{ animation: visual_txt .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes visual_txt{
		0%{ transform: translateY(30rem); clip-path: inset(0 0 100%); }
		100%{ transform: translateY(0); clip-path: inset(0); }
	}
}

/* lnb */
.lnb{ overflow: auto clip; position: relative; margin-top: -30rem; background: var(--primary); box-shadow: 0 2rem 20rem rgba(0, 0, 0, 0.15); text-align:center; font-weight: 500; color: #ffffff99; white-space: nowrap; z-index:5; }
.lnb ul{ display: flex; gap: 18rem; }
.lnb li{ padding: 0 20rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 60rem; }
.lnb a:hover,
.lnb a.on{ color: #fff; }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-top: 2px solid currentColor; }
@media(min-width:768px){
	.lnb ul{ justify-content: center; }
}

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

 /*인사말*/
 .s1_1 {font-family: 'Noto Sans KR', sans-serif;position: relative;}
 .s1_1 .greet_tit { margin-bottom: 50px;}
 .s1_1 .greet_tit h3 {font-size: 50px;font-weight: 400;}
 .s1_1 .img_box {position: relative;background: url(../images/content/s1_1_1.jpg) no-repeat center;height: 423px;border-radius: 15px;text-align: center;margin-bottom: 60px;background-size: cover;}
 .s1_1 .img_box::before {content: '';position: absolute;bottom: 0;left: 0;background: url(../images/content/s1_1_2.png) no-repeat;width: 1297px;height: 105px;}
 
 .s1_1 .greet_txt {display: flex;padding: 0 0 0 0;word-break: keep-all;}
 .s1_1 .greet_txt .lf_area {width: 38.5%;position: relative;box-sizing: border-box;}
 .s1_1 .greet_txt .lf_area p {font-size: 20px;color: #2559a4;font-weight: bolder;position: relative;padding-left: 21%;line-height: 2.3em;}
 .s1_1 .greet_txt .lf_area p::before {content: '';position: absolute;top: 15px;left: 0;width: 14%;height: 2px;background-color: #2559a4;}
 .s1_1 .greet_txt .rt_area {width: 61.5%;box-sizing: border-box;position: relative;padding: 0 7% 0px 12%;}
 .s1_1 .rt_area .rt_txt p {font-size: 16px;color: #363636;line-height: 2em;margin-bottom: 35px;}
 .s1_1 .rt_txt p.ceo_name {position: absolute;bottom: -100px;right: 0;font-size: 24px;color: #131313;font-weight: 900;}
 
 .subConBox_2 {position: relative;width: 100%;}
 .subConBox_2 .s1_1_bg {position: absolute; right: 61.5%; width: 100vw; height: 623px;background-color: #f2f4f6;bottom: -120px;z-index: -100;}

 @media all and (max-width:1279px) {
    .s1_1 {padding-bottom: 10px;}
    .s1_1 .greet_tit h3 {font-size: 40px;}
    .s1_1 .greet_txt {display: block;}
    .s1_1 .greet_txt .lf_area {width: 100%;}
    .s1_1 .greet_txt .rt_area {margin-top: 30px;width: 100%;padding: 0 5% ;}
    .s1_1 .greet_txt .lf_area p {font-size: 22px;padding-left: 5%;}
    .s1_1 .greet_txt .lf_area p::before {width: 3%;}
    .subConBox_2 .s1_1_bg {width: 100%;height: 200px;bottom: 265px;}
    .s1_1 .img_box {margin-bottom: 40px;}
    .s1_1 .rt_txt p.ceo_name {position: absolute;bottom: -130px;}
 }

 @media all and (max-width:767px) {
    .subConBox_2 .s1_1_bg {bottom: 295px;}
	.s1_1 .img_box {height: 290px;margin-bottom: 40px;}
    .s1_1 .img_box {margin-bottom: 30px;}
    .s1_1 .greet_tit h3 {font-size: 35px;}
    .s1_1 .greet_tit {margin-bottom: 30px;}
	.s1_1 .img_box {height: 240px;}
    .s1_1 .rt_txt p.ceo_name {bottom: -120px;font-size: 20px;}
    .s1_1 .rt_txt p.ceo_name img {height: 25px;}
	.subConBox_2 .s1_1_bg {display: none;}
	.s1_1 .greet_tit h3 {font-size: 30px;}
    .s1_1 .greet_txt .lf_area p {font-size: 19px;}
}

/*조직도*/
.s1_2_bg {position: absolute;top: 0;right: 10.2%;background: url(../images/content/s1_2_1.png) no-repeat;width: 666px;height: 656px;background-size: contain;}
.s1_2 {position: relative;}
.s1_2 .org_area {margin-top: 50px; font-family: 'Noto Sans KR';}
.s1_2 .ceo_box {width: 234px; height: 234px; margin: 0 auto; border-radius: 50%; border: 8px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #024785, #5f88c2); background-color: #fff; background-origin: border-box; background-clip: content-box, border-box; overflow: hidden; position: relative;}
.s1_2 .ceo_box > p {position: absolute; top: 12%; right: 2%; font-size: 64px; color: #edf1f6; font-weight: bolder; letter-spacing: -5px;}
.s1_2 .ceo_box.mid {height: 78rem; line-height: 78rem; border-radius: 29px 0 29px 0; overflow: unset;}
.s1_2 .ceo_box.mid .ceo_name > p {margin-top: 0;}
.s1_2 .ceo_box.mid > p {top: 0; right: -100%; height: 62rem; line-height: 62rem; width: 80%; text-align: center; border: 2px solid #00478a; font-size: 17px; color: #002b53; letter-spacing: 0;}
.s1_2 .ceo_box.mid > p::before {content: ''; display: block; width: 25%; height: 2px; background: #97b4da; position: absolute; left: -25%; top: 50%; z-index: -1;}
.s1_2 .ceo_name {text-align: center; position: relative; top: 50%; transform: translateY(-50%); z-index: 10;}
.s1_2 .ceo_name > P {font-size: 29px; font-weight: bolder; color: #222; margin-top: 20px;}
.s1_2 .line {width: 2px; height: 54px; background-color: #97b4da; margin: 0px auto; position: relative;}
.s1_2 .line:before {content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);  width: 10px; height: 10px; border-radius: 50%; border: 3px solid #fff; background-color: #3464a1;}
.s1_2 .org_wrap {position: relative;}
.s1_2 .org_list {max-width: 1265px; margin: 0 auto; margin-top: 80px; display: flex; position: relative;}
.s1_2 .org_list:after {content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 80.5%; height: 2px; background-color: #97b4da;}
.s1_2 .org_list > li {width: 25%; position: relative;}
.s1_2 .org_list > li:nth-child(n+2) {margin-left: 7%;}
.s1_2 .org_list > li:before {content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);  width: 2px; height: 50px; background-color: #97b4da;}
.s1_2 .org_list .org_box {position: relative; top: -30px;}
.s1_2 .org_list .org_box:before {content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background-color: #3464a1;}
.s1_2 .org_box .org_tit {padding: 0; width: 100%; height: 78px; line-height: 78px; background-color: #00478a; border-radius: 29px 0 29px 0; text-align: center; color: #fff; font-size: 20px; font-weight: 500;}
.s1_2 .org_list > li:nth-child(even) .org_tit {background-color: #4271b4;}
.s1_2 .org_box li:nth-child(n+2) {width: 100%; height: 100%; border: 2px solid #00478a; padding: 16px 0; text-align: center; margin-top: 10px; font-size: 17px; font-weight: 600; color: #002b53; position: relative;}
.s1_2 .org_box li:nth-child(n+2):before {content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);  width: 2px; height: 10px; background-color: #97b4da;}
@media all and (max-width:1380px) {
    .s1_2_bg {width: 500px; top: 5%;} 
} 
@media all and (max-width:1150px) {
    .s1_2 .org_list > li:nth-child(n+2) {margin-left: 4%;}
    .s1_2 .org_list:after {width: 78%;}
}
@media all and (max-width:1024px) {
    .s1_2 .ceo_box {width: 210px; height: 210px;}
    .s1_2 .ceo_name > P {font-size: 25px;}
    .s1_2 .ceo_box > p {top: 4%; font-size: 80px;}
    .s1_2 .org_list > li:nth-child(n+2) {margin-left: 2%;}
    .s1_2 .org_list:after {width: 76.5%;}
    .s1_2 .org_box .org_tit {height: 72px; line-height: 72px; font-size: 19px;}
    .s1_2 .org_box li:nth-child(n+2) {padding: 16px 0; font-size: 16px; font-weight: 500;}
}
@media all and (max-width:859px) {
    .s1_2_bg {width: 400px; top: 5%; right: 4%;}
    .s1_2 .org_list {flex-wrap: wrap;}
    .s1_2 .org_list > li {width: calc(50% - 2%);}
    .s1_2 .org_list:after {width: 52%;}
    .s1_2 .org_list > li:nth-child(n+2) {margin-left: 4%;}
    .s1_2 .org_list > li:nth-child(3) {margin-left: 0; margin-top: 40px;}
    .s1_2 .org_list > li:nth-child(3):before {top: -70px;}
    .s1_2 .org_list > li:nth-child(4) {margin-top: -73px;}
    .s1_2 .org_list > li:nth-child(4):before {top: -97px; height: 70px;}
    .s1_2 .org_list > li:nth-child(3) .org_tit {background-color: #4271b4;}
    .s1_2 .org_list > li:nth-child(4) .org_tit {background-color: #00478a;}
}
@media all and (max-width:680px) {
    .s1_2_bg {width: 350px; top: 6%; right: 4%;}
    .s1_2 .ceo_box.mid > p {width: 60%; right: -75%;}

}
@media all and (max-width:550px) {
    .s1_2_bg {width: 300px; top: 10%; right: 4%;}
    .s1_2 .ceo_box {width: 180px; height: 180px;}
    .s1_2 .ceo_name > P {font-size: 23px; margin-top: 15px;}
    .s1_2 .ceo_box > p {top: 0; font-size: 74px;}
    .s1_2 .line:before {width: 8px; height: 8px;}
    .s1_2 .org_box .org_tit {height: 67px; line-height: 67px; font-size: 18px;}
    .s1_2 .org_box li:nth-child(n+2) {font-size: 15px; padding: 14px; width: 100%; box-sizing: border-box;}
    .s1_2 .org_list .org_box:before {width: 8px; height: 8px;}
    .s1_2 .org_list > li:nth-child(4) {margin-top: -197px;}
    .s1_2 .org_list > li:nth-child(4):before {top: -91px;}
    
}
@media all and (max-width:430px) {
    .s1_2 .ceo_box {width: 160px; height: 160px;}
    .s1_2 .ceo_name > P {font-size: 21px;}
    .s1_2 .ceo_box > p {font-size: 65px;}
    .s1_2 .org_list > li:before {display: none;}
    .s1_2 .org_list > li {width: 100%;}
    .s1_2 .org_box .org_tit {height: 65px; line-height: 65px;}
    .s1_2 .org_list > li:nth-child(n+2) {margin-left: 0;}
    .s1_2 .org_list > li:nth-child(4) {margin-top: 0;}
    .s1_2 .org_list:after {display: none;}
    .s1_2 .org_list {margin-top: 38px;}
    .s1_2 .org_list > li:nth-child(n+2) {margin-top: 30px;}
    .s1_2 .org_list > li:before {display: block; top: -60px; height: 29px;}
    .s1_2 .org_list > li:nth-child(3):before {top: -60px;}
    .s1_2 .org_list > li:nth-child(4):before {top: -60px;}
    .s1_2 .org_list > li:nth-child(3) .org_tit {background-color: #00478a;}
    .s1_2 .org_list > li:nth-child(4) .org_tit {background-color: #4271b4;}
    .s1_2 .ceo_box.mid > p {width: 45%; right: -60%;}
}

/*오시는길*/
.s4_1 {position: relative;}
.s4_1 .s4_1_bg {position: absolute;bottom: -30px;right: 0;color: rgba(238, 238, 238, 0.5);font-size: 110px;text-align: right;font-weight: bolder;z-index: -10;line-height: 9rem;}
.s4_1 .loca_txt {position: relative;}
.s4_1 .loca_txt > div {padding: 35px 0;}
.s4_1 .loca_txt > div ul li h4 {display: inline-block;font-size: 20px;color: #666;font-weight: 500;}
.s4_1 .loca_txt > div ul li span {font-size: 22px;color: #666;font-family: 'Noto Sans KR';margin-left: 20px;}
.s4_1 .open_txt  {margin: 20px 0 80px 0;padding-bottom: 25px;position: relative;}
.s4_1 .open_txt ul li {font-family: 'Noto Sans KR';}
.s4_1 .loca_txt .open_txt ul li h4 {font-weight: bolder;}
.s4_1 .loca_txt ul li:nth-child(n+2) {margin-top: 13px;} 
.s4_1 .loca_txt > div h3 {font-size: 20px;color: #255aa8;}
.s4_1 .loca_txt > div ul {margin-top: 30px;}
.s4_1 .open_txt::after {content: '';position: absolute;bottom: -100px;left: 0;width: 1px;height: 100px;background-color: #c7c7c7;z-index: -20;}
.s4_1 .info_txt h4 {width: 110px;}
@media all and (max-width:1024px) {
    .s4_1 .s4_1_bg {font-size: 90px;line-height: 7rem;}
}
@media all and (max-width:767px) {
        .s4_1 .s4_1_bg {font-size: 70px;line-height: 6rem;}
}
@media all and (max-width:767px) {
    .s4_1 {margin-top: -30px;}
    .s4_1 .loca_txt > div ul li h4 {font-size: 20px;}
    .s4_1 .loca_txt > div ul li span {font-size: 19px;}
    .loca_map iframe {height: 300px;}
    .s4_1 .open_txt  {margin: 0px 0 50px 0;padding-bottom: 25px;}
    .s4_1 .loca_txt > div {padding: 20px 0;}
}
@media all and (max-width:767px) {
	.s4_1 .s4_1_bg {font-size: 60px;line-height: 5rem;}
    .s4_1 .info_txt .emailTxt {display: block;margin-left: 0;}
}
@media all and (max-width:767px) {
    .s4_1 .loca_txt > div ul li h4 {display: block;}
    .s4_1 .loca_txt > div ul li span {display: block;margin-left: 0;margin-top: 5px;}
    .s4_1 .open_txt  {margin: 0px 0 30px 0;}
    .s4_1 .s4_1_bg {font-size: 50px;line-height: 4rem;}
    .s4_1 .loca_txt > div ul li h4 {font-size: 18px;}
    .s4_1 .loca_txt > div ul li span {font-size: 18px;}
    .s4_1 .info_txt h4 {width: unset;}
}

/* 미리내전자 개발 서비스 */
.biz1_1 figure img {width: 100%;}
.biz1_1_m {display: none; font-size: 16rem; color: #ccc; margin-bottom: 20rem;}

@media all and (max-width:767px) {
    .biz1_1 figure { overflow: auto; padding-bottom: 20rem;}
    .biz1_1 figure img {width: 700rem;}
    .biz1_1_m {display: block;}

}

/* 더블레스 */
.biz2_1{display:flex; margin:auto; align-items:center; justify-content:center; max-width:720rem; width:100%;}
.biz2_1 img{display:block; width:100%;}
.biz2_2{display:flex; justify-content:space-between; margin-top:100rem;}
.biz2_2 li{width:calc(100% / 3 - 40rem);}
.biz2_2 li div{width:100%;}
.biz2_2 li div em{display:block; padding:15rem 10rem; font-size:24rem; font-weight:bold; color:#000; border-top:2px solid #000; border-bottom:1px solid #ddd; background:#f5f5f5; text-align:center;}
.biz2_2 li div p{padding:20rem 10rem 0; font-size:18rem; color:#444; text-align:center;}
@media all and (max-width:1279px){
    .biz2_1{max-width:680rem;}
    .biz2_2{margin-top:80rem;}
    .biz2_2 li{width:calc(100% / 3 - 20rem);}
    .biz2_2 li div p > br{display:none;}
}
@media all and (max-width:767px){
    .biz2_2{display:block; margin-top:60rem;}
    .biz2_2 li{width:100%;}
    .biz2_2 li+li{margin-top:30rem;}
    .biz2_2 li div em{padding:10rem;}
}

/* 기타 */
.biz3_1 ul {display: flex; flex-direction: column; gap: 140rem;}
.biz3_1 ul li {display: flex; gap: 80rem;}
.biz3_1 ul li:nth-child(2) {flex-direction: row-reverse;}
.biz3_1 ul li figure {width: 50%;}
.biz3_1 ul li figcaption {width: 50%; padding: 0 0rem;}
.biz3_1 ul li figcaption div {display: flex; align-items: center; box-sizing: border-box; justify-content: space-between; padding: 20rem 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; margin-top: 20rem;}
.biz3_1 ul li figcaption div h2 {font-size: 40rem; }
.biz3_1 ul li figcaption div h3 {font-size: 42rem; opacity: .3;}
.biz3_1 ul li figcaption p {font-size: 20rem; padding: 60rem 0rem 20rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
.biz3_1 ul li figcaption p b {color: #a0a0a0; font-weight: 400; display: block; font-size: 18rem;}
.biz3_1 ul li figcaption p b:first-of-type {margin-top: 10rem;}

@media all and (max-width:1280px) {
    .biz3_1 ul li {flex-direction: column;}
    .biz3_1 ul li:nth-child(2) {flex-direction: column;}
    .biz3_1 ul li figure {width: 100%;}
    .biz3_1 ul li figure img {width: 100%;}
    .biz3_1 ul li figcaption {width: 100%;}

}
@media all and (max-width:767px) {
    .biz3_1 ul li {gap: 40rem;}
}