@charset "utf-8";
/* CSS Document */

#catalog{ position: relative;z-index: 5; background: #f5f5f5; margin: 0 auto;}


#catalog .list{margin: 0 auto;max-width: inherit;  padding: 150px 0 50px 0;}
#catalog .list>ul{margin: 0 auto;}
#catalog .list>ul>li{ position: relative;z-index: 1; display: block; float: left;  width: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 4px rgba(0,0,0,.1); transition: all .5s;}
#catalog .list>ul>li:nth-child(even){float: right;}
#catalog .list>ul>li>a{display: block; padding:30px  50px;overflow: hidden; transition: all .35s;}
#catalog .list>ul>li>a{display: block;zoom: 1; }
#catalog .list>ul>li>a:before, #catalog .list>ul>li>a:after { content: ""; display: table; }
#catalog .list>ul>li>a:after { clear: both; }
#catalog .list>ul>li>a .box{width: 50%; text-align: left;box-sizing: border-box;padding: 30px 10px; overflow: hidden; }
#catalog .list>ul>li>a .box>.tit{font-size: 2.6rem; font-weight: 600; color: rgba(0,0,0,1); overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#catalog .list>ul>li>a .box>.titsub{padding-top: 6px; font-size: 2.6rem; color: #ccc; font-family: Arial;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: all .35s;}
#catalog .list>ul>li>a .box>.more{text-align: left;padding-top: 30px;}
#catalog .list>ul>li>a .box>.more>span{ display: inline-block; padding: 8px 24px; font-size: 1.2rem; color: rgba(1,64,153,1); border: 1px solid rgba(1,64,153,1); transition: all .35s;}
#catalog .list>ul>li>a .img{width: 50%;text-align: right; box-sizing: border-box;}
#catalog .list>ul>li>a .img>img{width: 100%;height: auto;}
#catalog .list>ul>li:hover{ z-index: 8; box-shadow: 0 0 20px rgba(1,64,153,.4);}
#catalog .list>ul>li:hover .box>.more>span{background: rgba(1,64,153,1);color: rgba(255,255,255,1);}
#catalog .list>ul>li:hover .box>.tit{color: rgba(1,64,153,1);}
#catalog .list>ul>li:hover a{ transform: scale(.96); }

#product{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

/*
#product .nav{ position: relative;z-index: 3; width: 100%;height: auto; text-align: left; padding-top: 60px;}
#product .nav ul{margin: 0 auto; width: 86%; max-width: 1460px}
#product .nav ul>li{display: block;float:left; margin-right: 10px; }
#product .nav ul>li>a{ position: relative; display: block;font-size: 1.6rem; padding: 10px 30px; transition: all .35s;}
#product .nav ul>li>a>span{ position: relative;z-index: 4; display: block;}
#product .nav ul>li.active>a>span{ color: rgba(1,64,153,1);}
#product .nav ul>li.active>a:after{ position: absolute;z-index: 1; left: 50%; top: 0; margin-left: -50%;  width: 100%;height: 100%; box-sizing: border-box; border: 1px solid rgba(1,64,153,1); content: '';}
#product .nav-active{position: fixed;z-index: 50; left: 0;top: 120px; background:rgba(1,64,153,.7); padding:0; }
#product .nav-active ul>li.active>a:after{ background: rgba(240,130,0,1); border: 1px solid rgba(240,130,0,1);}
#product .nav-active ul>li>a>span{color: rgba(255,255,255,1); padding: 5px 0;}
#product .nav-active ul>li.active>a>span{ color: rgba(255,255,255,1);}


#product .nav .pgwMenu { position: relative; text-align: center; padding: 0;margin: 0; height: 50px; }
#product .nav .pgwMenu ul {  list-style: none; white-space: nowrap;}
#product .nav .pgwMenu .pm-links{display: inline-block;vertical-align:top;}
#product .nav .pgwMenu .pm-dropDown{ display: none;position: relative; width: 100%;margin: 0 auto; vertical-align:top; }
#product .nav .pgwMenu .pm-dropDown>a{position: relative; display: block; color: rgba(255,255,255,1); font-size: 1.6rem; background: rgba(1,64,153,1); box-shadow: 1px 2px 3px rgba(0,0,0,.1); height: 50px; line-height: 50px; padding: 0 30px; text-decoration: none;}
#product .nav .pgwMenu .pm-dropDown>a>i{margin-right: 5px; font-size: 1.8rem;}
#product .nav .pgwMenu .pm-links.mob{ position: absolute;z-index: 9; left: 0; width: 100%; background: rgba(255,255,255,1); }
#product .nav .pgwMenu .pm-links.mob>li{ display:block!important; padding: 0;margin: 0; border-bottom: 1px solid #eee; }
#product .nav .pgwMenu .pm-links.mob>li>a{display: block;}
#product .nav .pgwMenu .pm-links.mob>li>a:hover{color: rgba(1,64,153,1);}

#product .nav .pgwMenu .pm-viewMore{ display: none;position: relative;vertical-align:top; }
#product .nav .pgwMenu .pm-viewMore>a{position: relative; display: inline-block; color: rgba(255,255,255,1); font-size: 1.4rem; background: rgba(1,64,153,1); height: 50px; line-height: 50px; padding: 0 30px; text-decoration: none;}
#product .nav .pgwMenu .pm-viewMore>a>i{margin-left: 5px;opacity: .6;}
#product .nav .pgwMenu .pm-viewMore>ul{ position: absolute;z-index: 3; right: 0;background: rgba(1,64,153,1);  }
#product .nav .pgwMenu .pm-viewMore>ul>li{ display:block!important; padding: 0;margin: 0; border-bottom: 1px solid #eee; }
#product .nav .pgwMenu .pm-viewMore>ul>li:after{display: none!important;}
#product .nav .pgwMenu .pm-viewMore>ul>li>a{display: block; color: rgba(255,255,255,1); transition: all .35s;}
#product .nav .pgwMenu .pm-viewMore>ul>li>a:hover{color: rgba(255,255,255,.8);}

*/




