@charset "utf-8";

/*
 * File    : sub-seminar.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * SEMINAR
 * INQUIRY
 * COMPLETE
 * HOVER
 */

 

/* **************************************** *
 * SEMINAR
 * **************************************** */
/* VIEWER */
.seminar-viewer__container { position: relative; display: flex; padding-right: 393rem }
.seminar-viewer__slider { flex: 1; border-radius: 16rem; background: var(--color-gray-800); }
.seminar-viewer__media { position: relative; overflow: hidden; border-radius: 8rem; aspect-ratio: 1 / 0.5651; margin: 16rem 16rem 0; }
.seminar-viewer__image { position: absolute; inset: 0; background: no-repeat center center / cover; }
.seminar-viewer__info { padding: 40rem 160rem 40rem 40rem; }
.seminar-viewer__info-title { color: var(--color-white); overflow-wrap: anywhere; }
.seminar-viewer__content { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 30rem; width: 381rem; height: 100%; background: #A0E1FD; padding: 40rem 16rem 40rem 30rem; border-radius: 16rem; }
.seminar-viewer__icon { display: block; width: 24rem; height: 24rem; background: no-repeat center center / cover; }

.seminar-viewer--image .seminar-viewer__icon { background-image: url(../images/icon/icon-seminar-image.svg); }
.seminar-viewer--video .seminar-viewer__icon { background-image: url(../images/icon/icon-seminar-pause.svg); }

.seminar-viewer__slider .swiper-navigation { position: absolute; margin-top: 0; top: 0; right: 0; margin-top: calc(((100% - 8rem) * 0.5651) + 40rem); margin-right: 40rem; z-index: 1; }

.seminar-viewer__pagination { display: flex; flex-direction: column; gap: 8rem; flex: 1; padding-right: 14rem; overflow: auto; overscroll-behavior: none; }
.seminar-viewer__pagination-item { display: flex; align-items: center; padding: 16rem; border-radius: 8rem; gap: 10rem; background: rgba(255, 255, 255, .5); color: var(--color-black); opacity: 1; transition: background .3s; }
.seminar-viewer__pagination-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seminar-viewer__pagination-item.swiper-pagination-bullet-active { background: #00B4FF; }
.seminar-viewer__pagination-item.swiper-pagination-bullet-active.seminar-viewer--video .seminar-viewer__icon { background-image: url(../images/icon/icon-seminar-play.svg); }
.seminar-viewer__pagination .seminar-viewer__pagination-item.swiper-pagination-bullet:only-child { display: flex !important; }
.seminar-viewer__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { width: 100%; height: auto; margin-left: 0; margin-right: 0; }

html.win .seminar-viewer__pagination { overflow: overlay; }
html.win .seminar-viewer__pagination::-webkit-scrollbar { width: 4rem; background: transparent; }
html.win .seminar-viewer__pagination::-webkit-scrollbar-track { background: transparent; border-radius: 99rem; }
html.win .seminar-viewer__pagination::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .1); border-radius: 99rem; }

