@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LAYOUT
 * INTRO
 * BANK
 * SOLUTION
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-bottom: 0; }
.main-section:first-child { padding-top: 0; }
.main-section { position: relative; padding-top: 200rem; overflow: hidden; }
.main-section--secondary { padding-bottom: 200rem; }
.main-section__head { position: relative; text-align: center; margin-bottom: 80rem; z-index: 1; }
.main-section__title { position: relative; font-size: 0; }
.main-section__title span { position: relative; z-index: 1; }
.main-section__title span:before, .main-section__title span:after { content: ''; position: absolute; background: no-repeat center center / 100%; z-index: -1; }
.main-section__desc { margin-top: 16rem; color: var(--color-gray-800); }

 

/* **************************************** *
 * INTRO
 * **************************************** */
.main-intro__content { display: flex; gap: 80rem; justify-content: space-between; }
.main-intro__column:first-child { flex: 1; }
.main-intro__column:last-child { width: 580rem; }
.main-intro__desc { position: relative; color: var(--color-gray-800); margin-top: 16rem; }
.main-intro__desc span { display: inline-block; color: var(--color-secondary); }
.main-intro__controls { display: flex; gap: 8rem; margin-top: 32rem; }
.main-intro__visual { margin-top: 60rem; }
.main-intro__link { position: relative; display: block; padding-top: 31.87%; border-radius: 16rem; overflow: hidden; }
.main-intro__visual-bg { position: absolute; inset: 0; }
.main-intro__visual-bg--mobile { display: none; }
.main-visual__picture { position: absolute; inset: 0; background: no-repeat center center / cover; }

/* SWIPER CONTROL */
.main-intro__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:after { width: 48rem; }



/* **************************************** *
 * BANK
 * **************************************** */
.main-bank .main-section__title span:after { background-image: url(../images/icon/icon-point-01.svg); width: 43rem; aspect-ratio: 1 / 1.0697; transform: translate(-5rem, -18rem); }
.main-bank__slider { overflow: visible; }
.main-bank__slide { max-width: 1240rem; margin: 0 10rem; }
.main-bank__link { position: relative; display: block; padding-top: 46.77%; border-radius: 16rem; overflow: hidden; }
.main-bank__bg { position: absolute; inset: 0; }
.main-bank__bg--mobile { display: none; }
.main-bank__picture { position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-bank__more { position: absolute; bottom: 50rem; right: 50rem; display: flex; align-items: center; justify-content: center; width: 52rem; height: 52rem; background: var(--color-gray-300); border-radius: 50%; transition: background .3s; }
.main-bank__more .jt-icon { width: 100%; }

/* POPUP */
.main-bank__popup { position: fixed; inset: 0; display: flex; justify-content: center; z-index: 501; opacity: 0; visibility: hidden; --top-gap: 100rem; --close-gap: 40rem; --close-size: 52rem; }
.main-bank__popup-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, .9); }
.main-bank__popup-container { position: relative; width: 100%; padding: var(--top-gap) 30rem; scrollbar-width: none; overflow: auto; -webkit-overscroll-behavior: none; overscroll-behavior: none; }
.main-bank__popup-container::-webkit-scrollbar { display: none; }
.main-bank__popup-container-inner { position: relative; max-width: 1240rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; border-radius: 16rem; box-shadow: 0 4rem 30rem 0 rgba(0, 0, 0, .3); }
.main-bank__popup-content { order: 2; margin-top: calc((var(--close-gap) + var(--close-size)) * -1); background: var(--color-white); padding-bottom: 160rem; border-radius: 16rem 16rem 0 0; overflow: hidden; }
.main-bank__popup-control { order: 3; display: block; background: var(--color-gray-100); padding: 50rem 0 80rem; border-radius: 0 0 16rem 16rem; border-top: 1px solid var(--color-gray-400); }
.main-bank__popup-control-inner { position: relative; max-width: 680rem; margin: 0 auto; padding-right: 80rem; }
.main-bank__popup-control-inner span { display: block; color: var(--color-gray-600); margin-bottom: 10rem; }
.main-bank__popup-control-inner b { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-gray-800); }
.main-bank__popup-control-inner .jt-icon { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; background: var(--color-gray-300); border-radius: 50%; transition: background .3s; }
.main-bank__popup-control-inner .jt-icon svg { width: 50%; }
.main-bank__popup-close { order: 1; position: sticky; top: calc((var(--top-gap) - var(--close-gap)) * -1); display: flex; align-items: center; align-self: flex-end; margin: var(--close-gap) var(--close-gap) 0 0; justify-content: center; width: var(--close-size); height: var(--close-size); background: var(--color-gray-300); border: 0; padding: 0; border-radius: 50%; z-index: 1; cursor: pointer; transition: background .3s; }
.main-bank__popup-close .jt-icon { width: 24rem; }

