* {
    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(--textSzie);
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    color: var(--color);
    background: var(--bgColor);
    width:100%;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    font-weight: 500;


}
i,em{
    font-variation-settings: 'wght' 450, 'ital' 900;
}

:root{
    --font:'Helvetica N','helvetica neue','HelveticaNeue','Helvetica','Noto Sans SC', sans-serif;
    --icon:"Font Awesome 6 Pro";
    --textSzie: clamp(14px,1vw,18px);
    --color:#000;
    --bgColor:#fff;
    --light:#aaa;
    --light2:#eee;
    --top-color: #fff;
    --bottom-color: #ffcb56;
    --borderColor:#000;
    --borderSzie:1px;
    --borderR:5px;

    --space:2rem;
    --spaceS:calc(var(--space)/2) ;
    --spaceB:calc(var(--space)*3) ;

    --textsizeM :1.35rem;
    --textsizeB :2rem;
    --textsizeH :3.5rem;
    --weight: 700;

    --swiper-theme-color:var(--color);
    --swiper-pagination-bullet-size:.75rem;

}
h1,h2,h3,h4,h5,h6{
    font-weight: var(--weight);
}
a{
    color: var(--color);
    text-decoration: none;

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

.line-top,
.line{
    position: relative;
}
.line-top:before,
.line:before{
    position: absolute;
    bottom: 0;
    height: var(--borderSzie);
    background: var(--borderColor);
    left: var(--space);
    right: var(--space);
    content: '';
    z-index: 2;
    pointer-events: none;
}
.line-top:before{
    bottom: auto;
    top: 0;
}
.btn{
    display: inline-flex;
    padding:.75rem 1.5rem;
    border: var(--borderColor) solid var(--borderSzie);
    border-radius: var(--borderR);
    font-weight: var(--weight);
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn b{
    padding-right: 1rem;
    font-weight: inherit;
}
.btn-b{
    border: unset;
    background-color: var(--color);
    color: var(--bgColor);
}
.btn.big{
    font-size: var(--textsizeM);
}
.f-y span,
.btn b span {
    display: inline-block;
    overflow: hidden;
}
.f-y span em,
.btn b span em {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
    font-style: normal; /* 去掉em默认斜体效果 */
    font-variation-settings: unset;
}
.f-y span em::after,
.btn b span em::after {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    top: 100%;
}
.f-y:hover span em,
.btn:hover b span em {
    transform: translateY(-100%);
}

#header{
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    z-index: 99;
    font-weight: var(--weight);
}
#header.has-cover{
    height: 100vh;

}
.header-nav{
    padding:0 var(--spaceS);
    position: relative;
    z-index: 101;
}
.has-cover .header-nav{
    background-color: rgba(255,255,255,1);
}



.nav-wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.logo{
    width:clamp(150px,15vw,350px);
    padding: var(--spaceS);
}
.logo a{
    display: block;
}
.logo img{
    width: 100%;
    height: auto;
}

.header-tool{
    display: flex;
    align-items: center;
}
.open-search,
.header-tool>*{
    padding: var(--spaceS);
}
.open-search{
    cursor: pointer;
    width: calc(var(--space) + 2rem);
    text-align: right;
}

