@charset "UTF-8";

@media (max-width: 1380px) {
  /* ================================
 Main
================================ */
  main .dummy {
    display: none;
  }

  /* ================================
 differ
================================ */
  .differ {
    padding: 170px 0;
  }

  /* ================================
 trust
================================ */
  .trust-controls {
    left: 3.5vw; /* 화면 비율에 맞춰 위치 조정 */
  }

  /* ================================
 start
================================ */
  .start .box01,
  .start .box02,
  .start .box03,
  .start .box04 {
    display: none;
  }

  .start h2 {
    font-size: 20rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  /* ================================
 renewal
================================ */
  .renewal {
    height: auto;
    padding: 170px 0;
  }

  .renewal .downbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .renewal .card {
    width: 100%;
    height: 55rem;
  }

  .renewal .top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
  }

  /* ================================
 explan
================================ */
  .explan {
    padding-top: 170px;
    height: auto;
  }

  .explan .wrap {
    flex-direction: column;
    padding-top: 0;
    align-items: center;
  }

  .explan .title {
    text-align: center;
    padding-top: 0;
  }

  .explan .title .line {
    margin-left: auto;
  }

  /* ================================
 free
================================ */
  .free {
    height: auto;
    padding-top: 170px;
  }

  .free .contentbox {
    border-right: none;
    border-top: none;
    height: 210px;
  }

  /* ================================
 process
================================ */
  .process {
    height: auto;
    padding-top: 170px;
  }

  .process .current-step,
  .process .total-step {
    font-size: 13px;
  }

  .process .arrow-icon {
    display: none;
  }

  /* ================================
 contact
================================ */
  .contact {
    height: auto;
    padding-top: 170px;
  }

  .contact .downbox {
    flex-direction: column;
    align-items: center;
  }

  .contact .card {
    width: 70%;
    border-right: 1px solid #c4c4c4;
    border-bottom: none;
    padding: 6rem 0;
  }

  .contact .card:last-of-type {
    border-bottom: 1px solid #c4c4c4;
  }

  .contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 175px;
  }
}

@media (max-width: 1080px) {
  /* ================================
 happy
================================ */
  .happy {
    height: calc(var(--vh, 1vh) * 96);
  }

  /* ================================
 trust
================================ */
  .trust-controls {
    bottom: 20rem;
  }
  /* ================================
 process
================================ */
  .process p {
    font-size: 13px;
  }

  .process .card {
    width: 215px;
    height: 215px;
  }
}