#product .nav{ position: relative;z-index: 3; width: 100%;height: auto; text-align: left; padding-top: 60px;}
#product .nav .pm-links{margin: 0 auto;}
#product .nav .pm-links>li{display: block;float:left;}
#product .nav .pm-links>li>a{ position: relative; display: block;font-size: 1.8rem; height: 40px; line-height: 40px; padding: 0 30px; transition: all .35s;}
#product .nav .pm-links>li>a>span{ position: relative;z-index: 4; display: block;}
#product .nav .pm-links>li.active>a>span{ color: rgba(1,64,153,1);}
#product .nav .pm-links>li.active>a:after{ position: absolute;z-index: 1; left: 50%; top: 0; margin-left: -50%;  width: 100%;height: 100%; box-sizing: border-box; border: 1px solid rgba(1,64,153,1); content: '';}
#product .nav-active{position: fixed;z-index: 50; left: 0;top: 120px; width: 100%!important; max-width: inherit!important; background:rgba(1,64,153,.7); padding:0; }
#product .nav-active ul>li.active>a:after{ background: rgba(240,130,0,0); border: 1px solid rgba(240,130,0,0)!important;}
#product .nav-active ul>li>a>span{color: rgba(255,255,255,1);}
#product .nav-active ul>li.active>a>span{ color: rgba(255,255,255,1) !important;}
#product .nav-active ul>li>a:hover{background: rgba(0,0,0,.1);}



#product .nav .pgwMenu .pm-viewMore{ display: none;position: relative;vertical-align:top; margin-left: 10px; }
#product .nav .pgwMenu .pm-viewMore>a{position: relative; display: inline-block; color: rgba(255,255,255,1); font-size: 1.4rem; background: rgba(1,64,153,1);  height: 40px; line-height: 40px;  padding: 0 20px; text-decoration: none;}
#product .nav .pgwMenu .pm-viewMore>a>i{margin-left: 5px;opacity: .6;}
#product .nav .pgwMenu .pm-viewMore>ul{ position: absolute;z-index: 3; right: 0;background: rgba(1,64,153,1);}
#product .nav .pgwMenu .pm-viewMore>ul>li{ display:block; border-top: 1px solid rgba(255,255,255,.2); }
#product .nav .pgwMenu .pm-viewMore>ul>li>a{display: block;  padding: 8px 10px; color: rgba(255,255,255,1); transition: all .35s;}
#product .nav .pgwMenu .pm-viewMore>ul>li>a:hover{color: rgba(255,255,255,1);}
#product .nav .pgwMenu .pm-viewMore>ul>li:hover{background: rgba(255,255,255,.2);}

#product .nav-active .pgwMenu .pm-viewMore>ul>li{ background: rgba(255,255,255,0); }
#product .nav-active .pgwMenu .pm-viewMore>ul>li:hover{background: rgba(255,255,255,.2);}