.lng ul{
    display: flex;
}
.lng ul li:first-child:after{
    content: '/';
    padding: 0 .5rem;
}
.lng ul li a{
    color: var(--light);
}
.lng ul li.active a{
    color: var(--color);
}
.header-follow{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.header-info span,
.header-follow a{
    margin: 0 .5rem;
    display: inline-block;
}
.header-follow a{
    font-size: 1.2rem;
}
.header-follow a.xiaohongshu{
    background-image: url("img/xhs.svg");
    width: 1rem;
    height: 1rem;
    background-size: cover;
}
.header-menu{
    width: 100%;
}
.header-menu ul{
    display: flex;
    justify-content: space-between;
}
.header-menu ul li{
    position:relative;
    flex: 1;
}
.header-menu ul li a{
    padding: var(--spaceS);
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    position: relative;
}

.header-menu ul li a:before{
    content: '';
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    background: currentColor;
    transition: width .3s linear,height .3s linear;
}
.header-menu ul li.active a:hover:before{
    width: 100%;
}
.header-menu ul li.active>a:before{
    width: 100%;
    height: 100%;
    background: var(--color);
    z-index: -1;
}
.is-bottom .header-menu ul li.active>a:before{
    top:0;
    bottom: auto;
}
.header-menu>ul>li.active>a:after{
    content: '\f00d';
    font-family: var(--icon);
}

.header-menu ul li.active{
    color: var(--bgColor);
}
.header-menu ul li.active a{
    color: var(--bgColor);
}

.header-menu ul li ul{
    position: absolute;
    flex-direction: column;
    display: none;
    background: var(--color);
    color: var(--bgColor);
    left: 0;
    right: 0;

}
.is-bottom .header-menu ul li ul{
    bottom: calc(var(--spaceS) + 2rem);
}
.header-menu ul li ul li a{
    color: var(--bgColor);

}
.header-menu ul li ul li a:before{
    height: 100%;
    width: 0;
    opacity: 0.1;
}

.header-menu li a span {
    display: inline-block;
    overflow: hidden;
}

.header-menu li a span em {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
    font-style: normal; /* 去掉em默认斜体效果 */
    font-variation-settings: unset;
}

.header-menu li a span em::after {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    top: 100%;
}

.header-menu li a:hover span em {
    transform: translateY(-100%);
}

#mini-header{
    position: fixed;
    width: 100%;
    z-index: 999;
    top:0;
    background-color: var(--bgColor);
    font-weight: var(--weight);
    transform: translateY(-200%);
    transition: transform .3s;
}
.scrolled-past-header #mini-header{
    transform: translateY(0);
}
#mini-header .logo{
    width:clamp(140px,10vw,350px);
    padding: var(--spaceS);
    filter: invert(100%);
}
#mini-header .header-nav-1{
    --bgColor: #000;
    color: white;
    --color: white;
    background-color: var(--bgColor);
}
#mini-header .header-nav-2:before{
    left: 0;
    right: 0;
}
.shape {
    width: 1rem;
    height: 1rem;
    position: relative;
    cursor: pointer;
    padding: 0 !important;
    margin: var(--spaceS);
}
.shape:before{
    background-color: var(--color);
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}


/* 鼠标悬浮时变成三角形 */
.shape:hover:before {
    width: 0;
    height: 0;
    background-color: transparent; /* 三角形效果通过边框实现，背景设为透明 */
    border-radius: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-bottom: 1rem solid var(--color);
}
.header-search-form{
    padding: 0 var(--spaceS);

}
.search-from,
.search-from2{
    display: none;
}
.show-search-1 .search-from{
    display: block;
}
.show-search-1 .s1 i:before{
    content: '\f00d';
}
.show-search-2 .s2 i:before{
    content: '\f00d';
}
.show-search-2 .search-from2{
    display: block;
}
.header-search-form input{
    border: none;
    border-bottom: solid var(--borderColor) var(--borderSzie);
    width: 100%;
    background: transparent;
    font-size: 1rem;
    padding: var(--spaceS);
    text-align: center;
}
.qr-img img{
    width: 200px;
    height: auto;
}
.single-video #wrapper,
.single-artwork #wrapper{
    min-height: 1000px;
}
.cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: black;
}

.cover .cover-video{
    height: 100%;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    border-radius: var(--borderR);
}
.cover .cover-video img,
.cover .cover-video video{
    width: 100vw;
    height: 100vh;
    object-fit: cover;

}

.cover-info{
    position: absolute;
    top:auto;
    bottom: var(--space);
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    color: #fff;
}

.cover-text{
    width: 50%;
    margin-left: auto;
    padding:0 var(--space);
    font-size: var(--textsizeB);
}

