@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
}
.header .navbar {
    padding: 0 10px;
}

.modal-body .spec-box .btn-box.st {
    height: 100%;
}
.modal-body .spec-box .btn-box.st .btn {
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}
body.home .page-content .orderingbox .ordering_process .list_item::after, 
body.home .page-content .h2, 
body.home .page-content .orderingbox .ordering_list .list_item::after,
.txt-en {
    font-family: 'Bebas Neue', sans-serif;
}

body {
    background: #fff;
    letter-spacing: 0.5px;
}

body,.editor,body.home .categorybox .servicebox .list_item .desc,.desc {
    font-size: 18px;
}
p,.editor {
    line-height: 1.8;
}

ul {
    padding-left: 0;
}

.second-line {
    display: block;
}
.btn.btn-primary {
    border-radius: 20px;
    padding: 10px 29px;
}



/*字主色*/
.btn.btn-bord,
body.about .page-content .txt h2,
.header .navbar .topbtn_group ul li label {
    color: var(--main-color);
}

/*字副色*/
a:hover, .wid-float-section ul li a:hover,
.wid-float-section ul li a:hover .icon,
.footer .footer_content .sitemap > ul > li > a:hover,
body.home .page-content .question_sec .info b,
body.home .page-content .serviceinfo .info p,
body.home .page-content .serviceinfo .info strong {
    color: var(--second-color);
}

body.home .page-content .h2 > span::before,
body.home .page-content .h2 > span::after,
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::after,
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::before,
.header .navbar .navbar-nav.nav-1 > .nav-item::before,
body.home .categorybox .catelist .list_item a .info .btn-more:before,
body.home .categorybox .catelist .list_item a .info .btn-more:after,
body.home .categorybox .catelist .list_item::after,
body.home .categorybox .catelist .list_item::before,
body.home .categorybox .catelist .list_item a .info::after,
body.home .categorybox .servicebox .list_item .icon:after,
body.home .page-content .productbox::after,
body.home .page-content .productbox::before,
body.home .page-content .orderingbox .ordering_list .list_item::before,
body.home .page-content .orderingbox .ordering_list .list_item::after,
body.home .page-content .orderingbox .ordering_process .list_item::before,
body.home .page-content .orderingbox .ordering_process::before,
body.home .page-content .orderingbox .ordering_process::after,
body.home .page-content .clientbox:before,
.kind-info .h2 .txt-tw::before, .kind-info .h2 .txt-tw::after,
body.product .gallery-list .item .pic a::after,body.home .page-content .smlink_banner::after {
    content: "";
}
body.home .categorybox .catelist .list_item,
body.home .categorybox .catelist .list_item a .pic,
body.home .categorybox .catelist .list_item a .info .btn-more,
body.home .categorybox .catelist .list_item a .info,
body.home .categorybox .servicebox .list_item,
body.home .categorybox .servicebox .list_item .icon,
body.home .page-content .productbox .list_item .pic,
body.home .page-content .list_item,
.footer .footer_content .list-unstyled .list-item,
.kind-info .h2 .txt-tw, .article-grid.ar-img article, body.home .page-content .smlink_banner {
    position: relative;
    /*z-index:1;*/
}


body.home .categorybox .catelist .list_item:before,
body.home .categorybox .catelist .list_item a .info::after,
body.home .categorybox .servicebox .list_item .icon:after,
body.home .page-content .productbox .list_item .mask,
body.home .page-content .productbox::after, 
body.home .page-content .productbox::before,
body.home .page-content .orderingbox .ordering_list .list_item::before,
body.home .page-content .orderingbox .ordering_list .list_item::after,
body.home .page-content .orderingbox .ordering_process .list_item::before,
body.home .page-content .orderingbox .ordering_process::before,
body.home .page-content .orderingbox .ordering_process::after,
body.home .page-content .clientbox:before,.kind-info .h2 .txt-tw::before, .kind-info .h2 .txt-tw::after,
body.news .page-content .article-grid.ar-img article .info .kind,
body.product .gallery-list .item .pic a::after,
body.home .page-content .smlink_banner::after{
    position:absolute;
}

 .wid-float-section ul li a:hover, .wid-float-section ul li a:hover .icon {
        color: var(--third-color);
}

.anchor-title a.active {
    color: var(--fifth-color);
}

.gallery-list .item .info {
    padding: 10px;
}

.gallery-list p.price, .product-info-area .item.price .cont {
    color: #b12e2e;
}

.gotop {
    bottom: 9px;
}
.wid-float-section ul li {
    padding: 5px 0 5px;
}
.wid-float-section ul li a {
    width: 58px;
    display: block;
    align-items: center;
    color: #333;
}
.wid-float-section ul li a .nst-wrap {
    display: block;
    background: url(../images/social3_color.svg) no-repeat top center;
    padding-top: 60px;
}
    .wid-float-section ul li a .nst-wrap svg {
        display: none;
    }
.wid-float-section ul li.icon_form .nst-wrap {
    background: url(../images/form.svg) no-repeat top center;
}
.wid-float-section ul li.icon_f a .nst-wrap {
    background-position: top -14px center;
}

