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



#product{margin: 0 auto; padding: 100px 0;}

#catalog{margin: 80px auto; }
#catalog>.img{ width: 40%; height: 330px; overflow:hidden; position:relative; float:right; background:url(/img/pro-cls.jpg) no-repeat center center; background-size:cover;}
#catalog>.img>a{display:flex; justify-content: center; align-items: center; width:100%; height:100%; transition: all .35s;}
#catalog>.img>a>img{  width: auto;height: 80%; transition:all .45s;}
#catalog>.box{width:60%; height:330px; float:left; border:1px solid #eee; border-right:0 none; padding:30px 30px 0 50px; box-sizing:border-box; transition:all .5s;}
#catalog>.box>.tit{font-size:2.6rem; color:#333; transition:all .35s;}
#catalog>.box>ul{margin-top:30px;}
#catalog>.box>ul>li{width:50%; float:left; padding:0 25px 0 0; box-sizing:border-box;}
#catalog>.box>ul>li>a{ position: relative; font-size:16px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 15px;}
#catalog>.box>ul>li>a:after{position: absolute;z-index: 12; left: 0;top: 50%; width: 6px;height: 6px; background: #aec530; border-radius: 100%;transform: translateY(-50%); content: '';transition: all .35s;}
#catalog:nth-child(even) .img{ float: left;}
#catalog:nth-child(even) .box{float: right; border-left:0 none;border-right:1px solid #eee; }
#catalog:hover>.img>a>img{ transform: translateX(30px)}
#catalog:hover>.box{background:#eee;}
#catalog:hover>.box>.tit{color:#1a4499;}


#product{margin: 0 auto; padding-bottom:100px;}
#product>.lists{margin: 0 auto;}
#product>.lists>ul{margin: 0 auto;}
#product>.lists>ul>li{display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%;overflow: hidden; box-sizing: border-box; border: 1px solid #e6e6e6; transition: all .35s;}
#product>.lists>ul>li:nth-child(3n){margin-right: 0;}
#product>.lists>ul>li .img{ width: 100%; overflow: hidden; padding: 10px 0; box-sizing: border-box; background: #fff; text-align: center;}
#product>.lists>ul>li .img>img{width: 80%;height: auto;transition: all 1s;}
#product>.lists>ul>li .box{ width: 100%; text-align: center; padding:0; height: 60px; line-height: 60px; box-sizing: border-box;}
#product>.lists>ul>li .box>.tit{ position:relative;text-align: center; padding: 0 10px; }
#product>.lists>ul>li .box>.tit>h3{ position: relative; font-size:1.4rem; font-weight: normal; color: #444;overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#product>.lists>ul>li:hover{ border-color: #0079c3;  box-shadow: 0 1px 6px rgba(0,0,0,.1);}
#product>.lists>ul>li:hover .img>img{transform: scale(1.1)}
#product>.lists>ul>li:hover .box>.tit>h3{ color: #0079c3; font-weight: bold; transform: translateY(-8px);}




#search{margin: 0 auto; padding: 100px 0;}
#search>.keys{margin: 0 auto 50px auto; padding-bottom: 30px; text-align: center; font-size: 2rem; color: #666; border-bottom: 1px solid #eee;}
#search>.keys>span{font-weight: bold; color: #0079c3; text-decoration: underline;}
#search>.list{margin: 0 auto;}
#search>.list>ul{margin: 0 auto;}
#search>.list>ul>li{display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; box-sizing: border-box; border: 1px solid #ddd; transition: all .35s;}
#search>.list>ul>li:nth-child(3n){margin-right: 0;}
#search>.list>ul>li .img{ width: 100%; overflow: hidden; box-sizing: border-box; background: #fff; text-align: center;}
#search>.list>ul>li .img>img{width: 80%;height: auto;transition: all 1s;}
#search>.list>ul>li .box{ width: 100%; text-align: center; padding:20px; box-sizing: border-box;}
#search>.list>ul>li .box>.tit{ position:relative;text-align: center;}
#search>.list>ul>li .box>.tit:after{ position: absolute;z-index: 10; top: -20px; left: 50%;  transform: translateX(-50%); width:0; height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:10px solid #fff; content: '';}
#search>.list>ul>li .box>.tit>h3{ position: relative; padding-top: 10px; font-size:1.8rem; font-weight: normal; color: #444;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
#search>.list>ul>li:hover{background:#0079c3 ;box-shadow: 0 1px 6px rgba(0,0,0,.1);}
#search>.list>ul>li:hover .img>img{transform: scale(1.1)}
#search>.list>ul>li:hover .box>.tit>h3{border-color: #0079c3; color: #fff;}









#product>.view{text-align: center; margin: 0 auto;}
#product>.view .title{text-align: center; font-size: 3rem; color: #333; padding-bottom: 50px;}
#product>.view .focus{ position: relative;border: 1px solid #eee;padding:0 50px;}
#product>.view .focus .arrow-prev{ position: absolute;z-index: 50; left: 30px; top: 50%;transform: translateY(-50%); width: 50px; height: 50px; line-height: 50px; background: #eee; cursor: pointer; transition: all .35s;}
#product>.view .focus .arrow-prev:hover{background: #0079c3; color: #fff;}
#product>.view .focus .arrow-next{ position: absolute;z-index: 50; right: 30px; top: 50%;transform: translateY(-50%); width: 50px; height: 50px; line-height: 50px; background: #eee; cursor: pointer; transition: all .35s;}
#product>.view .focus .arrow-next:hover{background: #0079c3; color: #fff;}
#product>.view .focus .swiper-pagination{bottom: 20px; font-size: 1.6rem; color: #999;}

#product>.view .tags{text-align: left;margin: 0 auto;padding: 50px 0;}
#product>.view .tags>.item{display: block; padding-bottom: 50px;}
#product>.view .tags>.item>.tit{ position: relative; font-size: 1.6rem; font-weight: bold; color: #333; padding: 15px 24px; background: #f7f7f7; }
#product>.view .tags>.item>.tit:after{position: absolute;z-index: 2; top: 50%; transform: translateY(-50%); left: 10px;width: 4px;height: 24px; background: #0079c3;content: '';}
#product>.view .tags>.item>.con{ position: relative; z-index: 50; font-size: 1.6rem; color: #666; line-height: 2.8rem; padding: 30px 0; }
#product>.view .tags>.item>.con>p{margin-bottom: 20px;}
#product>.view .tags>.item>.con .table-container{position: relative;}
#product>.view .tags>.item>.con .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#product>.view .tags>.item>.con .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#product>.view .tags>.item>.con table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#product>.view .tags>.item>.con table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; text-align: left; font-size: 1.6rem;padding:10px;}
#product>.view .tags>.item>.con img{max-width: 100%;height: auto;}

#product>.view .pageurl{ text-align: center; margin: 0 auto;}
#product>.view .pageurl>a{display: inline-block; vertical-align: top; padding: 0 50px; height: 42px; line-height: 42px; font-size: 1.6rem; margin: 0 10px; border-radius: 30px; border: 1px solid #ddd; transition: all .35s;}
#product>.view .pageurl>a.back{background: #0079c3; color: #fff; border-color: #0079c3;}
#product>.view .pageurl>a:hover{border-color: #0079c3; color: #0079c3;}
#product>.view .pageurl>a.back:hover{background: #f0222b; border-color: #f0222b; color: #fff;}







/*@keyframes rotateplane{*/
/*    0%{transform:perspective(80px);}*/
/*    50%{transform:perspective(80px) rotateY(180deg);}*/
/*    100%{transform:perspective(80px) rotateY(180deg) rotateX(180deg);}*/
/*}*/