@charset "utf-8";
*,::after,::before{box-sizing:border-box; margin:0;padding:0;}
html,body{font-size:62.5%; -webkit-min-device-pixel-ratio:0; font-family:"Microsoft YaHei", 微软雅黑, "Open Sans", Economica, sans-serif;}
ul,li{list-style-type:none;}
a,button,input,textarea,img,div,p,li,span{text-decoration:none;border:0px none; outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
@media (max-width:1080px){ html,body{font-size:56.25%;} }
@media (max-width:680px){ html,body{font-size:50%;} }
.wrap{width:100%; max-width:100%; padding:0px 10%; margin:auto; position:relative;}
@media (max-width:1550px){
.wrap{padding:0px 10px;}
}

.ph{display:none;}
@media (max-width:1080px){
.pc{display:none;}
.ph{display:block;}
}







#head{position:relative;z-index:99999;  height:80px; background:#fff;  box-shadow:0 1px 4px rgba(0,0,0,.2);}
#head .wrap{height:100%; display:flex; align-items:center;}
#head .menu{height:100%; display:flex; margin-left:auto;}
#head .menu a{font-size:1.5rem; color:#000;   height:100%;line-height:80px; margin:0px 9px;   position:relative; white-space:nowrap;   transition:all .3s;}
#head .menu a::after{content:"";  position:absolute;left:0;bottom:0px;   width:100%; height:3px; background:#0068af;   transform:scale(0,1);   transition:all .3s;}
#head .menu a:hover{color:#0068af;}
#head .menu a:hover::after{transform:scale(1);}
#head .menu a.on{color:#0068af;}
#head .menu a.on::after{transform:scale(1);}
#head .menu_btn{display:none;    width:40px;height:40px;margin-left:auto;    position:relative; transition:all .3s;}
#head .menu_btn span{width:32px;height:3px;  position:absolute;left:4px;top:9px;  background:#0870D8;  transition:all 0.8s;}
#head .menu_btn span:nth-child(2){top:19px;  background:#0870D8;     transform:scale(1,1);-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);}
#head .menu_btn span:nth-child(3){top:29px;}
#head .menu_btn.on span:nth-child(1) {top:19px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
#head .menu_btn.on span:nth-child(2) {transform:scale(0, 1);-webkit-transform:scale(0, 1);-moz-transform:scale(0, 1);-ms-transform:scale(0, 1);-o-transform:scale(0, 1);}
#head .menu_btn.on span:nth-child(3) {top:19px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
@media (max-width:1500px){
#head .logo img{height:34px;}
#head .menu a{margin:0px 5px;}
}
@media (max-width:1080px){
#head .logo img{height:27px;}
#head .menu{display:none;}
#head .menu_btn{display:block;}
}


/*ph二级菜单*/
#ph_nav{display:none; position:absolute;left:0;top:80px;z-index:9999;   width:100%; background:#fff;}
#ph_nav .nav_ul .nav_pro{font-size:14px;line-height:40px;    width:100%; padding:0 7.8% 0 8.2%; border-bottom:1px solid #f2f2f2;   position:relative;overflow:hidden;}
#ph_nav .nav_ul .nav_pro>a{font-size:16px; color:#666;  line-height:60px;}
#ph_nav .nav_ul .nav_pro>i{float:right;  width:12px;height:12px; line-height:60px; margin-top:26px; display:inline-block; background:url(../images/ph_nav_arr.png) no-repeat center;  transition:all .3s;}
#ph_nav .nav_ul .nav_pro>i.on{transform:rotate(180deg);}
#ph_nav .nav_ul .nav_pro .nav_sort{display:none; }
#ph_nav .nav_ul .nav_pro .nav_sort a{border-top:1px solid #f2f2f2;  padding-left:20px;  position:relative;    float:left; width:100%;   font-size:14px;color:#666;line-height:40px; }











#banner{width:100%; overflow:hidden;}
#banner .swiper-slide{position:relative;}
#banner .swiper-slide .img{width:100%; display:block;}
#banner .swiper-slide .desc{max-width:27%; opacity:0;  position:absolute;bottom:3%;right:5%;z-index:99;  transition:all 2s;}
#banner .swiper-slide .desc img{max-width:100%;}
#banner .swiper-slide .desc.active{opacity:1;}
#banner .swiper-slide:nth-child(2) .desc{left:50%;top:15%; transform:translate(-50%,0);}










#m1{position:relative;  background:#fff; width:100%; padding:60px 0 30px 0;}
#m1 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m1 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
#m1 .list{display:flex; justify-content:space-between; flex-flow:row wrap;}
#m1 .list .item{width:50%;height:0;padding-top:30%; border:1px solid #fff;  position:relative;    background:linear-gradient(#eeeeee,#d4d4d4);}
#m1 .list .item a{color:#0068af;  display:flex;flex-flow:row wrap;  position:absolute;top:0;left:0;  width:100%;height:100%; padding:37px;     transition:all .6s;}
#m1 .list .item .img{width:38%; text-align:center;}
#m1 .list .item .img img{max-width:100%; max-height:90%;}
#m1 .list .item .text{width:62%; padding-left:5%;   font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#m1 .list .item .text .tit{font-size:4rem;     display:block;  margin-top:10%;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#m1 .list .item .text .tit p{font-size:2.5rem; display:block;  margin-top:7px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#m1 .list .item .text .desc{font-size:2.2rem;  display:block;  margin-top:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#m1 .list .item .text .more{font-size:1.6rem;  display:inline-block; margin-top:20px; padding:7px 22px; border:1px solid #0068af;     transition:all .6s;}
#m1 .list .item a:hover{opacity:0.8;}
#m1 .list .item a:hover .text .more{color:#fff; background:#0068af;}
#m1 .wrap>.more{text-align:center; margin-top:15px;}
#m1 .wrap>.more a{font-size:2.5rem; color:#0068af;    display:inline-block; margin:0 auto; padding:8px 50px; border:4px solid #0068af;   transition:all .6s;}
#m1 .wrap>.more a:hover{color:#fff; background:#0068af;}
@media (max-width:1500px){
#m1{padding:50px 0 30px 0;}
#m1 .title{font-size:4rem;}
#m1 .list .item .text .tit{font-size:3.5rem; margin-top:0;}
#m1 .list .item .text .tit p{font-size:2.2rem;  margin-top:4px;}
#m1 .list .item .text .desc{font-size:2rem; margin-top:5px;}
#m1 .list .item .text .more{font-size:1.4rem; margin-top:8px;}
}
@media (max-width:1080px){
#m1 .list .item a{padding:25px; }
#m1 .list .item .text .tit{font-size:2.8rem;}
#m1 .list .item .text .tit p{font-size:2rem;  margin-top:4px;}
#m1 .list .item .text .desc{font-size:1.6rem; margin-top:5px;}
#m1 .list .item .text .more{font-size:1.2rem; margin-top:8px;}
}
@media (max-width:800px){
#m1{padding:25px 0 30px 0;}
#m1 .title{font-size:2.8rem;  margin-bottom:20px;}
#m1 .wrap>.more a{font-size:2rem; padding:5px 20px; border:2px solid #0068af;}
#m1 .list .item{padding-top:50%;}
#m1 .list .item a{padding:10px;}
#m1 .list .item .img{width:100%;height:calc(100% - 30px);}
#m1 .list .item .img img{max-height:100%;}
#m1 .list .item .text{width:100%; padding:0;}
#m1 .list .item .text .tit{font-size:2rem;  text-align:center;}
#m1 .list .item .text .tit p{display:none;}
#m1 .list .item .text .desc{display:none;}
#m1 .list .item .text .more{display:none;}
}













#m2{position:relative;  background:#dbf0fe; width:100%; padding:45px 0;}
#m2 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m2 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;   width:32px;height:1px;margin:0 auto;   background:#0068af;}
#m2 .box .ico img{margin:0 auto; max-width:100%;}
#m2 .box .cloud{color:#0068af; letter-spacing:2px; text-align:center;}
#m2 .box .cloud .tit{font-size:4.4rem; font-weight:800; margin:10px 0;}
#m2 .box .cloud .desc{font-size:2.7rem; line-height:4.3rem;  max-width:900px; margin:0 auto 35px auto;}
#m2 .box .cloud .more a{font-size:2.5rem; color:#0068af; font-weight:800;   display:inline-block; margin:0 auto; padding:8px 40px; border:4px solid #0068af;   transition:all .6s;}
#m2 .box .cloud .more a:hover{color:#fff; background:#0068af;}
#m2 .box .part{display:flex; justify-content:space-between; flex-flow:row wrap;   max-width:1300px; margin:50px auto 0 auto;}
#m2 .box .part .item{letter-spacing:2px; color:#0068af;  margin:10px 0;}
#m2 .box .part .item .tit{font-size:4rem;   font-weight:800;}
#m2 .box .part .item .desc{font-size:2.5rem; line-height:4.3rem;  margin-top:10px;}
@media (max-width:1500px){
#m2 .title{font-size:4rem;}
#m2 .box .cloud .tit{font-size:4rem;}
#m2 .box .cloud .desc{font-size:2.4rem; line-height:3.6rem;}
#m2 .box .cloud .more a{font-size:2.3rem;}
#m2 .box .part .item .tit{font-size:3.6rem;}
#m2 .box .part .item .desc{font-size:2rem; line-height:3.4rem;}
}
@media (max-width:1080px){
#m2 .box .cloud{margin-top:-15%;}
#m2 .box .cloud .tit{font-size:3.5rem;}
#m2 .box .cloud .desc{font-size:2rem; line-height:3rem;  max-width:60%;}
#m2 .box .cloud .more a{font-size:2rem;}
#m2 .box .part{justify-content:space-around;}
#m2 .box .part .item:last-child{width:100%;}
#m2 .box .part .item:last-child img{margin:0 auto; max-width:100%;}
#m2 .box .part .item .tit{font-size:3rem;}
#m2 .box .part .item .desc{font-size:2rem; line-height:2.5rem;}
}
@media (max-width:800px){
#m2{padding:25px 0 30px 0;}
#m2 .title{font-size:2.8rem;  margin-bottom:20px;}
#m2 .box .cloud .tit{font-size:2.5rem;}
#m2 .box .cloud .desc{font-size:1.6rem; line-height:1.9rem;}
#m2 .box .cloud .more a{font-size:1.8rem; padding:5px 20px; border:2px solid #0068af;}
#m2 .box .part{margin-top:20px;}
#m2 .box .part .item{display:block; width:100%;}
#m2 .box .part .item .tit{font-size:2.2rem;}
#m2 .box .part .item .desc{font-size:1.5rem; line-height:1.8rem;}
}










#m3{position:relative;  background:#dbf0fe; width:100%; padding:40px 0;  border-top:3px solid #0068af;}
#m3 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m3 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
#m3 .app{padding:0 8%;}
#m3 .app .swiper-slide{text-align:center;}
#m3 .ewm{display:flex; justify-content:space-around; margin-top:10px; overflow:hidden;}
#m3 .ewm .item{font-size:3.2rem;color:#404040; font-family:'Microsoft Jhenghei', 'Microsoft YaHei'; text-align:center;     max-width:29.33%;padding:2%;margin:2%; background:rgba(255,255,255,0.8);}
#m3 .ewm .item img{display:block; max-width:100%; margin-bottom:40px;}
#m3 .wrap>.more{text-align:center; margin-top:15px;}
#m3 .wrap>.more a{font-family:"Microsoft YaHei"; font-size:2.5rem; color:#0068af;    display:inline-block; margin:0 auto; padding:8px 50px; border:4px solid #0068af;   transition:all .6s;}
#m3 .wrap>.more a:hover{color:#fff; background:#0068af;}
@media (max-width:1500px){
#m3 .title{font-size:4rem;}
}
@media (max-width:1080px){
#m3 .ewm .item{font-size:2.8rem;}
#m3 .ewm .item img{margin-bottom:20px;}
}
@media (max-width:800px){
#m3{padding:25px 0 30px 0;}
#m3 .title{font-size:2.8rem;  margin-bottom:20px;}
#m3 .wrap>.more a{font-size:2rem; padding:5px 20px; border:2px solid #0068af;}
#m3 .ewm .item{font-size:1.4rem;}
#m3 .ewm .item img{margin-bottom:10px;}
#m3 .app img{height:200px;}
}







#m4{position:relative;  background:#fff; width:100%; padding:40px 0; }
#m4 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m4 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
#m4 .list{display:flex; flex-flow:row wrap;}
#m4 .list .item{display:inline-block;   width:49%; margin:0.5%; position:relative; overflow:hidden;}
#m4 .list .item .img img{display:block; width:100%;}
#m4 .list .item .tit{font-size:2rem; color:#fff; text-align:center;    position:absolute;bottom:0;left:0;z-index:2;   width:100%;padding:10px;      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#m4 .list .item::after{content:""; display:block;   position:absolute;left:0;bottom:0;   width:100%; height:47px;   background:rgba(0,0,0,0.6);    transition:all .6s;}
#m4 .list .item::before{content:""; display:block;  position:absolute;left:0;bottom:0;z-index:2;   width:100%; height:100%;   background:url(../images/zoom.png) no-repeat center center;  opacity:0;    transition:.3s ease 0.1s;}
#m4 .list .item:hover::after{height:100%;}
#m4 .list .item:hover::before{opacity:1;}
#m4 .wrap>.more{text-align:center; margin-top:15px;}
#m4 .wrap>.more a{font-family:"Microsoft YaHei"; font-size:2.5rem; color:#0068af;    display:inline-block; margin:0 auto; padding:8px 50px; border:4px solid #0068af;   transition:all .6s;}
#m4 .wrap>.more a:hover{color:#fff; background:#0068af;}
@media (max-width:1500px){
#m4 .title{font-size:4rem;}
}
@media (max-width:800px){
#m4{padding:25px 0 30px 0;}
#m4 .title{font-size:2.8rem;  margin-bottom:20px;}
#m4 .wrap>.more a{font-size:2rem; padding:5px 20px; border:2px solid #0068af;}
#m4 .list .item{width:100%;margin:0.5% 0; }
}





#m5{position:relative;  background:#fff; width:100%; padding:40px 0; }
#m5 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m5 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
#m5 .list{display:flex; flex-flow:row wrap;}
#m5 .list .item{display:inline-block;  width:25%;height:auto; border:1px solid #fff; padding:7px; background:#0068af;  position:relative; overflow:hidden;}
#m5 .list .item .img img{display:block; width:100%;}
#m5 .list .item .tit{color:#fff; font-size:2rem; text-align:center;  width:100%; padding:10px 0 5px 0;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#m5 .list .item::after{content:""; display:block;  width:100%;height:100%; background:rgba(0,0,0,.6) url(../images/zoom.png) no-repeat center;    position:absolute;top:0;left:0; transform:scale(0);  transition:all .6s;}
#m5 .list .item:hover::after{transform:scale(1);}
#m5 .wrap>.more{text-align:center; margin-top:15px;}
#m5 .wrap>.more a{font-family:"Microsoft YaHei"; font-size:2.5rem; color:#0068af;    display:inline-block; margin:0 auto; padding:8px 50px; border:4px solid #0068af;   transition:all .6s;}
#m5 .wrap>.more a:hover{color:#fff; background:#0068af;}
@media (max-width:1500px){
#m5 .title{font-size:4rem;}
}
@media (max-width:800px){
#m5{padding:25px 0 30px 0;}
#m5 .title{font-size:2.8rem;  margin-bottom:20px;}
#m5 .wrap>.more a{font-size:2rem; padding:5px 20px; border:2px solid #0068af;}
#m5 .list .item{width:50%;}
}



#m6{position:relative;  background:#fff; width:100%; padding:40px 0; }
#m6 .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
#m6 .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
#m6 .list{display:flex; flex-flow:row wrap;}
#m6 .list .item{display:inline-block;  width:49%; margin:0.5%; position:relative; overflow:hidden;}
#m6 .list .item .img img{display:block; width:100%;}
#m6 .list .item .tit{font-size:2rem; color:#fff; text-align:center;    position:absolute;bottom:0;left:0;z-index:2;   width:100%;padding:10px;      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#m6 .list .item::after{content:""; display:block;   position:absolute;left:0;bottom:0;   width:100%; height:47px;   background:rgba(0,0,0,0.6);    transition:all .6s;}
#m6 .list .item::before{content:""; display:block;  position:absolute;left:0;bottom:0;z-index:2;   width:100%; height:100%;   background:url(../images/zoom.png) no-repeat center;  opacity:0;    transition:.3s ease 0.1s;}
#m6 .list .item:hover::after{height:100%;}
#m6 .list .item:hover::before{opacity:1;}
#m6 .wrap>.more{text-align:center; margin-top:15px;}
#m6 .wrap>.more a{font-family:"Microsoft YaHei"; font-size:2.5rem; color:#0068af;    display:inline-block; margin:0 auto; padding:8px 50px; border:4px solid #0068af;   transition:all .6s;}
#m6 .wrap>.more a:hover{color:#fff; background:#0068af;}
@media (max-width:1500px){
#m6 .title{font-size:4rem;}
}
@media (max-width:800px){
#m6{padding:25px 0 30px 0;}
#m6 .title{font-size:2.8rem;  margin-bottom:20px;}
#m6 .wrap>.more a{font-size:2rem; padding:5px 20px; border:2px solid #0068af;}
#m6 .list .item{width:100%;margin:0.5% 0; }
}


#m7{position:relative;  background:#031f46 url(../images/joins_bg.jpg) no-repeat center / auto 100%; width:100%;}
#m7 img{display:block; max-width:100%; margin:0 auto; padding:35px 20px 45px 20px;}





#m8{position:relative;  background:#1a76b7; width:100%; display:flex; overflow:hidden;}
#m8 .fl,#m8 .fr{width:50%; height:250px;}
#m8 .fl{background:#1a76b7 url(../images/address.jpg) no-repeat;}
#m8 .contact{color:#fff;  font-size:1.4rem; line-height:2.5rem;  padding:30px 80px;  float:right;}
#m8 .contact .company{font-size:2.2rem; line-height:3rem;  font-weight:800;}
#m8 .contact .company::after{content:""; display:block; width:32px; height:1px; background:#fff;  margin:10px 0;}
#m8 #allmap{width:100%;height:100%;}
@media (max-width:1080px){
#m8{display:block;}
#m8 .fl,#m8 .fr{width:100%;}
#m8 .fl{background-position:center; }
#m8 .contact{float:none; padding:20px;}
}




#foot{font-size:1.4rem; color:#fff; text-align:center;    width:100%; padding:7px 0; background:#1271b9;}
#foot a{font-size:1.4rem; color:#fff;}



/*悬浮*/
#fixed{display:none;  position:fixed;right:10px;bottom:70px;z-index:999;}
#fixed li{width:45px; height:45px;   margin-top:1px;  cursor:pointer; background:rgba(73,73,73,0.5);}
#fixed li.top::after{content:""; display:block; width:100%; height:100%; background:url(../images/fixed-top-icon.png) no-repeat center center;}
#fixed li:hover{background:rgba(18,113,185,0.5);}


#online{display:none;   width:70%;height:40px; border-radius:40px;   position:fixed;bottom:20px;left:15%;z-index:9999;   background:#1271b9; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5);}
#online a{width:33.33%; line-height:40px; text-align:center;}
#online img{height:18px; vertical-align:middle;}
@media (max-width:800px){
#online{display:flex;}
}










.inner{margin:50px 0 25px 0;}
.inner .title{font-size:5rem; font-weight:800; color:#0068af; text-align:center;   margin-bottom:35px;  position:relative;}
.inner .title::after{content:"";  position:absolute;left:0;right:0;bottom:-10px;  margin:0 auto;  width:32px;height:1px; background:#0068af;}
.inner img{max-width:100%;}
@media (max-width:800px){
.inner{margin:20px 0;}
.inner .title{font-size:2.8rem;  margin-bottom:20px;}
}
.inner .tits{position:relative;}
.inner .tits .en{color:#6d6d6d; font-size:3rem; font-family:Arial;}
.inner .tits .cn{color:#0068b1; font-size:5rem; line-height:4.6rem; font-weight:800; display:inline-block; vertical-align:top;}
.inner .tits::after{content:""; display:inline-block; width:87px;height:85px;margin-left:10px;  background:url(../images/tit_arr.jpg) no-repeat center / 100% 100%; }
@media (max-width:800px){
.inner .tits .en{font-size:2rem; font-family:Arial;}
.inner .tits .cn{font-size:3rem; line-height:3rem;}
.inner .tits::after{width:47px;height:45px;}
}




#about .m1{background:url(../images/about_bg.jpg) no-repeat; padding:2%;}
#about .m1 .box{width:100%; height:100%; padding:3%; background:rgba(255,255,255,0.8);}
#about .m1 .box .tit{margin:0 auto; text-align:center;}
#about .m1 .box .tit img{max-width:70%; padding-top:10px;}
#about .m1 .box .desc{font-size:2.5rem;color:#404040; letter-spacing:2px;  line-height:4rem; margin-top:20px;}
#about .m2 img{width:100%; margin:30px auto;}
#about .m3{margin:50px 0;}
#about .m3 img{width:100%; margin-top:25px;}
#about .m4{margin:70px 0;}
#about .m4 img{width:100%; margin-top:25px;}
@media (max-width:800px){
#about .m1 .box .desc{font-size:1.8rem; line-height:2rem; margin-top:10px;}
#about .m3{margin:25px 0;}
}


#news .list{display:flex; flex-flow:row wrap;}
#news .list a{display:inline-block; width:24%; margin:0.5%;}
#news .list a .img img{width:100%;}
#news .list a .tit{font-size:1.8rem; color:#696969; text-align:center;  display:block; margin:10px 0;    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#news .content .name{font-size:2.4rem; font-weight:800;}
#news .content .time{margin:10px 0px;padding:10px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
#news .content .desc img{max-width:100%;}
@media (max-width:1080px){
#news .list a{width:49%;}
}
@media (max-width:800px){
#news .list a{width:99%;}
#news .content .name{font-size:2rem;}
}






#product .list{width:100%; display:flex; flex-flow:row wrap;}
#product .list>li{width:23%; margin:1%;}
#product .list a{font-size:2rem;color:#777;text-align:center;   display:inline-block;width:100%;padding:10px 0;   background:#f3f3f3; border-radius:2px;   position:relative;   overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#product .list>li ul{display:none; width:100%; overflow:hidden; margin-top:10px;}
#product .list>li ul>li{text-align:center;   display:block;width:100%;margin-top:5px;   background:#f3f3f3;   border-radius:2px;}
#product .list>li ul.on{display:block;}
#product .list>li:hover >a{color:#fff;  background:#0068af;}
#product .list a:hover,#product .list a.on{color:#fff;  background:#0068af;}
#product .related{width:100%; display:flex; flex-flow:row wrap;}
#product .related a{width:24%; margin:0.5%; display:inline-block;}
#product .related a .img{border:1px solid #dfdfdf;}
#product .related a .img img{width:100%;}
#product .related a .tit{font-size:1.8rem; color:#696969; text-align:center;  display:block; padding:10px 0;     overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#product .imgs{margin:10px 0px;padding:10px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; text-align:center;}
#product .imgs img{max-width:100%;}
#product .content img{max-width:100%;}
@media (max-width:1080px){
#product .list>li{width:48%;}
#product .related a{width:49%;}
}
@media (max-width:800px){
#product .related a{width:99%;}
}










/*页码*/
.page {width:100%;height:70px;clear:both;text-align:center;padding-top:30px;}
.page strong {color:#FFF;background-color:red;padding:7px 12px;margin:1px 10px 0px -1px;cursor:pointer;border:1px solid red;}
.page a {border:1px solid #e6e6e6;padding:7px 12px;margin-right:10px;cursor:pointer;color:#000;}
.page a:hover {background-color:red;border:1px solid #e6e6e6;color:#fff;}