*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

:root {
    --primary-color-1: #48c78e;
    --primary-color-1-rgb: 109, 43, 187;
    --primary-color-1-hover: #48c78e;
    --primary-color-1-hue: 268;
    --primary-color-1-saturation: 63%;
    --primary-color-2: #00c7a9;
    --parimary-color-3: #00aaff;
    --normal-status-color: #01bb70;
    --partial-compatible-color: #ffad30;
    --admin-color: var(--partial-compatible-color);
    --not-compatible-color: #00d1b2;
    --other-status-color: #effaf5;
    --discount-color: #d82e21;
    --campaign-tag-color: #ff0980;
    --mall-choice-color: #e33fbf;
    --selected-color: #effaf5;
    --background-color: #f5f5f5;
    --button-background-color: #00d1b2;
    --button-background-hover: #00c4a7;
    --button-background-color-2: #effaf5;
    --feature-background-color: #a0efed;
    --feature-color: #054949;
    --tag-bg: #00d1b2;
    --black-900: #00001d;
    --black-800: #333333;
    --black-700: #666666;
    --black-600: #777777;
    --black-500: #999999;
    --black-400: #bdbdbd;
    --black-300: #dbdbdb;
    --black-200: #e4e4e4;
    --black-100: #ebebeb;
    --black-50: #f9f9f9;
    --subtitle-1-font-size: 16px;
    --subtitle-1-line-height: 20px;
    --subtitle-2-font-size: 14px;
    --subtitle-2-line-height: 18px;
    --body-1-font-size: 16px;
    --body-1-line-height: 20px;
    --body-2-font-size: 14px;
    --body-2-line-height: 18px;
    --body-3-font-size: 12px;
    --body-3-line-height: 15px;
    --current-price-font-size: 24px;
    --current-price-line-height: 32px;
    --original-price-font-size: 12px;
    --h1-font-size: 48px;
    --h1-line-height: 62px;
    --h2-font-size: 34px;
    --h2-line-height: 44px;
    --h3-font-size: 26px;
    --h3-line-height: 34px;
    --h4-font-size: 20px;
    --h4-line-height: 26px;
    --h5-font-size: 18px;
    --h5-line-height: 24px;
    --padding: 9px;
    --alert-color: #dc3545;
    --border-color: var(--black-300);
    --button-color-grey: #6c757d;
    --text-color: var(--black-900);
    --text-warn-color: #ffc107;
    --transport-bg-color: #f00;
    --transport-color: #fff;
    --cs-bg-color: rgb(0, 168, 42);
    --cs-color: #fff;
    --md-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --md-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
    --md-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
    font-family: -apple-system, Helvetica, sans-serif;
    display: flex;
    min-height: 100%;
    overflow-x: hidden;
    color: var(--text-color);
    scroll-behavior: smooth
}

:root ::-webkit-scrollbar {
    height: .4rem;
    width: .4rem
}

:root ::-webkit-scrollbar-track {
    background: rgba(72, 199, 142, 0.05)
}

:root ::-webkit-scrollbar-thumb {
    background: rgba(72, 199, 142, 0.3)
}

:root ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-1)
}

@media (min-width: 768px) {
    :root {
        --padding: 15px
    }
}

@media (min-width: 1600px) {
    :root {
        --padding: 30px
    }
}

body {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 20px;
    background: var(--background-color)
}

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height)
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height)
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height)
}

h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height)
}

h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height)
}

a {
    color: var(--text-color);
    text-decoration: none
}

button, .btn {
    border: 0;
    font-size: 1rem;
    line-height: 1
}

button:hover, .btn:hover {
    cursor: pointer
}

button:disabled, .btn:disabled {
    background: var(--button-color-grey)
}

button:disabled:hover, .btn:disabled:hover {
    cursor: not-allowed
}

button.grey, .btn.grey {
    background: var(--button-color-grey)
}

.btn {
    background: var(--primary-color-1);
    border-radius: 4px;
    padding: .5rem 1rem;
    color: #fff;
    align-self: center
}

.btn:hover:not([disabled]) {
    background: var(--primary-color-2);
    color: #fff;
}

.btn_first {
    border: 1px solid var(--primary-color-1);
    background: var(--cs-color);
    border-radius: 4px;
    font-size: 1rem;
    height: 32px;
    line-height: 32px;
    padding: 0 1rem;
    color: var(--primary-color-1);
}

