.sub-page .etc {
  padding-block: 10rem;
}

.sub-page .title-box {
  margin-top: 7.5rem;
}

.sub-page .title-box .title {
  color: var(--black);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.09rem;
}

.content section {
  margin-block: 7.5rem 12.5rem;
}

.img-box img {
  margin: 0 auto;
}

@media (width <=1024px) {
  .content section {
    margin-block: 3.75rem 6.25rem;
  }

  .sub-page .etc {
    padding-block: 5rem;
  }
}

/* -------------소개----------------- */

/* 위드는 */
.overview-wrap {
  overflow: hidden;
}

.overview-title-box {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.overview-title-box p {
  color: var(--black);
  text-align: center;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 150%;
}

.overview-title-box span {
  color: var(--colorffb);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 120%;
}

.overview-info-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8.75rem;
}

.overview-info-box.reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8.75rem;
}

.overview-info-box .overview-img-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 67.125rem;
  height: 44.6875rem;
  overflow: hidden;
  margin-top: 5.75rem;
}

.overview-info-box .overview-img-box .circle-box {
  position: absolute;
  left: 0;
  width: 93.75rem;
  height: 36.25rem;
  border-radius: 18.125rem;
  overflow: hidden;
}

.overview-info-box .overview-img-box .circle-box:nth-child(1) {
  top: 0;
  margin-left: -30.9375rem;
  background: url(/image/sub/img_overview01.jpg)no-repeat center / cover;
  z-index: 10;
}

.overview-info-box .overview-img-box .circle-box:nth-child(2) {
  margin-left: -27.1875rem;
  border: 1px solid var(--colorffb);
  z-index: 9;
}

.overview-info-box .overview-img-box .circle-box:nth-child(3) {
  bottom: 0;
  width: 75rem;
  margin-left: -27.1875rem;
  background: var(--mainColor20);
  z-index: 8;
}

.overview-info-box.reverse .overview-img-box .circle-box {
  left: auto;
  right: 0;
}

.overview-info-box.reverse .overview-img-box .circle-box:nth-child(1) {
  margin-right: -30.9375rem;
  background: url(/image/sub/img_overview02.jpg)no-repeat center / cover;
}

.overview-info-box.reverse .overview-img-box .circle-box:nth-child(2) {
  margin-right: -27.1875rem;
  border: 1px solid var(--color9ab);
}

.overview-info-box.reverse .overview-img-box .circle-box:nth-child(3) {
  margin-right: -27.1875rem;
  background: var(--color9ab20);
}



.overview-text-box .title {
  color: var(--mainColor);
  font-size: 4.875rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.09263rem;
}

.overview-info-box.reverse .overview-text-box .title {
  color: var(--color9ab);
}

.overview-info-box .bg-mark-box>div {
  top: -40%;
  right: -10%;
}

.overview-info-box.reverse .bg-mark-box>div {
  top: 30%;
  left: -10%;
}

.overview-text-box p {
  color: var(--color22);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.055rem;
}

.logo-rolling {
  position: absolute;
  top: 0;
  left: 80%;
  z-index: 20;

}

.logo-rolling .rolling-text,
.logo-rolling .logo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.logo-rolling .rolling-text {
  width: 19.625rem;
  height: 19.5rem;
}

.logo-rolling .rolling-text img {
  animation: rolling-overview 30s infinite;
}

@keyframes rolling-overview {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.logo-rolling .logo-mark {
  width: 7.75rem;
  height: 9.375rem;
}




.overview-core-value .title-box p.title {
  text-align: center;
  color: var(--color22);
  font-size: 3.625rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.0689rem;
}

.overview-core-value .core-list {
  margin-top: 5.625rem;
}

.overview-core-value .core-list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap: 1.6875rem 2rem; */
  gap: 2rem;
}

.overview-core-value .core-list ul li {
  display: flex;
}

.overview-core-value .core-list ul li:not(.brand-story-link)>div {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  padding: 3.125rem 2.5rem;
  border-radius: 1.25rem;
  border: 1px solid transparent;
  background: var(--colordd);
  box-sizing: border-box;
  transition: .3s;
}

.overview-core-value .core-list ul li .dot-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  aspect-ratio: 1 / 1;
  padding: 1.125rem;
  border: 1px dotted var(--color6c);
  border-radius: 100%;
  box-sizing: border-box;
  transition: .3s;
}

.overview-core-value .core-list ul li .dot-circle .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2344rem;
  height: 5.2344rem;
  aspect-ratio: 1 / 1;
  border-radius: 5.23438rem;
  border: 1px solid var(--color6c);
  background: var(--color6c);
  transition: .3s;
}

.overview-core-value .core-list ul li .text-box {
  color: var(--color22);
  opacity: .6;
  transition: .3s;
}

.overview-core-value .core-list ul li .text-box .name {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.0333rem;
}

.overview-core-value .core-list ul li .text-box .sub {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.0214rem;
}

.overview-core-value .core-list ul li .text-box .desc {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.019rem;
}

.overview-core-value .core-list ul li:not(.brand-story-link):hover>div {
  border-radius: 1.25rem;
  border: 1px solid var(--mainColor);
  background: var(--white);
  box-shadow: 0.375rem 0.375rem 2.375rem 0 var(--mainColor30);
  transform: translateY(-1.5rem);
}

.overview-core-value .core-list ul li:not(.brand-story-link):hover .dot-circle {
  border: 1px dotted var(--mainColor);
}

.overview-core-value .core-list ul li:not(.brand-story-link):hover .dot-circle .img-box {
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
}

.overview-core-value .core-list ul li:not(.brand-story-link):hover .text-box {
  opacity: 1;
}

.overview-core-value .core-list ul li:not(.brand-story-link):hover .text-box .name {
  color: var(--mainColor);
}

.overview-core-value .core-list ul li.brand-story-link {
  padding: 3.125rem 2.5rem;
  border-radius: 1.25rem;
  border: 1px solid transparent;
  background: var(--colordd);
  box-sizing: border-box;
  transition: .3s;
  background: url(/image/sub/img_overview_core_bg.jpg) no-repeat center / cover;
}

.overview-core-value .core-list ul li.brand-story-link .link-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;
  width: 100%;
  height: 100%;
}

.overview-core-value .core-list ul li.brand-story-link .link-text p {
  color: var(--white);
  text-align: center;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 130%;
  letter-spacing: -0.0261rem;
}

.overview-core-value .core-list ul li.brand-story-link .link-text a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.125rem 2.125rem;
  border-radius: 3.125rem;
  background: var(--black);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.0214rem;
  box-sizing: border-box;
  transition: .3s;
}

.overview-core-value .core-list ul li.brand-story-link .link-text a:hover {
  background: var(--colorffb);
}


