#banner {
    max-height: 800px;
}

#banner .swiper-button-next,
#banner .swiper-button-prev {
    color: #f08300;
}

#banner .swiper-pagination-bullet-active {
    background-color: #f08300;
}

#aboutAndProduct {
    background : url('../images/home/about_bg.jpeg') no-repeat center top;
    padding-top: 80px;

}

#aboutUs {}

#aboutUs .main {
    width: 60%;
}

#aboutUs .main .hb {
    font-size     : 30px;
    font-weight   : 400px;
    position      : relative;
    padding-bottom: 24px;
}

#aboutUs .main .hb::after {
    content      : " ";
    border-bottom: solid #f08300 3px;
    width        : 65px;
    display      : block;
    position     : absolute;
    bottom       : 0;
}

#aboutUs .main .hb {
    margin-bottom: 24px;
    color        : #666666;
}

#aboutUs .main .bb {
    line-height: 30px;
}

#aboutUs .main .fb {
    text-align   : right;
    padding-right: 30px;
}

#aboutUs .main .fb .btn {

    background-color: #f08300;
    color           : #ffffff;
    padding         : 10px 35px;
    border-radius   : 35px;
}


#product {
    margin-top: 660px;
    text-align: center;
    ;
}

#product .hb {
    font-size    : 32px;
    position     : relative;
    margin-bottom: 120px;
}

#product .hb h3 {
    display : inline-block;
    position: relative;
}

#product .hb h3::after {
    content      : " ";
    border-bottom: solid #f08300 3px;
    width        : 65px;
    display      : block;
    position     : absolute;
    bottom       : -20px;
    left         : 52px;
}

#navProduct .nav-item {
    padding         : 0 18px;
    position        : relative;
    background-color: rgba(255, 255, 255, .5);
}

#navProduct .nav-item a {
    padding-bottom: 13px;
}

#navProduct .nav-item:nth-child(2)::after {
    transform  : translateY(-7px);
    position   : absolute;
    content    : " ";
    border-left: solid 1px #dbdbdd;
    display    : block;
    left       : 0;
    height     : 15px;
    top        : 50%;
}

#navProduct .nav-item:hover a,
#navProduct .nav-item a.active {
    border-bottom: solid 2px #f08300 !important;
    color        : #f08300 !important;
}

#productList {
    margin-top: 45px;
}

#productList .item {
    padding-bottom: 25px;
}

#productAdvantage {

    background: url(../images/aboutus/line.png) repeat-x center top;
    padding   : 20px 0 0 0;
    color     : #fff;
}

#productAdvantage .wrapper {
    background: url(/images/home/pa.jpg) no-repeat center center;
    color     : #fff;
}

#productAdvantage .hb h3 {
    font-size  : 32px;
    position   : relative;
    text-align : center;
    padding-top: 2rem;
    color      : #fff;
}

#productAdvantage .hb h3::after {
    content      : " ";
    position     : absolute;
    bottom       : -40px;
    left         : 50%;
    display      : block;
    width        : 70px;
    border-bottom: solid 3px #fff;
    transform    : translateX(-50%);
}

#productAdvantage .bb img {
    max-width: 300px;
}

#productAdvantage .hb p:nth-child(2) {
    margin-top: 80px;
}

#productAdvantage .hb p:nth-child(3) {
    margin-bottom: 80px;
}

#productAdvantage .fb {
    margin-top      : 35px;
    padding         : 20px;
    background-color: rgba(255, 255, 255, .3);
}

#productAdvantage .fb ul {
    margin: 0;
}

#newsAndContact {
    background : url(../images/aboutus/line.png) repeat-x center top;
    padding-top: 20px !important;

}

#newsAndContact .wrapper {
    background: #efefef url('../images/home/news_bg.png') no-repeat center top;

}

#news {

    padding: 145px 0 35px;
}

#news h3 {
    margin   : 0 0 100px 52px;
    position : relative;
    font-size: 32px;
}

#news h3::after {
    content      : " ";
    position     : absolute;
    bottom       : -40px;
    left         : 0;
    display      : block;
    width        : 70px;
    border-bottom: solid 3px #f08300;
}

#news>.bb {
    max-width: 910px;
    margin   : 0 50px 0 auto;
}

#news .first .bb {
    padding: 40px 40px 0;

}

#news .first .date,
#news .first .title {
    font-size    : 18px;
    font-weight  : bold;
    margin-bottom: 20px;
}