.btn_first:hover:not([disabled]) {
    cursor: pointer;
    color: var(--primary-color-1);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.btn_first:disabled {
    border-color: var(--button-color-grey);
    background: var(--button-color-grey);
    color: var(--cs-color);
}

.btn_first:disabled:hover {
    cursor: not-allowed
}

textarea {
    padding: .5rem;
    border-radius: .3rem
}

input:disabled {
    background: unset
}

input[type=checkbox] {
    accent-color: var(--primary-color-1);
}

label.checkbox, label.radio {
    display: flex;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

label.checkbox span, label.radio span {
    flex: 1;
}

label.checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    outline: none;
    accent-color: unset;
    width: 16px;
    min-width: 16px;
    height: 16px;
    background: var(--cs-color);
    border: 1px solid #adb5bd;
    border-radius: 3px;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 2px;
}

label.checkbox input[type="checkbox"]:checked {
    border-color: var(--primary-color-1);
    background: url("../images/icon_checkbox_checked.png") no-repeat var(--primary-color-1);
    background-size: 100%;
}

label.checkbox input[type="checkbox"]:disabled {
    background: var(--black-100);
}

label.checkbox input[type="checkbox"]:disabled:checked {
    border-color: #adb5bd;
    background: url("../images/icon_checkbox_disabled_checked.png") no-repeat var(--black-200);
    background-size: 100%;
}

label.radio input[type="radio"] {
    -webkit-appearance: none;
    outline: none;
    min-width: 16px;
    width: 16px;
    height: 16px;
    background: var(--cs-color);
    border: 1px solid #adb5bd;
    border-radius: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 2px;
}

label.radio input[type="radio"]:checked {
    border-color: var(--primary-color-1);
    background: url("../images/icon_radio_checked.png") no-repeat var(--primary-color-1);
    background-size: 100%;
}

label.radio input[type="radio"]:disabled {
    background-color: var(--black-100);
}

label.radio input[type="radio"]:disabled:checked {
    border-color: #adb5bd;
    background: url("../images/icon_radio_disabled_checked.png") no-repeat var(--black-200);
    background-size: 100%;
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 5px;
    font-size: var(--body-2-font-size);
    color: #565656;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #a9a9a9;
    border-radius: 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
    outline: 0;
    border-color: var(--primary-color-1);
}

ul, li {
    list-style: none;
}

hr {
    border: 0;
    background: #0000001a;
    height: 1px
}

hr.vertical {
    width: 1px;
    height: 100%
}

i.fa.w40 {
    width: 40px;
    height: 40px;
    padding: 9px;
    font-size: 22px;
    text-align: center;
}

.none {
    display: none !important;
}

.blank, .blank10 {
    height: 10px;
    line-height: 10px;
    clear: both;
    visibility: hidden;
}

.blank5 {
    height: 5px;
    line-height: 5px;
    clear: both;
    visibility: hidden;
}

.blank15 {
    height: 15px;
    line-height: 15px;
    clear: both;
    visibility: hidden;
}

.blank20 {
    height: 20px;
    line-height: 20px;
    clear: both;
    visibility: hidden;
}

.blank30 {
    height: 30px;
    line-height: 30px;
    clear: both;
    visibility: hidden;
}

.blank40 {
    height: 40px;
    line-height: 40px;
    clear: both;
    visibility: hidden;
}

.blank50 {
    height: 50px;
    line-height: 50px;
    clear: both;
    visibility: hidden;
}

.blank60 {
    height: 60px;
    line-height: 60px;
    clear: both;
    visibility: hidden;
}

.text-success {
    color: var(--cs-bg-color);
}

.text-muted {
    color: var(--black-600);
}

.text-primary {
    color: #007bff;
}

.text-red {
    color: var(--primary-color-2);
}

.stockTip {
    --color: var(--black-400);
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    text-wrap: nowrap;
}

.stockTip:before {
    --size: 10px;
    content: "";
    background: var(--color);
    width: var(--size);
    height: var(--size);
    border-radius: var(--size)
}

.stockTip.status_0, .stockTip.status_1, .stockTip.status_4 {
    --color: var(--normal-status-color)
}

.stockTip.status_2 {
    --color: var(--partial-compatible-color)
}

.stockTip.status_3 {
    --color: var(--not-compatible-color)
}

.feature {
    --line-height: 15px;
    --padding-horizontal: 5px;
    --padding-vertical: 3px;
    padding: var(--padding-vertical) var(--padding-horizontal);
    border-radius: 4px;
    font-size: 12px;
    line-height: var(--line-height);
    width: fit-content;
    background-color: var(--feature-background-color);
    color: var(--feature-color);
}

.feature.tag {
    background-color: var(--tag-bg);
    color: #ffffff;
}

.feature.tag:hover {
    background: var(--button-background-hover);
    color: #ffffff;
}

.feature.discount {
    background-color: var(--discount-color);
    color: #ffffff;
}

.goods_image {
    --size: 100%;
    position: relative;
    z-index: 1;
}

.goods_image img {
    min-width: var(--size);
    min-height: var(--size);
    width: var(--size, 100%);
    height: var(--size, 100%);
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.goods_image .endTimeBox {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    color: var(--cs-color);
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 3px;
}

.goods_image .endTimeBox p {
    color: var(--primary-color-1);
    font-size: 10px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.goods_image .endTimeBox span {
    background: var(--primary-color-1);
    padding: 1px 3px;
    min-width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.goods_image .preorderBox {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    color: var(--cs-color);
    padding: 2px 3px;
    background-color: var(--primary-color-1);
    box-shadow: var(--md-shadow-lvl-1);
    font-size: 10px;
}

@media (min-width: 768px) {
    .goods_image .endTimeBox {
        gap: 5px;
    }

    .goods_image .endTimeBox p {
        font-size: 12px;
    }

    .goods_image .endTimeBox span {
        padding: 3px;
        min-width: 24px;
        font-size: 14px;
    }
    .goods_image .preorderBox{
        padding: 5px;
        font-size: 12px;
    }
}

.swiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: var(--other-status-color);
    --swiper-pagination-bullet-width: 4px;
    --swiper-pagination-bullet-height: 4px;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: var(--black-300);
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    --swiper-navigation-color: var(--primary-color-1-hover);
}

@media (min-width: 768px) {
    .swiper {
        --swiper-pagination-bullet-width: 30px;
        --swiper-pagination-bullet-border-radius: 0;
        --swiper-pagination-bullet-horizontal-gap: 5px
    }
}


header.wcsl {
    display: grid;
    width: 100%;
    align-items: center;
    background: #fff;
    position: sticky;
    border-bottom: 1px solid var(--border-color);
    top: 0;
    z-index: 5
}

@media (min-width: 768px) {
    header.wcsl {
        border-bottom: 0
    }
}

header.wcsl .wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 1600px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 0;
    margin: 0 auto
}

header.wcsl .wrapper .logo {
    width: 100px;
    display: block;
}

header.wcsl .wrapper .logo img {
    width: 60%;
    min-width: 40px;
    max-width: 100px;
}

header.wcsl .search {
    width: 100%;
    max-width: 960px;
}

header.wcsl .search .box {
    --round: 4px;
    position: relative;
}

header.wcsl .search .box .bar {
    --height: 40px;
    display: flex;
    align-items: center;
    border-radius: var(--round);
    width: 100%;
    height: var(--height);
    position: relative;
    background: #efefef;
}

header.wcsl .search .box .bar .bar_search {
    flex: 1;
    position: relative;
    z-index: 3;
    height: var(--height);
}

header.wcsl .search .box .bar .bar_search label {
    height: var(--height);
    display: flex;
    align-items: center;
    justify-content: center;
}

header.wcsl .search .box .bar input {
    --round: 4px;
    position: relative
}

header.wcsl .search .box .bar input {
    padding: .5rem .5rem .5rem 1.5rem;
    width: 100%;
    border: none;
    background: none
}

header.wcsl .search .box .bar input:focus {
    outline: 0
}

header.wcsl .search .box .bar input::-moz-placeholder {
    color: #999
}

header.wcsl .search .box .bar input::placeholder {
    color: #999
}

header.wcsl .search .box .bar .bar_search .search_box {
    width: 100%;
    position: absolute;
    display: none;
    z-index: 4;
    left: 0;
    top: 100%;
    background: #efefef;
    border-top: 1px solid #e2e2e2;
    border-radius: 0 0 var(--round) var(--round);
    max-height: 70vh;
    overflow-y: auto;
}

@media (min-width: 640px) {
    header.wcsl .wrapper .logo {
        width: 10rem;
    }

    header.wcsl .search .box .bar.show {
        border-radius: var(--round) var(--round) 0 0;
    }
}

@media (min-width: 320px) {
    header.wcsl .search .box .bar.show .bar_search .search_box {
        display: block;
    }
}

@media (max-width: 639px) {
    header.wcsl .search .box .bar .bar_search .search_box {
        position: fixed;
        top: 60px;
    }
}

header.wcsl .search .box .bar.show .bar_search .search_res {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

header.wcsl .search .box .bar.show .bar_search .search_res .title {
    padding: 5px 1.5rem;
    border-bottom: 1px solid #e2e2e2;
    font-size: 12px;
    font-weight: 500;
    color: #999;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list a {
    align-items: center;
    padding: 15px 20px;
    transition: background .2s ease-in-out;
    display: flex;
    justify-content: center;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list .goods_image {
    --size: 60px;
    flex: none;
    width: var(--size);
    margin-right: 20px;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list dl {
    flex: 1 0 0;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list dl dt {
    line-height: 1.4;
    font-size: var(--body-2-font-size);
    font-weight: 400;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list dl dd {
    margin-top: 10px;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list dl dd.price {
    font-size: 20px;
    display: flex;
    align-items: center;
}

header.wcsl .search .box .bar.show .bar_search .search_res .list dl dd.price span.source {
    margin-left: 5px;
    text-decoration-line: line-through;
    font-weight: 700;
    font-size: var(--current-price-font-size);
    color: var(--primary-color-2);
}

header.wcsl .search .box .bar.show .bar_search .search_res .list a.loading .goods_image {
    height: var(--size);
    background: var(--background-color);
}

header.wcsl .search .box .bar.show .bar_search .search_res .list a.loading dl dt {
    background: var(--background-color);
}


header.wcsl .search .box .bar.show .bar_search .search_res .list a.loading dl dd {
    background: var(--background-color);
}

header.wcsl .search .box .bar.show .bar_search .search_res .list a:hover {
    background: var(--selected-color);
}

header.wcsl .search .box .bar.show .bar_search .search_res .list a:hover dl dt {
    color: var(--primary-color-1);
}

header.wcsl .search .box .bar.show .bar_search .search_res a.more {
    transition: background .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

header.wcsl .search .box .bar.show .bar_search .search_res a.more svg {
    width: 6px;
    height: 10px;
    margin-left: 5px;
}

header.wcsl .search .box .bar.show .bar_search .search_res a.more:hover {
    color: var(--primary-color-1);
    text-decoration: underline;
}

header.wcsl .search .box .bar .bar_search .search_box .search_empty {
    text-align: center;
    padding: 30px 0;
    font-size: var(--h4-font-size);
    color: var(--primary-color-1);
}

header.wcsl .search .box .bar .searchBtn {
    padding: 10px;
    background: var(--button-background-color);
    width: var(--height);
    height: var(--height);
}

header.wcsl .search .box .bar .searchBtn:hover {
    background: var(--button-background-hover);
}

header.wcsl .search .hot {
    height: 20px;
    display: none;
    margin-top: 6px;
}

header.wcsl .search .hot .box {
    --padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-left: var(--padding);
    overflow: hidden;
}

header.wcsl .search .hot .box .title {
}

header.wcsl .search .hot .box a {
    --padding: 8px;
    background: 0;
    color: var(--black-900);
    font-size: 14px;
    line-height: 18px;
    padding: 0 var(--padding);
    position: relative;
}

header.wcsl .search .hot .box a:before {
    content: "";
    width: 0;
    height: 1em;
    border-left: 1px solid #000;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.5em
}

header.wcsl .search .hot .box a.first:before {
    display: none;
}

header.wcsl .search .hot .box a:hover {
    color: var(--primary-color-1)
}

header.wcsl .search .hot .box a:before {
    color: var(--black-900)
}

header.wcsl .other {
    --size: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

header.wcsl .other > div:nth-child(1), header .other.login:nth-child(1) {
    width: max-content
}

header.wcsl .other .faq {
    display: none;
    padding: 0;
    border-radius: var(--size);
    height: var(--size);
    align-items: center;
    width: max-content;
}

header.wcsl .other .faq .title {
    padding: 8px 10px;
}

header.wcsl .other .faq .title:after {
    content: "▼";
    margin-left: .5rem;
    font-size: .8rem
}

header.wcsl .other .faq .list {
    display: none;
    position: absolute;
    right: 0;
    top: 96%;
    max-width: unset;
}

header.wcsl .other .faq .list .content {
    margin-top: 22px;
    background: var(--black-50);
    border-radius: 4px;
}

header.wcsl .other .faq .list .content ul {
    display: grid;
    width: 250px;
    gap: 1.5rem;
    place-items: center;
    padding: 1rem;
}

header.wcsl .other .faq:hover {
    background: var(--black-100)
}

header.wcsl .other .faq:hover .list {
    display: grid
}

header.wcsl .other .faq:hover:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 15%;
    background: var(--black-50);
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 100% 100%, 0% 100%)
}

header.wcsl .other .faq:hover a:hover {
    color: var(--primary-color-1)
}

.cart_input {
    --color: var(--black-400);
    display: flex;
    height: 40px;
    width: 90px;
    position: relative;
    background: #fff
}

.cart_input input {
    padding: 0;
}

.cart_input input {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
    border: 1px solid #000;
    border-radius: 4px;
    outline-color: var(--primary-color-1);
}


.cart_input input::-webkit-outer-spin-button, .cart_input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.cart_input button {
    --padding: 10px;
    background: 0;
    color: #000;
    position: absolute;
    top: 0;
    padding: 0;
    width: 14px;
    height: 100%
}

.cart_input button:nth-of-type(1) {
    left: var(--padding)
}

.cart_input button:nth-of-type(2) {
    right: var(--padding)
}

@media (min-width: 768px) {
    .cart_input {
        display: grid;
        grid-template-columns: 27px 12px;
        grid-template-rows: 12px 12px;
        border: 1px solid var(--color);
        border-radius: 4px;
        width: min-content;
        height: min-content
    }

    .cart_input input {
        border: 0;
        outline: 0;
        grid-column: 1/2;
        grid-row: 1/3;
        background: #fff;
    }

    .cart_input input input:target, .cart_input input:focus {
        --border-color: var(--primary-color-1)
    }

    .cart_input button {
        display: grid;
        place-content: center;
        position: static;
        background: var(--color);
        grid-column: 2/3;
        border-radius: 0;
        color: #fff;
        font-size: 12px
    }

    .cart_input button:nth-of-type(1) {
        grid-row: 2/3
    }

    .cart_input button:nth-of-type(2) {
        grid-row: 1/2
    }
}

header.wcsl .other .langBox {
    align-items: center;
    width: var(--size);
    height: var(--size);
    padding: 0;
    position: relative;
    z-index: 3;
}

header.wcsl .other .langBox .icon {
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

header.wcsl .other .langBox .box {
    position: absolute;
    z-index: 4;
    left: -40px;
    top: 96%;
    max-width: unset;
    display: none;
}

header.wcsl .other .langBox .box .list {
    margin-top: 22px;
    background: var(--black-50);
    border-radius: 4px;
    padding: 20px;
    display: grid;
    width: 120px;
    gap: 1.5rem;
    place-items: center;
}

header.wcsl .other .langBox .box .list a.cur, header.wcsl .other .langBox .box .list a:hover {
    color: var(--primary-color-1);
}


@media (min-width: 1024px) {
    header.wcsl .other .langBox:hover {
        background: var(--black-100);
        border-radius: 2rem
    }

    header.wcsl .other .langBox:hover .icon {
        color: var(--primary-color-1-hover);
    }

    header.wcsl .other .langBox:hover .icon:before {
        content: "";
        position: absolute;
        top: 40px;
        left: 5px;
        background: var(--black-50);
        width: 30px;
        height: 30px;
        clip-path: polygon(50% 0, 100% 100%, 0% 100%);
        z-index: 3;
    }

    header.wcsl .other .langBox:hover .box {
        display: block;
    }
}

@media (max-width: 1024px) {
    header.wcsl .other .langBox.show {
        background: var(--black-100);
        border-radius: 2rem
    }

    header.wcsl .other .langBox.show .icon {
        color: var(--primary-color-1-hover);
    }

    header.wcsl .other .langBox.show .icon:before {
        content: "";
        position: absolute;
        top: 40px;
        left: 5px;
        background: var(--black-50);
        width: 30px;
        height: 30px;
        clip-path: polygon(50% 0, 100% 100%, 0% 100%);
        z-index: 3;
    }

    header.wcsl .other .langBox.show .box {
        display: block;
    }
}

header.wcsl .other .cartBox {
    align-items: center;
    width: var(--size);
    height: var(--size);
    padding: 0;
}

header.wcsl .other .cartBox .cartCard:hover {
    background: var(--black-100);
    border-radius: 2rem
}

header.wcsl .other .cartBox .cartCard:hover .cart:before {
    content: "";
    position: absolute;
    top: 0;
    right: 80px;
    background: var(--black-50);
    width: 30px;
    height: 30px;
    clip-path: polygon(50% 0, 100% 100%, 0% 100%)
}

header.wcsl .other .cartBox a.button {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

header.wcsl .other .cartBox a.button:hover {
    color: var(--primary-color-1-hover);
}

header.wcsl .other .cartBox .cartNumber {
    position: absolute;
    --size: 14px;
    width: var(--size);
    height: var(--size);
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--discount-color);
    border-radius: var(--size);
    color: #fff;
    font-size: 8px;
}

header.wcsl .other .cartList {
    display: none;
    max-width: unset;
    position: absolute;
    top: 96%;
    right: 0;
}

header.wcsl .other .cartList:before {
    content: "";
    position: absolute;
    top: 0;
    right: 80px;
    background: var(--black-50);
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}

header.wcsl .other .cartList .empty {
    margin-top: 22px;
    background: var(--black-50);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    word-break: keep-all;
    min-width: 250px;
}


header.wcsl .other .cartList .content {
    margin-top: 22px;
    background: var(--black-50);
    padding: 20px 20px 0;
    border-radius: 4px;
    gap: 10px;
    width: 600px;
    max-height: 610px;
    overflow-y: auto;
}

header.wcsl .other .cartList .tagTitle {
    display: flex;
    padding: 10px;
}

header.wcsl .other .cartList .tagTitle p:first-child {
    margin-right: auto
}

header.wcsl .other .cartList .content .item {
    padding-block: 10px;
}

header .other .cartList .content .item .productInfo {
    display: flex;
    gap: min(15px, var(--padding));
    width: 100%;
}

header.wcsl .other .cartList .content .item .productInfo .pic {
    display: contents;
    position: relative;
    overflow: hidden;
}

header.wcsl .other .cartList .content .item .productInfo .pic img {
    --size: 60px;
    min-width: var(--size);
    min-height: var(--size);
    width: var(--size, 100%);
    height: var(--size, 100%);
    -o-object-fit: contain;
    object-fit: contain;
}

header.wcsl .other .cartList .content .item .detail {
    width: 200px;
    display: contents;
}

header.wcsl .other .cartList .content .item .detail .name {
    flex: 1;
}

header.wcsl .other .cartList .content .item .detail .name .tag {
    display: flex;
    align-items: center;
    gap: 3px 10px;
    flex-wrap: wrap;
    width: 100%;
}

header.wcsl .other .cartList .content .item .detail .name .tag .stockState {
    display: flex;
    align-items: center;
    gap: 3px 10px;
}

header.wcsl .other .cartList .content .item .detail .name p {
    margin-top: 5px;
}


header.wcsl .other .cartList .content .item ul.packageInfo {
    translate: 1.2rem 0;
    width: calc(100% - 1.2rem);
    font-size: var(--body-2-font-size);
    margin-top: .5rem;
    list-style: unset;
}

header.wcsl .other .cartList .content .item ul.packageInfo li {
    list-style: unset;
}

header.wcsl .other .cartList .content .actions {
    display: grid;
    align-items: center
}

header.wcsl .other .cartList .content .actions > div {
    grid-column: 1/3;
    justify-self: end
}

header.wcsl .other .cartList .content .actions > p {
    grid-row: 2/3;
    text-align: end;
    transform: translate(7px);
    grid-column: 1/2
}

header.wcsl .other .cartList .content .actions > p > span + span {
    text-decoration: line-through;
    color: var(--black-500);
    font-weight: 500
}

header.wcsl .other .cartList .content .actions > button {
    background: 0;
    width: 40px;
    height: 40px;
    transform: translate(7px);
    grid-column: 2/3
}


header.wcsl .other .cartList .content .gift_item {
    display: grid;
    align-items: center
}

header.wcsl .other .cartList .content .gift_item .gift_number {
    grid-column: 1/3;
    justify-self: end
}

header.wcsl .other .cartList .content .gift_item .gift_price {
    grid-row: 2/3;
    text-align: end;
    transform: translate(7px);
    grid-column: 1/2
}

header.wcsl .other .cartList .content .gift_item .gift_button {
    background: 0;
    width: 40px;
    height: 40px;
    transform: translate(7px);
    grid-column: 2/3
}


header.wcsl .other .cartList .content .action {
    background: var(--black-50);
    position: sticky;
    bottom: 0;
    padding-bottom: 5px;
}

header.wcsl .other .cartList .content .action .view {
    display: flex;
    gap: 15px;
    padding: 15px 0;
}

header.wcsl .other .cartList .content .action .view:first-child {
    border-bottom: 1px solid #000;
    align-items: center;
    justify-content: space-between;
}

header.wcsl .other .cartList .content .action .view .clear {
    background: 0;
    border: 1px solid currentColor;
    color: var(--not-compatible-color);
    padding: 9px 30px;
    border-radius: 4px;
}

header.wcsl .other .cartList .content .action .view a {
    display: flex;
    position: relative;
    background: 0;
    border: 1px solid currentColor;
    padding: 9px 30px;
    border-radius: 4px;
}

header.wcsl .other .cartList .content .action .view a.inspect {
    margin-left: auto;
    color: var(--primary-color-1);
}

header.wcsl .other .cartList .content .action .view .clear:hover, header.wcsl .other .cartList .content .action .view a.inspect:hover {
    background: color-mix(in srgb, currentColor 10%, transparent)
}

header.wcsl .other .cartList .content .action .view a.checkout {
    background: var(--primary-color-1);
    color: #fff;
}

header.wcsl .other .cartList .content .action .view a.checkout:hover {
    background: var(--primary-color-2)
}

@media (min-width: 768px) {
    header.wcsl .other .cartCard:hover .cartList {
        display: grid
    }

    header.wcsl .other .cartList .content .actions {
        gap: 10px
    }

    header.wcsl .other .cartList .content .actions > div {
        grid-column: 2/3;
        grid-row: 1/2
    }

    header.wcsl .other .cartList .content .actions > p {
        width: 100px;
        grid-column: 1/2;
        grid-row: 1/2;
        transform: translate(0);
        text-align: start
    }

    header.wcsl .other .cartList .content .actions > button {
        grid-column: 3/4;
        grid-row: 1/2;
        transform: translate(0)
    }


    header.wcsl .other .cartList .content .gift_item {
        gap: 10px
    }

    header.wcsl .other .cartList .content .gift_item .gift_number {
        grid-column: 2/3;
        grid-row: 1/2;
        min-width: 40px;
        text-align: right;
    }

    header.wcsl .other .cartList .content .gift_item .gift_price {
        width: 100px;
        grid-column: 1/2;
        grid-row: 1/2;
        transform: translate(0);
        text-align: start
    }

    header.wcsl .other .cartList .content .gift_item .gift_button {
        grid-column: 3/4;
        grid-row: 1/2;
        transform: translate(0)
    }
}

@media (min-width: 470px) {
    header.wcsl .other .cartList .content .item .detail .name p {
        word-break: keep-all
    }
}

@media (min-width: 1600px) {
    header.wcsl .other .cartList .content .item .detail .name p {
        font-size: 12px;
        line-height: 1.2
    }
}

header.wcsl .login {
    display: none;
    margin-right: 30px;
    align-items: center;
    width: var(--size);
    height: var(--size);
    padding: 0;
}

header.wcsl .login:hover {
    background: var(--black-100);
    border-radius: 2rem;
    color: var(--primary-color-1-hover);
}

header.wcsl .user-profile {
    --triangle-padding: 13px;
    display: none;
    place-items: center
}

header.wcsl .user-profile > div {
    display: none
}

header.wcsl .user-profile:hover {
    border-radius: 2rem;
    background: var(--black-200)
}

header.wcsl .user-profile:hover > div {
    display: grid
}

header.wcsl .user-profile:hover:before {
    content: "";
    position: absolute;
    top: 100%;
    background: var(--black-50);
    transform: translate(5px);
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 100% 100%, 0% 100%)
}

header.wcsl .user-profile:hover svg {
    color: var(--primary-color-1)
}

header.wcsl .user-profile, header.wcsl .other > a {
    margin-right: 30px
}

.user-menu {
    max-width: unset;
    min-width: 236px;
    z-index: 99;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute
}

.user-menu div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 22px;
    padding: 20px;
    background: var(--black-50);
    border-radius: 4px
}

.user-menu img {
    --size: 90px;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size)
}

.user-menu div * {
    display: grid;
    margin-top: 28px
}

.user-menu a:hover {
    color: var(--primary-color-1)
}

.user-menu .logout {
    display: grid;
    place-items: center;
    background: var(--not-compatible-color);
    color: #fff;
    width: 88px;
    height: 36px;
    border-radius: 4px;
}

.user-menu .logout:hover {
    color: #fff;
    opacity: 0.8;
}

@media (min-width: 768px) {
    .user-menu {
        right: 0;
        top: 96%
    }
}

header.wcsl nav .background {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    color: #000;
    background: #0006;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    pointer-events: none
}

header.wcsl nav .background .catalog {
    display: flex;
    color: #000;
    width: min(100%, 1600px);
    max-height: 560px;
    pointer-events: all
}

header.wcsl nav .background .catalog > div {
    display: flex;
    justify-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    padding: 1.5rem 4rem
}

header.wcsl nav .background ul {
    list-style: none;
    padding: 30px 0 30px 50px;
    background: var(--black-100);
    /*margin-left: 40px*/
}

header.wcsl nav .background ul.package {
    margin-left: 0;
    padding: 30px 20px 30px 30px;
}

header.wcsl nav .background li {
    position: relative;
    font-size: var(--h5-font-size);
    line-height: var(--h5-font-size);
    width: 90px;
}

header.wcsl nav .background .tab li.active, header.wcsl nav .background .tab li a:hover {
    color: var(--primary-color-1);
}

header.wcsl nav .background ul.package li {
    width: 110px;
}

header.wcsl nav .background li.active:before {
    --width: 80%;
    content: "";
    position: absolute;
    top: 50%;
    left: 90px;
    background: #fff;
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(0 50%, var(--width) 0%, var(--width) 80%);
    clip-path: polygon(0 50%, var(--width) 0%, var(--width) 80%);
    transform: translateY(-50%)
}

header.wcsl nav .background li + li {
    margin-top: 30px
}

header.wcsl nav .background .categories {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
    overflow-x: auto
}

header.wcsl nav .background .package_content .categories {
    flex-direction: unset;
}

header.wcsl nav .background .categories > div {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    gap: 20px
}

header.wcsl nav .background .content a {
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height)
}

header.wcsl nav .background .content a:hover {
    color: var(--primary-color-1)
}

header.wcsl nav .background h3 {
    font-size: var(--subtitle-1-font-size);
    line-height: var(--subtitle-1-line-height);
    font-weight: bolder
}

@media (max-width: 1120px) {
    header.wcsl nav .background .categories {
        height: 700px;
        width: 100%
    }

    header.wcsl nav .background .catalog {
        max-height: 800px
    }
}

header.wcsl nav .background li.active:before {
    --width: 80%;
    content: "";
    position: absolute;
    top: 50%;
    left: 110px;
    background: #fff;
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(0 50%, var(--width) 0%, var(--width) 80%);
    clip-path: polygon(0 50%, var(--width) 0%, var(--width) 80%);
    transform: translateY(-50%)
}

header.wcsl nav .background li + li {
    margin-top: 30px
}


header.wcsl nav .background > div {
    width: 10rem;
    /*margin-left: 10rem*/
}

header.wcsl nav .background .set {
    color: #000;
    background: #fff;
    max-height: 100px;
    width: 20rem;
    padding: 20px 20px 20px 10px;
    pointer-events: all
}

header.wcsl nav .background .set > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
    margin: auto
}

header.wcsl nav {
    --opacity: 0;
    display: none;
    /*background-color: var(--black-800);*/
    background-color: var(--cs-color);
    pointer-events: none
}

header.wcsl nav li.item a.title {
    font-size: 19px;
    display: inline-flex;
    width: max-content
}

header.wcsl nav > ul {
    height: 100%;
    width: min-content;
    transform: translate(-100%);
    transition: .3s transform ease;
    list-style: none;
}

header.wcsl nav > ul li.item a.title {
    padding: 1rem;
    /*color: var(--black-50);*/
    color: var(--black-800)
}

header.wcsl .menu input {
    display: none
}

header.wcsl .menu input:checked ~ div {
    right: 0
}

header.wcsl .menu input:checked ~ label:nth-of-type(2) {
    opacity: .4;
    pointer-events: all
}

header.wcsl .menu > label:nth-of-type(1) {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: 0;
    padding: 0
}

header.wcsl .menu > label:nth-of-type(1) svg {
    width: 40px;
    height: 36px
}

header.wcsl .menu > label:nth-of-type(2) {
    position: fixed;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0;
    transition: .3s opacity ease;
    pointer-events: none;
    z-index: 5;
}

header.wcsl .menu > div {
    display: grid;
    align-content: flex-start;
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 530px;
    height: 100dvh;
    max-width: 90vw;
    background: #fff;
    z-index: 6;
}

header.wcsl .menu > div:before {
    content: "";
    position: absolute
}

@media (prefers-reduced-motion: no-preference) {
    header.wcsl .menu > div {
        transition: .3s right ease
    }
}

header.wcsl .menu > div div {
    width: 100%
}

header.wcsl .menu > div div:nth-of-type(1) {
    padding: 10px
}

header.wcsl .menu > div div:nth-of-type(2) > div:nth-child(1) {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height)
}

header.wcsl .menu > div label {
    --size: 34px;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin-left: auto
}

header.wcsl .menu > div hr {
    background: var(--black-600);
    margin: 0 9px;
    opacity: 1
}

header.wcsl .menu a {
    display: flex;
    align-items: center;
    padding: .6em .15em;
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    height: 40px;
    margin-left: 46px
}

header.wcsl .menu a:hover {
    color: var(--primary-color-1)
}

@media (min-width: 768px) {
    header.wcsl .wrapper {
        gap: 1rem;
        padding: 20px 20px 20px 0;
        align-items: flex-start
    }

    header.wcsl .other .faq {
        display: flex
    }

    header.wcsl .login, header.wcsl .user-profile {
        display: unset
    }

    header.wcsl .search .hot {
        display: flex
    }

    header.wcsl .search .hot .title {
        padding-right: 5px
    }

    header.wcsl .search .hot .box {
        width: calc(100% - 28px);
        white-space: nowrap
    }

    header.wcsl nav {
        display: flex;
        justify-content: center;
        flex-direction: row;
        position: relative;
        pointer-events: unset;
        z-index: -1
    }

    header.wcsl nav > ul {
        display: flex;
        transform: unset;
        gap: 50px;
        width: 100%;
        max-width: 1600px;
        padding: 0 9px;
    }

    header.wcsl nav > ul li.item a.title {
        padding: 8px 0;
    }

    header.wcsl nav > ul > li {
        height: 100%;
        /*padding: 8px 0;*/
    }


    header.wcsl nav > ul > li.item:hover a.title {
        color: var(--primary-color-1-hover)
    }

    header.wcsl nav > ul > li:hover .showCatCard > div {
        display: flex;
    }

    header.wcsl nav > ul > li.item.category a.title {
        width: 132px;
        padding: 8px 1rem 8px 1rem;
        background: var(--primary-color-1-hover);
        /*border-radius: 2px;*/
        border-radius: 2px 2px 0 0;
        color: var(--cs-color);
        justify-content: space-between;
        align-items: center;
    }

    header.wcsl nav > ul > li.item.category a.title:after {
        display: none;
    }

    header.wcsl nav > ul > li.item.category a.title:hover {
        color: var(--cs-color);
        background: var(--primary-color-1-hover);
    }

    header.wcsl nav > ul > li.item.category a.title .icon {
        height: 16px;
        width: 24px;
        border-bottom: #fff solid 2px;
        border-top: #fff solid 2px;
        position: relative;
    }

    header.wcsl nav > ul > li.item.category a.title .icon:after {
        content: "";
        position: absolute;
        height: 2px;
        background: #fff;
        display: block;
        top: 5px;
        right: 3px;
        left: 0;
    }


    header.wcsl nav > ul > li > a {
        padding: 0
    }

    header.wcsl nav > ul .hasCard > a:after {
        content: "▼";
        margin-left: 5px;
        font-size: 8px
    }

    header.wcsl nav .active {
        border-left: 0
    }

    header.wcsl .menu {
        display: none
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    header.wcsl .wrapper .logo {
        width: 12rem;
    }

    header.wcsl .hot {
        max-width: calc(100vw - 245px - 7rem)
    }

    header.wcsl .hot .hot-title {
        min-width: 60px
    }

    header.wcsl .hot .hot-keys button:nth-of-type(1) {
        padding-left: 0
    }

    header.wcsl .user-profile {
        margin-right: 10px
    }
}

@media (min-width: 1200px) {
    header.wcsl .wrapper {
        padding: 20px 20px 10px 0;
    }

    header.wcsl .wrapper .logo {
        width: 13rem;
    }

    header.wcsl .wrapper .search {
        margin-top: 5px;
    }

    header.wcsl .wrapper .other {
        margin-top: 5px;
    }

    header.wcsl .hot .hot-title {
        width: 80px
    }

    header.wcsl .hot .hot-keys {
        width: calc(100% - 80px)
    }
}

@media (min-width: 1400px) {

    header.wcsl .wrapper .search {
        margin-top: 15px;
    }

    header.wcsl .wrapper .other {
        margin-top: 15px;
    }
}

@media (min-width: 1500px) {
    header.wcsl .wrapper .search {
        margin-top: 20px;
    }

    header.wcsl .wrapper .other {
        margin-top: 20px;
    }
}

@media (min-width: 1600px) {
    header.wcsl .wrapper {
        padding: 20px 0 10px 0;
    }

    header.wcsl .wrapper .logo {
        width: 14rem;
    }

    header.wcsl .wrapper .search {
        margin-top: 30px;
    }

    header.wcsl .wrapper .other {
        margin-top: 30px;
    }

    header.wcsl nav > ul {
        padding: 0;
    }

    header.wcsl nav > ul > li.item.category a.title {
        width: 140px;
    }
}

main.main_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 9px;
    position: relative
}

main.main_box.gap {
    gap: 9px
}

@media (min-width: 768px) {
    main.main_box {
        padding-bottom: 15px
    }

    main.main_box.gap {
        gap: 30px
    }
}

@media (min-width: 1600px) {
    main.main_box {
        padding-bottom: 30px
    }
}

footer.wcsl {
    border-top: 1px solid var(--border-color);
    background: var(--black-800)
}

footer.wcsl a {
    color: #fff
}

footer.wcsl a:hover {
    color: var(--primary-color-1-hover)
}

footer.wcsl li {
    color: var(--not-compatible-color)
}

footer.wcsl li:before {
    content: "* "
}

footer.wcsl .specials {
    --size: 50.4px;
    --font-size: 11px;
    display: flex;
    justify-content: center;
    color: var(--black-800);
    background: #fff
}

@media (min-width: 820px) {
    footer.wcsl .specials {
        --size: 70.4px;
        --font-size: 14px
    }
}

footer.wcsl .specials svg {
    width: var(--size);
    height: var(--size)
}

footer.wcsl .specials > div {
    display: grid;
    grid-template-rows: var(--size) auto;
    justify-items: center;
    width: fit-content;
    max-width: 25%;
    padding: 12px 0;
    margin: 0 3%;
}

footer.wcsl .specials p {
    font-size: var(--font-size);
    text-align: center
}

footer.wcsl .main {
    color: #fff;
    padding: 15px 9px
}

footer.wcsl .main > div {
    display: grid;
    gap: 15px;
    width: 100%;
    max-width: 1600px
}

footer.wcsl input {
    display: none
}

footer.wcsl input:checked + div {
    grid-template-rows: 43px 1fr
}

footer.wcsl input:checked + div > div {
    border-top: 1px solid var(--border-color)
}

footer.wcsl input:checked + div label svg {
    transform: rotate(90deg)
}

footer.wcsl .info {
    display: grid;
    border: 1px solid #fff;
    border-radius: 10px
}

footer.wcsl .info > div {
    --border-color: #fff;
    display: grid;
    grid-template-rows: 43px 0fr;
    transition: .3s grid-template-rows ease
}

footer.wcsl .info > div ~ div {
    border-top: 1px solid var(--border-color)
}

footer.wcsl .info > div > div {
    background: var(--black-700);
    overflow: hidden
}

footer.wcsl .info > div > div :nth-child(1):not(li) {
    margin-top: 14px
}

footer.wcsl .info > div > div :nth-last-child(1):not(li), footer.wcsl .info > div > div ul {
    margin-bottom: 14px
}

footer.wcsl .info > div > div .icon * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

footer.wcsl .info label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 43px;
    padding: 14px;
    cursor: pointer
}

footer.wcsl .info label svg {
    --size: 24px;
    width: var(--size);
    height: var(--size);
    transform: rotate(-90deg);
    transition: .3s transform ease
}

footer.wcsl .address > div, footer.wcsl .solutions > div, footer.wcsl .selections > div {
    display: grid;
    gap: 15px;
    padding: 0 var(--padding)
}

footer.wcsl .address .contacts, footer.wcsl .address .socials {
    display: none
}

footer.wcsl .selections > div {
    border-radius: 0 0 10px 10px
}

footer.wcsl .googleMap {
    display: none;
    width: 600px;
    height: 350px
}

footer.wcsl .socials {
    display: flex;
    gap: 10px;
    justify-content: center
}

footer.wcsl .payments-and-terms {
    display: contents
}

footer.wcsl .payments-and-terms .contacts {
    display: grid;
    gap: 10px;
    justify-items: center;
    font-size: 13px
}

@media (min-width: 820px) {
    footer.wcsl .payments-and-terms .contacts {
        display: flex;
        gap: 20px;
        justify-content: center
    }

    footer.wcsl .specials > div {
        margin: 0 6%;
    }
}

footer.wcsl .terms {
    display: flex;
    align-items: center;
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height)
}

footer.wcsl .line {
    display: inline-block;
    margin: 0 8px;
    background: #fff;
    width: 1px;
    height: 15px
}

footer.wcsl .contacts a {
    text-decoration: underline
}

footer.wcsl .payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 8px
}

