.cr-main{position: absolute;left: 50%;margin-left: -9rem;top: 1.1rem;z-index: 1;}
.cr-inner{width: 100%;max-width: 18rem;margin: 0 auto;}
.cr-links{float: left;font-size: 0;}
.cr-dt{color: rgba(255,255,255,0.6);line-height: 0.66rem;display: inline-block;vertical-align: top;}
.cr-dt:before{content: "";display: inline-block;vertical-align: middle;width: 1em;height: 1em;background-image: url(/static/home/images/crumb-1.png);background-size: 100% 100%;margin-right: 0.1rem;position: relative;top: -1px;}
.cr-link{color: rgba(255,255,255,0.6);line-height: 0.66rem;display: inline-block;vertical-align: top;}
.cr-link:after{content: "";display: inline-block;margin: 0 0.2rem;pointer-events: none;width: 0.3125em;height: 0.625em;background-image: url(/static/home/images/crumb-arrow.png);background-size: 100% 100%;}
.cr-link:last-child:after{display: none;}
.cr-link:last-child{color: #fff;}
.cr-home-icon{height: 1em;position: relative;top: -1px;}
@media(max-width: 1200px){
    .cr-main{top: 46px;}
}
@media(max-width: 900px){
    .cr-main{left: 0.3rem;margin-left: 0;}
}
@media(max-width: 750px){
    .cr-links{display: none;}
}

.wg-main{overflow: hidden;width: 100%;padding: 3.2rem .3rem .9rem; background-size: cover;background-position: center center;background-repeat: no-repeat;}
.wg-inner{width: 100%;max-width: 16rem;margin: 0 auto;}
.wg-top{width: 100%;position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;}
.wg-top:before{content: '';position: absolute;top: -2px;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;}
.wg-left{width: 32.62%;position: relative;padding:.3rem 0 .3rem 1.2rem;display: flex;align-items: center;justify-content: center;min-height: 7.5rem;}
.wg-navbox{width: 100%;}
.wg-nav{width: 100%;padding: .08rem 0;position: relative;}
.wg-buttom{display: block;cursor: pointer;width: 100%;}
.wg-buttom .wg-name{display: inline-block;position: relative;padding: .17rem .35rem .17rem .55rem;min-width: 2.1rem;color: #000000;line-height: 1.6;background-color: rgba(255,255,255,.6);box-shadow: .03rem .04rem .1rem 0px rgba(0, 0, 0, 0.01);border-radius: calc(.17rem + .8em);}
.wg-buttom .wg-name:before{content: '';position: absolute;top: calc(.17rem + .8em);left: .16rem;margin-top: -.12rem;width: .24rem;height: .24rem;background-image: url('/static/home/images/product-detail-plus.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wg-sub{position: absolute;top: 0;left: 0;visibility: hidden;width: 100%;}
.wg-sub:before{content: '';position: absolute;top: -2px;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;}
.wg-box{padding:.35rem 0; position: relative;z-index: 1;background-color: rgba(255,255,255,.6);border-radius: .3rem;}
.wg-sub .wg-name{width: 100%;margin-bottom: .1rem;color: #000000;font-weight: bold;line-height: 1.4;}
.wg-sub .wg-textbox{width: 100%;color: #666666;line-height: 1.87;}
.wg-sub .wg-textbox *{line-height: inherit;} 

.wg-main.show .wg-nav.active .wg-buttom{display: none;} 
.wg-main.show .wg-nav.active .wg-sub{transition: all ease .5s;position: relative;opacity: 1;z-index: 1;visibility: visible;} 
.wg-main.show .wg-nav.active .wg-box{padding: .35rem;transition: all ease .5s;} 

.wg-right{width: calc(67.37% - 4px);position: relative;}
.wg-img{width: 100%;height: 7.5rem;line-height: 7.5rem;text-align: center;}
.wg-img img{max-width: 67%;max-height: 60%;}

.wg-bottom{width: 100%;position: relative;padding-top: 1.45rem;margin-top: 1.5rem;}
.wg-bottom:before{content: '';position: absolute;top: 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;}

@media(max-width: 1200px){
   .wg-main{padding-top: 1.45rem;}
}
@media(max-width: 750px){ 
   .wg-left{width: 100%;padding: .3rem .3rem .3rem 1.2rem;}
   .wg-right{width: 100%;}
   .wg-img{height: 5rem;line-height: 5rem;}
   .wg-img img{max-height: 90%;}
}

.wga-swiper{opacity: 0;z-index: -1;visibility: hidden; position: absolute;top: 0;right: 0;width: 100%;}
.wg-main.show .wg-img{display: none;}
.wg-main.show .wga-swiper{position: relative;opacity: 1;z-index: 1;visibility: visible;}
.wga-b{width: 100%;}
.wga-item{width: 100%;}
.wga-link{display: block;width: 100%;}
.wga-img{width: 100%;height: 7.5rem;line-height: 7.5rem;text-align: center;}
.wga-img img{max-width: 85%;max-height: 60%;} 
 
.wga-close{display: none; position: absolute;top: .22rem;right: .22rem;z-index: 38;cursor: pointer;width: .4rem;height: .4rem;background-image: url('/static/home/images/design-detail-close.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wga-prev{display: none;top: calc(50% - .2rem);margin-top: 0;left: .4rem;width: .4rem;height: .4rem; background-image: url('/static/home/images/product-detail-arrow-up.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wga-next{display: none;top: calc(50% + .4rem);margin-top: 0;left: .4rem;right: auto;width: .4rem;height: .4rem; background-image: url('/static/home/images/product-detail-arrow-down.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
 
.wg-main.show .wga-close{display: block;}
.wg-main.show .wga-prev{display: block;}
.wg-main.show .wga-next{display: block;}

@media(max-width: 750px){ 
    .wga-img{height: 5rem;line-height: 5rem;}
   .wga-img img{max-height: 90%;}
}

.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%;} 
}


.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: .5rem;height: 3.1rem;}
.we-img img{position: absolute;left: 0;top: 0; width: 100%;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: .3rem;height: 2.7rem;}
    .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: .3rem;height: 2.7rem;}
}

 

@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;}
}