.wid-float-section ul li.icon_i a .nst-wrap {
    background-position: top -196px center;
}

.wid-float-section ul li.icon_y a .nst-wrap {
    background-position: top -373px center;
}

.wid-float-section ul li.icon_t a .nst-wrap {
    background-position: top -538px center;
}

.wid-float-section ul li.icon_p a .nst-wrap {
    background-position: top -769px center;
}

.wid-float-section ul li.icon_l a .nst-wrap {
    background-position: top -971px center;
}

.wid-float-section ul li.b1 a .nst-wrap {
    background: url(../images/cart.svg) no-repeat top center;
}

.wid-float-section ul li + li {
    border-top: none;
}


.header .navbar-nav .nav-item:hover .nav-link,
.header .navbar .navbar-nav.nav-1 .nav-item,
body.home .page-content .smlink_banner a,
body.home .page-content .smlink_banner,
.gallery-list.border-solid .item .item-detail .btn-box .btn,
.ezshare-box a:hover, .anchor-title.scroll-to-fixed-fixed ul li a:hover, 
.anchor-title.scroll-to-fixed-fixed ul li a.active{
    color: #fff;
}




.page-item:first-child .page-link, .page-item:last-child .page-link {
    border: 1px solid;
    border-radius: 0;
}
/*背景主色*/
/*body.home .categorybox .catelist .list_item {
    background: var(--main-color);
}*/

.anchor-title.scroll-to-fixed-fixed,
.list-creative .list-terms:before, .gotop a, .bsnav-mobile.full .navbar-nav .nav-item:hover, body.home .categorybox .catelist .list_item a{
    background: var(--second-color);
}
/*背景第五色*/
.toast,
.list-creative > li:nth-child(2n) .list-terms:before {
    background: var(--fifth-color);
}
.breadcrumb {
    background: #f7f7f7;
    justify-content: center;
}
body.home section .more-btn-area {
    text-align: center;
    margin: 25px 0;
}
/*描邊 currentColor*/

.btn.btn-bord, .page-link {
    border-color: currentColor;
}
.nav-item.dropdown.dropdown-left .navbar-nav .nav-item .nav-link.trigger:before {
    border-left-color: currentColor;
}
.header .navbar-nav .nav-item > .nav-link .caret, .header .navbar-nav .nav-item:hover > .nav-link .caret {
    border-top-color: currentColor;
}

.list_item img {
    width: 100%;
}

.h5 .sub-txt, body.news .subject-sec .small-title {
    color: #686868;
}

.btn.btn-light {
    background: #b12e2e;
}

.nav-item.dropdown.dropdown-left .navbar-nav .nav-item:hover .nav-link.trigger:before {
    border-left: solid 5px #ffffff;
}
.tag:hover,
body.home .categorybox .catelist .list_item a, body.home .page-content .orderingbox .ordering_process .list_item  .desc{
    color: #fff;
}
/*背景主色，白字*/
.gallery-list.cover.hov-cart .item-detail .cover .btn-box .btn:hover,
body.show .page-item .page-link,
.nav-item.dropdown > .navbar-nav .nav-item:hover > a,
.bsnav-mobile.full .navbar-nav .nav-item .navbar-nav .nav-link:hover,
.gotop a:hover, body.news .tab-area .tab-title a.active {
    background: var(--main-color);
    color: #fff;
}

    body.show .page-item .page-link:hover {
        background: #696969;
    }
/*.gallery-list.cover.hov-cart .item-detail .cover .btn-box .btn:hover,
body.show .page-item .page-link:hover, body.home .home_about .btn-more:hover,
.bsnav-mobile.full .navbar-nav .nav-item .navbar-nav .nav-link:hover {
    background: var(--main-color);
    color: #000;
}*/

/*背景副色，白字*/


.iso-kind li.active a, .iso-kind li a:hover,
.header .bsnav-mobile.full .navbar-nav .nav-item:hover > .nav-link,
body.news .page-content .article-grid .item .info .kind a, .tag {
    background: var(--second-color);
    color: #fff;
}

/*背景副色，白字*/
/*.btn.btn-primary {
    background: linear-gradient(109deg,#ffc03e,#f39800);
    color: #fff;
    border-radius: 13px;
    filter: drop-shadow(2px 5px 6px #fce2b8);
}
*/
  /*  .btn.btn-primary:hover {
        background: linear-gradient(322deg,#ffc03e,#f39800);
    }*/
/*背景第五色，白字*/
/*.nav-item.dropdown > .navbar-nav .nav-item:hover > a,
.member-function-box .item > a:hover,.btn.more {
    background: var(--fifth-color);
    color: #fff;
}*/

/*.iso-kind li.active a, .iso-kind li a:hover {
    color: #fff;
    background: #639da1;
    border-color: #57969b;
}*/
.bsnav-mobile.full .navbar-nav .nav-item .navbar-nav {
    background: #69d0b8;
}