footer.wcsl .payments img {
    max-width: 90px;
    max-height: 46px;
}

footer.wcsl .terms {
    margin: 0 auto
}

footer.wcsl .copyright {
    text-align: center
}

@media (min-width: 1400px) {
    footer.wcsl .main > div {
        gap: 30px;
        margin: 50px auto
    }

    footer.wcsl .main .info {
        display: flex;
        gap: 30px;
        border: 0
    }

    footer.wcsl .main .info > div {
        --border-color: 0;
        grid-template-rows: auto
    }

    footer.wcsl .main .info > div > {
        padding: 0
    }

    footer.wcsl .main .info > div > div {
        background: 0;
        border-radius: 0
    }

    footer.wcsl .main .info > div > div > ul {
        margin-bottom: 0
    }

    footer.wcsl .main .info label {
        padding: 0;
        pointer-events: none
    }

    footer.wcsl .googleMap {
        display: unset
    }

    footer.wcsl label svg {
        display: none
    }

    footer.wcsl .address {
        margin-right: auto;
        width: 500px
    }

    footer.wcsl .address label {
        display: none
    }

    footer.wcsl .address hr {
        width: 100%;
        border-top: 2px solid white;
        opacity: 1
    }

    footer.wcsl .address > div {
        display: grid;
        gap: 18px
    }

    footer.wcsl .address > div > div:nth-of-type(1), footer.wcsl .address > div > div:nth-of-type(2) {
        display: flex;
        margin-top: 10px
    }

    footer.wcsl .address > div > div:nth-of-type(1) p, footer.wcsl .address > div > div:nth-of-type(2) p {
        display: inline-flex;
        justify-content: space-between;
        width: 150px;
        margin-right: 10px;
        margin-top: 0;
        margin-bottom: 0
    }

    footer.wcsl .address > div > div:nth-of-type(1) p span, footer.wcsl .address > div > div:nth-of-type(2) p span {
        margin: 0
    }

    footer.wcsl .address > div > div:nth-of-type(1) a, footer.wcsl .address > div > div:nth-of-type(2) a {
        margin-top: 0;
        margin-bottom: 0
    }

    footer.wcsl .address .socials {
        margin-top: 15px;
        display: flex;
        justify-content: flex-start
    }

    footer.wcsl .address, .solutions, footer.wcsl .selections {
        display: grid;
        align-content: flex-start;
        gap: 5px;
        font-size: var(--body-3-font-size);
        line-height: var(--body-3-line-height);
        font-weight: 400
    }

    footer.wcsl .solutions, footer.wcsl .selections {
        width: 150px
    }

    footer.wcsl .solutions label, footer.wcsl .selections label {
        font-size: var(--subtitle-2-font-size);
        line-height: var(--subtitle-2-font-size);
        font-weight: 600
    }

    footer.wcsl .solutions hr, footer.wcsl .selections hr {
        display: none
    }

    footer.wcsl .solutions > div, footer.wcsl .selections > div {
        gap: 15px;
        padding-right: inherit;
        padding-left: 0
    }

    footer.wcsl .payments-and-terms {
        display: flex;
        justify-content: space-between
    }

    footer.wcsl .payments-and-terms .socials, footer.wcsl .payments-and-terms .contacts {
        display: none
    }

    footer.wcsl .payments {
        gap: 20px;
        max-width: 1100px;
        justify-content: unset;
    }

    footer.wcsl .terms {
        margin: 0
    }
}


