body, .bg {
    /*background-image: url(../images/bg_img.jpg);*/
    background-color:#fff;
    background-position: center center, center center;
    background-repeat: repeat, repeat;
}



.topnav {
    overflow: hidden;
    /*background-color: #333;*/
}

    .topnav a {
        float: left;
        display: block;
        color: #000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 16px;
    }

.active {
    /*background-color: #04AA6D;*/
    color: #000;
    /*border-bottom: 2px solid #ffc107;*/
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: #000;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-size:15px;

    }

.topnav a:hover, .dropdown:hover .dropbtn {
    color: #000;
    border-bottom: 2px solid #ffc107;

}

.dropdown-content a:hover {

    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdown {
            float: none;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}

.banner-bg {
    position: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: bottom;
    height: 500px;
}

.mask_img {
    height: 250px;
    width: calc(100% + 98px);
    background: url(../images/banner_mask04.png) no-repeat;
    margin-top: -170px;
    background-size: Contain;
}

.mask_img2 {
    height: 150px;
    width: calc(100% + 98px);
    background: url(../images/banner_mask05-1.png) repeat-x;
    background-size: cover;
    margin: -50px 0 0 -50px;
}


.featured_block {
    padding: 80px 0px 0px 0px;
    background: url(../images/bg_img04.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.recommend_block {
    content: "";

    width: 100%;
    background: url(../images/banner_mask05-1.png) no-repeat;
    background-size: cover;
    bottom: -100px;
}
    /*banner文字*/

    .logo {
    float: right;
    margin: 10px 20px 0 20px;
}

.menu {
    float: left;
    margin: 10px 0px 0 20px;
}
@media (max-width:1680px) {
    .mask_img {
        background-size: cover;
        background-position-x: 50%;
        background-position-y: 100%;
        width: 100%;
    }
}
@media (max-width:580px) {
    .mask_img {
        height: 230px;

        background: url(../images/banner_mask04.png) no-repeat;
        margin-top: -70px;
        /*background-size: Contain;*/
        overflow:hidden;
    }

    .mask_img2 {
        height: 150px;
        width: calc(100% + 98px);
        background: url(../images/banner_mask05-1.png) repeat-x;
        background-size: cover;
        margin: -50px 0 0 -50px;

    }

    }

/*footer*/
@media (min-width:990px) {
    .logo {
        float: left;
    }
    .menu {
        float: right;
        margin: 10px 30px 0 0;
    }
}

.accordion {
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    /*font-size: 15px;*/
    transition: 0.4s;
}

.menu_line {
    color: #444;
    font-size: 15px;
    cursor: pointer;
    padding: 5px 0px 5px 20px;
    width: 100%;
    transition: 0.4s;
}

.panel {
    padding: 0 18px 5px;
    display: none;

    overflow: hidden;
}

.categaty-w-bg {
    color: rgba(0, 0, 0, 0.8);
    animation-name: example;
    animation-duration: 2s;
}

.t-D-none {
text-decoration:none;
}

.p-menu {
padding:30px 10px 0 10px;
}

.txt1 {
    font-size: 50px;
    letter-spacing: 4px;
    font-family: 'Noto Sans TC', sans-serif;
    color: #553527;
    margin-top: 0px !important;
    font-weight: bold;
}

.txt2 {
    font-size: 15px;
    color: #888;
    line-height: 1.5;
    Letter-spacing: 1.5px;
}

.btn-cafe {
    color: #fff;
    background-color: #553527;
    border-color: #7a452d;
}

    .btn-cafe:hover {
        color: #fff;
        background-color: #a45e22;
        border-color: #553527;
    }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

.RWDmenu_plus02 ol, .RWDmenu_plus02 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

blockquote, q {
    quotes: none
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: '';
        content: none
    }

.RWDmenu_plus02 table {
    border-collapse: collapse;
    border-spacing: 0
}

*, ::after, ::before {
    box-sizing: border-box
}

html {
    font-size: 100%
}

body {
    font-size: 16px;
    font-family: sans-serif;
    color: #2e3233;
    background-color: #fff;
    font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,arial,verdana,helvetica,tahoma,Sans-serif
}

@media (max-width:1199px) {
    body.overflow-hidden {
        overflow: hidden
    }
}

.RWDmenu_plus02 a {
    color: #69aa6f;
    text-decoration: none
}

.RWDmenu_plus02 img {
    max-width: 100%
}

.RWDmenu_plus02 input {
    font-family: sans-serif;
    font-size: 1.6rem
}

    .RWDmenu_plus02 input[type=search]::-ms-clear {
        display: none
    }

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    display: none
}

header {
    position: relative !important;
    border-bottom: none !important
}

.cd-main-content, .cd-main-header {
    position: relative;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.cd-main-header {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform
}

.cd-main-header {
    position: relative;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

@media (max-width:1199px) {
    .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
        -webkit-transform: translateX(-260px);
        -moz-transform: translateX(-260px);
        -ms-transform: translateX(-260px);
        -o-transform: translateX(-260px);
        transform: translateX(-260px)
    }

    .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
        -webkit-transform: translateX(260px);
        -moz-transform: translateX(260px);
        -ms-transform: translateX(260px);
        -o-transform: translateX(260px);
        transform: translateX(260px)
    }

    .wrapper_bg.is-visible .cd-main-header {
        -webkit-transition: -webkit-transform .5s;
        transition: transform .5s
    }
}

.cd-main-content {
    z-index: 10
}

.cd-main-header {
    height: 50px;
    background: #fff;
    z-index: 11;
    left: 0
}

.nav-is-fixed .cd-main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

@media (min-width:1200px) {
    .cd-main-header {
        height: 80px
    }

        .cd-main-header::after {
            clear: both;
            content: "";
            display: table
        }
}

.cd-logo {
    position: absolute;
    top: 12px;
    left: 5%
}

    .cd-logo img {
        display: block
    }

@media (max-width:1199px) {
    .nav-on-left .cd-logo {
        left: auto;
        right: 5%
    }
}

@media (min-width:1200px) {
    .cd-logo {
        top: 26px;
        left: 4em
    }
}

.cd-header-buttons {
    position: absolute;
    display: inline-block;
    top: 3px;
    right: 5%;
    padding-left: 0
}

    .cd-header-buttons li {
        display: inline-block;
        margin-top: 2px
    }

@media (max-width:1199px) {
    .nav-on-left .cd-header-buttons {
        right: auto;
        left: 5%
    }

        .nav-on-left .cd-header-buttons li {
            float: right
        }
}

@media (min-width:1200px) {
    .cd-header-buttons {
        top: 18px;
        right: 4em
    }
}

.cd-nav-trigger, .cd-search-trigger {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    z-index: 3
}

    .cd-search-trigger::after, .cd-search-trigger::before {
        content: '';
        position: absolute;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .cd-search-trigger::before {
        top: 11px;
        left: 11px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 3px solid #2e3233
    }

    .cd-search-trigger::after {
        height: 3px;
        width: 8px;
        background: #2e3233;
        bottom: 14px;
        right: 11px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .cd-search-trigger span {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0
    }

        .cd-search-trigger span::after, .cd-search-trigger span::before {
            content: '';
            position: absolute;
            display: inline-block;
            height: 3px;
            width: 22px;
            top: 50%;
            margin-top: -3px;
            left: 50%;
            margin-left: -11px;
            background: #2e3233;
            opacity: 0;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: opacity .3s,-webkit-transform .3s;
            transition: opacity .3s,transform .3s
        }

        .cd-search-trigger span::before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .cd-search-trigger span::after {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

    .cd-search-trigger.search-is-visible::after, .cd-search-trigger.search-is-visible::before {
        opacity: 0
    }

    .cd-search-trigger.search-is-visible span::after, .cd-search-trigger.search-is-visible span::before {
        opacity: 1
    }

    .cd-search-trigger.search-is-visible span::before {
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg)
    }

    .cd-search-trigger.search-is-visible span::after {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
        position: absolute;
        display: inline-block;
        height: 3px;
        width: 24px;
        background: #2e3233
    }

    .cd-nav-trigger span {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -2px;
        -webkit-transition: background .3s .3s;
        transition: background .3s .3s
    }

        .cd-nav-trigger span::after, .cd-nav-trigger span::before {
            content: '';
            right: 0;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-origin: 0 50%;
            -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transition: -webkit-transform .3s .3s;
            transition: transform .3s .3s
        }

        .cd-nav-trigger span::before {
            top: -6px
        }

        .cd-nav-trigger span::after {
            top: 6px
        }

    .cd-nav-trigger.nav-is-visible span {
        background: rgba(46,50,51,0)
    }

        .cd-nav-trigger.nav-is-visible span::after, .cd-nav-trigger.nav-is-visible span::before {
            background: #2e3233
        }

        .cd-nav-trigger.nav-is-visible span::before {
            -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
            -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
            -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
            -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
            transform: translateX(4px) translateY(-3px) rotate(45deg)
        }

        .cd-nav-trigger.nav-is-visible span::after {
            -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
            -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
            -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
            -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
            transform: translateX(4px) translateY(2px) rotate(-45deg)
        }

@media (min-width:1200px) {
    .cd-nav-trigger {
        display: none
    }
}

.cd-primary-nav, .cd-primary-nav ul {
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    margin: 0;
    background: #2e3233;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 99;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s
}

    .cd-primary-nav ul::-webkit-scrollbar, .cd-primary-nav::-webkit-scrollbar {
        width: 5px
    }

    .cd-primary-nav ul::-webkit-scrollbar-track, .cd-primary-nav::-webkit-scrollbar-track {
        background: 0 0
    }

    .cd-primary-nav ul::-webkit-scrollbar-thumb, .cd-primary-nav::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 3px
    }

        .cd-primary-nav ul::-webkit-scrollbar-thumb:hover, .cd-primary-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,.6)
        }

    .cd-primary-nav a, .cd-primary-nav ul a {
        display: block;
        padding: 0 20px;
        color: #2d2d2d;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid #ececec;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform,opacity;
        -webkit-transition: -webkit-transform .3s,opacity .3s;
        transition: transform .3s,opacity .3s
    }

@media (max-width:1199px) {
    .cd-primary-nav a, .cd-primary-nav ul a {
        padding: 0;
        font-size: 16px
    }
}

.cd-primary-nav .cd-secondary-nav {
    display: none;
    width: 100%;
    max-width: 360px
}

    .cd-primary-nav .cd-secondary-nav ul li.active > a {
        background-color: #9c9c9c;
        color: #fff
    }

.cd-primary-nav.nav-is-visible .cd-secondary-nav a {
    height: 60px;
    line-height: 60px
}

.cd-primary-nav .social-select .cd-secondary-nav a * + span {
    margin-left: 15px
}

.cd-primary-nav ul.is-hidden, .cd-primary-nav.is-hidden {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

.cd-primary-nav ul.moves-out > li > a, .cd-primary-nav.moves-out > li > a {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform .3s,opacity .1s !important
}

@media (max-width:1199px) {
    .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul {
        right: auto;
        left: 0
    }
}

.cd-primary-nav .see-all a {
    color: #69aa6f
}

.cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item {
    height: 80px;
    line-height: 80px
}

    .cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
        overflow: hidden;
        text-overflow: ellipsis
    }

.cd-primary-nav .cd-nav-gallery .cd-nav-item {
    padding-left: 90px
}

    .cd-primary-nav .cd-nav-gallery .cd-nav-item img {
        position: absolute;
        display: block;
        height: 40px;
        width: auto;
        left: 20px;
        top: 50%;
        margin-top: -20px
    }

.cd-primary-nav .cd-nav-icons .cd-nav-item {
    padding-left: 75px
}

    .cd-primary-nav .cd-nav-icons .cd-nav-item p {
        color: #2e3233;
        font-size: 1.3rem;
        display: none
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item::before {
        content: '';
        display: block;
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -20px;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-1::before {
        background-image: url(img/line-icon-1.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-2::before {
        background-image: url(img/line-icon-2.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-3::before {
        background-image: url(img/line-icon-3.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-4::before {
        background-image: url(img/line-icon-4.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-5::before {
        background-image: url(img/line-icon-5.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-6::before {
        background-image: url(img/line-icon-6.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-7::before {
        background-image: url(img/line-icon-7.svg)
    }

    .cd-primary-nav .cd-nav-icons .cd-nav-item.item-8::before {
        background-image: url(img/line-icon-8.svg)
    }

@media (max-width:1199px) {
    .cd-primary-nav {
        visibility: hidden;
        -webkit-transition: visibility 0s .3s;
        transition: visibility 0s .3s;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        transition: all .5s
    }

        .cd-primary-nav.nav-is-visible {
            visibility: visible;
            -webkit-transition: visibility 0s 0s;
            transition: visibility 0s 0s;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }
}

@media (min-width:1200px) {
    .cd-primary-nav {
        position: static;
        padding: 0 150px 0 0;
        margin-bottom: 0;
        height: auto;
        width: auto;
        float: right;
        overflow: visible;
        background: 0 0
    }

        .cd-primary-nav::after {
            clear: both;
            content: "";
            display: table
        }

        .cd-primary-nav.moves-out > li > a {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
            opacity: 1
        }

        .cd-primary-nav ul {
            position: static;
            width: auto;
            background: 0 0;
            overflow: visible;
            z-index: 3
        }

            .cd-primary-nav ul.is-hidden {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            .cd-primary-nav ul.moves-out > li > a {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }

        .cd-primary-nav > li {
            float: left;
            margin-left: 3em
        }

            .cd-primary-nav > li > a {
                position: relative;
                display: inline-block;
                height: 80px;
                line-height: 80px;
                padding: 0 10px;
                color: #2e3233;
                overflow: visible;
                border-bottom: none;
                -webkit-transition: color .3s,box-shadow .3s;
                -moz-transition: color .3s,box-shadow .3s;
                transition: color .3s,box-shadow .3s;
                padding-left: 0;
                cursor: pointer
            }

                .cd-primary-nav > li > a:hover {
                    color: #9c9c9c
                }

                .cd-primary-nav > li > a.selected {
                    color: #9c9c9c;
                    box-shadow: inset 0 -2px 0 #69aa6f
                }

        .cd-primary-nav .go-back, .cd-primary-nav .see-all {
            display: none
        }

        .cd-primary-nav .cd-nav-gallery, .cd-primary-nav .cd-nav-icons, .cd-primary-nav .cd-secondary-nav {
            position: absolute;
            top: 80px;
            width: 100vw;
            background: #fff;
            padding: 48px 64px 130px;
            box-shadow: inset 0 1px 0 #e2e3df,0 3px 6px rgba(0,0,0,.05);
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }

            .cd-primary-nav .cd-nav-gallery::after, .cd-primary-nav .cd-nav-icons::after, .cd-primary-nav .cd-secondary-nav::after {
                clear: both;
                content: "";
                display: table
            }

            .cd-primary-nav .cd-nav-gallery > .see-all, .cd-primary-nav .cd-nav-icons > .see-all, .cd-primary-nav .cd-secondary-nav > .see-all {
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                height: 80px;
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 0
            }

                .cd-primary-nav .cd-nav-gallery > .see-all a, .cd-primary-nav .cd-nav-icons > .see-all a, .cd-primary-nav .cd-secondary-nav > .see-all a {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    font-size: 2.2rem;
                    font-weight: 700;
                    text-align: center;
                    line-height: 80px;
                    border-top: 1px solid #e2e3df;
                    border-bottom: none;
                    margin: 0;
                    padding: 0
                }

                    .cd-primary-nav .cd-nav-gallery > .see-all a:hover, .cd-primary-nav .cd-nav-icons > .see-all a:hover, .cd-primary-nav .cd-secondary-nav > .see-all a:hover {
                        background: #2e3233;
                        border-color: #2e3233;
                        color: #fff
                    }

            .cd-primary-nav .cd-secondary-nav > li {
                width: 23%;
                float: none;
                margin-right: 2.66%;
                overflow: hidden;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch
            }

                .cd-primary-nav .cd-secondary-nav > li:nth-child(4n+2) {
                    margin-right: 0;
                    border-right: none
                }

                .cd-primary-nav .cd-secondary-nav > li > a {
                    color: #69aa6f;
                    font-weight: 700;
                    font-size: 1.6rem;
                    margin-bottom: .6em
                }

            .cd-primary-nav .cd-secondary-nav a {
                padding: 0 18% 0 0;
                color: #2e3233;
                border-bottom: none;
                font-size: 1.4rem
            }

                .cd-primary-nav .cd-secondary-nav a:hover {
                    color: #9c9c9c
                }

            .cd-primary-nav .cd-secondary-nav ul {
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -ms-transform: translateZ(0);
                -o-transform: translateZ(0);
                transform: translateZ(0)
            }

                .cd-primary-nav .cd-secondary-nav ul ul {
                    position: absolute;
                    top: 0;
                    left: 100%;
                    width: 100%;
                    background: #fff;
                    box-shadow: 0 2px 10px rgba(43,43,43,.36);
                    display: none
                }

                    .cd-primary-nav .cd-secondary-nav ul ul .go-back {
                        display: none
                    }

                        .cd-primary-nav .cd-secondary-nav ul ul .go-back a {
                            color: transparent
                        }

                    .cd-primary-nav .cd-secondary-nav ul ul .see-all {
                        display: block
                    }

            .cd-primary-nav .cd-secondary-nav .moves-out > li > a {
                -webkit-transform: translateX(-100%);
                -moz-transform: translateX(-100%);
                -ms-transform: translateX(-100%);
                -o-transform: translateX(-100%);
                transform: translateX(-100%)
            }

            .cd-primary-nav .cd-nav-gallery li {
                width: 22%;
                float: left;
                margin: 0 4% 40px 0
            }

                .cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) {
                    margin-right: 0
                }

            .cd-primary-nav .cd-nav-gallery .cd-nav-item {
                border-bottom: none;
                padding: 0;
                height: auto;
                line-height: 1.2
            }

                .cd-primary-nav .cd-nav-gallery .cd-nav-item img {
                    position: static;
                    margin-top: 0;
                    height: auto;
                    width: 100%;
                    margin-bottom: .6em
                }

                .cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
                    color: #69aa6f;
                    font-weight: 700;
                    padding: 0 .4em
                }

            .cd-primary-nav .cd-nav-icons li {
                width: 32%;
                float: left;
                margin: 0 2% 20px 0
            }

                .cd-primary-nav .cd-nav-icons li:nth-child(3n+2) {
                    margin-right: 0
                }

            .cd-primary-nav .cd-nav-icons .cd-nav-item {
                border-bottom: none;
                height: 80px;
                line-height: 1.2;
                padding: 24px 0 0 85px;
                position: relative
            }

                .cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
                    background: #f6f6f5
                }

                .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
                    color: #69aa6f;
                    font-weight: 700
                }

                .cd-primary-nav .cd-nav-icons .cd-nav-item p {
                    display: block
                }

                .cd-primary-nav .cd-nav-icons .cd-nav-item::before {
                    left: 25px
                }
}

.cd-primary-nav .has-children {
    position: relative
}

.go-back a, .has-children > a {
    position: relative
}

    .go-back a::after, .go-back a::before, .has-children > a::after, .has-children > a::before {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -1px;
        display: inline-block;
        height: 2px;
        width: 7px;
        background: #464c4e;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .go-back a::before, .has-children > a::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .go-back a::after, .has-children > a::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

@media (min-width:1200px) {
    .go-back a::after, .go-back a::before, .has-children > a::after, .has-children > a::before {
        background: #c9cbc4
    }

    .go-back a:hover::after, .go-back a:hover::before, .has-children > a:hover::after, .has-children > a:hover::before {
        background: #69aa6f
    }
}

.has-children > a {
    padding-right: 40px
}

    .has-children > a::after, .has-children > a::before {
        right: 20px;
        -webkit-transform-origin: 7px 50%;
        -moz-transform-origin: 7px 50%;
        -ms-transform-origin: 7px 50%;
        -o-transform-origin: 7px 50%;
        transform-origin: 7px 50%
    }

.cd-primary-nav .go-back a {
    padding-left: 40px
}

    .cd-primary-nav .go-back a::after, .cd-primary-nav .go-back a::before {
        left: 20px;
        -webkit-transform-origin: 1px 50%;
        -moz-transform-origin: 1px 50%;
        -ms-transform-origin: 1px 50%;
        -o-transform-origin: 1px 50%;
        transform-origin: 1px 50%
    }

@media (min-width:1200px) {
    .has-children > a::after, .has-children > a::before {
        right: 8%
    }

    .cd-primary-nav > .has-children > a {
        padding-right: 30px !important
    }

        .cd-primary-nav > .has-children > a::after, .cd-primary-nav > .has-children > a::before {
            width: 7px;
            margin-top: 1px;
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            background: #c9cbc4;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: width .3s,-webkit-transform .3s;
            -moz-transition: width .3s,-moz-transform .3s;
            transition: width .3s,transform .3s
        }

        .cd-primary-nav > .has-children > a::before {
            right: 10px
        }

        .cd-primary-nav > .has-children > a::after {
            right: 5px
        }

        .cd-primary-nav > .has-children > a.selected::after, .cd-primary-nav > .has-children > a.selected::before {
            width: 12px;
            background-color: #fff
        }

        .cd-primary-nav > .has-children > a.selected::before {
            -webkit-transform: translateX(5px) rotate(-45deg);
            -moz-transform: translateX(5px) rotate(-45deg);
            -ms-transform: translateX(5px) rotate(-45deg);
            -o-transform: translateX(5px) rotate(-45deg);
            transform: translateX(5px) rotate(-45deg)
        }

        .cd-primary-nav > .has-children > a.selected::after {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .cd-secondary-nav > .has-children > a::after, .cd-secondary-nav > .has-children > a::before {
        display: none
    }

    .cd-primary-nav .go-back a {
        padding-left: 20px
    }

        .cd-primary-nav .go-back a::after, .cd-primary-nav .go-back a::before {
            left: 1px
        }
}

.cd-search {
    position: absolute;
    height: 50px;
    width: 100%;
    top: 50px;
    left: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s,visibility 0s .3s;
    -moz-transition: opacity .3s 0s,visibility 0s .3s;
    transition: opacity .3s 0s,visibility 0s .3s
}

    .cd-search form {
        height: 100%;
        width: 100%
    }

    .cd-search input {
        border-radius: 0;
        border: none;
        background: #fff;
        height: 100%;
        width: 100%;
        padding: 0 5%;
        box-shadow: inset 0 1px 0 #e2e3df,0 3px 6px rgba(0,0,0,.05);
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none
    }

        .cd-search input::-webkit-input-placeholder {
            color: #c9cbc4
        }

        .cd-search input::-moz-placeholder {
            color: #c9cbc4
        }

        .cd-search input:-moz-placeholder {
            color: #c9cbc4
        }

        .cd-search input:-ms-input-placeholder {
            color: #c9cbc4
        }

        .cd-search input:focus {
            outline: 0
        }

    .cd-search.is-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity .3s 0s,visibility 0s 0s;
        -moz-transition: opacity .3s 0s,visibility 0s 0s;
        transition: opacity .3s 0s,visibility 0s 0s
    }

.nav-is-fixed .cd-search {
    position: fixed
}

@media (min-width:1200px) {
    .cd-search {
        height: 120px;
        top: 80px
    }

        .cd-search input {
            padding: 0 2em;
            font-size: 3.2rem;
            font-weight: 300
        }
}

.cd-search.full {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    z-index: 99
}

    .cd-search.full.is-visible {
        z-index: 99999
    }

    .cd-search.full .search-in {
        max-width: 1170px;
        width: 100%;
        position: relative
    }

    .cd-search.full input {
        border-bottom: 1px solid #fff;
        height: auto;
        color: #fff;
        background: 0 0;
        width: 100%;
        font-size: 40px;
        padding: 0 220px 30px 40px;
        letter-spacing: 3px;
        box-shadow: inset 0 0 0 #e2e3df
    }

        .cd-search.full input::-webkit-input-placeholder {
            color: #fff
        }

        .cd-search.full input::-moz-placeholder {
            color: #fff
        }

        .cd-search.full input:-ms-input-placeholder {
            color: #fff
        }

        .cd-search.full input:-moz-placeholder {
            color: #fff
        }

    .cd-search.full .ibtn, .cd-search.full input {
        line-height: 1.5em
    }

    .cd-search.full .btn-box {
        position: absolute;
        top: 0;
        right: 20px
    }

    .cd-search.full .ibtn {
        font-size: 45px;
        position: static;
        padding: 0 20px;
        color: #fff
    }

        .cd-search.full .ibtn:focus {
            outline: 0
        }

    .cd-search.full .ii-search1:before {
        content: "\e918";
        font-family: iicon !important
    }

    .cd-search.full .ii-close1:before {
        content: "\e902";
        font-family: iicon !important
    }

    .cd-search.full .search-close-full {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        border: none;
        background: 0 0;
        width: 100%
    }

@media (max-width:992px) {
    .cd-search.full .btn-box {
        top: 5px
    }

    .cd-search.full .ibtn {
        font-size: 30px;
        padding: 0 15px
    }

    .cd-search.full input {
        font-size: 35px;
        padding: 0 144px 30px 40px
    }
}

@media (max-width:767px) {
    .cd-search.full {
        padding: 0 30px
    }

        .cd-search.full .btn-box {
            top: 2px;
            right: 0
        }

        .cd-search.full .ibtn {
            font-size: 20px;
            padding: 0 10px
        }

        .cd-search.full input {
            font-size: 21px;
            letter-spacing: 0;
            padding: 0 94px 20px 10px
        }

    .lang_cn .cd-search.full input, .lang_sg-cn .cd-search.full input, .lang_tw .cd-search.full input {
        font-size: 23px
    }
}

@media (max-width:320px) {
    .cd-search.full input {
        font-size: 15px
    }
}

.cd-overlay {
    position: fixed;
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: rgba(105,170,111,.8);
    visibility: hidden;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity .3s 0s,visibility 0s .3s,-webkit-transform .3s 0s;
    -moz-transition: opacity .3s 0s,visibility 0s .3s,-moz-transform .3s 0s;
    transition: opacity .3s 0s,visibility 0s .3s,transform .3s 0s
}

    .cd-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity .3s 0s,visibility 0s 0s,-webkit-transform .3s 0s;
        -moz-transition: opacity .3s 0s,visibility 0s 0s,-moz-transform .3s 0s;
        transition: opacity .3s 0s,visibility 0s 0s,transform .3s 0s
    }

@media (max-width:1199px) {
    .cd-overlay.is-visible {
        -webkit-transform: translateX(-260px);
        -moz-transform: translateX(-260px);
        -ms-transform: translateX(-260px);
        -o-transform: translateX(-260px);
        transform: translateX(-260px)
    }

    .nav-on-left .cd-overlay.is-visible {
        -webkit-transform: translateX(260px);
        -moz-transform: translateX(260px);
        -ms-transform: translateX(260px);
        -o-transform: translateX(260px);
        transform: translateX(260px)
    }

        .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }
}

.no-js .cd-primary-nav {
    position: relative;
    height: auto;
    width: 100%;
    overflow: visible;
    visibility: visible;
    z-index: 2
}

.no-js .cd-search {
    position: relative;
    top: 0;
    opacity: 1;
    visibility: visible
}

@media (min-width:1200px) {
    .no-js .cd-primary-nav {
        position: absolute;
        z-index: 3;
        display: inline-block;
        width: auto;
        top: 0;
        right: 150px;
        padding: 0
    }

    .no-js .nav-is-fixed .cd-primary-nav {
        position: fixed
    }
}

.RWDmenu_plus06 {
    transform: translate(0,0);
    transition: transform ease .3s
}

body.is-visible {
    overflow: hidden
}

input:focus {
    outline: 0
}

@media (min-width:1200px) {
    .RWDmenu_plus02 .inside {
        font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,arial,verdana,helvetica,tahoma,Sans-serif;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 100;
        background: #fff
    }

        .RWDmenu_plus02 .inside.is-up {
            box-shadow: 1px 1px 15px rgba(43,43,43,.12)
        }
}

.RWDmenu_plus02 .inside {
    transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s
}

    .RWDmenu_plus02 .inside.is-push {
        transform: translateX(-360px);
        -o-transform: translateX(-360px);
        -webkit-transform: translateX(-360px);
        -moz-transform: translateX(-360px)
    }

@media (max-width:1199px) {
    .RWDmenu_plus02 .inside {
        position: static;
        width: auto;
        top: auto;
        background: 0 0
    }
}

.RWDmenu_plus02 a {
    text-decoration: none;
    color: #fff
}

.RWDmenu_plus02 .container {
    width: 1170px;
    margin: 0 auto;
    position: relative
}

@media (max-width:1199px) {
    .RWDmenu_plus02 .container {
        width: 100%;
        padding: 0
    }
}

.clearfix {
    display: block;
    clear: both
}

.cd-main-content.is-push, .push_by_menu {
    transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    -moz-transform: translateX(-300px)
}

@media (max-width:1199px) {
    .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible, .push_by_menu {
        -webkit-transform: translateX(-360px);
        -moz-transform: translateX(-360px);
        -ms-transform: translateX(-360px);
        -o-transform: translateX(-360px);
        transform: translateX(-360px)
    }
}

@media (max-width:600px) {
    .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible, .push_by_menu {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.cd-logo {
    width: 160px;
    float: left;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 20px;
    margin-left: 10px
}

    .cd-logo img {
        width: 100%
    }

@media (max-width:1199px) {
    .cd-logo {
        width: 130px;
        margin-top: 8px
    }
}

@media (min-width:1200px) {
    .cd-primary-nav {
        position: relative
    }
}

@media (max-width:1199px) {
    .cd-primary-nav > .has-children > a::after, .cd-primary-nav > .has-children > a::before {
        display: block
    }
}

.cd-primary-nav > li {
    margin-left: 0;
    position: relative;
    letter-spacing: 1px;
    list-style: none
}

    .cd-primary-nav > li > a {
        padding: 0 20px;
        line-height: 83px;
        letter-spacing: 1px;
        font-size: 14px;
        cursor: pointer
    }

        .cd-primary-nav > li > a:hover {
            color: #9c9c9c;
            transition: all .5s ease;
            -o-transition: all .5s ease;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease
        }

@media (min-width:1200px) {
    .cd-primary-nav > li > a:hover:after, .cd-primary-nav > li > a:hover:before {
        background-color: #bfbfbf
    }
}

@media (max-width:1199px) {
    .cd-primary-nav > li > a {
        font-size: 16px
    }

        .cd-primary-nav > li > a:hover {
            background-color: transparent
        }
}

@media (min-width:1200px) {
    .cd-primary-nav > li:after {
        position: absolute;
        display: block;
        bottom: 15px;
        left: 33%;
        right: 33%;
        height: 1px;
        content: "";
        background: 0 0;
        z-index: -1;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
    }

    .cd-primary-nav > li:hover:after {
        left: 0;
        right: 0;
        background: #9c9c9c;
        z-index: 9999
    }

    .cd-primary-nav > li > a.selected {
        color: #7d7d7d;
        box-shadow: inset 0 -2px 0 transparent;
        background-color: #9c9c9c;
        color: #fff
    }
}

@media (max-width:1199px) {
    .cd-primary-nav > li {
        margin: 0 30px
    }

        .cd-primary-nav > li > a {
            line-height: 60px;
            padding: 0;
            height: 60px;
            padding-left: 0
        }
}

@media (min-width:1200px) {
    .cd-primary-nav > .has-children > a {
        padding-right: 20px !important
    }

    nav.cd-nav {
        float: right;
        margin-left: 70px;
        font-size: 14px
    }

    .cd-primary-nav {
        float: none;
        padding: 0
    }

        .cd-primary-nav .cd-secondary-nav {
            width: 200px;
            padding: 0;
            left: 0
        }

            .cd-primary-nav .cd-secondary-nav > li {
                width: 100%;
                margin-right: 0;
                border-bottom: 1px solid #efefef
            }

                .cd-primary-nav .cd-secondary-nav > li:last-child {
                    border: none
                }

                .cd-primary-nav .cd-secondary-nav > li > a {
                    font-size: 14px;
                    padding: 8px 15px;
                    margin-bottom: 0;
                    color: #2b2b2b;
                    font-weight: 400;
                    transition: all ease .3s;
                    -o-transition: all ease .3s;
                    -webkit-transition: all ease .3s
                }

                    .cd-primary-nav .cd-secondary-nav > li.active > a, .cd-primary-nav .cd-secondary-nav > li > a:hover {
                        background-color: #797979;
                        color: #fff
                    }

            .cd-primary-nav .cd-secondary-nav a {
                padding: 8px 15px;
                font-size: 14px;
                color: #737373;
                transition: all .5s;
                -o-transition: all .5s;
                -webkit-transition: all .5s;
                padding-left: 30px
            }

                .cd-primary-nav .cd-secondary-nav a:hover {
                    color: #9c9c9c
                }
}

.cd-search button {
    position: absolute;
    right: 10px;
    top: 30px;
    font-size: 18px;
    letter-spacing: 2px;
    border: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
    color: #333;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

@media (max-width:1199px) {
    .cd-search button {
        top: 17px;
        font-size: 16px
    }
}

@media (min-width:1200px) {
    .cd-search {
        height: 80px;
        top: 130px
    }

        .cd-search input {
            font-size: 20px;
            letter-spacing: 1px;
            font-family: 微軟正黑體,"Microsoft JhengHei",MingLiU,arial,verdana,helvetica,tahoma,sans-serif
        }
}

@media (max-width:1199px) {
    .cd-search input {
        font-size: 16px;
        letter-spacing: 1px;
        font-family: 微軟正黑體,"Microsoft JhengHei",MingLiU,arial,verdana,helvetica,tahoma,sans-serif
    }
}

@media (max-width:1199px) {
    .cd-search {
        position: fixed;
        top: 50px
    }
}

.cd-header-buttons {
    position: relative;
    display: block;
    float: right;
    right: 0;
    font-size: 13px
}

.RWDmenu_plus02 .sub-nav {
    transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s
}

    .RWDmenu_plus02 .sub-nav.sub-up {
        margin-top: -50px
    }

.RWDmenu_plus02 .language-block {
    width: auto;
    height: 30px;
    float: right;
    margin-top: 15px;
    background-color: transparent;
    border-radius: 0;
    position: relative;
    padding: 7px;
    font-size: 13px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    letter-spacing: 1px;
    text-align: right;
    float: right
}

    .RWDmenu_plus02 .language-block a {
        color: #333;
        padding-right: 8px;
        transition: all .3s;
        -o-transition: all .3s;
        -webkit-transition: all .3s
    }

.fa-angle-down:before {
    display: none
}

.RWDmenu_plus02 .language-block:after {
    position: absolute;
    right: 10px;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.RWDmenu_plus02 #lan-02 {
    font-size: 13px;
    margin-top: 12px;
    margin-left: 15px
}

    .RWDmenu_plus02 #lan-02 a {
        color: #333;
        padding: 0 4px;
        transition: all .3s;
        -o-transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        cursor: pointer
    }

        .RWDmenu_plus02 #lan-02 a:hover {
            color: #9c9c9c
        }

.lang-select {
    position: relative;
    margin: 3px 0 0 15px;
    padding: 0 2px;
    font-size: 13px;
    color: #545454
}

@media (max-width:1199px) {
    .lang-select {
        vertical-align: top;
        margin-top: 0
    }
}

@media (max-width:767px) {
    .cd-header-buttons .lang-select {
        display: none
    }
}

.sub-nav .lang-select {
    float: right;
    margin-top: 13px
}

.lang-select-label {
    line-height: 40px;
    cursor: pointer
}

    .lang-select-label:hover {
        color: #9c9c9c
    }

.cd-main-header .lang-select-label:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 1px solid #c9cbc4;
    border-width: 1px 1px 0 0;
    display: inline-block;
    vertical-align: middle;
    top: 50%;
    right: 0;
    margin-top: -5px;
    margin-left: 2px;
    -webkit-transform: rotate(136deg);
    -ms-transform: rotate(136deg);
    transform: rotate(136deg);
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.lang-select-label > * + * {
    margin-left: 3px
}

.lang-select-symbol {
    display: inline-block;
    margin-left: 0;
    font-style: normal
}

.no-symbol .lang-select-symbol {
    display: none
}

.lang-select-label:not(.no-symbol) .lang-select-symbol + * {
    margin-left: 0
}

.lang-select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    z-index: 100;
    background-color: #fff;
    box-shadow: inset 0 1px 0 #e2e3df,0 3px 6px rgba(0,0,0,.05)
}

    .lang-select-options > li {
        float: left;
        border-bottom: 1px solid #efefef;
        border-right: 1px solid #efefef
    }

    .lang-select-options a {
        display: block;
        width: 169px;
        font-size: 14px;
        text-align: center;
        padding: 8px 15px;
        color: #2b2b2b
    }

        .lang-select-options a:hover {
            background-color: #797979;
            color: #fff
        }

.fa.ic_lang-select {
    font-size: 16px;
    line-height: 40px
}

.ic_lang-select:before {
    content: "\f0ac"
}

.lang-select-options .flag-icon + span {
    display: inline-block;
    width: 100%;
    max-width: 85px;
    text-align: left
}

.flag-icon + span {
    margin-left: 4px
}

.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    height: 1em;
    vertical-align: middle
}

    .flag-icon:before {
        content: ""
    }

.flag-icon-cn {
    background-image: url(/public/img/flag/cn.svg)
}

.flag-icon-de {
    background-image: url(/public/img/flag/de.svg)
}

.flag-icon-es {
    background-image: url(/public/img/flag/es.svg)
}

.flag-icon-french {
    background-image: url(/public/img/flag/fr.svg)
}

.flag-icon-hk-cn {
    background-image: url(/public/img/flag/hk.svg)
}

.flag-icon-idn {
    background-image: url(/public/img/flag/id.svg)
}

.flag-icon-italian {
    background-image: url(/public/img/flag/it.svg)
}

.flag-icon-jp {
    background-image: url(/public/img/flag/jp.svg)
}

.flag-icon-kh {
    background-image: url(/public/img/flag/kh.svg)
}

.flag-icon-kr {
    background-image: url(/public/img/flag/kr.svg)
}

.flag-icon-my {
    background-image: url(/public/img/flag/mm.svg)
}

.flag-icon-my-cn, .flag-icon-my-en {
    background-image: url(/public/img/flag/my.svg)
}

.flag-icon-ru {
    background-image: url(/public/img/flag/ru.svg)
}

.flag-icon-sg-cn, .flag-icon-sg-en {
    background-image: url(/public/img/flag/sg.svg)
}

.flag-icon-thai {
    background-image: url(/public/img/flag/th.svg)
}

.flag-icon-tw {
    background-image: url(/public/img/flag/tw.svg)
}

.flag-icon-en {
    background-image: url(/public/img/flag/us.svg)
}

.flag-icon-vn {
    background-image: url(/public/img/flag/vn.svg)
}

.RWDmenu_plus02 input::-webkit-inner-spin-button, .RWDmenu_plus02 input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0
}

.RWDmenu_plus02 input[type=number] {
    -moz-appearance: textfield
}

.fa-angle-down:after, nav.cd-nav .fa-angle-down:after {
    content: "\f107"
}

.RWDmenu_plus02 .editor {
    float: right;
    margin-right: 20px;
    margin-top: 21px
}

.RWDmenu_plus02 .cart-block, .RWDmenu_plus02 .member-block, .RWDmenu_plus02 .querycar-block {
    float: right;
    margin-top: 10px;
    margin-left: 15px;
    display: block;
    letter-spacing: 1px;
    font-size: 13px;
    position: relative
}

    .RWDmenu_plus02 .cart-block:hover i {
        color: #9c9c9c
    }

    .RWDmenu_plus02 .cart-block span, .RWDmenu_plus02 .member-block span, .RWDmenu_plus02 .querycar-block span {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
    }

    .RWDmenu_plus02 .cart-block i.qty {
        color: #6f6f6f;
        font-style: normal;
        background: #fff;
        border-radius: 99em;
        box-shadow: 1px 1px 3px #ccc;
        padding: 0 7px;
        font-size: 12px;
        position: absolute;
        top: -9px;
        right: -15px
    }

@media (max-width:1199px) {
    .RWDmenu_plus02 .cart-block i.qty {
        font-size: 13px
    }
}

.RWDmenu_plus02 .cart-block:hover span, .RWDmenu_plus02 .member-block:hover span, .RWDmenu_plus02 .querycar-block:hover span {
    color: #9c9c9c
}

.RWDmenu_plus02 .cart-block:after, .RWDmenu_plus02 .member-block:after, .RWDmenu_plus02 .querycar-block:after {
    position: absolute;
    display: block;
    bottom: -10px;
    left: 33%;
    right: 33%;
    height: 1px;
    content: "";
    background: 0 0;
    z-index: -1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.RWDmenu_plus02 .cart-block:hover:after, .RWDmenu_plus02 .member-block:hover:after, .RWDmenu_plus02 .querycar-block:hover:after {
    left: 0;
    right: 0;
    background: #9c9c9c;
    z-index: 9999
}

.RWDmenu_plus02 .cart-block .ii, .RWDmenu_plus02 .member-block .ii, .RWDmenu_plus02 .querycar-block .ii {
    font-size: 17px
}

.RWDmenu_plus02 .cart-block .glyphicon, .RWDmenu_plus02 .member-block .glyphicon, .RWDmenu_plus02 .querycar-block .glyphicon {
    font-size: 14px
}

.RWDmenu_plus02 .querycar-block .ii {
    padding-right: 2px
}

.RWDmenu_plus02 .cart-block .glyphicon, .RWDmenu_plus02 .cart-block .ii, .RWDmenu_plus02 .member-block .glyphicon, .RWDmenu_plus02 .member-block .ii, .RWDmenu_plus02 .querycar-block .glyphicon, .RWDmenu_plus02 .querycar-block .ii {
    vertical-align: middle
}

.RWDmenu_plus02 .cart-block + .querycar-block {
    margin-right: 10px
}

@media (max-width:1199px) {
    .RWDmenu_plus02 .cart-block {
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 12px;
        font-size: 14px
    }
}

@media (max-width:600px) {
    .RWDmenu_plus02 .cart-block {
        font-size: 18px;
        margin-top: 11px
    }

        .RWDmenu_plus02 .cart-block .ii {
            font-size: 20px
        }
}

.RWDmenu_plus02 .cart-block a, .RWDmenu_plus02 .member-block a, .RWDmenu_plus02 .querycar-block a {
    color: #545454;
    cursor: pointer
}

.RWDmenu_plus02 .querycar-block {
    font-size: 14px
}

    .RWDmenu_plus02 .querycar-block:hover i {
        color: #9c9c9c
    }

    .RWDmenu_plus02 .querycar-block i.qty {
        color: #6f6f6f;
        font-style: normal;
        background: #fff;
        border-radius: 99em;
        box-shadow: 1px 1px 3px #ccc;
        padding: 0 7px;
        font-size: 12px;
        position: absolute;
        top: -9px;
        right: -15px
    }

@media (max-width:1199px) {
    .RWDmenu_plus02 .querycar-block i.qty {
        font-size: 13px
    }

    .RWDmenu_plus02 .querycar-block {
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 12px;
        font-size: 14px
    }
}

@media (max-width:600px) {
    .RWDmenu_plus02 .querycar-block {
        font-size: 18px;
        margin-top: 11px
    }

        .RWDmenu_plus02 .querycar-block .ii {
            font-size: 20px
        }
}

.RWDmenu_plus02 .member-block.logn-out {
    cursor: pointer;
    margin-left: 5px;
    margin-top: 13px
}

.RWDmenu_plus02 .member-block.my-account {
    cursor: pointer
}

.RWDmenu_plus02 .member-block.my-account {
    transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease
}

.RWDmenu_plus02 .phone-menu {
    float: right
}

.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden
}

    .hvr-underline-from-center:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 50%;
        right: 50%;
        bottom: 0;
        background: #2098d1;
        height: 4px;
        -webkit-transition-property: left,right;
        transition-property: left,right;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out
    }

    .hvr-underline-from-center:active:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:hover:before {
        left: 0;
        right: 0
    }

.cd-search-trigger::before {
    top: 11px;
    left: 11px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #2e3233
}

.cd-search-trigger::after {
    height: 2px;
    width: 7px;
    background: #2e3233;
    bottom: 18px;
    right: 17px
}

.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
    height: 2px
}

.cd-search-trigger span::after, .cd-search-trigger span::before {
    height: 2px;
    width: 18px
}

.cd-nav-trigger.nav-is-visible {
    opacity: 0;
    width: 0
}

.cd-overlay {
    background-color: rgba(19,19,19,.87);
    z-index: 99;
    transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    opacity: 0;
    height: 100vh
}

    .cd-overlay.is-push {
        opacity: 1;
        visibility: visible;
        z-index: 99999;
        transform: translateX(-360px);
        -o-transform: translateX(-360px);
        -webkit-transform: translateX(-360px);
        -moz-transform: translateX(-360px)
    }

@media (max-width:600px) {
    .cd-overlay.is-push {
        transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%)
    }
}

@media (max-width:1199px) {
    .cd-overlay {
        top: 0
    }

        .cd-overlay.is-visible {
            -webkit-transform: translateX(-360px);
            -moz-transform: translateX(-360px);
            -ms-transform: translateX(-360px);
            -o-transform: translateX(-360px);
            transform: translateX(-360px);
            -webkit-transition: opacity .5s 0s,visibility 0s 0s,-webkit-transform .5s 0s;
            -moz-transition: opacity .5s 0s,visibility 0s 0s,-moz-transform .5s 0s;
            transition: opacity .5s 0s,visibility 0s 0s,transform .5s 0s;
            top: 0
        }
}

@media (max-width:600px) {
    .cd-overlay.is-visible {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        top: 0
    }
}

.cd-search {
    z-index: 999
}

@media (max-width:1199px) {
    .cd-primary-nav, .cd-primary-nav ul {
        background: #f7f7f7;
        width: 360px;
        padding-top: 30px;
        font-size: 14px;
        padding-left: 0;
        list-style: none;
        bottom: .5px
    }

        .cd-primary-nav ul {
            padding: 0 30px;
            padding-top: 30px
        }

    #cd-primary-nav > li > ul > li.go-back {
        position: relative;
        top: -20px;
        border: none
    }

        #cd-primary-nav > li > ul > li.go-back a {
            border: none
        }

    #cd-primary-nav > li > ul > li > ul > li.go-back {
        position: relative;
        top: -20px
    }

        #cd-primary-nav > li > ul > li > ul > li.go-back a {
            border: none
        }

    #cd-primary-nav > li > ul > li > ul > li > ul > li.go-back {
        position: relative;
        top: -20px
    }

        #cd-primary-nav > li > ul > li > ul > li > ul > li.go-back a {
            border: none
        }
}

