:root {
  --aircare-text: #111111;
  --aircare-muted: #666666;
  --aircare-line: #d9d9d9;
  --aircare-surface: #ffffff;
  --aircare-surface-alt: #f7f3ef;
  --aircare-accent: #a50034;
  --aircare-shadow: 0 20px 50px rgba(17, 17, 17, 0.08);
}

.pc-only {
  display: block;
}
.mo-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .mo-only {
    display: block;
  }
}

.underline-shadow {
  box-shadow: inset 0 -7.28em 0 #FBFF004D; /* = rgba(251, 255, 0, 0.3) */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.fx-fade-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--fade-delay, 0ms);
  will-change: opacity, transform;
}

.fx-fade-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .fx-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

main {
  font-family: Pretendard, sans-serif;
  margin: 0 auto;
  margin-top: 100px;
  background-color: #fff;
}
.review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
  text-align: center;
}
.review-header .note li {
  text-align: center;
  color: #888888;
  display: inline-block;
  margin-top: 32px;
}

.eyebrow {
  padding: 4px 18px;
  display: inline-block;
  border-radius: 4px;
  background: rgb(219, 52, 55, 0.1);
  color: #DB3437;
  line-height: 1.68;
  margin-bottom: 12px;
  font-weight: 700;
}

.title {
  font-size: 50px;
  line-height: 1.4;
  font-weight: 700;
  color: #191C1F;
  margin-bottom: 14px;
}

.subtitle {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.32px;
  font-weight: 600;
  color: #444444;
  margin-bottom: 32px;
}

.desc {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: #191C1F;
}

.kv {
  overflow: hidden;
  position: relative;
}

.kv img {
  display: block;
  width: 100%;
  height: auto;
}

.summary-section {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 104px;
}
@media screen and (max-width: 768px) {
  .summary-section {
    gap: 32px;
    margin-bottom: 60px;
  }
}

.summary-title {
  color: #191C1F;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 168%;
}
@media screen and (max-width: 768px) {
  .summary-title {
    font-size: 24px;
    line-height: 150%;
    letter-spacing: -0.48px;
  }
}

.summary-items {
  border-radius: 30px;
  background: rgba(245, 245, 245, 0.60);
  display: flex;
  padding: 48px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .summary-items {
    width: 100%;
    padding: 24px 20px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 7.61px; 
  }
}
.summary-item {
  color: #191C1F;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.4px;
  position: relative;
  padding-left: 15px;
}
@media screen and (max-width: 768px) {
  .summary-item {
    text-align: left;
    font-size: 14px;
    letter-spacing: -0.28px;
    padding-left: 13px;
  }
}
.summary-item p {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .summary-item {
    text-align: left;
    font-size: 14px;
  letter-spacing: -0.28px;
  }
}
.summary-item::before {
  content: "•";
  color: #191C1F;
  display: inline-block;
  position: absolute;
  left: 0;
  top: -1px;
}
.article-note {
  padding: 0 30px;
  color: #646669;
  font-size: 14px;
  font-weight: 500;
  line-height: 144%; /* 20.16px */
  letter-spacing: -0.28px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .article-note {
    font-size: 11px;
    font-weight: 500;
    line-height: 142%;
    letter-spacing: -0.22px;
    left: auto;
    bottom: auto;
    transform: none;
    position: static;
    margin-top: 10px;
  }
}
.contents-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #fff;
}
.review-tabs-wrap {
  max-width: 1380px;
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: -1px;
}
.contents-tab {
  flex: 1;
  padding: 15px 24px;
  color: #646669;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  transition: border-color 0.5s ease, color 0.5s ease;
  cursor: pointer
}

.contents-tab:hover,
.contents-tab:focus-visible {
  border-bottom: 2px solid #111111;
  border-color: #111111;
  color: #111111;
  outline: none;
}

.contents-tab.is-active {
  border-bottom: 2px solid #111111;
  border-color: #111111;
  color: #111111;
}

.contents-panels:has(.care-service.is-active) {
  background-color: #F3F5F7;
}

.contents-panel {
  max-width: 1380px;
  margin: 0 auto;
  padding-top: 104px;
  padding-bottom: 200px;
}
.contents-panel[hidden] {
  display: none !important;
}

.panel-kicker {
  text-align: center;
  font-size: 16px;
  line-height: 1.68;
  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #DB3437;
}

