/*首页*/ .flash{ width:100%; background:linear-gradient(45deg,rgba(19,29,60,1) 0%,rgba(24,29,54,1) 24%,rgba(11,29,66,1) 68%,rgba(9,29,69,1) 100%);;} .flash .swiper-pagination{ width:100%; text-align:center; bottom:0;} .flash .swiper-pagination-bullet{ width:10px; height:10px; margin:0 10px; outline:none; opacity:1; box-sizing:border-box;border:1px solid #fff;background:none;} .flash .swiper-pagination-bullet-active{ opacity:1;background:#fff;border:0; } .flash .txt{ width:100%; height:100%; position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; color:#fff;} .flash .txt h2{ font-size:48px; line-height:50px; font-weight:300;} .flash .txt h2 strong{ margin-right:20px;} .flash.wap{ display:none;} .index_about{ width:870px; padding:100px 0; margin:0 auto; font-size:24px; line-height:48px; text-align:center;} .index_about .playbtn{ background:linear-gradient(-90deg,rgba(35,101,232,1) 0%, rgba(0,162,237,1) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; font-size:18px; font-weight:bold; margin-top:20px;} .index_about .playbtn:after{ width:100%; height:2px; display:block; content:""; background:linear-gradient(-90deg,rgba(35,101,232,1),rgba(0,162,237,1)); margin:0 auto; transition:all 0.4s;} .index_about .playbtn:hover:after{ width:20%;} .video_pop{background:#fff;width:1000px;height:550px; z-index:1002;position: fixed;top:50%;left:50%;margin:-275px 0 0 -500px; transform:scale(0); opacity:0; transition:all 0.8s cubic-bezier(0.105,1.095,0.000,1.110); border-radius:12px; box-shadow:0 3px 10 0 rgba(0,0,0,0.1); background:#000;} .video_pop.niu{ transform:scale(1); opacity:1;} #videostr{width:1000px;height:550px;} .popover_close{ background:url(/uploads/image/pimages/close.png) no-repeat; width:18px; height:18px; display:block; position:absolute; z-index:1003; right:0px; top:-30px;} .index_technology{ background-size:100% auto; width:100%; position:relative; background:linear-gradient(180deg,rgba(158,200,222,0.15) 0%,rgba(255,255,255,1) 100%); padding-bottom:50px; overflow:hidden;} .index_technology .mainbox{ position:relative; z-index:1;} .index_technology .bg{ position:absolute; left:0; top:0%;} .index_technology .txt{ float:left; overflow:hidden; position:relative; z-index:1} .index_technology .txt h2{ font-size:40px; line-height:42px; margin:150px 0 50px 0;} .index_technology .txt ul{ font-size:18px; line-height:40px; color:#666;} .index_technology .right_r{ float:right; position:relative; z-index:1; margin-top:80px;} .index_technology .right_r .row:nth-child(1){transform: translate(-85px, 0)} .index_technology .right_r .row:nth-child(2){transform: translate(0, -50px)} .index_technology .right_r .row:nth-child(3){transform: translate(-85px, -100px)} .hexagon {display:inline-block; transition:all 0.4s; margin-left:0px; vertical-align:top; } .hexagon:hover{ transform:scale(1.15);} /*.hexagon .bar-rotate-left {width:120px;height:170px;overflow: hidden;transform: rotate(60deg);display: inline-block;} .hexagon .bar-rotate-right {width:120px;height:170px;overflow: hidden;transform: rotate(60deg);display: inline-block; }*/ .hexagon .bar-horizontal {width:169px;height:189px; display: flex;justify-content: center;align-items: center; } .hexagon .bar-horizontal a{ padding: 0px 4px 15px 0; display:block; font-size:17px; line-height:32px; color:#fff; box-sizing:border-box; text-align:center;} .hexagon.b1 .bar-horizontal {background:url(/uploads/image/pimages/bg1.png) no-repeat; background-size:contain;} .hexagon.b2 .bar-horizontal {background:url(/uploads/image/pimages/bg2.png) no-repeat; background-size:contain;} .hexagon.b3 .bar-horizontal {background:url(/uploads/image/pimages/bg3.png) no-repeat; background-size:contain;} .hexagon.b4 .bar-horizontal {background:url(/uploads/image/pimages/bg4.png) no-repeat; background-size:contain;} .hexagon.b5 .bar-horizontal {background:url(/uploads/image/pimages/bg5.png) no-repeat; background-size:contain;} .hexagon.b6 .bar-horizontal {background:url(/uploads/image/pimages/bg6.png) no-repeat; background-size:contain;} .hexagon.b7 .bar-horizontal {background:url(/uploads/image/pimages/bg7.png) no-repeat; background-size:contain;} .hexagon.b8 .bar-horizontal {background:url(/uploads/image/pimages/bg8.png) no-repeat; background-size:contain;} .hexagon.b9 .bar-horizontal {background:url(/uploads/image/pimages/bg9.png) no-repeat; background-size:contain;} .hexagon.b10 .bar-horizontal {background:url(/uploads/image/pimages/bg10.png) no-repeat; background-size:contain;} .hexagon.b11 .bar-horizontal {background:url(/uploads/image/pimages/bg11.png) no-repeat; background-size:contain;} .hexagon.b12 .bar-horizontal {background:url(/uploads/image/pimages/bg12.png) no-repeat; background-size:contain;} .g_title{font-size:40px; line-height:42px; text-align:center;} .index_product{ padding-bottom:50px;} .index_product ul{ margin-top:50px;} .index_product li{ width:20%; overflow:hidden; float:left; text-align:center; font-size:20px; position:relative; box-sizing:border-box; padding:30px;} .index_product li .bg{ background:rgba(36,42,48,0.9); width:100%; height:100%; position:absolute; left:0; top:0; color:#fff; z-index:10; display:flex; align-items:center; justify-content:center; transition:all .6s; transform:translatey(-300%);} .index_product li:hover .bg{ transform:translatey(0)} .index_product li .bg h3{ font-size:24px; margin-bottom:30px;} .index_product li .bg span{ font-size:16px;} .index_product li dd{ font-size:20px; margin-top:10px; text-align:center;} .index_product li dt{ height:230px;} .index_product li dt img{ max-height:100%; max-width:100%; width:auto;} .index_news{ padding:70px 0 80px 0;} .index_news dl{ width:31.66666666666667%; background:#fff; float:left; transition:all .4s; margin:50px 2.5% 0 0; } .index_news dl:nth-last-child(1){ margin:50px 0 0 0;} .index_news dl:hover{ box-shadow:0px 2px 30px 0px rgba(18,14,0,0.08);} .index_news dl dd{ padding:20px 30px; height:160px; box-sizing:border-box; width:100%; border:1px solid #eeeeee; border-top:0;} .index_news dl:hover dd{ border:1px solid #fff;border-top:0;} .index_news dl dd span{ font-size:14px; color:#999; float:left; line-height:32px;} .index_news dl dd .time{ float:right; background:url(/uploads/image/pimages/weikaishi.png) no-repeat; width:140px; height:32px; color:#fff; font-size:14px; line-height:32px; text-align:center; margin-right:-40px;} .index_news dl dd .time.wu{ background:none; color:#999; margin-right:0; text-align:right;} .index_news dl dd h3{ font-size:18px; line-height:30px; margin-top:10px;} .index_qix{ padding-bottom:140px;} .index_qix li{ float:left; margin-top:15px; text-align:center; width:20%; overflow:hidden; overflow:hidden; height:80px; display:flex; align-items:center; justify-content:center;} .index_qix li img{ max-height:80px; max-width:100%; width:auto;} .business{ background:url(/uploads/image/pimages/businessbg.png) no-repeat center top; background-size:100% auto;} .business .top{ text-align:center;} .business .top p{ font-size:18px; color:#666; margin-top:20px;} .business .con{ width:920px; height:380px; position:relative; margin:70px auto 50px auto;} .business .con .list{ width:380px; height:100%; position:absolute; top:0; } .business .con .list .yuan{ animation:zhuan 5s linear infinite;} .business .con .list.y1{ left:0; } .business .con .list.y2{ left:270px;} .business .con .list.y3{ right:0; } .business .con .list a{ display:block; width:110px; height:110px; border-radius:50%; line-height:110px; color:#fff; font-size:16px; text-align:center; position:absolute; z-index:100;} .business .con .list.y1 a{background:linear-gradient(90deg,rgba(123,72,225,1),rgba(70,96,228,1)); box-shadow:0px 10px 30px 0px rgba(63,102,228,0.3); } .business .con .list.y1 a.btn1{ left:50%; top:-40px; margin-left:-60px;} .business .con .list.y1 a.btn2{ left:-40px; top:50%; margin-top:-40px;} .business .con .list.y1 a.btn3{ left:50%; bottom:-40px; margin-left:-60px;} .business .con .list.y2 a{ background:linear-gradient(-90deg,rgba(29,125,251,1),rgba(10,173,255,1));box-shadow:0px 10px 30px 0px rgba(9,157,255,0.3); } .business .con .list.y2 a.btn1{ left:0; top:0px; } .business .con .list.y2 a.btn2{ left:0px; bottom:0%; } .business .con .list.y2 a.btn3{ right:0; top:0px;} .business .con .list.y2 a.btn4{ right:0; bottom:0px; } .business .con .list.y2 a.btn5{ left:50%; bottom:-40px; margin-left:-50px; } .business .con .list.y3 a{ background:linear-gradient(-90deg,rgba(35,166,232,1),rgba(0,191,229,1));box-shadow:0px 20px 40px 0px rgba(63,199,251,0.3);} .business .con .list.y3 a.btn1{ right:50%; top:-40px; margin-right:-60px;} .business .con .list.y3 a.btn2{ right:-40px; top:50%; margin-top:-40px;} .business .con .list.y3 a.btn3{ right:50%; bottom:-40px; margin-right:-60px;} @keyframes zhuan { from { transform:rotate(0)} to { transform:rotate(360deg)} } @media screen and (max-width:1950px){ .index_about{ padding:80px 0; font-size:20px; line-height:40px; } .index_product li .bg h3{ font-size:20px; margin-bottom:20px;} .index_product li .bg span{ font-size:14px;} .index_product li dd{ font-size:18px; } } @media screen and (max-width:1500px) { .index_technology .txt h2{ font-size:30px; line-height:32px; margin:150px 0 20px 0;} .index_technology .txt ul{ font-size:16px; line-height:32px; } .g_title{font-size:30px; line-height:32px;} .flash .txt h2{ font-size:40px; } .flash .txt h2 strong{ margin-right:15px;} } @media screen and (max-width:1230px) { .hexagon .bar-horizontal a{ font-size:14px; line-height:22px; } .hexagon .bar-horizontal {width:140px;height:150px;} .index_technology .right_r .row:nth-child(1){transform: translate(-62px, 0)} .index_technology .right_r .row:nth-child(2){transform: translate(0, -25px)} .index_technology .right_r .row:nth-child(3){transform: translate(-62px, -50px)} .index_technology .txt h2{ font-size:24px; line-height:26px; margin:120px 0 10px 0;} .index_technology .txt ul{ font-size:14px; line-height:28px; } .g_title{font-size:24px; line-height:26px;} .flash .txt h2{ font-size:30px; line-height:35px; } .flash .txt h2 strong{ margin-right:10px;} .index_product li{ width:25%;} .index_news dl dd{ padding:20px 20px; } .index_news dl dd span{ font-size:12px; } .index_news dl dd .time{ font-size:12px; } .index_news dl dd h3{ font-size:16px; } .business .top p{ font-size:14px; } } @media screen and (max-width:1030px) { .video_pop{ width:80%; height:300px; margin: -150px 0 0 -40%; } #videostr{ width:100%; height:300px;} .index_product li{ width:33.3333%;} .index_news dl dd h3{ font-size:14px; line-height:24px;} .business .con{ width:80%; height:300px;} .business .con .list{ width:300px; } .business .con .list.y2{ left:31%;} .business .con .list a{ width:90px; height:90px; line-height:90px; font-size:14px; } .business .con .list.y1 a.btn1{ top:-30px; margin-left:-50px;} .business .con .list.y1 a.btn2{ left:-30px; margin-top:-40px;} .business .con .list.y1 a.btn3{ bottom:-30px; margin-left:-50px;} .business .con .list.y2 a.btn1{ left:-20px; top:20px; } .business .con .list.y2 a.btn2{ left:-20px; bottom:20px; } .business .con .list.y2 a.btn3{ right:-20px; top:20px;} .business .con .list.y2 a.btn4{ right:-20px; bottom:20px; } .business .con .list.y2 a.btn5{ left:50%; bottom:-30px; margin-left:-40px; } .business .con .list.y3 a.btn1{ right:50%; top:-30px; margin-right:-50px;} .business .con .list.y3 a.btn2{ right:-30px; margin-top:-40px;} .business .con .list.y3 a.btn3{ right:50%; bottom:-30px; margin-right:-50px;} } @media screen and (max-width:930px) { .business .con{ width:80%; height:auto;} .business .con .list{ width:300px; margin:0 auto; position:relative; margin-top:-20px; } .business .con .list.y2{ left:0;} .business .con .list.y3 a.btn1{ right:auto; left:-30px; top:50%; margin-right:0; margin-top:-40px;} .business .con .list.y3 a.btn2{ right:-30px; margin-top:-40px;} .business .con .list.y3 a.btn3{ right:50%; bottom:-30px; margin-right:-50px;} } @media screen and (max-width:880px){ .index_about{ width:90%; padding:50px 0; font-size:18px; line-height:32px; } .index_about .playbtn{ font-size:16px;} } @media screen and (max-width:768px) { .flash .swiper-pagination-bullet{ width:6px; height:6px; margin:0 6px;} .flash.pc{ display:none;} .flash.wap{ display:block; margin-top:50px;} .index_technology .txt{ float:none; width:100%;} .index_technology .txt h2{ font-size:20px; line-height:26px; margin:50px 0 10px 0;} .index_technology .right_r{ float:none; width:100%; margin-top:30px; text-align:center;} .index_technology .right_r .row:nth-child(1){transform: translate(0px, 0)} .index_technology .right_r .row:nth-child(2){transform: translate(0, -10px)} .index_technology .right_r .row:nth-child(3){transform: translate(0px, -20px)} .hexagon { margin:0 5px; } .g_title{ font-size:20px;} .flash .txt h2{ font-size:20px; line-height:35px; } .index_product li{ width:50%;} .index_news{ padding:50px 0;} .index_news dl{ width:100%; float:none; margin:30px 0 0 0; } .index_news dl:nth-last-child(1){ margin:30px 0 0 0;} .index_news dl dd{ height:auto;} .index_qix{ padding-bottom:50px;} .index_qix li{ width:33.33333%; } } @media screen and (max-width:620px) { .video_pop{ width:90%; height:240px; margin: -150px 0 0 -45%; } #videostr{ width:100%; height:240px;} } @media screen and (max-width:480px) { .index_product .tab li{ height:70px; } .product .list{ height:300px;} .map .hua{ top:15%; right:19%;} .hexagon{ margin:0 2px; } .hexagon .bar-horizontal a{ font-size:12px; line-height:20px; } .index_technology .right_r .row:nth-child(1){transform: translate(0px, 0)} .index_technology .right_r .row:nth-child(2){transform: translate(0, -10px)} .index_technology .right_r .row:nth-child(3){transform: translate(0px, -20px)} .index_product li{ padding:20px;} .index_product li dt{ height:130px;} .index_product li .bg h3{ font-size:16px; margin-bottom:10px;} .index_product li .bg span{ font-size:12px;} .index_product li dd{ font-size:14px; } .index_qix li{ width:50%; } } @media screen and (max-width:400px) { .contact_fl .fr p a{ display:block;} }