@charset "utf-8";



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

    .index-why{
        padding: 0 20px;
    }

    .sidebar-nav li a{

        line-height: 30px;

    }



    .hamburger{

        top: 50px;

        right: 50px;

    }

    

    .logo{

        left: 50px;

        top: 40px;

    }



    .section{

        height: 640px;

    }



    .section1 img{

        width: 200px;

        height: 200px;

    }



    .section1 .txt{

        height: 200px;

        width: 380px;

        padding-top: 20px;

        margin-left: 40px;

    }

    

    .section1-3{

        right: 5%;

    }

    

    .section1-2{

        left: 5%;

    }



    .section3 .txt,.section4 .txt{

        left: 5%;

    }

    

    .section5 .txt{

        padding-top: 5%;

    }





}





@media all and (min-width: 960px) and (max-width: 1199px) {
    
    .index-why,.index-news{
        padding: 0 20px;
    }

    footer{
        padding: 80px 20px 0;
    }

    .footer-right{
        padding: 0 20px;
    }
    .about-content{
        padding: 20px;
    }
    
    .product-left{
        width: 300px;
    }
    
    .product-search,.product-cat{
        width: 100%;
    }

    .product-right{
        width: calc(100% - 320px);
    }

    .product-search{
        height: 120px;
    }
    
    .search-input{
        width: 230px;
    }
    
    .p-right-left,.p-right-right{
        width: 50%;
    }

    .product-detail-right{
        padding-left: 50px;
    }

    .message-content{
        padding: 20px;
    }

    .message-detail{
        width: 100%;
        padding: 30px 20px;
    }

    .message-form-group input{
        width: inherit;
    }

    .message-form .form-submit{
        margin-top: 30px;
    }

    .contact-content{
        padding: 20px;
    }










    .section{

        height: 400px;

    }


    .hamburger{

        top: 50px;

        right: 50px;

    } 

    

    .logo{

        top: 30px;

        left: 30px;

    }



    .section1 img{

        width: 150px;

        height: 150px;

    }

    

    .section1 .txt{

        height: 150px;

        margin-left: 40px;

        padding-top: 0;

        width: 50%;

    }



    .section1-1{

        left: 25%;

        top: 5%;

    }



    .section1-2{

        left: 5%;

        bottom: 15%;

    }

    

    .section1-3{

        right: 5%;

        bottom: 18%;

    }

    

    .section1 .txt p{

        font-size: 12px;

        line-height: 20px;

    }

    

    .section2 .img img{

        width: 200px;

        height: 200px;

    }

    

    .section2 .txt .txt-info{

        height: 200px;

    }



    .section2 .txt h3,.section3 .txt h3,.section4 .txt p,.section5 .txt h3,.section6 .txt h3{

        font-size: 24px;

    }



    .section2 .txt p,.section3 .txt p,.section6 .txt h4{

        font-size: 16px;

    }

    

    .section3 .txt{

        left: 5%;

    }

    



    .section4 .txt{

        left: 8%;

        top: 30%;

    }

    

    .section5 .txt{

        padding: 3%;

    }

    

    .section5 .txt p{

        font-size: 14px;

        line-height: 20px;

        margin-bottom: 20px;

    }

    

    .footer-main{

        padding: 3%;

    }



    .footer-txt{

        padding: 0 3%;

    }





}



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

    .hamburger{

        top: 50px;

        right: 50px;

    }



    .logo{

        left: 30px;

        top: 30px;

    }



    .section{

        height: 450px;

    }

    

    .section1{

        padding: 5%;

    }

    

    .section1 img{

        width: 150px;

        height: 150px;

    }

    

    .section1 .txt{

        margin-left: 20px;

        height: 150px;

        width: 200px;

        padding-top: 0;

    }



    .section1-2{

        left: 3%;

        bottom: 0;

        top: 35%;

    }

    

    .section1-3{

        right: 3%;

        bottom: 25%;

    }



    .section1 .txt p{

        font-size: 14px;

        line-height: 20px;

    }



    .section2 .img img{

        width: 200px;

        height: 200px;

    }



    .section2 .txt .txt-info{

        height: 200px;

    }

    

    .section2 .txt h3,.section3 .txt h3,.section4 .txt p,.section5 .txt h3,.section6 .txt h3,.section6 .txt h4{

        font-size: 20px;

        line-height: 40px;

    }



    .section2 .txt p,.section3 .txt p{

        font-size: 14px;

        line-height: 20px;

    }

    

    .section3 .txt{

        left: 3%;

    }

    

    .section5 .txt p{

        font-size: 12px;

        line-height: 20px;

        margin-bottom: 20px;

    }



    .section6 .txt{

        padding: 10% 3%;

    }

    

    .footer-main{

        padding: 3%;

    }

    

    .footer-txt{

        padding: 0 2%;

    }



    .section5 .img{

        width: 100%;

        height: auto;

    }

    .section5 .txt{

        width: 100%;

        bottom: 100px;

        top: inherit;

    }
    
    .index-why{
        padding: 50px 20px;
    }


    .index-may{
        padding: 50px 0;
    }
    
    .index-advan{
        padding: 50px 20px;
    }
    
    .index-surface{
        padding: 50px 20px 0;
    }


    .in-may-txt{
        background: transparent;
        position: initial;
        padding: 50px 50px;
        width: 100%;
    }
    .in-may-txt p,.in-may-txt a{
        color: #333;
    }

    .in-may-h2 h2{
        font-size: 30px;
    }

    .index-news{
        padding: 80px 20px;
    }


    .product-left,.product-search,.product-cat{
        width: 320px;
    }

    .search-input{
        width: calc(100% - 150px);
    }
    
    .product-right{
        width: calc(100% - 340px);
    }

    .p-right-left{
        width: 60%;
    }

    .p-right-right{
        width: 40%;
    }

    .product-detail-right{
        padding: 20px;
    }

    .message-detail{
        width: 100%;
        padding: 20px;
    }
    
    .index-main{
        padding: 0 20px;
    }



}