@media (max-width:600px) {
    #cd-primary-nav > li > ul > li.go-back {
        position: relative;
        top: -60px
    }

    #cd-primary-nav > li > ul > li > ul > li.go-back {
        position: relative;
        top: -60px
    }

    #cd-primary-nav > li > ul > li > ul > li > ul > li.go-back {
        position: relative;
        top: -60px
    }

    #cd-primary-nav > li > ul > li:nth-child(2) {
        margin-top: -37px
    }

    #cd-primary-nav > li > ul > li > ul > li:nth-child(2) {
        margin-top: -37px
    }

    #cd-primary-nav > li > ul > li > ul > li > ul > li:nth-child(2) {
        margin-top: -37px
    }
}

@media (max-width:600px) {
    .cd-primary-nav, .cd-primary-nav .cd-secondary-nav, .cd-primary-nav ul {
        width: 100%;
        max-width: none
    }
}

.RWDmenu_plus02 .cart-menu {
    position: fixed;
    width: 360px;
    height: 100vh;
    background-color: #fbfbfb;
    z-index: 99999;
    top: 0;
    right: 0;
    transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transform: translateX(360px);
    -o-transform: translateX(360px);
    -webkit-transform: translateX(360px);
    -moz-transform: translateX(360px)
}

@media (max-width:600px) {
    .RWDmenu_plus02 .cart-menu {
        width: 100%;
        transform: translateX(100%);
        -o-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%)
    }
}

