.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-button-next, .swiper-button-prev { background-color: #e70310; bottom: 7rem; top: auto; margin-top: 0; background-image: none; height: auto; min-width:3.5rem; padding: .75rem; outline: none !important; } .swiper-button-next { left: 100%; right: auto; padding-left: 1rem; } .swiper-button-prev { right:0%; left: auto; padding-right: 1rem; } .swiper-button-next:hover .arrow-line, .swiper-button-prev:hover .arrow-line,.knowMore:hover .arrow-line { width: 20px } .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}