.cover-menu{
    position: relative;
    z-index: 100;
}
.cover-menu ul{
    display: flex;
}
.cover-menu ul li{
    flex: 1;
    padding: var(--space);
}
.cover-menu ul li a{
    border-top: rgba(255,255,255,0.5) solid var(--borderSzie);
    width: 100%;
    padding-top: var(--spaceS);
    pointer-events: auto;
    position: relative;
    display: block;
}
.cover-menu ul li a span{
    display: flex;
    justify-content: space-between;
}
.cover-menu ul li a:before{
    content: '';
    position: absolute;
    width: 0;
    height: 100vh;
    transition: width .3s linear;
    top:0;
    backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}
.cover-menu ul li a:after{
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    transition: width .3s linear;
    top:0;
    background: currentColor;
    z-index: 1;
    pointer-events: none;
}
.cover-menu ul li a:hover:after,
.cover-menu ul li a:hover:before{
    width: 100%;
}
.cover-menu ul li a span:after{
    content: '\f061';
    font-family: var(--icon);
}

.cover-menu ul li:nth-child(2){
    margin-top: 30vh;
}
.cover-menu ul li:nth-child(3){
    margin-top:20vh;
}

.current-box{
    display: flex;
    padding: var(--spaceS);
    flex-direction: row-reverse;
    --boxHigeht:75vh;
    height: var(--boxHigeht);
}
.current-box>*{
    padding: var(--spaceS);
}
.current-box-info{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.current-box-img{
    width: calc(var(--boxHigeht) * 1.7);
    height: 100%;

}
.current-box-img a{
    height: 100%;
    display: block;
    overflow: hidden;
    line-height: 0;
    border-radius: var(--borderR);
    position: relative;

}
.current-box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;

}



.current-box-info{
    font-weight: var(--weight);

}
.current-box-info a{
    margin-bottom: 3rem;
}
.plan .current-box-info a{
    margin-bottom: 8rem;
}
.current-box-info h4{
    text-transform: uppercase;
}
.current-box-info h3,
.current-box-info h2{
    font-size: var(--textsizeB);
    line-height: 1.2;
    padding-top: .25rem;
}
.current-box-info .text{
    padding-top: 1rem;
}
.box h2 span,
.current-box-info h2 span{
    background-image: linear-gradient(currentColor, currentColor);
    background-position: left bottom;
    background-repeat: no-repeat;
    text-decoration: none;
    background-size: 0 1px;
    transition: background-size 300ms;
    line-height: 1.2;

}
.box a:hover h2 span,
.current-box:hover h2 span{
    background-size: 100% 1px;
}

.swiper-tool{
    position: absolute;
    left: var(--space);
    right: var(--space);
    bottom: var(--space);
    display: flex;
    justify-content: space-between;
    z-index: 10;
    align-items: flex-end;

}
.swiper-btn{
    display: flex;
    position: relative;
    z-index: 12;
}
.swiper-btn>div{
    border-radius: 50%;
    border: var(--borderSzie) solid var(--borderColor);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
    cursor: pointer;
    transition: border .3s linear;
}
.swiper-btn>div:hover{
    border: 3px solid var(--borderColor);
}

.current-swiper .swiper-pagination{
    position: relative;
    width: auto;
    bottom: 0;
    padding: var(--spaceS);
}
.current-plane{
    margin-bottom: var(--space);
}
.current-plane.plan{
    background-color: var(--light2);
}

.plane-title{
    padding:var(--space) var(--spaceS) var(--spaceS) var(--spaceS);
}
.plane-title h2{
    padding:0 var(--spaceS);
    font-size: var(--textsizeB);
    text-transform: uppercase;
}

