.navoutwrap .navboxs { width: 100%; }
.box1 { background: #f0f2f5; overflow: hidden; }
.box1 .wrap { width: 1200px; margin: 56px auto 94px auto; }
.box1 .wrap li { padding: 40px 0; transition: all .3s; border-bottom: 1px solid #E5E5E5; }
.box1 .wrap li a { display: block; }
.box1 .wrap li .left { width: 380px; height: 220px; overflow: hidden; float: left; }
.box1 .wrap li .left img { width: 100%; }
.box1 .wrap li .right { height: 220px; background: url(../images/product-05.png) no-repeat right center; float: left; margin-left: 60px; width: 760px; box-sizing: border-box; overflow: hidden; }
.box1 .wrap li .right .tl { margin-top: 42px; font-size: 18px; line-height: 18px; color: #444; margin-bottom: 20px; }
.box1 .wrap li .right .te { line-height: 24px; height: 72px; overflow: hidden; color: #888; }
.box1 .wrap li .right .tamp { margin-top: 20px; }
.box1 .wrap li .right .tamp .time, .box1 .wrap li .right .tamp .looknum { float: left; padding-left: 28px; color: #888; line-height: 24px; }
.box1 .wrap li .right .tamp .time { background: url(../images/news-07.png) no-repeat left center; margin-right: 30px; }
.box1 .wrap li .right .tamp .looknum { background: url(../images/news-08.png) no-repeat left center; }
@media screen and (min-width: 1024px) {
.box1 .wrap li:hover { margin-left: -30px; }
.box1 .wrap li:hover .right { background: url(../images/product-04.png) no-repeat right center; }
}
@media screen and (min-width: 100px) and (max-width: 1024px) {
.navoutwrap .navboxs .navs { width: 33.3333%!important; }
.box1 { background: #f0f2f5; overflow: hidden; }
.box1 .wrap { width: 90%; margin: 44px auto 0 auto; }
.box1 .wrap li { padding: 0 0 22px 0; margin-bottom: 22px; }
.box1 .wrap li:last-child { margin-bottom: 0; }
.box1 .wrap li a { display: block; }
.box1 .wrap li .left { width: 100%; height: auto; float: none; }
.box1 .wrap li .right { height: auto; background: url(../images/product-05.png) no-repeat right center; float: none; margin-left: 0; width: 100%; }
.box1 .wrap li .right .tamp { margin-top: 18px; }
.box1 .wrap li .right .tl { margin: 24px 0 8px 0; font-size: 16px; line-height: 18px; }
.box1 .wrap li .right .te { height: auto; font-size: 14px; height: 48px; overflow: hidden; }
}

.box3 { background: #f0f2f5; overflow: hidden; }
.box3 .wrap { width: 1200px; padding: 80px 96px; box-sizing: border-box; margin: 66px auto 144px auto; background: #fff; overflow: hidden; }
.box3 .wrap .title { line-height: 1.5; font-size: 32px; text-align: center; }
.box3 .wrap .data { font-size: 14px; color: #aaa; text-align: center; padding: 20px 0; }
.box3 .wrap .data span { margin: 0 40px; }
.box3 .wrap .content { padding:40px 0 0 0; line-height: 2; border-top: 1px solid #e5e5e5; }
img { display: inline-block; }
 @media screen and (max-width: 1024px) and (min-width: 100px) {
.box3 .wrap .title { padding-left: 0; }
.box3 .wrap .data span { margin: 0 10px; }
.box3 .wrap .content { padding: 1.4rem 33px; }
img { width: 100%; height: auto; }
}


 @media screen and (min-width: 100px) and (max-width: 1024px) {

.box3 { background: #f0f2f5; overflow: hidden; }
.box3 .wrap { width: 90%; padding:30px 20px; margin: 44px auto; }
.box3 .wrap .title { font-size: 24px; line-height: 26px; }
.box3 .wrap .content { padding:1.4rem 0; }
.box3 .wrap .content img {  max-width: 100%; margin: 0 auto; height: auto !important; }

}