@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Oswald:wght@200..700&display=swap');

@charset "utf-8";
body {
    letter-spacing: .04em;
}
:root {
   --init-about-editor-slick-ratio:1296 /546;
}
.header .navbar {
    padding: 0 3%;
}

a:hover {
    color: #e41e25;
}

body.home .home_about .slickfixedInitPosition {
    aspect-ratio: var(--init-about-editor-slick-ratio);
}
.slickfixedInitPosition .slider{
    display:none;
}
.slickfixedInitPosition .slider.slick-initialized {
    display: block;
}

.cpd_sd21 {
    padding: 0 4%;
}

.home-pagelist-area > .container-fluid {
    padding: 0;
}


/*side*/
.btn.btn-secondary:hover,
.btn.btn-primary:hover {
    background: #222222;
    border-color: #222222;
}
.btn.btn-primary {
    background: #e41e25;
    border-color: #e41e25;
    border-radius: 0;
}
.btn.btn-secondary {
    background: #363636;
    border-color: #363636;
    border-radius: 0;
}
.side .filter-content > ul {
    padding: 5px 0;
}
.side1 .filter-content > ul > li {
    background: url(../images/all/list_icon2.png) no-repeat 0 6px;
    position: relative;
    padding-left: 18px;
}

.side .filter-content, .side .filter-sidebar.multiple-collapse .collapse-content {
    border: none;
    border-top: none;
}

.side .h3 {
    display: none;
    text-align: left;
    color: #32994a;
    font-size: 24px;
}
    .side  .txt-en{
        display:none;
    }
    .side .h3 .txt-tw {
        border: none;
        padding: 0;
    }
.side .filter-title .collapsed-btn, .side .filter-sidebar.multiple-collapse .collapsed-btn:hover{
    color:#e41e25;
}
.side .filter-title .collapsed-btn, .side .filter-sidebar.multiple-collapse .collapsed-btn {
    background: unset;
    border: none;
    border-bottom: 2px solid #ababab;
    padding: 5px 0;
    color: #000;
}

.side .filter-content > ul a:hover {
    color: #e41e25;
}

.side .filter-content > ul a {
    color: #000;
    padding: 6px 0;
    display: block;
}

.side .wid {
    padding: 20px 20px;
    border: 1px solid #DDD;
}


/*頁碼*/
.page-link:hover {
    color: #fff;
    background: #222222;
}

.page-link {
    color: #000;
    border: none;
    font-size: 1rem;
    padding: 0.5em;
    min-width: 2.5em;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0;
}

.page-item.active .page-link {
    background: #222222;
    border-color: unset;
    color: #fff;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 4px;
    background-color: #fff;
}



/* 購物清單 */

.header .navbar .nav-pos-top .cart-detail .item a.btn:hover {
    background-color: unset;
    opacity: 0.7;
    color: #000;
}

.nav-cart-info .nav-cart-list .cart-detail .item a {
    font-size: 15px;
}

.nav-cart-info .nav-cart-list .cart-detail .item .item-detail .info {
    align-items: center;
}

.nav-cart-info .nav-cart-list .cart-checkout .btn-group {
    padding-right: 19px;
}

.nav-cart-info .nav-cart-list .cart-checkout .sum {
    margin: 10px 12px 15px;
}

.nav-cart-info .nav-cart-list .h6 {
    font-size: 16px;
    padding: 10px 10px 5px;
    margin-bottom: 9px;
}

.cr_no {
    padding-left: 10px;
}

.nav-cart-info .nav-cart-list .cart-detail .item .info-detail a {
    font-size: 15px;
}

.header .navbar .cart-detail ul .cart-detail ul li i {
    width: auto;
    height: auto;
}

.header .navbar .cart-detail ul li i:before {
    display: block !important;
}

/* navbar */

.header   ul.navbar-nav{
    margin-right:30px;
}
.header .navbar-nav .nav-link .caret {
    display: none;
}
.header .small-btn-box .btn.btn-primary {
    border-color: unset;
    font-size: 14px;
    margin: 0;
    border-radius: 0;
    background: url(../images/all/Earth.svg) no-repeat #e41e25 11px center;
    padding-left: 30px;
}
.header .navbar-nav .nav-item:hover > .nav-link {
    color: #e41e25;
}

