html, body { position: relative; height: 100%; } .pc { display: block; } .phone { display: none; } .header { background: #fff0; } /* 右侧 */ .indexleft { position: fixed; top: 50%; right: 2%; z-index: 999; } .indexleft .item { position: relative; margin-bottom: 5px; overflow: hidden; } .indexleft .item .icon { display: flex; flex-direction: column; align-items: center; } .indexleft .item .icon .img { width: 55px; height: 55px; border-radius: 50%; margin-bottom: 0px; background: #ebebeb; display: flex; align-items: center; justify-content: center; } .indexleft .item .icon .img img { width: 28px; } .indexleft .item .icon p { margin: 0; color: #000; font-size: 14px; opacity: 0; line-height: 2; } .indexleft .item .box { position: absolute; right: 90px; top: 0; } .indexleft .item:hover { overflow: unset; } .indexleft .item:hover .icon .img { background: #0067b3; } .indexleft .item:hover .icon .img img { filter: invert(1); } .indexleft .item:hover .icon p { opacity: 1; } /* 电话 */ .indexleft .phone .box { width: 180px; height: 50px; background: #0067b3; color: #fff; display: flex; align-items: center; justify-content: center; top: calc(50% - 25px); z-index: -1; opacity: 0; } .indexleft .phone:hover .box { opacity: 1; z-index: 99; } .indexleft .ewm .box { width: 240px; height: 150px; top: calc(50% - 75px); z-index: -1; opacity: 0; } .indexleft .ewm:hover .box { opacity: 1; z-index: 99; } @media screen and (max-width: 992px) and (min-width: 0px) { .indexleft { display: none; } } .sectionswiper { width: 100%; height: 100%; overflow: hidden; } .sectionslide { text-align: center; font-size: 18px; overflow: hidden !important; background: linear-gradient(180deg, #e0e8ef 0%, rgba(224, 232, 239, 0.60) 100%); } .section07slide { height: auto !important; } .sectionslide section { width: 100%; height: 100%; } @media screen and (max-width: 960px) and (min-width:0px) { .pc { display: none; } .phone { display: block; } } .boxmore { display: inline-block; width: auto; color: #000; font-size: 14px; height: 21px; line-height: 21px; padding-right: 30px; position: relative; } .boxmore:hover { color: #000; } .boxmore img { position: absolute; right: -0px; transition: 1s; } .boxmore:hover img { right: -10px; } section { width: 100%; position: relative; } /* banner */ .section01 { padding: 0; } .bannerbigbox { background: #fff; padding-top: 90px; width: 100%; height: 100%; position: relative; } .bannerswiper { width: 100%; height: 100%; } .bannerslide { position: relative; width: 100%; height: 100%; overflow: hidden; } .bannerslide img { position: relative; width: 100%; height: 100%; object-fit: cover; } /* end-banner */ /* box2 */ .section02 { padding-top: 100px; } .section02 .container { position: relative; height: 100%; } .section02 .title { position: absolute; top: 7vh; width: 390px; display: flex; flex-direction: column; align-items: flex-start; } .section02 .title h2 { display: block; width: 100%; text-align: left; color: #8c8c8c; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 24px; padding-bottom: 15px; border-bottom: 3px solid #026ad1; margin-bottom: 0; } .section02 .title h1 { color: #000; font-size: 32px; font-weight: 700; line-height: 1; margin-top: 15px; margin-bottom: 30px; } .section02 .title p { color: #000; text-align: justify; font-size: 18px; line-height: 1.5; margin-bottom: 0; } .section02 .box2 { position: relative; width: 100%; height: 100%; } .section02 .box2 .item { position: absolute; bottom: 0; cursor: pointer; } .section02 .box2 .item:nth-child(1) { width: 28vw; left: 5%; z-index: 5; } .section02 .box2 .item:nth-child(2) { left: calc(55% - 16vw); z-index: 1; width: 32vw; } .section02 .box2 .item:nth-child(3) { left: calc(55% - 8vw); z-index: 5; width: 16vw; } .section02 .box2 .item:nth-child(4) { right: 5%; z-index: 5; width: 20vw; } .section02 .box2 .item .imgbox { position: relative; width: 100%; } .section02 .box2 .item .imgbox .image_1 { position: relative; opacity: 1; width: 100%; z-index: 2; left: 0; top: 0; transition: 1s; } .section02 .box2 .item .imgbox .image_2 { position: absolute; opacity: 0; z-index: 1; width: 100%; left: 0; top: 0; transition: 1s; } .section02 .box2 .item:hover .imgbox .image_1 { opacity: 0; } .section02 .box2 .item:hover .imgbox .image_2 { opacity: 1; } .section02 .box2 .item .text { position: absolute; z-index: 3; opacity: 0; transition: 1s; } .section02 .box2 .item:hover .text { opacity: 1; } .section02 .box2 .item .text h1 { color: #fff; font-size: 28px; font-weight: 390; line-height: 1; margin-bottom: 25px; } .section02 .box2 .item .text p { color: #fff; text-align: center; font-size: 16px; line-height: 2; margin-bottom: 0; } .section02 .box2 .item .text a { color: #fff; font-size: 14px; line-height: 1; margin-bottom: 0; } .section02 .box2 .item:nth-child(1) .text { left: 40%; top: 61%; } .section02 .box2 .item:nth-child(2) .text { right: 0; top: 0; } .section02 .box2 .item:nth-child(2) .text h1, .section02 .box2 .item:nth-child(2) .text p, .section02 .box2 .item:nth-child(2) .text a { color: #333; } .section02 .box2 .item:nth-child(3) .text { width: 100%; left: 0%; top: 60%; } .section02 .box2 .item:nth-child(4) .text { width: 100%; left: 0%; top: 60%; } .section02 .box2 .item .text a img { position: absolute; padding-top: 2px; padding-left: 0px; transition: 1s; } .section02 .box2 .item .text a:hover img { padding-left: 10px; } /* end-box2 */ /* box3 */ .section03 { padding-top: 100px; width: 100%; height: 100%; display: flex; } .section03 .title { position: absolute; top: 20vh; left: calc(70% 60px); width: 18vw; display: flex; flex-direction: column; align-items: flex-start; } .section03 .title h2 { display: block; width: 100%; text-align: left; color: #8c8c8c; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 24px; padding-bottom: 15px; border-bottom: 3px solid #026ad1; margin-bottom: 0; } .section03 .title h1 { color: #000; font-size: 32px; font-weight: 700; line-height: 1; margin-top: 15px; margin-bottom: 30px; } .section03 .left { width: 85vw; position: relative; display: flex; } .section03 .left>img { position: absolute; left: 0; top: 0; height: 100%; width: 70%; } .box3swiper { width: 100%; height: 100%; overflow: hidden; } .box3swiperimg { width: 70%; height: 100%; overflow: hidden; } .box3swipertext { width: 30%; } .box3slide { width: 100%; height: 100%; display: flex; } .box3slide .imgbox { width: 100%; display: flex; align-items: center; justify-content: center; } .box3slide .text { width: 100%; padding-left: 60px; padding-top: calc(20vh 120px); display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; } .box3slide .text h1 { color: #000; font-size: 18px; line-height: 1; margin-bottom: 30px; } .box3slide .text p { color: #000; font-size: 16px; text-align: left; line-height: 2; margin-bottom: 30px; } .section03 .right { width: 15vw; } .section03 .right .item { height: 50%; margin: 3px 0; padding: 50px 30px; background: #bbbbbe4d; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .section03 .right .imgbox { width: 100%; height: calc(100% - 60px); display: flex; align-items: center; justify-content: center; } .section03 .right .imgbox img { object-fit: contain; max-width: 100%; max-height: 100%; } .section03 .right h1 { color: #4d4d4d; font-size: 18px; line-height: 1; } .box3swipertext .swiper-pagination { bottom: 30px; display: flex; justify-content: flex-start; padding-left: 60px; } /* end-box3 */ /* box4 */ .section04slide { background: url(/uploads/image/ai/23.png); position: relative; } .section04slide .container { height: 100%; } .section04 { padding-top: 100px; padding-left: 200px; position: relative; display: flex; flex-direction: column; justify-content: space-around; } .section04>img { position: absolute; left: 0; top: 40%; z-index: -1; } .section04 .top { padding-top: 30px; display: flex; } .section04 .top .videobox { width: 30%; position: relative; box-shadow: 4px 16px 26px 0px rgba(0, 0, 0, 0.25); border-radius: 20px; overflow: hidden; border-bottom-right-radius: 0; } .section04 .top .videobox img { width: 100%; height: 100%; position: relative; } .videobutton { position: absolute; width: 60px; height: 60px; left: calc(50% - 30px); top: calc(50% - 30px); z-index: 5; } .videobutton::after { content: ""; display: block; width: 60px; height: 60px; border: 2px solid #d9d9d9; position: absolute; left: 0; top: 0; border-radius: 50%; transition: 0s; } .section04 .top .videobox:hover .videobutton::after { transform: scale(2); opacity: 0; transition: 1s; } .section04 .top .text { width: 70%; padding-left: 60px; position: relative; } .section04 .top .text h1 { color: #000; font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 45px; text-align: left; } .section04 .top .text p { color: #000; text-align: justify; font-size: 16px; line-height: 2; margin-bottom: 45px; text-align: left; } .section04 .top .text a { position: absolute; bottom: 0; right: 0; } .section04 .bottom { display: flex; } .section04 .bottom .number { width: 30%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; } .section04 .bottom .number .item { display: flex; align-items: baseline; position: relative; top: 0; transition: .5s; } .section04 .bottom .number .item:hover { top: -15px; } .section04 .bottom .number .item img { width: 45px; opacity: .75; margin-right: 10px; } .section04 .bottom .number .item span { color: #026ad1; font-size: 32px; line-height: 1; margin-bottom: 0; } .section04 .bottom .number .item p { color: #000; font-size: 16px; line-height: 1; margin-bottom: 0; } .section04 .bottom .number .item .p_2 { margin-left: 5px; margin-right: 15px; } .section04 .bottom .imgbox { width: 70%; margin-left: 60px; display: flex; justify-content: flex-end; align-items: center; transition: 2s; overflow: hidden; box-shadow: 4px 16px 26px 0px rgba(0, 0, 0, 0.25); } .section04 .bottom .imgbox img { width: 100%; border-radius: 15px; overflow: hidden; max-height: 450px; object-fit: cover; transition: 2s; transform: scale(1.01); } .section04 .bottom .imgbox:hover { border-radius: 30px; } .section04 .bottom .imgbox:hover img { transform: scale(1.05); } .videobox.cur .videobutton, .videobox.cur>img { display: none; } .videobox.cur video { display: flex; } .videobox video { position: absolute; z-index: 99; left: 0; top: 0; width: 100%; height: 100%; background: #00000080; display: none; align-items: center; justify-content: center; object-fit: cover; } /* end-box4 */ /* box5 */ .section05 { padding-top: 100px; width: 100%; height: 100%; display: flex; justify-content: space-between; } .section05 .title { width: 35vw; position: relative; height: 100%; padding-left: calc((100% - 1600px) / 2 15px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .section05 .title h2 { display: block; max-width: 100%; width: 390px; text-align: left; color: #8c8c8c; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 24px; padding-bottom: 15px; border-bottom: 3px solid #026ad1; margin-bottom: 0; } .section05 .title h1 { color: #000; font-size: 32px; font-weight: 700; text-align: left; line-height: 1; margin-top: 15px; margin-bottom: 30px; } .section05 .title p { color: #000; font-size: 18px; text-align: left; line-height: 1.5; margin-bottom: 30px; } .section05 .box5 { padding: 90px 0 120px; padding-right: calc((100% - 1600px) / 2 15px); width: 65vw; height: 100%; } .box5swiper { width: 100%; height: 100%; overflow: hidden; } .box5slide { display: flex; justify-content: space-between; } .box5slide .imgbox { width: calc(100% - 300px); display: flex; align-items: center; padding: 20px; } .box5slide .imgbox img { width: 100%; box-shadow: 4px 16px 26px 0px rgba(0, 0, 0, 0.25); } .box5slide .text { width: 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .box5slide .text h1 { color: #000; font-size: 22px; font-weight: 700; width: 100%; text-align: left; line-height: 1; padding-bottom: 10px; border-bottom: 3px solid #026ad1; margin-bottom: 10px; } .box5slide .text h2 { color: #8c8c8c; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 2.16px; text-transform: uppercase; margin-bottom: 0; } .box5slide .text p { color: #000; font-size: 16px; line-height: 1.5; text-align: left; margin: 30px 0; } .section05 .swiper-scrollbar { position: absolute; width: 100vw; max-width: 1600px; margin: 0 auto; display: block; left: calc((100% - 1600px) / 2 15px); bottom: 75px; height: 2px; background: #ddd; } .section05 .swiper-scrollbar .swiper-scrollbar-drag { background: #000 } /* end-box5 */ /* box6*/ .section06 { position: relative; padding-top: 100px; padding-bottom: 90px; display: flex; justify-content: flex-end; align-items: flex-end; } .section06 .title { position: absolute; left: calc((100% - 1600px) / 2 15px); bottom: 120px; display: flex; flex-direction: column; align-items: flex-start; } .section06 .title h1 { color: #000; font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 0; } .section06 .title>p { color: #000; font-size: 18px; line-height: 1.5; text-align: left; margin-top: 30px; margin-bottom: 45px; } .section06 .title .number { width: 430px; padding-bottom: 15px; border-bottom: 4px solid #026ad1; display: flex; align-items: baseline; } .section06 .title .number h1 { color: #000; font-size: 120px; font-weight: 400; line-height: 1; } .section06 .title .number span { color: #000; font-size: 32px; font-weight: 400; line-height: 20px; margin-right: 15px; } .section06 .title .number p { color: #000; font-size: 16px; line-height: 1; margin: 0 5px; } .section06 .box6 .dian { width: 70px; height: 60px; color: #195c9f; font-size: 16px; font-weight: bold; line-height: 1; letter-spacing: 1px; position: absolute; left: calc(50% - 35px); top: calc(50% - 30px); z-index: 9; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .section06 .box6 { position: relative; height: 700px; width: 1600px; display: flex; justify-content: flex-end; align-items: flex-end; } .section06 .box6 .img_2 { position: absolute; width: 0; height: 0; left: 50%; top: 50%; object-fit: contain; overflow: hidden; border-radius: 50%; transition: 3s; } .section06 .box6 .img_2 img { position: absolute; width: 1600px; height: 700px; left: -800px; top: -350px; object-fit: contain; transition: 3s; } .section06 .box6 .img_1 { position: absolute; width: 1600px; height: 700px; object-fit: contain; } .swiper-slide-active .section06:hover .box6 .img_2 { width: 1600px; height: 700px; left: 0; top: 0; } .swiper-slide-active .section06:hover .box6 .img_2 img { left: 0; top: 0; } .swiper-slide-active .section06 .box6 .img_2 { width: 1600px; height: 700px; left: 0; top: 0; } .swiper-slide-active .section06 .box6 .img_2 img { left: 0; top: 0; } /* end-box6 */