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



#catalog{ position: relative;z-index: 5; background: #fff; padding-bottom: 80px; margin: 0 auto;transition: all .35s}
#catalog.active {transform: translateX(-220px);}

#catalog .list{ margin: 0 auto;}
#catalog .list>ul{margin: 0 auto;}
#catalog .list>ul>li{ position: relative; display: block; width: 100%; box-sizing: border-box; background: #eee; margin-bottom: 50px;}
#catalog .list>ul>li>.type{ width: 24%; text-align: center; box-sizing: border-box; background: rgb(1 116 197); transition: all .35s; }
#catalog .list>ul>li>.type>a{display: block; position: relative; padding: 80px;overflow: hidden;}
#catalog .list>ul>li>.type>a:after{position: absolute;z-index: 1; right: 0;bottom: -35px; font-size: 1.1rem; height: 35px; line-height: 35px; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.3); text-transform: uppercase; padding: 0 20px; color: rgba(255,255,255,1); opacity: 0; content: 'more';transition: all .35s;}
#catalog .list>ul>li>.type .txt{font-size: 1.8rem; color: #fff; transition: all .35s;}
#catalog .list>ul>li>.type:hover{background: rgba(53,59,73,1);}
#catalog .list>ul>li>.type>a:hover:after{bottom: 0; opacity: 1; }
#catalog .list>ul>li>.box{ position: absolute;z-index: 3; right: 0;top: 0; width: 76%; height: 100%; overflow: hidden; }
#catalog .list>ul>li:nth-child(even) .type{ float: right;}
#catalog .list>ul>li:nth-child(even) .type>a:after{right: auto; left: 0; border-right: 1px solid rgba(255,255,255,.3); border-left: 0;}
#catalog .list>ul>li:nth-child(even) .box{ right: auto;left: 0;}
#catalog .list>ul>li>.box .swiper-container{ height: 100%;}
#catalog .list>ul>li>.box .button-next{position: absolute;z-index: 3;right: 0;top:50%; margin-top: -20px; cursor: pointer; background: rgba(0,0,0,.4); border-radius: 8px 0 0 8px; width: 30px;height: 40px; line-height: 40px;text-align: center; transition: all .35s;}
#catalog .list>ul>li>.box .button-next>i{font-size: 1.8rem; color: rgba(255,255,255,1);}
#catalog .list>ul>li>.box .button-next:hover{ display: inline-block; background: rgba(0,0,0,.6);}
#catalog .list>ul>li>.box .button-prev{position: absolute;z-index: 3;left: 0;top:50%; margin-top: -20px; cursor: pointer; background: rgba(0,0,0,.4); border-radius:0 8px 8px 0 ; width: 30px;height: 40px; line-height: 40px;text-align: center; transition: all .35s;}
#catalog .list>ul>li>.box .button-prev>i{font-size: 1.8rem; color: rgba(255,255,255,1);}
#catalog .list>ul>li>.box .button-prev:hover{ display: inline-block; background: rgba(0,0,0,.6);}
#catalog .list>ul>li>.box .swiper-button-disabled{display:none;}
#catalog .list>ul>li>.box .swiper-slide>a{display: block;}
#catalog .list>ul>li>.box .swiper-slide>a .img{text-align: center; margin-top: 15px;background: #fff;}
#catalog .list>ul>li>.box .swiper-slide>a .img>img{
    /*width:240px;*/
    width: 290px;
    height: auto;}
#catalog .list>ul>li>.box .swiper-slide>a .tit{text-align: center; padding: 8px 0; transition: all .35s; background: #fff;
    border-top: 1px solid #ccc;}
    .swiper-pagination-fraction {
    bottom: 12px!important;
}
#catalog .list>ul>li>.box .swiper-slide>a .tit>h3{font-size: 1.6rem; color: rgba(53,59,73,1);transition: all .35s;}
#catalog .list>ul>li>.box .swiper-slide>a .tit>span{font-size: 1.3rem; color: #666;}
#catalog .list>ul>li>.box .swiper-slide>a:hover .tit{transform: translateY(-8px);}
#catalog .list>ul>li>.box .swiper-slide>a:hover .tit>h3{color: rgb(1 116 197);}