.RWDmenu_plus02 .cart-menu.is-visible {
    transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0)
}

.RWDmenu_plus02 .cart-menu .cart-cancel-btn {
    position: absolute;
    top: 40px;
    left: 30px;
    cursor: pointer;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

    .RWDmenu_plus02 .cart-menu .cart-cancel-btn:hover {
        color: #999
    }

.RWDmenu_plus02 .cart-menu .title {
    text-align: center;
    width: 85%;
    padding: 40px 10px;
    border-bottom: 2px solid #797979;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 auto;
    margin-bottom: 20px
}

    .RWDmenu_plus02 .cart-menu .title span {
        color: #fff;
        background: #6f6f6f;
        box-shadow: 1px 1px 5px #dedede;
        border-radius: 99em;
        padding: 4px 7px;
        padding-left: 8px;
        font-size: 12px
    }

.RWDmenu_plus02 .cart-menu ul.content li {
    padding: 20px 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

    .RWDmenu_plus02 .cart-menu ul.content li:last-child {
        border-bottom: none
    }

    .RWDmenu_plus02 .cart-menu ul.content li:hover {
        box-shadow: 1px 1px 20px #efefef
    }

    .RWDmenu_plus02 .cart-menu ul.content li .pic {
        width: 90px;
        height: 90px;
        background-color: #ececec;
        float: left;
        opacity: 1;
        transition: all .3s;
        -o-transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        position: relative;
        text-align: center
    }

@media (max-width:400px) {
    .RWDmenu_plus02 .cart-menu ul.content li .pic {
        width: 70px;
        height: 70px
    }
}

.RWDmenu_plus02 .cart-menu ul.content li .pic:hover {
    opacity: .8
}

.RWDmenu_plus02 .cart-menu ul.content li .pic img {
    max-width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box {
    width: 160px;
    float: left;
    font-size: 13px;
    margin-left: 25px;
    letter-spacing: 1px
}

@media (max-width:400px) {
    .RWDmenu_plus02 .cart-menu ul.content li .text-box {
        width: 130px;
        margin-left: 15px
    }
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .plusbuytag {
    margin-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #2f80ed
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .name {
    margin-bottom: 10px;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 22px;
    word-break: break-all
}

    .RWDmenu_plus02 .cart-menu ul.content li .text-box .name a {
        color: #333;
        transition: all .3s;
        -o-transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s
    }

        .RWDmenu_plus02 .cart-menu ul.content li .text-box .name a:hover {
            color: #999
        }

.RWDmenu_plus02 .cart-menu ul.content li .text-box .spec {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .qty-box {
    text-align: center;
    margin-bottom: 10px
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .qty {
    height: 30px;
    text-align: center;
    float: left;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 14px
}

.RWDmenu_plus02 .choice_num_typea select {
    width: 70px;
    padding: 0 0 0 12px
}

.RWDmenu_plus02 .cart-menu ul.content .choice_num_typeb .qty {
    width: 40px
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box input.qtyplus {
    width: 30px;
    height: 30px;
    float: left;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 14px;
    border-left: none;
    font-weight: 900;
    text-align: center;
    padding: 0;
    margin: 0
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box input.qtyminus {
    width: 30px;
    height: 30px;
    float: left;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 14px;
    border-right: none;
    font-weight: 900;
    text-align: center;
    padding: 0;
    margin: 0
}

.RWDmenu_plus02 .cart-menu.querycar_menu ul.content li .text-box input.qtyminus, .RWDmenu_plus02 .cart-menu.querycar_menu ul.content li .text-box input.qtyplus {
    display: none
}

.RWDmenu_plus02 .choice_num_typec input {
    width: 60px
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .dre-text {
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-size: 13px
}

.RWDmenu_plus02 .cart-menu ul.content li .text-box .price {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 900
}

    .RWDmenu_plus02 .cart-menu ul.content li .text-box .price .unit {
        margin-left: 3px
    }

.RWDmenu_plus02 .cart-menu ul.content li .cancel-btn {
    font-size: 14px;
    float: right;
    cursor: pointer;
    transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

    .RWDmenu_plus02 .cart-menu ul.content li .cancel-btn:hover {
        color: #999
    }

.RWDmenu_plus02 .cart-menu .buy-btn a {
    width: 100%;
    background-color: #4a4a4a;
    color: #fff;
    display: block;
    text-align: center;
    padding: 20px 15px;
    letter-spacing: 3px;
    font-size: 16px;
    margin-top: 0;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 -3px 3px rgba(152,152,152,.25);
    transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    font-family: 微軟正黑體,"Microsoft JhengHei",MingLiU,arial,verdana,helvetica,tahoma,sans-serif
}

.RWDmenu_plus02 .cart-menu .buy-btn:hover a {
    color: #fff
}

@media (max-width:600px) {
    .RWDmenu_plus02 .cart-menu .buy-btn a {
        margin-top: 0
    }
}

.RWDmenu_plus02 .cart-menu .buy-btn:hover {
    background-color: #928662
}

.go-back a::after, .go-back a::before, .has-children > a::after, .has-children > a::before {
    height: 1px
}

@media (max-width:600px) {
    .has-children > a::after, .has-children > a::before {
        right: 0
    }
}

.go-back a::after, .go-back a::before, .has-children > a::after, .has-children > a::before {
    transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s
}

@media (min-width:1200px) {
    nav.cd-nav ul .close-btn {
        display: none
    }
}

@media (max-width:1199px) {
    nav.cd-nav ul .close-btn {
        width: 78px;
        height: 60px;
        cursor: pointer;
        position: relative;
        transition: all .2s ease-out;
        z-index: 18;
        text-align: right;
        font-size: 12px;
        margin: -20px 0 23px 30px;
        line-height: 60px;
        padding-left: 40px;
        opacity: 1
    }

        nav.cd-nav ul .close-btn:after, nav.cd-nav ul .close-btn:before {
            background-color: #333;
            content: "";
            height: 1px;
            left: 0;
            top: 50%;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            transition: all .4s cubic-bezier(.25,.6,.36,1);
            position: absolute;
            top: 50%;
            width: 25px
        }

        nav.cd-nav ul .close-btn:before {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            transition-delay: 65ms
        }

        nav.cd-nav ul .close-btn:hover:before {
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        nav.cd-nav ul .close-btn:hover:after {
            -webkit-transform: rotate(225deg);
            transform: rotate(225deg)
        }
}

nav.cd-nav ul .close-btn.is-push {
    transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    opacity: 0;
    transition: transform .2s ease-out
}

nav.cd-nav .bottom-copyright {
    text-align: center;
    width: 100%;
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 40px;
    margin-bottom: 40px;
    -webkit-transition: all .3s;
    transition: all .3s
}

nav.cd-nav .cd-primary-nav.moves-out .bottom-copyright {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0
}

nav.cd-nav .bottom-copyright span {
    color: #333
}

nav.cd-nav .phone-language select {
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0
}

nav.cd-nav .phone-language.fa-angle-down:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #999 transparent transparent transparent;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px
}

@media (min-width:1200px) {
    .cd-primary-nav .go-back a::after, .cd-primary-nav .go-back a::before {
        left: 12px
    }
}

@media (max-width:1199px) {
    .cd-primary-nav .go-back a::after, .cd-primary-nav .go-back a::before {
        left: 0
    }
}

@media (max-width:600px) {
    .cd-primary-nav .go-back a {
        margin-top: 46px;
        font-weight: 600;
        border-bottom: none
    }

        .cd-primary-nav .go-back a::after, .cd-primary-nav .go-back a::before {
            left: 0
        }
}

nav.cd-nav .phone-language, nav.cd-nav .phone-member {
    margin-top: 60px;
    border-bottom: 1px solid #ececec;
    opacity: 1;
    transition: all .6s;
    -webkit-transition: all .6s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0)
}

nav.cd-nav .phone-language {
    position: relative;
    width: 85%;
    margin: 0 30px
}

    nav.cd-nav .phone-language:after {
        position: absolute;
        right: 0;
        top: 21px;
        font-size: 20px;
        display: block;
        pointer-events: none
    }

    nav.cd-nav .phone-language select {
        height: 60px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-size: 16px;
        letter-spacing: 1px;
        background-color: transparent;
        padding-left: 0;
        color: #333
    }

    nav.cd-nav .phone-language.fa-angle-down:before {
        right: 0
    }

    nav.cd-nav .phone-language select::-ms-expand {
        display: none
    }

nav.cd-nav .phone-member {
    position: relative
}

    nav.cd-nav .phone-member span {
        position: absolute;
        right: 0
    }

#cd-primary-nav > li.phone-member.hidden-lg > a:nth-child(1) > span {
    left: 50px
}

nav.cd-nav .phone-member a {
    display: inline;
    border: none;
    transition: all .3s;
    -webkit-transition: all .3s
}

    nav.cd-nav .phone-member a:hover {
        color: #9c9c9c
    }

nav.cd-nav .phone-language {
    margin-top: 0
}

    nav.cd-nav .phone-language span {
        display: none
    }

    nav.cd-nav .phone-language.is-push, nav.cd-nav .phone-member.is-push {
        transform: translateX(-130%);
        -o-transform: translateX(-130%);
        -webkit-transform: translateX(-130%);
        -o-transform: translateX(-130%);
        -moz-transform: translateX(-130%);
        opacity: 0;
        transition: transform .3s ease
    }

.phone-menubelow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s
}

.cd-primary-nav.nav-is-visible .phone-menubelow {
    margin: 30px
}

nav.cd-nav .phone-group {
    display: inline-block;
    margin: 0 30px;
    margin-top: 30px;
    text-align: left;
    transition: all .5s;
    -webkit-transition: all .5s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0)
}

nav.cd-nav .phone-menubelow .phone-group {
    margin: 8px 0
}

nav.cd-nav .phone-group a {
    display: inline-block;
    border: none;
    margin-right: 7px;
    padding: 8px
}

    nav.cd-nav .phone-group a:hover {
        color: #9c9c9c
    }

nav.cd-nav .phone-group.is-push {
    transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -moz-transform: translateX(-100%)
}

nav.cd-nav .phone-group i {
    vertical-align: middle;
    font-size: 20px;
    margin-right: 0;
    transition: all .3s;
    -webkit-transition: all .3s
}

nav.cd-nav .phone-group img {
    vertical-align: middle
}

nav.cd-nav .phone-group span {
    font-size: 13px;
    vertical-align: middle
}

nav.cd-nav .phone-lang {
    position: relative;
    display: block;
    float: right;
    text-align: center
}

    nav.cd-nav .phone-lang::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%
    }

nav.cd-nav .phone-lang-label {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 11px;
    border: 0;
    padding: 10px;
    cursor: pointer
}

    nav.cd-nav .phone-lang-label:hover {
        text-decoration: none;
        color: #9c9c9c
    }

    nav.cd-nav .phone-lang-label i.fa {
        display: block;
        line-height: initial;
        font-size: 20px
    }

    nav.cd-nav .phone-lang-label span {
        display: block;
        font-size: 11px;
        line-height: initial
    }

    nav.cd-nav .phone-lang-label .lang-select-symbol + i.flag-icon {
        display: inline-block
    }

    nav.cd-nav .phone-lang-label .lang-select-symbol ~ span {
        display: inline-block
    }

.phone-lang .cd-secondary-nav {
    text-align: left
}

.phone-lang li.go-back a {
    margin-top: 0
}

@media (min-width:1200px) {
    .cd-main-header {
        height: auto
    }
}

@media (max-width:1199px) {
    .cd-main-header {
        width: 100%;
        position: fixed
    }
}

@media (min-width:1200px) {
    #cd-search.is-up {
        top: 80px
    }
}

@media (min-width:1200px) {
    .cd-primary-nav ul.moves-out > li > a {
        font-weight: 900
    }
}

@media (max-width:1199px) {
    .cd-overlay.is-visible.search-is-visible {
        top: 50px
    }
}

@media (max-width:1199px) {
    .cd-primary-nav.nav-is-visible {
        overflow-x: hidden
    }
}

#scrollbox3 {
    overflow: auto;
    height: 78vh;
    width: auto !important
}

@media (max-width:1199px) {
    #scrollbox3 {
        height: 82vh
    }
}

@media (max-width:600px) {
    #scrollbox3 {
        height: 80vh
    }
}

@media (max-width:400px) {
    #scrollbox3 {
        height: 75vh
    }
}

.track3 {
    width: 10px;
    background: rgba(0,0,0,0);
    margin-right: 2px;
    border-radius: 10px;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear
}

    .track3.dragging, .track3:hover {
        background: #d9d9d9;
        background: rgba(0,0,0,.15)
    }

.handle3 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0,0,0,.4);
    border-radius: 7px;
    -webkit-transition: width 250ms;
    transition: width 250ms;
    padding: 0 !important
}

