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

#product .catalog{ 
    background: #00a54f;
    /*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: #00a54f; 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: #00a54f;}


#product .keyword{ text-align:left; font-size: 1.6rem; color: #999;}
#product .keyword>span{color: #00a54f;}

#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:#00a54f; border:1px solid #00a54f; color:#fff;}





#product .view{margin:0 auto;  padding:80px 0 40px 0; position:relative;}
#product .view .title{ position:relative;z-index:3; margin:0 auto;}
#product .view .title>h3{
    font-size: 1rem;
    /*font-size: 4.6rem;*/
    color: #00a54f;
    line-height: 1;
}
#product .view .title>span{ 
    font-size: 0.7rem;
    /*font-size: 3.2rem;*/
    color: rgba(100,100,100,1);}
#product .view .content{ padding: 50px 0; margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
}
#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:#00a54f;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:#00a54f;}
#product .view .box>.item>.tit>h3{display: inline-block;background: #00a54f; border-radius: 3px; color: #fff;
font-size:0.4rem;

/*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: #00a54f;}
#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: 5px 40px;
font-size: 0.4rem;
color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#product .view>.pageurl>a:hover{ background:#00a54f; border:1px solid #00a54f; 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:#00a54f; 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;}
}

@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){
    #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;flex-direction: column;}
    #product .view .focus{  float: none; width:100%; box-sizing: border-box;  margin: 0 auto; }
    #product .view .box{ float: none; width:100%; padding-right: 0;flex-direction: column;}
    
}
@media only screen and (max-width: 780px){
    #product .view{
        padding: 40px 0 40px 0;
    }
    #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: 0.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){
    #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;}
    #product .view .title>h3{
        font-size: 1.2rem;
    }
    #product .view .title>span{ 
        font-size: 0.8rem;
        
    }
    #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 .wrap{width: 100%;}
    #product .view .box>.item>.con{ font-size:1.3rem; line-height: 2rem;}
    #product .view>.pageurl>a{
        font-size: 0.6rem;
        /* font-size: 1.4rem; */
        padding: 5px 40px; }

}