.banner { width: 100%; height: 100vh; overflow: hidden; position: relative; background-color: white; position: fixed; top: 0; left: 0; z-index: 1; } .banner .swiper1 { width: 100%; height: 100vh; position: relative; } .banner .swiper1 .swiper-slide { width: 100%; overflow: hidden; } .banner .swiper1 .swiper-slide .box { width: 100%; height: 100%; position: relative; overflow: hidden; } .banner .swiper1 .swiper-slide .box .img { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .banner .swiper1 .swiper-slide .box .img video { position: relative; height: calc(100vh - var(--browser-address-bar, 0px)); object-fit: cover; object-position: 50% 50%; width: 100%; z-index: -1; } .banner .swiper1 .swiper-slide .box .text { position: absolute; left: 13.5%; top: 44%; height: 0.585rem; overflow: hidden; } .banner .swiper1 .swiper-slide .box .text span { display: block; font-size: 0.585rem; font-weight: bold; line-height: 0.585rem; color: #ffffff; } .banner .swiper1 .swiper-slide .box .s-text { position: absolute; left: 13.5%; top: calc(44% + 54px + 0.585rem); height: 0.24rem; overflow: hidden; } .banner .swiper1 .swiper-slide .box .s-text span { display: block; font-size: 0.24rem; line-height: 0.24rem; color: #ffffff; opacity: 0.5; } .banner .swiper1 .swiper-pagination-bullets { bottom: 12vh; left: 13.5%; width: auto; } .banner .swiper1 .swiper-pagination-bullets .swiper-pagination-bullet { width: 40px; height: 2px; display: inline-block; border-radius: 0; background: white; opacity: 1; margin: 0 12px; transition: 0.5s; } .banner .swiper1 .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 80px; height: 2px; background: #e84127; opacity: 1; } .banner .swiper1 .swiper-button-next, .banner .swiper1 .swiper-button-prev { position: absolute; top: 0; width: 50%; height: 100vh; margin-top: 0; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .banner .swiper1 .swiper-button-next::after, .banner .swiper1 .swiper-button-prev::after { content: ""; } .banner .swiper1 .swiper-button-next1 { cursor: url(../images/cursor-next.png) 22 28, pointer; } .banner .swiper1 .swiper-button-prev1 { cursor: url(../images/cursor-prev.png) 22 28, pointer; } .m-banner { display: none ; } .banner-box { width: 100%; height: 100vh; } .news { width: 100%; padding-top: 0.45rem; background-color: white; padding-bottom: 0.8025rem; position: relative; z-index: 2; } .news .box { width: 73%; margin: 0 auto; position: relative; } .news .box .left { overflow: hidden; } .news .box .left.init .s-title { -webkit-transform: translateX(-101%); transform: translateX(-101%); } .news .box .left.init .s-title .cover { -webkit-transform: translateX(0%); transform: translateX(0%); } .news .box .left.init .title { -webkit-transform: translateX(-101%); transform: translateX(-101%); } .news .box .left.init .title .cover { -webkit-transform: translateX(0%); transform: translateX(0%); } .news .box .left .s-title { font-size: 0.21rem; font-weight: bold; line-height: 0.21rem; color: #333333; position: relative; overflow: hidden; display: inline-block; -webkit-transform: translateX(0%); transform: translateX(0%); transition: transform 0.5s cubic-bezier(0, 0, 0, 1); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0, 0, 0, 1); } .news .box .left .s-title .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transition: transform 0.4s cubic-bezier(0, 0, 0, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0, 1); -webkit-transform: translateX(101%); transform: translateX(101%); transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .news .box .left .title { font-family: "Gotham-Bold"; font-size: 0.27rem; line-height: 0.2rem; letter-spacing: -0.0075rem; color: #d9d9d9; margin-top: 0.075rem; position: relative; overflow: hidden; display: inline-block; -webkit-transform: translateX(0%); transform: translateX(0%); transition: transform 0.5s cubic-bezier(0, 0, 0, 1); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0, 0, 0, 1); transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .news .box .left .title .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transition: transform 0.4s cubic-bezier(0, 0, 0, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0, 1); -webkit-transform: translateX(101%); transform: translateX(101%); transition-delay: 0.8s; -webkit-transition-delay: 0.8s; } .news .box .button { width: 1.8rem; height: 0.4875rem; background-color: #f3f3f3; position: absolute; right: 0; top: 6px; overflow: hidden; display: inline-block; transition: background-color 0s cubic-bezier(0.52, 0.08, 0.18, 1) 0s; } .news .box .button a { display: inline-block; width: 100%; text-align: center; line-height: 0.4875rem; font-size: 0.12rem; color: #999999; position: relative; z-index: 1; transition: 0.3s cubic-bezier(0.52, 0.08, 0.18, 1); } .news .box .button::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 110%; height: 100%; background-color: #e84127; transition: -webkit-transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1); transition: transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1); transition: transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1), -webkit-transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: translateX(-101%) skewX(-17.62deg); transform: translateX(-101%) skewX(-17.62deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news .box .button:hover { background-color: #e84127; transition: background-color 0.1s linear 0.35s; } .news .box .button:hover a { color: white; } .news .box .button:hover::after { -webkit-transform: translateX(0) skewX(-17.62deg); transform: translateX(0) skewX(-17.62deg); -webkit-transform-origin: left top; transform-origin: left top; } .news .box .tabs { width: 100%; position: relative; margin-top: 0.525rem; } .news .box .tabs .horizontal { position: absolute; left: 2.805rem; top: -0.735rem; } .news .box .tabs .horizontal li { float: left; font-size: 0.15rem; font-weight: bold; line-height: 0.15rem; color: #cdcdcd; margin-right: 0.4125rem; position: relative; transition: 0.5s; cursor: pointer; } .news .box .tabs .horizontal li::after { content: ""; width: 0; height: 2px; background-color: #e84127; position: absolute; left: 0; bottom: -5px; transition: 0.5s; } .news .box .tabs .horizontal li:hover { color: #e84127; } .news .box .tabs .horizontal li:hover::after { width: 100%; } .news .box .tabs .horizontal li.selectActive { color: #e84127; } .news .box .tabs .horizontal li.selectActive::after { width: 100%; } .news .box .tabs .tab { width: 100%; } .news .box .tabs .tab::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .news .box .tabs .tab .tab-left { width: 47.32%; float: left; } .news .box .tabs .tab .tab-left .swiper-container { width: 100%; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.1); } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide { width: 100%; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a { display: block; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .img-box { display: block; width: 100%; height: 2.91001rem; position: relative; overflow: hidden; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .img-box .img { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: -100px; bottom: -100px; margin: auto; width: 100%; height: 100%; transition: 0.5s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; transform: scale(1.0001); } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text { width: 100%; height: 1.56rem; display: block; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .left { width: 0.51rem; display: block; float: left; margin-left: 0.37rem; margin-top: 0.2rem; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .left .top { font-family: "DIN-Bold"; font-size: 0.51rem; line-height: 0.51rem; letter-spacing: -0.0225rem; color: #e84127; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .left .bottom { margin-top: 0.18rem; padding-top: 0.21rem; border-top: solid 0.015rem #d9d9d9; font-family: "DIN-Bold"; font-size: 0.15rem; line-height: 0.15rem; letter-spacing: -0.0075rem; color: #e84127; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .right { width: 3.4125rem; display: block; float: left; margin-top: 0.26rem; margin-left: 0.3rem; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .right .title { font-size: 0.18rem; font-weight: bold; line-height: 0.27rem; color: #000000; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 0.54rem; transition: 0.5s; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a .text .right .p { font-size: 0.135rem; line-height: 0.24rem; color: #666666; margin-top: 0.045rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 0.48rem; } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a:hover .img-box .img { transform: scale(1.1); } .news .box .tabs .tab .tab-left .swiper-container .swiper-slide a:hover .text .right .title { color: #e84127; } .news .box .tabs .tab .tab-left .swiper-container .swiper-pagination-bullets { bottom: 1.65rem; right: 0.315rem; left: auto; width: auto; } .news .box .tabs .tab .tab-left .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { width: 0.4125rem; height: 0.0225rem; display: inline-block; border-radius: 0; background: #cecece; opacity: 1; } .news .box .tabs .tab .tab-left .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #e84127; } .news .box .tabs .tab .tab-right { width: 46.83%; float: left; margin-left: 5.85%; } .news .box .tabs .tab .tab-right .list { width: 100%; } .news .box .tabs .tab .tab-right .list .item { width: 100%; margin-bottom: 0.2475rem; padding-bottom: 0.2475rem; border-bottom: solid 1px #e6e6e6; } .news .box .tabs .tab .tab-right .list .item:last-child { border-bottom: 0; } .news .box .tabs .tab .tab-right .list .item a { display: block; } .news .box .tabs .tab .tab-right .list .item a::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .news .box .tabs .tab .tab-right .list .item a .img-box { display: block; width: 1.125rem; height: 0.7425rem; position: relative; overflow: hidden; float: left; } .news .box .tabs .tab .tab-right .list .item a .img-box .img { width: 100%; height: 100%; transition: 0.5s ease; position: relative; } .news .box .tabs .tab .tab-right .list .item a .img-box .img img { width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; position: absolute; left: 0; top: -100px; bottom: -100px; margin: auto; } .news .box .tabs .tab .tab-right .list .item a .text { display: block; float: left; width: calc(100% - 1.485rem); margin-left: 0.36rem; } .news .box .tabs .tab .tab-right .list .item a .text .title { font-size: 0.15rem; line-height: 0.24rem; color: #333333; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: 0.5s; } .news .box .tabs .tab .tab-right .list .item a .text .time { font-family: "Gotham-Bold"; font-size: 0.12rem; line-height: 0.12rem; color: #999; margin-top: 0.0825rem; } .news .box .tabs .tab .tab-right .list .item a:hover .img-box .img { transform: scale(1.2); } .news .box .tabs .tab .tab-right .list .item a:hover .text .title { color: #e84127; text-decoration: underline; text-underline-offset: 0.03rem; } .industry { width: 100%; height: 5.355rem; position: relative; background-color: white; overflow: hidden; z-index: 2; } .industry::after { content: ''; width: 0; height: 0; display: block; float: none; clear: both; } .industry .title { position: absolute; top: 0; left: 13.5%; z-index: 10; padding-left: 0.2025rem; } .industry .title::after { content: ""; width: 2px; height: 1.04rem; background-color: #ffffff; opacity: 0.3; position: absolute; left: 0; top: 0; transition: 1s; } .industry .title .h2-box { width: 0.9rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .industry .title .h2-box .h2 { width: 0.9rem; font-size: 0.21rem; font-weight: bold; line-height: 0.21rem; color: #ffffff; margin-top: 0.45rem; } .industry .title .h3-box { width: 3rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .industry .title .h3-box .h3 { width: 3rem; font-family: "Gotham-Bold"; font-size: 0.27rem; line-height: 0.27rem; letter-spacing: -0.0075rem; color: #ffffff; opacity: 0.2; margin-top: 0.12rem; } .industry .title.open::after { content: ""; height: 0; } .industry .title.open .h2-box { width: 0; } .industry .title.open .h3-box { width: 0; } .industry .left { width: 50%; height: 100%; float: left; } .industry .left a { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; cursor: url(../images/cursor_link.png) 30 30, pointer; } .industry .left a .img { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: -100px; bottom: -100px; margin: auto; width: 100%; height: 100%; transition: 0.5s; transform: scale(1.01); } .industry .left a .img img { width: 100%; height: 100%; } .industry .left a .icon { display: block; width: 0.9825rem; height: 0.9825rem; position: relative; margin-top: 1.8375rem; margin-left: 2.1825rem; } .industry .left a .icon img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; } .industry .left a .icon img.red { opacity: 0; } .industry .left a .icon img.white { opacity: 1; } .industry .left a .text { position: relative; display: block; margin-top: 0.2925rem; margin-left: 2.1825rem; } .industry .left a .text .h4 { font-size: 0.39rem; line-height: 0.39rem; color: #ffffff; } .industry .left a .text .h5 { font-size: 0.18rem; line-height: 0.18rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .left a .button { position: absolute; display: block; width: 1.35rem; height: 0.4425rem; background-color: rgba(255, 255, 255, 0.23); left: 5rem; top: 3.254rem; font-size: 0.12rem; line-height: 0.4425rem; color: #fff; text-align: center; transition: 0.5s; opacity: 0; } .industry .left a:hover .img { transform: scale(1.1); } .industry .left a:hover .icon img.red { opacity: 1; } .industry .left a:hover .icon img.white { opacity: 0; } .industry .left a:hover .button { opacity: 1; left: 4.8rem; } .industry .right { width: 50%; height: 100%; float: left; } .industry .right .right-top { width: 100%; height: 50%; } .industry .right .right-top a { width: 100%; display: block; height: 100%; position: relative; overflow: hidden; cursor: url(../images/cursor_link.png) 30 30, pointer; } .industry .right .right-top a .img { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: -100px; bottom: -100px; margin: auto; width: 100%; height: 100%; transition: 0.5s; transform: scale(1.01); } .industry .right .right-top a .img img { width: 100%; height: 100%; } .industry .right .right-top a .icon { display: block; width: 0.69rem; height: 0.69rem; position: relative; margin-top: 1.02rem; margin-left: 0.96rem; float: left; } .industry .right .right-top a .icon img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; } .industry .right .right-top a .icon img.red { opacity: 0; } .industry .right .right-top a .icon img.white { opacity: 1; } .industry .right .right-top a .text { position: relative; display: block; margin-top: 0.9825rem; margin-left: 0.435rem; float: left; } .industry .right .right-top a .text .h4 { font-size: 0.39rem; line-height: 0.39rem; color: #ffffff; } .industry .right .right-top a .text .h5 { font-size: 0.18rem; line-height: 0.18rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .right .right-top a .button { position: relative; display: block; width: 1.35rem; height: 0.4425rem; background-color: rgba(255, 255, 255, 0.23); margin-top: 1.156rem; margin-left: 0.6rem; font-size: 0.12rem; line-height: 0.4425rem; color: #fff; text-align: center; transition: 0.5s; opacity: 0; float: left; } .industry .right .right-top a:hover .img { transform: scale(1.1); } .industry .right .right-top a:hover .icon img.red { opacity: 1; } .industry .right .right-top a:hover .icon img.white { opacity: 0; } .industry .right .right-top a:hover .button { opacity: 1; margin-left: 0.435rem; } .industry .right .right-bottom { width: 100%; height: 50%; } .industry .right .right-bottom a { width: 100%; display: block; height: 100%; position: relative; overflow: hidden; cursor: url(../images/cursor_link.png) 30 30, pointer; } .industry .right .right-bottom a .img { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: -100px; bottom: -100px; margin: auto; width: 100%; height: 100%; transition: 0.5s; transform: scale(1.01); } .industry .right .right-bottom a .img img { width: 100%; height: 100%; } .industry .right .right-bottom a .icon { display: block; width: 0.6525rem; height: 0.7875rem; position: relative; margin-top: 0.975rem; margin-left: 1.035rem; float: left; } .industry .right .right-bottom a .icon img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; } .industry .right .right-bottom a .icon img.red { opacity: 0; } .industry .right .right-bottom a .icon img.white { opacity: 1; } .industry .right .right-bottom a .text { position: relative; display: block; margin-top: 0.9825rem; margin-left: 0.3825rem; float: left; } .industry .right .right-bottom a .text .h4 { font-size: 0.39rem; line-height: 0.39rem; color: #ffffff; } .industry .right .right-bottom a .text .h5 { font-size: 0.18rem; line-height: 0.18rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .right .right-bottom a .button { position: relative; display: block; width: 1.35rem; height: 0.4425rem; background-color: rgba(255, 255, 255, 0.23); margin-top: 1.156rem; margin-left: 1.1rem; font-size: 0.12rem; line-height: 0.4425rem; color: #fff; text-align: center; transition: 0.5s; opacity: 0; float: left; } .industry .right .right-bottom a:hover .img { transform: scale(1.1); } .industry .right .right-bottom a:hover .icon img.red { opacity: 1; } .industry .right .right-bottom a:hover .icon img.white { opacity: 0; } .industry .right .right-bottom a:hover .button { opacity: 1; margin-left: 0.935rem; } .number-animate { font-family: DIN-Bold; line-height: 0.5625rem; height: 0.5625rem; font-size: 0.5625rem; overflow: hidden; display: inline-block; position: relative; } .number-animate .number-animate-dom { width: 0.28rem; text-align: center; float: left; position: relative; top: 0; } .number-animate .number-animate-dom span { float: left; width: 100%; height: 0.5625rem; line-height: 1.1; } .data-box { width: 100%; height: 7.05rem; position: relative; overflow: hidden; z-index: 2; background-color: white; } .data-box .box { width: 73%; height: 100%; margin: 0 auto; position: relative; z-index: 1; } .data-box .box .title { position: absolute; top: 0; z-index: 10; padding-left: 0.2025rem; } .data-box .box .title::after { content: ""; width: 2px; height: 1.04rem; background-color: #e84127; opacity: 0.3; position: absolute; left: 0; top: 0; transition: 1s; } .data-box .box .title .h2-box { width: 1.2rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .data-box .box .title .h2-box .h2 { width: 1.2rem; font-size: 0.21rem; font-weight: bold; line-height: 0.21rem; color: #333333; margin-top: 0.45rem; } .data-box .box .title .h3-box { width: 2.2rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .data-box .box .title .h3-box .h3 { width: 2.2rem; font-family: "Gotham-Bold"; font-size: 0.27rem; line-height: 0.27rem; letter-spacing: -0.0075rem; color: #c7c7c7; margin-top: 0.12rem; } .data-box .box .title.open::after { content: ""; height: 0; } .data-box .box .title.open .h2-box { width: 0; } .data-box .box .title.open .h3-box { width: 0; } .data-box .box .h1-box { width: 5.5rem; overflow: hidden; margin: 0 auto; transition: 1s; transition-delay: 1s; } .data-box .box .h1-box .h1 { width: 5.5rem; font-size: 0.45rem; line-height: 0.45rem; color: #333333; text-align: center; margin-top: 1.7775rem; } .data-box .box .h1-box .h1 span { color: #e84127; margin-right: 0.2625rem; } .data-box .box .h1-box.open { width: 0; } .data-box .box .p { width: 80%; margin: 0 auto; margin-top: 0.405rem; text-align: center; } .data-box .box .p p { font-size: 0.135rem; line-height: 0.27rem; color: #333333; } .data-box .box .data { width: 100%; position: absolute; bottom: 0; left: 0; } .data-box .box .data .list { width: 100%; } .data-box .box .data .list .item { background-color: white; position: absolute; bottom: 0; text-align: center; padding-top: 0.4725rem; box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.1); } .data-box .box .data .list .item .count-title { display: inline-block; font-family: "DIN-Bold"; font-size: 0.5625rem; line-height: 0.5625rem; letter-spacing: -0.0225rem; color: #000000; transition: 0.5s; } .data-box .box .data .list .item1 { width: 2.02501rem; height: 2.01751rem; left: 0; z-index: 3; transition: 0.5s; } .data-box .box .data .list .item1 .number::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .data-box .box .data .list .item1 .number .unit { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.0675rem; } .data-box .box .data .list .item1 .p { font-size: 0.135rem; line-height: 0.135rem; color: #666666; margin-top: 0.15rem; } .data-box .box .data .list .item1:hover { height: 2.2rem; } .data-box .box .data .list .item1:hover .count-title { color: #e84127; } .data-box .box .data .list .item2 { width: 2.02501rem; height: 1.56751rem; left: 2.02501rem; transition: 0.5s; } .data-box .box .data .list .item2 .number .unit { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.0675rem; } .data-box .box .data .list .item2 .p { font-size: 0.135rem; line-height: 0.135rem; color: #666666; margin-top: 0.15rem; } .data-box .box .data .list .item2:hover { height: 1.76751rem; } .data-box .box .data .list .item2:hover .number .count-title { color: #e84127; } .data-box .box .data .list .item3 { width: 2.25001rem; height: 2.61001rem; left: 4.05002rem; background-color: #e84127; z-index: 3; } .data-box .box .data .list .item3 .img { width: 1.6275rem; height: 2.22751rem; position: absolute; left: 0; bottom: 0; } .data-box .box .data .list .item3 .img img { width: 100%; position: absolute; left: 0; bottom: 0; mix-blend-mode: multiply; } .data-box .box .data .list .item3 .number .first { font-size: 0.435rem; font-weight: bold; font-stretch: normal; line-height: 0.435rem; letter-spacing: -0.015rem; color: #ffffff; position: relative; } .data-box .box .data .list .item3 .p { font-size: 0.135rem; line-height: 0.135rem; color: #ffffff; margin-top: 0.15rem; position: relative; } .data-box .box .data .list .item4 { width: 2.02501rem; height: 2.01751rem; left: 6.30003rem; z-index: 3; transition: 0.5s; } .data-box .box .data .list .item4 .number .unit { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.0675rem; } .data-box .box .data .list .item4 .p { font-size: 0.135rem; line-height: 0.135rem; color: #666666; margin-top: 0.15rem; } .data-box .box .data .list .item4:hover { height: 2.2rem; } .data-box .box .data .list .item4:hover .number .count-title { color: #e84127; } .data-box .box .data .list .item5 { width: 2.02501rem; height: 1.56751rem; left: 8.32504rem; transition: 0.5s; } .data-box .box .data .list .item5 .number .unit { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.0675rem; } .data-box .box .data .list .item5 .p { font-size: 0.135rem; line-height: 0.135rem; color: #666666; margin-top: 0.15rem; } .data-box .box .data .list .item5:hover { height: 1.76751rem; } .data-box .box .data .list .item5:hover .number .count-title { color: #e84127; } .video-box { width: 100%; height: 5.1rem; position: relative; background-size: auto 100%; background-repeat: no-repeat; background-position: top right; } .video-box .video-bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1000; } .video-box .video-bg video { position: fixed; height: calc(100vh - var(--browser-address-bar, 0px)); object-fit: cover; object-position: 50% 50%; width: 100%; z-index: -1000; } .video-box .video-bg img { position: absolute; height: 100%; top: 0; left: -1000px; right: -1000px; margin: auto; display: none; } .video-box .play { width: 0.72rem; height: 0.72rem; position: absolute; top: calc(50% - 0.36rem); left: 3.675rem; cursor: pointer; } .video-box .play img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; } .video-box .play img.red { opacity: 0; } .video-box .play img.white { opacity: 1; } .video-box .play:hover .red { opacity: 1; } .video-box .play:hover .white { opacity: 0; } .video-box .text { position: absolute; top: 1.7775rem; right: 2.85rem; width: 4.8975rem; } .video-box .text img { width: 100%; } .popups { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 0; z-index: 1000000000; display: none; } .popups .close { width: 50px; height: 50px; background-color: white; position: absolute; top: 20px; right: 20px; border-radius: 50%; cursor: pointer; } .popups .close img { width: 20px; height: 20px; display: block; margin: 0 auto; margin-top: 15px; } .popups .video { width: 70%; height: 60vh; margin: 0 auto; margin-top: 20vh; position: relative; } .popups .video p { width: 100%; height: 100%; } .popups .video video { width: 100%; height: 100%; } .popups .video .videoBg { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0px; left: 0px; } .popups .video .VideoBtn { position: absolute; width: 75px; height: 75px; top: 50%; left: 50%; margin-top: -37px; margin-left: -37px; cursor: pointer; overflow: hidden; } .map { width: 100%; height: 8.16752rem; position: relative; overflow: hidden; } .map .img { position: absolute; width: 100%; height: 100%; transition: 0.5s; transform: scale(1.01); } .map .img img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; } .map .h1 { position: absolute; top: 0; left: 13.5%; z-index: 10; padding-left: 0.2025rem; } .map .h1::after { content: ""; width: 2px; height: 1.04rem; background-color: #e84127; opacity: 0.3; position: absolute; left: 0; top: 0; transition: 1s; } .map .h1 .h2-box { width: 1.2rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .map .h1 .h2-box .h2 { width: 1.2rem; font-size: 0.21rem; font-weight: bold; line-height: 0.21rem; color: #333333; margin-top: 0.45rem; } .map .h1 .h3-box { width: 2.2rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .map .h1 .h3-box .h3 { width: 2.2rem; font-family: "Gotham-Bold"; font-size: 0.27rem; line-height: 0.27rem; letter-spacing: -0.0075rem; color: #c7c7c7; margin-top: 0.12rem; } .map .h1.open::after { content: ""; height: 0; } .map .h1.open .h2-box { width: 0; } .map .h1.open .h3-box { width: 0; } .map #container { width: 100%; height: 100%; position: relative; z-index: 1; } .map .logo { width: 2.92501rem; height: 2.92501rem; background-color: white; border-radius: 50%; position: absolute; top: calc(50% - 1.4625rem); left: calc(50% - 1.4625rem); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); z-index: 1; animation: zoom 2s infinite linear; animation-fill-mode: backwards; cursor: pointer; } .map .logo img { width: 1.335rem; height: 0.87rem; display: block; margin: 0 auto; margin-top: 1.0625rem; } @keyframes zoom { 0% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(0.9); } } .map .research { position: absolute; top: 2.925rem; left: 4.6rem; width: 1.0455rem; text-align: right; z-index: 1; } .map .research .title { font-size: 0.405rem; line-height: 0.405rem; letter-spacing: -0.015rem; color: #ffffff; } .map .research span { display: block; font-family: "Gotham-Bold"; font-size: 0.15rem; line-height: 0.1875rem; color: #ffffff; opacity: 0.3; text-align: right; margin-top: 0.15rem; } .map .intelligent3 { position: absolute; top: 2.135rem; left: 7.856rem; width: 0.9675rem; z-index: 1; } .map .intelligent3 .title { font-size: 0.405rem; line-height: 0.405rem; letter-spacing: -0.015rem; color: #ffffff; } .map .intelligent3 span { display: block; font-family: "Gotham-Bold"; font-size: 0.15rem; line-height: 0.1875rem; color: #ffffff; opacity: 0.3; margin-top: 0.15rem; margin-left: 0.3525rem; } .map .serve { position: absolute; top: 5.6848rem; left: 6.78rem; width: 1.5975rem; z-index: 1; } .map .serve .title { font-size: 0.405rem; line-height: 0.405rem; letter-spacing: -0.015rem; color: #ffffff; float: right; } .map .serve span { display: block; font-family: "Gotham-Bold"; font-size: 0.15rem; line-height: 0.1875rem; color: #ffffff; opacity: 0.3; text-align: right; float: left; } .map .research1 { position: absolute; top: 2.7rem; left: 2.4rem; width: 1.2rem; height: 2.1rem; z-index: 1; } .map .research1 .line { width: 1.5rem; height: 2px; background-color: #e84127; position: absolute; top: 0.42rem; left: 0.8rem; z-index: -1; } .map .research1 .icon { width: 0.84rem; height: 0.84rem; background-color: white; border-radius: 50%; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.16); transition: 0.5s; } .map .research1 .icon svg { display: block; width: 0.4725rem; height: 0.4725rem; padding-top: 0.18375rem; margin: 0 auto; transition: 0.5s; } .map .research1 .p { font-size: 0.15rem; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .research1 .button { margin-top: 0.21rem; position: relative; top: 0.12rem; left: 0; opacity: 0; transition: 0.5s; } .map .research1 .button a { font-size: 0.12rem; line-height: 0.12rem; color: #e84127; } .map .research1 .button a span { margin-left: 0.0975rem; width: 0.2175rem; display: inline-block; } .map .research1 .button a span img { width: 100%; vertical-align: middle; } .map .research1.active { height: 2.2875rem; } .map .research1.active .icon { transform: scale(1.2); } .map .research1.active .icon svg { transform: scale(1.2); } .map .research1.active .button { top: 0; opacity: 1; } .map .intelligent1 { position: absolute; top: 1.88rem; left: 10.275rem; width: 1.3rem; height: 2.1rem; z-index: 1; } .map .intelligent1 .line { width: 2rem; height: 2px; background-color: #e35a45; position: absolute; top: 0.42rem; right: 0.8rem; z-index: -1; } .map .intelligent1 .icon { width: 0.84rem; height: 0.84rem; background-color: white; border-radius: 50%; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.16); transition: 0.5s; } .map .intelligent1 .icon svg { display: block; width: 0.4725rem; height: 0.4725rem; padding-top: 0.18375rem; margin: 0 auto; transition: 0.5s; } .map .intelligent1 .p { font-size: 0.15rem; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .intelligent1 .button { margin-top: 0.21rem; position: relative; top: 0.12rem; left: 0; opacity: 0; transition: 0.5s; } .map .intelligent1 .button a { font-size: 0.12rem; line-height: 0.12rem; color: #e84127; } .map .intelligent1 .button a span { margin-left: 0.0975rem; width: 0.2175rem; display: inline-block; } .map .intelligent1 .button a span img { width: 100%; vertical-align: middle; } .map .intelligent1.active { height: 2.2875rem; } .map .intelligent1.active .icon { transform: scale(1.2); } .map .intelligent1.active .icon svg { transform: scale(1.2); } .map .intelligent1.active .button { top: 0; opacity: 1; } .map .serve1 { position: absolute; top: 5.4rem; left: 10.268rem; width: 1.3rem; height: 2.1rem; z-index: 1; } .map .serve1 .line { width: 2rem; height: 2px; background-color: #ee715d; position: absolute; top: 0.42rem; right: 0.8rem; z-index: -1; } .map .serve1 .icon { width: 0.84rem; height: 0.84rem; background-color: white; border-radius: 50%; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.16); transition: 0.5s; } .map .serve1 .icon svg { display: block; width: 0.4725rem; height: 0.4725rem; padding-top: 0.18375rem; margin: 0 auto; transition: 0.5s; } .map .serve1 .p { font-size: 0.15rem; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .serve1 .button { margin-top: 0.21rem; position: relative; top: 0.12rem; left: 0; opacity: 0; transition: 0.5s; } .map .serve1 .button a { font-size: 0.12rem; line-height: 0.12rem; color: #e84127; } .map .serve1 .button a span { margin-left: 0.0975rem; width: 0.2175rem; display: inline-block; } .map .serve1 .button a span img { width: 100%; vertical-align: middle; } .map .serve1.active { height: 2.2875rem; } .map .serve1.active .icon { transform: scale(1.2); } .map .serve1.active .icon svg { transform: scale(1.2); } .map .serve1.active .button { top: 0; opacity: 1; } .accordion { width: 100%; height: 6.00002rem; overflow: hidden; } .accordion .box { width: 100%; height: 100%; position: relative; } .accordion .box .digitizing { width: 25.2%; float: left; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .accordion .box .digitizing a { width: 100%; height: 100%; display: block; } .accordion .box .digitizing a .img { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } .accordion .box .digitizing a .img img { position: absolute; height: 100%; top: 0; left: -200px; right: -200px; margin: auto; } .accordion .box .digitizing a .bg { width: 102%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.7); transition: 0.5s; } .accordion .box .digitizing a .number { width: 100%; font-family: "DIN-Bold"; font-size: 0.42rem; line-height: 0.42rem; letter-spacing: -0.015rem; color: #f0f0f0; position: absolute; top: 1.5rem; left: 0; text-align: center; z-index: 2; opacity: 0; transition: 0.5s; } .accordion .box .digitizing a .line { width: 1px; height: 0; background-color: #f0f0f0; position: absolute; top: 2.3rem; left: 50%; z-index: 2; transition: 0.5s; } .accordion .box .digitizing a .title { width: 100%; font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; letter-spacing: -0.015rem; color: #ffffff; position: absolute; top: 2.73751rem; left: 0; text-align: center; z-index: 2; } .accordion .box .digitizing a .en { width: 100%; font-family: "Arial"; font-size: 0.12rem; line-height: 0.12rem; letter-spacing: 0px; color: #ffffff; text-align: center; position: absolute; top: 3.33001rem; left: 0; z-index: 2; } .accordion .box .digitizing a .button { display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; position: absolute; top: 3.5rem; left: calc(50% - 0.15rem); z-index: 2; opacity: 0; background-color: rgba(255, 255, 255, 0.3); transition: 0.5s; } .accordion .box .digitizing a .button img { display: block; width: 0.0525rem; height: 0.105rem; margin: 0 auto; padding-top: 0.0975rem; } .accordion .box .digitizing a:hover .bg { background-color: rgba(232, 65, 39, 0.9); } .accordion .box .digitizing a:hover .number { opacity: 1; top: 1.125rem; } .accordion .box .digitizing a:hover .line { height: 0.405rem; top: 1.815rem; } .accordion .box .digitizing a:hover .button { top: 3.84001rem; opacity: 1; } .accordion .box .intelligent { width: 25.2%; float: left; height: 100%; position: absolute; top: 0; left: 25%; z-index: 2; } .accordion .box .intelligent a { width: 100%; height: 100%; display: block; } .accordion .box .intelligent a .img { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } .accordion .box .intelligent a .img img { position: absolute; height: 100%; top: 0; left: -200px; right: -200px; margin: auto; } .accordion .box .intelligent a .bg { width: 102%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.7); transition: 0.5s; } .accordion .box .intelligent a .number { width: 100%; font-family: "DIN-Bold"; font-size: 0.42rem; line-height: 0.42rem; letter-spacing: -0.015rem; color: #f0f0f0; position: absolute; top: 1.5rem; left: 0; text-align: center; z-index: 2; opacity: 0; transition: 0.5s; } .accordion .box .intelligent a .line { width: 1px; height: 0; background-color: #f0f0f0; position: absolute; top: 2.3rem; left: 50%; z-index: 2; transition: 0.5s; } .accordion .box .intelligent a .title { width: 100%; font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; letter-spacing: -0.015rem; color: #ffffff; position: absolute; top: 2.73751rem; left: 0; text-align: center; z-index: 2; } .accordion .box .intelligent a .en { width: 100%; font-family: "Arial"; font-size: 0.12rem; line-height: 0.12rem; letter-spacing: 0px; color: #ffffff; text-align: center; position: absolute; top: 3.33001rem; left: 0; z-index: 2; } .accordion .box .intelligent a .button { display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; position: absolute; top: 3.5rem; left: calc(50% - 0.15rem); z-index: 2; opacity: 0; background-color: rgba(255, 255, 255, 0.3); transition: 0.5s; } .accordion .box .intelligent a .button img { display: block; width: 0.0525rem; height: 0.105rem; margin: 0 auto; padding-top: 0.0975rem; } .accordion .box .intelligent a:hover .bg { background-color: rgba(232, 65, 39, 0.9); } .accordion .box .intelligent a:hover .number { opacity: 1; top: 1.125rem; } .accordion .box .intelligent a:hover .line { height: 0.405rem; top: 1.815rem; } .accordion .box .intelligent a:hover .button { top: 3.84001rem; opacity: 1; } .accordion .box .globalization { width: 25.2%; float: left; height: 100%; position: absolute; top: 0; left: 50%; z-index: 3; } .accordion .box .globalization a { width: 100%; height: 100%; display: block; } .accordion .box .globalization a .img { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } .accordion .box .globalization a .img img { position: absolute; height: 100%; top: 0; left: -200px; right: -200px; margin: auto; } .accordion .box .globalization a .bg { width: 102%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.7); transition: 0.5s; } .accordion .box .globalization a .number { width: 100%; font-family: "DIN-Bold"; font-size: 0.42rem; line-height: 0.42rem; letter-spacing: -0.015rem; color: #f0f0f0; position: absolute; top: 1.5rem; left: 0; text-align: center; z-index: 2; opacity: 0; transition: 0.5s; } .accordion .box .globalization a .line { width: 1px; height: 0; background-color: #f0f0f0; position: absolute; top: 2.3rem; left: 50%; z-index: 2; transition: 0.5s; } .accordion .box .globalization a .title { width: 100%; font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; letter-spacing: -0.015rem; color: #ffffff; position: absolute; top: 2.73751rem; left: 0; text-align: center; z-index: 2; } .accordion .box .globalization a .en { width: 100%; font-family: "Arial"; font-size: 0.12rem; line-height: 0.12rem; letter-spacing: 0px; color: #ffffff; text-align: center; position: absolute; top: 3.33001rem; left: 0; z-index: 2; } .accordion .box .globalization a .button { display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; position: absolute; top: 3.5rem; left: calc(50% - 0.15rem); z-index: 2; opacity: 0; background-color: rgba(255, 255, 255, 0.3); transition: 0.5s; } .accordion .box .globalization a .button img { display: block; width: 0.0525rem; height: 0.105rem; margin: 0 auto; padding-top: 0.0975rem; } .accordion .box .globalization a:hover .bg { background-color: rgba(232, 65, 39, 0.9); } .accordion .box .globalization a:hover .number { opacity: 1; top: 1.125rem; } .accordion .box .globalization a:hover .line { height: 0.405rem; top: 1.815rem; } .accordion .box .globalization a:hover .button { top: 3.84001rem; opacity: 1; } .accordion .box .green { width: 25.2%; float: left; height: 100%; position: absolute; top: 0; left: 75%; z-index: 4; } .accordion .box .green a { width: 100%; height: 100%; display: block; } .accordion .box .green a .img { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } .accordion .box .green a .img img { position: absolute; height: 100%; top: 0; left: -200px; right: -200px; margin: auto; } .accordion .box .green a .bg { width: 102%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.7); transition: 0.5s; } .accordion .box .green a .number { width: 100%; font-family: "DIN-Bold"; font-size: 0.42rem; line-height: 0.42rem; letter-spacing: -0.015rem; color: #f0f0f0; position: absolute; top: 1.5rem; left: 0; text-align: center; z-index: 2; opacity: 0; transition: 0.5s; } .accordion .box .green a .line { width: 1px; height: 0; background-color: #f0f0f0; position: absolute; top: 2.3rem; left: 50%; z-index: 2; transition: 0.5s; } .accordion .box .green a .title { width: 100%; font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; letter-spacing: -0.015rem; color: #ffffff; position: absolute; top: 2.73751rem; left: 0; text-align: center; z-index: 2; } .accordion .box .green a .en { width: 100%; font-family: "Arial"; font-size: 0.12rem; line-height: 0.12rem; letter-spacing: 0px; color: #ffffff; text-align: center; position: absolute; top: 3.33001rem; left: 0; z-index: 2; } .accordion .box .green a .button { display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; position: absolute; top: 3.5rem; left: calc(50% - 0.15rem); z-index: 2; opacity: 0; background-color: rgba(255, 255, 255, 0.3); transition: 0.5s; } .accordion .box .green a .button img { display: block; width: 0.0525rem; height: 0.105rem; margin: 0 auto; padding-top: 0.0975rem; } .accordion .box .green a:hover .bg { background-color: rgba(232, 65, 39, 0.9); } .accordion .box .green a:hover .number { opacity: 1; top: 1.125rem; } .accordion .box .green a:hover .line { height: 0.405rem; top: 1.815rem; } .accordion .box .green a:hover .button { top: 3.84001rem; opacity: 1; } .responsibility { width: 100%; height: 7.90502rem; position: relative; min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(../pic/index_06_01.jpg); z-index: 1; } .responsibility .title { position: absolute; top: 0; left: 13.5%; z-index: 10; padding-left: 0.2025rem; } .responsibility .title .h2-box { width: 1.5rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .responsibility .title .h2-box .h2 { width: 1.5rem; font-size: 0.315rem; font-weight: bold; line-height: 0.315rem; color: #fff; margin-top: 1.38rem; } .responsibility .title .p-box { width: 4rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .responsibility .title .p-box .p { width: 4rem; font-size: 0.21rem; line-height: 0.36rem; letter-spacing: -0.0075rem; color: #fff; margin-top: 0.12rem; } .responsibility .title .en-box { width: 2rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .responsibility .title .en-box .en { width: 2rem; font-family: "DIN-Bold"; font-size: 0.27rem; line-height: 0.315rem; letter-spacing: -0.0075rem; color: #e84127; margin-top: 0.315rem; } .responsibility .title.open .h2-box { width: 0; } .responsibility .title.open .p-box { width: 0; } .responsibility .title.open .en-box { width: 0; } .responsibility .left { width: 5.25001rem; height: 2.16751rem; position: absolute; bottom: 1.2rem; left: 0; background-color: rgba(20, 6, 0, 0.8); transition: 0.5s; } .responsibility .left a { width: 100%; height: 100%; display: block; } .responsibility .left a .h1-box { display: block; position: absolute; left: 1.9125rem; top: 0.495rem; } .responsibility .left a .h1-box .img { float: left; width: 0.4125rem; height: 0.525rem; } .responsibility .left a .h1-box .img img { width: 100%; } .responsibility .left a .h1-box .h1 { float: left; font-size: 0.24rem; font-weight: bold; line-height: 0.525rem; color: #ffffff; margin-left: 0.2025rem; } .responsibility .left a .button { position: absolute; left: 1.9125rem; bottom: 0.3rem; display: block; width: 0.9rem; height: 0.375rem; border-radius: 0.375rem; font-size: 0.12rem; line-height: 0.375rem; color: rgba(255, 255, 255, 0.3); text-align: center; transition: 0.5s; } .responsibility .left a .button i { margin-left: 0.12rem; } .responsibility .left:hover { height: 2.58751rem; } .responsibility .left:hover a .button { width: 1.2rem; color: white; background-color: #e84127; } .responsibility .middle { width: 4.23751rem; height: 2.16751rem; position: absolute; bottom: 1.2rem; left: 5.33251rem; background-color: #fff; transition: 0.5s; } .responsibility .middle a { width: 100%; height: 100%; display: block; } .responsibility .middle a .h1-box { display: block; position: absolute; left: 0.5475rem; top: 0.54rem; } .responsibility .middle a .h1-box .img { float: left; width: 0.435rem; height: 0.405rem; } .responsibility .middle a .h1-box .img img { width: 100%; } .responsibility .middle a .h1-box .h1 { float: left; font-size: 0.24rem; font-weight: bold; line-height: 0.405rem; color: #000000; margin-left: 0.2025rem; } .responsibility .middle a .button { position: absolute; left: 0.5475rem; bottom: 0.3rem; display: block; width: 0.9rem; height: 0.375rem; border-radius: 0.375rem; font-size: 0.12rem; line-height: 0.375rem; color: #999; text-align: center; transition: 0.5s; } .responsibility .middle a .button i { margin-left: 0.12rem; } .responsibility .middle:hover { height: 2.58751rem; } .responsibility .middle:hover a .button { width: 1.2rem; color: white; background-color: #e84127; } .responsibility .right { width: 4.72501rem; height: 2.16751rem; position: absolute; bottom: 1.2rem; right: 0; background-color: rgba(232, 65, 39, 0.8); transition: 0.5s; } .responsibility .right a { width: 100%; height: 100%; display: block; } .responsibility .right a .h1-box { display: block; position: absolute; left: 0.51rem; top: 0.48rem; } .responsibility .right a .h1-box .img { float: left; width: 0.39rem; height: 0.555rem; } .responsibility .right a .h1-box .img img { width: 100%; } .responsibility .right a .h1-box .h1 { float: left; font-size: 0.24rem; font-weight: bold; line-height: 0.555rem; color: #c5b89b; margin-left: 0.2025rem; } .responsibility .right a .button { position: absolute; left: 0.51rem; bottom: 0.3rem; display: block; width: 0.9rem; height: 0.375rem; border-radius: 0.375rem; font-size: 0.12rem; line-height: 0.375rem; color: rgba(255, 255, 255, 0.3); text-align: center; transition: 0.5s; } .responsibility .right a .button i { margin-left: 0.12rem; } .responsibility .right:hover { height: 2.58751rem; } .responsibility .right:hover a .button { width: 1.2rem; color: #e84127; background-color: #fff; } @media screen and (max-width: 1020px) { .banner { display: none; } .m-banner { display: block; width: 100%; height: 100vh; overflow: hidden; position: relative; background-color: white; position: fixed; top: 0; left: 0; z-index: 1; } .m-banner .swiper3 { width: 100%; height: 100vh; position: relative; } .m-banner .swiper3 .swiper-slide { width: 100%; overflow: hidden; } .m-banner .swiper3 .swiper-slide .box { width: 100%; height: 100%; position: relative; overflow: hidden; } .m-banner .swiper3 .swiper-slide .box .img { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .m-banner .swiper3 .swiper-slide .box .img video { position: relative; height: calc(100vh - var(--browser-address-bar, 0px)); object-fit: cover; object-position: 50% 50%; width: 100%; z-index: -1; } .m-banner .swiper3 .swiper-slide .box .text { position: absolute; left: 5%; top: 44%; height: 1.6rem; overflow: hidden; width: 60%; } .m-banner .swiper3 .swiper-slide .box .text span { display: block; font-size: 0.585rem; font-weight: bold; line-height: 0.8rem; color: #ffffff; } .m-banner .swiper3 .swiper-slide .box .s-text { position: absolute; left: 5%; top: calc(44% + 54px + 1rem); height: 0.48rem; overflow: hidden; width: 90%; } .m-banner .swiper3 .swiper-slide .box .s-text span { display: block; font-size: 0.32rem; line-height: 0.32rem; color: #ffffff; opacity: 1; } .m-banner .swiper3 .swiper-pagination-bullets { bottom: 12vh; left: 5%; width: auto; } .m-banner .swiper3 .swiper-pagination-bullets .swiper-pagination-bullet { width: 40px; height: 2px; display: inline-block; border-radius: 0; background: white; opacity: 1; margin: 0 12px; transition: 0.5s; } .m-banner .swiper3 .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 80px; height: 2px; background: #e84127; opacity: 1; } .news .box { width: 90%; } .news .box .left .s-title { font-size: 0.38rem; line-height: 0.38rem; } .news .box .left .title { font-family: "Gotham-Bold"; font-size: 0.3rem; line-height: 0.3rem; letter-spacing: -0.015rem; } .news .box .button { width: 2.8rem; height: 0.6rem; } .news .box .button a { line-height: 0.6rem; font-size: 0.25rem; } .news .box .tabs { width: 100%; position: relative; margin-top: 1.3rem; } .news .box .tabs .horizontal { position: absolute; left: 0; top: -0.8rem; } .news .box .tabs .horizontal li { font-size: 0.28rem; line-height: 0.28rem; } .news .box .tabs .tab .tab-left { width: 100%; float: left; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .img-box { height: 4rem; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text { width: 100%; height: 1.8rem; display: block; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .left { width: 1rem; margin-left: 0.37rem; margin-top: 0.4rem; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .left .top { font-family: "DIN-Bold"; font-size: 0.6rem; line-height: 0.51rem; text-align: center; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .left .bottom { margin-top: 0.12rem; padding-top: 0.12rem; font-size: 0.25rem; line-height: 0.25rem; text-align: center; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .right { width: calc(100% - 2.1rem); margin-top: 0.4rem; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .right .title { font-size: 0.25rem; line-height: 0.27rem; -webkit-line-clamp: 1; max-height: 0.27rem; transition: 0.5s; } .news .box .tabs .tab .tab-left .swiper2 .swiper-slide a .text .right .p { font-size: 0.2rem; line-height: 0.3rem; margin-top: 0.1rem; max-height: 0.6rem; } .news .box .tabs .tab .tab-right { width: 100%; float: left; margin-left: 0; margin-top: 0.3rem; } .news .box .tabs .tab .tab-right .list .item a .img-box { width: 2.5rem; height: 1.65rem; } .news .box .tabs .tab .tab-right .list .item a .text { width: calc(100% - 2.86rem); margin-left: 0.36rem; } .news .box .tabs .tab .tab-right .list .item a .text .title { font-size: 0.25rem; line-height: 0.4rem; margin-top: 0.2rem; } .news .box .tabs .tab .tab-right .list .item a .text .time { font-size: 0.2rem; line-height: 0.2rem; margin-top: 0.15rem; } .news .box .tabs .tab .tab-left .swiper2 .swiper-pagination-bullets { bottom: 2rem; right: 0.315rem; left: auto; width: auto; } .industry { width: 100%; height: auto; padding-top: 0.9rem; overflow: initial; } .industry .title { position: absolute; top: -0.3rem; left: 5%; padding-left: 0; } .industry .title::after { content: ""; width: 0; } .industry .title .h2-box { width: 2rem; } .industry .title .h2-box .h2 { width: 2rem; font-size: 0.38rem; line-height: 0.38rem; color: #333; margin-top: 0; } .industry .title .h3-box .h3 { width: 3rem; font-size: 0.3rem; line-height: 0.3rem; letter-spacing: -0.015rem; color: #333; opacity: 0.2; margin-top: 0.12rem; } .industry .left { width: 100%; height: 4rem; float: left; } .industry .left a .icon { display: block; width: 0.9825rem; height: 0.9825rem; position: relative; margin-top: 1rem; margin-left: 1rem; float: left; } .industry .left a .text { position: relative; display: block; float: left; margin-top: 1.15rem; margin-left: 0.3rem; } .industry .left a .text .h4 { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; } .industry .left a .text .h5 { font-size: 0.25rem; line-height: 0.25rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .left a .button { display: block; width: 2rem; height: 0.6rem; left: 1rem; top: 2.46rem; font-size: 0.25rem; line-height: 0.6rem; color: #fff; text-align: center; transition: 0.5s; opacity: 1; } .industry .left a:hover .button { opacity: 1; left: 1rem; top: 2.46rem; } .industry .right { width: 100%; height: 4rem; float: left; } .industry .right .right-top { width: 50%; height: 100%; float: left; } .industry .right .right-bottom { width: 50%; height: 100%; float: left; } .industry .right .right-top a .icon { display: block; width: 0.69rem; height: 0.69rem; position: relative; margin-top: 0.6rem; margin-left: 0.5rem; float: none; } .industry .right .right-top a .text { position: relative; display: block; margin-top: 0.4rem; margin-left: 0.5rem; float: none; } .industry .right .right-top a .text .h4 { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; } .industry .right .right-top a .text .h5 { font-size: 0.25rem; line-height: 0.25rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .right .right-top a .button { position: relative; display: block; float: none; width: 2rem; height: 0.6rem; background-color: rgba(255, 255, 255, 0.23); margin-left: 0.5rem; margin-top: 0.4rem; font-size: 0.25rem; line-height: 0.6rem; color: #fff; text-align: center; transition: 0.5s; opacity: 1; } .industry .right .right-top a:hover .button { opacity: 1; margin-left: 0.5rem; } .industry .right .right-bottom a .icon { display: block; width: 0.69rem; height: 0.69rem; position: relative; margin-top: 0.6rem; margin-left: 0.5rem; float: none; } .industry .right .right-bottom a .text { position: relative; display: block; margin-top: 0.4rem; margin-left: 0.5rem; float: none; } .industry .right .right-bottom a .text .h4 { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; } .industry .right .right-bottom a .text .h5 { font-size: 0.25rem; line-height: 0.25rem; color: #ffffff; opacity: 0.5; margin-top: 0.21rem; } .industry .right .right-bottom a .button { position: relative; display: block; float: none; width: 2rem; height: 0.6rem; background-color: rgba(255, 255, 255, 0.23); margin-left: 0.5rem; margin-top: 0.4rem; font-size: 0.25rem; line-height: 0.6rem; color: #fff; text-align: center; transition: 0.5s; opacity: 1; } .industry .right .right-bottom a:hover .button { opacity: 1; margin-left: 0.5rem; } .data-box { width: 100%; height: 10rem; position: relative; overflow: hidden; z-index: 2; background-color: white; } .data-box .box { width: 90%; height: 100%; margin: 0 auto; position: relative; z-index: 1; } .data-box .box .title { padding-left: 0; } .data-box .box .title::after { content: ""; width: 0; } .data-box .box .title .h2-box { width: 2rem; } .data-box .box .title .h2-box .h2 { width: 2rem; font-size: 0.38rem; line-height: 0.38rem; margin-top: 0.45rem; } .data-box .box .title .h3-box { width: 2.4rem; overflow: hidden; transition: 1s; transition-delay: 1s; } .data-box .box .title .h3-box .h3 { width: 2.4rem; font-size: 0.3rem; line-height: 0.3rem; letter-spacing: -0.0075rem; margin-top: 0.12rem; } .data-box .box .p { width: 100%; margin: 0 auto; margin-top: 0.405rem; text-align: center; } .data-box .box .p p { font-size: 0.24rem; line-height: 0.4rem; color: #333333; } .data-box .box .data .list .item { padding-top: 0.3rem; } .data-box .box .data .list .item3 { width: 50%; height: 1.38rem; left: 25%; bottom: 3.36rem; background-color: #e84127; z-index: 4; overflow: hidden; box-shadow: none; } .data-box .box .data .list .item3 .img { width: 1rem; height: 1.36866rem; position: absolute; left: 0; bottom: 0; } .data-box .box .data .list .item1 { width: 50%; height: 1.38rem; left: 0; bottom: 1.68rem; z-index: 3; } .data-box .box .data .list .item2 { width: 50%; height: 1.38rem; left: 50%; bottom: 1.68rem; } .data-box .box .data .list .item4 { width: 50%; height: 1.38rem; left: 0; bottom: 0; z-index: 3; } .data-box .box .data .list .item1:hover { height: 1.76751rem; } .data-box .box .data .list .item4:hover { height: 1.76751rem; } .data-box .box .data .list .item5 { width: 50%; height: 1.38rem; left: 50%; bottom: 0; } .data-box .box .data .list .item .p { font-size: 0.25rem; } .video-box { width: 100%; height: 6rem; position: relative; background-size: auto 100%; background-repeat: no-repeat; background-position: top right; overflow: hidden; } .video-box .play { width: 1.4rem; height: 1.4rem; position: absolute; top: calc(25% - 0.7rem); left: calc(50% - 0.7rem); cursor: pointer; } .video-box .text { position: absolute; top: 50%; right: auto; left: calc(50% - 2.44875rem); width: 4.8975rem; } .video-box .video-bg p { display: none; } .video-box .video-bg video { display: none; } .video-box .video-bg img { display: block; } .popups .video { width: 100%; } .map { width: 100%; height: 10.5rem; position: relative; overflow: hidden; } .map .h1 { position: absolute; top: 0; left: 5%; z-index: 10; padding-left: 0; } .map .h1::after { content: ""; width: 0; } .map .h1 .h2-box { width: 2.5rem; } .map .h1 .h2-box .h2 { width: 2.5rem; font-size: 0.38rem; font-weight: bold; line-height: 0.38rem; color: #333333; margin-top: 0.45rem; } .map .h1 .h3-box { width: 2.7rem; } .map .h1 .h3-box .h3 { width: 2.7rem; font-family: "Gotham-Bold"; font-size: 0.3rem; line-height: 0.3rem; letter-spacing: -0.0075rem; color: #c7c7c7; margin-top: 0.12rem; } .map #container { width: 100%; height: 100%; position: relative; z-index: 1; margin-top: -0.5rem; } .map .logo { width: 2.92501rem; height: 2.92501rem; background-color: white; border-radius: 50%; position: absolute; top: calc(50% - 1.9625rem); left: calc(50% - 1.4625rem); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); z-index: 1; animation: zoom 2s infinite linear; animation-fill-mode: backwards; cursor: pointer; } .map .research { position: absolute; top: 3.7rem; left: 1.2rem; width: 1.0455rem; text-align: right; z-index: 1; } .map .intelligent3 { position: absolute; top: 2.635rem; left: 4.3rem; width: 0.9675rem; z-index: 1; } .map .serve { position: absolute; top: 6.3rem; left: 3.1rem; width: 1.5975rem; z-index: 1; } .map .research1 { visibility: visible !important; position: absolute; top: 7.3rem; left: 0.8rem; width: 1.7rem; height: 2.1rem; z-index: 1; } .map .research1 .line { display: none; } .map .research1 .icon { width: 1.2rem; height: 1.2rem; } .map .research1 .icon svg { width: 0.8rem; height: 0.8rem; padding-top: 0.2rem; } .map .research1 .p { font-size: 0.2rem; line-height: 0.28rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .research1 .button { top: 0; opacity: 1; } .map .research1 .button a { font-size: 0.2rem; line-height: 0.2rem; color: #e84127; } .map .research1 .button a span img { width: 100%; vertical-align: middle; margin-bottom: 0.05rem; } .map .intelligent1 { visibility: visible !important; position: absolute; top: 7.3rem; left: 3rem; width: 1.7rem; height: 2.1rem; z-index: 1; } .map .intelligent1 .line { display: none; } .map .intelligent1 .icon { width: 1.2rem; height: 1.2rem; } .map .intelligent1 .icon svg { width: 0.8rem; height: 0.8rem; padding-top: 0.2rem; } .map .intelligent1 .p { font-size: 0.2rem; line-height: 0.28rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .intelligent1 .button { top: 0; opacity: 1; } .map .intelligent1 .button a { font-size: 0.2rem; line-height: 0.2rem; color: #e84127; } .map .intelligent1 .button a span img { width: 100%; vertical-align: middle; margin-bottom: 0.05rem; } .map .serve1 { visibility: visible !important; position: absolute; top: 7.3rem; left: 5.2rem; width: 1.7rem; height: 2.1rem; z-index: 1; } .map .serve1 .line { display: none; } .map .serve1 .icon { width: 1.2rem; height: 1.2rem; } .map .serve1 .icon svg { width: 0.8rem; height: 0.8rem; padding-top: 0.2rem; } .map .serve1 .p { height: 0.56rem; font-size: 0.2rem; line-height: 0.28rem; letter-spacing: -0.0075rem; color: #333333; margin-top: 0.225rem; } .map .serve1 .button { top: 0; opacity: 1; } .map .serve1 .button a { font-size: 0.2rem; line-height: 0.2rem; color: #e84127; } .map .serve1 .button a span img { width: 100%; vertical-align: middle; margin-bottom: 0.05rem; } .accordion .box .digitizing { width: 25.2%; left: 0; } .accordion .box .digitizing a .bg { left: -0.5px; } .accordion .box .digitizing a .en { font-size: 0.16rem; line-height: 0.16rem; } .accordion .box .intelligent { width: 25.2%; left: 25%; } .accordion .box .intelligent a .bg { left: -0.5px; } .accordion .box .intelligent a .en { font-size: 0.16rem; line-height: 0.16rem; } .accordion .box .globalization { width: 25.2%; left: 50%; } .accordion .box .globalization a .bg { left: -0.5px; } .accordion .box .globalization a .en { font-size: 0.16rem; line-height: 0.16rem; } .accordion .box .green { width: 25.2%; left: 75%; } .accordion .box .green a .bg { left: -0.5px; } .accordion .box .green a .en { font-size: 0.16rem; line-height: 0.16rem; } .responsibility { width: 100%; height: 7.90502rem; position: relative; min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; background-image: url(../pic/index_06_01.jpg); z-index: 1; } .responsibility .title { left: 5%; padding-left: 0; } .responsibility .title .h2-box { width: 2rem; } .responsibility .title .h2-box .h2 { width: 2rem; font-size: 0.38rem; line-height: 0.38rem; margin-top: 0.5rem; } .responsibility .title .p-box { width: 5rem; } .responsibility .title .p-box .p { width: 5rem; font-size: 0.25rem; line-height: 0.4rem; letter-spacing: -0.0075rem; color: #fff; margin-top: 0.12rem; } .responsibility .title .en-box { width: 3rem; } .responsibility .title .en-box .en { width: 3rem; font-size: 0.3rem; line-height: 0.35rem; margin-top: 0.3rem; } .responsibility .left { width: 32%; height: 2.8rem; position: absolute; bottom: 1.2rem; left: 0; background-color: rgba(20, 6, 0, 0.8); transition: 0.5s; } .responsibility .left a .h1-box { display: block; width: 100%; left: 0rem; top: 0.3rem; } .responsibility .left a .h1-box .img { float: none; margin: 0 auto; width: 0.6rem; height: auto; } .responsibility .left a .h1-box .h1 { float: none; font-size: 0.3rem; line-height: 0.3rem; margin-left: 0; margin-top: 0.2rem; text-align: center; } .responsibility .left a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: white; background-color: #e84127; } .responsibility .left:hover a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: white; background-color: #e84127; } .responsibility .middle { width: 32%; height: 2.8rem; position: absolute; bottom: 1.2rem; left: 34%; background-color: #fff; transition: 0.5s; } .responsibility .middle a .h1-box { display: block; width: 100%; left: 0rem; top: 0.3rem; } .responsibility .middle a .h1-box .img { float: none; margin: 0 auto; width: 0.6rem; height: auto; } .responsibility .middle a .h1-box .h1 { float: none; font-size: 0.3rem; line-height: 0.3rem; margin-left: 0; margin-top: 0.4rem; text-align: center; } .responsibility .middle a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: white; background-color: #e84127; } .responsibility .middle:hover a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: white; background-color: #e84127; } .responsibility .right { width: 32%; height: 2.8rem; position: absolute; bottom: 1.2rem; right: 0%; background-color: rgba(232, 65, 39, 0.8); transition: 0.5s; } .responsibility .right a .h1-box { display: block; width: 100%; left: 0rem; top: 0.3rem; } .responsibility .right a .h1-box .img { float: none; margin: 0 auto; width: 0.6rem; height: auto; } .responsibility .right a .h1-box .h1 { float: none; font-size: 0.3rem; line-height: 0.3rem; margin-left: 0; margin-top: 0.1rem; text-align: center; } .responsibility .right a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: #e84127; background-color: #fff; } .responsibility .right:hover a .button { left: calc(50% - 0.8rem); bottom: 0.3rem; height: 0.5rem; border-radius: 0.5rem; font-size: 0.2rem; line-height: 0.5rem; width: 1.6rem; color: #e84127; background-color: #fff; } }