.virtual-scroll { position: fixed; width: 17px; height: 100vh; right: 0; top: 0; z-index: 35; background-color: rgba(0, 0, 0, 0); opacity: 0; transition: opacity 0.25s; user-select: none; display: none; } .virtual-scroll:hover { opacity: 1; background-color: #eee; } .virtual-scroll:hover .virtual-scroll-thumb { width: 13px; border-radius: 0px; } .virtual-scroll:before { content: ""; position: absolute; width: 100vw; right: 0; height: 100vh; top: 0; display: none; z-index: -1; } .virtual-scroll.dblclick:hover:after { content: "鍙屽嚮榪斿洖欏墮儴"; position: absolute; line-height: 40px; padding: 0 30px; background-color: rgba(0, 0, 0, 0.8); color: #fff; right: 25px; bottom: 50px; white-space: nowrap; pointer-events: none; font-size: 14px; } .virtual-scroll.active { opacity: 1; } .virtual-scroll.mousedown:before { display: block; } .virtual-scroll .virtual-scroll-thumb { position: absolute; width: 7px; height: 200px; background-color: #5BB53C; right: 2px; border-radius: 7px; top: 0; transition: background-color 0.25s; cursor: pointer; } .virtual-scroll .virtual-scroll-thumb:hover { background-color: rgba(91, 181, 60, 0.8); } .virtual-scroll .virtual-scroll-thumb:hover.active { background-color: rgba(91, 181, 60, 0.6); } .virtual-scroll .virtual-scroll-thumb.active { background-color: rgba(91, 181, 60, 0.6); } html, body { scrollbar-width: none; -webkit-tap-highlight-color: transparent; } ::-webkit-scrollbar { display: none; } * { padding: 0; margin: 0; box-sizing: border-box; } ul, li { list-style: none; } a, a:hover { color: inherit; text-decoration: inherit; } img { display: block; max-width: 100%; } /* CDN 鏈嶅姟浠呬緵騫沖彴浣撻獙鍜岃皟璇曚嬌鐢紝騫沖彴涓嶆壙璇烘湇鍔$殑紼沖畾鎬э紝浼佷笟瀹㈡埛闇涓嬭澆瀛椾綋鍖呰嚜琛屽彂甯冧嬌鐢ㄥ茍鍋氬ソ澶囦喚銆?*/ @font-face { font-family: "iconfont"; /* Project id 3861352 */ src: url("http://at.alicdn.com/t/c/font_3861352_eb39p5hwdof.woff2?t=1673520725569") format("woff2"), url("http://at.alicdn.com/t/c/font_3861352_eb39p5hwdof.woff?t=1673520725569") format("woff"), url("http://at.alicdn.com/t/c/font_3861352_eb39p5hwdof.ttf?t=1673520725569") format("truetype"); } @font-face { font-family: "DINPro"; /* Project id 3775274 */ src: url("../fonts/DINPro/webfont.woff2") format("woff2"), url("../fonts/DINPro/webfont.woff") format("woff"), url("../fonts/DINPro/webfont.ttf") format("truetype"); } @font-face { font-family: "source-serif"; /* Project id 3775274 */ src: url("../fonts/source-serif/SourceSerif4-Regular.ttf.woff2") format("woff2"), url("../fonts/source-serif/SourceSerif4-Regular.ttf.woff") format("woff"), url("../fonts/source-serif/SourceSerif4-Regular.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-weight: normal; /* Project id 3775274 */ src: url("../fonts/Inter/Inter-Regular.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-weight: bold; /* Project id 3775274 */ src: url("../fonts/Inter/Inter-SemiBold.ttf") format("truetype"); } .iconfont { font-family: "iconfont"; } html { font-size: calc(100vw / 19.2); } body { font-size: 0.16rem; color: #3e3e3e; -webkit-tap-highlight-color: rgba(18, 18, 18, 0); font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif; background-image: linear-gradient(180deg, #f9fdff 0%, #f9fdff 13%); } @media only screen and (max-width: 640px) { body { font-size: 12px; } } .common-padding-x { padding-left: 1.60rem; padding-right: 1.60rem; } @media only screen and (max-width: 1280px) { .common-padding-x { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 640px) { .common-padding-x { padding-left: 20px; padding-right: 20px; } } .common-padding-y { padding-top: 1.40rem; padding-bottom: 1.40rem; } @media only screen and (max-width: 640px) { .common-padding-y { padding-top: 30px; padding-bottom: 30px; } } .common-l { left: 1.60rem; } @media only screen and (max-width: 640px) { .common-l { left: 20px; } } .common-padding-t { padding-top: 1.40rem; } @media only screen and (max-width: 640px) { .common-padding-t { padding-top: 30px; } } .common-padding-b { padding-bottom: 1.40rem; } @media only screen and (max-width: 640px) { .common-padding-b { padding-bottom: 30px; } } .common-padding-l { padding-left: 1.60rem; } @media only screen and (max-width: 640px) { .common-padding-l { padding-left: 20px; } } .common-padding-r { padding-right: 1.60rem; } @media only screen and (max-width: 640px) { .common-padding-r { padding-right: 20px; } } .slick-dotted.slick-slider { margin-bottom: 0; } .common-title { position: relative; } .common-title .cn { font-size: 0.42rem; font-weight: bold; line-height: 1.5; letter-spacing: 2px; } @media only screen and (max-width: 1024px) { .common-title .cn { font-size: 20px; letter-spacing: 0; } } @media only screen and (max-width: 640px) { .common-title .cn { font-size: 18px; } } .common-title .en { font-size: 0.36rem; line-height: 1.3; color: rgba(62, 62, 62, 0.1); text-transform: uppercase; font-family: "source-serif"; position: absolute; left: 0; bottom: 0.34rem; white-space: nowrap; } @media only screen and (max-width: 1024px) { .common-title .en { font-size: 12px; bottom: 12px; } } .common-title.small .en { font-size: 0.16rem; bottom: 0.30rem; } @media only screen and (max-width: 640px) { .common-title.small .en { display: none; } } .common-title.small .cn { font-size: 0.26rem; } @media only screen and (max-width: 640px) { .common-title.small .cn { font-size: 14px; } } .common-title.white { color: #fff; } .common-title.white .en { color: rgba(255, 255, 255, 0.4); } .common-title.center { text-align: center; } .common-title.center .en { width: 100%; } .common-intro { background-image: url("../img/intro-bg.jpg"); background-size: cover; background-position: center; } @media only screen and (max-width: 768px) { .common-intro { padding-right: 1.40rem; } } @media only screen and (max-width: 640px) { .common-intro { padding-right: 20px; } } .common-intro .flex { display: flex; align-items: flex-end; justify-content: space-between; } @media only screen and (max-width: 768px) { .common-intro .flex { display: block; } } .common-intro .flex .left { width: 6.40rem; } @media only screen and (max-width: 768px) { .common-intro .flex .left { width: auto; text-align: center; } } .common-intro .flex .left .lists { display: flex; font-size: 0.20rem; margin-top: 0.40rem; } @media only screen and (max-width: 640px) { .common-intro .flex .left .lists .item { display: flex; align-items: baseline; } } @media only screen and (max-width: 768px) { .common-intro .flex .left .lists { justify-content: center; } } @media only screen and (max-width: 640px) { .common-intro .flex .left .lists { flex-direction: column; align-items: center; margin-top: 20px; font-size: 12px; } } .common-intro .flex .left .lists .item + .item { margin-left: 0.90rem; } @media only screen and (max-width: 640px) { .common-intro .flex .left .lists .item + .item { margin-left: 0; margin-top: 10px; } } .common-intro .flex .left .lists .n { margin-top: 0.40rem; } @media only screen and (max-width: 640px) { .common-intro .flex .left .lists .n { margin-top: 0; margin-left: 4px; } } .common-intro .flex .left .lists .n span { font-size: 1.00rem; line-height: 1; color: #1678ff; font-weight: 600; letter-spacing: 3px; } @media only screen and (max-width: 640px) { .common-intro .flex .left .lists .n span { font-size: 26px; } } .common-intro .flex .left .content { font-size: 0.20rem; line-height: 2; text-align: justify; margin-top: 0.90rem; } @media only screen and (max-width: 640px) { .common-intro .flex .left .content { font-size: 12px; margin-top: 20px; } } .common-intro .flex .left .more-btn { width: 2.00rem; height: 0.56rem; background: rgba(255, 255, 255, 0.5); border: 2px solid #ffffff; box-shadow: 0 0 20px 0 rgba(214, 214, 214, 0.5); border-radius: 28px; display: block; font-family: "source-serif"; font-size: 0.24rem; line-height: 0.52rem; text-align: center; text-transform: uppercase; margin-top: 1.20rem; } @media only screen and (max-width: 768px) { .common-intro .flex .left .more-btn { display: block; width: 150px; height: 40px; border-radius: 40px; line-height: 38px; font-size: 16px; margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 1024px) { .common-intro .flex .left .more-btn { width: 120px; height: 36px; line-height: 34px; font-size: 14px; } } .common-intro .flex .right { width: 50%; } @media only screen and (max-width: 768px) { .common-intro .flex .right { display: none; } } .flex-c-b { display: flex; align-items: center; justify-content: space-between; } .flex-c-b .more-btn { width: 2.00rem; line-height: 0.54rem; border: 1px solid rgba(151, 151, 151, 0.5); border-radius: 28px; font-size: 0.24rem; text-align: center; color: rgba(62, 62, 62, 0.9); font-family: "source-serif"; text-transform: uppercase; } @media only screen and (max-width: 1024px) { .flex-c-b .more-btn { width: 90px; line-height: 30px; font-size: 13px; } } .flex-t-b { display: flex; align-items: flex-start; justify-content: space-between; } .bg-cover { background-position: center; background-size: cover; } .header-box { height: 0.92rem; } @media only screen and (max-width: 640px) { .header-box { height: 60px; } } .header-box .menu-btn { width: 32px; height: 36px; position: relative; display: none; } @media only screen and (max-width: 1280px) { .header-box .menu-btn { display: block; } } .header-box .menu-btn span { display: block; height: 3px; background-color: #1678ff; position: absolute; width: 100%; transition: all 0.3s; } .header-box .menu-btn span:nth-child(1) { left: 0; top: 8px; } .header-box .menu-btn span:nth-child(2) { left: 0; top: 17px; } .header-box .menu-btn span:nth-child(3) { left: 0; top: 26px; } .header-box .menu-btn.active span:nth-child(1) { top: 17px; transform: rotate(45deg); } .header-box .menu-btn.active span:nth-child(2) { transform: scaleX(0); } .header-box .menu-btn.active span:nth-child(3) { top: 17px; transform: rotate(-45deg); } .header-box .menu-btn.active + .right { opacity: 1; visibility: visible; } .header-box .header { position: fixed; width: 100%; left: 0; top: 0; z-index: 20; background-color: #fff; display: flex; align-items: center; justify-content: space-between; height: 0.92rem; border-bottom: 1px solid #eee; } @media only screen and (max-width: 640px) { .header-box .header { height: 60px; } } @media screen and (min-width: 1281px) { .header-box .header:hover .cover { display: block; } .header-box .header:hover .right nav .item ul { display: block; } } .header-box .header .cover { position: absolute; width: 100%; height: 270px; background-color: #fff; top: 0.92rem; left: 0; display: none; } @media only screen and (max-width: 1280px) { .header-box .header .cover { display: none; opacity: 0; visibility: hidden; } } .header-box .header .cover .g { position: absolute; width: 3.80rem; height: 2.80rem; content: ""; left: 1.60rem; top: 0; background-image: url(../img/g-b.svg); background-size: cover; opacity: 0.1; background-position: left -0.30rem; background-repeat: no-repeat; pointer-events: none; } .header-box .header .logo { width: 2.00rem; } @media only screen and (max-width: 640px) { .header-box .header .logo { width: 100px; } } .header-box .header .right { display: flex; align-items: center; } @media only screen and (max-width: 1280px) { .header-box .header .right { position: absolute; width: 100%; height: 100vh; left: 0; top: 0; flex-direction: column; align-items: center; background-color: #fff; z-index: -1; padding-top: 100px; opacity: 0; visibility: hidden; transition: all 0.3s; } } .header-box .header .right nav { display: flex; align-items: center; } @media only screen and (max-width: 1280px) { .header-box .header .right nav { flex-direction: column; } } .header-box .header .right nav .item { position: relative; padding: 0.34rem 0.24rem; } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item { padding: 0; text-align: center; margin-bottom: 30px; } } @media only screen and (max-width: 1024px) { .header-box .header .right nav .item { margin-bottom: 20px; } } .header-box .header .right nav .item.active { background-color: #5bb53c; color: #fff; } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item.active { background-color: unset; color: #5bb53c; } } .header-box .header .right nav .item.active > a { pointer-events: none; } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item.active > a { font-weight: bold; } } .header-box .header .right nav .item > a { font-size: 18px; font-weight: bold; line-height: 24px; } @media only screen and (max-width: 1746px) { .header-box .header .right nav .item > a { font-size: 16px; } } @media only screen and (max-width: 1536px) { .header-box .header .right nav .item > a { font-size: 15px; } } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item > a { font-size: 18px; } } @media only screen and (max-width: 640px) { .header-box .header .right nav .item > a { font-size: 15px; } } @media (min-width: 1280px) { .header-box .header .right nav .item > a:hover { color: #5bb53c; text-decoration: underline; } } .header-box .header .right nav .item ul { position: absolute; left: 0; top: 0.92rem; z-index: 3; display: none; padding-top: 0.24rem; width: 100%; font-size: 14px; text-align: center; color: #333; } @media only screen and (max-width: 1746px) { .header-box .header .right nav .item ul { font-size: 13px; } } @media only screen and (max-width: 1536px) { .header-box .header .right nav .item ul { font-size: 12px; } } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item ul { position: relative; top: 0; padding-top: 0; display: flex; font-size: 12px; margin-top: 10px; display: none; } } .header-box .header .right nav .item ul li + li { margin-top: 0.24rem; } @media only screen and (max-width: 1280px) { .header-box .header .right nav .item ul li + li { margin-top: 0; margin-left: 10px; } } .header-box .header .right nav .item ul li.active { color: #5bb53c; } @media (min-width: 1280px) { .header-box .header .right nav .item ul a:hover { color: #5bb53c; text-decoration: underline; } } .header-box .header .right .icons { display: flex; margin-left: 0.60rem; align-items: center; } @media only screen and (max-width: 1280px) { .header-box .header .right .icons { margin-left: 0; margin-top: 30px; } } .header-box .header .right .icons a { width: 24px; height: 24px; } @media only screen and (max-width: 1280px) { .header-box .header .right .icons a { width: 20px; height: 20px; } } .header-box .header .right .icons a + a { margin-left: 0.30rem; } @media only screen and (max-width: 1280px) { .header-box .header .right .icons a + a { margin-left: 20px; } } .sliblings { margin-top: 0.50rem; } .page-banner { position: relative; height: 6.40rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } @media only screen and (max-width: 640px) { .page-banner { height: 150px; } } .page-banner .en { font-family: "source-serif"; text-transform: uppercase; font-size: 0.40rem; line-height: 1; letter-spacing: 3px; } @media only screen and (max-width: 640px) { .page-banner .en { font-size: 12px; } } .page-banner .cn { font-size: 0.50rem; line-height: 1.2; margin-top: 0.10rem; font-weight: bold; } @media only screen and (max-width: 640px) { .page-banner .cn { font-size: 16px; margin-top: 6px; } } .page-banner .line { width: 0.80rem; height: 4px; background-color: #fff; margin: 0 auto; margin-top: 0.34rem; } @media only screen and (max-width: 640px) { .page-banner .line { height: 2px; margin-top: 10px; } } .bread { padding-top: 0.27rem; padding-bottom: 0.27rem; display: flex; align-items: center; font-size: 14px; background-color: #fff; } @media only screen and (max-width: 1024px) { .bread { font-size: 13px; } } @media only screen and (max-width: 640px) { .bread { font-size: 11px; padding: 20px; white-space: nowrap; } } .bread .icon { width: 22px; margin-right: 14px; } @media only screen and (max-width: 1024px) { .bread .icon { width: 16px; margin-right: 10px; } } @media only screen and (max-width: 640px) { .bread .icon { width: 12px; margin-right: 4px; } } .bread .item { display: flex; align-items: center; } .bread .item img { width: 12px; margin-left: 4px; } .bread .item a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bread .item p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bread .item + .item { margin-left: 4px; } .bread .item:last-child { color: #207efe; } @media only screen and (max-width: 640px) { .bread .item:last-child { max-width: 34vw; } } .page-index .banner { position: relative; height: 6.40rem; overflow: hidden; } @media only screen and (max-width: 640px) { .page-index .banner { height: 250px; } } .page-index .banner .item { position: relative; } .page-index .banner .item img { width: 100%; } @media only screen and (max-width: 640px) { .page-index .banner .item img { height: 150px; object-fit: cover; object-position: left center; display: none; } } .page-index .banner .item .phone { display: none; } @media only screen and (max-width: 640px) { .page-index .banner .item .phone { height: 250px; display: block; } } .page-index .banner .item .btn { position: absolute; left: 1.60rem; bottom: 2.30rem; display: block; z-index: 2; width: 1.80rem; line-height: 0.50rem; border-radius: 0.25rem; text-align: center; background-color: #fff; color: #169bff; font-size: 0.20rem; font-weight: 500; } @media only screen and (max-width: 640px) { .page-index .banner .item .btn { line-height: 28px; font-size: 12px; width: auto; padding: 0 12px; border-radius: 28px; bottom: 50px; left: 20px; } } @media (min-width: 1280px) { .page-index .banner .item .btn:hover { background-color: #169bff; color: #fff; } } .page-index .banner .dots { position: absolute; left: 1.60rem; bottom: 0.60rem; z-index: 3; } @media only screen and (max-width: 640px) { .page-index .banner .dots { left: 20px; bottom: 20px; } } .page-index .banner .dots .slick-dots { position: relative; left: auto; bottom: auto; display: flex; } .page-index .banner .dots .slick-dots li { width: 0.70rem; height: 4px; border-radius: 2px; margin: 0; display: block; background-color: #fff; opacity: 0.4; } @media only screen and (max-width: 640px) { .page-index .banner .dots .slick-dots li { width: 30px; } } .page-index .banner .dots .slick-dots li.slick-active, .page-index .banner .dots .slick-dots li:hover { opacity: 1; } .page-index .banner .dots .slick-dots li button { width: 100%; height: 100%; opacity: 0; } .page-index .banner .dots .slick-dots li + li { margin-left: 0.20rem; } .page-index .news { background-image: url(../img/news-bg.jpg); } .page-index .news .content-box { margin-top: 0.80rem; } @media only screen and (max-width: 1024px) { .page-index .news .content-box { display: block; } } .page-index .news .content-box .left { width: 7.60rem; display: block; position: relative; } @media only screen and (max-width: 1280px) { .page-index .news .content-box .left { width: 8.30rem; } } @media only screen and (max-width: 1024px) { .page-index .news .content-box .left { width: 100%; } } .page-index .news .content-box .left .img-box { border-top-right-radius: 1.46rem; overflow: hidden; position: relative; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .left .img-box { height: 150px; border-top-right-radius: 0; border-radius: 15px; } } @media only screen and (max-width: 640px) { .page-index .news .content-box .left .img-box { height: 130px; border-top-right-radius: 0; border-radius: 10px; } } .page-index .news .content-box .left .img-box::before { content: ""; left: 0; bottom: 0; width: 100%; height: 100%; position: absolute; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); } .page-index .news .content-box .left .text { position: absolute; left: 0; width: 100%; bottom: 0; padding: 0.20rem 0.30rem; color: #fff; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .left .text { padding: 20px; } } @media only screen and (max-width: 640px) { .page-index .news .content-box .left .text { padding: 15px; } } .page-index .news .content-box .left .text h4 { font-size: 0.20rem; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .left .text h4 { font-size: 16px; } } @media only screen and (max-width: 640px) { .page-index .news .content-box .left .text h4 { font-size: 14px; } } .page-index .news .content-box .left .text p { font-size: 14px; opacity: 0.8; margin-top: 0.20rem; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .left .text p { font-size: 12px; margin-top: 8px; } } .page-index .news .content-box .lists { width: 7.20rem; } @media only screen and (max-width: 1280px) { .page-index .news .content-box .lists { width: 8.00rem; } } @media only screen and (max-width: 1024px) { .page-index .news .content-box .lists { width: 100%; margin-top: 20px; } } .page-index .news .content-box .lists .item { display: block; } .page-index .news .content-box .lists .item h4 { font-size: 0.20rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .lists .item h4 { font-size: 0.24rem; } } @media only screen and (max-width: 1024px) { .page-index .news .content-box .lists .item h4 { font-size: 16px; } } @media only screen and (max-width: 640px) { .page-index .news .content-box .lists .item h4 { font-size: 14px; } } .page-index .news .content-box .lists .item .t { font-size: 14px; color: #666; margin-top: 0.04rem; } @media only screen and (max-width: 1536px) { .page-index .news .content-box .lists .item .t { font-size: 12px; margin-top: 0.10rem; } } .page-index .news .content-box .lists .item .d { font-size: 14px; line-height: 1.8; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 0.14rem; } @media only screen and (max-width: 1536px) { .page-index .news .content-box .lists .item .d { font-size: 12px; margin-top: 0.10rem; } } .page-index .news .content-box .lists .item .more-btn { width: 1.00rem; line-height: 26px; border: 1px solid rgba(151, 151, 151, 0.5); border-radius: 28px; font-size: 14px; text-align: center; color: rgba(62, 62, 62, 0.7); font-family: "source-serif"; text-transform: uppercase; display: block; margin-top: 0.14rem; } @media only screen and (max-width: 1024px) { .page-index .news .content-box .lists .item .more-btn { display: none; } } .page-index .news .content-box .lists .item + .item { margin-top: 0.58rem; } @media only screen and (max-width: 1746px) { .page-index .news .content-box .lists .item + .item { margin-top: 0.40rem; } } @media only screen and (max-width: 1024px) { .page-index .news .content-box .lists .item + .item { margin-top: 0.50rem; } } @media only screen and (max-width: 640px) { .page-index .news .content-box .lists .item + .item { margin-top: 20px; } } .page-index .products { background-color: #f9fdff; } .page-index .products .navs { margin-top: 0.80rem; display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 640px) { .page-index .products .navs { margin-top: 30px; overflow-x: auto; padding: 4px 0; width: fit-content; } } .page-index .products .navs .item.active .box { background-image: linear-gradient(to bottom, #c1e6fe, #fff 50%); background-color: #fff; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); opacity: 1; } @media only screen and (max-width: 640px) { .page-index .products .navs .item.active .box { background: #fff; } } .page-index .products .navs .item.active .box::before { content: ""; position: absolute; bottom: 0; height: 2px; background-color: #1678ff; width: 1.60rem; left: 50%; transform: translateX(-50%); z-index: 2; } .page-index .products .navs .item.active .box::after { content: ""; position: absolute; width: calc(100% - 14px); height: calc(100% - 14px); left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #1678ff; border-radius: 0.80rem; opacity: 0.1; } @media only screen and (max-width: 640px) { .page-index .products .navs .item.active .box::after { display: none; } } .page-index .products .navs .box { text-align: center; padding: 0.30rem; width: 4.00rem; cursor: pointer; border-radius: 0.90rem; opacity: 0.7; position: relative; } .page-index .products .navs .box * { position: relative; z-index: 2; } @media only screen and (max-width: 1746px) { .page-index .products .navs .box { width: 4.60rem; } } @media only screen and (max-width: 640px) { .page-index .products .navs .box { width: auto; display: flex; align-items: center; padding: 6px 12px; white-space: nowrap; flex-shrink: 0; } } .page-index .products .navs .box .g { position: absolute; width: 1.50rem; height: 1.00rem; content: ""; right: 0; top: 0; background-image: url(../img/g-w.svg); background-size: cover; opacity: 0.6; background-position: left bottom; background-repeat: no-repeat; pointer-events: none; z-index: 1; } @media only screen and (max-width: 640px) { .page-index .products .navs .box .g { display: none; } } .page-index .products .navs .box img { width: 0.28rem; margin: 0 auto 0.10rem; position: relative; } @media only screen and (max-width: 640px) { .page-index .products .navs .box img { width: 14px; height: 14px; margin-right: 4px; } } .page-index .products .navs .box .t { font-size: 0.24rem; letter-spacing: 1px; line-height: 1.5; font-weight: bold; color: #000; position: relative; z-index: 2; } @media only screen and (max-width: 640px) { .page-index .products .navs .box .t { font-size: 12px; } } .page-index .products .navs .box .e { font-size: 14px; text-transform: uppercase; font-family: "source-serif"; letter-spacing: 1px; } .page-index .products .navs .item + .item { margin-left: 0.40rem; } @media only screen and (max-width: 640px) { .page-index .products .navs .item + .item { margin-left: 0; } } .page-index .products .slick-box { position: relative; margin-top: 0.90rem; } .page-index .products .slick-box .slick-list { max-height: 5.00rem; } @media only screen and (max-width: 640px) { .page-index .products .slick-box .slick-list { max-height: 250px; } } .page-index .products .slick-box .arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; margin-top: -0.40rem; } .page-index .products .slick-box .arrows .ctrl-prev, .page-index .products .slick-box .arrows .ctrl-next { position: relative; width: 0.60rem; height: 0.60rem; background-image: linear-gradient(-21deg, #ffffff 0%, #169bff 94%); border: 2px solid #ffffff; box-shadow: 0 0 20px 0 rgba(214, 214, 214, 0.5); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: -1.00rem; opacity: 0.7; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-index .products .slick-box .arrows .ctrl-prev, .page-index .products .slick-box .arrows .ctrl-next { width: 40px; height: 40px; } } @media (min-width: 1280px) { .page-index .products .slick-box .arrows .ctrl-prev:hover, .page-index .products .slick-box .arrows .ctrl-next:hover { opacity: 1; } } .page-index .products .slick-box .arrows .ctrl-prev img, .page-index .products .slick-box .arrows .ctrl-next img { width: 0.30rem; } .page-index .products .slick-box .arrows .ctrl-next { margin-left: auto; margin-right: -1.00rem; } .page-index .products .slick-box .slick-list { padding: 0.20rem 0; } .page-index .products .slick-box .item { background-image: linear-gradient(-21deg, #ffffff 56%, #169bff 100%); border: 2px solid #ffffff; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); border-radius: 0.30rem; margin: 0 0.25rem; padding: 0.60rem 0.20rem 0.40rem; text-align: center; } @media only screen and (max-width: 640px) { .page-index .products .slick-box .item { margin: 0 6px; padding: 20px 10px; } } .page-index .products .slick-box .item img { width: 2.50rem; height: 2.50rem; object-fit: contain; object-position: center; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-index .products .slick-box .item img { width: 100px; height: 100px; } } .page-index .products .slick-box .item .name { font-size: 0.20rem; color: #000; line-height: 1.2; letter-spacing: 0.06rem; margin-top: 0.30rem; } @media only screen and (max-width: 1024px) { .page-index .products .slick-box .item .name { letter-spacing: 0; font-size: 12px; line-height: 20px; height: 40px; overflow: hidden; margin-top: 6px; } } .page-index .products .slick-box .item .m { color: #4d92df; font-size: 0.18rem; text-transform: uppercase; margin-top: 0.20rem; font-family: "source-serif"; letter-spacing: 2px; } @media only screen and (max-width: 1024px) { .page-index .products .slick-box .item .m { display: none; } } .page-index .users .lists { margin-top: 0.80rem; display: flex; flex-wrap: wrap; } @media only screen and (max-width: 640px) { .page-index .users .lists { margin-top: 30px; } } .page-index .users .lists .item { width: calc((100% - 1.40rem) / 3); margin-right: 0.70rem; background-image: linear-gradient(-40deg, #ffffff 57%, rgba(77, 146, 223, 0.2) 100%); border: 2px solid #ffffff; box-shadow: 0 0 20px 0 rgba(214, 214, 214, 0.5); border-radius: 0.30rem; height: 3.10rem; display: flex; align-items: center; justify-content: center; white-space: pre-line; text-align: center; font-weight: 500; font-size: 0.22rem; line-height: 1.8; letter-spacing: 0.06rem; color: #111; position: relative; } @media only screen and (max-width: 1024px) { .page-index .users .lists .item { letter-spacing: 0; } } @media only screen and (max-width: 640px) { .page-index .users .lists .item { width: 100%; margin-right: 0; margin-bottom: 20px; height: auto; padding: 20px; font-size: 14px; } } .page-index .users .lists .item p { position: relative; z-index: 2; } .page-index .users .lists .item .g { position: absolute; width: 2.70rem; height: 2.80rem; content: ""; right: 0; top: 0; background-image: url(../img/g-w.svg); background-size: cover; opacity: 0.3; background-position: left -0.30rem; background-repeat: no-repeat; pointer-events: none; } @media (min-width: 1280px) { .page-index .users .lists .item:hover { color: #fff; background-image: linear-gradient(-55deg, #ffffff 0%, #0092ff 100%); } } .page-index .users .lists .item:nth-child(3n) { margin-right: 0; } .page-index .users .lists .item:nth-child(n + 4) { margin-top: 0.70rem; } @media only screen and (max-width: 640px) { .page-index .users .lists .item:nth-child(n + 4) { margin-top: 0; } } .about-nav .nav-tab .nav-tab-box { justify-content: space-between; } .about-nav .nav-tab .nav-tab-box .item + .item { margin-left: 0; } .page-about .nav-tab .nav-tab-box .item img { display: none; } .page-about .nav-tab .nav-tab-box .item + .item { margin-left: 0.60rem; } @media only screen and (max-width: 640px) { .page-about .nav-tab .nav-tab-box .item + .item { margin-left: 0; } } .page-product .nav-tab .nav-tab-box .item { height: auto; padding: 0.20rem 0; border-radius: 1.00rem; } @media only screen and (max-width: 640px) { .page-product .nav-tab .nav-tab-box .item { width: 100%; flex-direction: row; padding: 13px 0; height: auto; } } .nav-tab .nav-tab-box { padding-top: 0.50rem; padding-bottom: 0.50rem; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #eee; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 20px; justify-content: center; } } .nav-tab .nav-tab-box .item + .item { margin-left: 1.60rem; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item + .item { margin-left: 0; } } .nav-tab .nav-tab-box .item { width: 3.00rem; height: 0.90rem; background-color: #ffffff; border: 1px solid #ffffff; box-shadow: 0 0 0.20rem 0 rgba(232, 232, 232, 0.5); border-radius: 0.45rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; position: relative; } @media only screen and (max-width: 1746px) { .nav-tab .nav-tab-box .item { width: 3.60rem; } } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item { width: 100%; flex-direction: row; padding: 13px 0; height: auto; font-size: 10px; border-radius: 30px; } } .nav-tab .nav-tab-box .item .g { position: absolute; width: 0.80rem; height: 0.40rem; content: ""; right: 0; top: 0; background-image: url(../img/g-w.svg); background-size: cover; opacity: 0.6; background-position: left bottom; background-repeat: no-repeat; pointer-events: none; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item .g { display: none; } } .nav-tab .nav-tab-box .item img { width: 0.28rem; margin: 0 auto 0.15rem; position: relative; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item img { width: 12px; height: 12px; margin: 0; margin-right: 4px; } } .nav-tab .nav-tab-box .item.active { background-image: linear-gradient(to bottom, #c1e6fe, #fff 50%); color: #207efe; } .nav-tab .nav-tab-box .item.active::before { content: ""; position: absolute; bottom: 0; height: 2px; background-color: #1678ff; width: 1.60rem; left: 50%; transform: translateX(-50%); z-index: 2; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item.active::before { width: 50%; } } .nav-tab .nav-tab-box .item.active::after { content: ""; position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #1678ff; border-radius: 0.80rem; opacity: 0.1; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item.active::after { display: none; } } @media (min-width: 1280px) { .nav-tab .nav-tab-box .item:hover { color: #207efe; } .nav-tab .nav-tab-box .item:hover::before { content: ""; position: absolute; bottom: 0; height: 2px; background-color: #1678ff; width: 1.60rem; left: 50%; transform: translateX(-50%); z-index: 2; } } .nav-tab .nav-tab-box .item .en { font-family: "source-serif"; text-transform: uppercase; font-size: 14px; color: rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1746px) { .nav-tab .nav-tab-box .item .en { font-size: 13px; } } .nav-tab .nav-tab-box .item .cn { font-size: 0.20rem; font-weight: bold; } @media only screen and (max-width: 640px) { .nav-tab .nav-tab-box .item .cn { font-size: 12px; } } .footer { background-color: #4d92df; color: #fff; padding-top: 0.00rem; position: relative; } @media only screen and (max-width: 1024px) { .footer { display: flex; flex-direction: column; align-items: center; } } @media only screen and (max-width: 640px) { .footer { padding-top: 50px; } } .footer .g { position: absolute; width: 7.00rem; height: 140%; content: ""; left: -0.30rem; bottom: 0; background-image: url(../img/g-w.svg); background-size: cover; opacity: 0.06; background-position: left -0.30rem; background-repeat: no-repeat; pointer-events: none; } .footer .logo img { height: 0.48rem; } @media only screen and (max-width: 640px) { .footer .logo img { height: 30px; } } .footer .flex-t-b { margin-top: 0.30rem; } @media only screen and (max-width: 640px) { .footer .flex-t-b { margin-top: 20px; } } .footer nav { display: flex; } @media only screen and (max-width: 1024px) { .footer nav { display: none; } } .footer nav .item > a { font-weight: bold; line-height: 1; } .footer nav .item ul { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 0.20rem; } .footer nav .item ul li + li { margin-top: 0.14rem; } .footer nav .item + .item { margin-left: 0.56rem; } .footer .right { text-align: right; } @media only screen and (max-width: 1024px) { .footer .right { text-align: center; margin-top: 3vw; } } @media only screen and (max-width: 640px) { .footer .right { margin-top: 0; } } .footer .right .name { font-size: 0.22rem; font-weight: 500; } @media only screen and (max-width: 1024px) { .footer .right .name { font-size: 18px; } } @media only screen and (max-width: 640px) { .footer .right .name { font-size: 13px; } } .footer .right .value { color: rgba(255, 255, 255, 0.8); font-size: 0.18rem; margin-top: 0.10rem; } @media only screen and (max-width: 1024px) { .footer .right .value { font-size: 14px; } } @media only screen and (max-width: 640px) { .footer .right .value { font-size: 12px; } } .footer .right .item + .item { margin-top: 0.48rem; } @media only screen and (max-width: 640px) { .footer .right .item + .item { margin-top: 20px; } } .footer .bottom { margin-top: 0.60rem; border-top: 1px solid rgba(218, 218, 218, 0.5); font-size: 14px; display: flex; padding: 20px 0; } @media only screen and (max-width: 640px) { .footer .bottom { flex-direction: column; align-items: center; font-size: 11px; border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%; margin-top: 20px; line-height: 2; color: rgba(255, 255, 255, 0.8); } } .footer .bottom * + * { margin-left: 0.20rem; } @media (min-width: 1280px) { .footer .bottom a:hover { text-decoration: underline; } } .en-page { font-family: "Inter"; } @media only screen and (max-width: 640px) { .en-page .custom-content-marker .custom-content-marker-box { width: 240px; margin-left: -114px; } } .en-page .common-title .cn { letter-spacing: 0; font-size: 0.36rem; font-family: "source-serif"; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } @media only screen and (max-width: 640px) { .en-page .common-title .cn { font-size: 18px; white-space: unset; } } .en-page .common-title.small .cn { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .en-page .common-title.small .cn { font-size: 12px; } } @media only screen and (max-width: 640px) { .en-page .nav-tab .nav-tab-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .en-page .nav-tab .nav-tab-box .item { font-family: "source-serif"; letter-spacing: 1px; text-transform: uppercase; } @media only screen and (max-width: 640px) { .en-page .nav-tab .nav-tab-box .item { font-family: unset; letter-spacing: 0; text-transform: unset; } } .en-page .nav-tab .nav-tab-box .item .cn { font-size: 0.18rem; } @media only screen and (max-width: 640px) { .en-page .nav-tab .nav-tab-box .item .cn { font-size: 12px; } } .en-page .page-banner .cn { font-family: "source-serif"; letter-spacing: 1px; text-transform: uppercase; } .en-page .page-index .products .navs .box .t { font-family: "source-serif"; text-transform: uppercase; font-size: 0.22rem; } @media only screen and (max-width: 640px) { .en-page .page-index .products .navs .box .t { font-size: 12px; text-transform: unset; font-family: unset; } } .en-page .page-product .contact .flex .item .n { font-family: "source-serif"; text-transform: uppercase; font-size: 14rpx; } @media only screen and (max-width: 640px) { .en-page .page-about .team .lists .item .top .left { display: block; } } .en-page .page-about .team .lists .item .top .more { font-size: 0.18rem; } @media only screen and (max-width: 640px) { .en-page .page-about .team .lists .item .top .more { font-size: 10px; margin-top: 10px; } } .en-page .page-about .strength .flex-c-b .left { width: 7.30rem; } @media only screen and (max-width: 640px) { .en-page .page-about .strength .flex-c-b .left { width: 100%; } } .en-page .page-about .strength .flex-c-b .left .item { width: 3.50rem; height: 2.30rem; border-radius: 0.20rem; } @media only screen and (max-width: 1024px) { .en-page .page-about .strength .flex-c-b .left .item { width: auto; height: auto; text-align: center; padding: 0.40rem 8px; } } .en-page .page-about .strength .flex-c-b .left .item .img-box img { width: 0.40rem; } @media only screen and (max-width: 640px) { .en-page .page-about .strength .flex-c-b .left .item .img-box img { width: 18px; } } .en-page .page-about .strength .flex-c-b .left .item p { letter-spacing: 0; margin-top: 0.15rem; font-size: 0.20rem; } @media only screen and (max-width: 640px) { .en-page .page-about .strength .flex-c-b .left .item p { font-size: 10px; margin-top: 5px; } } .en-page .page-about .strength .flex-c-b .right { width: 7.60rem; } @media only screen and (max-width: 640px) { .en-page .page-about .strength .flex-c-b .right { width: 100%; } } .en-page .page-about .strength .flex-c-b .right .item { line-height: 2; } .en-page .page-about .team .ceo .right .n { margin-top: 0; } .en-page .page-about .team .ceo .right .line { margin-top: 0; } .en-page .page-about .team .ceo .right .content { margin-top: 0.50rem; } @media only screen and (max-width: 640px) { .en-page .page-about .team .ceo .right .content { margin-top: 20px; } } .en-page .page-about .team .ceo .right .t { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .en-page .page-about .team .ceo .right .t { font-size: 13px; } } @media only screen and (max-width: 640px) { .en-page .page-about .team .lists .item .top { display: block; } } .en-page .page-about .team .lists .item .top .name { font-size: 0.30rem; } @media only screen and (max-width: 640px) { .en-page .page-about .team .lists .item .top .name { font-size: 13px; } } .en-page .page-about .team .lists .item .top .t { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .en-page .page-about .team .lists .item .top .t { font-size: 10px; margin-left: 0; margin-top: 4px; } } .en-page .page-about .team .lists .item .content { letter-spacing: 0; } .en-page .page-about .culture .lists .item .text .t { font-size: 0.20rem; text-align: center; } @media only screen and (max-width: 640px) { .en-page .page-about .culture .lists .item .text .t { font-size: 14px; } } .en-page .page-about .culture .lists .item .text .d { font-size: 0.16rem; } @media only screen and (max-width: 640px) { .en-page .page-about .culture .lists .item .text .d { font-size: 11px; } } @media (min-width: 1280px) { .en-page .page-about .culture .lists .item:hover .text .t { font-size: 0.24rem; } } .en-page .page-about .development .slick-box .slick-develop .item .text { font-weight: normal; } .en-page .page-product .details .flex-t-b .content .t { letter-spacing: 0; } .en-page .page-index .users .lists .item { font-size: 0.18rem; line-height: 2; letter-spacing: 0; white-space: normal; padding: 0 0.30rem; } @media only screen and (max-width: 640px) { .en-page .page-index .users .lists .item { font-size: 13px; padding: 20px; } } .en-page .page-index .products .slick-box .item .name { letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.18rem; } @media only screen and (max-width: 640px) { .en-page .page-index .products .slick-box .item .name { font-size: 12px; white-space: unset; } } .en-page .common-intro .flex .left .common-title .cn { font-family: initial; text-transform: capitalize; } .en-page .page-about .company .lists .video-box { height: 5.70rem; } @media only screen and (max-width: 1024px) { .en-page .page-about .company .lists .video-box { height: 8.00rem; } } .en-page .page-product .lists .item .name { letter-spacing: 0; } .en-page .header-box .header .right nav .item ul { font-size: 12px; } .en-page .page-marketing .marketing .lists .item p { letter-spacing: 0; font-size: 0.22rem; } @media only screen and (max-width: 640px) { .en-page .page-marketing .marketing .lists .item p { font-size: 12px; text-align: center; } } .en-page .page-marketing .domestic .lists .item { font-size: 0.20rem; font-weight: normal; } @media only screen and (max-width: 640px) { .en-page .page-marketing .domestic .lists .item { font-size: 10px; } } .en-page .page-investor .lists .item .left .t { font-size: 0.20rem; font-weight: normal; } @media only screen and (max-width: 640px) { .en-page .page-investor .lists .item .left .t { font-size: 12px; } } .en-page .page-investor .sustainable .text .t, .en-page .page-investor .social .text .t { font-size: 0.24rem; } @media only screen and (max-width: 640px) { .en-page .page-investor .sustainable .text .t, .en-page .page-investor .social .text .t { font-size: 14px; line-height: 1.6; } } .en-page .page-investor .sustainable .text .line, .en-page .page-investor .social .text .line { margin-top: 0.20rem; margin-bottom: 0.50rem; } @media only screen and (max-width: 640px) { .en-page .page-investor .sustainable .text .line, .en-page .page-investor .social .text .line { margin-top: 6px; margin-bottom: 10px; } } .en-page .page-strength .strength .slick-box .slick-strength .item .box p { font-size: 0.16rem; font-weight: normal; } @media only screen and (max-width: 640px) { .en-page .page-strength .strength .slick-box .slick-strength .item .box p { font-size: 12px; } } .en-page .page-join .join .top .des img { height: 0.50rem; } @media only screen and (max-width: 640px) { .en-page .page-join .join .top .des img { height: 20px; } } .en-page .page-join .join .top .des { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .en-page .page-join .join .top .des { font-size: 12px; } } .en-page .page-join .join .lists .item .left .t { font-size: 0.22rem; font-weight: normal; } @media only screen and (max-width: 640px) { .en-page .page-join .join .lists .item .left .t { font-size: 13px; } } .en-page .footer .right .value { font-size: 15px; line-height: 1.6; } @media only screen and (max-width: 640px) { .en-page .footer .right .value { font-size: 12px; } } .en-page .footer .right .name { font-size: 0.18rem; font-weight: bold; } @media only screen and (max-width: 640px) { .en-page .footer .right .name { font-size: 13px; } } .en-page .common-intro .flex .left .content { font-size: 0.18rem; } @media only screen and (max-width: 640px) { .en-page .common-intro .flex .left .content { font-size: 12px; } } .en-page .page-about .company .lists .right .b .content { font-size: 0.16rem; text-align: left; } @media only screen and (max-width: 640px) { .en-page .page-about .company .lists .right .b .content { font-size: 12px; } } .en-page .page-about .company .lists .right .common-title.small .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-about .company .lists { margin-top: 0.80rem; } @media only screen and (max-width: 1024px) { .page-about .company .lists { display: block; } } .page-about .company .lists .video-box { width: 10.90rem; height: 6.00rem; border-radius: 0.20rem; background-color: #4d92df; position: relative; } @media only screen and (max-width: 1024px) { .page-about .company .lists .video-box { width: 100%; height: 8.00rem; } } .page-about .company .lists .video-box video { border-radius: 0.20rem; width: 100%; height: 100%; object-fit: cover; } .page-about .company .lists .video-box .play-btn { position: absolute; width: 1.30rem; height: 1.30rem; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; } @media only screen and (max-width: 640px) { .page-about .company .lists .video-box .play-btn { width: 50px; height: 50px; } } .page-about .company .lists .right { width: 4.60rem; } @media only screen and (max-width: 1024px) { .page-about .company .lists .right a { display: flex; } } @media only screen and (max-width: 1024px) { .page-about .company .lists .right { width: 100%; margin-top: 20px; } } .page-about .company .lists .right img { border-radius: 0.20rem; height: 2.60rem; object-fit: cover; object-position: center; width: 100%; } @media only screen and (max-width: 1024px) { .page-about .company .lists .right img { width: auto; flex-shrink: 0; height: 3.00rem; } } @media only screen and (max-width: 640px) { .page-about .company .lists .right img { display: none; } } .page-about .company .lists .right .b { background-image: url(../img/a-n-b.png); padding: 0.35rem; border-radius: 0.20rem; margin-top: 0.40rem; padding-bottom: 0.40rem; } @media only screen and (max-width: 1024px) { .page-about .company .lists .right .b { margin-top: 0; height: 100%; margin-left: 20px; } } @media only screen and (max-width: 640px) { .page-about .company .lists .right .b { margin-left: 0; } } .page-about .company .lists .right .b .content { font-size: 0.20rem; line-height: 2; text-align: justify; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 0.32rem; color: #545454; } @media only screen and (max-width: 1024px) { .page-about .company .lists .right .b .content { margin-top: 5px; line-height: 1.8; font-size: 12px; } } .page-about .company .lists .right .b .t { font-size: 14px; color: #a6a6a6; margin-top: 0.50rem; } @media only screen and (max-width: 1024px) { .page-about .company .lists .right .b .t { margin-top: 5px; font-size: 12px; } } .page-about .common-intro { background-position: center top; } @media only screen and (max-width: 1024px) { .page-about .team .ceo { align-items: flex-start; } } @media only screen and (max-width: 640px) { .page-about .team .ceo { flex-direction: column; align-items: center; } } .page-about .team .ceo .img-box { position: relative; padding-left: 0.40rem; } .page-about .team .ceo .img-box img { width: 4.00rem; height: 4.90rem; object-fit: cover; border-radius: 0.30rem; position: relative; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); } @media only screen and (max-width: 640px) { .page-about .team .ceo .img-box img { width: 160px; height: 200px; } } .page-about .team .ceo .img-box::before { content: ""; position: absolute; width: 4.00rem; height: 4.90rem; left: 0; top: -0.40rem; background-image: linear-gradient(-23deg, #ffffff 40%, rgba(77, 146, 223, 0.2) 100%); box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.2); border-radius: 0.30rem; } .page-about .team .ceo .right { width: 10.80rem; } @media only screen and (max-width: 640px) { .page-about .team .ceo .right { width: 100%; text-align: center; margin-top: 15px; } } .page-about .team .ceo .right .t { font-weight: bold; color: #207efe; font-size: 0.28rem; line-height: 2; } @media only screen and (max-width: 640px) { .page-about .team .ceo .right .t { font-size: 13px; } } .page-about .team .ceo .right .n { font-weight: bold; font-size: 0.36rem; margin-top: 0.10rem; line-height: 2; } @media only screen and (max-width: 1024px) { .page-about .team .ceo .right .n { font-size: 15px; } } @media only screen and (max-width: 640px) { .page-about .team .ceo .right .n { font-size: 16px; } } .page-about .team .ceo .right .line { background-color: #207efe; width: 0.60rem; height: 4px; margin-top: 6px; } @media only screen and (max-width: 640px) { .page-about .team .ceo .right .line { width: 20px; margin-left: auto; margin-right: auto; } } .page-about .team .ceo .right .content { color: #727272; text-align: justify; line-height: 2; margin-top: 0.56rem; } @media only screen and (max-width: 640px) { .page-about .team .ceo .right .content { font-size: 12px; margin-top: 20px; } } .page-about .team .lists { margin-top: 1.20rem; } @media only screen and (max-width: 640px) { .page-about .team .lists { margin-top: 20px; } } .page-about .team .lists .item { background-image: linear-gradient(-67deg, #ffffff 57%, rgba(22, 155, 255, 0.2) 100%); border: 2px solid #ffffff; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.2); border-radius: 0.30rem; transition: all 0.25s; } .page-about .team .lists .item .top { padding-left: 0.80rem; padding-right: 1.10rem; padding-top: 0.64rem; padding-bottom: 0.64rem; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .top { padding: 15px; } } .page-about .team .lists .item .top .name { font-size: 0.36rem; font-weight: bold; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .top .name { font-size: 14px; } } .page-about .team .lists .item .top .t { color: #6a6a6a; font-size: 0.22rem; margin-left: 0.60rem; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .top .t { font-size: 13px; } } .page-about .team .lists .item .top .more { font-size: 0.22rem; color: #207efe; cursor: pointer; align-items: center; display: flex; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .top .more { font-size: 12px; } } .page-about .team .lists .item .top .more img { width: 30px; transition: all 0.25s; transform: rotate(90deg); margin-left: 0.10rem; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .top .more img { width: 16px; } } .page-about .team .lists .item .content { line-height: 2; letter-spacing: 1px; color: #727272; text-align: justify; padding-left: 0.80rem; padding-right: 1.10rem; display: none; } @media only screen and (max-width: 640px) { .page-about .team .lists .item .content { font-size: 12px; line-height: 1.8; padding: 0 10px; } } .page-about .team .lists .item.active { padding-bottom: 0.64rem; } @media only screen and (max-width: 640px) { .page-about .team .lists .item.active { padding-bottom: 15px; } } .page-about .team .lists .item.active .top { padding-bottom: 0.26rem; } @media only screen and (max-width: 640px) { .page-about .team .lists .item.active .top { padding-bottom: 15px; } } .page-about .team .lists .item.active .top .more img { transform: rotate(270deg); } .page-about .team .lists .item + .item { margin-top: 0.80rem; } .page-about .culture .lists { display: flex; } @media only screen and (max-width: 1024px) { .page-about .culture .lists { display: block; } } @media only screen and (max-width: 640px) { .page-about .culture .lists .item + .item { margin-top: 20px; } } .page-about .culture .lists .item { width: 20%; position: relative; background-color: #000; transition: all 0.25s; } @media only screen and (max-width: 1024px) { .page-about .culture .lists .item { width: 100%; } } @media only screen and (max-width: 640px) { .page-about .culture .lists .item { border-radius: 10px; overflow: hidden; } } .page-about .culture .lists .item .img-box { background-position: center; background-size: cover; transition: all 0.25s; width: 100%; height: 6.80rem; opacity: 0.5; } @media only screen and (max-width: 640px) { .page-about .culture .lists .item .img-box { height: 200px; } } .page-about .culture .lists .item .text { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 0.60rem; transition: all 0.25s; } .page-about .culture .lists .item .text img { height: 0.40rem; transition: all 0.25s; } @media only screen and (max-width: 1024px) { .page-about .culture .lists .item .text img { height: 40px; } } @media only screen and (max-width: 640px) { .page-about .culture .lists .item .text img { height: 30px; } } .page-about .culture .lists .item .text .t { font-weight: bold; font-size: 0.22rem; margin-top: 0.16rem; transition: all 0.25s; } @media only screen and (max-width: 1024px) { .page-about .culture .lists .item .text .t { margin-top: 15px; font-size: 15px; } } @media only screen and (max-width: 640px) { .page-about .culture .lists .item .text .t { font-size: 14px; margin-top: 10px; } } .page-about .culture .lists .item .text .box { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; } .page-about .culture .lists .item .text .d { font-size: 0.20rem; line-height: 1.6; margin-top: 0.15rem; position: absolute; top: 1.00rem; width: 4.00rem; left: 50%; margin-left: -2.00rem; opacity: 0; transition: all 0.25s; text-align: center; } @media only screen and (max-width: 1024px) { .page-about .culture .lists .item .text .d { opacity: 1; position: relative; top: auto; left: auto; margin-left: 0; font-size: 12px; width: auto; } } @media (min-width: 1280px) { .page-about .culture .lists .item:hover { background-color: #207efe; width: 40%; } .page-about .culture .lists .item:hover .img-box { opacity: 0.2; } .page-about .culture .lists .item:hover .text { padding-bottom: 0.80rem; } .page-about .culture .lists .item:hover .text img { height: 0.50rem; } .page-about .culture .lists .item:hover .text .t { font-size: 0.28rem; } .page-about .culture .lists .item:hover .text .d { opacity: 1; } } .page-about .organization .top { text-align: center; } .page-about .organization .top img { height: 0.56rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-about .organization .top img { height: 36px; } } .page-about .organization .top .des { color: #646464; font-size: 0.18rem; line-height: 2; margin-top: 0.54rem; } @media only screen and (max-width: 640px) { .page-about .organization .top .des { font-size: 12px; margin-top: 20px; } } .page-about .organization .og { margin-top: 1.20rem; padding: 0 0.80rem; } @media only screen and (max-width: 640px) { .page-about .organization .og { padding: 0; margin-top: 20px; } } .page-about .development { background-image: url(../img/dev-bg.jpg); background-position: center top; position: relative; } .page-about .development::after { content: ""; position: absolute; width: 100%; height: 1.40rem; bottom: -1.40rem; left: 0; background-color: #72cff1; } .page-about .development .arrows { display: flex; align-items: center; } .page-about .development .arrows .ctrl-prev, .page-about .development .arrows .ctrl-next { width: 0.50rem; height: 0.50rem; border-radius: 50%; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); display: flex; align-items: center; justify-content: center; font-size: 0.20rem; color: #207efe; background-color: #fff; cursor: pointer; } @media only screen and (max-width: 640px) { .page-about .development .arrows .ctrl-prev, .page-about .development .arrows .ctrl-next { width: 30px; height: 30px; font-size: 14px; } } .page-about .development .arrows .ctrl-prev.slick-disabled, .page-about .development .arrows .ctrl-next.slick-disabled { opacity: 0.5; cursor: not-allowed; } @media (min-width: 1280px) { .page-about .development .arrows .ctrl-prev:not(.slick-disabled):hover, .page-about .development .arrows .ctrl-next:not(.slick-disabled):hover { background-image: linear-gradient(-44deg, #ffffff 0%, #0092ff 100%); color: #fff; } } .page-about .development .arrows .ctrl-next { margin-left: 0.40rem; } .page-about .development .slick-box { margin-top: 1.50rem; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-years { display: none; } } .page-about .development .slick-box .slick-develop .item { display: flex; align-items: center; justify-content: center; padding-bottom: 0.60rem; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item { display: block; } } .page-about .development .slick-box .slick-develop .item .img-box { width: 4.90rem; height: 3.10rem; position: relative; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item .img-box { width: 100%; height: 200px; } } .page-about .development .slick-box .slick-develop .item .img-box img { border-radius: 0.20rem; width: 100%; height: 100%; object-fit: cover; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item .img-box img { border-radius: 10px; } } .page-about .development .slick-box .slick-develop .item .img-box .year { font-size: 1.60rem; font-family: "DINPro"; line-height: 1; position: absolute; z-index: 2; left: 50%; top: 50%; text-align: center; color: rgba(255, 255, 255, 0.4); transform: translateY(-50%) translateX(-50%); letter-spacing: 0.10rem; filter: drop-shadow(0 0 0.20rem rgba(55, 55, 55, 0.3)); } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item .img-box .year { color: rgba(255, 255, 255, 0.6); font-size: 40px; } } .page-about .development .slick-box .slick-develop .item .line { height: 3.10rem; width: 12px; margin: 0 0.60rem; position: relative; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item .line { display: none; } } .page-about .development .slick-box .slick-develop .item .line .line-box { width: 100%; height: 100%; position: absolute; background-image: linear-gradient(-1deg, #ffffff 6%, rgba(22, 196, 255, 0.4) 100%); left: 0; top: 0.50rem; } .page-about .development .slick-box .slick-develop .item .line .line-box::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; left: -2px; bottom: -8px; } .page-about .development .slick-box .slick-develop .item .text { width: 4.90rem; white-space: pre-line; font-size: 0.20rem; line-height: 1.8; color: #fff; font-weight: bold; } @media only screen and (max-width: 640px) { .page-about .development .slick-box .slick-develop .item .text { width: 100%; margin-top: 10px; font-size: 12px; } } .page-about .development .slick-box .slick-years .item { text-align: center; font-size: 0.22rem; color: #fff; padding: 0.14rem 0 24px; font-family: "DINPro"; letter-spacing: 1px; position: relative; } .page-about .development .slick-box .slick-years .item::before { content: ""; position: absolute; left: 0; bottom: 6px; width: 100%; height: 3px; background-color: #fff; opacity: 0.5; } .page-about .development .slick-box .slick-years .item::after { content: ""; position: absolute; left: 50%; width: 15px; height: 15px; background-color: #fff; opacity: 0.5; border-radius: 50%; bottom: 0; margin-left: -8px; } .page-about .strength { position: relative; } .page-about .strength .g { position: absolute; width: 4.00rem; height: 4.00rem; right: 0; top: 0; background-image: url(../img/g-b.svg); background-size: cover; opacity: 0.04; background-position: left -0.30rem; background-repeat: no-repeat; pointer-events: none; } .page-about .strength .flex-c-b { margin-top: 0.80rem; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b { display: block; } } .page-about .strength .flex-c-b .left { width: 8.30rem; display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b .left { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: auto; } } @media only screen and (max-width: 640px) { .page-about .strength .flex-c-b .left { gap: 10px; } } .page-about .strength .flex-c-b .left .item { width: 4.00rem; height: 2.60rem; background-image: linear-gradient(-40deg, #ffffff 57%, #e2f3fb 100%); border: 2px solid #ffffff; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); border-radius: 0.30rem; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b .left .item { width: auto; height: auto; padding: 0.40rem 0; } } .page-about .strength .flex-c-b .left .item.active { background-image: linear-gradient(-55deg, #ffffff 0%, #0092ff 100%); } .page-about .strength .flex-c-b .left .item.active p { color: #fff; } .page-about .strength .flex-c-b .left .item.active::before { position: absolute; width: 2.20rem; height: 2.30rem; content: ""; right: 0; top: 0; background-image: url(../img/g-w.svg); background-size: cover; opacity: 0.24; background-position: 0.30rem -0.30rem; background-repeat: no-repeat; } .page-about .strength .flex-c-b .left .item.active .img-box img { opacity: 0; } .page-about .strength .flex-c-b .left .item.active .img-box img.active { opacity: 1; } .page-about .strength .flex-c-b .left .item .img-box { position: relative; } .page-about .strength .flex-c-b .left .item .img-box img { width: 0.50rem; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-about .strength .flex-c-b .left .item .img-box img { width: 18px; } } .page-about .strength .flex-c-b .left .item .img-box img.active { position: absolute; width: 100%; opacity: 0; left: 0; top: 0; } .page-about .strength .flex-c-b .left .item p { font-size: 0.24rem; font-weight: 500; letter-spacing: 3px; color: #111; margin-top: 0.40rem; transition: all 0.25s; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b .left .item p { margin-top: 20px; font-size: 15px; letter-spacing: 0; } } @media only screen and (max-width: 640px) { .page-about .strength .flex-c-b .left .item p { font-size: 12px; margin-top: 5px; } } .page-about .strength .flex-c-b .left .item:nth-child(n + 3) { margin-top: 0.30rem; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b .left .item:nth-child(n + 3) { margin-top: 0; } } .page-about .strength .flex-c-b .right { width: 6.60rem; } @media only screen and (max-width: 1024px) { .page-about .strength .flex-c-b .right { width: 100%; margin-top: 0.50rem; } } .page-about .strength .flex-c-b .right .item { display: none; line-height: 2.6; text-align: justify; } .page-about .strength .flex-c-b .right .item.active { display: block; } @media only screen and (max-width: 640px) { .page-about .strength .flex-c-b .right .item { line-height: 2; font-size: 12px; } } .page-product .lists { display: flex; flex-wrap: wrap; padding-top: 0.80rem; padding-bottom: 1.20rem; } @media only screen and (max-width: 640px) { .page-product .lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 30px; padding-bottom: 40px; gap: 14px; } } .page-product .lists .item { background-image: linear-gradient(-21deg, #ffffff 56%, rgba(22, 155, 255, 0.6) 100%); border: 2px solid #ffffff; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); border-radius: 0.30rem; padding: 0.60rem 0.20rem 0.30rem; text-align: center; width: calc((100% - 1.50rem) / 4); margin-right: 0.50rem; } @media only screen and (max-width: 640px) { .page-product .lists .item { width: 100%; padding: 20px 16px; border-radius: 10px; margin-right: 0; } } .page-product .lists .item img { width: 2.50rem; height: 2.50rem; margin: 0 auto; object-fit: contain; object-position: center center; } @media only screen and (max-width: 640px) { .page-product .lists .item img { width: 100px; height: 100px; } } .page-product .lists .item .name { font-size: 0.20rem; color: #000; line-height: 1.5; letter-spacing: 0.06rem; margin-top: 0.30rem; transform: translateY(60%); transition: all 0.25s; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media only screen and (max-width: 640px) { .page-product .lists .item .name { font-size: 12px; transform: none; } } .page-product .lists .item .m { color: #fff; font-size: 0.16rem; text-transform: uppercase; margin: 0.30rem auto 0; font-family: "source-serif"; letter-spacing: 2px; background-color: #207efe; box-shadow: 0 0 0.10rem 0 rgba(214, 214, 214, 0.5); line-height: 0.36rem; width: 1.20rem; border-radius: 0.18rem; opacity: 0; transform: translateY(80%); transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-product .lists .item .m { font-size: 10px; transform: none; opacity: 1; line-height: 20px; width: 60px; border-radius: 20px; } } @media (min-width: 1280px) { .page-product .lists .item:hover .name { transform: translateY(0); } .page-product .lists .item:hover .m { transform: translateY(0); opacity: 1; } } .page-product .lists .item:nth-child(4n) { margin-right: 0; } .page-product .lists .item:nth-child(n + 5) { margin-top: 0.60rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b { display: block; } } .page-product .details .flex-t-b .img-box { width: 7.80rem; height: 9.10rem; flex-shrink: 0; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .img-box { width: 100%; height: auto; } } .page-product .details .flex-t-b .img-box img { width: 100%; height: 100%; object-fit: cover; } .page-product .details .flex-t-b .content { flex: auto; padding-left: 0.60rem; padding-top: 0.50rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content { padding: 0; margin-top: 15px; } } .page-product .details .flex-t-b .content .t { font-size: 0.30rem; font-weight: bold; color: #111; letter-spacing: 0.09rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .t { letter-spacing: 0; font-size: 14px; text-align: center; } } .page-product .details .flex-t-b .content .des { margin-top: 0.36rem; font-size: 14px; color: #626262; line-height: 2.2; text-align: justify; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .des { margin-top: 20px; font-size: 12px; line-height: 2; } } .page-product .details .flex-t-b .content .des p { white-space: pre-line; } .page-product .details .flex-t-b .content .des p + p { margin-top: 0.36rem; } .page-product .details .flex-t-b .content .table { display: flex; border-radius: 6px; background-color: #eaf8ff; padding: 0.30rem 0; text-align: center; margin-top: 1.00rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .table { flex-direction: column; margin-top: 20px; border-radius: 8px; } } .page-product .details .flex-t-b .content .table .item { flex: 1; line-height: 1; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .table .item { display: flex; padding: 15px 10px; } } .page-product .details .flex-t-b .content .table .item .n { font-size: 16px; font-weight: bold; color: #207efe; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .table .item .n { font-size: 13px; } } .page-product .details .flex-t-b .content .table .item .v { font-size: 14px; color: #5c5c5c; margin-top: 0.20rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .table .item .v { margin-top: 0; margin-left: 10px; font-size: 13px; } } .page-product .details .flex-t-b .content .table .item + .item { border-left: 1px solid #eee; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .table .item + .item { border-left: unset; border-top: 1px solid #eee; } } .page-product .details .flex-t-b .content .stores { margin-top: 0.36rem; border-top: 1px solid #eee; padding-top: 0.46rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores { margin-top: 20px; border-top: unset; padding-top: 0; } } .page-product .details .flex-t-b .content .stores .n { font-size: 0.20rem; font-weight: 600; color: #111; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores .n { font-size: 14px; text-align: center; } } .page-product .details .flex-t-b .content .stores .links { margin-top: 0.24rem; display: flex; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores .links { justify-content: center; margin-top: 15px; } } .page-product .details .flex-t-b .content .stores .links a { display: flex; width: 2.20rem; height: 0.60rem; border-radius: 0.60rem; border: 1px solid #979797; justify-content: center; align-items: center; font-size: 0.20rem; font-weight: 600; color: #111; letter-spacing: 1px; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores .links a { width: 130px; height: 35px; letter-spacing: 0; border-radius: 35px; font-size: 12px; } } .page-product .details .flex-t-b .content .stores .links a img { height: 0.34rem; margin-right: 0.10rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores .links a img { height: 14px; margin-right: 4px; } } .page-product .details .flex-t-b .content .stores .links a + a { margin-left: 0.24rem; } @media only screen and (max-width: 640px) { .page-product .details .flex-t-b .content .stores .links a + a { margin-left: 20px; } } .page-product .contact { border-top: 1px solid #eee; padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-product .contact { border-top: unset; padding-top: 20px; } } .page-product .contact .flex { display: flex; justify-content: center; } @media only screen and (max-width: 640px) { .page-product .contact .flex { display: block; } } .page-product .contact .flex .item { text-align: center; padding: 0 0.90rem; } .page-product .contact .flex .item .n { font-weight: 500; font-size: 0.20rem; color: #111; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .n { font-size: 14px; } } .page-product .contact .flex .item .en { font-family: "source-serif"; text-transform: uppercase; color: #bbbbbb; font-size: 14px; margin-top: 0.05rem; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .en { font-size: 12px; margin-top: 2px; } } .page-product .contact .flex .item .phone { font-family: "DINPro"; color: #222; font-size: 0.38rem; margin-top: 0.32rem; display: block; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .phone { margin-top: 0; font-size: 30px; } } .page-product .contact .flex .item .icons { display: flex; justify-content: center; margin-top: 0.26rem; font-size: 14px; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .icons { margin-top: 10px; font-size: 12px; } } .page-product .contact .flex .item .icons .icon img { width: 0.54rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .icons .icon img { width: 40px; } } .page-product .contact .flex .item .icons .icon p { margin-top: 0.10rem; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .icons .icon p { margin-top: 6px; } } .page-product .contact .flex .item .icons .icon + .icon { margin-left: 0.60rem; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item .icons .icon + .icon { margin-left: 10px; } } .page-product .contact .flex .item + .item { border-left: 1px solid #eee; } @media only screen and (max-width: 640px) { .page-product .contact .flex .item + .item { border-left: unset; border-top: 1px solid #eee; margin-top: 20px; padding-top: 20px; } } .page-news .lists { display: flex; flex-wrap: wrap; width: 12.20rem; margin: 0 auto; padding: 0.80rem 0 1.20rem; } @media only screen and (max-width: 1024px) { .page-news .lists { width: auto; padding: 0.80rem 1.20rem 1.20rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media only screen and (max-width: 640px) { .page-news .lists { display: block; padding: 30px 20px; } } .page-news .lists .item { display: block; width: calc((100% - 0.60rem) / 3); margin-right: 0.30rem; } @media only screen and (max-width: 1024px) { .page-news .lists .item { width: 100%; } } @media only screen and (max-width: 640px) { .page-news .lists .item { width: auto; margin-bottom: 0; display: flex; } } .page-news .lists .item .img-box { height: 2.20rem; overflow: hidden; } @media only screen and (max-width: 1024px) { .page-news .lists .item .img-box { height: 3.00rem; } } @media only screen and (max-width: 640px) { .page-news .lists .item .img-box { width: 90px; height: 70px; flex-shrink: 0; } } .page-news .lists .item .img-box img { width: 100%; height: 100%; object-fit: cover; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-news .lists .item .img-box img { border-radius: 6px; } } .page-news .lists .item .text { padding: 0.24rem 0.24rem 0.54rem; border-bottom: 2px solid rgba(0, 0, 0, 0.1); transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-news .lists .item .text { padding: 0; padding-left: 10px; border: none; } } .page-news .lists .item .text .t { font-weight: 600; line-height: 30px; color: #333; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all 0.25s; font-size: 16px; height: 60px; } @media only screen and (max-width: 1024px) { .page-news .lists .item .text .t { font-size: 13px; line-height: 22px; height: 44px; } } .page-news .lists .item .text .d { font-size: 14px; color: #999; margin-top: 0.32rem; } @media only screen and (max-width: 640px) { .page-news .lists .item .text .d { font-size: 11px; margin-top: 4px; } } @media (min-width: 1280px) { .page-news .lists .item:hover .img-box img { transform: scale(1.05); } .page-news .lists .item:hover .text { border-bottom-color: #207efe; } .page-news .lists .item:hover .text .t { color: #207efe; } } .page-news .lists .item:nth-child(3n) { margin-right: 0; } @media only screen and (max-width: 640px) { .page-news .lists .item + .item { margin-top: 20px!important; } } .page-news .lists .item:nth-child(n + 4) { margin-top: 0.46rem; } @media only screen and (max-width: 1024px) { .page-news .lists .item:nth-child(n + 4) { margin-top: 0; } } .page-news .detail { padding-top: 1.00rem; } @media only screen and (max-width: 640px) { .page-news .detail { padding-top: 30px; } } .page-news .detail .title { font-size: 0.35rem; font-weight: bold; color: #111; line-height: 2; text-align: center; } @media only screen and (max-width: 640px) { .page-news .detail .title { font-size: 14px; } } .page-news .detail .tool { display: flex; justify-content: center; font-size: 0.18rem; color: #595959; margin-top: 0.44rem; } @media only screen and (max-width: 640px) { .page-news .detail .tool { margin-top: 8px; font-size: 12px; } } .page-news .detail .tool span { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .page-news .detail .tool span { font-size: 12px; } } .page-news .detail .tool p + p { margin-left: 0.50rem; } @media only screen and (max-width: 640px) { .page-news .detail .tool p + p { margin-left: 10px; } } .page-news .detail .content { border-top: 1px solid #eee; margin-top: 0.44rem; padding-top: 0.50rem; font-size: 16px; line-height: 2; text-align: justify; } @media only screen and (max-width: 640px) { .page-news .detail .content { font-size: 12px; margin-top: 20px; padding-top: 20px; } } .page-news .detail .content p { white-space: pre-line; } .page-news .detail .content img { margin: 1.00rem 0; height: auto!important; } @media only screen and (max-width: 640px) { .page-news .detail .content img { margin: 5px 0; } } .page-news .detail .sliblings { display: flex; align-items: center; justify-content: space-between; } .page-news .detail .sliblings .more-btn { width: 2.00rem; line-height: 0.54rem; border: 1px solid rgba(151, 151, 151, 0.5); border-radius: 28px; font-size: 0.24rem; text-align: center; color: rgba(62, 62, 62, 0.9); font-family: "source-serif"; text-transform: uppercase; } @media only screen and (max-width: 1024px) { .page-news .detail .sliblings .more-btn { width: 90px; line-height: 30px; font-size: 13px; } } @media only screen and (max-width: 640px) { .page-news .detail .sliblings { display: block; margin-top: 30px; } } .page-news .detail .sliblings .links { display: flex; flex-direction: column; align-items: flex-start; font-size: 0.18rem; color: #535353; } @media only screen and (max-width: 640px) { .page-news .detail .sliblings .links { font-size: 12px; } } .page-news .detail .sliblings .links a + a { margin-top: 0.26rem; } @media only screen and (max-width: 640px) { .page-news .detail .sliblings .links a + a { margin-top: 10px; } } @media (min-width: 1280px) { .page-news .detail .sliblings .links a:hover { color: #207efe; text-decoration: underline; } } .page-news .detail .sliblings .back { width: 1.00rem; height: 1.00rem; border-radius: 50%; background-image: linear-gradient(-24deg, #ffffff 56%, #169bff 100%); border: 2px solid #ffffff; box-shadow: 0 0 20px 0 rgba(214, 214, 214, 0.5); color: #207efe; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 640px) { .page-news .detail .sliblings .back { margin-top: 20px; padding: 0; width: 100%; height: 46px; border-radius: 8px; font-size: 13px; } } .page-marketing .marketing { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-marketing .marketing { padding-top: 30px; } } .page-marketing .marketing .top img { height: 0.56rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-marketing .marketing .top img { height: 30px; } } .page-marketing .marketing .top .des { font-size: 0.18rem; line-height: 2; text-align: center; margin-top: 0.36rem; white-space: pre-line; } @media only screen and (max-width: 640px) { .page-marketing .marketing .top .des { font-size: 12px; margin-top: 20px; white-space: unset; } } .page-marketing .marketing .content { margin-top: 1.00rem; } .page-marketing .marketing .lists { display: flex; justify-content: space-between; margin-top: 1.00rem; } .page-marketing .marketing .lists .item { width: calc((100% - 1.40rem) / 3); background-image: linear-gradient(-40deg, #ffffff 57%, rgba(22, 155, 255, 0.3) 100%); border: 2px solid #ffffff; box-shadow: 0 0 0.30rem 0 rgba(214, 214, 214, 0.5); border-radius: 0.30rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3.10rem; position: relative; } @media only screen and (max-width: 640px) { .page-marketing .marketing .lists .item { border-radius: 10px; height: auto; padding: 20px 0; } } .page-marketing .marketing .lists .item .g { position: absolute; width: 2.60rem; height: 2.80rem; content: ""; right: 0; top: 0; background-image: url(../img/g-b.svg); background-size: cover; opacity: 0.02; background-position: left -0.30rem; background-repeat: no-repeat; pointer-events: none; } .page-marketing .marketing .lists .item img { height: 0.64rem; } @media only screen and (max-width: 640px) { .page-marketing .marketing .lists .item img { height: 20px; } } .page-marketing .marketing .lists .item p { font-size: 0.28rem; font-weight: bold; margin-top: 0.40rem; letter-spacing: 2px; color: #111; } @media only screen and (max-width: 640px) { .page-marketing .marketing .lists .item p { font-size: 13px; margin-top: 10px; } } .page-marketing .domestic { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-marketing .domestic { padding-top: 30px; } } .page-marketing .domestic .top { display: flex; justify-content: center; align-items: center; } .page-marketing .domestic .top img { width: 0.50rem; margin-right: 0.30rem; } @media only screen and (max-width: 640px) { .page-marketing .domestic .top img { width: 20px; } } .page-marketing .domestic .top .des { font-size: 0.24rem; font-weight: 500; } @media only screen and (max-width: 640px) { .page-marketing .domestic .top .des { font-size: 14px; } } .page-marketing .domestic .lists { margin-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-marketing .domestic .lists { margin-top: 20px; } } .page-marketing .domestic .lists .item { display: flex; align-items: center; height: 1.00rem; text-align: center; color: #111; font-size: 0.22rem; font-weight: 500; background-color: #ffffff; } @media only screen and (max-width: 640px) { .page-marketing .domestic .lists .item { height: 40px; font-size: 12px; } } .page-marketing .domestic .lists .item p { flex: 1; } .page-marketing .domestic .lists .item.header { background-color: #207efe; color: #fff; } .page-marketing .domestic .lists .item + .item { margin-top: 0.36rem; } @media only screen and (max-width: 640px) { .page-marketing .domestic .lists .item + .item { margin-top: 10px; } } .page-strength .strength { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-strength .strength { padding-top: 30px; } } .page-strength .strength .top img { height: 0.56rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-strength .strength .top img { height: 30px; } } .page-strength .strength .top .des { font-size: 0.18rem; line-height: 2; text-align: center; margin-top: 0.36rem; white-space: pre-line; } @media only screen and (max-width: 640px) { .page-strength .strength .top .des { font-size: 12px; white-space: unset; margin-top: 20px; } } .page-strength .strength .slick-box { margin-top: 0.80rem; position: relative; padding: 0 0.40rem; } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box { margin-top: 20px; padding: 0; } } .page-strength .strength .slick-box .arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; margin-top: -0.40rem; left: 0; } .page-strength .strength .slick-box .arrows .ctrl-prev, .page-strength .strength .slick-box .arrows .ctrl-next { position: relative; width: 0.60rem; height: 0.60rem; background-image: linear-gradient(-21deg, #ffffff 0%, #169bff 94%); border: 2px solid #ffffff; box-shadow: 0 0 20px 0 rgba(214, 214, 214, 0.5); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: -0.30rem; opacity: 0.7; transition: all 0.25s; color: #fff; } @media (min-width: 1280px) { .page-strength .strength .slick-box .arrows .ctrl-prev:hover, .page-strength .strength .slick-box .arrows .ctrl-next:hover { opacity: 1; } } .page-strength .strength .slick-box .arrows .ctrl-prev img, .page-strength .strength .slick-box .arrows .ctrl-next img { width: 0.30rem; } .page-strength .strength .slick-box .arrows .ctrl-next { margin-left: auto; margin-right: -0.30rem; } .page-strength .strength .slick-box .slick-strength .slick-list { padding: 0.20rem 0 !important; } .page-strength .strength .slick-box .slick-strength .item { opacity: 0; transition: all 0.25s; position: relative; } .page-strength .strength .slick-box .slick-strength .item .box { background-color: #fff; border-radius: 0.20rem; overflow: hidden; box-shadow: 0 0 0.20rem 0 rgba(214, 214, 214, 0.5); text-align: center; transition: all 0.25s; transform: scale(0.8); border: 2px solid #ffffff; } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item .box { border-radius: 10px; transform: unset; } } .page-strength .strength .slick-box .slick-strength .item .box img { width: 5.10rem; height: 3.60rem; object-fit: cover; } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item .box img { width: 100%; height: 210px; } } .page-strength .strength .slick-box .slick-strength .item .box p { padding: 0.25rem; font-size: 0.18rem; font-weight: bold; color: #111; } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item .box p { padding: 10px; font-size: 12px; } } .page-strength .strength .slick-box .slick-strength .item.slick-current { z-index: 3; } .page-strength .strength .slick-box .slick-strength .item.slick-active { opacity: 1; } .page-strength .strength .slick-box .slick-strength .item.slick-active .box { transform: scale(0.8) translateX(30%); } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item.slick-active .box { transform: unset; } } .page-strength .strength .slick-box .slick-strength .item.slick-current.slick-active .box { transform: scale(1) translateX(0); } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item.slick-current.slick-active .box { transform: unset; } } .page-strength .strength .slick-box .slick-strength .item.slick-current.slick-active + .slick-active .box { transform: scale(0.8) translateX(-30%); } @media only screen and (max-width: 640px) { .page-strength .strength .slick-box .slick-strength .item.slick-current.slick-active + .slick-active .box { transform: unset; } } .page-investor .lists { padding-top: 0.80rem; padding-bottom: 1.20rem; } @media only screen and (max-width: 640px) { .page-investor .lists { padding-top: 30px; padding-bottom: 40px; } } .page-investor .lists .item { display: block; } .page-investor .lists .item .flex-c-b { background-color: #fff; height: 1.40rem; padding: 0 0.60rem; display: flex; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-investor .lists .item .flex-c-b { display: block; height: auto; padding: 10px; } } @media (min-width: 1280px) { .page-investor .lists .item .flex-c-b:hover { background-color: #1678ff; } .page-investor .lists .item .flex-c-b:hover .left .date, .page-investor .lists .item .flex-c-b:hover .left .t { color: #fff; } .page-investor .lists .item .flex-c-b:hover .right p { color: #fff; } } .page-investor .lists .item .left { display: flex; align-items: center; } @media only screen and (max-width: 640px) { .page-investor .lists .item .left { display: block; } } .page-investor .lists .item .left .date { font-family: "DINPro"; color: #1678ff; } @media only screen and (max-width: 640px) { .page-investor .lists .item .left .date { display: flex; } } .page-investor .lists .item .left .date .d { font-size: 0.36rem; } @media only screen and (max-width: 640px) { .page-investor .lists .item .left .date .d { font-size: 11px; } } .page-investor .lists .item .left .date .m { font-size: 0.20rem; } @media only screen and (max-width: 640px) { .page-investor .lists .item .left .date .m { font-size: 11px; margin-left: 10px; } } .page-investor .lists .item .left .t { margin-left: 0.75rem; color: #111; font-size: 0.22rem; font-weight: 500; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-investor .lists .item .left .t { margin-left: 0; margin-top: 10px; font-size: 12px; } } .page-investor .lists .item .right p { font-size: 0.40rem; color: #1678ff; transform: rotateY(180deg); transition: all 0.25s; } .page-investor .lists .item + .item { margin-top: 0.40rem; } .page-investor .sustainable .flex-c-b + .flex-c-b { margin-top: 0.30rem; } @media only screen and (max-width: 640px) { .page-investor .sustainable .flex-c-b + .flex-c-b { margin-top: 20px; } } @media only screen and (max-width: 640px) { .page-investor .sustainable .flex-c-b { display: block; } } .page-investor .sustainable .img-box { width: 6.40rem; height: 4.00rem; flex-shrink: 0; } @media only screen and (max-width: 640px) { .page-investor .sustainable .img-box { width: 100%; height: 150px; flex-shrink: 0; } } .page-investor .sustainable .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-investor .sustainable .text { flex: auto; padding-left: 0.90rem; } @media only screen and (max-width: 640px) { .page-investor .sustainable .text { padding-left: 0; margin-top: 10px; } } .page-investor .sustainable .text .t { font-size: 0.28rem; color: #333; font-weight: bold; line-height: 2; } @media only screen and (max-width: 640px) { .page-investor .sustainable .text .t { font-size: 13px; } } .page-investor .sustainable .text .line { width: 1.20rem; height: 4px; background-color: #207efe; margin-top: 0.24rem; margin-bottom: 0.60rem; } .page-investor .sustainable .text .d { line-height: 1.8; text-align: justify; color: #727272; } @media only screen and (max-width: 640px) { .page-investor .sustainable .text .d { font-size: 11px; } } .page-investor .social .socail-item { display: block; } .page-investor .social .socail-item + .socail-item { margin-top: 1.00rem; } @media only screen and (max-width: 640px) { .page-investor .social .socail-item + .socail-item { margin-top: 20px; } } .page-investor .social .socail-item:nth-child(even) .flex-c-b { flex-direction: row-reverse; } @media only screen and (max-width: 640px) { .page-investor .social .socail-item:nth-child(even) .flex-c-b { flex-direction: row; } } .page-investor .social .socail-item:nth-child(even) .flex-c-b .text { padding-left: 0; padding-right: 0.90rem; } @media only screen and (max-width: 640px) { .page-investor .social .socail-item:nth-child(even) .flex-c-b .text { padding: 0; padding-left: 10px; } } .page-investor .social .img-box { width: 6.40rem; height: 4.00rem; flex-shrink: 0; } @media only screen and (max-width: 640px) { .page-investor .social .img-box { width: 90px; height: 70px; } } .page-investor .social .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media only screen and (max-width: 640px) { .page-investor .social .img-box img { border-radius: 6px; } } .page-investor .social .text { flex: auto; padding-left: 0.90rem; } @media only screen and (max-width: 640px) { .page-investor .social .text { padding-left: 10px; } } .page-investor .social .text .t { font-size: 0.28rem; color: #333; font-weight: bold; line-height: 2; } @media only screen and (max-width: 640px) { .page-investor .social .text .t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .page-investor .social .text .line { width: 0.60rem; height: 4px; background-color: #000000; margin-top: 0.24rem; margin-bottom: 0.60rem; } .page-investor .social .text .d { line-height: 1.8; text-align: justify; color: #727272; } @media only screen and (max-width: 640px) { .page-investor .social .text .d { display: none; } } .page-investor .social .text .time { color: #727272; font-size: 14px; margin-top: 0.48rem; } @media only screen and (max-width: 640px) { .page-investor .social .text .time { font-size: 10px; margin-top: 4px; } } .page-join .join { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-join .join { padding-top: 30px; } } .page-join .join .top .des { font-size: 0.22rem; line-height: 2; text-align: center; color: #636363; white-space: pre-line; } @media only screen and (max-width: 640px) { .page-join .join .top .des { font-size: 12px; white-space: unset; text-align: justify; } } .page-join .join .top .des img { display: inline-block; height: 0.56rem; vertical-align: bottom; margin: 0 0.10rem; } @media only screen and (max-width: 640px) { .page-join .join .top .des img { height: 20px; } } .page-join .join .lists { margin-top: 1.20rem; margin-bottom: 1.20rem; } @media only screen and (max-width: 640px) { .page-join .join .lists { margin-top: 30px; margin-bottom: 0; } } .page-join .join .lists .item + .item { margin-top: 0.60rem; } @media only screen and (max-width: 640px) { .page-join .join .lists .item + .item { margin-top: 15px; } } .page-join .join .lists .item { height: 1.40rem; border-radius: 0.20rem; background-image: linear-gradient(to right, rgba(193, 230, 254, 0.6), #fff 40%); padding: 0 0.60rem; box-shadow: 0 0 0.10rem rgba(55, 55, 55, 0.05); } @media only screen and (max-width: 640px) { .page-join .join .lists .item { height: auto; padding: 15px 10px; border-radius: 6px; } } .page-join .join .lists .item .flex-c-b { height: 100%; } .page-join .join .lists .item .left { display: flex; align-items: center; } .page-join .join .lists .item .left img { width: 0.40rem; } @media only screen and (max-width: 640px) { .page-join .join .lists .item .left img { width: 20px; } } .page-join .join .lists .item .left .t { margin-left: 0.40rem; font-size: 0.26rem; color: #111; font-weight: 500; } @media only screen and (max-width: 640px) { .page-join .join .lists .item .left .t { font-size: 13px; } } .page-join .join .lists .item .more { color: #207efe; font-size: 0.18rem; cursor: pointer; } @media only screen and (max-width: 640px) { .page-join .join .lists .item .more { font-size: 12px; } } .page-join .join .lists .item .more .iconfont { margin-left: 6px; } @media only screen and (max-width: 640px) { .page-join .join .lists .item .more .iconfont { margin-left: 3px; } } .page-join .join-cover { position: fixed; z-index: 20; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.25s; } @media only screen and (max-width: 640px) { .page-join .join-cover { padding: 20px; } } .page-join .join-cover.active { opacity: 1; visibility: visible; } .page-join .join-cover .join-box { width: 13.20rem; border-radius: 0.20rem; background-color: #fff; overflow: hidden; display: none; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box { width: 100%; border-radius: 10px; } } .page-join .join-cover .join-box .head { height: 0.80rem; padding: 0 0.50rem; background-color: #1678ff; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box .head { height: auto; padding: 15px; } } .page-join .join-cover .join-box .head .left { display: flex; align-items: center; } .page-join .join-cover .join-box .head .left img { width: 0.40rem; margin-right: 0.40rem; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box .head .left img { width: 20px; margin-right: 10px; } } .page-join .join-cover .join-box .head .left .t { font-size: 0.22rem; font-weight: 500; color: #fff; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box .head .left .t { font-size: 13px; } } .page-join .join-cover .join-box .head .close { width: 0.40rem; cursor: pointer; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box .head .close { width: 24px; } } .page-join .join-cover .join-box .content { padding: 0.50rem 0.50rem 0.80rem; line-height: 2.2; max-height: 70vh; overflow-y: auto; } @media only screen and (max-width: 640px) { .page-join .join-cover .join-box .content { padding: 20px 15px; } } .page-join .join-cover .join-box .content::-webkit-scrollbar { display: block; background-color: #f3f3f3; width: 8px; } .page-join .join-cover .join-box .content::-webkit-scrollbar-thumb { display: block; width: 8px; background-color: #333; } .page-join .development { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-join .development { padding-top: 30px; } } .page-join .development .top img { height: 0.56rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .page-join .development .top img { height: 30px; } } .page-join .development .top .des { margin-top: 0.40rem; font-size: 0.18rem; line-height: 2; text-align: center; } @media only screen and (max-width: 640px) { .page-join .development .top .des { text-align: justify; margin-top: 20px; font-size: 12px; } } .page-join .development .content { margin-top: 0.90rem; padding: 0 1.60rem; } @media only screen and (max-width: 640px) { .page-join .development .content { padding: 0; margin-top: 30px; } } .page-contact .contact { padding-top: 0.80rem; } @media only screen and (max-width: 640px) { .page-contact .contact { padding-top: 30px; } } .page-contact .contact .form { background-image: linear-gradient(180deg, rgba(222, 243, 255, 0.5) 0%, #f9fdff 100%); border-radius: 0.20rem; padding: 0.90rem 1.90rem; box-shadow: 0 0.10rem 0.20rem 0 rgba(226, 226, 226, 0.2); } @media only screen and (max-width: 1536px) { .page-contact .contact .form { padding: 0.90rem 1.00rem; } } @media only screen and (max-width: 640px) { .page-contact .contact .form { padding: 15px; } } .page-contact .contact .form > .flex-c-b { align-items: stretch; } @media only screen and (max-width: 1024px) { .page-contact .contact .form > .flex-c-b { display: block; } } .page-contact .contact .form .left { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0.20rem; max-width: 4.00rem; } @media only screen and (max-width: 1024px) { .page-contact .contact .form .left { max-width: unset; } } @media only screen and (max-width: 640px) { .page-contact .contact .form .left .bottom { margin-top: 20px; } } .page-contact .contact .form .left .bottom .item + .item { margin-top: 0.40rem; } .page-contact .contact .form .left .bottom .item .n { color: #1678ff; font-weight: 500; } .page-contact .contact .form .left .bottom .item .d { font-size: 14px; margin-top: 0.20rem; white-space: pre-line; text-align: justify; } .page-contact .contact .form .right { width: 7.70rem; height: 5.60rem; box-shadow: 0 0.10rem 0.20rem 0 rgba(226, 226, 226, 0.5); border-radius: 0.20rem; background: #ffffff; padding: 0.50rem; flex-shrink: 0; } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right .flex-c-b { display: block; } } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right { width: auto; height: auto; } } @media only screen and (max-width: 640px) { .page-contact .contact .form .right { padding: 15px; border-radius: 10px; margin-top: 20px; } } .page-contact .contact .form .right .g { width: 3.20rem; } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right .g { width: 100%; } } .page-contact .contact .form .right .input-item + .input-item { margin-top: 0.30rem; } @media only screen and (max-width: 640px) { .page-contact .contact .form .right .input-item + .input-item { margin-top: 20px; } } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right .g + .g { margin-top: 0.30rem; } } @media only screen and (max-width: 640px) { .page-contact .contact .form .right .g + .g { margin-top: 20px; } } .page-contact .contact .form .right button { appearance: none; border: none; font-family: inherit; font-size: 0.18rem; text-align: center; height: 0.60rem; width: 2.80rem; border-radius: 0.10rem; background-color: #207efe; color: #fff; margin-top: 0.70rem; cursor: pointer; } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right button { margin-top: 20px; height: 40px; width: 100%; font-size: 16px; } } @media only screen and (max-width: 640px) { .page-contact .contact .form .right button { border-radius: 8px; font-size: 14px; } } .page-contact .contact .form .right label { display: block; margin-bottom: 0.10rem; color: #111; font-weight: 500; } @media only screen and (max-width: 640px) { .page-contact .contact .form .right label { font-size: 13px; margin-bottom: 6px; } } .page-contact .contact .form .right input, .page-contact .contact .form .right textarea { appearance: none; border: 1px solid #e7e8ea; border-radius: 0.10rem; height: 0.50rem; padding: 0 14px; font-weight: 500; font-family: inherit; outline: none; width: 3.20rem; } @media only screen and (max-width: 1024px) { .page-contact .contact .form .right input, .page-contact .contact .form .right textarea { width: 100%; height: 40px; } } @media only screen and (max-width: 640px) { .page-contact .contact .form .right input, .page-contact .contact .form .right textarea { border-radius: 8px; font-size: 13px; } } .page-contact .contact .form .right input:focus, .page-contact .contact .form .right textarea:focus { outline: 2px solid #169bff; } .page-contact .contact .form .right textarea { padding: 14px; height: 2.80rem; resize: none; } @media only screen and (max-width: 640px) { .page-contact .contact .form .right textarea { height: 80px; font-size: 13px; padding: 8px; } } .page-contact .contact .map-box { height: 6.00rem; border-radius: 0.20rem; overflow: hidden; margin-top: 0.80rem; box-shadow: 0 0.10rem 0.20rem 0 rgba(226, 226, 226, 0.5); } @media only screen and (max-width: 640px) { .page-contact .contact .map-box { margin-top: 30px; border-radius: 8px; height: 300px; } } .page { display: flex; align-items: center; justify-content: center; } .page .page-item { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid #d4d4d4; color: #222; font-size: 14px; } @media only screen and (max-width: 640px) { .page .page-item { width: 30px; height: 30px; font-size: 12px; } } .page .page-item.active { background-color: #207efe; border-color: #207efe; color: #fff; } .page .page-number { font-weight: bold; } .page .page-prev, .page .page-next { color: #9e9e9e; } .page .page-item + .page-item { margin-left: 10px; } .custom-content-marker { position: relative; } .custom-content-marker .custom-content-marker-box { width: 4.60rem; line-height: 0.60rem; border-radius: 0.10rem; background-color: #207efe; color: #fff; font-size: 0.24rem; text-align: center; position: absolute; top: 0.70rem; left: 50%; margin-left: -2.30rem; } @media only screen and (max-width: 640px) { .custom-content-marker .custom-content-marker-box { width: 200px; line-height: 36px; border-radius: 4px; padding: 0 12px; top: 40px; margin-left: -94px; font-size: 13px; } } .custom-content-marker .custom-content-marker-box::before { content: ""; position: absolute; border-top: 0.30rem solid transparent; border-left: 0.30rem solid #207efe; border-bottom: 0.10rem solid #207efe; top: -0.30rem; left: 52%; } .wave-box { position: absolute; left: 0; bottom: 0; } .wave-box-p { position: relative; height: 1.40rem; } @media only screen and (max-width: 640px) { .wave-box-p { display: none; } } #canvas { position: relative; width: 100vw; height: 2.00rem; display: block; } .sr_frmipt { display: flex; align-items: center; justify-content: center; padding: 0.80rem 0; } @media only screen and (max-width: 640px) { .sr_frmipt { padding: 20px; } } .sr_frmipt .ipt { width: 8.00rem; height: 0.60rem; border: 2px solid #0092ff; border-radius: 0.60rem; border-right: unset; border-top-right-radius: 0; border-bottom-right-radius: 0; appearance: none; font-size: 0.18rem; padding: 0 0.20rem; font-family: inherit; } @media only screen and (max-width: 640px) { .sr_frmipt .ipt { flex: auto; height: 40px; border-width: 1px; padding: 0 14px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; font-size: 13px; } } .sr_frmipt .ipt:focus { border: 2px solid #5bb53c; } .sr_frmipt .ipt:focus-visible { border: 2px solid #5bb53c; } .sr_frmipt .ss_btn { width: 1.50rem; border: unset; background-color: #0092ff; color: #fff; height: 0.60rem; border-top-right-radius: 0.60rem; border-bottom-right-radius: 0.60rem; font-family: inherit; font-size: 0.20rem; cursor: pointer; appearance: none; } @media only screen and (max-width: 640px) { .sr_frmipt .ss_btn { border-top-right-radius: 8px; border-bottom-right-radius: 8px; width: 60px; height: 40px; font-size: 14px; } } .search-lists { padding: 0.50rem 0; width: 12.20rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .search-lists { padding: 20px; width: auto; } } .search-lists a + a { margin-top: 0.50rem; } @media only screen and (max-width: 640px) { .search-lists a + a { margin-top: 20px; } } .search-lists a { display: flex; } .search-lists a .img-box { width: 3.00rem; height: 2.00rem; flex-shrink: 0; } @media only screen and (max-width: 640px) { .search-lists a .img-box { display: none; } } .search-lists a .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0.10rem; } .search-lists a .text { padding-left: 0.30rem; padding-top: 0.10rem; } @media only screen and (max-width: 640px) { .search-lists a .text { padding: 0; } } .search-lists a .text .title { font-size: 0.20rem; font-weight: 600; color: #111; } @media only screen and (max-width: 640px) { .search-lists a .text .title { font-size: 13px; } } .search-lists a .text .des { line-height: 1.8; margin-top: 0.10rem; } @media only screen and (max-width: 640px) { .search-lists a .text .des { font-size: 12px; margin-top: 4px; } } .search-lists a .text .date { color: #afafaf; margin-top: 0.10rem; } @media only screen and (max-width: 640px) { .search-lists a .text .date { font-size: 12px; margin-top: 2px; } } 国产四虎永久在线观看,国产日韩在线视看第一页,国产偷倩在线播放