@media (width <=1600px) {
  .overview-text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 20;
  }

  .overview-info-box .overview-img-box {
    width: 100%;
  }

  .overview-info-box .overview-img-box .circle-box {
    width: 100%;
    border-radius: 0 18.125rem 18.125rem 0;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(1) {
    margin-left: -5.625rem;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(2) {
    margin-left: -1.875rem;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(3) {
    width: 100%;
    margin-left: -15rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box {
    border-radius: 18.125rem 0 0 18.125rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(1) {
    margin-left: auto;
    margin-right: -5.625rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(2) {
    margin-left: auto;
    margin-right: -1.875rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(3) {
    margin-left: auto;
    margin-right: -9.375rem;
    width: 100%;
  }


  .overview-info-box .overview-img-box .circle-box:nth-child(1)::before,
  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(1)::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
  }


  .overview-text-box p,
  .overview-info-box.reverse .overview-text-box p {
    color: var(--white);
  }
}

@media (width <=1024px) {

  .overview-info-box .overview-img-box .circle-box,
  .overview-info-box.reverse .overview-img-box .circle-box {
    left: 0;
    right: 0;
  }


  .overview-info-box,
  .overview-info-box.reverse {
    flex-direction: column;
    gap: 5.125rem;
  }

  .overview-text-box {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0);
    text-align: left;
    padding-inline: 1.25rem;
    z-index: 21;
  }

  .overview-info-box.reverse {
    margin-top: 11rem;
  }

  .overview-text-box p,
  .overview-info-box.reverse .overview-text-box p {
    color: var(--color22);
  }

  /* 
  .overview-info-box .overview-img-box .circle-box:nth-child(1),
  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(1) {
    width: 90%;
    margin: 0 auto;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(2),
  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(2) {
    width: 98%;
    margin: 0 auto;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(3),
  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(3) {

    width: 95%;
    margin: 0 auto;
  } */

  /* .overview-info-box .overview-img-box .circle-box,
  .overview-info-box.reverse .overview-img-box .circle-box {
    border-radius: 18.125rem;
  } */

  .overview-core-value .core-list ul {
    grid-template-columns: 1fr;
  }

  .logo-rolling {
    top: 10%;
    left: 70%;
  }

}

@media (width <=768px) {
  .overview-title-box p {
    font-size: 3rem;
  }



  .overview-core-value .core-list ul li:not(.brand-story-link)>div {
    border-radius: 1.25rem;
    border: 1px solid var(--mainColor);
    background: var(--white);
    box-shadow: 0.375rem 0.375rem 2.375rem 0 var(--mainColor30);
    transform: translateY(-1.5rem);
  }

  .overview-core-value .core-list ul li:not(.brand-story-link) .dot-circle {
    border: 1px dotted var(--mainColor);
  }

  .overview-core-value .core-list ul li:not(.brand-story-link) .dot-circle .img-box {
    border: 1px solid var(--mainColor);
    background: var(--mainColor);
  }

  .overview-core-value .core-list ul li:not(.brand-story-link) .text-box {
    opacity: 1;
  }

  .overview-core-value .core-list ul li:not(.brand-story-link) .text-box .name {
    color: var(--mainColor);
  }

  .overview-info-box .overview-img-box {
    height: 35rem;
  }

  .overview-info-box .overview-img-box .circle-box {
    height: 25rem;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(1) {

    width: 100%;
    margin-left: -0.5rem;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(2) {
    top: 5%;
    width: 110%;
    margin-left: -0.5rem;
  }

  .overview-info-box .overview-img-box .circle-box:nth-child(3) {
    top: 20%;
    width: 100%;
    margin-left: -10rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(1) {
    width: 100%;
    margin-left: auto;
    margin-right: -0.5rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(2) {
    top: 5%;
    width: 110%;
    margin-left: auto;
    margin-right: -0.5rem;
  }

  .overview-info-box.reverse .overview-img-box .circle-box:nth-child(3) {
    top: 20%;
    width: 100%;
    margin-left: auto;
    margin-right: -10rem;
  }

  .logo-rolling .rolling-text {
    width: 11.625rem;
    height: 11.625rem;
  }

  .logo-rolling .logo-mark {

    width: 4.62019rem;
    height: 5.58894rem;
  }

  .overview-core-value .core-list ul li.brand-story-link {
    height: auto;
  }
}

@media (width <=640px) {

  .overview-title-box p {
    font-size: 2rem;
  }

  .overview-title-box span {
    font-size: 1.25rem;
  }


  .overview-text-box .title {
    font-size: 4rem;
  }

  .overview-text-box p {
    font-size: 1.1rem;
  }

  .overview-core-value .title-box p.title {
    font-size: 2.6rem;
  }

  .overview-core-value .core-list ul li:not(.brand-story-link)>div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .overview-core-value .core-list ul li:not(.brand-story-link)>div {
    padding: 2rem;
  }

  .overview-core-value .core-list ul li:not(.brand-story-link):active>div {

    border-radius: 1.25rem;
    border: 1px solid var(--mainColor);
    background: var(--white);
    box-shadow: 0.375rem 0.375rem 2.375rem 0 var(--mainColor30);
    transform: translateY(-1.5rem);
  }
}

/* 재정보고 */




.report-graph .mo-graph {
  display: none;
}

.report-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 14.875rem;
  margin-block: 7.5rem;
  padding: 3.125rem 5rem;
  border-radius: 1rem;
  overflow: hidden;
  background: url(/image/sub/img_banner_bg2.jpg) center center / cover no-repeat;
  box-sizing: border-box;
}

.report-banner>div.text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.report-banner>div p {

  color: var(--color22);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.03rem;

}

.report-banner a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem;
  border-radius: 3.125rem;
  background: var(--color33);
  color: var(--colorfff5);
  font-size: 1rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.019rem;
}

.report-list {
  border-top: 1px solid var(--colordd);
}

.report-list ul {
  display: flex;
  flex-direction: column;
}


.report-list ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.625rem 2.5rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--colordd);
  background: var(--white);
  transition: .3s;
}

.report-list ul li a .post-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-list ul li a .title {
  color: var(--color22);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.025rem;
  transition: .3s;
}

.report-list ul li a .date {
  color: var(--color99);
  font-size: 1rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.02rem;
  transition: .3s;
}

.report-list ul li a .arrow {
  padding: 1.5rem;
  border-radius: 100%;
  border: 1px solid var(--colordd);
  background: var(--white);
  transition: .3s;
  box-sizing: border-box;
}

.report-list ul li:hover a {
  background: var(--mainColor);
}

.report-list ul li:hover a .title,
.report-list ul li:hover a .date {
  color: var(--white);
}


.report-list ul li:hover a .arrow {
  border: 1px solid transparent;
}


@media (width <=1024px) {
  .report-banner {
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    height: 23.9375rem;
    padding: 2.5rem 1.25rem;
    margin-block: 5rem;
    background: url(/image/sub/img_banner_bg2.jpg) left center / cover no-repeat;
  }

  .report-banner>div.text-box {
    align-items: center;
  }

  .report-banner>div p {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.05rem;
  }
}

@media (width <=768px) {

  .report-graph .pc-graph {
    display: none;
  }

  .report-graph .mo-graph {
    display: block;
  }

  .report-banner {
    gap: 2.25rem;
    justify-content: center;
  }

  .report-banner>div p br {
    display: none;
  }

  .report-banner>div.img-box {
    max-width: 12.5rem;
  }
}

/* 윤리와 책임 */

.ethics-list {
  display: flex;
  align-items: flex-start;
  gap: 16.25rem;
  margin-bottom: 6.875rem;
}

.ethics-list>p {
  color: var(--black);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.09rem;
  white-space: nowrap;
}

.ethics-list>div {

  width: 100%;
}

.ethics-list>div ul {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.ethics-list>div ul li {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ethics-list>div ul li>div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}


.ethics-list>div ul .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.0625rem;
  height: 4.0625rem;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background: var(--mainColor)
}

.ethics-list>div ul .title {
  color: var(--color22);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.055rem;
}

.ethics-list>div ul .desc {
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.045rem;
}



.ethics-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .4fr;
  align-items: center;
  gap: 2.25rem;
  height: 14.875rem;
  margin-block: 7.5rem;
  /* padding: 3.125rem 5rem 0; */
  padding: 0 3.75rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--colorf3e);
  box-sizing: border-box;
}

.ethics-banner>div.text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.ethics-banner>div p {

  color: var(--black);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.03rem;

}

.ethics-banner p span {
  color: var(--mainColor);
}

.ethics-banner .img-box {
  align-self: flex-end;
}

@media (width <=1200px) {

  .ethics-list {
    flex-direction: column;
    gap: 5rem;
  }

  .ethics-banner {
    grid-template-columns: 1fr;

    height: auto;
    padding: 3.125rem 1.25rem 0;
  }

  .ethics-banner>div.text-box {
    align-items: center;
    text-align: center;

  }
}

@media (width <=768px) {

  .ethics-list>div ul li>div {
    flex-direction: column;
    align-items: flex-start;
  }

  .ethics-banner {
    gap: 0.8125rem;
  }

}

@media (width <=640px) {
  .ethics-list {
    gap: 1.875rem;
  }

  .ethics-list>p {
    font-size: 1.625rem;
  }

  .ethics-list>div ul {
    gap: 2.5rem;
  }

  .ethics-list>div ul .title {
    font-size: 1.125rem;
  }

  .ethics-list>div ul .desc {
    font-size: 1rem;
  }

  .ethics-banner>div p,
  .ethics-banner>div p span {
    font-size: 1.125rem;
  }

}

/* 연혁 */
.history-box {
  position: relative;
  height: auto;
}

.history-lnb {
  position: sticky;
  top: calc(var(--headerHeight) + 2rem);
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 20rem;
  margin-inline: 1.25rem;
  margin-top: 1.875rem;
  transition: .3s;
  z-index: 20;
  box-sizing: border-box;
}

.history-lnb.top {
  top: 2rem;
}

/* sub-tab-lnb 드롭다운 ul 과 통일 : 둥근 흰 박스 + 그림자 + gap + 회색 알약 아이템 */
.history-lnb ul {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  background: var(--white);
  border-radius: 1rem;
  padding: 0.5rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.history-lnb ul li {
  list-style: none;
}

.history-lnb ul li~li {
  margin-top: 0.5rem;
}

.history-lnb ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.875rem 0.75rem;
  border-radius: 3.125rem;
  background: #E8E8E8;
  color: var(--color99);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.02rem;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.3s, color 0.3s;
}

.history-lnb ul li:hover a,
.history-lnb ul li.active a {
  background: var(--mainColor);
  color: var(--white);
}



.history-lnb-select-btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.3125rem 1.25rem;
  background: var(--mainColor);
  border: none;
  border-radius: 3.125rem;
  cursor: pointer;
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.045rem;
  box-sizing: border-box;
  transition: .3s;
}

/* .history-lnb.open .history-lnb-select-btn {
  border-radius: 0.625rem 0.625rem 0 0;
} */

.history-lnb-select-btn::after {
  content: '';
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: rotate(45deg) translateY(-0.125rem);
  flex-shrink: 0;
  transition: transform .3s;
}

.history-lnb.open .history-lnb-select-btn::after {
  transform: rotate(-135deg) translateY(-0.125rem);
}

.history-list {
  position: relative;
  margin-block: 6.25rem 5rem;
}

/* 스크롤 프로그레스바 */
.history-list .history-decade-right::before {
  content: "";
  position: absolute;
  top: var(--line-start, 0px);
  left: 0;
  width: 1px;
  height: var(--line-height, 0px);
  background: var(--colordd);
  z-index: 0;
}

.history-list .history-decade-right::after {
  content: "";
  position: absolute;
  top: var(--line-start, 0px);
  left: 0;
  width: 1px;
  height: var(--line-progress, 0px);
  background: var(--mainColor);
  z-index: 1;
  pointer-events: none;
}

.history-decade-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding-bottom: 3.75rem;
}

