﻿.wrap{background:#fff}
.banner .chTitle {
    font-size: 2.5rem;
    font-family: PingFang Heavy;
}
.banner .engTitle{    
    font-size: 1.25rem;
}
.banner .desc {
    font-size: 1.35rem;
    letter-spacing: 5px;
    margin-top: 3rem;
}
.section-title {
    font-size:3rem;
    color: #e70310;
    margin-bottom: 1rem;
}
.section-title h2{font-size:3rem}
.desc > p {
    margin-bottom: 2rem;
    line-height: 2;
}
.part1 .section-title{position:absolute;left:25%}
.part1 .desc{margin-left:50%;width:33%}
.part4{padding:10rem 25%}
img{width:100%}

.cooperation-title{position:absolute;left:25%}
.cooperation-title a{
    background: #e70310;
    margin-top: 5rem;
    display: inline-block;
    padding: .5rem 1rem;
    font-size: 1.25rem;
}
.cooperation-content {
    margin-left: 60%;
    line-height: 1.5;
    font-size: 1.125rem;
}
.cooperation-content .sum{display:inline-block;font-size:1.25rem;background:#fff;color:#e70310;padding:0 .5rem;position:relative;margin-bottom:2rem}
.cooperation-content .sum::after{content:"";position:absolute;height:100%;width:100%;border-bottom:1px solid #fff;border-right:1px solid #fff;left:3px;top:3px}
.cooperation-content li{margin-bottom:.5rem}
.coo-part{margin-bottom: 3rem;}
.coo-part .key{color:#f8b72b}
.coo-part .size-b{font-size:1.35rem}
.coo-part .desc{margin-bottom:2rem}
.join{background:#f6f6f6;text-align:center;padding:5rem 0;margin:10rem 0}
.join h2{font-weight:bold;font-size:1.5rem;margin-bottom:3rem}
.join img{width:80%}
.apply {padding:10rem 0}
.intro {
    display: inline-block;
    width: 20%;
    margin-left: 25%;
    margin-right:5%;
}
.intro .section-title{margin-bottom:3rem}
.contact{display:inline-block;width:70%;vertical-align:top;}
.info{margin-bottom:3rem}
.info > p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
    font-weight: bold;
}
.info select, .info input,.info textarea {
    font-size: 1.15rem;
    padding: 1.25rem;
    border: 1px solid #ccc;
}
.info select{color:#ccc;background:#fff}
.info select option{color:#000}
.info textarea{resize:none;height:10rem;font-size: 1.5rem;}
.info .double>*{width:47.5%;display:flex}
.info .double{display:flex;justify-content:space-between}
#experience{height:4rem} 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #ccc;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #ccc;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #ccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #ccc;
}
.submit {
    background: #e70310;
    color: #fff;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    cursor: pointer;
    width: 30rem;
    margin-top: 3rem;
}
.getcode {
    background: #e70310;
    color: #fff;
    width: 30%;
    margin-left: 1rem;
    border: none;
}
.part2 {
    background: #e60012;
    background-size: cover;
    color: #fff;
    padding: 2rem 15% 10rem;
}
.part2 .section-title{color:#fff}
.single, .many {
    color: #fff;
    border: 2px solid #fff;
    padding: 2rem 3rem 5rem;
    margin-bottom: 5rem;
    line-height: 1.5;
}
.single h3,.many h3{font-size: 1.5rem;margin-bottom: 1.5rem;}
.contract {
    margin-bottom: 2rem;
    display: flex;
    border: 2px solid #fff;
    width:35rem
}
.contract .left {
    width: 25%;
    text-align: center;
    color: #e70310;
    background:#fff ;
    line-height: 4rem;
    font-size:1.25rem
}
.contract .right {
    width: 75%;
    text-align: center;
    line-height: 4rem;
    font-weight: bold;
    color: #fff;
    font-size: 1.35rem;
}
.policy-content{width:30%;margin-left:50%;}
.part3{padding:10rem 0;overflow:hidden}
.product-wrap .swiper-slide {
        width: 45%;
        line-height: 0;
        padding-bottom: 1rem;
    }
    .product-wrap img{width:100%}
    .product-wrap {
        padding: 0px 8%;
        background: #fff;

    }
    .more-explore {
        position: absolute;
        left: 50%;
        margin-left: -4rem;
        z-index: 30;
        background: red;
        color: #fff;
        padding: 10px 1.3rem;
        cursor: pointer;
        bottom: -1rem;
    }
.more-explore > span{
    vertical-align: middle
}
.more-explore:hover .arrow-line {
    width: 20px;
}
.explore:hover {
    background: #fff;
    color: red
}
.more-explore .arrow-line {
    background: #fff;
    margin-right: -12px
}

.product-box {
    position: absolute;
    height: calc(100% - 1rem);
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 0;
}
.product-box p{
    font-size:1.25rem
}
.swiper-slide.swiper-slide-active:hover .product-box{opacity:1}
.product-wrap .cover {
    background: rgba(255,255,255,0.5);
    opacity: 1
}
.swiper-slide.swiper-slide-active .cover{display:none;}
.part4 .section-title{
    margin-bottom:5rem;
}
.competition{position:relative}
.competition-show{text-align:center;}
.competition-show .swiper-container{width:100%;line-height:0;display:none;padding-bottom: 7rem;}
.competition-show .swiper-container.swiper-active{display:block}
.competition-show img{width:100%}
.competition-desc{}
.competition .swiper-pagination {
    color: #fff;
    bottom: .9rem;
    width: max-content;
    left: 100%;
    z-index: 11;
    transform: translateX(-50%);
    line-height: 1
}
.swiper-youshi {
    position: absolute;
    top: 46%;
    width: 75%;
    left: 12.5%;
    padding-bottom: 5rem
}
.swiper-button-next, .swiper-button-prev {
    top: 65%;
    margin-top: 0;
    outline: none !important;
    width: 40px;
    height: 60px;
    background-size: 40px 60px;
}
.swiper-button-next {
    right:5%;
    background-image: url('../../Images/service/join/next.png');
}
.swiper-button-prev {
    left:5%;
    background-image: url('../../Images/service/join/prev.png');
}
.swiper-button-next:hover .arrow-line, .swiper-button-prev:hover .arrow-line,.knowMore:hover .arrow-line {
    width: 20px
}
.swiper-pagination-bullet-active{background:#fff}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #fff;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    vertical-align: middle;
}
.arrow-right {
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.swiper-button-prev .arrow-right {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.swiper-button-prev .arrow-line{
    margin-left:-13px;
}
.swiper-button-next .arrow-line {
    margin-right: -13px;
}
.product-title,.part3>.section-title{padding-left:25%;margin-bottom:5rem}
.stitle{font-size:1.5rem}
.store {display:flex;justify-content:space-between;margin:4rem 0;color:#ccc;text-align:center;cursor:pointer}
.store img {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
    height:7rem;
    width:auto
}
.store .active img{
    -webkit-filter: grayscale(0); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(0); /* W3C */
}
.store .active{color:#000}
.system {
    width: 70%;
    margin:0 15%;
    display: flex;
    flex-wrap: wrap;
    background: #f6f6f6;
}
.sys-part {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    position:relative
}
.sys-part img{transition:opacity .3s linear}
.sys-part-b{position:absolute;height:100%;width:100%;opacity:0}
.sys-part:hover img{opacity:0;}
.sys-part:hover .sys-part-b{opacity:1;}
.shop-desc {
    text-align: left;
    margin-top: 3rem;
    position: absolute;
    bottom: 0;
}
.swiper-zlbg {
    position: absolute;
    width: 50%;
    right: 5%;
    top: 17%;
}
.swiper-zlbg .swiper-slide{width:26%}
.swiper-zlbg .swiper-slide img{display:none}
.swiper-zlbg .swiper-slide-duplicate.swiper-slide:not(.swiper-slide-active,.swiper-slide-next,[data-swiper-slide-index="1"],[data-swiper-slide-index="0"]) .bz-right{display:block}
.swiper-zlbg .swiper-slide:not(.swiper-slide-duplicate,.swiper-slide-active,.swiper-slide-next) .bz-right{display:block}
.swiper-zlbg .swiper-slide-active .bz-active{display:block !important}
.swiper-zlbg .swiper-slide-prev .bz-right{display:block  !important}
.swiper-zlbg .swiper-slide-next .bz-left{display:block !important}
.swiper-zlbg .swiper-slide-next+.swiper-slide .bz-left{display:block !important}
.swiper-zlbg .swiper-slide-next+.swiper-slide .bz-right{display:none !important}
.zlbg-content{margin-top:4rem }
.zlbg-content > div {
    text-align: center;
    color: #fff;
    margin: auto;
    display:none
}
.zlbg-content > div img{
    transform: scale(.5);
    transform-origin: top;
}
.zlbg-content > div.active{display:block}
.zlbg-content p{font-size:1.5rem;margin-bottom:2rem}

.part {
    padding: 2rem 15% 11rem;
}
.title-img {
    height: 7rem;
    width: auto;
    margin: 7rem auto;
    display: block;
}
.section{text-align:center}