.grid{
    padding-bottom: var(--space);
}
.grid.no-bottom{
    padding-bottom: 0;
}
.wrap{
    padding:0 calc(var(--spaceS) + var(--spaceS)/2);
    display: flex;
    flex-wrap: wrap;
}
.big-two .box:nth-child(1),
.big-two .box:nth-child(2),
.big .box{
    width: 50%;
}
.box {
    width:25%;
    padding: var(--spaceS) calc(var(--spaceS)/2) var(--space) calc(var(--spaceS)/2);
}
.box a{
    display: block;
}
.box-img{
    position: relative;
    margin-bottom: .5rem;
    line-height: 0;
}
.box-img img{
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--borderR);
}
.box-info h4{
    text-transform: uppercase;
    padding: .5rem 0;
    font-size: 1rem;

}
.box-info h4:before{
    content: '\f0da';
    font-family: var(--icon);
    padding-right: .25rem;
}
.box-info h3,
.box-info h2{
    line-height: 1.2;
    font-size: var(--textsizeM);
}
.box-info h3{
    color: var(--light);
}
.box-info .text{
    padding-top: .5rem;
}
.top-gallery-video-play:before,
.is-video .box-img:before{
    width: 3rem;
    height: 3rem;
    background-color: rgba(0,0,0,1);
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    content: '';
    border-radius: 50%;
    pointer-events: none;
}
.top-gallery-video-play:after,
.is-video .box-img:after{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    color: white;
    content: '\f04b';
    font-family: var(--icon);
    font-weight: var(--weight);
    pointer-events: none;
}
.pub-grid .box{
    width: 50%;
}
.grid-three .box{
    width: 33.3333%;
}


.pub-grid .box a{
    display: flex;
}

.pub-grid .box a>*{
    width: 50%;
}

.pub-grid .box  .box-img{
    margin-bottom: 0;
}
.artworks .box .box-img img{
    aspect-ratio: unset;
    height: auto;
}
.pub-grid .box  .box-img img{
    aspect-ratio: unset;
    height: auto;
    border-radius:unset;
}

.pub-grid .box .box-info{
    padding-left: 1rem;
}
.artworks .box .box-info h2,
.artworks .box .box-info h3{
    font-size: 1rem;
}
.artworks .box .box-info .text{
    font-size: 0.8rem;

}
.no-pic a{
    background-color: var(--light2);
    height: 100%;
    padding: var(--spaceS);
    border-radius: var(--borderR);
}

.no-pic .box-info .text{
    padding-top: 2rem;
    font-style: italic;
}

.shop-grid .box  .box-img img{
    aspect-ratio: 1/1;
}
.box-info .btn{
    margin-top: 3rem;
}
.grid-swiper .box{
    width: 100%;
}
.grid.slide-grid{
    padding-bottom: 0;
}
.grid-swiper {
    padding: 0 calc(var(--spaceS) + var(--spaceS) / 2) var(--space) calc(var(--spaceS) + var(--spaceS) / 2);
    --swiper-scrollbar-size:8px;
    --swiper-scrollbar-border-radius:0;
    --swiper-scrollbar-drag-bg-color:var(--color);
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
    left: var(--space);
    width: calc(100% - 2 * var(--space));
    bottom:0;
}
.slide-grid .swiper-tool{
    left: auto;
    right: var(--space);
    top:var(--spaceS);
    bottom: auto;
}

.slide-box{
    padding: var(--spaceS) 0;
}
.slide-box .text{
    display: none;
    padding-bottom: var(--spaceS) ;
}
.slide-box ul li>h3{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.slide-box ul li>h3:after {
    font-family: var(--icon);
    content: '\2b';
}
.slide-box ul li.active>h3:after{
    content: '\f068';
}

.card{
    width: 50%;
    padding: var(--spaceS) calc(var(--spaceS)/2) var(--spaceS) calc(var(--spaceS)/2);
}
.card a{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderR);
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}
.card a:before{
    content: '';
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    z-index: 1;
}
.card-img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
}
.card-img img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.card-info{
    position: relative;
    text-align: center;
    z-index: 2;
    padding: var(--spaceS);
    border-radius: var(--borderR);
    color: white;
    --color: #fff;
    --bgColor: #000;
}
.card-info h2{
    font-size: var(--textsizeH);
    text-transform: uppercase;
}
.card-info  .text{
    padding-top: 1rem;
}
.card-info  .btn{
    margin-top: 1rem;
}

