.hide-sm {
	display: block;
}
.hide-pc {
	display: none !important;
}
 
 
.menu-pc {
	display: block;
}
.menu-mobile {
	display: none;
}
 

 
 

@media screen and (max-width: 1776px) {
 

}
@media screen and (max-width: 1600px) {
  
}
@media screen and (max-width: 1536px) {
/*125%*/
body {
    font-size: 16px;
    line-height: 28px;
}
.section-about p br {
    display: none;
}
ul.menu li {
    font-size: 16px;
    padding: 20px 10px;
}
   
.logo img {
    width: 66%;
    max-width: 300px;
}
.section-about, .section-service, .section-why, .section-project {
    padding: 100px 0;
    background-size: 100%;
}
.box-text-hero h2 , .txthead-white, .txthead-red, .txt-about h2 span{
    font-size: 35px;
}


}
/*end 125%*/


/*150%*/
@media screen and (min-width: 1200px) and (max-width: 1600px) {
 



}

@media screen and (max-width:1440px) {
 
 


}
@media screen and (max-width:1366px) {
/*1366 ipad pro*/
 .box-text-hero {
    position: absolute;
    top: 25%;
    width: 100%;
    text-align: center;
}
.banner-hero {
    position: relative;
    height: 74vh;
    width: 100%;
    overflow: hidden;
}
 
 .banner {
    display: flex;
    margin-top: 74px;
}

}

@media screen and (max-width: 1280px) {
 body {
    font-size: 12px;
    line-height: normal;
}
 .txt-about h1 {
    font-size: 30px;
 }
.txt-about h2 {
    font-size: 14px;
}

.txt-about h2.txthead {
    font-size: 30px;
}
.btn-tel {
    padding: 5px 15px 3px 15px;
    font-size: 12px
}
.btn-more i {
    font-size: 9px;
    padding-left: 7px;
}
.section-about, .section-service, .section-article, .section-gallery {
    padding: 100px 0;
    background-size: 100%;
}

ul.menu li {
    padding: 26px 7px;
    font-size: 12px;
}
.logo img {
    width: 41%;
 
}


 
ul.menu li img {
    width: 18px;
}
.section-about p br {
    display: none;
}

.box-text-hero h1 {
    font-size: 50px;

}
.box-text-hero h2 , .txthead-white, .txthead-red{
    font-size: 30px;
}
.box-text-ser h3 {
    font-size: 14px;
   
}


footer {
    padding: 30px 0 0 0;
}
.footer-copy {
    margin-top: 15px;
}

.footer-address {
    margin-top: 4px;
}

.footer-address h2 {
    font-size: 18px;
}
 .footer-address p, .footer-copy {
 
   
    font-size: 12px;
    line-height: 20px;
   
}
 
 .box-service img {
    width: 108px;
    margin: 0 auto;
}

.box-service h3 , .box-article h3, ul.tab_gallery li a, .txt-sitemap h2, .txt-item {
    font-size: 16px;
}
 
.box-article p, .footer-address {
    font-size: 12px;
}

.icon-fb {
    width: 15px;
}
}


@media screen and (max-width: 1180px) {
        .hide-md {
        display: none !important;
    }

    .logo-brand {
        margin-bottom: 10px;
    }
    .footer-address p br {
        display: none;
    }
    .footer-address .icon-hover {
    width: 22px;
    }

    .footer-address h2 {
    font-size: 17px;
    }
}


@media screen and (min-width: 926px) and (max-width: 1180px) {




}

 

@media screen and (max-width: 946px) {
     body {
    font-size: 16px;
    line-height: normal;
}
	.hide-sm {
		display: none !important;
	}
	.hide-pc {
	display: inline-block !important;
	}
	.hide-pc.block {
	display:  block !important;
	}
 	
    .page-top {
    padding-top: 85px;
    }

    .footer-address {
        margin: 15px 0;
        width: 100%;

    }

    .box-text-ser h3 {
        font-size: 22px;
    }
    .box-text-ser {
    font-size: 16px;
    }
    .box-text-ser p {
    min-height: unset;
}
        .btn-more {
            padding: 7px 20px 4px 20px;
            font-size: 14px;
        }
        .object {
            display: none;
        }
        .box-text-project {
    font-size: 16px;
    line-height:  normal;
}
.box-text-project {
    margin-bottom: 50px;
}
 ul.menu li.hide-mb {
        display: none;
    }
    .box-bg-hero {
        height: 100%;
    }
    .banner-hero {
        height: auto;
    }
     .hide-mb {
        display: none !important;
    }
    .banner-hero {
        height: auto;
    }
    
    .box-text-hero h1 {
    font-size: 35px;
    }
    .box-text-hero h2 {
    font-size: 22px;
    }
    .btn-tel {
    padding: 5px 10px;
    font-size: 10px;
}
.box-popup {
    font-size: 16px;
    line-height: normal;
    padding: 25px 0;

}
.show-mb{
    display: block;
}

ul.list-why li {
    width: 48%;
}
.section-whyus {
    padding: 60px 0;
}

.bg-banner {
    height: 60vh;
}
.box-text-hero {
    top: 15%;
}

}


@media screen and (max-width: 480px) { 
.bg-banner {
    height: 50vh;
}
.box-text-hero {
    top: 15%;
}
    .logo-brand {
        width: 48%;
        height: auto;
        margin: 0 0 0px 0
    }
   
.logo img {
    width: 83%;
    margin-top: 0;
}
 
ul.menu li {
    padding: 18px 7px;
    
}
    .section-about, .section-service, .section-article, .section-gallery,.footer {
    padding:50px 0;
   
}
.banner {
    display: block;
    margin-top: 68px;
}
 .banner-hero {
    margin-bottom: 10px;
 }

.txt-about {
    text-align: left;
    margin-top: 25px;
}

.txt-about h2 {
    font-size: 20px;
    line-height: normal;
}
.txt-about h2 br {
    display: none;
}
.txt-about h1 {
    font-size: 30px;
}
.txt-about h2.txthead {
    font-size: 30px;
}
ul.tab_gallery li a {
    font-size: 12px;
    padding: 10px 2px;
    margin:0;
}
.w-80 {
    width:100% !important;
}
.btn-tel {
    padding: 5px 15px;
    font-size: 16px;
}

.owl-theme .owl-dots {
    
    bottom: 5px;
    
}

.box-text-pro {
    display: none;
}
.box-cover-pro:hover .box-text-pro-tab {
    opacity: 1;
    transition: 0.3s;
}
.footer-address  {
    text-align: center;
}

.footer-address .icon-hover {
    width: 55px;
}
.txt-sitemap {
    display: none;
}
.footer-copy {
    padding: 20px 0;
    margin: 0;
}
.box-article p {
    font-size: 16px;
    line-height: normal;
}
.padding-inner {
    padding-top: 103px !important;
}
.box-article-detail h2 {
    font-size: 20px;
    line-height: normal;
    
}


}

@media screen and (max-width: 414px) {
 
   .btn-tel {
    padding: 5px 15px;
    font-size: 16px;
}
.txt-item, .box-service h3 {
    font-size: 16px;
    
}

}

@media screen and (max-width: 390px) {
 
.txt-about h2 {
    font-size: 22px;
}
.txt-about h2.txthead {
    font-size: 30px;
}

}

@media screen and (max-width: 360px) {

}

@media screen and (max-width: 330px) {
 	 .btn-tel {
    padding: 5px 10px;
    font-size: 10px;

}