.container {
  position: relative;
}

.container .banner {
  background: url('../../img/product/product_detail_1.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .banner .box {
  width: 16.6rem;
  height: 7.6rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10px 80.5px 0px rgba(0, 0, 0, 0.06);

  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  border-radius: 0 .4rem 0 .4rem;
  margin: 2.38rem 1.3rem 1.3rem 1.3rem;
  gap: .6rem;
  padding: .9rem .8rem;
}

.container .banner .box_m {
    display: none;
}

.container .banner .box .left_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 1.4rem;
  /* padding: .9rem 0; */
  gap: .3rem;
  justify-content: center;
  align-items: center;
}

.container .banner .box .left_box .button {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.container .banner .box .left_box .button:hover {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  border-style: none;
}

.container .banner .box .left_box .prev,
.container .banner .box .left_box .next {
  border: .01rem solid rgba(102, 102, 102, 1);
}

.container .banner .box .left_box .button img {
  width: .08rem;
  height: .04rem;
}

.container .banner .box .left_box .button .normal {
  display: block;
}

.container .banner .box .left_box .button .active {
  display: none;
}

.container .banner .box .left_box .button:hover .normal {
  display: none;
}

.container .banner .box .left_box .button:hover .active {
  display: block;
}

.container .banner .box .left_box .product_list_box {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container .banner .box .left_box .product_list_box .bannerbox-swiper {
  height: 100%;
}

.container .banner .box .left_box .product_list_box .bannerbox-swiper .swiper-slide::after {
    height: 0;
    width: 0;
}


.container .banner .box .left_box .product_list_box .product_list_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.4rem;
  backdrop-filter: blur(.6rem);
  background: rgba(243, 245, 250, 1);
  border-radius: 0 .24rem 0 .24rem;
}


.container .banner .box .left_box .product_list_box .product_list_item img {
  width: .7rem;
  height: .99rem;
  object-fit: cover;
}

.container .banner .box .right_box {
  display: flex;
  gap: .9rem;
}



.container .banner .box .right_box .right_box_img {
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 0 .4rem 0 .4rem;
  background: rgba(243, 245, 250, 1);
  backdrop-filter: blur(60px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.container .banner .box .right_box .right_box_img img {
  width: 3.2rem;
  height: 4.5rem;
}

.container .banner .box .right_box .right_box_content {
  width: 5.8rem;
}

.container .banner .box .right_box .right_box_content .tag {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  border-radius: .99rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .76rem 0 .32rem 0;
  width: fit-content;
  padding: 0.06rem 0.3rem;
  /*height: .35rem;*/
}

.container .banner .box .right_box .right_box_content .tag h2 {
  font-size: .20rem;
  font-weight: 400;
  color: #fff;
  font-family: 'HarmonyOS Sans SC';
}

.container .banner .box .right_box .right_box_content .title {
  margin-bottom: .4rem;
}

.container .banner .box .right_box .right_box_content .title h2 {
  font-size: .4rem;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
}

.container .banner .box .right_box .right_box_content .desc {
  margin-bottom: 1.32rem;
}

.container .banner .box .right_box .right_box_content .desc p {
  font-size: .18rem;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  font-family: 'HarmonyOS Sans SC';
  line-height: .3rem;
}

.container .banner .box .right_box .right_box_content .button {
  border: .01rem solid rgba(1, 104, 183, 1);
  border-radius: .225rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.36rem;
  height: .45rem;
}

.container .banner .box .right_box .right_box_content .button span {
  font-size: .14rem;
  font-weight: 500;
  color: rgba(1, 104, 183, 1);
  font-family: 'HarmonyOS Sans SC';
}

.container .performance {
  margin: 0 1.3rem 1.3rem 1.3rem;
}

.container .performance .performance_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .performance .performance_top .performance_top_title h2 {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: .40rem;
  font-weight: 700;
  font-family: 'HarmonyOS Sans SC';
}

.container .performance .performance_top .buttons {
  display: flex;
  align-items: center;
  gap: .28rem;
}

.container .performance .performance_top .buttons .button {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border: .01rem solid rgba(208, 208, 208, 1);
}

.container .performance .performance_top .buttons .button:hover {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  border-style: none;
}

.container .performance .performance_top .buttons .button img {
  width: .1275rem;
  height: .075rem;
}

.container .performance .performance_top .buttons .button .normal {
  display: block;
}

.container .performance .performance_top .buttons .button .active {
  display: none;
}

.container .performance .performance_top .buttons .button:hover .normal {
  display: none;
}

.container .performance .performance_top .buttons .button:hover .active {
  display: block;
}

.container .performance .performance_box {
  display: flex;
  gap: .4rem;
  margin-top: .87rem;
  /* overflow-x: auto; */
  height: 4rem;
  align-items: end;
  width: 16.6rem;
  overflow: hidden;
}

.container .performance .performance_box .performance-swiper {
  width: 100%;
}

.container .performance .performance_box .performance_box_item {
  position: relative;
  padding: .63rem .46rem;
  width: 5.26rem;
  height: 3.4rem;
  border-radius: 0 .4rem 0 .4rem;
  background: linear-gradient(93.3deg, rgba(16, 73, 158, 0.06) 1.72%, rgba(65, 124, 172, 0.06) 40.85%, rgba(114, 179, 44, 0.06) 99.8%);
}

.container .performance .performance_box .performance_box_item:hover {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
}

.container .performance .performance_box .performance_box_item .performance_box_item_index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: .74rem;
  height: .74rem;
  border-radius: .1rem;
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  box-shadow: 0 0 .347rem 0 rgba(0, 58, 183, 0.12);
  position: absolute;
  top: -.37rem;
  left: .46rem;
}

.container .performance .performance_box .performance_box_item .performance_box_item_index span {
  font-size: .3rem;
  font-weight: 500;
  line-height: .34rem;
  color: #fff;
  font-family: 'HarmonyOS Sans SC';
}

.container .performance .performance_box .performance_box_item:hover .performance_box_item_index {
  background: rgba(255, 255, 255, 1);
}

.container .performance .performance_box .performance_box_item:hover .performance_box_item_index span {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container .performance .performance_box .performance_box_item .performance_box_item_title {
  margin: .94rem 0 .3rem 0;
}

.container .performance .performance_box .performance_box_item .performance_box_item_title h2 {
  font-size: .3rem;
  font-weight: 700;
  line-height: .34rem;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
}

.container .performance .performance_box .performance_box_item:hover .performance_box_item_title h2 {
  color: rgba(255, 255, 255, 1);
}

.container .performance .performance_box .performance_box_item .performance_box_item_desc p {
  font-size: .16rem;
  font-weight: 400;
  line-height: .28rem;
  color: rgba(51, 51, 51, .6);
  font-family: 'HarmonyOS Sans SC';
}

.container .performance .performance_box .performance_box_item:hover .performance_box_item_desc p {
  color: rgba(255, 255, 255, .8);
}

.container .performance .performance_box .performance_box_item .performance_box_item_icon {
  position: absolute;
  bottom: .36rem;
  right: .36rem;
}

.container .performance .performance_box .performance_box_item .performance_box_item_icon img {
  width: 1.2rem;
  height: 1.2rem;
}

.container .application {
  margin-bottom: 1.2rem;
}

.container .application .application_top_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
}

.container .application .application_top_title h2 {
  font-size: .4rem;
  font-weight: 700;
  line-height: .44rem;
  font-family: 'HarmonyOS Sans SC';
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container .application .application_box {
  display: flex;
  gap: .5rem;
  /* overflow-x: auto; */
  height: 3.6rem;
  width: 100%;
}

.container .application .application_box .application_box_item {
  position: relative;
  /* padding: .3rem .4rem; */
  /* width: 4.8rem; */
  height: 3.6rem;
  border-radius: 0 .4rem 0 .4rem;
  overflow: hidden;
  flex-shrink: 0;
}

.container .application .application_box .application_box_item .application_box_item_img {
  width: 4.8rem;
  width: 100%;
  height: 3.6rem;
  object-fit: cover;
}

.container .application .application_box .application_box_item .application_box_item_box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: .3rem .4rem;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.container .application .application_box .application_box_item:hover .application_box_item_box {
  background: linear-gradient(90deg, rgba(114, 179, 44, 0.9) 0%, rgba(65, 124, 172, 0.9) 40.1%, rgba(16, 73, 158, 0.9) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20px);
  mask-image: linear-gradient(180deg, transparent 0%, black 20px);
}

.container .application .application_box .application_box_item .application_box_item_box .application_box_item_box_title {
  font-size: .26rem;
  font-weight: 400;
  line-height: .32rem;
  color: rgba(255, 255, 255, 1);
  font-family: 'HarmonyOS Sans SC';
  transition: all 0.3s ease;
}

.container .application .application_box .application_box_item .application_box_item_box .button {
  opacity: 0;
  
    color: rgba(255, 255, 255, 1);
  /*background: rgba(0, 0, 0, 0.35);*/
  /*backdrop-filter: blur(.129rem);*/
  /*border-radius: .26rem;*/
  /*width: 1.7rem;*/
  /*height: 0;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between;*/
  /*cursor: pointer;*/

  transition: height 0.3s ease;
  pointer-events: none;
}

.container .application .application_box .application_box_item:hover .application_box_item_box {
  transform: translateY(0);
}

.container .application .application_box .application_box_item:hover .application_box_item_box .button {
  opacity: 1;
  pointer-events: auto;
  margin-top: .25rem;
  /*height: .44rem;*/
  /*padding: .14rem .14rem .14rem .25rem;*/
}


/*.container .application .application_box .application_box_item .application_box_item_box .button span {*/
/*  font-size: .14rem;*/
/*  line-height: .16rem;*/
/*  font-weight: 400;*/
/*  font-family: 'HarmonyOS Sans SC';*/
/*  color: rgba(255, 255, 255, 1);*/
/*  transition: color 0.3s ease;*/
/*}*/

/*.container .application .application_box .application_box_item .application_box_item_box .button .icons {*/
/*  width: .24rem;*/
/*  height: .24rem;*/
/*  border-radius: 50%;*/
/*  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/

/*.container .application .application_box .application_box_item .application_box_item_box .button .icon {*/
/*  height: .064rem;*/
/*  width: .032rem;*/
/*}*/

.container .application .control {
  margin: .68rem 1.3rem;
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.container .application .control .line {
  width: 14rem;
  height: .02rem;
  background: rgba(223, 223, 223, 1);
}

.container .application .control .line .line_item {
  width: 20%;
  height: .02rem;
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
}

.container .application .control .buttons {
  display: flex;
  align-items: center;
  gap: .28rem;
}

.container .application .control .buttons .button {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border: .01rem solid rgba(208, 208, 208, 1);
}

.container .application .control .buttons .button:hover {
  background: linear-gradient(93.3deg, #10499E 1.72%, #417CAC 40.85%, #72B32C 99.8%);
  border-style: none;
}

.container .application .control .buttons .button img {
  width: .1275rem;
  height: .075rem;
}

.container .application .control .buttons .button .normal {
  display: block;
}

.container .application .control .buttons .button .active {
  display: none;
}

.container .application .control .buttons .button:hover .normal {
  display: none;
}

.container .application .control .buttons .button:hover .active {
  display: block;
}

.container .application .application_box .application-swiper {
  width: 100%;
  height: 100%;
  padding:0 1.3rem;
}



@media (max-width: 767px) {
    .container .banner {
        padding: 0 .32rem;
    }
    .container .banner .box .left_box .button {
        width: .6rem;
        height: .6rem;
    }
    .container .banner .box .left_box .button img {
        width: .16rem;
        height: auto;
    }
    .container .banner .box {
        width: 100%;
        padding: .2rem;
        height: 8rem;
        margin: 2.38rem 0 1.3rem 0;
        gap: .3rem;
    }
    .container .banner .box .right_box {
        flex-direction: column;
        gap: 0;
    }
    .container .banner .box .right_box .right_box_img {
        width: 100%;
        height: 4.48rem;
    }
    .container .banner .box .right_box .right_box_img img {
        width: 2.2rem;
        height: 3.5rem;
    }
    .container .banner .box .right_box .right_box_content {
        width: 100%;
    }
    .container .banner .box .right_box .right_box_content .tag {
        margin: 0 0 .36rem 0;
    }
    .container .banner .box .right_box .right_box_content .title {
        margin:  0 0 .4rem 0;
    }
    .container .banner .box .right_box .right_box_content .title h2 {
        font-size: .4rem;
    }
    .container .banner .box .right_box .right_box_content .desc {
        margin: 0 0 .4rem 0;
    }
    
    .container .performance {
        margin: 0 .32rem 1.3rem .32rem;
    }
    .container .performance .performance_top .buttons .button {
        width: .64rem;
        height: .64rem;
    }
    .container .performance .performance_top .buttons .button img {
        width: .24rem;
        height: auto;
    }
    .container .performance .performance_top .performance_top_title h2 {
        font-size: .46rem;
    }
    .container .performance .performance_box {
        width: 100%;
    }
    .container .performance .performance_box .performance_box_item {
        padding: .63rem .36rem;
    }
    .container .performance .performance_box .performance_box_item .performance_box_item_title h2 {
        font-size: .36rem;
    }
    .container .performance .performance_box .performance_box_item .performance_box_item_desc p {
        font-size: .22rem;
    }
    
    .container .application .application_top_title h2 {
        font-size: .46rem;
    }
    .container .application .application_box .application-swiper {
        padding: 0 .32rem;
        overflow: hidden;
    }
    .container .application .application_box .application_box_item:hover .application_box_item_box .button .combtn {
        font-size: .22rem;
    }
    .container .application .control {
        gap: .6rem;
    }
    .container .application .control .buttons .button {
        width: .64rem;
        height: .64rem;
    }
    .container .application .control .buttons .button img {
        width: .24rem;
        height: auto;
    }
    
    .container .application .application_box .application_box_item .application_box_item_box .button {
        height: 0;
    }
    
    .container .application .application_box .application_box_item:hover .application_box_item_box .button {
        height: .64rem;
    }
    .container .banner .box .right_box .right_box_content .desc p {
        font-size: .26rem;
        line-height: 180%;
        
    }
    .container .banner .box {
        display: none;
    }
    .container .banner .box_m.box {
        display: block;
        width: 100%;
        padding: .4rem;
        height: 11.9rem;
        margin: 1.2rem 0 1.3rem 0;
        gap: .3rem;
    }
    
    .container .banner .box .left_box .product_list_box {
        flex-direction: unset;
        width: 100%;
        height: 1.3rem;
    }
    .container .banner .box .left_box .product_list_box .bannerbox-swiper-2 {
        width: 100%;
        overflow: hidden;
    }
    .banner .swiper-slide {
        height: 100% !important;
    }
    .banner .swiper-slide:after {
        display: none;
    }
    .container .banner .box .left_box {
        width: 100%;
        flex-direction: unset;
        margin: .4rem 0 .6rem 0;
        align-items: center;
        gap: .4rem;
    }
    .container .banner .box .left_box .product_list_box .product_list_item {
        /*width: 1.8rem;*/
        width: 100%;
        height: 1.2rem;
    }
    .container .banner .box .right_box .right_box_content .button {
        width: 1.92rem;
        height: .62rem;
        border-radius: 1rem;
    }
    .container .banner .box .right_box .right_box_content .button span {
        font-size: .26rem;
        font-weight: 500;
    }
}