@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * SCROLL TOP
 * SCROLL DOWN
 * CONTAINER
 * PAGE
 * 404
 * JT SEPARATE LINE
 * POPUP
 * CURSOR
 * HOVER
 */



/* **************************************** *
 * 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-black); background: var(--color-bg); }
a { color: var(--color-primary); text-decoration: none; }

html, body { overscroll-behavior: none; touch-action: manipulation; }

/* WRAP */
.wrap-wide { max-width: inherit; margin: 0 52rem; position: relative; }
.wrap { max-width: 1200rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 760rem; margin: 0 auto; position: relative; }

/* BR */
br.mdbr { display: none !important; }
br.smbr { display: none !important; }

/* SCROLL */
html.mobile body.scroll-fixed { width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; }
html.ios body.scroll-fixed { position: fixed; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 100rem; position: absolute; top: 0; left: 0; background: transparent; border-bottom: 1px solid transparent; transition: height .3s, background .3s, border .4s; z-index: 500; }
.header__inner { height: 100%; margin: 0 52rem; position: relative; }

#header.sticky { position: fixed; }

.header--invert:not(.minimize) #logo a svg path { fill: var(--color-white); }
.header--invert:not(.minimize) .menu-controller__text > i { color: var(--color-white); }
.header--invert:not(.minimize) .menu-controller__icon-line { background: var(--color-white); }
.header--invert:not(.minimize) .lang-menu-btn .jt-icon svg path { fill: var(--color-white); }
.header--invert:not(.minimize) .lang-container:hover .lang-menu-btn { background: rgba(255, 255, 255, .5); }

.minimize#header .jt-btn__basic.jt-btn--type-02:before,
.minimize#header .jt-btn__basic.jt-btn--type-02:after { border-color: var(--color-black); }
.minimize#header .jt-btn__basic.jt-btn--type-02 > span { color: var(--color-black); }
.minimize#header .jt-btn__basic.jt-btn--type-02 .jt-icon svg path { fill: var(--color-black); }

/* LOGO */
#logo { width: 100rem; height: 44rem; position: absolute; left: 0; top: 28rem; z-index: 2; transition: top .3s; }
#logo a { display: block; width: 100%; height: 100%; padding: 6rem 0; }
#logo a svg, #logo a img { display: block; width: 100%; height: 100%; }
#logo a svg path { fill: var(--color-black); }

/* MENU */
.menu-controller { display: flex; align-items: center; justify-content: center; gap: 10rem; position: absolute; left: 50%; top: 26rem; translate: -50% 0; transition: top .3s; }
.menu-controller__text { display: block; height: 22rem; position: relative; }
.menu-controller__text > i { display: block; line-height: 22rem; font-style: normal; color: var(--color-black); }
.menu-controller__text--menu { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.menu-controller__text--close { opacity: 0; }
.menu-controller__icon { width: 48rem; height: 48rem; position: relative; }
.menu-controller__icon-line { display: block; width: 100%; height: 2px; position: absolute; left: 0; background: var(--color-black); }
.menu-controller__icon-line--01 { top: 13rem }
.menu-controller__icon-line--02 { top: 23rem }
.menu-controller__icon-line--03 { top: 33rem }

.menu-container { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--color-black); z-index: 1100; overflow: hidden; }
.menu-container__inner { display: flex; align-items: center; width: 100%; height: 100%; position: relative; z-index: 2; }

.menu-container__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 1; }
.menu-container__bg-video { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.menu-container__bg-poster { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/layout/gnb-vid-poster.jpg) no-repeat center center / cover; }
.menu-container__bg:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: .4; }