.header .navbar-nav .nav-link {
    color: #fff;
    padding: 25px 22px 25px;
}
.header .navbar {
    background-color: #222222;
    border-color: unset;
}
body.home .header .navbar {
    background: rgb(255 255 255 / 0%);
    border-color: unset;
    border-bottom:none;
}
body.home.is_scroll .header .navbar {
    background-color: #222222e3;
    box-shadow: 0px 0px 22px #40404054;
    border-color: unset;
}
.header .btn-group.lang .dropdown-menu {
    border-radius: 0;
}
.header .btn-group.lang .dropdown-item:hover{
    background-color:#e41e25;
    color:#fff!important;
}
.header .btn-group.lang .dropdown-item {
    text-align: center;
    padding: 10px 20px;
}
.dropdown-menu[data-bs-popper] {
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.header .navbar-nav li:last-child .nav-link {
    padding-right: 0;
}

.nav-item.dropdown.dropdown-left .navbar-nav .nav-item:hover .nav-link.trigger:before {
    border-left: solid 5px #ffffff;
}

.nav-item.dropdown.dropdown-left .navbar-nav .nav-item .nav-link.trigger:before {
    border-color: transparent transparent transparent #ffffff;
}

.nav-item.dropdown > .navbar-nav .navbar-nav .nav-item:hover > .nav-link {
    background-color: #e41e25;
}

.nav-item.dropdown > .navbar-nav .navbar-nav {
    background: #fff;
}

.nav-item.dropdown > .navbar-nav {
    background: #fff;
}

    .nav-item.dropdown > .navbar-nav li a {
        color: #1e1e1e;
    }

    .nav-item.dropdown > .navbar-nav .nav-item:hover > .nav-link {
        color: #fff;
        background-color: #e41e25;
    }


 /* banner */

.banner iframe {
    pointer-events: none;
    width: 300%;
    left: -100%;
    

}


/*共用*/
.main .side {
    margin-bottom: 0;
    z-index: 10;
}

.sort-area .btn-info:focus,
.sort-area .btn-info {
    color: #fff;
    background-color: #363636;
    border-color: #363636;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 0;
}

.page-content {
    background: url(../images/all/bg2.jpg) no-repeat center top;
    background-size: cover;
}

.breadcrumb-section {
    margin-bottom: 60px !important;
}

.breadcrumb li a {
    display: inline-block;
}

.breadcrumb li:first-child a {
    background-color: #e41e25;
    padding: 15px 30px;
    color: #fff;
}

.breadcrumb {
    padding: 0 5%;
    box-shadow: 0px 0px 10px #adadad54;
    background-color: #fff;
    display: flex;
    align-items: center;
}

    .breadcrumb .txt-en {
        display: none;
    }

.breadcrumb-section {
    padding-top: 117px;
}

/* 購物彈跳 */
.qty-box .btn:hover {
    background-color: #2a2a2a;
}

.btn.cart:hover {
    background-color: #2a2a2a;
    color: #fff;
}

.btn.cart {
    background: #81a626;
}

.gallery-list .item .item-detail {
    padding: 0 5px;
}

.modal-dialog-scrollable .modal-content {
    overflow: unset;
}

.modal-header .close {
    border-radius: 50%;
    position: absolute;
    background-color: #adadad;
    color: #fff;
    padding: 0;
    display: table;
    font-size: 20px;
    right: -16px;
    top: -14px;
    margin: 0;
    width: 40px;
    height: 40px;
    padding-top: 0;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: unset;
    font-weight: 400;
    border: none;
}

.qty-box .btn:hover {
    background: #2f4498;
}

.modal-header {
    padding-bottom: 6px;
}

.modal-title:before {
    content: " ";
    display: block;
    position: absolute;
    background-color: #000000;
    width: 4px;
    height: 22px;
    left: 0;
    top: 6px;
}

.modal-title {
    position: relative;
    font-size: 24px;
    text-align: left;
    padding-left: 12px;
    color: #000;
}

.main-title .h6 {
    font-size: 18px;
    padding-left: 0;
    border: none;
    color: #000;
}



/* 分享  */
body .container .ezshare-box {
    margin: 5px 0 20px 0;
}

.ezshare-box .list-inline-item:not(:last-child) {
    margin-right: 2px;
}

.ezshare-box a:hover:before {
    display: none;
}

.ezshare-box a:hover {
    color: #a99356 !important;
}

.ezshare-box ul:before {
    content: " SHARE : ";
    display: inline-block;
}

.ezshare-box ul {
    position: relative;
    align-items: center;
    display: flex;
}

.ezshare-box a {
    background-color: unset !important;
    font-size: 14px;
    width: 25px;
    height: 25px;
    padding-top: 3px;
    color: #000 !important;
}


/* 留言紀錄 order show*/
.order .talk-form-det .btn-area {
    margin: 30px 0 10px !important;
}

.order .talk-form-det {
    padding: 25px;
}
.talk-item .talk-top {
    border-bottom: 1px solid #aaaaaa;
    padding-bottom: 6px;
}

.talk-box .talk-time {
    color: #b01f23;
}

.talk-box .talk-item .first-level {
    padding: 3%;
    border: solid 1px #d4d4d4;
    background-color: #fff;
}



/*產品*/
.product-info-area .h5 {
    font-weight: 400;
    color: #000;
}
.tab-area .tab-title li a:hover,
.tab-area .tab-title li a:focus,
.tab-area .tab-title li a.active {
    background-color: #e41e25;
    border: 1px solid #e41e25;
    color: #fff;
}
.tab-area .tab-title li a {
    color: #000;
    font-size: 16px;
    border: 1px solid #e41e25;
    padding: 10px 45px;
    border-radius: 0;
    background-color: #fff;
}
.product-info-area, .product-info-area .item.desc .cont {
    font-size: 1rem;
    color: #101010;
}
.title-box .h5
.title-box .h5 {
    color: #141414;
    font-size: 14px;
}
.title-box  .h5 .sub-txt {
        color: #e41e25;
 }
body  .dropdown-menu.show {
   border-radius: 0;
}

.gallery-list p.price s {
    color: #5d5d5d;
}
.gallery-list p.price {
    color:#e41e25;

}
body.product   .item .pic {
    box-shadow:unset;
}
body.product    .item .info {
    text-align: left !important;
    padding: 0 0 0 !important;
}
    .product .gallery-list p.desc{
        display:none;
    }
    .product .gallery-list.border-solid .item .item-detail {
    border: none;
}
.function-bar .display-mode {
    opacity: 0;
}
.product .slider-nav .thumbnail:focus, .product .slider-nav .thumbnail.slick-current.slick-active {
    border: 1px solid transparent;
    border-color: #bbbbbb;
}

.slider-nav .thumbnail {
   
}


/*最新消息*/
.news .h2 .txt-en +.txt-en {
    display: none;
}
h1.h1 {
    position: relative;
    color: #1a1a1a;
    border-bottom: 1px solid #a2a2a2;
    margin-bottom: 30px;
}
.pic  .ratio {
    overflow: hidden;
}
body.news   .tt_1.title a{
    height:64px;
}
body.news .tt_2.desc {
    display: none;
}
body.news .vimo {
    color: #000;
}
body.news   .item .info p.tt_2 a {
    color: #4c4c4c !important;
}
body.news .item .info p.tt_1 a {
    color: #000 !important;
 
}
body .kind a {
    margin-right: 0 !important;
    margin-left: 10px !important;
    margin-bottom: 0 !important;
    background-color: #282828 !important;
    color: #fff !important;
}
.article-grid .item .info {
    border:none;
    padding:0;
  
}
.related-news .item .info .title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 54px;
}
/* 聯絡我們  */
.list-creative .list-terms label span{
    font-size:16px;
    margin-right:5px;
}
.list-creative .list-terms   p {
    width: 80%;
}
.lang_US   .list-creative .list-terms label {
    width: 90px;
}
.list-creative .list-terms label {
    display: flex;
    align-items: center;
    padding-right: 10px;
    width: 80px;
}
.list-creative > li:first-child label {
    font-size: 20px;
    color: #000;
    width: auto;
}
    .list-creative a {
    font-size: 16px;
    color: #222222;
}
.list-creative .list-terms:before{
    display:none;
}
.list-creative .list-terms {
    padding-left: 0;
    display: flex;
    align-items:center;
}