.main-bank__popup--single .main-bank__popup-content { border-radius: 16rem; }
.main-bank__popup--single .main-bank__popup-control { display: none; }


/* **************************************** *
 * SOLUTION
 * **************************************** */
.main-solution .main-section__title span:after { background-image: url(../images/icon/icon-point-02.svg); width: 56rem; aspect-ratio: 1 / 2.1071; transform: translate(12rem, 4rem); }
.main-solution__list { overflow: visible; }
.main-solution__list + .main-solution__list { margin-top: 20rem; }
.main-solution__item { width: calc(33.33% - 13.33rem); margin-right: 20rem; }
.main-solution__item:last-child { margin-right: 0; }
.main-solution__link { display: block; /* perspective: 1000rem; */ }
.main-solution__inner { position: relative; transform-style: preserve-3d; padding-top: 138.46%; transition: transform .6s; will-change: transform; }
.main-solution__bg { position: absolute; inset: 0; }
.main-solution__picture { position: absolute; inset: 0; background: no-repeat center center / cover; }

html.ios .main-solution--reverse .main-solution__bg .jt-background-video__vod { display: none; }
html.ios .main-solution--reverse .main-solution__bg .jt-background-video__poster { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* FRONT */
.main-solution__front { position: absolute; inset: 0; border-radius: 16rem; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* BACK */
.main-solution__back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-primary); transform: rotateY(180deg) translateZ(.1px); border-radius: 16rem; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.main-solution__back-inner { margin-top: -20rem; padding: 40rem; }
.main-solution__back-icon { display: inline-block; width: 95rem; font-size: 0; }
.main-solution__back-icon svg { width: 100%; height: auto; }
.main-solution__back-desc { color: var(--color-white); margin: 40rem 0; }
.main-solution__back-more { display: inline-block; padding: 4rem 0; color: var(--color-white); box-shadow: inset 0 -2rem 0 0 currentColor; }

/* WHITE */
.main-solution--white .main-solution__content { color: var(--color-white); }

/* REVERSE */
.main-solution--reverse .main-solution__inner { transform: rotateY(180deg); }



/* **************************************** *
 * DATA
 * **************************************** */
.main-data.main-section { padding: 120rem 0; }
.main-data { background: #000; --number-size: var(--font-size-primary-01); --number-padding: 20rem; }
.main-data .main-section__title span:after { background-image: url(../images/icon/icon-point-03.svg); width: 286rem; aspect-ratio: 1 / 0.0419; transform: translate(-263rem, 67rem); }
.main-data__bg { position: absolute; inset: 0; background: no-repeat center bottom / cover; }
.main-data__bg--mobile { display: none; }
.main-data .main-section__title { color: var(--color-white); }
.main-data__container { display: flex; justify-content: space-between; gap: 100rem; max-width: 1316rem; margin: 0 auto; padding-top: 20rem; }
.main-data__item { text-align: center; }
.main-data__item b { display: block; margin-top: 8rem; color: var(--color-white); }
.main-data__numbers { display: flex; gap: 12rem; }
.main-data__number { display: flex; }
.main-data__number span { color: var(--color-white); font-family: var(--font-secondary); font-size: var(--number-size); line-height: 1.3; letter-spacing: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
.main-data__number-list { position: relative; height: calc(var(--number-size) * 1.3); overflow: hidden; }
.main-data__number-rolling span { display: block; transform: rotate(-1deg); will-change: transform; }
.main-data__number-icon { display: block; width: 28rem; }
.main-data__number-icon svg { width: 100%; height: auto; }
.main-data__number-icon path { fill: var(--color-white); }



/* **************************************** *
 * REVIEW
 * **************************************** */
.main-review .main-section__title span:after { background-image: url(../images/icon/icon-point-04.svg); width: 120rem; aspect-ratio: 1 / 1; transform: translate(-30rem, 44rem); }
.main-review__slider { padding-top: 20rem; overflow: visible; }
.main-review__slide { max-width: 807rem; margin: 0 10rem; }
.main-review__inner { display: inline-block; width: 100%; height: 708rem; background: var(--color-gray-200); border-radius: 16rem; transition: background .3s; }
.main-review__video { position: relative; margin: 16rem 16rem 0; border-radius: 8rem; aspect-ratio: 1 / 0.5651; overflow: hidden; }
.main-review__content { padding: 40rem 40rem 60rem; }
.main-review__meta { margin-bottom: 24rem; }
.main-review__category { display: inline-block; padding: 4rem 16rem; border-radius: 15rem; color: var(--color-white); background: linear-gradient(95deg, #0080FF 1.78%, #05D959 97.65%); }
.main-review__title { color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.main-review__tag { display: block; margin-top: 8rem; color: var(--color-gray-700); }



/* **************************************** *
 * CTA
 * **************************************** */
.main-cta__title span:after { content: ''; position: absolute; background: url(../images/icon/icon-point-05.svg) no-repeat center center / 100%; width: 184rem; aspect-ratio: 1 / 0.04; transform: translate(-529rem, -9rem); z-index: -1; }

.main-cta__motion { position: relative; display: flex; align-items: center; justify-content: center; gap: 20rem; margin: 0 -27rem; z-index: 1; opacity: 0; }
.main-cta__motion-column { display: flex; flex-direction: column; gap: 20rem; }
.main-cta__motion-item { border-radius: 20rem; overflow: hidden; }

.main-cta__motion-column:nth-child(1) { width: 360rem; }
.main-cta__motion-column:nth-child(1) .main-cta__motion-item .jt-lazyload { padding-top: 115.83%; }
.main-cta__motion-column:nth-child(2) { width: 360rem; }
.main-cta__motion-column:nth-child(2) .main-cta__motion-item:nth-child(1) .jt-lazyload { padding-top: 88.88%; }
.main-cta__motion-column:nth-child(2) .main-cta__motion-item:nth-child(2) .jt-lazyload { padding-top: 63.88%; }
.main-cta__motion-column:nth-child(3) { width: 454rem; }
.main-cta__motion-column:nth-child(3) .main-cta__motion-item .jt-lazyload { padding-top: 154.18%; }
.main-cta__motion-column:nth-child(4) { width: 360rem; }
.main-cta__motion-column:nth-child(4) .main-cta__motion-item:nth-child(1) .jt-lazyload { padding-top: 66.11%; }
.main-cta__motion-column:nth-child(4) .main-cta__motion-item:nth-child(2) .jt-lazyload { padding-top: 93.05%; }
.main-cta__motion-column:nth-child(5) { width: 360rem; }
.main-cta__motion-column:nth-child(5) .main-cta__motion-item .jt-lazyload { padding-top: 130.55%; }

.main-cta__content { margin-top: 80rem; }
.main-cta__title { position: relative; text-align: center; font-size: 0; }
.main-cta__title span { position: relative; z-index: 1; }
.main-cta__title em { color: var(--color-secondary); }
.main-cta__control { display: flex; justify-content: center; gap: 10rem; margin-top: 48rem; }



/* **************************************** *
 * EPILOGUE
 * **************************************** */
.main-epilogue.main-section { padding-top: 0; }
.main-epilogue { display: flex; justify-content: center; align-items: center; height: 800rem; }
.main-epilogue__bg { position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-epilogue__bg--mobile { display: none; }
.main-epilogue__bg:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.main-epilogue__content { position: relative; text-align: center; }
.main-epilogue__title { color: var(--color-white); }
.main-epilogue__desc { color: var(--color-white); margin-top: 24rem; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* BANK */
    .main-bank__link:hover .main-bank__more { background: var(--color-gray-400); }
    .main-bank__popup-close:hover { background: var(--color-gray-400); }
    .main-bank__popup-control:hover .jt-icon { background: var(--color-gray-400); }

    /* SOLUTION */
    .main-solution__link:hover .main-solution__inner { transform: rotateY(180deg); }
    html.mac .main-solution__link:hover .main-solution__bg .jt-background-video__vod { display: none; }
    html.mac .main-solution__link:hover .main-solution__bg .jt-background-video__poster { display: block !important; opacity: 1 !important; visibility: visible !important; }

    /* REVIEW */
    .main-review__slide:hover .main-review__inner { background: #A0E1FD; }

}