.main {
  position: relative;
  z-index: 100;
}

/* full-page */
.full-page {
  width: 100%;
  height: 100%;

  & > .swiper-pagination {
    display: flex;
    flex-direction: column;
    right: 6rem;
    padding-bottom: 6.6rem;
    width: auto;

    .pagination-button {
      display: flex !important;
      justify-content: flex-end;
      width: 100%;
      height: max-content;
      text-align: right;
      column-gap: 1rem;
      background: none;
      color: var(--alpha-white-50);
      opacity: 1;
      margin: 0 !important;
      transition: color 0.3s;
      padding-block: 0.5rem;

      .pagination-title {
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-bold);
      }

      .pagination-var {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.4rem;
        height: 2rem;
        border-radius: 50px;
        background: var(--alpha-white-50);
        transition: all 0.3s;
      }

      &.swiper-pagination-bullet-active,
      &:active {
        color: var(--color-beige);
      }

      &:active .pagination-var,
      &.swiper-pagination-bullet-active .pagination-var {
        background: var(--color-beige);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-beige);
        }
        &:hover .pagination-var {
          background: var(--color-beige);
        }
        &:hover .pagination-var {
          background: var(--color-beige);
        }
      }
    }
  }
}

body.section06-active,
body.section08-active,
body.section09-active,
body.section17-active {
  .full-page {
    & > .swiper-pagination {
      .pagination-button { 
        color: var(--alpha-black-50);
        
        .pagination-var {
          background: var(--alpha-black-50);
        }
        
        &.swiper-pagination-bullet-active,
        &:active {
          color: var(--color-beige);
          text-shadow: 0 2px 6px var(--alpha-black-15);
        }

        &:active .pagination-var,
        &.swiper-pagination-bullet-active .pagination-var {
          background-color: var(--color-beige);
          box-shadow: 0 2px 6px var(--alpha-black-15);
        }
        
        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: var(--color-beige);
          }
          &:hover .pagination-var {
            background: var(--color-beige);
          }
        }
      }
    }
  }
}

/* button */
.arrow-button {
  display: inline-block;
  text-align: center;
  padding: 1.2rem 7rem 1.2rem 4rem;
  border-radius: 5rem;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi-bold);
  transition: all 0.3s;
  position: relative;

  .icon-default,
  .icon-hover {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .icon-default {opacity: 1;}
  .icon-hover {opacity: 0;}

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      border: 1px solid var(--color-beige);
      color: var(--color-beige);

      .icon-default {opacity: 0;}
      .icon-hover {opacity: 1;}
    }
  }

  &:active {
    border: 1px solid var(--color-beige);
    color: var(--color-beige);

    .icon-default { opacity: 0; }
    .icon-hover { opacity: 1; }
  } 

  &.black {
    border: 1px solid var(--color-black);
    color: var(--color-black);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        border: 1px solid var(--color-beige);
        color: var(--color-beige);
  
        .icon-default {opacity: 0;}
        .icon-hover {opacity: 1;}
      }
    }

    &:active {
      border: 1px solid var(--color-beige);
      color: var(--color-beige);
  
      .icon-default { opacity: 0; }
      .icon-hover { opacity: 1; }
    }
  }
}

/* common */
.backdrop {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--alpha-black-40);
  z-index: 200;
}

/* .section01 - 재혼 */
.section01 {
  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    overflow: hidden;
  }

  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .swiper-slide{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .slide-title{
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    text-shadow: 0 2px 6px var(--alpha-black-25);
    z-index: 300;
  }

  .section-info{
    z-index: 200;
    margin-top: 8rem;
  }

  .swiper-slide.slide01 {
    .slide-image {
      background: url('/assets/images/main/section01/section01_bg01.png') no-repeat center / cover;
    }

    .slide-title {
      position: relative;
      left: 22%;
      transform: translateX(-50%);
      align-items: start;
      row-gap: 1rem;
      font-size: var(--font-size-xxl);
      font-weight: var(--font-weight-regular);

      & > div:nth-of-type(2){
        display: flex;
        align-items: center;
        gap: 1rem;
        
        img{
          display: inline-block;
          vertical-align: middle;
          width: 2.6rem;
          padding-bottom: 1.6rem;
        }
      }
    }

    .section-info{
      padding-left: 4%;
    }
  }

  .swiper-slide.slide02 {
    .slide-image {
      background: url('/assets/images/main/section01/section01_bg02.png') no-repeat center / cover;
    }

    .slide-title {
      align-items: center;
      font-size: var(--font-size-lg);
      text-align: center;

      strong {
        color: var(--color-beige);
        font-weight: var(--font-weight-extra-bold);
      }

      & > div:last-of-type{
        font-size: var(--font-size-xxl);
        font-weight: var(--font-weight-bold);
        margin-top: 2rem;
      }
    }
  } 
}

/* .section02 - 정통성 */
.section02 {
  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    overflow: hidden;
  }

  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .slide-title{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
    z-index: 300;
    text-align: center;
    font-size: var(--font-size-xl);

    strong {
      color: var(--color-beige);
      font-weight: var(--font-weight-extra-bold);
    }
  }

  .swiper-slide.slide01 {
    background: url('/assets/images/main/section02/section02_bg01.png') no-repeat center / cover;

    .slide-title {
      text-shadow: 0 2px 6px var(--alpha-black-25);
      font-weight: var(--font-weight-light);

      span{color: var(--color-beige);}
      .br01, .br02 {display: none;}

      & > div:nth-of-type(3){
        margin-top: 3rem;
        font-size: var(--font-size-sm);
        line-height: 1.6;
      }
    }
  }

  .swiper-slide.slide02 {
    background: url('/assets/images/main/section02/section02_bg02.png') no-repeat center / cover;

    .slide-title {
      text-shadow: 0 2px 6px var(--alpha-black-25);
      font-weight: var(--font-weight-light);

      .text-mobile,
      .br {display: none;}

      & > div:nth-of-type(4){
        margin-top: 4rem;
        line-height: 1.4;
        font-size: var(--font-size-sm);
      } 
     }
  }
}

/* .section03 - 돌싱전문 */
.section03 {
  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
  }

  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    .image {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .text-area {
    z-index: 100;
    position: absolute;
    padding: 28vh 0 0 6rem;
    right: 0;
    width: 54%;
    height: 100%;
    background: var(--alpha-black-40);
    text-shadow: 0 2px 6px var(--alpha-black-25);

    .text-mobile{display: none;}
  }

  .slide-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    word-break: keep-all;

    & > .fade-up-in-and-out-target:not(.slide-caption) {
      line-height: calc(100% + 2rem);
    }

    strong {
      color: var(--color-beige);
      font-weight: var(--font-weight-extra-bold);
    }
  }

  .slide-caption {
    margin-top: 4rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    line-height: 1.4;
  }
}

/* .section04 - 퍼플스그룹 */
.section04 {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-black-40);
    z-index: 200;
  }

  .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 100;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    z-index: 300;
  }

  .content {
    .section-title {
      display: block;
      text-align: center;
      color: var(--color-beige);
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extra-bold);
      text-shadow: 0 2px 6px var(--alpha-black-15);
      z-index: 300;
    }

    .section-description {
      text-align: center;
      color: var(--color-white);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-light);

      strong {
        font-weight: var(--font-weight-extra-bold);
      }
    }

    .test-list {
      margin: 7rem auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
      gap: 3.5rem;
    }

    .test-item {
      position: relative;
      aspect-ratio: 320 / 120;
      width: 320px;
      height: auto;

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3){
        animation-delay: 1s;
      }

      &:nth-of-type(4),
      &:nth-of-type(5),
      &:nth-of-type(6) {
        animation-delay: 1.5s;
      }

      a{
      display: block;
      position: relative;
      width: 100%;
      height: 100%;

      &:active,
      &:focus-visible {
        .img-default {opacity: 0;}
        .img-hover {opacity: 1;}
      }
    }

      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.3s;
        pointer-events: none;

        &.img-default {opacity: 1;}
        &.img-hover {opacity: 0;}
      }

      @media (hover: hover) and (pointer: fine) {
        a:hover {
          .img-default {opacity: 0;}
          .img-hover {opacity: 1;}
        }
      }
    }
  }
}

