@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: 30px;height: 30px;border-radius: 50%;
  border: 2px solid rgba(188,41,68,0.4); 
  background-color: rgba(188,41,68,0.8);background-clip: padding-box;
}
.dot:after,.dot:before{
  content: '';
  width: 60%;
  height: 2px;
  display: block;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.dot:before{
  transform: translate(-50%,-50%) rotate(90deg);
}

.part{margin-bottom: 40px;text-align: center}
.part .title,.part .text{text-align: center;margin: 0.8rem;font-size: 1rem;}

.part-1,.part-11{width: 60%; margin-left:auto;margin-right:auto;margin-top: 120px;text-align: center;}
.part-1 .title,.part-1 .text,
.part-11 .title,.part-11 .text{text-align: center;margin: 1.4rem;}
.part-1 .left,.part-1 .right,
.part-11 .left,.part-11 .right{display: inline-block}
.part-1 .left,
.part-11 .left{width: 60%;vertical-align: middle;position: relative}
.part-1 .right,
.part-11 .right{width: 32%;vertical-align: middle;    padding-left: 22px;}
.part-1 .left .dot,
.part-11 .left .dot{position: absolute; cursor: pointer;animation: heartbeat 1.8s linear 2s infinite;}

.part-2{text-align: center}
.part-2 .text{margin-top: 1rem}

.part-3 .bg{width: 50%;margin: auto;}

.part-4 .bg{width: 40%;margin: auto;}
.part-4 .bg:nth-of-type(2){margin-top: 20px;    width: 25%;}


.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; }
.part-6 .infor .title,.part-6 .infor .text{text-align: left;}
.part-6 .infor .title{margin-bottom: 0;font-weight: bolder;}
.part-6 .infor .text{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-11 .title{font-size:1.8rem}


.part.storage .title:after, .part.storage .title:before{display:none}


@media screen and (min-width: 0) and (max-width: 640px) { 
  .part-1,.part-11{width: 100%; margin-top: 76px;text-align: center;}
  .part-1 .text,.part-11 .text{font-size: 0.9rem}
  .part-1 .left,.part-11 .left{
    width: 92%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
  }
  .part-1 .right,.part-11 .right{width: 60%;display:none}
  .part-1 .left .dot,.part-11 .left .dot{width: 26px; height: 26px}

  .part-2 .bg{width: 70%}

  .part-3 .bg{width: 70%;}

  .part-4 .bg{width: 70%;margin: auto;}
  .part-4 .bg:nth-of-type(2){ width: 50%;}

  .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%;
  }  
  .modal #player{background-size: contain;background-repeat: no-repeat;background-position: center;padding-top: 75%;}
}