@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

@font-face {
    font-family: "Cataneo BT";
    src: url("../Cataneo BT 400.ttf");
}

@charset "utf-8";

/* 設計師用 桌機版CSS檔 style.css */


/* 說明：
    可提供設計師在此檔，針對桌機版面進行設計；為網站必載CSS檔。*/

body {
    font-size: 15px;
    color: #333;
    font-family: 'Open Sans', '微軟正黑體', sans-serif;
    position: relative;
}

::selection {
    background: #cacda4;
    color: #fff;
}

::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.65);
}

::-webkit-scrollbar-thumb {
    background-color: #cacda4;
}

body.fullmoon ::-webkit-scrollbar-thumb {
    background-color: #d86784;
}

p {
    line-height: 24px;
    margin-bottom: 0;
}

    p + p {
        margin-top: 1em;
    }

#popup {
    width: 50%;
    padding: 0;
}

.form-control {
    background: #f1f1f1;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.alignC {
    text-align: center;
}

    .alignC label input[type='checkbox'] {
        top: 3px;
    }

a {
    color: #000;
    transition: all .5s ease;
    text-decoration: none; /* ++ */
}

    a:hover {
        color: #98b06f;
    }

.red {
    color: #ff2d2d;
}
.red.vip-limited{
    background:#ff2d2d;
    border-radius: 5px;
    padding: 0 5px;
    color:#fff;
}
.pullB,
.sec {
    margin-bottom: 60px;
}

.pullBS {
    margin-bottom: 5px;
}

a.ani-pop:hover,
.header .navbar .sub-nav li a:hover img,
.gotop a:hover,
.close-fancybox:hover img,
table td a[class*="tb-btn"]:hover,
a.btn-search:hover,
.btn-social a:hover,
body.product.p02 .left-info .btn-area .btn-video:hover, .footer .social-list a:hover {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-origin: center center;
}

.d-flex {
    display: flex;
}

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


/********************* Header *********************/

.header {
}


    /* header logo */

    .header .navbar .navbar-brand {
        background: url(../images/all/logo2.svg) no-repeat;
        text-indent: -9999px;
        display: block;
        padding: 0;
        width: 180px;
        height: 50px;
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
        background-size: contain;
        transform: none;
        transition: all .5s ease;
    }

body.home .header .navbar .navbar-brand {
    background: url(../images/all/logo.svg) no-repeat;
    width: 116px;
    height: 91px;
    position: absolute;
    top: 50%;
    left: 0;
    /* margin-left: -15px; */
    transform: translate(0, -50%);
    background-size: contain;
}

.header .navbar .navbar-brand:hover {
}


/* header 主選單 */

.header .navbar {
    background: #cacda4;
    border-radius: 0;
    padding: 40px 15px;
    position: relative;
    z-index: 9999;
    right: 0;
    left: 0;
    width: 100% !important;
}

    .header .navbar .container {
        width: 100%;
        padding: 0;
    }

    .header .navbar .navbar-nav {
        background: none;
        margin-right: -25px;
        margin-top: 20px;
    }

        .header .navbar .navbar-nav > li {
            margin: 0 5px;
            position: relative;
        }

            .header .navbar .navbar-nav > li > a {
                background: none;
                color: #fff;
                padding: 3px 10px;
                font-size: 16px;
            }

        .header .navbar .navbar-nav li a:hover {
            color: #56704c;
        }

        /*.header .navbar .navbar-nav>li+li:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    display: block;
    position: absolute;
    bottom: 12%;*/
        /*    left: -2px;
    top: 50%;
    transform: translateY(-50%);*/

        /*}*/

        .header .navbar .navbar-nav > li ul li a {
            /*padding: 5px;*/
            padding: 5px;
            display: block;
        }


    /* header 次選單 */

    .header .navbar .sub-nav {
        display: flex;
        align-items: center;
        margin: 0;
    }

        .header .navbar .sub-nav li {
            padding: 0;
            margin: 0 5px;
            vertical-align: middle;
        }

            .header .navbar .sub-nav li:nth-child(3) {
                margin-left: 20px;
            }

            .header .navbar .sub-nav li a {
                color: #fff;
            }

            .header .navbar .sub-nav li.btn-cart a > span {
                position: relative;
                display: inline-block;
            }

            .header .navbar .sub-nav li.btn-cart a img {
                margin-right: 15px;
            }

            .header .navbar .sub-nav li a .num {
                width: 18px;
                height: 18px;
                position: absolute;
                background: #fff;
                color: #96a573;
                font-size: 13px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                top: -3px;
                left: 20px;
            }

            .header .navbar .sub-nav li.btn-social a {
                border-radius: 50%;
                border: 1px solid #fff;
                padding: 5px;
                width: 35px;
                height: 35px;
                display: block;
            }

            .header .navbar .sub-nav li a:hover {
                color: #56704c;
            }

            .header .navbar .sub-nav li .member_in .txtEN {
                margin-left: 5px;
                margin-right: 10px;
            }

    .header .navbar .btn-default {
        background: #98b06f;
        color: #fff;
        text-shadow: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 7px;
    }

    .header .navbar .lang {
        position: absolute;
        right: 54px;
        top: 20px;
    }

        .header .navbar .lang .dropdown-menu {
            background: #98b06f;
            color: #fff;
            border: none;
            border-radius: 0;
        }

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

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


/*------- Banner -------*/

.banner {
    position: relative;
}

body:not(.home) .banner {
    display: none;
}

body.home .banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.banner .container-fluid {
    padding: 0;
    width: 100%
}

.banner .slider {
    margin: 0;
}

.banner .banner-slider li {
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
    background: none !important;
}

.banner .slick-track {
}

.banner .banner-slider li a {
    display: block;
    height: 100%;
}

.banner .banner-slider li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

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

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

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


/*body:not(.home) .slogan-area{
	display:none;
}*/

.slogan-area {
    padding: 15px;
    position: relative;
    z-index: 20;
}

    .slogan-area .bg {
        background: #cacda4;
        opacity: .8;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

body.home .slogan-area .bg {
    opacity: .6
}

.slogan-area img {
    width: 30%;
}

body.contact .slogan-area,
body.member .slogan-area,
body.order .slogan-area,
body.faq .slogan-area,
body.product .slogan-area,
body.news .slogan-area {
    display: none;
}


/********************* Footer *********************/

.footer {
    padding: 0;
    background: #fff;
    position: relative;
    z-index: 20;
}

body:not(.home) .footer {
    border-top: 1px solid #b8b8b8;
    padding: 0;
}

.footer .container {
    width: 100%;
}


/* sitemap */

.footer .sitemap {
    display: none;
}

    .footer .sitemap ul li {
        color: #888;
        padding: 0;
    }

        .footer .sitemap ul li a {
            color: #888;
            padding: 10px;
        }

            .footer .sitemap ul li a:hover {
                color: #36B9C0;
            }

.footer_content {
}


/* siteinfo */

/*.d-flex .left-info {
    margin: 30px 0;
}

 .gotop {
    position: absolute;
    top: 35%;
    right: 0;
    transform: translateY(-50%);
} */

.gotop a {
    background: #98b06f !important;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: block;
}

    .gotop a:hover {
        background: #EA9010;
    }

.footer .d-flex {
    width: 100%;
    margin: 30px 0 0;
    justify-content: space-between;
}

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

    .footer .siteinfo> ul > li + li {
        margin-top: 15px;
    }

    .footer .siteinfo ul > li ul {
        margin: 0;
        display: flex;
    }
    .footer .siteinfo ul > li ul li{
        margin-right: 20px;
    }


    .footer .siteinfo ul > li .icon {
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
    }

.footer .right-info {
    text-align: right;
    /* padding: 10px 0px 35px 0; */
}

.footer .terms {
    /* display: flex;
    justify-content: flex-end;
    margin: 0 -5px 5px 0; */
}

    .footer .terms li {
        position: relative;
    }

        .footer .terms li a {
            color: #000;
        }

            .footer .terms li a:hover {
                color: #98b06f;
            }

        .footer .terms li + li:before {
            content: "|";
            display: inline-block;
            vertical-align: middle;
            position: absolute;
            left: -3px;
            top: 0;
            bottom: 0;
            color: #000;
        }

.footer .siteinfo .map {
    display: inline-block;
    background: url(../images/all/icon_map.png) no-repeat;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    vertical-align: text-bottom;
    margin-right: 20px;
}

    .footer .siteinfo .map:hover {
        position: relative;
        top: 2px;
    }

.footer .copyright b {
    color: #36B9C0;
}

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

    .footer .powered a:hover {
        color: #666;
    }

#wh-widget-send-button.wh-widget-right {
    right: -10px !important;
    bottom: 110px !important;
}


/********************* floating *********************/

#floating {
    display: none;
}

    #floating .btn-floating {
        width: 28px;
        height: 58px;
        background-color: #98b06f;
        display: none;
        margin: 1px;
        padding: 10px 3px;
        position: absolute;
        left: -30px;
    }

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

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

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

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

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

            #floating ul li a {
                width: 56px;
                height: 60px;
                background: url(../images/all/floating_icon.png) no-repeat;
                background-position-x: 0;
                font-size: 10px;
                color: #bbb;
                text-align: center;
                display: block;
                padding: 40px 0 0;
                position: relative;
            }

            #floating ul li.b1 a {
                background-position-y: 0;
            }

            #floating ul li.b2 a {
                background-position-y: -80px;
            }

            #floating ul li.b3 a {
                background-position-y: -160px;
            }

            #floating ul li a:hover {
                color: #333;
                background-position-x: -56px;
            }

            #floating ul li a .num {
                min-width: 20px;
                height: 20px;
                background-color: #EB0F0F;
                color: #fff;
                border-radius: 50%;
                display: inline-block;
                position: absolute;
                right: 8px;
                top: 0;
            }


/********************* Main *********************/

.main {
    z-index: 10;
}

.main_content {
    min-height: 400px;
    padding: 0;
}

body.home .main_content {
    padding: 30px 0 0;
}


/*----------------------- side -----------------------*/

.side .side-toggle {
    font-size: 15px;
    color: #23989f;
    text-align: center;
    line-height: 28px;
    margin-top: 0px;
}

.side .nav > li + li {
    border-top: 1px solid #ABCFDB;
}

.side .nav > li a {
    color: #333;
    line-height: 20px;
    display: block;
    padding: 8px 10px 8px 22px;
}

    .side .nav > li a:hover,
    .side .nav > li a:focus,
    .side .nav > li.active a {
        background: url(../images/all/list_icon.png) no-repeat 0 10px;
        color: #02b7c1;
    }

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

    .side .nav > li > ul > li > a,
    .side .nav > li > ul > li > a:hover {
        background: url(../images/all/list_icon2.png) no-repeat 0 6px;
        padding: 6px 10px 6px 20px;
    }

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

        .side .nav > li > ul > li > ul > li > a,
        .side .nav > li > ul > li > ul > li > a:hover {
            background: url(../images/all/list_icon3.png) no-repeat 0 6px;
            padding: 6px 10px 6px 20px;
        }

.side .sider_nav {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 50px;
}

    .side .sider_nav li {
        margin-bottom: 10px;
    }

        .side .sider_nav li a {
            color: #98b06f;
            border: 1px solid #98b06f;
            border-radius: 10px;
            padding: 5px 20px;
            min-width: 8em;
        }

            .side .sider_nav li a.active,
            .side .sider_nav li a:hover {
                background: #98b06f;
                color: #fff;
            }


/*----------------------- Content -----------------------*/

.content > h1 {
    color: #36b9c0;
    font-size: 30px;
    border-bottom: 1px solid #ABCFDB;
    padding: 5px 10px 15px;
    margin-top: 0;
}


/* breadcrumb */

.content .breadcrumb {
    background: none;
    margin: 0;
    font-size: 13px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

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


/* btn-more */


/*.content .btn-more {
    position: absolute;
    right: 15px;
    top: 30px;
    display: block;
    width: 52px;
    height: 24px;
    background: url(../images/all/btn_more.png) no-repeat;
    text-indent: -9999px;
}

    .content .btn-more:hover {
        background-position: 0 -24px;
    }*/


/* list-box */

.content .list-box .txt-list {
    margin-bottom: 60px;
}

    .content .list-box .txt-list li {
        background: url(../images/all/icon_list.png) no-repeat 8px 12px;
        border-bottom: 1px dotted #ccc;
        padding-left: 30px;
    }

        .content .list-box .txt-list li:nth-child(2n+1) {
            background-color: rgba(240, 240, 240, 0.3);
        }

        .content .list-box .txt-list li a {
            line-height: 28px;
            display: block;
            padding: 10px 0;
        }

            .content .list-box .txt-list li a:hover,
            .content .list-box .txt-list li a:focus {
                color: #36B9C0;
            }

        .content .list-box .txt-list li span {
            font-size: 13px;
            color: #aaa;
            line-height: 20px;
            display: inline-block;
            float: right;
            padding: 3px 20px;
        }

            .content .list-box .txt-list li span.news-title {
                width: 78%;
                color: #848275;
                float: left;
            }

        .content .list-box .txt-list li.list-header {
            background: none;
            border-bottom: 1px solid #ACE7EB;
            padding-left: 40px;
            padding-right: 15px;
        }

            .content .list-box .txt-list li.list-header a,
            .content .list-box .txt-list li.list-header a span {
                font-size: 18px;
                color: #36B9C0;
            }

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


/* btn-box */

.content .btn-box {
    margin: 50px 0;
    clear: both;
    text-align: center;
}

    .content .btn-box ul {
        margin-left: 0;
    }

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

    .content .btn-box .pager,
    .content .btn-box .page-info {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

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

            .content .btn-box .pager li > a {
                color: #000;
                border-radius: 0;
                border: none;
                padding: 5px 10px;
                border-bottom: 1px solid transparent;
                transition: all .5s ease;
            }

        .content .btn-box .pager:not(.btn-style) li:not(.btn-prev):not(.btn-next) > a:hover {
            background: none;
            color: #000;
            border-bottom: 1px solid #000;
        }

        .content .btn-box .pager.btn-style li > a {
            background: #98b06f;
            color: #fff;
            border-bottom: none;
            min-width: 240px;
            padding: 15px 10px;
            display: block;
        }

            .content .btn-box .pager.btn-style li > a:hover {
                border-bottom: none;
                background: #EA9010 !important;
            }

    .content .btn-box .page-info {
        margin: 5px 0;
    }

        .content .btn-box .page-info li,
        .content .btn-box .page-info li a {
            color: #919191;
        }

            .content .btn-box .page-info li a:hover {
                color: #98b06f;
            }

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


/*----------------------------------------- 首頁 home --------------------------------------*/

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

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

body.home .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: flex-end;
}

    body.home .content > h2 {
        font-size: 20px;
        border-bottom: 1px solid #ACE7EB;
        color: #36B9C0;
        padding: 6px;
    }

    body.home .content .btn-more {
        top: 10px;
        right: 0;
    }

body.home .home-news {
    background: rgb(255 255 255 / 0.8);
    padding: 20px;
    width: 35%;
    margin: 0 5% 10% auto;
    transform: translateY(50px);
    transition: all .5s ease;
    opacity: 0;
}

    body.home .home-news.aos-animate {
        transform: translateY(0);
        opacity: 1;
    }

.home-news li a {
    color: #000;
    display: block;
}

.home-news li .date {
    margin-bottom: 15px;
}

    .home-news li .date .icon {
        background: #86a17c;
        border-radius: 5px;
        padding: 0 15px;
        font-size: 18px;
        font-family: 'Saira Semi Condensed', sans-serif;
        display: inline-block;
        color: #fff;
        margin-right: 10px;
    }

.home-news li a h4 {
    margin: 0;
    font-size: 15px;
    height: 3em;
    line-height: 24px;
    overflow: hidden;
}

.home-pro.row {
    margin: 0;
    position: relative;
}

.home-pro .title {
    color: #4c4c4c;
    /*text-shadow: 0 0 5px rgba(0, 0, 0, 0.86);*/
    line-height: normal;
    transform: translateX(100px);
    transition-delay: 0s;
    transition: all .5s ease;
    opacity: 0;
}

    .home-pro .title .txt-tw {
        /*font-weight: 600;*/
        font-size: 17px;
    }

    .home-pro .title .txt-en {
        font-family: 'Cataneo BT';
        font-size: 18px;
    }

.home-pro .item {
    padding: 0;
}

    .home-pro .item a {
        display: block;
    }

        .home-pro .item a .pic {
            position: relative;
            padding: 15px;
            min-height: 220px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;
            transition: all 1s ease;
            opacity: 0;
        }

            .home-pro .item a .pic:before {
                height: 10px;
                left: 0;
                right: 0;
                position: absolute;
                bottom: 100%;
                background: rgb(255 255 255 / 0.4);
                transition: all .5s ease;
                content: ""
            }

            .home-pro .item a .pic:after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 100%;
                left: 0;
                display: block;
                background: #fff;
                transform-origin: right top;
                transform: scale(0, 1);
                -webkit-transition: transform .3s;
                transition: transform .3s;
                height: 10px
            }

        .home-pro .item a:hover .pic:after {
            transform-origin: left top;
            transform: scale(1, 1);
        }

    .home-pro .item:nth-child(1) a .pic {
        background: url(../images/all/img_pro.jpg) no-repeat right;
        background-size: cover;
        transform: translateY(100px);
    }

    .home-pro .item:nth-child(2) a .pic {
        background: url(../images/all/img_pro2.jpg) no-repeat right;
        background-size: cover;
        transform: translateY(-100px);
    }

    .home-pro .item:nth-child(3) a .pic {
        background: url(../images/all/img_pro3.jpg) no-repeat right;
        background-size: cover;
        transform: translateY(100px);
    }

    .home-pro .item:nth-child(4) a .pic {
        background: url(../images/all/img_pro4.jpg) no-repeat;
        background-size: cover;
        transform: translateY(-100px);
    }

    .home-pro .item:nth-child(4) .title b {
        font-family: 'Cataneo BT', sans-serif;
        font-weight: normal;
    }

        .home-pro .item:nth-child(4) .title b small {
            font-family: 'Open Sans', sans-serif;
            font-size: 25px;
        }

    .home-pro .item:nth-child(4) .icon {
        display: none !important;
        position: absolute;
        top: 30px;
        left: 30px;
        transition: all .5s ease;
    }

    .home-pro .item:nth-child(4) a:hover .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .home-pro .item a:hover .pic:before {
    }

    .home-pro .item a:hover .title {
        transform: translateX(100px);
        opacity: 0;
        transition-delay: 0s;
    }

    .home-pro .item a:hover .pic {
        transform: scale(1.1)
    }