/* .section05 - 전문서비스 */
.section05 {
  position: relative;
  background: url('/assets/images/main/section05/section05_bg01.png') no-repeat center/cover;

  &::before {
    content: '';
    opacity: 0.6;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 100;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--container-inline-padding);
    z-index: 200;
  }

  .text-area {
    text-align: center;

    .section-title {
      text-transform: uppercase;
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-white);

      .br{display: none;}
    }

    .section-sub-title {
      margin-top: 1rem;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-regular);
      color: var(--color-white);
    }
  }

  .swiper-wrapper {
    width: 100%;
    max-width: 65%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3.6rem;
    justify-items: center;
    margin: 3rem auto 0;

    .swiper-slide {
      position: relative;
      aspect-ratio: 27 / 29;
      border-radius: 1rem;
      overflow: hidden;
  
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--alpha-black-60);
        transition: background 0.3s;
      }
  
      .service-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      .service-title{
        position: absolute;
        z-index: 1;
        left: 0;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        color: var(--color-white);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        transition: color 0.3s;
      }
  
      .service-sub-title{
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 1.3rem 0;
        background-color: var(--color-beige-05);
        color: var(--color-white);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semi-bold);
        text-shadow: 0 2px 6px var(--alpha-black-15);
        transition: background-color 0.3s;
      }
  
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          .service-title{color: var(--color-beige);}
          .service-sub-title{background-color: var(--color-hover-bg-06);}
        }
      }
  
      &:active {
        &:hover {
          .service-title{color: var(--color-beige);}
          .service-sub-title{background-color: var(--color-hover-bg-06);}
        }
      }
    } 
  }

  .service-box-container  {
    width: 65%;
  }

  .service-box-wrap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
    margin: 3rem auto 4rem;
    width: 100%;
    box-sizing: border-box;

    .service-box {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem;
      background: var(--alpha-white-70);
      border: 2px solid transparent;
      border-radius: 1rem;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semi-bold);
      color: var(--color-black);
      word-break: keep-all;
      box-shadow: 0 2px 4px var(--alpha-black-25);
      transition: all 0.3s;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background: var(--color-white);
          border: 2px solid var(--color-beige);
        }
      }

      &:hover {
        background: var(--color-white);
        border: 2px solid var(--color-beige);
      }
    }
  }
}

/* .section06 - 이혼통계 */
.section06 {
  position: relative;
  background: url('/assets/images/main/section06/section06_bg01.png') no-repeat center/cover;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .container {
    position: relative;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: start;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    padding-block: 8rem;
    margin-top: 5vh;
  }

  .section-title{
    color: var(--color-hover-bg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 2px 6px var(--alpha-black-25);
  }

  .statistics-swiper-container {
    width: 100%;
    max-width: 95rem;
    margin-top: 3rem;

    .statistics-swiper {
      position: relative;
      width: 100%;
      height: auto;
      border-radius: 1rem;
      overflow: hidden;
    }

    .img-description{
      font-size: var(--font-size-mini);
      font-weight: var(--font-weight-regular);
      color: var(--color-gray-04);
    }

    .img-description01{
      text-align: right;
      padding-right: 0.8rem;
    }

    .img-description02{
      padding-left: 0.8rem;
    }

    .statistics-content {
      width: 100%;

      img {
        width: 100%;
        height: auto;

        &.mobile-img{display: none;}
      }
    }

    .statistics-scrollbar {
      position: relative;
      max-width: 22%;
      height: 0.4rem;
      margin: 2rem auto 0;
      background: var(--alpha-white-20);
      border-radius: 0.2rem;
      overflow: hidden;

      .swiper-scrollbar-drag {
        background: var(--color-gray-04);
        border-radius: 0.2rem;
        transition: all 0.3s ease;
      }
    }
  }
}

/* .section07 - 돌싱파티 */
.section07 {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--alpha-black-40);
    z-index: 100;
  }

  .section-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: url('/assets/images/main/section07/section07_bg01.png') no-repeat center/cover;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    color: var(--color-white);
    text-align: center;
  }

  .section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 2px 6px var(--alpha-black-25);
    margin-bottom: 1rem;
    padding-inline: var(--container-inline-padding);

    strong{color: var(--color-beige);}
  }

  .section-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    padding-inline: var(--container-inline-padding);
    text-shadow: 0 2px 6px var(--alpha-black-25);
  }

  .swiper {
    --pagination-size: 1rem;
    --pagination-margin: 3rem;

    position: relative;
    max-width: 70%;
    margin-inline: 0;

    .swiper-wrapper {
      position: relative;
      height: auto;
      display: flex;
      margin-top: 6rem;
    }
  }

  .swiper-slide{
    width: 25%; 
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .card {
    margin-inline: 1rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    width: 30rem;
    height: 21rem;
    transition: all 0.3s ease-in-out;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        transform: scale(1.02);
      }
    }

    .card-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 100;
    }

    .card-text {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 400;
      text-align: center;
      color: var(--color-white);
      font-size: var(--font-size-xxs);
      font-weight: var(--font-weight-semi-bold);
      background-color: var(--color-hover-bg-08);
      backdrop-filter: blur(0.2rem);
      padding: 1.5rem 0;
    }

    .play {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      overflow: hidden;
      backdrop-filter: blur(0.2rem);
      z-index: 300;
      transition: all 0.3s ease-in-out;
    }
  }

  .section-info {
    font-size: var(--font-size-base);
    margin-top: 4rem;
    margin-bottom: 5rem;
    word-break: keep-all;
    line-height: 1.4;
    margin-inline: var(--container-inline-padding);
    font-weight: var(--font-weight-bold);

    strong{color: var(--color-beige);} 
    .br {display: none;}
  }
}

/* .section08 - CEO */
.section08 {
  position: relative;
  background: url('/assets/images/main/section08/section08_bg01.png') no-repeat center/cover;

  &::before {
    content: '';
    opacity: 0.6;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--alpha-black-10);
    z-index: 100;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 200;
  }

  .ceo-image-pc {
    width: 50%;
    height: 80%;
    background: url('/assets/images/main/section08/ceo_pc.png') no-repeat center/contain;
    position: absolute;
    left: 7vw;
    bottom: 0%;
  }

  .text-box {
    color: var(--color-black);
    margin: 24vh 0 0 50vw;

    .ceo-description {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-regular);
      line-height: 1.2;

      .text-base {
        font-weight: var(--font-weight-bold);
      }
    }

    .ceo-name {
      column-gap: 2rem;
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      margin-top: 3rem;
    }

    .ceo-info {
      font-size: var(--font-size-base);
      margin-top: 4rem;
      margin-bottom: 4rem;
    }

    li{
      position: relative;
      padding-left: 2rem;
      margin-bottom: 2rem;

      .br{display: none;}

      &::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        background-color: var(--color-black);
      }
    }
  }
}

/* .section09 - 커플 매니저 */
.section09 {
  position: relative;
  background: url('/assets/images/main/section09/section09_bg01.png') no-repeat center/cover;

  &::before {
    content: '';
    opacity: 0.6;
    position: absolute;
    display: block; 
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 200;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--container-inline-padding);
    z-index: 300;
  }

  .text-area {
    text-align: center;
    color: var(--color-hover-bg);

    .section-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
    }

    .section-sub-title {
      margin-top: 1rem;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-regular);
    }
  }

  .manager-wrap{
    width: 100%;
    margin: 5rem auto 12vh;
  }

  .manager-inner {
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    justify-items: center;
    align-items: center;
    box-sizing: border-box;

    .manager {
      position: relative;
      display: flex;
      flex-direction: column;
      row-gap: 1rem;
      border-radius: 0.4rem;
      width: 20rem;
      height: inherit;

      .badge {
        z-index: 100;
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6rem;
        height: 2.4rem;
        background: #e85454;
        border-radius: 5rem;
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-medium);
        color: var(--color-white);
      }

      .thumbnail {
        position: relative;
        background: var(--color-white);
        border-radius: 1rem;
        overflow: hidden;

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            .hover-info {
              opacity: 1;
            }
          }
        }

        &:active {
          .hover-info {
            opacity: 1;
          }
        }
      }

      .manager-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .figure {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        height: 26rem;
        
        .figcaption {
          display: flex;
          flex-direction: column;
          row-gap: 0.8rem;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 24%;
          justify-content: center;
          align-items: center;
          background: var(--color-hover-bg-08);
          font-size: var(--font-size-xxs);
          font-weight: var(--font-weight-medium);
          color: var(--color-white);

          .figure-sub {
            display: flex;
            align-items: center;
            column-gap: 0.6rem;
          }
        }
      }

      .hover-info {
        z-index: 100;
        opacity: 0;
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding-inline: 2rem;
        backdrop-filter: blur(0.8rem);
        background: var(--color-hover-bg-08);
        transition: opacity 0.3s;

        .branch {
          margin-bottom: 0.4rem;
          font-size: var(--font-size--xxs);
          font-weight: var(--font-weight-regular);
          color: var(--color-beige);
        }

        .name {
          margin-bottom: 3rem;
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-bold);
          color: var(--color-beige);
        }

        .trigger {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 4rem;
          border-radius: 5rem;
          background: var(--alpha-white-30);
          font-size: var(--font-size-xxs);
          font-weight: var(--font-weight-medium);
          color: var(--color-white);
          transition:
            color 0.3s,
            background 0.3s;

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              background: var(--color-white);
              color: var(--color-hover-bg);
            }
          }

          &:active {
            background: var(--color-white);
            color: var(--color-hover-bg);
          }

          &:not(:first-of-type) {
            margin-top: 1.2rem;
          }

          img {
            margin-right: 3%;
          }
        }
      }

      .counseling-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.1rem 1rem;
        border-radius: 1rem;
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-bold);
        color: var(--color-hover-bg);
        border: 1px solid var(--color-hover-bg-06);
        border-radius: 0.4rem;
        transition:
          color 0.3s,
          background 0.3s;

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            background: var(--color-hover-bg);
            color: var(--color-white);
          }
        }

        &:active {
          background: var(--color-hover-bg);
          color: var(--color-white);
        }
      }
    }
  }
}