#product{ margin: 0 auto;transition: all .35s}
#product.active {transform: translateX(-220px);}

#product .catalog{ 
    background: rgb(1 116 197);
    /*background: rgba(53,59,73,1);*/
    padding: 30px; box-sizing: border-box;}
#product .catalog>.box{width: 80%; box-sizing: border-box; padding-right:50px;}
#product .catalog>.box>.ico>img{height: 140px; width: auto; }
#product .catalog>.box>.con{width: 80%; box-sizing: border-box; text-align: left;  padding-top: 10px; padding-left: 20px;}
#product .catalog>.box>.con>.tit{font-size: 2rem; color: rgba(255,255,255,1);}
#product .catalog>.box>.con>.txt{ padding-top: 8px; color: rgba(255,255,255,1); 
/*line-height: 1.8rem; font-size: 1.3rem;*/
line-height: 3rem;
/*font-size: 1.6rem;*/
font-size: 1rem;
}
#product .catalog>.url{width: 20%; box-sizing: border-box; padding-top: 10px; text-align: right;}
#product .catalog>.url>a{display:inline-block; margin: 0 8px; text-align: center;
/*padding: 20px 16px; */
padding: 13px 0px;
background: rgb(1 116 197); border-radius: 3px;
/*box-shadow: 0 2px 5px rgba(0,0,0,.2);*/
box-shadow: 0 2px 5px rgba(0,0,0,0.8);
color: #fff;
/*font-size: 1.6rem; */
font-size: 1.2rem; 
transition: all .35s; }
#product .catalog>.url>a>i{ display: block;vertical-align: top;  margin-bottom: 10px; font-size: 4rem;}
#product .catalog>.url>a:hover{background: rgba(255,255,255,1); color: rgb(1 116 197);}


#product .keyword{ text-align:left; font-size: 1.6rem; color: #999;}
#product .keyword>span{color: rgb(1 116 197);}

#product .list{margin: 50px auto 80px;}
#product .list>ul{margin:0 auto;}
#product .list>ul>li{position:relative;display:block; float:left; width:23.5%; overflow:hidden; box-sizing: border-box; 
/*padding:10px;*/
margin-right:2%; margin-bottom:2%; border:1px solid #ddd; transition:all .35s;}
#product .list>ul>li:nth-of-type(4n){ margin-right:0;}
#product .list>ul>li>a{display:block;}
#product .list>ul>li>a .img{ text-align:center; transition:all .35s;}
#product .list>ul>li>a .img>img{ width:100%;height:auto;}
#product .list>ul>li>a .tit{ text-align: center;padding:0 50px;
/*font-size: 2.2rem;*/
/*font-size: 1.6rem;*/
font-size: 1.3rem;
/*font-size:1.8rem;*/
color:rgba(53,59,73,1);overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#product .list>ul>li>a .tit_sub{text-align:center;padding:5px 50px 20px 50px; 
/*color:#0174c5;font-size:1rem;*/
color: #8d9397;font-size: 1.1rem;
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#product .list>ul>li>a:hover .img{transform:translateY(-6px)}
#product .list>ul>li:hover{ box-shadow:0 3px 8px rgba(0,0,0,.1);}
#product .loadmore{ padding:50px 0;margin:0 auto 50px auto; text-align:center;}
#product .loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#product .loadmore>a:hover{ background:rgb(1 116 197); border:1px solid rgb(1 116 197); color:#fff;}





#product .view{margin:0 auto;  padding: 80px 0; position:relative;}
#product .view .title{ position:relative;z-index:3; margin:0 auto;}
#product .view .title>h3{
    font-size: 2.7rem;
    /*font-size: 4.6rem;*/
    color: rgb(1 116 197);}
#product .view .title>span{ 
    font-size: 1.9rem;
    /*font-size: 3.2rem;*/
    color: rgba(100,100,100,1);}