.home-pro.aos-animate .item a .pic {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .5s;
}

.home-pro .item a .pic:before {
    content: "";
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    transition: all .5s ease;
}

body.is_scroll .home-pro .title {
    transition-delay: 1s;
    transform: translateX(0);
    opacity: 1;
}

.home-pro .item a:hover .pic:before {
    opacity: 0;
}

body.home .header .navbar .sub-nav li a img {
    /*width: 35px;*/
}

body.home .header .navbar .navbar-nav {
    margin: 40px -25px 0 0;
}

.header .navbar .sub-nav li a img {
    width: 26px;
    height: 26px;
}

.header .navbar .navbar-nav {
    margin: 0;
}

body.home .header .navbar .sub-nav li .txt {
    display: inline;
}

    body.home .header .navbar .sub-nav li .txt.txtEN {
        display: inline;
    }

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

    .header .navbar .sub-nav li .txt.txtEN {
        display: inline;
    }

body.is_scroll .slogan-area {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}


/*----------------------------------------- news --------------------------------------*/

body.news .content .h2 {
    display: none;
}

.item-list.row {
    margin: 0 -30px;
}

.item-list .item {
    margin-bottom: 50px;
    padding: 0 30px;
}

    .item-list .item a {
        display: block;
    }

.news-list .item .pic {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

    .news-list .item .pic:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(201 217 164 / 0.8);
        transform: scale(0.8);
        opacity: 0;
        transition: all .5s ease;
        z-index: 5;
    }

    .news-list .item .pic:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(../images/all/icon_logo.png) center center no-repeat;
        opacity: 0;
        transition: all .5s ease;
        z-index: 6;
        transform: perspective(400px) rotateY(90deg);
        display: none;
    }

    .news-list .item .pic .date {
        position: absolute;
        bottom: 15px;
        left: 0;
        color: #4e6151;
        background: #fff;
        padding: 3px 20px;
        font-weight: bold;
        z-index: 10;
    }

.news-list .item:hover .pic:before {
    opacity: 1;
    transform: scale(1);
}

.news-list .item:hover .pic:after {
    transition-delay: .5s;
    opacity: 1;
    transform: perspective(400px) rotateY(0);
}

.btn-box ul.pager li.btn-prev {
    border-right: 1px solid #a2a2a2;
}

.btn-box ul.pager li.btn-next {
    border-left: 1px solid #a2a2a2;
}

    .btn-box ul.pager li.btn-prev a,
    .btn-box ul.pager li.btn-next a {
        padding: 15px;
    }

.btn-box ul.pager li.btn-prev img {
    height: 14px;
    transform: rotate(-180deg);
}

.btn-box ul.pager li.btn-next img {
    height: 14px;
    transform: rotate(0deg);
}

.title-news {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .title-news .date {
        background: #cacda4;
        /* margin: auto; */
        padding: 5px 10px;
        color: #fff;
        margin-right: 15px;
    }

    .title-news h3 {
        padding: 5px 15px;
        margin: 0;
        font-size: 20px;
        border-left: 1px solid #a2a2a2;
    }


/*----------------------------------------- product --------------------------------------*/

body.product .pro-list .add-cart {
    display: flex;
}

body.product .pro-list:not(.pro-recommend) .add-cart .number-spinner input {
    min-width: 90px;
}

.pro-list .pic img {
    width: 100%;
}

.pro-list .number-spinner,
.pro-show .number-spinner {
    width: calc(100% - 62px);
    border: 1px solid #ccc;
}

.pro-show .number-spinner {
    width: auto;
}

.number-spinner .btn img {
    width: 12px;
    margin: auto;
}

.number-spinner input {
    height: 60px;
    border-left: none;
    border-right: none;
    background: #fff;
}

.number-spinner .input-group-btn button {
    width: 60px;
    height: 60px;
    background: #f1f1f1;
    border-radius: 0;
    transition: all .5s ease;
    z-index: 10;
    margin: 0 !important;
}

table.table .number-spinner input {
    padding: 0;
    height: 40px;
    background: #fff;
}

table.table .number-spinner .input-group-btn button {
    width: 40px;
    height: 40px;
    background: none;
}

table.table .number-spinner {
    width: calc(100% - 40px);
    border: 1px solid #ccc;
    background: #fff;
    margin: auto;
    max-width: 120px;
    min-width: 120px;
}

    table.table .number-spinner button,
    table.table .number-spinner input {
        border: none;
    }

.number-spinner .input-group-btn button:hover {
    background: #cacda4;
}

.add-cart .btn-cart {
    background: #98b06f;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: all .5s ease;
    border: 1px solid #98b06f;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .add-cart .btn-cart img {
        width: 100%;
        max-width: 35px;
    }

    .add-cart .btn-cart:hover {
        background: #e9724c;
        border: 1px solid #e9724c;
    }

.pro-list .pic {
    position: relative;
    overflow: hidden;
}

body.product .pro-list .pic .sale {
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 10;
    transition: all 1s ease;
}

.pro-list .pic img {
    transform: scale(1);
    transition: all .5s ease;
    width: 100%;
}

.pro-list a:hover .pic img {
    transform: scale(1.1);
}

body.product .pro-list a:hover .pic .sale {
    top: -100%;
}

.pro-list .info {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    flex-direction: column;
}

    .pro-list .info .price {
        color: #e9724c;
    }

.tips-ship {
    border: 7px solid #e0777c;
    background: #e0777c;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .5s ease;
    /* -webkit-animation: ani-tipsNormal 1s ease both;
    animation: ani-tipsNormal 1s ease both; */
    left: 0;
    right: 0;
}

    .tips-ship .flex-tips {
        width: 100%;
    }

    .tips-ship.scroll-to-fixed-fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* -webkit-animation: ani-tips 1s ease both;
	animation: ani-tips 1s ease both; */
    }

    .tips-ship .txt-freeShip {
        font-weight: bold;
        color: #0000cb;
    }

body.product .item-list {
    margin-top: 40px;
}


/*.tips-ship.scroll-to-fixed-fixed {
    left: 0 !important;
    right: 0;
    width: 100% !important;
    -webkit-animation: ani-tips .9s ease both ;
    animation: ani-tips .9s ease both ;
}*/

.tips-ship .icon {
    max-width: 65px;
    text-align: center;
    min-width: 30px;
    margin-right: 10px;
}

.tips-ship .info {
    flex-grow: 1;
    background: #fff;
    padding: 10px;
}

@-webkit-keyframes ani-tips {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ani-tips {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes ani-tipsNormal {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ani-tipstipsNormal {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

body.product.p01 .note-area {
    margin: auto;
    border-bottom: 1px solid#cacda4;
    text-align: center;
}

    body.product.p01 .note-area .icon {
        display: inline-block;
        vertical-align: middle;
    }

body.product .btn-addCart {
    display: block;
    background: #e0777c;
    text-align: center;
    padding: 15px;
    color: #fff;
    line-height: 33px;
    margin-bottom: 20px;
}

    body.product .btn-addCart:hover {
        background: #e9724c;
    }

body.product .btn-morePro {
    cursor: pointer;
    display: block;
    background: #98b06f;
    text-align: center;
    padding: 15px;
    color: #fff;
    line-height: 33px;
    margin-bottom: 20px;
}

    body.product .btn-morePro:hover {
        background: #b12b00;
    }

body.product .pro-detail {
    margin-top: 50px;
}

body.product .pro-show .h2 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
}

body.product .pro-show .price {
    font-size: 30px;
    color: #e9724c;
    margin: 20px 0;
}

    body.product .pro-show .price small {
        font-size: 20px;
    }

body.product .pro-show .desc {
    margin-bottom: 40px;
}

body.product .pro-show .num {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

body.product .btn-addCart .icon {
    display: inline-block;
    vertical-align: middle;
}

.fancybox-content {
}

body:not(.product.p02) .fancybox-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 10px solid #cacda4;
    z-index: 10;
    pointer-events: none;
}

button.fancybox-button.fancybox-close-small,
.fancybox-button {
    background: #cacda4;
    opacity: 1;
    top: 0;
    right: 0;
    color: #fff;
    z-index: 9999;
}

body.product .pro-show .pic-small {
    margin: 0 -7px;
}

    body.product .pro-show .pic-small .item {
        margin: 7px;
    }

body.product .pro-show .add-more.pullB > h2.st {
    margin-top: 0;
    padding-top: 20px;
}

.slick-area .picBig {
    visibility: hidden;
}

.slick-area .slick-initialized {
    visibility: visible;
}

.slick-area .slick-slide img {
    width: 100%;
}

.slick-area .slick-prev,
.slick-area .slick-next {
    position: relative;
    top: auto;
    width: 29px;
    height: 29px;
    background: url(../images/all/icon_arrowSlick.png) no-repeat;
    left: auto;
    right: auto;
    margin: 0 5px;
}

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

.slick-area .slick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-area .slick-prev:hover,
.slick-area .slick-prev:focus,
.slick-area .slick-next:hover,
.slick-area .slick-next:focus {
    background: url(../images/all/icon_arrowSlick.png) no-repeat;
}

.slick-area .slick-next,
.slick-area .slick-next:hover,
.slick-area .slick-next:focus {
    background-position: 0 -29px;
}

.add-more {
    background: #f1f1f1;
    padding: 0 0 30px;
    position: relative;
}

    .add-more:before {
        content: "";
        position: absolute;
        width: 100%;
        right: 100%;
        top: 0;
        bottom: 0;
        background: #f1f1f1;
    }

    .add-more:after {
        content: "";
        position: absolute;
        width: 100%;
        left: 100%;
        top: 0;
        bottom: 0;
        background: #f1f1f1;
    }

h2.st {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 40px;
}

.note-area h3.st {
    background: #df525a;
    padding: 20px 15px;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: #fff;
}

.note-area .box {
    background: #e0777c;
    padding: 15px;
    color: #fff;
}

    .note-area .box p {
        margin: 5px 0;
    }

.note-area.styleB {
    background: #ffdcdc;
    display: flex;
    align-items: stretch;
}

    .note-area.styleB .icon {
        flex-shrink: 0;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: #ffbebe;
    }

        .note-area.styleB .icon img {
            max-width: 40px;
        }

    .note-area.styleB .wd {
        display: flex;
        align-items: center;
        padding: 15px;
    }

a.close-fancybox {
    text-align: center;
    color: #000;
    display: block;
    margin-top: 40px;
}

    a.close-fancybox img {
        margin-bottom: 5px;
    }


/*----------------------------------------- product2 --------------------------------------*/

body.product.p02 {
    background: #cacda4;
}

    body.product.p02 .header .slogan-area,
    .product.p02 .footer,
    body.product.p02 .side1 {
        display: none;
    }

    body.product.p02 .header {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 11;
        width: 100%;
    }

        body.product.p02 .header .navbar {
            padding: 20px 15px 5px;
            background: none;
        }

    body.product.p02.is_scroll .header .navbar {
        transform: translateY(0);
    }



    body.product.p02 .header .navbar .container .navbar-brand {
        /*width: 47px;
    height: 56px;
    top: auto;
    left: auto;
    transform: none;
    position: relative;
    margin: 0;*/
    }

    body.product.p02 .header .navbar .sub-nav li .txt {
        display: none;
    }

    body.product.p02 .header .navbar .sub-nav li a img {
        width: 26px;
    }

    body.product.p02 .header .navbar .navbar-nav {
        margin: 0;
        justify-content: flex-end;
    }

        /* body.product .header .navbar .navbar-nav li {
    padding: 5px;
} */

        body.product.p02 .header .navbar .navbar-nav li a:hover {
            background: rgba(147, 162, 113, 1);
            border-radius: 5px;
            color: #fff;
        }

    body.product.p02 .main_content {
        padding: 0;
    }

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

    body.product.p02 #fullpage .section .inner {
        height: 100vh;
    }

    body.product.p02 #fullpage .section .bg {
        background-size: cover;
        height: 100vh;
        transition: all 2s ease;
        transform: scale(1.2);
    }

    body.product.p02 #fullpage .section.fp-completely .bg {
        transform: scale(1);
        transition-delay: 1s;
    }

    body.product.p02 #fullpage .section .bg img {
        display: none;
    }


    /*body.product.p02 #fullpage .section .left-info img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}*/

    body.product.p02 #fullpage .section .inner .right-info {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 5%;
        transition: all 1s ease;
    }

    body.product.p02 #fullpage .section.active .inner .right-info {
        left: 0;
        transition-delay: 1s;
    }


    /* body.product.p02 #fullpage .section .inner .left-info, body.product.p02 #fullpage .section .inner .right-info {
	position: relative;
	width: 50%;
} */

    body.product.p02 #fullpage .section .inner .left-info {
        width: 100%;
    }

    body.product.p02 #fullpage .section .inner {
        transform-style: preserve-3d;
    }

        body.product.p02 #fullpage .section .inner .left-info {
            /*transform: rotateX(-90deg);
	transition: all 1s ease;
	transition-delay: 0s;*/
            overflow: hidden;
        }

    body.product.p02 #fullpage .section.active .inner .left-info {
        -webkit-animation-name: backInLeft;
        animation-name: backInLeft;
    }

    body.product.p02 #fullpage .section .inner .left-info:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 40%;
        background: rgb(0, 0, 0);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6615021008403361) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: 10;
        transition: all 1s ease;
        transition-delay: 1.5s;
        pointer-events: none;
    }

    body.product.p02 #fullpage .section .right-info:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(../images/all/logo.svg) center center no-repeat;
        transition: all .5s ease;
        transition-delay: 0s;
        z-index: 9999;
        background-size: 100px;
        pointer-events: none;
    }

    body.product.p02 #fullpage .section.active .right-info:before {
        transform: translateY(-100px);
        transition-delay: 1s;
        opacity: 0;
    }