.panel-title {
  font-size: 40px;
  line-height: 1.68;
  font-weight: 700;
  margin-bottom: 60px;
  text-align: center;
}

.panel-title:has(+ .panel-desc) {
  margin-bottom: 12px;
}

.panel-desc {
  max-width: 720px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.75;
  color: #191C1F;
  text-align: center;
  font-weight: 500;
  margin: 0 auto;
}
.panel-title + .panel-desc {
  margin-top: 0;
}



.gray-box {
  width: 100%;
  background-color: rgba(245, 245, 245, 0.6);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
}
.gray-txt-box {
  margin-top: 12px;
  position: relative;
  max-width: 650px;
  width: 100%;
}
.gray-txt-box h5 {
  font-size: 24px;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: -0.48px;
  text-align: center;
}
.gray-txt-box .quotation01 {
  position: absolute;
  top: 10px;
  left: 46.48px;
}
.gray-txt-box .quotation02 {
  position: absolute;
  top: 10px;
  right: 46.78px;
}
.gray-txt-box p {
  font-size: 18px;
  font-weight: 500;
  line-height: 158%;
  letter-spacing: -0.36px;
  text-align: center;
  color: #191C1F;
  margin-top: 10px;
}
.care-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  color: #111111;
  margin-top: 170px;
}
.care-process h4 {
  font-size: 28px;
  font-weight: 700;
  line-height: 168%
}
.care-process .care-process-contents {
  position: relative;
}
.care-process .care-process-contents .care-process-item {
  width: 1296px;
  height: 184px;
}

.care-process .care-process-contents .img-box img {
  position: absolute;
  top: 0;
}
.care-process .care-process-contents .img-box img:nth-child(1) {
  left: 10px;
  width: 149px;
  height: 118px;
}
.care-process .care-process-contents .img-box img:nth-child(2) {
  left: 242.65px;
  width: 130px;
  height: 118px;
}
.care-process .care-process-contents .img-box img:nth-child(3) {
  left: 496.91px;
  width: 113px;
  height: 118px;
}
.care-process .care-process-contents .img-box img:nth-child(4) {
  left: 707.95px;
  width: 133px;
  height: 118px;
}
.care-process .care-process-contents .img-box img:nth-child(5) {
  left: 948.31px;
  width: 132px;
  height: 130px;
}
.care-process .care-process-contents .img-box img:nth-child(6) {
  top: 8px;
  left: 1151.51px;
  width: 144px;
  height: 118px;
}
.care-process .care-process-contents .care-process-line {
  position: absolute;
  top: 130px;
  left: 78px;
  width: 1182px;
  height: 8px;
}

