@charset "utf-8";

/* 首頁--創辦人*/

.de-home-outro .de-founder h5 {
    color: #FB48C4;
    font-size: 1.8rem;
}

.de-home .de-home-outro .de-desc p {
    width: auto;
    font-size: 1.6rem;
    font-weight: 700;
    }

/* 首頁--加入醉象LINE&特調專屬果昔*/

.de-no-gutters {
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.de-home-outro .de-drunk-life {
    background-color: #bee7fa;
    padding-top: 5.4rem;
    padding-bottom: 5.7rem;
    margin-bottom: 1rem;
}

.de-home-outro .de-social-block {
    position: relative;
    margin-top: 3.2rem;
    background: url(../hompage/images/bg_smoothie_recommend.jpg);
}

.de-home-outro .de-drunk-life h3 {
    font-weight: bold;
    font-size: 3.2rem;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
    color: #FB48C4;
    text-align: center;
}

.de-home-outro .de-drunk-life .de-cropped-line-wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}

.de-template-index main a {
    color: #5B5D63;
}

.de-home-outro .de-drunk-life .de-cropped-line-wrapper .de-scaling-image-wrapper {
    cursor: pointer;
}

.de-home-outro .de-drunk-life .de-cropped-line-wrapper .de-scaling-image-wrapper:nth-of-type(2) {
    margin-left: 5rem;
    cursor: initial;
}

.de-home-outro .de-social-block h3 {
    font-weight: 700;
    font-size: 3.2rem;
    letter-spacing: .04em;
    line-height: 4.8rem;
    color: #fb48c4;
}

.de-home-outro .de-drunk-life p {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: .08em;
    line-height: 2.8rem;
    text-align: center!important;
    color: #fb48c4;
}

.de-home-outro .de-social-block {
    position: relative;
    margin-top: 3.2rem;
    background: url(../hompage/images/bg_smoothie_recommend.jpg);
}

.de-home-outro .de-social-block img {
    width: 100%;
}

.de-home-outro .de-social-block .de-text-content {
    position: absolute;
    padding: 4.2rem 3.5rem 5rem;
}

de-home-outro .de-social-block h3 {
    font-size: 2.3rem;
    line-height: 3.6rem;
}

.de-home-outro .de-social-block p {
    font-weight: bold;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 2.3rem;
    color: #666768;
    padding-top: 1.9rem;
    padding-bottom: 2.5rem;
    width: 40%;
    text-align: justify;
}

.de-home-outro .de-social-block .de-btn {
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.8rem;
    color: #FB48C4;
    width: 28rem;
    height: 4.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: #FB48C4;
    background-color: #ffffff;
}

@media (max-width: 1024px) {
    .de-home-outro .de-social-block {
        margin-top: 2.6rem;
    }

    .de-home-outro .de-social-block {
        margin-top: 2.6rem;
    }
}

@media (max-width: 580px) {
    .de-home-outro .de-social-block h3 {
        font-size: 6.4vw;
    }

    .de-hide-mobile {
        display: none !important;
    }

    .de-home-outro .de-drunk-life {
        padding-top: 4rem;
        padding-bottom: 4.6rem;
    }

    .de-home-outro .de-drunk-life h3 {
        font-size: 6.4vw;
        line-height: 3.6rem;
        text-align: center;
    }

    .de-home-outro .de-drunk-life .de-cropped-line-wrapper {
        margin: 1.5rem auto;
        width: 12rem;
        height: 12rem;
    }

    .de-home-outro .de-social-block .de-cropped-image-wrapper {
        padding-bottom: 188%;
    }

    .de-home-outro .de-social-block .de-text-content {
        padding: 31.7rem 4.5rem 5rem;
    }

    .de-home-outro .de-social-block p {
        font-size: 1.2rem;
        line-height: 2.15rem;
        padding-top: 1.6rem;
        width: 100%;
    }

    .de-home-outro .de-social-block .de-btn {
        font-size: 1.3rem;
    }

}

/*All in common*/

p,
ol li,
ul li {
    font-family: " YuGothic", "sans-serif", "微軟正黑體", "Microsoft JhengHei", "Noto Serif", "serif" !important;
    text-align: justify !important;
    line-height: 1.6 !important;
}

b,
strong {
    font-weight: bolder !important;
}

#primary {
    padding-left: 0;
    padding-right: 0;
}

.js-info-navigation {
    display: none;
}

@media (min-width: 581px) {
    .de-show-mobile {
        display: none !important
    }
}

@media (max-width: 580px) {
    .de-show-mobile {
        display: block
    }

    .de-hide-mobile {
        display: none !important
    }

    p,
    ol li,
    ul li {
        font-size: 3.4vw !important;
    }

    .de-page-static .de-right-col h3,
    .de-page-static .de-right-col h4 {
        font-size: 5.2vw !important;
    }
}

@media (min-width: 1025px) {
    .de-show-tablet-down {
        display: none !important
    }
}

@media (max-width: 1024px) {
    .de-show-tablet-down {
        display: block
    }

    .de-hide-tablet-down {
        display: none !important
    }

}

