@charset "utf-8";
@media (min-width: 576px){

}
@media (min-width: 768px){
    .nav-cart-info .nav-cart-list {
        width: 370px;
    }


}
@media (min-width: 992px) {
    .side1.col-lg-3 {
        width: 20%;
    }

    .content.col-lg-9 {
        width: 80%;
    }
}
@media (max-width: 1800px) {
}


    @media (max-width: 1199px) {
        .tit_fx:before {
            right: 15%;
            width: calc(100% - 39%);
    
        }
    }

    @media (max-width: 991px) {
        .footer_content > .container,
        .home_news > .container,
        .home_brand > .container {
            max-width: 100%;
            padding: 0 5%;
        }
        .home_about > .container {
            max-width: 80%;
        }
        .header ul.navbar-nav {
            margin-right: 0;
        }
        .header .navbar-nav .nav-link {
            padding: 25px 14px 25px;
        }
        .nav-brand-wrapper {
            flex: unset;
            text-align: unset;
        }
        .content > .section > .container {
            max-width: 100%;
        }
        .function-bar .d-md-none {
            display: block !important;
        }

        .container.gx-md-2 > .function-bar {
            display: none !important;
        }
        .sideNavBtn a, .function-bar .btn.btn-primary {
            width: auto !important;
            padding: 5px 10px !important;
        }

        .side1 .collapse:not(.show) {
            display: none !important;
        }

        .side .collapse.navbar-collapse.show {
            margin-bottom: 20px;
            background-color: #fff;
        }

        .function-bar {
            justify-content: space-between !important;
        }

        .sideNavBtn {
            display: block !important;
        }
            .sideNavBtn a .txt-en{
                display:none;
            }
    
    }

