* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    outline: none !important;
    vertical-align: baseline;
    list-style: none;

}
html, body {
    font-family:var(--font);
    font-size: var(--text);
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    color: var(--color);
    background: var(--bgColor);
    width:100%;
    -webkit-font-smoothing: antialiased;
    line-height: 1;

}
:root{
    --font:'Suisse Intl','Helvetica N','helvetica neue','HelveticaNeue','Helvetica','Noto Sans SC', sans-serif;

    --color:#000;
    --bgColor:#fff;
    --lineColor:#000;
    --green:rgb(0,206,124);
    --purple:rgb(90,42,162);
    --red:rgb(254,59,31);
    --yellow:rgb(255,255,0);
    --grey:rgba(190,197,217);

    --hoverColor:var(--green);
    --hoverColor2:var(--red);

    --text:clamp(14px, 1vw, 24px);

    --mid:1.5rem;
    --mid3:1.2rem;
    --mid2:2rem;
    --mid4:2.5rem;

    --big:3rem;
    --big2:4rem;

    --huge:10rem;

    --s:1rem;
    --s2:calc(var(--s)/2);
    --s3:calc(var(--s)*2);
    --h:4rem;

    --box_size:25%;
    --box_size2:33.3333% ;
    --box_size3:50% ;


}
a{
    color: var(--color);
    text-decoration: none;

}
label{
    cursor: pointer;
}

.text{
    line-height: 1.5;
}
.text p{
    padding-bottom: 1rem;
}
.text p:last-child{
    padding-bottom: 0;
}
.text img{
    max-width: 100%;
    height: auto;
    width: auto;
}

html[lang="zh-CN"] ,[lang="zh-CN"] body,
[lang="zh-CN"] .home-swiper-box-info h2{
    line-height: 1.2;
}
[lang="zh-CN"]:root{
    --big2: 3.3rem;
}
[lang="zh-CN"] .header-menu-nav ul li a,
[lang="zh-CN"] h6,
[lang="zh-CN"] h5,
[lang="zh-CN"] h4,
[lang="zh-CN"] h3,
[lang="zh-CN"] h1,
[lang="zh-CN"] h2{
    font-weight: 500;
}

/* ----------------- header --------------------*/

.header-menu{
    position: fixed;
    right: 0;
    top:0;
    z-index: 99;
    padding: var(--s2);
    height: 100vh;
    pointer-events: none;
}
.active .header-menu{
    background-color: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

.header-menu-mask{
    position: fixed;
    width: 100vw;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top:0;
    left: 0;
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s linear;
}
.active .header-menu-mask{
    pointer-events: auto;
    opacity: 1;
}

.header-menu-logo{
    height: var(--h);
    padding: .5rem;
    z-index: 99;
    position: fixed;
    left: var(--s2);
    top:var(--s2);
    mix-blend-mode: difference;
}
.artwork .header-menu-logo{
    position: absolute;
}
.home .header-menu-logo{
    transform: translateY(-150%);
    background-color: black;
    box-shadow: .5rem .5rem 1rem  rgba(0,0,0,0.3), .15rem .15rem .3rem -.1rem  rgba(0,0,0,0.5);
    mix-blend-mode: unset;
}
.active .header-menu-logo{
    mix-blend-mode: unset;
}
.header-menu-logo a{
    height: 100%;
    pointer-events: auto;
}
.header-menu-logo img{
    height: 100%;
    width: auto;
    filter: invert(100%);

}

.header-menu-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-end;
}
.header-menu-toy-wrap {
    color: white;
    --color: white;
    display: flex;
    justify-content: flex-end;
    background-color: black;
    height: var(--h);
    pointer-events: auto;
    flex: 0 0 var(--h);
    box-shadow: -0.5rem 0.5rem 1rem rgba(0,0,0,0.3), -0.15rem 0.15rem 0.3rem -0.1rem rgba(0,0,0,0.5);
}
.header-search-form,
.open-menu,
.lng li a,
.header-search{
    border-left: rgba(255,255,255,0.5) solid 1px;
    padding: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--h);
    pointer-events: auto;
    width: var(--h);
    cursor: pointer;

}
.header-search-form,
.header-search{
    border-left: none;
}
.header-search-form{
    width: 0;
    overflow: hidden;
    padding: 0;
}
.header-search i {
    font-size: 1.2rem;
}
.header-search-form input {
    background-color: transparent;
    border: none;
    color: white;
    padding: 0.25rem;
    font-size: 1.2rem;
    width: 100%;
    min-width: 10vw;
}

.lng li.active {
    display: none;
}
.lng li a{
    font-weight: 500;
}

.open-menu{
    flex-direction: column;
    min-width: 4rem;
    cursor: pointer;
}
.open-menu span{
    font-size: 0.8rem;
    font-weight: 500;
    padding-bottom: .5rem;
}
.open-menu-icon {
    min-width: 2rem;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}
.open-menu:hover em {
    transform: scale(1.2);
}


.open-menu-icon em {
    position: absolute;
    width: 100%;
    height: 2px;
    background: currentColor;
    display: block;
    top: 0;
    left: 0;
    transition: transform .3s linear;
}
.open-menu-icon em:nth-child(3) {
    top: calc(100% - 2px);
}
.open-menu-icon em:nth-child(2) {
    top: calc(50% - 1px);
}

.active  .open-menu-icon em:nth-child(2){
    opacity: 0;
}
.active  .open-menu-icon em:nth-child(1){
    transform: rotate(40deg);
    top:43%
}
.active  .open-menu-icon em:nth-child(3){
    transform: rotate(-40deg);
    top:43%
}

