.top{font-size: 0;text-align: center} 
.top .item{font-size: 1rem;display: inline-block;width: 22%; margin-right: 1rem;vertical-align: top;}
.top .item:nth-last-child(){margin-right: 0}
.top .title{margin-top: 0.6rem; margin-bottom: 0.6rem;}
.top .text{margin-bottom: 0.6rem;    height: 82px;}
.top .link{margin-top: 0.6rem; border: 1px solid;padding:0.4rem 1rem;display: inline-block}
.top .link:hover{color: #333; text-decoration: none;}

.top.title{font-size:1rem;    padding: 25px;}
.top.title .title{font-size:1.8rem; }
.top.title .text{height:auto}


.swiper-1 .swiper-slide,.swiper-2 .swiper-slide{width: auto}
.product-list {position: relative;    text-align: center;}
.product-list .text{text-align: center;font-size: 1.1rem; padding:30px 1rem;}
.product-list .swiper-2{width: 700px; margin:auto;}
.product-list .swiper-2 .bg,.product-list .swiper-2 .recommend{display: inline-block}
.swiper-2 .swiper-slide{text-align: center;position: relative}
/* .swiper-2 .model{display: none; font-size: 0.6rem; position: absolute;left: 50%;transform: translateX(-50%);  padding:0.3rem;border: 1px solid #a0a0a0;background-color: #fff;}
.swiper-2 .swiper-slide:hover .model{display: block}
 */
.part3 .swiper-2{width: 1024px; }
.part3 .product-list .swiper-button-prev{left:10%}
.part3 .product-list .swiper-button-next{right:10%}
.part3 .product-item{width:49%;    display: inline-block;}
.part3 .swiper-2 .swiper-slide{/*text-align: left;*/}
.product-list .swiper-button-prev{
  left: 20%;
}
.product-list .swiper-button-next{
  right: 20%
}
.product-list  .watch-video-btn{width: 300px;    margin: auto;margin-top: 1rem; display: inline-block;}
.product-list  .watch-video-btn.first{margin-right: 1rem;}
.part {margin-top: 40px;}
.part .title{ text-align: center; font-size: 1.6rem; margin-bottom: 20px; }
.part .title:after,.part .title:before{vertical-align: middle;  content: "";height: 1px; width: 23%;display: inline-block; background-color: #000}
.part .title:before{margin-right: 1.4rem}
.part .title:after{margin-left: 1.4rem}
 

.design{margin-top: 40px;margin-bottom: 40px;}
.design .title{text-align: center;font-size: 1.8rem}
.design .item{width: 59%; margin: 1rem auto; position: relative} 
.design .item .text{text-align: center;width: 100%;position: absolute;bottom: 10%;font-size: 1rem;}
.design .item .text.left{width: 48%;bottom: 17%}
.design .item .text.right{width: 48%;bottom: 17%; right: 0}
.design .item:nth-of-type(3) .text{position: absolute; top: 30%; left: 51%; display: inline-block; width: 30%; text-align: left;}
.design .swiper-container{width: 55%}
.design  .watch-video-btn{width: 300px;    margin: auto;margin-top: 2rem; display: block;}

/* 公用的 scrollbar */
.control{ width: 50%; margin: auto; height: 10px;margin-top: 20px;position: relative; }
.swiper-button-next:after, .swiper-button-prev:after{display: none}
.control .swiper-button-prev,.control .swiper-button-next{
  background-size: 12px;background-repeat: no-repeat;background-position: center;height: 26px;width: 18px;
  transform: translateY(-50%);margin-top: auto;
}
.control .swiper-scrollbar{height: 1px; width: 80%; background-color: #d7d8d9;  position: absolute; top: 50%; left: 50%; transform: translate(-50%);}
.control .swiper-scrollbar .swiper-scrollbar-drag{border-radius:0; cursor: pointer;background-color: #000;}
.control .swiper-scrollbar .swiper-scrollbar-drag:hover{height: 7px; top: -3px;}

.swiper-button-next.swiper-button-gray, .swiper-container-rtl .swiper-button-prev.swiper-button-gray{
  color: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d1d1d1'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-gray, .swiper-container-rtl .swiper-button-next.swiper-button-gray {
  color: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d1d1d1'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black{
  color: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
  color: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.part4 .middle-link{
    display: block;
    margin: auto;
    width: 21%;
    margin-bottom: 2rem;
    transform: translateX(17%);
}
.part4 .product-list .swiper-button-prev,.part4 .product-list .swiper-button-next{    display: none;}
.part4 .product-list .title:after,.part4 .product-list .title:before{ display: none;}
.part4 .product-list .title{margin-bottom: 0;    margin-top: 40px;}
.part4 .product-list .text{    padding-top: 10px;}


.part-5 .bg.ld-pc{margin-top: 20px;width: 60%; margin:auto;}
.part-5 .bg.ld-pc:nth-of-type(1){width: 100%; }
.part-5 .product-list{width: 52%; margin:34px auto;}
.part-5 .product-list .link{display: inline-block;width: 49%}

.part-6{margin:auto;margin-top: 20px;width: 66%; margin-bottom: 60px;}
.part-6 .infor{text-align: left;width: 60%;  display: inline-block;  vertical-align: text-top;font-size: 1rem; }
.part-6 .infor .title,.part-6 .infor .text{text-align: left;margin: 0.8rem;}
.part-6 .infor .title{margin-bottom: 0;font-weight: bolder;font-size: 1rem;}
.part-6 .infor .text{margin: 0.8rem;margin-top: 0;}
.part-6 .bg{display: inline-block;vertical-align: top;width: 39%;}
.part-6  .watch-video-btn{width: 300px;    margin: auto;margin-top: 2rem; display: block;}
.part.part-6 .title:after, .part.part-6 .title:before{width:0;height:0;margin-right:0}

 
 

@media screen and (min-width: 0) and (max-width: 640px) { 
  .top.title{ padding: 56px 25px 25px 25px;}
  .top .swiper-container .title{display: none}
  .top .swiper-container .text{display: none}
  .top .swiper-container .link{display: none}
  .top .swiper-pagination .swiper-pagination-bullet-active{background-color: #000}
  .top .swiper-pagination .swiper-pagination-bullet{border: 1px solid #fff;}
  .top .top-infor{font-size: 1rem} 
  .top .top-infor .text{padding: 0 1rem;}
  .top .link{padding:0.3rem 1.4rem;}

  .control{ width: 92%;}
  .control .swiper-scrollbar {width: 70%}
  .control .swiper-scrollbar .swiper-scrollbar-drag:hover{height: 1px; top: 0;}
  /* .swiper-2 .model{display: block} */
  .product-list .swiper-2{width: 100%;} 
  .product-list .swiper-2 .bg{width: 56%}
  .part4 .product-list .swiper-2 .bg{width:80%}
  .product-list .swiper-button-prev{
    left: 1%;
  }
  .product-list .swiper-button-next{
    right: 2.4%
  }
  .product-list  .watch-video-btn{width: 80%}
  .product-list .watch-video-btn.first{margin-right: 0;}

  .product-list .model{font-size: 12px;  line-height: 1;   padding: 2px 4px;background-color: rgba(255,255,255,0.4);}
  
  .part .title:after,.part .title:before{display: none}
  .part .swiper-1 .swiper-slide .img{height: 340px;} 

  .part3 .product-list.ld-sp .swiper-2 .swiper-slide{width: 100%;text-align: left;}

  .part3 .product-list.ld-sp .swiper-2 .swiper-slide .product-item{position: relative;width: 49%; display: inline-block;text-align: center;}
  .part3 .product-list.ld-sp .swiper-button-next, .part3 .product-list.ld-sp .swiper-button-prev{top: 57%}
  
  .part3 .product-list .swiper-button-prev{left:1%}
  .part3 .product-list .swiper-button-next{right:1%}
  
  
  .part4 .middle-link{width: 68%;margin-bottom: 0;transform: none;}
  
  .part4 .swiper-1 .swiper-slide .title{
		font-size: 1.8rem;
		bottom: 20%; 
	}

  .part-5 .bg.ld-sp{width: 90%; margin: 20px auto 0 auto;}
  .part-5 .product-list{width: 94%;}
  .part-5 .product-list .link{display: inline-block;width: 49%}

  .part-6{width: 100%}
  .part-6 .infor,
  .part-6 .bg{display: block;width: 100%}
  .part-6 .infor{margin-top: 20px;margin-bottom: 40px;}
  .part-6 .watch-video-btn {
    width: 80%;
  }  
  .design .item{padding-bottom: 5rem; width: 90%;}
  .design .item:nth-of-type(2){padding-bottom: 3rem; }
  .design .item:nth-of-type(3){padding-bottom: 3rem; }
  .design .item:nth-of-type(3) .text{width: 100%;top: auto; bottom:0;left: 0}
  .design .item .text.left,
  .design .item .text.right{display: none}
  .design .swiper-container{width: 78%}
  .design  .watch-video-btn{width: 80%}
}