@charset "UTF-8";
/* ============================================
 * Main page 1st breakpoint → 1620px
 * (index 전용: 섹션1~5)
 * ============================================ */
/* 공통 소제목/컨테이너 소폭 축소 */
@media (max-width: 1620px) {
  :root {
    --container-max: 1480px;
  } /* 메인 한정으로 살짝 압축 */
  .small-title {
    font-size: 20px;
  }
}
@media (max-width: 1620px) {
  .section1 .text-box .title-txt h2 {
    font-size: 76px;
  }
  .section1 .text-box .title-txt .option {
    left: 200px;
    bottom: 0;
    font-size: 28px;
  }
  .section1 .text-box .bot p {
    font-size: 28px;
  }
  .section2 .slide .box {
    gap: 20px;
  }
  .section2 .slide p {
    font-size: 54px;
  }
  .section2 .slide .icon {
    width: 64px;
    height: 64px;
  }
  .section3 h2 {
    font-size: 48px;
  }
  .section3 .card {
    padding: 48px;
  }
  .section3 .card .text-box .num {
    font-size: 110px;
  }
  .section3 .card .text-box .title {
    margin-top: 48px;
  }
  .section3 .card .img-box {
    width: 460px;
    height: 300px;
  }
  .section4 .container {
    gap: 64px;
  }
  .section4 h2 {
    font-size: 44px;
  }
  .section4 .card-wrap .card {
    width: 400px;
    height: 520px;
  }
  .section4 .card-wrap .card .img-box {
    width: 300px;
    height: 300px;
  }
  .section5 h2 {
    font-size: 44px;
  }
  .section5 .box {
    height: 420px;
  }
  .section5 .box p {
    font-size: 32px;
  }
  .section5 .bg-text {
    font-size: 90px;
    top: 90px;
    right: 70px;
  }
}
@media (max-width: 1430px) {
  .section3 .card {
    width: 95%;
  }
  .section4 .card-wrap.pc .card {
    width: calc(50% - 10px);
    height: 100%;
    padding: 40px;
    align-items: center;
  }
  .section4 .card-wrap.pc .card:nth-child(2), .section4 .card-wrap.pc .card:nth-child(4) {
    margin-left: 20px;
  }
  .section4 .card-wrap.pc .card .img-box {
    width: 250px;
    height: 250px;
  }
}
@media (max-width: 1200px) {
  .section3 h2 {
    font-size: 36px;
  }
  .section3 .card .img-box {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    flex-shrink: 1;
    margin-left: 20px;
  }
  .section3 .card .img-box img {
    height: 100%;
  }
  .section3 .card .text-box .num {
    font-size: 90px;
  }
  .section3 .card .text-box .title {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .section4 .container {
    flex-direction: column;
    justify-content: center;
  }
  .section4 .text-box {
    width: 100%;
    margin-top: 0;
  }
  .section4 .card-wrap.pc {
    display: none;
  }
  .section4 .card-wrap.swiper {
    width: 100%;
    display: block;
    padding-top: 0;
  }
  .section4 .card-wrap .card {
    width: auto;
    height: auto;
    padding: 24px;
  }
  .section4 .card-wrap .card .img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto;
  }
  .section5 .flex {
    gap: 30px;
  }
  .section5 .box {
    padding: 0 20px;
    height: 300px;
  }
  .section5 .box p {
    text-align: center;
  }
}
@media (max-width: 768px) {
  #header .gnb .select-box {
    height: 38px;
  }
  .section1 .text-box .title-txt h2 {
    font-size: 52px;
  }
  .section1 .text-box .title-txt .option {
    position: static;
  }
  .section1 .text-box .bot p {
    font-size: 18px;
  }
  .section2 .slide p {
    font-size: 36px;
  }
  .section3 h2 {
    font-size: 24px;
  }
  .section3 .card-wrap {
    margin-top: 50px;
  }
  .section3 .card {
    width: 100%;
    flex-direction: column-reverse;
    padding: 20px;
  }
  .section3 .card .img-box {
    width: 60%;
    margin-left: 0px;
    margin: 0 auto;
  }
  .section3 .card .text-box {
    width: 100%;
  }
  .section3 .card .text-box .num {
    font-size: 60px;
  }
  .section3 .card .text-box .title {
    font-size: 24px;
  }
  .section4 h2 {
    font-size: 24px;
  }
  .section4 .card-wrap .card p {
    font-size: 24px;
  }
  .section5 h2 {
    font-size: 24px;
  }
  .section5 .container {
    padding: 50px 0;
  }
  .section5 .flex {
    flex-direction: column;
  }
  .section5 .box {
    width: 100%;
    height: 250px;
  }
  .section5 .box.fluid {
    flex-direction: column;
  }
  .section5 .box.fluid p br {
    display: none;
  }
  .section5 .box.fluid .btn {
    margin-left: 0;
  }
  .section5 .box p {
    font-size: 24px;
  }
  .section5 .box p:nth-child(2) {
    font-size: 18px;
  }
  .section5 .box .btn {
    height: 50px;
    font-size: 18px;
  }
  .section5 .bg-text {
    font-size: 60px;
    top: 50px;
    right: 20px;
  }
}
@media (max-width: 480px) {
  .section1 .text-box .title-txt h2 {
    font-size: 42px;
  }
  .section1 .text-box .title-txt .option {
    left: 100px;
    font-size: 16px;
    bottom: 4px;
  }
  .section1 .text-box .bot {
    position: relative;
  }
  .section1 .text-box .bot .mouse-scroll {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .section1 .text-box .bot p {
    width: 100%;
    font-size: 18px;
    text-align: center;
  }
  .section2 .slide .icon {
    width: 42px;
    height: 42px;
  }
  .section2 .slide p {
    font-size: 24px;
  }
  .section3 h2 {
    font-size: 18px;
  }
  .section3 .card .text-box .num {
    font-size: 40px;
  }
  .section3 .card .text-box .title {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .section3 .card .text-box li {
    font-size: 16px;
  }
}