nav.footer_menu {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 1rem;
    position: sticky;
    border-top: 1px solid var(--border-color);
    bottom: 0;
    z-index: 5
}

@media (min-width: 768px) {
    nav.footer_menu {
        display: none
    }
}

p.footer_menu {
    font-size: 12px;
    font-weight: 100
}

a.footer_menu, label.footer_menu, button.footer_menu {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 0;
    background: 0;
    color: #000
}

input.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    display: none
}

input.main-nav.mobile_cat + label.mobile_cat.mobile_cat.mobile_cat {
    --opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, var(--opacity));
    z-index: 9;
    transition: .3s background ease;
    pointer-events: none
}

nav.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    position: fixed;
    height: 100%;
    background: #fff;
    left: -100%;
    transition: .3s left ease;
    display: flex;
    width: 530px;
    max-width: 90%;
    z-index: 10;
}

nav.mobile_cat .content {
    width: 100%;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
}

nav.mobile_cat > div.mobile_cat.mobile_cat.mobile_cat {
    padding: 12px
}

nav.mobile_cat > label.mobile_cat.mobile_cat.mobile_cat {
    --padding: 12px;
    position: absolute;
    top: var(--padding);
    right: var(--padding)
}

input:checked.main-nav.mobile_cat + label.mobile_cat.mobile_cat.mobile_cat {
    --opacity: .4;
    pointer-events: all
}

input.mobile_cat:checked ~ .catalogSet.mobile_cat.mobile_cat.mobile_cat {
    left: 0
}

.catalog.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    background: var(--black-100);
    padding-right: 34px
}

.catalog.mobile_cat > div.mobile_cat.mobile_cat.mobile_cat {
    display: flex;
    width: max-content;
    height: 2rem;
    gap: 6px;
    align-items: center;
    -o-object-fit: contain;
    object-fit: contain
}

.catalog.mobile_cat > div h5.mobile_cat.mobile_cat.mobile_cat {
    font-weight: 500
}

.catalog.mobile_cat > div.mobile_cat svg {
    padding: 4px
}

button.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    background: none;
    color: #000;
    padding: 0
}

li.mobile_cat > button.mobile_cat.mobile_cat.mobile_cat, a.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height)
}

li.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    list-style-type: none;
    margin: 30px 0;
    position: relative
}

li.active.mobile_cat > button.mobile_cat.mobile_cat.mobile_cat {
    font-weight: 600
}

li.active.mobile_cat.mobile_cat.mobile_cat.mobile_cat:before {
    --width: 80%;
    content: "";
    position: absolute;
    top: 50%;
    left: 120px;
    background: #fff;
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(0 50%, var(--width) 0%, var(--width) 100%);
    clip-path: polygon(0 50%, var(--width) 0%, var(--width) 100%);
    transform: translateY(-50%)
}

.categories.mobile_cat label.mobile_cat.mobile_cat.mobile_cat {
    margin: 15px 0
}

.categories.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    width: 100%;
    margin-top: calc(2rem + 15px);
    overflow: auto;
    padding-right: 3px;
    margin-right: 5px;
    scrollbar-gutter: stable
}

.categories.mobile_cat label.mobile_cat.mobile_cat.mobile_cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.categories.mobile_cat svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
    transition: transform .3s
}

.categories.mobile_cat .item-details.mobile_cat.mobile_cat.mobile_cat {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s
}

.categories.mobile_cat .item-details.mobile_cat > div.mobile_cat.mobile_cat {
    overflow: hidden
}

.categories.mobile_cat .item-details.mobile_cat > div.mobile_cat > div.mobile_cat {
    margin-block: 30px
}

.categories.mobile_cat .item-details.mobile_cat > div.mobile_cat > div.mobile_cat:first-of-type {
    margin-top: 15px
}

.categories.mobile_cat .item-details.mobile_cat > div.mobile_cat > div.mobile_cat:last-of-type {
    margin-bottom: 15px
}

.categories.mobile_cat input.mobile_cat:checked + label.mobile_cat svg {
    transform: rotate(90deg)
}

.categories.mobile_cat input.mobile_cat:checked + label.mobile_cat + .item-details.mobile_cat {
    grid-template-rows: 1fr
}

.item-details.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
    padding-left: 20px
}

.mobile_cat.mobile_cat.mobile_cat.mobile_cat::-webkit-scrollbar {
    width: 4px
}

.mobile_cat.mobile_cat.mobile_cat.mobile_cat::-webkit-scrollbar-track {
    background: #fff
}

.mobile_cat.mobile_cat.mobile_cat.mobile_cat::-webkit-scrollbar-thumb {
    background: var(--black-300);
    border-radius: 4px
}

@media (min-width: 768px) {
    nav.mobile_cat.mobile_cat.mobile_cat.mobile_cat, label.mobile_cat.mobile_cat.mobile_cat.mobile_cat {
        display: none
    }
}

input.mobile_package.mobile_package.mobile_package.mobile_package {
    display: none
}

input.main-nav.mobile_package + label.mobile_package.mobile_package.mobile_package {
    --opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, var(--opacity));
    z-index: 9;
    transition: .3s background ease;
    pointer-events: none
}

nav.mobile_package.mobile_package.mobile_package.mobile_package {
    position: fixed;
    height: 100%;
    background: #fff;
    left: -100%;
    transition: .3s left ease;
    display: flex;
    width: 530px;
    max-width: 90%;
    z-index: 10;
}

nav.mobile_package > div.mobile_package.mobile_package.mobile_package {
    padding: 12px
}

nav.mobile_package > label.mobile_package.mobile_package.mobile_package {
    --padding: 12px;
    position: absolute;
    top: var(--padding);
    right: var(--padding)
}

input:checked.main-nav.mobile_package + label.mobile_package.mobile_package.mobile_package {
    --opacity: .4;
    pointer-events: all
}

input.mobile_package:checked ~ .catalogNav.mobile_package.mobile_package.mobile_package {
    left: 0
}

.catalog.mobile_package.mobile_package.mobile_package.mobile_package {
    background: var(--black-100);
    padding-right: 34px
}

.catalog.mobile_package > div.mobile_package.mobile_package.mobile_package {
    display: flex;
    width: max-content;
    height: 2rem;
    gap: 6px;
    align-items: center;
    -o-object-fit: contain;
    object-fit: contain
}

.catalog.mobile_package > div h5.mobile_package.mobile_package.mobile_package {
    font-weight: 500
}

.catalog.mobile_package > div.mobile_package svg {
    padding: 4px
}

button.mobile_package.mobile_package.mobile_package.mobile_package {
    background: none;
    color: #000;
    padding: 0
}

li.mobile_package > button.mobile_package.mobile_package.mobile_package, a.mobile_package.mobile_package.mobile_package.mobile_package {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height)
}

li.mobile_package.mobile_package.mobile_package.mobile_package {
    list-style-type: none;
    margin: 30px 0;
    position: relative
}

li.active.mobile_package > button.mobile_package.mobile_package.mobile_package {
    font-weight: 600
}

