@charset "utf-8";
/* CSS Document */
:root {
    --main-color: #8f79b7;
    --second-color: #412234;
    --third-color: #f1ecfd;
    --forth-color: #e4dafb;
    --fifth-color: #caa200;
    --sixth-color: #E1B400;
    --bg_color: #252525;
}

body {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    font-family: 'DM Serif Display', 'Noto Serif TC',"微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
}

p {
    line-height: 30px;
    margin-bottom: 30px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.wrapfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

a {
    color: #666;
    transition: all .5s;
}

    a:hover {
        color: var(--main-color);
    }

.btn-primary {
    background: var(--second-color);
    color: #fff;
    text-align: center;
    border: none;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        background: var(--main-color);
    }

.btn-default {
    border: 1px solid #DFDFDF;
    color: #888;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active {
        background-color: var(--main-color);
        color: #fff;
    }


/** loading **/
.loadingbar {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .loadingbar div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid var(--third-color);
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: var(--third-color) transparent transparent transparent;
    }

        .loadingbar div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .loadingbar div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .loadingbar div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* 防止float溢出 */
.content .txt:after,
.content .list-box .txt-list li:after,
body.news .content > .h3:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#floating {
    display: none;
}

    #floating .btn-floating {
        background-color: var(--third-color);
        display: block;
        width: 28px;
        height: 58px;
        position: absolute;
        left: -30px;
        margin: 1px;
        padding: 10px 3px;
        display: none;
    }

        #floating .btn-floating .icon-arrow {
            background: url(../images/all/arrow.png) no-repeat;
            display: block;
            width: 32px;
            height: 40px;
        }

    #floating.open .btn-floating .icon-arrow {
        background-position: 0 -40px;
    }

    #floating ul {
        background: #fff;
        background: rgba(255, 255, 255, 0.9);
        margin: 0;
    }

        #floating ul li {
            padding: 5px 0;
        }

            #floating ul li + li {
                border-top: 1px solid #E7E7E7;
            }

            #floating ul li a {
                width: 60px;
                font-size: 10px;
                color: #bbb;
                text-align: center;
                display: block;
                position: relative;
            }

                #floating ul li a:hover {
                    color: #333;
                }

                #floating ul li a .icon {
                    font-size: 30px;
                    display: block;
                    margin: 0 auto 2px;
                }

                #floating ul li a:hover .icon {
                    color: var(--third-color);
                }

                #floating ul li a .num {
                    min-width: 16px;
                    height: 16px;
                    background-color: #EB0F0F;
                    font-size: 12px;
                    color: #fff;
                    display: block;
                    border-radius: 16px;
                    line-height: 16px;
                    position: absolute;
                    right: 8px;
                    top: 0;
                }

                #floating ul li a .txt-en {
                    display: none;
                }

.jcarousel-wrapper {
    position: relative;
}

body:not(.album) .jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

    .jcarousel li a {
        display: block;
    }

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: auto;
}

.pic a {
    display: block;
}

/********************* Header *********************/
.header {
    z-index: 30;
}

    .header .navbar {
        z-index: 20;
        border-top: 10px solid var(--forth-color);
        background: #fff;
        border-radius: 0;
    }

        .header .navbar .container-fluid {
            padding: 0;
        }

        .header .navbar .navbar-brand {
            background: url(../images/all/logo.svg) no-repeat;
            display: block;
            height: 75px;
            padding: 0;
            text-indent: -9999px;
            width: 135px;
            background-size: contain;
            margin: 20px auto;
            float: none;
            transition: all .5s;
        }

            .header .navbar .navbar-brand:hover {
                opacity: 0.7;
            }

        .header .navbar .navbar-nav {
            float: none;
            background: none;
        }

            .header .navbar .navbar-nav > li > a {
                color: var(--second-color);
                font-size: 20px;
                font-weight: bold;
                background-color: inherit;
                -webkit-transition: 0.5s all ease;
                -moz-transition: 0.5s all ease;
                -o-transition: 0.5s all ease;
                transition: 0.5s all ease;
            }

                .header .navbar .navbar-nav > li > a .title-sub {
                    color: #b8b8b8;
                    font-weight: normal;
                    margin-left: 5px;
                }

            .header .navbar .navbar-nav li a:hover,
            .header .navbar .navbar-nav li.b > a {
                color: var(--main-color);
                background: none;
            }

            .header .navbar .navbar-nav li + li a {
                /*border-left: 1px solid #eee;*/
            }

                .header .navbar .navbar-nav li + li a .caret {
                    display: none;
                }

            .header .navbar .navbar-nav li a .txt-en {
                margin-left: 5px;
                color: #ccc;
                font-weight: normal;
                float: right;
            }

            .header .navbar .navbar-nav li a:focus {
                background-color: transparent;
            }

            .header .navbar .navbar-nav li a:hover .txt-en,
            body.about .header .navbar .navbar-nav li.b1 a .txt-en,
            body.product .header .navbar .navbar-nav li.b2 a .txt-en,
            body.news .header .navbar .navbar-nav li.b3 a .txt-en,
            body.contact .header .navbar .navbar-nav li.b4 a .txt-ens {
                color: #999;
            }

        .header .navbar .sub-nav {
            /*position: absolute;
    right: 15px;
    top: 20px;*/
        }

            .header .navbar .sub-nav li {
                padding: 0;
            }

                .header .navbar .sub-nav li a {
                    background-color: var(--third-color);
                    background-position: center center;
                    background-repeat: no-repeat;
                    width: 32px;
                    height: 32px;
                    text-indent: -9999px;
                }


                .header .navbar .sub-nav li.icon_f a {
                    background-image: url(../images/all/icon_f.png);
                }

                .header .navbar .sub-nav li.icon_i a {
                    background-image: url(../images/all/icon_i.png);
                }

                .header .navbar .sub-nav li.icon_t a {
                    background-image: url(../images/all/icon_t.png);
                }

                .header .navbar .sub-nav li.icon_y a {
                    background-image: url(../images/all/icon_y.png);
                }

                .header .navbar .sub-nav li.icon_p a {
                    background-image: url(../images/all/icon_p.png);
                }

                .header .navbar .sub-nav li.icon_l a {
                    background-image: url(../images/all/icon_l.png);
                }

                .header .navbar .sub-nav li a:hover {
                    position: relative;
                    top: 2px;
                }

                .header .navbar .sub-nav li.b1 {
                    display: none;
                }

                .header .navbar .sub-nav li.b2 a {
                    background-position: 0 0;
                }


        .header .navbar .btn-default {
            background: var(--third-color);
            color: #fff;
            border: none;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            padding: 7px;
        }

        .header .navbar .lang {
            margin-right: 10px;
            /*position: absolute;
    right: 54px;
    top: 20px;*/
        }

            .header .navbar .lang .dropdown-menu {
                background: var(--third-color);
                color: #fff;
                border: none;
                min-width: 110px;
                -moz-border-radius: 0;
                -webkit-border-radius: 0;
                border-radius: 0;
            }

                .header .navbar .lang .dropdown-menu a {
                    color: #fff;
                }

                    .header .navbar .lang .dropdown-menu a:hover {
                        background: none;
                        color: #FCE617;
                    }

    .header .nav_btn_group {
        position: absolute;
        right: 0;
        top: 20px;
    }

    .header .navbar .lang, .header .navbar .sub-nav {
        display: inline-block;
        vertical-align: top;
    }

    .header .navbar-header {
        float: none;
    }

    .header .g-nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .header .g-nav .sbtn-list {
            margin: 0;
        }

            .header .g-nav .sbtn-list a {
                background: #f1ecfd;
                border-radius: 50%;
                width: 33px;
                height: 33px;
                color: #000;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
                position: relative;
            }

                .header .g-nav .sbtn-list a .num {
                    position: absolute;
                    top: -5px;
                    right: -5px;
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    background: var(--second-color);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 13px;
                }

#collapseSearch, #collapseSearch.collapsing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s,height 0s;
    height: 100vh !important;
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
}

    #collapseSearch.in {
        opacity: 1;
        visibility: visible;
    }

    #collapseSearch .d-searchBox {
        width: 60%;
        margin: auto;
        padding-bottom: 10px;
        display: flex;
        border-bottom: 1px solid #fff;
    }

        #collapseSearch .d-searchBox .form-control {
            border: none;
            background: none;
            height: auto;
            color: #fff;
        }

        #collapseSearch .d-searchBox .input-group {
            background: #fff;
            padding: 10px;
            border-radius: 5px;
        }


        #collapseSearch .d-searchBox a {
            background: #f1ecfd;
            color: #000;
            border-radius: 5px;
            padding: 10px 30px;
            font-size: 18px;
            margin-left: 10px;
            flex-shrink: 0;
            transition: all .5s;
        }

            #collapseSearch .d-searchBox a i {
                margin-left: 10px;
            }

            #collapseSearch .d-searchBox a:hover {
                background: var(--second-color);
                color: #fff;
            }


    #collapseSearch .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
        padding: 0;
        opacity: 1;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 30px;
    }

body.is_scroll .g-header {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
}

