.wrap{
  height: 7713px;
}
.wrap .head-box::after{
  content: '';
  display: block;
  width: 100%;
  height: 1080px;
  background: url('../img/home/cover_top.png') no-repeat center bottom;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wrap::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  top: 1080px;
  left: 0;
  height: 6633px;
  background: url('../img/home/page_bg.jpg') no-repeat center top;
  background-size: auto 100%;
  z-index: 1;
}
.view-cont,.view-cont .part{
  z-index: 2;
  width: 100%;
  height: auto;
  position: relative;
  margin: 0 auto 0;
}
.view-cont .part-1{
  height: 1396px;
}
.view-cont .title{
  width: 695px;
  height: auto;
  position: relative;
  margin: 0 auto 0;
}
.view-cont .title img{
  display: block;
  width: 100%;
  height: auto;
}
.view-cont .part-2 .title{
  width: 845px;
  margin-bottom: 70px;  
}
.view-cont .fashion-box{
  width: 1210px;
  height: 876px;
  position: relative;
  margin: -30px auto 0;
  overflow: visible;
}
.swiper-slide{
  opacity: 0;
}
.swiper-slide.swiper-slide-prev,.swiper-slide.swiper-slide-next{
  opacity: 0.5;
}
.swiper-slide-active{
  opacity: 1;
}
.fashion-swiper{
  width: 1210px;
  height: 800px;
  position: relative;
  margin: 0 auto 0;
  z-index: 0;
}
.fashion-swiper .swiper-slide{
  width: 1132px;
  height: 748px;
  position: relative;
}
.fashion-swiper .swiper-slide img{
  display: block;
  width: 100%;
  height: auto;
}
.fashion-swiper .prev-btn,.fashion-swiper .next-btn{
  position: absolute;
  top: 50%;
  width: 110px;
  height: 108px;
  margin-top: -66px;
  cursor: pointer;
  z-index: 1;
}
.fashion-swiper .prev-btn:hover,.fashion-swiper .next-btn:hover{
  filter: brightness(1.1);
}
.fashion-swiper .prev-btn{
  left: 0;
  background: url('../img/home/sz_prev_btn.png') no-repeat center;
  background-size: 100% auto;
}

.fashion-swiper .next-btn{
  right: 0;
  background: url('../img/home/sz_next_btn.png') no-repeat center;
  background-size: 100% auto;
}
.fashion-swiper .swiper-pagination{
  bottom: 48px;
}
.fashion-swiper .swiper-pagination::after{
  content: '';
  display: block;
      width: 425px;
    height: 1px;
    position: absolute;
    left: 50%;
    margin-left: -212px;
    bottom: 4px;
  border-bottom: 2px dotted #d5b28f;
}
.fashion-swiper .swiper-pagination-bullet{
  width: 31px;
  height: 26px;
  opacity: 1;
  margin: 0 8px!important;
  background: url('../img/home/sz_spot.png') no-repeat center;
  background-size: 100% auto;
}
.fashion-swiper .swiper-pagination-bullet-active{
  background: url('../img/home/sz_spot_c.png') no-repeat center;
  background-size: 100% auto;

}
.video-btn{
  position: absolute;
  top: 0;
  left: 0;
  width: 126px;
  height: 130px;
  background: url('../img/home/play_btn_l.png') no-repeat center;
  background-size: 100% auto;
  cursor: pointer;
}
.video-btn:hover{
  filter: brightness(1.1);
}
.video-btn-s{
  width: 115px;
  height: 117px;
  background-image: url('../img/home/play_btn_s.png');
}
.fashion-box .video-btn{
     top: 520px;
    left: 800px;
}
.cont .name{
  position: absolute;
  width: 56px;
  height: 297px;
  background: url('../img/home/sz_name_bg.png') no-repeat center;
  background-size: 100% auto;
}
.cont .name p{
  width: 56px;
  height: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #a26631;
  writing-mode: vertical-lr;
  line-height: 56px;
  white-space: nowrap;
  font-family:'hyjkj';
}
.cont .info{
  position: absolute;
  width: 41px;
  height: 406px;
  background: url('../img/home/sz_text_bg.png') no-repeat center;
  background-size: 100% auto;
}
.cont .info p{
  position: absolute;
  width: 41px;
  height: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: #fee7ca;
  writing-mode: vertical-lr;
  line-height: 41px;
  white-space: nowrap;
  text-align: center;
}
.fashion-box .name{
  top: 80px;
  left: 760px;
}
.fashion-box .info{
  top: 135px;
  left: 814px;
}
.fashion-box .fashion-face,.fashion-box .fashion-hair{
  position: absolute;
  width: 348px;
  height: 228px;
  top: 648px;
}
.fashion-box .fashion-face img,.fashion-box .fashion-hair img{
  display: block;
  width: 100%;
  height: auto;
}
.fashion-box .fashion-face{
  left: 0;
}
.fashion-box .fashion-hair{
  right: 0;
}
.fashion-hb{
  display: none;
}
.fashion-box .tips{
  width: 480px;
  height: auto;
  position: absolute;
  top: 764px;
  left: 50%;
  text-align: center;
  margin-left: -240px;
  font-size: 20px;
  color: #91500b;
}
.view-cont .part-2{
  height: 1390px;
}
.zs-box{
  width: 1370px;
  height: 800px;
  position: relative;
  margin: -40px auto 0;

}
.zs-box .swiper-container{
  width: 1370px;
  height: 800px;
  position: relative;
  margin: 0 auto 0;
  z-index: 0;
}
.zs-box .swiper-container .swiper-slide{
  width: 934px;
  height: 772px;
  position: relative;
}
.zs-box .swiper-container .swiper-slide img{
  display: block;
  width: 100%;
  height: auto;
}
.zs-box .swiper-container .prev-btn,.zs-box .swiper-container .next-btn{
  position: absolute;
  top: 50%;
  width: 110px;
  height: 108px;
  margin-top: -54px;
  cursor: pointer;
  z-index: 1;
}
.zs-box .swiper-container .prev-btn:hover,.zs-box .swiper-container .next-btn:hover{
  filter: brightness(1.1);
}
.zs-box .swiper-container .prev-btn{
  left: 190px;
  background: url('../img/home/sz_prev_btn.png') no-repeat center;
  background-size: 100% auto;
}

