@charset "UTF-8";
.products-banner { display: table; width: 100%; height: 85.333vw; background: url('../images/products_banner_bg@mb.jpg') center/cover no-repeat; }
.products-banner .banner-title-box { display: table-cell; vertical-align: middle; width: 100%; text-align: center; color: #fff; }
.products-banner .banner-title-box h1 { font-family: "SourceHanSansCN-Bold"; font-size: 6.4vw; font-weight: bold; }
.products-banner .banner-title-box p { padding-top: 4vw; padding-bottom: 6.667vw; font-size: 3.2vw; }
.products-banner .banner-title-box a { display: block; width: 26.667vw; margin: auto; font-size: 3.2vw; line-height: 7.2vw; color: #fff; border: 2px solid #fff; border-radius: 7.2vw; }
.products-banner .banner-title-box a:hover, .products-banner .banner-title-box a:focus {
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    -webkit-transform: translateY(-4px);
       -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
         -o-transform: translateY(-4px);
            transform: translateY(-4px);
}
.product-list-section { padding-top: 8vw; padding-bottom: 8vw; background-color: #f2f2f2; }
.product-list-section h2 { padding-bottom: 5.333vw; font-family: "SourceHanSansCN-Bold"; font-size: 4.8vw; font-weight: bold; color: #4d4d4d; }
.product-list-section ul li { float: left; width: calc((100% - 1.867vw) / 2); height: 74.667vw; margin-top: 1.867vw; margin-left: 1.867vw; overflow: hidden; text-align: center; background-color: #fff; }
.product-list-section ul li:nth-child(-n+2) { margin-top: 0; }
.product-list-section ul li:nth-child(odd) { margin-left: 0; }
.product-list-section ul li .payment-company { width: 16vw; margin: 2.667vw auto 6.667vw;  padding-top: 1.2vw; padding-bottom: 1.2vw; font-size: 3.2vw; color: #fff; background-color:  #4cb5ff; border-radius: 5px; }
.product-list-section ul li img { width: 18.4vw; }
.product-list-section ul li p { padding-top: 2.667vw; padding-bottom: 2.667vw; font-size: 3.733vw; color: #4c4c4c; }
.product-list-section ul li a { display: inline-block; width: 19.2vw; font-size: 3.2vw; line-height: 6.4vw; text-align: center; color: #fff; background-color: #8b59fc; border-radius: 20px; transition: 0.3s ease-in-out; }
.product-list-section .container-custom .unionpay { margin: 1.867vw 0; padding-top: 6.667vw; padding-bottom: 6.667vw; text-align: center; background-color: #004889;  background-image: linear-gradient(90deg, #004889, #008089); }
.product-list-section .container-custom .unionpay p { padding-bottom: 3.733vw; font-family: "SourceHanSansCN-Bold"; font-size: 4.8vw; color: #fff; }
.product-list-section .container-custom .unionpay img { width: 33.867vw; }
.product-list-section .container-custom .pay-img { float: left; padding: 2.8vw 0; width: calc((100% - 3.734vw) / 3); text-align: center; background-color: #fff; }
.product-list-section .container-custom .pay-img+.pay-img { margin-left: 1.867vw; }
.product-list-section .container-custom .pay-img img { width: 21.333vw; }
@media (min-width: 768px) {
    .products-banner { height: 500px; }
    .products-banner .banner-title-box h1 { font-size: 44px; }
    .products-banner .banner-title-box p { padding-top: 32px; padding-bottom: 50px; font-size: 24px; }
    .products-banner .banner-title-box a { width: 160px; font-size: 24px; line-height: 44px; border-radius: 44px; }
    .product-list-section { padding-top: 60px; padding-bottom: 60px; }
    .product-list-section h2 { padding-bottom: 40px; font-size: 36px; }
    .product-list-section ul li.small { position: relative; width: calc((100% - 18px) / 3); height: 360px; }
    .product-list-section ul li.big { position: relative; width: calc((100% - 9px) / 2); height: 280px; }
    .product-list-section ul li:nth-child(n) { margin-top: 9px; margin-left: 9px; }
    .product-list-section ul li:nth-child(-n+3) { margin-top: 0; }
    .product-list-section ul li:nth-child(1), .product-list-section ul li:nth-child(4), .product-list-section ul li:nth-child(6) { margin-left: 0; }
    .product-list-section ul li.small .payment-company { width: 90px; margin-top: 10px; margin-bottom: 10px; padding-top: 7px; padding-bottom: 7px; font-size: 16px; transition: 0.3s ease-in-out; }
    .product-list-section ul li.big .payment-company { position: absolute; top: 68px; left: 51%; width: 90px; margin-top: 0; margin-bottom: 0; padding-top: 7px; padding-bottom: 7px; font-size: 16px; }
    .product-list-section ul li.small img { width: 103px; transition: 0.3s ease-in-out; }
    .product-list-section ul li.big img {
        position: absolute; top: 50%; right: 75%; width: 103px;
        -webkit-transform: translate(50%,-50%);
           -moz-transform: translate(50%,-50%);
            -ms-transform: translate(50%,-50%);
             -o-transform: translate(50%,-50%);
                transform: translate(50%,-50%);
    }
    .product-list-section ul li.small p { padding-top: 16px; padding-bottom: 0; font-size: 20px; transition: 0.3s ease-in-out; }
    .product-list-section ul li.big p { position: absolute; top: 113px; left: 51%;  padding-top: 0; font-size: 20px; }
    .product-list-section ul li.small a {
        display: block; position: absolute; top: 100%; right: 50%; width: 120px; font-size: 16px; line-height: 40px;
        -webkit-transform: translate(50%,0);
           -moz-transform: translate(50%,0);
            -ms-transform: translate(50%,0);
             -o-transform: translate(50%,0);
                transform: translate(50%,0);
    }
    .product-list-section ul li.big a { display: block; position: absolute; top: 158px; left: 100%; width: 120px; font-size: 16px; line-height: 40px; }
    .product-list-section ul li.small:hover .payment-company, .product-list-section ul li.small:hover img, .product-list-section ul li.small:hover p {
        -webkit-transform: translate(0,-40px);
           -moz-transform: translate(0,-40px);
            -ms-transform: translate(0,-40px);
             -o-transform: translate(0,-40px);
                transform: translate(0,-40px);
    }
    .product-list-section ul li.small:hover a {
        
        -webkit-transform: translate(50%,-70px);
           -moz-transform: translate(50%,-70px);
            -ms-transform: translate(50%,-70px);
             -o-transform: translate(50%,-70px);
                transform: translate(50%,-70px);
    }
    .product-list-section ul li.big:hover a { left: 51%; }
    .product-list-section .container-custom .unionpay { margin: 9px 0; padding-top: 40px; padding-bottom: 40px; }
    .product-list-section .container-custom .unionpay p { padding-bottom: 20px;  font-size: 32px; }
    .product-list-section .container-custom .unionpay img { width: 260px; }
    .product-list-section .container-custom .pay-img { width: calc((100% - 18px) / 3); padding: 20px 0; }
    .product-list-section .container-custom .pay-img+.pay-img { margin-left: 9px; }
    .product-list-section .container-custom .pay-img img { width: 160px; }
}
@media (min-width: 1024px) {
    .product-list-section ul li.small { width: calc((100% - 32px) / 3); height: 424px; }
    .product-list-section ul li.big { width: calc((100% - 16px) / 2); height: 374px; }
    .product-list-section ul li:nth-child(n) { margin-top: 16px; margin-left: 16px; }
    .product-list-section ul li:nth-child(-n+3) { margin-top: 0; }
    .product-list-section ul li:nth-child(1), .product-list-section ul li:nth-child(4), .product-list-section ul li:nth-child(6) { margin-left: 0; }
    .product-list-section ul li.small img, .product-list-section ul li.big img { width: 138px; }
    .product-list-section ul li.big .payment-company { top: 130px; }
    .product-list-section ul li.big p { top: 177px; }
    .product-list-section ul li.big a { top: 216px; }
    .product-list-section .container-custom .unionpay { position: relative; margin: 16px 0; }
    .product-list-section .container-custom .unionpay p {
        position: absolute; top: 50%; left: 50%; padding-bottom: 0;
        -webkit-transform: translate(0,-50%);
           -moz-transform: translate(0,-50%);
            -ms-transform: translate(0,-50%);
             -o-transform: translate(0,-50%);
                transform: translate(0,-50%);
    }
    .product-list-section .container-custom .unionpay img { position: relative; right: 25%; width: 260px; }
    .product-list-section .container-custom .pay-img { width: calc((100% - 32px) / 3); }
    .product-list-section .container-custom .pay-img+.pay-img { margin-left: 16px; }
    .product-list-section .container-custom .pay-img img { width: 180px; }
}
@media (min-width: 1200px) {
    .products-banner { background: url('../images/products_banner_bg.jpg') center/cover no-repeat; }
    .products-banner .banner-title-box h1 { font-size: 48px; }
    .products-banner .banner-title-box p { font-size: 28px; }
    .products-banner .banner-title-box a { font-size: 28px; }
    .product-list-section h2 { font-size: 40px; }
    .product-list-section ul li.small { width: calc((100% - 36px) / 3); height: 480px; }
    .product-list-section ul li.big { width: calc((100% - 18px) / 2); height: 450px; }
    .product-list-section ul li:nth-child(n) { margin-top: 18px; margin-left: 18px; }
    .product-list-section ul li:nth-child(-n+3) { margin-top: 0; }
    .product-list-section ul li:nth-child(1), .product-list-section ul li:nth-child(4), .product-list-section ul li:nth-child(6) { margin-left: 0; }
    .product-list-section ul li.small img, .product-list-section ul li.big img { width: 167px; }
    .product-list-section ul li.big .payment-company { top: 170px; }
    .product-list-section ul li.big p { top: 216px; }
    .product-list-section ul li.big a { top: 254px; }
    .product-list-section .container-custom .unionpay { margin: 18px 0; padding-top: 60px; padding-bottom: 60px; }
    .product-list-section .container-custom .unionpay p { font-size: 36px; }
    .product-list-section .container-custom .unionpay img { width: 316px; }
    .product-list-section .container-custom .pay-img { width: calc((100% - 36px) / 3); padding: 60px 0; }
    .product-list-section .container-custom .pay-img+.pay-img { margin-left: 18px; }
    .product-list-section .container-custom .pay-img img { width: 202px; }
}
@media (min-width: 1200px) {
    .products-banner { height: 650px; }
    .products-banner .banner-title-box h1 { font-size: 54px; }
}