.show-cart{ position: relative; margin-bottom: 216px; } .show-cart .desc{ position: absolute; width: 80%; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .yysj{ width: 189px; height: 79px; border-radius: 30px; position: relative; bottom:-170px; } .yysj span{ margin-left: 15px; } .show-cart .desc .cart-info{ width: 681px; height: 200px; border-radius: 30px; position: relative; bottom: -100px; } .show-cart .desc .cart-info .top{ width: 100%; height: 109px; background: linear-gradient(0deg, #6B90C8, #004BA0); padding: 40px 42px 0; border-radius: 30px 30px 0 0; -webkit-border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0; -ms-border-radius: 30px 30px 0 0; -o-border-radius: 30px 30px 0 0; } .show-cart .desc .cart-info .top a{ align-items: center; } .show-cart .desc .cart-info .bottom{ padding: 29px 0 0; } .link-bg ul{ display: flex; flex-wrap: wrap; } .show-cart .desc .cart-info .bottom ul{ display: flex; justify-content: space-between; } .show-cart .desc .cart-info .bottom ul li{ width: 25%; /*margin-bottom: 40px;*/ } .show-cart .desc .cart-info .bottom ul li a{ width: 100%; display: flex; align-items: center; justify-content: center; } .link-bg ul li img{ margin-left: 20px; } .show-cart .desc .cart-info .bottom ul li img{ margin-left: 10px; } .spe-nav{ top: 97px; padding-left: 69px; } .spe-nav ul{ width: 100%; display: flex; } .spe-nav ul li{ margin-right: 20px; } .banner-info{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); text-align: center; } .banner-info .nav-box{ display: flex; margin-top: 63px; } .banner-info .nav-box a{ display: inline-block; width: 226px; height: 72px; border: 1px solid #FFFFFF; display: flex; align-items: center; justify-content: center; } .banner-info .nav-box a i{ display: block; width: 46px; height: 46px; background-image: url(../img/piconb1.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; margin-right: 12px; } .banner-info .nav-box a:last-child{ margin-left: 24px; } .banner-info .nav-box a:last-child i{ height: 34px; background-image: url(../img/piconb2.png); } .banner-info .nav-box a:hover{ color: #333; background: #FFFFFF; } .banner-info .nav-box a:hover i{ background-image: url(../img/picon1.png); } .banner-info .nav-box a:last-child:hover i{ background-image: url(../img/piconl2.png); } .top-panel{ width: 90%; margin: -11vw auto 0; } .top-panel .show-cart{ margin-bottom: 0; height: 544px; } .link-bg { height: 91px; background: #FAFAFA; } .link-bg ul{ height: 100%; width: 40%; margin: 0 auto; align-items: center; } .link-bg ul li{ width: 20%; } .link-bg ul li a{ display: flex; align-items: center; } .show-bg{ width: 100%; } .middle-box{ height: 235px; background: #4A4F54; } .middle-box ul{ height: 100%; align-items: center; } .middle-box ul .item{ text-align: center; flex: 1; position: relative; } .middle-box ul .item .icon-box{ width: 123px; height: 123px; border: 1px solid #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .middle-box ul .item::before{ content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 82px; background: #FFFFFF; opacity: 0.16; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .middle-panel { padding: 87px 0 75px; } .clns{ margin-bottom: 77px; } .middle-panel .title{ text-align: center; } .middle-panel .title h3{ position: relative; overflow: hidden; margin-bottom: 23px; } .middle-panel .title p{ position: relative; } .middle-panel .title h3::after{ content: ''; position: absolute; top: 50%; left: -20px; width: 46%; height: 1px; background: #DCDEE3; } .middle-panel .title h3::before{ content: ''; position: absolute; top: 50%; right: 0; width: 46%; height: 1px; background: #DCDEE3; } .middle-panel .title p::after{ content: ''; position: absolute; top: 50%; left: 10%; width: 26%; height: 1px; background: #DCDEE3; } .middle-panel .title p::before{ content: ''; position: absolute; top: 50%; right: 10%; width: 26%; height: 1px; background: #DCDEE3; } .middle-panel .container{ margin-top: 56px; } .middle-panel .container .pic-box,.mpic-box{ width: 33%; height: 578px; overflow: hidden; } .middle-panel .container .mpic-box .pic{ width: 100%; height: 286px; overflow: hidden; } .mpic-box img{ transition: all .3s; } .middle-panel .container .pic-box:hover img,.mpic-box .pic:hover img{ transform: scale(1.1); } .mpic-box .pic:first-child{ margin-bottom: 7px; } .clxn{ margin-bottom: 86px; } .clxn .content{ margin-top: 58px; height: 538px; padding: 50px 0 0 0; } .clxn .info{ width: 66%; height: 100%; background: linear-gradient(-65deg, transparent 211px, #FAFAFA 0); padding: 107px 0 0 13.2%; } .clxn .pic-box{ width: 54%; height: auto; } .clxn .pic-box img{ transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); } .clxn .info .item{ width: 468px; height: 78px; background-image: url(../img/product-tbg.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; padding: 25px 0 0 26px; margin-bottom: 29px; } .pzcs .container{ background: #FFFFFF; box-shadow: -2px 3px 16px 0px #E2DFDF; } .pzcs .container img{ max-width: 100%; width: 100%; margin: 0 auto; display: block; } .panel4{ padding-top: 93px; height: 617px; background-image: url(../img/news-bg5.jpg); } .panel4 h3{ text-align: center; margin-bottom: 90px; } .panel4 .swiper-slide:hover .pic-box{ position: relative; } .panel4 .swiper-slide:hover .pic-box::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0.45; } .panel4 .swiper-slide .icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); opacity: 0; } .panel4 .swiper-slide:hover .icon{ opacity: 1; } .product-video { margin-top: 30px; } .product-video .container{ position: relative; background-color: #f5f5f5; } /* .product-video .container::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); } */ .bof-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); z-index: 99; } /* .bz-swiper .pic-box img.sclacePic{ width: 100%; height: 100%; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) ; -webkit-transform: translate(-50%,-50%) ; -moz-transform: translate(-50%,-50%) ; -ms-transform: translate(-50%,-50%) ; -o-transform: translate(-50%,-50%) ; } */ @media (max-width: 750px){ .banner{ padding-top: .94rem; } .product-video { margin-top:20px; } .product-video .container{ width: 100%; height: auto!important; background-color: #f5f5f5; } .bof-icon{ width: 30px; } .panel4 .swiper-slide .icon{ display: none; } .link-nav{ top: 0; bottom: auto; height: auto; background: #4A4F54; } .link-nav ul{ width: 100%; } .link-nav ul li{ width: 20%; } .link-nav ul li a{ width: 100%; } .link-nav ul li a:hover,.link-nav ul li a.active{ color: #fff; background: none; padding-left:0; } .link-nav ul li a.active::after{ content: ''; width: 100%; height: 2px; background: #E10B0B; position: absolute; top: auto; bottom: 0; left: 0; border-top: none; border-left: none; border-bottom: none; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } .link-nav ul li a.active::before{ display: none; } .show-cart{ margin-bottom: 3.4rem; } .show-cart .desc{ position: absolute; width: 90%; bottom: 0; flex-wrap: nowrap; } .yysj{ width: 104px; height: 40px; border-radius: 15px; position: relative; bottom:-160px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; }.show-cart:nth-of-type(2n) .yysj{ margin-right: 12px; } .show-cart:nth-of-type(2n-1) .yysj{ margin-left: 12px; } .yysj span{ margin-left: 15px; font-size: 12px; } .yysj img{ width: 23px; } .show-cart .desc .cart-info{ width: 70%; height: auto; border-radius: 15px; position: relative; bottom: -3.2rem; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .show-cart .desc .cart-info .top{ width: 100%; height: 48px; background: linear-gradient(0deg, #6B90C8, #004BA0); padding: 15px 12px 0; border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0; -ms-border-radius: 15px 15px 0 0; -o-border-radius: 15px 15px 0 0; font-size: 15px; } .show-cart .desc .cart-info .top img{ width: 24px; } .show-cart .desc .cart-info .bottom{ padding: 14px 10px ; } .show-cart .desc .cart-info .bottom ul{ flex-wrap: wrap; } .show-cart .desc .cart-info .bottom ul li{ width: 50%; margin-bottom: 16px; } .show-cart .desc .cart-info .bottom ul li img{ width: 4.5px; } .show-cart .desc .cart-info .bottom ul li img,.link-bg ul li img{ margin-left: 10px; } .top-panel{ width: 90%; margin: 0 auto 0; } .top-panel .show-cart{ margin-bottom: 0; height: auto; } .spe-nav{ top: 0; padding-left: 0; } .banner-info{ position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); text-align: center; } .banner-info .nav-box{ display: flex; margin-top:10px; } .banner-info .nav-box a{ width: 120px; height: 35px; } .banner-info .nav-box a i{ width: 23px; height: 23px; margin-right: 5px; } .banner-info .nav-box a:last-child{ margin-left: 10px; } .banner-info .nav-box a:last-child i{ height: 16px; background-image: url(../img/piconb2.png); } .link-bg { height: 45px; } .link-bg ul{ width: 100%; padding: 0 15px; } .link-bg ul li{ width: 20%; } .link-bg ul li a{ justify-content: center; } .link-bg ul li a img{ width: 4.5px; } .spe-nav ul li{ margin-right: 0; } .middle-box{ height: auto; padding: 15px 0; } .middle-box ul .item { padding: 0 10px; } .middle-box ul .item .icon-box{ width: 60px; height: 60px; margin: 0 auto 8px; } .middle-box ul .item .icon-box img{ transform: scale(.6); -webkit-transform: scale(.6); -moz-transform: scale(.6); -ms-transform: scale(.6); -o-transform: scale(.6); } .middle-box ul .item::before{ display: none; } .middle-panel { padding: 23px 0 ; } .middle-panel .title h3::before{ right: -20px; top: 40%; } .middle-panel .title h3::after{ top: 40%; } .middle-panel .title p::after, .middle-panel .title p::before{ top: 60%; } .clns{ margin-bottom: 23px; } .middle-panel .title h3{ margin-bottom: 0; } .middle-panel .container{ margin-top: 18px; } .middle-panel .container .pic-box,.mpic-box{ width: 33%; height:162px; } .middle-panel .container .mpic-box .pic{ height: 80px; } .mpic-box .pic:first-child{ margin-bottom: 2px; } .clxn{ margin-bottom: 26px; } .clxn .content{ margin: 23px auto; height: auto; padding: 25px 12px; width: 90%; box-shadow: 0px 0px 27px 0px #F0F0F0; } .clxn .info{ width: 100%; height: auto; background: none; padding: 0; } .clxn .pic-box{ width: 100%; height: auto; margin: 0 0 20px; } .clxn .pic-box img{ display: block; width: 100%; } .clxn .info .item{ width: 100%; height: 40px; padding: 0; margin-bottom: 15px; text-align: center; line-height: 40px; } .panel4{ padding-top: 26px; height: auto; padding-bottom: 35px; } .panel4 h3{ margin-bottom: 25px; } }