.form-select, .form-control {
    font-size: 14px;
    padding: 10px;
}
.contact .form-group > label {
    color: #000;
}
.contact .form-group > .col-xl-10, .contact .form-group > label {
    width: 100%;
}
.form-group > .col-xl-10 span {
    display: flex;
}
.contact .form-group .radio-inline {
    padding-right: 20px;
    display: flex;
}
.contact .form-group .radio-inline input {
    margin-right: 6px;
}

.contact .form-group .radio-inline {
    padding-right: 20px;
}

.contact .form-group .radio-inline input {
    margin-right: 6px;
}

/*英文版*/
.lang_US    .h2 .txt-en {
    padding-bottom: 0;
}
.lang_US   .h2.h2_s:before {
    height:44px;

}

/*首頁*/
.page-box .pagination a.more_x {
    width: 165px;
    padding: 14px 10px;
    font-weight: bold;
}
.home_cont a.more_x {
    width: 165px;
    padding: 14px 10px;
    font-size: 20px;
    font-weight: bold;
}
.home_cont h4 {
    color: #fff;
    margin-bottom: 0;
    margin-right: 20px;
}
.home_cont {
    padding: 80px 0;
    position: relative;
    background: url(../images/all/cont_bg.jpg) no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}

body .article-grid.info-absolute .item .pic img {
    transform: scale(1);
}