body.is_scroll .navbar {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

body.is_scroll .header .navbar .navbar-brand {
    height: 53px;
    width: 96px;
}

/*----------------------- Banner -----------------------*/
.banner .bannerImgBox {
    visibility: hidden;
}

    .banner .bannerImgBox.slick-initialized,
    .banner .bannerImgBox.oneMode {
        visibility: visible;
    }

html.no-js .banner .bxslider,
html.no-js .banner .bxslider img {
    display: none;
}

html.js .banner .bxslider {
    display: block;
}


.banner {
    position: relative;
}

    .banner .loadingbar {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

body.VIDEOLOADED .banner .loadingbar {
    display: none;
}

.banner .container-fluid {
    padding: 0;
}

.banner .video_banner {
    width: 100%;
}

.banner .bxslider .bannerImgBox:not(.banner_mob_bg) .item {
    width: 100%;
    background: none !important;
}

.banner .bxslider .bannerImgBox.banner_mob_bg .item {
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
}

body.home .banner .bxslider .bannerImgBox.banner_mob_bg .item {
    height: 500px;
}

.banner .video_sec {
    width: 100%;
}

.banner .bxslider .item img {
    width: 100%;
    display: none;
}


.banner .bxslider .bannerImgBox:not(.banner_mob_bg) .item img.img_small {
    display: none;
}

.banner .bxslider .bannerImgBox:not(.banner_mob_bg) .item img.img_big {
    display: block;
}

.banner .slick-prev:before, .banner .slick-next:before {
    color: #1eb5be;
}

.banner .bx-wrapper {
    margin-bottom: 0;
}

    .banner .bx-wrapper .bx-viewport {
        left: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .banner .bx-wrapper .bx-pager.bx-default-pager {
        bottom: 2px;
        text-align: right;
        padding: 0 15px;
    }

        .banner .bx-wrapper .bx-pager.bx-default-pager a {
            text-align: left;
            background: #404040;
        }

            .banner .bx-wrapper .bx-pager.bx-default-pager a.active {
                background: #1EB5BE;
            }

    .banner .bx-wrapper .bx-controls-direction {
        display: none;
    }

body.full .banner .container {
    margin: 0;
    max-width: 100%;
    width: 100%;
}

body.full .banner .bx-wrapper .bx-controls-direction a.bx-prev {
    left: 0;
}

body.full .banner .bx-wrapper .bx-controls-direction a.bx-next {
    right: 0;
}


.header_ex {
}


/********************* Footer *********************/
.footer {
    padding: 50px 0;
    background: var(--main-color);
    color: #fff;
    font-size: 1.8rem;
}

    .footer .d-footerEnd {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
    }

    .footer a {
        color: #fff;
    }

    .footer .g-footer .l-info {
        display: flex;
    }

    .footer .pic-logo {
        width: 190px;
        margin-right: 40px;
    }

    .footer .siteinfo .tt {
        font-size: 25px;
        margin-bottom: 20px;
    }

.footer_top ul li {
    padding: 0;
}

    .footer_top ul li:nth-child(2n) {
        display: none;
    }

.footer li a:hover {
    background: none;
}

.footer_top ul li,
.footer_top ul li a {
    color: #888;
    padding: 10px;
}

    .footer_top ul li a:hover {
        color: var(--third-color);
    }

    .footer_top ul li a .txt-en {
        display: none;
    }

.footer_content {
}

.footer .copyright b {
}

.footer .copyright,
.footer .siteinfo {
    display: inline-block;
    margin: 0 5px;
}

.footer .sitemap li a .txt-en {
    display: none;
}

.footer .siteinfo ul {
    display: inline-block;
}

    .footer .siteinfo ul > li {
        padding: 0;
        display: flex;
        margin-bottom: 10px;
    }

        .footer .siteinfo ul > li a {
            padding: 0;
        }

        .footer .siteinfo ul > li .icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.50);
            color: var(--second-color);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .footer .siteinfo ul > li label {
            margin: 0 5px 0 0;
            color: #888;
        }

.footer h2.h2 {
    margin: 0 0 20px 0;
    font-size: 25px;
}

.footer .g-footer {
    justify-content: space-between;
}

.footer .sitemap {
    display: flex;
    flex-wrap: wrap;
}

    .footer .sitemap .h2 {
        border-right: 1px solid #fff;
        margin-right: 20px;
        padding-right: 20px;
        margin-bottom: 0;
    }

    .footer .sitemap a {
        display: flex;
        align-items: center;
    }

    .footer .sitemap ul {
        display: flex;
        max-width: 22em;
        flex-wrap: wrap;
        margin: 0;
    }

    .footer .sitemap li {
        width: calc(100% / 3);
        padding-right: 10px;
        margin-bottom: 10px;
    }

        .footer .sitemap li a:before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px 0 0;
            background: #fff;
        }

.footer .powered,
.footer .powered a {
    color: #AAA;
}

.footer address {
    margin: 0;
}
/********************* cookie *********************/
body.cookie_agree .footer_content {
    padding-bottom: 80px;
}

.cookie {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: rgb(54, 185, 192);
    z-index: 100;
    border-top: 1px solid rgb(215, 215, 215);
    color: #fff;
    text-align: left;
}

    .cookie .txt {
    }

        .cookie .txt a {
            text-decoration: underline;
            color: #3c3c3c;
            font-size: 14px;
        }

    .cookie .agree-btn {
        padding: 5px 15px;
        display: inline-block;
        background: #fff;
        color: #333;
        margin-top: 3px;
        transition: all .3s ease;
    }

        .cookie .agree-btn:hover {
            background: #ccc;
        }

/********************* Main *********************/
.main {
    z-index: 20;
}

.side .h3 {
    color: var(--main-color);
    line-height: 28px;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 20px;
}

    .side .h3 + .nav {
        border-left: 1px solid #ccc;
        padding-left: 15px;
    }

    .side .h3 .txt-en,
    .side .h3 .txt-tw {
        display: block;
    }

    .side .h3 .txt-en {
        font-size: min(max(3.5vw, 25px), 30px);
        margin-bottom: 5px;
    }

    .side .h3 .txt-tw {
        color: #000;
    }


.side .nav > li > a {
    display: block;
    line-height: 20px;
    color: #333;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
    color: #000
}

.side .nav > li a {
    padding: 5px 0;
    display: block;
    color: #000;
    font-weight: 500;
}

    .side .nav > li a:hover,
    .side .nav > li a:focus,
    .side .nav > li.active a {
        color: var(--main-color);
        background: none;
    }

.side .nav > li > ul {
    list-style-type: none;
}

    .side .nav > li > ul.removeBefore {
        margin: 0;
    }

    .side .nav > li > ul > li > a:before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--second-color);
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }

    .side .nav > li > ul > li > a {
        color: #888;
        position: relative;
        padding-left: 15px;
    }

    .side .nav > li > ul > li > ul {
        list-style-type: none;
        margin-left: 15px;
    }

        .side .nav > li > ul > li > ul > li {
        }

            .side .nav > li > ul > li > ul > li > a,
            .side .nav > li > ul > li > ul > li > a:hover {
                padding: 5px 0;
                color: #9b9b9b;
            }

                .side .nav > li > ul > li > ul > li > a:before {
                    content: "arrow_right";
                    font-family: 'Material Symbols Outlined';
                    font-weight: normal;
                    font-style: normal;
                    font-size: 24px;
                    line-height: 1;
                    letter-spacing: normal;
                    text-transform: none;
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    -webkit-font-feature-settings: 'liga';
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: -7px;
                }
/*----------------------- Content -----------------------*/
.main_content {
    min-height: 300px;
    padding: 0 0 50px;
}

body:not(.home) .main_top {
    display: flex;
    flex-direction: column-reverse;
    padding: 30px 0 50px;
}

body.home .main_content {
    min-height: 0;
    padding: 0;
}