#footer{
    margin-top: var(--spaceB);
}
.home #footer{
    margin-top: var(--space);
}
.footer-newsletter{

    padding:var(--space) var(--spaceS);

    /*background-image: linear-gradient(var(--top-color), var(--bottom-color));*/
    background-image: url("img/bg.jpg");
    background-size: auto 200%;
    background-position: top left;
    position: relative;
}
.footer-newsletter:after{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    content: '';
    left: 0;
    top:0;
}
.footer-newsletter-content{
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}
.footer-newsletter-content>*{
    padding: var(--spaceS);
    flex: 1;
}
.footer-newsletter h2{
    font-size: var(--textsizeH);
    text-transform: uppercase;

}
.footer-newsletter input[type="email"] {
    border: none;
    width: 100%;
    font-size: var(--textsizeB);
    background-color: transparent;
}
.footer-newsletter form {
    display: flex ;
    border-bottom: var(--borderColor) solid var(--borderSzie);
    align-items: center;
}
.footer-newsletter input[type="submit"]{
    background-color: var(--color);
    color: var(--bgColor);
    width: var(--textsizeB);
    height: var(--textsizeB);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:100%;
    cursor: pointer;
}

.footer-content{
    --bgColor: #000;
    color: white;
    --color: white;
    --borderColor:#888;
    background-color: var(--bgColor);
}
.footer-search{
    padding: var(--spaceS) var(--space);
}
.footer-search form{
    display: flex ;
    border-bottom: var(--borderColor) solid var(--borderSzie);
    align-items: center;
}
.footer-search input{
    border: none;
    width: 100%;
    font-size: var(--textsizeB);
    background-color: transparent;
    color: var(--color);
    margin-left: 1rem;
    padding: .5rem;
}
.foot-wrap{
    display: flex;
    padding: var(--spaceS);
}
.footer-wrap{
    display: flex;
    padding: var(--spaceS) 0;
    font-weight: 700;
}
.footer-item{
    flex: 1;
    padding: var(--space);
}
.footer-item h3{
    padding-bottom:2rem;
    text-transform: uppercase;
    font-size: var(--textsizeM);
}
.footer-item li{
    line-height: 1.5;
    text-transform: uppercase;
}
.follow-eq,
.footer-follow {
    text-align: right;
}
.footer-follow{
        display: flex;
    justify-content: flex-end;
    align-items: center;
}
.footer-follow a{
    font-size: 2rem;
    margin-right: 1rem;
    display: inline-block;
}
.footer-follow a.xiaohongshu{
    background-image: url("img/xhs_w.svg");
    width: 1.8rem;
    height: 1.8rem;
    background-size: cover;
}
.follow-eq{
    margin-top: 1rem;
}
.follow-eq img{
    width: 30%;
    height: auto;
}


.foot-wrap{
    align-items: flex-end;
    justify-content: space-between;
    font-size: 0.8em;
}
.foot-wrap>*{
    padding: var(--spaceS);

}
.foot-logo img{
    width:clamp(150px,15vw,350px);
    height: auto;
}
.foot-info{
    width: 25%;
}
.foot-info p{
    border-top: var(--borderColor) solid var(--borderSzie);
    display: block;
    padding-top: .5rem;
    padding-bottom: .5rem;
}