.vimo:before {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 7px;
    height: 7px;
    background-color: #e41e25;
}
.item:hover .vimo {
    color: #e41e25;
}
.vimo {
    display: table;
    margin: 30px 0 0 auto;
    color: #fff;
    font-size: 15px;
    padding-left: 15px;
    position: relative;
    transition: all 0.5s;
}
body .article-grid.info-absolute .item {
    padding: 0 30px;
}
body .home_news .item a {
    margin-top: 10px;
}
body .home_news .item:hover a .pic {
    box-shadow: 0px 0px 14px #ffffff;
}
body .item:hover .pic a {
    box-shadow: 0px 0px 17px #40404036;
}
body .item:hover .pic img {
    opacity: 0.8;
    transform: scale(1.1) !important;
}
body .item:hover .pic:hover {
    box-shadow: 0 0 0 #e41e25;
}
body .item .pic {
/*    box-shadow: 5px 5px 0 #e41e25;
*/    transition: all 0.5s;
}
body .item .info p.tt_2 a,
body .item .info p.tt_1 a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body .item .info p.tt_2 a {
    color: #cfcfcf !important;
    font-size: 15px !important;
    line-height:30px;
  /*  height:60px;*/
}
body .item .info p.tt_1 a {
    color: #fff !important;
    font-size: 18px!important;
    font-weight: bold;
    padding-top: 10px;
 /*   height:70px;*/
}
body .item .info p.tt_1{
    margin-bottom:0!important;
}
body   .date {
    color: #e41e25 !important;
    background: url(../images/all/time.svg) no-repeat left center;
    padding-left: 20px;
    letter-spacing: 0;
    text-align: left;
    font-family: "Oswald", sans-serif;
    font-size: 16px !important;
}
body .item .info {
    text-align: left !important;
    padding: 30px 0 0!important;
}
body .slick-multi-cusarrow .slick-btn .btn-next,
body .slick .slick-next {
    background: url(../images/all/arrow_right.svg) no-repeat #fff center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 33%;
    right: -8px;
    border: none;
    transform: unset;
    box-shadow: 0px 0px 10px #40404054;
    transition: all 0.5s;
}
    body .slick-multi-cusarrow .slick-btn .btn-next:hover,
    body .slick .slick-next:hover,
    body .slick-multi-cusarrow .slick-btn .btn-prev:hover,
    body .slick .slick-prev:hover {
        opacity: 0.8;
    }
body .slick-multi-cusarrow .slick-btn .btn-prev,
body .slick .slick-prev {
    background: url(../images/all/arrow_left.svg) no-repeat #fff center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 33%;
    left: -8px;
    border: none;
    transform: unset;
    box-shadow: 0px 0px 10px #40404054;
    transition: all 0.5s;
}
.home_news  .multiple-slick.slick {
    padding: 0 0;
    margin-top:20px;
}
.home_news a.more_x {
    background-color: #4a4a4a;
}
.home_news .h2 {
    color: #fff;
}
.home_news{
    padding:80px 0;
}
img {
    transition: all 0.5s;
}
a {
    transition: all 0.5s;
    display:block;
}
.brand_box .pic a img {
    width: 100%;
    position: relative;
   /* height: 145px !important;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;*/
}