.breadcrumb {
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

    .breadcrumb li a {
        color: #888;
    }

    .breadcrumb > li + li:before {
        content: "/";
    }

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

.main_top > .h2,
.main_top > .h1,
.main_top .h2.t04 {
    color: var(--second-color);
    font-size: min(max(3.5vw, 30px), 35px);
    margin-bottom: 30px;
    text-align: center;
    margin-top: 5px;
    display: table;
    margin: 15px auto;
    position: relative;
    font-weight: bold;
    letter-spacing: 2px;
}

    /*.main_top > .h2 .txt-en:after,
    .main_top > .h1 .txt-en:after,
    .main_top .h2.t04 .txt-en:after {
        content: "";
        background: url(../images/all/icon_flower.svg);
        width: 20px;
        height: 20px;
        background-size: contain;
        display: block;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 10px;
    }
    .main_top > .h2 .txt-en:before,
    .main_top > .h1 .txt-en:before,
    .main_top .h2.t04 .txt-en:before {
        content: "";
        background: url(../images/all/icon_flower.svg);
        width: 20px;
        height: 20px;
        background-size: contain;
        display: block;
        position: absolute;
        right: 100%;
        top: 50%;
        transform: scaleX(-1);
        margin: 0 10px;
    }*/
    .main_top > .h2:after,
    .main_top > .h1:after,
    .main_top .h2.t04:after {
        content: "";
        display: block;
        width: 2em;
        background: var(--second-color);
        margin: 10px auto;
        height: 2px;
        display: none;
    }
    /*.main_top > .h2:before,
    .main_top > .h1:before,
    .main_top .h2.t04:before {
        content: "";
        width: 3em;
        height: 1px;
        background: #ccc;
        position: absolute;
        bottom: 14px;
        left: 0;
        right: 0;
        margin: auto;
    }*/
    .main_top > .h2 .txt-en, .main_top > .h1 .txt-en {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #888;
        margin-bottom: 10px;
        justify-content: center;
        font-weight: normal;
    }


.content .content-banner {
    margin-bottom: 20px;
}

.content .txt {
    padding: 10px;
    line-height: 30px;
}



.content .btn-normal {
    background: none;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

    .content .btn-normal:hover {
        color: #888;
        border-color: #aaa;
    }

.news-list li a {
    padding: 15px 0;
}

.news-list li {
    border-bottom: 1px solid #ccc;
}




.content .list-box .txt-list li .h4 {
    margin: 0;
}

.content .list-box .txt-list li a {
    position: relative;
    display: block;
}


    .content .list-box .txt-list li a:hover,
    .content .list-box .txt-list li a:focus {
        color: var(--main-color);
    }


.content .list-box .txt-list li.list-header {
    background: none;
}

    .content .list-box .txt-list li.list-header a,
    .content .list-box .txt-list li.list-header a span {
        color: var(--third-color);
        font-size: 18px;
    }

        .content .list-box .txt-list li.list-header a span {
            padding-right: 24px;
        }

.content .works-box .pic-carousel li a {
    border: 1px solid var(--main-color);
    padding: 2px;
    display: block;
}

    .content .works-box .pic-carousel li a:hover {
        border-color: var(--third-color);
    }

.content .works-box .bx-wrapper .bx-controls-direction a {
    width: 24px;
    height: 40px;
    background: url(../images/home/arrow.png) no-repeat;
}

    .content .works-box .bx-wrapper .bx-controls-direction a.bx-prev {
        left: -24px;
    }

    .content .works-box .bx-wrapper .bx-controls-direction a.bx-next {
        right: -24px;
        background-position: 0 -40px;
    }

.content .works-box .slick .list_item {
    padding: 0 5px;
}

    .content .works-box .slick .list_item .pic {
        border: 1px solid var(--main-color);
        padding: 2px;
        display: block;
    }

    .content .works-box .slick .list_item:hover .pic {
        border-color: var(--third-color);
    }

    .content .works-box .slick .list_item .info {
        text-align: center;
        display: none;
    }

        .content .works-box .slick .list_item .info p {
            margin: 0;
        }

.content .works-box .slick .slick-arrow {
    width: 24px;
    height: 40px;
    background: url(../images/home/arrow.png) no-repeat;
    border: none;
    outline: none;
    text-indent: -9999px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 40px/2);
}

.content .works-box .slick .slick-prev {
    background-position: 0 0;
    left: -24px;
}

.content .works-box .slick .slick-next {
    background-position: 0 -40px;
    right: -24px;
}

.content .works-box .slick .slick-dots{
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 20px;
}


    .content .works-box .slick .slick-dots li, .banner .slick-slider  .slick-dots li {
        display: inline-block;
    }

    .content .works-box .slick .slick-dots button, .banner .slick-slider  .slick-dots button {
        width: 10px;
        height: 10px;
        background: #c7c7c7;
        border-radius: 50%;
        border: none;
        outline: none; 
        text-indent: -9999px;
        margin: 0 3px;
    }

    .content .works-box .slick .slick-dots .slick-active button {
        background: var(--main-color);
    }
 .banner .slick-slider .slick-dots {
    margin-top: 20px;
    bottom: 15px;
    text-align: right;
    padding:15px;
}
 .banner .slick-slider .slick-dots li{
    width: auto;
    height: auto;
 }
 .banner .slick-slider  .slick-dots  button{
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
} .banner .slick-slider  .slick-dots .slick-active button{
    background: #8f79b7;
}

 .banner .slick-slider .slick-dots button:before {
    display: none;
}
.content .contact-box ul li {
    color: #717171;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.8;
}

    .content .contact-box ul li.tel {
        font-size: 22px;
        color: #333;
        font-weight: bold;
    }

.content .sec {
    padding: 10px;
    line-height: 30px;
}

.content .btn-box {
    margin: 40px 0 20px;
    clear: both;
}

    .content .btn-box:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

    .content .btn-box .pager {
        text-align: left;
        display: inline-block;
        margin: 0 0 20px;
        float: left;
    }

        .content .btn-box .pager li {
            margin: 0 5px;
        }

            .content .btn-box .pager li > a {
                background: #fff;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                border: 1px solid #DFDFDF;
                color: #888;
                padding: 5px 20px;
                -webkit-transition: 0.3s all ease;
                -moz-transition: 0.3s all ease;
                -o-transition: 0.3s all ease;
                transition: 0.3s all ease;
            }

                .content .btn-box .pager li > a:hover {
                    background-color: var(--second-color);
                    color: #fff;
                }

                .content .btn-box .pager li > a .icon {
                    display: none;
                }

body.product.p02 .content .btn-box {
    border: none;
}

body.news.show .content .btn-box,
body.faq.ask .content .btn-box,
body.product.show .content .btn-box,
body.member .content .btn-box,
body.album.show .content .btn-box,
body.show .content .btn-box {
    text-align: center;
}

    body.news.show .content .btn-box .pager,
    body.faq.ask .content .btn-box .pager,
    body.product.show .content .btn-box .pager,
    body.member .content .btn-box .pager,
    body.album.show .content .btn-box .pager,
    body.show .content .btn-box .pager {
        float: none;
    }

.content .btn-box a .icon {
    background: url(../images/all/pager_icon.png) no-repeat;
    display: inline-block;
    vertical-align: text-bottom;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.content .btn-box a .icon-first {
    background-position: -6px -1px;
}

.content .btn-box a .icon-prev {
    background-position: -6px -29px;
}

.content .btn-box a .icon-next {
    background-position: -6px -58px;
}

.content .btn-box a .icon-last {
    background-position: -6px -87px;
}

.content .btn-box a .icon-back {
    background-position: -6px -112px;
}

.content .btn-box .page-info {
    float: right;
    margin: 0 5px;
    text-align: center;
    color: #888;
}

    .content .btn-box .page-info select {
        border: 1px solid #DFDFDF;
        min-width: 60px;
        margin-right: 10px;
    }


.content .btn-box a span {
    margin-right: 5px;
}

.content .table.table-stack {
    margin-bottom: 0;
}

    .content .table.table-stack > thead > tr > th {
        border-bottom: 2px solid var(--main-color);
        color: #333;
        text-align: center;
    }

    .content .table.table-stack > tbody > tr > td {
        vertical-align: middle;
        border-top: 1px dotted #ccc;
        text-align: center;
    }

        .content .table.table-stack > tbody > tr > td a {
            color: var(--second-color);
        }

            .content .table.table-stack > tbody > tr > td a:hover {
                text-decoration: underline;
            }

        .content .table.table-stack > tbody > tr > td.pic img {
            max-width: 100px;
        }

            .content .table.table-stack > tbody > tr > td.pic img:hover {
                opacity: 0.7;
            }

        .content .table.table-stack > tbody > tr > td.qty .input-group .form-control {
            padding: 6px;
            text-align: center;
            border-color: #DFDFDF;
        }

        .content .table.table-stack > tbody > tr > td .input-group {
            width: 100px;
            margin: 0 auto;
        }

        .content .table.table-stack > tbody > tr > td .btn {
            margin: 0;
            color: #888;
        }

            .content .table.table-stack > tbody > tr > td .btn:hover,
            .content .table.table-stack > tbody > tr > td .btn:focus,
            .content .table.table-stack > tbody > tr > td .btn:active {
                color: #fff;
                text-decoration: none;
            }

        .content .table.table-stack > tbody > tr > td .tn {
            display: none;
        }

    .content .table.table-stack.no-border th,
    .content .table.table-stack.no-border td {
        border: none;
    }

    .content .table.table-stack.no-border tr {
        border-bottom: 1px dotted #ccc;
    }

    .content .table.table-stack.no-border th {
        text-align: right;
        width: 120px;
    }

    .content .table.table-stack.no-border td {
        text-align: left;
        vertical-align: top;
    }

.content .form-horizontal .control-label {
    font-size: 14px;
}

.form-horizontal .row .form-inline {
    padding-bottom: 15px;
}

    .form-horizontal .row .form-inline .zip-code {
        width: 20%;
        min-width: 72px;
    }


.gotop a {
}

    .gotop a .icon {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid #fff;
        padding: 3px;
        display: inline-block;
        vertical-align: middle;
    }

    .gotop a:hover .icon img {
        animation: move-up-alternate 0.6s ease forwards;
        -webkit-filter: contrast(2);
    }

@-webkit-keyframes move-up-alternate {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-80%);
        opacity: 0;
    }

    51% {
        transform: translateY(80%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes move-up-alternate {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-80%);
        opacity: 0;
    }

    51% {
        transform: translateY(80%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.d-flex {
    display: flex;
}

.slick-style .slick-dots {
    position: relative;
    bottom: auto;
    margin: 20px auto;
}

.slick-style .slick-arrow, .slick-btn .slick-arrow {
    z-index: 20;
    width: 30px;
    height: 60px;
    background: none;
    background: url(../images/all/icon_arrow2.svg) no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

    .slick-style .slick-arrow.slick-prev, .slick-btn .slick-arrow.slick-prev {
        transform: scaleX(-1) translateY(-50%);
    }

.slick-style {
    padding: 0 40px;
    margin: 40px -40px 0;
}

.slick-btn .slick-arrow {
    position: relative;
    display: inline-block;
    top: auto;
    left: auto;
    right: auto;
    transform: translate(0, 0);
}

/*.slick-style .slick-arrow:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scale(0);
    transition: all .5s ease;
    z-index: -1;
}

.slick-style .slick-arrow:hover:after {
    transform: scale(1);
}*/

.slick-style .slick-arrow.slick-disabled {
    display: none !important;
}


.slick-style .slick-prev {
    left: 0;
}

.slick-style .slick-next {
    right: 0;
}


/*.slick-style .slick-prev:before, .slick-btn .slick-prev:before {
    content: "";
    background: url(../images/all/icon_arrow2.svg) no-repeat;
    width: 30px;
    height: 60px;
    opacity: 1;
    background-size: contain;
}



.slick-style .slick-next:before, .slick-btn .slick-next:before {
    content: "";
    background: url(../images/all/icon_arrow2.svg) no-repeat;
    width: 10px;
    height: 18px;
    opacity: 1;
    position: absolute;
    top: 50%;
    background-size: contain;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.slick-style .slick-prev:hover:before, .slick-btn .slick-prev:hover:before,
.slick-style .slick-next:hover:before, .slick-btn .slick-next:hover:before {
    background: url(../images/all/icon_arrow2.svg) no-repeat;
    background-size: contain;
}*/

/*----------------------------------------- 首頁 home --------------------------------------*/
body.home .main {
    background: url(../images/all/bg_wave.png) no-repeat left top;
    background-size: 60%;
}

body.home .main_content > .container {
    width: 100%;
    padding: 0;
}

.inner-box {
    padding-left: 240px;
    padding-right: 240px;
}

.sec-home {
    padding-top: 70px;
    padding-bottom: 70px;
    position: relative;
}

    .sec-home .h2 span {
        display: block;
    }

    .sec-home .h2 {
        margin-bottom: 30px;
        font-size: min(max(3.5vw, 30px), 55px);
        color: #000;
    }

        .sec-home .h2 span.txt-tw {
            font-size: min(max(3.5vw, 25px), 20px);
            font-weight: bold;
            opacity: .5;
        }

    .sec-home .btn-more {
        font-size: 20px;
        color: #000;
    }

        .sec-home .btn-more:after {
            content: "";
            background: url(../images/all/icon_arrow.svg) no-repeat var(--fifth-color) center center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            background-size: 10px;
            vertical-align: middle;
            margin-left: 10px;
        }

        .sec-home .btn-more span {
            position: relative;
            padding: 5px 0;
        }

            .sec-home .btn-more span:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #000;
                bottom: 0;
                left: 0;
                transform-origin: left;
                transform: scaleX(1);
                transition: transform .3s ease-in-out;
            }

        .sec-home .btn-more:hover span:after {
            transform-origin: right;
            transform: scaleX(0);
        }

.home-news .g-news .l-info {
    width: 40%;
    position: relative;
}

    .home-news .g-news .l-info .pic-flower {
        position: absolute;
        top: 100%;
        width: 60%;
        margin-top: -10%;
        opacity: .8;
    }

.home-news .g-news .r-info {
    width: 60%;
}

.home-pro {
    position: relative;
}

    .home-pro .bg-wave {
        position: absolute;
        top: -10%;
        left: 0;
        right: 0;
    }

    .home-pro .h2 {
        text-align: center;
    }

    .home-pro.sec-home .btn-more {
        margin: auto;
        display: table;
    }

    .home-pro .pro-list {
        position: relative;
        z-index: 5;
    }

        .home-pro .pro-list .list_item {
            margin: 0 15px;
        }

        .home-pro .pro-list:before {
            content: "";
            background: url(../images/all/bg_pro.png) no-repeat center center;
            background-size: 100% auto;
            position: absolute;
            top: 0;
            left: -20%;
            right: -20%;
            display: block;
            height: 85%;
        }

    .home-pro .pic-flower {
        position: absolute;
        top: -5%;
        right: -1%;
        width: 30%;
    }

        .home-pro .pic-flower img {
            transform: rotate(349deg);
        }

.pro-list .list_item .title {
    color: #595959;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.home-about .bg-wave {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.home-about .bg-waveB {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.home-about:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.home-about .bg-wave img, .home-about .bg-waveB img {
    object-fit: cover;
    height: 100%;
}

.home-about {
    background: url(../images/all/img_about.jpg) no-repeat center center;
    background-size: cover;
    padding-left: 100px;
    padding-right: 100px;
}

    .home-about .pic-flower {
        position: absolute;
        top: 20%;
        width: 30%;
        opacity: .8;
        max-width: 300px;
        left: 10%;
    }

    .home-about .r-info .txt .tt {
        font-size: min(max(3.5vw, 30px), 58px);
        color: #000;
        margin-bottom: 30px;
        line-height: 1;
        font-weight: 700;
    }

        .home-about .r-info .txt .tt span {
            color: var(--second-color);
        }

    .home-about .txt-slogan {
        position: relative;
        z-index: 5;
        font-size: min(max(3.5vw, 30px), 55px);
        color: var(--second-color);
        line-height: 1.2;
    }

    .home-about .g-about {
        position: relative;
        min-height: 600px;
        z-index: 5;
        justify-content: space-between;
    }

        .home-about .g-about .r-info {
            align-self: flex-end;
        }

            .home-about .g-about .r-info .txt {
                font-size: min(max(3.5vw, 25px), 30px);
            }

                .home-about .g-about .r-info .txt .tt, .home-about .g-about .r-info .txt p {
                    text-shadow: 0 0 15px #fff;
                }




            .home-about .g-about .r-info a {
                font-size: 25px;
                background: var(--fifth-color);
                color: #fff;
                width: 50%;
                display: block;
                text-align: center;
                padding: 15px;
                position: relative;
                z-index: 5;
            }

a.btn-style {
    background: var(--fifth-color);
    color: #fff;
    display: table;
    text-align: center;
    padding: 15px;
    position: relative;
    z-index: 5;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.home-about .g-about .r-info a:before, a.btn-style:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 100%;
    background: var(--second-color);
    z-index: -1;
    transition: all .5s;
    display: block;
}

.home-about .g-about .r-info a:hover:before, a.btn-style:hover:before {
    right: 0;
}

.tabs-style .nav-tabs {
    border-bottom: 2px solid #ccc;
    display: flex;
    margin-bottom: 20px;
}

.home-news .news-list li a {
    font-size: 18px;
    color: #000;
}

.home-news .news-list .date {
    display: block;
    color: #939393;
    font-size: 18px;
}

.tabs-style .nav-tabs li {
    width: 100%;
    margin: 0;
}

.tabs-style .nav-tabs > li > a {
    margin-right: 0;
    line-height: 1.42857143;
    border: none;
    border-radius: 0;
    text-align: center;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
}

    .tabs-style .nav-tabs > li > a:hover {
        background: none;
    }

.tabs-style .nav-tabs > li.active > a, .tabs-style .nav-tabs > li.active > a:hover, .tabs-style .nav-tabs > li.active > a:focus {
    color: var(--main-color);
    cursor: default;
    background: none;
    border: none;
    border-bottom-color: transparent;
}

.tabs-style .nav-tabs > li > a:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 0;
    background: var(--main-color);
    transition: all .5s;
}

.tabs-style .nav-tabs > li.active > a:after, .tabs-style .nav-tabs > li.active > a:hover:after, .tabs-style .nav-tabs > li.active > a:focus:after {
    height: 5px;
}









/*----------------------------------------- 相簿 album --------------------------------------*/
body.album .content > .h1 {
    text-align: center;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 10px;
}

.content .album-list a {
    margin: 20px 0;
    display: block;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .content .album-list a:hover {
        opacity: 0.7;
    }

    .content .album-list a img {
        width: 100%;
    }

    .content .album-list a .h4 {
        text-align: center;
        color: #666;
        font-size: 15px;
    }

    .content .album-list a .pic {
        border: 1px solid #e5e5e5;
        padding: 2px;
    }

.pic-gallery {
    margin-bottom: 40px;
    margin-top: 30px;
}

    .pic-gallery .pic-stage {
        margin: 0 auto 20px;
        width: 87%;
    }

        .pic-gallery .pic-stage ul li a {
            display: block;
        }

    .pic-gallery .pic-pager {
        position: relative;
        margin: 0 40px;
    }

        .pic-gallery .pic-pager .jcarousel div a {
            opacity: 0.5;
            float: left;
            padding: 0 5px;
        }

            .pic-gallery .pic-pager .jcarousel div a.active {
                opacity: 1;
            }

    .pic-gallery .pic-stage .bx-wrapper .bx-pager {
        display: none;
    }

    .pic-gallery .pic-stage .bx-wrapper .bx-controls-direction a,
    .pic-gallery .pic-pager .jcarousel-control,
    .pic-gallery .slick-prev,
    .pic-gallery .slick-next {
        background: url(../images/all/gallery_btn.png) no-repeat;
        display: block;
        width: 40px;
        height: 40px;
        margin-top: -10px;
        position: absolute;
        top: 50%;
    }

    .pic-gallery .pic-pager .jcarousel div {
        /*overflow: auto;
    width: 20000em;
    position: relative;
    list-style-type: none;*/
    }

        .pic-gallery .pic-pager .jcarousel div a img,
        .pic-gallery .pic-stage ul li a img {
            width: 100%;
        }

    .pic-gallery .pic-stage .bx-wrapper .bx-controls-direction a.bx-prev,
    .pic-gallery .slick-prev {
        background-position: 0 0;
        left: -45px;
    }

    .pic-gallery .pic-stage .bx-wrapper .bx-controls-direction a.bx-next,
    .pic-gallery .slick-next {
        background-position: -38px 0;
        right: -45px;
    }

    .pic-gallery .pic-pager .jcarousel-control-prev,
    .pic-gallery .pic-pager .slick-prev {
        background-position: -80px 0;
        left: -40px;
    }

    .pic-gallery .pic-pager .jcarousel-control-next,
    .pic-gallery .pic-pager .slick-next {
        background-position: -120px 0;
        right: -40px;
    }

    .pic-gallery .slick-prev:before,
    .pic-gallery .slick-next:before {
        display: none;
    }

    .pic-gallery .pic-pager .jcarousel div a.slick-current {
        opacity: 1;
    }


/*----------------------------------------- 活動訊息 news --------------------------------------*/
body.news .news-list li a {
    color: #000;
    padding-right: 40px;
}

    body.news .news-list li a:after {
        content: "trending_flat";
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #eee;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: all .5s;
    }





    body.news .news-list li a:hover:after {
        background: var(--main-color);
        color: #fff;
    }

body.news .news-list li span {
    display: block;
    color: #939393;
}

body.news .content > .h1 {
    position: relative;
    /* color: var(--main-color); */
    font-size: 25px;
    /* border: 1px solid var(--main-color); */
    /* padding: 10px 90px 10px 20px; */
    line-height: 1.4;
    border-top: 1px solid #ccc;
    margin-top: 0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.h1.border-around {
    border: 1px solid #6a5b54;
}

body.news .content > .h1 small {
    border: 1px solid var(--main-color);
    border-radius: 30px;
    padding: 5px 10px;
}


/*----------------------------------------- 常見問題 faq --------------------------------------*/

.faq-box {
    margin-bottom: 50px;
}

    .faq-box .st {
        color: var(--third-color);
        position: absolute;
        left: 15px;
        top: 13px;
        font-size: 16px;
    }

    .faq-box .panel {
        border: none;
        background: none;
    }

        .faq-box .panel + .panel {
            margin-top: 0;
        }

        .faq-box .panel > .panel-heading {
            background: none;
            border-bottom: 1px dotted #ccc;
            padding: 0;
            position: relative;
        }

            .faq-box .panel > .panel-heading a {
                padding: 15px;
                display: block;
                padding-left: 48px;
            }

            .faq-box .panel > .panel-heading + .panel-collapse > .panel-body {
                border-top: none;
                position: relative;
                padding-left: 48px;
                border-bottom: 1px dotted #ccc;
                color: #888;
                line-height: 30px;
            }

.btnbox-ask {
    text-align: right;
}

/*----------------------------------------- 作品展示 product --------------------------------------*/
.content .list-mode {
    text-align: center;
    color: #848275;
    display: none;
}

    .content .list-mode label {
        display: none;
    }

    .content .list-mode .btn-group {
        display: inline-block;
    }

        .content .list-mode .btn-group .btn-mode {
            color: #B6E5E9;
            background: none;
            border: none;
            padding: 5px 8px;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 22px;
        }

            .content .list-mode .btn-group .btn-mode.active {
                color: #4CC1CC;
            }

            .content .list-mode .btn-group .btn-mode:hover {
                color: #3C98A1;
            }

            .content .list-mode .btn-group .btn-mode .mode-txt {
                display: none;
            }

body.product .content .product-list .item {
    border: 1px solid #dcdcdc;
    margin: 10px 0;
    position: relative;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

body.product.p02 .content .product-list .item {
    margin-bottom: 60px;
}

body.product .content .product-list .item:hover {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-color: var(--main-color);
}

body.product .content .product-list.mode1 .item.i1 > a ul {
    height: 20px;
}

body.product .content .product-list.mode1 .item.i2 > a ul {
    height: 40px;
}

body.product .content .product-list.mode1 .item.i3 > a ul {
    height: 60px;
}

body.product .content .product-list.mode1 .item.i4 > a ul {
    height: 80px;
}

body.product .content .product-list .item > a {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

body.product .content .product-list a {
    display: block;
}

    body.product .content .product-list a .pic {
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        background: #fff;
        padding: 10px;
    }

        body.product .content .product-list a .pic img {
            -moz-border-radius: 5px 5px 0 0;
            -webkit-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
            width: 100%;
            -webkit-transition: 0.3s all ease;
            -moz-transition: 0.3s all ease;
            -o-transition: 0.3s all ease;
            transition: 0.3s all ease;
        }

    body.product .content .product-list a:hover .pic img {
        opacity: 0.7;
    }

    body.product .content .product-list a .info {
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
    }

    body.product .content .product-list a .h4 {
        text-align: center;
    }

body.product .content .product-list ul {
    list-style-type: none;
    margin-bottom: 0;
}

body.product .content .product-list .price {
    font-size: 30px;
    color: #ff5252;
}

body.product .content .quick-buy .form-control {
    padding: 5px;
    vertical-align: top;
    display: inline-block;
    width: auto;
}

body.product .content .quick-buy .btn {
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
    font-size: 20px;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


    body.product .content .quick-buy .btn:hover {
        background-color: var(--main-color);
        color: #fff;
    }

body.product .content .product-list.mode1 .quick-buy {
    padding: 15px;
}

    body.product .content .product-list.mode1 .quick-buy ul,
    body.product .content .product-list.mode1 .quick-buy ul li {
        display: inline-block;
        vertical-align: top;
    }

    body.product .content .product-list.mode1 .quick-buy .form-control.qty {
        width: 100%;
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

body.product.p02 .content .product-list.mode1 .item .info p {
    display: none;
}

body.product .content .product-list.mode2 > div {
    float: none;
    width: 100%;
    clear: both;
}

body.product .content .product-list.mode2 .item {
    position: relative;
    margin-bottom: 20px;
}

    body.product .content .product-list.mode2 .item:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

    body.product .content .product-list.mode2 .item .pic {
        width: 36%;
        display: inline-block;
        vertical-align: top;
        margin-right: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 0;
    }

    body.product .content .product-list.mode2 .item > a {
        padding: 10px;
        width: 70%;
        float: left;
    }

    body.product .content .product-list.mode2 .item .info {
        display: inline-block;
        vertical-align: top;
        width: 60%;
        text-align: left;
        padding-left: 10px;
    }

        body.product .content .product-list.mode2 .item .info .h4 {
            margin-bottom: 10px;
            text-align: left;
        }

        body.product .content .product-list.mode2 .item .info ul {
            text-align: left;
        }

            body.product .content .product-list.mode2 .item .info ul li {
            }

        body.product .content .product-list.mode2 .item .info p {
            margin: 5px 0 0;
            clear: both;
            color: #888;
            font-size: 14px;
            line-height: 1.4;
        }

    body.product .content .product-list.mode2 .item .quick-buy {
        width: 16%;
        float: left;
        padding: 20px 0 15px;
    }

        body.product .content .product-list.mode2 .item .quick-buy .form-control {
            width: 100%;
            display: inline-block;
            margin-bottom: 5px;
        }

        body.product .content .product-list.mode2 .item .quick-buy .btn {
            right: 10px;
            bottom: 50%;
            margin-right: 0;
            margin-bottom: -37px;
        }

body.product .content .content-banner {
    margin-top: 20px;
    border: 1px solid #635338;
    padding: 2px;
}

body.product .content .icon-addcart {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url(../images/all/icon_cart.png) no-repeat;
    vertical-align: text-bottom;
    background-size: 100% auto;
    margin-bottom: -6px;
}

body.product.show .content .quick-buy .btn.goshop {
    background: var(--fifth-color);
}

    body.product.show .content .quick-buy .btn.goshop:hover {
        background: var(--sixth-color);
        ;
    }

body.product .content .goshop .icon-addcart {
    background-image: url('../images/all/icon_cart2.png');
}

body.product.show .content .quick-buy .btn {
    padding: 3px 10px;
}

body.product.show .content .icon-addcart {
    margin-right: 5px;
}


body.product.show .info .info_box {
    background: #f3f3f3;
    margin-bottom: 10px;
}

    body.product.show .info .info_box .h6 {
        font-size: 15px;
        margin: 0;
        padding: 10px 10px;
        background: #dedede;
    }

    body.product.show .info .info_box .info_txt {
        padding: 10px;
    }



body.product.show .content .product-pic {
    margin-bottom: 10px;
}

    body.product.show .content .product-pic a {
        display: block;
    }

        body.product.show .content .product-pic a .img-zoom {
            width: 100%;
        }

    body.product.show .content .product-pic .zoomPad {
        float: none;
    }

    body.product.show .content .product-pic .zoomWindow {
        margin-left: 10px;
        left: 100% !important;
    }

body.product.show .content .jcarousel-wrapper {
    padding: 0 20px;
}

body.product.show .content .jcarousel-control-prev,
body.product.show .content .jcarousel-control-next {
    background: url(../images/all/icon_arrow2.svg) no-repeat;
    background-size: contain;
    top: 50%;
    width: 14px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    opacity: .5;
    transition: all .5s;
}

body.product.show .content .jcarousel-control-prev {
    left: 0;
    transform: scaleX(-1);
}

    body.product.show .content .jcarousel-control-prev:hover,
    body.product.show .content .jcarousel-control-next:hover {
        opacity: 1;
    }

body.product.show .content .jcarousel-control-next {
    right: 0;
}

body.product.show .content .jcarousel li a {
    padding: 2px;
    border: 1px solid #ccc;
}

body.product.show .content .jcarousel img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto !important;
}

/*-- for show2 product pic --*/
body.product.show .content .product-pic .big-pic a {
    cursor: zoom-in;
}

body.product.show .content .product-pic .small-pic {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

    body.product.show .content .product-pic .small-pic img {
        margin: 0 3px;
        outline: none;
        cursor: pointer;
    }

    body.product.show .content .product-pic .small-pic .slick-arrow {
        min-width: 20px;
        height: 40px;
        background: url(../images/home/arrow.png) no-repeat;
        border: none;
        outline: none;
    }

    body.product.show .content .product-pic .small-pic .slick-prev {
        background-position: center top;
    }

    body.product.show .content .product-pic .small-pic .slick-next {
        background-position: center bottom;
    }
/*-- END for show2 product pic --*/


body.product.show .content .info .h1 {
    margin-top: 0;
    font-size: min(max(3.5vw, 30px), 45px);
    color: var(--second-color);
}

body.product.show .content .info .txt {
    min-height: 200px;
    padding: 0;
}

body.product.show .pno {
    background: #eee;
    display: table;
    padding: 3px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
}

body.product.show .content .info .txt ul {
    margin-left: 0;
}

    body.product.show .content .info .txt ul li {
        background: url(../images/all/list_icon.png) no-repeat 0 center;
        padding-left: 22px;
    }

body.product.show .content .quick-buy {
    border-top: 1px solid #bdbdbd;
    padding-top: 10px;
    margin-bottom: 10px;
}

body.product.show .content > .h3, h2.t3 {
    font-size: 25px;
    padding: 10px;
    color: var(--second-color);
    display: flex;
    align-items: center;
}

    body.product.show .content > .h3:after, h2.t3:after {
        content: "";
        height: 1px;
        flex-grow: 1;
        background: var(--main-color);
        margin-left: 15px;
    }

    body.product.show .content > .h3 small {
        margin-left: 10px;
        color: #888;
        display: none;
    }

body.product.show .content .txt {
    padding: 10px;
}

body.product.show .content .shop_box {
    margin: 0 -5px;
    display: flex;
}

body.product.show .content .quick-buy .btn {
    width: 50%;
    margin: 0 5px;
    position: static;
    text-indent: 0;
    background-image: none;
    height: auto;
    line-height: 42px;
    font-size: 18px;
    border-radius: 5px;
    background: var(--second-color);
    color: #fff;
}

    body.product.show .content .quick-buy .btn:hover {
        background: var(--main-color);
    }

    body.product.show .content .quick-buy .btn i {
        margin-right: 10px;
    }

body.product .content .quick-buy .form-control {
    flex-grow: 1;
    text-align: center;
    height: auto;
    padding: 15px;
}

body.product.show .d-qty {
    margin-bottom: 15px;
}

    body.product.show .d-qty button {
        width: 50px;
        font-size: 25px;
    }

body.product.show .content .product-list .item {
    margin-bottom: 20px;
    /*height: 265px;*/
    overflow: hidden;
}

/*----------------------------------------- 會員專區 member --------------------------------------*/

body.member .content .nav-func li a {
    text-align: center;
    color: #888;
    border: 1px solid var(--main-color);
    padding: 20px 10px;
    width: 116px;
    margin-bottom: 15px;
}

    body.member .content .nav-func li a .glyphicon {
        font-size: 26px;
        margin-bottom: 15px;
        color: var(--third-color);
    }

    body.member .content .nav-func li a:hover {
        color: #aaa;
        border-color: #888;
    }

        body.member .content .nav-func li a:hover .glyphicon {
            color: #aaa;
        }

body.member.register .content .form-group .checkbox a {
    color: var(--main-color);
}

    body.member.register .content .form-group .checkbox a:hover {
        text-decoration: underline;
    }

body.member #membership {
    max-width: 700px;
    display: none;
}



body.member.register.finish .content .form-border {
    padding: 40px 50px;
}

body.member.forget .content .form-border {
    padding-top: 30px;
}


body.member .content {
    padding-bottom: 20px;
}

/*----------------------------------------- 訂單查詢 order --------------------------------------*/
body.order.show #msg-box {
    display: none;
    min-width: 300px;
}
/*----------------------------------------- 購物車 cart --------------------------------------*/
.content .sec .h3 {
    color: var(--main-color);
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--main-color);
    margin: 0 0 20px;
    position: relative;
}

body.cart.p03 .content .sec .h3,
body.cart.help .content .sec .h3 {
    padding: 10px;
    border: 1px solid var(--main-color);
}

body.cart.help .content .sec p {
    padding: 0 10px;
}

body.cart.help .content .sec ul {
    padding: 0 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.content .sec .h3 span {
    margin-right: 10px;
}

.content .sec .sum {
    text-align: right;
    padding-right: 20px;
    font-size: 16px;
    border-top: 1px solid #ccc;
    line-height: 36px;
    font-weight: bold;
}

body.cart .content p {
    font-size: 14px;
}

    body.cart .content p a {
        display: inline-block;
        color: var(--third-color);
    }

        body.cart .content p a:hover {
            color: #888;
        }

body.cart .content .btn-box {
    text-align: right;
    padding-left: 15px;
    padding-right: 15px;
}

body.cart .content .invoice-title {
    display: inline-block;
    margin-left: 5px;
}

body.cart .content .hint {
    float: right;
}

body.cart .content .btn-list {
    color: #000;
    display: inline-block;
    line-height: 24px;
    font-size: 13px;
    position: absolute;
    right: 5px;
    /* border: 1px solid var(--main-color); */
    padding: 0 5px;
    background: var(--forth-color);
}

    body.cart .content .btn-list:hover {
        color: #888;
        border-color: #ccc;
    }

    body.cart .content .btn-list span {
        margin-right: 10px;
    }

body.cart .content .invoice .btn-list {
    position: static;
    margin-top: 12px;
    float: right;
}

body.cart .content .invoice .form-inline:after {
    content: " ";
    clear: both;
    display: block;
}

body.cart .lightbox-list {
    min-width: 400px;
    display: none;
}

    body.cart .lightbox-list .h4 {
        font-size: 18px;
        padding: 0 5px;
    }

        body.cart .lightbox-list .h4 small {
            display: inline-block;
        }

    body.cart .lightbox-list .glyphicon {
        margin-right: 5px;
    }

    body.cart .lightbox-list ul li {
        border-top: 1px solid #62544C;
    }

        body.cart .lightbox-list ul li a {
            color: #666;
            padding: 10px;
            display: block;
        }

            body.cart .lightbox-list ul li a:hover {
                background-color: #eee;
            }


/*----------------------------------------- 聯絡我們 contact --------------------------------------*/
body.contact .map {
    background: var(--main-color);
}

    body.contact .map iframe {
        width: 100%;
        height: 200px;
        display: flex;
        mix-blend-mode: luminosity;
    }

    body.contact .map:hover iframe {
        mix-blend-mode: normal;
    }

body.contact .wd-tks h3 {
    font-size: min(max(3.5vw, 30px), 45px);
    margin-bottom: 20px;
}

body.contact .g-contact .l-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
}

body.contact .g-contact .r-info .form-horizontal .form-group {
    display: flex;
    flex-direction: column;
}

    body.contact .g-contact .r-info .form-horizontal .form-group > * {
        width: 100%;
        text-align: left;
    }

body.contact .content .contact-box ul li {
    padding-left: 10px;
}

body.contact .g-contact {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

    body.contact .g-contact > * {
        width: 45%;
    }

    body.contact .g-contact .pic-logo img {
        width: 150px;
        margin: 0 auto 20px;
    }

    body.contact .g-contact .d-form {
        background: var(--third-color);
        padding: 30px;
        border-radius: 10px;
    }

        body.contact .g-contact .d-form .form-control {
            height: 100%;
            border: none;
            box-shadow: none;
        }

    body.contact .g-contact .d-input {
        display: flex;
        margin: 0 -10px;
    }

        body.contact .g-contact .d-input > * {
            width: 100%;
            margin: 0 10px;
        }

    body.contact .g-contact .cominfo h3 {
        margin-bottom: 15px;
    }

    body.contact .g-contact .cominfo ul li {
        display: flex;
        align-items: center;
        padding: 10px;
        margin-bottom: 15px;
        border-left: 3px solid var(--main-color);
    }
/*----------------------------------------- widgets --------------------------------------*/
/* 預設共用 */
.wid {
    position: relative;
    z-index: 10;
    margin-bottom: 30px;
}

.side .wid .h3 .side-toggle {
    display: none;
}

.side .wid-search .w2 {
    background: #eee;
    border-radius: 30px;
    padding: 10px;
    display: flex;
}

.side .wid-search a {
    border-radius: 50%;
    color: #fff;
    background: var(--second-color);
    font-size: 16px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .side .wid-search a:hover {
        background: var(--main-color);
    }

.side .wid-search input {
    width: 100%;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.side1 .wid {
    max-width: 230px;
}

/* 搜尋產品 wid-searchBox */
.wid-searchBox .h3 {
    color: var(--main-color);
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
}

    .wid-searchBox .h3 .txt-tw {
    }

.wid-searchBox .form-group {
    width: 100%;
}

    .wid-searchBox .form-group .form-control {
        margin-bottom: 5px;
        width: 100%;
    }

.wid-searchBox .btn {
    width: 100%;
}

    .wid-searchBox .btn .txt-en {
        display: none;
    }

/* 商品推廌 wid-slideBanner */
.wid-slideBanner ul {
    list-style-type: none;
}

    .wid-slideBanner ul li a {
        display: block;
    }

        .wid-slideBanner ul li a img {
            width: 100%;
        }

.wid-slideBanner .jcarousel-control-prev,
.wid-slideBanner .jcarousel-control-next {
    position: absolute;
    display: block;
    width: 18px;
    height: 30px;
    background: url(../images/home/arrow.png) no-repeat;
    background-size: 100% auto;
    top: -39px;
}

.wid-slideBanner .jcarousel-control-prev {
    right: 16px;
}

.wid-slideBanner .jcarousel-control-next {
    right: 0;
    background-position: 0 -30px;
}

.form-group input[type=checkbox] + label {
    margin-right: 1em;
}



/*---------------------- 下拉選單 subNav  dropdownMenu --------------------*/
.navbar .navbar-nav .dropdown_submenu.pos_static {
    position: static;
}

.navbar-nav .dropdown_submenu > ul > li > ul > li {
    list-style: none;
}

    .navbar-nav .dropdown_submenu > ul > li > ul > li a {
        display: block;
    }

.navbar-nav .dropdown_submenu .dropdown-menu {
    left: 0;
    margin-top: -4px;
    background: #eee;
    border: none;
    min-width: 180px;
    border-radius: 0;
    padding: 0;
    right: 0;
}

    .navbar-nav .dropdown_submenu .dropdown-menu ul {
        border-radius: 0;
    }

.navbar-nav .open .dropdown-menu > li a, .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 10px 15px;
    position: relative;
}

.dropdown-menu > li + li {
    border-top: 1px solid #fff;
}

.dropdown-menu > li > a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--main-color);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.dropdown-menu > li > a:hover:before {
    transform-origin: left;
    transform: scaleX(1);
}

.navbar-nav .minwidth {
    min-width: 100px;
    padding: 0;
}



.navbar-nav .dropdown_submenu {
    position: relative;
}

li.hover_r_sider.dropdown_submenu {
    position: relative;
}


.navbar-nav .dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

@media (min-width: 768px) {
    .navbar-nav .dropdown_submenu > ul > li > ul > li {
        /* margin-left: 15px; */
    }

    .dropdown_submenu .dropdown_submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
}
/*------------------------subNav  dropdownMenu --------------------*/
body:not(.home) .main {
    background-image: url(../images/all/bg_wave.png), url(../images/all/bg_wave4.png);
    background-position: left top, right bottom;
    background-size: 40% auto, 50% auto;
}

h2.t2 {
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 1px solid;
    padding-bottom: 15px;
    font-weight: bold;
}

body.product.p02 .d-cart {
    justify-content: space-between;
    align-items: center;
}

    body.product.p02 .d-cart li s {
        color: #888;
    }


    body.product.p02 .d-cart > ul {
        display: flex !important;
        flex-direction: column;
    }

.d-qty {
    display: flex;
    background: #eee;
}

    .d-qty button {
        background: none;
        border: none;
        width: 30px;
        flex-shrink: 0;
    }

    .d-qty input {
        background: none;
        box-shadow: none;
        border: none;
        height: auto;
    }

.d-tip {
    background: var(--third-color);
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--main-color);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    margin-bottom: 30px;
}

    .d-tip b, body.product.show .price-sell {
        color: #ff5252;
    }

body.product.show .price-sell {
    font-size: 30px;
}

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.radio, .checkbox, .radio-inline, .checkbox-inline {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

.form-group input[type=checkbox] + label {
    margin-bottom: 0;
}

body.order.show .content .sec {
    margin-bottom: 50px;
}

body.order.show .g-sec {
    counter-reset: item;
    list-style-type: none;
}
body.order.show .g-sec .item+.item {
    margin-top: 5vw;
}

    body.order.show .g-sec .item h2:before {
        content: counter(item, decimal-leading-zero) " ";
        counter-increment: item;
        background: var(--main-color);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #fff;
        margin-right: 5px;
    }

body.member.login .d-txtLink {
    display: flex;
}

    body.member.login .d-txtLink a {
        text-decoration: underline;
        width: 25%;
    }

body.member.login .g-btn {
    display: flex;
    margin: 0 -5px;
}

    body.member.login .g-btn > * {
        width: 100%;
        margin: 0 5px;
    }

    body.member.login .g-btn a {
        text-align: center;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: normal;
    }

        body.member.login .g-btn a svg, body.member.login .g-btn a i {
            margin-right: 5px;
        }

    body.member.login .g-btn .btn-fb {
        background: #1677f1;
    }

    body.member.login .g-btn .btn-line {
        background: #06c052;
    }

.g-memberInfo .wd-welcome h3 {
    font-size: min(max(3.5vw, 30px), 45px);
    margin-bottom: 20px;
    margin-top: 0;
}

.g-memberInfo .wd-welcome p {
    font-size: 20px;
    font-weight: bold;
}

.g-memberInfo .t-info {
    display: flex;
    justify-content: space-between;
}

.g-memberInfo .btn-logout {
    background: var(--second-color);
    color: #fff;
    border-radius: 30px;
    padding: 15px 30px;
}

.g-memberInfo .btn-join {
    background: var(--third-color);
    color: var(--second-color);
    border-radius: 30px;
    padding: 15px 30px;
}

.g-memberInfo .t-info .g-btn a:hover {
    background: var(--main-color);
    color: #fff;
}

.g-memberInfo .b-info .btn-memberList a {
    border: 1px solid var(--main-color);
    font-size: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
}

    .g-memberInfo .b-info .btn-memberList a .icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--third-color);
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--second-color);
        font-size: 16px;
    }

    .g-memberInfo .b-info .btn-memberList a:hover {
        background: var(--main-color);
        color: #fff;
    }

.g-memberInfo .b-info .btn-memberList {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
}

    .g-memberInfo .b-info .btn-memberList li {
        width: calc(50% - 10px);
        margin: 0 5px 10px;
    }
/*about*/
body.about .main_content > .container {
    width: 100%;
    padding: 0;
}

.son-about.about01 .sec1 {
    position: relative;
}

    .son-about.about01 .sec1 .g-about .l-info {
        width: 55%;
    }

    .son-about.about01 .sec1 .bg-wave {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .son-about.about01 .sec1 .g-about {
        align-items: center;
        justify-content: space-between;
    }

        .son-about.about01 .sec1 .g-about .r-info {
            width: 40%;
        }

.son-about h2.slogan {
    line-height: normal;
    color: var(--main-color);
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 30px;
}

.son-about .tt {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 25px;
}

    .son-about .tt .txt-en {
        display: block;
        color: #ccc;
        ;
        font-weight: normal;
    }

.son-about.about01 .g-wd {
    display: flex;
}

.son-about.about01 {
    counter-reset: item;
    list-style-type: none;
}

    .son-about.about01 div[class*="sec"] .g-wd:before {
        content: counter(item, decimal-leading-zero) " ";
        counter-increment: item;
        color: var(--fifth-color);
        font-size: 79px;
        /* font-weight: bold; */
        line-height: 1;
        margin-right: 30px;
        font-style: italic;
    }

.son-about div[class*="sec"] {
    margin-bottom: 50px;
}

.son-about.about01 .sec2 .g-about02 {
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

    .son-about.about01 .sec2 .g-about02 .g-wd {
    }

.son-about.about01 .sec2 .bg {
    width: 40%;
    position: absolute;
    /* top: 50%; */
    left: 0;
    /* transform: translateY(-50%); */
    z-index: -1;
    bottom: 0;
}

.son-about.about01 .sec2 .g-about02 .r-info {
    width: 55%;
}

.son-about.about01 .sec2 .g-about02 .l-info {
    width: 45%;
}

    .son-about.about01 .sec2 .g-about02 .l-info .pic img {
        width: 60%;
        margin: 0 0 -10% auto;
    }

.son-about.about01 .sec2 {
    position: relative;
}

.content .txt {
    padding: 0;
}

.son-about.about01 .sec3 {
    position: relative;
    z-index: 5;
}

    .son-about.about01 .sec3 .g-wd {
        padding-right: 50px;
    }

.eZShareBar .shareList {
    justify-content: center;
    margin-bottom: 15px;
}

.eZShareBar .item {
    width: 25px !important;
    height: 25px !important;
    font-size: 18px !important;
    border-radius: 5px;
}

.son-about.about02 .sec2 {
    background: url(../images/about/bg_water.png) no-repeat center top;
    background-size: 1600px auto;
}

.m-auto img {
    margin: 0 auto !important;
}

.txt-alignC {
    text-align: center;
}

.mt-3 {
    margin-top: 30px;
}

.son-about.about02 .plan-list {
    justify-content: center;
    counter-reset: item;
    list-style-type: none;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

    .son-about.about02 .plan-list .item {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--fifth-color);
        border-bottom: none;
        padding: 15px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

        .son-about.about02 .plan-list .item ul {
            text-align: center;
        }

        .son-about.about02 .plan-list .item:before {
            content: counter(item, decimal-leading-zero) " ";
            counter-increment: item;
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--fifth-color);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 10px;
            top: 10px;
        }

        .son-about.about02 .plan-list .item:nth-child(even) {
            margin-top: 50px;
        }

        .son-about.about02 .plan-list .item .st {
            font-weight: bold;
            color: var(--fifth-color);
        }

.son-about.about02 .sec3 .g-tt {
    background: url(../images/about/img_about5.jpg) no-repeat center center;
    background-size: cover;
    align-items: center;
    padding: 70px 30px;
}

    .son-about.about02 .sec3 .g-tt .pic {
        margin-right: 30px;
    }

.son-about.about02 .dss-list {
    display: flex;
    margin-top: -50px;
    margin-bottom: 50px;
    padding: 0 30px;
}

    .son-about.about02 .dss-list .item {
        display: flex;
        width: calc(100% / 3 - 30px);
        background: #fff;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        margin: 0 15px;
        padding: 20px;
        border-radius: 10px;
    }

        .son-about.about02 .dss-list .item .st {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

            .son-about.about02 .dss-list .item .st:after {
                content: "";
                width: 2em;
                height: 1px;
                background: #ccc;
                display: block;
                margin: 10px 0;
            }

        .son-about.about02 .dss-list .item .icon {
            align-self: center;
            width: 120px;
            margin-right: 20px;
        }

.content .txt img.w-auto {
    width: auto;
}

.son-about.about02 .sec2 div[class*="pic"] {
    width: 20%;
    margin: auto;
    min-width: 250px;
}

.son-about.about03 .g-tt {
    position: relative;
}

    .son-about.about03 .g-tt .tt {
        width: 60%;
        margin: -2vw auto 50px;
        font-weight: normal;
        text-align: center;
        color: var(--fifth-color);
        position: relative;
        z-index: 5;
    }

    .son-about.about03 .g-tt .pic {
        position: relative;
    }

        .son-about.about03 .g-tt .pic:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            mix-blend-mode: soft-light;
        }

    .son-about.about03 .g-tt .pic-logo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10%;
        font-size: 34px;
        letter-spacing: 2px;
        line-height: 1.2em;
        display: none;
        width: 25%;
    }

.son-about.about03 .business-list {
    counter-reset: item;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}

    .son-about.about03 .business-list .item {
        display: flex;
        /* margin-bottom: 15px; */
        width: 50%;
        border-bottom: 1px solid #eee;
        padding: 15px;
    }

        .son-about.about03 .business-list .item:last-child {
            border-bottom: none;
        }

        .son-about.about03 .business-list .item:before {
            content: counter(item, decimal-leading-zero) " ";
            counter-increment: item;
            color: var(--fifth-color);
            /* font-weight: bold; */
            line-height: 1;
            margin-right: 10px;
            font-style: italic;
            border-bottom: 1px solid;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border-right: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

.son-about.about04 .g-tt .tt {
    text-align: left;
    padding: 0 50px;
}

    .son-about.about04 .g-tt .tt .txt-en {
        font-size: min(max(3.5vw, 40px), 50px);
        color: var(--second-color);
        line-height: 1.2em;
        /* margin-top: 50px; */
        margin-bottom: 20px;
    }

    .son-about.about04 .g-tt .tt .txt-tw {
        color: var(--main-color);
        font-size: min(max(3.5vw, 25px), 34px);
        line-height: 1.5em;
    }
    .son-about.about04 .g-tt .tt .txt-tw.twB {
        display: table;
        margin: 0 0 0 auto;
    }
.son-about.about04 .g-tt .l-info {
    width: 60%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 600px;
}

    .son-about.about04 .g-tt .l-info .pic {
        position: absolute;
        top: 0;
        left: 0;
        right: -10%;
        bottom: 35%;
        z-index: -1;
    }

        .son-about.about04 .g-tt .l-info .pic img {
            object-fit: cover;
            height: 100% !important;
            width: 100%;
        }

.son-about.about04 .g-tt .r-info {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .son-about.about04 .g-tt .r-info .st {
        font-size: 34px;
        margin-bottom: 70px;
        text-align: center;
    }

.son-about .history-list li {
    display: flex;
}

    .son-about .history-list li .year {
        font-size: 2rem;
        /* font-weight: bold; */
        color: var(--main-color);
        position: relative;
        align-self: center;
        flex-shrink: 0;
        margin-right: 35px;
        padding-right: 35px;
        width: 150px;
    }

        .son-about .history-list li .year b {
            font-size: 4rem;
            display: block;
            font-weight: normal;
        }

        .son-about .history-list li .year br {
            display: none;
        }

        .son-about .history-list li .year:after {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--second-color);
            display: inline-block;
            vertical-align: middle;
            box-shadow: 0 0 0 5px rgba(132,153, 177, 0.5);
            margin: 0;
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: -5px;
        }

    .son-about .history-list li .pic {
        max-width: 90px;
        margin-right: 30px;
    }

        .son-about .history-list li .pic img {
            margin: 0;
        }

    .son-about .history-list li .tt {
        text-align: left;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .son-about .history-list li .info {
        position: relative;
        display: flex;
        padding: 15px 0;
        align-items: center;
    }

        .son-about .history-list li .info p {
            margin-bottom: 0;
        }

        .son-about .history-list li .info:before {
            content: "";
            position: absolute;
            top: 0;
            left: -35px;
            bottom: 0;
            width: 1px;
            background: var(--second-color);
        }

    .son-about .history-list li:nth-child(1) .info:before {
        top: 50%;
    }

    .son-about .history-list li:last-child .info:before {
        background: rgb(65,34,52);
        background: linear-gradient(180deg, rgba(65,34,52,1) 0%, rgba(65,34,52,0) 100%);
    }

.dropdown-menu > li > a {
    font-size: 16px;
}


.side .nav > li > ul.dropdown-menu {
    position: relative;
    float: none;
    border: none;
    padding: 10px;
}

.side .g-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eee;
    padding: 0 10px;
}

    .side .g-btn:hover {
        background: var(--main-color);
        color: #fff;
    }

        .side .g-btn:hover > * {
            color: #fff !important;
            ;
        }

    .side .g-btn a {
        flex-grow: 1;
        background: none !important;
    }

    .side .g-btn.open + ul.dropdown-menu {
        display: block;
    }

    .side .g-btn .btn-dropdown {
        padding: 0 5px;
        cursor: pointer;
    }

.side .h3 + .nav > li {
    margin-bottom: 5px;
}

.mb-3 {
    margin-bottom: 30px;
}

.btn.disabled {
    height: auto;
    line-height: 42px;
    font-size: 18px;
    border-radius: 5px;
    padding: 3px 10px;
    background: var(--forth-color);
    color: #000;
    margin-bottom: 5px;
}

.home-pro .list_item img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.d-qty a {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.position-relative {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
    font-size: 1.2em;
    z-index: 2;
}

.form-control {
    padding-right: 30px;
}

.d_none {
    display: none;
}

table.tb-align-center tr th, table.tb-align-center tr td {
    vertical-align: middle;
}

table tr td .d-flex {
    align-items: center;
}

.sec-card a.btn-style {
    margin-top: 30px;
}

.btn-box .btn-list {
    display: flex;
    justify-self: center;
}

    .btn-box .btn-list a {
        padding: 6px 12px;
        border-radius: 4px;
        background: var(--main-color);
        color: #fff;
        min-width: 100px;
        text-align: center;
    }

        .btn-box .btn-list a.btn-light {
            background: var(--forth-color);
            color: #000;
        }

        .btn-box .btn-list a:hover {
            background: var(--second-color) !important;
            ;
            color: #fff !important;
        }

.fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: absolute;
    background: var(--forth-color);
    color: #fff;
    opacity: 1;
    transition: all .5s;
}

.fancybox-content {
    min-width: 400px;
    padding: 44px 44px 20px !important;
}

    .fancybox-content .btn-box {
        margin-top: 30px;
    }

.radio_label label {
    margin-right: 25px;
}