@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700;900&display=swap');
* {
    font-family: 'Noto Sans TC';
}

.preloader {
    /* size */
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(50%);
    -webkit-animation: rotatePreloader 2s infinite ease-in;
    animation: rotatePreloader 2s infinite ease-in;
    z-index: 0;
    opacity: 0.5;
}

.preloader-box {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999999;
}

.preloader div {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.preloader div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0%;
    width: 10%;
    height: 10%;
    background-color: #FF8674;
    transform: translateX(-50%);
    border-radius: 50%;
}

@-webkit-keyframes rotatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
    }
}

@keyframes rotatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
    }
}

.preloader div:nth-child(1) {
    transform: rotateZ(0deg);
    -webkit-animation: rotateCircle1 2s infinite linear;
    animation: rotateCircle1 2s infinite linear;
    z-index: 9;
}

@-webkit-keyframes rotateCircle1 {
    0% {
        opacity: 0;
    }

    0% {
        opacity: 1;
        transform: rotateZ(36deg);
    }

    7% {
        transform: rotateZ(0deg);
    }

    57% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle1 {
    0% {
        opacity: 0;
    }

    0% {
        opacity: 1;
        transform: rotateZ(36deg);
    }

    7% {
        transform: rotateZ(0deg);
    }

    57% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(2) {
    transform: rotateZ(36deg);
    -webkit-animation: rotateCircle2 2s infinite linear;
    animation: rotateCircle2 2s infinite linear;
    z-index: 8;
}

@-webkit-keyframes rotateCircle2 {
    5% {
        opacity: 0;
    }

    5.0001% {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    12% {
        transform: rotateZ(-36deg);
    }

    62% {
        transform: rotateZ(-36deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle2 {
    5% {
        opacity: 0;
    }

    5.0001% {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    12% {
        transform: rotateZ(-36deg);
    }

    62% {
        transform: rotateZ(-36deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(3) {
    transform: rotateZ(72deg);
    -webkit-animation: rotateCircle3 2s infinite linear;
    animation: rotateCircle3 2s infinite linear;
    z-index: 7;
}

@-webkit-keyframes rotateCircle3 {
    10% {
        opacity: 0;
    }

    10.0002% {
        opacity: 1;
        transform: rotateZ(-36deg);
    }

    17% {
        transform: rotateZ(-72deg);
    }

    67% {
        transform: rotateZ(-72deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle3 {
    10% {
        opacity: 0;
    }

    10.0002% {
        opacity: 1;
        transform: rotateZ(-36deg);
    }

    17% {
        transform: rotateZ(-72deg);
    }

    67% {
        transform: rotateZ(-72deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(4) {
    transform: rotateZ(108deg);
    -webkit-animation: rotateCircle4 2s infinite linear;
    animation: rotateCircle4 2s infinite linear;
    z-index: 6;
}

@-webkit-keyframes rotateCircle4 {
    15% {
        opacity: 0;
    }

    15.0003% {
        opacity: 1;
        transform: rotateZ(-72deg);
    }

    22% {
        transform: rotateZ(-108deg);
    }

    72% {
        transform: rotateZ(-108deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle4 {
    15% {
        opacity: 0;
    }

    15.0003% {
        opacity: 1;
        transform: rotateZ(-72deg);
    }

    22% {
        transform: rotateZ(-108deg);
    }

    72% {
        transform: rotateZ(-108deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(5) {
    transform: rotateZ(144deg);
    -webkit-animation: rotateCircle5 2s infinite linear;
    animation: rotateCircle5 2s infinite linear;
    z-index: 5;
}

@-webkit-keyframes rotateCircle5 {
    20% {
        opacity: 0;
    }

    20.0004% {
        opacity: 1;
        transform: rotateZ(-108deg);
    }

    27% {
        transform: rotateZ(-144deg);
    }

    77% {
        transform: rotateZ(-144deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle5 {
    20% {
        opacity: 0;
    }

    20.0004% {
        opacity: 1;
        transform: rotateZ(-108deg);
    }

    27% {
        transform: rotateZ(-144deg);
    }

    77% {
        transform: rotateZ(-144deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(6) {
    transform: rotateZ(180deg);
    -webkit-animation: rotateCircle6 2s infinite linear;
    animation: rotateCircle6 2s infinite linear;
    z-index: 4;
}

@-webkit-keyframes rotateCircle6 {
    25% {
        opacity: 0;
    }

    25.0005% {
        opacity: 1;
        transform: rotateZ(-144deg);
    }

    32% {
        transform: rotateZ(-180deg);
    }

    82% {
        transform: rotateZ(-180deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle6 {
    25% {
        opacity: 0;
    }

    25.0005% {
        opacity: 1;
        transform: rotateZ(-144deg);
    }

    32% {
        transform: rotateZ(-180deg);
    }

    82% {
        transform: rotateZ(-180deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(7) {
    transform: rotateZ(216deg);
    -webkit-animation: rotateCircle7 2s infinite linear;
    animation: rotateCircle7 2s infinite linear;
    z-index: 3;
}

@-webkit-keyframes rotateCircle7 {
    30% {
        opacity: 0;
    }

    30.0006% {
        opacity: 1;
        transform: rotateZ(-180deg);
    }

    37% {
        transform: rotateZ(-216deg);
    }

    87% {
        transform: rotateZ(-216deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle7 {
    30% {
        opacity: 0;
    }

    30.0006% {
        opacity: 1;
        transform: rotateZ(-180deg);
    }

    37% {
        transform: rotateZ(-216deg);
    }

    87% {
        transform: rotateZ(-216deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(8) {
    transform: rotateZ(252deg);
    -webkit-animation: rotateCircle8 2s infinite linear;
    animation: rotateCircle8 2s infinite linear;
    z-index: 2;
}

@-webkit-keyframes rotateCircle8 {
    35% {
        opacity: 0;
    }

    35.0007% {
        opacity: 1;
        transform: rotateZ(-216deg);
    }

    42% {
        transform: rotateZ(-252deg);
    }

    92% {
        transform: rotateZ(-252deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle8 {
    35% {
        opacity: 0;
    }

    35.0007% {
        opacity: 1;
        transform: rotateZ(-216deg);
    }

    42% {
        transform: rotateZ(-252deg);
    }

    92% {
        transform: rotateZ(-252deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(9) {
    transform: rotateZ(288deg);
    -webkit-animation: rotateCircle9 2s infinite linear;
    animation: rotateCircle9 2s infinite linear;
    z-index: 1;
}

@-webkit-keyframes rotateCircle9 {
    40% {
        opacity: 0;
    }

    40.0008% {
        opacity: 1;
        transform: rotateZ(-252deg);
    }

    47% {
        transform: rotateZ(-288deg);
    }

    97% {
        transform: rotateZ(-288deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle9 {
    40% {
        opacity: 0;
    }

    40.0008% {
        opacity: 1;
        transform: rotateZ(-252deg);
    }

    47% {
        transform: rotateZ(-288deg);
    }

    97% {
        transform: rotateZ(-288deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(10) {
    transform: rotateZ(324deg);
    -webkit-animation: rotateCircle10 2s infinite linear;
    animation: rotateCircle10 2s infinite linear;
    z-index: 0;
}

@-webkit-keyframes rotateCircle10 {
    45% {
        opacity: 0;
    }

    45.0009% {
        opacity: 1;
        transform: rotateZ(-288deg);
    }

    52% {
        transform: rotateZ(-324deg);
    }

    102% {
        transform: rotateZ(-324deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@keyframes rotateCircle10 {
    45% {
        opacity: 0;
    }

    45.0009% {
        opacity: 1;
        transform: rotateZ(-288deg);
    }

    52% {
        transform: rotateZ(-324deg);
    }

    102% {
        transform: rotateZ(-324deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .dh-hidden-s {
        display: none;
    }
}

@media (max-width: 640px) {
    .dh-margin-v-5-s {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}

@media (max-width: 640px) {
    .dh-display-inline-block-s {
        display: inline-block;
    }
}

.dh-padding-10 {
    padding: 10px;
}

.dh-padding-v-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.dh-padding-h-10 {
    padding-right: 10px;
    padding-left: 10px;
}

.dh-padding-right-10 {
    padding-right: 10px;
}

.dh-padding-15 {
    padding: 15px;
}

.dh-padding-v-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.dh-padding-h-15 {
    padding-right: 15px;
    padding-left: 15px;
}

.dh-hasbadge {
    position: relative;
}

.dh-hasbadge .uk-badge {
    font-size: 12px;
    min-width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -50%);
}

.dh-badge-lightsalmon {
    background-color: #FF8674;
}

.dh-badge-orange {
    background-color: #ff993f;
}

.dh-price-original {
    font-size: 12px;
    line-height: 1;
}

.dh-price-original .money {
    font-size: 14px;
    padding-left: 3px;
    position: relative;
}

.dh-price-original .money::before {
    content: "$";
    display: inline;
}

.dh-price-original .money::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #333333;
}

.dh-price-discount {
    font-size: 14px;
    line-height: 1;
}

.dh-price-discount .money {
    font-size: 36px;
    font-weight: 600;
    padding-left: 3px;
}

@media (max-width: 959px) {
    .dh-price-discount .money {
        font-size: 30px;
    }
}

@media (max-width: 640px) {
    .dh-price-discount .money {
        font-size: 26px;
    }
}

.dh-price-discount .money::before {
    content: "$";
    display: inline;
}

.dh-review-star-group {
    font-size: 12px;
}

.dh-description-title {
    color: #5F5F5F;
    width: 100px;
    display: inline-block;
    font-weight: 400;
}

.dh-description-title::after {
    content: "\FF1A";
    display: inline-block;
}

.dh-description-info {
    display: inline-block;
    color: #333333;
}

.dh-description-info span {
    font-size: 12px;
}

.dh-tab {
    margin-left: 0;
    margin-bottom: 0;
}

.dh-tab::before {
    content: none;
}

.dh-tab li {
    padding: 0;
}

.dh-tab a {
    border: 1px solid #BDBDBD;
    border-radius: 10px 10px 0px 0px;
    color: rgba(51, 51, 51, 0.4);
    font-weight: 600;
}

.dh-tab .uk-active>a {
    border-bottom: none;
    border-color: #BDBDBD;
    color: #333333;
}

.dh-tab-content {
    margin-top: -1px;
    padding: 20px;
    border: 1px solid #BDBDBD;
    border-top: none;
    border-radius: 0px 0px 10px 10px;
}

.dh-warn {
    padding: 15px;
    background-color: rgba(255, 134, 116, 0.3);
    border-radius: 5px;
}

.dh-warn-title {
    color: #EB5757;
}

.dh-warn-text {
    font-size: 14px;
}

.dh-discount {
    border: 1px solid #EB5757;
}

@media (max-width: 640px) {
    .dh-discount {
        font-size: 12px;
    }
}

.dh-discount.disable {
    border-color: #929292;
}

.dh-discount-info {
    background-color: #EB5757;
    color: #fff;
    padding: 15px;
    background-image: url("../../images/logo-background.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}

.disable .dh-discount-info {
    background-color: #929292;
}

.dh-discount-key {
    padding: 15px;
}

.dh-discount-key button {
    background-color: #EB5757;
    color: #fff;
}

.disable .dh-discount-key .dh-color-red {
    color: #929292;
}

.dh-shopcar-item {
    background-color: #F1EDEC;
    padding: 20px;
}

@media (max-width: 640px) {
    .dh-shopcar-item {
        padding: 10px 10px 10px 15px;
    }

    .dh-shopcar-item .uk-grid-column-small>*,
    .dh-shopcar-item .uk-grid-small>* {
        padding-left: 10px;
    }
}

.dh-shopcar-item+.dh-shopcar-item {
    margin-top: 0;
    position: relative;
}

.dh-shopcar-item+.dh-shopcar-item::before {
    content: "";
    height: 1px;
    width: 95%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #BDBDBD;
}

.dh-shopcar-item-img {
    width: 150px;
}

@media (max-width: 1200px) {
    .dh-shopcar-item-img {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .dh-shopcar-item-info {
        padding-right: 20px;
        position: relative;
    }

    .dh-shopcar-item-info .dh-close {
        width: auto;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .dh-shopcar-item-info .dh-close a {
        padding: 0;
    }
}

.dh-shopcar-item-info .uk-text-small {
    margin-bottom: 5px;
}

@media (max-width: 640px) {
    .dh-shopcar-item-info .dh-text-size-title {
        font-size: 16px;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .dh-shopcar-item-info .dh-concept-summary {
        font-size: 14px;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .dh-shopcar-item-info .dh-price-discount span {
        font-size: 18px;
    }
}

.dh-shopcar-card {
    padding: 20px;
    border: 1px solid #BDBDBD;
}

.dh-shopcar-card-iten+.dh-shopcar-card-iten {
    margin-top: 10px;
}

[data-shopcar-tag] {
    position: relative;
}

[data-shopcar-tag]::before {
    content: attr(data-shopcar-tag);
    position: absolute;
    top: 7px;
    left: 2px;
    transform: rotate(-45deg);
    z-index: 2;
    color: #fff;
    font-size: 14px;
}

[data-shopcar-tag]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #FF8674 transparent transparent transparent;
    z-index: 1;
}

[data-shopcar-tag].tag-color-dhshop::after {
    border-color: #FF8674 transparent transparent transparent;
}

[data-shopcar-tag].tag-color-red::after {
    border-color: #EB5757 transparent transparent transparent;
}

[data-shopcar-tag].tag-color-orange::after {
    border-color: #ff993f transparent transparent transparent;
}

[data-shopcar-tag].tag-color-blue::after {
    border-color: #385898 transparent transparent transparent;
}

.dh-content-wrapper {
    width: 1600px;
    max-width: 100%;
    margin: auto;
    position: relative;
    box-sizing: border-box;
}

.dh-dhshop-content-wrapper {
    width: 1600px;
    max-width: 95%;
    margin: auto;
    position: relative;
    box-sizing: border-box;
}

.dh-button {
    border-radius: 5px;
    font-size: 16px;
    background-color: #fff;
    padding: 0 15px;
    text-transform: initial;
}

.dh-button:hover,
.dh-button:focus,
.dh-button:active {
    background-color: #fff;
}

.dh-button:disabled {
    opacity: 0.5;
    cursor: initial;
}

.dh-button.dh-active-default {
    border-color: #FF8674;
    color: #FF8674;
}

.dh-button.dh-active-default-full {
    background-color: #FF8674;
    border-color: #FF8674;
    color: #fff;
}

.dh-button.dh-active-red {
    border-color: #EB5757;
    color: #EB5757;
}

.dh-button.dh-active-red-full {
    background-color: #EB5757;
    border-color: #EB5757;
    color: #fff;
}

.dh-button-circle {
    font-size: 16px;
    text-transform: initial;
    background-color: #fff;
    border-radius: 87px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: #fff;
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

.dh-button-circle:hover,
.dh-button-circle:focus {
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.dh-button-circle:disabled {
    opacity: 0.5;
    cursor: initial;
}

.dh-button-circle.fill-dhshop {
    background-color: #FF8674;
    border-color: #FF8674;
    color: #fff;
}

.dh-button-circle.fill-red {
    background-color: #EB5757;
    border-color: #EB5757;
    color: #fff;
}

@media (max-width: 640px) {
    .dh-button-circle {
        font-size: 14px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .dh-button-circle::after {
        width: 32px;
        height: 32px;
        left: 3px;
    }

    .dh-button-circle i {
        font-size: 22px;
        left: 8px;
    }
}

.dh-button-icon {
    padding-left: 50px;
}

@media (max-width: 640px) {
    .dh-button-icon {
        padding-left: 44px;
    }
}

.dh-button-icon::after {
    content: "";
    width: 36px;
    height: 36px;
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #FF8674;
    border-radius: 100%;
    z-index: 1;
}

.dh-button-icon i {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #fff;
    z-index: 2;
}

.dh-button-icon.fb i {
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 37px;
    color: #4267B2;
}

@media (max-width: 640px) {
    .dh-button-icon.fb i {
        font-size: 32px;
        left: 3px;
    }
}

.dh-button-icon.fb::after {
    background-color: #fff;
}

.dh-button-icon.fill-dhshop {
    background-color: #FF8674;
    border-color: #FF8674;
    color: #fff;
}

.dh-button-icon.fill-dhshop::after {
    background-color: #fff;
}

.dh-button-icon.fill-dhshop i {
    color: #FF8674;
}

.dh-button-icon.fill-facebook {
    background-color: #4267B2;
    border-color: #4267B2;
    color: #fff;
}

.dh-button-icon.fill-facebook::after {
    background-color: #fff;
}

.dh-button-icon.fill-facebook i {
    color: #4267B2;
}

.dh-button-icon.fill-google {
    background-color: #4285F4;
    border-color: #4285F4;
    color: #fff;
}

.dh-button-icon.fill-google::after {
    background-color: #fff;
}

.dh-button-icon.fill-google i {
    color: #4285F4;
}

.dh-button-icon.fill-line {
    background-color: #00C300;
    border-color: #00C300;
    color: #fff;
}

.dh-button-icon.fill-line::after {
    background-color: #fff;
}

.dh-button-icon.fill-line i {
    color: #00C300;
}

.dh-button-shadow {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.dh-button-discount-coupon {
    color: #EB5757;
    padding: 5px 30px 5px 10px;
    position: relative;
    display: inline-block;
}

.dh-button-discount-coupon svg {
    position: absolute;
    top: 0;
    left: 0;
}

.dh-button.fill-dhshop {
    background-color: #FF8674;
    border-color: #FF8674;
    color: #fff;
}

.dh-button.fill-red {
    background-color: #EB5757;
    border-color: #EB5757;
    color: #fff;
}

.icon-play-circle {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 100%;
}

.status-switch {
    position: relative;
    width: 40px;
    height: 17.6px;
    margin: auto;
}

.status-switch input {
    visibility: hidden;
}

.status-switch input:checked+label {
    background-color: #9c6;
}

.status-switch input:checked+label:after {
    left: 20px;
}

.status-switch label {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 17.6px;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 40px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.status-switch label:hover {
    background-color: rgba(0, 0, 0, 0.24);
}

.status-switch label:after {
    display: block;
    content: "";
    position: absolute;
    left: -1.2px;
    top: -1.2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: 0.2s ease-in;
}

.dh-filter-tag {
    color: #fff;
    background-color: #FF8674;
    border-radius: 20px;
    padding: 5px 10px 5px 15px;
}

.dh-filter-tag button[uk-close] {
    color: #FF8674;
    padding: 7px 5px;
    border-radius: 100%;
    background-color: #fff;
    margin-left: 5px;
}

.dh-filter-tag button[uk-close] svg {
    max-width: 70%;
}

.dh-checkbox {
    margin-right: 5px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
}

.dh-checkbox-group {
    line-height: 24px;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    min-width: 24px;
    min-height: 24px;
}

.dh-checkbox-group.ischecked {
    color: #FF8674;
}

.dh-checkbox-group .text {
    padding-left: 35px;
    display: block;
}

.dh-checkbox-full.ischecked {
    color: #666;
}

.dh-checkbox-full.ischecked .dh-checkbox::before {
    background-color: #FF8674;
}

.dh-checkbox-full.ischecked .dh-checkbox::after {
    border-color: transparent #fff #fff transparent;
}

.dh-checkbox-full.ischecked.isdisabled .dh-checkbox::before {
    background-color: #ffccc5;
    border-color: #ffccc5;
}

.dh-checkbox-full.isdisabled .dh-checkbox::before {
    background-color: #f1edec;
    border-color: #e5e5e5;
}

.dh-checkbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 2px solid transparent;
}

.dh-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #BDBDBD;
    background-color: #fff;
    z-index: 1;
}

.dh-checkbox-point {
    margin-top: 10px;
    padding-left: 34px;
}

.ischecked .dh-checkbox::before {
    border-color: #FF8674;
}

.ischecked .dh-checkbox::after {
    top: 0px;
    left: 7px;
    transform: rotate(36deg);
    width: 19%;
    height: 55%;
    border-color: transparent #FF8674 #FF8674 transparent;
}

.isdisabled .dh-checkbox::before {
    border-color: #ffccc5;
    background-color: #fff;
}

.dh-radio {
    margin-right: 5px;
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
}

.dh-radio-group {
    line-height: 27px;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
    cursor: pointer;
}

.dh-radio::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    z-index: 2;
    border-radius: 24px;
    background-color: transparent;
}

.dh-radio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: 1px solid #BDBDBD;
    background-color: #fff;
    z-index: 1;
    transition: border 0.3s ease-in-out;
}

.ischecked .dh-radio::before {
    border-color: #FF8674;
}

.ischecked .dh-radio::after {
    background-color: #FF8674;
}

.ischecked .dh-radio.dh-radio-blue::before {
    border-color: #385898;
}

.ischecked .dh-radio.dh-radio-blue::after {
    background-color: #385898;
}

.dh-radio.dh-radio-small {
    width: 20px;
    height: 20px;
    line-height: 24px;
}

.dh-dropdown-checkbox .icon-chevron-down:before {
    content: "\E902";
}

.dh-dropdown-checkbox.uk-open .icon-chevron-down:before {
    content: "\E901";
}

.dh-dropdown-checkbox.active {
    color: #FF8674;
    border-color: #FF8674;
}

.dh-form-quantity {
    background-color: #F2F2F2;
    border-radius: 36px;
    padding: 4px 5px;
    display: inline-block;
    min-width: 146px;
}

@media (max-width: 640px) {
    .dh-form-quantity {
        min-width: auto;
        width: auto;
        padding: 1px 5px;
    }
}

.dh-form-quantity input {
    background-color: transparent;
    border: none;
    text-align: center;
    outline: none;
    min-width: 60px;
    font-size: 18px;
    vertical-align: text-top;
    /* Firefox */
    -moz-appearance: textfield;
    /* Chrome, Safari, Edge, Opera */
}

.dh-form-quantity input::-webkit-outer-spin-button,
.dh-form-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 640px) {
    .dh-form-quantity input {
        min-width: 40px;
    }
}

.dh-form-quantity .dh-button {
    width: 36px;
    height: 36px;
    background-color: #fff;
    display: inline-block;
    padding: 0;
    border-radius: 50%;
    vertical-align: middle;
}

@media (max-width: 640px) {
    /* .dh-form-quantity .dh-button {
        width: 30px;
        height: 30px;
    } */
}

.dh-form-quantity-dash,
.dh-form-quantity-plus {
    position: relative;
}

.dh-form-quantity-dash::after,
.dh-form-quantity-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;
    width: 50%;
    background-color: #000;
}

.dh-form-quantity-plus::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 50%;
    background-color: #000;
}

#showFilterButton.active {
    color: #FF8674;
    border-color: #FF8674;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: #FF8674;
}

.tw-address-postcode {
    max-width: 88px;
}

i[class^=icon-].icon-is-left {
    padding-right: 5px;
}

i[class^=icon-].icon-is-right {
    padding-left: 5px;
}

.dh-link {
    color: #FF8674;
    line-height: 1;
}

.dh-link:hover {
    color: #FF8674;
    text-decoration: none;
    position: relative;
}

.dh-link:hover:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background-color: #FF8674;
}

.dh-text-size-title {
    font-size: 24px;
    font-weight: bolder;
}

@media (max-width: 640px) {
    .dh-text-size-title {
        font-size: 20px;
    }
}

.dh-text-size-sub-title {
    font-size: 18px;
    font-weight: bolder;
    margin: 40px 0 20px 0;
}

@media (max-width: 640px) {
    .dh-text-size-sub-title {
        font-size: 16px;
    }
}

.dh-color-dhshop {
    color: #FF8674;
}

.dh-color-orange {
    color: #ff993f;
}

.dh-color-red {
    color: #EB5757;
}

.dh-color-blue {
    color: #385898;
}

.dh-graphic {
    position: relative;
}

.dh-graphic img {
    width: 100%;
}

.dh-graphic-hover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 100%);
}

.dh-graphic-title,
.dh-graphic-text {
    color: #fff;
}

@media (max-width: 640px) {
    .dh-graphic-title {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .dh-graphic-text {
        font-size: 12px;
    }
}

.dh-graphic i {
    font-size: 70px;
    color: #fff;
}

a {
    color: #FF8674;
}

a:hover {
    color: #FF8674;
    text-decoration: none;
}

.dh-information-bar {
    background-color: #FF8674;
    color: #333333;
    font-size: 16px;
}

.dh-information-bar a,
.dh-information-bar button {
    color: #fff;
}

@media (max-width: 640px) {
    .dh-information-bar {
        font-size: 12px;
    }

    .dh-information-bar button {
        padding: 12px;
    }
}

.dh-navbar {
    background-color: #fff;
}

.dh-navbar .uk-navbar-left>ul>li>a,
.dh-navbar .uk-navbar-right>ul>li>a {
    font-size: 16px;
    color: #333333;
    text-transform: initial;
    padding: 0 10px;
    position: relative;
}

.dh-navbar .uk-navbar-left>ul>li>a::after,
.dh-navbar .uk-navbar-right>ul>li>a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    background-color: #FF8674;
    height: 4px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.dh-navbar .uk-navbar-left>ul>li>a.uk-open::after,
.dh-navbar .uk-navbar-left>ul>li>a:hover::after,
.dh-navbar .uk-navbar-right>ul>li>a.uk-open::after,
.dh-navbar .uk-navbar-right>ul>li>a:hover::after {
    left: 0;
    width: 100%;
    opacity: 1;
}

.dh-navbar .icon-commerce {
    font-size: 25px;
}

#navbar-list .uk-offcanvas-bar {
    color: #333333;
    background-color: #fff;
}

#navbar-list .uk-offcanvas-bar .uk-offcanvas-close {
    color: #333333;
}

#navbar-list .uk-offcanvas-bar a {
    color: #333333;
    padding: 20px;
    font-size: 16px;
    vertical-align: middle;
}

#navbar-list .uk-offcanvas-bar a i {
    vertical-align: middle;
}

#float-button .dh-totop {
    position: fixed;
    border-radius: 100%;
    width: 38pt;
    height: 38pt;
    right: 18pt;
    bottom: 70pt;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    color: #FF8674;
    transition: box-shadow 150ms linear;
}

#float-button .dh-totop:hover {
    box-shadow: 0 5px 24px rgba(0, 0, 0, 0.3);
}

#float-button .dh-totop svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#float-button .dh-totop svg polyline {
    stroke-width: 2.2px;
}

footer {
    padding-top: 50px;
    background-color: #F1EDEC;
    color: #333333;
    margin-top: 100px;
}

.dh-footer-top-box {
    padding: 10px 15px 20px;
    text-align: center;
    position: relative;
}

.dh-footer-top-box::before {
    content: "";
    width: 2px;
    height: 90px;
    background-color: #FF8674;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
}

.dh-footer-top-box::after {
    content: "";
    width: 2px;
    height: 30px;
    background-color: #FF8674;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.dh-footer-bottom-box {
    padding: 50px 15px;
}

.dh-footer-bottom-box .item {
    padding: 0 40px;
}

.dh-footer-bottom-box .item h5 {
    font-weight: 600;
}

.dh-footer-bottom-box .item p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.dh-footer-bottom-box .item a {
    color: #333333;
}

.dh-footer-title {
    font-size: 18px;
}

.dh-footer-copyright {
    font-size: 14px;
    text-align: center;
    background-color: #FF8674;
}

@media (max-width: 640px) {
    .dh-footer-copyright {
        font-size: 12px;
    }
}

.dh-concept-tag-box {
    position: relative;
}

.dh-concept-tag-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dh-concept-tag-items .item {
    position: absolute;
    text-decoration: none;
    z-index: 1;
}

.dh-concept-tag-items .item i {
    position: relative;
    color: #fff;
    font-size: 32px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.dh-concept-tag-items .item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease-in-out;
    border-radius: 100%;
    z-index: 1;
}

.dh-concept-tag-items .item:hover::after,
.dh-concept-tag-items .item.active::after {
    width: 55px;
    height: 55px;
}

.dh-concept-group-info {
    overflow-y: auto;
	word-break: break-all;
}

.dh-concept-group-info h1 {
    font-size: 24px;
}

.dh-product-hover {
    position: relative;
}

.dh-product-card {
    max-width: 230px;
    width: 100%;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    transform: scale(0);
    transform-origin: left top;
    transition: transform 0.3s ease-in-out;
    z-index: 3;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.25);
}

@media (max-width: 640px) {
    .dh-product-card {
        width: 50%;
    }
}

.dh-product-card-title {
    font-size: 18px;
}

.dh-product-card.left {
    transform-origin: right top;
}

.dh-product-card.center {
    transform-origin: left top;
    transform: scale(0) translateX(-50%);
}

.dh-product-card.show.left {
    transform: scale(1);
}

.dh-product-card.show.left.top {
    transform: scale(1) translateY(-100%);
}

.dh-product-card.show.right {
    transform: scale(1);
}

.dh-product-card.show.right.top {
    transform: scale(1) translateY(-100%);
}

.dh-product-card.show.center {
    transform: scale(1) translateX(-50%);
}

.dh-product-card.show.center.top {
    transform: scale(1) translate(-50%, -100%);
}

.dh-product-hover .dh-product-card {
    width: 101%;
    bottom: -15px;
    left: calc(50% + 15px);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.dh-product-hover .dh-product-card.show {
    visibility: initial;
    opacity: 1;
}

.fb_customer_chat_bubble_animated_no_badge {
    bottom: 50pt !important;
    z-index: 99 !important;
}

.uk-badge {
    font-size: 12px;
    font-weight: 400;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
}

.uk-leader-fill::after {
    color: #CDCDCD;
    font-size: 12px;
}

.uk-modal-title {
    font-size: 20px;
}

@media (max-width: 640px) {
    .uk-modal-title {
        font-size: 18px;
    }
}

.uk-card-title {
    font-size: 18px;
}

@media (max-width: 640px) {
    .uk-card-title {
        font-size: 16px;
    }
}

.uk-card.ischecked {
    border: 3px solid #FF8674;
}

.dh-calendar {
    max-width: 300px;
    width: 100%;
    padding-bottom: 80%;
    margin: 0 auto;
}

.dh-calendar-head {
    position: relative;
    padding: 0 20px;
}

.dh-calendar-title {
    font-size: 24px;
}

.dh-calendar-prev,
.dh-calendar-next {
    position: absolute;
    top: 50%;
    font-size: 20px;
    transform: translateY(-50%);
    color: #000;
}

.dh-calendar-prev {
    left: 0;
}

.dh-calendar-next {
    right: 0;
}

.dh-calendar-past {
    color: #a8a8a8;
}

.dh-calendar-that-day {
    color: #EB5757;
}

.dh-calendar-future {
    color: #565656;
}

.dh-calendar-reservation-table caption {
    padding-bottom: 20px;
}

.dh-calendar-reservation-table caption p {
    margin: 0;
}

.dh-calendar-reservation-table td,
.dh-calendar-reservation-table th {
    padding: 5px;
}

.dh-calendar-reservation-table td {
    height: 57px;
}

.dh-calendar-reservation-title {
    font-size: 20px;
    color: #000;
}

.dh-calendar-reservation-box {
    background-color: rgba(255, 134, 116, 0.3);
    padding: 5px;
    font-size: 12px;
    color: #EB5757;
    border-radius: 5px;
}

.dh-calendar-reservation-box span {
    display: block;
    color: #000;
}

td:nth-child(3) .dh-calendar-reservation-box {
    transform: translateY(35px);
}

.calend-active {
    position: relative;
}

.calend-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid #EB5757;
    color: #EB5757;
    border-radius: 50%;
}

.body-list ul {
    width: 100%;
    font-family: arial;
    font-weight: bold;
    font-size: 14px;
    padding: 0;
}

.body-list ul li {
    width: calc(100%/7);
    height: 36px;
    line-height: 36px;
    list-style-type: none;
    display: block;
    box-sizing: border-box;
    float: left;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.body-list ul li span {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    font-weight: initial;
    z-index: 2;
}

.body-list ul li span::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #EB5757;
    z-index: -1;
}

#calendarBox {
    overflow-y: auto;
}

@media (max-width: 640px) {
    body.item-page {
        margin-bottom: 40px;
    }
}

.dh-go-back {
    color: #333333;
}

.dh-go-back i {
    font-size: 40px;
}

.dh-uk-slider {
    padding-top: 27px;
}

.dh-uk-slider-position {
    position: absolute;
    right: 15px;
    top: 0;
    z-index: 1;
    transform: translateY(-50%);
}

.dh-uk-slider-button {
    padding: 16px 18px;
    background-color: #fff;
    border: 1px solid #BDBDBD;
    transition: border 0.3s ease-in-out;
}

@media (max-width: 640px) {
    .dh-uk-slider-button {
        padding: 12px 14px;
    }
}

.dh-uk-slider-button:hover {
    border: 1px solid #333333;
}

.dh-uk-slider-button:hover svg {
    color: #333333;
}

.dh-uk-slider-button svg {
    transition: color 0.3s ease-in-out;
    color: #BDBDBD;
    max-width: 80%;
}

.dh-filter-concept-bar {
    background-color: #fff;
}

@media (max-width: 640px) {
    .dh-concept-list {
        margin-left: -15px;
    }

    .dh-concept-list>* {
        padding-left: 15px;
        margin-top: 15px !important;
    }
}

.dh-customer-nav li a {
    padding: 15px;
    color: #000;
    font-size: 16px;
    position: relative;
}

.dh-customer-nav li.uk-active a {
    color: #EB5757;
}

.dh-customer-nav li.uk-active a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #EB5757;
    transform: translateY(-50%);
}

#customer-list .uk-offcanvas-bar {
    color: #333333;
    background-color: #fff;
}

#customer-list .uk-offcanvas-bar .uk-offcanvas-close {
    color: #333333;
}

#customer-list .uk-offcanvas-bar a {
    color: #333333;
    padding: 20px;
    font-size: 16px;
    vertical-align: middle;
}

#customer-list .uk-offcanvas-bar .uk-active a {
    color: #EB5757;
}

.dh-record-tab>*>a {
    border-width: 6px;
}

.dh-record-tab>.uk-active>a {
    border-color: #FF8674;
}

.dh-record-card {
    border: 1px solid #BDBDBD;
}

.dh-record-card-head {
    padding: 10px 20px;
}

@media (max-width: 640px) {
    .dh-record-card-head-button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .dh-record-card-head-button button {
        width: 100%;
        line-height: 28px;
    }
}

.dh-record-card-body {
    background-color: #F1EDEC;
    padding: 20px;
}

.dh-record-card-body .uk-table th {
    color: #000;
}

.dh-record-card-body tbody tr {
    background-color: #ffffff;
}

.dh-record-card-button {
    width: 100%;
    background-color: #C4C4C4;
    border: none;
    color: #000;
}

.dh-record-card-list {
    padding: 20px;
    font-size: 12px;
}

.dh-record-card-list-return {
    background-color: #eceef1;
}

.uk-dropdown-nav>li>a {
    color: #333333;
    font-size: 16px;
}

@media (max-width: 959px) {
    .uk-table-responsive>tbody>tr>td {
        font-size: 14px;
    }

    .uk-table-responsive>tbody>tr>td[data-th]::before {
        content: attr(data-th) ":";
        display: inline;
        color: #000;
        padding-right: 5px;
    }
}

.dh-item-group-info .uk-sticky-fixed {
    background-color: #fff;
    padding: 5px 0;
}

.dh-item-group-info .uk-sticky-fixed.uk-grid-small {
    margin-top: 0px !important;
    margin-left: -15px !important;
}

.dh-item-group-info .uk-sticky-fixed .uk-margin-large-top {
    margin-top: 20px !important;
}

.dh-item-group-info .uk-sticky-fixed .uk-margin {
    margin-bottom: 0 !important;
}

.dh-item-group-info .uk-sticky-fixed .uk-margin-top {
    margin-top: 0px !important;
}

#float-button .dh-totop {
    bottom: 100pt;
}

@media (max-width: 640px) {
    #dhshopItem {
        padding-top: 0 !important;
    }
    #dhshopItemImages {
        position: inherit;
        top: 0;
        left: 0;
        width: 760px;
        max-width: 96%;
        margin: 2%;
    }
}

#dhshopItemImages .uk-slider-container .uk-thumbnav img {
    width: 150px;
}

@media (max-width: 640px) {
    #dhshopItemImages .uk-slider-container .uk-thumbnav img {
        width: 20vw;
    }
}

@media (max-width: 640px) {
    #dhshopItemImages .uk-slider-container .uk-thumbnav>* {
        padding-left: 10px;
    }
}

.dh-item-group-info-sticky {
    background-color: #fff;
    height: 0;
    overflow: hidden;
    z-index: 978;
}

.dh-item-group-info-sticky.uk-sticky-fixed {
    height: auto;
    overflow: initial;
    padding: 16px;
    transform: translateY(-100%);
}

.dh-item-group-info-sticky.uk-sticky-fixed.isOpen {
    transform: translateY(0);
}

.dh-item-group-info-sticky #shrinkItemInfo {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    background-color: #fff;
}

@media (max-width: 640px) {
    .dh-description-title {
        font-size: 14px;
        width: 85px;
    }

    .dh-description-title::after {
        content: none;
    }
}

@media (max-width: 640px) {
    .dh-description-info {
        font-size: 14px;
    }
}

.dh-comment {
    background-color: #F1EDEC;
    padding: 20px;
}

@media (max-width: 640px) {
    .dh-comment {
        padding: 10px;
    }
}

.dh-comment-time {
    font-size: 12px;
}

.dh-comment-image {
    display: inline-block;
}

.dh-comment-image img {
    width: 60px;
}

@media (max-width: 640px) {
    .dh-comment-image img {
        width: 40px;
    }
}

.dh-comment-persen {
    display: inline-block;
    padding-left: 15px;
}

.dh-comment-persen-name {
    display: inline-block;
}

@media (max-width: 640px) {
    .dh-comment-persen-name {
        font-size: 16px;
    }
}

.dh-comment-body {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    position: relative;
}

.dh-comment-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
}

.dh-star i {
    font-size: 16px;
}

.dh-star-average {
    font-size: 14px;
}

.dh-star-chart-total-number {
    width: 100px;
    height: 100px;
    color: #fff;
    background-color: #EB5757;
    border-radius: 100%;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
}

.dh-star-chart-total-quantity {
    padding-top: 10px;
    font-size: 12px;
    text-align: center;
}

.dh-star-chart-list {
    padding: 15px;
    padding-right: 0;
}

.dh-star-chart-list .item {
    position: relative;
}

.dh-star-chart-list .item .icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 10px;
}

.dh-star-chart-list .item .icon i {
    font-size: 16px;
}

.dh-star-chart-list .item .bar {
    width: 100%;
    height: 10px;
    padding: 0 40px;
    position: relative;
    box-sizing: border-box;
}

.dh-star-chart-list .item .bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
    width: calc(100% - 80px);
    background-color: #C4C4C4;
    z-index: 1;
}

.dh-star-chart-list .item .bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
    width: calc(var(--width) - 80px);
    background-color: #ff993f;
    z-index: 2;
}

.dh-star-chart-list .item .qty {
    line-height: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 640px) {
    .dh-tab>li>a>span {
        display: block;
    }
}

.dh-promotions-box {
    border: 10px solid #F1EDEC;
    padding: 10px;
    position: relative;
}

.dh-promotions-title-group {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-95%);
}

.dh-promotions-title {
    font-size: 24px;
    color: #EB5757;
    padding-right: 10px;
    display: inline-block;
    font-weight: 400;
}

.dh-promotions-name {
    display: inline-block;
}

@media (max-width: 640px) {
    .dh-promotions-item>div {
        font-size: 14px;
    }
}

.dh-select-plus-purchase label {
    cursor: pointer;
}

@media (max-width: 640px) {
    #dhNotesLabel {
        font-size: 14px;
    }
}

#shopCard {
    background-color: #fff;
    z-index: 9;
}

#shopCard a {
    color: #FF8674;
    line-height: 48px;
    font-size: 16px;
    border-color: #eee;
}

#shopCard a i {
    vertical-align: text-bottom;
}

#shopCard .fill-red {
    background-color: #EB5757;
    border-color: #EB5757;
    color: #fff;
    padding: 0;
}

#shopCard .fill-dhshop {
    background-color: #FF8674;
    border-color: #FF8674;
    color: #fff;
    padding: 0;
}

.dh-product-list tr {
    margin-bottom: 20px;
}

@media (max-width: 959px) {
    .dh-product-list thead {
        display: none;
    }

    .dh-product-list,
    .dh-product-list tbody,
    .dh-product-list td,
    .dh-product-list th,
    .dh-product-list tr {
        display: block;
    }

    .dh-product-list td,
    .dh-product-list th {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
}

.dh-evaluation-card {
    padding: 15px;
    background-color: #F1EDEC;
}

.dh-evaluation-info-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.dh-evaluation-star-group {
    cursor: pointer;
}

.dh-evaluation-info-item .uk-textarea {
    font-size: 14px;
}

.dh-file-img {
    cursor: pointer;
    background-color: #fff;
    width: 80px;
    height: 80px;
    display: block;
    position: relative;
}

.dh-file-img::before {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #BDBDBD;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.dh-file-img::after {
    content: "";
    width: 1px;
    height: 30px;
    background-color: #BDBDBD;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.datepicker-top-left,
.datepicker-top-right {
    border-top-color: #ccc;
}

.datepicker-top-left:before,
.datepicker-top-right:before {
    border-bottom-color: #ccc;
}

.datepicker-panel>ul>li.highlighted {
    color: #FF8674;
    background-color: #fff;
}

.datepicker-panel>ul>li.picked,
.datepicker-panel>ul>li.picked:hover {
    color: #EB5757;
    background-color: #ffdcd8;
}

.datepicker-panel>ul>li:hover {
    background-color: #ffdcd8;
}

.datepicker-panel>ul>li.highlighted:hover {
    background-color: #ffdcd8;
}

.dh-dhshop-icon {
    padding: 0 20px 20px;
    display: inline-block;
}

@media only screen and (max-width: 580px) {
    .dh-dhshop-icon {
        padding: 0 10px 20px;
    }
}

.dh-dhshop-icon:hover,
.dh-dhshop-icon.active {
    background-color: #fff;
}

.dh-dhshop-icon.active {
    opacity: 1;
}

.dh-dhshop-icon-group {
    background-color: #F1EDEC;
}

.dh-dhshop-icon-group li {
    width: calc(100% / 9);
}

@media only screen and (max-width: 1200px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 9);
    }
}

@media only screen and (max-width: 1000px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 7);
    }
}

@media only screen and (max-width: 900px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 6);
    }
}

@media only screen and (max-width: 740px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 5);
    }
}

@media only screen and (max-width: 580px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 4);
    }
}

@media only screen and (max-width: 320px) {
    .dh-dhshop-icon-group li {
        width: calc(100% / 2);
    }
}

.dh-dhshop-icon-title {
    font-size: 16px;
    color: #000;
}

@media only screen and (max-width: 580px) {
    .dh-dhshop-icon-title {
        font-size: 14px;
    }
}

.dh-dhshop-icon-sub-title {
    font-size: 14px;
    color: #bf4800;
}

@media only screen and (max-width: 580px) {
    .dh-dhshop-icon-sub-title {
        font-size: 12px;
    }
}

.dh-reservation-box {
    padding-top: 240px;
    padding-bottom: 200px;
    position: relative;
}

@media (max-width: 640px) {
    .dh-reservation-box {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.dh-reservation-box::before {
    content: "";
    width: 100%;
    height: 0;
    padding-top: 60%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-image: url("../../images/dhshop-background-01.png");
    background-position: top center;
}

@media (max-width: 640px) {
    .dh-reservation-box::before {
        content: none;
    }
}

.dh-reservation-box .dh-mask {
    margin-top: -8%;
    width: 100%;
    height: 0;
    padding-top: 92%;
    background: url("/demo/images/reservation.jpg") no-repeat top center;
    background-size: cover;
    -webkit-mask: url("../../images/dhshop-background-04.svg") no-repeat center center;
    mask: url("../../images/dhshop-background-04.svg") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dh-video-box {
    padding-top: 100px;
    position: relative;
}

@media (max-width: 640px) {
    .dh-video-box {
        padding-top: 40px;
    }
}

.dh-video-box::before {
    content: "";
    width: 40%;
    height: 0;
    padding-top: 40%;
    position: absolute;
    top: 20%;
    left: 12%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../../images/dhshop-background-02.png");
    background-position: top center;
}

@media (max-width: 640px) {
    .dh-video-box::before {
        content: none;
    }
}

.dh-branch-box {
    padding-top: 200px;
    padding-bottom: 200px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 640px) {
    .dh-branch-box {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    .dh-branch-box .dh-dhshop-title {
        margin-bottom: 0;
    }

    .dh-branch-box h3 {
        font-size: 18px;
        font-weight: bold;
    }
}

.dh-branch-box::before {
    content: "";
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: absolute;
    top: 20%;
    left: 0;
    background-size: cover;
    background-image: url("../../images/dhshop-background-03.png");
    background-position: top center;
    z-index: -1;
}

@media (max-width: 959px) {
    .dh-branch-box::before {
        content: none;
    }
}

.dh-branch-box+footer {
    margin-top: 0;
}

.dh-dhshop-sub-title {
    font-size: 36px;
    color: #3A3A3A;
}

@media (max-width: 1200px) {
    .dh-dhshop-sub-title {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .dh-dhshop-sub-title {
        font-size: 18px;
    }
}

.dh-dhshop-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #3A3A3A;
}

@media (max-width: 1200px) {
    .dh-dhshop-title {
        font-size: 32px;
    }
}

@media (max-width: 640px) {
    .dh-dhshop-title {
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    .dh-dhshop-button {
        text-align: center;
    }
}

.dh-dhshop-button a {
    margin-top: 20px;
    font-size: 24px;
    color: #fff;
    background-color: #EB5757;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    transition: box-shadow 0.3s ease-in-out;
}

.dh-dhshop-button a:hover {
    box-shadow: 0px 1px 12px #EB5757;
}

@media (max-width: 640px) {
    .dh-dhshop-button a {
        font-size: 16px;
        box-shadow: 0px 1px 12px #EB5757;
    }
}

/* leo */
/* 改為透明度0.8，增加可視範圍，往上滑時出現，往下滑時隱藏 */
.down {
    height: 0;
    overflow: hidden;
    transition: all 200ms;
}

.up {
    transition: all 200ms;
    /* height: 5em; */
}

/* 透明度 */
.dh-navbar.uk-active {
    opacity: 0.8;
}

.dh-filter-concept-bar.uk-active {
    opacity: 0.8;
    z-index: 1;
}

/* 間距由30px改為16px */
.home-content.uk-grid-column-medium>*,
.home-content.uk-grid-medium>* {
    padding-left: 16px;
}

.home-content.uk-grid-column-medium,
.home-content.uk-grid-medium {
    margin-left: -16px;
}

/* 圓角由10px改為20px */
.home-content .dh-graphic img {
    border-radius: 20px;
}

/*  */
.item-view img {
    border-radius: 20px;
}


.dh-concept-tag-image img {
    width: 100%;
}

.dh-graphic img {
    border-radius: 10px;
}

.concept-view {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 16px; */
    border-radius: 20px
}

.concept-view-info-img {
    padding: 16px 0 16px 16px;
}

.concept-view-info-contents {
    padding: 16px 16px 16px 0;
}

.concept-shadow {
    box-shadow: 0px 0px 150px -30px #b5b5b5;
}

@media (max-width: 960px) {
    .concept-view-rigth {
        padding: 0;
    }

    .concept-view-info-contents {
        padding: 0 16px 16px 16px;
    }

    .concept-view-info-img {
        padding: 16px 16px 0 16px;
    }
}

.icon-name {
    font-size: 22px;
    color: white;
    text-shadow: 3px 3px 4px #0000009e;
    font-weight: bolder;
    top: 3px;
    position: absolute;
    word-break: keep-all;
    padding-left: 4px;
}

.dh-concept-tag-items .item {
    line-height: 1;
}

#itemCommentsDetail img {
    width: auto;
    max-width: 300px;
}

@media (max-width: 425px) {
    .icon-name {
        font-size: 14px;
        padding-left: 3px;
        top: 6px;
    }

    .icon-add {
        font-size: 22px;
    }
}

.itemQty {
	/* width: calc(100% - 84px) !important; */
}

@media (max-width: 640px) {
	.itemQty {
        /* line-height: 14px; */
		/* width: calc(100% - 54px) !important; */
	}
	.itemQtyCart {
		width: calc(100% - 98px) !important;
	}
}

/* #dhshop_category label:nth-child(2n-1){
	padding-left:0;
} */

@media (min-width: 960px) {
	#dhshop_category label:first-child{
		padding-left:0;
	}
}

@media (max-width: 960px) {
	#dhshop_category label:first-child{
		padding-left:0;
	}
	#dhshop_category label:nth-child(4n+1){
		padding-left:0;
	}
}

@media (max-width: 640px) {
	#dhshop_category label:first-child{
		padding-left:0;
	}
	#dhshop_category label:nth-child(2n+1){
		padding-left:0;
	}

    #itemCommentsDetail img {
        width: 100%;
        max-width: 100%;
    }
}
/*# sourceMappingURL=style.css.map*/