li.active.mobile_package.mobile_package.mobile_package.mobile_package:before {
    --width: 80%;
    content: "";
    position: absolute;
    top: 50%;
    left: 120px;
    background: #fff;
    width: 30px;
    height: 30px;
    -webkit-clip-path: polygon(0 50%, var(--width) 0%, var(--width) 100%);
    clip-path: polygon(0 50%, var(--width) 0%, var(--width) 100%);
    transform: translateY(-50%)
}

.categories.mobile_package label.mobile_package.mobile_package.mobile_package {
    margin: 15px 0
}

.categories.mobile_package.mobile_package.mobile_package.mobile_package {
    width: 100%;
    margin-top: calc(2rem + 15px);
    overflow: auto;
    padding-right: 3px;
    margin-right: 5px;
    scrollbar-gutter: stable
}

.categories.mobile_package label.mobile_package.mobile_package.mobile_package {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.categories.mobile_package svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
    transition: transform .3s
}

.categories.mobile_package .item-details.mobile_package.mobile_package.mobile_package {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s
}

.categories.mobile_package .item-details.mobile_package > div.mobile_package.mobile_package {
    overflow: hidden
}

.categories.mobile_package .item-details.mobile_package > div.mobile_package > div.mobile_package {
    margin-block: 30px
}

.categories.mobile_package .item-details.mobile_package > div.mobile_package > div.mobile_package:first-of-type {
    margin-top: 15px
}

.categories.mobile_package .item-details.mobile_package > div.mobile_package > div.mobile_package:last-of-type {
    margin-bottom: 15px
}

.categories.mobile_package input.mobile_package:checked + label.mobile_package svg {
    transform: rotate(90deg)
}

.categories.mobile_package input.mobile_package:checked + label.mobile_package + .item-details.mobile_package {
    grid-template-rows: 1fr
}

.item-details.mobile_package.mobile_package.mobile_package.mobile_package {
    padding-left: 20px
}

.mobile_package.mobile_package.mobile_package.mobile_package::-webkit-scrollbar {
    width: 4px
}

.mobile_package.mobile_package.mobile_package.mobile_package::-webkit-scrollbar-track {
    background: #fff
}

.mobile_package.mobile_package.mobile_package.mobile_package::-webkit-scrollbar-thumb {
    background: var(--black-300);
    border-radius: 4px
}

@media (min-width: 768px) {
    nav.mobile_package.mobile_package.mobile_package.mobile_package, label.mobile_package.mobile_package.mobile_package.mobile_package {
        display: none
    }
}

input.mobile_article.mobile_article.mobile_article {
    display: none
}

input.main-nav.mobile_article + label.mobile_article.mobile_article {
    --opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, var(--opacity));
    z-index: 4;
    pointer-events: none
}

input:checked.main-nav.mobile_article + label.mobile_article.mobile_article {
    --opacity: .4;
    pointer-events: all
}

input.mobile_article:checked ~ nav.mobile_article.mobile_article {
    display: flex
}

nav.mobile_article.mobile_article.mobile_article {
    --left-persentage: calc(50% + 10px);
    --bottom-persentage: 93px;
    height: 106px;
    width: 130px;
    padding: 0 1rem;
    background-color: #fff;
    border-radius: 10px;
    z-index: 25;
    position: fixed;
    bottom: var(--bottom-persentage);
    left: var(--left-persentage);
    transform: translate(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

nav.mobile_article > div.mobile_article.mobile_article {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

nav.mobile_article a.mobile_article.mobile_article {
    width: 100%;
    text-align: center;
    padding: 1rem
}

nav.mobile_article a.mobile_article + a.mobile_article {
    border-top: 2px solid rgba(0, 0, 0, .5)
}

a.mobile_article.mobile_article.mobile_article:hover {
    color: var(--primary-color-1)
}

p.mobile_article.mobile_article.mobile_article {
    --size: 25px;
    width: var(--size);
    height: var(--size);
    background-color: #fff;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(45deg);
    border: 2px solid rgba(0, 0, 0, .4)
}

.footer_popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    background-color: #00000061;
    overflow-y: auto;
    z-index: 100
}

.footer_popup .content {
    --padding: 10px;
    --padding-w: 10px;
    min-width: 20rem;
    border-radius: .3rem;
    background: #fff;
    padding: var(--padding);
    display: grid;
    gap: 1rem;
    position: relative;
    max-height: calc(100dvh - var(--padding) * 2);
    max-width: calc(100vw - var(--padding-w) * 2);
    overflow-y: auto
}

.footer_popup .content .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    --padding: 18px
}

.footer_popup .content .info img {
    -o-object-fit: contain;
    object-fit: contain;
    max-height: calc(100dvh - var(--padding) * 2 - 150px)
}

.footer_popup .content .info .popup_close {
    position: absolute;
    margin: 10px;
    right: var(--padding);
    color: #000;
    background: var(--cs-color);
    width: 24px;
    height: 24px;
    border-radius: 2px;
    cursor: pointer;
}

@media (min-height: 400px) {
    .footer_popup .content {
        --padding: 18px
    }
}

.prop_user {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    background: #0006;
}

.prop_user .card {
    width: 236px;
    height: 386px;
    margin: calc(50vh - 215px) auto 0 auto;
}

.footer_button {
    position: fixed;
    z-index: 7;
    bottom: 100px;
    right: 15px;
    width: 40px;
}

.footer_button .toTop {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color-1);
    color: #fff;
    border-radius: 100%;
    margin-bottom: 10px;
}

.footer_button .toTop:hover {
    background-color: var(--button-background-hover);
}

.footer_button .service {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #32b37d;
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.4);
    border-radius: 100%;
}

.footer_button svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 768px) {
    .footer_button {
        bottom: 30px;
        right: 30px;
        width: 52px;
    }

    .footer_button .toTop {
        width: 52px;
        height: 52px;
    }

    .footer_button .service {
        width: 52px;
        height: 52px;
    }

    .footer_button svg {
        width: 30px;
        height: 30px;
    }
}

.full_box {
    max-width: 1600px;
    width: 100%;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 10px;
    background: #ffffff;
}

.quick-links a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 50%;
    box-shadow: 1px 0 var(--border-color), 0 1px var(--border-color);
    padding: 20px 10px;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-transform: none;
    transition: color .2s ease-in-out;
    background-position: center center;
    background-size: cover;
    flex-grow: 1;
}

.quick-links a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .3;
    transition: opacity .2s ease;
    will-change: opacity;
    z-index: 1;
}


.quick-links a:hover:after {
    opacity: 0.5;
}

.quick-links a .title {
    z-index: 2;
    position: relative;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
    color: #ffffff;
    font-size: 22px;
    display: block;
    line-height: 40px;
}

.quick-links a:hover .title {
    color: var(--primary-color-1-hover);
}

@media screen and (min-width: 641px) {
    .quick-links a {
        width: 33.3333%;
        padding: 24px;
    }
}

@media screen and (min-width: 1000px) {
    .quick-links a {
        width: 16.6667%;
    }
}

.empty_box {
    padding: 20px;
    text-align: center;
}


nav.position {
    display: block;
    text-align: left;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px 9px
}

nav.position * {
    display: inline-block;
    font-size: 12px
}

@media (min-width: 1600px) {
    nav.position {
        padding: 15px 0
    }
}

nav.position a:hover {
    color: var(--primary-color-1)
}

nav.position h1 {
    font-size: var(--body-3-font-size);
    line-height: 1;
    font-weight: 400
}

.product {
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    height: 100%
}

.product:hover a {
    color: var(--primary-color-1)
}

.product a {
    display: grid
}

.product .discount {
    --padding: 1.9rem;
    width: 100%;
    background: var(--discount-color);
    color: #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
    position: absolute;
    top: var(--padding);
    left: var(--padding);
    text-align: center;
    padding: 4px 10px;
    z-index: 2
}

.product .thumb {
    /*background: var(--black-50);*/
    width: 100%;
    margin: 0 auto;
}

.product .thumb img {
    /*--fail-background: var(--black-400);*/
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    aspect-ratio: 1/1
}

.packages .product .thumb img {
    aspect-ratio: 108 / 135;
}

.product .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /*background: var(--black-50);*/
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    padding: 6px;
    z-index: 0
}

.product .info h2 {
    font-size: unset;
    font-weight: 400;
    line-height: unset
}

.product .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 21px;
    overflow: hidden
}

.product .name {
    font-weight: 400;
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    word-break: break-all
}

.product .price {
    display: flex;
    margin-top: auto
}

.product .price p:nth-of-type(1) {
    font-weight: 700;
    font-size: var(--current-price-font-size);
    line-height: var(--current-price-line-height)
}

.product .price p:nth-of-type(2) {
    font-size: var(--original-price-font-size);
    text-decoration: line-through
}

.product .price p.red {
    color: var(--primary-color-2);
}

.product .state {
    display: flex;
    gap: 0 10px;
    justify-content: space-between
}

.product .state p.source {
    font-size: var(--original-price-font-size);
    text-decoration: line-through;
    display: none;
}

.product a.cart_button {
    border: 1px solid var(--primary-color-1);
    background: var(--primary-color-1);
    border-radius: 4px;
    padding: .5rem 1rem;
    text-align: center;
    color: #fff;
    margin-top: 5px;
}

.product a.cart_button.disabled {
    border: 1px solid black;
    background-color: var(--black-200);
    color: #000;
}

@media (max-width: 440px) {
    .product .state p.source {
        display: block
    }

    .product .price p.source {
        display: none
    }
}

