/* 縮小失敗。正在傳回未縮小的內容。
(3159,31): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3160,28): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3161,23): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3389,31): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3390,28): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3391,23): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3399,35): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3400,32): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(3401,27): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(5217,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5218,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5219,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5220,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
button {
    border: 0;
    background: rgba(0,0,0,0)
}

.btn1 {
    font-size: 16px;
    padding: 8px 28px;
    display: inline-block;
    text-align: center;
    line-height: 1.3333333;
    border-radius: 99em;
    border: 1px solid #e5e5e5;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background: #fff;
    color: #282828
}

    .btn1:hover, .btn1:active, .btn1:focus {
        color: #fff;
        background: #d1a36d;
        border: 1px solid #d1a36d
    }

    .btn1 i {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top
    }

.btn2 {
    width: 100%;
    font-size: 16px;
    padding: 8px 28px;
    display: inline-block;
    text-align: center;
    line-height: 1.3333333;
    border-radius: 8px;
    border: 1px solid #d1a36d;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background: #fff;
    color: #d1a36d;
    text-decoration: none
}

    .btn2:hover, .btn2:active, .btn2:focus {
        color: #fff;
        background: #d1a36d;
        border: 1px solid #d1a36d
    }

    .btn2 i {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top
    }

.btn3 {
    font-size: 16px;
    padding: 4px 28px;
    display: inline-block;
    text-align: center;
    line-height: 1.3333333;
    border-radius: 99em;
    border: 1px solid #d1a36d;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background: #d1a36d;
    color: #fff
}

    .btn3:hover, .btn3:active, .btn3:focus {
        color: #d1a36d;
        background: #fff;
        border: 1px solid #d1a36d
    }

    .btn3 i {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top
    }

.btn4 {
    width: 100%;
    font-size: 16px;
    padding: 4px 28px;
    display: inline-block;
    text-align: center;
    line-height: 1.3333333;
    border-radius: 99em;
    border: 1px solid #d1a36d;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background: #d1a36d;
    color: #fff
}

    .btn4:hover, .btn4:active, .btn4:focus {
        color: #d1a36d;
        background: #fff;
        border: 1px solid #d1a36d
    }

    .btn4 i {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top
    }

.btn-s {
    padding: 4px 12px
}

.btn-m {
    padding: 8px 24px
}

.btn-xl {
    width: 90%
}

.btn-outline {
    background: #f7f8fa;
    border: 1px solid #d1a36d;
    color: #d1a36d;
    border-radius: 99px
}

    .btn-outline:hover, .btn-outline:active, .btn-outline:focus {
        color: #d1aa7d;
        background: #d1a36d;
        border: 1px solid #d1a36d
    }

.btn-round {
    background: #d1a36d;
    border: 1px solid #d1a36d;
    color: #d1aa7d;
    border-radius: 99px
}

    .btn-round:hover, .btn-round:active, .btn-round:focus {
        color: #d1aa7d;
        background: #282828;
        border: 1px solid #282828
    }

.btn-line {
    width: 100%;
    padding: 12px 24px;
    background: #00b900;
    border: 1px solid #00b900;
    color: #fff
}

    .btn-line:hover {
        color: #fff;
        background: #039103
    }

.btn-fb {
    width: 100%;
    padding: 12px 24px;
    background: #1877f2;
    border: 1px solid #1877f2;
    color: #fff
}

    .btn-fb:hover {
        color: #fff;
        background: #0455be
    }

.btn-trader168 {
    width: 100%;
    padding: 12px 24px;
    background: #b60033;
    border: 1px solid #b60033;
    color: #fff
}

    .btn-trader168 i {
        width: 45px;
        height: 20px
    }

    .btn-trader168:hover {
        color: #fff;
        background: #910029
    }

.btn-unable {
    background: #666;
    border: 1px solid #666;
    cursor: default
}

    .btn-unable:hover {
        background: #666;
        border: 1px solid #666
    }

.btn-underline {
    color: #3571f5;
    border-bottom: 1px solid #3571f5;
    cursor: pointer
}

    .btn-underline:hover {
        color: #204eb3;
        border-bottom: 1px solid #204eb3
    }

.img-rwd {
    max-width: 100%;
    height: auto;
    display: block
}

.g-820 {
    width: 100%;
    max-width: 820px;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    position: relative
}

.g-600 {
    width: 100%;
    max-width: 600px;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    min-height: -webkit-calc(100vh - 74px - 141px);
    min-height: -moz-calc(100vh - 74px - 141px);
    min-height: calc(100vh - 74px - 141px)
}

.g-main {
    width: 100%;
    max-width: 1260px;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    position: relative
}

.g-main-M {
    width: 100%;
    max-width: 1000px;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    overflow: hidden
}

.g-main-S {
    width: 100%;
    max-width: 750px;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    position: relative
}

.row {
    margin-right: -12px;
    margin-left: -12px;
    position: relative
}

.flex-row {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
    position: relative
}

.disflex {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flexauto {
    -webkit-flex: 0 0 auto !important;
    -moz-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important
}

.nowarp {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.flexalign_cc {
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.space-between {
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex-center {
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.align_center {
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.g-21 {
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px
}

@media(min-width: 768px) {
    .g-21 {
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px
    }
}

.g-31 {
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px
}

@media(min-width: 768px) {
    .g-31 {
        -webkit-flex: 0 0 33.33%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px
    }
}

.g-21-65 {
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px
}

@media(min-width: 768px) {
    .g-21-65 {
        -webkit-flex: 0 0 65%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 65%;
        flex: 0 0 65%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px
    }
}

.g-321 {
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 12px
}

@media(min-width: 768px) {
    .g-321 {
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 100%;
        padding: 12px
    }
}

@media(min-width: 992px) {
    .g-321 {
        -webkit-flex: 0 0 33.33%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 100%;
        padding: 12px
    }
}

.g-42 {
    -webkit-flex: 0 0 50%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 100%;
    padding: 12px
}

@media(min-width: 768px) {
    .g-42 {
        -webkit-flex: 0 0 25%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 100%;
        padding: 12px
    }
}

.g-32 {
    -webkit-flex: 0 0 50%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 100%;
    padding: 12px
}

@media(min-width: 768px) {
    .g-32 {
        -webkit-flex: 0 0 33.33%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 100%;
        padding: 12px
    }
}

.g-31 {
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 12px
}

@media(min-width: 768px) {
    .g-31 {
        -webkit-flex: 0 0 33.33%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 100%;
        padding: 12px
    }
}

.g-1 {
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 12px;
    padding-right: 12px
}

.g-basis {
    -webkit-flex-basis: 1;
    -ms-flex-preferred-size: 1;
    flex-basis: 1
}

.g-auto {
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px
}

.g-33 {
    -webkit-flex: 0 0 33.33%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    padding-left: 12px;
    padding-right: 12px
}

.g-half {
    -webkit-flex: 0 0 50%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    padding-left: 12px;
    padding-right: 12px
}

.g-70 {
    -webkit-flex: 0 0 70%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    padding-left: 12px;
    padding-right: 12px
}

.text-c {
    text-align: center
}

label {
    display: block;
    margin: 10px 0;
    padding: 0 10px 0 0;
    font-weight: normal
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

input {
    padding-left: 4px
}

    input:focus-visible {
        outline: none
    }

button, select {
    text-transform: none
}

::-webkit-input-placeholder {
    color: #999
}

:-moz-placeholder {
    color: #999
}

::-moz-placeholder {
    color: #999
}

:-ms-input-placeholder {
    color: #999
}

.mgc {
    position: relative;
    width: 16px;
    height: 16px;
    background-clip: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: -0.15px .6px 0 0;
    vertical-align: text-bottom;
    border-radius: 3px;
    -webkit-transition: background-color .25s;
    -o-transition: background-color .25s;
    -moz-transition: background-color .25s;
    transition: background-color .25s;
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc:checked:after {
        content: "";
        display: block;
        height: 4px;
        width: 7px;
        border: 0 solid #333;
        border-width: 0 0 2px 2px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: 3px;
        left: 3px
    }

    .mgc:disabled {
        opacity: .65
    }

    .mgc:focus {
        outline: none;
        box-shadow: inset 0 1px 1px hsla(0,0%,100%,.075),0 0 2px #38a7ff
    }

    .mgc:checked {
        background-color: #fff;
        border-color: #d7d7d7
    }

        .mgc:checked:after {
            border-color: #414141
        }

.mgc-primary {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc-primary:checked {
        background-color: #fff;
        border-color: #d1a36d
    }

        .mgc-primary:checked:after {
            border-color: #d1a36d
        }

.mgc-success {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc-success:checked {
        background-color: #5cb85c;
        border-color: #5cb85c
    }

        .mgc-success:checked:after {
            border-color: #fff
        }

.mgc-info {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc-info:checked {
        background-color: #5bc0de;
        border-color: #5bc0de
    }

        .mgc-info:checked:after {
            border-color: #fff
        }

.mgc-warning {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc-warning:checked {
        background-color: #f0ad4e;
        border-color: #f0ad4e
    }

        .mgc-warning:checked:after {
            border-color: #fff
        }

.mgc-danger {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgc-danger:checked {
        background-color: #cf3b3a;
        border-color: #cf3b3a
    }

        .mgc-danger:checked:after {
            border-color: #fff
        }

.mgc-circle {
    border-radius: 50%
}

.mgc-mg {
    width: 20px;
    height: 20px
}

    .mgc-mg:checked:after {
        top: 3px;
        left: 3px;
        height: 6px;
        width: 12px
    }

.checkbox-row {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px
}

.mgc-lg {
    -webkit-flex: 0 0 24px;
    -moz-box-flex: 0;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    width: 24px;
    height: 24px
}

    .mgc-lg:checked:after {
        top: 4px;
        left: 4px;
        height: 8px;
        width: 16px
    }

.mgr {
    position: relative;
    width: 16px;
    height: 16px;
    background-clip: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: text-bottom;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr:disabled {
        opacity: .65
    }

    .mgr:before {
        content: "";
        display: block;
        height: 0;
        width: 0;
        -webkit-transition: width .25s,height .25s;
        -o-transition: width .25s,height .25s;
        -moz-transition: width .25s,height .25s;
        transition: width .25s,height .25s
    }

    .mgr:checked:before {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        margin: 3px 0 0 3px
    }

    .mgr:focus {
        outline: none;
        box-shadow: inset 0 1px 1px hsla(0,0%,100%,.075),0 0 2px #38a7ff
    }

    .mgr:checked {
        border: 1px solid #555
    }

        .mgr:checked:before {
            background-color: #555
        }

.mgr-primary {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr-primary:checked {
        border: 1px solid #d1a36d
    }

        .mgr-primary:checked:before {
            background-color: #d1a36d
        }

.mgr-success {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr-success:checked {
        border: 1px solid #5cb85c
    }

        .mgr-success:checked:before {
            background-color: #5cb85c
        }

.mgr-info {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr-info:checked {
        border: 1px solid #5bc0de
    }

        .mgr-info:checked:before {
            background-color: #5bc0de
        }

.mgr-warning {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr-warning:checked {
        border: 1px solid #f0ad4e
    }

        .mgr-warning:checked:before {
            background-color: #f0ad4e
        }

.mgr-danger {
    background-color: #fff;
    border: 1px solid #d7d7d7
}

    .mgr-danger:checked {
        border: 1px solid #cf3b3a
    }

        .mgr-danger:checked:before {
            background-color: #cf3b3a
        }

.mgr-sm {
    width: 20px;
    height: 20px
}

    .mgr-sm:checked:before {
        height: 14px;
        width: 14px;
        border-radius: 50%;
        margin: 2px 0 0 2px
    }

.mgr-lg {
    width: 24px;
    height: 24px
}

    .mgr-lg:checked:before {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        margin: 3px 0 0 3px
    }

.mgc-switch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 41px;
    height: 24px;
    border: 1px solid #dfdfdf;
    outline: 0;
    border-radius: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #dfdfdf
}

    .mgc-switch:before, .mgc-switch:after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        -o-transition: -o-transform .3s;
        -moz-transition: transform .3s, -moz-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s, -moz-transform .3s, -o-transform .3s;
        transition: transform .3s,-webkit-transform .3s
    }

    .mgc-switch:before {
        width: 39px;
        height: 22px;
        background-color: #fdfdfd
    }

    .mgc-switch:after {
        width: 22px;
        height: 22px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.4)
    }

    .mgc-switch:checked {
        border-color: #04be02;
        background-color: #04be02
    }

        .mgc-switch:checked:before {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0)
        }

        .mgc-switch:checked:after {
            -webkit-transform: translateX(17px);
            -moz-transform: translateX(17px);
            -ms-transform: translateX(17px);
            -o-transform: translateX(17px);
            transform: translateX(17px)
        }

.mgc-sm.mgc-switch {
    height: 20px;
    width: 32px
}

    .mgc-sm.mgc-switch:before {
        height: 18px;
        width: 30px
    }

    .mgc-sm.mgc-switch:after {
        width: 18px;
        height: 18px
    }

    .mgc-sm.mgc-switch:checked:after {
        top: 0;
        left: 2px;
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        transform: translateX(10px)
    }

.mgc-lg.mgc-switch {
    height: 32px;
    width: 52px
}

    .mgc-lg.mgc-switch:before {
        height: 30px;
        width: 50px
    }

    .mgc-lg.mgc-switch:after {
        width: 30px;
        height: 30px
    }

    .mgc-lg.mgc-switch:checked:after {
        top: 0;
        left: 2px;
        -webkit-transform: translateX(18px);
        -moz-transform: translateX(18px);
        -ms-transform: translateX(18px);
        -o-transform: translateX(18px);
        transform: translateX(18px)
    }

.form-style input[type=text], .form-style input[type=date], .form-style input[type=datetime], .form-style input[type=email], .form-style input[type=number], .form-style input[type=search], .form-style input[type=time], .form-style input[type=url], .form-style input[type=tel], .form-style input[type=password], .form-style textarea, .form-style select {
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: #555;
    border-radius: 10px;
    height: 44px
}

.form-style textarea {
    min-height: 120px
}

    .form-style input[type=text]:focus, .form-style input[type=date]:focus, .form-style input[type=datetime]:focus, .form-style input[type=email]:focus, .form-style input[type=number]:focus, .form-style input[type=search]:focus, .form-style input[type=time]:focus, .form-style input[type=url]:focus, .form-style input[type=tel]:focus, .form-style input[type=password]:focus, .form-style textarea:focus, .form-style select:focus {
        box-shadow: 0 0 5px #d1a36d;
        border: 1px solid #d1a36d
    }

.form-style input[type=submit], .form-style input[type=button] {
    width: 100%
}

.address-row {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

    .address-row .address-col {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .address-row .address-col--wide {
        -webkit-flex: 2;
        -moz-box-flex: 2;
        -ms-flex: 2;
        flex: 2
    }

.form-style label span {
    color: #eb4e4f
}

.form-style input[type=text]:disabled, .form-style input[type=date]:disabled, .form-style input[type=datetime]:disabled, .form-style input[type=email]:disabled, .form-style input[type=number]:disabled, .form-style input[type=search]:disabled, .form-style input[type=time]:disabled, .form-style input[type=url]:disabled, .form-style input[type=tel]:disabled, .form-style input[type=password]:disabled, .form-style textarea:disabled, .form-style select:disabled {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #999;
    cursor: not-allowed
}

.form-style .error input[type=text], .form-style .error input[type=date], .form-style .error input[type=datetime], .form-style .error input[type=email], .form-style .error input[type=number], .form-style .error input[type=search], .form-style .error input[type=time], .form-style .error input[type=url], .form-style .error input[type=password], .form-style .error input[type=tel], .form-style .error textarea, .form-style .error select {
    box-shadow: 0 0 5px #f54747;
    border: 1px solid #f54747
}

.form-style .error p {
    color: #f54747;
    font-size: 13px
}

.form-style .disable input[type=text], .form-style .disable input[type=date], .form-style .disable input[type=datetime], .form-style .disable input[type=email], .form-style .disable input[type=number], .form-style .disable input[type=search], .form-style .disable input[type=time], .form-style .disable input[type=url], .form-style .disable textarea, .form-style .disable select {
    background-color: #eee;
    border: 1px solid #eee
}

.form-style .icon-down {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/icon/arrdownIcon.svg) no-repeat right .5em center;
    background-color: #fff;
    -o-background-size: 16px;
    background-size: 16px
}

select::-ms-expand {
    display: none
}

.dateLists_container {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: -12px;
    margin-left: -12px
}

    .dateLists_container .col-xs-4 {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 12px !important;
        padding-right: 12px !important
    }

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background: #f7f8fa;
    color: #000;
    font-family: "Helvetica","Microsoft JhengHei",Verdana,Arial,sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5;
    position: relative
}

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

p {
    margin: 0
}

a {
    color: #333;
    margin: 0px;
    text-decoration: none
}

    a:focus, a:hover {
        color: #d1a36d
    }

    a:focus {
        outline: none !important;
        text-decoration: none
    }

button:focus {
    outline: none !important;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

em {
    font-style: normal
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    color: #282828
}

:after, :before {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

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

select::-ms-expand {
    display: none
}

ul, ol, li {
    margin: 0;
    padding: 0;
    list-style: none
}

.circle_box {
    border-radius: 999em
}

.clear {
    clear: both
}

.textleft {
    text-align: left
}

.textright {
    text-align: right
}

.textcenter {
    text-align: center
}

.maintop {
    margin-top: 72px
}

.mt-8 {
    margin-top: 8px !important
}

.mt-12 {
    margin-top: 12px !important
}

.mt-16 {
    margin-top: 16px !important
}

.mt-20 {
    margin-top: 20px !important
}

.mt-24 {
    margin-top: 24px !important
}

.mt-28 {
    margin-top: 28px !important
}

.mt-48 {
    margin-top: 48px !important
}

.mt-56 {
    margin-top: 56px !important
}

.mt-60 {
    margin-top: 60px !important
}

.mt-72 {
    margin-top: 72px !important
}

.mt-80 {
    margin-top: 80px !important
}

.mb-0 {
    margin-bottom: 0px !important
}

.mb-8 {
    margin-bottom: 8px !important
}

.mb-12 {
    margin-bottom: 12px !important
}

.mb-16 {
    margin-bottom: 16px !important
}

.mb-20 {
    margin-bottom: 20px !important
}

.mb-24 {
    margin-bottom: 24px !important
}

.mb-28 {
    margin-bottom: 28px !important
}

.mb-32 {
    margin-bottom: 32px !important
}

.mb-44 {
    margin-bottom: 44px !important
}

.mb-48 {
    margin-bottom: 48px !important
}

.ml-0 {
    margin-left: 0px !important
}

.ml-8 {
    margin-left: 8px !important
}

.ml-12 {
    margin-left: 12px !important
}

.ml-16 {
    margin-left: 16px !important
}

.ml-20 {
    margin-left: 20px !important
}

.ml-24 {
    margin-left: 24px !important
}

.mr-0 {
    margin-right: 0px !important
}

.mr-8 {
    margin-right: 8px !important
}

.mr-12 {
    margin-right: 12px !important
}

.mr-16 {
    margin-right: 16px !important
}

.mr-20 {
    margin-right: 20px !important
}

.mr-24 {
    margin-right: 24px !important
}

.pt-8 {
    padding-top: 8px !important
}

.pt-12 {
    padding-top: 12px !important
}

.pt-16 {
    padding-top: 16px !important
}

.pt-20 {
    padding-top: 20px !important
}

.pt-28 {
    padding-top: 28px !important
}

.pt-32 {
    padding-top: 32px !important
}

.pb-8 {
    padding-bottom: 8px !important
}

.pb-12 {
    padding-bottom: 12px !important
}

.pb-16 {
    padding-bottom: 16px !important
}

.pb-20 {
    padding-bottom: 20px !important
}

.pb-52 {
    padding-bottom: 52px !important
}

.pb-140 {
    padding-bottom: 140px !important
}

.hide {
    display: none
}

.lightbox-target {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    -webkit-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    z-index: 2000
}

.lightbox-target {
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    z-index: 2000
}

    .lightbox-target .content {
        width: 90%;
        max-width: 480px;
        background: #fff;
        color: #333;
        padding: 20px;
        position: relative;
        box-shadow: 0 0 8px rgba(0,0,0,.3);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 20px;
        z-index: 2
    }

        .lightbox-target .content .lightboxopen {
            display: block
        }

        .lightbox-target .content .lightbox-close {
            display: block;
            width: 40px;
            height: 40px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            color: #fff;
            position: absolute;
            top: -36px;
            right: -12px;
            -webkit-transition: ease-in-out .5s;
            -o-transition: ease-in-out .5s;
            -moz-transition: ease-in-out .5s;
            transition: ease-in-out .5s;
            z-index: 99;
            cursor: pointer;
            border-radius: 99em
        }

            .lightbox-target .content .lightbox-close:before, .lightbox-target .content .lightbox-close:after {
                content: " ";
                display: block;
                height: 24px;
                width: 2px;
                background: #fff;
                position: absolute;
                left: 20px;
                top: 8px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg)
            }

            .lightbox-target .content .lightbox-close:after {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg)
            }

        .lightbox-target .content .lightboxbody {
            position: relative;
            max-height: 100%;
            overflow-y: auto;
            width: 100%;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        .lightbox-target .content .title {
            text-align: center;
            font-size: 28px;
            line-height: 52px
        }

    .lightbox-target .lightboxbg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0
    }

.lightbox-unthumb .content {
    max-width: 480px;
    max-height: 460px
}

.lightbox-target-bottom {
    display: none;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    -webkit-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    z-index: 2000;
    overflow: hidden
}

    .lightbox-target-bottom .lightboxbg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0
    }

    .lightbox-target-bottom .content {
        position: relative;
        width: 480px;
        height: 480px;
        z-index: 2;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none
    }

        .lightbox-target-bottom .content .inner {
            background-color: #fff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 0 8px rgba(0,0,0,.3)
        }

            .lightbox-target-bottom .content .inner .lightboxbody {
                position: relative;
                width: 100%;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }

                .lightbox-target-bottom .content .inner .lightboxbody .sidemenu {
                    height: 420px
                }

            .lightbox-target-bottom .content .inner .title {
                text-align: center;
                font-size: 28px;
                line-height: 52px
            }

            .lightbox-target-bottom .content .inner .lightbox-close {
                display: block;
                width: 40px;
                height: 40px;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                color: #fff;
                position: absolute;
                top: -36px;
                right: -12px;
                -webkit-transition: ease-in-out .5s;
                -o-transition: ease-in-out .5s;
                -moz-transition: ease-in-out .5s;
                transition: ease-in-out .5s;
                z-index: 99;
                cursor: pointer;
                border-radius: 99em
            }

                .lightbox-target-bottom .content .inner .lightbox-close:before, .lightbox-target-bottom .content .inner .lightbox-close:after {
                    content: " ";
                    display: block;
                    height: 24px;
                    width: 2px;
                    background: #fff;
                    position: absolute;
                    left: 20px;
                    top: 8px;
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    -o-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

                .lightbox-target-bottom .content .inner .lightbox-close:after {
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    transform: rotate(-45deg)
                }

@media(max-width: 800px) {
    .lightbox-target-bottom {
        -webkit-align-items: flex-end;
        -moz-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

        .lightbox-target-bottom .content {
            width: 100%;
            max-width: 640px;
            height: 85vh;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
            bottom: 0
        }

            .lightbox-target-bottom .content .inner {
                background-color: #fff;
                border-radius: 20px 20px 0 0;
                box-shadow: 0 0 8px rgba(0,0,0,.3)
            }

                .lightbox-target-bottom .content .inner .lightboxbody {
                    position: relative;
                    overflow-y: auto;
                    width: 100%;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box
                }

                    .lightbox-target-bottom .content .inner .lightboxbody .sidemenu {
                        height: -webkit-calc(85vh - 40px);
                        height: -moz-calc(85vh - 40px);
                        height: calc(85vh - 40px)
                    }

                .lightbox-target-bottom .content .inner .title {
                    text-align: center;
                    font-size: 28px;
                    line-height: 52px
                }

                .lightbox-target-bottom .content .inner .lightbox-close {
                    display: block;
                    width: 40px;
                    height: 40px;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    color: #fff;
                    position: absolute;
                    top: -36px;
                    right: 0px;
                    -webkit-transition: ease-in-out .5s;
                    -o-transition: ease-in-out .5s;
                    -moz-transition: ease-in-out .5s;
                    transition: ease-in-out .5s;
                    z-index: 99;
                    cursor: pointer;
                    border-radius: 99em
                }

                    .lightbox-target-bottom .content .inner .lightbox-close:before, .lightbox-target-bottom .content .inner .lightbox-close:after {
                        content: " ";
                        display: block;
                        height: 24px;
                        width: 2px;
                        background: #fff;
                        position: absolute;
                        left: 20px;
                        top: 8px;
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg)
                    }

                    .lightbox-target-bottom .content .inner .lightbox-close:after {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -ms-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg)
                    }
}

.empty {
    width: 100%;
    padding: 8px;
    text-align: center;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold
}

#draggable {
    width: 80%;
    height: 28px;
    margin: 12px auto;
    cursor: pointer
}

    #draggable span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: #d1a36d;
        border-radius: 99em
    }

@media(min-width: 640px) {
    #draggable {
        display: none
    }
}

.lightboxopen {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

.searcharea {
    display: none
}

    .searcharea .searchbar {
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
    }

        .searcharea .searchbar input {
            margin-left: 8px;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border: 0
        }

        .searcharea .searchbar .searchbt2 {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: 32px;
            height: 44px;
            background: url(../images/ic_search2.svg) no-repeat center center;
            -o-background-size: 16px;
            background-size: 16px;
            cursor: pointer;
            border-radius: 99em
        }

            .searcharea .searchbar .searchbt2.disabled {
                opacity: .5;
                pointer-events: none
            }

        .searcharea .searchbar .searchclose {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: 32px;
            height: 44px;
            background: url(../images/ic_close2.svg) no-repeat center center;
            -o-background-size: 16px;
            background-size: 16px;
            cursor: pointer;
            border-radius: 99em
        }

        .searcharea .searchbar input:disabled {
            background-color: #fff;
            cursor: not-allowed
        }

.markdownOutput p {
    margin-bottom: 1rem
}

.markdownOutput a {
    color: #3571f5;
    border-bottom: 1px solid #3571f5
}

    .markdownOutput a:hover {
        color: #d1a36d;
        border-bottom: 1px solid #d1a36d
    }

.markdownOutput img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem
}

.markdownOutput ol {
    padding-left: 24px;
    margin-bottom: 1rem
}

    .markdownOutput ol li {
        list-style-type: decimal;
        margin-bottom: 8px
    }

        .markdownOutput ol li li {
            margin-left: 24px;
            list-style-type: disc
        }

.markdownOutput ul {
    padding-left: 24px;
    margin-bottom: 1rem
}

    .markdownOutput ul li {
        list-style-type: disc;
        margin-bottom: 8px
    }

        .markdownOutput ul li li {
            margin-left: 24px;
            list-style-type: decimal
        }

.font-black {
    font-weight: bold
}

.ic {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px
}

.ic_search {
    background: url(../images/public/ic_search.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_arr1 {
    fill: #992020;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.ic_person {
    background: url(../images/public/ic_person.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_older {
    background: url(../images/public/ic_older.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_price {
    background: url(../images/public/ic_price.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_notify {
    background: url(../images/public/ic_notify.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_s {
    background: url(../images/public/ic_smartpush_A.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_fb {
    background: url(../images/public/ic_fb.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.ic_fb2 {
    background: url(../images/public/ic_fb2.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.ic_line {
    background: url(../images/public/ic_line.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.ic_line2 {
    background: url(../images/public/ic_line2.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.ic_language {
    background: url(../images/public/ic_language.svg) no-repeat;
    -o-background-size: contain;
    background-size: contain;
    background-position: 0 4px;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 32px
}

.ic_close {
    background: url(../images/public/ic_close.svg) no-repeat center center;
    -o-background-size: 24px;
    background-size: 24px;
    border-radius: 50%
}

.ic_message {
    background: url(../images/public/ic_smartpush.svg) no-repeat center center,#fff;
    -o-background-size: 38px 38px;
    background-size: 38px 38px;
    width: 44px;
    height: 44px
}

.message_MG {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: url(../images/public/ic_smartpush_A.svg) 0 0 no-repeat;
    background-repeat: no-repeat;
    -webkit-animation-name: Fps12p;
    -moz-animation-name: Fps12p;
    -o-animation-name: Fps12p;
    animation-name: Fps12p;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: steps(12, end);
    -moz-animation-timing-function: steps(12, end);
    -o-animation-timing-function: steps(12, end);
    animation-timing-function: steps(12, end);
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -o-background-size: 1200% 100%;
    background-size: 1200% 100%;
    position: relative;
    display: block
}

@-webkit-keyframes Fps12p {
    0% {
        background-position: left top
    }

    100% {
        background-position: 109.09% top
    }
}

@-moz-keyframes Fps12p {
    0% {
        background-position: left top
    }

    100% {
        background-position: 109.09% top
    }
}

@-o-keyframes Fps12p {
    0% {
        background-position: left top
    }

    100% {
        background-position: 109.09% top
    }
}

@keyframes Fps12p {
    0% {
        background-position: left top
    }

    100% {
        background-position: 109.09% top
    }
}

.heroheader {
    background: #fff;
    display: block;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    border-top: 2px solid;
    -moz-border-image: -moz-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
    -o-border-image: -o-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
    border-image: -webkit-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
    border-image: linear-gradient(to right, #aa0225, #aa0225 75%, #004738 75%) 1;
    box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px
}

    .heroheader .inner {
        width: 100%;
        max-width: 1260px;
        margin: 0 auto;
        position: relative;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 12px
    }

        .heroheader .inner .logobox {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            height: 72px
        }

            .heroheader .inner .logobox .logo {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 45px
            }

                .heroheader .inner .logobox .logo a {
                    display: -webkit-flex;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-align-items: center;
                    -moz-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    height: 100%
                }

                    .heroheader .inner .logobox .logo a img {
                        width: 150px;
                        padding-right: 8px;
                        display: block
                    }

            .heroheader .inner .logobox span {
                color: #d1a36d;
                font-size: 1.1em;
                font-weight: 550;
                padding-left: 9px;
                border-left: 1px solid #c4c4c4;
                min-height: 44px;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -moz-box-orient: vertical;
                -moz-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-justify-content: center;
                -moz-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

                .heroheader .inner .logobox span i {
                    display: block;
                    font-size: .9em;
                    font-style: normal;
                    font-weight: normal
                }

        .heroheader .inner .navbox2 {
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: space-between;
            -moz-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: block
        }

            .heroheader .inner .navbox2 .in {
                width: 100%;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-justify-content: space-between;
                -moz-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

                .heroheader .inner .navbox2 .in .nav {
                    -webkit-flex: 1;
                    -moz-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    -webkit-order: 1;
                    -moz-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                    order: 1
                }

        .heroheader .inner .navbox {
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: space-between;
            -moz-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: none
        }

            .heroheader .inner .navbox .close_hamburger {
                display: none;
                margin-left: auto;
                width: 44px;
                height: 44px;
                background: url(../images/public/ic_close.svg) no-repeat center center;
                -o-background-size: 20px;
                background-size: 20px;
                cursor: pointer;
                border-radius: 99em
            }

                .heroheader .inner .navbox .close_hamburger:hover {
                    background-color: #f3f4f6
                }

            .heroheader .inner .navbox .in {
                width: 100%;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-justify-content: space-between;
                -moz-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

                .heroheader .inner .navbox .in .nav {
                    -webkit-flex: 1;
                    -moz-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    -webkit-order: 1;
                    -moz-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                    order: 1
                }

                .heroheader .inner .navbox .in .channel {
                    display: none;
                    -webkit-order: 3;
                    -moz-box-ordinal-group: 4;
                    -ms-flex-order: 3;
                    order: 3
                }

        .heroheader .inner .function {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            margin-left: auto;
            -webkit-order: 2;
            -moz-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            position: relative
        }

            .heroheader .inner .function .searchbt {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                cursor: pointer;
                margin-right: 4px;
                padding: 0 8px
            }

                .heroheader .inner .function .searchbt:hover {
                    background-color: #f3f4f6;
                    border-radius: 99em
                }

                .heroheader .inner .function .searchbt i {
                    width: 44px;
                    height: 44px;
                    background: url(../images/ic_searchbt.svg) no-repeat center center;
                    -o-background-size: 30px;
                    background-size: 30px;
                    border-radius: 99em
                }

                .heroheader .inner .function .searchbt p {
                    padding-top: 12px;
                    font-size: .9em
                }

            .heroheader .inner .function .login {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                padding-top: 4px
            }

            .heroheader .inner .function .member {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex
            }

            .heroheader .inner .function .hamburger {
                display: none;
                width: 44px;
                height: 44px;
                background: url(../images/public/ic_hamburger.svg) no-repeat center center;
                -o-background-size: 30px;
                background-size: 30px;
                cursor: pointer;
                border-radius: 99em
            }

                .heroheader .inner .function .hamburger:hover {
                    background-color: #f3f4f6
                }

@media(max-width: 1000px) {
    .heroheader .inner {
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .heroheader .inner .navbox2 {
            display: none
        }

        .heroheader .inner .navbox {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow-y: auto;
            background-color: #f5f5f5;
            z-index: 999
        }

            .heroheader .inner .navbox .close_hamburger {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                margin-left: auto;
                width: 44px;
                height: 44px;
                background: url(../images/public/ic_close.svg) no-repeat center center;
                -o-background-size: 20px;
                background-size: 20px;
                cursor: pointer;
                border-radius: 99em
            }

                .heroheader .inner .navbox .close_hamburger:hover {
                    background-color: #f3f4f6
                }

            .heroheader .inner .navbox .in {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex
            }

                .heroheader .inner .navbox .in .nav {
                    -webkit-order: 2;
                    -moz-box-ordinal-group: 3;
                    -ms-flex-order: 2;
                    order: 2;
                    -webkit-flex: 0 0 100%;
                    -moz-box-flex: 0;
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%
                }

                .heroheader .inner .navbox .in .function {
                    -webkit-flex: 0 0 100%;
                    -moz-box-flex: 0;
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%;
                    -webkit-order: 1;
                    -moz-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                    order: 1;
                    display: -webkit-flex;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-flex-wrap: nowrap;
                    -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;
                    padding: 12px
                }

                    .heroheader .inner .navbox .in .function .member {
                        width: 36px;
                        height: 36px;
                        -webkit-order: 1;
                        -moz-box-ordinal-group: 2;
                        -ms-flex-order: 1;
                        order: 1
                    }

                    .heroheader .inner .navbox .in .function .close_hamburger {
                        width: 32px;
                        height: 32px;
                        display: block;
                        position: absolute;
                        right: 8px;
                        cursor: pointer
                    }

                .heroheader .inner .navbox .in .channel {
                    display: block;
                    -webkit-flex: 0 0 100%;
                    -moz-box-flex: 0;
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%;
                    -webkit-order: 3;
                    -moz-box-ordinal-group: 4;
                    -ms-flex-order: 3;
                    order: 3
                }

        .heroheader .inner .function {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            -webkit-order: 2;
            -moz-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            position: relative
        }

            .heroheader .inner .function .searchbt {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                cursor: pointer;
                margin-right: 4px;
                padding: 0
            }

                .heroheader .inner .function .searchbt:hover {
                    background-color: #f3f4f6;
                    border-radius: 99em
                }

                .heroheader .inner .function .searchbt i {
                    width: 44px;
                    height: 44px;
                    background: url(../images/ic_searchbt.svg) no-repeat center center;
                    -o-background-size: 30px;
                    background-size: 30px;
                    border-radius: 99em
                }

                .heroheader .inner .function .searchbt p {
                    padding-top: 12px;
                    font-size: .9em;
                    display: none
                }

            .heroheader .inner .function .login {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                padding-top: 4px
            }

            .heroheader .inner .function .member {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex
            }

            .heroheader .inner .function .hamburger {
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                width: 44px;
                height: 44px;
                background: url(../images/public/ic_hamburger.svg) no-repeat center center;
                -o-background-size: 30px;
                background-size: 30px;
                cursor: pointer;
                border-radius: 99em
            }

                .heroheader .inner .function .hamburger:hover {
                    background-color: #f3f4f6
                }

            .heroheader .inner .function .close_hamburger {
                width: 36px;
                height: 36px;
                display: none
            }

        .heroheader .inner .show {
            display: block
        }
}

.mobilemenu {
    margin-right: 8px;
    cursor: pointer
}

@media(min-width: 800px) {
    .mobilemenu {
        display: none
    }
}

.membernav {
    position: relative;
    cursor: pointer;
    padding-top: 4px
}

    .membernav .lists {
        position: absolute;
        display: none;
        background-color: #fff;
        width: 128px;
        top: 40px;
        right: 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
        z-index: 110;
        border-radius: 12px;
        text-align: center
    }

        .membernav .lists a {
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            line-height: 44px;
            width: 100%
        }

            .membernav .lists a i {
                width: 20px;
                height: 20px;
                display: inline-block;
                margin-right: 8px;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0
            }

@media(max-width: 1000px) {
    .member li {
        position: relative;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-left: 8px;
        height: 36px
    }

        .member li:nth-child(2) {
            margin-left: auto
        }

        .member li .ic {
            width: 36px;
            height: 36px;
            -o-background-size: 24px;
            background-size: 24px;
            background-position: center 8px
        }

        .member li span {
            float: right;
            line-height: 36px
        }

        .member li .close_hamburger .ic {
            -o-background-size: 18px;
            background-size: 18px;
            background-position: center center
        }
}

.nav-title {
    display: none
}

@media(max-width: 1000px) {
    .nav-title {
        display: block;
        background: #e1e1e1;
        padding: 4px 12px;
        font-size: .9em;
        font-weight: bold
    }
}

.font0 {
    font-size: 0em
}

.mod-language {
    cursor: pointer;
    position: relative
}

    .mod-language .language-content {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 88px;
        top: 100%;
        right: 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
        z-index: 110;
        border-radius: 12px;
        overflow: hidden
    }

        .mod-language .language-content a {
            color: #000;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: center
        }

            .mod-language .language-content a:hover {
                background-color: #ddd
            }

.mod-message {
    cursor: pointer;
    position: relative
}

    .mod-message .message-content {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 260px;
        top: 100%;
        right: 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
        z-index: 110;
        padding: 8px
    }

        .mod-message .message-content .bt {
            display: block;
            color: #e40439;
            text-align: center
        }

.mod-content-card {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 8px 0
}

    .mod-content-card .pic {
        -webkit-flex: 0 0 88px;
        -moz-box-flex: 0;
        -ms-flex: 0 0 88px;
        flex: 0 0 88px;
        margin-right: 4px
    }

    .mod-content-card .content {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

        .mod-content-card .content .time {
            font-size: .8em;
            text-align: right;
            color: #999
        }

.loginbt {
    background-color: #f1f1f1;
    color: #333;
    padding: 0 20px;
    border-radius: 50px;
    line-height: 36px;
    height: 36px;
    display: inline-block
}

    .loginbt i {
        width: 16px;
        height: 16px;
        background: url(../images/public/ic_login.svg) no-repeat;
        -o-background-size: 16px;
        background-size: 16px;
        display: inline-block;
        vertical-align: middle
    }

    .loginbt:hover {
        color: #d1a36d
    }

@media(max-width: 1000px) {
    .loginbt {
        display: inline-block
    }

        .loginbt i {
            display: none
        }
}

.channel a {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    padding-left: 20px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5
}

    .channel a .pic {
        -webkit-flex: 0 0 52px;
        -moz-box-flex: 0;
        -ms-flex: 0 0 52px;
        flex: 0 0 52px;
        margin-right: 8px
    }

    .channel a p {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-top: 12px
    }

.nav {
    display: block;
    background: #fff;
    font-size: 1.1em
}

    .nav .menu li {
        position: relative
    }

    .nav .menu a {
        padding-left: 20px;
        line-height: 52px;
        font-weight: 550
    }

    .nav .active {
        color: #d1a36d
    }

    .nav .subhide {
        display: none
    }

    .nav .open {
        display: block
    }

    .nav .menu > li a {
        display: block;
        border-bottom: 1px solid #e5e5e5
    }

    .nav .sub-menu {
        background-color: #fcfcfc
    }

        .nav .sub-menu a {
            font-weight: normal;
            padding-left: 40px
        }

        .nav .sub-menu ul {
            background-color: #f6f6f6
        }

            .nav .sub-menu ul a {
                font-size: .9em;
                color: #555;
                padding-left: 60px
            }

            .nav .sub-menu ul ul a {
                padding-left: 56px
            }

    .nav .toggleIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 44px;
        background: url(../images/public/ic_plus.svg) no-repeat;
        background-position: right 24px top 50%;
        margin-top: 5px;
        -o-background-size: 16px;
        background-size: 16px
    }

    .nav .closebt {
        background: url(../images/public/ic_minus.svg) no-repeat;
        background-position: right 24px top 50%;
        -o-background-size: 16px;
        background-size: 16px
    }

@media screen and (min-width: 1000px) {
    .nav {
        background: #fff
    }

        .nav .menu {
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-justify-content: flex-end;
            -moz-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

            .nav .menu li {
                position: relative;
                -webkit-flex: 0 0 auto;
                -moz-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                text-align: center;
                padding: 0 12px
            }

            .nav .menu a {
                line-height: 40px;
                padding-left: 0px
            }

        .nav .subhide {
            display: block
        }

        .nav .open {
            display: block
        }

        .nav .menu > li a {
            display: block;
            border-bottom: 0px
        }

        .nav .sub-menu {
            background: url(../images/public/megamenu_bg.jpg) no-repeat;
            -o-background-size: cover;
            background-size: cover;
            background-position: bottom;
            box-shadow: rgba(0,0,0,.1) 0px 4px 6px -1px,rgba(0,0,0,.06) 0px 2px 4px -1px;
            position: absolute;
            left: 0;
            width: 100%;
            padding: 12px 6px 32px
        }

            .nav .sub-menu li {
                float: none;
                width: 15%;
                padding: 0 4px;
                display: inline-block;
                vertical-align: top
            }

                .nav .sub-menu li a {
                    font-weight: normal;
                    padding-left: 0px;
                    border-bottom: 1px solid #e5e5e5;
                    background: url(../images/public/ic_nav.svg) no-repeat center left;
                    text-align: left;
                    padding-left: 12px
                }

                    .nav .sub-menu li a[href="javascript:void(0)"]:hover {
                        color: #000;
                        cursor: text
                    }

            .nav .sub-menu ul {
                background-color: rgba(0,0,0,0)
            }

                .nav .sub-menu ul li {
                    width: 100%
                }

                    .nav .sub-menu ul li a {
                        font-size: .9em;
                        padding-left: 0px;
                        border-bottom: 0;
                        background: none
                    }

                        .nav .sub-menu ul li a:hover {
                            color: #d1a36d
                        }

                .nav .sub-menu ul ul {
                    background-color: #f5f5f5
                }

                    .nav .sub-menu ul ul a {
                        padding-left: 0px
                    }

    .toggleIcon {
        display: none
    }

    .closebt {
        display: none
    }

    .mega {
        position: static !important
    }

        .mega > .subhide {
            display: none
        }

        .mega > .open {
            display: block
        }
}

footer {
    background: #444;
    text-align: center;
    color: #fff;
    font-size: .9em
}

    footer p {
        width: 100%;
        max-width: 1260px;
        padding: 12px;
        margin: 0 auto
    }

    footer .copywriter {
        background-color: #cf092c
    }

.roundpic {
    display: inline-block;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    vertical-align: middle;
    border: 2px solid #ebebeb
}

    .roundpic.line {
        border: 2px solid #7cd231
    }

.container {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 74px
}

    .container .side {
        position: relative;
        width: 240px;
        background-color: #fff;
        -webkit-transition: width .3s;
        -o-transition: width .3s;
        -moz-transition: width .3s;
        transition: width .3s;
        padding: 16px 10px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: visible
    }

    .container .wrapper {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #f0f0f0;
        -webkit-transition: margin-left .3s;
        -o-transition: margin-left .3s;
        -moz-transition: margin-left .3s;
        transition: margin-left .3s;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .container .side.collapsed {
        width: 72px
    }

@media screen and (max-width: 800px) {
    .container .side {
        display: none
    }
}

.content-wrapper {
    position: relative;
    width: 100%;
    height: -webkit-calc(100dvh - 74px);
    height: -moz-calc(100dvh - 74px);
    height: calc(100dvh - 74px);
    height: -webkit-calc(var(--vh, 1vh)*100 - 74px);
    height: -moz-calc(var(--vh, 1vh)*100 - 74px);
    height: calc(var(--vh, 1vh)*100 - 74px);
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #f5f5f5;
    overflow: hidden
}

.sidemenu button {
    position: relative
}

.tips {
    position: absolute;
    left: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    white-space: nowrap;
    font-size: 14px;
    border-radius: 4px;
    z-index: 100;
    display: none
}

.side.collapsed .sidemenu button:hover .tips, .side.collapsed .sideswitch:hover .tips {
    display: block
}

.ic_closebt {
    background: url(../images/ic_closebt.svg) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

.ic_send {
    width: 28px;
    height: 28px;
    fill: #d1a36d;
    display: inline-block;
    cursor: pointer
}

.ic_help {
    background: url(../images/ip-q.png) no-repeat center center,#fff;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 50%
}

.createbt .ic_create {
    background: url(../images/ic_create.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.createbt:hover .ic_create {
    background: url(../images/ic_create2.svg) no-repeat center center;
    -o-background-size: cover;
    background-size: cover
}

.ic_voice_off {
    fill: #282828;
    width: 36px;
    height: 36px;
    display: inline-block;
    cursor: pointer
}

    .ic_voice_off:hover {
        fill: #d1a36d
    }

.ic_voice {
    fill: #282828;
    width: 36px;
    height: 36px;
    display: inline-block;
    cursor: pointer
}

    .ic_voice:hover {
        fill: #d1a36d
    }

.ic_menu2 {
    fill: #acacac;
    width: 24px;
    height: 24px;
    display: inline-block;
    cursor: pointer
}

    .ic_menu2:hover {
        fill: #d1a36d
    }

.ic_fsize {
    fill: #acacac;
    width: 24px;
    height: 24px;
    display: inline-block;
    cursor: pointer
}

    .ic_fsize:hover {
        fill: #d1a36d
    }

.fsizebt {
    width: 36px;
    height: 36px;
    background: url(../images/ic_fontsize.svg) no-repeat center center;
    -o-background-size: 24px;
    background-size: 24px;
    cursor: pointer;
    border-radius: 99em
}

    .fsizebt:hover {
        background-color: #f3f4f6
    }

.sendbt {
    width: 36px;
    height: 36px;
    background: url(../images/ic_send.svg) no-repeat center center;
    -o-background-size: 24px;
    background-size: 24px;
    cursor: pointer;
    border-radius: 99em;
    display: inline-block
}

    .sendbt:hover {
        background-color: #f3f4f6
    }

    .sendbt:disabled {
        cursor: wait;
        width: 36px;
        height: 36px;
        background: url(../images/ic_send2.svg) no-repeat center center;
        -o-background-size: 24px;
        background-size: 24px;
        background-color: #d4d4d4
    }

.model {
    display: inline-block;
    vertical-align: top;
    position: relative
}

    .model .modelbt {
        line-height: 36px;
        display: inline-block;
        border-radius: 99em;
        border: 1px solid #e5e5e5;
        padding: 0 16px;
        cursor: pointer
    }

        .model .modelbt:hover {
            background-color: #f3f4f6
        }

        .model .modelbt i {
            width: 20px;
            height: 20px;
            background: url(../images/ic_arr2.svg);
            -o-background-size: 20px;
            background-size: 20px;
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: -webkit-transform .3s ease;
            transition: -webkit-transform .3s ease;
            -o-transition: -o-transform .3s ease;
            -moz-transition: transform .3s ease, -moz-transform .3s ease;
            transition: transform .3s ease;
            transition: transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease
        }

        .model .modelbt .rotate {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg)
        }

    .model .drop {
        background-color: #fff;
        border-radius: 16px;
        padding: 8px;
        position: absolute;
        bottom: 40px;
        width: 102px;
        box-shadow: rgba(100,100,111,.2) 0px 7px 29px 0px;
        display: none
    }

        .model .drop a {
            display: block;
            line-height: 32px
        }

.chat-layout {
    width: 100%;
    height: 100dvh;
    height: -webkit-calc(var(--vh, 1vh)*100 - 256px);
    height: -moz-calc(var(--vh, 1vh)*100 - 256px);
    height: calc(var(--vh, 1vh)*100 - 256px);
    display: none;
    overflow: auto;
    padding: 0 20px
}

.spacebox {
    min-height: 100dvh;
    min-height: -webkit-calc(var(--vh, 1vh)*100 - 256px - 32px);
    min-height: -moz-calc(var(--vh, 1vh)*100 - 256px - 32px);
    min-height: calc(var(--vh, 1vh)*100 - 256px - 32px)
}

.chat-container {
    width: 100%;
    overflow-y: scroll;
    padding-top: 32px
}

    .chat-container .inner {
        width: 100%;
        max-width: 800px;
        margin: auto;
        position: relative
    }

    .chat-container::-webkit-scrollbar {
        display: none
    }

.chat-container {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.title2 {
    border-left: 2px solid #d1a36d;
    padding-left: 12px;
    margin: 8px 0
}

.card1 {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 16px
}

    .card1 .left {
        border-right: 1px solid #e5e5e5;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 8px;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .card1 .right {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 8px
    }

        .card1 .right h3 {
            border-bottom: 1px dashed #e5e5e5
        }

#editor {
    word-break: break-all
}

.richmenu {
    position: fixed;
    left: 50%;
    z-index: 88;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 100%;
    bottom: -400px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(../images/richmenu-bg.jpg) no-repeat;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: bottom .5s;
    -o-transition: bottom .5s;
    -moz-transition: bottom .5s;
    transition: bottom .5s
}

    .richmenu .item {
        -webkit-flex: 0 0 16.66%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 16.66%;
        flex: 0 0 16.66%
    }

        .richmenu .item .banner {
            padding-bottom: 60%;
            height: 0
        }

@media screen and (max-width: 760px) {
    .richmenu {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: left;
        -moz-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left
    }

        .richmenu .item {
            -webkit-flex: 0 0 33.33%;
            -moz-box-flex: 0;
            -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%
        }
}

.richopen {
    bottom: 68px
}

.form-group {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -70%);
    -moz-transform: translate(-50%, -70%);
    -ms-transform: translate(-50%, -70%);
    -o-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
    -webkit-transition: top .6s ease,bottom .6s ease,-webkit-transform .6s ease;
    transition: top .6s ease,bottom .6s ease,-webkit-transform .6s ease;
    -o-transition: top .6s ease,bottom .6s ease,-o-transform .6s ease;
    -moz-transition: top .6s ease,bottom .6s ease,transform .6s ease,-moz-transform .6s ease;
    transition: top .6s ease,bottom .6s ease,transform .6s ease;
    transition: top .6s ease,bottom .6s ease,transform .6s ease,-webkit-transform .6s ease,-moz-transform .6s ease,-o-transform .6s ease
}

    .form-group.fixed-bottom {
        top: auto;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%)
    }

.dialog {
    padding: 0 20px;
    position: relative
}

    .dialog .gobottom {
        display: none;
        position: absolute;
        top: -80px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        cursor: pointer
    }

        .dialog .gobottom i {
            display: block;
            padding: 8px;
            width: 40px;
            height: 40px;
            background-color: #fff;
            border: 1px solid #acacac;
            border-radius: 99em;
            background-image: url(../images/ic_arr2.svg);
            -o-background-size: 20px;
            background-size: 20px;
            background-position: 50% 50%;
            background-repeat: no-repeat
        }

    .dialog .inner {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        background-color: hsla(0,0%,100%,.9);
        box-shadow: #fff 0px 0px 0px 0px inset,rgba(219,219,219,.38) 0px 0px 0px 1px inset,rgba(0,0,0,.1) 0px 1px 3px 0px,rgba(0,0,0,.1) 0px 1px 2px -1px;
        border-radius: 20px;
        padding: 16px;
        position: relative
    }

        .dialog .inner .input {
            -webkit-flex-grow: 1;
            -moz-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 4px 0 0;
            border-radius: 99px
        }

            .dialog .inner .input .enlarged-input {
                font-size: 18px;
                border: 0px;
                width: 100%;
                padding-left: 8px
            }

            .dialog .inner .input .send {
                float: right;
                height: 36px
            }

    .dialog .ex {
        margin-top: 12px;
        margin-bottom: 10px
    }

        .dialog .ex button {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 4px
        }

    .dialog .ex {
        width: 100%;
        font-size: 14px;
        color: #717171;
        text-align: center
    }

.editor-container {
    width: 100%;
    border: 0px solid #ccc;
    border-radius: 8px;
    padding: 4px 8px;
    background: #fff;
    margin-bottom: 4px
}

.ProseMirror {
    min-height: 28px;
    max-height: 88px;
    overflow-y: auto;
    outline: none
}

.placeholder {
    color: gray;
    position: absolute;
    pointer-events: none
}

.loginbox {
    position: absolute;
    top: -84px;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    background-color: rgba(245,245,246,.8);
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 375px;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #282828;
    border-radius: 12px;
    display: flex
}

    .loginbox p {
        line-height: 32px;
        font-size: 15px
    }

    .loginbox .btn3 {
        margin-left: auto
    }

@media screen and (max-width: 1000px) {
    .loginbox {
        position: absolute;
        top: -48px
    }
}

.enlarged-btn {
    font-size: 18px;
    height: 48px;
    margin-left: 10px;
    border-radius: 8px;
    background-color: #f5565c;
    border: 1px solid #f5565c;
    color: #fff
}

    .enlarged-btn:hover {
        color: #f5565c;
        background-color: #fff;
        border: 1px solid #f5565c
    }

@media screen and (max-width: 320px) {
    .enlarged-btn {
        font-size: 15px
    }
}

.entity-list {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    position: relative;
    max-width: 1000px
}

    .entity-list .entity-item {
        position: relative;
        width: auto;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 8px;
        margin-bottom: 3px;
        font-size: 16px;
        line-height: 1.6em;
        font-weight: 500;
        letter-spacing: .12em;
        text-align: center;
        border-radius: 20px;
        cursor: pointer;
        color: #f5565c;
        border: 1px solid #fee;
        background: #fee;
        padding: 4px 12px;
        text-decoration: none
    }

        .entity-list .entity-item:hover {
            background: #fff;
            border: 1px solid #fee
        }

        .entity-list .entity-item .havedrop {
            display: none;
            position: absolute;
            width: 180px;
            margin-left: -50%;
            bottom: -webkit-calc(100% + 12px);
            bottom: -moz-calc(100% + 12px);
            bottom: calc(100% + 12px);
            left: 50%;
            z-index: 999;
            border-radius: 8px 8px 0 0;
            border-bottom: 2px solid #d1a36d;
            overflow: hidden
        }

            .entity-list .entity-item .havedrop button {
                display: block;
                width: 100%;
                background-color: #fff;
                height: 44px;
                border-top: 1px solid #e5e5e5;
                cursor: pointer
            }

                .entity-list .entity-item .havedrop button:hover {
                    background-color: #fee
                }

        .entity-list .entity-item:last-child .havedrop {
            margin-left: -100%
        }

@media screen and (max-width: 320px) {
    .entity-list .entity-item {
        font-size: 12px
    }

        .entity-list .entity-item .havedrop {
            width: 120px
        }
}

.close-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    z-index: 888
}

.user {
    padding: 24px 0px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

    .user .say {
        position: relative;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        max-width: 80%;
        color: #2a3440;
        background: #fff;
        -webkit-order: 1;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding: 8px 16px
    }

        .user .say .tip {
            padding-top: 8px;
            border-top: 1px solid #eee;
            margin-top: 12px
        }

            .user .say .tip a {
                color: #888;
                font-size: 14px;
                text-decoration: none
            }

                .user .say .tip a span {
                    vertical-align: middle
                }

                .user .say .tip a:hover {
                    color: #d1a36d
                }

            .user .say .tip .active {
                color: #d1a36d
            }

        .user .say .time {
            position: absolute;
            right: 16px;
            bottom: -24px;
            font-size: 14px;
            color: #c3c3c3
        }

.user {
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .user .icon {
        position: relative;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin: 8px;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

        .user .icon .pic {
            width: 44px;
            height: 44px;
            display: block;
            border-radius: 50%;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            overflow: hidden
        }

        .user .icon .name {
            font-size: 13px;
            color: #555;
            padding: 0 4px
        }

    .user .say {
        background-color: #fff;
        color: #2a3440;
        border-radius: 1.5rem 1.5rem .5rem 1.5rem;
        border-color: #e5e5e5
    }

        .user .say .time {
            position: absolute;
            left: 16px;
            bottom: -24px;
            font-size: 14px;
            color: #c3c3c3
        }

.bot {
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .bot .icon {
        position: relative;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin: 8px;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .bot .icon .pic {
            width: 44px;
            height: 44px;
            display: block;
            border-radius: 50%;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            overflow: hidden
        }

        .bot .icon .name {
            font-size: 14px;
            color: #555;
            padding: 0 4px
        }

        .bot .icon .play {
            width: 36px;
            height: 36px;
            background: url(../images/ic_play.svg) no-repeat;
            -o-background-size: 20px;
            background-size: 20px;
            background-position: center center;
            font-size: 0em;
            cursor: pointer
        }

            .bot .icon .play:hover {
                -o-background-size: 18px;
                background-size: 18px
            }

        .bot .icon .stop {
            background: url(../images/ic_pause.svg) no-repeat;
            -o-background-size: 20px;
            background-size: 20px;
            background-position: center center
        }

        .bot .icon .copy {
            width: 36px;
            height: 36px;
            background: url(../images/ic_copy.svg) no-repeat;
            -o-background-size: 20px;
            background-size: 20px;
            background-position: center center;
            font-size: 0em;
            cursor: pointer
        }

            .bot .icon .copy:hover {
                -o-background-size: 18px;
                background-size: 18px
            }

    .bot .say {
        border-radius: 2px 12px 12px 12px;
        margin-bottom: 42px
    }

        .bot .say .tip {
            padding-top: 8px
        }

.tool {
    padding: 10px 30px;
    position: relative
}

.tool_card {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px;
    margin-bottom: 16px
}

    .tool_card .tit {
        background: #fff;
        color: #d1a36d;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
        line-height: 42px
    }

    .tool_card .tit2 {
        color: #282828;
        font-size: 18px;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
        line-height: 42px;
        background: #fff
    }

    .tool_card li {
        background-color: #fff;
        border-bottom: 1px solid #eee
    }

        .tool_card li .bt {
            color: #282828;
            line-height: 44px;
            padding: 0 12px;
            cursor: pointer
        }

            .tool_card li .bt:hover {
                background: #fff6f6
            }

    .tool_card .link {
        line-height: 42px;
        text-align: center
    }

        .tool_card .link a {
            display: block;
            color: #3571f5
        }

            .tool_card .link a:hover {
                color: #d1a36d
            }

.sideswitch {
    position: relative;
    width: 100%;
    text-align: right;
    cursor: pointer;
    padding: 8px
}

    .sideswitch img {
        width: 16px;
        height: 16px;
        display: inline-block
    }

    .sideswitch:hover .goc {
        display: block
    }

    .sideswitch:hover .goo {
        display: none
    }

.sidemenu {
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: -webkit-calc(100vh - 168px);
    height: -moz-calc(100vh - 168px);
    height: calc(100vh - 168px)
}

    .sidemenu .history p {
        font-weight: bold;
        margin: 20px 0;
        padding-left: 12px
    }

    .sidemenu .history .time {
        color: #acacac;
        line-height: 22px;
        padding-left: 12px
    }

.sideitem {
    width: 100%;
    position: relative;
    text-align: left;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15px;
    padding: 8px 12px;
    cursor: pointer
}

    .sideitem .sidemore {
        position: relative;
        display: none
    }

    .sideitem:hover {
        background: #f4f4f4;
        border-radius: 10px
    }

        .sideitem:hover .sidemore {
            display: block;
            -webkit-flex: 0 0 18px;
            -moz-box-flex: 0;
            -ms-flex: 0 0 18px;
            flex: 0 0 18px;
            width: 18px;
            height: 18px;
            float: right;
            cursor: pointer
        }

    .sideitem i {
        -webkit-flex: 0 0 18px;
        -moz-box-flex: 0;
        -ms-flex: 0 0 18px;
        flex: 0 0 18px;
        width: 18px;
        height: 16px;
        background-image: url(../images/ic_talk2.svg);
        background-repeat: no-repeat;
        -o-background-size: contain;
        background-size: contain;
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle
    }

    .sideitem img {
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        vertical-align: middle;
        margin-right: 8px;
        display: inline-block
    }

    .sideitem em {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        vertical-align: middle;
        color: #000
    }

    .sideitem a {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: #000;
        padding-right: 8px;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        vertical-align: middle
    }

    .sideitem input {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        vertical-align: middle;
        max-width: 140px;
        border: 0;
        background: #f4f4f4
    }

    .sideitem:has(input) {
        background: #f4f4f4;
        border-radius: 10px
    }

@media screen and (max-width: 800px) {
    .sideitem .sidemore {
        display: block;
        width: 18px;
        height: 18px;
        float: right;
        cursor: pointer
    }
}

.sideitem.active {
    font-weight: bold
}

    .sideitem.active i {
        width: 18px;
        height: 16px;
        background-image: url(../images/ic_talk.svg);
        background-repeat: no-repeat;
        -o-background-size: contain;
        background-size: contain;
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle
    }

.sidedrop {
    display: none;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    padding: 8px 0;
    z-index: 10;
    min-width: 128px
}

    .sidedrop .option {
        padding: 8px 20px;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold
    }

        .sidedrop .option .icon {
            vertical-align: middle;
            margin-top: -3px;
            width: 18px;
            height: 18px
        }

.collapsed .sideswitch {
    text-align: center
}

.collapsed .sidemenu {
    width: 100%;
    overflow: visible;
    max-height: none;
    text-align: center
}

    .collapsed .sidemenu .history {
        display: none
    }

.collapsed .sideitem {
    text-align: center;
    display: inline-block
}

    .collapsed .sideitem em {
        display: none
    }

    .collapsed .sideitem img {
        margin-right: 0
    }

.toolSwiper .swiper-slide {
    width: 75%
}

.tool_card2 {
    width: 100%;
    border-radius: 8px;
    overflow: hidden
}

    .tool_card2 ul {
        padding-left: 16px
    }

        .tool_card2 ul li {
            color: #3571f5;
            list-style: square;
            border-bottom: 1px solid #eee
        }

            .tool_card2 ul li::marker {
                display: inline
            }

            .tool_card2 ul li .bt {
                color: #3571f5;
                text-decoration: underline;
                padding: 8px 8px 8px 0px;
                cursor: pointer
            }

                .tool_card2 ul li .bt:hover {
                    background: #eee
                }

.text_bt {
    color: #3571f5;
    text-decoration: underline
}

    .text_bt:hover {
        color: #d1a36d
    }

.tool_card3 {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eee;
    padding: 8px
}

    .tool_card3 .bt {
        text-align: center
    }

.swiper-button-next:after, .swiper-button-prev:after {
    color: #f5565c;
    border-radius: 999em;
    padding: 22px;
    height: 44px;
    width: 44px;
    font-size: 28px;
    line-height: 0
}

.swiper-button-prev {
    left: -8px
}

.mod-title4 {
    text-align: center;
    font-size: 24px;
    color: #333
}

    .mod-title4 p {
        color: #888;
        font-size: 20px
    }

.rating {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    height: 150px;
    position: relative
}

.rating-0 {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.rating > input {
    display: none
}

.rating > label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    background-image: url("data:images/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    -o-background-size: 76%;
    background-size: 76%;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s
}

.rating > input:checked ~ label, .rating > input:checked ~ label ~ label {
    background-image: url("data:images/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e")
}

.rating > input:not(:checked) ~ label:hover, .rating > input:not(:checked) ~ label:hover ~ label {
    background-image: url("data:images/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e")
}

.emoji-wrapper {
    width: 100%;
    text-align: center;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}

    .emoji-wrapper:before, .emoji-wrapper:after {
        content: "";
        height: 15px;
        width: 100%;
        position: absolute;
        left: 0;
        z-index: 1
    }

    .emoji-wrapper:before {
        top: 0;
        background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%)
    }

    .emoji-wrapper:after {
        bottom: 0;
        background: -webkit-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(255, 255, 255, 0) 100%)
    }

.emoji {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s
}

    .emoji > svg {
        margin: 15px 0;
        width: 70px;
        height: 70px;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

#rating-1:checked ~ .emoji-wrapper > .emoji {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transform: translateY(-100px)
}

#rating-2:checked ~ .emoji-wrapper > .emoji {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    transform: translateY(-200px)
}

#rating-3:checked ~ .emoji-wrapper > .emoji {
    -webkit-transform: translateY(-300px);
    -moz-transform: translateY(-300px);
    -ms-transform: translateY(-300px);
    -o-transform: translateY(-300px);
    transform: translateY(-300px)
}

#rating-4:checked ~ .emoji-wrapper > .emoji {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    transform: translateY(-400px)
}

#rating-5:checked ~ .emoji-wrapper > .emoji {
    -webkit-transform: translateY(-500px);
    -moz-transform: translateY(-500px);
    -ms-transform: translateY(-500px);
    -o-transform: translateY(-500px);
    transform: translateY(-500px)
}

.feedback {
    background-color: #fff;
    width: 100%;
    padding: 32px;
    border-radius: 8px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.float_r {
    position: fixed;
    width: 100%;
    max-width: 152px;
    right: 0;
    top: 88px;
    z-index: 99;
    cursor: pointer
}

    .float_r .ic_closebt {
        position: absolute;
        width: 24px;
        height: 24px;
        right: 4px;
        top: -4px
    }

.lightbox-score .content {
    max-width: 520px;
    max-height: 320px
}

.lightbox-callcs .content {
    max-width: 520px;
    max-height: 320px
}

.navSwiper {
    overflow: visible;
    position: relative
}

.stararea {
    width: 100%;
    padding: 12px
}

    .stararea h1 {
        font-size: 30px;
        font-weight: bold;
        text-align: center
    }

    .stararea h3 {
        font-size: 14px;
        text-align: center;
        color: #717171
    }

    .stararea .fastsub {
        display: none
    }

    .stararea .fastlist {
        display: none
    }

.loading {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 40px;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 45px;
    padding-top: 16px
}

    .loading .cube {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 9px;
        height: 9px;
        -webkit-animation: jump 1.75s ease-in-out infinite;
        -moz-animation: jump 1.75s ease-in-out infinite;
        -o-animation: jump 1.75s ease-in-out infinite;
        animation: jump 1.75s ease-in-out infinite;
        margin: 4px
    }

    .loading .cube__inner {
        display: block;
        height: 100%;
        width: 100%;
        border-radius: 25%;
        background-color: #d1a36d;
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        -o-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation: morph 1.75s ease-in-out infinite;
        -moz-animation: morph 1.75s ease-in-out infinite;
        -o-animation: morph 1.75s ease-in-out infinite;
        animation: morph 1.75s ease-in-out infinite;
        -webkit-transition: background-color .3s ease;
        -o-transition: background-color .3s ease;
        -moz-transition: background-color .3s ease;
        transition: background-color .3s ease
    }

    .loading .cube:nth-child(2) {
        -webkit-animation-delay: -0.63s;
        -moz-animation-delay: -0.63s;
        -o-animation-delay: -0.63s;
        animation-delay: -0.63s
    }

        .loading .cube:nth-child(2) .cube__inner {
            -webkit-animation-delay: -0.63s;
            -moz-animation-delay: -0.63s;
            -o-animation-delay: -0.63s;
            animation-delay: -0.63s
        }

    .loading .cube:nth-child(3) {
        -webkit-animation-delay: -.35s;
        -moz-animation-delay: -.35s;
        -o-animation-delay: -.35s;
        animation-delay: -.35s
    }

        .loading .cube:nth-child(3) .cube__inner {
            -webkit-animation-delay: -.35s;
            -moz-animation-delay: -.35s;
            -o-animation-delay: -.35s;
            animation-delay: -.35s
        }

    .loading span {
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        color: #d1a36d;
        font-size: .9em
    }

@-webkit-keyframes jump {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    30% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    75% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@-moz-keyframes jump {
    0% {
        -moz-transform: translateY(0px);
        transform: translateY(0px)
    }

    30% {
        -moz-transform: translateY(0px);
        transform: translateY(0px);
        -moz-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -moz-transform: translateY(-200%);
        transform: translateY(-200%);
        -moz-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    75% {
        -moz-transform: translateY(0px);
        transform: translateY(0px);
        -moz-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@-o-keyframes jump {
    0% {
        -o-transform: translateY(0px);
        transform: translateY(0px)
    }

    30% {
        -o-transform: translateY(0px);
        transform: translateY(0px);
        -o-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -o-transform: translateY(-200%);
        transform: translateY(-200%);
        -o-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    75% {
        -o-transform: translateY(0px);
        transform: translateY(0px);
        -o-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes jump {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px)
    }

    30% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        -moz-animation-timing-function: ease-out;
        -o-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -o-transform: translateY(-200%);
        transform: translateY(-200%);
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    75% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@-webkit-keyframes morph {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    10% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    20%,25% {
        -webkit-transform: scaleY(0.6) scaleX(1.3);
        transform: scaleY(0.6) scaleX(1.3);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    30% {
        -webkit-transform: scaleY(1.15) scaleX(0.9);
        transform: scaleY(1.15) scaleX(0.9);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    70%,85%,100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    75% {
        -webkit-transform: scaleY(0.8) scaleX(1.2);
        transform: scaleY(0.8) scaleX(1.2)
    }
}

@-moz-keyframes morph {
    0% {
        -moz-transform: scaleY(1);
        transform: scaleY(1)
    }

    10% {
        -moz-transform: scaleY(1);
        transform: scaleY(1)
    }

    20%,25% {
        -moz-transform: scaleY(0.6) scaleX(1.3);
        transform: scaleY(0.6) scaleX(1.3);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    30% {
        -moz-transform: scaleY(1.15) scaleX(0.9);
        transform: scaleY(1.15) scaleX(0.9);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40% {
        -moz-transform: scaleY(1);
        transform: scaleY(1)
    }

    70%,85%,100% {
        -moz-transform: scaleY(1);
        transform: scaleY(1)
    }

    75% {
        -moz-transform: scaleY(0.8) scaleX(1.2);
        transform: scaleY(0.8) scaleX(1.2)
    }
}

@-o-keyframes morph {
    0% {
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    10% {
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    20%,25% {
        -o-transform: scaleY(0.6) scaleX(1.3);
        transform: scaleY(0.6) scaleX(1.3);
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    30% {
        -o-transform: scaleY(1.15) scaleX(0.9);
        transform: scaleY(1.15) scaleX(0.9);
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40% {
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    70%,85%,100% {
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    75% {
        -o-transform: scaleY(0.8) scaleX(1.2);
        transform: scaleY(0.8) scaleX(1.2)
    }
}

@keyframes morph {
    0% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    10% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    20%,25% {
        -webkit-transform: scaleY(0.6) scaleX(1.3);
        -moz-transform: scaleY(0.6) scaleX(1.3);
        -o-transform: scaleY(0.6) scaleX(1.3);
        transform: scaleY(0.6) scaleX(1.3);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    30% {
        -webkit-transform: scaleY(1.15) scaleX(0.9);
        -moz-transform: scaleY(1.15) scaleX(0.9);
        -o-transform: scaleY(1.15) scaleX(0.9);
        transform: scaleY(1.15) scaleX(0.9);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    70%,85%,100% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1)
    }

    75% {
        -webkit-transform: scaleY(0.8) scaleX(1.2);
        -moz-transform: scaleY(0.8) scaleX(1.2);
        -o-transform: scaleY(0.8) scaleX(1.2);
        transform: scaleY(0.8) scaleX(1.2)
    }
}

.history ul li {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fbfbfb;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px
}

    .history ul li:hover button {
        opacity: 1
    }

    .history ul li a {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-clamp: 1;
        -webkit-line-clamp: 1
    }

    .history ul li input {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #f9f1e7;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid #282828
    }

    .history ul li button {
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0 4px;
        cursor: pointer;
        opacity: 0;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out
    }

        .history ul li button:hover {
            opacity: .8
        }

.history ul .active {
    background-color: #f9f1e7
}

    .history ul .active button {
        opacity: 1
    }

@media screen and (max-width: 1024px) {
    .history ul li button {
        opacity: 1 !important
    }
}

.thumbbt {
    width: 32px;
    height: 32px;
    background: url(../images/ic_thumb.svg) no-repeat center center;
    -o-background-size: 16px;
    background-size: 16px;
    cursor: pointer;
    border-radius: 99em
}

    .thumbbt:hover {
        background-color: #fff
    }

    .thumbbt.active {
        background: url(../images/ic_thumb2.svg) no-repeat center center;
        -o-background-size: 18px;
        background-size: 18px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 99em
    }

.unthumbbt {
    width: 32px;
    height: 32px;
    background: url(../images/ic_thumb.svg) no-repeat center center;
    -o-background-size: 16px;
    background-size: 16px;
    cursor: pointer;
    border-radius: 99em;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

    .unthumbbt:hover {
        background-color: #fff
    }

    .unthumbbt.active {
        width: 32px;
        height: 32px;
        background: url(../images/ic_thumb2.svg) no-repeat center center;
        -o-background-size: 18px;
        background-size: 18px;
        cursor: pointer;
        border-radius: 99em;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.copybt {
    width: 32px;
    height: 32px;
    background: url(../images/ic_copy.svg) no-repeat center center;
    -o-background-size: 18px;
    background-size: 18px;
    cursor: pointer;
    border-radius: 99em
}

    .copybt:hover {
        background-color: #fff
    }

#gradient-container {
    width: 100%
}

#gradient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --gradient-color-1: #f1f0f6;
    --gradient-color-2: #f1f0f6;
    --gradient-color-3: #f1f0f6;
    --gradient-color-4: #f1dfca;
    --gradient-color-5: #f1f0f6;
    z-index: -1
}

.main-top {
    padding-top: 74px;
    position: relative
}

.landing-section {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 80%
}

.content-left {
    width: 45%;
    padding: 20px
}

.content-right {
    width: 60%;
    position: relative;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (max-width: 820px) {
    .landing-section {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: auto
    }

    .content-left {
        width: 100%;
        padding: 12px 20px
    }

    .content-right {
        width: 100%;
        position: relative;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.mod-title5 {
    border-left: 1px solid #949494;
    border-right: 1p solid #949494;
    padding: 4px 12px;
    font-size: 18px;
    background-color: hsla(0,0%,100%,.6);
    display: inline-block
}

.main-title {
    font-size: 60px;
    font-weight: bolder;
    color: #282828;
    margin-bottom: 12px;
    position: relative
}

    .main-title .doce {
        position: absolute;
        left: 40%;
        top: -40%
    }

        .main-title .doce img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
            object-fit: contain;
            -webkit-animation: rotate-doce 8s linear infinite;
            -moz-animation: rotate-doce 8s linear infinite;
            -o-animation: rotate-doce 8s linear infinite;
            animation: rotate-doce 8s linear infinite
        }

@-webkit-keyframes rotate-doce {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotate-doce {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes rotate-doce {
    from {
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-doce {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.subtitle {
    font-size: 24px;
    font-weight: bold;
    color: #282828;
    margin-bottom: 20px;
    line-height: 1.5
}

@media screen and (max-width: 820px) {
    .main-title .doce {
        position: absolute;
        left: 44%;
        top: -24%
    }
}

.energy-ball {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1/1;
    margin: 0 auto;
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url(../images/kv_bg2.png) no-repeat;
    -o-background-size: cover;
    background-size: cover
}

    .energy-ball img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }

.chat-bubble {
    position: absolute;
    max-width: 80%;
    white-space: nowrap;
    font-weight: bolder;
    z-index: 2
}

    .chat-bubble.top {
        top: 30%;
        right: 60%
    }

    .chat-bubble.bottom {
        bottom: 30%;
        right: 10%;
        -webkit-animation-delay: .5s;
        -moz-animation-delay: .5s;
        -o-animation-delay: .5s;
        animation-delay: .5s
    }

@media screen and (max-width: 820px) {
    .chat-bubble {
        max-width: 100%
    }

        .chat-bubble.top {
            top: 30%;
            right: 44%
        }

        .chat-bubble.bottom {
            bottom: 30%;
            right: 0%
        }
}

.chat-bubble p {
    margin: 0;
    padding: 0;
    font-size: 16px
}

.cta-button {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    margin-top: -40px;
    position: relative;
    z-index: 3
}

.chat-now {
    background-color: #d1a36d;
    color: #fff;
    border: 4px solid hsla(0,0%,100%,.8);
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 18px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%
}

    .chat-now:hover {
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(200,175,125,.3);
        color: #fff
    }

    .chat-now:disabled, .chat-now[disabled] {
        background-color: #ccc;
        border-color: #ddd;
        color: #777;
        cursor: not-allowed;
        box-shadow: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        opacity: .7
    }

    .chat-now .icon {
        margin-right: 10px;
        width: 24px;
        height: 24px
    }

.tabs {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
    gap: 12px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tab-btn {
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background-color: #fff;
    color: #282828
}

    .tab-btn.active {
        background-color: #d6a667;
        color: #fff
    }

@media screen and (max-width: 500px) {
    .tab-btn {
        -webkit-flex: 0 0 48%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%
    }
}

.header-section {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 40px
}

    .header-section .header-tag {
        background: url(../images/title_bg.png) no-repeat;
        padding: 2px 15px;
        margin-bottom: 12px
    }

    .header-section .header-content {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .header-section .header-title {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

        .header-section .header-title p {
            font-size: 28px;
            font-weight: bold;
            line-height: 1.4
        }

    .header-section .header-description {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 20px
    }

        .header-section .header-description p {
            color: #666
        }

.header-section2 {
    text-align: center;
    margin-bottom: 40px
}

    .header-section2 .header-tag {
        background: url(../images/title_bg.png) no-repeat;
        padding: 2px 15px;
        margin-bottom: 12px;
        display: inline-block
    }

    .header-section2 .header-title {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

        .header-section2 .header-title p {
            font-size: 28px;
            font-weight: bold;
            line-height: 1.4
        }

    .header-section2 .header-description {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 20px
    }

        .header-section2 .header-description p {
            color: #666
        }

.features {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

.feature-card {
    -webkit-flex: 0 0 48%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 48%;
    flex: 0 0 48%;
    border-radius: 24px;
    background: -webkit-linear-gradient(#fff, 88%, #fff9f2);
    background: -moz-linear-gradient(#fff, 88%, #fff9f2);
    background: -o-linear-gradient(#fff, 88%, #fff9f2);
    background: linear-gradient(#fff, 88%, #fff9f2);
    padding: 16px
}

    .feature-card p {
        height: 40px
    }

.feature-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px
}

    .feature-image img {
        width: 100%;
        height: auto;
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        aspect-ratio: 16/7
    }

.feature-label {
    padding: 8px 0px;
    font-weight: bold;
    font-size: 28px
}

@media(max-width: 768px) {
    .header-content {
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .header-description {
        padding-left: 0;
        margin-top: 20px
    }

    .features {
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.card3 {
    background: hsla(0,0%,100%,.6);
    text-align: center;
    font-size: 20px;
    line-height: 68px;
    border-top: 4px solid #d1a36d
}

.gsap-marquee {
    width: 100%;
    overflow: hidden;
    position: relative
}

    .gsap-marquee .gsap-marquee-inner {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        white-space: nowrap
    }

        .gsap-marquee .gsap-marquee-inner .gsap-marquee-row {
            -webkit-flex: 0 0 auto;
            -moz-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            white-space: nowrap;
            max-height: 100px;
            overflow: hidden
        }

.chat-message {
    word-break: break-all
}

    .chat-message table {
        width: 100%;
        margin: auto;
        border-collapse: separate;
        border-spacing: 0;
        font-size: .9em;
        border-top: 1px solid #e5e5e5;
        border-left: 1px solid #e5e5e5;
        background: #fff
    }

    .chat-message th, .chat-message td {
        padding: 8px 4px;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        vertical-align: top;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        word-break: break-all
    }

    .chat-message tbody tr:nth-child(even) {
        background: #f1f1f1
    }

    .chat-message thead {
        background: #fcf7ee
    }

.form-group .bot_ex {
    font-size: 14px;
    color: #444;
    text-align: center
}

    .form-group .bot_ex a {
        border-bottom: 1px solid #444
    }

.title3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 4px
}

.feedback-container {
    width: 100%;
    margin: 0 auto;
    color: #333
}

.feedback-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 8px
}

.feedback-subtitle {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px
}

.feedback-label {
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 8px
}

.feedback-textarea {
    width: 100%;
    height: 160px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    resize: vertical;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 24px
}

    .feedback-textarea::-webkit-input-placeholder {
        color: #ccc
    }

    .feedback-textarea:-moz-placeholder {
        color: #ccc
    }

    .feedback-textarea::-moz-placeholder {
        color: #ccc
    }

    .feedback-textarea:-ms-input-placeholder {
        color: #ccc
    }

    .feedback-textarea::placeholder {
        color: #ccc
    }

.feedback-submit {
    width: 100%;
    background-color: #d6a97e;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border: none;
    padding: 14px 0;
    border-radius: 30px;
    cursor: pointer
}

    .feedback-submit:hover {
        background-color: #c59268
    }

.textbt {
    color: #d1a36d;
    font-weight: bold;
    border-bottom: 1px solid #d1a36d
}

    .textbt:hover {
        color: #000;
        border-bottom: 1px solid #000
    }

.textbt2 {
    color: #eb4e4f;
    font-weight: bold;
    border-bottom: 1px solid #eb4e4f
}

    .textbt2:hover {
        color: #000;
        border-bottom: 1px solid #000
    }

.comment {
    color: #717171
}

    .comment a {
        color: #000
    }

.glass-btn {
    position: relative;
    padding: 12px 20px;
    border: none;
    outline: none;
    border-radius: 50px;
    overflow: hidden;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -moz-transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: hsla(0,0%,100%,.9);
    backdrop-filter: blur(15px);
    border-top: 1px solid hsla(0,0%,100%,.4);
    border-left: 1px solid hsla(0,0%,100%,.4);
    border-bottom: 1px solid hsla(0,0%,100%,.1);
    border-right: 1px solid hsla(0,0%,100%,.1);
    box-shadow: 10px 10px 20px rgba(235,192,0,.15),-2px -2px 10px hsla(0,0%,100%,.1),inset 3px 3px 6px hsla(0,0%,100%,.5),inset 0px 0px 20px hsla(0,0%,100%,.1),inset -3px -3px 6px rgba(0,0,0,.05);
    text-shadow: 0 1px 2px rgba(0,0,0,.2)
}

    .glass-btn::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 40%;
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 50px;
        pointer-events: none;
        opacity: .7
    }

    .glass-btn .btn-text {
        display: none;
        color: #000
    }

.typing-display {
    font-weight: bold;
    white-space: nowrap
}

    .typing-display::after {
        content: "|";
        margin-left: 2px;
        -webkit-animation: blink .7s infinite;
        -moz-animation: blink .7s infinite;
        -o-animation: blink .7s infinite;
        animation: blink .7s infinite;
        opacity: 1
    }

@-webkit-keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@-moz-keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@-o-keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.pulse-container {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    mix-blend-mode: screen
}

.ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    border: 6px solid rgba(255,227,100,.8);
    box-shadow: 0 0 40px rgba(245,255,110,.6);
    opacity: 0;
    -webkit-animation: pulse-effect 4s linear infinite;
    -moz-animation: pulse-effect 4s linear infinite;
    -o-animation: pulse-effect 4s linear infinite;
    animation: pulse-effect 4s linear infinite
}

    .ring:nth-child(1) {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        animation-delay: 0s
    }

    .ring:nth-child(2) {
        -webkit-animation-delay: 1.33s;
        -moz-animation-delay: 1.33s;
        -o-animation-delay: 1.33s;
        animation-delay: 1.33s
    }

    .ring:nth-child(3) {
        -webkit-animation-delay: 2.66s;
        -moz-animation-delay: 2.66s;
        -o-animation-delay: 2.66s;
        animation-delay: 2.66s
    }

.core {
    position: absolute;
    width: 10%;
    height: 10%;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 30px 10px rgba(255,252,100,.9);
    z-index: 10
}

@-webkit-keyframes pulse-effect {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    70% {
        opacity: .5
    }

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

@-moz-keyframes pulse-effect {
    0% {
        -moz-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    70% {
        opacity: .5
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@-o-keyframes pulse-effect {
    0% {
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    70% {
        opacity: .5
    }

    100% {
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes pulse-effect {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    70% {
        opacity: .5
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.title1 {
    font-size: 36px;
    color: #d1a36d;
    font-weight: bolder
}

    .title1 span {
        color: #000
    }

    .title1 em {
        font-size: 18px;
        color: #555
    }

.menu-container {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 900px;
    width: 100%
}

.chip {
    text-decoration: none;
    background-color: #fff;
    color: #000;
    padding: 16px 24px;
    border-radius: 50px;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    font-weight: 500;
    cursor: pointer
}

    .chip:hover {
        color: #d1a36d;
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.12)
    }

    .chip span {
        margin-right: 8px;
        text-align: left
    }

    .chip::after {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: 8px;
        opacity: .8
    }

.text1 {
    color: #717171
}

.text2 {
    font-weight: bold
}

.text3 {
    color: #eb4e4f
}

.card6 {
    background-color: #fff;
    width: 100%;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #000
}

.card6__header {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700
}

.card6__title {
    margin: 0;
    font-size: inherit
}

.card6__divider {
    margin: 0 10px;
    font-weight: 300;
    color: #000
}

.card6__price {
    font-size: inherit
}

.card6__desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #7a7a7a;
    line-height: 1.5
}

.card6__points {
    color: #d1a36d;
    margin-bottom: 16px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

    .card6__points .num {
        font-size: 64px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -1px
    }

    .card6__points .unit {
        font-size: 20px;
        font-weight: 700;
        margin-left: 8px;
        color: #000
    }

.card6__validity {
    margin: 0 0 32px 0;
    font-size: 15px;
    color: #7a7a7a
}

    .card6__validity .highlight {
        color: #000;
        font-weight: 500;
        margin: 0 2px
    }

.card6__btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 50px;
    background-color: #d1a36d;
    border: 1px solid #d1a36d;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    -webkit-transition: background-color .2s ease,-webkit-transform .1s ease;
    transition: background-color .2s ease,-webkit-transform .1s ease;
    -o-transition: background-color .2s ease,-o-transform .1s ease;
    -moz-transition: background-color .2s ease,transform .1s ease,-moz-transform .1s ease;
    transition: background-color .2s ease,transform .1s ease;
    transition: background-color .2s ease,transform .1s ease,-webkit-transform .1s ease,-moz-transform .1s ease,-o-transform .1s ease;
    letter-spacing: 1px
}

    .card6__btn:hover {
        background-color: #fff;
        border: 1px solid #d1a36d;
        color: #d1a36d
    }

    .card6__btn:active {
        -webkit-transform: scale(0.98);
        -moz-transform: scale(0.98);
        -ms-transform: scale(0.98);
        -o-transform: scale(0.98);
        transform: scale(0.98)
    }

.card7 {
    border: 2px solid rgba(0,0,0,0);
    cursor: pointer;
    -webkit-transition: border-color .2s ease;
    -o-transition: border-color .2s ease;
    -moz-transition: border-color .2s ease;
    transition: border-color .2s ease
}

    .card7:hover, .card7.is-selected {
        border-color: #d1a36d;
        background: -webkit-linear-gradient(top, #fff1df 0%, #fff 20%);
        background: -moz-linear-gradient(top, #fff1df 0%, #fff 20%);
        background: -o-linear-gradient(top, #fff1df 0%, #fff 20%);
        background: linear-gradient(to bottom, #fff1df 0%, #fff 20%)
    }

.card7 {
    background-color: #fff;
    width: 100%;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #000
}

.card7__header {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700
}

.card7__title {
    margin: 0;
    font-size: inherit
}

.card7__divider {
    margin: 0 10px;
    font-weight: 300;
    color: #000
}

.card7__select {
    margin-left: auto;
    width: 16px;
    height: 16px;
    border: 2px solid #d1a36d;
    border-radius: 50%;
    background-color: rgba(0,0,0,0);
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.card7.is-selected .card7__select {
    background-color: #d1a36d
}

.card7__price {
    font-size: inherit
}

.card7__desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #7a7a7a;
    line-height: 1.5
}

.card7__points {
    color: #d1a36d;
    margin-bottom: 16px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

    .card7__points .num {
        font-size: 64px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -1px
    }

    .card7__points .unit {
        font-size: 20px;
        font-weight: 700;
        margin-left: 8px;
        color: #000
    }

.card7__validity {
    font-size: 15px;
    color: #7a7a7a
}

    .card7__validity .highlight {
        color: #000;
        font-weight: 500;
        margin: 0 2px
    }

@media(max-width: 1000px) {
    .card7__points, .card7__validity {
        display: none
    }

    .card7.is-selected .card7__points {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
    }

    .card7.is-selected .card7__validity {
        display: block
    }
}

.member-dashboard {
    color: #222
}

.member-breadcrumb {
    font-size: 14px;
    color: #777;
    margin-bottom: 12px;
    font-weight: bold
}

    .member-breadcrumb a {
        color: #222
    }

    .member-breadcrumb .sep {
        color: #d1a36d;
        margin: 0 8px
    }

.member-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px
}

.member-greeting {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px
}

.member-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 32px;
    overflow: hidden
}

.member-greeting-text {
    font-size: 16px;
    font-weight: 500;
    margin: 0
}

.member-card {
    background-color: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 30px rgba(0,0,0,.08);
    margin-bottom: 20px
}

.member-card-label {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px
}

.member-card-value {
    font-size: 48px;
    font-weight: 700;
    color: #c79a62;
    margin-bottom: 6px
}

.member-card-expiry {
    font-size: 14px;
    color: #666
}

    .member-card-expiry strong {
        color: #222;
        font-weight: bold
    }

.member-actions {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px
}

.member-action {
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    border-radius: 20px;
    padding: 16px 20px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    color: #222;
    font-weight: bold;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    -webkit-transition: box-shadow .2s ease,-webkit-transform .2s ease;
    transition: box-shadow .2s ease,-webkit-transform .2s ease;
    -o-transition: box-shadow .2s ease,-o-transform .2s ease;
    -moz-transition: transform .2s ease,box-shadow .2s ease,-moz-transform .2s ease;
    transition: transform .2s ease,box-shadow .2s ease;
    transition: transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease,-moz-transform .2s ease,-o-transform .2s ease
}

    .member-action:hover {
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 16px 28px rgba(0,0,0,.12)
    }

.member-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #d1a36d;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px
}

@media(max-width: 600px) {
    .member-actions {
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.history-tabs {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    margin: 8px 0 20px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.history-tab {
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid #d1a36d;
    background-color: #fff;
    color: #d1a36d;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    font-size: 16px
}

    .history-tab.is-active {
        background-color: #d1a36d;
        color: #fff
    }

.history-list {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.history-item {
    background-color: #fff;
    border-radius: 24px;
    padding: 20px 24px;
    box-shadow: 0 14px 28px rgba(0,0,0,.08)
}

.history-item__header {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700
}

.history-item__title {
    font-size: 16px;
    font-weight: bolder
}

.history-date {
    font-size: 14px;
    color: #777;
    font-weight: 100
}

.history-item__meta {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px 0
}

.history-accent {
    color: #d1a36d;
    font-weight: 700
}

.history-item__expiry {
    font-size: 14px;
    color: #666;
    margin: 0
}

    .history-item__expiry strong {
        color: #222;
        font-weight: 600
    }

.faq-container {
    width: 100%;
    margin: 0 auto
}

.faq-item {
    background-color: #fff;
    border-radius: 24px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
    overflow: hidden
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: #333;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    -moz-transition: background-color .3s;
    transition: background-color .3s
}

    .faq-question:hover {
        background-color: #f9f9f9
    }

.arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #dba656;
    border-bottom: 2px solid #dba656;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    -moz-transition: transform .3s ease, -moz-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease;
    margin-right: 10px
}

.faq-question.active .arrow {
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg)
}

.faq-answer {
    display: none;
    padding: 0 20px 20px 20px;
    color: #666;
    line-height: 1.6;
    border-top: 1px solid rgba(0,0,0,0)
}

.mod-list2 {
    margin: 12px 0 0;
    padding: 0;
    list-style: none
}

    .mod-list2 li {
        position: relative;
        padding-left: 16px;
        margin-bottom: 10px;
        line-height: 1.8
    }

        .mod-list2 li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #d1a36d
        }

        .mod-list2 li:last-child {
            margin-bottom: 0
        }

    .mod-list2 strong {
        color: #222;
        font-weight: 700
    }

.faq-question.active + .faq-answer {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px
}

.three {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 2;
    mix-blend-mode: screen
}

    .three canvas {
        width: 100% !important;
        height: 100% !important;
        display: block
    }

.message1 {
    background-color: #fff;
    width: 100%;
    max-width: 480px;
    padding: 32px 28px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    -moz-transition: transform .3s ease, -moz-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease;
    margin-bottom: 40px
}

.is-visible .message1 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.message1 .modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #282828;
    margin-bottom: 20px;
    line-height: 1.4
}

.message1 .modal-body p {
    color: #282828;
    line-height: 1.6;
    margin: 0
}

.message1 .modal-body .msg {
    padding: 8px;
    background-color: #fff9f0;
    border-radius: 12px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px
}

.message1 .modal-actions {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 20px
}

    .message1 .modal-actions .btn {
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 12px 20px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        cursor: pointer;
        -webkit-transition: background-color .2s;
        -o-transition: background-color .2s;
        -moz-transition: background-color .2s;
        transition: background-color .2s;
        outline: none
    }

        .message1 .modal-actions .btn.btn-cancel {
            background-color: #f4f4f4;
            color: #282828
        }

            .message1 .modal-actions .btn.btn-cancel:hover {
                background-color: #e4e4e4
            }

        .message1 .modal-actions .btn.btn-confirm {
            background-color: #d1a36d;
            color: #fff;
            font-weight: 500;
            text-align: center
        }

            .message1 .modal-actions .btn.btn-confirm:hover {
                background-color: #d1aa7d
            }

            .message1 .modal-actions .btn.btn-confirm:disabled, .message1 .modal-actions .btn.btn-confirm[disabled] {
                background-color: #ccc;
                border-color: #ddd;
                color: #777;
                cursor: not-allowed;
                box-shadow: none;
                -webkit-transform: none;
                -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                transform: none;
                opacity: .7
            }

.usetimes {
    background-color: #f4f4f4;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px
}

    .usetimes .urow {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        line-height: 1.6
    }

        .usetimes .urow + .urow {
            margin-top: 6px
        }

        .usetimes .urow .value {
            font-size: 16px;
            margin-left: auto;
            font-weight: 600
        }

        .usetimes .urow .times {
            color: #d1a36d
        }

        .usetimes .urow .points {
            color: #ff2c2c
        }

@media(max-width: 576px) {
    .message1 {
        padding: 30px 20px
    }

        .message1 .modal-title {
            font-size: 20px
        }

        .message1 .modal-body p {
            font-size: 14px
        }
}

.notice-overlay {
    width: 100vw;
    position: fixed;
    inset: 0;
    z-index: 99;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 74px 0 0;
    background: rgba(0,0,0,.8)
}

.notice-panel {
    width: 100%
}

.notice-bar {
    width: 100%;
    background: #f8d7da;
    color: #fff;
    padding: 8px 32px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 1px solid #f19294;
    gap: 16px
}

.notice-content {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    text-align: center
}

    .notice-content p {
        margin: 0;
        font-size: 15px;
        font-weight: bold;
        color: #721c24
    }

.notice-close {
    position: absolute;
    right: 8px;
    -webkit-flex: none;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none;
    background: rgba(0,0,0,0);
    color: #721c24;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer
}

    .notice-close:hover {
        background: hsla(0,0%,100%,.15)
    }

@media(max-width: 480px) {
    .notice-overlay {
        padding-top: 72px
    }

    .notice-bar {
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .notice-close {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end
    }
}
/*# sourceMappingURL=management.min.css.map */