.history-decade-wrap:first-child {
  padding-top: 0;
}

.history-decade-wrap:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.history-decade-left {
  position: relative;
  height: 100%;
  padding-right: 5rem;
}

.decade-title-box {
  position: sticky;
  top: calc(var(--headerHeight) + 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transition: .3s;
}

.decade-title-box.top {
  top: 5.5rem;
}

.decade-title-box ul {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.decade-title-box ul li {
  opacity: 0.4;
  transition: opacity 0.3s;
}

.decade-title-box ul li.active {
  opacity: 1;
}

.decade-title {
  margin-bottom: 1rem;
  color: var(--colorcc);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.1rem;
  transition: .3s;
}

.decade-desc {
  color: var(--colorcc);
  font-size: 1rem;
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.04rem;
  transition: .3s;
}

.mo-year-title .decade-desc,
.decade-title-box li.active .decade-desc {
  color: var(--color88);
  font-size: 1.25rem;
  letter-spacing: -0.05rem;
}

.mo-year-title .decade-title,
.decade-title-box li.active .decade-title {
  background: linear-gradient(90deg, #FCAF17 0%, #FF6246 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.swiper.history-swiper {
  position: relative;
  max-width: 42.375rem;
  margin: 0;
  border-radius: 0.375rem;
  overflow: hidden;
}


.history-swiper .swiper-pagination-bullet {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--white);
  opacity: 1;
  transition: background 0.2s;
}

.history-swiper .swiper-pagination-bullet-active {
  background: var(--mainColor);
}

.history-decade-right {
  position: relative;
  padding-left: 5.5rem;
  padding-bottom: 6.25rem;
}

.history-timeline {
  position: relative;
  margin-bottom: 5rem;
}

.history-timeline:last-child {
  margin-bottom: 0;
}

.history-timeline::before {
  display: none;
}

.mo-year-title {
  display: none;
}

/* 연도 블록 */
.timeline-year-block {
  position: relative;
  margin-bottom: 5rem;
}

.timeline-year-block:last-child {
  margin-bottom: 0;
}


/* ── timeline dot ── */
.timeline-year-block .history-dot {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 0.5rem;
  left: -6.5rem;
  z-index: 10;
  transition: .3s;
}

.timeline-year-block .history-dot i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 0.125rem solid var(--coloraa);
  background-color: var(--white);
  box-sizing: border-box;
  transition: all 0.3s;
}

.timeline-year-block .history-dot .circle {
  background: var(--mainColor20);
  border-radius: 50%;
  animation-fill-mode: both;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: .3s;
}

.timeline-year-block.active .history-dot i {
  border: 0.125rem solid var(--mainColor);
}

.timeline-year-block.active .history-dot .circle {
  animation: history-circle 3s cubic-bezier(1, 2, 0.66, 3) infinite;
}

.timeline-year-block .history-dot .circle:nth-child(2) {
  animation-delay: 0.8s;
}

.timeline-year-block .history-dot .circle:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes history-circle {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.year-info-box {
  display: flex;
  align-items: flex-start;
  gap: 4.375rem;
}

.year-info-box .year-info {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

/* 연도 레이블 */
.year-label {
  width: 100%;
  max-width: 5.8125rem;
  margin-bottom: 1.5rem;
  color: var(--mainColor);
  font-size: 2.125rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.085rem;
}

/* 이벤트 목록 */
.year-events {
  display: flex;
  flex-direction: column;
  gap: 2.1875rem;
}

.year-events li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.year-events li>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* 월 표시: 숫자 텍스트 */
.event-month {
  flex-shrink: 0;
  min-width: 2.5rem;
  color: var(--color22);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.045rem;
}

.event-text {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color44);
  font-size: 0.9375rem;
  line-height: 1.65;
  letter-spacing: -0.018rem;
}

.event-text::before {
  content: "•";
  color: var(--color44);
}

@media (width <=1500px) {
  .decade-title-box ul {
    gap: 3rem;
  }
}

@media (width <=1400px) {
  .decade-title {
    font-size: 2rem;
  }

  .decade-title-box li.active .decade-desc,
  .decade-title-box li .decade-desc {
    font-size: 1rem;
  }
}

@media (width <=1300px) {


  .history-lnb {
    display: flex;
  }

  .history-lnb>div {
    position: relative;
  }

  .history-lnb-select-btn {
    position: relative;
    display: flex;
    z-index: 3;
  }

  .history-lnb ul {
    display: none;
    /* 박스/아이템 스타일은 상단 통일 규칙(둥근 흰 박스 + 알약) 사용. 열림은 JS/.open 이 제어 */
  }

  .history-decade-left {
    display: none;
  }


  .history-decade-wrap {
    grid-template-columns: 1fr;
  }

  .history-list .history-decade-right::before,
  .history-list .history-decade-right::after {
    left: 0.625rem;
  }

  .timeline-year-block .history-dot {
    left: -5.875rem;
  }
}

@media (width <=1024px) {
  .mo-year-title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3.75rem;
  }

  .year-info-box {
    flex-direction: column;
    gap: 1.25rem;
  }

  .year-label {
    margin-bottom: 0;
  }

  .swiper.history-swiper {
    max-width: 30rem;
  }

}

@media (width <=768px) {
  .swiper.history-swiper {
    max-width: 20rem;
  }

  .mo-year-title .decade-title {
    font-size: 2.6rem;
    margin-bottom: 0;
  }

  .history-lnb,
  .history-lnb ul {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0.5rem;
  }

  .history-decade-right {
    padding-left: 3rem;
  }

  .timeline-year-block .history-dot {
    left: -3.375rem;
  }
}

@media (width <=640px) {
  .swiper.history-swiper {
    max-width: 18rem;
  }

  .mo-year-title .decade-desc {
    font-size: 0.875rem;
  }
}

/* 조직도 */
.org-chart-box {
  display: flex;
  flex-direction: column;
  gap: 5.875rem;
  margin-top: 1.875rem;
  margin-bottom: 12.5rem;
}

.org-chart-box .pc-img {
  display: block;
}

.org-chart-box .mo-img {
  display: none;
}


@media (width <=640px) {
  .org-chart-box .pc-img {
    display: none;
  }

  .org-chart-box .mo-img {
    display: block;
  }
}

/* 이사회 명단 (카테고리별 그룹 ul/li) */
.org-board-list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--black);
}

.org-board-group {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--colordd);
}

.org-board-group>.category {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5625rem 2.5rem;
  border-right: 1px solid var(--colordd);
  background: var(--colorfef);
  color: var(--color22);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.045rem;
  text-align: center;
  box-sizing: border-box;
}

.org-board-members {
  flex: 1;
  min-width: 0;
}

.org-board-members>li {
  display: flex;
  /* align-items: center; */
}

.org-board-members>li+li {
  border-top: 1px solid var(--colordd);
}

.org-board-members .name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25%;
  padding: 1.5625rem 2.5rem;
  border-right: 1px solid var(--colordd);
  text-align: center;
  color: var(--color22);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.045rem;
  box-sizing: border-box;
  white-space: nowrap;
}

.org-board-members .desc {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 1.5625rem 2.5rem;
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.045rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .org-board-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    border-top: 0;
  }

  .org-board-group {
    flex-direction: column;
  }

  .org-board-group>.category {
    border-right: 0;
  }

  .org-board-group>.category {
    padding: 1.63rem;
    font-size: 1rem;
  }

  .org-board-members .name,
  .org-board-members .desc {
    justify-content: center;
    padding: 1.66rem;
    text-align: center;
    font-size: 0.875rem;
  }
}









/* -------------사업----------------- */

.program-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
}

.program-title .program-title-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.625rem;
}

.program-title .program-title-box .img-box {
  margin-top: 0.8125rem;
}

.program-title .program-title-box p {
  color: var(--black);
  text-align: center;
  font-size: 3.375rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.135rem;
}

.program-title .program-title-box p span {
  color: var(--mainColor);
}

.program-info {
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
  margin-top: 6.375rem;
}

.program-info .program-desc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}



.program-info .question {
  color: var(color22);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.065rem;
}

.program-info .answer {
  width: 100%;
  max-width: 53.75rem;
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.045rem;
}

.program-info .answer span {
  font-weight: 800;
}

.program-info .program-desc-list {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}


.program-info .activity-list ul {
  display: grid;
  gap: 2rem;
}

