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

#catalog{ position: relative; padding: 100px 0; margin: 0 auto;}
#catalog>.container{margin: 0 auto;}
#catalog>.container .item{display: block; float: left;  width: 50%; box-sizing: border-box; background: #f2fafb;overflow: hidden; border-bottom: 5px solid #fff; border-right: 5px solid #fff; transition: all .35s;}
#catalog>.container .item:nth-child(2n){border-right: 0;}
#catalog>.container .item>a{ position: relative; display: block; text-align: center; box-sizing: border-box;padding: 80px 0;}
#catalog>.container .item>a>.ico{transition: all .35s;}
#catalog>.container .item>a>.ico>img{width: 140px;height: auto;}
#catalog>.container .item>a>.tit{ font-size: 3rem; color: rgba(0,91,97,1);font-weight: bold;transition: all .35s;}
#catalog>.container .item>a>.more{position: absolute;z-index: 20; right: 0;bottom: -60px; width:60px;height: 60px; line-height: 60px; color: #fff; text-align: center; transition: all .5s;}
#catalog>.container .item>a>.more>i{font-size: 3rem;transition: all .35s;}
#catalog>.container .item:hover{background: rgba(0,91,97,1); background:linear-gradient(to right bottom,rgba(0,91,97,1),rgba(14,189,201,1));}
#catalog>.container .item>a:hover .more{ bottom: 0; background: rgba(0,0,0,.8);}
#catalog>.container .item>a:hover .tit{color: #fff; transform:translateY(10px); font-weight: normal;}
#catalog>.container .item>a:hover .ico{transform:scale(1.16);}

#product{ position: relative; margin: 0 auto;}
#product>.divider{position: absolute;z-index: 1; top: 0; left: 25%;width: 1px;height: 100%; box-sizing: border-box; background: #ddd;content: '';}
#product>.container{ position: relative; margin: 0 auto;}
#product>.container .prolist{ position:relative;z-index: 80;top: 0;left:0; display: block; width: 25%; box-sizing: border-box; text-align: left;}
#product>.container .prolist>ul{display: block;}
#product>.container .prolist>ul>li{ position: relative; display: block; border-bottom: 1px solid #ddd;}
#product>.container .prolist>ul>li>span.on{position: absolute;z-index: 30;right: 0; top: 0; cursor: pointer; text-align: center; width:80px;height: 120px; line-height: 120px; color: rgba(14,189,201,1); transition: all .3s; }
#product>.container .prolist>ul>li>span.on>i{font-size: 2rem; font-weight: bold;}
#product>.container .prolist>ul>li.active>span.on{ color: rgba(255,255,255,1);  }
#product>.container .prolist>ul>li.active>a{ font-weight: bold; background: rgba(0,91,97,1); color: #fff;}
#product>.container .prolist>ul>li>a{ position: relative; display: block; font-size: 1.8rem; padding: 30px 0 30px 100px;}
#product>.container .prolist>ul>li>a>img{ display: inline-block;vertical-align: center; height: 60px;width: auto; margin-right: 10px;}
#product>.container .prolist>ul>li>div.show{display: block;}
#product>.container .prolist>ul>li>div{display: none; padding: 30px 0 30px 100px; background: #f7f7f7;}
#product>.container .prolist>ul>li>div>a{ position: relative; display: block;padding: 20px 15px; font-size: 1.6rem; transition: all .35s;}
#product>.container .prolist>ul>li>div>a:after{position: absolute;z-index: 5; left: 0;top: 50%; margin-top: -3px; width: 6px;height: 6px; border-radius: 100%; border: 1px solid transparent; background: rgba(0,91,97,1);content: ''; transition: all .35s;}
#product>.container .prolist>ul>li>div>a:hover:after{ background: none; border: 1px solid rgba(0,91,97,1);}