.care-process .care-process-contents .txt-box li {
  position: absolute;
  bottom: 0;
  line-height: 180%;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
.care-process .care-process-contents .txt-box li:nth-child(1) {
  left: 8px;
}
.care-process .care-process-contents .txt-box li:nth-child(2) {
  left: 250px;
}
.care-process .care-process-contents .txt-box li:nth-child(3) {
  left: 516px;
}
.care-process .care-process-contents .txt-box li:nth-child(4) {
  left: 734px;
}
.care-process .care-process-contents .txt-box li:nth-child(5) {
  left: 988px;
}
.care-process .care-process-contents .txt-box li:nth-child(6) {
  left: 1227px;
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
  .care-process .care-process-contents .care-process-item {
    width: 93.913vw;
    height: 13.333vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(1) {
    left: 2.899vw;
    width: 10.797vw;
    height: 8.551vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(2) {
    left: 20.072vw;
    width: 9.42vw;
    height: 8.551vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(3) {
    left: 38.406vw;
    width: 8.188vw;
    height: 8.551vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(4) {
    left: 53.986vw;
    width: 9.638vw;
    height: 8.551vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(5) {
    left: 71.014vw;
    width: 9.565vw;
    height: 9.42vw;
  }

  .care-process .care-process-contents .img-box img:nth-child(6) {
    top: 0.58vw;
    left: 85.58vw;
    width: 10.435vw;
    height: 8.551vw;
  }

  .care-process .care-process-contents .care-process-line {
    top: 9.42vw;
    left: 5.652vw;
    width: 85.652vw;
    height: 0.5797vw;
  }

  .care-process .care-process-contents .txt-box li {
    font-size: clamp(11px, 1.159vw, 16px);
  }

  .care-process .care-process-contents .txt-box li:nth-child(1) {
    left: 0.58vw;
  }

  .care-process .care-process-contents .txt-box li:nth-child(2) {
    left: 18.116vw;
  }

  .care-process .care-process-contents .txt-box li:nth-child(3) {
    left: 37.391vw;
  }

  .care-process .care-process-contents .txt-box li:nth-child(4) {
    left: 53.188vw;
  }

  .care-process .care-process-contents .txt-box li:nth-child(5) {
    left: 71.594vw;
  }

  .care-process .care-process-contents .txt-box li:nth-child(6) {
    left: 88.913vw;
  }
}
.before-after {
  width: 100%;
}

.before-after .care-process-contents {
  position: static;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.before-after .before-after-card.gray-box {
  justify-content: flex-start;
  align-items: stretch;
  padding: 32px 41px;
  border-radius: 30px;
  background-color: #F9F9F9;
}

.before-after-label {
  font-size: 20px;
  line-height: 1.68;
  font-weight: 700;
  text-align: center;
  color: #111111;
}
.before-after-card.is-after .before-after-label{
  color: #DB3437;
}

.before-after-media {
  margin-top: 24px;
  overflow: hidden;
  border-radius: 16px;
}

.before-after-media img {
  display: block;
  width: 100%;
  height: auto;
}

.before-after-quote {
  position: relative;
  margin-top: 48px;
  padding: 87px 70px 38px;
  border-radius: 14px;
  height: 614px;
}

.before-after-quote::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 34px;
  background-image: url("https://www.lge.co.kr/kr/story/hands-on-reviews/img/lglife-air-conditioner/double-quotation03.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.before-after-quote p {
  padding: 24px 26px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.10);
  color: #444;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.32px;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .before-after-quote {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0 10px;
    margin-top: 102px;
  }
  .before-after-quote p {
    position: static;
    padding: 16px 32px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    color: var(--Color-Neutral-Gray700, #191C1F);
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    line-height: 144%;
    letter-spacing: -0.28px;
  }
}
@media screen and (min-width: 768px) {
  .is-before .before-after-quote p:nth-child(1) {
    width: 252px;
    height: auto;
    top: 90px;
    left: 30px;
  }
  .is-before .before-after-quote p:nth-child(2) {
    font-size: 20px;
    width: 300px;
    height: auto;
    top: 111px;
    right: 30px;
  }
  .is-before .before-after-quote p:nth-child(3) {
    font-size: 20px;
    width: 252px;
    height: auto;
    top: 264px;
    left: 31px;
  }
  .is-before .before-after-quote p:nth-child(4) {
    font-size: 16px;
    width: 285px;
    height: auto;
    top: 321px;
    right: 42px;
  }
  .is-after .before-after-quote p:nth-child(1) {
    font-size: 20px;
    width: 398px;
    height: auto;
    top: 110px;
    left: 60px;
  }
  .is-after .before-after-quote p:nth-child(2) {
    font-size: 24px;
    width: 416px;
    height: auto;
    top: 293px;
    right: 30px;
  }
  .is-after .before-after-quote p:nth-child(3) {
    font-size: 16px;
    width: 400px;
    height: auto;
    top: 403px;
    left: 60px;
  }
}

.before-after-quote p::before {
  content: none;
}

.before-after-list {
  margin-top: 19px;
}

.before-after-list li {
  position: relative;
  padding: 40px 32px 40px 70px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: #191C1F;
}
.before-after-list li:last-child {
  border-bottom: none;
}

.before-after-list li::before {
  content: "";
  background-image: url("https://www.lge.co.kr/kr/story/hands-on-reviews/img/lglife-air-conditioner/x-btn.svg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  top: 50%;
  left: 32px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
}

.before-after-card.is-after .before-after-list li::before {
  background-image: url("https://www.lge.co.kr/kr/story/hands-on-reviews/img/lglife-air-conditioner/check-btn.svg");
}

.note {
  width: 100%;
}
.kv-desc {
  color: #F0F0F0;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.24px;
  position: absolute;
  left: 41px;
  bottom: 16px;
  padding-left: 10px;
}
.kv-desc::before {
  content: "*";
  display: inline-block;
  color: #F0F0F0;
  position: absolute;
  left: 0;
  top: 0;
}
.note li {
  padding-left: 10px;
  font-size: 14px;
  line-height: 1.44;
  color: #646669;
  text-align: left;
  position: relative;
  overflow-wrap: break-word;
}
.note li::after {
  content: "*";
  display: inline-block;
  color: #646669;
  position: absolute;
  top: 0;
  left: 0;
}
.note li a {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.guide-inner {
  margin: 0 auto;
  border-top: 1px solid #ddd;
  padding: 100px 0;
}
.guide-inner .guide-box {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.guide-inner .guide-box a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #F7F7F7;
  flex: 1;
  border-radius: 10px;
  padding: 38px 40px;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.32px;
}
.guide-inner .call-box {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #FDF3F3;
  padding: 40px;
  margin-top: 20px;
  border-radius: 10px;
}
.guide-inner .call-box .call-title {
  color: #191C1F;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.4px;
}
.guide-inner .call-box .call-time {
  color: #191C1F;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.3px;
  margin-top: 4px;
}
.guide-inner .call-box .left-box {
  color: #DB3437;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.8px;
}


.tip-check-list {
  width: 100%;
  max-width: 780px;
  border: 1px solid #d8d8d8;
  margin: 0 auto;
  margin-top: 70px;
}

.tip-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: center;
  min-height: 100px;
  border-bottom: 1px solid #DDDDDD;
}

.tip-check-row:last-child {
  border-bottom: 0;
}

.tip-check-text {
  margin: 0;
  padding: 33px 40px;
  color: #191C1F;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.48px;
}

.tip-check-text strong {
  font-weight: 700;
}

.tip-check-icon {
  width: 24px;
  height: 22px;
  margin: 0 auto;
}
.tip-check-icon-box {
  padding: 38px;
  border-left: 1px solid #DDDDDD;
}
.tip-check-row > .tip-check-icon {
  display: block;
  padding-left: 1px;
}



.care-service .care-service-kv {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.care-service-kv-txt {
  position: absolute;
  top: 162px;
  left: 80px;
  z-index: 2;
}
.care-service-kv-img-box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  height: 638px;
}
.care-service-kv-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.care-service-kv .panel-title {
  text-align: left;
}
.care-service-kv .panel-kicker {
  text-align: left;
}
.care-service-kv .panel-desc {
  text-align: left;
}
.care-service-notice {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 48px;
  background-color: #fff;
  border-radius: 20px;
  margin-top: 20px;
  color: #191C1F;
}
.care-service-notice-head {
  padding-right: 114px;
  border-right: 1px solid #DDD;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.care-service-icon {
  width: 32px;
  height: 32px;
}
.care-service-notice-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.48px;
}
.care-service-notice-desc {
  padding-left: 114px;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.36px;
}

.care-benefit {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
}
.care-benefit-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 136%;
  letter-spacing: -0.64px;
  text-align: center;
}
.care-benefit-list-wrap {
  margin-top: 60px;
}
.care-benefit-list {
  display: flex;
  height: 300px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 20px;
  background: #FFF;
  padding: 40px 0;
  box-sizing: border-box;
}
.care-benefit-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  height: 100%;
  border-right: 1px solid #DDD;
}
.care-benefit-item:last-child {
  border-right: 0;
}
.care-benefit-point {
  padding: 8px 20px;
  border-radius: 24px;
  border: 2px solid #DB3437;
  font-size: 14px;
  font-weight: 700;
  line-height: 144%;
  letter-spacing: -0.28px;
  color: #DB3437;
  margin-bottom: 20px;
}
.care-benefit-item-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 150%; /* 30px */
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
.care-benefit-item-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 180%; /* 32.4px */
  letter-spacing: -0.36px;
  text-align: center;
}
.care-benefit .note {
  margin-top: 16px;
}
.care-benefit-link {
  background-color: #111;
  padding: 12px 32px;
  border-radius: 27px;
  color: #fff;
  width: 228px;
  text-align: center;
  margin: 0 auto;
  margin-top: 32px;
  line-height: 158%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
  transition: background-color 0.3s ease-in-out;
}
.care-benefit-link:hover,
.care-benefit-link:focus {
  background-color: #2b2b2b;
  color: #fff;
}

.care-benefit-expand-wrap {
  max-width: 800px;
  width: 100%;
  padding: 0 32px 32px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  margin-top: 100px;
}
.care-benefit-expand-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.56px;
  padding: 19px;
  text-align: center;
  border-bottom: 1px solid #DDD;
}
.care-benefit-expand-img {
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid #DDD;
}
.care-benefit-expand-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 24px;
}
.care-benefit-expand-item {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: -0.32px;
  padding: 5.5px 0 5.5px 25px;
  border-bottom: 1px solid #DDD;
}
.care-benefit-expand-item::after {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #191C1F;
  border-radius: 50%;
  position: absolute;
  top: 47%;
  left: 13px;
  transform: translateY(-50%);
}
.care-benefit-expand-item:nth-child(odd) {
  border-right: 1px solid #DDD;
}
.care-benefit-expand {
    display: flex;
    flex-direction: column;
    align-items: center
}
.care-benefit-expand .care-benefit-toggle-btn {
  padding: 12px 32px;
  background-color: #111;
  color: #fff;
  border-radius: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.care-benefit-expand .care-benefit-toggle-btn .care-benefit-toggle-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 158%;
  letter-spacing: -0.36px;
}
.care-benefit-expand .care-benefit-toggle-btn .care-benefit-toggle-icon,
.care-benefit-expand .care-benefit-toggle-btn img {
  width: 12px;
  height: 7px;
  transition: transform 0.3s ease;
}
.care-benefit-expand .care-benefit-toggle-btn[aria-expanded="true"] .care-benefit-toggle-icon,
.care-benefit-expand .care-benefit-toggle-btn[aria-expanded="true"] img {
  transform: rotate(180deg);
}
.care-benefit-detail {
  margin-top: 32px;
}
.care-benefit-detail .note {
  margin-top: 16px;
}
.care-benefit-detail-box {
  background-color: #F3F5F7;
  padding: 32px 42px 0 62px;
  border-radius: 20px;
}
.care-benefit-timeline {
  display: flex;
  flex-direction: column;
}
.care-benefit-timeline-item {
  padding-bottom: 79px;
  position: relative;
}
.care-benefit-timeline-item:last-child {
  padding-bottom: 32px;
}
.care-benefit-timeline-item::after {
  content: "";
  width: 1px;
  height: 85%;
  background-color: #DB3437;
  position: absolute;
  bottom: 0;
  left: -25px;
  display: block;
}
.care-benefit-timeline-item:last-child:after {
  display: none;
}
.care-benefit-timeline-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #DB3437;
  position: absolute;
  top: 10px;
  left: -28px;
  display: block;
}
.care-benefit-timeline-item:nth-child(1)::after {
  height: 92%;
}
.care-benefit-timeline-item:nth-child(3)::after {
  height: 90%;
}
.care-benefit-timeline-title {
  text-align: left;
  color: #DB3437;
  font-size: 18px;
  font-weight: 700;
  line-height: 158%; /* 28.44px */
  letter-spacing: -0.36px;
}
.care-benefit-timeline-desc {
  margin-top: 4px;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
  letter-spacing: -0.36px;
}
.care-benefit-compare {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}
.care-benefit-compare-col {
    flex: 1;
}
.care-benefit-compare-title {
  padding: 8px;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  border-bottom: 1px solid #DDD;
}
.care-benefit-compare-desc {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 144%; /* 20.16px */
  letter-spacing: -0.28px;
  text-align: center;
  padding: 25px;
}
.care-benefit-compare-col:first-child {
  border-right: 1px solid #DDD;
}