.header-menu-content{
    height: 0;
    color: white;
    --color: white;
    overflow: hidden;
    transform: translateX(100%);
    min-width: 50vw;
}
.active .header-menu-content{
    height: 100%;
}
.header-menu-content-wrap{
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header-menu-nav{
    background-color: black;
    margin-top: var(--s2);
    padding: var(--s) 0;
    overflow: auto;
    flex: 1;
}
.header-menu-nav ul li a{
    padding: .25rem var(--s);
    display: flex;
    text-transform: uppercase;
    font-size: var(--big);
    font-weight: 700;
}
.header-menu-nav ul li ul li a{
    font-size: var(--mid2);
}
.header-menu-nav ul li a:hover{
    color: var(--hoverColor);
}
.header-menu-nav ul li ul{
    display: none;
    padding-left: 10%;
}
.header-menu-nav ul li a:after{
    content: '';
    background-image: url(img/icon-right.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: var(--big);
    display: block;
    filter: invert(100%);
    opacity: 0;
    margin-left: 1rem;
}
.header-menu-nav ul li a:hover:after{
    opacity: 1;
}
.header-menu-nav>ul>li.menu-item-has-children>a{
    align-items: center;
}
.header-menu-nav>ul>li.menu-item-has-children>a:after{
    content: '\2b';
    font-family: "Font Awesome 6 Sharp";
    font-size: 0.8em;
    background: transparent;
    filter:unset;
    width: auto;
    font-weight: 300;
    color: white;
}
.header-menu-contact{
    background: black;
    padding: var(--s);
    border-top: rgba(255,255,255,0.5) solid 1px;
    font-size: 0.8em;
    font-weight: 500;
}
.header-menu-time{
    background: black;
    margin-top: var(--s2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    font-weight: 500;
}
.time-clock{
    padding: var(--s);

}
.header-follow{
    padding: var(--s);
    display: flex;
}
.header-follow a{
    display: block;
    padding-left: .5rem;
    font-size: 1.2em;
}
.header-follow img{
    width: 1rem;
    height: auto;
}
/* ----------------- cover --------------------*/

.cover{
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    top:0;
    left: 0;

    perspective: 800px;

}
.cover-wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transform-origin: top center;
    background: var(--bgColor);
	will-change: transform, opacity;
}

.cover-bg{
    position: relative;
    width: 100%;
    height: 100%;
}
.cover-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.cover-logo svg{
    height: 20%;
}
.svg-item{
    opacity: 0;
}


.cover-video{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url(img/logo.svg);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    opacity: 0;
}
.cover-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-info{
    display: flex;
    align-items: flex-end;
}
.cover-info .text{
    padding: var(--s);
    flex: 1;
    font-weight: 500;
}
.scroll-down{
    padding: var(--s);
    font-weight: 500;
}
.scroll-down label{
    padding-right: .5rem;
}

.cover-title{
    font-size: var(--big2);
    
    font-weight:700;
    display: flex;
    overflow: hidden;
    line-height: 1.3;
}
.cover-title span{
    white-space: nowrap;
    display: flex;
    align-items: center;
    animation: scrollX 15s linear infinite;
}
.cover-title span:after{
    content: '/';
    display: block;
    padding:var(--s2) var(--s);
}
.cover-title2{
    display: none;
}
.is-menu .cover-title2{
    display: flex;
}
.is-menu .cover-title1{
    display: none;
}
@keyframes scrollX {
    from{
        transform: translateX(0);
    }to{
         transform: translateX(-100%);
     }
}
@keyframes scrollX2 {
    from{
        transform: translateX(0);
    }to{
         transform: translateX(100%);
     }
}
.op1{
    opacity: 0;
}
.cover-link a{
    position: absolute;
    border: currentColor solid 2px;
    background: var(--bgColor);
    padding:1.5rem 2rem;
    display: block;
    font-size: var(--mid2);
    border-radius: 50%;
    transform: scale(0);
    box-shadow: .2rem .2rem 2rem rgba(0,0,0,0.2);
    transition: box-shadow .3s linear;
}
.cover-link a:hover{
    box-shadow: .2rem .2rem 2rem rgba(0,0,0,0.8);
}
.cover-link a:nth-child(1){
    top:10%;
    left: 5%;
}
.cover-link a:nth-child(1):hover{

}
.cover-link a:nth-child(2){
    top:40%;
    right: 10%;
}
.cover-link a:nth-child(3){
    bottom:20%;
    left: 30%;
}
.dot0{
    height: 100vh;
}
.dot1{
    height: 30vh;
}
.dot2{
    height: 30vh;
}
.dot3{
    height: 100vh;
}
.dot4{
    height: 60vh;
}

/*----------- home -----------*/
.home{
    background: black;
}
.home #content{
    background: black;
}
#wrapper{
    position: relative;
    overflow-x: hidden;
}

.home-content{
    position: relative;
    z-index: 3;

}
.home .big-title{
    font-size: 40vh;
    font-weight: 700;
    color: rgba(0,0,0,0.2);
    -webkit-text-stroke: 1px white;
    white-space: nowrap;
    line-height: 1.3;
    pointer-events: none;
}
.home .big-title-box{
    overflow: hidden;

}
.home-swiper{
    height: 100vh;
    position: fixed;
    z-index: 2;
    width: 100%;
    top:100%;
    left: 0;
    pointer-events: none;

}

