@charset "utf-8";


#banner{ position:relative; background:#000; margin:0 auto;}
#banner .box{position:absolute;z-index:90; left:50%; bottom:30%;text-align:left; width:60%; margin-left:-30%;}
#banner .box>.tit{font-size:4.8rem; font-weight:600; color:rgba(255,255,255,1);}
#banner .box>.txt{font-size:2rem; font-weight:700; color:rgba(255,255,255,1); padding:20px 0;}
#banner .swiper{width: 100%;height: 100%;}
#banner .video_img{ display:none;}
#banner .swiper img{ width:100%;height:auto;}
#banner .swiper video{ position:relative; z-index:2; width:100%;}
#banner .swiper-pagination{ position:absolute; z-index:12; bottom:16%; left:50%; margin-left:-30%; width:60%; text-align:left;}
#banner .swiper-pagination .swiper-pagination-bullet{width:40px;height:3px;border-radius:0; background:rgba(255,255,255,1); cursor:pointer; transition:all .35s;}







#main{margin:0 auto;}
#main .wrap{ position:relative; width:86%;max-width:1200px; margin:0 auto;}
#main .title{ position:relative; margin:0 auto;}
#main .title>h2{ display:block;float:left; font-size:6.8rem; color:rgba(0,0,0,1);}
#main .title>a.more{ position:absolute; right:0;top:50%; margin-top:-17px; display:inline-block; padding:0; width:34px;height:34px; box-sizing:border-box; border:1px solid rgba(0,0,0,1); transition:all .35s;}
#main .title>a.more>i{ position:absolute;z-index:1; left:50%;top:50%; margin-left:-10px;margin-top:-10px; width:20px;height:20px; line-height:20px;text-align:center; font-size:2rem; color:rgba(0,0,0,1); transition:all .35s;}
#main .title>a.more:hover{background:rgba(0,0,0,1);}
#main .title>a.more:hover i{color:rgba(255,255,255,1);transform: rotate(180deg);}

#main .container{margin:0 auto; padding:40px 0;}
#main .more{text-align:left;padding-top:40px;}
#main .more>a{ position:relative; display:inline-block;padding:16px 30px; font-size:1.6rem;overflow:hidden; transition:all .35s;}
#main .more>a>span{position:relative;z-index:9; transition:all .35s;}
#main .more>a:hover span{ color:rgba(255,255,255,1);}
#main .more-white>a{ box-shadow: inset 0 0 0 1px rgba(255,255,255,1);}
#main .more-white>a>span{color:rgba(255,255,255,1);}
#main .more-black>a{ box-shadow: inset 0 0 0 1px rgba(0,0,0,1);}
#main .more-black>a>span{color:rgba(0,0,0,1);}



#main .more>a::before {position: absolute;z-index:2; top: 0;left: 0;right: 0;bottom: 0;content: '';background-color:rgba(255,64,0,1);transition: -webkit-transform 0.28s cubic-bezier(0.25, 0.45, 0.5, 1);transform: scale(0, 1);transform-origin: right center;}
#main .more>a::after {position: relative;transition: transform 0.28s cubic-bezier(0.25, 0.45, 0.5, 1);}
#main .more>a:hover::before, #main .more>a:focus::before {transform: scale(1, 1);transform-origin: left center;}

#main .product{margin:0 auto;}
#main .product>.container{margin:0 auto;}
#main .product>.container>.list,#main .product>.container>.list>ul{margin:0 auto;}
#main .product>.container>.list>ul>li{ position: relative; display:block; margin:0 auto; background:url("../img/main_product_bg.jpg") repeat-x; background-position:left top;}
#main .product>.container>.list>ul>li .img{position:relative;z-index:1;width:60%;}
#main .product>.container>.list>ul>li .img>img{width:100%;height:auto;}
#main .product>.container>.list>ul>li .box{ position:absolute;z-index:10; left:0;bottom:32%; width:70%; box-sizing:border-box;}
#main .product>.container>.list>ul>li .box>.attribute{text-align:left; padding:6px 0;}
#main .product>.container>.list>ul>li .box>.attribute>span{display:inline-block;background:#666; border-radius:5px;padding:5px 10px; color:rgba(255,255,255,1); font-size:2.4rem; font-weight:700;}
#main .product>.container>.list>ul>li .box>.tit{font-size:4.5rem; font-weight:700; color:rgba(0,0,0,1);transition:all .35s;}
#main .product>.container>.list>ul>li .box>.tit>span{display:block;}
#main .product>.container>.list>ul>li .box>.txt{ width:70%; padding:20px 0; font-size:1.6rem; font-weight:400; color:rgba(0,0,0,.7); line-height:2rem; transition:all .35s;}