.program-info .activity-list ul.grid2 {
  grid-template-columns: repeat(2, 1fr);
}

.program-info .activity-list ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7.8125rem;
  padding: 1.25rem 2.5rem;
  border-radius: 1.25rem;
  background: var(--colorfff);
  box-sizing: border-box;
}

.program-info .activity-list ul li.full-grid {
  grid-column: 1 /-1;
}

.program-info .activity-list ul li>div:not(.icon-line-box) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.program-info .activity-list ul li .badge {
  display: flex;
  align-items: flex-start;

  padding: 0.5rem 1rem;
  border-radius: 3.125rem;
  background: var(--mainColor);
  color: var(--color22);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.0166rem;
  box-sizing: border-box;
}

.program-info .activity-list ul li .name {
  color: var(--color22);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.0238rem;
}

.program-info .activity-list ul li .desc {
  color: var(--color22);
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.019rem;
}

.icon-line-box {
  width: 8.125rem;
  height: 8.125rem;
  aspect-ratio: 1/1;

  padding: 1.25rem;
  border-radius: 100%;
  border: 0.125rem dotted var(--mainColor);
  box-sizing: border-box;
}

.icon-line-box>div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 /1;
  border-radius: 100%;
  background-color: var(--mainColor);
}




/* 사업 슬라이드 */
.program-gallery {
  position: relative;
  width: 100%;
  margin-block: 7.5rem;
}

.program-gallery .inner-1400 {
  /* position: absolute;
  inset: 0; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.4375rem;
  width: 100%;
  height: 100%;
}

.program-gallery .gallery-main-swiper {
  width: 100%;
  /*aspect-ratio: 1 / 1;
  height: 54.875rem;
  aspect-ratio: 16 / 7; 
  padding-bottom: 105px;*/
  border-radius: 1.25rem;
  box-sizing: border-box;
}

.program-gallery .gallery-main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-gallery .gallery-panel {
  /* position: absolute;
  left: 100%;
  bottom: 0;
  transform: translateX(-100%); */
  display: flex;
  flex-direction: column;
  gap: 5.25rem;
  width: 100%;
  /* max-width: 600px; */
  /* padding: 3.125rem; */
  /* border-radius: 1.5rem; */
  background: var(--white);
  /* box-shadow: 0.375rem 0.375rem 2.375rem 0 rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(1.525rem); */
  box-sizing: border-box;
  z-index: 10;
}

/* .program-gallery .gallery-panel::before {
  content: "";
  position: absolute;
  right: 4.25rem;
  bottom: 3.4375rem;
  width: 8.3989rem;
  height: 10.1251rem;
  background: url(/image/sub/img_sub_logo_opacity_y.svg)no-repeat center /cover;
  z-index: -1;
} */

.gallery-panel-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gallery-badge {
  display: block;
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.07rem;
}

.gallery-title {
  color: var(--black);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.07rem;
}

.gallery-desc {
  color: var(--color44);
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.04rem;
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4; */
  /* overflow: hidden; */
}

.gallery-panel-footer {
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
  max-width: 100%;
}

.gallery-panel-footer .gallery-thumb-swiper {
  max-width: 100%;
  margin: 0;
}



.gallery-nav {
  display: flex;
  align-items: center;
  gap: 1.1875rem;
}



.gallery-current {
  color: var(--mainColor);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.045rem;
}

.gallery-fraction {
  color: var(--colorcc);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.045rem;
}

.gallery-fraction em {
  font-style: normal;
}

.gallery-nav>div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gallery-btn-prev,
.gallery-btn-next {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
  border-radius: 100%;
  background: var(--color22);
  cursor: pointer;
  box-sizing: border-box;
  transition: .3s;
}

.gallery-btn-prev img,
.gallery-btn-next img {
  filter: brightness(1);
  transition: .3s;
}

.gallery-btn-prev:hover,
.gallery-btn-next:hover {
  background: var(--mainColor);
}

.gallery-btn-prev:hover img,
.gallery-btn-next:hover img {
  filter: brightness(1);
}

.gallery-btn-prev.swiper-button-disabled,
.gallery-btn-next.swiper-button-disabled {
  background: var(--colore6);
  cursor: default;
  pointer-events: none;
}

.gallery-btn-prev.swiper-button-disabled img,
.gallery-btn-next.swiper-button-disabled img {
  filter: brightness(0);
}

.gallery-thumb-swiper .swiper-slide {
  max-width: 7.8125rem;
  max-height: 7rem;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  transition: 0.3s;
}

.gallery-thumb-swiper .swiper-slide-thumb-active {
  border: 0.3125rem solid var(--mainColor);
}

.gallery-thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* 사업 하단 */
.program-boost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 87.5rem;
  height: 18rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: url(/image/sub/img_program_btm.jpg)no-repeat center / cover;
  box-sizing: border-box;
}

.program-boost>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.program-boost .cate {
  color: var(--color96);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.0178rem;
}

.program-boost .slogan {
  color: var(--color22);
  text-align: center;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.065rem;
}



@media (width <=1200px) {
  .program-info .activity-list ul.grid2 {
    grid-template-columns: 1fr;
  }

  .program-info .activity-list ul li {
    gap: 1rem;
  }

  .program-gallery .inner-1400 {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }

  .program-gallery .gallery-panel {
    gap: 2.5rem;
  }

  .gallery-panel-footer {
    gap: 1.875rem;
  }

  .program-info .program-desc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .program-info .program-desc .question br {
    display: none;
  }


}

@media (width <=768px) {
  .program-title .program-title-box {
    gap: 1rem;
  }

  .program-title .program-title-box .img-box {
    margin-top: 0;
  }

  .gallery-thumb-swiper .swiper-slide {
    max-width: 6.25rem;
  }

}

@media (width <=640px) {
  .gallery-thumb-swiper .swiper-slide {
    max-width: 4rem;
  }

  .program-title .program-title-box p {
    width: 100%;
    font-size: 1.75rem;
  }

  .program-info .answer {
    font-size: 1rem;
  }

  .program-info .activity-list ul li {
    padding: 1.25rem;
  }

  .icon-line-box {
    display: none;
  }

  .gallery-title {
    font-size: 1.5rem;
  }

  .program-boost {
    height: 100%;
    padding: 1.25rem 1rem;
    background-position: left;
  }

  .program-boost .slogan {
    font-size: 1rem;
  }

  /* .program-boost .slogan br {
    display: none;
  } */

}




.gal-board-list {
  margin-top: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.gal-board-list .board-list__record>a {
  display: block;
}

.gal-board-list .thumb {
  min-width: 27.5rem;
  aspect-ratio: 22 / 15;
  height: 100%;
  border-radius: 0.625rem 0 0 0.625rem;
  overflow: hidden;
}

.gal-board-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal-board-list .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.875rem;
  max-width: 60rem;
  width: 100%;
  padding: 4.75rem 3.875rem;
  border-radius: 0 0.625rem 0.625rem 0;
  background: var(--colorfa);
  box-sizing: border-box;
}

.gal-board-list .txt .btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.gal-board-list .txt .btn-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background: var(--mainColor);
  border: 1px solid var(--mainColor);
}

.gal-board-list .txt .btn-box a.btn-down {
  background: var(--white);
}

.gal-board-list .board-list__record {
  padding: 0;
  border: 0;
}

.gal-board-list .board-list__tit {
  flex: none;
  color: var(--color22);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.025rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: 100%;
}

.gal-board-list .board-list__date {
  display: block;
  margin: 1rem 0 1.875rem;
  color: var(--mainColor);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 100%;
  padding: 0;
  text-align: left;
}

.gal-board-list .board-list__desc {
  overflow: hidden;
  color: var(--color66);
  text-overflow: ellipsis;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.0175rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-self: stretch;
  text-align: left;
}


@media (width <=1024px) {
  .gal-board-list .txt {
    padding: 3.125rem;
  }
}

@media (width <=768px) {
  .gal-board-list .thumb {
    aspect-ratio: 2 / 1;
    border-radius: 0.625rem 0.625rem 0 0;
    overflow: hidden;
  }

  .gal-board-list .txt {

    padding: 1.875rem 1.25rem;
    border-radius: 0 0 0.625rem 0.625rem;
  }
}


/* 기타 */

.etc-wrap {
  padding: calc(var(--headerHeight) + 7.6875rem) 0 8rem;
  margin: 0 auto;
}

.etc-title-box {
  margin-bottom: 7.5rem;
  padding-bottom: 7.5rem;
  border-bottom: 1px solid var(--colordd);
}

.etc-title {
  text-align: center;
  color: var(--color22);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.13rem;
}

.etc-section {
  margin-bottom: 3.75rem;
}

.etc-section h3 {
  margin-bottom: 1.25rem;
  color: var(--color22);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.03rem;
}

.etc-section p {
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.0225rem;
  word-break: keep-all;
}

.etc-section p~p {
  margin-top: 1.5rem;
}



.etc-footer {
  margin-top: 3.125rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--colordd);
  font-size: 0.9375rem;
  color: var(--color88);
}

