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

}
@media (min-width: 768px){
    .slick .slick-dots li {
        display: block;
        margin: 12px 0;
    }

    .banner .slick-dots {
        bottom: unset;
        top: 50%;
        right: 10px;
        left: unset;
        width: auto;
    }
}

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

    .content.col-lg-9 {
        width: 80%;
    }
}

@media (max-width: 1800px) {
    body.home   .banner-txt .banner-info h2 {
        font-size: 56px;
    }
    .banner .banner-txt {
        left: 5%;
    
    }
    .header .navbar-nav .nav-link {
        padding: 25px 18px 25px;
    }
    .header .navbar {
        padding: 16px 5%;
    }
    .ab_rycol {
        padding: 100px 5%;
    }
    .home_product {
        padding: 100px 5%;
    }
    .footer .footer_content {
        padding: 20px 5% 40px;
    }
    .ab_major .ab_bg03 {
        top: 0;
    }
}


    @media (max-width: 1199px) {
        .contact .cont_colr {
            padding: 50px 0;
        }
        .cont_colr   .list-creative > li {
            padding: 18px 0;
        }
        .cont_colr .info-area {
            padding-left: 0;
            padding-top: 40px;
        }
        .sitemap {
            text-align: left;
        }
        .ab_major .ab_bg03 {
            top: 50px;
        }
        .ab_rycol .Txt {
            padding-right: 0;
        }
        .banner-txt .banner-info p {
            font-size: 24px;
        
        }
        .banner-txt .banner-info h2,
        body.home .banner-txt .banner-info h2 {
            font-size: 46px;
        }
        .navbar .navbar-brand {
            width: 349px;
        }
        .ab_bg02 img {
            width: 60%;
            margin: 0 0 0 auto;
        }
        .ab_bg02 {
            right: 7%;
            
        }
    }

    @media (max-width: 991px) {
        .main-content > .container,
        .main > .container {
            max-width: 95%
        }
        .contact .demo {
            font-size: 18px;
        }
        .banner-txt .banner-info h2 {
            font-size: 36px;
        }
        .banner {
            padding-top: 150px;
        }
        .ab_bg02 {
            right: 0;
        }
        .footer .footer_content .sitemap > ul > li {
            margin: 0 10px 9px;
        }
        .home_contact .container {
            max-width:100%;
            padding:0 5%;
        }
        .ab_major {
            padding: 120px 0;
        }
        .ab_bg02 img{
            width:50%;
            margin:0 0 0 auto;

        }
        .banner .banner-txt {
            color: #fff;
        }
        .header .navbar-nav .nav-link {
            padding: 10px 18px 10px;
        }
        .navbar .navbar-brand {
            margin: 10px auto 0;
        }
        .banner-txt .banner-info p {
            margin-bottom: 5px;
        }
        .product.show .product-info-area {
            padding-left: 0;
        }
        .contact .info-area h3.h5 {
            margin-bottom: 0;
        }
    }