.brand_box .pic a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100% );
    transform: skewX(-20deg);
}

.brand_box .pic a:hover::after {
    left: 130%;
    transition: left 2s ease;
    transform: scale(1);
}
.brand_box .pic a:hover img {
    transform: scale(1.1);
    opacity:0.8;
}
.brand_box .pic a:hover {
    box-shadow: 0px 0px 17px #40404036;
}
.brand_box .pic a{
    position:relative;
    overflow:hidden;
}
.brand_box .pic {
    width: calc((100% - 80px) / 5);
    margin-bottom: 10px;
}
.brand_box {
    position: relative;
    gap: 0 20px;
    flex-wrap:wrap;
    
}
a.more_x {
    position: relative;
    overflow: hidden;
    background-color: #222222;
    display: table;
    width: 120px;
    padding: 10px 10px;
    transition: background-color 0.3s ease;
}

    
    a.more_x span {
        display: table;
        margin: 0 auto;
        padding-right: 12px;
        background: url(../images/all/more.svg) no-repeat right center;
        color: #fff;
        transition: transform 0.3s ease;
    }

   
    a.more_x:before {
        content: " ";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-right: 19px solid transparent;
        border-top: 19px solid #fa0000;
        left: 0;
        top: 0;
        transition: transform 0.3s ease;
    }

  
    a.more_x:hover {
        background-color: #fa0000;
    }

        a.more_x:hover span {
            transform: translateX(5px);
        }

        a.more_x:hover:before {
            transform: translate(-3px, -3px);
        }
.tit_fx:before {
    content: " ";
    display: block;
    position: absolute;
    background-color: #e41e25;
    right:12%;
    width: calc(100% - 28%);
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
}
.tit_fx {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}
.home_brand {
    padding: 80px 0;
}
.h2 .txt-tw {
    font-size: 24px;
   
}
.h2 .txt-en {
    color: #e41e25;
    display: block;
    font-size: 50px;
    font-family: "Oswald", sans-serif;
    padding-bottom:10px;
}
.h2.h2_s:before {
    content: " ";
    display: block;
    position: absolute;
    width: 20px;
    height: 85px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e41e25;
}
.h2.h2_s {
    padding-left: 40px;
  
}

.h2 {
    position: relative;
    color: #1a1a1a;
    border-bottom: 1px solid #a2a2a2;
    margin-bottom: 30px;
}
.home_about .h2 .txt-tw {
    color: #fff;
}
.home_about .h2:before {
    content: " ";
    display: block;
    position: absolute;
    width: 80px;
    height: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    background-color: #e41e25;
}
.home_about .h2{
    padding-bottom:30px;
    margin-bottom:40px!important;
}

body.home .h2 {
    border-bottom: none;
    margin-bottom:0;
 
}
.home_about p b{
    color:#fff;

}
.home_about p {
    color: #ffffffcc;
}
.home_about > .container {
    max-width: 50%;
    margin: 0 auto;
}
.home_about {
    text-align: center;
    background-color: #222222;
    padding: 80px 0;
    color: #fff;
}


/*footer*/
body.home .footer {
    margin-top: 0;
}
 .footer{
    margin-top:80px;
}
.footer .footer_right .social-box {
    display: table;
    margin: 0 0 0 auto;
}
.footer .footer_right ul li:first-child {
    margin-left: 0;
}
.footer .footer_right ul li a:hover {
    background-color: #222222;
}
.footer .footer_right ul li a {
    background-color: #e41e25;
    width: 47px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer .footer_right .copyrights {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #727272;
    font-size: 14px;
}

.footer .footer-logo {
    margin-bottom: 20px;
}
.footer .footer_left ul li a:hover{
    color:#e41e25;
}
.footer .footer_left ul li a {
    padding-left: 5px;
    color: #050505;
}
.footer .footer_left ul li {
    display: flex;
    padding: 5px 0;
    color: #050505;
}
.footer .footer_right,
.footer .footer_left {
    width: 50%;
    position:relative;
}
    .footer .footer_right .title_box {
        font-family: "Oswald", sans-serif;
        color: #1e1e1e;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }
.footer .footer_content.fc_seperate_bottom {
    background: #fff;
    padding: 40px 0;
}
.footer-oth-det {
    justify-content:space-between;
}