@-webkit-keyframes ani-bg {
    0% {
        left: 0;
    }

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

@keyframes ani-bg {
    0% {
        left: 0;
    }

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


/*body.product.p02 #fullpage .section:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:  rgba(201, 217, 164, 0.68);
        transition: all 1s ease;
        transition-delay: 0s;
        z-index: 9998;
        background-size: 100px;
    }

body.product.p02 #fullpage .section.active:after {
    -webkit-animation: ani-bg2 1s ease both;
    animation: ani-bg2 1s ease both;
}*/

@-webkit-keyframes ani-bg2 {
    0% {
        left: 0;
    }

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

@keyframes ani-bg2 {
    0% {
        left: 0;
    }

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

body.product.p02 #fullpage .section .inner .right-info .txt {
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s ease;
    transition-delay: 1.5s;
}

body.product.p02 #fullpage .section.active .inner .right-info .txt {
    transform: translateY(0px);
    opacity: 1;
}

body.product.p02 #fullpage .section .inner .right-info .txt .title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

body.product.p02 #fp-nav ul li a span,
body.product.p02 .fp-slidesNav ul li a span {
    background: #fff;
}

body.product.p02 #fullpage .slick-slider .item {
    position: relative;
}

body.product.p02 #fullpage .slick-btn {
    position: absolute;
    right: 0;
    bottom: -200px;
    display: flex;
    justify-content: space-between;
    transition: all .5s ease;
}

body.product.p02 #fullpage .section.fp-completely .slick-btn {
    bottom: 0;
}

body.product.p02 #fullpage .slick-btn .slick-prev,
body.product.p02 #fullpage .slick-btn .slick-next {
    top: auto;
    bottom: 0;
    margin-top: 0;
    width: 56px;
    height: 56px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    transition: all .5s ease;
    overflow: hidden;
}

body.product.p02 #fullpage .slick-btn .slick-next {
    background: url(../images/all/next.svg) center center no-repeat #93a271;
    right: 0;
    border: none;
    background-size: 30px;
    margin: 0;
}

    body.product.p02 #fullpage .slick-btn .slick-next:before {
        background: url(../images/all/next.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 0;
        /* bottom: 0; */
        content: "";
        width: 30px;
        height: 30px;
        display: block;
        z-index: 10;
        transform: translate(-50%, -50%);
        background-size: 30px;
        transition: all .5s ease;
        opacity: 0;
    }

body.product.p02 #fullpage .slick-btn .slick-prev:before {
    background: url(../images/all/back.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 100%;
    /* bottom: 0; */
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    z-index: 10;
    transform: translate(-50%, -50%);
    background-size: 30px;
    transition: all .5s ease;
    opacity: 0;
}

body.product.p02 #fullpage .slick-btn .slick-next:hover {
    background-position: 60px center;
}

    body.product.p02 #fullpage .slick-btn .slick-next:hover:before {
        left: 50%;
        opacity: 1;
    }

body.product.p02 #fullpage .slick-btn .slick-prev:hover {
    background-position: -60px center !important;
}

    body.product.p02 #fullpage .slick-btn .slick-prev:hover:before {
        left: 50%;
        opacity: 1;
    }

body.product.p02 #fullpage .slick-btn .slick-arrow:hover {
    background-color: #727f54;
}

body.product.p02 #fullpage .slick-btn .slick-prev {
    left: 0;
    background: url(../images/all/back.svg) center center no-repeat #93a271;
    border: none;
    background-size: 30px;
    background-position: center center !important;
    margin: 0;
}

body.product.p02 .section.active #fullpage .slick-btn .slick-prev {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    animation-delay: .8s;
}

body.product.p02 .section.active #fullpage .slick-btn .slick-next {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-delay: .8s;
}

body.product.p02 .inner .btn-area {
    position: absolute;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    left: 25px;
    /* left: 0; */
    z-index: 20;
    transition: all .5s ease;
    bottom: 25px;
    display: flex;
    align-items: center;
}

    body.product.p02 .inner .btn-area .btn-video {
        max-width: 70px;
        display: block;
        margin: auto;
    }


/* body.product.p02 #fullpage .section .inner .left-info .item:before {
    content: "";
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    opacity: 0;
    pointer-events:none;
    transition:all .5s ease;
}
body.product.p02 #fullpage .section.bg-visible .inner .left-info .item:before {
    opacity: 1;
} */

body.product.p02 #menu {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    padding: 0;
    margin: 0;
    padding: 15px 0;
}

    body.product.p02 #menu .menu-list {
        display: inline-block;
        list-style: none;
        padding-left: 10px;
        margin-bottom: 0;
    }

        body.product.p02 #menu .menu-list > li {
            padding: 5px;
        }

            body.product.p02 #menu .menu-list > li a {
                display: inline-block;
                padding: 5px 20px;
                background: rgba(255, 255, 255, 0.4);
                border-radius: 5px;
                text-shadow: none;
            }

                body.product.p02 #menu .menu-list > li a:hover, body.product.p02 #menu .menu-list > li.active a {
                    background: rgba(147, 162, 113, 1);
                    border-radius: 5px;
                    color: #fff;
                }

body.product.p02 .left-info .slide {
    position: relative;
}

body.product.p02 a.btn-more {
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    /* background: rgba(255, 255, 255, 0.3); */
    display: block;
    position: relative;
    border: 1px solid #fff;
}

    body.product.p02 a.btn-more:hover {
        background: #93a271;
    }

body.product.p02 a.btn-video + a.btn-more {
    margin-left: 15px;
    border: none;
}

    body.product.p02 a.btn-video + a.btn-more:before {
        content: "";
        height: 20px;
        width: 1px;
        background: #fff;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 100%;
    }

body.product.p02 a.btn-more:hover {
    background: #cacda4;
    border: 1px solid #cacda4;
    color: #000;
}

body.product.p02 a.btn-video + a.btn-more:hover:before {
    opacity: 0;
}


/*body.product.p02 #fullpage .section .item:hover .bg{
    transform: scale(1.1);
}*/

body.product.p02 .navbar-toggle {
    background: #fff;
    border: none;
}

body.product.p02 .navbar-header {
    position: relative;
    border-bottom: none;
}

body.product.p02 .navbar-toggle .icon-bar {
    background: #cacda4;
}


/*body.product.p02 form{
    position:relative;
    z-index:200;
}*/

body.product.p02 #wh-widget-send-button.wh-widget-right {
    display: none;
}

body.product.p02 #fullpage .floating-info {
    position: absolute;
    width: 50%;
    color: #fff;
    padding: 20px 55px;
    z-index: 20;
}

    body.product.p02 #fullpage .floating-info.positionR {
        top: 50%;
        right: 0;
        transform: translate(100px, -50%);
        transition: all .5s ease;
        opacity: 0;
    }

    body.product.p02 #fullpage .floating-info.positionL {
        top: 50%;
        left: 0;
        transform: translate(100px, -50%);
        transition: all .5s ease;
        opacity: 0;
    }

body.product.p02 #fullpage .section.fp-completely .slick-active .floating-info.positionL,
body.product.p02 #fullpage .section.fp-completely .slick-active .floating-info.positionL,
body.product.p02 #fullpage .section.fp-completely .slick-active .floating-info.positionR,
body.product.p02 #fullpage .section.fp-completely .slick-active .floating-info.positionR {
    transform: translate(0, -50%);
    opacity: 1;
    transition-delay: 1s;
}

body.product.p02 #fullpage .floating-info .txt {
    font-size: 20px;
}

    body.product.p02 #fullpage .floating-info .txt h2 {
        margin-top: 0;
    }

body.product.p02 #fullpage .slick-slider {
    visibility: hidden;
}

body.product.p02 .floating-video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 200px;
    left: 55px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #fff;
    overflow: hidden;
}

    body.product.p02 .floating-video .spic {
        overflow: hidden;
    }

        body.product.p02 .floating-video .spic:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 1;
            transform: scale(1);
            transition: all .5s ease;
            z-index: 5;
            pointer-events: none;
        }

        body.product.p02 .floating-video .spic img {
            transform: scale(1);
            transition: all .5s ease;
        }

    body.product.p02 .floating-video:hover .spic img {
        transform: scale(1.1);
    }

    body.product.p02 .floating-video:hover .spic:before {
        opacity: 0;
        transform: scale(1.1);
    }

    body.product.p02 .floating-video img.img-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 30px;
        z-index: 10;
    }


/*----------------------------------------- table --------------------------------------*/

table.table.tb-style {
    margin-bottom: 0;
}

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

table.table.tb-style tr td,
table.table.tb-order tr td {
    border-top: none;
    text-align: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 15px;
}

table.table.tb-style tr th,
table.table.tb-order tr th {
    border: none;
    background: #e8e8e8;
    text-align: center;
    padding: 15px;
    min-width: 4em;
}

    table.table.tb-style tr td.alignL,
    table.table.tb-style tr th.alignL {
        text-align: left;
    }

table td a.tb-btn {
    background: #98b06f;
    display: flex;
    width: 50px;
    height: 50px;
    text-align: center;
    margin: auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

table td a.btn-del {
}

table td a.tb-btn:hover {
    background: #e9724c;
}


/*----------------------------------------- faq --------------------------------------*/
body.faq .icon_search {
    background: #98b06f;
    border-radius: 50%;
    border: 1px solid #cacda4;
}

body.faq .search_btn {
    padding: 6px 6px;
}

body.faq .wid.wid-search .form-control {
    background: #cacda44d;
}

body.faq .wid.wid-search {
    position: absolute;
    top: 20px;
    right: 0;
}

.icon-hot {
    background: #da0d00;
    margin-left: 5px;
    color: #fff;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 15px;
}

body.faq .hot-qa {
    margin-bottom: 50px;
}

body.faq .qa-area .panel-default > .panel-heading {
    background: none;
    padding: 0;
}

body.faq .qa-area .panel-collapse {
}

body.faq .qa-area .panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: #d4e1b6;
}

    body.faq .qa-area .panel-group .panel .panel-body {
        padding: 0 15px 30px;
        border: none;
    }

        body.faq .qa-area .panel-group .panel .panel-body .inner {
            background: #fff;
            padding: 15px;
            border-radius: 20px;
            position: relative;
            display: flex;
            align-items: flex-start;
        }

            body.faq .qa-area .panel-group .panel .panel-body .inner .ans {
                background: #ff928b;
                border-radius: 15px;
                padding: 0px 15px;
                margin-right: 10px;
                color: #fff;
            }

            body.faq .qa-area .panel-group .panel .panel-body .inner:after {
                content: "";
                background: url(../images/all/img_msg.png) no-repeat;
                width: 19px;
                height: 11px;
                display: block;
                position: absolute;
                top: 100%;
                right: 20px;
            }

body.faq .qa-area h4 .fa.fa-question {
    margin-right: 10px;
    padding: 8px;
    background: #771f53;
    color: #fff;
}

body.faq .qa-area h4 a {
    position: relative;
    padding: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
}

    body.faq .qa-area h4 a .icon {
        width: 30px;
        height: 30px;
        background: #98b06f;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
        margin-right: 10px;
        flex-shrink: 0;
    }

    body.faq .qa-area h4 a.collapsed {
        color: #000000;
    }

        body.faq .qa-area h4 a.collapsed .fa.fa-question {
            background: #b2b2b2;
        }

body.faq .qa-area a span.faq-date {
    font-size: 13px;
}

.fa.fa-plus,
.fa.fa-minus {
    display: none;
    vertical-align: middle;
    margin-left: 5px;
}

