@media (min-width: 1800px) and (max-width: 1899px) {

}


@media (min-width: 1701px) and (max-width: 1799px) {
}

@media (min-width: 1600px) and (max-width: 1700px) {

    
}

@media (min-width: 1400px) and (max-width: 1599px) {

    .footer-common.middle-text {margin-left: 370px;}
    .banner-text span {font-size: 75px;}

    .sub-block .sub-block-grp .sub-block-img .sub-img::after {padding: 100% 0 0;}

     .header-top .logo-block a {max-width: 250px;}

}

@media (min-width: 1301px) and (max-width: 1399px) {

    .stickey-btn {right: -20px;}
    /* .main-nav .nav-bar ul li a {font-size: 18px; padding: 12px 20px;} */
    .banner-text span {font-size: 65px;}
    .banner-subtext span {font-size: 22px;}

    .text-block {margin: 80px 0;}
    .text-block .text-grp .text-left h1 {font-size: 34px;}
    .text-block .text-grp .text-left p {line-height: 1.7;}
    .product-title h2 {font-size: 34px !important;}

    .img-block {margin: 80px 0;}
    .img-block .img-block-grp {gap: 50px; align-items: stretch;}
    .img-block .img-block-grp .img-block-left::after {padding: 100% 0 0;}
    .img-block .img-block-grp .img-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .img-block .img-block-grp .img-block-text p {line-height: 1.6;}
    .img-block .img-block-grp .img-block-left {height: 100%;}
    .img-block .img-block-grp .img-block-text .btnbox {margin-top: 25px;}

    .middle-banner .banner-bg {min-height: 500px;}
    .middle-banner .banner-bg .banner-capt {width: 100%;}
    .middle-banner .banner-bg .banner-capt h4 {font-size: 34px; margin-bottom: 25px;}
    .middle-banner .banner-bg .banner-capt .btnbox ul li a {font-size: 20px;}
    .footer-common.middle-text {margin-left: 290px;}

    .sub-inner-banner .sub-inner {min-height: 680px;}
    .subpage-caption {margin: 80px 0;}
    .subpage-caption .subpage-text h1 {font-size: 20px;}
    .subpage-caption .subpage-text h2 {font-size: 34px; margin-bottom: 25px;}
    .subpage-caption .subpage-text p {line-height: 1.6;}

    .sub-block .sub-block-grp {margin-top: 80px; gap: 30px;}
    .sub-block .sub-block-grp .sub-block-text {width: 100%; margin: 0 0 40px;}
    .sub-block .sub-block-grp .sub-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .sub-block .sub-block-grp .sub-block-text p {line-height: 1.6;}
    .sub-block .sub-block-grp .sub-block-text .btnbox a {font-size: 20px;}
    .sub-block .sub-block-grp .sub-block-text .btnbox {margin-top: 25px;}
    .sub-block::after {height: 75px;}
    .sub-block .sub-block-grp .sub-block-img .sub-img::after {padding: 80% 0 0;}

     .header-top .logo-block a {max-width: 200px;}
    
}

@media (min-width: 1200px) and (max-width: 1300px) {

    .stickey-btn {right: -20px;}
    /* .main-nav .nav-bar ul li a {font-size: 18px; padding: 12px 20px;} */
    .banner-text span {font-size: 65px;}
    .banner-subtext span {font-size: 22px;}

    .text-block {margin: 80px 0;}
    .text-block .text-grp .text-left h1 {font-size: 34px;}
    .text-block .text-grp .text-left p {line-height: 1.7;}
    

    .img-block {margin: 80px 0;}
    .img-block .img-block-grp {gap: 50px; align-items: stretch;}
    .img-block .img-block-grp .img-block-left::after {padding: 100% 0 0;}
    .img-block .img-block-grp .img-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .img-block .img-block-grp .img-block-text p {line-height: 1.6;}
    .img-block .img-block-grp .img-block-left {height: 100%;}
    .img-block .img-block-grp .img-block-text .btnbox {margin-top: 25px;}

    .middle-banner .banner-bg {min-height: 500px;}
    .middle-banner .banner-bg .banner-capt {width: 100%;}
    .middle-banner .banner-bg .banner-capt h4 {font-size: 34px; margin-bottom: 25px;}
    .middle-banner .banner-bg .banner-capt .btnbox ul li a {font-size: 20px;}
    .footer-common.middle-text {margin-left: 285px;}

    .sub-inner-banner .sub-inner {min-height: 680px;}
    .subpage-caption {margin: 80px 0;}
    .subpage-caption .subpage-text h1 {font-size: 20px;}
    .subpage-caption .subpage-text h2 {font-size: 34px; margin-bottom: 25px;}
    .subpage-caption .subpage-text p {line-height: 1.6;}

    .sub-block .sub-block-grp {margin-top: 80px; gap: 30px;}
    .sub-block .sub-block-grp .sub-block-text {width: 100%; margin: 0 0 40px;}
    .sub-block .sub-block-grp .sub-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .sub-block .sub-block-grp .sub-block-text p {line-height: 1.6;}
    .sub-block .sub-block-grp .sub-block-text .btnbox a {font-size: 20px;}
    .sub-block .sub-block-grp .sub-block-text .btnbox {margin-top: 25px;}
    .sub-block::after {height: 75px;}
    .sub-block .sub-block-grp .sub-block-img .sub-img::after {padding: 90% 0 0;}

     .header-top .logo-block a {max-width: 200px;}
}

