.index_server-slider_layer { display: none; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6); text-align: center; } .index_server-slider_layer img { width: 60%; border: solid 1px #ccc; margin-top: 10%; } .index_server-slider_layer .close { position: absolute; width: 30px; right: 10%; cursor: pointer; height: 30px; background: url(../img/close.png) center center no-repeat; } .index_server-slider_layer .close:hover { transition: all 1s; transform: rotate(360deg); } /* 杞挱鏍峰紡 */ .index-slider { overflow: hidden; width: 100%; z-index: 1; position: relative; } .index-slider .swiper-slide { position: relative; } .index-slider .swiper-slide .index_more { position: absolute; top: 67%; width: 200px; line-height: 48px; border: solid 1px #fff; border-radius: 4px; cursor: pointer; color: #fff; text-indent: 35px; left: 50%; margin-left: -665px; background: url(../img/bannermore.png) 160px center no-repeat; } .index-slider .swiper-slide .index_more:hover { background-color: #245ba6; border-color: #245ba6; } .index-slider .banner_wrapper { z-index: 10; } .index-slider .banner_wrapper img { width: 100%; display: block; } .index-slider .swiper-pagination { width: 1440px; left: 50%; margin-left: -720px; text-align: center; bottom: 2px; } .index-slider .swiper-pagination .swiper-pagination-bullet { height: 16px; width: 16px; border-radius: 16px; border: solid 2px #fff; opacity: 1; background: transparent; } .index-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .index-slider .swiper-button-prev, .index-slider .swiper-button-next { display: none; } .index_product { margin: 60px 0 50px; } .index_product li { width: 49.5%; float: left; position: relative; margin-right: 0.5%; margin-bottom: 5.5px; } .index_product li img { width: 100%; display: block; } .index_product li .font { padding: 70px; position: absolute; width: 375px; top: 0; } .index_product li .font .title { color: #fff; font-size: 38px; line-height: 50px; font-weight: bold; } .index_product li .font .desc { color: #fff; font-size: 14px; line-height: 22px; margin-top: 10px; } .index_product li a { display: block; } .index_product li:hover { /*background:url(../img/cover.jpg); background-size:cover; img{ opacity: 0; }*/ /*.desc { color: #545454 } .title { color: #3d84e6 }*/ } .index_product li:hover .index_product_more { opacity: 1; background: #7456c1; border-color: #7456c1; } .index_product li .index_product_more { color: #fff; line-height: 45px; border: solid 1px #fff; border-radius: 4px; text-align: center; display: inline-block; font-size: 12px; padding: 0 40px; margin-top: 95px; transition: all 0.8s; background: #7456c1; border-color: #7456c1; opacity: 0; } .index_product li .index_product_more:hover { background: #7456c1; border-color: #7456c1; } .index_product li.p1 .font { width: 445px; top: 160px; } .index_product li.p2 .font { width: 400px; right: 0; top: 20px; } .index_product li.p2 .title, .index_product li.p2 .desc { text-align: right; } .index_product li.p2 .index_product_more { margin-top: 60px; float: right; } .index_product li.p3 .font { right: 0; top: 65px; } .index_product li.p3 .desc { color: #7456c1; } .index_product li.p3 .title { color: #7456c1; } .index_product li.p3 .index_product_more { margin-top: 15px; } .index_product li.p4 .font { right: 0; top: 25px; } .index_product li.p4 .index_product_more { margin-top: 15px; } .desgin_block { position: relative; } .desgin_block > img { width: 100%; display: block; } .desgin_block h2 { text-align: left; color: #fff; font-size: 40px; margin-bottom: 20px; } .desgin_block .content { position: absolute; top: 130px; left: 80px; } .desgin_block .content .desc { color: #fff; font-size: 16px; margin: 10px 0 45px; } .desgin_block .content .vlist li { transition: all 0.8s; margin-right: 10px; display: inline-block; } .desgin_block .content .vlist li:hover { transform: scale(1.05); z-index: 10; } .adv { margin: 60px 0 75px; text-align: center; padding: 125px 0 190px; background: url(../img/adv_bg.jpg) center center; } .adv .nums li { display: block; width: 25%; float: left; } .adv .nums li .numw { margin: 125px 0 25px; } .adv .nums li span { font-size: 70px; } .adv .nums li * { color: #fff; } .adv .nums li .tx { font-size: 16px; text-align: center; } .brands { text-align: center; } .brands .imgs { margin: 60px 0 140px; vertical-align: middle; } .brands .imgs .img { display: inline-block; vertical-align: middle; margin-right: 26px; transition: all 0.5s; } .brands .imgs .img img { width: 100%; border-radius: 10px; } .brands .imgs .img:hover { transform: scale(1.06); } .brands .imgs .img:nth-child(1) { width: 498px; } .brands .imgs .img:nth-child(2) { width: 235px; } .brands .imgs .img:nth-child(3) { width: 380px; } .brands .imgs .img:nth-child(4) { width: 235px; } @media screen and (max-width: 1440px) { .index-slider .swiper-slide .index_more { margin-left: -550px; } .index_product { margin: 40px 0 30px; } .index_product li .font { padding: 50px; position: absolute; width: 375px; } .index_product li .font .title { font-size: 32px; line-height: 46px; } .index_product li .font .desc { font-size: 13px; line-height: 20px; margin-top: 8px; } .index_product li .index_product_more { line-height: 40px; padding: 0 20px; margin-top: 65px; } .index_product li.p1 .font { width: 340px; top: 120px; } .index_product li.p3 .font { top: 30px; width: 300px; } .index_product li.p4 .font { top: -8px; width: 302px; } .desgin_block .content { top: 100px; left: 60px; } .desgin_block .content .desc { font-size: 13px; margin: 10px 0 25px; } .desgin_block h2 { text-align: left; color: #fff; font-size: 32px; margin-bottom: 15px; } .adv { margin: 40px 0 60px; padding: 105px 0 170px; } .adv .nums li .numw { margin: 110px 0 25px; } .adv .nums li span { font-size: 62px; } .adv .nums li .tx { font-size: 14px; text-align: center; } .brands .imgs { margin: 50px 0 120px; } .brands .imgs .img { margin-right: 19px; } .brands .imgs .img img { width: 100%; } .brands .imgs .img:nth-child(1) { width: 375px; } .brands .imgs .img:nth-child(2) { width: 175px; } .brands .imgs .img:nth-child(3) { width: 290px; } .brands .imgs .img:nth-child(4) { width: 180px; } } @media screen and (max-width: 1000px) { .index-slider .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 6px; } .index-slider .swiper-slide .index_more { position: absolute; top: 65%; width: 120px; line-height: 30px; text-indent: 15px; left: 20px; font-size: 14px; margin-left: 0px; background: url(../img/bannermore.png) 95px center no-repeat; } .index_product { margin: 10px 0 0px; } .index_product li { width: 100%; float: none; margin-right: 0; margin-bottom: 10px; } .index_product li .font { padding: 20px; width: 175px; top: 0; } .index_product li .font .title { font-size: 18px; line-height: 40px; } .index_product li .font .desc { font-size: 12px; line-height: 20px; } .index_product li .index_product_more { line-height: 35px; border-radius: 2px; font-size: 12px; padding: 0 10px; margin-top: 20px; opacity: 1; } .index_product li.p1 .font { width: 225px; top: 20px; } .index_product li.p2 .font { width: 200px; } .index_product li.p2 .index_product_more { margin-top: 15px; } .index_product li.p3 .font { right: 0; top: 5px; width: 190px; } .index_product li.p4 .font { width: 210px; top: 0px; } .desgin_block { position: relative; } .desgin_block > img { width: 100%; position: absolute; top: 0; left: 0; } .desgin_block h2 { text-align: center; color: #fff; font-size: 18px; margin-bottom: 15px; padding-top: 15px; } .desgin_block .content { position: relative; top: 00px; left: 00px; } .desgin_block .content img { width: 60%; margin: 15px 20% 0; } .desgin_block .content .desc { font-size: 12px; text-align: center; width: 80%; margin: 10px auto 55px; } .desgin_block .content .vlist li { display: block; width: 100%; margin-bottom: 10px; margin-right: 0; } .desgin_block .content .vlist li video { display: block; margin: 0 auto; } .desgin_block .content .vlist li > div { margin: 0 auto; } .adv { margin: 10px 0 35px; padding: 45px 0 45px; } .adv > img { width: 80%; margin: 0 10%; } .adv .nums { padding-bottom: 30px; } .adv .nums li { display: block; width: 46%; margin: 0 2%; float: left; height: 110px; } .adv .nums li .numw { height: 26px; margin: 30px 0 15px; } .adv .nums li span { font-size: 18px; } .adv .nums li .tx { font-size: 12px; line-height: 18px; } .brands > img { width: 80%; margin: 0 10%; } .brands .imgs { margin: 30px 0 0px; vertical-align: middle; } .brands .imgs .img { width: 100% !important; } .brands .imgs .img img { margin-bottom: 20px; margin-right: 0; width: 100% !important; } }