@media all and (max-width: 768px){
    .about{
        padding: 0 10px!important;
    }
    .ab-img{
        margin: 0!important;
    }
    .service{
        padding: 10px 10px!important;
    }
    .contact{
        padding: 20px 10px!important;
    }
    .con-pro, .con-dh{
        display: none;
    }
    .foot{
        padding: 0 10px!important;
    }
}

.wrapper ul{
    width: 100%;
    max-width: none!important;
}
.wrapper ul li{
    width: 100%;
}
.wrapper ul a{
    width: 100%;
}
.wrapper ul img{
    width: 100%;
    max-width: none;
    display: inline-block;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}
.title>h4{
    font-size:30px ;
    font-weight: bold;
}
.title>span{
    width: 200px;
    margin: 0 auto;
    border-top: solid 1px #efb004;
    display: inline-block;
    font-size: 24px;
    color: #000;
}
.title1{
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;

}
.title1>h4{
    font-size:30px ;
    font-weight: bold;
}
.title1>span{
    width: 200px;
    margin: 0 auto;
    border-top: solid 1px #efb004;
    display: inline-block;
    font-size: 24px;
    color: #fff;
}
.title2>h4{
    font-size: 30px;
    font-weight: bold;
    border-left: solid 6px #efad0f;
    padding-left: 15px;
    margin-bottom: 30px;
}

/*product*/
.product{
    padding: 50px 0;
}
.pro{
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.th-pro{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 100%;
}
.th-pro img{
    width: 50%!important;
    transform: none!important;
    margin: 60px auto;
    display: block;
    height: auto!important;
    vertical-align:middle;
}
.page>.th-pro{
    height: 0!important;
    top: 220px!important;
}
.page>.th-pro img{
    width:200px!important;
}
.pro img{
   width: 100%;
    height: 100%;
    transition: .5s;
    transform: scale(1.3);
}
.pro1{
    margin-bottom: 10px;
}
.pro1 img{
    width: 100%;
    transition: .5s;
}
.pro1 p{
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin: 0;
    padding: 5px 0;
    background: #000;
}
.pro>a>p{
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,.5);
    width: 100%;
    margin: 0;
    padding: 5px 0;
    transition: .5s;
    display: none;
}
.pro-h{
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    opacity: 0;
    z-index: -1;
    transition: .5s;
}
.pro-h p{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    color: #fff;
    font-size: 14px;
}
.pro:hover .pro-h{
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
}
.pro:hover>a>img{
    transform: translateY(100%);
    opacity: 0;
}
.pro:hover>a>p{
    transform: translateY(100%);
    opacity: 0;
}
.product>p{
    text-align: center;
    width: 100%;
    margin-top: 30px;
}
.product>p>a{
    padding: 10px 40px;
    border: solid 1px #ccc;
    color: #000;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    border-radius: 20px;
}
.product>p>a:hover{
    background: #de2324;
    color: #fff;
}
.product1>p{
    text-align: center;
    width: 100%;
    margin-top: 30px;
}
.product1>p>a{
    padding: 10px 40px;
    border: solid 1px #ccc;
    color: #000;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    border-radius: 20px;
}
.product1>p>a:hover{
    background: #de2324;
    color: #fff;
}


.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 60%;margin: 0 auto; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper1 {
    width: 100%;
    margin: 30px auto;
    padding: 30px 0;
    position: relative;
    background: url("../img/about-bg.jpg") no-repeat center;
    background-attachment: fixed;
    background-size: cover;
}
.counter { padding: 20px 0; border-radius: 5px;width: 90%}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center;color: #fff; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center;color: #fff; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }


/*about*/
.about{
    margin: 30px 0;
}
.ab-con h3{
    font-size: 30px;
    color: #333;
    text-align: left;
}
.ab-con h3 span{
    border-bottom: solid 3px #f6a808;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.ab-con p{
    font-size: 14px;
    color: #333;
    text-align: left;
    text-indent: 2em;
}
.ab-con a{
    display: inline-block;
    padding: 8px 30px;
    border: solid 1px #f6a808;
    color: #333;
    margin-top: 15px;
}
.ab-img{
    margin: 0 30px;
}
.ab-img img{
    width: 100%;
}