.zs-box .swiper-container .next-btn{
  right: 190px;
  background: url('../img/home/sz_next_btn.png') no-repeat center;
  background-size: 100% auto;
}
.zs-swiper .swiper-pagination{
  bottom: 30px;
}
.zs-swiper .swiper-pagination::after{
  content: '';
  display: block;
  width: 415px;
  height: 1px;
  position: absolute;
  left: 50%;
  margin-left: -207px;
  bottom: 3px;
  border-bottom: 2px dotted #a4815f;
}
.zs-swiper .swiper-pagination-bullet{
  width: 30px;
  height: 25px;
  opacity: 1;
  margin: 0 8px!important;
  background: url('../img/home/sz_spot.png') no-repeat center;
  background-size: 100% auto;
}
.zs-swiper .swiper-pagination-bullet-active{
  background: url('../img/home/sz_spot_c.png') no-repeat center;
  background-size: 100% auto;

}
.zs-box .video-btn{
  top: 570px;
  left: 880px;
}
.zs-box .name{
  top: 80px;
  left: 255px;
}
.zs-box .info{
    top: 160px;
    left: 877px;
}
.zs-box .tips{
  width: 480px;
  height: auto;
  position: absolute;
  top: 780px;
  left: 50%;
  margin-left: -240px;
  font-size: 20px;
  color: #91500b;
  text-align: center;
}
.zs-box .zs-btn{
  position: absolute;
  width: 322px;
  height: 131px;
  top: 0px;
  left: 890px;
  background: url('../img/home/zs_skill_btn.png') no-repeat center;
  background-size: 100% auto;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}
.zs-box .zs-btn:hover{
  filter: brightness(1.1);
}
.view-cont .part-3{
  height: 1410px;
}
.zq-box{
  margin: 0px auto 0;
}
.zq-box .zq-item{
  width: 1032px;
  height: 481px;
  position: relative;
  margin: -60px auto 0;
}
.zq-box .zq-pic{
  width: 1032px;
  height: 481px;
  position: relative;
}
.zq-box .zq-pic img{
  display: block;
  width: 100%;
  height: auto;
}
.zq-box .name{
top: 131px;
    left: 944px;
  width: 50px;
  height: 225px;
  background: url('../img/home/zq_name_bg.png') no-repeat center;
  background-size: 100% auto;
}
.zq-box .zq-item:nth-child(2) .name{
  top: 162px;
}
.zq-box .name p{
  line-height: 50px;
  width: 50px;
}

.zq-box .video-btn{
  left: 822px;
    top: 353px;
}
.zq-box .zq-item:nth-child(2) .video-btn{
  left: 822px;
  top: 380px;

}
.view-cont .part-4{
  height: 1370px;
}
.weapon-box{
  width: 1200px;
  height: 790px;
  position: relative;
  margin: 40px auto 0;
}
.weapon-box .item{
  width: 384px;
  height: 705px;
  position: absolute;
  top: 0;
}
.weapon-box .item:nth-child(1){
  left: 0;
}
.weapon-box .item:nth-child(2){
  left: 50%;
  top: 80px;
  margin-left: -192px;
}
.weapon-box .item:nth-child(3){
  right: 0;
}
.weapon-box .item img{
  display: block;
  width: 100%;
  height: auto;
}
.weapon-box .video-btn{
  top: 570px;
  left: 255px;
}
.weapon-box .name{
    top: 147px;
    left: 300px;
  width: 50px;
  height: 253px;
  background: url('../img/home/hw_name_bg.png') no-repeat center;
  background-size: 100% auto;
  z-index: 1;
}
.weapon-box .name p{
  line-height: 50px;
  width: 50px;
}
.weapon-box .info{
  top: 200px; 
  left: 347px;
  width: 37px;
  height: 377px;
  background: url('../img/home/hw_text_bg.png') no-repeat center;
  background-size: 100% auto;
  z-index: 1;
}
.weapon-box .info p{
  line-height: 37px;
  width: 37px;
}
.sp-box{
  width: 960px;
  height: 526px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: -20px auto 0;
}
.sp-box .sp-item{
  width: 487px;
  height: 518px;
  position: relative;
  margin-top: 140px;
}
.sp-box .sp-item .sp-pic{
  position: relative;
  width: 100%;
  height: 100%;
}
.sp-box .sp-item .sp-pic img{
  display: block;
  width: 100%;
  height: auto;
}
.sp-box .video-btn{
  top: -10px;
    left: 850px;
}

.sp-box .name{
      top: 115px;
    left: 395px;
  width: 50px;
  height: 225px;
  background: url('../img/home/sp_name_bg.png') no-repeat center;
  background-size: 100% auto;
}
.sp-box .name p{
  line-height: 50px;
  width: 50px;
}
.sp-box .info{
    top: 160px;
    left: 444px;
  width: 40px;
  height: 273px;
  background: url('../img/home/sp_text_bg.png') no-repeat center;
  background-size: 100% auto;
}
.sp-box .info p{
  line-height: 40px;
  width: 40px;
}