@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css);
@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Gothic+A1&family=Noto+Sans+KR:wght@100..900&display=swap);
@import url(popup.css?1);
@import url(checkbox.css);
:root {
  --util-stroke-color: #ced5da;
  --util-stroke-color2: #cdcdcd;
  --util-pointRed: #0081ec;
  --util-footer: #1c1f24;
  --util-placeholder: #b0b2c1;
  --util-topGradi: linear-gradient(91deg, #1d8dd9 43.16%, #608fae 217.25%);
  --util-history: #73a0be;
  --util-ESG: #117eff;
  --util-강조: #005fb7;
  --util-설치사례: radial-gradient(
    64.05% 64.6% at 33.83% 34.48%,
    rgba(17, 126, 255, 0.8) 0%,
    rgba(17, 126, 255, 0.97) 100%
  );
  --dot-navy: rgba(31, 65, 132, 0.9);
  --dot-red: rgba(166, 14, 25, 0.8);
  --dot-white: rgba(245, 245, 245, 0.9);
  --brand-red: #205071;
  --brand-burgundy: #081E32;
  --brand-navy: #143269;
  --brand-gray: #7f7f7f;
  --brand-sky: #aacdff;
  --brand-headlinecolor: #a1a1a1;
  --brand-LightGray-100: #f9fafb;
  --brand-LightGray-80: #f5f7f9;
  --brand-LightGray-60: #ecf1f6;
  --brand-LightGray-40: #d3dae4;
  --brand-LightBlue-100: #fafaff;
  --brand-LightBlue-80: #f4f7fd;
  --brand-Gradi: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    rgba(73,117,153, 0.9);
  --dropmenuStyle: 1px 3px 15px 0px rgba(0, 0, 0, 0.07);
  --sitemapStyle: -30px 0px 100px 0px rgba(0, 0, 0, 0.25);
  --black: #000;
  --gray-10: #1c1c1c;
  --gray-20: #252526;
  --gray-40: #444447;
  --gray-50: #4e4d58;
  --gray-60: #696873;
  --gray-70: #898c9f;
  --gray-80: #b8bac7;
  --gray-90: #b0b2c1;
  --gray-100: #dddae4;
  --white: #ffffff;
  --sns-ytb: #ff312b;
  --sns-kakao: #ffe65b;
  --sns-insta: linear-gradient(49deg, #ff9b73 6.62%, #ff3f8b 93.5%);
  --sns-naver: #26c957;
  --sitemap-depth01: clamp(17px, 1.3542vw, 26px);
  --index-headline: clamp(16px, 1.1458vw, 22px);
  --index-visual-tit: clamp(32px, 3.5vw, 64px);
  --index-pagination: 24px;
  --index-main-tit: clamp(28px, 3vw, 52px);
  --index-main-subtit: clamp(24px, 2.5vw, 38px);
  --index-main-txt: clamp(18px, 1.25vw, 24px);
  --index-main-keyword: clamp(14px, 1.1458vw, 22px);
  --index-news-tit: 20px;
  --index-portfolio-tit: 20px;
  --index-portfolio-txt: 20px;
  --index-portfolio-count: 64px;
  --sub-visual-tit-size: clamp(30px, 2.3958vw, 46px);
  --sub-page-tit-size: clamp(28px, 2.5vw, 48px);
  --sub-page-tit2-size: clamp(24px, 1.875vw, 36px);
  --sub-sect-tit-size: 32px;
  --sub-sect-subtit-size: clamp(var(--f17-size), 1.1458vw, 22px);
  --sub-history-tit-size: 60px;
  --sub-tab-menu-size: clamp(17px, 1.0417vw, 20px);
  --sub-dropmenu-size: 18px;
  --sub-placeholder-size: 17px;
  --f36-size: 36px;
  --f30-size: clamp(24px, 1.5625vw, 30px);
  --f28-size: clamp(22px, 1.4583vw, 28px);
  --f26-size: clamp(20px, 1.3542vw, 26px);
  --f24-size: clamp(18px, 1.25vw, 24px);
  --f22-size: clamp(18px, 1.1458vw, 22px);
  --f21-size: clamp(17px, 1.0938vw, 21px);
  --f20-size: clamp(17px, 1.0417vw, 20px);
  --f19-size: clamp(16px, 0.9896vw, 19px);
  --f18-size: clamp(16px, 0.9375vw, 18px);
  --f17-size: 17px;
  --f16-size: clamp(16px, 0.8333vw, 16px);
  --f15-size: 15px;
  --f14-size: 14px;
  --f13-size: 13px;
  --f12-size: 12px;
}
* {
  font-family: Pretendard, "Noto Sans KR", sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
body,
body.index main {
  overflow-x: clip;
}
.mob-br,
.sub .mob-only,
img.mob {
  display: none;
}
.inner {
  width: 1540px;
  position: relative;
  margin: 0 auto;
}
.scroll-stop {
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  touch-action: none;
}
body.index .fix-btns {
  right: 20px;
}
.fix-btns.index .btn-floating {
  background-image: none;
  background-color: #ff8c1a;
}
.fix-btns.index .btn-floating.on {
  background: var(--util-topGradi);
}
.fix-btns {
  z-index: 100000;
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 999;
  opacity: 0;
  align-items: start;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}
.fix-btns::after {
  content: "";
  display: block;
  clear: both;
}
.btn-floating,
.fix-btns {
  display: flex;
}
.btn-floating {
  transition: 0.4s all;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 0;
  display: block;
  background-color: #4f83ad;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border-radius: 9999px;
}
.btn-floating.on {
  width: 175px;
}
.btn-floating .btn-contact a {
  opacity: 0;
  font-size: 0;
  color: #fff;
  font-weight: 500;
}
.btn-floating.on .btn-contact a {
  margin-left: -0.2em;
  transition: 0.3s 0.1s;
  opacity: 1;
  font-size: inherit;
}
.top-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--white) url(/img/ico_top.svg) no-repeat center;
  background-size: contain;
  cursor: pointer;
  float: right;
  border: 1px solid rgba(218, 220, 224, 0.6);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
}
.btn-floating button {
  padding: 0;
  margin: 0;
  line-height: 1;
  width: 60px;
  height: 60px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}
.btn-floating button img {
  width: 100%;
  height: 100%;
}
.mob-image {
  cursor: pointer;
  min-height: auto;
  position: relative;
}
.mob-image.hidden {
  cursor: auto;
}
body.mob .mob-image.hidden {
  cursor: pointer;
}
.mob-image::after {
  content: "";
  background: url(/img/ico_mob-image.svg),
    radial-gradient(
      322.4% 56.17% at 52.54% 50%,
      rgba(17, 126, 255, 0.85) 0,
      rgba(17, 126, 255, 0.81) 100%
    ),
    no-repeat center;
  background-size: contain;
  border-radius: 999px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  z-index: 99;
}
.mob-image.hidden::after {
  display: none;
}
.sub .inner {
  width: 1340px;
}
.sub.industrial-solar .cont .inner,
.sub.industrial-support .cont .inner,
.sub.solar-asset .cont .inner {
  width: 1200px;
}
.sub .cont {
  padding-top: 100px;
  padding-bottom: 100px;
}
.sub.terms .cont {
  padding-top: 0;
}
.sub .cont:has(.section:last-child.gray) {
  padding-bottom: 0;
}
.sub.portfolio .cont,
.sub.pr-support .cont {
  padding-top: 80px;
  padding-bottom: 80px;
}
.sub .visual.white .page-title,
.sub.pr-support .visual .page-title,
.sub.terms .visual .page-title {
  color: var(--gray-10);
}
.sub .section {
  margin-top: 100px;
  margin-bottom: 100px;
}
.gray,
.sub .sect-cont.gray,
.sub .section.gray {
  background: var(--brand-LightGray-80);
  padding-top: 100px;
  padding-bottom: 100px;
}
.sub .section:first-of-type {
  margin-top: 0;
}
.sub .section:last-of-type {
  margin-bottom: 0;
}
.sub .sect-cont {
  margin-top: 50px;
  margin-bottom: 50px;
}
.sub .article-cont {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.sub .page-title {
  color: #000;
  font-size: var(--sub-page-tit-size);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.sub .visual .page-title {
  font-size: var(--sub-visual-tit-size);
  color: var(--white);
  font-weight: 600;
}
.sub .page-title2,
main.view .title-box h2 {
  font-size: var(--sub-page-tit2-size);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.sub .sect-tit-sect {
  margin-bottom: 30px;
}
.sub .sect-tit-sect .sect-tit {
  margin-bottom: 10px;
}
.sub .sect-tit-sect .text-sect p {
  color: var(--gray-40);
}
.sub .sect-tit-sect .sect-tit + p,
.sub .sect-tit-sect .sect-tit ~ p {
  color: var(--gray-40);
}
.sub .sect-tit-sect p ~ p {
  margin-top: 0.3rem;
}
.sub .sect-tit,
.sub .sect-tit > select {
  color: var(--Gray-0, #000);
  font-size: clamp(var(--f22-size), 1.5625vw, var(--sub-sect-tit-size));
  font-size: clamp(22px, 1.5625vw, var(--sub-sect-tit-size));
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 20px;
  position: relative;
}
.sub.esg-sharing .sect-tit {
  font-size: clamp(18px, 1.5625vw, var(--sub-sect-tit-size));
}
.sub .sect-tit::before {
  z-index: -1;
  content: "";
  display: block;
  width: clamp(14px, 0.9896vw, 19px);
  height: clamp(14px, 0.9896vw, 19px);
  background: rgba(86, 179, 78, 0.35);
  border-radius: 100%;
  position: absolute;
  top: 2px;
  left: -5px;
}
.sub.group-history .sect-tit.center {
  font-size: clamp(20px, 1.5625vw, var(--sub-sect-tit-size));
}
.sub.group-history .sect-tit.center::before {
  display: none;
}
.sub .sect-tit + p {
  color: var(--gray-40);
}
.sub.power-business .sect-tit.small {
  margin-bottom: 40px;
}
.sub.power-business .img-list .sect-tit.small {
  font-size: var(--f24-size);
  margin-bottom: 1.2rem;
}
.sub .img-list .sect-tit::before {
  display: none;
}
.sub .cont-subtit {
  width: fit-content;
  display: block;
  color: var(--Gray-Gray0, #000);
  font-size: var(--sub-sect-subtit-size);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.33px;
  background-image: linear-gradient(
    transparent calc(100% - (clamp(10px, 0.8333vw, 16px))),
    #ffe5e7 10px
  );
  display: inline;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left bottom;
}
.sub .cont-subtit.none,
.sub-title-layout .cont-subtit {
  font-weight: 400;
  letter-spacing: -0.3px;
  background: 0 0;
}
.sub .cont-subtit + *,
.sub .cont-subtit + p {
  margin-top: 10px;
}
.link:hover .underline {
  background-size: 100% 100%;
}
.table-wrap .list.gallery.more .cont-subtit {
  margin-bottom: 15px;
}
.sub .sect-tit.small {
  font-size: var(--f30-size);
  font-size: clamp(22px, 1.5625vw, 30px);
  margin-bottom: 1.2rem;
}
.sub header.highlight {
  color: var(--util-강조);
  font-weight: 500;
  margin-bottom: 1.8rem;
}
.sub .txt-18.highlight {
  margin-bottom: 1rem;
}
.sub .table-wrap:has(table) .cont-subtit.highlight {
  margin-bottom: 0;
}
.sub .cont-subtit.line {
  border-bottom: 1px solid var(--util-stroke-color);
}
.txt-36 {
  font-size: var(--f36-size);
}
.txt-30 {
  font-size: var(--f30-size);
}
.txt-26 {
  font-size: var(--f26-size);
}
.txt-24 {
  font-size: var(--f24-size);
}
.txt-22 {
  font-size: var(--f22-size);
}
.txt-21 {
  font-size: var(--f21-size);
}
.txt-20 {
  font-size: var(--f20-size);
}
.txt-19 {
  font-size: var(--f19-size);
}
.txt-18 {
  font-size: var(--f18-size);
}
.txt-17 {
  font-size: var(--f17-size);
}
.txt-16 {
  font-size: var(--f16-size);
}
.txt-15 {
  font-size: var(--f15-size);
}
.txt-14 {
  font-size: var(--f14-size);
}
.txt-13 {
  font-size: var(--f13-size);
}
.txt-12 {
  font-size: var(--f12-size);
}
.center {
  text-align: center;
}
.sub header.center {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: 100px;
}
.sub header.sect-tit.center {
  font-weight: 500;
  line-height: 150%;
}
.sub .esg.splite,
.sub .quotes .esg.splite,
.sub header.sect-tit.center > span:not(.col) {
  color: var(--brand-burgundy);
}
.sub header.sect-tit.center::before {
  display: none;
}
.sub.group-info header.center {
  padding-bottom: 0;
  margin-bottom: 0;
}
.common-banner-sect {
  padding-top: 50px;
}
.common-banner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
  box-sizing: border-box;
  padding: 81px 50px;
  background: url(/img/common-banner-bg.png) no-repeat center;
  background-size: cover;
  border-radius: 15px;
  text-align: center;
}
.common-banner .txt-26 {
  width: 100%;
  text-align: left;
  color: var(--white);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
}
.common-banner .txt-18 {
  width: 100%;
  text-align: left;
  color: var(--white);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.27px;
}
.sub-title-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.sub-title-layout .page-title,
.sub-title-layout .sect-tit {
  width: 500px;
  padding-bottom: 100px;
  margin-bottom: 0;
}
.sub-title-layout .page-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sub-title-layout .page-title::before {
  content: "";
  display: block;
  width: 6px;
  height: calc(var(--sub-page-tit-size) - 0.1vw);
  background: #497599;
  margin-bottom: auto;
  margin-top: 4px;
}
.sub-title-layout .sect-cont {
  width: calc(100% - 500px);
  margin: 0;
}
.sub-title-layout .cont-subtit {
  font-size: var(--f20-size);
}
.sub .text-sect .cont-subtit ~ p,
.sub-title-layout .cont-subtit ~ p {
  color: var(--gray-40);
}
.sub .text-sect .cont-subtit {
  margin-bottom: 1.2rem;
}
.sub .text-sect .cont-subtit + p {
  margin-top: 1.2rem;
}
.sub .text-sect p + p {
  margin-top: 0.6rem;
}
.sub-title-layout + .sect-cont.gray {
  margin-top: 0;
}
.sub-title-layout + .sect-cont {
  margin-top: 80px;
  margin-bottom: 80px;
}
.flex-box.infograp,
.infograp .flex-box {
  align-items: center;
  justify-content: space-between;
}
.infograp-style-01 {
  background: var(--brand-LightGray-80);
  padding: 60px 0;
}
.sub-title-layout + .sect-cont.infograp-style-01 {
  margin-top: 0;
  margin-bottom: 100px;
}
.sub .sect-cont.infograp-style-01 + .sect-cont {
  margin-bottom: 75px;
}
.sub-title-layout + .sect-cont.infograp-style-01 img {
  mix-blend-mode: multiply;
}
.sub .infograp-style-01 .sect-tit,
.sub.ai-operation-maintenance .sub-title-layout + .sect-cont .sect-tit {
  margin-bottom: 50px;
}
.sub .infograp-style-01 .text-sect {
  counter-reset: counter;
}
.sub .infograp-style-01 .text-sect > div,
.sub .infograp-style-01 .text-sect > div:first-of-type {
  display: flex;
  flex-direction: row;
  gap: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  padding: 1.5rem 30px;
  counter-increment: counter;
}
.sub .infograp-style-01 .text-sect > div::before {
  content: counter(counter, decimal-leading-zero);
  color: var(--cont-Blue, rgba(3, 103, 178, 0.95));
  font-size: var(--f24-size);
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}
.sub.esg .flex-box.infograp .img-sect,
.sub.prepaid-cost .flex-box.infograp .img-sect {
  max-width: none;
}
.sub.insurance .infograp header {
  color: var(--black);
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.12px;
  margin-bottom: 2rem;
}
.flex-box.infograp .img-sect,
.infograp .flex-box > .img-sect {
  width: 42.5%;
}
.flex-box.infograp:not(:has(.text-sect)) .img-sect {
  width: 100%;
}
.flex-box.infograp .text-sect,
.infograp .flex-box > .text-sect {
  width: calc(57.5% - 120px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flex-box.infograp .highlight,
.infograp .flex-box .highlight {
  color: var(--util-ESG);
}
.list .boxStyle1 {
  width: calc((100% - 60px) / 3);
}
.boxStyle1 {
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
  border-radius: 8px;
  background: var(--Brand-LightGray-80, #f5f7f9);
}
.boxStyle2 {
  justify-content: flex-start;
}
.boxStyle1 .tit {
  color: var(--black);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.22px;
}
.boxStyle1 .icon {
  display: block;
  width: 5vw;
  height: 5vw;
  min-width: 2.5rem;
  min-height: 2.5rem;
  max-width: 50px;
  max-height: 50px;
  margin-left: auto;
  margin-top: 30px;
}
.boxStyle2 .icon {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
.boxStyle3,
.list .boxStyle3 {
  width: calc((100% - 90px) / 4);
  display: flex;
  flex-direction: column;
  padding: 40px 30px 35px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  background-color: var(--brand-LightGray-80);
  border-radius: 25px;
}
.boxStyle3 .icon {
  width: 22vw;
  height: 22vw;
  margin: 0;
  max-width: 90px;
  max-height: 90px;
}
.list:has(.phone) {
  overflow: hidden;
}
.phone {
  flex: 1;
  padding: 50px 40px 0 40px;
  text-align: center;
  background-color: var(--brand-LightGray-60);
  position: relative;
}
.phone::after {
  content: "next";
  text-indent: -999em;
  width: 60px;
  height: 60px;
  background: url(/img/ico_next.svg) no-repeat center;
  position: absolute;
  left: 100%;
  top: calc(50% - 30px);
}
.phone strong {
  text-align: center;
  color: var(--Gray-Gray20, #252526);
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.3px;
}
.phone:last-child strong {
  color: var(--util-강조);
}
.phone strong::before {
  content: "1";
  font-size: var(--f14-size);
  line-height: 1;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--gray-50);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999em;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}
.phone:nth-of-type(2) strong::before {
  content: "2";
}
.phone:nth-of-type(3) strong::before {
  content: "3";
}
.phone:nth-of-type(4) strong::before {
  content: "4";
}
.phone:nth-of-type(5) strong::before {
  content: "5";
}
.phone:nth-of-type(6) strong::before {
  content: "6";
  background-color: var(--util-강조);
}
.phone strong::after {
  content: "";
  display: block;
  width: 224px;
  height: 408px;
  background: url(/img/solar-asset/prepaid-cost-phone-img-01.png) no-repeat
    center bottom;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 2rem;
}
.phone:nth-of-type(2) strong::after {
  background-image: url(/img/solar-asset/prepaid-cost-phone-img-02.png);
}
.phone:nth-of-type(3) strong::after {
  background-image: url(/img/solar-asset/prepaid-cost-phone-img-03.png);
}
.phone:nth-of-type(4) strong::after {
  background-image: url(/img/solar-asset/prepaid-cost-phone-img-04.png);
}
.phone:nth-of-type(5) strong::after {
  background-image: url(/img/solar-asset/prepaid-cost-phone-img-05.png);
}
.phone:nth-of-type(6) strong::after {
  background-image: url(/img/solar-asset/prepaid-cost-phone-img-06.png);
}
.qr-code .table-wrap::before {
  content: "SGI M 서울보증보험 어플 다운로드 QR코드";
  text-indent: -999em;
  display: block;
  width: 25vw;
  height: 25vw;
  max-width: 134px;
  max-height: 134px;
  background: url(/img/solar-asset/qr-code.png) no-repeat center;
  background-size: cover;
  margin: 0 auto;
  margin-bottom: 25px;
  border: 1px solid var(--util-footer);
}
.sub .comp-box {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.comp-box {
  margin-top: 20px;
}
.comp-box .comp {
  padding: 15px 20px;
  border: 1px solid var(--util-stroke-color);
  border-radius: 8px;
  justify-content: center;
  width: calc(50% - 45px);
  order: 1;
}
.comp-box .comp:last-of-type {
  order: 3;
}
.comp-box .comp-header {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-sky);
  border-radius: 8px;
  width: 90px;
  order: 2;
  margin: 0 15px;
  color: var(--gray-10);
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}
.comp-box.mob-only {
  display: none;
}
.sub .comp-box .comp {
  display: flex;
  flex-direction: column;
}
.sub .comp-box .comp .txt-sect {
  width: 100%;
}
.sub .comp-box > * {
  text-align: center;
}
.sub .comp-box .info-txt {
  color: var(--gray-10);
  flex-direction: column;
}
.sub .comp-box .info-sect div {
  gap: 8px;
  padding: 1rem 20px;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--util-stroke-color);
}
.sub .comp-box .info-sect {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub .check-list .txt-16,
.sub .comp-box .info-txt .txt-16 {
  color: var(--gray-60);
}
.sub .comp-box .info-txt .txt-16::before {
  content: "- ";
}
.comp-tit {
  width: 100%;
  text-align: center;
  border-radius: 6px;
  padding: 1rem;
  color: var(--gray-10);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.3px;
  background-color: var(--brand-LightGray-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.comp-tit.navy {
  background-color: var(--brand-navy);
  color: var(--white);
}
.comp-box .comp.comp-tit {
  border: none;
}
.sub .check-list p,
.sub .comp-box .info-txt {
  text-align: left;
  padding: 0;
  position: relative;
  padding-left: 1.3rem;
}
.sub .check-list p strong {
  font-weight: 600;
}
.sub .check-list p::before,
.sub .comp-box .info-txt::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: url(/img/ico_comp-check.svg) no-repeat center;
  position: absolute;
  top: 5px;
  left: 0;
}
.sub.no-drill-waterproofing .comp-box .comp:first-of-type .info-txt::before,
.sub.solar-lease .comp-box .comp:first-of-type .info-txt::before {
  filter: grayscale(1) sepia(0) saturate(1049%) hue-rotate(147deg)
    brightness(250%) contrast(85%);
}
.sub.no-drill-waterproofing .comp-box .img-sect,
.sub.re100 .comp-box .img-sect {
  width: 100%;
  height: fit-content;
  aspect-ratio: 520/140;
  background-color: #f9fafb;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.sub.no-drill-waterproofing .comp-box .img-sect {
  aspect-ratio: 520/235;
}
.sub.no-drill-waterproofing .comp-box .img-sect img,
.sub.re100 .comp-box .img-sect img {
  width: 100%;
  height: 90%;
  margin: auto;
  object-fit: contain;
}
.sub.no-drill-waterproofing .comp-box .img-sect img {
  height: 100%;
}
.sub.prepaid-cost .check-list-box {
  gap: 80px;
}
.sub.prepaid-cost .check-list-box::before {
  content: "";
  width: 35.4167vw;
  max-width: 680px;
  aspect-ratio: 680/552;
  display: block;
  background: url(/img/solar-asset/prepaid-cost-img-02.png) no-repeat center;
  background-size: cover;
  border-radius: 10px;
}
.sub.prepaid-cost .check-list {
  flex: 1;
}
.sub.prepaid-cost .check-list > div {
  padding: 20px 0 20px 12px;
  border-bottom: 1px solid #e2e2e2;
}
.sub.prepaid-cost .check-list > div:last-of-type {
  border-bottom-color: #aaa;
}
.sub.prepaid-cost .check-list > div:first-of-type {
  border-top: 1px solid #aaa;
}
ol.ms_process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  font-size: var(--f18-size);
}
ol.ms_process > li > ol > li {
  margin-top: 30px;
}
ol.ms_process > li:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 6;
}
ol.ms_process > li .deps1,
ol.ms_process > li > ol > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  text-align: center;
  line-height: 1;
  line-height: 1.4;
  border-radius: 34px;
  padding: 0 60px;
  padding: 1.4rem 3rem;
  font-size: var(--f20-size);
}
ol.ms_process > li .deps1 br,
ol.ms_process > li > ol > li br {
  display: none;
}
ol.ms_process > li .deps1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: #fff;
  background-color: var(--dot-navy);
  font-weight: 500;
}
ol.ms_process > li li:has(.dot-list) {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}
ol.ms_process > li .deps1 > * {
  flex: 1;
}
ol.ms_process > li .deps1 * {
  color: #fff;
  font-weight: 500;
}
ol.ms_process > li > ol > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
ol.ms_process li:has(.two) {
  height: calc(9rem + 30px);
}
ol.ms_process > li > ol > li:before {
  position: absolute;
  top: -30px;
  left: 50%;
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(/img/ico_next.svg) no-repeat center;
  background-size: 100% 100%;
  transform: translate(-50%) rotate(90deg);
}
ol.ms_process > li > ol > li span.deps2 {
  color: var(--gray-20);
  font-weight: 500;
}
.blue-box {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 12px;
  background-color: #f4f7fd;
  margin-bottom: 1.3rem;
}
.blue-box strong {
  color: var(--Gray-Gray0, #000);
  text-align: center;
  font-family: Pretendard;
  font-size: var(--f22-size);
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.33px;
  background-image: linear-gradient(
    transparent calc(100% - (clamp(10px, 0.8333vw, 16px))),
    #ffe5e7 10px
  );
  display: inline;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left bottom;
}
.blue-box p {
  text-align: center;
  color: var(--gray-10);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.sect-cont:has(.esg-list) {
  overflow: hidden;
  min-height: 100vh;
  padding: 120px 0;
}
.sect-cont:has(.esg-list) .sect-tit {
  margin-bottom: auto;
  padding-bottom: 0;
}
.sub .table-wrap .esg-list {
  position: relative;
  gap: 40px 30px;
  padding-top: 6.875vw;
  justify-content: center;
}
.sub .esg-list::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 3004px;
  height: 1791px;
  bottom: -1056px;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(179, 210, 229, 0.42) -25.85%,
    rgba(238, 244, 250, 0.14) 77.11%
  );
  background-blend-mode: multiply;
}
.sub .esg-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sub .esg-list li > * {
  width: 100%;
}
.sub .esg-list header {
  display: flex;
  width: 30vw;
  height: 30vw;
  max-width: 150px;
  max-height: 150px;
  padding-top: 2px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  aspect-ratio: 1/1;
  border-radius: 999px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.95) 0,
    #fff 100%
  );
  box-shadow: 0 0 20px 0 #eaf3f8;
  backdrop-filter: blur(2px);
  color: var(--Gray-0, #000);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.27px;
}
.sub .esg-list header::before {
  content: "";
  display: block;
  width: 47%;
  height: 47%;
  background: url(/img/industrial-solar/ico_esg-list-01.svg) no-repeat center;
  background-size: cover;
}
.sub .esg-list li:nth-child(2) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-02.svg);
}
.sub .esg-list li:nth-child(2) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-02.svg);
}
.sub .esg-list li:nth-child(3) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-03.svg);
}
.sub .esg-list li:nth-child(4) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-04.svg);
}
.sub .esg-list li:nth-child(5) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-05.svg);
}
.sub .esg-list li:nth-child(6) header::before {
  background-image: url(/img/industrial-solar/ico_esg-list-06.svg);
}
.sub .esg-list .text-sect {
  display: flex;
  flex: 1 1 0;
}
.sub .esg-list strong {
  color: var(--white);
  text-align: center;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.3px;
  display: block;
  padding: 5px 0;
  background: var(--dot-navy);
  margin-top: 1rem;
}
.sub .esg-list p {
  color: var(--gray-10);
  background: #fff;
  box-shadow: 0 0 35px 0 rgba(66, 68, 83, 0.05);
  backdrop-filter: blur(15px);
  display: flex;
  padding: 1rem 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: var(--gray-10);
  text-align: center;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.27px;
  flex: 1 1 0;
}
.sub .img-list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.sub .img-list > li {
  display: flex;
  gap: 80px;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
.sub .img-list > li:nth-child(even) {
  flex-direction: row-reverse;
}
.sub .img-list > li .img-sect {
  width: 57.33%;
  border-radius: 8px;
  overflow: hidden;
}
.sub .img-list > li .text-sect {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sub .img-list > li .text-sect span + span {
  display: block;
  margin-top: 0.5rem;
}
.sub .img-list > li .text-sect .sect-subtitle {
  margin-bottom: 0.85em;
  font-weight: 500;
}
.sub.power-business .img-sect.rec {
  border-radius: 8px;
  padding: 3.125rem 0 1.5625rem;
  text-align: center;
}
.sub.power-business .img-sect.rec img {
  width: 60vw;
  max-width: 300px;
}
.sub.power-business .img-sect.rec p {
  font-size: clamp(14px, 0.8333vw, 16px);
  padding: 0 1rem;
  text-align: center;
  color: var(--gray-20);
  margin-top: 2.5rem;
}
.sub .calc-box {
  width: 100%;
  border-radius: 23px;
  background: #ecf1f6;
  display: flex;
  padding: 40px 2rem 30px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.sub .calc-box .sect-tit {
  margin: 0 auto;
  text-align: center;
  margin-bottom: 30px;
}
.sub .calc-box .sect-tit::before {
  display: none;
}
.sub .calc-box .sect-tit.answer,
.sub .calc-box.on .sect-tit.que {
  display: none;
}
.sub .calc-box.on .sect-tit.answer {
  display: block;
}
.sub .calc-box .sect-tit span {
  display: inline-block;
  position: relative;
  margin: 0 0.5rem;
}
.sub .calc-box .sect-tit span::before {
  content: "";
  display: block;
  position: absolute;
  width: 170%;
  height: 135%;
  top: -21%;
  left: -35%;
  background: url(/img/industrial-solar/ico_calc-box-sign.svg) no-repeat center;
  z-index: -1;
  background-size: contain;
}
.sub .calc-box.on .sect-tit {
  display: flex;
  text-align: left;
}
.sub .calc-box .sect-tit::after {
  content: "";
  display: block;
  width: 250px;
  height: 236px;
  background: url(/img/industrial-solar/ico_calc-box.svg) no-repeat center;
  margin: 0 auto;
  margin-top: 30px;
  background-size: contain;
  transition: all 0.3s;
}
.sub .calc-box.capacity .sect-tit::after {
  display: none;
}
.sub .calc-box.on .sect-tit::after {
  margin-right: 0;
  margin-left: auto;
}
.sub .calc-box .link-btn {
  display: block;
  margin-top: 30px;
}
.sub.industrial-solar .calc-box .inner {
  width: 100%;
  max-width: 840px;
}
.sub .calc-box .info-sect.gray {
  padding: 0;
  background-color: transparent;
  display: none;
}
.sub .calc-box .count header {
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.27px;
}
.sub .calc-box .count,
.sub .calc-box .count .num {
  text-align: right;
  justify-content: end;
}
.sub .calc-box .count {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--util-stroke-color);
}
.sub .calc-box.capacity .count {
  border-bottom: none;
}
.sub .calc-box.capacity .calc-sect {
  border-bottom: none;
}
.sub .calc-box .count .num {
  font-size: var(--f28-size);
  text-align: right;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -1.12px;
}
.sub .calc-box .count .num.esg {
  color: var(--util-ESG);
}
.sub .calc-box .calc-counter,
.sub .calc-box .count .counter {
  color: inherit;
  text-align: right;
  font-family: Pretendard;
  font-size: clamp(30px, 4vw, 43px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -1.72px;
}
.sub .calc-box.capacity .calc-counter {
  font-size: clamp(26px, 4vw, 36px);
}
.sub .calc-box .info-sect.gray .txt-sect {
  width: 100%;
  flex: 1 1 0;
  text-align: right;
}
.sub .calc-box .info-sect.gray .txt-sect p + span,
.sub .calc-box .info-sect.gray span.txt-15 {
  color: var(--gray-70);
  text-align: right;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.225px;
}
.sub .calc-box .info-sect.gray .info-txt {
  padding: 20px 0;
  border-bottom: 1px solid var(--brand-LightGray-40);
}
.sub .calc-box .info-sect.gray .info-txt strong {
  font-size: var(--f18-size);
  color: var(--gray-20);
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.27px;
}
.sub .calc-box .info-sect.gray .info-txt p {
  color: var(--gray-20);
  font-size: var(--f22-size);
  font-size: clamp(22px, 1.1458vw, 22px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.88px;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 3px;
}
.sub .calc-box.capacity .sect-tit {
  text-align: left;
  margin-bottom: 5rem;
}
.sub .calc-box.capacity .sect-tit > .flex-box {
  align-items: end;
}
.sub .calc-box.capacity .sect-tit > .flex-box {
  align-items: end;
}
.sub .calc-box.capacity .sect-tit > .flex-box > * {
  flex: 1;
}
.sub .calc-box.capacity .info-sect .flex-box {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}
.sub .calc-box.capacity .calc-sect {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--brand-LightGray-40);
}
.sub .calc-box.capacity .calc-sect:last-of-type {
  padding: 1.2rem 0;
  border-bottom: none;
}
.sub .calc-box.capacity .input-box {
  width: 100%;
  position: relative;
}
.sub .calc-box.capacity .input-box .flex-box {
  align-items: center;
  font-size: var(--f28-size);
  text-align: right;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -1.12px;
  color: var(--gray-20);
  gap: 5px;
}
.sub .calc-box.capacity .input-box input {
  width: 100%;
  font-size: clamp(28px, 4vw, 32px);
  background-color: var(--white);
  box-shadow: var(--dropmenuStyle);
  text-align: right;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.36px;
  padding: 10px 18px;
  position: relative;
}
.sub .calc-box.capacity .input-box input::after {
  content: "kw";
  display: block;
}
.sub .calc-box.capacity .info-sect {
  display: block;
}
.sub .calc-box.capacity .input-box input::placeholder {
  font-size: var(--sub-placeholder-size);
  font-size: var(--f22-size);
  position: absolute;
  right: auto;
  top: 50%;
  transform: translate(0, -50%);
  text-align: right;
}
.sub .calc-box.capacity label {
  font-size: var(--f16-size);
  margin-bottom: 0;
}
.partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.partner {
  width: calc((100% - 6rem) / 4);
  border-radius: 9999em;
  border: 1px solid var(--brand-LightGray-40);
  position: relative;
  cursor: pointer;
}
.partner .text-sect {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s;
  border-radius: 9999rem;
}
.partner:hover .text-sect {
  opacity: 1;
  box-shadow: 1px 3px 13.6px 0 rgba(0, 0, 0, 0.25);
}
.partner .text-sect img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: red;
}
.partner .text-sect img {
  border-radius: 9999rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner .text-sect p {
  border-radius: 9999rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  font-family: Pretendard;
  font-size: var(--f24-size);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.36px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.partner .text-sect p::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  background-blend-mode: multiply;
  z-index: -1;
}
.sub.ai-operation-maintenance .flex-box {
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
}
.sub .video-cont {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 1rem;
  overflow: hidden;
}
.sub .video-cont iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mov .wrap {
  overflow: hidden;
  position: relative;
}
.mov .swiper {
  margin-right: 412px;
}
.mov .pagination {
  position: absolute;
  top: 0;
  right: 0;
  width: 412px;
  z-index: 10;
  height: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
}
.mov .slide-pagination li {
  width: 100%;
  height: max-content;
  background-color: transparent;
  display: block;
  border-radius: 0;
  opacity: 1;
}
.mov .slide-pagination li a {
  display: block;
  padding: 18px 0;
  margin-left: 80px;
  color: var(--gray-20);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.27px;
  border-bottom: 1px solid var(--Brand-LightGray-40, #d3dae4);
}
.mov .slide-pagination li.swiper-pagination-bullet-active {
  border-bottom: 1px solid var(--util-ESG);
}
.mov .slide-pagination li.swiper-pagination-bullet-active a {
  color: var(--util-ESG);
  border-bottom-color: transparent;
}
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0;
}
.mov .slide-pagination li.swiper-pagination-bullet {
  color: #000;
  position: relative;
}
.ai-oper-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.ai-oper-list > .ai-oper {
  cursor: pointer;
  border-radius: 16px;
  background: var(--brand-LightGray-80);
  background: url(/img/industrial-solar/ai-oper-bg.png),
    linear-gradient(248deg, #1f7de9 -9.61%, #003d86 69.99%) no-repeat;
  width: calc(50% - 1rem);
  display: flex;
  padding: 40px 60px;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 30px;
  align-self: stretch;
  color: var(--white);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border: 2px solid transparent;
  transition: 0.2s;
  position: relative;
}
.ai-oper-list > .ai-oper::before {
  content: "더보기";
  text-indent: -999em;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: url(/img/ico_plus.svg) no-repeat center,
    radial-gradient(
      64.05% 64.6% at 33.83% 34.48%,
      rgba(0,141,238, 0.8) 0,
      rgba(0,141,238, 0.97) 100%
    );
  filter: brightness(200%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.6s;
}
.ai-oper-list > .ai-oper:hover::before {
  opacity: 1;
  z-index: 1;
}
.ai-oper-list > .ai-oper::after {
  transition: 0.3s;
  content: "";
  display: block;
  width: 100%;
  height: 235px;
  background: url(/img/industrial-solar/ai-oper-01.svg) no-repeat center;
  background-size: contain;
}
.ai-oper-list > .ai-oper:nth-child(2)::after {
  background-image: url(/img/industrial-solar/ai-oper-02.svg);
}
.ai-oper-list > .ai-oper:nth-child(3)::after {
  background-image: url(/img/industrial-solar/ai-oper-03.svg);
}
.ai-oper-list > .ai-oper:nth-child(4)::after {
  background-image: url(/img/industrial-solar/ai-oper-04.svg);
}
.ai-oper-list > .ai-oper:hover::after {
  filter: blur(5px);
}
.sub.self-use .list:has(.boxStyle3) {
  gap: 0;
  justify-content: center;
}
.sub.self-use .self-use-news .text-sect {
  margin-top: 2rem;
}
.sub.self-use .gray:has(.boxStyle1) {
  background-color: var(--brand-LightGray-80);
  padding: 50px 0;
}
.sub.self-use .boxStyle3 {
  flex: 1;
  max-width: 240px;
}
.sub.self-use .gray .boxStyle3 {
  padding: 0;
  background-color: transparent;
}
.sub.self-use .boxStyle3 .tit {
  text-align: center;
  flex: 1 1 0;
}
.bfpr-logo {
  width: 12vw;
  height: fit-content;
  max-width: 340px;
  margin-left: auto;
}
.sub .before-after {
  margin-top: 1rem;
}
.sub .before-after .flex-box {
  gap: 8px;
  flex-wrap: wrap;
}
.sub .before-after .img-sect {
  flex: 1;
  position: relative;
}
.sub .before-after .img-sect::before {
  color: var(--white);
  width: fit-content;
  content: "시공 전";
  display: flex;
  padding: 5px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--f18-size);
}
.sub .before-after::after {
  font-size: var(--f16-size);
  display: block;
  content: "제로솔루션 시공사례";
  color: var(--black);
  margin-top: 8px;
}
.sub .before-after .img-sect:last-child:before {
  content: "시공 후";
}
.support-layout {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0;
}
.support-layout ~ .sect-cont {
  padding-top: 50px;
  padding-bottom: 50px;
}
.support-layout ~ .sect-cont:last-of-type {
  padding-bottom: 0;
}
.section:has(.support-layout) .bg-sect {
  height: 300px;
}
.support-layout .tit-txt {
  width: 57.5%;
}
.support-layout h3 {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.support-layout .flag {
  font-size: var(--f17-size);
  height: fit-content;
  background: rgba(17, 141, 255, 0.1);
  border: none;
  color: var(--util-ESG);
}
.support-layout .flag.off {
  color: var(--brand-gray);
  background-color: var(--brand-LightGray-60);
}
.support-layout .flag::before {
  display: none;
}
.support-layout .tit-txt .txt-20 {
  word-break: keep-all;
  box-sizing: border-box;
  background-color: var(--brand-LightGray-80);
  width: 75.4%;
  padding: 25px 27px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sub.insurance .support-layout .tit-txt .txt-20 {
  padding: 0;
  background-color: transparent;
}
.support-layout .sect-cont {
  width: 42.5%;
  margin: 0;
}
#header {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  position: absolute;
  max-height: 100px;
  transition: 0s;
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) -622%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.index #header {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) -622%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #fff;
  border-bottom: none;
}
#header.on,
#header.wh {
  background: #fff;
  color: var(--black);
}
#header.on {
  max-height: 100%;
  transition: height 0.5s ease, background 0.5s ease;
  box-shadow: -30px 0 100px 0 rgba(0, 0, 0, 0.5);
}
#header.on::before {
  width: 100%;
  height: 1px;
  position: absolute;
  content: "";
  background-color: var(--util-stroke-color);
  left: 0;
  top: 100px;
}
#header.sitemap {
  z-index: 10000;
}
#header.sitemap .logo {
  z-index: 9999;
}
#header.on .sitemap-btn {
  background-color: var(--brand-red);
}
#header .sitemap-btn i {
  display: block;
  text-indent: -999999em;
  width: 100px;
  height: 100px;
  background: transparent url(/img/ico_sitemap.svg) no-repeat;
  background-size: contain;
}
#header .logo i {
  height: 100px;
}
#header.sitemap {
  z-index: 10000;
}
#header .logo {
  position: relative;
  height: max-content;
  display: flex;
}
#header .logo i {
  margin: 0 100px;
  background: transparent url(/img/logo_white.svg) no-repeat center/contain;
  display: block;
  width: 214px;
  height: 100px;
}
#header.on .logo i,
#header.wh .logo i {
  background-image: url(/img/logo.svg);
  display: block;
  width: 214px;
  height: 100px;
}
#header > .inner {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#header a {
  display: block;
}
#header #gnb_menu {
  margin-right: auto;
}
#header #gnb_menu .depth01 > li > a {
  line-height: 1.3;
  width: fit-content;
  padding: 36.35px 30px;
  font-size: var(--f21-size);
  font-weight: 600;
  font-style: normal;
  font-weight: 600;
}
#header:not(.on) #gnb_menu .depth01 > .active > a {
  position: relative;
}
#header:not(.on) #gnb_menu .depth01 > .active > a:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 1px;
}
#header #gnb_menu li a {
  transition: 0.3s;
}
#gnb_menu .depth02 > li > a:active,
#gnb_menu .depth02 > li > a:focus,
#gnb_menu .depth02 > li > a:hover,
#header #gnb_menu .depth01 > .on > a,
#header.on #gnb_menu .depth01 > .on > a,
#header.on #gnb_menu .depth01 > li > a:active,
#header.on #gnb_menu .depth01 > li > a:focus,
#header.on #gnb_menu .depth01 > li > a:hover,
#header.wh:not(.on) #gnb_menu .depth01 > .active > a {
  color: var(--brand-red);
}
#header #gnb_menu .depth01 {
  display: flex;
  position: relative;
}
#header #gnb_menu .depth02 {
  padding: 30px 0 50px 30px;
  display: none;
}
#header #gnb_menu .depth02 {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 200px 160px 200px 200px 200px 200px;
  place-content: start;
  display: flex;
  gap: 60px;
  opacity: 0;
}
#header #gnb_menu .depth02 > li {
  flex-grow: 0;
}
#header #gnb_menu .depth02 > li.last {
  flex-grow: 1;
}
#header #gnb_menu .depth02 > li.last a {
  position: absolute;
  right: -27%;
}
#gnb_menu .depth02 > li > a {
  word-break: keep-all;
  color: var(--gray-10);
  font-size: var(--f19-size);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  padding-bottom: 60px;
  white-space: nowrap;
}
#header #gnb_menu .depth03 {
  display: none !important;
}
#gnb_menu .depth03 > li > a {
  color: var(--gray-70);
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 8px 0 10px 0;
}
#gnb_menu .depth03 > li > a:active,
#gnb_menu .depth03 > li > a:focus,
#gnb_menu .depth03 > li > a:hover {
  color: var(--black);
}
.banner {
  display: block;
  box-sizing: border-box;
  width: 340px;
  height: 160px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.banner:last-child {
  margin-bottom: 0;
}
#gnb_menu .depth02:has(.depth03) > li > a {
  padding-bottom: 12px;
}
body.index #header .sitemap-wrap .sitemap-btn .bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100px;
  height: calc(100vh - 100px);
  background: var(--brand-Gradi);
  position: absolute;
  top: auto;
  right: 0;
}
body.index #header .sitemap-wrap .sitemap-btn .bar::before {
  color: var(--white);
  padding-top: 3rem;
  content: "Renewable Energy, Bright Future.";
  writing-mode: vertical-rl;
  font-family: Poppins;
  font-size: clamp(14px, 0.8333vw, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 1.6px;
}
body.index #header .sitemap-wrap .sitemap-btn .bar::after {
  content: "";
  width: 30px;
  height: 30px;
  background: url(/img/ico_star.svg) no-repeat center;
  background-size: contain;
  display: block;
  animation: rotation infinite 2s linear;
}
@keyframes rotation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
#header .sitemap-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--brand-Gradi);
  background-blend-mode: soft-light, normal;
}
#header .sitemap-wrap button {
  z-index: 10002;
  position: relative;
}
#header.sitemap .sitemap-btn i {
  background-color: var(--brand-red);
  background-image: url(/img/ico_sitemap-closed.svg) !important;
}
#header #sitemap_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 500;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: -1;
  display: none;
}
#header #sitemap_menu.on {
  width: fit-content;
  display: flex;
  height: 100%;
  z-index: 10001;
}
#header #sitemap_menu .inner {
  width: 100%;
  height: 100%;
  background: var(--brand-Gradi);
}
#header #sitemap_menu .inner:has(.privacy-list) {
  height: fit-content;
  padding-bottom: 80px;
}
#header #sitemap_menu .privacy-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  padding-left: calc(40px + 2rem);
}
#header #sitemap_menu .privacy-list a {
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--f17-size);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.34px;
}
#header
  #sitemap_menu
  .privacy-list
  a:focus
  #header
  #sitemap_menu
  .privacy-list
  a:active,
