.xx-set1 { display: flex; align-content: center; } .xx-set1 .xx-set1-cont1, .xx-set1 .xx-set1-cont2 { width: 50%; /* height: 100%; */ position: relative; } .xx-set1 .xx-set1-cont1::before{ width: 100%; height: 100%; content: ''; display: block; left: 0; bottom: 0; background: #fff; position: absolute } .xx-set1 .xx-set1-cont1 .introduce { position: absolute; top: 50%; width: 100%; left: 0; transform: translatey(-50%); } .xx-set1 .xx-set1-cont1 .introduce .w800{ margin-left: auto; color: #fff; } .xx-set1 .xx-set1-cont1 .introduce h6 { font-size: 16px; color: #666 } .xx-set1 .xx-set1-cont1 .introduce h2 { font-size: 48px; line-height: 1.2; margin-top: 54px; margin-bottom: 40px; color: #333 } .xx-set1 .xx-set1-cont1 .introduce p { line-height: 1.8; color: #666 } .xx-set1 .xx-set1-cont1 .introduce .set1-box { margin-top: 80px; border-left: 2px solid #007aff; } .xx-set1 .xx-set1-cont1 .introduce .set1-box p { line-height: 1; margin-left: 26px; margin-bottom: 20px; color: #007aff } .xx-set1 .xx-set1-cont1 .introduce .set1-box p:last-child { margin-bottom: 0; } .xx-set1 .xx-set1-cont2 .vedio-btn { position: absolute; bottom: 16px; left: 16px; cursor: pointer; transition: all .4s; background: #007aff } .xx-set1 .xx-set1-cont2 .vedio-btn:hover{ background: #000 } .xx-set2 { padding-top: 110px; padding-bottom: 88px; background: url(/uploads/image/wtpsimages/xx-set2-bg.jpg) no-repeat; background-size: cover; } .xx-set2 .xx-set2-title .set2-title-left span { color: #232e3b; font-size:36px; display: inline-block; vertical-align: middle } .set2-title-left .ph-seach{ display: inline-block; vertical-align: middle; height: 36px; line-height: 36px; width: 230px; } .set2-title-left .ph-seach .text{ line-height: 35px; height: 35px; } .xx-set2 .xx-set2-title .set2-title-right a { width: 138px; height: 36px; line-height: 36px; text-align: center; display: inline-block; transition: all .5s; background: #fff; color: #666666; } .xx-set2 .xx-set2-title .set2-title-right a.on, .xx-set2 .xx-set2-title .set2-title-right a:hover { background: #358fff; color: #fff; } /* .xx-set2 .xx-set2-title .set2-title-right a:last-child { background: #fff; } */ .xx-set2 .xx-set2-cont { margin-top: 58px; padding-bottom: 80px; } .xx-set2 p { text-align: center; color: #666666; font-size: 16px; margin-top: 26px; } .xx-set3 { /* padding-top: 90px; */ text-align: center; /* background: no-repeat; */ position: relative; } .xx-set3 .xx-set3-title { position: absolute; width: 100%; top: 0; left: 0; /* transform: translatex(-50%); */ padding-top: 90px; } .xx-set3 .xx-set3-title h4 { font-size: 36px; color: #fff; line-height: 1.5; } .xx-set3 .xx-set3-title h6 { font-size: 18px; color: #fff; margin-top: 20px; } .xx-set3 .xx-set3-cont { padding: 87px 100px; background: #fff; } .xx-set3 .xx-set3-contbox { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); } .xx-set3 .xx-set3-cont .xx-set3-innercont{ display: flex; } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box { flex: 1; border-right: 1px solid #cccccc; padding: 6px 0; } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box img { height: 55px; width: auto; margin-bottom: 28px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition: all .4s } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box:hover img{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); transform: translatey(6px) } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box:hover p{ color: #007aff } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box p { font-size: 18px; color: #333333; } .xx-set3 .xx-set3-cont .xx-set3-innercont .xx-set3-box:last-child { border-right: 0; } .xx-set4 { background: #f1f1f1; padding-top: 248px; padding-bottom: 92px; } .xx-set4 .xx-set4-title { font-size: 36px; color: #232e3b; text-align: center; margin-bottom: 58px; } .xx-set4 .xx-set4-cont { display: flex; } .xx-set4 .xx-set4-cont .xx-set4-box { flex: 1; margin-right: 18px; } .xx-set4 .xx-set4-cont .xx-set4-box:last-child { margin-right: 0; } .xx-set4 .xx-set4-cont .xx-set4-box .img{ height: 308px; display: flex; justify-content: center; align-items: center; } .xx-set4 .xx-set4-cont .xx-set4-box img { width: 100%; height: auto; object-fit: cover; } .xx-set4 .xx-set4-cont .xx-set4-box h3 { font-size: 18px; color: #333333; margin-top: 24px; margin-bottom: 16px; } .xx-set4 .xx-set4-cont .xx-set4-box p { font-size: 14px; color: #afafaf; line-height: 1.8; } .xx-set4 .xx-set4-cont .xx-set4-box .set4-time { margin-top: 30px; color: #999999; } .xx-set4 .xx-set4-cont .xx-set4-box .set4-time::before { content: ' '; background: no-repeat; height: 14px; width: 14px; display: inline-block; margin-right: 12px; } .imgs { height: 100%; width: 100%; } .xx-about-set1 { display: flex; position: relative; margin-bottom: 80px; } .xx-about-set1 .xx-about-set1-left { width: 38%; } .xx-about-set1 .xx-about-set1-right { flex: 1; padding: 0 100px; } .xx-about-set1 .xx-about-set1-right h2 { font-size: 36px; color: #232e3b; margin: 38px 0; } .xx-about-set1 .xx-about-set1-right p { color: #666666; font-size: 16px; line-height: 2; margin-bottom: 20px; text-indent: 2em } .xx-about-set1 { margin-top: 82px; } .xx-about-set1 .xx-about-set1-count { position: absolute; right: 0; bottom: 85px; display: flex; width: 1168px; background: rgba(75, 155, 255, 0.9); padding: 40px 120px; box-sizing: border-box; } .xx-about-set1 .xx-about-set1-count .about-set1-count-box { flex: 1; text-align: center; } .xx-about-set1 .xx-about-set1-count .about-set1-count-box p { font-size: 16px; color: #fff; margin-top: 16px; } .xx-about-set1 .xx-about-set1-count .about-set1-count-box .count-title { margin-top: 26px; } .xx-about-set1 .xx-about-set1-count .about-set1-count-box strong{ font-size: 48px; margin-right: 10px; } .xx-about-comm-title { width: 100%; text-align: center; } .xx-about-comm-title h4 { font-size: 36px; color: #232e3b; margin-bottom: 18px; } .xx-about-comm-title h6 { font-size: 16px; color: #a3a3a3; } .xx-about-set2 { background: ; text-align: center; padding-top: 70px; } .xx-about-set2 .xx-about-comm-title h4 { color: #fff; } .xx-about-set2 .xx-about-comm-title h6 { color: #fff; } .xx-about-set3 { text-align: center; padding-top: 68px; padding-bottom: 125px; } .xx-about-set3 .xx-about-set3-cont { display: flex; margin-top: 64px; } .xx-about-set3 .about-set3-cont-right .about-set3-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; color: #fff; } .xx-about-set3 .about-set3-text h4 { font-size: 24px; margin-bottom: 24px; } .xx-about-set3 .about-set3-text h6 { font-size: 16px; line-height: 1.5; } .xx-about-set3 .xx-about-set3-cont .about-set3-cont-left, .xx-about-set3 .xx-about-set3-cont .about-set3-cont-top, .xx-about-set3 .xx-about-set3-cont .about-set3-bottom-img { position: relative; } .xx-about-set3 .xx-about-set3-cont .about-set3-cont-left { width: 50%; padding-right: 20px; box-sizing: border-box; } .xx-about-set3 .xx-about-set3-cont .about-set3-cont-right { width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .xx-about-set3 .about-set3-cont-left .about-set3-text { position: absolute; bottom: 45px; width: 88%; padding-left: 58px; box-sizing: border-box; text-align: left; color: #fff; } .xx-about-set3 .xx-about-set3-cont .about-set3-cont-bottom { display: flex; } .xx-about-set3 .about-set3-cont-bottom .about-set3-bottom-img { flex: 1; margin-right: 16px; } .xx-about-set3 .about-set3-cont-bottom .about-set3-bottom-img:last-child { margin-right: 0; } .nav-dt{ line-height: 68px; } .nav-d.active{ position: fixed; width: 100%; left: 0; top: 0; z-index: 10; } .xx-about-set4 { background: #f5f5f5; padding-top: 72px; padding-bottom: 80px; } .xx-about-set4 .xx-about-set4-cont { margin-top: 65px; padding-bottom: 60px; } .xx-about-set4 .xx-about-set4-cont .certificateimg { background: #fff; transition: all .4s; display: flex; justify-content: center; align-items: center; padding: 12px 0; } .xx-about-set4 .xx-about-set4-cont a:hover .certificateimg{ transform: translatey(-6px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } .xx-about-set4 .xx-about-set4-cont a:hover p{ color: #007aff } .xx-about-set4 .xx-about-set4-cont p { color: #666666; text-align: center; margin-top: 22px; } .xx-about-set5 { padding-top: 62px; padding-bottom: 58px; } .xx-about-set5 .xx-about-set5-cont { padding-top: 40px; /* margin-top: 54px; */ padding-bottom: 50px; } .xx-about-set5 .xx-about-set5-cont a{ border: 1px solid #cbcbcb; box-sizing: border-box; overflow: hidden; transition: all .4s } .xx-about-set5 .xx-about-set5-cont a:hover{ border-color: #fff; transform: translatey(-6px); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .xx-about-set6 { background: no-repeat; padding-top: 60px; background-size: 100% 100% } /* 服务支持 */ header{ position: relative; z-index: 2; background: #f2f2f2; } .header-nav{ position: absolute; width: 100%; top: 32px; left: 0; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.3) } .header-nav-view{ display: flex; justify-content: space-between; align-items: center; } .header-nav-view .le{ display: flex; /* align-items: center; */ align-content: center; } .header-nav-view .le h1, .header-nav-view .le .h-selet{ border-right: 1px solid rgba(255, 255, 255, 0.3) } .header-nav-view .le h1{ padding-right: 20px; } .header-nav-view .ri{ display: flex; align-content: center; } .header-nav-view .ri ul{ display: flex; } .h-selet a.on span{ color: #007aff } .h-selet img{ margin-right: 10px; } .header-nav-view .ri li{ margin-left: 50px; } .header-nav-view .ri li.on > a{ color: #007aff } .header-nav-view .ri ul{ margin-right: 60px; } .header-nav-view .ri ul li > a{ line-height: 90px; color: #fff; } .header-nav-view .ri ul li > a:hover{ color: #007aff } .h-selet{ position: relative; display: flex; align-items: center; padding: 0 26px; cursor: pointer; } .h-selet span{ color: #ffffff; display: inline-block; vertical-align: middle; margin-right: 10px; } .h-selet i{ width: 5px; height: 3px; display: inline-block; vertical-align: middle; background: no-repeat center; } header .header{ display: flex; justify-content: space-between; align-items: center; height: 32px; line-height: 32px; } .header-top{ display: flex; align-items: center } .header h2{ font-size: 14px; color: #666666 } .header-top .ph span, .header-top .ph img{ display: inline-block; vertical-align: middle } .header-top .ph span{ color: #358fff; font-size: 16px; margin-left: 5px; } .ph-seach{ position: relative; background: #ffffff; height: 26px; padding: 0 12px; width: 196px; margin-left: 12px; line-height: 26px; overflow: hidden; } .ph-seach .text{ width: 100%; display: block; line-height: 26px; height: 26px; } .ph-seach .submit{ width: 13px; height: 13px; background: no-repeat center; position: absolute; right: 12px; top: 50%; margin-top: -6px; } /* 服务支持 */ .nav-d{ background: #fff; border-bottom: 1px solid #d3d3d3; line-height: 60px; } .nav-d-view{ display: flex; justify-content: space-between; } .nav-d-view a{ color: #666666 } .nav-d-view .le a{ display: inline-block; vertical-align: middle; margin-right: 30px; position: relative; } .nav-d-view .le a.on, .nav-d-view .le a:hover{ color: #358fff; } .nav-d-view .le a.on::before, .nav-d-view .le a:hover::before{ width: 100%; opacity: 1; } .nav-d-view .le a::before{ width: 0%; content: ''; height: 1px; opacity: 0; display: block; left: 50%; background: #358fff; transform: translatex(-50%); bottom: -1px; position: absolute; transition: all .5s; } .ser-set1{ padding: 80px 0; } .ser-title{ text-align: center; padding-bottom: 70px; } .ser-title h3{ font-size: 36px; color: #232e3b; margin-bottom: 16px; } .ser-title p{ color: #a3a3a3 } .ser-set1 ul{ display: flex; justify-content: space-around; } .ser-set1 ul li{ text-align: center; } .ser-set1 ul li .yd{ width: 130px; height: 130px; border-radius: 50%; background: #358fff; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .ser-set1 ul li p{ font-size: 18px; color: #666666 } .ser-set2{ background: no-repeat center; background-size: 100% auto; padding: 54px 0 132px; } .ser-set2 .ser-title h3{ color: #ffffff } .ser-set2 .ser-title p{ color: #a3a6aa } .ser-set2 ul{ display: flex; justify-content: center; align-content: center; } .ser-set2 ul li{ padding: 0 78px; text-align: center; position: relative; } .ser-set2 ul li:last-of-type::before{ display: none } .ser-set2 ul li::before{ width: 1px; height: 100%; content: ''; background: #474d55; top: 50%; transform: translatey(-50%); right: 0; position: absolute; } .ser-set2 ul li p{ margin-top: 26px; color: #fff; } .ser-set3{ display: flex; justify-content: space-between; align-content: center; } .img img{ width: 100%; height: auto; } .ser-set3 > div, .ser-set3 ul{ width: 50%; } .ser-set3 ul{ display: flex; flex-wrap: wrap; } .ser-set3 ul li{ width: 50%; height: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; box-sizing: border-box } .ser-set3 ul li:nth-of-type(1), .ser-set3 ul li:nth-of-type(3){ border-right: 1px solid #e8e9ea } .ser-set3 ul li:nth-of-type(1), .ser-set3 ul li:nth-of-type(2){ border-bottom: 1px solid #e8e9ea } .ser-set3 ul li h6{ font-size: 30px; color: #358fff; margin-bottom: 16px; } .ser-set3 ul li p{ color: #666666 } .ser-set4{ padding: 70px 0 118px; background: #f5f5f5 } .ser-set5{ padding: 70px 0 118px; } .ser-set4 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } .ser-set4 ul li{ width: 49%; margin-bottom: 18px; } .ser-set4 ul li a{ display: flex; background: #fff; border-radius: 6px; padding: 30px; justify-content: space-between; align-items: center; transition: all .4s } .ser-set4 ul li a:hover{ box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); transform: translatey(-8px) } .ser-set4 ul li a span{ color: #666666; display: inline-block; vertical-align: middle; margin-left: 8px; } .ser-set4 ul li a i{ width: 27px; height: 25px; background: no-repeat center; } .ser-set5 .ft{ display: flex; justify-content: space-between; } .ser-set5 .ft input{ width: 49.5%; display: block; background: #f5f5f5; padding: 18px 30px; box-sizing: border-box; margin-bottom: 18px; font-size: 16px; } .ser-set5 textarea{ display: block; width: 100%; background: #f5f5f5; box-sizing: border-box; padding: 20px 30px; font-size: 16px; margin-bottom: 20px; } .ser-set5 .submit{ width: 100%; background: #358fff; color: #fff; display: block; line-height: 54px; font-size: 16px; text-align: center } .ser-set5 .submit:hover{ opacity: 0.8; } /* 联系我们 */ .cont-set1{ padding: 72px 0 50px; } .cont-set1-views{ display: flex; justify-content: center; align-items: center; } .cont-set1-views .pt{ text-align: center; } .cont-set1-views .pt h6{ color: #666666; padding: 20px 0 26px; } .cont-set1-views .pt p{ font-size: 18px; color: #358fff; line-height: 1.4; } .cont-set1-views i{ width: 1px; height: 188px; background: #e7e8e9; margin: 0 152px; } .cont-set2{ width: 100%; position: relative; } .cont-set2 .ing{ width: 100%; height: auto; } .cont-set2 .const{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 16px; color: #fff; line-height: 2; } .cont-set2 .const a{ display: block; margin: 0 auto; width: 134px; background: #358fff; line-height: 2.5; margin-top: 40px; } .xx-product-set1-box:hover img{ transform: scale(1.1) } .xx-product-set1-box:hover a p{ color: #007aff } .cont-set2 .const a:hover{ opacity: .8; } .cont-set3 .ser-set5 .ft input{ width: 32.5%; } footer{ background: no-repeat center; text-align: center; background-size: cover; padding: 46px 0 60px; color: #ecedee } .footer-set1 h6{ color: #fff; font-size: 30px; padding-top: 10px; padding-bottom: 38px; } .footer-set2{ text-align: center; line-height: 64px; border-top: 1px solid #515964; border-bottom: 1px solid #515964 } .footer-set2 a{ display: inline-block; vertical-align: middle; margin: 0 30px; } .footer-set5 a:hover, .footer-set2 a:hover{ color: #007aff !important; } .footer-set3{ padding-top: 32px; padding-bottom: 28px; } .footer-set3 i{ width: 1px; height: 14px; display: inline-block; vertical-align: middle; background: #858c94; margin: 0 10px; } .footer-set4 >div{ width: 38px; height: 38px; display: inline-block; vertical-align: middle; border-radius: 50%; text-align: center; line-height: 38px; margin: 0 6px; margin-bottom: 20px; position: relative; /* margin: ; */ /* display: flex; */ /* justify-content: c11b86b */ } .footer-set4 >div.wx{ background: #11b86b } .footer-set4 >div:hover > img{ opacity: .8; } .footer-set4 >div.wx .pd{ position: absolute; bottom: 40px; left: 50%; margin-left: -50px; width: 100px; height: 0; overflow: hidden; transition: all .4s; opacity: 0; } .footer-set4 >div.wx:hover .pd{ opacity: 1; height: 100px; } .footer-set4 >div.wx .pd img{ width: 100%; height: 100px; } .footer-set4 >div.ds{ background: #377cf0 } .footer_link{ margin: 30px auto; } .footer_link ul { display: flex; align-items: center; justify-content: center; } .footer_link ul li{ margin-left: 10px; } /* 首页 */ .index_main1_ul2 { position: relative; padding-bottom: 68px; } .index_main1_ul2 li{ width: 70%; } .index_main1_ul2 .swiper-slide-prev { transform: scale(.8) translatex(20%); opacity: .6; } .index_main1_ul2 .swiper-slide-next { transform: scale(.8) translatex(-20%); opacity: .6; } .index_main1_ul2 .swiper-slide-active { transform: scale(1); opacity: 1; z-index: 2; box-shadow: -10px 35px 29px rgb(0 0 0 / 15%); } .index_main1_ul2 .swiper-button-prev, .index_main1_ul2 .swiper-button-next { outline: none; z-index: 2; } .index_main1_ul2 .swiper-button-prev:before, .index_main1_ul2 .swiper-button-next:before { content: ''; position: absolute; width: 300px; height: 600px; left: 50%; top: 50%; margin-left: -150px; margin-top: -300px; } .index_main1_ul2 .swiper-pagination-bullet { background: #fff; width: 14px; height: 14px; opacity: 1; } .index_main1_ul2 .swiper-pagination-bullet-active { background: #007aff; } .index_main1_ul2 li { /* overflow: hidden; */ } .index_main1_ul2 li a > img{ min-width: 100%; height: 100%; } .index_main1_ul2 li .index_img2{ position: absolute; top: 0; left: 50%; transform: translatex(-50%); z-index: 2; opacity: 1; transition: 0s;height: auto;} .index_main1_ul2 li:hover .index_img2{ opacity: 0; } .index_main1_ul2 li .index_img3{ position: absolute; top: 0; left: 0; z-index: 2; opacity: 1; transition: 0s;} .index_main1_ul2 li:hover .index_img3{ opacity: 0; } .index_main1_ul2 li .index_img4{ position: absolute; top: 0; left: 0; z-index: 2; opacity: 1; transition: 0s;} .index_main1_ul2 li:hover .index_img4{ opacity: 0; } .index_main1_ul2 li video{ transition: 0s; background-color: #000; z-index: 3; opacity: 0;} .index_main1_ul2 li:hover video{ position: relative; opacity: 1;} .index_main1_ul2 li video{ width: 100%; height:571px;} .index_main1_ul2 li h4{ width:100%; font-size: 16px; color: #fff; z-index: 3; position: absolute; top:40%; text-align:center; font-size:24px; font-weight:bold;} .index_main1_ul2 li h5{ width:100%; font-size: 16px; color: #fff; z-index: 3; position: absolute; bottom:10%; text-align:center; font-size:24px; font-weight:bold;} .index_main1_ul2 li h4 span{ display:block; height:100px;} .index_main1_ul2 li h4 span img{ width:82px; height:82px;} .index_main1_ul2 li:hover h4{ opacity: 0; } .index_main1_ul2 li video { height: 600px; } .index_main1_ul2{ overflow: hidden; } .zj-set2-title{ text-align: center; margin-bottom: 40px; } .zj-set2{ padding: 68px 0; } .zj-set2 h3{ font-size: 36px; margin-bottom: 20px; } .zj-set4-cont{ width: 630px; margin: 0 auto; color: #666; line-height: 1.7; } .zj-set2-title a{ display: inline-block; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid #007aff; color: #007aff; margin-top: 22px; transition: all .4s; } .img{ width: 100%; overflow: hidden; } .img img{ transition: all .5s } .xx-set2-cont a:hover img{ transform: scale(1.1) } .xx-set2-cont a:hover p{ color: #007aff } .xx-set4-box:hover img{ transform: scale(1.1) } .xx-set4-box:hover h3 a{ color: #007aff } .zj-set2-title a:hover{ padding: 10px 28px; border: 1px solid #007aff; color: #fff; background: #007aff } .zj-set2-title a::after{ width: 15px; height: 7px; content: ''; display: inline-block; vertical-align: middle; background: no-repeat center } .zj-set2-more{ font-size: 18px; width: 220px; text-align: center; line-height: 2.6; background: #007aff; color: #fff !important; display: block; margin: 0 auto; transition: all .5s } .zj-set2-more:hover{ line-height: 2.6 !important; opacity: .6; } /* 服务支持 */ header{ position: relative; z-index: 2; background: #f2f2f2; } .header-nav{ position: absolute; width: 100%; top: 32px; left: 0; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.3) } .header-nav-view{ display: flex; justify-content: space-between; align-items: center; } .header-nav-view .le{ display: flex; /* align-items: center; */ align-content: center; } .header-nav-view .le h1, .header-nav-view .le .h-selet{ border-right: 1px solid rgba(255, 255, 255, 0.3) } .header-nav-view .le h1{ padding-right: 20px; } .header-nav-view .ri{ display: flex; align-content: center; } .header-nav-view .ri ul{ display: flex; } .h-selet img{ margin-right: 10px; } .header-nav-view .ri li{ margin-left: 50px; } .header-nav-view .ri ul{ margin-right: 60px; } .header-nav-view .ri ul li > a{ line-height: 90px; color: #fff; } .h-selet{ position: relative; display: flex; align-items: center; padding: 0 26px; cursor: pointer; } .h-selet span{ color: #ffffff; display: inline-block; vertical-align: middle; margin-right: 10px; } .h-selet i{ width: 5px; height: 3px; display: inline-block; vertical-align: middle; background: no-repeat center; } header .header{ display: flex; justify-content: space-between; align-items: center; height: 32px; line-height: 32px; } .header-top{ display: flex; align-items: center } .header h2{ font-size: 14px; color: #666666 } .header-top .ph span, .header-top .ph img{ display: inline-block; vertical-align: middle } .header-top .ph span{ color: #358fff; font-size: 16px; margin-left: 5px; } .ph-seach{ position: relative; background: #ffffff; height: 26px; padding: 0 12px; width: 196px; margin-left: 12px; line-height: 26px; overflow: hidden; } .ph-seach .text{ width: 100%; display: block; line-height: 26px; height: 26px; } .ph-seach .submit{ width: 13px; height: 13px; background: no-repeat center; position: absolute; right: 12px; top: 50%; margin-top: -6px; } /* 服务支持 */ .nav-d{ background: #fff; border-bottom: 1px solid #d3d3d3; line-height: 60px; } .nav-d-view{ display: flex; justify-content: space-between; } .nav-d-view a{ color: #666666 } .nav-d-view .le a{ display: inline-block; vertical-align: middle; margin-right: 30px; position: relative; } .nav-d-view .le a.on, .nav-d-view .le a:hover{ color: #358fff; } .nav-d-view .le a.on::before, .nav-d-view .le a:hover::before{ width: 100%; opacity: 1; } .nav-d-view .le a::before{ width: 0%; content: ''; height: 1px; opacity: 0; display: block; left: 50%; background: #358fff; transform: translatex(-50%); bottom: -1px; position: absolute; transition: all .5s; } .ser-set1{ padding: 80px 0; } .ser-title{ text-align: center; padding-bottom: 70px; } .ser-title h3{ font-size: 36px; color: #232e3b; margin-bottom: 16px; } .ser-title p{ color: #a3a3a3 } .ser-set1 ul{ display: flex; justify-content: space-around; } .ser-set1 ul li{ text-align: center; } .ser-set1 ul li .yd{ width: 130px; height: 130px; border-radius: 50%; background: #358fff; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .ser-set1 ul li p{ font-size: 18px; color: #666666 } .ser-set2{ background: no-repeat center; background-size: 100% auto; padding: 54px 0 132px; } .ser-set2 .ser-title h3{ color: #ffffff } .ser-set2 .ser-title p{ color: #a3a6aa } .ser-set2 ul{ display: flex; justify-content: center; align-content: center; } .ser-set2 ul li{ padding: 0 78px; text-align: center; position: relative; } .ser-set2 ul li::before{ width: 1px; height: 100%; content: ''; background: #474d55; top: 50%; transform: translatey(-50%); right: 0; position: absolute; } .ser-set2 ul li p{ margin-top: 26px; color: #fff; } .ser-set3{ display: flex; justify-content: space-between; align-content: center; } .img img{ width: 100%; height: auto; } .ser-set3 > div, .ser-set3 ul{ width: 50%; } .ser-set3 ul{ display: flex; flex-wrap: wrap; } .ser-set3 ul li{ width: 50%; height: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; box-sizing: border-box } .ser-set3 ul li:nth-of-type(1), .ser-set3 ul li:nth-of-type(3){ border-right: 1px solid #e8e9ea } .ser-set3 ul li:nth-of-type(1), .ser-set3 ul li:nth-of-type(2){ border-bottom: 1px solid #e8e9ea } .ser-set3 ul li h6{ font-size: 30px; color: #358fff; margin-bottom: 16px; } .ser-set3 ul li p{ color: #666666 } .ser-set4{ padding: 70px 0 118px; background: #f5f5f5 } .ser-set5{ padding: 70px 0 118px; } .ser-set4 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } .ser-set4 ul li{ width: 49%; margin-bottom: 18px; } .ser-set4 ul li a{ display: flex; background: #fff; border-radius: 6px; padding: 30px; justify-content: space-between; align-items: center; } .ser-set4 ul li a span{ color: #666666; display: inline-block; vertical-align: middle; margin-left: 8px; } .ser-set4 ul li a i{ width: 27px; height: 25px; background: no-repeat center; } .ser-set5 .ft{ display: flex; justify-content: space-between; } .ser-set5 .ft input{ width: 49.5%; display: block; background: #f5f5f5; padding: 18px 30px; box-sizing: border-box; margin-bottom: 18px; font-size: 16px; } .ser-set5 textarea{ display: block; width: 100%; background: #f5f5f5; box-sizing: border-box; padding: 20px 30px; font-size: 16px; margin-bottom: 20px; } .ser-set5 .submit{ width: 100%; background: #358fff; color: #fff; display: block; line-height: 54px; font-size: 16px; } /* 联系我们 */ .cont-set1{ padding: 72px 0 50px; } .cont-set1-views{ display: flex; justify-content: center; align-items: center; } .cont-set1-views .pt{ text-align: center; } .cont-set1-views .pt h6{ color: #666666; padding: 20px 0 26px; } .cont-set1-views .pt p{ font-size: 18px; color: #358fff; line-height: 1.4; } .cont-set1-views i{ width: 1px; height: 188px; background: #e7e8e9; margin: 0 152px; } .cont-set2{ width: 100%; position: relative; } .cont-set2 .ing{ width: 100%; height: auto; } .cont-set2 .const{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 16px; color: #fff; line-height: 2; } .cont-set2 .const a{ display: block; margin: 0 auto; width: 134px; background: #358fff; line-height: 2.5; margin-top: 40px; } .cont-set3 .ser-set5 .ft input{ width: 32.5%; } footer{ background: no-repeat center; text-align: center; background-size: cover; padding: 46px 0 60px; color: #ecedee } .footer-set1 h6{ color: #fff; font-size: 30px; padding-top: 10px; padding-bottom: 38px; } .footer-set2{ text-align: center; line-height: 64px; border-top: 1px solid #515964; border-bottom: 1px solid #515964 } .footer-set2 a{ display: inline-block; vertical-align: middle; margin: 0 30px; } .footer-set3{ padding-top: 32px; padding-bottom: 28px; } .footer-set3 i{ width: 1px; height: 14px; display: inline-block; vertical-align: middle; background: #858c94; margin: 0 10px; } .footer-set4 >div{ width: 38px; height: 38px; display: inline-block; vertical-align: middle; border-radius: 50%; text-align: center; line-height: 38px; margin: 0 6px; margin-bottom: 20px; /* margin: ; */ /* display: flex; */ /* justify-content: c11b86b */ } .footer-set4 >div.wx{ background: #11b86b } .footer-set4 >div.ds{ background: #377cf0 } /* 首页 */ .index_main1_ul2 { position: relative; padding-bottom: 68px; } .index_main1_ul2 li{ width: 70%; } .index_main1_ul2 .swiper-slide-prev { transform: scale(.8) translatex(20%); opacity: .6; } .index_main1_ul2 .swiper-slide-next { transform: scale(.8) translatex(-20%); opacity: .6; } .index_main1_ul2 .swiper-slide-active { transform: scale(1); opacity: 1; z-index: 2; box-shadow: -10px 35px 29px rgb(0 0 0 / 15%); } .index_main1_ul2 .swiper-button-prev, .index_main1_ul2 .swiper-button-next { outline: none; z-index: 2; } .index_main1_ul2 .swiper-button-prev:before, .index_main1_ul2 .swiper-button-next:before { content: ''; position: absolute; width: 300px; height: 600px; left: 50%; top: 50%; margin-left: -150px; margin-top: -300px; } .index_main1_ul2 .swiper-pagination-bullet { background: #fff; width: 14px; height: 14px; opacity: 1; } .index_main1_ul2 .swiper-pagination-bullet-active { background: #007aff; } .index_main1_ul2 li { /* overflow: hidden; */ } .index_main1_ul2 li a > img{ min-width: 100%; height: 100%; } .index_main1_ul2 li .index_img2{ position: absolute; top: 0; left: 50%; transform: translatex(-50%); z-index: 2; opacity: 1; transition: 0s;} .index_main1_ul2 li:hover .index_img2{ opacity: 0; } .index_main1_ul2 li .index_img3{ position: absolute; top: 0; left: 0; z-index: 2; opacity: 1; transition: 0s;} .index_main1_ul2 li:hover .index_img3{ opacity: 0; } .index_main1_ul2 li .index_img4{ position: absolute; top: 0; left: 0; z-index: 2; opacity: 1; transition: 0s;} .index_main1_ul2 li:hover .index_img4{ opacity: 0; } .index_main1_ul2 li video{ transition: 0s; background-color: #000; z-index: 3; opacity: 0;} .index_main1_ul2 li:hover video{ position: relative; opacity: 1;} .index_main1_ul2 li video{ width: 100%; height:571px;} .index_main1_ul2 li h4{ width:100%; font-size: 16px; color: #fff; z-index: 3; position: absolute; top:40%; text-align:center; font-size:24px; font-weight:bold;} .index_main1_ul2 li h5{ width:100%; font-size: 16px; color: #fff; z-index: 3; position: absolute; bottom:10%; text-align:center; font-size:24px; font-weight:bold;} .index_main1_ul2 li h4 span{ display:block; height:100px;} .index_main1_ul2 li h4 span img{ width:82px; height:82px;} .index_main1_ul2 li:hover h4{ opacity: 0; } .index_main1_ul2 li video { height: 600px; } .index_main1_ul2{ overflow: hidden; } .zj-set2-title{ text-align: center; margin-bottom: 40px; } .zj-set2{ padding: 68px 0; } .zj-set2 h3{ font-size: 36px; margin-bottom: 20px; } .zj-set4-cont{ width: 630px; margin: 0 auto; color: #666; line-height: 1.7; } .zj-set2-title a{ display: inline-block; padding-bottom: 10px; border-bottom: 1px solid #007aff; color: #007aff; margin-top: 22px; } .zj-set2-title a::after{ width: 15px; height: 7px; content: ''; display: inline-block; vertical-align: middle; background: no-repeat center } .zj-set2-more{ font-size: 18px; width: 220px; text-align: center; line-height: 2.6; background: #007aff; color: #fff !important; display: block; margin: 0 auto; } .xx-about-set2-views li{ height: 480px; position: relative; } .xx-about-set2-views li .txt{ width: 440px; background: #ffffff; min-height: 150px; padding: 0 32px; box-sizing: border-box; text-align: left; position: absolute; left: 50%; transform: translatex(-50%) } .xx-about-set2-views li:nth-of-type(2n) .txt{ top: 12px; } .xx-about-set2-views li:nth-of-type(2n-1) .txt{ bottom: 0; } .xx-about-set2-views{ width: 85%; margin: 0 auto; } .xx-about-set2-views.swiper-container{ overflow: unset; margin: 52px auto 95px; } .xx-about-set2 .w1600{ overflow: hidden; } .xx-about-set2-views li .txt h6{ font-size: 36px; color: #007aff; margin-top: 16px; margin-bottom: 8px; } .xx-about-set2-views li .txt .cont{ line-height: 1.5; height: 140px; overflow-y: auto } .xx-about-set2-views::before{ width: 110%; content: ''; height: 1px; display: block; background: #606d7b; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) } .xx-about-set2-views li::before{ width: 18px; height: 18px; content: ''; display: block; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) } .xx-about-set2-2{ position: relative; } .xx-about-set2-2 i{ width: 19px; height: 35px; background: no-repeat center; position: absolute; margin-top: -18px; top: 50%; cursor: pointer; } .xx-about-set2-2 i#ind1{ left: 0; z-index: 9; } .xx-about-set2-2 i#ind2{ right: 0; transform: rotate(180deg); z-index: 9; } .xx-dst{ padding-bottom: 70px; padding-top: 26px; } .xx-dst .tit{ background: #fff; display: flex; justify-content: space-between; padding: 20px 32px; cursor: pointer; margin-bottom: 20px; font-size: 18px; align-items: center } .xx-dst .tit i{ width: 18px; height: 10px; display: block; background: no-repeat center; } .xx-dst .cont{ background: #fff; padding: 20px; margin-bottom: 16px; } /* 新闻动态 */ .xx-new-set1 { background: #f1f1f1; padding-top: 56px; padding-bottom: 92px; } .xx-new-set1 .xx-new-set1-title { font-size: 36px; color: #333333; text-align: center; margin-bottom: 12px; } .xx-new-set1 .xx-new-set1-cont { display: flex; flex-wrap: wrap; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box { width: 32.3333333333%; margin-right: 1.5%; margin-top: 34px; } .xx-new-set1-box a:hover img{ transform: scale(1.1) } .xx-new-set1-box:hover h3 a{ color: #007aff } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box:nth-child(3n) { margin-right: 0; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box .img { height: 380px; background: #fff; display: flex; justify-content: center; align-items: center; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box .img img { max-width: 100%; max-height: 100%; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box h3 { font-size: 18px; color: #333333; margin-top: 24px; margin-bottom: 16px; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box p { font-size: 14px; color: #afafaf; line-height: 1.8; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box .set4-time { margin-top: 30px; color: #999999; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box .set4-time::before { content: ' '; background: no-repeat; height: 14px; width: 14px; display: inline-block; margin-right: 12px; } /* 应用案例 */ .xx-case-set1 { display: flex; flex-wrap: wrap; } .xx-case-set1 .xx-case-set1-box { width: 49%; margin-right: 2%; margin-bottom: 34px; } .xx-case-set1 .xx-case-set1-box .img{ position: relative; } .xx-case-set1 .xx-case-set1-box .img:hover video{ opacity: 1; } .xx-case-set1 .xx-case-set1-box .img:hover img{ opacity: 0; } .xx-case-set1 .xx-case-set1-box video{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; z-index: 2; } .xx-new-set1 .xx-new-set1-cont .xx-new-set1-box img { width: 100%; height: auto; } .xx-case-set1 .xx-case-set1-box:nth-child(2n) { margin-right: 0; } .page-router{ text-align: right; line-height: 60px; color: #666 } .xx-case-set1 .xx-case-set1-box h3{ color: #358fff; font-size: 18px; margin-top: 26px; margin-bottom: 18px; } .xx-case-set1 .xx-case-set1-box p{ font-size: 14px; color: #666666 } /* 自动化生产设备 */ .product-detail { background: #f5f5f5; padding-bottom: 115px; } .xx-product-set1{ background: #f5f5f5; padding: 60px 0; } .xx-product-set1 .xx-product-set1-cont { display: flex; flex-wrap: wrap; } .xx-product-set1 .xx-product-set1-cont .xx-product-set1-box { width: 23%; margin-right: 2.6%; margin-top: 34px; } .xx-product-set1 .xx-product-set1-cont .xx-product-set1-box:nth-child(4n) { margin-right: 0; } .xx-product-set1 .xx-product-set1-cont .xx-product-set1-box img { width: 100%; height: auto; } .xx-product-set1 .xx-product-set1-title { font-size: 36px; color: #333333; text-align: left; margin-bottom: 16px; } .xx-product-set1 .xx-product-set1-box p { text-align: center; color: #666666; margin-top: 24px; } /* 产品详情 */ .xx-details-set1 { background: #f5f5f5; } .xx-details-set1 .xx-details-set1-top { display: flex; background: #fff; } .details-set1-top-img{ width: 38%; margin-right: 2%; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text { width: 55%; padding: 140px 145px 160px 145px; box-sizing: border-box; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text h2 { font-size: 30px; color: #232e3b; margin-bottom: 25px; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text p { font-size: 16px; color: #666666; line-height: 1.5; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text a { background: #358fff; color: #fff; display: inline-block; width: 138px; height: 38px; border-radius: 50px; text-align: center; line-height: 38px; margin-top: 42px; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text a:hover{ opacity: .8; } .xx-details-set2 { display: flex; } .xx-details-set2 .xx-set2-product-detail { box-sizing: border-box; width: 78%; } .xx-details-set2 .xx-set2-product-detail h4, .xx-details-set2 .xx-set2-relevant-product h4{ height: 80px; line-height: 80px; color: #232e3b; font-size: 18px; } .xx-details-set2 .set2-product-detail-box h6 { font-size: 18px; color: #358fff; font-weight: 600; } .xx-details-set2 .set2-product-detail-box p { margin-top: 30px; line-height: 1.6; color: #666666; font-size: 16px; margin-top: 0; } .xx-details-set2 .set2-product-detail-box .detail-params { margin-top: 60px; } .xx-details-set2 .xx-set2-product-detail .set2-product-detail-box { padding-left: 85px; padding-right: 85px; background: #fff; padding-top: 56px; padding-bottom: 80px; box-sizing: border-box; } .xx-details-set2 .xx-set2-relevant-product { width: 20%; margin-left: 2%; } .xx-details-set2 .xx-set2-relevant-product .set2-product-detail-box p { color: #666666; text-align: center; height: 52px; line-height: 52px; } .tnavbox{position:absolute;width:160px;left:50%;margin-left:-80px;top:85%;height:0;padding-top:15px;/* display:none;*/ text-align: center;z-index: 99999999;} .tnav{ background:#fff; box-shadow:0 0 16px -4px rgba(0,0,0,.3); padding:20px 0 18px; transform:translatey(20px); -webkit-transform:translatey(20px); opacity:0; visibility:hidden; transition:.5s; -webkit-transition:.5s; } .tnav a{ display:block; color:#666; line-height:35px; border-bottom: 1px solid transparent;-webkit-transition: .3s; -o-transition: .3s; transition: .3s;} .tnav a:hover{ color: #fff; } .tnav a:hover,.tnav a.on{ background:#007aff; color:#fff;} .h-selet:hover .tnavbox { height:100px; } .h-selet:hover .tnavbox .tnav{ transform:translate(0); -webkit-transform:translate(0); opacity:1; visibility:visible; } .h-selet .tnavbox i{ position: absolute; width: 20px; height: 4px; background-color: #007aff; left: 50%; top: 0; margin-left: -10px; } @media screen and (max-width: 1800px){ .w1600{ width: 1200px; } .w800{ width: 600px; } .xx-set1 .xx-set1-cont1 .introduce h2{ font-size: 36px; line-height: 1.2; margin-top: 32px; margin-bottom: 32px; color: #333 } .xx-set1 .xx-set1-cont1 .introduce{ font-size: 14px; } .xx-set1 .xx-set1-cont1 .introduce .set1-box{ margin-top: 46px; } .xx-set2 { padding-top: 80px; padding-bottom: 70px; } .xx-set2 .xx-set2-title .set2-title-left span{ font-size: 32px; } .xx-set2 .xx-set2-cont{ margin-top: 36px; padding-bottom: 56px; } .zj-set2 h3{ font-size: 32px; margin-bottom: 16px; } .index_main1_ul2 li img{ max-width: 100%; height: auto; } .xx-set3 .xx-set3-title{ padding-top: 70px; } .xx-set3 .xx-set3-title h4{ font-size: 32px; } .xx-set3 img{ max-width: 100%; height: auto; } .xx-set3 .xx-set3-cont{ padding: 65px 50px; } .xx-set4{ padding-top: 185px; padding-bottom: 86px; } .xx-set4 .xx-set4-title{ font-size: 32px; margin-bottom: 40px; } .xx-about-set1 .xx-about-set1-left img{ max-width: 100%; height: auto; } .xx-about-set1 .xx-about-set1-right{ padding: 0 58px } .xx-about-set1 .xx-about-set1-right h2{ font-size: 32px; margin: 30px 0; } .xx-about-set1 .xx-about-set1-right p{ font-size: 14px; margin-bottom: 14px; } .xx-about-set1 .xx-about-set1-count{ bottom: 60px; width: 1090px; padding: 14px 80px; } .xx-about-set1 .xx-about-set1-count .about-set1-count-box .count-title{ margin-top: 12px; } .xx-about-set2-views li .txt .cont{ font-size: 14px; } .xx-about-set2{ padding-top: 58px; } .xx-about-comm-title h4{ font-size: 32px; margin-bottom: 14px; } .xx-about-comm-title h6{ font-size: 14px; } .xx-about-set3 .xx-about-set3-cont{ margin-top: 42px; } .xx-about-set3 .about-set3-text h6{ font-size: 14px; } .xx-about-set3{ padding-bottom: 92px; } .xx-about-set4 .xx-about-set4-cont .certificateimg{ max-width: 100%; height: auto; padding: 0; overflow: hidden; transition: all .4s } .xx-about-set4 .xx-about-set4-cont .certificateimg img{ transition: all .4s; } .xx-about-set4 .xx-about-set4-cont{ margin-top: 40px; padding-bottom: 45px; } .xx-about-set4{ padding-bottom: 60px; } .xx-about-set5 .xx-about-set5-cont a img{ width: 100%; height: auto; } .xx-about-set5 .xx-about-set5-cont{ margin-top: 32px; } .ser-set1{ padding: 60px 0; } .ser-title h3{ font-size: 32px; margin-bottom: 12px; } .ser-set1 ul li .yd{ width: 120px; height: 120px; margin-bottom: 20px; } .ser-title{ padding-bottom: 40px; } .ser-set5, .ser-set4{ padding: 70px 0 70px; } .xx-details-set1 .xx-details-set1-top .details-set1-top-text{ padding: 86px 110px 99px 99px; } .index_main1_ul2 li video{ height: 442px; } } .searchlist-input-container { height: 50px; width: 800px; margin: 0 auto; white-space: nowrap; display: flex; align-content: center } .searchlist-input-container input { background-color: #fff; width: 650px; height: 50px; line-height: 50px; border: 1px solid #d9d9d9; float: left; padding: 0 20px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #595959; box-sizing: border-box } .searchlist-input-container .btn-search { width: 150px; cursor: pointer; background-color: #007aff; color: #fff; border-color: #007aff; border-radius: 0 4px 4px 0; } .pagination-box { /* margin-top: 40px; */ text-align: center; line-height: 32px; color: #595959; font-size: 14px; margin: 40px auto; } .pagination-box select { margin: 0 8px; } .pagination-box a, .pagination-box span { display: inline-block; width: 32px; height: 32px; line-height: 30px; border: 1px solid #e2e2e2; border-radius: 2px; text-align: center; margin-right: 8px; cursor: pointer; vertical-align: top; } .pagination-box a:last-child, .pagination-box span:last-child { margin-right: 0; } .pagination-box a.active, .pagination-box span.active, .pagination-box a.current, .pagination-box span.current, .pagination-box a:hover, .pagination-box span:hover { background-color: #007aff; border-color: #007aff; color: #fff; } .pagination-box select { height: 32px; border: 1px solid #e2e2e2; box-sizing: border-box; } .pagination-box .prev_disabled, .pagination-box .next_disabled { background-color: transparent !important; border-color: #e2e2e2 !important; color: #e2e2e2 !important; cursor: no-drop; } .pagination-box .prev::before, .pagination-box .prev_disabled::before { content: '<'; } .pagination-box .next::before, .pagination-box .next_disabled::before { content: '>'; } .bananrindex{ position: relative; } .bananrindex .zhezhao{ font-size: 48px; color: #fff; position: absolute; /* left: 50%; */ /* top: 50%; */ left: 0; top: 0; background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; /* transform: translate(-50%,-50%); */ z-index: 2; width: 100%; height: 100%; } .bananrindex video{ object-fit: cover }