`
@keyframes heartbeat {
  0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
  14% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
} 

.dot{
  display: block;position: relative;  width: 20px;height: 20px;border-radius: 50%;
  border: 2px solid rgba(188,41,68,0.4); border: 2px solid #05a1e0; 
  background-color: rgba(188,41,68,0.8);background-color: #05a1e0;background-clip: padding-box;
}
.dot:before{display:none}
.dot:after{ 
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  font-size: 0.8rem;
  background-color: rgba(0,0,0,0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-65%);
  text-align: center;
} 
.dot.one:after{content:'1'}
.dot.two:after{content:'2'}
.dot.three:after{content:'3'}
.dot.four:after{content:'4'}
.dot.five:after{content:'5'}
.dot.six:after{content:'6'}
.dot.seven:after{content:'7'}
.dot.eight:after{content:'8'}

.part{margin-bottom: 40px;}
.part .title,.part .text{margin: 0.8rem;font-size: 1rem;}
.part-2 {margin-top: 120px;}
.part-2 .title{font-size: 1.8rem;text-align: center;margin:1.4rem;}
.part-1,.part-2,.part-3{width: 810px; margin-left:auto;margin-right:auto;} 
.part-1,.part-3{margin-top: 0px; }
.part-1 .right .title,
.part-2 .right .title{ 
  margin: 0 1.4rem 0.4rem 1.4rem;
  font-size: 1.4rem;
  text-align: left;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.part-1 .right > .text,
.part-2 .right > .text,
.part-3 .text{ margin:0 1.4rem 1.4rem 1.4rem;font-size:1rem; position: relative;    padding-right: 0.1rem;}
.part-1 .right .text .text,
.part-2 .right .text .text{margin-left: 0;margin-top: 0.2rem;display: block;width: 46%;position: absolute;right: -42%;top: -76%;}
.part-1 .left,.part-1 .right,
.part-2 .left,.part-2 .right,
.part-3 .left,.part-3 .right{display: inline-block;width: 49.5%;vertical-align: top;}
.part-1 .left,
.part-2 .left,
.part-3 .left{position: relative}
.part-1 .right,
.part-2 .right,
.part-3 .right{padding-left: 0px;}
.part-1 .right .dot,
.part-2 .right .dot,
.part-3 .left .dot,
.part-3 .right .dot{display:inline-block;margin-right: 0.4rem;vertical-align: middle;vertical-align: text-bottom;}
.part-1 .left .dot,
.part-2 .left .dot{position: absolute; cursor: pointer;vertical-align: middle;    margin-right: 0.4rem;}
 

.part-3 .bg{width: 100%;margin: auto;}
.part-3 .left .title,
.part-3 .right .title{
  font-size:1.4rem;text-align:left;font-weight: bold;margin-left: 0;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.part-3 .left .text,
.part-3 .right .text{margin-left: 0}
.part-3 .right .text.left,
.part-3 .right .text.right{font-size:0.6rem;position: absolute; top: 53%; left: 50%;    text-align: center;}
.part-3 .right .text.left{transform: translateX(-100%);display: none;}
.part-3 .right .text.right{transform: translateX(-7%);display: none;}
.part-3 .left{padding-right: 11px;width: 46%;}
.part-3 .right{position: relative;padding-left: 11px;}


.part-2 .left .dot{display: none;}
.part-2 .left .bg-container{
  position: relative;
}
.part-1 .left .bg,
.part-2 .left .bg-container .bg{
  max-width: inherit;
  width: 100%;
}
.part-1 .left .bg{
  width: 97%;
}
.part-2 .left .bg-container .bg-2,
.part-2 .left .bg-container .bg-3,
.part-2 .left .bg-container .bg-4{
  position: absolute;
  opacity: 0;
  left: 0;top: 0;
  transition: opacity 1s
}
@keyframes show {
  from {  
    opacity: 0; 
  }
  to {  
    opacity: 1; 
  }
} 
.part-2 .left .bg-container.show .bg-2{
  opacity: 1;
  transition-delay: 1s;
/*  animation: show 1s ease 0.5s;
  animation-fill-mode: forwards;*/
}
.part-2 .left .bg-container.show .bg-3{
  opacity: 1;
  transition-delay: 2.2s;
  /*animation: show 1s ease 1.5s 1;*/
}
.part-2 .left .bg-container.show .bg-4{
  opacity: 1;
  transition-delay: 3.4s;
  /*animation: show 1s ease 2.5s 1;*/
}


.product-list {position: relative}
.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}
.product-list .swiper-button-prev{
  left: 20%;
}
.product-list .swiper-button-next{
  right: 20%
}
.swiper-2 .swiper-slide{text-align: center;position: relative}

.design{margin-top: 40px;margin-bottom: 40px;} 
.design .swiper-container{width: 55%;width: 740px;}
.design .swiper-container .swiper-slide{width:230px;text-align: center;}
.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")
}


@media screen and (min-width: 0) and (max-width: 640px) { 
  .part{margin-bottom:0}
  .part-1,.part-2,.part-3{width: 100%; margin-top: 76px;}
  .part-1 .text,.part-2 .text{font-size: 0.9rem}
  .part-2 .title{margin-bottom: 0}
  .part-1 .left,
  .part-1 .right,
  .part-2 .left,
  .part-2 .right,
  .part-3 .left,
  .part-3 .right{ 
    width: 96%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
    padding-left:0;
  }  

  .part-1 .right,
  .part-2 .right {
    width: 92%;
  }
  .part-1 .right .title, .part-2 .right .title,
  .part-1 .right .text, .part-2 .right .text,
  .part-3 .left .title, .part-3 .left .text,
  .part-3 .right .title, .part-3 .right .text{    margin-left: 0.4rem;}
  .part-3{    margin-top: 0;}
  .part-3 .right .text.left, .part-3 .right .text.right{width:50%}
  .part-1 .right .text .text, .part-2 .right .text .text{width: 65%;position: static;}
  .part-3 .tips{display: none;}
  .part-3 .left .tips{display: block;}
  .product-list .swiper-2{width: 100%;} 
  .product-list .swiper-2 .bg{width: 56%}
  .product-list .swiper-button-prev{
    left: 1%;
  }
  .product-list .swiper-button-next{
    right: 2.4%
  }
  .product-list  .watch-video-btn{width: 80%}
  .design{margin-top:0}
  .design .swiper-container{width: 78%}
  .design  .watch-video-btn{width: 80%}
}