.Icon-Quality{ background: url("../images/icon/Quality.png") center no-repeat;}
.Icon-Delivery{ background: url("../images/icon/Delivery.png") center no-repeat;}
.Icon-Service{ background: url("../images/icon/Service.png") center no-repeat;}
.Icon-Power{ background: url("../images/icon/Power.png") center no-repeat;}
.Icon-Car{ background: url("../images/icon/Car.png") center no-repeat;}
.Icon-Machine{ background: url("../images/icon/Machine.png") center no-repeat;}
.Icon-Gearing{ background: url("../images/icon/Gearing.png") center no-repeat;}
.Icon-Motor{ background: url("../images/icon/Motor.png") center no-repeat;}
.Icon-Mine{ background: url("../images/icon/Mine.png") center no-repeat;}
.Icon-tel{ background: url("../images/icon/tel.png") center left no-repeat;}
.Icon-fax{ background: url("../images/icon/fax.png") center left no-repeat;}
.Icon-add{ background: url("../images/icon/add.png") center left no-repeat;}


/* wap */
@media screen and (max-width:767px){
    .wrap{ width: 100%;}
    .nav_wrapper .navigation{ display: none;}
    .header{ background-image: none; background-size: 100%; display: none;}
    .header #logo1 img{ height: 80px;}
    .header #logo2 img{ height: 25px;}
    .header #logo3 img{ height: 10px;}
    .index-content .title{ font-size: 35px;}
    .index-content .about-con{ width: auto; display: block; margin: 0 30px;}
    .index-content .top-grids li{ width: auto; display: block; float: none; margin: 0 15px 20px 15px;  border-bottom:1px #ccc dotted; padding-bottom: 20px;}
    .brand-ul li{ width: 33.333333333%}
    .index-content .top-grids li .icon{ width: 45px; height: 45px; background-size: 45px;}
    #about{ padding-top: 30px;}
    .index-content .top-grids li p{ width: 90%; margin: 0 auto;}
    .service-ul li{ width: auto; display: block; margin: 0 15px 20px 15px; float: none; border-bottom:1px #ccc dotted; padding-bottom: 20px;}
    .service-ul li .icon{ width: 45px; height: 45px; background-size: 45px;}
    .service-ul li .service-detail{ padding-left: 60px;}
    .sanjiao span{width: 25px; height: 25px; background-size: 25px;}
    .product-ul{ margin-top: 10px;}
    .product-ul li{ width: 50%;}
    .product-ul li .view,.product-ul li .view .mask{ height: 125px;}
    .info-ul li{ width: 33% !important;}
    .info-ul li .newsListBox span{ width: 100% !important;}
    .info-ul li .newsListBox span a{ border-color: #eee;}
    #contact .contact-inner .feedback{ width: 100%; margin: 0;}
    #contact .contact-inner .contact-detail{ width: 100%; position: inherit}
    #contact .contact-inner .contact-detail li{ padding-left: 45px; height: 60px; margin: 28px 0 40px 0; font-size: 18px; background-size: 35px;}
    #contact .contact-inner .contact-detail li p{ width: 100%; height: 30px;}
    #contact .contact-inner .contact-detail li p span{ color: #39A38F; padding-left: 5px; font-size: 14px;}
    #contact .contact-inner .feedback .input-box span input{ border-radius: 0 !important;}
    #contact .contact-inner .feedback .button-box button{ width: 100%; padding: 0; height: 50px; font-size: 18px; border-radius: 0 !important;}
    #mtop{ width: 40px; height: 30px; right: 0; bottom: 0; background-size: 15px; border-radius: 0;}

    .data-detail-box{ margin-top: 15px;}
    .data-detail-box .inner{ padding: 25px 20px;}
    .data-detail-box .inner h1{ font-size: 16px;}
    .data-detail-box .inner .hotnum,.weizhi{ display: none;}
    .data-detail-box .inner .info-conbox{ margin: 20px 0;}
    .about-header .about-pic img{ width: 80%; margin: 80px auto 120px auto;}
    .about-detail-box .top-grids li{ width: 100%;}
    .about-detail-box .banner img{ max-width: 80%;}
    .about-detail-box{ margin: 40px auto;}
    .contacts-box{ width: auto; display: block; margin: 40px 35px 450px 35px;}
    .contacts-box .feedback-btn{ width: 100%; height: 40px; position: relative !important;}
    .contacts-box .feedback-btn a{ height: 40px; line-height: 40px; font-size: 16px;}
    .contacts-box .contacts-detail{ padding-left:0; margin-top: 20px;}
    #dituContent{ height: 400px; top: 630px; }

    .search-bearing-box{overflow: hidden; margin: 30px auto 0 auto;}
    .search-bearing-box .inner{ width: auto; display: block; position: relative; margin: 0 15px;}
    .search-bearing-box .inner .btnbox{ width: 100%; position: relative; height: 50px; right: 0}
    .search-bearing-box .inner .btnbox button{ width: 100%; height: 50px;}
    .search-bearing-box .inner #hd-btn{ width: 100%;text-align: center; position: relative; background: #ccc; height: 40px; line-height: 40px;}
    .search-bearing-box .inner .input-box{ width: auto; margin: 0 0 5px 0; display: block; height: 46px; padding: 0 10px; border:}
    .search-bearing-box .inner .input-box input{ width: 100%; height: 46px;}
    .search-bearing-box .hd-box{ display: none; width: auto; overflow: hidden; padding: 20px 0 0 0; position: relative; margin: 0 15px;}
    .search-bearing-box .hd-box .inpbox{ display: block; float: none; width: auto; overflow: hidden; border: 1px #ccc solid; padding-left: 10px; margin: 4px 0; background: #fff;}
    .search-bearing-box .hd-box .inpbox input{ width: 100%; padding: 0; border: none;}
    .search-bearing-box .hd-box .inpbox select{ width: 100%; padding: 0; border: none;}

    .xinghao-list{ margin: 30px auto;}
    .xinghao-list li{ width: 100%;}

    .wap-btn{ width: 40px; height: 40px; background: url("../images/nav_btn.png") no-repeat center; background-size: 40px; position: absolute; right: 15px; top: 20px; cursor: pointer;}
    .wap-nav{ width: 120px; overflow: hidden; position: fixed; top: 0; right:-120px; background: #eee;}
    .wap-nav li{ width: 120px; overflow: hidden; border-bottom: 1px #ddd dotted; margin: 0 auto;}
    .wap-nav li a{ display: block; height: 50px; line-height: 50px; text-align: center; color: #333; font-size: 16px; font-weight: 500;}

    .mask{ display: none;}
    .bearing-info li{ width: 100%; float: none;}
    .bearing-info li h3{ padding: 0;}

    .brands-ul li{ width: 100%; float: none}
    .footer .footernav{ display: none;}
    .footer .copy li{ text-align: center;}
}

/* pad */
@media screen and (min-width: 768px) and (max-width:1001px){
    .wrap{ width: 768px !important;}
    .down{ display: none; width: 28px; height: 58px; background: url("../images/down.png") no-repeat; background-size: 28px;}
    .service-ul li{ width: 50%; margin-bottom: 30px;}
    .product-ul li .view,.product-ul li .view .mask{ height: 151px;}
    .info-ul li{ width: 50% !important;}
    #contact .contact-inner .feedback{margin-right: 350px;}
    #contact .contact-inner .contact-detail{ width: 300px;}
    #contact .contact-inner .contact-detail li{ padding-left: 35px; height: 50px; margin: 28px 0 40px 0; font-size: 14px; background-size: 28px;}
    #contact .contact-inner .contact-detail li p{ width: 100%; height: 25px;}
    #contact .contact-inner .contact-detail li p span{ color: #39A38F; padding-left: 5px; font-size: 12px;}
    #mtop{ width: 50px; height: 40px; right: 0; bottom: 0; background-size: 20px; border-radius: 0;}
    .data-detail-box .inner .info-conbox{ margin: 50px;}
    .about-header .about-pic img{ width: 60%; margin: 80px auto 120px auto;}
    .search-bearing-box{margin: 50px auto 0 auto;}
    .search-bearing-box .inner{ width: 600px; height: 40px;}
    .search-bearing-box .inner .btnbox{ width: 120px; height: 40px; right: 60px;}
    .search-bearing-box .inner .btnbox button{ height: 40px;font-size: 16px; letter-spacing: 2px;}
    .search-bearing-box .inner #hd-btn{ width: 60px; height: 40px; line-height: 40px; font-weight: 500;}
    .search-bearing-box .inner .input-box{ width: auto; height: 36px; margin-right: 180px;}
    .search-bearing-box .inner .input-box input{ width: 100%; height: 36px; *height: 30px; *line-height: 32px; font-size: 16px;}
    .search-bearing-box .hd-box{width: 600px; margin: 0 auto;padding: 20px 0 0 0;}
    .search-bearing-box .hd-box .inpbox{}
    .search-bearing-box .hd-box .inpbox input{ width: 100px; background: #fff; height: 30px; *line-height: 30px;}
    .search-bearing-box .hd-box .inpbox select{width: 100px; background: #fff; height: 32px;}
    .xinghao-list{ margin: 30px auto;}
    .xinghao-list li{ width: 50%;}
    .wap-btn,.wap-nav{ display: none;}

    .mask{ display: none;}
}

/* PC */
@media screen and (min-width:1002px) and (max-width:1199px){
    .wrap{ width: 1002px !important;}
    .data-detail-box .inner .info-conbox{ margin: 50px 100px;}
    .about-header .about-pic img{ width: 50%; margin: 120px auto 160px auto;}
    .wap-btn,.wap-nav{ display: none;}
}
@media screen and (min-width:1200px){
    .wrap{ width: 1200px !important;}
    .wap-btn,.wap-nav{ display: none;}
}