#product>.container .w100{width: 100% !important; }
#product>.container .display{width: 75%; box-sizing: border-box; padding:0 100px;}
#product>.container .display>.type{text-align: left;font-size: 2.4rem; font-weight: bold; padding: 50px 0 20px 0; color: rgba(0,91,97,1); border-bottom: 1px solid #ddd; }
#product>.container .display>.type>a{display: inline-block;color: rgba(0,91,97,1);}
#product>.container .display>.list{ text-align:left; padding: 50px 0;}
#product>.container .display>.list>ul{margin: 0 auto;}
#product>.container .display>.list>ul>li{display: block;float: left;width: 31.33%;margin-right: 3%; margin-bottom: 3%; box-sizing: border-box;border: 1px solid #ddd;}
#product>.container .display>.list>ul>li:nth-child(3n){margin-right: 0;}
#product>.container .display>.list>ul>li>a{ position: relative; display: block;}
#product>.container .display>.list>ul>li>a:after{position: absolute;z-index: 32; left: 0;top: 0;width: 100%;height: 100%; opacity: 0; background: rgba(0,91,97,0);content: ''; transition: all .35s;}
#product>.container .display>.list>ul>li .img{text-align: center;overflow: hidden;}
#product>.container .display>.list>ul>li .img>img{width: 100%;height: auto; transition: 1s;}
#product>.container .display>.list>ul>li .tit{text-align: center;font-size: 1.6rem; padding: 20px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;}
#product>.container .display>.list>ul>li:hover .img>img{transform: scale(1.1);}
#product>.container .display>.list>ul>li:hover a:after{opacity: 1;}

#product>.keyword{ text-align: center;margin: 0 auto;padding: 50px 0; font-size: 1.4rem; color: #666;}
#product>.keyword>span{display: inline-block;font-size: 1.6rem; font-weight: bold; color: rgba(0,91,97,1);}

#product>.container .display>.list>ul>li .tit>em.searHeight{color: rgba(14,189,201,1); font-style: normal; text-decoration: none;}


#product>.path{padding: 130px 0 30px 0; background: #f7f7f7; font-size: 1.4rem; color: #999;}
#product>.path>.route{width: 70%; box-sizing: border-box;padding-left: 7%;}
#product>.path>.route a{display: inline-block;color: #999;transition: all .35s;}
#product>.path>.route a:hover{color: rgba(0,91,97,1);}
#product>.path>.back{width:30%; box-sizing: border-box;padding-right: 7%; text-align: right;}
#product>.path>.back>a{display: inline-block; padding: 10px 30px; font-size: 1.6rem; color: rgba(14,189,201,1); border: 2px solid rgba(14,189,201,1); border-radius: 5px; transition: all .35s;}
#product>.path>.back>a:hover{background: rgba(14,189,201,1); color: #fff;}

#product>.view{margin: 0 auto; padding: 50px 0;}
#product>.view .title{text-align: center; font-size: 4rem; color: #333; padding: 30px 0; margin: 0 auto;}
#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 .focus .swiper-pagination-bullet-active{ background: rgba(0,91,97,1) !important;}