@media screen and (max-width: 768px) {
  .care-process .care-process-contents .care-process-item {
    width: 290px;
    height: 641px;
  }

  .care-process .care-process-contents .img-box img:nth-child(1) {
    left: 0.25px;
    width: 92.569px;
    height: 73.385px;
  }

  .care-process .care-process-contents .img-box img:nth-child(2) {
    left: 10.4px;
    top: 107px;
    width: 82.41px;
    height: 74.992px;
  }

  .care-process .care-process-contents .img-box img:nth-child(3) {
    top: 207px;
    left: 10.4px;
    width: 89.471px;
    height: 93.481px;
  }

  .care-process .care-process-contents .img-box img:nth-child(4) {
    top: 338px;
    left: 2.67px;
    width: 97.214px;
    height: 86.524px;
  }

  .care-process .care-process-contents .img-box img:nth-child(5) {
    top: 441px;
    left: 0;
    width: 103.808px;
    height: 102.988px;
  }

  .care-process .care-process-contents .img-box img:nth-child(6) {
    top: 559px;
    left: 3.55px;
    width: 100.261px;
    height: 82.45px;
  }

  .care-process .care-process-contents .care-process-line {
    top: 29.22px;
    left: 119.81px;
    width: 7px;
    height: 582px;
  }

  .care-process .care-process-contents .txt-box li {
    font-size: 15px;
    font-weight: 500;
  }

  .care-process .care-process-contents .txt-box li:nth-child(1) {
    top: 18.72px;
    left: 142.82px;
    bottom: auto;
  }

  .care-process .care-process-contents .txt-box li:nth-child(2) {
    top: 133.72px;
    left: 142.82px;
  }

  .care-process .care-process-contents .txt-box li:nth-child(3) {
    top: 248.72px;
    left: 142.82px;
  }

  .care-process .care-process-contents .txt-box li:nth-child(4) {
    top: 363.72px;
    left: 142.82px;
  }

  .care-process .care-process-contents .txt-box li:nth-child(5) {
    top: 478.72px;
    left: 142.82px;
  }

  .care-process .care-process-contents .txt-box li:nth-child(6) {
    top: 593.72px;
    left: 142.82px;
  }
}