.home-swiper-wrapper{
    height: 100vh;
    width: 100vw;
    background: var(--bgColor);
    pointer-events: auto;
	will-change: transform, opacity;
}
.home-slide{
    height: 100vh;
    width: 100vw;

}
.home-slide .home-swiper-box{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-swiper-box h3{
    font-size: var(--big2);
    text-transform: uppercase;
    font-weight:200;
    padding:calc(var(--s2) + .2rem) var(--s) var(--s2) var(--s);
    background: black;
    color: #fff;
    --color: #fff;
}
.home-swiper-box h3 span{
    display: block;
}
.home-swiper-box-img a,
.home-swiper-box-img{
    height: 100%;
    display: block;
    position: relative;
}
.home-swiper-box-img video,
.home-swiper-box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top:0;
    left: 0;
}
.home-swiper-box-info{

    width: 100%;
    padding: var(--s) 0 calc(var(--s) + 3rem) 0;

}
.home-swiper-box-info>*{
    padding:0 var(--s);
}
.home-swiper-box-info-title{
    flex: 1;
    border-left: currentColor solid 1px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.home-swiper-box-info h2{
    font-size: var(--big2);
    line-height: 1;
    text-transform: uppercase;
}
.home-swiper-box-info .s-title{
    font-weight: 500;
    border-top: currentColor solid 1px;
    padding-top: .25rem;
    font-size: var(--mid);
}

.home-swiper-box-info-other{


}
.home-swiper-box-info h4 span{
    font-size: var(--big);
}
.home-swiper-box-info .box-tags{
    border-bottom: currentColor solid 1px;
    padding-bottom: .25rem;

    display: flex;
    flex-wrap: wrap;
}


.swiper-nav{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: var(--s2) var(--s);
    height: 3rem;
    background: rgba(0,0,0,0.3);

}

.home-slide .swiper-pagination{
    flex: 1;
    position: relative;
    bottom: 0;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-btn-prev,
.swiper-btn-next{
    background-image: url("img/icon-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 5rem;
    height: 100%;
    cursor: pointer;
}
.swiper-btn-prev{
    transform: scaleX(-1);
}

.swiper-pagination-n .swiper-pagination-bullet{
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: var(--bgColor);
    z-index: 1;
    box-shadow: .2rem .2rem 2rem rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.swiper-pagination-n .swiper-pagination-bullet:nth-child(1){
    left: 5%;
    top:20%
}
.swiper-pagination-n .swiper-pagination-bullet:nth-child(2){
    left: 50%;
    top:35%
}

.swiper-pagination-n .swiper-pagination-bullet:nth-child(3){
    right: 10%;
    bottom:25%
}
.home-shop{
    color: #fff;
    --color: #fff;
    background: black;
    overflow: hidden;
}
.home-col,
.home-shop{
    position: relative;
    z-index: 10;
}
.home-col-wrap,
.home-shop-wrap{
    display: flex;
    align-items: center;
}
.home-col-wrap{
    justify-content: flex-end;
}
.home-col-wrap a,
.home-shop a{
    display: flex;
    align-items: center;
    padding: var(--s);
    white-space: nowrap;
}
.home-col-wrap a span,
.home-shop a span{
    font-size: 15vw;
    text-transform: uppercase;
}
.home-col-wrap picture,
.home-shop picture{
    display: block;
    position: relative;
    width: 11vw;
    height: 11vw;
    border-radius: 50%;
    overflow: hidden;
}

.home-col-wrap picture img,
.home-shop picture img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    object-fit: cover;
    opacity: 0;

}
.home-col-wrap picture img:first-child,
.home-shop picture img:first-child{
    opacity: 1 !important;
}


.home-col{
    background: white;
    overflow: hidden;
}
.home-col-s{
    display: none;
}
.home-col-wrap-s{
    display: flex;
    justify-content: space-between;
    color: #fff;
    --color: #fff;
    background: var(--hoverColor);

}
.home-col-wrap-s a{
    display: block;
    padding: var(--s);
    font-size: var(--big2);
    text-transform: uppercase;
}

/* ---------- box ----------------*/
.box-tags a{
    display: block;
    font-size:12px;
    margin-right: .5rem;
    margin-bottom: .25rem;
    padding: .25rem .5rem;
    background: black;
    color: white;
    border-radius: .5rem;
}
.plane .grid{
    border-top: none;
}
.grid{
    background: var(--bgColor);
    border-top: currentColor solid 1px;
    position: relative;
    z-index: 2;
}
.plane-title{
    display: flex;
    justify-content:space-between;
    align-items: flex-start;
}
.plane-title.line{
    border-top: currentColor solid 1px;
}
.plane-title>*{
    padding:var(--s) var(--s) 0 var(--s);
    font-size: var(--mid2);
    text-transform: uppercase;
}
.plane-title h3{
    font-size: var(--mid);
}
.plane-title h1{
    font-size: var(--big2);
    font-weight: 200;
    padding-bottom: var(--s3);
}
.view-more{
    display: flex;
    justify-content: center;
}
.view-more a {
    display: inline-flex;
    font-size: var(--mid2);
    text-transform: uppercase;
    padding: .5rem 1rem;
    border: currentColor solid 1px;
}
.view-more a:hover{
    background: black;
    color: white;
}
.view-more a label{
    padding-left: .5rem;
}
.view-more a i{
    display: block;
}
.view-more a:hover i{
    animation: r 2s infinite linear;
}
@keyframes r {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
     }
}





.icon-left:before {
    content: '';
    background-image: url(img/icon-right.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .3s linear;
}


.wrap{
    display: flex;
    flex-wrap: wrap;
    padding: var(--s2);

}

.box{
    width: var(--box_size);
    padding:var(--s) var(--s2) var(--s3) var(--s2);
    position: relative;
}
.box-wrap{
    position: relative;
}
.box-img-pic{
    display: block;
    overflow: hidden;
    line-height: 0;
}
.box-img-pic img{
    width: 100%;
    height: auto;
}

.box-img{
    position: relative;
}

.box-info{
    padding-bottom: .5rem;
}
.box-info h2{
    text-transform: uppercase;
    font-size: var(--mid);
}
.box-info footer h3{
    border-top: currentColor solid 1px;
    font-size: var(--mid);
    padding-top: .25rem;
    margin-top: .25rem;
    text-transform: uppercase;
}
.box-info h3{
    text-transform: uppercase;
}
.box-cats{
    border-bottom: currentColor solid 1px;
    padding-bottom: .25rem;
    margin-bottom: .25rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.box-info h4{
    font-size: var(--mid);
}
.box-cat a,
.box-info h4 a{
    color: #888;
}
.box-cat a{
    font-size: 12px;
    display: inline-block;
    padding: .2rem 0 0 .2rem;
}
.box .box-tags{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5rem;
}
.box .box-tags a{
    background: rgba(0,0,0,0.3);
    border: currentColor solid 1px;
    font-weight: 500;
}
.box-info .s-title{
    border-top: currentColor solid 1px;

    padding-top: .25rem;
    margin-top: .25rem;
}
.box-info .s-title span{
    font-size: 0.8rem;
    width: 50%;
    text-align: right;
    display: block;
    margin-left: auto;
    font-weight: 500;
}
.box-info footer .text{
    font-size: 0.8rem;
    font-weight: 500;
    border-top: currentColor solid 1px;

    padding-top: .25rem;
    margin-top: .25rem;

}
.big-box.big-box-video.full-img-box.box,
.big-box-video.full-img-box.box{
    width: var(--box_size3);
}
.full-img-box.big-box-video .box-img-pic{
    padding-top: 80%;
}
.full-img-box.big-box-video .box-info h2{
    font-size: var(--mid4);
}

.full-img-box .box-wrap{
    display: flex;
    flex-direction: column;
}

.full-img-box .box-info{
    height: 100%;
    width: 100%;
    pointer-events: none;
    aspect-ratio: 100/120;
}
.full-img-box.big-box-video .box-info{
    aspect-ratio: 100/80;
}
.full-img-box .box-info a{
    pointer-events: auto;
}
.full-img-box .box-info footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.full-img-box .box-info footer>*{
    width: 50%;
}
.full-img-box .box-info footer  .box-tags{
    display: flex;
    justify-content: flex-end;
    position: relative;
    padding: 0;
}
.full-img-box .box-tags{
    display: none;
}

.full-img-box .box-img{
    height: 100%;
    background: black;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
}
.full-img-box .box-img-pic{
    height: 100%;
    padding-top: 120%;
    position: relative;
}
.full-img-box .box-img-pic img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top:0;
    left: 0;
}
.full-img-box .box-info{
    z-index: 1;
    padding: var(--s);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    --color: #fff;
    color: #fff;
}
.is-video .box-play {
    font-size: 3rem;
    color: white;
    text-align: center;
    width: 100%;
    pointer-events: none;
    padding: var(--s);
}
.is-video.big-box-video .box-play{
    font-size:5rem;
}


.no-img-box .box-tags{
    position: relative;
    padding: .5rem 0 0 0;
    margin-bottom: .5rem;
    border-top: currentColor 1px solid;
}
.no-img-box .box-tags a{
    background: black;
}

.box-bg{
    position: absolute;
    bottom: calc(var(--s) + var(--s2));
    top:var(--s2);
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
}
.box-bg:before{
    position: absolute;
    bottom: 0;
    top:0;
    left: 0;
    right: 0;
    content: '';
    background: linear-gradient(0, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
.box:hover .box-bg{
    opacity: 1;

}
.box-img-pic img{
    transition: transform .5s linear;
}
.box:hover .box-img-pic img{
    transform: scale(1.1);
}

.del-text{
    font-size:12px;
    padding: var(--s);
    width: 70%;
    position: relative;
    margin: var(--s2) 0 0 auto;
}
.big-box-list .del-text{
    font-size:0.8em;
}
.del-text:before {
    content: "\201c";
    left: 0;
    top: 0;
}
.del-text:after {
    content: "\201d";
    bottom: 0;
    right: 0;
}
.del-text:after, .del-text:before {
    font-size: 2rem;
    position: absolute;
}

.text-box-btn{
    border-top: currentColor solid 1px;
    margin-top: 1rem;
    padding-top: 1rem;
}
.btn {
    border: currentColor solid 2px;
    display: inline-flex;
    padding: 0.4rem 1rem;
    cursor: pointer;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.8rem;
    align-items: center;
}
.btn-b {
    background-color: var(--color);
    color: var(--bgColor);
}
.btn-s {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}
.btn>* {
    padding: 0 0.25rem;
}
.btn-v{
    border-radius: 0;
    font-weight: 700;
    font-size: var(--mid2);
}

.grid-wrap{
    border-top:  currentColor solid 1px;
    display: flex;
}
.grid-wrap-title{
    padding:var(--s);
    width:25%;
}
.grid-wrap-title h2{
    text-transform: uppercase;
    font-size: var(--mid2);
}
.grid-wrap .grid{
    border-top: none;
    width: 75%;
}
.grid-wrap .grid .big-box.box{
    width: 100%;
}
.big-box.box{
    width: var(--box_size3);
}
.big-box .box-wrap{
    display: flex;
    flex-direction: row-reverse;
}
.big-box.no-img-box .box-wrap{
    display: block;
}
.big-box .box-wrap>*{
    flex: 1;
}
.big-box .box-info{
    padding-left: var(--s);

}
.big-box .box-info h2{
    font-size: var(--mid4);
}
.big-box .box-tags{
    bottom: auto;
    top:0;
}
.big-box.full-img-box.box {
    width: var(--box_size2);
}

.list-grid .box{
    width: 100%;
    border-bottom: currentColor solid 1px;
    padding:var(--s) 0;
    margin:0 var(--s2);
}
.list-grid .box:last-child{
    border-bottom: none;
}
.list-grid .box-wrap{
    flex-direction: row;
    display: flex;
}
.grid.list-grid .box-img {
    width: 20%;
    flex: unset;
    border-right: #ccc dashed 1px;
    padding:0 var(--s);
}
.grid.list-grid .box-img-pic {
    height: 8rem;
    min-height: unset;
    overflow: hidden;
    position: relative;
}
.grid.list-grid .box-img-pic img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}
.grid.list-grid .box-info {
    flex-direction: row-reverse;
    flex: 1;
    display: flex;
    padding-bottom: 0;
}
.grid.list-grid.xf .box-info{
    flex-direction: row;
}
.grid.list-grid .box-info>*{
    border-right: #ccc dashed 1px;
}
.grid.list-grid footer{
    width: 15%;
}
.grid.list-grid header{
    flex: 1;
    padding:0 var(--s);
}
.xf.grid.list-grid header{
    padding-right: var(--s);
    padding-left: 0;
}
.grid.list-grid footer .text-box-btn{
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--s);
}
.grid.list-grid footer .text-box-btn,
.grid.list-grid footer .text,
.grid.list-grid .box-info .s-title,
.box-info footer h3,
.box-info footer h2{
    border-top: none;
}
.grid.list-grid .box-tags{
    display: none;
}
.grid.list-grid .box-info .s-title span{
    width: 100%;
    text-align: left;
}
.grid.list-grid .box-tags a{
    background-color: black;
    display: inline-block;
}
.grid.list-grid  .box-bg{
    position: absolute;
    bottom: 0;
    top:0;
    left: calc(var(--s) * -1);
    right: calc(var(--s) * -1);
}
.grid.list-grid footer h3{
    padding-top: 0;
    margin-top: 0;
}
.grid.list-grid footer .text{
    padding:0 var(--s);

}
.big-box-list .box-info h2{
    font-size: var(--mid4);
}
.big-box-list .del-text{
    font-style: italic;
    opacity: 0.5;
}

/* ----------------- foot --------------------*/

#footer{
    background-color:black;
    position: relative;
    z-index: 8;
    padding: var(--s) 0 0 0;
    transition:background-color .5s linear;
    --color: #fff;
    color: #fff;


}
.footer-space{
    height: 5rem;
    backdrop-filter: blur(40px);
    border-top: var(--line);
}
.footer-top{
    display: flex;
}
.footer-top>*{
    flex: 1;
}
.footer-about{
    padding: var(--s);
}
.footer-about ul li a{
    font-size: var(--mid2);
    text-transform: uppercase;
    font-weight: 700;
}
.footer-about ul li a:hover{
    color: var(--hoverColor);
}
.footer-newsletter{
    padding: var(--s);


}
.footer-newsletter h2{
    text-transform: uppercase;
    font-size: var(--mid2);
}
.footer-newsletter form{
    display: flex;
    padding: var(--s) 0;
}
.footer-newsletter input{
    border: currentColor solid 1px;
    background-color: transparent;
    padding: .5rem;
    width: 100%;
    color: var(--color);
}
.footer-newsletter button{
    padding: .5rem;
    background-color: #fff;
    color: black;
    border: none;
}
.footer-wrap{
    display: flex;
    position: relative;
}
.footer-wrap:before{
    content: '';
    height: 1px;
    background-color: white;
    left: var(--s);
    top:0;
    right: var(--s);
    position: absolute;
}
.footer-wrap>*{
    flex: 1;
}


.footer-item{
    padding: var(--s);
    border-left: currentColor solid 1px;
}
.footer-item:first-child{
    border-left: none;
}
.footer-item h3{
    font-size: 1rem;
    padding-bottom: 2rem;
}
.footer-item .text{
    font-size: 0.8rem;
}
.footer-item>ul>li>a{
    font-weight: 700;
}
.footer-item>ul>li{
    display: flex;
}
.footer-item>ul>li>ul{
    padding: 1rem 0;
}
.footer-item>ul>li>ul>li{
    padding: .35rem 1rem;
}
.footer-follow a{
    font-size: 1.5rem;
    display: inline-block;
    padding-right: .5rem;
}
.footer-follow img{
    width: 1.2rem;
    height: auto;
}

.footer-bottom{
    padding: var(--s) var(--s) 0 var(--s);
}

.footer-menu ul li a{
    white-space: nowrap;
    text-transform: uppercase;
    font-size: var(--big2);
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-weight: 700;
}
.footer-menu ul li a:hover{
    color: var(--red);
}
.footer-menu ul li{
    border-top: currentColor solid 1px;
    padding: 0.5rem 0;
}
.footer-menu ul li a:after{
    content: '';
    background-image: url("img/icon-right.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width:5vw;
    display: block;
    filter: invert(100%);
}
.footer-menu ul li.menu-item-has-children ul{
    display: none;
}
.footer-end{
    display: flex;
    justify-content: space-between;
}
.footer-end>*{
    padding:var(--s);
    font-size: 12px;
}
#footer-logo-js{
    height: 65vh;
    background: black;
    position: relative;
    z-index: 8;

}
/*--------------page -------------*/

.page-content{
    position: relative;
    min-height: 100vh;
}

.page-header h1{
    padding:calc(var(--s2) + .2rem) var(--s) var(--s2) var(--s);
    text-transform: uppercase;
    font-size: var(--big2);
    margin-bottom: 15vh;
    margin-left: 8rem;
    font-weight: 200;
}
.page-header span{
    display: block;
}

.page-header-tool{

    display: flex;
}
.page-header-tool.no-wrap {
    display: block;
}
.page-header-other{
    padding:var(--s) var(--s2);
}
.page-header-tool-item{
    margin:var(--s2);
    display: flex;
    flex: 1;
    border-top: currentColor solid 1px;
}
.page-header-menu ul{
    display: flex;
    width: 100%;
}
.page-header-menu ul li{
    flex: 1;
    padding: var(--s2);
    border-left: currentColor solid 1px;
}
.page-header-menu ul li.active{
    background-color: black;
    color: white;
    --color: white;
}
.page-header-menu ul li.active i{

    transform: rotate(90deg);
}
.page-header-menu ul li a{
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-weight: 500;
}
.page-header-menu ul li i{
    display: block;
    transition: transform .3s linear;
}

.cat-item{
    flex: 1;
}
.cat-item h4{
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-weight: 500;
    padding: var(--s2);
    border-left: currentColor solid 1px;
    cursor: pointer;
    font-size: 1rem;
}
.active.cat-item h4{
    background-color: black;
    color: white;
    border-left: black solid 1px;
}
.active.cat-item h4 i{
    transform: scaleY(-1);
    display: block;
}
.page-header-calendar.cat-item{
    background: var(--yellow);
}

.page-header-choose{
    padding:0 var(--s2);
    margin-top: calc(var(--s2) * -1);
}
.page-header-choose-item {
    padding: var(--s) var(--s2);
    display: none;
    background: black;
    --color: #fff;
    color: #fff;
}
.page-header-choose-item.page-header-choose-calendar{
    background-image: linear-gradient(180deg, var(--grey) 0%,rgba(255,255,255,1) 100%);
    --color: black;
    color: black;
    border: currentColor solid 1px;
}

.page-header-choose-item ul {
    display: flex;
    flex-wrap: wrap;
}
.page-header-choose-item ul li {
    width: var(--box_size);
    padding: 0 var(--s2);
}
.page-header-choose-item ul li a {
    display: block;
    border-bottom: currentColor solid 1px;
    padding: var(--s2) 0;
}
.page-header-choose-item ul li a:hover{
    color: var(--hoverColor);
}
.page-header-choose-item ul li a span {
    opacity: 0.5;
    display: inline-block;
    padding-left: 0.25rem;
    font-size: 0.8em;
    vertical-align: top;
}
.scroll-x{
    display: flex;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    border-top:currentColor solid 1px;
}
.scroll-x.dark{
    background-color: #000;
    color: #fff;
    justify-content: flex-end;
}
.go-x{
    justify-content: flex-end;
}
.scroll-x.dark{
    color: #fff;
    --color:  #fff;
}
.scroll-item{
    display: flex;
    align-items: center;
    padding: var(--s);
    animation: scrollX 15s linear infinite;
}
.go-x .scroll-item{
    animation: scrollX2 15s linear infinite;
}
@keyframes scrollX {
    from{
        transform: translateX(0);
    }to{
         transform: translateX(-100%);
     }
}
@keyframes scrollX2 {
    from{
        transform: translateX(0);
    }to{
         transform: translateX(100%);
     }
}
.scroll-item h1{
    font-size: var(--huge);
    text-transform: uppercase;
    font-weight: 200;
}
.scroll-item picture{
    display: block;
    padding-left:var(--s);
}
.scroll-item img{
    height: calc(var(--huge)*0.8);
    width: auto;
}


.plane-text-box{
    position: relative;
    background-color: white;
    border-top: currentColor solid 1px;
    padding: var(--s2) 0;
}
.plane-text-box-wrap{

    display: flex;
    justify-content: flex-end;
    padding: var(--s2);
}
.plane-text-box-wrap>*{
    flex: 1;
    padding: var(--s2);
}
.plane-text-box-wrap>.plane-text-right.big{
    flex: 2;
}
.plane-text-box .text-img-s {
    display: flex;
    justify-content: flex-end;

    padding-right: var(--s);
}
.plane-text-box .text-img-s img {
    width: 38%;
    height: auto;
}


.plane-text {
    position: relative;
    display: flex;
    padding: var(--s) var(--s2);
    justify-content: space-between;
}
.plane-text:before {
    left: var(--s);
    right: var(--s);
    height: 1px;
    border-top: currentColor solid 1px;
    content: '';
    position: absolute;
    top: 0;
}
.plane-text h3{
    font-size: var(--mid);
}
.plane-text>*{
    flex: 1;
    padding: var(--s2);
}
.plane-text-box .text h6,
.plane-text .text h6 {
    border-bottom: currentColor dashed 1px;
    font-size: var(--mid);
    padding: var(--s2) 0;
    margin: var(--s2) 0;
}

.big-text{
    font-size: var(--mid3);
    font-weight: 700;
}
.qr-text{
    padding: var(--s2) 0;
}
.qr-text h6{
    font-size: var(--mid3);
    border-bottom: currentColor solid 1px;
    padding: var(--s2) 0;
    margin: var(--s2) 0;
}

.qr-text img {
    width: 30%;
    max-width: 300px;
    min-width: 250px;
}

.load-more{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s) var(--s3) var(--s);
}

.page-header.page-header-full{
    position: relative;
}
.page-header.page-header-full h1{
    position: absolute;
    z-index: 10;
}
.page-header.page-header-full .page-header-other{
    position: absolute;
    bottom:0;
    z-index: 10;
    width: 100%;
}
.page-header.page-header-full.hasMask:before {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, var(--bgColor) 0%,rgba(255,255,255,0) 80%);
    content: '';
    z-index: 10;
    pointer-events: none;
}
.list-slider.big{
    padding: var(--s) 0;
}
.list-slider.big .list-slider-header {
    padding: var(--s2) 0;
}
.list-slider.big .list-slider-header:after,
.list-slider.big .list-slider-header h2{
    font-size: var(--mid3);
}
.list-slider.big .list-slider-content{
    font-size: 1rem;
}
.table-list{
    padding: var(--s) 0;
}
.table-list footer ul, .table-list header ul {
    display: flex;
}
.table-list footer ul, .table-list header ul {
    display: flex;
    border-bottom: currentColor solid 1px;
    border-left: currentColor solid 1px;
}
.table-list footer ul li:nth-child(2), .table-list header ul li:nth-child(2), .table-list footer ul li:first-child, .table-list header ul li:first-child {
    flex: 2 2 0;
}