/*advantage*/
.advantage{
    background: url("../img/news.jpg") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 300px;
    padding: 50px 0;
}
.adv{
   text-align: center;
    color: #fff;
    margin: 0 20px;
}
.adv>img{
  margin: 30px 0;
    width: 100px;
    transition: 1s;
}
.adv>img:hover{
    transform: rotateZ(360deg);
}
.adv>h4{
    font-size: 18px;
}
.adv>p{
    text-align: justify;
    text-indent: 2em;
    font-size: 14px;
    height: 130px;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

/*service*/

.service{
    padding: 50px 0;
}
.ser>div{
    border: solid 2px #efad0f;
    border-radius: 50%;
    font-size: 30px;
    width: 80px;
    height: 80px;
   display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    color: #db2416;
    float: left;
    margin-right: 20px;
}
.ser{
    margin: 10px 0;
}
.ser-img img{
    width: 100%;
}
#slider_box ul{ padding: 0px; margin: 0px; list-style-type: none; }
#slider_box { width: 100%px; float: left; }
#slider { width:500px; height: 420px; margin-top: 10px; position: relative; overflow: hidden; }
#slider #imgs { position: absolute; top: 0; left: 0; }
#slider #imgs li { float: left; z-index: 0; }
#slider  #indexs { position: absolute; bottom: 15px; right: 30px; }
#slider #indexs  li { width: 22px; height: 22px; line-height: 22px; display: inline-block; background: #3e3e3e; color: #fff; border-radius: 50%; text-align: center; cursor: pointer; margin-left: 10px; }
#slider #indexs li.hover { background: #b61b1f; }
#slider #imgs img{
    width: 500px;
}

/*custom*/
.custom{
    background: url("../img/about-bg.jpg") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 300px;
    padding: 50px 0;
}
.cus-con{
    text-align: center;
    color: #fff;
}
.cus-con>h2{
    color: #fff;
    font-size: 30px;
}
.cus-con>h2>small{
    font-size: 55px;
    color: #efad0f;
    font-family: STXingkai;
}
.cus-con>p{
    margin: 20px 0;
    font-size: 14px;
}
.cus-con>span>a{
    color: #efad0f;
    font-size: 18px;
}

/*Plant equipment*/
.equipment{
    padding: 50px 0;
}
.equ{
    position: relative;
    margin: 10px;
}
.equ>img{
    width: 100%;
    position: relative;
}
.equ>p{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 5px 0;
    color: #fff;
    background: rgba(0,0,0,.5);
    text-align: center;
}
.equipment>.container .equ>b{
    transition: .5s;
}
.equipment>.container:hover .equ>b{
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,.8);
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 4;
}
.equ>b{
    transition: .5s;
}
.equ:hover>b{
    opacity: 0!important;
}

/*news*/
/*news*/
.news{
    background: url("../img/news.jpg") no-repeat fixed;
    padding: 80px 0;
    position: relative;
    background-size: cover;
}
.news .title>h3{
    color: #fff;
}
.news:before{
    content: " ";
    width: 100%;
    height: 100%;
    /*background: rgba(255,255,255,.2);*/
    position: absolute;
    top: 0;
    right: 0;

}
.news .title>span>b{
    background: #f1f2f4;
}

.news-con{
    background: #fff!important;
    position: relative;
}

.news-con:after{
    content: "";
    position: absolute;
    bottom: 42px;
    left: 0;
    width: 82%;
    height: 0;
    border-left: 155px solid transparent;
    border-right: 155px solid transparent;
    border-top: 19px solid #000000;
}
.news-content{
    background: #fff;
    padding-top: 50px;
}
.news-content>div:nth-of-type(2n)>.news-con1{
    border-right: none!important;
}
.news-con>h3{
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 26px;
    padding-top: 15px;
}
.news-con1{
    background: #fff;
    border-right: solid 1px #ccc;
}
.news-con1>p{
    padding: 10px 0px;
    margin: 0 20px;
    border-bottom: solid 1px #ccc;
}
.news-con1>p>a{
    color: #333;
    width: 100%;
    font-size: 14px;

}
.news-con1>p>a>span{
    display: inline-block;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}
.news-con1>p>a:hover{
    color: #03a33e;
}
.news-con1>p>a>small{
    float: right;
    display: inline-block;
    font-size: 12px;
}
.news-con2{
    text-align: center;
    background: #fff;
}
.news-con2>a{
    text-align: center;
    padding: 5px 30px;
    border-radius: 20px;
    border: solid 1px #03a33e;
    color: #03a33e;
    display: inline-block;
    margin: 15px auto;
    transition: .3s;
}
.news-con2>a:hover{
    color: #fff;
    background: #03a33e;
}