@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');



/* scrollbar */



:root{
--black: #000000;
--white: #fff;
--uu: #ffcd00;
--red: #fc6039;
--blue: #1191fa;
--green: #60df48;
--grey: #d9d9d9;
--grey-dark: #888;
--2022-blue: #280583;
--2022-purple: #d501ec;
}
body::-webkit-scrollbar{width: 10px; height: 10px;}
body::-webkit-scrollbar-track{-webkit-box-shadow: none; background: var(--black); -webkit-border-radius: 0; border-radius: 0;}
body::-webkit-scrollbar-thumb{-webkit-box-shadow: none; background: var(--white); -webkit-border-radius: 0; border-radius: 0;}
body::-webkit-scrollbar-thumb:active{background: var(--uu);}
body::-webkit-scrollbar-thumb:window-inactive{background: #888;}



/* core */



*{-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-size-adjust: none;}
html{margin: 0; padding: 0; scrollbar-width: thin;}
html>div[style]{display: none !important;}
body{margin: 0; padding: 0; background: var(--black); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4em; color: var(--grey); overflow-x: hidden;}
ul,ol,dl,menu{margin: 1.5em 0;}
ul{list-style: none;}
a{text-decoration: none; cursor: pointer;}
a:focus{outline: none;}
img{display: block; max-width: 100%; height: auto;}
input{-webkit-appearance: none;}
input:focus{outline: none;}
div.band{max-width: 1300px; margin: 0 auto; padding: 0 20px; -webkit-box-sizing: content-box; box-sizing: content-box;}
div.band-border{width: 100%; height: 10px; margin-top: 10px; border-top: 1px solid var(--white);}
div.hue-1 .band-border{border-color: var(--white);}
div.hue-2 .band-border,div.hue-3 .band-border{border-color: var(--black); border-width: 2px;}
@media all and (max-width:1200px){
body{font-size: 13px;}
}
@media all and (max-width: 900px){
body{font-size: 12px;}
}
@media all and (max-width: 600px){
body{font-size: 11px;}
}



/* font */



h1,h2,h3,h4{margin: 2rem 0; line-height: 1.2em;}
h1{font-size: 6.0em; font-weight: 800; font-style: italic; text-align: center; text-transform: uppercase; color: var(--uu); -webkit-user-select: none; user-select: none;}
/*h1:not(.fill){-webkit-text-stroke-width: .02em; -webkit-text-stroke-color: var(--uu); -webkit-text-fill-color: transparent;}*/
h2{font-size: 3.6em; font-weight: 800; line-height: 1.0em; text-transform: uppercase;}
h3{font-size: 3.0em; font-weight: 300;}
h4{font-size: 2.0em; font-weight: 400; color: var(--uu);}
h1.white{color: var(--white); -webkit-text-stroke-color: var(--white);}
p{margin: 1.8rem 0; font-size: 1.4em; line-height: 1.4em; font-weight: 600;}
p a{text-decoration: underline; color: inherit;}
a.btn-more{display: table; margin: 20px auto; padding: 12px 32px; border: 3px solid var(--black); background: var(--black); -webkit-border-radius: 100px; border-radius: 100px; font-size: 1.2em; line-height: 1.2em; font-weight: 600; color: var(--white); -webkit-transition: background 120ms ease, color 120ms ease; transition: background 120ms ease, color 120ms ease;}
a.btn-more:hover{background: inherit; color: var(--black);}
@media all and (max-width:1200px){
h1{font-size: 5.6em;}
h2{font-size: 3.4em;}
h3{font-size: 2.8em;}
}
@media all and (max-width: 900px){
h1{font-size: 5.2em;}
h2{font-size: 3.2em;}
h3{font-size: 2.6em;}
}
@media all and (max-width: 600px){
h1{font-size: 4.8em;}
h2{font-size: 2.8em;}
h3{font-size: 2.2em;}
}



/* head */



.head-bar{position: fixed; z-index: 600; top: 30px; left: 60px; display: block; width: 164px; height: 60px; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.head-bar>a{display: block; width: 100%; height: 100%;}
.head-bar>a>div{width: 100%; height: 100%; background-repeat: no-repeat; background-position: left center; background-size: contain; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.head-bar>a>div:nth-child(1){position: relative; z-index: 2; background-image: url(../icon/brand.svg);}
.head-bar>a>div:nth-child(2){position: absolute; z-index: 4; top: 0; left: 0; background-image: url(../icon/brand-b.svg); opacity: 0;}
.head-bar.inv>a>div:nth-child(1){opacity: 0;}
.head-bar.inv>a>div:nth-child(2){opacity: 1;}
.shop-btn{position: fixed; z-index: 760; top: 30px; right: 140px; display: table; height: 60px;}
.shop-btn>div{display: table-cell; vertical-align: middle;}
.shop-btn>div>a{padding: 10px 20px 10px 42px; background-color: #fff; background-image: url(../icon/ticket.svg); background-repeat: no-repeat; background-repeat: no-repeat; background-position: left 14px center; background-size: 20px auto; -webkit-border-radius: 100px; border-radius: 100px; font-size: 1.2em; line-height: 1.2em; font-weight: 600; color: var(--black); text-decoration: none;}
.shop-btn>div>a:hover{text-decoration: underline;}
.menu-btn{position: fixed; z-index: 910; top: 30px; right: 60px; width: 60px; height: 60px; background: var(--uu); -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.menu-btn>div{z-index: 4; position: absolute; top: 50%; left: 20%; width: 60%; height: 4px; margin-top: -2px; background: var(--black); -webkit-transition: transform 200ms ease, background 200ms ease; transition: transform 200ms ease, background 200ms ease;}
.menu-btn>div.bar1{-webkit-transform: translateY(6px); transform: translateY(6px);}
.menu-btn>div.bar2{-webkit-transform: translateY(-6px); transform: translateY(-6px);}
.menu-btn:before{content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--black); -webkit-border-radius: 50%; border-radius: 50%; opacity: 0; -webkit-transform: scale(0,0); transform: scale(0,0); -webkit-transition: transform 200ms ease, opacity 120ms ease; transition: transform 200ms ease, opacity 120ms ease;}
.menu-btn:hover>div{background: var(--uu);}
.menu-btn:hover:before{-webkit-transform: scale(0.9,0.9); transform: scale(0.9,0.9); opacity: 1;}
.menu-on .menu-btn>div.bar1{-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.menu-on .menu-btn>div.bar2{-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
@media all and (max-width:1200px){
.head-bar{top: 20px; left: 20px;}
.menu-btn{top: 20px; right: 20px;}
.shop-btn{top: 20px; right: 100px;}
}
@media all and (max-width: 600px){
.shop-btn{bottom: 20px; left: 20px; top: auto !important; right: auto;}
}



/* menu */



.menu{position: fixed; z-index: 905; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; -webkit-transition: background 200ms ease; transition: background 200ms ease;}
.menu>div{position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;}
.menu>div::-webkit-scrollbar{width: 0px; background: transparent;}
.menu-bar{display: table; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
.menu-bar>div{display: table-cell; padding: 2rem 0; vertical-align: middle; text-align: center;}
.menu-bar ul{display: table; margin: 0 auto; padding: 0; list-style: none; -webkit-user-select: none; user-select: none;}
.menu-bar ul>li{display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: transform 200ms ease; transition: transform 200ms ease;}
.menu-bar ul>li>a{display: block; font-size: 4.2em; line-height: 1.0em; letter-spacing: 0.02em; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--uu); -webkit-text-stroke: .02em var(--uu); -webkit-text-fill-color: transparent; text-decoration: none;}
.menu-bar ul>li.on>a{-webkit-text-fill-color: var(--uu); font-style: normal;}
.menu-bar ul>li>a:hover{-webkit-text-fill-color: var(--uu);}
.menu .icon-bar{margin-top: 20px;}
.menu .icon-bar>a{display: inline-block; width: 50px; height: 50px; margin: 6px; -webkit-border-radius: 50%; border-radius: 50%; background-color: #444; background-image: url(../icon/icon-0-u.svg); background-repeat: no-repeat; background-position: center center; background-size: auto 60%;}
.menu .icon-bar>a:hover{background-size: auto 50%;}
.menu .icon-bar>a.link-1{background-image: url(../icon/icon-1-u.svg);}
.menu .icon-bar>a.link-2{background-image: url(../icon/icon-2-u.svg);}
.menu .icon-bar>a.link-3{background-image: url(../icon/icon-3-u.svg);}
.menu .icon-bar>a.link-4{background-image: url(../icon/icon-4-u.svg);}
.menu .icon-bar>a.link-5{background-image: url(../icon/icon-5-u.svg);}
.menu-on .menu{background: rgba(0,0,0,.9); pointer-events: all;}
.menu-on .menu-bar{opacity: 1;}
.menu-on .menu-bar ul>li{-webkit-transform: translateY(0); transform: translateY(0);}
@media all and (max-width: 600px){
.menu-bar ul>li>a{font-size: 3.4em; line-height: 1.2em;}
.menu .icon-bar>a{width: 40px; height: 40px;}
}



/* brand bar */



.footer{padding: 0 20px 40px 20px; background: var(--black); text-align: center; color: var(--grey);}
.footer p{font-size: 1.2em; line-height: 1.4em; font-weight: 300;}
.footer p strong{font-weight: 600;}
.footer p a{font-weight: 600; color: var(--grey); text-decoration: none;}
.footer p a:hover{text-decoration: underline;}
.footer div.brand{display: block; width: 164px; height: 40px; margin: 0 auto; background-image: url(../icon/brand-w.svg); background-repeat: no-repeat; background-position: left center; background-size: contain;}
.brand-bar{padding: 80px 0 40px 0; background: var(--black);}
.brand-bar div.brands{padding: 20px 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: center; justify-content: center;}
.brand-bar div.brands.brands-m,.brand-bar div.brands.brands-s{padding-top: 0;}
.brand-bar div.brands.brands-m,.brand-bar div.brands.brands-x{padding-bottom: 0;}
.brand-bar a{display: inline-table; width: 20%; height: 120px; margin: 10px 0; padding: 20px; border-right: 1px solid #444; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.brand-bar a:hover{opacity: 0.8;}
.brand-bar a:nth-child(5n+1){border-left: 1px solid #444;}
.brand-bar a>div{display: table-cell; vertical-align: middle; height: 100%;}
.brand-bar a>div>div{width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.brand-bar a.size-40>div>div{height: 40%;}
.brand-bar a.size-60>div>div{height: 60%;}
.brand-bar a.size-80>div>div{height: 80%;}
.brand-bar div.brands.brands-m a{width: 24%; height: 150px;}
.brand-bar div.brands.brands-x a{width: 28%; height: 180px;}
.alliance{max-width: 360px; margin: 0 auto; margin-bottom: 40px;}
.alliance>a{display: block; position: relative; width: 100%; padding-bottom: 100%;}
.alliance>a>div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../icon/acf.png); background-repeat: no-repeat; background-position: center center; background-size: contain;}
@media all and (max-width: 900px){
.brand-bar a{width: 25.00%;}
.brand-bar a:nth-child(5n+1){border-left: none;}
.brand-bar a:nth-child(4n+1){border-left: 1px solid #444;}
.brand-bar div.brands.brands-m a{width: 29%;}
.brand-bar div.brands.brands-x a{width: 33%;}
}
@media all and (max-width: 600px){
.brand-bar a{width: 33.33%; height: 80px; margin: 0;}
.brand-bar a:nth-child(4n+1){border-left: none;}
.brand-bar a:nth-child(3n+1){border-left: 1px solid #444;}
.brand-bar div.brands.brands-m a{width: 42%; height: 100px;}
.brand-bar div.brands.brands-x a{width: 50%; height: 120px;}
}



/* video header */



.head-mask{position: relative; z-index: 18; width: 100vw; height: 100vh; background-color: var(--black); background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; -webkit-clip-path: circle(75%); clip-path: circle(75%);}
.head-mask video{position: relative; z-index: 2; height: 100%; width: 177.7778vh; min-width: 100%; min-height: 56.25vw;}
.head-mask div.brand{position: absolute; z-index: 4; width: 100%; height: 100%; background-image: url(../icon/brand.svg); background-repeat: no-repeat; background-position: center center; background-size: 50% auto;}
.head-mask div.brand>h1{position: absolute; top: 60%; left: 0; width: 100%; margin: 0; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: .025em;}
.head-mask div.move-icon{position: absolute; z-index: 6; left: 50%; bottom: 6%; width: 36px; height: 58px; border: 4px solid #fff; border-radius: 60px; margin-left: -18px; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.head-mask div.move-icon>div{display: block; position: absolute; left: 50%; top: 0; width: 4px; height: 14px; margin-left: -2px; background: #fff; -webkit-border-radius: 2px; border-radius: 2px; -webkit-animation: wheel 1s ease-in-out infinite alternate; animation: wheel 1s ease-in-out infinite alternate;}
.circ{position: absolute; z-index: 2; width: 100%; height: 200vh; top: 0; left: 0;}
.circ>div{position: relative; width: 100%; height: 100%; overflow: hidden;}
.circ>div>div{position: absolute; display: block; -webkit-border-radius: 50%; border-radius: 50%;}
.circ>div>div:nth-child(1){width: 26vw; height: 26vw; left: -12%; top: 40%; background: var(--red);}
.circ>div>div:nth-child(2){width: 36vw; height: 36vw; right: -10%; top: 50%; background: var(--blue);}
.block-video-head{position: relative; z-index: 600; width: 100%; height: 200vh; background: var(--uu); pointer-events: none;}
.block-video-head>div.keep{position: sticky; z-index: 4; top: 0; width: 100%; overflow-x: hidden;}
.block-video-head[data-m='1'] div.brand>h1{opacity: 0;}
.block-video-head[data-m='1'] div.move-icon{opacity: 0; -webkit-animation-play-state: paused; animation-play-state: paused;}
.block-video-head.skin-2023{background-color: var(--black); background-image: url(../icon/2023.png); background-repeat: repeat-y; background-position: center bottom; background-size: contain;}
.block-lustrum{background: var(--uu);}
.block-lustrum .lustrum{max-width: 800px; margin: 0 auto;}
.block-lustrum .lustrum>div{position: relative; width: 100%; padding-bottom: 8.4%;}
.block-lustrum .lustrum>div>div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../icon/lustrum.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
@-webkit-keyframes wheel{
0%{-webkit-transform: translateY(50%);} 50%{-webkit-transform: translateY(50%);} 100%{-webkit-transform: translateY(150%);}
}
@keyframes wheel{
0%{transform: translateY(50%);} 50%{transform: translateY(50%);} 100%{transform: translateY(150%);}
}
@media all and (max-width: 900px){
.circ>div>div:nth-child(1){width: 36vw; height: 36vw;}
.circ>div>div:nth-child(2){width: 46vw; height: 46vw;}
.block-video-head.skin-2023{background-size: 200% auto;}
}
@media all and (max-width: 600px){
.head-mask video{display: none;}
.head-mask div.move-icon{top: 20%; bottom: auto;}
.circ>div>div:nth-child(1){width: 46vw; height: 46vw;}
.circ>div>div:nth-child(2){width: 56vw; height: 56vw;}
.block-video-head.skin-2023{background-size: 260% auto;}
}



/* user */



.logged-in{padding-top: 28px;}
.logged-in .head-bar{top: 60px;}
.logged-in .shop-btn{top: 60px;}
.logged-in .menu-btn{top: 60px;}
.logged-in .menu-bar>div{padding-top: calc(2rem + 28px);}
.logged-in .block-video-head>div{top: 28px;}
.logged-in .head-mask{height: calc(100vh - 28px);}
.logged-in .dock>div{padding-top: 28px;}
@media all and (max-width:1200px){
.logged-in .head-bar{top: 50px;}
.logged-in .shop-btn{top: 50px;}
.logged-in .menu-btn{top: 50px;}
}



/* carousel */



.swiper-start{position: relative;}
.swiper-slide{padding: 20px;}
.swiper-slide.hide{display: none !important;}
.swiper-slide a{display: block; height: 100%; text-decoration: none; color: var(--white); -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
.swiper-slide a>div{position: relative; width: 100%; padding-bottom: 120%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-border-radius: 12px; border-radius: 12px;}
.swiper-slide a>div>div{z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 54%); -webkit-border-radius: 12px; border-radius: 12px;}
.swiper-slide a:hover .core .name{text-decoration: underline;}
.swiper-slide .core{display: table; width: 100%; height: 100%;}
.swiper-slide .core>div{display: table-cell; padding: 20px; padding-bottom: 30px; vertical-align: bottom;}
.swiper-slide .core .name{display: block; margin-bottom: 8px; font-size: 1.4em; line-height: 1.3em; font-weight: 600;}
.swiper-slide .core .user{display: block; margin-bottom: 8px; font-size: 1.1em; line-height: 1.3em; font-weight: 400; color: var(--grey);}
.swiper-slide .core .time{position: absolute; z-index: 6; right: 16px; top: 16px;}
.swiper-slide .core .time>span{display: inline-block; padding: 8px 12px; background: #fff; -webkit-border-radius: 100px; border-radius: 100px; color: var(--black); font-weight: 600; line-height: 1.0em;}
.nav{z-index: 60; position: absolute; top: 30%; display: block; width: 50px; height: 50px; background-color: #fff; background-image: url(../icon/arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: 50% auto; -webkit-border-radius: 50%; border-radius: 50%; outline: none !important; cursor: pointer; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
.nav:hover{background-size: 60% auto;}
.nav.next{right: -25px;}
.nav.prev{left: -25px; -webkit-transform: scaleX(-1); transform: scaleX(-1);}
.nav.swiper-button-disabled{opacity: 0;}
.nav-flow{position: relative !important; width: 100px !important; height: 3px !important; margin: 20px auto; background: var(--black) !important;}
.nav-flow>span{background: var(--white) !important;}
@media all and (max-width: 900px){
.nav{display: none;}
}



/* video */



.video{position: relative; width: 100%; padding-bottom: 56.25%;}
.video>div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000;}
.video>div>iframe{width: 100% !important; height: 100% !important; border: none;}



/* love */



.love{position: relative; display: block; width: 40px; height: 40px; -webkit-user-select: none; user-select: none;}
.love:hover{opacity: 0.8;}
.love>div{position: absolute; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; -webkit-transition: transform 200ms ease; transition: transform 200ms ease;}
.love>div:nth-child(1){z-index: 2; -webkit-transform: scale(1,1); transform: scale(1,1); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; background-image: url(../icon/love.svg);}
.love>div:nth-child(2){z-index: 4; -webkit-transform: scale(0,0); transform: scale(0,0); -webkit-transition-delay: 0.0s; transition-delay: 0.0s; background-image: url(../icon/loved.svg);}
.love.on>div:nth-child(1){-webkit-transform: scale(0,0); transform: scale(0,0); -webkit-transition-delay: 0.0s; transition-delay: 0.0s;}
.love.on>div:nth-child(2){-webkit-transform: scale(1,1); transform: scale(1,1); -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.d-data .love{margin-bottom: 8px;}
@media all and (max-width: 600px){
.love:hover{opacity: 1;}
}



/* dock */



.pop-end,.return{display: block; width: 100px; height: 100px; margin: 6px 0 16px 0; background-repeat: no-repeat; background-position: center top; background-size: contain; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.pop-end:hover,.return:hover{opacity: 0.6;}
.pop-end{background-image: url(../icon/end-w.svg);}
.return{background-image: url(../icon/return-w.svg);}
.spin{display: none; width: 30px; height: 30px; -webkit-border-radius: 50%; border-radius: 50%; margin: -15px 0 0 -15px; border: 4px solid rgba(255,255,255,0.4); border-top: 4px solid #fff;}
.spin.roll{display: block; -webkit-animation: rotate 1.2s infinite cubic-bezier(0.8,0.4,0.4,0.8); animation: rotate 1.2s infinite cubic-bezier(0.8,0.4,0.4,0.8);}
.dock{z-index: 900; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 200ms ease, visibility 0s linear 200ms; transition: opacity 200ms ease, visibility 0s linear 200ms; opacity: 0; visibility: hidden;}
.docked .dock{-webkit-transition: opacity 200ms ease, visibility 0s linear; transition: opacity 200ms ease, visibility 0s linear; opacity: 1; visibility: visible;}
.dock>div{position: relative; z-index: 4; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;}
.dock>div::-webkit-scrollbar{width: 0px; background: transparent;}
.dock .spin{position: absolute; z-index: 6; top: 50%; left: 50%;}
@-webkit-keyframes rotate{
100%{-webkit-transform: rotate(360deg);}
}
@keyframes rotate{
100%{transform: rotate(360deg);}
}



/* dock node */



.d-node{position: relative; overflow: hidden;}
.d-card{position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 600ms ease; transition: opacity 600ms ease;}
.d-card[data-uri]{opacity: 0;}
.d-card[data-uri].loaded{opacity: 1;}
.d-card>div{position: relative; height: 100%; background: rgba(0,0,0,0.3);}
.d-card>div:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);}
.d-data{position: relative; z-index: 6; display: table; width: 100%; max-width: 1200px; margin: 0 auto; padding: 30vh 0 20vh 0; -webkit-box-sizing: content-box; box-sizing: content-box;}
.d-data>div{display: table-row;}
.d-data>div>div{display: table-cell; vertical-align: top; padding: 0 20px;}
.d-data>div>div:nth-child(1){width: 30%;}
.d-data>div>div:nth-child(2){width: 70%;}
.d-data h2{margin-top: 0;}
.d-data div.video{margin-bottom: 40px;}
.d-data div.about{margin-bottom: 10px;}
.d-data div.about span{display: block; font-size: 1.4em; line-height: 1.4em; font-weight: 300;}
.d-data div.about span strong{font-weight: 600;}
.d-data div.about ul{margin: 1.4rem 0; padding: 0;}
.d-data div.about ul>li{display: table; margin: 0 0 10px 0; padding: 8px 14px; background: var(--white); -webkit-border-radius: 100px; border-radius: 100px; font-size: 1.2em; line-height: 1.2em; font-weight: 400; color: var(--black);}
.d-data span.credits{color: #999; font-style: italic;}
.d-data span.credits strong{font-weight: 600;}
.dock-node .d-data{max-width: 1340px; padding-bottom: 0;}
.dock-node .d-data>div>div:nth-child(1){width: 25%;}
.dock-node .d-data>div>div:nth-child(2){width: 75%;}
.dock-node .d-card{height: 100%; max-height: 100vh;}
.dock-node .d-card>div{background: rgba(19,19,19,0.5);}
.dock-node .d-card>div:before{background: linear-gradient(0deg, rgba(19,19,19,1) 0%, rgba(19,19,19,0) 80%);}
@media all and (max-width: 900px){
.d-data{display: block;}
.d-data>div{display: block;}
.d-data>div>div{display: block; width: auto !important;}
.d-data div.about-box{display: table;}
.d-data div.about-box>.about{display: table-cell; vertical-align: top; padding: 0 40px 40px 0;}
.d-data div.about-box>.about.tags{display: table-row;}
.d-data div.about ul{margin: 0; padding: 0;}
.d-data div.about ul>li{display: inline-block; margin: 0 6px 6px 0;}
}



/* instagram */



.block-insta{padding: 2rem 0;}
.block-insta.hue-1 .nav-flow{background: var(--grey-dark) !important;}
.block-insta.hue-3 .nav-flow>span{background: var(--uu) !important;}
.block-insta .static-container{margin: 0 -20px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-insta .swiper-wrapper{margin: 0 -20px;}
.block-insta .swiper-wrapper .swiper-slide{width: 30%; min-width: 300px;}
.block-insta .swiper-slide{display: inline-block; width: 33.33%;}
.block-insta .swiper-slide a>div{padding-bottom: 100%;}
@media all and (max-width:1200px){
.block-insta .static-container .swiper-slide{width: 33.33%;}
}
@media all and (max-width: 900px){
.block-insta .static-container .swiper-slide{width: 50%;}
}
@media all and (max-width: 600px){
.block-insta .static-container .swiper-slide{width: 100%;}
}



/* block videos */



.video-filter{margin: 0 0 40px 0; text-align: center;}
.video-filter>a{display: inline-block; margin: 0 15px 20px 15px; font-size: 5.0em; line-height: 1.0em; font-weight: 800; text-transform: uppercase; color: var(--white); -webkit-user-select: none; user-select: none;}
.video-filter>a:not(.on){-webkit-text-stroke-width: .02em; -webkit-text-stroke-color: var(--grey-dark); -webkit-text-fill-color: transparent; -webkit-transition: -webkit-text-stroke-color 120ms ease; transition: -webkit-text-stroke-color 120ms ease;}
.video-filter>a:not(.on):hover{-webkit-text-stroke-color: var(--white);}
.hue-2 .video-filter>a{color: var(--black);}
.hue-2 .video-filter>a:not(.on){-webkit-text-stroke-color: var(--grey-dark);}
.hue-2 .video-filter>a:not(.on):hover{-webkit-text-stroke-color: var(--black);}
.block-video{padding: 4rem 0;}
.block-video h1{margin-top: 0; color: var(--white); -webkit-text-stroke-color: var(--white);}
.block-video.hue-2 h1,.block-video.hue-3 h1{color: var(--black); -webkit-text-stroke-color: var(--black);}
.block-video.hue-3 .band-border{border-color: var(--black); border-width: 2px;}
.block-video.hue-1 .nav-flow{background: var(--grey-dark) !important;}
.block-video.hue-3 .nav-flow>span{background: var(--uu) !important;}
.block-video .swiper-wrapper{margin: 0 -20px;}
.block-video .static-container{margin: 0 -20px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-video .swiper-slide{display: inline-block; width: 25%;}
.block-video .swiper-wrapper .swiper-slide{width: 27%; min-width: 300px;}
.block-video .swiper-wrapper .swiper-slide .core .name{font-size: 1.6em; line-height: 1.3em;}
.block-video .swiper-wrapper .swiper-slide .core .user{font-size: 1.2em; line-height: 1.3em;}
@media all and (max-width:1200px){
.block-video .static-container .swiper-slide{width: 33.33%;}
}
@media all and (max-width: 900px){
.block-video .static-container .swiper-slide{width: 50%;}
}
@media all and (max-width: 600px){
.block-video .static-container .swiper-slide{width: 100%;}
.block-video .static-container .swiper-slide a>div{padding-bottom: 0;}
.block-video .static-container .swiper-slide a>div>div{position: relative;}
.block-video .static-container .swiper-slide .core{padding-top: 200px;}
}



/* block event */



.event-filter{margin: 0 0 40px 0; text-align: center;}
.event-filter>a{display: inline-block; margin: 0 15px 15px 15px; font-size: 3.4em; line-height: 1.0em; font-weight: 800; text-transform: uppercase; color: var(--white); -webkit-user-select: none; user-select: none;}
.event-filter>a:not(.on){-webkit-text-stroke-width: .03em; -webkit-text-stroke-color: var(--grey-dark); -webkit-text-fill-color: transparent; -webkit-transition: -webkit-text-stroke-color 120ms ease; transition: -webkit-text-stroke-color 120ms ease;}
.event-filter>a:not(.on):hover{-webkit-text-stroke-color: var(--white);}
.event-filter>a.has-none{display: none !important;}
.hue-2 .event-filter>a{color: var(--black);}
.hue-2 .event-filter>a:not(.on){-webkit-text-stroke-color: var(--white);}
.hue-2 .event-filter>a:not(.on):hover{-webkit-text-stroke-color: var(--black);}
.block-event{padding: 4rem 0;}
.block-event h1{margin-top: 0; color: var(--white); -webkit-text-stroke-color: var(--white);}
.block-event.hue-2 h1,.block-event.hue-3 h1{color: var(--black); -webkit-text-stroke-color: var(--black);}
.block-event.hue-3 .band-border{border-color: var(--black); border-width: 2px;}
.block-event.hue-1 .nav-flow{background: var(--grey-dark) !important;}
.block-event.hue-3 .nav-flow>span{background: var(--uu) !important;}
.block-event .static-container{margin: 0 -20px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-event .swiper-wrapper{margin: 0 -20px;}
.block-event .swiper-wrapper .swiper-slide{width: 32%; min-width: 300px;}
.block-event .swiper-slide{display: inline-block; width: 33.33%;}
.block-event .swiper-slide a>div{height: 100%; padding-bottom: 100%; background-color: var(--black);}
.block-event .swiper-slide a>div>div{background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 64%);}
.block-event .swiper-slide a .love-icon{position: absolute; z-index: 6; top: 20px; left: 20px; display: block; width: 40px; height: 40px; background-image: url(../icon/loved.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; -webkit-transform: scale(0,0); transform: scale(0,0); opacity: 0; -webkit-transition: transform 120ms ease, opacity 120ms ease; transition: transform 120ms ease, opacity 120ms ease;}
.block-event .swiper-slide a.loved .love-icon{-webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1;}
.block-event .swiper-slide .core>div{vertical-align: bottom;}
.block-event .swiper-slide .core .name{font-size: 2.0em; line-height: 1.2em; font-weight: 700; text-transform: uppercase;}
.block-event .swiper-slide .core .user{font-size: 1.8em; line-height: 1.4em; max-width: 90%; margin-bottom: 8px;}
@media all and (max-width:1000px){
.block-event .static-container .swiper-slide{width: 50%;}
}
@media all and (max-width: 700px){
.block-event .static-container .swiper-slide{width: 100%;}
.block-event .static-container .swiper-slide a>div{padding-bottom: 0;}
.block-event .static-container .swiper-slide a>div>div{position: relative;}
.block-event .static-container .swiper-slide .core{padding-top: 200px;}
}
@media all and (max-width: 700px){
.event-filter>a{font-size: 2.4em;}
}



/* block event reel */



.block-reel{position: relative; background: var(--black);}
.block-reel .reel-card{position: absolute; z-index: 2; display: none; width: 100%; top: 0; left: 0; bottom: 0;}
.block-reel .reel-card>div{position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden;}
.block-reel .reel-card>div>div{position: relative; width: 100%; height: 100%;}
.block-reel .reel-card .scene{z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-animation: merge-end 400ms ease 0s forwards; animation: merge-end 400ms ease 0s forwards;}
.block-reel .reel-card .scene.on{z-index: 4; -webkit-animation: merge-ini 300ms ease 0s forwards; animation: merge-ini 300ms ease 0s forwards;}
.block-reel .reel-core{position: relative; z-index: 4; padding: 3rem 0; padding-bottom: 4rem; background: rgba(0,0,0,0.4);}
.block-reel .reel>a{display: block; text-decoration: none; color: var(--white); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.block-reel .reel>a>div{padding: 5rem 3rem; background: rgba(0,0,0,0.6);}
.block-reel .reel>a span{display: block;}
.block-reel .reel>a span.name{max-width: 700px; margin: 0 auto; font-size: 4.0em; line-height: 1.0em; font-weight: 800; text-transform: uppercase; text-align: center;}
.block-reel .reel>a span.name-sub{margin-top: 20px; font-size: 1.6em; line-height: 1.4em; text-align: center; opacity: 0.8;}
.block-reel .reel>a:hover span.name{text-decoration: underline;}
.block-reel .btn-more{margin-top: 40px; padding: 20px 40px; background: var(--white); border: none; color: var(--black); font-size: 1.6em;}
.block-reel .btn-more:hover{background: var(--black); color: var(--white);}
@-webkit-keyframes merge-ini{
0%{opacity: 0;} 100%{opacity: 1;}
}
@-webkit-keyframes merge-end{
0%{opacity: 1;} 100%{opacity: 0;}
}
@keyframes merge-ini{
0%{opacity: 0;} 100%{opacity: 1;}
}
@keyframes merge-end{
0%{opacity: 1;} 100%{opacity: 0;}
}
@media all and (min-width: 900px){
.block-reel .reel>a span.name{font-size: 3.5em;}
}
@media all and (min-width: 800px){
.block-reel .reel-card{display: block;}
.block-reel .reel>a{background: none !important;}
.block-reel .reel>a>div{background: none !important;}
}
@media all and (max-width: 600px){
.block-reel .reel>a span.name{font-size: 3.0em;}
.block-reel .btn-more{padding: 14px 34px; font-size: 1.2em; line-height: 1.2em;}
}



/* block event orb */



.block-orb{padding: 3rem 0;}
.block-orb .orb-series{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-orb .orb{display: inline-block; width: 50%;}
.block-orb .orb:nth-child(even){margin-top: 8rem;}
.block-orb .orb>a{position: relative; display: block; padding: 30px; text-decoration: none; color: var(--white);}
.block-orb .orb>a div.head{position: relative; z-index: 6; max-width: 400px; margin: 0 auto; margin-bottom: -40px;}
.block-orb .orb>a div.head>div{position: relative; width: 100%; padding-bottom: 100%; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-transition: transform 120ms ease-out; transition: transform 120ms ease-out;}
.block-orb .orb>a div.head>div:before{content: ''; display: block; position: absolute; z-index: 4; top: 0; left: 0; right: 0; bottom: 0; -webkit-border-radius: 50%; border-radius: 50%; background: linear-gradient(0deg, rgba(19,19,19,0.5) 0%, rgba(19,19,19,0) 40%);}
.block-orb .orb>a div.head>div>div{position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0;}
.block-orb .orb>a div.head img{-webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: transform 120ms ease-out; transition: transform 120ms ease-out;}
.block-orb .orb>a div.core{position: relative; z-index: 8;}
.block-orb .orb>a span{display: block;}
.block-orb .orb>a span.name{max-width: 700px; margin: 0 auto; font-size: 4.0em; line-height: 1.0em; font-weight: 800; text-transform: uppercase; text-align: center; opacity: 0.9;}
.block-orb .orb>a span.name-sub{margin-top: 20px; font-size: 1.8em; line-height: 1.4em; text-align: center; opacity: 0.8;}
.block-orb .orb>a:hover div.head>div{-webkit-transform: scale(0.9,0.9); transform: scale(0.9,0.9);}
.block-orb .orb>a:hover div.head img{-webkit-transform: scale(1.2,1.2) rotate(2deg); transform: scale(1.2,1.2) rotate(2deg);}
.block-orb .orb>a:hover span.name{text-decoration: underline;}
.block-orb .btn-more{margin-top: 40px; padding: 20px 40px; background: var(--white); border: none; color: var(--black); font-size: 1.6em;}
.block-orb .btn-more:hover{background: var(--black); color: var(--white);}
@media all and (min-width: 900px){
.block-orb .orb>a span.name{font-size: 3.5em;}
}
@media all and (max-width: 600px){
.block-orb .orb{width: 100%; margin: 0 !important;}
.block-orb .orb>a span.name{font-size: 3.0em;}
.block-orb .btn-more{padding: 14px 34px; font-size: 1.2em; line-height: 1.2em;}
}



/* block text */



.pad-u{padding-top: 3rem;}
.pad-d{padding-bottom: 3rem;}
.block-ck{padding-left: 20px; padding-right: 20px; overflow: hidden; text-align: center;}
.block-ck p,.block-ck h3,.block-ck h4,.block-ck ul{max-width: 720px; margin-left: auto; margin-right: auto; text-align: left;}
.block-ck *.rtecenter{text-align: center !important;}
.block-ck blockquote{margin: 0; padding: 0;}
.block-ck blockquote p{padding-left: 20px; border-left: 2px solid var(--black); font-weight: 300; color: var(--grey);}
.block-ck.hue-2 p,.block-ck.hue-2 h2,.block-ck.hue-2 h3,.block-ck.hue-2 h4,.block-ck.hue-2 ul,
.block-ck.hue-3 p,.block-ck.hue-3 h2,.block-ck.hue-3 h3,.block-ck.hue-3 h4,.block-ck.hue-3 ul,
.block-ck.hue-4 p,.block-ck.hue-4 h2,.block-ck.hue-4 h3,.block-ck.hue-4 h4,.block-ck.hue-4 ul,
.block-ck.hue-5 p,.block-ck.hue-5 h2,.block-ck.hue-5 h3,.block-ck.hue-5 h4,.block-ck.hue-5 ul,
.block-ck.hue-7 p,.block-ck.hue-7 h2,.block-ck.hue-7 h3,.block-ck.hue-7 h4,.block-ck.hue-7 ul{color: var(--black);}
.block-ck.hue-1 blockquote p{border-color: var(--uu);}
.block-ck ul{margin: 2rem auto; padding: 0; list-style: disc; list-style-position: inside;}
.block-ck ul>li{font-size: 1.4em; line-height: 1.4em; font-weight: 400;}
.block-ck a.a-btn{display: table; margin: 1.8rem 0; padding: 20px 64px 20px 30px; background-color: #fff !important; background-image: url(../icon/arrow.svg); background-repeat: no-repeat; background-position: right 30px center; background-size: 24px auto; -webkit-border-radius: 100px; border-radius: 100px; color: #000; line-height: 1.2em; text-decoration: none; -webkit-transition: background-position 120ms ease; transition: background-position 120ms ease;}
.block-ck a.a-btn:hover{background-position: right 20px center; text-decoration: underline;}
.block-ck>div.has-photo{max-width: 1300px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center;}
.block-ck>div.has-photo>div{display: inline-block; width: 50%;}
.block-ck>div.has-photo>div img{margin: 1.8rem 0;}
.block-ck>div.has-photo.photo-round>div img{-webkit-border-radius: 50%; border-radius: 50%;}
.block-ck>div.has-photo>div:nth-child(1){padding: 0 20px 0 0;}
.block-ck>div.has-photo>div:nth-child(2){padding: 0 0 0 20px;}
.block-ck>div.has-photo.posx-1{-webkit-flex-direction: row-reverse; flex-direction: row-reverse;}
.block-ck>div.has-photo.posx-1>div:nth-child(1){padding: 0 0 0 20px;}
.block-ck>div.has-photo.posx-1>div:nth-child(2){padding: 0 20px 0 0;}
@media all and (max-width: 900px){
.block-ck>div.has-photo{display: block;}
.block-ck>div.has-photo>div{display: block; width: auto !important; max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 !important;}
}



/* block marquee */



.block-marquee{position: relative; height: 20vw; overflow: hidden;}
.block-marquee .marq-trn{position: absolute; z-index: 4; top: 50%; left: 0; width: 100%; height: 100%; background: var(--black);}
.block-marquee .marq-box{position: absolute; z-index: 6; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.block-marquee .marq{width: 110vw; margin-left: -5vw; background: var(--black); -webkit-transform: rotate(4deg); transform: rotate(4deg);}
.block-marquee .marq h1{display: inline-block; margin: 0; padding: 0.05em 0.5em; color: var(--uu); -webkit-text-stroke-color: var(--uu); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: .025em;}
.block-marquee .marq>div{display: block; white-space: nowrap;}
.block-marquee.hue-1 .marq-trn{background: var(--uu);}
.block-marquee.deg-1 .marq{-webkit-transform: rotate(-4deg); transform: rotate(-4deg);}
.block-marquee.hue-1 .marq{background: var(--uu);}
.block-marquee.hue-1 .marq h1{color: var(--black); -webkit-text-stroke-color: var(--black);}
.block-marquee.trn-1 .marq h1{padding-top: 0.15em;}
@media all and (max-width: 900px){
.block-marquee{height: 30vw;}
}
@media all and (max-width: 600px){
.block-marquee{height: 44vw;}
}



/* block media */



.block-media{padding: 3rem 20px;}
.block-media .video-screen{max-width: 720px; margin: 0 auto;}
.block-media .video-screen>div{position: relative; width: 100%; padding-bottom: 56.25%;}
.block-media .video-screen>div>div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000;}
.block-media .video-screen>div>div>iframe{width: 100% !important; height: 100% !important; border: none;}
.block-media .photo-screen{max-width: 720px; margin: 0 auto;}
.block-media .photo-screen>img{display: block; margin: 0 auto;}
.block-media .caption{max-width: 720px; margin: 0 auto; padding-top: 16px; font-size: 0.9em; line-height: 1.4em; color: var(--grey);}
.block-cdn{padding: 2rem 20px;}
.block-cdn>div{max-width: 720px; margin: 0 auto;}
.block-cdn a{display: inline-block; min-width: 300px; margin: 6px; margin-left: 0; padding: 1em; padding-right: 3.5em; background-color: var(--white); background-image: url(../icon/arrow.svg); background-repeat: no-repeat; background-size: 1.2em auto; background-position: right 1.5em center; -webkit-border-radius: 4px; border-radius: 4px; font-size: 1.4em; line-height: 1.3em; font-weight: 600; color: var(--black); text-decoration: none; -webkit-transition: background-position 120ms ease; transition: background-position 120ms ease;}
.block-cdn a>span{display: block;}
.block-cdn a>span.size{font-size: 0.9em; font-weight: 400; color: var(--grey-dark);}
.block-cdn a:hover{background-position: right 1em center;}
.block-cdn a:hover>span.name{text-decoration: underline;}
@media all and (max-width: 900px){
.block-cdn a{min-width: 0; font-size: 1.2em; line-height: 1.3em;}
}



/* block photo album */



.block-album{padding: 3rem 0; background: var(--black);}
.block-album .btn-more{margin-top: 40px; padding: 20px 40px; background: var(--white); border: none; color: var(--black); font-size: 1.6em;}
.album-grid{margin: 0 -20px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.album-grid>div{display: inline-block; width: 50%; padding: 20px;}
.album-grid.grid3>div{width: 33.33%;}
.album-grid a{display: block; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.album-grid a img{-webkit-border-radius: 4px; border-radius: 4px;}
.album-grid a:hover{opacity: 0.8;}
.album-show{position: relative;}
.album-show .nav{top: 50%; right: 25px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.album-show .nav.prev{left: 25px; -webkit-transform: scaleX(-1) translateY(-50%); transform: scaleX(-1) translateY(-50%);}
.album-show .swiper-slide{max-width: 500px; padding-left: 0;}
.album-show .swiper-slide a{-webkit-border-radius: 0; border-radius: 0; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.album-show .swiper-slide a img{-webkit-border-radius: 4px; border-radius: 4px;}
.album-show .swiper-slide a:hover{opacity: 0.8;}
@media all and (max-width: 900px){
.album-grid.grid3>div{width: 50%;}
.album-show{margin: 0 -20px;}
.album-show .swiper-slide{max-width: 360px; padding: 20px !important;}
}



/* photo zoom */



.zoomer{z-index: 900; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 200ms ease, visibility 0s linear 200ms; transition: opacity 200ms ease, visibility 0s linear 200ms; opacity: 0; visibility: hidden;}
.zoomed .zoomer{-webkit-transition: opacity 200ms ease, visibility 0s linear; transition: opacity 200ms ease, visibility 0s linear; opacity: 1; visibility: visible;}
.zoomer>div{position: relative; z-index: 4; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;}
.zoomer>div::-webkit-scrollbar{width: 0px; background: transparent;}
.zoomer .spin{position: absolute; z-index: 6; top: 50%; left: 50%;}
.zoomer .zoom-box{position: relative; display: grid; height: 100%;}
.zoomer .zoom-box img{position: relative; z-index: 2; max-width: 100%; max-height: 100vh; margin: auto; opacity: 0; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
.zoomer .zoom-box img.loaded{opacity: 1;}
.zoomer .zoom-str{position: absolute; z-index: 4; left: 20px; bottom: 20px; padding: 8px 12px; background: #000; -webkit-border-radius: 4px; border-radius: 4px; line-height: 1.0em; color: #999; font-style: italic;}
.zoomer .zoom-end{position: absolute; z-index: 6; top: 30px; left: 60px; display: block; width: 60px; height: 60px; background-color: #000; background-image: url(../icon/close.svg); background-repeat: no-repeat; background-position: center center; background-size: 50% auto; border: 3px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.zoomer .zoom-end:hover{opacity: 0.6;}
.logged-in .zoomer .zoom-end{top: 60px;}
@media (max-width: 1200px){
.zoomer .zoom-end{top: 20px; left: 20px;}
.logged-in .zoomer .zoom-end{top: 50px;}
}



/* block subscribe */



.block-subscribe{padding: 2rem 0;}
.block-subscribe div.form-embed{padding: 0 20px;}
.block-subscribe div.form-embed>div{max-width: 1000px; margin: 0 auto; border: 2px solid var(--uu); overflow: hidden;}
.block-subscribe div.form-embed iframe{display: block;}
.block-subscribe form{max-width: 720px; margin: 0 auto; padding: 40px; background: var(--uu); color: var(--black);}
.block-subscribe form label{display: block; margin-bottom: 8px; font-size: 1.1em; font-weight: 600;}
.block-subscribe form input[type=text],.block-subscribe form input[type=email]{width: 100%; margin: 0; margin-bottom: 20px; padding: 12px 24px; background: transparent; border: 3px solid var(--black); -webkit-border-radius: 100px; border-radius: 100px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: var(--black);}
.block-subscribe form input[type=text]:focus,.block-subscribe form input[type=email]:focus{background: var(--white); color: var(--black);}
.block-subscribe form input[type=submit]{margin: 8px 0 24px 0; padding: 20px 40px; border: none; -webkit-border-radius: 100px; border-radius: 100px; background: var(--black); font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: var(--uu); cursor: pointer;}
.block-subscribe form input[type=submit]:hover{text-decoration: underline;}



/* block grid */



.love-switch{display: table; margin: 0 auto 44px auto; cursor: pointer; -webkit-user-select: none; user-select: none;}
.love-switch>div{display: table-cell; vertical-align: middle; font-size: 1.5em; line-height: 1.4em;}
.love-switch div.switch{width: 56px; height: 32px; margin-right: 14px; border: 4px solid #666; background: #666; -webkit-border-radius: 100px; border-radius: 100px; -webkit-transition: background 120ms ease, border-color 120ms ease; transition: background 120ms ease, border-color 120ms ease;}
.love-switch div.switch>div{width: 24px; height: 24px; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: transform 120ms ease; transition: transform 120ms ease;}
.love-switch span{display: inline-block; min-width: 2rem; height: 2rem; line-height: 2rem; margin-left: 10px; padding: 0 8px; background: #555; -webkit-border-radius: 100px; border-radius: 100px; font-size: 0.8em; color: #fff; text-align: center;}
.love-switch.active{color: #fff;}
.love-switch.active .switch{background: var(--green); border-color: var(--green);}
.love-switch.active .switch>div{-webkit-transform: translateX(100%); transform: translateX(100%);}
.block-grid{margin: 3rem 0;}
.block-grid>div{position: relative;}
.grid.dragscroll{overflow: scroll; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -webkit-user-select: none; user-select: none; cursor: move; scrollbar-width: none;}
.grid.dragscroll::-webkit-scrollbar{width: 0px; height: 0px; background: transparent;}
.grid .grid-data{position: relative; padding-top: 60px;}
.grid .grid-live{position: absolute; z-index: 8; top: 0; left: -1px; width: 1px; height: 100%; background: #f00; pointer-events: none;}
.grid .grid-hour{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; pointer-events: none;}
.grid .grid-hour>div{position: relative; height: 100%;}
.grid .grid-hour>div:not(:first-child){border-left: 1px solid #666;}
.grid .grid-hour span{display: inline-block; padding: 10px 15px; font-size: 1.6em; line-height: 1.0em; font-weight: 600; color: #fff;}
.grid .venue{position: relative; background: #222;}
.grid .venue:nth-child(even){background: #333;}
.grid .venue-row{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.grid .venue-str{position: absolute; z-index: 6; top: 0; left: 0; width: 100%; pointer-events: none;}
.grid .venue-str>div{position: relative; padding: 10px 15px;}
.grid .venue-str>div>div{position: sticky; left: 10px; display: inline-block; padding: 10px; background: #fff; color: var(--black); font-size: 1.2em; line-height: 1.0em; font-weight: 600;}
.fev{position: relative; z-index: 4; display: inline-block; color: var(--black); text-decoration: none;}
.fev:not(.mass-x){min-height: 100px;}
.fev div.a{position: relative; z-index: 2; height: 100%; border-right: 2px solid #222; border-bottom: 2px solid #222;}
.fev div.a>div{display: inline-block; padding: 10px; font-family: 'Roboto', sans-serif; font-size: 13px !important; line-height: 1.3em;}
.fev div.b{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%); clip-path: polygon(0% 100%, 100% 0%, 100% 100%);}
.fev span.name{font-weight: 500;}
.fev.mass-x div.a>div{position: sticky; left: 0;}
.fev.mass-x div.b{display: none;}
.fev:not(.mass-x) span.head{display: block; margin-top: 2px;}
.fev:hover span.name{text-decoration: underline;}
.fev.move:before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 20px; height: calc(100% - 2px); background-color: inherit; -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%); -webkit-transform: translateX(-98%); transform: translateX(-98%);}
.grid.love-on .fev:not(.loved){opacity: 0.2;}
@media all and (max-width: 900px){
.grid .venue-str{position: relative;}
.grid .venue-str>div{padding: 0; background: #fff;}
.grid .venue-str>div>div{left: 0;}
}



/* next up */



.block-nextup{margin: 8rem 0;}
.block-nextup>div{max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.block-nextup .pop{display: block; text-decoration: none; color: #fff;}
.block-nextup .pop>div{margin: 40px 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-nextup .pop>div>div{display: inline-block;}
.block-nextup .pop>div>div:nth-child(1){width: 15%;}
.block-nextup .pop>div>div:nth-child(2){width: 85%; padding-left: 24px;}
.block-nextup .pop .core{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch;}
.block-nextup .pop .core>div{display: inline-block;}
.block-nextup .pop .core>div:nth-child(1){width: 70%;}
.block-nextup .pop .core>div:nth-child(2){width: 30%; text-align: right;}
.block-nextup .pop .h1{display: block; margin-bottom: 6px; font-size: 2.4em; font-weight: 700; line-height: 1.1em; text-transform: uppercase;}
.block-nextup .pop .h2{display: block; margin-bottom: 6px; font-size: 2.2em; font-weight: 300; line-height: 1.1em; text-transform: uppercase;}
.block-nextup .pop .h3{display: block; margin-bottom: 6px; font-size: 1.6em; font-weight: 300; line-height: 1.2em; color: #aaa;}
.block-nextup .pop .h4{display: inline-block; padding: 8px 10px; background: #fff; -webkit-border-radius: 100px; border-radius: 100px; font-weight: 600; color: var(--black);}
.block-nextup .pop .h1>span{font-weight: 800;}
.refresh{display: block; width: 70px; height: 70px; margin: 0 auto; background-image: url(../icon/refresh.svg); background-repeat: no-repeat; background-size: 50% auto; background-position: center center;}
.refresh>div{width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; border: 4px solid rgba(255,255,255,0.4); border-top: 4px solid #fff;}
.refresh.on>div{-webkit-animation: rotate 1.2s infinite cubic-bezier(0.8,0.4,0.4,0.8); animation: rotate 1.2s infinite cubic-bezier(0.8,0.4,0.4,0.8);}
@media all and (max-width: 600px){
.block-nextup .pop .core>div{display: block; width: 100% !important; text-align: left !important;}
.block-nextup .pop .h4{margin-top: 12px;}
}



/* podcast */



.podcast-btn{margin: 20px -12px 0 0; overflow: hidden;}
.podcast-btn>div{display: inline-block; float: left; width: 20%; min-width: 180px; padding: 0 12px 12px 0;}
.podcast-btn>div>a{display: block; padding: 16px 20px 16px 60px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #fff; background-repeat: no-repeat; background-size: 30px auto; background-position: 20px center; font-size: 1.2em; line-height: 1.2em; font-weight: 600; color: var(--black);}
.podcast-btn>div>a:hover{text-decoration: underline;}
.podcast-btn>div>a.not-known{padding-left: 20px;}
.podcast-btn>div>a.cast-1{background-image: url(../icon/podcast-1.svg);}
.podcast-btn>div>a.cast-2{background-image: url(../icon/podcast-2.svg);}
.podcast-btn>div>a.cast-3{background-image: url(../icon/podcast-3.svg);}
.podcast-btn>div>a.cast-4{background-image: url(../icon/podcast-4.svg);}



/* misc blocks */



.hue-1{background: var(--black);}
.hue-2{background: var(--uu);}
.hue-3{background: var(--white);}
.hue-4{background: var(--red);}
.hue-5{background: var(--blue);}
.hue-6{background: var(--2022-blue);}
.hue-7{background: var(--2022-purple);}
.hue-1 .btn-more{border: 3px solid var(--uu); background: var(--uu); color: var(--black);}
.hue-1 .btn-more:hover{color: var(--uu);}
.calendar{display: table; margin: 0 auto; overflow: hidden;}
.calendar>div{display: table-cell; padding: 8px 4px; vertical-align: middle;}
.calendar>div>span{display: inline-block; font-size: 2.0em; font-weight: 600; color: var(--black);}
.cal{display: inline-block; float: left; width: 55px; height: 55px; margin: 4px; background-repeat: no-repeat; background-position: center center; background-size: auto 50%; background-color: var(--black); -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
.cal:hover{opacity: 0.8;}
.cal.cal-1{background-image: url(../icon/cal-1.svg);}
.cal.cal-2{background-image: url(../icon/cal-2.svg);}
.cal.cal-3{background-image: url(../icon/cal-3.svg);}
.block-countdown{padding: 8rem 0; -webkit-user-select: none; user-select: none; overflow: hidden;}
.block-countdown .timer{display: table; margin: 0 auto;}
.block-countdown .timer>div{display: table-cell; vertical-align: baseline; font-size: 4.0em; font-weight: 800; line-height: 1.0em; text-transform: uppercase; color: var(--black);}
.block-countdown .timer>div.date{font-size: 8.0em; line-height: 1.0em; font-weight: 800; padding: 0 0.5rem 0 1.0rem; -webkit-text-stroke-width: .02em; -webkit-text-stroke-color: var(--black); -webkit-text-fill-color: transparent;}
.block-countdown.hue-1 .timer>div{color: var(--uu);}
.block-countdown.hue-1 .timer>div.date{-webkit-text-stroke-color: var(--uu);}
.block-countdown.hue-1 .calendar>div>span{color: var(--white);}
.block-btn{padding-left: 20px; padding-right: 20px; overflow: hidden;}
.block-btn>div{padding-top: 1.0rem; padding-bottom: 1.0rem;}
.block-btn a{display: inline-block; margin: 6px 6px 6px 0; padding: 1em; padding-right: 3.5em; background-color: var(--black); background-image: url(../icon/arrow-w.svg); background-repeat: no-repeat; background-size: 1.2em auto; background-position: right 1.5em center; -webkit-border-radius: 4px; border-radius: 4px; font-size: 1.4em; line-height: 1.2em; font-weight: 600; color: var(--white); text-decoration: none; -webkit-transition: background-position 120ms ease; transition: background-position 120ms ease;}
.block-btn a:hover{background-position: right 1em center;}
.block-btn a.icon{background-color: var(--white); background-image: url(../icon/arrow.svg); color: var(--black);}
.block-btn a.icon>div{padding-left: 1.5em; background-repeat: no-repeat; background-position: left center; background-size: auto 100%;}
.block-btn a.icon>div.icon-1{background-image: url(../icon/icon-1.svg);}
.block-btn a.icon>div.icon-2{background-image: url(../icon/icon-2.svg);}
.block-btn a.icon>div.icon-3{background-image: url(../icon/icon-3.svg);}
.block-btn a.icon>div.icon-4{background-image: url(../icon/icon-4.svg);}
.block-btn a.icon>div.icon-5{background-image: url(../icon/icon-5.svg);}
.block-btn.hue-1 a:not(.icon){background-color: var(--uu); background-image: url(../icon/arrow.svg); color: var(--black);}
.node-type-edition .block-btn{text-align: center;}
.node-type-edition .block-btn a{margin: 6px;}
@media all and (max-width: 900px){
.cal{width: 40px; height: 40px;}
.block-countdown .timer>div{font-size: 3.0em;}
.block-countdown .timer>div.date{font-size: 4.0em; -webkit-text-stroke-width: .04em;}
}
@media all and (max-width: 600px){
.block-countdown .timer>div{font-size: 1.8em;}
.block-countdown .timer>div.date{font-size: 2.8em;}
.block-btn a{font-size: 1.1em;}
}



/* blocks in dock */



.d-data .block-ck{padding: 0 !important; background: none !important;}
.d-data .block-ck p,.d-data .block-ck h3,.d-data .block-ck h4,.d-data .block-ck ul{margin-left: 0;}
.d-data .block-ck p{font-weight: 400;}
.d-data .block-media{margin: 2.4rem 0; padding: 0 !important;}
.d-data .block-media .video-screen,.d-data .block-media .photo-screen,.d-data .block-media .caption{margin-left: 0;}
.d-data .block-cdn{margin: 2.4rem 0; padding: 0 !important;}
.d-data .block-cdn>div{margin-left: 0;}



/* user form */



.not-logged-in.section-user form{margin: 0; padding: 120px 0 2rem 0; overflow: hidden;}
.page-user .profile{display: none;}
.user-form{max-width: 540px; margin: 0 auto; padding: 40px; background: var(--uu); -webkit-border-radius: 6px; border-radius: 6px; text-align: center; color: var(--black);}
.user-form h3{margin-top: 0;}
.user-form div.form-item{margin: 0 0 20px 0;}
.user-form div.description,.user-form span.form-required{display: none;}
.user-form label{display: block; margin-bottom: 8px; font-size: 1.1em; font-weight: 600;}
.user-form input[type=text],.user-form input[type=password]{width: 100%; margin: 0; padding: 12px 24px; background: transparent; border: 3px solid var(--black); -webkit-border-radius: 100px; border-radius: 100px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: var(--black);}
.user-form input[type=text]:focus,.user-form input[type=password]:focus{background: var(--white); color: var(--black);}
.user-form input.error{border-color: var(--red) !important;}
.user-form input[type=submit]{margin: 8px 0 24px 0; padding: 20px 40px; border: none; -webkit-border-radius: 100px; border-radius: 100px; background: var(--black); font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: var(--uu); cursor: pointer;}
.user-form input[type=submit]:hover{text-decoration: underline;}
.user-form a.form-a{color: var(--black); text-decoration: underline;}
.user-home{padding: 120px 0 2rem 0; overflow: hidden;}
.user-home h3{margin-top: 0;}
.user-home a.user-a{display: inline-block; margin: 0 10px 10px 0; padding: 12px 24px; border: 2px solid var(--white); -webkit-border-radius: 100px; border-radius: 100px; font-size: 1.2em; line-height: 1.2em; font-weight: 600; color: var(--white);}
.user-home a.user-a:hover{background: var(--white); color: var(--black);}
.user-side{display: table; width: 100%; table-layout: fixed;}
.user-side>div{display: table-cell; vertical-align: top;}
.user-side>div:nth-child(1){padding: 0 20px 0 0;}
.user-side a.list{display: block; padding: 10px 0; border-top: 1px solid #666; color: var(--white);}
.user-side a.list span{display: block;}
.user-side a.list span.name{margin-bottom: 4px; font-size: 1.2em;}
.user-side a.list span.meta{color: #aaa;}
.user-side a.list:hover span.name{text-decoration: underline;}
@media all and (max-width: 900px){
.user-form{padding: 40px 20px;}
.user-side{display: block;}
.user-side>div{display: block;}
.user-side>div:nth-child(1){padding: 0 0 20px 0;}
}



/* cookie bar */



#sliding-popup{background: #222;}
#sliding-popup .eu-cookie-withdraw-tab{top: -20px; left: auto; right: 20px; display: block; width: 50px; height: 50px; background-color: var(--black) !important; background-image: url(../icon/cookie.svg) !important; background-repeat: no-repeat; background-position: center center; background-size: 60% auto; border: none !important; outline: none !important; -webkit-appearance: none; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: translateY(-100%); transform: translateY(-100%); text-indent: -1000em;}
#sliding-popup .eu-cookie-withdraw-tab:hover{background-color: var(--uu) !important;}
#sliding-popup>div{width: 100%; height: 100%;}
#sliding-popup .popup-content{display: table; width: auto !important; max-width: none !important; height: 100%; margin: 0 auto;}
#sliding-popup .popup-content>div{display: table-cell; padding: 0 20px; vertical-align: middle; float: none !important; max-width: none !important; margin: 0 !important;}
#sliding-popup .popup-content #popup-text p{font-size: 1.0em; line-height: 1.5; font-weight: 400;}
#sliding-popup .popup-content #popup-text p a{color: #bbb; text-decoration: underline;}
#sliding-popup .popup-content #popup-text p a:hover{color: #fff;}
#sliding-popup .popup-content #popup-text button{display: table; background: transparent !important; border: none !important; -webkit-border-radius: 0px !important; border-radius: 0px !important; outline: none !important; -webkit-appearance: none; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 1.0em; line-height: 1.5; font-weight: 400; color: #bbb; text-decoration: underline; text-align: left;}
#sliding-popup .popup-content #popup-text button:hover{color: #fff;}
#sliding-popup .popup-content #popup-text button:focus{outline: none !important; top: 0 !important;}
#sliding-popup .popup-content #popup-buttons{text-align: right;}
#sliding-popup .popup-content #popup-buttons button{background: #fff !important; border: none !important; -webkit-border-radius: 2px !important; border-radius: 2px !important; outline: none !important; -webkit-appearance: none; margin: 6px; padding: 12px 16px; font-family: 'Open Sans', sans-serif; font-size: 1.0em; line-height: 1.0em; font-weight: 600; box-shadow: none; text-shadow: none;}
#sliding-popup .popup-content #popup-buttons button.agree-button{background: var(--uu) !important;}
#sliding-popup .popup-content #popup-buttons button:hover{text-decoration: underline !important;}
#sliding-popup .popup-content #popup-buttons button:focus{outline: none !important; top: 0 !important;}
@media all and (max-width: 600px){
#sliding-popup .popup-content>div{padding: 0 10px;}
#sliding-popup .popup-content #popup-buttons button{margin: 4px; padding: 8px 10px;}
}



/* echo data */



.view-echo .view-content{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; max-width: 1300px; margin: 0 auto; padding: 6rem 0; -webkit-box-sizing: content-box;box-sizing: content-box;}
.echo{display: inline-block; width: 50%; padding: 30px 20px;}
@media all and (max-width: 900px){
.echo{display: block; width: 100%;}
}



/* misc */



.tab-bar{background: var(--uu); -webkit-user-select: none; user-select: none;}
.tab-bar>div{display: table; margin: 0 auto;}
.tab-bar>div>div{display: table-cell; padding: 20px 10px; vertical-align: middle; color: var(--black);}
.tab-bar ul{margin: 0; padding: 0; list-style: none;}
.tab-bar ul>li{display: inline-block;}
.tab-bar ul>li>a{display: block; margin: 0 4px; padding: 12px 24px; border: 3px solid var(--black); -webkit-border-radius: 100px; border-radius: 100px; font-size: 1.2em; line-height: 1.2em; font-weight: 600; color: var(--black);}
.tab-bar ul>li>a:hover{text-decoration: underline;}
.tab-bar ul>li>a:not(.is-active){background: var(--black); color: var(--uu);}
.msg-bar{z-index: 900; position: fixed; left: 0; right: 0; bottom: 0; background: var(--uu); -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
.msg-bar.hide{opacity: 0; pointer-events: none;}
.msg-bar>div{padding: 20px; text-align: center; color: var(--black);}
.msg-bar>div.status{background: var(--green);}
.msg-bar>div.messages--error{background: var(--red);}
.msg-bar ul{margin: 0; padding: 0;}
.msg-bar ul>li{display: block;}
.msg-bar em{font-weight: bold;}
.msg-bar a{color: var(--black); text-decoration: underline;}
.page-user .tab-bar{display: none;}
.unpublished{display: table; width: 100%; background: var(--uu);}
.unpublished>div{display: table-cell; padding: 20px; vertical-align: middle; text-align: center; color: var(--black);}
.node-preview{padding: 6rem 0 3rem 0;}
.node-preview img{max-width: 400px; margin: 20px 0;}
.node-unpublished{background: none !important;}
@media all and (max-width: 900px){
.tab-bar>div{display: block; margin: 0;}
.tab-bar>div>div{display: block; padding: 20px;}
.tab-bar ul>li>a{margin: 0 8px 0 0;}
}