* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/标小智无界黑.ttf');
  font-weight: normal;
  font-style: normal;
}
img{
  width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}
video{
  width: 100%;
  display: block;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-y: scroll; /* 强制显示垂直滚动条轨道（隐藏后仍可滚动） */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
p{
  margin: 0;
  padding: 0;
}
#app{
    min-width: 1500px;
    overflow: auto;
}


.head{
  position: relative;
  width: 100%;
  padding: 0 0 0 0;
}
.video3{
    height: 480px;
    object-fit: cover;
  /* width: 100%; */
}
.head-title{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:819px;
}
.head-img{
  position: absolute;
  right: 52px;
  bottom: 33px;
  width: 573px;
}
.head-btns{
  position: absolute;
  right: 26px;
  top:24px ;
  padding:5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background: rgba(255, 245, 223, 0.80);
}
.head-btn{
  padding: 0 12px;
  height: 28px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head-btn-active{
  border-radius: 30px;
  background: #CC4C24;
  color: #FFF;
  box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-400) var(--sds-size-depth-800) var(--sds-size-depth-negative-100) var(--sds-color-black-200);
}
.dividing{
  width: 100%;
  height:74px;
  background: rgba(219, 94, 44, 0.96);
}
.image2{
  width:100vw;
  min-width: 1500px;
}
.cabinet{
  position: relative;
  width: 100%;
}
.cabinet-content{
  position: absolute;
  top:8.3333vw;
  left: 13%;
  height:80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.img-text1{
  width:399px;
}
.text-box{
  margin-left:10px;
  width:418px;
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.6px;
  margin-bottom: 18px;
}
.img-icon1{
  width:418px;
  margin-bottom:3.5417vw;
}
.num-box{
  display: flex;
  align-items: center;
  gap: 155px;
  margin-top: 48px;
}
.num-item{
  color: #CC4C24;
  font-size: 78px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.788px;
  font-family: 'MyCustomFont', sans-serif;
}
.num-count{
  position: relative;
  width:289px
}
.plus{
  position: absolute;
  top: -10px;
  right: -55px;
  color: #CC4C24;
  font-size: 50px;
  font-weight: 600;
  font-family: 'MyCustomFont', sans-serif;
}
.num-text{
  width:288px;
  height:63px;
  color: #000;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
}

.foot{
  position:relative;
  width: 100%;
  /* height:3421px; */
}

.foot-bj{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.foot-bgc{
    display: block;
    width: 100%;
    min-height: 100%;
}
.foot-box{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 120px;
}
.foot-top{
  width:1416px;
  margin-top: 125px;
}
.foot-top-title{
  width:230px;
}
.foot-list{
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}
.foot-list-item{
  position: relative;
  width:432px;
  /* height:360px; */
  background-color: #FFFFFF;
  overflow: visible
}
.foot-list-item:hover{
  transform: scale(1.05); 
  transition: transform 0.3s ease;
}
.item-img{
  width: 432px;
  height:244px;
}
.item-title{
 color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px; 
  margin:16px 18px 9px 18px;
}
.item-text{
  width:344px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; 
  margin:0 0 15px 18px;
}
.item-btn{
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  width: 63px;
  height: 65px;
  background: #000;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.foot-title{
  width:588px;
  margin: 120px auto 43px;
}
.foot-img{
  width: 848px;
}
.collaborate-title{
  margin: 135px auto 10px;
}
.collaborate-title-text{
  width:180px;
}
.collaborate-text{
  width:695px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 2px;
  margin: 34px auto 0px;
  word-break: break-all;
}

.collaborate-ni-text{
      width:658px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 2px;
  margin: 35px auto 58px;
  word-break: break-word;
}

.collaborate-text-zh{
  width:695px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 1.92px;
  margin: 35px auto 0px;
}
.collaborate-text2-zh{
  width:695px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1.92px;
  margin: 35px auto 58px;
  padding:0px
}
.collaborate-img{
  width:573px;
  margin: 0 auto 0px;
}
.library{
  width: 100%;
  background-color: #000000;
  height: 1045px;
}
.library-box{
  padding:0.1px 0 0 0;
  width:1472px;
  margin: 0 auto;
}
.library-title{
  width: 331px;
  margin: 79px 0 24px;
}
.library-list{
  width: 100%;
  height:644px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.library-list-item{
  position: relative;
  /* width:90px;
  height: 90px; */
}
.list-item-img{
  position: relative;
  width:90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-item-img:hover{
  .list-item-img-big{
    display: block;
  }
  .shade{
    display: block;
  }
}
.mask-img{
   width:90px;
   height: 90px;
  object-fit: contain;
}
.shade{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 90px;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.list-item-img-big{
  position: absolute;
  top: 0;
  left: 90px;
  display: none;
  width:300px;
  padding:50px 50px;
  border: 1px solid #686868;
  z-index: 10;
}

.library-video{
  position: relative;
  position:absolute;
  left: 0;
  bottom: -106px;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 8px 0 12px;
  background: #000;
}
.video-text{
  width:163px;
  color: #FFF;
  font-size: 16px;
  /* 省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.video-text-shade{
  display: none;
  position: absolute;
  left: 0px;
  top: -30px;
  color: #FFF;
  font-size: 16px;
  line-height: 28px;
  padding: 3px 14px;
  border-radius: 8px;
  background: #2C3137;
  z-index: 99;
}
.library-video:hover .video-text-shade{
  display: block;
}
.video-btn{
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.library-footer{
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.library-footer-right{
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2.52px;
  line-height: normal;
}
.tabs{
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.tabs-item{
  /* width:154px; */
  height: 52px;
  padding:0 10px;
  cursor: pointer;
  border: 1px solid #000;
}
.tabs-item-active{
 border: 1px solid #FFF;
}
.tabs-text{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0 10px;
  color: rgba(255, 255, 255, 0.50);
  font-size: 18px;
  font-weight: 400;
  line-height: 36px; /* 200% */
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.tabs-text-active{
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  color: #FFF;
}
.tabs-item:hover{
  border: 1px solid rgba(255, 255, 255, 0.50);
  .tabs-text{
    border-left: 1px solid rgba(255, 255, 255, 0.50);
    border-right: 1px solid rgba(255, 255, 255, 0.50);
  }
}
.tabs-item-active:hover{
  border: 1px solid #FFF;
  .tabs-text{
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
  }
}
.swiper-container {
  width:1472px;
  height: 644px;
  overflow: hidden;
}
.swiper-wrapper{
  width:100%;
  height: 100%;
}
/* .swiper-slide{
  background-color: #000;
} */
/* 包装展 */
.exhibition-swiper{
  position: relative;
  width: 100%;
  margin-top: 64px;
  
}
.swiper-container2{
  overflow: hidden;
}

.exhibition-box{
  width:1417px;
  margin: 134px auto 0;
}
.merek-img-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 19px;
}
.merek-img-item{
  position: relative;
  width: 220px;
  height: 220px;
  cursor: pointer;
}
.merek-img-item-shade{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  display: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);
}
.merek-img-item:hover .merek-img-item-shade{
  display: flex;
}
.merek-img-item-shade-btn{
  width: 204px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(3.200000047683716px);
  color: #000;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
}
.merek-img-item-shade-btn:hover{
 background: rgba(255, 255, 255, 0.75);
}
/* 弹窗 */
.model{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}
.model-box{
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 931px;
  height: 599px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.10);
  transition: all 0.4s ease;
}
.close-box{
  position: absolute;
  right: -39px;
  top: 0px;
  width: 24px;
  cursor: pointer;
}
.model-right{
  position: relative;
  width: 332px;
  height: 100%;
  background: #FFF9E9;
}
.model-title{
  margin: 14px 0 14px 16px ;
}
.line{
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.20);
}
.model-text{
  width: 100%;
  padding: 12px 16px 10px 16px;
  color: rgba(0, 0, 0, 0.50);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; 
}
.modal-content{
  width: 100%;
  padding: 0 16px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.model-content-left{
  display: flex;
  align-items: center;
  gap: 16px;
  color: #33322F;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px; 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: 2px;
  text-underline-position: from-font;
}
.copy-btn{
  display: flex;
  align-items: center;
  gap: 5px;
  color: #33322F;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  cursor: pointer;
}
.copy-img2{
  display: block;
}
.copy-img2{
  display: none;
}
.copy-btn:hover{
  color: #5E5E5E;
  .copy-img{
    display: none;
  }
  .copy-img2{
    display: block;
  }
}
.copy-btn2{
  display: flex;
  align-items: center;
  gap: 5px;
  color: #33322F;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  cursor: pointer;
}
.modal-btn{
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 333px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px; 
  cursor: pointer;
}
.modal-btn:hover{
  background: #232323;
}
.up-box{
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  display: flex;
  width: 26px;
  height: 26px;
  padding: 3px 2px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.next-box{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  width: 26px;
  height: 26px;
  padding: 3px 2px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}