@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* sub navi */
.sub_navi{ position: relative; padding: 6.15% 0 .2%; }
.sub_navi_tit {display: flex; align-items:flex-end; gap: 15px; margin-bottom: 1.875em;}
.sub_navi-h2{ position: relative; display: inline-block; font-size: var(--font_size67); line-height: 1; font-weight: 800;}
.sub_navi-h2::before{ content: ''; position: absolute; top: -0.10447761em; left: -0.22388060em; width: 0.44776119em; height: 0.71641791em; background: var(--secondary); transform: skewY(34deg); z-index: -1; }
.sub_navi-p {font-size: var(--font_size35); font-weight: 700; line-height: 1;}
/* path */
.sub___path{ display: flex; justify-content: flex-end; align-items: flex-end; position: absolute; inset: 0; font-size: 14px; font-weight: 700; color: #060d10; pointer-events: none; }
.sub___path-wrap{ display: flex; align-items: center; gap: 13px; pointer-events: auto; }
.sub___path-arrow{ display: inline-block; margin-left: 4px; width: 6px; height: 9px; background: url(/images/content/icon_path_arrow.png) no-repeat 50% / contain; }
@media(max-width:1279px){
	.sub___path{ display: none; }
}

/* lnb */
.lnb { z-index:11; }
.lnb ul { display: flex; gap: clamp(1em, 5.14285714vw, 72px	); margin-top: 24px; }
.lnb ul li a { display: inline-block; position: relative; padding-bottom: .25em; font-size: var(--font_size20); font-weight: 700; color: #333; opacity: .4; }
.lnb ul li:hover a, 
.lnb ul li a.on{ color: #222; opacity: 1; }
.lnb ul li a.on::before{ content: ''; position: absolute; inset: auto 0 0; height: .15em; background: currentColor; }

.area_quick li + li {margin-top: 14px;}
.area_quick {position: fixed; bottom: 0; right: 40px; transform: translateY(-40%); z-index: 99; }
.area_quick li {display: flex; align-items: center; justify-content: flex-end; gap: 8px;}
.area_quick li.contact:hover span {display: block;}
.area_quick li > span {display: none; padding: 5px 18px; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; border-radius: 30px;}
.area_quick li.contact a {display: block; width: 54px; height: 54px; border-radius: 50%; background: var(--black) url(/images/common/icon_pen.svg) no-repeat center; background-size: 19px;}
.area_quick li.tel a {display: flex; gap: 12px; align-items: center; height: 52px; padding: 0 24px; border-radius: 30px; background: var(--secondary); font-size: var(--font_size17); color: #fff; font-weight: 500; }
.area_quick li.tel .tel_bar {display: inline-block; width: 1px; height: 0.6875em; background: rgba(255, 255, 255, 0.3);}

@media (max-width:1080px){
	.area_quick {right: 15px; transform: translateY(-20%); }
	
}


@media (max-width:767px){
	.lnb{overflow: auto hidden; white-space: nowrap; }
	.area_quick li + li {margin-top: 7px;}
	.area_quick li.contact a {width: 50px; height: 50px}
	.area_quick li.tel a {display: block; width: 50px; height: 50px; padding: 0; border-radius: 50%; background: var(--secondary) url(/images/common/icon_call.svg) no-repeat center; background-size: 16px;}
	.area_quick li.tel a span {display: none;}
	.area_quick li.tel .tel_bar {display: none;}
	.area_quick li:hover span {display: block;}
}

@media (max-width:600px){
	/* .area_quick {display: none;} */
}

/* sub visual */
.area_subVisual{ overflow: hidden; position:relative; margin-top: 2.25em; aspect-ratio: 170/48; min-height: 250px; background: #2d2d2d; text-align:center; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual00.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.portfolio::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.koweb_online_counsel::before{ background-image:url(../images/content/sub_visual05.jpg);}
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual04.jpg); }
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
}

/* common content */
#content{ min-height:300px; padding: 7.5625em 0 9.3125em; }
.sub_title{ margin-bottom: 2.5em;}
.common__h2{ font-size:var(--font_size44); }
.sub_title-p{ margin-top: .70833333em; font-size: var(--font_size24); font-weight: 500; line-height: 1.70833333; }
.sub_title-span{ display: block; margin-top: .61111111em; font-size: var(--font_size17); font-weight: 400; line-height: 1.77777778; }
.bullet{ position: relative; padding-left: 0.81578947em; }
.bullet::before{ content: ''; position: absolute; margin: auto auto auto 0; inset: 0; width: 0.625rem; height: 0.625rem; background: var(--secondary); }
.no_image{ position: relative; }
.no_image::before{ content: ''; position: absolute; inset: 0; background: #eee; }
.no_image::after{ content: ''; position: absolute; inset: 0; background: url(/images/common/icon_no_image.svg) no-repeat 50% / auto 40px; filter: grayscale(1); opacity: .5; }

/* 회사소개 - 인사말 */
.sub_greeting__title{ margin-top: -0.15686275em; text-align: center; font-size: var(--font_size51); line-height: 1.60784314; }
.sub_greeting__content{ margin: 3.875em auto 0; max-width: 960px; width: 80%; }
.sub_greeting__img{ position: relative; margin: 0 auto; aspect-ratio: 960/532;}
.sub_greeting__img::before{ content: ''; position: absolute; bottom: -6%; left: -15.2%; width: 18.75%; height: 62.59398496%; background: url(/images/content/icon_greeting_deco.png) no-repeat 50% / contain; z-index: 1; }
.sub_greeting__img-img{ display: block; position: relative; width: 100%; height: 100%; object-fit: cover; }
.sub_greeting__txt{ margin-top: 2.55555556em; font-size: var(--font_size18); line-height: 1.66666667; text-align: center;}
.team_img {text-align: center; margin-top: 2.55555556em;}
.team_img img {max-width: 100%;}
/* 회사소개 - 경영이념 */
.sub_management{ margin-top: 8.125em; text-align: center; }
.sub_management__list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3em 1.4em; margin: 2.375em auto 0; max-width: 1142px; }
.sub_management__list-icon{ display: inline-flex; justify-content: center; align-items: center; width: 190px; height: 190px; border: 20px solid #f5f5f5; border-radius: 50%; box-sizing: border-box; }
.sub_management__list-h3{ margin: 1.40909091em 0 0.86363636em; font-size: var(--font_size22); font-weight: 800; }
.sub_management__list-p{ font-size: var(--font_size18); line-height: 1.44444444; }
@media(max-width:767px){
	#content{padding: 3.571em 0 3.571em; }
	.sub_management__list{ grid-template-columns: repeat(1, 1fr); }
}

/* 연혁 */
.sub_history .depth1{ font-weight: 800; }
.sub_history .depth1-li{ display: flex; align-items: flex-start; }
.sub_history .depth1-title{ flex: 1 37.1%; box-sizing: border-box; font-size: var(--font_size38); }
.sub_history .depth2{ position: relative; flex: 1 62.8%; width: 100%; border: solid currentColor; border-width: 0 0 1px; }
.sub_history .depth1-li:first-of-type .depth2{ border-top-width: 1px; }
.sub_history .depth2-li{ display: flex; }
.sub_history .depth1-li:first-of-type .depth2-li:first-child{ padding-top: 11px; }
.sub_history .depth2-li{ padding: 2.5625em 0 2.5em; }
.sub_history .depth2-li + .depth2-li{ border-top: 1px solid #ebebeb; }
.sub_history .depth2-li:last-child{ padding-bottom: 7.3125em; }
.sub_history .depth2-title{ flex: 0 0 22.5%; font-size: var(--font_size24); color: #bcbcbc; }
.sub_history .depth3{ margin: 3px 0; flex: 1; }
.sub_history .depth3-li{ display: flex; font-size: var(--font_size18); }
.sub_history .depth3-li + .depth3-li{ margin-top: 14px; }
.sub_history .depth3-li:has(.month:empty){ margin-top: 9px; }
.sub_history .month{ flex: 0 0 3.625em; }
.sub_history .comment{ font-weight: 500; }
@media(min-width:1280px){
	.sub_history .depth2{ top: 14px; }
}
@media(max-width:1279px){
	.sub_history .depth1-li{ flex-direction: column; }
	.sub_history .depth1-li + .depth1-li{ margin-top: 3em; }
	.sub_history .depth2{ margin-top: 14px; }
}
@media(max-width:767px){
	.sub_history .depth2-li{ flex-direction: column; }
	.sub_history .depth3{ margin-top: 1em; }
}

/* 인증현황 */
.sub_certificate{ margin-top: 4.625em; }
.sub_certificate__list{ display: grid; column-gap: clamp(1em, 2vw, 28px); margin-top: 2.25em; text-align: center; color: #060d10; }
.sub_certificate__img{ display: flex; justify-content: center; align-items: center; position: relative; aspect-ratio: 329/414; padding: 2.1875em 1em; box-sizing: border-box; background: #f5f5f5; }
/* .sub_certificate__img::before{ content: ''; position: absolute; inset: 0; background: url(/images/main/icon_no_image.svg) no-repeat 50% / auto 40px; filter: grayscale(1); opacity: .5; pointer-events: none; } */
/* .sub_certificate__img-img{ position: relative; max-width: 100%; max-height: 100%; } */
.sub_certificate__img-img{ position: relative; width: 100%; height: 100%; object-fit: contain; }
.sub_certificate__img-img::before{ background: #f5f5f5; }
.sub_certificate__list-txt{ margin-top: 1.1875em; }
@media(min-width:1280px){
	.sub_certificate__list{ grid-template-columns: repeat(4, 1fr); row-gap: 4.5625em; }
}
@media(max-width:1279px){
	.sub_certificate__list{ row-gap: 2em; }
	@media(min-width:768px){
		.sub_certificate__list{ grid-template-columns: repeat(3, 1fr); }
	}
}
@media(max-width:767px){
	.sub_certificate__list{ grid-template-columns: repeat(2, 1fr); }
}

/* 오시는 길 */
.sub_location{ display: flex; row-gap: 3em; }
.sub_location .root_daum_roughmap{ aspect-ratio: 700/509; width: 100%; flex: 1 50%; }
.sub_location .root_daum_roughmap .wrap_map{ height: 100%; }
.sub_location .map_border,
.sub_location .wrap_controllers{ display: none }
.sub_location__info{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 50%; box-sizing: border-box; }
.sub_location__info-office{ font-size: var(--font_size22); color: var(--secondary); }
.sub_location__info-address{ margin-top: 0.31372549em; font-size: var(--font_size51); line-height: 1.35294118; }
.sub_location__link{ margin-top: 2.94444444em; width: 100%; font-size: var(--font_size18); }
.sub_location__link-li{ display: flex; align-items: center; }
.sub_location__link-li + .sub_location__link-li{ margin-top: 1.05555556em; }
.sub_location__link-title{ flex: 0 0 5.22222222em; }
.sub_location__link-title.sns{ font-weight: 700; color: #333; }
.sub_location__link-title:not(.sns){ font-weight: 800; color: #333; letter-spacing: .025em; }
.sub_location__link-a{ display: inline-block; font-weight: 500; }
.sub_location__link-a + .sub_location__link-a{ margin-left: 1.38888889em; }
@media(min-width:768px){
	.sub_location__info{ padding: .7% 0 0 7.1%; }
}
@media(max-width:767px){
	.sub_location{ flex-direction: column; }
}

/* 비지니스 */
.sub_business__h3{ font-size: var(--font_size28); font-weight: 600; }
.sub_business__h3:has(strong){ font-weight: 400; }
/* .sub_business__h3 strong{  } */

/* 비지니스 하단 공통 */
.sub_bottom__img{ display: grid; gap: clamp(1em, 2vw, 28px); margin-top: 5.6875em; }
.sub_bottom__img-img{ display: block; position: relative; aspect-ratio: 329/262; width: 100%; }
@media(min-width:1280px){
	.sub_bottom__img{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:1279px) and (min-width:768px){
	.sub_bottom__img{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:767px){
	.sub_bottom__img{ grid-template-columns: repeat(1, 1fr); }
}

/* 비지니스 - 솔라 루프 */
.sub_business1{ margin-top: 5.125em; }
.sub_solar_roof + .sub_solar_roof{ margin-top: 5.5625em; }
.sub_solar_roof__list{ display: grid; gap: clamp(1em, 2vw, 28px); margin-top: 1.4375em; }
.sub_solar_roof__list-li{ padding: 2.9375em clamp(1em, 8.81458967%, 29px) 2.5625em; border: 1px solid currentColor; }
.sub_solar_roof__list-title{ margin: 31px 0 12px; font-size: var(--font_size22); font-weight: 600; }
.sub_solar_roof__list-p{ line-height: 1.625; }
.sub_solar_roof__table{ position: relative; margin-top: 1.4375em; text-align: center; }
.sub_solar_roof__table::before{ content: ''; position: absolute; inset: -1px 0 auto; border-top: 1px solid currentColor; }
.sub_solar_roof__table thead{ background: #f5f5f5; font-weight: 600; }
.sub_solar_roof__table thead tr > *{ padding: 1.0625em 1em 0.875em; }
.sub_solar_roof__table tr > *{ border: 1px solid #ddd; }
.sub_solar_roof__table tr > *:first-child{ width: 17.8%; border-left: 0; font-weight: 400; }
.sub_solar_roof__table tr > *:not(:first-child){ width: 41.1%; }
.sub_solar_roof__table tr > *:last-child{ border-right: 0; }
.sub_solar_roof__table tbody tr:nth-child(1) > *{ padding: 34px 1em 35px; }
.sub_solar_roof__table tbody tr:not(:nth-child(1)) > *{ padding: 16.1px 1em; }
.sub_solar_roof__table img{ max-width: 100%; }
@media(min-width:1280px){
	.sub_solar_roof__list{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:1279px) and (min-width:768px){
	.sub_solar_roof__list{ grid-template-columns: repeat(2, 1fr); }
	.sub_solar_roof__list-p br {display: none;}
}
@media(max-width:767px){
	.sub_solar_roof__list{ grid-template-columns: repeat(1, 1fr); }
}

/* 비지니스 - 신재생에너지 보급사업 */
/* .solar_img {margin-top: 5em;} */
.solar_img {text-align: center;padding: 40px; box-sizing: border-box; border: 1px solid var(--black); margin-top: 5em;}
.solar_img img {max-width: 100%;}
.sub_renewable__list{ margin-top: 5em; }
.sub_renewable__list-li + .sub_renewable__list-li{ margin-top: 5.75em; }
.sub_renewable__list-h3{ font-size: var(--font_size28); font-weight: 600; }
.sub_renewable__list-p{ margin-top: 1.05em; padding: 1.6em 1.6em 1.7em; border: 1px solid var(--black); font-size: var(--font_size20); color: #444; }

/* 비지니스 - 태양광 발전사업 */
.sun_img {text-align: center;padding: 40px; box-sizing: border-box; border: 1px solid var(--black);}
.sun_img img {max-width: 100%;}
.sub_sunlight-p{ margin-top: -0.91666667em; font-size: var(--font_size24); }

/* 비지니스 - 에코프렌츠 */
.sub_business4{margin-top: 5.125em; }
.sub_eco-p{ margin-top: 1.05em; padding: 1.4em 1.7em 1.45em; border: 1px solid currentColor; font-size: var(--font_size20); line-height: 1.8; color: #444; }
.sub_eco-p strong{ color: var(--black); }

/* 비지니스 - 전기공사 */
.sub_electric__guide{ margin-top: 4.8125em; }
.sub_electric__h3{ font-size: var(--font_size28); }
.sub_electric__guide-list{ display: grid; gap: clamp( 1em, 2.08333333vw, 40px); margin-top: 1.4375em; }
.sub_electric__guide-li{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.25em; aspect-ratio: 1; padding-top: 7%; border: 1px solid currentColor; box-sizing: border-box; }
.sub_electric__guide-img{ height: clamp( 1.8em, 18.81%, 43px); }
.sub_electric__guide-title{ font-size: var(--font_size18); }
.sub_electric__cert{ margin-top: 5.5625em; }
.sub_electric__cert-list{ display: grid; gap: 2em 10px; margin-top: 1.4375em; text-align: center; }
.sub_electric__cert-img{ aspect-ratio: 272/344; width: 100%; }
.sub_electric__cert-title{ margin-top: 1.125em; font-weight: 500; }
@media(min-width:1280px){
	.sub_electric__guide-list,
	.sub_electric__cert-list{ grid-template-columns: repeat(5, 1fr); }
}

@media(max-width:1279px) and (min-width:768px){
	.sub_electric__guide-list,
	.sub_electric__cert-list{ grid-template-columns: repeat(5, 1fr); }
}
@media(max-width:767px){
	.solar_img {padding: 10px; margin-top: 2.143em}
	.sub_renewable__list-li + .sub_renewable__list-li {margin-top: 2.143em;}
	.sub_renewable__list {margin-top: 2.143em;}
	.sub_bottom__img {margin-top: 2.143em;}
	.sub_electric__guide-list,
	.sub_electric__cert-list{ grid-template-columns: repeat(3, 1fr); }
}

@media(max-width:600px){
	.sub_electric__guide-list,
	.sub_electric__cert-list{ grid-template-columns: repeat(2, 1fr); }
}

/* 솔라스케이프 02Business-sub06*/
.sub06__wrap { display: flex; gap: 6.25rem; align-items: center; }
.sub06__wrap .img__sRoof { width: 100%; }
.photoGallery { margin-top: 1.4375em; }
.photoGallery .pGrid { display: grid; gap: 1.4375em; grid-template-columns: repeat(3, 1fr); }
.photoGallery .pGrid li { display: flex; height: auto; flex-wrap: wrap; justify-content: center; overflow: hidden;}
.photoGallery .pGrid li img { width: 100%; height: fit-content; transition: all 0.3s;}
.photoGallery .pGrid li img:hover { transform: scale(1.05); }
@media (max-width: 1280px) {
	.sub06__wrap { 
		flex-direction: column;
	}
	.sub06__wrap .img__sRoof {
		width: 70%;
	}
	.photoGallery .pGrid {grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.photoGallery .pGrid {grid-template-columns: repeat(1, 1fr); }
}