/* reset */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, select, textarea, input, button, table, fieldset { margin: 0; } ul, ol, textarea, input, button, th, td, fieldset { padding: 0; } button, textarea, input { outline: none; } textarea { resize: none; } button { cursor: pointer; } input::-ms-clear { display: none; } table { border-collapse: collapse; } li { list-style: none; } /*img { border: none; display: block; vertical-align: middle; }*/ em, i { font-style: normal; } /* common */ html { min-width: inherit; } body { color: #030303; font-family: 'pingfang', 'Microsoft Yahei'; font-size: 0.14rem; min-width: inherit; } * { box-sizing: border-box; } a { color: #030303; text-decoration: none; } a:hover { color: #00a4ff; } .content { position: relative; width: 14.40rem; height: 100%; margin: 0 auto; overflow: hidden; } .title-wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; } .title-wrap .title { font-size: 0.42rem; line-height: 0.63rem; font-weight: 600; color: #000; } .title-wrap .more::after { content: ''; display: inline-block; position: relative; bottom: -0.02rem; width: 0.17rem; height: 0.15rem; background: url(/static/images/index/arrow-blue.png) no-repeat; background-size: contain; margin-left: 0.10rem; } .title-wrap .more { font-size: 0.16rem; color: #1842B3; } .title-wrap .more:hover { text-decoration: underline; } /* 右侧弹窗 */ #m-popup { display: none; position: fixed; right: .1rem; bottom: .1rem; z-index: 10001; } #m-popup .popup { box-sizing: border-box; padding: 0.30rem 0 0.30rem 0.24rem; width: 4.62rem; height: 2.08rem; background: #ffffff; border-radius: 0.05rem; box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(201, 205, 209, 0.24); background: url(/static/images/popup.png); background-size: 100% 100%; } #m-popup .popup-title { width: 2.74rem; } #m-popup .popup-title h2 { line-height: 0.24rem; font-weight: 600; font-size: 0.14rem; } #m-popup .popup-title p { font-size: 0.13rem; line-height: 0.24rem; margin-bottom: 0.15rem; } #m-popup .popup-button { display: -ms-flexbox; display: flex; } #m-popup .popup-button a { cursor: pointer; text-align: center; display: block; width: 1.00rem; line-height: 0.32rem; border-radius: 0.05rem; } #m-popup .popup-button a:first-child { background: #2550DC; color: #ffffff; margin-right: 0.10rem; } #m-popup .popup-button a:last-child { background: #FFFFFF; border: 0.01rem solid #2550DC; color: #2550DC; } #m-popup .closed { cursor: pointer; position: absolute; right: 0.12rem; top: 0.10rem; } /* 标题样式 */ .content .title { font-size: 0.42rem; line-height: 0.63rem; font-weight: 600; color: #000; } .content .subtitle { margin-top: 0.20rem; font-size: 0.18rem; line-height: 0.27rem; } @media screen and (max-width: 1300px) { #m-popup .popup { padding: 0.30rem 0 0.30rem 0.2rem; width: 5.08rem; height: 2.29rem; } #m-popup .popup-title { width: 2.98rem; } } @media screen and (max-width: 768px) { #m-popup { display: none !important; } .content { width: 7.04rem; } .content .title { font-size: 0.48rem; line-height: 0.72rem; } .content .subtitle { font-size: 0.30rem; line-height: 0.42rem; } .title-wrap .more { font-size: 0.30rem; font-weight: 400; } .title-wrap .more::after { display: none; width: 0.28rem; height: 0.25rem; margin-left: 0.10rem; } } .safety-concept { height: 8.70rem; background-image: url(/static/images/index/philosophy.png); overflow: hidden; background-position: right center; background-size: cover; background-attachment: fixed; } .title-slot { position: absolute; top: 0.98rem; right: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-size: 0.16rem; line-height: 0.32rem; } .tilte-pagination { display: -ms-inline-flexbox; display: inline-flex; width: auto; letter-spacing: 0.08rem; } .title-slot .title-arrow-prev { width: 0.32rem; height: 0.32rem; background: #0032B4 url(/static/images/product_detail/arrow-prev1.png) no-repeat; background-position: center; background-size: contain; margin-right: .15rem; cursor: pointer; } .title-slot .title-arrow-next { width: 0.32rem; height: 0.32rem; background: #0032B4 url(/static/images/product_detail/arrow-next1.png) no-repeat; background-position: center; background-size: contain; margin-left: .15rem; cursor: pointer; } .safety-concept .content .safety-title { margin-top: 0.99rem; color: #FFFFFF; font-size: 0.42rem; line-height: 0.63rem; font-weight: 600; letter-spacing: 0.015rem; } .safety-concept-container { position: relative; } .safety-concept-container .swiper-button__box { position: absolute; top: -.30rem; right: .86rem; color: #fff; width: 1.32rem; height: .32rem; line-height: .32rem; } .safety-concept-container .swiper-button__box>span { position: relative; left: .50rem; } .safety-concept-container .swiper-button::after { width: .32rem; height: .32rem; color: #fff; background: #0032B4; font-size: .18rem; line-height: .32rem; text-align: center; } .safety-concept-container .wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .safety-concept-container .safety-concept-item { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 4.48rem; height: 4.9rem; background-color: #13181F; padding-left: 0.30rem; padding-right: 0.32rem; margin-top: 1.36rem; } .safety-concept-container .safety-concept-item span { height: 0; } .safety-concept-container .safety-concept-item:hover span { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1rem; transition: all 0.3s; z-index: 2; background-color: #0032b4; } /* .safety-concept-container .safety-concept-item::after { content: ""; clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; } */ .safety-concept-container .safety-concept-item .safety-concept-img { position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 1.34rem; width: 1.24rem; } .safety-concept-container .safety-concept-item .safety-concept-img img { width: 100%; } .safety-concept-container .safety-concept-item h3 { color: #FFFFFF; line-height: 0.48rem; font-size: 0.34rem; letter-spacing: 0.0082rem; padding-top: 1.17rem; } .safety-concept-container .safety-concept-item p { color: #D7D7D7; font-size: 0.16rem; line-height: 0.25rem; margin-top: 0.17rem; text-align: justify; text-justify: distribute; } .safety-concept-container .safety-concept-item a { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; margin-top: auto; margin-bottom: 0.5rem; color: #1089FF; font-size: 0.16rem; line-height: 0.25rem; } .safety-concept-container .safety-concept-item a::after { content: ''; width: 0.17rem; height: 0.15rem; background: url(/static/images/index/arrow-blue.png) no-repeat; background-size: contain; margin-left: 0.1rem; } @media screen and (max-width: 768px) { .safety-concept-container .swiper-button__box { display: none; } .safety-concept { height: 11.23rem; background-image: url(/static/images/index/philosophyMobie.png); } .safety-concept .content .safety-title { margin-top: 0.99rem; color: #FFFFFF; font-size: 0.48rem; line-height: 0.63rem; font-weight: 600; letter-spacing: 0.017rem; } .safety-concept-container .safety-concept-item { width: 6.08rem; height: 7.20rem; } .safety-concept-container .safety-concept-item .safety-concept-img { height: 1.91rem; width: 1.67rem; } .safety-concept-container .safety-concept-item h3 { color: #FFFFFF; line-height: 0.53rem; font-size: 0.38rem; letter-spacing: 0.092rem; padding-top: 1.44rem; } .safety-concept-container .safety-concept-item p { color: #D7D7D7; font-size: 0.30rem; line-height: 0.48rem; letter-spacing: 0.0072rem; margin-top: 0.23rem; -webkit-line-clamp: 8; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .safety-concept-container .safety-concept-item a { font-size: 0.30rem; line-height: 0.42rem; } .title-slot { display: inline-block; position: absolute; top: 0.92rem; right: 0; display: -ms-flexbox; display: flex; } .title-slot .title-arrow-prev, .title-slot .title-arrow-next { width: 0.64rem; height: 0.64rem; background-size: cover; background-color: transparent; background-color: initial; } .title-slot .title-arrow-prev:hover, .title-slot .title-arrow-next:hover { cursor: pointer; } .title-slot .tilte-pagination { display: inline-block; text-align: center; font-size: 0.30rem; font-weight: 400; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; color: #fff; } .safety-concept-container .safety-concept-item a::after { content: ''; display: inline-block; width: 0.28rem; height: 0.25rem; background: url(/static/images/index/arrow-blue.png) no-repeat; background-size: contain; margin-left: 0.15rem; } } .safety-product { background: #DBDDE0 url(/static/images/index/product_bg_big.png) no-repeat 0 0; padding-top: 1rem; padding-bottom: 0.8rem; background-size: 100% 100%; } .safety-product .title-wrap { padding-bottom: 0.5rem; margin-bottom: 0.5rem; position: relative; } .safety-product .title-wrap .title-splite { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.1rem; background: url(/static/images/index/product_title_spite.png) no-repeat; background-size: cover; } .safety-product .context { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .safety-product .text-wrap { -ms-flex: 1; flex: 1; margin-right: 0.64rem; } .safety-product .text-wrap .text-title { font-size: 0.24rem; font-weight: 600; color: #000000; margin-bottom: 0.2rem; } .safety-product .text-wrap .text-desp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 0.16rem; font-weight: 400; color: #1D1D1D; line-height: 0.25rem; margin-bottom: 0.6rem; min-height: 1rem; } .safety-product .links-wrap { border-top: 1px dashed #1842B3; padding-top: 0.5rem; -ms-flex-pack: justify; justify-content: space-between; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .safety-product .links-wrap .link-item { width: 3.2rem; height: 0.46rem; line-height: 0.46rem; border: 0.01rem solid #1842B3; margin-bottom: 0.2rem; } .safety-product .links-wrap .link-item a { font-size: 0.16rem; font-weight: 400; padding-left: 0.3rem; color: #1842B3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .safety-product .links-wrap .link-item a:hover { background-color: #0032B4; color: #fff; } .safety-product .product-combo { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding-bottom: 0.6rem; width: 7.04rem; height: 4.35rem; border-left: 0.01rem solid #D9DBDE; } .safety-product .product-combo:after { position: absolute; content: ''; width: 100%; bottom: 0; left: 0; height: 0.6rem; background: url(/static/images/index/product_combo_bg.png); background-size: 100% 100%; } .safety-product .product-combo .combo-item { width: 33.3%; height: 1.25rem; background: #F2F4F8; border-right: 0.01rem solid #D9DBDE; border-bottom: 0.01rem solid #D9DBDE; position: relative; font-size: 0.18rem; font-weight: 400; color: #1D1D1D; padding-top: 0.17rem; padding-left: 0.2rem; } .safety-product .product-combo .combo-item:hover { background: #D8D8D8; color: #161E2A; } .safety-product .product-combo .combo-item.current { background: #0031B7; color: #fff; } .safety-product .product-combo .combo-item:after { content: ''; position: absolute; right: 0.21rem; bottom: 0.21rem; width: 0.17rem; height: 0.15rem; background: url(/static/images/index/product_arrow_grew.png); background-size: 100% 100%; } .safety-product .product-combo .combo-item.current:after { background: url(/static/images/index/product_arrow_white.png); background-size: 100% 100%; } @media screen and (max-width: 1240px) { .safety-product { background: #DBDDE0 url(/static/images/index/product_bg_middle.png) no-repeat 0 0; background-size: 100% 100%; } .safety-product .context { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0.1rem; } .safety-product .text-wrap { -ms-flex-order: 1; order: 1; width: 100%; margin-top: 0.5rem; margin-right: 0; } .safety-product .product-combo { width: 100%; height: 4.65rem; } .safety-product .product-combo .combo-item { height: 1.35rem; } .safety-product .product-combo:after { background: url(/static/images/index/product_combo_bg_mid.png) no-repeat; background-size: 100% 100%; } .safety-product .links-wrap .link-item { width: 32%; height: 0.5rem; line-height: 0.5rem; } .safety-product .text-wrap .text-desp { font-size: 0.18rem; min-height: auto; } .safety-product .links-wrap .link-item a { font-size: 0.18rem; padding-left: 0; } } @media screen and (max-width: 768px) { .safety-product { background: #E1E4E9; position: relative; } .safety-product:before { content: ''; position: absolute; left: -9%; top: 0; width: 109%; height: 0.5rem; background: url(/static/images/index/product_bg_m.png) no-repeat 0 0; background-size: 100%; } .safety-product .product-combo { -ms-flex-pack: justify; justify-content: space-between; } .safety-product .product-combo .combo-item { height: 1.23rem; border: none; width: 32.5%; font-size: 0.3rem; } .safety-product .product-combo .combo-item:after { width: 0.28rem; height: 0.25rem; right: 0.3rem; } .safety-product .product-combo:after { background: url(/static/images/index/product_combo_bg_m.png) no-repeat; background-size: 100% 100%; } .safety-product .text-wrap .text-title { font-size: 0.3rem; font-weight: 600; } .safety-product .text-wrap .text-desp { -webkit-line-clamp: 6; min-height: auto; margin-bottom: 0.4rem; font-size: 0.30rem; line-height: 0.48rem; text-align: justify; } .safety-product .links-wrap { border-top: 0.01rem solid #C5C5C5; display: block; } .safety-product .links-wrap .link-item { width: 100%; border: none; margin-bottom: 0; } .safety-product .links-wrap .link-item:not(:last-child) { margin-top: 0.3rem; } .safety-product .links-wrap .link-item a { font-size: 0.3rem; } .safety-product .links-wrap .link-item a:hover { background-color: inherit; color: #1842B3; } .safety-product .links-wrap .link-item a:active { text-decoration: underline; } .safety-product .links-wrap .link-item a:after { position: relative; content: ''; width: 0.32rem; height: 0.25rem; background: url(/static/images/index/arrow-blue.png) no-repeat; background-size: contain; margin-left: 0.25rem; display: inline-block; } } .safety-service { box-sizing: border-box; height: 8.64rem; padding-top: 1rem; background: #0A1018 url(/static/images/index/service_bg_big.png) repeat-x 50% 100%; background-size: 100% 100%; } .safety-service .title-wrap .title { color: #fff; } .safety-service .title-wrap .more { color: #fff; } .safety-service .title-wrap .more::after { background: url(/static/images/index/arrow-white.png) no-repeat; background-size: contain; } .safety-service .context { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 1rem; } .safety-service .text-wrap { -ms-flex: 1; flex: 1; margin-right: 1.86rem; margin-top: 1.17rem; } .safety-service .text-wrap .text-title { font-size: 0.24rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; } .safety-service .text-wrap .text-desp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 0.16rem; font-weight: 400; color: #C8C8C8; line-height: 0.25rem; margin-bottom: 0.6rem; } .safety-service .links-wrap { border-top: 1px dashed #1842B3; padding-top: 0.5rem; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 0.2rem 0.66rem; gap: 0.2rem 0.66rem; } .safety-service .links-wrap .link-item a { width: 2.9rem; font-size: 0.16rem; line-height: 0.25rem; font-weight: 400; background: url(/static/images/index/service_list_item_bg.png) no-repeat left center; background-size: 0.08rem 0.08rem; padding-left: 0.18rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .safety-service .links-wrap .link-item a:hover { text-decoration: underline; } .safety-service .service-combo .service-combo-wrap { position: relative; top: 0.35rem; width: 6.03rem; height: 5.22rem; background: url('https://static01-www.qianxin.com/qaxweb/d41350005f4189179ddc2a226c97bca1.png') no-repeat 50% 50%; background-size: contain; } .safety-service .content { overflow: visible; overflow: initial } .safety-service .service-combo .combo-item { position: absolute; width: 48%; } .safety-service .service-combo .combo-item .item-bg { position: absolute; width: 90%; border-width: 0.55rem; border-style: solid; border-color: #0031B7 transparent transparent transparent; display: block; border-bottom: none; border-right-width: 0.32rem; border-left-width: 0.32rem; } .safety-service .service-combo .combo-item .item-text { display: block; position: relative; z-index: 2; color: #F3F5FB; width: 90%; height: 0.55rem; cursor: pointer; font-size: 0.16rem; padding: 0 5%; text-align: center; line-height: 0.55rem; } .safety-service .service-combo .combo-item-1 { -webkit-transform: rotate(-60deg) translate(-40%, 80%); transform: rotate(-60deg) translate(-40%, 80%); } .safety-service .service-combo .combo-item-2 { -webkit-transform: rotate(0deg) translate(58%, 50%); transform: rotate(0deg) translate(58%, 50%); } .safety-service .service-combo .combo-item-3 { -webkit-transform: rotate(60deg) translate(103%, -398%); transform: rotate(60deg) translate(103%, -398%); } .safety-service .service-combo .combo-item-4 { -webkit-transform: rotate(-240deg) translate(50%, -834%); transform: rotate(-240deg) translate(50%, -834%); } .safety-service .service-combo .combo-item-5 { -webkit-transform: rotate(180deg) translate(-47%, -808%); transform: rotate(180deg) translate(-47%, -808%); } .safety-service .service-combo .combo-item-4 .item-text { -webkit-transform: rotate(179deg) translate(5%, -2%); transform: rotate(179deg) translate(5%, -2%); } .safety-service .service-combo .combo-item-5 .item-text { -webkit-transform: rotate(180deg) translate(0%, 0%); transform: rotate(180deg) translate(0%, 0%); } .safety-service .service-combo .combo-item-6 { -webkit-transform: rotate(240deg) translate(-92%, -356%); transform: rotate(240deg) translate(-92%, -356%); } .safety-service .service-combo .combo-item-6 .item-text { -webkit-transform: rotate(179deg) translate(5%, -2%); transform: rotate(179deg) translate(5%, -2%); } .safety-service .service-combo .combo-item.current .item-bg { border-color: #002585 transparent transparent transparent; } @media screen and (max-width: 768px) { .safety-service { height: auto; background: #000000 url(/static/images/index/service_bg_m.png) no-repeat 0 0; background-size: cover; } .safety-service .context { -ms-flex-direction: column; flex-direction: column; } .safety-service .service-combo .combo-item { -webkit-tap-highlight-color: transparent; } .safety-service .service-combo .service-combo-wrap { top: 0; width: 100%; height: 6.1rem; background-size: cover; } .safety-service .title-wrap { margin-bottom: 0.9rem; } .safety-service .text-wrap { margin-right: 0; margin-top: 0; padding-top: 0.9rem; } .safety-service .text-wrap .text-title { font-size: 0.38rem; font-weight: 600; line-height: 0.53rem; } .safety-service .text-wrap .text-desp { font-size: 0.30rem; line-height: 0.48rem; } .safety-service .links-wrap { display: block; padding-top: 0; border-top: 0.02rem solid #1842B3; } .safety-service .links-wrap .link-item { width: 100%; border: none; height: auto; margin: 0; } .safety-service .service-combo { -ms-flex-order: -1; order: -1; } .safety-service .service-combo .combo-item .item-text { padding: 0 12%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 0.55rem; font-size: 0.2rem; } .safety-service .links-wrap .link-item a { width: 100%; font-size: 0.3rem; background-size: 0.16rem 0.16rem; line-height: 0.48rem; padding: 0.2rem 0; padding-left: 0.35rem; border-bottom: 0.01rem solid #4E4E4E; } .safety-service .links-wrap .link-item a:hover { text-decoration: none; } .safety-service .links-wrap .link-item a:active { text-decoration: underline; } .safety-service .title-wrap .more::after { display: none; } .safety-service .service-combo .combo-item-1 { -webkit-transform: rotate(-60deg) translate(-40%, 80%); transform: rotate(-60deg) translate(-40%, 80%); } .safety-service .service-combo .combo-item-2 { -webkit-transform: rotate(0deg) translate(58%, 40%); transform: rotate(0deg) translate(58%, 40%); } .safety-service .service-combo .combo-item-3 { -webkit-transform: rotate(60deg) translate(102%, -498%); transform: rotate(60deg) translate(102%, -498%); } .safety-service .service-combo .combo-item-4 { -webkit-transform: rotate(-240deg) translate(48%, -1000%); transform: rotate(-240deg) translate(48%, -1000%); } .safety-service .service-combo .combo-item-5 { -webkit-transform: rotate(180deg) translate(-49%, -955%); transform: rotate(180deg) translate(-49%, -955%); } .safety-service .service-combo .combo-item-6 { -webkit-transform: rotate(240deg) translate(-93%, -430%); transform: rotate(240deg) translate(-93%, -430%); } } .solution { background: #FFFFFF; text-align: center; padding-bottom: 0.84rem; } .solution .content .title-wrap { margin-top: 1.00rem; margin-bottom: 0.58rem; } .solution .tab-tag { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; } .solution .solution-nav-container { border-bottom: 0.01rem solid #D8D8D8; } .solution .tab-tag li { cursor: pointer; padding-bottom: 0.20rem; font-size: 0.16rem; font-weight: 600; color: #6D6E71; line-height: 0.22rem; letter-spacing: 0.01rem; margin-right: 0.5rem; } .solution .tab-tag li:hover { color: #0032B4; } .solution .tab-tag li.current { border-bottom: 0.03rem solid #0032B4; color: #0032B4; } .solution .detail { text-align: left; display: -ms-flexbox; display: flex; } .solution .detail .picture { width: 4.15rem; height: 4.15rem; margin-right: 0.98rem; } .solution .detail .picture img { mix-blend-mode: darken; width: 100%; height: auto; } .solution .detail .text-detail { -ms-flex: 1; flex: 1; } .solution .detail h2 { font-size: 0.24rem; font-weight: 600; color: #333333; line-height: 0.33rem; margin-top: 0.60rem; margin-bottom: 0.14rem; } .solution .text-content { color: #4E4E4E; line-height: 0.24rem; margin-bottom: 0.47rem; font-size: 0.16rem; } .solution .detail .link { margin-bottom: 0.34rem; } .solution .link a { font-size: 0.16rem; font-weight: 400; color: #1842B3; line-height: 0.22rem; background: url(/static/images/index/arrow-blue.png) no-repeat right center; background-size: 0.17rem 0.15rem; padding-right: 0.30rem; } .solution .prods { padding-top: 0.34rem; border-top: 0.01rem solid #C5C5C5; } .solution .prods .list-title { font-size: 0.16rem; font-weight: 600; color: #050F2A; line-height: 0.24rem; margin-bottom: 0.15rem; } .solution .prods .prods-list { padding-right: 0.01rem; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .solution .prods a { min-width: 30%; height: 0.46rem; border: 0.01rem solid #1842B3; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 0 0.3rem; } .solution .prods a .icon{ margin-left: .1rem; } .solution .prods a:hover { background-color: #0032B4; } .solution .prods .prods-list-less { -ms-flex-pack: start; justify-content: start; } .solution .prods .prods-list-less a { margin-right: 10%; width: 40%; } .solution .prods .text { font-size: 0.16rem; font-weight: 400; color: #1842B3; line-height: 0.24rem; } .solution .prods a:hover .text { color: #fff; } .solution .prods .icon { width: 0.17rem; height: 0.13rem; background-image: url(/static/images/index/arrow-blue.png); background-size: cover; } .solution .prods a:hover .icon { background-image: url(/static/images/index/arrow-white.png); } .technical-solution-m, .technical-solution-m-group--container { display: none; } @media screen and (max-width: 1240px) { .solution .tab-tag li { margin-right: 0.30rem; } .solution .detail .picture { margin-right: 0.48rem; } .solution .prods .prods-list { -ms-flex-wrap: wrap; flex-wrap: wrap; } .solution .prods a { width: 48%; margin-bottom: 0.20rem; padding: 0 0.20rem; } .solution .prods .prods-list-less { -ms-flex-pack: justify; justify-content: space-between; } .solution .prods .prods-list-less a { margin-right: 0; width: 48%; } } @media screen and (max-width: 768px) { .solution .solution-nav-swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: auto; height: 100%; position: relative; } .solution .tab-tag li { margin-right: 0; text-align: left; font-size: 0.3rem; } .solution .detail { display: block; } .solution .detail .picture { width: 5.94rem; height: auto; display: block; margin: 0 auto; } .solution .detail .picture img { width: 100%; display: block; margin: 0 auto; } .solution .detail .text-detail { width: 100%; } .solution .detail h2 { font-size: 0.38rem; font-weight: 600; color: #1D1D1D; margin-bottom: 0.2rem; } .solution .text-content { font-size: 0.3rem; font-weight: 400; color: #4E4E4E; line-height: 0.48rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .solution .detail .link { margin-bottom: 0.5rem; } .solution .link a { font-size: 0.3rem; font-weight: 400; color: #1842B3; background-size: 0.28rem 0.25rem; padding-right: 0.4rem; } .solution .tab-tag li:hover { color: #6D6E71; } .solution .tab-tag li.current { color: #333333; } .solution .prods { padding-top: 0.5rem; } .solution .prods .list-title { font-size: 0.38rem; font-weight: 600; color: #1D1D1D; line-height: 0.53rem; margin-bottom: 0.4rem; } .solution .prods .prods-list { display: block; } .solution .prods a { width: 99%; height: 0.94rem; } .solution .prods .text { font-size: 0.30rem; font-weight: 400; color: #0032B4; } .solution .prods .icon { width: 0.31rem; height: 0.24rem; background-size: 0.31rem 0.24rem; } .solution .prods .prods-list-less a { width: 99%; } } .main-swiper { width: 100%; } .main-swiper .content { display: block; } .main-container { height: 100%; overflow: hidden; } .main-container .main-wrap .main-item { overflow: hidden; } .main-container .main-wrap .main-item video { display: block; width: 100%; max-width: 100%; } .main-container .main-wrap .mobile-img { display: none; } .main-swiper .snow-canvas { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; z-index: 10; } .main-item--container { position: absolute; top: 4.6rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 14.4rem; } .main-container .main-wrap .main-detail { display: block; width: 2.88rem; height: 0.50rem; font-size: 0.18rem; font-weight: 600; text-align: center; line-height: 0.50rem; color: #fff; background-color: #2550dc; } .main-container .main-wrap .main-detail:hover { background-color: #002B9B; } .main-swiper .main-item img { display: block; width: 100%; margin: auto; } .main-swiper .pagination-wrap { position: absolute; bottom: 0.32rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 14.40rem; height: 0.05rem; margin: 0 auto; z-index: 10; } .main-swiper .swiper-pagination { display: -ms-flexbox; display: flex; } .main-swiper .swiper-pagination-customs { height: 0.05rem; width: 0.36rem; background-color: #fff; } .main-swiper .swiper-pagination-customs:not(:first-child) { margin-left: 0.10rem; } .main-swiper .swiper-pagination-customs:hover { background-color: #D8D8D8; cursor: pointer; } .main-swiper .swiper-pagination-customs-active { background-color: #2550dc; } @media screen and (max-width: 1764px) { .main-item--container { top: 3.6rem; } .main-item--container a { display: block; padding-left: 1.4rem; } } @media screen and (max-width: 768px) { .main-swiper { height: 7.50rem; } .main-swiper .main-item img { width: 100%; left: inherit; -webkit-transform: translateX(0); transform: translateX(0); } .main-container .main-wrap .main-detail { bottom: 1rem; width: 2.88rem; height: 0.90rem; line-height: 0.90rem; font-size: 0.30rem; } .main-swiper .pagination-wrap { width: 7.04rem; height: 0.10rem; } .main-container .main-wrap .main-item video { display: none; } .main-container .main-wrap .mobile-img { display: block; } .main-swiper .swiper-pagination { width: 1.58rem; } .main-swiper .swiper-pagination-customs { height: 0.05rem; width: 0.36rem; } .main-swiper .swiper-pagination-customs:not(:first-child) { margin-left: 0.10rem; } .main-item--container { width: 7.04rem; top: auto; top: initial; bottom: 0.98rem; } .main-item--container a { padding-left: 0; } } /* dynamic 公共样式 */ .dynamic { padding: 0.60rem 0 1.05rem; background-color: #fff; } .dynamic .y-flex { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .dynamic .dynamic-title { font-size: 0.16rem; float: left; font-weight: bold; color: #0032B4; margin-right: 0.05rem; } .dynamic .dynamic-title::before { content: '['; } .dynamic .dynamic-title::after { content: ']'; } .dynamic .dynamic-text { font-size: 0.16rem; font-weight: 400; color: #000; } .dynamic .dynamic-text:hover a { color: #1842B3 !important; } .dynamic .dynamic-text a { display: block; height: 100%; word-break: break-all; } /* dynamic 单独样式 */ .dynamic .dynamic-wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; height: 3.70rem; margin: 0.54rem 0 0.40rem 0; } .dynamic .left-pic { position: relative; width: 7.04rem; overflow: hidden; } .dynamic .pic-wrap { display: -ms-flexbox; display: flex; position: relative; height: auto; } .dynamic .pic-wrap a { width: 100%; } .dynamic .pic-wrap a img { width: 100%; object-fit: cover; } .dynamic .time-axis { width: 0.04rem; background-color: #E9EAEE; } .dynamic .axis-item-inner { width: 100%; height: 0.60rem; background-color: #0032B4; display: none; } .dynamic .axis-item { height: 0.92rem; } .dynamic .axis-active .axis-item-inner { display: block; } .dynamic .right-content { -ms-flex-positive: 1; flex-grow: 1; display: -ms-flexbox; display: flex; } .dynamic .time-line { text-align: right; padding-left: 0.92rem; } .dynamic .time-line .line-active { color: #1842B3; } .dynamic .time-item { cursor: pointer; height: 0.92rem; padding-right: 0.12rem; } .dynamic .day { font-size: 0.16rem; line-height: 0.30rem; padding-bottom: 0.10rem; } .dynamic .date { width: -webkit-max-content; width: max-content; font-size: 0.12rem; } .dynamic .right-content .list-wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-positive: 1; flex-grow: 1; max-width: 7.00rem; height: 100%; margin-left: -0.03rem; } .dynamic .list-item { overflow: hidden; text-overflow: ellipsis; height: 0.92rem; line-height: 0.32rem; padding-left: 0.20rem; } .dynamic .list-item:hover { cursor: pointer; } .dynamic .dynamic-hot { display: -ms-flexbox; display: flex; } .dynamic .dynamic-hot .hot-item { margin-right: 0.3rem; width: 3.38rem; } .dynamic .dynamic-hot .hot-item a { display: block; } .dynamic .dynamic-hot .hot-item:last-child{ margin-right: 0; } .dynamic .hot-item .hot-img { width: 100%; height: 1.90rem; object-fit: cover; margin-bottom: 0.30rem; } .dynamic .hot-des { overflow: hidden; text-overflow: ellipsis; height: 0.72rem; line-height: 0.25rem; } /* 768 */ @media screen and (max-width: 768px) { .dynamic { padding: 0.60rem 0 1.00rem; } .dynamic .title-wrap .more { font-size: 0.30rem; line-height: 0.42rem; font-weight: 400; } .dynamic .dynamic-wrap { -ms-flex-direction: column; flex-direction: column; height: auto; margin: 0.54rem 0 1.01rem 0; } .dynamic .left-pic { width: 7.04rem; height: 3.96rem; margin-bottom: 0.68rem; } .dynamic .time-line { padding: 0; } .dynamic .time-item { height: 2rem; color: #333; padding-right: 0.12rem; } .dynamic .day { font-size: 0.30rem; font-weight: 600; line-height: 0.48rem; padding-bottom: 0.30rem; } .dynamic .date { font-size: 0.26rem; font-weight: 400; line-height: 0.30rem; } .dynamic .dynamic-text a, .dynamic .dynamic-title { font-size: 0.30rem; } .dynamic .time-axis { width: 0.039rem; -ms-flex: 0 0 0.039rem; flex: 0 0 0.039rem; } .dynamic .axis-item { height: 2rem; } .dynamic .axis-item-inner { height: 1.10rem; } .dynamic .right-content { max-width: 100%; } .dynamic .list-item { -webkit-line-clamp: 4; line-height: 0.50rem; padding-left: 0.20rem; height: 2rem; } .dynamic .dynamic-hot { -ms-flex-direction: column; flex-direction: column; } .dynamic .dynamic-hot .hot-item { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding: 0.32rem 0 0.30rem; border-top: 0.02rem solid #E9EAEE; } .dynamic .dynamic-hot .hot-img { width: 2.24rem; height: 1.26rem; } .dynamic .dynamic-hot .hot-des { width: 4.49rem; font-size: 0.30rem; line-height: 0.48rem; height: 1.36rem; } } .activity { font-size: 0.16rem; padding: 1rem 0; background-color: #F2F4F8; } .activity .title-wrap { margin-bottom: 0.51rem; } .activity .activity-wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .activity .activity-wrap .activity-item { width: 4.63rem; } .activity .activity-item img { width: 100%; height: 2.6rem; object-fit: fill; display: block; } .activity .activity-item .item-des { padding: 0.30rem 0.49rem 0.25rem 0.20rem; background-color: #fff; } .activity .activity-item:hover .item-des { background-color: #D8D8D8; } .activity .activity-item .item-title:hover, .activity .activity-item .item-text:hover { color: #1842B3; } .activity .activity-item .item-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; line-height: 0.22rem; color: #333; margin-bottom: 0.07rem; } .activity .activity-item .item-text { height: 0.75rem; overflow: hidden; text-overflow: ellipsis; word-break: break-all; color: #4e4e4e; font-weight: 400; line-height: 0.25rem; margin-bottom: 0.21rem; } .activity .activity-item .item-des .detail { font-size: 0.16rem; font-weight: 400; color: #1842B3; } .activity .activity-item .item-des .detail:hover { text-decoration: underline; } .activity .activity-item .item-des .detail:after { content: ''; display: inline-block; position: relative; bottom: -0.02rem; width: 0.17rem; height: 0.15rem; background: url(/static/images/index/arrow-blue.png) no-repeat; background-size: contain; margin-left: 0.10rem; } @media screen and (max-width: 768px) { .activity { padding: 1rem 0; } .activity .title-wrap { margin-bottom: 0.6rem; } .activity .activity-wrap .activity-item { width: 6.08rem; } .activity .activity-item img { height: 3.42rem; } .activity .activity-item .item-des { padding: 0.4rem 0.33rem 0.50rem; } .activity .activity-item .item-des .detail { font-size: 0.30rem; font-weight: 400; color: #1842B3; line-height: 0.42rem; } .activity .activity-item .item-title { font-size: 0.38rem; font-weight: 600; line-height: 0.53rem; margin-bottom: 0.20rem; } .activity .activity-item .item-text { font-size: 0.30rem; line-height: 0.48rem; margin-bottom: 0.86rem; height: 1.36rem; } .activity .activity-item .item-des .detail:after { width: 0.34rem; height: 0.20rem } } .trend { padding: 1rem 0; background: url('../../images/index/trend-bg.png') repeat 50% 0; } .trend .content .title { font-size: .42rem; line-height: .63rem; font-weight: 600; color: #333; } .trend .content .subtitle { margin-top: .2rem; font-size: .18rem; line-height: .23rem; color: #0032B4; } .trend .wrap { width: 14.4rem; margin: 0 auto; } .trend .wrap .tab-group { display: -ms-flexbox; display: flex; margin-top: .5rem; } .trend .wrap .tab-group .tab { box-sizing: border-box; width: 25%; padding: .45rem 0 .54rem .34rem; border: .02rem solid transparent; } .trend .wrap .tab-group .tab:nth-child(2n+1) { background-color: #0F1319; } .trend .wrap .tab-group .tab:nth-child(2) { background-color: #0032B4; } .trend .wrap .tab-group .tab:nth-child(4) { background-color: #FFCD00; } .trend .wrap .tab-group .tab>img { display: block; height: .89rem; } .trend .wrap .tab-group .tab .text { font-size: .24rem; font-weight: 600; line-height: .33rem; color: #FFF; margin-top: 1rem; } .trend .wrap .tab-group .tab .more { position: relative; display: -ms-flexbox; display: flex; margin-top: .17rem; -ms-flex-align: center; align-items: center; } .trend .wrap .tab-group .tab .more>p { font-size: .16rem; line-height: .22rem; color: #FFF; } .trend .wrap .tab-group .tab .more .arrow { background: url('../../images/index/arrow-white.png') center center no-repeat; background-size: 100% 100%; width: .18rem; height: .15rem; margin-left: .15rem; } @media screen and (min-width: 768px) { .trend .wrap .tab-group .tab:nth-child(2n+1):hover { background-color: #1D1D1D; } .trend .wrap .tab-group .tab:nth-child(2n+1):active { background-color: #0F1319; } .trend .wrap .tab-group .tab:nth-child(2):hover { background-color: #002B9B; } .trend .wrap .tab-group .tab:nth-child(2):active { background-color: #002585; } .trend .wrap .tab-group .tab:nth-child(4):hover { background-color: #E5B800; } .trend .wrap .tab-group .tab:nth-child(4):active { background-color: #D6AC00; } } @media screen and (max-width: 768px) { .trend { padding: 1rem 0 0; } .trend .wrap { width: 100%; } .trend .content .title { font-size: .48rem; line-height: .72rem; } .trend .content .subtitle { font-size: .3rem; line-height: .42rem; } .trend .wrap .tab-group { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: .6rem; background: #0032B4; } .trend .wrap .tab-group .tab { width: 50%; padding: .6rem .33rem .32rem .32rem; } .trend .wrap .tab-group .tab:nth-child(3) { background-color: #FFCD00; } .trend .wrap .tab-group .tab:nth-child(4) { background-color: #0F1319; } .trend .wrap .tab-group .tab:nth-child(3n+1):active { background-color: #1D1D1D; } .trend .wrap .tab-group .tab:nth-child(2):active { background-color: #002B9B; } .trend .wrap .tab-group .tab:nth-child(3):active { background-color: #E5B800; } .trend .wrap .tab-group .tab>img { height: .89rem; } .trend .wrap .tab-group .tab .text { font-size: .38rem; line-height: .53rem; margin-top: .74rem; } .trend .wrap .tab-group .tab .more { margin-top: .1rem; } .trend .wrap .tab-group .tab .more>a { font-size: .3rem; line-height: .42rem; color: #FFF; } .trend .wrap .tab-group .tab .more .arrow { position: absolute; width: .36rem; height: .32rem; right: 0; } .trend .wrap .tab-group .tab .more>p { font-size: .30rem; font-weight: 400; color: #FFFFFF; line-height: .42rem; } } .ecology { background-color: #000; padding: 1.39rem 0 1.63rem; background-image: url('../../images/index/ecology-bg.png'); } .ecology .content .title { font-size: 0.42rem; line-height: 0.63rem; font-weight: 600; color: #FFF; } .ecology .content .subtitle { margin-top: 0.20rem; font-size: 0.18rem; line-height: 0.27rem; color: #CBCBCB; } .ecology .content .btn-group { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0.32rem; } .ecology .content .btn-group .button { display: -ms-flexbox; display: flex; position: relative; box-sizing: border-box; width: 1.92rem; padding: 0.11rem 0.32rem; background-color: transparent; border: .01rem solid #8E9093; -ms-flex-align: center; align-items: center; font-size: 0.18rem; line-height: 0.22rem; color: #FFF; } .ecology .content .btn-group .button:not(:first-child) { margin-left: .32rem; } .ecology .content .btn-group .button .arrow { background: url('../../images/index/arrow-white.png') center center no-repeat; background-size: 100% 100%; position: absolute; right: 0.32rem; width: 0.18rem; height: 0.15rem; } @media screen and (min-width: 769px){ .ecology .content .btn-group .button:hover{ color: #000; border: .01rem solid #FFF; background-color: #FFF; } .ecology .content .btn-group .button:hover .arrow{ -webkit-filter: brightness(0); filter: brightness(0); } .ecology .content .btn-group .button:active{ color: #000; border: .01rem solid #D1D1D1; background-color: #D1D1D1; } } @media screen and (max-width: 768px) { .ecology { padding: 1rem 0 1.04rem; background: url('../../images/index/ecology-m-bg.png') no-repeat; background-size: 100% 100%; } .ecology .content .title { font-size: 0.48rem; line-height: 0.72rem; } .ecology .content .subtitle { font-size: 0.30rem; line-height: 0.42rem; letter-spacing: 0.023rem; } .ecology .content .btn-group { margin-top: 0.90rem; -webkit-column-gap: 0.32rem; grid-column-gap: 0.32rem; column-gap: 0.32rem; grid-row-gap: 0.36rem; row-gap: 0.36rem; } .ecology .content .btn-group .button { width: 3.36rem; padding: 0.23rem 0 0.25rem 0.30rem; border: 0.02rem solid #FFF; font-size: 0.30rem; line-height: 0.42rem; color: #FFF; } .ecology .content .btn-group .button:active{ color: #000; border: .01rem solid #FFF; background-color: #FFF; } .ecology .content .btn-group .button:active .arrow{ -webkit-filter: brightness(0); filter: brightness(0); } .ecology .content .btn-group .button:not(:first-child) { margin-left: 0; } .ecology .content .btn-group .button .arrow { width: 0.36rem; height: 0.32rem; right: 0.30rem; } } .customer { height: 5.58rem; background-color: #F2F4F8; position: relative; } .customer .content .title-wrap { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; margin-top: 1rem; } .customer .content .title { font-size: .42rem; line-height: .63rem; font-weight: 600; color: #333333; } .customer .content .subtitle { font-size: .16rem; line-height: .27rem; color: #8D9097; margin-top: .20rem; } .customer .content .list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: .50rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .customer .content .list img { width: 2.2rem; height: .89rem; object-fit: cover; } .customer .content .list img:nth-child(n+7) { margin-top: .21rem; } .customer .content .list img:not(:nth-child(6n+1)) { margin-left: .239rem; } .customer .content .custom-btn { position: relative; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: max-content; -ms-flex-align: center; align-items: center; } .customer .content .custom-btn .custom-button-prev, .customer .content .custom-btn .custom-button-next { width: .32rem; height: .32rem; } .customer .content .custom-btn .custom-button-prev { background: url(https://static01-www.qianxin.com/qaxweb/6a1fad114e3abb12620ab7f426848aad.jpg) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-next { background: url(https://static01-www.qianxin.com/qaxweb/2f67f9feb817c6da8046b121e45ed9e5.jpg) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-prev:hover, .customer .content .custom-btn .custom-button-next:hover { cursor: pointer; } .customer .content .custom-btn .swiper-pagination { position: relative; text-align: center; width: .7rem; line-height: .35rem; font-size: .16rem; font-weight: 400; color: #000; padding: 0 .1rem; } @media screen and (min-width: 769px) { .customer .content .custom-btn .custom-button-prev:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAOhJREFUWEdjZNCe/Z9hAAHjqANGQ2DYhQArCxPD7z//iM5XVM0FyUHqDOlhWgyeGdsY3n74SZQjqOYAkOVTaqwZGBgYGVJqDzIs3XqHfg5Atry05wTDlGVXibIcpIjiEKDEcoodQKnlFDmAGpaT7QBqWU6WA6hpOckOoLblJDlATYGf4cLaYAYmJkaGTfsfMoQV7SE6q+FTSFI2HNAQgPmC2o4gKQRo4QiyHAByCLVCgmwHUMsRFDmAGo6g2AGUOoIqDkB3BN3bA8i5Y8BaRDBHDGibkJyymWppgBzLSaqMyLWAkL7REAAAd1uwwUcL56gAAAAASUVORK5CYII=) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-next:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAOJJREFUWEdjZNCe/Z9hAAHjqANGQ2DIhQArCxPD7z//qJZvSMoFokIcDNtneDJMXnqFYeHG21RxBEkOiPdXY5jZYMvw799/hsymw1RxBEkOAHm5ME6Xob3QjGqOINkB1HYEWQ6gpiPIdgC1HEGRA6jhCIodQKkjqOIAShxBNQeAHLF+khuDp60sw5+//xj0A9cw3H38mWBhRTUHkFs+UMUB5FoOCh6KHUCJ5RQ7gFLLKXIANSwn2wHUspwsB1DTcpIdMODtgQFvEYGCbEDbhATLVTIUUFwQkWEnipZRBwx4CAAAZTDjwbPtWywAAAAASUVORK5CYII=) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-prev:active { -webkit-filter: brightness(.8); filter: brightness(.8); } .customer .content .custom-btn .custom-button-next:active { -webkit-filter: brightness(.8); filter: brightness(.8); } } @media screen and (max-width: 768px) { .customer { height: 7.84rem; } .customer .content .title-wrap { margin-top: 1rem; } .customer .content .title { font-size: .48rem; line-height: .63rem; } .customer .content .subtitle { display: none; } .customer .content .list { margin-top: .60rem; } .customer .content .list img { width: 1.97rem; height: .87rem; } /* 重置margin */ .customer .content .list img:nth-child(n+7) { margin-top: 0 } .customer .content .list img:not(:nth-child(6n+1)) { margin-left: 0; } .customer .content .list img:not(:nth-child(3n+1)) { margin-left: .22rem; } .customer .content .list img:nth-child(n+4) { margin-top: .23rem; } .customer .content .custom-btn .custom-button-prev, .customer .content .custom-btn .custom-button-next { width: .64rem; height: .64rem; } .customer .content .custom-btn .custom-button-prev { background: url(/static/images/product_detail/arrow-prev-m.png) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-next { background: url(/static/images/product_detail/arrow-next-m.png) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-prev:active { background: url(/static/images/product_detail/arrow-prev-m-active.png) no-repeat; background-size: contain; } .customer .content .custom-btn .custom-button-next:active { background: url(/static/images/product_detail/arrow-next-m-active.png) no-repeat; background-size: contain; } .customer .content .custom-btn .swiper-pagination { width: .7rem; font-size: .3rem; padding: 0; } }