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

.wf-main{overflow: hidden;width: 100%;padding: 3.2rem .3rem .9rem; background-size: cover;background-position: center center;background-repeat: no-repeat;}
.wf-inner{width: 100%;max-width: 16rem;margin: 0 auto;}
.wf-top{width: 100%;position: relative;display: flex;flex-wrap: wrap;}
.wf-top:before{content: '';position: absolute;top: -2px;left: 0;width: calc(100% + 4px);height: calc(100% + 4px);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;}
.wf-left{flex: 1;display: flex;align-items: center;justify-content: center;min-height: 7.5rem;padding: .3rem;}
.wf-box{width: 100%;max-width: 7.26rem;position: relative;}
.wf-img{width: 100%;}
.wf-img img{width: 100%;}
.wf-item{position: absolute;cursor: pointer;}
.wf-dot{display: block;position: relative;width: .14rem;height: .14rem;transform: scale(1.00);transition: all ease .5s;}
.wf-dot:before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: .4rem;height: .4rem;border-radius: 50%;background-color: #000000;opacity: 0.3;}
.wf-dot:after{transition: all ease .5s;content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: .14rem;height: .14rem;background-image: url('/static/home/images/wa8.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wf-text{opacity: 0;z-index: -1;visibility: hidden;transition: all ease .5s; position: absolute;bottom: 100%;left: 50%;transform: translate(-50%,0);padding-bottom: calc(.24rem + 6px);}
.wf-name{position: relative;white-space: nowrap;min-width: 1.9rem;padding: 0 .15rem;text-align: center;color: #000000;line-height: .6rem;background-color: #fff;border-radius: .1rem;}
.wf-name:before{content: '';position: absolute;top: -1px;left: 0;z-index: -1;width: 100%;height: 100%;padding: 1px;border-radius: .1rem;
   background: linear-gradient(90deg, #c397bf 0%, #758ac5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;mask-composite: exclude;}
.wf-name:after{content: '';position: absolute;bottom: -6px;left: 0;width: 100%;height: 6px;background-image: url('/static/home/images/wa9.png');background-size: auto 100%;background-position: center center;background-repeat: no-repeat;}

.wf-item:hover .wf-dot{transform: scale(1.2);}

.wf-right{opacity: 0;z-index: -1;visibility: hidden; position: absolute;top: 0;right: 0;width: 6rem;border-left: 2px solid #a0b3dc;border-radius: .3rem;background-image: url('/static/home/images/wa8.jpg');background-size: cover;background-position: center center;background-repeat: no-repeat;}
.wf-main.show .wf-right{position: relative;opacity: 1;z-index: 1;visibility: visible;}
.wf-main.show .wf-item.active .wf-dot:after{width: .24rem;height: .24rem;background-image: url('/static/home/images/wa8-b.png');}
.wf-main.show .wf-item.active .wf-text{opacity: 1;z-index: 1;visibility: visible;}

.wf-bottom{width: 100%;position: relative;padding-top: 1.45rem;margin-top: 1.5rem;}
.wf-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){
   .wf-main{padding-top: 1.45rem;}
}
@media(max-width: 750px){
    .wf-left{width: 100%;}
    .wf-right{width: calc(100%  - 2px);margin-left: 2px; border-top: 2px solid #a0b3dc;border-left:none;}
}

.wfa-b{width: 100%;}
.wfa-item{width: 100%;}
.wfa-link{display: block;width: 100%;}
.wfa-img{width: 100%;height: 3.75rem;line-height: 3.75rem;text-align: center;}
.wfa-img img{max-width: 67%;max-height: 75%;} 
.wfa-text{width: 100%;padding: .55rem .6rem;border-top: 1px solid rgba(0,0,0,.06);}
.wfa-name{width: 100%;margin-bottom: .15rem;color: #000000;font-weight: bold;line-height: 1.4;}
.wfa-intro{width: 100%;color: #666666;line-height: 1.87;}
.wfa-intro *{line-height: inherit;}

.wfa-close{position: absolute;top: .22rem;right: .22rem;z-index: 38;display: block;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;}
.wfa-prev{top: auto;margin-top: 0;left: .22rem;bottom: .22rem;width: .4rem;height: .4rem; background-image: url('/static/home/images/design-detail-arrow-prev.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
.wfa-next{top: auto;margin-top: 0;right: .22rem;bottom: .22rem;width: .4rem;height: .4rem; background-image: url('/static/home/images/design-detail-arrow-next.png'); background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}


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