@media screen and (max-width: 768px) {
  main {
    margin-top: 60px;
  }
  .eyebrow {
    font-size: 18px;
    font-weight: 600;
  }
  .title {
    font-size: 36px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .subtitle {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .desc {
    max-width: 305px;
    font-size: 16px;
  }
  .contents-tab {
    font-size: 14px;
  }
  .review-header {
    margin-bottom: 28px;
  }
  .tip-check-list {
    margin-top: 32px;
  }
  .tip-check-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    min-height: 48px;
  }
  .tip-check-text {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.45;
  }
  .tip-check-icon-box {
    padding: 18px;
  }
  .tip-check-icon {
    width: 12px;
    height: 11px;
  }
  .panel-kicker {
    font-size: 14px;
    font-weight: 600;
  }
  .panel-title {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: -0.56px;
    margin-bottom: 32px;
    font-weight: 600;
  }
  .contents-panel {
    padding: 60px 20px 80px 20px;
  }
  .contents-panel .gray-box {
    padding: 30px 20px 24px;
    border-radius: 7.61px;
  }
  .contents-panel .gray-box > img {
    width: 60px;
    height: 60px;
  }
  .gray-txt-box {
    max-width: 310px;
  }
  .gray-txt-box h5 {
    font-size: 15px;
    line-height: 145%;
    letter-spacing: -0.3px;
    font-weight: 600;
    width: 84%;
    margin: 0 auto;
  }
  .gray-txt-box .quotation01,
  .gray-txt-box .quotation02{
    width: 6.8px;
    height: 5.796px;
  }
  .gray-txt-box .quotation01 {
    top: 4px;
    left: 7.5px;
  }
  .gray-txt-box .quotation02 {
    top: 4px;
    right: 7.5px;
  }
  .gray-txt-box p {
    font-size: 12px;
    line-height: 180%;
    letter-spacing: -0.24px;
    margin-top: 4px;
  }
  .care-process h4 {
    font-size: 24px;
    font-weight: 600;
  }
  .care-process {
    gap: 20px;
    margin-top: 60px;
}
  .before-after .care-process-contents {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .before-after .before-after-card.gray-box {
    padding: 32px 16px 20px;
    border-radius: 16px;
  }

  .before-after-label {
    font-size: 20px;
  }

  .before-after-media {
    margin-top: 16px;
    border-radius: 12px;
  }

  .before-after-quote::before {
    top: -54px;
  }
  .before-after-quote p {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
  }

  .before-after-quote p::before {
    content: none;
  }

  .before-after-list {
    margin-top: 26px;
  }

  .before-after-list li {
    padding: 20px 20px 20px 60px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
  }

  .before-after-list li::before {
    width: 24px;
    height: 24px;
    margin-top: -14px;
    font-size: 14px;
    line-height: 20px;
    left: 24px;
  }

  .note {
    font-size: 11px;
  }
  .guide-inner {
    padding: 60px 20px;
  }
  .guide-inner .guide-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .guide-inner .guide-box a {
    width: 100%;
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 16px;
    align-items: center;
  }
  .guide-inner .guide-box img {
    width: 5.5px;
    height: 11px;
  }
  .guide-inner .call-box {
    flex-direction: column;
    align-items:flex-start;
    justify-content: space-between;
    gap: 32px;
    background-color: #FDF3F3;
    padding: 24px 20px;
    margin-top: 12px;
  }
  .guide-inner .call-box .call-title {
    font-size: 16px;
    font-weight: 600;
  }
  .guide-inner .call-box .call-time {
    font-size: 14px;
  }
  .guide-inner .call-box .left-box {
    text-align: left;
    font-size: 32px;
  }
  .care-service-kv-img-box {
    height: 320px;
  }
  .care-service-kv-txt {
    width: 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
  }
  .panel-desc {
    max-width: none;
    font-size: 16px;
    line-height: 145%;
  }
  .care-service-kv .panel-desc,
  .care-service-kv .panel-kicker,
  .care-service-kv .panel-title{
    text-align: center;
  }
  .panel-title:has(+ .panel-desc) {
    margin-bottom: 4px;
  }
  .care-benefit-expand .care-benefit-toggle-btn .care-benefit-toggle-text {
    font-size: 16px;
    font-weight: 600;
  }
  .care-service-notice {
    flex-direction: column;
    padding: 16px;
  }
  .care-service-notice-head {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    padding-bottom: 12px;
    font-size: 15px;
    gap: 10px;
  }
  .care-service-notice-desc {
    padding-left: 0;
    font-size: 12px;
    text-align: center;
    padding-top: 16px;
    line-height: 145%;
  }
  .care-benefit {
    margin-top: 80px;
  }
  .care-benefit-list {
    height: auto;
    flex-direction: column;
    padding: 33px 36px;
  }
  .care-benefit-item {
    border-right: none;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    height: 100%;
    width: 100%;
  }
  .care-benefit-item:last-child {
    border-bottom: 0;
  }
  .care-benefit-point {
    padding: 6px 16px;
    font-size: 12px;
    margin-bottom: 16px;
    font-weight: 600;
  }
  .care-service-icon {
    width: 20px;
    height: 20px;
  }
  .care-service-notice-title {
    font-size: 15px;
    font-weight: 600;
  }
  .care-benefit-title {
  font-weight: 600;
  font-size: 24px;
  }
  .care-benefit-list-wrap {
        margin-top: 40px;
  }
  .care-benefit-item-title {
    margin-bottom: 2px;
    font-weight: 600;
  }
  .care-benefit-link {
    font-size: 16px;
    font-weight: 600;
  }
  .care-benefit-expand-wrap {
    margin-top: 60px;
    padding: 0 16px 32px;
  }
  
  .care-benefit-expand-title {
    font-size: 20px;
    padding: 15px;
  }
  .care-benefit-expand-list {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 20px;
  }
  .care-benefit-expand-item {
    font-size: 14px;
    border-right: none !important;
  }
  .care-benefit-compare {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
  }
  .care-benefit-compare-col:first-child {
    border-right: none;
    border-bottom: 1px solid #000;
  }
  .care-benefit-detail-box {
    padding: 24px 27px 0 40px;
  }
  .care-benefit-timeline-title {
    font-size: 16px;
  }
  .care-benefit-timeline-desc {
    font-size: 14px;
  }
  .care-benefit-compare-title {
    padding: 6px;
  }
  .care-benefit-compare-desc {
    padding: 20px;
  }
  .care-benefit-timeline-item {
    padding-bottom: 40px;
    position: relative;
  }
  .care-benefit-timeline-item:last-child {
    padding-bottom: 25px;
  }
  .care-benefit-timeline-item::before {
    top: 8px;
    left: -18px;
  }
  .care-benefit-timeline-item::after {
    left: -16px;
  }
  .care-benefit-timeline-item:nth-child(1)::after {
    height: 94.5%;
  }
  .care-benefit-timeline-item:nth-child(3)::after {
    height: 93%;
  }
  .care-benefit-timeline-item:nth-child(4)::after {
    height: 82%;
  }
  .kv-desc {
    color: #444444;
    font-size: 12px;
    left: 19px;
    width: 83%;
    font-weight: 400;
  }
  .kv-desc::before {
    color: #444444;
  }
}