:root { --logoColor: #e60012; } @keyframes scale { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(20); opacity: 0; } } @keyframes pathImgRight { 0% { -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes pathImgLeft { 0% { -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes pathImgDown { 0% { -webkit-clip-path: polygon(0 0%, 100% 0, 100% 0, 0 0); clip-path: polygon(0 0%, 100% 0, 100% 0, 0 0); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @font-face { font-family: "MISANS-DEMIBOLD"; src: url("../fonts/MISANS-DEMIBOLD.woff2") format("woff2"), url("../fonts/MISANS-DEMIBOLD.woff") format("woff"), url("../fonts/MISANS-DEMIBOLD.ttf") format("truetype"), url("../fonts/MISANS-DEMIBOLD.eot") format("embedded-opentype"), url("../fonts/MISANS-DEMIBOLD.svg") format("svg"); } .misans { font-family: "MISANS-DEMIBOLD"; } @font-face { font-family: "MISANS-MEDIUM"; src: url("../fonts/MISANS-MEDIUM.woff2") format("woff2"), url("../fonts/MISANS-MEDIUM.woff") format("woff"), url("../fonts/MISANS-MEDIUM.ttf") format("truetype"), url("../fonts/MISANS-MEDIUM.eot") format("embedded-opentype"), url("../fonts/MISANS-MEDIUM.svg") format("svg"); } .misans { font-family: "MISANS-MEDIUM"; } .swiper-box { position: relative; } .w1636 { width: 85%; margin: 0 auto; max-width: 1636px; } .w1320 { width: 1320px; margin: 0 auto; max-width: 90%; } .font48 { font-size: 1.2rem; line-height: 1; } .font36 { font-size: .9rem; line-height: 1; } .lh1 { line-height: 1; } .tac { text-align: center; } .fonb { font-weight: bold; } .i-tit { color: #000000; font-size: 1rem; line-height: 1.25; } .i-sub { color: #A1A1A1; font-size: 1rem; line-height: 1.25; } .side-tit { color: #808080; line-height: 1; margin-top: 3rem; } .side-sub { color: #000; font-size: 1rem; line-height: 1.25; width: 58%; margin-top: 1.25rem; } .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; } #index-container .swiper-pagination { bottom: auto; top: 50%; transform: translateY(-50%); width: max-content; left: auto; right: 1.15rem; } #index-container .swiper-pagination .swiper-pagination-bullet { width: .6rem; height: 3px; background: #fff; opacity: 1; margin: .3rem 0; border-radius: 0; display: block; } #index-container .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } #index-container .swiper-slide { width: 100%; } #index-container .swiper-slide img { width: 100%; } #index-container .swiper-slide .index-pos { position: absolute; top: 45%; left: 7.5%; transition: all .3s; } #index-container .swiper-slide .index-pos .h1 { color: #fff; opacity: 0; visibility: hidden; transform: translateY(0.5rem); } #index-container .swiper-slide .index-pos .h2 { color: #fff; line-height: 1.16; margin-top: .75rem; opacity: 0; visibility: hidden; transform: translateY(0.5rem); } #index-container .swiper-slide .index-pos.trans-top { top: 40%; } #index-container .swiper-slide.ani-slide .index-pos .h1 { opacity: 1; visibility: visible; transform: translateY(0); transition: all .4s ease-in-out; } #index-container .swiper-slide.ani-slide .index-pos .h2 { opacity: 1; visibility: visible; transform: translateY(0); transition: all .4s .2s ease-in-out; } .wel-ban { position: relative; } .wel-ban .li-box { position: absolute; bottom: 0; right: 0; z-index: 100; width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; } .wel-ban .li-box .li { display: flex; align-items: center; justify-content: space-between; width: 32.5%; min-height: 4rem; padding: .5rem; background-color: #fff; overflow: hidden; transition: all .4s; } .wel-ban .li-box .li .pic { width: 8.6rem; position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .wel-ban .li-box .li .pic img { width: 100%; } .wel-ban .li-box .li .cont { width: 100%; padding: 0 .6rem; position: relative; transition: all .4s; } .wel-ban .li-box .li .cont .tit { display: flex; align-items: center; position: relative; padding-left: 1.25rem; } .wel-ban .li-box .li .cont .tit div { width: .75rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all .4s; } .wel-ban .li-box .li .cont .tit div img { width: 100%; } .wel-ban .li-box .li .cont .tit p { color: #000000; line-height: 1; font-weight: bold; transition: all .4s; } .wel-ban .li-box .li .cont .text { color: #999999; line-height: 1.25; margin-top: .5rem; white-space: nowrap; overflow: hidden; transition: all .4s; } .wel-ban .li-box .li .cont .more { width: .9rem; height: .9rem; text-align: center; line-height: .8rem; border-radius: 50%; border: 1px solid #E6E6E6; color: var(--logoColor); position: absolute; top: 0; right: .6rem; transition: all .4s; } .wel-ban .li-box .li.show { width: 60%; background-color: rgba(230, 0, 18, 0.9); } .wel-ban .li-box .li.show .pic { position: relative; opacity: 1; visibility: visible; } .wel-ban .li-box .li.show .cont { width: calc(100% - 9.6rem); } .wel-ban .li-box .li.show .cont .tit { padding-left: 0; } .wel-ban .li-box .li.show .cont .tit div { opacity: 0; visibility: hidden; } .wel-ban .li-box .li.show .cont .tit p { color: #fff; } .wel-ban .li-box .li.show .cont .text { white-space: initial; word-break: break-all; height: 3.75em; max-height: 3.75em; color: #fff; } .wel-ban .li-box .li.show .cont .more { position: relative; right: 0; background-color: #FFAF1E; border-color: #FFAF1E; margin-top: .6rem; } .foot { background-color: var(--logoColor); } .foot .foot-top { display: flex; justify-content: center; background-image: url(../img/7.png); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 2.7rem 0 2.8rem; } .foot .foot-top .li { width: 28%; padding: 0 2rem; border-right: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .foot .foot-top .li:nth-child(2) { width: 44%; } .foot .foot-top .li:last-child { border-right: none; } .foot .foot-top .li .icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: #fff; position: relative; margin: 0 auto; transition: all .3s; } .foot .foot-top .li .icon img { max-width: 60%; max-height: 60%; object-fit: contain; } .foot .foot-top .li div { color: #666; line-height: 1.6; margin-top: .8rem; } .foot .foot-top .li:hover .icon { transform: translateY(-0.5rem); } .foot .foot-nav { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; color: #fff; } .foot .foot-nav a { color: #fff; line-height: 1; } .product { padding: 4rem 0 4.6rem; } .product .wrap .tit { color: #000000; font-weight: bold; } .product .wrap .li-box { margin-top: 2.5rem; } .product .wrap .li-box .li { display: flex; margin-bottom: 2.6rem; } .product .wrap .li-box .li:last-child { margin-bottom: 0; } .product .wrap .li-box .li .pic { width: 33.6%; position: relative; overflow: hidden; } .product .wrap .li-box .li .pic img { width: 100%; transition: all .3s; } .product .wrap .li-box .li .pic::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 65%, #e60012); opacity: 0; transition: all .3s; } .product .wrap .li-box .li .cont { width: 66.4%; padding-left: 2.4rem; padding-top: .9rem; position: relative; } .product .wrap .li-box .li .cont .h1 { color: #000000; font-weight: bold; transition: all .3s; } .product .wrap .li-box .li .cont .list-box { margin-top: 1.8rem; display: flex; flex-wrap: wrap; } .product .wrap .li-box .li .cont .list-box .list { width: 49%; height: 2rem; text-align: center; line-height: 2rem; color: #000000; background-color: #F5F5F5; margin-right: 2%; margin-bottom: .4rem; font-weight: bold; transition: all .3s; } .product .wrap .li-box .li .cont .list-box .list:nth-child(2n) { margin-right: 0; } .product .wrap .li-box .li .cont .list-box .list:hover { background-color: var(--logoColor); color: #fff; } .product .wrap .li-box .li .cont .to-list { position: absolute; bottom: 1rem; left: 2.4rem; color: var(--logoColor); font-weight: bold; line-height: 1; padding-bottom: 3px; transition: all .4s; } .product .wrap .li-box .li .cont .to-list::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to bottom, var(--logoColor) 50%, rgba(230, 0, 18, 0.5) 50%); } .product .wrap .li-box .li .cont .to-list:hover { transform: translateX(0.5rem); } .product .wrap .li-box .li:hover .pic img { transform: scale(1.1); } .product .wrap .li-box .li:hover .pic::after { opacity: 1; } .product .wrap .li-box .li:hover .cont .h1 { color: var(--logoColor); } .product-list { padding: 4rem 0 2.25rem; } .product-list .wrap .tit { color: #000000; font-weight: bold; } .product-list .wrap .sub { color: #000000; line-height: 1; width: max-content; margin: 1.1rem auto 0; padding-bottom: 2px; position: relative; } .product-list .wrap .sub span { line-height: 1; margin-right: 1.2rem; } .product-list .wrap .sub span:last-child { margin-right: 0; } .product-list .wrap .sub::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #333; } .product-list .wrap .li-box { margin-top: 2.4rem; display: flex; flex-wrap: wrap; } .product-list .wrap .li-box .li { width: 30%; margin-right: 5%; margin-bottom: 2.25rem; position: relative; overflow: hidden; } .product-list .wrap .li-box .li:nth-child(3n) { margin-right: 0; } .product-list .wrap .li-box .li img { width: 100%; transition: all .3s; } .product-list .wrap .li-box .li::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(230, 0, 18, 0.5)); opacity: 0; transition: all .3s; } .product-list .wrap .li-box .li p { position: absolute; bottom: 1.2rem; left: 0; width: 100%; padding: 0 1rem; line-height: 1; z-index: 10; color: #fff; } .product-list .wrap .li-box .li:hover img { transform: scale(1.1); } .product-list .wrap .li-box .li:hover::after { opacity: 1; } .recruit { padding: 2.95rem 0 3rem; } .recruit .wrap .tab-box { margin-bottom: 1rem; } .recruit .wrap .tab-box .li { display: flex; align-items: flex-start; margin-bottom: .9rem; } .recruit .wrap .tab-box .li:last-child { margin-bottom: 0; } .recruit .wrap .tab-box .li p { color: #333333; width: 7em; height: .9rem; line-height: .9rem; margin-right: .8rem; } .recruit .wrap .tab-box .li .option { width: calc(100% - 7em - .8rem); display: flex; align-items: flex-start; flex-wrap: wrap; } .recruit .wrap .tab-box .li .option span { width: max-content; padding: 0 .5rem; height: .9rem; line-height: .9rem; border-radius: .45rem; color: #333333; margin-right: .5rem; cursor: pointer; transition: all .3s; } .recruit .wrap .tab-box .li .option span:last-child { margin-right: 0; } .recruit .wrap .tab-box .li .option span.cur, .recruit .wrap .tab-box .li .option span:hover { background-color: var(--logoColor); color: #fff; } .recruit .wrap .li-box .li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all .3s; } .recruit .wrap .li-box .li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .recruit .wrap .li-box .li .top-bots { display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem .5rem .9rem; cursor: pointer; transition: all .3s; } .recruit .wrap .li-box .li .top-bots .lf .company { color: #000; font-size: .75rem; line-height: 1; font-weight: bold; transition: all .3s; } .recruit .wrap .li-box .li .top-bots .lf .address { margin-top: .5rem; display: flex; align-items: center; } .recruit .wrap .li-box .li .top-bots .lf .address div { width: 18px; margin-right: .3rem; } .recruit .wrap .li-box .li .top-bots .lf .address div img { width: 100%; } .recruit .wrap .li-box .li .top-bots .lf .address p { color: #666666; line-height: 1; } .recruit .wrap .li-box .li .top-bots .time { color: #666666; line-height: 1; } .recruit .wrap .li-box .li .top-bots:hover .lf .company { color: var(--logoColor); } .recruit .wrap .li-box .li .btn-bots { width: 100%; padding: 1.5rem; background-color: #F6F6F6; display: none; } .recruit .wrap .li-box .li .btn-bots .require { display: none; margin-bottom: .8rem; } .recruit .wrap .li-box .li .btn-bots .require p { display: inline-block; color: #333; line-height: 1; margin-right: .5rem; } .recruit .wrap .li-box .li .btn-bots .require p:last-child { margin-right: 0; } .recruit .wrap .li-box .li .btn-bots .list { margin-bottom: .8rem; } .recruit .wrap .li-box .li .btn-bots .list:last-child { margin-bottom: 0; } .recruit .wrap .li-box .li .btn-bots .list .h1 { color: #222222; line-height: 1; margin-bottom: .5rem; } .recruit .wrap .li-box .li .btn-bots .list .cont { color: #666666; line-height: 2; } .recruit .wrap .li-box .li .btn-bots .send { margin-top: 1.4rem; width: 5.1rem; height: 1.25rem; line-height: 1.25rem; text-align: center; background-color: var(--logoColor); color: #fff; border-radius: 5px; cursor: pointer; transition: all .3s; } .recruit .wrap .li-box .li .btn-bots .send span { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .recruit .wrap .li-box .li .btn-bots .send:hover { transform: translateY(-5px); } .recruit .wrap .li-box .li.cur { border-bottom-color: transparent; } .recruit .wrap .li-box .li.cur .top-bots { padding-top: .9rem; } .application { position: fixed; z-index: 999; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 100%; display: none; } .application .close-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .application .form-box { width: 52%; padding: 1.9rem 1.8rem 2.1rem; background-color: #fff; z-index: 5; } .application .form-box .li-box { display: flex; align-items: center; margin-bottom: .8rem; } .application .form-box .li-box .li { width: 48%; margin-right: 4%; display: flex; align-items: center; position: relative; } .application .form-box .li-box .li:last-child { margin-right: 0; } .application .form-box .li-box .li::after { content: '*'; position: absolute; right: .45rem; top: 56%; transform: translateY(-50%); color: #666666; } .application .form-box .li-box .li p { color: #000000; width: 5em; margin-right: .6rem; white-space: nowrap; font-weight: bold; } .application .form-box .li-box .li input { border: 1px solid #D4D4D4; background: none; height: .9rem; width: calc(100% - 5em - .6rem); padding: 0 .5rem; } .application .form-box .textarea { width: 100%; height: 5rem; border: 1px solid #D4D4D4; padding: .3rem .4rem; color: #999999; resize: none; } .application .form-box .upload { margin-top: .5rem; display: flex; align-items: flex-start; } .application .form-box .upload .h1 { color: #000000; line-height: 1; margin-right: .5rem; } .application .form-box .upload .files .file-select { display: flex; align-items: center; position: relative; } .application .form-box .upload .files .file-select input { position: absolute; width: 2.65rem; height: .9rem; opacity: 0; cursor: pointer; } .application .form-box .upload .files .file-select .file-clk { width: 2.65rem; height: .9rem; line-height: .9rem; text-align: center; color: #666666; border: 1px solid #D4D4D4; border-radius: 5px; margin-right: .4rem; background-color: #F7F7F7; } .application .form-box .upload .files .file-select .file-name { color: #666666; line-height: 1; } .application .form-box .upload .files .intro { color: #999999; line-height: 1; margin-top: .3rem; } .application .form-box .verify { margin-top: 1.1rem; display: flex; align-items: center; } .application .form-box .verify .code-box { display: flex; align-items: center; margin-right: 1rem; } .application .form-box .verify .code-box .code { display: flex; align-items: center; width: 7.1rem; height: 1.35rem; border: 1px solid #E2E2E2; border-radius: 5px; padding: .4rem 0; margin-right: .4rem; overflow: hidden; } .application .form-box .verify .code-box .code div { padding: 0 .45rem; width: max-content; border-right: 1px solid rgba(0, 0, 0, 0.1); } .application .form-box .verify .code-box .code div img { max-width: 100%; } .application .form-box .verify .code-box .code input { width: calc(100% - .9rem - 20px); padding: 0 .3rem; height: 100%; background: #fff; color: #999999; } .application .form-box .verify .code-box .code-img { width: max-content; } .application .form-box .verify .submit { width: 3.75rem; height: 1.25rem; border-radius: 5px; background: var(--logoColor); color: #fff; transition: all .3s; } .application .form-box .verify .submit:hover { background-color: #000; } .business .busin-top { padding: 4.2rem 0 2.75rem; position: relative; z-index: 10; } .business .busin-top .wrap { display: flex; align-items: center; justify-content: space-between; } .business .busin-top .wrap .lf { width: 60%; } .business .busin-top .wrap .tit { color: #000; font-weight: bold; } .business .busin-top .wrap .cont { color: #000000; line-height: 1.5; margin-top: 1.1rem; width: 90%; } .business .busin-top .wrap .cont span { color: #999999; } .business .busin-top .wrap .pic { width: 35%; } .business .busin-top .wrap .pic img { width: 100%; } .business .top-pic { width: 100%; } .business .top-pic img { width: 100%; } .business .top-pic p { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); } .business .top-intro { padding: 2.5rem 0 3.75rem; position: relative; background-color: #FBFBFB; overflow: hidden; } .business .top-intro .bg { position: absolute; bottom: -1.4rem; left: 7.5%; width: 26%; } .business .top-intro .bg img { width: 100%; } .business .top-intro .wrap .tit { color: #000000; line-height: 1.25; font-weight: bold; width: 80%; } .business .top-intro .wrap .cont { margin-top: 1.7rem; color: #666666; line-height: 1.8; } .business .config { padding: 2.7rem 0 2.15rem; } .business .config .cont { width: 90%; margin: 1.2rem auto 0; line-height: 1.8; } .business .cent-pic { padding: 3.75rem 0 3.9rem; text-align: center; background-color: #FBFBFB; } .business .cent-pic img { max-width: 100%; } .business .pic-cont { position: relative; } .business .pic-cont img { width: 100%; } .business .pic-cont .intro { position: absolute; left: 7.5%; top: 50%; transform: translateY(-50%); } .business .pic-cont .intro .cont { margin-top: 1.05rem; width: 41%; line-height: 1.8; } .business .map-box { padding: 3.9rem 0 3.25rem; } .business .map-box .wrap .tit { color: #000; font-weight: bold; } .business .map-box .wrap .tab-box { display: flex; align-items: center; justify-content: center; margin-top: .9rem; } .business .map-box .wrap .tab-box p { width: max-content; height: 1.5rem; line-height: 1.5rem; text-align: center; padding: 0 .7rem; color: #000; background-color: #EFEFEF; margin-right: .45rem; border-radius: 6px; cursor: pointer; transition: all .3s; } .business .map-box .wrap .tab-box p:last-child { margin-right: 0; } .business .map-box .wrap .tab-box p:hover, .business .map-box .wrap .tab-box p.cur { background-color: var(--logoColor); color: #fff; } .business .map-box .wrap .ajax-box { margin-top: 1.3rem; } .business .map-box .wrap .ajax-box .box .intro { color: #666666; line-height: 1.8; } .business .map-box .wrap .ajax-box .box .map { margin: 2rem auto 0; position: relative; width: 95%; } .business .map-box .wrap .ajax-box .box .map img { width: 100%; } .business .map-box .wrap .ajax-box .box .map .origin { position: absolute; right: 18.5%; top: 43.6%; width: .75rem; } .business .map-box .wrap .ajax-box .box .map .origin>img { position: relative; z-index: 5; } .business .map-box .wrap .ajax-box .box .map .origin .img { position: absolute; z-index: 1; } .business .map-box .wrap .ajax-box .box .map .origin .img1 { width: 24.65rem; bottom: 11%; right: 44%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img2 { width: 23.45rem; top: -171%; right: 37%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img3 { width: 18.5rem; top: -2%; right: 48%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img4 { width: 12.5rem; bottom: 6%; right: 35%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img5 { width: 12.6rem; bottom: 5%; right: 42%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img6 { width: 9.45rem; bottom: 9%; right: 35%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img7 { width: 10.25rem; top: 67%; right: 59%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img8 { width: 5.25rem; top: 36%; right: 52%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img9 { width: 4.3rem; top: 61%; right: 56%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img10 { width: 2.4rem; top: 60%; right: 51%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img11 { width: 2.25rem; top: 57%; right: 55%; animation: pathImgLeft 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img12 { width: 1.4rem; top: 69%; right: 67%; animation: pathImgDown 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img13 { width: 1.7rem; top: 70%; right: 62%; animation: pathImgDown 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img14 { width: .65rem; top: 69%; right: 61%; animation: pathImgDown 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img15 { width: .3rem; top: 36%; right: 14%; animation: pathImgDown 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img16 { width: .8rem; bottom: 24%; left: 41%; animation: pathImgRight 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .origin .img17 { width: 2.5rem; top: 66%; left: 51%; animation: pathImgDown 3s linear infinite; } .business .map-box .wrap .ajax-box .box .map .point { position: absolute; } .business .map-box .wrap .ajax-box .box .map .point p { color: #222; position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); line-height: 1; white-space: nowrap; font-size: 12px; } .business .map-box .wrap .ajax-box .box .map .point div { width: 7px; height: 7px; border-radius: 50%; background-color: var(--logoColor); } .business .map-box .wrap .ajax-box .box .map .point.btn p { top: calc(100% + 5px); left: 50%; right: auto; transform: translateX(-50%); } .business .map-box .wrap .ajax-box .box .map .point.rg p { left: calc(100% + 5px); right: auto; } .business .map-box .wrap .ajax-box .box .map .point1 { top: 39.71%; left: 16.6%; } .business .map-box .wrap .ajax-box .box .map .point2 { top: 53.56%; left: 19.76%; } .business .map-box .wrap .ajax-box .box .map .point3 { top: 71.24%; left: 32.3%; } .business .map-box .wrap .ajax-box .box .map .point4 { top: 34.83%; left: 48.07%; } .business .map-box .wrap .ajax-box .box .map .point5 { top: 37.73%; left: 47.62%; } .business .map-box .wrap .ajax-box .box .map .point6 { top: 41.29%; left: 55.86%; } .business .map-box .wrap .ajax-box .box .map .point7 { top: 84.17%; left: 53.67%; } .business .map-box .wrap .ajax-box .box .map .point8 { top: 49.74%; left: 66.54%; } .business .map-box .wrap .ajax-box .box .map .point9 { top: 53.56%; left: 68.85%; } .business .map-box .wrap .ajax-box .box .map .point10 { top: 51.85%; left: 73.94%; } .business .map-box .wrap .ajax-box .box .map .point11 { top: 55.8%; left: 74.45%; } .business .map-box .wrap .ajax-box .box .map .point12 { top: 55.94%; left: 76.45%; } .business .map-box .wrap .ajax-box .box .map .point13 { top: 62.66%; left: 75.74%; } .business .map-box .wrap .ajax-box .box .map .point14 { top: 63.46%; left: 78.51%; } .business .map-box .wrap .ajax-box .box .map .point15 { top: 68.87%; left: 80.24%; } .business .map-box .wrap .ajax-box .box .map .point16 { top: 42.48%; left: 82.5%; } .business .map-box .wrap .ajax-box .box .map .point17 { top: 77.97%; left: 86.42%; } .business .map-box .wrap .ajax-box .domestic .intro { color: #666666; line-height: 1.8; } .business .map-box .wrap .ajax-box .domestic .map { width: 56.25%; margin: .9rem auto 0; position: relative; } .business .map-box .wrap .ajax-box .domestic .map img { width: 100%; } .business .map-box .wrap .ajax-box .domestic .map .point { position: absolute; } .business .map-box .wrap .ajax-box .domestic .map .point span { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--logoColor); } .business .map-box .wrap .ajax-box .domestic .map .point p { position: absolute; color: #222222; font-size: 12px; line-height: 1; top: calc(100% + .1rem); left: 50%; transform: translateX(-50%); width: max-content; } .business .map-box .wrap .ajax-box .domestic .map .point.scale span::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--logoColor); transform-origin: center; animation: scale 5s linear infinite; } .business .map-box .wrap .ajax-box .domestic .map .point.scale span::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--logoColor); transform-origin: center; animation: scale 5s 2.5s linear infinite; } .business .map-box .wrap .ajax-box .domestic .map .point.rg p { top: 50%; left: calc(100% + .1rem); transform: translateY(-50%); } .business .map-box .wrap .ajax-box .domestic .map .point1 { top: 66.06%; left: 40.96%; } .business .map-box .wrap .ajax-box .domestic .map .point2 { top: 30.3%; left: 73.49%; } .business .map-box .wrap .ajax-box .domestic .map .point3 { top: 36.73%; left: 73.12%; } .business .map-box .wrap .ajax-box .domestic .map .point4 { top: 39.76%; left: 69.51%; } .business .map-box .wrap .ajax-box .domestic .map .point5 { top: 39.88%; left: 52.83%; } .business .map-box .wrap .ajax-box .domestic .map .point6 { top: 41.33%; left: 63.02%; } .business .map-box .wrap .ajax-box .domestic .map .point7 { top: 42.91%; left: 66.27%; } .business .map-box .wrap .ajax-box .domestic .map .point8 { top: 43.88%; left: 64.6%; } .business .map-box .wrap .ajax-box .domestic .map .point9 { top: 50.3%; left: 65.15%; } .business .map-box .wrap .ajax-box .domestic .map .point10 { top: 50.3%; left: 69.69%; } .business .map-box .wrap .ajax-box .domestic .map .point11 { top: 52.97%; left: 60.52%; } .business .map-box .wrap .ajax-box .domestic .map .point12 { top: 57.45%; left: 52.09%; } .business .map-box .wrap .ajax-box .domestic .map .point13 { top: 58.67%; left: 59.59%; } .business .map-box .wrap .ajax-box .domestic .map .point14 { top: 59.03%; left: 67.75%; } .business .map-box .wrap .ajax-box .domestic .map .point15 { top: 60.73%; left: 69.23%; } .business .map-box .wrap .ajax-box .domestic .map .point16 { top: 61.7%; left: 65.99%; } .business .map-box .wrap .ajax-box .domestic .map .point17 { top: 63.03%; left: 68.58%; } .business .map-box .wrap .ajax-box .domestic .map .point18 { top: 64.12%; left: 66.36%; } .business .map-box .wrap .ajax-box .domestic .map .point19 { top: 63.76%; left: 72.38%; } .business .map-box .wrap .ajax-box .domestic .map .point20 { top: 64.48%; left: 70.62%; } .business .map-box .wrap .ajax-box .domestic .map .point21 { top: 66.67%; left: 72.47%; } .business .map-box .wrap .ajax-box .domestic .map .point22 { top: 67.52%; left: 70.9%; } .business .map-box .wrap .ajax-box .domestic .map .point23 { top: 69.33%; left: 68.4%; } .business .map-box .wrap .ajax-box .domestic .map .point24 { top: 72.61%; left: 71.27%; } .business .map-box .wrap .ajax-box .domestic .map .point25 { top: 66.42%; left: 60.61%; } .business .map-box .wrap .ajax-box .domestic .map .point26 { top: 71.27%; left: 63.48%; } .business .map-box .wrap .ajax-box .domestic .map .point27 { top: 73.45%; left: 58.29%; } .business .map-box .wrap .ajax-box .domestic .map .point28 { top: 83.88%; left: 59.41%; } .business .map-box .wrap .ajax-box .domestic .map .point29 { top: 85.7%; left: 59.59%; } .business .map-box .wrap .ajax-box .domestic .map .point30 { top: 88.12%; left: 60.8%; } .business .map-box .wrap .ajax-box .domestic .map .point31 { top: 92.85%; left: 54.4%; } .news { padding: 4.3rem 0 2.45rem; } .news .wrap .tab-swiper { margin-top: 1.6rem; } .news .wrap .tab-swiper .swiper-wrapper { justify-content: center; } .news .wrap .tab-swiper .swiper-slide { width: max-content; min-width: 5.35rem; height: 1.5rem; line-height: 1.5rem; text-align: center; padding: 0 .4rem; background-color: #EFEFEF; margin-right: .45rem; border-radius: 6px; color: #000; cursor: pointer; transition: all .3s; } .news .wrap .tab-swiper .swiper-slide:last-child { margin-right: 0; } .news .wrap .tab-swiper .swiper-slide:hover, .news .wrap .tab-swiper .swiper-slide.cur { color: #fff; background-color: var(--logoColor); } .news .wrap .hot-swiper { margin-top: 1.8rem; } .news .wrap .hot-swiper .swiper-pagination { bottom: .9rem; width: 49%; line-height: 1; } .news .wrap .hot-swiper .swiper-pagination .swiper-pagination-bullet { background: #fff; opacity: 1; width: .25rem; height: .25rem; } .news .wrap .hot-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .news .wrap .hot-swiper .swiper-slide { display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); margin-right: .5rem; } .news .wrap .hot-swiper .swiper-slide:last-child { margin-right: 0; } .news .wrap .hot-swiper .swiper-slide .pic { width: 49%; overflow: hidden; } .news .wrap .hot-swiper .swiper-slide .pic img { width: 100%; transition: all .3s; } .news .wrap .hot-swiper .swiper-slide .intro { width: 51%; padding: 0 1.2rem 0 2.15rem; } .news .wrap .hot-swiper .swiper-slide .intro .time { color: #666666; } .news .wrap .hot-swiper .swiper-slide .intro .h1 { color: #000000; font-size: .75rem; line-height: 1.5; max-height: 4.5em; overflow: hidden; font-weight: bold; margin-top: .8rem; transition: all .3s; } .news .wrap .hot-swiper .swiper-slide .intro .cont { color: #666666; line-height: 1.5; max-height: 3em; overflow: hidden; margin-top: .5rem; } .news .wrap .hot-swiper .swiper-slide .intro .more { margin-top: .9rem; width: 1.1rem; height: 1.1rem; line-height: 1rem; text-align: center; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); font-weight: bold; color: var(--logoColor); } .news .wrap .hot-swiper .swiper-slide:hover .pic img { transform: scale(1.1); } .news .wrap .hot-swiper .swiper-slide:hover .intro .h1 { color: var(--logoColor); } .news .wrap .li-box { margin-top: 1.75rem; display: flex; flex-wrap: wrap; } .news .wrap .li-box .li { width: 49%; height: 7.5rem; padding: 1rem 1.2rem; border: 1px solid rgba(0, 0, 0, 0.1); margin-right: 2%; margin-bottom: 1rem; } .news .wrap .li-box .li:nth-child(2n) { margin-right: 0; } .news .wrap .li-box .li .time { color: #666666; } .news .wrap .li-box .li .h1 { margin-top: .7rem; color: #000000; line-height: 1.25; max-height: 2.5em; overflow: hidden; transition: all .3s; } .news .wrap .li-box .li .line { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); margin-top: .65rem; } .news .wrap .li-box .li .cont { margin-top: .4rem; color: #666666; line-height: 1.5; max-height: 3em; overflow: hidden; } .news .wrap .li-box .li:hover .h1 { color: var(--logoColor); } .news .wrap .page-box { margin-top: .6rem; } .page-box { display: flex; align-items: center; justify-content: center; } .page-box div { display: flex; align-items: center; justify-content: center; } .page-box a { width: 1.1rem; height: 1.1rem; line-height: 1.1rem; text-align: center; border-radius: 50%; color: #666666; margin-right: 1rem; transition: all .3s; } .page-box a:last-child { margin-right: 0; } .page-box a[rel=prev], .page-box a[rel=next] { background-color: #F6F6F6; } .page-box a:hover, .page-box a.active { background-color: var(--logoColor); color: #fff; } .news-info { padding: 1.25rem 7.3% 4.2rem; } .news-info .crumbs { display: flex; align-items: center; } .news-info .crumbs a { color: #666666; position: relative; padding-right: .75rem; margin-right: .6rem; line-height: 1; } .news-info .crumbs a:last-child { margin-right: 0; padding-right: 0; } .news-info .crumbs a:last-child::after { display: none; } .news-info .crumbs a::after { content: '>'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 16px; color: #666666; } .news-info .box { width: 78%; margin: 3.2rem auto 0; } .news-info .box .tit { color: #000000; font-size: .75rem; line-height: 1.3; } .news-info .box .time { margin-top: .6rem; color: #666666; display: flex; align-items: center; justify-content: center; } .news-info .box .time img { width: 18px; margin-right: .25rem; } .news-info .box .cont { border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-top: 1rem; padding: 1.9rem 0 2rem; color: #666666; } .news-info .box .info-page { margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; } .news-info .box .info-page .back { width: .75rem; } .news-info .box .info-page .back img { width: 100%; } .news-info .box .info-page .prev span { margin-right: .4rem; } .news-info .box .info-page .next { justify-content: flex-end; } .news-info .box .info-page .next span { margin-left: .4rem; } .news-info .box .info-page .prev, .news-info .box .info-page .next { display: flex; align-items: center; width: calc((100% - 2rem) / 2); } .news-info .box .info-page .prev span, .news-info .box .info-page .next span { color: var(--logoColor); } .news-info .box .info-page .prev p, .news-info .box .info-page .next p { color: #000000; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about .top-bar { padding: 3.3rem 0 3.5rem; } .about .top-bar .wrap .tit { color: #000000; } .about .top-bar .wrap .cont { margin-top: 1.4rem; color: #666666; line-height: 1.5; padding: 0 .8rem; } .about .top-bar .wrap .num-box { margin-top: 2.4rem; display: flex; align-items: flex-start; justify-content: center; } .about .top-bar .wrap .num-box .li { margin-right: 2.7rem; } .about .top-bar .wrap .num-box .li:last-child { margin-right: 0; } .about .top-bar .wrap .num-box .li .num { margin-bottom: .25rem; display: flex; align-items: flex-end; color: var(--logoColor); } .about .top-bar .wrap .num-box .li .num p { font-size: 1.4rem; line-height: 1; font-weight: bold; margin-right: 5px; } .about .top-bar .wrap .num-box .li .num span { line-height: 1; } .about .top-bar .wrap .num-box .li .text { line-height: 1; color: #666666; } .about .culture { padding: 3rem 0; } .about .culture .culture-swiper { margin-top: 1.4rem; } .about .culture .culture-swiper .swiper-pagination { position: relative; margin-top: 1rem; line-height: 1; bottom: 0; } .about .culture .culture-swiper .swiper-pagination .swiper-pagination-bullet { background: #fff; width: .6rem; height: 3px; border-radius: 0; } .about .culture .culture-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .about .culture .culture-swiper .swiper-slide { width: 24%; margin-right: 1.33%; transition: all .3s; } .about .culture .culture-swiper .swiper-slide:last-child { margin-right: 0; } .about .culture .culture-swiper .swiper-slide .pic { width: 100%; position: relative; overflow: hidden; } /* .about .culture .culture-swiper .swiper-slide .pic::after { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); } */ .about .culture .culture-swiper .swiper-slide .pic>img { width: 100%; transition: all .3s; } .about .culture .culture-swiper .swiper-slide .pic .icon { z-index: 5; } .about .culture .culture-swiper .swiper-slide .pic .icon div { height: 1.8rem; margin: 0 auto; text-align: center; } .about .culture .culture-swiper .swiper-slide .pic .icon div img { max-height: 100%; } .about .culture .culture-swiper .swiper-slide .pic .icon p { color: #fff; margin-top: .5rem; text-align: center; } .about .culture .culture-swiper .swiper-slide .cont { height: 3.9rem; background-color: #fff; padding: .8rem 1rem; color: #222222; line-height: 1.3; transition: all .3s; } .about .culture .culture-swiper .swiper-slide:hover { box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1); } .about .culture .culture-swiper .swiper-slide:hover .pic>img { transform: scale(1.1); } .about .culture .culture-swiper .swiper-slide:hover .cont { color: var(--logoColor); } .about .partner { padding: 3.25rem 0 3.1rem; } .about .partner .wrap { position: relative; } .about .partner .wrap .bg { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; } .about .partner .wrap .bg img { width: 100%; } .about .partner .wrap .swiper-box .swiper-pagination { position: relative; margin-top: 1.4rem; line-height: 1; bottom: 0; } .about .partner .wrap .swiper-box .swiper-pagination .swiper-pagination-bullet { width: .6rem; height: 3px; margin: 0 5px; border-radius: 0; } .about .partner .wrap .swiper-box .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .about .partner .wrap .partner-swiper { margin-top: 1.4rem; height: 12rem; border: 1px solid rgba(0, 0, 0, 0.1); } .about .partner .wrap .partner-swiper .swiper-slide { width: 16.66%; background-color: #fff; height: 4rem; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .about .partner .wrap .partner-swiper .swiper-slide img { max-width: 70%; max-height: 70%; object-fit: contain; } .about .dev { padding: 3.1rem 0 3.75rem; } .about .dev .wrap { width: 1314px; max-width: 90%; margin: 0 auto; } .about .dev .wrap .box { margin-top: 2.9rem; display: flex; align-items: stretch; justify-content: space-between; } .about .dev .wrap .box .point-box { width: 49%; } .about .dev .wrap .box .point-box .point { width: 13.1rem; height: 13.1rem; margin: 0 auto; position: relative; border-radius: 50%; } .about .dev .wrap .box .point-box .point .pic { width: 87%; height: 87%; border-radius: 50%; overflow: hidden; } .about .dev .wrap .box .point-box .point .pic img { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: all .5s; } .about .dev .wrap .box .point-box .point .pic img.show { opacity: 1; } .about .dev .wrap .box .point-box .point .svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about .dev .wrap .box .point-box .point .svg svg { width: 100%; height: 100%; fill: #fff; } .about .dev .wrap .box .point-box .point .svg svg .cls-1 { fill: none; stroke: #fff; stroke-width: 3px; fill-rule: evenodd; } .about .dev .wrap .box .point-box .point .svg1 { transform: rotate(36deg); } .about .dev .wrap .box .point-box .point .svg1 path { stroke-dasharray: 1645; stroke-dashoffset: 1645; transition: all .5s; } .about .dev .wrap .box .point-box .point .svg2 { left: 4.5%; opacity: .25; } .about .dev .wrap .box .point-box .point .time { position: absolute; transform-origin: .15rem 6.7rem; left: 50%; margin-left: -.15rem; margin-top: -.15rem; cursor: pointer; } .about .dev .wrap .box .point-box .point .time div { width: .3rem; height: .3rem; border-radius: 50%; background-color: #fff; } .about .dev .wrap .box .point-box .point .time p { position: absolute; color: #fff; font-size: .45rem; line-height: 1; transition: all .3s; } .about .dev .wrap .box .point-box .point .time:hover p, .about .dev .wrap .box .point-box .point .time.cur p { color: var(--logoColor); } .about .dev .wrap .box .point-box .point .time.cur p { font-size: .7rem; } .about .dev .wrap .box .point-box .point .time1 { transform: rotate(-54deg); } .about .dev .wrap .box .point-box .point .time1 p { right: 0; top: -1rem; transform: rotate(54deg); } .about .dev .wrap .box .point-box .point .time2 { transform: rotate(-36deg); } .about .dev .wrap .box .point-box .point .time2 p { right: 0; top: -1rem; transform: rotate(36deg); } .about .dev .wrap .box .point-box .point .time3 { transform: rotate(-18deg); } .about .dev .wrap .box .point-box .point .time3 p { right: 0; top: -1rem; transform: rotate(18deg); } .about .dev .wrap .box .point-box .point .time4 { transform: rotate(0deg); } .about .dev .wrap .box .point-box .point .time4 p { bottom: calc(100% + 0.3rem); left: 50%; margin-left: -0.5rem; } .about .dev .wrap .box .point-box .point .time5 { transform: rotate(18deg); } .about .dev .wrap .box .point-box .point .time5 p { left: 0; top: -1rem; transform: rotate(-18deg); } .about .dev .wrap .box .point-box .point .time6 { transform: rotate(36deg); } .about .dev .wrap .box .point-box .point .time6 p { left: 0; top: -1rem; transform: rotate(-36deg); } .about .dev .wrap .box .point-box .point .time6.cur p { left: .2rem; } .about .dev .wrap .box .point-box .point .time7 { transform: rotate(54deg); } .about .dev .wrap .box .point-box .point .time7 p { left: 0; top: -1rem; transform: rotate(-54deg); } .about .dev .wrap .box .point-box .point .time7.cur p { top: -1.5rem; } .about .dev .wrap .box .point-box .point .time8 { transform: rotate(72deg); } .about .dev .wrap .box .point-box .point .time8 p { left: -100%; top: -1rem; transform: rotate(-72deg); } .about .dev .wrap .box .point-box .point .time8.cur p { top: -1.5rem; } .about .dev .wrap .box .point-box .point .time9 { transform: rotate(90deg); } .about .dev .wrap .box .point-box .point .time9 p { left: -100%; top: -1rem; transform: rotate(-90deg); } .about .dev .wrap .box .point-box .point .time9.cur p { top: -1.5rem; } .about .dev .wrap .box .point-box .point .time10 { transform: rotate(108deg); } .about .dev .wrap .box .point-box .point .time10 p { left: -100%; top: -1rem; transform: rotate(-108deg); } .about .dev .wrap .box .point-box .point .time10.cur p { top: -1.5rem; } .about .dev .wrap .box .point-box .point .time11 { transform: rotate(126deg); } .about .dev .wrap .box .point-box .point .time11 p { left: -100%; top: -1rem; transform: rotate(-126deg); } .about .dev .wrap .box .point-box .point .time12 { transform: rotate(144deg); } .about .dev .wrap .box .point-box .point .time12 p { left: -100%; top: -0.7rem; transform: rotate(-144deg); } .about .dev .wrap .box .point-box .point .time12.cur p { top: -1rem; } .about .dev .wrap .box .point-box .point .time13 { transform: rotate(162deg); } .about .dev .wrap .box .point-box .point .time13 p { left: -100%; top: -0.7rem; transform: rotate(-162deg); } .about .dev .wrap .box .point-box .point .time14 { transform: rotate(180deg); } .about .dev .wrap .box .point-box .point .time14 p { bottom: 0.5rem; left: 50%; margin-left: -0.5rem; transform: rotate(-180deg); } .about .dev .wrap .box .point-box .point .time15 { transform: rotate(198deg); } .about .dev .wrap .box .point-box .point .time15 p { right: -100%; top: -0.7rem; transform: rotate(-198deg); } .about .dev .wrap .box .point-box .point .time15.cur p { top: -1rem; } .about .dev .wrap .box .point-box .point .time16 { transform: rotate(216deg); } .about .dev .wrap .box .point-box .point .time16 p { right: -100%; top: -0.7rem; transform: rotate(-216deg); } .about .dev .wrap .box .point-box .point .time16.cur p { top: -1rem; } .about .dev .wrap .box .point-box .point .time17 { transform: rotate(234deg); } .about .dev .wrap .box .point-box .point .time17 p { right: -100%; top: -1rem; transform: rotate(-234deg); } .about .dev .wrap .box .point-box .point .time17.cur p { top: -1.25rem; } .about .dev .wrap .box .point-box .point-swiper { width: 100%; } .about .dev .wrap .box .point-box .point-swiper .swiper-slide { color: #fff; font-size: 18px; line-height: 1; width: max-content; margin-right: .5rem; transition: all .3s; } .about .dev .wrap .box .point-box .point-swiper .swiper-slide:last-child { margin-right: 0; } .about .dev .wrap .box .point-box .point-swiper .swiper-slide.cur { color: var(--logoColor); } .about .dev .wrap .box .change-box { width: 38.5%; padding-top: 2.2rem; } .about .dev .wrap .box .change-box .intro-box .cont p { color: #fff; } .about .dev .wrap .box .change-box .intro-box .cont .h1 { line-height: 1.2; margin-top: .7rem; } .about .dev .wrap .box .change-box .intro-box .cont .intro { line-height: 1.75; margin-top: .4rem; color: #fff; } .about .dev .wrap .box .change-box .clk-btn { margin-top: 1.85rem; display: flex; align-items: center; } .about .dev .wrap .box .change-box .clk-btn div { width: 1.1rem; height: 1.1rem; line-height: 1.1rem; text-align: center; border-radius: 50%; background-color: #fff; color: #000; font-size: .5rem; cursor: pointer; margin-right: .35rem; transition: all .3s; } .about .dev .wrap .box .change-box .clk-btn div:last-child { margin-right: 0; } .about .dev .wrap .box .change-box .clk-btn div:hover { background-color: var(--logoColor); color: #fff; } .about .office { padding: 3.3rem 0 3.5rem; background-color: #FAFAFA; } .about .office .wrap .map-box { margin-top: 2.75rem; display: flex; align-items: center; justify-content: space-between; } .about .office .wrap .map-box .map { position: relative; width: 76%; } .about .office .wrap .map-box .map img { width: 100%; } .about .office .wrap .map-box .map .point { position: absolute; cursor: pointer; } .about .office .wrap .map-box .map .point .icon { width: .6rem; filter: grayscale(100%); opacity: .8; transition: all .3s; } .about .office .wrap .map-box .map .point .cont { position: absolute; left: calc(100% + .25rem); top: .25rem; width: max-content; } .about .office .wrap .map-box .map .point .cont .name { color: #666666; font-weight: bold; transition: all .3s; } .about .office .wrap .map-box .map .point .cont .intro { margin-top: .15rem; color: #606060; } .about .office .wrap .map-box .map .point:hover .icon, .about .office .wrap .map-box .map .point.cur .icon { filter: initial; opacity: 1; } .about .office .wrap .map-box .map .point:hover .cont .name, .about .office .wrap .map-box .map .point.cur .cont .name { color: var(--logoColor); } .about .office .wrap .map-box .map .point1 { top: 32.28%; left: 10.59%; } .about .office .wrap .map-box .map .point2 { top: 74.33%; left: 24.39%; } .about .office .wrap .map-box .map .point3 { top: 29.92%; left: 51.36%; } .about .office .wrap .map-box .map .point4 { top: 60.62%; left: 50%; } .about .office .wrap .map-box .map .point5 { top: 40.62%; left: 75.12%; } .about .office .wrap .map-box .ajax-box { width: 23%; padding: .75rem 0; background-color: #fff; box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); } .about .office .wrap .map-box .ajax-box .h1 { color: var(--logoColor); font-size: .75rem; padding: 0 .5rem; } .about .office .wrap .map-box .ajax-box .li-box { margin-top: .75rem; max-height: 10.95rem; overflow-y: auto; overflow-x: hidden; padding: 0 .5rem; } .about .office .wrap .map-box .ajax-box .li-box::-webkit-scrollbar-thumb { background: var(--logoColor); } .about .office .wrap .map-box .ajax-box .li-box::-webkit-scrollbar { width: 3px; } .about .office .wrap .map-box .ajax-box .li-box .li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: .4rem .25rem; } .about .office .wrap .map-box .ajax-box .li-box .li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .about .office .wrap .map-box .ajax-box .li-box .li .h2 { color: #000000; font-weight: bold; } .about .office .wrap .map-box .ajax-box .li-box .li .h3 { margin-top: 3px; color: #000000; opacity: .6; line-height: 1.5; } .about .honor { padding: 3.25rem 0 2rem; } .about .honor .wrap .li-box { margin-top: 2.4rem; } .about .honor .wrap .top-li { margin-bottom: 1.3rem; } .about .honor .wrap .top-li:last-child { margin-bottom: 0; } .about .honor .wrap .top-li .h1 { color: #fff; } .about .honor .wrap .top-li .intro { color: #fff; line-height: 1.6; margin-top: .6rem; } .about .honor .wrap .swiper-pagination { margin-top: 2.5rem; position: relative; line-height: 1; bottom: 0; } .about .honor .wrap .swiper-pagination .swiper-pagination-bullet { width: .6rem; height: 3px; background: #fff; border-radius: 0; margin: 0 5px; } .about .honor .wrap .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .about .honor .wrap .swiper-box { margin-top: 1.9rem; /* margin-top: 2.2rem; */ } .about .honor .wrap .swiper-box .swiper-button-prev { left: -2.5rem; } .about .honor .wrap .swiper-box .swiper-button-next { right: -2.5rem; } .about .honor .wrap .swiper-box .swiper-button-prev, .about .honor .wrap .swiper-box .swiper-button-next { width: 1.1rem; height: 1.1rem; border-radius: 50%; background-color: #fff; color: #000; transition: all .3s; } .about .honor .wrap .swiper-box .swiper-button-prev::after, .about .honor .wrap .swiper-box .swiper-button-next::after { font-size: .5rem; } .about .honor .wrap .swiper-box .swiper-button-prev:hover, .about .honor .wrap .swiper-box .swiper-button-next:hover { background-color: var(--logoColor); color: #fff; } .about .honor .wrap .swiper-box .swiper-slide { width: 19%; margin-right: 1.25%; background-color: #fff; } .about .honor .wrap .swiper-box .swiper-slide:last-child { margin-right: 0; } .about .honor .wrap .swiper-box .swiper-slide div { height: 7.7rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .about .honor .wrap .swiper-box .swiper-slide div img { max-width: 80%; max-height: 80%; object-fit: contain; transition: all .3s; } .about .honor .wrap .swiper-box .swiper-slide p { border-top: 1px solid rgba(0, 0, 0, 0.1); height: 2.5rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .5rem; color: #000000; /* font-weight: bold; */ transition: all .3s; } .about .honor .wrap .swiper-box .swiper-slide:hover div img { transform: scale(1.1); } .about .honor .wrap .swiper-box .swiper-slide:hover p { color: var(--logoColor); } .product-info .top { display: flex; align-items: center; } .product-info .top .pic { width: 50%; } .product-info .top .pic img { width: 100%; } .product-info .top .cont { width: 50%; padding: 0 3.8rem; } .product-info .top .cont .intro { margin-top: 1rem; color: #000000; line-height: 1.8; } .product-info .btm { padding: 2.5rem 0 1.75rem; } .product-info .btm .wrap .info-swiper { margin-top: 2.25rem; } .product-info .btm .wrap .info-swiper .swiper-pagination { position: relative; margin-top: 1.9rem; line-height: 1; bottom: 0; } .product-info .btm .wrap .info-swiper .swiper-pagination .swiper-pagination-bullet { width: .3rem; height: .3rem; } .product-info .btm .wrap .info-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .product-info .btm .wrap .info-swiper .swiper-slide { width: 30%; margin-right: 5%; overflow: hidden; } .product-info .btm .wrap .info-swiper .swiper-slide:last-child { margin-right: 0; } .product-info .btm .wrap .info-swiper .swiper-slide img { width: 100%; transition: all .3s; } .product-info .btm .wrap .info-swiper .swiper-slide p { position: absolute; bottom: 1.2rem; left: 0; width: 100%; line-height: 1; padding: 0 1rem; color: #fff; } .product-info .btm .wrap .info-swiper .swiper-slide:hover img { transform: scale(1.1); } .supply .top-anchor { padding: 3.5rem 0 1rem; } .supply .top-anchor .top-swiper .swiper-pagination { position: relative; bottom: 0; line-height: 1; margin-top: 1rem; } .supply .top-anchor .top-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .supply .top-anchor .top-swiper .swiper-slide { width: 24.5%; margin-right: 0.66%; } .supply .top-anchor .top-swiper .swiper-slide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5)); z-index: 1; } .supply .top-anchor .top-swiper .swiper-slide:last-child { margin-right: 0; } .supply .top-anchor .top-swiper .swiper-slide img { width: 100%; } .supply .top-anchor .top-swiper .swiper-slide p { position: absolute; z-index: 5; bottom: .55rem; width: 100%; height: 3.6em; color: #fff; padding: 0 .5rem; line-height: 1.2; } .supply .top-anchor .top-swiper .swiper-slide:hover::after { background: linear-gradient(to bottom, transparent, var(--logoColor)); } .supply .price { padding: 1.5rem 0 2.9rem; } /* .supply .price .wrap .tit { display: flex; align-items: flex-start; justify-content: space-between; } */ .supply .price .wrap .tit .h1 { /* width: 31%; */ line-height: 1.2; } .supply .price .wrap .tit .cont { /* width: 60%; */ color: #666666; margin-top: .8rem; } .supply .price .wrap .h2 { color: #000; font-size: .9rem; margin-top: 2.6rem; } .supply .price .wrap .li-box { margin-top: 1.35rem; } .supply .price .wrap .li-box .li { margin-bottom: .5rem; display: flex; align-items: center; padding: 1.5rem 2.1rem 1.75rem; background-color: #F5F5F5; } .supply .price .wrap .li-box .li:last-child { margin-bottom: 0; } .supply .price .wrap .li-box .li .icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(230, 0, 18, 0.1); } .supply .price .wrap .li-box .li .icon img { max-width: 60%; max-height: 60%; object-fit: contain; } .supply .price .wrap .li-box .li .intro { width: calc(100% - 3.5rem); padding-left: 1.9rem; } .supply .price .wrap .li-box .li .intro .title { color: #000; font-size: .9rem; line-height: 1; } .supply .price .wrap .li-box .li .intro .cont { color: #666666; line-height: 1.8; height: 9em; overflow-y: auto; padding-right: 5px; margin-top: .7rem; } .supply .price .wrap .li-box .li .intro .cont::-webkit-scrollbar { width: 3px; } .supply .price .wrap .li-box .li .intro .cont::-webkit-scrollbar-thumb { background: var(--logoColor); } .supply .city { padding: 2.8rem 0 0; background-color: #F5F5F5; } .supply .city .wrap .cont { color: #666; line-height: 1.8; margin-top: .8rem; } .supply .city .wrap .city-swiper { margin-top: 1.6rem; height: 17.5rem; } .supply .city .wrap .city-swiper .swiper-pagination { bottom: .7rem; line-height: 1; } .supply .city .wrap .city-swiper .swiper-pagination .swiper-pagination-bullet { background: #fff; opacity: 1; } .supply .city .wrap .city-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .supply .city .wrap .city-swiper .pic-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .supply .city .wrap .city-swiper .pic-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: all .3s; } .supply .city .wrap .city-swiper .pic-box img.show { opacity: 1; } .supply .city .wrap .city-swiper .swiper-slide { width: 33.33%; } .supply .city .wrap .city-swiper .swiper-slide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; z-index: 1; } .supply .city .wrap .city-swiper .swiper-slide img { width: 100%; } .supply .city .wrap .city-swiper .swiper-slide p { position: absolute; font-size: .75rem; z-index: 5; bottom: .55rem; width: 100%; height: 3.6em; color: #fff; padding: 0 .9rem; line-height: 1.2; } .supply .city .wrap .city-swiper .swiper-slide:hover::after { background: linear-gradient(to bottom, transparent, var(--logoColor)); } .supply .city .wrap .partner { padding: 1.65rem 0 3.4rem; position: relative; overflow: hidden; } .supply .city .wrap .partner .h1 { color: #000; line-height: 1; font-size: .9rem; font-weight: bold; } .supply .city .wrap .partner .bg { position: absolute; top: 0; left: 0; width: 100%; } .supply .city .wrap .partner .bg img { width: 100%; } .supply .city .wrap .partner .li-box { display: flex; flex-wrap: wrap; margin-top: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; position: relative; z-index: 5; } .supply .city .wrap .partner .li-box .li { width: 20%; height: 4rem; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative; } .supply .city .wrap .partner .li-box .li:nth-child(5n) { border-right: none; } .supply .city .wrap .partner .li-box .li:nth-child(5n)::after { display: none; } .supply .city .wrap .partner .li-box .li:nth-child(-n + 5)::after { display: none; } .supply .city .wrap .partner .li-box .li:nth-last-child(-n + 5) { border-bottom: none; } .supply .city .wrap .partner .li-box .li::after { content: ''; position: absolute; right: -.25rem; top: -.25rem; width: .25rem; height: .25rem; background-color: #E8E8E8; border: .125rem solid #fff; border-radius: 50%; } .supply .city .wrap .partner .li-box .li img { max-width: 60%; max-height: 60%; object-fit: contain; transition: all .3s; } .supply .city .wrap .partner .li-box .li:hover img { transform: scale(1.1); } .supply .city .wrap .partner .swiper-box { margin-top: .8rem; display: none; } .supply .city .wrap .partner .swiper-box .swiper-pagination { position: relative; margin-top: 1.4rem; line-height: 1; bottom: 0; } .supply .city .wrap .partner .swiper-box .swiper-pagination .swiper-pagination-bullet { width: 0.6rem; height: 3px; margin: 0 5px; border-radius: 0; } .supply .city .wrap .partner .swiper-box .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .supply .city .wrap .partner .partner-swiper { height: 12rem; border: 1px solid rgba(0, 0, 0, 0.1); } .supply .city .wrap .partner .partner-swiper .swiper-slide { width: 16.66%; background-color: #fff; height: 4rem; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .supply .engin { padding: 2.95rem 0 2.8rem; display: flex; align-items: flex-start; } .supply .engin .intro { width: 49.5%; margin-right: 1%; padding-left: 7.5%; padding-top: .5rem; padding-right: 1.6rem; } .supply .engin .intro .tit { line-height: 1.2; } .supply .engin .intro .li-box { margin-top: 2.25rem; } .supply .engin .intro .li-box .li { position: relative; padding-left: 1.4rem; color: #808080; line-height: 1.5; /* font-weight: bold; */ margin-bottom: .8rem; transition: all .3s; } .supply .engin .intro .li-box .li:last-child { margin-bottom: 0; } .supply .engin .intro .li-box .li::after { content: ''; position: absolute; top: .4rem; left: 0; width: .6rem; height: .125rem; background-color: #808080; transition: all .3s; } .supply .engin .intro .li-box .li:hover { color: var(--logoColor); } .supply .engin .intro .li-box .li:hover::after { background-color: var(--logoColor); } .supply .engin .pic { width: 49.5%; } .supply .coop { padding: 2.8rem 0 3.1rem; background-color: #f5f5f5; } .supply .coop .coop-swiper { margin-top: 1.3rem; } .supply .coop .coop-swiper .swiper-pagination { position: relative; margin-top: 1rem; line-height: 1; bottom: 0; } .supply .coop .coop-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .supply .coop .coop-swiper .swiper-slide { width: 32%; height: 8rem; margin-right: 2%; background-color: #fff; padding: 1.1rem 1.2rem; } .supply .coop .coop-swiper .swiper-slide:last-child { margin-right: 0; } .supply .coop .coop-swiper .swiper-slide .icon { width: 1.8rem; } .supply .coop .coop-swiper .swiper-slide .icon img { width: 100%; } .supply .coop .coop-swiper .swiper-slide .cont { margin-top: 1rem; color: #666666; line-height: 1.8; padding-right: 5px; max-height: 7.2em; overflow-y: auto; } .supply .coop .coop-swiper .swiper-slide .cont::-webkit-scrollbar { width: 3px; } .supply .coop .coop-swiper .swiper-slide .cont::-webkit-scrollbar-thumb { background: var(--logoColor); } .chain { padding: 4.25rem 0 5.6rem; } .chain .wrap .li { margin-bottom: 5.4rem; } .chain .wrap .li:last-child { margin-bottom: 0; } .chain .wrap .li .tit { padding-bottom: .75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .chain .wrap .li .cont { line-height: 1.6; margin-top: .65rem; color: #666666; } .chain .wrap .li .tab-swiper { margin-top: 2.5rem; } .chain .wrap .li .tab-swiper .swiper-slide { color: #666666; font-size: .75rem; line-height: 1.3; width: max-content; margin-right: 1.3rem; cursor: pointer; transition: all .3s; } .chain .wrap .li .tab-swiper .swiper-slide:last-child { margin-right: 0; } .chain .wrap .li .tab-swiper .swiper-slide:hover, .chain .wrap .li .tab-swiper .swiper-slide.cur { color: #000; } .chain .wrap .li .swiper-box { margin-top: 1.6rem; } .chain .wrap .li .swiper-box .swiper-button-prev, .chain .wrap .li .swiper-box .swiper-button-next { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); color: #000; top: -2.4rem; margin: auto; left: auto; right: auto; bottom: auto; font-weight: bold; transition: all .3s; } .chain .wrap .li .swiper-box .swiper-button-prev::after, .chain .wrap .li .swiper-box .swiper-button-next::after { font-size: .2rem; } .chain .wrap .li .swiper-box .swiper-button-prev:hover, .chain .wrap .li .swiper-box .swiper-button-next:hover { background-color: var(--logoColor); border-color: var(--logoColor); color: #fff; } .chain .wrap .li .swiper-box .swiper-button-prev { right: 1.4rem; } .chain .wrap .li .swiper-box .swiper-button-next { right: 0; } .chain .wrap .li .swiper-box .chain-swiper { animation: fadeInUp 1s ease-in-out forwards; overflow: initial; } .chain .wrap .li .swiper-box .chain-swiper .swiper-pagination { position: relative; margin-top: 1rem; bottom: 0; line-height: 1; } .chain .wrap .li .swiper-box .chain-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--logoColor); } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide { width: 36.6%; margin-right: 2.6%; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide:last-child { margin-right: 0; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .pic { position: relative; width: 100%; overflow: hidden; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .pic img { width: 100%; transition: all .3s; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .pic::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, rgba(230, 0, 18, 0.8)); opacity: 0; transition: all .3s; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .intro { margin-top: .7rem; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .intro .h1 { line-height: 1.2; color: #000000; transition: all .3s; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide .intro .time { margin-top: .45rem; width: max-content; height: 1rem; line-height: 1rem; color: #666666; text-align: center; padding: 0 .5rem; background-color: #EFEFEF; border-radius: .5rem; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide:hover .pic img { transform: scale(1.1); } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide:hover .pic::after { opacity: 1; } .chain .wrap .li .swiper-box .chain-swiper .swiper-slide:hover .intro .h1 { color: var(--logoColor); } /*# sourceMappingURL=all.css.map */