.page-header.no-space{
    padding: 0;
}
.page-title{
    padding: var(--spaceS);
    display: flex;
}
.page-title h1{
    padding: var(--spaceS);
    width: 50%;
    font-size: var(--textsizeH);
    text-transform: uppercase;
}
.page-menu ul{
    display: flex;
    padding:0 var(--spaceS);
}
.page-menu ul li{
    padding: var(--spaceS);
    flex: 1;
}
.page-menu ul li a{
    display: flex;
    justify-content: space-between;
    border-top: var(--borderColor) solid var(--borderSzie);
    padding-top: 1rem;
    font-weight: var(--weight);
}
.page-menu ul li a:after{
    content: '\f061';
    font-family: var(--icon);
}
.page-other-menu ul{
    display: flex;
    padding:0 var(--spaceS);
    justify-content: space-between;
}
.page-other-menu ul li{
    padding: var(--spaceS);
}
.page-other-menu ul li a{
    text-transform: uppercase;
    color: var(--light);
    font-weight: var(--weight);
}
.page-other-menu ul li a:hover,
.page-other-menu ul li.current-menu-item a{
    color: var(--color);
}
.more{
    padding: var(--space);
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-list ul li header{
    display: flex;
    padding:var(--spaceS);
    justify-content: space-between;
    cursor: pointer;
}
.grid-list ul li header i,
.grid-list ul li header h2{
    padding: 0 var(--spaceS);
    font-size: var(--textsizeH);
    text-transform: uppercase;

}
.grid-list ul li header h2.years{
    font-family: 'Helvetica','Noto Sans SC', sans-serif;;
}
.grid-list li.active header i:before {
    content: '\f062';
}
.grid-list .grid {
    display: none;
}
.grid-list li:first-child .grid {
    display: block;
}

.gallery .swiper-wrapper{
    padding: 0 calc(var(--spaceS) + var(--spaceS)/2);
}
.gallery .swiper-slide{
    width: 110vh;
}
.gallery.gallery-img .swiper-slide{
    width: auto;
    padding: 0 calc(var(--spaceS)/2);
}
.gallery .swiper-pagination{
    bottom: auto;
}
.gallery .swiper-slide.space{
    width: calc(var(--spaceS) + var(--spaceS)/2 + var(--space));
}

.gallery-swiper .swiper-tool{
    position: relative;
    margin-top: 1rem;
    align-items: center;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 var(--space);
}
.gallery-img .gallery-swiper{
    padding: var(--spaceS) 0;
}
.gallery.gallery-img .swiper-slide a{
    display: block;
}
.gallery.gallery-img .swiper-slide img{
    height: 50vh;
    width: auto;
    border-radius: var(--borderR);
}
.text-gallery-swiper .text,
.gallery.gallery-img .swiper-slide .text{
    line-height: 1.2;
    font-size: 0.8em;
    padding-top: .25rem;
}
.gallery .box{
    width: 100%;
}
.gallery .box a{
    display: flex;
    flex-direction: row-reverse;
    background-color:var(--light);
    border-radius: var(--borderR);
    color: white;
    --color: white;
    --bgColor: black;
}
.gallery .box a>*{
    padding:var(--space);
}
.gallery .box .box-img{
    margin-bottom: 0;
    aspect-ratio: 1/1;
    width: 50%;
}
.gallery .box .box-img img{
    aspect-ratio: unset;

}
.gallery .box  .box-info{
    width: 50%;
}
.gallery .box  .box-info h2,
.gallery .box  .box-info h3{
    font-size: var(--textsizeB);
}
.gallery .box .box-info .text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 8;
    line-clamp: 8;
}

.top-gallery-wrap{
    padding:var(--spaceS) var(--space);

}
.top-gallery-video-play{
    position: relative;
}
.top-gallery-video-play a{
    display: block;
}
.top-gallery-video-play img,
.top-gallery-video video,
.top-gallery-img img{
    aspect-ratio: 1/0.35;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--borderR);
}
.top-gallery-video-play video{
    position: absolute;
    right:var(--spaceS);
    bottom:var(--spaceS);
    width:15%;
    height: auto;
    border-radius: var(--borderR);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);

}

.top-gallery-video-play:after{
    font-size: 1.2rem;
}
.top-swiper img{
    aspect-ratio: 1/0.4;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--borderR);
}

.post-header-title{
    padding:var(--spaceS);
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space);
}
.post-header-title>*{
    padding:0 var(--spaceS);

}
.post-header-title-content{
    max-width: 70%;
}
.post-header-title-del{
    width: 30%;
}
.post-header-title h1,
.post-header-title h2{
    font-size: var(--textsizeH);
}
.post-header-title h2{
    color: var(--light);
}
.post-header-title-del ul li {
    border-bottom: var(--borderColor) solid var(--borderSzie);
    padding: .35rem 0;
    width: 100%;
    display: flex;
    line-height: 1.2;
}

