@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:640px) {
    h1 { font-size: 32px; line-height: 36px;}
    h2{ font-size: 28px; line-height: 32px;}
    h3{ font-size: 24px; line-height: 28px;}
    
    p{ font-size: 14px; line-height: 20px;}
    
    #content-area{ padding: 40px 0;}
    
    .orange-btn{ padding: 8px 13px; line-height: 18px; font-size: 15px;}
    
    .title{ margin-bottom: 20px;}
    
    header .menu-icon{ display: block;}
    header .header-top .right{ display: none;}
    header .header-bottom{ display: none;}
    .banner{ height: 50vh; padding: 0 !important; position: relative; overflow: hidden;}
    .inner-banner { height: 450px;}
    .inner-banner .title p { font-size: 15px; line-height: 18px;}
    
    .mobile-nav{ position: absolute; right: 0; top: 62px; z-index: 49; background: #fff; width: 100%; display: none; /*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/ border-top: 1px solid #c5c5c5;}
    .mobile-nav ul{ margin: 15px; padding: 0;}
    .mobile-nav ul li{ padding: 0; margin: 10px 0 0; background: none; position: relative; list-style: none;}
    .mobile-nav ul li:first-child{ margin: 0;}
    .mobile-nav ul li a{ font-size: 14px; line-height: 16px; display: block; color: #393738;}
    .mobile-nav ul li a:hover{ color: #da9c47;}
    .mobile-nav ul li .submenu{ display: none;}
    .mobile-nav ul li ul li{ margin: 5px 0 0;}
    .mobile-nav ul li em { width: 30px; height: 20px; text-align: center; line-height: 40px; position: absolute; right: 0; top: 0; font-style: normal; color: #0d1f22; font-size: 20px; cursor: pointer; text-align: center;}
    .mobile-nav ul li em:before { content: '+'; position: absolute; line-height: 20px; left: 0; top: 0; height: 100%; width: 100%;}
    /*.mobile-nav ul li.current em:before { content: '-';}*/
    
    .our-products{ margin: 0 0 50px;}
    .our-products ul li{ width: 48%; margin: 15px 0 0 !important;}
    .our-products ul li:nth-child(2n+2){ float: right;}
    .our-products ul li span{ background: rgba(0,0,0,0.3); visibility: visible; opacity: 1; transform: scale(1);  font-size: 20px; line-height: 24px;}
    
    .our-products ul.product-list li{ width: 100%;}
    
    .hard-word-section{ padding: 50px 0; margin: 0 0 50px;}
    
    .our-products-video{ margin: 0 0 50px;}
    .our-products-video .slider-nav{ margin: 10px 0 0;}
    
    .what-special{ padding: 40px 0;}
    .what-special ul li{ width: 28%;}
    .what-special ul li span { font-size: 30px; line-height: 40px;}
    .what-special ul li strong{ font-size: 15px; line-height: 20px;}
    
    .video iframe{ width: 300px; height: 170px;}
    
    .contact-page h3 { margin: 0 0 20px;}
    .contact-page .contact-page-left{ width: 100%; margin: 0 0 30px;}
    .contact-page .contact-page-right{ width: 100%;}
    .contact-form { padding: 20px;}
    .contact-form ul li .input { width: 100%;}
    .contact-form ul li .input+.input{ margin: 15px 0 0;}
    .contact-form ul li{ margin: 15px 0 0;}
    
    .technical-specification ul li span{ width: auto;}
    .technical-specification ul li strong{ width: auto; margin: 0 0 0 10px;}
    
    .map { width: 100%; height: 300px;}
    
    .product-detail-page{ padding: 50px 0 0;}
    .product-desc .product-detail-right{ width: 100%; margin: 0 0 20px;}
    .product-desc .product-detail-left{ width: 100%;}

    footer .footer-section{ width: 100%; margin: 0 0 20px 0 !important;}
    footer .footer-logo{ margin: 0 auto;}
    footer .socail-icon{ text-align: center; margin: 10px 0 0;}
    footer .socail-icon a{ display: inline-block; float: none; height: 25px; width: 25px; margin: 0 5px !important;}
    footer h4{ text-align: center; margin: 0 0 15px;}
    footer .footer-links{ text-align: center;}
    footer .footer-links li{ float: none; display: inline-block; margin: 0 5px;}
    footer .footer-links li a { font-size: 14px; line-height: 16px;}
    footer address, footer .email, footer .phone, footer .time{ font-size: 14px; line-height: 20px; margin: 0 0 10px;}
    .footer-bottom{ padding:10px; margin: 30px 0 0;}
    .footer-bottom p{ font-size: 12px; line-height: 14px;}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {

}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
    
    header .header-top .right .socail-icon{ display: none;}
    
    .our-products ul.product-list li{ width: 48%; margin: 0 0 25px;}
    .our-products ul.product-list li:nth-child(2n+1){ clear: both;}
    .our-products ul.product-list li:nth-child(2n+2){ float: right; margin: 0 0 0 0;}
}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px) {	

}

/* 5. Other media-query
------------------------------------------------------------------------------*/