@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#search{position: relative;z-index: 90; max-width: 800px; width: 86%; margin: 0 auto; margin-top: -240px;height: 240px;  }
#search .form{width:100%; height:60px; border-radius: 50px; background: rgba(255,255,255,1);}
#search .form input[type="text"]{ background: none; outline: medium;height:60px;line-height:60px;width:100%; text-align:center;border:none; font-size:1.6rem;color:#777;box-sizing:border-box;overflow:hidden;}
#search .form input::-webkit-input-placeholder{ color:#ccc;}
#search .form button{ position:absolute; right: 20px; top: 0; width:60px;height:60px; background: none; border:none;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#search .form button:after{position: absolute;z-index: 2; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; width: 20px;height: 20px;  font-family: "iconfont" !important; font-size: 2.4rem; font-style: normal; -webkit-font-smoothing: antialiased; color: rgba(38,87,161,1); content: "\e61e";}
#search .keyword{ text-align: center; padding: 30px; margin: 0 auto;}
#search .keyword>a{display: inline-block; margin-right: 15px; font-size: 1.6rem; color: rgba(255,255,255,.8);  transition: all .35s;}
#search .keyword>a:hover{ text-decoration: underline;}



#catalog{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding: 100px 0;}
#catalog>.list{margin: 0 auto;}
#catalog>.list>ul{margin: 0 auto;}

#catalog .list>ul>li{display: block;float: left; width: 31.33%; margin: 0 3% 3% 0; padding-bottom: 20px; overflow: hidden; box-sizing: border-box; background: #fff;  transition: all .35s;}
#catalog .list>ul>li:nth-child(3n){ margin-right: 0;}
#catalog .list>ul>li>a{ position: relative; display: block; }
#catalog .list>ul>li>a:after{ position: absolute;z-index: 3; right: -10px;bottom: -60px; width: 110px;height: 30px; line-height: 30px; font-size: 1.2rem; color: #fff; text-align: center; background: rgba(146,191,46,.8); transform: skewX(-10deg); font-family: iconfont; content: '查看详情 \e687'; transition: all .35s;}
#catalog .list>ul>li .img{ text-align: center;padding: 20px;overflow:hidden;}
#catalog .list>ul>li .img>img{width: 100%;height: auto; transition: all .8s;}
#catalog .list>ul>li .tit{ position: relative; text-align: center; padding: 30px; font-size: 2.4rem; color: #333; transition: all .35s;}
#catalog .list>ul>li .tit:after{position: absolute;z-index: 2; left: 50%; top: 16px; margin-left: -20px; width: 40px;height: 2px; background: rgba(146,191,46,1); content: ''; transition: all .35s;}
#catalog .list>ul>li:hover{ box-shadow: 0 0 10px rgba(0,0,0,.1);}
#catalog .list>ul>li:hover .tit{color: rgba(38,87,191,1);transform:scale(0.9);}
#catalog .list>ul>li:hover .img>img{transform:scale(1.1);}
#catalog .list>ul>li:hover a:after{bottom: -20px;}


#product{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding: 100px 0;}

#product .catalog{margin: 0 auto;}
#product .catalog>.details{ background: #fff;padding: 50px 0; margin: 50px auto;}
#product .catalog>.details>.img{width: 50%; text-align: left;}
#product .catalog>.details>.img>img{width: 100%;height: auto;}
#product .catalog>.details>.con{ width: 50%;box-sizing: border-box; padding: 100px; padding-bottom: 0; text-align: center;}
#product .catalog>.details>.con>.tit{font-size: 5rem; font-weight: 500; color: #333; transition: all .35s;}
#product .catalog>.details>.con>.txt{ margin: 30px 0; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; overflow: hidden; font-size: 1.6rem; color: #666; line-height: 2.8rem;}
#product .catalog>.details>.con>.consulting{text-align: center;padding-top: 20px;}
#product .catalog>.details>.con>.consulting>a { -webkit-transition: all .2s linear; transition: all .2s linear; position: relative; display: inline-block; width: 260px; height: 60px; line-height: 60px; font-size: 2rem; font-weight: 500; text-align: center; z-index: 10; background-color: rgba(146,199,46,1); border-radius: 50px; color:rgba(255,255,255,1);}
#product .catalog>.details>.con>.consulting>a:after { -webkit-transition: all 0.3s cubic-bezier(0.75, 0, 0.125, 1); transition: all 0.3s cubic-bezier(0.75, 0, 0.125, 1); content: ''; position: absolute;top: 0; left: 0;width: calc(100% - 4px);height: calc(100% - 4px);border: 2px solid rgba(38,87,161,1); z-index: -1; border-radius: inherit; opacity: 0;-webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1);}
#product .catalog>.details>.con>.consulting>a:hover { color: rgba(38,87,161,1); background-color: transparent;}
#product .catalog>.details>.con>.consulting>a:hover:after{ -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1;}