@media all and (max-width: 767px) {
.index-main{
        padding: 0 20px;
    }


   .logo{

    left: 10px;

    top: 10px;

   }

    

    .logo a img{

        height: 30px;

    }



    .logo.scrolled{

        left: 10px;

        top: 10px;

    }



    .hamburger{

        top: 20px;

        right: 30px;

        width: 25px;

    }



    .hamburger.scrolled{

        top: 20px;

        right: 30px;

    }



    .hamburger:before{

        width: 30px!important;

        height: 30px!important;

        font-size: 50px!important;

        left: -13px;

    }


    .index-product,.index-why,.index-leava,.index-advan{
        padding: 60px 0;
    }
    



    .in-advan-main{
        padding-top: 20px;
    }
    
    .in-advan-ul li{
        display: block;
    }

    .in-advan-txt{
        width: 100%;
        padding: 0!important;
        margin-top: 20px;
    }
    
    .in-advan-img{
        width: 100%;
    }

    

    .in-advan-txt p{
        font-size: 16px;
        line-height: 24px;
    }


    .index-leava h3{
        font-size: 16px;
        top: 80px;
    }
    
    .index-surface{
        padding: 50px 10%;
    }

    .in-surface-txt{
        width: 100%;
        padding: 0 0 30px;
    }
    
    .in-surface-img{
        width: 100%;
    }

    .index-surface .w1400{
        display: block;
    }

    .index-advan{
        padding: 0 10%;
    }

    .in-why-title h2{
        font-size: 24px;
    }
    
    .in-news-title h2{
        font-size: 24px;
    }

    .index-why{
        padding: 0 15px;
    }
    
    .in-why-list p{
        font-size: 14px;
        line-height: 26px;
    }

    .index-may{
        padding: 80px 20px;
    }

    .in-may-h2{
        position: initial;
        width: 100%;
        height: auto;
    }
    
    .in-may-h2 h2{
        padding-left: 0;
        font-size: 16px;
         line-height: 2;
    }
    
    .in-may-txt{
        position: initial;
        width: 100%;
        padding: 0;
        background: transparent;
    }

    .in-may-txt p{
        font-size: 14px;
        color: #333;
        line-height: 24px;
    }
    
    .in-may-txt a{
        color: #333;
    }
    
    .index-news{
        padding: 80px 10px 50px;
    }

    .in-news-ul li{
        width: 48%;
        padding: 10px;
        margin-bottom: 20px!important;
    }

    .in-news-ul li:nth-child(3n-1){
        margin: 0;
    }
    
    .in-news-ul li:nth-child(2n-1){
        margin-right: 1%!important;
    }

    .in-news-ul li:nth-child(2n){
        margin-left: 1%!important;
    }

    .in-news-txt .news-more{
        width: 30px;
        height: 30px;
    }
    
    .in-news-txt .news-more img{
        width: 10px;
        height: auto;
        margin-top: 7px;
    }

    .in-news-ul li h2,.in-news-txt h2 a{
        font-size: 14px;
    }
    
    .in-news-txt{
        padding: 10px 40px 10px 0;
    }



    .parallux,.parallux .parallux-bg{

        height: auto!important;

    }



    .parallux .parallux-bg{

        position: inherit;

    }
    
    footer{
        padding: 50px 0 0;
    }

    .footer-img{
        width: 100%;
        padding: 0 20px;
    }
    .footer-ul{
        flex-wrap:wrap;
    }

    .footer-ul li{
        width: 50%;
        flex:auto;
        margin-bottom: 20px;
    }
    
    .footer-ul li h2{
        padding-bottom: 20px;
    }

    .footer-ul li h2:after{
        bottom: 10px;
    }


    .section{

        height: auto;

    }



    .section1{

        padding: 5% 10px;

    }

    

    .section1-1{

        width: 100%;

    }



    .section1 img{

        width: 100px;

        height: 100px;

    }



    .section1 .txt{

        width: calc(100% - 100px);

        margin-left: 0;

        padding: 0 15px;

        height: auto;

    }



    .section1 .txt p{

        font-size: 12px;

        line-height: 20px;

    }



    .section1 div[class^="section1"]{

        position: initial;

        margin-bottom: 20px;

    }



    .section1-2 .img{

        float: right;

    }

    

    .section2{

        padding: 20px 10px;

        overflow: hidden;

        position: absolute;

        left: 0;

        top: 30px;

    }



    .section2 .img img,.section2 .txt .txt-info{

        position: initial;

    }

    

    .section2 .img img{

        width: 100px;

        height: 100px;

        margin: 0;

        padding: 0;

    }



    #bg-2{

        height: 200px;

    }



    .section2 .img{

        width: 100px;

        position: initial;

        float: left;

    }

    

    .section2 .txt{

        width: calc(100% - 100px);

        padding: 0 20px;

        float: left;

        position: initial;

    }

    

    .section2 .txt .txt-info{

        height: auto;

        margin: 0;

        width: 100%;

    }



    .section2 .txt h3,.section3 .txt h3{

        font-size: 14px;

        line-height: 30px;

        margin-bottom: 10px;

        color: #000;

    }



    .section2 .txt p,.section3 .txt p,.section4 .txt p{

        font-size: 12px;

        line-height: 18px;

        color: #222;

    }



    .section3{

        height: 300px;

    }



    .section3 .txt{

        left: 0;

        top: 0;

        padding: 20px 10px;

    }



    .section4{

        height: 200px;

        position: absolute;

        top: 0;

        left: 0;

    }



    #bg-4{

        height: 200px;

    }

    

    #bg-5{



    }



    .section5{

        position: relative;

        width: 100%;

    }

    

    .section5 .img{

        width: 100%;

        position: initial;

    }



    .section5 .txt{

        width: 100%;

        padding: 10px;

         position: initial;

    }



    .section5 .txt h3{

        font-size: 16px;

        line-height: 30px;

        margin-bottom: 10px;

    }



    .section5 .txt p{

        font-size: 12px;

        line-height: 18px;

        margin-bottom: 10px;

    }



    #bg-6{

        height: 200px;

    }



    .section6{



    }

    

    .section6 .txt h3{

        font-size: 12px;

        line-height: 20px;

        margin-bottom: 10px;

    }

    .section6 .txt h4{

        font-size: 12px;

        line-height: 20px;

    }



    #bg-7{

        height: 210px;

    }

    .footer-left{
        width: 100%;
        padding: 0 20px;
    }



    .footer-main{

        padding: 0 10px;

    }

    .footer-right{
        width: 100%;
        padding: 0 20px;
    }

    .footer-txt{

        width: 100%;

        margin-bottom: 20px;

        border-right: 0;

    }

    

    .footer-list{

        width: 100%;

        padding: 0;

    }



    .footer-list-ul{

        display: block;

    }



    .footer-list-ul li{

        width: 100%;

    }



    .footer-list-ul li h2{

        

    }

    

    .footer-list-ul li a{

        display: inline-block;

        margin: 0 5px;

    }



    .sidebar-nav,#wrapper.toggled #sidebar-wrapper{

        width: 200px;

    }



    #sidebar-wrapper{

        right: 200px;

        margin-right: -200px;

    }



    .hamburger.is-open{

        right: 220px;

    }



    .sidebar-nav li a{

        padding-left: 15px;

    }



    .dropdown-menu > li > a{

        white-space:initial;

        font-size: 12px;

        line-height: 20px;

        padding-left: 30px;

    }



    #wrapper.toggled #page-content-wrapper{

        margin-left: -200px;

    }



    #wrapper.toggled{

        padding-left: 200px;

    }



    .parallux .parallux-bg .parallux-inner img{

        height: auto;

    }

    .about-left{
        width: 100%;
        padding: 0 10px;
    }

    .about-right{
        width: 100%;
        padding: 30px 10px;
    }

    .product-position{
        padding: 10px;
    }

    .product-main{
        padding: 0 10px;
    }

    .product-left{
        width: 100%;
    }
    .product-search{
        width: 100%;
    }
    .product-cat{
        width: 100%;
    }
    .product-a, .product-cat-active{
        padding-left: 20px;
    }
    
    .p-right-left{
        width: 100%;
    }






    .search-input{
        width: calc(100% - 150px);
    }

    .product-right{
        width: 100%;
        padding: 0 10px;
        margin: 0 0 20px;
    }

    .p-right-right{
        width: 100%;
    }
    

    .product-detail-right{
        width: 100%;
        padding: 10px;
    }

    .showpage a{
        top: -75px;
        width: 18px;
    }
        
    .message-detail{
        width: 100%;
        padding: 20px;
    }

    .message-form-group{
        width: 100%;
        margin: 0 0 10px;
    }
    
    .message-form .form-submit{
        margin: 30px auto;
    }

    .detail-img{
        width: calc(100% - 10px);
        margin: 0 5px;
    }
    
    .news-main{
        width: 100%;
        padding: 0;
    }

    .news-detail{
        width: 100%;
        padding: 0 5px;
    }

    .contact-detail-left{
        width: 100%;
    }

}



@media only screen and (min-width: 480px) and (max-width: 767px) {

}



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

}



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

}