:root {
    --color-1: #D91944;/* 紅 */
    --color-2: #2E0E7C;/* 藍 */
    --color-3: #343434;/* 灰 */
    --color-4: #1E1E26;/* 黑 */

    /* 紅 */
    --color-1-l: #9D1533;
    --color-1-r: #E01E49;

    /* 藍 */
    --color-2-l: #18165A;
    --color-2-r: #2E0E7C;

    /* 暗紅 */
    --color-3-l: #000000;
    --color-3-r: #431B1A;

    /* 黑 */
    --color-4-l: #000000;
    --color-4-r: #1E1E26;
}

/* 顏色 ------------------------------------------------- */
.c-1 {
    color: var(--color-1);
}
.c-2 {
    color: var(--color-2);
}
.c-3 {
    color: var(--color-3);
}
.c-4 {
    color: var(--color-4);
}
/* ----------------------- */
.bg-1 {
    background-color: var(--color-1);
}
.bg-2 {
    background-color: var(--color-2);
}
.bg-3 {
    background-color: var(--color-3);
}
.bg-4 {
    background-color: var(--color-4);
}
/* ----------------------- */
.bg-lg-1 {
    background-image: linear-gradient(45deg, var(--color-1-l), var(--color-1-r));
}
.bg-lg-2 {
    background-image: linear-gradient(45deg, var(--color-2-l), var(--color-2-r));
}
.bg-lg-3 {
    background-image: linear-gradient(45deg, var(--color-3-l), var(--color-3-r));
}
.bg-lg-4 {
    background-image: linear-gradient(45deg, var(--color-4-l), var(--color-4-r));
}
/* ----------------------- */
.bg-lg90-1 {
    background-image: linear-gradient(90deg, var(--color-1-l), var(--color-1-r));
}
.bg-lg90-2 {
    background-image: linear-gradient(90deg, var(--color-2-l), var(--color-2-r));
}
.bg-lg90-3 {
    background-image: linear-gradient(90deg, var(--color-3-l), var(--color-3-r));
}
.bg-lg90-4 {
    background-image: linear-gradient(90deg, var(--color-4-l), var(--color-4-r));
}

/* ============================================================ */
:root {
/*    --header-h: 120px;*/
}

body {
    color: #fff;
}


/* Swiper 微調整 ------------------------------------------------- */
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,1%);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,1%);
}
@media (max-width: 1024px) {
    :root {
        --swiper-navigation-size: 25px;
    }
}




/* 下拉選單 ------------------------------------------------- */
.dropdown_switch {
    position: relative;
}
.dropdown_switch .dropdown_item {
    display: none;
}
.dropdown_switch.active .dropdown_item {
    display: block;
}
.dropdown_switch .dropdown_list {
    border: 1px solid #443d44;
}
.dropdown_switch .dropdown_list a {
    display: inline-flex;
}
.dropdown_switch .dropdown_list hr {
    margin: 5px 15px;
    border-color: #ddd2;
}
.dropdown_switch .dropdown_list hr + a {
/*    text-align: center;*/
}
.dropdown_switch .dropdown_list a svg {
/*    margin-right: 10px;*/
}
.dropdown_switch .dropdown_list a:hover > [class*="icon_"] {
    background-color: rgb(55, 65, 81);
}
.dropdown_switch .dropdown_list a:hover svg path {
    fill: rgb(55, 65, 81);
}
svg path {
    fill: #fff;
}
.text-white svg path {
    fill: #fff;
}
.text-black svg path {
    fill: #000;
}
/*
*/



/* 顯示/隱藏 密碼 ------------------------------------------------- */
.password_switch {
    margin: 0;
    width: 100%;
    position: relative;
}
.password_switch input {
    padding-right: 35px;
}
.password_switch i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    font-size: 18px;
    cursor: pointer;
}
.password_switch.has_show i.eye_hide {
    display: none;
}
.password_switch i.eye_show {
    display: none;
}
.password_switch.has_show i.eye_show {
    display: block;
}