#product .nav .pgwMenu { position: relative; text-align: center; padding: 0;margin: 0; }
#product .nav .pgwMenu ul {  list-style: none; white-space: nowrap;;}
#product .nav .pgwMenu .pm-links{display: inline-block;vertical-align:top;}
#product .nav .pgwMenu .pm-dropDown{ display: none;position: relative; width: 100%;margin: 0 auto; vertical-align:top; }
#product .nav .pgwMenu .pm-dropDown>a{position: relative; display: block; color: rgba(255,255,255,1); font-size: 1.6rem; background: rgba(1,64,153,1); box-shadow: 1px 2px 3px rgba(0,0,0,.1); height: 50px; line-height: 50px; padding: 0 30px; text-decoration: none;}
#product .nav .pgwMenu .pm-dropDown>a>i{ display: inline-block;vertical-align: top; margin-right: 5px; font-size: 2rem;}
#product .nav .pgwMenu .pm-links.mob{ position: absolute;z-index: 9; left: 0; width: 100%; background: #eee; padding: 20px; }
#product .nav .pgwMenu .pm-links.mob>li{ display:block!important; padding:5px;margin: 0;}
#product .nav .pgwMenu .pm-links.mob>li>a{padding: 8px 20px; height: auto; line-height: inherit;}
#product .nav .pgwMenu .pm-links.mob>li>a>span{font-size: 1.4rem;}
#product .nav .pgwMenu .pm-links.mob>li>a:hover{color: rgba(1,64,153,1);}



#product .keyword{margin: 0 auto; padding-top: 50px; font-size: 1.8rem; color: #333;font-weight: 600;}
#product .keyword span{font-weight: normal;font-size: 2.4rem; color: rgba(240,130,0,1);}

#product .list{ margin: 0 auto;padding: 80px 0;}
#product .list>ul{margin: 0 auto;}
#product .list>ul>li{display: block;float: left; width: 25%; box-sizing: border-box;border: 1px solid #ddd; margin-left: -1px; margin-top: -1px;}
#product .list>ul>li>a{ position: relative; display: block; }
#product .list>ul>li>a:after{position: absolute;z-index: 1;left: 0;bottom: 0; width: 100%;height:0;  background: rgba(0,0,0,.6); content: '';transition: all .35s;}
#product .list>ul>li>a:before{ position: absolute;z-index: 9; left: 50%;top: 50%; margin-left: -90px; margin-top: -50px; box-sizing: border-box; padding-left: 65px; background: rgba(1,64,153,.8) url("../img/ico_zoom.png") no-repeat; background-position: 40px 50%; background-size: 20px auto; width: 180px;height: 40px; line-height: 40px; opacity: 0;  color: #fff;transform: skewX(-10deg); font-size: 14px; content: 'View details'; transition: all .5s;}
#product .list>ul>li .img{ position: relative; text-align: center;}
#product .list>ul>li .img>img{width: 100%;height: auto;}
#product .list>ul>li .img:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 100%; background: url("../img/logo.png") no-repeat; background-position: 50% 50%; background-size: 75% auto; -webkit-filter: grayscale(100%);  opacity: .1; content: '';}
#product .list>ul>li .tit{text-align: center; padding: 20px 0; font-size: 2rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#product .list>ul>li .tit:after{ position: absolute;z-index: 90; left: 0;top: 46%; opacity: 0; width: 100%; text-align: center; font-size: 2.4rem; color: #fff; content: attr(data-tit); transition: all .8s;}
#product .list>ul>li:hover a:after{height: 100%;}
#product .list>ul>li:hover a:before{margin-top: 20px; opacity: 1;}
#product .list>ul>li:hover .tit{color: #fff;}
#product .list>ul>li:hover .tit>em.searHeight{color: #fff; text-decoration: none;}
#product .list>ul>li:hover .tit:after{opacity: 1; top: 40%;}


#product .view{ margin: 0 auto;padding: 300px 0 80px 0;}
#product .view>.title{text-align: center;font-size: 3.6rem; font-weight: 600; color: #333;}
#product .view>.focus{ position: relative; width: 60%;margin: 0 auto;}
#product .view>.focus .swiper-slide{text-align: center;}
#product .view>.focus .swiper-slide:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 100%; background: url("../img/logo.png") no-repeat; background-position: 50% 50%; background-size: auto; -webkit-filter: grayscale(100%);  opacity: .1; content: '';}
#product .view>.focus .swiper-slide>img{max-width: 100%; height: auto; text-align: center;}
#product .view>.focus .button-prev{position: absolute;z-index: 3; left: 0;top: 50%;}
#product .view>.focus .button-next{position: absolute;z-index: 3; right: 0;top: 50%;}
#product .view>.focus .button-prev>i, #product .view>.focus .button-next>i{font-size: 4rem; cursor: pointer;}
#product .view>.focus .swiper-button-disabled{opacity: .2;}