@media (max-width: 767px) {
   .news  .article-list .item .time {
        display: table;
        width: 100%;
    }
    .function-bar{
        margin-top:20px;
    }
    .product .gallery-list.cover.hov-cart .btn-box {
        margin-top: 10px;
    }
    .product  .gallery-list .item .info {
        padding: 0;
    }
  
    .product.p02 .gallery-list .item .title {
        margin: 0;
   
    }
    .ab_major {
        padding: 50px 0;
    }
    .navbar .small-btn-box ul {
        margin: 0 5px 0 0;
    }
    .small-btn-box .dropdown-toggle {
        width: 35px;
        height: 35px;
    }
    .small-btn-box .dropdown-toggle:before {
        width: 15px;
        height: 15px;
        background-size:cover;
  
    }
    .news.show .page-box a.more_btn, .product.show .page-box a.more_btn {
        padding: 10px 24px;
        width: 158px;
        font-size: 14px;
    }
    .article-list .item a {
        padding: 5px 10px;
    }
    .btn.btn-primary {
        font-size: 14px;
    }
    .h2 {
        font-size: 26px;
   
    }
    .h2:before {
        width: 20px;
        height: 15px;
        top: -8px;
        left: -4px;
        background-size: cover;
    }
    .contact .cont_colr {
        padding: 20px 0 0;
    }
    .contact .main .btn.btn-primary {
        width: 125px;
        padding: 10px 10px;
    }
    .product.show .mainSection .tab-area .container {
        padding-left: 0;
        padding-right:0;
    }
    .tab-area.tab-accordion .tab-accordion-header a {
        color: #fff;
    }
    .tab-area.tab-accordion .tab-accordion-header {
        background-color: #42458d;
   
    }
    .product.show .mainSection {
        padding: 30px 0;
        margin-top: 40px;
    }

    .lang_US   .banner {
        padding-top: 66px;
    }
    .lang_US.is_scroll  .header .navbar.logo-mob-show .navbar-brand img{
        display:none!important;

    }
    .lang_US .header .navbar.logo-mob-show .navbar-brand {
        background: url(../images/all/logo.svg) no-repeat !important;
        width: 163px;
        background-size: cover !important;
        height: 38px;
    }
    .lang_US   .header .navbar.logo-mob-show .navbar-brand img.logo-mob {
        display: none !important;
    }
    .bsnav-mobile .navbar-nav .nav-item .navbar-nav .navbar-nav {
        background: #383838;
    }
    .bsnav-mobile .navbar-nav .nav-item .navbar-nav {
        background: #42458d;
        margin-left: 0;
        margin-right: 0;
    }
        .bsnav-mobile .navbar-nav .nav-item .navbar-nav .nav-link {
            padding: 10px 10px;
            color: #fff;
            font-size: 16px;
        }
    .bsnav-mobile .navbar-nav .nav-item .nav-link {
        padding: 12px 0;
    }
    .bsnav-mobile .navbar-nav {
        padding: 0 0;
        text-align: left;
    }


    .banner-pic:before {
        content: " ";
        display: block;
        position: absolute;
        background-color: #0000004d;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .banner-pic {
        position: relative;
    }
    .footer .footer-info .comname {
        font-size: 20px;
    }
    .gotop, .is_scroll .gotop {
        bottom: -2px;
    }
    .footer .copyrights-info a:before {
        top: 13px;
    
    }
    .footer .copyrights-info a {
        width: 38px;
        height: 38px;
    }
    .gotop, .is_scroll .gotop {
        bottom: -5px;
    }
    .footer-logo a img {
        width: 50%;

    }
    .copyrights {
        font-size: 12px;
        width: 80%;
   
    }
    .footer .copyrights-info {
        padding: 20px 0 0;
        margin-top: 10px;
    }
    .footer .footer-info {
        padding-left: 0;
        padding-top: 0;
    }
    .footer .left-area {
        flex-wrap: wrap;
    }
    .home_contact_box .hcb_right h5 {
        font-size: 18px;
        letter-spacing: 0;
    }
    .home_contact_box {
        padding: 20px 0;
        flex-wrap: wrap;
    }
        .home_contact_box .hcb_right {
            width: 100%;
            padding: 10px 20px;
        }
        .home_contact_box .hcb_left {
            width: 100%;
            padding: 10px 0;
        }
    .home_contact {
        padding: 30px 0;
    }
    .home_product .prod_lis1 {
        width: 100%;
    }
    .home_product .prod_lis1 a p:before {
        width: 13px;
        height: 8px;
        right: 6px;
        background-size: cover;
    }
        .home_product .prod_lis1 a p {
            padding: 4px 6px;
            font-size: 16px;
        }
    .illus_fx {
        margin-bottom: 10px;
    }
    .illus_fx .prod_illus {
        font-size: 20px;
        padding-top: 10px;
    }
    .illus_fx .prod_illus span {
        display: unset;
    }
    .ab_major .ab_bg03 {
        top: -110px;
    }
    .ab_major .ab_bg03 img {
        height: 600px;
        width: 100%;
        position: relative;
        overflow: hidden;
        object-fit: cover;
        object-position: center center;
    }
    .ab_major h4 {
        letter-spacing: 2px;
        padding-top: 0;
        font-size: 16px;
    }
    .ab_major h2 {
        font-size: 32px;
        letter-spacing: 2px;
    }
    h3.h3 {
        font-size: 40px;
     
    }
    .more_btn {
        margin: 30px auto ;
   
    }
    .more_btn {
        padding: 10px 24px;
        width: 158px;
        font-size: 14px;
    }
    .ab_rycol .Txt p {
        font-size: 16px;
    }
    .banner .banner-txt {
        left: 4%;
    }


    .home_product {
        padding: 30px 4%;
    }

    .footer .footer_content {
        padding: 0 4% 20px;
    }
    .ab_rycol {
        padding: 0 4%;
    }
    .ab_rycol .Txt,
    .ab_rycol .pic {
        width: 100%;
    }
    .ab_rycol .d-flex {
        flex-wrap: wrap-reverse;
    }
    .banner-txt .banner-info p,
    body.home .banner-txt .banner-info p {
        font-size: 24px;
        text-align: center;
    }
    .banner-txt .banner-info h2,
    body.home .banner-txt .banner-info h2 {
        font-size: 26px;
        text-align: center;
    }
    .banner {
        padding-top: 82px;
    }
    body .navbar .navbar-toggler {
        width: 26px;
        margin-right: 0;
    }
    .navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon::after, .navbar-toggler .navbar-toggler-icon::before {
        height: 2px;
    }
    .header .navbar {
        padding: 4px 4%;
    }
    .navbar .navbar-brand {
        margin: 10px 0;
    }
    .lang_TW .navbar .navbar-brand {
        width: 137px;
        height: 54px;
       
    }
    .lang_TW   .header .navbar.logo-mob-show .navbar-brand .logo {
        display: none !important;
    }
        .slick-dots {
            bottom: 8px;
     
        }

  }