body.faq .qa-area a .button-area {
    position: absolute;
    right: 8px;
    top: 50%;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

body.faq .qa-area a .button-area {
    position: absolute;
    width: 18px;
    height: 18px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

    body.faq .qa-area a .button-area .button {
        height: 18px;
    }

table.tb-order .fooicon {
    width: 18px;
    height: 18px;
    position: relative;
    opacity: 1;
    top: -2px;
    vertical-align: middle;
}

    body.faq .qa-area a .button-area .button:before,
    body.faq .qa-area a .button-area .button:after,
    table.tb-order .fooicon:before,
    table.tb-order .fooicon:after {
        content: "";
        position: absolute;
        background-color: #fff;
        transition: transform 0.25s ease-out;
    }

    body.faq .qa-area.qa-list a .button-area .button:before,
    body.faq .qa-area.qa-list a .button-area .button:after,
    table.tb-order .fooicon:before,
    table.tb-order .fooicon:after {
        background-color: #98b06f;
    }

    body.faq .qa-area a .button-area .button:before,
    table.tb-order .fooicon:before {
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        margin-left: -1px;
    }

    body.faq .qa-area a .button-area .button:after,
    table.tb-order .fooicon:after {
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        margin-top: -1px;
    }

table.tb-order .fooicon-minus:before,
table.tb-order .fooicon-plus:before {
    content: "";
    transition: all .5s ease;
}

body.faq .qa-area a .button-area .button:hover {
    cursor: pointer;
}

body.faq .qa-area a:not(.collapsed) .button-area .button:before,
table.tb-order .fooicon-minus:before {
    transform: rotate(90deg);
}


/*body.faq .qa-area a.collapsed .button-area .button:after, table.tb-order .fooicon-plus:before {
    transform: rotate(180deg);
}*/

.qa-area .nav > li > a {
    padding: 0;
    display: inline-block;
    color: #a33476;
    text-decoration: underline;
}

.qa-list .tab_wrapper .content_wrapper {
    border: none;
}

    .qa-list .tab_wrapper .content_wrapper .tab_content {
        padding: 20px 0;
    }

.qa-list .tab_wrapper > ul li {
    border: none;
    border-top: 3px solid transparent;
    font-size: 15px;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 15px;
}

    .qa-list .tab_wrapper > ul li.active {
        border: 1px solid #ccc;
        border-bottom: none;
        border-top: 3px solid #98b06f;
        color: #98b06f;
    }

body.faq .qa-area.qa-list .panel-group .panel {
    background: none;
}

body.faq .qa-area.qa-list h4 a {
    border: 1px solid #ccc;
    padding-right: 40px;
}

body.faq .qa-area.qa-list .panel-group .panel .panel-body {
    border-left: 4px solid #d4e1b6;
    padding: 30px 15px;
}

    body.faq .qa-area.qa-list .panel-group .panel .panel-body .inner {
        padding: 0;
    }

.checkbox a {
    color: #e9724c;
}

.paymentTips {
    background: #f7c4c4;
    padding: 15px;
    display: flex;
}

    .paymentTips .icon {
        margin-right: 10px;
    }

    .paymentTips .wd {
        padding: 15px;
        border-left: 1px solid #fff;
    }


/*----------------------------------------- cart --------------------------------------*/

body.cart .step-list {
    display: flex;
    width: 80%;
    margin: 50px auto;
}

    body.cart .step-list li {
        width: calc(100% / 4);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


        /*body.cart .step-list li a {
        display:flex;
        align-items:center;
    }*/

        body.cart .step-list li + li:before {
            content: "";
            top: 10px;
            bottom: 10px;
            width: 1px;
            background: #ddd;
            display: block;
            position: absolute;
            left: 0;
        }

        body.cart .step-list li .icon {
            width: 61px;
            height: 61px;
            border-radius: 50%;
            line-height: 61px;
            background: #dbdbdb;
            text-align: center;
            margin-right: 15px;
        }

        body.cart .step-list li.active .icon {
            background: #98b06f;
        }

        body.cart .step-list li.active.past .icon {
            background: #cacda4;
        }

        body.cart .step-list li .num {
            font-size: 20px;
            color: #dbdbdb;
            font-weight: bold;
            line-height: 20px;
        }

.checkbox.del-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

th .checkbox.del-box {
    margin: 0;
}

.checkbox.del-box input[type=checkbox] {
    position: relative;
    margin: 0 5px;
}

.checkbox.del-box label {
    padding: 0;
}

table.table.tb-style tr td.pro-name h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

table.table.tb-style tr td.pro-name .d-flex {
    align-items: center;
    text-align: left;
}

.tb-note {
    background: #e0777c;
    color: #fff;
    text-align: center;
    padding: 15px;
}

.add-more .sum {
    padding: 25px 30px;
    background: url(../images/all/bg_logo.png) no-repeat left bottom -20px;
    background-size: auto 120%;
    margin-bottom: -30px;
    min-height: 200px;
    display: flex;
    align-items: center;
}

body.cart.p02 .add-more .sum {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.add-more .sum ul,
.order-list .sum ul {
    text-align: right;
    display: table;
    margin: 0 0 0 auto;
}

    .add-more .sum ul li,
    .order-list .sum ul li {
        font-size: 20px;
    }

        .add-more .sum ul li + li,
        .order-list .sum ul li + li {
            margin-top: 10px;
        }

        .add-more .sum ul li.total,
        .order-list .sum ul li.total {
            font-size: 25px;
        }

.add-more .sum .total {
    text-align: right;
    display: block;
    width: 100%;
    font-size: 25px;
}

body.cart .content .btn-box .pager li > a .icon {
    margin-left: 5px;
}

body.cart .content .btn-box .pager.styleB {
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
    justify-content: space-between;
}

    body.cart .content .btn-box .pager.styleB li {
        margin: 0;
        width: calc(100% / 3 - 15px);
    }

    body.cart .content .btn-box .pager.styleB a {
        margin-bottom: 10px;
        display: block;
        min-width: 0;
        width: 100%;
    }

    body.cart .content .btn-box .pager.styleB li:nth-child(2) a {
        background: #e9724c;
    }

    body.cart .content .btn-box .pager.styleB li:nth-child(3) a {
        background: #4b5043;
    }

h3.st {
    font-weight: normal;
    font-size: 18px;
    background: #d4e1b6;
    padding: 20px 15px;
    margin: 0 0 20px;
}

.pro-recommend .slick-list {
    margin: 0 -30px;
}

.pro-recommend .item {
    padding: 0 30px;
}

.slick-list .slick-track {
    margin: 0;
}

.slick-list .slick-prev,
.slick-list .slick-next,
.slick-btn .slick-prev,
.slick-btn .slick-next,
.slick-btn .slick-prev:hover,
.slick-btn .slick-prev:focus,
.slick-btn .slick-next:hover,
.slick-btn .slick-next:focus {
    background: url(../images/all/icon_arrowSlick.png) no-repeat;
    width: 40px;
    height: 40px;
}

.slick-btn .slick-prev {
    background-position: 0 -40px !important;
}

.recommend-area .slick-btn {
    text-align: center;
}

    .recommend-area .slick-btn .slick-next.slick-disabled,
    .recommend-area .slick-btn .slick-prev.slick-disabled {
        opacity: .5;
    }

.slick-btn .slick-prev,
.slick-btn .slick-next {
    position: relative;
    display: inline-block;
    left: auto;
    right: auto;
    top: auto;
    transform: translate(0);
    margin: 0 5px;
}

    .slick-list .slick-prev:before,
    .slick-list .slick-next:before,
    .slick-btn .slick-prev:before,
    .slick-btn .slick-next:before {
        display: none;
    }

body.cart .account-area .member-login {
    border: 3px dashed #d4e1b6;
    padding: 40px 20px;
    text-align: center;
}

    body.cart .account-area .member-login h4 {
        font-size: 20px;
        border-bottom: 2px solid #d4e1b6;
        color: #98b06f;
        padding-bottom: 10px;
        margin: 0 auto 20px;
        display: table;
    }

    body.cart .account-area .member-login ul {
        display: flex;
        align-items: center;
    }

        body.cart .account-area .member-login ul li {
            width: 50%;
        }

        body.cart .account-area .member-login ul a {
            background: #f08700;
            color: #fff;
            padding: 20px;
            display: block;
            text-align: center;
            font-weight: bolder;
            font-size: 16px;
        }

        body.cart .account-area .member-login ul li:nth-child(2) a {
            background: #fc7a57;
        }

        body.cart .account-area .member-login ul a:hover {
            background: #A62639 !important;
        }

    body.cart .account-area .member-login .checkbox label {
        font-weight: bolder;
        font-size: 16px;
    }

.d-tb .form-group + .form-group {
    margin-top: 50px;
}

.d-tb .form-group div[class*="col-"] {
    margin-bottom: 20px;
}
/* .d-tb .form-group div[class*="col-"]+div[class*="col-"] {
    margin-top: 20px;
}

.d-tb .form-group div[class*="col-"] .row div[class*="col-"]+div[class*="col-"] {
    margin-top: 0;
} */

.d-tb .form-control {
    border: none;
    border-radius: 0;
    background: #f1f1f1;
    box-shadow: none;
    height: auto;
    padding: 15px;
}

    .d-tb .form-control + .form-inline {
        margin-top: 10px;
    }

.d-tb .form-group label.form-title {
    color: #98b06f;
    font-weight: normal;
}

.d-tb .receipt-date .d-flex {
    align-items: center;
}

.d-tb .receipt-date .icon,
.input-group.date .icon {
    border-radius: 0;
    border: none;
    background: #dadada;
}

    .d-tb .receipt-date .icon img,
    img.icon-date {
        width: 20px;
    }

.radio-box .radio-inline {
    position: relative;
}

    .radio-box .radio input[type=radio],
    .radio-box .radio-inline input[type=radio] {
        top: 50%;
        transform: translateY(-50%);
    }

.content .btn-box .pager.btn-style li > a.btn-brown {
    background: #6e675f;
}

.content .btn-box .pager.btn-style li > a.btn-red {
    background: #e9724c;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
    background-color: #86a17c !important;
    background-image: none;
}

.d-tb .radio-inline,
.d-tb .checkbox-inline {
    margin-right: 20px;
    margin-left: 0;
}

.btn-input {
    background: #fc7a57;
    border-radius: 0;
    border: none;
    color: #fff;
}

    .btn-input:hover {
        background: #EA9010;
        color: #fff;
    }

.radio-box .item + .item {
    margin-top: 15px;
}

table.table.tb-normal tr th,
table.table.tb-normal tr td {
    border: 1px solid #d4e1b6;
    padding: 10px 15px;
}

table.table.tb-normal tr th {
    text-align: right;
    color: #98b06f;
}

table.table.tb-orderDetail {
    margin-top: -20px;
}

    table.table.tb-orderDetail th {
        width: 200px;
    }

.d-tb p.note {
    margin-bottom: 10px;
}

body.cart.show .tb-orderDetail .alignC {
    font-weight: bolder;
    font-size: 18px;
}

.purchase-list {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -10px;
}

    .purchase-list .item {
        /* width: calc(100% / 3 - 20px); */
        width: 100%;
        background: #fff;
        padding: 15px;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .purchase-list .item .add-cart {
            display: flex;
            justify-content: space-between;
        }

    .purchase-list .number-spinner .input-group-btn button {
        background: none;
    }

    .purchase-list .number-spinner .input-group-btn button, .purchase-list .add-cart .btn-cart {
        width: 40px;
        height: 40px;
    }

    .purchase-list .number-spinner {
        width: 160px;
        border: 1px solid #ccc;
    }

        .purchase-list .number-spinner input {
            height: 40px;
            min-width: 40px;
        }

    .purchase-list .pro-name {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .purchase-list .price {
        color: #e9724c;
        margin-bottom: 10px;
    }

    .purchase-list .add-cart .btn-cart {
    }

        .purchase-list .add-cart .btn-cart img {
            max-width: 30px;
        }

.sec.purchase-area {
    margin-bottom: 0;
}

    .sec.purchase-area .add-more {
        padding: 30px 0;
    }

/*----------------------------------------- member --------------------------------------*/

body.member.login .bg-body,
body.member.index .bg-body,
body.member.level .bg-body {
    background: url(../images/all/bg_member.jpg) no-repeat right center;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    body.member.login .bg-body:before,
    body.member.index .bg-body:before,
    body.member.level .bg-body:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
    }

body.member.login .login-area {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 50px 0;
    align-items: stretch;
    flex-wrap: wrap;
}

    body.member.login .login-area .txt-link {
        display: flex;
        justify-content: space-between;
    }

        body.member.login .login-area .txt-link a {
            text-decoration: underline;
        }

    body.member.login .login-area > div {
        width: 50%;
        padding: 15px;
    }

.member-form {
    padding: 50px 30px;
    background: #fff;
}

    .member-form .form-control {
        border: none;
        border-radius: 0;
        background: #f1f1f1;
        box-shadow: none;
        height: auto;
        padding: 15px;
    }

body.member.login .btn-area {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

    body.member.login .btn-area > * {
        display: flex;
        padding: 30px;
        background: #ccc;
        height: calc(50% - 10px);
        font-size: 20px;
        font-weight: bold;
        align-items: center;
        /* justify-content: center; */
        /* flex-direction: column; */
        background: #EA9010;
        color: #fff;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }


    body.member.login .btn-area .icon {
        margin: 10px 15px 10px 0;
        flex-shrink: 0;
        max-width: 35px;
    }

    body.member.login .btn-area .wd {
        border-left: 1px solid #fff;
        padding-left: 30px;
    }

    body.member.login .btn-area .wd-link {
        color: #2E5077;
        text-decoration: underline;
    }

    body.member.login .btn-area div + a {
        background: #2E5077;
    }

    body.member.login .btn-area > a:hover {
        background: #EA9010;
    }

    body.member.login .btn-area a:hover, body.member.login .btn-area > div:hover * {
        color: #fff !important;
        background: none;
    }

    body.member.login .btn-area .wd .nav li a {
        padding: 0;
        color: #000;
    }

        body.member.login .btn-area .wd .nav li a.txt-red {
            color: #c50000;
        }

    body.member.login .btn-area .wd .nav li {
        margin-bottom: 10px;
        color: #000;
    }

        body.member.login .btn-area .wd .nav li .d-flex {
            flex-wrap: wrap;
        }

        body.member.login .btn-area .wd .nav li a:hover {
            color: #fff !important;
        }

    body.member.login .btn-area .wd .nav {
        margin-bottom: 20px;
    }

        body.member.login .btn-area .wd .nav li:nth-child(1) {
            font-weight: bold;
            font-size: 25px;
        }

    body.member.login .btn-area > div:hover {
        background: #eb493b;
    }

    body.member.login .btn-area a small {
        display: block;
        font-size: 15px;
    }

.g-btnLogin {
    display: flex;
    margin: 0 -5px;
}

    .g-btnLogin a {
        flex-grow: 1;
        border-radius: 0;
        margin: 0 5px;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        ;
        padding: 15px 10px;
    }

        .g-btnLogin a.btn-line {
            background: #06c052;
        }

        .g-btnLogin a.btn-google {
            background: #eb493b;
        }

        .g-btnLogin a:hover {
            opacity: .8;
        }

        .g-btnLogin a svg {
            fill: #fff;
            font-size: 20px;
            margin-right: 10px;
            vertical-align: middle;
        }

body.member.login .member-form .btn-box {
    margin: 20px 0;
}

    body.member.login .member-form .btn-box a {
        background: #98b06f;
        color: #fff;
        display: block;
        padding: 15px 10px;
    }

        body.member.login .member-form .btn-box a:hover {
            background: #EA9010;
        }

    body.member.login .member-form .btn-box ul {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }

    body.member.login .member-form .btn-box li {
        display: block;
        width: calc(50% - 5px);
        padding: 0;
    }

body.member.index .btn-membership {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

    body.member.index .btn-membership a {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        flex-direction: column;
        width: 100%;
        color: #fff;
        border: 1px solid #fff;
        margin: 15px;
        padding: 15px;
        width: calc(50% - 30px);
    }

        body.member.index .btn-membership a .icon {
            display: block;
            margin-bottom: 20px;
        }



        body.member.index .btn-membership a:hover {
            background: #EA9010;
        }

        body.member.index .btn-membership a h4 {
            font-size: 25px;
            font-weight: bold;
            margin: 0;
        }

        body.member.index .btn-membership a .info {
            text-align: right;
            display: none;
        }

            body.member.index .btn-membership a .info .icon {
                margin: 0px 0 15px auto;
                display: table;
            }

body.member.index .login-area {
    padding: 50px 0;
}

body.member.level h2.st {
    color: #fff;
}

.member.level .lv-list .item {
    display: flex;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
    color: #000;
}

    .member.level .lv-list .item .d-title h3 {
        font-weight: bold;
        font-size: 25px;
        margin: 10px 0 0 0;
    }

    .member.level .lv-list .item .d-title .icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: url(../images/all/bg_vip.jpg) no-repeat right center;
        background-size: cover;
        margin: auto;
    }

    .member.level .lv-list .item:nth-child(2) .d-title .icon {
        background: url(../images/all/bg_vip2.jpg) no-repeat right center;
        background-size: cover;
    }

    .member.level .lv-list .item:nth-child(3) .d-title .icon {
        background: url(../images/all/bg_vip3.jpg) no-repeat right center;
        background-size: cover;
    }




    .member.level .lv-list .item .d-title .icon img {
        width: 50px;
    }

    .member.level .lv-list .item:nth-child(1) .d-title h3 {
        color: #478839;
    }

    .member.level .lv-list .item:nth-child(2) .d-title h3 {
        color: #857d91;
    }

    .member.level .lv-list .item:nth-child(3) .d-title h3 {
        color: #b26d61;
    }

    .member.level .lv-list .item:nth-child(even) {
        background: rgba(255, 255, 255, 0.6);
    }

    .member.level .lv-list .item > div {
        flex: 1 1 25%;
        align-self: center;
        text-align: center;
        padding: 10px;
        font-size: 16px;
        line-height: 1.8em;
    }

    .member.level .lv-list .item h4.st {
        display: none;
    }

    .member.level .lv-list .item .rule-list svg {
        fill: #b0b853;
    }

.member.level .rule-list li .icon {
    flex-shrink: 0;
}

.member.level .rule-list svg {
    width: 18px;
    display: inline-block;
    margin-right: 10px;
    fill: #fff078;
    vertical-align: middle;
}

.member.level .rule-list li + li {
    margin-top: 10px;
}

.member.level .rule-list li b {
    font-weight: bold;
    text-decoration: underline;
    background: #df7c72;
    color: #fff;
    padding: 0 5px;
}

.member.level .rule-list li {
    display: flex;
    align-items: baseline;
}

.member.level .lv-list .item .txt-bonus {
    font-weight: bold;
    font-size: 18px;
}

.member.level .top-title {
    padding-left: 25%;
    display: flex;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-right: 30px;
}

    .member.level .top-title .icon svg {
        fill: #fff;
    }

    .member.level .top-title div {
        flex: 1 1 25%;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }

.member.level .lv-list .item > div .txt-alignL {
    text-align: left;
}

.member.level .content .note-area {
    color: #fff;
    margin-bottom: 30px;
}

.member.level .sec-son {
    color: #fff;
}

.member.level .ship-list {
    counter-reset: item;
    list-style-type: none;
    margin-bottom: 50px;
}

    .member.level .ship-list > li:before {
        content: counter(item, decimal-leading-zero) " ";
        counter-increment: item;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #869462;
        position: absolute;
        top: -15px;
        left: -15px;
    }

    .member.level .ship-list > li {
        border: 1px solid #fff;
        padding-top: 15px;
        border-radius: 10px;
        padding: 20px;
        position: relative;
    }

    .member.level .ship-list .st {
        font-size: 18px;
        font-weight: bold;
    }

    .member.level .ship-list > li + li {
        margin-top: 30px;
    }

    .member.level .ship-list .ex-area {
        background: #ff6969a8;
        padding: 10px;
        margin-top: 5px;
        color: #fff;
        border-radius: 10px;
    }

.sec-son + .sec-son {
    margin-top: 80px;
}

.member.level .main {
    margin-bottom: 50px;
}

.member.index .txt-welcome {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

    .member.index .txt-welcome .point {
        color: #ff2d2d;
        font-size: 30px;
    }

    .member.index .txt-welcome .icon {
        background: url(../images/member/bg_lv.jpg) no-repeat;
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        vertical-align: middle;
        margin: 0 10px;
    }

        .member.index .txt-welcome .icon.icon-white {
            background: url(../images/member/bg_lv2.jpg) no-repeat;
            background-size: cover;
        }

        .member.index .txt-welcome .icon.icon-pink {
            background: url(../images/member/bg_lv3.jpg) no-repeat;
            background-size: cover;
        }

    .member.index .txt-welcome .icon {
        width: 90px;
        height: 90px;
        margin: 0 20px 0 0;
        display: block;
        flex-shrink: 0;
    }

        .member.index .txt-welcome .icon img {
            width: 90px;
        }

.member.index .login-group {
    display: flex;
    margin: 20px 0;
}

    .member.index .login-group > * {
        width: 50%;
    }

    .member.index .login-group .left-info {
        /* align-self: center;*/
        display: flex;
        flex-direction: column;
    }

.member.index .txt-welcome .txt-en {
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
}

    .member.index .txt-welcome .txt-en:after {
        content: "";
        display: block;
        height: 1px;
        width: 2em;
        background: #fff;
        margin: 20px 0 40px;
    }

.member.index .txt-welcome .d-lv {
    display: flex;
    align-items: center;
    margin: 10px 0 40px;
}

.member.index .btn-logout {
    color: #fff;
    display: table;
    padding: 5px 10px;
}

    .member.index .btn-logout:hover {
        background: #67b868;
    }



    .member.index .btn-logout .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 40px;
    }
/*.member.level .content .note-area:before {
        content: "＊＊";
        display: inline-block;
        flex-shrink: 0;
        line-height: 0;
        font-size: 35px;
        letter-spacing: -11px;
        vertical-align: middle;
        margin:0 5px;
    }
    .member.level .content .note-area:after {
        content: "＊＊";
        display: inline-block;
        flex-shrink: 0;
        line-height: 0;
        font-size: 35px;
        letter-spacing: -11px;
        vertical-align: middle;
        margin: 0 5px;
    }*/
/*----------------------------------------- order --------------------------------------*/
table.table.tb-order tr th {
    padding: 15px 5px;
}

table.table.tb-order .input-group.date {
    width: 100%;
}

table.table tr td a.btn-search {
    margin: auto;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #98b06f;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.order ul.invoice-note,
body.order .order-list {
    counter-reset: item;
}

body.order .invoice-note li + li {
    margin-top: 30px;
}

body.order .invoice-note li .title:before,
body.order .order-list .stB:before {
    content: counter(item, decimal-leading-zero) " ";
    counter-increment: item;
    width: 58px;
    height: 58px;
    display: inline-block;
    vertical-align: middle;
    background: #cacda4;
    text-align: center;
    line-height: 58px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}

body.order .invoice-note .title,
body.order .order-list .stB {
    display: flex;
    border-bottom: 1px solid #cacda4;
    margin-bottom: 15px;
    align-items: center;
    font-size: 18px;
}

.welcome {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px 0;
}

    .welcome .icon {
        width: 50px;
        height: 50px;
        background: #cacda4;
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .welcome .btn-logout {
        background: #e9724c;
        color: #fff;
        padding: 3px 15px;
        display: inline-block;
    }

        .welcome .btn-logout:hover {
            background: #EA9010;
        }

.order-info .order-no {
    color: #98b06f;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

    .order-info .order-no li {
        width: 50%;
    }

    .order-info .order-no h4 {
        color: #000;
        margin: 0 0 5px;
    }

.order-info table.table.tb-order-info tr td {
    padding: 0;
    text-align: center;
    border: 1px solid #fff;
    vertical-align: top;
    padding-bottom: 15px;
}

    .order-info table.table.tb-order-info tr td .title {
        background: #cacda4;
        display: block;
        padding: 15px;
        margin-bottom: 15px;
    }

.order-list .sec.needs .box {
    border: 3px dashed #d4e1b6;
    padding: 15px;
}

div[id*="gb-widget"] {
    bottom: 10% !important;
}


/*----------------------------------------- orderMethod --------------------------------------*/

body.orderMethod h2 {
    text-align: center;
    border-bottom: 1px dashed #494949;
    padding-bottom: 21px;
    margin-bottom: 60px;
    font-weight: 600;
}

body.orderMethod .about_description h3 span {
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    padding-right: 7px;
    letter-spacing: 2px;
    color: #385c24;
}

body.orderMethod .about_description h3 {
    margin-bottom: 20px;
    font-weight: 600;
}

body.orderMethod .about_description {
    margin: 60px auto 0;
    display: table;
}

    body.orderMethod .about_description .arrow {
        margin: 50px auto;
        display: table;
    }

    body.orderMethod .about_description h2 {
        text-align: center;
        border-bottom: 1px dashed #494949;
        padding-bottom: 21px;
        margin-bottom: 60px;
        font-weight: 600;
    }

    body.orderMethod .about_description ul {
        line-height: 40px;
        font-size: 18px;
        color: #545454;
    }

        body.orderMethod .about_description ul li.k1 {
            text-indent: -16PX;
            margin-left: 16px;
        }

        body.orderMethod .about_description ul li .time {
            color: #fe4f26;
        }

    body.orderMethod .about_description .checkout {
        border-radius: 10px;
        border: 1px solid #e4e4e4;
        padding: 22px;
        margin-left: -40px;
        border-top: 5px solid #385c24;
    }

        body.orderMethod .about_description .checkout .remind {
            font-size: 18px;
        }

            body.orderMethod .about_description .checkout .remind > span {
                color: #fe4f26;
                display: block;
                padding-bottom: 8px;
                padding-top: 20px;
            }

body.orderMethod .freight {
    border-top: 1px dashed #9e9e9e;
    text-align: center;
    margin-top: 50px;
    padding: 30px;
    font-size: 18px;
}

body.orderMethod .ord a {
    position: absolute;
    right: 15px;
    top: 11px;
}

body.orderMethod .ord:hover {
    opacity: 0.8;
}

body.orderMethod .ord a {
    color: #fff;
    padding: 11px 15px 10px 43px;
    font-size: 16px;
    background: url(../images/order/dialogue.png) no-repeat left #fe4f26;
    background-position-x: 9px;
}

body.orderMethod .ord2 {
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    padding: 22px;
    border-top: 5px solid #385c24;
    background-color: #fffef2;
}

    body.orderMethod .ord2 a {
        color: #000;
    }

        body.orderMethod .ord2 a:hover {
            color: #fe4f26;
        }

    body.orderMethod .ord2 ul {
        border-bottom: 1px dashed #c7c7c7;
        margin-bottom: 30px;
    }

        body.orderMethod .ord2 ul li > ul {
            padding-left: 34px;
            border: none;
        }

    body.orderMethod .ord2 p {
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 600;
        color: #000;
    }

    body.orderMethod .ord2 h4 {
        line-height: 32px;
        font-size: 18px;
    }

        body.orderMethod .ord2 h4 > span {
            display: block;
        }

    body.orderMethod .ord2 .x1 {
        font-weight: 600;
        color: #395d25;
    }

    body.orderMethod .ord2 .note_e,
    body.orderMethod .ord2 .make_up {
        color: #fe4f26;
    }

        body.orderMethod .ord2 .note_e span {
            font-weight: bold;
        }


/*----------------------------------------- about ------------------------------------*/


/*body.about .main_content > .container {
    width: 100%;
	padding-right:0;
	padding-left:0;
}
body.about .main_content {
    padding: 0;
}
body.about .about_box {
	position:relative;
	display:block;
	transition: all .5s ease;
    -webkit-animation: ani-tipsNormal 1s ease both;
    animation: ani-tipsNormal 1s ease both;
}
body.about .about_bg{
	background-color:#eff4e5;	
}
body.about .about_box > .container,
body.about .a_history > .container {
	width:1300px;
}
body.about .about_box .a_box01{
	display:block;
	padding:120px 0;
	text-align:center;
	display:block;
	position:relative;
	margin:0 auto;
}
body.about .about_box .a_box01 .a_logo{
	display:block;
	position:relative;
}
body.about .about_box .a_pic{
	display:block;
	position:relative;
}
body.about .about_box .a_pic img{
	margin:0 auto;
}
body.about .about_box .a_box01 .a_mainword.title{
	margin: 50px 0 30px 0;
}
body.about .about_box .a_box01 .a_mainword{
	text-align:center;
	color:#919b67;
	font-size: 20px;
	line-height: 64px;
	letter-spacing: 0.05em;
	margin:30px 0;
	display:block;
	position:relative;
}
body.about .about_box .a_box01 .a_leftword{
	text-align:left;
	color:#919b67;
	font-size:20px;
	line-height:60px;
	padding-top:30px;
}*/


/*history*/


/*body.about .a_history{
    background-color: #fff;
    margin-bottom: 110px;
    display: block;
    clear: both;
}
body.about .history-area {
    max-width: 700px;
    margin: 50px auto;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}
body.about .history-area:before {
    content: "";
    position: absolute;
    width: 2px;
    transform: translateX(-50%);
    left: 50%;
    top: 0;
    bottom: 0px;
    background-color: #70ad47;
}
body.about .history-area:after {
    content: "";
    position: absolute;
    width: 24px;
	height:38px;
    transform: translateX(-50%);
    left: 50%;
    bottom: -30px;
    background: url(../images/about/icon_arrow.png) no-repeat;
}
.event-list {
    position: relative;
}
.event-list:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    top: calc(50% - 4px);
    transform: translateX(-50%);
    background-color: #70ad47;
    border-radius: 50%;
    background-color: #70ad47;
    z-index: 10;
}
.event-list:after {
    content: "";
    width: 23px;
    height: 23px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 50%);
}
.event-img,
.event-list:nth-child(even) .event-img {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    left: 0;
    width: 50%;
    padding-right: 50px;
    text-align: right;
}
.event-info {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    padding-left: 50px;
    text-align: left;
    transform: translateY(-50%);
}
.event-info .date {
    font-size: 28px;
    line-height: 30px;
    color: #70ad47;
    margin-bottom: 10px;
	letter-spacing:0.2em;
}
.event-info p {
    margin: 0;
	font-size:16px;
	color:#70ad47;
}*/


/*媒體報導*/


/*body.about .news_title {
	font-size:34px;
	line-height:40px;
	color:#61a430;
	text-align:center;
	padding:90px 0 50px 0;
	display:block;
	letter-spacing:0.1em;
}
    body.about .news_title .txt-tw::after {
        content: " ";
    }
body.about .mbox{
	display:block;
	position:relative;
	margin:20px auto;
}
body.about .news_main{
	padding-top: 40px;
}
body.about .news_main ul li{
	font-size:16px;
	line-height:40px;
	display:block;
	list-style:none;
	color:#61a430;
	letter-spacing:0.1em;
}
    body.about .news_main ul li span.date::after {
        content: " — ";
    }
body.about .news_main.left ul,
body.about .news_main.right ul{
	margin-top:70px;
}
body.about .news_main.right,
body.about .news_main.right01{
	padding-left:60px;
}
body.about .news_main.right01::before,
body.about .news_main.right::before{
	content:"";
	position:absolute;
	width:35px;
	height:250px;
	background: url(../images/about/parentheses_righ.png) no-repeat;
	left:0;
	top:35px;
}
body.about .news_main.left::after{
	content:"";
	position:absolute;
	width:35px;
	height:250px;
	background: url(../images/about/parentheses_left.png) no-repeat;
	right:0;
	top:25px;
}
body.about .video_box {
	width:550px;
	height:315px;
}*/


/*-----------------------------------------------------------------------------------*/

body.about2 .main_content > .container {
    width: 100%;
}

body.about2 .main_content {
    padding: 0;
}

body.about2 .about_box {
    margin: 0 -15px;
}

    body.about2 .about_box > div {
        background-color: #eff4e5;
    }

        body.about2 .about_box > div:nth-child(even) {
            background-color: #fff;
        }

    body.about2 .about_box img.img-responsive {
        margin: 0 auto;
    }

body.about2 .about-us {
    color: #919b67;
    font-size: 20px;
    text-align: center;
    padding: 120px 0;
}

    body.about2 .about-us .word {
        text-align: center;
        color: #919b67;
        line-height: 64px;
        letter-spacing: 0.05em;
        margin: 50px 0;
        display: block;
        position: relative;
    }

        body.about2 .about-us .word.title {
            margin: 90px 0 50px 0;
            line-height: 36px;
        }

    body.about2 .about-us .d-flex {
        flex-wrap: wrap;
    }

        body.about2 .about-us .d-flex > div {
            width: 50%;
            padding-left: 15px;
            padding-right: 15px;
        }

        body.about2 .about-us .d-flex .info {
            justify-content: center;
            /*align-items: center;*/
            text-align: left;
            color: #919b67;
            font-size: 20px;
            line-height: 60px;
        }

body.about2 .about-time .history {
    max-width: 1270px;
    margin: 50px auto;
    position: relative;
    padding: 20px 0;
}

    body.about2 .about-time .history:before {
        content: "";
        position: absolute;
        width: 2px;
        transform: translateX(-50%);
        left: 50%;
        top: 0;
        bottom: 0px;
        background-color: #70ad47;
    }

    body.about2 .about-time .history:after {
        content: "";
        position: absolute;
        width: 24px;
        height: 38px;
        transform: translateX(-50%);
        left: 50%;
        bottom: -30px;
        background: url(../images/about/icon_arrow.png) no-repeat;
    }

body.about2 .about-time .item.d-flex > div {
    width: 50%;
}

body.about2 .about-time .item.d-flex {
    flex-wrap: wrap;
}

    body.about2 .about-time .item.d-flex:nth-child(odd) {
        flex-direction: row-reverse;
    }

    body.about2 .about-time .item.d-flex:nth-child(even) .pic {
        padding-right: 50px;
    }

    body.about2 .about-time .item.d-flex:nth-child(even) .info {
        padding-left: 50px;
        text-align: left;
    }

    body.about2 .about-time .item.d-flex:nth-child(odd) .pic {
        padding-left: 50px;
    }

    body.about2 .about-time .item.d-flex:nth-child(odd) .info {
        padding-right: 50px;
        text-align: right;
    }

body.about2 .about-time .item:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    top: calc(50% - 4px);
    transform: translateX(-50%);
    background-color: #70ad47;
    border-radius: 50%;
    background-color: #70ad47;
    z-index: 10;
}

body.about2 .about-time .item:after {
    content: "";
    width: 23px;
    height: 23px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 50%);
}

body.about2 .about-time .info {
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

    body.about2 .about-time .info .date {
        font-size: 28px;
        line-height: 30px;
        color: #70ad47;
        margin-bottom: 10px;
        letter-spacing: 0.2em;
    }

    body.about2 .about-time .info p {
        margin: 0;
        font-size: 16px;
        color: #70ad47;
    }

body.about2 .about-news {
    padding-bottom: 20px;
}

    body.about2 .about-news .title {
        font-size: 34px;
        line-height: 40px;
        color: #61a430;
        text-align: center;
        padding: 90px 0 50px 0;
        display: block;
        letter-spacing: 0.1em;
    }

    body.about2 .about-news .mbox.d-flex > div {
        width: 50%;
    }

    body.about2 .about-news .mbox.d-flex {
        flex-wrap: wrap;
    }

    body.about2 .about-news .mbox + .mbox {
        margin-top: 40px;
    }

    body.about2 .about-news .mbox.d-flex:nth-child(odd) {
        flex-direction: row-reverse;
    }

    body.about2 .about-news .mbox .info.d-flex {
        position: relative;
        justify-content: center;
        align-items: center;
    }

        body.about2 .about-news .mbox .info.d-flex::before,
        body.about2 .about-news .mbox .info.d-flex::after {
            content: "";
            position: absolute;
            width: 35px;
            height: 250px;
        }

    body.about2 .about-news .mbox:nth-child(even) .info.d-flex {
        justify-content: flex-start;
        text-align: left;
        padding-left: 60px;
    }

    body.about2 .about-news .mbox:nth-child(even) .video-box {
        padding-right: 15px;
    }

    body.about2 .about-news .mbox:nth-child(even) .info.d-flex::before {
        background: url(../images/about/parentheses_righ.png) no-repeat;
        left: 15px;
    }

    body.about2 .about-news .mbox:nth-child(odd) .info.d-flex {
        justify-content: flex-end;
        text-align: right;
        padding-right: 60px;
    }

    body.about2 .about-news .mbox:nth-child(odd) .video-box {
        padding-left: 15px;
    }

    body.about2 .about-news .mbox:nth-child(odd) .info.d-flex::before {
        background: url(../images/about/parentheses_left.png) no-repeat;
        right: 15px;
    }

    body.about2 .about-news .mbox .info ul {
        list-style: none;
    }

    body.about2 .about-news .info ul li {
        font-size: 15px;
        line-height: 40px;
        display: block;
        list-style: none;
        color: #61a430;
        letter-spacing: 0.1em;
    }

        body.about2 .about-news .info ul li .date:after {
            content: " — ";
        }

        body.about2 .about-news .info ul li .ps {
            display: block;
        }

.footer .siteinfo ul > li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

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


/*------------------------------------- 品牌故事 ------------------------------------*/

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

body.about .about_bg01 {
    background: url(../images/about/about_bg01.jpg) repeat-y center;
    display: block;
    position: relative;
    clear: both;
    padding: 20px 0 40px 0;
}

body.about .about_bg02 {
    background: #f9faf2;
    display: block;
    position: relative;
    clear: both;
    padding: 150px 0;
}

body.about .about_box {
    padding: 0 160px;
}

body.about .a_box01 {
    display: flex;
    margin-bottom: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

body.about .about_box .a_maintitle {
    font-size: 56px;
    color: #95a976;
    line-height: 80px;
    padding-left: 40px;
    font-family: "Yeseva One" !important;
    font-style: italic !important;
}

body.about .about_box .a_maintitle02 {
    text-align: center;
    font-family: "Yeseva One" !important;
    color: #81827c;
    font-style: italic !important;
    font-size: 30px;
    line-height: 50px;
    padding: 30px 0;
}

body.about .about_box .a_leftbox {
    margin-top: 80px;
}

body.about .about_box .a_lefttitle {
    font-size: 46px;
    color: #95a976;
    line-height: 70px;
    font-family: "Yeseva One" !important;
    font-style: italic !important;
    padding-bottom: 30px;
}

body.about .about_box .history-area > .a_lefttitle {
    padding-top: 20px;
}

body.about .a_leftword {
    line-height: 34px;
    font-size: 20px;
    color: #888;
    font-weight: 600;
}

body.about .about_bg02 .a_pic,
body.about .about_bg03 .a_pic {
    margin: 0 auto;
    display: block;
    text-align: center;
}

    body.about .about_bg02 .a_pic::before {
        content: "";
        position: absolute;
        background: url(../images/about/about_line.jpg) no-repeat center;
        left: -30px;
        right: 0;
        top: 10px;
        display: block;
        width: 35px;
        height: 450px;
    }

body.about .about_bg03 .a_pic {
    border-right: 1px solid #9aa583;
    position: relative;
}

    body.about .about_bg03 .a_pic::before {
        background-color: #9aa583;
        width: 1px;
        height: 550px;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
    }

body.about .about_bg03 .event-list {
    text-align: left;
    padding-left: 10px;
}

body.about .about_bg03 .history-area {
    padding: 0 0 0 80px;
    position: relative;
}

    body.about .about_bg03 .history-area::after {
        background-color: #9aa583;
        width: 1px;
        height: 550px;
        content: '';
        position: absolute;
        right: 10%;
        top: 0;
    }

body.about .about_bg03 .event-list ul li {
    list-style: none;
    line-height: 46px;
    font-size: 22px;
    color: #888;
}

body.about .a_lefttitle02 {
    font-size: 46px;
    color: #95a976;
    line-height: 80px;
    font-family: "Yeseva One" !important;
    padding-bottom: 40px;
    padding-top: 50px;
    text-align: center;
}


/* ----------------------------------------關於我們 history ----------------------------------*/

body.about .about_bg03 {
    background: #f4f8df;
    display: block;
    position: relative;
    clear: both;
    padding: 150px 0;
}


/*--------------------------------------- video --------------------------------*/

body.about .about_bg04 {
    background: #F9FAF1;
    height: auto;
    position: relative;
    float: left;
    /* display: block;*/
    display: flex;
    clear: both;
    flex-direction: column;
}

body.about .mbox,
body.about .mbox > .col-lg-4 {
    padding-left: 0px;
    padding-right: 0px;
}

body.about .mbox,
body.about .video_list {
    /*display: block;*/
    display: flex;
    position: relative;
    clear: both;
    margin-bottom: 20px;
}

    body.about .video_list ul {
        list-style: none;
        padding-top: 30px;
        text-align: left;
        padding-left: 10%;
    }

        body.about .video_list ul li,
        body.about .video_list ul li a {
            color: #888;
            font-size: 16px;
            display: block;
        }

        body.about .video_list ul li {
            background: url(../images/about/icon_flower.jpg) no-repeat left top;
            line-height: 30px;
            padding-left: 25px;
        }

body.about .a_pic02 {
    padding-left: 0px;
    padding-right: 0px;
}

    body.about .a_pic02 img {
        border-bottom: 10px solid #9db881;
        width: 100%;
    }


/*----------------------------------------- wid --------------------------------------*/

.content .wid {
    position: relative;
    z-index: 10;
}


/* wid-home-news */

.content .wid-home-news {
    margin-left: 0;
}

    .content .wid-home-news .txt-list {
        margin-bottom: 10px;
        margin-top: -10px;
    }

        .content .wid-home-news .txt-list li {
            padding-left: 14px;
            background-position: 0 4px;
            background-color: transparent;
        }

            .content .wid-home-news .txt-list li:last-child {
                border-bottom: 2px solid #ACE7EB;
            }

            .content .wid-home-news .txt-list li a {
                padding: 2px 0;
                font-size: 13px;
            }

                .content .wid-home-news .txt-list li a span {
                    padding: 3px 0;
                    font-size: 12px;
                }


/* wid-home-product */

.content .wid-home-product .bxslider li a {
    border: 1px solid #ACE7EB;
    padding: 2px;
    display: block;
}

    .content .wid-home-product .bxslider li a:hover {
        border-color: #36B9C0;
    }

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

    .content .wid-home-product .bx-wrapper .bx-controls-direction a.bx-prev {
        left: -24px;
    }

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


/* wid-home-contact */

.content .wid-home-contact ul li {
    color: #717171;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.8;
}

    .content .wid-home-contact ul li.phone {
        font-size: 22px;
        color: #333;
        font-weight: bold;
    }


/* body.home.is_scroll .main, body.home.is_scroll .footer{
        z-index: 40;
    } */

body.home .main {
    pointer-events: none;
}

body.home .home-news a,
.home-pro .item a {
    pointer-events: auto;
}

.tip-point {
    font-weight: bold;
    padding: 15px;
    text-align: center;
    color: #e0777c;
}

    .tip-point .icon {
        background: #e0777c;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        line-height: 30px;
        color: #fff;
        margin-right: 5px;
        position: relative;
    }

        .tip-point .icon:before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            border: 1px solid #fff;
            border-radius: 50%;
        }

    .tip-point b {
        font-size: 20px;
        border-bottom: 2px solid;
        line-height: normal;
        margin: 0 5px;
    }

table.table.tb-style tr td.td-color {
    background: #e0777c;
    color: #fff;
}

.txt-link {
    color: #98b06f;
    text-decoration: underline;
}

.add-more .sum .sum-group ul {
    padding-top: 15px;
}

.add-more .sum .sum-group .total:not(.collapsed) .caret {
    transform: scaleY(-1);
}

span.txt-blue {
    color: #2081C3;
}

span.txt-gray {
    color: #7e7e7e;
}

.footer ul.wd-list > li + li {
    margin-top: 10px;
}

.footer .footer_content .icon {
    font-weight: bold;
    margin-right: 10px;
}

.footer .icon i {
    /*font-weight: bold;
    -webkit-text-stroke: 1px*/
}

.footer .siteinfo ul > li, .footer ul.wd-list > li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.footer ul.wd-list > li {
    justify-content: flex-end;
}

.footer .social-list a {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
}

.footer .social-list li {
    vertical-align: middle;
}

.footer .social-list .icon_l a {
    background: #06c052;
}

.footer .social-list .icon_f a {
    background: #1674ea;
}

.footer .social-list .icon_i a {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    ;
}

body.cart .payDiv {
    padding: 0 15px;
}

body.login .member-form h3 {
    text-align: center;
    margin: 0 auto 20px;
}
/*新增區塊*/
body.home .footer .ex-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

    body.home .footer .ex-list .item {
        padding: 0;
    }

        body.home .footer .ex-list .item > div {
            display: flex;
            position: relative;
            min-height: 220px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }

            body.home .footer .ex-list .item > div .icon {
                margin-bottom: 15px;
                border-bottom: 1px solid #fff;
                transition: all .5s;
            }
        /* body.home .footer .ex-list .item a:hover .icon{
                height:0;
                opacity:0;
                border:none;
                margin:0;
            } */
        body.home .footer .ex-list .item div .icon > * {
            font-size: 45px;
            color: #fff;
        }

        body.home .footer .ex-list .item > div .wd {
            position: relative;
            z-index: 5;
            color: #fff;
            text-align: center;
        }

        body.home .footer .ex-list .item > div .pic-bg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: all .5s;
        }

        body.home .footer .ex-list .item > div .wd p {
            line-height: normal;
            font-weight: bold;
        }

        body.home .footer .ex-list .item div .wd p b {
            font-size: 18px;
        }

        body.home .footer .ex-list .item > div .wd p + p {
            margin-top: 0.8em;
        }

        body.home .footer .ex-list .item > div .pic-bg:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: .5;
            background: #000;
            transition: all .5s;
            z-index: 5;
        }
        /* body.home .footer .ex-list .item a:hover .pic-bg:before{
                opacity:0.2;
            } */
        body.home .footer .ex-list .item > div .pic-bg img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: all .5s;
        }
        /* body.home .footer .ex-list .item a:hover .pic-bg img {
                filter: blur(1px) grayscale(1);
            } */

        body.home .footer .ex-list .item:nth-child(2) > div {
            background: #cacda4;
        }

        body.home .footer .ex-list .item:nth-child(4) > div {
            background: #98b06f;
        }

        body.home .footer .ex-list .item div .wd small {
            margin-top: 30px;
            display: block;
        }

.product .pro-list .g-pic {
    position: relative;
}

.product .pro-list .link-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: 0;
    transition: all .5s;
}

.product .pro-list .g-pic:hover .link-info {
    opacity: 1;
}

.product .pro-list .link-info .d-flex {
    justify-content: center;
    align-items: center;
}

.product .pro-list .link-info a {
    text-align: center;
    margin: 0 10px;
    flex-grow: 1;
}

    .product .pro-list .link-info a .icon {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        color: #fff;
        font-size: 20px;
        display: flex;
        background: #98b06f;
        align-items: center;
        justify-content: center;
        margin: 0 auto 5px;
        border: 1px solid #98b06f;
    }

    .product .pro-list .link-info a:nth-child(1) .icon {
        border: 1px solid #98b06f;
        color: #98b06f;
        background: none;
    }

    .product .pro-list .link-info a:hover .icon {
        border: 1px solid #e9724c !important;
        background: #e9724c !important;
        color: #fff;
    }

    .product .pro-list .link-info a:hover {
        color: #e9724c;
    }


.product .pro-list .g-pic:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    backdrop-filter: blur(2px);
    z-index: 5;
    transition: all .5s;
}

.product .pro-list .g-pic:hover:before {
    opacity: .7;
}

.product .pro-list .link-info a p {
    transform: translateY(-100%);
    opacity: 0;
    transition: all .5s;
    line-height: 0;
    color: #98b06f;
}

.product .pro-list .link-info a:hover p {
    transform: translateY(0);
    opacity: 1;
    line-height: 1;
    color: #e9724c;
}

.floating-cart {
    position: fixed;
    top: 180px;
    min-width: 300px;
    right: 0.625em;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 0 0.625em #d9d9d9;
    padding: 15px;
    min-width: 300px;
    max-width: 40%;
}

    .floating-cart .cart-list {
        max-height: calc(100vh - 233px);
        overflow-y: auto;
    }

        .floating-cart .cart-list .item {
            display: flex;
            padding: 5px 10px 5px 5px;
        }

    .floating-cart .pic {
        width: 120px;
    }

    .floating-cart .info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 15px;
    }

        .floating-cart .info .pro-name {
            color: #98b06f;
            font-weight: bold;
        }

        .floating-cart .info .d-price {
            display: flex;
            justify-content: space-between;
        }

    .floating-cart .d-btn {
        border-top: 1px solid #ccc;
        padding-top: 10px;
        margin-top: 10px;
    }

    .floating-cart .btn-checkout {
        display: block;
        text-align: center;
        background: #e0777c;
        border-radius: 5px;
        padding: 10px;
        color: #fff;
    }

        .floating-cart .btn-checkout:hover {
            background: #e9724c;
        }

    .floating-cart .cart-list::-webkit-scrollbar {
        width: 0.5em;
    }

    .floating-cart .cart-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
        background: rgba(255, 255, 255, 0.65);
    }

    .floating-cart .cart-list::-webkit-scrollbar-thumb {
        background-color: #cacda4;
    }

/*fullmoon*/
body.fullmoon .social-list {
    margin: 0;
    height: 0;
}

    body.fullmoon .social-list .icon_l a {
        background: #06c052;
        position: fixed;
        left: 20px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 20px;
        color: #fff;
    }

    body.fullmoon .social-list li:not(.icon_l) {
        display: none;
    }

body.product.p02.fullmoon #fullpage .section .inner .left-info:before {
    display: none;
}

.pos-absolute {
    position: absolute;
}

body.product.p02.fullmoon #fullpage .s1 .bgB {
    top: 50%;
    left: 0;
    right: 0;
    mix-blend-mode: lighten;
    transform: translateY(200px);
    transition: all 1s;
    transition-delay: .5s;
    opacity: 0;
}

body.product.p02.fullmoon #fullpage .s1 .bgC {
    top: 20%;
    left: 0;
    right: 0;
    transform: rotateX(90deg);
    transform-style: preserve-3d;
    transition: all 1s;
    transition-delay: .5s;
}