#product>.view .tags{  box-sizing: border-box; margin: 0 auto; padding-top: 50px;}
#product>.view .tags .tab-nav{text-align: left; background: #f7f7f7; padding: 0 30px;}
#product>.view .tags .tab-nav>ul{ width: 86%; max-width: 1280px; margin: 0 auto;}
#product>.view .tags .tab-nav>ul>li{ position: relative; display: inline-block;vertical-align: top; padding: 20px 50px; transition: all .35s;}
#product>.view .tags .tab-nav>ul>li>a{ font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s;}
#product>.view .tags .tab-nav>ul>li.active:after{width: 100%;}
#product>.view .tags .tab-nav>ul>li.active:before{opacity: 1;}
#product>.view .tags .tab-nav>ul>li.active{background: rgba(0,91,97,1);}
#product>.view .tags .tab-nav>ul>li.active a{color: rgba(255,255,255,1);}
#product>.view .tags .tab-box{ width: 86%;max-width: 1280px; margin: 0 auto; padding: 50px 0;}
#product>.view .tags .tab-box>.tab-item{ display:none; text-align: left;}
#product>.view .tags .tab-box>.current{display: block;}
#product>.view .tags .tab-box>.tab-item>.tit{display: none;}
#product>.view .tags .tab-box>.tab-item>.con{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#product>.view .tags .tab-box>.tab-item>.con table{ box-sizing: border-box; width: 100%; border: 1px solid #ddd;}
#product>.view .tags .tab-box>.tab-item>.con table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:5px;}
#product>.view .tags .tab-box>.tab-item>.con img{max-width: 100%;height: auto;}
#product>.view .back{ display: none; box-sizing: border-box; text-align: center; margin: 0 auto;padding-top: 20px;}
#product>.view .back>a{display: block; padding: 10px 0; font-size: 1.6rem; color: rgba(14,189,201,1); border: 2px solid rgba(14,189,201,1); border-radius: 5px; transition: all .35s;}
#product>.view .back>a:hover{background: rgba(14,189,201,1); color: #fff;}



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


    #product>.divider{ left: 28%;}
    #product>.container .prolist{ width: 28%;}
    #product>.container .display{width: 72%;}


}

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

    #catalog>.container .item>a{ padding: 60px 0;}
    #catalog>.container .item>a>.ico>img{width: 120px;}


    #product>.divider{ left: 30%;}
    #product>.container .prolist{ width:30%;}
    #product>.container .prolist>ul>li>a{ font-size: 1.6rem;}
    #product>.container .prolist>ul>li>a>img{ height: 54px;}
    #product>.container .prolist>ul>li>span.on{width:70px;height: 114px; line-height: 114px;}
    #product>.container .prolist>ul>li>span.on>i{font-size: 1.8rem;}
    #product>.container .prolist>ul>li>div>a{ font-size: 1.4rem;}
    #product>.container .display{width: 70%;padding: 0 80px;}
    #product>.container .display>.list>ul>li .tit{font-size: 1.4rem;}


}

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

    #catalog>.container .item>a>.tit{font-size: 2.4rem;}
    #catalog>.container .item>a>.more{bottom: -40px; width:40px;height: 40px; line-height: 40px;}
    #catalog>.container .item>a>.more>i{font-size: 2.4rem;}

    #product>.divider{display: none;}
    #product>.container .prolist{float: none; width: 100%; background: #f7f7f7;}
    #product>.container .prolist>ul>li{ position: relative; float: left; width: 20%; background: #fff; border-right: 1px solid #ddd;}
    #product>.container .prolist>ul>li>span.on{display: none;}
    #product>.container .prolist>ul>li>a{  font-size: 1.4rem; padding:20px; text-align: center;}
    #product>.container .prolist>ul>li>a>img{ display: block; height: 60px;margin: 0 auto 10px auto;}
    #product>.container .prolist>ul>li>div{ position: absolute;z-index: 80; left: 0; padding: 30px; background: rgba(14,189,201,1); }
    #product>.container .prolist>ul>li>div.show{display: none;}

    #product>.container .display{ float: none; width: 100%;padding: 0 40px;}
    #product>.container .display>.type{font-size: 2rem;}

    #product>.view .focus .swiper-slide:after{background-size:62% auto; }

    #product>.view .tags .tab-nav>ul>li{ padding: 20px 30px;}
    #product>.view .tags .tab-nav>ul>li>a{ font-size: 1.6rem; }
    #product>.view .tags .tab-box>.tab-item>.con{ font-size: 1.4rem; line-height: 2.4rem;}




}

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

    #catalog>.container .item>a{ padding: 50px 0; text-align: center;}
    #catalog>.container .item>a>.tit{padding-left: 0;}

    #catalog>.container .item>a:hover .ico{transform:scale(1.1);}


}



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

    #catalog{ padding: 60px 0;}
    #catalog>.container .item>a>.tit{font-size: 2rem;}

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

    #product>.view .title{font-size: 3rem;}
    #product>.view .focus{ width: 100%;}
    #product>.view .tags{padding: 0;}
    #product>.view .tags .tab-nav{display: none;}
    #product>.view .tags .tab-box{ width: 100%;max-width: inherit;}
    #product>.view .tags .tab-box>.tab-item{ display:block;}
    #product>.view .tags .tab-box>.tab-item>.tit{ position: relative; display: block; box-sizing: border-box; border-bottom: 1px solid #eee; cursor: pointer; font-size: 1.6rem; padding: 20px 0 20px 80px;}
    #product>.view .tags .tab-box>.tab-item>.tit:after{position: absolute;z-index: 1; left: 60px; top: 50%; margin-top: -8px; width: 3px;height: 16px; background: rgba(0,91,97,1);content: '';}
    #product>.view .tags .tab-box>.tab-item:first-child>.tit{border-top: 1px solid #eee;}
    #product>.view .tags .tab-box>.tab-item>.tit>i{ position: absolute;z-index: 10; right: 80px; top: 50%; margin-top: -10px; width: 20px;height: 20px; line-height: 20px; font-size: 1.8rem; color: #ccc; margin-right: 10px; transition: all .35s;}
    #product>.view .tags .tab-box>.tab-item>.tit.active{background: #f2fafb; color: rgba(0,91,97,1);}
    #product>.view .tags .tab-box>.tab-item>.tit.active>i{ transform: rotate(180deg);}
    #product>.view .tags .tab-box>.tab-item>.con{display: none; padding: 50px 80px;}
    #product>.view .tags .tab-box>.tab-item>.con table td{font-size: 1.4rem;}
    #product>.view .back{display: block;}

}

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

    #catalog>.container .item>a>.tit{font-size: 1.8rem;}

}

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

    #catalog{ padding: 30px 0;}
    #catalog>.container .item>a{ padding: 30px 0;}
    #catalog>.container .item>a>.tit{font-size: 1.3rem; font-weight: normal;}


    #product>.container .display{ padding: 0 20px;}
    #product>.container .display>.list>ul>li{width: 100%; float: none;}
    #product>.container .display>.list>ul>li:nth-child(even){float: none;}


    #product>.view .tags .tab-box>.tab-item>.tit{ padding: 20px 0 20px 60px;}
    #product>.view .tags .tab-box>.tab-item>.tit:after{left: 45px;}
    #product>.view .tags .tab-box>.tab-item>.tit>i{right: 60px;}
    #product>.view .tags .tab-box>.tab-item>.con{display: none; padding: 50px 60px;}


    #product>.view .tags .tab-box>.tab-item>.con{ font-size: 1.4rem; line-height: 2.4rem;}
    #product>.view .tags .tab-box>.tab-item>.con table td{font-size: 1.2rem;}



}

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

    #catalog>.container .item>a>.tit{font-size: 1.2rem;}

    #product>.container .prolist>ul>li{width: 50%;}
    #product>.container .prolist>ul>li>a{  font-size: 1.2rem; padding: 10px;}
    #product>.container .prolist>ul>li>a>img{ height: 50px;}

    #product>.path>.route{width: 100%; float: none; padding: 0 7%;}
    #product>.path>.back{ display: none; }


    #product>.view .tags .tab-box>.tab-item>.tit{ padding: 20px 0 20px 40px; font-size: 1.4rem;}
    #product>.view .tags .tab-box>.tab-item>.tit:after{left: 30px;}
    #product>.view .tags .tab-box>.tab-item>.tit>i{right: 20px; font-size: 1.4rem;}
    #product>.view .tags .tab-box>.tab-item>.con{display: none; padding: 30px;}


}