@media (min-width: 992px) and (max-width: 1199px) {

    .stickey-btn {right: -20px;}
    .main-nav .nav-bar ul li a {font-size: 18px; padding: 12px 20px;}
    .banner-text span {font-size: 65px;}
    .banner-subtext span {font-size: 22px;}

    .text-block {margin: 80px 0;}
    .text-block .text-grp .text-left h1 {font-size: 34px;}
    .text-block .text-grp .text-left p {line-height: 1.7;}
    

    .img-block {margin: 80px 0;}
    .img-block .img-block-grp {gap: 50px; align-items: stretch;}
    .img-block .img-block-grp .img-block-left::after {padding: 100% 0 0;}
    .img-block .img-block-grp .img-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .img-block .img-block-grp .img-block-text p {line-height: 1.6;}
    .img-block .img-block-grp .img-block-left {height: 100%;}
    .img-block .img-block-grp .img-block-text .btnbox {margin-top: 25px;}

    .middle-banner .banner-bg {min-height: 500px;}
    .middle-banner .banner-bg .banner-capt {width: 100%;}
    .middle-banner .banner-bg .banner-capt h4 {font-size: 34px; margin-bottom: 25px;}
    .middle-banner .banner-bg .banner-capt .btnbox ul li a {font-size: 20px;}
    .footer-common.middle-text {margin-left: 190px;}

    .sub-inner-banner .sub-inner {min-height: 600px;}
    .subpage-caption {margin: 70px 0;}
    .subpage-caption .subpage-text h1 {font-size: 20px;}
    .subpage-caption .subpage-text h2 {font-size: 34px; margin-bottom: 25px;}
    .subpage-caption .subpage-text p {line-height: 1.6;}

    .sub-block .sub-block-grp {margin-top: 80px; gap: 30px;}
    .sub-block .sub-block-grp .sub-block-text {width: 100%; margin: 0 0 40px;}
    .sub-block .sub-block-grp .sub-block-text h3 {font-size: 34px; margin-bottom: 25px;}
    .sub-block .sub-block-grp .sub-block-text p {line-height: 1.6;}
    .sub-block .sub-block-grp .sub-block-text .btnbox a {font-size: 20px;}
    .sub-block .sub-block-grp .sub-block-text .btnbox {margin-top: 25px;}
    .sub-block::after {height: 75px;}
    .sub-block .sub-block-grp .sub-block-img .sub-img::after {padding: 110% 0 0;}

    .header-top .logo-block a {max-width: 200px;}

}

@media (min-width: 768px) and (max-width: 991px) {

    .stickey-btn {right: -20px;}
    .banner-text span {font-size: 60px;}
    .banner-subtext span {font-size: 22px;}
    .text-block {margin: 70px 0;}

    .text-block .text-grp {flex-direction: column;}
    .text-block .text-grp .text-left {width: 100%;}
    .text-img {width: 100%; margin-top: 40px;}
    .text-img ul li {width: 22%;}

    
    .product-title h2 { font-size: 42px !important;}

    .img-block {margin: 70px 0;}
    .img-block .img-block-grp {flex-direction: column;}
    .img-block-img {width: 100%;}
    .img-block .img-block-grp .img-block-left {width: 100%;}
    .img-block .img-block-grp .img-block-text {width: 100%; margin-top: 50px;}
    .img-block .img-block-grp .img-block-text h3 {font-size: 32px;}

    .middle-banner .banner-bg .banner-capt {width: 100%;}
    .middle-banner .banner-bg {min-height: 450px;}
    .middle-banner .banner-bg .banner-capt h4 {font-size: 32px; margin-bottom: 30px;}
    .middle-banner .banner-bg .banner-capt .btnbox ul li a {font-size: 20px;}
    .middle-banner .banner-bg .banner-capt .btnbox {margin-top: 30px;}
    .footer-common.middle-text {margin-left: 75px;}

    .sub-inner-banner .sub-inner {min-height: 550px;}
    .subpage-caption {margin: 70px 0;}
    .subpage-caption .subpage-text h1 {font-size: 18px;}
    .subpage-caption .subpage-text h2 {font-size: 32px; margin-bottom: 25px;}
    .subpage-caption .subpage-text p {line-height: 1.7; font-size: 18px;}
    .sub-block .sub-block-grp {margin-top: 60px; flex-direction: column;}
    .sub-block .sub-block-grp .sub-block-text {width: 100%; margin: 0 0 40px;}
    .sub-block .sub-block-grp .sub-block-text h3 {font-size: 32px; margin-bottom: 25px;}
    .sub-block .sub-block-grp .sub-block-text p {font-size: 18px; line-height: 1.7;}
    .sub-block .sub-block-grp .sub-block-text .btnbox a {font-size: 18px;}
    .sub-block .sub-block-grp .sub-block-text .btnbox {margin-top: 25px;}
    .sub-block .sub-block-grp .sub-block-img {width: 100%;}
    .sub-block .sub-block-grp .sub-block-img .sub-img {width: 100%;}
    .sub-block::after {height: 75px;}
}

