@charset "UTF-8";

*, body, html {
    margin: 0;
    padding: 0
}

.about .about-content, .product-item .info .des, .product-item .info .price, .product-item .info .price del, .product-item .info .product-name-box .product-name, .product-item .info .product-name-box .view-button, .product-item .info .productNo, .select-eara .lang, .select-eara .region-text {
    font-family: Arial;
    font-weight: 400;
    letter-spacing: normal
}

* {
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    z-index: 2
}

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

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: "";
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    color: #007bff;
    text-decoration: none
}

    a:hover {
    color: #631b87
}


button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: none;
    outline: 0;
    background: 0 0;
    color: inherit;
    padding: 0;
    margin: 0;
    vertical-align: baseline
}

html {
    box-sizing: border-box
}

*, :after, :before {
    box-sizing: inherit
}

body {
    font-family: Arial,sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    background-color: #fff
}

.about .about-content {
    margin: .8125rem auto auto;
    width: 18.25rem;
    font-size: .9375rem;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex
}

    .about .about-content > div {
        display: none
    }

    .about .about-content .active {
        display: block
    }

.about .about-dot {
    width: 3.23063rem;
    height: .625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .8125rem auto auto
}

    .about .about-dot button {
        width: .625rem;
        height: .625rem;
        border-radius: 50%;
        background-color: #fff
    }

    .about .about-dot .active {
        background-color: #7690a8
    }

.product-item {
    background-color: #272727;
    border-radius: .5625rem;
    cursor: pointer;
    padding: 0 0 .5rem
}

.product-item:hover,
.big-card:hover {
    background: linear-gradient(
        135deg,
        #2c2c2c 0%,
        #2c2c2c 70%,
        #2e2436 85%,
        #641a87 100% /* 紫色光晕渐变出现在右下角 */
    );
}
    .product-item .image-box {
        margin: .5rem .5rem 0;
        border-radius: .625rem;
        aspect-ratio: 1/1;
        justify-content: center;
        align-items: center;
        display: flex
    }

        .product-item .image-box img {
            width: 100%;
            height: 100%;
            display: block
        }

    .product-item .info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "product-no" "price" "product-name-box" "product-rating" "des" "buttons";
        row-gap: .25rem;
        margin: 1.125rem 1.125rem 0
    }

        .product-item .info .price {
            font-size: auto;
            color: #fff;
            grid-area: price
        }

            .product-item .info .price del {
                margin-left: .625rem;
                font-size: calc(auto / 2);
                color: #023cb9;
                letter-spacing: .27px
            }

        .product-item .info .buttons {
            grid-area: buttons;
            display: flex;
            justify-content: start;
            gap: .5rem
        }

            .product-item .info .buttons button {
                background: linear-gradient(90deg, #FF5733, #FFC300);
                color: #fff;
                border: none;
                padding: .625rem .9375rem;
                border-radius: .3125rem;
                cursor: pointer
            }

                .product-item .info .buttons button span {
                    width: 3.75rem
                }

                .product-item .info .buttons button:hover {
                    background: var(--selected-button-hover);
                    transform: translateY(-4px);
                    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
                    color: #631b87
                }

                .product-item .info .buttons button img {
                    width: 1.25rem;
                    height: 1.25rem
                }

                .product-item .info .buttons button:nth-child(1) {
                    width: auto;
                    height: 2rem;
                    padding: 0 .9375rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: .3125rem
                }

                .product-item .info .buttons button:nth-child(2) {
                    width: 1.875rem;
                    height: 1.875rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: .9375rem
                }

        .product-item .info .productNo {
            grid-area: product-no;
            font-size: 1rem;
            color: rgba(255,255,255,.3647058824)
        }

        .product-item .info .des {
            grid-area: des;
            font-size: .875rem;
            color: #9e9e9e;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            height: 3.75rem
        }

        .product-item .info .product-name-box {
            grid-area: product-name-box;
            display: grid;
            grid-template-columns: 1fr 4.66313rem;
            justify-content: start;
            align-items: center;
            height: 2rem
        }

            .product-item .info .product-name-box .product-name {
                font-size: 1rem;
                color: #fff;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                flex: 1
            }

            .product-item .info .product-name-box .view-button {
                width: 4.66313rem;
                height: 1.625rem;
                border-radius: 1.75rem;
                background: #2997ff;
                box-shadow: 0 .25rem .3125rem 0 rgba(0,0,0,.14),0 .0625rem .625rem 0 rgba(0,0,0,.12),0 .125rem .25rem 0 rgba(0,0,0,.2);
                font-size: .875rem;
                color: #fff;
                justify-content: center;
                align-items: center;
                display: none
            }

                .product-item .info .product-name-box .view-button:hover {
                    background-color: #05a
                }

    .product-item .delete-button {
        display: none
    }

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #000;
    overflow: hidden
}

.category-wrapper {
    position: relative;
    background-color: #000;
    border: .0625rem solid #000
}

    .category-wrapper .category-box {
        position: relative;
        max-width: 122.1875rem;
        margin: .5rem .5rem auto
    }

        .category-wrapper .category-box .items-box {
            display: flex;
            gap: .3125rem;
            scroll-behavior: smooth;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch
        }

            .category-wrapper .category-box .items-box .left-btn, .category-wrapper .category-box .items-box .right-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer
            }

                .category-wrapper .category-box .items-box .left-btn::before, .category-wrapper .category-box .items-box .right-btn::before {
                    color: var(--top-font-color);
                    display: inline-block;
                    width: 1.5rem;
                    height: 1.5rem
                }

            .category-wrapper .category-box .items-box .left-btn {
                border-right: .0625rem solid #fff
            }

                .category-wrapper .category-box .items-box .left-btn::before {
                    content: "<"
                }

            .category-wrapper .category-box .items-box .right-btn {
                border-left: .0625rem solid #fff
            }

                .category-wrapper .category-box .items-box .right-btn::before {
                    content: ">";
                    text-align: right
                }

            .category-wrapper .category-box .items-box .list-box {
                flex: 1;
                justify-content: start;
                gap: .625rem;
                display: flex;
                overflow: hidden
            }

                .category-wrapper .category-box .items-box .list-box::-webkit-scrollbar {
                    display: none
                }

                .category-wrapper .category-box .items-box .list-box .item {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: .25rem
                }

                    .category-wrapper .category-box .items-box .list-box .item .item-img {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center
                    }

                        .category-wrapper .category-box .items-box .list-box .item .item-img img {
                            width: 4.625rem;
                            height: 4.625rem
                        }

.modal1 .modal-content .modal-body .wish-list-items .wish-list-item .wishlist-action img, .product-rating div {
    width: 1.25rem;
    height: 1.25rem
}

.category-wrapper .category-box .items-box .list-box .item title {
    display: block;
    font-family: Arial;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--top-font-color);
    text-align: center
}