#product .catalog>.nav{ position: relative; text-align: left; background: #fff; margin: 0 auto;}
#product .catalog>.nav>.dropdown{display: none;}
#product .catalog>.nav>.prev{position: absolute; z-index: 3; left: 0;top: 0; width: 40px;height: 100%; text-align: center; border-right: 1px solid #eee;  box-sizing: border-box; overflow: hidden; cursor: pointer;}
#product .catalog>.nav>.prev>i{ position: absolute;z-index: 1;left: 50%;top: 50%; margin-left: -20px;margin-top: -20px; width: 40px;height: 40px; line-height: 40px; font-size: 2rem; color: rgba(38,87,161,1);}
#product .catalog>.nav>.next{position: absolute; z-index: 3; right: 0;top: 0; width: 40px;height: 100%; text-align: center; border-left: 1px solid #eee;  box-sizing: border-box; overflow: hidden; cursor: pointer;}
#product .catalog>.nav>.next>i{ position: absolute;z-index: 1;left: 50%;top: 50%; margin-left: -20px;margin-top: -20px; width: 40px;height: 40px; line-height: 40px; font-size: 2rem; color: rgba(38,87,161,1);}
#product .catalog>.nav>.swiper-button-disabled{opacity: 0;}
#product .catalog>.nav>.swiper-container{ width: 94%; margin: 0 auto; background: #fff; box-sizing: border-box;}
#product .catalog>.nav>.swiper-container .swiper-slide{ text-align: center; box-sizing: border-box; }
#product .catalog>.nav>.swiper-container .swiper-slide>a{ position: relative; display: block;font-size: 1.8rem; padding: 30px 0;overflow: hidden; transition: all .35s;}
#product .catalog>.nav>.swiper-container .swiper-slide>a.active{background: rgba(38,87,161,1); color: #fff;}
#product .catalog>.nav>.swiper-container-horizontal>.swiper-scrollbar { display: none; left: 0;width: 100%; }


#product .type{ border-bottom: 1px solid #ddd; border-top: 4px solid rgba(38,87,191,1); text-align: left; margin: 0 auto;}
#product .type>ul{ margin: 0 auto;}
#product .type>ul>li{display: block;float: left;}
#product .type>ul>li>a{display: block;padding:25px 0; margin-right: 30px; font-size: 1.6rem;color: #333;transition: all .35s;}
#product .type>ul>li>a.active{color: rgba(38,87,191,1); font-weight: 600;}
#product .type>ul>li>a:hover {color: rgba(38,87,191,1);}








#product .list{margin: 0 auto;padding: 80px 0;}
#product .list>ul{margin: 0 auto;}
#product .list>ul>li{display: block;float: left; width: 22.75%; margin: 0 3% 3% 0; box-sizing: border-box; background: #fff; }
#product .list>ul>li:nth-child(4n){ margin-right: 0;}
#product .list>ul>li>a{ position: relative; display: block; }
#product .list>ul>li .img{ text-align: center;padding: 12px;overflow:hidden;}
#product .list>ul>li .img>img{width: 100%;height: auto; transition: all .8s;}
#product .list>ul>li .tit{text-align: center; padding: 20px 0; transition: all .35s;}
#product .list>ul>li .tit>h3{ display: block;padding-top: 10px; font-size: 2rem; color: #333;transition: all .35s; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; }
#product .list>ul>li .tit>h4{ display: block; font-size: 1.6rem; font-weight: normal; color: #888;transition: all .35s; }
#product .list>ul>li:hover .tit>h3{color: rgba(38,87,191,1);}
#product .list>ul>li:hover .img>img{transform:scale(1.1);}