#header #sitemap_menu .privacy-list a:hover {
  color: var(--white);
}
#header #sitemap_menu .privacy-list a:first-child::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 1rem;
  background-color: rgba(255, 255, 255, 0.4);
}
#sitemap_menu .sitemap-list {
  color: #fff;
  padding-left: 40px;
  position: relative;
}
#sitemap_menu .sitemap-list .depth02 > li,
#sitemap_menu .sitemap-list > li {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: end;
}
#sitemap_menu .sitemap-list li a {
  display: flex;
  align-items: center;
  transition: 0.3s;
}
#sitemap_menu .sitemap-list .depth02 > li > a,
#sitemap_menu .sitemap-list .depth03 > li > a,
#sitemap_menu .sitemap-list > li > a {
  width: 100%;
  display: flex;
  padding: 16px 0;
  padding-left: 2rem;
  font-size: var(--sitemap-depth01);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: 0.3s;
}
#sitemap_menu .sitemap-list > li > a {
  width: 23.0208vw;
}
#sitemap_menu .sitemap-list .depth02 li:has(.depth03) a,
#sitemap_menu .sitemap-list > li:has(.depth02) > a {
  position: relative;
}
#sitemap_menu
  .sitemap-list
  .depth02
  li:has(.depth03)
  .depth03
  > li
  > a::before {
  display: none;
}
#sitemap_menu .sitemap-list .depth02 li:has(.depth03) a::before,
#sitemap_menu .sitemap-list > li:has(.depth02) > a::before {
  content: "더보기";
  text-indent: -999em;
  display: block;
  width: 30px;
  height: 30px;
  background: url(/img/ico_sitemap_arrow.svg) no-repeat center;
  background-size: contain;
  opacity: 0;
  position: absolute;
  left: -3px;
  transition: 0.3s;
}
body:not(.mob) #sitemap_menu .depth02 > li > a,
body:not(.mob) #sitemap_menu > li > a {
  mix-blend-mode: plus-lighter;
}
body:not(.mob) #sitemap_menu:hover li a {
  opacity: 0.5;
}
body:not(.mob) #sitemap_menu .sitemap-list .depth02 li.on a,
body:not(.mob) #sitemap_menu .sitemap-list li a:hover,
body:not(.mob) #sitemap_menu .sitemap-list > li.on > a {
  opacity: 1;
}
body:not(.mob) #sitemap_menu .sitemap-list .depth02 li.on a::before,
body:not(.mob)
  #sitemap_menu
  .sitemap-list
  .depth02
  li:has(.depth03)
  a:hover::before,