.track3.dragging .handle3, .track3:hover .handle3 {
    width: 10px
}

.cd-header-buttons li {
    float: right
}

@media (max-width:1199px) {
    .cd-header-buttons li {
        float: none
    }
}

.cd-header-buttons li.search-btn {
    margin-top: 3px;
    margin-left: 20px
}

.carempty {
    margin: 30px;
    color: #333;
    text-align: center
}

@media (min-width:1199px) {
    .cd-primary-nav .has-children.first-click {
        position: relative
    }

        .cd-primary-nav .has-children.first-click:after {
            position: absolute;
            top: 18px;
            right: 10px;
            content: '';
            display: block;
            width: 7px;
            height: 1px;
            z-index: 9;
            background: #868686;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .cd-primary-nav .has-children.first-click:before {
            position: absolute;
            top: 23px;
            right: 10px;
            content: '';
            display: block;
            width: 7px;
            height: 1px;
            background: #868686;
            z-index: 9;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .cd-primary-nav .has-children.first-click:after, .cd-primary-nav .has-children.first-click:before {
            display: none
        }

        .cd-primary-nav .has-children.first-click:hover:before {
            background: #fff
        }

        .cd-primary-nav .has-children.first-click:hover:after {
            background: #fff
        }

        .cd-primary-nav .has-children.first-click.open:before {
            background: #fff
        }

        .cd-primary-nav .has-children.first-click.open:after {
            background: #fff
        }

    .cd-primary-nav .has-children.first-click {
        position: relative
    }

        .cd-primary-nav .has-children.first-click:hover:after {
            color: #fff
        }

    .cd-primary-nav ul.moves-out > li > a.selected {
        background-color: #797979;
        color: #fff
    }
}

@media (min-width:1200px) {
    .cd-primary-nav .cd-secondary-nav ul.moves-out {
        min-height: 200px;
        transition: all .5s ease
    }

    .cd-primary-nav .cd-secondary-nav ul ul .go-back a {
        padding-left: 30px;
        font-weight: 600;
        color: #333
    }
}

.RWDmenu_plus02 .share-group {
    text-align: left;
    transition: all .5s;
    -webkit-transition: all .5s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0)
}

    .RWDmenu_plus02 .share-group a {
        display: inline;
        border: none;
        color: #545454;
        padding: 0 3px
    }

        .RWDmenu_plus02 .share-group a:hover {
            color: #9c9c9c
        }

    .RWDmenu_plus02 .share-group.main_share {
        margin-top: 8px;
        margin-left: 15px
    }