.menu-nav { display: inline-block; vertical-align: middle; margin-left: 64.27%; margin-top: -62rem; }
#menu { position: relative; }
#menu li { display: block; position: relative; }
#menu a { display: block; position: relative; color: var(--color-white); white-space: nowrap; transition: color .3s; }
#menu > li > a { padding-top: 16rem; padding-bottom: 16rem; font-family: var(--font-secondary); font-size: var(--font-size-en-04); line-height: var(--font-lineheight-en-04); font-weight: 600; letter-spacing: var(--letter-spacing); opacity: .6; transition: opacity .3s; }
#menu > li > ul { position: absolute; left: calc(100% + 60rem); top: 16rem; opacity: 0; visibility: hidden; transition: .3s; }
#menu > li > ul:before { content: ''; width: 60rem; height: 100%; position: absolute; top: 0; left: -60rem; }
#menu > li > ul > li { display: block; }
#menu > li > ul > li > a { padding: 8rem 0; font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: 500; }
#menu > li > ul > li > a > span { display: inline-block; position: relative; }
#menu > li > ul > li > a > span:after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: var(--color-white); opacity: 0; }
#menu > li.menu-item-has-children > a > span { position: relative; }
#menu > li.menu-item-has-children > a > span:before { content: ''; display: block; width: 8rem; height: 8rem; position: absolute; top: 21rem; left: -25rem; background: var(--color-white); border-radius: 50%; opacity: 0; }
#menu > li.hover > ul { opacity: 1; visibility: visible; }
#menu > li.current-menu-item > a, 
#menu > li.current-menu-ancestor > a { opacity: 1; }
#menu > li.current-menu-item > a > span:before, 
#menu > li.current-menu-ancestor > a > span:before { opacity: 1; }
#menu > li > ul > li.current-menu-item > a > span:after { opacity: 1; }

/* LANG */
.lang-container { position: absolute; top: 30rem; right: -4rem; z-index: 2; transition: top .3s; }

.lang-menu-btn { position: relative; display: block; width: 40rem; height: 40rem; padding: 4rem; border-radius: 50%; transition: background .3s; pointer-events: none; }
.lang-menu-btn .jt-icon { display: block; width: 32rem;}
.lang-menu-btn .jt-icon svg path { fill: var(--color-black); }

.lang-menu { width: 64rem; position: absolute; top: calc(100% + 17rem); left: 50%; background: var(--color-secondary); border-radius: var(--round-02); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .3s; }
.lang-menu:before { content: ''; display: block; width: 100%; height: 17rem; position: absolute; top: -17rem; left: 0; }
.lang-menu > li a { display: block; padding: 10rem 0; text-align: center; color: rgba(255, 255, 255, .6); transition: color .3s; }
.lang-menu > li:first-child a { padding-top: 16rem; }
.lang-menu > li:last-child a { padding-bottom: 16rem; }
.lang-menu > li.lang-menu--current a { color: var(--color-white); }
.lang-menu > li.lang-menu--current a > span { border-bottom: 1px solid var(--color-white); }

.lang-container:hover .lang-menu-btn { background: var(--color-gray-300); }
.lang-container:hover .lang-menu { opacity: 1; visibility: visible; }

/* SHOP BUTTON */
.header__shop-btn { position: absolute; top: 27rem; right: 72rem; transition: top .3s, transform .4s; transform-origin: 100% 50%; }
.header__shop-btn .jt-icon svg path { transition: none; }

.header__shop-btn:not(:has(+.lang-container)) { right: 0; }

/* MINIMIZE */
.minimize#header { height: 84rem; border-bottom-color: var(--color-gray-400); background: var(--color-bg); }
.minimize#header #logo { top: 20rem; }
.minimize#header .menu-controller { top: 17rem; }
.minimize#header .header__shop-btn { top: 19rem; transform: scale(0.88); }
.minimize#header .lang-container { top: 22rem; }