#product .view .content{ padding: 50px 0; margin: 0 auto;}
#product .view .focus{ position:relative; width:36%; max-width: 600px; text-align:center;}
#product .view .focus img{ width:100%;height:auto;}
#product .view .focus .swiper-container{ margin:0 auto;}
#product .view .focus .swiper-pagination{ position:relative; text-align:center;margin:0 auto;}
#product .view .focus .swiper-pagination .swiper-pagination-bullet{width:40px;height:2px; margin:5px; display: inline-block;border-radius: 0;background: rgba(53,59,73,1);opacity: .2;}
#product .view .focus .swiper-pagination .swiper-pagination-bullet-active{ background:rgb(1 116 197);opacity:1;}
#product .view .box{ width:64%; box-sizing: border-box; padding-right: 50px; text-align:left;}
#product .view .box>.item{ margin-bottom: 25px; text-align:left;}
#product .view .box>.item>.tit{ position: relative; box-sizing: border-box;  color:rgb(1 116 197);}
#product .view .box>.item>.tit>h3{display: inline-block;background: rgb(1 116 197); border-radius: 3px; color: #fff;
font-size: 1.1rem;
/*font-size:1.8rem; */
padding: 5px 20px; font-weight: normal; }
#product .view .box>.item>.con{ padding:20px 5px; 
font-size:1.6rem;
color:#333; line-height: 2.8rem;}
#product .view .box>.item>.con a>i{font-size: 3rem; margin-right: 10px; vertical-align: top; color: rgb(1 116 197);}
#product .view>.pageurl{ padding:50px 0;margin:0 auto; border-top:1px solid #eee; text-align:center;}
#product .view>.pageurl>a{display:inline-block; padding:10px 90px; font-size:1.2rem; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#product .view>.pageurl>a:hover{ background:rgb(1 116 197); border:1px solid rgb(1 116 197); color:#fff;}


