@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : reset.css
 *
 * SUMMARY:
 * 01) GLOBAL 
 * 02) HEADER 
 * 03) FLOAT UI 
 * 04) FOOTER 
 * 05) CONTAINER
 * 06) PAGE
 * 07) SINGLE
 * 08) 404
 * 09) KEYFRAMES
 */



/* **************************************** *
* GLOBAL
* **************************************** */
html { font-size: 6.25%; }
html.safari.desktop { font-size: 1px; }

body { overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-base); background: #fff; }
body.scroll-fixed { width: 100%; overflow: hidden; }
a { color:var(--color-base); text-decoration: none; }
[lang="en"] { font-family: var(--font-secondary); }

br.mdbr { display: none; }
br.smbr { display: none; }

/* WRAP */
.wrap { max-width: 1500rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 988rem; margin: 0 auto; position: relative; }



/* **************************************** *
 * INTRO
 * **************************************** */
/* body.home:not(.jt-intro--loaded) { height: calc(var(--vh, 1vh) * 100); overflow: hidden; } */
.jt-intro { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background:#fff; display: flex; justify-content: center; text-align: center; align-items: center; }
.jt-intro__wrap { margin-top: -45rem; }
.jt-intro__title-group { font-size: 0; margin-right: 7rem; }
.jt-intro__title-group:last-child { margin-right: 0; }
.jt-intro__title-group > span { display: inline-block; vertical-align: top; opacity: 0; margin-right: 2rem; }
.jt-intro__title-group > span:last-child { margin-right: 0; }
.jt-intro__logo { text-align: center; margin-top: 14rem; background: url(/@resource/images/layout/logo-intro-gray.svg) no-repeat center center; opacity: 0; }
.jt-intro__logo-track { position:relative; display: inline-block; vertical-align: top; }
.jt-intro__logo-track > img { opacity: 0; display: block; }
.jt-intro__logo-color { position: absolute; top: 0; left:0; right: 0; bottom: 0; width:0; overflow: hidden; }
.jt-intro__logo-color img { display: block; margin: auto; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 80rem; position: fixed; top: 0; left: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #fff; transition: background .3s; z-index: 10000; }
.header__inner { height: 100%; padding:0 201rem 0 202rem; position: relative; }
/* body.home #header { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.2);  } */

/* LOGO */
#logo { position: absolute; width:137rem; height: 36rem; left: 202rem; top: 22rem; z-index: 2; }
#logo a { display: block; width: 100%; height: 100%; }
#logo a figure { padding-top: 26.2%; }
#logo a figure .jt-lazyload__color-preview { background: transparent; }
/* #logo a svg, #logo a img { display: block; width: 100%; height: 100%; }
#logo a svg path { -webkit-transition: fill .3s; transition: fill .3s; }
body:not(.home) #logo a svg path { fill: var(--color-base); } */

/* MENU */
.menu-container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 1; }
.menu-container > ul { display: inline-block; }
.menu-container > ul a { display: block; }

.menu-container > ul > li > ul { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
.menu-container > ul > li:hover > ul,
.menu-container > ul > li.focusin > ul { opacity: 1; visibility: visible; }

/* 1DEPTH */
.menu-container > ul > li { display: inline-block; vertical-align: middle; position: relative; }
.menu-container > ul > li > a { position: relative; padding: 25rem 24rem 24rem; color:var(--color-base); -webkit-transition: color .3s; transition: color .3s; }
.menu-container > ul > li > a > span { position: relative; display: inline-block; }
.menu-container > ul > li > a > span:after { content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: 3rem;background: var(--color-base);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
.menu-container > ul > li.menu-current > a { color: var(--color-primary) !important; }
.menu-container > ul > li.menu-current > a > span:after { background: var(--color-primary); }
html.desktop .menu-container > ul > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

/* 2DEPTH */
.menu-container > ul > li > ul { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; background: #fff; padding: 12rem 0; border-radius: 0 0 4rem 4rem; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 0 200rem rgba(0, 0, 0, 0.06); }
.menu-container > ul > li > ul > li > a { color: var(--color-secondary); padding: 6rem 0; }
.menu-container > ul > li > ul > li > a > span { position: relative; }
.menu-container > ul > li > ul > li.menu-current > a > span { color:var(--color-base); font-weight: 700; }
.menu-container > ul > li > ul > li > a > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -1rem;background: var(--color-secondary);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
html.desktop .menu-container > ul > li > ul > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

/* CONSULT */
.header-btns { position: absolute; right: 201rem; top: 21rem; z-index: 2; font-size: 0; }
.header-btns > a { white-space: nowrap; }
.header-btns__consult { width: 157rem; margin-right: 8rem; }
html.desktop .header-btns__consult:hover .jt-guide--icon circle.jt-guide--icon-circle-02 { opacity: 0; animation: flicker-first 2s steps(1) infinite; }
html.desktop .header-btns__consult:hover .jt-guide--icon circle.jt-guide--icon-circle-03 { opacity: 0; animation: flicker-second 2s steps(1) infinite; }

/* LOGIN */
.header-btns .header-btns__login { box-shadow: inset 0 0 0 2px var(--color-base); color: var(--color-base); }

/* MOBILE */
#small-menu-btn, #small-menu-container { display: none; }

/* MINIMIZE & HOVER */
body.home .minimize#header ,
html.desktop body.home #header:hover { background: #fff; border-bottom-color: var(--color-base-line); }
.minimize#header .menu-container > ul > li > a,
html.desktop #header:hover .menu-container > ul > li > a { color:var(--color-base); }
.minimize#header .header-btns__consult,
html.desktop #header:hover .header-btns__consult { background-color: var(--color-base); color:#fff; }
.minimize#header .header-btns__consult .jt-guide--icon path,
.minimize#header .header-btns__consult .jt-guide--icon circle,
html.desktop #header:hover .header-btns__consult .jt-guide--icon path,
html.desktop #header:hover .header-btns__consult .jt-guide--icon circle { fill: #fff; }
html.desktop .minimize#header .header-btns__consult:hover,
html.desktop #header .header-btns__consult:hover { background-color: var(--color-primary); }
body.home #header:not(.minimize) .header-btns__inquiry { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
html.desktop #header:hover .header-btns__inquiry { box-shadow: inset 0 0 0 2px var(--color-secondary); color: var(--color-secondary); }
html.desktop #header .header-btns__inquiry:hover { box-shadow: inset 0 0 0 2px var(--color-primary); color: var(--color-primary); }



/* **************************************** *
 * FLOAT UI
 * **************************************** */
.float-ui { position: fixed; right: 50rem; bottom: 50rem; z-index: 9000; transition: opacity .15s, visibility .15s, bottom .3s; }
.float-ui a { display: block; position: relative; width: 62rem; height: 62rem; border-radius: 50%; overflow: hidden; }
.float-ui__item { margin-bottom: 10rem; }
.float-ui__item:last-child { margin-bottom: 0; }
.float-ui__event { position: relative; }
.float-ui__event > a { overflow: visible; border-radius: 0; }
.float-ui__event > a > span { position: absolute; top:-4rem; left:0; font-size: 11rem; line-height: 10rem; letter-spacing: var(--letter-spacing-03); color:#fff; font-weight: 700; background:var(--color-base); padding: 3rem 5rem; border-radius: 10rem; }
.float-ui__event-thumb { border-radius: 50%; overflow: hidden; }
.float-ui__event-thumb figure { padding-top: 100%; }
.float-ui__consult a { background:var(--color-primary); color:#fff; font-size: 12rem; line-height: 12rem; letter-spacing: var(--letter-spacing-02); font-weight: 700; text-align: center; padding-top: 6rem; }
.float-ui__consult .jt-guide--icon { width: 28rem; }
.float-ui__consult span { display: block; }
.float-ui__consult svg path,
.float-ui__consult svg circle { fill: #fff; -webkit-transition: fill .3s; transition: fill .3s; }
.float-ui__consult svg circle.jt-guide--icon-circle-02 { opacity: 0; animation: flicker-first 2s steps(1) infinite; }
.float-ui__consult svg circle.jt-guide--icon-circle-03 { opacity: 0; animation: flicker-second 2s steps(1) infinite; }
.float-ui__top a { background:#fff; border:3rem solid var(--color-base-line); }
.float-ui__top .jt-guide--icon { position: absolute; top:50%; left:50%; margin-top: -6rem; margin-left: -9rem; width: 18rem; }
html.naver .float-ui { bottom: 50rem; }


/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { position: relative; padding: 90rem 0; background: var(--color-base); }

/* LAYOUT */
.footer__inner { max-width: 1500rem; margin: 0 auto; position: relative; }
.footer__top { position: relative; }
.footer__bottom { position: relative;  margin-top: 58rem; padding-top: 57rem; border-top: 1rem solid rgba(255, 255, 255, 0.1); }

.footer__sitemap-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36rem; }
.footer__sitemap-list > li > button { position: relative; display: block; width: 100%; text-align: left; color:#fff;background: transparent; border: 0; padding:0; margin: 0; padding-bottom: 13rem; transition: color .3s; }
.footer__sitemap-sublist > ul > li:last-child { margin-bottom: 0; }
.footer__sitemap-sublist > ul > li > a { display: inline-block; color:rgba(255,255,255,.5); padding:3rem 0; transition: color .3s; }
html.desktop .footer__sitemap-list > li > a:hover { color:var(--color-primary); }
html.desktop .footer__sitemap-sublist > ul> li > a:hover { color:#fff; }
.footer__sitemap-dropdown { display: none; }

.footer__menu-container { font-size: 0; margin-right: 200rem; }
.footer__menu-list { font-size: 0; display: inline-block; vertical-align: middle; }
.footer__menu-list > li { display: inline-block; margin-right: 24rem; }
.footer__menu-list > li > a { color:#fff; }
.footer__menu-list > li.privacy > a { color:var(--color-primary); font-weight: 700; }
.footer__menu-list > li > a > span { position: relative; }
html.desktop .footer__menu-list > li.privacy > a > span:after { background:var(--color-primary); }
html.desktop .footer__menu-list > li > a > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -3rem;background: #fff;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
html.desktop .footer__menu-list > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

.footer__member { position: relative; font-size: 0; display: inline-block; vertical-align: middle; }
.footer__member:before { content:""; display: block; position: absolute; left:0; top: 50%; margin-top:-6rem; width: 1rem; height: 12rem; background: rgba(255,255,255,.15); }
.footer__member > li { display: inline-block; padding-left: 24rem; }
.footer__member > li > a { color: #fff; }
.footer__member-button { position: relative; background: transparent; border: 0; color:#fff; padding:0; font-size: 0; cursor: pointer; }
.footer__member-button .jt-guide--icon { width: 10rem; margin-left:7rem; vertical-align: 1rem; }
.footer__member-button svg { -webkit-transition: transform 0.3s; transition: transform 0.3s; }
.footer__member-button svg path { stroke: rgba(255,255,255,.5); transition: stroke .3s; }
.footer__member-bundle { display: none; position: absolute; background:var(--color-dark-bg); border-radius: 4rem; top:calc(100% + 7rem); left:0; z-index: 2; }
.footer__member-list { padding: 20rem 28rem; }
.footer__member-list > li { margin-bottom: 8rem; }
.footer__member-list > li:last-child { margin-bottom: 0; }
.footer__member-list > li > a { display: block; color:#fff; white-space: nowrap; }
.footer__member-list > li > a > span { position: relative; }
.footer__member.open .footer__member-button svg { -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
.footer__member.open .footer__member-button svg path { stroke: #fff; }
html.desktop .footer__member-button:hover svg path { stroke: #fff; }
html.desktop .footer__member-list > li > a > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -1rem;background: #fff;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
html.desktop .footer__member-list > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

.footer__info-container { margin-top: 31rem; display: flex; justify-content: space-between; }
.footer__info-container .copyright { color:rgba(255,255,255,.2); font-weight: 500; }
.footer__info { margin-bottom: 12rem; font-size: 0; }
.footer__info small { position: relative; display: inline-block; color:rgba(255,255,255,.5); margin-right: 7rem; margin-bottom: 4rem; }
.footer__info small:after { content:""; display: inline-block; vertical-align: middle; margin-left: 7rem; margin-bottom: 1px; width: 3px; height: 3px; border-radius: 3px; background-color: rgba(255, 255, 255, .3);}
/* .footer__info small.sales:after, */
.footer__info small.last:after { display: none; }
.footer__info small > a { color:inherit; position: relative; }
.footer__info-logo-award { width: 62rem; }
.footer__info-logo-award svg { width: 100%; height: auto; }
html.desktop .footer__info small > a:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -1rem;background: rgba(255,255,255,.5);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
html.desktop .footer__info small > a:hover:after {-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

.footer__family { position: absolute; right: 0; top: 48rem; }
.footer__family .selectric { background:rgba(255,255,255,.06); border: 0; font-family: var(--font-secondary); height: 46rem; transition: background .3s; }
.footer__family .selectric:after { display: none; }
.footer__family .selectric .label { color:#fff; font-size: var(--font-size-en-07); height:100%; line-height: 46rem; margin:0 46rem 0 16rem; }
.footer__family .selectric .button { height:100%; width:46rem; }
.footer__family .selectric .button:after { background-image: url(/@resource/images/icon/jt-icon/jt-chevron-down-tiny-2px-square-white.svg); background-size: 10rem 7rem; opacity: 0.5; height: 100%; }
.footer__family .selectric-items { background-color: var(--color-dark-bg); }
.footer__family .selectric-items li { padding: 8rem 10rem; color:rgba(255, 255, 255, .5); font-family: var(--font-secondary); font-size: var(--font-size-en-07); -webkit-transition: color .3s; transition: color .3s; }
.footer__family .selectric-items li:hover { background:none; color:rgba(255, 255, 255, .5); }
html.desktop .footer__family .selectric-items li:hover,
html.desktop .footer__family .selectric-items li.highlighted { background: none; color:#fff; }
.footer__family .selectric-open .selectric { background:var(--color-dark-bg); }
.footer__family .selectric-hover .selectric { background: var(--color-dark-bg); }
.footer__family .selectric-hover .selectric:after { opacity: 1; }
.footer__family .selectric-focus .selectric { background:var(--color-dark-bg); }
.footer__family .selectric-focus .selectric:after { opacity: 1; }
.footer__family .selectric-open .selectric { background:var(--color-dark-bg); }
.footer__family .selectric-open .selectric:after { opacity: 1; }
.footer__family .selectric-open .selectric-items { opacity: 1; }
html.mobile .footer__family .jt-selectric__wrap { height: 46rem; background:rgba(255,255,255,.06); border-radius: 4rem; }
html.mobile .footer__family .jt-selectric__wrap:before { width: 46rem;  }
html.mobile .footer__family .jt-selectric__wrap > select { border:0; height:46rem; padding-right: 46rem; color:#fff; }
html.mobile .footer__family .jt-selectric__wrap > select option { color:var(--color-secondary) }
html.mobile:not(.ios) .footer__family .jt-selectric__wrap:before { background-image: url(/@resource/images/icon/jt-icon/jt-chevron-down-tiny-2px-square-white.svg);  }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { position: relative; margin-top: 80rem; background: var(--color-base-bg); }



/* **************************************** *
 * PAGE
 * **************************************** */
.article { padding: 120rem 0 160rem; }
.article__header { position: relative; margin-bottom: 80rem; }
.article__title sup { display: inline-block; color:var(--color-primary); vertical-align: top; font-weight: 700; margin-left: 8rem; }
.article__title sup:after { content:attr(data-count); }
.article__desc { margin-top: 16rem; color: var(--color-secondary); }
.article__desc span { color: var(--color-primary); }
.article__header a { margin-top: 28rem; }
.article-section { padding-top: 120rem; padding-bottom: 120rem; }
.article-section__head { position: relative; padding-right: 150rem; margin-bottom: 48rem; }
.article-section__title { transition: color .3s; }
.article-section:first-child { padding-top: 0; }
.article-section:last-child { padding-bottom: 0; }



/* **************************************** *
 * SINGLE
 * **************************************** */
.single { padding-top: 120rem; background: #fff; }
.single__header { position: relative; margin: 0 auto 60rem; }
.single__header .jt-category__list { margin-bottom: 40rem; }
.single__header .jt-category__list > li { margin-right: 4rem; }
.single__header .jt-category__list > li:after { display: none; }
.single__header .jt-category__item-type { margin-top: 0; } 
.single__header .jt-share { position: absolute; top: 0; right:0; }
.single__subtitle { display: block; color: var(--color-secondary); margin-bottom: 8rem; }
.single__title { margin-bottom: 26rem; margin-right: 100rem; word-break: break-all; }
.single__date { color:#999; }
.single__control { text-align: center; margin-top: 60rem; }
.single-content { padding-bottom: 120rem; }
.single-content__title { margin-bottom: 24rem; }
.single-pagination { margin-top: 160rem; border-top: 1rem solid var(--color-base-line); }
.single__pagination-item { display: block; border-bottom: 1rem solid var(--color-base-line); position: relative; }
.single__pagination-type { display: block; position: absolute; top: 29rem; left: 32rem; }
.single-pagination__link { width: 100%; padding: 28rem 23rem 27rem 128rem; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.single-pagination__link > a { color:var(--color-secondary); transition: color .3s; }
.single-pagination__link span { color: #aaa; }
html.desktop .single-pagination__link > a:hover { color: var(--color-base); }

.single__header .jt-share__tooltip { position: absolute; top: calc(100% + 15rem); right:-30rem; left:auto; bottom:auto; transform: none; }



/* **************************************** *
 * PASSWORD POPUP
 * **************************************** */
 .jt-popup__overlay#jt-popup--password .jt-popup__title { text-align: left; padding: 0 15rem 30rem 0; }
 .jt-popup__overlay#jt-popup--password .jt-popup__container { width:calc(100% - 40rem); max-width: 460rem; border-radius: 0; padding: 40rem 40rem 100rem; }
 .jt-popup__overlay#jt-popup--password .jt-popup__content-container { color:var(--color-secondary) }
 .jt-popup__overlay#jt-popup--password .jt-popup__content-container > p { margin-bottom: 12rem; }
 .jt-popup__overlay#jt-popup--password .jt-popup__content-container > p:last-child { margin-bottom: 0; }
 .jt-popup__overlay#jt-popup--password .jt-popup__close { right: 20rem; top: 20rem; }
 .jt-popup__overlay#jt-popup--password .jt-popup__close .jt-guide--icon { width: 24rem; vertical-align: top; }



/* **************************************** *
 * 404
 * **************************************** */
.jt-error { text-align: center; position: relative; background: #191919 url(/@resource/images/layout/404-bg.gif)0 0 repeat; background-blend-mode: overlay; }
.jt-error::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(/@resource/images/layout/404-frame.png)center -20rem no-repeat; background-size: cover; filter: brightness(0.5); }
.jt-error .wrap { display: flex; align-items: center; justify-content: center; min-height: calc((var(--vh, 1vh) * 100) - 82rem); }
.jt-error__content { padding: 130rem 0 50rem; z-index: 1; width: 100%; }
.jt-error__content h1 { margin-bottom: 16rem; color: #fff; }
.jt-error__content p { margin-bottom: 60rem; color: #fff; }
.jt-error__content .jt-btn__basic { width: 210rem; color: #fff; border-color: #fff; }
html.ios .jt-error .wrap { min-height: calc(100svh - 82rem); }

.jt-error--icon-wrap { margin-bottom: 50rem; position: relative; display: block; width: 100%; height: 97rem; }
.jt-error--icon { width: 100%; position: absolute; left: 50%; transform: translateX(-50%); background: #191919 url(/@resource/images/layout/404-bg.gif) 0 0 repeat; background-blend-mode: overlay; z-index: 1; }
.jt-error--icon:first-child,
.jt-error--icon:last-child { left: calc(50% - 2rem); position: absolute; top: 0; color: #fff; overflow: hidden; clip: rect(0, 900rem, 0, 0); z-index: 2; }
.jt-error--icon:first-child { stroke: var(--color-primary); stroke-width: 1rem; animation: noise-before 2s infinite linear alternate-reverse; }
.jt-error--icon:last-child { stroke: var(--color-secondary); stroke-width: 0.5rem; animation: noise-after 3s infinite linear alternate-reverse; }
.jt-error--icon svg { height: 100%; }
.jt-error__content .glitch { display: block;position: relative; }
.jt-error__content .glitch:before, 
.jt-error__content .glitch:after { content: attr(data-text); width: 100%; position: absolute; left: -2rem; top: 0; color: #fff; overflow: hidden; clip: rect(0, 900rem, 0, 0); }
.jt-error__content .glitch:after { text-shadow: -2rem 0 var(--color-primary); animation: noise-before 2s infinite linear alternate-reverse; }
.jt-error__content .glitch:before { text-shadow: 2rem 0 var(--color-secondary); animation: noise-after 3s infinite linear alternate-reverse; }
.jt-error__content .glitch, 
.jt-error__content .glitch:before, 
.jt-error__content .glitch:after { background: #191919 url(/@resource/images/layout/404-bg.gif) 0 0 repeat; background-blend-mode: overlay; }

html.ios .jt-error, html.safari .jt-error,
html.ios .jt-error--icon, html.safari .jt-error--icon,
html.ios .jt-error__content .glitch, html.safari .jt-error__content .glitch,
html.ios .jt-error__content .glitch:before, html.safari .jt-error__content .glitch:before,
html.ios .jt-error__content .glitch:after, html.safari .jt-error__content .glitch:after { background: url(/@resource/images/layout/404-bg.jpg)0 0 repeat; }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@keyframes flicker-first {
    0% { opacity: 0; }
    33% { opacity: 1; }
}

@keyframes flicker-second {
    0% { opacity: 0; }
    66% { opacity: 1; }
}

@-webkit-keyframes noise-before {
    0% { clip: rect(42rem, 9999rem, 60rem, 0); }
    5% { clip: rect(94rem, 9999rem, 72rem, 0); }
    10% { clip: rect(63rem, 9999rem, 86rem, 0); }
    15% { clip: rect(70rem, 9999rem, 92rem, 0); }
    20% { clip: rect(55rem, 9999rem, 58rem, 0); }
    25% { clip: rect(92rem, 9999rem, 26rem, 0); }
    30% { clip: rect(33rem, 9999rem, 82rem, 0); }
    35% { clip: rect(67rem, 9999rem, 81rem, 0); }
    40% { clip: rect(85rem, 9999rem, 39rem, 0); }
    45% { clip: rect(18rem, 9999rem, 18rem, 0); }
    50% { clip: rect(51rem, 9999rem, 82rem, 0); }
    55% { clip: rect(19rem, 9999rem, 92rem, 0); }
    60% { clip: rect(19rem, 9999rem, 30rem, 0); }
    65% { clip: rect(16rem, 9999rem, 99rem, 0); }
    70% { clip: rect(94rem, 9999rem, 66rem, 0); }
    75% { clip: rect(19rem, 9999rem, 5rem, 0); }
    80% { clip: rect(8rem, 9999rem, 58rem, 0); }
    85% { clip: rect(57rem, 9999rem, 29rem, 0); }
    90% { clip: rect(83rem, 9999rem, 70rem, 0); }
    95% { clip: rect(86rem, 9999rem, 57rem, 0); }
    100% { clip: rect(67rem, 9999rem, 82rem, 0); }
}

@keyframes noise-before {
    0% { clip: rect(42rem, 9999rem, 60rem, 0); }
    5% { clip: rect(94rem, 9999rem, 72rem, 0); }
    10% { clip: rect(63rem, 9999rem, 86rem, 0); }
    15% { clip: rect(70rem, 9999rem, 92rem, 0); }
    20% { clip: rect(55rem, 9999rem, 58rem, 0); }
    25% { clip: rect(92rem, 9999rem, 26rem, 0); }
    30% { clip: rect(33rem, 9999rem, 82rem, 0); }
    35% { clip: rect(67rem, 9999rem, 81rem, 0); }
    40% { clip: rect(85rem, 9999rem, 39rem, 0); }
    45% { clip: rect(18rem, 9999rem, 18rem, 0); }
    50% { clip: rect(51rem, 9999rem, 82rem, 0); }
    55% { clip: rect(19rem, 9999rem, 92rem, 0); }
    60% { clip: rect(19rem, 9999rem, 30rem, 0); }
    65% { clip: rect(16rem, 9999rem, 99rem, 0); }
    70% { clip: rect(94rem, 9999rem, 66rem, 0); }
    75% { clip: rect(19rem, 9999rem, 5rem, 0); }
    80% { clip: rect(8rem, 9999rem, 58rem, 0); }
    85% { clip: rect(57rem, 9999rem, 29rem, 0); }
    90% { clip: rect(83rem, 9999rem, 70rem, 0); }
    95% { clip: rect(86rem, 9999rem, 57rem, 0); }
    100% { clip: rect(67rem, 9999rem, 82rem, 0); }
}

@-webkit-keyframes noise-after {
    0% { clip: rect(18rem, 9999rem, 46rem, 0); }
    5% { clip: rect(31rem, 9999rem, 98rem, 0); }
    10% { clip: rect(80rem, 9999rem, 10rem, 0); }
    15% { clip: rect(77rem, 9999rem, 22rem, 0); }
    20% { clip: rect(48rem, 9999rem, 47rem, 0); }
    25% { clip: rect(66rem, 9999rem, 12rem, 0); }
    30% { clip: rect(63rem, 9999rem, 77rem, 0); }
    35% { clip: rect(17rem, 9999rem, 64rem, 0); }
    40% { clip: rect(9rem, 9999rem, 71rem, 0); }
    45% { clip: rect(5rem, 9999rem, 5rem, 0); }
    50% { clip: rect(25rem, 9999rem, 71rem, 0); }
    55% { clip: rect(61rem, 9999rem, 23rem, 0); }
    60% { clip: rect(94rem, 9999rem, 94rem, 0); }
    65% { clip: rect(5rem, 9999rem, 14rem, 0); }
    70% { clip: rect(22rem, 9999rem, 33rem, 0); }
    75% { clip: rect(4rem, 9999rem, 49rem, 0); }
    80% { clip: rect(98rem, 9999rem, 92rem, 0); }
    85% { clip: rect(71rem, 9999rem, 28rem, 0); }
    90% { clip: rect(36rem, 9999rem, 5rem, 0); }
    95% { clip: rect(95rem, 9999rem, 35rem, 0); }
    100% { clip: rect(50rem, 9999rem, 27rem, 0); }
}

@keyframes noise-after {
    0% { clip: rect(18rem, 9999rem, 46rem, 0); }
    5% { clip: rect(31rem, 9999rem, 98rem, 0); }
    10% { clip: rect(80rem, 9999rem, 10rem, 0); }
    15% { clip: rect(77rem, 9999rem, 22rem, 0); }
    20% { clip: rect(48rem, 9999rem, 47rem, 0); }
    25% { clip: rect(66rem, 9999rem, 12rem, 0); }
    30% { clip: rect(63rem, 9999rem, 77rem, 0); }
    35% { clip: rect(17rem, 9999rem, 64rem, 0); }
    40% { clip: rect(9rem, 9999rem, 71rem, 0); }
    45% { clip: rect(5rem, 9999rem, 5rem, 0); }
    50% { clip: rect(25rem, 9999rem, 71rem, 0); }
    55% { clip: rect(61rem, 9999rem, 23rem, 0); }
    60% { clip: rect(94rem, 9999rem, 94rem, 0); }
    65% { clip: rect(5rem, 9999rem, 14rem, 0); }
    70% { clip: rect(22rem, 9999rem, 33rem, 0); }
    75% { clip: rect(4rem, 9999rem, 49rem, 0); }
    80% { clip: rect(98rem, 9999rem, 92rem, 0); }
    85% { clip: rect(71rem, 9999rem, 28rem, 0); }
    90% { clip: rect(36rem, 9999rem, 5rem, 0); }
    95% { clip: rect(95rem, 9999rem, 35rem, 0); }
    100% { clip: rect(50rem, 9999rem, 27rem, 0); }
}