@charset "utf-8";


#catalog{ margin:0 auto;padding:50px 0 100px 0;}
#catalog .container>.list{margin:0 auto;}
#catalog .container>.list>ul{margin:0 auto;}
#catalog .container>.list>ul>li{display:block; float:left; width:48%; margin-bottom:2%;box-sizing:border-box; transition:all .35s;}
#catalog .container>.list>ul>li:nth-child(even){float:right;}
#catalog .container>.list>ul>li>a{display:block; background:#fff; border: 1px solid #ddd; padding:40px;box-sizing:border-box;}
#catalog .container>.list>ul>li .img{ width: 300px; margin:0 auto;}
#catalog .container>.list>ul>li .img>img{width:100%;height:auto; transition:all 1s;}
#catalog .container>.list>ul>li .tit{ position:relative; text-align:center;padding-bottom:20px;font-size:2.8rem;color:#333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#catalog .container>.list>ul>li .tit:after{position:absolute;z-index:4; left:50%; bottom:-10px; margin-left:-1px; width:2px; height:2px;opacity:0; background:rgba(255,64,0,1);content:''; transition:all .35s;}
#catalog .container>.list>ul>li:hover{ box-shadow:0 0 15px rgba(0,0,0,.1);}
#catalog .container>.list>ul>li:hover .tit:after{bottom:0; margin-left:-20px; width:40px;opacity:1;}
#catalog .container>.list>ul>li:hover .tit{transform:translateY(18px);}
#catalog .container>.list>ul>li:hover .img>img{transform:scale(1.1);}

#product .container{margin:0 auto; padding:30px 0;}
#product .container>.list{margin: 0 auto;}
#product .container>.list>ul{margin:0 auto;}
#product .container>.list>ul>li{ position: relative; display:block; float:left; width:23%; margin-bottom:2.66%; margin-right: 2.66%; box-sizing:border-box;overflow: hidden; transition:all .35s;}
#product .container>.list>ul>li:nth-child(4n){ margin-right: 0;}
#product .container>.list>ul>li>a{ position: relative; display:block; background:#fff; border: 1px solid #ddd; padding:40px;box-sizing:border-box;}
#product .container>.list>ul>li>a:after{position: absolute;z-index: 3; left: 0;top: 0;width: 100%;height: 100%;opacity: 0; background: rgba(0,0,0,.6); content: ''; transition: all .35s;}
#product .container>.list>ul>li>a:before{position: absolute;z-index: 20; left: 50%;top: 0; opacity: 0; margin-left: -30px; width: 60px;height: 60px; line-height: 60px; background: rgba(255,255,255,1); box-shadow: 2px 2px 10px rgba(0,0,0,.3); border-radius: 100%; font-size: 3.6rem; color: rgba(255,64,0,1); text-align: center; font-family: iconfont; content: '\e61a'; transition: all .35s;}
#product .container>.list>ul>li .img{ position: relative; width: 100%; margin:0 auto;overflow: hidden; transition:all 1s;}
#product .container>.list>ul>li .img>img{width:100%;height:auto; transition:all 1s;}
#product .container>.list>ul>li .tit{ position:relative; text-align:center;padding-bottom:20px;font-size:1.6rem;color:#333;transform:translateY(40px);overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#product .container>.list>ul>li:hover{ box-shadow:0 0 15px rgba(0,0,0,.1);}
#product .container>.list>ul>li:hover .img{transform:scale(1.2);}
#product .container>.list>ul>li:hover>a:after{opacity: 1;}
#product .container>.list>ul>li:hover>a:before{opacity: 1;top: 32%;}
#product .container>.list>ul>li:hover .tit{z-index: 20; color: #fff; transform:scale(1.3) translateY(-40px);}

#product .container>.view{margin: 0 auto;padding: 50px 0;}
#product .container>.view>.title{font-size: 4rem; font-weight: 700; color: #000; text-align: center; line-height: 160%;}
#product .container>.view>.focus{ position: relative; width: 800px; vertical-align: center; box-sizing: border-box; padding: 50px; margin: 0 auto;}
#product .container>.view>.focus .tit{ display: none; position: absolute;z-index: 4;left: 0;bottom: 40px;font-size:1.4rem; color: #444;padding: 8px 20px; border: 1px solid #eee; border-radius: 5px;}
#product .container>.view>.focus .swiper-pagination {position: relative!important; padding-top: 10px;}
#product .container>.view>.focus .swiper-pagination-bullet {width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,12px)) !important;height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,12px)) !important;}
:root{--swiper-theme-color:rgba(255,64,0,1)!important;}


#product .container>.view>.tags{padding: 30px 0;margin: 0 auto;}
#product .container>.view>.tags>.item{padding-bottom: 30px; text-align: left;}
#product .container>.view>.tags>.item>.tit{ position: relative; font-size: 1.8rem; font-weight: 600; color: #333; border: 1px solid #ddd; padding:10px 20px;}
#product .container>.view>.tags>.item>.tit:after{position: absolute; left: 10px;top: 50%; margin-top: -8px; width: 3px;height: 16px; background: rgba(255,64,0,1);content: '';}
#product .container>.view>.tags>.item>.box{padding:50px 10px;text-align: left;font-size: 1.6rem; color: #666; line-height: 3rem;}
#product .container>.view>.tags>.item>.box img{max-width: 100%; height: auto;}
#product .container>.view>.pageurl{ text-align: left; border-top: 1px solid #eee;padding: 30px;}
#product .container>.view>.pageurl>a{display: inline-block; border: 1px solid #ddd;padding: 10px 30px;font-size: 1.4rem; color: #999; transition: all .35s;}
#product .container>.view>.pageurl>a>i{display: inline-block; color: rgba(255,64,0,1); vertical-align: top; margin-right: 8px;}
#product .container>.view>.pageurl>a:hover{background: rgba(255,64,0,1); box-shadow: 2px 2px 12px rgba(0,0,0,.2); color: #fff;}
#product .container>.view>.pageurl>a:hover i{color: #fff;}












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


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



}

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

    #product .container>.list>ul>li>a:before{margin-left: -20px; width: 40px;height: 40px; line-height: 40px; font-size: 2.4em; }
    #product .container>.list>ul>li:hover .tit{transform:scale(1.1) translateY(-30px);}
    #product .container>.view>.title{font-size: 3.2rem;}
    #product .container>.view>.focus{ width: 500px; }
    #product .container>.view>.tags>.item>.box{font-size: 1.4rem; line-height: 2.4rem;}


}

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

    #product .container>.list>ul>li{  float:none; width:100%; margin-right: 0; margin-bottom: 20px;}
    #product .container>.list>ul>li:nth-child(4n){ margin-right: 0;}
    #product .container>.view>.title{font-size: 2.4rem;}
    #product .container>.view>.focus{ width: 100%; }
    #product .container>.view>.focus .swiper-pagination-bullet {width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px)) !important;height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px)) !important;}




}