/* TIMER */
.seminar-timer { position: relative; display: flex; align-items: center; justify-content: center; gap: 10rem; height: 100rem; border-radius: 16rem; background: linear-gradient(88deg, #FFFF8B 0.88%, #D0FF71 99.7%); }
.seminar-timer__date > span { position: relative; top: -2rem; }

.seminar-viewer__container + .seminar-timer { margin-top: 120rem; }



/* **************************************** *
 * INQUIRY
 * **************************************** */
.seminar-inquiry .article__section-title > span:before { width: 131rem; aspect-ratio: 1 / 0.3893; background-image: url(../images/icon/icon-point-12.svg); transform: translate(-134rem, 26rem); }

.seminar-inquiry__radiobox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20rem; }
.seminar-inquiry__radiobox label { position: relative; display: block; padding: 22rem 38rem; border: 2rem solid var(--color-gray-100); background: var(--color-gray-100); border-radius: 8rem; overflow: hidden; cursor: pointer; transition: border .3s; }
.seminar-inquiry__radiobox input { position: absolute; opacity: 0; left: -9999rem; width: 1px; height: 1px; }
.seminar-inquiry__radiobox time { display: block; color: var(--color-gray-800); transition: color .3s; }
.seminar-inquiry__radiobox span { display: block; margin-top: 4rem; color: var(--color-gray-700); font-weight: 500; transition: color .3s; }

.seminar-inquiry__radiobox label:has(input:checked) { border-color: var(--color-primary); }
.seminar-inquiry__radiobox label:has(input:checked) time { color: var(--color-primary); }
.seminar-inquiry__radiobox label:has(input:checked) span { color: var(--color-primary); }



/* **************************************** *
 * COMPLETE
 * **************************************** */
.complete-info { overflow: visible; }
.complete-info__container { position: relative; border-radius: 12rem; background: var(--color-primary); padding: 60rem; }
.complete-info__container:before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 163rem; background: url(../images/sub/seminar/seminar-complete-info-bg.webp) no-repeat center center / cover; }
.complete-info__container:has(+ .complete-info__control) { margin-bottom: 80rem; }
.complete-info__container:has(+ .complete-info__control):before { display: none; }
.complete-info__date { display: inline-flex; gap: 10rem; color: var(--color-white); box-shadow: 0 1px 0 0 currentColor; }
.complete-info__list { margin-top: 24rem; }
.complete-info__list > li { color: var(--color-white); }
.complete-info__list > li + li { margin-top: 8rem; }
.complete-info__explain { display: flex; align-items: center; gap: 10rem; color: var(--color-white); margin-top: 24rem; }
.complete-info__explain .jt-icon { width: 24rem; }
.complete-info__explain .jt-icon path { fill: currentColor; }
.complete-info__control { display: flex; gap: 20rem; justify-content: center; text-align: center; }
.complete-info__control-tooltip { position: absolute; left: 50%; top: -3rem; transform: translate(-50%, -100%); padding: 6rem 22rem; border-radius: 99rem; background: linear-gradient(95deg, #55E451 1.78%, #EF0 97.65%); white-space: nowrap; font-size: 0; color: var(--color-black); }
.complete-info__control-tooltip:before { content: ''; position: absolute; left: 17rem; top: 100%; margin-top: -1rem; width: 12rem; height: 10rem; background: #55E451; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }

.complete-content__step { margin-bottom: 120rem; }
.complete-content__step-container { display: flex; gap: 22rem; justify-content: center; }
.complete-content__step-item { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 20rem; aspect-ratio: 1 / 1; border-radius: 16rem; border: 1px solid var(--color-gray-400); padding: 50rem; text-align: center; }
.complete-content__step-title span { display: inline-block; padding: 4rem 24rem; background: #FFE05B; border-radius: 99rem; }
.complete-content__step-title b { display: block; margin-top: 24rem; color: var(--color-gray-800); }
.complete-content__step-icon { display: inline-block; width: 140rem; margin-bottom: 10rem; font-size: 0; }
.complete-content__step-icon svg { width: 100%; height: auto; }
.complete-content__step-chevron { display: flex; align-items: center; justify-content: center; }
.complete-content__step-chevron .jt-icon { width: 36rem; }
.complete-content__step-chevron .jt-icon path { fill: var(--color-gray-500); }

.complete-content__control { margin-top: 120rem; text-align: center; }



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

    /* VIEWER */
    .seminar-viewer__pagination-item:not(.swiper-pagination-bullet-active):hover { background: var(--color-white); }

    /* INQUIRY */
    .seminar-viewer__explain:hover { color: var(--color-gray-800); }
    .seminar-viewer__explain:hover .jt-icon path { fill: var(--color-gray-800); }
    .seminar-inquiry__radiobox label:hover { border-color: var(--color-gray-500); }

    /* COMPLETE */
    .complete-content__contact-control a:hover { background: var(--color-black); color: #FFE05B; }

}