#product .view>.tags{text-align: left;}
#product .view>.tags>.item{padding-bottom: 30px;}
#product .view>.tags>.item>.tit{ position: relative; font-size: 2rem; font-weight: 600; color: rgba(1,64,153,1);padding: 10px 0;}
#product .view>.tags>.item>.tit:after{position: absolute;z-index: 1;left: 0;bottom: 0;width: 30px;height: 2px;background: rgba(1,64,153,1);content:'';}
#product .view>.tags>.item>.con{text-align: left;padding: 20px 0;font-size: 1.6rem;color: #666; line-height: 2.8rem; }


#product .view>.back{text-align: center;padding: 50px 0;}
#product .view>.back>a{display: inline-block; font-size: 1.4rem;font-weight: 600; padding: 10px 60px; border: 2px solid #ccc; border-radius: 30px; transition: all .35s;}
#product .view>.back>a>i{ float: left; font-size: 2rem; font-weight: normal; color: #ccc;margin-right: 6px;}
#product .view>.back>a:hover{ border: 2px solid rgba(1,64,153,1); background: rgba(1,64,153,1); color: #fff;box-shadow: 2px 3px 20px rgba(0,0,0,.4); }
#product .view>.back>a:hover i{color: rgba(255,255,255,1);}


/*
#product .loadmore{ text-align: center;margin: 0 auto; padding: 50px 0 100px 0;}
#product .loadmore>a{display: inline-block; box-sizing: border-box; background: #ccc;font-size: 1.6rem; font-family:Arial; font-weight: bold; padding: 20px 50px; transition: all .35s;}
#product .loadmore>a:hover{background:rgba(1,64,153,1); color: #fff;}

 */


#solution{position: relative;z-index: 1; background: #f5f5f5;margin: 0 auto;padding: 80px 0;}
#solution .wrap{width: 70%;margin: 0 auto;}
#solution .title{font-size: 3.6rem; color: #444; text-align: center;margin: 0 auto;}
#solution .text{ width: 86%; margin: 0 auto; padding: 30px 0; font-size: 1.6rem; color: #666; line-height: 2.8rem;  text-align: center;}
#solution .container{ position: relative;margin: 0 auto;}
#solution .container .swiper-button{}
#solution .container .swiper-button>div{ position: absolute; top: 50%; z-index: 4; display: inline-block; margin-top: -50px; height: 60px; padding:0 20px; opacity: .8; cursor: pointer;  transition: all .35s;}
#solution .container .swiper-button>div>i{font-size: 3.6rem;color: rgba(0,0,0,1);transition: all .35s;}
#solution .container .swiper-button>div.prev{left: -80px;}
#solution .container .swiper-button>div.next{right: -80px;}
#solution .container .swiper-button>div:hover i{color: rgba(1,64,153,1);}
/*
#solution .container .swiper-button>div.prev{ left: -80px; background: url("../img/ico_arrow_left_blue.png") no-repeat; background-size: auto 40px; background-position: 50% 50%;}
#solution .container .swiper-button>div.next{ right: -80px; background: url("../img/ico_arrow_right_blue.png") no-repeat; background-size: auto 40px; background-position: 50% 50%;}
#solution .container .swiper-button>div:hover{ opacity: 1; -webkit-filter: grayscale(0); -moz-filter: grayscale(0);-ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);  }
*/



