/* 滚动条样式 */ .scroll::-webkit-scrollbar { width: 3px; } .scroll::-webkit-scrollbar-track { background: #E5E5E5; border-radius: 10px; } .scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #ea4027; } .nav_father { width: 100%; position: relative; z-index: 2; } .nav { width: 100%; height: 0.75rem; } .nav nav { width: 73%; height: 0.75rem; line-height: 0.75rem; margin: 0 auto; } .nav nav ul { width: 100%; height: 100%; } .nav nav ul li { display: inline-block; font-size: 0.105rem; font-weight: 400; color: #A8A8A8; } .nav nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .nav nav ul li:last-of-type { color: #333; } .all-content { width: 100%; position: relative; background-color: #fff; z-index: 4; } .all-content .img-bot { width: 100%; height: 6.0001rem; background-color: #fff; position: relative; overflow: hidden; } .all-content .img-bot .img { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; opacity: 0.1; } .all-content .img-bot .img-text { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .all-content .img-bot .img-text .title { display: inline-block; margin: 0 auto; margin-top: 0.16rem; height: 0.39rem; font-size: 0.39rem; line-height: 0.39rem; color: #333; } .all-content .img-bot .img-text .red_ { margin: 0.0975rem auto; display: block; } .all-content .img-bot .img-text .english { font-size: 0.36rem; line-height: 0.36rem; font-weight: bold; color: rgb(98, 98, 98, 0.2); } .all-content .img-bot .img-text .intro { margin-top: 0.435rem; font-size: 0.135rem; color: #333; line-height: 0.24rem; } .all-content .img-bot .img-text .nums { margin-top: 0.795rem; display: flex; justify-content: center; align-items: center; } .all-content .img-bot .img-text .nums li { flex-shrink: 0; text-align: center; } .all-content .img-bot .img-text .nums li .number { font-size: 0.6rem; line-height: 0.6rem; font-family: DIN; font-weight: bold; color: #000; transition: all 0.5s; } .all-content .img-bot .img-text .nums li:hover .number { color: #EA222D; } .all-content .img-bot .img-text .nums li .text { margin-top: 0.285rem; text-align: center; font-size: 0.15rem; font-weight: 400; color: #333; line-height: 0.27rem; } .all-content .img-bot .img-text .nums li.line { margin: 0 0.5rem; width: 1px; height: 0.9rem; background-color: #333; opacity: 0.3; } .case { width: 100%; height: 7.3052rem; position: relative; overflow: hidden; } .case .img { width: 100%; height: 100%; background-position: bottom; background-repeat: no-repeat; background-size: contain; position: absolute; bottom: 0; } .case .case-content { margin: 0 auto; margin-top: 1.0725rem; width: 12.7503rem; } .case-content .left, .case-content .Swiper1 { display: inline-block; vertical-align: middle; position: relative; } .case-content .left{ width: 3.75rem; height: 5.0101rem; overflow: auto; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); } .case-content .left li { padding: 0 0.375rem; box-sizing: border-box; border-bottom: 1px solid #eee; width: 100%; height: 0.72rem; display: flex; justify-content: space-between; align-items: center; position: relative; cursor: pointer; transition: all 0.5s; } .case-content .left li::after { content: ""; display: block; width: 100%; height: 0%; background-color: #DE272A; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all linear 0.4s; } .case-content .left li:hover .name { margin: 0.2rem; } .case-content .left li.active::after { height: 100%; } .case-content .left li.active .name { color: #fff; border-left: 0.0375rem solid #fff; } .case-content .left li.active .icon { right: 0; } .case-content .left li .name { height: 0.165rem; padding-left: 0.13rem; border-left: 0.0375rem solid #DE272A; font-size: 0.165rem; color: #333333; line-height: 0.165rem; position: relative; z-index: 1; transition: all 0.5s; } .case-content .left li .icon { width: 0.21rem; position: relative; z-index: 1; transition: all 0.5s; position: relative; right: -0.15rem; } .case-content .left li .icon img { width: 100%; } .case-content .Swiper1 { float: right; width: 8.6252rem; height: 5.0026rem; overflow: hidden; position: relative; } .case-content .Swiper1 .swiper-img { width: 100%; height: 100%; } .case-content .Swiper1 .swiper-img img { margin: auto; width: 100%; position: absolute; top: -300px; bottom: -300px; } .case-content .Swiper1 .swiper-img .cover { width: 100%; height: 1.6425rem; background-image: linear-gradient(to top,#000, transparent); position: absolute; bottom: 0; } .case-content .Swiper1 .swiper-img .text { width: 90%; color: #fff; position: absolute; bottom: 0.3975rem; left: 50%; transform: translateX(-50%); } .case-content .Swiper1 .swiper-img .text .top { font-size: 0.21rem; font-weight: bold; color: #FFFFFF; } .case-content .Swiper1 .swiper-img .text .intro { min-height: 0.8rem; margin-top: 0.225rem; font-size: 0.135rem; color: #FFFFFF; line-height: 0.23rem; } .case-content .Swiper1 .prev1, .case-content .Swiper1 .next1, .case-content .Swiper1 .prev2, .case-content .Swiper1 .next2 { width: 0.435rem; height: 0.435rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); border-radius: 50%; color: #e84127; transition: all 0.5s; /* display: none; */ } .case-content .Swiper1 .prev1 { top: 0.555rem; left: auto; right: 1.0575rem; } .case-content .Swiper1 .next1{ top: 0.555rem; left: auto; right: 0.48rem; } .case-content .Swiper1 .prev1::after, .case-content .Swiper1 .next1::after { font-size: 0.18rem; font-weight: bold; } .case-content .Swiper1 .one{ height: 2px; width: 1rem; background-color: rgba(255,255,255,0.5); position: absolute; top: auto; bottom: 1.5rem; left: auto; right: 0.48rem; } .case-content .Swiper1 .one .swiper-pagination-progressbar-fill { background-color: #ea222d; } .quality_father { width: 100%; position: relative; background-color: #fff; z-index: 4; } .qualitybot { width: 100%; height: 2.31rem; padding: 0.705rem 1.8rem; box-sizing: border-box; background-color: #EA222D; color: #fff; display: flex; justify-content: space-between; align-items: center; } .qualitybot > li { text-align: center; width: 4rem; height: 1rem; position: relative; } .qualitybot > li > img { display: block; margin: auto; } .qualitybot > li > p { width: 100%; font-size: 0.135rem; text-align: center; color: #FFFFFF; position: absolute; bottom: 0rem; } .qualitybot > li:nth-of-type(1) > img { height: 0.4725rem; } .qualitybot > li:nth-of-type(2) > img { height: 0.5925rem; } .qualitybot > li:nth-of-type(3) > img { height: 0.555rem; } .qualitybot > li:nth-of-type(4) > img { height: 0.54rem; } @media screen and (max-width:1024px) { .nav { width: 100%; height: 1.5rem; } .nav_father > .nav nav { width: 90%; height: 1.5rem; line-height: 1.5rem; margin: 0 auto; } .nav_father > .nav nav ul li { font-size: 0.25rem; } .all-content .img-bot { width: 100%; height: 11rem; background-color: #fff; position: relative; overflow: hidden; } .all-content .img-bot .img-text { margin-top: 0.5rem; width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .all-content .img-bot .img-text .title { display: inline-block; margin: 0 auto; padding-left: 0.15rem; height: 0.4rem; border-left: 0.045rem solid #ea4027; font-size: 0.4rem; line-height: 0.4rem; color: #000; } .all-content .img-bot .img-text .intro { width: 90%; margin: 0 auto; margin-top: 0.3225rem; font-size: 0.25rem; color: #000; line-height: 0.4rem; } .all-content .img-bot .img-text .nums { width: 100%; margin-top: 1.0425rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } .all-content .img-bot .img-text .nums li { width: 50%; margin-bottom: 0.5rem; } .all-content .img-bot .img-text .nums li.line { margin: 0 0.5rem; width: 1px; height: 0.9rem; background-color: #000000; opacity: 0.3; display: none; } .all-content .img-bot .img-text .nums li .text { margin-top: 0.285rem; text-align: center; font-size: 0.22rem; font-weight: 400; color: #000000; line-height: 0.35rem; } .all-content .img-bot .img-text .nums li .number { font-size: 0.6rem; line-height: 0.6rem; font-family: DIN-BOLD; letter-spacing: -0.05rem; font-weight: bold; color: #000; transition: all 0.5s; } .case { width: 100%; height: 11.2rem; position: relative; overflow: hidden; } .case .case-content { margin: 0 auto; margin-top: 0.5rem; width: 90%; } .case-content .left { width: 100%; height: 5.0101rem; overflow: auto; background-color: #fff; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); } .case-content .left li { padding: 0 0.375rem; box-sizing: border-box; border-bottom: 1px solid #eee; width: 100%; height: 1rem; display: flex; justify-content: space-between; align-items: center; position: relative; cursor: pointer; transition: all 0.5s; } .case-content .left li .name { height: 0.3rem; padding-left: 0.13rem; border-left: 0.0375rem solid #DE272A; font-size: 0.3rem; color: #333333; line-height: 0.3rem; position: relative; z-index: 1; transition: all 0.5s; } .case-content .left li .icon { width: 0.3rem; position: relative; z-index: 1; transition: all 0.5s; position: relative; right: -0.15rem; } .case-content .Swiper1 { margin-top: 0.2rem; float: right; width: 100%; height: 5.0026rem; overflow: hidden; position: relative; } .case-content .Swiper1 .swiper-img .text .top { font-size: 0.3rem; font-weight: bold; color: #FFFFFF; } .case-content .Swiper1 .swiper-img .text .intro { margin-top: 0.225rem; font-size: 0.25rem; color: #FFFFFF; line-height: 0.3rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 7; } .case-content .Swiper1 .one { display: none; } .case-content .Swiper1 .prev1, .case-content .Swiper1 .next1, .case-content .Swiper1 .prev2, .case-content .Swiper1 .next2 { width: 0.7rem; height: 0.7rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 20%); border-radius: 50%; color: #e84127; transition: all 0.5s; /* display: none; */ } .case-content .Swiper1 .prev1 { top: 1rem; left: auto; right: 1.5rem; } .case-content .Swiper1 .next1 { top: 1rem; left: auto; right: 0.48rem; } .case-content .Swiper1 .swiper-img .cover { width: 100%; height: 100%; background-image: linear-gradient(to top,#000 -50%, transparent); position: absolute; bottom: 0; } .case-content .Swiper1 .swiper-img img { margin: auto; height: 100%; position: absolute; top: 0; bottom: auto; left: -300px; right: -300px; } .qualitybot { width: 100%; height: 4rem; padding: 0.3rem; box-sizing: border-box; background-color: #EA222D; color: #fff; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; align-content: space-around; } .qualitybot > li { text-align: center; width: 3.25rem; height: 1rem; position: relative; } .qualitybot > li > p { width: 100%; font-size: 0.2rem; } }