/*================首页样式及公共部分样式================*/ .banner{position: relative;} .banner .pic{ position:relative;} .banner .pic .bd{position:relative; z-index:0;margin:0px auto; overflow:hidden;} .banner .pic .bd .list li{float: left;} .banner .pic .bd .list li{ width:100%; height:794px; text-align:center; overflow:hidden} .banner .pic .bd .list li a{display: block;width: 100%;height: 794px;} /*.banner .pic .bd .list li a .pos{position: relative;margin: 0 auto;width:1200px;top: 50%; height: 754px; transform:translatey(-50%); -ms-transform:translatey(-50%); -moz-transform:translatey(-50%); -webkit-transform:translatey(-50%); -o-transform:translatey(-50%);} .banner .pic .bd .list li a .pos img{display: block;position: absolute;max-height: 100%;} .banner .pic .bd .list li a .pos img.img1{left: 0px;width: 100%; -webkit-animation:bandragleft 0.8s ease-in-out forwards; -moz-animation:bandragleft 0.8s ease-in-out forwards; -ms-animation:bandragleft 0.8s ease-in-out forwards; animation:bandragleft 0.8s ease-in-out forwards;} .banner .pic .bd .list li a .pos img.img2{right: 76px;top: 285px; -webkit-animation:bandragright 1s ease-in-out forwards; -moz-animation:bandragright 1s ease-in-out forwards; -ms-animation:bandragright 1s ease-in-out forwards; animation:bandragright 1s ease-in-out forwards;} .banner .pic .bd .list li a .pos img.img3{right: 76px;top: 368px; -webkit-animation:bandragright 1s ease-in-out forwards; -moz-animation:bandragright 1s ease-in-out forwards; -ms-animation:bandragright 1s ease-in-out forwards; animation:bandragright 1s ease-in-out forwards;}*/ .banner .pic .bd .list li a .pos img{display: block;position: absolute;height: 100%;} .banner .pic .bd .list li a .pos img.img1{left: 0px; -webkit-animation:bandragleft 0.8s ease-in-out forwards; -moz-animation:bandragleft 0.8s ease-in-out forwards; -ms-animation:bandragleft 0.8s ease-in-out forwards; animation:bandragleft 0.8s ease-in-out forwards;} .banner .pic .bd .list li a .pos img.img2{right: 76px; -webkit-animation:bandragright 1s ease-in-out forwards; -moz-animation:bandragright 1s ease-in-out forwards; -ms-animation:bandragright 1s ease-in-out forwards; animation:bandragright 1s ease-in-out forwards;} .banner .pic .bd .list li a .pos img.img3{right: 76px;top: 368px; -webkit-animation:bandragright 1s ease-in-out forwards; -moz-animation:bandragright 1s ease-in-out forwards; -ms-animation:bandragright 1s ease-in-out forwards; animation:bandragright 1s ease-in-out forwards;} .banner .pic .bd .list li a .pos{position: relative;margin: 0 auto;width:100%;top: 0%; height: 100%;} .banner .pic .bd .list li a .pos p{position: absolute;width: 100%; height: 100%;} .banner .pic .bd .list li a .pos p.p1{-webkit-animation:bandragleft 0.8s ease-in-out forwards; -moz-animation:bandragleft 0.8s ease-in-out forwards; -ms-animation:bandragleft 0.8s ease-in-out forwards; animation:bandragleft 0.8s ease-in-out forwards;} .banner .pic .bd .list li a .pos p.p2{-webkit-animation:bandragright 1s ease-in-out forwards; -moz-animation:bandragright 1s ease-in-out forwards; -ms-animation:bandragright 1s ease-in-out forwards; animation:bandragright 1s ease-in-out forwards;} .banner .pic .bd .list li a .pos .w1500{position: absolute;left: 10.9375%;bottom: 8%;} .banner .pic .bd .list li a .pos .w1500 i{display: block;float: left;width: 55px;height: 55px;background: url(/uploads/image/pswibanner/banner1_2.png) center no-repeat;} .banner .pic .bd .list li a .pos .w1500 span{display: block;float: right;width: 173px;height: 64px;line-height: 173px;text-align: center;background: url(/uploads/image/pswibanner/banner1_3.png) center no-repeat; } .banner .pic .bd .list li a .pos .w1500 span:hover{background: url(/uploads/image/pswibac/2s.png) center repeat;} /*左动*/ @keyframes bandragleft { 0% {opacity:0;transform:translatex(-500px)} 100% {transform:translatex(0px)} } @-webkit-keyframes bandragleft { 0% {opacity:0;-webkit-transform:translatex(-500px)} 100% { -webkit-transform:translatex(0px)} } @-moz-keyframes bandragleft { 0% {opacity:0;-moz-transform:translatex(-500px)} 100% {-moz-transform:translatex(0px)} } @-ms-keyframes bandragleft { 0% {opacity:0;-ms-transform:translatex(-500px)} 100% {-ms-transform:translatex(0px)} } /*左动*/ /*右动*/ @keyframes bandragright { 0% {opacity:0;transform:translatex(500px)} 100% {transform:translatex(0px)} } @-webkit-keyframes bandragright { 0% {opacity:0;-webkit-transform:translatex(500px)} 100% {-webkit-transform:translatex(0px)} } @-moz-keyframes bandragright { 0% {opacity:0;-webkit-transform:translatex(500px)} 100% {-webkit-transform:translatex(0px)} } @-ms-keyframes bandragright { 0% {opacity:0;-webkit-transform:translatex(500px)} 100% {-webkit-transform:translatex(0px)} } .banner .pic .hd{ position:absolute; right:21px; top:50%; z-index:1;width: 30px; height:100%;} .banner .pic .hd ul { width:30px;text-align: center;} .banner .pic .hd ul li {margin-bottom: 5px; display: block;padding-top: 18px; width:30px; height:1px;text-indent:-9999em; cursor:pointer;background: url(/uploads/image/pswi/banner_icon.png) top right no-repeat;} .banner .pic .hd ul li span{display: block;float: right; width:10px;height:1px;background:#eee;transition: all 0.4s; } .banner .pic .hd ul .on span {width:30px; background: #c0e120;transition: all 0.4s;} .ind01{position: relative;} .ind01 .bac{position: relative;z-index: 1; width: 100%;height: 515px;} .ind01 .bac .fl{width:63.9% ;height: 515px;background: url(/uploads/image/pswi/ind01_2.png) right center no-repeat;background-size: cover;} .ind01 .bac .w1500{position: absolute;left:10.9375% ;top: 0px; width: 78.125%;height: 515px;} .ind01 .bac .w1500 .jx{float: left;margin-left: 50%; width: 49%;} .ind01 .bac .w1500 .jx div{position: relative; margin:161px 0 0 20px;width: 87.2%;height: 202px;} .ind01 .bac .w1500 .jx div p{position: absolute;right: -66px;top: -97px;width: 220px;height: 137px;background: url(/uploads/image/pswiicon/icon_4.png) center no-repeat;} .ind01 .w1500{position: absolute;left: 10.9375%;top: 0px;z-index: 2;} .ind01 .pic{ position:relative;} .ind01 .pic .bd{position:relative; z-index:0;margin:0px auto; overflow:hidden;} .ind01 .pic .bd .list li{float: left;cursor: pointer;} .ind01 .pic .bd .list li{ width:100%; height:515px;overflow:hidden} .ind01 .pic .bd .list li .left{float: left;width: 50%;} .ind01 .pic .bd .list li .left div{margin:0 auto; width: 454px;} .ind01 .pic .bd .list li .left b{margin:120px 0 45px; display: block;font-size: 36px;color: #333;font-weight: normal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeindown; animation-name: fadeindown;} .ind01 .pic .bd .list li .left b i{color: #acacac;} .ind01 .pic .bd .list li .left p{font-size: 16px;color: #a2a2a2;line-height: 31px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeinright; animation-name: fadeinright; } .ind01 .pic .bd .list li .left a{margin-top: 40px; display: block;width: 96px;height: 38px;line-height: 38px;text-align: center;font-size: 14px;color: #fff;background: #c0e120;box-shadow: 0 0 5px rgba(0,0,0,0.26);border-radius: 3px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeinup; animation-name: fadeinup;} .ind01 .pic .bd .list li .left a:hover{background: #dcb10a;background: url(/uploads/image/pswi/ind02_6.png) center repeat;} .ind01 .pic .bd .list li .right{position: relative; float: left;width: 49%; height: 515px;} .ind01 .pic .bd .list li .right .d{position: absolute;left: 20px;top: 161px; width: 654px;width: 87.2%; height: 202px;background: url(/uploads/image/pswi/ind01_4.jpg) center no-repeat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeindown; animation-name: fadeindown; } .ind01 .pic .bd .list li .right .pro{position: absolute;left: 20px;top: 14px;width: 100%; height: 487px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeinup; animation-name: fadeinup; } .ind01 .pic .bd .list li .right .pro img{margin:0 auto; display: block;transition: all 0.5s;} .ind01 .pic .bd .list li .right:hover .pro img{transform: translatex(-10px);transition: all 0.5s;} .ind01 .pic .hd{ position:absolute; right:0px; top:50%; z-index:1;width: 30px; height:100%;} .ind01 .pic .hd ul { width:30px;text-align: center;} .ind01 .pic .hd ul li {margin-bottom: 5px; display: block;padding-top: 18px; width:30px; height:1px;text-indent:-9999em; cursor:pointer;background: url(/uploads/image/pswi/ind01_1.png) top right no-repeat;} .ind01 .pic .hd ul li span{display: block;float: right; width:10px;height:1px;background:#b7b7b7; transition: all 0.2s;} .ind01 .pic .hd ul .on span {width:30px; background: #c0e120;transition: all 0.2s;} .ind02{width: 100%; background: url(/uploads/image/pswi/ind02_4.png) left top no-repeat;background-size: 100% auto;} .ind02 .w1500{padding:81px 0 327px;/*padding-bottom: 250px; padding-bottom: 0px; */ height: 622px;} .ind02 .left{position: relative; float: left;width: 31%;height: 622px; margin-right: 3.5%;} .tb-focus{ position:absolute;left: 0px;top: 50%;margin-top: -245px; width:100%; } .ind02 .left .title{position: relative;} .ind02 .left .title b{margin:0px 0 20px; display: block;font-size: 36px;color: #333;font-weight: normal;} .ind02 .left .title b i{margin-left: 3px; font-weight: bold;} .ind02 .left .title span{display: block;position: absolute;left: -33px;top: -51px;z-index: 2; width: 111px;height: 71px;background: url(/uploads/image/pswiicon/icon_3.png) center no-repeat;} .ind02 .left li a{display: block;padding: 20px 0; border-bottom: #dddddd 1px solid;} .ind02 .left li a div{} .ind02 .left li a div span{display: block;padding-top: 13px; font-size: 30px;color: #333;} .ind02 .left li a div i{display: block;width: 13px;height: 2px;background: #c0e120;transition: all 0.5s; } .ind02 .left li a p{float: right;width: 83%; font-size: 18px;color: #666;line-height: 36px;height: 72px;overflow: hidden;} .ind02 .left li a:hover div i{width: 37px;transition: all 0.5s;} .ind02 .left li a:hover p{color: #333;} .ind02 .left a.more{ margin-top: 60px; display: block;width: 96px;height: 38px;line-height: 38px;text-align: center;font-size: 14px;color: #fff;background: #c0e120;box-shadow: 0 0 5px rgba(0,0,0,0.26);border-radius: 3px;} .ind02 .left a.more:hover{background: #dcb10a;background: url(/uploads/image/pswi/ind02_6.png) center repeat;} /*.tb-focus .bd li{position: relative; min-height: 507px;} .tb-focus{ position:relative; width:100%;overflow:hidden; } .tb-focus .hd { position:absolute; right:70px; bottom:0px; z-index:1; } .tb-focus .hd li {display: none; margin-left:3px;padding-right: 50px; float:left; font-size:18px; color:#fff;line-height:18px; cursor:pointer;} .tb-focus .hd li.on {display: block; color: #5d9200;background: url(/uploads/image/pswi/icon_lie.png) right center no-repeat;} .tb-focus .lshd{ position:absolute; bottom:0px; right:10px; width:150px; height:17px; } .tb-focus .lshd a{ display:block; width:19px; height:17px; } .tb-focus .lshd .next{ float:right; background:url(/uploads/image/pswi/right.png) no-repeat; } .tb-focus .lshd .prev{ float:left; background:url(/uploads/image/pswi/left.png) no-repeat; } .tb-focus .lshd .next:hover{ background:url(/uploads/image/pswi/rights.png) no-repeat; } .tb-focus .lshd .prev:hover{ background:url(/uploads/image/pswi/lefts.png) no-repeat; } .tb-focus .sm{position:absolute; right:39px; bottom:0px; z-index:1;font-size:18px; color:#333;line-height:18px;}*/ .ind02 .cen{ float: left;width: 31%;margin-right: 3.5%;box-shadow: 0 0 10px rgba(0,0,0,0.07);cursor: pointer;} .ind02 .cen .d{position: relative;width: 100%;height: 622px;overflow: hidden;} .ind02 .cen .d img{display: block;width: 100%;} .ind02 .cen .d .p{position: absolute;left: 0px;bottom: 0px;width: 100%;padding: 7px 0; height: 64px;line-height: 32px; color: #fff;text-align: center;background: rgba(0,0,0,0.1);} .ind02 .cen .d .p b{width: 90%;margin:0 auto; display: block;font-weight: normal;font-size: 24px;} .ind02 .cen .d .p i{width: 90%;margin:0 auto; display: block;font-size: 14px;} .ind02 .cen .d .p span{display: block; position: absolute;left: 0px;width: 100%;height: 1px;background: #bababa;} .ind02 .cen .d .p span.s1{bottom: 79px;background: none;} .ind02 .cen .d .p span.s2{bottom: 78px;background: none;} .ind02 .cen .d .p em{ position: absolute;left: 0px;bottom: -50px; display: block;width: 100%;height: 50px;background: url(/uploads/image/pswi/ind02_3.png) center no-repeat;opacity: 0;} .ind02 .cen .d .pos{transition: all 0.5s;opacity: 0; position: absolute;left: 0px;bottom: 0px;width: 100%; height: 622px;line-height: 32px; color: #333;text-align: center;background:url(/uploads/image/pswi/ind02_5.png) repeat;/* background: rgba(255,255,255,0.8); */} .ind02 .cen .d .pos b{transition: all 0.5s;width: 90%;margin: 160px auto 35px; display: block;font-weight: normal;font-size: 27px;} .ind02 .cen .d .pos i{transition: all 0.5s;width: 90%;margin:0 auto; display: block;font-size: 15px;} .ind02 .cen .d .pos span{transition: all 0.5s;display: block; position: absolute;left: 0px;width: 100%;height: 1px;background: #bababa;} .ind02 .cen .d .pos span.s1{bottom: 310px;} .ind02 .cen .d .pos span.s2{bottom: 310px;} .ind02 .cen .d .pos em{transition: all 0.5s; position: absolute;left: 50%;bottom: 0px; display: block;margin-left: -25px; width: 50px;height: 50px;background: url(/uploads/image/pswi/ind02_3.png) center no-repeat;opacity: 0;} .ind02 .cen:hover .p{display: none;} .ind02 .cen .d:hover .pos{transition: all 0.5s; opacity: 1;} .ind02 .cen .d:hover .pos b{transition: all 0.5s;font-size: 30px;} .ind02 .cen .d:hover .pos i{transition: all 0.5s;font-size: 18px;color: #666;} .ind02 .cen .d:hover .pos em{transition: all 0.5s;bottom: 133px;opacity: 1;transform:rotate(180deg);} .ind02 .cen .d:hover .pos span.s1{transition: all 0.5s;bottom: 589px;height: 2px;} .ind02 .cen .d:hover .pos span.s2{transition: all 0.5s;bottom: 30px;height: 2px;} .ind02 .cen .d .pos em:hover{animation: linecirle 0.4s ease-in-out forwards;} .ind02 .cen.other{margin:0;} /* .ind02 .cen .pos{position: absolute;} .ind02 .cen .pos .posr{} .ind02 .cen .pos .posr span{} .ind02 .cen .pos .posr span.s2{} .ind02 .cen .pos .posr .next{} .ind02 .cen .pos .posr .next b{} .ind02 .cen .pos .posr .next i{} */ .ind01,.ind02{visibility: hidden;} .ind01.active,.ind02.active{visibility: visible; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeinup; animation-name: fadeinup;} /*由下方滑动上来 伴随着渐显*/ .fadeinup { -webkit-animation-name: fadeinup; animation-name: fadeinup } @-webkit-keyframes fadeinup { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeinup { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); -ms-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } /*由上方滑动下来且有渐显*/ .fadeindown { -webkit-animation-name: fadeindown; animation-name: fadeindown } @-webkit-keyframes fadeindown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeindown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); -ms-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } /*从右滑动出来 伴随着渐显*/ .fadeinright { -webkit-animation-name: fadeinright; animation-name: fadeinright } @-webkit-keyframes fadeinright { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeinright { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .ind02 .lis1,.ind02 .lis2,.ind02 .lis3{opacity: 0;} .ind02.active .lis1.active{ -webkit-animation:indlr 1s ease-in-out forwards; -moz-animation:indlr 1s ease-in-out forwards; -ms-animation:indlr 1s ease-in-out forwards; animation:indlr 1s ease-in-out forwards; } .ind02.active .lis2.active{ -webkit-animation:indlr 1s ease-in-out 0.2s forwards; -moz-animation:indlr 1s ease-in-out 0.2s forwards; -ms-animation:indlr 1s ease-in-out 0.2s forwards; animation:indlr 1s ease-in-out 0.2s forwards; } .ind02.active .lis3.active{ -webkit-animation:indlr 1s ease-in-out 0.4s forwards; -moz-animation:indlr 1s ease-in-out 0.4s forwards; -ms-animation:indlr 1s ease-in-out 0.4s forwards; animation:indlr 1s ease-in-out 0.4s forwards; } @keyframes indlr { 0% {opacity:0;transform: translatey(300px);} 100% {opacity:1;transform: translatey(0px);} } @-webkit-keyframes indlr { 0% {opacity:0;transform: translatey(300px);} 100% {opacity:1;transform: translatey(0px);} } @-moz-keyframes indlr { 0% {opacity:0;transform: translatey(300px);} 100% {opacity:1;transform: translatey(0px);} } @-ms-keyframes indlr { 0% {opacity:0;transform: translatey(300px);} 100% {opacity:1;transform: translatey(0px);} } /*@media screen and (max-height:1050px){ .banner .pic .bd .list li a .pos{height: 754px;} } @media screen and (max-height:900px){ .banner .pic .bd .list li a .pos{height: 710px;} } @media screen and (max-height:768px){ .banner .pic .bd .list li a .pos{height: 650px;} } @media screen and (max-height:720px){ .banner .pic .bd .list li a .pos{height: 580px;} }*/ /*.index{position: relative;} .index .ind02{position: absolute;left: 0px;bottom: 0px;width:100%;} */ /*.index{position: relative;} .footer{position: fixed;left: 0px;bottom: 0px;width:100%;} */ body{position: relative;} /*------4.6------*/ .publicity_column ul,.publicity_column li,.publicity_column dl,.publicity_column dd,.publicity_column em,.publicity_column img { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; box-sizing: border-box; -moz-box-sizing: border-box; /* firefox */ -webkit-box-sizing: border-box; /* safari */ } .publicity_column img { height: auto; border: 0px; vertical-align: bottom; -ms-interpolation-mode: bicubic; } /*------swiper-container------*/ .swiper-container { width: 100%; height: 100%; } /*------end------*/ .publicity_column { position: absolute; bottom: 5px; left: 0; width: 100%; margin: 0; } .publicity_column .ib { display: block; position: relative; overflow: hidden; background-color: #f4f4f4; padding-bottom: 130%; border-radius: 4px; } .publicity_column .ib img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .selfpopout{ display: none; position: fixed; width: 360px; left: 0; top:0; cursor: pointer; z-index: 999999; } .selfpopout img { display: block; width: 100%; }