body.product.p02.fullmoon #fullpage .inner .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-position: center;
}

body.product.p02.fullmoon #fullpage .s1 .left-info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

body.product.p02.fullmoon #fullpage .s1 .g-info {
    position: relative;
    z-index: 5;
}

body.product.p02.fullmoon #fullpage .s1 .g-pic {
    transition: all 1s;
    transform: scale(0.8);
    max-width: 700px;
    width: 80%;
    margin: 0 auto 50px;
}

    body.product.p02.fullmoon #fullpage .s1 .g-pic .pic-photo2 {
        top: 0;
        left: 0;
    }

body.product.p02.fullmoon #fullpage .s1.fp-completely .bgB {
    transform: translateY(0);
    opacity: 1;
}

body.product.p02.fullmoon #fullpage .s1.fp-completely .bgC {
    transform: rotateX(0);
}

body.product.p02.fullmoon #fullpage .s1.fp-completely .g-pic {
    transform: scale(1);
}

body.product.p02.fullmoon #fullpage .inner .g-info {
    position: relative;
    z-index: 5;
}

body.product.p02.fullmoon #fullpage .inner .wd {
    font-family: "Yeseva One";
}

body.product.p02.fullmoon #fullpage .s1 .wd {
    text-align: center;
}

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

body.product.p02.fullmoon #fullpage .inner h3.h3 {
    color: #d86784;
    font-weight: bold;
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 30px;
}

