.banner-nav-mask { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 164px; background-image: url(/static/cn/images/about/about-banner-shadow.png); background-repeat: no-repeat; background-size: cover; } .swiper-about { display: flex; flex-direction: column; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .swiper-about .swiper-about-text1 { font-size: 18px; font-weight: 400; color: #fff; margin: 256px auto 0; } .swiper-about .swiper-about-text2 { width: 34px; height: 6px; background-color: #fff; margin: 20px auto 0; } .swiper-about .swiper-about-text3 { font-size: 30px; font-weight: 300; color: #fff; margin: 17px auto 0; } .solve-four-pack { display: flex; justify-content: space-between; width: 1300px; margin: 68px auto 0; } .solve-four-pack .solve-pack { display: flex; justify-content: center; align-items: center; width: 280px; height: 74px; border: 2px solid #eeeeee; font-size: 18px; font-weight: 400; color: #666; line-height: 24px; text-align: center; } .solve-four-pack .solve-pack-current { color: #fff; background-color: #1e439a; } .solve-pack-content { width: 1300px; margin: 53px auto 0; } .solve-pack-content .solve-pack-content-top .content-top-title { font-size: 32px; font-weight: bold; color: #666; line-height: 32px; } .solve-pack-content .solve-pack-content-top .content-top-detail { font-size: 17px; font-weight: 400; color: #333; line-height: 28px; margin-top: 18px; } .solve-pack-content .solve-pack-content-top .content-top-video { display: flex; justify-content: center; align-items: center; width: 166px; height: 43px; background-color: #1e439a; margin-top: 16px; } .solve-pack-content .solve-pack-content-top .content-top-video .content-top-video-img { width: 27px; height: 21px; } .solve-pack-content .solve-pack-content-top .content-top-video .content-top-video-text { margin-left: 9px; font-size: 18px; font-weight: bold; color: #fff; line-height: 32px; } .solve-pack-content .solve-pack-content-middle { margin-top: 49px; } .solve-pack-content .solve-pack-content-middle .content-middle-title { display: flex; align-items: center; } .solve-pack-content .solve-pack-content-middle .content-middle-title .content-middle-title-img { display: block; width: 12px; height: 12px; background-color: #1e439a; } .solve-pack-content .solve-pack-content-middle .content-middle-title .content-middle-title-text { font-size: 24px; font-weight: bold; color: #666; line-height: 32px; margin-left: 10px; } .solve-pack-content .solve-pack-content-middle .content-middle-image { display: flex; align-items: center; width: 100%; height: 275px; background-color: #9ba4b7; margin-top: 10px; overflow: hidden; } .solve-pack-content .solve-pack-content-middle .content-middle-image .content-middle-img { width: 3000px; height: 202px; } .solve-pack-content .solve-pack-content-middle .content-middle-image .content-middle-img #swiper-container2 { max-width: 100%; height: 100%; padding-left: 20px; } .solve-pack-content .solve-pack-content-middle .content-middle-image .content-middle-img #swiper-container2 .long-image { display: block; max-height: 100%; } .solve-pack-content .solve-pack-content-middle .content-middle-image .content-middle-img #swiper-container2 .swiper-slide:nth-child(1) { min-width: 130%; } .solve-pack-content .solve-pack-content-middle .content-middle-image .content-middle-img #swiper-container2 .swiper-slide:nth-child(2) { width: 300px !important; height: 100%; } .solve-pack-content .solve-pack-content-middle .content-middle-detail { font-size: 16px; font-weight: 600; color: #1e439a; line-height: 32px; text-align: center; } .solve-machine { width: 1300px; margin: 99px auto 252px; } .solve-machine ul li { display: flex; flex-direction: column; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); cursor: pointer; } .solve-machine ul li .machine-li-top { height: 90px; display: flex; justify-content: space-between; width: 100%; } .solve-machine ul li .machine-li-top .machine-li-left { display: flex; align-items: center; } .solve-machine ul li .machine-li-top .machine-li-left .li-left-img { display: block; width: 35px; height: 7px; background-color: #1e439a; margin-left: 12px; margin-right: 22px; } .solve-machine ul li .machine-li-top .machine-li-left .li-left-text { font-size: 24px; font-weight: bold; color: #666; line-height: 32px; } .solve-machine ul li .machine-li-top .machine-li-right { display: flex; align-items: center; padding-right: 40px; } .solve-machine ul li .machine-li-top .machine-li-right .li-right-img { width: 21px; height: 12px; background-image: url(/static/cn/images/solve/solve-up.png); background-repeat: no-repeat; background-size: cover; } .solve-machine ul li .machine-li-top .machine-li-right .li-right-img-current { background-image: url(/static/cn/images/solve/solve-down.png); } .solve-machine ul li .machine-li-bottom { display: none; align-items: center; } .solve-machine ul li .machine-li-bottom .li-bottom-left { width: 400px; height: 400px; background-image: url(/static/cn/images/solve/solve-img1.png); background-repeat: no-repeat; background-size: 100% 100%; margin-left: 6px; } .solve-machine ul li .machine-li-bottom .li-bottom-right { flex: 1; margin-left: 92px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right1 .bottom-right1-title { display: flex; align-items: center; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right1 .bottom-right1-title .bottom-right1-title-img { display: block; width: 12px; height: 12px; background-color: #1e439a; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right1 .bottom-right1-title .bottom-right1-title-text { font-size: 18px; font-weight: bold; color: #666; line-height: 32px; margin-left: 15px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right1 .bottom-right1-title-content { font-size: 17px; font-weight: 400; color: #333; line-height: 28px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right2 { margin-top: 14px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right2 .bottom-right2-title { display: flex; align-items: center; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right2 .bottom-right2-title .bottom-right2-title-img { display: block; width: 12px; height: 12px; background-color: #1e439a; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right2 .bottom-right2-title .bottom-right2-title-text { font-size: 18px; font-weight: bold; color: #666; line-height: 32px; margin-left: 15px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right2 .bottom-right2-title-content { font-size: 17px; font-weight: 400; color: #333; line-height: 28px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right3 { margin-top: 14px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right3 .bottom-right3-title { display: flex; align-items: center; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right3 .bottom-right3-title .bottom-right3-title-img { display: block; width: 12px; height: 12px; background-color: #1e439a; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right3 .bottom-right3-title .bottom-right3-title-text { font-size: 18px; font-weight: bold; color: #666; line-height: 32px; margin-left: 15px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right3 .bottom-right3-title-content { font-size: 17px; font-weight: 400; color: #333; line-height: 28px; } .solve-machine ul li .machine-li-bottom .li-bottom-right .bottom-right4 { margin-bottom: 34px; margin-top: 42px; margin-left: 3px; display: flex; justify-content: center; align-items: center; width: 166px; height: 43px; background-color: #1e439a; font-size: 18px; font-weight: bold; color: #fff; line-height: 32px; } .solve-machine ul li .machine-li-bottom-block { display: flex; } .solve-machine ul li[data-pid] { display: none; } .video-box { position: fixed; top: 0; left: 0; z-index: 100; display: none; width: 100%; height: 100%; } .video-box .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); } .video-box .video-container { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; } .video-box .video-container .close { position: absolute; top: 15%; right: 15%; cursor: pointer; } .video-box .video-container .video, .video-box .video-container .w1200 { height: 100%; } .video { display: flex; flex-direction: column; justify-content: center; align-items: center; }