@charset "utf-8";

/*平台服务主体*/

.customer {
    height: 847px;
    color: #fff;
    background: url('../img/customer_service_bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
}

.customer-title {
    padding-top: 212px;
    text-align: center;
}

.customer-title h1 {
    font-size: 72px;
    margin: 0;
    line-height: 1.2;
}

.customer-title h2 {
    font-size: 48px;
    color: #eeb033;
    margin: 0;
    line-height: 1.2;
}

.customer-main {
    margin-top: 48px;
    padding: 0 174px;
}

.customer-left,
.customer-right {
    width: 400px;
    height: 220px;
    text-align: center;
    cursor: pointer;
}

.customer-left {
    float: left;
    background-color: #34cc99;
}

.customer-left .cus-l-icon {
    width: 73px;
    height: 79px;
    margin: 18px auto 25px auto;
    background: url('../img/customer_icon1.png') no-repeat;
    background-size: 100% 100%;
}

.customer-right {
    float: right;
    background-color: #99cdff;
}

.customer-right .cus-r-icon {
    width: 74px;
    height: 74px;
    margin: 21px auto 27px auto;
    background: url('../img/customer_icon2.png') no-repeat;
    background-size: 100% 100%;
}

.cus-title {
    font-size: 20px;
}

.cus-msg {
    font-size: 14px;
    margin: 14px 0;
}

.cus-down {
    width: 24px;
    height: 12px;
    margin: 0 auto;
    background: url('../img/customer_down.png') no-repeat;
    background-size: 100% 100%;
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-down 1.5s linear infinite;
}

@-webkit-keyframes bounce-down {
 25% {-webkit-transform: translateY(-6px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(6px);}
}

@keyframes bounce-down {
 25% {transform: translateY(-6px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(6px);}
}

@media screen and (max-width: 1199px) {
    .customer {
        background: url('../img/customer_service_bg_1200.jpg') no-repeat;
    }
    .customer-title h1 {
        font-size: 62px;
    }
    .customer-title h2 {
        font-size: 50px;
    }
    .customer-main {
        padding: 0 130px;
    }
    .customer-left,
    .customer-right {
        width: 340px;
        height: 200px;
    }
    .customer-left .cus-l-icon {
        margin: 14px auto 18px auto;
    }
    .customer-right {
        background-color: #99cdff;
    }
    .customer-right .cus-r-icon {
        margin: 17px auto 20px auto;
    }
    .cus-title {
        font-size: 18px;
    }
    .cus-msg {
        font-size: 12px;
    }
}

@media screen and (max-width: 990px) {
    .customer-title h1 {
        font-size: 62px;
    }
    .customer-title h2 {
        font-size: 50px;
    }
    .customer-main {
        padding: 0 20px;
    }
    .customer-left,
    .customer-right {
        width: 340px;
        height: 200px;
    }
    .customer-left .cus-l-icon {
        margin: 14px auto 18px auto;
    }
    .customer-right {
        background-color: #99cdff;
    }
    .customer-right .cus-r-icon {
        margin: 17px auto 20px auto;
    }
    .cus-title {
        font-size: 18px;
    }
    .cus-msg {
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {
    .customer {
        background: url('../img/customer_service_bg_800.jpg') no-repeat;
    }
    .customer-title {
        padding-top: 120px;
    }
    .customer-title h1 {
        font-size: 42px;
    }
    .customer-title h2 {
        font-size: 32px;
    }
    .customer-main {
        padding: 0 20px;
    }
    .customer-left,
    .customer-right {
        float: none;
        width: 340px;
        height: 220px;
        padding-top: 10px;
        margin: 20px auto;
    }
    .customer-left .cus-l-icon {
        margin: 14px auto 18px auto;
    }
    .customer-right {
        background-color: #99cdff;
    }
    .customer-right .cus-r-icon {
        margin: 17px auto 20px auto;
    }
    .cus-title {
        font-size: 18px;
    }
    .cus-msg {
        font-size: 12px;
    }
}

@media screen and (max-width: 479px) {
    .customer {
        background: url('../img/customer_service_bg_480.jpg') no-repeat;
    }
    .customer-title {
        padding-top: 120px;
    }
    .customer-title h1 {
        font-size: 30px;
    }
    .customer-title h2 {
        font-size: 20px;
    }
    .customer-main {
        padding: 0;
    }
    .customer-left,
    .customer-right {
        float: none;
        width: 310px;
        height: 200px;
        padding-top: 2px;
        margin: 20px auto;
    }
    .customer-left .cus-l-icon {
        margin: 14px auto 18px auto;
    }
    .customer-right {
        background-color: #99cdff;
    }
    .customer-right .cus-r-icon {
        margin: 17px auto 20px auto;
    }
    .cus-title {
        font-size: 18px;
    }
    .cus-msg {
        font-size: 12px;
    }
}