@media (max-width: 768px) {
  /* ================================
 Main
================================ */
  main {
    height: calc(var(--vh, 1vh) * 100);
    background-image: url("../img/mobile_main.jpg");
  }

  main .dummy {
    display: none;
  }

  main .mobile {
    display: block;
  }

  main .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  main h2 {
    margin-bottom: 18px;
  }

  main h4 {
    margin-bottom: 40px;
  }

  main .pc {
    display: block;
  }

  /* ================================
 differ
================================ */
  .differ {
    padding-top: 150px;
  }

  .differ .title {
    margin-bottom: 40px;
  }

  .differ .downbox {
    flex-direction: column;
    align-items: center;
  }

  .differ img {
    max-width: 84px;
  }

  .differ .rowline {
    display: block;
    margin: 50px 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
  }

  /* ================================
 happy
================================ */
  .happy {
    height: calc(var(--vh, 1vh) * 80);
  }

  .happy h2 {
    font-size: 20px;
  }

  .happy .mobile {
    display: block;
  }

  .happy #t01 {
    top: 50%;
    left: 4vw;
  }

  .happy #t03 {
    top: 50%;
    right: 4vw;
  }

  /* ================================
 trust
================================ */
  .trust {
    height: auto;
    position: relative;
    padding: 150px 0;
  }

  .trust .swiper-slide {
    width: 80%;
  }

  .trust .contentbox {
    padding: 2.2rem;
  }

  .trust-controls {
    bottom: 10rem;
    left: 4vw; /* 화면 비율에 맞춰 위치 조정 */
  }

  /* ================================
 start
================================ */
  .start {
    height: calc(var(--vh, 1vh) * 70);
  }

  .start .box01,
  .start .box02,
  .start .box03,
  .start .box04 {
    display: none;
  }

  .start h2 {
    font-size: 12rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  /* ================================
 renewal
================================ */
  .renewal {
    padding: 0;
    height: auto;
    background-image: none;
  }

  .renewal .topbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 20px;
  }

  .renewal .pricebox {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 18px;
  }

  .renewal .top {
    align-self: flex-start;
    font-size: 10px;
    width: 84px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .renewal .downbox {
    display: flex;
    flex-direction: column;
  }

  .renewal .card {
    width: 92vw;
    height: 380px;
    border: 1px solid #777;
  }

  /* ================================
 office
================================ */
  .office {
    height: calc(var(--vh, 1vh) * 70);
    display: flex;
    align-items: center;
    padding-top: 80px;
  }

  .office h2 {
    left: 5%;
    bottom: -3%;
  }

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

  .office .dummy {
    top: 25%;
    left: -20vw;
  }

  .office .rightbox {
    top: 2%;
    right: 2%;
  }

  /* ================================
 explan
================================ */
  .explan {
    height: auto;
    padding-top: 150px;
  }

  .explan .wrap {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    align-items: center;
  }

  .explan .title {
    text-align: center;
  }

  .explan .title .line {
    margin-left: auto;
  }

  .explan .title img {
    max-width: 160px;
    margin-top: 30px;
  }

  /* ================================
 free
================================ */
  .free {
    height: auto;
    padding-top: 150px;
  }

  .free .downbox {
    grid-template-columns: repeat(2, 1fr);
  }

  .free .contentbox {
    padding: 20px 10px;
    border: none;
    height: 150px;
  }

  .free .pc {
    display: none;
  }

  .free p {
    font-size: 12px;
  }

  .free img {
    margin-bottom: 16px;
  }

  /* ================================
 process
================================ */
  .process {
    height: auto;
    padding-top: 150px;
  }

  .process .controller {
    display: none;
  }

  .process .card {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
  }

  .process .slider-track {
    width: 100%;
    display: flex;
  }

  .process .slide-item {
    width: auto;
    padding-right: 0;
    gap: 10px;
    padding-right: 0;
    margin-right: 0;
  }

  .process p {
    font-size: 11px;
  }

  .process h4 {
    font-size: 14px;
  }

  .process .number {
    margin-bottom: 4px;
  }

  .process .arrow-icon {
    max-width: 1.8rem;
  }

  .process .swiper-pagination {
    display: block;
  }

  .process .swiper-pagination-progressbar {
    position: relative; /* 슬라이드 아래에 배치 */
    width: 100%; /* 너비 꽉 차게 */
    height: 2px; /* 바 두께 (조절 가능) */
    background: #777777;
    margin-top: 30px; /* 슬라이드와의 간격 */
  }

  .process .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #ffffff;
  }

  /* ================================
 contact
================================ */
  .contact {
    height: auto;
    position: relative;
    padding-top: 150px;
  }

  .contact .downbox {
    flex-direction: column;
  }

  .contact .card {
    border: 1px solid #555;
    border-right: block;
    border-bottom: none;
    padding: 40px 35px;
    height: 300px;
    width: 100%;
  }

  .contact .card:last-of-type {
    border-bottom: 1px solid #555;
    border-right: 1px solid #555;
  }

  .contact .icon {
    width: 100%;
    height: auto;
    max-width: 40px;
  }

  .contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 50px;
    font-size: 14px;
  }

  .contact .right {
    width: 100%;
    height: auto;
    max-width: 8px;
  }

  .contact .card p {
    font-size: 15px;
  }
}