@media screen and (min-width: 750px) {
    html {
        font-size: 70px !important;
    }
}
.index {
    width: 100vw;
    height: 100vh;
    background-color:#333;
}
    .index .swiper-container{
        height:100%;
        width:100%;
        max-width:750px;
        margin:0 auto;
    }

    .index .bg {
        width: 100%;
        height: 100%;
        background-image: url('../images/motul-big-bg.png');
        background-size: cover;
        background-position: center;
        background-color: #fff;
        position:relative;
    }
    .index .arrow{
        position:absolute;
        bottom:0.4rem;
        width:100%;
        text-align:center;
        font-size:0.32rem;
    }
        .index .arrow.footer{
            bottom:0.2rem;
        }
        .index .arrow.footer p {
            font-family: 'Graphik-Regular', 'Arial';
            font-weight: 400;
            font-size: 0.2rem;
            font-weight: bold;
            font-style: italic;
        }
        @keyframes upArrowAni {
            0% {
            opacity: 0;
            transform: translate3d(0,5px,0)
        }

        30% {
            opacity: 1;
            transform: translate3d(0,-5px,0)
        }

        60% {
            opacity: 0;
            transform: translate3d(0,-10px,0)
        }

        to {
            opacity: 0;
            transform: translate3d(0,-15px,0)
        }
    }
        .index .arrow .icon {
            animation: upArrowAni 1.5s infinite linear;
            padding-bottom:0.2rem
        }
        .index .arrow .icon img {
            width: 0.48rem;
        }

        .index-one {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

.index-one .img{
    height:55%;
    overflow:hidden;
    position:relative;
    background-color:#fff;
}

    .index-one .img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .index-one .img .img-logo {
        position: absolute;
        top: 18px;
        right: 22px;
        width: 1.74rem;
        padding:0.1rem;
    }
    .index-one .text {
        flex: 1;
        min-height: 200px;
        padding-top: 0.4rem;
        background-image: url('../images/motul-bg.jpg');
        background-size:cover;
        background-position:center;
      
    }

    .index-one .text-box {
        display: flex;
        padding: 0.06rem 0.2rem 0.08rem 0.3rem;
        justify-content: space-between;
        align-items:center;
    }
        .index-one .text-box .text-l{
            width:calc(100% - 1.55rem);
            padding-left:10px;
            position:relative;
        }
            .index-one .text-box .text-l::before {
                content:"";
                position: absolute;
                left: 0;
                top: 0;
                width: 10px;
                height: 100%;
                background-color: #82bc00;
            }
            .index-one .text-box .text-l h3 {
                font-size: 0.4rem;
                color: #82bc00;
                padding-bottom: 0.05rem;
                padding-left:0.24rem;
            }
            .index-one .text-box .text-l p {
                font-size: 0.28rem;
                font-family: 'Graphik-Medium', 'Arial';
                font-weight: 500;
                color: #777;
                padding-left: 0.24rem;
            }
            .index-one .text-box .text-f {
                width: 1.55rem;
            }
        .index-one .text-box .text-f img{
            width:100%;
        }

.box-header {
    padding-top: 0.46rem;
    padding-left: 0.46rem;
    padding-right: 0.46rem;
    position: relative;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.box-header h3{
    padding: 0;
    color: #000;
    font-weight: 900;
    font-style: italic;
    font-size:0.38rem;
    font-weight:600;
}
    .box-header i {
        -ms-flex-positive: 1;
        flex-grow: 1;
        height: 1px;
        background: #000;
        margin: 0.24rem;
    }
    .box-header .logo {
        width: 1.34rem;
    }
.index-two{
    padding-top:0.3rem;
    padding-left:0.3rem;
    padding-right:0.1rem;
    padding-bottom:1.5rem;
}
    .index-two h3 {
        color: #5d646c;
        font-size:0.5rem;
        font-weight:bold;
    }
    .index-two .text{
        font-size:0.26rem;
        color:#333;
        margin-top:0.3rem
    }
    .index-two .but {
        display:inline-block;
        color: #bc3446;
        font-size: 0.32rem;
        line-height: 0.56rem;
        border: 0.02rem solid #bc3446;
        padding:0 0.4rem;
        border-radius:0.06rem;
        margin-top:0.6rem;
    }
.index-three{
    padding-top:0.2rem;
    padding-bottom:1.5rem;
}
.index-three ul li {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-top: 0.4rem;
}
    .index-three ul li .index-three-list {
        display: block;
        background-color: #fff;
        border-radius: 0.06rem;
        padding: 0.3rem 0.15rem;
        display: flex;
        align-items: center;
        position:relative;
        padding-right:0.6rem;
        box-shadow:0 0 0.15rem rgba(0,0,0,.2);
    }
        .index-three ul li .index-three-list .icon-chevron-right {
            position: absolute;
            right: 0.32rem;
            top: 0.45rem;
            color: #000;
            font-size: 0.32rem;
        }
        .index-three ul li .index-three-list .icons {
            width: 1rem;
        }
    .index-three ul li .index-three-list h3{
        width:calc(100% - 1rem);
        font-size:0.34rem;
        color:#000;
        padding-left:0.4rem;
        
    }
    .index-three ul li .text {
        font-size: 0.32rem;
        margin-top: 0.35rem;
        color: #6e757d;
        line-height:1.3;
    }

.index-four{
    padding-top:0.9rem;
    padding-left:0.4rem;
    padding-right:0.4rem;

}
.index-four h3{
    font-size:0.54rem;
    font-weight:bold;
    color:#000;
}

.index-four .em{
    display:inline-block;
    margin-top:3rem;
}
    .index-four .em .img {
        width: 1.28rem;
        height: 1.28rem;
        background-color: rgb(237,28,36);
        border-radius:50%;
        text-align:center;
        margin:0 auto;
    }
    .index-four .em .img svg{
        max-width:55%;
        margin:0 auto;
    }
    .index-four .em p {
        font-family: 'Arial';
        font-weight: 500;
        font-size: 0.28rem;
        text-transform: uppercase;
        color:#000;
        margin-top:0.2rem;
    }