.table-list footer ul li, .table-list header ul li {
    flex: 1 1 0;
    padding: 1rem;
    border-right: black solid 1px;
}
.table-list header ul {
    background-color:black;
    color:white;
    border: black solid 1px;
}
.table-list footer ul:hover{
    background-color:var(--grey);
}
/* -------- cal ---------*/

:root {
    --fc-small-font-size: 12px;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: hsla(0,0%,82%,.3);
    --fc-neutral-text-color: rgb(214,209,202);
    --fc-border-color:rgba(0,0,0,0.3);
    --fc-button-text-color: #000;
    --fc-button-bg-color: var(--grey);
    --fc-button-border-color:rgba(0,0,0,0.3);
    --fc-button-hover-bg-color:  var(--grey);
    --fc-button-hover-border-color: rgba(0,0,0,0.3);
    --fc-button-active-bg-color: rgba(255,255,255,0.4);
    --fc-button-active-border-color: rgba(0,0,0,0.3);
    --fc-event-bg-color: #a8dbff;
    --fc-event-border-color: #fff;
    --fc-event-text-color: #000;
    --fc-event-selected-overlay-color: rgba(0,0,0,.25);
    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    --fc-non-business-color: hsla(0,0%,84%,.3);
    --fc-bg-event-color: #8fdf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188,232,241,.3);
    --fc-today-bg-color: var(--yellow);
}
.fc .fc-toolbar-title{
    font-size: var(--mid2);
    font-weight:500;
}
.side-calendar .fc .fc-toolbar-title{
    font-size: 1rem;
}
.fc .fc-col-header-cell-cushion{
    font-weight:500;
}
.fc .fc-daygrid-day-number{
    font-weight:500;
    padding:.5rem;
}
.side-calendar .fc .fc-col-header-cell-cushion{
    font-weight:500;
    font-size: .8rem;
}
.side-calendar .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
    background-color: var(--color);
}
.side-calendar  .fc .fc-daygrid-day-number{
    font-size: .8rem;
    font-weight:500;
    padding:3px;
}
.fc .fc-button:focus {
    outline: 0;
}
.fc-h-event .fc-event-main{
    padding: .5rem;
}
.fc-daygrid-event{
    white-space: unset;
}
.fc-direction-ltr .fc-daygrid-event .fc-event-time{
    margin-right: .5rem;
    font-size: 12px;
}
.fc-h-event .fc-event-title{
    font-size: 12px;
}
.fc-h-event .fc-event-main-frame{
    flex-direction: column;
}
.fc .fc-list-day-cushion, .fc .fc-list-table td {
    padding: var(--s2);
}

