.Banner,.Banner .imgs,.Banner .imgs li,.Banner .imgs li a{ display:block; width:100%; } .Banner .imgs li{ position:absolute; left:0; top:0; display:none; width:100%;} .Banner .imgs li img{ width:100%; display:block; } .Banner .idea_slider{ position:relative; } .Banner .idea_slider ul.ctrs{ position:absolute; bottom:5%; left:50%; margin-left:-100px; width:200px; text-align:center; } .Banner .idea_slider ul.ctrs a{ width:12px; height:12px; text-indent:-999em; display:inline-block; cursor:pointer; margin:0 10px; overflow:hidden; background:url(../images/index/point.png) no-repeat center; } .Banner .idea_slider ul.ctrs a.cur{ background:url(../images/index/point2.png) no-repeat center; } .phone_banner{ display:none; } .all{ width:1200px; margin:0 auto; } .area_box{ padding:50px 0 60px; } .area_box h3{ text-align:center; font:normal 23px 'Microsoft YaHei'; color:#6e6e6e; margin-bottom:25px; } .area_box h3 span{ font-size:17px; display:block; } .area_box li{ float:left; width:6.7%; margin:0 6.6%; } .area_box li a{ display:block; } .area_box li .iconbox{ position:relative; display:block; -moz-transition:all 0.3s ease 0.2s; -webkit-transition:all 0.3s ease 0.2s; -o-transition:all 0.3s ease 0.2s; transition:all 0.3s ease 0.2s; } .area_box li:hover .iconbox{ transform:translateY(-10px); -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; } .area_box li .iconbox img{ width:100%; } .area_box li .iconbox img.qu{ position:absolute; left:0; top:0; transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -o-transform:rotate(-60deg); opacity:0; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; } .area_box li:hover .iconbox img.qu{ transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); opacity:1; -moz-transition:all 0.5s ease 0.2s; -webkit-transition:all 0.5s ease 0.2s; -o-transition:all 0.5s ease 0.2s; transition:all 0.5s ease 0.2s; } .area_box li .iconbox .icon{ display:block; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; } .area_box li em{ text-align:center; font:normal 14px 'Microsoft YaHei'; color:#6e6e6e; display:block; } .area_box li:hover em{ color:#0589d0; } .area_box li.lis1 .iconbox .icon{ background:url(../images/index/icons1.png) no-repeat center; background-size:100% auto; } .area_box li.lis2 .iconbox .icon{ background:url(../images/index/icons2.png) no-repeat center; background-size:100% auto; } .area_box li.lis3 .iconbox .icon{ background:url(../images/index/icons3.png) no-repeat center; background-size:100% auto; } .area_box li.lis4 .iconbox .icon{ background:url(../images/index/icons4.png) no-repeat center; background-size:100% auto; } .area_box li.lis5 .iconbox .icon{ background:url(../images/index/icons5.png) no-repeat center; background-size:100% auto; } .area_box li.lis6 .iconbox .icon{ background:url(../images/index/icons6.png) no-repeat center; background-size:100% auto; } .area_box li.lis7 .iconbox .icon{ background:url(../images/index/icons7.png) no-repeat center; background-size:100% auto; } .area_box li.lis1:hover .iconbox .icon{ background:url(../images/index/icons1-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis2:hover .iconbox .icon{ background:url(../images/index/icons2-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis3:hover .iconbox .icon{ background:url(../images/index/icons3-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis4:hover .iconbox .icon{ background:url(../images/index/icons4-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis5:hover .iconbox .icon{ background:url(../images/index/icons5-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis6:hover .iconbox .icon{ background:url(../images/index/icons6-2.png) no-repeat center; background-size:100% auto; } .area_box li.lis7:hover .iconbox .icon{ background:url(../images/index/icons7-2.png) no-repeat center; background-size:100% auto; } .grid_box{ margin-bottom:110px; } .grid_box li{ float:left; width:20%; position:relative; } .grid_box li.li1{ background:#f0f0f0; } .grid_box li.li2{ background:#35a5e1; } .grid_box li img{ width:100%; display:block; } .grid_box li.text .a1{ position:absolute; top:20%; } .grid_box li.text p{ position:absolute; width:74%; top:45%; color:#6e6e6e; line-height:24px; left:13%; } .grid_box li.li2 p{ color:#fff; } .news_box{ background:url(../images/index/line.png) repeat-x bottom; background-size:auto 80%; padding-bottom:30px; margin-bottom:50px; } .news_box .video{ width:45%; position:relative; float:left; } .news_box .video video{ width:100%; background:#000; } .news_box .video a{ position:absolute; left:0; top:0; width:100%; display:block; } .news_box .video img{ width:100%; } .news_box .video .mask{ position:absolute; left:0; top:0; } .news_box .text{ width:50%; float:right; position:relative; } .news_box .text h3{ position:relative; margin-bottom:55px; } .news_box .text h3 a{ padding-right:24px; background:url(../images/index/login-register-img.png) no-repeat right center; position:absolute; right:0; bottom:5px; color:#6e6e6e; font:normal 14px 'Microsoft YaHei'; } .news_box .text li{ font-size:14px; position:relative; margin-bottom:25px; } .news_box .text li a{ color:#706f70; } .news_box .text li p{ padding-right:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .news_box .text li span{ display:block; width:90px; position:absolute; right:0; top:0; } .Phone,.pad_banner{ display:none; } .swiper-container,.swiper-container2{margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;z-index:1;} .swiper-wrapper{position:relative;width:100%;-webkit-transition-property:-webkit-transform,left,top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform,left,top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform,left,top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform,left,top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform,left,top;transition-duration:0s;transform:translate3d(0px,0,0);transition-timing-function:ease;} .swiper-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto;} .swiper-slide{float:left;} .swiper-slide img{ width:100%; } .swiper-wp8-horizontal{-ms-touch-action:pan-y;} .swiper-wp8-vertical{-ms-touch-action:pan-x;} .pagination,.pagination2{ position:absolute; bottom:10px; left:50%; margin-left:-70px; padding:3px 10px; border-radius:50px; } .swiper-pagination-switch{ display:block; background:url(../images/index/point.png) no-repeat center; background-size:100% auto; width:12px; height:12px; float:left; margin:0 4px; } .swiper-visible-switch{ background:url(../images/index/point2.png) no-repeat center; background-size:100% auto; } .pro_box{ padding-top:80px; overflow:hidden; } .pro_box .tab_b{ margin-bottom:50px; } .pro_box .tab_b .border{ text-align:center; display:none; } .pro_box .tab_b .border h3{ font:normal 32px 'Microsoft YaHei'; color:#6e6e6e; margin-bottom:20px; } .pro_box .tab_b .border h3 span{ color:#35a5e1; } .pro_box .tab_b .border p{ color:#6e6e6e; line-height:24px; width:60%; margin:0 auto; } .pro_box .tab_a li{ width:20%; float:left; } .pro_box .tab_a li a{ display:block; position:relative; } .pro_box .tab_a li .img{ display:block; width:100%; } .pro_box .tab_a li a .mask{ width:100%; position:absolute; display:block; left:0; bottom:0; opacity:0; transform:translateY(20%); -webkit-transform:translateY(20%); -moz-transform:translateY(20%); -o-transform:translateY(20%); -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; z-index:1; } .pro_box .tab_a li a:hover .mask,.pro_box .tab_a li a.cur .mask{ transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); opacity:1; } .pro_box .about_btn{ text-align:center; padding:50px 0; } .pro_box .about_btn a{ display:inline-block; width:104px; height:34px; font:normal 14px/34px 'Microsoft YaHei'; color:#35a5e1; border:1px solid #35a5e1; border-radius:5px; } .mPhone{ display:none; } @media only screen and (max-width:1366px) { .grid_box li.text .a1{ top:13%; } .grid_box li.text p{ top:32%; } } @media only screen and (max-width:1280px) { .grid_box li.text p{ top:32%; width:80%; left:10%; } } @media only screen and (max-width:1200px) { .all{ width:100%; padding:0 10px; box-sizing:border-box; } } @media only screen and (max-width:1024px) { .all{ width:100%; padding:0 10px; box-sizing:border-box; } .grid_box li.text p{ line-height:20px; height:100px; overflow:hidden; top:36%; } .pro_box .tab_a a{ display:inline-block; } .area_box li{ width:7.7%; margin:0 5.6%; } } @media only screen and (max-width:768px) { .Banner{ display:none; } .Phone,.pad_banner{ display:block; } .PC{ display:none; } .grid_box li{ width:50%; } .grid_box li.text p{ line-height:26px; height:auto; } .area_box li{ width:10.7%; margin:0 4.6%; } } @media only screen and (max-width:510px){ .grid_box li{ width:50%; } .all{ width:100%; } .grid_box li.text p{ line-height:20px; height:100px; overflow:hidden; top:36%; } .Phone,.phone_banner{ display:block; } .phone_banner{padding-top: 50px;} .PC,.pad_banner{ display:none; } .grid_box{ margin-bottom:30px; } .grid_box li.text .a1{ top:14%; } .area_box ul{ text-align:center; } .area_box li{ display:inline-block; width:23%; float:none; margin-bottom:10px; } .news_box .video{ width:90%; margin:0 5%; margin-bottom:20px; } .news_box .text,.pro_box h3,.pro_box .tab_a{ width:90%; margin:0 5%; } .area_box{ padding:20px 0 } .news_box .text h3 img{ width:32%; } .news_box .text li,.area_box h3{ margin-bottom:15px; } .news_box{ margin-bottom:30px; } .news_box .text h3{ margin-bottom:20px; } .area_box h3{ font-size:18px; } .area_box h3 span{ font-size:14px; } .pro_box{ padding-top:20px; } .pro_box .tab_b{ margin-bottom:20px; padding-bottom:0; } .pro_box .about_btn{ padding:20px 0; } .pro_box .tab_b .border h3{ font-size:20px; } .pro_box .tab_b .border p{ width:100%; } .pro_box .tab_a ul{ text-align:center; } .pro_box .tab_a li{ float:none; width:32%; display:inline-block; } } @media only screen and (max-width:414px) { .grid_box li.text .a1{ top:10%; } .grid_box li.text p{ font-size:12px; height:140px; top:25%; } } @media only screen and (max-width:320px){ .mPhone{ display:block; } .grid_box .Phone{ display:none; } .grid_box li{ width:80%; float:none; margin:0 auto; } .grid_box li.text p{ line-height:24px; font-size:14px; top:30%; } }