.category-wrapper .category-box .items-box .list-box .active title,
.category-wrapper .category-box .items-box .list-box .item:hover title {
    /*    color: var(--selected-button);*/
    color: #ffc300;
    font-weight: 700
}

.category-wrapper .category-box .active-box {
    height: .125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .625rem;
    align-self: stretch
}

    .category-wrapper .category-box .active-box button {
        width: 3.75rem;
        height: .125rem;
        display: block;
        background: #bdc9d6
    }

        .category-wrapper .category-box .active-box button.active {
            background: #ffc300
        }

.select-eara {
    height: 1.25rem;
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    gap: .625rem
}

    .select-eara .region-text {
        font-size: 1rem;
        color: var(--top-font-color)
    }

    .select-eara .region-icon {
        width: 1.5rem;
        height: .75rem
    }

    .select-eara .down-icon {
        height: 1.5rem;
        width: 1.5rem
    }

.modal .modal-content, .modal1 .modal-content {
    padding: 1.25rem;
    width: 25rem;
    box-shadow: 0 .125rem .625rem rgba(0,0,0,.5);
    background-color: #1e1e1e
}

.select-eara .lang {
    display: block;
    font-size: 1rem;
    color: var(--top-font-color)
}

.product-rating {
    height: 2rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .125rem
}

.modal, .modal1 {
    height: 100%;
    background-color: rgba(0,0,0,.8);
    display: flex;
    width: 100%
}

.product-rating .star-full-selected svg {
    fill: #fc0
}

.product-rating .star-full-not-selected svg {
    fill: #ccc
}

.zoomable {
    transition: transform .3s
}

    .zoomable.zoomed {
        transform: scale(1.1);
        z-index: 2
    }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    z-index: 1100
}

    .modal .modal-content {
        color: #fff;
        border-radius: .625rem
    }

        .modal .modal-content .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem
        }

            .modal .modal-content .modal-header h2 {
                font-size: 1.25rem;
                margin: 0
            }

            .modal .modal-content .modal-header .close-modal {
                background: 0 0;
                border: none;
                color: #fff;
                font-size: 1.5rem;
                cursor: pointer
            }

        .modal .modal-content .modal-body label {
            display: block;
            margin-bottom: .3125rem;
            font-size: .875rem;
            color: #fff
        }

        .modal .modal-content .modal-body input, .modal .modal-content .modal-body textarea {
            width: 100%;
            padding: .625rem;
            margin-bottom: .625rem;
            border: .0625rem solid #444;
            border-radius: .3125rem;
            background-color: #121212;
            color: #fff;
            font-size: .875rem
        }

        .modal .modal-content .modal-body .char-count {
            font-size: .75rem;
            color: #888;
            text-align: right;
            margin-bottom: .625rem
        }

        .modal .modal-content .modal-body .info-text {
            font-size: .75rem;
            color: #888;
            margin-bottom: 1.25rem
        }

        .modal .modal-content .modal-body .modal-actions {
            display: flex;
            justify-content: end;
            gap: 1.25rem
        }

            .modal .modal-content .modal-body .modal-actions .cancel-btn, .modal .modal-content .modal-body .modal-actions .create-btn {
                padding: .625rem 1.25rem;
                border: none;
                border-radius: .3125rem;
                font-size: .875rem;
                cursor: pointer
            }

            .modal .modal-content .modal-body .modal-actions .cancel-btn {
                background-color: #444;
                color: #fff
            }

            .modal .modal-content .modal-body .modal-actions .create-btn, .modal .modal-content .modal-footer button {
                background: var(--selected-button);
                color: #fff
            }

            .modal .modal-content .modal-body .modal-actions .cancel-btn:hover {
                background-color: #333
            }

            .modal .modal-content .modal-body .modal-actions .create-btn:hover {
                background: var(--selected-button-hover)
            }

        .modal .modal-content .modal-body .modal-body-item {
            margin-top: .625rem;
            display: grid;
            grid-template-columns: 1.875rem 1fr;
            flex-direction: column;
            justify-content: center;
            gap: .25rem
        }

            .modal .modal-content .modal-body .modal-body-item .seleted {
                display: flex;
                justify-content: center;
                align-items: center
            }

                .modal .modal-content .modal-body .modal-body-item .seleted input {
                    margin: 0
                }

        .modal .modal-content .modal-footer {
            display: flex;
            justify-content: end;
            gap: 1.25rem
        }

.custom-alert-overlay, .modal1 {
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0
}

.modal .modal-content .modal-footer button {
    padding: .625rem 1.25rem;
    border: none;
    border-radius: .3125rem;
    font-size: .875rem;
    cursor: pointer
}

    .modal .modal-content .modal-footer button:hover {
        background-color: color-mix(in srgb,var(--selected-button) 90%,#000)
    }

.modal1 {
    align-items: center;
    z-index: 1000
}

    .modal1 .modal-content {
        color: #fff;
        border-radius: .625rem
    }

        .modal1 .modal-content .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem
        }

            .modal1 .modal-content .modal-header h2 {
                font-size: 1.25rem;
                margin: 0
            }

            .modal1 .modal-content .modal-header .close-modal {
                background: 0 0;
                border: none;
                color: #fff;
                font-size: 1.5rem;
                cursor: pointer
            }

        .modal1 .modal-content .modal-body .wish-list-items {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: auto;
            max-height: 16.875rem;
            scrollbar-width: none;
            -ms-overflow-style: none
        }

            .modal1 .modal-content .modal-body .wish-list-items::-webkit-scrollbar {
                display: none
            }

            .modal1 .modal-content .modal-body .wish-list-items .wish-list-item {
                display: flex;
                align-items: center;
                margin-bottom: .9375rem;
                background-color: #2a2a2a;
                border-radius: .5rem;
                padding: .625rem
            }

                .modal1 .modal-content .modal-body .wish-list-items .wish-list-item img {
                    width: 3.125rem;
                    height: 3.125rem;
                    border-radius: .3125rem;
                    object-fit: cover;
                    margin-right: .625rem
                }

                .modal1 .modal-content .modal-body .wish-list-items .wish-list-item .wish-list-info {
                    flex: 1
                }

                    .modal1 .modal-content .modal-body .wish-list-items .wish-list-item .wish-list-info h3 {
                        font-size: 1rem;
                        margin: 0;
                        color: #fff
                    }

                    .modal1 .modal-content .modal-body .wish-list-items .wish-list-item .wish-list-info p {
                        font-size: .75rem;
                        margin: 0;
                        color: #888
                    }

                .modal1 .modal-content .modal-body .wish-list-items .wish-list-item .wishlist-action {
                    background: 0 0;
                    border: none;
                    cursor: pointer
                }

        .modal1 .modal-content .modal-body .create-new-wishlist {
            display: block;
            width: 100%;
            margin-top: 1.25rem;
            padding: .625rem;
            background: var(--selected-button);
            color: #fff;
            border: none;
            border-radius: .3125rem;
            text-align: center;
            font-size: .875rem;
            cursor: pointer
        }

            .modal1 .modal-content .modal-body .create-new-wishlist:hover {
                background: var(--selected-button-hover)
            }