.fc .fc-list-day-cushion{
    font-weight:500;
}

/* ---------- collection ----------*/
.col-page-header.page-header{
    position: relative;
    width: 100%;
    height: 100vh;
    top:0;
    left: 0;
    z-index: 3;
    color: white;
    --color: white;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.col-page-header .page-header-t{
    pointer-events: auto;
    background-image: linear-gradient(0,rgba(0,0,0,1) 30%,transparent 100%);

}
.page-header-t{
    padding: var(--s2);
}
.col-page-header .page-header-menu ul li.active{
    background-color: white;
    color: black;
    --color: black;
}

.map-grid {
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    top:0;
    left: 0;
    border-top: unset;
    background-color: black;
    z-index: 0;
}

.map-grid .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 200vw;
    top: 50%;
    left: 50%;
}
.map-grid .box {
    width: 15vw;
    padding: 1vw;
}
.map-grid .box  a {
    display: block;
}
.map-grid .box-info {
    display: none;
    color: white;
    --color: white;
    position: absolute;
    height: 100%;
    z-index: 1;
    padding: 1vw;
    top:0;
    left: 0;
    pointer-events: none;
    background-color: black;
    box-shadow: -1rem 1rem 1rem rgba(0,0,0,0.5);
}
.map-grid .box:hover{
    z-index: 100;
}
.map-grid .box:hover .box-info{
    display: block;
}
.map-grid.col-grid .box .box-info *{
    font-size: 12px !important;
    border-top: none;
    border-bottom: none;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 1.2;
}
.map-grid.col-grid .box-info .info-del .text,
.map-grid .box-info h4{
    color: var(--color) !important;
}

