.banner{height: 640px; position: relative; overflow-x: hidden;}
.banner .focus li{height: 640px; width: 100%; text-align: center; position: absolute; z-index: 1;opacity: 0;
    transition: 1.5s;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;}
.banner .focus li img{margin: 0 auto;}
.banner .focus li.hover{z-index: 2;opacity: 1;}
.banner .focus li a{width: 100%; height: 100%; display: block; background-position: center center; background-repeat: no-repeat;}
.banner .controller{position: absolute; z-index: 50; width: 100%; min-width: 1200px; bottom: 120px; text-align: center;}
.banner .controller a{width: 24px; margin: 0 5px; height: 4px; background: #464659; display: inline-block;}
.banner .controller a:hover,.banner .controller a.hover{background: #fff;}
.banner .controller .btn{width: 80px; height: 80px;opacity: 0; color:#fff; background: rgba(0,0,0,0.25); cursor: pointer; position:absolute; top: -260px; 
                         border-radius: 50%; text-align: center; vertical-align: middle;
                         transition: 0.3s;
                        -webkit-transition: 0.3s;
                        -moz-transition: 0.3s;
}
.banner .controller .btn.left{left: 0;}
.banner .controller .btn.right{right: 0;}
.banner:hover .controller .btn{opacity: 1;}
.banner:hover .controller .btn.left{left: 70px;}
.banner:hover .controller .btn.right{right: 70px;}
.banner .controller .btn:hover{background: rgba(0,0,0,0.5);}
.banner .controller .btn i{line-height: 80px; font-size: 60px; width: 80px; height: 80px;}
.banner .advantage{position: absolute; z-index: 100; bottom: 0; width: 100%; height: 80px; background: rgba(60,60,60,0.5);}
.banner .advantage ul{width: 1200px; margin: 0 auto;}
.banner .advantage li{width: 25%; height: 80px; float: left; position: relative; }
.banner .advantage li a{height: 80px; display: block; color: #fff; background: rgba(48,48,59,0.3); border-color:rgba(255,255,255,0.1); border-style:solid; border-width: 0 1px 0 0;}
.banner .advantage li:first-child a{border-left-width: 1px;}
.banner .advantage li a:hover{background: rgba(75,75,93,0.5);}
.banner .advantage li i{position: absolute; width: 40px; height: 40px; top: 20px; left: 30px; font-size: 40px;}
.banner .advantage li h5{position: absolute; top: 20px; left: 90px; font-size: 16px;}
.banner .advantage li p{position: absolute; top: 44px; left: 90px; font-size: 14px; color: rgba(255,255,255,.6);}

.product{padding: 50px 0; }
.product .product_brand ul{margin-top: 30px;}
.product .product_brand ul li{float: left; width: 360px; height: 150px; margin-right: 60px; margin-bottom: 20px;}
.product .product_brand ul li:nth-child(3n){margin-right: 0;}
.product .product_brand ul li a{display: block;}
.product .product_brand ul li img{width: 100%; height: 100%; border-radius: 8px;}


.solution{padding: 50px 0; background: #f2f2f2;}
.solution ul{margin-top: 30px;}
.solution ul li{float: left; width: 284px; padding: 8px; }
.solution ul li a{display: block; height: 300px; z-index: 1; background: #f6f6f6; border-radius: 5px; box-shadow:0 0px 10px rgba(0,0,0,.2);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;}
.solution ul li a img{width: 100%; height: 100%;border-top-left-radius: 5px; border-top-right-radius: 5px;}
.solution ul li a:hover{color: #f25d5d; z-index: 2;transform:scale(1.08);-ms-transform:scale(1.08);-moz-transform:scale(1.08);-webkit-transform:scale(1.08);-o-transform:scale(1.08);box-shadow:0 0px 10px rgba(0,0,0,.4);}
.solution ul li .cover{height: 160px;}
.solution ul li .content{padding:0 10px 10px; height: 115px; overflow: hidden; display: block; font-size: 15px; }
.solution ul li .content h2{font-size: 18px; line-height: 46px; text-align: center; font-weight: 600;}
.solution ul li .content p{color: #767676;}

.news{padding: 50px 0; }
.news ul{margin-top: 30px;}
.news ul li{float: left; width: 580px; padding: 10px; }
.news ul li a{padding: 10px;  display: block; text-align: left;box-shadow:0 0px 10px rgba(0,0,0,.15);}
.news ul li .time{display: inline-block;vertical-align: top;width: 100px;text-align: center;padding-bottom:16px; margin-right: 12px ;border-right:1px dashed #d7d7d7;}
.news ul li .day{color:#e60012;font-size: 36px;}
.news ul li .month,
.news ul li .year{color:#e60012;font-size: 12px;}
.news ul li .title{display: block;margin-bottom: 5px;color:#333333;font-size: 18px;text-align: left; font-weight: 600; height: 25px; overflow: hidden;}
.news ul li .intro{height: 44px;overflow: hidden; width: 430px;color:#666666;font-size: 15px;line-height: 20px;}
.news ul li .desc{color: #767676;padding:17px 0 17px 0;display: inline-block;vertical-align: top;height: 61px;max-height: 61px;max-width:440px}
/*.news ul li a:hover{background: #f25d5d;}*/
.news ul li a:hover *{color:#f25d5d;}
.news ul li a:hover .time{border-color:#fff;}

.product_list ul{padding: 12px 0;}
.product_list ul li{float: left; width: 270px; padding: 15px; }
.product_list ul li a{display: block; height: 250px; z-index: 1; border-radius: 5px; box-shadow:0 0 22px rgba(0,0,0,.1); position: relative;}
.product_list ul li a img{width: 100%; height: 100%;border-top-left-radius: 5px; border-top-right-radius: 5px;}
.product_list ul li a:hover{color: #f25d5d; z-index: 2;box-shadow:0 0 22px rgba(0,0,0,.2);}
.product_list ul li .cover{height: 175px;}
.product_list ul li .content{padding:0 10px 10px; display: block; font-size: 15px; }
.product_list ul li .content h1{font-size: 18px; line-height: 36px; text-align: center; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product_list ul li .content h2{font-size: 18px; line-height: 36px; text-align: center; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product_list ul li .content p{color: #767676; text-align: center;}




@media screen and (max-width: 1200px) {
    /*.banner{height: auto; position: inherit; }
    .banner .focus li{height: auto;}
    .banner .controller{min-width: inherit; bottom: 20px;}
    .banner .controller .btn{width: 40px; height: 40px; opacity: 0.7; top: -135px;}
    .banner .controller .btn i{width: 40px; height: 40px; font-size: 40px; line-height: 40px;}
    .banner .controller .btn.left{left: 10px;}
    .banner .controller .btn.right{right: 10px;}
    .banner:hover .controller .btn{opacity: 0.7;}
    .banner:hover .controller .btn.left{left: 10px;}
    .banner:hover .controller .btn.right{right: 10px;}
    .banner .advantage{display: none;}*/
    .banner.mobi{height: auto;}
    .banner.mobi img{width: 100%;}

    .product{ padding: 30px 10px;}
    .product .product_brand ul li{width: 100%; display: block; height: auto; margin:0 0 10px; }

    .solution{padding: 30px 10px;}
    .solution ul li{float: inherit; width: auto; padding: 0; margin-bottom: 10px;}
    .solution ul li .cover{height: auto;}
    .solution ul li a{height: auto; padding-bottom: 15px; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; -o-transform: none;}
    .solution ul li a:hover{height: auto; padding-bottom: 15px; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; -o-transform: none;}
    .solution ul li .content{height: inherit;}

    .news ul li{float: inherit; width: inherit;}
    .news ul li .time{display: none;}
    .news ul li .desc{border: none; height: auto; display: block; max-width:unset;}
    .news ul li .title{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    .news ul li .intro{width: inherit; height: 42px;}

    .product_list{padding: 10px 10px 0; background: #fff;}
    .product_list ul{padding: 0;}
    .product_list ul li{width: 50%; padding: 0; height: auto;}
    .product_list ul li .cover{height: 140px;}
    .product_list ul li a{height: auto;}
    .product_list ul li a img{height: auto;}
    .product_list ul li .content p{height: 28px;}
    .product_list ul li:nth-child(2n+1) a{margin:0 5px 10px 0;}
    .product_list ul li:nth-child(2n) a{margin:0 0 10px 5px;}
}


@media screen and (max-height: 700px) {
    .banner{height: 460px;}
    .banner .focus li{height: 460px;}
    .banner .focus li a{background-size: cover;}
    .banner .controller .btn{top: -150px;}
    .banner .advantage{height: 60px;}
    .banner .advantage li{height: 60px;}
    .banner .advantage li a{height: 60px;}
    .banner .advantage li i{top: 10px;}
    .banner .advantage li h5{top: 10px;}
    .banner .advantage li p{top: 34px;}
}