@font-face { font-family: 'regular'; /* 自定义字体的名称 */ src: url('../font/Regular_zitidi.com.ttf') format('truetype'); font-weight: normal; /* 字体粗细 */ font-style: normal; /* 字体样式 */ } @font-face { font-family: 'Semibold'; /* 自定义字体的名称 */ src: url('../font/Semibold_zitidi.com.ttf') format('truetype'); font-weight: normal; /* 字体粗细 */ font-style: normal; /* 字体样式 */ } body, html { margin: 0; padding: 0; height: 100%; overflow: auto; color: black; font-family: 'regular'!important; } /* 默认根元素字体大小 */ :root { font-size: 16px; /* 默认字体大小 */ } /* 根据屏幕宽度动态调整根元素字体大小 */ @media (min-width: 768px) { :root { font-size: 10px; /* 中等屏幕 */ } } @media (min-width: 1000px) { :root { font-size: 14px; /* 大屏幕 */ } } @media (min-width: 1900px) { :root { font-size: 16px; /* 超大屏幕 */ } } @media (min-width: 2500px) { :root { font-size: 24px; /* 超大屏幕 */ } } .banner { background-size: cover; /* 背景图片覆盖整个区域 */ } .container { max-width: none; } .supermap { padding: 5rem 0; } .supermap h2 { font-weight: bold; font-size: 3.1rem; font-family: 'Semibold'; } .supermap li { font-size: 1.25rem; margin: 10px 0; } .sub_title { font-size: 2.5rem; color: white; font-weight: bold; font-family: 'Semibold'; } .line { border-bottom: 4px solid #d7000f; display: block; line-height: 50px; height: 4px; background-color: #d7000f; width: 15%; margin-top: 30px; } .products { margin-left: -17px; margin-right: -17px; margin-bottom: 1rem; } .product-cont .view-all { color: white; } .products .product { background: transparent; border: none; padding: 0; } .products li { padding-left: 8px; padding-right: 8px; } .products .product img { width: 100%; max-width: 100% !important; } .products .product:hover p { bottom: 30px; } .products .product p { position: absolute; left: 20px; bottom: 20px; color: #fff; font-size: 1.25rem; transition-duration: .2s; } .products .product em { position: absolute; left: 20px; bottom: 25px; width: 2.5rem; height: 3px; background: red; transition-duration: .2s; opacity: 0; } .products .product:hover img { transform: scale(1); } .products .product:hover em { display: block; opacity: 1; } .tec-item { position: relative; overflow: hidden; height: 22rem; cursor: pointer; } .technology { margin-bottom: 1rem; } .technology .tec-item1 { background: url(../images/2025/Technology-1.jpg) center no-repeat; background-size: cover; } .technology .tec-item2 { background: url(../images/2025/Technology-2.jpg) center no-repeat; background-size: cover; } .technology .tec-item3 { background: url(../images/2025/Technology-3.jpg) center no-repeat; background-size: cover; } .technology .tec-item4 { background: url(../images/2025/Technology-4.jpg) center no-repeat; background-size: cover; } .tec-item .tec-tit2 { display: none; } .tec-item .tec-tit, .tec-item .tec-tit2 { font-size: 1.25rem; color: #ffffff; position: absolute; bottom: 1.25rem; left: 1.25rem; transition: all .3s ease-out; opacity: 1; } .tec-item .tec-tit2 { top:50%; } .tec-item p { display: none; opacity: 1; position: absolute; /* bottom: -90px; */ bottom: 2.2rem; left: 1.25rem; font-size: 1rem; width: 48rem; color: #ffffff; } .view-all { float: right; font-size: 1rem; } .view-all:hover { color: #d7000f; } .tec-item-2 { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; transition: opacity 0.2s; overflow: hidden; visibility: hidden; border-bottom: 0.75rem solid #d7000f; background-color: rgb(0 0 0 / 0.3); } .technology .active .tec-tit { display: none; } .technology .active .tec-tit2 { display: block; } .technology .active .tec-item-2 { visibility: visible; opacity: 1; } .technology .active p { display: inline-block; transition-duration: .2s; } .technology .col-12 { transition: all .3s ease-out; padding-left: 5px; padding-right: 5px; } .solutions-item { height: 20rem; margin: 15px 0; } .solutions-item img { width: 100%; } .solutions-item .text { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; padding: 30px 30px 50px; -webkit-transition: .2s; transition: .2s; } .solutions-item a:hover .text p { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .solutions-item p { color: #ffffff; -webkit-transition: .4s; transition: .4s; font-size: 24px; } .view-all { border-bottom: 2px solid; } .solutions .targetlink { margin-left: 20px; } .transformimg:hover img { transform: scale(1.05); } .transformimg img { transition: transform 1s cubic-bezier(.23, 1, .32, 1); } .speakers-list.swiper-slide-active { transform: scale(1.5); z-index: 999; box-shadow: 5px 5px 15px #000; } .speakers-list { transition: 1s; margin-bottom: 15px; padding-left: 8px; padding-right: 8px; } .solution-case .picImg1 { position: relative; display: block; color: #fff; overflow: hidden; } .solution-case.picImg1:before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ""; transition: opacity 5s cubic-bezier(.23, 1, .32, 1), height 5s cubic-bezier(.23, 1, .32, 1); opacity: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .7)); } .solution-case.picImg1:hover:before { opacity: 1; } .solution-case .picImg1:hover img { transform: scale(1); } .solution-case .pic:after { position: relative; overflow: hidden; } .solution-case.pic img { position: absolute; display: block; width: 100%; } .solution-case .picImg1 img { transition: transform 12s cubic-bezier(.23, 1, .32, 1); transform: scale(1); object-fit: cover; height: 100%; width: 100%; } .solution-case .pic:after { display: block; width: 100%; content: ""; } .solution-case .pic:after { padding-top: 60%; } .solution-case .picImg1 .text { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; padding: 20px; height: 100%; } .solution-case .picImg1 .text p { font-size: 1.25rem; line-height: 1.25; position: relative; z-index: 2; overflow: hidden; height: 3.75rem; margin: 0; -webkit-transition: .4s; transition: .4s; } .solution-case .picImg1 .text2 p { font-size: 1.25rem; } .solution-case .picImg1 { height: 20rem; } .solution-case .picImg1 .pic { height: 100%; } .solution-case .picImg1 .text span { color: #fff; font-size: 1rem; z-index: 9; position: relative; display: block; height: 3rem; -webkit-transition: .4s; transition: .4s; } .solution-case .picImg1:hover .text p { -webkit-transform: translateY(-6rem); transform: translateY(-6rem); } .solution-case .picImg1:hover .text span { -webkit-transform: translateY(-7rem); transform: translateY(-7rem); } .solution-case .picImg1:hover .text.text2:after { bottom: 15rem; background-color: rgb(0 0 0 / 0.3); } .AppCase .picImg1 .text:after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; /* background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #000 100%, #000 0); */ background-size: cover; } .solution-case .picImg1:after { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; } .index_news { margin-bottom: 30px; background: #EDF0F1; padding-top: 5rem; } .index_news .imgbox2 { height: 13.75rem; } .index_news .imgbox2 img { width: 100%; object-fit: cover; height: 100%; } .index_news .type { top: -2.5rem; position: absolute; max-width: 90%; z-index: 8; color: #000000; font-size: 1.25rem; left: 8px; font-weight: bold; } .news-item { padding-right: 8px; padding-left: 8px; } .index_news .textbox { background: #ffffff; text-align: left; padding: 1.25rem 1rem; height: 15.75rem; overflow: hidden; } .index_news .textbox2 { height: 29.5rem; } .index_news .news-item li { border-bottom: 2px #c3c3c3 dashed; display: block; height: 7.2rem; } .index_news .news-item li:last-child { border-bottom: none; } .text-overflow-line-2 { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .text-overflow-line-4 { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .index_news .textbox .title { font-size: 1.125rem; line-height: 1.6; color: black; font-weight: bold; } .index_news .textbox .title:hover { color: #d7000f } .index_news .textbox .text { color: #000000; font-size: 1rem; } .index_news .more:hover { color: #d7000f } footer { background: #ffffff; } @media (max-width: 382.5rem) { } @media (max-width: 1920px) { } @media (max-width: 1280px) { } @media (min-width: 768px) { a:hover + .targetlink, a:hover .targetlink { display: inline-block; } .solution-case .picImg1 .text.text2 { bottom: -15rem; } .solution-case .picImg1 .text.text2:after { bottom: 5rem; } } @media (max-width: 767px) { :root { font-size: 10px; /* 超大屏幕 */ } .targetlink { display: none; } .pcheight, .pcheight2 { height: auto !important; } .AppCase div.col-xs-12 .picImg1 { height: 200px; } .solutionIndexList1 li { width: 100% !important; } .flex_box .margin-60 { margin-top: 30px; margin-bottom: 30px; } .speakers-list.swiper-slide-active { transform: scale(1); z-index: 999; box-shadow: 0px 0px 0px #fff; } .speakers-list{ padding: 0; } .solution-case .picImg1:hover .text p{ -webkit-transform: translateY(0rem); transform: translateY(0rem); } .solution-case .picImg1:hover .text span { -webkit-transform: translateY(0rem); transform: translateY(0rem); } .solution-case .picImg1:hover .text.text2:after { bottom: 0rem; background-color:transparent; } .products { margin-left: -15px; margin-right: -15px; } .products li { padding: 0; margin-bottom: 1.5rem; } .technology .col-12 { padding: 0; margin-bottom: 1.5rem; } .technology p { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: -webkit-box!important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; width: 35rem; } .technology .tec-tit { display: none; } .technology .tec-tit2 { display: block; } .tec-item-2 { visibility: inherit; } .solution-case .picImg1 img { height: 100% !important; } .news-item { padding: 0; margin-bottom: 5rem; } .index_news{ padding: 50px 0 0 ; } .index_news .imgbox2 img{ height: 100% !important; } }