@charset "utf-8";

/*PC*/
@media(min-width:769px){
    .banner{height:850px;background:#1d1e2c;overflow:hidden}
    .banner_pic{height:850px;position:relative;z-index:2}
    .banner_bg{height:850px;position:relative;top:-850px;z-index:0}
    .banner_bg canvas{width:100%;height:100%}
    .banner_pic .tit{padding-top:350px;font-size:60px;color:#fff;font-weight:800;text-align:center}
    .banner_pic .txt{padding-top:40px;font-size:30px;color:#fff;font-weight:300;text-align:center}

    .home_box{padding:100px 0px}
    .about{background-image:url('/images/home/about/bg1.png');background-position:center;background-repeat:no-repeat;background-color:#f4f4f4}
    .about li{width:329px;display:block;cursor:pointer}
    .about ul{padding-top:40px}
    .about ul .left{margin-right:28px}
    .about li .box{background:#fff;height:330px;border-radius:5px;overflow:hidden;position:relative;top:0px}
    .about li:hover .box{box-shadow:0 0 10px 0 rgba(0,0,0,.1);top:-10px;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease}
    .about li:hover .pic img{webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}
    .about .pic{height:180px;overflow:hidden}
    .about .pic img{height:180px;width:100%}
    .about .tit{padding:20px 20px;font-size:20px;font-weight:bold;color:#222}
    .about .txt{padding:0px 20px;line-height:30px;font-size:14px}


    .company{padding:100px 0px;background-color:#1d1e2c;background-image:url('/images/home/company/bg.jpg');background-repeat:no-repeat;background-position:bottom;background-size:100%;background-attachment:fixed;height:500px;overflow:hidden}
    .company .title_cn{color:#fff !important; margin-top: 110px;}
    .company .info{ font-size: 20px; text-align:center; line-height:55px; padding:30px 0 30px 0;color:#fff}


    .company .waves{position:relative;height:400px;top:-180px;z-index:0}


    .total{height: 100px;}
    .total .center{ background:#fff; position:relative; top:-100px;border-radius:5px; cursor:pointer;}
    .total .center:hover {box-shadow: 0 0 10px 0 rgba(0,0,0,.1);}
    .total ul{ padding:50px 100px; display: block;}
    .total li{  float:left; display:block; width: 33%; position:relative; top:0px; text-align: center;border-left: 1px solid #eee;}
    .total li:first-child{border-left:0 !important;}
    .total li:hover{top:-10px;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;}
    .total #clearPadding{padding-right:0px}
    .total .num{ color:#c91c1d;}
    .total .num b{font-size: 50px;font-family: Impact,Arial,Sans-serif;}
    .total .txt{ line-height:40px; font-size: 20px;}

    .product{padding:100px 0px}
    .product .tab-icon{ display: none;}
    .product .tab-icon li {width:15px;height:15px;font-size:0;background-color:#222;float:left;margin-left:5px;cursor:pointer;display:inline;border-radius:100px;}
    .product .tab-icon li.cur {background-color:transparent;border:3px solid #15549a;width:9px;height:9px;}
    .product .show_product{ width: 1400px; margin: 0 auto; padding-top:50px;}
    .product .product_pic_list {position:relative;padding-top:6px;line-height:30px;font-size:14px;}
    .product .product_pic_list li {float:left;display:inline;width:330px;height:260px; text-align: center; margin: 0 10px;}
    .product .product_pic_list li a {display:block; height: 260px; position: relative}
    .product .product_pic_list .pic {overflow:hidden;height: 260px; position: relative; background: #fff;}
    .product .product_pic_list .pic img { height: 260px; }
    .product .product_pic_list .hover {overflow:hidden;position: relative; height: 260px;top: -50px; overflow: hidden; }
    .product .product_pic_list .hover .bg{ position: relative;height: 260px; background: #000;opacity:0.8;filter:alpha(opacity=80);}
    .product .product_pic_list .hover .box{position: relative;top:-260px;height: 260px; color: #fff;}
    .product .product_pic_list .hover .box .tit{ height: 50px; line-height:50px; font-size: 20px; }
    .product .product_pic_list .hover .box .txt{ line-height:35px; height:140px; font-size:16px;color: #fff; text-align:left;overflow: hidden; padding:0 30px;}
    .product .product_pic_list .hover .box .code{ width: 330px; margin: 0px auto; padding: 20px 0px;}
    .product .product_pic_list .hover .box .code span{ width: 50%; overflow: hidden; float: left;}
    .product .product_pic_list .hover .box .code .qr_box{width: 100px; height: 120px; margin: 0px auto;background: #fff; border-radius: 5px; border: 10px solid #fff;}
    .product .product_pic_list .hover .box .code span img{ width: 100%; height: 100px; margin: 0px auto;}
    .product .product_pic_list .hover .box .code .tt{  height: 20px; margin: 0px auto;}
    .product .product_pic_list .hover .box .more em{ font-size: 40px; color: #fff;position:relative;animation:mymove 1s infinite;-webkit-animation:mymove 1s infinite;}
    @keyframes mymove{from {top:0px;}to{top:10px;opacity: 0;}}
    @-webkit-keyframes mymove{from {top:0px;}to{top:10px;opacity: 0;}}

    .product .product_pic_list li:hover *{webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;}
    .product .product_pic_list li:hover .hover{top: -260px;}
    .product .product_pic_list li:hover .bg{ background:#c91c1d;}


    .product .btn {display:block;height:55px;position:absolute;top:110px;width:55px;z-index:100;cursor:pointer;background:#000;color:#fff;font-size:35px;opacity:0.5;filter:alpha(opacity=50);border-radius:100%;}
    .product .btn:hover {background:#15549a;opacity:0.9;filter:alpha(opacity=90);}
    .product .btn i {padding-top:10px;}
    .product .prev i {padding-left:20px;}
    .product .next i {padding-left:23px;}
    .product .prev {left:-100px;}
    .product .next {right:-100px;}


    .news .title_cn{color:#fff !important}
    .news{background-color:#1d1e2c;background-image:url('/images/home/news/bg.jpg');background-repeat:no-repeat;background-position:bottom;background-size:100%;background-attachment:fixed;height:600px;overflow:hidden}
    .news .container{height:400px;position:relative;z-index:2;margin-top:30px}
    .news .waves{position:relative;height:400px;top:-260px;z-index:0}
    .news .container .nav{width:400px;margin:0 auto}
    .news .container .nav span{display:block;width:50%;font-size:16px;text-align:center;line-height:40px;color:#fff;float:left;cursor:pointer;border-radius:3px}
    .news .container .nav span.active{background:#15549a;color:#fff;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease}
    .news .content{margin-top:50px;width:1400px;position:relative;overflow:hidden;height:260px;border-radius:5px;}
    .news .content .box{position:absolute;width:1400px}
    .news .content ul{float:left;width:1400px;height:280px}
    .news .content ul li{display:block;width:100%}
    .news .list{position:relative;line-height:30px;font-size:14px;background:#fff;overflow:hidden}
    .news .list dt{float:left;display:inline;width:350px;height:260px}
    .news .list dt a{display:block;padding:36px;border-right:1px dotted #bababa;position:relative;top:0px;cursor:pointer}
    .news .list dt:last-child a{border:0px !important}
    .news .list dt:hover a{top:-6px;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease}
    .news .list dt:hover{background:#15549a;webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}
    .news .list dt:hover a{border-right:0px}
    .news .list dt:hover *{color:#fff}
    .news .list dt:hover img{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease;-webkit-transform:scale(1.3,1.3);-moz-transform:scale(1.3,1.3);-o-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
    .news .list .date{font-size:30px;font-weight:bold;padding-bottom:10px;font-family:Arial}
    .news .list .tit{font-size:18px;height:70px;line-height:35px;color:#222;overflow:hidden;display:block;display:-webkit-box;white-space:normal !important;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .news .list .desc{height:70px;overflow:hidden;padding-top:10px}
    .news .list .pic{margin-top:5px;width:80px;height:70px;overflow:hidden}
    .news .list .pic img{width:80px;height:70px}
    .news .list .txt{width:180px;font-size:14px;height:70px;line-height:24px;overflow:hidden;display:block;display:-webkit-box;white-space:normal !important;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;-webkit-line-clamp:3;-webkit-box-orient:vertical}

    .partner{background: #fff;}
    .partner ul{width:1195px;margin:0 auto;margin-top:40px;}
    .partner ul li{float:left;width:25%;text-align:center;padding: 20px 0 20px 0;}
    .partner ul li a{width:220px;height:120px;overflow: hidden; border:1px solid #eee; border-radius:5px; display: block;position: relative;top:0px;}
    .partner li img{width:100%; height:100%;box-shadow:0 0 10px 0 rgba(0,0,0,.02)}

    .partner li:hover a{box-shadow: 0 0 10px 0 rgba(0,0,0,.1); top:-10px;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;}
    .partner li a:hover img{
        webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;
        -webkit-transform: scale(1.2, 1.2);-moz-transform: scale(1.2, 1.2);-o-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);}

    .back img{transform:rotateY(-180deg)}
}


@media (max-width:769px){
    body img{ max-width: 100%;}
    .banner{height:260px;background:#1d1e2c;overflow:hidden}
    .banner_pic{height:260px;position:relative;z-index:2}
    .banner_bg{height:260px;position:relative;top:-260px;z-index:0}
    .banner_bg canvas{width:100%;height:100%}
    .banner_pic .tit{padding-top:60px;font-size:24px;color:#fff;font-weight:800;text-align:center}
    .banner_pic .txt{padding-top:40px;font-size:16px;color:#fff;font-weight:300;text-align:center}

    .about ul{ padding-top: 10px;}
    .about li{ margin:5px 20px 20px 20px; border-bottom: 1px solid #eee;}
    .about li:last-child{ border-bottom: 0px !important;}
    .about .box .pic img{ width:100px; height: 100px; display: block; margin: 0 auto; border-radius: 100%;}
    .about .box .tit{ font-size: 20px; text-align: center; padding-top: 10px;}
    .about .box .txt{ line-height: 35px;}



    .company .waves{ display: none;}
    .company .info{ font-size: 14px;line-height:35px;padding:20px;}
    .company .item{  display: none;}


    .product .tab-icon{ display: none;}
    .product .show_product{ width: 100%; }
    .product .product_pic_list {position:relative;line-height:30px;font-size:14px;}
    .product .product_pic_list ul{ padding: 20px 0px 0px 0px}
    .product .product_pic_list li {float:left;display:inline;width:100%;text-align: center;border-top: 5px solid #eee;}
    .product .product_pic_list li:first-child{ border-top: 0px !important;}
    .product .product_pic_list li a {display:block; position: relative}
    .product .product_pic_list .pic {overflow:hidden; position: relative}
    .product .product_pic_list .pic img { height: 200px;}
    .product .product_pic_list .hover{ position: relative; }
    .product .product_pic_list .tit{ padding-bottom: 10px; font-size: 14px; font-weight: bold; color: #333; }
    .product .product_pic_list .txt,
    .product .product_pic_list .code,
    .product .product_pic_list .more{ display: none; }

    .product .btn { display: none;}


    .news .nav,
    .news .waves{ display: none;}
    .news .box{ padding: 0px 20px}
    .news .box dt a{ border-bottom:1px solid #eee; display: block; padding: 10px 0px;}
    .news .box .left{ float: left; width: 30%; height: 60px; overflow: hidden;}
    .news .box .left img{ width: 100%;}
    .news .box .right{ float: right; width: 68%;}
    .news .box .date{ display: none;}
    .news .box .tit{  overflow: hidden; color: #333; white-space: nowrap; padding-bottom: 5px; font-size: 14px;}
    .news .box .desc{ height: 60px; overflow: hidden; line-height: 20px; color: #999;}

    .partner ul{ padding: 15px 15px;}
    .partner ul li{ float:left; width: 50%;}
    .partner .back{ display: none;}
    .partner ul li a{ width: 100%; display: block; overflow:hidden;}
    .partner ul li a img{ margin: 0px 5px 5px 5px; display: block; width: 100%;}


}