@media (max-width: 767px) {
    .page-link {
        min-width: 1.5em;
        height: 1.5em;
     
    }
    .list-creative > li {
        padding: 16px 0px;
    }
    .product.show .tab-area > .container {
        padding-left:0;
        padding-right:0;
    }
    .product .gallery-list .item .title {
        margin-bottom: 0;
    }
    .footer {
        margin-top: 0;
    }
  .news  .vimo {
        margin: 10px 0 30px auto;
   
    }
    .function-bar {
        margin-bottom: 10px;
    }
    .breadcrumb-section {
        margin-bottom: 20px !important;
    }
    .breadcrumb {
        padding: 0;
    
    }
    .breadcrumb li:first-child a {
        padding: 4px 10px;
    }
    .breadcrumb-section {
        padding-top: 0;
    }
    .footer .footer-logo {
        margin-bottom: 10px;
    }
    .footer .footer_content.fc_seperate_bottom {
        padding: 30px 0;
    }
    .footer-logo a{
        width:60%;
    }
    .footer .footer_right ul li a {
        width: 40px;
        height: 40px;
    }
    .footer .footer_right .social-box {
        display: block;
        margin: 0 0 20px;
    }
    .footer .footer_right .copyrights {
        font-size: 12px;
        border-top: 1px solid #a1a1a1;
        padding-top: 10px;
        margin-top: 10px;
        position: static;
    }
    .footer  .footer-oth-det {
        flex-wrap: wrap;
    }
    .footer .footer_right, .footer .footer_left {
        width: 100%;
      
    }
    .vimo {
        font-size: 12px;
    
    }
    body .slick-multi-cusarrow .slick-btn .btn-next,
    body .slick .slick-next,
    body .slick-multi-cusarrow .slick-btn .btn-prev,
    body .slick .slick-prev {
        width: 35px;
        height: 35px;
        background-size: 20%;
    }
    .home_cont a.more_x {
        font-size: 16px;
        margin: 20px auto 0;
    }
    .home_cont h4 {
        text-align: center;
        margin-right: 0;
        margin-bottom: 40px;
    }
    .home_cont {
        padding: 80px 0;
        background-attachment: scroll;
        display: block;
        background: url(../images/all/cont_bg.jpg) no-repeat center;
        background-size: cover;
    }
    body  .date {
        font-size: 14px !important;
    }
    body .item .info p.tt_2 a {
        font-size: 14px !important;

    }
    body .item .info p.tt_1 a {
        font-size: 16px !important;

    }
    .home_news {
        padding: 30px 0 20px;
    }
  
    .brand_box .pic {
        width: calc((100% - 20px) / 2);

    }
    .home_news .h2,
    .home_brand .h2 {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .tit_fx:before {
        right: 36%;
        width: calc(100% - 80%);
    }
    .home_brand {
        padding: 30px 0 0;
    }
    .h2.h2_s:before {
        width: 15px;
        height: 57px;
        top: 50%;
 
    }
    .footer_content > .container, .home_news > .container, .home_brand > .container {
        padding: 0  15px;
    }
    a.more_x {
        width: 100px;
        padding: 4px 10px;
        font-size: 14px;
    }
    .h2.h2_s {
        padding-left: 28px;
    }
    .h2 .txt-tw {
        font-size: 18px;
    }
    .h2 .txt-en {
        font-size: 32px;
        padding-bottom: 0;
    }
    .home_about > .container {
        max-width: 100%;
    }
    .home_about {
        padding: 30px 15px;
  
    }
    .header .small-btn-box .btn.btn-primary {
        position: relative;
        top: -2px;
    }
    .header   .nav-item .caret {
        border-top: solid 5px #ffffff;
    }

    .navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon::after, .navbar-toggler .navbar-toggler-icon::before {
        background-color: #ffffff;
        background-image:unset;
    }
    .header .bsnav-mobile .navbar {
        background-color: #222222e3;
    }
    .is_scroll .header .navbar {
        background-color: #222222;
    }
    body.home .header .navbar {
        background-color: #222222;
    }
    .header .navbar {
        padding: 0 15px;
        z-index: 9;
     
    }
    .banner{
        padding-top:76px;
    }
    .banner .ratio {
        padding-top: 45%;
    }


    body.is_touch   .header .navbar .navbar-brand,
    body .header .navbar .navbar-brand {
        width: 180px;
        height: 50px;
        background-size: cover;
    }
    .bsnav-mobile.right .navbar .navbar-nav .nav-item .caret, .bsnav-mobile.left .navbar .navbar-nav .nav-item .caret {
        display: block;
        position: absolute;
        right: 15px;
        top: 50%;
    }
    .header .navbar.newtop.logo-show:not(.logo-ani-show) .navbar-brand .logo, .header .navbar.newtop.logo-show:not(.logo-ani-show-bg) .navbar-brand .logo {
        display: unset;
    }
    .rwd-table.mob-mode tr:nth-child(odd) {
        background: rgb(238 238 238);
    }

    .rwd-table.mob-mode td:before {
        font-weight: 400;
        min-width: 30%;
        color: #000;
    }

    .rwd-table td:first-child a,
    .rwd-table td:first-child:before {
        color: #ffffff;
    }

    .order-list table.mob-mode td:first-child {
        background: #161616;
        border: solid 1px #161616;
    }

    .rwd-table.mob-mode td {
        padding: 10px 10px;
    }

    body .navbar-toggler.toggler-spring.active .navbar-toggler-icon {
        background-image: unset;
    }
    .btn.btn-primary {
        font-size: 14px;
        padding: 4px 10px;
    }
    .bsnav-mobile .navbar-nav .nav-item .navbar-nav .navbar-nav {
        background: #383838;
    }

    .bsnav-mobile .navbar-nav .nav-item .navbar-nav {
        background: unset;
        margin-left: 0;
        margin-right: 0;
        padding-top: 10px;
    }


        .bsnav-mobile .navbar-nav .nav-item .navbar-nav .nav-link {
            padding: 5px 18px;
            color: #fff;
            font-size: 14px;
            border-bottom: none;
        }

    .bsnav-mobile .navbar-nav .nav-item .nav-link {
        padding: 15px 0;
        border-bottom: solid 1px #5f5f5f;
    }

    .bsnav-mobile .navbar-nav {
        padding: 0 0;
        text-align: left;
    }
    body .navbar .navbar-toggler {
        width: 23px;
        margin-right: 0;
    }

    .navbar-toggler.toggler-spring .navbar-toggler-icon::after {
        top: 17px;
    }

    .navbar-toggler.toggler-spring .navbar-toggler-icon::before {
        top: 8px;
    }

    .navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon::after, .navbar-toggler .navbar-toggler-icon::before {
        height: 1.5px;
    }

    }