#main .product>.container>.list>ul>li:nth-child(even) .img{float:left;}
#main .product>.container>.list>ul>li:nth-child(even) .box{left:54%;}
#main .product>.container>.list>ul>li:nth-child(odd) .img{float:right;}
#main .product>.container>.list>ul>li:nth-child(odd) .box{left:0; right:auto;}


#main .news{ margin:0 auto; padding:150px 0;}
#main .news>.container>.list,#main .news>.container>.list>ul{margin:0 auto;}
#main .news>.container>.list>ul>li{display:block;float:left;width:30%; margin-right:5%;}
#main .news>.container>.list>ul>li:nth-child(3n){margin-right:0;}
#main .news>.container>.list>ul>li>a{display:block;}
#main .news>.container>.list>ul>li>a .img{text-align:center;overflow:hidden;}
#main .news>.container>.list>ul>li>a .img>img{width:100%;height:auto; transition:all 1s;}
#main .news>.container>.list>ul>li>a .box{text-align:left;padding:20px 0;}
#main .news>.container>.list>ul>li>a .box>.time{padding:10px 0;}
#main .news>.container>.list>ul>li>a .box>.time>span{background:#666; font-size:1.5rem;padding:8px 12px; color:rgba(255,255,255,1); }
#main .news>.container>.list>ul>li>a .box>.tit{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin:20px 0;}
#main .news>.container>.list>ul>li>a .box>.tit>span{font-size:2rem; font-weight:700; color:rgba(0,0,0,1); width: calc(100%);background-image: linear-gradient(transparent calc(100% - 2px), #000 2px);background-repeat: no-repeat;background-size: 0 100%;transition: background-size 0.3s;}
#main .news>.container>.list>ul>li>a .box>.txt{font-size:1.4rem; line-height:1.8rem; color:rgba(140,140,140,1); display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#main .news>.container>.list>ul>li>a .box>.look{padding-top:20px; font-size:1.4rem; color:#ccc;}
#main .news>.container>.list>ul>li>a .box>.look>i{float:left;font-size:1.8rem;margin-right:5px;}
#main .news>.container>.list>ul>li>a:hover .img>img{ transform:scale(1.2);}
#main .news>.container>.list>ul>li>a:hover .tit>span{background-size: 100% 100%;}



#main .solution{background:#f5f5f5; margin:0 auto;padding:150px 0;}
#main .solution>.container{margin:0 auto;}
#main .solution>.container .swiper-slide>a{display:block; position:relative;}
#main .solution>.container .swiper-slide>a>.box{position:absolute;z-index:4;left:10%;bottom:15%;}
#main .solution>.container .swiper-slide>a>.box>.tit{font-size:4.6rem; font-weight:700; color:rgba(255,255,255,1);}
#main .solution>.container .swiper-slide>a>.box>.txt{width:80%; padding:10px 0; font-size:1.7rem; line-height:1.6rem; color:rgba(255,255,255,.9);}
#main .solution>.container .swiper-slide>a>.img{text-align:center;overflow:auto;}
#main .solution>.container .swiper-slide>a>.img>img{width:100%;height:auto; transition:all .8s;}
#main .solution>.container .tools{ position:relative; padding:20px 0;}
#main .solution>.container .tools>.scrollbar{ position:relative; width:85%;}
#main .solution>.container .tools>.button{width:15%; float:right; text-align:right;}
#main .solution>.container .tools>.button>div{ display:inline-block; vertical-align:top; width:auto; line-height:40px;}
#main .solution>.container .swiper-button-disabled{opacity:.3;}
#main .solution>.container .tools>.button i{ display:block; cursor:pointer; width:40px; line-height:40px; text-align:center; font-size:3rem;}
#main .solution>.container .tools>.button .pagination{font-size:1.6rem;}
#main .solution>.container .swiper-scrollbar {position: relative!important;top:20px;z-index: 50;height: 5px;width: 100%;border-radius:0;background:#ccc;}
#main .solution>.container .swiper-scrollbar-drag {position: relative;background:rgba(0,0,0,1);border-radius: 0;}
#main .solution>.container .swiper-slide>a:hover .img>img{transform:scale(1.2);}

