/************ TABLE OF CONTENTS ***************
1. Base
2. Header
3. Popup
4. Footer
5. Banner
6. Section  
7. List
8. Detail
9. Page
10. Input
11. Setting
12. Member
13. Order
14. Plugin
15. Event
----------------------------------- */

/* ***** Fonts ***** */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

@import url('../lib/animate.css');
@import url('../lib/owl/owl.css');
/*@import url('../lib/fontawesome/font-awesome.min.css');*/
/*@import url('../lib/fontawesome-6/css/all.min.css');*/
@import url('../lib/fontawesome-5pro/css/fontawesome.min.css');

@font-face {
    font-family: 'jf-openhuninn';
    src: url('../lib/fonts/jf-openhuninn-1.1.ttf') format('truetype');
}


/*** 
====================================================================
1	Base
====================================================================
***/

:root {
    --text_black: #555; /*一般文字*/
    --text_gray: #a7a7a7;
    --text_darkgray: #797979;
    --main_orange: #f57f34; /*主色*/
    --light_orange: #fff1e7; /*淺主色*/
    --dark_orange: #a87356; /*深主色*/
    --mute_orange: #fdcfac;
    --full_width: 100vw;
    --header_h: 5.625rem;
    --size_12: 0.75rem;
    --size_13: 0.8125rem;
    --size_14: 0.875rem;
    --size_15: 0.9375rem;
    --size_16: 1rem;
    --size_17: 1.0625rem;
    --size_18: 1.125rem;
    --size_19: 1.1875rem;
    --size_20: 1.25rem;
    --size_21: 1.3125rem;
    --size_22: 1.375rem;
    --size_23: 1.4375em;
    --size_24: 1.5rem;
    --size_25: 1.5625rem;
    --size_26: 1.625rem;
    --size_27: 1.6875rem;
    --size_28: 1.75rem;
    --size_30: 1.875rem;
    --size_33: 2.0625rem;
}

body, html {
    position: relative;
    z-index: auto;
    font-family: 'jf-openhuninn','Noto Sans TC','Microsoft JhengHei','Open Sans','Helvetica', Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--text_black);
    /*background: #f5f5f5;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*font-family: 'jf-openhuninn','Open Sans','Microsoft JhengHei','Noto Sans TC','Helvetica', Arial, sans-serif !important;*/
    /*font-weight: 600;*/
    background: none;
}

a,
a:hover,
a:focus,
a:active {
    color: var(--text_black);
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: all 400ms;
}

    a:hover, a:focus, a:active, a.active {
        color: var(--main_orange);
    }

    a.text-link {
        color: var(--main_orange);
    }

        a.text-link:hover,
        a.text-link:focus,
        a.text-link:active,
        a.text-link.active {
            color: var(--dark_orange);
        }

    a.disabled, .disabled {
        pointer-events: none;
        opacity: 0.5;
    }

    a.disabled2 {
        pointer-events: none;
    }

input:focus, button:focus {
    outline: none !important;
}

.auto-container {
    position: static;
    max-width: 1040px; /*w=960*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-md {
    position: static;
    max-width: 1080px; /*w=1000*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-lg {
    position: static;
    max-width: 1220px; /*w=1140*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-xl {
    position: static;
    max-width: 1350px; /*w=1270*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

    .auto-container:before, .auto-container-lg:before, .auto-container-xl:before {
        display: table;
        content: " ";
    }

    .auto-container:after, .auto-container-lg:after, .auto-container-xl:after {
        display: table;
        content: " ";
        clear: both;
    }

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
    max-width: var(--full_width);
    /*overflow: hidden;*/
}

.min-height-100 {
    min-height: -moz-calc(100vh - 28rem);
    min-height: -webkit-calc(100vh - 28rem);
    min-height: -o-calc(100vh - 28rem);
    min-height: calc(100vh - 28rem);
}

.min-height-0 {
    min-height: 0 !important;
}

/*------all------*/
.xl-view .lg-view, .lg-md-view {
    display: block !important;
}

.md-sm-view, .sm-view {
    display: none !important;
}

/* ------ color ------ */
.bg-orange {
    background: var(--main_orange);
}

.bg-light-orange {
    background: var(--light_orange);
}

.bg-gray1 {
    background: #f7f7f9;
}

.bg-gray2, .css_tr.bg-gray2 {
    background: #f2f2f2;
}

.text-black {
    color: var(--text_black);
}

.text-gray {
    color: var(--text_gray);
}

.text-darkgray {
    color: var(--text_darkgray);
}

.text-orange {
    color: var(--main_orange);
}

.text-mute-orange {
    color: var(--mute_orange);
}

.text-primary {
    color: #4c60a3 !important;
}

.text-danger {
    color: #db0000 !important;
}

.text-brown {
    color: #cc906f;
}

.text-blue {
    color: #4d62a1;
}

.text-breakall {
    word-break: break-all;
}
/* ------ component ------ */
.btn {
    color: var(--text_black);
    font-size: 1rem;
    line-height: 1;
    padding: 0.85rem 1.5rem 0.82rem 1.5rem;
    border-radius: 0.3rem;
}

    .btn:focus, .btn.focus {
        box-shadow: none;
    }

    .btn:not(:disabled):hover, .btn:not(:disabled):active {
        opacity: 0.8;
    }

    .btn.btn-xs {
        padding: 0.6rem 1.15rem 0.52rem 1.15rem;
        font-size: var(--size_15);
    }

    .btn.btn-lg {
        padding-left: 3.3rem;
        padding-right: 3.3rem;
        border-radius: 0.4rem;
    }

    .btn.btn-xl {
        padding: 1rem 2rem;
        min-width: 17rem;
        border-radius: 0.4rem;
    }

    .btn.btn-block { /*project detail*/
        display: block;
        width: 100%;
        padding: 1.3rem 1.5rem 1rem 1.5rem;
        border-radius: 0.5rem;
        font-size: var(--size_18);
    }

.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
    color: #fff;
    border-color: var(--main_orange);
    background: var(--main_orange);
}

.btn-light-orange, .btn-light-orange:hover, .btn-light-orange:active, .btn-light-orange:focus {
    color: var(--main_orange);
    border-color: var(--main_orange);
    background: var(--light_orange);
}

.btn-dark-orange, .btn-dark-orange:hover, .btn-dark-orange:active, .btn-dark-orange:focus {
    color: #fff;
    border-color: var(--dark_orange);
    background: var(--dark_orange);
}

.btn-outline-orange {
    color: var(--main_orange);
    border-color: var(--main_orange);
    background: #fff;
}

    .btn-outline-orange:hover, .btn-outline-orange:active, .btn-outline-orange:focus {
        color: #A77358;
        border-color: #A77358;
        opacity: 1;
    }

.btn-blue {
    color: #4C60A3;
    border-color: #eaf2fa;
    background: #eaf2fa;
}

    .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
        color: #fff;
        background: #8A9BD0;
        border-color: #8A9BD0;
        opacity: 1 !important;
    }

.btn-black {
    color: #fff;
    border-color: #000;
    background: #000;
}

    .btn-black:hover, .btn-black:active, .btn-black:focus {
        color: #fff;
    }

.btn-secondary {
    color: #fff;
}

.panel-btn-close {
    color: var(--text_gray);
    font-size: var(--size_24);
}

    .panel-btn-close:hover {
        color: var(--main_color);
        font-size: var(--size_24);
    }

.button-box {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .button-box .btn {
        margin: 0 0.25rem;
    }

/*link*/
.btn-link {
    font-size: var(--size_15);
    line-height: 1;
    border-radius: 0.25rem;
    border: 1px solid var(--main_orange);
    color: var(--main_orange);
    padding: 0.48rem 1.3rem;
    text-decoration: none;
}

    .btn-link:hover,
    .btn-link:focus,
    .btn-link:active {
        color: var(--dark_orange);
        border-color: var(--dark_orange);
        text-decoration: none;
    }

.text-orange-link {
    background: var(--light_orange);
}

/*.dropdown*/
.dropdown-menu {
    box-shadow: 0px 0.2rem 0.375rem rgba(0, 0, 0, 0.15);
    border: none;
}

.dropdown-item {
    font-size: var(--size_15);
    color: var(--text_black);
    padding: 0.3rem 1.3rem;
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: #f7f7f7;
        color: var(--main_orange);
    }

    .dropdown-item.active { /*, .dropdown-item:active*/
        color: #fff;
        background: var(--main_orange);
    }

.dropdown-toggle::after {
    color: var(--main_orange);
}

/*tag*/
.tag {
    border-radius: var(--size_13);
    font-size: var(--size_13);
    line-height: 1;
    padding: 0.5rem 0.75rem 0.4rem 0.75rem;
    background: #f4f4f4;
    color: var(--text_black);
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

    .tag.tag-lg {
        border-radius: var(--size_15);
        font-size: var(--size_15);
        padding: 0.55rem 0.9rem 0.4rem 0.9rem;
    }

    .tag.tag-sm {
        border-radius: var(--size_12);
        font-size: var(--size_12);
        padding: 0.4rem 0.7rem;
    }

.tag-orange {
    background: var(--light_orange);
    color: var(--main_orange);
}

.tag-blue {
    background: #eaf2fa;
    color: #4c60a3;
}

.test {
    font-size: 20px;
}
/*** 
====================================================================
2. Header 
====================================================================
***/

.main-header {
    padding: 2.5rem 0 0 0;
    height: calc(var(--header_h) + 2.5rem);
    border-bottom: 1px solid #e3e3e3;
}

    .main-header .navbar {
        padding: 0 !important;
        height: var(--header_h);
    }

    .main-header .navbar-brand {
        position: absolute;
        display: block;
        height: var(--header_h);
        left: calc(50% - 4.64rem);
        margin: 0 !important;
        padding: 11px 0 13px 0 !important;
    }

        .main-header .navbar-brand img {
            height: 100%;
        }

    .main-header .navbar-light .navbar-toggler {
        color: #707070;
        border: none;
        padding: 5px 0 0 0;
    }

    .main-header .collapse-logo {
        display: none;
    }

    /*---top-info---*/
    .main-header .top-info {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        height: 2.5rem;
        overflow: hidden;
        transition: height 0.3s ease;
    }

        .main-header .top-info.hide {
            height: 0;
        }

        .main-header .top-info > div {
            display: flex;
            height: 100%;
        }

        .main-header .top-info .info-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--size_17);
            color: var(--text_black);
            flex-grow: 1;
            transition: all 400ms;
            gap: 0;
        }

            .main-header .top-info .info-item:hover {
                gap: 0.5rem;
                background: var(--light_orange);
                color: var(--main_orange);
            }

            .main-header .top-info .info-item i {
                padding-left: 0.7rem;
                text-align: center;
            }

/*---menu---*/
.main-menu.navbar-nav {
    position: relative;
    flex-direction: row;
}

.main-menu > li > a, .main-button > li > a {
    padding: 6px 3px 6px 0 !important;
    margin-right: 4.1875rem;
    color: #555 !important;
    font-size: var(--size_20);
}

.main-menu > .dropdown > .dropdown-menu {
    visibility: hidden;
    display: block;
    opacity: 0;
    transition: all 400ms;
}

.main-menu > .dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
}

.sub-menu {
    list-style: none;
    display: block;
    margin: 2px 0 0.8rem 0;
}

.main-button > li > a {
    padding: 6px 0 6px 3px !important;
}

    .main-menu > li > a:hover,
    .main-menu > li > a:focus,
    .main-button > li > a:hover,
    .main-button > li > a:focus {
        background-color: transparent;
        color: var(--main_orange) !important;
    }

.main-menu > li > a::after {
    content: none;
}

.navbarClose {
    position: absolute;
    top: 47px;
    right: 28px;
    display: none;
    color: #555;
    border-color: #fff;
    cursor: pointer;
}

.navbarMask {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
}

/*---icon---*/
.menu-member-box {
    position: absolute;
    right: 5.25rem;
    top: 2.125rem;
}

.menu-search-box {
    position: absolute;
    right: 0.5rem;
    top: 2.125rem;
}

    .menu-member-box #memberMenuBtn .img-user,
    .menu-search-box #searchMenuBtn .img-search {
        display: inline-block;
        position: relative;
        /*margin-top: 6px;*/
    }

.menu-member-box #memberMenuBtn .img-user {
    /*margin-top: 5px;*/
}

    .menu-member-box #memberMenuBtn .img-user::before,
    .menu-search-box #searchMenuBtn .img-search::before,
    .menu-search-box .search-panel::after {
        content: '';
        background-image: url(../img/icon-avatar.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: var(--size_23);
        height: var(--size_23);
        display: block;
        transition: all 400ms;
    }

.menu-search-box #searchMenuBtn .img-search::before {
    background-image: url(../img/icon-search.svg);
}

.menu-member-box #memberMenuBtn:hover .img-user:before,
.menu-member-box .dropdown.show #memberMenuBtn .img-user::before {
    background-image: url(../img/icon-avatar-active.svg);
}

.menu-search-box #searchMenuBtn:hover .img-search:before,
.menu-search-box .dropdown.show #searchMenuBtn .img-search::before {
    background-image: url(../img/icon-search-active.svg);
}

/*---user---*/
.main-button {
    position: absolute;
    right: 0.8rem;
    top: 0;
    height: var(--header_h);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.menu-member-box > .dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
}

.menu-member-box .member-panel {
    position: absolute;
    border: none;
    box-shadow: 2px 1px 0.375rem rgba(0, 0, 0, 0.15);
    font-size: var(--size_14);
    color: #555;
    min-width: 12rem;
    right: -5.25rem;
    margin-top: 10px;
    z-index: 1001;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: all 400ms;
}

    .menu-member-box .member-panel .dropdown-item {
        padding: 0.4rem 3rem;
    }

    .menu-member-box .member-panel .dropdown-divider {
        height: 0;
        margin: 3.5px 0;
        overflow: hidden;
        border-top: 1px solid #e9ecef;
    }

    .menu-member-box .member-panel .item-binding,
    .avatar-box .item-binding {
        background: #7082B5;
        color: #eaf2fa;
        margin: 3px 0;
        padding: 0.8rem 1rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .menu-member-box .member-panel .item-binding::after,
        .avatar-box .item-binding::before {
            content: '';
            background-image: url(../img/icon-connect-light.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 1.65rem;
            height: 1.65rem;
            padding-left: 2.2rem;
            display: inline-block;
        }

        .menu-member-box .member-panel .item-binding:hover,
        .avatar-box .item-binding:hover {
            opacity: 0.8;
        }

        .menu-member-box .member-panel .item-binding.disabled,
        .avatar-box .item-binding.disabled {
            background: #EAF2FA;
            color: #4C60A3;
            opacity: 1;
        }

            .menu-member-box .member-panel .item-binding.disabled::after,
            .avatar-box .item-binding.disabled::before {
                background-image: url(../img/icon-connect.svg);
            }

    .menu-member-box .member-panel .btn-box {
        padding: 0.8rem 2.6rem 0.5rem 2.6rem;
    }

        .menu-member-box .member-panel .btn-box .btn {
            border-radius: var(--size_18);
            font-size: var(--size_14);
            width: 100%;
            padding: 0.45rem 0;
        }

/*---search---*/
.menu-search-box .search-panel {
    position: absolute;
    width: 100%;
    min-width: 1140px;
    right: -0.5rem;
    top: calc(100% + 1.6rem);
    margin: 0;
    padding: 0.35rem 2.5rem;
    padding-right: 0.5rem;
    border: 1px solid #e3e3e3;
    box-shadow: none;
    /*slide*/
    /*display: block;
    transition: all 350ms;
    transform-origin: top center;*/
}

.menu-search-box .dropdown.show .search-panel {
    /*transform: scale(1);*/
}

.menu-search-box .search-panel input {
    font-size: 1rem;
    border: none;
}

.menu-search-box .search-panel::after {
    background-image: url(../img/icon-search-light-g.svg);
    position: absolute;
    left: 1.2rem;
    top: 1rem;
}

.menu-search-box .searchClose {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}

.menu-search-box input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-image: url('../img/bnt-search-deleted.svg');
    background-size: contain;
    width: var(--size_23);
    height: var(--size_23);
}

/*panel-arrow*/
.panel-arrow:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-right: -12px;
    top: -8px;
    right: 50%;
    border: 6px solid black;
    border-color: #fff transparent transparent #fff;
    transform-origin: 0 0;
    transform: scaleX(0.8) rotate(45deg);
    box-shadow: -1px -2px 2px 0 rgba(0, 0, 0, 0.1);
}

.search-panel.panel-arrow:before {
    right: calc(10px + 0.5rem);
}

/*** 
====================================================================
3. Popup 
====================================================================
***/
.page-wrapper.pre {
    display: none !important;
}

#LoadingMask.pre {
    display: block !important;
    background-color: #fff;
}

#LoadingMask {
    display: none;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #5555;
    transition: opacity .15s linear;
}

.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    /*background: #fff8;*/
    width: 60px;
    height: 40px;
    text-align: center;
    padding: 0;
}


    .loading-inner .img-chill {
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        animation-timing-function: ease;
        -webkit-animation-name: chill-bounce;
        animation-name: chill-bounce;
        opacity: 0.8;
    }

@keyframes chill-bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

/*modal 共用*/
.modal {
    padding-right: 0 !important;
}

.modal-content {
    border-radius: 0.7rem;
    padding: 2rem;
}

.modal-header {
    padding: 0 0 1rem 0;
}

    .modal-header .close {
        opacity: 1;
        font-size: 2rem;
        margin-top: -1.5rem;
        text-shadow: none;
    }

    .modal-header .modal-title {
        font-size: var(--size_26);
    }

.modal-body {
    padding: 1.5rem 1.2rem 0 1.2rem;
}

    .modal-body .form-group .btn-box {
        margin: 3rem 0;
    }