@media (max-width: 991px) {

    .menu-btn {display: flex; position: absolute; top: auto; right: 0; justify-content: center; align-items: center; z-index: 1000;}
    .main-nav{ position: fixed; top: 0; right: 100%; width: 100%; height: auto; bottom: 0; background:#141414; z-index: 1; transition: all .5s ease-in-out; flex-direction: column; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; }
    .header-top {justify-content: flex-start;}
    .main-nav > ul {flex-direction: column; height: 100%; padding: 0 20px; justify-content: flex-start; margin-top: 170px; align-items: flex-start;}
    .open-nav .main-nav{right: 0; }
    .main-nav {flex-direction: column; justify-content: flex-start;}
    .nav-bar {width: 100%; padding: 0 15px; margin-top: 200px;}
    .main-nav .nav-bar ul {flex-direction: column; align-items: flex-start;}
    .main-nav .nav-bar ul li:not(:first-child) {margin: 0;}
    .main-nav ul li a {align-items: center; justify-content: space-between; width: 100%; min-height: 50px;}
    .main-nav ul li a::after {display: none;}
    .main-nav ul li.menu-item-has-children:hover .icon {transform: rotate(0);}
    .main-nav ul li.menu-item-has-children.active .icon { transform: rotate(180deg);}
    .main-nav ul li.menu-item-has-children .sub-menu {left: 0; top: 0; padding: 0; position: relative; max-width: 293px;}
    .main-nav > ul > li.menu-item-has-children::after {display: none;}
    .main-nav ul li.menu-item-has-children .sub-menu {max-height: 0; margin: 0; opacity: 0; visibility: hidden; transition: all .3s ease-in-out;}
    .main-nav ul li.menu-item-has-children .sub-menu ul {padding-left: 20px;}
    .main-nav ul li.menu-item-has-children .sub-menu ul > li > a {font-size: 16px;}
    .main-nav ul li.menu-item-has-children.active .sub-menu {visibility: visible; opacity: 1;}
    .main-nav ul li.menu-item-has-children {width: 100%;}

    .main-nav ul.active li.menu-item-has-children .sub-menu {visibility: visible; opacity: 1; margin-top: 20px;}
    .header-top .logo-block {z-index: 2;}
    .header-top .logo-block a {z-index: 1; max-width: 150px;}
    .header-top .logo-block a img {height: 100%;}

    .main-nav ul.active li.menu-item-has-children .icon {}

    .main-nav .lan-link {margin: 30px 0 0 0; width: 100%; padding: 0 15px;}

    .main-nav .nav-bar ul li.menu-item-has-children .sub-menu {opacity: 1; left: 15px; top: auto; visibility: visible; pointer-events: all; position: relative; display: block; max-height: 0; margin: 0; overflow: hidden; transition: all .3s ease-in-out; padding: 0px 0;}
    .main-nav .nav-bar > ul > li.menu-item-has-children::after {display: none;}
    .main-nav .nav-bar > ul > li.menu-item-has-children a .icon {background-image: url(../images/down_arrow_icon.svg); background-repeat: no-repeat; background-size: 18px 18px; height: 25px;
    width: 25px; background-position: center; transition: all 0.3s ease-in-out; display: flex; transform: rotate(0deg);}
    .main-nav .nav-bar ul li a {display: inline-flex; position: relative; color: #161615;}
    .main-nav .nav-bar > ul > li.current-menu-item.menu-item-has-children a .icon {display: none;}

    .header-wapper .container {width: 100%; max-width: 100%;}
    .main-nav .nav-bar ul li.menu-item-has-children .sub-menu ul > li > a {min-height: 100%;}
    .main-nav .nav-bar ul li.menu-item-has-children.active a .icon {transform: rotate(180deg);} 
    .header-top {padding: 25px 0;}
    .main-nav .btnbox {margin: 50px 0 0 0;}
    .transparent-header .main-nav .nav-bar ul li a {color: #FFF;}
    .transparent-header .main-nav .btnbox a {color: #4B4B4B; border-color: #4B4B4B; background: transparent;}
    .main-nav .nav-bar ul li.current-menu-item a {border: none;}
    .main-nav .nav-bar ul li a {border: none;}
    .main-nav .nav-bar ul li a:hover {border: none;}
    
}

@media (max-width: 767px) {

    .stickey-btn {right: -20px;}
    .stickey-btn a {font-size: 18px; height: 45px;}
    .banner-text span {font-size: 50px;}
    .banner-subtext {flex-direction: column; gap: 30px; justify-content: flex-start; align-items: flex-start;}
    .banner-subtext span {font-size: 20px;}
    .banner-subtext .btnbox a {font-size: 20px;}

    .text-block {margin: 60px 0;}
    .text-block .text-grp {flex-direction: column;}
    .text-block .text-grp .text-left {width: 100%;}
    .text-block .text-grp .text-left h1 {font-size: 24px; margin-bottom: 20px;}
    .text-block .text-grp .text-left p {font-size: 18px; line-height: 1.5;}
    .text-img {width: 100%; margin-top: 40px;}

    
    .product-title {padding-bottom: 30px !important;}
    .product-title h2 {font-size: 34px !important;}
    .products-slider .swiper-slide {width: 345px;}
    .slider-section.version-1 .products-box .products-over-box p {opacity: 1; visibility: visible;}
    .slider-section.version-1 .products-box .products-over-box .cross-arrow {opacity: 1; visibility: visible;}
    .slider-section.version-1 .products-box .product-head h3 {transform: translateY(-430%);}
    .products-box::after {background: rgba(0, 0, 0, 0.3);}

    .img-block {margin: 60px 0;}
    .img-block .img-block-grp {flex-direction: column;}
    .img-block-img {width: 100%;}
    .img-block .img-block-grp .img-block-left {width: 100%;}
    .img-block .img-block-grp .img-block-text {width: 100%; margin-top: 40px;}
    .img-block .img-block-grp .img-block-text h3 {font-size: 24px; margin-bottom: 20px;}
    .img-block .img-block-grp .img-block-text p {font-size: 18px; line-height: 1.5;}
    .img-block .img-block-grp .img-block-text .btnbox a {font-size: 18px;}


    .middle-banner .banner-bg {min-height: 470px;}
    .middle-banner .banner-bg .banner-capt h4 {font-size: 28px; margin-bottom: 25px;}
    .middle-banner .banner-bg .banner-capt p {font-size: 18px; line-height: 1.5;}
    .middle-banner .banner-bg .banner-capt .btnbox {margin-top: 30px;}
    .middle-banner .banner-bg .banner-capt .btnbox ul {flex-direction: column;}
    .middle-banner .banner-bg .banner-capt .btnbox ul li a {font-size: 18px; width: 100%;}
    .middle-banner .banner-bg .banner-capt {width: 100%;}

    .footer-bottom {flex-direction: column; justify-content: center; gap: 40px;}
    .footer-common.middle-text {margin: 0;}
    .footer-common.middle-text span {text-align: left;}
    .footer-common.middle-text ul li {text-align: left;}
    .footer-bottom .footer-common ul li a {justify-content: flex-start;}
    .social-sec {margin-bottom: 30px;}
    .web-by ul {justify-content: center;}
    .footer-wrap .f-logo a {width: 185px;}

    .sub-inner-banner .sub-inner {min-height: 500px;}
    .subpage-caption {margin: 60px 0;}
    .subpage-caption .subpage-text h1 {font-size: 16px;}
    .subpage-caption .subpage-text h2 {font-size: 24px; margin-bottom: 25px;}
    .subpage-caption .subpage-text p {line-height: 1.5; font-size: 18px;}
    .sub-block .sub-block-grp {margin-top: 60px; flex-direction: column;}
    .sub-block .sub-block-grp .sub-block-text {width: 100%; margin: 0 0 40px;}
    .sub-block .sub-block-grp .sub-block-text h3 {font-size: 24px; margin-bottom: 25px;}
    .sub-block .sub-block-grp .sub-block-text p {font-size: 18px; line-height: 1.5;}
    .sub-block .sub-block-grp .sub-block-text .btnbox a {font-size: 18px;}
    .sub-block .sub-block-grp .sub-block-text .btnbox {margin-top: 25px;}
    .sub-block .sub-block-grp .sub-block-img {width: 100%;}
    .sub-block .sub-block-grp .sub-block-img .sub-img {width: 100%;}
    .sub-block::after {height: 75px;}
}