/* OPEN */
body.open-menu #header { transform: none !important; opacity: 1 !important; visibility: visible !important; position: fixed !important; }
body.open-menu .menu-controller { z-index: 1101; }
body.open-menu .menu-controller__text > i { color: var(--color-white); }
body.open-menu .menu-controller__icon-line { background: var(--color-white); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { position: relative; }
.footer__inner { margin: 0 52rem; padding: 120rem 160rem 80rem; position: relative; background: var(--color-primary); border-radius: var(--round-07) var(--round-07) 0 0; }

.footer__top { display: flex; align-items: flex-start; justify-content: space-between; }
.footer__bottom { margin-top: 47rem; }

/* LOGO */
.footer__logo { width: 290rem; }
.footer__logo svg { display: block; width: 100%; height: auto; }
.footer__logo--small { display: none; }

/* MENU */
.footer__main-menu-container { width: 468rem; margin-top: -10rem; }

#footer-menu { width: fit-content; position: relative; }
#footer-menu li { display: block; position: relative; }
#footer-menu a { display: block; position: relative; color: var(--color-white); white-space: nowrap; }
#footer-menu > li > a { padding-top: 10rem; padding-bottom: 10rem; font-family: var(--font-secondary); font-size: var(--font-size-en-04); line-height: var(--font-lineheight-en-04); font-weight: 600; letter-spacing: var(--letter-spacing); }
#footer-menu > li > ul { position: absolute; left: calc(100% + 60rem); top: 10rem; opacity: 0; visibility: hidden; transition: .3s; }
#footer-menu > li > ul:before { content: ''; width: 60rem; height: 100%; position: absolute; top: 0; left: -60rem; }
#footer-menu > li > ul > li { display: block; }
#footer-menu > li > ul > li > a { padding: 8rem 0; font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: 500; letter-spacing: var(--letter-spacing); transition: opacity .3s; }
#footer-menu > li > ul > li > a > span { display: inline-block; position: relative; }
#footer-menu > li > ul > li > a > span:after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: var(--color-white); opacity: 0; }

#footer-menu > li.menu-item-has-children > a > span { position: relative; }
#footer-menu > li.menu-item-has-children > a > span:before { content: ''; display: block; width: 8rem; height: 8rem; position: absolute; top: 21rem; left: -25rem; background: var(--color-white); border-radius: 50%; opacity: 0; }

#footer-menu > li.hover > ul { opacity: 1; visibility: visible; }

#footer-menu > li.current-menu-item > a, 
#footer-menu > li.current-menu-ancestor > a { opacity: 1; }
#footer-menu > li.current-menu-item > a > span:before, 
#footer-menu > li.current-menu-ancestor > a > span:before { opacity: 1; }
#footer-menu > li > ul > li.current-menu-item > a > span:after { opacity: 1; }

/* SNS */
.footer__social { display: flex; align-items: center; gap: 4rem; width: fit-content; padding: 10rem 0; color: var(--color-white); }
.footer__social .jt-icon { width: 16rem; }
.footer__social .jt-icon svg path { fill: var(--color-white); }

/* EXTEND MENU */
#footer-extend-menu { display: inline-flex; flex-wrap: wrap; gap: 24rem; }
#footer-extend-menu > li > a { display: block; padding: 4rem; font-size: var(--font-size-ko-09); line-height: var(--font-lineheight-ko-09); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-white); transition: opacity .3s; }
#footer-extend-menu > li > .sub-menu { position: absolute; opacity: 0; visibility: hidden; }
#footer-extend-menu > li.menu-item-privacy-policy span { display: block; text-decoration: underline; text-underline-offset: 10rem; }

#footer-extend-menu > li > a[target="_blank"] { display: inline-flex; align-items: center; gap: 4rem; }
#footer-extend-menu > li > a[target="_blank"] i { width: 16rem; height: 16rem; background: url(../images/icon/icon-outlink.svg) no-repeat; }

#footer-extend-menu > li.menu-item--family > a { display: inline-flex; align-items: center; gap: 4rem; }
#footer-extend-menu > li.menu-item--family > a i { width: 16rem; height: 16rem; background: url(../images/icon/icon-plus.svg) no-repeat center / cover; filter: invert(1); }

/* COPYRIGHT */
.footer__copyright { margin-top: 20rem; font-size: var(--font-size-ko-09); line-height: var(--font-lineheight-ko-09); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-white); opacity: .8; }



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.go-top { display: block; width: 68rem; height: 68rem; padding: 21rem 8rem 19rem; position: absolute; top: -89rem; right: 52rem; text-align: center; color: var(--color-white); background: var(--color-black); border-radius: 50%; transition: opacity .3s; z-index: 99; }
.go-top span { display: block; }

.go-top.go-top--fix { position: fixed; top: inherit; bottom: 21rem; } 
.go-top.go-top--hide { opacity: 0; z-index: -1; }



/* **************************************** *
 * SCROLL DOWN
 * **************************************** */
.scroll-down { position: absolute; bottom: 42rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4rem; padding: 5rem; z-index: 1; }
.scroll-down span { color: var(--color-white); }
.scroll-down .jt-icon { width: 24rem; }
.scroll-down .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: 100rem; padding-bottom: 260rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { padding-top: 80rem; padding-bottom: 60rem; text-align: center; }
.article__desc { margin-top: 16rem; color: var(--color-gray-800); }

.article__header.article__header--secondary { padding-bottom: 100rem; }
.article__header.article__header--tertiary { padding-bottom: 80rem; }