@media (min-width: 768px) {
    .product a.cart_button {
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .product:hover a.cart_button {
        opacity: 1;
    }
}

.pagination {
    --width: 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    -moz-column-gap: 15px;
    column-gap: 15px
}

.pagination .page-item {
    height: 35px;
    min-width: 25px;
    vertical-align: bottom;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.pagination .page-item.item-main {
    padding: 6px;
    background-color: var(--black-200);
    border-radius: 2px;
    font-weight: 500;
    font-size: 18px;
    color: var(--primary-color-1)
}

.pagination .page-item.item-main.active {
    background-color: var(--primary-color-1);
    color: #fff
}

.pagination .page-item.item-dot {
    color: var(--black-700)
}

.pagination svg {
    --size: 28px;
    width: var(--size);
    height: var(--size)
}

.pagination a:last-child svg {
    transform: rotate(180deg)
}

.pagination .disabled {
    pointer-events: none;
    color: var(--black-300)
}


.search_base {
    --round: 4px;
    position: relative
}

.search_base input {
    padding: .5rem .5rem .5rem 1.5rem;
    width: var(--inputWidth);
    border: 0;
    background: 0;
    flex: 1
}

.search_base input:focus {
    outline: 0
}

.search_base input::-moz-placeholder {
    color: #999
}

.search_base input::placeholder {
    color: #999
}

.search_base label {
    --height: 40px;
    display: flex;
    align-items: center;
    border-radius: var(--round);
    width: 100%;
    height: var(--height);
    position: relative;
    background: #efefef
}

.search_base label:hover .searchBtn {
    background: var(--button-background-hover)
}

.search_base .searchBtn {
    padding: 10px;
    background: var(--button-background-color);
    width: var(--height);
    height: var(--height)
}

.search_base .searchBtn svg {
    fill: #fff;
    border-radius: var(--round)
}

.search_base .searchBtn:hover {
    cursor: pointer
}

.swiper.banner_swiper {
    display: flex;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1600/530;
    max-height: 530px;
    background-color: #000;
    position: relative
}

.swiper.banner_swiper:before {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: unset;
    transform: translate(-50%);
    background: #000;
    z-index: -1
}

.swiper.banner_swiper .swiper-button-prev, .swiper.banner_swiper .swiper-button-next {
    width: 50px;
    height: 80px;
    margin-top: -40px
}

.swiper.banner_swiper img {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper.banner_swiper {
    display: unset;
    max-width: unset
}

.swiper.banner_swiper .swiper-slide {
    opacity: .5;
    width: 100%;
    max-width: 1600px
}

.swiper.banner_swiper .swiper-slide.swiper-slide-active {
    opacity: 1
}

@media (min-width: 1600px) {
    .swiper.banner_swiper .swiper-button-prev, .swiper.banner_swiper .swiper-button-next {
        --offset: min(50vw + 800px, 100%);
        --translate-offset: calc(100% + 1rem);
        position: absolute;
        top: 50%
    }

    .swiper.banner_swiper .swiper-button-prev {
        left: auto;
        right: var(--offset);
        translate: var(--translate-offset) 0
    }

    .swiper.banner_swiper .swiper-button-next {
        left: var(--offset);
        right: auto;
        translate: calc(var(--translate-offset) * -1) 0
    }
}


.product_swiper {
    display: flex;
    background-color: #fff;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.product_swiper .swiper{
    width: 100%;
}

.product_swiper .swiper-wrapper {
    position: relative;
}

.product_swiper .swiper-slide {
    width: min(40%, 200px);
    height: unset;
}

.product_swiper button {
    --opacity: 0.9;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 20px;
    width: 30px;
    height: 30px;
    background: rgba(72, 199, 142, var(--opacity));
    color: var(--cs-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.product_swiper button svg{
    width: 20px !important;
    height: 20px !important;
}
.product_swiper button.next{
    transform: rotate(180deg);
    left: unset;
    right: 0;
}
.product_swiper button.swiper-button-disabled{
    display: none;
}

@media (min-width: 768px) {
    .product_swiper .swiper-slide {
        width: min(48%, 220px);
        height: unset;
    }
}


@media (min-width: 1600px) {
    .product_swiper {
        align-items: center;
        justify-content: center;
    }

    .product_swiper button {
        --opacity: 0.6;
        position: relative;
        display: unset;
        left: unset;
        top: unset;
        background: rgba(0, 0, 0, var(--opacity));
        height: 80px;
        width: unset;
        min-width: 50px;
        border-radius: 0;
        padding: 0;
        transition: .3s background ease;
        color: #ffffff;
        cursor: pointer;
        z-index: 2;
    }

    .product_swiper button svg{
        width: unset !important;
        height: unset !important;
    }

    .product_swiper button.swiper-button-disabled {
        display: unset;
        --opacity: .2;
    }

    .product_swiper .swiper {
        width: 1400px;
        max-width: 100%;
        margin: 0 auto;
        z-index: 0;
    }
}

.desktop_swiper {
    display: none;
    padding: 0 65px;
    position: relative;
    z-index: 1;
}

.desktop_swiper .prev, .desktop_swiper .next {
    --opacity: 0.6;
    position: absolute;
    z-index: 0;
    top: 50%;
    min-width: 50px;
    height: 80px;
    margin-top: -40px;
    background: rgba(0, 0, 0, var(--opacity));
    cursor: pointer;
    color: #ffffff;
}

.desktop_swiper .swiper-button-lock {
    display: block;
}

.desktop_swiper .prev {
    left: 0;
}

.desktop_swiper .next {
    transform: rotate(180deg);
    right: 0;
}

.desktop_swiper .prev.swiper-button-disabled, .desktop_swiper .next.swiper-button-disabled {
    --opacity: .2;
}

.desktop_swiper .swiper-slide {
    --card-height: 373px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: calc(var(--card-height) * 2 + var(--gap));
    gap: 15px;
}

.desktop_swiper .swiper-slide .product .info h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.mobile_swiper {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.mobile_swiper .swiper{
    width: 100%;
}

.mobile_swiper .swiper-wrapper {
    position: relative;
}

.mobile_swiper button {
    --opacity: .9;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 20px;
    width: 30px;
    height: 30px;
    background: rgba(72, 199, 142, var(--opacity));
    color: var(--cs-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile_swiper button svg{
    width: 20px !important;
    height: 20px !important;
}
.mobile_swiper button.next{
    transform: rotate(180deg);
    left: unset;
    right: 0;
}
.mobile_swiper button.swiper-button-disabled{
    display: none;
}

.mobile_swiper .swiper-slide {
    width: 200px;
    height: 100%;
}

.mobile_swiper .swiper-slide .product .info h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media (min-width: 1600px) {
    .mobile_swiper {
        display: none;
    }

    .desktop_swiper {
        display: block;
    }
}

/*.html_content * {*/
/*    line-height: 1.2*/
/*}*/

.html_content {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.html_content .btn, .html_content .row, .html_content .tech-section-row,
.html_content .swiper,
.html_content .swiper-pagination {
    all: unset;
}

.html_content .swiper *, .html_content .swiper-pagination * {
    all: unset;
}

.html_content h3 {
    font-size: unset;
    line-height: unset;
}

.html_content ul {
    margin-left: 2rem
}

.html_content a {
    color: var(--primary-color-1)
}

.html_content a:hover {
    color: var(--primary-color-1-hover)
}

.html_content img {
    height: unset
}


.numberInput {
    display: flex;
    width: 90px;
    position: relative;
}

.numberInput input.number {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
    border: 1px solid #000;
    border-radius: 4px
}

.numberInput input.number::-webkit-outer-spin-button, .numberInput input.number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.numberInput button {
    --padding: 10px;
    background: 0;
    color: #000;
    position: absolute;
    top: 0;
    padding: 0;
    width: 14px;
    height: 100%
}

.numberInput button.minus {
    left: var(--padding)
}

.numberInput button.add {
    right: var(--padding)
}

.numberInput button:disabled {
    color: var(--black-500)
}

.notice_box {
    --height: 100px;
    --padding: 10px;
    display: grid;
    align-content: flex-start;
    gap: 10px;
    position: fixed;
    top: calc(var(--height) + var(--padding));
    right: var(--padding);
    z-index: 20250315;
    max-height: 70vh;
    overflow-y: auto;
}

@media (min-width: 1600px) {
    .notice_box {
        right: calc(50vw - 800px)
    }
}

.notice_box .notice_item {
    display: grid;
    gap: 10px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--black-400);
    padding: 16px 10px;
    width: min(380px, 100vw - 18px);
    margin-bottom: .5rem
}

.notice_box .notice_item .title {
    display: flex;
    justify-content: space-between
}

.notice_box .notice_item .title h3 {
    color: var(--primary-color-1);
    font-size: 16px;
    font-weight: 700;
    line-height: normal
}

.notice_box .notice_item .title button {
    --size: 24px;
    width: var(--size);
    height: var(--size);
    padding: 0;
    background: 0
}

.notice_box .notice_item hr {
    background: var(--black-400)
}

.notice_box .notice_item p {
    color: var(--black-600);
    font-size: 16px;
    font-weight: 400;
    line-height: normal
}

@media screen and (max-width: 767px) {
    .hidden-phone {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .hidden-desktop {
        display: none !important;
    }
}

.sys_message {
    width: 100%;
    max-width: 1600px;
    padding: var(--padding);
    background: #fff;
    text-align: center;
    line-height: 30px;
}

.sys_message dl dt {
    color: var(--primary-color-1);
    font-size: 20px;
    padding: 10px 0;
}

.sys_message dl dd {
    margin-top: 10px;
}

.sys_message dl dd a {
    margin: 0 10px;
    padding: .5rem 1rem;
}

.sys_message dl dd a:hover {
    color: var(--primary-color-1);
}


.load_box {
    --size: 40px;
    --width: 10px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-image: conic-gradient(var(--other-status-color), var(--primary-color-1));
    position: relative;
    animation: load_round 1.5s linear infinite;
    display: inline-block;
}

.load_box .load_box_inner {
    width: calc(var(--size) - var(--width));
    height: calc(var(--size) - var(--width));
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: calc(var(--width) / 2);
    left: calc(var(--width) / 2);
}

@keyframes load_round {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.value-picker-wrapper * {
    max-width: unset;
}

.value-picker-wrapper .icon {
    fill: currentColor;
    vertical-align: middle;
    pointer-events: none;
    background: none;
    display: inline-block;
    overflow: visible;
}

.value-picker-wrapper button {
    -webkit-appearance: button;
    cursor: pointer;
    text-transform: none;
    background: none;
    border-radius: 0;
    overflow: visible;
    color: inherit;
    font: inherit;
}

.value-picker-button svg {
    width: 9px;
    height: 7px;
    margin-left: 2px;
    transition: transform .2s ease-in-out;
}

.value-picker-button svg path {
    stroke-width: 2.5px;
}

.value-picker-button--pill {
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--cs-color);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    display: flex;
    position: relative;
}

.value-picker-button--pill svg {
    width: 12px;
    height: 8px;
    transition: transform .2s ease-in-out;
}

.value-picker-button--pill path {
    stroke-width: 2px;
}

.value-picker-wrapper.show .value-picker-button svg {
    transform: rotateZ(180deg);
}

.value-picker {
    z-index: 99;
    font-size: 16px;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    transition: visibility .35s ease-in-out;
    position: fixed;
    bottom: 0;
    left: 0;
}

.value-picker:before {
    content: "";
    opacity: 0;
    background: #000;
    width: 100vw;
    height: 100vh;
    transition: opacity .35s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
}

.value-picker-wrapper.show .value-picker {
    visibility: visible;
}

.value-picker-wrapper.show .value-picker:before {
    opacity: .4;
}

.value-picker-wrapper.show .value-picker .value-picker-inner {
    transform: translateY(0);
}

.value-picker .icon--nav-triangle-borderless {
    display: none;
}

.value-picker-inner {
    background: var(--cs-color);
    width: 100%;
    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}

.value-picker-header {
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    padding: 17px 20px 16px;
    display: flex;
}

.value-picker-header .icon--close {
    color: var(--primary-color-1);
    width: 17px;
    height: 17px;
}

.value-picker-title {
    margin: 0;
}

.value-picker-close svg {
    display: block;
}

.value-picker-list {
    overscroll-behavior: none;
    max-height: 430px;
    padding: 15px 0;
    list-style: none;
    overflow: auto;
}

.link {
    transition: color .2s ease-in-out;
}

.link:hover, .link:focus {
    color: var(--primary-color-1);
}

.value-picker-item {
    text-align: left;
    width: 100%;
    padding: 12px 50px 12px 20px;
    display: block;
    position: relative;
}

.value-picker-item svg {
    width: 13px;
    height: 11px;
    transition: transform .2s ease-in-out;
    position: absolute;
    top: 17px;
    right: 20px;
    transform: scale(0);
}

.value-picker-item.is-selected {
    color: var(--primary-color-1);
    font-weight: 500;
}

.value-picker-item.is-selected svg {
    transform: scale(1);
}

@supports (padding: max(0px)) {
    .value-picker-list {
        max-height: calc(430px + env(safe-area-inset-bottom, 0px) + 15px);
        padding-bottom: max(15px, env(safe-area-inset-bottom, 0px) + 15px);
    }
}


@media screen and (min-width: 768px) {
    .value-picker-wrapper {
        position: relative;
    }

    .value-picker {
        visibility: hidden;
        opacity: 0;
        background: var(--cs-color);
        color: var(--text-color);
        z-index: 4;
        cursor: auto;
        will-change: transform;
        border-radius: 3px;
        width: auto;
        min-width: 160px;
        height: auto;
        transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s ease-in-out;
        position: absolute;
        top: calc(100% + 10px);
        bottom: auto;
        left: auto;
        right: -25px;
        transform: scale(.9);
        box-shadow: 0 1px 5px 2px #0000001a;
    }

    .value-picker:before {
        display: none;
    }

    .value-picker.top {
        top: auto;
        bottom: calc(100% + 10px);
    }

    .value-picker-wrapper.show .value-picker {
        visibility: visible;
        opacity: 1;
        transition: opacity .4s cubic-bezier(0, 1, .4, 1), transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
        transform: scale(1.001);
    }

    .value-picker .icon--nav-triangle-borderless {
        z-index: 2;
        filter: drop-shadow(0 -2px 2px #0000001f);
        width: 18px;
        height: 8px;
        display: block;
        position: absolute;
        bottom: 100%;
        right: 20px;
    }

    .value-picker.top .icon--nav-triangle-borderless {
        top: 100%;
        bottom: auto;
        transform: rotateZ(180deg);
    }

    .value-picker-inner {
        border-radius: 3px;
        width: auto;
        transition: none;
        position: relative;
        transform: none !important;
    }

    .value-picker-inner--restrict {
        max-height: 300px;
        overflow: auto;
    }

    .value-picker-header {
        display: none;
    }

    .value-picker-list {
        white-space: nowrap;
        font-size: 16px;
        max-height: none;
        padding: 15px 0;
    }

    .value-picker-item {
        cursor: pointer;
        padding: 7px 25px;
        transition: color .15s ease-in-out, background .15s ease-in-out;
        display: block;
    }

    .value-picker-item.is-selected, .value-picker-item:hover {
        background: var(--selected-color);
        color: var(--primary-color-1);
        font-weight: normal;
    }

    .value-picker-item.is-selected svg, .value-picker-item:hover svg {
        display: none;
    }

}

.main_tab {
    width: 100%;
    max-width: 100vw;
    padding: 0 1rem;
}

.main_tab h3.tab_title {
    padding-bottom: 10px;
}

.main_tab .tab_content {
    width: 100%;
    height: 40px;
    overflow: hidden;
    border-bottom: 2px solid var(--primary-color-1);
    overflow-x: auto;
}

.main_tab .tab_list {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: flex;
}

.main_tab .tab_list .tab_item {
    padding: 0 20px;
    margin-left: -20px;
    vertical-align: middle;
    position: relative;
    line-height: 40px;
    cursor: pointer;
}

.main_tab .tab_list .tab_item .tab_item_content {
    width: 100%;
    padding: 0 8px;
    background-image: linear-gradient(to right, rgba(240, 240, 240, 1), rgba(223, 223, 223, 1));
}

.main_tab .tab_list .tab_item .tab_item_content:before {
    position: absolute;
    right: 0;
    content: "";
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 40px solid #dfdfdf;
    border-right: 20px solid transparent;
}

.main_tab .tab_list .tab_item .tab_item_content:after {
    position: absolute;
    left: 0;
    content: "";
    top: 0;
    width: 0;
    height: 0;
    border-top: 40px solid #f0f0f0;
    border-left: 20px solid transparent;
}

.main_tab .tab_list .tab_item.cur .tab_item_content {
    background: var(--primary-color-1);
    color: #ffffff;
}

.main_tab .tab_list .tab_item.cur .tab_item_content:before {
    border-bottom-color: var(--primary-color-1);
}

.main_tab .tab_list .tab_item.cur .tab_item_content:after {
    border-top-color: var(--primary-color-1);
}

.main_tab .tab_list .tab_item:hover .tab_item_content {
    color: var(--primary-color-1);
}

.main_tab .tab_list .tab_item.cur .tab_item_content {
    color: #ffffff;
}


@media (min-width: 768px) {
    .main_tab {
        padding: 0;
    }

    .main_tab .tab_content {
        height: 60px;
    }

    .main_tab .tab_list .tab_item {
        line-height: 60px;
        font-weight: bold;
        font-size: 18px;
        padding: 0 40px;
        margin-left: -40px;
    }

    .main_tab .tab_list .tab_item .tab_item_content {
        padding: 0 10px;
    }

    .main_tab .tab_list .tab_item .tab_item_content:before {
        border-bottom-width: 60px;
        border-right-width: 40px;
    }

    .main_tab .tab_list .tab_item .tab_item_content:after {
        border-top-width: 60px;
        border-left-width: 40px;
    }
}


.packages_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(362px, 1fr));
    gap: 30px;
    justify-content: center;
}

.packages_list .packages_item {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    width: 100%;
    background: var(--black-50)
}

.packages_list .packages_item .cardTop, .packages_list .packages_item .cardBottom {
    display: grid;
    height: min-content;
    padding: 15px
}

.packages_list .packages_item .cardImage {
    margin-top: auto;
}

.packages_list .packages_item .cardBottom {
    gap: 12px;
    overflow: hidden;
}

.packages_list .packages_item .cardTop h2 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.packages_list .packages_item .goods_image img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    background: var(--black-300);
    aspect-ratio: 108 / 135;
}

.packages_list .packages_item .prices {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 39px
}

.packages_list .packages_item .prices > p {
    font-size: 20px;
}

.packages_list .packages_item .prices > p:last-child {
    font-size: 32px;
    font-weight: 700;
    margin-left: auto;
    color: var(--discount-color)
}

.packages_list .packages_item .prices > p:last-child span {
    font-size: 20px
}

.packages_list .packages_item .prices > p:nth-last-of-type(2) {
    text-decoration: line-through
}

.packages_list .packages_item .cardBottom .button {
    display: flex;
    align-items: center;
}

.packages_list .packages_item .cardBottom .button .compare {
    margin-right: 10px;
    padding: 10px 0;
}

.packages_list .packages_item .cardBottom .button .compare:hover {
    color: var(--primary-color-1);
}

.packages_list .packages_item .cardBottom .button .btn {
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 52px
}

@media (min-width: 768px) {
    .packages_list {
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .packages_list .packages_item .prices > p {
        font-size: 26px;
    }

    .packages_list .packages_item .prices > p:last-child {
        font-size: 40px;
    }

    .packages_list .packages_item .prices > p:last-child span {
        font-size: 24px
    }
}

@media (min-width: 1600px) {
    .packages_list {
        grid-template-columns: repeat(3, minmax(362px, 1fr));
    }

}

.compare_box {
    width: 100%;
    max-width: 1600px;
    position: fixed;
    z-index: 59;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    padding: 1rem;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 5px var(--black-700);

}

.compare_box .compare_header {
    width: 100%;
    display: -webkit-box;
    -webkit-box-align: center;
}

.compare_box .compare_header .compare_button {
    -webkit-box-flex: 1;
    display: flex;
    justify-content: right;
}

.compare_box .compare_header .compare_button li {
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--primary-color-1);
    background: transparent;
    cursor: pointer;
    margin-left: 10px;
    font-size: 12px;
    color: var(--primary-color-1);
    display: flex;
    align-items: center;
}

.compare_box .compare_header .compare_button li:hover {
    background: var(--selected-color);
}

.compare_box .compare_header .compare_button li.submit {
    border-color: var(--button-background-color);
    background: var(--button-background-color);
    color: var(--cs-color);
}

.compare_box .compare_header .compare_button li.submit:hover {
    border-color: var(--button-background-hover);
    background: var(--button-background-hover);
}

.compare_box .compare_header .compare_button li.clear {
    border-color: var(--not-compatible-color);
    background: transparent;
    color: var(--not-compatible-color);
}

.compare_box .compare_header .compare_button li.clear:hover {
    border-color: var(--not-compatible-color);
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--not-compatible-color);
}

.compare_box .compare_swiper {
    padding-top: 20px;
}

.compare_box .compare_swiper .swiper-slide {
    width: min(60%, 360px);
}

.compare_box .compare_item {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 10px;
    background: var(--background-color);
    border-radius: 5px;
    display: -webkit-box;
    -webkit-box-align: center;
    font-size: 12px;
}


.compare_box .compare_item .goods_image {
    width: 50px;
}

.compare_box .compare_item .content {
    -webkit-box-flex: 1;
    display: grid;
    gap: 5px;
    margin-left: 10px;
}

.compare_box .compare_item .content .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.compare_box .compare_item .content .bottom {
    display: -webkit-box;
    -webkit-box-align: center;
}

.compare_box .compare_item .content .price {
    -webkit-box-flex: 1;
    color: var(--discount-color);
    font-size: 16px;
    font-weight: bold;
}

.compare_box .compare_item .content .bottom .remove {
    margin-left: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--black-500);
}

.compare_box .compare_item .content .bottom .remove svg {
    width: 30px;
    height: 30px;
}

.compare_box .compare_item .content .bottom .remove:hover {
    color: var(--button-background-hover);
}

@media (min-width: 1200px) {
    .compare_box .compare_header .compare_button li {
        font-size: 14px;
        padding: 5px 10px;
    }

    .compare_box .compare_swiper .swiper-slide {
        width: 32.6%;
    }

    .compare_box .compare_item {
        font-size: 16px;
    }

    .compare_box .compare_item .goods_image {
        width: 70px;
    }

    .compare_box .compare_item .content {
        gap: 10px;
    }

    .compare_box .compare_item .content .price {
        font-size: 18px;
    }
}

.compare_res_box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 99;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.compare_res_box * {
    max-width: unset;
}

.compare_res_box .box {
    width: 100%;
    max-width: 1600px;
    background: var(--cs-color);
    border-radius: 5px;
    padding: 10px;
}

.compare_res_box .box .header {
    position: sticky;
    left: 0;
    top: 0;
    display: -webkit-box;
    -webkit-box-align: center;
}

.compare_res_box .box .header dl.title {
    -webkit-box-flex: 1;
    margin-right: 10px;
    display: flex;
    flex-flow: column;
    gap: 5px;
}

.compare_res_box .box .header dl.title dt {
    font-size: 16px;
    font-weight: bold;
}

.compare_res_box .box .header .title dd {
    font-size: 14px;
    color: var(--other-status-color);
    display: none;
}

@media (orientation: portrait) {
    .compare_res_box .box .header .title dd {
        display: unset;
    }
}

.compare_res_box .box .header .close {
    width: 30px;
    height: 30px;
    padding: 2px;
    cursor: pointer;
    color: var(--black-600);
}

.compare_res_box .box .header .close svg {
    width: 100%;
    height: 100%;
}

.compare_res_box .box .header .close:hover {
    color: var(--primary-color-1);
}

.compare_res_box .box .content {
    width: 100%;
    max-height: 80vh;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.compare_res_box .box .content .res_container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 5px;
    overflow: auto;
}

.compare_res_box .box .content .res_container .top_box, .compare_res_box .box .content .res_container .bottom_box {
    position: sticky;
    z-index: 2;
    left: 0;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, minmax(270px, 1fr));
    background: var(--cs-color);
}


.compare_res_box .box .content.count_3 .res_container .top_box, .compare_res_box .box .content.count_3 .res_container .bottom_box {
    grid-template-columns: repeat(3, minmax(270px, 1fr));
}

.compare_res_box .box .content .res_container .top_box {
    top: -1px;
    padding-bottom: 5px;
}

.compare_res_box .box .content .res_container .bottom_box {
    bottom: -1px;
    padding-top: 5px;
}

.compare_res_box .box .content .res_container .bottom_box .bottom {
    display: flex;
    flex-flow: column;
    gap: 5px;
    background: var(--cs-color);
}

.compare_res_box .box .content .res_container .content_box {
    flex: 1;
}

.compare_res_box .box .content .res_container .content_box .list_box {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 5px 0;
}

.compare_res_box .box .content .title {
    font-size: 14px;
    font-weight: bold;
    background: var(--cs-color);
}

.compare_res_box .box .content .info_list {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, minmax(270px, 1fr));
}

.compare_res_box .box .content.count_3 .info_list {
    grid-template-columns: repeat(3, minmax(270px, 1fr));
}

.compare_res_box .box .content .info_list .info_list_item {
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    display: -webkit-box;
    /*-webkit-box-align: center;*/
    padding-bottom: 5px;
}


.compare_res_box .box .content .info_list .info_list_item dl {
    -webkit-box-flex: 1;
    display: flex;
    flex-flow: column;
    gap: 5px;
}

.compare_res_box .box .content .info_list .info_list_item dl dt {
    color: var(--black-600);
}

.compare_res_box .box .content .info_list .info_list_item dl dd.diy_txt {
    display: flex;
    gap: 10px;
}

.compare_res_box .box .content .info_list .info_list_item dl dd.diy_txt .goods_image {
    --size: 40px;
}

.compare_res_box .box .content .info_list .info_list_item dl dd.diy_txt p.txt_left {
    flex: 1;
}

.compare_res_box .box .content .info_list .info_list_item dl dd.diy_txt p.txt_right .market_price {
    font-size: var(--original-price-font-size);
    text-decoration: line-through;
    color: var(--black-600);
}

.compare_res_box .box .content .info_list .info_list_item .tips {
    margin-left: 5px;
}

.compare_res_box .box .content dl.price {
    display: -webkit-box;
    -webkit-box-align: center;
}

.compare_res_box .box .content dl.price dd {
    -webkit-box-flex: 1;
    margin-left: 5px;
    text-align: right;
    font-size: 20px;
    font-weight: bold;
}

.compare_res_box .box .content dl.price dd.amount {
    color: var(--primary-color-1);
}

.compare_res_box .box .content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}

.compare_res_box .box .content .button a {
    width: 60%;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

@media (min-width: 1200px) {
    .compare_res_box .box {
        padding: 15px;
    }

    .compare_res_box .box .content .res_container {
        gap: 10px;
    }

    .compare_res_box .box .header dl.title dt {
        font-size: 18px;
    }

    .compare_res_box .box .content .res_container .bottom_box .bottom {
        gap: 10px;
    }

    .compare_res_box .box .content .title {
        font-size: 16px;
    }

    .compare_res_box .box .content .info_list .info_list_item {
        font-size: 16px;
    }

    .compare_res_box .box .content dl.price dd {
        font-size: 24px;
    }

    .compare_res_box .box .content .button a {
        padding: 0.75rem 1rem;
    }
}


.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    background-color: #00000061;
    overflow-y: auto;
    z-index: 100
}

.lightbox .lightbox_content {
    --padding: 10px;
    --padding-w: 10px;
    min-width: 20rem;
    border-radius: .3rem;
    background: #fff;
    padding: var(--padding);
    display: grid;
    gap: 1rem;
    position: relative;
    max-height: calc(100dvh - var(--padding) * 2);
    max-width: calc(100vw - var(--padding-w) * 2);
    overflow-y: auto
}

@media (min-height: 400px) {
    .lightbox .lightbox_content {
        --padding: 18px
    }
}

.couponType {
    --line-height: 15px;
    --padding-horizontal: 5px;
    --padding-vertical: 3px;
    padding: var(--padding-vertical) var(--padding-horizontal);
    border-radius: 4px;
    font-size: 12px;
    line-height: var(--line-height);
    width: fit-content;
    color: #fff;
    position: relative
}

.couponType .desc {
    color: #000;
    position: absolute;
    top: calc(var(--padding-vertical) * 2 + var(--line-height) + 2px);
    left: 50%;
    transform: translate(-50%);
    z-index: 10;
    display: none;
    border: 2px solid var(--black-200);
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    min-width: 200px;
    padding: 4px
}

.couponType:hover .desc {
    display: unset
}

.couponType.type_0 {
    background-color: var(--campaign-tag-color)
}

.couponType.type_1 {
    background-color: #e03ca8
}


.layer-cor.layui-layer {
    border-radius: 5px;
}

.layer-cor .layui-layer-title {
    border-bottom: none;
    background: var(--cs-color);
    font-size: 22px;
    height: 50px;
    border-radius: 5px 5px 0 0;
    padding: 5px 50px 5px 15px;
    line-height: unset;
    display: flex;
    align-items: center;
}

.layer-cor .layui-layer-setwin {
    top: 17px;
    right: 13px;
}

.layer-cor .layui-layer-btn a {
    border-color: var(--primary-color-1);
    border-radius: 5px;
    color: var(--primary-color-1);
}

.layer-cor .layui-layer-btn a:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.layer-cor .layui-layer-btn .layui-layer-btn0 {
    background-color: var(--primary-color-1);
    color: var(--cs-color);

}

.layer-cor .layui-layer-btn .layui-layer-btn0:hover {
    background-color: var(--button-background-hover);
}

.layer-cor .confirm_tips {
    width: 100%;
    display: flex;
    max-width: min(82vw, 1000px);
    min-width: 320px;
    flex-flow: column;
    gap: 5px;
}

.layer-cor .confirm_tips .tips_title {
    font-size: 16px;
}

.layer-cor .confirm_tips .tips_content {
    color: var(--black-700);
}


.propBox {
    max-width: min(500px, 92vw);
    min-width: 320px;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}

.propBox .propForm {
    --box-gap: 10px;
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: var(--box-gap);
}

.propBox .propForm .propGoodsSel {
    display: flex;
    gap: var(--box-gap);
    overflow-y: auto;
    padding: var(--box-gap) 0;
}

.propBox .propForm .propGoodsSel .item {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--box-gap);
    padding: var(--box-gap);
    border: 1px solid var(--black-200);
    border-radius: 5px;
}

.propBox .propForm .propGoodsSel .item .image {
    width: 100%;
}

.propBox .propForm .propGoodsSel .item .image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    -o-object-fit: contain;
    object-fit: contain;
}

