.main-row {overflow: hidden;}
.main-row .row-heading h2 {font-size: 4rem; font-weight: 700; position: relative; z-index: 1;} 
.main-row--visual {width: 100%; overflow: hidden; }
.main-row--visual .swiper {height: 100%;}
.main-row--visual .swiper-slide {transition: transform 6s ease;}
.main-row--visual .swiper-slide-active {transform: scale(1.1)}
.main-row--visual .slide-img {background-size: cover; aspect-ratio: 1920 / 1000; background-position: center;}
.main-row--visual .slide-text {position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; color: #fff; text-align: center; transform: translate(-50%, -20%); width: 100%; transition: 3s ease-out; transition-delay: 0.5s; opacity: 0;}
.main-row--visual .swiper-slide-active .slide-text {transform: translate(-50%, -50%); opacity: 1;}
.main-row--visual .controls {display: flex; align-items: center; justify-content: center; column-gap: 2rem; bottom: 4rem; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;}
.main-row--visual .swiper-pagination {display: flex; align-items: center; column-gap: 2rem; position: static;}
.main-row--visual .swiper-pagination-bullet {display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: #fff; width: 4.4rem; height: 4.4rem; border-radius: 999px; border: 1px solid transparent; opacity: 1; background: transparent;}
.main-row--visual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0;}
.main-row--visual .swiper-pagination-bullet.swiper-pagination-bullet-active {border: 1px solid rgba(255, 255, 255, 0.20);}
.main-row--visual .swiper-pause {display: inline-block; width: 1.2rem; height: 1.2rem; background: url('../img/main/icon-pause.svg') no-repeat center / contain; cursor: pointer;}
.main-row--visual .swiper-pause.on {background: url('../img/main/icon-play.svg') no-repeat center / contain; }

.main-row .logo-text {white-space: nowrap;}
.main-row--story {padding: 16.3rem 0 15rem; position: relative;}
.main-row--story::after {content: ""; display: inline-block; background: url('../img/main/story-cell.png') no-repeat center / contain; width: 66.4rem; height: 65.4rem; position: absolute; top: 0; left: 0; pointer-events: none; animation: popping 3s ease-in-out infinite alternate; z-index: -1;}
.main-row--story .row-heading {margin-bottom: 12rem; position: relative;}
.main-row--story .row-heading .logo-text {position: absolute; top: 50%; animation: text-to-left 30s linear infinite;}
.main-row--story .box {border-radius: 2rem; overflow: hidden;}
.main-row--story .box-img {position: relative; overflow: hidden; aspect-ratio: 695 / 480;;}
.main-row--story .box-img::after {content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0; transition: opacity 0.3s ease;}
.main-row--story .box {position: relative; }
.main-row--story .box-text {position: absolute; bottom: 4.4rem; left: 5.2rem; color: #fff; z-index: 10; width: calc(100% - 10.4rem);}
.main-row--story .box-text--heading {display: flex; flex-direction: column; row-gap: 0.8rem;}
.main-row--story .box-text--heading * {line-height: normal;}
.main-row--story .box .heading-kr {font-weight: 700;}
.main-row--story .box-text--detail {opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease;}
.main-row--story .box-cta {position: absolute; right: 0; bottom: 0.95rem;}

.main-row--service {background: linear-gradient(180deg, #FFF 0%, #F9F9FA 35.58%); padding: 34rem 0 20rem; position: relative;}
.main-row--service::after {content: ""; display: inline-block; background: url('../img/main/service-cell.png') no-repeat center / contain; width: 66.4rem; height: 65.4rem; position: absolute; top: 0; right: -11px; pointer-events: none; animation: popping 3s 0.5s ease-in-out infinite alternate;}
.main-row--service .logo-text {position: absolute; top: 6rem; animation: text-to-right 30s linear infinite;}
.main-row--service .row-heading {margin-bottom: 6rem;}
.main-row--service .box {align-self: stretch; transform: translateY(0); transition: transform 0.3s ease;}
.main-row--service .box a {display: flex; flex-direction: column; height: 100%;}
.main-row--service .box-img {border-top-left-radius: 2rem; border-top-right-radius: 2rem; overflow: hidden; aspect-ratio: 23 / 15;}
.main-row--service .box-content {display: flex; flex-direction: column; row-gap: 2.5rem; background: #fff; border: 1px solid #E0E0E0; padding: 3rem 3.5rem 4rem; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; flex: 1;}
.main-row--service .box-text {display: flex; flex-direction: column; row-gap: 1.4rem; }
.main-row--service .box-text--heading h6 {font-size: 3rem; font-weight: 600;}
.main-row--service .box-text--detail {font-size: 1.6rem; min-height: 7.2rem; word-break: keep-all;}
.main-row--service .box-cta {margin-left: auto; margin-top: auto;}
.main-row--service .box-cta svg {width: 5.3rem; height: 1.4rem;}

.main-row--cta {display: flex; align-items: center; justify-content: center; background: url('../img/main/main-banner-img.jpg') no-repeat center / cover; height: 50rem; position: relative; overflow: hidden;}
.main-row--cta .inner {display: flex; flex-direction: column; align-items: center; row-gap: 4rem;} 
.main-row--cta .cta-heading {text-align: center;}
.main-row--cta .cta-heading * {color: #fff; }
.main-row--cta .cta-heading h4 {font-weight: 700;}

/* 영문 */ 
.main-row--story .box-text--heading .heading-en {display: none;}

@keyframes text-to-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes text-to-left {
  0% {
    transform: translateX(0%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-50%);
  }
}

@keyframes popping {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-8%);
  }
}


@media (hover: hover) {
    .main .box:hover .box-img::after {opacity: 0.5;}
    .main-row--story .box:hover .box-text--detail {opacity: 1; visibility: visible; max-height: 5.6rem; margin-top: 3.5rem;}

    .main-row--service .box:hover {transform: translateY(-2rem); transition: transform 0.3s ease;}
    .main-row--service .box:hover .box-content {background: #F9F9FA;}

    /* 영문 */
    .main-en .main-row--story .box:hover .box-text--detail {padding-bottom: 5rem; max-height: 10.56rem;}
}

@media (max-width: 1600px) {
    .main-row--service .box-content {padding: 2.5rem 2.5rem 3rem;}
}

@media (max-width: 1280px) {
    .main-row--story .box-text {left: 3.2rem; bottom: 3.5rem; width: calc(100% - 6.4rem);}

    /* 영문 */
    .main-en .main-row--story .box-text {left: 2.2rem; bottom: 2.5rem; width: calc(100% - 4.4rem); }
    .main-en .main-row--story .box .box-text--detail {padding-bottom: 5rem;}
}

@media (max-width: 1024px) {
    .main-row--visual .slide-img {aspect-ratio: 1920 / 1200;}

    .main-row--story::after {width: 48.4rem; height: 47.4rem;}

    .main-row--service {padding: 30rem 0 12rem;}
    .main-row--service::after {width: 58.4rem; height: 57.4rem;}
    .main-row--service .box-text--heading h6 {font-size: 2.6rem;}
    .main-row--service .box-text--detail br {display: none;}

    .main-row--cta {height: 36rem;}
}

@media (max-width: 768px) {
    .main-row .row-heading h2 {font-size: 3.4rem;}
    .main-row--visual .slide-img {aspect-ratio: 1920 / 1600;}
    .main-row--visual .slide-text {font-size: 10rem;}

    .main-row--story .box-img {aspect-ratio: 695 / 320;}

    .main-row--service .row-heading {margin-bottom: 4rem;}
    .main-row--service .box a {flex-direction: row;}
    .main-row--service .box-img {width: 45%; border-top-right-radius: 0; border-bottom-left-radius: 2rem;}
    .main-row--service .box-img img {object-fit: cover; height: 100%;}
    .main-row--service .box-content {border-bottom-left-radius: 0; border-top-right-radius: 2rem; row-gap: 2rem;}
    .main-row--service .box-text--detail {font-size: 1.8rem;}
}

@media (hover: hover) and (max-width: 768px) {
    .main-row--story .box:hover .box-text--detail {max-height: 6rem; margin-top: 2.5rem;}

}

@media (max-width: 480px) {
    .main-row--visual .slide-img {aspect-ratio: 1920 / 2400;}
    .main-row--visual .slide-text--heading {font-size: 2rem;}
    .main-row--visual .slide-text--detail {font-size: 15vw;}

    .main-row--story {padding: 20rem 0 10rem;}
    .main-row--story::after {width: 38.4rem; height: 37.4rem;}
    .main-row--story .row-heading {margin-bottom: 6rem;}
    .main-row--story .row-heading .logo-text {top: -20%;}
    .main-row--story .box-img {display: flex; align-items: center; justify-content: center; aspect-ratio: 695 / 480;}
    .main-row--story .box-img::after {opacity: 0.5; visibility: visible;}
    .main-row--story .box-text--detail {max-height: unset; margin-top: 2rem; opacity: 1; visibility: visible;}

    .main-row--service {padding: 26rem 0 10rem;}
    .main-row--service::after {width: 34.4rem; height: 33.4rem;}
    .main-row--service .box-content {padding: 2.5rem 2rem 2rem 1.5rem;}
    .main-row--service .box-text--heading h6 {font-size: 2.2rem;}
    .main-row--service .box-text--detail {font-size: 1.7rem;}

    .main-row--cta {height: 28rem;}
    .main-row--cta .cta-heading span {font-size: 2rem;}
    .main-row--cta .cta-heading h4 {font-weight: 600;}

    /* 영문 */
    .main-en .slide-text {width: 85%;}
    .main-en .slide-text br {display: none;}

}