/* =====================================
    MEDIA QUERIES.
===================================== */

@media (max-width:1600px) {
    .why-us-info {
        width: 80%;
        padding-left: 40px;
    }
    .services-layer {
        padding: 30px 0px;
    }
    .left-wrapper-content {
        width: 80%;
    }
}

@media (max-width:1300px) {
    .home-about-img {
        margin-top: 0px;
    }
    .home-about {
        margin: 0px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .left-wrapper-content {
        width: 90%;
    }
    .ws-inner {
        margin: 0px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 90%;
        padding-left: 50px;
    }
}

@media (max-width:1200px) {
    .container {
        max-width: 95%;
    }
    .hero-slider .flickity-page-dots {
        display: none;
    }
    .why-us-info {
        width: 85%;
        padding-left: 30px;
    }
    .news-caption {
        padding: 35px 20px;
        position: absolute;
        top: auto;
        bottom: -50px;
        width: 100%;
        border: 0;
    }
}

@media (max-width:991px) {
    .pages-hero {
        height: 260px;
    }
    .grid-four-col .grid-sizer,
    .grid-four-col .grid-box {
        width: 50%;
    }
    .social-media {
        display: none;
    }
    .home-about {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding-right: 0px;
    }
    .why-us-img-bg {
        height: 400px;
    }
    .why-us-info {
        width: 100%;
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding: 50px 30px;
    }
    .contact-info-right {
        display: none;
    }
    .contact-form-layer {
        background-color: #FFF;
        padding: 50px;
        max-width: 650px;
        margin-top: -300px;
        position: relative;
        z-index: 1;
    }
    .testimonials-layer {
        padding: 60px 0px 55px;
    }
    .testimonials-layer-alt {
        padding: 60px 0px 55px;
    }
    .testimonials-carousel .owl-dots {
        display: none;
    }
    .testimonial-box p {
        font-size: 16px;
        line-height: 27px;
    }
    .user-avatar {
        width: 110px;
    }
    .testimonial-box .fas {
        position: absolute;
        top: 13%;
        font-size: 120px;
    }
    p.profession {
        margin-top: 5px;
    }
    footer {
        padding: 75px 0px 40px;
    }
    hr.footer {
        margin: 50px 0px 30px;
    }
    .bottom-footer {
        position: absolute;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 10px 30px;
    }
    .bottom-footer {
        position: relative;
        bottom: 10px;
        left: 0%;
        transform: translate(0%, 0%);
        text-align: center;
        padding: 10px 30px;
    }
    .call-to-action {
        height: 100%;
        padding: 2rem 1.8rem 1.8rem;
    }
    .call-left,
    .call-right {
        float: none;
        padding: 0rem;
        text-align: center;
    }
    .call-right {
        margin-top: 10px;
    }
    .call-button {
        margin-top: 15px;
    }
    .right-contact-badge {
        height: auto;
    }
    .slider-caption p {
        width: 70%;
    }
    .about-info-layer {
        padding-right: 0px;
    }
    .services-layer-alt .section-title {
        width: 100%;
        margin-bottom: 20px;
    }
    .right-title {
        margin-top: 10px;
    }
    .left-wrapper-layer {
        height: 500px;
        background: rgba(255, 255, 255, 0.85);
    }
    .call-action-wrapper p {
        margin: 15px 0px;
    }
    .ci-right {
        display: none;
    }
    .why-us-content {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding-left: 0px;
    }
    .ci-left {
        margin-top: 0px;
        margin-right: 0px;
    }
    .aside-right {
        padding-left: 0px;
    }
    .product-featur-img {
        outline: 5px solid var(--primary-color);
        outline-offset: -15px;
    }
    .ws-bg-img {
        height: 400px;
    }
    .ws-content {
        background-color: var(--primary-heading);
        height: auto;
        padding: 70px 30px;
        margin-top: 0px;
        margin-left: 0px;
        z-index: 1;
        position: relative;
    }
    .ws-inner {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        width: 100%;
        padding-left: 0px;
    }
    .counter-wrapper-alt {
        background-image: url("../images/counter-bg.jpg");
        padding: 50px 0px;
        margin-top: 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: -1;
    }
    .why-us-info-alt {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding-right: 0px;
    }
    .why-us-about .image-badget {
        background-color: var(--primary-color);
        padding: 30px;
        max-width: 300px;
        position: absolute;
        bottom: 15px;
        left: 15px;
        margin-left: 0px;
    }
    .small-text {
        margin-top: 15px;
    }
    .why-us-info-alt h2 {
        font-size: 30px;
        line-height: 35px;
    }
    .feature-side-top {
        margin-top: 20px;
    }
    .product-card-caption {
        height: 100%;
        background-color: #FFF;
        padding: 50px 30px;
    }
    .inner-pc {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding-right: 0px;
    }
    .testimonials-layer-alt .section-title h2 {
        font-size: 30px;
        line-height: 35px;
    }
    .counter-box .counter {
        font-size: 30px;
        line-height: 35px;
    }
}

@media (max-width:767px) {
    .slider-caption h1 {
        font-size: 25px;
        line-height: 42px;
        width: 100%;
    }
    .slider-caption .subtitle {
        font-size: 14px;
    }
    .slider-caption p {
        font-size: 14px;
        line-height: 23px;
        margin: 15px 0px;
    }
    .slider-caption .subtitle {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .section-title {
        width: 80%;
    }
    .home-slider {
        width: 100%;
        height: 100vh;
    }
    .hero-slider {
        width: 100%;
        height: 100vh;
    }
    .error-page-content {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        transform: translate(0%, 0%);
        text-align: center;
        color: #FFF;
        padding: 0rem 5rem;
    }
    .error-page-content {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        transform: translate(0%, 0%);
        text-align: center;
        color: #FFF;
        padding: 0rem 5rem;
    }
    .pages-title h1 {
        font-size: 30px;
        line-height: 35px;
    }
    .contact-form-layer {
        max-width: 550px;
        padding: 50px 30px;
        margin-top: -300px;
        position: relative;
        z-index: 1;
    }
    .contact-form-layer .section-title {
        margin: auto auto 50px;
    }
    .bg-thumb .date-layer {
        bottom: auto;
        top: 0px;
        right: 0px;
    }
    .testimonials-layer .section-title {
        margin: auto auto 20px auto;
    }
    .testimonials-layer .section-title h2 {
        font-size: 30px !important;
    }
    .news-carousel .owl-carousel .item .news-thumbnail {
        margin: 0px;
    }
    .support-banner {
        padding: 50px 0px;
    }
    .support-layer {
        margin-top: 50px;
    }
    .support-banner p {
        width: 80%;
    }
    .blog-caption {
        background-color: #FFF;
        margin-top: 20px;
        z-index: 1;
        position: relative;
        padding: 20px 0px;
        width: 100%;
    }
}

@media (max-width:576px) {
    .section-title {
        width: 90%;
    }
    .grid-four-col .grid-sizer,
    .grid-four-col .grid-box {
        width: 100%;
    }
    .error-page-content {
        position: absolute;
        padding: 0rem 3rem;
    }
    .error-page-content h1 {
        font-size: 6rem;
    }
    .home-about h2 {
        color: #a3b0b4;
        opacity: 1;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 18px;
    }
    .h-counter {
        margin-top: 30px;
    }
    .home-about h3 {
        font-size: 22px;
        line-height: 30px;
        margin-top: 0px;
        color: #333;
    }
    .home-about p {
        margin: 20px 0px;
        color: #666;
    }
    .home-about p {
        margin: 20px 0px;
        color: #666;
    }
    .news-caption h4 {
        color: #444;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 17px;
    }
    .contact-badge {
        margin-top: 50px;
    }
    .left-contact-badge {
        height: auto;
        padding: 0px;
    }
    .pages-hero-contact {
        height: 350px;
    }
    .contact-title,
    .pages-title {
        bottom: 50px;
    }
    .testimonial-box {
        width: 90%;
    }
    .testimonial-box p {
        font-size: 14px;
        line-height: 22px;
    }
    .user-avatar {
        width: 80px;
    }
    .testimonial-box h3 {
        font-size: 20px;
    }
    .social-media {
        bottom: 90px;
    }
    .slider-caption p {
        width: 85%;
    }
    .hb-box {
        display: block !important;
    }
    .hb-box {
        margin-top: 30px;
    }
    .team-carousel .owl-carousel .item .team-portrait {
        margin: 0px;
    }
    .section-title h2 {
        font-size: 40px;
    }
    .news-caption {
        bottom: -80px;
    }
    .support-banner p {
        width: 90%;
    }
    .replay-layer {
        padding-left: 20px;
    }
    .post-title h1 {
        font-size: 30px;
        line-height: 35px;
        width: 100%;
        padding-right: 30px;
    }
    .comment-box p {
        font-size: 14px;
        line-height: 25px;
    }
    .why-us-about .image-badget {
        background-color: var(--primary-color);
        padding: 30px;
        max-width: 100%;
        position: relative;
        bottom: auto;
        left: 0px;
    }
    .contact-box {
        width: 100%;
        height: 550px;
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        right: 0;
        padding: 40px;
    }
    .contact-parallax {
        background-image: url("../images/farmey-8.jpg");
        height: 550px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    .tt-carousel .owl-dots {
        text-align: center;
        margin-top: 15px;
    }
}

@media (max-width:480px) {
    .section-title {
        width: 95%;
    }
    .image-badget {
        background-color: var(--primary-color);
        padding: 30px;
        max-width: 100%;
        position: relative;
        bottom: 0px;
        left: 0px;
        margin-top: 50px;
    }
    .photo-contact {
        display: none;
    }
    .product-description {
        background-color: #FFF;
        position: relative;
        -webkit-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14);
        -moz-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14);
        box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14);
        padding: 40px 30px;
        margin: 0px 0px 40px;
        text-align: center;
    }
    .testimonial-box {
        width: 95%;
    }
    .slider-caption p {
        width: 90%;
    }
    .service-box p {
        font-size: 14px;
        line-height: 24px;
    }
    .left-col {
        padding-right: 0px;
    }
    .left-wrapper-content {
        width: 100%;
        padding: 0px 30px;
    }
    .shadow-box {
        max-width: 700px;
        margin: -250px auto auto;
        padding: 50px 20px;
    }
    .comment-box .media {
        display: block !important;
    }
    .comment-box .media .mr-3 {
        margin-bottom: 20px;
    }
    .left-title h2 {
        width: 90%;
    }
    .accordion a {
        font-size: 15px;
    }
    .video-iframe {
        width: 100%;
        height: 400px;
    }
    .fp-caption {
        position: absolute;
        bottom: 20px;
        left: 15px;
        width: 90%;
    }
    .feature-side-top .fp-caption {
        position: absolute;
        bottom: 10px;
        left: 15px;
        width: 80%;
    }
    .feature-side-bottom .fp-caption {
        position: absolute;
        bottom: 10px;
        left: 15px;
        width: 80%;
    }
    .feature-side-top:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #FFF, #FFF);
        opacity: 0.6;
    }
    .feature-side-bottom:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #FFF, #FFF);
        opacity: 0.6;
    }
}