.post-header-title-del ul li b {
    flex: 1;
}
.post-header-title-del ul li div {
    flex: 3;
}
.single-artwork .post-menu,
.single-e-book .post-menu,
.single-video .post-menu{
    display: none;
}
.post-menu{
    z-index: 90;
    background-color: var(--bgColor);
    display: flex;
    justify-content: space-between;
}
.post-menu.sticky:before{
    left: 0;
    right: 0;
}
.post-menu ul{
    display: flex;
    justify-content: center;
}
.post-menu .share,
.post-menu .back,
.post-menu ul li{
    padding: 1rem var(--space);
}
.post-menu .share,
.post-menu .back,
.post-menu ul li a{
    text-transform: uppercase;
    font-weight: var(--weight);
    font-size: 0.9rem;
    cursor: pointer;
}

.post-menu.sticky ul li a{
    color: var(--light);
}
.post-menu.sticky ul li a:hover,
.post-menu.sticky ul li a.active{
    color: var(--color);
}
.post-menu{
    position: relative;
}
.show-share .addtoany_list{
    pointer-events: auto;
    opacity: 1;
}
.addtoany_list{
    position: fixed;
    right:0;
    background: white;
    top:50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex !important;
    flex-direction: column;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
}
.addtoany_list a, .widget .addtoany_list a{
    padding: 2px !important;
}

.plane-two {
    margin-bottom: var(--space);
}
.plane-wrap {
    display: flex;
}
.plane-wrap>* {
    padding: var(--spaceS);
    width: 25%;
    display: grid;
    grid-template-columns: 1fr;
}
.plane-block>*{
    padding: var(--spaceS);
}
.plane-block:nth-child(2) {
    width: 50%;
}
.plane-block-img img {
    width: 100%;
    height: auto;
}
.plane-block h2.title {
    text-transform: uppercase;
    font-size: var(--textsizeB);
    padding-bottom: 2rem;
}
.qr-block, .download-block {
    margin-top: 2rem;
}

.plane-block h3 {
    border-bottom: currentColor solid 1px;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    font-size: 1rem;
    text-transform: uppercase;
}
.plane-block-img.small {
    padding-right: 40%;
}
.plane-block.plane-bock-list-group{
    width: 75%;
    display: block;
}
.plane-block .plane-bock-list>h3{
    width: calc(66.66666% - var(--spaceS));
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    line-height: 1.2;
  
}
.plane-block .plane-bock-list>h3 span{
    display: block;
    padding-top: .25rem;
    color:#888;
    text-transform: capitalize;
}

.plane-bock-list>h3:after{
    font-family: var(--icon);
    content: '\2b';
}
.plane-bock-list.active>h3:after{
    content: '\f068';
}
.plane-bock-list .plane-block-text{
    display: none;
}
.plane-bock-list .plane-block-text>div{
    display: flex;
}
.plane-bock-list .plane-block-text .text{
    width: calc(66.66666% - var(--spaceS));
    padding-bottom: var(--spaceS);

}
.plane-bock-list .plane-block-text .plane-block{
    width: calc(33.33333% + var(--spaceS));
    padding-left: calc( var(--space) * 2);
}

.post-content section:last-child:before{
    display: none;
}
.video-content{
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    --plyr-color-main:var(--color);
    height: 100vh;

}


.video-wrap{
    padding: var(--space);
    width: 80%;

}

.inside #header,
.inside #mini-header,
.inside #footer{
    display: none;
}
.inside.single-artwork{
    --bgColor: #000;
    color: #fff;
    --color: #fff;
    --borderColor: #555;
}

.artwork-gallery{
    height: 75vh;
    background: black;
    color: #fff;
    --color: #fff;
    display: flex;
    flex-direction: column;
}
.single-shop .artwork-gallery{
    background: #fff;
    color: #000;
    --color: #000;
    height: 80vh;
}