/*** 
====================================================================
4. Footer 
====================================================================
***/
.footer_area {
    border-top: 1px solid #ebebeb;
    padding: 4.5rem 0 2.8rem 0;
    background-image: url('../img/bg-footer.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

    .footer_area > div > .row > .col-lg-4 {
        padding-left: 0;
    }

    .footer_area ul {
        list-style-type: none;
        padding: 0;
    }

    .footer_area .footer-menu {
        display: inline-flex;
        width: 100%;
        font-size: var(--size_16);
        margin-bottom: 1rem;
    }

        .footer_area .footer-menu b {
            color: #000;
            font-weight: normal;
            display: block;
            margin-bottom: var(--size_18);
        }

        .footer_area .footer-menu > li {
            margin-right: 10%;
        }

        .footer_area .footer-menu li > a {
            display: block;
            margin-bottom: 0.75rem;
        }

    .footer_area .share-box {
        display: inline-block;
    }

        .footer_area .share-box a,
        .collapse-share .share-box a {
            border-color: #707070;
            color: #000;
        }

            .footer_area .share-box a:hover {
                border-color: var(--main_orange);
                color: var(--main_orange);
            }

    .footer_area .footer-logo {
        display: inline-block;
        margin-top: 0.5rem;
        margin-left: 0.2rem;
    }

        .footer_area .footer-logo img {
            display: block;
            height: 3.15rem;
        }

    .footer_area .copyright {
        display: block;
        text-align: center;
        color: var(--text_gray);
        font-size: var(--size_15);
        padding-top: 0.5rem;
    }

/*** 
====================================================================
5. Banner 
====================================================================
***/

/*----------owl----------*/

/*nav*/
.owl-carousel {
    z-index: auto;
}

.owl-prev, .owl-next {
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    margin-top: -2.5rem;
    width: 2rem;
    height: 2rem;
    border: none;
    text-align: center;
    transition: all 400ms;
    border: 1px solid var(--main_orange);
    border-radius: 50%;
}

.owl-prev {
    left: 1%;
}

.owl-next {
    right: 1%;
}

    .owl-prev i, .owl-next i {
        color: var(--main_orange);
        font-size: var(--size_26);
        line-height: 0;
    }

    .owl-next i {
        padding-left: 0.1rem;
    }

.owl-prev i {
    padding-right: 0.1rem;
}

.owl-prev:hover, .owl-prev:focus,
.owl-next:hover, .owl-next:focus {
    background: #F57F3457;
}

/*dot*/
.owl-theme .owl-dots {
    text-align: center;
}

    .owl-theme .owl-dots .owl-dot {
        display: inline-block;
        zoom: 1;
    }

        .owl-theme .owl-dots .owl-dot span,
        .swiper-pagination-bullet {
            width: var(--size_14);
            height: var(--size_14);
            margin: 5px 0.55rem;
            background-color: #ebebeb;
            display: inline-block;
            transition: opacity 200ms ease;
            border-radius: 30px;
            opacity: 1;
        }

        .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span,
        .swiper-pagination-bullet-active {
            background: #fff;
            opacity: 1;
            border: var(--main_orange) 1.8px solid;
            /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
        }

.que-carousel.owl-theme .owl-dots {
    margin-top: 5px;
}

/*----------banner----------*/
.bannerArea-item {
    /*height: 60vw;*/
    /*max-height: 660px;*/
    position: relative;
}

    /*舊*/
    .bannerArea-item .image-box {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 33%;
        border-radius: 20px;
    }

.index-banner .bannerArea-item .image-box {
    padding-bottom: 50%;
    border-radius: 20px;
}

.bannerArea-item .image-box img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

/*----------banner ad----------*/

.bannerAd-item {
    position: relative;
}

    .bannerAd-item .image-box {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 10.83%;
        border-radius: 10px;
    }

        .bannerAd-item .image-box img {
            width: 100%;
            height: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translateY(-50%) translateX(-50%);
        }


/*--owl-carousel--*/
.banner-carousel {
    padding: 2.5rem 2.8rem;
}

    .banner-carousel.index-banner {
        padding: 2.5rem 0;
    }

        .banner-carousel.index-banner .owl-item:not(.center) {
            filter: brightness(0.6) opacity(0.5) grayscale(0.3);
        }

    .banner-carousel .nav-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        top: 50%;
    }

    /* .banner-carousel.owl-carousel .owl-stage-outer {
        border-radius: 8px;
    }*/

    .banner-carousel.index-banner .owl-prev,
    .banner-carousel.index-banner .owl-next,
    .teamIndex-carousel .owl-prev,
    .teamIndex-carousel .owl-next {
        width: 3.5rem;
        height: 3.5rem;
        border-width: 3px;
        margin-top: -3.5rem;
    }

        .banner-carousel.index-banner .owl-prev i,
        .banner-carousel.index-banner .owl-next i,
        .teamIndex-carousel .owl-prev i,
        .teamIndex-carousel .owl-next i {
            font-size: 40px;
        }

    .banner-carousel .owl-prev {
        left: calc(50px + 1%);
    }

    .banner-carousel .owl-next {
        right: calc(50px + 1%);
    }

    .banner-carousel.index-banner .owl-prev {
        left: calc(50px + 6%)
    }

    .banner-carousel.index-banner .owl-next {
        right: calc(50px + 6%)
    }

    .banner-carousel .donts-container {
        position: relative;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .banner-carousel .dots-outter {
        padding-top: 1rem;
    }


/*** 
====================================================================
6. Section  
====================================================================
***/

.section_area {
    position: relative;
    padding: 1rem 0 2rem 0;
}

/*.area-title 共用:首頁、專案內頁*/
.area-title {
    font-size: var(--size_25);
    color: #000;
    border-bottom: 2px solid #d0d0d0;
    padding-bottom: 0.5rem;
    margin-bottom: 2.2rem;
    position: relative;
    z-index: 1;
}

    .area-title span {
        display: inline-block;
        font-size: var(--size_14);
        margin-left: 0.2rem;
        letter-spacing: 0.06rem;
        position: relative;
        z-index: -1;
    }

        .area-title span::before {
            content: '';
            background: var(--mute_orange);
            position: absolute;
            top: -2px;
            left: -1.7rem;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
        }

.section_area .area-more {
    font-size: var(--size_15);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    position: absolute;
    right: 0;
    bottom: 0.5rem;
}

    .section_area .area-more::after {
        content: '';
        background-image: url(../img/btn-icon-arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 16px;
        height: 16px;
        display: inline-block;
        margin-left: 4px;
        transition: all 400ms;
    }

    .section_area .area-more:hover {
        transform: translateX(4px);
    }

        .section_area .area-more:hover::after {
            background-image: url(../img/btn-icon-arrow-active.svg);
        }

/*--block--*/
.block {
    margin-bottom: -10px;
}

    .block.row {
        margin-right: calc(-1 * var(--size_21));
        margin-left: calc(-1 * var(--size_21));
    }

    .block .box {
        padding-left: var(--size_21);
        padding-right: var(--size_21);
        margin-bottom: var(--size_25);
    }

        .block .box .box-inner {
            position: relative;
            transition: all 400ms;
            /*border: 1px solid transparent;*/
            border-radius: 10px;
        }

            .block .box .box-inner .image-box,
            .td-image .image-box {
                border-radius: 10px;
                overflow: hidden;
            }

    .block:not(.no-hover) .box .box-inner .image-box:hover img {
        opacity: 0.9;
        /*transform: scale(1.1);*/
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
    }

    .block .box .box-inner img {
        width: 100%;
    }

/*border*/
.block-border .box .box-inner {
    border-radius: 5px;
    border: 1px solid #ccc;
}

/*box-rectangle */
.block-shape .box .box-inner .image-box,
.td-image .image-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 0%;
    background: #eee;
}

    .block-shape .box .box-inner .image-box img,
    .td-image .image-box img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }

/*--1:1--*/
.shape-100 .image-box {
    padding-bottom: 100% !important;
}

    .shape-100 .image-box img.height-100 {
        width: auto !important;
        height: 100% !important;
    }

/*--2:1--*/
.shape-50 .image-box {
    padding-bottom: 50% !important;
}

    .shape-50 .image-box img {
        width: auto !important;
        height: 100% !important;
    }

/*--690x375*/
.shape-54 .image-box {
    padding-bottom: 54.35% !important;
}

/*--16:9--*/
.shape-56 .image-box {
    padding-bottom: 56.25% !important;
}

/*--480x320*/
.shape-66 .box .box-inner .image-box {
    padding-bottom: 66.67% !important;
}

/*--900x648*/
.shape-72 .box .box-inner .image-box {
    padding-bottom: 72% !important;
}

.shape-72 .image-box img.height-100 {
    width: auto !important;
    height: 100% !important;
}

/*--750x584*/
.shape-77 .box .box-inner .image-box {
    padding-bottom: 77.87% !important;
}

/*txt*/
.block .box .box-inner .block-content {
    padding: 0.8rem 3px 1.5rem 3px;
    width: 100%;
    color: var(--text_black);
}

    .block .box .box-inner .block-content .block-category {
        /*transform: scale(0.97);
        transform-origin: left;*/
        margin-bottom: 5px;
        margin-left: -4px;
        width: calc(100% + 12px);
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .block .box .box-inner .block-content .block-title {
        font-size: var(--size_19);
        line-height: 1.25;
        color: #000;
        text-align: left;
        margin-bottom: 1.5rem;
        transition: all 400ms;
        /*two line*/
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: calc(2 * var(--size_19) + 0.5rem);
    }

    .block .box .box-inner .block-content a:hover .block-title {
        color: var(--main_orange);
    }

    .block .box .box-inner .block-content .block-team {
        font-size: var(--size_14);
        line-height: normal;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .block .box .box-inner .block-content .block-text {
        font-size: var(--size_13);
        line-height: 1.8;
        color: var(--text_darkgray);
    }

    .block .box .box-inner .block-content .block-date {
        float: right;
    }

    .block .box .box-inner .block-content .progress {
        margin-top: 0.5rem;
        margin-bottom: 0.6rem;
        height: 0.65rem;
        border-radius: 0.4rem;
    }

    .block .box .box-inner .block-content .block-price {
        font-size: var(--size_18);
        color: #000;
    }

    .block .box .box-inner .block-content .progress-txt {
        float: right;
        font-size: var(--size_14);
        color: var(--main_orange);
    }

/*---tag---*/
.tag-icon-blue, .tag-icon-brown, .tag-icon-orange {
    color: #fff;
    padding-left: 1.875rem;
}

    .tag-icon-blue.tag-sm, .tag-icon-brown.tag-sm, .tag-icon-orange.tag-sm {
        padding-left: 1.7rem;
    }

    .tag-icon-blue::before, .tag-icon-brown::before, .tag-icon-orange::before {
        color: #fff;
        content: '';
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: var(--size_25);
        height: var(--size_25);
        display: block;
        position: absolute;
        left: 5px;
        top: 1px;
    }

.tag-icon-blue {
    background: #4c60a3;
}

    .tag-icon-blue::before {
        background-image: url(../img/icon-tag-b.svg);
    }

.tag-icon-brown {
    background: var(--dark_orange);
}

    .tag-icon-brown::before {
        background-image: url(../img/icon-tag-o.svg);
    }

.tag-icon-orange {
    background: var(--main_orange);
}

    .tag-icon-orange::before {
        background-image: url(../img/icon-tag-g.svg);
    }

.tag-user-blue, .tag-user-orange {
    padding: 0.4rem 0.75rem 0.3rem 1.8rem;
    border-radius: var(--size_14);
    font-size: var(--size_14);
}

    .tag-user-blue::before, .tag-user-orange::before {
        content: '';
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: var(--size_16);
        height: var(--size_16);
        display: block;
        position: absolute;
        left: 10px;
        top: 5px;
    }

    .tag-user-blue::before {
        background-image: url(../img/icon-member-checked-b.svg);
    }

    .tag-user-orange::before {
        background-image: url(../img/icon-member-checked.svg);
    }

/*---progress---*/
.progress-bar {
    background: var(--main_orange);
    transform-origin: left;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    /*animation-name: moveProgress;*/
}

@keyframes moveProgress {
    0% {
        transform: scaleX(0);
    }

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

/*---coverpage---*/
.bg-coverpage {
    background-image: url('../img/bg-coverpage.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.coverpage_area {
    position: relative;
    padding: 3rem 0 3.3rem 0;
    margin-bottom: 3rem;
    background-color: var(--light_orange);
}

    .coverpage_area .block .box {
        margin-bottom: 1.5rem;
        width: 100%;
    }

        .coverpage_area .block .box .box-inner {
            background: #fff;
        }

        .coverpage_area .block .box:not(.style-full) .box-inner:before {
            content: '';
            border: 2px solid #FCCFAE;
            border-radius: 5px;
            position: absolute;
            top: 15px;
            left: 15px;
            width: calc(100% - 30px);
            height: calc(100% - 30px);
            z-index: 1;
        }

        .coverpage_area .block .box .box-inner .image-content {
            position: relative;
        }

            .coverpage_area .block .box .box-inner .image-content .image-box {
                z-index: 0;
                border-radius: 10px 10px 0 0;
            }

            .coverpage_area .block .box .box-inner .image-content .image-link {
                z-index: 2;
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

        .coverpage_area .block .box .box-inner .block-content {
            padding: 2rem 30px;
            text-align: center;
            position: relative;
            z-index: 2;
        }


            .coverpage_area .block .box .box-inner .block-content .block-logo {
                max-width: 3.3rem;
                max-height: 3.3rem;
                margin-bottom: 0.5rem;
            }

            .coverpage_area .block .box .box-inner .block-content .block-title {
                font-size: var(--size_25);
                text-align: center;
                margin-bottom: 0.8rem;
            }

            .coverpage_area .block .box .box-inner .block-content .block-text {
                font-size: var(--size_14);
                color: var(--text_black);
                line-height: 1.7;
                margin-bottom: 1rem;
                /*3 line*/
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }

            .coverpage_area .block .box .box-inner .block-content .block-date {
                float: initial;
                font-size: var(--size_16);
                padding-top: 0.8rem;
                margin-bottom: 0.5rem;
            }

            .coverpage_area .block .box .box-inner .block-content .block-pacakge {
                display: flex;
                justify-content: center;
                margin-left: -15px;
                margin-right: -15px;
            }

                .coverpage_area .block .box .box-inner .block-content .block-pacakge > div {
                    padding: 0 15px;
                    flex-basis: 50%;
                    max-width: 250px;
                    text-align: left;
                    font-size: var(--size_13);
                }

                    .coverpage_area .block .box .box-inner .block-content .block-pacakge > div + div {
                        border-left: 1px solid #e3e3e3;
                    }

                .coverpage_area .block .box .box-inner .block-content .block-pacakge .text-danger {
                    font-size: var(--size_22);
                }

/**/
.shape-72 .box.style-full .box-inner .image-box {
    padding-bottom: 45.96% !important; /*143.33% !important;*/
}

.coverpage_area .block .box.style-full .box-inner .image-content .image-box {
    border-radius: 10px;
}

/*.shape-72 .box.style-full .image-box img.height-100 {
    width: 100% !important;
    height: auto !important;
}*/

.coverpage_area .btn.btn-xs {
    width: 100%;
    margin-top: 0.5rem;
}

.coverpage_area .btn.btn-xl {
    font-size: var(--size_18);
}

    .coverpage_area .btn.btn-xl i {
        margin-right: 4px;
    }


/*** 
====================================================================
7. List
====================================================================
***/

/*list*/
.list_area { /*專案列表*/
    position: relative;
    padding: 0 0 2rem 0;
}

/*-----breadcrumb-----*/

.breadcrumb {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    background-color: transparent;
    border-radius: .25rem;
}

    .breadcrumb.bySide {
        position: absolute;
        z-index: 1;
    }

    .breadcrumb > .active {
        font-weight: 600;
        color: #917e6e;
    }

    .breadcrumb, .breadcrumb a {
        color: #9fa0a0;
        font-size: 16px;
        font-weight: 600;
    }

        .breadcrumb a:hover {
            color: #917e6e;
        }

        .breadcrumb > li {
            color: #6b7a5b;
        }

            .breadcrumb > li + li:before {
                font-family: "FontAwesome";
                content: "\f105";
                padding: 0 10px 0 7px;
                color: #9fa0a0;
                font-size: 16px;
            }

/*-----toolbar-----*/
.list_area .toolbar {
    display: block;
    background: #F0F0F0;
    padding: 3.75rem 0 4.75rem;
    margin-bottom: -2.3rem;
}

    /*type-box*/
    .list_area .toolbar .type-box .slide-projecttype a.swiper-slide {
        font-size: var(--size_16);
        margin: 0 0.4rem 0 0.8rem;
        width: auto;
    }

    /*dropdown-box*/
    .list_area .toolbar .dropdown-box {
        text-align: right;
    }

        .list_area .toolbar .dropdown-box > * {
            position: relative;
            display: inline-block;
            margin-left: 0.5rem;
        }

        .list_area .toolbar .dropdown-box .btn-empty-select {
            color: var(--text_black);
            font-size: var(--size_16);
            background: transparent;
            border-radius: 0;
            border: 1px solid transparent;
            border-bottom: 1px solid var(--text_gray);
            padding: 0 0 0.4rem 0.625rem;
            text-align: left;
            min-width: 10rem;
        }

        .list_area .toolbar .dropdown-box .btn-clear {
            background: #cecece;
            color: #707070;
            border-radius: 50%;
            padding: 0;
            display: inline-flex;
            width: 1.5rem;
            height: 1.5rem;
            justify-content: center;
            align-items: center;
        }

            .list_area .toolbar .dropdown-box .btn-clear:hover,
            /*.list_area .toolbar .toolbar .dropdown-box .btn-empty-select:hover,*/
            .list_area .toolbar .dropdown-box .btn-empty-select.active {
                color: var(--main_orange);
            }

        .list_area .toolbar .dropdown-box .btn-empty-select:not(.active):hover {
            opacity: 0.8;
        }

        .list_area .toolbar .dropdown-box .btn-empty-select::after {
            position: absolute;
            right: 0.35rem;
            top: 0.65rem;
        }

        .list_area .toolbar .dropdown-box .dropdown-menu {
            border-radius: 0px 0px 5px 5px;
            margin-top: 0;
        }

/*-----toolbar key-----*/
.list_area .toolbar_keyword {
    background: #F0F0F0;
    padding: 1rem 0;
    margin-bottom: 3.5rem;
    text-align: center;
    font-size: var(--size_16);
}

.list_area .empty {
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 9.5rem 1rem 10rem 1rem;
    display: none;
}

    .list_area .empty img {
        width: 53%;
    }

    .list_area .empty .empty_message {
        line-height: 2rem;
        margin-top: 1.65rem;
        margin-bottom: 0.9rem;
        padding: 0 4rem;
        width: auto;
        max-width: 100%;
        display: inline-block;
        position: relative;
        min-width: 19rem;
        /*one line*/
        /*overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;*/
    }

        .list_area .empty .empty_message::after {
            content: '';
            background-image: url(../img/chill-point-sit.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 4rem;
            height: 4rem;
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            transition: all 400ms;
        }

/*-----pagination-----*/
.pagination_area {
    margin: 6rem 0;
    text-align: center;
}

    .pagination_area.md {
        margin: 4rem 0;
    }

.pagination {
    margin: 0;
    justify-content: center;
}

    .pagination > li > a {
        border: none;
        margin: 0;
        font-size: var(--size_16);
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        border: none;
        display: block;
        line-height: 1;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .pagination > li > a:hover,
        .pagination > li > a:focus {
            background-color: #f7f7f7;
        }

    .pagination > li:first-child a,
    .pagination > li:last-child a {
        color: var(--main_orange);
        font-size: var(--size_24);
    }

    .pagination > .active > a,
    .pagination > .active > a:hover,
    .pagination > .active > a.focus {
        background-color: var(--main_orange);
        color: #fff !important;
    }

    .pagination > li.more > a {
        color: var(--text_black);
        background-color: transparent !important;
        cursor: initial;
        padding-bottom: 0.5rem;
    }

.pagination_area .pagination.inline {
    display: inline-flex;
    flex-wrap: wrap;
}

.pagination_area .page-left {
    float: left;
    margin-top: -2em;
}

.pagination_area .page-goto {
    display: inline-flex;
    align-items: center;
    height: 3.2rem;
}

    .pagination_area .page-goto #page-text {
        width: 3.5rem;
        height: 2.6rem;
        padding: 5px 10px;
        margin-right: 4px;
        border-color: var(--text_gray);
    }

/*** 
====================================================================
8. Detail
====================================================================
***/

/*share-box 共用*/
.share-box {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

    .share-box li {
        display: inline-block;
        float: left;
        margin-right: 7px;
    }

        .share-box li:last-child {
            margin-right: 0;
        }

        .share-box li a {
            border: 1px solid transparent;
            font-size: var(--size_18);
            border-radius: 50%;
            height: 2.8125rem;
            width: 2.8125rem;
            padding-top: 0.1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

/*detail: 專案內頁*/
.detail_area .main-row {
    margin-right: -0.9rem;
}

    .detail_area .main-row .col-lg-8 {
        padding-right: 2.8rem;
    }

    .detail_area .main-row .col-lg-4 {
        padding-left: 0;
        padding-right: 0.9rem;
    }

/*---top_area---*/
.detail_area .top_area {
    padding: 3.8rem 0 20px 0;
}

    .detail_area .top_area .block,
    .detail_area .top_area .block .box {
        padding: 0;
        margin: 0;
    }

/*video*/
.block .box .box-inner .video-box i.btn-play {
    position: absolute;
    left: calc(50% - 3rem);
    top: calc(50% - 3rem);
    width: 6rem;
    height: 6rem;
    cursor: pointer;
    transition: all 400ms;
}

    .block .box .box-inner .video-box i.btn-play::after {
        content: '';
        background-image: url(../img/icon-vedio-player.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }

.block .box .box-inner .video-box .btn-play:hover {
    opacity: 0.8;
}

/*detail*/
.detail_area .top_area .block .box .box-inner .block-content {
    padding: 0;
}

    .detail_area .top_area .block .box .box-inner .block-content .block-category {
        margin-bottom: 0.375REM;
    }

        .detail_area .top_area .block .box .box-inner .block-content .block-category .tag {
            margin-right: 0.2rem;
        }

    .detail_area .top_area .block .box .box-inner .block-content .block-title {
        font-size: var(--size_28);
        min-height: 6.5rem;
        margin-bottom: 1rem;
        display: block;
    }

    .detail_area .top_area .block .box .box-inner .block-content .block-foreword {
        line-height: 1.4;
        font-size: var(--size_15);
        padding-bottom: 0.5rem;
        min-height: 40px;
    }

    .detail_area .top_area .block .box .box-inner .block-content .block-price {
        font-size: var(--size_30);
        color: var(--text_black);
    }

    .detail_area .top_area .block .box .box-inner .block-content .block-text,
    .detail_area .top_area .block .box .box-inner .block-content .block-text a {
        font-size: var(--size_15);
        color: var(--text_gray);
        line-height: 2.2;
    }

        .detail_area .top_area .block .box .box-inner .block-content .block-text a:hover,
        .detail_area .top_area .block .box .box-inner .block-content .block-text a:focus {
            color: var(--main_orange);
        }

    .detail_area .top_area .block .box .box-inner .block-content .progress-txt {
        font-size: var(--size_16);
        float: initial;
        display: inline-block;
        width: 4rem;
    }

    .detail_area .top_area .block .box .box-inner .block-content .progress {
        margin-top: 0.1rem;
        margin-bottom: 1.25rem;
    }

.detail_area .top_area .pricerow {
    font-size: var(--size_25);
    color: var(--main_orange);
    margin: 0;
    align-items: flex-end;
    position: relative;
}

    .detail_area .top_area .pricerow > div {
        padding: 0;
    }

    .detail_area .top_area .pricerow > .right {
        position: absolute;
        right: 0;
        top: -36px;
        text-align: center;
        font-size: 88%;
        line-height: 1.1;
    }

        .detail_area .top_area .pricerow > .right h6 {
            font-size: var(--size_13);
        }

        .detail_area .top_area .pricerow > .right span {
            font-size: var(--size_14);
        }

    .detail_area .top_area .pricerow span {
        font-size: var(--size_15);
    }

    .detail_area .top_area .pricerow h6 {
        font-size: var(--size_14);
        color: var(--text_gray);
    }

.detail_area .top_area .block .box .box-inner .block-content .block-date,
.detail_area .top_area .block .box .box-inner .block-content .block-team {
    float: initial;
    font-size: var(--size_15);
    line-height: 1.5;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.detail_area .top_area .block .box .box-inner .block-content label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
}

    .detail_area .top_area .block .box .box-inner .block-content label:after {
        content: '';
        border-left: 1px solid #D0D0D0;
        display: inline-block;
        padding-right: 0.4rem;
        margin-left: 0.4rem;
        height: var(--size_15);
    }

.detail_area .top_area .block .box .box-inner .block-content .phone-view {
    display: none;
}

.detail_area .top_area .block .box .box-inner .addLikeBtn {
    position: absolute;
    right: 1.2rem;
    top: -1.6rem;
    color: var(--text_black);
    display: flex;
    justify-content: center;
    z-index: 1;
    background: #f7f7f9;
}

    .detail_area .top_area .block .box .box-inner .addLikeBtn:after {
        content: '';
        background-image: url(../img/icon-follow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1.45rem;
        height: 1.45rem;
        display: block;
        margin-left: 0.2rem;
        transition: all 400ms;
    }

    .detail_area .top_area .block .box .box-inner .addLikeBtn:hover:after {
        background-image: url(../img/icon-follow-active.svg);
    }

.detail_area .top_area .block .box .box-inner .btn-orange {
    margin-top: 1.8rem;
}

.dotted-gradient {
    background-image: linear-gradient(to right, #a7a7a7 45%, transparent 20%);
    background-position: top;
    background-size: 0.6rem 0.1rem;
    background-repeat: repeat-x;
    height: 0.1rem;
    display: block;
    margin: 1rem 0;
}

    .dotted-gradient.light {
        background-image: linear-gradient(to right, #e3e3e3 45%, transparent 20%);
    }

/*----_top----*/
.detail_area .top_area.main66 .main-row > div,
.detail_area .top_area.main48 .main-row > div {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.detail_area .top_area.main66 .main-row,
.detail_area .top_area.main48 .main-row {
    margin-right: -1.2rem;
}

    .detail_area .top_area.main66 .main-row .col-left {
        padding-left: 15px;
        padding-right: 2.2rem;
    }

    .detail_area .top_area.main48 .main-row .col-left {
        padding-left: 15px;
        padding-right: 0.2rem;
    }

    .detail_area .top_area.main66 .main-row .col-right {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .detail_area .top_area.main48 .main-row .col-right {
        padding-left: 2rem;
        padding-right: 1.2rem;
    }

.detail_area .top_area.main48 .block .box .box-inner .addLikeBtn,
.detail_area .top_area.main48 .block .box .box-inner .block-content .dotted-gradient,
.detail_area .top_area.main48 .block .box .box-inner .btn-orange {
    display: none;
}

.detail_area .top_area.main66 .block .box .box-inner .block-content .block-title,
.detail_area .top_area.main48 .block .box .box-inner .block-content .block-title {
    min-height: 5.8rem;
}

/*--copy--*/
.detail_area .share_area.row {
    padding: 2.5rem 0 2.2rem 0;
    margin: -0.7rem;
}

    .detail_area .share_area.row > div {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

.detail_area .share_area .input-group {
    display: flex;
    align-items: center;
}

    .detail_area .share_area .input-group .text-url {
        font-size: var(--size_15);
        color: var(--text_gray);
        background: #fff;
        height: calc(1.5em + 1.1rem + 2px);
        padding: 0.4rem 0.8rem 0.4rem 2.4rem;
        margin-left: -1.4rem;
        position: relative;
        z-index: 1;
    }

    .detail_area .share_area .input-group .copy-btn::after {
        content: '';
        background-image: url(../img/icon-share-copy.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2.8rem;
        height: 2.8rem;
        display: block;
        margin-left: 0.2rem;
        transition: all 400ms;
        position: relative;
        z-index: 2;
    }

    .detail_area .share_area .input-group .copy-btn:hover::after {
        background-image: url(../img/icon-share-copy-active.svg);
    }

    /*--share--*/
    .detail_area .share_area .input-group .share-box li {
        display: inline-block;
        float: left;
        margin: 0 0 0 0.3rem;
    }

    .detail_area .share_area .input-group .share-box a {
        background: #ebebeb;
        color: #a7a7a7;
    }

        .detail_area .share_area .input-group .share-box a.ShareFacebook:hover {
            background: #E8F5FA;
            color: #3B5A99;
        }

        .detail_area .share_area .input-group .share-box a.ShareLine:hover {
            background: #E6FFE7;
            color: #1DC121;
        }

        .detail_area .share_area .input-group .share-box a.ShareTwitter:hover {
            background: #E2F7FF;
            color: #21C2FD;
        }

/*---tab 共用---*/
.nav-tabs {
    border: none;
}

    .nav-tabs .nav-item {
        margin-right: 1.5rem;
        width: auto;
    }

    .nav-tabs .nav-link {
        color: var(--text_darkgray);
        background: none;
        border: none;
        position: relative;
        padding: 1.3rem 1rem;
    }

        .nav-tabs .nav-link:hover,
        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #555555;
            background: none;
            border: none;
        }

            .nav-tabs .nav-link.active::after {
                content: "";
                position: absolute;
                bottom: -0.05rem;
                left: 25%;
                width: 50%;
                height: 0.25rem;
                border-radius: 10px;
                background: var(--main_orange);
            }

        .nav-tabs .nav-link img {
            margin-right: 2px;
        }

.tab-area .swiper-container {
    overflow: initial;
}

.tab-area.tabgray .nav {
    justify-content: center;
}

.normal_page .nav-tabs.bar-left .nav-link { /*Team、Member、ProjectSetting*/
    padding-left: 0.1rem;
}

    .normal_page .nav-tabs.bar-left .nav-link.active::after {
        left: 0.1rem;
    }

.tab-content { /*Team、Member、ProjectSetting*/
    padding: 4.3rem 0 2.4rem 0;
    position: relative;
}

    .tab-content.bg-gray1 {
        margin-bottom: -4.5rem;
        padding-bottom: calc(4.5rem + 2.4rem);
    }

.tab-area.tabgray + .tab-content::before {
    content: '';
    background: #F7F7F9;
    width: 100%;
    height: 11rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.tab-content h2 {
    color: var(--text_darkgray);
    font-size: var(--size_22);
    margin-bottom: 1rem;
}

.tab-area .count {
    color: var(--main_orange);
    border-radius: 13px;
    background: var(--light_orange);
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.tab-area.tabgray .count {
    background: #e3e3e3;
}

.empty-row {
    background: #f0f0f0;
    color: var(--text_darkgray);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    position: relative;
}

.nav.swiper-wrapper {
    flex-wrap: nowrap;
}

.detail_area .tab-area {
    top: 0;
    z-index: 1000;
}

/*bottom_area*/
.detail_area .bottom_area {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.bottom_area .content_area {
    padding-bottom: 4rem;
}

    .bottom_area .content_area + .area-title {
        margin-bottom: 2.2rem;
    }

/*detail doggle*/
.detail_area .detail-toggler {
    color: var(--main_orange);
    font-size: var(--size_16);
    display: none;
    position: relative;
    z-index: 10;
    width: 100%;
    border-top: 1px solid #f0f0f0;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    opacity: 1;
}

    .detail_area .detail-toggler::after {
        content: '';
        position: absolute;
        bottom: calc(100% + 1px);
        left: -1px;
        width: calc(100% + 2px);
        height: 100px;
        background: transparent linear-gradient(180deg, #FFFFFF00 0%, #FFFFFFED 50%, #ffffff 100%) 0% 0% no-repeat padding-box;
        z-index: 1;
    }

    .detail_area .detail-toggler::before {
        content: '';
        background-image: url(../img/icon-collapse.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: calc(50% - 10px);
        z-index: 2;
        top: -10px;
        transform: scaleY(-1);
    }

.detail_area .detail-collapse {
    display: block;
}

/*news-box*/
.detail_area .news-box {
    padding: 0.7rem 1rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    margin-bottom: 2rem;
}

    .detail_area .news-box .box-name {
        position: relative;
        top: -3px;
    }

    .detail_area .news-box .news-date {
        margin-bottom: 0.5rem;
        display: inline-flex;
    }

/*content_area: 內文*/
.content_area {
    color: var(--text_black);
    font-size: var(--size_15);
    line-height: var(--size_25);
}

.normal-family {
    font-family: 'Noto Sans TC','Microsoft JhengHei','Open Sans','Helvetica', Arial, sans-serif !important;
}

.content_area.normal-family h1, .content_area.normal-family h2, .content_area.normal-family h3, .content_area.normal-family h4, .content_area.normal-family h5, .content_area.normal-family h6 {
    font-weight: 600;
}

.content_area h1, .content_area h2, .content_area h3, .content_area h4, .content_area h5, .content_area h6 {
    font-weight: 500;
    line-height: 1.3;
    color: #000;
    padding-top: 1rem;
    margin-bottom: 0.6rem;
}

.content_area > *:first-child {
    padding-top: 0;
}

.content_area h1 {
    font-size: var(--size_25);
}

.content_area h2 {
    font-size: var(--size_24);
}

.content_area h3 {
    font-size: var(--size_20);
}

.content_area h4 {
    font-size: var(--size_17);
}

.content_area h5, .content_area h6 {
    font-size: var(--size_15);
}

.content_area li {
    margin-bottom: 0.5rem;
}

.content_area ul {
    list-style-type: none;
}

    .content_area ul > li:not(.ck-list__item)::before {
        content: "";
        background: var(--main_orange);
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        margin-left: -1rem;
        margin-right: 0.6rem;
        margin-bottom: 0.1rem;
    }

.content_area:not(.normal-family) a {
    color: var(--main_orange);
}

    .content_area:not(.normal-family) a:hover {
        color: var(--dark_orange);
    }

.content_area p:last-child {
    padding: 0;
}

.content_area img {
    max-width: 100%;
}

.content_area figure.media {
    clear: both;
    display: block;
}

.content_area figure {
    text-align: center;
}

    .content_area figure.image-style-side {
        float: right;
    }

.content_area .image.image_resized {
    margin: 0.9em auto;
}

/*ck preview*/
.content_area > .preview {
    max-width: 800px;
    border-radius: 5px;
    background: #fff;
    padding: 2.5rem !important;
}

.content_area > .ck-editor,
.content_area + hr {
    max-width: 750px;
    margin-left: 0;
}

.modal .content_area > .ck-editor {
    max-width: 690px;
}

.detail_area + .form-group .btn-box {
    max-width: 780px;
}

/*youtube short*/
.content_area .embed-responsive-9by16 {
    max-width: 22rem;
    margin: 0 auto;
}

.embed-responsive-9by16::before {
    padding-top: 177.78%;
}

/*team-block*/
.side_area .team-block {
    padding: 1.6rem 1.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    margin-bottom: 1.3rem;
}

.team-block .team-top {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

    .team-block .team-top .team-name {
        width: calc(100% - 6.8rem);
    }

    .team-block .team-top label {
        color: var(--text_gray);
        font-size: var(--size_15);
        margin-bottom: 0.1rem;
    }

    .team-block .team-top h4 {
        font-size: var(--size_22);
    }

.team-block .team-description {
    /*three line*/
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.team-block .team-contact {
    margin-top: 1.7rem;
}

.team-contact {
    display: flex;
    align-items: center;
    position: relative;
}

    .team-contact:hover {
        opacity: 0.8;
    }

    .team-contact span {
        background: var(--main_orange);
        color: #fff;
        border-radius: var(--size_16);
        font-size: var(--size_14);
        line-height: 1;
        padding: 0.57rem 1.2rem 0.55rem 1.6rem;
        margin-left: -1rem;
        display: inline-block;
    }

    .team-contact::before {
        content: '';
        background-image: url(../img/icon-contact-team.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2.68rem;
        height: 2.68rem;
        display: block;
        display: inline-block;
        z-index: 1;
    }

/*side_area > package_area*/
.side_area .package_area .block .box {
    padding: 0;
    margin-bottom: 1.3rem;
    position: relative;
}

    .side_area .package_area .block .box .box-inner .image-box {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .side_area .package_area .block .box .box-inner .block-content {
        border: 1px solid #e3e3e3;
        border-top: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 1.7rem 2rem;
        background: #fff;
    }

        .side_area .package_area .block .box .box-inner .block-content .tag {
            font-size: var(--size_14);
        }

        .side_area .package_area .block .box .box-inner .block-content .block-title {
            font-size: var(--size_22);
            min-height: 0;
            margin: 0.4rem 0 0.5rem 0;
        }

        .side_area .package_area .block .box .box-inner .block-content .block-price {
            color: var(--main_orange);
            font-size: var(--size_28);
            display: flex;
        }

            .side_area .package_area .block .box .box-inner .block-content .block-price span.onsale {
                color: #fff;
                font-size: var(--size_14);
                font-weight: 500;
                display: inline-block;
                background: #f55434;
                padding: 0 0.4rem;
                margin-left: 0.6rem;
                margin-top: 0px;
            }

        .side_area .package_area .block .box .box-inner .block-content .block-oriprice {
            color: var(--text_darkgray);
            font-size: var(--size_18);
            text-decoration: line-through;
            padding-top: 0.3rem;
        }

        .side_area .package_area .block .box .box-inner .block-content .block-txt {
            font-size: var(--size_15);
            margin-top: 2rem;
            /*12 line*/
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 10;
            -webkit-box-orient: vertical;
        }

            .side_area .package_area .block .box .box-inner .block-content .block-txt.text-all {
                -webkit-line-clamp: initial;
                text-overflow: inherit;
                -o-text-overflow: inherit;
            }

        .side_area .package_area .block .box .box-inner .block-content .btn.btn-block {
            padding: 1rem 1.5rem;
            font-size: var(--size_16);
            margin-top: 1.2rem;
        }

        .side_area .package_area .block .box .box-inner .block-content .block-fundingdate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.65rem;
        }

            .side_area .package_area .block .box .box-inner .block-content .block-fundingdate .btn-outline-orange {
                display: inline-block;
                border: 1px solid;
                font-size: var(--size_15);
                border-radius: 0.25rem;
                padding: 0.25rem 0.8rem;
                margin-right: 0.3rem;
                white-space: nowrap;
            }

    /*disabled*/
    .side_area .package_area .block .box .box_status {
        position: relative;
        display: block;
    }

        .side_area .package_area .block .box .box_status.end_status {
            cursor: initial;
        }

            .side_area .package_area .block .box .box_status.end_status::after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: #555555;
                opacity: 0.8;
                border-radius: 10px;
                z-index: 100;
            }

    .side_area .package_area .block .box .end_status-text {
        color: #fff;
        font-size: var(--size_24);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -0.75rem;
        margin-left: -2.25rem;
        z-index: 101;
    }

/*side_area lateral 橫向*/
.detail_area .side_area.lateral {
    max-height: initial;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    top: 0;
    width: 100%;
    margin: 2.5rem 0 2rem 0;
}

    .detail_area .side_area.lateral .package_area,
    .detail_area .side_area.lateral .lateral-bar {
        overflow: scroll hidden;
        width: 100%;
    }

    .detail_area .side_area.lateral .lateral-bar {
        height: 50px;
    }

        .detail_area .side_area.lateral .lateral-bar span {
            position: absolute;
            left: calc(50% - 6.8rem);
            top: 0;
            color: var(--main_orange);
            display: flex;
            align-items: center;
        }

            .detail_area .side_area.lateral .lateral-bar span i {
                background: var(--light_orange);
                width: 1.75rem;
                height: 1.75rem;
                border-radius: 50%;
                border-radius: 50%;
                font-size: 1.4rem;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                line-height: 0;
                margin: 0 1.5rem;
            }

    .detail_area .side_area.lateral .package_area {
        padding: 1rem 0;
    }

        .detail_area .side_area.lateral .package_area .block {
            margin: 0;
        }

            .detail_area .side_area.lateral .package_area .block .box {
                width: 21rem;
                float: left;
                margin: 0;
                padding-left: 0;
                padding-right: 20px;
            }

                .detail_area .side_area.lateral .package_area .block .box:last-child {
                    padding-right: 0;
                }

                .detail_area .side_area.lateral .package_area .block .box.border-b .box-inner .block-content {
                    border-color: #555;
                }

                .detail_area .side_area.lateral .package_area .block .box.border-b .box-inner .image-box {
                    border: 1px solid #555;
                    border-bottom: none;
                }

    .detail_area .side_area.lateral > h4 {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

/*custom bar*/
#scroll-wrapper1::-webkit-scrollbar,
#scroll-wrapper2::-webkit-scrollbar,
#scroll-wrapper1a::-webkit-scrollbar,
#scroll-wrapper2a::-webkit-scrollbar,
.detail_area .side_area::-webkit-scrollbar {
    height: 15px;
    width: 15px;
}

#scroll-wrapper1::-webkit-scrollbar-track,
#scroll-wrapper2::-webkit-scrollbar-track,
#scroll-wrapper1a::-webkit-scrollbar-track,
#scroll-wrapper2a::-webkit-scrollbar-track,
.detail_area .side_area::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px 1px #ededed;
    border-radius: 2px;
    background: #fafafa;
}

#scroll-wrapper1::-webkit-scrollbar-thumb,
#scroll-wrapper2::-webkit-scrollbar-thumb,
#scroll-wrapper1a::-webkit-scrollbar-thumb,
#scroll-wrapper2a::-webkit-scrollbar-thumb,
.detail_area .side_area::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #c7c7c7;
    border: 3px solid #fafafa;
}

/*----faq---*/
.main-row .area-title {
    border-bottom-color: #f0f0f0;
    margin-bottom: 1rem;
}

.faq_list .faq-item {
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    padding: 0;
    margin: 0 1rem 0.7rem 0.5rem;
    text-align: left;
}

    .faq_list .faq-item .faq-btn {
        font-size: var(--size_17);
        width: 100%;
        display: block;
        text-decoration: none;
        padding: 1.125rem 3.3rem 1.125rem 4.5rem;
        cursor: pointer;
        position: relative;
    }

        .faq_list .faq-item .faq-btn:before {
            content: '';
            background-image: url(../img/icon-QA-open.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: var(--size_14);
            height: var(--size_14);
            display: block;
            transition: all 400ms;
            position: absolute;
            right: 2rem;
            top: 1.45rem;
        }

        .faq_list .faq-item .faq-btn:not(.collapsed) {
            color: var(--main_orange);
        }

            .faq_list .faq-item .faq-btn:not(.collapsed):before {
                content: '';
                background-image: url(../img/icon-QA-close.svg);
            }

    .faq_list .faq-item .faq-content {
        font-size: var(--size_15);
        margin: 0 5rem 0 3rem;
        border-top: 1px solid #e3e3e3;
    }

        .faq_list .faq-item .faq-content p {
            padding: 1rem 0.5rem 1rem 2.5rem;
            margin-bottom: 0;
        }

.faq_list .faq-more {
    margin: 4rem 0;
}

/*----comments default---*/
.comments_list .comments-default {
    border-radius: 8px;
    border: none;
    padding: 1.3rem 1.7rem;
    margin-bottom: 1rem;
    font-size: var(--size_15);
    background: #F7F7F9;
}

    .comments_list .comments-default h6 {
        color: #555555;
        font-size: var(--size_15);
    }

    .comments_list .comments-default .info-list {
        position: relative;
        color: #797979;
        font-size: var(--size_14);
        margin: 0.5rem;
        padding-left: 43px;
    }

        .comments_list .comments-default .info-list:before {
            left: 0;
        }

/*----comments create---*/
.comments_list .comments-create {
    position: relative;
}

    .comments_list .comments-create .form-group {
        display: flex;
        margin-bottom: 0.8rem;
    }

    .comments_list .comments-create .form-control {
        border-color: #EBEBEB;
        font-size: var(--size_15);
    }

    .comments_list .comments-create .pickfiles .btn {
        border: 1px dashed #E3E3E3;
        background: #fff;
        color: #E3E3E3;
        font-size: 27px;
        padding: 0.55rem 0.5rem 0.4rem 0.5rem;
        margin: 0 0.35rem;
    }

    .comments_list .comments-create .btn-orange {
        font-size: var(--size_15);
        border-color: white;
        padding: 0.85rem 0.88rem 0.8rem 0.88rem;
    }

    .comments_list .comments-create .image-list {
        margin-left: 0;
        margin-right: 3rem;
        padding-left: 0;
        list-style-type: none;
    }

        .comments_list .comments-create .image-list .image-box {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-bottom: 100%;
            border-radius: 3px;
        }

            .comments_list .comments-create .image-list .image-box img {
                width: 100%;
                height: auto;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translateY(-50%) translateX(-50%);
            }

        .comments_list .comments-create .image-list .imagefileremove {
            display: block;
            position: relative;
        }

            .comments_list .comments-create .image-list .imagefileremove:after {
                content: "\f00d";
                font-family: "Font Awesome 5 Pro";
                font-weight: 300;
                font-size: 18px;
                line-height: 20px;
                position: absolute;
                right: 0;
                bottom: 0;
                width: 20px;
                height: 20px;
                text-align: center;
                background: #55555580;
                color: #fff;
                cursor: pointer;
            }

        .comments_list .comments-create .image-list.pickfiles .image-box .empty {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px dashed #e3e3e3;
            background: #FFF;
            color: #E3E3E3;
            padding: 0.7rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

            .comments_list .comments-create .image-list.pickfiles .image-box .empty i {
                font-size: 34px;
            }

            .comments_list .comments-create .image-list.pickfiles .image-box .empty span {
                display: block;
                font-size: var(--size_13);
                line-height: 1.2;
            }

        .comments_list .comments-create .image-list.pickfiles li {
            z-index: 10;
        }

            .comments_list .comments-create .image-list.pickfiles li.z0 {
                z-index: 0;
            }

.comment_area .image-list.fileuploader-items-list {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

/*----comments---*/
.comments_list .comments-item {
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    padding: 1.5rem 2rem 1.5rem 1.3rem;
    margin-bottom: 1rem;
    text-align: left;
}

.comments_list .user-block {
    display: flex;
    align-items: center;
    position: relative;
}

.comments_list .userAvatar {
    width: 1.87rem;
    height: 1.87rem;
}

.comments_list.feedback .userAvatar {
    width: 3.75rem;
    height: 3.75rem;
}

.comments_list .userInfo {
    font-size: var(--size_16);
    color: #A7A7A7;
    line-height: 1;
    margin-left: 0.5rem;
}

    .comments_list .userInfo h6 {
        color: #000;
        display: inline-block;
        margin-bottom: 0;
    }

.comments_list.feedback .userInfo h6 {
    color: #555555;
}

.comments_list .userInfo span.text {
    position: relative;
    padding-left: 7px;
}

    .comments_list .userInfo span.text + span.text:before {
        content: '';
        position: absolute;
        top: 3px;
        left: 1px;
        height: 15px;
        width: 1px;
        border-left: 1px solid #DEDEDE;
    }

.comments_list .userInfo .sub-row {
    float: right;
}

.comments_list.feedback .userInfo .sub-row {
    float: initial;
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
}

.comments_list .userInfo .tag {
    position: absolute;
    top: 0.2rem;
    right: 1.4rem;
}

.comments_list .userInfo .tag-user-blue {
    right: 0.4rem;
}

.comments_list .comments-date {
    float: initial;
    color: #A7A7A7;
    font-size: var(--size_14);
    display: inline-flex;
    align-items: flex-end;
    border-left: 1px solid #DEDEDE;
    padding-left: 6px;
    margin-left: 6px;
}

    .comments_list .comments-date:before {
        content: '';
        background-image: url(../img/icon-latest-news-calendar-g.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1rem;
        height: 1rem;
        display: block;
        margin-right: 0.35rem;
    }

.comments_list .rate label {
    cursor: default;
}

.comments_list .comments-content {
    margin: 0.4rem 0 0.7rem 3rem;
    font-size: var(--size_15);
    line-height: 1.7em;
}

.comments_list.feedback .comments-content,
.comments_list.feedback .comments-item > .image-list,
.comments_list.feedback .comments-reply,
.comments_list.feedback .comments-reply.bg-gray1 .image-list {
    margin-left: 5rem;
}

.comments_list .image-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: 3rem;
    margin-right: -3px;
    margin-bottom: 0;
}

    .comments_list .image-list > a,
    .comments_list .image-list > li {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
        padding: 3px;
    }

    .comments_list .image-list img {
        width: 100%;
        height: 100%;
        background: #ececec;
        border-radius: 3px;
    }

/*----comments reply---*/
.comments-reply {
    margin: 1.2rem 0 0 3rem;
}

    .comments-reply.bg-gray1 {
        padding: 1rem 1rem;
        border-radius: 5px;
    }

.comments_list.feedback .comments-reply.bg-gray1 .comments-date {
    border: none;
    margin: 0;
    padding: 0;
}

/*----comment form---*/
.comment_area .form-group {
    margin-bottom: 1.2rem;
}

.comment_area .package {
    display: flex;
}

    .comment_area .package .block-shape {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        padding-right: 10px;
    }

    .comment_area .package .text-content {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .comment_area .package .image-box {
        border-radius: 4px;
    }

    .comment_area .package .text-content h4 {
        font-size: var(--size_18);
        margin: 0;
    }

    .comment_area .package .text-content p {
        font-size: var(--size_14);
        color: var(--text_gray);
        margin: 0;
    }

.comment_area .info-list {
    margin: 0 0 1rem 16.666667%;
    font-size: var(--size_14);
}

    .comment_area .info-list:before {
        left: 15.5%;
    }

/*---rating---*/
.rate {
    display: inline-block;
    border: 0;
}

    .rate input {
        display: none;
    }

    .rate > label {
        float: right;
        color: #E3E3E3;
        margin-bottom: 0;
    }

        /* star */
        .rate > label:before {
            display: inline-block;
            font-size: var(--size_26);
            padding: 0 2px;
            margin: 0;
            font-family: "Font Awesome 5 Pro";
            content: "\f005";
            font-weight: 900;
        }

.comment_area .rate > label:before {
    font-size: 2.35rem;
    line-height: 1;
}

.rate-input > label:before {
    cursor: pointer;
}

/* half star */
.rate .half:before {
    content: "\f089";
    position: absolute;
    padding-right: 0;
}

.comment_area .rate .half:before {
    width: 1.35rem;
    overflow: hidden;
}

/*  previous */
.rate > label.active, .rate > label.active ~ label,
.rate-input input:checked ~ label {
    color: var(--main_orange);
}

    /* hover highlights */
    .rate-input label:hover,
    .rate-input label:hover ~ label,
    .rate-input input:checked ~ label:hover {
        color: var(--mute_orange);
    }

/*rate-link*/
.rate-link {
    background-image: url('../img/banner-rate.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    width: 18rem;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    margin: 2rem 1.25rem;
    padding: 2rem 3px;
}

.order-card .card-body .rate-link .btn {
    float: initial;
    margin: 0;
    padding: 0.5rem 1.3rem;
}

.rate-link .message {
    margin-top: 0.3rem;
    color: #fff;
    font-size: var(--size_13);
    line-height: 1.3;
}

    .rate-link .message span {
        padding-left: 2px;
        color: #AE4C30;
        font-size: var(--size_15);
        font-weight: 700;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }

.rate-link.disabled {
    filter: grayscale(1);
}

    .rate-link.disabled .btn {
        cursor: default;
        opacity: 1;
        background: #686868;
        border: none;
    }

/*訂閱*/

/*---news_list---*/
.news_list .block .box .box-inner {
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0;
}

.news-title {
    color: #000;
    font-size: var(--size_22) !important;
    min-height: 0;
    margin-bottom: 0.8rem;
}

.news-date {
    float: initial;
    color: #cc906f;
    font-size: var(--size_15);
    display: flex;
    margin-bottom: 1rem;
}

    .news-date:before {
        content: '';
        background-image: url(../img/icon-latest-news-calendar.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1.35rem;
        height: 1.35rem;
        display: block;
        margin-right: 0.35rem;
    }

.news_list .block .box .box-inner .image-box {
    margin-bottom: 1rem;
}

.news_list .block .box .box-inner .block-content .block-text {
    color: var(--text_black);
    font-size: var(--size_15);
    margin-bottom: 1rem;
    margin-left: 0.1rem;
}

.news_list .block .box .box-inner .block-content .btn-link {
    display: inline-flex;
    align-items: center;
    padding: 0.57rem 1.8rem 0.55rem 1.8rem;
    margin-bottom: 1rem;
}

    .news_list .block .box .box-inner .block-content .btn-link:after {
        content: '';
        background-image: url(../img/icon-arrow-more.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.1rem;
        display: block;
        transition: all 400ms;
    }

    .news_list .block .box .box-inner .block-content .btn-link:hover:after {
        background-image: url(../img/icon-arrow-more-active.svg);
    }

/*** 
====================================================================
9. Page
====================================================================
***/

.single_page { /*單頁文章、訂單成功*/
    padding: 2.5rem 0;
}

    .single_page h1,
    .login_page h1 {
        font-size: var(--size_25);
        color: #000;
        margin-bottom: 3.2rem;
        text-align: center;
    }

    .single_page img {
        max-width: 100%;
    }

.login_page { /*註冊*/
    padding: 40px 20px;
}

.normal_page { /*團隊內頁、提案、提案紀錄、贊助紀錄*/
    padding: 4.5rem 0;
    /*overflow: hidden;*/
}

    .normal_page h1 {
        font-size: var(--size_25);
        color: #000;
        margin-bottom: 1.8rem;
        text-align: center;
    }

/*** 
====================================================================
10. Input
====================================================================
***/

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

    .form-group, .form-group > div {
        position: relative;
    }

        .form-group.edit label {
            padding-top: 0.5rem;
        }

        .form-group .control-label,
        .form-group .control-text {
            padding-top: 7px;
            padding-right: 0;
            margin-bottom: 3px;
            display: block;
            position: relative;
        }

        .form-group .control-label {
            font-size: var(--size_15);
        }

        .form-group .mark-required {
            color: #DB0000;
            font-size: var(--size_20);
            margin: 0 1px;
            line-height: 0;
        }

        .form-group .btn-box {
            margin: 7rem 0;
            text-align: center;
        }

        /*error*/
        .form-group .field-validation-error {
            font-size: 90%;
        }

        .form-group > div > .field-validation-error {
            right: 20px;
        }

        .form-group .form-control.input-validation-error,
        .form-group .form-control.input-validation-error:focus {
            border-color: #D80916;
        }

/*placeholder*/
.form-control::-webkit-input-placeholder {
    color: var(--text_gray);
}

.form-control::-moz-placeholder {
    color: var(--text_gray);
}

.form-control:-ms-input-placeholder {
    color: var(--text_gray);
}

.form-control::-ms-input-placeholder {
    color: var(--text_gray);
}

.form-control::placeholder {
    color: var(--text_gray);
}

.form-control.line-through::placeholder {
    text-decoration: line-through;
}

/*input*/
.form-control {
    font-size: 1rem;
    color: var(--text_black);
    height: auto; /*calc(1.5em + 1.2rem + 2px);*/
    padding: 0.6rem 1rem;
}

    .form-control:focus {
        box-shadow: none;
    }

.bg-gray1 .form-control,
.bootstrap-select > .dropdown-toggle {
    border-color: transparent;
}

    .bg-gray1 .form-control:focus {
        border-color: var(--main_orange);
    }

.input-group-text {
    font-size: var(--size_18);
    color: var(--text_gray);
    padding: 0.375rem 1.5rem;
    background-color: #ebebeb;
    border: none;
}

/*select*/
.bootstrap-select > .btn {
    padding: 0.85rem 1rem 0.82rem 1rem;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:hover {
    color: var(--text_black);
    /*border-color: #ced4da;*/
    background-color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

    .bootstrap-select > .dropdown-toggle.bs-placeholder {
        color: var(--text_gray);
    }

    .bootstrap-select > .dropdown-toggle:focus,
    .bootstrap-select > .dropdown-toggle:hover,
    .bootstrap-select > .dropdown-toggle:active {
        border-color: var(--main_orange) !important;
        opacity: 1;
    }

    .bootstrap-select > .dropdown-toggle:disabled,
    .bootstrap-select > .dropdown-toggle:disabled:hover,
    .bootstrap-select > .dropdown-toggle[readonly] {
        background-color: var(--light_orange) !important;
        border-color: transparent !important;
        cursor: initial;
        opacity: 1;
    }

/*disabled*/
.form-control:disabled, .form-control[readonly] {
    background-color: #f0f0f0;
    color: var(--text_darkgray);
}

.form-control.primary:disabled, .form-control.primary[readonly] {
    background-color: var(--light_orange);
    color: var(--main_orange);
}

/*checkbox*/
input[type=checkbox], input[type=radio] {
    width: 1.2rem;
    height: 1.2rem;
}

.form-check {
    position: relative;
    display: inline-block;
    padding-left: 0;
}

.form-check-label {
    position: relative;
    left: 1.75rem;
    margin-right: 1.75rem;
    cursor: pointer;
    transition: all 400ms;
}

    .form-check-label:hover {
        opacity: 0.8;
    }

.form-check-input {
    position: absolute;
    margin-top: 0.1rem;
    margin-left: -1.75rem;
}

.form-check-inline .form-check-input {
    margin-right: .6rem;
}

/*custom*/
.custom-radio,
.custom-check {
    display: inline-block;
    position: relative;
    margin-right: 3px;
    margin-bottom: 7px;
}

    .custom-radio.disabled,
    .custom-check.disabled {
        /*filter: grayscale(1);*/
        opacity: 0.5;
    }

        .custom-radio.disabled .btn,
        .custom-check.disabled .btn {
            opacity: 1;
        }

        .custom-radio.disabled input:checked + span.btn-outline-orange,
        .custom-check.disabled input:checked + span.btn-outline-orange,
        .custom-check.disabled input:checked + span.btn-outline-orange:hover {
            opacity: 1;
            color: var(--main_orange);
            border-color: var(--main_orange);
            background: var(--light_orange);
        }

    .custom-radio label,
    .custom-check label {
        margin-bottom: 0;
    }

    .custom-radio input,
    .custom-check input {
        position: absolute;
        opacity: 0;
    }

        .custom-radio input:not(:checked) + span,
        .custom-check input:not(:checked) + span {
            border-color: #a7a7a7;
            color: #a7a7a7;
        }

        .custom-radio input:checked + span:after,
        .custom-check input:checked + span:after {
            content: "\f058"; /*'fas fa-check-circle'*/
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            font-size: var(--size_22);
            position: absolute;
            right: -0.3rem;
            bottom: -0.3rem;
            background: #fff;
            border-radius: 50%;
        }

    .custom-radio label span.btn,
    .custom-check label span.btn {
        display: block;
    }

/*switch*/
.form-check > .form-switch-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: var(--size_15);
}

input[type=checkbox].control-switch,
input[type=radio].control-switch {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

input.control-switch {
    border: none;
    margin-left: 5px;
    background-color: #ebebeb;
    border-radius: 1.5rem;
    width: 2.75rem;
    height: 1.56rem;
}

    input.control-switch::after {
        content: "";
        position: absolute;
        background-color: #a7a7a7;
        border-radius: inherit;
        transition: -webkit-transform 80ms;
        transition: transform 80ms;
        top: 0;
        right: 0;
        width: 1.5rem;
        height: 1.5rem;
    }

    input.control-switch:checked::after {
        -webkit-transform: translateX(-1.25rem);
        transform: translateX(-1.25rem);
        background-color: var(--main_orange);
    }

/*date*/
.bootstrap-datetimepicker-widget.dropdown-menu {
    min-width: 300px;
    color: var(--text_black);
    margin: 5px 0;
}

.bootstrap-datetimepicker-widget .datepicker {
    padding: 0;
}

.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
    padding: 7px 11px;
}

.bootstrap-datetimepicker-widget .datepicker-days table th {
    border-bottom: 1px solid #dee2e6;
}

.bootstrap-datetimepicker-widget table th.dow,
.bootstrap-datetimepicker-widget table td {
    border: none;
}

    .bootstrap-datetimepicker-widget table td span.month,
    .bootstrap-datetimepicker-widget table td span.year {
        width: 22%;
    }

    .bootstrap-datetimepicker-widget table td.old,
    .bootstrap-datetimepicker-widget table td.new {
        color: #aeb8c2;
    }

.bootstrap-datetimepicker-widget .accordion-toggle .table-condensed {
    table-layout: fixed;
}

.datepicker table tr td span {
    border-radius: 10px;
}

    .datepicker table tr td span.focused,
    .datepicker table tr td span:hover {
        background: #f7f7f7;
        color: var(--main_orange);
    }

    .datepicker table tr td span.active,
    .datepicker table tr td span.active.active,
    .datepicker table tr td span.active.active:hover,
    .datepicker table tr td.active.active,
    .datepicker table tr td.active:hover:hover {
        background: var(--main_orange);
        color: #fff;
    }

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover {
    background: var(--light_orange);
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--light_orange);
}

/*.bootstrap-datetimepicker-widget a[data-action] {
    padding: 4px 0;
}*/

.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2;
    height: 2em;
}

.date-box {
    position: relative;
}

    .date-box .date-icon {
        position: absolute;
        display: flex;
        height: 100%;
        align-items: center;
        right: 0;
        top: 0;
        width: 3rem;
        justify-content: center;
        cursor: pointer;
    }

        .date-box .date-icon:before {
            content: '';
            background-image: url(../img/icon-select-calendar.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: var(--size_21);
            height: var(--size_21);
            display: block;
        }

.input-group > .date-box {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

    .input-group > .date-box:first-child .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group > .date-box:not(:first-child) .form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .input-group > .date-box + .input-group-text {
        border-radius: 0;
    }

.form-group.package-list .input-group-text {
    font-size: var(--size_16);
    color: var(--text_black);
    padding: 0.3rem 0.65rem;
    line-height: 1.3;
    background-color: #ebebeb;
    border: none;
    width: 100%;
    white-space: break-spaces;
    text-align: left;
}

.form-group.package-list .input-group-prepend {
    min-width: 45%;
}

/*ckeditor*/
/*.ck.ck-balloon-panel {
    z-index: 2000 !important;
}*/
:root {
    --ck-z-default: 2 !important;
}

/*** 
====================================================================
11. Setting
====================================================================
***/
/*-----proposal-----*/
.bg-proposal {
    background-image: url('../img/bg-project-information.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.normal_page .area-title {
    border-bottom-color: #f0f0f0;
}

.normal_page .card {
    border-radius: 0.4rem;
    margin-bottom: 25px;
}

    .normal_page .card + .card {
        margin-top: 50px;
    }

    .normal_page .card.border-orange {
        border: 2px solid var(--main_orange);
    }

    .normal_page .card .card-body {
        padding: 3.5rem 4.5rem;
    }
/*---contract-box--*/
.contract-box {
    height: 300px;
    overflow-y: scroll;
    border: 2px solid var(--main_orange);
    border-radius: 0.4rem;
    padding: 1.8rem 2rem;
    margin-bottom: 1rem;
}
/*info-list*/
.info-list {
    color: #4c60a3;
    font-size: var(--size_15);
    margin: 0 4rem 4rem 4rem;
}

    .info-list li {
        margin-bottom: 0.2rem;
    }

    .info-list:before {
        content: '';
        background-image: url(../img/icon-information-b.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: var(--size_21);
        height: var(--size_21);
        display: block;
        position: absolute;
        left: 3.5rem;
        top: 0.1rem;
    }
/*product-plan*/
.input-group-text.icon-product-plan {
    color: var(--dark_orange);
    font-size: var(--size_15);
    flex-direction: column;
    justify-content: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

    .input-group-text.icon-product-plan > div {
        padding-top: 0.25rem;
        line-height: 1;
    }

    .input-group-text.icon-product-plan::before {
        content: '';
        background-image: url(../img/icon-product-plan.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 40px;
        height: 30px;
        display: block;
    }
/*right_toolbar*/
.normal_page .right_toolbar {
    position: relative;
}

    .normal_page .right_toolbar > .inner {
        position: absolute;
        right: 0;
        bottom: -3.2rem;
        z-index: 100;
    }

    .normal_page .right_toolbar a, .normal_page .right_toolbar button {
        position: relative;
        padding: 0;
        display: inline-flex;
        align-items: center;
        position: relative;
        vertical-align: middle;
        color: var(--main_orange);
    }

        .normal_page .right_toolbar a:hover, .normal_page .right_toolbar button:not(.disabled):hover {
            opacity: 0.8;
        }

    .normal_page .right_toolbar .system-contact span {
        color: var(--main_orange);
        font-size: var(--size_14);
        line-height: 1;
        padding: 0.2rem 0 0 0.2rem;
        display: inline-block;
    }

    .normal_page .right_toolbar .system-contact::before {
        content: '';
        background-image: url(../img/icon-contact-food-chill.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2rem;
        height: 2rem;
        display: inline-block;
        z-index: 1;
    }

    .normal_page .right_toolbar .btn-preview span, .normal_page .right_toolbar .btn-review span {
        color: var(--main_orange);
        font-size: var(--size_16);
        line-height: 1;
        padding: 0.2rem 0 0.2rem 0.3rem;
        display: inline-block;
    }

    .normal_page .right_toolbar .btn-preview span {
        border-right: 1px solid #e3e3e3;
        padding-right: 0.6rem;
        margin-right: 0.4rem;
    }

    .normal_page .right_toolbar .btn-preview::before, .normal_page .right_toolbar .btn-review::before {
        content: '';
        background-image: url(../img/icon-plan-preview.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2.5rem;
        height: 2.5rem;
        display: inline-block;
        z-index: 1;
    }

    .normal_page .right_toolbar .btn-review::before {
        background-image: url(../img/icon-plan-enter.svg);
    }
/*-----table 共用
    提案紀錄、最新消息管理、訂單管理-----*/
.css_table {
    display: table;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}

.css_tr {
    display: table-row;
    background: #fff;
}

.css_th, .css_td {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    padding: 1.15rem 1.8rem;
    font-size: var(--size_15);
    line-height: 1;
    /*border: 1px solid var(--text_darkgray);*/
}

.css_th {
    background: var(--text_darkgray);
    color: #fff;
}

.css_td {
    padding: 1.5rem 1.8rem;
    border-bottom: 2px solid #f8f8f8;
}

.css_td_title, .css_table.setting-table label {
    display: none;
    margin-bottom: 0;
    align-items: center;
    color: var(--text_gray);
}
/*setting-table 專案列表*/
.css_table.setting-table .css_td.td-image {
    width: 160px;
}

.css_table.setting-table .css_td.td-content {
    padding-left: 0;
}

.css_table.setting-table .css_td.td-money {
    width: 165px;
}

.css_table.setting-table .css_td.td-control {
    width: 165px;
}

.css_table.setting-table .css_td .row-tag {
    margin-bottom: 0.6rem;
}

.css_table.setting-table .css_td .row-title {
    font-size: var(--size_18);
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.css_table.setting-table .css_td small {
    font-size: 93%;
}

.css_table.setting-table .css_td .btn + .btn {
    margin-top: 5px;
}
/*-----edit-----*/
.form-horizontal h4 {
    color: #000;
    font-size: var(--size_20);
    margin-top: 4rem;
    margin-bottom: 1.3rem;
}

    .form-horizontal h4:first-child {
        margin-top: 0.7rem;
    }
/*message*/
.form-group .text-gray {
    font-size: 94%;
    margin: 3px 0;
}

.form-group .text-primary, .form-group .text-darkgray {
    font-size: 94%;
}
/*fileupload*/
.edit-image-box.shape-100 .td-image { /*列表預覽圖*/
    max-width: 340px;
}

.edit-image-box.shape-56 .td-image {
    max-width: 370px;
}

.edit-image-box .image-box.noImage, .edit-image-box.team .userAvatar {
    background: #ffffff;
    border: 1px dashed #e3e3e3;
    display: flex;
}

    .edit-image-box .image-box.noImage i, .edit-image-box.team .userAvatar i {
        font-size: 150px;
        color: #e3e3e3;
        position: absolute;
        left: calc(50% - 75px);
        top: calc(50% - 75px);
    }

    .edit-image-box.team .userAvatar i {
        font-size: 74px;
        left: calc(50% - 37px);
        top: calc(50% - 37px);
    }

.edit-image-box .pickfiles {
    border: 1px solid var(--main_orange);
    background: #fff;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.3rem 0 0.5rem 0;
}

    .edit-image-box .pickfiles.disabled {
        background-color: #f0f0f0;
        cursor: initial;
        border: none;
    }

    .edit-image-box .pickfiles .btn {
        background: var(--light_orange);
        color: var(--main_orange);
        height: 100%;
        display: inline-block;
        width: 100px;
        padding-left: 0;
        padding-right: 0;
    }

    .edit-image-box .pickfiles .txt {
        padding: 0 1rem;
        text-align: left;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 100px);
    }
/*category*/
#CategoryOption > .toicon {
    color: #FAC9AA;
    font-size: var(--size_20);
    display: block;
    text-align: center;
    padding: 5px;
}
/*------package------*/
.detail_area.edit .side_area.lateral {
    margin-top: 0;
    padding-top: 1rem;
}
/*sort-btn*/
.btn-edit-order {
    display: inline-flex;
    align-items: center;
    float: right;
    margin-top: -1rem;
    margin-left: 0.5rem;
    height: 2.35rem;
}

    .btn-edit-order.plan:before {
        content: '';
        background-image: url(../img/icon-plan-editor.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
        margin-right: 2px;
    }
/*add-btn*/
.box.newpackage .box-inner {
    border: 1px dashed var(--main_orange);
    height: 35rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main_orange);
}

.box.newpackage a:hover .box-inner {
    border-color: var(--dark_orange);
    color: var(--dark_orange);
    background: #FFFBF8;
}

.box.newpackage .box-inner .text-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--size_15);
}

    .box.newpackage .box-inner .text-link::before {
        content: '';
        background-image: url(../img/btn-add-new.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2.8rem;
        height: 2.8rem;
        display: block;
        margin-bottom: 0.6rem;
        transition: all 400ms;
    }

.box.newpackage a:hover .box-inner .text-link::before {
    background-image: url(../img/btn-add-new-active.svg);
}
/*buttons*/
.detail_area.edit .package_area .box .box-inner {
    cursor: pointer;
}

    .detail_area.edit .package_area .box .box-inner:hover .button-box {
        opacity: 1;
    }

.package_area .button-box {
    background: #000000b0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem 0;
    z-index: 1;
    opacity: 0;
    transition: all 400ms;
    display: flex;
}

    .package_area .button-box a {
        padding: 0 1rem;
        position: relative;
    }

        .package_area .button-box a:not(:last-child)::after {
            content: '';
            position: absolute;
            background: #e3e3e3;
            width: 1px;
            right: 0;
            top: 10%;
            height: 80%;
        }

        .package_area .button-box a::before {
            content: '';
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: var(--size_20);
            height: var(--size_20);
            display: block;
            transition: all 400ms;
        }

        .package_area .button-box a.btn-edit::before {
            background-image: url(../img/Icon-feather-edit.svg);
        }

        .package_area .button-box a.btn-edit:hover::before {
            background-image: url(../img/Icon-feather-edit-active.svg);
        }

        .package_area .button-box a.btn-trash::before {
            background-image: url(../img/Icon-feather-trash.svg);
        }

        .package_area .button-box a.btn-trash:hover::before {
            background-image: url(../img/Icon-feather-trash-active.svg);
        }

        .package_area .button-box a.btn-copy::before {
            background-image: url(../img/Icon-feather-copy.svg);
        }

        .package_area .button-box a.btn-copy:hover::before {
            background-image: url(../img/Icon-feather-copy-active.svg);
        }
/*---news list---*/
.listedit-news + div > .rowAddBtn.panel {
    max-width: 30rem;
    margin: 0 auto;
}

.css_table.listedit-news .css_td.td-title {
    line-height: 1.3;
}

.listedit-news .button-box {
    padding: 0;
    display: flex;
    justify-content: flex-start;
}

    .listedit-news .button-box a {
        padding: 0 0.7rem;
        position: relative;
        white-space: nowrap;
        color: var(--text_gray);
    }

        .listedit-news .button-box a:first-child {
            padding-left: 0;
        }

        .listedit-news .button-box a:hover {
            color: var(--main_orange);
        }

        .listedit-news .button-box a:not(:last-child)::after {
            content: '';
            position: absolute;
            background: #e3e3e3;
            width: 1px;
            right: 0;
            top: 10%;
            height: 80%;
        }

        .listedit-news .button-box a::before {
            content: '';
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: var(--size_20);
            height: var(--size_20);
            display: block;
            transition: all 400ms;
        }

        .listedit-news .button-box a.btn-text::before {
            content: none;
        }

        .listedit-news .button-box a.btn-edit::before {
            background-image: url(../img/Icon-feather-edit-d.svg);
        }

        .listedit-news .button-box a.btn-edit:hover::before {
            background-image: url(../img/Icon-feather-edit-active.svg);
        }

        .listedit-news .button-box a.btn-trash::before {
            background-image: url(../img/Icon-feather-trash-d.svg);
        }

        .listedit-news .button-box a.btn-trash:hover::before {
            background-image: url(../img/Icon-feather-trash-active.svg);
        }
/*coupon*/
.listedit-news.coupon-table .css_th {
    background: var(--text_gray);
}

.listedit-news.coupon-table .css_th, .listedit-news.coupon-table .css_td {
    padding: 1.2rem 0.3rem 1.2rem 1rem;
}

.listedit-news.coupon-table .td-list {
    max-width: 220px;
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*---table row----*/
/*row*/
.tableAutoRow {
    padding: 0;
    list-style-type: none;
}

    .tableAutoRow .data-row {
        margin-bottom: 10px;
        position: relative;
        padding-right: 1.8rem;
    }

        .tableAutoRow .data-row.header {
            margin-bottom: 0px;
        }

    .tableAutoRow.panel .data-row {
        border: 1px dashed #A7A7A7;
        border-radius: 5px;
        padding: 1.3rem 1.8rem;
        margin-bottom: 15px;
    }

        .tableAutoRow.panel .data-row .row-content > div + div {
            margin-top: 1rem;
        }

    .tableAutoRow .data-row .row-content {
        padding-right: 1.5rem;
    }

    .tableAutoRow .highlight {
        min-height: 80px;
        /*border: 1px dashed #A7A7A7;*/
        background-color: #eee;
        margin-bottom: 15px;
        border-radius: 5px;
    }

        .tableAutoRow .highlight.ui-sortable-helper {
            background-color: #fffbf8;
        }

    .tableAutoRow .data-row .input-group > div:first-child {
        width: 30%;
        border-right: 1px solid #F7F7F9;
    }

    .tableAutoRow .data-row .input-group > div:last-child {
        width: 70%;
    }
    /*btn*/
    .tableAutoRow .btn-rowbox {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tableAutoRow .btn-rowbox .rowSortBtn {
            content: '';
            background-image: url(../img/btn-switch-order.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 1.3rem;
            height: 1.3rem;
            font-size: 1.3rem;
            display: block;
            transition: all 400ms;
            padding: 0;
        }
/*add*/
.rowAddBtn {
    color: var(--main_orange);
    font-size: var(--size_15);
    display: flex;
    align-items: center;
    background: none;
    clear: both;
}

    .rowAddBtn.panel {
        padding: 0.7rem;
        border-radius: 5px;
        border: 1px dashed var(--main_orange);
        justify-content: center;
    }

    .rowAddBtn:hover {
        color: var(--dark_orange);
    }

    .rowAddBtn.panel:hover {
        background: #FFFBF8;
        border-color: var(--dark_orange);
    }

    .rowAddBtn::before {
        content: '';
        background-image: url(../img/btn-add-new.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2.25rem;
        height: 2.25rem;
        display: block;
        margin-right: 0.4rem;
        transition: all 400ms;
    }

    .rowAddBtn:hover::before {
        background-image: url(../img/btn-add-new-active.svg);
    }
/*faq*/
.tableAutoRow.panel.panel-faq .data-row {
    padding-left: 4rem;
}

    .tableAutoRow.panel.panel-faq .data-row .control-label img {
        position: absolute;
        top: 0.45rem;
        right: calc(100% + 5px);
        width: var(--size_24);
    }

    .tableAutoRow.panel.panel-faq .data-row .form-check {
        position: relative;
        padding-left: 0;
        position: absolute;
        top: 1.3rem;
        right: 100%;
        width: 5rem;
        /* text-align: revert; */
    }
/*------sort modal------*/
.sort-info {
    font-size: var(--size_15);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.sort-table {
    margin-top: 1rem;
}

    .sort-table tr th {
        font-size: var(--size_15);
        font-weight: normal;
        color: var(--main_orange);
        background: var(--light_orange);
        border: none;
    }

    .sort-table tr td {
        font-size: var(--size_15);
        background: #fff;
        vertical-align: middle;
        border-top: 8px solid #f7f7f9;
    }

    .sort-table tr.highlight {
        display: table;
    }

        .sort-table tr.highlight td {
            background-color: transparent;
            border-color: transparent;
        }

    .sort-table .highlight.ui-sortable-helper {
        border: 1px solid var(--main_orange);
    }

        .sort-table .highlight.ui-sortable-helper td {
            /*background-color: #fffbf8;*/
            border: none;
            background: #fff;
        }

    .sort-table .icon-chage-order::before {
        content: '';
        display: inline-block;
        width: 1.18rem;
        height: 1.18rem;
        background-image: url('../img/icon-chage-order.svg');
        background-repeat: no-repeat;
        background-size: contain;
        -moz-border-radius: inherit;
        -webkit-border-radius: inherit;
        border-radius: inherit;
        transition: all 400ms;
    }

    .sort-table .highlight.ui-sortable-helper .icon-chage-order::before {
        background-image: url('../img/icon-chage-order-active.svg');
    }
/*** 
====================================================================
12. Member
====================================================================
***/
.userAvatar {
    width: 6rem;
    height: 6rem;
    background: #ccc;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

    .userAvatar img {
        width: 100%;
        height: auto;
    }

        .userAvatar img.height-100 {
            width: auto;
            height: 100%;
        }
/*---member index---*/
.avatar-box {
    margin-top: -1.5rem;
    margin-bottom: 2.5rem;
    width: 10.75rem;
    text-align: center;
}

    .avatar-box .userAvatar {
        width: 10.75rem;
        height: 10.75rem;
    }

    .avatar-box h3 {
        margin-top: 1rem;
    }

    .avatar-box .item-binding {
        font-size: var(--size_14);
        border-radius: 1.8rem;
        padding: 0.12rem 0.6rem;
        margin: 0;
        display: inline-flex;
    }

        .avatar-box .item-binding::before {
            width: 1.3rem;
            height: 1.3rem;
            padding: 0;
            margin-right: 2px;
        }

.record-box {
    list-style-type: none;
    margin-top: 3.5rem;
    padding: 0;
}

    .record-box li {
        width: 50%;
        float: left;
        display: inline-flex;
        margin-bottom: 2rem;
    }

        .record-box li img {
            width: 2.8rem;
            height: 2.8rem;
            margin-right: 0.75rem;
        }

        .record-box li a {
            display: block;
            font-size: var(--size_14);
        }

.block .box .box-inner .block-content .block-order {
    font-size: var(--size_15);
}

.block .box .box-inner .block-content .block-title.lg {
    font-size: var(--size_20);
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

.block .box .box-inner .block-content .btn-linkOrder {
    position: absolute;
    right: 0.3rem;
    bottom: 1rem;
}
/*---team_area---*/
.team_area {
    margin-bottom: 2rem;
}

    .team_area .userAvatar {
        width: 158px;
        height: 158px;
        display: inline-flex;
    }

    .team_area > .row {
        width: calc(100% - 170px);
        float: right;
    }

    .team_area h3 {
        margin: 0.5rem 0 0.8rem 0;
    }

    .team_area .share-box {
        margin-bottom: 0.8rem;
    }

        .team_area .share-box li a {
            background: var(--light_orange);
            color: #EDBE9B;
            height: 2.25rem;
            width: 2.25rem;
            font-size: var(--size_16);
        }

            .team_area .share-box li a.facebook:hover {
                color: #3B5A99;
            }

            .team_area .share-box li a.instagram:hover {
                color: #CC2F7E;
            }

            .team_area .share-box li a.youtube:hover {
                color: #FD0D1B;
            }

            .team_area .share-box li a.twitter:hover {
                color: #21C2FD;
            }

            .team_area .share-box li a.line:hover {
                color: #1DC121;
            }

            .team_area .share-box li a.home:hover {
                color: #F57F34;
            }

        .team_area .share-box:after {
            content: '';
            display: block;
            clear: both;
        }

    .team_area hr {
        margin: 2.8rem 0;
        border-top-color: #ebebeb;
    }

    .team_area h5 {
        font-size: var(--size_22);
        margin-bottom: 1.5rem;
    }

    .team_area .col-contact {
        margin-bottom: 4rem;
    }
/*team create*/
.btn-teamLink {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--main_orange);
    margin: 1.5rem 0.5rem;
}

    .btn-teamLink:before {
        content: '';
        display: block;
        width: 5.2rem;
        height: 5.2rem;
        background-image: url('../img/icon-team-info.svg');
        background-repeat: no-repeat;
        background-size: contain;
        -moz-border-radius: inherit;
        -webkit-border-radius: inherit;
        border-radius: inherit;
        transition: all 400ms;
        border-radius: 50%;
        border: 1px solid transparent;
    }

    .btn-teamLink.members:before {
        background-image: url('../img/icon-team-members-o.svg');
    }

    .btn-teamLink.info:hover:before, .btn-teamLink.members:hover:before {
        /*background-image: url('../img/icon-team-info-active.svg');*/
        /*background-image: url('../img/icon-team-members-o-active.svg');*/
        border-color: var(--main_orange);
    }

    .btn-teamLink span {
        padding-top: 0.6rem;
    }

.team-info-group {
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    margin: 1.3rem 0;
    padding: 1.8rem 0;
}

    .team-info-group p {
        padding: 0 3rem;
        font-size: var(--size_15);
        line-height: 1.8;
    }

    .team-info-group .form-group, .team-info-group .info-list {
        margin-bottom: 0;
    }

    .team-info-group + .form-group .btn-box {
        margin: 4.5rem 0;
    }

.team-editlist h4 {
    color: #000;
    font-size: var(--size_20);
    margin-top: 2rem;
    margin-bottom: 1.3rem;
}

.team-editlist .team-row {
    background: #fff;
    border-radius: 10px;
    padding: 0.56rem 1.4rem 0.56rem 2.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.team-editlist .userAvatar {
    width: 3.75rem;
    height: 3.75rem;
    display: inline-flex;
    margin: 0;
}

.team-editlist h5 {
    color: var(--text_darkgray);
    font-size: var(--size_18);
    display: inline-block;
    margin: 0;
    padding-left: 0.5rem;
}

.team-editlist .button-box {
    margin-left: auto;
    padding: 0;
}
/*---team edit---*/
.edit-image-box.team {
    text-align: center;
}

    .edit-image-box.team .userAvatar {
        width: 9.8rem;
        height: 9.8rem;
        margin: 8px auto;
        position: relative;
    }

.modal .member-list {
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: var(--light_orange);
    color: var(--main_orange);
    font-size: var(--size_18);
    padding: 0.54rem 1.5rem;
    margin-bottom: 0.7rem;
}

    .modal .member-list .userAvatar {
        width: 3.8rem;
        height: 3.8rem;
        display: inline-flex;
        margin: 0 0.6rem 0 0;
    }

    .modal .member-list .username {
        word-break: break-all;
    }

    .modal .member-list .setting {
        margin-left: auto;
    }

    .modal .member-list + h4 {
        margin-top: 2rem;
    }

.modal span.email-ids {
    display: block;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    margin: 0;
    padding: 10px 12px;
    position: relative;
}

    .modal span.email-ids:first-child {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

.modal span.cancel-email {
    border: none;
}
/*-----login-----*/
.bg-login:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg-signup.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

.bg-login {
    background: transparent linear-gradient(180deg, #FFFAF3 0%, #FFFAF4 43%, #ffffff 81%, #ffffff 100%) 0% 0% no-repeat padding-box;
    position: relative;
    z-index: 1;
    color: var(--text_darkgray);
}

.login-row .col-info {
    margin-top: 10rem;
    padding-left: 8rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

    .login-row .col-info .logo {
        width: 130px;
        margin-bottom: 2rem;
        display: block;
    }

    .login-row .col-info .intro {
        font-size: var(--size_16);
        display: inline-block;
        position: relative;
    }

        .login-row .col-info .intro::after {
            content: '';
            background-image: url(../img/chill-point-run.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 6rem;
            height: 6rem;
            display: block;
            position: absolute;
            right: -1rem;
            bottom: -3rem;
            transition: all 400ms;
        }

    .login-row .col-info .intro2 {
        font-size: var(--size_15);
        max-width: 22rem;
    }

        .login-row .col-info .intro2 h4 {
            color: #000;
            font-size: var(--size_21);
            margin-bottom: 0.7rem;
        }

        .login-row .col-info .intro2 ul {
            color: #cc906f;
            margin: 1rem 0 2.5rem -20px;
        }

.login-row .col-form {
    padding-left: 6rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.login_page .text-brown {
    font-size: var(--size_15);
    padding-top: 3px;
    padding-left: 0.7rem;
    margin-bottom: -0.5rem;
}

.login_page .form-control, .login_page .bootstrap-select > .dropdown-toggle {
    border-color: #FCCFAE;
}

.login_page .form-group .btn-box {
    margin: 4rem 0 14rem 0;
}

.login_page .imgverifycode {
    height: calc(1.5em + 1.188rem + 2px);
}

.login_page .btn.btn-block {
    font-size: var(--size_16);
    border-radius: 0.3rem;
    position: relative;
    height: 3.125rem;
    padding: 1.1rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .login_page .btn.btn-block img {
        width: 2.25rem;
        margin-right: 2px;
    }

.login_page .btn.btn-google {
    background: #fff;
    color: #000;
    border: 1px solid #d9d9d9;
}

.login_page .btn.btn-facebook {
    background: #526BA2;
    color: #fff;
}

.login_page .divider-or {
    font-size: var(--size_20);
    color: var(--main_orange);
    text-align: center;
    margin: 1rem 0;
    position: relative;
}

    .login_page .divider-or::before, .login_page .divider-or::after {
        content: '';
        position: absolute;
        top: 0.7rem;
        left: 0;
        height: 2px;
        width: 44%;
        border-top: 1px solid #FCCFAE;
    }

    .login_page .divider-or::after {
        left: initial;
        right: 0;
    }

.login_page .divider-orange {
    border-top: 1px solid #FCCFAE;
    margin-top: 2.5rem;
}

.login_page .more-info {
    text-align: center;
}

    .login_page .more-info h6 {
        color: #000;
    }

    .login_page .more-info .btn {
        font-size: var(--size_15);
        min-width: 16rem;
    }

    .login_page .more-info .button-box {
        margin-top: 0.4rem;
    }

        .login_page .more-info .button-box a {
            font-size: var(--size_14);
            padding: 0 0.5rem;
            line-height: 1;
            opacity: 0.68;
        }

            .login_page .more-info .button-box a:not(:first-child) {
                border-left: 1px solid #555555cc;
            }
/*login-panel*/
.login_page .login-panel {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 0;
    text-align: center;
}

    .login_page .login-panel .form-group {
        text-align: left;
    }

    .login_page .login-panel > img {
        width: 52%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .login_page .login-panel h1 {
        font-size: var(--size_21);
        margin-top: 1rem;
        margin-bottom: 0.8rem;
    }

    .login_page .login-panel p {
        font-size: var(--size_15);
        color: var(--text_darkgray);
        margin-bottom: 2rem;
    }

    .login_page .login-panel .divider-orange {
        margin-top: 1.2rem;
    }

    .login_page .login-panel .more-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .login_page .login-panel .more-info .btn {
            min-width: 50%;
        }

    .login_page .login-panel .message {
        background: var(--light_orange);
        color: var(--dark_orange);
        text-align: center;
        padding: 0.45rem;
    }
/*profile*/
.form_panel {
    border-radius: 1.1rem;
    padding: 4.5rem 8.5rem;
}

    .form_panel h4 {
        color: var(--text_black);
        font-size: var(--size_22);
        margin-top: 4rem;
        margin-bottom: 1.3rem;
    }

    .form_panel .edit-image-box {
        text-align: center;
        max-width: 27rem;
        margin: 0 auto 4.5rem auto;
    }

        .form_panel .edit-image-box h4 {
            margin-top: 0.7rem;
        }

        .form_panel .edit-image-box .userAvatar {
            width: 14rem;
            height: 14rem;
            margin: 0 auto;
        }

        .form_panel .edit-image-box .text-gray {
            font-size: var(--size_14);
        }

    .form_panel .form-group .tag {
        margin: 0.55rem 0;
    }

    .form_panel .form-group #AddressOption > div {
        margin-bottom: 1rem;
    }
/*---point---*/
.point_area .bg-light-orange {
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.56rem;
}

.point_area .total-box {
    display: inline-block;
    padding-left: 1.5rem;
    padding-right: 3.5rem;
    color: var(--dark_orange);
    font-size: var(--size_14);
}

    .point_area .total-box h6 {
        font-size: var(--size_15);
        margin-bottom: 0.4rem;
    }

    .point_area .total-box span {
        font-size: var(--size_33);
        line-height: 1;
    }

.point_area .button-box {
    float: right;
    padding: 0.4rem 0;
}

    .point_area .button-box .btn {
        background: transparent;
    }

.point_area .block .box {
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e3e3e3;
}

    .point_area .block .box .box-inner .block-content {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
    }

        .point_area .block .box .box-inner .block-content .block-title {
            -webkit-line-clamp: 1;
            margin-bottom: 0;
            min-height: 0;
            font-size: var(--size_18);
            color: var(--text_black);
        }

        .point_area .block .box .box-inner .block-content .block-text, .point_area .block .box .box-inner .block-content .block-date {
            display: inline-block;
            font-size: var(--size_15);
            color: var(--text_gray);
        }

        .point_area .block .box .box-inner .block-content .block-price {
            position: absolute;
            right: 1.5rem;
            top: 1.2rem;
            font-size: var(--size_27);
            color: var(--main_orange);
        }

            .point_area .block .box .box-inner .block-content .block-price span {
                font-size: var(--size_14);
            }
/*** 
====================================================================
13. Order
====================================================================
***/
/*---order-list---*/
.order-list {
    margin-bottom: 2.2rem;
}

    .order-list .bg-light-orange {
        color: var(--dark_orange);
        font-size: var(--size_15);
        padding: 0.85rem 1.8rem 0.85rem 2.25rem;
    }

        .order-list .bg-light-orange > div {
            display: inline-block;
        }

        .order-list .bg-light-orange label {
            margin-bottom: 0;
            margin-right: 0.3rem;
        }

        .order-list .bg-light-orange i {
            font-style: normal;
        }

        .order-list .bg-light-orange .copy-btn img {
            height: 1.2rem;
            margin-top: -0.5rem;
        }

    .order-list .row-bottom {
        background: #fff;
        color: #BFBFBF;
        font-size: var(--size_15);
        padding: 0.85rem 1.8rem 0.85rem 2.25rem;
        border-top: 1px solid #EAEAEA;
        border-radius: 0px 0px 5px 5px;
        position: relative;
    }

        .order-list .row-bottom .row {
            margin: 0;
        }

            .order-list .row-bottom .row > div {
                padding: 0;
            }

        .order-list .row-bottom .col-md-6 {
            text-align: right;
        }

        .order-list .row-bottom label {
            margin-bottom: 0;
        }

        .order-list .row-bottom span:not(.text-orange) {
            color: var(--text_darkgray);
        }

        .order-list .row-bottom .btn {
            position: absolute;
            top: -4.5rem;
            right: 1.8rem;
            font-size: var(--size_16);
        }

    .order-list.block .box {
        padding: 0;
        margin: 0;
    }

        .order-list.block .box .box-inner {
            background: #fff;
            border-radius: 0;
            padding: 1.3rem 1.8rem 1.3rem 2.25rem;
            display: flex;
            width: 100%;
        }

            .order-list.block .box .box-inner > a {
                width: 170px;
                display: inline-block;
            }

            .order-list.block .box .box-inner .block-content {
                padding: 0;
                margin-left: 1.5rem;
                width: calc(100% - 170px - 1.5rem);
                display: inline-block;
                position: relative;
            }

                .order-list.block .box .box-inner .block-content .block-title {
                    min-height: 0;
                    font-size: var(--size_20);
                    width: calc(100% - 170px);
                    margin-bottom: 0.5rem;
                }

                .order-list.block .box .box-inner .block-content .block-text {
                    font-size: var(--size_15);
                    line-height: 1;
                }

                .order-list.block .box .box-inner .block-content .block-date {
                    float: initial;
                    font-size: var(--size_14);
                    color: #a7a7a7;
                    position: absolute;
                    left: 0;
                    bottom: -0.5rem;
                }

                .order-list.block .box .box-inner .block-content .block-price {
                    float: right;
                    font-size: var(--size_24);
                    color: #a7a7a7;
                    position: absolute;
                    right: 0;
                    top: 7px;
                }
/*order package*/
.detail_area.order .side_area, .detail_area.order-view .side_area {
    top: 0;
    max-height: initial;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.detail_area.order h4 {
    font-size: var(--size_22);
    margin-bottom: 1.2rem;
    position: relative;
}

    .detail_area.order h4 img {
        height: 2rem;
        margin-right: 4px;
    }

.detail_area.order .main-row .col-lg-4 {
    padding-left: 15px;
    padding-right: 1.5rem;
}

.detail_area.order .main-row .col-lg-8 {
    padding-left: 4rem;
    padding-right: 0.9rem;
}

.detail_area.order-view .side_area > div {
    margin-right: 0;
}
/*---order_area---*/
.order_area .bg-gray1 {
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    border-radius: 10px;
}

    .order_area .bg-gray1 hr {
        border-top: 1px dashed #e3e3e3;
    }

.order_area .form-group:last-child {
    margin-bottom: 0;
}

.order_area .form-group .control-label, .order_area .form-group .control-text {
    padding-top: 0;
}

.order_area .text-darkgray {
    font-size: var(--size_15);
}

.order_area h4 .form-check {
    font-size: var(--size_14);
    color: var(--main_orange);
    position: absolute;
    right: 0;
    bottom: 0;
}

.order_area h4 .form-check-input {
    position: absolute;
    margin-top: -0.05rem;
    margin-left: -1.3rem;
    width: 1rem;
    height: 1rem;
}

.order_area .custom-radio {
    margin-top: 6px;
}

/*贊助費用計算*/
.order_area .count-panel {
    list-style-type: none;
    padding: 0.5rem 0 0 0;
    margin-bottom: 0;
}

    .order_area .count-panel > li {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding-right: 2.4rem;
        position: relative;
    }

        .order_area .count-panel > li:last-child {
            padding-right: 0;
        }

        .order_area .count-panel > li > div {
            height: 38px;
            display: flex;
            align-items: center;
        }

        .order_area .count-panel > li > label {
            margin-bottom: 0.8rem;
        }

        .order_area .count-panel > li > div.text-number {
            font-size: var(--size_22);
            color: var(--text_darkgray);
            line-height: 1;
        }

        .order_area .count-panel > li > div.text-total {
            font-size: var(--size_28);
            color: var(--main_orange);
        }

        .order_area .count-panel > li span.symbol {
            color: var(--main_orange);
            position: absolute;
            left: -1.7rem;
            top: 2.7rem;
        }

        .order_area .count-panel > li input.form-control {
            width: 90px;
            height: 38px;
            padding: 0.375rem 0.5rem;
            margin-right: 4px;
        }

    .order_area .count-panel .text-gray {
        margin-top: 6px;
        font-size: var(--size_14);
    }

.order_area .count-info {
    display: flex;
    align-items: center;
    padding-top: 0.4rem;
    flex-wrap: wrap;
}

    .order_area .count-info > * {
        margin-right: 4px;
    }

.order_area .coupon-panel {
    padding-bottom: 0.3rem;
}

    .order_area .coupon-panel input, .order_area .coupon-panel .btn.btn-orange {
        display: inline-block;
        max-width: 230px;
        font-size: var(--size_14);
        padding: 0.82rem 1.5rem;
    }

/*---加購---*/
.detail_area .side_area.lateral.addonArea .lateral-bar {
    height: 25px;
}

.detail_area .side_area.lateral.addonArea {
    margin: 0;
}

    .detail_area .side_area.lateral.addonArea .box.newpackage .box-inner {
        height: 30rem;
    }

    .detail_area .side_area.lateral.addonArea .package_area .block .box {
        width: 18rem;
        padding-right: 18px;
    }

.side_area.addonArea .package_area .block .box .box-inner .block-content {
    padding: 1.5rem 1.8rem;
}

    .side_area.addonArea .package_area .block .box .box-inner .block-content .block-txt {
        margin-top: 0.8rem;
    }

.side_area.addonArea .package_area .block .box .box-inner .image-box {
    height: 100%;
    width: auto;
}

.side_area.addonArea .package_area .block .box .box-inner .block-content .block-price {
    font-size: var(--size_26);
}

.bg-gray1 .side_area.addonArea .form-control {
    border: 1px solid #ced4da;
}

.side_area.addonArea .addon_detail {
    margin-top: 0.6rem;
}
/*---PointModal---*/
.modal-orange .modal-content {
    padding: 0;
    border: none;
}

.modal-orange .modal-header {
    background: var(--main_orange);
    color: #fff;
    border-radius: 0.7rem 0.7rem 0 0;
    padding: 1.7rem 2rem;
}

    .modal-orange .modal-header .modal-title {
        text-align: center;
        width: 100%;
    }

    .modal-orange .modal-header .close {
        position: absolute;
        right: 1rem;
        top: 1.2rem;
        color: #fff;
    }

.modal-orange .modal-body {
    padding: 1rem 5rem 2.2rem 5rem;
}

.modal .message {
    background: var(--light_orange);
    color: var(--dark_orange);
    font-size: var(--size_15);
    line-height: 1;
    padding: 12px;
    margin: 0 18% 40px 18%;
    display: block;
    text-align: center;
}

    .modal .message.w-100 {
        margin: -0.5rem 0 1rem 0;
    }

.modal-orange .info {
    position: relative;
    margin: 2rem 0 1.5rem 0;
    padding-left: 2.5rem;
}

    .modal-orange .info:before {
        content: '';
        background-image: url(../img/icon-information-o.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: var(--size_27);
        height: var(--size_27);
        display: block;
        position: absolute;
        left: 0;
        top: 0;
    }

.modal-orange .btn-orange {
    min-width: 9rem;
}

.modal-orange .text-gray {
    font-size: var(--size_13);
    line-height: 1.3;
    height: 40px;
    margin-bottom: 0.5rem;
}

    .modal-orange .text-gray .text-orange {
        font-size: 130%;
        line-height: 100%;
    }

.modal-orange .score-box {
    display: inline-flex;
    align-items: flex-end;
    margin-bottom: 2rem;
}

    .modal-orange .score-box + .text-danger {
        display: block;
        margin-bottom: 1.5rem;
        margin-top: -1.5rem;
    }

.modal-orange .text-score {
    font-size: 5rem;
    line-height: 4.5rem;
    color: var(--main_orange);
}

.modal-orange .text-darkgray {
    font-size: var(--size_14);
    padding-left: 4px;
}

.modal-orange .form-control {
    background: #ebebeb;
    border-radius: 10px;
    font-size: 3rem;
    height: 4.3rem;
    display: inline-block;
    width: 80%;
    max-width: 10.5rem;
}

.modal-orange .img-shuffle {
    position: absolute;
    left: 0;
    bottom: 2.5rem;
}

.modal-orange .text-primary {
    font-size: var(--size_14);
    margin-top: 0.8rem;
}
/*order-success*/
.info-area {
    position: relative;
    padding: 1rem 0 3.7rem 0;
}

    .info-area .info-title {
        background: var(--main_orange);
        padding: 1rem;
    }

        .info-area .info-title h4 {
            margin: 0;
            font-size: var(--size_20);
            color: #fff;
            line-height: 1;
            text-align: center;
            position: relative;
        }

        .info-area .info-title small {
            font-size: var(--size_14);
            color: var(--mute_orange);
            position: absolute;
            right: 0;
            bottom: 0;
        }

    .info-area .info-content {
        padding: 1.2rem 8rem;
    }

        .info-area .info-content p {
            margin-bottom: 0.3rem;
        }

            .info-area .info-content p > span:first-child {
                padding-right: 0.6rem;
            }

        .info-area .info-content .text-orange {
            position: relative;
        }

            .info-area .info-content .text-orange img {
                height: 1.2rem;
                margin-top: -0.5rem;
            }

        .info-area .info-content i {
            font-style: initial;
        }

.order-result {
    padding: 0.5rem 1.8rem;
}

    .order-result h5 {
        font-size: var(--size_22);
        color: #000;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

        .order-result h5 .tag {
            top: -2px;
        }

    .order-result .box {
        width: 100%;
        margin-bottom: 0;
    }

    .order-result .text-content {
        padding: 2.5rem 0 0 3rem;
    }

        .order-result .text-content p {
            margin-bottom: 0.7rem;
        }

        .order-result .text-content label {
            margin-bottom: 0;
            margin-right: 1rem;
            width: 4rem;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
        }

        .order-result .text-content .large {
            font-size: var(--size_22);
        }

.tappay_orderinfo {
    padding: 0.5rem 1.8rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 1.7rem 2rem;
    background: #fff;
}

    .tappay_orderinfo p {
        margin-bottom: 0.7rem;
    }

        .tappay_orderinfo p:last-child {
            margin-bottom: 0;
        }

.info-area .button-box {
    margin-top: 3rem;
}

    .info-area .button-box .btn.btn-xl {
        padding: 1.1rem 2rem;
        min-width: 14.7rem;
    }

.info-area .team-block {
    display: inline-block;
    width: 260px;
    float: left;
}

.team-message {
    display: inline-block;
    width: calc(100% - 260px - 2rem);
    background: var(--light_orange);
    border: 1px solid #A77358;
    color: var(--dark_orange);
    line-height: 1.8;
    padding: 1.6rem 2rem;
    border-radius: 1rem;
    position: relative;
    margin-left: 1rem;
}

    .team-message:before, .team-message:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: calc(50% - 10px);
        left: -13px;
        border: 10px solid black;
        border-color: var(--light_orange) transparent transparent var(--light_orange);
        transform-origin: 0 0;
        transform: scaleY(0.8) rotate(-45deg);
        z-index: 2;
    }

    .team-message:after {
        border-color: #A77358 transparent transparent #A77358;
        left: -14px;
        z-index: 1;
    }
/*order-view*/
.area-title .btn-refund {
    position: absolute;
    right: 0;
    bottom: 0.5rem;
}

.order-card {
    border-radius: 10px;
    margin-bottom: 0.75rem;
    width: 100%;
    display: flex;
    align-items: center;
}

    .order-card .card-title {
        margin: 0;
        display: inline-flex;
        align-items: center;
        padding-left: 6%;
        font-size: var(--size_16);
        -ms-flex: 0 0 24%;
        flex: 0 0 24%;
        max-width: 24%;
    }

    .order-card .card-body {
        -ms-flex: 0 0 76%;
        flex: 0 0 76%;
        max-width: 76%;
        padding: 2rem 1.25rem;
        position: relative;
    }

        .order-card .card-body .form-group {
            font-size: var(--size_15);
        }

            .order-card .card-body .form-group:last-child {
                margin-bottom: 0;
            }

            .order-card .card-body .form-group .control-label {
                color: var(--text_gray);
                padding-top: 0;
                margin-bottom: 0;
            }

        .order-card .card-body .btn {
            float: right;
            padding: 0.7rem 1.5rem;
            margin-left: 1rem;
            position: relative;
            z-index: 10;
        }

.detail_area.order-view .info-list {
    margin: 1.5rem 0 2rem 0.5rem;
}

    .detail_area.order-view .info-list:before {
        left: 0;
    }

.detail_area.order-view .order_area .count-panel {
    padding: 0;
}

    .detail_area.order-view .order_area .count-panel > li > label {
        color: var(--text_gray);
        margin-bottom: 0.2rem;
    }

    .detail_area.order-view .order_area .count-panel > li > div.text-number {
        font-size: var(--size_20);
    }

    .detail_area.order-view .order_area .count-panel > li > div.text-total {
        font-size: var(--size_24);
    }

    .detail_area.order-view .order_area .count-panel > li span.symbol {
        color: var(--main_orange);
        position: absolute;
        top: 2.15rem;
    }
/*---order manage---*/
.toolbar.manage label {
    font-size: var(--size_14);
    color: var(--text_darkgray);
    margin-bottom: 0;
}

.toolbar.manage {
    margin: 4.5rem -3px 2.6rem -3px;
}

    .toolbar.manage > div {
        position: relative;
        width: 100%;
        padding-left: 3px;
        padding-right: 3px;
        margin-bottom: 5px;
    }

    .toolbar.manage .col-37 {
        -ms-flex: 0 0 37%;
        flex: 0 0 37%;
        max-width: 37%;
    }

    .toolbar.manage .col-15 {
        -ms-flex: 0 0 15%;
        flex: 0 0 15%;
        max-width: 15%;
    }

    .toolbar.manage .col-12 {
        -ms-flex: 0 0 12%;
        flex: 0 0 12%;
        max-width: 12%;
    }

    .toolbar.manage .col-10 {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .toolbar.manage .col-54 {
        -ms-flex: 0 0 54%;
        flex: 0 0 54%;
        max-width: 54%;
    }

    .toolbar.manage .input-group-text {
        padding: 0.375rem 0.6rem;
    }

    .toolbar.manage .btn-orange {
        min-width: 6rem;
    }

.tollbar-toggler {
    color: var(--main_orange);
    display: inline-block;
    padding-bottom: 1rem;
}

    .tollbar-toggler img {
        display: inline-block;
        margin-top: -3px;
        margin-right: 3px;
    }

#collapsibleTollbar .modal-header .modal-title {
    font-size: var(--size_20);
}
/*贊助管理*/
.toolexport, .toolall {
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.toolall {
    float: left;
}

.toolexport {
    float: right;
}

    .toolexport a, .toolexport .form-check, .toolall a, .toolall .form-check {
        font-size: var(--size_15);
        color: var(--text_darkgray);
        margin-left: 1.2rem;
        white-space: nowrap;
    }

.toolall a, .toolall .form-check {
    margin-left: 0;
    margin-right: 1.2rem;
}

    .toolexport a.text-orange, .toolall a.text-orange {
        color: var(--main_orange);
    }

    .toolexport a i, .toolall a i {
        font-size: var(--size_17);
    }

.toolall .form-check {
    margin-left: 15px;
    margin-right: 0.5rem;
    display: none;
}

/*manage-table 訂單管理*/
.css_table.manage-table .css_th,
.css_table.period-table .css_th {
    background: var(--text_gray);
    padding: 1rem 0.4rem;
    font-size: var(--size_14);
}

.css_table.manage-table .css_td {
    padding: 1.2rem 0.4rem;
    font-size: var(--size_14);
    line-height: 1.4;
}

.css_table.manage-table .td-check {
    padding-left: 0.7rem;
}

.css_table.manage-table .td-title {
    width: 170px;
}

.css_table.manage-table .td-number {
    color: var(--main_orange);
}

.css_table.manage-table .td-hr {
    display: none;
}

.css_table.manage-table .td-lock {
    text-align: center;
    font-size: var(--size_20);
}

.css_table.manage-table .td-setting {
    text-align: center;
    padding-right: 1.7rem;
}

    .css_table.manage-table .td-setting .dropdown-menu {
        top: 10px !important;
        left: 4.2rem !important;
        min-width: 0;
        width: 9.6rem;
    }

    .css_table.manage-table .td-setting .dropdown-item {
        padding: 0.5rem 1.7rem;
    }

        .css_table.manage-table .td-setting .dropdown-item i {
            margin-right: 0.5rem;
            width: var(--size_15);
        }

.manage-table .badge,
.period-table .badge {
    display: inline-block;
    padding: 0.25rem 0.4rem;
    line-height: 1;
    border-radius: 0.125rem;
    font-weight: 400;
    font-size: 85%;
}

.badge-purple {
    color: #fff;
    background-color: #776bbe;
    border-color: #776bbe;
}

.badge-warning {
    color: #fff;
    background-color: #f89406;
    border-color: #f89406;
}

.badge-yellow {
    color: #524b21;
    background-color: #fbe77a;
    border-color: #e1ca53;
}

/*長期訂閱*/
.css_table.period-table .td-title {
    width: 60px;
}

.css_table.period-table .css_td {
    padding: 1.2rem 0.8rem;
    font-size: var(--size_15);
    line-height: 1.4;
}

.css_table.period-table .td-setting {
    width: 10rem;
}

.css_table.period-table .btn {
    display: block;
    margin-bottom: 0.5rem;
}

.css_table.period-table .period-process {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}

    .css_table.period-table .period-process li {
        display: flex;
        align-items: center;
        margin-bottom: 0.6rem;
        position: relative;
    }

        .css_table.period-table .period-process li:before {
            content: '';
            background: #e9ecef;
            width: 3px;
            border-radius: 0.4rem;
            display: block;
            height: 94%;
            position: absolute;
            top: 3%;
            left: -12px;
        }

        .css_table.period-table .period-process li .badge {
            margin-left: 0.5rem;
        }


/*** 
====================================================================
14. Plugin
====================================================================
***/
/*Ckeditor*/
.ck.ck-editor__editable_inline > :first-child {
    margin-top: 15px !important;
}

.ck.ck-editor__editable_inline > :last-child {
    margin-bottom: 15px !important;
}

.ck.ck-editor__main > .ck-editor__editable {
    min-height: 400px;
}

.content-sm .ck.ck-editor__main > .ck-editor__editable {
    min-height: 150px;
}

.ck.ck-editor__main > .ck-editor__editable a,
.content_area.normal-family a {
    color: #007bff;
}

/*tagsinput*/
.tagsinput {
    background-color: #fff;
    /*border: 1px solid #ccc;*/
    border-bottom: none;
}

    .tagsinput, .tagsinput > div:first-child, .tagsinput > div:first-child .text-tag {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

        .tagsinput > div {
            position: relative;
        }

        .tagsinput .text-tag {
            border-radius: 0;
            border: none;
            border-bottom: 1px solid #ccc;
        }

            .tagsinput .text-tag:focus {
                border-bottom: 1px solid var(--main_orange) !important;
            }
/*.tagsinput > div:last-child .form-control {
            border-bottom: none;
        }*/
.enter-tag {
    /*border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;*/
}

.tagsinput .remove-tag, .tableAutoRow .btn-rowbox .rowDeleteBtn, span.cancel-email {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    border-radius: 50%;
    width: var(--size_22);
    height: var(--size_22);
    background-color: #FFF1E8;
    color: var(--main_orange);
    font-size: var(--size_17);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.tableAutoRow .btn-rowbox .rowDeleteBtn {
    background: #e3e3e3;
    color: var(--text_darkgray);
}

.tagsinput .remove-tag:hover {
    opacity: 0.8;
}
/*---fancybox---*/
.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right: 0;
    /*height: 95px;*/
    max-height: 190px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    overflow: auto;
}

.fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
}

.fancybox-thumbs__list {
    display: inline-block;
    width: auto;
}

    .fancybox-thumbs__list a {
        width: 75px;
    }

        .fancybox-thumbs__list a:before {
            border: 4px solid var(--main_orange);
        }
/*** 
====================================================================
15. Event
====================================================================
***/
.main-header.white {
    position: relative;
    z-index: 1;
}

    .main-header.white .main-menu > li > a, .main-header.white .main-button > li > a {
        color: #fff !important;
    }

        .main-header.white .main-menu > li > a:hover, .main-header.white .main-menu > li > a:focus, .main-header.white .main-button > li > a:hover, .main-header.white .main-button > li > a:focus {
            background-color: transparent;
            color: var(--main_orange) !important;
        }

    .main-header.white .menu-search-box #searchMenuBtn .img-search::before {
        background-image: url(../img/icon-search-w.svg);
    }

    .main-header.white .menu-member-box #memberMenuBtn .img-user::before {
        background-image: url(../img/icon-avatar-w.svg);
    }

.event_page .section_area {
    padding-top: 3rem;
}

    .event_page .section_area:last-child {
        padding-bottom: 10rem;
    }
/*background*/
.event-bg {
    padding-top: 5rem;
    position: relative;
    overflow: hidden;
}

.event_page .bg-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

.event_page .area-title {
    margin-bottom: 4rem;
}

    .event_page .area-title b {
        font-weight: normal;
        position: relative;
        z-index: 1;
    }

    .event_page .area-title.setTitle {
        text-align: center;
        border-bottom: none;
        font-size: 42px;
        letter-spacing: 3px;
        height: 258px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -2rem;
        margin-bottom: 2rem !important;
    }

        .event_page .area-title.setTitle span {
            display: none;
        }

.title-img {
    width: 1920px;
    height: 258px;
    position: absolute;
    left: calc((1920px - 1350px) * -0.5);
    bottom: 0;
}
/*banner*/
.event_page .banner-carousel {
    padding: 0;
    margin-top: calc(var(--header_h)*-1);
}

    .event_page .banner-carousel.owl-carousel .owl-stage-outer {
        border-radius: 0;
    }

.event_page .bannerArea-item {
    max-height: none;
}

    .event_page .bannerArea-item .image-box {
        padding-bottom: 61.35%;
        border-radius: 0;
    }

.event_page .banner-carousel .nav-container {
    display: none;
}

.event_page .banner-carousel .dots-outter {
    padding-top: 0;
    margin-top: -2.5rem;
}
/*project*/
.event_page .area-project .block.row {
    margin-right: -6px;
    margin-left: -6px;
}

.event_page .area-project .block .box {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
}

    .event_page .area-project .block .box .box-inner {
        padding: 30px 32px;
        background: #fff;
    }

        .event_page .area-project .block .box .box-inner .block-content {
            padding-bottom: 0;
        }
/*article*/
.area-article .block {
    background: #fff;
    border-radius: 10px;
    padding: 48px 50px 25px 50px;
}

    .area-article .block .box .box-inner .block-content {
        padding-bottom: 0;
        background: #fff;
        margin-left: -1px;
        margin-top: -40px;
        position: relative;
        z-index: 1;
        width: 92%;
        border-radius: 0px 10px 10px 10px;
        padding: 16px 25px 16px 14px;
    }

        .area-article .block .box .box-inner .block-content .block-title {
            -webkit-line-clamp: 3;
            margin-bottom: 0;
        }

        .area-article .block .box .box-inner .block-content:after {
            content: '';
            background-image: url('../img/icon-promotion-article-b.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 38px;
            height: 42px;
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            transition: all 400ms;
        }

    .area-article .block .box .box-inner:hover .block-content:after {
        right: -5px;
    }

.area-article .owl-dots {
    text-align: center;
}

.area-article .owl-prev {
    left: 2%;
}

.area-article .owl-next {
    right: 2%;
}

.area-article .owl-carousel .owl-item {
    transition: all 800ms;
}
/*--1st---*/
.area-article .owl-item.active .box {
    width: 200%;
    height: 200%;
}

    .area-article .owl-item.active .box .box-inner .block-content .block-title {
        font-size: var(--size_22);
        min-height: calc(3 * var(--size_22) + 1rem);
    }

    .area-article .owl-item.active .box .box-inner .block-content {
        width: 63%;
    }

        .area-article .owl-item.active .box .box-inner .block-content:after {
            width: 54px;
            height: 60px;
        }

    .area-article .owl-item.active .box .box-inner .image-box {
        border-radius: 20% 0 20% 0;
    }
/*--2nd、3rd---*/
.area-article .owl-item.active ~ .owl-item.active .box {
    width: 100%;
    height: 100%;
}

.area-article .owl-item.active ~ .owl-item.active {
    transform: translateX(100%);
    transition: none;
}

    .area-article .owl-item.active ~ .owl-item.active .box .box-inner .block-content .block-title {
        font-size: var(--size_16);
        min-height: calc(3 * var(--size_16) + 0.5rem);
    }

    .area-article .owl-item.active ~ .owl-item.active .box .box-inner .block-content {
        width: 92%;
    }

        .area-article .owl-item.active ~ .owl-item.active .box .box-inner .block-content:after {
            width: 38px;
            height: 42px;
        }

    .area-article .owl-item.active ~ .owl-item.active .box .box-inner .image-box {
        border-radius: 10px;
    }
    /*--3rd---*/
    .area-article .owl-item.active ~ .owl-item.active ~ .owl-item.active {
        transform: translateY(calc(100% - 10px));
    }
/*team*/
.event_page .area-team .area-title {
    margin-bottom: 3rem;
}

.bg-black {
    background-color: #555555;
}

.event_page .area-team .block.row {
    margin-right: -10px;
    margin-left: -10px;
}

.event_page .area-team .block .box {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.event_page .area-team .block .box-inner {
    padding: 60px 40px;
    display: flex;
    height: 100%;
}

.event_page .area-team .userAvatar {
    width: 12rem;
    height: 12rem;
}

.area-team .block .block-title {
    color: var(--main_orange);
    font-size: var(--size_22);
    margin-top: 0.5rem;
}

.area-team .block .bg-black .block-title {
    color: var(--mute_orange);
}

.area-team .block .box .box-inner .block-content {
    position: relative;
    font-size: var(--size_15);
    margin: 0;
    padding: 22px 0 22px 1rem;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

.area-team .block .box .box-inner.bg-black .block-content {
    color: #fff;
}

.blockquote::before, .blockquote::after {
    font-size: 90px;
    position: absolute;
    height: 40px;
    line-height: 1;
}

.blockquote::before {
    content: '“';
    top: -22px;
    left: -10px;
}

.blockquote::after {
    content: '“';
    transform: rotateY(180deg);
    bottom: -20px;
    right: -10px;
}

.bg-black .blockquote::before, .bg-black .blockquote::after {
    background-color: #555555;
}

.bg-white .blockquote::before, .bg-white .blockquote::after {
    background-color: #fff;
}
/*event-lab*/
.event_page .area-lab .area-title {
    margin-bottom: 3rem;
}

.event_page .area-lab .block.row {
    margin-right: -5px;
    margin-left: -5px;
}

.event_page .area-lab .block .box {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}

    .event_page .area-lab .block .box .box-inner {
        padding: 26px 29px;
        background: #fff;
    }

        .event_page .area-lab .block .box .box-inner .block-content {
            padding-bottom: 0;
        }

        .event_page .area-lab .block .box .box-inner .image-box {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .event_page .area-lab .block .box .box-inner .block-content .block-title {
            margin-bottom: 0;
        }

        .event_page .area-lab .block .box .box-inner .block-content .block-category {
            margin-top: -18px;
            margin-left: -3px;
            overflow: initial;
        }

.event_page .area-lab .tag {
    font-size: var(--size_14);
    border-radius: 0 0 10px 10px;
    padding-left: 2.7em;
}

    .event_page .area-lab .tag.tag-icon-blue {
        padding-left: 3.1em;
    }

    .event_page .area-lab .tag:before {
        width: var(--size_28);
        height: var(--size_28);
        left: 8px;
        top: -2px;
    }

.event_page .area-lab .tag-icon-blue::before {
    width: var(--size_33);
    background-image: url(../img/icon-promotion-feedback.svg);
}

.event_page .area-lab .tag-icon-orange::before {
    background-image: url(../img/icon-promotion-apply.svg);
}
/*-----index-----*/
/*index event*/
.index_event .event_block {
    border: 1px solid #dedede;
    border-radius: 10px;
    height: 100%;
}

.index_event .img-cover {
    height: 210px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px 10px 0 0;
}

.index_event .event-title {
    font-size: var(--size_20);
    padding: 12px 15px 0 15px;
    margin: 0;
    font-weight: 500;
}

.index_event .block {
    padding: 0 20px;
}

.index_event.section_area .area-more {
    position: relative;
    text-align: center;
    display: block;
    border-top: 1px solid rgb(222, 222, 222);
    padding-top: 10px;
}

    .index_event.section_area .area-more::after {
        background-image: none;
        transform: none;
    }

.index_event .owl-dots {
    text-align: center;
    margin-top: 10px;
}
/*disabled scroll*/
.index_event.c-1 .owl-carousel .owl-stage, .index_event.c-1 .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y !important;
    touch-action: pan-y !important;
}
/*預設直排*/
.index_event .block {
    margin-bottom: 10px;
}

    .index_event .block .box {
        padding: 15px;
        margin-bottom: 0;
    }

        .index_event .block .box:not(:first-child) {
            border-top: 1px solid #e9e9e9;
            padding-top: 12px;
        }

        .index_event .block .box .box-inner {
            display: flex;
        }

            .index_event .block .box .box-inner > a {
                width: 25%;
            }

            .index_event .block .box .box-inner .block-content {
                width: 72%;
                margin-left: 3%;
                padding: 0;
            }

            .index_event .block .box .box-inner .image-box {
                border-radius: 0;
            }

            .index_event .block .box .box-inner .block-content .block-title {
                margin-bottom: 0.5rem;
                font-size: var(--size_17);
                min-height: calc(2 * var(--size_17) + 0.5rem);
            }

            .index_event .block .box .box-inner .block-content .progress-txt {
                float: initial;
                font-size: var(--size_18);
                display: inline-block;
                margin-right: 15px
            }

            .index_event .block .box .box-inner .block-content .block-category {
                position: absolute;
                right: 0;
                bottom: -2px;
                z-index: -1;
                text-align: right;
            }

/*index-lab*/
.index-lab .block .box .box-inner .image-box, .td-image .image-box {
    border-radius: 10px 10px 0 0;
}

.index-lab .block .box .box-inner .block-content {
    padding: 0;
}

.index-lab .block .box .block-labCount {
    display: flex;
    margin: 0 0 8px 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

    .index-lab .block .box .block-labCount > li {
        display: inline-block;
        width: 50%;
        padding: 8px 0;
        text-align: center;
        background: #e6e6e6;
        font-size: var(--size_15);
    }

        .index-lab .block .box .block-labCount > li:last-child {
            background: #f0f0f0;
        }

        .index-lab .block .box .block-labCount > li span {
            color: var(--main_orange);
            font-size: var(--size_20);
            font-weight: 600;
            display: block;
        }

.index-lab .block .box .box-inner .block-content .block-date {
    float: none;
    font-size: var(--size_15);
    color: var(--text_darkgray);
    margin-bottom: 2px;
}

.index-lab .block .box .block-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--main_orange);
    color: #fff;
    float: right;
    font-size: var(--size_20);
    line-height: 1;
    padding: 10px 10px 7px 10px;
}
/*index-article*/
.index-article h5 {
    color: #000;
    font-size: var(--size_18);
}

    .index-article h5:hover {
        color: var(--main_orange);
        transition: all 400ms;
    }

.index-article .date {
    font-size: var(--size_15);
    color: var(--text_darkgray);
}

.index-article > div {
    padding-left: 2rem;
    position: relative;
}

.index-article .num {
    color: var(--main_orange);
    font-size: var(--size_33);
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 2rem;
}

.index-article .area-down-more {
    border: 1px solid var(--main_orange);
    color: var(--main_orange);
    font-size: var(--size_24);
    padding: 2px 0;
    display: block;
    width: 100%;
    border-radius: 20px;
    text-align: center;
}

    .index-article .area-down-more:hover {
        background: var(--light_orange);
    }
/*index_team*/
.index_team {
    background: #fcf7f1;
}

    .index_team .block .box .box-inner {
        text-align: center;
    }

    .index_team .userAvatar {
        width: 8rem;
        height: 8rem;
        margin: 5px auto;
    }

    .index_team .block .box .box-inner .block-content .block-title {
        -webkit-line-clamp: 1;
        min-height: calc(1 * var(--size_19) + 0.5rem);
        text-align: center;
        margin-bottom: 0;
        color: var(--main_orange);
    }

    .index_team .block .box .box-inner .block-content .block-text {
        color: var(--text_black);
        font-size: var(--size_15);
        line-height: 1.5em;
        /*three line*/
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        min-height: calc(3 * var(--size_15) + 0.5rem);
    }