.de-hide {
    display: none !important
}

.btn--gray {
    border: 2px solid #4a4a4a;
    color: #4a4a4a;
}

.de-page-static {
    padding-bottom: 12rem;
    background: #ffddea;
}


/*contact-us*/

.de-page-contact {
    padding-bottom: 12rem;
    background: #fff200;
    background: linear-gradient(180deg, #ffef00 0%, #ffcf00 100%)
}

@media (max-width: 580px) {
    .de-page-contact .de-marquee-text {
        padding-bottom: 2rem
    }
}

.de-page-contact h2 {
    line-height: 1.08333
}

@media (max-width: 1024px) and (min-width: 581px) {
    .de-page-contact h2 {
        margin-bottom: 3.de-5rem
    }
}

@media (min-width: 1025px) {
    .de-page-contact h2 {
        max-width: 29.de-1rem;
        line-height: 1.14286
    }
}

.de-page-contact a {
    color: #4a4a4a;
    text-decoration: underline;
}

.de-page-contact a:hover {
    text-decoration: underline
}

.de-page-contact .de-right-col {
    max-width: 56rem;
    padding-top: 1rem
}

.de-page-contact .de-contact-block {
    margin-bottom: 2rem
}

.de-site-content .de-medium-caps {
    text-transform: uppercase;
}

.de-marquee-text span {
    color: #4a4a4a;
}

/*about-us*/

[data-de-reveal=lines-masked-desc],
[data-de-reveal=lines-masked] {
    opacity: 1;
}

#main>.row {
    max-width: 100%;
}

.page-story {
    color: #4a4a4a !important;
}

.page-story header .intro-blocks {
    margin-bottom: 8rem;
}

[class*=body-sans-2] {
    font-size: 1.8rem;
    letter-spacing: 0.005em;
    line-height: 1.84;
}

[class*=body-sans-3] {
    font-size: 1.6rem!important;
}

@media (min-width: 1025px) {
    .page-story header .intro-blocks .middle-block {
        max-width: 35.5rem;
        align-self: center;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .page-story header .intro-blocks .right-block {
        width: 29.9rem;
        align-self: flex-end;
        margin-bottom: 3rem;
    }  

}

@media (max-width: 1024px) {
.page-story .circle-callout {
    width: 37rem;
    height: 37rem;
}
}

@media (max-width: 580px) {
    .page-story .circle-callout {
        width: 85vw;
        height:  85vw;
    }
    }

/*delivery-and-returns & faqs*/


@media (max-width: 580px) {
    .de-page-static .de-marquee-text {
        padding-bottom: 2rem
    }
}

.de-page-static h2 {
    line-height: 1.08333
}

@media (max-width: 1024px) and (min-width: 581px) {
    .de-page-static h2 {
        margin-bottom: 3.de-5rem
    }
}

@media (min-width: 1025px) {
    .de-page-static h2 {
        max-width: 29.de-1rem;
        line-height: 1.14286
    }

}

.de-page-static a {
    color: #4a4a4a;
    text-decoration: underline;
}

.de-page-static a:hover {
    text-decoration: underline
}

.de-page-static .de-right-col {
    max-width: 56rem;
    padding-top: 1rem
}

.de-page-static .de-contact-block {
    margin-bottom: 2rem
}

.de-site-content .de-medium-caps {
    text-transform: uppercase;
}

.de-marquee-text span {
    color: #4a4a4a;
}

.de-page-static .de-right-col h3,
.de-page-static .de-right-col h4 {
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

.de-page-static .de-right-col p+h3,
.de-page-static .de-right-col p+h4 {
    margin-top: 5rem;
}

.de-page-static .de-right-col h3,
.de-page-static .de-right-col h4 {
    font-size: 2rem;
    letter-spacing: 0.144rem;
    text-transform: uppercase;
    font-family: "Brown", sans-serif;
    font-weight: 400;
    line-height: 1.25;
}

.de-page-static ul li {
    margin-left: 1em;
    list-style-type: disc;
}

.de-page-static ol li {
    margin-left: 1em;
    list-style-type: decimal;
}

button.text-only {
    color: #4a4a4a;
    font-size: 2rem;
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
}

@media (max-width: 580px) {
    .de-page-static .de-right-col h3,
    .de-page-static .de-right-col h4 {
        font-size: 1.8rem;
        letter-spacing: 0.144rem;
    }

    button.text-only {
        font-size: 4.6vw !important;
    }

}

.de-page-static .de-medium-caps {
    font-size: 1.6rem;
    font-family: Brown, sans-serif;
    font-weight: 700;
    letter-spacing: .192rem;
    line-height: 1.4375;
    text-transform: uppercase;
}

.de-page-static .de-info-navigation a {
    text-decoration: none;
}

.de-page-static .de-info-navigation .de-dropdown-inner {
    max-width: 90rem;
}


@media (min-width: 1025px) {
    .de-page-static .de-info-navigation a {
        margin: .8rem 3.5rem
    }
}

@media (max-width: 1024px) and (min-width: 581px) {
    .de-page-static .de-info-navigation a {
        margin: .8rem 3rem
    }
}