/* extracted from gongyigu common.css + self.css for about page */ .about-gyg,.about-gyg *{box-sizing:border-box;} .about-gyg{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:14px;line-height:1.5;color:#1A1A1A;background:#fff;width:100%;} .about-gyg img,.about-gyg video{display:inline-block;vertical-align:middle;max-width:100%;} @font-face{ font-family: 'DIN-Condensed-Bold'; src: url(/pages/imges/about/DIN%20Condensed_mianfeiziti.com.ttf) format('woff'); font-weight: normal; font-style: normal; } @font-face{ font-family: "iconfont"; src: url(/pages/imges/about/font_3109410_e5qay6aazoq.woff2) format('woff2'), url(/pages/imges/about/font_3109410_e5qay6aazoq.woff) format('woff'), url(/pages/imges/about/font_3109410_e5qay6aazoq.ttf) format('truetype'), url(/pages/imges/about/font_3109410_e5qay6aazoq.svg) format('svg'); } .iconfont{ font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-eye-view:before{ content: "\e644"; } .icon-time:before{ content: "\e642"; } @keyframes fadeInFromTop{ 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); }} @keyframes cycleImages{ 0% { background-image: url(/pages/imges/about/9fb820a4-b66b-4804-bf4a-2586658c416e.png); } 25% { background-image: url(/pages/imges/about/deve-history-icon-2.png); } 50% { background-image: url(/pages/imges/about/f4ef70e6-7bce-4d07-afd4-eec015ec3590.png); } 75% { background-image: url(/pages/imges/about/deve-history-icon-4.png); }} @keyframes leftRotating{ 0% { --rotate: 270deg; background: none; } 24% { --rotate: 270deg; background: none; } 25% { --rotate: 270deg; background: conic-gradient(from var(--rotate) at 75% 50%, #181A20 -33.36deg, #484848 38.82deg, #024F91 93.45deg, #FFFFFF 180.89deg, #2D2D2D 233.1deg, #181A20 326.64deg, #484848 398.82deg); } 100% { --rotate: -90deg; background: conic-gradient(from var(--rotate) at 75% 50%, #181A20 -33.36deg, #484848 38.82deg, #024F91 93.45deg, #FFFFFF 180.89deg, #2D2D2D 233.1deg, #181A20 326.64deg, #484848 398.82deg); }} @keyframes rotating{ 0% { --rotate: -270deg; background: none; } 24% { --rotate: -270deg; background: none; } 25% { --rotate: -270deg; background: conic-gradient(from var(--rotate) at 75% 50%, #181A20 -33.36deg, #484848 38.82deg, #2D2D2D 93.45deg, #FFFFFF 180.89deg, #024F91 233.1deg, #181A20 326.64deg, #484848 398.82deg); } 100% { --rotate: 90deg ; background: conic-gradient(from var(--rotate) at 75% 50%, #181A20 -33.36deg, #484848 38.82deg, #2D2D2D 93.45deg, #FFFFFF 180.89deg, #024F91 233.1deg, #181A20 326.64deg, #484848 398.82deg); }} @keyframes widthChange{ 0% { width: 0px; } 25% { width: 164px; } 100% { width: 164px; }} @keyframes widthToggle{ 0% { width: 0; } 100% { width: 400px; }} @keyframes zoomLoop{ 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); }} @keyframes shrinkLoop{ 0% { transform: scale(1); } 50% { transform: scale(0.7); } 100% { transform: scale(1); }} @keyframes moveUp{ from { transform: translateY(0); } to { transform: translateY(-8px); }} @keyframes shakeDown{ from { transform: translateY(0); } to { transform: translateY(8px); }} .pic-auto{ width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 1px; min-height: 1px; overflow: hidden;} .com-pic-cover{ width: 100%; height: 100%; object-fit: cover} .bar-logo-statistical .logo-statistical-container .bar-statistical-info{ transform: rotateY(180deg);} .bar-logo-statistical .logo-statistical-container .bar-statistical-info{ transform: rotateY(180deg);} .logo-statistical-container .bar-statistical-info .statistical-info-container{ width: 244px; height: 100px; border-radius: 4px; background-image: url(/pages/imges/about/bar-statistical-info-bg.png); background-size: 100% 100%; padding: 16px 16px 8px 28px; color: #F4F6FA; font-weight: 600; font-size: 14px;} .bar-statistical-info .statistical-info-container .country-barnd-pro{ display: flex; justify-content: space-between;} .statistical-info-container .country-barnd-pro .barnd-number{ display: flex; flex-direction: column; align-items: center; width: 80px; position: relative;} .statistical-info-container .country-barnd-pro .barnd-number::after{ position: absolute; content: ' '; width: 1px; height: 12px; background-color: #fff; opacity: 0.4; top: 4px; left: 0;} .statistical-info-container .country-barnd-pro .barnd-number::before{ position: absolute; content: ' '; width: 1px; height: 12px; background-color: #fff; opacity: 0.4; top: 4px; right: 0;} .bar-statistical-info .statistical-info-container .update-time{ text-align: center; font-weight: 400; font-size: 12px; margin-top: 16px;} .statistical-info{ background: var(--theme-color); width: 100%; margin-top: 40px;} .statistical-info .statistical-info-main{ width: 1200px; margin: auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; min-height: 100px;} .statistical-info .statistical-info-main .statistical-info-item{ color: #fff; display: flex; align-items: end; font-size: 14px;} .statistical-info .statistical-info-main .statistical-info-item svg{ margin-bottom: -4px;} .statistical-info-main .statistical-info-item .statistical-img{ width: 48px; height: 24px; margin: 0 8px 0 12px;} .statistical-info-main .statistical-info-item .statistical-num{ font-size: 36px; font-weight: 600; line-height: 36px; margin-right: 4px;} .pic-auto{ width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 1px; min-height: 1px; overflow: hidden;} .about-us-head{ height: 600px; background-image: url(/pages/imges/about/61813be7-28dc-4c5d-98e8-ae628ae6faf4.png); background-size: 100% 100%;} .about-us-head-container{ width: 1200px; height: 600px; padding: 40px 0 72px 0; margin: 0 auto;} .about-us-head-title{ color: #FFF; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 40px;} .about-us-head-describe{ width: 952px; height: 400px; border-radius: 8px; background: rgba(255, 255, 255, 0.80); color: #1A1A1A; font-size: 14px; font-weight: 400; line-height: 22px; padding: 40px 304px 40px 40px; position: relative;} .about-us-head-describe .describe-item{ margin-bottom: 40px;} .about-us-head-describe .about-us-video{ width: 496px; height: 280px; position: absolute; top: 62px; left: 708px; box-shadow: -20px 0 4px 0 rgba(203, 203, 203, 0.25);} .about-us-head-describe .about-us-video video{ width: 100%; border-radius: 8px; position: relative;} .about-us-head-describe .play-button-container{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center;} .enterprise-culture{ background: #FFF; height: 600px;} .enterprise-culture .enterprise-culture-container{ height: 600px; width: 1200px; margin: 0 auto;} .enterprise-culture-container .enterprise-culture-text{ height: 362px; display: flex; padding-top: 60px;} .enterprise-culture-container .enterprise-culture-text .enterprise-culture-item{ display: flex; opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;} .enterprise-culture-container .enterprise-culture-text .enterprise-culture-item.visible{ opacity: 1; transform: translateY(0);} .enterprise-culture-container .enterprise-culture-text .enterprise-culture-item:nth-child(1){ width: 208px; align-items: end; margin-left: 80px; transition-delay: 0.1s;} .enterprise-culture-container .enterprise-culture-text .enterprise-culture-item:nth-child(2){ width: 408px; align-items: center; margin-left: 160px; transition-delay: 0.3s;} .enterprise-culture-container .enterprise-culture-text .enterprise-culture-item:nth-child(3){ width: 216px; align-items: flex-start; margin-left: 80px; transition-delay: 0.4s;} .enterprise-culture-text .enterprise-culture-item .culture-item-container{ display: flex;} .enterprise-culture-item .culture-item-container .ball-line{ display: flex; flex-direction: column; align-items: center; margin-right: 12px; padding-top: 12px;} .culture-item-container .ball-line .culture-ball{ width: 16px; height: 16px; background: #010101; border-radius: 50%;} .enterprise-culture-item .culture-item-container .culture-line{ width: 1px; flex: 1; background-color: #B9B9B9;} .enterprise-culture-item .culture-item-container .culture-title{ color: #010101; font-size: 36px; font-style: normal; font-weight: 600; line-height: 44px; margin-bottom: 20px;} .enterprise-culture-item .culture-item-container .culture-content{ color: #010101; font-size: 20px; font-weight: 400; line-height: 28px;} .enterprise-culture-container .enterprise-culture-img{ height: 196px; background-image: url(/pages/imges/about/1340cc08-18ba-43f0-a290-0a949765cdea.png); background-size: 100% 100%;} .deve-history{ height: 1080px; width: 100%; background-image: url(/pages/imges/about/1b5d12af-3cc4-42b2-99f6-24ea98cf4c13.png); background-size: 100% 100%; overflow: hidden;} .deve-history-title{ color: #000; font-size: 36px; font-weight: 600; text-align: center; padding-top: 60px; padding-bottom: 20px;} .deve-history .deve-history-container{ margin: auto; width: 1200px; padding: 0 32px; height: 988px; overflow: hidden; position: relative;} .deve-history .deve-history-container .deve-history-icon{ height: 52px; width: 32px; background-size: 100% 100%; animation: cycleImages 3s infinite step-end; margin-bottom: 20px; margin-left: -5px;} .deve-history .deve-history-container .deve-history-item{ display: flex; position: absolute; align-items: center; width: 320px; margin-right: 32px;} .deve-history-container .deve-history-item .history-item-title{ color: #1A1A1A; font-size: 50px; font-weight: 1000; line-height: 44px; font-family: 'DIN-Condensed-Bold';} .deve-history-container .deve-history-item .all-history{ color: #7B7B7B; font-size: 14px; font-weight: 400; margin-left: 12px;} .deve-history-item .all-history .history-item{ margin-bottom: 12px; display: flex; width: 204px; line-height: 22px;} .deve-history-item .all-history .history-item:last-child{ margin-bottom: 0px;} .all-history .history-item .history-item-month{ margin-right: 12px; min-width: 32px;} .deve-history-container .active-deve-history .history-item-title{ color: #FF5D00;} .deve-history-container .active-deve-history .all-history{ color: #1A1A1A} .deve-history .deve-history-container .deve-history-item.history-2015{ left: 88px; top: 88px;} .deve-history .deve-history-container .deve-history-item.history-2017{ left: 88px; top: 272px; align-items: flex-end;} .deve-history .deve-history-container .deve-history-item.history-2018{ left: 440px; top: 272px;} .deve-history .deve-history-container .deve-history-item.history-2019{ left: 792px; top: 272px;} .deve-history .deve-history-container .deve-history-item.history-2020{ left: 792px; top: 468px;} .deve-history-item.history-2020 .history-item-title{ margin-top: 62px;} .deve-history .deve-history-container .deve-history-item.history-2021{ left: 440px; top: 532px; align-items: flex-start;} .deve-history .deve-history-container .deve-history-item.history-2022{ left: 88px; top: 532px;} .deve-history .deve-history-container .deve-history-item.history-2023{ left: 88px; top: 752px} .deve-history-item.history-2023 .history-item-title{ margin-top: 28px;} .deve-history-item.history-2023 .all-history .history-item{ align-items: center;} .deve-history .deve-history-container .deve-history-item.history-2024{ left: 440px; top: 662px; align-items: flex-end;} .deve-history-item.history-2024 .history-item-title,.deve-history-item.history-202 .history-item-title{ margin-bottom: 8px;} .deve-history .deve-history-container .deve-history-item.history-2025{ left: 792px; top: 772px; align-items: flex-end;} .deve-history-item.history-2025 .history-item-title{ margin-bottom: 4px;} .service-platform{ height: 1336px; background-image: url(/pages/imges/about/842c50e9-d8bb-4c0e-862c-302edc732fe7.png); background-size: 100% 100%; position: relative; overflow: hidden; width: 100%;} .service-platform .service-platform-container{ width: 1200px; margin: auto; height: 100%; position: relative;} .service-platform .service-platform-container .earth-img{ position: absolute; width: 362px; height: 720px; background-image: url(/pages/imges/about/963e4489-6c08-4d6c-a201-0be88c9f1cf3.png); background-size: 100% 100%; left: 2px; top: -16px;} .service-platform .service-platform-container .service-platform-title{ color: #FFF; font-size: 36px; font-weight: 600; text-align: center; padding-top: 82px;} .service-platform .service-platform-container .three-level-container{ display: flex; padding: 40px 40px 62px 20px; height: 486px; z-index: 9; position: inherit;} .service-platform-container .three-level-container .left-level-describe{ width: 344px; height: 100%;} .three-level-container .left-level-describe .platform-logo{ border-radius: 8px; padding: 1px; background: none; } .animation-three-level .left-level-describe .platform-logo{ animation: leftRotating 8s infinite;} .three-level-container .left-level-describe .platform-logo-container{ border-radius: 8px; display: flex; height: 112px; background-size: 100% 100%; padding: 12px 20px; justify-content: space-between; background-image: url(/pages/imges/about/13e4d1be-f444-481f-b077-3a3169a18a37.png);} .left-level-describe .platform-logo .platform-logo-item{ border-radius: 12px; background: rgba(255, 255, 255, 0.4); width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #FFF; font-size: 14px; font-weight: 600;} .platform-logo .platform-logo-item .platform-logo-img{ width: 40px; height: 40px; margin-bottom: 4px;} .three-level-container .left-level-describe .service-layer-description{ margin-top: 32px; border-radius: 8px; padding: 1px; background: none; } .animation-three-level .left-level-describe .service-layer-description{ animation: leftRotating 8s infinite;} .left-level-describe .service-layer-description .service-layer-description-container{ border-radius: 8px; display: flex; flex-wrap: wrap; color: #FFF; font-size: 14px; font-weight: 600; background-size: 100% 100%; background-image: url(/pages/imges/about/f12d8b05-5fa0-483c-b802-7a31f513f946.png);} .left-level-describe .service-layer-description .service-layer-item{ width: 114px; height: 78px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center;} .service-platform-container .three-level-container .center-level-describe{ flex: 1; width: 0; position: relative; display: flex; align-items: center; flex-direction: column;} .three-level-container .center-level-describe .center-level-item{ width: 294px; height: 112px; display: flex; align-items: center; justify-content: center; background-size: 100% 100%; color: var(--text-, #1A1A1A); font-size: 20px; font-weight: 600; margin-bottom: 32px;} .three-level-container .center-level-describe .center-level-item:nth-child(1){ background-image: url(/pages/imges/about/center-level-1.png);} .three-level-container .center-level-describe .center-level-item:nth-child(2){ background-image: url(/pages/imges/about/center-level-2.png);} .three-level-container .center-level-describe .center-level-item:nth-child(3){ background-image: url(/pages/imges/about/center-level-3.png);} .three-level-container .center-level-describe .center-level-line{ position: absolute; overflow: hidden; padding: 4px 0; width: 0; } .animation-three-level .center-level-describe .center-level-line{ animation: widthChange 8s infinite;} .three-level-container .center-level-describe .center-level-line .center-level-line-container{ display: flex; width: 164px; height: 32px;} .three-level-container .center-level-describe .level-line-1{ top: 44px; right: 282px; transform: scaleX(-1);} .three-level-container .center-level-describe .level-line-2{ right: 282px; bottom: 136px; transform: scaleX(-1);} .center-level-describe .level-line-2 .center-level-line-container{ align-items: end;} .three-level-container .center-level-describe .level-line-3{ bottom: 68px; left: 282px;} .center-level-describe .level-line-2 .enter-level-block{ margin-bottom: -3px;} .center-level-describe .center-level-line .center-level-block{ width: 8px; height: 8px; background-color: #F8F9FB; border-radius: 50%;} .service-platform-container .three-level-container .right-level-describe{ border-radius: 8px; margin-top: 12px; background: none; height: 367px; padding: 1px;} .animation-three-level .right-level-describe{ animation: rotating 8s infinite;} .three-level-container .right-level-describe .right-level-describe-container{ width: 316px; padding: 40px 20px; background-size: 100% 100%; background-image: url(/pages/imges/about/49737ff1-ec52-499c-b3ec-f4494b39e61a.png); backdrop-filter: blur(1px); border-radius: 8px; height: 365px;} .three-level-container .right-level-describe .right-level-title{ display: flex; align-items: center; color: #FFF; font-size: 14px; font-weight: 600; margin-bottom: 4px;} .right-level-describe .right-level-title .right-level-block{ width: 8px; height: 8px; border-radius: 50%; background-color: #BBCBDF; margin-right: 8px;} .three-level-container .right-level-describe .right-level-text{ color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 400; margin-bottom: 40px;} .transaction-mode{ width: 100%; height: 600px; display: flex; align-items: stretch; justify-content: center; margin-top: 40px; position: absolute; bottom: 0;} .transaction-mode .transaction-mode-container{ flex: 1; display: flex; align-items: center;} .transaction-mode .transaction-mode-item{ color: #FFF; font-size: 24px; font-weight: 600; width: 464px; height: 72px; display: flex; align-items: center; justify-content: center; background-color: #FF5D00; cursor: pointer;} .transaction-mode-1{ position: absolute; bottom: 0; background: linear-gradient(90deg, #FC8700 0%, #F84500 100%); width: 50%; height: 600px; transform: translateX(-100%); opacity: 0; left: 0; transition: all 1s ease; display: block; overflow: hidden;} .transaction-mode-content{ color: rgba(255, 255, 255, 0.80); font-size: 14px; font-weight: 400; padding-right: 200px; justify-content: end; margin-top: 68px; display: none;} .transaction-mode-content .transaction-mode-box{ display: flex; flex-direction: column; align-items: center;} .transaction-mode-content .transaction-mode-title{ color: #FFF; font-size: 20px; font-weight: 600; margin-bottom: 8px;} .transaction-mode-content .transaction-mode-btn{ width: 272px; height: 58px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 93, 0, 0.4) 0%, rgba(255, 198, 137, 0.4) 100%); color: #FFF; font-size: 20px; font-weight: 600; margin-top: 100px; display: flex; justify-content: center; align-items: center;} .transaction-mode-2{ position: absolute; bottom: 0; background: linear-gradient(90deg, #F84500 0%, #FC8700 100%); width: 50%; height: 600px; transform: translateX(100%); opacity: 0; right: 0; display: none; transition: all 0.5s ease; overflow: hidden;} .transaction-mode-2 .transaction-mode-content{ padding-right: 0px; padding-left: 200px; justify-content: start;} .brand-collection{ height: 600px;} .brand-collection .brand-collection-container{ padding: 60px 0 48px 0; height: 100%; width: 1200px; margin: auto;} .brand-collection .brand-collection-container .brand-collection-title{ color: #000; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 40px;} .brand-collection .brand-collection-container .all-brand-country{ display: flex;} .brand-collection-container .all-brand-country .brand-country-item{ border-radius: 12px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat;} .brand-collection-container .all-brand-country .brand-country-item:hover{ background-size: 120% 120% !important; } .all-brand-country .brand-country-item .brand-country-hover{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;} .all-brand-country .brand-country-item:hover .brand-country-hover{ border-radius: 12px; background: rgba(255, 93, 0, 0.40);} .brand-country-item .brand-country-hover .country-number{ color: #FFF; font-size: 14px; font-weight: 400;} .brand-country-item .brand-country-hover .country-ratio{ color: #FFF; font-size: 36px; font-weight: 600; margin-top: 8px;} .brand-collection-container .all-brand-country .brand-country-1{ width: 620px; margin-right: 20px;} .all-brand-country .brand-country-1 .brand-country-item{ width: 620px;} .all-brand-country .brand-country-1 .brand-country-item:nth-child(1){ height: 188px; margin-bottom: 20px; background-image: url(/pages/imges/about/96be802c-8c39-47fc-8bda-9a6561cf9c31.png);} .all-brand-country .brand-country-1 .brand-country-item:nth-child(2){ height: 200px; background-image: url(/pages/imges/about/d1943b61-a060-48de-aac0-42ecf6d268a8.png);} .brand-collection-container .all-brand-country .brand-country-2{ width: 244px; margin-right: 20px;} .all-brand-country .brand-country-2 .brand-country-item{ width: 244px;} .all-brand-country .brand-country-2 .brand-country-item:nth-child(1){ height: 116px; margin-bottom: 20px; background-image: url(/pages/imges/about/brand-country-3.png); margin-bottom: 20px;} .all-brand-country .brand-country-2 .brand-country-item:nth-child(2){ height: 124px; background-image: url(/pages/imges/about/a2c2dff7-24a8-4dc8-b59b-97ad66cad572.png); margin-bottom: 20px;} .all-brand-country .brand-country-2 .brand-country-item:nth-child(3){ height: 124px; background-image: url(/pages/imges/about/af8ecbb7-b992-4b64-b6b5-46934332452a.png);} .brand-collection-container .all-brand-country .brand-country-3{ width: 292px;} .brand-country-3 .brand-country-item .country-ratio{ font-size: 24px; font-weight: 600;} .all-brand-country .brand-country-3>.brand-country-item:nth-child(1){ width: 292px; height: 50px; margin-bottom: 20px; background-image: url(/pages/imges/about/brand-country-6.png); margin-bottom: 20px;} .all-brand-country .brand-country-3>.brand-country-item:nth-child(1) .country-ratio{ margin-top: 0; margin-left: 20px;} .brand-country-3>.brand-country-item:nth-child(1) .brand-country-hover{ flex-direction: row;} .brand-country-3-2{ display: flex; margin-bottom: 20px;} .brand-country-3-2 .brand-country-item .country-ratio{ margin-top: 12px;} .brand-country-3 .brand-country-3-2 .brand-country-item:nth-child(1){ width: 136px; height: 120px; background-image: url(/pages/imges/about/brand-country-7.png); margin-right: 20px;} .brand-country-3 .brand-country-3-2 .brand-country-item:nth-child(2){ width: 136px; height: 120px; background-image: url(/pages/imges/about/brand-country-8.png);} .all-brand-country .brand-country-3>.brand-country-item:last-child{ width: 296px; height: 200px; background: #F5F6F8;} .brand-country-3>.brand-country-item:last-child:hover .country-number{ color: #fff;} .brand-country-3>.brand-country-item:last-child:hover .country-ratio{ color: #fff;} .brand-country-3>.brand-country-item:last-child .country-number{ color: #7B7B7B; font-size: 20px; font-weight: 400;} .brand-country-3>.brand-country-item:last-child .country-ratio{ color: #1A1A1A; font-size: 24px; font-weight: 600;} .our-product{ height: 600px; background: rgba(255, 255, 255, 40%);} .our-product .our-product-container{ padding: 60px 0 66px 0; width: 1200px; margin: auto;} .our-product .our-product-container .our-product-title{ color: #000; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 35px;} .our-product .our-product-container .product-categroy{ display: flex; justify-content: center; align-items: center; color: #FF5D00; font-size: 40px; font-weight: 700;} .our-product-container .product-categroy .product-categroy-line{ width: 1px; height: 36px; background-color: #FF5D00;} .our-product .our-product-container .our-product-bar{ width: 100%; height: 60px; background-color: #FF5D00; margin-top: 8px; margin-bottom: 20px; color: #FFF; font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center;} .our-product .our-product-container .our-product-bar>div{ margin-right: 64px;} .our-product .our-product-container .our-product-bar>div:last-child{ margin-right: 0;} .our-product .our-product-container .all-product-tag{ width: 100%; height: 252px; background-image: url(/pages/imges/about/16526b5b-d52b-474c-af5a-a01c3c3e4431.png); background-size: 100% 100%;} .our-clients{ width: 100%; height: 600px; background-image: url(/pages/imges/about/a70a3854-c186-4d08-a917-50e0861b08b4.png); background-size: 100% 100%;} .our-clients-container{ width: 1200px; margin: auto; height: 100%; display: flex; align-items: center; justify-content: center; color: #FF5D00; font-size: 36px; font-weight: 600; flex-direction: column; position: relative; padding: 56px 0 68px 0;} .our-clients-container .our-clients-line{ width: 440px; height: 4px; margin-top: 8px;} .our-clients-line .clients-line-animation{ background: #FF5D00; height: 2px; border-radius: 4px;} .our-clients-container .our-clients-text{ background: url(/pages/imges/about/our-clients-text.png); width: 436px; height: 56px; background-size: 100% 100%; position: absolute; top: 288px;} .our-clients-container .zoom-in{ animation: zoomLoop 2s infinite ease-in-out;} .our-clients-container .loop-shrink{ animation: shrinkLoop 2s infinite ease-in-out;} .our-clients-container .up-animation{ animation: moveUp 1.5s infinite alternate;} .shake-down{ animation: shakeDown 1.5s infinite alternate;} .our-clients-container .light-color-bg{ width: 24px; height: 24px; border-radius: 8px; border: 1px solid #E3EFF7; background: #FFC29F; position: absolute;} .our-clients-container .light-color-bg-1{ width: 40px; height: 40px; left: 60px; top: 68px;} .our-clients-container .light-color-bg-2{ left: 568px; top: 500px;} .our-clients-container .light-color-bg-3{ right: 160px; top: 220px;} .our-clients-container .our-clients-1{ position: absolute; width: 80px; height: 80px; right: 316px; bottom: 72px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-1.png);} .our-clients-container .our-clients-2{ position: absolute; width: 66px; height: 56px; right: 232px; bottom: 378px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-2.png);} .our-clients-container .our-clients-3{ position: absolute; width: 50px; height: 50px; right: 212px; bottom: 484px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-3.png);} .our-clients-container .our-clients-4{ position: absolute; width: 180px; height: 180px; left: 112px; bottom: 396px; background-size: 100% 100%; background-image: url(/pages/imges/about/0dd29022-b117-4d13-91bf-d68d7fa9cc47.png);} .our-clients-container .our-clients-5{ position: absolute; width: 50px; height: 50px; left: 196px; bottom: 72px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-5.png);} .our-clients-container .our-clients-6{ position: absolute; width: 200px; height: 200px; left: 380px; bottom: -16px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-6.png);} .our-clients-container .our-clients-7{ position: absolute; width: 220px; height: 220px; right: 104px; bottom: 4px; background-size: 100% 100%; background-image: url(/pages/imges/about/20a8790e-2c31-48ac-abd3-1d3fe5842038.png);} .our-clients-container .our-clients-8{ position: absolute; width: 220px; height: 220px; left: -52px; bottom: 256px; background-size: 100% 100%; background-image: url(/pages/imges/about/22c8b28d-a859-4b22-9bdc-f0a32037c41d.png);} .our-clients-container .our-clients-9{ position: absolute; width: 220px; height: 220px; right: 0px; top: 36px; background-size: 100% 100%; background-image: url(/pages/imges/about/0ec4f5c5-74e0-4971-b8a0-eca3f456d1b5.png);} .our-clients-container .our-clients-10{ position: absolute; width: 220px; height: 220px; left: 232px; bottom: -8px; background-size: 100% 100%; background-image: url(/pages/imges/about/2055e6a4-8555-46d9-8d27-4cebbbd5fcf6.png);} .our-clients-container .our-clients-11{ position: absolute; width: 232px; height: 232px; right: 276px; bottom: 336px; background-size: 100% 100%; background-image: url(/pages/imges/about/762f041a-269a-4164-abf4-86cfa67f38b9.png);} .our-clients-container .our-clients-12{ position: absolute; width: 204px; height: 204px; left: 308px; bottom: 356px; background-size: 100% 100%; background-image: url(/pages/imges/about/92cd2726-1d9e-4c38-94c0-ff82cb9d7390.png);} .our-clients-container .our-clients-13{ position: absolute; width: 200px; height: 200px; left: -44px; bottom: 112px; background-size: 100% 100%; background-image: url(/pages/imges/about/95daab2f-44e3-49d5-9006-5eb584864509.png);} .our-clients-container .our-clients-14{ position: absolute; width: 172px; height: 172px; right: -17px; bottom: 24px; background-size: 100% 100%; background-image: url(/pages/imges/about/52617d51-a40b-415a-b5f3-f8aa03c9cefc.png);} .our-clients-container .our-clients-15{ position: absolute; width: 72px; height: 72px; left: 564px; bottom: 468px; background-size: 100% 100%; background-image: url(/pages/imges/about/our-clients-15.png);} .our-clients-container .our-clients-16{ position: absolute; width: 72px; height: 72px; left: 564px; bottom: 468px; background-size: 100% 100%; background-image: url(/pages/imges/about/50327922-61f1-46dc-b021-3af368912065.png);} .our-clients-container .our-clients-17{ position: absolute; width: 172px; height: 172px; left: 136px; bottom: 294px; background-size: 100% 100%; background-image: url(/pages/imges/about/50327922-61f1-46dc-b021-3af368912065.png);} .our-clients-container .our-clients-18{ position: absolute; width: 156px; height: 156px; left: -12px; bottom: 14px; background-size: 100% 100%; background-image: url(/pages/imges/about/c46ab162-8c53-4071-a75d-3fd6f258aa83.png);} .our-clients-container .our-clients-19{ position: absolute; width: 208px; height: 208px; right: -32px; bottom: 182px; background-size: 100% 100%; background-image: url(/pages/imges/about/4b6af4db-1ac1-4b19-a54d-bd6ae5dce6e4.png);} .our-clients-container .our-clients-20{ position: absolute; width: 180px; height: 180px; right: 412px; bottom: 16px; background-size: 100% 100%; background-image: url(/pages/imges/about/9a4f5365-7c61-4bbf-aea8-f36b4ceda00e.png);} .our-clients-container .our-clients-21{ position: absolute; width: 180px; height: 180px; right: 168px; bottom: 192px; background-size: 100% 100%; background-image: url(/pages/imges/about/4398e1de-895d-43b7-8c50-f5692679bada.png);} .our-clients-container .our-clients-22{ position: absolute; width: 160px; height: 160px; left: 128px; bottom: 140px; background-size: 100% 100%; background-image: url(/pages/imges/about/5b9ee587-4441-44cd-8880-1aff76af03e1.png);} .honor-exhibition{ height: 600px; background: #fff; position: relative;} .honor-exhibition .honor-exhibition-container{ width: 1200px; height: 100%; padding: 60px 0 104px 0; margin: auto; position: relative;} .honor-exhibition .honor-exhibition-container .honor-exhibition-title{ color: #000; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 116px;} .honor-exhibition .honor-exhibition-bar{ width: 100%; height: 98px; position: absolute; bottom: 24px; background-image: url(/pages/imges/about/honor-exhibition-bar.png); background-size: 100% 100%; z-index: 9;} .honor-exhibition .honor-exhibition-container .all-honor-exhibition{ height: 280px; width: 100%; overflow: hidden;} .honor-exhibition .honor-exhibition-container .swiper-slide{ width: auto; display: flex; flex-direction: column; position: relative;} .honor-exhibition-container .all-honor-exhibition .reality-img{ height: 250px; width: auto;} .honor-exhibition-container .all-honor-exhibition .sham-img{ height: 260px; width: 100%; position: absolute; bottom: -232px; opacity: 0.4; transform: rotateX(180deg);} .honor-exhibition .honor-exhibition-container .left-swiper-btn{ position: absolute; left: -58px; top: calc(50% + 52px); user-select: none;} .honor-exhibition .honor-exhibition-container .left-swiper-btn:hover path{ stroke: var(--theme-color);} .honor-exhibition .honor-exhibition-container .right-swiper-btn{ position: absolute; right: -58px; top: calc(50% + 52px); user-select: none;} .honor-exhibition .honor-exhibition-container .right-swiper-btn:hover path{ stroke: var(--theme-color);} .information-context{ height: 600px; background: #FFF;} .information-context .information-context-container{ width: 1200px; height: 100%; padding: 60px 0; margin: auto;} .information-context-title{ color: #000; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 20px;} .information-context .information-context-container .information-context-tag{ display: flex; justify-content: center; margin-bottom: 40px;} .information-context-container .information-context-tag .information-tag-item{ height: 40px; border-radius: 50px; background: #F5F6F8; padding: 8px 32px; color: #000; font-size: 16px; font-weight: 400; margin-right: 12px; cursor: pointer;} .information-context-container .information-context-tag .active-information-tag{ color: #FF5D00;} .information-context .information-context-container .information-context-list{ height: 336px; overflow: hidden; display: flex;} .information-context-container .information-context-list .information-context-item{ display: flex; width: 100%; flex-shrink: 0; transform: translateX(1200px);} .information-context-container .information-context-list .information-context-item:first-child{ transform: translateX(0px);} .information-context-container .information-context-list .information-context-swiper{ width: 588px; height: 336px; margin-right: 40px; overflow: hidden; position: relative;} .information-context-list .information-context-swiper .swiper-wrapper{ width: 588px; height: 336px;} .information-context-swiper .swiper-wrapper .swiper-slide{ display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden;} .information-context-list .information-context-swiper .information-swiper-left{ width: 80px; height: 80px; background-color: rgba(0, 0, 0, 0.40); position: absolute; left: -40px; top: calc(50% - 40px); z-index: 9; display: flex; justify-content: flex-end; align-items: center; padding: 8px; border-radius: 50%; cursor: pointer;} .information-context-list .information-context-swiper .information-swiper-left:hover path{ fill: var(--theme-color);} .information-context-list .information-context-swiper .information-swiper-right{ width: 80px; height: 80px; background-color: rgba(0, 0, 0, 0.40); position: absolute; right: -40px; top: calc(50% - 40px); z-index: 9; display: flex; justify-content: flex-start; align-items: center; padding: 16px; border-radius: 50%; cursor: pointer;} .information-context-list .information-context-swiper .information-swiper-right:hover path{ fill: var(--theme-color);} .information-context-container .information-context-list .information-context-text{ flex: 1;} .information-context-list .information-context-text .context-text-item{ display: none;} .information-context-container .information-context-list .information-context-text .context-text-item:first-child{ display: block;} .information-context-list .information-context-text .context-text-item .context-text-vessel{ display: flex; flex-direction: column; justify-content: space-between; height: 336px; padding-bottom: 20px;} .information-context-list .information-context-text .information-title{ color: #000; font-size: 20px; font-weight: 600; margin-bottom: 4px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; max-height: 52px;} .information-context-list .information-context-text .information-date-view{ display: flex; align-items: center; color: #999; font-size: 12px; font-weight: 400;} .information-context-text .information-date-view .information-date-line{ width: 1px; height: 12px; background-color: #D9D9D9; margin: 0 20px;} .information-context-list .information-context-text .information-describe{ margin-top: 20px; color: #7B7B7B; font-size: 14px; font-weight: 400; line-height: 22px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; height: 132px;} .information-context-list .information-context-text .view-more-btn{ width: 128px; height: 40px; display: flex; align-items: center; justify-content: center; color: #FF5D00; font-size: 16px; font-weight: 400; border-radius: 4px; border: 1px solid #FF5D00; text-decoration: none;} .contact-information{ height: 652px; background-color: #F5F6F8;} .contact-information .contact-information-container{ width: 1200px; padding-top: 40px; margin: auto;} .contact-information .contact-information-container .information-context-title{ color: #000; font-size: 36px; font-weight: 600; margin-bottom: 44px;} .contact-information .contact-information-container .all-contact-info{ display: flex; justify-content: space-between; position: relative;} .contact-information-container .all-contact-info .contact-info-item{ width: 224px; height: 504px; background: linear-gradient(180deg, #FFF 0%, #F5F6F8 100%); display: flex; flex-direction: column; align-items: center; padding: 40px 0; color: #000; font-size: 16px; font-weight: 400; position: relative;} .contact-information-container .all-contact-info .contact-info-item:hover{ transform: scale(1.05);} .all-contact-info .contact-info-item .contact-info-icon{ width: 60px; height: 60px;} .all-contact-info .contact-info-item .contact-info-title{ color: #7B7B7B; font-size: 20px; font-weight: 400; margin: 12px 0 8px;} .all-contact-info .contact-info-item .qr-popup{ position: absolute; top: 0; width: 224px; height: 212px; background: rgba(0, 0, 0, 0.40); color: #FFF; font-size: 16px; font-weight: 400; display: none; text-align: center; line-height: 172px; padding: 20px;} .contact-info-item .qr-popup .qr-popup-img{ width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px;} .contact-information-container .all-contact-info .contact-info-prop{ position: absolute; width: 1000px; height: 244px; border-top: 1px solid #FF5D00; background: linear-gradient(180deg, rgba(246, 185, 151, 0.10) 0%, rgba(255, 255, 255, 0.10) 95.06%); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; padding: 32px 0 40px 0; left: calc(50% - 500px); top: 224px; opacity: 0;} .all-contact-info .contact-info-prop .prop-info-title{ color: #000; font-size: 20px; font-weight: 600; margin-bottom: 20px; text-align: center;} .all-contact-info .contact-info-prop .prop-info-row{ color: #7B7B7B; font-size: 14px; font-weight: 400; display: flex; align-items: center; margin-bottom: 12px; justify-content: flex-start;} .contact-info-prop .prop-info-row .info-row-block{ width: 4px; height: 12px; background-color: #FF5D00; margin-right: 8px;} .all-contact-info .contact-info-prop .emphasis-text{ color: #1A1A1A; font-weight: 600} .statistical-info{ margin-top: 0;} /* 统计条主题色 */ .about-gyg, .statistical-info{--theme-color:#FF5D00;}