#product .search{margin: 0 auto; padding-top: 100px ;}
#product .search>.keyword{ width: 50%; text-align: left; font-size: 1.8rem; color: #666;}
#product .search>.keyword>i{float: left; color: rgba(38,78,161,1); font-size: 2.4rem; margin-right: 10px;}
#product .search>.keyword>span{text-decoration: underline;}
#product .search>.back{width: 50%;text-align: right;}
#product .search>.back>a{display: inline-block; border: 2px solid rgba(146,199,46,1); border-radius: 50px; padding: 10px 30px; font-size: 1.4rem; color: rgba(146,191,46,1); transition: all .35s;}
#product .search>.back>a:hover{background: rgba(146,191,46,1); border: 2px solid rgba(146,191,46,1); color: #fff; transform:translateY(-3px);}
#product .search>.back>a:hover i{color: #fff;}


#product .view{margin: 0 auto;}
#product .view>.details{ position: relative; margin: 0 auto; padding: 100px; box-sizing: border-box; background: #fff;}
#product .view>.details .wrap{position: relative;}
#product .view>.details .box{width: 60%;text-align: left; box-sizing: border-box;padding-right: 10%;}
#product .view>.details .box>.tit{padding: 30px 0;}
#product .view>.details .box>.tit>h3{color: rgba(38,87,161,1); font-size: 4.2rem;}
#product .view>.details .box>.tit>span{display: block; font-size: 2.4rem; color: #666;}
#product .view>.details .box>.describe{ width: 70%; margin: 30px 0;}
#product .view>.details .box>.describe>.tit{font-size: 1.6rem;color: #333;font-weight: bold;}
#product .view>.details .box>.describe>.txt{ padding: 10px 0; font-size: 1.4rem; color: #666; line-height: 2.4rem;}
#product .view>.details .consulting{ position: absolute;z-index: 3; left: 0;bottom: 10%; text-align: left;}
#product .view>.details .consulting>a { -webkit-transition: all .2s linear; transition: all .2s linear; position: relative; display: inline-block; width: 260px; height: 60px; line-height: 60px; font-size: 2rem; font-weight: 500; text-align: center; z-index: 10; background-color: rgba(146,199,46,1); border-radius: 50px; color:rgba(255,255,255,1);}
#product .view>.details .consulting>a:after { -webkit-transition: all 0.3s cubic-bezier(0.75, 0, 0.125, 1); transition: all 0.3s cubic-bezier(0.75, 0, 0.125, 1); content: ''; position: absolute;top: 0; left: 0;width: calc(100% - 4px);height: calc(100% - 4px);border: 2px solid rgba(38,87,161,1); z-index: -1; border-radius: inherit; opacity: 0;-webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1);}
#product .view>.details .consulting>a:hover { color: rgba(38,87,161,1); background-color: transparent;}
#product .view>.details .consulting>a:hover:after{ -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1;}


#product .view>.details .focus{ position: relative; width: 40%;text-align: center;}
#product .view>.details .focus .swiper-slide img{width: 100%;height: auto;}
#product .view>.details .focus .swiper-pagination{ width: 100%; bottom: 0; }
#product .view>.details .focus .swiper-pagination .swiper-pagination-bullet {width: 12px; height: 12px; border: 2px solid #000; margin: 0 3px; }
#product .view>.details .focus .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; background: none; border: 2px solid rgba(38,87,161,1);}


#product .view>.tag{ margin:0 auto;padding:0;}
#product .view>.tag>.nav{margin:50px auto;text-align:center;  border-top: 4px solid rgba(38,87,161,1);}
#product .view>.tag>.nav>ul{margin:0 auto;}
#product .view>.tag>.nav>ul>li{ position:relative; display:inline-block; float: left; width: 33.33%;}
#product .view>.tag>.nav>ul>li>a{ position: relative; display:block;font-size:2rem; border-bottom: 1px solid #ddd; font-weight: bold; color:#333;padding:30px 0;}
#product .view>.tag>.nav>ul>li>a:after{ position: absolute;z-index: 2; left: 0;bottom: -1px;width: 0;height: 1px; opacity: 0; background: rgba(38,87,161,1); content: '';transition: all .35s; }
#product .view>.tag>.nav>ul>li>a.active{ color: rgba(38,87,161,1); }
#product .view>.tag>.nav>ul>li>a.active:after{ width: 100%; opacity: 1;}
#product .view>.tag>.container{ margin:0 auto;padding:50px; background: #fff; }
#product .view>.tag>.container .hide{display:none;}

