@charset "UTF-8";
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-thumb{
    background-color: #1ea8a0;
}
i, html {
    margin: 0;
    padding: 0;
    line-height: normal;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
    scroll-behavior: smooth
}

* {
    border: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    line-height: normal
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    display: inline-block
}

input, textarea, select, select option, button {
    outline-style: none
}

button, input[type=submit] {
    cursor: pointer
}

input:focus {
    outline: 0
}

li, a {
    text-decoration: none;
    transition: all .3s ease-in-out;
    outline: 0
}

li {
    transition: none
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

:root {
    --green-color: "";
    --red-color: "";
    --header-color: "";
    --header2-color: "";
    --back1-color: #fff;
    --widget-color: "";
    --single-color: "";
    --back2-color: #F6F8FB;
    --back3-color: #F1F4F9;
    --back4-color: ""
}

body {
    direction: rtl;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: right;
    overflow-x: hidden;
    height: 100%;
    background: var(--back4-color)
}

body .hidden, body .hiddenSeo {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    top: 0
}

body .width {
    width: 70%
}

body .allErrorContent {
    background: var(--back1-color);
    display: grid;
    justify-content: center;
    align-items: center;
    margin-top: -4rem;
    padding-top: 6rem;
    margin-bottom: -2rem;
    padding-bottom: 2rem
}

body .allErrorContent h1 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    position: relative;
    z-index: 2
}

body .allErrorContent img {
    width: 100%;
    height: 30rem;
    object-fit: contain;
    margin-top: -2rem
}

body .allLoading {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

body .allLoading .allLoadings {
    width: 10rem;
    height: 10rem;
    padding: 1rem;
    margin: auto;
    background: white;
    display: grid;
    align-items: center;
    border-radius: .4rem;
    overflow: hidden
}

body .allLoading .allLoadings i {
    display: grid;
    justify-content: center;
    align-items: center
}

body .allLoading .allLoadings i .loading {
    width: 3rem;
    height: 3rem;
    fill: var(--green-color);
    animation: arrow-anim2 .5s ease infinite
}

body .allLoading .allLoadings p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-top: 1rem
}

body .textFloat {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    z-index: 4
}

body .textFloat span {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: .5rem;
    justify-content: center;
    align-items: center;
    background: var(--back1-color);
    box-shadow: 0 0 5px #0006;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: .8rem;
    color: red;
    font-weight: 500;
    padding: .5rem .3rem
}

body .textFloat span i {
    transform: rotate(180deg);
    display: grid;
    align-items: center;
    animation: arrow-anim3 1s ease infinite;
    margin-bottom: 0
}

body .textFloat span i svg {
    width: .9rem;
    height: .9rem;
    fill: red
}

@keyframes arrow-anim3 {
    0% {
        transform: rotate(180deg)
    }
    50% {
        transform: rotate(250deg)
    }
    to {
        transform: rotate(180deg)
    }
}

@media screen and (max-width: 1800px) {
    body .width {
        width: 85%
    }
}

@media screen and (max-width: 1600px) {
    body .width {
        width: 90%
    }
}

@media screen and (max-width: 1400px) {
    body .width {
        width: 97%
    }
}

@media screen and (max-width: 700px) {
    body .width {
        width: 95%
    }

    body .textFloat {
        display: none
    }
}

.allHeaderIndex .topFixed {
    display: grid;
    background-repeat: no-repeat;
    background-size: cover
}

.allHeaderIndex .headerTop {
    background: var(--header-color);
    box-shadow: 0 5px 5px #0000000d;
    padding: 1rem 0;
    position: relative;
    z-index: 10
}

.allHeaderIndex .headerTop .block {
    margin: auto;
    display: grid;
    grid-template-columns:auto 35rem 1fr;
    grid-gap: 1rem
}

.allHeaderIndex .headerTop .block .pic img {
    max-width: 9rem;
    height: 3rem;
    object-fit: contain
}

.allHeaderIndex .headerTop .block form {
    position: relative
}

.allHeaderIndex .headerTop .block form label {
    display: grid;
    grid-template-columns:auto 1fr auto;
    grid-gap: .5rem;
    align-items: center;
    background: var(--back2-color);
    border-radius: 10px;
    padding: .5rem;
    cursor: text;
    position: relative
}

.allHeaderIndex .headerTop .block form label input {
    width: 100%;
    font-size: .85rem;
    color: #000;
    height: 100%;
    background: transparent
}

.allHeaderIndex .headerTop .block form label select {
    padding: .3rem;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: 300;
    background: var(--back1-color);
    color: #000;
    box-shadow: 0 0 5px #0000001a
}

.allHeaderIndex .headerTop .block form label i {
    background: var(--back1-color);
    border-radius: 5px;
    box-shadow: 0 0 5px #0000001a;
    width: 2rem;
    height: 2rem;
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex .headerTop .block form label i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #6b6f80
}

.allHeaderIndex .headerTop .block form ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--back2-color);
    box-shadow: 0 10px 10px #0000001a;
    z-index: 100;
    border-radius: 5px;
    max-height: 18rem;
    overflow-y: scroll
}

.allHeaderIndex .headerTop .block form ul li a {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    grid-gap: .5rem;
    padding: .5rem
}

.allHeaderIndex .headerTop .block form ul li a .pic {
    display: grid;
    justify-content: center
}

.allHeaderIndex .headerTop .block form ul li a .pic img {
    width: 3rem;
    height: 3rem
}

.allHeaderIndex .headerTop .block form ul li a .subject h3 {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    margin-bottom: .3rem
}

.allHeaderIndex .headerTop .block form ul li a .subject h5 {
    opacity: .7;
    font-size: .7rem;
    font-weight: 300;
    color: #000
}

.allHeaderIndex .headerTop .block form ul li a .price {
    font-size: .8rem;
    font-weight: 900;
    color: var(--green-color);
    letter-spacing: .1px
}

.allHeaderIndex .headerTop .block form ul li:nth-child(2n) {
    background: var(--back1-color)
}

.allHeaderIndex .headerTop .block form .searchLoad {
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex .headerTop .block form .searchLoad .loading {
    width: 1rem;
    height: 1rem;
    fill: #000;
    animation: arrow-anim2 .5s ease infinite
}

.allHeaderIndex .headerTop .block .left {
    display: grid;
    grid-template-columns:repeat(4, auto);
    justify-content: left;
    align-items: center;
    grid-gap: 1rem
}

.allHeaderIndex .headerTop .block .left .cityChoice {
    padding: .2rem .5rem;
    border-radius: 10px;
    border: 1px solid #eee;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    cursor: pointer
}

.allHeaderIndex .headerTop .block .left .cityChoice i {
    display: grid;
    align-items: center;
    justify-content: center
}

.allHeaderIndex .headerTop .block .left .cityChoice i svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: #444
}

.allHeaderIndex .headerTop .block .left .cityChoice .leftCity .title1 {
    font-size: .75rem;
    font-weight: 500;
    color: #000
}

.allHeaderIndex .headerTop .block .left .cityChoice .leftCity .title2 {
    font-size: .75rem;
    font-weight: 300;
    color: var(--green-color)
}

.allHeaderIndex .headerTop .block .left .themeButton1 button {
    display: grid;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    box-shadow: 0 5px 10px #0003
}

.allHeaderIndex .headerTop .block .left .themeButton1 button svg {
    transition: all .3s ease-in-out;
    width: 2rem;
    height: 2rem;
    fill: #fff;
    transform: rotate(0)
}

.allHeaderIndex .headerTop .block .left .user {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: .3rem;
    justify-content: left;
    align-items: center;
    position: relative
}

.allHeaderIndex .headerTop .block .left .user .pic {
    cursor: pointer
}

.allHeaderIndex .headerTop .block .left .user .pic img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 100%
}

.allHeaderIndex .headerTop .block .left .user ul {
    background: var(--back2-color);
    position: absolute;
    top: 105%;
    left: 0;
    width: 13rem;
    border-radius: 10px;
    transition: all .3s ease-in-out;
    box-shadow: 0 5px 25px #0000001a;
    border: 1px solid #eee;
    z-index: 100;
    display: none
}

.allHeaderIndex .headerTop .block .left .user ul li {
    color: #000
}

.allHeaderIndex .headerTop .block .left .user ul li .picUser {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 5rem;
    overflow: hidden
}

.allHeaderIndex .headerTop .block .left .user ul li .picUser img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.allHeaderIndex .headerTop .block .left .user ul li .infoUser {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .2rem
}

.allHeaderIndex .headerTop .block .left .user ul li .infoUser span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 300
}

.allHeaderIndex .headerTop .block .left .user ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    padding: .7rem;
    background: transparent;
    color: #000;
    font-size: .75rem;
    font-weight: 300;
    width: 10rem
}

.allHeaderIndex .headerTop .block .left .user ul li a i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex .headerTop .block .left .user ul li a i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allHeaderIndex .headerTop .block .left .user ul li:first-child {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    background: transparent;
    grid-gap: .5rem;
    border-bottom: 1px solid #eee;
    padding: .5rem
}

.allHeaderIndex .headerTop .block .left .user ul li:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden
}

.allHeaderIndex .headerTop .block .left .login {
    border: 1px solid black;
    border-radius: 10px;
    padding: .5rem 1rem;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-size: .9rem;
    font-weight: 300
}

.allHeaderIndex .headerTop .block .left .login i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex .headerTop .block .left .login i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allHeaderIndex .headerTop .block .left .headerCart {
    position: relative;
    display: grid
}

.allHeaderIndex .headerTop .block .left .headerCart .showCartEmpty {
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    padding: 1rem
}

.allHeaderIndex .headerTop .block .left .headerCart .showCartEmpty i {
    display: grid;
    justify-content: center
}

.allHeaderIndex .headerTop .block .left .headerCart .showCartEmpty i svg {
    width: 3rem;
    height: 3rem;
    fill: var(--green-color)
}

.allHeaderIndex .headerTop .block .left .headerCart .showCartEmpty h3 {
    font-weight: 500;
    font-size: 1rem;
    color: #000;
    margin-top: .5rem;
    text-align: center
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    background: var(--back2-color);
    padding: .5rem 1rem;
    border-radius: 10px;
    grid-gap: .5rem;
    cursor: pointer
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn i svg {
    fill: #000;
    width: 1.2rem;
    height: 1.2rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn span {
    font-size: .9rem;
    color: #000;
    font-weight: 300
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn .cartCount {
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: .9rem;
    color: #000;
    background: var(--back1-color);
    box-shadow: 0 0 5px #0000001a;
    padding: .1rem .5rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart {
    background: var(--back1-color);
    border-radius: 5px;
    width: 30rem;
    box-shadow: 0 5px 25px #0000001a;
    position: absolute;
    left: 0;
    top: 130%;
    border: 1px solid #eee;
    overflow: hidden;
    z-index: 900;
    display: none
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul {
    max-height: 20rem;
    overflow-y: scroll
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li {
    position: relative;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .3rem;
    padding: 1rem;
    border-bottom: 1px solid #eee
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartPic {
    height: 6rem;
    width: 6rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartPic img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle h4 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    margin-bottom: .5rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle h4:nth-child(2) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle h4:nth-child(3) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle h4:nth-child(4) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle i {
    position: absolute;
    left: .5rem;
    top: .5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 5rem;
    box-shadow: 0 0;
    cursor: pointer;
    border: 0
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTitle i svg {
    fill: red;
    width: 1rem;
    height: 1rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTextItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .8rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li .cartText .cartTextItem .cartPrice span {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    font-weight: 900;
    font-size: 1rem;
    color: var(--green-color)
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart ul li:last-child {
    border-bottom: 0
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart .showCartBot {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem;
    align-items: center;
    background: var(--back1-color);
    padding: .5rem
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart .showCartBot a {
    background: orange;
    padding: .5rem 1rem;
    color: #fff;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300;
    text-align: center
}

.allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart .showCartBot a:nth-child(2) {
    background: var(--green-color)
}

.allHeaderIndex .headerTop .searchData {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    display: grid;
    grid-template-columns:1fr auto auto;
    align-items: center;
    height: 4rem;
    z-index: 100
}

.allHeaderIndex .headerTop .searchData button {
    background: var(--back1-color);
    display: grid;
    align-items: center
}

.allHeaderIndex .headerTop .searchData svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #000;
    margin-left: 1rem
}

.allHeaderIndex .headerTop .searchData svg:hover {
    fill: #000
}

.allHeaderIndex .headerTop .searchData i {
    padding: 1rem;
    display: grid;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #eee;
    background: white
}

.allHeaderIndex .headerTop .searchData i svg {
    margin-left: 0
}

.allHeaderIndex .headerTop .searchData input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allHeaderIndex .headerTop .categoryHeaderResponsive {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    width: 80%;
    z-index: 900;
    box-shadow: 0 1px 7px #00000040;
    overflow: scroll;
    display: none
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .title {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eee
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .title span {
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 1rem
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .title i {
    border-right: 1px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100%
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .title i svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: #000
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eee
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle a {
    color: #000;
    font-weight: 300;
    font-size: .85rem;
    padding: 0 1rem
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle i {
    border-right: 1px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100%
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle i svg {
    width: .85rem;
    height: .85rem;
    fill: #000
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsList {
    background: var(--back2-color);
    display: none
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsList li ul {
    background: var(--back1-color)
}

.allHeaderIndex .headerTop .categoryHeaderResponsive .allCats li .allCatsList li ul li {
    background: var(--back2-color);
    border-right: 1px solid #eee
}

.allHeaderIndex .headerTop .allFilterCity {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    display: none
}

.allHeaderIndex .headerTop .allFilterCity .filterCity {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .titleAddress {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .titleAddress span {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .titleAddress i {
    cursor: pointer
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .titleAddress i svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .form .item {
    margin-top: 2rem
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .form .item label {
    color: #000;
    font-weight: 300;
    font-size: .9rem;
    margin-bottom: .5rem
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .form .item select {
    border: 1px solid #eee;
    padding: 0 .5rem;
    background: var(--back1-color);
    color: #000;
    border-radius: 5px;
    font-size: .85rem;
    width: 100%;
    height: 2.5rem;
    font-weight: 300;
    transition: all .3s ease-in-out
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .form .item select:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .form .item select[name=city], .allHeaderIndex .headerTop .allFilterCity .filterCity .form #cityContainer {
    display: none
}

@media screen and (max-width: 1600px) {
    .allHeaderIndex .headerTop .allFilterCity .filterCity .form .item {
        margin-top: .5rem
    }
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .bottomAddress {
    margin-top: 1rem;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem
}

.allHeaderIndex .headerTop .allFilterCity .filterCity .bottomAddress button {
    padding: .3rem 1rem;
    background: var(--green-color);
    color: #fff;
    font-size: .9rem;
    font-weight: 300;
    border-radius: 5px
}

@media screen and (max-width: 700px) {
    .allHeaderIndex .headerTop .allFilterCity .filterCity {
        width: 98%
    }
}

.allHeaderIndex .headerBot {
    background: var(--header2-color);
    margin: auto;
    position: relative;
    z-index: 9;
    padding: 1rem;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

.allHeaderIndex .headerBot .headerList {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(5px, auto));
    justify-content: right;
    align-items: center;
    grid-gap: 1.5rem;
    transition: all .3s ease-in-out
}

.allHeaderIndex .headerBot .headerList li {
    transition: all .3s ease-in-out
}

.allHeaderIndex .headerBot .headerList li:hover .divListContainer {
    visibility: visible;
    opacity: 1
}

.allHeaderIndex .headerBot .headerList li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .1px
}

.allHeaderIndex .headerBot .headerList li a i {
    display: grid;
    justify-content: right;
    align-items: center
}

.allHeaderIndex .headerBot .headerList li a i svg {
    fill: #000;
    width: .6rem;
    height: .6rem
}

.allHeaderIndex .headerBot .headerList li span {
    cursor: pointer;
    color: #000;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .1px
}

.allHeaderIndex .headerBot .headerList li .divListContainer {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: calc(100% - 10px);
    transition: all .3s ease-in-out;
    background: var(--back3-color);
    width: 100%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 1rem;
    z-index: 990
}

.allHeaderIndex .headerBot .headerList li .divListContainer .divListsContainer {
    right: 0;
    top: calc(100% - 10px);
    width: 100%;
    transition: all .3s ease-in-out;
    background: var(--back3-color);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 990
}

.allHeaderIndex .headerBot .headerList li .divListContainer .divListsContainer .listsContainer {
    align-content: flex-start;
    align-items: baseline;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: var(--back1-color);
    box-shadow: 0 0 5px #0000000d;
    border-radius: 5px;
    padding: 1rem;
    height: 20rem
}

.allHeaderIndex .headerBot .headerList li .divListContainer .divListsContainer .listsContainer a {
    box-shadow: 0 0;
    font-weight: 300;
    font-size: .8rem;
    background: transparent;
    color: #000;
    display: grid;
    opacity: .7;
    margin-bottom: .5rem;
    width: 11rem;
    margin-left: 2rem
}

.allHeaderIndex .headerBot .headerList li .divListContainer .divListsContainer .listsContainer .active {
    display: flex;
    justify-content: right;
    gap: .5rem;
    align-items: center;
    transition: all .3s ease-in-out;
    color: #000;
    font-weight: 700;
    font-size: .9rem;
    opacity: 1
}

.allHeaderIndex .headerBot .headerList li .divListContainer .divListsContainer .listsContainer .active:before {
    width: 2px;
    height: 20px;
    background: red;
    content: ""
}

.allHeaderIndex .headerBot .headerList .linkHead {
    position: relative
}

.allHeaderIndex .headerBot .headerList .linkHead .tooltip {
    background: red;
    border-radius: 5px;
    color: #fff;
    font-size: .65rem;
    font-weight: 300;
    position: absolute;
    bottom: 100%;
    left: -10px;
    padding: 0 .3rem
}

.allHeaderIndex .headerBot .headerList .linkHead .tooltip:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    border-style: solid;
    border-width: 7px 7px 0 0;
    border-color: rgba(0, 0, 0, 0) red rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    transform: rotate(-93deg)
}

@media screen and (max-width: 800px) {
    .allHeaderIndex .topFixed {
        visibility: hidden;
        opacity: 0;
        top: -10rem;
        position: absolute
    }

    .allHeaderIndex .headerTop {
        padding: .5rem 0
    }

    .allHeaderIndex .headerTop .block {
        margin: auto;
        display: grid;
        grid-template-columns:auto auto;
        grid-gap: 1rem
    }

    .allHeaderIndex .headerTop .block .pic img {
        max-width: 5rem;
        height: 3rem
    }

    .allHeaderIndex .headerTop .block label, .allHeaderIndex .headerTop .block form {
        position: absolute;
        top: 0;
        opacity: 0;
        visibility: hidden
    }

    .allHeaderIndex .headerTop .block .left {
        grid-template-columns:auto auto auto;
        grid-gap: .5rem
    }

    .allHeaderIndex .headerTop .block .left .user {
        visibility: hidden;
        position: absolute;
        top: 0
    }

    .allHeaderIndex .headerTop .block .left .user .pic {
        cursor: pointer
    }

    .allHeaderIndex .headerTop .block .left .user .pic img {
        width: 100%;
        height: 2rem;
        object-fit: contain;
        border-radius: 100%
    }

    .allHeaderIndex .headerTop .block .left .user ul {
        background: white;
        position: absolute;
        top: 105%;
        left: 0;
        width: 13rem;
        border-radius: 10px;
        transition: all .3s ease-in-out;
        box-shadow: 0 5px 25px #0000001a;
        border: 1px solid #eee;
        z-index: 100;
        display: none
    }

    .allHeaderIndex .headerTop .block .left .user ul li {
        color: #000
    }

    .allHeaderIndex .headerTop .block .left .user ul li .picUser {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 5rem;
        overflow: hidden
    }

    .allHeaderIndex .headerTop .block .left .user ul li .picUser img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .allHeaderIndex .headerTop .block .left .user ul li .infoUser {
        display: grid;
        grid-template-columns:1fr;
        grid-gap: .2rem
    }

    .allHeaderIndex .headerTop .block .left .user ul li .infoUser span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: .75rem;
        font-weight: 300
    }

    .allHeaderIndex .headerTop .block .left .user ul li a {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: right;
        align-items: center;
        grid-gap: .5rem;
        padding: .7rem;
        background: transparent;
        color: #000;
        font-size: .75rem;
        font-weight: 300;
        width: 10rem
    }

    .allHeaderIndex .headerTop .block .left .user ul li a i {
        display: grid;
        justify-content: center;
        align-items: center
    }

    .allHeaderIndex .headerTop .block .left .user ul li a i svg {
        width: 1rem;
        height: 1rem;
        fill: #000
    }

    .allHeaderIndex .headerTop .block .left .user ul li:first-child {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: right;
        align-items: center;
        background: transparent;
        grid-gap: .5rem;
        border-bottom: 1px solid #eee;
        padding: .5rem
    }

    .allHeaderIndex .headerTop .block .left .user ul li:first-child {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden
    }

    .allHeaderIndex .headerTop .block .left .cityChoice {
        grid-gap: .3rem
    }

    .allHeaderIndex .headerTop .block .left .cityChoice i svg {
        width: .85rem;
        height: .85rem
    }

    .allHeaderIndex .headerTop .block .left .cityChoice .leftCity h4, .allHeaderIndex .headerTop .block .left .cityChoice .leftCity h5 {
        font-size: .5rem
    }

    .allHeaderIndex .headerTop .block .left .themeButton1 .theme-toggle {
        width: 2rem;
        height: 2rem
    }

    .allHeaderIndex .headerTop .block .left .themeButton1 .theme-toggle svg {
        width: 1.5rem !important;
        height: 1.5rem !important
    }

    .allHeaderIndex .headerTop .block .left .login {
        visibility: hidden;
        position: absolute;
        top: 0;
        padding: .3rem;
        color: #000;
        font-size: .65rem;
        font-weight: 300;
        grid-template-columns:auto;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        width: 5rem;
        height: 2.3rem
    }

    .allHeaderIndex .headerTop .block .left .login i {
        opacity: 0;
        visibility: hidden;
        top: 0;
        position: absolute
    }

    .allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn {
        display: grid;
        grid-template-columns:auto auto;
        padding: .5rem;
        border-radius: 5px
    }

    .allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn i svg {
        width: .9rem;
        height: .9rem
    }

    .allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn span {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        top: 0
    }

    .allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .cartShowBtn h5 {
        font-size: .7rem
    }

    .allHeaderIndex .headerTop .block .left .headerCart .headerCartItems .showCart {
        width: 21rem
    }

    .allHeaderIndex .headerBot {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        display: none
    }

    .allHeaderIndex .headerBot .headerList {
        display: grid
    }
}

.allHeader {
    display: grid
}

.allHeader .allHeaderHome .block {
    margin: auto;
    padding-top: 1rem
}

.allHeader .allHeaderHome .block .topHeader {
    display: grid;
    grid-template-columns:auto 1fr;
    justify-content: space-between;
    grid-gap: .5rem;
    align-items: center
}

.allHeader .allHeaderHome .block .topHeader .pic img {
    width: 100%;
    height: 3rem;
    object-fit: contain
}

.allHeader .allHeaderHome .block .topHeader .left {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: 1rem
}

.allHeader .allHeaderHome .block .topHeader .left .themeButton1 button {
    display: grid;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    box-shadow: 0 5px 10px #0003
}

.allHeader .allHeaderHome .block .topHeader .left .themeButton1 button svg {
    transition: all .3s ease-in-out;
    width: 2rem;
    height: 2rem;
    fill: #fff;
    transform: rotate(0)
}

.allHeader .allHeaderHome .block .topHeader .left .user {
    position: relative;
    cursor: pointer
}

.allHeader .allHeaderHome .block .topHeader .left .user .pic {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 5rem;
    overflow: hidden;
    box-shadow: 0 3px 1px -2px #00000012, 0 2px 2px #0000000a, 0 1px 5px #0000000a
}

.allHeader .allHeaderHome .block .topHeader .left .user .pic img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.allHeader .allHeaderHome .block .topHeader .left .user ul {
    background: var(--back1-color);
    position: absolute;
    top: 130%;
    left: -.5rem;
    display: grid;
    grid-template-columns:1fr;
    width: 13rem;
    border-radius: 10px;
    visibility: visible;
    opacity: 1;
    transition: all .3s ease-in-out;
    box-shadow: 0 5px 25px #0000001a;
    border: 1px solid #eee;
    z-index: 100
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li {
    color: #000
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li .picUser {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 5rem;
    overflow: hidden
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li .picUser img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li .infoUser {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .2rem
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li .infoUser span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 300
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    padding: .7rem;
    background: transparent;
    color: #000;
    font-size: .75rem;
    font-weight: 300;
    width: 10rem
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li a i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li a i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li:hover {
    background: var(--back2-color)
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li:first-child {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    background: transparent;
    grid-gap: .5rem;
    border-bottom: 1px solid #eee;
    padding: .5rem
}

.allHeader .allHeaderHome .block .topHeader .left .user ul li:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden
}

.allHeader .allHeaderHome .block .topHeader .left .loginTopHeader {
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    padding: .5rem 1rem;
    border: 1px solid white;
    border-radius: 5rem;
    cursor: pointer
}

.allHeader .allHeaderHome .block .topHeader .left .alert, .allHeader .allHeaderHome .block .topHeader .left .alert2 {
    position: relative
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alertIcon, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alertIcon {
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 5rem;
    overflow: hidden;
    box-shadow: 0 3px 1px -2px #00000012, 0 2px 2px #0000000a, 0 1px 5px #0000000a;
    background: var(--back2-color)
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alertIcon svg, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alertIcon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts {
    position: absolute;
    top: 140%;
    left: 0;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    width: 20rem;
    z-index: 100;
    display: none
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .titleAlert, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .titleAlert {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .send, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .send {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .send input, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .send input {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    background: var(--back2-color);
    padding: .3rem .5rem;
    border-radius: 5px
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .send button, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .send button {
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    padding: .3rem .5rem;
    border-radius: 5px
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .social, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .social {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(2rem, auto));
    align-items: center;
    justify-content: center;
    grid-gap: .5rem;
    margin-top: 1rem
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .social a, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .social a {
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
    justify-content: center;
    padding: .4rem .6rem;
    background: var(--back2-color);
    border-radius: 5px
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .social a i, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .social a i {
    display: grid;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all .3s ease-in-out
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts .social a i svg, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts .social a i svg {
    width: 1rem;
    height: 1rem;
    fill: #79788d
}

.allHeader .allHeaderHome .block .topHeader .left .alert .alerts p, .allHeader .allHeaderHome .block .topHeader .left .alert2 .alerts p {
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: 1rem
}

.allHeader .allHeaderHome .block .topHeader .left .alert .cartShowBtn, .allHeader .allHeaderHome .block .topHeader .left .alert2 .cartShowBtn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    font-size: .65rem;
    font-weight: 300;
    color: #fff;
    border-radius: 50%;
    background: var(--green-color);
    display: grid;
    justify-items: center;
    align-items: center
}

.allHeader .allHeaderHome .block .topHeaderRes {
    position: fixed;
    top: 0;
    visibility: hidden;
    opacity: 0
}

.allHeader .allHeaderHome .block .headerHomeContentSearch {
    position: relative;
    margin: auto;
    padding: 1.5rem 0;
    width: 50%
}

.allHeader .allHeaderHome .block .headerHomeContentSearch label {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem;
    align-items: center;
    background: var(--header-color);
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a;
    padding: .8rem;
    cursor: text;
    height: 3rem;
    position: relative
}

.allHeader .allHeaderHome .block .headerHomeContentSearch label input {
    width: 100%;
    font-size: .8rem;
    color: #6b6f80;
    height: 100%;
    background: transparent
}

.allHeader .allHeaderHome .block .headerHomeContentSearch label i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #6b6f80
}

.allHeader .allHeaderHome .block .headerHomeContentSearch label .load {
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    display: grid;
    align-items: center
}

.allHeader .allHeaderHome .block .headerHomeContentSearch label .load .loading {
    animation: arrow-anim2 .5s ease infinite
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists {
    position: absolute;
    top: auto;
    right: 0;
    left: 0;
    background: var(--back1-color);
    box-shadow: 0 10px 10px #0000001a;
    z-index: 100;
    border-radius: 5px
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    padding: .5rem
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a .pic {
    display: grid;
    justify-content: center
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a .pic img {
    width: 3rem;
    height: 3rem
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a .subject h3 {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    margin-bottom: .3rem
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a .subject h5 {
    opacity: .7;
    font-size: .7rem;
    font-weight: 300;
    color: #000
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList a .price {
    font-size: .8rem;
    font-weight: 900;
    color: var(--green-color);
    letter-spacing: .1px
}

.allHeader .allHeaderHome .block .headerHomeContentSearch .searchLists .searchList:nth-child(2n) {
    background: var(--back2-color)
}

.allHeader .allHeaderHome .block .headerLink {
    width: 70%;
    margin: auto;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem
}

.allHeader .allHeaderHome .block .headerLink ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
    align-items: center;
    justify-content: center;
    grid-gap: 1rem;
    text-align: center;
    height: 90px;
    overflow: hidden
}

.allHeader .allHeaderHome .block .headerLink ul li {
    display: grid;
    width: 80px
}

.allHeader .allHeaderHome .block .headerLink ul li a {
    font-size: .6rem;
    font-weight: 300;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allHeader .allHeaderHome .block .headerLink ul li a .pic {
    background: var(--header-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 5px;
    height: 70px;
    margin-bottom: 5px
}

.allHeader .allHeaderHome .block .headerLink ul li a .pic img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain
}

.allHeader .allHeaderHome .block .headerLink .more {
    display: grid;
    align-items: center;
    cursor: pointer;
    width: 80px;
    text-align: center;
    font-size: .7rem;
    font-weight: 300;
    color: #fff
}

.allHeader .allHeaderHome .block .headerLink .more i {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    background: white;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    height: 70px;
    margin-bottom: 5px
}

.allHeader .allHeaderHome .block .headerLink .more i svg {
    width: 2rem;
    height: 2rem;
    fill: #000;
    color: #000
}

.allHeader .allHeaderHome .block p {
    font-size: .8rem;
    font-weight: 400;
    color: #fff
}

.allHeader .allHeaderHome .moreSites {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    z-index: 999;
    overflow-y: scroll;
    display: none
}

.allHeader .allHeaderHome .moreSites .moreItems {
    background: var(--header2-color);
    padding: 1rem;
    width: 70%;
    margin: auto;
    border-radius: .3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.allHeader .allHeaderHome .moreSites .moreItems ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr));
    align-items: center;
    justify-content: center;
    grid-gap: 1rem
}

.allHeader .allHeaderHome .moreSites .moreItems ul li a {
    display: grid;
    width: 100%;
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allHeader .allHeaderHome .moreSites .moreItems ul li a .pic {
    padding: .5rem;
    border: 2px solid #eee;
    border-radius: 10px;
    margin-bottom: .5rem
}

.allHeader .allHeaderHome .moreSites .moreItems ul li a .pic img {
    width: 100%;
    height: 5rem;
    border-radius: 10px;
    object-fit: contain
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats {
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    z-index: 999
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul {
    background: var(--back1-color);
    width: 15rem;
    min-height: 100%
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li {
    margin-top: 1rem;
    padding: .5rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li span {
    color: #000;
    font-weight: 700;
    font-size: .85rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .pic img {
    width: 100%;
    height: 3rem;
    object-fit: contain
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .titleCat {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    grid-gap: 1rem;
    align-items: center
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .titleCat i {
    display: grid;
    align-items: center
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .titleCat i svg {
    width: 1rem;
    height: 1rem;
    fill: red
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .topCat {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .topCat svg {
    width: 1rem;
    height: 1rem;
    fill: red
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .topCat a {
    font-weight: 700;
    font-size: .85rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 500;
    font-size: .75rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li a i {
    display: grid;
    justify-content: right;
    align-items: center
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li a i svg {
    fill: #000;
    width: .7rem;
    height: .7rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resLang {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resLang .resLangPic {
    border-radius: 5rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 5px #f003;
    width: 2rem;
    height: 2rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resLang .resLangPic svg {
    width: 2rem;
    height: 2rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme {
    display: grid;
    align-items: end;
    justify-items: center;
    margin-top: 1rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ main, .allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ label {
    --text: white
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ main {
    --gradDark: hsl(198, 44%, 11%);
    --gradLight: hsl(198, 39%, 29%)
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input, .allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label {
    position: absolute;
    z-index: 1
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input {
    opacity: 0
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:hover + .theme-switch__label, .allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:focus + .theme-switch__label {
    background-color: #789;
    cursor: pointer
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:hover + .theme-switch__label span:after, .allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:focus + .theme-switch__label span:after {
    background-color: #d4ebf2
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label {
    transition: background-color .2s ease-in-out;
    width: 50px;
    height: 20px;
    border-radius: 50px;
    text-align: center;
    background-color: #708090;
    box-shadow: -4px 4px 15px inset #0006;
    margin-top: -.5rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label:before, .allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label:after {
    font-size: 1.5rem;
    position: absolute;
    transform: translate3d(0, -20%, 0)
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label:before {
    content: "☼";
    right: 100%;
    margin-right: 10px;
    color: orange
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label:after {
    content: "☾";
    left: 100%;
    margin-left: 10px;
    color: #789
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label span {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label span:after {
    position: absolute;
    top: calc(100% + 15px);
    left: 5px;
    width: 12px;
    height: 12px;
    content: "";
    border-radius: 50%;
    background-color: #add8e6;
    transition: transform .2s, background-color .2s;
    box-shadow: -3px 3px 8px #0006
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label {
    background-color: #789
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label:before {
    color: #789
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label:after {
    color: #40e0d0
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label span:after {
    transform: translate3d(30px, 0, 0)
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li ul {
    padding: 0;
    width: auto;
    min-height: auto
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li ul li {
    display: block;
    margin-top: 1rem;
    margin-right: .8rem;
    padding: 0
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 300;
    font-size: .7rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li ul li a i svg {
    width: .4rem;
    height: .4rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li ul li:first-child {
    padding-bottom: 0;
    border-bottom: 0;
    margin-top: 1rem
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li i svg {
    fill: #000;
    width: 1.3rem;
    height: 1.3rem;
    cursor: pointer
}

.allHeader .allHeaderHome .allHeaderHomeContentBotCats ul li:first-child {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee
}

@media screen and (max-width: 700px) {
    .allHeader .allHeaderHome .block {
        margin-bottom: 1rem
    }

    .allHeader .allHeaderHome .block .topHeader {
        display: none
    }

    .allHeader .allHeaderHome .block .topHeaderRes {
        position: relative;
        opacity: 1;
        visibility: visible;
        top: auto;
        display: grid;
        grid-template-columns:3rem 1fr auto;
        grid-gap: .5rem;
        align-items: center
    }

    .allHeader .allHeaderHome .block .topHeaderRes .justify {
        display: grid;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .allHeader .allHeaderHome .block .topHeaderRes .justify svg {
        width: 2rem;
        height: 2rem;
        fill: #fff
    }

    .allHeader .allHeaderHome .block .topHeaderRes .pic {
        display: grid;
        justify-content: center
    }

    .allHeader .allHeaderHome .block .topHeaderRes .pic img {
        width: 11rem;
        height: 3rem;
        object-fit: contain
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left {
        display: grid;
        grid-template-columns:1fr auto;
        justify-content: center;
        align-items: center;
        grid-gap: 5px
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems {
        display: grid;
        justify-content: left
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user {
        display: grid;
        justify-content: center;
        position: relative;
        cursor: pointer
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user .pic {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 5rem;
        overflow: hidden;
        box-shadow: 0 3px 1px -2px #00000012, 0 2px 2px #0000000a, 0 1px 5px #0000000a
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user .pic img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul {
        background: var(--back1-color);
        position: absolute;
        top: 130%;
        left: -.5rem;
        display: grid;
        grid-template-columns:1fr;
        width: 13rem;
        border-radius: 10px;
        visibility: visible;
        opacity: 1;
        transition: all .3s ease-in-out;
        box-shadow: 0 5px 25px #0000001a;
        border: 1px solid #eee;
        z-index: 100
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li {
        color: #000
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li .picUser {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 5rem;
        overflow: hidden
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li .picUser img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li .infoUser {
        display: grid;
        grid-template-columns:1fr;
        grid-gap: .2rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li .infoUser span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: .75rem;
        font-weight: 300
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li a {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: right;
        align-items: center;
        grid-gap: .5rem;
        padding: .7rem;
        background: transparent;
        color: #000;
        font-size: .75rem;
        font-weight: 300;
        width: 10rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li a i {
        display: grid;
        justify-content: center;
        align-items: center
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li a i svg {
        width: 1rem;
        height: 1rem;
        fill: #000
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li:hover {
        background: var(--back2-color)
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li:first-child {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: right;
        align-items: center;
        background: transparent;
        grid-gap: .5rem;
        border-bottom: 1px solid #eee;
        padding: .5rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .user ul li:first-child {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .leftItems .loginTopHeader {
        font-size: .5rem;
        font-weight: 850;
        color: #fff;
        padding: .2rem;
        border: 1px solid white;
        border-radius: 5rem;
        cursor: pointer;
        width: 5rem;
        text-align: center;
        margin-top: .5rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 {
        position: relative
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alertIcon {
        display: grid;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 5rem;
        overflow: hidden;
        box-shadow: 0 3px 1px -2px #00000012, 0 2px 2px #0000000a, 0 1px 5px #0000000a;
        background: var(--back2-color)
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alertIcon svg {
        width: 1.2rem;
        height: 1.2rem;
        fill: #000
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts {
        position: absolute;
        top: 140%;
        left: 0;
        background: var(--back1-color);
        box-shadow: 0 0 10px #0000001a;
        border-radius: 10px;
        padding: 1rem;
        width: 20rem;
        z-index: 100;
        display: none
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .titleAlert {
        font-size: .85rem;
        font-weight: 300;
        color: #000;
        margin-bottom: 1rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .send {
        display: grid;
        grid-template-columns:1fr auto;
        grid-gap: 1rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .send input {
        font-size: .85rem;
        font-weight: 300;
        color: #000;
        background: var(--back2-color);
        padding: .3rem .5rem;
        border-radius: 5px
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .send button {
        font-size: .8rem;
        font-weight: 300;
        color: #fff;
        background: var(--green-color);
        padding: .3rem .5rem;
        border-radius: 5px
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .social {
        display: grid;
        grid-template-columns:repeat(auto-fit, minmax(2rem, auto));
        align-items: center;
        justify-content: center;
        grid-gap: .5rem;
        margin-top: 1rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .social a {
        display: grid;
        grid-template-columns:1fr;
        align-items: center;
        justify-content: center;
        padding: .4rem .6rem;
        background: var(--back2-color);
        border-radius: 5px
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .social a i {
        display: grid;
        align-items: center;
        cursor: pointer;
        font-size: 1rem;
        transition: all .3s ease-in-out
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts .social a i svg {
        width: 1rem;
        height: 1rem;
        fill: #79788d
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .alerts p {
        font-size: .7rem;
        font-weight: 300;
        color: #000;
        text-align: center;
        margin-top: 1rem
    }

    .allHeader .allHeaderHome .block .topHeaderRes .left .alert2 .cartShowBtn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1rem;
        height: 1rem;
        font-size: .65rem;
        font-weight: 300;
        color: #fff;
        border-radius: 50%;
        background: var(--green-color);
        display: grid;
        justify-items: center;
        align-items: center
    }

    .allHeader .allHeaderHome .block .headerHomeContentSearch {
        width: 100%
    }

    .allHeader .allHeaderHome .block .headerLink {
        width: 95%;
        grid-gap: .5rem
    }

    .allHeader .allHeaderHome .block .headerLink ul {
        grid-template-columns:repeat(4, 1fr);
        grid-gap: .5rem;
        height: 70px
    }

    .allHeader .allHeaderHome .block .headerLink ul li {
        width: auto
    }

    .allHeader .allHeaderHome .block .headerLink ul li a .pic {
        height: 45px
    }

    .allHeader .allHeaderHome .block .headerLink ul li a .pic img {
        height: 100%
    }

    .allHeader .allHeaderHome .block .headerLink ul li a a {
        font-size: .4rem;
        width: 45px
    }

    .allHeader .allHeaderHome .block .headerLink .more {
        cursor: pointer;
        width: 45px
    }

    .allHeader .allHeaderHome .block .headerLink .more span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .allHeader .allHeaderHome .block .headerLink .more i {
        height: 45px
    }

    .allHeader .allHeaderHome .block .headerLink .more i svg {
        width: 1rem;
        height: 1rem
    }

    .allHeader .allHeaderHome .block .headerLink .more h4 {
        font-size: .45rem
    }

    .allHeader .allHeaderHome .block p {
        text-align: center
    }

    .allHeader .allHeaderHome .allLoginIndex .loginIndex {
        width: 95%;
        margin: auto
    }

    .allHeader .allHeaderHome .moreSites .moreItems {
        width: 90%
    }

    .allHeader .allHeaderHome .moreSites .moreItems ul {
        grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))
    }

    .allHeader .allHeaderHome .moreSites .moreItems ul li a {
        font-size: .7rem
    }

    .allHeader .allHeaderHome .moreSites .moreItems ul li a .pic img {
        height: 3rem
    }
}

.allHeader .topLink {
    padding: 1rem 0;
    background: var(--header2-color)
}

.allHeader .topLink .width {
    margin: auto;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allHeader .topLink .width i {
    display: grid;
    align-items: center
}

.allHeader .topLink .width i svg {
    width: 2rem;
    height: 2rem
}

.allHeader .topLink .width ul {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    grid-gap: 2rem;
    justify-content: right;
    align-items: center;
    position: relative
}

.allHeader .topLink .width ul li {
    transition: all .3s ease-in-out
}

.allHeader .topLink .width ul li:hover .divListContainer {
    visibility: visible;
    opacity: 1
}

.allHeader .topLink .width ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .1px
}

.allHeader .topLink .width ul li a i {
    display: grid;
    justify-content: right;
    align-items: center
}

.allHeader .topLink .width ul li a i svg {
    fill: #000;
    width: .6rem;
    height: .6rem
}

.allHeader .topLink .width ul li span {
    cursor: pointer;
    color: #000;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .1px
}

.allHeader .topLink .width ul li .divListContainer {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all .3s ease-in-out;
    background: var(--header2-color);
    width: 100%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 1rem;
    z-index: 990
}

.allHeader .topLink .width ul li .divListContainer .divListsContainer {
    right: 0;
    top: calc(100% - 10px);
    width: 100%;
    transition: all .3s ease-in-out;
    background: var(--back3-color);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 990
}

.allHeader .topLink .width ul li .divListContainer .divListsContainer .listsContainer {
    align-content: flex-start;
    align-items: baseline;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: var(--back1-color);
    box-shadow: 0 0 5px #0000000d;
    border-radius: 5px;
    padding: 1rem;
    height: 20rem
}

.allHeader .topLink .width ul li .divListContainer .divListsContainer .listsContainer a {
    box-shadow: 0 0;
    font-weight: 300;
    font-size: .8rem;
    background: transparent;
    color: #000;
    display: grid;
    opacity: .7;
    margin-bottom: .5rem;
    width: 11rem;
    margin-left: 2rem
}

.allHeader .topLink .width ul li .divListContainer .divListsContainer .listsContainer .active {
    display: flex;
    justify-content: right;
    gap: .5rem;
    align-items: center;
    transition: all .3s ease-in-out;
    color: #000;
    font-weight: 700;
    font-size: .9rem;
    opacity: 1
}

.allHeader .topLink .width ul li .divListContainer .divListsContainer .listsContainer .active:before {
    width: 2px;
    height: 20px;
    background: red;
    content: ""
}

@media screen and (max-width: 700px) {
    .allHeader .topLink {
        display: none
    }
}

.allFooterIndex {
    background: var(--back1-color);
    margin-top: 2rem;
    padding-top: 2rem;
    box-shadow: 0 -5px 10px #0000000d
}

.allFooterIndex .blockFooter {
    margin: auto
}

.allFooterIndex .blockFooter .topFooterIndex {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #eee
}

.allFooterIndex .blockFooter .topFooterIndex .item {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center
}

.allFooterIndex .blockFooter .topFooterIndex .item .itemPic {
    display: grid;
    justify-content: center;
    align-items: center;
    margin-left: 1rem
}

.allFooterIndex .blockFooter .topFooterIndex .item .itemPic svg {
    width: 3.5rem;
    height: 3.5rem
}

.allFooterIndex .blockFooter .topFooterIndex .item:first-child svg {
    width: 4.5rem;
    height: 4.5rem
}

.allFooterIndex .blockFooter .topFooterIndex .item .title2, .allFooterIndex .blockFooter .topFooterIndex .item .title3 {
    text-align: right;
    color: #000;
    font-weight: 700;
    font-size: 1rem
}

.allFooterIndex .blockFooter .topFooterIndex .item .title3 {
    margin-top: .5rem;
    font-size: .8rem;
    font-weight: 300
}

.allFooterIndex .blockFooter .midFooter {
    display: grid;
    grid-template-columns:1fr 2fr 1fr;
    border-bottom: 2px solid #eee
}

.allFooterIndex .blockFooter .midFooter .items {
    padding: 1rem 0
}

.allFooterIndex .blockFooter .midFooter .items .title3 {
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allFooterIndex .blockFooter .midFooter .items ul li {
    margin-top: 1rem
}

.allFooterIndex .blockFooter .midFooter .items ul li a {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    opacity: .7
}

.allFooterIndex .blockFooter .midFooter .items:last-child {
    padding-right: 1rem
}

.allFooterIndex .blockFooter .midFooter .subscribe {
    display: grid;
    justify-content: center;
    grid-template-columns:1fr;
    padding: 1rem 2rem;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee
}

.allFooterIndex .blockFooter .midFooter .subscribe .subscribeItems {
    display: grid;
    grid-template-columns:1fr
}

.allFooterIndex .blockFooter .midFooter .subscribe label {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--green-color);
    text-align: center
}

.allFooterIndex .blockFooter .midFooter .subscribe p {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    text-align: center
}

.allFooterIndex .blockFooter .midFooter .subscribe input {
    width: 100%;
    padding: 0 .5rem;
    border-radius: 5px;
    background: var(--back2-color);
    color: #000
}

.allFooterIndex .blockFooter .midFooter .subscribe .buttons {
    display: grid;
    justify-content: center;
    align-items: center
}

.allFooterIndex .blockFooter .midFooter .subscribe .buttons button {
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    border-radius: 5px;
    width: 5rem;
    padding: .3rem 0
}

.allFooterIndex .blockFooter .midFooter .trustFooter {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allFooterIndex .blockFooter .botFooter {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem 0
}

.allFooterIndex .blockFooter .botFooter .right {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .2rem;
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allFooterIndex .blockFooter .botFooter .left {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center
}

.allFooterIndex .blockFooter .botFooter .left span {
    color: #000;
    font-size: 1rem;
    opacity: .6;
    font-weight: 700
}

.allFooterIndex .blockFooter .botFooter .left .communicationFooterItem {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center
}

.allFooterIndex .blockFooter .botFooter .left .communicationFooterItem a {
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
    justify-content: center;
    padding: .6rem;
    background: #eee;
    border-radius: 5px;
    margin-right: 1rem
}

.allFooterIndex .blockFooter .botFooter .left .communicationFooterItem a i {
    display: grid;
    align-items: center
}

.allFooterIndex .blockFooter .botFooter .left .communicationFooterItem a i svg {
    width: 1rem;
    height: 1rem;
    fill: #79788d
}

@media screen and (max-width: 800px) {
    .allFooterIndex .blockFooter .topFooterIndex .item .itemPic svg {
        width: 2rem;
        height: 2rem
    }

    .allFooterIndex .blockFooter .topFooterIndex .item:first-child svg {
        width: 3rem;
        height: 3rem
    }

    .allFooterIndex .blockFooter .topFooterIndex .item .title2, .allFooterIndex .blockFooter .topFooterIndex .item .title3 {
        font-size: .8rem
    }

    .allFooterIndex .blockFooter .topFooterIndex .item .title3 {
        font-size: .7rem
    }

    .allFooterIndex .blockFooter .midFooter {
        display: block
    }

    .allFooterIndex .blockFooter .midFooter .subscribe {
        border-left: 0;
        border-right: 0
    }

    .allFooterIndex .blockFooter .midFooter .subscribe p {
        margin: 1rem 0
    }

    .allFooterIndex .blockFooter .midFooter .subscribe input {
        padding: .5rem;
        margin-bottom: 1rem
    }

    .allFooterIndex .blockFooter .botFooter {
        display: block
    }

    .allFooterIndex .blockFooter .botFooter .right {
        font-size: .6rem
    }

    .allFooterIndex .blockFooter .botFooter .left {
        margin-top: 1rem
    }

    .allFooterIndex .blockFooter .botFooter .left span {
        font-size: .6rem
    }

    .allFooterIndex .blockFooter .botFooter .left .communicationFooterItem a {
        padding: .2rem
    }

    .allFooterIndex .blockFooter .botFooter .left .communicationFooterItem a i svg {
        width: .8rem;
        height: .8rem
    }
}

.allFooterIndex .fixedTab {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden
}

.allFooterIndex .fixedTab .tabs {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    margin: auto;
    align-items: end
}

.allFooterIndex .fixedTab .tabs .rightTab, .allFooterIndex .fixedTab .tabs .leftTab {
    display: grid;
    grid-template-columns:1fr 1fr
}

.allFooterIndex .fixedTab .tabs .leftTab {
    border-top-right-radius: 30px;
    overflow: hidden;
    box-shadow: 0 -1px 10px #0000001a
}

.allFooterIndex .fixedTab .tabs .rightTab {
    border-top-left-radius: 30px;
    box-shadow: 0 -1px 10px #0000001a;
    overflow: hidden
}

.allFooterIndex .fixedTab .tabs .tab {
    height: 3rem
}

.allFooterIndex .fixedTab .tabs .tab a i {
    padding: 1rem 0;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--back1-color)
}

.allFooterIndex .fixedTab .tabs .tab a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #000
}

.allFooterIndex .fixedTab .tabs .tab .active i svg {
    fill: var(--green-color)
}

.allFooterIndex .fixedTab .tabs .tab .active a {
    color: var(--green-color)
}

.allFooterIndex .fixedTab .tabs .homeTab {
    padding: 0 1rem;
    margin-bottom: 1rem
}

.allFooterIndex .fixedTab .tabs .homeTab a i {
    background: var(--green-color);
    border-radius: 100%;
    width: 3rem;
    display: grid;
    align-items: center;
    box-shadow: 0 0 10px #0000000d
}

.allFooterIndex .fixedTab .tabs .homeTab a i svg {
    fill: #fff
}

@media screen and (max-width: 700px) {
    .allFooterIndex {
        padding-bottom: 4rem
    }

    .allFooterIndex .fixedTab {
        opacity: 1;
        visibility: visible;
        width: auto;
        height: auto;
        z-index: 4
    }
}

.allFooter {
    background: #001736;
    margin-top: 5rem;
    position: relative
}

.allFooter .shape1 {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: -1;
    left: 0;
    margin-bottom: -1px;
    transform: rotate(180deg)
}

.allFooter .shape1 svg {
    width: 100%;
    height: 2rem;
    fill: #001736
}

.allFooter .width {
    margin: auto
}

.allFooter .width .topFooter {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #333
}

.allFooter .width .topFooter .option {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.allFooter .width .topFooter .option i {
    display: grid;
    align-items: center
}

.allFooter .width .topFooter .option i svg {
    width: 2.2rem;
    height: 2.2rem;
    fill: var(--green-color)
}

.allFooter .width .topFooter .option .des {
    font-size: .8rem;
    font-weight: 300;
    color: #ffffff80
}

.allFooter .width .topFooter .option .des .desT {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .3rem
}

.allFooter .width .topFooter .option:last-child {
    border-left: 0
}

.allFooter .width .centerFooter {
    display: grid;
    grid-template-columns:1fr 2fr;
    grid-gap: 3rem;
    padding: 2rem 0
}

.allFooter .width .centerFooter .right .pic {
    margin-bottom: 1rem
}

.allFooter .width .centerFooter .right .pic img {
    width: auto;
    height: 5rem;
    object-fit: contain
}

.allFooter .width .centerFooter .right p {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

.allFooter .width .centerFooter .left {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: 1rem
}

.allFooter .width .centerFooter .left .item .itemTitle {
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    position: relative;
    margin-bottom: 1.5rem
}

.allFooter .width .centerFooter .left .item .itemTitle:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 4rem;
    height: 2px;
    background: var(--green-color);
    right: 0;
    margin-top: .5rem
}

.allFooter .width .centerFooter .left .item ul li {
    margin-top: .5rem
}

.allFooter .width .centerFooter .left .item ul li a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

.allFooter .width .centerFooter .left .item ul li a i {
    display: grid;
    align-items: center
}

.allFooter .width .centerFooter .left .item ul li a i svg {
    width: .8rem;
    height: .8rem;
    fill: #fff
}

.allFooter .width .centerFooter .left .item ul li:first-child {
    margin-top: 0
}

.allFooter .width .centerFooter .left p {
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 1rem
}

.allFooter .width .centerFooter .left label {
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden
}

.allFooter .width .centerFooter .left label input {
    padding: .5rem;
    background: white;
    color: #000;
    width: 15rem;
    font-size: 1rem;
    font-weight: 300
}

.allFooter .width .centerFooter .left label button {
    background: var(--green-color);
    font-weight: 300;
    font-size: 1rem;
    height: 100%;
    padding: .5rem 1rem;
    color: #fff
}

@media screen and (max-width: 800px) {
    .allFooter .width .topFooter {
        display: block
    }

    .allFooter .width .topFooter .option {
        padding: 1rem;
        gap: .5rem;
        border-left: 0
    }

    .allFooter .width .topFooter .option i svg {
        width: 1.5rem;
        height: 1.5rem
    }

    .allFooter .width .topFooter .option .des, .allFooter .width .topFooter .option .des .desT {
        font-size: .75rem
    }

    .allFooter .width .centerFooter {
        display: block;
        padding-bottom: 4rem
    }

    .allFooter .width .centerFooter .right {
        margin-bottom: 2rem
    }

    .allFooter .width .centerFooter .right p {
        font-size: .7rem
    }

    .allFooter .width .centerFooter .left {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem
    }

    .allFooter .width .centerFooter .left .item ul li a {
        font-size: .7rem
    }

    .allFooter .width .centerFooter .left .item ul li a i svg {
        width: .7rem;
        height: .7rem
    }

    .allFooter .width .centerFooter .left .item:first-child {
        width: 50%
    }

    .allFooter .width .centerFooter .left .item:last-child {
        margin-top: 2rem
    }

    .allFooter .width .centerFooter .left .item:nth-child(2) {
        width: 45%
    }
}

.allFooter .fixedTab {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 7;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden
}

.allFooter .fixedTab .tabs {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    margin: auto;
    align-items: end
}

.allFooter .fixedTab .tabs .rightTab, .allFooter .fixedTab .tabs .leftTab {
    display: grid;
    grid-template-columns:1fr 1fr
}

.allFooter .fixedTab .tabs .leftTab {
    border-top-right-radius: 30px;
    overflow: hidden;
    box-shadow: 0 -1px 10px #0000001a
}

.allFooter .fixedTab .tabs .rightTab {
    border-top-left-radius: 30px;
    box-shadow: 0 -1px 10px #0000001a;
    overflow: hidden
}

.allFooter .fixedTab .tabs .tab {
    height: 3rem
}

.allFooter .fixedTab .tabs .tab a i {
    padding: 1rem 0;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--back1-color)
}

.allFooter .fixedTab .tabs .tab a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #000
}

.allFooter .fixedTab .tabs .tab .active i svg {
    fill: var(--green-color)
}

.allFooter .fixedTab .tabs .tab .active a {
    color: var(--green-color)
}

.allFooter .fixedTab .tabs .homeTab {
    padding: 0 1rem;
    margin-bottom: 1rem
}

.allFooter .fixedTab .tabs .homeTab a i {
    background: var(--green-color);
    border-radius: 100%;
    width: 3rem;
    display: grid;
    align-items: center;
    box-shadow: 0 0 10px #0000000d
}

.allFooter .fixedTab .tabs .homeTab a i svg {
    fill: #fff
}

@media screen and (max-width: 700px) {
    .allFooter {
        padding-bottom: 2rem
    }

    .allFooter .fixedTab {
        opacity: 1;
        visibility: visible;
        width: auto;
        height: auto;
        z-index: 4
    }
}

.allFooterIndex3 {
    background: #153248;
    margin-top: 1rem;
    padding-top: 2rem
}

.allFooterIndex3 .topFooter {
    display: grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    margin: auto
}

.allFooterIndex3 .topFooter .container p {
    font-size: .8rem;
    font-weight: 400;
    color: #fff
}

.allFooterIndex3 .topFooter .container p:nth-child(3) {
    min-height: 65px
}

.allFooterIndex3 .topFooter .container h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1.5rem
}

.allFooterIndex3 .topFooter .container .detail {
    border: 1px solid white;
    padding: .3rem 1rem;
    border-radius: 5rem;
    font-size: .8rem;
    font-weight: 850;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.allFooterIndex3 .topFooter .container .data {
    display: grid;
    grid-template-columns:1fr 1fr;
    margin-top: 2rem;
    grid-gap: 1rem
}

.allFooterIndex3 .topFooter .container .data .item {
    border: 1px solid white;
    padding: .3rem 1rem;
    border-radius: 5rem;
    font-size: .8rem;
    font-weight: 850;
    color: #fff;
    text-align: center
}

.allFooterIndex3 .topFooter .container .titleFooter {
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid #979797;
    padding-bottom: .5rem;
    margin-bottom: 1rem
}

.allFooterIndex3 .topFooter .container ul {
    margin: 2rem 0
}

.allFooterIndex3 .topFooter .container ul li {
    font-size: .8rem;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: 1rem
}

.allFooterIndex3 .topFooter .container ul li a {
    font-size: .8rem;
    font-weight: 500;
    color: #fff
}

.allFooterIndex3 .topFooter .container .trustFooter img {
    height: 5rem
}

.allFooterIndex3 .topFooter .container .containerRights {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem
}

.allFooterIndex3 .topFooter .container:first-child {
    padding-left: 1rem;
    border-left: 1px solid #979797
}

.allFooterIndex3 .topFooter .grids ul {
    margin: 0;
    margin-top: 1rem
}

.allFooterIndex3 .topFooter .containerRes {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.allFooterIndex3 .botFooter {
    background: var(--back1-color);
    margin-top: 2rem;
    padding: .5rem 0
}

.allFooterIndex3 .botFooter .blockFooter {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    align-items: center;
    margin: auto
}

.allFooterIndex3 .botFooter .blockFooter .social {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(2rem, auto));
    align-items: center;
    justify-content: right;
    grid-gap: .5rem
}

.allFooterIndex3 .botFooter .blockFooter .social a {
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
    justify-content: center;
    padding: .4rem .6rem;
    border-radius: 5px;
    background: var(--back3-color);
    border: 1px solid #000
}

.allFooterIndex3 .botFooter .blockFooter .social a i {
    display: grid;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all .3s ease-in-out
}

.allFooterIndex3 .botFooter .blockFooter .social a i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allFooterIndex3 .botFooter .blockFooter .copyWrite {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: left
}

.allFooterIndex3 .botFooter .blockFooter .emails {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    direction: ltr
}

.allFooterIndex3 .fixedTab {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden
}

.allFooterIndex3 .fixedTab .tabs {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    margin: auto;
    align-items: end
}

.allFooterIndex3 .fixedTab .tabs .rightTab, .allFooterIndex3 .fixedTab .tabs .leftTab {
    display: grid;
    grid-template-columns:1fr 1fr
}

.allFooterIndex3 .fixedTab .tabs .leftTab {
    border-top-right-radius: 30px;
    overflow: hidden;
    box-shadow: 0 -1px 10px #0000001a
}

.allFooterIndex3 .fixedTab .tabs .rightTab {
    border-top-left-radius: 30px;
    box-shadow: 0 -1px 10px #0000001a;
    overflow: hidden
}

.allFooterIndex3 .fixedTab .tabs .tab {
    height: 3rem
}

.allFooterIndex3 .fixedTab .tabs .tab a i {
    padding: 1rem 0;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--back1-color)
}

.allFooterIndex3 .fixedTab .tabs .tab a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #000
}

.allFooterIndex3 .fixedTab .tabs .tab .active i svg {
    fill: var(--green-color)
}

.allFooterIndex3 .fixedTab .tabs .tab .active a {
    color: var(--green-color)
}

.allFooterIndex3 .fixedTab .tabs .homeTab {
    padding: 0 1rem;
    margin-bottom: 1rem
}

.allFooterIndex3 .fixedTab .tabs .homeTab a i {
    background: var(--green-color);
    border-radius: 100%;
    width: 3rem;
    display: grid;
    align-items: center;
    box-shadow: 0 0 10px #0000000d
}

.allFooterIndex3 .fixedTab .tabs .homeTab a i svg {
    fill: #fff
}

@media screen and (max-width: 700px) {
    .allFooterIndex3 .topFooter {
        grid-template-columns:1fr 1fr
    }

    .allFooterIndex3 .topFooter .container .detail, .allFooterIndex3 .topFooter .container .trustFooter {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        top: 0
    }

    .allFooterIndex3 .topFooter .container:first-child {
        grid-column: span 2/span 2;
        border-left: 0
    }

    .allFooterIndex3 .topFooter .container:first-child .data .item {
        font-size: .6rem;
        padding: .3rem
    }

    .allFooterIndex3 .topFooter .containerRes {
        position: relative;
        top: auto;
        opacity: 1;
        visibility: visible
    }

    .allFooterIndex3 .topFooter .containerRes .trustFooter img {
        height: 5rem
    }

    .allFooterIndex3 .topFooter .containerRes .detail {
        border: 1px solid white;
        padding: .3rem 1rem;
        border-radius: 5rem;
        font-size: .5rem;
        font-weight: 850;
        color: #fff;
        text-align: center;
        cursor: pointer;
        display: grid;
        margin-top: 1rem
    }

    .allFooterIndex3 .botFooter .blockFooter {
        grid-template-columns:1fr;
        grid-gap: 1rem
    }

    .allFooterIndex3 .botFooter .blockFooter .copyWrite {
        text-align: center
    }

    .allFooterIndex3 .botFooter .blockFooter .social {
        justify-content: center
    }

    .allFooterIndex3 .botFooter .blockFooter .emails {
        font-size: .7rem
    }

    .allFooterIndex3 .fixedTab {
        opacity: 1;
        visibility: visible;
        width: auto;
        height: auto;
        z-index: 4
    }
}

.allBecomeSeller {
    margin: auto;
    margin-top: 1rem
}

.allBecomeSeller .allBecomeSellerTop {
    border-radius: 10px;
    box-shadow: 0 0 20px #0000000d;
    padding: 3rem 1rem 1rem;
    background: white;
    margin-bottom: 1rem
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(2rem, auto));
    justify-content: center;
    align-items: center
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel {
    position: relative;
    height: 5px
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel svg {
    width: 2.2rem;
    height: 2.2rem
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar {
    width: 10rem;
    height: 5px;
    background: #f5f5f5
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
    width: 10rem;
    height: 5px;
    background: var(--green-color)
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircle {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    z-index: 2;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 2px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActives {
    background-color: var(--green-color);
    position: absolute;
    width: 3.6rem;
    height: 3.6rem;
    z-index: 2;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 2px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActive {
    width: 3.7rem;
    position: absolute;
    background: var(--green-color);
    height: 3.7rem;
    top: 50%;
    display: grid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    -webkit-box-align: center;
    border-radius: 50%;
    border: none;
    z-index: 4;
    box-shadow: 0 1px 4px #0003
}

@media screen and (max-width: 700px) {
    .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar, .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
        width: 5rem
    }

    .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActive, .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircle, .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActives {
        width: 2rem;
        height: 2rem
    }
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels span {
    font-size: .7rem;
    font-weight: 300;
    color: #000
}

.allBecomeSeller .allBecomeSellerTop h4, .allBecomeSeller .allBecomeSellerTop p {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    color: #000;
    margin-top: 3rem
}

.allBecomeSeller .allBecomeSellerTop p {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1px;
    margin-top: 1rem;
    color: #000
}

.allBecomeSeller .allBecomeUserInfo {
    border-radius: 10px;
    background: white;
    box-shadow: 0 0 20px #0000000d;
    padding: 1rem;
    margin-top: 1rem
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip {
    background: rgba(255, 0, 0, .1);
    border: 1px solid red;
    padding: 0 .5rem;
    border-radius: 10px;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    height: 3rem
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip i svg {
    fill: red;
    width: 1.2rem;
    height: 1.2rem;
    animation: arrow-anim 1s ease infinite;
    margin-bottom: 0
}

@keyframes arrow-anim {
    0% {
        margin-bottom: 0
    }
    10% {
        margin-bottom: .5rem
    }
    30% {
        transform: rotate(-40deg)
    }
    50% {
        transform: rotate(40deg)
    }
    60% {
        transform: rotate(-40deg)
    }
    70% {
        transform: rotate(-20deg)
    }
    80% {
        transform: rotate(0);
        margin-bottom: 1rem
    }
    to {
        margin-bottom: .5rem
    }
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip span {
    font-size: .85rem;
    font-weight: 500;
    color: red;
    height: 3rem;
    display: grid;
    align-items: center
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip p {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    height: 3rem;
    display: grid;
    align-items: center
}

.allBecomeSeller .allBecomeUserInfo .sellerType {
    margin-top: 3rem
}

.allBecomeSeller .allBecomeUserInfo .sellerType h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allBecomeSeller .allBecomeUserInfo .sellerType select {
    padding: .5rem;
    border: 1.4px solid #eee;
    border-radius: .2rem;
    width: 100%;
    background: white;
    transition: all .3s ease-in-out;
    font-size: .85rem;
    font-weight: 300;
    margin: 1rem 0;
    height: 2.8rem
}

.allBecomeSeller .allBecomeUserInfo .sellerType select:focus {
    border: 1.4px solid var(--green-color)
}

.allBecomeSeller .allBecomeUserInfo .sellerType p {
    font-size: .75rem;
    font-weight: 300;
    color: #000
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem h4 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-bottom: .5rem
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input, .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem select {
    background: white;
    padding: .5rem;
    border: 1.4px solid #eee;
    border-radius: .2rem;
    width: 100%;
    transition: all .3s ease-in-out;
    font-size: .85rem;
    font-weight: 300;
    height: 2.8rem
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input:focus, .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem select:focus {
    border: 1.4px solid var(--green-color)
}

@media screen and (max-width: 700px) {
    .allBecomeSeller .allBecomeUserInfo .personInfoItems {
        grid-template-columns:1fr
    }
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller {
    margin-top: 3rem
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller h3 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
    letter-spacing: .5px
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller .personInfoItems:nth-last-child(1):nth-last-child(1) input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.allBecomeSeller .allBecomeUserInfo .contactSeller {
    margin-top: 3rem
}

.allBecomeSeller .allBecomeUserInfo .contactSeller h3 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
    letter-spacing: .5px
}

.allBecomeSeller .buttons {
    display: grid;
    justify-content: left;
    margin-top: 1rem
}

.allBecomeSeller .buttons button {
    font-size: .85rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    padding: .3rem 1rem;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 2.2rem
}

.allBecomeSeller .buttons button .loading {
    fill: #fff;
    width: 1.2rem;
    height: 1.2rem;
    animation: arrow-anim2 .5s ease infinite
}

.allBecomeSeller .success {
    background: rgba(0, 255, 0, .1);
    color: green;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allBecomeSeller .uploadDocument {
    border-radius: 10px;
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem;
    background: white;
    margin-top: 1rem
}

.allBecomeSeller .uploadDocument h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allBecomeSeller .uploadDocument ul {
    margin-top: 1rem
}

.allBecomeSeller .uploadDocument ul li {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    position: relative;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .3rem
}

.allBecomeSeller .uploadDocument ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--green-color);
    border-radius: 5rem
}

.allBecomeSeller .uploadDocument .sendFileItem {
    background: white;
    margin: 1rem;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    box-shadow: 0 0 10px #0000000d
}

.allBecomeSeller .uploadDocument .sendFileItem .dropify-wrapper {
    border: 1px solid #eee !important
}

.allBecomeSeller .uploadDocument .sendFileItem .dropify-wrapper .file-icon:before {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    visibility: hidden !important
}

.allBecomeSeller .uploadDocument .sendFileItem .dropify-wrapper .dropify-message p {
    margin: 0;
    font-size: 1.3rem;
    font-family: irsans;
    color: #00800082
}

.allBecomeSeller .checkUploaded {
    margin-top: 1rem
}

.allBecomeSeller .checkUploaded h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allBecomeSeller .welcomeSeller {
    border-radius: 10px;
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem;
    margin-top: 1rem;
    background: white
}

.allBecomeSeller .welcomeSeller i {
    display: grid;
    align-items: center;
    justify-content: center
}

.allBecomeSeller .welcomeSeller i svg {
    width: 8rem;
    height: 8rem
}

.allBecomeSeller .welcomeSeller h2, .allBecomeSeller .welcomeSeller h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-top: 2rem
}

.allBecomeSeller .welcomeSeller h3 {
    font-weight: 500;
    font-size: 1rem;
    margin-top: 1rem
}

.allBecomeSeller .welcomeSeller p {
    color: #000;
    text-align: center;
    font-weight: 300;
    font-size: .85rem;
    margin-top: 1rem
}

.allBecomeSeller .welcomeSeller .nextButton {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(10rem, auto));
    justify-content: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allBecomeSeller .welcomeSeller .nextButton a {
    color: var(--green-color);
    text-align: center;
    font-weight: 300;
    font-size: .85rem;
    border-radius: 5px;
    padding: .5rem 1rem;
    border: 1px solid var(--green-color)
}

.allBecomeSeller .welcomeSeller .nextButton a:hover {
    background: var(--green-color);
    color: #fff
}

.allBecomeSeller table {
    background: white;
    border-radius: .3rem;
    box-shadow: 0 0 10px #0000000d;
    width: 100%;
    margin-top: 1rem
}

.allBecomeSeller table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allBecomeSeller table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allBecomeSeller table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allBecomeSeller table tr td svg {
    fill: #000;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

.allBecomeSeller table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.allBecomeSeller table tr td a {
    display: grid;
    align-items: center
}

.allBecomeSeller table tr td a svg {
    margin-left: .5rem
}

.allBecomeSeller table tr .buttons {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: .5rem
}

.allBecomeSeller table tr .buttons a {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    color: #fff;
    background: green
}

.allBecomeSeller table tr .buttons button {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    color: #fff;
    background: orange
}

.allBecomeSeller table tr .buttons button:last-child {
    background: red
}

.allBecomeSeller table tr:nth-child(2n) {
    background: #eee
}

.allIndex .indexData:nth-child(2) {
    margin-top: 0 !important
}

.allIndex .indexData .suggestIndex .title {
    margin-top: 0 !important;
    opacity: 1 !important;
    height: auto
}

.allIndex .indexData .allProductList .title .title1, .allIndex .indexData .allProductList .title a {
    transform: translate(0) !important
}

.allIndex .indexData .storyItems .storyItem img {
    width: 8rem !important;
    height: 8rem !important
}

@media screen and (max-width: 920px) {
    .allIndex .indexData .storyItems .storyItem img {
        width: 4rem !important;
        height: 4rem !important
    }
}

.allIndex .indexData .allCircleProduct .circle-container {
    transform: rotate(0) !important
}

.allIndex .indexData .bestIndex .bestItems a {
    width: 100% !important
}

@media screen and (max-width: 920px) {
    .allIndex .indexData:nth-child(4) {
        margin-top: 2rem
    }

    .allIndex .indexData:nth-child(5) {
        margin-top: 2rem
    }
}

.bestIndex {
    border: 1px solid #eee;
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem
}

.bestIndex .bestTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    opacity: .8;
    color: #000
}

.bestIndex .bestTitle svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: orange
}

.bestIndex .slider-bestIndex .owl-carousel.owl-loaded {
    display: grid !important
}

.bestIndex .slider-bestIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.bestIndex .slider-bestIndex button.owl-prev span {
    font-size: 2.5rem
}

.bestIndex .slider-bestIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.bestIndex .slider-bestIndex button.owl-next span {
    font-size: 2.5rem
}

.bestIndex .slider-bestIndex .owl-dots {
    position: absolute
}

.bestIndex .slider-bestIndex .bestItems a {
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
    display: grid;
    transition: all 1s ease-in-out;
    width: 0
}

.bestIndex .slider-bestIndex .bestItems a article {
    display: grid;
    grid-template-columns:auto auto 1fr;
    align-items: center
}

.bestIndex .slider-bestIndex .bestItems a article .pic {
    margin-left: .5rem
}

.bestIndex .slider-bestIndex .bestItems a article .pic img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain
}

.bestIndex .slider-bestIndex .bestItems a article .articleCount {
    color: #1ea8a0;
    font-size: 1.7rem;
    font-weight: 900;
    margin-left: 1rem
}

.bestIndex .slider-bestIndex .bestItems a article .title2 {
    color: #000;
    font-size: .8rem;
    opacity: .7;
    font-weight: 300;
    line-height: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.bestIndex .slider-bestIndex .bestItems a:last-child {
    border-bottom: 0
}

.allBigIndex .slider-bigIndex {
    min-height: 400px;
    box-shadow: 0 10px 10px #00000005;
    display: grid
}

.allBigIndex .slider-bigIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allBigIndex .slider-bigIndex button.owl-prev span {
    font-size: 2rem;
    background: white;
    width: 3rem;
    display: grid;
    border-radius: 5rem;
    height: 3rem;
    align-items: center
}

.allBigIndex .slider-bigIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allBigIndex .slider-bigIndex button.owl-next span {
    font-size: 2rem;
    background: white;
    width: 3rem;
    display: grid;
    border-radius: 5rem;
    height: 3rem;
    align-items: center
}

.allBigIndex .slider-bigIndex .owl-dots {
    position: absolute
}

.allBigIndex .slider-bigIndex .adsItem {
    position: relative
}

.allBigIndex .slider-bigIndex .adsItem img {
    width: 100%;
    min-height: 400px;
    object-fit: cover
}

.allBigIndex .slider-bigIndex .adsItem:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    animation: fadee2 3s infinite;
    z-index: 1
}

@media screen and (max-width: 700px) {
    .allBigIndex {
        margin-top: 0
    }

    .allBigIndex .slider-bigIndex {
        min-height: auto
    }

    .allBigIndex .slider-bigIndex button.owl-prev span, .allBigIndex .slider-bigIndex button.owl-next span {
        font-size: 1.3rem;
        width: 2rem;
        height: 2rem
    }

    .allBigIndex .slider-bigIndex .adsItem img {
        min-height: auto
    }
}

.homeTopAdvertise {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem;
    margin: auto;
    margin-top: 2rem
}

.homeTopAdvertise .advertiseSlider {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000000d
}

.homeTopAdvertise .advertiseSlider .owl-carousel.owl-loaded {
    display: grid !important
}

.homeTopAdvertise .advertiseSlider button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.homeTopAdvertise .advertiseSlider button.owl-prev span {
    font-size: 2.5rem
}

.homeTopAdvertise .advertiseSlider button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.homeTopAdvertise .advertiseSlider button.owl-next span {
    font-size: 2.5rem
}

.homeTopAdvertise .advertiseSlider .slider a img {
    width: 100%;
    min-height: 25rem;
    object-fit: cover
}

.homeTopAdvertise .advertiseSlider .owl-dots {
    position: absolute
}

.homeTopAdvertise .advertiseItems {
    display: grid;
    grid-gap: 1rem;
    width: 24rem;
    height: auto
}

.homeTopAdvertise .advertiseItems .advertiseItem {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000000d
}

.homeTopAdvertise .advertiseItems .advertiseItem img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media screen and (max-width: 920px) {
    .homeTopAdvertise {
        grid-template-columns:1fr
    }

    .homeTopAdvertise .advertiseSlider .slider a img {
        min-height: auto
    }

    .homeTopAdvertise .advertiseItems {
        width: 100%;
        height: 100%;
        grid-template-columns:1fr 1fr
    }
}

.categoryPostIndex {
    border: 1px solid #eee;
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d
}

.categoryPostIndex .owl-carousel.owl-loaded {
    display: grid !important
}

.categoryPostIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.categoryPostIndex button.owl-prev span {
    font-size: 2.5rem
}

.categoryPostIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.categoryPostIndex button.owl-next span {
    font-size: 2.5rem
}

.categoryPostIndex .owl-dots {
    position: absolute
}

.categoryPostIndex .productItem {
    padding: 1rem;
    border-left: 1px solid #eee
}

.categoryPostIndex .productItem .topProduct {
    margin-bottom: 1rem
}

.categoryPostIndex .productItem .topProduct .title2 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000
}

.categoryPostIndex .productItem .topProduct .title3 {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    opacity: .6
}

.categoryPostIndex .productItem .products ul {
    display: grid;
    grid-template-columns:1fr 1fr
}

.categoryPostIndex .productItem .products ul li {
    padding: .5rem
}

.categoryPostIndex .productItem .products ul li img {
    width: 100%;
    height: 6rem;
    object-fit: contain
}

.categoryPostIndex .productItem .products ul li:nth-child(4) {
    border-top: 1px solid #eee
}

.categoryPostIndex .productItem .products ul li:nth-child(1) {
    border-bottom: 1px solid #eee
}

.categoryPostIndex .productItem .products ul li:nth-child(2n) {
    border-right: 1px solid #eee
}

.categoryPostIndex .productItem .botProduct {
    margin-top: 1rem
}

.categoryPostIndex .productItem .botProduct a {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    justify-content: center;
    grid-gap: .5rem;
    font-size: .75rem;
    font-weight: 500;
    color: #19bfd3
}

.categoryPostIndex .productItem .botProduct a i {
    display: grid;
    justify-content: center;
    align-items: center
}

.categoryPostIndex .productItem .botProduct a i svg {
    width: .6rem;
    height: .6rem;
    fill: #19bfd3
}

.allOffProduct {
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d
}

.allOffProduct .title1 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    margin: 2rem 0
}

.allOffProduct ul {
    display: grid;
    grid-template-columns:repeat(5, 1fr)
}

.allOffProduct ul li {
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    padding: .5rem;
    transition: all .3s ease-in-out;
    position: relative
}

.allOffProduct ul li .pic {
    display: grid;
    justify-content: center
}

.allOffProduct ul li .pic img {
    width: 100%;
    height: 18rem;
    margin-top: 1rem;
    object-fit: contain
}

.allOffProduct ul li .pic .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allOffProduct ul li .pic .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allOffProduct ul li .colors {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: .5rem;
    padding: 0 .5rem
}

.allOffProduct ul li .colors .color {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    margin-bottom: .5rem;
    border: 2px solid var(--back1-color);
    box-shadow: 0 2px 4px #0003
}

.allOffProduct ul li .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allOffProduct ul li .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allOffProduct ul li .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allOffProduct ul li .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allOffProduct ul li .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allOffProduct ul li .title2 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem 0;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allOffProduct ul li .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    align-items: end;
    height: 4rem
}

.allOffProduct ul li .price .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.allOffProduct ul li .price .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allOffProduct ul li .price .off .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem
}

.allOffProduct ul li .price .off .offProduct .offProductItem {
    position: relative
}

.allOffProduct ul li .price .off .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: red;
    animation: off-anim 1s ease-in-out infinite
}

.allOffProduct ul li .price .off .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allOffProduct ul li .price .off .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    margin-bottom: 2px
}

.allOffProduct ul li .price .price1 {
    min-height: 2rem;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
    background: var(--back1-color);
    border: 1px solid var(--green-color);
    color: var(--green-color)
}

.allOffProduct ul li:hover {
    box-shadow: 0 0 10px #0000001a
}

.allOffProduct ul li:hover .pic .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allOffProduct ul li:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

.allOffProduct ul li:nth-child(5n) {
    border-left: 0
}

@media screen and (max-width: 800px) {
    .allOffProduct ul {
        grid-template-columns:1fr 1fr
    }

    .allOffProduct ul li .pic img {
        height: 8rem !important
    }

    .allOffProduct ul li:nth-child(2n) {
        border-left: 0
    }

    .allOffProduct ul li:nth-child(6n) {
        border-left: 1px solid #eee
    }
}

.allSuggestIndex {
    margin-top: 2rem;
    padding: 1rem 0;
    background: red
}

.allSuggestIndex .suggestIndex {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 2rem;
    align-items: center;
    margin: auto
}

.allSuggestIndex .suggestIndex .title {
    display: grid;
    margin-top: 8rem;
    transition: all 1.8s ease-in-out;
    opacity: 0;
    height: 0;
    overflow: hidden
}

.allSuggestIndex .suggestIndex .title img {
    width: 10rem;
    height: 100%;
    object-fit: contain
}

.allSuggestIndex .suggestIndex .title a {
    border: 1px solid var(--back1-color);
    padding: .5rem;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    margin-top: .5rem;
    min-height: auto
}

.allSuggestIndex .suggestIndex .title a:hover {
    box-shadow: 0 0
}

.allSuggestIndex .suggestIndex .owl-carousel.owl-loaded {
    display: grid !important
}

.allSuggestIndex .suggestIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSuggestIndex .suggestIndex button.owl-prev span {
    font-size: 2.5rem
}

.allSuggestIndex .suggestIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSuggestIndex .suggestIndex button.owl-next span {
    font-size: 2.5rem
}

.allSuggestIndex .suggestIndex .owl-dots {
    position: absolute
}

.allSuggestIndex .suggestIndex a {
    background: var(--back1-color);
    display: grid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    min-height: 22.5rem
}

.allSuggestIndex .suggestIndex a .pic {
    display: grid;
    justify-content: center;
    padding: 0 1rem;
    position: relative
}

.allSuggestIndex .suggestIndex a .pic img {
    margin-top: 1rem;
    width: 100%;
    height: 7rem;
    object-fit: contain;
    transition: all .3s ease-in-out
}

.allSuggestIndex .suggestIndex a .pic img:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0
}

.allSuggestIndex .suggestIndex a .pic .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allSuggestIndex .suggestIndex a .pic .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allSuggestIndex .suggestIndex a .pic .allRateProduct {
    padding: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: 0;
    position: absolute;
    top: 80%;
    right: 0;
    left: 0;
    background: white;
    box-shadow: 0 0 10px #0000001a;
    transition: all .3s ease-in-out
}

.allSuggestIndex .suggestIndex a .pic .allRateProduct .rateItem1 .rateTitle {
    font-size: .7rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: .5rem
}

.allSuggestIndex .suggestIndex a .pic .allRateProduct .rateItem1 .rateBody {
    background: var(--back3-color);
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    min-width: 3.5rem;
    padding: .3rem 0;
    text-align: center
}

.allSuggestIndex .suggestIndex a .colors {
    padding: 0 .5rem;
    position: absolute;
    bottom: 0;
    right: .5rem;
    display: flex;
    justify-content: right;
    gap: .5rem;
    transition: all .3s ease-in-out
}

.allSuggestIndex .suggestIndex a .colors .color {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    margin-bottom: .5rem;
    border: 2px solid var(--back1-color);
    box-shadow: 0 2px 4px #0003
}

.allSuggestIndex .suggestIndex a .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allSuggestIndex .suggestIndex a .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allSuggestIndex .suggestIndex a .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allSuggestIndex .suggestIndex a .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allSuggestIndex .suggestIndex a .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allSuggestIndex .suggestIndex a .title2 {
    font-size: .95rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allSuggestIndex .suggestIndex a .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    height: 3rem;
    padding: 0 1rem
}

.allSuggestIndex .suggestIndex a .price .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.allSuggestIndex .suggestIndex a .price .off s {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allSuggestIndex .suggestIndex a .price .off .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem
}

.allSuggestIndex .suggestIndex a .price .off .offProduct .offProductItem {
    position: relative
}

.allSuggestIndex .suggestIndex a .price .off .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: red;
    animation: off-anim 1s ease-in-out infinite
}

.allSuggestIndex .suggestIndex a .price .off .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allSuggestIndex .suggestIndex a .price .off .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    margin-bottom: 2px
}

.allSuggestIndex .suggestIndex a .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.allSuggestIndex .suggestIndex a .note {
    background: rgba(255, 255, 0, .1);
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem;
    display: grid;
    align-items: center
}

.allSuggestIndex .suggestIndex a .note p {
    text-align: center;
    color: #ff4500
}

.allSuggestIndex .suggestIndex a .countdown {
    text-align: center;
    direction: ltr;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    height: 4rem;
    margin-top: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.allSuggestIndex .suggestIndex a .countdown .countdown-section {
    display: inline-block;
    width: 50px
}

.allSuggestIndex .suggestIndex a .countdown .countdown-section .countdown-time {
    background-color: var(--back3-color);
    border-radius: 50%;
    color: #000;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: auto;
    width: 40px
}

.allSuggestIndex .suggestIndex a .countdown .countdown-section:last-child .countdown-time {
    background-color: var(--green-color);
    color: #fff;
    font-size: 1rem
}

.allSuggestIndex .suggestIndex a .optionDown {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    border-top: 1px solid #eee;
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--green-color);
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    height: 2.5rem;
    border-radius: 5px;
    position: relative
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #fff
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem:first-child {
    border: 2px solid var(--green-color)
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem:first-child:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem:last-child {
    justify-content: center;
    background: gray;
    width: 2.5rem
}

.allSuggestIndex .suggestIndex a .optionDown .optionItem:last-child svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allSuggestIndex .suggestIndex a .emptyProduct:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .3)
}

.allSuggestIndex .suggestIndex a .emptyProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: red;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "ناموجود";
    box-shadow: 0 0 10px #0000004d
}

.allSuggestIndex .suggestIndex a .preProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: green;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "پیش خرید";
    box-shadow: 0 0 10px #0000004d
}

@media screen and (max-width: 800px) {
    .allSuggestIndex .suggestIndex a .pic img {
        height: 8rem !important
    }

    .allSuggestIndex .suggestIndex a .title2 {
        font-size: .85rem
    }

    .allSuggestIndex .suggestIndex a .optionDown .optionItem {
        font-size: .7rem
    }

    .allSuggestIndex .suggestIndex a .optionDown .optionItem svg {
        width: .8rem;
        height: .8rem
    }

    .allSuggestIndex .suggestIndex a .optionDown .optionItem:last-child {
        width: 2rem
    }

    .allSuggestIndex .suggestIndex a .optionDown .optionItem:last-child svg {
        width: .8rem;
        height: .8rem
    }

    .allSuggestIndex .suggestIndex a .countdown .countdown-section {
        width: 40px
    }

    .allSuggestIndex .suggestIndex a .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allSuggestIndex .suggestIndex a .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allSuggestIndex .suggestIndex a:hover {
    box-shadow: 0 0 10px #0003
}

.allSuggestIndex .suggestIndex a:hover .pic img {
    opacity: 0
}

.allSuggestIndex .suggestIndex a:hover .pic img:nth-child(2) {
    opacity: 1
}

.allSuggestIndex .suggestIndex a:hover .pic .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allSuggestIndex .suggestIndex a:hover .pic .allRateProduct {
    opacity: 1;
    top: 77%
}

.allSuggestIndex .suggestIndex a:hover .colors {
    opacity: 0
}

.allSuggestIndex .suggestIndex a:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

@media screen and (max-width: 700px) {
    .allSuggestIndex .suggestIndex {
        grid-template-columns:1fr
    }

    .allSuggestIndex .suggestIndex .title {
        justify-content: center;
        margin-bottom: 1rem
    }

    .allSuggestIndex .suggestIndex a {
        min-height: auto
    }
}

.allNewsIndex {
    margin: auto;
    margin-top: 2rem
}

.allNewsIndex .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allNewsIndex .title .title1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allNewsIndex .title a {
    font-size: 1rem;
    font-weight: 300;
    color: #19bfd3
}

.allNewsIndex ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
    grid-gap: 1rem
}

.allNewsIndex ul li a {
    display: grid;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden
}

.allNewsIndex ul li a img {
    width: 100%;
    height: 15rem;
    object-fit: cover
}

.allNewsIndex ul li a .title2 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    margin: .5rem;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

@media screen and (max-width: 800px) {
    .allNewsIndex ul {
        grid-template-columns:1fr 1fr
    }
}

.advanceProduct {
    margin: auto;
    margin-top: 2rem
}

.advanceProduct .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eee
}

.advanceProduct .owl-carousel .owl-stage-outer {
    padding: 1rem 0
}

.advanceProduct .owl-carousel button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.advanceProduct .owl-carousel button.owl-prev span {
    font-size: 2.5rem
}

.advanceProduct .owl-carousel button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.advanceProduct .owl-carousel button.owl-next span {
    font-size: 2.5rem
}

.advanceProduct .owl-carousel .owl-dots {
    position: absolute
}

.advanceProduct .owl-carousel .advanceProductItem {
    background: var(--widget-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem;
    display: grid
}

.advanceProduct .owl-carousel .advanceProductItem .top {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .title2 {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    margin-bottom: .5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight p {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    line-height: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    grid-gap: 5px;
    justify-content: space-between;
    margin: .5rem 0
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .productStatus {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 5px
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .productStatus span {
    font-size: .75rem;
    font-weight: 300;
    color: #000
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .productStatus .active {
    color: var(--green-color)
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .productStatus .unActive {
    color: var(--red-color)
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .starProduct {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 5px
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceRight .advanceOptions .starProduct svg {
    width: 1rem;
    height: 1rem
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceLeft .pic {
    background: var(--back2-color);
    padding: .5rem;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-content: center
}

.advanceProduct .owl-carousel .advanceProductItem .top .advanceLeft .pic img {
    width: 10rem;
    height: 100%;
    object-fit: contain
}

.advanceProduct .owl-carousel .advanceProductItem .bot {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    margin-top: .5rem
}

.advanceProduct .owl-carousel .advanceProductItem .bot .options {
    display: grid;
    grid-template-columns:repeat(4, auto);
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    opacity: .5
}

.advanceProduct .owl-carousel .advanceProductItem .bot .options .optionItem {
    cursor: pointer
}

.advanceProduct .owl-carousel .advanceProductItem .bot .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #000
}

.advanceProduct .owl-carousel .advanceProductItem .bot .price {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    justify-content: left;
    grid-gap: .8rem
}

.advanceProduct .owl-carousel .advanceProductItem .bot .price .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.advanceProduct .owl-carousel .advanceProductItem .bot .price .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.advanceProduct .owl-carousel .advanceProductItem .bot .price .off .offData {
    font-size: .7rem;
    font-weight: 300;
    color: #fff;
    background: red;
    padding: 0 .3rem;
    border-radius: 5px;
    box-shadow: 0 0 5px #00000080
}

.advanceProduct .owl-carousel .advanceProductItem .bot .price .price1 {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    font-size: 16px;
    font-weight: 900;
    color: var(--green-color)
}

@media screen and (max-width: 700px) {
    .advanceProduct .owl-carousel .advanceProductItem .top {
        display: block
    }
}

.allProductList {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    position: relative
}

.allProductList .title {
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
    grid-gap: .5rem;
    padding: 1rem;
    text-align: center
}

.allProductList .title .title1 {
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    transform: translate(50%);
    transition: all 1s ease-in-out
}

.allProductList .title a {
    font-size: 1rem;
    font-weight: 500;
    transform: translate(-50%);
    color: #19bfd3;
    transition: all 1s ease-in-out
}

@media screen and (max-width: 800px) {
    .allProductList .title .title1, .allProductList .title a {
        transform: translate(0)
    }
}

.allProductList .owl-carousel.owl-loaded {
    display: grid !important
}

.allProductList button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allProductList button.owl-prev span {
    font-size: 2.5rem
}

.allProductList button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allProductList button.owl-next span {
    font-size: 2.5rem
}

.allProductList .owl-dots {
    position: absolute
}

.allProductList .slider-productList a {
    display: grid;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    position: relative;
    overflow: hidden;
    min-height: 22.5rem
}

.allProductList .slider-productList a .pic {
    display: grid;
    justify-content: center;
    padding: 0 1rem;
    position: relative
}

.allProductList .slider-productList a .pic img {
    width: 100%;
    height: 9rem;
    margin-top: 1rem;
    object-fit: contain;
    transition: all .3s ease-in-out
}

.allProductList .slider-productList a .pic img:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0
}

.allProductList .slider-productList a .pic .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allProductList .slider-productList a .pic .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allProductList .slider-productList a .pic .allRateProduct {
    padding: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: 0;
    position: absolute;
    top: 80%;
    right: 0;
    left: 0;
    background: white;
    box-shadow: 0 0 10px #0000001a;
    transition: all .3s ease-in-out
}

.allProductList .slider-productList a .pic .allRateProduct .rateItem1 .rateTitle {
    font-size: .7rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: .5rem
}

.allProductList .slider-productList a .pic .allRateProduct .rateItem1 .rateBody {
    background: var(--back3-color);
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    min-width: 3.5rem;
    padding: .3rem 0;
    text-align: center
}

.allProductList .slider-productList a .colors {
    padding: 0 .5rem;
    position: absolute;
    bottom: 0;
    right: .5rem;
    display: flex;
    justify-content: right;
    gap: .5rem;
    transition: all .3s ease-in-out
}

.allProductList .slider-productList a .colors .color {
    width: 1rem;
    margin-top: .5rem;
    height: 1rem;
    border-radius: 100%;
    margin-bottom: .5rem;
    border: 2px solid var(--back1-color);
    box-shadow: 0 2px 4px #0003
}

.allProductList .slider-productList a .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allProductList .slider-productList a .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allProductList .slider-productList a .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allProductList .slider-productList a .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allProductList .slider-productList a .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allProductList .slider-productList a .title2 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allProductList .slider-productList a .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    height: 3rem;
    padding: 0 1rem
}

.allProductList .slider-productList a .price .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.allProductList .slider-productList a .price .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allProductList .slider-productList a .price .off .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem
}

.allProductList .slider-productList a .price .off .offProduct .offProductItem {
    position: relative
}

.allProductList .slider-productList a .price .off .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: red;
    animation: off-anim 1s ease-in-out infinite
}

.allProductList .slider-productList a .price .off .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allProductList .slider-productList a .price .off .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    margin-bottom: 2px
}

.allProductList .slider-productList a .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.allProductList .slider-productList a .emptyProduct:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .3)
}

.allProductList .slider-productList a .emptyProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: red;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "ناموجود";
    box-shadow: 0 0 10px #0000004d
}

.allProductList .slider-productList a .note {
    background: rgba(255, 255, 0, .1);
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem;
    display: grid;
    align-items: center
}

.allProductList .slider-productList a .note p {
    text-align: center;
    color: #ff4500
}

.allProductList .slider-productList a .countdown {
    text-align: center;
    direction: ltr;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    height: 4rem;
    margin-top: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.allProductList .slider-productList a .countdown .countdown-section {
    display: inline-block;
    width: 50px
}

.allProductList .slider-productList a .countdown .countdown-section .countdown-time {
    background-color: var(--back3-color);
    border-radius: 50%;
    color: #000;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: auto;
    width: 40px
}

.allProductList .slider-productList a .countdown .countdown-section:last-child .countdown-time {
    background-color: var(--green-color);
    color: #fff;
    font-size: 1rem
}

.allProductList .slider-productList a .optionDown {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    border-top: 1px solid #eee;
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem
}

.allProductList .slider-productList a .optionDown .optionItem {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--green-color);
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    height: 2.5rem;
    border-radius: 5px;
    position: relative
}

.allProductList .slider-productList a .optionDown .optionItem svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #fff
}

.allProductList .slider-productList a .optionDown .optionItem:first-child {
    border: 2px solid var(--green-color)
}

.allProductList .slider-productList a .optionDown .optionItem:first-child:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.allProductList .slider-productList a .optionDown .optionItem:last-child {
    justify-content: center;
    background: gray;
    width: 2.5rem
}

.allProductList .slider-productList a .optionDown .optionItem:last-child svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allProductList .slider-productList a .preProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: green;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "پیش خرید";
    box-shadow: 0 0 10px #0000004d
}

.allProductList .slider-productList a:hover {
    box-shadow: 0 0 10px #0003
}

.allProductList .slider-productList a:hover .pic img {
    opacity: 0
}

.allProductList .slider-productList a:hover .pic img:nth-child(2) {
    opacity: 1
}

.allProductList .slider-productList a:hover .pic .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allProductList .slider-productList a:hover .pic .allRateProduct {
    opacity: 1;
    top: 77%
}

.allProductList .slider-productList a:hover .colors {
    opacity: 0
}

.allProductList .slider-productList a:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

@media screen and (max-width: 800px) {
    .allProductList .slider-productList a {
        min-height: auto
    }

    .allProductList .slider-productList a .pic img {
        height: 8rem !important
    }

    .allProductList .slider-productList a .pic .allRateProduct {
        opacity: 1;
        top: 84%
    }

    .allProductList .slider-productList a .title2 {
        font-size: .85rem
    }

    .allProductList .slider-productList a .optionDown .optionItem {
        font-size: .7rem
    }

    .allProductList .slider-productList a .optionDown .optionItem svg {
        width: .8rem;
        height: .8rem
    }

    .allProductList .slider-productList a .optionDown .optionItem:last-child {
        width: 2rem
    }

    .allProductList .slider-productList a .optionDown .optionItem:last-child svg {
        width: .8rem;
        height: .8rem
    }

    .allProductList .slider-productList a .countdown .countdown-section {
        width: 40px
    }

    .allProductList .slider-productList a .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allProductList .slider-productList a .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allProductList:after {
    content: "";
    top: -9px;
    left: 0;
    -webkit-transform: scaleX(.95);
    -moz-transform: scaleX(.95);
    -ms-transform: scaleX(.95);
    -o-transform: scaleX(.95);
    transform: scaleX(.95);
    background-color: var(--back1-color);
    opacity: .7;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: -1;
    position: absolute
}

.allProductList:before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    -webkit-transform: scaleX(.9);
    -moz-transform: scaleX(.9);
    -ms-transform: scaleX(.9);
    -o-transform: scaleX(.9);
    border-radius: 10px;
    transform: scaleX(.9);
    background-color: var(--back1-color);
    opacity: .3;
    width: 100%;
    height: 100%;
    z-index: -2
}

.allAdsIndex {
    margin: auto;
    margin-top: 2rem
}

.allAdsIndex .adsItems {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 2rem
}

.allAdsIndex .adsItems .adsItem {
    border-radius: 10px;
    overflow: hidden
}

.allAdsIndex .adsItems .adsItem img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media screen and (max-width: 700px) {
    .allAdsIndex .adsItems {
        grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
        grid-gap: 1rem
    }
}

.AllPopUpIndex {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    z-index: 999
}

.AllPopUpIndex .AllPopUpData {
    padding: 1rem;
    width: 35%;
    margin: auto;
    border-radius: .3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--back1-color)
}

.AllPopUpIndex .AllPopUpData .pic {
    display: grid;
    justify-content: center;
    margin-bottom: 1rem
}

.AllPopUpIndex .AllPopUpData .pic img {
    width: 100%;
    height: 5rem;
    object-fit: contain
}

.AllPopUpIndex .AllPopUpData h3 {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .5rem
}

.AllPopUpIndex .AllPopUpData p {
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.AllPopUpIndex .AllPopUpData .buttons {
    display: grid;
    justify-content: center;
    margin-top: 1rem
}

.AllPopUpIndex .AllPopUpData .buttons a {
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
    background: var(--green-color);
    color: #fff;
    padding: .2rem 1rem;
    border-radius: 5px
}

@media screen and (max-width: 920px) {
    .AllPopUpIndex .AllPopUpData {
        width: 90%
    }
}

.allSearchAdvance {
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem
}

.allSearchAdvance .titleSearch {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #000
}

.allSearchAdvance .titleSearch:before {
    content: "";
    border-radius: 5rem;
    background: var(--green-color);
    width: 30px;
    height: 10px
}

.allSearchAdvance .sectionsBox {
    border-right: 2px solid var(--green-color);
    padding-right: 1rem
}

.allSearchAdvance .sectionsBox .sectionBox {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr));
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem;
    position: relative
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    align-items: center
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem label {
    color: #000;
    font-size: .85rem;
    font-weight: 300
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem select, .allSearchAdvance .sectionsBox .sectionBox .boxItem input {
    background: var(--back2-color);
    border: 1px solid var(--back3-color);
    padding: .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem select:focus, .allSearchAdvance .sectionsBox .sectionBox .boxItem input:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    justify-content: right;
    grid-gap: 1rem;
    color: #000;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 300
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox], .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background .3s, border-color .3s, box-shadow .2s
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:after, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t) var(--d-t-e, ease), opacity var(--d-o, .2s)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:checked, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:disabled, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:disabled:checked, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:disabled + label, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:disabled + label {
        cursor: not-allowed
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:hover:not(:checked):not(:disabled), .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:focus, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch), .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:not(.switch) {
        width: 21px
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch):after, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:not(.switch):after {
        opacity: var(--o, 0)
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch):checked, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:not(.switch):checked {
        --o: 1
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox] + label, .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch) {
        border-radius: 7px
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg))
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox]:not(.switch):checked {
        --r: 43deg
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translate(var(--x, 0))
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: .6
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio] {
        border-radius: 50%
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, .7))
    }

    .allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=radio]:checked {
        --s: .5
    }
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=number] {
    border: 1px solid #DFE3E7;
    width: 3rem;
    padding: .3rem;
    color: #000;
    border-radius: .3rem;
    font-size: .7rem;
    transition: all .3s ease-in-out;
    resize: vertical
}

.allSearchAdvance .sectionsBox .sectionBox .boxItem .searchCheck input[type=number]:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allSearchAdvance .sectionsBox .sectionBox:before {
    position: absolute;
    right: -1rem;
    content: "";
    width: 10px;
    height: 2px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: var(--green-color)
}

.allSearchAdvance .buttonSearch {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    grid-gap: .5rem;
    margin-top: 2rem;
    justify-content: space-between
}

.allSearchAdvance .buttonSearch span {
    color: #000
}

.allSearchAdvance .buttonSearch button {
    background: var(--green-color);
    padding: .5rem 1rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 300;
    border-radius: 5px
}

.allSearchAdvance .searchProducts {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px dashed #eee;
    display: none
}

.allSearchAdvance .searchProducts .titleResult {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 1rem
}

.allSearchAdvance .searchProducts .productLists {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));
    grid-gap: 1rem
}

.allSearchAdvance .searchProducts .productLists .productList a {
    background: var(--back1-color);
    transition: all .3s ease-in-out;
    display: grid;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    position: relative;
    overflow: hidden
}

.allSearchAdvance .searchProducts .productLists .productList a .specialSell {
    position: absolute;
    top: 1rem;
    right: 1rem
}

.allSearchAdvance .searchProducts .productLists .productList a .pic {
    display: grid;
    justify-content: center
}

.allSearchAdvance .searchProducts .productLists .productList a .pic img {
    width: 100%;
    height: 12rem;
    object-fit: contain
}

.allSearchAdvance .searchProducts .productLists .productList a .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allSearchAdvance .searchProducts .productLists .productList a .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allSearchAdvance .searchProducts .productLists .productList a .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allSearchAdvance .searchProducts .productLists .productList a .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allSearchAdvance .searchProducts .productLists .productList a .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allSearchAdvance .searchProducts .productLists .productList a .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allSearchAdvance .searchProducts .productLists .productList a .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allSearchAdvance .searchProducts .productLists .productList a .details {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(2rem, 1fr));
    align-items: center;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #eee;
    padding-bottom: .5rem
}

.allSearchAdvance .searchProducts .productLists .productList a .details .detailItem {
    display: grid;
    justify-content: center
}

.allSearchAdvance .searchProducts .productLists .productList a .details .detailItem span {
    background: var(--back2-color);
    border-radius: 5px;
    width: 2rem;
    height: 2rem;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 500;
    color: #000
}

.allSearchAdvance .searchProducts .productLists .productList a .details .detailItem h4 {
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    margin-top: .3rem;
    text-align: center
}

.allSearchAdvance .searchProducts .productLists .productList a h3 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allSearchAdvance .searchProducts .productLists .productList a .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    height: 3rem;
    padding: 0 1rem
}

.allSearchAdvance .searchProducts .productLists .productList a .price s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allSearchAdvance .searchProducts .productLists .productList a .price h5 {
    font-size: 16px;
    font-weight: 900;
    color: #000
}

.allSearchAdvance .searchProducts .productLists .productList a .note {
    padding: .5rem;
    background: rgba(255, 255, 0, .1);
    position: relative;
    margin: 1rem 0;
    height: 2.5rem;
    display: grid;
    align-items: center
}

.allSearchAdvance .searchProducts .productLists .productList a .note h4 {
    position: absolute;
    animation: note-anim 6s ease infinite;
    margin-bottom: 0;
    display: grid;
    width: 100%;
    color: #ff4500
}

@keyframes note-anim {
    0% {
        right: 100%
    }
    to {
        right: -100%
    }
}

@media screen and (max-width: 800px) {
    .allSearchAdvance .searchProducts .productLists .productList a .details .detailItem span {
        width: 1.5rem;
        height: 1.5rem;
        font-size: .7rem
    }

    .allSearchAdvance .searchProducts .productLists .productList a .details .detailItem h4 {
        font-size: .6rem
    }
}

.allSearchAdvance .searchProducts .productLists .productList a:hover {
    box-shadow: 0 0 10px #00000026
}

.allSearchAdvance .searchProducts .productLists .productList a:hover .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allSearchAdvance .searchProducts .productLists .productList a:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

@media screen and (max-width: 800px) {
    .allSearchAdvance .searchProducts .productLists {
        grid-template-columns:1fr 1fr
    }

    .allSearchAdvance .searchProducts .productLists .productList a .pic img {
        height: 9rem
    }

    .allSearchAdvance .searchProducts .productLists .productList a .options, .allSearchAdvance .searchProducts .productLists .productList a .details, .allSearchAdvance .searchProducts .productLists .productList a .note {
        position: absolute;
        top: 0;
        opacity: 0;
        visibility: hidden
    }

    .allSearchAdvance .searchProducts .productLists .productList a h3 {
        font-size: .85rem;
        font-weight: 300;
        color: #000;
        line-height: 1.7rem;
        text-align: right;
        margin: .8rem .5rem;
        height: 3.2rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis
    }

    .allSearchAdvance .searchProducts .productLists .productList a .price {
        display: grid;
        grid-template-columns:1fr;
        text-align: left;
        height: 3rem;
        padding: 0 1rem
    }

    .allSearchAdvance .searchProducts .productLists .productList a .price s {
        font-size: .8rem;
        font-weight: 500;
        color: #000;
        opacity: .6
    }

    .allSearchAdvance .searchProducts .productLists .productList a .price h5 {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: left;
        align-items: center;
        grid-gap: .5rem;
        font-size: 16px;
        font-weight: 900;
        color: #000
    }

    .allSearchAdvance .searchProducts .productLists .productList a .price h5:after {
        content: "︎";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        letter-spacing: normal;
        font-family: digikala;
        font-size: 1.1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        text-decoration: none;
        text-transform: none;
        line-height: 1;
        box-sizing: inherit
    }
}

.sellerIndex {
    margin: auto;
    margin-top: 2rem;
    background: var(--widget-color);
    padding: 1rem 0;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a
}

.sellerIndex h3 {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(to right, #000 20%, var(--green-color) 40%, var(--green-color) 60%, #000 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    animation: shine 1s linear infinite
}

.sellerIndex p {
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    color: #000
}

.sellerIndex .slider-sellers {
    margin-top: 1rem
}

.sellerIndex .slider-sellers .owl-stage-outer {
    padding: 0 1rem
}

.sellerIndex .slider-sellers button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.sellerIndex .slider-sellers button.owl-prev span {
    font-size: 2.5rem
}

.sellerIndex .slider-sellers button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.sellerIndex .slider-sellers button.owl-next span {
    font-size: 2.5rem
}

.sellerIndex .slider-sellers .owl-dots {
    position: absolute
}

.sellerIndex .slider-sellers .sellerIndexItem {
    padding: .5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    margin: .5rem 0;
    background: var(--back1-color)
}

.sellerIndex .slider-sellers .sellerIndexItem .right {
    position: relative
}

.sellerIndex .slider-sellers .sellerIndexItem .right img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%
}

.sellerIndex .slider-sellers .sellerIndexItem .right span {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--green-color);
    border-radius: 50%;
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8rem;
    font-weight: 300;
    display: grid;
    align-items: center;
    justify-content: center
}

.sellerIndex .slider-sellers .sellerIndexItem .left h4 {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.sellerIndex .slider-sellers .sellerIndexItem .left h5 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    margin-top: .5rem
}

@media screen and (max-width: 800px) {
    .sellerIndex .slider-sellers article {
        margin: 0 1rem
    }

    .sellerIndex .slider-sellers .owl-stage-outer {
        padding: 0
    }
}

.momentProduct {
    display: grid;
    grid-template-columns:1fr 17rem;
    grid-gap: 1rem;
    margin: auto;
    margin-top: 2rem
}

.momentProduct .rightMoment {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem
}

.momentProduct .rightMoment .rightMomentTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000
}

.momentProduct .rightMoment .slider-moment {
    margin-top: 1rem
}

.momentProduct .rightMoment .slider-moment .owl-carousel.owl-loaded {
    display: grid !important
}

.momentProduct .rightMoment .slider-moment button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.momentProduct .rightMoment .slider-moment button.owl-prev span {
    font-size: 2.5rem;
    padding: 1rem;
    background: white;
    height: 3rem;
    display: grid;
    align-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px #0003
}

.momentProduct .rightMoment .slider-moment button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.momentProduct .rightMoment .slider-moment button.owl-next span {
    font-size: 2.5rem;
    padding: 1rem;
    background: white;
    height: 3rem;
    display: grid;
    align-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px #0003
}

.momentProduct .rightMoment .slider-moment .owl-dots {
    position: absolute
}

.momentProduct .rightMoment .slider-moment a {
    display: grid;
    background: linear-gradient(to left, var(--back2-color), #eee);
    padding: .7rem;
    border-radius: 10px;
    overflow: hidden
}

.momentProduct .rightMoment .slider-moment a article {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    background: var(--back1-color);
    border-radius: 10px;
    overflow: hidden;
    padding: .7rem
}

.momentProduct .rightMoment .slider-moment a article .pic {
    padding: .7rem;
    background: var(--back2-color);
    border-radius: 5px
}

.momentProduct .rightMoment .slider-moment a article .pic .picBlock {
    padding: .5rem 0;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.momentProduct .rightMoment .slider-moment a article .pic .picBlock img {
    width: 15rem;
    height: 15rem;
    object-fit: contain
}

.momentProduct .rightMoment .slider-moment a article .pic .picBlock .colors {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.momentProduct .rightMoment .slider-moment a article .pic .picBlock .colors .color {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    border: 2px solid var(--back1-color);
    box-shadow: 0 2px 4px #0003;
    margin-left: 1rem
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .title2 {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .title2 span {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    grid-gap: .7rem;
    align-items: center;
    background: rgba(60, 214, 1, .1);
    padding: .5rem;
    border-radius: 5px;
    font-size: .85rem;
    font-weight: 300
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .title2 span svg {
    width: 1rem;
    height: 1rem;
    fill: green
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .starProduct {
    display: grid;
    grid-template-columns:auto 1fr;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .starProduct svg {
    width: 1rem;
    height: 1rem
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .starProduct span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .price {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin: 1.5rem 0
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .price s {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .ability h4 {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .ability ul {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: .5rem;
    max-height: 10rem;
    overflow: hidden
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .ability ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    margin-top: .5rem;
    opacity: .7
}

.momentProduct .rightMoment .slider-moment a article .leftProduct .ability ul li:before {
    content: "";
    width: .8rem;
    height: .8rem;
    background: #ddd;
    border: 2px solid var(--green-color);
    border-radius: 50%;
    margin-left: .3rem
}

.momentProduct .leftMoment {
    padding: 1rem;
    border-radius: 10px;
    background: #3B4359
}

.momentProduct .leftMoment .title1 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem
}

.momentProduct .leftMoment .title1 svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff;
    animation: timeAnim 2.5s linear infinite
}

@-webkit-keyframes timeAnim {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes timeAnim {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.momentProduct .leftMoment .slider-moment2 {
    padding: 1rem;
    background: var(--back1-color);
    border-radius: 10px
}

.momentProduct .leftMoment .slider-moment2 .owl-carousel.owl-loaded {
    display: grid !important
}

.momentProduct .leftMoment .slider-moment2 button.owl-prev {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden
}

.momentProduct .leftMoment .slider-moment2 button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden
}

.momentProduct .leftMoment .slider-moment2 .owl-dots {
    position: absolute;
    opacity: 0;
    visibility: hidden
}

.momentProduct .leftMoment .slider-moment2 a {
    transform: rotate(50deg)
}

.momentProduct .leftMoment .slider-moment2 a .timer {
    margin-bottom: 1rem;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    height: 5px
}

.momentProduct .leftMoment .slider-moment2 a .timer:before {
    height: 5px;
    background: var(--back2-color);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    box-sizing: inherit
}

.momentProduct .leftMoment .slider-moment2 a .timer:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: -webkit-gradient(linear, left top, right top, from(var(--back2-color)), to(rgb(255, 0, 0)));
    background: linear-gradient(90deg, #f5f5f5, rgb(255, 0, 0));
    content: "";
    transition: all 11s ease-in-out;
    box-shadow: 0 0 5px #ff00001a
}

.momentProduct .leftMoment .slider-moment2 a .momentPic {
    transition: all .5s ease-in-out;
    transform: rotate(20deg)
}

.momentProduct .leftMoment .slider-moment2 a .momentPic img {
    width: 100%;
    height: 10rem;
    object-fit: contain
}

.momentProduct .leftMoment .slider-moment2 a .title2 {
    font-size: .9rem;
    font-weight: 300;
    text-align: center;
    color: #000;
    margin: 1rem 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.momentProduct .leftMoment .slider-moment2 a .price1 {
    display: grid;
    transition: all 1s ease-in-out;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    letter-spacing: .1px;
    font-size: 1.1rem;
    font-weight: 900;
    background: var(--back3-color);
    padding: .3rem 1rem;
    border-radius: 5px;
    color: #000
}

.momentProduct .leftMoment .slider-moment2 .owl-item.active .timer:after {
    width: 100%
}

.momentProduct .leftMoment .slider-moment2 .owl-item.active a .momentPic {
    transform: rotate(0)
}

@media screen and (max-width: 800px) {
    .momentProduct {
        display: block
    }

    .momentProduct .rightMoment {
        padding: .5rem;
        margin-bottom: 1rem
    }

    .momentProduct .rightMoment .rightMomentTitle {
        font-size: 1.2rem
    }

    .momentProduct .rightMoment .slider-moment a {
        padding: .5rem
    }

    .momentProduct .rightMoment .slider-moment a article {
        grid-template-columns:1fr;
        padding: .5rem
    }

    .momentProduct .rightMoment .slider-moment a article .pic {
        padding: .5rem
    }

    .momentProduct .rightMoment .slider-moment a article .pic .picBlock img {
        width: 100%;
        height: 15rem;
        object-fit: contain
    }

    .momentProduct .rightMoment .slider-moment a article .leftProduct .title2 {
        display: block;
        font-size: 1rem
    }

    .momentProduct .rightMoment .slider-moment a article .leftProduct .title2 span {
        margin-top: 1rem
    }

    .momentProduct .rightMoment .slider-moment a article .leftProduct .price {
        grid-template-columns:1fr auto
    }

    .momentProduct .rightMoment .slider-moment a article .leftProduct .ability ul {
        grid-template-columns:1fr
    }
}

.collectionIndex {
    margin: auto;
    margin-top: 2rem
}

.collectionIndex .collectionTitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .5rem
}

.collectionIndex .owl-carousel.owl-loaded {
    display: grid !important
}

.collectionIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.collectionIndex button.owl-prev span {
    font-size: 2.5rem
}

.collectionIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.collectionIndex button.owl-next span {
    font-size: 2.5rem
}

.collectionIndex .owl-dots {
    position: absolute
}

.collectionIndex .owl-stage-outer {
    padding: .5rem
}

.collectionIndex .collectionItems {
    background: var(--back1-color);
    border-radius: 15px;
    overflow: hidden;
    padding: 1rem;
    box-shadow: 0 0 10px #0000001a
}

.collectionIndex .collectionItems .topCollect {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 1rem
}

.collectionIndex .collectionItems .collectProducts {
    display: flex
}

.collectionIndex .collectionItems .collectProducts a {
    display: flex;
    flex-wrap: wrap
}

.collectionIndex .collectionItems .collectProducts a .pic {
    display: grid;
    justify-content: center
}

.collectionIndex .collectionItems .collectProducts a .pic img {
    width: 100%;
    height: 10rem;
    object-fit: contain
}

.collectionIndex .collectionItems .collectProducts a h4 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.collectionIndex .collectionItems .collectProducts a:last-child {
    margin-right: .5rem
}

.collectionIndex .collectionItems .collectProducts a:first-child {
    margin-left: .5rem
}

.collectionIndex .collectionItems .botCollect {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    margin-top: 2rem
}

.collectionIndex .collectionItems .botCollect h5 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--green-color);
    opacity: .7
}

.collectionIndex .collectionItems .botCollect a {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    display: flex;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem
}

.collectionIndex .collectionItems .botCollect a svg {
    width: .8rem;
    height: .8rem;
    fill: #000
}

.allCircleProduct {
    margin: 2rem auto;
    padding: 1rem 3rem 1rem 1rem;
    background: var(--widget-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a
}

.allCircleProduct .container {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 2rem;
    align-items: center
}

.allCircleProduct .circle-container {
    position: relative;
    width: 20em;
    height: 20em;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0;
    border: solid 2px var(--green-color);
    transition: all 1s ease-in-out;
    transform: rotate(90deg)
}

.allCircleProduct .circle-container > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2em
}

.allCircleProduct .circle-container > *:nth-of-type(1) {
    -moz-transform: rotate(0deg) translate(9.5em) rotate(0deg);
    -ms-transform: rotate(0deg) translate(9.5em) rotate(0deg);
    -webkit-transform: rotate(0deg) translate(9.5em) rotate(0deg);
    transform: rotate(0) translate(9.5em) rotate(0)
}

.allCircleProduct .circle-container > *:nth-of-type(2) {
    -moz-transform: rotate(45deg) translate(9.5em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(9.5em) rotate(-45deg);
    -webkit-transform: rotate(45deg) translate(9.5em) rotate(-45deg);
    transform: rotate(45deg) translate(9.5em) rotate(-45deg)
}

.allCircleProduct .circle-container > *:nth-of-type(3) {
    -moz-transform: rotate(90deg) translate(9.5em) rotate(-90deg);
    -ms-transform: rotate(90deg) translate(9.5em) rotate(-90deg);
    -webkit-transform: rotate(90deg) translate(9.5em) rotate(-90deg);
    transform: rotate(90deg) translate(9.5em) rotate(-90deg)
}

.allCircleProduct .circle-container > *:nth-of-type(4) {
    -moz-transform: rotate(135deg) translate(9.5em) rotate(-135deg);
    -ms-transform: rotate(135deg) translate(9.5em) rotate(-135deg);
    -webkit-transform: rotate(135deg) translate(9.5em) rotate(-135deg);
    transform: rotate(135deg) translate(9.5em) rotate(-135deg)
}

.allCircleProduct .circle-container > *:nth-of-type(5) {
    -moz-transform: rotate(180deg) translate(9.5em) rotate(-180deg);
    -ms-transform: rotate(180deg) translate(109.5em) rotate(-180deg);
    -webkit-transform: rotate(180deg) translate(9.5em) rotate(-180deg);
    transform: rotate(180deg) translate(9.5em) rotate(-180deg)
}

.allCircleProduct .circle-container > *:nth-of-type(6) {
    -moz-transform: rotate(225deg) translate(9.5em) rotate(-225deg);
    -ms-transform: rotate(225deg) translate(9.5em) rotate(-225deg);
    -webkit-transform: rotate(225deg) translate(9.5em) rotate(-225deg);
    transform: rotate(225deg) translate(9.5em) rotate(-225deg)
}

.allCircleProduct .circle-container > *:nth-of-type(7) {
    -moz-transform: rotate(270deg) translate(9.5em) rotate(-270deg);
    -ms-transform: rotate(270deg) translate(9.5em) rotate(-270deg);
    -webkit-transform: rotate(270deg) translate(9.5em) rotate(-270deg);
    transform: rotate(270deg) translate(9.5em) rotate(-270deg)
}

.allCircleProduct .circle-container > *:nth-of-type(8) {
    -moz-transform: rotate(315deg) translate(9.5em) rotate(-315deg);
    -ms-transform: rotate(315deg) translate(9.5em) rotate(-315deg);
    -webkit-transform: rotate(315deg) translate(9.5em) rotate(-315deg);
    transform: rotate(315deg) translate(9.5em) rotate(-315deg)
}

.allCircleProduct .circle-container a {
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--green-color);
    background: var(--back2-color);
    height: 64px;
    width: 64px;
    font-size: 250%;
    overflow: hidden
}

.allCircleProduct .circle-container i {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%
}

.allCircleProduct .circle-container .active a {
    background: linear-gradient(to right, green, #54ff54)
}

.allCircleProduct .circle-container:before {
    content: "دسته بندی";
    position: absolute;
    z-index: 1;
    top: 50%;
    text-align: center;
    width: 70%;
    font-size: 27px;
    margin: -10px auto 0;
    left: 0;
    right: 0;
    line-height: 1;
    display: block;
    color: #000;
    font-weight: 300
}

.allCircleProduct .services-container li {
    display: none
}

.allCircleProduct .services-container li.active {
    display: block
}

.allCircleProduct .services-container li .service-item .titleCat {
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 1rem
}

.allCircleProduct .services-container li .service-item .containerItems {
    display: grid;
    grid-template-columns:repeat(3, 1fr)
}

.allCircleProduct .services-container li .service-item .containerItems a {
    display: grid;
    border: 1px solid #eee;
    border-right: 0;
    position: relative;
    overflow: hidden;
    min-height: 22.5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .pic {
    position: relative;
    display: grid;
    justify-content: center;
    padding: 0 1rem
}

.allCircleProduct .services-container li .service-item .containerItems a .pic img {
    margin-top: 1rem;
    width: 100%;
    height: 16rem;
    object-fit: contain;
    transition: all .3s ease-in-out
}

.allCircleProduct .services-container li .service-item .containerItems a .pic img:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0
}

.allCircleProduct .services-container li .service-item .containerItems a .pic .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allCircleProduct .services-container li .service-item .containerItems a .pic .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .pic .allRateProduct {
    padding: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: 0;
    position: absolute;
    top: 80%;
    right: 0;
    left: 0;
    background: white;
    box-shadow: 0 0 10px #0000001a;
    transition: all .3s ease-in-out
}

.allCircleProduct .services-container li .service-item .containerItems a .pic .allRateProduct .rateItem1 .rateTitle {
    font-size: .7rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: .5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .pic .allRateProduct .rateItem1 .rateBody {
    background: var(--back3-color);
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    min-width: 3.5rem;
    padding: .3rem 0;
    text-align: center
}

.allCircleProduct .services-container li .service-item .containerItems a .colors {
    padding: 0 .5rem;
    position: absolute;
    bottom: 0;
    right: .5rem;
    display: flex;
    justify-content: right;
    gap: .5rem;
    transition: all .3s ease-in-out
}

.allCircleProduct .services-container li .service-item .containerItems a .colors .color {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    margin-bottom: .5rem;
    border: 2px solid var(--back1-color);
    box-shadow: 0 2px 4px #0003
}

.allCircleProduct .services-container li .service-item .containerItems a .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allCircleProduct .services-container li .service-item .containerItems a .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allCircleProduct .services-container li .service-item .containerItems a .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allCircleProduct .services-container li .service-item .containerItems a .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allCircleProduct .services-container li .service-item .containerItems a .title2 {
    font-size: .95rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allCircleProduct .services-container li .service-item .containerItems a .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    height: 3rem;
    padding: 0 1rem
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off s {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off .offProduct .offProductItem {
    position: relative
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: red;
    animation: off-anim 1s ease-in-out infinite
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allCircleProduct .services-container li .service-item .containerItems a .price .off .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    margin-bottom: 2px
}

.allCircleProduct .services-container li .service-item .containerItems a .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.allCircleProduct .services-container li .service-item .containerItems a .note {
    background: rgba(255, 255, 0, .1);
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem;
    display: grid;
    align-items: center
}

.allCircleProduct .services-container li .service-item .containerItems a .note h4 {
    text-align: center;
    color: #ff4500
}

.allCircleProduct .services-container li .service-item .containerItems a .countdown {
    text-align: center;
    direction: ltr;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    height: 4rem;
    margin-top: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section {
    display: inline-block;
    width: 50px
}

.allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section .countdown-time {
    background-color: var(--back3-color);
    border-radius: 50%;
    color: #000;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: auto;
    width: 40px
}

.allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section:last-child .countdown-time {
    background-color: var(--green-color);
    color: #fff;
    font-size: 1rem
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    border-top: 1px solid #eee;
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--green-color);
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    height: 2.5rem;
    border-radius: 5px;
    position: relative
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #fff
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:first-child {
    border: 2px solid var(--green-color)
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:first-child:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:last-child {
    justify-content: center;
    background: gray;
    width: 2.5rem
}

.allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:last-child svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allCircleProduct .services-container li .service-item .containerItems a .emptyProduct:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .3)
}

.allCircleProduct .services-container li .service-item .containerItems a .emptyProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: red;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "ناموجود";
    box-shadow: 0 0 10px #0000004d
}

.allCircleProduct .services-container li .service-item .containerItems a .preProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: green;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "پیش خرید";
    box-shadow: 0 0 10px #0000004d
}

@media screen and (max-width: 800px) {
    .allCircleProduct .services-container li .service-item .containerItems a .pic img {
        height: 8rem !important
    }

    .allCircleProduct .services-container li .service-item .containerItems a .title2 {
        font-size: .85rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem {
        font-size: .7rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem svg {
        width: .8rem;
        height: .8rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:last-child {
        width: 2rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .optionDown .optionItem:last-child svg {
        width: .8rem;
        height: .8rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section {
        width: 40px
    }

    .allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allCircleProduct .services-container li .service-item .containerItems a .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allCircleProduct .services-container li .service-item .containerItems a:hover {
    box-shadow: 0 0 10px #0003
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .pic img {
    opacity: 0
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .pic img:nth-child(2) {
    opacity: 1
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .pic .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .pic .allRateProduct {
    opacity: 1;
    top: 77%
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

.allCircleProduct .services-container li .service-item .containerItems a:hover .colors {
    opacity: 0
}

.allCircleProduct .services-container li .service-item .containerItems a:first-child {
    border-right: 1px solid #eee
}

@media screen and (max-width: 480px) {
    .allCircleProduct .circle-container {
        transform: scale(.5)
    }
}

@media screen and (max-width: 700px) {
    .allCircleProduct {
        padding-right: 0;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        top: 0;
        right: 0
    }

    .allCircleProduct .container {
        display: block
    }

    .allCircleProduct .container .service-item .containerItems {
        display: block !important
    }
}

.allStoryContainer {
    margin: auto;
    margin-top: 2rem
}

.allStoryContainer .allStoryIndex {
    border-radius: 10px;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    padding: 1rem
}

.allStoryContainer .allStoryIndex .titleStory {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem
}

.allStoryContainer .allStoryIndex .storyItems {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center
}

.allStoryContainer .allStoryIndex .storyItems .storyItem {
    cursor: pointer
}

.allStoryContainer .allStoryIndex .storyItems .storyItem .storyPic {
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(to right, red 20%, #FF0 40%, #FF0 60%, red 80%);
    background-size: 200% auto;
    animation: shine 1s linear infinite;
    overflow: hidden;
    box-shadow: 0 0 10px #0000004d
}

.allStoryContainer .allStoryIndex .storyItems .storyItem .storyPic img {
    width: 0;
    height: 0;
    object-fit: cover;
    background: white;
    border-radius: 50%;
    transition: all .8s ease-in-out
}

.allStoryContainer .allStoryIndex .storyItems .storyItem .unActive {
    background: var(--back3-color)
}

.allStoryContainer .allStoryIndex .storyItems .storyItem .storyName {
    display: flex;
    justify-content: center;
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    margin-top: 1rem
}

@media screen and (max-width: 800px) {
    .allStoryContainer .allStoryIndex .storyItems {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center
    }

    .allStoryContainer .allStoryIndex .storyItems .storyItem .storyPic {
        padding: 2px
    }

    .allStoryContainer .allStoryIndex .storyItems .storyItem .storyPic img {
        width: 5rem;
        height: 5rem
    }
}

.allStoryContainer .allStoryIndex .storyFloat {
    direction: ltr;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    z-index: 100
}

.allStoryContainer .allStoryIndex .storyFloat .storyFloatShow {
    position: relative;
    text-align: center;
    display: block;
    padding: 0;
    margin: 0
}

.allStoryContainer .allStoryIndex .storyFloat .daily-stories {
    display: block;
    position: relative;
    width: 56.25vh;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background: black;
    overflow: hidden
}

.allStoryContainer .allStoryIndex .storyFloat .daily-stories__container {
    width: 56.25vh;
    height: 100vh;
    background: black;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: transform .25s cubic-bezier(.8, 0, .2, 1);
    will-change: auto;
    touch-action: manipulation;
    transform: translateZ(0);
    backface-visibility: hidden
}

.allStoryContainer .allStoryIndex .storyFloat .slide {
    position: relative;
    display: block;
    width: 56.25vh;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    will-change: opacity;
    opacity: 0;
    filter: blur(0);
    transition: opacity .5s ease, filter .25s ease
}

.allStoryContainer .allStoryIndex .storyFloat .slide.active {
    opacity: 1
}

.allStoryContainer .allStoryIndex .storyFloat .slide img, .allStoryContainer .allStoryIndex .storyFloat .slide video {
    width: 56.25vh;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    object-fit: contain;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    pointer-events: none
}

.allStoryContainer .allStoryIndex .storyFloat #prev-slide {
    display: block;
    width: 40%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    overflow: hidden;
    transition: opacity .25s ease
}

.allStoryContainer .allStoryIndex .storyFloat #next-slide {
    display: block;
    width: 40%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    overflow: hidden;
    transition: opacity .25s ease
}

.allStoryContainer .allStoryIndex .storyFloat .central-area {
    position: fixed;
    width: 30px;
    height: 30px;
    z-index: 1;
    display: block;
    top: 1.5rem;
    left: 3rem
}

.allStoryContainer .allStoryIndex .storyFloat .central-area .button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: none;
    transition: opacity .25s ease
}

@media (min-width: 800px) {
    .allStoryContainer .allStoryIndex .storyFloat .central-area .button {
        top: calc(50% - 24px)
    }
}

.allStoryContainer .allStoryIndex .storyFloat .central-area:hover .button {
    opacity: .5
}

.allStoryContainer .allStoryIndex .storyFloat .central-area .button svg {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

.allStoryContainer .allStoryIndex .storyFloat .central-area .button svg path {
    display: none
}

.allStoryContainer .allStoryIndex .storyFloat .central-area[data-state=paused] .button svg #path_play {
    display: block
}

.allStoryContainer .allStoryIndex .storyFloat .central-area[data-state=playing] .button svg #path_pause {
    display: block
}

.allStoryContainer .allStoryIndex .storyFloat .storyFloats.menu-open .central-area .button {
    opacity: 0
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars {
    position: absolute;
    padding: 10px 5px 87px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .5), transparent)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="1"] .bar {
    width: calc(100% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="2"] .bar {
    width: calc(50% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="3"] .bar {
    width: calc(33.3333333333% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="4"] .bar {
    width: calc(25% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="5"] .bar {
    width: calc(20% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="6"] .bar {
    width: calc(16.6666666667% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="7"] .bar {
    width: calc(14.2857142857% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="8"] .bar {
    width: calc(12.5% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="9"] .bar {
    width: calc(11.1111111111% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="10"] .bar {
    width: calc(10% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="11"] .bar {
    width: calc(9.0909090909% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="12"] .bar {
    width: calc(8.3333333333% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="13"] .bar {
    width: calc(7.6923076923% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="14"] .bar {
    width: calc(7.1428571429% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="15"] .bar {
    width: calc(6.6666666667% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="16"] .bar {
    width: calc(6.25% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="17"] .bar {
    width: calc(5.8823529412% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="18"] .bar {
    width: calc(5.5555555556% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="19"] .bar {
    width: calc(5.2631578947% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .progress-bars[data-count="20"] .bar {
    width: calc(5% - 6px)
}

.allStoryContainer .allStoryIndex .storyFloat .bar {
    display: block;
    position: relative;
    border-radius: 3px;
    height: 3px;
    margin: 0 3px;
    cursor: pointer;
    overflow: hidden;
    background-color: #fff6
}

.allStoryContainer .allStoryIndex .storyFloat .closeStory {
    position: fixed;
    width: 30px;
    height: 30px;
    z-index: 1;
    top: 1.5rem;
    left: .5rem;
    display: grid;
    align-items: center
}

.allStoryContainer .allStoryIndex .storyFloat .closeStory svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

.allStoryContainer .allStoryIndex .storyFloat .bar span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background-color: #fff;
    will-change: auto;
    transform: translate(101%) rotate(0)
}

.allStoryContainer .allStoryIndex .storyFloat .bar.seen span {
    transform: translate(0) rotate(0)
}

.allStoryContainer .allStoryIndex .storyFloat .bar.animate span {
    animation: bar 0s 0s linear both
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    bottom: 15px;
    right: 15px;
    z-index: 3
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container > .button {
    display: block;
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 50px;
    height: 50px
}

@media (min-width: 640px) {
    .allStoryContainer .allStoryIndex .storyFloat .context-menu-container > .button {
        right: 5px
    }
}

@media (min-width: 768px) {
    .allStoryContainer .allStoryIndex .storyFloat .context-menu-container > .button {
        right: 10px
    }
}

@media (min-width: 1024px) {
    .allStoryContainer .allStoryIndex .storyFloat .context-menu-container > .button {
        right: 15px
    }
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container > .button svg {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container.active > .button {
    display: none
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container .context-menu {
    position: absolute;
    display: block;
    bottom: 90px;
    right: 0;
    height: auto;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    will-change: auto;
    transform: scale(1.05) rotate(0);
    transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
    box-shadow: 0 0 30px #00000080, 0 0 30px #00000080 inset
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container.active .context-menu {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0)
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container .context-menu .link {
    display: block;
    background-color: #fff;
    width: 100%;
    padding: 18px;
    text-align: center;
    position: relative;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    font-weight: 700
}

.allStoryContainer .allStoryIndex .storyFloat .context-menu-container .context-menu .link:last-child {
    margin-top: 10px
}

.allStoryContainer .allStoryIndex .storyFloat .toast-notification {
    position: fixed;
    display: inline-block;
    text-align: center;
    top: 3rem;
    left: 50%;
    color: #333;
    border-radius: .25rem;
    padding: 1rem 2rem;
    margin: 0 auto;
    font-size: .875rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 99;
    will-change: auto;
    opacity: 0;
    transform: translate3d(-50%, .5rem, 0);
    max-width: 300px;
    width: 100%;
    transition: opacity .35s ease-in-out, visibility .35s ease-in-out, transform .35s ease-in-out
}

@keyframes bar {
    0% {
        transform: translate(-101%) rotate(0)
    }
    to {
        transform: translate(0) rotate(0)
    }
}

.allStoryContainer .allStoryIndex .storyFloatHide {
    display: none
}

.allStoryContainer .downStory {
    display: grid;
    justify-content: center
}

.allStoryContainer .downStory .data {
    position: relative
}

.allStoryContainer .downStory .downData {
    position: absolute;
    right: 0;
    left: 0;
    justify-content: center;
    display: grid;
    align-items: center
}

.allStoryContainer .downStory .downData svg {
    width: 1rem;
    height: 1rem;
    margin-bottom: 3rem;
    fill: red;
    animation: downAn 1s linear infinite
}

@keyframes downAn {
    0% {
        width: 1rem;
        height: 1rem;
        margin-bottom: 2rem
    }
    50% {
        width: 1.5rem;
        height: 1.5rem;
        margin-bottom: 0
    }
    to {
        width: 1rem;
        height: 1rem;
        margin-bottom: 2rem
    }
}

.allStoryContainer .downStory i svg {
    width: 10rem;
    height: 3rem;
    fill: var(--widget-color)
}

.allStoryContainer .downStory i svg path {
    fill: var(--widget-color)
}

.paused .bar.animate span, .menu-open .bar.animate span {
    animation-play-state: paused !important
}

.menu-open .storyFloats .slide.active {
    filter: blur(10px)
}

.allLoanIndex {
    border: 1px solid #eee;
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d
}

.allLoanIndex .loanTitle {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    justify-content: right;
    grid-gap: .5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin: 1rem;
    margin-bottom: 0
}

.allLoanIndex .loanTitle i {
    display: grid;
    align-items: center
}

.allLoanIndex .loanTitle i svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allLoanIndex .loadContainer .loanItems {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allLoanIndex .loadContainer .loanItems .loanItem {
    margin: 1rem;
    margin-bottom: 0
}

.allLoanIndex .loadContainer .loanItems .loanItem label {
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allLoanIndex .loadContainer .loanItems .loanItem .inputs {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    grid-gap: 1rem;
    margin-top: .5rem
}

.allLoanIndex .loadContainer .loanItems .loanItem .inputs span {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allLoanIndex .loadContainer .loanDetail {
    padding: 1rem;
    background: var(--back2-color);
    margin-top: 1rem;
    box-shadow: inset 0 0 10px #0000001a;
    display: none
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    grid-gap: 1rem;
    align-items: center
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem {
    text-align: center
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem .price1 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    margin-bottom: .5rem
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    letter-spacing: .5px
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem:last-child h5 {
    font-weight: 500
}

.allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem:last-child p {
    font-size: 1.2rem;
    font-weight: 700
}

.allLoanIndex .loadContainer .loanRecord {
    padding: 1rem;
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem
}

.allLoanIndex .loadContainer .loanRecord .btn1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allLoanIndex .loadContainer .loanRecord button {
    background: var(--green-color);
    padding: .3rem .5rem;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300;
    color: #fff
}

@media screen and (max-width: 700px) {
    .allLoanIndex .loanTitle {
        font-size: 1rem
    }

    .allLoanIndex .loanTitle i svg {
        width: 1rem;
        height: 1rem
    }

    .allLoanIndex .loadContainer .loanItems {
        grid-template-columns:1fr
    }

    .allLoanIndex .loadContainer .loanItems .loanItem label {
        font-size: .8rem
    }

    .allLoanIndex .loadContainer .loanItems .loanItem .inputs span {
        font-size: .6rem
    }

    .allLoanIndex .loadContainer .loanItems .loanItem:last-child {
        margin-top: 0
    }

    .allLoanIndex .loadContainer .loanDetail .loanDetailItems {
        grid-template-columns:1fr
    }

    .allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem .price1 {
        font-size: .6rem
    }

    .allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem p {
        font-size: .75rem
    }

    .allLoanIndex .loadContainer .loanDetail .loanDetailItems .loanDetailItem:last-child p {
        font-size: .9rem
    }

    .allLoanIndex .loanRecord .btn1 {
        font-size: .6rem
    }
}

.allRewardIndex {
    margin: auto;
    margin-top: 4rem;
    margin-bottom: 5rem
}

.allRewardIndex .rewardContainer {
    padding: 1rem;
    background: var(--widget-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    height: 10rem;
    position: relative
}

.allRewardIndex .rewardContainer .right h4 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #000
}

.allRewardIndex .rewardContainer .right p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    margin: 1rem 0
}

.allRewardIndex .rewardContainer .right button {
    padding: .2rem 1rem;
    border-radius: 5px;
    color: #fff;
    background: var(--green-color);
    font-size: .9rem;
    font-weight: 300
}

.allRewardIndex .rewardContainer .userList {
    position: absolute;
    left: 1rem;
    background: var(--back1-color);
    padding: 1rem;
    border-radius: 10px;
    top: -2rem;
    box-shadow: 0 0 10px #0000001a;
    width: 15rem
}

.allRewardIndex .rewardContainer .userList h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    opacity: .7
}

.allRewardIndex .rewardContainer .userList ul li {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    grid-gap: .3rem;
    margin-top: 1rem;
    font-size: .7rem;
    font-weight: 300;
    color: #000
}

.allRewardIndex .rewardContainer .userList ul li h5 {
    font-size: 1.2rem;
    color: var(--green-color);
    background: rgba(0, 128, 0, .2);
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    display: grid;
    justify-content: center;
    align-items: center
}

.allRewardIndex .rewardContainer .userList ul li span {
    font-size: .65rem;
    font-weight: 300;
    color: #000
}

.allBackProduct {
    height: 35rem;
    margin-top: 2rem
}

.allBackProduct .allBackProductBlocks {
    height: 24rem;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    background-size: cover;
    padding: 2rem 0
}

.allBackProduct .allBackProductBlocks:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background: rgba(0, 0, 0, .4);
    z-index: 1
}

.allBackProduct .allBackProductBlocks .allBackProductBlock {
    margin: auto;
    position: relative;
    z-index: 100
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle {
    text-align: center;
    margin-bottom: 3rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle .title1 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle a {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: #ffffffb3
}

@media screen and (max-width: 720px) {
    .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle .title1 {
        font-size: 1.1rem
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p, .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p a {
        font-size: .65rem
    }
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct button.owl-prev {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct button.owl-prev span {
    font-size: 2.5rem;
    padding: 1rem;
    background: white;
    height: 3rem;
    display: grid;
    align-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px #0003
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct button.owl-next {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct button.owl-next span {
    font-size: 2.5rem;
    padding: 1rem;
    background: white;
    height: 3rem;
    display: grid;
    align-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px #0003
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a {
    background: var(--back1-color);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 0 10px #0000000d;
    height: 100%;
    display: grid;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    overflow: hidden;
    min-height: 22.5rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic {
    overflow: hidden;
    position: relative
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic img {
    width: 100%;
    object-fit: contain;
    transition: all .6s ease-in-out;
    padding-top: 1rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic img:nth-child(2) {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    animation: fadee2 3s infinite;
    z-index: 1
}

@keyframes fadee2 {
    0% {
        background: none;
        right: -200%
    }
    50% {
        right: 100%;
        background: linear-gradient(70deg, rgba(0, 0, 0, 0) 33%, rgba(255, 255, 255, .1294117647) 50%, rgba(0, 0, 0, 0) 66%)
    }
    51% {
        background: none
    }
    to {
        right: -200%
    }
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postTitle {
    text-align: center;
    max-width: 90%;
    font-size: .85rem;
    font-weight: 300;
    line-height: 25px;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    opacity: .9;
    height: 3.2rem;
    margin-top: 1rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice {
    height: 3rem;
    display: grid;
    align-items: end;
    text-align: center;
    margin-top: .5rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice s {
    font-size: .8rem;
    line-height: 1.692;
    font-weight: 300;
    color: #000;
    opacity: .7;
    text-align: center;
    width: 100%
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice .price1 {
    text-align: center;
    width: 100%;
    color: #000;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice .price1 span {
    letter-spacing: .1px;
    font-size: .8rem
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .checkCount {
    border-bottom: 1px solid #eee;
    z-index: 2;
    height: 27px;
    position: relative;
    width: 100%
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .checkCount span {
    color: #444;
    font-size: 1rem;
    line-height: 1.222;
    font-weight: 400;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 115%;
    background: var(--back1-color);
    padding: 0 1rem;
    height: 21px
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a:hover .pic img:nth-child(1) {
    top: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a:hover .pic img:nth-child(2) {
    position: relative;
    top: auto;
    visibility: visible;
    opacity: 1;
    right: auto
}

@media screen and (max-width: 700px) {
    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a {
        min-height: auto
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic {
        height: auto
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .pic img {
        height: 8rem !important
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postTitle a, .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice .postPriceItem s {
        font-size: .7rem
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice .postPriceItem .price1 {
        font-size: 1rem
    }

    .allBackProduct .allBackProductBlocks .allBackProductBlock .slider-backProduct a .postPrice .postPriceItem .price1 span {
        letter-spacing: .1px;
        font-size: .6rem
    }
}

@media screen and (max-width: 700px) {
    .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle {
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 700px) {
    .allBackProduct {
        height: 26rem
    }

    .allBackProduct .allBackProductBlocks {
        height: 20rem
    }
}

.digiProductItems {
    margin-top: 2rem;
    padding: 2rem 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

.digiProductItems:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5)
}

.digiProductItems .width {
    margin: auto;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: 1rem
}

.digiProductItems .width .item {
    position: relative;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat
}

.digiProductItems .width .item .itemOver {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    padding: 1rem;
    border-radius: 5px;
    background: hsla(35, 0%, 23%, .7);
    transition: all .3s ease-in-out;
    box-shadow: 0 5px 5px #00000080
}

.digiProductItems .width .item .itemOver .itemOverPic {
    transition: all .3s ease-in-out;
    background: var(--widget-color);
    box-shadow: 0 5px 5px #0000004d;
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    align-items: center
}

.digiProductItems .width .item .itemOver .itemOverPic img {
    width: 9rem;
    border-radius: 5px;
    object-fit: contain
}

.digiProductItems .width .item .itemOver .itemOverSubject {
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.digiProductItems .width .item .itemOver .itemOverSubject .subData {
    flex-grow: 1
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverTitle {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-shadow: 0 5px 5px rgba(0, 0, 0, .6)
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    padding-top: .5rem;
    opacity: .8
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions span {
    font-size: .8rem;
    font-weight: 400;
    color: #fff
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions span:last-child {
    font-size: .9rem
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions .itemOverOption {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions .itemOverOption span {
    font-size: .8rem;
    font-weight: 400;
    color: #fff
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility button, .digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility div {
    background: var(--back1-color);
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    border: 1px solid #000;
    padding: .2rem .5rem;
    color: #000;
    font-size: .7rem;
    font-weight: 300;
    border-radius: 5px
}

.digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.digiProductItems .width .item .itemOver .itemOverSubject i {
    display: grid;
    align-items: center
}

.digiProductItems .width .item .itemOver .itemOverSubject i svg {
    width: 1rem;
    fill: #fff;
    height: 1rem
}

.digiProductItems .width .item:hover .itemOver {
    background: hsla(35, 0%, 45%, .7)
}

@media screen and (max-width: 700px) {
    .digiProductItems .width {
        grid-template-columns:1fr
    }

    .digiProductItems .width .item .itemOver {
        grid-gap: .5rem;
        padding: .5rem
    }

    .digiProductItems .width .item .itemOver .itemOverPic img {
        width: 8rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject .itemOverTitle {
        font-size: .9rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions span, .digiProductItems .width .item .itemOver .itemOverSubject .itemOverOptions .itemOverOption span {
        font-size: .7rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility {
        grid-gap: .3rem;
        margin-top: .5rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility button {
        font-size: .7rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject .itemOverAbility svg {
        width: .6rem;
        height: .6rem
    }

    .digiProductItems .width .item .itemOver .itemOverSubject i {
        display: grid;
        align-items: center
    }

    .digiProductItems .width .item .itemOver .itemOverSubject i svg {
        width: .8rem;
        height: .8rem;
        fill: #fff
    }
}

.allCompareIndex {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    position: relative;
    padding: 1rem
}

.allCompareIndex .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allCompareIndex .title .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #000;
    transition: all 1s ease-in-out
}

.allCompareIndex .slider-compare {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1rem
}

.allCompareIndex .slider-compare .compareItem {
    direction: ltr;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 5px #0006
}

.allCompareIndex .slider-compare .compareItem .before, .allCompareIndex .slider-compare .compareItem .after {
    z-index: 3;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, .7);
    color: #000;
    font-size: .9rem;
    font-weight: 500;
    padding: .2rem 1rem;
    border-radius: 5px;
    border: 1px dashed black
}

.allCompareIndex .slider-compare .compareItem .before {
    left: 1rem;
    right: auto
}

.allCompareIndex .slider-compare .compareItem .detail {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: .3rem;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-weight: 500;
    color: #000;
    z-index: 3;
    background: rgba(255, 255, 255, .6)
}

.allCompareIndex .slider-compare .compareItem figure {
    position: relative;
    --thumb-width: 32px
}

.allCompareIndex .slider-compare .compareItem figure img:first-of-type {
    width: 100%;
    clip-path: inset(0 calc(100% - var(--fraction, 50%)) 0 0)
}

.allCompareIndex .slider-compare .compareItem figure img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 0 var(--fraction, 50%))
}

.allCompareIndex .slider-compare .compareItem figure input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% + var(--thumb-width));
    margin-left: calc(-1 * var(--thumb-width) / 2);
    margin-right: calc(-1 * var(--thumb-width) / 2);
    background: transparent;
    cursor: ew-resize
}

.allCompareIndex .slider-compare .compareItem figure input:focus {
    outline: none
}

.allCompareIndex .slider-compare .compareItem figure input::-moz-range-thumb {
    height: 100%;
    width: 5px;
    border-radius: 0;
    border-right: 2px solid white;
    border-left: 2px solid white;
    background: green;
    cursor: ew-resize;
    box-shadow: 0 0 30px #000000e6
}

@media screen and (max-width: 700px) {
    .allCompareIndex .title .title1 {
        font-size: 1rem
    }

    .allCompareIndex .slider-compare {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .5rem
    }

    .allCompareIndex .slider-compare .compareItem .before, .allCompareIndex .slider-compare .compareItem .after {
        top: .5rem;
        right: .5rem;
        font-size: .6rem;
        padding: .2rem .5rem
    }

    .allCompareIndex .slider-compare .compareItem .before {
        left: .5rem;
        right: auto
    }

    .allCompareIndex .slider-compare .compareItem .detail {
        font-size: .7rem
    }
}

.allFestivalIndex {
    margin-top: 2rem;
    padding: 4rem 0;
    background: url(/img/backStore.png);
    background-size: 170% auto;
    animation: shine 10s linear infinite;
    overflow: hidden;
    box-shadow: 0 0 10px #0000001a;
    position: relative;
    z-index: 1
}

.allFestivalIndex:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 10;
    content: ""
}

.allFestivalIndex .width {
    margin: auto;
    height: 100%;
    position: relative;
    z-index: 20
}

.allFestivalIndex .width .title {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .1px;
    margin-bottom: 4rem
}

.allFestivalIndex .width .festivalContainer {
    display: grid;
    align-items: center;
    grid-template-columns:auto 1fr auto;
    grid-gap: 2rem;
    height: 100%;
    padding: 0 4rem
}

.allFestivalIndex .width .festivalContainer .firecracker {
    position: relative
}

@keyframes gravity-1 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -47px
    }
}

@keyframes anim-1 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #c3ff00;
        box-shadow: 0 0 #c3ff00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #c3ff00
    }
    70% {
        background-color: #ffe100
    }
    97% {
        top: 25px;
        left: -60px;
        width: 1;
        transform: rotate(92deg);
        background-color: #f60;
        box-shadow: 0 0 10px 3px #f60
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(1) {
    position: absolute;
    animation: gravity-1 1s ease-in .3s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(1) i {
    position: absolute;
    animation: anim-1 1s ease-out .3s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 237, 100%, 50%;
    box-shadow: 0 0 5px #000dff
}

@keyframes gravity-2 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -29px
    }
}

@keyframes anim-2 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #6f0;
        box-shadow: 0 0 #6f0
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #6f0
    }
    70% {
        background-color: #ff9d00
    }
    97% {
        top: 18px;
        left: -61px;
        width: 3;
        transform: rotate(45deg);
        background-color: #fc0;
        box-shadow: 0 0 8px 3px #fc0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(2) {
    position: absolute;
    animation: gravity-2 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(2) i {
    position: absolute;
    animation: anim-2 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 284, 100%, 50%;
    box-shadow: 0 0 5px #b0f
}

@keyframes gravity-3 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -31px
    }
}

@keyframes anim-3 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #009dff;
        box-shadow: 0 0 #009dff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #009dff
    }
    70% {
        background-color: #ff5900
    }
    97% {
        top: -64px;
        left: -71px;
        width: 1;
        transform: rotate(128deg);
        background-color: #0051ff;
        box-shadow: 0 0 5px 1px #0051ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(3) {
    position: absolute;
    animation: gravity-3 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(3) i {
    position: absolute;
    animation: anim-3 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 156, 100%, 50%;
    box-shadow: 0 0 5px #0f9
}

@keyframes gravity-4 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -31px
    }
}

@keyframes anim-4 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #f0e;
        box-shadow: 0 0 #f0e
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #f0e
    }
    70% {
        background-color: #f40
    }
    97% {
        top: 38px;
        left: 14px;
        width: 1;
        transform: rotate(56deg);
        background-color: #f0c;
        box-shadow: 0 0 8px 4px #f0c
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(4) {
    position: absolute;
    animation: gravity-4 1s ease-in .25s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(4) i {
    position: absolute;
    animation: anim-4 1s ease-out .25s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 208, 100%, 50%;
    box-shadow: 0 0 5px #08f
}

@keyframes gravity-5 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -25px
    }
}

@keyframes anim-5 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #4800ff;
        box-shadow: 0 0 #4800ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #4800ff
    }
    70% {
        background-color: #f80
    }
    97% {
        top: 18px;
        left: 73px;
        width: 2;
        transform: rotate(-326deg);
        background-color: #00ff15;
        box-shadow: 0 0 3px 8px #00ff15
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(5) {
    position: absolute;
    animation: gravity-5 1s ease-in .4s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(5) i {
    position: absolute;
    animation: anim-5 1s ease-out .4s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 46, 100%, 50%;
    box-shadow: 0 0 5px #ffc300
}

@keyframes gravity-6 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -29px
    }
}

@keyframes anim-6 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #50f;
        box-shadow: 0 0 #50f
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #50f
    }
    70% {
        background-color: #ffe500
    }
    97% {
        top: 41px;
        left: -31px;
        width: 1;
        transform: rotate(-191deg);
        background-color: #ff00c3;
        box-shadow: 0 0 2px 6px #ff00c3
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(6) {
    position: absolute;
    animation: gravity-6 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(6) i {
    position: absolute;
    animation: anim-6 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 244, 100%, 50%;
    box-shadow: 0 0 5px #10f
}

@keyframes gravity-7 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -32px
    }
}

@keyframes anim-7 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ef0;
        box-shadow: 0 0 #ef0
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ef0
    }
    70% {
        background-color: #fffb00
    }
    97% {
        top: -35px;
        left: -64px;
        width: 2;
        transform: rotate(234deg);
        background-color: #f02;
        box-shadow: 0 0 9px 10px #f02
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(7) {
    position: absolute;
    animation: gravity-7 1s ease-in .25s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(7) i {
    position: absolute;
    animation: anim-7 1s ease-out .25s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 26, 100%, 50%;
    box-shadow: 0 0 5px #ff6e00
}

@keyframes gravity-8 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -47px
    }
}

@keyframes anim-8 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff0095;
        box-shadow: 0 0 #ff0095
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff0095
    }
    70% {
        background-color: #f40
    }
    97% {
        top: 5px;
        left: -71px;
        width: 2;
        transform: rotate(-301deg);
        background-color: #f70;
        box-shadow: 0 0 1px 8px #f70
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(8) {
    position: absolute;
    animation: gravity-8 1s ease-in .25s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(8) i {
    position: absolute;
    animation: anim-8 1s ease-out .25s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 195, 100%, 50%;
    box-shadow: 0 0 5px #00bfff
}

@keyframes gravity-9 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -44px
    }
}

@keyframes anim-9 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #01f;
        box-shadow: 0 0 #01f
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #01f
    }
    70% {
        background-color: #fa0
    }
    97% {
        top: 71px;
        left: -55px;
        width: 1;
        transform: rotate(82deg);
        background-color: #ff001a;
        box-shadow: 0 0 3px 7px #ff001a
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(9) {
    position: absolute;
    animation: gravity-9 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(9) i {
    position: absolute;
    animation: anim-9 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 344, 100%, 50%;
    box-shadow: 0 0 5px #f04
}

@keyframes gravity-10 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -23px
    }
}

@keyframes anim-10 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff00b2;
        box-shadow: 0 0 #ff00b2
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff00b2
    }
    70% {
        background-color: #ff6200
    }
    97% {
        top: 48px;
        left: 66px;
        width: 2;
        transform: rotate(-118deg);
        background-color: #40f;
        box-shadow: 0 0 10px 7px #40f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(10) {
    position: absolute;
    animation: gravity-10 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(10) i {
    position: absolute;
    animation: anim-10 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 183, 100%, 50%;
    box-shadow: 0 0 5px #00f2ff
}

@keyframes gravity-11 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -24px
    }
}

@keyframes anim-11 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #5900ff;
        box-shadow: 0 0 #5900ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #5900ff
    }
    70% {
        background-color: #f60
    }
    97% {
        top: 83px;
        left: 85px;
        width: 3;
        transform: rotate(-166deg);
        background-color: #ffd000;
        box-shadow: 0 0 1px 7px #ffd000
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(11) {
    position: absolute;
    animation: gravity-11 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(11) i {
    position: absolute;
    animation: anim-11 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 18, 100%, 50%;
    box-shadow: 0 0 5px #ff4d00
}

@keyframes gravity-12 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -48px
    }
}

@keyframes anim-12 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00ff2f;
        box-shadow: 0 0 #00ff2f
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00ff2f
    }
    70% {
        background-color: #ff5900
    }
    97% {
        top: 68px;
        left: 0;
        width: 1;
        transform: rotate(303deg);
        background-color: #00ffc8;
        box-shadow: 0 0 4px 1px #00ffc8
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(12) {
    position: absolute;
    animation: gravity-12 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(12) i {
    position: absolute;
    animation: anim-12 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 108, 100%, 50%;
    box-shadow: 0 0 5px #3f0
}

@keyframes gravity-13 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -49px
    }
}

@keyframes anim-13 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff0062;
        box-shadow: 0 0 #ff0062
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff0062
    }
    70% {
        background-color: #ff7b00
    }
    97% {
        top: -41px;
        left: -41px;
        width: 2;
        transform: rotate(83deg);
        background-color: #00f;
        box-shadow: 0 0 6px 10px #00f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(13) {
    position: absolute;
    animation: gravity-13 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(13) i {
    position: absolute;
    animation: anim-13 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 256, 100%, 50%;
    box-shadow: 0 0 5px #40f
}

@keyframes gravity-14 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -28px
    }
}

@keyframes anim-14 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #f07;
        box-shadow: 0 0 #f07
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #f07
    }
    70% {
        background-color: #ffd900
    }
    97% {
        top: -8px;
        left: 7px;
        width: 4;
        transform: rotate(-60deg);
        background-color: #d0ff00;
        box-shadow: 0 0 5px 8px #d0ff00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(14) {
    position: absolute;
    animation: gravity-14 1s ease-in .55s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(14) i {
    position: absolute;
    animation: anim-14 1s ease-out .55s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 59, 100%, 50%;
    box-shadow: 0 0 5px #fffb00
}

@keyframes gravity-15 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -35px
    }
}

@keyframes anim-15 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #fbff00;
        box-shadow: 0 0 #fbff00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #fbff00
    }
    70% {
        background-color: #ffe500
    }
    97% {
        top: 24px;
        left: 22px;
        width: 3;
        transform: rotate(-19deg);
        background-color: #f03;
        box-shadow: 0 0 3px 10px #f03
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(15) {
    position: absolute;
    animation: gravity-15 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(15) i {
    position: absolute;
    animation: anim-15 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 156, 100%, 50%;
    box-shadow: 0 0 5px #0f9
}

@keyframes gravity-16 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -30px
    }
}

@keyframes anim-16 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00d9ff;
        box-shadow: 0 0 #00d9ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00d9ff
    }
    70% {
        background-color: #f50
    }
    97% {
        top: -42px;
        left: -64px;
        width: 4;
        transform: rotate(-250deg);
        background-color: #0f0;
        box-shadow: 0 0 10px 3px #0f0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(16) {
    position: absolute;
    animation: gravity-16 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(16) i {
    position: absolute;
    animation: anim-16 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 58, 100%, 50%;
    box-shadow: 0 0 5px #fff700
}

@keyframes gravity-17 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -47px
    }
}

@keyframes anim-17 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #05f;
        box-shadow: 0 0 #05f
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #05f
    }
    70% {
        background-color: #fffb00
    }
    97% {
        top: 62px;
        left: -82px;
        width: 1;
        transform: rotate(-226deg);
        background-color: #08ff00;
        box-shadow: 0 0 9px 5px #08ff00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(17) {
    position: absolute;
    animation: gravity-17 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(17) i {
    position: absolute;
    animation: anim-17 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 232, 100%, 50%;
    box-shadow: 0 0 5px #02f
}

@keyframes gravity-18 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -25px
    }
}

@keyframes anim-18 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #c300ff;
        box-shadow: 0 0 #c300ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #c300ff
    }
    70% {
        background-color: #ff5e00
    }
    97% {
        top: -2px;
        left: -12px;
        width: 3;
        transform: rotate(-104deg);
        background-color: #84ff00;
        box-shadow: 0 0 2px 9px #84ff00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(18) {
    position: absolute;
    animation: gravity-18 1s ease-in .4s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(18) i {
    position: absolute;
    animation: anim-18 1s ease-out .4s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 204, 100%, 50%;
    box-shadow: 0 0 5px #09f
}

@keyframes gravity-19 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -23px
    }
}

@keyframes anim-19 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #fff200;
        box-shadow: 0 0 #fff200
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #fff200
    }
    70% {
        background-color: #ffea00
    }
    97% {
        top: -69px;
        left: -81px;
        width: 4;
        transform: rotate(256deg);
        background-color: #2f0;
        box-shadow: 0 0 8px 1px #2f0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(19) {
    position: absolute;
    animation: gravity-19 1s ease-in .3s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(19) i {
    position: absolute;
    animation: anim-19 1s ease-out .3s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 31, 100%, 50%;
    box-shadow: 0 0 5px #ff8400
}

@keyframes gravity-20 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -23px
    }
}

@keyframes anim-20 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ae00ff;
        box-shadow: 0 0 #ae00ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ae00ff
    }
    70% {
        background-color: #ff8000
    }
    97% {
        top: 58px;
        left: -61px;
        width: 1;
        transform: rotate(294deg);
        background-color: #0cf;
        box-shadow: 0 0 9px 4px #0cf
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(20) {
    position: absolute;
    animation: gravity-20 1s ease-in .45s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(20) i {
    position: absolute;
    animation: anim-20 1s ease-out .45s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 266, 100%, 50%;
    box-shadow: 0 0 5px #6e00ff
}

@keyframes gravity-21 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -27px
    }
}

@keyframes anim-21 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00b2ff;
        box-shadow: 0 0 #00b2ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00b2ff
    }
    70% {
        background-color: #f60
    }
    97% {
        top: 42px;
        left: -17px;
        width: 3;
        transform: rotate(-194deg);
        background-color: #a0f;
        box-shadow: 0 0 5px 2px #a0f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(21) {
    position: absolute;
    animation: gravity-21 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(21) i {
    position: absolute;
    animation: anim-21 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 200, 100%, 50%;
    box-shadow: 0 0 5px #0af
}

@keyframes gravity-22 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -26px
    }
}

@keyframes anim-22 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00ffe1;
        box-shadow: 0 0 #00ffe1
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00ffe1
    }
    70% {
        background-color: #ff7300
    }
    97% {
        top: -22px;
        left: 71px;
        width: 1;
        transform: rotate(-345deg);
        background-color: #ff00d4;
        box-shadow: 0 0 2px 7px #ff00d4
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(22) {
    position: absolute;
    animation: gravity-22 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(22) i {
    position: absolute;
    animation: anim-22 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 263, 100%, 50%;
    box-shadow: 0 0 5px #6200ff
}

@keyframes gravity-23 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -32px
    }
}

@keyframes anim-23 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff0095;
        box-shadow: 0 0 #ff0095
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff0095
    }
    70% {
        background-color: #ff4d00
    }
    97% {
        top: 33px;
        left: 28px;
        width: 4;
        transform: rotate(55deg);
        background-color: #ff0048;
        box-shadow: 0 0 7px 6px #ff0048
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(23) {
    position: absolute;
    animation: gravity-23 1s ease-in .55s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(23) i {
    position: absolute;
    animation: anim-23 1s ease-out .55s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 316, 100%, 50%;
    box-shadow: 0 0 5px #f0b
}

@keyframes gravity-24 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -31px
    }
}

@keyframes anim-24 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff006a;
        box-shadow: 0 0 #ff006a
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff006a
    }
    70% {
        background-color: #ffa600
    }
    97% {
        top: -55px;
        left: -57px;
        width: 4;
        transform: rotate(206deg);
        background-color: #00ff80;
        box-shadow: 0 0 8px 2px #00ff80
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(24) {
    position: absolute;
    animation: gravity-24 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(24) i {
    position: absolute;
    animation: anim-24 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 296, 100%, 50%;
    box-shadow: 0 0 5px #e0f
}

@keyframes gravity-25 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -32px
    }
}

@keyframes anim-25 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #3c00ff;
        box-shadow: 0 0 #3c00ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #3c00ff
    }
    70% {
        background-color: #fd0
    }
    97% {
        top: 73px;
        left: 12px;
        width: 3;
        transform: rotate(10deg);
        background-color: #ffd900;
        box-shadow: 0 0 2px 1px #ffd900
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(25) {
    position: absolute;
    animation: gravity-25 1s ease-in .25s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(25) i {
    position: absolute;
    animation: anim-25 1s ease-out .25s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 104, 100%, 50%;
    box-shadow: 0 0 5px #4f0
}

@keyframes gravity-26 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -46px
    }
}

@keyframes anim-26 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff0062;
        box-shadow: 0 0 #ff0062
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff0062
    }
    70% {
        background-color: #f70
    }
    97% {
        top: 45px;
        left: -84px;
        width: 2;
        transform: rotate(149deg);
        background-color: #ff00ea;
        box-shadow: 0 0 5px 10px #ff00ea
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(26) {
    position: absolute;
    animation: gravity-26 1s ease-in .55s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(26) i {
    position: absolute;
    animation: anim-26 1s ease-out .55s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 8, 100%, 50%;
    box-shadow: 0 0 5px #f20
}

@keyframes gravity-27 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -49px
    }
}

@keyframes anim-27 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #91ff00;
        box-shadow: 0 0 #91ff00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #91ff00
    }
    70% {
        background-color: #ffbf00
    }
    97% {
        top: 42px;
        left: 40px;
        width: 2;
        transform: rotate(-349deg);
        background-color: #6200ff;
        box-shadow: 0 0 3px 9px #6200ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(27) {
    position: absolute;
    animation: gravity-27 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(27) i {
    position: absolute;
    animation: anim-27 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 251, 100%, 50%;
    box-shadow: 0 0 5px #2f00ff
}

@keyframes gravity-28 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -23px
    }
}

@keyframes anim-28 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff9500;
        box-shadow: 0 0 #ff9500
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff9500
    }
    70% {
        background-color: #fd0
    }
    97% {
        top: 35px;
        left: 29px;
        width: 2;
        transform: rotate(321deg);
        background-color: #4000ff;
        box-shadow: 0 0 7px 6px #4000ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(28) {
    position: absolute;
    animation: gravity-28 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(28) i {
    position: absolute;
    animation: anim-28 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 304, 100%, 50%;
    box-shadow: 0 0 5px #f0e
}

@keyframes gravity-29 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -30px
    }
}

@keyframes anim-29 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #5eff00;
        box-shadow: 0 0 #5eff00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #5eff00
    }
    70% {
        background-color: #ff9100
    }
    97% {
        top: -6px;
        left: 57px;
        width: 1;
        transform: rotate(112deg);
        background-color: #0fd;
        box-shadow: 0 0 7px 10px #0fd
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(29) {
    position: absolute;
    animation: gravity-29 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(29) i {
    position: absolute;
    animation: anim-29 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 36, 100%, 50%;
    box-shadow: 0 0 5px #f90
}

@keyframes gravity-30 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -44px
    }
}

@keyframes anim-30 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #1aff00;
        box-shadow: 0 0 #1aff00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #1aff00
    }
    70% {
        background-color: #ffb300
    }
    97% {
        top: -72px;
        left: 3px;
        width: 3;
        transform: rotate(-279deg);
        background-color: #0400ff;
        box-shadow: 0 0 8px 10px #0400ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(30) {
    position: absolute;
    animation: gravity-30 1s ease-in .55s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(30) i {
    position: absolute;
    animation: anim-30 1s ease-out .55s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 38, 100%, 50%;
    box-shadow: 0 0 5px #ffa200
}

@keyframes gravity-31 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -27px
    }
}

@keyframes anim-31 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #70f;
        box-shadow: 0 0 #70f
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #70f
    }
    70% {
        background-color: #ffb300
    }
    97% {
        top: 81px;
        left: 12px;
        width: 2;
        transform: rotate(153deg);
        background-color: #fff200;
        box-shadow: 0 0 9px 5px #fff200
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(31) {
    position: absolute;
    animation: gravity-31 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(31) i {
    position: absolute;
    animation: anim-31 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 11, 100%, 50%;
    box-shadow: 0 0 5px #ff2f00
}

@keyframes gravity-32 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -38px
    }
}

@keyframes anim-32 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00ff73;
        box-shadow: 0 0 #00ff73
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00ff73
    }
    70% {
        background-color: #f80
    }
    97% {
        top: -11px;
        left: 68px;
        width: 3;
        transform: rotate(302deg);
        background-color: #ff0084;
        box-shadow: 0 0 6px 7px #ff0084
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(32) {
    position: absolute;
    animation: gravity-32 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(32) i {
    position: absolute;
    animation: anim-32 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 193, 100%, 50%;
    box-shadow: 0 0 5px #00c8ff
}

@keyframes gravity-33 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -30px
    }
}

@keyframes anim-33 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #c300ff;
        box-shadow: 0 0 #c300ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #c300ff
    }
    70% {
        background-color: #ff9d00
    }
    97% {
        top: -76px;
        left: -68px;
        width: 3;
        transform: rotate(216deg);
        background-color: #af0;
        box-shadow: 0 0 10px 3px #af0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(33) {
    position: absolute;
    animation: gravity-33 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(33) i {
    position: absolute;
    animation: anim-33 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 125, 100%, 50%;
    box-shadow: 0 0 5px #00ff15
}

@keyframes gravity-34 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -43px
    }
}

@keyframes anim-34 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00fff2;
        box-shadow: 0 0 #00fff2
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00fff2
    }
    70% {
        background-color: #f80
    }
    97% {
        top: 84px;
        left: 68px;
        width: 3;
        transform: rotate(-7deg);
        background-color: #001eff;
        box-shadow: 0 0 3px 2px #001eff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(34) {
    position: absolute;
    animation: gravity-34 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(34) i {
    position: absolute;
    animation: anim-34 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 68, 100%, 50%;
    box-shadow: 0 0 5px #df0
}

@keyframes gravity-35 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -36px
    }
}

@keyframes anim-35 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #0400ff;
        box-shadow: 0 0 #0400ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #0400ff
    }
    70% {
        background-color: #ffb700
    }
    97% {
        top: 12px;
        left: -57px;
        width: 4;
        transform: rotate(5deg);
        background-color: #ff2b00;
        box-shadow: 0 0 10px 1px #ff2b00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(35) {
    position: absolute;
    animation: gravity-35 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(35) i {
    position: absolute;
    animation: anim-35 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 187, 100%, 50%;
    box-shadow: 0 0 5px #00e1ff
}

@keyframes gravity-36 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -31px
    }
}

@keyframes anim-36 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #2f0;
        box-shadow: 0 0 #2f0
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #2f0
    }
    70% {
        background-color: #ffe500
    }
    97% {
        top: 18px;
        left: -78px;
        width: 1;
        transform: rotate(45deg);
        background-color: #2f0;
        box-shadow: 0 0 3px 4px #2f0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(36) {
    position: absolute;
    animation: gravity-36 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(36) i {
    position: absolute;
    animation: anim-36 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 19, 100%, 50%;
    box-shadow: 0 0 5px #ff5100
}

@keyframes gravity-37 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -40px
    }
}

@keyframes anim-37 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #0095ff;
        box-shadow: 0 0 #0095ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #0095ff
    }
    70% {
        background-color: #ff6a00
    }
    97% {
        top: 15px;
        left: -45px;
        width: 2;
        transform: rotate(-144deg);
        background-color: #9f0;
        box-shadow: 0 0 3px 9px #9f0
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(37) {
    position: absolute;
    animation: gravity-37 1s ease-in .55s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(37) i {
    position: absolute;
    animation: anim-37 1s ease-out .55s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 287, 100%, 50%;
    box-shadow: 0 0 5px #c800ff
}

@keyframes gravity-38 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -37px
    }
}

@keyframes anim-38 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #fb00ff;
        box-shadow: 0 0 #fb00ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #fb00ff
    }
    70% {
        background-color: #ff4d00
    }
    97% {
        top: -73px;
        left: -49px;
        width: 1;
        transform: rotate(333deg);
        background-color: #70f;
        box-shadow: 0 0 4px 3px #70f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(38) {
    position: absolute;
    animation: gravity-38 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(38) i {
    position: absolute;
    animation: anim-38 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 351, 100%, 50%;
    box-shadow: 0 0 5px #ff0026
}

@keyframes gravity-39 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -24px
    }
}

@keyframes anim-39 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #00f2ff;
        box-shadow: 0 0 #00f2ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #00f2ff
    }
    70% {
        background-color: #ffae00
    }
    97% {
        top: -75px;
        left: -72px;
        width: 4;
        transform: rotate(49deg);
        background-color: #e100ff;
        box-shadow: 0 0 10px 9px #e100ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(39) {
    position: absolute;
    animation: gravity-39 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(39) i {
    position: absolute;
    animation: anim-39 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 115, 100%, 50%;
    box-shadow: 0 0 5px #15ff00
}

@keyframes gravity-40 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -21px
    }
}

@keyframes anim-40 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ffe100;
        box-shadow: 0 0 #ffe100
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ffe100
    }
    70% {
        background-color: #ff8400
    }
    97% {
        top: 34px;
        left: -41px;
        width: 4;
        transform: rotate(140deg);
        background-color: #4d00ff;
        box-shadow: 0 0 1px 4px #4d00ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(40) {
    position: absolute;
    animation: gravity-40 1s ease-in .45s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(40) i {
    position: absolute;
    animation: anim-40 1s ease-out .45s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 114, 100%, 50%;
    box-shadow: 0 0 5px #1aff00
}

@keyframes gravity-41 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -31px
    }
}

@keyframes anim-41 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #4000ff;
        box-shadow: 0 0 #4000ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #4000ff
    }
    70% {
        background-color: #f70
    }
    97% {
        top: 75px;
        left: -4px;
        width: 4;
        transform: rotate(27deg);
        background-color: #02f;
        box-shadow: 0 0 9px 6px #02f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(41) {
    position: absolute;
    animation: gravity-41 1s ease-in .3s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(41) i {
    position: absolute;
    animation: anim-41 1s ease-out .3s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 247, 100%, 50%;
    box-shadow: 0 0 5px #1e00ff
}

@keyframes gravity-42 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -28px
    }
}

@keyframes anim-42 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #000dff;
        box-shadow: 0 0 #000dff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #000dff
    }
    70% {
        background-color: #ffb700
    }
    97% {
        top: 65px;
        left: 60px;
        width: 3;
        transform: rotate(-262deg);
        background-color: #0062ff;
        box-shadow: 0 0 2px 5px #0062ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(42) {
    position: absolute;
    animation: gravity-42 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(42) i {
    position: absolute;
    animation: anim-42 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 69, 100%, 50%;
    box-shadow: 0 0 5px #d9ff00
}

@keyframes gravity-43 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -46px
    }
}

@keyframes anim-43 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff0051;
        box-shadow: 0 0 #ff0051
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff0051
    }
    70% {
        background-color: #f90
    }
    97% {
        top: -18px;
        left: 68px;
        width: 2;
        transform: rotate(-103deg);
        background-color: #37ff00;
        box-shadow: 0 0 3px 3px #37ff00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(43) {
    position: absolute;
    animation: gravity-43 1s ease-in .1s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(43) i {
    position: absolute;
    animation: anim-43 1s ease-out .1s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 222, 100%, 50%;
    box-shadow: 0 0 5px #004cff
}

@keyframes gravity-44 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -36px
    }
}

@keyframes anim-44 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #f20;
        box-shadow: 0 0 #f20
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #f20
    }
    70% {
        background-color: #fffb00
    }
    97% {
        top: -56px;
        left: -61px;
        width: 3;
        transform: rotate(-59deg);
        background-color: #0d00ff;
        box-shadow: 0 0 1px 5px #0d00ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(44) {
    position: absolute;
    animation: gravity-44 1s ease-in .3s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(44) i {
    position: absolute;
    animation: anim-44 1s ease-out .3s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 66, 100%, 50%;
    box-shadow: 0 0 5px #e6ff00
}

@keyframes gravity-45 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -21px
    }
}

@keyframes anim-45 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #e100ff;
        box-shadow: 0 0 #e100ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #e100ff
    }
    70% {
        background-color: #ff5100
    }
    97% {
        top: 34px;
        left: -10px;
        width: 4;
        transform: rotate(188deg);
        background-color: #4800ff;
        box-shadow: 0 0 9px 5px #4800ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(45) {
    position: absolute;
    animation: gravity-45 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(45) i {
    position: absolute;
    animation: anim-45 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 314, 100%, 50%;
    box-shadow: 0 0 5px #ff00c3
}

@keyframes gravity-46 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -20px
    }
}

@keyframes anim-46 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff7b00;
        box-shadow: 0 0 #ff7b00
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff7b00
    }
    70% {
        background-color: #fb0
    }
    97% {
        top: -10px;
        left: 32px;
        width: 3;
        transform: rotate(-115deg);
        background-color: #ff00a2;
        box-shadow: 0 0 6px 4px #ff00a2
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(46) {
    position: absolute;
    animation: gravity-46 1s ease-in .5s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(46) i {
    position: absolute;
    animation: anim-46 1s ease-out .5s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 301, 100%, 50%;
    box-shadow: 0 0 5px #ff00fb
}

@keyframes gravity-47 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -49px
    }
}

@keyframes anim-47 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #f06;
        box-shadow: 0 0 #f06
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #f06
    }
    70% {
        background-color: #ff7b00
    }
    97% {
        top: 45px;
        left: 48px;
        width: 4;
        transform: rotate(311deg);
        background-color: #2f00ff;
        box-shadow: 0 0 6px 6px #2f00ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(47) {
    position: absolute;
    animation: gravity-47 1s ease-in .4s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(47) i {
    position: absolute;
    animation: anim-47 1s ease-out .4s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 328, 100%, 50%;
    box-shadow: 0 0 5px #f08
}

@keyframes gravity-48 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -40px
    }
}

@keyframes anim-48 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #ff3700;
        box-shadow: 0 0 #ff3700
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #ff3700
    }
    70% {
        background-color: #ffd900
    }
    97% {
        top: 51px;
        left: -31px;
        width: 3;
        transform: rotate(53deg);
        background-color: #1e00ff;
        box-shadow: 0 0 6px 6px #1e00ff
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(48) {
    position: absolute;
    animation: gravity-48 1s ease-in .2s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(48) i {
    position: absolute;
    animation: anim-48 1s ease-out .2s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 358, 100%, 50%;
    box-shadow: 0 0 5px #ff0008
}

@keyframes gravity-49 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -49px
    }
}

@keyframes anim-49 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #9d00ff;
        box-shadow: 0 0 #9d00ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #9d00ff
    }
    70% {
        background-color: #fb0
    }
    97% {
        top: 19px;
        left: -46px;
        width: 1;
        transform: rotate(-126deg);
        background-color: #d0ff00;
        box-shadow: 0 0 10px 9px #d0ff00
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(49) {
    position: absolute;
    animation: gravity-49 1s ease-in .35s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(49) i {
    position: absolute;
    animation: anim-49 1s ease-out .35s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 349, 100%, 50%;
    box-shadow: 0 0 5px #ff002f
}

@keyframes gravity-50 {
    0% {
        top: 0;
        left: 0
    }
    to {
        top: -37px
    }
}

@keyframes anim-50 {
    0% {
        top: 0;
        left: 0;
        opacity: 1;
        background-color: #0080ff;
        box-shadow: 0 0 #0080ff
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 #0080ff
    }
    70% {
        background-color: #ffa200
    }
    97% {
        top: 26px;
        left: -87px;
        width: 4;
        transform: rotate(333deg);
        background-color: #f0f;
        box-shadow: 0 0 8px 5px #f0f
    }
    to {
        opacity: 0
    }
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(50) {
    position: absolute;
    animation: gravity-50 1s ease-in .15s infinite
}

.allFestivalIndex .width .festivalContainer .firecracker span:nth-child(50) i {
    position: absolute;
    animation: anim-50 1s ease-out .15s infinite;
    width: 5px;
    height: 2px;
    border-radius: 100%;
    background: hsl 301, 100%, 50%;
    box-shadow: 0 0 5px #ff00fb
}

.allFestivalIndex .width .festivalContainer .countdown2 {
    text-align: center;
    direction: ltr
}

.allFestivalIndex .width .festivalContainer .countdown2 .countdown-section {
    display: inline-block;
    width: 120px
}

.allFestivalIndex .width .festivalContainer .countdown2 .countdown-section .countdown-time {
    border-radius: 20px;
    color: red;
    border: 3px solid red;
    display: block;
    height: 100px;
    line-height: 100px;
    width: 100px;
    font-size: 2.3rem;
    font-weight: 900;
    margin: auto;
    margin-bottom: .5rem
}

.allFestivalIndex .width .festivalContainer .countdown2 .countdown-section .countdown-label {
    color: #ffffffb3;
    font-size: 1rem;
    text-align: center;
    font-weight: 500
}

.allFestivalIndex .width .festivalContainer .countdown2 .countdown-section:last-child .countdown-time {
    color: var(--green-color);
    border: 3px solid var(--green-color)
}

@media screen and (max-width: 800px) {
    .allFestivalIndex .width .title {
        font-size: 1.2rem;
        margin-bottom: 2rem
    }

    .allFestivalIndex .width .festivalContainer {
        grid-template-columns:1fr;
        padding: 0
    }

    .allFestivalIndex .width .festivalContainer .firecracker {
        position: absolute;
        top: 0;
        opacity: 0;
        visibility: hidden
    }

    .allFestivalIndex .width .festivalContainer .countdown2 .countdown-section {
        width: 60px
    }

    .allFestivalIndex .width .festivalContainer .countdown2 .countdown-section .countdown-time {
        border: 1px solid red;
        height: 50px;
        line-height: 50px;
        width: 50px;
        font-size: 1.2rem
    }

    .allFestivalIndex .width .festivalContainer .countdown2 .countdown-section .countdown-label {
        font-size: .8rem
    }

    .allFestivalIndex .width .festivalContainer .countdown2 .countdown-section:last-child .countdown-time {
        border: 1px solid var(--green-color)
    }
}

.faqHome {
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    padding-bottom: 0;
    margin: auto;
    margin-top: 2rem
}

.faqHome div + div {
    clear: both
}

.faqHome p {
    line-height: 1.4em;
    color: #000
}

.faqHome .faq-title {
    font-size: 2em;
    margin-bottom: .5rem;
    color: #000
}

.faqHome .faq-list > div {
    border-bottom: .07em solid #eee;
    padding: 1.5em 0
}

.faqHome .faq-list > div:last-child {
    border: unset
}

.faqHome details > summary {
    list-style: none
}

.faqHome details > summary::-webkit-details-marker {
    display: none
}

.faqHome summary {
    font-size: 1.4em;
    font-weight: 700;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #000;
    transition: all .3s ease
}

.faqHome summary:hover {
    color: var(--green-color)
}

.faqHome details[open] summary ~ * {
    animation: sweep .5s ease-in-out
}

@keyframes sweep {
    0% {
        opacity: 0;
        margin-right: -10px
    }
    to {
        opacity: 1;
        margin-right: 1rem
    }
}

.faqHome details[open] summary {
    color: var(--green-color)
}

.faqHome details[open] p {
    border-right: 2px solid var(--green-color);
    margin-right: 1rem;
    padding-right: 1rem;
    margin-top: 1rem;
    opacity: 100;
    transition: all 3s ease
}

.faqHome details[open] summary:after {
    content: "-";
    font-size: 3.2em;
    margin: -33px .35em 0 0;
    font-weight: 200
}

.faqHome summary::-webkit-details-marker {
    display: none
}

.faqHome summary:after {
    background: transparent;
    border-radius: .3em;
    content: "+";
    color: var(--green-color);
    float: left;
    font-size: 1.8em;
    font-weight: 700;
    margin: -.3em .65em 0 0;
    padding: 0;
    text-align: center;
    width: 25px
}

@media screen and (max-width: 700px) {
    .faqHome .faq-title {
        font-size: 1.2rem
    }

    .faqHome summary {
        font-size: .85rem
    }

    .faqHome summary:after {
        margin: 0;
        font-size: 1rem
    }
}

.productList2 {
    margin: auto;
    margin-top: 3rem;
    display: grid;
    grid-template-columns:3fr 1fr;
    grid-gap: 1rem
}

.productList2 .products {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: var(--widget-color)
}

.productList2 .products .product {
    display: grid
}

.productList2 .products .product .pic {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 10px #0000001a;
    border: 1px solid #eee
}

.productList2 .products .product .pic img {
    width: 100%;
    object-fit: contain
}

.productList2 .products .product .title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin: .5rem 0;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.productList2 .products .product .price {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.productList2 .products .product .price .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.productList2 .products .product .price .price1, .productList2 .products .product .empty {
    font-size: 1rem;
    font-weight: 900;
    color: var(--red-color)
}

.productList2 .image {
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.productList2 .image .detail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    display: grid;
    align-content: start;
    justify-items: center;
    padding-top: 2rem
}

.productList2 .image .detail .title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
    margin: .5rem 0
}

.productList2 .image .detail a {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-decoration: underline
}

.productList2 .image .pic {
    height: 100%
}

.productList2 .image .pic img {
    height: 100%;
    object-fit: cover
}

@media screen and (max-width: 800px) {
    .productList2 {
        display: flex;
        flex-direction: column-reverse
    }

    .productList2 .products {
        grid-template-columns:1fr 1fr
    }

    .productList2 .products .product .title {
        font-size: .85rem
    }

    .productList2 .products .product .price .price1 {
        font-size: .8rem
    }

    .productList2 .products img {
        height: 10rem !important
    }

    .productList2 .image img {
        max-height: 15rem;
        width: 100%
    }
}

.productList3 {
    margin: auto;
    margin-top: 3rem;
    background: var(--widget-color);
    border-radius: 10px;
    overflow: hidden
}

.productList3 .products {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    grid-gap: 1rem;
    padding: 1rem
}

.productList3 .products .product {
    display: grid
}

.productList3 .products .product .pic {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 10px #0000001a;
    border: 1px solid #eee
}

.productList3 .products .product .pic img {
    width: 100%;
    object-fit: contain
}

.productList3 .products .product .title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin: .5rem 0;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.productList3 .products .product .price {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.productList3 .products .product .price .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.productList3 .products .product .price .price1, .productList3 .products .product .empty {
    font-size: 1rem;
    font-weight: 900;
    color: var(--red-color)
}

.productList3 .image {
    position: relative;
    overflow: hidden
}

.productList3 .image .detail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    display: grid;
    align-content: center;
    justify-items: center
}

.productList3 .image .detail .title {
    font-size: 2rem;
    font-weight: 500;
    color: #fff
}

.productList3 .image .detail a {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-decoration: underline;
    margin-top: .5rem
}

.productList3 .image .pic {
    z-index: 1
}

.productList3 .image .pic img {
    max-height: 20rem;
    width: 100%;
    object-fit: cover
}

@media screen and (max-width: 800px) {
    .productList3 .products {
        grid-template-columns:1fr 1fr
    }

    .productList3 .products .product .title {
        font-size: .85rem
    }

    .productList3 .products .product .price .price1 {
        font-size: .8rem
    }

    .productList3 .products img {
        height: 10rem !important
    }

    .productList3 .image .detail .title {
        font-size: 1.3rem
    }

    .productList3 .image .detail a {
        font-size: 1rem
    }

    .productList3 .image img {
        max-height: 15rem;
        width: 100%
    }
}

.allNewsIndex2 {
    margin: auto;
    margin-top: 2rem
}

.allNewsIndex2 .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allNewsIndex2 .title .title1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allNewsIndex2 .title a {
    font-size: 1rem;
    font-weight: 300;
    color: #19bfd3
}

.allNewsIndex2 .posts {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 2rem
}

.allNewsIndex2 .posts .right a {
    display: grid;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden;
    height: 100%
}

.allNewsIndex2 .posts .right a .pic {
    height: calc(100% - 3rem)
}

.allNewsIndex2 .posts .right a img {
    width: 100%;
    height: 100%
}

.allNewsIndex2 .posts .right a .title2 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    height: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    margin: .5rem;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allNewsIndex2 .posts .left ul {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem
}

.allNewsIndex2 .posts .left ul li a {
    display: grid;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden
}

.allNewsIndex2 .posts .left ul li a img {
    width: 100%
}

.allNewsIndex2 .posts .left ul li a .title2 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    margin: .5rem;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

@media screen and (max-width: 800px) {
    .allNewsIndex2 .posts, .allNewsIndex2 .posts .left ul {
        grid-template-columns:1fr
    }
}

.allHeaderIndex2 {
    position: relative;
    z-index: 8
}

.allHeaderIndex2 .topFixed {
    display: grid;
    background-repeat: no-repeat;
    background-size: cover
}

.allHeaderIndex2 .headerTop {
    background: var(--header2-color);
    box-shadow: 0 5px 5px #0000000d;
    padding: .5rem 0;
    position: relative
}

.allHeaderIndex2 .headerTop .block {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.allHeaderIndex2 .headerTop .block .right {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 2rem
}

.allHeaderIndex2 .headerTop .block .right .option {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: .5rem
}

.allHeaderIndex2 .headerTop .block .right .option i {
    display: grid;
    align-items: center
}

.allHeaderIndex2 .headerTop .block .right .option i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: var(--green-color)
}

.allHeaderIndex2 .headerTop .block .right .option .des {
    font-size: .8rem;
    font-weight: 300;
    color: #fff
}

.allHeaderIndex2 .headerTop .block .right .option:nth-child(2) .des {
    direction: ltr
}

.allHeaderIndex2 .headerTop .block .left {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 1rem
}

.allHeaderIndex2 .headerTop .block .left ul {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem
}

.allHeaderIndex2 .headerTop .block .left ul li {
    background: white;
    border-radius: 5px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.allHeaderIndex2 .headerTop .block .left ul li i {
    display: grid;
    align-items: center
}

.allHeaderIndex2 .headerTop .block .left ul li i svg {
    width: .8rem;
    height: .8rem;
    fill: #001736
}

.allHeaderIndex2 .headerTop .block .left .flagHeader {
    position: relative
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flag {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flag img {
    height: 2rem;
    width: 2rem
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flag i {
    display: grid;
    align-items: center
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flag i svg {
    width: .6rem;
    height: .6rem;
    fill: #fff
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flagList {
    position: absolute;
    top: 100%;
    right: 0;
    padding: .5rem;
    border-radius: 5px;
    background: var(--back1-color);
    box-shadow: 0 5px 10px #0000001a;
    z-index: 7
}

.allHeaderIndex2 .headerTop .block .left .flagHeader .flagList img {
    cursor: pointer;
    height: 2rem;
    width: 100%;
    object-fit: contain
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    width: 80%;
    z-index: 900;
    box-shadow: 0 1px 7px #00000040;
    overflow: scroll;
    display: none
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .title {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eee
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .title span {
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 1rem
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .title i {
    border-right: 1px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100%
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .title i svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: #000
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eee
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle a {
    color: #000;
    font-weight: 300;
    font-size: .85rem;
    padding: 0 1rem
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle i {
    border-right: 1px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100%
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsTitle i svg {
    width: .85rem;
    height: .85rem;
    fill: #000
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsList {
    background: var(--back2-color);
    display: none
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsList li ul {
    background: var(--back1-color)
}

.allHeaderIndex2 .headerTop .categoryHeaderResponsive .allCats li .allCatsList li ul li {
    background: var(--back2-color);
    border-right: 1px solid #eee
}

.allHeaderIndex2 .headerBot {
    display: block;
    background: var(--header-color);
    position: relative;
    box-shadow: 0 10px 10px #0000001a
}

.allHeaderIndex2 .headerBot nav {
    margin: auto;
    display: grid;
    grid-template-columns:auto 1fr auto;
    grid-gap: 1rem;
    align-items: center
}

.allHeaderIndex2 .headerBot .logo img {
    max-width: 9rem;
    height: 3rem;
    object-fit: contain
}

.allHeaderIndex2 .headerBot .headerList {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    grid-gap: 1.5rem;
    transition: all .3s ease-in-out
}

.allHeaderIndex2 .headerBot .headerList li {
    transition: all .3s ease-in-out
}

.allHeaderIndex2 .headerBot .headerList li:hover .divListContainer {
    visibility: visible;
    opacity: 1
}

.allHeaderIndex2 .headerBot .headerList li a {
    display: flex;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 500;
    font-size: .95rem;
    padding: 1rem 0;
    letter-spacing: .1px
}

.allHeaderIndex2 .headerBot .headerList li a i {
    display: grid;
    justify-content: right;
    align-items: center
}

.allHeaderIndex2 .headerBot .headerList li a i svg {
    fill: #000;
    width: .6rem;
    height: .6rem
}

.allHeaderIndex2 .headerBot .headerList li span {
    cursor: pointer;
    color: #000;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .1px
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 98%;
    transition: all .3s ease-in-out;
    background: var(--back3-color);
    width: 100%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 1rem;
    z-index: 990
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer .divListsContainer {
    right: 0;
    top: calc(100% - 10px);
    width: 100%;
    transition: all .3s ease-in-out;
    background: var(--back3-color);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 990
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer .divListsContainer .listsContainer {
    align-content: flex-start;
    align-items: baseline;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: var(--back1-color);
    box-shadow: 0 0 5px #0000000d;
    border-radius: 5px;
    padding: 1rem;
    height: 20rem
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer .divListsContainer .listsContainer a {
    box-shadow: 0 0;
    font-weight: 300;
    font-size: .8rem;
    background: transparent;
    color: #000;
    display: grid;
    opacity: .7;
    padding: 0;
    margin-bottom: .5rem;
    width: 11rem;
    margin-left: 2rem
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer .divListsContainer .listsContainer .active {
    display: flex;
    justify-content: right;
    gap: .5rem;
    align-items: center;
    transition: all .3s ease-in-out;
    color: #000;
    font-weight: 700;
    font-size: .9rem;
    opacity: 1
}

.allHeaderIndex2 .headerBot .headerList li .divListContainer .divListsContainer .listsContainer .active:before {
    width: 2px;
    height: 20px;
    background: var(--green-color);
    content: ""
}

.allHeaderIndex2 .headerBot .headerList .linkHead {
    position: relative
}

.allHeaderIndex2 .headerBot .headerList .linkHead:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--green-color);
    height: 3px;
    width: 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    transition: all .3s ease-in-out
}

.allHeaderIndex2 .headerBot .headerList .linkHead .tooltip {
    background: var(--red-color);
    border-radius: 5px;
    color: #fff;
    font-size: .65rem;
    font-weight: 300;
    position: absolute;
    top: 0;
    left: -10px;
    padding: 0 .3rem
}

.allHeaderIndex2 .headerBot .headerList .linkHead .tooltip:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    border-style: solid;
    border-width: 7px 7px 0 0;
    border-color: rgba(0, 0, 0, 0) var(--red-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    transform: rotate(-93deg)
}

.allHeaderIndex2 .headerBot .headerList .linkHead:hover:before {
    width: 100%
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #000;
    font-weight: 500;
    font-size: .95rem;
    cursor: pointer;
    padding: 1rem 0
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory i {
    display: grid;
    align-items: center
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems {
    position: absolute;
    top: 100%;
    right: 0;
    height: 0;
    left: 0;
    background: var(--back1-color);
    box-shadow: 0 10px 10px #00000026;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: .3rem;
    visibility: hidden;
    transition: all .3s ease-in-out;
    opacity: 0;
    margin: auto;
    z-index: 5;
    overflow: hidden
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem {
    display: grid;
    grid-template-columns:auto 1fr
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem:hover .allHeaderHomeBlockBotCategoryItemLists {
    visibility: visible
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem:hover .allHeaderHomeBlockBotCategoryItemTitle {
    background: var(--back2-color)
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem:hover .allHeaderHomeBlockBotCategoryItemTitle i {
    opacity: 1;
    visibility: visible
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem:first-child .allHeaderHomeBlockBotCategoryItemLists {
    visibility: visible
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemTitle {
    display: grid;
    grid-template-columns:1fr auto;
    padding: .5rem 2rem .5rem .5rem;
    width: 15rem;
    height: 2.5rem;
    color: #000;
    font-weight: 300;
    letter-spacing: .5px;
    font-size: .8rem;
    position: relative;
    border-bottom: 1px solid #eee
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemTitle:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: .5rem;
    margin: auto;
    width: 1rem;
    height: 6px;
    background: #1ea8a0;
    /*background: var(--green-color);*/
    border-radius: 5rem
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemTitle i {
    visibility: hidden;
    opacity: 0;
    display: grid;
    transition: all .3s ease-in-out;
    align-items: center
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemTitle i svg {
    width: .8rem;
    height: .8rem;
    fill: var(--green-color)
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists {
    position: absolute;
    right: 15rem;
    visibility: hidden;
    top: 0;
    width: 80%;
    padding: .5rem;
    background: var(--back1-color);
    transition: all .3s ease-in-out;
    height: 35rem;
    overflow: hidden;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists .allHeaderHomeBlockBotCategoryItemList {
    margin-bottom: 1rem;
    width: 11rem;
    margin-left: 3rem;
    text-align: right
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists .allHeaderHomeBlockBotCategoryItemList a {
    color: #000;
    font-weight: 300;
    font-size: .8rem;
    margin-top: .5rem;
    display: grid;
    text-align: right;
    padding: 0
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists .allHeaderHomeBlockBotCategoryItemList a i svg {
    width: .7rem;
    height: .7rem;
    fill: #000
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists .allHeaderHomeBlockBotCategoryItemList .active {
    display: flex;
    justify-content: right;
    gap: .5rem;
    align-items: center;
    transition: all .3s ease-in-out;
    color: #000;
    font-weight: 500;
    font-size: .9rem
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory .allHeaderHomeBlockBotCategoryItems .allHeaderHomeBlockBotCategoryItem .allHeaderHomeBlockBotCategoryItemLists .allHeaderHomeBlockBotCategoryItemList .active:before {
    width: 2px;
    height: 20px;
    background: #1ea8a0;
    /*background: var(--green-color);*/
    content: ""
}

.allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory:hover .allHeaderHomeBlockBotCategoryItems {
    visibility: visible;
    opacity: 1;
    height: 35rem
}

.allHeaderIndex2 .headerBot .left {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem
}

.allHeaderIndex2 .headerBot .left .searchHead i {
    display: grid;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 100%;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid #000;
    cursor: pointer
}

.allHeaderIndex2 .headerBot .left .searchHead i svg {
    transition: all .3s ease-in-out;
    width: 1rem;
    height: 1rem;
    fill: #000;
    transform: rotate(0)
}

.allHeaderIndex2 .headerBot .left .themeButton1 button {
    display: grid;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 100%;
    width: 2.7rem;
    height: 2.7rem;
    background: var(--green-color)
}

.allHeaderIndex2 .headerBot .left .themeButton1 button svg {
    transition: all .3s ease-in-out;
    width: 1.7rem;
    height: 1.7rem;
    fill: #fff;
    transform: rotate(0)
}

.allHeaderIndex2 .headerBot .left .headerCart {
    position: relative;
    display: grid
}

.allHeaderIndex2 .headerBot .left .headerCart .showCartEmpty {
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    padding: 1rem
}

.allHeaderIndex2 .headerBot .left .headerCart .showCartEmpty i {
    display: grid;
    justify-content: center
}

.allHeaderIndex2 .headerBot .left .headerCart .showCartEmpty i svg {
    width: 3rem;
    height: 3rem;
    fill: var(--green-color)
}

.allHeaderIndex2 .headerBot .left .headerCart .showCartEmpty .title1, .allHeaderIndex2 .headerBot .left .headerCart .showCartEmpty h3 {
    font-weight: 500;
    font-size: 1rem;
    color: #000;
    margin-top: .5rem;
    text-align: center
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    cursor: pointer;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 100%;
    position: relative
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn i svg {
    fill: #000;
    width: 1.2rem;
    height: 1.2rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn .cartCount {
    position: absolute;
    bottom: -.7px;
    left: -1.5px;
    color: #fff;
    background: var(--green-color);
    font-size: .7rem;
    font-weight: 300;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: rgba(0, 0, 0, .4)
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartContainer {
    width: 30rem;
    box-shadow: 0 5px 25px #0000001a;
    background: var(--back1-color);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 100%;
    overflow: hidden
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .liCart {
    height: calc(100% - 4rem);
    overflow-y: scroll;
    scrollbar-width: 1rem;
    scrollbar-color: rgba(0, 0, 0, .1) transparent
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .liCart::-webkit-scrollbar {
    width: 5px
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .liCart::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .1)
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .liCart::-webkit-scrollbar-thumb {
    background-color: #0000001a;
    border-radius: 10px;
    border: 3px solid rgba(0, 0, 0, .1)
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li {
    position: relative;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .3rem;
    padding: 1rem;
    border-bottom: 1px solid #eee
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartPic {
    height: 6rem;
    width: 6rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartPic img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle .title2 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    margin-bottom: .5rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle .title2:nth-child(2) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle .title2:nth-child(3) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle .title2:nth-child(4) {
    font-size: .8rem;
    font-weight: 300;
    opacity: .7
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle i {
    position: absolute;
    left: .5rem;
    top: .5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 5rem;
    box-shadow: 0 0;
    cursor: pointer;
    border: 0
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle i svg {
    fill: var(--red-color);
    width: 1rem;
    height: 1rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTextItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .8rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTextItem .cartPrice span {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    font-weight: 900;
    font-size: 1rem;
    color: var(--green-color)
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li:last-child {
    border-bottom: 0
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartBot {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem;
    align-items: center;
    height: 4rem;
    background: var(--back2-color);
    padding: .5rem
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartBot a {
    background: orange;
    padding: .5rem 1rem;
    color: #fff;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300;
    text-align: center
}

.allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartBot a:nth-child(2) {
    background: var(--green-color)
}

.allHeaderIndex2 .headerBot .left .user {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: .3rem;
    justify-content: left;
    align-items: center;
    position: relative
}

.allHeaderIndex2 .headerBot .left .user .pic {
    cursor: pointer
}

.allHeaderIndex2 .headerBot .left .user .pic img {
    width: 2.7rem;
    height: 2.7rem;
    object-fit: cover;
    border-radius: 100%
}

.allHeaderIndex2 .headerBot .left .user ul {
    background: var(--back1-color);
    position: absolute;
    top: 105%;
    left: 0;
    width: 13rem;
    border-radius: 10px;
    transition: all .3s ease-in-out;
    box-shadow: 0 5px 25px #0000001a;
    border: 1px solid #eee;
    z-index: 100;
    display: none
}

.allHeaderIndex2 .headerBot .left .user ul li {
    color: #000
}

.allHeaderIndex2 .headerBot .left .user ul li .picUser {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 5rem;
    overflow: hidden
}

.allHeaderIndex2 .headerBot .left .user ul li .picUser img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.allHeaderIndex2 .headerBot .left .user ul li .infoUser {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .2rem
}

.allHeaderIndex2 .headerBot .left .user ul li .infoUser span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 300
}

.allHeaderIndex2 .headerBot .left .user ul li a {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    padding: .7rem;
    background: transparent;
    color: #000;
    font-size: .75rem;
    font-weight: 300;
    width: 10rem
}

.allHeaderIndex2 .headerBot .left .user ul li a i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex2 .headerBot .left .user ul li a i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allHeaderIndex2 .headerBot .left .user ul li:first-child {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    background: transparent;
    grid-gap: .5rem;
    border-bottom: 1px solid #eee;
    padding: .5rem
}

.allHeaderIndex2 .headerBot .left .user ul li:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden
}

.allHeaderIndex2 .headerBot .left .login {
    border: 1px solid #000;
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%
}

.allHeaderIndex2 .headerBot .left .login i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex2 .headerBot .left .login i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allHeaderIndex2 .allSearchData {
    display: none
}

.allHeaderIndex2 .allSearchData .searchData {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 10px 10px #0000001a;
    background: var(--back4-color);
    background-size: 200% auto;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    animation: shine4 1s linear infinite
}

.allHeaderIndex2 .allSearchData .searchData label {
    display: grid;
    grid-template-columns:1fr auto auto;
    align-items: center
}

.allHeaderIndex2 .allSearchData .searchData button {
    background: transparent;
    display: grid;
    align-items: center
}

.allHeaderIndex2 .allSearchData .searchData svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #000;
    margin-left: 1rem
}

.allHeaderIndex2 .allSearchData .searchData svg:hover {
    fill: #000
}

.allHeaderIndex2 .allSearchData .searchData i {
    padding: 1rem;
    display: grid;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #eee;
    background: transparent
}

.allHeaderIndex2 .allSearchData .searchData i svg {
    margin-left: 0
}

.allHeaderIndex2 .allSearchData .searchData input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    background: transparent
}

@keyframes shine4 {
    to {
        background-position: 200% center
    }
}

.allHeaderIndex2 .allSearchData ul {
    background: var(--back2-color);
    box-shadow: 0 10px 10px #0000001a;
    z-index: 100;
    max-height: 18rem;
    overflow-y: scroll;
    width: 100%
}

.allHeaderIndex2 .allSearchData ul li a {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    grid-gap: .5rem;
    padding: .5rem
}

.allHeaderIndex2 .allSearchData ul li a .pic {
    display: grid;
    justify-content: center
}

.allHeaderIndex2 .allSearchData ul li a .pic img {
    width: 3rem;
    height: 3rem
}

.allHeaderIndex2 .allSearchData ul li a .subject h3 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    margin-bottom: .3rem
}

.allHeaderIndex2 .allSearchData ul li a .subject h5 {
    opacity: .7;
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allHeaderIndex2 .allSearchData ul li a .price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-color);
    letter-spacing: .1px
}

.allHeaderIndex2 .allSearchData ul li:nth-child(2n) {
    background: var(--back1-color)
}

.allHeaderIndex2 .allSearchData .searchLoad {
    display: grid;
    justify-content: center;
    align-items: center
}

.allHeaderIndex2 .allSearchData .searchLoad .loading {
    width: 1.4rem;
    height: 1.4rem;
    fill: #000;
    animation: arrow-anim2 .5s ease infinite
}

.allHeaderIndex2 .allSearchData:before {
    content: "";
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5
}

@media screen and (max-width: 800px) {
    .allHeaderIndex2 .topFixed {
        visibility: hidden;
        opacity: 0;
        top: -10rem;
        position: absolute
    }

    .allHeaderIndex2 .headerTop {
        padding: .5rem 0
    }

    .allHeaderIndex2 .headerTop .block {
        justify-content: center;
    }

    .allHeaderIndex2 .headerTop .block .right {
        gap: .5rem
    }

    .allHeaderIndex2 .headerTop .block .right .option {
        gap: .2rem
    }

    .allHeaderIndex2 .headerTop .block .right .option i svg {
        width: .6rem;
        height: .6rem
    }

    .allHeaderIndex2 .headerTop .block .right .option .des {
        font-size: .5rem
    }

    .allHeaderIndex2 .headerTop .block .left ul {
        display: none
    }

    .allHeaderIndex2 .headerTop .block .left .flagHeader {
        position: relative
    }

    .allHeaderIndex2 .headerTop .block .left .flagHeader .flag img {
        height: 1.5rem;
        width: 1.5rem
    }

    .allHeaderIndex2 .headerBot {
        padding: .5rem 0;
        z-index: 5
    }

    .allHeaderIndex2 .headerBot nav {
        margin: auto;
        display: grid;
        grid-template-columns:auto 1fr auto;
        grid-gap: 1rem;
        align-items: center
    }

    .allHeaderIndex2 .headerBot .logo img {
        max-width: 7rem;
        height: 2rem;
        object-fit: contain
    }

    .allHeaderIndex2 .headerBot .headerList li, .allHeaderIndex2 .headerBot .headerList .allHeaderHomeBlockBotCategory {
        display: none
    }

    .allHeaderIndex2 .headerBot .left {
        gap: .5rem
    }

    .allHeaderIndex2 .headerBot .left .searchHead {
        display: none
    }

    .allHeaderIndex2 .headerBot .left .themeButton1 button {
        width: 1.5rem;
        height: 1.5rem
    }

    .allHeaderIndex2 .headerBot .left .themeButton1 button svg {
        width: .9rem;
        height: .9rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn {
        width: 1.5rem;
        height: 1.5rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn i {
        display: grid;
        justify-content: center;
        align-items: center
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn i svg {
        width: .9rem;
        height: .9rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .cartShowBtn .cartCount {
        bottom: -.3rem;
        left: -1.5px;
        font-size: .6rem;
        width: .8rem;
        height: .8rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartContainer {
        width: 20rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li {
        padding: .5rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartPic {
        height: 3rem;
        width: 3rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle h4 {
        font-size: .7rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle h4:nth-child(2) {
        font-size: .5rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle h4:nth-child(3) {
        font-size: .5rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle h4:nth-child(4) {
        font-size: .5rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle i {
        width: .7rem;
        height: .7rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTitle i svg {
        width: .7rem;
        height: .7rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTextItem .cartPrice span {
        font-size: .7rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 ul li .cartText .cartTextItem .cartPrice span:after {
        font-size: .7rem
    }

    .allHeaderIndex2 .headerBot .left .headerCart .headerCartItems .showCart2 .showCartBot a {
        padding: .5rem;
        font-size: .7rem
    }

    .allHeaderIndex2 .headerBot .left .user, .allHeaderIndex2 .headerBot .left .login {
        display: none
    }

    .allHeaderIndex2 .headerBot .left .flagHeader {
        position: relative
    }

    .allHeaderIndex2 .headerBot .left .flagHeader .flag img {
        height: 2rem;
        width: 2rem
    }

    .allHeaderIndex2 .headerBot .left .flagHeader .flag i svg {
        width: .5rem;
        height: .5rem
    }
}

.allCompare {
    margin: auto;
    margin-top: 2rem
}

.allCompare .titleCompare {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000
}

.allCompare .compareItems {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap: 2rem;
    margin-top: 1rem
}

.allCompare .compareItems .compareItem {
    position: relative;
    min-height: 20rem;
    background: var(--back1-color);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px #0000001a
}

.allCompare .compareItems .compareItem .addCompare {
    position: absolute;
    top: 40%;
    right: 0;
    left: 0
}

.allCompare .compareItems .compareItem .addCompare i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allCompare .compareItems .compareItem .addCompare i svg {
    width: 3rem;
    height: 3rem;
    fill: var(--green-color)
}

.allCompare .compareItems .compareItem .addCompare .title2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--green-color);
    text-align: center;
    margin-top: 1rem
}

.allCompare .compareItems .compareItem .productData {
    padding: 1rem;
    position: relative
}

.allCompare .compareItems .compareItem .productData .closeCompare {
    position: absolute;
    left: .5rem;
    top: .5rem
}

.allCompare .compareItems .compareItem .productData .closeCompare i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allCompare .compareItems .compareItem .productData .closeCompare i svg {
    width: 2rem;
    height: 2rem;
    fill: red
}

.allCompare .compareItems .compareItem .productData .pic {
    display: grid;
    align-items: center;
    justify-content: center
}

.allCompare .compareItems .compareItem .productData .pic img {
    width: 100%;
    height: 12rem;
    object-fit: contain
}

.allCompare .compareItems .compareItem .productData .title2 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin: 1rem 0
}

.allCompare .compareItems .compareItem .productData a {
    display: grid;
    width: 100%;
    padding: .5rem;
    font-size: 1rem;
    color: #fff;
    background: var(--green-color);
    border-radius: 5px;
    text-align: center
}

.allCompare .compareTable {
    margin-top: 2rem
}

.allCompare .compareTable table {
    display: grid;
    grid-template-columns:1fr;
    margin-top: 0
}

.allCompare .compareTable table tr {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    background: var(--back1-color);
    padding: .5rem
}

.allCompare .compareTable table tr td {
    padding: .5rem;
    border-left: 1px solid #eee
}

.allCompare .compareTable table tr td .title2 {
    font-size: .9rem;
    font-weight: 700;
    text-align: right
}

.allCompare .compareTable table tr td .price1 {
    font-weight: 300;
    color: green;
    font-size: .9rem
}

.allCompare .compareTable table tr td span {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    display: grid
}

.allCompare .compareTable table tr td:last-child {
    border-left: 0
}

.allCompare .compareTable table tr:nth-child(odd) {
    background: var(--back2-color)
}

.allCompare .showAllProducts {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    overflow-y: scroll;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    align-items: center
}

.allCompare .showAllProducts .productItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 90%;
    border-radius: 5px;
    margin: auto;
    margin-top: 1rem
}

.allCompare .showAllProducts .productItems .showProductTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #eee;
    padding-bottom: .5rem;
    margin-bottom: .5rem
}

.allCompare .showAllProducts .productItems .showProductTitle .title2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allCompare .showAllProducts .productItems .showProductTitle i {
    display: grid;
    align-items: center;
    cursor: pointer
}

.allCompare .showAllProducts .productItems .showProductTitle i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allCompare .showAllProducts .productItems .searchShow {
    margin-bottom: 1rem
}

.allCompare .showAllProducts .productItems .searchShow input {
    display: grid;
    width: 100%;
    padding: .8rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    background: var(--back2-color);
    border-radius: 5px
}

.allCompare .showAllProducts .productItems .allProducts {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));
    grid-gap: 1rem;
    align-items: center
}

.allCompare .showAllProducts .productItems .allProducts .productItem {
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    cursor: pointer
}

.allCompare .showAllProducts .productItems .allProducts .productItem .pic {
    display: grid;
    justify-content: center
}

.allCompare .showAllProducts .productItems .allProducts .productItem .pic img {
    height: 10rem;
    width: 100%;
    object-fit: contain
}

.allCompare .showAllProducts .productItems .allProducts .productItem .title1, .allCompare .showAllProducts .productItems .allProducts .productItem .price1 {
    font-size: .8rem;
    font-weight: 300;
    margin-top: 1rem;
    color: #000;
    text-align: center
}

.allCompare .showAllProducts .productItems .allProducts .productItem .price1 {
    font-size: .85rem;
    color: var(--green-color)
}

@media screen and (max-width: 800px) {
    .allCompare .showAllProducts .productItems .allProducts {
        grid-template-columns:1fr 1fr;
        grid-gap: .5rem
    }

    .allCompare .showAllProducts .productItems .allProducts .productItem .title1, .allCompare .showAllProducts .productItems .allProducts .productItem .price1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        font-size: .65rem
    }
}

@media screen and (max-width: 800px) {
    .allCompare {
        overflow-x: scroll
    }

    .allCompare .compareItems {
        grid-template-columns:repeat(4, 11rem);
        grid-gap: 1rem
    }

    .allCompare .compareItems .compareItem {
        width: 11rem
    }

    .allCompare .compareItems .compareItem .addCompare i svg {
        width: 2rem;
        height: 2rem
    }

    .allCompare .compareItems .compareItem .addCompare .title2 {
        font-size: .9rem
    }

    .allCompare .compareItems .compareItem .productData .closeCompare i svg {
        width: 1rem;
        height: 1rem
    }

    .allCompare .compareItems .compareItem .productData .pic img {
        height: 12rem
    }

    .allCompare .compareItems .compareItem .productData .title2 {
        font-size: .75rem;
        margin: .5rem 0
    }

    .allCompare .compareItems .compareItem .productData a {
        font-size: .8rem
    }

    .allCompare .compareTable table tr {
        grid-template-columns:repeat(4, 11rem);
        grid-gap: 1rem
    }

    .allCompare .compareTable table tr td {
        width: 11rem
    }
}

.allGiftIndex {
    margin: auto;
    margin-top: 3rem
}

.allGiftIndex .gift-bubbles {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: center;
    grid-gap: 2rem;
    align-items: center;
    margin-bottom: 75px
}

.allGiftIndex .alert {
    text-align: center;
    background: rgba(255, 0, 0, .1);
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 2rem;
    color: red;
    font-size: 1rem;
    font-weight: 500
}

.allGiftIndex .gift-bubble-wrapper {
    width: 100px
}

.allGiftIndex .gift-bubble-item {
    margin: auto;
    background: var(--back3-color);
    border-radius: 50%;
    width: 66.6666666667px;
    height: 66.6666666667px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: default;
    box-shadow: 0 0 10px #0000004d;
    font-size: 1.4rem
}

.allGiftIndex .christmas-gifts {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: center;
    grid-gap: 2rem;
    align-items: center;
    margin-bottom: 75px
}

.allGiftIndex .gift-wrapper {
    position: relative
}

.allGiftIndex .gift-wrapper.jump:hover {
    cursor: pointer;
    animation: wrapperHover .75s
}

.allGiftIndex .gift-wrapper.jump:hover .gift-box {
    animation: giftBoxHover .85s
}

.allGiftIndex .gift-box {
    background: #d3000a;
    width: 100px;
    height: 100px;
    transition: .25s;
    border-radius: 3.0303030303px;
    position: relative;
    box-shadow: 0 0 1px 1px #222;
    z-index: 2
}

.allGiftIndex .gift-box:before, .allGiftIndex .gift-box:after {
    background: #090;
    content: "";
    display: block;
    position: absolute;
    box-shadow: 0 0 1px #222
}

.allGiftIndex .gift-box:before {
    top: 50%;
    width: 100%;
    height: 19px;
    transform: translateY(-50%)
}

.allGiftIndex .gift-box:after {
    top: 0;
    left: 50%;
    height: 100%;
    width: 19px;
    transform: translate(-50%)
}

.allGiftIndex .gift-box > span {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 10px;
    text-align: center;
    font-size: .7rem;
    background: #fff;
    color: #d3000a;
    font-weight: 700;
    width: 20px;
    height: 25px;
    line-height: 30px;
    border-radius: 0 0 3px 2px;
    box-shadow: 0 0 1px #222
}

.allGiftIndex .gift-box > span:before {
    display: inline-block
}

.allGiftIndex .gift-wrapper:nth-of-type(1) .gift-box > span:before {
    content: " 1 "
}

.allGiftIndex .gift-wrapper:nth-of-type(2) .gift-box > span:before {
    content: " 2 "
}

.allGiftIndex .gift-wrapper:nth-of-type(3) .gift-box > span:before {
    content: " 3 "
}

.allGiftIndex .gift-wrapper:nth-of-type(4) .gift-box > span:before {
    content: " 4 "
}

.allGiftIndex .gift-wrapper:nth-of-type(5) .gift-box > span:before {
    content: " 5 "
}

.allGiftIndex .gift-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 66.6666666667px;
    height: 66.6666666667px;
    background: transparent
}

.allGiftIndex .gift-ribbon:before, .allGiftIndex .gift-ribbon:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 19px;
    background: #090;
    box-shadow: 0 0 1px 1px #222
}

.allGiftIndex .gift-ribbon:before {
    transform: rotate(45deg);
    border-radius: 0 0 0 10px
}

.allGiftIndex .gift-ribbon:after {
    transform: rotate(-45deg);
    border-radius: 0 0 10px
}

.allGiftIndex .promo-wrapper {
    margin-bottom: 75px
}

.allGiftIndex .promo-wrapper h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000
}

.allGiftIndex .promo-wrapper h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    margin-top: 1rem
}

.allGiftIndex .promo-wrapper, .allGiftIndex .congrats-wrapper {
    width: 100%;
    text-align: center
}

.allGiftIndex .promo-wrapper span, .allGiftIndex .congrats-wrapper span {
    display: block;
    margin: .5rem 0;
    font-size: 1rem
}

.allGiftIndex .discount, .allGiftIndex .codeword {
    color: #090
}

.allGiftIndex .discount i, .allGiftIndex .codeword i {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 1.7rem;
    animation: arrow-anim2 .5s ease infinite
}

.allGiftIndex .discount i svg, .allGiftIndex .codeword i svg {
    width: 1.5rem;
    height: 1.5rem
}

@-moz-keyframes wrapperHover {
    0% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-30%)
    }
    50% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(4%)
    }
    70% {
        transform: translateY(0)
    }
}

@-webkit-keyframes wrapperHover {
    0% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-30%)
    }
    50% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(4%)
    }
    70% {
        transform: translateY(0)
    }
}

@-o-keyframes wrapperHover {
    0% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-30%)
    }
    50% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(4%)
    }
    70% {
        transform: translateY(0)
    }
}

@keyframes wrapperHover {
    0% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-30%)
    }
    50% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(4%)
    }
    70% {
        transform: translateY(0)
    }
}

@-moz-keyframes giftBoxHover {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.95, 1.05)
    }
    50% {
        transform: scale(1)
    }
    60% {
        transform: scale(1.1, .9)
    }
    70% {
        transform: scale(1)
    }
}

@-webkit-keyframes giftBoxHover {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.95, 1.05)
    }
    50% {
        transform: scale(1)
    }
    60% {
        transform: scale(1.1, .9)
    }
    70% {
        transform: scale(1)
    }
}

@-o-keyframes giftBoxHover {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.95, 1.05)
    }
    50% {
        transform: scale(1)
    }
    60% {
        transform: scale(1.1, .9)
    }
    70% {
        transform: scale(1)
    }
}

@keyframes giftBoxHover {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.95, 1.05)
    }
    50% {
        transform: scale(1)
    }
    60% {
        transform: scale(1.1, .9)
    }
    70% {
        transform: scale(1)
    }
}

@media screen and (max-width: 800px) {
    .allGiftIndex .promo-wrapper {
        margin-bottom: 50px
    }

    .allGiftIndex .promo-wrapper h1 {
        font-size: 1.1rem
    }

    .allGiftIndex .promo-wrapper h3 {
        font-size: .9rem;
        margin-top: .5rem
    }

    .allGiftIndex .gift-box, .allGiftIndex .gift-bubble-wrapper, .allGiftIndex .gift-bubble-item {
        width: 40px;
        height: 40px;
        font-size: .8rem
    }

    .allGiftIndex .gift-ribbon {
        width: 40px;
        height: 40px
    }

    .allGiftIndex .gift-ribbon:before, .allGiftIndex .gift-ribbon:after {
        height: 8px
    }
}

.allFaqIndex {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    margin: auto;
    margin-top: 1rem
}

.allFaqIndex h1 {
    font-size: 2rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-bottom: 1rem
}

.allFaqIndex .alert {
    background: rgba(255, 0, 0, .15);
    color: #790000;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allFaqIndex .success {
    background: rgba(0, 255, 0, .1);
    color: green;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allFaqIndex .questions .questionIndex {
    margin-bottom: 1rem
}

.allFaqIndex .questions .questionIndex .title {
    background: var(--back2-color);
    padding: 1rem;
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 5px #00000005
}

.allFaqIndex .questions .questionIndex .title h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allFaqIndex .questions .questionIndex .title i {
    display: grid;
    align-items: center
}

.allFaqIndex .questions .questionIndex .title i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allFaqIndex .questions .questionIndex .description {
    background: var(--back2-color);
    padding: 1rem;
    border-radius: 5px;
    margin-top: -5px;
    transition: all .3s ease-in-out;
    position: relative;
    z-index: 1;
    display: none
}

.allFaqIndex .questions .questionIndex .description p {
    font-size: .85rem;
    font-weight: 300;
    color: #000
}

.allFaqIndex .questions .questionIndex .slide-fade-enter-active, .allFaqIndex .questions .questionIndex .slide-fade-leave-active {
    transition: all .3s ease-in-out
}

.allFaqIndex .questions .questionIndex .slide-fade-enter, .allFaqIndex .questions .questionIndex .slide-fade-leave-to {
    transform: translateY(-30px)
}

.allFaqIndex .questions h5 {
    text-align: center;
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    padding-top: 1rem
}

.allFaqIndex .ticketButtons {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    grid-gap: 1rem
}

.allFaqIndex .ticketButtons button, .allFaqIndex .ticketButtons h4 {
    cursor: pointer;
    padding: .3rem 1rem;
    background: var(--green-color);
    font-size: .85rem;
    font-weight: 300;
    color: #fff;
    border-radius: 5px
}

.allFaqIndex .ticketButtons h4 {
    background: red
}

.allFaqIndex .tickets {
    display: none
}

.allFaqIndex .tickets h3 {
    font-size: 2rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-bottom: 1rem
}

.allFaqIndex .tickets .items {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(30rem, 1fr));
    grid-gap: 1rem;
    margin-bottom: 1rem
}

.allFaqIndex .tickets .item label {
    color: #000;
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .5rem;
    display: grid
}

.allFaqIndex .tickets .item select, .allFaqIndex .tickets .item input {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .9rem;
    width: 100%;
    font-weight: 300;
    transition: all .3s ease-in-out
}

.allFaqIndex .tickets .item select:focus, .allFaqIndex .tickets .item input:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allFaqIndex .tickets .item textarea {
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .7rem;
    width: 100%;
    height: 15rem;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    resize: vertical;
    outline: transparent
}

.allFaqIndex .tickets .item textarea:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

@media screen and (max-width: 800px) {
    .allFaqIndex .tickets .items {
        display: block
    }
}

.allTicketForm {
    margin: auto;
    margin-top: 2rem;
    background: white;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a
}

.allTicketForm .tabs {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allTicketForm .tabs .tab {
    font-size: 1rem;
    font-weight: 500;
    background: #eee;
    color: #000;
    cursor: pointer;
    text-align: center;
    padding: .5rem;
    border-radius: 5px
}

.allTicketForm .tabs .active {
    background: var(--green-color);
    color: #fff
}

.allTicketForm .createTicket .body {
    margin-top: 1rem
}

.allTicketForm .createTicket .body p {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allTicketForm .createTicket .body p .closeChats {
    padding: .2rem .4rem;
    background: red;
    color: #fff;
    border-radius: 5px;
    font-size: .7rem;
    cursor: pointer;
    display: none
}

.allTicketForm .createTicket .body .choice {
    display: grid;
    padding: .8rem;
    border: 1px solid #bbb;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: .5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.allTicketForm .createTicket .body .choice:hover {
    color: var(--green-color);
    border: 1px solid var(--green-color)
}

.allTicketForm .createTicket .body .login {
    display: grid
}

.allTicketForm .createTicket .body .bodyLabel {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: 1rem
}

.allTicketForm .createTicket .body .bodyLabel input, .allTicketForm .createTicket .body .bodyLabel select, .allTicketForm .createTicket .body .bodyLabel textarea {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300;
    width: 100%;
    transition: all .3s ease-in-out
}

.allTicketForm .createTicket .body .messages {
    padding: .5rem;
    border: 2px solid var(--green-color);
    border-radius: 5px;
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allTicketForm .createTicket .body .messages .time {
    text-align: left;
    font-size: .7rem
}

.allTicketForm .createTicket .body .me {
    border: 2px solid #bbb
}

.allTicketForm .createTicket .body .submit {
    font-size: .9rem;
    font-weight: 500;
    color: var(--green-color);
    text-align: center;
    background: transparent;
    width: 100%;
    border: 1px solid var(--green-color);
    padding: .5rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    transition: all .3s ease-in-out
}

.allTicketForm .createTicket .body .submit:hover {
    background: var(--green-color);
    color: #fff
}

.allTicketForm .createTicket .body .sendImage {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    box-shadow: 0 0 10px #0000000d;
    margin-top: 1rem
}

.allTicketForm .createTicket .body .sendImage .dropify-wrapper {
    height: 100px;
    border: 1px solid #eee !important
}

.allTicketForm .createTicket .body .sendImage .dropify-wrapper .file-icon:before {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    visibility: hidden !important
}

.allTicketForm .createTicket .body .sendImage .dropify-wrapper .dropify-message {
    position: relative !important;
    top: auto !important;
    margin-top: 2rem
}

.allTicketForm .createTicket .body .sendImage .dropify-wrapper .dropify-message p {
    margin: 0;
    font-size: 1rem;
    color: #00800082
}

.allSingleIndex {
    margin-top: -3.5rem
}

.allSingleIndex .singleBackground {
    background-image: url(/img/shopBack.jpg);
    background-repeat: repeat;
    height: 12rem;
    filter: grayscale(.3);
    position: relative
}

.allSingleIndex .singleBackground:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--green-color);
    opacity: .9;
    z-index: 100
}

.allSingleIndex .address {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: -6rem;
    position: relative;
    z-index: 2
}

.allSingleIndex .address a {
    font-size: .9rem;
    font-weight: 500;
    color: #fff
}

.allSingleIndex .address a:after {
    content: "/";
    padding: 0 .8rem
}

.allSingleIndex .address a:last-child {
    opacity: 1;
    color: #fff
}

.allSingleIndex .address a:last-child:after {
    content: "";
    padding: 0
}

.allSingleIndex .topSingle {
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    margin: auto;
    position: relative;
    z-index: 2;
    overflow-y: hidden;
    margin-top: 2rem;
    display: grid;
    grid-template-columns:1fr 2fr
}

.allSingleIndex .topSingle .imageContainer {
    padding: 1rem
}

.allSingleIndex .topSingle .imageContainer .suggestProduct {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: 1rem;
    background: var(--back2-color);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .imageContainer .suggestProduct .title2 {
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex .topSingle .imageContainer .suggestProduct .countdown {
    text-align: center;
    direction: ltr
}

.allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section {
    display: inline-block;
    width: 55px
}

.allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section .countdown-time {
    background-color: var(--back1-color);
    border-radius: 50%;
    color: #000;
    display: block;
    height: 45px;
    line-height: 45px;
    margin: auto;
    width: 45px;
    font-size: .9rem;
    box-shadow: 0 0 10px #0003
}

.allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section:last-child .countdown-time {
    background-color: var(--green-color);
    color: #fff;
    font-size: 1.1rem
}

.allSingleIndex .topSingle .imageContainer .options {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    grid-gap: .5rem;
    align-items: center
}

.allSingleIndex .topSingle .imageContainer .options .option {
    padding: .5rem;
    border-radius: 5px;
    border: 1px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.allSingleIndex .topSingle .imageContainer .options .option svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allSingleIndex .topSingle .imageContainer .showImage {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-top: 1rem;
    position: relative
}

.allSingleIndex .topSingle .imageContainer .showImage .lotteryShow {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: red;
    box-shadow: 0 5px 5px #0000001a;
    font-size: .8rem;
    font-weight: 500;
    color: #fff;
    padding: .3rem .5rem;
    border-radius: 5px
}

.allSingleIndex .topSingle .imageContainer .showImage img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.allSingleIndex .topSingle .imageContainer .imageSlider {
    margin-top: 1rem
}

.allSingleIndex .topSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
    display: grid !important
}

.allSingleIndex .topSingle .imageContainer .imageSlider button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex .topSingle .imageContainer .imageSlider button.owl-prev span {
    font-size: 2.5rem
}

.allSingleIndex .topSingle .imageContainer .imageSlider button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex .topSingle .imageContainer .imageSlider button.owl-next span {
    font-size: 2.5rem
}

.allSingleIndex .topSingle .imageContainer .imageSlider img {
    padding: .5rem;
    border-radius: 5px;
    border: 1px solid #eee;
    cursor: pointer
}

@media screen and (max-width: 700px) {
    .allSingleIndex .topSingle .imageContainer .options {
        grid-template-columns:repeat(4, 1fr)
    }

    .allSingleIndex .topSingle .imageContainer .options .option svg {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section {
        width: 40px
    }

    .allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allSingleIndex .topSingle .imageContainer .suggestProduct .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allSingleIndex .topSingle .singleData {
    padding: 1rem;
    padding-right: 0
}

.allSingleIndex .topSingle .singleData .titleProduct {
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .titleProduct .title1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex .topSingle .singleData .titleProduct h2 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .topSingle .singleData .singleInfo {
    display: grid;
    grid-template-columns:1fr 20rem;
    grid-gap: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .shortDetail {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    grid-gap: 2rem;
    align-items: center;
    justify-content: right;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .shortDetail .itemDetail {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .topSingle .singleData .singleInfo .right .shortDetail .itemDetail span {
    color: orange
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability {
    padding: .5rem;
    border-radius: 5px;
    border: 1px solid #eee
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability .title1 {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability ul {
    display: grid;
    grid-template-columns:1fr
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    margin-top: 1rem;
    grid-gap: .5rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability ul li span {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex .topSingle .singleData .singleInfo .right .ability ul li svg {
    width: 1rem;
    height: 1rem;
    fill: var(--green-color)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes {
    margin-top: 1rem;
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box {
    background: rgba(0, 128, 0, .1);
    padding: .5rem;
    border-radius: 5px;
    color: green;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .3rem;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box .title1 {
    font-weight: 300;
    font-size: .75rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box ul {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: right;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box ul li a {
    font-weight: 300;
    font-size: .75rem;
    color: green
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box ul li:after {
    content: ",";
    padding: 0 .3rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box ul li:last-child:after {
    content: "";
    padding: 0
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box:first-child {
    background: rgba(255, 128, 0, .1);
    color: orange
}

.allSingleIndex .topSingle .singleData .singleInfo .right .boxes .box:first-child ul li a {
    color: orange
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd {
    display: grid;
    grid-template-columns:4rem 1fr;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd label {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd select {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch input {
    display: none
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .swatch-element {
    float: right;
    margin: 5px 8px 0 0;
    position: relative
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .color label {
    transition: all .3s ease-in-out;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    height: 30px;
    display: grid;
    width: 40px;
    padding: 2px;
    box-shadow: 2px 2px 1px #0003
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .color label span {
    border-radius: 5px;
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .color label span:after {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allSingleIndex .topSingle .singleData .singleInfo .right .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery {
    margin-top: 2rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .titleLottery {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .titleLottery .title1 {
    font-size: .85rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .titleLottery span {
    font-size: .8rem;
    font-weight: 300;
    color: red
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .allHorizontalDatas {
    height: 10px;
    width: 100%;
    background: #f5f5f5;
    border-radius: 5rem;
    direction: ltr
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .allHorizontalDatas .allHorizontalDataItem {
    height: 100%;
    background: red;
    border-radius: 5rem;
    position: relative
}

.allSingleIndex .topSingle .singleData .singleInfo .right .lottery .allHorizontalDatas .allHorizontalDataItem div {
    width: 0;
    height: 100%;
    background: white;
    opacity: .5;
    box-shadow: 0 0 5px #ff00004d;
    border-radius: 5rem;
    transition: all .3s ease-in-out;
    animation: arrow-anim5 1s ease infinite
}

@keyframes arrow-anim5 {
    0% {
        width: 0%
    }
    5% {
        width: 5%
    }
    10% {
        width: 10%
    }
    15% {
        width: 15%
    }
    20% {
        width: 20%
    }
    25% {
        width: 25%
    }
    30% {
        width: 30%
    }
    35% {
        width: 35%
    }
    40% {
        width: 40%
    }
    45% {
        width: 45%
    }
    50% {
        width: 50%
    }
    55% {
        width: 55%
    }
    60% {
        width: 60%
    }
    65% {
        width: 65%
    }
    70% {
        width: 70%
    }
    75% {
        width: 75%
    }
    80% {
        width: 80%
    }
    85% {
        width: 85%
    }
    90% {
        width: 90%
    }
    95% {
        width: 95%
    }
    to {
        width: 100%
    }
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions a, .allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions div {
    padding: .5rem;
    border-radius: 5px;
    width: 6rem;
    cursor: pointer
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions i svg {
    width: 1.8rem;
    height: 1.8rem
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions p {
    font-size: .85rem;
    font-weight: 300;
    text-align: center
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .warnGift {
    background: rgba(0, 128, 0, .1)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .warnGift svg {
    fill: var(--green-color)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .warnGift p {
    color: var(--green-color)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .productVideo {
    background: rgba(115, 0, 128, .1)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .productVideo svg {
    fill: #8200ae
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .productVideo p {
    color: #8200ae
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .originalItem {
    cursor: auto;
    background: rgba(255, 195, 0, .1)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .originalItem svg {
    fill: #ffc300
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .originalItem p {
    color: #ffc300
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=quickBuy] {
    background: rgba(255, 105, 0, .1)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=quickBuy] svg {
    fill: #f80
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=quickBuy] p {
    color: #f80
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=counselingBtn] {
    background: rgba(0, 51, 255, .1)
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=counselingBtn] svg {
    fill: #03f
}

.allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions .optionItem[name=counselingBtn] p {
    color: #0059ff
}

.allSingleIndex .topSingle .singleData .singleInfo .left .detailRightOptions {
    display: grid;
    grid-template-columns:auto auto 1fr;
    grid-gap: 1rem;
    align-items: center;
    padding: 1rem;
    position: relative;
    background: var(--back1-color);
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .detailRightOptions .sellerIcon {
    border-radius: 100%;
    background: orange;
    width: 3rem;
    height: 3rem;
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .detailRightOptions .sellerIcon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff
}

.allSingleIndex .topSingle .singleData .singleInfo .left .detailRightOptions .description .title1 {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .left .detailRightOptions span {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    writing-mode: vertical-lr
}

.allSingleIndex .topSingle .singleData .singleInfo .left .options {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .options .optionItem {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000000d;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    padding: .5rem;
    background: linear-gradient(to right, #000 20%, var(--green-color) 40%, var(--green-color) 60%, #000 80%);
    background-size: 200% auto;
    animation: shine 1s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    cursor: pointer
}

.allSingleIndex .topSingle .singleData .singleInfo .left .options .optionItem svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .left .options .optionItem:last-child {
    background: linear-gradient(to right, #000 20%, orange 40%, orange 60%, #000 80%);
    background-size: 200% auto;
    animation: shine 1s linear infinite;
    -webkit-background-clip: text
}

@keyframes shine {
    to {
        background-position: 200% center
    }
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData {
    background: var(--back2-color);
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    padding: 1rem;
    border-bottom: 1px solid #eee
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem:last-child {
    border-bottom: 0
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .title1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .off {
    display: flex;
    justify-content: left;
    gap: .3rem;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .off s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .off .offData {
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    background: red;
    padding: 0 .3rem;
    border-radius: 5px
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .price1, .allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .price2 {
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--green-color)
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .priceData {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .3rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem .priceData span {
    color: var(--green-color);
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .1px
}

.allSingleIndex .topSingle .singleData .singleInfo .left .leftData .leftDataItem span {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    text-align: left
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct {
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    grid-gap: .5rem;
    margin-top: 1rem;
    align-items: center;
    background: var(--back2-color);
    border-radius: 5px;
    padding: 1rem;
    border: 1px solid #eee
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct i {
    display: grid;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct i svg {
    width: 1.4rem;
    height: 1.4rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct i:last-child svg {
    width: .7rem;
    height: .7rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .left .scoreProduct span span {
    font-size: 1rem;
    font-weight: 900;
    color: orange
}

.allSingleIndex .topSingle .singleData .singleInfo .left .note {
    box-shadow: 0 0 5px #0000001a;
    padding: .5rem;
    margin-top: 1rem;
    border-right: 3px solid orangered;
    border-left: 3px solid orangered
}

.allSingleIndex .topSingle .singleData .singleInfo .left .note .noteTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .note .noteTitle .title2 {
    font-size: .7rem;
    font-weight: 300;
    color: red;
    margin-bottom: .5rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .note p {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .likedSingle {
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    grid-gap: .5rem;
    margin-bottom: 1rem;
    align-items: center;
    background: rgba(255, 0, 0, .1);
    border-radius: 5px;
    padding: .5rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .likedSingle i {
    display: grid;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .likedSingle i svg {
    width: 1.2rem;
    height: 1.2rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .likedSingle span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .topSingle .singleData .singleInfo .left .likedSingle span span {
    font-size: 1rem;
    font-weight: 900;
    color: red
}

.allSingleIndex .topSingle .singleData .singleInfo .left .addButton {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    overflow: hidden;
    background: var(--green-color);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer;
    margin-top: 1rem
}

.allSingleIndex .topSingle .singleData .singleInfo .left .addButton i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .addButton i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .topSingle .singleData .singleInfo .left .addButton button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex .topSingle .singleData .singleInfo .left .addButton:hover {
    box-shadow: -350px 0 #0000001f inset
}

.allSingleIndex .topSingle .singleData .singleInfo .left .emptyProduct {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    margin-top: 1rem;
    cursor: pointer
}

.allSingleIndex .topSingle .singleData .singleInfo .left .emptyProduct i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .topSingle .singleData .singleInfo .left .emptyProduct i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .topSingle .singleData .singleInfo .left .emptyProduct button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex .collectionProduct {
    display: grid;
    grid-template-columns:1fr 1.5fr;
    grid-gap: 2rem;
    margin: auto;
    margin-top: 2rem
}

.allSingleIndex .collectionProduct .rightCollect {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns:1fr 1fr
}

.allSingleIndex .collectionProduct .rightCollect a {
    display: grid;
    background: var(--back1-color);
    border-radius: 10px;
    position: relative;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem
}

.allSingleIndex .collectionProduct .rightCollect a .pic img {
    width: 100%;
    height: 10rem;
    object-fit: contain
}

.allSingleIndex .collectionProduct .rightCollect a .title1 {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-top: .5rem;
    line-height: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allSingleIndex .collectionProduct .rightCollect a .title2 {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: .5rem;
    opacity: .7
}

.allSingleIndex .collectionProduct .rightCollect a:last-child:before {
    content: "+";
    display: inline-block;
    font-weight: 300;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 29px;
    position: absolute;
    z-index: 1;
    right: -22px;
    border-radius: 50%;
    top: 50%;
    margin-top: -10px;
    font-size: 25px;
    color: green;
    border: 2px solid green;
    background: var(--back1-color);
    box-shadow: 0 0 10px -3px #0000001a
}

.allSingleIndex .collectionProduct .leftCollect {
    background: var(--back1-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem
}

.allSingleIndex .collectionProduct .leftCollect .titleCollect {
    display: grid;
    background: var(--back2-color);
    padding: .5rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex .collectionProduct .leftCollect ul {
    margin: 1rem 0;
    display: grid;
    grid-gap: .5rem
}

.allSingleIndex .collectionProduct .leftCollect ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex .collectionProduct .leftCollect ul li .title2 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .collectionProduct .leftCollect ul li .title2 span {
    color: var(--green-color)
}

.allSingleIndex .collectionProduct .leftCollect ul li:before {
    content: "";
    width: .5rem;
    height: .5rem;
    background: #000;
    border-radius: 100%
}

.allSingleIndex .collectionProduct .leftCollect .collectPrice {
    margin-bottom: 1rem
}

.allSingleIndex .collectionProduct .leftCollect .collectPrice s {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .collectionProduct .leftCollect .collectPrice .price1 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    font-size: 16px;
    font-weight: 900;
    color: red
}

.allSingleIndex .collectionProduct .leftCollect .collectPrice .price1:after {
    content: "︎";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: normal;
    font-family: digikala;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-sizing: inherit
}

.allSingleIndex .collectionProduct .leftCollect .addCollect {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden;
    background: green;
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex .collectionProduct .leftCollect .addCollect i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .collectionProduct .leftCollect .addCollect i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .collectionProduct .leftCollect .addCollect button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex .collectionProduct .leftCollect .addCollect:hover {
    box-shadow: -1000px 0 #0000001f inset
}

.allSingleIndex .sellers {
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    margin: auto;
    position: relative;
    margin-top: 2rem
}

.allSingleIndex .sellers .titleSeller {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #eee;
    padding: 1rem
}

.allSingleIndex .sellers .titleSeller svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex .sellers li .postItem {
    padding: 1rem;
    border-bottom: 2px dashed #eee
}

.allSingleIndex .sellers li .postItem .postTop {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center
}

.allSingleIndex .sellers li .postItem .postTop .postTitle {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allSingleIndex .sellers li .postItem .postTop .postTitle .postImages {
    display: grid;
    grid-template-columns:auto;
    justify-content: right;
    align-items: center
}

.allSingleIndex .sellers li .postItem .postTop .postTitle .postImages .postImage img {
    height: 5rem;
    object-fit: contain;
    width: 5rem;
    border-radius: 100%;
    box-shadow: 0 0 10px #0000001a;
    padding: .5rem
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: right;
    align-items: center;
    grid-gap: 2rem
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul li span, .allSingleIndex .sellers li .postItem .postTop .postTitle ul li label, .allSingleIndex .sellers li .postItem .postTop .postTitle ul li a {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul li span:last-child, .allSingleIndex .sellers li .postItem .postTop .postTitle ul li label:last-child, .allSingleIndex .sellers li .postItem .postTop .postTitle ul li a:last-child {
    font-size: 1rem;
    font-weight: 500;
    opacity: 1
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul li select {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .8rem;
    width: 100%;
    height: 2rem;
    min-width: 8rem;
    transition: all .3s ease-in-out
}

.allSingleIndex .sellers li .postItem .postTop .postTitle ul li select:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allSingleIndex .sellers li .postItem .postTop .postOptions {
    display: grid;
    justify-content: left;
    align-items: center
}

.allSingleIndex .sellers li .postItem .postTop .postOptions a, .allSingleIndex .sellers li .postItem .postTop .postOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns:auto auto;
    grid-gap: 1rem;
    padding: .5rem;
    background: var(--green-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

.allSingleIndex .sellers li .postItem .postTop .postOptions a svg, .allSingleIndex .sellers li .postItem .postTop .postOptions i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .sellers li .postItem .postBot {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .5rem;
    background: var(--back2-color);
    border-radius: 5px;
    padding: 1rem
}

.allSingleIndex .sellers li .postItem .postBot ul {
    display: grid;
    grid-template-columns:auto auto auto auto auto;
    justify-content: right;
    grid-gap: 2rem;
    align-items: center
}

.allSingleIndex .sellers li .postItem .postBot ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex .sellers li .postItem .postBot ul li span {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex .sellers li .postItem .postBot ul li span:last-child {
    color: var(--green-color);
    font-weight: 500;
    opacity: 1
}

@media screen and (max-width: 700px) {
    .allSingleIndex .sellers li .postItem .postTop, .allSingleIndex .sellers li .postItem .postBot {
        display: block
    }

    .allSingleIndex .sellers li .postItem .postTop .postTitle, .allSingleIndex .sellers li .postItem .postBot .postTitle {
        grid-template-columns:1fr;
        justify-content: center
    }

    .allSingleIndex .sellers li .postItem .postTop .postTitle .postImages, .allSingleIndex .sellers li .postItem .postBot .postTitle .postImages {
        justify-content: center
    }

    .allSingleIndex .sellers li .postItem .postTop .postTitle ul, .allSingleIndex .sellers li .postItem .postBot .postTitle ul {
        grid-template-columns:1fr;
        grid-gap: .5rem
    }

    .allSingleIndex .sellers li .postItem .postTop .postTitle ul li, .allSingleIndex .sellers li .postItem .postBot .postTitle ul li {
        grid-template-columns:auto 1fr;
        margin-bottom: 1rem
    }

    .allSingleIndex .sellers li .postItem .postTop .postTitle ul li select, .allSingleIndex .sellers li .postItem .postBot .postTitle ul li select {
        min-width: 100%
    }

    .allSingleIndex .sellers li .postItem .postTop .postOptions, .allSingleIndex .sellers li .postItem .postBot .postOptions {
        grid-template-columns:1fr
    }

    .allSingleIndex .sellers li .postItem .postTop ul, .allSingleIndex .sellers li .postItem .postBot ul {
        grid-template-columns:1fr;
        grid-gap: .5rem
    }
}

.allSingleIndex .sellers li:last-child .postItem {
    border-bottom: 0
}

.allSingleIndex .allLotterySingle {
    overflow: hidden;
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    margin: auto;
    position: relative;
    margin-top: 2rem
}

.allSingleIndex .allLotterySingle .title {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    padding: 1rem
}

.allSingleIndex .allLotterySingle .title i svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex .allLotterySingle .title .title1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex .allLotterySingle .items .item {
    background: var(--back1-color);
    padding: 1rem;
    border-radius: 10px
}

.allSingleIndex .allLotterySingle .items .item .titleItem {
    padding: 1rem;
    background: var(--back2-color);
    border-radius: 5px;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.allSingleIndex .allLotterySingle .items .item .titleItem span {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .allLotterySingle .items .item .titleItem .left {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: 1rem
}

.allSingleIndex .allLotterySingle .items .item .titleItem .left i {
    display: grid;
    align-items: center
}

.allSingleIndex .allLotterySingle .items .item .titleItem .left i svg {
    width: .7rem;
    height: .7rem;
    fill: #000
}

.allSingleIndex .allLotterySingle .items .item .bot {
    display: none
}

.allSingleIndex .allLotterySingle .items .item .bot table {
    background: var(--back1-color);
    width: 100%
}

.allSingleIndex .allLotterySingle .items .item .bot table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allSingleIndex .allLotterySingle .items .item .bot table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td svg {
    fill: #000;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td a {
    display: grid;
    align-items: center
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td a svg {
    margin-left: .5rem
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td .unActive {
    color: red
}

.allSingleIndex .allLotterySingle .items .item .bot table tr td .active {
    color: var(--green-color)
}

.allSingleIndex .allLotterySingle .items .item .bot table tr:nth-child(odd) {
    background: #eee
}

@media screen and (max-width: 700px) {
    .allSingleIndex .allLotterySingle .items .item .bot table tr {
        grid-gap: .5rem;
        padding: .5rem
    }

    .allSingleIndex .allLotterySingle .items .item .bot table tr th, .allSingleIndex .allLotterySingle .items .item .bot table tr td {
        font-size: .5rem
    }

    .allSingleIndex .allLotterySingle .items .item .bot table tr td svg {
        width: .7rem;
        height: .7rem
    }

    .allSingleIndex .allLotterySingle .items .item .bot table tr .buttons {
        display: block
    }

    .allSingleIndex .allLotterySingle .items .item .bot table tr .buttons a, .allSingleIndex .allLotterySingle .items .item .bot table tr .buttons button {
        font-size: .5rem
    }
}

.allSingleIndex .allProductList .title .title1 {
    transform: translate(0)
}

.allSingleIndex .tags {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    background: var(--single-color);
    padding: .5rem;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 5px;
    margin: auto;
    margin-top: 2rem
}

.allSingleIndex .tags .title1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .tags ul {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center
}

.allSingleIndex .tags ul li {
    background: var(--back2-color);
    padding: .2rem .5rem;
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex .tags ul li a {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex .tags ul li a:hover {
    color: var(--green-color)
}

.allSingleIndex .detailProducts {
    margin: auto;
    margin-top: 2rem;
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem
}

.allSingleIndex .detailProducts .detailProduct {
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    position: relative;
    z-index: 2;
    overflow-y: hidden
}

.allSingleIndex .detailProducts .detailProduct .tabs {
    width: 90%;
    border-radius: 10px;
    background: var(--back3-color);
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    margin: 1rem auto
}

.allSingleIndex .detailProducts .detailProduct .tabs a {
    display: grid;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-left: 2px solid #eee
}

.allSingleIndex .detailProducts .detailProduct .tabs a:last-child {
    border-left: 0
}

.allSingleIndex .detailProducts .detailProduct .body {
    border-bottom: 2px solid #eee;
    padding: 1rem
}

.allSingleIndex .detailProducts .detailProduct .body .bodyItem p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2.25;
    border-radius: 10px;
    white-space: pre-wrap
}

.allSingleIndex .detailProducts .detailProduct .body .bodyItem p .image {
    display: grid;
    justify-content: center
}

.allSingleIndex .detailProducts .detailProduct .body .bodyItem .title1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allSingleIndex .detailProducts .detailProduct .body .bodyItem .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex .detailProducts .detailProduct .body .bodyItem .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

@media screen and (max-width: 700px) {
    .allSingleIndex .detailProducts .detailProduct .body .bodyItem p {
        font-size: .7rem
    }

    .allSingleIndex .detailProducts .detailProduct .body .bodyItem label {
        font-size: 1rem;
        font-weight: 700;
        color: #000
    }
}

.allSingleIndex .detailProducts .detailProduct .property {
    padding: 1rem;
    border-bottom: 2px solid #eee
}

.allSingleIndex .detailProducts .detailProduct .property .title1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex .detailProducts .detailProduct .property .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex .detailProducts .detailProduct .property .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

.allSingleIndex .detailProducts .detailProduct .property ul {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex .detailProducts .detailProduct .property ul li {
    display: grid;
    grid-template-columns:20rem 1fr;
    grid-gap: .5rem
}

.allSingleIndex .detailProducts .detailProduct .property ul li .title2 {
    background: var(--back3-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex .detailProducts .detailProduct .property ul li p {
    background: var(--back2-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem
}

.allSingleIndex .detailProducts .detailProduct .video {
    padding: 1rem;
    border-top: 2px solid #eee;
    margin-top: 1rem
}

.allSingleIndex .detailProducts .detailProduct .video .title1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex .detailProducts .detailProduct .video .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex .detailProducts .detailProduct .video .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

.allSingleIndex .detailProducts .detailProduct .video ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex .detailProducts .detailProduct .video ul li {
    padding: 1rem;
    border-radius: 10px;
    background: #f5f5f5
}

.allSingleIndex .detailProducts .detailProduct .video ul li video {
    width: 100%;
    height: 9rem;
    object-fit: contain
}

.allSingleIndex .detailProducts .detailBox {
    width: 17rem;
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    overflow-y: hidden;
    position: sticky;
    top: 6rem;
    padding: 1rem;
    border-top: 4px solid var(--green-color)
}

.allSingleIndex .detailProducts .detailBox .pic img {
    height: 10rem;
    width: 100%;
    object-fit: contain
}

.allSingleIndex .detailProducts .detailBox .title2 {
    margin: 1rem 0;
    font-size: .9rem;
    font-weight: 700;
    color: #000;
    opacity: .7
}

.allSingleIndex .detailProducts .detailBox .price1 {
    display: grid;
    justify-content: left;
    align-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--green-color);
    margin-bottom: 1rem
}

.allSingleIndex .detailProducts .detailBox .addButton {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    overflow: hidden;
    background: var(--green-color);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: 0 .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex .detailProducts .detailBox .addButton i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .detailProducts .detailBox .addButton i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .detailProducts .detailBox .addButton button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex .detailProducts .detailBox .addButton:hover {
    box-shadow: -350px 0 #0000001f inset
}

.allSingleIndex .detailProducts .detailBox .emptyProduct {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: 0 .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex .detailProducts .detailBox .emptyProduct i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex .detailProducts .detailBox .emptyProduct i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex .detailProducts .detailBox .emptyProduct button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex .allShare, .allSingleIndex .allNotification, .allSingleIndex .allChart {
    display: none
}

.allSingleIndex .all3DSingle {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    z-index: 999;
    opacity: 0;
    visibility: hidden
}

.allSingleIndex .all3DSingle .all3DSingleItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px
}

.allSingleIndex .all3DSingle .all3DSingleItems .title360Single {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: 1rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allSingleIndex .all3DSingle .all3DSingleItems .title360Single i {
    display: grid;
    grid-template-columns:1fr;
    align-items: center
}

.allSingleIndex .all3DSingle .all3DSingleItems .title360Single i svg {
    width: 2rem;
    height: 2rem
}

.allSingleIndex .all3DSingle .all3DSingleItems #product360 {
    cursor: grab;
    display: grid
}

.allSingleIndex .all3DSingle .all3DSingleItems .spritespin-progress {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 45%
}

.allSingleIndex .all3DSingle .all3DSingleItems .spritespin-progress-label {
    color: gray
}

.allSingleIndex .all3DSingle .all3DSingleItems .spritespin-progress-bar {
    background-color: gray;
    height: 1px
}

@media screen and (max-width: 800px) {
    .allSingleIndex .address {
        display: grid;
        grid-template-columns:repeat(auto-fit, minmax(1px, auto));
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-top: -6rem;
        position: relative;
        z-index: 2;
        padding: 0 .5rem
    }

    .allSingleIndex .address a {
        font-size: .9rem;
        font-weight: 500;
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .allSingleIndex .topSingle {
        display: block
    }

    .allSingleIndex .topSingle .imageContainer .suggestProduct h4 {
        font-size: .7rem
    }

    .allSingleIndex .topSingle .singleData {
        padding: .5rem
    }

    .allSingleIndex .topSingle .singleData .singleInfo {
        display: block
    }

    .allSingleIndex .topSingle .singleData .singleInfo .right .shortDetail {
        grid-template-columns:1fr 1fr;
        grid-gap: 1rem
    }

    .allSingleIndex .topSingle .singleData .singleInfo .right .boxes {
        grid-template-columns:1fr
    }

    .allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions {
        grid-template-columns:1fr 1fr;
        margin-bottom: 1rem
    }

    .allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions a, .allSingleIndex .topSingle .singleData .singleInfo .right .gifOptions div {
        width: auto
    }

    .allSingleIndex .topSingle .singleData .singleInfo .leftData {
        margin-top: 1rem
    }

    .allSingleIndex .collectionProduct {
        display: block
    }

    .allSingleIndex .collectionProduct .rightCollect {
        position: fixed;
        display: block;
        opacity: 0;
        visibility: hidden
    }

    .allSingleIndex .detailProducts {
        display: block
    }

    .allSingleIndex .detailProducts .detailProduct .tabs {
        grid-template-columns:1fr 1fr
    }

    .allSingleIndex .detailProducts .detailProduct .property ul {
        display: block
    }

    .allSingleIndex .detailProducts .detailProduct .property ul li {
        display: block;
        margin-bottom: 1rem
    }

    .allSingleIndex .detailProducts .detailProduct .property ul li p {
        margin-left: 2rem;
        margin-top: .2rem;
        background: #f5f5f5
    }

    .allSingleIndex .detailProducts .detailBox {
        display: none;
        position: absolute;
        visibility: hidden
    }
}

.allSingleIndex3 {
    margin-top: 1rem
}

.allSingleIndex3 .address {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    margin: auto;
    background: var(--single-color);
    border-radius: 15px;
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .1));
    padding: 1rem
}

.allSingleIndex3 .address a {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex3 .address a:after {
    content: "/";
    padding: 0 .8rem
}

.allSingleIndex3 .address a:last-child {
    opacity: 1
}

.allSingleIndex3 .address a:last-child:after {
    content: "";
    padding: 0
}

.allSingleIndex3 .topSingle {
    background: var(--single-color);
    border-radius: 15px;
    box-shadow: 6px 6px #0000001a;
    margin: auto;
    margin-top: 1rem;
    padding: 1rem;
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap: 1rem
}

.allSingleIndex3 .topSingle .imageContainer .showImage {
    position: relative
}

.allSingleIndex3 .topSingle .imageContainer .showImage .lotteryShow {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: red;
    box-shadow: 0 5px 5px #0000001a;
    font-size: .8rem;
    font-weight: 500;
    color: #fff;
    padding: .3rem .5rem;
    border-radius: 5px
}

.allSingleIndex3 .topSingle .imageContainer .showImage img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider {
    margin-top: 1rem
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
    display: grid !important
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider button.owl-prev span {
    font-size: 2.5rem
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider button.owl-next span {
    font-size: 2.5rem
}

.allSingleIndex3 .topSingle .imageContainer .imageSlider img {
    padding: .5rem;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    cursor: pointer
}

@media screen and (max-width: 700px) {
    .allSingleIndex3 .topSingle .imageContainer .options {
        grid-template-columns:repeat(4, 1fr)
    }

    .allSingleIndex3 .topSingle .imageContainer .options .option svg {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex3 .topSingle .imageContainer .suggestProduct .countdown .countdown-section {
        width: 40px
    }

    .allSingleIndex3 .topSingle .imageContainer .suggestProduct .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allSingleIndex3 .topSingle .imageContainer .suggestProduct .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allSingleIndex3 .topSingle .right .title1 {
    font-size: 1.4rem;
    font-weight: 900;
    color: #000;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, .2)
}

.allSingleIndex3 .topSingle .right h2 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    margin-top: .5rem;
    text-align: left
}

.allSingleIndex3 .topSingle .right .price .priceItem {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    border-radius: 10px;
    margin-top: 1rem;
    border: 1px solid #bbb
}

.allSingleIndex3 .topSingle .right .price .priceItem .title2 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .topSingle .right .price .priceItem .prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    gap: .5rem
}

.allSingleIndex3 .topSingle .right .price .priceItem .prices s {
    font-size: .7rem;
    font-weight: 500;
    color: #444
}

.allSingleIndex3 .topSingle .right .price .priceItem .prices .offData {
    font-size: .7rem;
    font-weight: 300;
    color: red;
    padding: .1rem .3rem;
    border-radius: 5px;
    border: 1px solid red
}

.allSingleIndex3 .topSingle .right .price .priceItem .prices .price1, .allSingleIndex3 .topSingle .right .price .priceItem .prices .price2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-color)
}

.allSingleIndex3 .topSingle .right .price .priceItem .prices span {
    font-size: .8rem;
    font-weight: 900;
    color: var(--green-color);
    display: grid;
    margin-left: .5rem;
    letter-spacing: .1px
}

.allSingleIndex3 .topSingle .right .calls {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .5rem;
    margin-top: 2rem
}

.allSingleIndex3 .topSingle .right .calls a {
    display: flex;
    justify-content: center;
    gap: .5rem;
    background: var(--red-color);
    color: #fff;
    border-radius: 10px;
    padding: .5rem 2rem;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, .2));
    font-size: .8rem;
    font-weight: 900;
    width: 100%
}

.allSingleIndex3 .topSingle .right .calls a i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .topSingle .right .calls a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .topSingle .right .optionAdd {
    display: grid;
    grid-template-columns:4rem 1fr;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allSingleIndex3 .topSingle .right .optionAdd label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex3 .topSingle .right .optionAdd select {
    background: var(--back1-color);
    border: 1px solid #bbbbbb;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch input {
    display: none
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .swatch-element {
    float: right;
    margin: 5px 8px 0 0;
    position: relative
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .color label {
    transition: all .3s ease-in-out;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    height: 30px;
    display: grid;
    width: 40px;
    padding: 2px;
    box-shadow: 2px 2px 1px #0003
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .color label span {
    border-radius: 5px;
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .color label span:after {
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allSingleIndex3 .topSingle .right .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease-out;
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allSingleIndex3 .topSingle .right .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allSingleIndex3 .topSingle .right .addButton {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--green-color);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, .2));
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer;
    margin-top: 1rem
}

.allSingleIndex3 .topSingle .right .addButton i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex3 .topSingle .right .addButton i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .topSingle .right .addButton button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex3 .topSingle .right .addButton:hover {
    box-shadow: -500px 0 #0000001f inset
}

.allSingleIndex3 .topSingle .right .emptyProduct {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, .2));
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    margin-top: 1rem;
    cursor: pointer
}

.allSingleIndex3 .topSingle .right .emptyProduct i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex3 .topSingle .right .emptyProduct i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .topSingle .right .emptyProduct button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex3 .topSingle .left .ability {
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    background: var(--single-color);
    margin-bottom: 2rem
}

.allSingleIndex3 .topSingle .left .ability .title2 {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .topSingle .left .ability ul {
    display: grid;
    grid-template-columns:1fr
}

.allSingleIndex3 .topSingle .left .ability ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    margin-top: 1rem;
    grid-gap: .5rem
}

.allSingleIndex3 .topSingle .left .ability ul li span {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .topSingle .left .ability ul li svg {
    width: 1rem;
    height: 1rem;
    fill: var(--green-color)
}

.allSingleIndex3 .topSingle .left .note {
    padding: .5rem;
    margin-bottom: 2rem;
    border: 1px solid #bbbbbb;
    border-right: 3px solid orangered;
    border-left: 3px solid orangered
}

.allSingleIndex3 .topSingle .left .note .noteTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center
}

.allSingleIndex3 .topSingle .left .note .noteTitle .title2 {
    font-size: .7rem;
    font-weight: 300;
    color: red;
    margin-bottom: .5rem
}

.allSingleIndex3 .topSingle .left .note p {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: center
}

.allSingleIndex3 .topSingle .left .boxes {
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem
}

.allSingleIndex3 .topSingle .left .boxes .box {
    background: rgba(0, 128, 0, .1);
    padding: .5rem;
    border-radius: 5px;
    color: green;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .3rem;
    align-items: center
}

.allSingleIndex3 .topSingle .left .boxes .box .title2 {
    font-weight: 300;
    font-size: .75rem
}

.allSingleIndex3 .topSingle .left .boxes .box ul {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: right;
    align-items: center
}

.allSingleIndex3 .topSingle .left .boxes .box ul li a {
    font-weight: 300;
    font-size: .75rem;
    color: green
}

.allSingleIndex3 .topSingle .left .boxes .box ul li:after {
    content: ",";
    padding: 0 .3rem
}

.allSingleIndex3 .topSingle .left .boxes .box ul li:last-child:after {
    content: "";
    padding: 0
}

.allSingleIndex3 .topSingle .left .boxes .box:first-child {
    background: rgba(255, 128, 0, .1);
    color: orange
}

.allSingleIndex3 .topSingle .left .boxes .box:first-child ul li a {
    color: orange
}

.allSingleIndex3 .topSingle .left .scoreProduct {
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    grid-gap: .5rem;
    margin-bottom: 2rem;
    align-items: center;
    background: var(--single-color);
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    padding: 1rem
}

.allSingleIndex3 .topSingle .left .scoreProduct i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .topSingle .left .scoreProduct i svg {
    width: 1.4rem;
    height: 1.4rem
}

.allSingleIndex3 .topSingle .left .scoreProduct i:last-child svg {
    width: .7rem;
    height: .7rem
}

.allSingleIndex3 .topSingle .left .scoreProduct span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex3 .topSingle .left .scoreProduct span span {
    font-size: 1rem;
    font-weight: 900;
    color: orange
}

.allSingleIndex3 .topSingle .left .gifOptions {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .topSingle .left .gifOptions a, .allSingleIndex3 .topSingle .left .gifOptions div {
    padding: .5rem;
    border-radius: 5px;
    flex: 1;
    cursor: pointer
}

.allSingleIndex3 .topSingle .left .gifOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem
}

.allSingleIndex3 .topSingle .left .gifOptions i svg {
    width: 1.8rem;
    height: 1.8rem
}

.allSingleIndex3 .topSingle .left .gifOptions p {
    font-size: .85rem;
    font-weight: 300;
    text-align: center
}

.allSingleIndex3 .topSingle .left .gifOptions .warnGift {
    background: rgba(0, 128, 0, .1);
    border: 1px solid green
}

.allSingleIndex3 .topSingle .left .gifOptions .warnGift svg {
    fill: green
}

.allSingleIndex3 .topSingle .left .gifOptions .warnGift p {
    color: green
}

.allSingleIndex3 .topSingle .left .gifOptions .productVideo {
    background: rgba(115, 0, 128, .1);
    border: 1px solid #8200ae
}

.allSingleIndex3 .topSingle .left .gifOptions .productVideo svg {
    fill: #8200ae
}

.allSingleIndex3 .topSingle .left .gifOptions .productVideo p {
    color: #8200ae
}

.allSingleIndex3 .topSingle .left .gifOptions .originalItem {
    cursor: auto;
    background: rgba(255, 195, 0, .1);
    border: 1px solid #ffc300
}

.allSingleIndex3 .topSingle .left .gifOptions .originalItem svg {
    fill: #ffc300
}

.allSingleIndex3 .topSingle .left .gifOptions .originalItem p {
    color: #ffc300
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=quickBuy] {
    background: rgba(255, 105, 0, .1);
    border: 1px solid #ff8800
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=quickBuy] svg {
    fill: #f80
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=quickBuy] p {
    color: #f80
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=counselingBtn] {
    background: rgba(0, 51, 255, .1);
    border: 1px solid #0033ff
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=counselingBtn] svg {
    fill: #03f
}

.allSingleIndex3 .topSingle .left .gifOptions .optionItem[name=counselingBtn] p {
    color: #0059ff
}

.allSingleIndex3 .collectionProduct {
    display: grid;
    grid-template-columns:1fr 1.5fr;
    grid-gap: 2rem;
    margin: auto;
    margin-top: 2rem
}

.allSingleIndex3 .collectionProduct .rightCollect {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns:1fr 1fr
}

.allSingleIndex3 .collectionProduct .rightCollect a {
    display: grid;
    background: var(--back1-color);
    border-radius: 10px;
    position: relative;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem
}

.allSingleIndex3 .collectionProduct .rightCollect a .pic img {
    width: 100%;
    height: 10rem;
    object-fit: contain
}

.allSingleIndex3 .collectionProduct .rightCollect a .title3 {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-top: .5rem;
    line-height: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allSingleIndex3 .collectionProduct .rightCollect a .title2 {
    font-size: .75rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: .5rem;
    opacity: .7
}

.allSingleIndex3 .collectionProduct .rightCollect a:last-child:before {
    content: "+";
    display: inline-block;
    font-weight: 300;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 29px;
    position: absolute;
    z-index: 1;
    right: -22px;
    border-radius: 50%;
    top: 50%;
    margin-top: -10px;
    font-size: 25px;
    color: green;
    border: 2px solid green;
    background: var(--back1-color);
    box-shadow: 0 0 10px -3px #0000001a
}

.allSingleIndex3 .collectionProduct .leftCollect {
    background: var(--back1-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem
}

.allSingleIndex3 .collectionProduct .leftCollect .titleCollect {
    display: grid;
    background: var(--back2-color);
    padding: .5rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex3 .collectionProduct .leftCollect ul {
    margin: 1rem 0;
    display: grid;
    grid-gap: .5rem
}

.allSingleIndex3 .collectionProduct .leftCollect ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .collectionProduct .leftCollect ul li .title2 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .collectionProduct .leftCollect ul li .title2 span {
    color: var(--green-color)
}

.allSingleIndex3 .collectionProduct .leftCollect ul li:before {
    content: "";
    width: .5rem;
    height: .5rem;
    background: #000;
    border-radius: 100%
}

.allSingleIndex3 .collectionProduct .leftCollect .collectPrice {
    margin-bottom: 1rem
}

.allSingleIndex3 .collectionProduct .leftCollect .collectPrice s {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .collectionProduct .leftCollect .collectPrice .price1 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    font-size: 16px;
    font-weight: 900;
    color: red
}

.allSingleIndex3 .collectionProduct .leftCollect .collectPrice .price1:after {
    content: "︎";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: normal;
    font-family: digikala;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-sizing: inherit
}

.allSingleIndex3 .collectionProduct .leftCollect .addCollect {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden;
    background: green;
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex3 .collectionProduct .leftCollect .addCollect i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex3 .collectionProduct .leftCollect .addCollect i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .collectionProduct .leftCollect .addCollect button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex3 .collectionProduct .leftCollect .addCollect:hover {
    box-shadow: -1000px 0 #0000001f inset
}

.allSingleIndex3 .sellers {
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 6px 6px #0000001a;
    margin: auto;
    position: relative;
    margin-top: 2rem
}

.allSingleIndex3 .sellers .titleSeller {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #eee;
    padding: 1rem
}

.allSingleIndex3 .sellers .titleSeller svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex3 .sellers li .postItem {
    padding: 1rem;
    border-bottom: 2px dashed #eee
}

.allSingleIndex3 .sellers li .postItem .postTop {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle .postImages {
    display: grid;
    grid-template-columns:auto;
    justify-content: right;
    align-items: center
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle .postImages .postImage img {
    height: 5rem;
    object-fit: contain;
    width: 5rem;
    border-radius: 100%;
    box-shadow: 0 0 10px #0000001a;
    padding: .5rem
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: right;
    align-items: center;
    grid-gap: 2rem
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li span, .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li label, .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li a {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li span:last-child, .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li label:last-child, .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li a:last-child {
    font-size: 1rem;
    font-weight: 500;
    opacity: 1
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li select {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .8rem;
    width: 100%;
    height: 2rem;
    min-width: 8rem;
    transition: all .3s ease-in-out
}

.allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li select:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allSingleIndex3 .sellers li .postItem .postTop .postOptions {
    display: grid;
    justify-content: left;
    align-items: center
}

.allSingleIndex3 .sellers li .postItem .postTop .postOptions a, .allSingleIndex3 .sellers li .postItem .postTop .postOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns:auto auto;
    grid-gap: 1rem;
    padding: .5rem;
    background: var(--green-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

.allSingleIndex3 .sellers li .postItem .postTop .postOptions a svg, .allSingleIndex3 .sellers li .postItem .postTop .postOptions i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .sellers li .postItem .postBot {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .5rem;
    background: var(--back2-color);
    border-radius: 5px;
    padding: 1rem
}

.allSingleIndex3 .sellers li .postItem .postBot ul {
    display: grid;
    grid-template-columns:auto auto auto auto auto;
    justify-content: right;
    grid-gap: 2rem;
    align-items: center
}

.allSingleIndex3 .sellers li .postItem .postBot ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .sellers li .postItem .postBot ul li span {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .sellers li .postItem .postBot ul li span:last-child {
    color: var(--green-color);
    font-weight: 500;
    opacity: 1
}

@media screen and (max-width: 700px) {
    .allSingleIndex3 .sellers li .postItem .postTop, .allSingleIndex3 .sellers li .postItem .postBot {
        display: block
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postTitle, .allSingleIndex3 .sellers li .postItem .postBot .postTitle {
        grid-template-columns:1fr;
        justify-content: center
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postTitle .postImages, .allSingleIndex3 .sellers li .postItem .postBot .postTitle .postImages {
        justify-content: center
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul, .allSingleIndex3 .sellers li .postItem .postBot .postTitle ul {
        grid-template-columns:1fr;
        grid-gap: .5rem
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li, .allSingleIndex3 .sellers li .postItem .postBot .postTitle ul li {
        grid-template-columns:auto 1fr;
        margin-bottom: 1rem
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postTitle ul li select, .allSingleIndex3 .sellers li .postItem .postBot .postTitle ul li select {
        min-width: 100%
    }

    .allSingleIndex3 .sellers li .postItem .postTop .postOptions, .allSingleIndex3 .sellers li .postItem .postBot .postOptions {
        grid-template-columns:1fr
    }

    .allSingleIndex3 .sellers li .postItem .postTop ul, .allSingleIndex3 .sellers li .postItem .postBot ul {
        grid-template-columns:1fr;
        grid-gap: .5rem
    }
}

.allSingleIndex3 .sellers li:last-child .postItem {
    border-bottom: 0
}

.allSingleIndex3 .allLotterySingle {
    overflow: hidden;
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 6px 6px #0000001a;
    margin: auto;
    position: relative;
    margin-top: 2rem
}

.allSingleIndex3 .allLotterySingle .title {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    padding: 1rem
}

.allSingleIndex3 .allLotterySingle .title i svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex3 .allLotterySingle .title .title2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex3 .allLotterySingle .items .item {
    background: var(--back1-color);
    padding: 1rem;
    border-radius: 10px
}

.allSingleIndex3 .allLotterySingle .items .item .titleItem {
    padding: 1rem;
    background: var(--back2-color);
    border-radius: 5px;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.allSingleIndex3 .allLotterySingle .items .item .titleItem span {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex3 .allLotterySingle .items .item .titleItem .left {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: 1rem
}

.allSingleIndex3 .allLotterySingle .items .item .titleItem .left i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .allLotterySingle .items .item .titleItem .left i svg {
    width: .7rem;
    height: .7rem;
    fill: #000
}

.allSingleIndex3 .allLotterySingle .items .item .bot {
    display: none
}

.allSingleIndex3 .allLotterySingle .items .item .bot table {
    background: var(--back1-color);
    width: 100%
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td svg {
    fill: #000;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td a {
    display: grid;
    align-items: center
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td a svg {
    margin-left: .5rem
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td .unActive {
    color: red
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr td .active {
    color: var(--green-color)
}

.allSingleIndex3 .allLotterySingle .items .item .bot table tr:nth-child(odd) {
    background: #eee
}

@media screen and (max-width: 700px) {
    .allSingleIndex3 .allLotterySingle .items .item .bot table tr {
        grid-gap: .5rem;
        padding: .5rem
    }

    .allSingleIndex3 .allLotterySingle .items .item .bot table tr th, .allSingleIndex3 .allLotterySingle .items .item .bot table tr td {
        font-size: .5rem
    }

    .allSingleIndex3 .allLotterySingle .items .item .bot table tr td svg {
        width: .7rem;
        height: .7rem
    }

    .allSingleIndex3 .allLotterySingle .items .item .bot table tr .buttons {
        display: block
    }

    .allSingleIndex3 .allLotterySingle .items .item .bot table tr .buttons a, .allSingleIndex3 .allLotterySingle .items .item .bot table tr .buttons button {
        font-size: .5rem
    }
}

.allSingleIndex3 .allProductList .title .title2 {
    transform: translate(0)
}

.allSingleIndex3 .tags {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    box-shadow: 6px 6px #0000001a;
    background: var(--single-color);
    padding: .5rem;
    border-radius: 5px;
    margin: auto;
    margin-top: 2rem
}

.allSingleIndex3 .tags .title2 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex3 .tags ul {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center
}

.allSingleIndex3 .tags ul li {
    background: var(--back2-color);
    padding: .2rem .5rem;
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex3 .tags ul li a {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleIndex3 .tags ul li a:hover {
    color: var(--green-color)
}

.allSingleIndex3 .detailProducts {
    margin: auto;
    margin-top: 2rem;
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct {
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 6px 6px #0000001a;
    position: relative;
    z-index: 2;
    overflow-y: hidden
}

.allSingleIndex3 .detailProducts .detailProduct .tabs {
    width: 90%;
    border-radius: 10px;
    background: var(--back3-color);
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    margin: 1rem auto
}

.allSingleIndex3 .detailProducts .detailProduct .tabs a {
    display: grid;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-left: 2px solid #eee
}

.allSingleIndex3 .detailProducts .detailProduct .tabs a:last-child {
    border-left: 0
}

.allSingleIndex3 .detailProducts .detailProduct .body {
    border-bottom: 2px solid #eee;
    padding: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct .body .bodyItem p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2.25;
    border-radius: 10px
}

.allSingleIndex3 .detailProducts .detailProduct .body .bodyItem p .image {
    display: grid;
    justify-content: center
}

.allSingleIndex3 .detailProducts .detailProduct .body .bodyItem .title1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct .body .bodyItem .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .detailProducts .detailProduct .body .bodyItem .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

@media screen and (max-width: 700px) {
    .allSingleIndex3 .detailProducts .detailProduct .body .bodyItem p {
        font-size: .7rem
    }

    .allSingleIndex3 .detailProducts .detailProduct .body .bodyItem label {
        font-size: 1rem;
        font-weight: 700;
        color: #000
    }
}

.allSingleIndex3 .detailProducts .detailProduct .property {
    padding: 1rem;
    border-bottom: 2px solid #eee
}

.allSingleIndex3 .detailProducts .detailProduct .property .title1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .detailProducts .detailProduct .property .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .detailProducts .detailProduct .property .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

.allSingleIndex3 .detailProducts .detailProduct .property ul {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct .property ul li {
    display: grid;
    grid-template-columns:20rem 1fr;
    grid-gap: .5rem
}

.allSingleIndex3 .detailProducts .detailProduct .property ul li .title2 {
    background: var(--back3-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex3 .detailProducts .detailProduct .property ul li p {
    background: var(--back2-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem
}

.allSingleIndex3 .detailProducts .detailProduct .video {
    padding: 1rem;
    border-top: 2px solid #eee;
    margin-top: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct .video .title1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex3 .detailProducts .detailProduct .video .title1 i {
    display: grid;
    align-items: center
}

.allSingleIndex3 .detailProducts .detailProduct .video .title1 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

.allSingleIndex3 .detailProducts .detailProduct .video ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex3 .detailProducts .detailProduct .video ul li {
    padding: 1rem;
    border-radius: 10px;
    background: #f5f5f5
}

.allSingleIndex3 .detailProducts .detailProduct .video ul li video {
    width: 100%;
    height: 9rem;
    object-fit: contain
}

.allSingleIndex3 .detailProducts .detailBox {
    width: 17rem;
    background: var(--single-color);
    border-radius: 10px;
    box-shadow: 6px 6px #0000001a;
    overflow-y: hidden;
    position: sticky;
    top: 7rem;
    padding: 1rem;
    border-top: 4px solid var(--green-color)
}

.allSingleIndex3 .detailProducts .detailBox .pic img {
    height: 10rem;
    width: 100%;
    object-fit: contain
}

.allSingleIndex3 .detailProducts .detailBox .title2 {
    margin: 1rem 0;
    font-size: .9rem;
    font-weight: 700;
    color: #000;
    opacity: .7
}

.allSingleIndex3 .detailProducts .detailBox .price1 {
    display: grid;
    justify-content: left;
    align-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--green-color);
    margin-bottom: 1rem
}

.allSingleIndex3 .detailProducts .detailBox .addButton {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    overflow: hidden;
    background: var(--green-color);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: 0 .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex3 .detailProducts .detailBox .addButton i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex3 .detailProducts .detailBox .addButton i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .detailProducts .detailBox .addButton button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex3 .detailProducts .detailBox .addButton:hover {
    box-shadow: -500px 0 #0000001f inset
}

.allSingleIndex3 .detailProducts .detailBox .emptyProduct {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: -46px 0 #0000001f inset;
    width: 100%;
    padding: 0 .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.allSingleIndex3 .detailProducts .detailBox .emptyProduct i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleIndex3 .detailProducts .detailBox .emptyProduct i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex3 .detailProducts .detailBox .emptyProduct button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allSingleIndex3 .allShare, .allSingleIndex3 .allNotification, .allSingleIndex3 .allChart {
    display: none
}

.allSingleIndex3 .all3DSingle {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    z-index: 999;
    display: none
}

.allSingleIndex3 .all3DSingle .all3DSingleItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .title360Single {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: 1rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .title360Single i {
    display: grid;
    grid-template-columns:1fr;
    align-items: center
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .title360Single i svg {
    width: 2rem;
    height: 2rem
}

.allSingleIndex3 .all3DSingle .all3DSingleItems #product360 {
    cursor: grab;
    display: grid
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .spritespin-progress {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 45%
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .spritespin-progress-label {
    color: gray
}

.allSingleIndex3 .all3DSingle .all3DSingleItems .spritespin-progress-bar {
    background-color: gray;
    height: 1px
}

@media screen and (max-width: 800px) {
    .allSingleIndex3 .address {
        padding: .5rem;
        border-radius: 5px
    }

    .allSingleIndex3 .address a {
        font-size: .6rem
    }

    .allSingleIndex3 .address a:after {
        content: "/";
        padding: 0 .3rem
    }

    .allSingleIndex3 .topSingle {
        padding: .5rem;
        display: block
    }

    .allSingleIndex3 .topSingle .imageContainer {
        display: none
    }

    .allSingleIndex3 .topSingle .resImage {
        display: block !important;
        margin-bottom: 1rem
    }

    .allSingleIndex3 .topSingle .right, .allSingleIndex3 .topSingle .left .note, .allSingleIndex3 .topSingle .left .ability, .allSingleIndex3 .topSingle .left .boxes, .allSingleIndex3 .topSingle .left .scoreProduct {
        margin-bottom: 1rem
    }

    .allSingleIndex3 .topSingle .left .gifOptions p {
        font-size: .7rem
    }

    .allSingleIndex3 .topSingle .singleData {
        padding: .5rem
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo {
        display: block
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo .right .shortDetail {
        grid-template-columns:1fr 1fr;
        grid-gap: 1rem
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo .right .boxes {
        grid-template-columns:1fr
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo .right .gifOptions {
        grid-template-columns:1fr 1fr;
        margin-bottom: 1rem
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo .right .gifOptions a, .allSingleIndex3 .topSingle .singleData .singleInfo .right .gifOptions div {
        width: auto
    }

    .allSingleIndex3 .topSingle .singleData .singleInfo .leftData {
        margin-top: 1rem
    }

    .allSingleIndex3 .collectionProduct {
        display: block
    }

    .allSingleIndex3 .collectionProduct .rightCollect {
        position: fixed;
        display: block;
        opacity: 0;
        visibility: hidden
    }

    .allSingleIndex3 .detailProducts {
        display: block
    }

    .allSingleIndex3 .detailProducts .detailProduct .tabs {
        grid-template-columns:1fr 1fr
    }

    .allSingleIndex3 .detailProducts .detailProduct .property ul, .allSingleIndex3 .detailProducts .detailProduct .property ul li {
        display: block
    }

    .allSingleIndex3 .detailProducts .detailProduct .property ul li p {
        margin-left: 2rem;
        margin-top: .5rem;
        background: #f5f5f5
    }

    .allSingleIndex3 .detailProducts .detailBox {
        display: none;
        position: absolute;
        visibility: hidden
    }
}

.allChartPrice {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

.allChartPrice .showCharts {
    width: 50%;
    margin: auto;
    background: var(--back1-color);
    display: grid;
    grid-template-columns:1fr;
    border-radius: .4rem;
    overflow: hidden;
    padding: 2rem;
    position: relative
}

.allChartPrice .showCharts .closeChart {
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: .5rem;
    top: .5rem;
    height: 2rem;
    cursor: pointer
}

.allChartPrice .showCharts .closeChart svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allChartPrice .showCharts .chartPrice {
    text-align: center;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allComment {
    padding: 1rem
}

.allComment h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allComment h3 i {
    display: grid;
    align-items: center
}

.allComment h3 i svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--green-color)
}

.allComment .btnComment {
    margin-top: 1rem
}

.allComment .btnComment h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    opacity: .7
}

.allComment .btnComment p {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allComment .btnComment .showAdd {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden;
    background: var(--green-color);
    box-shadow: -46px 0 #0000001f inset;
    padding: 0 .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer;
    width: 12rem
}

.allComment .btnComment .showAdd i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allComment .btnComment .showAdd i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allComment .btnComment .showAdd button {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    background: transparent
}

.allComment .btnComment .showAdd:hover {
    box-shadow: -200px 0 #0000001f inset
}

.allComment .addComments {
    display: none;
    margin-top: 1rem
}

.allComment .addComments .addComment {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem
}

.allComment .addComments .addComment .right .alert {
    color: red;
    font-size: .8rem;
    font-weight: 300
}

.allComment .addComments .addComment .right .sendCommentItem {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    margin-top: 1rem
}

.allComment .addComments .addComment .right .sendCommentItem input {
    padding: .5rem;
    border: 1px solid #eee;
    border-radius: .2rem;
    width: 100%;
    transition: all .3s ease-in-out;
    font-size: .75rem;
    font-weight: 300
}

.allComment .addComments .addComment .right .sendCommentItem textarea {
    padding: .5rem;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 100%;
    outline-style: unset;
    transition: all .3s ease-in-out;
    font-size: .75rem;
    font-weight: 300;
    height: 10rem;
    resize: vertical
}

.allComment .addComments .addComment .right .sendCommentItem .sendCommentItemTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    grid-gap: .5rem;
    align-items: center
}

.allComment .addComments .addComment .right .sendCommentItem .sendCommentItemTitle i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allComment .addComments .addComment .right .sendCommentItem .sendCommentItemTitle i svg {
    fill: orange;
    width: .6rem;
    height: .6rem
}

.allComment .addComments .addComment .right .sendCommentItem label {
    font-size: .95rem;
    line-height: 1.692;
    color: #000;
    position: relative
}

.allComment .addComments .addComment .right .sendCommentItem label i {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.allComment .addComments .addComment .right .sendCommentItem label i svg {
    width: 1.2rem;
    height: 1.2rem
}

.allComment .addComments .addComment .right .sendCommentItem span {
    margin-top: .5rem;
    width: 100%;
    border: 1px solid var(--green-color);
    background: #EDF6F7;
    position: relative;
    padding: .5rem;
    color: var(--green-color);
    border-radius: 5px
}

.allComment .addComments .addComment .right .sendCommentItem span i {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.allComment .addComments .addComment .right .sendCommentItem span i svg {
    width: 1rem;
    height: 1rem
}

.allComment .addComments .addComment .right #badContainer span {
    border: 1px solid red;
    background: #F7EDED;
    color: red
}

.allComment .addComments .addComment .right .rates {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: 1rem
}

.allComment .addComments .addComment .right .rates h4 {
    font-size: .95rem;
    color: #000;
    font-weight: 500
}

.allComment .addComments .addComment .right .rates .rateItem {
    direction: ltr
}

.allComment .addComments .addComment .left {
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #eee;
    width: 30rem;
    position: sticky;
    top: 1rem
}

.allComment .addComments .addComment .left .titlePost {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 700
}

.allComment .addComments .addComment .left h5 {
    font-size: 1rem;
    font-weight: 300;
    color: #45bfec
}

.allComment .addComments .addComment .left ul li {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    grid-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    line-height: 2rem;
    margin-top: 1rem;
    align-items: center
}

.allComment .addComments .addComment .left ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #707070
}

.allComment .addComments .addComment .left .allCommentButtons {
    display: grid;
    grid-template-columns:1fr 1fr;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allComment .addComments .addComment .left .allCommentButtons button {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: green;
    padding: .5rem 1rem;
    border-radius: .2rem
}

.allComment .addComments .addComment .left .allCommentButtons button i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allComment .addComments .addComment .left .allCommentButtons button i svg {
    fill: #fff;
    width: 1rem;
    height: 1rem
}

.allComment .addComments .addComment .left .allCommentButtons button img {
    width: 4rem;
    height: 1rem;
    object-fit: cover
}

.allComment .addComments .addComment .left .allCommentButtons button:last-child {
    display: block;
    background: red
}

.allComment .showComments {
    border-top: 1px solid #eee;
    margin-top: 2rem;
    padding-top: 2rem
}

.allComment .showComments h5 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 2rem
}

.allComment .showComments .getCommentItem {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    display: grid;
    grid-template-columns:13rem 1fr;
    grid-gap: 2rem
}

.allComment .showComments .getCommentItem .rightComment .topRight {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allComment .showComments .getCommentItem .rightComment .topRight h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000
}

.allComment .showComments .getCommentItem .rightComment .topRight span {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    background: #F1F4F9;
    border-radius: 5px;
    padding: .1rem .5rem;
    opacity: .6
}

.allComment .showComments .getCommentItem .rightComment .botRight h5 {
    font-size: .85rem;
    font-weight: 700;
    color: orange;
    letter-spacing: .5px;
    margin-bottom: 0
}

.allComment .showComments .getCommentItem .rightComment .botRight .rates {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .5rem
}

.allComment .showComments .getCommentItem .rightComment .botRight .rates .rateItem {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.allComment .showComments .getCommentItem .leftComment .allCommentTitle {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    padding: .5rem;
    border-radius: 5px;
    background: #f9f9f9;
    margin-bottom: 1rem
}

.allComment .showComments .getCommentItem .leftComment .allCommentBody p {
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    line-height: 1.7rem;
    opacity: .6
}

.allComment .showComments .getCommentItem .leftComment .getCommentDatas {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: 1rem
}

.allComment .showComments .getCommentItem .leftComment .getCommentData {
    margin-top: 2rem
}

.allComment .showComments .getCommentItem .leftComment .getCommentData h5 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: .5rem
}

.allComment .showComments .getCommentItem .leftComment .getCommentData .items {
    display: grid;
    grid-gap: .5rem
}

.allComment .showComments .getCommentItem .leftComment .getCommentData .items .item {
    display: grid;
    grid-template-columns:auto 1fr;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    color: #000;
    font-weight: 300;
    font-size: .8rem;
    opacity: .7
}

.allComment .showComments .getCommentItem .leftComment .getCommentData .items .item i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allComment .showComments .getCommentItem .leftComment .getCommentData .items .item i svg {
    fill: var(--green-color);
    width: .5rem;
    height: .5rem
}

.allComment .showComments .getCommentItem .leftComment .bad .items .item i svg {
    fill: red
}

.allComment .showComments .getCommentItem:last-child {
    border-bottom: 0
}

.allComment .showComments .emptyComment {
    font-size: 1rem;
    font-weight: 500;
    color: red;
    opacity: .7
}

@media screen and (max-width: 800px) {
    .allComment .addComments .addComment {
        display: block
    }

    .allComment .addComments .addComment .left {
        width: auto
    }

    .allComment .showComments .getCommentItem {
        display: block
    }

    .allComment .showComments .getCommentItem .leftComment {
        margin-top: 1rem
    }

    .allComment .showComments .getCommentItem .leftComment .getCommentDatas {
        display: block
    }
}

.allSingleNews {
    display: grid;
    grid-template-columns:1fr 3fr;
    grid-gap: 1rem;
    margin: auto;
    margin-top: 1rem
}

.allSingleNews .right .pic {
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem;
    background: var(--back1-color)
}

.allSingleNews .right .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.allSingleNews .right .postsList {
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--back1-color)
}

.allSingleNews .right .postsList .titleList {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allSingleNews .right .postsList ul li {
    margin-top: 1rem;
    overflow: hidden;
    transition: all .3s ease-in-out
}

.allSingleNews .right .postsList ul li a {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center
}

.allSingleNews .right .postsList ul li a img {
    width: 5rem;
    height: 100%;
    object-fit: cover;
    border-radius: 3px
}

.allSingleNews .right .postsList ul li a .showInfo {
    display: grid;
    justify-content: right;
    text-align: right;
    align-items: center;
    grid-gap: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleNews .right .postsList ul li a .showInfo .title1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    color: #000;
    font-size: .8rem
}

.allSingleNews .right .postsList ul li a .showInfo span {
    font-size: .7rem;
    color: #000;
    font-weight: 300
}

.allSingleNews .right .postsList ul li a:hover .showInfo h4 {
    color: var(--green-color)
}

.allSingleNews .left h1 {
    font-size: 1.7rem;
    font-weight: 500;
    color: #000;
    line-height: 3rem
}

.allSingleNews .left .leftItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    padding: 1rem 0;
    margin: 1rem 0;
    border-top: 2px dashed #eee;
    border-bottom: 2px dashed #eee
}

.allSingleNews .left .leftItem .option .title1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleNews .left .leftItem .option .title2 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    background: var(--back2-color);
    border-radius: 5rem;
    padding: .2rem .5rem
}

.allSingleNews .left .leftItem .option a {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: .5rem
}

.allSingleNews .left .leftItem .option a span {
    font-size: 1.1rem
}

.allSingleNews .left .fieldData {
    display: flex;
    gap: 1rem;
    justify-content: right;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px dashed #eee
}

.allSingleNews .left .fieldData .option .title1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleNews .left .fieldData .option .title3 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: .5rem
}

.allSingleNews .left .leftP p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem;
    line-height: 3rem;
    opacity: .7
}

.allSingleNews .left .leftP strong {
    font-weight: 900
}

.allSingleNews .left .leftP .image {
    display: grid;
    justify-content: center;
    margin: 1rem 0
}

.allSingleNews .left .leftP img {
    object-fit: contain
}

.allSingleNews .left .leftP ul {
    margin: 2rem
}

.allSingleNews .left .leftP ul li {
    list-style: decimal;
    margin-bottom: 1rem
}

.allSingleNews .left .leftP ul ul {
    margin: 0;
    margin-top: 1rem;
    margin-right: 1rem
}

.allSingleNews .left .leftP table {
    margin: 1rem 0;
    border: 1px solid #eee;
    width: 100%
}

.allSingleNews .left .leftP table thead tr {
    background: #eee
}

.allSingleNews .left .leftP table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allSingleNews .left .leftP table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allSingleNews .left .leftP table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allSingleNews .left .leftP table tr td p {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000;
    margin-bottom: 0;
    line-height: unset
}

.allSingleNews .left .leftP table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.allSingleNews .left .leftP table tr td a {
    display: grid;
    align-items: center
}

.allSingleNews .left .leftP table tr td a svg {
    margin-left: .5rem
}

.allSingleNews .left .leftP table tr:nth-child(2n) {
    background: #eee
}

.allSingleNews .left video {
    margin: 1rem 0
}

.allSingleNews .left .tags {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    background: var(--back1-color);
    padding: .5rem;
    box-shadow: 0 0 5px #0000000d;
    border-radius: 5px
}

.allSingleNews .left .tags .title1 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleNews .left .tags ul {
    display: flex;
    align-items: center;
    justify-items: right;
    gap: .5rem
}

.allSingleNews .left .tags ul li {
    background: var(--back2-color);
    padding: .2rem .5rem;
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleNews .left .tags ul li a {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleNews .left .tags ul li a:hover {
    color: var(--green-color)
}

@media screen and (max-width: 700px) {
    .allSingleNews {
        display: block
    }

    .allSingleNews .right .postsList {
        display: none
    }
}

.showAllShare {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

.showAllShare .showAllShareHome {
    width: 30%;
    margin: auto;
    background: var(--back1-color);
    display: grid;
    grid-template-columns:1fr;
    border-radius: .4rem;
    overflow: hidden
}

.showAllShare .showAllShareHome .showAllShareTop {
    display: grid;
    grid-template-columns:1fr auto;
    background: var(--back2-color);
    border-bottom: 2px solid #eee
}

.showAllShare .showAllShareHome .showAllShareTop i {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    cursor: pointer
}

.showAllShare .showAllShareHome .showAllShareTop i svg {
    fill: #000;
    width: 1.3rem;
    height: 1.3rem
}

.showAllShare .showAllShareHome .showAllShareTop .title2 {
    font-size: .8rem;
    font-weight: 300;
    padding: 1rem;
    color: #000
}

.showAllShare .showAllShareHome .showAllShareItems {
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    background: var(--back1-color);
    padding: 1rem;
    padding-bottom: 0
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    justify-content: space-between;
    grid-gap: .4rem;
    text-align: center;
    border: 1px solid #eee;
    padding: .5rem;
    border-radius: 5px
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem .showAllShareItemName .title2 {
    font-size: 1rem;
    text-align: right;
    color: #000;
    font-weight: 300
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem .showAllShareItemName a {
    text-align: right;
    width: 100%;
    display: block;
    color: #000;
    opacity: .5;
    font-size: .7rem;
    font-weight: 300;
    margin-top: .3rem;
    height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem a {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem a i svg {
    width: 2.5rem;
    height: 2.5rem
}

.showAllShare .showAllShareHome .showAllShareTag {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    justify-content: left;
    direction: ltr;
    grid-gap: .5rem;
    margin: 1rem;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid #eee
}

.showAllShare .showAllShareHome .showAllShareTag i {
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.showAllShare .showAllShareHome .showAllShareTag i svg {
    fill: #000;
    width: 1.3rem;
    height: 1.3rem
}

.showAllShare .showAllShareHome .showAllShareTag i .copy {
    fill: var(--green-color)
}

.showAllShare .showAllShareHome .showAllShareTag .title2 {
    color: #000;
    text-align: left;
    font-weight: 300
}

.showAllShare .showAllShareHome .showAllShareTag input {
    visibility: hidden;
    position: absolute;
    opacity: 0
}

@media screen and (max-width: 1200px) {
    .showAllShare .showAllShareHome {
        width: 50%
    }
}

@media screen and (max-width: 1000px) {
    .showAllShare .showAllShareHome {
        width: 55%
    }
}

@media screen and (max-width: 800px) {
    .showAllShare .showAllShareHome {
        width: 98%;
        display: block
    }
}

.allPackSingle .allPackSingleTop {
    background: url(/img/packShop.jpg);
    background-size: cover;
    height: 15rem;
    position: relative
}

.allPackSingle .allPackSingleTop:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .7)
}

.allPackSingle .allPackSingleTop .allPackSingleTopBlock {
    position: relative;
    z-index: 2;
    width: 96%;
    margin: auto;
    text-align: center;
    padding-top: 4rem
}

.allPackSingle .allPackSingleTop .allPackSingleTopBlock h1 {
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff
}

.allPackSingle .allPackSingleTop .allPackSingleTopBlock p {
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    margin-top: 1rem
}

.allPackSingle .allPackSingleTopBlockInfo {
    background: var(--back1-color);
    margin: auto;
    padding: 1rem;
    border-radius: 10px;
    margin-top: -2rem;
    box-shadow: 0 12px 12px #b5b5b51c;
    position: relative;
    z-index: 2
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo .allPackSingleTopBlockInfoItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo .allPackSingleTopBlockInfoItem h3 {
    font-size: 1.4rem;
    font-weight: 400;
    color: #000
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo .allPackSingleTopBlockInfoItem h3 span {
    font-weight: 300;
    letter-spacing: .1px;
    font-size: .8rem;
    opacity: .7
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo .allPackSingleTopBlockInfoItem button {
    background: var(--green-color);
    padding: .3rem 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    border-radius: 10px
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo h4 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    background: var(--back2-color);
    padding: .2rem 1rem;
    border-radius: 5px;
    color: #000;
    font-size: .9rem;
    font-weight: 300
}

.allPackSingle .allPackSingleTopBlockInfo .topInfo h4 svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
    opacity: .7
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(25rem, 1fr));
    grid-gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    padding: .5rem;
    border-radius: 5px;
    border: 1px solid #eee;
    cursor: pointer;
    box-shadow: 0 0 5px #0000001a
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .rightO {
    display: flex;
    justify-items: right;
    align-items: center;
    gap: .5rem
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .rightO input {
    width: 1.3rem;
    height: 1.3rem
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .rightO .titleO {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .price {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .body {
    position: relative
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .body i {
    display: grid;
    align-items: center
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .body i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #444
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .body .tooltip {
    position: absolute;
    bottom: calc(100% + .5rem);
    right: -4rem;
    width: 10rem;
    font-size: .8rem;
    font-weight: 300;
    color: #444;
    background: var(--back1-color);
    padding: .3rem;
    border-radius: 5px;
    text-align: center;
    display: none;
    box-shadow: 0 0 15px #0003
}

.allPackSingle .allPackSingleTopBlockInfo .botInfo .option .leftO .body:hover .tooltip {
    display: block
}

.allPackSingle .allPackSinglePosts {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    margin: 1rem auto
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost {
    border-radius: 10px;
    position: relative;
    padding: 1rem;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .offProduct .offProductItem {
    position: relative;
    z-index: 2
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--green-color)
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost h3 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    height: 2.6rem
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostPic img {
    width: 100%;
    height: 15rem;
    object-fit: contain
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData h4 {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    background: var(--back2-color);
    padding: .5rem;
    border-radius: 5rem;
    color: #000;
    width: 2rem;
    transition: all .3s ease-in-out
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData h4 svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData h4 span {
    transition: all .3s ease-in-out;
    position: absolute;
    left: 100rem;
    opacity: 0;
    width: 0;
    font-size: .75rem;
    overflow: hidden
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData .allHoopersPostDataPrice h6 {
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    text-align: left
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost .allHoopersPostData .allHoopersPostDataPrice h5 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    text-align: left
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost:hover .allHoopersPostData h4 {
    grid-template-columns:auto auto;
    width: 5rem
}

.allPackSingle .allPackSinglePosts .allPackSinglePost .allHoopersPost:hover .allHoopersPostData h4 span {
    opacity: 1;
    position: relative;
    width: 100%;
    left: auto
}

@media screen and (max-width: 500px) {
    .allPackSingle .allPackSingleTopBlockInfo .allPackSingleTopBlockInfoItem {
        grid-template-columns:auto
    }
}

.singleNotification {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    z-index: 999
}

.singleNotification .singleNotificationItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px
}

.singleNotification .singleNotificationItems i {
    display: grid;
    grid-template-columns:1fr;
    margin-bottom: 1rem
}

.singleNotification .singleNotificationItems i svg {
    width: 100%;
    height: 6rem
}

.singleNotification .singleNotificationItems .singleNotificationTitle {
    margin-bottom: 1rem
}

.singleNotification .singleNotificationItems .singleNotificationTitle .title1 {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.singleNotification .singleNotificationItems .singleNotificationData {
    margin-top: 2rem
}

.singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem {
    direction: rtl;
    margin-top: .5rem
}

.singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem label {
    display: grid;
    padding: .5rem;
    grid-gap: .5rem;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    cursor: pointer;
    color: #000;
    letter-spacing: .1px;
    font-weight: 300;
    font-size: .85rem;
    line-height: 1.571;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox], .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 2px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background .3s, border-color .3s, box-shadow .2s
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:after, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: all .3s ease-in-out
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:checked, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled:checked, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border)
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled + label, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled + label {
        cursor: not-allowed
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:hover:not(:checked):not(:disabled), .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:focus, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch), .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch) {
        width: 21px
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):after, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch):after {
        opacity: var(--o, 0)
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):checked, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch):checked {
        --o: 1
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox] + label, .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch) {
        border-radius: 7px
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg))
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):checked {
        --r: 43deg
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translate(var(--x, 0))
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: .6
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] {
        border-radius: 50%
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, .7))
    }

    .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:checked {
        --s: .5
    }
}

.singleNotification .singleNotificationItems .singleNotificationButtons {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.singleNotification .singleNotificationItems .singleNotificationButtons button {
    padding: .5rem 1rem;
    border-radius: .3rem;
    background-color: #5a8dee;
    color: #fff;
    box-shadow: 0 2px 4px #5a8dee80;
    transition: all .3s ease-in-out;
    display: grid;
    align-items: center;
    height: 2.5rem
}

.singleNotification .singleNotificationItems .singleNotificationButtons button .loading {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff;
    animation: arrow-anim2 .5s ease infinite
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:hover {
    background-color: #2c6de9
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:disabled {
    opacity: .3
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:disabled:hover {
    background-color: #5a8dee
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:nth-child(2) {
    background-color: #ff5b5c;
    color: #fff
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:nth-child(2):hover {
    background-color: #ff2829
}

@media screen and (max-width: 800px) {
    .singleNotification .singleNotificationItems {
        width: 90%
    }
}

.allSingleDownload {
    margin: auto
}

.allSingleDownload .address {
    display: grid;
    grid-template-columns:repeat(3, auto);
    justify-content: right;
    align-items: center;
    margin-top: 1rem
}

.allSingleDownload .address a {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    letter-spacing: .5px
}

.allSingleDownload .address a:after {
    content: "/";
    padding: 0 .5rem
}

.allSingleDownload .address a:last-child:after {
    content: "";
    padding: 0
}

@media screen and (max-width: 1000px) {
    .allSingleDownload .address a {
        font-size: .6rem
    }
}

.allSingleDownload h1 {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 2.3rem;
    color: #000;
    letter-spacing: 1px;
    text-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    margin-top: 2rem
}

.allSingleDownload h1 span {
    padding: .3rem .8rem;
    border-radius: 5px;
    background: rgba(255, 0, 0, .1);
    color: red;
    font-size: .8rem;
    font-weight: 300
}

.allSingleDownload .singleTop {
    display: grid;
    grid-template-columns:1fr 22rem;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allSingleDownload .singleTop .right .rightItems {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem
}

.allSingleDownload .singleTop .right .rightItems .pic {
    background: var(--back1-color);
    border-radius: 5px;
    padding: .5rem
}

.allSingleDownload .singleTop .right .rightItems .pic .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px
}

.allSingleDownload .singleTop .right .tabs {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: .5rem;
    margin-top: 1rem;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1rem, 1fr))
}

.allSingleDownload .singleTop .right .tabs .tab {
    display: grid;
    text-align: center
}

.allSingleDownload .singleTop .right .tabs .tab a {
    cursor: pointer;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-gap: .5rem;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 10px;
    font-weight: 500;
    color: #000
}

.allSingleDownload .singleTop .right .tabs .tab a span {
    background: red;
    color: #fff;
    padding: .3rem .5rem;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: 300
}

.allSingleDownload .singleTop .right .tabs .tab .active {
    background: rgba(255, 0, 0, .1);
    color: red
}

.allSingleDownload .singleTop .right .review, .allSingleDownload .singleTop .right .comment {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 1rem
}

.allSingleDownload .singleTop .right .review p {
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .2px;
    line-height: 2.2rem;
    color: #000
}

.allSingleDownload .singleTop .right .review p h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000
}

.allSingleDownload .singleTop .right .review p h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allSingleDownload .singleTop .right .review .cats {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px dashed #eee;
    align-items: center
}

.allSingleDownload .singleTop .right .review .cats h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    letter-spacing: .5px
}

.allSingleDownload .singleTop .right .review .cats ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr));
    grid-gap: 1rem;
    align-items: center
}

.allSingleDownload .singleTop .right .review .cats ul li {
    background: var(--back2-color);
    padding: .3rem 1rem;
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center
}

.allSingleDownload .singleTop .right .review .cats ul li a {
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    color: #000;
    letter-spacing: .5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleDownload .singleTop .right .comment {
    display: none
}

.allSingleDownload .singleTop .right .related {
    margin-top: 2rem
}

.allSingleDownload .singleTop .right .files {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.allSingleDownload .singleTop .right .files .file {
    background: white;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allSingleDownload .singleTop .right .allShowCategory {
    margin-top: 1rem;
    border-radius: 10px;
    padding: 1rem;
    padding-bottom: 0
}

.allSingleDownload .singleTop .left .detail {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem
}

.allSingleDownload .singleTop .left .detail .detailPrice {
    display: grid;
    grid-template-columns:1fr 1fr
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h4 {
    font-size: 1rem;
    font-weight: 300;
    color: red;
    text-align: center;
    margin-bottom: .5rem
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h5 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
    text-align: center
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h5 span {
    font-size: .9rem;
    letter-spacing: .1px
}

.allSingleDownload .singleTop .left .detail .detailPrice .item:first-child {
    border-left: 2px dashed #eee
}

.allSingleDownload .singleTop .left .detail .detailPrice .item:first-child h4 {
    color: var(--green-color)
}

.allSingleDownload .singleTop .left .detail .rates {
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
    grid-gap: 1rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #eee
}

.allSingleDownload .singleTop .left .detail .rates .top {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem
}

.allSingleDownload .singleTop .left .detail .rates .top span {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleDownload .singleTop .left .detail .rates .top span span {
    color: var(--green-color);
    font-size: 1rem
}

.allSingleDownload .singleTop .left .detail .rates .top h4 {
    text-align: left;
    color: var(--green-color);
    font-weight: 300;
    font-size: 1rem
}

.allSingleDownload .singleTop .left .detail .rates .top h4 span {
    color: #000;
    font-size: .8rem
}

.allSingleDownload .singleTop .left .addCart {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem
}

.allSingleDownload .singleTop .left .addCart a {
    background: var(--green-color);
    padding: .5rem 1rem;
    display: grid;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 10px #0000001a;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    opacity: .7;
    cursor: pointer
}

.allSingleDownload .singleTop .left .addCart a svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: #fff
}

.allSingleDownload .singleTop .left .addCart a:hover {
    opacity: 1
}

.allSingleDownload .singleTop .left .addCart p {
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .6;
    line-height: 1.9rem;
    text-align: center
}

.allSingleDownload .singleTop .left .addCart .options {
    display: grid;
    grid-template-columns:1fr 1fr;
    margin-top: 1rem
}

.allSingleDownload .singleTop .left .addCart .options .option {
    margin-bottom: 1rem
}

.allSingleDownload .singleTop .left .addCart .options .option h3 {
    text-align: center;
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allSingleDownload .singleTop .left .addCart .options .option i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSingleDownload .singleTop .left .addCart .options .option i svg {
    width: 1.8rem;
    height: 1.7rem;
    fill: #000
}

.allSingleDownload .singleTop .left .description {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem
}

.allSingleDownload .singleTop .left .description .item {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    margin-top: 1rem
}

.allSingleDownload .singleTop .left .description .item h4, .allSingleDownload .singleTop .left .description .item span, .allSingleDownload .singleTop .left .description .item a {
    font-size: .9rem;
    letter-spacing: .3px;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allSingleDownload .singleTop .left .description .item span, .allSingleDownload .singleTop .left .description .item a {
    opacity: 1
}

.allSingleDownload .singleTop .left .description .item:first-child {
    margin-top: 0
}

.allSingleDownload .singleTop .left .description .problem {
    margin-top: 1rem;
    display: grid;
    justify-content: center
}

.allSingleDownload .singleTop .left .description .problem button {
    background: transparent;
    font-size: .8rem;
    font-weight: 300;
    opacity: .5;
    color: red;
    border-bottom: 1px dashed red;
    padding: .5rem;
    padding-top: 0;
    transition: all .3s ease-in-out
}

.allSingleDownload .singleTop .left .description .problem button:hover {
    opacity: 1
}

.allSingleDownload .singleTop .left .gifOptions {
    display: grid;
    grid-template-columns:1fr 1fr;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleDownload .singleTop .left .gifOptions a, .allSingleDownload .singleTop .left .gifOptions div {
    padding: .5rem;
    border-radius: 5px;
    cursor: pointer
}

.allSingleDownload .singleTop .left .gifOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem
}

.allSingleDownload .singleTop .left .gifOptions i svg {
    width: 1.8rem;
    height: 1.8rem
}

.allSingleDownload .singleTop .left .gifOptions p {
    font-size: .85rem;
    font-weight: 300;
    text-align: center
}

.allSingleDownload .singleTop .left .gifOptions .warnGift {
    background: rgba(0, 128, 0, .1)
}

.allSingleDownload .singleTop .left .gifOptions .warnGift svg {
    fill: var(--green-color)
}

.allSingleDownload .singleTop .left .gifOptions .warnGift p {
    color: var(--green-color)
}

.allSingleDownload .singleTop .left .gifOptions .productVideo {
    background: rgba(115, 0, 128, .1)
}

.allSingleDownload .singleTop .left .gifOptions .productVideo svg {
    fill: #8200ae
}

.allSingleDownload .singleTop .left .gifOptions .productVideo p {
    color: #8200ae
}

.allSingleDownload .singleTop .left .gifOptions .originalItem {
    cursor: auto;
    background: rgba(255, 195, 0, .1)
}

.allSingleDownload .singleTop .left .gifOptions .originalItem svg {
    fill: #ffc300
}

.allSingleDownload .singleTop .left .gifOptions .originalItem p {
    color: #ffc300
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=quickBuy] {
    background: rgba(255, 105, 0, .1)
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=quickBuy] svg {
    fill: #f80
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=quickBuy] p {
    color: #f80
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=counselingBtn] {
    background: rgba(0, 51, 255, .1)
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=counselingBtn] svg {
    fill: #03f
}

.allSingleDownload .singleTop .left .gifOptions .optionItem[name=counselingBtn] p {
    color: #0059ff
}

.allSingleDownload .shopPop {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    overflow-y: scroll
}

.allSingleDownload .shopPop .showShop {
    width: 50%;
    margin: auto;
    background: var(--back1-color);
    display: grid;
    grid-template-columns:1fr;
    border-radius: .4rem;
    overflow: hidden;
    padding: 1rem
}

.allSingleDownload .shopPop .showShop label {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allSingleDownload .shopPop .showShop label input, .allSingleDownload .shopPop .showShop label select {
    background: transparent;
    padding: .3rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    border: 2px solid #eee
}

.allSingleDownload .shopPop .showShop .discounts {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem
}

.allSingleDownload .shopPop .showShop .discounts button {
    border-radius: 5px;
    padding: 0 1rem;
    background: var(--green-color);
    color: #fff
}

.allSingleDownload .shopPop .showShop .gatePay {
    display: grid;
    grid-template-columns:repeat(6, 5rem);
    justify-content: center;
    grid-gap: 1rem;
    margin: 1rem 0
}

.allSingleDownload .shopPop .showShop .gatePay .gateItem {
    display: grid;
    justify-content: center;
    justify-items: center;
    padding: .5rem;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #eee;
    filter: grayscale(1);
    transition: all .3s ease-in-out
}

.allSingleDownload .shopPop .showShop .gatePay .gateItem img {
    height: 4rem;
    object-fit: contain
}

.allSingleDownload .shopPop .showShop .gatePay .gateItem:hover {
    filter: grayscale(0)
}

.allSingleDownload .shopPop .showShop .gatePay .active {
    border: 2px solid var(--green-color);
    filter: grayscale(0)
}

.allSingleDownload .shopPop .showShop .prices {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    grid-gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding: .5rem;
    background: var(--back3-color);
    border-radius: 5px
}

.allSingleDownload .shopPop .showShop .prices .priceItem {
    display: grid;
    grid-template-columns:repeat(2, auto);
    align-items: center;
    grid-gap: .5rem
}

.allSingleDownload .shopPop .showShop .prices .priceItem h4 {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allSingleDownload .shopPop .showShop .prices .priceItem h5 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleDownload .shopPop .showShop .prices .lice3 {
    justify-content: left
}

.allSingleDownload .shopPop .showShop .prices .lice3 h5 {
    color: red;
    font-size: 1rem
}

.allSingleDownload .shopPop .showShop .captchaQuick {
    display: grid;
    justify-content: center;
    margin-bottom: 1rem
}

.allSingleDownload .shopPop .showShop button {
    border-radius: 5px;
    overflow: hidden;
    background: #23bf53;
    width: 100%;
    padding: .3rem .8rem;
    transition: all .3s ease-in-out;
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    font-weight: 300
}

@media screen and (max-width: 1000px) {
    .allSingleDownload h1 {
        font-size: 1rem
    }

    .allSingleDownload h1 span {
        font-size: .7rem;
        padding: .3rem
    }

    .allSingleDownload .singleTop {
        display: block
    }

    .allSingleDownload .singleTop .right .rightItems {
        padding: 0;
        overflow: hidden
    }

    .allSingleDownload .singleTop .right .rightItems .pic {
        grid-template-columns:1fr
    }

    .allSingleDownload .singleTop .right .rightItems .pic .picOptions {
        display: grid;
        grid-template-columns:1fr 1fr
    }

    .allSingleDownload .singleTop .right .rightItems .pic .picOptions .picOption .icons div {
        position: absolute;
        right: auto;
        opacity: .3;
        top: -.5rem;
        transform: rotate(50deg);
        height: 5rem;
        width: 2px;
        background: #ffc64b;
        z-index: 10;
        left: 4.5rem
    }

    .allSingleDownload .singleTop .right .rightItems .pic .image .show {
        display: grid;
        grid-template-columns:1fr 1fr;
        justify-content: left;
        align-items: center;
        grid-gap: 1rem
    }

    .allSingleDownload .singleTop .right .rightItems .pic .image .show button, .allSingleDownload .singleTop .right .rightItems .pic .image .show a {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: center;
        align-items: center;
        grid-gap: .6rem;
        color: #000;
        font-weight: 500;
        font-size: .8rem;
        margin-top: 1rem;
        background: var(--back3-color);
        padding: .5rem;
        border-radius: 5px
    }

    .allSingleDownload .singleTop .right .rightItems .pic .image .show button svg, .allSingleDownload .singleTop .right .rightItems .pic .image .show a svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: #000
    }

    .allSingleDownload .singleTop .right .rightItems .pic .image .show a {
        box-shadow: 0 0 5px #00000014;
        color: #fff;
        background: red
    }

    .allSingleDownload .singleTop .right .rightItems .pic .image .show a svg {
        fill: #fff
    }

    .allSingleDownload .singleTop .right .discussion {
        display: block
    }

    .allSingleDownload .singleTop .right .discussion .allSingleQuestionBody {
        margin-top: 1rem
    }

    .allSingleDownload .singleTop .right .support {
        padding: 1rem
    }

    .allSingleDownload .singleTop .right .support .toolTip {
        padding: .5rem
    }

    .allSingleDownload .singleTop .right .support .toolTip p {
        height: auto;
        font-size: .8rem
    }

    .allSingleDownload .singleTop .right .tabs {
        grid-template-columns:1fr;
        grid-gap: .5rem
    }

    .allSingleDownload .singleTop .left {
        margin-top: 1rem
    }
}

.allSingleIndex2 {
    display: grid;
    grid-template-columns:30rem 1fr;
    position: relative
}

.allSingleIndex2 .rightSingle {
    position: absolute;
    top: -4rem;
    right: 0;
    bottom: 0;
    width: 30rem;
    padding: 5rem 2rem 2rem;
    background: var(--single-color);
    box-shadow: -10px 0 10px #0000000d;
    z-index: 5
}

.allSingleIndex2 .rightSingle .rightSingleContent {
    position: sticky;
    top: 1rem
}

.allSingleIndex2 .rightSingle .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #000;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    text-shadow: 0 5px 5px rgba(0, 0, 0, .3);
    margin-bottom: 1rem
}

.allSingleIndex2 .rightSingle .rate {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem
}

.allSingleIndex2 .rightSingle .rate .rightRate {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center
}

.allSingleIndex2 .rightSingle .rate .rightRate span {
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    border: 1px solid #ccc;
    padding: .1rem .3rem;
    border-radius: 5px
}

.allSingleIndex2 .rightSingle .rate .rightRate .rates {
    display: grid;
    grid-template-columns:repeat(5, auto);
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex2 .rightSingle .rate .rightRate .rates .rateItem {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.allSingleIndex2 .rightSingle .rate .leftRate {
    color: #0066b4;
    font-size: .7rem;
    font-weight: 300;
    cursor: pointer
}

.allSingleIndex2 .rightSingle .optionAdd {
    display: grid;
    margin-bottom: 1rem
}

.allSingleIndex2 .rightSingle .optionAdd select {
    padding: .5rem 1rem;
    border-radius: 10px;
    background: var(--single-color);
    border: 1px solid #bbb;
    color: #000
}

.allSingleIndex2 .rightSingle .optionAdd .swatch input {
    display: none
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .swatch-element {
    float: right;
    margin-right: 8px;
    position: relative
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .swatch-element:first-child {
    margin-right: 0
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .color label {
    transition: all .3s ease-in-out;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    height: 30px;
    display: grid;
    width: 40px;
    padding: 2px;
    box-shadow: 2px 2px 1px #0003
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .color label span {
    border-radius: 5px;
    display: block;
    height: 100%;
    position: relative;
    width: 100%
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .color label span:after {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allSingleIndex2 .rightSingle .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allSingleIndex2 .rightSingle .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allSingleIndex2 .rightSingle .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allSingleIndex2 .rightSingle .price .priceItem {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    border-radius: 10px;
    background: var(--back3-color);
    margin-bottom: 1rem;
    border: 1px solid #bbb
}

.allSingleIndex2 .rightSingle .price .priceItem .title2 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex2 .rightSingle .price .priceItem .prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    gap: .5rem
}

.allSingleIndex2 .rightSingle .price .priceItem .prices s {
    font-size: .7rem;
    font-weight: 500;
    color: #444
}

.allSingleIndex2 .rightSingle .price .priceItem .prices .offData {
    font-size: .7rem;
    font-weight: 300;
    color: red;
    padding: .1rem .3rem;
    border-radius: 5px;
    border: 1px solid red
}

.allSingleIndex2 .rightSingle .price .priceItem .prices .price1, .allSingleIndex2 .rightSingle .price .priceItem .prices .price2 {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--green-color)
}

.allSingleIndex2 .rightSingle .price .priceItem .prices span {
    font-size: .8rem;
    font-weight: 900;
    color: var(--green-color);
    display: grid;
    margin-left: .5rem;
    letter-spacing: .1px
}

.allSingleIndex2 .rightSingle .addButton {
    margin-top: 2rem;
    text-align: center
}

.allSingleIndex2 .rightSingle .addButton button {
    background: var(--green-color);
    border-radius: 10px;
    padding: .5rem 2rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    position: relative;
    width: 50%;
    animation: addAn 2s forwards;
    opacity: 0
}

.allSingleIndex2 .rightSingle .addButton button:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.allSingleIndex2 .rightSingle .calls {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .5rem;
    margin-top: .5rem
}

.allSingleIndex2 .rightSingle .calls a {
    display: flex;
    justify-content: center;
    gap: .5rem;
    background: var(--red-color);
    color: #fff;
    border-radius: 10px;
    padding: .5rem 2rem;
    font-size: .8rem;
    font-weight: 900;
    width: 100%
}

.allSingleIndex2 .rightSingle .calls a i {
    display: grid;
    align-items: center
}

.allSingleIndex2 .rightSingle .calls a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex2 .rightSingle .exist {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee
}

.allSingleIndex2 .rightSingle .exist span {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--green-color)
}

.allSingleIndex2 .rightSingle .gifOptions {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allSingleIndex2 .rightSingle .gifOptions a, .allSingleIndex2 .rightSingle .gifOptions div {
    padding: .5rem;
    border-radius: 5px;
    width: 6rem;
    cursor: pointer
}

.allSingleIndex2 .rightSingle .gifOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem
}

.allSingleIndex2 .rightSingle .gifOptions i svg {
    width: 1.8rem;
    height: 1.8rem
}

.allSingleIndex2 .rightSingle .gifOptions p {
    font-size: .85rem;
    font-weight: 300;
    text-align: center
}

.allSingleIndex2 .rightSingle .gifOptions .warnGift {
    background: rgba(0, 128, 0, .1)
}

.allSingleIndex2 .rightSingle .gifOptions .warnGift svg {
    fill: green
}

.allSingleIndex2 .rightSingle .gifOptions .warnGift p {
    color: green
}

.allSingleIndex2 .rightSingle .gifOptions .productVideo {
    background: rgba(115, 0, 128, .1)
}

.allSingleIndex2 .rightSingle .gifOptions .productVideo svg {
    fill: #8200ae
}

.allSingleIndex2 .rightSingle .gifOptions .productVideo p {
    color: #8200ae
}

.allSingleIndex2 .rightSingle .gifOptions .originalItem {
    cursor: auto;
    background: rgba(255, 195, 0, .1)
}

.allSingleIndex2 .rightSingle .gifOptions .originalItem svg {
    fill: #ffc300
}

.allSingleIndex2 .rightSingle .gifOptions .originalItem p {
    color: #ffc300
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=quickBuy] {
    background: rgba(255, 105, 0, .1)
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=quickBuy] svg {
    fill: #f80
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=quickBuy] p {
    color: #f80
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=counselingBtn] {
    background: rgba(0, 51, 255, .1)
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=counselingBtn] svg {
    fill: #03f
}

.allSingleIndex2 .rightSingle .gifOptions .optionItem[name=counselingBtn] p {
    color: #0059ff
}

.allSingleIndex2 .leftSingle {
    background: var(--back2-color)
}

.allSingleIndex2 .leftSingle .imageContainer {
    background: var(--single-color);
    padding: 4rem 1rem 1rem
}

.allSingleIndex2 .leftSingle .imageContainer .options .option {
    padding: .5rem;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.allSingleIndex2 .leftSingle .imageContainer .options .option svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex2 .leftSingle .imageContainer .showImage {
    display: grid;
    justify-content: center;
    padding: 1rem;
    margin-top: 1rem;
    position: relative
}

.allSingleIndex2 .leftSingle .imageContainer .showImage img {
    width: 100%;
    height: 20rem;
    object-fit: contain
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    margin-top: 1rem
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
    display: grid !important;
    justify-content: center
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-prev span {
    font-size: 2.5rem
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-next span {
    font-size: 2.5rem
}

.allSingleIndex2 .leftSingle .imageContainer .imageSlider img {
    padding: .5rem;
    border-radius: 5px;
    cursor: pointer
}

@media screen and (max-width: 700px) {
    .allSingleIndex2 .leftSingle .imageContainer .options {
        grid-template-columns:repeat(4, 1fr)
    }

    .allSingleIndex2 .leftSingle .imageContainer .options .option svg {
        width: 1rem;
        height: 1rem
    }
}

.allSingleIndex2 .leftSingle .tabs {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    position: sticky;
    top: 0;
    font-size: 1.125rem;
    background-color: var(--single-color);
    border-color: #eee;
    box-shadow: 0 0 10px #0000001a;
    z-index: 2
}

.allSingleIndex2 .leftSingle .tabs a {
    padding: 1rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex2 .leftSingle .ability {
    padding: 2rem 1rem;
    border-bottom: 2px solid #eee;
    background: var(--single-color)
}

.allSingleIndex2 .leftSingle .ability .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: 3rem
}

.allSingleIndex2 .leftSingle .ability ul {
    display: grid;
    grid-template-columns:1fr
}

.allSingleIndex2 .leftSingle .ability ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    margin-top: 1rem;
    grid-gap: .5rem
}

.allSingleIndex2 .leftSingle .ability ul li span {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex2 .leftSingle .ability ul li svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--green-color)
}

.allSingleIndex2 .leftSingle .body {
    padding: 2rem 1rem;
    border-bottom: 2px solid #eee;
    background: var(--single-color)
}

.allSingleIndex2 .leftSingle .body .bodyItem p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2.25;
    border-radius: 10px
}

.allSingleIndex2 .leftSingle .body .bodyItem p .image {
    display: grid;
    justify-content: center
}

.allSingleIndex2 .leftSingle .body .bodyItem .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
    text-align: center
}

@media screen and (max-width: 700px) {
    .allSingleIndex2 .leftSingle .body .bodyItem p {
        font-size: .7rem
    }

    .allSingleIndex2 .leftSingle .body .bodyItem label {
        font-size: 1rem;
        font-weight: 700;
        color: #000
    }
}

.allSingleIndex2 .leftSingle .property {
    padding: 2rem 1rem;
    background: black
}

.allSingleIndex2 .leftSingle .property .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 3rem
}

.allSingleIndex2 .leftSingle .property ul {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex2 .leftSingle .property ul li {
    display: grid;
    grid-template-columns:20rem 1fr;
    grid-gap: .5rem
}

.allSingleIndex2 .leftSingle .property ul li .title2 {
    background: var(--back3-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex2 .leftSingle .property ul li p {
    background: var(--back2-color);
    padding: .5rem;
    font-size: .8rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem
}

.allSingleIndex2 .leftSingle .video {
    padding: 2rem 1rem;
    background: var(--back1-color)
}

.allSingleIndex2 .leftSingle .video .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    text-align: center
}

.allSingleIndex2 .leftSingle .video ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allSingleIndex2 .leftSingle .video ul li {
    padding: 1rem;
    border-radius: 10px;
    background: #f5f5f5
}

.allSingleIndex2 .leftSingle .video ul li video {
    width: 100%;
    height: 9rem;
    object-fit: contain
}

.allSingleIndex2 .leftSingle .allProductList {
    padding: 2rem 1rem;
    border: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: 0 0;
    border-top: 1px solid #eee
}

.allSingleIndex2 .leftSingle .allProductList .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    text-align: center
}

.allSingleIndex2 .leftSingle .allProductList .slider-productList a {
    border-bottom: 1px solid #eee;
    padding-bottom: 0
}

@media screen and (max-width: 800px) {
    .allSingleIndex2 {
        display: block
    }

    .allSingleIndex2 .rightSingle {
        display: none
    }

    .allSingleIndex2 .leftSingle {
        margin-top: 0
    }

    .allSingleIndex2 .leftSingle .imageContainer {
        padding: .5rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .options .option {
        padding: .5rem;
        border-radius: 5px;
        border: 1px solid #eee;
        display: grid;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .allSingleIndex2 .leftSingle .imageContainer .options .option svg {
        width: 2rem;
        height: 2rem;
        fill: #000
    }

    .allSingleIndex2 .leftSingle .imageContainer .showImage img {
        width: 100%;
        height: 10rem;
        object-fit: contain
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider {
        display: grid;
        grid-template-columns:auto 1fr;
        align-items: center;
        margin-top: 1rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
        display: grid !important;
        justify-content: center
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-prev {
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-prev span {
        font-size: 2.5rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-next {
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider button.owl-next span {
        font-size: 2.5rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .imageSlider img {
        padding: .5rem;
        border-radius: 5px;
        border: 1px solid #eee;
        cursor: pointer
    }
}

@media screen and (max-width: 800px) and (max-width: 700px) {
    .allSingleIndex2 .leftSingle .imageContainer .options {
        grid-template-columns:repeat(4, 1fr)
    }

    .allSingleIndex2 .leftSingle .imageContainer .options .option svg {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section {
        width: 40px
    }

    .allSingleIndex2 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allSingleIndex2 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

@media screen and (max-width: 800px) {
    .allSingleIndex2 .leftSingle .titleRes {
        display: grid !important;
        grid-template-columns:1fr auto;
        background: var(--back1-color);
        padding: .5rem
    }

    .allSingleIndex2 .leftSingle .titleRes .rightRes .title1 {
        font-size: .85rem;
        font-weight: 700;
        color: #000
    }

    .allSingleIndex2 .leftSingle .titleRes .rightRes .rates {
        display: grid;
        grid-template-columns:repeat(5, auto);
        justify-content: right;
        align-items: center;
        grid-gap: .5rem
    }

    .allSingleIndex2 .leftSingle .titleRes .rightRes .rates .rateItem {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1)
    }

    .allSingleIndex2 .leftSingle .titleRes .rightRes .rates .rateItem img {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices {
        text-align: left
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices .price1 {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: .5rem;
        font-weight: 700;
        color: var(--green-color);
        font-size: .95rem;
        text-align: left
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices .price1:after {
        content: "︎";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        letter-spacing: normal;
        font-family: digikala;
        font-size: .95rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        text-decoration: none;
        text-transform: none;
        line-height: 1;
        box-sizing: inherit
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices s {
        text-align: left;
        font-weight: 300;
        color: #444;
        font-size: .7rem
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices .offContainer {
        display: flex;
        justify-content: left
    }

    .allSingleIndex2 .leftSingle .titleRes .leftRes .prices .offData {
        font-size: .7rem;
        font-weight: 300;
        color: var(--green-color);
        padding: .1rem .3rem;
        border-radius: 5px;
        border: 1px solid var(--green-color)
    }

    .allSingleIndex2 .leftSingle .colorContainer {
        display: grid !important;
        background: white;
        padding: 1rem 0
    }

    .allSingleIndex2 .leftSingle .optionAdd {
        display: grid !important;
        background: var(--back1-color)
    }

    .allSingleIndex2 .leftSingle .optionAdd select {
        padding: .5rem 1rem;
        border-radius: 5rem;
        background: var(--back1-color);
        border: 2px solid #eee;
        color: #000;
        margin: 0 .5rem
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch input {
        display: none
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch .swatch-element {
        float: right;
        margin: 5px 8px 0 0;
        position: relative
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch .color label span:after {
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch .color input:checked + label span:after {
        opacity: 1
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch input:not(:checked) + label {
        border-color: #edeff2 !important
    }

    .allSingleIndex2 .leftSingle .optionAdd .crossed-out {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch .tooltip {
        display: none
    }

    .allSingleIndex2 .leftSingle .optionAdd .swatch .swatch-element:hover .tooltip {
        filter: alpha(opacity=100);
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0)
    }

    .allSingleIndex2 .leftSingle .gifOptions {
        background: white;
        padding: 1rem .5rem;
        display: grid !important;
        grid-template-columns:repeat(2, 1fr);
        justify-content: right;
        align-items: center;
        grid-gap: .5rem
    }

    .allSingleIndex2 .leftSingle .gifOptions a, .allSingleIndex2 .leftSingle .gifOptions div {
        padding: .5rem;
        border-radius: 5px;
        width: auto;
        cursor: pointer
    }

    .allSingleIndex2 .leftSingle .gifOptions i {
        display: grid;
        align-items: center;
        justify-content: center;
        margin-bottom: .5rem
    }

    .allSingleIndex2 .leftSingle .gifOptions i svg {
        width: 1.3rem;
        height: 1.3rem
    }

    .allSingleIndex2 .leftSingle .gifOptions p {
        font-size: .8rem;
        font-weight: 300;
        text-align: center
    }

    .allSingleIndex2 .leftSingle .gifOptions .warnGift {
        background: rgba(0, 128, 0, .1)
    }

    .allSingleIndex2 .leftSingle .gifOptions .warnGift svg {
        fill: var(--green-color)
    }

    .allSingleIndex2 .leftSingle .gifOptions .warnGift p {
        color: var(--green-color)
    }

    .allSingleIndex2 .leftSingle .gifOptions .productVideo {
        background: rgba(115, 0, 128, .1)
    }

    .allSingleIndex2 .leftSingle .gifOptions .productVideo svg {
        fill: #8200ae
    }

    .allSingleIndex2 .leftSingle .gifOptions .productVideo p {
        color: #8200ae
    }

    .allSingleIndex2 .leftSingle .gifOptions .originalItem {
        cursor: auto;
        background: rgba(255, 195, 0, .1)
    }

    .allSingleIndex2 .leftSingle .gifOptions .originalItem svg {
        fill: #ffc300
    }

    .allSingleIndex2 .leftSingle .gifOptions .originalItem p {
        color: #ffc300
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=quickBuy] {
        background: rgba(255, 105, 0, .1)
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=quickBuy] svg {
        fill: #f80
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=quickBuy] p {
        color: #f80
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=counselingBtn] {
        background: rgba(0, 51, 255, .1)
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=counselingBtn] svg {
        fill: #03f
    }

    .allSingleIndex2 .leftSingle .gifOptions .optionItem[name=counselingBtn] p {
        color: #0059ff
    }

    .allSingleIndex2 .leftSingle .tabs {
        display: none
    }

    .allSingleIndex2 .leftSingle .property ul, .allSingleIndex2 .leftSingle .property ul li {
        display: block
    }

    .allSingleIndex2 .leftSingle .property ul li .title2 {
        font-size: .7rem
    }

    .allSingleIndex2 .leftSingle .property ul li p {
        font-size: .7rem;
        opacity: .6;
        margin-top: .5rem
    }

    .allSingleIndex2 .leftSingle .allProductList .slider-productList a .pic img {
        height: 8rem !important
    }

    .allSingleIndex2 .leftSingle .allProductList .slider-productList a .countdown .countdown-section {
        width: 33px
    }

    .allSingleIndex2 .leftSingle .allProductList .slider-productList a .countdown .countdown-section .countdown-time {
        height: 30px;
        width: 30px;
        font-size: .6rem
    }

    .allSingleIndex2 .leftSingle .tabFixed {
        display: grid !important;
        grid-template-columns:1fr auto;
        grid-gap: 1rem;
        align-items: center;
        position: sticky;
        top: 0;
        font-size: 1.125rem;
        background: hsla(0, 0%, 97%, .94);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border-bottom: 2px solid #e9ecef;
        z-index: 4;
        padding: 1rem
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .title2 {
        font-size: .85rem;
        font-weight: 700;
        color: #000;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: .5rem;
        margin-top: .5rem
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .prices {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: .2rem
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .prices .price1, .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .prices span {
        font-size: .8rem;
        font-weight: 700;
        color: var(--green-color)
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .rates {
        display: grid;
        grid-template-columns:repeat(5, auto);
        justify-content: right;
        align-items: center;
        grid-gap: .5rem
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .rates .rateItem {
        display: grid;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1)
    }

    .allSingleIndex2 .leftSingle .tabFixed .rightTab .botFix .rates .rateItem img {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex2 .leftSingle .tabFixed .leftTab select {
        background: white;
        padding: .5rem;
        border: 1px solid #444;
        border-radius: 5px
    }

    .allSingleIndex2 .floatShop {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        display: grid !important;
        grid-template-columns:1fr auto;
        align-items: center;
        grid-gap: 1rem;
        background: hsla(0, 0%, 97%, .94);
        border-top: 1px solid #eee;
        padding: .5rem;
        z-index: 4
    }

    .allSingleIndex2 .floatShop .addButton button {
        width: 100%;
        border-radius: 5rem;
        padding: .5rem;
        font-size: 1rem;
        font-weight: 700;
        background: white;
        color: #000;
        border: 1px solid black
    }

    .allSingleIndex2 .floatShop .up i {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        background-color: #dee2e6;
        border-color: #dee2e6
    }

    .allSingleIndex2 .floatShop .up i svg {
        width: 1rem;
        height: 1rem;
        fill: #444
    }
}

.allSingleIndex4 {
    margin: auto;
    margin-top: 1rem;
    display: grid;
    grid-template-columns:1fr 30rem;
    grid-gap: 1rem;
    position: relative
}

.allSingleIndex4 .rightSingle {
    padding: 1rem;
    background: var(--single-color);
    box-shadow: -10px 0 10px #0000000d;
    z-index: 5;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 1rem
}

.allSingleIndex4 .rightSingle .rightSingleContent {
    position: sticky;
    top: 1rem
}

.allSingleIndex4 .rightSingle .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    text-align: center;
    color: #000;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    text-shadow: 0 5px 5px rgba(0, 0, 0, .3);
    margin-bottom: 1rem
}

.allSingleIndex4 .rightSingle .rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allSingleIndex4 .rightSingle .rate .rates {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem
}

.allSingleIndex4 .rightSingle .rate .rates .rateItem {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.allSingleIndex4 .rightSingle .rate .rates .rateItem img {
    width: 2rem;
    height: 2rem
}

.allSingleIndex4 .rightSingle .rate .options .option {
    padding: .5rem;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.allSingleIndex4 .rightSingle .rate .options .option svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allSingleIndex4 .rightSingle .optionAdd {
    display: grid;
    margin-bottom: 1rem
}

.allSingleIndex4 .rightSingle .optionAdd select {
    padding: .8rem 1rem;
    border-radius: 10px;
    background: white;
    border: 1px solid #eee;
    color: #000;
    font-size: 1rem
}

.allSingleIndex4 .rightSingle .optionAdd .swatch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem
}

.allSingleIndex4 .rightSingle .optionAdd .swatch input {
    display: none
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .swatch-element {
    position: relative
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .color label {
    transition: all .3s ease-in-out;
    border: 1px solid;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 5px;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .color label span {
    border-radius: 100%;
    display: block;
    height: 20px;
    position: relative;
    width: 20px
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .color label span:after {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allSingleIndex4 .rightSingle .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allSingleIndex4 .rightSingle .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allSingleIndex4 .rightSingle .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allSingleIndex4 .rightSingle .price .priceItem {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    border-radius: 10px;
    background: #f5f5f5;
    margin-bottom: 1rem
}

.allSingleIndex4 .rightSingle .price .priceItem .title2 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7
}

.allSingleIndex4 .rightSingle .price .priceItem .prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    gap: .5rem
}

.allSingleIndex4 .rightSingle .price .priceItem .prices s {
    font-size: .7rem;
    font-weight: 500;
    color: #444
}

.allSingleIndex4 .rightSingle .price .priceItem .prices .offData {
    font-size: .7rem;
    font-weight: 300;
    color: red;
    padding: .1rem .3rem;
    border-radius: 5px;
    border: 1px solid red
}

.allSingleIndex4 .rightSingle .price .priceItem .prices .price1, .allSingleIndex4 .rightSingle .price .priceItem .prices .price2 {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--green-color)
}

.allSingleIndex4 .rightSingle .price .priceItem .prices span {
    font-size: .8rem;
    font-weight: 900;
    color: var(--green-color);
    display: grid;
    margin-left: .5rem;
    letter-spacing: .1px
}

.allSingleIndex4 .rightSingle .addButton {
    margin-top: 2rem;
    text-align: center
}

.allSingleIndex4 .rightSingle .addButton button {
    background: var(--green-color);
    border-radius: 10px;
    padding: .5rem 2rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    position: relative;
    width: 50%;
    animation: addAn 2s forwards;
    opacity: 0
}

.allSingleIndex4 .rightSingle .addButton button:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@keyframes addAn {
    0% {
        width: 50%;
        opacity: 0
    }
    to {
        width: 100%;
        opacity: 1
    }
}

.allSingleIndex4 .rightSingle .calls {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .5rem;
    margin-top: .5rem
}

.allSingleIndex4 .rightSingle .calls a {
    display: flex;
    justify-content: center;
    gap: .5rem;
    background: var(--red-color);
    color: #fff;
    border-radius: 10px;
    padding: .5rem 2rem;
    font-size: .8rem;
    font-weight: 900;
    width: 100%
}

.allSingleIndex4 .rightSingle .calls a i {
    display: grid;
    align-items: center
}

.allSingleIndex4 .rightSingle .calls a i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allSingleIndex4 .rightSingle .exist {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee
}

.allSingleIndex4 .rightSingle .exist span {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--green-color)
}

.allSingleIndex4 .rightSingle .gifOptions {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allSingleIndex4 .rightSingle .gifOptions a, .allSingleIndex4 .rightSingle .gifOptions div {
    padding: .5rem;
    border-radius: 5px;
    width: 6rem;
    cursor: pointer
}

.allSingleIndex4 .rightSingle .gifOptions i {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem
}

.allSingleIndex4 .rightSingle .gifOptions i svg {
    width: 1.8rem;
    height: 1.8rem
}

.allSingleIndex4 .rightSingle .gifOptions p {
    font-size: .85rem;
    font-weight: 300;
    text-align: center
}

.allSingleIndex4 .rightSingle .gifOptions .warnGift {
    background: rgba(0, 128, 0, .1)
}

.allSingleIndex4 .rightSingle .gifOptions .warnGift svg {
    fill: green
}

.allSingleIndex4 .rightSingle .gifOptions .warnGift p {
    color: green
}

.allSingleIndex4 .rightSingle .gifOptions .productVideo {
    background: rgba(115, 0, 128, .1)
}

.allSingleIndex4 .rightSingle .gifOptions .productVideo svg {
    fill: #8200ae
}

.allSingleIndex4 .rightSingle .gifOptions .productVideo p {
    color: #8200ae
}

.allSingleIndex4 .rightSingle .gifOptions .originalItem {
    cursor: auto;
    background: rgba(255, 195, 0, .1)
}

.allSingleIndex4 .rightSingle .gifOptions .originalItem svg {
    fill: #ffc300
}

.allSingleIndex4 .rightSingle .gifOptions .originalItem p {
    color: #ffc300
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=quickBuy] {
    background: rgba(255, 105, 0, .1)
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=quickBuy] svg {
    fill: #f80
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=quickBuy] p {
    color: #f80
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=counselingBtn] {
    background: rgba(0, 51, 255, .1)
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=counselingBtn] svg {
    fill: #03f
}

.allSingleIndex4 .rightSingle .gifOptions .optionItem[name=counselingBtn] p {
    color: #0059ff
}

.allSingleIndex4 .leftSingle {
    border-radius: 10px;
    overflow: hidden;
    background: var(--single-color)
}

.allSingleIndex4 .leftSingle .imageContainer {
    padding: 1rem
}

.allSingleIndex4 .leftSingle .imageContainer .showImage {
    display: grid;
    justify-content: center;
    padding: 1rem;
    margin-top: 1rem;
    position: relative
}

.allSingleIndex4 .leftSingle .imageContainer .showImage img {
    width: 100%;
    height: 20rem;
    object-fit: contain
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider {
    margin-top: 1rem
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
    display: grid !important;
    justify-content: center
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-prev span {
    font-size: 2.5rem
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-next span {
    font-size: 2.5rem
}

.allSingleIndex4 .leftSingle .imageContainer .imageSlider img {
    padding: .5rem;
    border-radius: 5px;
    cursor: pointer
}

.allSingleIndex4 .leftSingle .tabs {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    position: sticky;
    top: 0;
    font-size: 1.125rem;
    border-color: #eee;
    box-shadow: 0 0 10px #0000001a;
    z-index: 2
}

.allSingleIndex4 .leftSingle .tabs a {
    padding: 1rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000
}

.allSingleIndex4 .leftSingle .ability {
    padding: 2rem 1rem
}

.allSingleIndex4 .leftSingle .ability ul {
    display: grid;
    grid-template-columns:1fr
}

.allSingleIndex4 .leftSingle .ability ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    margin-top: 1rem;
    grid-gap: .5rem
}

.allSingleIndex4 .leftSingle .ability ul li span {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allSingleIndex4 .leftSingle .ability ul li svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--green-color)
}

.allSingleIndex4 .leftSingle .ability ul li:first-child {
    margin-top: 0
}

.allSingleIndex4 .leftSingle .bodyTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem
}

.allSingleIndex4 .leftSingle .bodyTitle:before {
    content: "ــ";
    color: #1faea5;
    margin-left: .5rem
}

.allSingleIndex4 .leftSingle .body {
    padding: 2rem 1rem;
    border-top: 1px solid #eee
}

.allSingleIndex4 .leftSingle .body .bodyItem p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2.25;
    border-radius: 10px
}

.allSingleIndex4 .leftSingle .body .bodyItem p .image {
    display: grid;
    justify-content: center
}

@media screen and (max-width: 700px) {
    .allSingleIndex4 .leftSingle .body .bodyItem p {
        font-size: .7rem
    }

    .allSingleIndex4 .leftSingle .body .bodyItem label {
        font-size: 1rem;
        font-weight: 700;
        color: #000
    }
}

.allSingleIndex4 .leftSingle .property {
    padding: 2rem 1rem;
    border-top: 1px solid #eee
}

.allSingleIndex4 .leftSingle .property ul {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 1rem
}

.allSingleIndex4 .leftSingle .property ul li {
    display: grid;
    grid-template-columns:20rem 1fr;
    grid-gap: .5rem
}

.allSingleIndex4 .leftSingle .property ul li .title2 {
    background: var(--back3-color);
    padding: .5rem;
    font-size: .9rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allSingleIndex4 .leftSingle .property ul li p {
    background: var(--back2-color);
    padding: .5rem;
    font-size: .9rem;
    line-height: 1.692;
    color: #000;
    letter-spacing: -.3px;
    font-weight: 300;
    border-radius: .3rem
}

.allSingleIndex4 .leftSingle .allComment {
    border-top: 1px solid #eee
}

.allSingleIndex4 .leftSingle .allComment h3:before {
    content: "ــ";
    color: #1faea5;
    margin-left: .5rem
}

.allSingleIndex4 .leftSingle .allComment h3 i {
    display: none
}

.allSingleIndex4 .leftSingle .video {
    padding: 2rem 1rem;
    border-top: 1px solid #eee
}

.allSingleIndex4 .leftSingle .video ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1rem
}

.allSingleIndex4 .leftSingle .video ul li {
    padding: 1rem;
    border-radius: 10px;
    background: #f5f5f5
}

.allSingleIndex4 .leftSingle .video ul li video {
    width: 100%;
    height: 9rem;
    object-fit: contain
}

.allSingleIndex4 .leftSingle .allProductList {
    padding: 2rem 1rem;
    border: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: 0 0;
    border-top: 1px solid #eee
}

.allSingleIndex4 .leftSingle .allProductList .bodyTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    text-align: center
}

.allSingleIndex4 .leftSingle .allProductList .slider-productList a {
    border-bottom: 1px solid #eee;
    padding-bottom: 0
}

@media screen and (max-width: 800px) {
    .allSingleIndex4 {
        display: block
    }

    .allSingleIndex4 .rightSingle {
        display: none
    }

    .allSingleIndex4 .leftSingle {
        margin-top: 0
    }

    .allSingleIndex4 .leftSingle .imageContainer {
        padding: .5rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .options .option {
        padding: .5rem;
        border-radius: 5px;
        border: 1px solid #eee;
        display: grid;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .allSingleIndex4 .leftSingle .imageContainer .options .option svg {
        width: 2rem;
        height: 2rem;
        fill: #000
    }

    .allSingleIndex4 .leftSingle .imageContainer .showImage img {
        width: 100%;
        height: 10rem;
        object-fit: contain
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider {
        display: grid;
        grid-template-columns:auto 1fr;
        align-items: center;
        margin-top: 1rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider .owl-carousel.owl-loaded {
        display: grid !important;
        justify-content: center
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-prev {
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-prev span {
        font-size: 2.5rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-next {
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider button.owl-next span {
        font-size: 2.5rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .imageSlider img {
        padding: .5rem;
        border-radius: 5px;
        border: 1px solid #eee;
        cursor: pointer
    }
}

@media screen and (max-width: 800px) and (max-width: 700px) {
    .allSingleIndex4 .leftSingle .imageContainer .options {
        grid-template-columns:repeat(4, 1fr)
    }

    .allSingleIndex4 .leftSingle .imageContainer .options .option svg {
        width: 1rem;
        height: 1rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section {
        width: 40px
    }

    .allSingleIndex4 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allSingleIndex4 .leftSingle .imageContainer .suggestProduct .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

@media screen and (max-width: 800px) {
    .allSingleIndex4 .leftSingle .titleRes {
        display: grid !important;
        grid-template-columns:1fr;
        background: var(--back1-color);
        padding: .5rem
    }

    .allSingleIndex4 .leftSingle .titleRes .rightRes .title1 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #000;
        text-align: center
    }

    .allSingleIndex4 .leftSingle .titleRes .leftRes .prices {
        text-align: center;
        margin-top: 1rem
    }

    .allSingleIndex4 .leftSingle .titleRes .leftRes .prices .price1 {
        font-weight: 900;
        color: var(--green-color);
        font-size: 1.5rem
    }

    .allSingleIndex4 .leftSingle .titleRes .leftRes .prices s {
        text-align: left;
        font-weight: 300;
        color: #444;
        font-size: .7rem
    }

    .allSingleIndex4 .leftSingle .titleRes .leftRes .prices .offContainer {
        display: flex;
        justify-content: left
    }

    .allSingleIndex4 .leftSingle .titleRes .leftRes .prices .offData {
        font-size: .7rem;
        font-weight: 300;
        color: var(--green-color);
        padding: .1rem .3rem;
        border-radius: 5px;
        border: 1px solid var(--green-color)
    }

    .allSingleIndex4 .leftSingle .colorContainer {
        display: grid !important;
        background: white;
        padding: 1rem 0
    }

    .allSingleIndex4 .leftSingle .optionAdd {
        display: grid !important;
        background: var(--back1-color)
    }

    .allSingleIndex4 .leftSingle .optionAdd select {
        padding: .5rem 1rem;
        border-radius: 5px;
        background: var(--back1-color);
        border: 2px solid #eee;
        color: #000;
        margin: 0 .5rem
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch input {
        display: none
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch .swatch-element {
        float: right;
        margin: 5px 8px 0 0;
        position: relative
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch .color label span:after {
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch .color input:checked + label span:after {
        opacity: 1
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch input:not(:checked) + label {
        border-color: #edeff2 !important
    }

    .allSingleIndex4 .leftSingle .optionAdd .crossed-out {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch .tooltip {
        display: none
    }

    .allSingleIndex4 .leftSingle .optionAdd .swatch .swatch-element:hover .tooltip {
        filter: alpha(opacity=100);
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0)
    }

    .allSingleIndex4 .leftSingle .gifOptions {
        background: white;
        padding: 1rem .5rem;
        display: grid !important;
        grid-template-columns:repeat(2, 1fr);
        justify-content: right;
        align-items: center;
        grid-gap: .5rem
    }

    .allSingleIndex4 .leftSingle .gifOptions a, .allSingleIndex4 .leftSingle .gifOptions div {
        padding: .5rem;
        border-radius: 5px;
        width: auto;
        cursor: pointer
    }

    .allSingleIndex4 .leftSingle .gifOptions i {
        display: grid;
        align-items: center;
        justify-content: center;
        margin-bottom: .5rem
    }

    .allSingleIndex4 .leftSingle .gifOptions i svg {
        width: 1.3rem;
        height: 1.3rem
    }

    .allSingleIndex4 .leftSingle .gifOptions p {
        font-size: .8rem;
        font-weight: 300;
        text-align: center
    }

    .allSingleIndex4 .leftSingle .gifOptions .warnGift {
        background: rgba(0, 128, 0, .1)
    }

    .allSingleIndex4 .leftSingle .gifOptions .warnGift svg {
        fill: var(--green-color)
    }

    .allSingleIndex4 .leftSingle .gifOptions .warnGift p {
        color: var(--green-color)
    }

    .allSingleIndex4 .leftSingle .gifOptions .productVideo {
        background: rgba(115, 0, 128, .1)
    }

    .allSingleIndex4 .leftSingle .gifOptions .productVideo svg {
        fill: #8200ae
    }

    .allSingleIndex4 .leftSingle .gifOptions .productVideo p {
        color: #8200ae
    }

    .allSingleIndex4 .leftSingle .gifOptions .originalItem {
        cursor: auto;
        background: rgba(255, 195, 0, .1)
    }

    .allSingleIndex4 .leftSingle .gifOptions .originalItem svg {
        fill: #ffc300
    }

    .allSingleIndex4 .leftSingle .gifOptions .originalItem p {
        color: #ffc300
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=quickBuy] {
        background: rgba(255, 105, 0, .1)
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=quickBuy] svg {
        fill: #f80
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=quickBuy] p {
        color: #f80
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=counselingBtn] {
        background: rgba(0, 51, 255, .1)
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=counselingBtn] svg {
        fill: #03f
    }

    .allSingleIndex4 .leftSingle .gifOptions .optionItem[name=counselingBtn] p {
        color: #0059ff
    }

    .allSingleIndex4 .leftSingle .tabs {
        display: none
    }

    .allSingleIndex4 .leftSingle .property ul, .allSingleIndex4 .leftSingle .property ul li {
        display: block
    }

    .allSingleIndex4 .leftSingle .property ul li .title2 {
        font-size: .7rem
    }

    .allSingleIndex4 .leftSingle .property ul li p {
        font-size: .7rem;
        opacity: .6;
        margin-top: .5rem
    }

    .allSingleIndex4 .leftSingle .allProductList .slider-productList a .pic img {
        height: 8rem !important
    }

    .allSingleIndex4 .leftSingle .allProductList .slider-productList a .countdown .countdown-section {
        width: 33px
    }

    .allSingleIndex4 .leftSingle .allProductList .slider-productList a .countdown .countdown-section .countdown-time {
        height: 30px;
        width: 30px;
        font-size: .6rem
    }

    .allSingleIndex4 .leftSingle .bodyTitle {
        font-size: 1.2rem;
        margin-bottom: 1rem
    }

    .allSingleIndex4 .floatShop {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        display: grid !important;
        grid-template-columns:1fr auto;
        align-items: center;
        grid-gap: 1rem;
        background: hsla(0, 0%, 97%, .94);
        border-top: 1px solid #eee;
        padding: .5rem;
        z-index: 4
    }

    .allSingleIndex4 .floatShop .addButton button {
        width: 100%;
        border-radius: 5rem;
        padding: .5rem;
        font-size: 1rem;
        font-weight: 700;
        background: white;
        color: #000;
        border: 1px solid black
    }

    .allSingleIndex4 .floatShop .up i {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        background-color: #dee2e6;
        border-color: #dee2e6
    }

    .allSingleIndex4 .floatShop .up i svg {
        width: 1rem;
        height: 1rem;
        fill: #444
    }
}

.allAuthIndex2 {
    display: grid;
    justify-items: center;
    margin-top: 5rem
}

.allAuthIndex2 h1 {
    margin-bottom: 1rem
}

.allAuthIndex2 p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: .5px;
    margin: 20px 0 30px
}

.allAuthIndex2 span {
    font-size: 12px
}

.allAuthIndex2 a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0
}

.allAuthIndex2 button {
    border-radius: 20px;
    background-color: var(--green-color);
    color: #fff;
    font-size: .9rem;
    font-weight: 300;
    padding: .3rem 1rem;
    margin-top: 1rem
}

.allAuthIndex2 button:last-child {
    background: orange
}

.allAuthIndex2 .form {
    background-color: var(--back1-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    text-align: center
}

.allAuthIndex2 .form .authItems {
    width: 80%
}

.allAuthIndex2 input {
    background-color: var(--back3-color);
    border-radius: 5px;
    padding: .5rem 1rem;
    width: 100%;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem
}

.allAuthIndex2 .container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    position: relative;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
    min-height: 480px;
    display: grid;
    grid-template-columns:1fr 1fr
}

.allAuthIndex2 .container .captchaQuick {
    display: grid;
    justify-items: center
}

.allAuthIndex2 .container .buttons {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.allAuthIndex2 .form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .6s ease-in-out
}

.allAuthIndex2 .sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2
}

.allAuthIndex2 .container.right-panel-active .sign-in-container {
    transform: translate(100%)
}

.allAuthIndex2 .container.right-panel-active .sign-up-container {
    transform: translate(100%);
    opacity: 1;
    z-index: 5;
    animation: show .6s
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1
    }
    50%, to {
        opacity: 1;
        z-index: 5
    }
}

.allAuthIndex2 .container.right-panel-active .overlay-container {
    transform: translate(-100%)
}

.allAuthIndex2 .overlay {
    color: #fff;
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    text-align: center;
    background-image: url(/img/backStore.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.allAuthIndex2 .overlay h5 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff
}

.allAuthIndex2 .overlay img {
    width: 100%;
    height: 5rem;
    object-fit: contain
}

.allAuthIndex2 .container.right-panel-active .overlay {
    transform: translate(50%)
}

.allAuthIndex2 .overlay-right {
    right: 0;
    transform: translate(0)
}

.allAuthIndex2 .container.right-panel-active .overlay-right {
    transform: translate(20%)
}

.allAuthIndex2 .social-container {
    margin: 20px 0
}

.allAuthIndex2 .social-container a {
    border: 1px solid red;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px
}

.allAuthIndex2 .social-container a i {
    display: grid;
    align-items: center
}

.allAuthIndex2 .social-container a i svg {
    width: 1rem;
    height: 1rem;
    fill: red
}

.allAuthIndex2 .social-container a:nth-child(2) {
    border: 1px solid black
}

.allAuthIndex2 .social-container a:nth-child(2) i svg {
    fill: #000
}

@media screen and (max-width: 800px) {
    .allAuthIndex2 {
        margin-top: 2rem
    }

    .allAuthIndex2 .container {
        width: 95%;
        display: block
    }

    .allAuthIndex2 .container .sign-in-container {
        width: 100%
    }
}

.allAuthIndex .authIndex {
    width: 50%;
    margin: auto;
    margin-top: 2rem;
    background: var(--back1-color);
    border-radius: 10px;
    box-shadow: 0 0 20px #0000001a
}

.allAuthIndex .authIndex .headerAuth {
    padding: 1rem;
    border-bottom: 2px solid #eee
}

.allAuthIndex .authIndex .headerAuth h1 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--green-color);
    letter-spacing: 1px
}

.allAuthIndex .authIndex .authItems {
    padding: 1rem
}

.allAuthIndex .authIndex .authItems .authItem {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    margin-bottom: 1rem
}

.allAuthIndex .authIndex .authItems .authItem label {
    color: #000;
    font-weight: 500;
    font-size: .9rem
}

.allAuthIndex .authIndex .authItems .authItem input {
    padding: .5rem;
    text-align: right;
    border: 1px solid #eee;
    color: #000;
    font-weight: 300;
    background: var(--back1-color);
    width: 100%;
    font-size: .9rem;
    border-radius: 5px;
    transition: all .3s ease-in-out
}

.allAuthIndex .authIndex .authItems .authItem input:focus-within {
    border: 1px solid var(--green-color)
}

.allAuthIndex .authIndex .authItems .captchaQuick {
    display: grid;
    margin-top: 1rem;
    justify-content: center
}

.allAuthIndex .authIndex .authItems button {
    background: var(--green-color);
    color: #fff;
    border-radius: 5px;
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 1px
}

.allAuthIndex .authIndex .authItems .buttons {
    display: grid;
    grid-template-columns:auto auto;
    grid-gap: 1rem;
    justify-content: right;
    align-items: center
}

.allAuthIndex .authIndex .authItems .forget {
    background: transparent;
    color: orange;
    padding: 0;
    letter-spacing: 0;
    font-size: .8rem
}

@media screen and (max-width: 800px) {
    .allAuthIndex .authIndex {
        width: 98%
    }
}

.allLuckyIndex {
    direction: ltr;
    margin: auto;
    margin-top: 4rem;
    display: grid;
    justify-content: center
}

.allLuckyIndex .alert {
    direction: rtl;
    text-align: center;
    background: rgba(255, 0, 0, .1);
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 2rem;
    color: red;
    font-size: 1rem;
    font-weight: 500
}

.allLuckyIndex .promo-wrapper {
    direction: rtl;
    width: 100%;
    text-align: center;
    margin-bottom: 75px
}

.allLuckyIndex .promo-wrapper h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000
}

.allLuckyIndex .promo-wrapper h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    margin-top: 1rem
}

.allLuckyIndex .promo-wrapper span {
    display: block;
    margin: .5rem 0;
    font-size: 1rem
}

.allLuckyIndex .deal-wheel {
    --size: clamp(250px, 80vmin, 700px);
    --lg-hs: 0 3%;
    --lg-stop: 50%;
    --lg: linear-gradient(hsl(var(--lg-hs) 0%) 0 var(--lg-stop), hsl(var(--lg-hs) 20%) var(--lg-stop) 100%);
    position: relative;
    display: grid;
    justify-content: center;
    grid-gap: calc(var(--size) / 20);
    align-items: center;
    grid-template-areas:"spinner" "trigger";
    font-size: .9rem
}

.allLuckyIndex .deal-wheel > * {
    grid-area: spinner
}

.allLuckyIndex .text {
    direction: rtl;
    text-align: left
}

.allLuckyIndex .deal-wheel .btn-spin {
    grid-area: trigger;
    justify-self: center
}

.allLuckyIndex .spinner {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-areas:"spinner";
    width: var(--size);
    height: var(--size);
    transform: rotate(calc(var(--rotate, 0) * 1deg));
    border-radius: 50%
}

.allLuckyIndex .spinner * {
    grid-area: spinner
}

.allLuckyIndex .prize {
    display: flex;
    align-items: center;
    padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
    width: 50%;
    height: 50%;
    transform-origin: center right;
    transform: rotate(var(--rotate));
    -webkit-user-select: none;
    user-select: none
}

.allLuckyIndex .ticker {
    position: relative;
    left: calc(var(--size) / -15);
    width: calc(var(--size) / 10);
    height: calc(var(--size) / 20);
    background: var(--lg);
    z-index: 1;
    clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
    transform-origin: center left
}

.allLuckyIndex .btn-spin {
    color: #fff;
    background: var(--green-color);
    border: none;
    font-size: inherit;
    padding: .9rem 2rem 1rem;
    border-radius: .5rem;
    cursor: pointer
}

.allLuckyIndex .btn-spin:disabled {
    cursor: progress;
    opacity: .25
}

.allLuckyIndex .is-spinning .spinner {
    transition: transform 8s cubic-bezier(.1, -.01, 0, 1)
}

.allLuckyIndex .is-spinning .ticker {
    animation: tick .7s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes tick {
    40% {
        transform: rotate(-12deg)
    }
}

.allLuckyIndex .prize.selected .text {
    color: #fff;
    animation: selected .8s ease
}

@keyframes selected {
    25% {
        transform: scale(1.25);
        text-shadow: 1vmin 1vmin 0 hsla(0, 0%, 0%, .1)
    }
    40% {
        transform: scale(.92);
        text-shadow: 0 0 0 hsla(0, 0%, 0%, .2)
    }
    60% {
        transform: scale(1.02);
        text-shadow: .5vmin .5vmin 0 hsla(0, 0%, 0%, .1)
    }
    75% {
        transform: scale(.98)
    }
    85% {
        transform: scale(1)
    }
}

.allCartIndex .alert {
    background: rgba(255, 0, 0, .15);
    color: var(--red-color);
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allCartIndex h1, .allCartIndex h2 {
    display: none
}

.allCartIndex .success {
    background: rgba(0, 255, 0, .1);
    color: green;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allCartIndex .helpCart {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    margin-bottom: 1rem;
    background: var(--back1-color);
    box-shadow: 0 0 5px #eee;
    padding: .75rem;
    border-radius: 10px
}

.allCartIndex .helpCart a {
    background: var(--green-color);
    padding: .3rem 1rem;
    border-radius: 5px;
    color: #fff;
    font-size: 1rem;
    font-weight: 300
}

.allCartIndex .cartTab .tabs {
    display: flex;
    position: relative;
    background-color: var(--back1-color);
    box-shadow: 0 0 5px #eee;
    padding: .75rem;
    border-radius: 10px
}

.allCartIndex .cartTab .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: .5rem;
    height: 40px;
    width: 180px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: color .15s ease-in;
    color: #000
}

.allCartIndex .cartTab .active {
    background: rgba(0, 128, 0, .15);
    color: var(--green-color)
}

.allCartIndex .cartTab .active .notification {
    background: var(--green-color);
    color: #fff
}

.allCartIndex .cartTab .notification {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    transition: .15s ease-in;
    background: var(--back2-color)
}

.allCartIndex .cartIndex {
    display: grid;
    grid-template-columns:1fr 20rem;
    grid-gap: 1rem;
    margin: 1rem 0
}

.allCartIndex .cartIndex .right .cartItem {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 5px #0000001a;
    background: var(--back1-color)
}

.allCartIndex .cartIndex .right .cartItem .cartPic img {
    width: 100%;
    max-width: 10rem;
    height: 8rem;
    object-fit: contain
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart a {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart button {
    background: #FFEBEC;
    border-radius: 5rem;
    padding: .3rem 1rem;
    color: #ee232b
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .price {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    min-height: 2rem;
    font-size: 1.2rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    color: var(--green-color)
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .cartData {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .5rem
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .cartData .title3 {
    font-size: .9rem;
    color: #000;
    font-weight: 300
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .cartData span {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    letter-spacing: .1px
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .inquiryData {
    font-size: .8rem;
    font-weight: 300;
    color: red;
    margin-top: .5rem
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .productCount {
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    grid-gap: 1rem
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .leftCount {
    display: grid;
    justify-content: right
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .nextCount {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    color: orange;
    padding-bottom: .5rem;
    font-weight: 300;
    font-size: .75rem;
    cursor: pointer
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .nextCount i {
    display: grid;
    align-items: center;
    margin-top: .1rem
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .nextCount svg {
    width: .8rem;
    height: .8rem;
    fill: orange
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .rightCount {
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    border: 1px solid #eee;
    border-radius: 10px;
    width: 5rem
}

.allCartIndex .cartIndex .right .cartItem .cartSubject .rightCount span {
    color: #000;
    padding: .2rem .5rem;
    font-size: .95rem;
    background: transparent;
    cursor: pointer;
    text-align: center
}

.allCartIndex .cartIndex .right #changeCart {
    background: var(--back1-color);
    color: #000;
    box-shadow: 0 0 10px #0000001a;
    padding: .3rem 1rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid #eee
}

.allCartIndex .cartIndex .left .cartNext {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden
}

.allCartIndex .cartIndex .left .cartNext .cartPriceItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    background: var(--back2-color);
    padding: .8rem
}

.allCartIndex .cartIndex .left .cartNext .cartPriceItem .title3 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .cartIndex .left .cartNext .cartPriceItem span {
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .cartIndex .left .cartNext .cartPriceItem .price1 {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    min-height: 2rem;
    font-size: 1.4rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    color: var(--green-color)
}

.allCartIndex .cartIndex .left .cartNext .cartPriceItem:nth-child(2n) {
    background: var(--back1-color)
}

.allCartIndex .cartIndex .left .cartNext .nextItem {
    padding: .5rem;
    display: grid;
    justify-content: center
}

.allCartIndex .cartIndex .left .cartNext .nextItem a {
    display: grid;
    padding: .5rem 1rem;
    border-radius: 5px;
    background: var(--green-color);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 300
}

.allCartIndex .cartIndex .left .scoreProduct {
    box-shadow: 0 0 10px #0000001a;
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    grid-gap: .5rem;
    margin-top: 1rem;
    align-items: center;
    background: var(--back1-color);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #eee;
    cursor: pointer
}

.allCartIndex .cartIndex .left .scoreProduct i {
    display: grid;
    align-items: center
}

.allCartIndex .cartIndex .left .scoreProduct i svg {
    width: 1.4rem;
    height: 1.4rem
}

.allCartIndex .cartIndex .left .scoreProduct i:last-child svg {
    width: .7rem;
    height: .7rem
}

.allCartIndex .cartIndex .left .scoreProduct span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .cartIndex .left .scoreProduct span span {
    font-size: 1rem;
    font-weight: 900;
    color: orange
}

.allCartIndex .allCartIndexEmpty {
    margin-top: 1rem;
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center
}

.allCartIndex .allCartIndexEmpty i svg {
    fill: var(--green-color);
    width: 7rem;
    height: 7rem
}

.allCartIndex .allCartIndexEmpty p {
    color: var(--green-color);
    margin-top: 1rem;
    font-size: 1.2rem
}

@media screen and (max-width: 800px) {
    .allCartIndex .topCartIndex {
        width: 20rem
    }

    .allCartIndex .cartIndex {
        display: block
    }

    .allCartIndex .cartIndex .right .cartItem {
        display: block;
        position: relative
    }

    .allCartIndex .cartIndex .right .cartItem .cartPic {
        display: grid;
        justify-content: center
    }

    .allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart {
        display: block
    }

    .allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart a {
        font-size: .9rem;
        font-weight: 500;
        line-height: 2rem;
        color: #000;
        opacity: .7
    }

    .allCartIndex .cartIndex .right .cartItem .cartSubject .titleCart button {
        position: absolute;
        top: 1rem;
        left: 1rem
    }

    .allCartIndex .cartIndex .right .cartItem .cartSubject .price {
        font-size: 1rem
    }

    .allCartIndex .cartIndex .right #changeCart {
        background: white;
        color: #000;
        box-shadow: 0 0 10px #0000001a;
        padding: .3rem 1rem;
        border-radius: 10px;
        font-size: .9rem;
        font-weight: 500;
        border: 1px solid #eee
    }

    .allCartIndex .cartIndex .left {
        margin-top: 1rem
    }

    .allCartIndex .cartIndex .left .cartNext {
        background: white;
        box-shadow: 0 0 10px #0000001a;
        border-radius: 10px;
        overflow: hidden
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        padding: .8rem
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem .title3 {
        font-size: .9rem;
        font-weight: 300;
        color: #000
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem span {
        font-size: 1rem;
        font-weight: 300;
        color: #000
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem .price1 {
        display: grid;
        grid-template-columns:auto auto;
        justify-content: left;
        align-items: center;
        grid-gap: .5rem;
        min-height: 2rem;
        font-size: 1.4rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-radius: 10px;
        color: var(--green-color)
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem .price1:after {
        content: "︎";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        letter-spacing: normal;
        font-family: digikala;
        font-size: 1.2rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        text-decoration: none;
        text-transform: none;
        line-height: 1;
        box-sizing: inherit
    }

    .allCartIndex .cartIndex .left .cartNext .cartPriceItem:nth-child(2n) {
        background: white
    }

    .allCartIndex .cartIndex .left .cartNext .nextItem {
        padding: .5rem;
        display: grid;
        justify-content: center
    }

    .allCartIndex .cartIndex .left .cartNext .nextItem a {
        display: grid;
        padding: .5rem 1rem;
        border-radius: 5px;
        background: var(--green-color);
        color: #fff;
        font-size: 1rem;
        font-weight: 300
    }

    .allCartIndex .cartIndex .left .scoreProduct {
        box-shadow: 0 0 10px #0000001a;
        display: grid;
        grid-template-columns:auto 1fr auto;
        justify-content: right;
        grid-gap: .5rem;
        margin-top: 1rem;
        align-items: center;
        background: white;
        border-radius: 10px;
        padding: 1rem;
        border: 1px solid #eee;
        cursor: pointer
    }

    .allCartIndex .cartIndex .left .scoreProduct i {
        display: grid;
        align-items: center
    }

    .allCartIndex .cartIndex .left .scoreProduct i svg {
        width: 1.4rem;
        height: 1.4rem
    }

    .allCartIndex .cartIndex .left .scoreProduct i:last-child svg {
        width: .7rem;
        height: .7rem
    }

    .allCartIndex .cartIndex .left .scoreProduct span {
        font-size: .8rem;
        font-weight: 300;
        color: #000
    }

    .allCartIndex .cartIndex .left .scoreProduct span span {
        font-size: 1rem;
        font-weight: 900;
        color: orange
    }
}

.allCartIndex {
    margin: auto;
    margin-top: 1rem
}

.allCartIndex .checkoutItems {
    display: grid;
    grid-template-columns:1fr 20rem;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions {
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    background: var(--back1-color);
    padding: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .checkoutTitle {
    font-size: 1.2rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
    letter-spacing: .5px
}

.allCartIndex .checkoutItems .checkoutOptions .addresses {
    border-bottom: 3px dashed #eee
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #eee;
    background: var(--back1-color);
    cursor: pointer
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .titleAddress {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .titleAddress i {
    display: grid;
    align-items: center
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .titleAddress i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: red
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .titleAddress span {
    font-size: 1rem;
    font-weight: 500;
    color: red
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .active i svg {
    fill: var(--green-color)
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .active span {
    color: var(--green-color)
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .add i svg {
    fill: #000
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .add span {
    color: #000
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address p {
    font-size: .85rem;
    color: #000;
    font-weight: 300;
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress h5 {
    font-weight: 500;
    color: #000;
    font-size: .8rem
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress .buttons {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress .buttons button {
    border-radius: 5rem;
    padding: .3rem 1rem;
    margin-right: .5rem;
    background: rgba(0, 197, 141, .1);
    color: green
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress .buttons div {
    border-radius: 5rem;
    padding: .3rem 1rem;
    margin-right: .5rem;
    background: rgba(255, 159, 0, .1);
    color: orange
}

.allCartIndex .checkoutItems .checkoutOptions .addresses ul li .address .nameAddress .buttons div:last-child {
    background: #FFEBEC;
    color: #ee232b
}

.allCartIndex .checkoutItems .checkoutOptions #carrier ul {
    grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr));
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .days {
    border-bottom: 3px dashed #eee;
    padding-bottom: 1rem;
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr));
    grid-gap: 2rem;
    align-items: center;
    margin-top: 2rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li h3 {
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li p {
    font-size: .7rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .3rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem h4 {
    font-size: .9rem;
    text-align: center;
    font-weight: 500;
    color: #000
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem h5 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--green-color);
    margin-top: .5rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem h6 {
    font-size: 14px;
    font-weight: 500;
    color: var(--green-color);
    margin-top: .5rem;
    text-align: center
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem div {
    position: relative;
    cursor: pointer;
    border: 2px solid #eee;
    padding: 1rem;
    border-radius: 1.5rem;
    margin-top: .5rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .active {
    border: 2px solid #67B930
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .active h4 {
    color: #00867d
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .active i {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -.5rem;
    height: 1rem;
    display: grid;
    justify-items: center
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .active i h4 {
    width: 40%;
    display: grid;
    background: white;
    position: relative;
    justify-content: center
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .active i svg {
    fill: #00867d;
    width: 1rem;
    height: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .days ul li .dayItem .dayUn i {
    position: fixed;
    right: 0;
    visibility: hidden
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod, .allCartIndex .checkoutItems .checkoutOptions .payMethod ul {
    margin-top: 1rem
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li {
    padding: 1rem 0
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li button {
    display: grid;
    grid-template-columns:auto auto 1fr;
    align-items: center;
    grid-gap: 1rem;
    background: transparent;
    font-size: .85rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li button i {
    display: grid;
    align-items: center;
    justify-content: center
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li button i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li button:before {
    content: "";
    border: 2px solid #000;
    background: white;
    border-radius: 100%;
    width: .9rem;
    height: .9rem
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li .active {
    color: var(--green-color)
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li .active i svg {
    fill: var(--green-color)
}

.allCartIndex .checkoutItems .checkoutOptions .payMethod ul li .active:before {
    border: 2px solid var(--green-color);
    background: var(--green-color)
}

.allCartIndex .checkoutItems .left .discount {
    box-shadow: 0 0 10px #0000001a;
    background: var(--back1-color);
    display: grid;
    grid-template-columns:1fr;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #eee;
    margin-bottom: 1rem
}

.allCartIndex .checkoutItems .left .discount h4 {
    color: #000;
    font-size: .8rem;
    font-weight: 400
}

.allCartIndex .checkoutItems .left .discount label {
    display: grid;
    grid-template-columns:1fr auto;
    margin-top: .5rem;
    padding: .5rem;
    border: 1px solid #eee;
    border-radius: 5px;
    height: 2.9rem
}

.allCartIndex .checkoutItems .left .discount label input {
    background: transparent;
    color: #000;
    font-size: .8rem;
    font-weight: 400
}

.allCartIndex .checkoutItems .left .discount label button {
    border-radius: 5px;
    background: var(--green-color);
    padding: .3rem .5rem;
    font-size: .75rem;
    font-weight: 300;
    color: #fff
}

.allCartIndex .checkoutItems .left .cartNext {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden
}

.allCartIndex .checkoutItems .left .cartNext .cartPriceItem {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    background: var(--back2-color);
    padding: .8rem
}

.allCartIndex .checkoutItems .left .cartNext .cartPriceItem h4 {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .checkoutItems .left .cartNext .cartPriceItem span {
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .checkoutItems .left .cartNext .cartPriceItem h3 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    min-height: 2rem;
    font-size: 1.4rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    color: var(--green-color)
}

.allCartIndex .checkoutItems .left .cartNext .cartPriceItem:nth-child(2n) {
    background: var(--back1-color)
}

.allCartIndex .checkoutItems .left .cartPay {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    margin-top: 1rem;
    overflow: hidden;
    position: sticky;
    top: 1rem;
    padding: 1rem
}

.allCartIndex .checkoutItems .left .cartPay .gatePay {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    margin-bottom: 1rem;
    grid-gap: 1rem
}

.allCartIndex .checkoutItems .left .cartPay .gatePay .gateItem {
    display: grid;
    justify-content: center;
    padding: .5rem;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #eee;
    filter: grayscale(1);
    transition: all .3s ease-in-out
}

.allCartIndex .checkoutItems .left .cartPay .gatePay .gateItem img {
    height: 4rem;
    object-fit: contain
}

.allCartIndex .checkoutItems .left .cartPay .gatePay .gateItem:hover {
    filter: grayscale(0)
}

.allCartIndex .checkoutItems .left .cartPay .gatePay .active {
    border: 2px solid var(--green-color);
    filter: grayscale(0)
}

.allCartIndex .checkoutItems .left .cartPay div[data=snappay] {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    border: 2px solid #eee;
    padding: .5rem;
    cursor: pointer
}

.allCartIndex .checkoutItems .left .cartPay div[data=snappay] img {
    width: 50px;
    height: 50px
}

.allCartIndex .checkoutItems .left .cartPay div[data=snappay] h4 {
    font-size: .8rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .checkoutItems .left .cartPay div[data=snappay] p {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .checkoutItems .left .cartPay .active {
    border: 2px solid var(--green-color) !important;
    filter: grayscale(0) !important
}

.allCartIndex .checkoutItems .left .cartPay .nextItem {
    padding: .5rem;
    display: grid;
    justify-content: center
}

.allCartIndex .checkoutItems .left .cartPay .nextItem button {
    display: grid;
    padding: .5rem 1rem;
    border-radius: 5px;
    background: var(--green-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 300
}

.allCartIndex .checkoutItems .left .cartPay .installmentType {
    padding: .5rem;
    display: grid;
    justify-content: center
}

.allCartIndex .checkoutItems .left .cartPay .installmentType button {
    display: grid;
    padding: .5rem 1rem;
    border-radius: 5px;
    background: var(--green-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 300
}

.allCartIndex .checkoutItems .left .cartPay .cardType {
    padding: .5rem;
    display: grid;
    justify-content: center
}

.allCartIndex .checkoutItems .left .cartPay .cardType button {
    display: grid;
    padding: .5rem 1rem;
    border-radius: 5px;
    background: var(--green-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 300
}

.allCartIndex .checkoutItems .left .cartPay .note {
    margin-bottom: 1rem
}

.allCartIndex .checkoutItems .left .cartPay .note label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .checkoutItems .left .cartPay .note textarea {
    width: 100%;
    margin-top: .5rem;
    padding: .5rem;
    font-size: .9rem;
    border: 1px solid #eee;
    border-radius: 5px;
    resize: vertical
}

.allCartIndex .checkoutItems .left .scoreProduct {
    box-shadow: 0 0 10px #0000001a;
    display: grid;
    grid-template-columns:auto 1fr auto;
    justify-content: right;
    grid-gap: .5rem;
    margin-top: 1rem;
    align-items: center;
    background: var(--back1-color);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #eee;
    cursor: pointer
}

.allCartIndex .checkoutItems .left .scoreProduct i {
    display: grid;
    align-items: center
}

.allCartIndex .checkoutItems .left .scoreProduct i svg {
    width: 1.4rem;
    height: 1.4rem
}

.allCartIndex .checkoutItems .left .scoreProduct i:last-child svg {
    width: .7rem;
    height: .7rem
}

.allCartIndex .checkoutItems .left .scoreProduct span {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allCartIndex .checkoutItems .left .scoreProduct span span {
    font-size: 1rem;
    font-weight: 900;
    color: orange
}

.allCartIndex .allPack {
    display: none
}

.allCartIndex .allPack .showPack {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    overflow-y: scroll
}

.allCartIndex .allPack .showPack .showPackItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.allCartIndex .allPack .showPack .showPackItems .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    grid-gap: .5rem;
    align-items: center
}

.allCartIndex .allPack .showPack .showPackItems .title .right {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    grid-gap: 1rem;
    align-items: center
}

.allCartIndex .allPack .showPack .showPackItems .title .right span {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .allPack .showPack .showPackItems .title .right i {
    cursor: pointer
}

.allCartIndex .allPack .showPack .showPackItems .title .right i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: red
}

.allCartIndex .allPack .showPack .showPackItems .title .close {
    cursor: pointer
}

.allCartIndex .allPack .showPack .showPackItems .title .close svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allCartIndex .allPack .showPack .showPackItems .showPackItem {
    margin: 1rem 0
}

.allCartIndex .allPack .showPack .showPackItems .showPackItem label {
    color: #000;
    font-weight: 500;
    font-size: .9rem;
    opacity: .7;
    margin-bottom: .5rem
}

.allCartIndex .allPack .showPack .showPackItems .showPackItem select {
    border: 1px solid #eee;
    padding: .3rem .5rem;
    background: var(--back1-color);
    color: #000;
    border-radius: .3rem;
    font-size: .8rem;
    width: 100%;
    opacity: .7;
    transition: all .3s ease-in-out
}

.allCartIndex .allPack .showPack .showPackItems .showPackItem select:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allCartIndex .allPack .showPack .showPackItems ul li {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    margin-bottom: 1rem;
    align-items: center
}

.allCartIndex .allPack .showPack .showPackItems ul li span {
    color: #000;
    font-weight: 300;
    font-size: .9rem
}

.allCartIndex .allPack .showPack .showPackItems ul li input {
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out
}

.allCartIndex .allPack .showPack .showPackItems ul li input:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allCartIndex .allPack .showPack .showPackItems button {
    background: var(--green-color);
    color: #fff;
    font-size: .8rem;
    font-weight: 300;
    display: grid;
    padding: .3rem 1rem;
    border-radius: 5px;
    text-align: center;
    width: 100%
}

.allCartIndex .allCard {
    display: none
}

.allCartIndex .allCard .showCard {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    overflow-y: scroll
}

.allCartIndex .allCard .showCard .showPackItems {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.allCartIndex .allCard .showCard .showPackItems .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    grid-gap: .5rem;
    align-items: center
}

.allCartIndex .allCard .showCard .showPackItems .title .right {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    grid-gap: 1rem;
    align-items: center
}

.allCartIndex .allCard .showCard .showPackItems .title .right span {
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .allCard .showCard .showPackItems .title .right i {
    cursor: pointer
}

.allCartIndex .allCard .showCard .showPackItems .title .right i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: red
}

.allCartIndex .allCard .showCard .showPackItems .title .close {
    cursor: pointer
}

.allCartIndex .allCard .showCard .showPackItems .title .close svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allCartIndex .allCard .showCard .showPackItems .description {
    border-top: 2px solid #eee;
    padding: 1rem 0;
    margin-top: 1rem
}

.allCartIndex .allCard .showCard .showPackItems .note {
    margin-bottom: 1rem
}

.allCartIndex .allCard .showCard .showPackItems .note label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allCartIndex .allCard .showCard .showPackItems .note textarea {
    width: 100%;
    margin-top: .5rem;
    padding: .5rem;
    font-size: .9rem;
    border: 1px solid #eee;
    border-radius: 5px;
    resize: vertical
}

.allCartIndex .allCard .showCard .showPackItems button {
    background: var(--green-color);
    color: #fff;
    font-size: .8rem;
    font-weight: 300;
    display: grid;
    padding: .3rem 1rem;
    border-radius: 5px;
    text-align: center;
    width: 100%
}

@media screen and (max-width: 800px) {
    .allCartIndex .checkoutItems {
        display: block
    }

    .allCartIndex .checkoutItems .left {
        margin-top: 1rem
    }

    .allCartIndex .allPack .showPack .showPackItems {
        width: 96%
    }
}

.allAddAddress {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    opacity: 0;
    visibility: hidden
}

.allAddAddress .CreateAddress {
    background: var(--back1-color);
    padding: 1rem;
    width: 35%;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.allAddAddress .CreateAddress .titleAddress {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center
}

.allAddAddress .CreateAddress .titleAddress span {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allAddAddress .CreateAddress .titleAddress i {
    cursor: pointer
}

.allAddAddress .CreateAddress .titleAddress i svg {
    width: 2rem;
    height: 2rem;
    fill: #000
}

.allAddAddress .CreateAddress .form .map1 .mapp-anchor {
    display: none
}

.allAddAddress .CreateAddress .form .map1 #map1 {
    height: 20rem
}

.allAddAddress .CreateAddress .form .map1 .mapp-modal {
    display: none
}

.allAddAddress .CreateAddress .form .alert {
    color: red;
    font-size: .8rem;
    font-weight: 300
}

.allAddAddress .CreateAddress .form .items {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns:repeat(auto-fit, minmax(5rem, 1fr))
}

.allAddAddress .CreateAddress .form .item {
    margin-top: 2rem
}

.allAddAddress .CreateAddress .form .item h4 {
    color: #000;
    font-weight: 300;
    font-size: .9rem;
    margin-bottom: .5rem
}

.allAddAddress .CreateAddress .form .item .alert {
    color: red;
    font-weight: 300;
    font-size: .8rem;
    margin-top: .5rem
}

.allAddAddress .CreateAddress .form .item input, .allAddAddress .CreateAddress .form .item select, .allAddAddress .CreateAddress .form .item h5 {
    border: 1px solid #eee;
    padding: 0 .5rem;
    background: var(--back1-color);
    color: #000;
    border-radius: 5px;
    font-size: .85rem;
    width: 100%;
    height: 2.5rem;
    font-weight: 300;
    transition: all .3s ease-in-out
}

.allAddAddress .CreateAddress .form .item input:focus, .allAddAddress .CreateAddress .form .item select:focus, .allAddAddress .CreateAddress .form .item h5:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allAddAddress .CreateAddress .form .item select[name=city] {
    display: none
}

@media screen and (max-width: 1600px) {
    .allAddAddress .CreateAddress .form .item {
        margin-top: .5rem
    }
}

.allAddAddress .CreateAddress .bottomAddress {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.allAddAddress .CreateAddress .bottomAddress span {
    font-size: .85rem;
    font-weight: 300;
    color: #000
}

.allAddAddress .CreateAddress .bottomAddress button {
    padding: .3rem 1rem;
    background: red;
    color: #fff;
    font-size: .9rem;
    font-weight: 300;
    border-radius: 5px
}

.allAddAddress .CreateAddress .bottomAddress .buttonRight button {
    background: var(--green-color)
}

@media screen and (max-width: 700px) {
    .allAddAddress .CreateAddress {
        width: 98%
    }
}

.activesAddress {
    opacity: 1;
    visibility: visible
}

.buyIndex {
    margin-top: 1rem;
    display: grid;
    justify-content: center;
    align-items: center
}

.buyIndex .allBuyItems {
    width: 30rem;
    background: var(--back1-color);
    box-shadow: 0 2px 4px #0000000d;
    border-radius: .2rem;
    overflow: hidden
}

.buyIndex .allBuyItems .allBuySuccessItemTitle {
    padding: 1rem;
    background: #6BC259;
    color: #fff;
    text-align: center
}

.buyIndex .allBuyItems .allBuyFailItemTitle {
    padding: 1rem;
    background: #EE384E;
    color: #fff;
    text-align: center
}

.buyIndex .allBuyItems .allBuyItem {
    padding: .8rem 2rem;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    border-top: 1px solid #eee
}

.buyIndex .allBuyItems .allBuyItem label {
    font-size: 12px;
    font-weight: 300;
    color: #000;
    opacity: .9
}

.buyIndex .allBuyItems .allBuyItem h4 {
    font-size: 12px;
    color: #000;
    font-weight: 400
}

.buyIndex .allBuyItems .allBuyButton {
    margin: 1rem 0;
    text-align: center
}

.buyIndex .allBuyItems .allBuyButton a {
    font-size: .9rem;
    color: #fff;
    padding: .5rem 1.5rem;
    background: #6BC259;
    border-radius: .2rem
}

@media screen and (max-width: 920px) {
    .buyIndex .allBuyItems {
        width: 20rem
    }
}

.allNews {
    margin: auto
}

.allNews .topBlogs {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem
}

.allNews .topBlogs .allNewsRight .allNewsRightItems {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem {
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    border-radius: 10px;
    padding: 1rem;
    display: grid;
    align-items: end
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver span {
    border-radius: 5px;
    padding: .3rem 1rem;
    font-weight: 500;
    font-size: .9rem;
    background: #DD4B39;
    color: #fff;
    position: absolute;
    top: 1rem;
    left: 1rem
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver .active {
    background: rgba(60, 217, 1, .9);
    color: #fff
}

.allNews .topBlogs .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver .title2 {
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    margin-top: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.allNews .topBlogs .allNewsSideBar {
    background: var(--back1-color);
    width: 20rem;
    margin-top: 1rem;
    position: sticky;
    top: 5rem
}

@media screen and (max-width: 1000px) {
    .allNews .topBlogs .allNewsSideBar {
        width: 100%
    }
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem {
    padding: 2rem;
    background: var(--back1-color);
    margin-bottom: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 5px #eee
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem label {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    padding: 0 2rem .5rem;
    border-bottom: 2px solid var(--green-color)
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul {
    padding-top: 1rem
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li {
    margin-top: 1rem;
    border-radius: 3px;
    overflow: hidden;
    transition: all .3s ease-in-out
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li:hover {
    background: var(--back2-color)
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li a {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li a img {
    width: 5rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 3px
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li a .showInfo {
    display: grid;
    justify-content: right;
    text-align: right;
    align-items: center;
    grid-gap: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li a .showInfo .title2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    color: #000;
    font-size: .8rem
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem ul li a .showInfo span {
    font-size: .7rem;
    color: #000;
    font-weight: 300
}

.allNews .topBlogs .allNewsSideBar .allNewsSideBarItem:last-child {
    position: sticky;
    top: 6rem;
    margin-bottom: 0
}

.allNews .description {
    margin-top: 2rem
}

.allNews .description h1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-color)
}

.allNews .description p {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    line-height: 2rem
}

@media screen and (max-width: 1000px) {
    .allNews {
        padding-top: 1rem;
        display: block
    }

    .allNews .topBlogs {
        grid-template-columns:1fr
    }
}

.allProductArchive {
    margin: auto;
    margin-top: 1rem
}

.allProductArchive .productArchive {
    display: grid;
    grid-template-columns:18rem 1fr;
    grid-gap: 2rem
}

.allProductArchive .productArchive .showFilterContent {
    padding: .5rem;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    opacity: .5;
    cursor: pointer;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem
}

.allProductArchive .productArchive .showFilterContent i {
    display: grid;
    align-items: center
}

.allProductArchive .productArchive .showFilterContent i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allProductArchive .productArchive .filterArchive .filterItems {
    margin-bottom: 1rem;
    overflow: hidden;
    padding: .5rem;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle {
    background: var(--back2-color);
    padding: .8rem;
    border-radius: 5px;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i {
    display: grid;
    align-items: center
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #000
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle span {
    font-size: 1rem;
    font-weight: 300;
    color: #000
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItems {
    margin-top: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    margin-top: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem input {
    padding: .5rem;
    border-radius: 5rem;
    border: 1px solid #eee !important;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    text-align: left;
    width: 100% !important;
    letter-spacing: .1px;
    background: var(--back2-color);
    height: 35px !important
}

.allProductArchive .productArchive .filterArchive .filterItems .priceFilter {
    background: var(--green-color);
    border-radius: 5rem;
    width: 100%;
    padding: .5rem;
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    transition: all .3s ease-in-out;
    margin-top: 1rem;
    opacity: .7
}

.allProductArchive .productArchive .filterArchive .filterItems .priceFilter:hover {
    opacity: 1
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories {
    display: grid;
    grid-template-columns:1fr;
    margin-top: 1rem;
    max-height: 15rem;
    overflow-y: scroll
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a {
    direction: rtl;
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    margin-top: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a {
    font-size: .85rem;
    color: #000;
    margin-right: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-top: 1rem;
    margin-right: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span:before {
    content: "";
    width: 17px;
    border-radius: 100%;
    height: 17px;
    background: #b3b3b3;
    border: 2px solid white;
    box-shadow: 0 0 5px #0000001a
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a {
    color: #000;
    font-weight: 300
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span {
    margin-right: 2rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span:before {
    content: "";
    width: 1rem;
    border-radius: 100%;
    height: 1rem;
    background: white;
    border: 2px solid #E7EBEE;
    box-shadow: 0 0 5px #0000001a
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a:first-child {
    margin-top: 0
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch {
    margin-top: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 5rem;
    border: 1px solid var(--back2-color);
    cursor: text;
    transition: all .3s ease-in-out
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label i {
    display: grid;
    align-items: center
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label svg {
    width: 1rem;
    height: 1rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label input {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    background: transparent
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label:focus-within {
    border: 1px solid #FF8A66
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer {
    padding-top: .5rem;
    max-height: 15rem
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .scroll-area {
    position: relative;
    margin: auto;
    width: 100%;
    max-height: 15rem;
    direction: ltr
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem {
    direction: rtl
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem label {
    display: grid;
    padding: .5rem;
    grid-gap: .5rem;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    cursor: pointer;
    color: #000;
    letter-spacing: .1px;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.571;
    max-width: 15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox], .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] {
        --active: #F9AB3B;
        --active-inner: #fff;
        --focus: 2px rgba(255, 159, 0, .5);
        --border: #EEEEEE;
        --border-hover: #EEEEEE;
        --background: #EEEEEE;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 17px;
        border-radius: 5rem;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background .3s, border-color .3s, box-shadow .2s
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:after, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: all .3s ease-in-out
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:checked, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled:checked, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border)
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled + label, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled + label {
        cursor: not-allowed
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:hover:not(:checked):not(:disabled), .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:focus, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch), .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch) {
        width: 17px
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):after {
        opacity: var(--o, 0)
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):checked {
        --o: 1
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox] + label, .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 5px;
        top: 2px;
        transform: rotate(var(--r, 20deg))
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked {
        --r: 43deg
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch {
        width: 10px
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        width: 10px;
        height: 10px;
        background: var(--ab, var(--border));
        transform: translate(var(--x, 0))
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 10px
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: .6
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
        width: 10px;
        height: 10px;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, .7))
    }

    .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
        --s: .5
    }
}

.allProductArchive .productArchive .productContainer .productTitle {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem;
    align-items: center
}

.allProductArchive .productArchive .productContainer .productTitle .right .name {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .3rem
}

.allProductArchive .productArchive .productContainer .productTitle .right .name span {
    opacity: .6;
    font-weight: 300;
    color: #000;
    font-size: 1.1rem
}

.allProductArchive .productArchive .productContainer .productTitle .right .name h1 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allProductArchive .productArchive .productContainer .productTitle .left {
    display: grid;
    justify-content: center
}

.allProductArchive .productArchive .productContainer .productTitle .left .top {
    background: var(--back2-color);
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    border-radius: 10px;
    display: grid;
    align-items: center;
    justify-content: center
}

.allProductArchive .productArchive .productContainer .productTitle .left .top svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: #000
}

.allProductArchive .productArchive .productContainer .productTitle .left .title2 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: .5rem
}

.allProductArchive .productArchive .productContainer .searchProduct {
    margin-top: 2rem
}

.allProductArchive .productArchive .productContainer .searchProduct label {
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: .5rem;
    align-items: center;
    padding: .9rem 1.4rem;
    border-radius: 5rem;
    border: 1px solid #eee;
    cursor: text;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000000d
}

.allProductArchive .productArchive .productContainer .searchProduct label i {
    display: grid;
    align-items: center
}

.allProductArchive .productArchive .productContainer .searchProduct label svg {
    width: 1.3rem;
    height: 1.3rem;
    transition: all .3s ease-in-out;
    fill: #000
}

.allProductArchive .productArchive .productContainer .searchProduct label input {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    background: transparent
}

.allProductArchive .productArchive .productContainer .searchProduct label:focus-within {
    border: 1px solid var(--green-color)
}

.allProductArchive .productArchive .productContainer .searchProduct label:focus-within svg {
    fill: var(--green-color)
}

.allProductArchive .productArchive .productContainer .productOrder {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: .5rem;
    margin-top: 2rem
}

.allProductArchive .productArchive .productContainer .productOrder span {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allProductArchive .productArchive .productContainer .productOrder ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    gap: 1rem
}

.allProductArchive .productArchive .productContainer .productOrder ul li {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    cursor: pointer
}

.allProductArchive .productArchive .productContainer .productOrder ul li span {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allProductArchive .productArchive .productContainer .productOrder ul li span:before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 5rem;
    display: grid;
    border: 1px solid #eee
}

.allProductArchive .productArchive .productContainer .productOrder ul li .active {
    color: red
}

.allProductArchive .productArchive .productContainer .productOrder ul li .active:before {
    background: red;
    border: 1px solid red
}

.allProductArchive .productArchive .productContainer .productLists {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));
    margin-top: 2rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a {
    transition: all .3s ease-in-out;
    display: grid;
    position: relative;
    overflow: hidden;
    background: var(--back1-color);
    border: 1px solid #eee
}

.allProductArchive .productArchive .productContainer .productLists .productList a .specialSell {
    position: absolute;
    top: 1rem;
    right: 1rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .pic {
    display: grid;
    justify-content: center
}

.allProductArchive .productArchive .productContainer .productLists .productList a .pic img {
    width: 100%;
    height: 15rem;
    object-fit: contain
}

.allProductArchive .productArchive .productContainer .productLists .productList a .lotteryStatus {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: all .3s ease-in-out
}

.allProductArchive .productArchive .productContainer .productLists .productList a .lotteryStatus svg {
    width: 5rem;
    height: 5rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .options .optionItem {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: .5rem;
    z-index: 20
}

.allProductArchive .productArchive .productContainer .productLists .productList a .options .optionItem svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #707070
}

.allProductArchive .productArchive .productContainer .productLists .productList a .options .optionItem:nth-child(2) {
    transition: all .4s ease-in-out;
    top: 3rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .options .optionItem:nth-child(3) {
    transition: all .5s ease-in-out;
    top: 5.5rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .options .optionItem:nth-child(4) {
    transition: all .5s ease-in-out;
    top: 8rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .title2 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: right;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price {
    display: grid;
    grid-template-columns:1fr;
    text-align: left;
    height: 3rem;
    padding: 0 1rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .price1 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    font-size: 16px;
    font-weight: 900;
    color: #000
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .price1:after {
    content: "︎";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: normal;
    font-family: digikala;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-sizing: inherit
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .offProduct {
    position: absolute;
    top: .5rem;
    z-index: 1;
    right: .5rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .offProduct .offProductItem {
    position: relative
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .offProduct .offProductItem svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: red;
    animation: off-anim 1s ease-in-out infinite
}

@keyframes off-anim {
    0% {
        width: 2.5rem;
        height: 2.5rem
    }
    50% {
        width: 2.8rem;
        height: 2.8rem
    }
    to {
        width: 2.5rem;
        height: 2.5rem
    }
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .offProduct .offProductItem div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center
}

.allProductArchive .productArchive .productContainer .productLists .productList a .price .offProduct .offProductItem div span {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    margin-bottom: 2px
}

.allProductArchive .productArchive .productContainer .productLists .productList a .note {
    background: rgba(255, 255, 0, .1);
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem;
    display: grid;
    align-items: center
}

.allProductArchive .productArchive .productContainer .productLists .productList a .note h4 {
    text-align: center;
    color: #ff4500
}

.allProductArchive .productArchive .productContainer .productLists .productList a .countdown {
    text-align: center;
    direction: ltr;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    height: 4rem;
    margin-top: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section {
    display: inline-block;
    width: 50px
}

.allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section .countdown-time {
    background-color: var(--back3-color);
    border-radius: 50%;
    color: #000;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: auto;
    width: 40px
}

.allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section:last-child .countdown-time {
    background-color: var(--green-color);
    color: #fff;
    font-size: 1rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: .5rem;
    border-top: 1px solid #eee;
    padding: .5rem;
    height: 4rem;
    margin-top: .5rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--green-color);
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    height: 2.5rem;
    border-radius: 5px;
    position: relative
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #fff
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:first-child {
    border: 2px solid var(--green-color)
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:first-child:before {
    content: "";
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:last-child {
    justify-content: center;
    background: gray;
    width: 2.5rem
}

.allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:last-child svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

@media screen and (max-width: 800px) {
    .allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem {
        font-size: .7rem
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem svg {
        width: .8rem;
        height: .8rem
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:last-child {
        width: 2rem
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .optionDown .optionItem:last-child svg {
        width: .8rem;
        height: .8rem
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section {
        width: 40px
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section .countdown-time {
        height: 30px;
        line-height: 30px;
        width: 30px;
        font-size: .7rem
    }

    .allProductArchive .productArchive .productContainer .productLists .productList a .countdown .countdown-section:last-child .countdown-time {
        font-size: .7rem
    }
}

.allProductArchive .productArchive .productContainer .productLists .productList a:hover {
    box-shadow: 0 0 10px #00000026
}

.allProductArchive .productArchive .productContainer .productLists .productList a:hover .lotteryStatus {
    opacity: 0;
    visibility: hidden
}

.allProductArchive .productArchive .productContainer .productLists .productList a:hover .options .optionItem {
    opacity: 1;
    visibility: visible;
    left: .7rem
}

.allProductArchive .description {
    overflow: hidden;
    padding: 1rem;
    background: white;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    margin-top: 1rem
}

.allProductArchive .description .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-color)
}

.allProductArchive .description p {
    font-size: .9rem;
    opacity: .7;
    font-weight: 500;
    color: #000;
    line-height: 2.2rem
}

@media screen and (max-width: 800px) {
    .allProductArchive .productArchive {
        display: block
    }

    .allProductArchive .productArchive .productContainer .productOrder {
        display: block;
        margin-top: 2rem
    }

    .allProductArchive .productArchive .productContainer .productOrder ul {
        margin-top: 1rem
    }

    .allProductArchive .productArchive .productContainer .productOrder ul li, .allProductArchive .productArchive .productContainer .productOrder ul li span {
        font-size: .8rem
    }

    .allProductArchive .productArchive .productContainer .productLists {
        grid-template-columns:1fr 1fr
    }
}

.allCategoriesIndex {
    margin: auto;
    margin-top: 1rem
}

.allCategoriesIndex h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #444
}

.allCategoriesIndex ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: 1rem;
    margin-top: 2rem
}

.allCategoriesIndex ul li {
    padding: .5rem;
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 1rem
}

.allCategoriesIndex ul li .pic img {
    width: 100%;
    height: 5rem;
    object-fit: contain
}

.allCategoriesIndex ul li .title2 {
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
    color: #444;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allProfileList {
    width: 15rem
}

.allProfileList .allUserIndexList {
    background: var(--back1-color);
    box-shadow: 0 0 5px #eee;
    border-radius: 10px;
    overflow: hidden
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic {
    display: grid;
    justify-content: center;
    overflow: hidden;
    padding-top: 1rem
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic {
    position: relative
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic img {
    width: 3rem;
    height: 3rem;
    border-radius: 5rem;
    object-fit: cover
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem {
    margin-top: .5rem;
    text-align: center
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserName {
    font-size: 1.1rem;
    vertical-align: center;
    color: #000;
    opacity: .7;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: .3rem;
    padding: 0 1rem;
    margin-top: .8rem
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore svg {
    width: 1.3rem;
    height: 1.3rem
}

.allProfileList .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore span {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.833;
    color: orange
}

.allProfileList .allUserIndexList .allUserIndexListsUser h4 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: 1rem
}

.allProfileList .allUserIndexList .collectGift {
    padding: .5rem;
    background: var(--green-color);
    border-radius: 5px;
    color: #fff;
    margin: 1rem;
    margin-bottom: 0;
    text-align: center;
    cursor: pointer
}

.allProfileList .allUserIndexList .allUserIndexListItems {
    border-top: 1px solid #eee;
    margin-top: .5rem;
    display: grid;
    grid-template-columns:1fr 1fr
}

.allProfileList .allUserIndexList .allUserIndexListItems a {
    display: grid;
    grid-template-columns:1fr;
    text-align: center;
    padding: 1rem .5rem;
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allProfileList .allUserIndexList .allUserIndexListItems a:first-child {
    border-left: 1px solid #eee
}

.allProfileList .walletData {
    background: var(--back1-color);
    box-shadow: 0 0 5px #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
    padding: 1rem
}

.allProfileList .walletData i {
    display: grid;
    justify-content: center
}

.allProfileList .walletData i svg {
    width: 5rem;
    height: 5rem
}

.allProfileList .walletData h3 {
    font-size: 1.2rem;
    font-weight: 300;
    color: #444;
    text-align: center
}

.allProfileList .walletData h3 span {
    font-size: 1rem;
    letter-spacing: .1px
}

.allProfileList .walletData a {
    display: grid;
    width: 100%;
    text-align: center;
    font-size: .9rem;
    font-weight: 300;
    color: var(--green-color);
    margin-top: .5rem
}

.allProfileList .allUserIndexListsItems {
    background: var(--back1-color);
    margin-top: 1rem;
    box-shadow: 0 0 5px #eee;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 1rem;
    padding: 1rem .5rem
}

.allProfileList .allUserIndexListsItems .allUserIndexListsItem {
    display: grid;
    grid-template-columns:1fr auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-top: 1.5rem;
    cursor: pointer
}

.allProfileList .allUserIndexListsItems .allUserIndexListsItem i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allProfileList .allUserIndexListsItems .allUserIndexListsItem i svg {
    width: .8rem;
    height: .8rem;
    fill: var(--green-color)
}

.allProfileList .allUserIndexListsItems .allUserIndexListsItem a, .allProfileList .allUserIndexListsItems .allUserIndexListsItem h3 {
    transition: all .3s ease-in-out;
    font-size: .9rem;
    font-weight: 700;
    color: #000;
    letter-spacing: .2px;
    opacity: .6
}

.allProfileList .allUserIndexListsItems .allUserIndexListsItem:first-child {
    margin-top: 0
}

.allProfileList .allUserIndexListsItems .userProducts {
    margin-top: 1.5rem
}

.allProfileList .allUserIndexListsItems .userProducts .slide-fade-enter-active, .allProfileList .allUserIndexListsItems .userProducts .slide-fade-leave-active {
    transition: all .3s ease-in-out
}

.allProfileList .allUserIndexListsItems .userProducts .slide-fade-enter, .allProfileList .allUserIndexListsItems .userProducts .slide-fade-leave-to {
    transform: translateY(-10px)
}

.allProfileList .allUserIndexListsItems .userProducts ul li {
    margin-top: .8rem
}

.allProfileList .allUserIndexListsItems .userProducts ul li a {
    font-size: .8rem;
    font-weight: 300;
    padding-right: .5rem;
    color: #000;
    letter-spacing: .2px;
    display: grid;
    grid-template-columns:1.4rem 1fr;
    justify-content: right;
    align-items: center
}

.allProfileList .allUserIndexListsItems .userProducts ul li a:before {
    content: "";
    display: grid;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #000;
    transition: all .3s ease-in-out
}

.allProfileList .allUserIndexListsItems .userProducts ul li a:hover:before {
    width: 1rem
}

.allProfileList .becomeList {
    margin-top: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 5px #eee;
    position: relative;
    display: grid;
    overflow: hidden
}

.allProfileList .becomeList h4 {
    display: grid;
    grid-template-columns:auto auto;
    align-items: center;
    justify-content: right;
    grid-gap: .5rem;
    margin: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    z-index: 20
}

.allProfileList .becomeList h4 i {
    display: grid;
    align-items: center
}

.allProfileList .becomeList h4 i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #fff
}

.allProfileList .becomeList .pic {
    z-index: 5;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scale(3);
    background-image: url(/img/backStore.png);
    display: grid;
    background-size: cover
}

@media screen and (max-width: 800px) {
    .allProfileList {
        width: 100%;
        margin-bottom: 1rem
    }
}

.allProfileIndex {
    margin: auto;
    margin-top: 1rem;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem
}

.allProfileIndex .profileIndex .notes {
    padding: 1rem;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px #0000001a;
    background: var(--back1-color)
}

.allProfileIndex .profileIndex .notes .noteTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000
}

.allProfileIndex .profileIndex .notes .items .item {
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--back3-color);
    padding: 1rem
}

.allProfileIndex .profileIndex .notes .items .item h4 {
    font-weight: 700;
    font-size: .9rem;
    color: #000;
    margin-bottom: .5rem
}

.allProfileIndex .profileIndex .notes .items .item p {
    font-weight: 300;
    font-size: .85rem;
    color: #000
}

.allProfileIndex .profileIndex .profileIndexTop {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem;
    margin-bottom: 1rem
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem {
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 1rem;
    background: var(--back1-color)
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem label {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    padding-right: 1rem
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul {
    margin-top: 1rem;
    height: 19.5rem;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li {
    display: grid;
    grid-template-columns:1fr auto;
    border-bottom: 1px solid #eee;
    grid-gap: 1rem;
    padding: 1rem;
    height: 6.5rem
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemPic img {
    width: 3rem;
    height: 3rem;
    object-fit: cover
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemSubject .userItemSubjectTitle {
    font-size: .8rem;
    font-weight: 400;
    height: 2.5rem;
    overflow: hidden;
    color: #000
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemSubject .postPriceItem {
    text-align: left;
    display: grid;
    grid-template-columns:1fr;
    justify-content: left;
    height: 2.5rem;
    overflow: hidden
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemSubject .postPriceItem .offPrice {
    display: grid;
    justify-content: left
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemSubject .postPriceItem .offPrice s {
    font-size: .8rem;
    line-height: 1.692;
    font-weight: 300;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li a .userItemSubject .postPriceItem h3 {
    text-align: left;
    width: 100%;
    color: #000;
    letter-spacing: .1px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.5
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li i {
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem ul li i svg {
    transition: all .3s ease-in-out;
    fill: #000;
    width: 1rem;
    height: 1rem
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem .profileIndexTopItemAddress {
    text-align: center;
    background: var(--back1-color);
    padding: 1rem;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

.allProfileIndex .profileIndex .profileIndexTop .profileIndexTopItem .profileIndexTopItemAddress a {
    color: var(--green-color);
    border-bottom: 1px dashed var(--green-color)
}

@media screen and (max-width: 1000px) {
    .allProfileIndex .profileIndex .profileIndexTop {
        grid-template-columns:1fr
    }
}

.allProfileIndex .profileIndex label {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    padding-right: 1rem
}

.allProfileIndex .profileIndexPay {
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    background: var(--back1-color)
}

.allProfileIndex .profileIndexPay label {
    padding: 1rem;
    display: grid
}

.allProfileIndex .profileIndexPay table {
    display: grid;
    grid-template-columns:1fr
}

.allProfileIndex .profileIndexPay table tr {
    display: grid;
    background: var(--back1-color);
    grid-template-columns:repeat(auto-fit, minmax(1rem, 1fr));
    overflow: hidden;
    border: 1px solid #f5f5f5
}

.allProfileIndex .profileIndexPay table tr:nth-child(2n) {
    background: var(--back2-color)
}

.allProfileIndex .profileIndexPay table tr th {
    padding: 1rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: .7rem;
    font-weight: 500;
    color: #000
}

.allProfileIndex .profileIndexPay table tr th svg {
    width: 1rem;
    height: 1rem
}

.allProfileIndex .profileIndexPay table tr th:first-child {
    border-right: 0
}

.allProfileIndex .profileIndexPay table tr td {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1rem, auto));
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    text-align: center;
    padding: 1rem
}

.allProfileIndex .profileIndexPay table tr td a {
    cursor: pointer
}

.allProfileIndex .profileIndexPay table tr td a svg {
    width: 1rem;
    height: 1rem
}

.allProfileIndex .profileIndexPay table tr td span {
    color: #000;
    font-size: .75rem;
    font-weight: 300
}

.allProfileIndex .profileIndexPay table tr .active {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    font-weight: 500;
    background: transparent;
    color: #000;
    font-size: .7rem
}

.allProfileIndex .profileIndexPay table tr .active:before {
    border-radius: 10px;
    width: 10px;
    height: 10px;
    background-color: #00c58d;
    content: "";
    display: inline-block;
    margin-left: 10px
}

.allProfileIndex .profileIndexPay table tr .unActive {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    font-weight: 300;
    background: transparent;
    color: #000;
    font-size: .7rem
}

.allProfileIndex .profileIndexPay table tr .unActive:before {
    border-radius: 10px;
    width: 10px;
    height: 10px;
    background-color: #fc5c63;
    content: "";
    display: inline-block;
    margin-left: 10px
}

@media screen and (max-width: 1200px) {
    .allProfileIndex .profileIndexPay table tr th, .allProfileIndex .profileIndexPay table tr td {
        padding: 2rem 0
    }
}

@media screen and (max-width: 700px) {
    .allProfileIndex .profileIndexPay table tr th {
        padding: 1rem 0;
        font-size: .55rem
    }

    .allProfileIndex .profileIndexPay table tr td {
        padding: 1rem 0
    }

    .allProfileIndex .profileIndexPay table tr td span {
        font-size: .55rem;
        color: #313131
    }

    .allProfileIndex .profileIndexPay table tr td i svg {
        width: .5rem;
        height: .5rem
    }

    .allProfileIndex .profileIndexPay table tr td .active, .allProfileIndex .profileIndexPay table tr td .unActive {
        font-size: .5rem
    }

    .allProfileIndex .profileIndexPay table tr td .active:before, .allProfileIndex .profileIndexPay table tr td .unActive:before {
        visibility: hidden;
        position: absolute;
        top: 0
    }
}

.allProfileIndex .allUserIndexInfo #upload-image-form .sendImage {
    background: var(--back1-color);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    box-shadow: 0 0 10px #0000000d;
    margin-bottom: 1rem
}

.allProfileIndex .allUserIndexInfo #upload-image-form .sendImage .dropify-wrapper {
    border: 1px solid var(--back2-color) !important
}

.allProfileIndex .allUserIndexInfo #upload-image-form .sendImage .dropify-wrapper .file-icon:before {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    visibility: hidden !important
}

.allProfileIndex .allUserIndexInfo #upload-image-form .sendImage .dropify-wrapper .dropify-message p {
    margin: 0;
    font-size: 1.3rem;
    font-family: irsans;
    color: #00800082
}

.allProfileIndex .allUserIndexInfo #upload-image-form #upload-image {
    padding: .3rem 1.5rem;
    font-weight: 500;
    font-size: .9rem;
    color: #fff;
    background: var(--green-color);
    margin-right: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px #0000000d
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal {
    background: var(--back1-color);
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    border-top: 1px solid #eee
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem {
    padding: 1rem;
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem input, .allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem textarea {
    padding: .5rem;
    background: var(--back2-color);
    border-radius: .2rem;
    width: 100%;
    transition: all .3s ease-in-out;
    font-size: .9rem;
    line-height: 1.571;
    color: #81858b;
    height: 2.5rem
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem textarea {
    height: 10rem
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem label {
    font-size: .9rem;
    line-height: 1.692;
    color: #000
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem h4 {
    height: 2.5rem;
    width: 100%;
    cursor: pointer;
    background: var(--back2-color);
    border-radius: .2rem;
    color: #000;
    display: grid;
    align-items: center;
    padding-right: .5rem;
    font-weight: 300
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem:first-child {
    border-left: 1px solid #eee
}

.allProfileIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems:first-child {
    border-top: 0
}

.allProfileIndex .allUserIndexInfo .infoButton {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    border-radius: 5px;
    padding: .3rem .5rem;
    display: grid;
    margin-top: 1rem
}

.allProfileIndex .profileIndexConverter ul {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem
}

.allProfileIndex .profileIndexConverter ul li {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 5px 10px #0000001a
}

.allProfileIndex .profileIndexConverter ul li h3 {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: red;
    margin-bottom: 1rem;
    letter-spacing: 1px
}

.allProfileIndex .profileIndexConverter ul li h4 {
    font-size: .9rem;
    font-weight: 300;
    text-align: center;
    color: #444;
    margin-bottom: 1rem
}

.allProfileIndex .profileIndexConverter ul li h4:nth-last-child(2) {
    font-size: .75rem
}

.allProfileIndex .profileIndexConverter ul li button {
    display: grid;
    font-size: .9rem;
    font-weight: 300;
    text-align: center;
    color: #fff;
    width: 100%;
    padding: .3rem;
    border-radius: 5px;
    background: var(--green-color)
}

.allProfileIndex .profileIndexConverter .discounts {
    background: var(--back1-color);
    padding: 1rem;
    border-radius: 10px;
    margin-top: 2rem;
    box-shadow: 0 0 10px #0000001a
}

.allProfileIndex .profileIndexConverter .discounts h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem
}

.allProfileIndex .profileIndexConverter .discounts .disItem {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    font-weight: 300;
    color: #444
}

.allProfileIndex .profileIndexConverter .discounts .disItem:last-child {
    border-bottom: 0
}

@media screen and (max-width: 800px) {
    .allProfileIndex {
        display: block
    }
}

.profileIndexLike label {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    padding-right: 1rem
}

.profileIndexLike ul {
    background: var(--back1-color);
    margin-top: 1rem
}

.profileIndexLike ul li {
    display: grid;
    grid-template-columns:1fr auto;
    border-bottom: 1px solid #eee;
    grid-gap: 1rem;
    padding: 1rem;
    height: 6.5rem
}

.profileIndexLike ul li a {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem
}

.profileIndexLike ul li a .userItemPic img {
    width: 3rem;
    height: 3rem;
    object-fit: cover
}

.profileIndexLike ul li a .userItemSubject .userItemSubjectTitle {
    font-size: .8rem;
    font-weight: 400;
    height: 2.5rem;
    overflow: hidden;
    color: #000
}

.profileIndexLike ul li a .userItemSubject .postPriceItem {
    text-align: left;
    display: grid;
    grid-template-columns:1fr;
    justify-content: left;
    height: 2.5rem;
    overflow: hidden
}

.profileIndexLike ul li a .userItemSubject .postPriceItem .offPrice {
    display: grid;
    justify-content: left
}

.profileIndexLike ul li a .userItemSubject .postPriceItem .offPrice s {
    font-size: .8rem;
    line-height: 1.692;
    font-weight: 300;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.profileIndexLike ul li a .userItemSubject .postPriceItem h3 {
    text-align: left;
    width: 100%;
    color: #000;
    letter-spacing: .1px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.5
}

.profileIndexLike ul li i {
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.profileIndexLike ul li i svg {
    transition: all .3s ease-in-out;
    fill: #000;
    width: 1rem;
    height: 1rem
}

.allProduct table {
    background: var(--back1-color);
    border-radius: .3rem;
    box-shadow: 0 0 10px #0000000d;
    margin-top: 1rem;
    width: 100%
}

.allProduct table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allProduct table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allProduct table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allProduct table tr td svg {
    fill: #000;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

.allProduct table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.allProduct table tr td a {
    display: grid;
    align-items: center
}

.allProduct table tr td a svg {
    margin-left: .5rem
}

.allProduct table tr .buttons {
    display: grid;
    grid-template-columns:auto auto auto;
    grid-gap: .5rem
}

.allProduct table tr .buttons button {
    padding: .3rem;
    border-radius: 5px;
    background: red;
    color: #fff;
    font-size: .8rem
}

.allProduct table tr .buttons a {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    background: green;
    color: #fff
}

.allProduct table tr .buttons a:nth-child(2) {
    background: orange
}

.allProduct table tr:nth-child(2n) {
    background: var(--back2-color)
}

.allShowPay, .showOrder {
    background: var(--back1-color);
    box-shadow: 0 0 5px #0000000d;
    border-radius: 10px;
    padding: 1rem
}

.allShowPay .topShowPay .title, .showOrder .topShowPay .title {
    display: grid;
    grid-template-columns:auto auto auto auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem
}

.allShowPay .topShowPay .title h2, .showOrder .topShowPay .title h2 {
    font-size: 1.2rem;
    color: #000;
    font-weight: 700
}

.allShowPay .topShowPay .title span, .showOrder .topShowPay .title span {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    background: var(--back2-color);
    padding: .2rem 1rem;
    border-radius: 5px
}

.allShowPay .topShowPay .title button, .showOrder .topShowPay .title button {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    font-size: .8rem;
    color: #fff;
    background: var(--green-color);
    font-weight: 500;
    padding: .3rem 1rem;
    border-radius: 5px
}

.allShowPay .topShowPay .title button svg, .showOrder .topShowPay .title button svg {
    fill: #fff;
    width: 1rem;
    height: 1rem
}

@media screen and (max-width: 500px) {
    .allShowPay .topShowPay .title h2, .showOrder .topShowPay .title h2 {
        font-size: 1rem
    }

    .allShowPay .topShowPay .title span, .showOrder .topShowPay .title span {
        font-size: .7rem
    }
}

.allShowPay .topShowPay .detail .items, .showOrder .topShowPay .detail .items {
    display: grid;
    grid-template-columns:auto auto auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: 1.5rem;
    margin-top: 1rem
}

.allShowPay .topShowPay .detail .items .item, .showOrder .topShowPay .detail .items .item {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allShowPay .topShowPay .detail .items .item h5, .showOrder .topShowPay .detail .items .item h5 {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allShowPay .topShowPay .detail .items .item div, .showOrder .topShowPay .detail .items .item div {
    font-size: .8rem;
    font-weight: 300;
    color: #000
}

.allShowPay .topShowPay .detail .items .item .active, .showOrder .topShowPay .detail .items .item .active {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allShowPay .topShowPay .detail .items .item .active:before, .showOrder .topShowPay .detail .items .item .active:before {
    width: 10px;
    height: 10px;
    content: "";
    background: var(--green-color);
    border-radius: 5rem
}

.allShowPay .topShowPay .detail .items .item .unActive, .showOrder .topShowPay .detail .items .item .unActive {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allShowPay .topShowPay .detail .items .item .unActive:before, .showOrder .topShowPay .detail .items .item .unActive:before {
    width: 10px;
    height: 10px;
    content: "";
    background: red;
    border-radius: 5rem
}

@media screen and (max-width: 700px) {
    .allShowPay .topShowPay .detail .items, .showOrder .topShowPay .detail .items {
        grid-template-columns:1fr
    }
}

.allShowPay .topShowPay .detail .topDetail, .showOrder .topShowPay .detail .topDetail {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem
}

.allShowPay .topShowPay .detail .botDetail, .showOrder .topShowPay .detail .botDetail {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem
}

.allShowPay .topShowPay .trackPay, .showOrder .topShowPay .trackPay {
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem
}

.allShowPay .topShowPay .trackPay span, .showOrder .topShowPay .trackPay span {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allShowPay .topShowPay .trackPay p, .showOrder .topShowPay .trackPay p {
    border-radius: 5px;
    background: #f5f5f5;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7;
    padding: .5rem
}

.allShowPay .topShowPay .trackPay label, .allShowPay .topShowPay .trackPay h4, .showOrder .topShowPay .trackPay label, .showOrder .topShowPay .trackPay h4 {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allShowPay .note, .showOrder .note {
    padding: 1rem;
    background: rgba(255, 0, 0, .1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem
}

.allShowPay .note label, .showOrder .note label {
    font-size: .8rem;
    font-weight: 300;
    color: red;
    display: grid
}

.allShowPay .note p, .showOrder .note p {
    font-size: .8rem;
    font-weight: 300;
    color: red;
    text-align: left
}

.allShowPay .allShowPayContainer .topContainer, .showOrder .allShowPayContainer .topContainer {
    margin-top: 3rem;
    padding-bottom: 3rem
}

.allShowPay .allShowPayContainer .topContainer .level, .allShowPay .allShowPayContainer .topContainer .code, .showOrder .allShowPayContainer .topContainer .level, .showOrder .allShowPayContainer .topContainer .code {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns:auto auto;
    margin-bottom: 3rem;
    grid-gap: .5rem
}

.allShowPay .allShowPayContainer .topContainer .level h3, .allShowPay .allShowPayContainer .topContainer .code h3, .showOrder .allShowPayContainer .topContainer .level h3, .showOrder .allShowPayContainer .topContainer .code h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    opacity: .7
}

.allShowPay .allShowPayContainer .topContainer .level span, .allShowPay .allShowPayContainer .topContainer .code span, .showOrder .allShowPayContainer .topContainer .level span, .showOrder .allShowPayContainer .topContainer .code span {
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allShowPay .allShowPayContainer .topContainer .code, .showOrder .allShowPayContainer .topContainer .code {
    margin-bottom: 0;
    margin-top: 3rem
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount, .showOrder .allShowPayContainer .topContainer .rateItemsCount {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(2rem, auto));
    justify-content: center;
    align-items: center
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem {
    position: relative;
    height: 5px
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem svg, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem svg {
    width: 1.8rem;
    height: 1.8rem
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBar, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBar {
    width: 5rem;
    height: 5px;
    background: var(--back2-color)
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
    width: 5rem;
    height: 5px;
    background: var(--green-color)
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle {
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 2;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 2px solid #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    cursor: pointer
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
    background-color: var(--green-color);
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 2;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 2px solid var(--back2-color);
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive {
    width: 3rem;
    position: absolute;
    background: var(--green-color);
    height: 3rem;
    top: 50%;
    display: grid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    -webkit-box-align: center;
    border-radius: 50%;
    border: none;
    z-index: 4;
    box-shadow: 0 1px 4px #0003;
    cursor: pointer
}

@media screen and (max-width: 500px) {
    .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive, .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive, .showOrder .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
        width: 2.5rem;
        height: 2.5rem
    }
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount span, .showOrder .allShowPayContainer .topContainer .rateItemsCount span {
    font-size: .7rem;
    font-weight: 300;
    color: #000
}

.allShowPay .allShowPayContainer .topContainer .cashBacks, .showOrder .allShowPayContainer .topContainer .cashBacks {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.allShowPay .allShowPayContainer .topContainer .cashBacks button, .showOrder .allShowPayContainer .topContainer .cashBacks button {
    border: 1px solid var(--green-color);
    border-radius: 5px;
    padding: .5rem 1rem;
    background: white;
    font-size: .8rem;
    font-weight: 300;
    color: var(--green-color)
}

.allShowPay .allShowPayContainer .topContainer .cashBacks .active, .showOrder .allShowPayContainer .topContainer .cashBacks .active {
    background: var(--green-color);
    color: #fff
}

.allShowPay .allShowPayContainer .abilityPost, .showOrder .allShowPayContainer .abilityPost {
    background: var(--back3-color);
    padding: 1rem;
    border-radius: .2rem;
    margin-bottom: 1rem
}

.allShowPay .allShowPayContainer .abilityPost .abilityTitle, .showOrder .allShowPayContainer .abilityPost .abilityTitle {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    grid-gap: .5rem;
    align-items: center;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable, .showOrder .allShowPayContainer .abilityPost .abilityTable {
    display: grid;
    grid-template-columns:1fr;
    margin: 1rem 0;
    box-shadow: 0 0;
    border-radius: .3rem;
    background: var(--back2-color)
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li, .showOrder .allShowPayContainer .abilityPost .abilityTable li {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr 6.5rem;
    text-align: right;
    align-items: center;
    grid-gap: 1rem;
    background: white;
    padding: 0 1rem;
    min-height: 3.5rem;
    border-bottom: 0;
    overflow: unset
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li h4, .showOrder .allShowPayContainer .abilityPost .abilityTable li h4 {
    color: #000;
    font-size: .8rem;
    opacity: .7;
    font-weight: 500;
    text-align: center
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li a, .showOrder .allShowPayContainer .abilityPost .abilityTable li a {
    display: grid;
    border-radius: 5px;
    background: var(--green-color);
    padding: .3rem 1rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 300
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li .pays, .showOrder .allShowPayContainer .abilityPost .abilityTable li .pays {
    opacity: .4
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li .activeF, .showOrder .allShowPayContainer .abilityPost .abilityTable li .activeF {
    color: red
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li .activeS, .showOrder .allShowPayContainer .abilityPost .abilityTable li .activeS {
    color: var(--green-color)
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li i, .showOrder .allShowPayContainer .abilityPost .abilityTable li i {
    cursor: pointer
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li i svg, .showOrder .allShowPayContainer .abilityPost .abilityTable li i svg {
    width: 1rem;
    height: 1rem;
    fill: #000
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li input:first-child, .showOrder .allShowPayContainer .abilityPost .abilityTable li input:first-child {
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .7rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li input:first-child:focus, .showOrder .allShowPayContainer .abilityPost .abilityTable li input:first-child:focus {
    box-shadow: 0 3px 8px #eee;
    border: 1px solid #19bfd3
}

.allShowPay .allShowPayContainer .abilityPost .abilityTable li:nth-child(2), .showOrder .allShowPayContainer .abilityPost .abilityTable li:nth-child(2) {
    border-top: 2px solid #eee
}

.allShowPay .allShowPayContainer .items, .showOrder .allShowPayContainer .items {
    background: var(--back2-color);
    padding: 1rem;
    border-radius: 10px
}

.allShowPay .allShowPayContainer .items .title, .showOrder .allShowPayContainer .items .title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem
}

.allShowPay .allShowPayContainer .items .item, .showOrder .allShowPayContainer .items .item {
    padding: 1rem;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 0 5px #eee;
    background: var(--back1-color);
    margin-bottom: 1rem;
    grid-gap: 1rem;
    position: relative
}

.allShowPay .allShowPayContainer .items .item .cartDetailPic img, .showOrder .allShowPayContainer .items .item .cartDetailPic img {
    width: 100%;
    max-width: 10rem;
    height: 8rem;
    object-fit: cover
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem {
    margin-top: .5rem;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: .5rem;
    align-items: center
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem span, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem span {
    color: #000;
    opacity: .7;
    font-size: .85rem;
    font-weight: 300
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i svg, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i svg {
    fill: #000;
    width: 1.1rem;
    height: 1.1rem;
    opacity: .7
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem h3, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem h3 {
    font-size: 1rem;
    line-height: 1.375;
    color: #000;
    font-weight: 500
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem:first-child, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem:first-child {
    display: block;
    margin-top: 0
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartCount {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    color: #000
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount button, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartCount button {
    display: grid;
    justify-content: center;
    align-items: center;
    background: red;
    height: 1.3rem;
    padding: 0 1rem;
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
    font-size: .8rem;
    color: #fff
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount button:first-child, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartCount button:first-child {
    font-size: .8rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDelete, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDelete {
    position: absolute;
    left: .5rem;
    top: .5rem
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDelete svg, .showOrder .allShowPayContainer .items .item .cartDetailInfo .cartDelete svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allShowPay .allShowPayContainer .items .item:last-child, .showOrder .allShowPayContainer .items .item:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 500px) {
    .allShowPay .allShowPayContainer .items .item, .showOrder .allShowPayContainer .items .item {
        grid-template-columns:1fr
    }

    .allShowPay .allShowPayContainer .items .item .cartDetailPic, .showOrder .allShowPayContainer .items .item .cartDetailPic {
        display: grid;
        justify-content: center
    }
}

.allShowPay .printPay, .showOrder .printPay {
    position: absolute;
    top: 0;
    visibility: hidden;
    opacity: 0
}

.showOrder {
    margin: auto;
    margin-top: 1rem;
    padding: 0
}

.profileIndexTicket h1 {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 1rem
}

.profileIndexTicket h6 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 1rem
}

.profileIndexTicket .alert {
    background: rgba(0, 128, 0, .26);
    color: #006200;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .85rem;
    font-weight: 300;
    margin: 1rem 0
}

.profileIndexTicket .referralCode {
    background: var(--back1-color);
    border-radius: .3rem;
    box-shadow: 0 0 10px #eee;
    margin-bottom: 1rem;
    padding: 1rem;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    align-items: center
}

.profileIndexTicket .referralCode span {
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.profileIndexTicket .referralCode h5 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    padding: .5rem;
    border: 1px solid #eee;
    border-radius: 5px
}

.profileIndexTicket .containerSub {
    background: var(--back1-color);
    border-radius: .3rem;
    box-shadow: 0 0 10px #eee;
    margin-bottom: 1rem;
    padding: 1rem;
    overflow: hidden
}

.profileIndexTicket .containerSub table {
    margin-bottom: 0
}

.profileIndexTicket .emptyUser {
    margin: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-color);
    text-align: center
}

.profileIndexTicket .search22 {
    display: grid;
    grid-template-columns:1fr auto;
    border-radius: 10px;
    border: 2px solid #eee;
    overflow: hidden;
    margin: 1rem 0
}

.profileIndexTicket .search22 input {
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: 300;
    width: 100%
}

.profileIndexTicket .search22 button {
    background: green;
    color: #fff;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 300
}

.profileIndexTicket table {
    background: var(--back1-color);
    border-radius: .3rem;
    box-shadow: 0 0 10px #eee;
    width: 100%;
    margin-bottom: 1rem
}

.profileIndexTicket table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.profileIndexTicket table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.profileIndexTicket table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.profileIndexTicket table tr td svg {
    fill: #000;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

.profileIndexTicket table tr td img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 5rem;
    box-shadow: 0 0 10px #0000001a
}

.profileIndexTicket table tr td a {
    display: grid;
    align-items: center
}

.profileIndexTicket table tr td a svg {
    margin-left: .5rem
}

.profileIndexTicket table tr .buttons a {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    color: #fff;
    background: green
}

.profileIndexTicket table tr .buttons button {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    color: #fff;
    background: orange
}

.profileIndexTicket table tr:nth-child(2n) {
    background: var(--back2-color)
}

.profileIndexTicket .allTickets .container {
    border-radius: 5px;
    background: var(--back1-color)
}

.profileIndexTicket .allTickets .container .chat {
    display: grid;
    color: #434651
}

.profileIndexTicket .allTickets .container .chat .chat-header {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: 1rem
}

.profileIndexTicket .allTickets .container .chat .chat-header img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 100%
}

.profileIndexTicket .allTickets .container .chat .chat-header .chat-with {
    font-weight: 700;
    font-size: 16px
}

.profileIndexTicket .allTickets .container .chat .chat-history {
    padding: 15px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 400px
}

.profileIndexTicket .allTickets .container .chat .chat-history .message-data {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.profileIndexTicket .allTickets .container .chat .chat-history .message-data-time {
    color: #000;
    font-size: .6rem;
    padding-right: 6px
}

.profileIndexTicket .allTickets .container .chat .chat-history .message-data-name {
    color: #000;
    font-size: .9rem
}

.profileIndexTicket .allTickets .container .chat .chat-history ul {
    display: grid
}

.profileIndexTicket .allTickets .container .chat .chat-history .message {
    color: #fff;
    padding: 10px 20px;
    line-height: 26px;
    font-size: 13px;
    border-radius: 5px;
    margin-bottom: 30px;
    max-width: 90%;
    position: relative
}

.profileIndexTicket .allTickets .container .chat .chat-history .message i {
    display: grid;
    align-items: center;
    justify-content: left;
    margin-top: .3rem
}

.profileIndexTicket .allTickets .container .chat .chat-history .message i svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.profileIndexTicket .allTickets .container .chat .chat-history .message:after {
    bottom: 100%;
    right: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: var(--green-color);
    border-width: 10px;
    margin-left: -10px
}

.profileIndexTicket .allTickets .container .chat .chat-history .my-message {
    float: right;
    background: var(--green-color)
}

.profileIndexTicket .allTickets .container .chat .chat-history .other-message {
    background: #19bfd3
}

.profileIndexTicket .allTickets .container .chat .chat-history .other-message:after {
    border-bottom-color: #19bfd3;
    right: auto;
    left: 1rem
}

.profileIndexTicket .allTickets .container .chat .chat-message {
    border-top: 1px solid #eee;
    padding: 10px
}

.profileIndexTicket .allTickets .container .chat .chat-message .messageData {
    position: relative
}

.profileIndexTicket .allTickets .container .chat .chat-message .messageData textarea {
    width: 100%;
    border: none;
    font-size: .8rem;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    resize: vertical;
    background: var(--back3-color)
}

.profileIndexTicket .allTickets .container .chat .chat-message .messageData span {
    position: absolute;
    bottom: 1rem;
    left: .5rem;
    background: #777;
    padding: .3rem .5rem;
    border-radius: 5px;
    font-weight: 300;
    font-size: .7rem;
    color: #fff
}

.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons {
    display: flex;
    gap: .5rem
}

.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button, .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons a {
    display: flex;
    gap: .5rem;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 300;
    background: var(--green-color);
    padding: .5rem 1rem;
    border-radius: 5px;
    position: relative
}

.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i, .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons a i {
    display: flex;
    justify-content: center;
    align-items: center
}

.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i svg, .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons a i svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button:last-child, .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons a:last-child {
    background: red
}

.profileIndexTicket .allTickets .container .align-left {
    justify-content: left;
    text-align: left
}

.profileIndexTicket .allTickets .container .float-left {
    float: left;
    text-align: left
}

.profileIndexTicket .sendFiles {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

.profileIndexTicket .sendFiles .sendPos {
    width: 40%;
    padding: 1rem;
    margin: auto;
    background: white;
    border-radius: .4rem;
    position: relative
}

.profileIndexTicket .sendFiles .sendPos .sendImage {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    box-shadow: 0 0 10px #0000000d;
    margin-top: 1rem
}

.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper {
    height: 100px;
    border: 1px solid #eee !important
}

.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .file-icon:before {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    visibility: hidden !important
}

.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .dropify-message {
    position: relative !important;
    top: auto !important;
    margin-top: 2rem
}

.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .dropify-message p {
    margin: 0;
    font-size: 1rem;
    font-family: irsans;
    color: #00800082
}

@media screen and (max-width: 700px) {
    .profileIndexTicket table tr {
        grid-gap: .5rem;
        padding: .5rem
    }

    .profileIndexTicket table tr th, .profileIndexTicket table tr td {
        font-size: .5rem
    }

    .profileIndexTicket table tr td svg {
        width: .7rem;
        height: .7rem
    }

    .profileIndexTicket table tr .buttons {
        display: block
    }

    .profileIndexTicket table tr .buttons a, .profileIndexTicket table tr .buttons button {
        font-size: .5rem
    }

    .profileIndexTicket .allTickets .container {
        display: block
    }

    .profileIndexTicket .allTickets .container .people-list {
        border-left: 0;
        width: 100%;
        border-bottom: 1px solid #eee
    }

    .profileIndexTicket .allTickets .container .chat {
        display: grid;
        background: white;
        color: #434651
    }

    .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons {
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-gap: .5rem
    }

    .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button {
        font-size: .7rem;
        padding: .5rem
    }

    .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i svg {
        width: .6rem;
        height: .6rem
    }

    .profileIndexTicket .sendFiles .sendPos {
        width: 90%
    }
}

.profileIndexTicket .popUp {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

.profileIndexTicket .popUp .popUpItem {
    width: 40%;
    margin: auto;
    background: var(--back1-color);
    border-radius: .4rem;
    position: relative;
    padding: 1rem
}

.profileIndexTicket .popUp .popUpItem .title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    text-align: center
}

.profileIndexTicket .popUp .popUpItem p {
    margin-top: .5rem;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    text-align: center
}

.profileIndexTicket .popUp .popUpItem .buttonsPop {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.profileIndexTicket .popUp .popUpItem .buttonsPop button {
    font-size: .9rem;
    padding: .3rem 1rem;
    border-radius: 5px;
    background: green;
    color: #fff
}

.profileIndexTicket .popUp .popUpItem .buttonsPop button:nth-child(2) {
    background: red
}

.profileIndexTicket .showTicket {
    background: rgba(0, 0, 0, .5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    overflow-y: scroll
}

.profileIndexTicket .showTicket .ticketData {
    width: 40%;
    margin: auto;
    background: var(--back1-color);
    border-radius: .4rem;
    position: relative;
    padding: 1rem
}

.profileIndexTicket .showTicket .ticketData .itemsAnswer {
    margin-top: 2rem
}

.profileIndexTicket .showTicket .ticketData h4 {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    margin-bottom: .5rem
}

.profileIndexTicket .showTicket .ticketData p {
    padding: .5rem;
    background: var(--back2-color);
    border-radius: 5px;
    font-size: .85rem;
    font-weight: 300;
    color: #000
}

.profileIndexTicket .showTicket .ticketData .buttonsPop {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 2rem
}

.profileIndexTicket .showTicket .ticketData .buttonsPop button {
    font-size: .9rem;
    padding: .3rem 1rem;
    border-radius: 5px;
    background: green;
    color: #fff
}

.profileIndexTicket .showTicket .ticketData .buttonsPop button:nth-child(2) {
    background: red
}

.allChargeIndex .chargeWidgets {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem
}

.allChargeIndex .chargeWidgets .WidgetItem {
    display: grid;
    grid-template-columns:auto 1fr;
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--back1-color);
    box-shadow: 0 0 10px #eee
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetIcon {
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetIcon svg {
    width: 4rem;
    height: 4rem
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject {
    position: relative;
    z-index: 5
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h4 {
    font-size: .9rem;
    color: #000;
    font-weight: 500
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h5 {
    font-size: .85rem;
    color: #000;
    opacity: .7;
    font-weight: 300;
    margin-top: .5rem
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h5 span {
    letter-spacing: .2px
}

.allChargeIndex .chargePrice {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--back1-color);
    box-shadow: 0 0 10px #eee;
    margin-top: 1rem
}

.allChargeIndex .chargePrice .right {
    display: grid;
    grid-template-columns:auto auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allChargeIndex .chargePrice .right label {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    letter-spacing: .5px
}

.allChargeIndex .chargePrice .right input {
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    height: 2.2rem;
    width: 20rem;
    transition: all .3s ease-in-out
}

.allChargeIndex .chargePrice .right input:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allChargeIndex .chargePrice .right button {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    padding: .3rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    height: 2.2rem
}

.allChargeIndex .chargePrice .left h4 {
    font-size: .85rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allChargeIndex table {
    margin-top: 1rem;
    background: var(--back1-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #eee;
    width: 100%
}

.allChargeIndex table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allChargeIndex table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allChargeIndex table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allChargeIndex table tr:nth-child(2n) {
    background: var(--back2-color)
}

.allTicketIndex {
    background: var(--back1-color);
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    padding: 1rem;
    margin: auto;
    margin-top: 1rem
}

.allTicketIndex h1 {
    font-size: 2rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-bottom: 1rem
}

.allTicketIndex .alert {
    background: rgba(255, 0, 0, .15);
    color: #790000;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allTicketIndex .success {
    background: rgba(0, 255, 0, .1);
    color: green;
    padding: 1rem;
    border-radius: .3rem;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .3px;
    margin: 1rem 0
}

.allTicketIndex .ticketButtons {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, auto));
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    grid-gap: 1rem
}

.allTicketIndex .ticketButtons button, .allTicketIndex .ticketButtons h4 {
    cursor: pointer;
    padding: .3rem 1rem;
    background: var(--green-color);
    font-size: .85rem;
    font-weight: 300;
    color: #fff;
    border-radius: 5px
}

.allTicketIndex .ticketButtons h4 {
    background: red
}

.allTicketIndex .tickets h3 {
    font-size: 2rem;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-bottom: 1rem
}

.allTicketIndex .tickets .items {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(30rem, 1fr));
    grid-gap: 1rem
}

.allTicketIndex .tickets .item {
    margin-bottom: 1rem
}

.allTicketIndex .tickets .item label {
    color: #000;
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .5rem;
    display: grid
}

.allTicketIndex .tickets .item select, .allTicketIndex .tickets .item input {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .9rem;
    width: 100%;
    font-weight: 300;
    transition: all .3s ease-in-out
}

.allTicketIndex .tickets .item select:focus, .allTicketIndex .tickets .item input:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

.allTicketIndex .tickets .item textarea {
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: .3rem;
    font-size: .7rem;
    width: 100%;
    height: 15rem;
    transition: all .3s ease-in-out;
    background: var(--back1-color);
    resize: vertical;
    outline: transparent
}

.allTicketIndex .tickets .item textarea:focus {
    box-shadow: 0 3px 8px #0000001a;
    border: 1px solid #19bfd3
}

@media screen and (max-width: 800px) {
    .allTicketIndex .tickets .items {
        display: block
    }
}

.allPageIndex {
    margin: auto;
    background: var(--back1-color);
    margin-top: 1rem;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 0 10px #0000000d
}

.allPageIndex h1 {
    padding-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--green-color);
    border-bottom: 4px dashed #eee;
    margin-bottom: 1rem;
    text-align: center
}

.allPageIndex .description p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2.25;
    border-radius: 10px
}

.allPageIndex .description .image {
    display: grid;
    justify-content: center
}

.allPageIndex .pageContainer {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem
}

.allPageIndex .pageContainer #map4 {
    z-index: 1
}

.allPageIndex .pageContainer .mapp-container {
    height: 20rem !important
}

.allTracking {
    margin: auto
}

.allTracking .trackingTitle {
    background: var(--green-color);
    margin-top: -3.5rem;
    padding-bottom: 2rem;
    padding-top: 5rem
}

.allTracking .trackingTitle h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: auto
}

.allTracking .trackingData {
    padding: 1rem;
    background: var(--back1-color);
    margin: auto;
    margin-top: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a
}

.allTracking .trackingData p {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .7;
    margin-bottom: 1rem
}

.allTracking .trackingData input {
    border: 1px solid #DFE3E7;
    padding: .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 500;
    width: 100%;
    transition: all .3s ease-in-out
}

.allTracking .trackingData input:focus {
    border: 1px solid var(--green-color)
}

.allTracking .trackingData .error {
    color: red;
    font-size: .9rem;
    font-weight: 300
}

.allTracking .trackingData .captchaQuick {
    display: grid;
    justify-items: center;
    margin-top: 1rem
}

.allTracking .trackingData .gatePay {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem 0;
    grid-gap: .5rem
}

.allTracking .trackingData .gatePay .gateItem {
    display: grid;
    justify-content: center;
    padding: .5rem;
    box-shadow: 0 0 10px #0000001a;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #eee;
    filter: grayscale(1);
    transition: all .3s ease-in-out
}

.allTracking .trackingData .gatePay .gateItem img {
    width: 3rem;
    height: 3rem;
    object-fit: contain
}

.allTracking .trackingData .gatePay .gateItem:hover {
    filter: grayscale(0)
}

.allTracking .trackingData .gatePay .active {
    border: 2px solid var(--green-color);
    filter: grayscale(0)
}

.allTracking .trackingData .trackingItems {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(25rem, 1fr));
    grid-gap: 1rem;
    margin-bottom: 1rem
}

.allTracking .trackingData .trackingItem label {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    opacity: .7;
    margin-bottom: .5rem;
    display: grid
}

.allTracking .trackingData .buttons {
    display: flex;
    justify-content: center
}

.allTracking .trackingData .buttons button {
    padding: .3rem .5rem;
    background: var(--green-color);
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    border-radius: 5px
}

@media screen and (max-width: 800px) {
    .allTracking .trackingData .trackingItems {
        display: block
    }
}

.allTracking .paymentData {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 1rem
}

.allTracking .payTracked {
    padding: 1rem;
    background: var(--back1-color);
    margin: auto;
    margin-top: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    display: none
}

.allTracking .payTracked .trackedTitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eee
}

.allTracking .payTracked table {
    background: var(--back1-color);
    border-radius: .3rem;
    box-shadow: 0 0 10px #0000000d;
    margin-top: 1rem;
    width: 100%
}

.allTracking .payTracked table tr {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(1px, 1fr));
    align-items: center;
    grid-gap: 1rem;
    padding: 1rem
}

.allTracking .payTracked table tr th {
    font-weight: 700;
    color: #000;
    font-size: .85rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center
}

.allTracking .payTracked table tr td {
    font-weight: 300;
    font-size: .85rem;
    text-align: center;
    color: #000
}

.allTracking .payTracked table tr td a {
    display: grid;
    align-items: center
}

.allTracking .payTracked table tr td .active {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    background: transparent
}

.allTracking .payTracked table tr td .active:before {
    border-radius: 10px;
    width: 10px;
    height: 10px;
    background-color: #00c58d;
    content: "";
    display: inline-block;
    margin-left: 10px
}

.allTracking .payTracked table tr td .unActive {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    align-items: center;
    background: transparent
}

.allTracking .payTracked table tr td .unActive:before {
    border-radius: 10px;
    width: 10px;
    height: 10px;
    background-color: #fc5c63;
    content: "";
    display: inline-block;
    margin-left: 10px
}

.allTracking .payTracked table tr .buttons {
    display: grid;
    grid-template-columns:auto auto auto;
    grid-gap: .5rem
}

.allTracking .payTracked table tr .buttons button {
    padding: .3rem;
    border-radius: 5px;
    background: red;
    color: #fff;
    font-size: .8rem
}

.allTracking .payTracked table tr .buttons a {
    font-size: .8rem;
    padding: .3rem;
    border-radius: 5px;
    background: green;
    color: #fff
}

.allTracking .payTracked table tr .buttons a:nth-child(2) {
    background: orange
}

.allTracking .payTracked table tr:nth-child(2n) {
    background: #eee
}

@media screen and (max-width: 700px) {
    .allTracking .payTracked table tbody {
        overflow-x: scroll;
        width: 19rem;
        display: grid
    }

    .allTracking .payTracked table tbody tr {
        padding: .5rem;
        grid-gap: .5rem;
        grid-template-columns:repeat(7, auto)
    }

    .allTracking .payTracked table tbody tr td, .allTracking .payTracked table tbody tr th {
        font-size: .7rem;
        font-weight: 300;
        min-width: 8rem
    }
}

.allFastSearch {
    border: 1px solid #eee;
    border-radius: 10px;
    margin: auto;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d
}

.allFastSearch .titleFastSearch {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    padding: 1rem
}

.allFastSearch .taxChoice {
    margin-top: 1rem
}

.allFastSearch .taxChoice .title1 {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #000
}

.allFastSearch .taxChoice .buttons {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: center;
    grid-gap: 1rem;
    align-items: center;
    margin-top: .5rem
}

.allFastSearch .taxChoice .buttons button {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    padding: .3rem 1rem;
    border-radius: 5rem
}

.allFastSearch .taxChoice .buttons button:first-child {
    background: red
}

.allFastSearch .taxChoice .buttons button:last-child {
    background: var(--green-color)
}

.allFastSearch .taxChoice .buttons button[disabled] {
    opacity: .6
}

.allFastSearch .taxChoice .categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem
}

.allFastSearch .taxChoice .categories .cat, .allFastSearch .taxChoice .categories .brand {
    border: 2px solid #eee;
    padding: .3rem 1rem;
    border-radius: 5rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 300;
    color: #000
}

.allFastSearch .taxChoice .categories .active {
    border: 2px solid var(--green-color)
}

.allFastSearch .productShow {
    display: grid;
    grid-template-columns:1fr 2fr;
    border-top: 2px solid #eee;
    margin-top: 1rem
}

.allFastSearch .productShow .rightProduct {
    border-left: 2px solid #eee;
    padding: 1rem;
    box-shadow: inset 0 0 10px #0000001a
}

.allFastSearch .productShow .rightProduct .title1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-color);
    text-align: center
}

.allFastSearch .productShow .rightProduct .productItem .productPic {
    margin: .5rem 0
}

.allFastSearch .productShow .rightProduct .productItem .productPic img {
    width: 100%;
    object-fit: contain;
    height: 15rem
}

.allFastSearch .productShow .rightProduct .productItem h4 {
    font-size: .9rem;
    color: #000;
    text-align: center;
    height: 3.2rem;
    font-weight: 300;
    line-height: 1.7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allFastSearch .productShow .rightProduct .productItem .price {
    display: flex;
    justify-content: left;
    grid-gap: .5rem;
    margin: .5rem 0
}

.allFastSearch .productShow .rightProduct .productItem .price s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allFastSearch .productShow .rightProduct .productItem .price h5 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.allFastSearch .productShow .rightProduct .productItem .buttons {
    display: grid;
    grid-template-columns:1fr 1fr;
    align-items: center;
    grid-gap: 1rem
}

.allFastSearch .productShow .rightProduct .productItem .buttons div {
    padding: .2rem;
    border-radius: 5rem;
    font-size: .9rem;
    font-weight: 300;
    background: var(--green-color);
    border: 2px solid var(--green-color);
    color: #fff;
    opacity: .7;
    text-align: center
}

.allFastSearch .productShow .rightProduct .productItem .buttons div:last-child {
    background: var(--back1-color);
    color: #000;
    border: 2px solid #eee
}

.allFastSearch .productShow .rightProduct .productItem .buttons div:hover {
    opacity: 1
}

.allFastSearch .productShow .leftProduct h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-top: 1rem;
    border-bottom: 2px dashed #eee;
    padding-bottom: 1rem
}

.allFastSearch .productShow .leftProduct .owl-carousel.owl-loaded {
    display: grid !important
}

.allFastSearch .productShow .leftProduct button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allFastSearch .productShow .leftProduct button.owl-prev span {
    font-size: 2.5rem
}

.allFastSearch .productShow .leftProduct button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allFastSearch .productShow .leftProduct button.owl-next span {
    font-size: 2.5rem
}

.allFastSearch .productShow .leftProduct .owl-dots {
    position: absolute
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem {
    display: grid;
    padding: 1rem;
    border-left: 1px solid #eee
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .productPic {
    margin: .5rem 0
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .productPic img {
    width: 100%;
    object-fit: contain;
    height: 14rem
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem h4 {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    text-align: center;
    height: 3.2rem;
    line-height: 1.7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .price {
    display: flex;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    margin: .5rem 0
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .price s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .price h5 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: left;
    align-items: center;
    grid-gap: .5rem;
    font-size: 16px;
    font-weight: 900;
    color: #000
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .price h5:after {
    content: "︎";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: normal;
    font-family: digikala;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-sizing: inherit
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons {
    display: grid;
    grid-template-columns:1fr 1fr;
    align-items: center;
    grid-gap: 1rem
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons div {
    padding: .2rem;
    border-radius: 5rem;
    font-size: .9rem;
    font-weight: 300;
    background: var(--green-color);
    border: 2px solid var(--green-color);
    color: #fff;
    text-align: center;
    opacity: .7
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons div:last-child {
    background: var(--back1-color);
    color: #000;
    border: 2px solid #eee
}

.allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons div:hover {
    opacity: 1
}

@media screen and (max-width: 800px) {
    .allFastSearch .titleFastSearch {
        font-size: 1rem;
        font-weight: 500;
        padding: .5rem
    }

    .allFastSearch .productShow {
        grid-template-columns:1fr 1fr
    }

    .allFastSearch .productShow .rightProduct {
        padding: 0 .5rem
    }

    .allFastSearch .productShow .rightProduct h3 {
        font-size: .8rem;
        font-weight: 500;
        text-align: center;
        margin-top: 1rem;
        border-bottom: 2px dashed #eee;
        padding-bottom: 1rem
    }

    .allFastSearch .productShow .rightProduct .productItem .productPic img {
        height: 10rem
    }

    .allFastSearch .productShow .rightProduct .productItem h4 {
        font-size: .8rem;
        height: 3rem
    }

    .allFastSearch .productShow .rightProduct .productItem .price {
        margin: 1rem 0
    }

    .allFastSearch .productShow .rightProduct .productItem .buttons {
        grid-gap: .5rem
    }

    .allFastSearch .productShow .rightProduct .productItem .buttons div {
        font-size: .7rem
    }

    .allFastSearch .productShow .leftProduct h3 {
        font-size: .8rem;
        font-weight: 500
    }

    .allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .productPic img {
        height: 10rem
    }

    .allFastSearch .productShow .leftProduct .slider-fastSearch .productItem h4 {
        font-size: .8rem;
        height: 3rem
    }

    .allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .price {
        margin: 1rem 0
    }

    .allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons {
        grid-gap: .5rem
    }

    .allFastSearch .productShow .leftProduct .slider-fastSearch .productItem .buttons div {
        font-size: .7rem
    }
}

.allTextIndex {
    margin-top: 2rem;
    padding: 2rem 0;
    transition: all .8s ease-in-out
}

.allTextIndex p {
    display: flex;
    align-items: baseline;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    text-align: center
}

.allTextIndex p span {
    padding-right: 30px;
    animation: textAnime 5s linear infinite;
    animation-duration: 6s
}

@-webkit-keyframes textAnime {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(100%)
    }
}

@keyframes textAnime {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(100%)
    }
}

@media screen and (max-width: 920px) {
    .allTextIndex {
        padding: 1rem 0
    }

    .allTextIndex h3 {
        font-size: .8rem
    }
}

.allSliderIndex {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    position: relative;
    overflow: hidden
}

.allSliderIndex .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem
}

.allSliderIndex .title .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-color);
    background: var(--widget-color);
    padding: 1rem;
    z-index: 2
}

.allSliderIndex .title a {
    font-size: 1rem;
    font-weight: 500;
    color: gray;
    background: var(--widget-color);
    position: relative;
    padding: 1rem;
    z-index: 2
}

.allSliderIndex .title:before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1.5px;
    background: #000;
    width: 100%;
    z-index: 1;
    opacity: .05
}

.allSliderIndex .owl-carousel.owl-loaded {
    display: grid !important
}

.allSliderIndex button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSliderIndex button.owl-prev span {
    font-size: 2.5rem
}

.allSliderIndex button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSliderIndex button.owl-next span {
    font-size: 2.5rem
}

.allSliderIndex .owl-dots {
    position: absolute
}

.allSliderIndex .slider-products .owl-item {
    padding: .5rem
}

.allSliderIndex .slider-products a {
    display: grid;
    position: relative;
    overflow: hidden;
    min-height: 22.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000004d
}

.allSliderIndex .slider-products a .pic {
    display: grid;
    justify-content: center;
    padding: 0 1rem;
    position: relative
}

.allSliderIndex .slider-products a .pic img {
    width: 100%;
    height: 9rem;
    margin-top: 1rem;
    object-fit: contain;
    transition: all .3s ease-in-out
}

.allSliderIndex .slider-products a .pic img:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0
}

.allSliderIndex .slider-products a .title2 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: center;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: all .3s ease-in-out
}

.allSliderIndex .slider-products a .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    padding: 1rem;
    position: relative
}

.allSliderIndex .slider-products a .price s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allSliderIndex .slider-products a .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: var(--green-color)
}

.allSliderIndex .slider-products a .price:before {
    content: "";
    position: absolute;
    left: 0;
    height: 1.5rem;
    width: .5rem;
    background: var(--green-color);
    border-radius: 0 20px 20px 0
}

.allSliderIndex .slider-products a .addCartSlide {
    position: absolute;
    bottom: -10rem;
    right: 0;
    left: 0;
    padding: .8rem;
    background: var(--back1-color);
    opacity: 0;
    transition: all .3s ease-in-out;
    border-top: 1px solid #eee
}

.allSliderIndex .slider-products a .addCartSlide .showAddData {
    background: var(--green-color);
    border-radius: 10px;
    padding: .5rem;
    box-shadow: 0 5px 5px #0000004d
}

.allSliderIndex .slider-products a .addCartSlide .showAddData .adds {
    margin-bottom: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #fff
}

.allSliderIndex .slider-products a .addCartSlide .showAddData .adds button {
    background: white;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    align-items: center;
    justify-content: center;
    color: #000;
    border-radius: 5px
}

.allSliderIndex .slider-products a .addCartSlide .showAddData .addData {
    display: flex;
    justify-content: center;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    font-weight: 300;
    color: #fff
}

.allSliderIndex .slider-products a .addCartSlide .showAddData .addData i {
    display: grid;
    align-items: center
}

.allSliderIndex .slider-products a .addCartSlide .showAddData .addData i svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allSliderIndex .slider-products a .emptyProduct:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .3)
}

.allSliderIndex .slider-products a .emptyProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: red;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "ناموجود";
    box-shadow: 0 0 10px #0000004d
}

.allSliderIndex .slider-products a:hover .pic img {
    opacity: 0
}

.allSliderIndex .slider-products a:hover .pic img:nth-child(2) {
    opacity: 1
}

.allSliderIndex .slider-products a:hover h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.allSliderIndex .slider-products a:hover .addCartSlide {
    bottom: 0;
    opacity: 1
}

@media screen and (max-width: 800px) {
    .allSliderIndex .slider-products a {
        min-height: auto
    }

    .allSliderIndex .slider-products a .pic img {
        height: 8rem !important
    }

    .allSliderIndex .slider-products a .title2 {
        font-size: .85rem
    }

    .allSliderIndex .slider-products a .price s {
        font-size: .6rem
    }

    .allSliderIndex .slider-products a .price .price1 {
        font-size: .75rem
    }
}

.allSliderIndex2 {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    position: relative;
    overflow: hidden
}

.allSliderIndex2 .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem
}

.allSliderIndex2 .title .title1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-color);
    background: var(--widget-color);
    padding: 1rem;
    z-index: 2
}

.allSliderIndex2 .title a {
    font-size: 1rem;
    font-weight: 500;
    color: gray;
    background: var(--widget-color);
    position: relative;
    padding: 1rem;
    z-index: 2
}

.allSliderIndex2 .title:before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1.5px;
    background: #000;
    width: 100%;
    z-index: 1;
    opacity: .05
}

.allSliderIndex2 .owl-carousel.owl-loaded {
    display: grid !important
}

.allSliderIndex2 button.owl-prev {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0
}

.allSliderIndex2 button.owl-prev span {
    font-size: 2.5rem
}

.allSliderIndex2 button.owl-next {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0
}

.allSliderIndex2 button.owl-next span {
    font-size: 2.5rem
}

.allSliderIndex2 .owl-dots {
    position: absolute
}

.allSliderIndex2 .slider-products .owl-item {
    padding: .5rem
}

.allSliderIndex2 .slider-products a {
    display: grid;
    position: relative;
    overflow: hidden;
    min-height: 22.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px lightgrey;
    border-radius: 15px;
}

.allSliderIndex2 .slider-products a .pic {
    display: grid;
    justify-content: center;
    padding: 0 1rem;
    position: relative
}

.allSliderIndex2 .slider-products a .pic img {
    width: 100%;
    height: 9rem;
    margin-top: 1rem;
    object-fit: contain;
    transition: all .3s ease-in-out
}

.allSliderIndex2 .slider-products a .pic img:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0
}

.allSliderIndex2 .slider-products a .title2 {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1.7rem;
    text-align: center;
    margin: .8rem .5rem;
    height: 3.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: all .3s ease-in-out
}

.allSliderIndex2 .slider-products a .prices {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: .5rem;
    height: 5.5rem;
    padding: 1rem
}

.allSliderIndex2 .slider-products a .prices i {
    display: grid;
    background: var(--green-color);
    border-radius: 5px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px #0000001a
}

.allSliderIndex2 .slider-products a .prices i svg {
    fill: #fff;
    width: 1rem;
    height: 1rem
}

.allSliderIndex2 .slider-products a .prices .price {
    position: relative
}

.allSliderIndex2 .slider-products a .prices .price .offPrice {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem
}

.allSliderIndex2 .slider-products a .prices .price .offPrice s {
    font-size: .8rem;
    font-weight: 500;
    color: #000;
    opacity: .6
}

.allSliderIndex2 .slider-products a .prices .price .offPrice span {
    font-size: .7rem;
    font-weight: 300;
    color: #fff;
    background: red;
    padding: .1rem .3rem;
    border-radius: 5px
}

.allSliderIndex2 .slider-products a .prices .price .price1 {
    font-size: 1rem;
    font-weight: 900;
    color: #000
}

.allSliderIndex2 .slider-products a .addCartSlide {
    position: absolute;
    bottom: -10rem;
    right: 0;
    left: 0;
    padding: .8rem;
    background: var(--back1-color);
    opacity: 0;
    transition: all .3s ease-in-out;
    border-top: 1px solid #eee
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData {
    background: var(--green-color);
    border-radius: 10px;
    padding: .5rem;
    box-shadow: 0 5px 5px #0000004d
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData .adds {
    margin-bottom: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #fff
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData .adds button {
    background: white;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    align-items: center;
    justify-content: center;
    color: #000;
    border-radius: 5px
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData .addData {
    display: flex;
    justify-content: center;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    font-weight: 300;
    color: #fff
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData .addData i {
    display: grid;
    align-items: center
}

.allSliderIndex2 .slider-products a .addCartSlide .showAddData .addData i svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allSliderIndex2 .slider-products a .emptyProduct:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .3)
}

.allSliderIndex2 .slider-products a .emptyProduct:before {
    z-index: 30;
    height: 2.5rem;
    width: 100%;
    background: red;
    color: #fff;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 1rem;
    content: "ناموجود";
    box-shadow: 0 0 10px #0000004d
}

.allSliderIndex2 .slider-products a:hover .pic img {
    opacity: 0
}

.allSliderIndex2 .slider-products a:hover .pic img:nth-child(2) {
    opacity: 1
}

.allSliderIndex2 .slider-products a:hover .addCartSlide {
    bottom: 0;
    opacity: 1
}

.allSliderIndex2 .slider-products a:before {
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(to left, var(--back1-color), var(--back1-color), var(--green-color), var(--back1-color), var(--back1-color))
}

@media screen and (max-width: 800px) {
    .allSliderIndex2 .slider-products a {
        min-height: auto
    }

    .allSliderIndex2 .slider-products a .pic img {
        height: 8rem !important
    }

    .allSliderIndex2 .slider-products a .title2 {
        font-size: .85rem
    }

    .allSliderIndex2 .slider-products a .prices i {
        width: 1.5rem;
        height: 1.5rem
    }

    .allSliderIndex2 .slider-products a .prices .price .offPrice s {
        font-size: .6rem
    }

    .allSliderIndex2 .slider-products a .prices .price .offPrice span {
        font-size: .65rem
    }

    .allSliderIndex2 .slider-products a .prices .price .price1 {
        font-size: .8rem
    }
}

.allCategoryIndex {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: #E0ECF2;
    display: grid
}

.allCategoryIndex .title {
    display: grid
}

.allCategoryIndex .title .title1 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #000;
    z-index: 2;
    display: grid;
    background: var(--back1-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin: 1rem
}

.allCategoryIndex .title:after {
    content: "";
    margin: -20px 2rem 3px;
    background-color: var(--back1-color);
    opacity: .5;
    border-radius: 0 0 8px 8px;
    z-index: 1
}

.allCategoryIndex .catItems {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr));
    grid-gap: 1rem;
    margin: 1rem
}

.allCategoryIndex .catItems .item {
    background: var(--back1-color);
    border-radius: 10px;
    display: grid;
    grid-template-columns:1fr auto;
    grid-gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    position: relative
}

.allCategoryIndex .catItems .item .rightCat .title2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 1rem
}

.allCategoryIndex .catItems .item .rightCat a {
    background: var(--red-color);
    margin-top: 1rem;
    padding: .2rem 1rem;
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    border-radius: 5px
}

.allCategoryIndex .catItems .item .leftCat img {
    width: 5rem;
    height: 5rem;
    object-fit: contain
}

.allCategoryIndex .catItems .item:after {
    content: "";
    background: var(--green-color);
    border-radius: 8px 8px 0 0;
    position: absolute;
    top: -5px;
    height: 5px;
    right: 1rem;
    left: 1rem;
    margin: auto
}

.allCategoryIndex .catItems .item:before {
    content: "";
    background: var(--green-color);
    border-radius: 0 0 8px 8px;
    position: absolute;
    bottom: -5px;
    height: 5px;
    right: 1rem;
    left: 1rem;
    margin: auto
}

.allAdsIndex2 {
    margin: auto;
    margin-top: 2rem
}

.allAdsIndex2 .title {
    display: grid
}

.allAdsIndex2 .title .title1 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #000;
    z-index: 2;
    display: grid;
    background: var(--back1-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin: 1rem 0;
    box-shadow: 0 5px 10px #0000001a
}

.allAdsIndex2 .title:after {
    content: "";
    margin: -20px 2rem 5px;
    background-color: var(--green-color);
    opacity: .1;
    border-radius: 0 0 8px 8px;
    z-index: 1
}

.allAdsIndex2 .adsItems {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allAdsIndex2 .adsItems .adsItem img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media screen and (max-width: 700px) {
    .allAdsIndex2 .adsItems {
        grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
        grid-gap: 1rem
    }
}

.allAboutIndex {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    background: #E0ECF2;
    display: grid;
    padding: 1rem;
    grid-template-columns:1fr 30rem;
    grid-gap: 1rem
}

.allAboutIndex .rightAbout .top {
    background: var(--widget-color);
    border-radius: 10px;
    box-shadow: 0 0 10px #0000001a;
    padding: 1rem
}

.allAboutIndex .rightAbout .top .title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--green-color);
    margin-bottom: 1rem;
    text-shadow: 0 2px 1px rgba(0, 0, 0, .6)
}

.allAboutIndex .rightAbout .top p {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 2rem
}

.allAboutIndex .rightAbout .bottom {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: 1rem;
    margin-top: 1rem
}

.allAboutIndex .rightAbout .bottom a {
    display: grid;
    align-items: center
}

.allAboutIndex .rightAbout .bottom img {
    border-radius: 10px;
    overflow: hidden
}

.allAboutIndex .leftAbout img {
    width: 100%;
    max-height: 30rem;
    object-fit: contain
}

@media screen and (max-width: 700px) {
    .allAboutIndex {
        display: flex;
        flex-wrap: wrap-reverse
    }
}

.allFilterProduct {
    background: #E0ECF2;
    padding: 5px;
    margin: auto;
    border-radius: 10px;
    margin-top: 3rem
}

.allFilterProduct .filters {
    display: grid;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allFilterProduct .filters .title1 {
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    text-align: center
}

.allFilterProduct .filters .items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.allFilterProduct .filters .items .item {
    font-size: 1rem;
    font-weight: 300;
    background: var(--widget-color);
    color: #000;
    border-radius: 5px;
    padding: .2rem 1rem;
    cursor: pointer
}

.allFilterProduct .filters .items .active {
    background: var(--green-color);
    color: #fff
}

.allFilterProduct .filters .optionFilter .active {
    background: var(--red-color)
}

@media screen and (max-width: 700px) {
    .allFilterProduct .filters {
        display: block
    }

    .allFilterProduct .filters .title1 {
        font-size: 1.2rem
    }

    .allFilterProduct .filters .items {
        margin-top: 1rem
    }

    .allFilterProduct .filters .items .item {
        font-size: .8rem;
        padding: .2rem .5rem
    }
}

.allFilterProduct .products {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 5px;
    margin-top: 1rem
}

.allFilterProduct .products .productItems {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 5px
}

.allFilterProduct .products .productItems .product {
    background: var(--widget-color);
    display: grid;
    padding: .5rem;
    border-radius: 5px;
    transition: all .3s ease-in-out
}

.allFilterProduct .products .productItems .product .title {
    font-size: .8rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allFilterProduct .products .productItems .product .price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--green-color);
    text-align: center;
    margin-top: .5rem
}

.allFilterProduct .products .productItems .product:hover {
    box-shadow: inset 0 0 6px #00000080
}

.allFilterProduct .products .center .product {
    background: var(--widget-color);
    display: grid;
    padding: .5rem;
    border-radius: 5px;
    height: 100%
}

.allFilterProduct .products .center .product .title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.allFilterProduct .products .center .product .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-color);
    text-align: center;
    margin-top: .5rem
}

.allFilterProduct .products .center .product:hover {
    box-shadow: inset 0 0 6px #00000080
}

.allHorizonProduct {
    border-radius: 10px;
    margin: auto;
    margin-top: 3rem;
    padding: 1rem;
    background: var(--widget-color);
    box-shadow: 0 0 10px #0000000d;
    position: relative
}

.allHorizonProduct .title .title1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
    text-align: center
}

.allHorizonProduct .title .items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.allHorizonProduct .title .items .item {
    font-size: 1rem;
    font-weight: 300;
    background: #E0ECF2;
    color: #000;
    border-radius: 5px;
    padding: .2rem 1rem;
    cursor: pointer
}

.allHorizonProduct .title .items .active {
    background: var(--green-color);
    color: #fff
}

.allHorizonProduct .products {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr));
    grid-gap: 1rem;
    margin-top: 2rem
}

.allHorizonProduct .products .item {
    background: #E0ECF2;
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    grid-gap: 1rem;
    padding: .5rem;
    border-radius: 5px
}

.allHorizonProduct .products .item figure {
    background: var(--widget-color);
    border-radius: 5px;
    overflow: hidden
}

.allHorizonProduct .products .item figure img {
    width: 8rem;
    height: 8rem;
    object-fit: contain
}

.allHorizonProduct .products .item .detail .title2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .5rem
}

.allHorizonProduct .products .item .detail .title3 {
    font-size: .9rem;
    opacity: .6;
    font-weight: 300;
    color: #000;
    margin-bottom: .5rem
}

.allHorizonProduct .products .item .detail .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-color)
}

.allHorizonProduct .products .item i {
    display: grid;
    align-items: center;
    justify-content: center;
    background: var(--widget-color);
    padding: .5rem;
    border-radius: 5px;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--widget-color);
    transition: all .3s ease-in-out
}

.allHorizonProduct .products .item i svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: all .3s ease-in-out;
    fill: var(--green-color)
}

.allHorizonProduct .products .item:hover i {
    border: 1px solid var(--green-color);
    transform: translateY(-10px)
}

.allHorizonProduct .products .item:hover i svg {
    width: 2rem;
    height: 2rem
}

@media screen and (max-width: 700px) {
    .allHorizonProduct .title .title1 {
        font-size: 1.3rem
    }

    .allHorizonProduct .title .items {
        margin-top: 1rem
    }

    .allHorizonProduct .title .items .item {
        font-size: .8rem;
        padding: .2rem .5rem
    }

    .allHorizonProduct .products {
        display: flex;
        grid-gap: .5rem;
        flex-direction: column
    }

    .allHorizonProduct .products .item {
        grid-gap: .5rem
    }

    .allHorizonProduct .products .item figure img {
        width: 4rem;
        height: 4rem
    }

    .allHorizonProduct .products .item .detail .title2 {
        font-size: .8rem
    }

    .allHorizonProduct .products .item .detail .title3, .allHorizonProduct .products .item .detail .price {
        font-size: .7rem
    }

    .allHorizonProduct .products .item i {
        width: 2rem;
        height: 2rem
    }

    .allHorizonProduct .products .item i svg {
        width: 1rem;
        height: 1rem
    }

    .allHorizonProduct .products .item:hover i svg {
        width: 1rem;
        height: 1rem
    }
}

.allQuickBuy {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    display: none;
    overflow-y: scroll
}

.allQuickBuy .quickBuy {
    background: var(--back1-color);
    padding: .5rem 1rem 1rem;
    width: 50%;
    margin: auto;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none
}

.allQuickBuy .quickBuy .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #eee;
    padding-bottom: .5rem;
    margin-bottom: .5rem
}

.allQuickBuy .quickBuy .title .title1 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allQuickBuy .quickBuy .title i {
    display: grid;
    align-items: center;
    cursor: pointer
}

.allQuickBuy .quickBuy .title i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allQuickBuy .quickBuy .productQuick {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap: 1rem;
    align-items: center
}

.allQuickBuy .quickBuy .productQuick .pic {
    display: grid;
    padding: .5rem;
    box-shadow: 0 0 10px #0000000d;
    border-radius: 10px
}

.allQuickBuy .quickBuy .productQuick .pic img {
    width: 8rem;
    height: 8rem;
    object-fit: contain
}

.allQuickBuy .quickBuy .productQuick .description .title2 {
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd {
    display: grid;
    grid-template-columns:7rem 1fr;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd select {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch input {
    display: none
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .swatch-element {
    float: right;
    margin: 5px 8px 0 0;
    position: relative
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .color label {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid;
    cursor: pointer;
    height: 42px;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 42px
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .color label span {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 26px;
    position: relative;
    width: 26px
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .color label span:after {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allQuickBuy .quickBuy .productQuick .description .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allQuickBuy .quickBuy .productQuick .description .countQuick {
    display: grid;
    grid-template-columns:7rem 1fr auto;
    align-items: center;
    grid-gap: .5rem
}

.allQuickBuy .quickBuy .productQuick .description output {
    font-size: .8rem;
    font-weight: 300;
    color: var(--green-color)
}

.allQuickBuy .quickBuy .addressQuick {
    margin-top: 1rem
}

.allQuickBuy .quickBuy .addressQuick .itemAddress {
    display: grid;
    grid-template-columns:10rem 1fr;
    align-items: center;
    grid-gap: .5rem
}

.allQuickBuy .quickBuy .addressQuick .itemAddress label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allQuickBuy .quickBuy .addressQuick .itemAddress input {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allQuickBuy .quickBuy .optionAdd {
    display: grid;
    grid-template-columns:9rem 1fr;
    align-items: center;
    grid-gap: 1rem;
    margin-top: 1rem
}

.allQuickBuy .quickBuy .optionAdd label {
    font-size: .9rem;
    font-weight: 500;
    color: #000
}

.allQuickBuy .quickBuy .optionAdd select {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allQuickBuy .quickBuy .optionAdd .swatch input {
    display: none
}

.allQuickBuy .quickBuy .optionAdd .swatch .swatch-element {
    float: right;
    margin: 5px 8px 0 0;
    position: relative
}

.allQuickBuy .quickBuy .optionAdd .swatch .color label {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid;
    cursor: pointer;
    height: 42px;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 42px
}

.allQuickBuy .quickBuy .optionAdd .swatch .color label span {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 26px;
    position: relative;
    width: 26px
}

.allQuickBuy .quickBuy .optionAdd .swatch .color label span:after {
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTIgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIzMS4wMDAwMDAsIC0xMzAyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM0LjUyMTE2LDU5LjM5NTUzMDcgTDEyMzcuNTQ4NDgsNjMuOTM2NzE1OCBMMTI0NS45MjIyNSw1OC4zNTM5MTk4IEwxMjQ0Ljk3NzczLDU2LjkzNjcxNTggTDEyMzguMDIxMTYsNjEuNTc0NTY3MSBMMTIzNS45MzgzNyw1OC40NTA1ODYxIEwxMjM1LjkzODM3LDU4LjQ1MDU4NjEgWiIgaWQ9ImZhamZrYSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI0MC4yMjE3MDYsIDYwLjQzNjcxNikgcm90YXRlKC0xMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI0MC4yMjE3MDYsIC02MC40MzY3MTYpIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center center;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.allQuickBuy .quickBuy .optionAdd .swatch .color input:checked + label span:after {
    opacity: 1
}

.allQuickBuy .quickBuy .optionAdd .swatch input:not(:checked) + label {
    border-color: #edeff2 !important
}

.allQuickBuy .quickBuy .optionAdd .crossed-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allQuickBuy .quickBuy .optionAdd .swatch .tooltip {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    background-color: #16161aed;
    color: #fff;
    bottom: 100%;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100px;
    left: -23px;
    margin-bottom: 15px;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, .28);
    box-shadow: 2px 2px 6px #00000047;
    z-index: 10000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.allQuickBuy .quickBuy .optionAdd .swatch .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.allQuickBuy .quickBuy .optionAdd .swatch .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid rgba(22, 22, 26, .93) 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0
}

.allQuickBuy .quickBuy .optionAdd .swatch .swatch-element:hover .tooltip {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0)
}

.allQuickBuy .quickBuy .captchaQuick {
    display: grid;
    margin-top: 1rem;
    justify-content: center
}

.allQuickBuy .quickBuy .buyFast {
    margin-top: 1rem;
    padding-top: 1rem;
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    grid-gap: 1rem;
    border-top: 2px dashed #eee
}

.allQuickBuy .quickBuy .buyFast .right .title3 {
    font-size: .8rem;
    font-weight: 300;
    color: #707070
}

.allQuickBuy .quickBuy .buyFast .right .title3 span {
    font-size: .8rem;
    font-weight: 300;
    opacity: .8;
    color: #000
}

.allQuickBuy .quickBuy .buyFast .right .title4 {
    font-size: .8rem;
    font-weight: 300;
    color: #707070;
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem;
    margin-top: .5rem
}

.allQuickBuy .quickBuy .buyFast .right .title4 span {
    font-size: 1rem;
    font-weight: 300;
    color: var(--green-color);
    display: grid;
    grid-template-columns:auto auto;
    justify-content: right;
    align-items: center;
    grid-gap: .5rem
}

.allQuickBuy .quickBuy .buyFast .left button {
    padding: .3rem 1rem;
    font-size: .85rem;
    border-radius: 5px;
    font-weight: 300;
    color: #fff;
    background: var(--green-color)
}

@media screen and (max-width: 800px) {
    .allQuickBuy .quickBuy {
        width: 98%;
        left: 0;
        top: 0;
        transform: none;
        right: 0;
        margin-top: 0
    }

    .allQuickBuy .quickBuy .productQuick {
        grid-template-columns:1fr
    }

    .allQuickBuy .quickBuy .productQuick .pic {
        justify-content: center
    }

    .allQuickBuy .quickBuy .buyFast {
        grid-template-columns:1fr
    }

    .allQuickBuy .quickBuy .buyFast .left {
        display: grid
    }
}

.allCounseling {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: hsla(0, 0%, 52.9%, .5);
    z-index: 999;
    display: none;
    overflow-y: scroll
}

.allCounseling .counselingFast {
    background: var(--back1-color);
    padding: .5rem 1rem 1rem;
    width: 50%;
    margin: auto;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none
}

.allCounseling .counselingFast .title {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #eee;
    padding-bottom: .5rem;
    margin-bottom: .5rem
}

.allCounseling .counselingFast .title .title2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000
}

.allCounseling .counselingFast .title i {
    display: grid;
    align-items: center;
    cursor: pointer
}

.allCounseling .counselingFast .title i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000
}

.allCounseling .counselingFast .counselingTitleProduct {
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    background: #eee;
    border-radius: 5px;
    padding: .5rem
}

.allCounseling .counselingFast .counselingFastData {
    margin-top: 1rem
}

.allCounseling .counselingFast .counselingFastData label {
    font-size: .9rem;
    font-weight: 500;
    color: #000;
    margin-bottom: .5rem;
    display: grid
}

.allCounseling .counselingFast .counselingFastData input, .allCounseling .counselingFast .counselingFastData textarea {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .4rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .8rem;
    width: 100%;
    transition: all .3s ease-in-out;
    resize: vertical;
    outline: transparent
}

.allCounseling .counselingFast .captchaQuick {
    display: grid;
    margin-top: 1rem;
    justify-content: center
}

.allCounseling .counselingFast button {
    background: var(--green-color);
    color: #fff;
    font-size: .8rem;
    font-weight: 300;
    padding: .3rem 1rem;
    border-radius: 5px;
    margin-top: 1rem
}

@media screen and (max-width: 800px) {
    .allCounseling .counselingFast {
        width: 98%
    }
}

.allFloatBtn a {
    color: #fff;
    display: flex;
    align-items: center
}

.allFloatBtn .social {
    position: fixed;
    bottom: 1rem;
    left: 0;
    z-index: 5;
    width: 4rem
}

.allFloatBtn .social ul {
    padding: 0
}

.allFloatBtn .social ul li {
    display: block;
    margin: 5px;
    background: #001736;
    box-shadow: 0 0 10px #0000004d;
    width: 320px;
    text-align: right;
    padding: 7px;
    -webkit-border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    border-radius: 0 30px 30px 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.allFloatBtn .social ul li i {
    margin-left: 22px;
    padding: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background: #ffffff;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0)
}

.allFloatBtn .social ul li i svg {
    width: 1rem;
    height: 1rem;
    fill: #001736
}

.allFloatBtn .social ul li:hover {
    -webkit-transform: translate(110px, 0);
    -moz-transform: translate(110px, 0);
    -ms-transform: translate(110px, 0);
    -o-transform: translate(110px, 0);
    transform: translate(110px);
    background: var(--back1-color)
}

.allFloatBtn .social ul li:hover i {
    color: #fff;
    background: var(--green-color);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}

.allFloatBtn .social ul li:hover i svg {
    fill: #fff
}

.allFloatBtn .social ul li:hover a {
    color: #000
}

@media screen and (max-width: 700px) {
    .allFloatBtn {
        display: none
    }
}

.allChatIndex {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 3
}

.allChatIndex .allChatIndexBlock {
    position: relative
}

.allChatIndex .allChatIndexBlock .chatButton {
    background: var(--green-color);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0 0 10px #0003
}

.allChatIndex .allChatIndexBlock .chatButton i {
    display: grid;
    align-items: center;
    justify-content: center
}

.allChatIndex .allChatIndexBlock .chatButton i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff
}

.allChatIndex .allChatIndexBlock .chatContents {
    position: absolute;
    bottom: calc(100% + 20px);
    right: 0;
    display: none
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent {
    border: 1px solid var(--green-color);
    border-radius: 5px;
    overflow: hidden;
    background: var(--back1-color);
    width: 23rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--green-color)
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .header .title2 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .header .leftHeader {
    display: flex;
    justify-content: left;
    gap: .5rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .header i {
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .header i svg {
    width: 1rem;
    height: 1rem;
    fill: #fff
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body {
    padding: .5rem;
    overflow-y: scroll;
    height: 20rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body p {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body p .closeChats {
    padding: .2rem .4rem;
    background: red;
    color: #fff;
    border-radius: 5px;
    font-size: .7rem;
    cursor: pointer;
    display: none
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .choice {
    display: grid;
    padding: .8rem;
    border: 1px solid #bbb;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: .5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .choice:hover {
    color: var(--green-color);
    border: 1px solid var(--green-color)
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .login {
    display: grid
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .bodyLabel {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    margin-top: 1rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .bodyLabel input, .allChatIndex .allChatIndexBlock .chatContents .chatContent .body .bodyLabel select, .allChatIndex .allChatIndexBlock .chatContents .chatContent .body .bodyLabel textarea {
    background: var(--back1-color);
    border: 1px solid #eee;
    padding: .3rem .5rem;
    color: #000;
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 300;
    width: 100%;
    transition: all .3s ease-in-out
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .messages {
    padding: .5rem;
    border: 2px solid var(--green-color);
    border-radius: 5px;
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 300;
    color: #000;
    opacity: .7
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .messages .time {
    text-align: left;
    font-size: .7rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .me {
    border: 2px solid #bbb
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .submit {
    font-size: .9rem;
    font-weight: 500;
    color: var(--green-color);
    text-align: center;
    background: transparent;
    width: 100%;
    border: 1px solid var(--green-color);
    padding: .5rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    transition: all .3s ease-in-out
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .submit:hover {
    background: var(--green-color);
    color: #fff
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .sendImage {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    box-shadow: 0 0 10px #0000000d;
    margin-top: 1rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .sendImage .dropify-wrapper {
    height: 100px;
    border: 1px solid #eee !important
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    visibility: hidden !important
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .sendImage .dropify-wrapper .dropify-message {
    position: relative !important;
    top: auto !important;
    margin-top: 2rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
    margin: 0;
    font-size: 1rem;
    color: #00800082
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .send {
    display: grid;
    grid-template-columns:1fr auto
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .send input {
    background: var(--back3-color);
    border-top: 1px solid #eee;
    padding: .5rem;
    color: #000;
    font-size: 1rem;
    font-weight: 300;
    width: 100%;
    transition: all .3s ease-in-out
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .send button {
    font-size: .9rem;
    font-weight: 300;
    color: #fff;
    background: var(--green-color);
    padding: 0 1rem
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .loginChat {
    background: red;
    border-top: 1px solid #eee;
    padding: .5rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 300;
    color: #fff;
    display: grid;
    width: 100%
}

.allChatIndex .allChatIndexBlock .chatContents .chatContent .typeLogin1 {
    margin-top: 1rem;
    border-radius: 5px
}

@media screen and (max-width: 700px) {
    .allChatIndex .allChatIndexBlock .chatContents .chatContent .body {
        height: calc(100% - 5.3rem)
    }
}

@media screen and (max-width: 700px) {
    .allChatIndex {
        z-index: 50;
        bottom: 4rem
    }

    .allChatIndex .allChatIndexBlock .chatContents .chatContent {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: auto
    }
}

.allSplash {
    background: white !important;
    /*background: var(--green-color);*/
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    justify-content: center
}

.allSplash .allLoadings {
    margin: auto;
    display: grid;
    align-items: center;
    overflow: hidden
}

.allSplash .allLoadings .pic {
    display: grid;
    justify-content: center;
    margin-bottom: .5rem
}

.allSplash .allLoadings .pic img {
    width: 100%;
    height: 10rem;
    object-fit: contain
}

.allSplash .allLoadings i {
    display: grid;
    justify-content: center;
    align-items: center
}

.allSplash .allLoadings i .loading {
    width: 3rem;
    height: 3rem;
    fill: #024752;
    animation: arrow-anim2 .5s ease infinite
}

@keyframes arrow-anim2 {
    0% {
        transform: rotate(0)
    }
    15% {
        transform: rotate(45deg)
    }
    25% {
        transform: rotate(90deg)
    }
    50% {
        transform: rotate(180deg)
    }
    75% {
        transform: rotate(270deg)
    }
    85% {
        transform: rotate(300deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.allSplash .allLoadings p {
    font-size: 2rem;
    font-weight: 500;
    color: #024752;
    text-align: center;
    margin-bottom: 1rem
}

.allPaginateHome {
    display: grid;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 1rem
}

.allPaginateHome .pages {
    display: grid;
    grid-template-columns:repeat(10, auto);
    justify-content: center;
    align-items: center;
    grid-gap: 1rem
}

.allPaginateHome .pages div {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 5px;
    background: white;
    color: #000;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 300;
    box-shadow: 0 0 10px #0003;
    cursor: pointer
}

.allPaginateHome .pages div svg {
    width: .8rem;
    height: .8rem;
    fill: #000
}

.allPaginateHome .pages .true {
    background: var(--green-color);
    color: #fff
}