@media (max-width: 768px) {
  .etc-wrap {
    padding: calc(var(--headerHeight) + 3rem) 0 5rem;
    margin: 0 auto;
  }

  .etc-title-box {
    margin-bottom: 5rem;
    padding-bottom: 5rem;
  }

  .etc-title {
    font-size: 2.5rem;
  }

  .etc-section p {
    font-size: 1rem;
  }
}

.location-map {
  position: relative;
  padding-block: 7.5rem;
}

.map-box {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
}

.map-box .map-mark {
  position: absolute;
  top: 10%;
  left: 60%;
  transform: translate(-60%, -10%);
  width: 20vw;
  max-width: fit-content;
}

.location-map .location-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 3.75rem;
  box-sizing: border-box;
}

.location-map .location-info p.title {
  color: var(--color22);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.065rem;
}

.location-map .location-info .info-box {
  margin-top: 1.5rem;
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.045rem;
}

.location-map .location-info .info-box .info {
  color: var(--color66);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.0225rem;
}

.location-map .location-info .info-box .info ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.location-map .location-info .info-box .info ul li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.location-map .location-info .map-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.9375rem 1.8125rem;
  border-radius: 1.25rem;
  background: var(--mainColor);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.0225rem;
  box-sizing: border-box;
  transition: .3s;
}

.location-map .location-info .map-btn:hover {
  background: var(--mainHover);
}

.train-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 62.4375rem;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.035rem;
}

.bus-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8.3125rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.0187rem;
}

.train-badge.brown,
.bus-badge.brown {
  background: #995023;
}

.train-badge.green,
.bus-badge.green {
  background: #4FA331;
}

.train-badge.blue,
.bus-badge.blue {
  background: #3A5CB5;
}

.train-badge.green2,
.bus-badge.green2 {
  background: #6AC74A;
}


.basic-link-btn button,
.basic-link-btn a {
  display: block;
  width: 100%;
  min-width: 10rem;
  padding: 1.3438rem;
  border-radius: 62.4375rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.0225rem;
  box-sizing: border-box;
  transition: .3s;
}

.center-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (width <=768px) {
  .location-map {
    position: relative;
    padding-block: 5rem;
  }

  .location-map-info {
    position: static;
    margin-bottom: 2.5rem;
  }

  .location-map .location-info {
    margin-top: 3rem;
  }

  .location-map .location-info p.title {
    font-size: 1.25rem;
  }

  .location-map .location-info .info-box .info ul li,
  .location-map .location-info .info-box {
    font-size: 1rem;
  }
}


/* CI 소개  */

.ci-wrap {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.ci-sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5rem;
  padding-bottom: 3.125rem;
}

.ci-sec-head .title-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 0.375rem; */
  flex-shrink: 0;
}

.ci-sec-head .title-col .title {
  color: var(--color33);
  font-size: 2rem;
  font-weight: 800;
}

.ci-sec-head .title-col .en-label {
  display: block;
  color: var(--color005);
  font-size: 1.25rem;
  font-weight: 700;
}

.ci-sec-head .desc-col {
  color: var(--color33);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.045rem;
}

.ci-logo-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ci-logo-item {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ci-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  padding: 6.6875rem;
  background: var(--color00505);
  box-sizing: border-box;
}


.ci-logo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 0;
  color: var(--color22);
  font-size: 1.25rem;
  font-weight: 600;
}

.ci-symbol-wrap {
  display: grid;
  grid-template-columns: 20.5rem 1fr;
  gap: 6.875rem;
  align-items: end;
  margin-top: 3.125rem;
}

.ci-symbol-img {
  border: 1px solid var(--color005);
  border-radius: 1.25rem;
  padding: 2.8125rem 1.875rem;
  box-sizing: border-box;
  text-align: center;
}

.ci-symbol-img img {
  width: 100%;
  height: auto;
}

.ci-symbol-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
}

.ci-symbol-item .ko-name {
  color: var(--color33);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.06rem;
}

.ci-symbol-item .en-name {
  display: block;
  height: 2.125rem;
  margin-top: 0.3125rem;
  color: rgba(75, 75, 75, 0.50);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.0281rem;
}

.ci-symbol-item .sym-desc {
  margin-top: 2.1875rem;
  color: var(--color33);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.045rem;
}

.bi-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
}

.bi-logo-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 4.6875rem;
  border-radius: 1.25rem;
  border: 1px solid var(--color005);
  overflow: hidden;
  box-sizing: border-box;
}

.ci-logo-label-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.ci-color-grid {
  display: grid;
  grid-template-columns: 1fr 14rem 14rem 14rem;
  gap: 1.75rem;
}

.ci-color-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ci-color-swatch {
  width: 100%;
  height: 10.625rem;
}

.ci-color-swatch.color1 {
  background: #005F1F;
}

.ci-color-swatch.color2 {
  background: #FFB202;
}

.ci-color-swatch.color3 {
  background: var(--color9ab);
}

.ci-color-swatch.color4 {
  background: var(--colorf3e);
}

.ci-color-info {
  display: flex;
  flex-direction: column;
}

.ci-color-info span {
  display: flex;
  gap: 1.3125rem;
  color: var(--color22);
  font-size: 0.9375rem;
  font-weight: 400;
}

.ci-color-info span strong {
  display: inline-block;
  min-width: 5rem;
  font-weight: 400;
}

.ci-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-block: 4.375rem;
}

.ci-download a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 17.625rem;
  padding: 1.375rem;
  border-radius: 1.25rem;
  background: var(--color005);
  color: var(--white);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 135%;
  transition: background .3s;
}

.ci-download a:hover {
  background: var(--black);
}

.ci-download a svg {
  flex-shrink: 0;
}

.ci-alliance-img {
  margin-top: 0.625rem;
  text-align: center;
}

.ci-alliance-img img {
  margin: 0 auto;
}


@media (width <=1200px) {



  .ci-symbol-wrap {
    align-items: start;
  }

  .ci-symbol-list {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ci-symbol-item .sym-desc {
    margin-top: 1rem;
  }

  .bi-logo-box {
    align-items: center;
    gap: 5.625rem;
    padding: 3.75rem;
  }

  .ci-color-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ci-color-item:first-child {
    grid-column: 1 / -1;
  }
}

@media (width <=768px) {
  .ci-sec-head {
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }


  .ci-symbol-wrap {
    grid-template-columns: 1fr;
    gap: 3.75rem;
  }

  .ci-symbol-img {
    padding: 3.75rem;
  }

  .ci-color-grid {
    gap: 3.75rem 0.9375rem;
  }

  .ci-color-info span {
    gap: 0.75rem;
  }

  .ci-color-item:first-child .ci-color-info span strong {
    min-width: 4.1rem;
  }

  .ci-color-info span strong {
    min-width: 3rem;
  }

  .ci-symbol-item .en-name {
    min-height: auto;
  }

  .ci-download {
    flex-direction: column;
    gap: 1.25rem;
  }

  .bi-logo-box {
    gap: 1.875rem;
    padding: 2.5rem;
  }
}

@media (width <=640px) {
  .ci-sec-head .title-col .title {
    font-size: 1.875rem;
  }

  .ci-logo-list .ci-logo-item>div:first-child .ci-logo-box {
    padding: 2rem 4rem;
  }

  .ci-logo-box {
    padding: 2rem;
  }

  .ci-logo-label {
    font-size: 1rem;
  }

  .ci-sec-head .desc-col {
    font-size: 1rem;
  }

  .ci-symbol-img {
    padding: 1.875rem 3.75rem;
  }

  .ci-color-grid {
    grid-template-columns: 1fr;
    gap: 2rem 0.9375rem;
  }

  .ci-color-item:not(:first-child) .ci-color-swatch {
    height: 8.125rem;
  }

  .ci-download {
    gap: 1.25rem;
  }
}



/* 후원 */

.sub-page .title-box {
  margin-bottom: 3.75rem;
}


.sub-page .title-box h4 {
  color: var(--color22);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.055rem;
}

.support-list {}

.support-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.support-list ul li>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding: 2.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--colordd);
  background: var(--white);
}

.support-list ul li>div .info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.support-list ul li>div .info-box .title {
  color: var(--color44);
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.035rem;
}

.support-list ul li>div .info-box .desc {
  color: var(--color66);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.0225rem;
}

@media (width <=1400px) {
  .support-list ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <=768px) {
  .support-list ul {
    grid-template-columns: 1fr;
  }

  .support-list ul li>div {
    padding: 2rem;
  }
}

@media (width <=640px) {

  .support-list ul li>div .info-box .title {
    font-size: 1.5rem;
  }

  .support-list ul li>div .info-box .desc {
    font-size: 1rem;
  }
}


/* ===== 생애주기 다이어그램 ===== */
section.life-cycle {
  margin-bottom: 7.5rem
}

.life-cycle .lc-stage {
  position: relative;
  width: 100%;
  max-width: 1567px;
  margin: 0 auto;
  aspect-ratio: 1567 / 1194;
  background: #fff8e5;
  border-radius: 1.875rem;
  overflow: hidden;
  container-type: inline-size;
}