.propBox .propForm .propGoodsSel .item .name {
    font-size: 14px;
}

.propBox .propForm .propGoodsSel .item:hover:not(.cur) {
    border-color: var(--black-400);
}

.propBox .propForm .propGoodsSel .item.cur {
    border-color: var(--primary-color-1);
}

.propBox .propForm .propTips {
    font-size: var(--body-3-font-size);
}

.propBox .propForm .propButton {
    display: flex;
    align-items: center;
    gap: var(--box-gap);
}

.propBox .propForm .propButton .btn, .propBox .propForm .propButton .btn_first {
    flex: 1;
}

.propBox .propForm .propButton .btn, .propBox .propForm .propButton a.btn_first {
    text-align: center;
}

.propBox .propForm .propButton .btn, .propBox .propForm .propButton a.btn {
    text-align: center;
}


.steps {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
}

.steps .item {
    flex: 1;
    display: flex;
    flex-flow: column;
}

.steps .item .title {
    line-height: 22px;
    text-align: center;
}

.steps .item .line {
    height: 22px;
    position: relative;
    z-index: 1;
}

.steps .item .line:before {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 10px;
    width: 100%;
    height: 2px;
    background-color: var(--black-200);
}

.steps .item .line .dot {
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 3;
    left: 50%;
    margin-left: -6px;
    top: 5px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--black-200);
}