@media (max-width:1199px) {
    ul.cd-header-buttons .share-group {
        display: none
    }
}

.RWDmenu_plus02 .share-group.sub_share {
    float: right;
    margin-top: 20px
}

.RWDmenu_plus02 .share-group i {
    font-size: 16px;
    font-style: normal;
    margin-right: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
    vertical-align: middle
}

.ii-fb1:before {
    content: "\e903"
}

.ii-line3:before {
    content: "\e90c"
}

.ii-google1:before {
    content: "\e905"
}

.ii-ig1:before {
    content: "\e908"
}

.ii-youtube1:before {
    content: "\e921"
}

.ii-query1:before {
    content: "\e970"
}

.ii-bag2:before {
    content: "\e917"
}

.ii-people2:before {
    content: "\e95b"
}

.ii-fb1-line:before {
    content: "\e94f"
}

.ii-fb3:before {
    content: "\e950"
}

.ii-google1-line:before {
    content: "\e951"
}

.ii-gstore1:before {
    content: "\e952"
}

.ii-ig2:before {
    content: "\e953"
}

.ii-ig2-line:before {
    content: "\e954"
}

.ii-line1-line:before {
    content: "\e955"
}

.ii-mail3:before {
    content: "\e956"
}

.ii-mail3-line:before {
    content: "\e957"
}