/* header-1 ------------------------------------------------- */
.header-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: var(--header-h);
    padding: 25px 0;
    border-bottom: 2px solid var(--color-3);
    font-size: 14px;
    z-index: 2;
}
.header-1 .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-1 .header-content svg {
    width: 24px;
}
.header-1 .header-content .header-option {
    display: flex;
    align-items: center;
}
.header-1 .header-content .input-1 {
    padding: 8px 20px;
    font-size: 14px;
    outline: unset;
    border-radius: 10px;
    background-color: var(--color-3);
}
.header-1 .header-content a {
    display: flex;
    align-items: center;
}
.header-1 .header-content a + a {
    margin-left: 10px;
}



/* main-content ------------------------------------------------- */
.main-content {
/*    padding-top: var(--header-h);*/
}



/* header-2 ------------------------------------------------- */
.header-2 {
    position: relative;
}
.header-2.active {
    position: fixed;
    animation: header_slide 0.5s linear;
}
.header-2 a {
    background-color: #fff0;
}
.header-2 a + a {
    margin-left: 10px;
}
.header-2 a:hover,
.header-2 a.active {
    background-color: #fff2;
}
@keyframes header_slide {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}



    /* 商品卡(大) ------------------------------------------------- */
    /*.product-block {
        --product-block-w: 340px;
        width: var(--product-block-w);
        padding: 0 10px;
        margin-bottom: 40px;
    }
    .product-block .img-1 {
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        width: calc(var(--product-block-w) - 20px);
        height: calc(var(--product-block-w) - 20px);
        border: 3px solid #2c2e32;
        border-radius: 30px;
        transition: 0.5s;
    }
    .product-block [class*="txt-"] {
        padding: 0 10px;
    }
    .product-block .txt-1 {

    }
    .product-block .txt-2 {

    }
    .product-block .txt-3 {

    }
    .product-block .txt-4 {

    }*/
    /* hover -------------------- */
    /*.product-block:hover .img-1 {
        background-size: 110%;
    }*/

    /* -sm -------------------- */
    /*.product-block.product-block-sm {
        --product-block-w: 265px;
    }
    @media (max-width: 1200px) {*/
        /* -sm -------------------- */
        /*.product-block.product-block-sm {
            --product-block-w: 340px;
        }
        .product-block {
            transform: scale(0.49);
            height: calc(620px * 0.49);
            margin-top: -70px !important;
        }
    }
    @media (max-width: 374px) {
        .product-block {
            margin: 0 auto;
        }
    }*/



/* 商品卡(大) ------------------------------------------------- */
.product-block {
    max-width: 340px;
    padding: 0 10px;
    margin-bottom: 40px;

    aspect-ratio: 3/4;
    width: 100%;
}
.product-block .img-1 {
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #2c2e32;
    border-radius: 30px;
    transition: 0.5s;

    aspect-ratio: 1/1;
    width: calc(100% - 10px);
    min-height: calc(100% - 140px);
}
.product-block [class*="txt-"] {
    padding: 0 10px;
}
.product-block .txt-1 {

}
.product-block .txt-2 {

}
.product-block .txt-3 {

}
.product-block .txt-4 {

}
/* hover -------------------- */
.product-block:hover .img-1 {
    background-size: 115%;
}
/* -sm -------------------- */
.product-block.product-block-sm {
/*    --product-block-w: 265px;*/
}
@media (max-width: 1600px) {

}
@media (max-width: 1200px) {
    /* -sm -------------------- */
    .product-block.product-block-sm {

    }
    .product-block {
        aspect-ratio: 4/6;
    }
    .product-block .img-1 {
        aspect-ratio: 1/1;
        width: 100%;
        min-height: calc(100% - 152px);

        background-size: cover;
    }
    .product-block .img-1 .absolute:nth-child(1) {
        transform: scale(0.6) translate(-40%, 90%);
    }
    .product-block .img-1 .absolute:nth-child(2) {
        transform: scale(0.6) translate(-40%, 30%);
    }
    .product-block .img-1 .absolute:nth-child(3) {
        transform: scale(0.6) translate(40%, 30%);
    }
}
@media (max-width: 374px) {
    .product-block {
        margin: 0 auto;
    }
}