@media screen and (max-width: 1024px) and (min-width: 768px) {
    body {
        min-width: 0;
    }

    .main-area {
        width: 100%
    }

    .inner-main-area {
        width: 100%;
        padding: 0;
    }

    .responsive-nav ul {
        visibility: hidden;
        opacity: 0;
        margin: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: 250px;
        overflow: auto;
        background: #fff;
        z-index: 8000;
        color: #333;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
        -moz-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
        box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
    }

    .drawer-opened .responsive-nav ul {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .responsive-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 1px 1px 5px -1px #ccc;
    }

    .responsive-nav-menu {
        display: block;
    }

    .header {
        display: none;
    }

    .brand-product-item-container .pd-box {
        width: calc(33% - 2px);
    }

    .brand-product-item-container .pd-box .photo-box img {
        width: 100%;
    }

    .case-study-detail-container {
        padding: 5px 10px;
    }

    .case-study-detail-container .title-box.cs-title {
        float: none;
        width: 100%;
        padding: 20px 0 5px 0;
    }

    .case-study-detail-container .cs-social {
        float: none;
        width: 100%;
        padding: 5px 0;
    }

    .footer .bg {
        height: auto;
        background: none;
    }

    .footer .bg .left-area {
        width: 100%;
        float: none;
        height: auto;
        background: #58bbbd;
        text-align: center;
        padding: 20px 0;
    }

    .footer .bg .right-area {
        float: none;
        width: 100%;
        background: #58595b;
        margin-top: 0;
        padding-bottom: 15px;
    }

    .footer .bg .left-area .logo {
        margin: 0 auto;
    }

    .footer .top_btn {
        top: 100px;
        right: 2%;
    }

    .footer .top_btn:hover {
        top: 95px;
        right: 2%;
    }

    .footer .bg .right-area ul li:first-child {
        padding-left: 5%;
    }

    .footer .bg .right-area ul li {
        margin: 15px 0 0 0;
        padding-right: 0;
        width: 40%;
        padding-left: 5%;
    }

    .footer .copyright {
        padding: 0 10px;
    }

    .footer .privacy_terms {
        padding-right: 5px;
    }

    .gallery-page-container .pd {
        width: 50%;
        padding-top: 50%;
    }

    .page-and-back-container .back-arrow-text {
        float: none;
        width: calc(100% - 10px);
        padding-left: 10px;
        margin-bottom: 10px;
    }

    .page-and-back-container .page-container {
        float: none;
        width: calc(100% - 10px);
        padding-left: 10px;
    }

    .page-and-back-container {
        margin: 15px 0 0 0;
    }

    .page-container .page-text {
        display: none;
    }

    .case-study-item .img-container {
        float: none;
        width: 100%;
        text-align: center;
        background: #fff;
    }

    .case-study-item .content-container {
        float: none;
        width: 100%;
        background: #fff;
    }

    .about-us-page-container .color-bg-1 {
        display: none;
    }

    .about-us-page-container .color-bg-2 {
        display: none;
    }

    .about-us-page-container .img-bg {
        display: none;
    }

    .about-us-part-1, .about-us-part-2-title, .about-us-part-2-content, .about-us-part-3-title, .about-us-part-3-content {
        position: static;
    }

    .about-us-part-1 {
        width: calc(100% - 40px);
        margin: 20px 0;
        padding: 45px 20px;
        height: auto;
        box-shadow: none;
    }

    .about-us-part-2-title {
        width: calc(100% - 40px);
        padding: 40px 20px 10px 20px;
        height: auto;
    }

    .about-us-part-2-content {
        width: calc(100% - 20px);
        padding: 30px 10px;
    }

    .about-us-part-3-title {
        width: calc(100% - 40px);
        padding: 40px 20px 10px 20px;
        height: auto;
    }

    .about-us-part-3-content {
        width: calc(100% - 20px);
        padding: 30px 10px;
        box-shadow: none;
    }

    .client-slider-swiper-pagination.swiper-pagination {
        width: calc(100% - 20px);
    }

    .contact-us-page-container {
        padding: 0 15px;
    }

    .checkout-form .label-area {
        width: 110px;
    }

    .checkout-form .input-area {
        width: calc(100% - 110px);
    }

    .checkout-submit-btn {
        width: 150px;
    }

    .office-item {
        float: none;
        width: 98%;
    }

    .contact-bottom-img img {
        max-width: 100%;
    }

    .checkout-form {
        max-width: 100%;
        padding: 0 15px;
    }

    .product-content .left-content {
        float: none;
        width: 95%;
        margin: 0 auto;
    }

    .product-content .product-detail-container {
        float: none;
        width: 95%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .related-product-item-container .pd-box {
        width: calc(50% - 2px);
    }

    .related-product-item-container .pd-box .photo-box img {
        max-width: 100%;
    }

    .banner {
        padding-top: 50px;
        height: 33vw;
    }

    .slideshow-main-area {
        height: 33vw;
    }

    .slideshow-area {
        height: 33vw;
    }

    .bar_grey li.word {
        font-size: 18px;
    }

    .bar_grey {
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .bar_grey ul.Right a {
        margin-right: 10px;
    }

    .cat_01 .pd-box-area .pd-box {
        width: 50%;
        margin-right: 0;
        margin-bottom: 0;
    }

    .pd-box-area {
        width: 100%;
        margin-bottom: 0px;
    }

    .cat01_bg {
        height: auto;
        padding-bottom: 0px;
    }

    .pd-box-area .left-box-area {
        width: 70%;
        height: 130px;
        padding: 0 15%;
        position: relative;
        background: #fff;
        display: none;
    }

    .big_photo {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .pd-box-area .right-box-area {
        width: 100%;
        height: auto;
    }

    .pd-box-area .right-box-area .pd-box {
        width: calc(33% - 2px);
        height: auto;
    }

    .pd-box-area .pd-box .photo-box img {
        width: 100%;
    }

    .pd-box-area .pd-box .photo-box {
        height: auto;
    }

    .cat_03 .bg {
        height: auto;
    }

    .cat_03 .content {
        width: 40%;
        margin: 0 5% 30px 5%;
        height: auto;
        float: left;
    }

    .cat_03 .left_area {
        float: none;
        width: 100%;
        background: #fff;
        text-align: center;
    }

    .cat_03 .right_area {
        float: none;
        width: 100%;
        height: auto;
        padding-bottom: 10px;
    }

    .right_area p {
        height: auto;
        max-width: calc(100% - 20px);
        padding: 0 10px 15px 10px;
    }

    .cat_03 .content:nth-child(even) {
        float: none;
    }

    .home-big-cate {
        display: none;
    }

    .bar_grey.home-sm-cate {
        margin-top: 25px;
        margin-bottom: 0px;
    }

    .cat_04 {
        height: auto;
    }

    .cat_04 .row .pd {
        display: inline-block;
        width: 50%;
        height: 50vw;
    }

    .cat_04 .row .pd .img-mask {
        bottom: 0;
    }

    .cat_04 .row .pd img {
        width: 100%;
        height: 50vw;
    }

    .cat_05 img {
        float: left;
        width: 25%;
        margin-bottom: 8px;
    }

    .cat_05 .main-area_900 {
        width: 100%;
    }

    .title-box {
        padding: 23px 10px 16px 10px;
    }

    .right_area .more-btn-container {
        padding: 0px 10px;
    }

    .path-container {
        margin-top: 70px;
        padding-left: 10px;
    }

    .brand-container .editor-area {
        padding: 0 15px;
    }

    .brand-item {
    }

    .brand-info-container .img-container {
        width: 30%;
        margin: 0 calc(35% - 1px);
        float: none;
        margin-bottom: 20px;
    }

    .brand-info-container .info-content {
        width: 80%;
        float: none;
        margin-left: 0;
        padding: 0 10%;
    }

    .case-study-item {
        width: 90%;
        margin: 20px 5%;
    }

    .product-content .product-img-container {
        height: auto;
    }

    .product-content .product-img-container .main-img-container {
        text-align: center;
    }

    .product-content .gallery-preview-container .detail-gallery-item {
        width: 10%;
    }

    .related-product-item-container .pd-box .photo-box {
        text-align: center;
    }

    .bar_grey.home-sm-cate {
        display: block;
    }
}