@charset "utf-8";

/*
 * File       : jt-strap.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * LAZYLOAD
 * VIDEO
 * MARQUEE
 * SHARE
 * SUB VISUAL
 * COMINGSOON ALERT
 * ANCHOR LIST
 * HOVER
 */



/* **************************************** *
 * A11Y
 * **************************************** */
.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }

:focus:not(:focus-visible) :is( select, input[type=text], input[type=tel], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], textarea, input[type=submit], input[type=button], button, a ) { outline: none; }



/* **************************************** *
 * TYPOGRAPHY
 * **************************************** */
.jt-typo--01 { font-size: var(--font-size-ko-01); line-height: var(--font-lineheight-ko-01); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--02 { font-size: var(--font-size-ko-02); line-height: var(--font-lineheight-ko-02); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--03 { font-size: var(--font-size-ko-03); line-height: var(--font-lineheight-ko-03); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--04 { font-size: var(--font-size-ko-04); line-height: var(--font-lineheight-ko-04); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--05 { font-size: var(--font-size-ko-05); line-height: var(--font-lineheight-ko-05); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--06 { font-size: var(--font-size-ko-06); line-height: var(--font-lineheight-ko-06); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--07 { font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--08 { font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--09 { font-size: var(--font-size-ko-09); line-height: var(--font-lineheight-ko-09); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--10 { font-size: var(--font-size-ko-10); line-height: var(--font-lineheight-ko-10); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--11 { font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--12 { font-size: var(--font-size-ko-11); line-height: var(--font-lineheight-ko-11); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--13 { font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: 500; letter-spacing: var(--letter-spacing); }

.jt-typo--lifeplus { font-family: var(--font-primary); font-weight: 700; }
.jt-typo--hanwha { font-family: var(--font-thirdly); font-weight: 500; }
.jt-typo--carrot { font-family: var(--font-quaternary); letter-spacing: 0; }



/* **************************************** *
 * JT GUIDE
 * **************************************** */
/* ICON */
.jt-icon { display: inline-block; vertical-align: middle; }
.jt-icon svg { display: block; width: 100%; height: auto; }
.jt-icon svg path { fill: var(--color-black); transition: fill .3s; }



/* **************************************** *
 * BUTTON
 * **************************************** */
.jt-btn__basic { display: inline-block; vertical-align: middle; font-size: 0; color: var(--color-gray-500); transition: color .3s, opacity .3s; }
.jt-btn__basic span { vertical-align: middle; }
.jt-btn__basic .jt-icon { width: 24rem; height: 24rem; background: var(--color-gray-400); border-radius: 12rem; overflow: hidden; margin-left: 10rem; position: relative; top: 1rem; transition: background .3s; }
.jt-btn__basic .jt-icon svg { overflow: visible; }
.jt-btn__basic .jt-icon path { fill: var(--color-gray-600); }

.jt-btn__basic.jt-btn--type-02 { color: var(--color-white); }
.jt-btn__basic.jt-btn--type-02 .jt-icon { background: var(--color-white); }
.jt-btn__basic.jt-btn--type-02 .jt-icon path { fill: var(--color-gray-700); }

.jt-btn__basic.jt-btn--type-03 { color: var(--color-black); }
.jt-btn__basic.jt-btn--type-03 .jt-icon { background: var(--color-black); }
.jt-btn__basic.jt-btn--type-03 .jt-icon path { fill: var(--color-white); }

.jt-btn__underline { display: inline-block; vertical-align: middle; font-size: 0; position: relative; padding-bottom: 3rem; }
.jt-btn__underline span { vertical-align: middle; }
.jt-btn__underline .jt-icon { width: 12rem; height: 12rem; margin-left: 8rem; position: relative; }
.jt-btn__underline .jt-icon svg { overflow: visible; }
.jt-btn__underline .jt-icon path { fill: var(--color-black); }
.jt-btn__underline:before,
.jt-btn__underline:after { content: ''; position: absolute; bottom: 0; height: 3rem; background: var(--color-black); transition: width .4s; transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.jt-btn__underline:before { width: 100%; right: 0; transition-delay: .2s; }
.jt-btn__underline:after { width: 0; left: 0; transition-delay: 0s; }

.jt-btn__round { display: inline-block; vertical-align: middle; font-size: 0; color: var(--color-white); border-radius: 99rem; padding: 15rem 40rem; background: #000; border: 0; cursor: pointer; }
.jt-btn__round span { display: inline-block; vertical-align: middle; transition: opacity .3s; }
.jt-btn__round .jt-icon { width: 12rem; height: 12rem; margin-left: 8rem; position: relative; top: 1rem; transition: opacity .3s; }
.jt-btn__round .jt-icon svg { overflow: visible; }
.jt-btn__round .jt-icon path { fill: var(--color-white); }



/* **************************************** *
 * LAZYLOAD
 * **************************************** */
img[data-unveil] { opacity: 0; transition: opacity .3s; }
.jt-lazyload--loaded img[data-unveil], img[data-unveil].jt-lazyload--loaded { opacity: 1 }

.jt-lazyload { position: relative; overflow: hidden; }
.jt-lazyload img { display: block; width: 100%; position: absolute; left: 0; top: 0; }
.jt-lazyload.jt-lazyload--loaded img, .jt-lazyload img.jt-lazyload--loaded { height: auto; }

/* Color preview */
.jt-lazyload__color-preview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-gray-300); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s }



/* **************************************** *
 * VIDEO
 * **************************************** */
/* Native Background Video */
.jt-background-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; clip-path: inset(0); }
.jt-background-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; }
.jt-background-video__vod:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.jt-background-video__vod video { display: block; width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-background-video__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.jt-background-video__play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .2); opacity: 0; visibility: hidden; }
.jt-background-video__play:after { content: ''; display: block; width: 80rem; height: 80rem; background: url(../images/icon/icon-mejs-play.svg?v=1.0.0) no-repeat center center / cover; }

/* MediaElement Custom */
.jt-mejs-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; clip-path: inset(0); }
.jt-mejs-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); }
.jt-mejs-video__vod video { display: block; width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-mejs-video__vod video[poster] { width: 100%; height: 100%; object-fit: cover; }
.jt-mejs-video__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center / cover; cursor: pointer; }

.jt-mejs-video .mejs__container { font-family: var(--font-primary); background: none; width: 100%; height: 100%; }
.jt-mejs-video .mejs__time-float-current { margin: 3rem 2rem; }
.jt-mejs-video .mejs__overlay { display: none; }
.jt-mejs-video .mejs__controls { padding: 6rem 20rem; height: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-mejs-video .mejs__controls:not([style*='display: none']) { background: none; }
.jt-mejs-video .mejs__button,
.jt-mejs-video .mejs__time,
.jt-mejs-video .mejs__time-rail { height: 40rem; width: 30rem; }
.jt-mejs-video .mejs__time-rail { display: flex; align-items: center; padding-top: 0; margin: 0 5rem; }
.jt-mejs-video .mejs__time-total, 
.jt-mejs-video .mejs__time-buffering, 
.jt-mejs-video .mejs__time-loaded, 
.jt-mejs-video .mejs__time-current, 
.jt-mejs-video .mejs__time-float, 
.jt-mejs-video .mejs__time-hovered, 
.jt-mejs-video .mejs__time-float-current, 
.jt-mejs-video .mejs__time-float-corner, 
.jt-mejs-video .mejs__time-marker { height: 4rem; border-radius: 2rem; overflow: hidden; }
.jt-mejs-video .mejs__time-total { margin-top: 0; }
.jt-mejs-video .mejs__time-loaded,
.jt-mejs-video .mejs__time-hovered,
.jt-mejs-video .mejs__time-handle,
.jt-mejs-video .mejs__time-handle-content,
.jt-mejs-video .mejs__time-buffering { display: none; }
.jt-mejs-video .mejs__time-current,
.jt-mejs-video .mejs__time-buffering,
.jt-mejs-video .mejs__time-loaded,
.jt-mejs-video .mejs__time-hovered { transition: transform .3s linear; }
.jt-mejs-video .mejs__button { display: flex; align-items: center; justify-content: center; }
.jt-mejs-video .mejs__button > button { width: 20rem; height: 20rem; margin: 0; background: no-repeat center center / cover; }
.jt-mejs-video .mejs__button > button > svg { display: none; }
.jt-mejs-video .mejs__mute > button { background-image: url(../images/icon/icon-mejs-volume-on.svg); }
.jt-mejs-video .mejs__unmute > button { background-image: url(../images/icon/icon-mejs-volume-off.svg); }
.jt-mejs-video .mejs__fullscreen-button > button { background-image: url(../images/icon/icon-mejs-fullscreen-on.svg); }
.jt-mejs-video .mejs__fullscreen-button.mejs__unfullscreen > button { background-image: url(../images/icon/icon-mejs-fullscreen-off.svg); }
.jt-mejs-video .mejs__volume-button > .mejs__volume-slider { width: 20rem; height: 46rem; background: none; bottom: calc(100% + 8rem); }
.jt-mejs-video .mejs__volume-total { height: 100%; width: 6rem; border-radius: 3rem; background: rgba(255, 255, 255, 0.4); }
.jt-mejs-video .mejs__volume-current { border-radius: 3rem; }
.jt-mejs-video .mejs__volume-handle { width: 10rem; height: 10rem; border-radius: 50%; background: var(--color-white); }
.jt-mejs-video .mejs__overlay-error { display: none; }

.jt-mejs-video__backdrop { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-mejs-video__play { padding: 0; border-radius: 0; border: 0; background: none; width: 80rem; height: 80rem; background: no-repeat center center / cover; background-image: url(../images/icon/icon-mejs-play.svg?v=1.0.0); cursor: pointer; }
.jt-mejs-video--played .jt-mejs-video__play { background-image: url(../images/icon/icon-mejs-pause.svg?v=1.0.0); }

.jt-mejs-video--low .mejs__controls,
.jt-mejs-video--low .jt-mejs-video__backdrop { opacity: 1; visibility: visible; }

.jt-mejs-video--paused .mejs__controls,
.jt-mejs-video--paused .jt-mejs-video__backdrop { opacity: 1; visibility: visible; }

.jt-mejs-video--hover .mejs__controls,
.jt-mejs-video--hover .jt-mejs-video__backdrop { opacity: 1; visibility: visible; }



/* **************************************** *
 * MARQUEE
 * **************************************** */
.jt-marquee { font-size: 0; overflow: hidden; }
.jt-marquee__inner { will-change: auto; }

.jt-marquee--horizontal { white-space: nowrap; }
.jt-marquee--horizontal .jt-marquee__inner { display: inline-block; }
.jt-marquee--horizontal .jt-marquee__items { display: inline-block; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { margin-top: 40rem; display: flex; align-items: center; justify-content: center; gap: 20rem; }
.jt-share .jt-share__item { display: flex; align-items: center; justify-content: center; position: relative; width: 48rem; height: 48rem; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-gray-300) }
.jt-share .jt-share__item:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #000; opacity: 0; transition: transform .3s, opacity .3s; }
.jt-share .jt-share__item .jt-icon { position: relative; width: 24rem; height: 24rem; }
.jt-share .jt-share__item .jt-icon path { fill: #000; }

/* Clipboard */
.jt-share__tooltip { padding: 15rem 40rem; position: fixed; left: 50rem; left: 50%; bottom: 40rem; border-radius: 6rem; background: #000; z-index: 501; white-space: nowrap; transform: translateX(-50%); }
.jt-share__tooltip p { color: var(--color-white); }



/* **************************************** *
 * SUB VISUAL
 * **************************************** */
.jt-sub-visual { position: relative; overflow: hidden; z-index: 1; }
.jt-sub-visual__scroll { position: relative; height: 100vh; border-radius: 30rem; background: var(--color-white); overflow: hidden; }
html.kakao .jt-sub-visual__scroll { height: var(--full-height); }
.jt-sub-visual__scroll-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.jt-sub-visual__scroll-item + .jt-sub-visual__scroll-item { opacity: 0; visibility: hidden; }
.jt-sub-visual__scroll-item:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: .2; }
.jt-sub-visual__scroll-content { position: absolute; color: var(--color-white); left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; padding: 40rem; }
.jt-sub-visual__scroll-category { display: block; margin-bottom: 12rem; opacity: .7; }
.jt-sub-visual__scroll-bg { height: 100%; background: no-repeat center center / cover; }

.jt-sub-visual__scroll-bg--tablet { display: none; }
.jt-sub-visual__scroll-bg--mobile { display: none; }



/* **************************************** *
 * COMINGSOON ALERT
 * **************************************** */
.jt-comingsoon::backdrop { background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-comingsoon--open[open]::backdrop { opacity: 1; visibility: visible; }
.jt-comingsoon { max-width: calc(100% - 40rem); border: 0; border-radius: 20rem; padding: 0; box-shadow: 0 0 60rem rgba(0, 0, 0, .13); background: var(--color-gray-100); opacity: 0; visibility: hidden; }
.jt-comingsoon__container { padding: 75rem 70rem; }
.jt-comingsoon__logo { width: 95rem; margin: 0 auto 8rem; }
.jt-comingsoon__title { display: block; text-align: center; margin-bottom: 16rem; }
.jt-comingsoon__desc { text-align: center; color: var(--color-gray-700); }
.jt-comingsoon__close { position: absolute; width: 24rem; height: 24rem; padding: 20rem; right: 0; top: 0; border: 0; border-radius: 0; background: none; cursor: pointer; box-sizing: content-box; }
.jt-comingsoon__close .jt-icon { width: 100%; height: 100%; transition: transform .3s; }



/* **************************************** *
 * ANCHOR LIST
 * **************************************** */
.sub-archive { padding-top: 140rem; }
.sub-archive__anchor { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% - 875rem); padding-right: 80rem; padding-top: 100rem; }
.sub-archive__anchor-sticky { position: sticky; top: 100rem; margin-bottom: 200rem; }
.sub-archive__anchor-sticky--lock { position: static; }
.sub-archive__anchor-list { margin-top: 40rem; }
.sub-archive__anchor-list a { position: relative; display: inline-block; padding: 10rem 10rem 10rem 0; color: var(--color-gray-600); transition: color .3s; }
.sub-archive__anchor-list a:after { content: ''; position: absolute; left: 0; bottom: 10rem; height: 2rem; background: var(--color-black); width: 0; transition: width .3s; }
.sub-archive__anchor-list a.jt-anchor--current { color: var(--color-black); }
.sub-archive__anchor-list a.jt-anchor--current:after { width: calc(100% - 10rem); }
.sub-archive__list { padding-left: calc(100% - 875rem); padding-top: 100rem; }
.sub-archive__list + .sub-archive__list { margin-top: 60rem; }
.sub-archive__item + .sub-archive__item { margin-top: 160rem; }
.sub-archive__item-thumb { position: relative; border-radius: 20rem; overflow: hidden; }
.sub-archive__item-thumb .jt-lazyload { padding-top: 56%; transition: transform 1s; }
.sub-archive__item-category { position: absolute; left: 20rem; top: 20rem; background: rgba(0, 0, 0, .9); color: var(--color-white); padding: 4rem 16rem; border-radius: 99rem; }
html.ios .sub-archive__item-category { padding: 3rem 16rem 4rem; }
html.mac .sub-archive__item-category { padding: 4rem 16rem 3rem; }
.sub-archive__item-data { margin-top: 8rem; display: flex; justify-content: space-between; gap: 40rem; }
.sub-archive__item-title { color: var(--color-gray-800); flex: 1; }
.sub-archive__item-info { color: var(--color-gray-600); flex: 1; text-align: right; }



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

    /* BUTTON */
    .jt-btn__basic:hover { color: var(--color-black); }
    .jt-btn__basic:hover .jt-icon { background: var(--color-black); }
    .jt-btn__basic:hover .jt-icon path { fill: var(--color-white); }

    .jt-btn__basic.jt-btn--type-02:hover { color: var(--color-white); opacity: .8; }
    .jt-btn__basic.jt-btn--type-02:hover .jt-icon { background: var(--color-white); }
    .jt-btn__basic.jt-btn--type-02:hover .jt-icon path { fill: var(--color-gray-700); }
    
    .jt-btn__basic.jt-btn--type-03:hover { color: var(--color-black); }
    .jt-btn__basic.jt-btn--type-03:hover .jt-icon { background: var(--color-black); }
    .jt-btn__basic.jt-btn--type-03:hover .jt-icon path { fill: var(--color-white); }

    .jt-btn__underline:hover:before { width: 0; transition-delay: 0s; }
    .jt-btn__underline:hover:after { width: 100%; transition-delay: .2s; }

    .jt-btn__round:hover span { opacity: .8; }
    .jt-btn__round:hover .jt-icon { opacity: .8; }

    /* SHARE */
    .jt-share__item:hover:before { transform: scale(1.2); opacity: 1; }
    .jt-share__item:hover .jt-icon path { fill: var(--color-white); }

    /* COMINGSOON ALERT */
    .jt-comingsoon__close:hover .jt-icon { transform: rotate(90deg); }

    /* ANCHOR */
    .sub-archive__anchor-list a:hover { color: var(--color-black); }
    .sub-archive__item > a:hover .sub-archive__item-thumb .jt-lazyload { transform: scale(1.1); }

}