.btn-more::after, .btn.btn-primary, .header .navbar .navbar-nav.nav-1 > .nav-item::before,
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::before,
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::after,
body.home .categorybox .catelist .list_item a .info .btn-more,
body.home .categorybox .catelist .list_item a .info .item_title,
body.home .categorybox .catelist .list_item a .info::after,
body.home .page-content .productbox .list_item .mask,
body.home .page-content .productbox .list_item .mask .icon,
body.product .gallery-list .item .pic a::after,
body.home .page-content .smlink_banner::after, body.home .categorybox .catelist .list_item a .pic img {
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
}


/*gallery-list共用*/
.gallery-list.border-solid .item .item-detail {
    border-radius: 5px;
}


/*footer*/
.footer .footer-info ul li a,
.footer .footer-info ul li,
.footer .footer-info .desc,
.footer .footer_content.fc_seperate_bottom .right-area a, 
.footer .footer_content.fc_seperate_bottom .social-box svg, 
.footer .footer-seo .h4, .footer .footer-seo .desc, 
.right-area .editor, .footer .footer_content .sitemap > ul > li > a, 
.footer .footer_content .sitemap > ul > li > a:hover,
.footer .footer-info ul li .icon, .footer .copyrights-info a,
.footer .copyrights, .footer .footer_content .left-area p {
    color: #fff;
    font-size: 16px;
}


.footer {
    background: #3e5b99;
    /* background-size: cover; */
    color: #fff;
}
.footer .footer_content {
    background: none;
    padding: 50px 0;
}

.footer .footer-info ul li label {
    display: block;
    color: #9fb6e8;
}

.footer .footer_content .list-unstyled {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}


.footer .footer_content .list-unstyled .list-item {
    padding-left: 100px;
    min-height: 86px;
    margin-bottom: 22px;
}
.footer .footer-info ul li .icon {
    border-radius: 50%;
    width: 85px;
    height: 85px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    background: url(../images/contacticon_thin-01.svg) top -6px center no-repeat #fff;
}
.footer .footer-info ul li.bstime .icon {
    background-position: top -551px center;
}

.footer .footer-info ul li.add .icon {
    background-position: top -892px center;
}

.footer .footer-info ul li.mail .icon {
    background-position: top -1613px center;
}
.footer .footer-info ul li.lineID .icon {
    background-position: top -1927px center;
}
.footer .footer-info ul li label::after {
    content: "：";
}
.footer .footer_content.fc_seperate_bottom .footer-bottom {
    background: none;
}

.footer .right-area {
    padding-left: 46px;
}
.footer .copyrights-info {
    border-top: 1px solid #7b89a7;
    opacity: 0.5;
}
.footer .copyrights-info .powered {
    float: right;
}

.is_scroll .header .navbar .navbar-brand {
    width: 234px;
    height: 70px;
}


.is_scroll .header .navbar {
    background: rgb(255 255 255 / 92%);
}

.sec01 {
    position: relative;
   padding:140px 0;
}


.d-flex, body.home .categorybox .catelist .list_item a,
body.home .categorybox .catelist .list_item a .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.d-cart-flex {
    display: flex;
    flex-wrap: wrap;
}

.gallery-list.border-solid .item .item-detail .btn-box .btn {
    background: #dc3545;
}

.page-link {
    color: #adadad;
}

span.radio-inline + span.radio-inline {
    margin: 0 10px;
    display: inline-block;
}

span.radio-inline input {
    margin-right: 4px;
}
ul.slick-slider {
    padding-left: 0;
}
.header .navbar .small-btn-box .navbar-toggler {
    width: 48px;
}
.header .navbar .small-btn-box .navbar-toggler:before {
    content: "主選單";
    display: block;
    font-size: 15px;
    margin-top: 32px
}


.recommend .slick .list_item {
    /* border: 1px solid #ddd; */
    margin: 0 13px;
    padding: 21px;
    background: rgb(243 237 230 / 64%);
    position: relative;
    border-radius: 20px;
}

    .recommend .slick .list_item h3 {
        font-size: 22px;
        margin: 14px 0;
        color: var(--main-color);
        line-height: 1.5;
        font-weight: 600;
    }

.page-content .recommend {
    margin: 34px 0
}

.recommend .slick .list_item .name small {
    display: block;
    line-height: 1;
    color: #8a8a8a
}

.recommend .slick .list_item .pic {
    width: 20%;
    margin: 0 auto 8px
}

.recommend .slick .list_item .name {
    text-align: center;
    font-size: 16px
}




/*header*/

.header .navbar {
    padding: 0;
    border-bottom: 0;
}
.header .navbar-nav .nav-link {
    padding: 14px 18px;
    font-size: 16px;
    letter-spacing: 0;
}
.header .navbar-nav .nav-link,.header .navbar .navbar-nav.nav-1 > .nav-item {
    position:relative;
}