.artwork-grid-swiper {
    height: 100%;
    flex: 1;
    width: 100%;
}
.artwork-grid-swiper .swiper-slide{
    padding-top: var(--spaceS);
}
.swiper-img-nav {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spaceS);
}
.swiper-img-nav span.active {
    opacity: 1;
}
.swiper-img-nav span {
    padding: 0 .25rem;
    height: 100%;
    cursor: pointer;
    opacity: 0.5;
}
.swiper-img-nav span video,
.swiper-img-nav span img {
    height: 100%;
    width: 70px;
    object-fit: cover;
}
.panzoom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.panzoom__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 1px;
    margin: auto;
}

.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;
}
.slide-video{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}
.slide-video .plyr{
    width: 60%;
    aspect-ratio: 16/9;
}

.text-gallery-swiper{
    padding-bottom: 2rem;
}
.text-gallery-swiper .swiper-slide{
    width: 100% !important;

}

.text-gallery-swiper .swiper-slide img{
    width: 100%;
    height: auto;
}
.text-gallery-swiper .swiper-tool{
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    align-items: center;
    padding:0 1rem;
    pointer-events: none;
}
.text-gallery-swiper  .swiper-btn{
    --color: #fff;
    color: #fff;
    width: 100%;
    --borderColor: #fff;
    justify-content: space-between;
    display: none;
    pointer-events: auto;
}
.swiper-pagination{
    pointer-events: auto;
}
.more-text>.text{
    display: none;
    padding-top: 1rem;
}
.more-btn{
    padding-top: 1rem;
}
.more-btn.show-more i:before{
    content:'\f068';
}
.qr-block {
    border: var(--borderColor) solid var(--borderSzie);
    border-radius: var(--borderR);
    align-self: flex-start;
    width: 60%;
    justify-self: center;
}
.qr-block h3 {
    padding: .5rem;
}
.qr-block-content {
    padding: 1rem;
    text-align: center;
    font-size: 0.8em;
}
.qr-block img {
    width: 100%;
    height: auto;
    border-radius: var(--borderR);
}

[lang="zh-Hans"] .cover-title{
    letter-spacing: 1rem;
    font-size: 3.5vw;
}
html[lang="zh-Hans"],[lang="zh-Hans"] body{
    font-weight: 400;
}
html[lang="zh-Hans"] .text{
    line-height: 1.7;
    text-align: justify;
}
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3, 
html[lang="zh-Hans"] h4,
html[lang="zh-Hans"] h5,
html[lang="zh-Hans"] h6{
    font-weight: 600;
}
html[lang="zh-Hans"] .footer-newsletter h2{
    line-height: 1.1;
}

#phone-header{
    position: sticky;
    width: 100%;
    background: var(--bgColor);
    top:0;
    left: 0;
    z-index: 999;
    display: none;
}
.phone-header-wrap{
    display: flex;
    justify-content: space-between;
    padding: var(--spaceS);
    align-items: center;
}
.open-phone-menu{
    padding: var(--spaceS);
    font-size: 2rem;
    cursor: pointer;
}
.phone-menu{
    padding: var(--spaceS) var(--spaceS) var(--space) var(--spaceS);
    border-top: solid var(--borderColor) var(--borderSzie);
    display: none;
}
.phone-menu-nav{
    padding: var(--spaceS);
}
.phone-menu-nav ul li{
    line-height: 1.7;
    text-transform: uppercase;
    font-weight: var(--weight);
    font-size: var(--textsizeM);
}
.phone-menu-nav ul li ul{
    display: none;
}
.phone-search-from .header-search-form input{
    border: solid var(--borderColor) var(--borderSzie);
}
.phone-menu .lng{
    padding:var(--space) var(--spaceS);
    font-weight: var(--weight);
    font-size: var(--textsizeM);
}
.phone-cover{
    height: 100vh;
}
.home #phone-header{
    position: fixed;
}




.home .current-plane{
    display: none;
}