body.product.p02.fullmoon #fullpage .section:not(.s3) .inner .wd p {
    font-size: 20px;
    line-height: 1.5em;
}

body.product.p02.fullmoon #fullpage .section .inner {
    overflow: hidden;
}

body.product.p02.fullmoon #fullpage .s2 .left-info {
    display: flex;
    height: 100vh;
    align-items: flex-end;
}

    body.product.p02.fullmoon #fullpage .s2 .left-info .wd {
        padding: 0 50px;
        margin-bottom: 55px;
    }

body.product.p02.fullmoon #fullpage .s2 .pic-list .item {
    max-height: 220px;
    overflow: hidden;
}

body.product.p02.fullmoon #fullpage .s2 .pic-list {
    margin: 30px 0;
}

    body.product.p02.fullmoon #fullpage .s2 .pic-list .item img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

body.product.p02.fullmoon #fullpage .s3 .left-info {
    height: 100vh;
}

body.product.p02.fullmoon #fullpage .s3 .g-info {
    height: 100%;
    padding: 50px;
    justify-content: space-between;
    align-items: center;
}

    body.product.p02.fullmoon #fullpage .s3 .g-info .g-pic {
        padding: 0 5%;
    }

body.product.p02.fullmoon #fullpage .s3 .g-pic {
    width: 40%;
}

body.product.p02.fullmoon #fullpage .s3 .wd {
    width: 55%;
    overflow-y: auto;
}

