@font-face {
    font-family: 'GenSenRounded2';
    src: url('../font/GenSenRounded2TC-R.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '方正健力体简繁Heavy';
    src: url('../font/方正健力体简繁Heavy.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #FFFFFF;
    color: #262626;
    font-family: 'GenSenRounded2', sans-serif;

}

.cus-fs {
    font-size: 0.9rem;
}

.special-font {
    font-family: '方正健力体简繁Heavy', sans-serif;
}

.bg-red {
    background-color: #ff0000;
}

.text-red-1 {
    color: #ff0000;
}

.text-red-2 {
    color: #9a2c34;
}

.text-grey {
    color: grey;
}

#home-banner {
    background: url(../image/homepage_banner2.png) center no-repeat;
    background-size: cover;
    height: 470px;
}

#shop-banner {
    background: url(../image/partners-banner.jpg) center no-repeat;
    background-size: cover;
    height: 400px;
}

.non-selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#page-loader {
    display: none;
    background-color: rgb(204, 204, 204, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

#page-loader .fa {
    font-size: 24px;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar {
    background-color: #fbf1e8;
}

.navbar-nav {
    .nav-link {
        color: #7f7f7f !important;

        &:hover {
            color: #ff3333 !important;
        }

        &.disabled {
            color: #ff8585 !important;
        }
    }

    .show>.nav-link,
    .active>.nav-link,
    .nav-link.show,
    .nav-link.active {
        color: #ff0000 !important;
    }
}

.bg-grey {
    background-color: #fbf1e8;
}

.home-content {
    .content-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(#fbf1e8, #f5ccb3 80%, #fbf1e8 90%);
        p {
            text-align: start;
        }
        .text-container {
            padding-top: 3rem;
            text-align: center;
        }
        .middle-image {
            width: 50%;
        }
    }

    .content-2 {
        height: 50px;
        background-color: #fbf1e8;
    }

    .content-3 {
        background-color: #fbf1e8;
        position: relative;
        .image {
            position: absolute;
            top: 20%;
            left: 50%;
            width: 50%;
            transform: translate(-50%, -50%) !important;
        }
    }

    .content-ball {
        flex: 0 0 auto;
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: radial-gradient(at top left, #fbf9ec, #d6cbb9);
        padding: 20px;
        border-radius: 50%;
        aspect-ratio: 1;
        position: relative;
    }

    .content-ball::after {
        content: "";
        background: rgba(0, 0, 0, 0.2);
        width: 55%;
        height: 40px;
        border-radius: 50%;
        position: absolute;
        bottom: -20px;
        right: -10%;
        filter: blur(6px);
        transform: scaleY(0.4);
    }
}

.brand-content {
    position: relative;

    .content-1-container,
    .content-2-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .content {
            width: 75%;
            z-index: 2;

            .container {
                display: flex;

                .small {
                    width: 25%;
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;

                    hr {
                        border-top: 1px #ff0000 solid;
                    }
                }

                .big {
                    width: 75%;
                }
            }
        }
    }

    .content-1-container {
        background: linear-gradient(to bottom, #ce5a1100 10%, #fbf1e8 350px);
        padding-top: 350px;
        padding-bottom: 30px;
    }

    .content-2-container {
        background: linear-gradient(to bottom, #b3e6f8 20%, #fef4ec 40%);
        padding-top: 5%;
        padding-bottom: 25%;

        .background-image {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 0) !important;
        }
    }
}

.logo-container {
    position: relative;
    text-align: center;
    width: 25%;
}

.product-content {
    background: linear-gradient(to bottom, #b3e6f8, #ffffff);

    .sun {
        position: absolute;
        top: 40%;
        left: -10%;
        transform: translate(-50%, 0) !important;
    }

    .content-container {
        flex: 0 0 auto;
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fbf1e8;
        border: 5px white solid;
        border-radius: 20px;
        box-shadow: -3px 3px 5px 0px #00000066;
        img {
            width: 80%;
        }
    }
}

.product-content-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fbf1e8;
    padding: 1.5rem;

    .title {
        color: #ed7d31;
        font-weight: bold;
    }

    h5 {
        color: #000;
    }

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

    .middle-image {
        width: 40%;
    }
    
    .strikethrough {
        padding-left: 4px;
        padding-right: 4px;
        position: relative;
    }

    .strikethrough:before {
        content: "";
        border-top: 2px solid;
        border-color: #ff0000;
        position: absolute;
        left: 0;
        top: 45%;
        right: 0;

        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    .content-2 {
        flex: 0 0 auto;
        width: 58.33333333%;
        background-color: #fdfcde;
        border: 5px white solid;
        border-radius: 20px;
        padding: 0;
        box-shadow: -3px 3px 5px 0px #00000066;

        .column-1 {
            flex: 0 0 auto;
            width: 33.33333333%;
            border-radius: 15px 0px 0px 15px;
        }

        .column-2 {
            flex: 0 0 auto;
            width: 66.66666667%;
            display: flex;
            flex-direction: column;
            background-color: #d3effd;
            border-radius: 0px 15px 15px 0px;
            border-left: 5px white solid;
        }

        .column-3 {
            display: flex;
            padding: calc(var(--bs-gutter-x)* .5);

            &.bottom {
                border-bottom: 2.5px white solid;
            }

            &.top {
                border-top: 2.5px white solid;
            }
        }
    }
}

.shop-content {
    .content-1 {
        justify-content: center;
        background-color: #fbf1e8;
        padding: 30px;
    }
    .content-2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #e05733;
        padding-bottom: 30px;
        position: relative;
        h3 {
            color: white;
            position: absolute;
            top: 5%;
            left: 5%;
        }
    }
    .content-3 {
        display: flex;
        justify-content: center;
        background-image: linear-gradient(#fbf1e8, #f7d3ba 83%, #ff0000 83%);
        padding: 2rem;
    }
    .content-4 {
        background-color: #f7d3ba;
        padding: 2rem 5rem 2rem 5rem;
    }
    
    .scroll-container {
        display: flex;
        align-items: flex-end;
        overflow: auto;
        white-space: nowrap;
    }

    .scroll-container::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

    .scroll-container::-webkit-scrollbar-track {
        background:#e2e2e2;
        border:solid 1px #e2e2e2;
        border-radius:10px;
    }

    .scroll-container::-webkit-scrollbar-thumb {
        background-color: #ff0000;
        border-radius: 10px;
    }

    .scroll-container img{
        padding: 10px;
        width: 20%;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
}

.term-content {
    background-image: linear-gradient(#fbf1e8, #f7d3ba);
}

footer {
    background-color: #ff0000;
    color: #ffffff;
}

footer a {
    text-decoration: none;
    color: #ffffff;
}

footer a:hover {
    color: #9c9c9c;
}

@media (max-width: 767px) {
    .container-mobile-stretch {
        padding-left: 0;
        padding-right: 0;
    }

    #home-banner {
        /* background: url(../image/banner-home-sm.jpg) center no-repeat; */
        background-size: cover;
        height: 270px;
    }
    
    .home-content {
        .content-1 {
            align-items: flex-start;
            flex-wrap: wrap;
            background-image: linear-gradient(#fbf1e8, #f5ccb3 60%, #fbf1e8 65%);
            h1 {
                font-size: 22px;
            }
            p {
                text-align: center;
                font-size: 14px;
            }
            .text-container {
                text-align: center !important;
                width: 50%;
                padding: 0px 10px 0px 10px;
                margin: 10px 0px 10px 0px;
            }
            .border-line {
                border-left: 1px#ff0000 solid;
            }
            .middle-image {
                width: 80%;
                order: -1;
            }
        }
        .content-3 {
            .image {
                position: absolute;
                width: 100%;
            }
        }
        .content-ball {
            width: 100%;
        }
    }

    .brand-content {
        .content-1-container {
            background: linear-gradient(to bottom, #ce5a1100 0%, #fbf1e8 10%) !important;
            padding-top: 35% !important;
        }
        .content-2-container {
            padding-top: 5%;
        }
            .content {
                width: 90% !important;
                .container {
                    flex-direction: column;
                    .small {
                        text-align: center;
                        width: 100% !important;
                        padding: 0 !important;
                        margin-bottom: 10px !important;
                        h3 {
                            font-size: 24px !important;
                        }
                    }
                    .big {
                        width: 100% !important;
                    }
                }
            }
        
    }

    .logo-container {
        width: 50%;
        .sun {
            width: 30%;
        }
    }

    .product-content {
        .content-container {
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
    
    .product-content-2 {
        .content {
            h1 {
                font-size: 22px;
            }
            h3 {
                font-size: 16px;
            }
            h5 {
                font-size: 12px;
            }
        }
        .content-2 {
            width: 100%;
            h2 {
                font-size: 18px;
            }
            h5 {
                font-size: 16px;
            }
            .column-1 {
                width: 100%;
                text-align: center;
                border-radius: 15px 15px 0px 0px;
                padding: 10px 20px;
            }
            .column-2 {
                width: 100%;
                border-radius: 0px 0px 15px 15px;
            }
            .column-3 {
                .col-8 {
                    align-items: center;
                }
            }
        }
    }

    .shop-content {
        .col-3 {
            width: 100%;
        }
        
        .col-6 {
            width: 100%;
        }

        .content-3 {
            img {
                width: 100%;
            }
        }

        .content-4 {
            padding: 20px 10px;
            .scroll-container img {
                width: 50%;
            }
        }
    }
}

@media (min-width:992px) {
    #navi-center {
        border-left: solid 1px #fbf1e8;
        border-right: solid 1px #fbf1e8;
    }
}


@media (min-width: 768px) {
    #home-banner {
        height: 470px;
    }
    .home-content {
        .content-1 {
            .middle-image {
                width: 30%;
            }
        }
    }
}

@media (max-width: 768px) {
    .navi-bar {
        position: relative;
    }
    .navi-bar:after {
        content: "";
        width: 85%;
        border-top: solid 1px white;
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, 0) !important;
    }
}

@media (min-width: 992px) {
    #home-banner {
        height: 670px;
    }
    .home-content {
        .content-1 {
            .middle-image {
                width: 35%;
            }
        }
    }
}

.slide_up,
.slide_up_col {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 1s ease;
}

.slide_up_done,
.slide_up_col_done {
    opacity: 1;
    transform: translateY(0%);
}

.fade_in {
    opacity: 0;
    transition: opacity 2s ease;
}

.fade_in_done {
    opacity: 1;
}

.fade_in_from_left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade_in_from_left_done {
    opacity: 1;
    transform: translateX(0);
}

.fade_in_from_right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade_in_from_right_done {
    opacity: 1;
    transform: translateX(0);
}

.box_effect {
    transform: scale(0);
    transition: transform 1s ease;
}

.box_effect_done {
    transform: scale(1);
}