.custom-alert-overlay {
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(.25rem)
}

    .custom-alert-overlay .custom-alert-box {
        position: relative;
        background-color: #1e1e1e;
        padding: 1.875rem;
        border-radius: .75rem;
        box-shadow: 0 .625rem 1.875rem rgba(0,0,0,.5);
        z-index: 10000;
        display: grid;
        grid-template-columns: 1fr;
        min-width: 18.75rem;
        max-width: 31.25rem;
        animation: .3s ease-out fadeInScale
    }

        .custom-alert-overlay .custom-alert-box .alert-close-button {
            width: 1.875rem;
            height: 1.875rem;
            position: absolute;
            top: .9375rem;
            right: .9375rem;
            background: #2d2d2d;
            border: none;
            font-size: 1.25rem;
            cursor: pointer;
            color: #aaa;
            display: flex;
            border-radius: 50%;
            transition: .2s;
            justify-content: center;
            align-items: center
        }

            .custom-alert-overlay .custom-alert-box .alert-close-button:hover {
                background: #f55;
                color: #fff;
                transform: rotate(90deg)
            }

        .custom-alert-overlay .custom-alert-box .alert-message {
            font-size: 1rem;
            color: #e0e0e0;
            line-height: 1.6;
            margin: 1.25rem 0;
            text-align: center
        }

        .custom-alert-overlay .custom-alert-box .alert-ok-button {
            padding: .75rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
            color: #fff;
            /*            background: linear-gradient(135deg,#06c,#03a);*/
            background:var(--selected-button);
            border: none;
            border-radius: .375rem;
            transition: .3s;
            margin: .625rem auto;
            width: fit-content
        }

            .custom-alert-overlay .custom-alert-box .alert-ok-button:hover {
                background: var(--selected-button-hover);
                transform: translateY(-.125rem);
                box-shadow: 0 .25rem .625rem rgba(0,100,255,.3)
            }

            .custom-alert-overlay .custom-alert-box .alert-ok-button:active {
                transform: translateY(0)
            }

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.excel-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

    .excel-modal .excel-modal-content {
        background: #272727;
        border-radius: .625rem;
        padding: 2rem 1.5rem;
        min-width: 20rem;
        box-shadow: 0 .125rem .75rem rgba(0,0,0,.15);
        text-align: center;
        position: relative
    }

        .excel-modal .excel-modal-content h3 {
            margin-bottom: 1.5rem;
            color: #fff
        }

        .excel-modal .excel-modal-content input[type=file] {
            display: block;
            margin: 0 auto 1.25rem
        }

        .excel-modal .excel-modal-content .modal-actions {
            display: flex;
            gap: 1.25rem;
            justify-content: center;
            margin-top: .625rem
        }

            .excel-modal .excel-modal-content .modal-actions .export-btn, .excel-modal .excel-modal-content .modal-actions .import-btn {
                padding: .625rem 1.5rem;
                border: none;
                border-radius: .3125rem;
                font-size: 1rem;
                cursor: pointer;
                transition: background .2s
            }

            .excel-modal .excel-modal-content .modal-actions .import-btn {
                background: #27ae60;
                color: #fff
            }

                .excel-modal .excel-modal-content .modal-actions .import-btn:hover {
                    background: #219150
                }

            .excel-modal .excel-modal-content .modal-actions .export-btn {
                background:linear-gradient(90deg, #FF5733, #FFC300);
                color: #fff
            }

                .excel-modal .excel-modal-content .modal-actions .export-btn:hover {
                    background: ##ffc300;
					box-shadow: 0 10px 30px rgba(255,195,0,0.4)/*光影效果*/
                }

        .excel-modal .excel-modal-content .close {
            position: absolute;
            right: 1.125rem;
            top: .75rem;
            font-size: 1.75rem;
            color: #888;
            cursor: pointer
        }

            .excel-modal .excel-modal-content .close:hover {
                color: #222
            }

:root {
    --top-bacb-color1: #cb3ffc;
    --top-font-color: white;
    --top-font-color1: #ffc300;
    --selected-button: linear-gradient(90deg, #FF5733, #FFC300);
    --selected-button1: #ffc300;
    --selected-button-hover: #FFC300
}

sup {
    vertical-align: super;
    font-size: smaller
}

@media screen and (max-width:768px) {
    .product-review .title-box a, .wishlist .title a {
        width: 1.35625rem;
        background-image: url(../images/more-icon.png);
        background-size: 1.35625rem 1.25rem
    }

    .empty-box title, .may-be-like .title, .product-review .title-box h2, .wishlist .title h1 {
        line-height: 2rem;
        font-size: 1.5rem
    }

    html {
        font-size: 14px
    }

    .background-wrapper {
        position: absolute;
        width: 100vw;
        min-height: 100vh;
        overflow: hidden;
        background-color: #000;
        z-index: 0;
        padding-bottom: 5rem
    }

    .nav {
        position: static;
        overflow: hidden;
        background: linear-gradient(90deg, #641a87, #ffc300, #e60049);
    }

        .nav .phone {
            height: 5.625rem;
            display: flex;
            align-items: center;
            width: 100%
        }

        .account-wrapper .left, .breadcrumb, .nav .pc {
            display: none
        }

        .nav .phone .main {
            flex: 1;
            background: linear-gradient(0deg,rgba(255,255,255,.12),rgba(255,255,255,.12));
            height: 3.5rem;
            display: flex;
            align-items: center;
            padding: 0 .8125rem 0 1.1875rem
        }

            .nav .phone .main .icons {
                position: relative;
                display: flex;
                justify-content: start;
                align-items: center;
                flex: 1;
                gap: .75rem
            }

                .nav .phone .main .icons a {
                    height: 1.5rem
                }

            .nav .phone .main .logo, .nav .phone .main .logo img {
                width: 11.25rem;
                height: 3.75rem
            }

            .nav .phone .main .icons a > img {
                width: 1.5rem;
                height: 1.5rem
            }

            .nav .phone .main .icons a span {
                width: 1.375rem;
                height: 1.375rem;
                background-color: #ffc300;
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                top: -2.8125rem;
                left: .625rem
            }

            .nav .phone .main .logo {
                cursor: pointer
            }

        .nav .phone .sub .logo img, .nav .phone .sub .show-mune img {
            width: 100%;
            height: 100%
        }

        .nav .phone .sub {
            height: 5.875rem;
            display: flex;
            justify-content: start;
            align-items: center;
            gap: .625rem;
            padding: 0 .9375rem
        }

            .nav .phone .sub .logo {
                width: 3.125rem;
                height: 3.125rem;
                cursor: pointer
            }

            .nav .phone .sub .title {
                flex: 1;
                font-family: Arial;
                font-size: 1.375rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #fff
            }

        .nav .phone .sub-back .shopping-card, .nav .phone .sub-back .title, .nav .phone .sub-right-icon {
            font-size: 1.125rem;
            font-family: Arial;
            font-weight: 400;
            letter-spacing: normal
        }

        .nav .phone .sub .show-mune {
            width: 1.5rem;
            height: 1.5rem
        }

        .nav .phone .sub-back .back, .nav .phone .sub-input .back {
            width: 2.8125rem;
            background-image: url(../images/back-icon.png);
            background-size: 2.8125rem 2.8125rem;
            background-position: center center;
            background-repeat: no-repeat
        }

        .nav .phone .sub-back {
            flex: 1;
            display: flex;
            align-items: center
        }

            .nav .phone .sub-back .back {
                height: 2.8125rem
            }

            .nav .phone .sub-back .title {
                flex: 1;
                color: #fff
            }

            .nav .phone .sub-back .shopping-card {
                display: flex;
                align-items: center;
                gap: .3125rem;
                color: #fff;
                height: 2.0625rem;
                margin: auto .75rem
            }

                .nav .phone .sub-back .shopping-card img {
                    width: 2.0625rem;
                    height: 2.0625rem;
                    display: block
                }

        .nav .phone .sub-right-icon {
            flex: 1;
            margin: 0 .625rem;
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto;
            color: var(--top-font-color)
        }

    .footer .logo-box .select-box, .footer > div, .footer > div > div {
        margin: 1.875rem 0 0
    }

    .nav .phone .sub-right-icon .right-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .3125rem
    }

        .nav .phone .sub-right-icon .right-icons .show-mune, .nav .phone .sub-right-icon .right-icons img {
            width: 1.5rem;
            height: 1.5rem
        }

    .nav .phone .sub-input {
        flex: 1;
        display: flex;
        align-items: center;
        height: 2.8125rem
    }

        .nav .phone .sub-input .back {
            height: 2.8125rem
        }

        .nav .phone .sub-input .shopping-card img {
            width: 2.0625rem;
            height: 2.0625rem
        }

        .nav .phone .sub-input .shopping-card span {
            border-radius: 1rem;
            background-color: red;
            line-height: .6875rem;
            height: 1rem;
            min-width: 1rem;
            text-align: center;
            font-family: Arial;
            font-size: .4375rem;
            padding: .1875rem;
            color: #fff;
            display: inline-block;
            position: relative;
            top: -2.0625rem;
            left: -.625rem
        }

        .nav .phone .sub-input .input {
            flex: 1;
            height: 100%;
            border-radius: .625rem;
            background: linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 114%)
        }

            .nav .phone .sub-input .input form {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center
            }

                .nav .phone .sub-input .input form .search-icon {
                    background-image: url(../images/search-icon.png);
                    background-repeat: no-repeat;
                    background-size: 1.8125rem 1.8125rem;
                    background-position: center center;
                    width: 1.8125rem;
                    height: 1.8125rem;
                    margin-left: .625rem
                }

                .nav .phone .sub-input .input form .clear-icon {
                    background-image: url(../images/clear-icon.png);
                    background-repeat: no-repeat;
                    background-size: 1.25rem 1.25rem;
                    background-position: center center;
                    width: 1.25rem;
                    height: 1.25rem;
                    margin-right: .625rem
                }

                .nav .phone .sub-input .input form input {
                    flex: 1;
                    color: var(--top-font-color)
                }

                    .nav .phone .sub-input .input form input::placeholder {
                        color: rgba(255,255,255,.5)
                    }

    .category-wrapper {
        background-color: unset;
        border: unset
    }

        .category-wrapper .category-box .items-box .list-box {
            overflow: auto
        }

    .footer {
        background-color: #000;
        padding: 3.125rem 0;
        display: flex;
        flex-wrap: wrap;
        justify-items: center;
        justify-content: center
    }

    .nav-bar, .nav-space {
        background-color: #333
    }

    .footer .logo-box {
        width: 100vw
    }

        .footer .logo-box .footer-website-log {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column
        }

            .footer .logo-box .footer-website-log img {
                width: 5.5625rem;
                height: 5.5625rem
            }

            .footer .logo-box .footer-website-log h1 {
                font-family: Arial;
                font-size: 1.375rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #fff;
                margin-top: .9375rem;
                border-top: .0625rem solid #ffc300;
                border-bottom: .0625rem solid #ffc300
            }

        .footer .logo-box .select-box {
            display: flex;
            justify-content: center;
            align-items: start;
            height: 2rem
        }

            .footer .logo-box .select-box .eare {
                display: flex;
                gap: .5rem;
                align-items: center
            }

                .footer .logo-box .select-box .eare img {
                    width: 1.5rem
                }

                .footer .logo-box .select-box .eare button {
                    width: .71875rem;
                    height: .40625rem;
                    background-image: url(../images/down-icon.png);
                    background-size: .71875rem .40625rem
                }

        .footer .logo-box .social-icons {
            margin: 1.875rem 0 0;
            display: flex;
            align-items: center;
            justify-content: start;
            flex-direction: column;
            gap: .9375rem
        }

            .footer .logo-box .social-icons .social-title {
                font-family: Arial;
                font-size: .75rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #9e9e9e
            }

            .footer .logo-box .social-icons .des {
                color: #e1efff
            }

            .footer .logo-box .social-icons .social-item img {
                width: 2.5rem;
                height: 2.5rem
            }

    .footer > div > h1 {
        font-family: Arial;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: normal;
        color: var(--selected-button1)
    }

    .footer > div > div > a {
        padding: .3125rem 0;
        display: block;
        font-family: Arial;
        font-size: .75rem;
        font-weight: 400;
        letter-spacing: normal;
        color: var(--top-font-color)
    }

    .footer .account-link, .footer .home-link, .footer .supper-link {
        width: 30vw
    }

    .footer .brands {
        width: 90vw
    }

        .footer .brands .brands-box {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem
        }

            .footer .brands .brands-box img {
                width: 3.75rem;
                height: 3.75rem
            }

        .footer .brands .company-des {
            position: relative
        }

            .footer .brands .company-des .copyright {
                font-family: Arial;
                font-size: .75rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #fff;
                line-height: 1.875rem
            }

            .footer .brands .company-des .des {
                font-family: Arial;
                font-size: .75rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #a6a4a4;
                padding: 0 3.125rem 0 0
            }

    .may-be-like .container, .product-review .item-box .item {
        padding: .625rem
    }

    .nav-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: .9375rem;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5rem
    }

        .nav-bar a {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 6.6875rem;
            height: 3.125rem;
            gap: .1875rem
        }

            .nav-bar a img {
                width: 1.5rem;
                height: 1.5rem
            }

            .nav-bar a span {
                display: block;
                font-family: Roboto;
                font-size: .75rem;
                font-weight: 400;
                line-height: 1rem;
                text-align: center;
                letter-spacing: .4px;
                color: #fff
            }

            .nav-bar a.active span {
                color: #fff;
                font-weight: 900
            }

    .nav-space {
        height: 5.625rem;
        width: 100%
    }

    .load-more {
        text-align: center;
        margin: 1.25rem 0
    }

        .load-more a {
            display: inline-block;
            padding: .625rem 1.25rem;
            color: var(--top-font-color1);
            text-decoration: none;
            font-size: 1rem;
            border: .0625rem solid var(--top-font-color1);
            border-radius: .3125rem;
            transition: .3s
        }

            .load-more a:hover {
                background-color: var(--top-font-color1);
                color: #fff
            }

    .empty-box {
        width: 12.0625rem;
        height: 12.5625rem;
        margin: 3.875rem auto 6.25rem
    }

        .empty-box > img {
            width: 100%;
            display: block
        }

        .empty-box title {
            display: block;
            margin: .75rem 0 auto;
            font-family: Arial;
            font-weight: 400;
            text-align: center;
            letter-spacing: normal;
            color: #fff
        }

    .wishlist {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        margin-top: .75rem;
        margin-bottom: .75rem
    }

        .wishlist .title {
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: .75rem .5625rem auto
        }

            .wishlist .title h1 {
                font-family: Arial;
                font-weight: 400;
                text-align: center;
                letter-spacing: normal;
                color: #fff
            }

            .wishlist .title a {
                height: 1.25rem;
                display: block;
                background-position: center center
            }

        .wishlist .items {
            margin: 0 .5625rem .5625rem
        }

            .pc-wishlist, .wishlist .items .item .des {
                display: none
            }

    .product-review {
        background-color: #1e1e1e;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        gap: .9375rem;
        border-radius: .3125rem;
        padding: .75rem .5rem;
        margin: .625rem 0 0
    }

        .product-review .title-box {
            width: 100%;
            height: 2rem;
            display: flex;
            align-items: center;
            margin-left: .5rem;
            margin-right: .5rem
        }

            .product-review .title-box h2 {
                font-family: Arial;
                font-weight: 400;
                letter-spacing: normal;
                flex: 1;
                color: #fff
            }

            .product-review .title-box a {
                height: 1.25rem;
                display: block;
                background-repeat: no-repeat
            }

        .product-review .item-box {
            margin-top: 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            width: 100%
        }

            .product-review .item-box .item .product-image {
                width: 100%;
                height: 19.1875rem;
                border-radius: .625rem;
                background-color: #000;
                box-sizing: border-box;
                border: .0625rem solid #232323;
                display: flex;
                justify-content: center;
                align-items: center
            }

                .product-review .item-box .item .product-image img {
                    max-width: 100%;
                    max-height: 19.1875rem
                }

            .product-review .item-box .item .product-details {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: .75rem;
                padding: .625rem
            }

    .cart-actions, .may-be-like .container .container-width .item .info .buttons .add-cart, .may-be-like .container .container-width .item .info .des, .may-be-like .container .container-width .item .info .price del, .may-be-like .container .container-width .item .info .product-name-box .view-button, .may-be-like .title .right-btn, .pagination {
        display: none
    }

    .product-review .item-box .item .product-details .product-name-box {
        display: flex;
        justify-content: start;
        align-items: center;
        height: 2rem
    }

        .product-review .item-box .item .product-details .product-name-box .product-name {
            font-size: 1.5rem;
            margin-bottom: .625rem;
            flex: 1
        }

        .product-review .item-box .item .product-details .product-name-box .view-button {
            width: 4.66313rem;
            height: 1.625rem;
            line-height: 1.625rem;
            border-radius: 1.75rem;
            background: #1759aa;
            box-shadow: 0 .25rem .3125rem 0 rgba(0,0,0,.14),0 .0625rem .625rem 0 rgba(0,0,0,.12),0 .125rem .25rem 0 rgba(0,0,0,.2);
            font-family: Arial;
            font-size: .875rem;
            font-weight: 400;
            text-align: center;
            letter-spacing: normal;
            color: #fff;
            display: none
        }

            .product-review .item-box .item .product-details .product-name-box .view-button:hover {
                background-color: #05a
            }

    .product-review .item-box .item .product-details .product-price {
        height: 2rem
    }

        .product-review .item-box .item .product-details .product-price .current-price {
            font-family: Arial;
            font-size: 1.375rem;
            font-weight: 400;
            line-height: 1.375rem;
            letter-spacing: normal;
            color: #3296f2
        }

        .product-review .item-box .item .product-details .product-price .original-price {
            font-family: Arial;
            font-size: .75rem;
            font-weight: 400;
            line-height: .75rem;
            letter-spacing: .27px;
            color: #023cb9
        }

    .product-review .item-box .item .product-details .product-description {
        font-family: Arial;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.375rem;
        letter-spacing: .27px;
        color: #9e9e9e
    }

    .may-be-like {
        width: 100vw;
        overflow: hidden;
        margin-top: .75rem;
        margin-bottom: .75rem;
        background-color: #000;
        position: relative
    }

        .may-be-like .title {
            height: 2rem;
            font-family: Arial;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            margin-left: .625rem
        }

        .may-be-like .container::-webkit-scrollbar {
            display: none
        }

        .may-be-like .container .container-width {
            display: flex;
            gap: .9375rem;
            flex-wrap: nowrap;
            overflow: auto
        }

            .may-be-like .container .container-width::-webkit-scrollbar {
                display: none
            }

            .may-be-like .container .container-width .item {
                position: relative;
                width: 16.875rem;
                height: 25rem;
                flex: 0 0 auto
            }

                .may-be-like .container .container-width .item .info {
                    column-gap: 1.25rem;
                    justify-content: center;
                    align-items: center;
                    grid-template-areas: "product-no product-no" "product-name-box product-name-box" "price product-rating" "des buttons";
                    grid-template-columns: auto 1fr
                }

                    .may-be-like .container .container-width .item .info .buttons .love {
                        position: absolute;
                        right: .625rem;
                        top: .625rem;
						background: transparent;
                    }

    .search-box {
        height: 2.5rem;
        border-radius: .625rem;
        background: linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 114%);
        margin: .75rem .5rem auto;
        padding-left: .625rem;
        padding-right: .625rem
    }

        .search-box form {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center
        }

            .search-box form .search-input {
                flex: 1;
                border: none;
                font-size: 1rem;
                color: #fff
            }

            .search-box form .search-button {
                background-color: transparent;
                border: none;
                width: 1.5rem;
                height: 1.5rem;
                background-image: url(../images/search-icon.png);
                background-size: 1.5rem 1.5rem;
                background-position: center center;
                background-repeat: no-repeat
            }
}

