body{
    background: #bfdfdc;
}
.product-title{
    margin-bottom: calc(var(--space-unit)*1);
    font-size: 2.75rem;
    color: #fc7a73;
    font-weight: bold;
    padding-left: 45px;
}
.inner{
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    z-index: 0;
    position: relative;
}
.inner .card-content,
.inner .card-title{
    font-size: .9rem;
}
.innerBox1{
    background: #ffaaa5;
}
.innerBox2{
    background: #f4d42d;
}
.innerBox3{
    background: #6ed4ca;
}
.innerBox4{
    background: #98989a;
}
.aniBox1{
    animation: transBox1 15s  infinite;
    -moz-animation: transBox1 15s  infinite;	/* Firefox */
    -webkit-animation: transBox1 15s  infinite;	/* Safari 和 Chrome */
    -o-animation: transBox1 15s  infinite;
    animation-delay: 3s;
    animation-timing-function:cubic-bezier(.165,.84,.44,1);
}
.stopAni{
    animation-play-state:paused !important;
    -webkit-animation-play-state:paused !important; /* Safari 和 Chrome */
}
@keyframes transBox1 {
    0%   {transform: translateY(0)}
    25%  {transform: translateY(100%)}
    50%  {transform: translate(100%,115%)}
    75%  {transform: translate(100%,15%)}
    100%  {transform: translate(0%)}
}
.aniBox3{
    animation: transBox3 15s  infinite;
    -moz-animation: transBox3 15s  infinite;	/* Firefox */
    -webkit-animation: transBox3 15s  infinite;	/* Safari 和 Chrome */
    -o-animation: transBox3 15s  infinite;
    animation-delay: 3s;
    animation-timing-function:cubic-bezier(.165,.84,.44,1);
}
@keyframes transBox3 {
    0%   {transform: translateY(0)}
    25%  {transform: translate(100%,15%)}
    50%  {transform: translate(100%,-100%)}
    75%  {transform: translate(0,-100%)}
    100%  {transform: translate(0)}
}
.aniBox2{
    animation: transBox2 15s  infinite;
    -moz-animation: transBox2 15s  infinite;	/* Firefox */
    -webkit-animation: transBox2 15s  infinite;	/* Safari 和 Chrome */
    -o-animation: transBox2 15s  infinite;
    animation-delay: 3s;
    animation-timing-function:cubic-bezier(.165,.84,.44,1);
}
@keyframes transBox2 {
    0%   {transform: translate(0)}
    25%  {transform: translate(-100%,15%)}
    50%  {transform: translate(-100%,115%)}
    75%  {transform: translate(0,115%)}
    100%  {transform: translate(0)}
}
.aniBox4{
    animation: transBox4 15s  infinite;
    -moz-animation: transBox4 15s  infinite;	/* Firefox */
    -webkit-animation: transBox4 15s  infinite;	/* Safari 和 Chrome */
    -o-animation: transBox4 15s  infinite;
    animation-delay: 3s;
    animation-timing-function:cubic-bezier(.165,.84,.44,1);
}
@keyframes transBox4 {
    0%   {transform: translateY(0)}
    25%  {transform: translateY(-100%)}
    50%  {transform: translate(-100%,-115%)}
    75%  {transform: translate(-100%,15%)}
    100%  {transform: translate(0)}
}
@media (max-width: 751px){
    .product-title{
        margin-bottom: calc(var(--space-unit)*1);
        font-size: 2rem;
        padding-left: 15px;
    }
    .service-item{
        margin-bottom: calc(var(--space-unit)*1);
    }
    .lottie{
        width: 50%;
        margin: 0 auto;
    }
    .service-item .item-title{
        font-size: 1.25rem;
    }
    .service-item .item-content{
        font-size: .75rem;
    }
    .animate-box{
        margin-top: 5%;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .animate-box .animate-title{
        font-size: 1rem !important;
    }
    .service-list{
        padding:0 30px !important;
    }
    @keyframes transBox1 {
        0%   {transform: translateY(0)}
        100%  {transform: translateY(0%)}
    }
    @keyframes transBox2 {
        0%   {transform: translateY(0)}
        100%  {transform: translateY(0%)}
    }
    @keyframes transBox3 {
        0%   {transform: translateY(0)}
        100%  {transform: translateY(0%)}
    }
    @keyframes transBox4 {
        0%   {transform: translateY(0)}
        100%  {transform: translateY(0%)}
    }
}