body.product.p02.fullmoon .header .navbar:before {
    content: "";
    background: rgb(230,184,184);
    background: linear-gradient(180deg, rgba(230,184,184,1) 0%, rgba(230,184,184,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

body.product.p02.fullmoon #fullpage .s3 .g-pic .tt {
    display: flex;
    font-weight: bold;
    align-items: center;
    margin: 30px 0;
}

    body.product.p02.fullmoon #fullpage .s3 .g-pic .tt span {
        flex-shrink: 0;
        margin: 0 10px;
        font-size: 20px;
    }

    body.product.p02.fullmoon #fullpage .s3 .g-pic .tt:after, body.product.p02.fullmoon #fullpage .s3 .g-pic .tt:before {
        content: "";
        width: 100%;
        height: 1px;
        background: #000;
    }

body.product.p02.fullmoon #fullpage .s3 .g-pic .pic-list {
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin: 0 -10px;
}

    body.product.p02.fullmoon #fullpage .s3 .g-pic .pic-list .pic {
        margin: 0 10px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        background: #dedac1;
        padding: 5px;
        border: 1px solid #fff;
        color: #fff;
        font-size: 18px;
    }

body.product.p02.fullmoon #fullpage .s3 .txt-list .tt {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
}

body.product.p02.fullmoon #fullpage .s3 .txt-list .item {
    margin-bottom: 30px;
    font-size: 20px;
}

    body.product.p02.fullmoon #fullpage .s3 .txt-list .item .note {
        font-size: 16px;
        margin-top: 10px;
    }

    body.product.p02.fullmoon #fullpage .s3 .txt-list .item ul li + li {
        margin-top: 10px;
    }

body.product.p02.fullmoon #fullpage .s3 .inner .bg, body.product.p02.fullmoon #fullpage .s4 .inner .bg {
    filter: blur(3px);
}

body.product.p02.fullmoon #fullpage .s3 .bg:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 40%;
    background: #fff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 10;
    transition: all 1s ease;
    transition-delay: 1.5s;
    pointer-events: none;
}

body.product.p02.fullmoon #fullpage .s4 .inner .left-info {
    height: 100%;
}

body.product.p02.fullmoon #fullpage .s4 .form-box {
    width: 60%;
    margin: 30px auto;
    padding: 30px;
    max-height: calc(100% - 50px);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.6);
    overflow-y: auto;
}

    body.product.p02.fullmoon #fullpage .s4 .form-box .d-form {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 15px 0;
        margin: 15px 0;
    }

        body.product.p02.fullmoon #fullpage .s4 .form-box .d-form .tt {
            margin-bottom: 5px;
        }

    body.product.p02.fullmoon #fullpage .s4 .form-box label {
        margin-bottom: 5px;
    }

    body.product.p02.fullmoon #fullpage .s4 .form-box .form-control {
        background: #fff;
    }

body.product.p02.fullmoon #fullpage .s4 .btn-box {
    margin: 0;
}

    body.product.p02.fullmoon #fullpage .s4 .btn-box a {
        display: block;
        padding: 15px;
        text-align: center;
        background: #e89c84;
        color: #fff;
    }

        body.product.p02.fullmoon #fullpage .s4 .btn-box a:hover {
            background: #e9724c;
        }

    body.product.p02.fullmoon #fullpage .s4 .btn-box ul {
        display: flex;
        margin: 0 -10px;
    }

        body.product.p02.fullmoon #fullpage .s4 .btn-box ul li {
            width: calc(50% - 20px);
            padding: 0;
            margin: 0 10px;
        }

body.product.p02.fullmoon #uploader #uploaderCont #dragandrophandler {
    background: #fff;
    height: auto;
    min-height: 0;
    border: none;
    padding: 10px;
}

body.product.p02.fullmoon #uploader {
    padding: 0;
}

#uploader #uploaderCont .row.fileQueue > div.remove .btn {
    background: #e4c4b9;
    padding: 6px 12px;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
}

body.product.p02.fullmoon #uploader #uploaderCont .row.fileQueue > div {
    flex-grow: 1;
}

body.product.p02.fullmoon #uploader #uploaderCont .row.fileQueue {
    padding: 10px 0;
    border-bottom: 1px solid #fff;
    opacity: 0;
    display: flex;
    justify-content: space-between;
}

body.product.p02.fullmoon #uploader #uploaderCont .submit {
    margin-top: 10px;
    justify-content: flex-end;
}

    body.product.p02.fullmoon #uploader #uploaderCont .submit .btn {
        display: block;
        /* width: 100%; */
        border: none;
        background: #e9724c;
        margin: 0 0 0 auto;
        /* display: table; */
        box-shadow: none;
    }

body.product.p02.fullmoon #uploader #uploaderCont #dragandrophandler label {
    color: #e9724c;
    margin: 0;
}

body.product.p02.fullmoon #uploader #uploaderCont #dragandrophandler svg {
    width: 100px;
    height: 3.3em;
    opacity: 0.12;
    margin-bottom: 7px;
    margin: 10px 0;
}

p.txt-red {
    color: #f00;
}
/*大宗訂購*/
.orderForm .main {
    background: #faf7f2;
}

.orderForm .preface {
    justify-content: center;
    align-items: center;
}

    .orderForm .preface .icon {
        font-size: 50px;
        color: #cacda4;
    }

    .orderForm .preface p {
        border-left: 1px solid #cacda4;
        margin-left: 30px;
        padding-left: 30px;
    }

        .orderForm .preface p b {
            font-size: 18px;
        }

.orderForm .d-form {
    width: 80%;
    margin: 30px auto;
    border-bottom: 1px solid #000;
}

    .orderForm .d-form div[class*="col"] {
        border-top: 1px solid #d1d9a8;
        padding: 15px;
    }

    .orderForm .d-form .form-control {
        background: #fff;
    }

.header_ex {
    z-index: 9990;
}

.mt-1 {
    margin-top: 10px;
}

body.product.p02.fullmoon #menu .menu-list > li {
    float: none;
}

.input-code img {
    max-height: 34px;
}
/*下拉樣式*/
.header .navbar-nav > li > .dropdown-menu {
    border-radius: 5px;
    border: none;
    background: #98b06f;
    /*        min-width: 0;
        right: 0;
        left: 0;*/
    min-width: 0;
    right: auto;
    left: auto;
    text-align: center;
    padding: 5px;
    width: 100%;
}

    .header .navbar-nav > li > .dropdown-menu a {
        color: #fff;
    }

        .header .navbar-nav > li > .dropdown-menu a:hover {
            color: #fff;
            background: #cacda4;
            border-radius: 5px;
        }

.cust-button {
    display: flex;
    justify-content: flex-end;
}

    .cust-button img {
        width: 20px;
    }

.code-activity {
    margin-bottom: 10px;
}

    .code-activity .form-control {
        background: #fff;
    }



.checkbox input[type=checkbox] {
    top: 50%;
    transform: translateY(-50%);
    margin: 0 0 0 -20px;
}

.sec-txt {
    width: 80%;
    margin: 20px auto;
    border-top: 1px solid #d1d9a8;
    padding-top: 20px;
}

    .sec-txt .txt-list {
        display: flex;
        flex-wrap: wrap;
        /* margin: 0 -15px; */
        background: rgba(255, 255, 255, 0.7);
        padding: 25px;
        border-radius: 45px;
    }

        .sec-txt .txt-list .st {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            background: url(../images/about/icon_flower.jpg) no-repeat left top;
            padding-left: 25px;
        }

        .sec-txt .txt-list li:last-child .st {
            color: #eb493b;
        }

        .sec-txt .txt-list .stB {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #e0777c;
        }
        /* .sec-txt .txt-list .st:before {
        content: "";
        width: 6px;
        height: 6px;
        background: #cacda4;
        border-radius: 50%;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
    }
  .sec-txt .txt-list li:not(:last-child){
        width: calc(50% - 23px);
        background: rgba(255, 255, 255, 0.7);
        
        padding: 15px;
        border-radius: 15px;
    } */
        .sec-txt .txt-list li {
            margin: 0 10px 15px;
        }

            .sec-txt .txt-list li:last-child {
                width: 100%;
                margin-top: 20px;
            }

                .sec-txt .txt-list li:last-child .g-flex {
                    justify-content: space-between;
                }


        .sec-txt .txt-list .txt-note {
            font-size: 100%;
            color: #98b06f;
        }

    .sec-txt .btn-dl {
        background: #98b06f;
        color: #fff;
        font-weight: bold;
        padding: 15px 30px;
        border-radius: 5px;
        display: table;
        margin: 30px auto;
    }

        .sec-txt .btn-dl i {
            opacity: .5;
            margin-left: 10px;
        }

        .sec-txt .btn-dl:hover {
            background: #EA9010;
        }

    .sec-txt .txt + .txt {
        margin-top: 15px;
    }

    .sec-txt .txt-list li:last-child .g-flex .g-txt {
        padding-right: 30px;
    }

.footer .social-list .icon_f a svg {
    width: 9px;
}

/* ++ */
.Ez .main_content .container-fluid {
    padding: 0;
}
/* ++ */
.EzFlex {
    display: flex;
    flex-direction: row;
    margin: 0;
    justify-content: flex-end;
}
/* ++ */
.Ez .dropdown-toggle::after {
    display: none;
}
/* ++ */
.Ez .list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
/* ++ */
.Ez .collapse:not(.show) {
    display: unset;
}
/* ++ */
.Ez .hidden {
    display: none !important;
}
/* ++ */
.Ez ul {
    padding: 0;
}
/* ++ */
.footer .Ez-nav {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* ++ */
.footer .wd-list {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
/* ++ */
.open > .dropdown-menu {
    display: block;
    position: absolute;
}
/* ++ */
.Ez .sider_nav .collapse:not(.show),
.Ez .collapse-effect .collapse:not(.show) {
    display: none;
}
/* ++ */
.checkbox.Ez-revise input[type=checkbox] {
    transform: translateY(-5%);
}
/* ++ */
.Ez .radio-box .radio-inline.radio-revise input[type=radio],
.Ez .radio-box .radio .radio-revise input[type=radio],
.Ez .radio-box .radio-inline .radio-revise input[type=radio] {
    transform: unset;
}

.Ez .add-more .sum .sum-group .total .caret {
    display: inline-block;
}

.btn-shallow {
    background-color: #d4e1b6;
    border-color: #d4e1b6;
}

    .btn-shallow:hover {
        background-color: #e8e8e8;
        color: #333333;
        border-color: #333333;
    }

/* ++ */
.Ez .input-group-addon.icon.datepicker2 {
    padding: 12px;
}

/* ++ */

.Ez-panel.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
/* ++ */
#datepicker_div .panel-default {
    border: 1px solid #ddd;
    border-radius: 5px;
}
    /* ++ */
    #datepicker_div .panel-default > .panel-heading {
        background-color: #f5f5f5;
    }
/* ++ */
#datepicker_div .panel-heading {
    padding: 5px;
}
/* ++ */
#datepicker_div .EzContent {
    display: contents;
    padding: 0;
}
/* ++ */
#datepicker_div p.starspan {
    display: inline;
    float: left;
    color: blue;
    font-weight: bold;
}
/* ++ */
#datepicker_div .panel-body {
    padding: 20px;
}
/* ++ */
#datepicker_div {
    /*    position: absolute;
    z-index: 999;*/
    text-align: center;
    background-color: #fff;
}
    /* ++ */
    #datepicker_div .DateBox {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* ++ */
    #datepicker_div .btn-link {
        color: #000;
    }
    /* ++ */
    #datepicker_div .DateDisable .btn-link {
        color: transparent;
    }
    /* ++ */
    #datepicker_div .btn {
        padding: 0px;
    }
    /* ++ */
    #datepicker_div .form-control {
        height: 30px;
    }
    /* ++ */
    #datepicker_div .DateSelect .btn-link .DateDay {
        color: #fff;
    }
    /* ++ */
    #datepicker_div .onselect {
        color: blue;
    }
    /* ++ */
    #datepicker_div .disabled {
        color: gray;
    }
    /* ++ */
    #datepicker_div .form-control.DateDrop {
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    /* ++ */
    #datepicker_div .close {
        float: right;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .2;
    }
/* ++ */
.rule-list, .ship-list {
    flex-direction: column;
}

.social-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

    .social-list li {
        margin: 0 5px;
    }

.footer .terms li:not(:last-child),
.footer .terms li a {
    margin: 0 5px;
}

.exclude-info ul {
    display: flex;
    flex-direction: row;
}

.custom-width {
    min-width: 165px;
}

.Ez .navbar > .revise-container.container-fluid {
    flex-wrap: nowrap;
}
/*lowfun*/
.about02 {
    font-size: 18px;
}
.about02  p{
        line-height: 34px;

}
.about02 .sec-sb{
    position: relative;
    height: 450px;
    overflow: hidden;
}
.about02 .sec-sb .jarallax img {
    object-fit: cover;
    height: 100%!important;
    width: 100%;
    filter: blur(5px);
    transform: scale(1.05);
}

.about02 .sec-sb .pic-logo{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width: 200px;
}
.about02 h3.h3{
    font-family: "Yeseva One" !important;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 40px;
}
.about02 h3.h3 span.txt-en{
    display: block;
    font-size: 66px;
    margin-bottom: 15px;
    line-height: 1;
    letter-spacing: 0.5rem;
    color: #7f5977;
}
.about02 .sec{
    padding-top:5vw;
    padding-bottom: 5vw;
}
.about02 .sec1{
    padding-left:4vw;
    padding-right: 4vw;

}
.about02 .sec1 .flex-sec1{
    justify-content: space-between;
}
.about02 .sec1 .flex-sec1 .r-info{
    flex-grow: 1;
    padding-left: 10%;
}
.about02 .sec1 .flex-sec1 .r-info .txt p+p {
    margin-top: 2em;
}
.about02 .sec2 .flex-sec2>*{
    width:50%;
}
.about02 .sec2 .flex-sec2 .l-info .flex-pic{
    width:85%;
}
.about02 .sec-sb .jarallax{
    height: 100%;
}
.about02 .sec2 .flex-pic img{
    width:50%;
}
.about02 .sec2 .flex-sec2 .r-info{
    padding-left: 15%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    padding-right: 4vw;

}
.about02 .sec2 .flex-sec2 .r-info .pic{
    max-width: 700px;
}
.about02 .sec2 .flex-sec2 .l-info .g-div{
    padding-left: 4vw;
}
.about02 .sec2 .flex-sec2 .r-info .g-div .pic-logo{
    margin: 7vw 0 0 auto;
    text-align: right;
}
.about02 .sec2 h3.h3 {
    margin-top: -20px;
}
.about02 .sec2 .award-list li{
    display: flex;
}
.about02 .sec2 .award-list li +li{
    margin-top: 60px;
}
.about02 .sec2 .award-list li .award-title{
    /* background: url(../images/about/icon_award.png) no-repeat; */
    width: 170px;
    /* height: 120px; */
    /* display: flex; */
    color: #fff;
    /* align-items: center; */
    /* justify-content: center; */ 
    flex-shrink: 0;
    font-weight: bold;
    font-size: 30px;
    margin-right: 40px;
  
}
.about02 .sec2 .award-list li .award-title small{
    display: block;
    font-size: 16px;
}
.about02 .sec2 .award-list li .milk-name{
    color:#a69fbe;
    font-size: 25px;
    font-weight: bold;  
    margin-bottom: 30px; 
}
.about02 .sec2 .flex-sec2 .r-info .g-div{
    height: 80%;
    display: flex;
    flex-direction: column;
}