#product .view>.tag>.container .title{display:none;font-size:18px; color:#333; margin-bottom:20px; background:#eee;padding:5px 10px; }
#product .view>.tag>.container .overview{margin:0 auto;}
#product .view>.tag>.container .overview>.item{margin:0 auto;}
#product .view>.tag>.container .overview>.item>.tit{ position:relative; font-size:1.8rem; font-weight: bold;padding: 10px 0;  color:#333; }
#product .view>.tag>.container .overview>.item>.con{text-align:left;margin:0 auto;padding:20px 0;}
#product .view>.tag>.container .overview>.item>.con>p{margin-bottom:10px; font-size:16px; color:#666;line-height:28px;}
#product .view>.tag>.container .overview>.item>.con img{max-width:100%;height:auto;}

#product .view>.tag>.container .cert{margin:0 auto;}
#product .view>.tag>.container .cert>.list{padding:20px 0;margin:0 auto;}
#product .view>.tag>.container .cert>.list>a{display:block;float:left;width:50%; margin-bottom:2%; font-size:1.6rem; line-height: 3.8rem; text-align:left; padding-right: 50px; box-sizing:border-box;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition:all .35s;}
#product .view>.tag>.container .cert>.list>a>i{ display:inline-block; float: left; font-size: 3.8rem; color: rgba(146,191,46,1); margin-right:10px;}
#product .view>.tag>.container .cert>.list>a:hover{text-decoration:underline; color:#999;}


#product .view>.tag>.container .pdf{margin:0 auto;}
#product .view>.tag>.container .pdf>.list{padding:20px 0;margin:0 auto;}
#product .view>.tag>.container .pdf>.list>a{display:block;float:left;width:50%; margin-bottom:2%; font-size:1.6rem; line-height: 3.8rem; text-align:left; box-sizing:border-box;padding-right:50px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#product .view>.tag>.container .pdf>.list>a>i{ display:inline-block; float: left; font-size: 3.4rem; color: rgba(146,191,46,1); margin-right:10px;}
#product .view>.tag>.container .pdf>.list>a:hover{text-decoration:underline; color:#999;}

#product .view>.tag>.container .nodata{color: #ccc; font-size: 1.3rem;}