.life-cycle .lc-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translateY(var(--lc-shift, 0));
}

.life-cycle .lc-bottom__line {
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(to right, #BD8300 0 0.38cqw, transparent 0.38cqw 0.76cqw);
}

.life-cycle .lc-bottom__icons {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.38cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-cycle .lc-stage {
  display: flex;
  flex-direction: column;
  /* gap·padding 모두 cqw : 스테이지 세로 예산 전체를 너비 비례로 통일
     → top-box(flex-shrink) 높이도 ∝폭이 되어 SVG·인물 정렬 유지
     (1567px 기준 3.125rem→3.19cqw / 3.25rem→3.32cqw / 4.1875rem→4.28cqw) */
  gap: 3.19cqw;
  padding: 3.32cqw 4.28cqw;
  box-sizing: border-box;

  /* ═══════════ 다이어그램 조정 토큰 (여기 한 곳에서 관리) ═══════════  */
  --lc-base: 0cqw;
  /* 1단계(임신수유기) 인물 발 높이  */
  --lc-rise: 5.45cqw;
  /* 단계가 올라갈수록 더해지는 상승폭  */
  --lc-shift: 10.4cqw;
  /* 전체(SVG+인물)를 하단으로 내리는 양 → 임신수유기 라벨이 top-box 하단에 */
  /* ═══════════════════════════════════════════════════════════════ */
}

.lc-stage .top-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.life-cycle .lc-bottom {
  display: flex;
  flex-direction: column;
  gap: 3.19cqw;
  /* 3.125rem → cqw : top-box 높이 비례 유지용 */
}

.life-cycle .lc-bottom__icons img {
  display: block;
  height: 4.47cqw;
  /* 4.375rem → cqw : 하단 아이콘줄 높이도 ∝폭 (top-box shrink 비례 유지) */
  aspect-ratio: 1 / 1;
}

/* 단계 컬럼 트랙 (flex) */
.life-cycle .lc-track {
  position: absolute;
  left: 6.71%;
  right: 2.76%;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
}

.life-cycle .lc-step {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: calc(var(--lc-base) + (var(--i) - 1) * var(--lc-rise));
  pointer-events: none;
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"],
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"],
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"],
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"],
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] {
  z-index: 3;
}

.life-cycle .lc-hotspot {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
}

.life-cycle .lc-hotspot .blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 인물 (컬럼 하단, flow) */
.life-cycle .lc-person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  pointer-events: none;
}

.life-cycle .lc-person .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: var(--ph);
}

.life-cycle .lc-person__img {
  display: block;
  height: 100%;
  width: auto;
}

.life-cycle .lc-person__img--basic {
  opacity: 1;
  transition: opacity .35s ease;
}

.life-cycle .lc-person__img--on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .35s ease;
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-person__img--on,
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-person__img--on,
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-person__img--on,
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-person__img--on,
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-person__img--on {
  opacity: 1;
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-person__img--basic,
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-person__img--basic,
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-person__img--basic,
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-person__img--basic,
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-person__img--basic {
  opacity: 0;
}

/* 라벨(알약) : 인물 아래 중앙 */
.life-cycle .lc-label {
  position: relative;
  margin-top: 4cqw;
  box-sizing: border-box;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--colordd);
  border-radius: 5cqw;
  box-shadow: 0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, .06);
  width: 100%;
  max-width: fit-content;
  padding: 0.55cqw 1.5cqw;
  font-size: clamp(0.75rem, 1cqw, 1.125rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: var(--color22);
  /* white-space: nowrap; */
  pointer-events: none;
}

.life-cycle .lc-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: #f4b21c;
  opacity: 0;
  transition: .3s;
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-label,
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-label,
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-label,
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-label,
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-label {
  border-radius: 3.125rem;
  border: 1px solid var(--colordd);
  background: var(--white);
  box-shadow: 0.375rem 0.375rem 1.5625rem 0 rgba(248, 181, 0, 0.60);
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-label::after,
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-label::after,
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-label::after,
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-label::after,
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-label::after {
  opacity: 1;
}

/* 진행선 채움(호버 위치까지) */
.life-cycle .lc-clip-rect {
  width: 155px;
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.life-cycle .lc-stage[data-stage="1"] .lc-clip-rect {
  width: 155px;
}

.life-cycle .lc-stage[data-stage="2"] .lc-clip-rect {
  width: 438px;
}

.life-cycle .lc-stage[data-stage="3"] .lc-clip-rect {
  width: 718px;
}

.life-cycle .lc-stage[data-stage="4"] .lc-clip-rect {
  width: 1005px;
}

/* 성인기(마지막) : 트랙 끝까지 가득 채움 (막대 끝 ≈1435 + 라운드캡 여유) */
.life-cycle .lc-stage[data-stage="5"] .lc-clip-rect {
  width: 1440px;
}

/* 현재 위치 점 이동 */
.life-cycle .lc-dot {
  /* 라인(계단) 중심선을 경로로 사용 (viewBox 좌표 = g좌표 + 91.98,557.6) */
  offset-path: path('M106.98 898 H388.48 V796.75 H670.48 V696.75 H952.48 V594.25 H1230.48 V493 H1517.98');
  offset-rotate: 0deg;
  offset-distance: 140px;
  /* 기본 = 임신수유기 */
  transition: offset-distance .55s cubic-bezier(.4, 0, .2, 1);
}

.life-cycle .lc-stage[data-stage="2"] .lc-dot {
  offset-distance: 524.25px;
}

.life-cycle .lc-stage[data-stage="3"] .lc-dot {
  offset-distance: 904.25px;
}

.life-cycle .lc-stage[data-stage="4"] .lc-dot {
  offset-distance: 1291.75px;
}

.life-cycle .lc-stage[data-stage="5"] .lc-dot {
  offset-distance: 1680px;
}

/* 성인기 중앙 */

/* 말풍선 : 인물 위 중앙 */
.life-cycle .lc-callout {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 2cqw;
  min-width: clamp(15rem, 20.42cqw, 20rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(1cqw);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-callout,
.life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-callout,
.life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-callout,
.life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-callout,
.life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-callout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.life-cycle .lc-callout__inner {
  position: relative;
  background: var(--white);
  border: 0.13cqw solid #F4B21C;
  border-radius: 2cqw;
  box-shadow: 0.5cqw 0.5cqw 0.8cqw rgba(248, 181, 0, .30);
  padding: 1.5cqw 1.4cqw;
}

.life-cycle .lc-callout__inner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.5cqw;
  height: 1.5cqw;
  background: var(--white);
  border-right: 0.13cqw solid #F4B21C;
  border-bottom: 0.13cqw solid #F4B21C;
  transform: translate(-50%, 50%) rotate(45deg);
}

.life-cycle .lc-callout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6cqw;
}

.life-cycle .lc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4b21c;
  color: var(--color22);
  font-weight: 800;
  border-radius: 0.64cqw;
  padding: 0.62cqw 0.95cqw;
  font-size: clamp(0.875rem, 1.28cqw, 1.25rem);
  letter-spacing: -.05em;
  line-height: 1;
  white-space: nowrap;
}

.life-cycle .lc-stage-no {
  color: var(--color99);
  font-weight: 800;
  font-size: clamp(0.75rem, 1.02cqw, 1rem);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.life-cycle .lc-callout__title {
  display: block;
  margin-top: 1.15cqw;
  padding-top: 1.15cqw;
  border-top: 0.07cqw solid var(--colordd);
  font-size: clamp(0.875rem, 1.15cqw, 1.125rem);
  font-weight: 800;
  color: var(--color22);
  letter-spacing: -.04em;
  line-height: 1.2;
}

.life-cycle .lc-callout__desc {
  margin: 0.9cqw 0 0;
  font-size: clamp(0.8125rem, 1.02cqw, 1rem);
  font-weight: 700;
  color: var(--color44);
  letter-spacing: -.04em;
  line-height: 1.5;
}

.top-box-mo {
  display: none;
}

@media (width <=1200px) {
  .life-cycle .lc-label {
    max-width: 7.5rem;
  }
}

@media (width <=1024px) {
  .life-cycle .lc-stage {
    padding: 3.125rem 1.25rem;
    aspect-ratio: auto;
    gap: 3.25rem;
  }

  .life-cycle .lc-hotspot,
  .life-cycle .lc-line {
    display: none;
  }

  .life-cycle .lc-track {
    position: relative;
    /* 세로선 pseudo(::before/::after) 기준 */
    left: auto;
    right: auto;
    flex-direction: column;
    z-index: auto;
  }

  .life-cycle .lc-step {
    padding-bottom: 0;
    z-index: auto;
  }

  .life-cycle .lc-person {
    flex-direction: row;
  }

  .life-cycle .lc-label {
    display: none;
  }

  .life-cycle .lc-callout,
  .life-cycle .lc-stage[data-stage="1"] .lc-step[data-step="1"] .lc-callout,
  .life-cycle .lc-stage[data-stage="2"] .lc-step[data-step="2"] .lc-callout,
  .life-cycle .lc-stage[data-stage="3"] .lc-step[data-step="3"] .lc-callout,
  .life-cycle .lc-stage[data-stage="4"] .lc-step[data-step="4"] .lc-callout,
  .life-cycle .lc-stage[data-stage="5"] .lc-step[data-step="5"] .lc-callout {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    pointer-events: all;
    z-index: auto;
  }


  .life-cycle .lc-callout__inner::after {
    content: none;
  }

  /* ───── cqw 제거 : 모바일은 전부 rem/px ───── */

  .life-cycle .lc-track {
    gap: 1.75rem;
  }

  .life-cycle .lc-person {
    align-items: flex-start;
    /* 아이콘 상단 정렬(Figma) → 세로 연결선 기준점(원 중심)을 고정 */
    gap: 1.25rem;
  }

  /* 인물 이미지 : 원형 링 아이콘 (Figma 모바일)
     기본=회색 링/기본 이미지 → 스크롤로 지나오면(is-active) 주황 링/컬러 이미지 */
  .life-cycle .lc-person .img-box {
    flex: 0 0 auto;
    width: 5.625rem;
    height: 5.625rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 0.125rem solid var(--colored);
    background: var(--white);
    position: relative;
    z-index: 2;
    /* 세로 연결선(트랙 ::before/::after) 위로 */
    transition: border-color .3s ease, box-shadow .3s ease;
  }

  .life-cycle .lc-step.is-active .lc-person .img-box {

    border-color: #f8b500;
    box-shadow: 0 0 0 0.25rem rgba(248, 181, 0, .15);
  }

  .life-cycle .lc-person__img {
    height: auto;
    width: auto;
    max-height: 3.5rem;
    max-width: 3.75rem;
    position: static;
    /* --on 의 데스크톱 absolute 해제 → 원 안 중앙 배치 */
  }

  /* 왼쪽 세로 연결선 : 트랙에 단일 요소 1개.
     ::before = 회색 전체 트랙(원1→마지막 원), ::after = 주황 채움(원1→현재 원).
     높이(--lc-line-h / --lc-fill-h)는 JS가 원 중심 위치로 계산해 설정.
     원 중심 = 첫 스텝 top + 2.5rem 이라 시작점(left/top 2.5rem)은 고정 */
  .life-cycle .lc-track::before,
  .life-cycle .lc-track::after {
    content: "";
    position: absolute;
    left: 2.8rem;
    top: 2.5rem;
    width: 0.875rem;
    transform: translateX(-50%);
    border-radius: 999px;
  }

  .life-cycle .lc-track::before {
    height: var(--lc-line-h, 0);
    background: var(--colored);
    z-index: 0;
  }

  .life-cycle .lc-track::after {
    height: var(--lc-fill-h, 0);
    background: var(--mainColor);
    z-index: 1;
    transition: height .35s ease;
  }

  /* 기본은 basic 이미지, 스크롤로 활성(is-active)되면 컬러(--on)로 교체 */
  .life-cycle .lc-person__img--basic {
    display: block;
    opacity: 1 !important;
  }

  .life-cycle .lc-person__img--on {
    display: none;
    position: static;
  }

  .life-cycle .lc-step.is-active .lc-person__img--basic {
    display: none;
  }

  .life-cycle .lc-step.is-active .lc-person__img--on {
    display: block;
    opacity: 1;
  }

  /* 말풍선 → 카드 본문 */
  .life-cycle .lc-callout {
    flex: 1;
    width: auto;
    min-width: 0;
    /* 데스크톱 min-width:clamp(15rem…) 해제 : 15rem(240px)이 남아 ~430px 이하에서 오버플로 */
    margin: 0;
  }

  .life-cycle .lc-callout__inner {
    border: 1px solid var(--colored);
    border-radius: 0.75rem;
    box-shadow: none;
    padding: 1rem 1.125rem;
  }

  .life-cycle .lc-step.is-active .lc-callout__inner {
    border: 1px solid var(--mainColor);
  }

  .life-cycle .lc-callout__head {
    gap: 0.5rem;
  }

  .life-cycle .lc-pill {
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    white-space: normal;
    /* 영문 단계명("Infancy & Early Childhood")이 nowrap이면 400px에서 잘림 */
  }

  .life-cycle .lc-stage-no {
    font-size: 0.6875rem;
  }

  .life-cycle .lc-callout__title {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--colordd);
    font-size: 0.9375rem;
  }

  .life-cycle .lc-callout__desc {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
  }

  /* 하단 아이콘 스트립(cqw 기반·아래 사업영역 카드와 중복) 숨김 */
  .life-cycle .lc-bottom .lc-bottom__icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }

  .life-cycle .lc-bottom__icons img {
    height: 4.375rem;
  }
}