.ii-messenger1:before {
    content: "\e958"
}

.ii-messenger1-line:before {
    content: "\e959"
}

.ii-pchome1:before {
    content: "\e95a"
}

.ii-people2:before {
    content: "\e95b"
}

.ii-pixnet3:before {
    content: "\e95c"
}

.ii-pixnet3-line:before {
    content: "\e95d"
}

.ii-plurk2:before {
    content: "\e95e"
}

.ii-plurk2-line:before {
    content: "\e95f"
}

.ii-qq2:before {
    content: "\e960"
}

.ii-qq2-line:before {
    content: "\e961"
}

.ii-rakuten1:before {
    content: "\e962"
}

.ii-ruten1:before {
    content: "\e963"
}

.ii-shopee1:before {
    content: "\e964"
}

.ii-skype1-line:before {
    content: "\e965"
}

.ii-snapchat1:before {
    content: "\e966"
}

.ii-snapchat1-line:before {
    content: "\e967"
}

.ii-twitter1-line:before {
    content: "\e968"
}

.ii-wechat1-line:before {
    content: "\e969"
}

.ii-weibo1-line:before {
    content: "\e96a"
}

.ii-whatsapp1:before {
    content: "\e91f"
}

.ii-whatsapp2:before {
    content: "\e96b"
}

.ii-whatsapp2-line:before {
    content: "\e96c"
}

.ii-yahoo1:before {
    content: "\e96d"
}

.ii-yahoo2:before {
    content: "\e96e"
}

.ii-youtube1-line:before {
    content: "\e96f"
}

.ii-fb1:before {
    content: "\e903"
}

.ii-google1:before {
    content: "\e905"
}

.ii-line1:before {
    content: "\e90a"
}

.ii-line2:before {
    content: "\e90b"
}

.ii-line3:before {
    content: "\e90c"
}

.ii-skype1:before {
    content: "\e91a"
}

.ii-twitter1:before {
    content: "\e91c"
}

.ii-wechat1:before {
    content: "\e91d"
}

.ii-weibo1:before {
    content: "\e91e"
}

.ii-youtube1:before {
    content: "\e921"
}

.ii-youtube2:before {
    content: "\e922"
}

.RWDmenu_plus02 .share-group img {
    vertical-align: middle
}

.RWDmenu_plus02 .share-group span {
    font-size: 13px;
    vertical-align: middle
}

.RWDmenu_plus02 .share-group * ~ span {
    margin-left: 2px
}

@media (max-width:1199px) {
    .cd-primary-nav > li.only-pc {
        display: none
    }
}

@media (min-width:1200px) {
    .cd-primary-nav > li.only-mobile {
        display: none
    }
}

@media (min-width:1200px) {
    .cd-primary-nav .has-children.first-click {
        overflow: inherit
    }

    .cd-primary-nav .cd-secondary-nav ul.first-block {
        position: absolute;
        width: 200px;
        z-index: 99;
        left: 200px;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(43,43,43,.36)
    }

    .cd-primary-nav ul.moves-out > li > a {
        font-weight: 300
    }
}

@media (min-width:1200px) {
    .RWDmenu_plus02 .sub-nav .member-block {
        font-size: 13px;
        margin-top: 22px
    }
}