/* .section10 - 미시즈 코리아 */
.section10 {
  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    overflow: hidden;

    &.slide01 {.slide-image {background: url('/assets/images/main/section10/section10_bg01.png') no-repeat center / cover;}}
    &.slide02 {.slide-image {background: url('/assets/images/main/section10/section10_bg02.png') no-repeat center / cover;}}
    &.slide03 {.slide-image {background: url('/assets/images/main/section10/section10_bg03.png') no-repeat center / cover;}}
    &.slide04 {.slide-image {background: url('/assets/images/main/section10/section10_bg04.png') no-repeat center / cover;}}
    &.slide05 {.slide-image {background: url('/assets/images/main/section10/section10_bg05.png') no-repeat center / cover;}}
    &.slide06 {.slide-image {background: url('/assets/images/main/section10/section10_bg06.png') no-repeat center / cover;}}
    &.slide07 {.slide-image {background: url('/assets/images/main/section10/section10_bg07.png') no-repeat center / cover;}}
    &.slide08 {.slide-image {background: url('/assets/images/main/section10/section10_bg08.png') no-repeat center / cover;}}
    &.slide09 {.slide-image {background: url('/assets/images/main/section10/section10_bg09.png') no-repeat center / cover;}}
    &.slide10 {.slide-image {background: url('/assets/images/main/section10/section10_bg10.png') no-repeat center / cover;}}
  }

  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .slide-title{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 18vh;
    transform: translateX(-50%);
    color: var(--color-white);
    text-shadow: 0 2px 6px var(--alpha-black-25);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    z-index: 300;

    strong {
      font-weight: var(--font-weight-extra-bold);
    }
    
    span {
      font-weight: var(--font-weight-extra-bold);
      color: var(--color-beige);
    }
  }

  .swiper-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    width: 100%;
    pointer-events: none;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 6rem;
    height: 6rem;
    background: var(--alpha-white-30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(0.5rem);
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    color: var(--alpha-white-60);
    font-size: 3.5rem;
    transition: all 0.3s ease;
  }

  .swiper-button-prev {left: 15rem;}
  .swiper-button-next {right: 25rem;}

  .swiper-button-prev:hover,
  .swiper-button-next:hover,
  .swiper-button-prev:active,
  .swiper-button-next:active {
    background: var(--alpha-white-50);
    color: var(--alpha-white-95);
    backdrop-filter: blur(0);
  }

  .swiper-button-prev:hover::after,
  .swiper-button-next:hover::after{
    color: var(--color-white);
  }

  .swiper-pagination {
    display: none;
  }
} 

/* .section11 - 봉사활동 */
.section11 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--container-inline-padding);
  overflow: hidden;

  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: url('/assets/images/main/section11/section11_bg01.png') no-repeat center / cover;
  }

  .text-box {
    position: relative;
    z-index: 300;
    color: var(--color-white);
    text-align: center;

    .section-title{
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extra-bold);
      text-shadow: 0 2px 6px var(--alpha-black-25);
    }

    .section-sub-title{
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-light);
      margin-top: 3.5rem;
      line-height: 1.4;
    }

    span{color: var(--color-beige);}
    .text-mobile{display: none;}
  }
}

/* .section12 - 르매리 TV */
.section12 {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--alpha-black-40);
    z-index: 100;
  }

  .section-background {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--container-inline-padding);
    z-index: 200;
  }

  .text-area {
    text-align: center;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;

    .section-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
    }

    .section-sub-title {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-light);
    }
  }

  .youtube-content-wrap {
    max-width: 112rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 4rem;
    margin-top: 2rem;
    margin-bottom: 2rem;

    .card {
      overflow: hidden;
      border-radius: 1rem;

      .card-image {
        cursor: pointer !important;

        transition: all 0.3s ease-in-out;
        &:hover {
          transform: scale(1.02);
        }
      }

      &.main {
        grid-column: span 2;
        border-radius: 2rem;
      }
    }
  }

  .link-area {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 3rem;
  }
}

/* section13 - 브랜드 대상 */
.section13 {
  position: relative;
  width: 100%;
  height: 100%;

  .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: url('/assets/images/main/section13/section13_bg01.png') no-repeat center / cover;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-inline: var(--container-inline-padding);
    z-index: 300;

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: var(--color-white);
    }
  }

  .section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extra-bold);

    .br{display: none;}
    span{color: var(--color-beige);}
  }

  .section-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    margin-top: 2rem;
  }

  .award-wrap {
    width: 100%;
    max-width: 80vw;
    margin: 4rem auto;

    ul {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2rem 1rem;
    }

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      row-gap: 1rem;
      word-break: keep-all;
      border-radius: 2rem 2rem 0 0;
      overflow: hidden;

      img {
        width: 100%;
        max-width: 14rem;
        height: 13.5rem;
        object-fit: contain;
        flex-shrink: 0;
        background: var(--alpha-white-10);
        border-radius: 2rem;
        padding: 1rem;
        overflow: hidden;
      }

      span {
        font-size: var(--font-size-mini);
        text-align: center;
        line-height: 1.3;
      }
    }
  }
}

/* .section14 - 한부모가정 연구소 */
.section14 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--container-inline-padding);
  overflow: hidden;

  .slide-image {
    background: url('/assets/images/main/section14/section14_bg01.png') no-repeat center / cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .container {
    position: relative;
    z-index: 300;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .text-area {
    color: var(--color-white);
  }

  .section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extra-bold);
    text-shadow: 0 2px 6px var(--alpha-black-25);
  }

  .section-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 8rem;

    .br{display: none;}
  }
}

/* .section15 - 재혼가정 연구소 */
.section15 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--container-inline-padding);
  overflow: hidden;

  .slide-image {
    background: url('/assets/images/main/section15/section15_bg01.png') no-repeat center / cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .container {
    position: relative;
    z-index: 300;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .text-area {
    color: var(--color-white);
  }

  .section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extra-bold);
    text-shadow: 0 2px 6px var(--alpha-black-25);
  }

  .section-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 8rem;

    .br{display: none;}
  }
}

/* section16 - 재혼 테스트 */
.section16 {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-black-40);
    z-index: 200;
  }

  .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: url('/assets/images/main/section16/section16_bg01.png') no-repeat center / cover;
  }

  .container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    z-index: 300;
  }

  .content {
    width: 100%; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-white);

    .section-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extra-bold);
      margin-top: 12vh;
    }

    .section-description {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-light);
      margin: 2rem 0 3rem;

      .br{display: none;}
    }

    ul {
      width: 100%;
      max-width: 65%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem 3rem;
      margin-bottom: 3.5rem;
    }

    li {
      border-radius: 1rem;
      width: 100%;
      height: 14rem;
      overflow: hidden;
      background: var(--alpha-white-10);
      transition: all 0.3s ease-in-out;
      border: 1px solid transparent;

      a{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 1rem;
      }

      .img-container {
        position: relative;
        width: 6rem;
        height: 6rem;
        margin-bottom: 1rem;

        img{
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: all 0.3s ease-in-out;
          position: absolute;
          top: 0;
          left: 0;
  
          &.img-default {opacity: 1;}
          &.img-hover {opacity: 0;}
        } 
      }

      h3{
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        word-break: keep-all;
        margin-top: 0.6rem;
        transition: all 0.3s ease-in-out;
      }

      &:hover {
        background: var(--alpha-white-15);
        border: 1px solid var(--color-beige);

        img.img-default {opacity: 0;}
        img.img-hover {opacity: 1;}

        h3{color: var(--color-beige);}
      }
    }
  }
}

