/*================首页样式及公共部分样式================*/ body{position: relative;} .banner{position: relative;} .banner .pic{ position:relative;} /*内页in-ban*/ .banner.in-ban .pic{ width: 100%; height: 324px; } .banner.in-ban .pic .lie{position: absolute;left: 0px;top:194px;width: 14.845%;height: 1px;background: #fff;} .banner.in-ban .pic .w1350{} .banner.in-ban .pic .w1350 .fl{padding-top: 171px;} .banner.in-ban .pic .w1350 i{display: block;margin-right: 26px; float: left;width: 35px;height: 46.5px;background: left center no-repeat;} .banner.in-ban .pic .w1350 b{display: block;float: left;font-size: 30px;color: #fff;} .banner.in-ban .pic .w1350 b em{padding-left: 10px; font-family: "arial";color: #c0e120;} .banner.in-ban .pic .w1500{position: absolute;left: 10.9375%;bottom: 0px;height: 50px;line-height: 50px;} .banner.in-ban .pic .w1500 a{float: left;color: #fff;font-size: 14px;} .banner.in-ban .pic .w1500 a.other{color: #c1c1c1;} .banner.in-ban .pic .w1500 a:hover{color: #fff;} .banner.in-ban .pic .w1500 i{display: block;float: left;width: 20px;color: #fff;font-size: 14px;text-align: center;} .footer{ position: relative; z-index: 3; } .banner .pic .pro-ban{ display: block; width: 100%; height: calc(100vh - 100px); /*overflow: hidden;*/ } .banner .pic .pro-ban video{ position: fixed; right:0; top:0; /*min-width:100%; min-height:50%; */ width: 100%; height: calc(100vh - 100px); /*height:100%;*/ z-index:-9999; background-size: cover; object-fit: cover; overflow: hidden; } .banner .pic .pos{margin: 0 auto;width:100%;top: 0%; height: 100%;} .banner .pic .pos .w1500{position: absolute;left: 10.9375%;bottom: 16%;} .banner .pic .detail-ban{ display: block; width: 100%; height:680px; margin-top: 70px; } .banner .pic .pos h1{ color: #fff; font-size: 40px; font-weight: 200; } .banner .pic .pos h2{ color: #fff; font-size: 26px; text-align: left; font-weight: 200; margin-bottom: 40px; } .banner .pic .pos .p-series a{ /*width: 30%;*/ height: 58px; line-height: 58px; display: inline-block; background-color: #fff; color: #101010; text-align: center; font-size: 26px; border-radius: 4px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; padding: 0 15px; } .banner .pic .pos .p-series a:hover{ color: #8bc34a; } .banner .pic .pos .p-series a.on{ background-color: #8bc34a; color: #fff; } .banner .pic .pos.pos-a h1{ text-align: left; margin-bottom: 22%; } .banner .pic .pos.pos-b h1{ text-align: center; margin-bottom: 35%; } .banner .pic .pos.pos-a .p-a, .banner .pic .pos.pos-a .p-b{ width: 33%!important; } .banner .pic .pos.pos-a .p-a{ margin-left: 11%; } .banner .pic .pos.pos-a .p-series a, .banner .pic .pos.pos-a .p-series b{ margin-right: 76px; } .banner .pic .pos.pos-b .p-a{ width: 40%; margin: auto; text-align: center; } .banner .pic .pos.pos-a .p-series a, .banner .pic .pos.pos-b .p-series a:first-child{ margin-right: 76px; } .banner .pic .pos.pos-c h1{ text-align: right; margin-bottom: 28%; } .content .menu{ background: #fff; height: 100px; width: 100%; z-index: 99999; } .content .menu h1{ font-size: 26px; line-height: 100px; font-weight: 400; } .content .menu a.fr{ font-size: 22px; line-height: 60px; padding-top: 20px; font-weight: 400; color: #101010; position: relative; } .content .menu a.fr:before{ content: ''; background: #8bc34a; width: 0; height: 2px; position: absolute; left: 0; bottom: -2px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .content .menu a.fr:hover:before{ width: 100%; } .content .menu ul{ } .content .menu ul li{ display: inline-block; height: 60px; line-height: 60px; margin-left: 60px; padding-top: 20px; font-size: 22px; position: relative; } .content .menu ul li:before{ content: ''; background: #8bc34a; width: 0; height: 2px; position: absolute; left: 0; bottom: -2px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .content .menu ul li a{ display: block; text-align: center; /*padding: 0 10px;*/ color: #101010; } /*.content .menu ul li.active{ border-bottom: 2px solid #8bc34a; }*/ .content .menu ul li:hover:before{ width: 100%; } /*ban ------------------------*/ .ban{width:100%;position:relative;height:900px;z-index:1px;/* overflow:hidden; */} .ban .bd{margin:0 auto;position:relative;z-index:0; overflow:hidden; } .ban .bd ul{width:100% !important;} .ban .bd li{width:100% !important;height:900px;overflow:hidden; text-align:center; } .ban .bd li a{display:block;} .ban .hd{width:100%;position:absolute;z-index:99;bottom:-5px;left:0;height:10px;line-height:30px;} .ban .hd ul{text-align:center;} .ban .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:2; width:40px; height:4px; margin:1px;overflow:hidden;background:#ccc;filter:alpha(opacity=100);line-height:999px; opacity:1} .ban .hd ul .on{width:40px; height:2px;margin:1px; background:#124b9a;} .ban .prev,.ban .next{ display: block; position: absolute; z-index: 1; top: 40%; margin-top: -30px; left: 20%; z-index: 1; width: 50px;height: 100px; background: url(/uploads/image/pswpiicon/slider-arrow.png) 5px /*#eee */no-repeat; cursor: pointer;filter: alpha(opacity=50);opacity: 0.6; display: block; } .ban .next{left:auto;right:20%; background-position:-55px;} .content .plate-a .w1200{ position: absolute; left: calc(50% - 600px); bottom: 10%; } .content .plate-a .describe ul li{ float: left; text-align: center; } .content .plate-a .describe ul li i{ display: block; /*min-height: 48px;*/ line-height: 54px; color: #fff; font-size: 28px; } .content .plate-a .describe ul li i img{ vertical-align: middle; } .content .plate-a .describe ul li span{ display: block; font-size: 18px; color: #fff; margin-top: 20px; } .content .plate-a .describe .row-a li{ width: 20%; } .content .plate-a .describe .row-b li{ width: 25%; margin-top: 30px; } .content .plate-b { background: #101010; } .content .plate-b .w1500{ padding: 8% 0; } .content .plate-b .pb{ width: 45%; height: 420px; position: relative; overflow: hidden; } .content .plate-b .pb-a{ float: left; } .content .plate-b .pb-b{ float: right; } .content .plate-b video{ width: 100%; height: 100%; object-fit: cover; overflow: hidden; cursor: crosshair; } .content .plate-b .pb h1{ width: 380px; font-size: 26px; color: #fff; font-weight: 200; position: absolute; top: 20%; } .content .plate-b .pb.fl h1{ left: 22.875%; } .content .plate-b .pb.fr h1{ right: 22.875%; } .content .plate-c{ } .content .plate-c .pc{ } .content .plate-c .pc.fl{ width: 280px; height: 800px; padding: 50px 70px; } .content .plate-c .pc.fl p{ margin: 20px auto 40px; } .content .plate-c .parameter{ background: #f5f5f5; border-radius: 4px; padding:20px 40px; line-height: 3; font-weight: 600; } .content .plate-c .pc.fr{ width: calc(100% - 420px); height: 900px; } .content .plate-d{ } .content .plate-d .pd{ width: 50%; height: 900px; position: relative; } .content .plate-d .pd.fl{ background-color: #17181a; } .content .plate-d .pd.fl .box{ display: table; width: 380px; height: 300px; margin: 300px auto; } .content .plate-d .pd.fl h1{ vertical-align: middle; display: table-cell; font-size: 26px; color: #fff; font-weight: 200; text-align: center; } .content .plate-e{ background: url(/uploads/image/pswpibanner/banner3_bac.jpg) center no-repeat; background-size: cover; } .content .plate-e .pe{ height: 900px; color: rgba(255,255,255,0.6); position: relative; } .content .plate-e .pe h1{ width: 100%; text-align: center; font-weight: 200; font-size: 30px; position: absolute; top: 15%; } .content .plate-e .pe .pe-l{ font-size: 28px; font-weight: 200; position: absolute; left: 0; bottom: 18%; } .content .plate-e .pe .pe-r{ font-size: 28px; font-weight: 200; position: absolute; right: 0; bottom: 18%; } .plate-f{ position: relative; } .plate-f .pf-ho{ position: absolute; width: 100%; z-index: 9; } .plate-f .pf-ho .text-box{ background-color: transparent; display: block; width: 25%; height: 800px; float: left; cursor: pointer; position: relative; color: #fff; } .plate-f .pf-ho .text-box:before{ content: ''; background: rgba(255,255,255,0.2); height: 100%; width: 1px; position: absolute; right: 0; top: 0; } .plate-f .pf-ho .text-box h1{ width: 90%; text-align: center; position: absolute; bottom: 50%; left: 5%; font-size: 24px; font-weight: 400; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .plate-f .pf-ho:hover .text-box h1{ bottom: 50px; } .plate-f .pf-ho .text-box:hover h1{ bottom: 60px; } .plate-f .pf-ho .text-box p{ display: none; } .content .plate-f ul li{ height: 800px; float: left; width: 25%; text-align: center; color: #fff; overflow: hidden; position: relative; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .content .plate-f ul li:before{ content: ''; background: rgba(0,0,0,0.4); width: 100%; height: 100%; position: absolute; left: 0; } .content .plate-f ul li.w100{ width: 100%!important; } .content .plate-f ul li.w0{ width: 0!important; } .content .plate-f ul li.w100:before{ background: rgba(0,0,0,0.3); } /*.content .plate-f ul li:not(:last-child):before{ content: ''; background: rgba(255,255,255,0.2); height: 100%; width: 1px; position: absolute; right: 0; top: 0; }*/ /*.content .plate-f ul li.pf-a{ background: url(/uploads/image/pswpi/001.jpg) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-b{ background: url(/uploads/image/pswpi/002.jpg) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-c{ background: url(/uploads/image/pswpi/003.jpg) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-d{ background: url(/uploads/image/pswpi/004.jpg) center no-repeat; background-size: cover; }*/ .content .plate-f ul li.pf-a{ background: url(/uploads/image/pswpi/1.png) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-b{ background: url(/uploads/image/pswpi/2.png) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-c{ background: url(/uploads/image/pswpi/3.png) center no-repeat; background-size: cover; } .content .plate-f ul li.pf-d{ background: url(/uploads/image/pswpi/4.png) center no-repeat; background-size: cover; } .content .plate-f ul li .box{ display: table; height: 200px; margin:300px auto; } .content .plate-f ul li .box span{ vertical-align: middle; display: table-cell; font-size: 26px; } .content .plate-g{ color: #fff; position: relative; } .content .plate-g i, .content .plate-k i{ display: block; width: 100%; height: 900px; position:relative; overflow:hidden; } .content .plate-g i img, .content .plate-k i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-g .pg{ height: 900px; font-weight: 200; position: absolute; top: 0; left: 10.9375%; z-index: 99; } .content .plate-g .pg .pg-b{ width: 100%; font-size: 30px; text-align: center; position: absolute; bottom: 20%; } .content .plate-g .pg .pg-l, .content .plate-g .pg .pg-r{ width: 25%; font-size: 26px; position: absolute; top: 40%; } .content .plate-g .pg .pg-r{ right: 0; } .content .plate-h .ph-a{ width: calc(50% - 2px); position: relative; } .content .plate-h .ph-a.h1 i{ height: 600px; } .content .plate-h .ph-a.h2 i{ height: 860px; } .content .plate-h .ph-a i{ display: block; width: 100%; position:relative; overflow:hidden; } .content .plate-h .ph-a i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-h .ph-a span{ font-size: 26px; color: #fff; text-align: center; width: 60%; position: absolute; top: 45%; left: 20%; z-index: 2; } .content .plate-i { } .content .plate-i h1{ background-color: #737373; line-height: 100px; text-align: center; font-size: 26px; color: #fff; font-weight: 200; } .content .plate-i .pi{ padding: 4% 7%; } .content .plate-i .pi .pi-a{ width: 48%; } .content .plate-i .pi-a i{ display: block; width: 100%; height: 500px; position:relative; overflow:hidden; } .content .plate-i .pi-a i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-i .pi-a span{ display: block; width: 100%; line-height: 80px; font-size: 26px; color: #101010; text-align: center; } .content .plate-j{ margin: 20px auto; } .content .plate-j .pj-a{ width: 30%; } .content .plate-j .pj-a .box{ display: table; width: 80%; height: 120px; margin:200px auto; } .content .plate-j .pj-a .box h1{ display: table-cell; vertical-align: middle; text-align: center; font-weight: 200; } .content .plate-j .pj-b{ width: 70%; } .content .plate-j .pj-b i{ display: block; width: 100%; height: 520px; position:relative; overflow:hidden; } .content .plate-j .pj-b i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-k{ position: relative; } .content .plate-k i{ display: block; width: 100%; height: 900px; position:relative; overflow:hidden; } .content .plate-k i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-k .pk{ color: #fff; position: absolute; z-index: 2; } .content .plate-k .pk.pk-a{ width: 100%; font-size: 30px; text-align: center; position: absolute; top: 15%; } .content .plate-k .pk.pk-b{ width: 50%; position: absolute; top: 70%; left: 25%; text-align: center; font-size: 26px; } .content .plate-k .pk.pk-b span{ display: inline-block; padding: 0 20px; } .plate-l{ background: #000; height: 900px; } .content .plate-l .pl{ height: inherit; position: relative; } .content .plate-l .pl h1{ color: #fff; /*margin-left: 50%;*/ font-weight: 200; position: absolute; top:90px; left: 50%; z-index: 2; } .content .plate-l .tab{ width: 100%; position: absolute; top: 90px; } .content .plate-l .tab-hd { position: absolute; top: 60px; left: 50%; } .content .plate-l .tab-hd li{ float:left; width: 71px; height: 26px; line-height: 26px; margin-right: 15px; margin-bottom: 10px; padding: 0 15px; color:#666; font-weight: 600; text-align:center; cursor:pointer; border:2px solid #666; border-radius: 15px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .content .plate-l .tab-hd li:hover, .content .plate-l .tab-hd li.active{ color:#fff; border:2px solid #fff; } .content .plate-l .tab-bd>li{ display:none; font-size:24px; } .content .plate-l .tab-bd>li.thisclass{ display:list-item; } .content .plate-l .tab-bd .tab-l{ width: 45%; } .content .plate-l .tab-bd i{ display: block; width: 100%; height: 720px; position:relative; overflow:hidden; } .content .plate-l .tab-bd i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .plate-l .tab-bd .tab-r{ width: 50%; margin-left: 5%; padding-top: 150px; } .content .plate-l .tab-bd .tab-r ol{ color: #fff; width: 45%; float: left; margin-right: 5%; } .content .plate-l .tab-bd .tab-r ol li{ font-size: 14px; position: relative; padding: 6px 0 14px; } .content .plate-l .tab-bd .tab-r ol li:before{ content: ''; width: 30px; height: 1px; background: #fff; position: absolute; left: 0; top: 0; } .content .plate-l .tab-bd .tab-r ol li h4{ } .content .plate-l .tab-bd .tab-r ol li h5{ font-weight: 200; line-height: 1.5; } /*.content .plate-l .tab-bd .tab-r ol{ height: 400px; color: #fff; -moz-column-count:2; -webkit-column-count:2; column-count:2; } .content .plate-l .tab-bd .tab-r ol li{ font-size: 14px; position: relative; padding: 6px 0 14px; } .content .plate-l .tab-bd .tab-r ol li:before{ content: ''; width: 30px; height: 1px; background: #fff; position: absolute; left: 0; top: 0; }*/ .content .plate-m{ padding: 100px; line-height: 1.5; } .content .download{ background: #fff; } .content .plate-m .download li{ width:calc(46% - 2px); margin: 0 2%; float: left; border:1px solid #eee; } .content .plate-m .download li .dl-l{ background: url(/uploads/image/pswpiicon/download.png) no-repeat center #eee; background-size: 50px; float: left; width: 160px; height: 160px; cursor: pointer; } .content .plate-m .download li .dl-r{ float: left; width: calc(100% - 220px); height: 120px; padding: 20px 30px; position: relative; } .content .plate-m .download li .dl-r h1{ color: #333; font-weight: 300; } .content .plate-m .download li .dl-r a{ display: block; font-size: 16px; position: absolute; bottom: 20px; right: 30px; color: #999; } .content .plate-m .download li .dl-r a:hover{ color: #8bc34a; } .product{ padding-top: 70px; margin-bottom: 100px; } .product .pdt-tit{ width: 80%; margin:0 auto; font-size: 48px; font-weight: 400; text-align: center; margin-top: 100px; color: #666; } .product .pdt-jj{ width: 80%; margin:80px auto; font-size: 28px; text-align: left; color: #50aac3; font-weight: 200; line-height: 1.4; } .product .pdt-list{ } .product .pdt-list li{ margin: 10px; float: left; } .product .pdt-list li:first-child{ width: calc(100% - 20px) ; } .product .pdt-list li:not(:first-child){ width: calc(50% - 20px) ; } .product .pdt-list li a{ display: block; height: 25vw; } .product .pdt-list li a .box{ height: inherit; display: block; position: relative; } .product .pdt-list li:hover a .box{ background: #eee; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .product .pdt-list li a .box .item-a{ background: #f5f5f5; height: 100%; position: absolute; left:0; top:0; z-index: 1; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .product .pdt-list li:hover a .box .item-a{ background: #eee; } .product .pdt-list li a .box .item-b{ position: absolute; left:10%; top:5%; right: 10%; bottom:15%; z-index: 2; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .product .pdt-list li:hover a .box .item-b{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .product .pdt-list li a .box .item-c{ padding: 20px 26px; position: absolute; left:0; top:0; right: 0; bottom:0; z-index: 3; display: flex; align-items: flex-end; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; } .product .pdt-list li a .box .item-c .title{ width: 100%; display: flex; display: -ms-flexbox; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .product .pdt-list li a .box .item-c .title h1{ color: #666; font-size: 30px; line-height: 38px; font-weight: 300; } .product .pdt-list li a .box .item-c .title span{ background: url(/uploads/image/pswpiicon/arrow.png) center no-repeat; background-size: 30px; display: block; width: 30px; height: 30px; } .content .menu01{ background: rgba(35,37,38,1); width: 100%; height: 100px; z-index: 99999; } .content .menu01 h1{ color: #fff; font-size: 26px; line-height: 100px; font-weight: 400; } .content .menu01 ul{ } .content .menu01 ul li{ display: inline-block; height: 60px; line-height: 60px; margin-left: 60px; font-size: 22px; position: relative; padding-top: 20px; } .content .menu01 ul li:before{ content: ''; background: #8bc34a; width: 0; height: 2px; position: absolute; left: 0; bottom: -2px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .content .menu01 ul li a{ display: block; text-align: center; /*padding: 0 10px;*/ color: #fff; } .content .menu01 ul li.on{ border-bottom: 2px solid #8bc34a; } .content .menu01 ul li:hover:before{ width: 100%; } .content .title-bread{ background: #f7f7f7; position: relative; } .content .title-bread i{ position: absolute; top: -100px; } .content .title-bread .w1200{ padding: 40px 0; } .content .title-bread .tit h1{ display: inline-block; font-size: 36px; font-weight: 300; color: #666 } .content .title-bread .tit span{ font-size: 36px; font-weight: 300; color: #8bc34a; } .content .title-bread .bread{ color: #999; } .content .title-bread .bread a{ color: #999; font-weight: 200; } .content .title-bread .bread a:not(:last-child):hover{ color: #8bc34a; } .content .parts { } .content .parts .pt{ padding: 4% 0; } /*.content .parts h1{ background-color: #737373; line-height: 100px; text-align: center; font-size: 26px; color: #fff; font-weight: 200; } .content .parts .pt .pt-a{ width: 48.5%; cursor: pointer; } .content .parts .pt .pt-a:nth-child(2n 1){ float: left; } .content .parts .pt .pt-a:nth-child(2n 2){ float: right; } .content .parts .pt-a i{ display: block; width: 100%; height: 360px; position:relative; overflow:hidden; } .content .parts .pt-a i img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); } .content .parts .pt-a span{ display: block; width: 100%; line-height: 60px; font-size: 20px; color: #101010; text-align: center; } */ .parts .pdt-list{ } .parts .pdt-list li{ margin: 10px; float: left; width: calc(50% - 20px) ; } .parts .pdt-list li a{ display: block; height: 350px; } .parts .pdt-list li a .box{ height: inherit; display: block; position: relative; } .parts .pdt-list li:hover a .box{ background: #eee; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .parts .pdt-list li a .box .item-a{ background: #f5f5f5; height: 100%; position: absolute; left:0; top:0; z-index: 1; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .parts .pdt-list li:hover a .box .item-a{ background: #eee; } .parts .pdt-list li a .box .item-b{ position: absolute; left:10%; top:5%; right: 10%; bottom:15%; z-index: 2; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .parts .pdt-list li:hover a .box .item-b{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .parts .pdt-list li a .box .item-c{ padding: 20px 26px; position: absolute; left:0; top:0; right: 0; bottom:0; z-index: 3; display: flex; align-items: flex-end; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; } .parts .pdt-list li a .box .item-c .title{ width: 100%; display: flex; display: -ms-flexbox; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; -moz-transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .parts .pdt-list li a .box .item-c .title h1{ color: #666; font-size: 30px; line-height: 38px; font-weight: 300; } .parts .pdt-list li a .box .item-c .title span{ background: url(/uploads/image/pswpiicon/arrow.png) center no-repeat; background-size: 30px; display: block; width: 30px; height: 30px; } .download h1{ font-size: 20; font-weight: 300; margin-bottom: 15px; color: #666; } .download .dl-l,.download .dl-r{ width: 48.5%; } .download .w1200{ padding: 4% 0; } .download .list{ margin-bottom: 15px; } .download .list>div{ float: left; } .download .list .list-a{ width: 50%; } .download .list .list-a p{ color: #8bc34a; } .download .list .list-a span{ color: #999; } .download .list .list-b{ width: 50%; } .download .list .list-b a{ display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid #707473; background: #f7f8f9; color: #a6acaa; text-transform: uppercase; } /*products 产品中心*/ .products{} .products .top{border-bottom: #ddd 1px solid;} .products .top ul{padding: 33px 0 23px; } .products .top ul li{margin-bottom: 10px; float: left;width: 12.5%;width: 14.28%; cursor: pointer;} .products .top ul li a{ padding-right: 11px; position: relative;display: inline-block;} .products .top ul li p{position: relative;z-index: 2; font-size: 16px;color: #999;line-height: 32px;} .products .top ul li i{position: absolute;left: 0px;bottom: 7px;width: 100%;height: 7px;background: #fff;} .products .top ul li.other i,.products .top ul li a:hover i{background: #c0e120;} /*plate-n*/ .content .plate-n{ background: url(/uploads/image/pswpi/bg01.jpg) no-repeat center top; background-size: cover; height:750px; } .content .plate-n .txtcon{ padding-top:150px; position:relative } .content .plate-n .txtbox{width:450px;color:#fff} .content .plate-n .txtbox h3{font-size:40px;line-height:70px} .content .plate-n .txtbox p{line-height:30px} .content .plate-n .txtbox .hd{border-bottom:1px solid #fff;padding-bottom:20px;margin-bottom:20px} .content .plate-n .imgbox{position:absolute;top:200px;right:0} .content .plate-n .imguav{margin-right:220px} .content .plate-n .imgtablepc{margin-top:30px} /*plate-o 数字滚动*/ .content .datarow{padding:40px 0;background:#222425;color:#fff} .content .datarow ul{margin-left:-1px;overflow:hidden;zoom:1} .content .datarow ul li{float:left;width:33.3333%;text-align:center} .content .datarow ul .inner{border-left:1px solid #363636} .content .datarow ul .p1{font-size:20px} .content .datarow ul .p2{font-size:80px} .content .datarow ul .p1{font-size:20px} .ghost-container { width: 1200px; height: 600px; margin: 0 auto; position:relative; box-sizing:border-box; } .ghost-container .left-box{ position: absolute; left: 0; top: 50%; width: 450px; height: 270px; margin-top: -180px; } .ghost-container .left-box .pic .scroll{ padding-left: 40px; } .ghost-container .left-box .hotspot{width: 100%;height: 100%;overflow:hidden;position:relative} .ghost-container .left-box .hotspot .pic{ position:relative; height:260px;} .ghost-container .left-box .hotspot .pic li{overflow:hidden; float:left; font-size: 16px; line-height: 30px;} .ghost-container .left-box .hotspot .pic h3 { font-size: 34px; line-height: 42px; margin-bottom: 10px; } .ghost-container .left-box .hotspot .pic h3 .aicon { display: inline-block; width: 44px; height: 40px; background: ; vertical-align: middle; } .ghost-container .left-box .hotspot .pic h3 .aicon.qf { background-position: -44px 0;} .ghost-container .left-box .hotspot .pic h3 .aicon.fh { background-position: -88px 0;} .ghost-container .left-box .hotspot .pic h3 .aicon.jl { background-position: -132px 0;} .ghost-container .left-box .hotspot .txt{ height:30px; overflow:hidden; position:absolute; top: 250px; left:0; } .ghost-container .left-box .hotspot .bl { margin-left: 40px; } .ghost-container .left-box .hotspot .bl .btn1{ display: block; width: 14px; height: 14px; float:left; margin-right: 25px; border-radius: 7px; background: #dcdcdc; } .ghost-container .left-box .hotspot .bl .btn1.on { background: #8bc34a; } .ghost-container .right-box{ position: absolute; right: 40px; top: 25%; width: 700px; height: auto; /*padding: 84px 27px 87px 23px; margin-top: -350px; background: yellow;*/ /*background: url(/uploads/image/pswpipage/phone_bg.png) center no-repeat;*/ } .ghost-container .right-box .phone-inner-img { width: 100%; height: auto; position: absolute; top: 0; left: 0; } .ghost-container .right-box .phone-inner-img img { display: block; width: 100%; } /*plate-p 拆解*/ .plate-p{ padding:100px 0; } .plate-p h1{ text-align: center; } .plate-p .dismantle{ height: 1000px; position: relative; font-size: 20px; } .plate-p .dismantle .dte-img{ width:300px; position: absolute; left: calc(50% - 150px); } .plate-p .dismantle .dte-img img{ width: 100%; } .plate-p .dismantle .img-a{ top: 100px; z-index: 1; } .plate-p .dismantle .img-b{ top: 162px; z-index: 4; } .plate-p .dismantle .img-c{ top: 316px; z-index: 3; } .plate-p .dismantle .img-d{ top: 366px; z-index: 2; } .plate-p .dismantle .dte-text{ width:300px; } .plate-p .dismantle .text-a{ position: absolute; top: 100px; } .plate-p .dismantle .text-b{ position: absolute; top: 162px; right: 0; } .plate-p .dismantle .text-c{ position: absolute; top: 316px; } .plate-p .dismantle .text-d{ position: absolute; top: 366px; right: 0; } /*改的部分*/ .proshow .dismantle { height: 1000px; } .proshow .dismantle .img-a { z-index: 8; } .proshow .dismantle .img-b { z-index: 7; } .proshow .dismantle .img-b.skrollable-before { top: 142px; } .proshow .dismantle .img-b-1 { z-index: 9; } .proshow .dismantle .img-c { top: 300px; z-index: 3; } .proshow .dismantle .img-c.skrollable-before { top: 100px; } .proshow .dismantle .img-d { z-index: 5; } .proshow .dismantle .img-d.skrollable-between { top: 400px; } /*.proshow .dismantle .text-c { top: 300px; } .proshow .dismantle .text-d { top: 350px; }*/ .proshow .dismantle .text-d.skrollable-between { top: 300px; } .proshow .dismantle .dte-img img { width: 68%; } /*8.19*/ .plate-p.plate-show .dismantle .dte-img { width: 210px; } .plate-p.plate-show .dismantle .img-a { left: calc(50% - 155px); z-index: 99; } .plate-p.plate-show .dismantle .img-b { z-index: 89; } .plate-p.plate-show .dismantle .img-a.skrollable-after { } .plate-p.plate-show .dismantle .img-a.skrollable-between { } .plate-p.plate-show .dismantle .img-a.skrollable-before { } .plate-p.plate-show .dismantle .img-b.skrollable-after { top: 0; } .plate-p.plate-show .dismantle .img-b.skrollable-between { top: 60px; } .plate-p.plate-show .dismantle .img-b.skrollable-before { top: 135px; } .plate-p.plate-show .dismantle .img-c.skrollable-after { top: 100px; } .plate-p.plate-show .dismantle .img-c.skrollable-between { top: 110px; } .plate-p.plate-show .dismantle .img-c.skrollable-before { top: 120px; } .plate-p.plate-show .dismantle .img-d.skrollable-after { top: 345px; } .plate-p.plate-show .dismantle .img-d.skrollable-between { } .plate-p.plate-show .dismantle .img-d.skrollable-before { top: 300px; } .plate-p.plate-show .dismantle .img-d { z-index: 88; }