/* ===== 사업영역 카드 ===== */

.biz-area .biz-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.875rem 1.6875rem;
  max-width: 87.5625rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.biz-area .biz-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.875rem;
  min-height: 13.375rem;
  padding: 0 2.5rem;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--colordd);
  border-radius: 0.75rem;
  transition: .3s;
  z-index: 1;
}



.biz-area .biz-card__icon {
  flex: 0 0 8.125rem;
  width: 8.125rem;
  height: 8.125rem;
  border-radius: 50%;
  background: #fff8e5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}

.biz-area .biz-card.is-active {
  background: #f8b500;
  border-color: #f8b500;
}

.biz-area .biz-card.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11.0625rem;
  height: 100%;
  background: url(/image/sub/img_biz-card_bg.svg)no-repeat center;
  z-index: -1;
}

.biz-area .biz-card.is-active .biz-card__icon {
  background: var(--white);
}

/* hover 효과는 PC(≥1025px)에서만 — 모바일(≤1024px)은 스크롤 is-active로 대체 */
@media (min-width: 1025px) {
  .biz-area .biz-card:hover {
    background: #f8b500;
    border-color: #f8b500;
  }

  .biz-area .biz-card:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11.0625rem;
    height: 100%;
    background: url(/image/sub/img_biz-card_bg.svg)no-repeat center;
    z-index: -1;
  }

  .biz-area .biz-card:hover .biz-card__icon {
    background: var(--white);
  }
}

.biz-area .biz-card__icon img {
  width: auto;
  height: auto;
  max-width: 4rem;
  max-height: 5rem;
}

.biz-area .biz-card__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.05rem;
  color: var(--color22);
  line-height: 1.2;
}

.biz-area .biz-card__desc {
  margin: 1.125rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.04rem;
  line-height: 1.6;
  color: var(--color55);
}

.biz-area .biz-card.is-active .biz-card__desc {
  color: var(--color33);
}

@media (max-width:1024px) {
  .biz-area .biz-cards {
    grid-template-columns: 1fr;
    max-width: 42.9375rem;
  }
}

@media (max-width:768px) {
  .life-cycle {
    padding: 2.5rem 0 1.25rem;
  }

  .biz-area {
    padding: 1.25rem 0 3.75rem;
  }

  .biz-area .biz-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    min-height: 0;
  }

  .biz-area .biz-card__icon {
    flex-basis: 5.625rem;
    width: 5.625rem;
    height: 5.625rem;
  }

  .biz-area .biz-card__icon img {
    max-width: 2.875rem;
    max-height: 3.5rem;
  }

  .biz-area .biz-card__title {
    font-size: 1.125rem;
  }

  .biz-area .biz-card__desc {
    font-size: 0.9375rem;
  }
}


/* ===== 유산기부 (legacy) ===== */
.content .legacy-intro {
  margin-block: 7.5rem 8.75rem;
}

.legacy-intro .text-box {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.legacy-intro .text-box>div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.legacy-intro .intro-title {
  color: var(--color22);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.legacy-intro .intro-desc {
  margin-top: 3.125rem;
}

.legacy-intro .intro-desc .label {
  margin-bottom: 1rem;
  color: var(--mainColor);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.legacy-intro .intro-desc .txt {
  color: var(--color44);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.legacy-intro .img-box {
  position: relative;
  flex: 0 0 auto;
  width: 17rem;
  height: 17rem;

}

.legacy-intro .img-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -2.5rem;
  right: -1.25rem;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  background: #cfe4a8;
}

.legacy-intro .img-box img {
  position: absolute;
  left: -100%;
  top: 20%;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 28.875rem;
  min-height: 28.875rem;
  border-radius: 50%;
  object-fit: cover;
}

.content .legacy-process {
  margin-block: 0;
  padding: 9.375rem 0;
  background: var(--colorfff5);
}

.legacy-process .process-title {
  margin-bottom: 3.75rem;
  color: var(--color22);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

.legacy-process .process-list {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 단계 연결 점선 (원형 중심 높이) */
.legacy-process .process-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5.78125rem;
  left: 10%;
  width: 80%;
  border-top: 1px dashed #d8c08e;
}

.legacy-process .step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 단계 사이 화살표 */
.legacy-process .step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 5.78125rem;
  left: 0;
  transform: translate(-50%, -50%);
  width: 1.125rem;
  height: 1.125rem;
  background: url(/image/sub/img_step_arrow.svg)no-repeat center / contain;
}

.legacy-process .circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.5625rem;
  height: 11.5625rem;
  margin-bottom: 1.875rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.06);
}

/* 원형 테두리(우상단 주황 호) */
.legacy-process .circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--mainColor) 0deg var(--arc, 135deg), transparent var(--arc, 135deg) 360deg);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 0.3125rem), var(--black) calc(100% - 0.3125rem));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 0.3125rem), var(--black) calc(100% - 0.3125rem));
  pointer-events: none;
}

