@media only screen and (min-width: 990px) {
    .nav-list {
        display: block !important;
    }
}
@media only screen and (max-width: 989px) {
    .header {}
    /*------index-------*/
    .index_banner .block {
        width: 100%;
        padding: 0%;
        margin-top: 10px;
    }
    .index_service {}
    .index_line {}
    .index_ad li {
        width: 10%;
    }
    /**/
    .nav-mobile {
        display: block;
        top: 0px;
    }
    .nav {
        width: 100%;
        padding: 0;
        top: -70px;
    }
    .nav-list {
        display: none;
        width: 100vw;
        padding-top: 50px;
        padding-bottom: 50px;
        position: relative;
        background: #222;
        background: rgba(0, 0, 0, 0.8);
        left: calc(-6% + -3px);
        top: 60px;
        z-index: 990;
    }
    .nav-list li+li {
        border-top: 1px solid #222;
    }
    .nav-list li strong {
        display: none;
    }
    .nav-list li.icon {
        display: inline-block;
        float: left;
        width: 25%;
        padding: 0;
        margin: 0;
    }
    .nav-item {
        width: 100%;
        height: auto;
        padding: 0;
        float: none;
    }
    .nav-item:hover {
        background: #fff;
    }
    .nav-item > a {
        color: #fff;
        padding: 15px;
    }
    .nav-item:hover > a {
        color: #222;
    }
    .nav-item.active > a {
        color: #EE9E0E;
    }
    .nav-click {
        display: block;
    }
    .nav-mobile-open {
        border-radius: 5px 5px 0 0;
    }
    .nav-item:hover .nav-submenu {
        display: none;
    }
    .nav-submenu {
        position: static;
        width: 100%;
        text-align: center;
    }
    .footer .copy_right {
        text-align: center;
    }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
    .header .top_tel {
        margin-right: 10%;
    }
    .index_link {
        float: right;
        width: 48%;
        height: 150px;
        margin-bottom: 20px;
    }
    .index_link {}
    .product_list li {}
    .nav-list {
        left: 0;
    }
}

@media only screen and (max-width: 767px) {
    /*------common-------*/
    .block {
        width: 94%;
        padding: 0 3%;
    }
    input[type="text"],
    input[type="password"],
    textarea {
        width: 100%;
    }
    /**/
    /*------header-------*/
    .header {}
    .top_tel {
        display: none;
    }
    .homelogo {
        width: 50%;
        top: 10px;
    }
    .homelogo img {
        width: auto;
    }
    /**/
    /*------index-------*/
    .page_banner img {
        width: 200%;
        position: relative;
        left: -10%;
    }
    .index_service {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .index_service .item {
        width: 100%;
        height: auto;
    }
    .index_about,
    .index_news {
        float: left;
        width: 100%;
        padding: 1% 5%;
        margin: 0px;
    }
    /**/
    /*------main-------*/
    .main {
        padding-bottom: 0px;
    }
    .main .page_main,
    .main .page_side,
    .main .product_list,
    .main .news_list {
        width: 100% !important;
    }
    .main .page_side {
        padding-top: 40px;
    }
    /**/
    /*------contact info-------*/
    .index_about .content img {
        float: left;
        width: 100% !important;
        clear: both;
    }
    /**/
    /*------product-------*/
    .page_side .category_list .title {
        margin-top: 0px;
    }
    .product_list li {
        width: 100%;
    }
    .products_detail_box .pro_img {
        width: 100%;
    }
    .products_detail_box .slider-for {
        display: none;
    }
    .slider-nav {
        width: 100%;
        margin: 2% 0% !important;
    }
    .slider-nav .slider-nav-item {
        height: auto;
        margin: 10px 0;
        border: 1px solid #fff;
        outline: none;
        filter: gray;
    }
    .right_box {
        display: inline-block;
        width: 100%;
        padding: 0 1%;
        color: #eee;
    }
    /**/
    /*------contact-------*/
    .contact_info {
        float: left;
        width: 100%;
        margin-top: 30px;
    }
    .contact_info dt,
    .contact_info dd {
        padding-left: 0px;
    }
    .contact_form .field {
        display: inline-block;
        width: 100%;
        position: relative;
    }
    .contact_form input[type="text"] {
        float: left;
        width: 100%;
        margin: 0px 0px 10px;
    }
    .contact_form textarea {
        width: 100% !important;
        height: 195px !important;
        margin-left: 0px;
    }
    .contact_form .field.textarea .form_icon_no img,
    .contact_form .field.textarea .form_icon_ok img {
        position: absolute;
        top: -190px !important;
        right: 16px !important;
    }
    .contact_form .btn_box {
        width: 100%;
    }
    .btn_box .btn_submit {
        width: 180px;
        height: 45px;
        line-height: 45px;
    }
    /**/
    /*------cart-------*/
    table,
    thead,
    tbody,
    tfoot,
    th,
    td,
    tr {
        display: block
    }
    .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }
    .table tbody td {
        border: none;
        position: relative;
        padding-left: 30%;
        white-space: normal;
        text-align: left
    }
    .table tbody td~td {
        border-top: 1px solid #eee;
    }
    .table tbody td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700;
        margin-top: 5px;
        content: attr(data-title)
    }
    .table tbody td:after {
        display: none !important;
    }
    .table tfoot td li {
        width: 100%;
        padding: 5px 0
    }
    .table tbody td img {
        width: 100%;
        height: auto
    }
    .form-group .control-label {
        float: left;
        width: 100%;
        height: 100%;
        margin: 5px 0
    }
    .fancybox-overlay {
        background: #000
    }
    /*------footer-------*/
    .footer a {
        padding: 0;
    }
    .footer .company_info,
    .footer .footmenu,
    .footer .follow_info {
        width: 100%;
        padding: 20px 0 0 0;
        margin: 0;
    }
    .footer .copy_right {
        width: 100%;
        padding: 0;
        margin: 20px 0 10px;
    }
    .footer_info .mobile {
        display: block;
    }
    .footer .footmenu li,
    .footer .follow_info li {
        width: 50%;
        padding: 5px 0;
    }
    #toTop {
        margin-left: 38%;
    }
}