#main .about{ background:url("../img/main_about_bg.jpg") no-repeat; background-position:50% 50%;padding:100px 0; margin:0 auto;}
#main .about>.container>.describe{text-align:left; font-size:2.6rem; font-weight:700; color:rgba(255,255,255,1); line-height:3rem;}



#main .factory{ margin:0 auto; padding:150px 0;}
#main .factory>.container>.list,#main .factory>.container>.list>ul{margin:0 auto;}
#main .factory>.container>.list>ul>li{display:block;float:left;width:30%; margin-right:5%; margin-bottom:5%;}
#main .factory>.container>.list>ul>li:nth-child(3n){margin-right:0;}
#main .factory>.container>.list>ul>li>a{ position:relative; display:block;}
#main .factory>.container>.list>ul>li>a:after{position:absolute;z-index:4;right:20px;bottom:20px; font-family:iconfont; font-size:3.6rem; color:rgba(255,255,255,1); content:'\e61d';}
#main .factory>.container>.list>ul>li>a .img{text-align:center;overflow:hidden;}
#main .factory>.container>.list>ul>li>a .img>img{width:100%;height:auto; transition:all 1s;}
#main .factory>.container>.list>ul>li>a:hover .img>img{ transform:scale(1.2);}



















@media only screen and (max-width: 1360px){

  #main .solution>.container{width:86%;}
  #main .solution>.container .tools{width:100%;}


}

@media only screen and (max-width: 1200px){

  #main .title>h2{ font-size:5.2rem;}
  #main .more>a{ padding:10px 20px; font-size:1.4rem;}


  #main .product>.container>.list>ul>li .img{width:56%;}
  #main .product>.container>.list>ul>li .box{ bottom:24%; width:60%; box-sizing:border-box;}
  #main .product>.container>.list>ul>li .box>.tit{font-size:3.2rem;}
  #main .product>.container>.list>ul>li .box>.txt{ font-size:1.4rem;}

  #main .news{ padding:100px 0;}
  #main .news>.container>.list>ul>li>a .box>.time>span{ font-size:1.2rem;padding:6px 10px; }


  #main .solution{padding:100px 0;}

}


@media only screen and (max-width: 860px){

  #main .title>h2{ font-size:4rem;}

  #banner .box{ width: 80%;margin-left: -40%; }
  #banner .box>.tit{font-size:3rem;}
  #banner .box>.txt{font-size:1.6rem;}
  #banner .swiper-pagination{ margin-left:-40%; width:80%;}

  #main .product>.container>.list>ul>li .box{ bottom:16%;}
  #main .product>.container>.list>ul>li .box>.tit{font-size:2.4rem;}
  #main .product>.container>.list>ul>li .box>.txt{ font-size:1.3rem; line-height: 120%;}

  #main .about>.container>.describe{ font-size:2rem;line-height:2.3rem;}


  #main .news>.container>.list>ul>li{width:48%; margin-right:0;}
  #main .news>.container>.list>ul>li:nth-child(even){float: right;}
  #main .news>.container>.list>ul>li:nth-child(3n){display:none;}
  #main .news>.container>.list>ul>li>a .box>.tit>span{font-size:1.6rem;}
  #main .news>.container>.list>ul>li>a .box>.txt{font-size:1.2rem;}

  #main .solution>.container .swiper-slide>a>.box>.tit{font-size:2.6rem;}
  #main .solution>.container .swiper-slide>a>.box>.txt{display: none;}




}


@media only screen and (max-width: 640px){

  #main .title>h2{ font-size:3rem;}
  #banner .box>.tit{font-size:2rem;}
  #banner .box>.txt{font-size:1.2rem;}




  #main .product>.container>.list>ul>li .box{  top:20%; bottom: auto;}
  #main .product>.container>.list>ul>li .box>.tit{font-size:1.6rem;}
  #main .product>.container>.list>ul>li .box>.txt{ display: none; font-size:1.2rem; }




  #main .more>a{ padding:6px 14px; font-size:1.2rem;}





}