.legacy-process .circle img {
  position: relative;
  width: auto;
  height: 3.375rem;
  object-fit: contain;
}

/* 단계별 진행 정도(주황 호 각도) — 단계가 올라갈수록 길어짐 */
.legacy-process .step:nth-child(1) .circle {
  --arc: 80deg;
}

.legacy-process .step:nth-child(2) .circle {
  --arc: 160deg;
}

.legacy-process .step:nth-child(3) .circle {
  --arc: 240deg;
}

.legacy-process .step:nth-child(4) .circle {
  --arc: 290deg;
}

.legacy-process .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--mainColor);
  border-radius: 3.125rem;
  background: var(--white);
  color: var(--mainColor);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.legacy-process .step-title {
  margin-top: 1rem;
  color: var(--color22);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.04em;
  text-align: center;
}

.legacy-process .step-desc {
  margin-top: 1rem;
  color: var(--color44);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.04em;
  text-align: center;
}

.legacy-process .step-contact {
  display: block;
  margin-top: 0.75rem;
  color: #888;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

/* 마지막 단계(주황 강조) */
.legacy-process .step.is-last .circle {
  background: var(--mainColor);
}

.legacy-process .step.is-last .circle::before {
  display: none;
}

.legacy-process .step.is-last .step-badge {
  border-color: var(--mainColor);
  background: var(--mainColor);
  color: var(--white);
}

@media (width <=1200px) {
  .legacy-process .process-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem 1.25rem;
  }

  .legacy-process .process-list::before,
  .legacy-process .step:not(:first-child)::before {
    display: none;
  }

  .legacy-process .step {
    flex: 0 0 calc(33.333% - 0.834rem);
  }

  .legacy-process .circle {
    width: 9rem;
    height: 9rem;
  }

  .legacy-intro .img-box {
    display: none;
  }

  .legacy-intro .intro-desc .txt br {
    display: none;
  }
}

@media (width <=1024px) {
  .content .legacy-intro {
    margin-block: 3.75rem 5rem;
  }

  .legacy-intro .inner-1400 {
    flex-direction: column;
    align-items: center;
    gap: 3.125rem;
  }

  .legacy-intro .intro-title {
    font-size: 2rem;
  }

  .legacy-intro .intro-desc .label {
    font-size: 1.5rem;
  }

  .legacy-intro .intro-desc .txt {
    font-size: 1.25rem;
  }

  .legacy-intro .img-box {
    width: 22rem;
    height: 22rem;
  }

  .content .legacy-process {
    padding: 5rem 0;
  }

  .legacy-process .process-title {
    margin-bottom: 2.5rem;
  }

  .legacy-process .step-desc br {
    display: none;
  }



}

@media (width <=768px) {
  .legacy-intro .intro-title {
    font-size: 1.5rem;
  }

  .legacy-intro .intro-desc .txt {
    font-size: 1.125rem;
  }

  .legacy-intro .img-box {
    width: 18rem;
    height: 18rem;
  }

  .legacy-intro .img-box::before {
    width: 11rem;
    height: 11rem;
    top: -1.5rem;
  }

  .legacy-process .step {
    flex: 0 0 calc(50% - 0.625rem);
  }
}

@media (width <=640px) {}

@media (width <=480px) {
  .legacy-intro .img-box {
    width: 15rem;
    height: 15rem;
  }

  .legacy-process .step {
    flex: 0 0 100%;
  }
}


/* ===== 재능후원 (talent) ===== */

.talent-about {
  margin-top: 8.75rem;
}

.talent-about .flex {
  align-items: flex-start;
}

.talent-about .about-left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.talent-about .en-title {
  color: var(--mainColor);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.05em;
}

.talent-about .contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 1.125rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(252, 175, 23, 0.50);
  background: rgba(252, 175, 23, 0.10);
  color: var(--color22);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045rem;
  box-sizing: border-box;
}

.talent-about .about-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 1 45.1875rem;
}

.talent-about .about-right p {
  color: var(--color44);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.talent-gallery {
  width: 100%;
  overflow: hidden;
  margin-block: 8.375rem 0;
}

.talent-gallery ul {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  list-style: none;
}

/* 무한 가로 롤링 */
.talent-gallery .talent-roll {
  animation: talent-roll 30s linear infinite;
  will-change: transform;
}

/* .talent-gallery:hover .talent-roll {
  animation-play-state: paused;
} */

@keyframes talent-roll {
  from {
    transform: translateX(0);
  }

  to {
    /* 복제본 1세트(li 6개 + gap 6개)만큼 이동 = 전체 너비의 절반 + gap 절반 */
    transform: translateX(calc(-50% - 0.625rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-gallery .talent-roll {
    animation: none;
  }
}

.talent-gallery li {
  flex: 0 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
}

.talent-gallery li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (width <=1200px) {
  .talent-about {
    margin-top: 5rem;
  }

  .talent-about .en-title br {
    display: none;
  }

  .talent-about .flex {
    flex-direction: column;
    gap: 2.5rem;
  }

  .talent-about .about-right {
    flex: 1;
  }
}

@media (width <=1024px) {
  .talent-about .en-title {
    font-size: 2.25rem;
  }

  .talent-gallery ul {
    font-size: 0.6rem;
  }
}

@media (width <=768px) {


  .talent-about .about-right {
    flex-basis: auto;
  }

  .talent-about .en-title {
    font-size: 2rem;
  }





  .talent-gallery ul {
    font-size: 0.45rem;
  }

}

@media (width <=640px) {
  .talent-about .en-title br {
    display: block;
  }

  .talent-about .contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .talent-about .contact .line {
    display: none;
  }
}

/* ===== 기념일후원 (day) ===== */
.day-intro {
  position: relative;
  padding-block: 7.5rem 0;
}

.day-intro .inner-1400 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.day-intro .intro-desc {
  text-align: center;
}

.day-intro .intro-desc p {
  color: var(--color33);
  text-align: center;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.065rem;
}

.day-intro .intro-desc p+p {
  margin-top: 1.875rem;
}

/* 좌우 인트로 이미지: 앞=원형 사진 / 뒤=초록 데코 (좌우로 넘침) */
.day-intro .visual {
  position: absolute;
  top: 50%;
  /* 넓은 화면에선 28rem 유지, 좁아지면 화면 너비에 비례해 축소(텍스트 침범 방지) */
  width: min(28rem, 23.3vw);
  transform: translateY(-50%);
  z-index: 0;
}

.day-intro .visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* 앞: 원형 사진 */
.day-intro .visual.visual--right img:first-child {
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

/* 뒤: 초록 데코 */
.day-intro .visual.visual--right img:last-child {
  position: absolute;
  z-index: 0;
}

.day-intro .visual--left {
  top: 30%;
  left: -20%;
  width: min(75rem, 62.5vw);
  z-index: -1;
}



.day-intro .visual--right {
  right: 1.25rem;
}

.day-intro .visual--right img:last-child {
  left: -8rem;
  bottom: -45%;
  width: min(20.3125rem, 16.9vw);
}

/* 후원 종류 카드 */
.day-cards {
  margin-top: 8.75rem;
}

.day-cards .inner-1400 {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.day-cards ul {
  display: flex;
  gap: 1.6875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-card {
  flex: 1;
  border: 1px solid var(--colordd);
  border-radius: 1.25rem;
  background: var(--white);
  overflow: hidden;
}

.day-card .top {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13.625rem;
  background: var(--mainColor);
}

.day-card .top img {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: contain;
}

.day-card .body {
  padding: 2rem 2.5rem 2.5rem;
}

.day-card .body .tit {
  display: block;
  color: var(--color22);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.day-card .body .desc {
  margin-top: 0.875rem;
  color: var(--color66);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

/* 온기나눔장 안내 배너 */
.day-notice {
  padding: 1.75rem 2.5rem;
  border-radius: 1.25rem;
  background: #FFE9BE;
  text-align: center;
}

.day-notice p {
  color: var(--color44);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.day-notice p span {
  font-weight: 800;
}

@media (width <=1024px) {
  .day-intro .visual {
    display: none;
  }

  .day-intro {
    padding-top: 2.5rem;
  }

  .day-cards {
    margin-top: 5rem;
  }
}

@media (width <=768px) {
  .day-cards ul {
    flex-direction: column;
  }

  .day-card .top {
    min-height: 11rem;
  }

  .day-notice {
    padding: 1.5rem 1.25rem;
    text-align: left;
  }

  .day-intro .intro-desc p {
    font-size: 1.125rem;
  }
}