.map-grid .box-img figure {
    padding-top: 0;
    position: relative;
    line-height: 0;
}
.map-grid .box-img img {
    position: relative;
    width: 100%;
    height: auto;
    transition:transform .3s  var(--cubic);
}
.grid-gridx .box{
    width: calc(100% / 7);
}
.grid-gridx.grid-gridx2 .box{
    width: var(--box_size);
}
.grid-gridx .box-img img{
    position: relative;
    width: 100%;
    height: auto;
}
.search .box.artworks-box h2,
.grid-gridx .box h2{
    padding-top: .25rem;
    margin-top: .25rem;
    border-top: currentColor solid 1px;
}
.search .box.artworks-box .info-del,
.grid-gridx .box .info-del{
    padding-top: .25rem;
    margin-top: .25rem;
    border-top: currentColor solid 1px;
}
.search .box.artworks-box h3,
.col-grid .box h3{
    font-size: 0.8rem;
}
.search .box.artworks-box h2,
.col-grid .box h2{
    font-size: 0.8rem;
}
.search .box.artworks-box .info-del h4,
.col-grid .box .info-del h4{
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
    border-bottom: currentColor solid 1px;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.search .box.artworks-box .info-del .text,
.col-grid .box .info-del .text{
    color: #888;
    font-size: 0.8rem;
    font-weight: 500;
}
.list-gridx .box{
    width: 100%;
    padding: var(--s2);
    border-bottom: currentColor solid 1px;
}
.list-gridx .box a{
    display: flex;
    width: 100%;
}
.list-gridx .box:hover{
    background-image: linear-gradient(180deg,#eee,transparent);
}
.list-gridx .box .info-del h4,
.list-gridx .info-del .text{
    font-size: 12px;
}
.list-gridx .box-img img{
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.list-gridx .box .box-img {
    width: 12%;
    flex: unset;
    max-width: 250px;
    min-width: 100px;
}
.list-gridx .box .box-img figure {
    display: block;
    height: 4rem;
    position: relative;
    overflow: hidden;
    text-align: right;
    background: none !important;
}
.list-gridx .box-info {
    display: flex;
    flex-direction: row;
    flex: 1;
}
.list-gridx .box-info>* {
    flex: 1;
    border-right: #ccc dashed 1px;
    padding:0 var(--s2);
}
.has-more .box.not-show{
    display: none;
}
.ex-more .box.not-show{
    display: none;
}
.is-map .load-more{
    position: absolute;
    bottom: 2rem;
    right: 0;
}
.text-box-grid{
    padding: 0;
    margin: var(--s3) 0;
    border-top: none;
}
.text-box-grid .wrap{
    padding: 0;
}

.text-box{
    width: var(--box_size3);
    border-left: black dashed 1px;
    border-top: black dashed 1px;
    padding:var(--s);
    background: var(--grey);
}
.text-box h2{
    font-size: var(--mid3);
    font-weight: 500;
    padding-bottom: 1rem;
}
.text-box a{
    text-decoration: underline;
}

/* ---------- post ----------*/
.post-top{
    height: calc(var(--h) + 15vh);
    border-bottom: currentColor solid 1px;
    position: relative;
}
.post-top.small-top{
    height: calc(var(--h) + var(--s));
}
.post-top:before {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    content: '';
    background: linear-gradient(0, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
.post-audio,
.open-filter{
    position: fixed;
    top:0;
    left: 0;
    padding: var(--s2);
    z-index: 6;
    transform: translateY(-100%);
    transition: transform .3s linear;
}

.top .open-filter{
    transform: translateY(0);
}
.post-audio{
    top: auto;
    bottom: 0;
    transform: translateY(0);
    padding:0 var(--s2);
    left: auto;
    right: 0;
}

.post-audio .open-audio.active i:before,
.open-filter.active .open-filter-btn i:before{
    content: '\f00d';

}
.open-audio,
.open-filter-btn{
    background-color: white;
    border: currentColor solid 1px;
    padding:.5rem 1rem;
    cursor: pointer;
    text-transform: uppercase;
}
.open-audio{
    background: var(--green);
    border-bottom: none;
}
.open-audio span,
.open-filter-btn span{
    font-weight: 500;
    padding-left: .25rem;
}

.filter-content{
    position: fixed;
    top:0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100%;
    display: none;
}
.filter-warp{
    width: 30vw;
    padding: 5rem var(--s) var(--s) var(--s);
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    overflow: auto;
    backdrop-filter: blur(20px);
    color: white;
    --color: white;
    transform: translateX(-100%);
}
.filter-item{
    padding: var(--s2) 0;
}

.filter-archive h4,
.filter-menu ul li{
    border-bottom: currentColor solid 1px;
}

.filter-archive h4,
.filter-menu ul li a{
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
}
.filter-archive ul li{
    font-weight: 500;
    padding: .25rem 0;
}
.filter-archive ul{
    display: none;
}
.filter-mask{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.post-audio{
    display: flex;
    flex-direction: column;
}
.audio-qr{
    width: 10rem;
    padding: .5rem;
    background-color: #eee;
    display: none;
}
.audio-qr img{
    width: 100%;
    height: auto;
}


.full-img-swiper {
    --swiper-pagination-color: #fff;
}
.full-img-slider .swiper-slide{
    position: relative;
}
.full-img-slider .swiper-slide .pic-info{
    position: absolute;
    bottom: 0;
    left:0;
    z-index: 10;
    padding: var(--s);
    font-size: 12px;
}
.full-img-slider .swiper-slide video, .full-img-slider .swiper-slide img {
    aspect-ratio: 1/0.4;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.full-img-slider.size-b .swiper-slide video, .full-img-slider.size-b .swiper-slide img{
    aspect-ratio: 1/0.56;
}
.full-img-slider.size-c .swiper-slide video, .full-img-slider.size-c .swiper-slide img{
    aspect-ratio: unset;
}

.full-img-swiper.swiper-horizontal>.swiper-pagination{
    right: 0;
    left: auto;
    width: auto;
    top:50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: var(--s);

}
.full-img-swiper.swiper-horizontal>.swiper-pagination .swiper-pagination-bullet{
    display: block;
    margin:5px 0;
}



.post-plane{
    padding-bottom: var(--s3);
}

.post-header-wrap{
    display: flex;
    justify-content: flex-end;
    padding:var(--s2);
}

.post-header-wrap>*{
    flex: 1;
    padding:var(--s2);
}
.page-header-title{
    align-items: flex-end;
}
.header-cat{
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
}

.post-header h1,
.post-header h3{
    font-size: var(--big);
    text-transform: uppercase;
}
.post-header .s-title{
    border-top: currentColor solid 1px;
    margin-top: .25rem;
    padding-top: .25rem;
}
.post-header .s-title span{
    width: 50%;
    margin-left: auto;
    display: block;
    text-align: right;
    font-weight: 500;
    font-size: 0.8rem;
}
.post-del{
    margin-top: .25rem;
}
.post-del ul li{
    display: flex;
    padding: .25rem 0;
    border-top: currentColor solid 1px;

    font-size: 0.8rem;
}
.post-del ul li b {
    font-weight: 700;
    flex: 1;

}
.post-del ul li div {
    flex: 2;
}
.small-text {
    font-size: 0.8rem;
}
.post-del .box-tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.post-del .box-tags a{
    margin-left: .5rem;
    margin-right: 0;
}

.plane-text-left .post-header{
    padding-right: 20%;
}
.plane-text-left .post-del{
    width: 80%;
}
.is-more{
    padding-top: 1rem;
}
.read-more{
    margin-top: 1rem;
}
.read-more.active span:first-child,
.read-more span:last-child{
    display: none;
}
.read-more.active span:last-child{
    display: block;
}
.plane-text-box.no-line{
    border-top: none;
}

.text-mid{
    width: 50%;
    padding: var(--s);
    margin: 0 auto;
}
.text-mid .text{
    padding-top: var(--s3);
}


.is-more{
    display: none;
}

.post-text-side{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.poster img{
    width: 100%;
    height: auto;

}
.poster{
    width: 40%;
    padding-right:var(--s);
    text-align: center;
}

.plane-text-block-wrap{
    display: flex;
    padding: var(--s2);
    border-top: currentColor solid 1px;
}
.plane-text-block-wrap>*{
    padding: var(--s2);
    flex: 2;

}
.plane-text-block-wrap>.text-block.audio{
    flex: 1;
}
.text-block-title{

    padding: var(--s2) 0;
    font-weight: 500;
    font-size: 0.8rem;
}
.download-block a,
.list-slider li{
    border-top: currentColor solid 1px;
    padding:.25rem 0;
    display: block;
}
.download-block a,
.list-slider-header{
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    cursor: pointer;
}
.download-block a,
.list-slider-header h2{
    font-size: 1rem;
    font-weight: 500;
}
.list-slider-content{
    display: none;
    padding: var(--s2) 0;
    font-size: 0.8rem;
}
.list-slider-header:after {
    content: "\2b";
    font-size: .8rem;
    font-family: "Font Awesome 6 Sharp";
}

.post--audio{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s2) 0;
}
.post--audio i{

    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    border-radius: 50%;
}
.post--audio span{
    padding-top: .5rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.swiper-tool {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.swiper {
    --swiper-pagination-bullet-size: 14px;
    --swiper-pagination-color: var(--color);
}
.swiper-nav2 {
    display: flex;
    position: relative;
    z-index: 11;
    cursor: pointer;
}
.nav-next, .nav-prev {
    width: 3rem;
    height: 3rem;
    margin: 5px;
}
.nav-prev:before {
    transform: scaleX(-1);
}
.swiper-tool > * {
    margin: 0 var(--s);
}
.swiper-tool .swiper-pagination-bullets.swiper-pagination-horizontal{
    width: 100%;
    bottom: auto;
    margin: 0;
}
.gallery-slider .swiper-slide{
    padding:var(--s);
    width: auto;
}
.gallery-slider .swiper-slide  img {
    width: auto;
    height: 50vh;
    min-height: 450px;
}
.gallery-swiper-img .text {
    font-size: 0.7rem;
    line-height: 1.2;
    padding-top: 0.5rem;
    color: #888;
}

.post-menu{
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: var(--grey);
    border-top: currentColor solid 1px;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: .25rem 0;
    text-transform: uppercase;
}
.post-menu>*{
    padding:0 var(--s);
}
.post-menu-nav{
    display: flex;
}
.post-menu-nav a{
    padding:0 .5rem;
    display: block;
}
.post-menu i{
    margin-right: .25rem;
    font-size: 0.9em;
}
.gototop{
    cursor: pointer;
}

.full-video{
    background: black;
}
.video-block-wrap{
    width: 80%;
    margin: 0 auto;
    padding: calc(var(--h) + var(--s)) 0;
}
.if-video{
    width: 100%;
    height: 100%;
}
.if-video iframe{
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}
.plyr--video{
    --plyr-color-main:#fff;
    --plyr-video-control-background-hover:var(--green);
}


.panzoom__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 1px;
    margin: auto;
}
.panzoom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.panzoom__content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: 0 0;
    transition: none;
    touch-action: none;
    user-select: none;
    cursor: zoom-in;
}

.video-page .fancybox__content,
.video-page .fancybox__slide,
.artwork-page .fancybox__content,
.artwork-page .fancybox__slide{
    padding:0;
    height: 100vh !important;
}
.artwork-page .fancybox__content>.carousel__button.is-close,
.video-page .fancybox__content>.carousel__button.is-close{
    width: 100%;
    padding: 0.5rem;
    top:0;
    left: 0;
    border-radius: unset;
    background: #333;
    text-align: right;
}
.artwork-page .fancybox__content>.carousel__button.is-close{
    height: 3rem;
}
.artwork-page .fancybox__thumbs{
    display: none;
}

.artwork-page  .carousel__button.is-prev, .artwork-page  .carousel__button.is-next{
    top:0;
    transform: none;
    padding: 0.5rem;
    height: 3rem;
    background: #555;
    border-radius: unset;
}
.artwork-page  .fancybox__nav .carousel__button.is-next{
    right: 0;
}
.artwork-page .fancybox__nav .carousel__button.is-prev{
    left: 0;
}
.inside #footer-logo-js,
.inside #footer,
.inside #header{
    display: none;
}
.inside .artwork-info,
.inside .artwork-gallery{
    background: black;
    color: #fff;
    --color: #fff;
}
.inside .artwork-gallery{
    height: calc(100vh - 3rem);
}
.inside .post-top{
    height: 3rem;
}
.artwork-gallery{
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--h) - var(--s));
}

.artwork-grid-swiper{
    height: 100%;
    flex: 1;
    width: 100%;

}
.artwork-grid-swiper .swiper-slide{
    padding: var(--s) var(--s) 0 var(--s);
}
.slide-video{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}
.slide-video .plyr{
    width: 70%;
    aspect-ratio: 16/9;
}
.artwork-grid-swiper .swiper-slide .pic-info{
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    padding: var(--s);
    width: 50%;
}

.swiper-img-nav{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s2);
}
.swiper-img-nav span{
    padding: var(--s2) .25rem;
    height: 100%;
    cursor: pointer;
    opacity: 0.5;
}
.swiper-img-nav span img{
    height: 100%;
    width: 70px;
    object-fit: cover;

}
.swiper-img-nav span.active{
    opacity: 1;
}
.artwork-info{
    border-top:currentColor solid 1px;
}
.artwork-info-wrap{
    width: 60%;
    margin: 0 auto;
    padding: var(--s);
}
.artwork-info-wrap>header{

    padding: var(--s) 0;
    line-height: 1.3;
}
.artwork-info .list-slider-header:after,
.artwork-info .list-slider-header h2,
.artwork-info-wrap>header h3{
    font-size: var(--mid);
    font-weight: 700;
}
.artwork-info-wrap>header h2 {
    text-transform: uppercase;
    font-size: var(--mid4);
}
.artwork-info .info-del{
    font-weight: 700;
}
.artwork-info .info-del h4{
    font-size: 1em;
}
.artwork-text{
    padding: var(--s) 0;
    border-top:currentColor solid 1px;
}
.artwork-info .list-slider-content{
    font-size: var(--mid3);
    font-weight: 700;
}