.banner { position: relative; z-index: 3; } .banner .banner-swiper .swiper-wrapper .swiper-slide { position: relative; z-index: 3; } .banner .banner-swiper .swiper-wrapper .swiper-slide .img { overflow: hidden; } .banner .banner-swiper .swiper-pagination { bottom: 10.37%; } .banner .banner-swiper .swiper-pagination-bullet { position: relative; width: 10px; height: 10px; background-color: #fff; margin-right: 23px !important; opacity: 0.57; } .banner .banner-swiper .swiper-pagination-bullet::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background-color: #F95700; opacity: 0; z-index: -1; } .banner .banner-swiper .swiper-pagination-bullet::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; opacity: 0; } .banner .banner-swiper .swiper-pagination-bullet-active { opacity: 1; } .banner .banner-swiper .swiper-pagination-bullet-active::before, .banner .banner-swiper .swiper-pagination-bullet-active::after { opacity: 1; } .banner .bot svg { position: absolute; left: 0; right: 0; bottom: -9px; width: 100%; height: auto; z-index: 2; } .banner .bot .sk { fill: #fdf5f2; } .banner .rainbow svg { position: absolute; right: 0; bottom: -27px; width: 100%; transform: rotate(1deg); z-index: 3; } .mb-banner { position: relative; display: none; } .mb-banner .banner-swiper .swiper-wrapper .swiper-slide { position: relative; z-index: 3; } .mb-banner .banner-swiper .swiper-wrapper .swiper-slide .img { overflow: hidden; } .mb-banner .banner-swiper .swiper-pagination { bottom: 4.37%; } .mb-banner .banner-swiper .swiper-pagination-bullet { position: relative; width: 6px; height: 6px; background-color: #fff; margin-right: 23px !important; opacity: 0.57; } .mb-banner .banner-swiper .swiper-pagination-bullet::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: #F95700; opacity: 0; z-index: -1; } .mb-banner .banner-swiper .swiper-pagination-bullet::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; opacity: 0; } .mb-banner .banner-swiper .swiper-pagination-bullet-active { opacity: 1; } .mb-banner .banner-swiper .swiper-pagination-bullet-active::before, .mb-banner .banner-swiper .swiper-pagination-bullet-active::after { opacity: 1; } .mb-banner .bot svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; z-index: 2; } .mb-banner .bot .sk { fill: #fdf5f2; } .mb-banner .rainbow svg { position: absolute; right: 0; bottom: -27px; width: 100%; transform: rotate(1deg); z-index: 3; } .inn-fir { background: linear-gradient(180deg, #FCF0EC 0%, #FFFFFE 99%, #FFFFFF 100%); } .solve .in { position: relative; } .solve .inPro { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 100%; height: 853px; z-index: 1; } .solve .inPro .cir { position: relative; width: 100%; height: 100%; z-index: 2; } .solve .inPro .circle { position: absolute; left: 50%; top: 59%; transform: translate(-50%, -50%); width: 85.84%; height: auto; z-index: 1; } .solve .inPro .cir1 { animation: cir linear 3.5s forwards; fill: transparent; stroke-dasharray: 0 0; } .solve .inPro .cir1 path { overflow: hidden; } .solve .inPro .cir2 { opacity: 0; clip-path: inset(100% 0 0 0); animation: clip2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } .solve .inPro .cir-cur .cir1 { stroke-dasharray: 4000 4000; } .solve .inPro .cir-cur:hover .cir2 { opacity: 1; animation: clip1 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } .mb-solve { position: relative; display: none; padding-top: 97px; } .mb-solve .h1 { width: 57.5%; margin: 0 auto; } .mb-solve .h2 { font-size: 64px; } .mb-solve .provide-items { padding-bottom: 40px; } .mb-solve .provide-item { position: relative; width: 14%; z-index: 2; } .mb-solve .pro-logo { display: block; } .mb-solve .pro-data { color: #C7C7C7; margin-bottom: 60px; } .mb-solve .pro-data p { font-size: 11px; line-height: 1.5; } .mb-solve .bot-line svg, .mb-solve .bot-line .cir { z-index: 1 !important; } .mb-solve .bot-line .cir1 { bottom: 366px; } .mb-solve .bot-line .cir2 { bottom: 40px; } .mb-solve .bot-line .cir3 { bottom: 15px; } .mb-solve .bot-line .cir4 { bottom: 15px; } .mb-solve .bot-line .cir5 { bottom: 500px; } .mb-solve .mb-proItems { margin: 95px auto 117px; } .mb-solve .mb-proItems .more { display: block; width: 186px; height: 48px; line-height: 48px; background-color: #D7301A; font-size: 16px; color: #fff; border-radius: 28px; margin: 117px auto 0; } .mb-solve .num-link { width: 40%; margin-bottom: 10px; } .mb-solve .num-link:nth-of-type(2n) { width: 60%; } .mb-solve .num-link * { color: #D7301A; } .mb-solve .num-link .num { font-family: 'Gilroy'; font-size: 120px; line-height: 1; } .mb-solve .num-link .num * { font-family: 'Gilroy'; line-height: 1; } .mb-solve .num-link .num span { font-size: 24px; } .mb-solve .num-link .num em { font-family: 'Gilroy'; font-size: inherit; font-weight: bold; } .mb-solve .num-link .num i { font-size: 40px; transform: translateY(-54px); display: inline-block; } .mb-solve .num-link p { line-height: 1.2; font-size: 20px; text-align: center; } .mb-solve .cirs .cir { position: absolute; border-radius: 50%; background: linear-gradient(151deg, #D7301A 0%, rgba(215, 48, 26, 0) 100%); opacity: 0.11; } .mb-solve .cirs .w233 { width: 233px; height: 233px; } .mb-solve .cirs .w109 { width: 109px; height: 109px; } .mb-solve .cirs .w66 { width: 66px; height: 66px; } .mb-solve .cirs .w29 { width: 29px; height: 29px; } .mb-solve .cirs .cir1 { top: 2.7%; left: 3.1%; } .mb-solve .cirs .cir2 { top: 4.8%; right: 2.3%; } .mb-solve .cirs .cir3 { left: 33.1%; top: 28.9%; } .mb-solve .cirs .cir4 { right: 4.3%; bottom: 27.3%; } .mb-solve .cirs .cir5 { left: 6.1%; bottom: 22.7%; } .mb-solve-swiper { margin-bottom: 80px; padding-bottom: 110px; margin-top: 63px; } .mb-solve-swiper .swiper-slide { width: 80vw; text-align: center; } .mb-solve-swiper .swiper-slide * { color: #D7301A; } .mb-solve-swiper .num-link { position: relative; display: inline-block; width: 420px; height: 420px; border-radius: 50%; background: url(../images/mb-slove.png) no-repeat center; background-size: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; } .mb-solve-swiper .num-link * { line-height: 1; } .mb-solve-swiper .num, .mb-solve-swiper p { transform: translateY(10px); opacity: 0; } .mb-solve-swiper .num { font-family: 'Gilroy'; font-size: 140px; } .mb-solve-swiper .num em { font-family: 'Gilroy'; font-size: inherit; font-weight: bold; } .mb-solve-swiper .num i { font-size: 80px; transform: translateY(-54px); display: inline-block; } .mb-solve-swiper p { line-height: 1.2 !important; font-size: 22px; text-align: center; } .mb-solve-swiper .more { display: block; width: 186px; height: 48px; line-height: 48px; background-color: #D7301A; font-size: 16px; color: #fff; border-radius: 28px; margin: 35px auto 0; transform: translateY(10px); opacity: 0; } .mb-solve-swiper .swiper-slide-active .num, .mb-solve-swiper .swiper-slide-active p, .mb-solve-swiper .swiper-slide-active .more { transform: translateY(0); opacity: 1; } .mb-solve-swiper .swiper-button-next, .mb-solve-swiper .swiper-button-prev { top: auto; bottom: 0; margin-top: 0; border: 2px solid #D7301A; width: 48px; height: 48px; border-radius: 50%; } .mb-solve-swiper .swiper-button-next::after, .mb-solve-swiper .swiper-button-prev::after { font-size: 16px; font-weight: bold; color: #D7301A; } .mb-solve-swiper .swiper-button-prev { left: 43%; } .mb-solve-swiper .swiper-button-next { left: 52%; right: auto; } .provider { position: relative; height: 853px; overflow: visible; } .provider .pro-c-txt { position: relative; padding-top: 268px; z-index: 2; } .provider .h1 { width: 26%; margin: 0 auto; } .provider .h2 { font-size: 64px; color: #D7301A; line-height: 1; } .provider .provider-items { width: 49.8%; margin: 100px auto 0; } .provider .provider-item * { color: #D7301A; line-height: 1; } .provider .provider-item .num-t { font-size: 16px; } .provider .provider-item .num-t .num { display: inline-block; font-family: 'Gilroy'; font-weight: bold; font-size: 77px; } .provider .provider-item .num-t i { font-family: 'Gilroy'; font-size: 46px; transform: translateY(-34px); display: inline-block; } .provider .provider-item p { font-size: 16px; } .provider .provider-item:hover { transform: scale(1.1); } .provider .explore { display: block; width: 186px; height: 48px; line-height: 48px; border-radius: 48px; text-align: center; border: 1px solid #D7301A; margin: 106px auto 0; font-size: 16px; color: #D7301A; } .provider .explore:hover { background-color: #D7301A; color: #fff; } .provider .pro-data { position: absolute; left: 50%; bottom: -170px; transform: translateX(-50%); color: #C7C7C7; max-width: 42.84%; margin: 0 auto; } .provider .pro-data p { font-size: 11px; line-height: 2.1; } .provider .provide-item { position: absolute; z-index: 2; } .provider .provide-item .pro-logo { display: block; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform-origin: 50% 40%; } .provider .provide-item img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all 0.5s ease; } .provider .pro1 { left: 18.125%; top: 13.14%; width: 173px; height: 173px; } .provider .pro2 { top: 47.67%; left: 8.125%; width: 151px; height: 151px; } .provider .pro3 { top: 80.85%; left: 17.86%; width: 184px; height: 184px; } .provider .pro4 { top: 17.8%; right: 10.95%; width: 249px; height: 249px; } .provider .pro5 { right: 8.3%; top: 81.76%; width: 131px; height: 131px; } .provider .pro6 { right: 8.9%; top: 62.76%; width: 95px; height: 95px; } .provider .pro-c:hover .cir2 { opacity: 1; animation: clip1 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } .provider .bot-line svg path { stroke: rgba(180, 180, 180, 0.38); } .provider .bot-line .cir1 { width: 77px; height: 77px; bottom: 281px; } .provider .bot-line .cir3 { left: 3.23%; width: 45px; height: 45px; } .provider .bot-line .cir5 { bottom: 198px; } .provider .bot-line .bot-line1 { bottom: -175px; z-index: 0; } .provider .bot-line .bot-line2 { bottom: -160px; z-index: 0; } .provider .bot-line .bot-line3 { bottom: -177px; z-index: 0; } .provider .bot-line .cir { z-index: 0; } .inProduct { position: relative; padding-top: 248px; margin-bottom: 175px; z-index: 2; } .inProduct .bg .bg-img { position: absolute; left: 0; right: 0; top: 0px; z-index: 1; } .inProduct .top svg { position: absolute; left: 0; top: -2px; width: 100%; height: auto; z-index: 1; } .inProduct .top svg .pro-path { fill: #fffffe; } .inProduct .bot svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 2; } .inProduct .bot2 svg { position: absolute; left: 0; bottom: -68px; width: 100%; height: auto; z-index: 2; } .inProduct .main-c { position: relative; z-index: 3; } .pro-tab { margin-bottom: 180px; } .pro-tab .img { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto; } .pro-tab .img2 { display: none; } .pro-tab p { font-size: 18px; line-height: 1; margin-top: 15px; color: #fff; } .pro-tab .swiper-slide { width: auto; cursor: pointer; } .pro-tab .swiper-slide:not(:last-of-type) { margin-right: 72px; } .pro-tab .swiper-slide:hover .img { background-color: #fff; } .pro-tab .swiper-slide:hover .img1 { display: none; } .pro-tab .swiper-slide:hover .img2 { display: block; } .pro-tab .swiper-slide.active .img { background-color: #fff; } .pro-tab .swiper-slide.active .img1 { display: none; } .pro-tab .swiper-slide.active .img2 { display: block; } .inPro-items .inPro-swiper { overflow: visible; } .inPro-items .inPro-wrapper { position: relative; display: none; } .inPro-items .inPro-wrapper::after { content: ''; position: absolute; right: 0; bottom: 0; width: 90.52%; height: 116.4%; border-radius: 20px; background-color: #F5F5F5; } .inPro-items .inPro-wrapper .swiper-slide { position: relative; background-color: #F5F5F5; border-radius: 20px 0 20px 20px; } .inPro-items .inPro-wrapper .swiper-slide .pic { float: left; background: url(../img/pro-bg.png) no-repeat center; background-size: cover; border-radius: 20px; width: 63.97%; z-index: 2; } .inPro-items .inPro-wrapper .swiper-slide .img { position: relative; padding-bottom: 56.92%; } .inPro-items .inPro-wrapper .swiper-slide .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 50%; max-height: 85%; max-width: 120%; object-fit: contain; } .inPro-items .inPro-wrapper .swiper-slide .txt { float: right; position: relative; width: 36.03%; height: 100%; box-sizing: border-box; padding-left: 5.36%; padding-right: 5.17%; margin-left: auto; opacity: 0; transition: all 0.5s ease; } .inPro-items .inPro-wrapper .swiper-slide .txt .slogan { display: inline-block; padding: 7px 10px; background-color: #D7301A; border-radius: 14px; line-height: 1.1; max-width: 100%; color: #fff; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .inPro-items .inPro-wrapper .swiper-slide .txt .des { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .inPro-items .inPro-wrapper .swiper-slide .txt h4 { font-size: 34px; line-height: 1.4; color: #D7301A; font-weight: lighter; margin-bottom: 35px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .inPro-items .inPro-wrapper .swiper-slide .txt .des * { font-size: 16px; color: #848484; } .inPro-items .inPro-wrapper .swiper-slide .txt .more { display: inline-block; margin-top: 35px; font-size: 16px; color: #848484; } .inPro-items .inPro-wrapper .swiper-slide .txt .more i { font-size: 14px; color: #848484; margin-left: 18px; } .inPro-items .inPro-wrapper .swiper-slide .txt .more:hover { letter-spacing: 2px; color: #D7301A; } .inPro-items .inPro-wrapper .swiper-slide .txt .more:hover i { color: #D7301A; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shops { margin-top: 98px; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shop:not(:last-of-type) { margin-right: 25px; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shop .icon { width: 46px; height: 46px; border-radius: 50%; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shop .icon2 { display: none; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shop:hover .icon1 { display: none; } .inPro-items .inPro-wrapper .swiper-slide .txt .online-shop:hover .icon2 { display: block; } .inPro-items .inPro-wrapper .swiper-slide.swiper-slide-active .txt { opacity: 1; transition: all 0.5s ease; } .inPro-items .inPro-wrapper .swiper-button-next, .inPro-items .inPro-wrapper .swiper-button-prev { top: 65%; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.26); } .inPro-items .inPro-wrapper .swiper-button-next::after, .inPro-items .inPro-wrapper .swiper-button-prev::after { font-size: 20px; color: #fff; } .inPro-items .inPro-wrapper .swiper-button-next:hover, .inPro-items .inPro-wrapper .swiper-button-prev:hover { background-color: #D7301A; } .inPro-items .inPro-wrapper .swiper-button-next { left: 58.67%; right: auto; } .inPro-items .inPro-wrapper .pagi { position: absolute; left: 13.72%; top: -54px; width: 100%; } .inPro-items .inPro-wrapper .pagi .more { position: relative; color: #848484; z-index: 1; } .inPro-items .inPro-wrapper .pagi .more:hover { letter-spacing: 2px; color: #D7301A; } .inPro-items .inPro-wrapper .swiper-pagination { position: relative; width: auto; bottom: 0; margin-right: 72px; z-index: 1; } .inPro-items .inPro-wrapper .swiper-pagination-bullet { width: auto; height: auto; border-radius: 0; background-color: transparent; opacity: 1; } .inPro-items .inPro-wrapper .swiper-pagination-bullet:not(:last-of-type) { margin-right: 36px; } .inPro-items .inPro-wrapper .swiper-pagination-bullet i { font-size: 18px; color: #848484; font-family: 'Gilroy'; } .inPro-items .inPro-wrapper .swiper-pagination-bullet-active i { color: #D7301A; } .inPro-items .inPro-wrapper.selected { display: block; } .news { padding-bottom: 144px; } .news .title { position: relative; } .news .title h3 { width: 11.6%; margin: 0 auto 11px; } .news .title p { width: 11.4%; margin: 0 auto; } .news .title .line { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 120px; height: 2px; background-color: #F19D16; } .news .title .line::before, .news .title .line::after { content: ''; position: absolute; top: 0; bottom: 0; height: 2px; width: calc(100%/3); } .news .title .line::before { left: 0; background-color: #FFDE00; } .news .title .line::after { right: 0; background-color: #D7301A; } .news .news-items { margin-top: 92px; } .news .news-item { position: relative; width: 31.2%; margin-right: 3.2%; border-radius: 12px; overflow: hidden; background-color: #F9F9F9; } .news .news-item:last-child { margin-right: 0; } .news .news-item .class { position: absolute; left: 0; top: 0; width: 72px; height: 32px; line-height: 32px; text-align: center; background: #C7C7C7; border-radius: 12px 0px 12px 0px; color: #fff; font-weight: bold; z-index: 2; } .news .news-item .title { font-size: 18px; } .news .news-item .date { color: #777; } .news .news-item:hover .class { background-color: #D7301A; } .news .news-video .img, .news .news-activity .img { position: relative; padding-bottom: 59.89%; overflow: hidden; } .news .news-video .img img, .news .news-activity .img img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .news .news-video .txt, .news .news-activity .txt { padding: 22px 7.78% 31px; } .news .news-video .title, .news .news-activity .title { height: 64px; margin-bottom: 39px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news .news-video:hover, .news .news-activity:hover { background-color: #D7301A; } .news .news-video:hover .img img, .news .news-activity:hover .img img { transform: scale(1.04); } .news .news-video:hover .title, .news .news-activity:hover .title, .news .news-video:hover .date, .news .news-activity:hover .date { color: #fff; } .news .news-video { cursor: pointer; } .news .news-video .img .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .news .news-video .img .icon i { font-size: 54px; color: #fff; } .news .more { margin-top: 92px; } .news .more-news { display: inline-block; width: 130px; height: 37px; line-height: 37px; text-align: center; border-radius: 27px 27px 27px 27px; border: 1px solid #848484; box-sizing: border-box; color: #848484; } .news .more-news:hover { background-color: #D7301A; border-color: #D7301A; color: #fff; } .news .new-r { padding: 46px 2.74%; } .news .news-r-item { display: block; padding-top: 25px; } .news .news-r-item:not(:last-of-type ) { padding-bottom: 34px; border-bottom: 1px solid rgba(112, 112, 112, 0.13); } .news .news-r-item .title { line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 18px; } .news .news-r-item:hover .title { color: #D7301A; } .news .more1 { margin-right: 19px; } .about-link { position: relative; top: -71px; } .join-banner .txt { top: 42%; } .join-banner .txt p { margin-bottom: 30px; } .aboutUs { padding-bottom: 222px; } .aboutUs .about-wrapper { position: relative; } .aboutUs .about-l { width: 47.6%; } .aboutUs .intro { margin-top: 54px; } .aboutUs .intro * { font-size: 16px; line-height: 2; } .aboutUs .img { position: absolute; right: 0; top: 0; width: 44%; border-radius: 12px 0 0 12px; overflow: hidden; } .system { background-color: #D7301A; padding: 123px 0 111px; } .system * { color: #fff; } .system .main-c { position: relative; } .system .map { position: absolute; right: 0; top: 0; width: 61.2%; z-index: 1; } .system .items { margin-top: 355px; } .system .item-t { margin-bottom: 38px; } .system .item { margin-right: 74px; } .system .item * { line-height: 1; } .system .item .num-box { position: relative; margin-right: 30px; } .system .item .num { font-size: 70px; font-family: 'Gilroy'; } .system .item i { position: absolute; right: -20px; top: 0; font-size: 30px; font-weight: bold; } .system .item .txt p { font-size: 16px; line-height: 1.5; } .system .map .map-line { position: absolute; } .system .map .map-line svg { width: 100%; height: auto; } .system .map .cir { left: 41.62%; top: 34.67%; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; } .system .map .line1 { left: 19.13%; top: 14.22%; width: 23.57%; } .system .map .line1 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line2 { left: 14.13%; top: 19.23%; width: 28.17%; } .system .map .line2 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line3 { left: 26.13%; top: 25.23%; width: 17.62%; } .system .map .line3 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line4 { left: 31.13%; top: 31.23%; width: 12.6%; } .system .map .line4 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line5 { left: 40.62%; top: 35.23%; width: 1.87%; } .system .map .line5 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line6 { left: 41.2%; top: 31.23%; width: 1.11%; } .system .map .line6 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line7 { left: 42.5%; top: 27.23%; width: 2.64%; } .system .map .line7 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line8 { left: 42.5%; top: 28.6%; width: 5.79%; } .system .map .line8 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line9 { left: 42.5%; top: 31.6%; width: 3.23%; } .system .map .line9 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line10 { left: 42.5%; top: 34%; width: 4.26%; } .system .map .line10 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line11 { left: 42.5%; top: 36%; width: 2.47%; } .system .map .line11 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line12 { left: 42.5%; top: 37%; width: 4.68%; } .system .map .line12 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line13 { left: 40.8%; top: 37%; width: 2.04%; } .system .map .line13 svg { clip-path: inset(0 0 0 100%); animation: line 4s infinite linear forwards 2s; } .system .map .line14 { left: 42.5%; top: 13.5%; width: 33.02%; } .system .map .line14 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .system .map .line15 { left: 42.5%; top: 19.3%; width: 29.7%; } .system .map .line15 svg { clip-path: inset(0 100% 0 0); animation: line 4s infinite linear forwards 2s; } .leader { padding: 101px 0 166px; background-color: #F7F7F7; } .leader-pics { width: 86.4%; margin: 82px auto; } .leader-pics .img { width: 31.4%; border-radius: 7px; overflow: hidden; } .leader-pics .img:not(:last-of-type) { margin-right: 2.9%; } .leader-pics .img img { transition: all 0.4s; } .leader-pics .img:hover img { transform: scale(1.04); } .leader-wrap { position: relative; } .leader-wrap::before { content: ''; position: absolute; left: 6.5%; top: 11px; width: 78%; height: 3px; background-color: #D8D8D8; } .leader-wrap::after { content: ''; position: absolute; right: 2.1%; top: 11px; width: 13.2%; height: 3px; background: url(../images/line.png) repeat-x center; background-size: contain; } .leader-wrap .cir { width: 23px; height: 23px; border-radius: 50%; box-sizing: border-box; background: #C4C4C4; border: 2px solid #fff; margin: 0 auto; } .leader-wrap .year { font-size: 23px; text-align: center; color: #C4C4C4; margin-top: 20px; } .leader-wrap .cur .cir { width: 30px; height: 30px; background-color: #fff; border-color: #D7301A; } .leader-wrap .cur .year { font-size: 32px; color: #D7301A; margin-top: 9px; } .leader-wrap .swiper-button-next, .leader-wrap .swiper-button-prev { top: -10px; margin-top: 0; } .leader-wrap .swiper-button-next::after, .leader-wrap .swiper-button-prev::after { font-size: 36px; color: #D8D8D8; transition: all 0.3s; } .leader-wrap .swiper-button-next:hover::after, .leader-wrap .swiper-button-prev:hover::after { color: #D7301A; } .leader-wrap .swiper-button-next { right: 0; } .leader-wrap .swiper-button-prev { left: 0; } .leader-swiper { width: 90.84%; margin-left: 0; } .leader-swiper .swiper-slide { cursor: pointer; } .leaders { max-height: 654px; margin-top: 99px; overflow-y: auto; } .leaders::-webkit-scrollbar { width: 6px; } .leaders::-webkit-scrollbar-thumb { width: 6px; border-radius: 3px; background: #D7301A; } .leaders::-webkit-scrollbar-track { background-color: #E6E6E6; border-radius: 3px; } .leader-item:not(:last-of-type) { margin-bottom: 72px; } .leader-item .img { width: 26.1%; border-radius: 7px; overflow: hidden; } .leader-item .txt { width: 38.2%; margin-left: 2.4%; } .leader-item h3 { font-size: 24px; font-weight: 500; line-height: 1.7; margin-bottom: 5px; } .leader-item .intro * { font-size: 16px; line-height: 1.7; color: #848484; } .honor { margin-top: 77px; } .honor .tab { margin: 78px 0 121px; padding-bottom: 26px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); } .honor .tab li { position: relative; font-size: 16px; color: #848484; cursor: pointer; } .honor .tab li:not(:last-of-type) { margin-right: 72px; } .honor .tab li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -26px; width: 0; height: 3px; background-color: #D7301A; opacity: 0; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .honor .tab li.active { color: #D7301A; } .honor .tab li.active::after { opacity: 1; width: 100%; } .honor .honor-box { display: none; } .honor .honor-box.selected { display: block; } .honor-swiper { position: relative; padding-bottom: 123px; } .honor-swiper .swiper-slide { transition: 300ms; transform: scale(0.59); opacity: 0.5; } .honor-swiper .swiper-slide .pic { position: relative; padding-bottom: 68%; width: 100%; } .honor-swiper .swiper-slide .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 85%; max-height: 85%; } .honor-swiper .swiper-slide p { font-size: 16px; color: #848484; margin-top: 14px; line-height: 1.1; opacity: 0; visibility: hidden; } .honor-swiper .swiper-slide-active { transform: scale(1); opacity: 1; } .honor-swiper .swiper-slide-active p { opacity: 1; visibility: visible; } .honor-swiper .pagi { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; } .honor-swiper .swiper-pagination { position: relative; width: auto; bottom: 0; left: auto; margin: 0 51px; font-family: 'Gilroy'; font-size: 16px; } .honor-swiper .swiper-pagination * { font-family: 'Gilroy'; } .honor-swiper .swiper-pagination-current { font-size: 26px; } .honor-swiper .swiper-button-next, .honor-swiper .swiper-button-prev { position: relative; top: 0; left: auto; right: auto; width: 41px; height: 41px; background: #F7F7F7; border-radius: 50%; margin-top: 0; } .honor-swiper .swiper-button-next::after, .honor-swiper .swiper-button-prev::after { font-size: 16px; color: #707070; } .honor-swiper .swiper-button-next:hover, .honor-swiper .swiper-button-prev:hover { background-color: #D7301A; } .honor-swiper .swiper-button-next:hover::after, .honor-swiper .swiper-button-prev:hover::after { color: #fff; } .bigEvent { position: relative; background-color: #F7F7F7; } .bigEvent .big-wrap { position: relative; z-index: 2; } .bigEvent .title { padding-bottom: 31px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); margin-bottom: 48px; } .bigEvent .bg-img { position: absolute; bottom: 0; left: 0; width: 63.7%; } .bigEvent .event-wrap { width: 55.4vw; box-sizing: border-box; padding: 99px 4.7% 78px 0; margin-left: 8.23vw; } .bigEvent .event-wrap .events { height: 690px; padding-right: 18.4%; overflow-y: auto; } .bigEvent .event-wrap .events::-webkit-scrollbar { width: 6px; } .bigEvent .event-wrap .events::-webkit-scrollbar-thumb { width: 6px; border-radius: 3px; background: #D7301A; } .bigEvent .event-wrap .events::-webkit-scrollbar-track { background-color: #E6E6E6; border-radius: 3px; } .bigEvent .event-wrap .year { font-size: 70px; color: #D7301A; font-weight: bold; margin-bottom: 62px; } .bigEvent .event-wrap .mouth { width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; font-size: 16px; font-weight: bold; color: #fff; background-color: #D7301A; margin-bottom: 9px; } .bigEvent .event-wrap .info * { font-size: 16px; color: #848484; line-height: 2; } .bigEvent .event-r { width: 36.37vw; background-color: #D7301A; padding: 109px 4.2% 0 2.6%; } .bigEvent .event-r .title { border-bottom: 1px solid rgba(255, 255, 255, 0.27); } .bigEvent .event-r .title * { color: #fff; } .bigEvent .year-item:not(:last-of-type) { margin-bottom: 58px; } .bigEvent .year-item h4 { font-weight: normal; font-size: 50px; line-height: 1; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .bigEvent .event-swiper { padding-top: 33px; display: none; width: 90%; margin-left: 0; } .bigEvent .event-swiper .swiper-slide { width: auto; margin-right: 46px; font-size: 20px; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .bigEvent .event-swiper .swiper-slide.active { color: #fff; } .bigEvent .year-item.active h4 { font-weight: bold; color: #fff; } .bigEvent .year-item.active .event-swiper { display: block; } .speech { padding-top: 160px; padding-bottom: 213px; background: url(../images/zc-bg.png) no-repeat bottom; background-size: contain; } .speech .title h3 { color: #D7301A; } .speech .speech-l .qm { margin-top: 152px; } .speech .speech-l .qm p { font-size: 16px; } .speech .speech-l .qm .qm-img { width: auto; } .speech .speech-r { width: 50.5%; height: 365px; padding-right: 5.17%; overflow-y: auto; } .speech .speech-r::-webkit-scrollbar { width: 6px; } .speech .speech-r::-webkit-scrollbar-thumb { width: 6px; border-radius: 3px; background: #D7301A; } .speech .speech-r::-webkit-scrollbar-track { border-radius: 3px; background-color: #D1D1D1; } .speech .speech-r * { font-size: 16px; line-height: 2; } .jtpp { position: relative; padding: 141px 0 107px; background-color: #D7301A; overflow: hidden; } .jtpp h3 { font-size: 50px; color: #fff; max-width: 90%; margin: 0 auto 90px; } .jtpp .img { position: absolute; display: block; } .jtpp .jtpp-c { margin-top: 101px; } .jtpp .jtpp1 { position: relative; width: 693px; height: 357px; border: 1px dashed #fff; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; margin: 0 auto; } .jtpp .jtpp1 .item { width: 115px; height: 115px; border-radius: 50%; background-color: #fff; } .jtpp .jtpp1 .item img { width: auto; } .jtpp .item { position: absolute; } .jtpp .jt1, .jtpp .jt6 { bottom: -58px; } .jtpp .jt2, .jtpp .jt3 { top: 40%; } .jtpp .jt4, .jtpp .jt5 { top: 0; } .jtpp .jt1 { left: -58px; } .jtpp .jt2 { left: -4%; } .jtpp .jt3 { right: -4%; } .jtpp .jt4 { left: 14%; } .jtpp .jt5 { right: 14%; } .jtpp .jt6 { right: -58px; } .jtpp .jt7 { left: 50%; top: -58px; transform: translateX(-50%); } .jtpp .jtpp2 { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); width: 455px; height: 455px; } .jtpp .jtpp2 .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45.3%; } .jtpp .wz { width: 332px; margin: 297px auto 0; } .jtpp .cir { position: absolute; border-radius: 50%; background: #FFFFFF; transform-origin: 30% 30px; } .jtpp .cir19 { width: 19px; height: 19px; opacity: 0.5; } .jtpp .cir3 { width: 3px; height: 3px; } .jtpp .cir9 { width: 9px; height: 9px; opacity: 0.5; } .jtpp .cir1 { left: 5.625%; bottom: 43.76%; animation: spin2 12s infinite linear; } .jtpp .cir2 { left: 15.89%; bottom: 21.27%; animation: rotate3 10s infinite linear; } .jtpp .cir3 { left: 29.5%; bottom: 39.16%; animation: spin2 10s infinite linear; } .jtpp .cir4 { top: 20.45%; left: 22.76%; animation: rotate3 14s infinite linear; } .jtpp .cir5 { top: 16.05%; right: 28.96%; animation: rotate3 14s infinite linear; } .jtpp .cir6 { right: 36.3%; bottom: 47.65%; animation: spin2 10s infinite linear; } .jtpp .cir7 { right: 34.74%; bottom: 14.83%; animation: spin2 12s infinite linear; } .jtpp .cir8 { top: 38.67%; right: 19.375%; animation: spin2 10s infinite linear; } .jtpp .cir9 { top: 35.69%; right: 4.84%; animation: spin2 14s infinite linear; } .jtpp .cir10 { top: 10.05%; right: 7.03%; animation: rotate3 10s infinite linear; } .product-nav { margin-top: 71px; padding-top: 33px; padding-bottom: 52px; } .product-nav .pro-tab { margin-bottom: 0; } .product-nav .pro-tab p { color: #333; } .product-nav .swiper-slide:hover .img { background-color: #D7301A; } .product-nav .swiper-slide.active .img { background-color: #D7301A; } .product { padding-bottom: 268px; } .product .pro-box { position: relative; overflow: hidden; background-color: #F9F9F9; border-radius: 10px; cursor: pointer; } .product .pro-box .img { position: relative; overflow: hidden; } .product .pro-box .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 150%; max-height: 82.3%; width: auto; height: auto; object-fit: contain; } .product .pro-box h3 { font-weight: normal; line-height: 1.1; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product .pro-box .model { font-size: 16px; color: #848484; line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product .pro-box .arrow { position: relative; } .product .pro-box .arrow i { position: absolute; left: 0; top: 42px; font-size: 26px; color: #D7301A; opacity: 0; } .product .pro-box::after { content: ''; position: absolute; right: 0; width: 0; bottom: 0; height: 9px; border-radius: 0px 0px 10px 10px; background: #D7301A; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .product .pro-box:hover::after { left: 0; width: 100%; } .product .pro-box:hover .pro-wrapper { transform: translateY(-50px); } .product .pro-box:hover img { top: 55%; } .product .pro-box:hover .arrow i { opacity: 1; } .product .pro-fir { width: 49.2%; margin-right: 1.7%; } .product .pro-fir .img { padding-bottom: 87.9%; } .product .pro-fir .txt { padding: 0 9.76% 85px 3.68%; } .product .pro-fir h3 { font-size: 24px; } .product .pro-fir .model { margin-bottom: 14px; } .product .pro-fir .des { color: #707070; margin-top: 36px; } .product .pro-r { width: 49.1%; } .product .pro-r .pro-item { width: 48.3%; margin-right: 3.4%; } .product .pro-r .pro-item:nth-of-type(1), .product .pro-r .pro-item:nth-of-type(2) { margin-bottom: 21px; } .product .pro-r .pro-item:nth-child(2n) { margin-right: 0; } .product .pro-item .img { padding-bottom: 96.6%; } .product .pro-item .txt { height: 95px; padding: 0 5.3% 30px; } .product .pro-item .txt h3 { font-size: 18px; } .product .product-b .pro-item { width: 23.8%; margin-right: 1.6%; margin-top: 20px; } .product .product-b .pro-item:nth-of-type(4n) { margin-right: 0; } .mask-product { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.35s; } .mask-product .mvbot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1142px; height: 599px; background-color: #fff; padding: 42px 51px 53px 33px; box-sizing: border-box; } .mask-product .pro-swiper1 { width: 115px; height: 504px; } .mask-product .pro-swiper1 .swiper-slide { position: relative; } .mask-product .pro-swiper1 .swiper-slide img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90px; max-height: 90px; width: auto; height: auto; object-fit: contain; } .mask-product .pro-swiper1 .swiper-slide-thumb-active { border: 1px solid #D7301A; } .mask-product .pro-swiper2 { width: 503px; } .mask-product .pro-swiper2 .swiper-slide { position: relative; } .mask-product .pro-swiper2 .swiper-slide img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .mask-product .info { width: 373px; } .mask-product .info .title { font-size: 20px; font-weight: normal; line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 29px; border-bottom: 1px solid #D6D6D6; margin-bottom: 39px; } .mask-product .info .des { height: 180px; overflow-y: auto; } .mask-product .info .des::-webkit-scrollbar { width: 4px; } .mask-product .info .des::-webkit-scrollbar-thumb { width: 4px; border-radius: 0; background: #D7301A; } .mask-product .info .des * { font-size: 15px; line-height: 2; color: #848484; } .mask-product .info .online-shops { margin-top: 100px; } .mask-product .info .online-shop { width: 48.8%; height: 63px; border-radius: 12px; background: #E6E6E6; padding-left: 12px; margin-bottom: 9px; margin-right: 2.4%; box-sizing: border-box; } .mask-product .info .online-shop:nth-of-type(2n) { margin-right: 0; } .mask-product .info .online-shop .icon { margin-right: 10px; } .mask-product .info .online-shop .icon .icon2 { display: none; } .mask-product .info .online-shop p { color: #ABABAB; } .mask-product .info .online-shop:hover { background-color: #D7301A; } .mask-product .info .online-shop:hover .icon .icon1 { display: none; } .mask-product .info .online-shop:hover .icon .icon2 { display: block; } .mask-product .info .online-shop:hover p { color: #fff; } .mask-product .closed { position: absolute; right: -67px; top: 0; width: 55px; height: 55px; border-radius: 50%; background-color: #D7301A; cursor: pointer; } .mask-product .closed i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 22px; color: #fff; } .mask-product .closed:hover { transform: rotate(360deg); transition: 0.35s; } .mask-product.active { opacity: 1; visibility: visible; } .ch-news { padding-bottom: 153px; } .ch-news .news-item { width: 31.17%; margin-right: 3.245%; } .ch-news .news-item:nth-of-type(3n) { margin-right: 0; } .ch-news .news-item .img { position: relative; overflow: hidden; padding-bottom: 60%; margin-bottom: 20px; border-radius: 12px; } .ch-news .news-item .img img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .ch-news .news-item h3 { height: 50px; font-size: 20px; line-height: 1.25; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ch-news .news-item .bot { position: relative; margin-top: 52px; } .ch-news .news-item .date { font-family: 'Gilroy'; font-size: 15px; color: #777; } .ch-news .news-item .more { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #D7301A; opacity: 0; } .ch-news .news-item .more em { position: relative; display: inline-block; width: 20px; height: 20px; background: #D7301A; border-radius: 50%; text-align: center; line-height: 20px; margin-left: 11px; } .ch-news .news-item .more i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; } .ch-news .news-item:hover img { transform: scale(1.04); } .ch-news .news-item:hover h3, .ch-news .news-item:hover .date { color: #D7301A; } .ch-news .news-item:hover .more { right: 0; opacity: 1; } .annouce-item { position: relative; background-color: #F9F9F9; height: 156px; border-radius: 12px; margin-bottom: 40px; } .annouce-item .date { position: relative; width: 140px; } .annouce-item .date::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 67.95%; background-color: rgba(112, 112, 112, 0.42); } .annouce-item .day { font-family: 'Gilroy'; font-size: 62px; color: #777; } .annouce-item .year { font-family: 'Gilroy'; font-size: 15px; color: #777; } .annouce-item .txt { width: calc(100% - 140px); padding-top: 30px; padding-left: 4.55%; padding-right: 27.06%; } .annouce-item h3 { font-size: 24px; font-weight: normal; line-height: 1.1; margin-bottom: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .annouce-item p { font-size: 16px; line-height: 1.5; color: #848484; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .annouce-item .icon { position: absolute; right: 3.62%; top: 50%; transform: translateY(-50%); } .annouce-item .icon i { font-size: 46px; color: #C7C7C7; } .annouce-item::after { content: ''; position: absolute; left: 0; bottom: -14px; width: 0; height: 4px; border-radius: 12px; background-color: #D7301A; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .annouce-item:hover::after { width: 100%; } .annouce-item:hover .day, .annouce-item:hover .year, .annouce-item:hover h3, .annouce-item:hover .icon i { color: #D7301A; } .infoList { margin-top: 90px; padding-bottom: 160px; } .infoList .title { font-size: 32px; text-align: center; font-weight: normal; padding-bottom: 48px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); } .infoList .bot { margin-bottom: 54px; margin-top: 48px; } .infoList .bot .date { color: #777777; } .infoList .bot .fx-icon { font-size: 20px; color: #C7C7C7; } .infoList .bot .share-content { position: absolute; right: 0; top: 160%; width: 200px; padding: 20px 10px; background-color: #E6E6E6; border-radius: 10px 0 10px 10px; opacity: 0; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .infoList .bot .share-content::before { content: ''; position: absolute; right: 0; top: -12px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: transparent transparent #E6E6E6 transparent; } .infoList .bot .share-content #share-3 { display: flex; justify-content: space-between; } .infoList .bot .share-content .social-share a { position: relative; text-decoration: none; display: inline-block; outline: none; } .infoList .bot .share-content .social-share .social-share-icon { position: relative; display: inline-block; width: 40px; height: 40px; font-size: 20px; border-radius: 50%; line-height: 40px; border: 1px solid #ABABAB; color: #ABABAB; text-align: center; vertical-align: middle; } .infoList .bot .share-content .social-share .social-share-icon::before { font-family: "iconfont" !important; font-size: 22px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .infoList .bot .share-content .social-share .icon-qq:hover { color: #56b6e7; border-color: #56b6e7; } .infoList .bot .share-content .social-share .icon-wechat { position: relative; } .infoList .bot .share-content .social-share .icon-wechat:before { content: "\e660"; } .infoList .bot .share-content .social-share .icon-wechat .wechat-qrcode { opacity: 0; visibility: hidden; position: relative; position: absolute; z-index: 9; top: 160%; left: 50%; transform: translateX(-50%); width: 200px; padding-bottom: 10px; color: #666; font-size: 12px; text-align: center; background-color: #fff; box-shadow: 0 2px 10px #e7e7e7; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; } .infoList .bot .share-content .social-share .icon-wechat .wechat-qrcode::before { content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent transparent #f7f7f7 transparent; } .infoList .bot .share-content .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f7f7f7; margin: 0; padding: 0; color: #777; } .infoList .bot .share-content .social-share .icon-wechat .wechat-qrcode .qrcode { width: 105px; margin: 10px auto; } .infoList .bot .share-content .social-share .icon-wechat:hover { color: #7bc549; border-color: #7bc549; } .infoList .bot .share-content .social-share .icon-wechat:hover .wechat-qrcode { opacity: 1; visibility: visible; top: 140%; } .infoList .bot .share-content .social-share .icon-weibo:hover { color: #ff763b; border-color: #ff763b; } .infoList .bot .share { position: relative; } .infoList .bot .share:hover .share-content { opacity: 1; top: 140%; } .infoList .info { padding-bottom: 147px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); } .infoList .info * { font-size: 16px; color: #777; } .infoList .info img { width: auto; max-width: 100% !important; height: auto !important; margin: 0 auto; } .infoList .page { position: relative; margin-top: 27px; } .infoList .page * { font-size: 15px; color: #848484; } .infoList .page .chapter { position: relative; width: 41%; } .infoList .page .chapter span { display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .infoList .page .chapter i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 18px; color: #C7C7C7; } .infoList .page .chapter:hover i, .infoList .page .chapter:hover span { color: #D7301A; } .infoList .page .prev { padding-left: 29px; } .infoList .page .prev i { left: 0; } .infoList .page .next { padding-right: 29px; text-align: right; } .infoList .page .next i { right: 0; } .infoList .page .back { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 15px; color: #848484; } .infoList .page .back:hover { color: #D7301A; } .video-item { width: 31.2%; margin-right: 3.2%; margin-bottom: 54px; cursor: pointer; } .video-item:nth-of-type(3n) { margin-right: 0; } .video-item .img { position: relative; border-radius: 12px; overflow: hidden; padding-bottom: 60%; } .video-item .img::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; } .video-item .img img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .video-item .img .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .video-item .img .icon i { font-size: 56px; color: #fff; } .video-item p { margin-top: 23px; font-size: 18px; text-align: center; } .video-item:hover .img img { transform: scale(1.04); } .video-item:hover p { color: #D7301A; } .mask-video { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.35s; } .mask-video .mvbot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; max-width: 1000px; background-color: #000; } .mask-video .video-sp, .mask-video .other-Video { width: 100%; max-height: 55vh; object-fit: contain; opacity: 0; visibility: hidden; transition: 0.35s; } .mask-video .other-Video iframe { width: 100%; height: 100%; object-fit: contain; } .mask-video .closed { position: absolute; right: -67px; top: 0; width: 55px; height: 55px; border-radius: 50%; background-color: #D7301A; cursor: pointer; } .mask-video .closed i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 22px; color: #fff; } .mask-video .closed:hover { transform: rotate(360deg); transition: 0.35s; } .mask-video.active { opacity: 1; visibility: visible; } .mask-video.active .video-sp, .mask-video.active .other-Video { opacity: 1; visibility: visible; } .wel-banner .txt { top: 29%; transform: translateX(-50%); } .wel-banner .txt h3 { margin-bottom: 35px; } .wel-banner .txt p { width: 45.32%; font-size: 16px; line-height: 2; } .welfare { padding-bottom: 144px; } .wel-itemt { position: relative; width: 48.2%; border-radius: 12px; overflow: hidden; margin-right: 3.6%; } .wel-itemt:nth-child(2n) { margin-right: 0; } .wel-itemt::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 36.05%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); z-index: 1; } .wel-itemt .img { position: relative; padding-bottom: 60.3%; overflow: hidden; } .wel-itemt .img::after { content: ''; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); } .wel-itemt .img img { position: absolute; left: 0; } .wel-itemt .txt { position: absolute; left: 0; bottom: 37px; right: 0; width: 100%; padding: 0 4.53% 0 4%; z-index: 2; } .wel-itemt .txt * { color: #fff; line-height: 1.1; } .wel-itemt .date { font-size: 15px; font-family: 'Gilroy'; } .wel-itemt p { font-size: 24px; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wel-itemt .icon { position: absolute; right: 4.53%; top: 50%; transform: translateY(-50%); width: 51px; height: 51px; border: 1px solid #fff; border-radius: 50%; box-sizing: border-box; z-index: 2; } .wel-itemt .icon i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 20px; } .wel-itemt .wel-l { width: calc(100% - 55px); } .wel-itemt:hover .img img { transform: scale(1.04); } .wel-itemt:hover p { color: #D7301A; } .welfare-items { margin-bottom: 84px; } .wItem { position: relative; padding-bottom: 60px; border-bottom: 1px solid #ccc; } .wItem:not(:first-of-type) { padding-top: 60px; } .wItem .img { width: 22.6%; } .wItem .pic { position: relative; width: 100%; padding-bottom: 60.01%; border-radius: 12px; overflow: hidden; } .wItem .pic img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .wItem .txt { width: 55.36%; margin-left: 3.24%; } .wItem .txt h3 { font-size: 24px; font-weight: normal; line-height: 1.3; margin-bottom: 19px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wItem .txt p { font-size: 16px; color: #848484; margin-bottom: 61px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wItem .date { position: absolute; right: 0; } .wItem .date * { font-family: 'Gilroy'; color: #777; line-height: 1; } .wItem .date .day { font-size: 62px; } .wItem .date .year { font-size: 15px; } .wItem .more { color: #848484; } .wItem .more i { margin-left: 26px; color: #C7C7C7; } .wItem:hover img { transform: scale(1.04); } .wItem:hover h3 { color: #D7301A; } .wItem:hover .more { letter-spacing: 3px; color: #D7301A; } .wItem:hover .more i { color: #D7301A; } .qa-banner .txt { top: 40%; } .qa-banner .txt h3 { font-size: 50px; } .qa-banner .qa-swiper { width: 58.4%; height: 100px; margin-top: 63px; } .qa-banner .qa-swiper .swiper-slide { height: 35px; border-radius: 35px; line-height: 35px; text-align: center; border: 1px solid #fff; color: #C7C7C7; } .qa-banner .qa-swiper .swiper-slide:hover { color: #D7301A; background-color: #fff; } .qa-banner .qa-swiper .swiper-slide.active { color: #D7301A; background-color: #fff; } .qa { padding-bottom: 207px; } .qa-item { position: relative; width: 31.2%; background-color: #F9F9F9; border-radius: 12px; padding: 22px 2.3% 21px; box-sizing: border-box; margin-bottom: 45px; margin-right: 3.2%; cursor: pointer; } .qa-item:nth-of-type(3n) { margin-right: 0; } .qa-item p { font-size: 20px; height: 68px; line-height: 1.7; color: #707070; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qa-item .icon { margin-top: 34px; } .qa-item .icon i { text-align: right; font-size: 30px; color: #C7C7C7; } .qa-item::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 4px; border-radius: 12px; background-color: #D7301A; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .qa-item:hover p, .qa-item:hover i { color: #D7301A; } .qa-item:hover::after { left: 0; width: 100%; } .mask-qa { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.35s; } .mask-qa .mvbot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 787px; height: 467px; background-color: #fff; padding: 35px 42px; box-sizing: border-box; } .mask-qa .mvbot::before { content: ''; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 4px; background: #D7301A; z-index: 1; } .mask-qa .qa-box .name { font-size: 24px; line-height: 1.7; font-weight: normal; padding-bottom: 19px; border-bottom: 1px solid #D6D6D6; } .mask-qa .qa-box .des { height: 240px; margin-top: 42px; overflow-y: scroll; } .mask-qa .qa-box .des::-webkit-scrollbar { width: 4px; } .mask-qa .qa-box .des::-webkit-scrollbar-thumb { width: 4px; border-radius: 0; background: #D7301A; } .mask-qa .qa-box .des * { font-size: 16px; color: #999; } .mask-qa .closed { position: absolute; right: -67px; top: 0; width: 55px; height: 55px; border-radius: 50%; background-color: #D7301A; cursor: pointer; } .mask-qa .closed i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 22px; color: #fff; } .mask-qa .closed:hover { transform: rotate(360deg); transition: 0.35s; } .mask-qa.active { opacity: 1; visibility: visible; } .dj .txt { top: 40%; } .dj .bot svg { bottom: -2px; } .party { margin-bottom: 108px; } .party .praty-l, .party .party-r { width: 45.89%; } .party .praty-l p { font-size: 30px; line-height: 1.7; color: #D7301A; font-weight: 500; } .party .party-r p { font-size: 18px; text-align: justify; } .party .party-swiper { margin-top: 73px; } .party .party-swiper .swiper-slide { box-sizing: border-box; border: 5px solid #340000; } .praty-ttbox { margin-top: 97px; } .praty-ttbox .img { width: 131px; margin-right: 10%; } .play-video { font-size: 16px; color: #D7301A; cursor: pointer; } .play-video i { font-size: 34px; color: #D7301A; margin-left: 10px; } .activity { position: relative; } .activity .activity-l { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 46.67%; } .activity .activity-r { width: 79%; margin-left: auto; background-color: #F9F9F9; padding: 133px 14.48% 168px 30.36%; } .activity .activity-r h3 { font-size: 50px; color: #D7301A; } .activity .activity-r .sub-tit { font-size: 30px; color: #D7301A; } .activity .activity-r .des { font-size: 18px; line-height: 2; margin-top: 60px; text-align: justify; } .activity .activity-r .acti-bot { margin-top: 100px; } .activity .activity-r .downLoad { padding: 5px 25px; background-color: #D7301A; border-radius: 20px; color: #fff; font-size: 16px; } .organi { background: url(../img/zzjg-bg.jpg) no-repeat bottom; background-size: contain; } .organization { position: relative; padding-bottom: 174px; } .organization .bg-img { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; } .organization img { width: auto; max-width: 100% !important; height: auto !important; margin: 0 auto; } .organization .organi-svg { width: 78.2%; height: auto; } .culture { position: relative; padding-bottom: 146px; } .culture::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 492px; background-color: #F7F7F7; z-index: -1; } .culture-swiper { padding-top: 134px; } .culture-swiper .swiper-slide { margin: 0 5.42%; width: 30%; border-radius: 12px; overflow: hidden; } .culture-swiper .swiper-slide:hover img { transform: scale(1.04); } .culture-swiper .img { position: relative; padding-bottom: 42%; overflow: hidden; } .culture-swiper .img img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .culture-swiper .txt { padding: 36px 26.48% 61px 6.32%; background-color: #fff; } .culture-swiper .date { font-family: 'Gilroy'; font-size: 15px; color: #C7C7C7; margin-bottom: 22px; } .culture-swiper h3 { font-weight: normal; font-size: 24px; color: #D7301A; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .culture-swiper .more { margin-top: 76px; color: #999; } .culture-swiper .more em { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #999; margin-left: 11px; } .culture-swiper .more i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #fff; } .culture-swiper .swiper-button-next, .culture-swiper .swiper-button-prev { width: 58px; height: 58px; box-sizing: border-box; border: 1px solid #E6E6E6; } .culture-swiper .swiper-button-next::after, .culture-swiper .swiper-button-prev::after { font-family: "iconfont" !important; font-size: 36px; color: #D7301A; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .culture-swiper .swiper-button-next:hover, .culture-swiper .swiper-button-prev:hover { border-color: #D7301A; background-color: #D7301A; } .culture-swiper .swiper-button-next:hover::after, .culture-swiper .swiper-button-prev:hover::after { color: #fff; } .culture-swiper .swiper-button-prev { left: 27.55%; } .culture-swiper .swiper-button-prev::after { content: '\e625'; } .culture-swiper .swiper-button-next { right: 27.55%; } .culture-swiper .swiper-button-next::after { content: '\e624'; } .culture-swiper .swiper-pagination { top: 84px; bottom: auto; left: auto; right: 15.52%; width: auto; font-size: 100px; color: #D7301A; font-family: 'Gilroy'; line-height: 1; } .culture-swiper .swiper-pagination * { font-family: 'Gilroy'; font-size: 100px; line-height: 1; color: #D7301A; } .duty { padding: 10px 0 92px; background: url(../img/duty-bg.png) no-repeat bottom; background-size: cover; } .duty .title h3 { color: #D7301A; } .duty .title p { line-height: 1.7; } .duty-swiper { width: 59.1%; flex-shrink: 0; padding-bottom: 55px; } .duty-swiper .swiper-slide { transform: scale(0.66); transition: 300ms; } .duty-swiper .swiper-slide .img { position: relative; padding-bottom: 138%; border-radius: 12px; overflow: hidden; } .duty-swiper .swiper-slide .img img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; } .duty-swiper .bot { margin-top: 20px; } .duty-swiper a { display: inline-block; width: 37.94%; height: 37px; line-height: 37px; text-align: center; border-radius: 19px; } .duty-swiper .online { background-color: #fff; color: #C7C7C7; margin-right: 5.3%; } .duty-swiper .download { color: #fff; background-color: #D7301A; } .duty-swiper .swiper-slide-active { transform: scale(1); } .duty-swiper .swiper-pagination-bullet { width: 13px; height: 13px; background: #FFFFFF; opacity: 0.68; } .duty-swiper .swiper-pagination-bullet-active { background-color: #D7301A; opacity: 1; } .garden { padding-bottom: 200px; } .mass-tab { margin-bottom: 82px; } .mass-tab li { padding: 6px 43px; border: 1px solid #848484; border-radius: 50px; color: #848484; font-size: 18px; cursor: pointer; } .mass-tab li:not(:last-of-type) { margin-right: 29px; } .mass-tab li.active { background-color: #D7301A; border-color: #D7301A; color: #fff; } .mass-bot { background-color: #F9F9F9; } .mass-bot img { position: relative; width: auto; max-width: 100% !important; height: auto !important; margin: 0 auto; z-index: 4; } .mass-wrap { display: none; } .mass-wrap .party { position: relative; z-index: 2; } .mass-wrap .party-swiper { margin-top: 52px; } .mass-wrap .know-more { color: #D7301A; margin-top: 24px; } .mass-wrap .know-more .icon { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #D7301A; margin-left: 11px; } .mass-wrap .know-more .icon i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #fff; } .mass-wrap .know-more:hover { letter-spacing: 2px; } .mass-wrap .bot-line .bot-line1 { z-index: 3; } .mass-wrap .bot-line .bot-line2 { z-index: 2; } .mass-wrap .bot-line .bot-line3 { z-index: 1; } .mass-wrap .bot-line .cir { z-index: 1; } .mass-wrap.selected { display: block; } .gh .party { margin-bottom: 109px; } .gh .mass-bot { padding: 68px 0 110px; } .tw .party { margin-bottom: 144px; } .tw .mass-bot { padding: 102px 0 171px; } .support-banner .txt p { margin-bottom: 30px; } .commit .commit-items { width: 67.21%; } .commit .commit-item .top { position: relative; height: 92px; line-height: 92px; font-size: 20px; border-bottom: 1px solid #E6E6E6; cursor: pointer; } .commit .commit-item .top .num { font-family: 'Gilroy'; margin-right: 15px; } .commit .commit-item .top .icon { position: absolute; right: 3.15%; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; border-radius: 50%; background: #C7C7C7; } .commit .commit-item .top .icon::before, .commit .commit-item .top .icon::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .commit .commit-item .top .icon::before { width: 12px; height: 2px; } .commit .commit-item .top .icon::after { width: 2px; height: 12px; } .commit .commit-item .info { display: none; padding: 12px 8.63% 60px 6.86%; border-bottom: 1px solid #E6E6E6; } .commit .commit-item .info * { line-height: 2.5; font-size: 16px; color: #999; } .commit .commit-item .top.active { padding-left: 3.15%; background-color: #D7301A; border-bottom-color: #D7301A; } .commit .commit-item .top.active * { color: #fff; } .commit .commit-item .top.active .icon { background-color: #fff; } .commit .commit-item .top.active .icon::before, .commit .commit-item .top.active .icon::after { background-color: #D7301A; } .commit .commit-item .top.active .icon::after { transform: translate(-50%, -50%) rotate(90deg); } .network { position: relative; padding: 138px 0 126px; background-color: #F7F7F7; overflow: hidden; } .network .market .mark-tit { position: relative; display: inline-block; padding-top: 19px; font-size: 24px; font-weight: normal; border-top: 2px solid #D7301A; color: #D7301A; margin-bottom: 47px; } .network .market .p { color: #999; } .network .market .p .icon { width: 37px; height: 37px; border-radius: 50%; background: #999999; margin-right: 13px; } .network .market .p i { font-size: 18px; color: #fff; } .network .market .p1 { font-family: 'Gilroy'; font-size: 29px; margin-bottom: 17px; } .network .market .p2 { font-size: 18px; } .network .netB { margin-top: 80px; } .network .net-item { position: relative; width: 22.825%; height: 197px; background-color: #fff; padding: 27px 1.7% 5px; margin-bottom: 38px; margin-right: 2.9%; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .network .net-item::before { content: ''; position: absolute; top: 0; left: 7.7%; width: 35px; height: 4px; background-color: #999999; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .network .net-item:nth-of-type(4n) { margin-right: 0; } .network .net-item .name { font-size: 20px; margin-bottom: 20px; font-weight: 200; } .network .net-item .intro { font-size: 16px; color: #999999; } .network .net-item .intro * { font-size: 16px; color: #999999; font-weight: 200; } .network .net-item:hover { box-shadow: 0px 0px 12px 1px rgba(215, 48, 26, 0.39); } .network .net-item:hover::before { left: 0; width: 100%; background-color: #D7301A; } .network .loading { width: 186px; height: 48px; border-radius: 28px; border: 1px solid #D7301A; box-sizing: border-box; font-size: 16px; text-align: center; color: #D7301A; margin: 84px auto 0; cursor: pointer; } .network .loading p { line-height: 48px; } .network .loading:hover { background-color: #D7301A; color: #fff; } .afterSale .filter { margin-top: 40px; margin-bottom: 63px; } .afterSale .filter .select { position: relative; width: 15.02%; height: 42px; border: 1px solid #C7C7C7; border-radius: 50px; margin-right: 23px; } .afterSale .filter .select .palceholder { position: relative; display: block; line-height: 42px; color: #848484; padding: 0 10.37%; cursor: pointer; z-index: 1; } .afterSale .filter .select .palceholder::after { content: '\e600'; position: absolute; right: 10.37%; top: 50%; transform: translateY(-50%); font-family: 'iconfont' !important; font-size: 12px; color: #333; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 10; } .afterSale .filter .select .select-ul { display: none; position: absolute; overflow: hidden; width: 100%; background: #fff; border: 1px solid #eee; top: 100%; left: 0; max-height: 200px; overflow-y: auto; list-style: none; margin: 5px 0 0 0; padding: 0; z-index: 100; } .afterSale .filter .select .select-ul::-webkit-scrollbar { width: 4px; background-color: #eeeeee; } .afterSale .filter .select .select-ul::-webkit-scrollbar-thumb { width: 0.27rem; background-color: #D7301A; } .afterSale .filter .select .select-ul.is-open { display: block !important; } .afterSale .filter .select .dropProvLi, .afterSale .filter .select .dropCityLi { display: block; text-align: left; padding: 0.8em 1em 0.8em 1em; color: #333; cursor: pointer; } .afterSale .filter .select .dropProvLi:hover, .afterSale .filter .select .dropCityLi:hover { background-color: #D7301A; color: #fff; } .afterSale .filter .select.is-open .select-ul { display: block !important; } .afterSale .filter .search-btn { width: 5.8%; height: 42px; color: #fff; line-height: 42px; border-radius: 50px; font-size: 16px; background-color: #D7301A; cursor: pointer; } .afterSale .after-ul .li-title { background-color: #D7301A; } .afterSale .after-ul .li-title p { color: #fff; } .afterSale .after-ul .li-content { position: relative; overflow: hidden; } .afterSale .after-ul .li-content::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0; background-color: #FBE6E9; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 1; } .afterSale .after-ul .li-content:nth-of-type(odd) { background-color: #F7F7F7; } .afterSale .after-ul .li-content:nth-of-type(even) { background-color: #fff; } .afterSale .after-ul .li-content p { color: #848484; } .afterSale .after-ul .li-content .after-ul2 { position: relative; z-index: 2; } .afterSale .after-ul .li-content:hover::after { top: 0; bottom: auto; height: 100%; } .afterSale .after-ul .after-li2 { flex: 1; height: 92px; line-height: 92px; } .afterSale .after-ul .after-li2:first-of-type { padding-left: 3.99%; } .afterSale .after-ul .after-li2 p { font-size: 16px; } .afterSale .loading { width: 153px; height: 42px; background: #D7301A; border-radius: 50px; margin: 75px auto 0; cursor: pointer; } .afterSale .loading p { color: #fff; font-size: 16px; line-height: 42px; } .cjwt { background: #F7F7F7 url(../img/cjwt-bg.png) no-repeat center; background-size: cover; padding: 108px 0 219px; background-attachment: fixed; } .cjwt .ctwt-box { padding-left: 8.3vw; } .cjwt-swiper .swiper-slide { width: auto; margin-right: 64px; } .cjwt-swiper .swiper-slide .pic-item { position: relative; } .cjwt-swiper .swiper-slide .img { position: relative; width: 270px; height: 270px; border-radius: 50%; overflow: hidden; } .cjwt-swiper .swiper-slide .img::before { content: ''; position: absolute; left: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(215, 48, 26, 0.86); opacity: 0; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .cjwt-swiper .swiper-slide .img img { height: 100%; object-fit: cover; } .cjwt-swiper .swiper-slide .hover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; z-index: 2; } .cjwt-swiper .swiper-slide .hover img { width: auto; margin: 0 auto; } .cjwt-swiper .swiper-slide .hover p { font-size: 18px; color: #fff; margin-top: 10px; } .cjwt-swiper .swiper-slide .cir { opacity: 0; } .cjwt-swiper .swiper-slide .cir .circle { position: absolute; width: 20px; height: 20px; background-color: #f9cbcb; border-radius: 100%; } .cjwt-swiper .swiper-slide .cir .circle::before { position: absolute; content: ''; left: auto; right: auto; top: auto; bottom: auto; width: 10px; height: 10px; background-color: #f9cbcb; border-radius: 100%; } .cjwt-swiper .swiper-slide .cir .cir1 { left: 4%; top: 0; } .cjwt-swiper .swiper-slide .cir .cir1::before { right: -200%; top: -100%; } .cjwt-swiper .swiper-slide .cir .cir2 { right: 4%; bottom: 0; } .cjwt-swiper .swiper-slide .cir .cir2::before { left: -200%; bottom: -100%; } .cjwt-swiper .swiper-slide > p { font-size: 18px; color: #848484; margin-top: 32px; } .cjwt-swiper .swiper-slide:hover .img::before { opacity: 1; } .cjwt-swiper .swiper-slide:hover .img .hover { opacity: 1; } .cjwt-swiper .swiper-slide:hover .cir { opacity: 1; } .manual { padding-top: 145px; padding-bottom: 173px; } .manual-swiper { border-bottom: 1px solid rgba(112, 112, 112, 0.2); margin-bottom: 82px; margin-top: 60px; } .manual-swiper .swiper-slide { position: relative; width: auto; font-size: 16px; color: #848484; padding: 0 26px 26px; cursor: pointer; } .manual-swiper .swiper-slide::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 3px; background: #D7301A; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .manual-swiper .swiper-slide:hover { color: #D7301A; } .manual-swiper .swiper-slide:hover::after { left: 0; width: 100%; } .manual-swiper .swiper-slide.active { color: #D7301A; } .manual-swiper .swiper-slide.active::after { left: 0; width: 100%; } .manual-items .dowmload { width: 31.86%; height: 61px; border-radius: 100px; background: #F9F9F9; margin-right: 2.21%; margin-bottom: 27px; padding: 0 2% 0 1.37%; } .manual-items .dowmload:nth-of-type(3n) { margin-right: 0; } .manual-items .dowmload p { position: relative; width: calc(100% - 30px); font-size: 16px; color: #999; padding-left: 3.91%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .manual-items .dowmload p::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #C7C7C7; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .manual-items .dowmload i { font-size: 25px; color: #666666; } .manual-items .dowmload:hover p { color: #D7301A; } .manual-items .dowmload:hover p::before { background-color: #D7301A; } .manual-items .dowmload:hover i { color: #D7301A; } .contact-banner { position: relative; height: 725px; overflow: hidden; } .contact-banner #map { height: 725px; transform: scale(1.1); animation: bannerScale 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } .contact-banner #map img { max-width: none; width: auto; text-align: center; } .contact-banner #map .mapName { margin: 0 0 5px 0; padding: 0.2em 0; font-size: 18px; font-weight: bold; color: #D7301A; } .contact-banner #map .mapInfo { margin: 0; line-height: 1.5; font-size: 14px; color: #666; } .contact-banner .BMap_mask { background: rgba(0, 0, 0, 0.3) url(https://api.map.baidu.com/images/blank.gif) !important; } .contact-banner .txt { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 2; } .contact-banner .txt * { color: #fff; line-height: 1.1; } .contact-banner .txt .p1 { font-size: 50px; margin-bottom: 19px; } .contact-banner .txt .p2 { font-size: 30px; } .contact-banner .txt .toGo { display: inline-block; width: 192px; height: 45px; line-height: 45px; background: #D7301A; border-radius: 25px; margin-top: 60px; font-size: 16px; } .contact-banner .txt .toGo i { font-size: 18px; color: #fff; margin-right: 16px; } .contact { padding-bottom: 213px; padding-top: 75px; } .contact .contact-infos { margin-bottom: 88px; } .contact .contact-info { position: relative; width: 23.38%; height: 444px; background-color: rgba(241, 241, 242, 0.5); border-radius: 12px; box-sizing: border-box; border: 1px solid transparent; } .contact .contact-info .icon { height: 38px; margin-bottom: 66px; } .contact .contact-info .icon i { font-size: 38px; color: #D7301A; } .contact .contact-info .name { line-height: 1; font-size: 18px; margin-bottom: 16px; } .contact .contact-info::after { content: ''; position: absolute; left: 50%; bottom: 18.24%; transform: translateX(-50%); width: 33px; height: 3px; background: #D7301A; } .contact .contact-info:hover { transform: translateY(-21px); border-color: #E6E6E6; background-color: #fff; } .contact .place .info { font-weight: bold; font-size: 18px; } .contact .fax .info { font-family: 'Gilroy'; font-size: 32px; } .contact .email .info { font-family: 'Gilroy'; font-size: 22px; } .contact .wxwb .con-info-item:first-of-type { margin-right: 8.8%; } .contact .wxwb .img { margin-bottom: 13px; } .contact .wxwb p { font-size: 16px; } .contact-bot .img { width: 41.21%; border-radius: 12px 0 0 12px; overflow: hidden; } .contact-bot .img img { height: 100%; object-fit: cover; } .contact-bot .form { width: 58.79%; border: 1px solid #E1E1E1; padding: 72px 4.93% 116px; border-radius: 0 12px 12px 0; } .contact-bot h4 { font-size: 30px; font-weight: normal; line-height: 1; margin-bottom: 17px; } .contact-bot p { font-size: 18px; line-height: 1; color: #666; } .contact-bot .form-wrapper { margin-top: 60px; } .contact-bot .form-item { width: 46.88%; margin-right: 6.24%; margin-bottom: 28px; } .contact-bot .form-item:nth-of-type(2n) { margin-right: 0; } .contact-bot .form-item label { display: block; margin-bottom: 10px; } .contact-bot .form-item label i { color: #E66F37; margin-right: 4px; } .contact-bot .form-item input { width: 100%; height: 43px; border: 1px solid #E1E1E1; border-radius: 12px; color: #C2C2C2; padding: 0 2.72%; } .contact-bot .form-item input::placeholder { color: #C2C2C2; } .contact-bot .form-item input::-webkit-input-placeholder { color: #C2C2C2; } .contact-bot .form-item input:-moz-placeholder { color: #C2C2C2; opacity: 1; } .contact-bot .form-item input::-moz-placeholder { color: #C2C2C2; opacity: 1; } .contact-bot .form-item input:-ms-input-placeholder { color: #C2C2C2; } .contact-bot .textarea { width: 100%; margin-right: 0; } .contact-bot .textarea textarea { width: 100%; height: 120px; resize: none; border-radius: 12px; border: 1px solid #E1E1E1; padding: 13px 2.72%; box-sizing: border-box; color: #C2C2C2; } .contact-bot .textarea textarea::placeholder { color: #C2C2C2; } .contact-bot .textarea textarea::-webkit-input-placeholder { color: #C2C2C2; } .contact-bot .textarea textarea:-moz-placeholder { color: #C2C2C2; opacity: 1; } .contact-bot .textarea textarea::-moz-placeholder { color: #C2C2C2; opacity: 1; } .contact-bot .textarea textarea:-ms-input-placeholder { color: #C2C2C2; } .contact-bot .btn { width: 100%; height: 48px; line-height: 48px; background-color: #D7301A; font-size: 16px; color: #fff; border-radius: 12px; cursor: pointer; outline: none; border: 0; } .tt-just { text-align: justify; }