@media (max-width:1199px) {
    .RWDmenu_plus02 .inside.is-up .cd-main-header {
        box-shadow: -3px 2px 8px 1px rgba(47,47,47,.12)
    }

    .cd-primary-nav .cd-secondary-nav ul.first-block {
        overflow: hidden
    }

    .collapsing_header header {
        position: fixed !important;
        padding: 0 15px
    }

    .collapsing_header .cd-main-header .cd-logo {
        margin-top: 12px
    }

    #RWDfullscreen01 .cd-main-header {
        z-index: 11;
        position: fixed !important
    }

        #RWDfullscreen01 .cd-main-header .cd-logo {
            margin-top: 12px
        }

    #RWDfullscreen02 .cd-main-header {
        z-index: 11;
        position: fixed !important
    }

        #RWDfullscreen02 .cd-main-header .cd-logo {
            margin-top: 12px
        }

    #cd-primary-nav.moves-out {
        overflow: hidden;
        transform: none
    }

        #cd-primary-nav.moves-out ul.cd-secondary-nav:not(.is-hidden) {
            overflow-x: hidden;
            overflow-y: auto;
            transform: none;
            -webkit-overflow-scrolling: touch
        }

        #cd-primary-nav.moves-out ul.cd-secondary-nav.moves-out:not(.is-hidden) {
            overflow: hidden
        }

        #cd-primary-nav.moves-out .cd-secondary-nav.moves-out .first-block:not(.is-hidden):not(.moves-out) {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            z-index: 100
        }
}

@media (max-width:480px) {
    header {
        position: fixed !important
    }
}

.shoppingcar001 {
    position: fixed;
    right: 0;
    z-index: 99;
    top: 23%;
    width: 39px;
    overflow: hidden
}

    .shoppingcar001 .car_block {
        float: left;
        position: relative;
        width: 40px;
        color: #333;
        font-size: 12px;
        cursor: pointer;
        background-color: #fff;
        text-align: center
    }

    .shoppingcar001 .val-shopnum {
        color: #ff1b1b
    }

    .shoppingcar001 .car_icon {
        width: 60%;
        margin: 20% auto
    }

    .shoppingcar001 .line {
        width: 60%;
        margin: 20% auto;
        height: 1px;
        background-color: #cbcbcb
    }

    .shoppingcar001 .money {
        color: #ff1b1b
    }

    .querycar001 .scrolltop, .shoppingcar001 .scrolltop {
        width: 100%;
        height: 38px;
        margin-top: 20%;
        background-color: #111;
        background-image: url(../../model/sample/baseimg/shoppingcar001/scrolltop.png);
        background-position: center center;
        background-size: 100% auto;
        background-repeat: no-repeat
    }

    .shoppingcar001 .car_icon img {
        width: 100%
    }

    .shoppingcar001 .car_list {
        float: left;
        width: 300px;
        position: relative;
        background-color: #efefef
    }

    .shoppingcar001 .list_block {
        position: relative;
        margin: 0 25px
    }

    .shoppingcar001 .car_outer {
        position: relative;
        width: 1000px
    }

    .shoppingcar001 .car_list .subject {
        color: #111;
        font-size: 16px;
        margin: 34px 0 17px 0
    }

    .shoppingcar001 .checkout_it {
        text-align: center;
        width: 100%;
        display: block;
        background-color: #fff;
        color: #111;
        line-height: 40px;
        font-size: 14px;
        margin: 12px 0;
        -webkit-transition: all .3s linear;
        transition: all .3s linear;
        text-decoration: none
    }

        .shoppingcar001 .checkout_it:hover {
            background-color: #f3ebeb;
            color: #111
        }

.cart-block img, .member-block img, .querycar-block img {
    max-width: 20px
}

.querycar001 {
    position: fixed;
    right: 0;
    z-index: 99;
    top: 23%;
    width: 39px;
    overflow: hidden
}

    .querycar001 .car_block {
        float: left;
        position: relative;
        width: 40px;
        color: #333;
        font-size: 12px;
        cursor: pointer;
        background-color: #fff;
        text-align: center
    }

    .querycar001 .querycar-val-shopnum {
        color: #ff1b1b
    }

    .querycar001 .car_icon {
        width: 60%;
        margin: 20% auto
    }

    .querycar001 .line {
        width: 60%;
        margin: 20% auto;
        height: 1px;
        background-color: #cbcbcb
    }

    .querycar001 .money {
        color: #ff1b1b
    }

    .querycar001 .car_icon img {
        width: 100%
    }

    .querycar001 .car_list {
        float: left;
        width: 300px;
        position: relative;
        background-color: #efefef
    }

    .querycar001 .list_block {
        position: relative;
        margin: 0 25px
    }

    .querycar001 .car_outer {
        position: relative;
        width: 1000px
    }

    .querycar001 .car_list .subject {
        color: #111;
        font-size: 16px;
        margin: 34px 0 17px 0
    }

    .querycar001 .checkout_it {
        text-align: center;
        width: 100%;
        display: block;
        background-color: #fff;
        color: #111;
        line-height: 40px;
        font-size: 14px;
        margin: 12px 0;
        -webkit-transition: all .3s linear;
        transition: all .3s linear;
        text-decoration: none
    }

        .querycar001 .checkout_it:hover {
            background-color: #f3ebeb;
            color: #111
        }



.info {
    position: relative;
    width: 35%;
    padding: 30px;
    background: #fff;
    height: 100%;
    border-top-right-radius: 30px;
}

.cardDIV{
    width: 900px;
    background-color:#fff;
    border:15px #efefef solid;
    border-radius:10px;
}

.btn-card {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    background: #ffc107;
    padding: 14px 30px;
    border-radius: 35px;
}
.btn-card-sm {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    background: #ffc107;
    padding: 7px 15px;
    border-radius: 20px;
}


.btn-outline-card {
    font-size: 16px;
    display: inline-block;
    color: #ffc107;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px #ffc107 solid;
    padding: 14px 30px;
    border-radius: 35px;
    background-color: #f9f5e7;s
}

.pp-pic-div {
    width: 200px;
    z-index: 9999;
}

.pp-pic {
    width: 300px;
    margin-top: -200px;
}

@media (max-width: 880px) {
    .flipster {
        display: block;
        overflow-x: hidden;
        overflow-y: visible;
        position: relative;
    }
    .flipster__container li {
        width: 100%;

    }
    .cardDIV {
        width: 100%!important;
    }
    .pp-pic {
        margin-top: -100px;
    }
}

/*文字*/
.f-EN {
    font-family:  'Microsoft JhengHei UI';
}
.wh25 {
line-height:25px;
}

.f13 {
    font-size: 13px;
    font-weight:bold;
}
.f25 {
    font-size: 25px;
    font-weight: bold;
    line-height:35px;
}

.f32 {
    font-size: 32px;
    font-weight: bold;
}
.f15 {
    font-size: 15px;
    font-weight: normal;
    line-height:20px;
}
.f16 {
    font-size: 16px;
    font-weight: normal;
    line-height:25px;
}


.f18 {
    font-size: 18px;
    font-weight: normal;
    line-height:25px;
}
.c-gary{
    color:#ccc;

}
.lead {
    font-size: 1rem;
    font-weight: 400;
    line-height:25px;
}

.c-cafe {
    color: #ad7900;
}
.pt-18 {
    padding-top: 120px;
}
.pt-15 {
    padding-top: 150px;
}
.pb-15 {
    padding-bottom: 150px;
}
.py-15 {
    padding-top: 250px;
    padding-bottom: 250px;
}
.item-w20 {
    font-size: 18px;
    line-height:25px;
}
.p-border {
    border: 3px solid rgba(0, 0, 0, 0.15);
    padding: 1px;
    background-color: 1px solid rgba(0, 0, 0, 0.55);
}

.mr-2, .mx-2 {
    margin-right: 0.75rem !important;
}
.pr-1,
.px-1 {
    padding-right: 0.375rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.375rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.375rem !important;
}

.p-2 {
    padding: 0.75rem !important;
}


.pr-2,
.px-2 {
    padding-right: 0.75rem !important;
}



/*-- //featured_services --*/

.featured_services {
    text-align: center;
}

.w3_agile_services_grid {
    text-align: left;
}

.w3_service_grid_left_grid {
    width: 120px;
    height: 120px;
    border: 1px solid #212121;
    margin: 0 auto;
    padding-top: 1em;
    position: relative;
    overflow: hidden;
}

    .w3_service_grid_left_grid img {
        margin: 0 auto;
    }

.w3l_service_grid_left h4 {
    font-size: 1.1em;
    color: #fff;
    font-weight: 600;
    margin: 1em 0;
    letter-spacing: 3px;
    line-height: 1.5em;
    text-transform: uppercase;
}

.w3l_service_grid_left p {
    color: #fff;
    line-height: 2em;
    margin-bottom: 1.5em;
}

.w3_agile_service_more a {
    font-size: 1.2em;
    color: #212121;
    letter-spacing: 2px;
    text-decoration: none;
}

    .w3_agile_service_more a i {
        padding-left: 1em;
        color: #48b7ec;
    }

    .w3_agile_service_more a:hover {
        color: #48b7ec;
    }

        .w3_agile_service_more a:hover i {
            color: #212121;
        }

.w3_service_grid_left_grid img {
    transition: transform 0.5s;
    transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
}

.w3l_service_grid_left:hover .w3_service_grid_left_grid img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

.w3l_service_grid_left:hover .w3_service_grid_left_grid {
    border: 1px solid #48b7ec;
}

.agile_services_grid_pos {
    position: absolute;
    /*ottom: -13%;*/
    left: 2%;
    width: 55px;
    height: 55px;
    background: #ffc107;
    border-radius: 50px;
    border: 2px solid #fff;
    text-align: center;
}

    .agile_services_grid_pos i {
        font-size: 1.3em;
        color: #fff;
        line-height: 2.5em;
    }

.agile_services_grid figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* Rotate */

    .hover06 figure img {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    -moz-transform: rotate(0) scale(1);
    -o-transform: rotate(0) scale(1);
    -ms-transform: rotate(0) scale(1);
    width: 100%;
}