.about02 .sec2 .flex-sec2 .r-info:before {
    content: "";
    position: absolute;
    right: 0;
    width: 40%;
    top: 0;
    /* bottom: 30%; */
    background: #A69FC0;
    /* z-index: 5; */
    height: 50%;
}
.about02 .sec2 .flex-sec2 .r-info .jarallax.pic{
    flex-grow: 1;
}
.about03 .row-menu .l-info{
    padding:0 5% 5% 0;
    position: relative;
}
.about03 .row-menu .spic{
    width: 60%;
    position: absolute;
    right:0;
    bottom:0;
}
.about03 .row-menu .txt{
    background:#a69fbe;
    color:#000;
    padding:30px;
}
.about03 .inner-box{
    max-width:1400px;
    margin:auto;
}
.about03 .flex-menuTitle .l-info{
    width:60%;
}
.about03 .flex-menuTitle .r-info{
    align-self: center;
}
.about03 .flex-menuTitle .tt {
    letter-spacing: 3px;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    position: relative;
    z-index: 5;
}
.about03 .flex-menuInfo{
    position: relative;
}
.about03 .flex-menuInfo:before{
    content:"";
    background: #A69FC0;
    position: absolute;
    left:-9999px;
    right:0;
    bottom:0;
    top:-5vw;
    z-index: -1;


}
.about03 .flex-menuInfo .r-info{
    width:40%;
}
.about03 .flex-menuInfo .r-info .spic{
    margin-top:-5vw;
    margin-bottom: 5vw;
}
.about03 div[class*="flex-menu"] >*{
    flex-grow: 1;
}
.about03 .flex-menuInfo .txt-en{
    font-family: "Great Vibes", cursive;
    font-size: 150px;
    position: absolute;
    bottom: 100%;
    right: 20px;
    line-height: 1;
    transform: rotate(-17deg);
    color: #d4c8ff;
}
.about03 .flex-menuInfo .l-info{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.about03 .flex-menuInfo .l-info ul{
    font-size: 18px;
        margin: 4vw 0;
}
.about03 .flex-menuInfo .l-info ul li+li{
    margin-top:15px;
}
.about03 .flex-menuInfo .l-info ul li .st{
    margin-bottom: 5px;
    font-size: 20px;
}
.about03 .flex-menuInfo .l-info ul li .txt-award {
    background: #d9ae69;
    display: table;
    padding: 0 15px;
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

.about03 .flex-menuInfo .l-info ul li .st b {
    margin-right: 2em;
    min-width: 5em;
    display: inline-block;
}
.about03 .sec-menuList  .list-item:nth-child(3) .flex-menuInfo  .l-info  ul li .st b {
    min-width: 9em; 
}
.about03 .flex-menuInfo .l-info ul li p{
    opacity: .7;;
}

.about03 .sec-menuList .list-item:nth-child(even) div[class*="flex-menu"]{
    flex-direction: row-reverse;
}
.about03 .sec-menuList .list-item:nth-child(even) .txt-en{
    right:auto;
    left:20px;
}.about03 .sec-menuList .list-item:nth-child(even) .flex-menuInfo:before{
    right:-9999px;
    left:0;
    opacity: .7;
}
.about03 .sec-menuList .txt-note{
    font-size: 18px;
    color: #fff;
    padding: 0 30px;
}
.about03 .ex-list {
    display: flex;
        margin: 5vw 0;
    background: #eee;
}
.ex-list .pic {
    width: 30%;
    overflow: hidden;
}
.ex-list .pic img{
    object-fit: cover;
    height: 100%!important;
    width:100%;
}
.ex-list .info{
    padding:15px 30px;
        width: 70%;
}
.ex-list .info small{
    display: block;
}
.ex-list .info .st{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
}
.ex-list .info li+li{
    margin-top:5px;
}
.about03 .ex-list .list-item {
    display: flex;
}
.about03 .social-list{
    justify-content: center;
    font-size: 40px;
    margin-bottom: 5vw;
}
.about03 .social-list li{
    margin:0 30px;
}
.about03 .social-list li.icon_i a:hover{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, 
              #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* for Chrome/Safari */
  background-clip: text;

}
.about03 .social-list li.icon_l a:hover{
color: #06c052;
}

.about03 .social-list li.icon_f a:hover{
color: #1974ec;
}
.about03 .d-social .st {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}
.d-social .st:after {
    content: "";
    width: 1px;
    height: 1em;
    background: #ccc;
    display: block;
    margin: 10px auto;
}
.about03 .flex-menuTitle .l-info .pic img{
    object-fit: cover;
    height: 100%!important;
    width:100%;
}
/*history*/
body.about .sec-history .history-list{
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

body.about .sec-history .history-list .list-item{
    display: flex;
    padding:30px;
    position: relative;
        width: 100%;

    
}
body.about .sec-history .history-list:before {
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    right: -30px;
    background: #ccc;
    display: block;
    height: 1px;
}
.history-list .year{
    font-family: "Yeseva One" !important;
    font-size: 60px;
    text-align: center;
    line-height: 1;
    color: #cacda4;
    position: relative;
    margin-right: 40px;
}
.history-list .year:before {
    content: "";
    position: absolute;
    bottom: calc(100% + 22px);
    width: 16px;
    height: 16px;
    border: 2px solid #cacda4;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: #f4f8df;
        box-shadow: 0 0 0 14px #cacda466;
}
.history-list .info{

}
.history-list .month{
    font-family: "Yeseva One" !important;
    font-size: 20px;
}

body.about .sec-history {
    background: #f4f8df;
    display: block;
    position: relative;
    clear: both;
    padding: 150px 0 ;
}
.pin-spacer {
    padding:30px 0 150px !important;
}


.history-tt {
    font-size: 46px;
    color: #95a976;
    line-height: 70px;
    margin-bottom: 40px;
    font-family: "Yeseva One" !important;
    font-style: italic !important;
    padding: 0 5vw;
}

.history-list .info ul {
    flex-wrap: nowrap;
    justify-content: space-around;
        height: 100%;
}


.history-list .info li {
    min-width: 150px;
    margin-right: 30px;
    min-width: 300px;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.history-list .info li  .month-tt-wrap{
    flex-grow: 1;
        height: 100%;
}
.history-list .info li .pic{
    margin-top:10px;
    flex-grow: 1;
}
.history-list .info li .pic img{
        max-width: 150px;
        width:100%;

}
.history-list .info .tt{
    color: #888;
    font-size: 16px;

}



.preface p {
    line-height: 34px;
    font-size: 18px;
    color: #888;
    font-weight: 600;
    text-align: center;
}
.w-auto .fancybox-content{
    width: auto;
}
.fancybox-style .red{
    background: #ff2d2d;
    color: #fff;
    display: block;
    padding: 5px;
}

/*history 穎 滾動效果*/
.ab_box.history_box {
    background: #f4f8df;
    display: block;
    position: relative;
    clear: both;
    /*padding: 150px 0;*/
}

    .ab_box.history_box .serve_fx {
        position: relative;
        display: flex;
        /*margin-left: 5%;*/
        padding: 0 0 0 160px;
    }

    .ab_box.history_box .serve_fx .serve_left {
        /*width: 50%;
        z-index: 10;
        position: sticky;
        height: 900px;
        top: 70px;
        padding-right: 10%;*/
    }

        .ab_box.history_box .serve_fx .serve_left .a_lefttitle {
            font-size: 46px;
            color: #95a976;
            line-height: 70px;
            font-family: "Yeseva One" !important;
            font-style: italic !important;
            padding-bottom: 30px;
        }

        .ab_box.history_box .serve_fx .serve_left .a_leftword {
            font-size: 20px;
        }
        
    /*.ab_box.history_box .serve_fx .serve_right .tit h2 span {
        display: block;
        font-weight: 400;
        font-size: 26px;
    }*/

    .ab_box.history_box .serve_fx .serve_right .tit h2 {
        font-weight: bold;
        font-size: 36px;
        /*padding-left: 30px;*/
        padding-top: 5%;
        /*color: #fff;*/
        color: #888;
        /*text-align: center;*/
        letter-spacing: 2px;
    }

        .ab_box.history_box .serve_fx .serve_right .tit .ser_nb {
            /*font-size: 120px;
            font-weight: bold;
            line-height: normal;*/
            font-family: "Yeseva One" !important;
            font-size: 32px;
            /*text-align: center;*/
            line-height: 1;
            /*color: #cacda4;*/
            color: #fff;
            position: relative;
            /*margin-right: 40px;*/
        }

        .ab_box.history_box .serve_fx .serve_right .tit .ser_nb span {
            font-size: 32px;
        }

        .ab_box.history_box .serve_fx .serve_right .tit {
            position: absolute;
            left: 3%;
            top: 3%;
            z-index: 10;
            /*display: flex;
        width: 100%;*/
            text-shadow: 5px 5px 15px rgba(0,0,0,.1);
        }

        .ab_box.history_box .serve_fx .serve_right .tit_2 {
            position: absolute;
            left: 3%;
            bottom: 3%;
            z-index: 10;
            color: #fff;
            text-shadow: 5px 5px 15px rgba(0,0,0,.1);
        }

.ab_box.history_box {
    margin-top: 0;
}

    .ab_box.history_box .serve_left {
        height: auto;
        top: 0;
        margin-top: 150px;
        flex: 1;        
    }

        .ab_box.history_box .serve_left .h2 {
            font-size: 76px;
        }

    .ab_box.history_box .serve_right {
        width: 50%;
        scroll-snap-type: y mandatory;
        overflow-y: auto;
        /*height: 100vh;*/
        height: 700px;
        padding-top: 100px;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

        .ab_box.history_box .serve_right > div {
            display: flex;
            flex-direction: column;
            align-items: end;
        }

        .ab_box.history_box .serve_right::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        .ab_box.history_box .serve_right .item { /* 每個區塊吸附對齊開始處 */
            scroll-snap-align: center;
            position: relative;
            width: 90%;
            margin: 0;
            opacity: .3;
            transition: all 0.6s ease;
            border-radius: 50px 0 0 50px;
            overflow: hidden;
        }

            .ab_box.history_box .serve_right .item:nth-child(2n) {
                /*width: 90%;*/
            }

            .ab_box.history_box .serve_right .item.active {
                opacity: 1;
                width: 100%;
            }

/* ✅ 觸控裝置下取消吸附與動畫 */
body.touch-device .ab_box.history_box .serve_right {
    scroll-snap-type: none;
    scroll-behavior: auto;
    margin-top: 50px;
    padding-top: 0;
}

    body.touch-device .ab_box.history_box .serve_right .item {
        scroll-snap-align: none;
        opacity: 1;
        transition: none;
    }

.ab_box.history_box .serve_right .item .pic {
    /*height: 65vh;*/
    height: 350px;
    background-color: #cacda6;
    /*background-color: #93a979;*/
    /*background-color: rgba(255,255,255,.7);*/
    z-index: 1;
    position: relative;
    transition: 1s;
}
    .ab_box.history_box .serve_right .item .pic.pic_h {
        height: 420px;
    }

    .ab_box.history_box .serve_right .item .pic.pic_h2 {
        height: 480px;
    }

    .ab_box.history_box .serve_right .item.active .pic {
        background-color: #93a979;
    }

    .ab_box.history_box .serve_right .item .pic::before {
        content: "";
        background: url(../images/all/logo3.svg) no-repeat center center;
        background-size: auto 80%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: .1;
        z-index: -1;
    }

    .ab_box.history_box .serve_right .item .pic img {
        object-fit: cover;
        width: 100% !important;
        height: 100% !important;
        opacity: .6;
    }

.ab_box.history_box .serve_fx .serve_right .tit {
    left: 10%;
    right: 10%;
    /*bottom: 10%;*/
    top: 15%;
}

.ab_box.history_box .serve_fx .serve_right .tit_2 {
    /*line-height: 1.4;*/
    font-size: 38px;
    font-weight: bold;
    left: 5%;
    right: 5%;
    bottom: 15%;
}

    .ab_box.history_box .serve_fx .serve_right .tit_2 ul {
        list-style: none;
        padding-top: 30px;
        text-align: left;
        padding-left: 5%;
        margin-bottom: 0;
    }

        .ab_box.history_box .serve_fx .serve_right .tit_2 ul li {
            background: url(../images/all/logo3.svg) no-repeat left 6px;
            background-size: 30px auto;
            line-height: 1.1;
            padding-left: 35px;
            /*color: #888;*/
            margin-top: 20px;
        }

.ab_box.history_box .dot-indicator { /*右側圓點*/
    position: absolute;
    top: 50%;
    /*right: 20px;*/
    /*left: 0;*/
    right: 50%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1;
    transform: translateY(-50%);
}

    .ab_box.history_box .dot-indicator .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.5);
        transition: background-color 0.3s ease;
    }

        .ab_box.history_box .dot-indicator .dot.active {
            background-color: #fff;
            border: 3px solid #89d7ad;
            box-shadow: 0 0 0px 2px #fff;
        }


    .ab_box.history_box .dot-indicator .year-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        /*background-color: rgba(255,255,255,0.5);*/
        background-color: #cacda6;
        border: 2px solid #fff;
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
        position: relative;
    }

        .ab_box.history_box .dot-indicator .year-dot.active {
            background-color: #fff;
            border-color: #93a979;
            box-shadow: 0 0 0 2px #fff;
            transform: scale(1.08);
        }

        .ab_box.history_box .dot-indicator .year-dot:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px #fff, 0 0 0 6px #89d7ad;
        }


/* 一排：年份文字在右、圓點在左 */
.ab_box.history_box .dot-indicator {
    gap: 10px;
}

    .ab_box.history_box .dot-indicator .year-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    /* 年份文字樣式 */
    .ab_box.history_box .dot-indicator .year-label {
        font-size: 13px;
        color: #93a979;
        opacity: .7;
        user-select: none;
        cursor: pointer;
        transition: opacity .2s ease, transform .2s ease;
    }

        .ab_box.history_box .dot-indicator .year-label:hover {
            opacity: .9;
        }

        .ab_box.history_box .dot-indicator .year-label.active {
            font-weight: 700;
            opacity: 1;
        }
        /*location*/
        .son-about.about03 .location-list .box{
            justify-content: space-between;
        }

        .son-about.about03 .location-list .box .l-info{
            display: flex;
            width:50%;
        }
        .son-about.about03 .location-list .box .l-info .g-storeInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
                flex-grow: 1;
        }

        .son-about.about03 .location-list .box .l-info .no-store{
            display: flex;
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            margin-right: 30px;
            padding-right: 30px;
            border-right: 1px solid #ccc;
            letter-spacing: 2px;
            font-weight: bold;
        }
        .son-about.about03 .location-list .box .r-info{
            width:35%;
        }
        .son-about.about03 .location-list .box .r-info .pic-store{
            overflow: hidden;
                height: 100%;
        }
        .son-about.about03 .location-list .box .r-info .pic-store img{
            object-fit: cover;
            height: 100%!important;
            width:100%;
            object-position: center;
        }
        .son-about.about03 .sec {
            padding-top: 5vw;
            padding-bottom: 5vw;
        }
        .son-about.about03 .location-list .list-item+.list-item{
            margin-top:7vw;
        }        
        .son-about.about03 .location-list .list-item .map{
            width:100%;
            margin-top:40px;

        }        
        .son-about.about03 .location-list .list-item .map iframe{
            width:100%;
            display: flex;
             height: 100%;
        }
        .son-about.about03 .location-list .box ul li{
            margin-bottom: 10px;
            background: url(../images/about/icon_flower.jpg) no-repeat left top;
            padding-left: 30px;
        }
        .son-about.about03 .location-list .g-intro{
            margin-top: 6vw;
            padding: 5vw;
            background: #f4f8df;
            /* background: url(../images/all/logo3.svg) no-repeat #f4f8df left 10% bottom -59%;
            background-size: auto 80%; */
           
        }
        .son-about.about03 .location-list .g-intro .flex-intro>*{
            width: 50%;
        }
        .son-about.about03 .location-list .g-intro .flex-intro .l-info{
        display: flex;
    flex-direction: column;
    justify-content: space-between;

        }


        .son-about.about03 .location-list .g-intro .g-pic{
            display: flex;
        }
        .son-about.about03 .location-list .g-intro .g-pic a{
            display: block;
        }
        .son-about.about03 .location-list .g-intro .g-pic a+a{
                margin-left: 15px;
        }
        .son-about.about03 .location-list .g-intro .txt-intro{
            padding-left: 5%;
        }
        .about03 p{
            line-height: 1.8;
            font-size: 16px;
        }
        .about03 h3.h3{
            font-family: "Yeseva One" !important;
            font-weight: bold;
            font-size: 30px;
            margin-bottom: 40px;
        }
        .about03 h3.h3 span.txt-en{
            display: block;
            font-size: 66px;
            margin-bottom: 15px;
            line-height: 1;
            letter-spacing: 0.5rem;
            color: #95a976;
        }
        .about03 .txt-bold{
            font-weight: bold;
            font-size: 18px;
            color: #95a976;
        }
        .about03 .txt-notice {
            background: #fe4f26;
            display: table;
            margin: 20px 0 0 0;
            padding: 5px 15px;
            color: #fff;
        }
        body.orderMethod .about_description ul li {
            display: flex;
        }
        .login .login-area .checkbox input[type=checkbox]{
            margin:0;
        }