#quickmenu{ position:fixed; width:270px; right:-220px; top:36%;text-align:left; cursor:pointer;  z-index:999;}
#quickmenu a{ display:block; position:relative; height:50px; line-height:50px; border-bottom: 2px solid rgba(255,255,255,1); background:#eee; font-size:1.4rem; padding-right:10px; width:100%; box-sizing: border-box; overflow:hidden;  cursor:pointer; right:0; font-style:normal;}
#quickmenu a>em{ display:block; float:left; width:50px; background:rgb(1 116 197); color:#fff; font-size:1.4rem; text-align:center; margin-right:10px;; font-style:normal;}
#quickmenu a:hover{ text-decoration:none; color:rgba(53,59,73,1);  }
#quickmenu a:hover em{ background:rgba(53,59,73,1); font-style:normal; }




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

    #product .catalog>.box{width: 75%;}
    #product .catalog>.url{width: 25%;}
    #product .catalog>.box>.con{width: 76%;}

}




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

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


    #catalog .list>ul>li>.type{ width: 28%; }
    #catalog .list>ul>li>.box{  width: 72%; }



}



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

    #product .list>ul>li{width:32%;}
    #product .list>ul>li:nth-of-type(4n){ margin-right:2%;}
    #product .list>ul>li:nth-of-type(3n){ margin-right:0;}

}




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

    #product .view .title>h3{font-size: 4.2rem;}
    #product .view .title>span{ font-size: 2.8rem;}

}

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

    #product .catalog>.box{width: 70%;}
    #product .catalog>.box>.con{width: 70%;}
    #product .catalog>.url{width: 30%;}
    #product .catalog>.url>a{font-size: 1.4rem; }
    #product .catalog>.url>a>i{ font-size: 3.2rem;}

}

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

    #catalog .list>ul>li>.type>a {padding: 40px;}



    #product .catalog>.box{ float: none; width: 100%; padding-right:0;}
    #product .catalog>.box>.ico{width: 20%;}
    #product .catalog>.box>.ico>img{width: 100%; height: auto; }
    #product .catalog>.box>.con{width: 80%; padding-left: 0; padding-right: 20px;}
    #product .catalog>.box>.con>.txt{ line-height: 1.6rem; font-size: 1.2rem;}

    #product .catalog>.url{ float: none; width: 100%; text-align: left;  box-sizing: border-box; padding-left: 20%;}
    #product .catalog>.url>a{display:inline-block; text-align: left; font-size: 1.6rem; margin-left: 0; padding: 8px 16px;}
    #product .catalog>.url>a>i{ display: inline-block; margin-bottom: 0; margin-right: 10px; font-size: 2.4rem;}


    #product .list>ul>li>a .tit{ padding:0 40px;}
    #product .list>ul>li>a .tit_sub{ padding:5px 40px 20px 40px;}

    #product .view .title{ text-align: center;}
    #product .view .content{ padding: 0;}
    #product .view .focus{  float: none; width:100%; box-sizing: border-box;  margin: 0 auto; }
    #product .view .box{ float: none; width:100%; padding-right: 0;}


}


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

    #catalog .list>ul>li>.type{ width: 30%; }
    #catalog .list>ul>li>.box{  width: 70%; }

    #catalog .list>ul>li>.type>a {padding: 30px;}

}


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

    #catalog .swiper-pagination{bottom: auto;top: 5px; height: 20px;display: none;}
    #catalog .list>ul>li>.type{ width: 100%; float: none; }
    #catalog .list>ul>li>.box{ width: 100%; float: none; position: relative; height: auto; }
    #catalog .list>ul>li>.box .swiper-slide>a .tit{padding: 0 0 20px 0;}
    #catalog .list>ul>li>.box .swiper-slide>a .img{ padding-top: 0;}
    #catalog .list>ul>li>.box .swiper-slide>a .img>img{width:200px;}







    #product .catalog>.box>.ico{width: 100%; float: none; text-align: center; }
    #product .catalog>.box>.ico>img{width: 150px; height: auto; }
    #product .catalog>.box>.con{ float: none; width: 100%; padding: 0; text-align: center;}
    #product .catalog>.url{ text-align: center;padding-left: 0;}
    #product .catalog>.url>a{text-align: center; font-size: 1.4rem;  margin: 0 5px; padding: 10px 20px;}

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


    #product .view .box>.item>.tit>h3{
        font-size: 1.2rem;
        /*font-size:1.6rem;*/
        
    }
    #product .view .box>.item>.con{ font-size:1.4rem; line-height: 2.4rem;}

    #product .view>.pageurl>a{font-size:1.6rem;}



}

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

    #catalog .list>ul>li>.box .swiper-slide>a .tit>h3{font-size: 1.4rem;}
    #catalog .list>ul>li>.box .swiper-slide>a .tit>span{font-size: 1.2rem;}



    #product .catalog{padding:30px  20px;}

    #product .list>ul>li>a .tit{ padding:0 20px;}
    #product .list>ul>li>a .tit_sub{ padding:5px 20px 20px 20px;font-size: 0.8rem!important;}
    #quickmenu{ display:none;}

    #product .view .title>h3{
        font-size: 2.4rem;
        /*font-size: 3.2rem;*/
    }
    #product .view .title>span{ 
        font-size: 1.4rem;
        /*font-size: 2rem;*/
        
    }

    #product .view .box>.item>.tit>h3{display: block}


}



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


    #product .catalog>.url>a{ display: block; margin: 0 0 10px 0; }


    #product .list>ul{
        display: flex;
        flex-wrap: wrap;
    }
    #product .list>ul>li{ float:none; width:49%; margin-bottom: 4%; }
    #product .list>ul>li:nth-child(2n-1){
        margin-right: 6px;
    }
    #product .list>ul>li:nth-child(even){float: none;}
    #product .view{ padding:0;}
    #product .view .wrap{width: 100%;}
    #product .view .box>.item>.con{ font-size:1.3rem; line-height: 2rem;}
    #product .view>.pageurl>a{
        font-size: 1.1rem;
        /*font-size:1.4rem; */
        padding: 10px 50px; }




}

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






}