/* .section17 - 무료상담 */
.section17 {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;

  .container {
    width: 100%;
  }

  .content {
    display: flex;
    width: 100%;
    height: 100vh;
  }

  .image-area {
    width: 34vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right;
    }
  }

  .form-area {
    width: calc(100% - 34vw);
    max-width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 6rem;

    .form-header {
      margin-bottom: 4rem;
 
      .form-title {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-extra-bold);
        color: var(--color-hover-bg);
      }
    }

    .error-msg {
      display: none;      
      width: 100%;
      order: 999;         
      color: #d30000;
      font-size: 1.2rem;
      position: absolute;
      left: 1rem;
      bottom: -1.6rem;
    }
    
    .input-error {
      border-color: #d30000 !important;
    }
 
    .form-group {
      margin-bottom: 2rem;
      position: relative;

      & > * {
        min-width: 0;
        max-width: 100%;
      }

      .input-group {
        display: flex;
        gap: 1.2rem;
        align-items: center;
        flex-wrap: wrap;

        input, select {
          width: 34.5rem;
          height: 5rem;
          padding: 1rem;
          border: 1px solid var(--color-gray-boder);
          border-radius: 0;
          font-size: var(--font-size-xxs);
          background: var(--color-white);
          color: var(--color-gray-09);
          box-sizing: border-box;
          position: relative;
          outline: none;
          -webkit-appearance: none;
          appearance: none;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;

          &::placeholder {
            color: var(--color-gray-09);
          }

          &:focus {
            outline: none;
            border-radius: 0;
          }
        }

        .select-wrapper {
          position: relative;

          select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: none;
            cursor: pointer !important;
            position: relative;

            .scroll-dropdown {
              position: absolute;
              left: 0;
              right: 0;
              top: 100%;                
              max-height: 100px;        
              overflow-y: auto;
              background: #fff;
              border: 1px solid var(--color-gray-boder);
              box-shadow: 0 8px 20px rgba(0,0,0,0.12);
              z-index: 9999;
              display: none;            

              &.open {display: block;}
              &.up {top: auto; bottom: 100%;}

              .dropdown-item {
                padding: 0.8rem 1.2rem;
                font-size: var(--font-size-xxs);
                color: var(--color-gray-06);
                cursor: pointer;
                white-space: nowrap;

                &:hover,
                &:active {
                  background: var(--color-beige-05);
                  color: #000;
                }
              }
            }

            select:focus {
              outline: none;
              border-color: var(--color-gray-boder) !important;
            }

            select.has-value {
              color: var(--color-black) !important;
            }
            
            select:not([value=""]),
            select.has-value {
              color: var(--color-black) !important;
            }

            
            input[type="text"]:not([value=""]) {
              background-color: var(--color-white) !important;
            }

            input[type="text"],
            input[type="tel"] {
              background-color: var(--color-white) !important;
              border-color: var(--color-gray-boder) !important;
            }

            input[type="text"]:focus,
            input[type="tel"]:focus {
              background-color: var(--color-white) !important;
              border-color: var(--color-gray-04) !important;
            }

            select option {
              border: none;
              padding: 0.8rem 1.2rem;
              background-color: var(--color-white);
              color: var(--color-gray-06);
            }

            select option:checked {
              background-color: var(--color-primary);
              color: var(--color-white);
              font-weight: 500;
            }
          }

          .toggle-icon {
            position: absolute;
            top: 50%;
            right: 4%;
            transform: translateY(-50%);
            width: 1.6rem;
            height: 1rem;
            pointer-events: none;
            z-index: 1;
            transition: transform 0.3s ease;
          }

          &.active .toggle-icon {
            transform: translateY(-50%) rotate(180deg);
          }
        }
  
        .radio-group {
          display: flex;
          gap: 1.5rem;
          align-items: center;

          .radio-label {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: var(--font-size-xxs);
            color: var(--color-gray-02);

            input[type="radio"] {
              width: 2rem;
              height: 2rem;
              border-radius: 50%;
              margin: 0;
              cursor: pointer;
              appearance: none;
              border: 1px solid var(--color-gray-boder);
              background: var(--color-white);
              transition: all 0.3s ease;

              &:checked {
                position: relative;

                &::after {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 70%;
                  height: 70%;
                  border-radius: 50%;
                  background: var(--color-hover-bg);
                }
              }
            }

            span {
              font-weight: var(--font-weight-regular);
            }
          }
        }

        &.phone {
          flex-direction: column;
          align-items: flex-start;

          .phone-inner{
            display: flex;
            align-items: center;
            box-sizing: border-box;
            gap: 1rem;
          }

          .phone-group {
            select, input {
              width: 9.7rem;
            }
          }

          .auth-btn {
            background: var(--color-beige);
            color: var(--color-white);
            font-weight: var(--font-weight-bold);
            border: none;
            padding: 1.5rem 4rem;
            cursor: pointer;
            font-size: var(--font-size-xxs);
            white-space: nowrap;
          }
        }
      }

      &.checkbox-group {
        padding-top: 1rem;

        .checkbox-sub{
          display: inline-block;
        }

        .checkbox-label {
          gap: 1rem;
          cursor: pointer; 
          color: var(--color-gray-02);
          margin-right: 2rem;

          span{
            font-size: var(--font-size-mini);
            font-weight: var(--font-weight-regular);
            display: inline-block;
            margin-left: 0.5rem;
            vertical-align: text-top;

            &.text-agree_all {
              font-size: var(--font-size-xxs);
              font-weight: var(--font-weight-semi-bold);
              vertical-align: top;
            }
          }

          input[type="checkbox"] {            
            appearance: none;
            width: 2rem;
            height: 2rem;
            margin: 0;
            flex-shrink: 0;
            border: 1px solid var(--color-gray-boder);
            border-radius: 0.3rem;
            background: var(--color-white);
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;

            &:checked {
              border: none;
              background-color: var(--color-hover-bg);

              &::after {
                content: "✓";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 0.3rem;
                background-color: var(--color-hover-bg);
                color: var(--color-white);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--font-size-sm);
                font-weight: var(--font-weight-light);
              }
            }
          }
        }

        .detail-link {
          color: var(--color-gray-06);
          text-decoration: underline;
          margin-left: 0.5rem;
        }
      }
    }

    .submit-btn {
      width: 34.5rem;
      padding: 1.5rem 2rem;
      background: var(--color-hover-bg);
      box-shadow: 0 4px 4px 0 var(--alpha-black-25);
      color: var(--color-white);
      border-radius: 5rem;
      font-size: var(--font-size-xxs);
      font-weight: var(--font-weight-semi-bold);
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 2rem;
      position: relative;
      border : 1px solid var(--color-white);

      .icon-default,
      .icon-hover {
        position: absolute;
        top: 50%;
        right: 25%;
        transform: translateY(-50%);
        transition: opacity 0.3s;
        pointer-events: none;
      }

      .icon-default {opacity: 1;}
      .icon-hover {opacity: 0;}

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-beige);
          border : 1px solid var(--color-beige);

          .icon-default {opacity: 0;}
          .icon-hover {opacity: 1;}
        }
      }

      &:active {
        color: var(--color-beige);
        border: 1px solid var(--color-beige);

        .icon-default {opacity: 0;}
        .icon-hover {opacity: 1;}
      }
    }
  } 
}

/* .section18 - 전국지사 */
.section18 {
  background: url('/assets/images/main/section18/section18_bg01.png') no-repeat center/cover;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-black-40);
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: var(--container-inline-padding);
    z-index: 300;
  }

  .text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white);

    .section-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extra-bold);
    }

    .section-sub-title {
      margin-top: 2rem;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-light);

      .br{display: none;}
    }
  }

  .branch-wrap {
    width: 100%;
    max-width: 75vw;
    margin: 6rem auto 8rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;

    a{
      display: block;
      width: 20rem;
      height: 28rem;
      border-radius: 1rem;
      overflow: hidden;
      position: relative;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      }
  
      .text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 8rem;
        background: var(--alpha-black-40);
        color: var(--color-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0.5rem;
        text-align: center;
        font-size: var(--font-size-sm);
        backdrop-filter: blur(0.2rem);
        transition: all 0.3s ease-in-out;
  
        .branch-name {font-weight: var(--font-weight-semi-bold);}
        .branch-tel {font-weight: var(--font-weight-regular);}
      }
      
      &:hover {
        .text {
          color: var(--color-beige);
          backdrop-filter: blur(0.1rem);
        }
      }
    }
  }
}

