@media (max-width: 1024px) {
  .container{
    width: 100% ;
  }
  .nav-wrapper {
    position: relative;
  }
  .nav-wrapper .logo a img {
    max-height: 80px;
  }
  .nav-wrapper .nav-section {
    position: absolute;
    top: 100%;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    overflow-y: auto;
    background-color: #ffffff;
    border-top: 1px solid #e1e1e1;
    padding: 0 60px;
    display: block;
    transition: 0.5s;
  }
  .nav-wrapper .nav-section .nav-ul {
    display: block;
  }
  .nav-wrapper .nav-section .nav-ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60px;
  }
  .nav-wrapper .nav-section .nav-ul li a span {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #000000;
    border-top: 0;
    border-left: 0;
    transform: rotate(-45deg);
    transition: 0.5s;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li {
    position: initial;
    visibility: visible;
    opacity: 1;
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .nav-ul-dl a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .nav-ul-dl a span {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #000000;
    border-top: 0;
    border-left: 0;
    transform: rotate(-45deg);
    transition: 0.5s;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .nav-ul-dl .nav-ul-dd {
    position: initial;
    visibility: visible;
    opacity: 1;
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .open a span {
    transform: rotate(45deg);
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .open .nav-ul-dd {
    max-height: 500px;
  }
  .nav-wrapper .nav-section .nav-ul .open a span {
    transform: rotate(45deg);
  }
  .nav-wrapper .nav-section .nav-ul .open .nav-ul-li {
    max-height: 500px;
  }
  .nav-wrapper .nav-section .nav-lang, .nav-wrapper .nav-section .nav-search {
    line-height: 60px;
  }
  .nav-wrapper .nav-section .nav-search .search-form {
    position: initial;
    margin-top: 30px;
    line-height: 60px;
    transform: rotateX(0deg);
  }
  .nav-wrapper .nav-section .nav-search .search-form form input[type=text] {
    width: calc(100% - 50px);
  }
  .nav-wrapper .nav-section .nav-search .search-form form button {
    width: 50px;
    height: 50px;
  }
  .nav-wrapper .nav-section-open {
    left: 0;
  }
  .nav-wrapper .nav-btn {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
  }
  .nav-wrapper .nav-btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 30px;
    height: 1px;
    border-radius: 1px;
    background: #000000;
  }
  .nav-wrapper .nav-btn span::before, .nav-wrapper .nav-btn span::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    border-radius: 1px;
    background: #000000;
    transition: 0.5s;
  }
  .nav-wrapper .nav-btn span::before {
    margin-top: -10px;
  }
  .nav-wrapper .nav-btn span::after {
    margin-top: 20px;
  }
  .nav-wrapper .open span {
    background: transparent;
  }
  .nav-wrapper .open span::before {
    transform: rotate(45deg);
    margin-top: unset;
  }
  .nav-wrapper .open span::after {
    transform: rotate(-45deg);
    margin-top: unset;
  }

  .banner-slide-thumb .banner-wrapper {
    padding: 0 60px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .title {
    font-size: 40px;
    line-height: 50px;
  }

  .index-product .item-product .thumb-img .product-mask .product-info {
    padding: 20px;
    bottom: 0;
  }
  .index-product .item-product .thumb-img .product-mask .product-info .title, .index-product .item-product .thumb-img .product-mask .product-info .subtitle {
    font-size: 20px;
    padding: 0;
  }
  .index-product .item-product .thumb-img .product-mask .product-info .desc {
    display: none;
  }
  .index-product .item-product .thumb-img .product-mask .product-info .more a {
    font-size: 16px;
    padding: 5px 20px;
  }

  .index-category .category-list .category-card .layer-fixed-video, .index-category .category-list .category-card .thumb-img {
    height: 180px;
  }

  .about-grid-list .about-line .thumb-desc {
    padding: 0 50px;
  }
  .about-grid-list .about-line .thumb-desc .title {
    font-size: 24px;
  }
  .about-grid-list .about-line .thumb-desc .desc {
    font-size: 16px;
  }

  .list-cases .item-case .desc {
    padding: 20px 10px;
  }

  .faqs-section .banner-faqs .faqs-topic {
    padding: 0 30px 0 80px;
  }
  .faqs-section .banner-faqs .faqs-topic .title::after {
    margin: 10px 0;
  }

  .show-news-body {
    padding: 50px 30px;
  }
}
@media (max-width: 992px) {
  .nav-wrapper {
    padding: 0 30px;
  }

  .banner-slide-thumb .banner-wrapper {
    padding: 0 30px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .title {
    font-size: 30px;
    line-height: 40px;
  }

  .index-about .about-section {
    flex-direction: column;
  }
  .index-about .about-section .about-video, .index-about .about-section .about-desc {
    width: 100%;
  }
  .index-about .about-section .about-desc {
    padding: 20px 15px;
  }

  .index-case .case-tabs-show .tabs-show .tab-desc .title {
    font-size: 30px;
  }

  .index-category .category-list .category-card .layer-fixed-video, .index-category .category-list .category-card .thumb-img {
    height: 150px;
  }
  .index-category .category-list .category-card .category-name {
    font-size: 24px;
  }

  .static-banner .mask .title {
    font-size: 32px;
  }
  .static-banner .mask .subtitle {
    font-size: 16px;
  }

  .about-grid-list .about-line .thumb-desc {
    padding: 15px 20px;
  }
  .about-grid-list .about-line .thumb-desc .title {
    font-size: 24px;
  }
  .about-grid-list .about-line .thumb-desc .title::after {
    width: 100px;
    margin: 10px 0 20px;
  }
  .about-grid-list .about-line .thumb-desc .desc {
    font-size: 14px;
    line-height: 20px;
  }

  .about-development .mask .mask-ul {
    width: 100%;
    padding: 0 50px;
  }

  .list-cases .item-case .desc {
    font-size: 14px;
    padding: 10px;
  }

  .faqs-section .position {
    padding-left: 25px;
    padding-right: 25px;
  }
  .faqs-section .banner-faqs {
    width: calc(100% - 50px);
  }
  .faqs-section .banner-faqs .faqs-topic {
    padding: 0 20px 0 50px;
  }
  .faqs-section .banner-faqs .faqs-topic .title {
    font-size: 20px;
  }
  .faqs-section .banner-faqs .faqs-topic .title::after {
    margin: 10px 0;
  }
  .faqs-section .banner-faqs .faqs-topic .desc {
    line-height: 20px;
  }
  .faqs-section .list-contacts {
    padding: 30px 25px 50px;
  }
  .faqs-section .list-contacts .item-contact .tel {
    font-size: 24px;
  }

  .divide-category a {
    padding: 30px 10px;
  }

  .show-news-body .left-news-content {
    padding-right: 30px;
  }
  .show-news-body .right-news-list {
    padding-left: 30px;
  }

  .show-product-intro .product-detail {
    padding: 50px 30px;
  }

  .show-product-field {
    min-height: 300px;
  }

  .show-product-features .features-line .thumb-desc {
    padding: 30px;
  }
  .show-product-features .features-line .thumb-desc .title {
    font-size: 24px;
  }

  .show-products-tab {
    padding: 50px 15px;
  }

  .warranty-section .warranty-form {
    width: 90%;
  }
  .warranty-section .warranty-form .form-inline .inline-flex label {
    width: 120px;
  }
  .warranty-section .warranty-form .form-inline .inline-flex .select-ul, .warranty-section .warranty-form .form-inline .inline-flex input, .warranty-section .warranty-form .form-inline .inline-flex textarea {
    width: calc(100% - 120px);
  }
  .warranty-section .warranty-form .form-line .inline-flex label {
    width: 120px;
  }
  .warranty-section .warranty-form .form-line .inline-flex textarea {
    width: calc(100% - 120px);
  }

  .flex-footer {
    padding: 50px 15px;
  }
  .flex-footer .item-footer {
    padding: 0 10px;
  }
}
@media (max-width: 576px) {
  .nav-wrapper {
    padding: 0 15px;
  }
  .nav-wrapper .logo a img {
    max-height: 60px;
  }
  .nav-wrapper .nav-section {
    height: calc(100vh - 60px);
    padding: 0 20px;
  }
  .nav-wrapper .nav-section .nav-ul li a {
    font-size: 16px;
    line-height: 50px;
  }
  .nav-wrapper .nav-section .nav-ul li a span {
    width: 10px;
    height: 10px;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .nav-ul-dl a span {
    width: 10px;
    height: 10px;
  }
  .nav-wrapper .nav-section .nav-ul li .nav-ul-li .nav-ul-dl:hover a {
    background-color: transparent;
  }
  .nav-wrapper .nav-section .nav-lang {
    line-height: 50px;
  }
  .nav-wrapper .nav-section .nav-search .search-form {
    margin-top: 10px;
    line-height: 50px;
    padding: 10px;
  }
  .nav-wrapper .nav-section .nav-search .search-form form input[type=text] {
    width: calc(100% - 30px);
    line-height: 30px;
  }
  .nav-wrapper .nav-section .nav-search .search-form form button {
    width: 30px;
    height: 30px;
  }

  .scroll-banner-swiper .swiper-pagination-bullets {
    bottom: 10px;
  }
  .scroll-banner-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }

  .banner-slide-thumb .banner-wrapper {
    padding: 0 15px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .title {
    font-size: 20px;
    line-height: 30px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .subtitle {
    display: none;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .more {
    margin-top: 10px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text .more span {
    padding: 5px 15px;
  }
  .banner-slide-thumb .banner-wrapper .banner-text-center {
    padding-left: 0;
  }

  .index-product {
    flex-direction: column;
  }
  .index-product .item-product {
    width: 100%;
  }
  .index-product .item-product .item-product-column {
    padding-left: 0;
    flex-wrap: wrap;
  }
  .index-product .item-product .item-product-column .column-thumb {
    width: 100%;
  }
  .index-product .item-product .item-product-column .column-thumb:not(:last-child) {
    margin-bottom: 20px;
  }
  .index-product .item-product .item-product-column:not(:last-child) {
    margin-bottom: 20px;
  }
  .index-product .item-product:not(:last-child) {
    margin-bottom: 20px;
  }

  .index-case .case-tabs-title .tabs-item img {
    width: 30px;
  }
  .index-case .case-tabs-show .tabs-show .tab-desc {
    position: initial;
    transform: translate(0, 0);
    width: 100%;
    padding: 20px;
  }
  .index-case .case-tabs-show .tabs-show .tab-desc .title, .index-case .case-tabs-show .tabs-show .tab-desc .desc {
    color: #000000;
  }
  .index-case .case-tabs-show .tabs-show .tab-desc .title {
    font-size: 20px;
  }
  .index-case .case-tabs-show .tabs-show .tab-desc .more a {
    padding: 10px 30px;
  }

  .index-category .category-list .category-card {
    width: 100%;
  }
  .index-category .category-list .category-card .layer-fixed-video, .index-category .category-list .category-card .thumb-img {
    height: 200px;
  }
  .index-category .category-list .category-card:not(:last-child) {
    margin-bottom: 20px;
  }

  .index-video .video-list {
    flex-wrap: wrap;
  }
  .index-video .video-list .item-video {
    width: 100%;
  }
  .index-video .video-list .item-video:not(:last-child) {
    margin-bottom: 20px;
  }

  .static-banner .mask .title {
    font-size: 24px;
  }
  .static-banner .mask .subtitle {
    font-size: 16px;
    padding: 5px 0;
  }
  .static-banner .mask .mask-left-text, .static-banner .mask .mask-right-text {
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
  }

  .about-topic {
    font-size: 30px;
  }

  .about-intro .about-topic-line::before {
    width: 80px;
    left: calc(50% - 100px);
  }
  .about-intro .about-topic-line::after {
    width: 80px;
    right: calc(50% - 100px);
  }
  .about-intro .about-thumbs {
    padding: 20px 15px 0;
  }

  .about-icon-list {
    flex-wrap: wrap;
    padding: 30px 15px;
  }
  .about-icon-list .item-icon {
    width: 50%;
  }
  .about-icon-list .item-icon .icon-thumb img {
    max-width: 80px;
  }

  .about-grid-list .about-line:nth-child(odd) {
    flex-direction: column;
  }
  .about-grid-list .about-line:nth-child(even) {
    flex-direction: column;
  }
  .about-grid-list .about-line .thumb-img, .about-grid-list .about-line .thumb-desc {
    width: 100%;
  }
  .about-grid-list .about-line .thumb-desc {
    padding: 20px 15px;
  }
  .about-grid-list .about-line .thumb-desc .title {
    font-size: 30px;
  }
  .about-grid-list .about-line .thumb-desc .title::after {
    width: 80px;
    margin: 10px 0 20px;
  }
  .about-grid-list .about-line .thumb-desc .desc {
    font-size: 14px;
    line-height: 25px;
  }

  .about-development .mask {
    padding: 30px;
    min-height: 300px;
  }
  .about-development .mask .title {
    font-size: 30px;
  }
  .about-development .mask .title-line::before {
    width: 80px;
    left: calc(50% - 100px);
  }
  .about-development .mask .title-line::after {
    width: 80px;
    right: calc(50% - 100px);
  }
  .about-development .mask .desc {
    font-size: 16px;
  }
  .about-development .mask .mask-ul {
    padding: 0 15px;
  }
  .about-development .mask .mask-ul li {
    background-size: 40px;
    padding-left: 60px;
  }
  .about-development .mask .mask-ul li .headline {
    font-size: 24px;
  }

  .about-contact {
    flex-direction: column;
  }
  .about-contact .contact-title {
    width: 100%;
    font-size: 20px;
  }
  .about-contact .contact-link {
    margin-top: 20px;
  }

  .about-grid-list .about-line-row .thumb-img {
    padding: 30px 30px 0;
  }

  .contact-body .contact-way {
    width: 100%;
    padding: 30px 15px;
  }
  .contact-body .contact-way .topic-title {
    font-size: 24px;
  }
  .contact-body .contact-way .topic-title::after {
    margin: 10px 0 20px;
  }
  .contact-body .contact-way .contact-list li {
    background-position: left top;
    background-size: 20px;
    padding: 0 20px 0 30px;
  }
  .contact-body .contact-way .contact-list li:not(:last-child) {
    margin-bottom: 20px;
  }
  .contact-body .contact-form {
    width: 100%;
    padding: 30px 15px;
  }
  .contact-body .contact-form form .form-inline {
    flex-wrap: wrap;
  }
  .contact-body .contact-form form .form-inline input {
    width: 100%;
  }
  .contact-body .contact-form form .form-inline input:not(:last-child) {
    margin-bottom: 20px;
  }

  .case-topic-title {
    font-size: 24px;
    padding: 30px 0;
  }

  .list-cases .item-case {
    width: 100%;
  }
  .list-cases .item-case:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .page {
    padding: 30px 0;
  }

  .faqs-section .banner-faqs .faqs-topic {
    position: initial;
    transform: translate(0, 0);
    color: #000000;
    width: 100%;
    padding: 20px 0;
  }
  .faqs-section .banner-faqs .faqs-topic .title::after {
    border-color: #e1e1e1;
  }
  .faqs-section .banner-faqs .faqs-topic .desc {
    line-height: 30px;
  }
  .faqs-section .list-contacts .item-contact {
    width: 100%;
  }
  .faqs-section .list-contacts .item-contact:not(:nth-child(3n)) {
    margin-right: 0;
  }
  .faqs-section .list-faqs {
    padding: 0 30px 30px;
  }
  .faqs-section .list-faqs li .question {
    padding: 15px 0;
  }
  .faqs-section .list-faqs li .question::after {
    width: 10px;
    height: 10px;
  }
  .faqs-section .list-faqs li .answer {
    padding: 0 20px;
  }
  .faqs-section .list-faqs .open .answer {
    padding: 20px;
  }

  .divide-category {
    padding: 0 15px;
  }
  .divide-category a {
    padding: 10px;
  }

  .divide-section {
    flex-wrap: wrap;
    padding: 0 15px 30px;
  }
  .divide-section .divide-left, .divide-section .divide-right {
    width: 100%;
  }
  .divide-section .divide-right .list-download li a {
    padding: 10px 15px 10px 50px;
  }
  .divide-section .divide-right .list-download li a span:nth-child(2) {
    display: none !important;
  }

  .list-news .news-card {
    width: 100%;
  }
  .list-news .news-card:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .list-products .item-product {
    width: 50%;
  }

  .show-news-body {
    padding: 30px 15px;
  }
  .show-news-body .left-news-content {
    width: 100%;
    padding-right: 0;
  }
  .show-news-body .right-news-list {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .show-product-banner .product-info {
    padding: 10px 0;
  }
  .show-product-banner .product-info .type {
    font-size: 20px;
    line-height: 20px;
  }
  .show-product-banner .product-info .name {
    font-size: 16px;
  }

  .show-product-intro .product-thumb, .show-product-intro .product-detail {
    width: 100%;
  }
  .show-product-intro .product-thumb {
    padding: 0 15px;
  }
  .show-product-intro .product-thumb .swiper-product-thumbs {
    margin-top: 0;
  }
  .show-product-intro .product-thumb .swiper-product-controls {
    margin-bottom: 30px;
  }
  .show-product-intro .product-detail .title {
    font-size: 24px;
  }
  .show-product-intro .product-detail .name {
    font-size: 20px;
  }

  .show-product-features .features-line:nth-child(odd), .show-product-features .features-line:nth-child(even) {
    flex-direction: column;
  }
  .show-product-features .features-line .thumb-img, .show-product-features .features-line .thumb-desc {
    width: 100%;
  }
  .show-product-features .features-line .thumb-desc .title {
    font-size: 20px;
  }
  .show-product-features .features-line .thumb-desc .desc {
    font-size: 16px;
  }

  .show-products-tab {
    padding: 30px 15px;
  }
  .show-products-tab .tab-line-name {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .show-products-tab .tab-line-name a {
    width: 48%;
    margin-bottom: 10px;
  }
  .show-products-tab .tab-line-name .active {
    border-bottom: 1px solid #e1e1e1;
  }
  .show-products-tab .tab-line-content .item-content {
    overflow-x: auto;
  }
  .show-products-tab .tab-line-content .item-content img {
    display: block;
    width: 100%;
  }

  .show-case-body{
    padding: 50px 0 ;
  }

  .show-case-body h2{
    font-size: 24px ;
  }

  .show-case-body .content{
    padding: 50px 0 ;
  }

  .warranty-section {
    padding: 0 15px;
  }
  .warranty-section .warranty-form {
    width: 100%;
  }
  .warranty-section .warranty-form .form-inline {
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
  }
  .warranty-section .warranty-form .form-inline .inline-flex {
    width: 100%;
  }
  .warranty-section .warranty-form .form-inline .inline-flex:not(:last-child) {
    margin-bottom: 20px;
  }

  .flex-footer .item-footer {
    width: 100%;
  }
  .flex-footer .item-footer:not(:last-child) {
    margin-bottom: 20px;
  }
}