/* wangkangkai */

@media (max-width: 576px) {
    .section-title p {
        font-size: 14px;
        margin-top: 0;
    }
    .section-title h3 {
        font-size: 24px;
    }
    .section-title h2 {
        font-size: 36px;
    }
    .tp-caption p {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .team-carousel .owl-dots {
        margin-top: 0
    }
    .services-layer .section-title h2 {
        font-size: 36px;
    }
    .services-layer .container {
        padding-left: 0;
        padding-right: 0;
    }
    .home-about .hb-box {
        display: none !important;
    }
    .spacing-md .image-badget {
        display: none;
    }
    .service-box {
        padding: 0;
        background: #fff;
    }
    .service-box .media {}
    .service-box p {
        display: none;
    }
    .service-box .sb-icon {
        width: 105px;
        float: none;
    }
    .service-box .sb-caption h4 {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .services-layer .col-row .mx-auto .row .col-md-6 {
        border-bottom: 1px solid #eee;
    }
    .wy-index-ditu .data .item {
        width: 47%;
        margin-bottom: 20px;
    }
    .wy-index-ditu .data .item p {
        line-height: 20px;
    }
    .wy-index-ditu .data .item h3 span {
        font-size: 15px;
        top: -15px;
        margin-left: 3px;
    }
    .wy-index-ditu .data .item h3 {
        font-size: 32px;
        line-height: 35px
    }
    .wy-index-ditu .ditu-main {
        display: none;
    }
    .wy-index-ditu .mobi-ditu {
        display: block;
    }
    .wy-index-ditu .container {
        padding: 0;
    }
    .wy-index-ditu {
        background: url(../images/global-bg.png) center right no-repeat;
        margin: 3rem 0;
        background-size: 160%;
    }
    .why-us-layer {
        background: none;
        margin-bottom: 0 !important;
    }
    .why-us-img-bg {
        height: 268px !important;
    }
    .why-us-info h2 {
        font-size: 22px;
        padding-bottom: 12px;
    }
    .why-us-info p {
        display: none;
        font-size: 14px;
    }
    .why-us-info p:nth-child(2) {
        display: block;
    }
    .news-caption {
        position: initial !important;
    }
    .team-carousel .owl-dots button.owl-dot {
        width: 4px !important;
        height: 12px;
        border: none;
        background: #d7d7d7;
    }
    .spacing-md {
        margin-top: 30px;
    }
    .team-carousel .owl-dots button.owl-dot.active {
        border: none;
        background: var(--primary-color);
    }
    .why-us-info h2::after {
        width: 58px;
    }
    .why-us-info .btn {
        font-size: 14px;
        font-weight: 500;
        border-radius: 50px;
        padding: 9px 32px;
    }
    .why-us-info {
        padding: 35px 22px;
    }
    footer {
        padding: 0 !important;
    }
    footer .container {
        display: none;
        padding: 0 8px;
    }
    footer .bottom-footer {
        padding: 15px 0;
        background: #262930;
        margin-top: 0
    }
    footer .bottom-footer p {
        font-size: 13px;
        line-height: 22px;
    }
    footer .bottom-footer .container {
        display: block;
    }
    p {
        font-size: 14px;
    }
    .search-wrap h3.title {
        font-size: 20px;
        margin-bottom: 15px;
        margin-top: 35px;
    }
    .search-wrap form .input-box input {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        color: #444;
    }
    .search-wrap form .input-tips h4 {
        font-size: 16px;
    }
    .search-wrap form .input-tips p {
        line-height: 22px;
        margin-bottom: 5px;
        font-size: 13px;
    }
    .search-wrap form .btn-search {
        font-size: 15px;
    }
    .search-wrap {
        width: 95%;
        height: 480px;
    }
    .search-wrap form {
        display: block;
        padding: 3% 5%;
    }
    .search-wrap form .input-box {
        margin-right: 0;
    }
    .search-wrap form .input-tips {
        margin-top: 20px;
    }
    .detail {
        width: 100%;
        padding-bottom: 88px;
    }
    .detail .code-list {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        padding-top: 0;
        line-height: 38px;
        border-bottom: 1px solid #eee;
        color: #121212;
    }
    .detail .code-list li {
        font-size: 15px;
        margin-right: 0;
        line-height: 32px;
    }
    .detail .continue {
        float: right;
        width: 88px;
        height: 32px;
        border-radius: 50px;
        background: var(--secundary-color);
        color: #ffffff;
        border: none;
        font-size: 12px;
    }
    .detail .code-list li:last-of-type {
        display: none;
    }
    .detail .jsondata li {
        padding: 10px;
        font-size: 15px;
        line-height: 26px;
    }
    .detail .jsondata .statustext {
        background: rgba(255, 255, 255, 0.1);
        right: -10px;
        top: -29px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 18px;
    }
    .detail .jsondata li .key {
        position: initial;
        width: initial;
        text-align: left;
        padding: 0;
        display: initial;
        color: #666;
    }
    .detail .content-title {
        background: url(../images/small-ok.png) 0 no-repeat;
        background-size: 42px;
        padding-top: 32px;
        padding-bottom: 20px;
        padding-left: 55px;
        line-height: 30px;
        font-size: 22px;
        margin-top: 10px;
    }
    .copyright.guarantee {
        border: none;
    }
    .copyright.guarantee p {
        font-size: 13px;
        color: #999898;
    }
    .detail .jsondata {
        padding: 0;
    }
    .detail .remark {
        padding: 2px;
    }
    .pages-title p {
        font-size: 14px;
    }
    .pages-title h1 {
        font-size: 24px;
        line-height: 26px;
    }
    .about-info-layer h2 {
        font-size: 24px;
    }
    .about-info-layer h2 span {
        font-size: 24px;
    }
    .about-info-layer h5.subtitle {
        font-size: 12px;
        line-height: 16px;
    }
    .experience-layer h4 {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
    }
    .section-title h2 {
        font-size: 24px !important;
    }
    .services-layer-alt .section-title h5.subtitle {
        font-weight: 500;
    }
    .team-carousel.about-hzkh .item {
        width: 33%;
        padding: 0px 1%;
    }
    .team-carousel.about-hzkh .item .tp-caption {
        padding: 0;
    }
    .team-carousel.about-hzkh .item .tp-caption h4 {
        font-size: 13px;
    }
    .service-box-alt h4 {
        font-size: 18px;
    }
    .service-box-alt {
        padding: 35px 8px 40px 8px;
    }
    .product-description {
        box-shadow: initial;
        padding: 12px 0px 0;
        margin-bottom: 28px;
    }
    .hc-case-cont .top-title {
        border-bottom: 1px solid #eee;
        text-align: center;
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
    .hc-case-cont .top-title h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .hc-case-cont .top-title .time {
        font-size: 13px;
    }
    .product-description p {
        line-height: 22px;
        font-size: 14px;
    }
    .product-description h3 {
        font-size: 15px;
        color: #444;
    }
    .product-description .btn-default {
        background-color: var(--primary-color);
        border: solid 1px var(--primary-color);
        color: #fff;
        font-weight: 500;
        letter-spacing: 0
    }
    .service-wrapper-layer .services-carousel .item {
        width: 100%;
    }
    .serv-box h4 {
        font-size: 17px;
        margin-bottom: 3px;
    }
    .service-wrapper-layer {
        padding: 60px 0;
        padding-bottom: 25px;
    }
    .hc-service .item {
        display: block;
    }
    .hc-service .item .product-feature {
        width: 100%;
    }
    .hc-service .item .product-description {
        width: 100%;
        border: none;
        text-align: center;
    }
    .hc-service .item .product-description div p {
        display: none;
    }
    .hc-service .item .product-description div p:first-child {
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
    }
    .hc-service .item .product-description h3 {
        font-size: 20px;
    }
    .hc-service .item .product-description div {
        margin: 12px 0 0px;
    }
    .blog-grid {
        margin-bottom: 25px;
    }
    .bg-caption h4 {
        white-space: initial;
        overflow: initial;
        text-overflow: initial;
        font-size: 18px;
        line-height: 24px;
    }
    .out-bg-caption {
        padding: 0px 19px 16px;
    }
    .out-bg-caption p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 20px;
        font-size: 13px;
    }
    .out-bg-caption .btn-default {
        background-color: var(--primary-color);
        border: solid 2px var(--primary-color);
        color: #fff;
        letter-spacing: 0;
        font-weight: 500;
    }
    .blog-content p {
        font-size: 14px;
        line-height: 22px;
        margin: initial;
        margin-bottom: 12px;
        color: #454545;
    }
    .site-pagination .page-link {
        padding: 6px 8px;
        margin: 0 2px;
        font-size: 13px;
    }
    .post-title h1 {
        font-size: 20px;
        line-height: 32px;
        margin-top: 22px;
    }
    .shadow-box {
        margin: initial;
        padding: initial;
    }
    .custom-form {
        height: 44px;
        padding: 12px;
        font-size: 13px;
        font-weight: 500;
    }
    #contact-form .hc-btn {
        margin: auto;
        display: block;
        width: 220px;
        height: 44px;
        font-size: 15px;
        border-radius: 50px;
        font-weight: 500;
        letter-spacing: 0;
    }
}