@media screen and (min-width:768px) {
    .nav .pc, .nav .pc .title {
        gap: .625rem;
        display: flex
    }

    .may-be-like .title h1, .pc-wishlist .title-box h1, .wishlist .title h1 {
        font-family: Arial;
        font-weight: 400;
        letter-spacing: normal
    }

    .product-review .title-box a, .wishlist .title a {
        width: 1.35625rem;
        height: 1.25rem;
        background-image: url(../images/more-icon.png);
        background-size: 1.35625rem 1.25rem
    }

    html {
        font-size: 16px
    }

    .background-wrapper {
        width: 100%;
        min-height: 100vh;
        background-color: #000;
        position: relative;
        z-index: 0;
        overflow: hidden
    }

    .nav, .nav .pc .menu .item .sub-view {
        background: linear-gradient(90deg, #641a87, #ffc300, #e60049);
        z-index: 100
    }

    .nav {
        position: relative
    }

        .nav .phone {
            display: none
        }

        .nav .pc {
            height: 6.25rem;
            align-items: center;
            position: relative;
            padding-left: 1.875rem;
            padding-right: 4rem
        }

            .nav .pc .logo {
                width: 11.8125rem;
                height: 3.9375rem;
                background-image: url(../images/logo.png);
                background-size: 11.8125rem 3.9375rem;
                background-repeat: no-repeat;
                cursor: pointer
            }

            .nav .pc .title {
                flex-direction: column
            }

                .nav .pc .title title {
                    font-family: Arial;
                    font-size: 1.375rem;
                    font-weight: 700;
                    line-height: 1.375rem;
                    letter-spacing: .27px;
                    color: var(--top-font-color);
                    display: block
                }

            .nav .pc .menu {
                flex: 1;
                height: 100%;
                align-items: center;
                display: flex;
                gap: 1.875rem;
                justify-content: center
            }

                .nav .pc .menu .item {
                    position: relative;
                    display: block;
                    cursor: pointer
                }

                    .nav .pc .menu .item a {
                        font-family: Arial;
                        font-size: 1rem;
                        font-weight: 400;
                        color: var(--top-font-color)
                    }

                        .account-wrapper .left .mune ul li.active a,
                        .account-wrapper .left .mune ul li:hover a {
                            color:var(--top-font-color1);
                        }
                        .nav .pc .menu .active > a,
                        .nav .pc .menu .item .sub-view > a:hover,
                        .nav .pc .menu .item a:hover {
                            color: #631b87
                        }
                        .footer > div > h1 {
                            color: var(--selected-button1)
                        }
                        .nav .pc .menu .item a:hover {
                            font-weight: 700
                        }

                    .nav .pc .menu .item:focus .sub-view, .nav .pc .menu .item:hover .sub-view {
                        display: block
                    }

                    .nav .pc .menu .item .sub-view {
                        display: none;
                        position: absolute;
                        left: 0;
                        min-width: 15.25rem;
                        color: var(--top-font-color);
                        border-radius: 1.125rem;
                        padding: 1.125rem 1.5rem
                    }

                        .nav .pc .menu .item .sub-view > a {
                            display: block;
                            color: var(--top-font-color);
                            font-weight: 700;
                            margin-bottom: .75rem;
                            text-decoration: none;
                            transition: color .2s;
                            width:100%;
                        }

                            .nav .pc .menu .item .sub-view > a:last-child {
                                margin-bottom: 0
                            }

                .nav .pc .menu .active > a {
                    font-weight: 700
                }

            .nav .pc .icons-search-wrapper {
                height: 4.0625rem;
                width: 10.0625rem;
                position: relative;
                display: flex;
                gap: .5rem;
                flex-direction: column
            }

                .nav .pc .icons-search-wrapper .icons {
                    display: flex;
                    justify-content: flex-end;
                    gap: 1.25rem;
                    position: relative
                }

                    .nav .pc .icons-search-wrapper .icons a {
                        width: 1.5rem;
                        height: 1.5rem;
                        display: block;
                        position: relative
                    }

                    .nav .pc .icons-search-wrapper .icons span {
                        position: absolute;
                        min-width: .75rem;
                        height: .75rem;
                        padding: .125rem;
                        color: #fff;
                        font-family: Arial;
                        font-size: .625rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #ffc300;
                        border-radius: .75rem;
                        top: -.3125rem;
                        left: .75rem
                    }

                    .nav .pc .icons-search-wrapper .icons img {
                        display: block;
                        width: 1.5rem;
                        height: 1.5rem;
                        position: absolute
                    }

                .nav .pc .icons-search-wrapper .search {
                    border-radius: .5rem;
                    background: #f5f5f5;
                    width: 100%;
                    height: 1.875rem;
                    display: block;
                    position: relative;
                    padding-left: .3125rem
                }

                    .nav .pc .icons-search-wrapper .search form {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        position: relative;
                        gap: .3125rem
                    }

                        .nav .pc .icons-search-wrapper .search form button {
                            width: 1.25rem;
                            height: 1.25rem;
                            display: block;
                            position: relative
                        }

                            .nav .pc .icons-search-wrapper .search form button img {
                                width: 100%;
                                height: 100%
                            }

                        .nav .pc .icons-search-wrapper .search form input {
                            flex: 1;
                            display: block;
                            width: 3.125rem
                        }

    .breadcrumb, .wishlist .title {
        display: flex;
        align-items: center
    }

    .nav .pc .icons-search-wrapper .search form input::placeholder {
        font-family: Arial;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.125rem;
        letter-spacing: normal;
        color: #656565
    }

    .category-wrapper .category-box {
        margin: .5rem auto auto
    }

    .breadcrumb {
        width: auto;
        height: 74px;
        margin: 0 auto;
        gap: .625rem
    }

        .breadcrumb a {
            color: #fff
        }

            .breadcrumb a::after {
                content: ">";
                margin-left: .625rem
            }

        .breadcrumb span {
            color: #3296f2
        }

    .nav-bar {
        display: none
    }

    .pc-wishlist {
        position: relative
    }

        .pc-wishlist .title-box {
            height: 2.8125rem;
            display: flex;
            justify-content: start;
            align-items: center;
            margin: 2.25rem 1.3125rem 0
        }

            .pc-wishlist .title-box h1 {
                flex: 1;
                font-size: 2.25rem;
                color: #fff
            }

            .pc-wishlist .title-box .right-btn {
                width: 4rem;
                display: flex
            }

                .pc-wishlist .title-box .right-btn button {
                    width: 2rem;
                    height: 2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center
                }

                    .pc-wishlist .title-box .right-btn button img {
                        width: 1rem;
                        height: 1rem
                    }

        .pc-wishlist .item-box {
            display: flex;
            word-wrap: normal;
            overflow: hidden;
            column-gap: .3125rem;
            border-radius: .625rem;
            margin: .3125rem .3125rem .9375rem
        }

            .pc-wishlist .item-box .item {
                width: 22.5rem;
                flex: 0 0 auto
            }

    .wishlist {
        display: grid;
        grid-template-columns: 1fr;
        gap: .75rem;
        background-color: #121212;
        margin-top: .75rem;
        margin-bottom: .75rem
    }

        .load-more, .may-be-like .container .container-width .item .info .buttons .add-cart, .may-be-like .container .container-width .item .info .des, .may-be-like .container .container-width .item .info .price del, .may-be-like .container .container-width .item .info .product-name-box .view-button, .product-review .items .item .des, .wishlist .items .item .des {
            display: none
        }

    .footer, .may-be-like {
        background-color: #000
    }

    .wishlist .title {
        grid-column: 1/-1;
        height: 2rem;
        justify-content: space-between;
        margin: .75rem .5625rem auto
    }

        .wishlist .title h1 {
            font-size: 1.5rem;
            line-height: 2rem;
            text-align: center;
            color: #fff
        }

        .wishlist .title a {
            display: block;
            background-position: center center
        }

    .wishlist .items {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(22.5rem,1fr));
        grid-gap: 1.25rem;
        margin: 0 .5625rem .5625rem
    }

    .may-be-like {
        position: relative;
        margin: .75rem 0;
        padding: 1.0625rem
    }

        .may-be-like .title {
            display: flex;
            height: 2.625rem;
            align-items: center
        }

            .may-be-like .title h1 {
                flex: 1;
                font-size: 2.25rem;
                color: #fff
            }

            .may-be-like .title .right-btn {
                width: 15.625rem;
                height: 2rem;
                display: flex;
                justify-content: center;
                align-items: center
            }

        .may-be-like .container::after, .may-be-like .container::before {
            content: "";
            left: 0;
            width: 100%;
            height: .125rem;
            /*            background: linear-gradient(to left,#c47bb7,#4f8bff);*/
            background: linear-gradient(90deg, transparent, rgba(255, 195, 0, 0.8), rgba(230, 0, 73, 0.7), transparent);
            z-index: 1;
            position: absolute
        }

        .may-be-like .title .right-btn a {
            display: inline-block;
            background: var(--selected-button);
            color: #fff;
            font-family: Arial,sans-serif;
            font-size: 1rem;
            font-weight: 700;
            border: none;
            border-radius: 0.625rem;
            padding: .75rem 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            box-shadow: none;
            outline: 0;
            margin: 0;
            transition: background .2s
        }

    .account-wrapper .left .mune ul li a, .cart-actions .email-btn:after, .cart-actions .export-btn:after, .cart-actions .print-btn:after, .cart-actions .share-btn:after, .empty-box title, .footer .brands .company-des .copyright, .footer .brands .company-des .des, .footer .logo-box .footer-website-log h1, .footer .logo-box .social-icons .social-title, .footer > div > div > a, .footer > div > h1, .product-review .title-box h2 {
        font-weight: 400;
        font-family: Arial;
        letter-spacing: normal
    }

    .account-wrapper .left, .account-wrapper .right {
        background-color: #1a1a1a;
        border-radius: .75rem
    }

    .may-be-like .title .right-btn a:hover {
        background: var(--selected-button-hover);
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.4);
        color: #631b87 
    }

    .may-be-like .container {
        position: relative;
        margin: 2rem 0 .75rem;
        padding: 1.25rem 0
    }

        .may-be-like .container::before {
            top: 0
        }

        .may-be-like .container::after {
            bottom: 0
        }

        .may-be-like .container .container-width {
            display: flex;
            gap: .9375rem;
            flex-wrap: nowrap;
            overflow: hidden
        }

            .may-be-like .container .container-width .item {
                position: relative;
                width: 16.875rem;
                height: 25rem;
                flex: 0 0 auto
            }

                .may-be-like .container .container-width .item .info {
                    column-gap: 1.25rem;
                    justify-content: center;
                    align-items: center;
                    grid-template-areas: "product-no product-no" "product-name-box product-name-box" "price product-rating" "des buttons";
                    grid-template-columns: auto 1fr
                }

                    .may-be-like .container .container-width .item .info .buttons .love {
                        position: absolute;
                        right: .625rem;
                        top: .625rem
                    }

    .product-review {
        color: #fff;
        border-radius: .3125rem;
        padding: .75rem .5rem;
        margin: .625rem 0 0
    }

        .product-review .title-box {
            grid-column: 1/-1;
            height: 2rem;
            display: grid;
            grid-template-columns: 1fr 1.5rem;
            margin-left: .5rem;
            margin-right: .5rem
        }

            .product-review .title-box h2 {
                font-size: 1.5rem;
                line-height: 2rem;
                flex: 1;
                color: #fff
            }

            .product-review .title-box a {
                display: block;
                background-repeat: no-repeat
            }

        .product-review .items {
            margin-top: 1.25rem;
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(22.5rem,1fr));
            grid-gap: 1.25rem
        }

            .product-review .items .item {
                padding: .625rem;
                border-radius: .3125rem
            }

    .footer {
        padding: 3.125rem 0;
        grid-template-columns: 30rem 6.25rem 7.5rem 6.25rem 1fr;
        display: grid
    }

        .footer .logo-box .footer-website-log {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column
        }

            .footer .logo-box .footer-website-log img {
                width: 5.5625rem;
                height: 5.5625rem
            }

            .footer .logo-box .footer-website-log h1 {
                font-size: 1.375rem;
                color: #fff;
                border-top: .0625rem solid #ffc300;
                border-bottom: .0625rem solid #ffc300
            }

        .footer .logo-box .select-box {
            margin: .625rem 0 0;
            display: flex;
            justify-content: center;
            align-items: start;
            height: 2rem
        }

            .footer .logo-box .select-box .eare {
                display: flex;
                gap: .5rem;
                align-items: center
            }

                .footer .logo-box .select-box .eare img {
                    width: 1.5rem
                }

                .footer .logo-box .select-box .eare button {
                    width: .71875rem;
                    height: .40625rem;
                    background-image: url(../images/down-icon.png);
                    background-size: .71875rem .40625rem
                }

        .footer .logo-box .social-icons {
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: start;
            flex-direction: column;
            gap: .9375rem
        }

            .footer .logo-box .social-icons .social-title {
                font-size: .75rem;
                color: #9e9e9e
            }

            .footer .logo-box .social-icons .des {
                color: #e1efff
            }

            .footer .logo-box .social-icons .social-item img {
                width: 2.5rem;
                height: 2.5rem
            }

        .footer > div > h1 {
            font-size: 1rem
        }

        .footer > div > div > a {
            padding: .3125rem 0;
            display: block;
            font-size: .75rem;
            color: var(--top-font-color)
        }

        .footer .brands .brands-box {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem
        }

            .footer .brands .brands-box img {
                width: 3.75rem;
                height: 3.75rem
            }

        .footer .brands .company-des {
            position: relative
        }

            .footer .brands .company-des .copyright {
                font-size: .75rem;
                color: #fff;
                line-height: 1.875rem
            }

            .footer .brands .company-des .des {
                font-size: .75rem;
                color: #a6a4a4;
                padding: 0 3.125rem 0 0
            }

    .breadcrumb-account {
        width: 75.25rem;
        margin: auto;
        padding: 0
    }

    .account-wrapper {
        position: relative;
        width: 75.25rem;
        margin: 3.75rem auto auto;
        display: grid;
        grid-template-columns: 20.875rem 1fr;
        column-gap: 1.75rem
    }

        .account-wrapper .left {
            min-height: 53.25rem
        }

            .account-wrapper .left .profile-logo {
                width: 8.25rem;
                height: 8.25rem;
                overflow: hidden;
                margin: 2.4375rem auto 0
            }

                .account-wrapper .left .profile-logo img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #242424
                }

                .account-wrapper .left .profile-logo icon {
                    background-image: url(../images/vip-icon.png);
                    background-repeat: no-repeat;
                    background-size: 1.4375rem 1.4375rem;
                    width: 1.4375rem;
                    height: 1.4375rem;
                    display: block;
                    position: relative;
                    top: -1.875rem;
                    left: 6.8125rem
                }

            .account-wrapper .left h1 {
                font-family: Arial;
                font-size: 1.125rem;
                letter-spacing: normal;
                color: var(--top-font-color1);
                text-align: center;
                font-weight: 700;
                line-height: 2.5rem
            }

            .account-wrapper .left h2 {
                font-family: Arial;
                font-size: .875rem;
                letter-spacing: normal;
                color: #858484;
                text-align: center;
                font-weight: 700;
                line-height: 1.25rem
            }

            .account-wrapper .left .mune {
                margin: 5.375rem 2.5625rem 0
            }

                .account-wrapper .left .mune ul li {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    height: 3.125rem;
                    gap: 1.125rem
                }

                    .account-wrapper .left .mune ul li .icon {
                        display: inline-block
                    }

                        .account-wrapper .left .mune ul li .icon svg {
                            width: 2.0625rem;
                            height: 2.0625rem;
                            fill: var(--top-font-color)
                        }
                    .account-wrapper .left .mune ul li a {
                        font-size: 1rem;
                        color: var(--top-font-color)
                    }

                    .account-wrapper .left .mune ul li.active .icon svg, .account-wrapper .left .mune ul li:hover .icon svg {
                        fill: var(--selected-button1)
                    }

    .empty-box {
        width: 12.0625rem;
        height: 12.5625rem;
        margin: 3.875rem auto 6.25rem
    }

        .empty-box > img {
            width: 100%;
            display: block
        }

        .empty-box title {
            display: block;
            margin: .75rem 0 auto;
            font-size: 1.5rem;
            line-height: 2rem;
            text-align: center;
            color: #fff
        }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        margin: 1.25rem 0;
        font-family: Arial,sans-serif
    }

    .pagination-item a, .pagination-item span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .25rem;
        text-decoration: none;
        color: #fff;
        font-size: .875rem;
        transition: .2s
    }

        .pagination-item a:hover, .pagination-item span:hover {
            background-color: #ffc300
        }

    .pagination-item.active a, .pagination-item.active span {
        background-color: #ffc300;
        color: #fff;
        font-weight: 700
    }

    .pagination-item.disabled a, .pagination-item.disabled span {
        color: #ccc;
        cursor: not-allowed
    }

        .pagination-item.disabled a:hover, .pagination-item.disabled span:hover {
            background-color: transparent
        }

    .pagination-next a, .pagination-prev a {
        padding: 0 .75rem
    }

    .pagination-ellipsis span {
        color: #999
    }

    .cart-actions {
        position: absolute;
        top: -4.375rem;
        right: 0;
        display: flex;
        justify-content: end;
        gap: .625rem;
        margin: 1.25rem .5625rem 2.5rem
    }

        .cart-actions .action-btn {
            font-size: .75rem;
            cursor: pointer;
            transition: .3s
        }

            .cart-actions .action-btn img {
                width: 2.125rem;
                height: 2.125rem;
                display: block
            }

            .cart-actions .action-btn:hover {
                transform: translateY(-.125rem)
            }

        .cart-actions .print-btn:after {
            content: "Print";
            display: block;
            font-size: .8125rem;
            color: #fff
        }

        .cart-actions .export-btn:after {
            content: "Export";
            display: block;
            font-size: .8125rem;
            color: #fff
        }

        .cart-actions .share-btn:after {
            content: "Share";
            display: block;
            font-size: .8125rem;
            color: #fff
        }

        .cart-actions .email-btn:after {
            content: "Email";
            display: block;
            font-size: .8125rem;
            color: #fff
        }

    .login-warpper {
        background-color: #1e1e1e;
        display: grid;
        justify-content: start;
        grid-template-columns: auto 1fr;
        column-gap: 1.25rem;
        height: 100%;
        width: 100%
    }

        .login-warpper .left {
            display: flex;
            height: 100vh
        }

            .login-warpper .left .left-box {
                height: calc(100vh - 1.4375rem - 1.4375rem);
                aspect-ratio: 530/978;
                margin: 1.4375rem;
                background: linear-gradient( 180deg, #641A87 0%, #641A87 4%, #ffc300 55%, #ff7a00 80%, #e60049 100% );
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center
            }

                .login-warpper .left .left-box .head {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center
                }

                    .login-warpper .left .left-box .head .logo {
                        width: 14.175rem;
                        height: 4.725rem;
                        background-image: url(../images/logo.png);
                        background-size: 14.175rem 4.725rem;
                        cursor: pointer
                    }

                    .login-warpper .left .left-box .head .title {
                        font-family: Arial;
                        font-size: 1.5rem;
                        letter-spacing: normal;
                        color: #fff;
                        font-weight: 700;
                        line-height: 2rem;
                        text-align: center;
                        margin-top: 20px;
                    }

                    .login-warpper .left .left-box .head .des {
                        font-family: Arial;
                        font-size: .75rem;
                        font-weight: 400;
                        letter-spacing: normal;
                        color: #fff;
                        text-align: center;
                        line-height: 2rem
                    }
}