body:not(.mob) #sitemap_menu .sitemap-list li.on a::before,
body:not(.mob) #sitemap_menu .sitemap-list > li.on:has(.depth02) > a::before,
body:not(.mob)
  #sitemap_menu
  .sitemap-list
  > li:has(.depth02)
  > a:hover::before {
  opacity: 1;
}
body:not(.mob) #sitemap_menu .sitemap-list > li:has(.depth02) > a::before {
  opacity: 0;
}
#sitemap_menu .sitemap-list li:first-child > a {
  margin-top: 170px;
}
#sitemap_menu .sitemap-list .depth02 {
  padding-left: 40px;
  width: 23.0208vw;
  height: 100vh;
  background: var(--brand-Gradi);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: start;
  position: absolute;
  left: -23.0208vw;
  top: 0;
  display: none;
}
#sitemap_menu .sitemap-list .depth02 .on a + .depth03,
#sitemap_menu .sitemap-list .on .depth02 {
  display: flex;
}
#sitemap_menu .sitemap-list .depth03 {
  height: 100vh;
  padding-left: 20px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.95) 0,
    rgba(255, 255, 255, 0.99) 100%
  );
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  display: none;
}
body:not(.mob) #sitemap_menu .sitemap-list .depth03 {
  box-shadow: var(--sitemapStyle);
}
#sitemap_menu .sitemap-list .depth03 > li > a {
  color: var(--gray-80);
  font-size: var(--sitemap-depth01);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#sitemap_menu .sitemap-list .depth03 > li > a:hover {
  color: var(--brand-red);
}
#footer {
  position: relative;
  background-color: var(--util-footer);
  padding: 70px 120px;
  font-size: var(--f18-size);
  color: var(--white);
}
#footer .inner {
  width: 100%;
}
.flex-box {
  display: flex;
}
#footer .flex-box {
  justify-content: space-between;
  align-items: center;
}
#footer .footer-logo {
  display: block;
  margin-right: 1rem;
}
#footer .footer-menu {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#footer .footer-menu a {
  transition: 0.3s;
}
.footer-menu:not(.sns):hover a:not(.footer-logo) {
  opacity: 0.5;
}
.footer-menu:not(.sns) a:not(.footer-logo):hover {
  opacity: 1;
}
#footer .footer-menu.sns {
  gap: 10px;
}
#footer .footer-menu.sns > li > a {
  display: block;
  border-radius: 999px;
}
#footer .footer-menu.sns > li > a:active,
#footer .footer-menu.sns > li > a:focus,
#footer .footer-menu.sns > li > a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  background-color: #353e49;
}
#footer .address {
  margin: 3rem 0 1.5rem 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#footer .address > div {
  display: flex;
  gap: 10px;
}
#footer .address span {
  opacity: 0.7;
}
#footer .address a,
#footer .address p {
  opacity: 1;
}
#footer .copy {
  color: var(--util-placeholder);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.img-sect img {
  width: 100%;
}
.small-tab {
  width: fit-content;
  display: block;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  padding: 15px 25px;
  text-align: center;
  font-size: var(--f18-size);
  font-weight: 500;
  line-height: 100%;
}
.sub .bg-sect {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 690px;
}
.sub .bg-sect::before {
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background-color: #fff;
  z-index: 1;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
.sub .bg-sect::after {
  top: 0;
  right: 0;
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background-color: #fff;
  z-index: 1;
  transform: translateX(100%);
}
@keyframes visual-bg {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes visual-bg {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes visual-bg-2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.on.bg-sect::after {
  animation: visual-bg 1.5s 0.5s;
}
.on.bg-sect::before {
  animation: visual-bg-2 1.5s 0.5s;
}
.sub .bg-sect img {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 0.3s 0.5s;
}
.on.bg-sect img {
  opacity: 1;
}
@-webkit-keyframes ani_fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.quotes:has(.splite) {
  width: fit-content;
  max-width: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.col:has(.splite) {
  justify-content: start;
}
.quotes .col,
.sub.install-status .col,
.sub.solar-rental .col {
  justify-content: center;
}
.brand-burgundy.splite,
.esg.splite,
.highlight.splite {
  width: fit-content;
  font-weight: 600;
  padding: 0 0.2em;
}
.splite {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
}
.splite span {
  display: inline-block;
  white-space: pre;
}
.splite .word .char {
  position: relative;
  animation: slide-up 0.5s cubic-bezier(0.75, 0, 0.25, 1) both;
  animation-delay: calc(1s + (0.5s * var(--word-index)));
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
[data-word="과정"],
[data-word="전"] {
  overflow: visible;
}
[data-word="과정"] .char,
[data-word="전"] .char {
  animation: none;
  visibility: hidden;
}
[data-word="과정"] .char::after,
[data-word="과정"] .char::before,
[data-word="전"] .char:after,
[data-word="전"] .char:before {
  visibility: visible;
  overflow: hidden;
  height: 100%;
  animation: fade-in 1.5s cubic-bezier(0.75, 0, 0.25, 1) both alternate;
  animation-delay: calc(3s + -0.2s * (var(--char-total) - var(--char-index)));
}
.sub.greeting .visual .splite {
  padding: 0 1rem;
  justify-content: center;
  color: var(--white);
  text-align: center;
  filter: drop-shadow (0 0 50px rgba(0, 0, 0, 0.25));
  font-size: 80px;
  font-size: clamp(var(--f36-size), 4.1667vw, 80px);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.6px;
}
.sub.greeting .flex-box > header {
  margin-left: 0;
  margin-right: 0;
}
.sub.greeting .text-sect {
  width: 34.5833vw;
  max-width: 664px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 100px;
}
.sub .text-sect {
  flex-direction: column;
  display: block;
}
.sub .text-sect > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sub.greeting .sect-cont.flex-box {
  align-items: center;
  margin-top: 0;
}
.sub.greeting .text-sect .flex-box {
  gap: 15px;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}
.sub .text-sect > div:first-of-type {
  gap: 5px;
}
.sub.greeting .txt-18 {
  color: var(--gray-40);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.27px;
}
.sub.greeting .flex-box .txt-20 {
  color: var(--gray-20);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.3px;
}
#ceo_name {
  width: 14vw;
  max-width: 113px;
}
#ceo_name .ceo-name {
  fill: var(--gray-10);
}
.sub header:has(.quotes) {
  align-items: start;
  justify-content: center;
  gap: 30px;
  position: relative;
}
.sub .sect-tit:has(.quotes)::before {
  display: none;
}
.quotes {
  width: fit-content;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  position: relative;
}
.quotes::after,
.quotes::before {
  content: "";
  display: block;
  width: 42px;
  height: 30px;
  background: url(/img/ico_quotes.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: calc(100% - 20px);
  right: 100%;
}
.quotes::after {
  transform: rotate(180deg);
  right: auto;
  left: calc(100% - 20px);
  left: 100%;
}
.sub header:has(.splite) {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
.sub .quotes:has(.col) {
  display: flex;
  flex-direction: column;
}
.ani {
  visibility: hidden;
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
}
.delay-1s {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.delay-2s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.delay-3s {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.delay-4s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.delay-5s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.delay-6s {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.delay-7s {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.delay-8s {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.delay-9s {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.delay-10s {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.delay-12s {
  -webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.delay-15s {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.fadeInUp {
  visibility: visible;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}
.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}
.m-fade {
  transition: opacity 1.4s;
  opacity: 0;
}
.motion-wrap.m-act .m-in,
.motion.m-act {
  opacity: 1;
}
.fade1 {
  transition-delay: 0.3s;
}
.fade2 {
  transition-delay: 0.5s;
}
.fade3 {
  transition-delay: 0.7s;
}
.fade4 {
  transition-delay: 0.3s;
}
.fade5 {
  transition-delay: 0.5s;
}
.fade6 {
  transition-delay: 0.7s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.scroll-btn {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: end;
  padding-bottom: 0.8rem;
  position: relative;
  text-indent: -999em;
  margin: 0 auto;
  margin-top: 50px;
}
.scroll-btn i {
  position: relative;
  width: 24px;
  height: 36px;
  border: 1px solid var(--black);
  border-radius: 50px;
  box-sizing: border-box;
}
.scroll-btn i::before {
  position: absolute;
  top: 32%;
  left: calc(50% - 0.8px);
  content: "";
  width: 1.6px;
  height: 7px;
  background-color: var(--util-ESG);
  -webkit-animation: sdb10 1.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: sdb10 1.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 10px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 10px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.scroll-btn span {
  position: absolute;
  bottom: 0;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-left: 1.2px solid var(--gray-70);
  border-bottom: 1.2px solid var(--gray-70);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb07 2s infinite;
  animation: sdb07 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
.scroll-btn span:nth-of-type(1) {
  bottom: 0;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.scroll-btn span:nth-of-type(2) {
  bottom: -10px;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.scroll-btn span:nth-of-type(3) {
  bottom: -20px;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
@-webkit-keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#main_visual .img-sect,
#main_visual .video-bg {
  width: 100vw;
  height: 100vh;
  z-index: -2;
}
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
}
.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main_visual .video-bg {
  position: relative;
}
#main_visual .video-bg::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(
      111.65% 167.73% at 47.89% 27.41%,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.2) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
#main_visual .text-sect {
  padding-left: 6.7708vw;
  width: 100%;
  position: absolute;
  bottom: 440px;
  left: 0;
}
#main_visual .img-sect img,
#main_visual .video-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#main_visual .ytb-bg {
  position: absolute;
  width: 120vw;
  height: 120vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#main_visual .ytb-bg iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  object-fit: cover;
  position: relative;
}
#main_visual .ytb-bg::before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  mix-blend-mode: multiply;
  transition: 0.3s;
}
#main_visual .text-sect {
  width: fit-content;
  color: var(--white);
}
#main_visual .headline {
  font-size: var(--index-headline);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 15px;
}
#main_visual .visual-title {
  font-size: var(--index-visual-tit);
  font-style: normal;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: -1.28px;
}
#main_visual .pagination {
  position: absolute;
  bottom: 340px;
  left: 0;
  padding-left: 6.7708vw;
  color: #fff;
  font-size: var(--index-pagination);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  gap: 10px;
}
#main_visual .pagination .flex-box {
  gap: 10px;
  align-items: center;
  justify-content: center;
}
#sns .splide__arrow,
.index .pagination,
.pagination {
  display: flex;
  z-index: 99;
  justify-content: center;
  align-items: center;
}
.index .pagination .swiper-button-next,
.index .pagination .swiper-button-prev {
  margin: 0;
  position: static;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(/img/ico_swiper-next1.svg) no-repeat center;
  background-size: contain;
  transition: 0.3s;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  background: url(/img/ico_swiper-next1.svg) no-repeat center
    rgba(0, 0, 0, 0.13);
}
.pagination .swiper-button-next {
  transform: rotate(180deg);
}
.pagination .swiper-button-next::after,
.pagination .swiper-button-prev::after {
  display: none;
}
.pagination.next2 {
  gap: 3px;
}
.pagination.next2 .swiper-button-next,
.pagination.next2 .swiper-button-prev {
  width: 52px;
  height: 52px;
  background-image: url(/img/ico_swiper-next2.svg);
  background-color: transparent;
}
.pagination.next3 {
  gap: 20px;
}
#sns .splide__arrow,
.pagination.next3 .swiper-button-next,
.pagination.next3 .swiper-button-prev {
  width: 50px;
  height: 50px;
  background-image: url(/img/ico_swiper-next3.svg);
  border-radius: 999px;
  border: 1px solid var(--util-stroke-color);
  background-color: #fff;
}
.swiper-pagination-fraction {
  width: fit-content;
  position: static;
  display: inline-block;
}
#main_visual .slide-btn {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
}
#main_visual .slide-btn.pause {
  background-image: url(/img/ico_pause.svg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}
#main_visual .slide-btn.play {
  background-image: url(/img/ico_play.svg);
}
#main_visual .swiper-scrollbar {
  margin: 0 20px;
  width: 300px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
}
#main_visual .hover-box-list {
  width: calc(100% - 230px);
  display: flex;
  position: absolute;
  bottom: 0;
  right: 100px;
  counter-reset: counter;
}
#main_visual .hover-box-list > li {
  flex: 1;
  color: var(--white);
  height: 11.4583vw;
  min-height: 160px;
  max-height: 220px;
  border-right: 2px solid rgba(102, 102, 102, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  counter-increment: counter;
  cursor: pointer;
}
#main_visual .hover-box-list .cont {
  padding: 30px 0 30px 30px;
  width: 100%;
  height: 100%;
}
#main_visual .hover-box-list.link > li {
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#main_visual .hover-box-list.link li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#main_visual .hover-box-list > li,
#main_visual .hover-box-list > li > * {
  transition: all 0.6s cubic-bezier(0.27, 0.21, 0.29, 1.25);
  transition: all 0.4s ease-in-out;
}
#main_visual .hover-box-list:not(.cctv) > li:hover {
  background-color: #fff;
  color: var(--gray-40);
}
#main_visual .hover-box-list.link > li:hover {
  color: var(--white);
  background: var(--brand-Gradi);
  background-blend-mode: soft-light, normal;
  backdrop-filter: blur(10px);
}
#main_visual .hover-box-list.link > li:hover a::after {
  content: "바로가기";
  text-indent: -9999em;
  display: block;
  width: 40px;
  height: 30px;
  background: url(/img/ico_index_link.svg) no-repeat left;
  background-size: contain;
  margin-top: auto;
}
#main_visual .hover-box-list > li .cont::before {
  content: counter(counter, decimal-leading-zero);
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(14px, 0.8333vw, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  display: block;
  margin-bottom: 10px;
}
#main_visual .hover-box-list.cctv > li .cont {
  position: relative;
}
#main_visual .hover-box-list.cctv > li .cont::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      373.34% 107.77% at 46.45% 55.23%,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.3) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0) -20.37%, rgba(0, 0, 0, 0.5) 84.81%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.7) 100%),
    #d3d3d3 50% / cover no-repeat;
  mix-blend-mode: multiply;
  transition: 0.3s;
}
#main_visual .hover-box-list.cctv > li .cont:hover::before {
  opacity: 0;
}
#main_visual .hover-box-list > li:hover .cont::before {
  content: attr(data-box);
  color: var(--brand-red);
}
#main_visual .hover-box-list.link > li:hover .cont::before {
  color: rgba(255, 255, 255, 0.6);
}
#main_visual .hover-box-list .tit {
  font-size: var(--f24-size);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#main_visual .hover-box-list:not(.cctv) > li:hover .tit {
  display: none;
}
#main_visual .hover-box-list .txt {
  color: var(--gray-40);
  font-size: var(--f22-size);
  font-style: normal;
  font-weight: 600;
  line-height: 143.478%;
  letter-spacing: -0.23px;
  margin-top: 10px;
  display: none;
}
#main_visual .hover-box-list.link .txt {
  color: var(--white);
  font-weight: 500;
  font-size: var(--f24-size);
  line-height: 128%;
  letter-spacing: -0.5px;
  margin-top: 0;
}
#main_visual .hover-box-list .txt.xs {
  font-size: var(--f21-size);
  line-height: 138.095%;
}
#main_visual .hover-box-list > li:hover .txt {
  display: block;
  transition: all 0.4s ease-in-out;
}
#main_visual .hover-box-list.link > li:hover::before {
  color: rgba(255, 255, 255, 0.6);
}
#main_visual .swiper .hover-box-list.cctv .cont {
  padding: 25px 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  position: relative;
  background: url(/img/cctv-01.png) no-repeat center;
  background-size: cover;
}
#main_visual .swiper .hover-box-list.cctv li:nth-child(2) .cont {
  background-image: url(/img/cctv-02.png);
}
#main_visual .swiper .hover-box-list.cctv li:nth-child(3) .cont {
  background-image: url(/img/cctv-03.png);
}
#main_visual .swiper .hover-box-list.cctv li:nth-child(4) .cont {
  background-image: url(/img/cctv-04.png);
}
#main_visual .hover-box-list.cctv .cont::after {
  border: none;
  width: 60px;
  height: 60px;
  background: url(/img/ico_play.svg) no-repeat center,
    radial-gradient(
      322.4% 56.17% at 52.54% 50%,
      rgba(58, 58, 58, 0.85) 0,
      rgba(58, 58, 58, 0.81) 100%
    );
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
#main_visual .hover-box-list.cctv .cont:hover::after {
  border: none;
  width: 60px;
  height: 60px;
  background: url(/img/ico_play.svg) no-repeat center, var(--brand-Gradi);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
#main_visual .hover-box-list.cctv .tit {
  color: var(--white);
  z-index: 2;
}
#main_visual .small-tab {
  width: 260px;
  margin-top: 30px;
}
.sky {
  color: var(--brand-sky);
}
.index .section {
  padding-top: 160px;
  padding-bottom: 160px;
}
.index .section .text-sect {
  padding-bottom: 80px;
}
#client .text-sect {
  text-align: center;
}
.index .keyword {
  color: var(--gray-90);
  font-size: var(--index-main-keyword);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 25px;
}
.index .main-title {
  color: #000;
  font-size: var(--index-main-tit);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.index .sub-title {
  font-size: var(--index-main-subtit);
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
  letter-spacing: -0.76px;
}
.index .main-txt {
  color: var(--gray-60);
  font-size: var(--index-main-txt);
  font-style: normal;
  font-weight: 500;
  line-height: 137.5%;
  margin-top: 20px;
}
#client .inner {
  width: 100%;
}
.flow-sect {
  width: 100%;
  overflow: hidden;
}
.flow-sect div {
  width: max-content;
  margin: 0 auto;
  display: flex;
}
#client .flow-sect div {
  gap: 0;
}
#client .flow-sect img {
  margin: 0 25px;
  display: block;
}
.flow-sect div > img {
  max-width: 200px;
  max-height: 100px;
}
.flow-sect > :not(:last-child) {
  margin-bottom: 20px;
}
.flow-sect:not(.noani) > :nth-child(odd) > * {
  animation: to-left 30s infinite linear;
}
.flow-sect:not(.noani) > :nth-child(even) > * {
  animation: to-right 30s infinite linear;
}
@keyframes to-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
#awards .awards-card {
  display: block;
  border-radius: 10px;
  background-color: var(--brand-LightBlue-80);
  width: 480px;
  min-height: 230px;
  padding: 30px 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  margin: 0;
  margin-right: 50px;
  text-align: left;
  transition: 0.3s;
}
#awards .awards-card:hover {
  background-color: var(--brand-navy);
}
#awards .awards-card .tit {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}
#awards .awards-card .card-title {
  word-break: keep-all;
  color: var(--black);
  font-size: var(--f24-size);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
#awards .awards-card:hover .card-title {
  color: #fff;
}
#awards .awards-card .logo {
  width: auto;
  height: 32px;
}
#awards .awards-card:hover .logo {
  -webkit-filter: grayscale(1) invert(1) brightness(300%);
  filter: grayscale(1) invert(1) brightness(300%);
}
#awards .awards-card .cate {
  color: var(--gray-70);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