.steps .item.cur .line:before {
    background-color: var(--primary-color-1);
}

.steps .item.cur .line .dot {
    background-color: var(--primary-color-1);
    border-color: var(--primary-color-1);
}

.thanks {
    width: 100%;
    max-width: 1600px;
    padding: var(--padding);
    background: #fff;
    line-height: 30px;
    display: flex;
    flex-flow: column;
    gap: 10px;
    align-items: center;
}

.thanks img {
    max-width: 250px;
}

.thanks p {
    color: var(--black-700);
}


.multiple_box {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.multiple_box .upload_btn_box {
    display: flex;
}

.multiple_box .upload_btn_box label {
    margin-bottom: 0 !important;
}

.multiple_box .upload_btn_box .upload_btn {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    padding: 0 16px 0 30px;
    background: url(../images/upload_btn.png) no-repeat 12px center var(--primary-color-1);
    border-radius: 4px;
    color: var(--cs-color);
}

.multiple_box .upload_btn_box .webuploader-pick-hover .upload_btn:not([disabled]) {
    background-color: var(--primary-color-2);
    color: var(--cs-color);
}

.multiple_box .upload_image ul {
    width: 100%;
    display: flex;
    gap: 15px;
}

.multiple_box .upload_image ul li {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.multiple_box .upload_image ul li .upload_thumb {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.multiple_box .upload_image ul li .upload_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--black-300);
}

.multiple_box .upload_image ul li .upload_thumb .upload_del {
    font-size: 12px;
    background-color: var(--cs-color);
    width: 16px;
    height: 16px;
    border: solid 1px rgba(0, 0, 0, .4);
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: -9px;
    right: -9px;
    -webkit-text-size-adjust: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.multiple_box .upload_image ul li .upload_thumb .upload_del:hover {
    color: #FFF;
    text-decoration: none;
    background-color: var(--button-background-hover);
    border-color: var(--button-background-hover);
}

@media (min-width: 768px) {
    .multiple_box .upload_btn_box {
        justify-content: end;
    }
}

.propFullBox {
    max-width: min(1200px, 92vw);
    min-width: 320px;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}

.propFullBox .address_form {
    width: 100%;
}

.propFullBox .address_form .form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.propFullBox .address_form .form label {
    display: grid;
    gap: 6px;
    flex: 1 1 20rem;
}

.propFullBox .address_form .form span {
    color: red
}

.propFullBox .address_form .form label input, .propFullBox .address_form .form label textarea {
    background: var(--black-100);
    border: 0;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    resize: vertical
}

.propFullBox .address_form .form label input:disabled, .propFullBox .address_form .form label textarea:disabled {
    background: var(--black-300);
    color: var(--black-500)
}

.propFullBox .address_form .form label input:hover:not([disabled]), .propFullBox .address_form .form label textarea:hover:not([disabled]) {
    background: var(--black-200)
}

.propFullBox .address_form .form label select {
    background: var(--black-100);
    border: 0;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px
}

.propFullBox .address_form .form label select:hover:not([disabled]) {
    background: var(--black-200)
}

.propFullBox .address_form .form label .mobile_input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.propFullBox .address_form .form label .mobile_input input {
    flex: 1;
}

.propFullBox .address_form .btns {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.propFullBox .address_form button {
    justify-self: flex-start
}

.propFullBox .address_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.propFullBox .address_list .item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--black-200);
    border-radius: 5px;
    cursor: pointer;
}

.propFullBox .address_list .item.cur {
    border-color: var(--primary-color-1);
}

.propFullBox .address_list .item dl.title {
    display: flex;
    gap: 5px;
    align-items: center;
}

.propFullBox .address_list .item dl.title dd {
    flex: 1;
    font-size: 14px;
    color: var(--black-700);
}

.propFullBox .address_list .item .info {
    font-size: 14px;
    color: var(--black-700);
}

.propFullBox .propFullButton {
    display: flex;
    justify-content: right;
    margin-top: 20px;
}

.propFullBox .propFullButton .btn {
    padding: .5rem 2rem;
}

.wcsl_feedback {
    margin: 30px auto 0 auto;
    padding-bottom: 30px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.wcsl_feedback .wcsl_feedback_title {
    text-align: center;
    font-size: 18px;
}

.wcsl_feedback .wcsl_feedback_desc {
    text-align: center;
    line-height: 1.4;
    font-size: 14px;
}

.wcsl_feedback .wcsl_feedback_form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.wcsl_feedback .wcsl_feedback_form .input_item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wcsl_feedback .wcsl_feedback_form .select {
    background: var(--black-100);
    border: 0;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
}

.wcsl_feedback .wcsl_feedback_form .input_submit .btn {
    width: 100%;
    padding: .8rem 1rem;
}


.wcsl_feedback .wcsl_feedback_form .input {
    width: 100%;
    background: var(--black-100);
    border: 0;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    resize: vertical;
}

.wcsl_feedback .wcsl_feedback_tip {
    font-size: 12px;
}

.feedback_new {
    margin: 30px auto 0 auto;
    padding-bottom: 30px;
    max-width: 600px;
}

.feedback_new .form_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feedback_new .form_box .step_item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feedback_new .form_box .step_item .form_content {
    background: var(--cs-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.feedback_new .form_box .step_item .form_content.first {
    border-top: 10px solid var(--primary-color-1);
}

.feedback_new .form_box .step_item .form_content h3.title {
    padding: 20px 20px 0 20px;
}

.feedback_new .form_box .step_item .form_content .text {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feedback_new .form_box .step_item .form_content .text ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback_new .form_box .step_item .form_content .line {
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

.feedback_new .form_box .step_item .form_content p.require {
    padding: 0 20px;
    color: var(--primary-color-2);
    font-size: 14px;
}

.feedback_new .form_box .step_item .form_content h5.title {
    padding: 20px 20px 0 20px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback_new .form_box .step_item .form_content h5.title span {
    display: none;
    color: var(--primary-color-2);
}

.feedback_new .form_box .step_item .form_content h5.title.require span {
    display: block;
}

.feedback_new .form_box .step_item .form_content.step_first h5.title {
    background: var(--primary-color-1);
    color: #FFFFFF;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px;
}

.feedback_new .form_box .step_item .form_content h6.title {
    padding: 20px 20px 0 20px;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback_new .form_box .step_item .form_content h6.title span {
    display: none;
    color: var(--primary-color-2);
}

.feedback_new .form_box .step_item .form_content h6.title.require span {
    display: block;
}

.feedback_new .form_box .step_item .form_content .input_item {
    padding: 0 20px;
}

.feedback_new .form_box .step_item .form_content .input_item input {
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    outline: 0;
}

.feedback_new .form_box .step_item .form_content .input_item input:focus {
    border-bottom: 1px solid var(--primary-color-1);
}

.feedback_new .form_box .step_item .form_content .input_item.more {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feedback_new .form_box .step_item .form_content .input_item.more .select {
    height: 40px;
    background: var(--cs-color);
    border: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    outline: 0;
}

.feedback_new .form_box .step_item .form_content .input_item.more input {
    flex: 1;
}

.feedback_new .form_box .step_item .form_content .ratio_item {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feedback_new .form_box .step_item .form_content .ratio_item .input {
    flex: 1;
    height: 20px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    outline: 0;
}

.feedback_new .form_box .step_item .form_content .ratio_item .input:focus {
    border-bottom: 1px solid var(--primary-color-1);
}

.feedback_new .form_box .step_item .form_content .score_box {
    padding: 0 20px;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    gap: 10px;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item dl dt {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item dl dd {
    width: 40px;
    height: 40px;
    background: url("../images/icon_star.png") no-repeat 0 0;
    cursor: pointer;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item dl.hover dd {
    background-position: 0 -40px;
}

.feedback_new .form_box .step_item .form_content .score_box .score_item dl.cur dd {
    background-position: 0 -80px;
}

.feedback_new .form_box .step_item .form_content .score_box.good .score_item {
    flex-direction: column;
}

.feedback_new .form_box .step_item .form_content .score_box.good .score_item dl {
    width: 100%;
    flex-direction: unset;
}

.feedback_new .form_box .step_item .form_content .score_box.good .score_item dl dd {
    background-image: url("../images/icon_good.png");
}


@media (min-width: 768px) {
    .feedback_new .form_box .step_item .form_content .score_box.good .score_item {
        flex-direction: unset;
        gap: 5px;
    }

    .feedback_new .form_box .step_item .form_content .score_box.good .score_item dl {
        width: 40px;
        flex-direction: column;

    }
}


.feedback_new .form_box .step_item .form_content .error_tip {
    padding: 0 20px;
    color: var(--primary-color-2);
    font-size: 14px;
    display: none;
}

.feedback_new .form_box .step_item .form_content.errorItem {
    border-color: var(--primary-color-1);
}

.feedback_new .form_box .step_item .form_content.errorItem .error_tip {
    display: block;
}

.feedback_new .form_bottom {
    width: 100%;
    display: flex;
    gap: 15px;
    margin-top: 15px;
    align-items: center;
}

.feedback_new .form_bottom .form_step {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feedback_new .form_bottom .form_step dl {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
}

.feedback_new .form_bottom .form_step dl dt {
    min-width: 150px;
    height: 10px;
    background: var(--selected-color);
    border-radius: 5px;
}

.feedback_new .form_bottom .form_step dl dt span {
    width: 0;
    height: 10px;
    display: block;
    background: var(--primary-color-1);
    border-radius: 5px;
    transition: all 0.3s;
}

.feedback_new .form_bottom .form_step dl dd {
    text-align: center;
    font-size: 12px;
}

.feedback_new .form_bottom .next_button .btn {
    min-width: 80px;
}

.icon-pulse-dot {
    --icon-pulse-dot-color: var(--primary-color-2);
    --icon-pulse-dot-size: 12px;
    --icon-pulse-dot-border: 2px;
    top: 6px;
    left: 32px;
    background-color: var(--icon-pulse-dot-color);
    width: var(--icon-pulse-dot-size);
    height: var(--icon-pulse-dot-size);
    border: var(--icon-pulse-dot-border) solid #fff;
    border-radius: 50%;
    position: absolute;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    /*animation: icon-dot-pulse 3s infinite;*/
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.icon-pulse-dot:after {
    max-width: unset;
    content: '';
    position: absolute;
    top: calc(-1 * var(--icon-pulse-dot-border) * 2);
    left: calc(-1 * var(--icon-pulse-dot-border) * 2);
    right: calc(-1 * var(--icon-pulse-dot-border) * 2);
    bottom: calc(-1 * var(--icon-pulse-dot-border) * 2);
    border: var(--icon-pulse-dot-border) solid var(--icon-pulse-dot-color);
    opacity: 0;
    border-radius: 50%;
    /*animation: icon-dot-sonar 3s infinite;*/
}

@keyframes icon-dot-sonar {
    0% {
        transform: scale(.9);
        opacity: .5;
    }
    50% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes icon-dot-pulse {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.2);
    }
    25% {
        transform: scale(.95);
    }
    40% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
}

.captcha_prop_box {
    max-width: min(500px, 92vw);
    min-width: 320px;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}
.captcha_prop_box .prop_form {
    --box-gap: 10px;
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: var(--box-gap);
}
.captcha_prop_box .prop_form dl.prop_input{
    display: flex;
    gap: var(--box-gap);
    justify-content: center;
    align-items: center;
}
.captcha_prop_box .prop_form dl.prop_input dt{
    flex: 1;
    padding: 10px;
    height: 40px;
    background: var(--black-200);
    border-radius: 5px;
}
.captcha_prop_box .prop_form dl.prop_input dt input{
    width: 100%;
    height: 20px;
    border: none;
    outline: 0;
    background: none;
    text-transform: uppercase;
}
.captcha_prop_box .prop_form dl.prop_input dd {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    background-color: var(--black-200);
    position: relative;
    z-index: 1;
}
.captcha_prop_box .prop_form dl.prop_input dd:before{
    content: 'loading...';
    width: 100px;
    height: 40px;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-400);
}
.captcha_prop_box .prop_form dl.prop_input dd img{
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 5px;
    display: block;
}

.captcha_prop_box .prop_form .prop_tips{
    font-size: var(--body-3-font-size);
    color: var(--black-600);
}

.captcha_prop_box .prop_form .prop_button{
    display: flex;
    justify-content: start;
    gap: 15px;
}

.grecaptcha-badge {
    bottom: 280px !important;
    z-index: 9999;
}
@media (min-width: 768px) {
    .grecaptcha-badge {
        bottom: 160px !important;
    }
}