#product .view>.pageurl{ text-align: center;margin: 0 auto; padding-top: 60px;}
#product .view>.pageurl>a{display: inline-block; background: rgba(38,87,161,1); font-size: 1.8rem; color: #fff; padding: 12px 80px; margin: 0 auto; transition: all .35s;}
#product .view>.pageurl>a>i{font-size: 2rem; margin-right: 10px;}
#product .view>.pageurl>a:hover{background: rgba(146,191,46,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-weight: 500; padding: 20px 50px; transition: all .35s;}
#product .loadmore>a:hover{background:rgba(38,87,191,1); color: #fff;}


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


    #search{margin-top: -200px;height: 200px; }

    #product .catalog>.details>.con{padding: 60px;}
    #product .catalog>.details>.con>.tit{font-size: 4rem;}
    #product .catalog>.details>.con>.txt{ -webkit-line-clamp: 4; font-size: 1.4rem; line-height: 2.4rem;}
    #product .catalog>.details>.con>.consulting>a { width: 220px; height: 50px; line-height: 50px; font-size: 1.8rem;}

    #product .catalog>.nav>.prev, #product .catalog>.nav>.next{width: 36px;}


    #product .list>ul>li{width: 31.33%; margin: 0 3% 3% 0; }
    #product .list>ul>li:nth-child(4n){ margin-right: 3%;}
    #product .list>ul>li:nth-child(3n){ margin-right: 0;}



    #product .view>.details .box{width: 50%;}
    #product .view>.details .box>.tit {padding-bottom: 0; }
    #product .view>.details .box>.tit>h3{font-size: 3.6rem;}
    #product .view>.details .box>.tit>span{font-size: 2rem;}

    #product .view>.details .focus{ width: 50%;}

    #product .view>.details .consulting>a { width: 220px; height: 50px; line-height: 50px; font-size: 1.8rem;}










}

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

    #search{margin-top: -180px;height: 180px; }

    #catalog .list>ul>li{width: 48%; margin-right: 0;}
    #catalog .list>ul>li:nth-child(even){ float: right}
    #catalog .list>ul>li .tit{ font-size: 2rem;}
    #product .catalog>.details {padding: 20px 0;}
    #product .catalog>.details>.con>.txt{ -webkit-line-clamp: 2; font-size: 1.2rem; line-height: 2rem;}

    #product .catalog>.nav>.swiper-container .swiper-slide>a{ font-size: 1.6rem;}
    #product .catalog>.nav>.prev, #product .catalog>.nav>.next{width: 30px;}

    #product .list>ul>li .tit>h4{ font-size: 1.4rem; }


    #product .view>.details .box>.describe{ margin: 15px 0;}


    #product .view>.details .box>.tit>h3{font-size: 3.2rem;}
    #product .view>.details .box>.tit>span{font-size: 1.8rem;}






}

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

    #product .catalog>.details>.con>.txt{display: none;}

    #product .catalog>.nav>.prev, #product .catalog>.nav>.next{  display: none; }
    #product .catalog>.nav>.swiper-container-horizontal>.swiper-scrollbar{display: block;}

    #product .catalog>.nav>.swiper-container .swiper-slide>a{ font-size: 1.4rem;}

    #product .list>ul>li{width: 48%; margin-right: 0; }
    #product .list>ul>li:nth-child(4n){ margin-right: 0;}
    #product .list>ul>li:nth-child(even){ float: right;}

    #product .view>.details{ padding: 60px; }

    #product .view>.details .box{width: 100%; float: none; padding: 0; text-align: center; }
    #product .view>.details .focus{ width:100%; float: none; }

    #product .view>.details .consulting{ position: relative;z-index: 3; left: 0;bottom: 0; text-align: center; padding-top: 20px; }








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



    #search{ width: 65%; margin-top: -140px; height: 140px;}
    #search .form{height:50px;}
    #search .form input[type="text"]{ height:50px;line-height:50px;}
    #search .form button{  width:50px;height:50px;  }
    #search .form button:after{font-size: 2rem;}

    #search .keyword>a{font-size: 1.4rem;}
    #product{ padding-top: 0;}
    #product .catalog{background: #fff; padding-top: 50px;}
    #product .catalog>.details>.con>.tit{font-size: 3rem;}
    #product .catalog>.details>.con>.consulting>a { width: 160px; height: 40px; line-height: 40px; font-size: 1.4rem;}

    #product .catalog>.nav>.swiper-container .swiper-slide>a{ padding: 20px 0;}

    #product .type>ul>li{display: block; float: none;}
    #product .type>ul>li>a{display: block;padding:6px 0; margin-right: 0; font-size: 1.4rem; border-bottom: 1px solid #ddd; }
    #product .type>ul>li:last-of-type>a{border-bottom: 0;}


    #product .view>.tag>.nav{display:none;}
    #product .view>.tag>.container{ margin-top: 30px;}
    #product .view>.tag>.container .hide{display:block;}
    #product .view>.tag>.container .cert>.list>a{float:none;width:100%; margin-bottom:2%;padding-right:0;}
    #product .view>.tag>.container .pdf>.list>a{float:none;width:100%; margin-bottom:2%;padding-right:0;}

    #product .view>.tag>.container .title{display:block;}


}

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

    #product .catalog>.details>.con>.tit{font-size: 2.4rem;}
    #product .catalog>.details>.con>.consulting>a { width: 140px;}
}



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

    #product { padding: 50px 0; }

    #search .keyword>a{font-size: 1.2rem;}

    #catalog .list>ul>li{width: 100%; float: none!important;}

    #product .catalog>.details{padding:30px;}
    #product .catalog>.details>.img{width: 100%; float: none;}
    #product .catalog>.details>.con{ width: 100%; float: none;padding: 0;}

    #product .search>.keyword{ font-size: 1.4rem;}
    #product .search>.back>a {padding: 8px 25px; font-size: 1.2rem;}


    #product .list{padding: 40px 0;}

    #product .list>ul>li{float: none!important; width: 100%; }


}


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

    #search{ background: #999; padding: 5px 0; width: 100%; margin-top: 0; height: auto; }

    #search .form{height:40px; border-radius: 0; background: none;}
    #search .form input[type="text"]{height:40px;line-height:40px; padding-left: 20px; color: #fff; text-align:left;border:none; font-size:1.4rem;}
    #search .form input::-webkit-input-placeholder{ color:#fff;}
    #search .form button{ width:40px;height:40px;}
    #search .form button:after{font-size: 1.8rem; }

    #search .keyword{ text-align: left; padding: 10px 0; width: 90%; border-top: 1px solid rgba(255,255,255,.2);}
    #search .keyword>a{color: #ddd;}



}