#awards .awards-card:hover .cate {
  color: var(--white);
}
.counter-sect {
  display: flex;
  flex-wrap: wrap;
}
.count {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.count-1 {
  width: 17.1875vw;
}
.count-2 {
  width: 15.8333vw;
}
.count .title {
  width: fit-content;
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.2px;
}
.count .num {
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.4px;
  display: flex;
  gap: 5px;
  align-items: end;
  line-height: 280%;
}
.count .counter {
  font-family: Archivo;
  font-size: var(--index-visual-tit);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -2.56px;
}
#cases {
  position: relative;
  padding-top: 80px;
}
#cases::before {
  content: "";
  display: block;
  width: 100vw;
  height: 57.5%;
  background-color: var(--brand-LightBlue-80);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#cases .inner {
  width: 95.0521vw;
  padding: 120px 0 120px 140px;
  border-radius: 30px 0 0 30px;
  margin-left: auto;
  margin-right: 0;
  background: linear-gradient(
      0deg,
      rgba(25, 39, 65, 0.7) 0,
      rgba(25, 39, 65, 0.7) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.6) 100%),
    url(/img/cases-bg.webp) no-repeat;
  background-size: cover;
  background-position: center right 0;
  color: var(--white);
}
#news {
  padding-top: 120px;
  padding-bottom: 120px;
  background: radial-gradient(
    988.86% 195.72% at 15.6% 8.35%,
    #f4f7fd 0,
    #fcfdff 100%
  );
}
#news .swiper-slide {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}
#news .swiper-slide .img-sect {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ecf0f8;
}
#news .swiper-slide .img-sect img {
  transition: 0.3s;
}
#news .swiper-slide:hover .img-sect img {
  transform: scale(1.1);
}
#news .swiper-slide.swiper-slide-active .img-sect {
  border-radius: 10px;
  box-shadow: var(--dropmenuStyle);
}
#news .swiper-slide.swiper-slide-active .img-sect img {
  height: 100%;
  object-fit: cover;
}
#news .swiper-slide .logo {
  width: fit-content;
  height: 20px;
  display: none;
}
#news .swiper-slide.swiper-slide-active .logo {
  display: block;
}
.news-slide .text-sect {
  padding-top: 10px;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-slide .title {
  word-break: keep-all;
  color: var(--gray-20);
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  min-height: 4rem;
}
#news .swiper-container {
  position: relative;
  width: 100%;
  height: 560px;
}
.swiper-container > .swiper-slide__content {
  position: absolute;
  top: 0;
}
#news .swiper-slide {
  transition: all 0.2s linear;
  transform: scale(0.8);
}
#news .swiper-slide.swiper-slide-active {
  transform: scale(1);
}
#main_visual .pagination * {
  color: var(--white);
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  font-size: var(--f24-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.pagination * {
  font-family: Archivo;
}
#news .pagination.next2 {
  margin: 0 auto;
  width: 660px;
  justify-content: end;
  color: var(--gray-20);
  font-size: clamp(25px, 2.1354vw, 41px);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -1.23px;
}
.swiper-pagination-current {
  font-weight: 700;
}
body.index main .swiper-pagination-total {
  color: var(--util-placeholder);
  font-size: 25px;
  font-size: clamp(20px, 1.3021vw, 25px);
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.75px;
}
#news .pagination.next3 {
  position: absolute;
  top: calc(50% - 25px - 40px);
  right: 0;
}
#sns .text-sect {
  text-align: center;
  padding-bottom: 40px;
}
#sns .sns-filter {
  width: fit-content;
  display: flex;
  color: var(--gray-40);
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 500;
  line-height: 136.364%;
  padding: 0 28px 0 14px;
  border-radius: 99px;
  border: 1px solid var(--util-stroke-color);
  background: var(--white);
}
#sns .sns-filter button {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 0;
  opacity: 0.6;
}
#sns .sns-filter .on button,
#sns .sns-filter button:hover {
  opacity: 1;
}
#sns .sns-filter .on button {
  color: var(--gray-10);
}
#sns .sns-filter button::after {
  content: "/";
  display: inline-block;
  color: var(--util-stroke-color);
  padding: 0 8px;
}
#sns .sns-filter li:last-child button::after {
  display: none;
}
#sns .sns-filter button::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  background: url(/img/ico_sns_filter1_off.svg) no-repeat center;
  background-size: contain;
}
#sns .sns-filter button.ytb::before {
  background-image: url(/img/ico_sns_filter2_off.svg);
}
#sns .sns-filter button.blog::before {
  background-image: url(/img/ico_sns_filter3_off.svg);
}
#sns .sns-filter button.insta::before {
  background-image: url(/img/ico_sns_filter4_off.svg);
}
#sns .sns-filter button.kakao::before {
  background-image: url(/img/ico_sns_filter5_off.svg);
}
#sns .sns-filter .on button.all::before,
#sns .sns-filter button.all.on::before {
  background-image: url(/img/ico_sns_filter1.svg);
}
#sns .sns-filter .on button.ytb::before,
#sns .sns-filter button.ytb.on:before {
  background-image: url(/img/ico_sns_filter2.svg);
}
#sns .sns-filter .on button.blog::before,
#sns .sns-filter button.blog.on::before {
  background-image: url(/img/ico_sns_filter3.svg);
}
#sns .sns-filter .on button.insta::before,
#sns .sns-filter button.insta.on::before {
  background-image: url(/img/ico_sns_filter4.svg);
}
#sns .sns-filter .on button.kakao::before,
#sns .sns-filter button.kakao.on::before {
  background-image: url(/img/ico_sns_filter5.svg);
}
#sns .splide__arrow {
  position: absolute;
  top: calc(50% - 25px);
  top: 35%;
  transform: translateY(0);
  backdrop-filter: blur(5px);
}
#sns .splide__arrow--next {
  transform: rotate(180deg);
  right: 4em;
  transition: 0.3s;
}
#sns .splide__arrow--prev {
  left: 4em;
  transition: 0.3s;
}
#sns .splide__arrow svg {
  display: none;
}
#sns .splide__pagination {
  display: none;
}
#sns .splide__track {
  margin-top: 80px;
}
#sns .splide__slide .img-sect {
  overflow: hidden;
  border-radius: 15px;
}
#sns .splide__slide img {
  transition: 0.3s;
}
#sns .splide__slide a:active img,
#sns .splide__slide a:focus img,
#sns .splide__slide a:hover img {
  transform: scale(1.1);
}
#sns .splide__slide .title {
  margin-top: 1rem;
  color: var(--gray-10);
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 500;
  line-height: 136.364%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#sns .splide__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: brightness(0.7);
}
#sns .splide__slide {
  position: relative;
}
#sns .splide__slide::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: url(/img/ico_sns_filter1.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  filter: invert(100%) sepia(100%) saturate(0) hue-rotate(99deg)
    brightness(400%) contrast(102%);
}
#sns .splide__slide.ytb::before {
  background-image: url(/img/ico_sns_filter2.svg);
}
#sns .splide__slide.blog::before {
  background-image: url(/img/ico_sns_filter3.svg);
}
#sns .splide__slide.insta::before {
  background-image: url(/img/ico_sns_filter4.svg);
}
#sns .splide__slide.kakao::before {
  background-image: url(/img/ico_sns_filter5.svg);
}
.sub .visual {
  background: url(/img/pr-support/visual.webp) no-repeat center;
  background-size: cover;
}
.sub .visual.white,
.sub.pr-support .visual,
.sub.terms .visual {
  background-image: none !important;
  background-color: #fff;
}
.sub.solar-asset .visual {
  background-image: url(/img/solar-asset/visual.webp);
}
.sub.portfolio .visual {
  background-image: url(/img/portfolio/visual.webp);
}
.sub.company .visual {
  background-image: url(/img/company/visual.webp);
}
.sub.industrial-support .visual {
  background-image: url(/img/industrial-support/visual.webp);
}
.dot-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 35px;
}
.dot-text:last-of-type {
  margin-bottom: 0;
}
.dot-tit {
  position: relative;
  padding-left: 1.1rem;
  color: var(--util-footer);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.dot-tit::before {
  content: "";
  display: block;
  width: 12px;
  height: 100%;
  background: url(/img/ico_dot-tit.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
}
.dot-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dot-list .highlight {
  text-decoration: underline 1px solid var(--util-강조);
  color: var(--util-강조);
}
.dot-list > p {
  text-align: left;
  position: relative;
  padding-left: 0.8rem;
  color: var(--gray-20);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.27px;
}
.dot-list > p strong {
  font-weight: 500;
}
.dot-list > p::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999em;
  background-color: var(--brand-LightGray-40);
  position: absolute;
  top: 12px;
  left: 0;
}
.table-wrap .dot-list > p {
  color: inherit;
}
.num-list {
  display: block;
  list-style: none;
  counter-reset: counter;
}
.dash-list > *,
.num-list > li {
  counter-increment: counter;
  position: relative;
  padding-left: 1em;
}
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-list > * {
  line-height: 1.4rem;
}
.dash-list > ::before,
.num-list li::before,
.num-list span::before {
  position: absolute;
  left: 0;
  top: 5px;
  content: counter(counter) ".";
  text-align: left;
  width: 1.3em;
  height: 1em;
  line-height: 1em;
  display: inline-block;
}
.dash-list > ::before {
  content: "-";
}
.step-list-box {
  border-radius: 16px;
  border: 3px solid rgba(236, 241, 246, 0.8);
  background: #fff;
  padding: 2rem 1rem;
}
.step-list-box.line {
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  border-radius: 999rem;
  background-color: #f8fbff;
  border: 1px solid #c8e0f0;
  align-items: center;
}
.step-list-box.line .step-list {
  width: 100%;
  justify-content: space-between;
}
.step-list-box.line li::after {
  width: 80px;
  background-image: url(/img/ico_plus.svg);
}
.step-list-box.line .step {
  border: 1px solid #d1e1f6;
  background: linear-gradient(
    127deg,
    rgba(255, 255, 255, 0.6) 12.73%,
    #fff 95.24%
  );
}
.step-list-box:has(.step-list) {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.esg .step-list-box:has(.step-list) {
  width: fit-content;
}
.step-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.step-list .step {
  width: 25vw;
  height: 25vw;
  max-width: 160px;
  max-height: 160px;
  background-color: var(--brand-LightGray-60);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 9999em;
  text-align: center;
}
.sub.industrial-solar.esg .step-list .step {
  max-width: 220px;
  max-height: 220px;
}
.sub.industrial-solar.esg .step-list .step .tit {
  font-weight: 400;
}
.sub.industrial-solar.power-business .step-list-box,
.sub.industrial-solar.power-business .step-list-box .step-list {
  padding: 0;
  border: none;
  align-items: baseline;
}
.sub.industrial-solar.power-business .step-list li {
  align-items: normal;
  flex: 1 1 0;
  flex-grow: initial;
}
.sub.industrial-solar.power-business .step-list .step {
  max-width: 200px;
  max-height: 200px;
  margin-bottom: 10px;
}
.sub.industrial-solar.power-business .step-list li::after {
  width: 48px;
  height: 200px;
}
.sub.industrial-solar.power-business .step-list .dot-list > p {
  color: var(--gray-50);
}
.sub.industrial-solar.power-business .step-list .dot-list > p strong {
  color: var(--gray-20);
}
.sub.support .step-list-box .step-list:last-child li:nth-child(1)::after {
  display: none;
}
.sub.support .step-list-box .step-list:last-of-type {
  flex-direction: row-reverse;
}
.sub.support .step-list-box .step-list:last-of-type li:after {
  transform: rotate(180deg);
}
.sub.support .step-list-box .step-list:last-of-type li:last-child:after {
  display: block;
}
.sub.support .step-list-box .step-list:first-of-type li:last-child {
  position: relative;
}
.sub.support .step-list-box .step-list:first-of-type li:last-child:after {
  content: "123";
  width: 25vw;
  height: 34px;
  max-width: 150px;
  background: url(/img/ico_next2.svg) no-repeat center;
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
}
.support .step {
  max-width: 150px;
  max-height: 150px;
}
.support .step-list li::after {
  width: 40px;
  height: 40px;
}
.step.blue {
  background-color: rgba(227, 239, 255, 0.8);
}
.step.navy {
  background-color: var(--dot-navy);
}
.step.navy .tit,
.step.navy .txt {
  color: var(--white);
}
.step .tit {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.27px;
}
.step .txt {
  color: var(--gray-60);
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.225px;
}
.step-list li {
  display: flex;
  align-items: center;
}
.step-list li::after {
  content: "next";
  text-indent: -999em;
  display: block;
  width: 60px;
  height: 60px;
  background: url(/img/ico_next.svg) no-repeat center;
  background-size: auto;
}
.step-list li:last-child::after,
.step-list li:nth-child(6)::after {
  display: none;
}
.sub.greeting .visual {
  background: url(/img/company/greeting-visual.webp) no-repeat center;
  height: calc(100vh + 400px);
  background-size: cover;
}
.sub.greeting .visual .title-sect {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  justify-content: center;
}
.sub.greeting .visual .txt-24 {
  color: var(--white);
  text-align: center;
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.cover {
  position: fixed;
  top: 0;
  width: 100%;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 9999;
}
.cover.act,
.cover.act .inner {
  position: static;
  height: fit-content;
}
.cover .inner {
  position: relative;
  height: 100%;
}
.cover .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  -webkit-animation: rotate-move 4s ease-in-out forwards;
  animation: rotate-move 4s ease-in-out forwards;
  filter: url(#goo);
}
.act:not(.cover) .container {
  margin: 0 auto;
}
.dot-navy {
  background-color: var(--dot-navy);
  fill: var(--dot-navy);
  color: var(--white);
}
.dot-red {
  background-color: var(--dot-red);
  fill: var(--dot-red);
  color: var(--white);
}
.dot-white {
  background-color: var(--dot-white);
  fill: var(--dot-white);
  color: var(--gray-20);
}
.dot-cont {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.dot-cont .txt-24 {
  width: 520px;
}
.act .dot-cont {
  margin-top: -50px;
}
.act .dot-cont:first-of-type {
  margin-top: 0;
}
.dot-cont .txt-24 {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.dot-cont .txt-24 {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.dot-cont .txt-sect > .txt-16 {
  color: var(--gray-60);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.dot-cont .txt-sect {
  opacity: 0;
}
.act .dot-cont .txt-sect {
  opacity: 1;
  flex: 1;
  width: fit-content;
}
.act.cover .dot {
  margin: 0;
}
.cover .dot {
  width: 80px;
  height: 80px;
  border-radius: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.sub.philosophy .dot .txt-30 {
  color: inherit;
  text-align: center;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  opacity: 0;
}
.cover:not(.act) .dot-3 {
  -webkit-animation: dot-3-move 3s ease forwards;
  animation: dot-3-move 3s ease forwards;
}
.cover:not(.act) .dot-2 {
  -webkit-animation: dot-2-move 3s ease forwards;
  animation: dot-2-move 3s ease forwards;
}
.cover:not(.act) .dot-1 {
  -webkit-animation: dot-1-move 3s ease forwards;
  animation: dot-1-move 3s ease forwards;
}
.cover.act .container {
  width: auto;
  height: auto;
  left: 0;
  transition: transform 1s, top 1s, left 1s;
  transition: none;
  animation: none;
  transform: none;
  position: static;
  filter: none;
}
.cover.act .dot {
  max-width: 300px;
  max-height: 300px;
  width: 25vw;
  height: 25vw;
  transition: width 1s, height 1s;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7.5px);
}
.cover.act .dot .txt-30 {
  opacity: 1;
}
@keyframes dot-3-move {
  5% {
    transform: scale(1);
  }
  30% {
    transform: translateY(-18px) scale(0.45);
  }
  60% {
    transform: translateY(-40px) scale(0.45);
  }
  80% {
    transform: translateY(-40px) scale(0.45);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes dot-2-move {
  5% {
    transform: scale(1);
  }
  30% {
    transform: translate(-16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes dot-1-move {
  5% {
    transform: scale(1);
  }
  30% {
    transform: translate(16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes rotate-move {
  30% {
    transform: translate(-50%, -50%) rotate(0);
  }
  60% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.cont-wrap .circle-box {
  position: fixed;
}
.cont-wrap .circle {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-image: url(/html/assets/img/sub/what_is_art_dec.png);
  background-size: cover;
  transition-delay: 3.8s;
  box-shadow: 25px 25px 30px -15px #4659e94d;
}
.title-sect.inner {
  padding: 190px 0 144px;
}
.sub .navi-sect {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}
.sub .page-navi {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub .page-navi.inner {
  width: fit-content;
  margin-top: -95px;
  margin-bottom: calc(95px - 56px);
}
.sub .active .page-navi.inner {
  margin-top: 0;
}
.sub .visual.white + .navi-sect .page-navi,
.sub.pr-support .page-navi.inner {
  border: 1px solid #e3e3e3;
  padding: 0;
}
.sub .page-navi > li {
  position: relative;
  height: max-content;
  min-height: fit-content;
  vertical-align: middle;
}
.sub .page-navi .nav-list > li > a,
.sub .page-navi > li > a {
  display: flex;
  align-items: center;
  min-height: inherit;
  height: 100%;
  font-size: var(--sub-dropmenu-size);
  color: var(--gray-10);
  font-weight: 500;
}
.sub-page-navi-sect {
  padding: 11px 0;
  border-bottom: 1px solid rgba(218, 220, 224, 0.5);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0,
    rgba(255, 255, 255, 0.7) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0,
    rgba(255, 255, 255, 0.82) 100%
  );
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
}
.sub-page-navi-sect .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 0;
}
.sub-page-navi-sect .btn-sect {
  display: flex;
  gap: 10px;
}
.sub-page-navi {
  display: flex;
}
.sub-page-navi li a {
  display: flex;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  color: var(--util-placeholder);
  text-align: center;
  font-size: var(--f18-size);
  font-weight: 500;
  line-height: 100%;
}
.sub-page-navi .on a {
  color: var(--util-history);
  font-weight: 600;
}
.sub .active .page-navi .home {
  display: none;
}
.sub .active .page-navi.inner {
  transition: 0.3s ease;
}
.sub .active .page-navi.inner,
.sub .visual.white + .navi-sect.active .page-navi.inner {
  transition-delay: 0.3s;
  z-index: 1;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(218, 220, 224, 0.5);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0,
    rgba(255, 255, 255, 0.85) 100%
  );
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(7.5px);
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 0;
}
.sub .navi-sect:has(> .sub-page-navi-sect) .page-navi.inner {
  box-shadow: none;
}
.sub .active .page-navi .nav-list {
  margin-top: 18px;
}
.sub .active .page-navi > li > a:not(.home) {
  background-color: transparent;
}
.sub .page-navi > li > a:not(.home) {
  line-height: 100%;
  background-color: var(--white);
  padding: 19px 30px 19px 20px;
  justify-content: center;
  align-items: center;
  max-height: 56px;
}
.sub .page-navi .nav-list > li > a {
  width: 100%;
  padding: 16px 30px;
  line-height: 1.2;
  background-color: var(--white);
  color: var(--gray-20);
}
.sub .page-navi .nav-list > .on > a,
.sub .page-navi .nav-list > li > a.on,
.sub .page-navi .nav-list > li > a:active,
.sub .page-navi .nav-list > li > a:focus,
.sub .page-navi .nav-list > li > a:hover {
  background-color: #fff8f8;
  color: var(--util-pointRed);
}
.sub .page-navi > li > a {
  height: 100%;
  min-width: 300px;
  width: 15.625vw;
  min-height: inherit;
  position: relative;
}
.sub .page-navi > li:last-child > a {
  color: var(--util-pointRed);
}
.sub .page-navi .on a,
.sub .page-navi a.on {
  color: var(--util-pointRed);
}
.sub .page-navi > li > a::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: transparent url(/img/sub-navi-arrow.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  transition: 0.3s;
}
.sub .page-navi .home {
  text-indent: -999em;
  display: block;
  width: 56px;
  height: 56px;
  background: url(/img/ico_home.svg) no-repeat center,
    radial-gradient(
      322.4% 56.17% at 52.54% 50%,
      rgba(79,132,175, 0.98) 0,
      rgba(79,132,175, 0.95) 100%
    );
  background-size: contain;
  min-width: auto;
  padding-right: 0;
}
.sub .page-navi .home::after {
  display: none;
}
.sub .page-navi > li.on > a::after {
  transform: rotate(180deg);
}
.sub .page-navi .navi-depth01,
.sub .page-navi .navi-depth02,
.sub .page-navi .navi-depth03 {
  position: absolute;
  z-index: 1;
  left: 100px;
  width: 100%;
  display: none;
}
.sub .page-navi .nav-list {
  position: absolute;
  z-index: 1;
  left: 25px;
  width: calc(100% - 50px);
  display: none;
  padding: 10px 0;
  background-color: var(--white);
  border-radius: 8px;
  margin-top: 10px;
  outline: 1.5px solid var(--util-pointRed);
}
.sub .tab-list {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
}
.sub .tab-list.small {
  display: flex;
  gap: 10px;
}
.sub .tab-list .on a,
.sub .tab-list.small .on a {
  border-color: var(--util-footer);
  background-color: var(--util-footer);
  color: var(--white);
}
.sub.install-status .tab-list.small {
  padding: 1rem 1.8rem;
  height: fit-content;
}
.sub .install-status-header .filter {
  display: flex;
  gap: 5px;
  color: var(--gray-10);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.33px;
}
.sub .install-status-header .num {
  color: var(--gray-20);
  font-weight: 500;
  line-height: 140%;
}
.sub .install-status-header .num span {
  font-size: clamp(34px, 2.8646vw, 55px);
  color: var(--Util-footer);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}
.sub .install-status-header .capacity {
  color: var(--gray-20);
}
.sub .install-status-header .capacity span {
  color: var(--gray-50);
}
.sub .install-status-header .esg {
  font-weight: 700;
}
.sub.social-media .tab-list {
  margin-top: 1rem;
}
.sub .tab-list li {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  flex: 1;
}
.sub .tab-list li a {
  color: #b0b2c1;
  text-align: center;
  font-size: var(--sub-tab-menu-size);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 25px;
  border-radius: 8px 8px 0 0;
  border-top: 1px solid var(--brand-LightGray-40);
  border-right: 1px solid var(--brand-LightGray-40);
  border-bottom: 1.2px solid var(--Util-footer, #1c1f24);
}
.sub .tab-list.small li a {
  padding: 15px 25px;
  border-radius: 999px;
  border: 1px solid var(--brand-LightGray-40);
  background: var(--Gray-white-100, #fff);
}
.sub .tab-list li:first-child a {
  border-left: 1px solid var(--brand-LightGray-40);
}
.sub .tab-list li a:active,
.sub .tab-list li a:focus,
.sub .tab-list li a:hover {
  color: var(--util-footer);
  opacity: 0.8;
}
.sub .tab-list .on a:active,
.sub .tab-list .on a:focus,
.sub .tab-list .on a:hover {
  opacity: 1;
  color: var(--white);
}
.sub .tab-cont {
  display: none;
}
.sub .tab-cont.on {
  display: block;
}
.sub.self-use .tab-cont {
  padding-top: 100px;
}
.sub.install-status .tab-list.small a:active,
.sub.install-status .tab-list.small a:focus,
.sub.install-status .tab-list.small a:hover {
  opacity: 1;
}
.sub.install-status .tab-list.small :not(.on) a {
  color: var(--gray-40);
}
.sub.industrial-solar.install-status header.center {
  margin-bottom: 0;
}
.sub.industrial-solar.install-status .flex-box {
  flex-wrap: wrap;
}
.sub.industrial-solar.install-status .flex-box > :first-child {
  width: 43.73%;
}
.sub.industrial-solar.install-status .flex-box > :last-child {
  width: 56.27%;
  display: flex;
  flex-direction: column;
}
.sub.industrial-solar.install-status .intall-map-sect {
  width: 82%;
  margin-left: 5rem;
  text-align: center;
}
.sub.industrial-solar.install-status .intall-map-sect::after,
.sub.industrial-solar.install-status .intall-map-sect::before {
  content: "지도를 선택해 지역별 발전소를 확인하세요.";
  display: block;
  color: var(--gray-60);
  font-size: var(--f16-size);
  font-size: clamp(13px, 0.8333vw, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.sub.industrial-solar.install-status .intall-map-sect::before {
  display: none;
}
.sub.industrial-solar.install-status .table-wrap {
  flex: 1 1 0;
  margin: 2rem 0;
}
.sub.industrial-solar.install-status .table-pagination {
  margin-top: 0;
}
.sub.industrial-solar.install-status .map {
  stroke: rgba(211, 218, 228, 0.6);
  stroke-width: 1.2;
  stroke-miterlimit: 10;
  stroke-opacity: 0.6;
  fill: var(--brand-LightGray-80);
}
.sub.industrial-solar.install-status #Map_container g:hover .map {
  stroke: #c5cdd9;
  fill: rgba(225, 230, 238, 0.7);
}
.sub.industrial-solar.install-status #Map_container g.active .map {
  fill: url(#MyGradient);
  stroke: #156ad2;
  mix-blend-mode: lighten;
}
.sub.industrial-solar.install-status .pin {
  fill: var(--Gray-white-100, #fff);
  stroke: rgba(211, 218, 228, 0.6);
  filter: drop-shadow(-2px 0 12px rgba(50, 50, 0, 0.05));
}
.sub.industrial-solar.install-status #Markers > g {
  cursor: pointer;
}
.sub.industrial-solar.install-status .active .pin {
  fill: var(--brand-navy);
}
.sub.industrial-solar.install-status .active .pin + text tspan {
  fill: var(--white);
  font-weight: 500;
}
.sub.industrial-solar.install-status .install-state {
  width: fit-content;
  font-size: 14px;
  font-weight: 600;
  fill: #4e4d58;
}
.sub.industrial-solar.install-status .install-num {
  width: fit-content;
  font-size: 19px;
  font-weight: 600;
  fill: #143269;
  letter-spacing: -0.665px;
}
.sub a.down::before,
.sub a.link::before {
  text-indent: -9999px;
  content: "다운로드";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(/img/ico_board-download.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.sub.view a.down::before,
.sub.view a.link::before {
  display: none;
}
.sub a.link::before {
  content: "링크 연결";
  background-image: url(/img/ico_board-link.svg);
}
:not(main).esg {
  color: var(--util-ESG);
}
.highlight {
  color: var(--util-강조);
}
.brand-burgundy {
  color: var(--brand-burgundy);
}
.brand-gray {
  color: var(--brand-gray);
}
.flag {
  width: fit-content;
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 6px;
  border-radius: 5px;
  border: 1px solid var(--brand-LightGray-40);
  background: var(--white);
  color: var(--gray-40);
  font-size: var(--f14-size);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.195px;
}
.flag::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(/img/ico_flag.svg) no-repeat center;
  background-size: cover;
  margin-right: 3px;
}
.flag.popup {
  font-size: var(--f16-size);
  color: var(--gray-10);
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
  padding: 4px 13px;
  border-radius: 999px;
}
.flag.popup::before {
  background-image: url(/img/ico_flag_blue.svg);
}
.tag {
  color: var(--gray-40);
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.225px;
  display: flex;
  align-items: center;
}
.tag::after {
  content: "";
  display: block;
  width: 1px;
  height: 8px;
  background-color: var(--util-stroke-color);
  margin: 0 8px;
}
.popup-overlay ul.info li:last-child .tag::after {
  display: none;
}
ul.info .tag::after {
  height: 10px;
}
.info-txt {
  display: flex;
  align-items: start;
  font-size: var(--f16-size);
  color: var(--gray-50);
  font-style: normal;
  font-weight: 400;
  line-height: 155%;
  letter-spacing: -0.24px;
  padding: 13px 0;
}
.explain-txt-box {
  padding-top: 10px;
  margin-top: 20px;
  border-top: 1px solid var(--util-stroke-color);
}
.explain-txt {
  display: flex;
}
.explain-txt.col {
  flex-direction: column;
  gap: 5px;
}
.explain-txt.col p {
  width: 100%;
}
.explain-txt strong {
  min-width: 80px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.explain-txt p {
  width: calc(100% - 80px);
  color: var(--gray-60);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.24px;
}
.info-txt strong {
  width: 90px;
  font-size: inherit;
  font-weight: inherit;
}
.info-txt p {
  font-size: inherit;
  font-weight: inherit;
  color: #000;
  width: calc(100% - 90px);
}
.info-txt.txt-18 {
  font-size: var(--f18-size);
}
.info-sect.gray {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  flex: 1 1 0;
}
.power-business .info-sect.gray {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-sect.gray .info-txt {
  padding: 0;
  border-bottom: none;
}
.info-sect.gray .info-txt strong {
  width: fit-content;
  color: var(--gray-40);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.info-sect.gray .info-txt p,
.info-sect.gray .info-txt > span {
  width: 100%;
  display: block;
  flex: 1 1 0;
  text-align: right;
}
.info-sect.gray .info-txt p {
  font-size: var(--f20-size);
  color: var(--util-강조);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.sub .scroll-down {
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: absolute;
  bottom: 30px;
}
.sub .scroll-down span {
  color: var(--white);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.sub .scroll-down i::after {
  width: 30px;
  height: 30px;
  border-radius: 999rem;
  content: "";
  display: block;
  background: #fff url(/img/ico_scroll-down.svg) no-repeat center;
  transition: 0.3s;
}
.sub-sticky-layout {
  gap: 60px;
  margin-top: 30px;
}
.sub-sticky-layout .explain {
  color: var(--gray-50);
}
.sub-sticky-layout > .img-sect {
  width: 45.83%;
  width: calc(45.83% - 60px);
}
.sub-sticky-layout > .img-sect img {
  position: sticky;
  top: 7rem;
  border-radius: 1rem;
  aspect-ratio: 550/530;
  object-fit: cover;
}
.sub-sticky-layout .text-sect {
  display: flex;
  flex-direction: column;
  width: calc(54.17% - 60px);
  width: 54.17%;
  gap: 2.5rem;
  margin-top: 0.5rem;
}
.sub-sticky-layout h3 {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-sticky-layout h3::before {
  content: "01";
  display: flex;
  justify-content: center;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--brand-LightGray-60);
  background: var(--dot-navy);
  border-radius: 999em;
  color: var(--white);
  font-size: var(--f16-size);
}
.tab2 .sub-sticky-layout h3::before {
  content: "02";
}
.tab3 .sub-sticky-layout h3::before {
  content: "03";
}
.tab4 .sub-sticky-layout h3::before {
  content: "04";
}
.tab5 .sub-sticky-layout h3::before {
  content: "05";
}
.sub-sticky-layout .text-sect > div:first-of-type {
  gap: 10px;
}
.sub-sticky-layout .title strong {
  font-weight: 500;
  color: var(--util-강조);
}
.sub-sticky-layout .title .txt-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sub-sticky-layout .text-sect .contents {
  gap: 0;
}
.sub-sticky-layout .dot-list > p {
  color: var(--gray-20);
}
.sub-sticky-layout .dot-list > .explain {
  color: var(--gray-50);
  font-size: var(--f17-size);
}
.sub .sub-sticky-layout ul.list {
  gap: 1rem;
  margin-top: 0.5rem;
}
.sub .sub-sticky-layout ul.list header {
  color: var(--gray-20);
}
.sub .sub-sticky-layout .list > li {
  width: calc((100% - 1rem) / 2);
  max-width: 250px;
}
.sub .sub-sticky-layout .list > li .img-sect {
  aspect-ratio: 250/147;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.sub .sub-sticky-layout .list > li .img-sect img {
  height: 100%;
}
.sub.recruit header.center {
  padding-bottom: 0;
}
.sub.recruit .gray {
  background-color: var(--brand-LightGray-60);
  padding: 80px 0;
}
.circle-list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-list .circle {
  display: flex;
  width: 33.33vw;
  height: 33.33vw;
  max-width: 300px;
  max-height: 300px;
  padding: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  color: var(--white);
  text-align: center;
  font-family: Pretendard;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.22px;
  border-radius: 999px;
  background: var(--dot-navy);
  box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(7.5px);
  margin-left: -40px;
}
.circle-list .circle:nth-child(1) {
  margin-left: 0;
}
.circle-list .circle:nth-child(2) {
  background-color: var(--dot-red);
}
.circle-list .circle:nth-child(3) {
  background-color: var(--dot-white);
  color: var(--gray-20);
}
.recruit-list a,
.talent-list > li {
  display: block;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--util-stroke-color);
  cursor: pointer;
  transition: 0.3s;
}
.talent-list > li {
  counter-increment: counter;
  position: relative;
  padding-left: 8.8542vw;
}
.talent-list > li:hover {
  border-bottom-color: var(--util-footer);
  border-width: 1.2px;
}
.talent-list > li::before {
  position: absolute;
  left: 0;
  top: auto;
  content: counter(counter, decimal-leading-zero);
  color: var(--util-placeholder);
  letter-spacing: -0.27px;
}
.talent-list .list-cont {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: -1;
}
.talent-list img {
  width: 20vw;
  height: auto;
  max-width: 367px;
  position: absolute;
  top: 2rem;
  right: 6.4063vw;
  opacity: 0;
  transition: 0.3s;
  box-shadow: var(--sitemapStyle);
  z-index: 2;
}
.talent-list > li:hover img {
  opacity: 1;
}
.talent-list .txt-26 {
  color: var(--black);
  font-weight: 500;
  line-height: 150%;
}
.talent-list .txt-18 {
  color: var(--gray-40);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.27px;
}
.recruit-list {
  border-top: 1.2px solid var(--util-footer);
}
.recruit-list.install {
  border-top: none;
}
.recruit-list a {
  padding: 2.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: none;
}
.recruit-list header {
  color: var(--util-footer);
  font-weight: 500;
  line-height: 150%;
  transition: 0.2s;
}
.recruit-list a:active,
.recruit-list a:focus,
.recruit-list a:hover {
  background-color: var(--brand-LightGray-100);
}
.recruit-list a:active header,
.recruit-list a:focus header,
.recruit-list a:hover header {
  color: var(--util-ESG);
}
.recruit-list.install a:active header,
.recruit-list.install a:focus header,
.recruit-list.install a:hover header {
  color: inherit;
}
.recruit-list .tag {
  color: var(--gray-50);
}
.recruit-list .notice header::before {
  content: "[집중채용]";
  margin-right: 10px;
}
.recruit-list.install a {
  padding: 1rem 0;
  flex-direction: row;
  align-items: center;
  padding-bottom: 10px;
  border-color: rgba(206, 213, 218, 0.7);
}
.recruit-list.install a {
  padding: 1rem 1.5rem;
  flex-direction: row;
  align-items: center;
}
.recruit-list.install .esg {
  font-weight: 500;
}
.recruit-list.install .text-sect {
  width: 75%;
  gap: 10px;
}
.recruit-list.install .img-sect {
  width: 25%;
  aspect-ratio: 183/105;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 3px 13.6px 0 rgba(0, 0, 0, 0.16);
}
.root_daum_roughmap .wrap_map,
.root_daum_roughmap_landing,
.sub .map-sect {
  width: 100% !important;
}
.sub .root_daum_roughmap .wrap_controllers .wrap_btn_roadview {
  font-size: var(--f14-size);
}
.sub.location .sect-tit {
  margin: 0;
}
.sub.location .root_daum_roughmap .cont {
  display: none;
}
.sub.location .link-btn {
  margin: 0;
  width: 60%;
  min-width: auto;
}
.sub.location .flex-box {
  justify-content: space-between;
  margin-bottom: 80px;
}
.sub.location .flex-box > * {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sub.location .sect-cont {
  margin: 0;
  gap: 60px;
}
.sub.location .sect-cont .txt-16 {
  color: var(--gray-70);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.24px;
}
.sub.location .sect-cont .txt-24 {
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.sub.group-info .counter-sect {
  gap: 40px;
  margin-top: 80px;
}
.sub.group-info .count {
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 40px;
  gap: 50px;
}
.sub.group-info .count::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: url(/img/company/ico_group-info-01.svg) no-repeat center;
  background-size: contain;
}
.sub.group-info .count:nth-of-type(2)::before {
  background-image: url(/img/company/ico_group-info-02.svg);
}
.sub.group-info .count:nth-of-type(3)::before {
  background-image: url(/img/company/ico_group-info-03.svg);
}
.sub .count .num {
  font-size: clamp(var(--f16-size), 1.0417vw, 16px);
  color: var(--gray-40);
  text-align: center;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.sub .count .counter,
.sub .count span {
  margin-bottom: -7px;
  color: var(--gray-10);
  text-align: center;
  font-family: Pretendard;
  font-size: clamp(var(--f26-size), 4vw, 52px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -1.56px;
}
.sub.solar-lease .count {
  width: fit-content;
  gap: 5px;
}
.sub.solar-lease .count .num {
  font-size: var(--f28-size);
}
.sub.solar-lease .count .counter {
  font-size: clamp(var(--f26-size), 8vw, 54px);
}
.sub.solar-lease .count + .text-sect {
  margin-top: 1rem;
  color: var(--gray-40);
}
.sub.solar-lease .count .txt-18 {
  color: var(--gray-50);
}
.sub.group-info .section.gray {
  padding: 0;
  background-color: var(--brand-LightGray-60);
  text-align: center;
  vertical-align: middle;
}
.sub.group-info .section.gray .inner {
  aspect-ratio: 1340/816;
  overflow: hidden;
  position: relative;
}
#group_info_map,
.group-info-img {
  position: absolute;
  top: 59%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  margin: 0 auto;
}
#group_info_map,
.balloon-pin,
.balloon-pin-txt,
.group-info-img {
  transition: 2s;
}
.gray.fadeInUp #group_info_map,
.gray.fadeInUp .group-info-img {
  transform: translate(-50%, -50%) scale(0.98);
}
.gray.fadeInUp .balloon-pin,
.gray.fadeInUp .balloon-pin-txt {
  visibility: visible;
  transform: translate(0);
  opacity: 1;
}
.map {
  fill: #d3dae4;
  stroke: #f5f7f9;
}
.small-pin {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #696873;
}
.balloon-pin-txt,
.small-pin-cir {
  fill: #fff;
}
.balloon-pin {
  fill: var(--brand-navy);
}
.balloon-pin,
.balloon-pin-txt {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: 0.3s ease;
}
.group-history .sect-tit {
  padding-bottom: 100px;
  margin-bottom: 0;
}
.history-sect {
  width: 100%;
  height: 100vh;
  background: linear-gradient(165deg, #f9fafb 0, #fff 107.13%, #fff 107.13%);
}
.history-sect .inner {
  width: 100%;
  height: 100%;
  color: var(--util-footer);
  font-size: clamp(36px, 5.2083vw, 100px);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-sect span {
  color: var(--util-history);
}
.history-txt {
  color: var(--util-placeholder);
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.3px;
  margin-bottom: 1.5rem;
}
.history-cont {
  position: relative;
  display: flex;
  height: 100%;
  padding-bottom: 200px;
}
.sub.group-history .line {
  position: absolute;
  top: calc(100vh + 6px);
  left: 50%;
  transform: translate(-50%, 0);
  width: 1px;
  height: 80%;
  height: calc(100% - 100vh - 6px);
  background-color: var(--util-stroke-color);
}
.sub.group-history .line span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  max-height: 100%;
  background: var(--util-history);
  transition: height 0.35s ease;
}
@keyframes historyOn {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    box-shadow: 0 0 0 12px rgba(212, 19, 34, 0.3);
  }
}
@keyframes historyOnMob {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    box-shadow: 0 0 0 8px rgba(212, 19, 34, 0.3);
  }
}
.history-cont .img-sect,
:not(.popup-overlay) .txt-sect {
  position: relative;
  width: 50%;
}
.history-cont .img-sect {
  width: 50%;
  padding-right: 100px;
}
.history-cont .txt-sect {
  width: 50%;
  padding-left: 100px;
}
.history-cont .txt-sect .box {
  position: sticky;
  top: 145px;
}
.sub.group-history .panel:nth-child(odd) .history-cont {
  flex-direction: row-reverse;
}
.sub.group-history .panel:nth-child(odd) .img-sect {
  padding-right: 0;
  padding-left: 100px;
}
.sub.group-history .panel:nth-child(odd) .txt-sect {
  padding-right: 100px;
  padding-left: 0;
  text-align: right;
}
.sub.group-history .panel:nth-child(even) .txt-sect::before,
.sub.group-history .panel:nth-child(odd) .img-sect::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: var(--util-stroke-color);
  border-radius: 100%;
  position: absolute;
  top: 6px;
  left: -6px;
  box-shadow: transparent 0 0 0 12px;
  transition: all ease 0.35s;
}
.sub.group-history .panel.active .history-cont > ::before {
  background-color: var(--util-history);
  animation: historyOn ease 0.5s forwards;
}
.history-cont .img-sect .card {
  width: fit-content;
  position: relative;
  margin-bottom: 120px;
}
.history-cont .img-sect .card:last-child {
  margin-bottom: 0;
}
.history-cont .img-sect .card:nth-child(odd) {
  margin-right: auto;
}
.history-cont .img-sect .card:nth-child(even) {
  margin-left: auto;
}
.panel:nth-child(odd) .img-sect .card:nth-child(odd) {
  margin-right: 0;
  margin-left: auto;
}
.panel:nth-child(odd) .img-sect .card:nth-child(even) {
  margin-right: auto;
  margin-left: 0;
}
.active .history-cont .history-year {
  color: var(--util-history);
}
.active .history-cont .history-txt {
  color: var(--util-footer);
}
.active .history-cont .img-sect .txt {
  color: var(--black);
}
.history-cont .history-year {
  display: block;
  color: var(--util-placeholder);
  font-size: var(--f28-size);
  font-size: clamp(20px, 1.4583vw, 28px);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.405px;
  margin-bottom: 1.5rem;
}
.history-cont .history-txt {
  color: var(--util-placeholder);
  font-size: var(--f20-size);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.3px;
}
.history-cont .img-sect .txt {
  width: fit-content;
  color: var(--util-placeholder);
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.24px;
  margin-top: 10px;
}
.popup-overlay {
  position: relative;
  box-shadow: var(--sitemapStyle);
  padding: 0;
  max-width: 50vw;
  height: auto;
  background-color: transparent;
}
.popup-overlay.patent {
  max-width: 424px;
}
.popup-overlay img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  box-shadow: var(--dropmenuStyle);
  border-radius: 10px;
  overflow: hidden;
}
.btn-popup-close {
  z-index: 999;
  text-indent: -999em;
  width: 30px;
  height: 30px;
  background: transparent url(/img/ico_popup-closed.svg) no-repeat center;
  background-size: 25px;
  position: absolute;
  right: 0;
  top: -50px;
}
.popup-overlay.ai-oper,
.popup-overlay.portfolio {
  background-color: #fff;
  position: relative;
  padding: 35px;
  padding-bottom: 0;
  width: 80vw;
  max-width: 944px;
  height: auto;
  border-radius: 12px 12px 0 0;
}
.popup-overlay.portfolio.on {
  border-radius: 0 0 12px 12px;
  padding: 0;
}
.popup-overlay.portfolio .more,
:not(.popup-overlay) button.more {
  width: 100%;
  background: var(--brand-LightGray-80);
  padding: 13px 0;
  color: var(--gray-10);
  font-size: var(--f18-size);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.27px;
  position: absolute;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
:not(.popup-overlay) button.more {
  position: static;
  transform: none;
  font-size: var(--f16-size);
  color: var(--gray-40);
  background-color: transparent;
  padding-bottom: 0;
}
:not(.popup-overlay) .txt-sect.on button.more {
  order: 3;
  border-color: transparent;
}
:not(.popup-overlay) .txt-sect .summary {
  padding-bottom: 0.8rem;
}
.gallery-cont:has(button.more) .summary {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--util-stroke-color);
}
:not(.popup-overlay) .txt-sect .detail {
  color: var(--gray-60);
  padding-top: 0.8rem;
}
:not(.popup-overlay) .txt-sect .detail {
  order: 2;
}
.sub.re100 .txt-sect .detail,
.sub.re100 .txt-sect .summary {
  text-align: left;
}
.sub.re100 .comp .txt-sect .summary {
  text-align: center;
  padding-bottom: 0;
}
.popup-overlay.portfolio .more::before,
:not(.popup-overlay) button.more::before {
  content: "이 사례의 모든 과정이 궁금하다면?";
  display: inline-block;
}
:not(.popup-overlay) button.more::before {
  content: "자세히 보기";
  display: inline-block;
}
:not(.popup-overlay) .on button.more::before {
  content: "접기";
}
.popup-overlay.portfolio.on .more::before {
  content: "대표 정보만 보기";
  display: inline-block;
}
.popup-overlay.portfolio .more::after,
:not(.popup-overlay) button.more::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(/img/sub-navi-arrow.svg) no-repeat center;
  display: inline-block;
  animation: bounce 2s infinite alternate cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.popup-overlay.portfolio.on .more::after,
:not(.popup-overlay) .on button.more::after {
  animation: none;
  transform: rotate(180deg);
}
@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-40%);
  }
  60% {
    transform: translateY(-25%);
  }
}
.popup-overlay.portfolio.on .more {
  top: 0;
  margin-top: -54px;
  border-radius: 12px 12px 0 0;
}
.popup-overlay.portfolio.on .btn-popup-close {
  margin: 18px;
  width: 72px;
  height: 72px;
  border-radius: 999em;
  background-color: #000;
  top: -72px;
  left: 100%;
}
.popup-overlay.portfolio .summary {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  margin-bottom: 45px;
}
.popup-overlay.ai-oper .title,
.popup-overlay.portfolio .title {
  color: var(--black);
  font-size: 31px;
  font-size: clamp(24px, 1.875vw, 31px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.popup-overlay.portfolio .summary > .img-sect {
  width: 46.91%;
  height: fit-content;
  aspect-ratio: 1.583317242710948/1;
  box-shadow: var(--dropmenuStyle);
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.popup-overlay.portfolio .summary > .img-sect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.popup-overlay.portfolio .summary > .text-sect {
  width: 48.51%;
}
.popup-overlay.portfolio .title-sect {
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.popup-overlay.portfolio > .info {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(218, 220, 224, 0.4);
}
.popup-overlay.portfolio .btn-popup-close {
  filter: invert(1);
  top: 30px;
  right: 35px;
}
.popup-overlay.portfolio > .info .tag:first-of-type {
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.detail {
  display: none;
}
.popup-overlay.portfolio .detail {
  display: none;
  height: 50vw;
  max-height: 760px;
  padding: 35px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
.popup-overlay.portfolio .detail img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: var(--dropmenuStyle);
}
.popup-overlay.ai-oper {
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  width: 80vw;
  max-width: 1200px;
}
.popup-overlay.ai-oper .btn-popup-close {
  top: 30px;
  right: 35px;
  filter: invert(1);
}
.popup-overlay.ai-oper .title {
  width: 100%;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--brand-LightGray-40);
}
.popup-overlay.ai-oper .popup-cont {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.popup-overlay.ai-oper .img-sect {
  width: 41.67%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-LightGray-80);
}
.popup-overlay.ai-oper .img-sect img {
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}
.popup-overlay.ai-oper .text-sect {
  width: 58.33%;
  padding: 50px 40px 60px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  flex: 1 0 0;
}
.popup-overlay.ai-oper .dot-list {
  width: 100%;
  gap: 8px;
}
.popup-overlay.privacy {
  width: 80vw;
  max-width: 600px;
  background: #fff;
  padding: 30px 1.5rem;
  border-radius: 12px;
  overflow: hidden;
}
.popup-overlay.privacy header {
  color: var(--gray-10);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--util-footer);
}
.popup-overlay.privacy .cont {
  max-height: 500px;
  overflow: auto;
  padding: 1.3rem;
  border-radius: 12px;
  margin-top: 1.5rem;
  border: 1px solid rgba(218, 220, 224, 1);
}
.popup-overlay.privacy .btn-popup-close {
  filter: invert(1);
  top: 30px;
  right: 1.5rem;
}
.popup-overlay.privacy .terms-box .gray-box {
  color: var(--gray-10);
}
.popup-overlay.privacy colgroup col:first-child {
  width: 100px !important;
}
.popup-overlay.privacy colgroup col:last-child {
  width: calc(100% - 100px) !important;
}
.table-wrap:first-of-type {
  margin-bottom: 0;
}
.table-wrap table {
  box-sizing: border-box;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.table-wrap .table-caption {
  color: var(--Gray-Gray10, #1c1c1c);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-align: left;
}
.sub.esg .table-caption.cont-subtit {
  color: var(--util-강조);
  background-image: none;
}
.table-wrap .table-caption + .table-box-body,
.table-wrap .table-caption + table {
  margin-top: 15px;
}
.table-wrap table td,
.table-wrap table th {
  box-sizing: border-box;
  font-size: var(--f16-size);
  padding: 12px 15px;
  white-space: inherit;
  color: var(--Gray-Gray0, #000);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: center;
}
.table-wrap table .pd-none,
.table-wrap.pd-none table td {
  padding: 0;
}
.table-wrap table .left,
.table-wrap.left table td {
  text-align: left;
}
.table-wrap table .left,
.table-wrap.left table td {
  text-align: left;
}
.table-wrap table th {
  background-color: #eaeaea;
}
.table-wrap:not(.board) table th[scope="row"] {
  background-color: #f5f5f5;
  border-color: #e2e2e2;
}
.table-wrap table .highlight {
  color: var(--util-강조);
  font-weight: 500;
}
.table-wrap:not(.board) table {
  border-top: 1.2px solid #aaa;
  border-bottom: 1px solid #aaa;
}
.table-wrap:not(.board) table td,
.table-wrap:not(.board) table th {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
.table-wrap:not(.board) table tr td[rowspan],
.table-wrap:not(.board) table tr:last-child td,
.table-wrap:not(.board) table tr:last-child th {
  border-bottom: none;
}
.table-wrap:not(.board) table td:first-child,
.table-wrap:not(.board) table th:first-child,
.table-wrap:not(.board) table tr > th[scope="row"] + td:not([rowspan]) {
  border-left: none;
}
.table-wrap:not(.board) table th:last-child,
.table-wrap:not(.board) table tr td:last-child,
.table-wrap:not(.board) table tr > th[scope="row"] {
  border-right: none;
}
.table-wrap table .br-right {
  border-right: 1px solid #e2e2e2 !important;
}
.table-wrap:not(.board) table td {
  color: var(--gray-10);
  border-color: #e2e2e2;
}
.table-wrap.board table td,
.table-wrap.board table th {
  font-size: var(--f18-size);
  line-height: 1.4;
  padding: 18.8px 0;
  vertical-align: middle;
  border-bottom: 1.2px solid var(--util-stroke-color);
}
.table-wrap.board table td {
  padding: 28px 0;
  font-size: var(--f15-size);
  color: var(--gray-60);
}
.table-wrap.board table .notice {
  color: var(--util-pointRed);
  font-size: var(--f16-size);
  font-weight: 500;
}
.table-wrap.board time {
  font-size: var(--f15-size);
  color: var(--gray-40);
}
.table-wrap.board table td:has(a.down),
.table-wrap.board table td:has(a.link) {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.table-wrap.board table .title:has(.board-title) {
  display: flex;
  align-items: center;
}
.table-wrap.board table td:has(.board-title) {
  text-align: left;
  padding-left: 1rem;
  padding-right: 2rem;
}
.table-wrap.board table .board-title {
  width: fit-content;
  color: var(--black);
  font-size: var(--f18-size);
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.27px;
}
.table-wrap.board table .board-title:hover {
  text-decoration: underline 1.2px solid var(--black);
  text-underline-offset: 0.1em;
}
.table-wrap.board table .view {
  display: inline-block;
  vertical-align: middle;
  width: fit-content;
  color: var(--gray-60);
  font-size: var(--f14-size);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.455px;
  padding: 0 4px;
  align-items: center;
  border-radius: 5px;
  background: var(--Brand-LightGray-80, #f5f7f9);
  margin-left: 0.5rem;
}
.table-wrap.board table a {
  width: fit-content;
}
.notice.list colgroup col:first-child {
  color: var(--Gray-60, #939091);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.195px;
}
.table-wrap.default table td {
  font-weight: 400;
}
.table-wrap.default table th:has(br) {
  line-height: 1.3;
  padding: 7.5px 0;
}
.table-wrap.default table td:has(.default-btn) {
  padding: 9px 0;
}
.table-wrap table tbody tr td[rowspan] {
  border-left: 1px solid var(--color-gray2);
}
.table-wrap.board table thead th {
  background-color: #fff;
  font-weight: 500;
}
.table-wrap.default table thead th {
  font-weight: 600;
}
.table-wrap.line table th {
  border-top: 1px solid var(--color-wh-dd);
}
.table-wrap.line.default table thead tr:first-child th {
  border-top-color: #000;
}
.table-wrap.board.line.default table th {
  border-top-width: 2px;
  border-top-color: var(--color-bl-33);
}
.table-wrap.gray table th {
  border-color: var(--color-bl-22);
}
.table-wrap.gray table td {
  color: var(--color-wh-aa);
  border-color: var(--color-bl-44);
}
.table-wrap.gray table thead td,
.table-wrap.gray table thead th {
  color: var(--color-wh-aa);
}
.table-wrap.gray table thead th {
  background-color: var(--color-bl-44);
  font-weight: 500;
}
.table-wrap .board-title,
.table-wrap .list .explain {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.table-wrap.responsive .mw-1000 {
  min-width: 1000px !important;
}
.table-wrap.responsive .mw-800 {
  min-width: 800px !important;
}
.table-wrap.responsive .mw-600 {
  min-width: 600px !important;
}
.table-wrap.responsive .mw-500 {
  min-width: 500px !important;
}
.table-wrap.responsive .mw-400 {
  min-width: 400px !important;
}
.sub.esg .table-wrap table td,
.sub.esg .table-wrap table th {
  padding: 0.5rem 1rem;
}
.sub.esg .table-wrap .pd-none {
  padding: 0;
}
.sub.esg .table-wrap tr td:last-child {
  text-align: center;
}
.sub.esg .table-wrap .pd-none + td,
.sub.esg .table-wrap th[scope="row"]:not(.br-right) {
  text-align: left;
}
body.mob .sub.esg .mw-500 colgroup col:nth-child(1) {
  width: 13% !important;
}
body.mob .sub.esg .mw-500 colgroup col:nth-child(2) {
  width: 22% !important;
}
@media screen and (max-width: 1024px) {
  .table-wrap.default.responsive {
    width: 100%;
  }
  .table-wrap.responsive .table-box-body {
    overflow-x: scroll;
  }
  .table-wrap.board.line.default table th {
    border-bottom: 2px solid var(--color-bl-33);
  }
  .table-wrap:not(.responsive) table colgroup,
  .table-wrap:not(.responsive) table td,
  .table-wrap:not(.responsive) table th {
    font-size: var(--f18-size);
    display: block;
    border-bottom: none;
  }
  .table-wrap:not(.responsive) table td,
  .table-wrap:not(.responsive) table th {
    padding: 15px;
  }
  .table-wrap.board tbody tr {
    border-bottom: 1px solid var(--util-stroke-color);
    position: relative;
  }
  .table-wrap.board table td:has(a.down),
  .table-wrap.board table td:has(a.link),
  .table-wrap.board table td:has(time),
  .table-wrap:not(.responsive) table td:has(.board-title) {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .table-wrap.board table td:has(a.down),
  .table-wrap.board table td:has(a.link) {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .table-wrap.board table td:has(a.down),
  .table-wrap.board table td:has(a.link) {
    gap: 0;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .table-wrap:not(.responsive) table td {
    text-align: left;
  }
  .table-wrap.board table td:has(time) {
    text-align: left;
    line-height: 22px;
    padding-top: 0;
  }
  .sub a.down::before,
  .sub a.link::before {
    width: 36px;
    height: 36px;
  }
  .table-wrap.board thead {
    display: none;
  }
  .table-wrap.board table .board-title {
    width: 100%;
    font-size: var(--f16-size);
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }
  .table-wrap.board table .view {
    display: none;
  }
  .table-wrap.board time {
    font-size: var(--f14-size);
    color: var(--gray-70);
  }
  .table-wrap.board table tr:has(.notice) {
    background-color: rgba(255, 248, 248, 0.9);
  }
  .table-wrap.board table tr:has(.notice) .board-title::before {
    content: "[공지]";
    color: var(--util-history);
    margin-right: 0.25rem;
  }
  .table-wrap.board table td:first-child {
    display: none;
  }
  .solar-asset.solar-rental
    .table-wrap:has(table:not(.mw-1000))
    colgroup
    col:nth-child(1) {
    width: 50% !important;
  }
  .solar-asset.solar-rental
    .table-wrap:has(table:not(.mw-1000))
    colgroup
    col:nth-child(2) {
    width: 50% !important;
  }
  .prepaid-cost .table-wrap colgroup col:nth-child(1) {
    width: 30% !important;
  }
}
@media screen and (max-width: 768px) {
  .table-wrap:not(.responsive) table colgroup,
  .table-wrap:not(.responsive) table td,
  .table-wrap:not(.responsive) table th {
    font-size: var(--f16-size);
  }
}
.sub.install-status .sect-tit {
  text-align: center;
}
label {
  color: var(--util-footer);
  font-size: var(--f18-size);
  display: block;
  margin-bottom: 10px;
}
.star::after {
  content: "*";
  display: inline-block;
  color: var(--util-pointRed);
  vertical-align: text-bottom;
}
.check-group,
input,
option,
select,
textarea {
  font-size: var(--sub-placeholder-size);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.255px;
  transition: 0.3s;
}
option {
  transition: none;
}
input,
select,
textarea {
  width: 100%;
  border-radius: 6px;
  background-color: var(--brand-LightGray-80);
  border: none;
  padding: 17px 18px;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--util-placeholder);
}
option,
select {
  cursor: pointer;
}
::picker(select),
select {
  appearance: base-select;
  align-items: center;
}
select::picker-icon {
  content: "";
  width: 30px;
  height: 30px;
  background: url(/img/ico_select.svg) no-repeat center;
  color: #999;
  transition: 0.3s rotate;
}
select:open::picker-icon {
  rotate: 180deg;
}
select.region {
  width: fit-content;
  padding: 0;
  background-color: transparent;
  gap: 10px;
}
.sub.portfolio .sect-tit:has(select.region) {
  margin-bottom: 0;
}
.sub.portfolio select.region {
  margin-bottom: 20px;
}
.sub.portfolio.install-cases select.region {
  margin-bottom: 70px;
}
select.region::picker-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--util-stroke-color);
  background-color: #fff;
  transition: none;
}
select.region:open::picker-icon {
  border-color: var(--util-footer);
}
select.region::picker-icon:active,
select.region::picker-icon:focus,
select.region::picker-icon:hover,
select.region:open::picker-icon {
  border-color: var(--util-footer);
}
::picker(select) {
  border: 1px solid var(--util-stroke-color);
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: var(--dropmenustyle);
}
option {
  color: var(--gray-40);
  padding: 10.25px 12px;
  gap: 0.8rem;
}
option:active,
option:focus,
option:hover {
  border-color: var(--util-footer);
  background: var(--brand-LightGray-80);
  color: var(--gray-20);
}
select.region option {
  color: var(--brand-gray);
  font-size: var(--sub-dropmenu-size);
}
select.region option:active,
select.region option:focus,
select.region option:hover {
  background-color: transparent;
  color: var(--black);
  font-weight: 500;
}
.sub.form form {
  display: flex;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1.2px solid var(--util-footer);
  gap: 10px;
  justify-content: space-between;
}
.sub.promotion.view form {
  margin-top: 120px;
  padding-bottom: 50px;
  border-top: 1.2px solid var(--util-stroke-color);
  border-bottom: 1.2px solid var(--util-stroke-color);
}
.sub.form form > div {
  width: 100%;
  margin-bottom: 30px;
}
.sub.form form > .half {
  width: calc(50% - 12px);
}
.sub.form form > div:nth-last-of-type(2) {
  margin-bottom: 25px;
}
.sub.form textarea {
  min-height: 248px;
}
@media screen and (max-width: 1024px) {
  label {
    font-size: var(--f17-size);
  }
  input,
  option,
  select,
  textarea {
    font-size: var(--f16-size);
  }
  select::picker-icon {
    width: 20px;
    height: 20px;
  }
  .sub.form form > div,
  .sub.form form > div:nth-last-of-type(2) {
    margin-bottom: 1.5rem;
  }
  .sub.form textarea {
    min-height: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .sub.form form > .half {
    width: 100%;
  }
}
.table-pagination {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
}
.table-pagination > a {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  text-indent: -9999px;
  font-size: 0;
  background: transparent url(/img/board-ico-end.svg) no-repeat center;
  border-radius: 999px;
}
.table-pagination .page {
  display: flex;
  gap: 2px;
  margin: 0 10px;
}
.table-pagination .page a {
  font-size: var(--f15-size);
  color: var(--gray-60);
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  letter-spacing: -0.4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-pagination .page a:active,
.table-pagination .page a:focus,
.table-pagination .page a:hover {
  opacity: 1;
  background-color: var(--brand-LightGray-80);
  color: var(--gray-20);
}
.table-pagination > a:active,
.table-pagination > a:focus,
.table-pagination > a:hover {
  filter: brightness(20%);
}
.table-pagination .page a.active {
  background: var(--util-footer);
  color: var(--white);
}
.sub.install-status .table-pagination .page a {
  opacity: 0.8;
}
.sub.install-status .table-pagination .page a.active {
  color: var(--black);
  background-color: transparent;
}
.table-pagination > a.btn-end,
.table-pagination > a.btn-first {
  background-image: url(/img/ico_board-end.svg);
}
.table-pagination > a.btn-next,
.table-pagination > a.btn-prev {
  background-image: url(/img/ico_board-next.svg);
}
.table-pagination > a.btn-first,
.table-pagination > a.btn-prev {
  transform: rotate(180deg);
}
.notice-cont.no-txt {
  font-size: var(--f18-size);
  padding: 250px 0 250px;
  text-align: center;
}
.table-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 25px;
  border-bottom: 1.2px solid var(--util-footer);
}
.sub.social-media .table-search {
  border-bottom-color: transparent;
}
.table-search p {
  display: flex;
  gap: 4px;
  color: var(--black);
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.21px;
}
.table-search p span {
  font-size: inherit;
  color: var(--gray-10);
  font-weight: 600;
}
.table-search .search-box {
  display: flex;
  gap: 15px;
  position: relative;
}
.search-box input {
  font-size: var(--f17-size);
  width: 100%;
  min-width: 400px;
  padding: 18px 24px;
  padding-right: 52px;
  background-color: var(--brand-LightGray-60);
  color: var(--black);
  border-radius: 999px;
  line-height: 100%;
  border: none;
}
.search-box input::placeholder {
  color: var(--util-placeholder);
}
.search-box input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1.5em;
  width: 1.5em;
  background-image: url(/img/ico_search-closed.svg);
  background-size: 1.5em 1.5em;
  cursor: pointer;
}
.search-box .btn-search {
  content: "검색";
  position: absolute;
  top: calc(50% - 15px);
  right: 24px;
  text-indent: -9999px;
  cursor: pointer;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  background: url(/img/ico_search.svg) no-repeat center;
}
.table-wrap {
  margin-top: 50px;
}
.sub.esg .table-wrap:has(.list) {
  margin-top: 120px;
}
.sub.esg .table-wrap:has(.list):first-of-type {
  margin-top: 80px;
}
.sub .tab-cont .table-wrap:first-of-type {
  margin-top: 30px;
}
.table-wrap.board {
  margin-top: 0;
}
.list:has(.boxStyle1),
.table-wrap .list {
  display: flex;
  flex-wrap: wrap;
}
.table-wrap .list {
  gap: 80px 60px;
}
.sub.power-business .table-wrap .list {
  gap: 40px;
}
.sub.power-business .table-wrap .list > li {
  flex: 1 1 0;
}
.sub.portfolio .table-wrap .list {
  gap: 50px 60px;
}
.table-wrap .list > li,
.table-wrap .list > li > a {
  display: block;
  display: flex;
  flex-direction: column;
}
.table-wrap .list.social-media > li > a {
  display: flex;
  flex-direction: column-reverse;
  border-radius: 15px 15px 0 0;
  border-radius: 15px;
  border: 1px solid var(--brand-LightGray-60);
  background-color: var(--white);
  box-shadow: 0 0 8px 0 rgba(111, 136, 149, 0.07);
}
.table-wrap .list.social-media .img-sect {
  aspect-ratio: 1.455555332449907/1;
  border-radius: 0 0 15px 15px;
  margin-bottom: 0;
}
.table-wrap .list.social-media .img-sect img {
  max-width: none;
  height: 100%;
}
.table-wrap .list.social-media > li > a:hover {
  animation: updown2 1s alternate;
}
@keyframes updown2 {
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1%);
  }
  0% {
    transform: translateY(0);
  }
}
.table-wrap .list.social-media .list-cont {
  padding: 22px;
}
.table-wrap .list .cate {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 1.1rem;
}
.table-wrap .list .cate span {
  width: fit-content;
  color: var(--gray-40);
  font-size: var(--f13-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  align-self: stretch;
  border-radius: 10px;
  position: relative;
}
.table-wrap .list .cate::before {
  content: "icon";
  text-indent: -999em;
  width: 20px;
  height: 20px;
  display: block;
  background: var(--white) url(/img/pr-support/ico_social-media-01.svg)
    no-repeat center;
  border-radius: 4px;
  background-size: contain;
}
.table-wrap .list .cate.blog::before {
  background-image: url(/img/pr-support/ico_social-media-02.svg);
}
.table-wrap .list .cate.insta::before {
  background-image: url(/img/pr-support/ico_social-media-03.svg);
}
.table-wrap .list .cate.kakao::before {
  background-image: url(/img/pr-support/ico_social-media-04.svg);
}
.sub.patent .table-wrap .list {
  gap: 50px 60px;
}
.table-wrap .list > li {
  width: calc((100% - 120px) / 3);
}
.sub.esg .table-wrap .list:not(.esg-list) {
  gap: 60px 30px;
}
.sub.esg .table-wrap .list:not(.esg-list) p {
  color: var(--gray-40);
}
.sub.esg .table-wrap .list:not(.esg-list) span {
  color: var(--gray-70);
}
.sub.esg .table-wrap .list.gallery .img-sect {
  aspect-ratio: 380/181;
  margin-top: 0.5rem;
  border-radius: 0;
}
.table-wrap .list > li {
  width: calc((100% - 120px) / 3);
}
.table-wrap .list.two {
  gap: 30px;
}
.table-wrap .list.two.link {
  gap: 80px 30px;
}
.table-wrap .list.two.link .img-sect {
  border-radius: 8px;
}
.table-wrap .list.two.link .img-sect img {
  width: auto;
  height: 100%;
}
.table-wrap .list.two.link .txt-sect {
  width: 100%;
}
.table-wrap .list.two.link header {
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.table-wrap .list.two.link header + p {
  color: var(--gray-40);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.27px;
  margin: 5px 0 1rem 0;
}
.table-wrap .list.two > li {
  width: calc((100% - 30px) / 2);
}
.sub.self-use .table-wrap .list.two > li {
  gap: 10px;
}
.list,
.list:has(.boxStyle1),
.sub.industrial-support .list {
  gap: 30px;
}
.list:not(main) > *,
.sub.industrial-support .list > li {
  width: calc((100% - 60px) / 3);
}
.table-wrap .list .board-title {
  word-break: keep-all;
  font-size: var(--f20-size);
  color: var(--gray-10);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.3px;
  -webkit-line-clamp: 2;
  min-height: 3.5625rem;
}
.sub.industrial-support .board-title {
  color: var(--gray-20);
  font-size: clamp(var(--f17-size), 0.9375vw, var(--f18-size));
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.24px;
}
.table-wrap .list.gallery .board-title {
  min-height: auto;
  -webkit-line-clamp: 1;
}
.sub.portfolio .list .board-title {
  color: var(--black);
  font-weight: 400;
  -webkit-line-clamp: 1;
  min-height: auto;
  margin: 10px 0 5px 0;
}
.gallery-cont {
  border-radius: 8px;
  border: 1px solid var(--util-stroke-color);
  padding: 20px 20px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.gallery-cont:not(:has(> .txt-sect)) {
  padding-bottom: 20px;
}
.table-wrap .list.gallery.more .img-sect {
  aspect-ratio: 545/250;
  border-radius: 0;
  margin: 0;
}
.table-wrap .list.gallery.more .txt-sect {
  width: 100%;
  text-align: center;
  color: var(--gray-40);
  display: flex;
  flex-direction: column;
}
ul.info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
ul.info li:last-child .tag::after {
  display: none;
}
.sub.portfolio .info .tag {
  flex-direction: row-reverse;
}
.sub.portfolio .table-wrap .list.social-media .board-title {
  font-size: var(--f19-size);
}
.table-wrap .list .explain {
  word-break: keep-all;
  color: var(--gray-60);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.225px;
  -webkit-line-clamp: 2;
}
.sub.patent .list-cont {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
}
.sub.patent .board-title {
  -webkit-line-clamp: 3;
}
.table-wrap .list .img-sect {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--dropmenuStyle);
}
.sub.portfolio .table-wrap .list .img-sect {
  border-radius: 8px;
  margin-bottom: 0;
  position: relative;
  aspect-ratio: 1.780701754385965/1;
  box-shadow: none;
}
.table-wrap .list.gallery .img-sect {
  aspect-ratio: 406.67/228.75;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-wrap .list.gallery.link .img-sect {
  aspect-ratio: 585/280;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub.solar-lease .list.gallery {
  margin-top: 50px;
}
.sub.solar-lease .list.gallery > li {
  flex: 1;
  gap: 10px;
}
.sub.solar-lease .list.gallery > li img {
  transform: scale(1.3);
}
.table-wrap .list.reverse .img-sect {
  order: 2;
  margin-bottom: 0;
}
.sub.solar-lease .list.gallery .img-sect {
  aspect-ratio: 585/280;
  margin-bottom: 0;
  border-radius: 0;
}
.sub.industrial-support .list.gallery .img-sect {
  aspect-ratio: 380/186;
  border-radius: 8px;
  margin-bottom: 8px;
}
.sub.portfolio .table-wrap .list .img-sect img {
  height: 100%;
}
#main_visual .cctv .cont::after,
.sub.portfolio .table-wrap .list .img-sect::after {
  content: "재생";
  text-indent: -9999em;
  display: block;
  width: 54px;
  height: 54px;
  background: url(/img/ico_play.svg),
    no-repeat center
      radial-gradient(
        50% 50% at 50% 50%,
        rgba(255, 255, 255, 0.13) 0,
        rgba(255, 255, 255, 0) 100%
      );
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  border: 1px solid var(--Brand-LightGray-100, #f9fafb);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  background-size: cover;
  transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.sub.portfolio.install-cases .list .img-sect::after,
.sub.portfolio.maintenance-cases .list .img-sect::after {
  display: none;
}
.sub.portfolio .table-wrap .list .img-sect:hover::after {
  border: none;
  background: url(/img/ico_play.svg),
    radial-gradient(
        322.4% 56.17% at 52.54% 50%,
        rgba(212, 32, 44, 0.85) 0,
        rgba(212, 32, 44, 0.81) 100%
      )
      no-repeat center;
  background-size: cover;
  transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.table-wrap .list .img-sect.no-image {
  box-shadow: none;
  filter: brightness(0.95);
}
.img-sect.mob-image:hover img,
.table-wrap .list .img-sect img {
  object-fit: cover;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.img-sect.mob-image:not(.hidden):hover img,
.table-wrap .list > li > a:hover .img-sect img {
  transform: scale(1.1);
}
.table-wrap .list.social-media > li > a:hover .img-sect img {
  transform: scale(1);
  transition: none;
}
.sub.news .table-wrap .list .img-sect {
  aspect-ratio: 1.455563907083289/1;
}
.sub.news .table-wrap .list .img-sect:not(.no-image) {
  box-shadow: var(--dropmenuStyle);
}
.sub.patent .table-wrap .list .img-sect {
  box-shadow: none;
  background-color: #f3f5f7;
  padding: 0.8rem;
  aspect-ratio: 1.777792349726776/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub.patent .table-wrap .list .img-sect.no-image {
  padding: 0;
}
.sub.patent .table-wrap .list .img-sect.img-sect:not(.no-image) img {
  width: 35.63%;
}
.sub.view header {
  font-weight: 500;
}
.sub .common-btn:hover,
.sub .link-btn:hover {
  opacity: 0.8;
}
.sub .common-btn {
  line-height: 100%;
  text-align: center;
  font-size: var(--f18-size);
  color: var(--white);
  border-radius: 6px;
  display: block;
  width: fit-content;
  padding: 21px 18px;
  min-width: 250px;
  margin: 0 auto;
  background: var(--util-footer);
  transition: all 150ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
.sub .common-btn-2 {
  color: #0081ec;
  border: 1px solid #0081ec;
  background: #fff;
}
.sub .common-btn-2:active,
.sub .common-btn-2:focus,
.sub .common-btn-2:hover {
  color: #fff;
  background: #0081ec;
}
.sub .download-btn {
  width: 100%;
  border-radius: 8px;
  background: var(--brand-LightGray-80);
  color: #000;
  font-weight: 500;
  line-height: 160%;
  padding: 13px 20px 13px 25px;
  display: block;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -0.27px;
  transition: all 150ms linear;
}
.download-sect {
  display: flex;
  gap: 40px;
}
aside .download-sect {
  padding-top: 100px;
}
.download-sect .common-btn.download-btn {
  flex: 1;
  min-width: auto;
}
.sub .tab-btn {
  font-size: var(--f16-size);
  min-width: auto;
  width: fit-content;
  margin: 0;
  border-radius: 999em;
  padding: 12px 23px 12px 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.sub .download-btn p,
.sub .tab-btn.download p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub .tab-btn.download span {
  margin-left: 0.3rem;
}
.sub .download-btn:hover {
  background-color: var(--util-footer);
  color: var(--white);
}
.sub .download-btn span {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.sub .download-btn p::after,
.sub .tab-btn.download p::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url(/img/ico_board-download.svg) no-repeat center;
  background-size: contain;
  margin-left: 10px;
}
.sub .tab-btn.download p::after {
  width: 20px;
  height: 20px;
  background-size: 30px;
}
.sub .download-btn:hover p::after,
.sub .tab-btn.download p::after {
  filter: invert(1);
}
.sub.esg .download-btn {
  margin-top: 2.5rem;
}
.sub .link-btn {
  padding: 23px 30px;
  min-width: 325px;
  font-weight: 500;
  margin-top: 80px;
}
.sub.pr-support.form .link-btn {
  margin-top: 0;
}
.sub .common-link,
.sub .common-link-more {
  color: var(--gray-10);
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub .common-link-more::after,
.sub .common-link::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--brand-LightGray-40) url(/img/ico_link-btn.svg) no-repeat
    center;
  color: var(--gray-10);
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition: 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.sub .common-link-more {
  gap: 0;
  height: fit-content;
}
.sub .common-link-more::after {
  background-image: url(/img/ico_link-more.svg);
  background-color: transparent;
}
.sub a.common-link:active::after,
.sub a.common-link:focus::after,
.sub a.common-link:hover::after,
.table-wrap .list.two.link li > a:active .common-link::after,
.table-wrap .list.two.link li > a:focus .common-link::after,
.table-wrap .list.two.link li > a:hover .common-link::after {
  background-color: var(--util-footer);
}
.sub.view .back-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  width: fit-content;
  color: var(--gray-20);
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.27px;
  border-radius: 999px;
  background: var(--brand-LightGray-60);
  margin-bottom: 30px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sub.view .back-btn:hover {
  width: 130px;
  transition: 0.3s;
}
.sub.view .back-btn::before {
  content: "";
  display: block;
  width: 44px;
  height: 100%;
  background: url(/img/ico_board-next.svg) no-repeat center right;
  background-size: contain;
  filter: brightness(20%);
  transform: rotate(180deg);
}
.sub.view .cont {
  padding-top: 200px;
}
main.view .title-box {
  color: var(--gray-10);
  padding-bottom: 50px;
  border-bottom: 1px solid var(--util-stroke-color);
}
main.view .title-box time {
  display: block;
  color: var(--brand-gray);
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.24px;
  margin-top: 1rem;
}
main.view .notice-cont {
  color: var(--gray-10);
  padding: 50px 0;
}
main.view .notice-cont:has(.file-area) {
  padding-top: 1.5rem;
}
main.view .notice-cont .file-area {
  display: flex;
  flex-flow: column;
  gap: 16px;
  padding-bottom: 30px;
}
main.view .notice-cont .file-area > div {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 10px;
}
main.view .notice-cont .file-area a.down,
main.view .notice-cont .file-area a.link {
  display: inline-block;
  position: relative;
  padding-left: 2.5rem;
  word-break: break-all;
}
main.view .notice-cont .file-area a.down span,
main.view .notice-cont .file-area a.link span {
  display: inline-block;
  line-height: 1.5;
}
main.view .notice-cont .file-area a.down::before,
main.view .notice-cont .file-area a.link::before {
  content: "링크";
  display: inline-block;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--brand-LightBlue-80) url(/img/ico_board-link-small.svg)
    no-repeat center;
  background-size: 30px;
  vertical-align: middle;
  margin-right: 8px;
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: -1px;
}
main.view .notice-cont .file-area a.down:hover span,
main.view .notice-cont .file-area a.link:hover span {
  text-decoration: underline 1px solid var(--util-footer);
  text-underline-offset: 0.1em;
}
main.view .notice-cont .file-area a.down:hover::before,
main.view .notice-cont .file-area a.link:hover::before {
  filter: invert(1);
}
main.view .notice-cont .file-area a.down::before {
  background-image: url(/img/ico_board-download-small.svg);
}
main.view .notice-cont .file-area a.down::before {
  background-image: url(/img/ico_board-download-small.svg);
}
main.view .notice-cont .file-area .file-cont {
  display: flex;
  gap: 1rem 0;
  flex-wrap: wrap;
}
main.view .notice-cont .file-area .link .file-cont {
  flex-direction: column;
}
main.view .notice-cont .file-area .link:has(.file-cont:empty) {
  display: none;
}
main.view .notice-cont .file-area a {
  display: flex;
  align-items: center;
  font-size: var(--f16-size);
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.24px;
}
main.view .notice-cont .file-area a::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8rem;
  background-color: #e3e3e3;
  margin: 0 12px;
  vertical-align: middle;
}
main.view .notice-cont .file-area .link a::after {
  display: none;
}
main.view .notice-cont .file-area a:last-child::after {
  display: none;
}
main.view .link-box {
  margin-bottom: 60px;
  display: flex;
  column-gap: 3em;
  width: 100%;
  border-bottom: 1px solid var(--util-footer);
}
main.view .link-box li {
  width: 50%;
  width: calc(50% - 1.5em);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 0;
}
main.view .link-box li:last-child {
  flex-direction: row-reverse;
}
main.view .link-box li strong {
  font-weight: 500;
  display: flex;
  align-items: center;
}
main.view .link-box li:last-child strong {
  flex-direction: row-reverse;
}
main.view .link-box li strong::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/img/sub-navi-arrow.svg) no-repeat center;
  background-size: cover;
  transform: rotate(90deg);
}
main.view .link-box li:last-child strong::before {
  transform: rotate(270deg);
}
main.view .link-box li a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main.view .link-box .no-text {
  color: var(--brand-gray);
  cursor: auto;
}
main.view .link-box li:last-child strong::after {
  transform: rotate(180deg);
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-list li > a {
  display: block;
  font-size: var(--f20-size);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.3px;
  display: flex;
  gap: 8px;
  padding: 28px 20px 28px 24px;
  padding-right: 3rem;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--util-stroke-color);
  position: relative;
}
.sub .faq-list li > a {
  padding: 22px 20px 22px 24px;
  color: var(--gray-10);
  font-size: var(--f22-size);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.33px;
}
.sub .faq-list li.on > a,
.sub .faq-list li > a {
  color: var(--gray-20);
}
.sub .faq-list li.on > a {
  border-bottom: none;
}
.sub .faq-list li.on {
  border-color: var(--util-stroke-color2);
}
.sub .faq-list li.on > a .faq-title::before,
.sub .faq-list li > a .faq-title::before {
  color: var(--gray-20);
  color: var(--cont-Blue, rgba(3, 103, 178, 0.95));
  font-size: var(--f21-size);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.315px;
}
.faq-list li > a:active,
.faq-list li > a:focus,
.faq-list li > a:hover {
  background-color: var(--brand-LightGray-100);
}
.faq-list li.on {
  border-bottom: 1.2px solid var(--util-footer);
}
.faq-list li.on > a {
  background-color: var(--white);
  color: var(--black);
}
.faq-list li > a .faq-title {
  padding-left: 1.8rem;
  position: relative;
}
.faq-list li > a .faq-title::before {
  content: "Q.";
  position: absolute;
  left: 0;
  color: var(--util-placeholder);
  font-size: var(--f18-size);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.27px;
  transition: 0.3s;
}
#faq .faq-list li > a .faq-title::before {
  color: var(--util-placeholder);
}
#faq .faq-list li.on > a .faq-title::before {
  color: var(--util-pointRed);
}
.faq-list li > a::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(/img/ico_select.svg) no-repeat center;
  position: absolute;
  right: 20px;
  top: auto;
  transition: 0.3s;
  opacity: 0.7;
}
.faq-list li.on > a::after {
  opacity: 1;
}
.faq-list li.on > a::after {
  transform: rotate(180deg);
}
#faq .faq-list li .answer {
  display: block;
  padding: 18px 20px 24px 20px;
  display: none;
}
#faq .faq-list .on .answer {
  border-top: 1px solid var(--util-stroke-color);
}
.sub .faq-list {
  border-top: 1px solid rgba(218, 220, 224, 0.8);
}
.sub .faq-list .answer {
  padding: 0 58px 30px 58px;
  color: var(--gray-40);
  display: none;
}
.sub .faq-list .answer strong {
  font-weight: 600;
  color: var(--util-강조);
}
.faq-list li .editor {
  padding: 1.5rem 1.8rem;
  background: var(--brand-LightBlue-80);
  border-radius: 10px;
}
.faq-list li .editor a {
  color: var(--cont-, #005fb7);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.section.terms-box {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.sub .section.terms-box {
  margin-top: 50px;
  margin-bottom: 50px;
}
.section.terms-box:last-of-type,
.sub .section.terms-box:last-of-type {
  margin-bottom: 0;
}
.terms-title {
  color: var(--gray-10);
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 0.8rem;
}
.terms-title + .txt-18 {
  margin-bottom: 0.5rem;
}
.terms-box .gray-box {
  background-color: var(--brand-LightGray-80);
  padding: 20px 18px;
  color: var(--gray-20);
  margin-top: 0.8rem;
}
.terms-box .num-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.terms-box .num-list > li {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terms-box .num-list li::before {
  font-size: var(--f18-size);
}
.terms-box .dot-list p {
  color: var(--gray-40);
}
.table-wrap.terms-table-wrap {
  margin-top: 0.8rem;
}
.terms-table-wrap table td {
  text-align: left;
}
.sub .terms-box.email-box {
  text-align: center;
  background-color: var(--brand-LightGray-80);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.sub .terms-box.email-box::before {
  width: 10vw;
  height: 10vw;
  max-width: 80px;
  max-height: 95px;
  content: "";
  display: block;
  margin: 0 auto;
  background: url(/img/ico_email.svg) no-repeat center;
  background-size: contain;
}
.sub .terms-box.email-box {
  margin-top: 0;
  margin-bottom: 0;
  padding: 3rem 0 2.5rem 0;
}
.sub .terms-box.email-box .terms-title {
  margin-bottom: 0;
}
.sub .terms-box.email-box .txt-18 {
  margin-bottom: 0;
  color: var(--gray-40);
}
@media screen and (max-width: 1700px) {
  #header .inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 0;
  }
  #header #sitemap_menu .inner {
    padding-left: 0;
  }
  #footer {
    padding: 2rem 20px;
  }
  #footer .flex-box,
  #footer .footer-menu {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  #footer .footer-menu:not(.sns) > li > a {
    display: block;
    margin-bottom: 1rem;
  }
  #footer .address {
    gap: 0.5rem;
  }
  #footer .footer-logo {
    position: absolute;
    top: auto;
    left: 0;
  }
  #footer .footer-menu {
    align-items: end;
  }
  #footer .footer-menu.sns {
    flex-direction: row;
    align-items: end;
    justify-content: start;
    margin-top: 2rem;
  }
  #footer .copy {
    font-size: var(--f14-size);
    line-height: 145%;
  }
  #main_visual .pagination,
  #main_visual .text-sect {
    padding-left: 80px;
    padding-right: 20px;
    width: 100%;
    height: fit-content;
  }
  #main_visual .hover-box-list {
    width: calc(100% - 150px);
  }
  #main_visual .pagination {
    justify-content: start;
  }
  #header .logo i {
    margin: 0;
  }
  #cases {
    padding-bottom: 80px;
  }
  #cases .inner {
    width: calc(100% - 20px);
    margin: 0 20px;
    padding: 4rem 0 4rem 4rem;
  }
  #sns .splide__arrow {
    display: none;
  }
}
@media screen and (max-width: 1620px) {
  #footer .inner {
    padding-left: 0;
    padding-right: 0;
  }
  .inner,
  .sub .inner,
  .sub .navi-sect,
  .sub-page-navi-sect .inner,
  .sub.industrial-solar .cont .inner,
  .sub.industrial-support .cont .inner,
  .sub.solar-asset .cont .inner,
  .title-sect.inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  #main_visual .hover-box-list > li .cont::before {
    margin-bottom: 0.5rem;
  }
  #main_visual .hover-box-list .cont,
  #main_visual .swiper .hover-box-list.cctv .cont {
    padding: 1.2rem;
  }
  #main_visual .hover-box-list.link > li:hover a::after {
    height: 1.5rem;
  }
  #main_visual .hover-box-list.cctv .cont::after,
  #main_visual .hover-box-list.cctv .cont:hover::after {
    width: 3rem;
    height: 3rem;
    background-size: 100%;
  }
  .sub .sect-tit.inner::before {
    left: 15px;
  }
  .sub.view .cont {
    padding-top: 150px;
  }
  .quotes::after,
  .quotes::before {
    width: 2rem;
  }
  .sub .navi-sect {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .sub .esg-list header {
    max-width: 120px;
    max-height: 120px;
  }
  .sub .esg-list::before {
    bottom: -1140px;
  }
  .sub.greeting .text-sect {
    max-width: none;
    width: 50%;
  }
  .sub .img-list > li .img-sect,
  .sub .img-list > li .text-sect {
    width: 50%;
  }
  .sub.portfolio select.region,
  .sub.portfolio.install-cases select.region {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 1460px) {
  #header .logo i,
  #header.on .logo i,
  #header.wh .logo i {
    margin-right: 2rem;
    width: 160px;
    height: 80px;
  }
  #header #gnb_menu .depth01 > li > a {
    padding: 1.8rem 0.8rem;
  }
  #header #gnb_menu .depth02 > li.last a {
    display: none;
  }
  #header #gnb_menu .depth02 {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.8rem;
    gap: 30px;
  }
  #header .sitemap-btn i {
    width: 80px;
    height: 80px;
  }
  body.index #header .sitemap-wrap .sitemap-btn .bar {
    width: 80px;
    height: calc(100vh - 80px);
  }
  #header.on::before {
    top: 80px;
  }
  #header #gnb_menu .depth02 > li.last a {
    width: 250px;
  }
  #main_visual .hover-box-list {
    width: calc(100% - 160px);
    left: 80px;
  }
  .sub .bg-sect {
    height: 400px;
  }
  .sub.industrial-solar.power-business .step-list div:has(.step) {
    width: 180px;
  }
  .sub.industrial-solar.power-business .step-list .step {
    max-width: 180px;
    max-height: 180px;
  }
  .sub.industrial-solar.power-business .step-list li::after {
    width: 3rem;
    height: 180px;
    background-size: 3rem;
  }
  .sub.industrial-solar.power-business .step-list li {
    width: calc(180px + 3rem);
  }
  .fix-btns {
    right: 20px;
    bottom: 20px;
  }
  .btn-floating.on {
    width: 140px;
  }
  .btn-floating,
  .btn-floating button,
  .top-btn {
    width: 40px;
    height: 40px;
  }
}
@media screen and (max-width: 1200px) {
  #main_visual .slide-btn,
  .index .pagination .swiper-button-next,
  .index .pagination .swiper-button-prev {
    width: 40px;
    height: 40px;
  }
  .index .keyword {
    margin-bottom: 0.8rem;
  }
  .sub .bg-sect {
    height: 300px;
  }
  .sub.group-info .counter-sect {
    gap: 0;
    padding: 0 3rem;
  }
  .sub.group-info .count {
    padding: 0;
    gap: 1rem;
  }
  .sub.group-info .count::before {
    width: 60px;
    height: 60px;
  }
  .sub.industrial-solar.esg .step-list .step {
    max-width: 180px;
    max-height: 180px;
  }
  .step-list-box.line li::after {
    width: 60px;
  }
  .sub.industrial-solar.power-business .step-list .step,
  .sub.industrial-solar.power-business .step-list div:has(.step),
  .sub.industrial-solar.power-business .step-list li,
  .sub.industrial-solar.power-business .step-list-box .step-list {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    min-height: 4rem;
  }
  .sub.industrial-solar.power-business .step-list li {
    flex: none;
    flex-direction: column;
  }
  .sub.industrial-solar.power-business .step-list-box {
    gap: 0;
  }
  .sub.industrial-solar.power-business .step-list li::after {
    width: 100%;
    height: 40px;
    background-size: 40px;
    transform: rotate(90deg);
  }
  .sub-sticky-layout {
    gap: 40px;
  }
  .sub-sticky-layout > .img-sect {
    width: calc(45.83% - 40px);
  }
}
@media screen and (max-width: 1024px) {
  #header.on {
    height: 60px !important;
    box-shadow: none;
  }
  #header.on::before {
    top: 60px;
  }
  #header .logo i,
  #header.on .logo i,
  #header.wh .logo i {
    height: 60px;
  }
  #header.sitemap {
    z-index: 10005;
  }
  #header.sitemap .inner {
    background-color: var(--white);
  }
  #header.sitemap .logo i {
    background-image: url(/img/logo.svg);
  }
  #header #sitemap_menu.on {
    width: 100%;
  }
  #sitemap_menu .sitemap-list li:first-child > a {
    margin-top: 0;
  }
  #sitemap_menu .sitemap-list > li:first-child > a {
    margin-top: 60px;
  }
  #sitemap_menu .sitemap-list .depth02 li.on:has(.depth03) a::before,
  #sitemap_menu .sitemap-list .depth02 li:has(.depth03) a::before,
  #sitemap_menu .sitemap-list > li.on:has(.depth02) > a::before,
  #sitemap_menu .sitemap-list > li:has(.depth02) > a::before {
    display: none;
  }
  #sitemap_menu .sitemap-list > li {
    justify-content: start;
    flex-direction: row;
  }
  #sitemap_menu .sitemap-list .depth02 > li {
    flex-direction: column;
  }
  #header #sitemap_menu .inner {
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    backdrop-filter: none;
  }
  #sitemap_menu .sitemap-list {
    padding-left: 0;
    position: relative;
  }
  #sitemap_menu .sitemap-list:not(:has(li.on)) > li:first-child .depth02 {
    display: flex;
  }
  #sitemap_menu .sitemap-list::before {
    content: "";
    background-color: var(--white);
    width: 170px;
    height: calc(100vh - 60px);
    position: absolute;
    left: 0;
    top: 60px;
  }
  #sitemap_menu .sitemap-list > li > a {
    width: 170px;
    margin-top: 0;
    display: flex;
    padding: 18px 0 18px 20px;
    align-items: flex-start;
    align-self: stretch;
    color: var(--gray-80);
    font-size: var(--f17-size);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.51px;
  }
  #sitemap_menu .sitemap-list:not(:has(li.on)) > li:first-child > a,
  #sitemap_menu .sitemap-list > li.on > a {
    color: var(--brand-red);
  }
  #sitemap_menu .sitemap-list .depth02 {
    border-left: 1px solid var(--brand-LightGray-80);
    background: radial-gradient(
      174.54% 62.83% at 50% 37.17%,
      rgba(255, 255, 255, 0.95) 0,
      rgba(255, 255, 255, 0.99) 100%
    );
    backdrop-filter: blur(5px);
    color: var(--gray-80);
    font-size: var(--f17-size);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    position: absolute;
    left: 170px;
    top: 60px;
    width: calc(100% - 170px);
    display: block;
    padding-left: 0;
  }
  #sitemap_menu .sitemap-list .depth03 {
    position: static;
    height: fit-content;
    padding-left: 0;
  }
  #header #sitemap_menu .inner:has(.privacy-list) {
    padding: 0;
  }
  #header #sitemap_menu .privacy-list,
  #sitemap_menu .sitemap-list .depth02,
  #sitemap_menu .sitemap-list .depth03 {
    display: none;
  }
  #sitemap_menu .sitemap-list .depth02 > li > a {
    padding: 15px 16px;
  }
  #sitemap_menu .sitemap-list .depth02 > li > a:active,
  #sitemap_menu .sitemap-list .depth02 > li > a:focus,
  #sitemap_menu .sitemap-list .depth02 > li > a:hover {
    color: var(--brand-red);
  }
  #sitemap_menu .sitemap-list .depth02 > li.on > a {
    background-color: #fff;
  }
  #sitemap_menu .sitemap-list .depth03 > li > a {
    padding: 10px 24px;
    font-size: var(--f16-size);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  #sitemap_menu .sitemap-list .depth03 > li:last-child > a {
    padding-bottom: 1rem;
  }
  #sitemap_menu .sitemap-list .depth02 > li:has(> .depth03) > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #sitemap_menu .sitemap-list .depth02 > li:has(> .depth03):first-child > a {
    padding-top: 18px;
  }
  #sitemap_menu .sitemap-list .depth02 > li:has(> .depth03) > a::after {
    content: "more";
    text-indent: -999em;
    display: block;
    width: 1rem;
    height: 1rem;
    background: url(/img/sub-navi-arrow.svg) no-repeat center;
    opacity: 0.3;
    transition: 0.3s;
  }
  #sitemap_menu .sitemap-list .depth02 > li.on:has(> .depth03) > a::after {
    opacity: 1;
    transform: rotate(180deg);
  }
  #sitemap_menu .sitemap-list .depth02 > li.on:has(> .depth03) > a::after {
    opacity: 1;
    transform: rotate(180deg);
  }
  #sitemap-menu .sitemap-list > li.on > a {
    font-weight: 700;
    color: var(--color-white);
  }
  #sitemap_menu .sitemap-list .on .depth02 {
    display: block;
  }
  .tab-br {
    display: none;
  }
  #header .sitemap-btn i {
    width: 60px;
    height: 60px;
  }
  body.index #header .sitemap-wrap .sitemap-btn .bar {
    display: none;
  }
  .index .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .index .section .text-sect {
    padding-bottom: 50px;
  }
  #main_visual .hover-box-list {
    display: none;
  }
  #main_visual .pagination,
  #main_visual .text-sect {
    padding-left: 20px;
    top: 60%;
    transform: translate(0, -50%);
  }
  #main_visual .pagination {
    top: calc(60% + 160px);
  }
  #awards .awards-card {
    width: 360px;
    min-height: 180px;
    padding: 1.5rem;
    gap: 1rem;
    margin-right: 30px;
  }
  #awards .awards-card .cate {
    font-size: var(--f14-size);
  }
  #cases .inner {
    padding: 3rem 0 3rem 3rem;
  }
  #cases .counter-sect {
    gap: 1rem;
  }
  #cases .counter-sect .count {
    width: 150px;
  }
  #client .flow-sect div {
    gap: 20px;
    margin-bottom: 1rem;
  }
  #client .flow-sect .bottom {
    margin-bottom: 0;
  }
  .flow-sect div > img {
    width: 160px;
    height: 80px;
  }
  .count .num {
    align-items: baseline;
  }
  .sub-title-layout {
    flex-direction: column;
  }
  .sub-title-layout .page-title,
  .sub-title-layout .sect-cont,
  .sub-title-layout .sect-tit {
    width: 100%;
    padding-bottom: 1.5rem;
  }
  .sub-title-layout .page-title {
    gap: 0.5rem;
  }
  .sub-title-layout .page-title::before {
    width: 4px;
  }
  .sub .cont {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .sub .cont:has(header.center) {
    padding-top: 70px;
  }
  .sub header.center,
  .sub-title-layout + .sect-cont.infograp-style-01 {
    margin-bottom: 50px;
  }
  .sub .section,
  .sub-title-layout + .sect-cont {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .gray,
  .sub .sect-cont.gray,
  .sub .section.gray {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .sub.self-use .tab-cont {
    padding-top: 50px;
  }
  .flex-box.infograp,
  .infograp .flex-box {
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--brand-LightGray-40);
  }
  .sub-title-layout + .sect-cont.infograp-style-01 .infograp {
    border-bottom: none;
    padding-bottom: 0;
  }
  .infograp-style-01 .flex-box.infograp {
    gap: 2.5rem;
  }
  .gray .flex-box.infograp,
  .sub.insurance .flex-box.infograp {
    padding-bottom: 0;
    border-bottom: none;
  }
  .flex-box.infograp .img-sect,
  .flex-box.infograp .text-sect,
  .flex-box.infograp > *,
  .infograp .flex-box > *,
  .infograp .flex-box > .img-sect {
    width: 100%;
    max-width: none;
    gap: 1.5rem;
  }
  .boxStyle1 {
    padding: 1.2rem;
  }
  .table-wrap .list,
  .table-wrap .list.two {
    gap: 1rem;
  }
  .table-wrap .list.two.reverse > li {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .solar-lease .table-wrap .list.two.reverse {
    gap: 1.5rem;
  }
  .solar-lease .table-wrap .list.two.reverse > li {
    flex-direction: column;
  }
  .table-wrap .list.two.link {
    gap: 2.5rem 1rem;
  }
  .sub .common-link {
    gap: 5px;
  }
  .sub .common-link::after {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
  }
  .table-wrap .list.two.link header + p {
    margin: 5px 0;
  }
  .list .boxStyle3,
  .list > * {
    width: calc((100% - 1rem) / 2);
  }
  main.sub.list > * {
    width: 100%;
  }
  .ai-oper-list,
  .list,
  .list:has(.boxStyle1),
  .partner-list,
  .table-wrap .list:has(.boxStyle3) {
    gap: 1rem;
  }
  .list .boxStyle1 {
    width: calc((100% - 1rem) / 2);
  }
  .boxStyle1:not(.boxStyle2) .icon,
  .boxStyle1:not(.boxStyle3) .icon {
    margin-top: 0;
  }
  .sub.self-use .list:has(.boxStyle3) {
    gap: 2rem;
    align-items: center;
  }
  .sub.self-use .list:has(.boxStyle3) .boxStyle3 {
    flex: auto;
  }
  .ai-oper-list > .ai-oper,
  .table-wrap .list.two > li {
    width: calc((100% - 1rem) / 2);
  }
  .partner {
    width: calc((100% - 2rem) / 3);
  }
  .support-layout ~ .sect-cont {
    padding-top: 0;
    padding-bottom: 0;
  }
  .sub.esg .table-wrap:has(.list):first-of-type {
    margin-top: 0;
  }
  .sub.esg .table-wrap:has(.list) {
    margin-top: 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .sub .sect-cont {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .sub .sect-tit,
  .sub .sect-tit-sect,
  .sub.power-business .sect-tit.small {
    margin-bottom: 1rem;
  }
  .sub .sect-tit.small {
    margin-bottom: 2rem;
  }
  .sub.solar-lease .list.gallery {
    margin-top: 2rem;
  }
  .sub.solar-lease .list.gallery > li img {
    transform: scale(1);
  }
  .sub .infograp-style-01 .text-sect > div,
  .sub .infograp-style-01 .text-sect > div:first-of-type {
    padding: 1.5rem;
    padding-top: 1rem;
  }
  .sub .infograp-style-01 .text-sect > div,
  .sub .infograp-style-01 .text-sect > div:first-of-type {
    gap: 1rem;
  }
  .quotes::after,
  .quotes::before {
    width: 1.5rem;
  }
  .sub header:has(.quotes) {
    gap: 0.5rem;
  }
  #gnb_menu {
    display: none;
  }
  .flag,
  .flag.popup,
  .info-txt,
  .popup-overlay.portfolio .more,
  .tag {
    font-size: var(--f15-size);
  }
  .flag {
    padding: 4px 6px;
    font-size: var(--f14-size);
  }
  .flag.popup {
    padding: 2px 9px;
  }
  ul.info {
    gap: 4px;
  }
  .step-list {
    flex-direction: column;
  }
  .step-list-box {
    padding: 1rem;
  }
  .step-list li {
    width: 100%;
    flex-direction: column;
  }
  .step-list li::after,
  .step-list-box .step-list:first-of-type li:last-child::after,
  .step-list-box .step-list:last-child li:nth-child(1)::after,
  .step-list-box .step-list:last-of-type li:after,
  .sub.support .step-list-box .step-list:last-of-type li:after,
  .support .step-list li::after {
    display: block;
    transform: rotate(90deg);
    background-size: 2.5rem;
  }
  .sub.support .step-list-box .step-list:first-of-type li:last-child:after,
  .sub.support .step-list-box .step-list:last-of-type li:first-child::after {
    transform: rotate(90deg);
    content: "next";
    text-indent: -999em;
    display: block;
    width: 40px;
    height: 40px;
    background: url(/img/ico_next.svg) no-repeat center;
    background-size: auto;
    opacity: 0.8;
    background-size: 2.5rem;
    position: static;
  }
  .step-list li:last-child::after,
  .step-list-box .step-list:last-of-type li:last-child:after {
    display: none;
  }
  .step-list .step {
    height: fit-content;
    max-width: none;
    max-height: none;
    width: 100%;
    padding: 0.5rem;
  }
  .support .step {
    min-height: 4rem;
    max-width: none;
    max-height: none;
  }
  .step-list li::after {
    content: "next";
    text-indent: -999em;
    display: block;
    width: 60px;
    height: 60px;
    background: url(/img/ico_next.svg) no-repeat center;
    background-size: auto;
    opacity: 0.8;
  }
  .sub.greeting .visual {
    height: 100vh;
  }
  .sub.greeting .visual .title-sect {
    gap: 2rem;
    padding-top: 2rem;
  }
  .sub.greeting .sect-cont.flex-box {
    flex-direction: column;
  }
  .sub.greeting .text-sect {
    width: 100%;
    gap: 1rem;
    margin-top: 60px;
  }
  .sub.greeting .txt-18 {
    font-size: var(--f15-size);
  }
  .sub.group-info .counter-sect {
    padding: 0;
    flex-direction: column;
    gap: 2rem;
  }
  .sub.group-info .count {
    width: 100%;
    flex-direction: row;
    gap: 1rem;
  }
  .sub .count .counter,
  .sub .count span {
    margin-bottom: -3px;
    letter-spacing: -1px;
  }
  .sub.recruit .gray {
    padding: 40px 0;
  }
  .circle-list .circle {
    margin-left: -15px;
    font-size: var(--f16-size);
    padding: 1rem;
  }
  .circle-list .circle br {
    display: none;
  }
  .circle-list .circle:nth-child(1) {
    margin-left: 0;
  }
  .recruit-list a,
  .talent-list > li {
    padding: 1.3rem 0;
  }
  .talent-list > li {
    padding-left: 3.5rem;
  }
  .talent-list .list-cont {
    width: calc(100% - 20vw);
    padding-right: 5rem;
  }
  .talent-list .list-cont br {
    display: none;
  }
  .root_daum_roughmap .wrap_map {
    height: 250px !important;
  }
  .sub.location .common-btn {
    width: 100%;
  }
  .sub.location .flex-box > :first-child {
    width: calc(40% - 25px);
  }
  .sub.location .flex-box > :last-child {
    width: calc(60% - 25px);
  }
  .popup-overlay.ai-oper {
    width: calc(100% - 40px);
  }
  .popup-overlay.ai-oper .text-sect {
    padding: 2rem;
    gap: 1rem;
  }
  .popup-overlay.portfolio,
  .popup-overlay.privacy {
    padding: 1.5rem;
  }
  .popup-overlay.portfolio {
    padding-bottom: 0;
  }
  .popup-overlay.portfolio .summary {
    gap: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .popup-overlay.ai-oper .title {
    padding-bottom: 1rem;
  }
  .popup-overlay.portfolio .summary > .img-sect {
    width: calc(40% - 1rem);
  }
  .popup-overlay.portfolio .summary > .text-sect {
    width: calc(60% - 1rem);
  }
  .popup-overlay.portfolio .title-sect {
    margin-bottom: 1rem;
  }
  .popup-overlay.ai-oper .img-sect,
  .popup-overlay.ai-oper .text-sect {
    width: 50%;
  }
  .popup-overlay.portfolio > .info {
    padding-bottom: 1rem;
  }
  .popup-overlay.portfolio .title-sect ul.info {
    gap: 4px 0;
    font-size: var(--f13-size);
  }
  .popup-overlay.portfolio .title-sect ul.info * {
    font-size: var(--f13-size);
  }
  .info-txt {
    padding: 0.6rem 0;
  }
  .popup-overlay.portfolio.on .more {
    margin-top: -50px;
  }
  .popup-overlay.portfolio .more::after {
    background-size: 1.2rem;
  }
  .popup-overlay.ai-oper .btn-popup-close,
  .popup-overlay.portfolio .btn-popup-close,
  .popup-overlay.privacy .btn-popup-close {
    top: 1.5rem;
    right: 1.5rem;
    background-size: 1.2rem;
  }
  .popup-overlay.portfolio.on .btn-popup-close {
    margin: 0.5rem;
    margin-top: 0;
    width: 3rem;
    height: 3rem;
    top: -3rem;
  }
  .popup-overlay.portfolio .detail {
    max-height: 760px;
    padding: 1.5rem;
  }
  .table-wrap {
    width: 100%;
    margin-top: 2rem;
  }
  .sub .tab-cont .table-wrap:first-of-type {
    margin-top: 1rem;
    gap: 1.5rem;
  }
  .sub.patent .table-wrap .list,
  .sub.portfolio .table-wrap .list,
  .sub.power-business .table-wrap .list,
  .table-wrap .list {
    gap: 30px;
  }
  .table-wrap .list > li {
    width: calc((100% - 60px) / 3);
  }
  .table-wrap .list.social-media > li > a {
    border-radius: 7.5px;
  }
  .table-wrap .list.social-media .img-sect {
    border-radius: 0 0 7.5px 7.5px;
    aspect-ratio: 1.7/1;
  }
  .table-wrap .list.social-media .list-cont {
    padding: 1rem;
  }
  .table-wrap .list .cate {
    display: flex;
    align-items: center;
  }
  .table-wrap .list .cate span {
    font-size: var(--f12-size);
  }
  .table-wrap .list .cate::before {
    border-radius: 3px;
  }
  .title-sect.inner {
    padding: 8rem 20px 2rem;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.2) 0,
      rgba(0, 0, 0, 0.25) 60%
    );
  }
  .sub.notice.view .cont {
    padding-top: 8rem;
  }
  .sub .visual.white .title-sect.inner,
  .sub.pr-support .visual .title-sect.inner,
  .sub.terms .visual .title-sect.inner {
    background: 0 0;
  }
  .sub .navi-sect {
    width: calc(100% - 40px);
    width: 100%;
  }
  .sub .page-navi.inner:not(.active),
  .sub .visual.white + .navi-sect .page-navi,
  .sub.pr-support .page-navi.inner {
    padding: 2px 20px;
    justify-content: start;
  }
  .sub .page-navi .nav-list > li > a,
  .sub .page-navi > li > a,
  .sub .page-navi > li > a:not(.home),
  .sub-page-navi li a {
    font-size: var(--f16-size);
    padding: 0.8rem;
  }
  .sub .page-navi .nav-list > li > a {
    font-size: clamp(15px, 0.8333vw, 16px);
    line-height: 1.4;
  }
  .sub-page-navi li a {
    align-items: start;
    justify-content: start;
  }
  .sub-page-navi li:first-child a {
    padding-left: 0;
  }
  .sub .page-navi > li > a::after {
    background-size: 20px;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
    right: 0;
  }
  .sub .page-navi .nav-depth02 > a::after {
    opacity: 0.7;
  }
  .sub .active .page-navi > li:first-child > a {
    padding-left: 0;
  }
  .sub .page-navi .home {
    width: 48px;
    height: 48px;
  }
  .sub .page-navi > li > a:not(.home) {
    padding: 1rem 1.5rem 1rem 0;
    min-width: 140px;
  }
  .sub .active .page-navi > li > a:not(.home) {
    padding-left: 0.5rem;
    min-width: auto;
    width: fit-content;
    justify-content: start;
    color: var(--gray-60);
  }
  .sub .active .page-navi > li.nav-depth03 > a {
    overflow-wrap: anywhere;
  }
  .sub .active .page-navi > li:nth-child(2) > a {
    color: var(--gray-10);
    font-weight: 600;
    padding-left: 0;
    padding-right: 1.5rem;
  }
  .sub .active .page-navi > li:nth-child(2) > a::after {
    right: 0;
  }
  .sub .active .page-navi > li > a {
    line-height: 1.4;
  }
  .sub .active .page-navi > li.on:nth-child(2) > a,
  .sub .active .page-navi > li.on > a:not(.home) {
    color: var(--util-pointRed);
  }
  .sub .page-navi > li:first-child {
    display: none;
  }
  .sub .page-navi > li {
    width: fit-content;
  }
  .sub .page-navi:has(.nav-depth03) > li {
    flex: 0 1 33.3%;
  }
  .sub .page-navi .nav-list {
    width: 100%;
    width: fit-content;
    min-width: 120px;
    left: 0;
  }
  .notice-cont.no-txt {
    font-size: var(--f18-size);
    padding: 150px 0 150px;
  }
  .table-wrap .list .img-sect {
    margin-bottom: 0.6rem;
    border-radius: 7.5px;
  }
  .table-wrap .list .board-title {
    font-size: var(--f18-size);
    line-height: unset;
  }
  .table-wrap .list.social-media .board-title {
    font-size: var(--f17-size);
    min-height: 3.1875rem;
  }
  .sub .common-btn {
    width: 100%;
    font-size: var(--f16-size);
    padding: 1.2rem 0;
  }
  .sub .tab-btn {
    font-size: var(--f14-size);
  }
  .sub .download-btn p {
    font-size: var(--f16-size);
  }
  .sub .tab-btn {
    width: fit-content;
    padding: 0.6rem 0.8rem 0.6rem 1rem;
  }
  .sub .download-btn {
    padding: 0.6rem 0.6rem 0.6rem 1.2rem;
  }
  .sub .download-btn p::after {
    margin-left: 5px;
  }
  .sub.view .back-btn {
    width: 36px;
    height: 36px;
    font-size: var(--f16-size);
    margin-bottom: 1.5rem;
  }
  .sub.view .back-btn::before {
    width: 36px;
  }
  .sub.view .back-btn:hover {
    width: 110px;
  }
  main.view .title-box {
    padding-bottom: 30px;
  }
  main.view .notice-cont .file-area a::after {
    display: none;
  }
  main.view .notice-cont .file-area .file-cont {
    width: 100%;
    flex-direction: column;
  }
  main.view .link-box {
    margin-bottom: 2rem;
  }
  main.view .link-box li {
    padding: 0.8rem 0;
    gap: 1rem;
  }
  main.view .link-box li a,
  main.view .link-box li strong {
    font-size: var(--f15-size);
  }
  main.view .link-box li strong::before {
    width: 15px;
    background-size: 20px;
  }
  .sub.faq .faq-list li > a {
    padding: 24px 16px 24px 20px;
    padding-right: 3rem;
  }
  .faq-list li > a {
    font-size: var(--f18-size);
  }
  .sub .faq-list li > a {
    padding: 20px 12px 20px 12px;
    padding-right: 3rem;
  }
  .faq-list li > a .faq-title::before {
    font-size: var(--f18-size);
  }
  #faq .faq-list li .answer {
    padding: 1rem 0;
  }
  .faq-list li .editor {
    padding: 1.5rem;
  }
  .sub .faq-list .answer {
    padding: 20px 12px 20px 12px;
    padding-top: 0;
  }
  .sub.esg .table-wrap .list:not(.esg-list),
  .table-wrap .list:has(.phone) {
    gap: 30px 60px;
  }
  .sub.esg .table-wrap .list:not(.esg-list) {
    gap: 1rem;
  }
  .sub.esg .table-wrap .list:not(.esg-list) li {
    width: calc(50% - 0.5rem);
  }
  .phone:nth-child(3n)::after {
    display: block;
  }
  .phone:nth-child(2n)::after {
    display: none;
  }
  .step-list-box:has(.step-list) {
    width: 100%;
    border-radius: 4rem;
    padding: 1.5rem;
  }
  .support .step-list-box:has(.step-list) {
    gap: 0;
  }
  .sub.industrial-solar.esg .step-list .step {
    max-width: none;
    max-height: none;
    padding: 1rem;
  }
  .sub.esg .step-list-box.line li::after {
    background-size: 2rem;
  }
  .sub.industrial-solar.esg .step-list .step br,
  .sub.support .step-list-box .step-list:last-of-type li:last-child:after {
    display: none;
  }
  .sub .img-list {
    gap: 60px;
  }
  .sub .img-list > li {
    gap: 40px;
  }
  .sub .img-list .sect-tit.small {
    margin-bottom: 0.5rem;
  }
  .boxStyle3,
  .list .boxStyle3 {
    padding: 1.5rem 2rem;
    gap: 1rem;
  }
  .sub .tab-list.small li a {
    padding: 0.7rem 1.2rem;
    min-width: 90px;
  }
  .sub.install-status .tab-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sub.industrial-solar.install-status .intall-map-sect {
    margin-left: 2.5rem;
  }
  .sub.industrial-solar.install-status .intall-map-sect::after {
    margin-top: 1rem;
    font-size: 14px;
  }
  .ai-oper-list > .ai-oper {
    padding: 1.5rem 0 2rem 0;
    gap: 1rem;
  }
  .ai-oper-list > .ai-oper::after {
    height: 150px;
  }
  .history-sect {
    height: 50vh;
  }
  .history-cont {
    padding-bottom: 100px;
  }
  .sub.group-history .line {
    top: calc(50vh + 10px);
    height: calc(100% - 50vh - 10px);
  }
  .sub.group-history .line::before {
    width: 0.5rem;
    height: 0.5rem;
    left: calc(50% - 0.25rem);
  }
  .sub.group-history .panel.active .history-cont > ::before {
    animation: historyOnMob ease 0.5s forwards;
  }
  .mov .swiper {
    margin: 0;
  }
  .mov .pagination {
    position: static;
    width: 100%;
    margin-top: 1rem;
  }
  .mov .slide-pagination li a {
    padding: 0.8rem 0;
    margin-left: 0;
  }
  .mov .slide-pagination li.swiper-pagination-bullet-active {
    border-width: 2px;
  }
  .dot-cont .txt-30 {
    font-size: var(--f18-size);
  }
  .dot-cont .txt-24 {
    width: 100%;
  }
  .dot-cont {
    margin: 0;
    gap: 2rem;
  }
  .act .dot-cont {
    margin-top: -1.5rem;
  }
  .sub .terms-box.email-box {
    padding: 2.5rem 1rem;
    gap: 1.5rem;
  }
  .sub .terms-box.email-box::before {
    width: 15vw;
    height: 15vw;
  }
  .sub .terms-box.email-box .terms-title + .txt-18 {
    font-size: var(--f15-size);
  }
  .blue-box {
    padding: 1.5rem;
  }
  .sub .infograp-style-01 .sect-tit,
  .sub.ai-operation-maintenance .sub-title-layout + .sect-cont .sect-tit {
    margin-bottom: 1.5rem;
  }
}
@media screen and (max-width: 840px) {
  .sub.industrial-solar.install-status .flex-box > :first-child,
  .sub.industrial-solar.install-status .flex-box > :last-child {
    width: 100%;
  }
  .sub.industrial-solar.install-status .flex-box > :first-child {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .sub.industrial-solar.install-status .intall-map-sect {
    margin-left: 0;
    width: 100%;
  }
  .sub.industrial-solar.install-status .intall-map-sect svg {
    margin-left: 3rem;
  }
  .sub .tab-list.small {
    gap: 7px;
  }
  .sub.industrial-solar.install-status .flex-box {
    position: relative;
  }
  .sub.install-status .tab-list.small {
    padding: 0;
    margin-top: 2rem;
  }
  .sub.industrial-solar.install-status .table-wrap {
    margin: 1rem 0;
  }
  .recruit-list.install li:first-child a {
    border-top: 1px solid rgba(206, 213, 218, 0.4);
  }
  .recruit-list.install a {
    padding: 1.25rem 0;
  }
  .sub .install-status-header .filter,
  .sub .install-status-header .num,
  .txt-18 {
    font-size: 16px;
  }
  .sub.industrial-solar.install-status .intall-map-sect::before {
    color: var(--gray-50);
    display: block;
    margin: 0 0 2rem 0;
    padding: 0.5rem 0;
    width: calc(100% + 40px);
    background-color: var(--brand-LightGray-60);
    margin-left: -20px;
  }
  .sub.industrial-solar.install-status .intall-map-sect::after {
    display: none;
  }
  .recruit-list.install ul.info {
    gap: 0;
  }
  .recruit-list.install .tag {
    font-size: 13px;
  }
  .recruit-list.install .img-sect {
    width: 40%;
    border-radius: 6px;
  }
  .recruit-list.install .text-sect {
    gap: 6px;
  }
  .recruit-list.install header {
    font-size: 20px;
  }
  .history-cont .img-sect,
  .sub.group-history .panel:nth-child(odd) .txt-sect {
    padding-right: 8%;
  }
  .history-cont .txt-sect,
  .sub.group-history .panel:nth-child(odd) .img-sect {
    padding-left: 8%;
  }
  .history-cont .img-sect .card {
    max-width: 80%;
  }
  aside .download-sect {
    gap: 4%;
  }
  .history-cont .history-txt {
    font-size: var(--f18-size);
  }
  .history-cont .img-sect .txt {
    font-size: var(--f14-size);
  }
  .sub.solar-lease .list.gallery > li {
    flex: auto;
  }
  .sub.prepaid-cost .check-list-box {
    gap: 1rem;
  }
  .sub.prepaid-cost .check-list-box::before {
    flex: 1;
  }
}
@media screen and (max-width: 768px) {
  .txt-18 {
    line-height: 1.5;
  }
  .sub .cont,
  .sub.portfolio .cont,
  .sub.pr-support .cont {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #footer .footer-menu.sns {
    gap: 5px;
  }
  .index .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #main_visual .visual-title {
    font-weight: 600;
  }
  #main_visual .pagination {
    width: 100%;
    bottom: 30px;
    flex-direction: column;
    gap: 40px;
    align-items: start;
    justify-content: end;
  }
  #main_visual .pagination .flex-box:has(.swiper-button-prev) {
    width: 100%;
  }
  #main_visual .pagination,
  #main_visual .text-sect {
    transform: none;
    top: auto;
  }
  #main_visual .text-sect {
    bottom: 180px;
  }
  #main_visual .swiper-scrollbar {
    width: 165px;
    margin: 0;
  }
  #awards .awards-card .card-title {
    display: block;
    min-height: 4.5rem;
    font-size: 19px;
  }
  #cases {
    padding-top: 0;
  }
  #cases::before {
    display: none;
  }
  #cases .inner {
    width: 100%;
    margin-left: 0;
    padding: 60px 20px;
    border-radius: 0;
  }
  #cases .text-sect {
    text-align: center;
  }
  #cases .counter-sect {
    gap: 50px;
  }
  #cases .counter-sect .count {
    width: 100%;
    align-items: center;
  }
  #cases .count .title {
    color: var(--gray-90);
    font-size: var(--f14-size);
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.14px;
  }
  #cases .count .counter {
    font-size: 36px;
    letter-spacing: -1.44px;
  }
  #sns .sns-filter {
    font-size: 16px;
    padding: 14px 20px;
    gap: 8px;
    width: 100%;
    overflow: auto;
    border: none;
    border-radius: 0;
  }
  #sns .sns-filter button::before {
    width: 30px;
    height: 30px;
  }
  #sns .sns-filter button {
    display: flex;
    padding: 5px 15px;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    border: 1px solid var(--util-stroke-color);
  }
  #sns .sns-filter button::after {
    display: none;
  }
  #sns .splide__track {
    margin-top: 40px;
  }
  #sns .splide__slide .img-sect {
    border-radius: 8px;
  }
  #sns .splide__slide::before {
    width: 44px;
    height: 44px;
    top: 0;
    left: 0;
    background-size: 2.4rem;
  }
  #sns .splide__slide .title {
    font-size: 16px;
    margin-top: 0.8rem;
  }
  #news .swiper-container {
    height: fit-content;
  }
  #news .pagination.next2 {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  #news .pagination.next3 {
    right: 20px;
    gap: 0.5rem;
  }
  #news .swiper-slide {
    scale: 0.9;
  }
  .mob-image.hidden::after {
    display: block;
    bottom: auto;
    top: 10px;
  }
  .pc-br,
  .sub .pc-only,
  img.pc {
    display: none;
  }
  .mob-br,
  .mob-only,
  img.mob {
    display: block;
  }
  .flag,
  .flag.popup,
  .info-txt,
  .tag {
    font-size: var(--f14-size);
    color: var(--gray-60);
  }
  .flag.popup {
    color: var(--gray-10);
  }
  .sub header.center {
    padding-bottom: 50px;
  }
  .sub .tab-list li a {
    font-size: var(--f16-size);
    padding: 1rem 1.5rem;
  }
  .sub.industrial-support .list > li,
  .table-wrap .list > li {
    width: calc((100% - 30px) / 2);
  }
  .sub.esg .download-btn {
    margin-top: 1rem;
  }
  .sub .download-btn {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .sub .download-btn p::after {
    background-size: 2rem;
  }
  .sub .esg-list li {
    padding: 0;
  }
  .table-search {
    gap: 15px;
    flex-direction: column;
    align-items: start;
  }
  .search-box input,
  .table-search .search-box {
    font-size: var(--f16-size);
    width: 100%;
    min-width: auto;
  }
  .table-pagination {
    margin-top: 50px;
  }
  .notice-cont.no-txt {
    font-size: var(--f16-size);
  }
  .support-layout {
    gap: 2rem;
    margin: 2rem 0;
    margin-bottom: 0;
    height: fit-content;
  }
  .common-banner-sect {
    padding-top: 2rem;
  }
  .common-banner {
    padding: 2rem 1.5rem;
    border-radius: 8px;
  }
  .common-banner .txt-26 {
    font-size: var(--f20-size);
    line-height: 1.2;
  }
  .common-banner .txt-18 {
    font-size: var(--f14-size);
  }
  .section:has(.support-layout) .bg-sect {
    height: 150px;
  }
  .support-layout .sect-cont,
  .support-layout .tit-txt,
  .support-layout .tit-txt .txt-20 {
    width: 100%;
  }
  .support-layout .sect-cont {
    margin-top: 0;
  }
  .support-layout .tit-txt .txt-20 {
    padding: 0.8rem;
    font-size: var(--f16-size);
  }
  .dot-text {
    margin-bottom: 2rem;
  }
  .talent-list > li {
    padding-left: 2.5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
  }
  .talent-list > li::before {
    font-size: var(--f14-size);
    top: 1rem;
  }
  .talent-list .list-cont {
    width: 100%;
    padding-right: 0;
    gap: 0.3rem;
  }
  .talent-list img {
    width: 11rem;
    position: static;
    opacity: 1;
  }
  .sub.location .flex-box {
    flex-direction: column;
    gap: 1.2rem;
    position: relative;
    padding-bottom: 6rem;
    margin-bottom: 2rem;
  }
  .sub.location .page-title2 {
    border-bottom: 1px solid var(--util-stroke-color);
    padding-bottom: 1.2rem;
  }
  .sub.location .flex-box > :first-child,
  .sub.location .flex-box > :last-child {
    width: 100%;
    gap: 2rem;
  }
  .sub.location .common-btn {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .comp-box {
    margin-top: 0.5rem;
  }
  .comp-box.mob-only {
    display: flex;
  }
  .sub .comp-box {
    gap: 0.5rem;
  }
  .sub .gallery-cont > .comp-tit {
    width: 100%;
    height: fit-content;
  }
  .comp-box .comp-header br {
    display: none;
  }
  .comp-box .comp-header {
    border-radius: 5px;
    flex: auto;
    margin: 0;
    padding: 0.5rem;
    order: 1;
    width: 100%;
  }
  .comp-box .comp {
    width: 100%;
    padding: 0.8rem;
  }
  .comp-box.mob-only .comp {
    width: calc(50% - 0.25rem);
  }
  .comp-tit,
  .sub .comp-box .info-sect,
  .sub .comp-box.header .comp {
    padding: 0.8rem 0.5rem;
    justify-content: start;
    width: calc(50% - 0.25rem);
  }
  .sub .comp-box.header .comp-tit {
    justify-content: center;
  }
  .sub .comp-box .comp:first-of-type .info-sect div::after {
    width: 50px;
    padding: 0 0.5rem;
    left: calc(100% + 15px);
  }
  .comp-box {
    gap: 60px;
  }
  .table-wrap .list.gallery.more .cont-subtit {
    margin-bottom: 8px;
  }
  .gallery-cont,
  .gallery-cont:not(:has(> .txt-sect)) {
    padding: 0.8rem;
    padding-bottom: 0;
    gap: 0.8rem;
  }
  :not(.popup-overlay) .txt-sect .summary {
    padding-bottom: 0.8rem;
  }
  .sub.no-drill-waterproofing .comp-box:first-of-type,
  .sub.re100 .comp-box:first-of-type {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .sub.no-drill-waterproofing .comp-box ~ .comp-box:last-of-type .comp-tit,
  .sub.re100 .comp-box ~ .comp-box:last-of-type .comp-tit {
    display: flex;
  }
  .comp-box .info-txt {
    color: var(--gray-40);
  }
  .sub .check-list p,
  .sub .comp-box .info-txt {
    font-size: var(--f16-size);
    gap: 5px;
    line-height: 1.4;
  }
  .sub .check-list p::before,
  .sub .comp-box .info-txt::before {
    top: 3px;
  }
  .comp-box .info-txt .txt-16 {
    color: var(--gray-70);
    font-size: var(--f14-size);
    line-height: 1.3;
  }
  .comp-box .comp:first-of-type .info-sect div::after {
    width: 60px;
    padding: 0 0.8rem;
    font-size: var(--f14-size);
    font-weight: 500;
    color: var(--gray-40);
    background-color: transparent;
    left: calc(100% + 0.5rem);
  }
  .popup-overlay {
    max-width: calc(100% - 40px);
  }
  .popup-overlay.portfolio,
  .popup-overlay.privacy {
    width: 90vw;
    padding: 1rem;
    padding-top: 0.8rem;
  }
  .popup-overlay.portfolio .more,
  :not(.popup-overlay) button.more {
    padding: 0.5rem 0;
    font-size: var(--f15-size);
  }
  .popup-overlay.portfolio.on .more {
    margin-top: -40px;
  }
  .popup-overlay.portfolio .btn-popup-close,
  .popup-overlay.privacy .btn-popup-close {
    top: 0.8rem;
    right: 1rem;
    background-size: 1rem;
  }
  .popup-overlay.privacy .cont {
    padding: 0.8rem;
    margin-top: 1rem;
  }
  .popup-overlay.portfolio > .info {
    padding-bottom: 0.5rem;
    gap: 0;
  }
  .popup-overlay.portfolio .summary {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
  }
  .popup-overlay.portfolio .summary > .img-sect,
  .popup-overlay.portfolio .summary > .text-sect {
    width: 100%;
  }
  .popup-overlay.portfolio .title-sect {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .popup-overlay.portfolio .title,
  .popup-overlay.privacy header {
    font-size: var(--f20-size);
    font-size: 18px;
  }
  .popup-overlay.privacy header {
    padding-bottom: 0.6rem;
  }
  .popup-overlay.portfolio .summary > .img-sect {
    aspect-ratio: 2.8/1;
    margin-top: 4rem;
    border-radius: 7.5px;
  }
  .popup-overlay.portfolio .summary > .img-sect img {
    width: 100%;
    height: auto;
    box-shadow: none;
  }
  .info-txt {
    padding: 0.4rem 0;
  }
  .popup-overlay.portfolio .info-txt:last-child {
    border-bottom: none;
  }
  .info-txt strong {
    width: 4.5rem;
    padding-right: 1.5rem;
  }
  .info-txt p {
    width: calc(100% - 4.5rem);
  }
  .popup-overlay.portfolio .detail {
    padding: 1rem;
    height: 80vw;
    max-height: none;
  }
  .popup-overlay.portfolio.on .btn-popup-close {
    background-color: transparent;
    filter: invert(0);
    background-size: 55%;
    margin: 0;
    top: -90px;
    left: auto;
    right: 0;
    margin: 0;
  }
  .sub.view .cont {
    padding-top: 100px;
  }
  main.view .link-box {
    flex-direction: column;
    border-bottom-color: var(--util-stroke-color);
  }
  main.view .link-box li {
    width: 100%;
  }
  main.view .link-box li {
    border-top: 1px solid var(--util-stroke-color);
  }
  main.view .link-box li:last-child {
    flex-direction: row;
  }
  main.view .link-box li strong::before {
    display: none;
  }
  .faq-list li > a,
  .sub.faq .faq-list li > a {
    font-size: 18px;
    padding: 1.2rem 0.5em;
    padding-right: 2.5rem;
  }
  .faq-list li > a .faq-title {
    padding-left: 1.5rem;
  }
  .faq-list li > a .faq-title::before {
    font-size: var(--f17-size);
    top: 0;
    left: 0;
  }
  .faq-list li > a::after {
    right: 0;
  }
  .faq-list li .answer {
    padding: 1rem 0;
  }
  .faq-list li .editor {
    padding: 0.8rem;
  }
  ol.ms_process {
    display: flex;
    width: 100%;
    gap: 0 1rem;
  }
  ol.ms_process > li {
    flex: 1;
    width: calc(50% - 1rem);
  }
  ol.ms_process > li .deps1,
  ol.ms_process > li > ol > li {
    height: 5rem;
    padding: 0.5rem;
    font-size: var(--f16-size);
    border-radius: 8px;
  }
  ol.ms_process > li .deps1 > * {
    flex: none;
  }
  ol.ms_process li:has(.two) {
    height: calc(10rem + 30px);
  }
  ol.ms_process > li li:has(.dot-list) {
    flex-direction: column;
    gap: 5px;
  }
  ol.ms_process .dot-list {
    height: fit-content;
  }
  ol.ms_process .dot-list > p {
    font-size: var(--f14-size);
  }
  .sub.insurance .infograp header {
    font-size: var(--f16-size);
  }
  .sub .table-wrap .esg-list {
    padding-top: 50px;
  }
  .sub .esg-list::before {
    top: 20px;
    height: 3200px;
  }
  .sub .esg-list .text-sect,
  .sub .esg-list p {
    flex: auto;
  }
  .sub .img-list {
    gap: 3rem;
  }
  .sub .img-list > li,
  .sub .img-list > li:nth-child(even) {
    gap: 1rem;
    flex-direction: column;
  }
  .sub .img-list > li .img-sect,
  .sub .img-list > li .text-sect {
    width: 100%;
  }
  .sub .list.rec .txt-18.highlight {
    margin-bottom: 0.6rem;
  }
  .sub.power-business .table-wrap .list.rec {
    flex-direction: column;
    gap: 1.5rem;
  }
  .sub.power-business .table-wrap .list.rec > li {
    width: 100%;
  }
  .sub .calc-box {
    padding: 2.5rem 1.5rem;
  }
  .sub.industrial-solar .calc-box .inner {
    padding: 0;
  }
  .sub .calc-box .sect-tit {
    margin: 0;
  }
  .sub .calc-box .common-btn {
    min-width: auto;
    margin-top: 1.5rem;
  }
  .sub .calc-box.on .sect-tit {
    flex-direction: column;
  }
  .sub .calc-box .sect-tit::after {
    width: 50%;
    margin-top: 1rem;
  }
  .sub .calc-box.on .sect-tit::after {
    margin-top: 0;
  }
  .sub .calc-box .info-sect.gray .info-txt,
  .sub .calc-box.capacity .info-sect .flex-box {
    flex-direction: column;
    padding: 1rem 0;
  }
  .sub .calc-box.capacity .sect-tit {
    margin-bottom: 1rem;
  }
  .sub .calc-box.capacity .sect-tit > .flex-box {
    flex-direction: column;
    gap: 3rem;
    align-items: start;
  }
  .sub .calc-box.capacity .count {
    gap: 0;
    padding-bottom: 0;
  }
  .sub .calc-box.capacity .count .num,
  .sub .calc-box.capacity div:has(.num) {
    width: 100%;
  }
  .sub .calc-box .info-sect.gray .txt-sect p + span,
  .sub .calc-box .info-sect.gray span.txt-15 {
    font-size: 14px;
  }
  .sub .calc-box .info-sect.gray span.txt-15 {
    display: block;
    line-height: 140%;
    margin-top: 0.5rem;
  }
  .popup-overlay.ai-oper .popup-cont {
    flex-direction: column;
  }
  .popup-overlay.ai-oper .img-sect,
  .popup-overlay.ai-oper .text-sect {
    width: 100%;
  }
  .ai-oper-list {
    flex-direction: column;
  }
  .ai-oper-list > .ai-oper {
    width: 100%;
  }
  .ai-oper-list > .ai-oper::before {
    width: 4rem;
    height: 4rem;
  }
  .popup-overlay.ai-oper .img-sect {
    height: 180px;
  }
  .popup-overlay.ai-oper .img-sect img {
    width: auto;
    height: 80%;
  }
  .popup-overlay.ai-oper .btn-popup-close,
  .popup-overlay.portfolio .btn-popup-close {
    top: 1rem;
    right: 1rem;
  }
  .popup-overlay.ai-oper .text-sect {
    padding: 1.5rem;
  }
  .partner {
    width: calc((100% - 1rem) / 2);
  }
  .sub-sticky-layout {
    flex-direction: column;
    gap: 1rem;
  }
  .sub-sticky-layout .text-sect,
  .sub-sticky-layout > .img-sect {
    width: 100%;
  }
  .sub-sticky-layout > .img-sect {
    background-color: var(--brand-LightGray-80);
    text-align: center;
  }
  .sub-sticky-layout .text-sect {
    gap: 3rem;
    margin-top: 0;
  }
  .sub-sticky-layout .dot-text {
    margin-bottom: 1.5rem;
  }
  .sub-sticky-layout .dot-text:last-of-type {
    margin-bottom: 0;
  }
  .sub-sticky-layout > .img-sect img {
    width: 80%;
  }
  .history-cont {
    padding-bottom: 4rem;
  }
  .history-cont .history-txt {
    font-size: var(--f15-size);
    line-height: 1.4;
  }
  .flex-box:has(.bfpr-logo) {
    flex-direction: column;
  }
  .bfpr-logo {
    width: 200px;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .sub .before-after .flex-box {
    flex-direction: column;
  }
  .sub .before-after .img-sect {
    width: 100%;
  }
  .dot-cont {
    margin: 0;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
  }
  .act .dot-cont {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .dot-cont:last-child {
    margin-bottom: 0;
  }
  .sub.group-info .section.gray .inner {
    aspect-ratio: 1340/1230;
  }
  .gray #group_info_map,
  .gray.fadeInUp #group_info_map,
  .gray.fadeInUp .group-info-img {
    width: 72%;
    top: 61%;
    top: 68%;
    transform: translate(-50%, -50%) scale(1.2);
    transition: none;
  }
  .sub .section.terms-box {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .terms-box .gray-box {
    padding: 1rem;
    margin-top: 0.5rem;
  }
  .terms-box .num-list {
    gap: 5px;
  }
  .terms-title {
    font-size: 18px;
    margin-bottom: 0.5rem;
  }
  .popup-overlay.privacy .terms-title {
    font-size: 16px;
  }
  .popup-overlay.privacy .cont > p,
  .terms-box .gray-box .txt-18,
  .terms-box .num-list li::before,
  .terms-box .table-wrap table td,
  .terms-box .table-wrap table th,
  .terms-box .txt-18,
  .terms-title + .txt-18 {
    font-size: 15px;
  }
  .sub.prepaid-cost .check-list-box {
    flex-direction: column;
  }
  .sub.prepaid-cost .check-list,
  .sub.prepaid-cost .check-list-box::before {
    flex: auto;
    width: 100%;
  }
  .sub.prepaid-cost .check-list > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sub .check-list .txt-16 {
    font-size: var(--f14-size);
  }
  .sub.esg-sharing .quotes {
    gap: 1rem;
  }
}
@media screen and (max-width: 700px) {
  .table-wrap .list:has(.phone) {
    flex-direction: column;
  }
  .sub.prepaid-cost .phone {
    width: 100%;
    padding: 2rem 1rem;
    padding-bottom: 0;
  }
  .phone::after,
  .phone:nth-child(3n)::after {
    display: none;
  }
  .history-cont .txt-sect .box {
    top: 170px;
  }
}
@media screen and (max-width: 600px) {
  #ceo_name {
    width: 20vw;
  }
  .sub .tab-list,
  .sub-page-navi {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sub .tab-list.small li a {
    min-width: 4rem;
  }
  .sub .tab-list.small li a {
    padding: 0.5rem;
  }
  .sub .tab-list li a {
    min-width: 130px;
  }
  .list:has(.boxStyle1) > *,
  .sub.industrial-support .list > li,
  .sub.portfolio .table-wrap .list > li,
  .table-wrap .list.social-media > li,
  .table-wrap .list.two > li {
    width: 100%;
  }
  .sub .sub-sticky-layout .list > li {
    max-width: none;
  }
  .sub .calc-box:not(.on) .sect-tit.small::after {
    width: 70%;
  }
  aside .download-sect {
    padding-top: 50px;
    flex-direction: column;
    gap: 0.7rem;
  }
  .history-cont .img-sect .card {
    max-width: 90%;
  }
  .history-cont .img-sect .txt {
    font-size: var(--f13-size);
    line-height: 1.3;
  }
}
@media screen and (max-width: 500px) {
  .sub .page-navi .navi-depth03 {
    left: auto;
    right: 0;
  }
  #sitemap_menu .sitemap-list .depth02 > li > a {
    padding-right: 35px;
  }
  #sitemap_menu .sitemap-list .depth02 > li:has(> .depth03) > a::after {
    position: absolute;
    right: 12px;
  }
}
@media screen and (max-width: 403px) {
  .sub .active .page-navi > li > a:not(.home) {
    font-size: var(--f15-size);
  }
}
@media screen and (max-width: 400px) {
  .talent-list img {
    width: 8rem;
  }
  .sub.esg .table-wrap .list:not(.esg-list) li,
  .table-wrap .list > li {
    width: 100%;
  }
  .table-wrap .list {
    flex-direction: column;
    gap: 20px;
  }
  .sub.portfolio .table-wrap .list .flag {
    border-color: var(--brand-LightGray-40);
  }
  .table-wrap .list.social-media {
    gap: 25px;
  }
  .sub.group-history .tab-btn.download span {
    display: none;
  }
}