/* PAGE HEADER - VISUAL */
.article__header.article__header--visual { padding-top: 0; padding-bottom: 0; position: relative; }
.article__visual { position: relative; width: 100%; height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; overflow: hidden; font-size: 0; }
.article__visual-inner { position: relative; display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; }
.article__visual-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }
.article__visual-bg:after { content: ''; display: block; width: 100%; height: 100%; background: #000; opacity: .1; position: absolute; top: 0; left: 0; }
.article__visual-content { width: 100%; padding: 0 40rem; position: relative; text-align: center; z-index: 1; }
.article__visual-content > * { color: var(--color-white); }
html.mobile .article__visual:not(.article__visual--mask) { height: 100svh; }

.article__visual-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.article__visual-bg-slider-img { display: block; height: 100%; background: no-repeat center / cover; transform: scale(1.05) rotate(0.01deg); transition: transform 4.7s ease-in; }
.swiper-slide-active .article__visual-bg-slider-img { transform: scale(1) rotate(0deg); }

.article__header--visual:has(.article__visual--mask) { padding-top: 49.69%; }
.article__header--visual .article__visual--mask { width: 100%; height: 100%; min-height: inherit; max-height: inherit; position: absolute; top: 0; left: 0; }
.article__visual--mask .article__visual-bg { -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.article__visual--mask .jt-background-video__vod video { width: 100%; height: 100%; min-width: inherit; min-height: inherit; top: 0; left: 0; translate: none; object-fit: cover; }

.article__visual-play { display: flex; align-items: center; gap: 20rem; position: absolute; left: 52rem; bottom: 24rem; color: inherit; }
.article__visual-play-thumb { width: 100rem; background: var(--color-gray-200); border-radius: var(--round-01); overflow: hidden; }
.article__visual-play-thumb-figure { transition: scale 1s cubic-bezier(0.19, 1, 0.22, 1), rotate 1s cubic-bezier(0.19, 1, 0.22, 1); }
.article__visual-play-thumb .jt-lazyload { padding-top: 62%; }
.article__visual-play span { display: inline-flex; align-items: center; gap: 8rem; }
.article__visual-play .jt-icon { width: 16rem; height: 16rem; }

html.js .article__visual .article__visual-content > * { opacity: 0; }

/* SECTION */
.article__section-head { margin-bottom: 80rem; text-align: center; }
.article__section-head p { margin-top: 32rem; color: var(--color-gray-800); }
.article__section-head p > small { display: block; font-size: inherit; }
.article__section-btn-wrap { display: inline-flex; gap: 16rem; margin-top: 40rem; }

/* PAGE BODY */
.article__body { position: relative; min-height: 360rem; }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .go-top { display: none; }

.error-404 { padding-top: 160rem; display: flex; flex-direction: column; align-items: center; gap: 40rem; text-align: center; }
.error-404__figure { width: 120rem; border-radius: 50%; overflow: hidden; }
.error-404__figure .jt-lazyload { padding-top: 100%; }
.error-404 p { margin-top: -16rem; color: var(--color-gray-800); }



/* **************************************** *
 * JT SEPARATE LINE
 * **************************************** */
.jt-separate-line { display: block; width: 100%; height: 90rem; }
.jt-separate-line > i { display: block; width: 100%; margin-bottom: 16rem; background: currentColor; }
.jt-separate-line > i:last-child { margin-bottom: 0; }
.jt-separate-line > i:nth-child(1) { height: 20rem; }
.jt-separate-line > i:nth-child(2) { height: 10rem; }
.jt-separate-line > i:nth-child(3) { height: 4rem; }
.jt-separate-line > i:nth-child(4) { height: 2rem; }



/* **************************************** *
 * POPUP
 * **************************************** */
/* VISUAL VIDEO POPUP */
/*
.jt-video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: flex; align-items: center; display: none; }
.jt-video-popup__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .3); backdrop-filter: blur(10rem); }
.jt-video-popup__inner { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 100%; height: 100%; }
.jt-video-popup__content { position: relative; width: 100%; max-width: 1014rem; background: var(--color-black); }
.jt-video-popup__vod { width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; }
.jt-video-popup__vod video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.jt-video-popup__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; }
.jt-video-popup__close { position: absolute; top: 20rem; right: 20rem; display: block; border-radius: 50%; background: rgba(255,255,255,.8); padding: 12rem; font-size: 0; z-index: 10; transition: background .3s; }
.jt-video-popup__close .jt-icon { width: 16rem; }
*/

/* LAYER POPUP */
.global-info-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10rem); z-index: 9999; overflow: hidden auto; }
.global-info-popup__container { display: flex; align-items: center; width: 100%; height: 100%;; position: absolute; left: 0; top: 0; text-align: center; box-sizing: border-box; }
.global-info-popup__content { display: inline-block; vertical-align: middle; width: 480rem; height: fit-content; margin: 0 auto; padding: 60rem 18rem 40rem 40rem; position: relative; text-align: left; background: var(--color-point-02); border-radius: var(--round-05); }
.global-info-popup__title { margin-bottom: 16rem; padding-right: 22rem; text-align: center; }

