.wh-main{width: 100%;position: relative;}
.wh-b{width: 100%;}
.wh-box{width: 100%;height: 9.6rem;max-height: 100vh;position: relative;background-color: #000;}
.wh-item{position: relative;overflow: hidden;}
.wh-img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.wh-video{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.wh-prev{left: .3rem;width: .4rem;height: .4rem;background-color: transparent;background-image: url('/static/home/images/wa12.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wh-next{transform: rotate(-180deg); right: .3rem;width: .4rem;height: .4rem;background-color: transparent;background-image: url('/static/home/images/wa12.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}


@media(max-width: 1200px){
    .wh-box{height: auto;padding-top: 56.25%;} 
}

.wc-main{position: relative;width: 100%;display: flex;align-items: center;min-height: 9.6rem;padding: 1rem .3rem;background-color: #f7fbfd;background-size: 100% auto;background-position: top center;background-repeat: no-repeat;}
.wc-main:before{content: '';position: absolute;bottom: 0;left: 50%;transform: translate(-50%,0);width: 16rem;max-width: calc(100% - .6rem);height: 1px;background-image: url('/static/home/images/wa3.jpg'); background-size: cover;background-position: center center;background-repeat: no-repeat;}
.wc-inner{width: 100%;max-width: 16rem;margin: 0 auto;}
.wc-titles{width: 100%;margin-bottom: .5rem;text-align: center;color: #000000;font-size: 1rem;line-height: 1.08rem;font-weight: bold;}
.wc-intro{width: 100%;max-width: 51em;margin: 0 auto .7rem;text-align: center;color: #000000;line-height: 1.5;}
.wc-morebox{width: 100%;text-align: center;}
.wc-more{display: inline-block;cursor: pointer;position: relative;}
.wc-more:before{content: '';position: absolute;top: -2px;left: 0;width: 100%;height: 100%;padding: 2px;border-radius: .1rem;
   background: linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;mask-composite: exclude;}
.wc-more span{display: block;z-index: 1;width: 100%;padding: 0 .5rem;text-align: center;color: #000000;line-height: .7rem;font-weight: bold;}
.wc-more:hover span{color: #ef99b8;}

@media(max-width: 750px){
    .wc-titles{font-size: .7rem;line-height: .8rem;}
}

.wd-main{overflow: hidden;position: relative; width: 100%;padding: 1.45rem  0 1.5rem;background-color: #f7fbfd;background-size: 100% auto;background-position: top center;background-repeat: no-repeat;}
/* .wd-main:before{content: '';position: absolute;bottom: 0;left: 50%;transform: translate(-50%,0);width: 16rem;max-width: calc(100% - .6rem);height: 1px;background-image: url('/static/home/images/wa3.jpg'); background-size: cover;background-position: center center;background-repeat: no-repeat;} */
.wd-top{width: 16rem;max-width: calc(100% - .6rem);margin: 0 auto;text-align: center;}
.wd-titles{width: 100%;margin-bottom: .3rem;color: #000000;font-weight: bold;line-height: 1.16;}
.wd-navbox{width: 100%;font-size: 0;padding:2px 0 .35rem;}
.wd-nav{display: inline-block;cursor: pointer;position: relative;margin: 0 .1rem .1rem;}
.wd-nav:before{content: '';position: absolute;top: -2px;left: 0;width: 100%;height: 100%;padding: 2px;border-radius: .1rem;
   background: linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;mask-composite: exclude;}
.wd-nav span{display: block;z-index: 1;width: 100%;min-width: 1.8rem;padding: 0 .2rem;text-align: center;color: #000000;line-height: .6rem;font-weight: bold;}
.wd-nav:hover span{color: #ef99b8;}
.wd-nav.active span{color: #ef99b8;}


.wd-bottom{width: 16rem;max-width: calc(100% - .6rem);margin: 0 auto; position: relative;}
.wd-one{opacity: 0;z-index: -1;visibility: hidden;position: absolute;top: 0;left: 0;width: 100%;}
.wd-one.show{position: relative;z-index: 1;opacity: 1;visibility: visible;}
.wd-cont{width: 100%;margin-bottom: .5rem;position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;} 
.wd-item{position: relative;display: block;cursor: pointer;width: calc(660/1920*100%);padding: .15rem .25rem .15rem .2rem;margin-bottom: .3rem;}
.wd-item:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('/static/home/images/wa2-b.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wd-img{position: relative;z-index: 1;width: 100%;overflow: hidden;padding-top: calc(300/594*100%);transition: all ease .5s;}
.wd-img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.00);transition: all ease .5s;}
.wd-img{mask-size: 100% 100%;-webkit-mask-size: 100% 100%;max-width: none;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-image: url(/static/home/images/wa2.png);mask-image: url(/static/home/images/wa2.png);}
.wd-text{opacity: 0;z-index: -1;transition: all ease .5s; position: absolute;top: 50%;left: 0;transform: translate(0,-50%);width: 100%;text-align: center;}
.wd-name{width: 100%;margin-bottom: .1rem;color: #f6efb9;line-height: 1.5;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.wd-intro{width: 100%;color: #f6efb9;line-height: 1.6;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.wd-item:nth-child(6n + 1) .wd-text{padding: 0 .6rem  0 .3rem;}
.wd-item:nth-child(6n + 2) .wd-text{padding: 0 .7rem ;}
.wd-item:nth-child(6n + 3) .wd-text{padding: 0 .3rem  0 .7rem;} 
.wd-item:nth-child(6n + 4) .wd-text{padding: 0 .6rem  0 .3rem;}
.wd-item:nth-child(6n + 5) .wd-text{padding: 0 .7rem ;}
.wd-item:nth-child(6n + 6) .wd-text{padding: 0 .3rem  0 .7rem;} 

.wd-item:nth-child(6n + 2){position: absolute;top: 0;left: calc(610/1920*100%);width:calc(700/1920*100%);}
.wd-item:nth-child(6n + 5){position: absolute;bottom:  0;left: calc(610/1920*100%);width:calc(700/1920*100%);}
.wd-item:nth-child(6n + 3){margin-left: calc(500/1920*100%);}


.wd-item:nth-child(6n + 2):before{background-image: url('/static/home/images/wa3-b.png');}
.wd-item:nth-child(6n + 2) .wd-img{padding-top: calc(300/629*100%);}
.wd-item:nth-child(6n + 2) .wd-img{-webkit-mask-image: url(/static/home/images/wa3.png);mask-image: url(/static/home/images/wa3.png);} 

.wd-item:nth-child(6n + 3):before{background-image: url('/static/home/images/wa4-b.png');} 
.wd-item:nth-child(6n + 3) .wd-img{-webkit-mask-image: url(/static/home/images/wa4.png);mask-image: url(/static/home/images/wa4.png);}

.wd-item:nth-child(6n + 4):before{background-image: url('/static/home/images/wa5-b.png');}
.wd-item:nth-child(6n + 4) .wd-img{-webkit-mask-image: url(/static/home/images/wa5.png);mask-image: url(/static/home/images/wa5.png);}

.wd-item:nth-child(6n + 5):before{background-image: url('/static/home/images/wa6-b.png');}
.wd-item:nth-child(6n + 5) .wd-img{padding-top: calc(300/629*100%);}
.wd-item:nth-child(6n + 5) .wd-img{-webkit-mask-image: url(/static/home/images/wa6.png);mask-image: url(/static/home/images/wa6.png);}

.wd-item:nth-child(6n + 6):before{background-image: url('/static/home/images/wa7-b.png');} 
.wd-item:nth-child(6n + 6) .wd-img{-webkit-mask-image: url(/static/home/images/wa7.png);mask-image: url(/static/home/images/wa7.png);}

.wd-item:nth-child(6n + 1){mask-size: 100% 100%;-webkit-mask-size: 100% 100%;max-width: none;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-image: url(/static/home/images/wa2-c.png);mask-image: url(/static/home/images/wa2-c.png);}
.wd-item:nth-child(6n + 1):after{content: '';position: absolute;top: 0;left: 0; opacity: 0; 
    width: .5rem;
    height: .5rem;
    background:  linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%); 
    filter: blur(4px); 
}

.wd-item:nth-child(6n + 3){mask-size: 100% 100%;-webkit-mask-size: 100% 100%;max-width: none;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-image: url(/static/home/images/wa4-c.png);mask-image: url(/static/home/images/wa4-c.png);}
.wd-item:nth-child(6n + 3):after{content: '';position: absolute;top: 0;left: 0;  opacity: 0; 
    width: .5rem;
    height: .5rem;
    background:  linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%); 
    filter: blur(4px); 
}

.wd-item:nth-child(6n + 5){mask-size: 100% 100%;-webkit-mask-size: 100% 100%;max-width: none;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-image: url(/static/home/images/wa6-c.png);mask-image: url(/static/home/images/wa6-c.png);}
.wd-item:nth-child(6n + 5):after{content: '';position: absolute;top: 0;left: 0;opacity: 0; 
    width: .5rem;
    height: .5rem;
    background:  linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%); 
    filter: blur(4px); 
}


@keyframes moveAround {
    0%, 100% {
        top: calc(-.5rem + 1px);
        left: calc(-.5rem + 1px);
    }
    30% {
        top: calc(-.5rem + 1px);
        left: calc(100% - 1px);
    } 
    50% {
        top: calc(100% - 1px);
        left: calc(100% - .8rem + 1px);
    }
    80% {
        top: calc(100% - 1px);
        left: calc(-.5rem + 1px);
    }
}

@keyframes moveAround2 {
    0%, 100% {
        top: calc(-.5rem + 1px);
        left: calc(.3rem + 1px);
    }
    30% {
        top: calc(-.5rem + 1px);
        left: calc(100% - 1px);
    } 
    50% {
        top: calc(100% - 1px);
        left: calc(100% - 1px);
    }
    80% {
        top: calc(100% - 1px);
        left: calc(-.5rem + 1px);
    }
}

@keyframes moveAround3 {
    0%, 100% {
        top: calc(-.5rem + 1px);
        left: calc(-.5rem + 1px);
    }
    30% {
        top: calc(-.5rem + 1px);
        left: calc(100% - .8rem + 1px);
    } 
    50% {
        top: calc(100% - 1px);
        left: calc(100% - 1px);
    }
    80% {
        top: calc(100% - 1px);
        left: calc(.3rem + 1px);
    }
}

.wd-img1{opacity: 1;}
.wd-img2{opacity: 0;}



.wd-item.active:nth-child(6n + 1):after{animation: moveAround 8s linear infinite;opacity: 1;}
.wd-item.active:nth-child(6n + 3):after{animation: moveAround2 8s linear infinite;opacity: 1;}
.wd-item.active:nth-child(6n + 5):after{animation: moveAround3 8s linear infinite;opacity: 1;}
.wd-item.no_active .wd-img .wd-img1{opacity: .3;}

.wd-item:hover .wd-img{transform: scale(1.05);}
.wd-item:hover .wd-img{transition-delay: .5s;}
 @media(min-width: 750px){
    .wd-item.active .wd-img1{opacity: 0;}
    .wd-item.active .wd-img2{opacity: 1;}
   .wd-item.active .wd-text{opacity: 1;z-index: 8;}
   .wd-item:hover .wd-text{opacity: 1;z-index: 8;} 
   .wd-item.active .wd-img:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;opacity: .3;}
}
@media(max-width: 750px){
    .wd-navbox{white-space: nowrap;overflow: auto;} 
}

.we-main{overflow: hidden;position: relative;width: 100%;padding: 1.45rem  0 1.5rem;background-color: #f7fbfd;background-size: 100% auto;background-position: bottom center;background-repeat: no-repeat;}
.we-main:before{content: '';position: absolute;bottom: 0;left: 50%;transform: translate(-50%,0);width: 16rem;max-width: calc(100% - .6rem);height: 1px;background-image: url('/static/home/images/wa3.jpg'); background-size: cover;background-position: center center;background-repeat: no-repeat;}
.we-inner{width: 100%;max-width: 16rem;margin: 0 auto;}
.we-titles{width: 100%;margin-bottom: .8rem;text-align: center;color: #000000;font-weight: bold;line-height: 1.16;}
.we-cont{display: block;margin: 0 auto;width: 50%;padding-bottom: .9rem;}
.we-b{width: 100%;overflow: visible;}
.we-item{opacity: 0;visibility: hidden;transition: all 1s ease;width: 50%;height: auto;display: flex;align-items: center;padding: 2px 0;}
.we-link{transform-style: preserve-3d;perspective: 1000px;transition: all 1s ease;
position: relative;display: block;cursor: pointer;width: 100%;padding: .85rem .3rem;text-align: center;}
.we-text{width: 100%;position: relative;z-index: 2;}
.we-name{width: 100%;color: #000000;line-height: 1.5;font-weight: bold;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.we-img{position: relative;z-index: 1;transition: all 1s ease;width: 100%;margin-top: 1rem;height: 2.6rem;}
.we-img img{position: absolute;left: 15%;top: 0; width: 70%;height: 100%;object-fit: contain; transform: scale(1.00);transition: all ease .5s;}
.we-bg{position: absolute;top: 0;left: 0; width: 100%;height: 100%;}
.we-bg:before{content: '';
   position: absolute;top: 0;left: 0;
   width: 100%;height: 100%;padding: 2px;border-radius: .3rem;
   background: linear-gradient(90deg, #a0b3dc 0%, #ef99b8 33%,#738ec7 66%, #7ec6b6 100%);
   -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;mask-composite: exclude;}
.we-img2{opacity: 0;transition: all 1s ease;position: absolute;top: 2px;left: 2px;width: 100%;height: 100%;object-fit: cover;border-radius: .3rem;}
.we-bg .we-text{opacity: 0;padding: .85rem .3rem;}
.we-img1{opacity: 1;} 


/* .we-link:hover .we-img .we-img1{opacity: 0;}
.we-link:hover .we-img2{opacity: 1;}
.we-link:hover .we-text{opacity: 0;}
.we-link:hover .we-bg .we-text{opacity: 1;transition: all ease 1s;} */

.we-link:hover .we-img img{transform: scale(1.05);}
.we-link:hover .we-name{color: #ef99b8;}

@media(min-width: 750px){ 
    .we-item.we_item1,
    .we-item.we_item2,
    .we-item.we_item3,
    .we-item.we_item4{opacity: 1;visibility: visible;}
    .we-item.we_item2 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(22deg) scale(1);}
    .we-item.we_item2 .we-link{padding-right: .45rem;}
    .we-item.we_item3 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(-22deg) scale(1);}
    .we-item.we_item3 .we-link{padding-left: .45rem;}
    
    .we-item.we_item1 .we-bg{top: .1rem;height: calc(100% - .2rem);transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(36deg) scale(1);}
    .we-item.we_item1 .we-link{padding-right: .6rem;}
    .we-item.we_item1 .we-img{margin-top: .8rem;height: 2.2rem;line-height: 2.2rem;}
    .we-item.we_item4 .we-bg{top: .1rem;height: calc(100% - .2rem);transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(-36deg) scale(1);}
    .we-item.we_item4 .we-link{padding-left: .6rem;}
    .we-item.we_item4 .we-img{margin-top: .8rem;height: 2.2rem;line-height: 2.2rem;}
}

 

@media(min-width: 2000px){  
    .we-item.we_item2 .we-bg{ transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(5deg) scale(1);} 
    .we-item.we_item3 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(-5deg) scale(1);} 
    
    .we-item.we_item1 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(13deg) scale(1);} 
    .we-item.we_item4 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(-13deg) scale(1);} 
}

 

@media(max-width: 750px){
    .we-item.we_item1,
    .we-item.we_item2,
    .we-item.we_item3 {opacity: 1;visibility: visible;}
    .we-cont{width: 100%;max-width: 4.1rem;}
    .we-item{width: 100%;}
    .we-item.we_item1 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(36deg) scale(1);}
    .we-item.we_item1 .we-link{padding-right: .45rem;}
    .we-item.we_item3 .we-bg{transform: translate3d(0, 0px, 0) rotateX(0deg) rotateY(-36deg) scale(1);}
    .we-item.we_item3 .we-link{padding-left: .45rem;}
}

.wb-main{width: 100%;min-height: 100vh; padding: 3.2rem .3rem .9rem;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.wb-inner{width: 100%;max-width: 16rem;margin: 0 auto;}
.wb-titles{width: 100%;text-align: center;margin-bottom: .8rem;color: #000000;font-weight: bold;line-height: 1.16;}
.wb-cont{width: 100%;display: flex;flex-wrap: wrap;}
.wb-item{width: 25%;text-align: center;margin-bottom: .6rem;}
.wb-link{display: flex;align-content: space-between;flex-wrap: wrap;margin: 0 auto;cursor: pointer;width: calc(100% - .1rem);max-width: 3.8rem; height: 100%;min-height: 2.65rem;background-image: url('/static/home/images/wa1.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wb-img{width: 100%;height: 2.04rem;line-height: 2.04rem;}
.wb-img img{width: 3.64rem;max-width: calc(100% - 1.1rem);height: 100%;object-fit: contain; transform: scale(1.00);transition: all ease .5s;}
.wb-text{position: relative; width: 100%;padding: 0 .66rem 0 .44rem;display: flex;align-items: center;min-height: .74rem;}
.wb-text:before{content: '';position: absolute;top: 0;left: .44rem;width: calc(100% - 1.1rem);height: 1px;background-color: #000000;opacity: 0.06;}
.wb-text:after{content: '';position: absolute;top: 50%;right: .66rem;transform: translate(0,-50%);width: .41rem;height: .41rem;border-radius: 50%;border: solid 1px rgba(0,0,0,.1);background-image: url('/static/home/images/case-icon.png');background-size: .06rem auto;background-position: center center;background-repeat: no-repeat;}
.wb-more{color: #666666;line-height: 1.6;font-weight: bold;}
.wb-link:hover .wb-img img{transform: scale(1.05);}
.wb-link:hover .wb-text:after{background-image: url('/static/home/images/case-icon-b.png');background-color: #000;border: solid 1px #000;}
.wb-link:hover .wb-more{color: #ef99b8;}

.wb-main.cont2{padding: 1.45rem .3rem 1.5rem;background-color: #f7fbfd;background-size: 100% auto;background-position: top center;}
/* .wb-main.cont2 .wb-cont{padding-bottom: .2rem;} */
@media(max-width: 1200px){
   .wb-main{padding-top: 1.45rem;}
}
@media(max-width: 750px){
    .wb-item{width: 50%;}
}