#news .first .btnMore {
    border       : solid 1px #f08300;
    color        : #f08300;
    padding      : 10px 35px;
    border-radius: 35px;
    display      : inline-block;
}

#news .thumb {
    width      : 320px;
    display    : flex;
    align-items: center;
}

#news .list .item {
    border-bottom: solid 1px #f08300;
    padding      : 20px;
}

#news .list .item .date {
    width      : 80px;
    color      : #666666;
    flex-shrink: 0;
}

#news .list .item .title {
    padding-bottom: 23px;
}

#contact {
    background: #efefef url('../images/home/contact_bg.jpg') no-repeat right bottom;

}

#contact h3 {
    margin   : 0 0 50px;
    position : relative;
    font-size: 32px;
}

#contact h3::after {
    content      : " ";
    position     : absolute;
    bottom       : -25px;
    left         : 0;
    display      : block;
    width        : 70px;
    border-bottom: solid 3px #f08300;
}

#contact {
    padding: 38px;
}

#contact .hb {
    max-width: 1000px;
}

#contact .bb {
    width: 750px;
}

#contact label {
    color: #f08300;
}

#contact input {
    border: solid 1px #f08300;
}

#contact button {
    display         : inline-block;
    height          : 44px;
    line-height     : 44px;
    text-align      : center;
    background-color: #f08300;
    border-width    : 0;
    padding         : 0;
    width           : 245px;
}

@media(max-width:1800) {
    #news>.bb {
        max-width: 1210px;
    }
}


@media screen and (max-width: 768px) {
    #aboutUs .title {
        text-align: center;
    }

    #aboutUs .main .hb::after {
        left     : 50%;
        transform: translateX(-50%);
    }

    #aboutUs .main .hb {
        margin-bottom: 10px;
        padding      : 3px;
    }

    #aboutUs .main .bb {
        line-height: 1.5;
    }

    #aboutAndProduct {
        padding-top     : 1rem;
        background-image: none !important;
    }

    #aboutUs .main {
        width  : auto !important;
        padding: 0 1rem;
    }

    #product {
        margin-top: 60px !important;
    }

    #product .hb {
        margin-bottom: 30px;
    }

    #productList {
        margin-top: 20px !important;
    }

    #productAdvantage .bb>div {
        display              : grid !important;
        grid-gap             : 1rem;
        grid-template-columns: auto auto;
    }

    #productAdvantage .bb .item {
        text-align: center;
    }

    #productAdvantage .bb .item img {
        width    : auto;
        max-width: 100%;
    }

    #productAdvantage .fb {
        display: none;
    }


    #productAdvantage .hb p:nth-child(3) {
        margin-bottom: 50px;
    }

    #news {
        padding: 1rem 0;
    }

    #news h3 {
        margin    : 0 0 30px 0 !important;
        text-align: center;
    }

    #news h3::after {
        left     : 50%;
        bottom   : -10px !important;
        transform: translateX(-50%);
    }

    #news>.bb {
        margin : 0;
        padding: 0 1rem;
    }

    #news .thumb {
        width: 20%;
    }

    #news .first {
        border-bottom : solid 1px #f08300;
        padding-bottom: 20px;
    }

    #news .first .bb {
        padding: 0 0 0 1rem;
    }

    #news .first .date,
    #news .first .date {
        margin-bottom: 0 !important;
        color        : #666;
        font-weight  : normal;
        font-size    : .6rem;
        font-style   : italic;
    }

    #news .first .date,
    #news .first .title {
        margin-bottom: 0 !important;
    }

    #news .first .btnMore {
        display: none;
    }

    #news .list .item {
        flex-direction: column;
    }

    #news .list .item .title {
        padding-bottom: 0;
    }

    #news .list .item .date {
        width     : auto;
        font-style: italic;
        font-size : .6rem;
    }

    #news .intro {
        display           : -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow          : hidden;
    }

    #contact {
        padding         : 1rem 1rem;
        background-image: none !important;
    }

    #contact .bb {
        width: auto;
    }

    #navProduct .nav {
        flex-wrap      : nowrap;
        overflow-x     : scroll;
        justify-content: flex-start !important;
    }

    #navProduct .nav .nav-item {
        white-space: nowrap;
        padding    : 0 1rem;
    }

    #navProduct .nav-item a {
        padding: 0 0 0;
    }
}