/* 모달 */
.modals {
  .consent-modal {
    .modal-container {
      display: flex;
      flex-direction: column;
      padding-block: 4rem;
      row-gap: 3rem;
      color: var(--color-white);
      background: var(--color-gray-02);
    }

    .modal-header {
      padding-inline: var(--container-inline-padding);
      flex-shrink: 0;

      .modal-title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        text-align: center;
      }
    }

    .modal-body {
      padding-inline: var(--container-inline-padding);
      flex-grow: 1;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0.6rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-04);
        border-radius: 0.3rem;
      }

      &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }

      .modal-content {
        font-size: var(--font-size-tiny);
        line-height: 1.4;
        
        img {
          display: block;
          margin: 2rem auto 0;
        }

        .span {
          font-weight: var(--font-weight-extra-bold);
          font-size: var(--font-size-xs);
        }

        .strong {
          font-weight: var(--font-weight-bold);
          font-size: var(--font-size-xxs);
          margin: 4px 0;
        }
      }
    }

    .modal-footer {
      display: flex;
      justify-content: center;
      padding-inline: var(--container-inline-padding);
      flex-shrink: 0;
    }
  }

  .party-modal,
  .lemarry-tv-modal,
  .lemarry-broadcasting-modal {
    .modal-content {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
    }

    .modal-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

/* responsive */
@media screen and (max-width: 1440px) {
  /* .section01 - 재혼 */
  .section01 {
    .swiper-slide.slide01 {
      .section-info{
        padding-left: 0%;
      }
    }
  }

  /* .section07 - 돌싱파티 */
  .section07 {
    .swiper {
      max-width: 80%;
    }
  }

  /* .section09 - 커플 매니저 */
  .section09 {
    .manager-inner {
      max-width: 90vw;
    }
  }

  /* .section17 - 무료상담 */
  .section17 {
    .form-area {
      max-width: 55%;

      .submit-btn {
        margin-top: 3rem;
      }
    } 
  }
}

@media screen and (max-width: 1280px) {
  /* full-page */
  .full-page {
    & > .swiper-pagination {
      padding-bottom: 13.6rem;
    }
  }

  /* .section05 - 전문서비스 */
  .section05 {
    .swiper-wrapper {
      max-width: 75%;
      column-gap: 1.2rem;
    }

    .service-box-container  {
      width: 75%;
    }
  }
  
  /* .section09 - 커플 매니저 */
  .section09 {
    .manager-inner {
      max-width: 100vw;
    }
  }

  /* .section17 - 무료상담 */
  .section17 {
    .form-area {
      max-width: 65%;
    } 
  }
}

@media screen and (max-width: 1024px) {
  .full-page {
    & > .swiper-pagination {
      display: none;
    }
  }

  /* button */
  .arrow-button {
    padding: 1.8vw 6.3vw 1.8vw 4vw;
    font-size: var(--font-size-sm);

    .icon-default,
    .icon-hover {
      right: 3vw;
    }
  }
  
  .arrow-button.more {
    width: 43vw;

    .icon-default,
    .icon-hover {
      right: 19%;
    }
  }

  /* .section01 - 재혼 */
  .section01 {
    .swiper-slide.slide01 {
      .slide-image {
        background: url('/assets/images/main/section01/section01_bg01.png') no-repeat 25% 0  / cover;
      }

      .slide-title {
        left: 0;
        transform: translateX(0);
        align-items: center;

        & > div:nth-of-type(2){
          img{
            width: 1.8rem;
          }
        }
      }
    }
    
    .swiper-slide.slide02 {
      .slide-title {
        & > div:nth-of-type(2){
          margin: 0.6rem 0 1.2rem;
        }

        & > div:last-of-type{
          margin-top: 0rem;
        }
      }
    }
  }

  /* .section02 - 정통성 */
  .section02 {
    .swiper-slide.slide01 {
      background: url('/assets/images/main/section02/section02_bg01.png') no-repeat 77% 0 / cover;

      .slide-title {
        .br01 {display: block;}

        & > div:nth-of-type(3){
          margin-top: 5rem;
          margin-bottom: 10%;
        }
      }
    }

    .swiper-slide.slide02 {
      .slide-title {
        .text-desk{display: none;}

        .text-mobile,
        .br {display: block;}

        & > div:nth-of-type(4){
          margin-top: 12rem;
          line-height: 1.4;
          margin-bottom: 10%;

        } 
      }
    }
  }

  /* .section03 - 돌싱전문 */
  .section03 {
    .text-area {
      padding: 32vh 0 0 0;
      width: 100%;

      .text-desk{display: none;}
      .text-mobile{display: block;}
    }

    .slide-title {
      align-items: center;
      font-weight: var(--font-weight-regular);
      text-align: center;
      
      & > .fade-up-in-and-out-target:not(.slide-caption) {
        line-height: 1.4;
      }
    }

    .slide-caption {
      margin-top: 4rem;
      font-size: var(--font-size-sm);
      text-align: center;
    }
  }

  /* .section04 - 퍼플스그룹 */
  .section04 {
     .content {
      .section-description {
        margin-top: 1rem;
      }

      .test-list {
        margin: 5rem auto 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem ;
        margin-bottom: 12vh;
      }

      .test-item {
        &:nth-of-type(1),
        &:nth-of-type(2){
          animation-delay: 1s;
        }

        &:nth-of-type(3),
        &:nth-of-type(4){
          animation-delay: 1.5s;
        }

        &:nth-of-type(5),
        &:nth-of-type(6){
          animation-delay: 2s;
        }
      }
    }
  }

  /* .section05 - 전문서비스 */
  .section05 {
    .text-area {
      .section-title {
        .br{display: block;}
      }
    }

    .swiper-wrapper {
      max-width: 65%;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.6rem 3rem;

      .swiper-slide {
        aspect-ratio: 28 / 14;
        border-radius: 0.4rem;
    
        .service-title{
          top: 42%;

          .br-mobile{display: none;}
        }
      } 
    }

    .service-box-container  {
      width: 65%;
    }

    .service-box-wrap {
      display: grid;
      margin: 3rem auto 4rem;
      grid-template-columns: repeat(4, 1fr);
      gap:0.8rem;
      width: 100%;
      margin: 2rem auto 3rem;
      box-sizing: border-box;

      .service-box {
        border-radius: 0.4rem;
      }
    }
  }

  /* .section06 - 이혼통계 */
  .section06 {
    .container {
      margin-top: 8vh;
    }

    .statistics-swiper-container {
      max-width: 75vw;
      margin-top: 5rem;

      .img-description{
        font-size: var(--font-size-xs);
      }

      .img-description01{
        margin-bottom: 0.5rem;
      }
  
      .img-description02{
        margin-top: 0.8rem;

      }

      .statistics-content {
      img {
        &.mobile-img{display: block;}
        &.pc-img{display: none;}
      }
    }

      .statistics-scrollbar {
        max-width: 28%;
        height: 0.7rem;
        margin: 6rem auto 0;
      }
    }
  }

  /* .section07 - 돌싱파티 */
  .section07 {
    .section-background {
      background: url('/assets/images/main/section07/section07_bg01.png') no-repeat 58% 0/cover;
    }

    .swiper {
      width: 100%;
      max-width: 70%;

      .swiper-wrapper {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2.5rem;
        margin-top: 3rem;
        justify-items: center;
        align-items: center;
      }
    }

    .swiper-slide{
      width: 100%;
      height: 24rem; 
    }

    .card {
      margin-inline: 0rem;
      width: 100%;
      height: 100%;

      .card-text {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        padding: 1.5rem 0;
      }
    }
  }

  /* .section08 - CEO */
  .section08 {
    .ceo-image-pc {
      width: 60%;
      height: 75%;
      background: url('/assets/images/main/section08/ceo_pc.png') no-repeat center/cover;
      left: -18%;
    }

    .text-box {
      margin: 40% 0 0 48%;

      .ceo-name {
        margin-top: 1rem;
      }
    }
  }

  /* .section09 - 커플 매니저 */
  .section09 {
    .manager-wrap{
      max-width: 60vw;
      height: auto;
      min-height: auto;
      margin: 2rem auto 10vh;
    }

    .manager-inner {
      max-width: 100vw;
      grid-template-columns: repeat(3, 1fr);
      gap: 4rem 1.5rem;
    }
  }
  
  /* .section10 - 미시즈 코리아 */
  .section10 {
    .slide-title{
      span {display: block;}
    }

    .swiper-button-prev,
    .swiper-button-next {
      width: 9rem;
      height: 9rem;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 5rem;
    }

    .swiper-button-prev {left: 4vw;}
    .swiper-button-next {right: 4vw;}

    .swiper-pagination {
      display: inline-block;
      text-align: center;
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 300;
      background-color: var(--alpha-black-50);
      color: var(--color-white);
      border-radius: 5rem;
      font-size: var(--font-size-base);
      padding: 0.8rem 1.5rem;
      max-width: 13vw;
    }
  } 

  /* .section11 - 봉사활동 */
  .section11 {
    .text-box {
      .section-sub-title{
        font-size: var(--font-size-base);
      }

      .br_01{display: none;}
    }
  }

  /* .section12 - 르매리 TV */
  .section12 {
    .text-area {
      .section-sub-title {
        font-size: var(--font-size-sm);
      }
    }

    .youtube-content-wrap {
      max-width: 85vw;
      gap: 1.5rem 3rem;
      margin-top: 4rem;
      margin-bottom: 4rem;
    }

    .link-area {
      margin-top: 4rem;
    }
  }

  /* section13 - 브랜드 대상 */
  .section13 {
    .award-wrap {
      ul {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
      }

      li {
        &:nth-of-type(n+11) {
          display: none;
        }
      }
    }
  }

  /* .section14 - 한부모가정 연구소 */
  .section14 {
    .slide-image {
      background: url('/assets/images/main/section14/section14_bg01.png') no-repeat 62% 0/ cover;
    }

    .section-description {
      margin-bottom: 6rem;
    }
  }

  /* .section15 - 재혼가정 연구소 */
  .section15 {
    .slide-image {
      background: url('/assets/images/main/section15/section15_bg01.png') no-repeat 43% 0 / cover;
    }
     
    .section-description {
      margin-bottom: 6rem;
    }
  }

  /* section16 - 재혼 테스트 */
  .section16 {
     .content {
      .section-title {
        margin-top: 14vh;
      }

      .section-description {
        margin: 2rem 0 6rem;
      }

      ul {
        max-width: 75vw;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.8rem;
        margin-bottom: 4vh;
      }

      li {
        .img-container {
          position: relative;
          width: 6rem;
          height: 6rem;
          margin-bottom: 1rem;
        }
      }
    }
  }

  /* .section17 - 무료상담 */
  .section17 {
    .image-area {
      display: none;
    }

    .form-area {
      width: 100%;
      max-width: 100%;
      padding-left: 10vw;

      .form-group {
        margin-bottom: 2rem;
      }

      .submit-btn {
        width: auto;
        padding: 2rem 6vw 2rem 4.5vw;
        font-size: var(--font-size-sm);
        position: relative;
        left: 42%;
        transform: translateX(-50%);

        .icon-default,
        .icon-hover {
          right: 12%;
        }
      }
    } 
  }

  /* .section18 - 전국지사 */
  .section18 {
    background: url('/assets/images/main/section18/section18_bg01.png') no-repeat 60% 0/cover;

    .text-area {
      .section-sub-title {
        margin-top: 2.5rem;
      }
    }

    .branch-wrap {
      max-width: 70vw;
      margin: 5rem auto 4vh;
      grid-template-columns: repeat(3, 1fr);
      gap: 4rem 1rem;

      a{
        width: 22rem;
        height: 30rem;

        .text {
          height: 30%;
          row-gap: 0.4rem;
        }
      }
    }
  }
}

@media screen and (max-width: 780px) {
  /* button */
  .arrow-button {
    padding: 2rem 8.5vw 2rem 5vw;
    font-size: var(--font-size-sm);

    .icon-default,
    .icon-hover {
      right: 4vw;
    }
  }
  
  /* .section01 - 재혼 */
  .section01 {
    .swiper-slide.slide01 {
      .slide-image {
        background: url('/assets/images/main/section01/section01_bg01.png') no-repeat 3% 0  / cover;
      }

      .slide-title {
        & > div:nth-of-type(2){
          img{
            width: 2.2rem;
          }
        }
      }
    }
  }

  /* .section02 - 정통성 */
  .section02 {
    .swiper-slide.slide01 {
      .slide-title {
        font-size: var(--font-size-lg);

        .br02 {display: block;}

        & > div:nth-of-type(3){
          font-size: var(--font-size-base);
          line-height: 1.4;
        }
      }
    }

    .swiper-slide.slide02 {
      .slide-title {
        font-size: var(--font-size-lg);

        & > div:nth-of-type(4){
          margin-top: 6rem;
          line-height: 1.3;
          font-size: var(--font-size-base);
        } 
      }
    }
  }

  /* .section03 - 돌싱전문 */
  .section03 {
    .slide-title {
      font-size: var(--font-size-lg);

      & > .fade-up-in-and-out-target:not(.slide-caption) {
        line-height: 1.2;
      }
    }

    .slide-caption {
      margin-top: 4rem;
      font-size: var(--font-size-base);
      line-height: 1.4;
    }
  }

  /* .section04 - 퍼플스그룹 */
  .section04 {
    .content {
      width: 100%;

      .section-description {
        font-size: var(--font-size-base);
        margin-top: 2rem;
      }

      .test-list{
        width: 85%;
        gap: 4rem 3rem;
      }

      .test-item {
        width: 100%;
        aspect-ratio: 290 / 120;
      }
   }
 }

/* .section05 - 전문서비스 */
  .section05 {
    .text-area {
      .section-title {
        line-height: 1;

        .br{display: block;}
      }

      .section-sub-title {
        margin-top: 2rem;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-regular);
        margin-bottom: 4rem;
      }
    }

    .swiper {
      max-width: 80vw;
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;      
      isolation: isolate;
    }

    .swiper-wrapper {
      max-width: 100%;
      display: flex;
      grid-template-columns: unset;
      gap: 0;
      column-gap: 0;
      height: inherit;
      justify-items: unset;
      margin: 0;
      
      .swiper-slide {
        width: 100%;
        flex-shrink: 0;
        height: 30rem;
        border: 2px solid var(--color-beige);
        box-sizing: border-box;
 
        .service-img {
          box-sizing: border-box;
        }

        .service-title {
          font-size: var(--font-size-lg);
        }
    
        .service-sub-title {
          padding: 1.5rem 0;
          font-size: var(--font-size-md);
          letter-spacing: -0.9px;
        }
      } 
    }

    .statistics-scrollbar {
      position: relative;
      max-width: 40%;
      height: 5px;
      margin: 3rem auto 0;
      background: var(--alpha-white-20);
      border-radius: 0.2rem;
      overflow: hidden;

      .swiper-scrollbar-drag {
        background: var(--alpha-white-70);
        border-radius: 0.2rem;
      }
    }

    .service-box-container  {
      width: 85%;
    }

    .service-box-wrap {
      width: 100%;
      grid-template-columns: repeat(4, 1fr);
      margin: 3rem auto 2rem;

      .service-box {
        padding: 1.8rem 0;
        border-radius: 0.4rem;
        background: var(--color-beige-05);
        font-size: var(--font-size-sm);
        color: var(--color-white);
        word-break: keep-all;
      }
    }
  }

  /* .section06 - 이혼통계 */
  .section06 {
    .container {
      margin-top: 5vh;
    }

    .statistics-swiper-container {
      max-width: 90vw;
      margin-top: 4rem;

      .img-description01{
        margin-bottom: 0.3rem;
      }
  
      .img-description02{
        margin-top: 0.5rem;

      }

      .statistics-scrollbar {
        max-width: 30vw;
        height: 0.4rem;
        margin: 4rem auto 0;
      }
    }
  }

  /* .section07 - 돌싱파티 */
  .section07 {
    .section-description {
      font-size: var(--font-size-base);
    }

    .swiper {
      width: 100%;
      max-width: 100%;
      overflow: hidden;

      .swiper-wrapper {
        display: flex;
        gap: 0;
        margin-top: 3rem;
      }
    }

    .swiper-slide{
      height: 32rem; 
    }

    .card {
      margin-inline: 0rem;
      width: 100%;
      height: 100%;

      .card-text {
        font-size: var(--font-size-md);
        padding: 4% 0;
        backdrop-filter: blur(0);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          transform: none;
        }
      }

      .play {
        width: 10rem;
        height: 10rem;
      }
    }

    .section-info {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }

    .section-info {
      margin-top: 3rem;
      margin-bottom: 4rem;
      font-weight: var(--font-weight-light);

      strong{font-weight: var(--font-weight-extra-bold);} 
    }

    .arrow-button{
      margin-bottom: 8vh;
    }
  }
  
  /* .section08 - CEO */
  .section08 {
    .ceo-image-pc {
      display: none;
    }

    .ceo-image-mobile {
      position: absolute;
      transform: rotate(-8.3deg) !important;
      width: 70%;
      height: 75%;
      background: url('/assets/images/main/section08/ceo_pc.png') no-repeat center/cover;
      right: -17%;
      bottom: 0%;
    }


    .text-box {
      margin: 25vh 0 0 7vw;
  
      .ceo-info {
        margin-top: 3rem;
      }

      li{
        line-height: 1.2;

        .br{display: block;}

        &:nth-of-type(2){
          &::before{
            top : 26%;
          }
        }
      }
    }
  }

  /* .section09 - 커플 매니저 */
  .section09 {
    .text-area {
      .section-sub-title {
        margin-top: 1.5rem;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-light);
      }
    }
    
    .manager-wrap{
      width: 100%;
      max-width: 90vw;
      padding-inline: 6vw;
      margin-top: 6rem;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none; 
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none; 
      }
    }
       
    .manager-inner {
      width: max-content;
      display: flex;
      gap: 2.2vw;
  
      .manager {
        width: 100%;
        max-width: 26rem;
        height: inherit;
        flex-shrink: 0;

        .figure {
          height: 38rem;

          & > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .figcaption {
            height: 22%;
            font-size: var(--font-size-sm);
          }
        }
  
        .hover-info {
          display: none;
        }
  
        .counseling-button {
          padding: 1.5rem 1rem;
          font-size: var(--font-size-xs);
        }
      }
    }

    .drag-scroll-x {
      cursor: grab;
      user-select: none;
      
      &.dragging {
        cursor: grabbing;
      }
    }
  }

  /* .section10 - 미시즈 코리아 */
  .section10 {
    .swiper-button-prev,
    .swiper-button-next {
      width: 7rem;
      height: 7rem;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 3rem;
    }

    .swiper-pagination {
      font-size: var(--font-size-xxs);
    }
  } 

  /* .section11 - 봉사활동 */
  .section11 {
    .text-box {
      .section-sub-title{
        &.text-desk{display: none;}
        &.text-mobile{display: block;}

        strong{
          font-weight: var(--font-weight-extra-bold);
        }
      }

      .br{display: none;}
      .br_02{display: block;}
    }
  }

  /* .section12 - 르매리 TV */
  .section12 {
    .text-area {
      flex-direction: column;
      gap: 1rem;
    }

    .youtube-content-wrap {
      max-width: 85vw;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem 3rem;
      margin-top: 3rem;
      margin-bottom: 0rem;

      .card {
        aspect-ratio: 16/9;

        .card-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          
          &:hover {
            transform: none;
          }
        }

        &.main {
          grid-column: span 1;
        }
      }
    }

    .link-area {
      gap: 2.5rem;
      margin-top: 1rem;
      margin-bottom: 6vh;
    }
  }

  /* section13 - 브랜드 대상 */
  .section13 {
    .section-title {
      .br{display: block;}
    }

    .section-description {
      font-size: var(--font-size-base);
    }

    .award-wrap {
      width: 100%;
      max-width: 88vw;
      overflow: hidden;
  
      ul {
        display: flex;
        align-items: flex-start;
        width: max-content;
        padding-bottom: 0rem;
      }
  
      li {
        flex-shrink: 0;
        padding: 0rem;
        margin-right: 3vw;

        &:nth-child(n+11) {
          display: block;
        }

        img {
          width: 100%;
          max-width: 26rem;
          height: 25rem;
        }
  
        span {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-extra-bold);
          padding: 0;
          white-space: nowrap;
          margin-top: 0.4rem;
        }
      }
    }

    .arrow-button{
      margin-bottom: 6vh;
    }

    .award-wrap.drag-scroll-x {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none; 
      -ms-overflow-style: none;
      cursor: grab;
      user-select: none;
      
      &::-webkit-scrollbar {
        display: none; 
      }
      
      &.dragging {
        cursor: grabbing;
      }
    }
  }

  /* .section14 - 한부모가정 연구소 */
  .section14 {
    .section-description {
      .br{display: block;}
    }
  }

  /* .section15 - 재혼가정 연구소 */
  .section15 {
    .section-description {
      .br{display: block;}
    }
  }

  /* section16 - 재혼 테스트 */
  .section16 {
    .section-background {
      background: url('/assets/images/main/section16/section16_bg02.png') no-repeat  50% 0 / cover;
    }

    .content {
      .section-description {
        margin: 2rem 0 4rem;
  
        .br{display: block;}
      }

      ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem 2rem;
      }

      li {
        .img-container {
          position: relative;
          width: 6rem;
          height: 6rem;
          margin-bottom: 1rem;
        }

        &:nth-of-type(n+7) {
          display: none;
        }

        &:hover {
          background: none;
          border: none;
  
          img.img-default {opacity: none;}
          img.img-hover {opacity: none;}
  
          h3{color: none;}
        }
      }
    }
  }

  /* .section17 - 무료상담 */
  .section17 {
    .form-area {
      width: 100%;
      max-width: 80%;
      padding: 0;
      margin: 0 auto;

      .form-header {
        margin-bottom: 3rem;
        text-align: center;
      }

      .form-group {
        margin-bottom: 2rem;

        .input-group {
          gap: 2rem;

          input, select {
            width: 100%;
            height: 6rem;
          }

          #webname_foot{
            width: 39.5rem;
          }

          #webage_foot{
            width: 21rem;
          }

          #webauth_foot{
            width: 53rem
          }
  
          .radio-group {
            gap: 1.5rem;

            &.name {
              gap: 4rem;
            }
  
            .radio-label {
              gap: 1rem;
  
              input[type="radio"] {
                width: 4rem;
                height: 4rem;
  
                &:checked {
                  &::after {
                    content: '';
                    width: 70%;
                    height: 70%;
                  }
                }
              }
            }
          }
  
          &.phone {
            gap: 0.8rem;
            
            .phone-group {
              select, input {
                width: 15.8rem;
              }
            }

            .auth-btn {
              padding: 1.7rem 8%;
              font-size: var(--font-size-sm);
              font-weight: var(--font-weight-regular);
            }
          }

          &.mobile-flex{
            display: flex;
            flex-direction: row;
            gap: 1rem;
            
            select {
              flex: 1;
              width: 38.8vw;
            }
          }
        }

        &.mobile-gap{
          margin-bottom: 2rem;
        }
  
        &.checkbox-group {
          display: flex;
          justify-content: space-between;
          margin-top: 2rem;

          .checkbox-sub{
            display: block;
            margin-right: 4vw;
          }
          
          .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
            margin-right: 0;
  
            span{
              font-size: var(--font-size-sm);
              color: var(--color-gray-06);
              line-height: 1.4;
  
              &.text-agree_all {
                font-size: var(--font-size-sm);
                color: var(--color-gray-02);
              }
            }

            &.checkbox-last {
              margin-top: 1rem;
            }
  
            input[type="checkbox"] {
              width: 3rem;
              height: 3rem;
  
              &:checked {
                border: 1px solid var(--color-gray-boder);

                &::after {
                  font-size: var(--font-size-md);
                }
              }
            }
          }

          .detail-link {
            margin-left: 0.5rem;
            font-size: var(--font-size-tiny);
          }
        }
      }

      #privacyError,
      #marketingError {
        margin-left: 20vw;
      }
  
      .submit-btn {
        width: auto;
        padding: 2.2rem 10rem 2.2rem 7rem;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-regular);
        margin-top: 4rem;
        left: 48%;
        margin-top: 2.5rem;

        .icon-default,
        .icon-hover {
          right: 7rem;
        }
      }
    }
  }

  /* .section18 - 전국지사 */
  .section18 {
    .text-area {
      .section-sub-title {
        margin-top: 1rem;
      }
    }

    .branch-wrap {
      max-width: 82vw;
      margin: 3rem auto 3.5vh;
      gap: 1.8rem 1.2rem;

      a{
        width: 26vw;
        height: 24vh;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  /* button */
  .arrow-button {
    padding: 1.4rem 5rem 1.4rem 3rem;
    font-size: 3.5vw;

    .icon-default,
    .icon-hover {
      right: 6vw;
      width: 3vw;
    }
  }
  
  .arrow-button.more {
    width: 52vw;

    .icon-default,
    .icon-hover {
      right: 18%;
    }
  }

  /* .section01 - 재혼 */
  .section01 {
    .section-info{
      margin-top: 4rem;
    }

    .swiper-slide.slide01 {
      .slide-title {
        row-gap: 2vw;
        font-size: 11vw;

        & > div:nth-of-type(2){
          img{
            width: 3.5vw;
          }
        }
      }
    }

    .swiper-slide.slide02 {
      .slide-title {
        font-size: 6vw;

        & > div:nth-of-type(2){
          margin: 0.5rem 0 2.4rem;
        }

        & > div:last-of-type{
          font-size: 8vw;
          margin-bottom: 4rem;
        }
      }
    }
  }

  /* .section02 - 정통성 */
  .section02 {
    .swiper-slide.slide01 {
      .slide-title {
        font-size: 7vw;

        & > div:nth-of-type(3){
          font-size: 3vw;
        }
      }
    }

    .swiper-slide.slide02 {
      .slide-title {
        font-size: 7vw;

        & > div:nth-of-type(4){
          font-size: 3vw;
        } 
      }
    }
  }

  /* .section03 - 돌싱전문 */
  .section03 {
    .slide-title {
      font-size: 5.8vw;
    }

    .slide-caption {
      font-size: 3vw;
    }
  }

  /* .section04 - 퍼플스그룹 */
  .section04 {
    .content {
      .section-title {
        font-size: 8vw;
      }

      .section-description {
        margin-top: 1rem;
      }

      .test-list {
        margin: 3rem auto 0;
        gap: 2rem;
      }
    }
  }

  /* .section05 - 전문서비스 */
  .section05 {
    .text-area {
      .section-title {
        font-size: 8vw;
      }

      .section-sub-title {
        font-size: 3.5vw;
        margin-bottom: 2rem;
      }
    }

    .swiper-wrapper {
      .swiper-slide {
        height: 26vh;

        .service-title{
          top: 42%;
          font-size: 5vw;
        }
    
        .service-sub-title{
          font-size: 3.5vw;
        }
      } 
    }

    .statistics-scrollbar {
      max-width: 50%;
      height: 4px;
      margin: 2rem auto 0;
    }

    .service-box-wrap {
      .service-box {
        font-size: 3.2vw;
      }
    }
  }

  /* .section06 - 이혼통계 */
  .section06 {
    .section-title{
      font-size: 7vw;
    }

    .statistics-swiper-container {
      .img-description{
        font-size: 2.4vw;
      }
    }
  }

  /* .section07 - 돌싱파티 */
  .section07 {
    .section-title {
      font-size: 8vw;
    }

    .section-description {
      font-size: 3.5vw;
    }

    .swiper-slide{
      height: 22rem; 
    }

    .card {
      .card-text {
        font-size: 3.2vw;
        padding: 4.5% 0;
      }

      .play {
        width: 16vw;
        height: 16vw;
      }
    }

    .section-info {
      margin-bottom: 6rem;
      font-size: 3.3vw;
    }
  }

  /* .section08 - CEO */
  .section08 {
    .ceo-image-mobile {
      width: 65%;
      height: 67%;
      background: url('/assets/images/main/section08/ceo_pc.png') no-repeat center/cover;
      right: -17%;
      bottom: 0%;
    }

    .text-box {
      margin: 18vh 0 0 2 19vw;

      .ceo-description {
        font-size: 4.2vw;
      }
  
      .ceo-name {
        font-size: 6vw;
        margin-top: 3rem;
      }
  
      .ceo-info {
        font-size: 3.4vw;
      }
    }

    .arrow-button {
      display: inline-block;
      margin-top: 2rem;
    }
  }

  /* .section09 - 커플 매니저 */
  .section09 {
    .text-area {
      .section-title {
        font-size: 8vw;
      }
  
      .section-sub-title {
        font-size: 3.3vw;
        margin-top: 1rem;
      }
    }
    
    .manager-wrap{
      margin-top: 3rem;

      .manager {
        width: auto;
        max-width: 22rem;
        flex-shrink: 0;
      }
    }
        
    .manager-inner {
      .manager {
        .figure {
          height: 30rem;

          .figcaption {
            font-size: 3.5vw;
            font-weight: var(--font-weight-regular);
          }
        }
  
        .counseling-button {
          padding: 1.5rem 0;
          margin-top: 1rem;
          margin-bottom: 8vh;
          font-size: 3.2vw;
        }
      }
    }
  }

  /* .section10 - 미시즈 코리아 */
  .section10 {
    .slide-title{
      font-size: 8vw;
    }

    .swiper-button-prev,
    .swiper-button-next {
      width: 10vw;
      height: 10vw;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 5vw;
    }

    .swiper-pagination {
      font-size: 2.5vw;
      max-width: 20vw;
    }
  }

  /* .section11 - 봉사활동 */
  .section11 {
    .text-box {

      .section-title{
        font-size: 8vw;
      }

      .section-sub-title{
        font-size: 3.5vw;
      }

      .br_04, .br_02{display: block;}
      .br_03 {display: none;}
    }
  }

  /* .section12 - 르매리 TV */
  .section12 {
    .text-area {
      .section-title {
        font-size: 8vw;
      }
  
      .section-sub-title {
        font-size: 3.5vw;
      }
    }
    
    .youtube-content-wrap {
      gap: 1rem 1.6rem;

      .card {
        border-radius: 0.5rem;
  
        &.main {
          border-radius: 0.5rem;
        }
      }
    }

    .link-area {
      margin-top: 3rem;
      gap: 2rem;

      .arrow-button{
        padding: 1.4rem 2rem 1.4rem 0;
        width: 40vw;
        font-size: 2.8vw;

        .icon-default,
        .icon-hover {
          right: 4vw;
        }
      }

      .arrow-button.right{
        .icon-default,
        .icon-hover {
          right: 3vw;
        }
      }
    }
  }

  /* section13 - 브랜드 대상 */
  .section13 {
    .section-title {
      font-size: 8vw;
    }

    .section-description {
      font-size: 3.5vw;
      margin-top: 1rem;
    }

    .award-wrap {
      margin-bottom: 5rem;

      ul {
        li {
          img {
            min-width: 16rem;
            height: 16rem;
          }
    
          span {
            font-size: 2.8vw;
          }
        }
      }
    }
  }
  
  /* .section14 - 한부모가정 연구소 */
  .section14 {
    .slide-image {
      background: url('/assets/images/main/section14/section14_bg01.png') no-repeat 56% 0 / cover;
    }

    .section-title {
      font-size: 8vw;
    }

    .section-description {
      font-size: 3.5vw;
      margin-bottom: 4rem;
    }
  }

  /* .section15 - 재혼가정 연구소 */
  .section15 {
    .section-title {
      font-size: 8vw;
    }

    .section-description {
      font-size: 3.8vw;
      margin-bottom: 4rem;
    }
  }

  /* section16 - 재혼 테스트 */
  .section16 {
    .content {
      .section-title {
        font-size: 8vw;
      }

      .section-description {
        font-size: 3.5vw;
        margin: 1rem 0 4rem;
      }

      ul {
        max-width: 90vw;
        gap: 1.5rem;
      }

      li {
        height: 12rem;

        .img-container {
          width: 12vw;
          height: 12vw;
        }

        h3{
          font-size: 3.5vw;
        }
      }
    }
  }



  /* .section17 - 무료상담 */
  .section17 {
    .form-area {
      max-width: 85vw;

      .form-header {
        .form-title {
          font-size: 7vw;
        }
      }

      .form-group {
        .input-group {
          input, select {
            height: 4rem;
          }

          #webname_foot{
            width: 60%
          }

          #webage_foot{
            width: 30vw;
          }

          #webauth_foot{
            max-width: 71.5vw;
          }

          .toggle-icon {
            right: 2vw !important;
            width: 1.2rem;
          }
  
          .radio-group {
            gap: 2vw;
            display: flex;
            justify-content: flex-end;

            &.name {
              gap: 3vw;
            }

            .radio-label {
              gap: 0.4rem;
              display: flex;
              align-items: center;
  
              input[type="radio"] {
                width: 4.6vw;
                height: 4.6vw;
                flex-shrink: 0;
              }
            }
          }
  
          &.phone {
            display: flex;
            gap: 0.6rem;
            justify-content: flex-end;

            .phone-inner{
              gap: 0.8rem;
              display: flex;
              align-items: center;
            }

            .phone-group {
              select, input {
                max-width: 21vw;
              }
            }
  
            .auth-btn {
              padding: 1.2rem 8%;
              font-size: 2.8vw;
              white-space: nowrap;
              flex-shrink: 0;
            }
          }

          &.mobile-flex{
            gap: 1.4vw;

            select {
              width: 41vw;
            }
          }
        }

        &.checkbox-group {
          padding-top: 0;
          .checkbox-sub{
            display: block;
            margin-right: 10vw;
          }

          .checkbox-label {
            gap: 0.2rem;

            span{
              font-size: 2.5vw;
  
              &.text-agree_all {
                font-size: 2.8vw;
              }
            }
  
            input[type="checkbox"] {
              width: 4.5vw;
              height: 4.5vw;
  
              &:checked {
                &::after {
                  font-size: 4vw;
                }
              }
            }
          }

          .detail-link {
            font-size: 2vw;
          }
        }
      }

      #privacyError,
      #marketingError {
        margin-left: 24vw;
      }

      .submit-btn {
        padding: 1.4rem 5rem 1.4rem 3rem;
        font-size: 3.3vw;
        margin-top: 2rem;

        .icon-default,
        .icon-hover {
          right: 6vw;
          width: 3vw;
        }
      }
    }
  }
  
  /* .section18 - 전국지사 */
  .section18 {
    .text-area {
      .section-title {
        font-size: 8vw;
      }

      .section-sub-title {
        font-size: 3.3vw;
        line-height: 1.4;

        .br{display: block;}
      }
    }

    .branch-wrap {
      a{
        width: 26vw;
        height: 16vh;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  /* .section01 - 재혼 */
  .section01 {
    .swiper-slide.slide01 {
      .slide-image {
        background: url('/assets/images/main/section01/section01_bg01.png') no-repeat 11% 0  / cover;
      }
    }
  }
  
  .section17 {
    .form-area {
      max-width: 90vw;
      padding: 0 2vw;
      
      .form-group {
        .input-group {
          gap: 1.2rem;

          #webname_foot{
            width: 70%;
          }

          #webage_foot {
            width: 35vw;
          }

          #webauth_foot {
            max-width: 48.5%;
          }

          &.phone {
            .phone-group {
              select, input {
                max-width: 14.2%
              }
            }

            .auth-btn {
              padding: 1.2rem 5vw;
            }
          }
          
          &.mobile-flex {
            select {
              width: 42vw;
            }
          }
        }
      }
    }
  }
}

@supports (-webkit-touch-callout: none) {
  .section17 {
    .form-area {
      .form-group {
        .input-group {
          input, select {
            border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
          }
        }
      }
    }
  }
}