.hover06 figure:hover img,
.w3_agile_services_grid:hover .hover06 figure img {
    -ms-transform: rotate(5deg) scale(1.1);
    -o-transform: rotate(5deg) scale(1.1);
    -moz-transform: rotate(5deg) scale(1.1);
    -webkit-transform: rotate(5deg) scale(1.1);
    transform: rotate(5deg) scale(1.1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
}

.agile_services_grid {
    position: relative;
}

.w3_agile_services_grid h4 {
    font-size: 1.2em;
    color: #111;
    margin: 2em 0 0.5em;
    letter-spacing: 0px;
    font-weight: 600;
    text-transform: uppercase;
}

.w3_agile_services_grid p {
    color: #555;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 28px;
}

.agile_inner_info a {
    font-size: 14px;
    display: inline-block;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    background: #ffc107;
    padding: 10px 20px;
    border-radius: 35px;
    text-decoration: none;
}

    .agile_inner_info a:hover {
        color: #333;
        text-decoration: none;


    }
/*-- //featured_services --*/

.border-radius-35 {
    border-radius: 35px;
}


#cart {
    position: fixed;
    top: 0px;
    right: calc(65% - 10px);
    border-radius: 0 0 5px 5px;
    color: #FFF;
    text-align: center;
    background: linear-gradient(to bottom, #FFB300 70%, yellow 100%);
    line-height: 25px;
}

.count_btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.875rem 0.75rem;
    font-size: 1rem;
    border-radius: 0!important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.table .thead-dark th {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;

    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.border-b {
    border-bottom: 1px #dee2e6 solid;
    border-right: 1px #dee2e6 solid;
    border-left: 1px #dee2e6 solid;
    background-color:#fff;
}


#detail-list:hover {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

/*放影片*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.navbar-ontop {
    background-color: transparent !important;
}
.cd-nav {
    float: left;
    margin-left: 100px;
    transition: 0.4s;
}

.is-up nav.cd-nav {
    margin-left: 180px;
    transition: 0.4s;
}

.RWDmenu_plus02 .inside {
    background: transparent;
}

.cd-main-header {
    background: transparent;
    transition: 0.4s;
}
/*副選單*/
.RWDmenu_plus02 .sub-nav {
    position: absolute;
    right: 0px;
    top: 0px;
}

.RWDmenu_plus02 .editor {
    margin: 0px;
    right: 0px;
    padding: 16px 30px;
}

    .RWDmenu_plus02 .editor a {
        color: #fff;
        font-size: 16px;
        letter-spacing: 1px;
    }

        .RWDmenu_plus02 .editor a span {
            font-size: 22px;
            font-weight: bold;
            display: block
        }

    .RWDmenu_plus02 .editor .menu_phone {
        text-align: center;
    }

        .RWDmenu_plus02 .editor .menu_phone i {
            margin-right: 8px
        }

.RWDmenu_plus02 .sub-nav::before {
    content: "";
    background: #FFB300;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1
}

.cd-header-buttons {
    right: 250px
}
/*下滑*/
.RWDmenu_plus02 .sub-nav.sub-up {
    margin-top: 0px;
}

.is-up .cd-main-header {
    background: rgba(255, 255, 255, 0.9);
    transition: 0.4s;
}



.fixed-sidebar-top {
    position: fixed;
    top: 150;
    left: 0;
    z-index: 1030;
}

/*諮詢*/
.Phone_div {
    position: relative;
    width: 120px;
    height: 80px;
    background-color: #ffc107;
    color: #fff;
    text-align: center;
    line-height: 20px;
    padding: 20px 10px 0 10px;
}
.phone_w {
    position: absolute;
    color: blue;
    bottom: 0;
    right: 0;
}

@media (max-width: 990px) {
    .Phone_div {
        position: relative;
        width: 100%;
        height: 30px;
        background-color: #ffc107;
        color: #fff;
        text-align: center;
        line-height: 20px;
        padding: 5px 0px 10px 0px;
    }
}


/* Style the input container */
.topnav .login-container {
    float: right;
}

/* Style the input field inside the navbar */
.topnav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    width: 150px; /* adjust as needed (as long as it doesn't break the topnav) */
}

/* Style the button inside the input container */
.topnav .login-container button {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

    .topnav .login-container button:hover {
        background: #ccc;
    }

/* Add responsiveness - On small screens, display the navbar vertically instead of horizontally */
@media screen and (max-width: 600px) {
    .topnav .login-container {
        float: none;
    }

        .topnav a, .topnav input[type=text], .topnav .login-container button {
            float: none;
            display: block;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: 14px;
        }

    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}



.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.form-group {
    margin-bottom: 1rem;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
}

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

    .form-row > .col,
    .form-row > [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

    .form-check-input:disabled ~ .form-check-label {
        color: #6c757d;
    }

.form-check-label {
    margin-bottom: 0;
}

.form-check-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
}

    .form-check-inline .form-check-input {
        position: static;
        margin-top: 0;
        margin-right: 0.3125rem;
        margin-left: 0;
    }
.form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}

    .form-inline .form-check {
        width: 100%;
    }

@media (min-width: 576px) {
    .form-inline label {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .form-inline .form-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 0;
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .form-inline .form-control-plaintext {
        display: inline-block;
    }

    .form-inline .input-group,
    .form-inline .custom-select {
        width: auto;
    }

    .form-inline .form-check {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: auto;
        padding-left: 0;
    }

    .form-inline .form-check-input {
        position: relative;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-top: 0;
        margin-right: 0.25rem;
        margin-left: 0;
    }

    .form-inline .custom-control {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .form-inline .custom-control-label {
        margin-bottom: 0;
    }
}

.input-group-text-d {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 20px;
    color: goldenrod;
    text-align: center;
    white-space: nowrap;
    background-color: #fff7e3;
    border: 1px solid goldenrod;
    border-radius: 0.25rem 0 0 0.25rem;
    margin-top:2px;
}




* {
    box-sizing: border-box
}

/* Set a style for all buttons */
/*button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

    button:hover {
        opacity: 1;
    }*/

/* Float cancel and delete buttons and add an equal width */
.cancelbtn, .deletebtn {
    float: left;
    width: 50%;
}

/* Add a color to the cancel button */
.cancelbtn {
    background-color: #ccc;
    color: black;
}

/* Add a color to the delete button */
.deletebtn {
    background-color: #f44336;
}

/* Add padding and center-align text to the container 
.container {
    padding: 16px;
    text-align: center;
}*/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* The Modal Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
}

    .close:hover,
    .close:focus {
        color: #f44336;
        cursor: pointer;
    }

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .deletebtn {
        width: 100%;
    }
}

/*rwd-table*/
.rwd-table {
    background: #fff;
    overflow: hidden;
}

    .rwd-table tr:nth-of-type(2n) {
        /*background: #eee;*/
    }

    .rwd-table th,
    .rwd-table td {
        margin: 0.5em 1em;
    }

.rwd-table {
    min-width: 100%;
}

    .rwd-table th {
        display: none;
        border-bottom: 2px solid #7a7a7a;
    }

    .rwd-table td {
        display: block;
    }

        .rwd-table td:before {
            content: attr(data-th);
            font-weight: bold;
            width: 7em;
            display: inline-block;
        }

    .rwd-table th, .rwd-table td {
        text-align: left;
    }

        .rwd-table th, .rwd-table td:before {
            color: #000;
            font-weight: bold;
            /*font-size:18px;*/
        }

@media (min-width: 768px) {
    .rwd-table td:before {
        display: none;
    }

    .rwd-table th, .rwd-table td {
        display: table-cell;
        padding: 0.25em 0.5em;
    }

        .rwd-table th:first-child,
        .rwd-table td:first-child {
            padding-left: 0;
        }

        .rwd-table th:last-child,
        .rwd-table td:last-child {
            padding-right: 0;
        }

    .rwd-table th,
    .rwd-table td {
        padding: 1em !important;
    }

}

.bg-orgred {
    background-color: #f44336;
}

.bg-f-30 {
    background-color: rgba(255, 255, 255, 0.5);
}
.line-25{
    line-height:25px;
}

@media (max-width: 580px) {
    .col {
        flex: 0 0 auto;
        width: 100%;
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33%;
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .sm-pt {
    margin-top:25%;

    }
    .order-sm-1 {
        order: 1 !important;
    }

}

.li_circle {
    list-style-type: circle !important!important;
    list-style-position: inside !important;
    display: flex !important;

}

.f-w{
    width:28%!important;
    margin-right:7px;
}
.text-g-30 {
    color:#ccc;
}

.fZbFLE {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    order: 2;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
    transition: all 0.5s ease 0s;
    position: relative;
    z-index: 200;
    display: block;
    border: 0px;
    background-color: rgb(0, 132, 255) !important;
}

#msg {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 5px;
    color: #236ee2;
    text-align: center;
    /*border-bottom: 2px solid #808080;*/
}

.fb-color {
    color: #1b73e6;
}

.ig-color {
    color: #ee0f4a;
}
input[type=text], select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    color:#9c9c9c;
}




/* style inputs and link buttons */
input,
.btn {
    /*width: 100%;*/
    padding: 12px;
    /*border: none;*/
    border-radius: 4px;
    margin: 5px 0;
    opacity: 0.85;
    display: inline-block;
    font-size: 17px;
    line-height: 20px;
    text-decoration: none; /* remove underline from anchors */
}

    input:hover,
    .btn:hover {
        opacity: 1;
    }

/* add appropriate colors to fb, twitter and google buttons */
.fb {
    background-color: #3B5998;
    color: white;
}

.twitter {
    background-color: #55ACEE;
    color: white;
}

.google {
    background-color: #dd4b39;
    color: white;
}

/* style the submit button */
input[type=submit] {
    background-color: #04AA6D;
    color: white;
    cursor: pointer;
}

    input[type=submit]:hover {
        background-color: #45a049;
    }

/* Two-column layout */
.col {
    float: left;
    width: 50%;
    margin: auto;
    padding: 0 50px;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* vertical line */
.vl {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    border: 2px solid #ddd;
    height: 175px;
}

/* text inside the vertical line */
.vl-innertext {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
    display: none;
}

/* bottom container */
.bottom-container {
    text-align: center;
    background-color: #666;
    border-radius: 0px 0px 4px 4px;
}

/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
    .col {
        width: 100%;
        margin-top: 0;
    }
    /* hide the vertical line */
    .vl {
        display: none;
    }
    /* show the hidden text on small screens */
    .hide-md-lg {
        display: block;
        text-align: center;
    }
}



/*日曆*/

ody a:hover,
body button:hover {
    text-decoration: none;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
}

.calendar,
.datepicker {
    /*max-width: 300px;*/
    margin: auto;
}

.calendar {
    border: 1px solid #cccccc;
    border-radius: 10px;
    padding: 1em;
}

.datepicker input {
    margin: 0;
    font-family: inherit;
    display: block;
    /*width: 85%;*/
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem 0.375rem 2.75rem!important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .datepicker input:focus {
        color: #495057;
        background-color: #fff;
        border-color: #f28388;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(219, 61, 68, 0.25);
    }

.datepicker i {
    position: absolute;
}

.icon {
    padding: 10px;
    font-size: larger;
    color: #555555;
    z-index:999;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .title .arrow-control {
        border: none;
        border-radius: 50px;
        background-color: transparent;
        width: 35px;
        height: 35px;
    }

        .title .arrow-control:hover {
            background-color: #db3d44;
            color: white;
            cursor: pointer;
        }

    .title .year-month:hover,
    .title .year:hover {
        color: #cccccc;
        cursor: pointer;
        transition: 0.3s all;
    }

.week .day {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14.28%;
    font-weight: bold;
}

.list, .week {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    .list .date {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.28%;
        height: 42px;
        margin-top: 1em;
        /* padding: 7.14%; */
        border: none;
        border-radius: 50px;
        background-color: transparent;
    }

        .list .date:hover, .list .date:focus,
        .list .mon:hover, .list .mon:focus {
            background-color: #db3d44;
            color: white;
            cursor: pointer;
        }

.active {
    /*background-color: #db3d44 !important;*/
    color: #2e3233;
}

.list .fadeout {
    color: #eeeeee;
}

.list .today {
    color: #db3d44;
}

    .list .today.active {
        color: white;
    }

.list .mon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 50px;
    margin-top: 1em;
    /* padding: 7.14%; */
    border: none;
    border-radius: 50px;
    background-color: transparent;
}

#yearlist .mon:first-child,
#yearlist .mon:last-child {
    color: #9d9d9d;
}



.d-none {
    display: none;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.col-date {
    float: left;
    width: 20%;
    margin: auto;
    padding: 0 50px;
    margin-top: 6px;
}

.date {
    font-size: 23px;
    line-height:23px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
    .col-2, .col-md-3, .col-md-6, .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }


}

@media screen and (max-width: 768px) {
    .col-date {
        float: left;
        width: auto;
        margin: auto;
        padding: 0 0;
        margin-top: 6px;
        flex: 1 0 0%;
    }

    .date {
        font-size: 15px;
    }


}

span.price {
    float: right;
    color: grey;
}
hr {
    border: 1px solid lightgrey;
}

.more {
    border-radius: 35px;
    letter-spacing: 3px;
    padding: 15px 50px;
    margin: 20px;
    color: #ffffff;
    background-color: #ffc107;
    font-weight:bold;
    font-size:15px;
}

.m a:hover {
    border-bottom: 3px solid red;
}