.header .navbar .navbar-nav.nav-1 > .nav-item::before {
    left: 10px;
    right: -10px;
    background: url(../images/navbg.png) no-repeat;
    position: absolute;
    top: -2px;
    bottom: -2px;
    background-size: 100% 100%;
}
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::before,
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::after {
    /* left: 10px; */
    right: -14px;
    
    position: absolute;
    
    /* bottom: -5px; */
    /* background-size: 100% 100%; */
    z-index: -2;
    width: 20px;
    height: 3px;
}
    .header .navbar .navbar-nav.nav-1 > .nav-item::before, 
    .header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::before,
    .header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::after {
        opacity:0;
    }

    .header .navbar .navbar-nav.nav-1 > .nav-item:hover::before,
    .header .navbar .navbar-nav.nav-1 > .nav-item:hover > .nav-link::before,
    .header .navbar .navbar-nav.nav-1 > .nav-item:hover > .nav-link::after {
        opacity: 1;
    }

.nav-item.dropdown.fadeup > .navbar-nav.in {
    z-index: 2;
}

.header .navbar .navbar-nav.nav-1 > .nav-item .navbar-nav {
    background: linear-gradient(180deg, #266ba9, #6abbeb);
}

.nav-item.dropdown > .navbar-nav .nav-item:hover > a {
    background: #3e5b99;
}
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::before {
    background: url(../images/navbf.png) no-repeat;
    top: -2px;
}
.header .navbar .navbar-nav.nav-1 > .nav-item > .nav-link::after {
    bottom: -2px;
    /* transform: rotate(180deg); */
    background: url(../images/navaf.png) no-repeat;
}

.header .navbar > .container-fluid {
    display: block;
}

.header .navbar .collapse {
    justify-content: center !important;
    /* display: block !important; */
    /* width: 100%; */
    background: linear-gradient(90deg, #5076b7,#293d77,#5076b7);
}

.header .navbar .inner {
   margin:0 auto;
}

.header .navbar .small-btn-box {
   /* position: absolute;
    right: 280px;
    top: 21px;*/
}

.header .navbar .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* margin-bottom: 18px; */
}

.header .navbar .small-btn-box .btn-search:before {
    content: "商品關鍵字搜尋";
    /* padding: 5px; */
    margin-right: 9px;
}

.header .navbar .nav-search-li .nav-search-box .search-area {
    z-index: 1;
}
.header .navbar .small-btn-box .btn-search {
    padding: 10px 18px;
    border-radius: 30px;
    background: #ff9400;
    color: #fff;
    font-size: 18px;
}
.header .navbar .navbar-nav.nav-1 > .nav-item .navbar-nav {
    background: linear-gradient(180deg, #266ba9, #6abbeb);
}


.bsnav-mobile.left.in .navbar {
    background: linear-gradient(180deg, #aecafb,#1f4fb5);
}
.bsnav-mobile .navbar-nav .nav-item .nav-link {
    border-bottom: solid 1px #cecece56;
    padding: 15px 0;
}

/*首頁共用*/


body.home .page-content .h2,
.kind-info .h2 {
    text-align: center;
    font-size: 24px;
    color: #a4a4a4;
    font-weight: normal;
    border-bottom: 0;
    margin-bottom: 40px;
    margin-top: 47px;
    -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
body.home .page-content .h2 > span, .kind-info .h2 .txt-tw {
    display: block;
    position: relative;
    font-size: 40px;
    color: #333;
    padding: 9px 0;
    letter-spacing: 9px;
    position: relative;
    margin-bottom: 16px;
}

body.home .page-content .h2 > span span {
    /* margin: 0 8px; */
}

body.home .page-content .btlink .h2, body.home .page-content .smlink_banner h1 {
    display: none;
}


body.home .page-content .h2 > span::before,
body.home .page-content .h2 > span::after,
.kind-info .h2 .txt-tw::before, .kind-info .h2 .txt-tw::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

body.home .page-content .h2 > span::before,
.kind-info .h2 .txt-tw::before {
    width: 280px;
    height: 70px;
    background: url(../images/h2bf.png) no-repeat;
    top: -47px;
}

body.home .page-content .h2 > span::after, .kind-info .h2 .txt-tw::after {
    width: 230px;
    height: 20px;
    background: url(../images/h2af.png) no-repeat;
    bottom: -16px;
}

body.home .page-content .categorybox .h2 {
    margin-bottom: 80px;
}




body.home .categorybox .catelist .list_item a .pic {
    width: 60%;
    height: 100%;
    background: url(../images/categoryitembg.jpg) no-repeat;
    position: relative;
}
body.home .categorybox .catelist .list_item a .info {
    width: 40%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

body.home .categorybox .catelist .list_item a .pic img {
    /* position: absolute; */
    position: relative;
    top: -47px;
    width: 80%;
    transition-delay:0.3s;
    transform: translateY(74px);
    opacity: 0;
}
body.home .categorybox .catelist .list_item.aos-animate a .pic img {
    transform: translateY(0);
    opacity: 1;
}
body.home .categorybox .catelist .list_item {
    margin-bottom: 104px;
    z-index: 1;
}

body.home .categorybox .catelist .list_item a .info .inner {
    width: 70%;
}
body.home .categorybox .catelist .list_item a .info .item_title {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 40px;
}

body.home .categorybox .catelist .list_item a .info .btn-more {
    padding: 10px;
    background:url(../images/item_more.png) no-repeat right 10px center;
    border-bottom:2px solid;
}
body.home .categorybox .catelist .list_item a:hover .info .btn-more {
   border-bottom:2px solid transparent;
}

body.home .categorybox .catelist .list_item a .info .btn-more:before{
    top: 0;
    left: 0

}
body.home .categorybox .catelist .list_item a .info .btn-more:after{
    
    bottom: 0;
    right: 0;
}
body.home .categorybox .catelist .list_item a .info .btn-more:before,
body.home .categorybox .catelist .list_item a .info .btn-more:after{
    position:absolute;
        border: 2px solid transparent;
    width: 0;
    height: 0;
    pointer-events:none;
}

body.home .categorybox .catelist .list_item:hover a .info .btn-more:before,
body.home .categorybox .catelist .list_item:hover a .info .btn-more:after{
        width: 100%;
    height: 100%;
}
body.home .categorybox .catelist .list_item:hover a .info .btn-more:after{
    border-bottom-color: #fff;
    border-left-color: #fff;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

body.home .categorybox .catelist .list_item:hover a .info .btn-more:before {
    border-top-color: #fff;
    border-right-color: #fff;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition-delay: 1s;
}



body.home .categorybox .catelist .list_item:before {
    left: 20px;
    right: -20px;
    top: 20px;
    bottom: -20px;
    border: 1px solid #c8c8c8;
      z-index:-1;
}

body.home .categorybox .catelist .list_item:hover a .info .btn-more {
    transform: translateY(-80%);
}

body.home .categorybox .catelist .list_item:hover a .info .item_title {
    transform: translateY(50%);
    opacity:0;
}
body.home .categorybox .catelist .list_item a .info {
    overflow:hidden;
    z-index:1;
}
body.home .categorybox .catelist .list_item a .info::after {
    left: 100%;
    right: -100%;
    width: 200%;
    height:200%;
    top: 0;
    bottom: 0;
    background: #347ab6;
    transition-duration: 1.5s;
    transform: rotate(45deg);
    opacity: 0;
    z-index:-1;
}
body.home .categorybox .catelist .list_item:hover a .info::after {
    opacity: 1;
    left: -30%;
    top: -128px;
}



body.home .categorybox .catelist .list_item::after,
body.home .page-content .orderingbox .ordering_list .list_item::after,
body.home .page-content .orderingbox .ordering_process .list_item::after{
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    counter-increment: num;
    content: "0" counter(num);
    z-index: 1;
    
}


body.home .categorybox .catelist .list_item::after{

    right: 13px;
    top: -9px;
    width: 75px;
    height: 80px;
    line-height: 1;
    background: url(../images/number.png) no-repeat;
}



body.home .categorybox .catelist, 
body.home .ordering_list,
body.home .ordering_process {
    counter-reset: num;
}


body.home .categorybox .catelist .list_item:nth-child(2) {
    /* margin-left: 47px; */
    transform: translateX(40px);
}

body.home .categorybox .servicebox .list_item {
    width: 24%;
    padding: 20px;
    border: 1px solid var(--second-color);
    border-bottom-width: 10px;
    background:#fff;
}

body.home .categorybox .servicebox .list_item h3 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

body.home .categorybox .servicebox .list_item .icon {
    width: 153px;
    height: 155px;
    margin: -61px auto 16px;
    background: url(../images/list_item_round.png) no-repeat center;
}

body.home .categorybox .servicebox .list_item .icon:after {
    width: 70px;
    height: 70px;
    left: calc(50% - 70px /2);
    top: calc(50% - 70px /2);
    background: url(../images/itemicon.svg) no-repeat top center;
}

body.home .categorybox .servicebox .list_item.i1  .icon:after {
    background-position: top -7px center;
}

body.home .categorybox .servicebox .list_item.i2 .icon:after {
    background-position: top -332px center;
}

body.home .categorybox .servicebox .list_item.i3 .icon:after {
    background-position: top -699px center;
}

body.home .categorybox .servicebox .list_item.i4 .icon:after {
    background-position: top -1047px center;
}

body.home .categorybox .servicebox .list_item .desc{
    margin-bottom:0;
}

body.home .categorybox .servicebox {
    margin-top: 178px;
}
body.home .page-content .categorybox {
    background: url(../images/categorybg.jpg) left bottom -106px no-repeat,url(../images/categorybg2.jpg) left top -110px no-repeat;
}


/*首頁產品*/
body.home .page-content .productbox.sec01 {
    background: url(../images/bg2.jpg) repeat;
}

body.home .page-content .productbox.sec01 .works-box:first-child {
    margin-bottom: 100px;
}
body.home .page-content .productbox .list_item p {
    margin-bottom: 10px;
    line-height: 1.5;
    color: #333;
}



body.home .page-content .productbox .list_item {
    text-align: center;
}

body.home .page-content .productbox .list_item .serial {
        display: table;
        margin: -8px auto 10px;
        z-index: 5;
        position: relative;
        padding: 6px 12px;
        background: #cde4b4;
      

}

body.home .page-content .productbox .list_item .title {
    font-size: 20px;
    font-weight: bold;
}

body.home .page-content .productbox .list_item .desc, body.product .gallery-list.border-solid .item .item-detail .info .desc {
    line-height: 1.5;
    text-align: left;
    margin-bottom: 0;
    font-size: 16px;
    color: #8b8b8b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-height: 42px; */
    text-align: center;
}

body.home .page-content .productbox .list_item .pic {

    display: block;
}
body.home .page-content .productbox .list_item .mask {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4eafb4ca;
    z-index: 1;
    /* padding-top: 106px; */
    flex-direction: column;
    color: #fff;
    opacity: 0;
    border-radius: 100%;
    transform: scale(0);
}

body.home .page-content .productbox .list_item .mask .icon {
    width: 135px;
    height: 86px;
    background: url(../images/producthover.svg) center no-repeat;
    margin-bottom: 12px;
    transform:translateY(-10px);
}


body.home .page-content .productbox .list_item:hover .mask {
    opacity: 1;
    border-radius: 0;
    transform: scale(1);
}

body.home .page-content .productbox .list_item:hover .mask .icon{
    transform:translateY(0);
}



body.home .page-content .productbox::before {
    width: 703px;
    height: 342px;
    display: block;
    background: url(../images/ribbondeco.png) no-repeat left top;
    top: -120px;
    /* z-index: -1; */
    background-size: contain;
}

body.home .page-content .productbox::after {
    width: 600px;
    height: 342px;
    display: block;
    background: url(../images/ribbondeco2.png) no-repeat right top;
    bottom: -204px;
    /* z-index: -1; */
    background-size: contain;
    right: 0;
    z-index: 1;
}

/*訂購流程*/


body.home .page-content .orderingbox .h2 {
    margin-bottom: 80px;
}
body.home .page-content .orderingbox {
    padding: 140px 0px !important;
    background: url(../images/sopbg.jpg) left -177px top -32px no-repeat, url(../images/sopbg2.jpg) left bottom no-repeat;
    background-size: contain;
}

body.home .page-content .orderingbox .ordering_list .list_item {
    width: 21%;
    margin: 0;
    border-radius: 30px;
    border: 1px solid #ddd;
    margin-bottom: 66px;
    padding: 24px;
    background: #fff;
}

body.home .page-content .orderingbox .ordering_list .list_item .subtitle {
    font-weight: bold;
    font-size: 24px;
    color: #424242;
}

body.home .page-content .orderingbox .ordering_list .list_item .icon {
    width: 120px;
    height: 135px;
    margin: 0 auto 22px;
    background: url(../images/sopicon.svg) center top -17px no-repeat;
}
body.home .page-content .orderingbox .ordering_list .list_item.i2 .icon {
    background-position: center top -251px;
}

body.home .page-content .orderingbox .ordering_list .list_item.i3 .icon {
    background-position: left -5px top -496px;
    width: 127px;
    /* height: 95px; */
}

body.home .page-content .orderingbox .ordering_list .list_item.i4 .icon {
    background-position: left -5px top -782px;
    /* width: 105px; */
}

body.home .page-content .orderingbox .ordering_list .list_item.i5 .icon {
    background-position: left -5px top -1157px;
}

body.home .page-content .orderingbox .ordering_list .list_item.i6 .icon {
    background-position: center top -1611px;
}

body.home .page-content .orderingbox .ordering_list .list_item.i7 .icon {
    background-position: center top -2027px;
}

body.home .page-content .orderingbox .ordering_list .list_item.i8 .icon {
    background-position: center top -2485px;
}

body.home .page-content .orderingbox .ordering_list .list_item::before {
    width: 53px;
    height: 53px;
    background: url(../images/soparrow2.svg) center no-repeat;
    right: -63px;
    top: calc(50% - 53px / 2);
}

body.home .page-content .orderingbox .ordering_list .list_item:nth-child(4)::before,
body.home .page-content .orderingbox .ordering_list .list_item:nth-child(8)::before{
    content:none;

}


body.home .page-content .orderingbox .ordering_list .list_item::after {
    width: 77px;
    height: 77px;
    left: -35px;
    top: -35px;
    font-size: 32px;
    background: url(../images/sopnumber.png) center no-repeat;
    font-family: 'Bebas Neue', sans-serif;
    color:#fff;
}

    body.home .page-content .orderingbox .ordering_list {
        margin-bottom: 98px;
    }


body.home .page-content .orderingbox .ordering_process {
    padding: 90px 38px 0 38px;
    justify-content: center;
    background: url(../images/sopline.jpg) left top no-repeat;
    background-size: 100% 12px;
    position: relative;
}

body.home .page-content .orderingbox .ordering_process .list_item {
    width: 22%;
    text-align: left;
    padding: 22px;
    position: relative;
    color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(57px);
}
body.home .page-content .orderingbox .ordering_process .list_item.aos-animate {
    opacity: 1;
    /* transform: rotateX(0); */
    transform: translateY(0);
}
body.home .page-content .orderingbox .ordering_process .list_item .desc {
    line-height: 1.5;
    margin-bottom:0;
}

body.home .page-content .orderingbox .ordering_process .list_item::after {
    width: 68px;
    height: 68px;
    font-size: 40px;
    background: #fff;
    border-radius: 50%;
    left: calc(50% - 68px / 2);
    top: -116px;
    transform: scale(0);
}
body.home .page-content .orderingbox .ordering_process .list_item.aos-animate::after {
    transform: scale(1);
}
body.home .page-content .orderingbox .ordering_process .list_item:nth-child(even) {
    background: url(../images/sopitembg.png) right -101px top -127px no-repeat,linear-gradient(180deg, #0099b5,#005971);
    box-shadow: #00485c 4px 5px 0;
}

body.home .page-content .orderingbox .ordering_process .list_item:nth-child(odd) {
    background: url(../images/sopitembg.png) right -101px top -127px no-repeat,linear-gradient(180deg, #367dbe,#003d71);
    box-shadow: #002a4e 4px 5px 0;
}

body.home .page-content .orderingbox .ordering_process .list_item:nth-child(odd)::after {
    border: 5px solid #185a92;
    color: #185a92;
}

body.home .page-content .orderingbox .ordering_process .list_item:nth-child(even)::after {
    border: 5px solid #03738d;
    color: #03738d;
}


body.home .page-content .orderingbox .ordering_process .list_item::before {
    width: 5px;
    height: 0;
    right: calc(50% - 5px / 2 );
    top: -67px;
    /* background: radial-gradient(#fff, transparent, transparent); */
    /* opacity: 0.4; */
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
    z-index: -1;
}
body.home .page-content .orderingbox .ordering_process .list_item.aos-animate::before {
    height: 67px;
    animation-delay:1s;
}
body.home .page-content .orderingbox .ordering_process .list_item:nth-child(odd)::before {

    background: #185a92;
}

body.home .page-content .orderingbox .ordering_process .list_item:nth-child(even)::before {

    background: #03738d;
}

body.home .page-content .orderingbox .ordering_process::before {
    width: 77px;
    height: 60px;
    background: url(../images/soparrow.png) left top no-repeat;
    right: -19px;
    top: -19px;
}

body.home .page-content .orderingbox .ordering_process::after {
    width: 38px;
    height: 38px;
    background: #fff;
    left: -19px;
    top: -14px;
    border-radius: 50%;
    border: 5px solid #3379b9;
     -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
}

body.home .page-content .smlink_banner .title {
    margin: 0;
    display: none;
}
body.home .page-content .smlink_banner {
    background: url(../images/smlinkbg.jpg) no-repeat;
    padding:0 !important;
}
body.home .page-content .smlink_banner::after {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #fff;
}
body.home .page-content .smlink_banner .pic {
    background: url(../images/smlinkpic.png) no-repeat;
    width: 225px;
    height: 179px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-21px);
    opacity: 0;
    animation-delay:2s;
     -webkit-transition: 2.5s all ease;
    -moz-transition:2.5s all ease;
    -o-transition: 2.5s all ease;
    transition: 2.5s all ease;
}
body.home .page-content .smlink_banner.aos-animate a .pic {
    transform: translateX(0);
    opacity: 1;
}
body.home .page-content .smlink_banner .wid-page_unit a {
    position: relative;
    padding: 50px 28px 50px 258px;
    display: flex;
    justify-content: space-between;
}
body.home .page-content .smlink_banner .wid-page_unit a {
    position: relative;
    padding: 40px 28px 40px 258px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    letter-spacing: 3px;
}
body.home .page-content .smlink_banner .wid-page_unit a p {
    font-size: 30px;
    margin-bottom:0;
}

body.home .page-content .smlink_banner .wid-page_unit a p span {
    font-size: 18px;
}

body.home .page-content .smlink_banner .wid-page_unit a p span:before {
    content: "";
    width: 1px;
    display: inline-block;
    height: 48px;
    background: #fff;
    /* opacity: 0.5; */
    margin: 0 24px;
    vertical-align: middle;
}

body.home .page-content .smlink_banner::after {
    
    right: 0;
    top: 0;
    bottom: 0;
    left: -100%;
    background: #fff;
    z-index: 2;
    width: 0;
}
body.home .page-content .smlink_banner.aos-animate::after {
    animation: move_in_out 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}


body.home .page-content .smlink_banner .wid-page_unit a p, 
body.home .page-content .smlink_banner .wid-page_unit a p span,
body.home .page-content .smlink_banner .wid-page_unit a p span:before {
    vertical-align: middle;

}
body.home .page-content .smlink_banner .wid-page_unit .btn-more {
    width: 50px;
    height: 50px;
    background: url(../images/morearrow.svg) no-repeat center;
}

body.home .page-content .clientbox {
    padding: 140px 0 192px 0 !important;
    background: url(../images/cloud.png) center bottom -32px no-repeat;
    z-index: 1;
}

body.home .page-content .clientbox:before {
    /* width: 100%; */
    height: 540px;
    background: url(../images/cooprate.jpg) no-repeat center;
    top: -5px;
    left: 0;
    right: 0;
    z-index: -1;
}
body.home .page-content .clientbox .box-intro {
    width: 70%;
    margin: 0 auto;
}
body.home .page-content .clientbox .list_item .pic {
    border: 1px solid #ddd;
}
body.home .page-content .clientbox .list_item .info{
    display:none;
}




body.home .page-content .btlink p {
    font-size: 30px;
    margin-bottom: 0;
}
body.home .page-content .btlink .more {
    background: #ff9400;
    padding: 0 20px;
    line-height: 3.2;
    border-radius: 20px;
    width: 220px;
}
body.home .page-content .btlink .more:hover {
    animation: pulsate-fwd 1.5s ease-in-out infinite both;
}
.slick .slick-arrow, .slick.st .slick-arrow {
    width: 50px;
    height: 50px;
    background: url(../images/slick-arrow.svg) no-repeat top -8px center;
}
.slick .slick-next, .slick.st .slick-arrow.slick-next{
    right: -56px;
}

.slick.st .slick-arrow.slick-next{
    right: 0;
}
.slick .slick-arrow.slick-prev, .slick.st .slick-arrow.slick-prev {
    left: -56px;
    background-position: top -508px center;
}
.slick.st .slick-arrow.slick-prev{
    left: 0;
}

/*內頁共用*/
body.product .main, body.product.show .mainSection, body.contact .main, body.about .mainSection, body.news .mainSection {
    padding: 60px 0;
    background: url(../images/bg2.jpg) left bottom repeat;
}
body.product.show .mainSection .pt-md-5.pt-3 {
    padding-top: 0 !important;
}
body.about .kind-info .h2, body.news .subject-sec h1 {
    color: var(--main-color);
    text-align: left;
    font-size: 30px;
    /* margin-bottom: 17px; */
    background: url(../images/h2.png) left bottom -1px no-repeat;
    /* min-height: 97px; */
    padding-left: 94px;
    padding-top: 20px;
    border-bottom: 4px double #ddd;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding: 20px 0 10px 95px;
}
/*訊息*/
.article-grid.ar-img .item .info {
    padding: 10px;
    background: #fff;
    border: none;
}
body.news .page-content  .article-grid.ar-img article .info .kind {
    left: 0;
    top: 0;
}
body.news .page-content .article-grid.ar-img article .info .kind a {
    margin: 0;
    font-size: 15px;
    padding: 6px 10px;
    background: #60bfc4ed;
}

/*商品*/
body.product .gallery-list .item p.price, body.news .gallery-list.border-solid .item .item-detail p.price {
    margin-top: 0;
    margin-bottom: 0;
}
body.product .gallery-list.border-solid .item .item-detail .info .title,
body.news .gallery-list.border-solid .item .item-detail .title  {
    margin: 6px 0 !important;
    font-size: 20px;
    color: #333;
}
body.product .gallery-list.border-solid .item .item-detail .btn-box,
body.news .gallery-list.border-solid .item .item-detail .btn-box {
    margin-bottom: 0 !important;
    padding-bottom: 16px;
}


body.product .gallery-list .item .pic a div {
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}

body.product .gallery-list .item .pic a {
    display: block;
    position: relative;
    overflow: hidden;
}

body.product .gallery-list .item .pic a::after {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url(../images/producthover2.png) center no-repeat #4eafb4ca;
    background-size: 34%;
    opacity: 0;
}
body.product .gallery-list .item:hover .pic a::after {

    opacity: 1;
}
body.product .gallery-list .item .item-detail {
    margin-bottom: 50px;
}
body.product.has_favorite .mainSection .gallery-list .item .info,
body.product.has_favorite .mainSection .gallery-list .item .info .title, body.product .gallery-list .item {
    margin: 0 !important;
}

body.product.show .mainSection .h5 {
    margin-bottom: 10px;
}
body.product.show .main {
    padding: 0;
    background: none;
}
body.product.show .mainSection .ezshare-box {
    margin-top: 22px;
    margin-bottom: 12px;
}
/*聯絡我們*/

body.contact .text-center{
    margin-top:30px;
}
/*side*/
.side .nav-item:not(.nav-title).dropdown > .navbar-nav .nav-item:not(.nav-title) .nav-link {
    color: #333;
    font-size: 16px;
    padding-left: 18px;
    background: url(../images/list_icon.png) left 0px top 5px no-repeat;
    white-space: break-spaces;
}
.side .nav-item:not(.nav-title).dropdown > .navbar-nav .nav-item:not(.nav-title):hover .nav-link {
    color: var(--main-color);
}
.side .navbar, .side .bsnav, .side .navbar-nav .dropdown-menu {
    background: none;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-8-15 11:36:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}



@keyframes move_in_out {
    0% {
        width: 0%;
        left: 0%;
    }

    50% {
        width: 100%;
        left: 0%;
    }

    100% {
        width: 0%;
        left: 100%;
    }
}


@-webkit-keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}