.global-info-popup__content-inner { max-height: calc(80vh - 168rem); padding-right: 22rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.global-info-popup__content-inner-item { background: var(--color-white); border-radius: var(--round-01); padding: 24rem; }
.global-info-popup__content-inner-item:not(:last-child) { margin-bottom: 8rem; }
.global-info-popup__content-inner-item-title { padding-bottom: 8rem; border-bottom: 1px solid var(--color-gray-400); display: flex; align-items: center; gap: 12rem; }
.global-info-popup__content-inner-item-title i { width: 24rem; height: 24rem; }
.global-info-popup__content-inner-item-link { margin-top: 16rem; }
.global-info-popup__content-inner-item-link li:not(:last-child) { margin-bottom: 8rem; }
.global-info-popup__content-inner-item-link li a { color: var(--color-black); display: flex; justify-content: space-between; align-items: center; }
.global-info-popup__content-inner-item-link li a .jt-icon { width: 16rem; position: relative; top: 1rem; }

.global-info-popup__close { width: 36rem; height: 36rem; margin: 0; padding: 0; position: absolute; top: 30rem; right: 30rem; background: transparent; border: none; outline: none; cursor: pointer; }
.global-info-popup__close .jt-icon { width: 16rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }

html.win .global-info-popup__content-inner { overflow: overlay; }
html.win .global-info-popup__content-inner::-webkit-scrollbar { width: 4rem; background: transparent; }
html.win .global-info-popup__content-inner::-webkit-scrollbar-track { background: transparent; }
html.win .global-info-popup__content-inner::-webkit-scrollbar-thumb { background: var(--color-gray-600); border-radius: 99rem; }



/* **************************************** *
 * CURSOR
 * **************************************** */
#custom-cursor, #custom-cursor-text { width: 160rem; height: 160rem; position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; will-change: transform; transition: width .3s, height .3s; }
.custom-cursor__inner { display: block; width: 100%; height: 100%; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.custom-hover-circle, .custom-hover-text { display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; margin-top: -90rem; margin-left: -90rem; overflow: hidden; opacity: 0; border-radius: 50%; }
.custom-hover-circle { z-index: 1; border: none;} /* bgcolor는 js 에서 수정 */
.custom-hover-text { z-index: 2; color: var(--color-white); }
.custom-hover-text > span { display: block; width: 100%; height: 100%; font-family: var(--font-secondary); font-size: var(--font-size-en-08); line-height: var(--font-lineheight-en-08); text-align: center; font-weight: 600; color: inherit; }
.custom-hover-text > span { display: flex; align-items: center; justify-content: center; text-align: center; }

.custom-custor__drag-icon { position: absolute; top: 50%; left: 50%; width: 72rem; transform: translate(-50%,-50%); }
.custom-custor__drag-icon svg { display: block; width: 100%; height: auto; }
.custom-custor__drag-icon svg path { fill: var(--color-white); }
.custom-hover-text > span.custom-cursot__drag-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0); width: auto; height: auto; margin-top: 10rem; }



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

    /* HEADER */
    .lang-menu > li a:hover { color: var(--color-white); }

    #menu > li.hover > a { opacity: 1; }
    #menu > li > ul > li:not(.current-menu-item) > a:hover { color: rgba(255, 255, 255, 0.8); }

    /* FOOTER */
    #footer-extend-menu > li > a:hover { opacity: .8; }

    #footer-menu > li > ul > li > a:hover { opacity: .8; }

    /* PAGE */
    .article__visual-play:hover .article__visual-play-thumb-figure { scale: 1.1; rotate: 0.01deg; }

    /* POPUP */
    .jt-video-popup__close:hover { background: var(--color-white); }

    /* SCROLL TOP */
    .go-top:hover { opacity: .8; }
    
}