@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * HEADER
 * VISUAL
 * ANNOUNCEMENTS
 * FAQ
 * LATEST
 * TRAINING
 * BANNER
 * HOVER
 */



/* **************************************** *
 * HEADER
 * **************************************** */
.main-header { display: flex; gap: 80rem; justify-content: space-between; padding-bottom: 8rem; }
.main-header__desc { max-width: 278rem; margin-top: 16rem; }
.main-header__desc a { color: currentColor; border-bottom: 1px solid currentColor; transition: color .3s; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { aspect-ratio: 1 / 0.3947; background: var(--color-black); }

.main-visual__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 43.54%, rgba(0, 0, 0, .75) 100%); }
.main-visual__picture { width: 100%; height: 100%; position: relative; background: no-repeat center center; background-size: cover; }

.main-visual__content { width: 100%; position: absolute; left: 0; bottom: 60rem; padding: 0 30rem; }
.main-visual__typo { font-size: 0; color: var(--color-white); }
.main-visual__more { display: inline-block; margin-top: 20rem; color: var(--color-white); border: 1px solid var(--color-white); padding: 7rem 19rem; border-radius: 17rem; transition: background .3s, color .3s; }

/* Swiper override */
.main-visual .swiper-control { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 30rem; }

.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { height: 40rem; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { flex: 1; width: auto; height: 100%; background: transparent; opacity: 1; }

.main-visual .swiper-control .swiper-pagination-bullet__progress { width: 100%; height: 3rem; position: absolute; top: 50%; left: 0; background: rgba(255, 255, 255, .5); overflow: hidden; }
.main-visual .swiper-control .swiper-pagination-bullet__progress > span { display: block; width: 0; height: 100%; background: var(--color-primary); }

.main-visual .swiper-pagination-bullet:only-child { display: block !important; }

/* Fix JS loading time */
.main-visual .swiper-control { opacity: 0; visibility: hidden; }

/* Motion */
.main-visual__content .main-visual__more { opacity: 0; }



/* **************************************** *
 * ANNOUNCEMENTS
 * **************************************** */
.main-announcements .article__section-head { margin-bottom: 0; }



/* **************************************** *
 * FAQ
 * **************************************** */
.main-faq .article__section-head { margin-bottom: 0; }



/* **************************************** *
 * LATEST
 * **************************************** */
.main-latest { padding: 40rem 0 20rem; }
.main-latest__inner { background: var(--color-gray-100); padding: 60rem 40rem 72rem; }
.main-latest__title { text-align: center; margin-bottom: 40rem; }

.main-latest .jt-grid-list__item { background: var(--color-white); }
.main-latest .jt-grid-list__content { padding: 20rem 16rem; }
.main-latest .jt-grid-list__category { padding: 0; }

.main-latest__resource { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24rem; margin-top: 40rem; }
.main-latest__resource-title { position: relative; padding: 10rem 0; margin-bottom: 16rem; }
.main-latest__resource-list { position: relative; }
.main-latest__resource-list > li > a { display: flex; align-items: center; justify-content: space-between; gap: 20rem; background: var(--color-white); border: 1px solid var(--color-gray-300); padding: 15rem; color: var(--color-black); transition: background .3s; }
.main-latest__resource-list > li + li { margin-top: -1px; }
.main-latest__resource-list > li > a > span { flex: 1; }
.main-latest__resource-list > li > a .jt-accent-icon { width: 18rem; }



/* **************************************** *
 * TRAINING
 * **************************************** */
.main-training .jt-grid-list { margin-top: 40rem; }



/* **************************************** *
 * BANNER
 * **************************************** */
.main-banner { height: 420rem; }
.main-banner__bg { position: absolute; inset: 0; }
.main-banner__bg-picture { position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-banner__bg--mobile { display: none; }
.main-banner__content { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 200rem 0 635rem; }
.main-banner__title { color: var(--color-white); font-size: 48rem; line-height: 1; letter-spacing: 0; font-weight: 700; }
.main-banner__title span { color: var(--color-primary); }
.main-banner__desc { color: var(--color-white); font-size: 16rem; line-height: 1.3; letter-spacing: 0; font-weight: 500; margin-top: 16rem; }
.main-banner__links { display: flex; gap: 16rem; margin-top: 40rem; }
.main-banner__links > a { width: 160rem; }
.main-banner__links .jt-lazyload { padding-top: 29.37%; }



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

    /* VISUAL */
    .main-visual__more:hover { background: var(--color-white); color: var(--color-black); }

    /* HEADER */
    .main-header__desc a:hover { color: var(--color-primary); }

    /* LATEST */
    .main-latest__resource-list > li > a:hover { background: var(--color-gray-100); }

}