#solution .container .swiper-slide{padding: 20px 0;}
#solution .container .swiper-slide>a{display: block; transition: all .8s;}
#solution .container .swiper-slide>a>.img{text-align: center;margin: 0 auto; background: rgba(1,64,153,1);overflow:hidden ;}
#solution .container .swiper-slide>a>.img>img{ position: relative; margin-left: -43%; width: 200%;height: auto; transition: all 1s;}
#solution .container .swiper-slide>a>.tit{ position: relative; text-align: left;padding: 20px; font-size: 1.6rem; color: #666; transition: all .35s;}
#solution .container .swiper-slide>a>.tit:after{ position: absolute; z-index: 6; right: 10px;top: 8px; font-size: 3rem; font-weight: bold; color: rgba(1,64,153,1); background-image:-webkit-linear-gradient(right bottom,#94d0ff,#3aa9ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; content: '+'; transition: all .35s; }
#solution .container .swiper-slide>a:hover .tit{background:rgba(1,64,153,1); background:linear-gradient(to right bottom,rgba(1,64,153,1),rgba(56,168,255,1)); color: #fff;}
#solution .container .swiper-slide>a:hover .tit:after{color: #fff;background-image:-webkit-linear-gradient(right bottom,#ffffff,#ffffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}




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



    #catalog .list>ul>li>a .box>.tit{font-size: 2.4rem;}
    #catalog .list>ul>li>a .box>.titsub{ font-size: 2rem;}



    
}





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


    #product .list>ul>li{width: 33.33%;}

    #solution .title{font-size: 3rem;}
    #solution .text{ font-size: 1.4rem; line-height: 2rem;}
    #solution .container .swiper-slide>a>.tit{ font-size: 1.5rem;}

}


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


    #catalog .list>ul>li>a .img{float: none;width: 100%;}
    #catalog .list>ul>li>a .box{float: none;width: 100%;}
    #catalog .list>ul>li>a .box>.tit{font-size: 2rem;}
    #catalog .list>ul>li>a .box>.titsub{height: 25px; font-size: 1.6rem;-webkit-line-clamp: 1;}




}




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


    #product .list>ul>li .tit{font-size: 1.6rem;}
    #product .list>ul>li .tit:after{ font-size: 1.8rem;}
    #product .list>ul>li>a:before{ margin-left: -75px; margin-top: -50px; padding-left: 55px; background-position: 30px 50%; background-size: 18px auto; width: 150px;height: 32px; line-height: 32px; font-size: 1.2rem;}

    #product .view>.title{font-size: 3rem;}
    #product .view>.tags>.item>.tit{ font-size: 1.8rem;}


    #solution .wrap{width: 86%;}
    #solution .title{font-size: 2.4rem; }




}


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

    #product .nav{padding-top: 30px;}
    #product .nav-active{padding-top: 0!important;}
    #product .list>ul>li{width: 50%;}
    #product .view{padding-top: 200px;}
    #product .view>.focus{width: 80%;}
    #product .view>.focus .swiper-slide>img{max-width: 80%;}

    #solution .container .swiper-button>div.prev{left: -70px;}
    #solution .container .swiper-button>div.next{right: -70px;}


}


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

    #product .nav-active{top: 70px;}

    #catalog .list { padding: 50px 0; }
    #catalog .list>ul>li{float: none;width: 100%;}
    #catalog .list>ul>li>a{padding: 0;}
    #catalog .list>ul>li>a .box{padding: 30px 20px 0 20px;}
    #catalog .list>ul>li>a .box>.more{padding-top: 20px;}
    #catalog .list>ul>li>a .box>.more>span{ padding: 6px 15px; font-size: 1.1rem;}

    #product .list>ul>li .tit{padding:10px 20px; font-size: 1.4rem;}

    #solution {padding-top: 30px; }
    #solution .text { font-size: 1.2rem; line-height: 1.8rem; }
    #solution .container .swiper-button>div.prev{left: -60px;}
    #solution .container .swiper-button>div.next{right: -60px;}






}



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

    #product .nav{padding: 0;}
    #product .nav-active .pm-links{box-shadow: 0 1px 3px rgba(0,0,0,.1);}
    #product .nav-active .pm-links>li>a>span {color: #666!important;}
    #product .nav-active .pm-links>li.active>a { border: 1px solid rgba(1,64,153,1); }
    #product .nav-active .pm-links>li.active>a>span{color: rgba(1,64,153,1)!important;}
    #product .view{padding-top: 100px;}
    #product .view>.title{font-size: 2rem;}
    #product .view>.focus{width: 100%;}
    #product .view>.focus .swiper-slide>img{max-width: 65%;}
    #product .view>.focus .button-prev{left: 10px;}
    #product .view>.focus .button-next{right: 10px;}
    #product .view>.focus .button-prev>i, #product .view>.focus .button-next>i{font-size: 3rem;}

    #product .view>.tags>.item>.tit{ font-size: 1.6rem;}
    #product .view>.tags>.item>.con{font-size: 1.4rem; line-height: 2rem; }

    #product .view>.back>a{ font-size: 1.2rem;padding: 8px 40px;}
    #product .view>.back>a>i{font-size: 1.6rem;}

    #solution .container .swiper-button>div.prev{left: -46px;}
    #solution .container .swiper-button>div.next{right: -46px;}





}