@charset "UTF-8";
:root {
    --darkBackColor: #191919;
    --mainColor: #008539;
    --mainColorLight: #009E3D;

    --dangerColor: #FF4D4F;
}
body {
    overflow-x: clip;
}

main {
    overflow-x: clip;
}

.label-text {
    user-select: none;
    pointer-events: none;
}

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

.image-code {
    cursor: pointer;
}

:where(.alert-primary) {
    padding: .4rem .75rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-size: .875rem;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.alert-primary {
    color: var(--mainColor);
    border-color: var(--mainColor);
    background-color: #F6FBF8;
}

/* 补充 */
.uk-section-xxsmall {
    padding-top: 10px;
    padding-bottom: 10px;
}

.uk-search-default .uk-search-input {
    height: 2rem;
    font-size: .75rem;
}

.uk-breadcrumb {
    margin: 0;
}

.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
    margin-left: 6px;
    margin-right: 6px;
    color: #000;
    font-size: .875rem;
}

.uk-breadcrumb,
.uk-breadcrumb>li>a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: .875rem;
    color: var(--mainColor);
}

.uk-breadcrumb>li>a {
    text-decoration: underline;
}

.uk-breadcrumb>*>a:hover {
    color: var(--mainColor);
    text-decoration: underline;
}

.uk-breadcrumb>:last-child>a:not([href]),
.uk-breadcrumb>:last-child>span {
    color: #000;
}

.uk-container {
    max-width: 1280px;
}

.uk-link,
a {
    color: var(--mainColor);
}

.uk-link,
a:hover {
    color: var(--mainColorLight);
}

.uk-textarea,
.uk-input,
.uk-select {
    border-radius: .5rem;
    font-size: .875rem;
}

.uk-textarea:focus,
.uk-input:focus,
.uk-select:focus {
    border-color: var(--mainColor);
}

.uk-button {
    border-radius: 500px;
}

.uk-button-primary {
    background-color: var(--mainColor);
}

.uk-button-primary:hover {
    background-color: var(--mainColorLight);
}

.uk-button-primary.uk-active,
.uk-button-primary:active {
    background-color: var(--mainColor);
}

.uk-overflow-auto {
    min-height: unset !important;
}

.vw-alert {
    display: block;
    padding: .25rem 1rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
}
* + .vw-alert {
    margin-top: 1rem;
}
.vw-alert:has( + *) {
    margin-bottom: 1rem;
}
.vw-alert-default {
    background: #efefef;
    color: #000;
}
.vw-alert-success {
    background: var(--mainColor);
    color: #fff;
}


label:has(input[type="checkbox"] + .checkbox) {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

input[type="checkbox"]:has(+ .checkbox) {
    display: none;
}

.checkbox {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:checked+.checkbox {
    border-color: var(--mainColor);
    background-color: var(--mainColor);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    background-size: cover;
}

.input-tips {
    position: relative;
}

.input-tips::after {
    content: attr(data-tips);
    font-size: .75rem;
    position: absolute;
    right: .875rem;
}

.input-tips.danger-input-tips input {
    border-color: var(--dangerColor) !important;
    opacity: .45;
}

.input-tips.danger-input-tips::after {
    color: var(--dangerColor);
}

.input-tips.success-input-tips::after {
    color: var(--mainColor);
}

.show-active {
    box-shadow: 0 0 0 1px var(--mainColor);
    border: 1px solid var(--mainColor);
}

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

.cursor-pointer {
    cursor: pointer;
}


.button-outline {
    cursor: pointer;
    border: 1px solid #999;
    color: #999;
    padding: .5rem 1rem;
    border-radius: 500px;
    background-color: white;
    box-sizing: border-box;
    font-size: .75rem;
}

.button-outline:hover {
    background-color: #F7F7F7;
    border-color: #666;
    color: #666;
    text-decoration: none;
}

.address-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.address-select select {
    padding: .5rem .75rem;
    border-radius: .5rem;
    cursor: pointer;
    outline: none;
    color: #666;
    border: 1px solid #e5e5e5;
}

.address-select select:focus {
    border-color: var(--mainColor);
    color: #333;
}

.border-default {
    border: 1px solid #D9D9D9;
}




/* JS配置 */
*:has(> .vw-toggle) {
    user-select: none;
}

.vw-toggle {
    cursor: pointer;
}

/* 页头 */
#header-top-box {
    background-color: var(--darkBackColor);
    position: sticky;
    top: 0;
    z-index: 800;
}
#header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
#header-top .header-icon-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#header-menu-icon rect {
    height: 2px;
    rx: 1px;
    color: #fff;
}
#header-menu-icon rect:last-child {
    width: 12px;
}
#header-top .header-icon-box svg * {
    stroke-width: 2;
    color: #fff;
}
#header-logo {
    flex-shrink: 0;
}
#header-logo a {
    display: inline-block;
}
#header-logo img {
    height: 50px;
}
#header-search {
    display: flex;
    align-items: center;
    gap: .3rem;
    border-radius: 500px;
    background-color: #555;
    position: relative;
}

#header-search .uk-icon {
    aspect-ratio: 1 / 1;
    padding: .4rem;
    margin-left: .25rem;
    background-color: #666;
    border-radius: 500px;
    box-sizing: border-box;
}

#header-search .uk-icon svg {
    width: .875rem;
}

#header-search svg * {
    stroke: #D9D9D9;
    stroke-width: 2.5px;
}

#header-search-input {
    flex-grow: 1;
    background: none;
    border: 0;
    color: #fff;
    font-size: .875rem;
    padding: .5rem;
    width: 100%;
}

#header-search input::placeholder {
    color: #D9D9D9;
    opacity: 1;
}

#header-search input:focus {
    outline: none;
}

#header-ctrl {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#header-ctrl>a {
    display: flex;
    gap: .25rem;
    align-items: center;
    font-size: .875rem;
    text-decoration: none;
    color: #A3A3A3;
}

#header-ctrl>a:hover {
    color: #fff;
}


#header-nav-box {
    background-color: var(--darkBackColor);
    color: #fff;
}

#header-nav-list {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
#header-nav-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#header-nav-list>li {
    display: flex;
    align-items: center;
}

#header-nav-list>li>a {
    font-size: .875rem;
    font-weight: 500;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 16px;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

#header-nav-list>li>a::after {
    content: '';
    height: 3px;
    position: absolute;
    bottom: 0;
    width: 0;
    left: 50%;
    background-color: var(--mainColor);
    transition: all .2s ease;
}

#header-nav-list>li>a:has(+ .uk-drop.uk-open)::after {
    width: 100%;
    left: 0;
}

#header-nav-list .header-navdrop-dom {
    list-style: none;
    min-width: 10rem;
    padding: 1rem;
    background: rgba(0, 0, 0, .9);
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

#header-nav-list .header-navdrop-dom a {
    display: block;
    color: #fff;
    padding: .5rem 0;
}

#header-nav-list .header-navdrop-dom li:first-child a {
    padding-top: 0;
}

#header-nav-list .header-navdrop-dom li:last-child a {
    padding-bottom: 0;
}

#header-nav-list .header-navdrop-dom a:hover {
    color: var(--mainColor);
}
#moble-nav-offcanvas h5 {
    margin-bottom: .5rem;
}
#moble-nav-offcanvas .uk-offcanvas-close {
    top: 24px;
    left: 100%;
    margin-right: -6px;
    position: sticky;
}
#moble-nav-offcanvas .uk-offcanvas-close svg * {
    stroke-width: 2;
    stroke: #fff;
}
#moble-nav-offcanvas::before {
    background: rgba(0, 0, 0, .6);
}
#moble-nav-offcanvas .uk-offcanvas-bar {
    width: 80%;
    background: #000;
}
.uk-offcanvas-bar {
    left: -80%;
}
#moble-nav-offcanvas ul.uk-nav > li:has( ~ .uk-nav-divider) {
    padding-left: 1.25rem;
}
#moble-nav-offcanvas ul.uk-nav > li > a {
    color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
#moble-nav-offcanvas .uk-nav-divider {
    margin: 1rem 0;
}
#moble-nav-offcanvas .uk-nav-sub > li:first-of-type > a {
    color: #D9D9D9;
}
#moble-nav-offcanvas .uk-nav-sub > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
    color: #aaa;
}
#header-search-list {
    background-color: #fff;
    padding: 1rem;
    border-radius: .5rem;
    width: 100%;
    left: 0 !important;
}
#header-search-list a {
    display: flex;
    gap: .5rem;
}
#header-search-list a:hover {
    text-decoration: none;
}
#header-search-list img {
    max-height: 50px;
    border-radius: .5rem;
}
#header-search-list a > span {
    display: flex;
    flex-direction: column;
}
#header-search-list strong {
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 500;
    color: #000;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#header-search-list a:hover strong {
    color: var(--mainColor);
    text-decoration: underline;
}
#header-search-list span span {
    font-size: .75rem;
    color: #666;
}
/* 产品详情 */
.product-detail h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000;
}

.product-detail .sku-navigation {
    display: flex;
    overflow-x: auto;
    align-items: center;
    gap: .25rem;
    margin-bottom: 25px;
    white-space: nowrap;
}

.product-detail .sku-navigation a {
    color: #9F9F9F;
    padding: 4px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 500px;
    text-decoration: none;
    font-size: .875rem;
    transition: all .2s ease;
}

.product-detail .sku-navigation a:hover {
    color: #9F9F9F;
    background-color: #F8F8F8;
}

#main-images,
#main-thumbs {
    overflow: hidden;
}

#main-images {
    aspect-ratio: 1 / 1;
    border: 1px solid #EBEBEB;
    box-sizing: border-box;
    border-radius: .75rem;
}

#main-images,
#main-images+#main-thumbs-box {
    opacity: 0;
    transition: opacity .35s ease;
}

#main-images.swiper-watch-progress,
#main-images.swiper-watch-progress+#main-thumbs-box {
    opacity: 1;
}

#main-images img {
    width: 100%;
    background-color: #EBEBEB;
}

#main-images ul,
#main-thumbs ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

#main-images li,
#main-thumbs li {
    flex-shrink: 0;
    user-select: none;
}

#main-images .label-text {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 6px;
}

#main-images .label-solid {
    color: #fff;
    background-color: var(--mainColor);
}

#main-images .label-void {
    color: var(--mainColor);
    border: 1px solid var(--mainColor);
}

#main-thumbs {
    flex-grow: 1;
}

#main-thumbs li img {
    cursor: pointer;
    overflow: hidden;
    border-radius: .5rem;
    padding: 3px;
    border: 2px solid transparent;
    box-sizing: border-box;
    background-color: #EBEBEB;
}

#main-thumbs li.swiper-slide-thumb-active img,
#main-thumbs li:hover img {
    border-color: var(--mainColor);
}

#main-thumbs-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
}

#thumbs-next,
#thumbs-prev {
    display: flex;
    align-items: center;
    color: var(--mainColor);
    cursor: pointer;
}

#thumbs-next svg polyline,
#thumbs-prev svg polyline {
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.sku-box~.sku-box,
.sku-box~.delivery-box {
    margin-top: 2rem;
}

.sku-title {
    font-size: .8125rem;
    margin-bottom: 0;
}

.sku-title .sku-name {
    font-weight: 700;
    color: #333;
}

.sku-title .sku-value {
    color: var(--mainColor);
}

#sku-price-per-piece {
    font-size: .8125rem;
    margin-top: .25rem;
}

#sku-price-per-piece span:last-of-type {
    font-weight: 700;
    color: #333;
}

.sku-tips {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--mainColor);
    border-radius: 500px;
    cursor: default;
}

.sku-content-hasmore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 5px;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.sku-content-hasmore .sku-content-item {
    width: calc((100% - 5 * 5px) / 6);
}

.sku-content-hasmore .sku-content-item label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: .4rem;
    border: 1px solid #DDDDDD;
    user-select: none;
}

.sku-content-hasmore .sku-content-item label:hover,
.sku-content-hasmore .sku-content-item label:has(input:checked) {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
}


.sku-content-eachinput {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.sku-content-eachinput .sku-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    color: #000;
    font-size: .8125rem;
}

.sku-content-eachinput .sku-content-item input {
    width: 40px;
    height: 2rem;
    text-align: center;
    font-size: .875rem;
    border: 1px solid #DDDDDD;
    border-radius: .25rem;
    user-select: none;
}

.sku-content-eachinput .sku-content-item input:focus {
    outline: none;
}

.sku-content-eachinput .sku-content-item input:hover,
.sku-content-eachinput .sku-content-item .active {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
}

.sku-content-small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.sku-content-small .sku-content-item label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: .4rem;
    border: 1px solid #DDDDDD;
    padding: 5px 10px;
    user-select: none;
}

.sku-content-small .sku-content-item label:hover,
.sku-content-small .sku-content-item label:has(input:checked) {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
}

.sku-content-small .sku-content-item label img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.sku-content-small .sku-content-item label span {
    font-size: .8125rem;
}


.sku-content-normal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.sku-content-normal .sku-content-item label {
    display: flex;
    gap: 4px;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: .5rem;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
}

.sku-content-normal.line-item-6 .sku-content-item label,
.sku-content-normal.line-item-7 .sku-content-item label {
    padding: .25rem;
}

.sku-content-normal .sku-content-item:hover,
.sku-content-normal .sku-content-item:has(input:checked) {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
}

.sku-content-normal .sku-content-item label img {
    object-fit: cover;
}

.sku-content-normal .sku-content-item label span.item-name {
    color: #000;
    font-weight: 600;
}

.sku-content-normal .sku-content-item label span:not(.sku-more-select) {
    font-size: .8125rem;
}

.sku-content-normal .sku-content-item {
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: .4rem;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
}

.sku-box .sku-more-select {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
}

.sku-box .line-item-3 .sku-content-item {
    width: calc((100% - 2 * 10px) / 3);
}

.sku-box .line-item-4 .sku-content-item {
    width: calc((100% - 3 * 10px) / 4);
}

.sku-box .line-item-5 .sku-content-item {
    width: calc((100% - 4 * 10px) / 5);
}

.sku-box .line-item-6 .sku-content-item {
    width: calc((100% - 5 * 10px) / 6);
}

.sku-box .line-item-7 .sku-content-item {
    width: calc((100% - 6 * 10px) / 7);
}

.sku-box :not(.sku-content-eachinput) .sku-content-item.sku-disabled:not(.show-all-time) {
    opacity: .55;
}

.delivery-box {
    font-size: .8125rem;
}

.delivery-box .delivery-content {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

.delivery-box .delivery-item {
    cursor: pointer;
    box-sizing: border-box;
    border-radius: .4rem;
    border: 1px solid var(--mainColor);
    padding: 10px;
    user-select: none;
    box-shadow: 0 0 0 1px var(--mainColor);
}

.delivery-box .delivery-item p {
    margin: 0;
}

.delivery-box .delivery-item p:first-child {
    font-weight: 700;
    color: #333;
}

.delivery-box .delivery-tips {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.delivery-box .delivery-tips span {
    color: var(--mainColor);
}

#sku-total-price {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

#sku-total-price span:first-of-type {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
}

#sku-total-price span:last-of-type {
    font-size: .8125rem;
    color: #666;
}

#sku-total-price i {
    font-style: normal;
    color: #000;
    font-size: 1rem;
}

#form-button-box {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

#form-button-box>a {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    text-decoration: none;
    border-radius: .5rem;
    transition: background-color .25s ease;
}

#form-button-box #design-online {
    color: #fff;
    background-color: var(--mainColor);
}

#form-button-box #design-online:hover {
    background-color: var(--mainColor);
}

#form-button-box #cart-add {
    background-color: #fff;
    color: #000;
    font-weight: 400;
    border: 1px solid #ddd;
}

#form-button-box #cart-add:hover {
    background-color: #f2f2f2;
}

#detail-accordion .uk-accordion-title {
    font-size: .9375rem;
    font-weight: 700;
    color: #000;
    padding: 20px 15px;
    border-top: 1px solid #DDDDDD;
}

#detail-accordion>* {
    margin-top: 0;
}

#detail-accordion .uk-accordion-content {
    padding: 0 15px 20px;
    margin: 0;
    font-size: .8125rem;
}

#detail-accordion .accordion-title {
    cursor: pointer;
    color: var(--mainColor);
    font-weight: 400;
    font-size: .875rem;
    text-decoration: underline;
}

#detail-accordion .accordion-content {
    padding: 1rem 1rem 0 1rem;
}

#detail-accordion .accordion-content p {
    color: #000 !important;
    font-size: .875rem !important;
    margin-bottom: 0;
}

#detail-accordion .accordion-content p>a {
    color: var(--mainColor) !important;
}

#detail-accordion .accordion-content p~p {
    margin-top: .5rem;
}

#detail-accordion .download-muban>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    gap: 1rem;
}

#detail-accordion .download-muban>div:nth-of-type(odd) {
    background-color: #f7f7f7;
}

#detail-accordion .download-title {
    color: #000;
}

#detail-accordion .download-content {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

#detail-accordion .download-content a {
    display: flex;
    align-items: center;
    gap: .25rem;
}

#detail-accordion .download-content a:hover {
    text-decoration: none;
}

#detail-accordion .download-content a span {
    color: #000;
    text-decoration: underline;
}

#detail-accordion .download-content img {
    width: 1.25rem;
    height: 1.25rem;
}

#detail-accordion .specifications-box>div {
    display: flex;
    align-items: center;
    font-size: .875rem;
    color: #000;
    padding: .5rem 1rem;
}

#detail-accordion .specifications-box>div:nth-of-type(odd) {
    background-color: #f7f7f7;
}

#detail-accordion .specifications-title {
    width: 30%;
}

#detail-accordion .specifications-content {
    width: 70%;
}

#detail-accordion .info_tec {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

#detail-accordion .info_tec li {
    position: relative;
    display: flex;
    align-items: center;
}

#detail-accordion .info_tec img {
    width: 5rem;
    cursor: pointer;
}

#detail-accordion .info_tec div {
    display: none;
}

#detail-accordion .info_tec li:hover div {
    display: block;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200%;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: .5rem;
    color: #000;
    font-size: .875rem;
}

#detail-accordion .info_tec li:hover div::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: #008539 transparent transparent transparent;
    z-index: 1001;
}

#detail-accordion .info_desc {
    font-size: .875rem;
    color: #000;
}

#detail-accordion .info_features {
    list-style: none;
    padding: 0;
    margin: 0;
}

#detail-accordion .info_features li {
    display: flex;
    gap: 1rem;
    align-items: center;
    color: #000;
    font-size: .875rem;
    padding: .25rem 0;
}

#detail-accordion .content-2 p {
    color: #000;
    font-size: .875rem;
    margin-bottom: 0;
}

#detail-accordion .content-2 p~p {
    margin-top: .5rem;
}



.uk-accordion>:has(.accordion-title):nth-child(n+2) {
    margin-top: 1rem;
}

.email-us {
    background-color: var(--mainColor);
    color: #fff;
}

.email-us h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.email-us p {
    font-size: .875rem;
    margin: 0;
}

.email-us .uk-input {
    font-size: .8125rem;
}

.email-us .uk-input:focus {
    border-color: transparent;
}

.email-us .uk-form-icon {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--mainColor);
    padding-right: .5rem;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
}

#list-top-button-box {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.btn-icon-text {
    display: flex;
    align-items: center;
    gap: .5rem;
    background-color: #FFF;
    border-radius: 500px;
    padding: .5rem 1rem;
    border: 1px solid #D9D9D9;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-icon-text:hover,
.btn-icon-text:has(+ .uk-open) {
    background-color: #F8F8F8;
}

.btn-icon-text .uk-icon svg {
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.btn-icon-text:has(+ .uk-open) .uk-icon svg {
    transform: rotate(180deg);
}

#list-top-button-box>li {
    position: relative;
}

#list-top-button-box .uk-drop {
    list-style: none;
    padding: 0;
    min-width: 100%;
    padding: 3px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

#list-top-button-box .uk-drop a {
    display: block;
    border-radius: 5px;
    padding: .5rem .75rem;
    color: #333;
    user-select: none;
    font-size: .875rem;
    text-decoration: none;
}

#list-top-button-box .uk-drop a:hover {
    background-color: #e5e5e5;
}

#list-box {
    margin-top: 10px;
    margin-bottom: 10px;
}

#list-filters-form h3 {
    color: #191919;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#list-categorys dl {
    margin-top: 0;
}

#list-categorys dt {
    display: flex;
    align-items: center;
    gap: .2rem;
}

#list-categorys dd {
    margin-top: .5rem;
    padding-left: 1.5rem;
}

#list-categorys a {
    font-size: .875rem;
}

#list-categorys dt a,
#list-categorys div a {
    font-weight: 600;
    color: #191919;
}

#list-categorys ul {
    list-style: none;
    padding-left: 1rem;
    margin-left: .5rem;
    border-left: 1px solid #666;
    margin-top: .25rem;
    margin-bottom: 0;
}

#list-categorys ul a {
    display: block;
    font-weight: 400;
    color: #666;
    padding: .25rem 0;
}

#list-categorys dl a:hover,
#list-categorys a.active {
    color: var(--mainColor);
}

#list-categorys .vw-toggle {
    transition: transform .2s ease;
}

#list-categorys .vw-is-hidden {
    transform: rotate(-90deg);
}

#list-inputs {
    margin-top: 2rem;
}

#list-inputs dt {
    display: flex;
    align-items: center;
    gap: 4px;
}

#list-inputs dt span {
    font-size: .875rem;
    color: rgb(85, 85, 85);
    font-weight: 600;
}

#list-inputs dt~dt {
    margin-top: 1rem;
}

#list-inputs dd {
    margin-top: .5rem;
    padding-left: 1.5rem;
}

#list-inputs label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

#list-inputs label~label {
    margin-top: .5rem;
}

#list-inputs .checkbox-input {
    display: none;
}

#list-inputs .checkbox-input:checked+span {
    font-weight: 600;
}

#list-inputs label:has(.checkbox-input)::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
}

#list-inputs label:has(.checkbox-input:checked)::before {
    border-color: var(--mainColor);
    background-color: var(--mainColor);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}

#list-inputs .vw-toggle .uk-icon {
    transition: transform .2s ease;
}

#list-inputs .vw-is-hidden .uk-icon {
    transform: rotate(-90deg);
}

#list-inputs #price-slider {
    margin-top: 1rem;
}

#list-inputs .noUi-target {
    border: none;
    border-radius: unset;
    height: 5px;
}

#list-inputs .noUi-connects {
    background-color: #f7f7f7;
    border: none;
    border-radius: unset;
}

#list-inputs .noUi-connect {
    background-color: var(--mainColor);
}

#list-inputs .noUi-handle {
    border: 6px solid var(--mainColor);
    top: -10px;
    cursor: pointer;
}

#list-inputs #price-show-box {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#category-list h3 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25em;
    max-height: 2.5em;
    overflow: hidden;
    margin-bottom: .5rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
}

#category-list .product-list-summary {
    font-size: .875rem;
    margin-bottom: .5rem;
    line-height: 1.5em;
    height: 1.5em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#category-list h3+* {
    margin-top: 0;
}

#category-list a {
    color: #000;
    text-decoration: none;
    transition: color ease-in-out 125ms;
}

#category-list li .uk-card:hover a {
    color: var(--mainColorHover);
}

#category-list .uk-card-media-top {
    aspect-ratio: 1 / 1;
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #EBEBEB;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#category-list .uk-card-media-top .label-text {
    position: absolute;
    display: inline-block;
    bottom: .6rem;
    left: .6rem;
    font-size: .75rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid var(--mainColor);
}

#category-list .uk-card-media-top .label-solid {
    color: #fff;
    background-color: var(--mainColor);
}

#category-list .uk-card-media-top .label-void {
    color: var(--mainColor);
    background-color: #fff;
}

#category-list .uk-card-media-top img {
    transform: scale(1);
    transition: transform ease-in-out 125ms;
}

#category-list li .uk-card:hover .uk-card-media-top img {
    transform: scale(1.075);
}

#category-list .uk-card-body {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid #ddd;
    border-top-width: 0;
}

#category-list .product-list-colors {
    display: flex;
    align-items: center;
    gap: 5px;
}

#category-list .product-list-colors i {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-size: 90% 90%;
    background-position: center center;
    border-radius: 5rem;
    border: 1px #ddd dotted;
}

#category-list .product-list-price {
    margin-top: .75rem;
    display: flex;
    gap: 2px;
    align-items: baseline;
    color: #000;
}

#category-list .product-list-price .price-before-text {
    font-size: .75rem;
}

#category-list .product-list-price .￥ {
    font-size: .75rem;
    font-weight: 500;
}

#category-list .product-list-price .price-number {
    font-size: 1rem;
    font-weight: 500;
}

#cart-step-title {
    font-size: 2rem;
    padding: 1rem 0 1.5rem;
    margin: 0;
    font-weight: 600;
    color: #000;
}

#cart-list-view {
    margin-bottom: 1rem;
}

#cart-list-view h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

#cart-list-view li {
    background-color: #F8F8F8;
    border-radius: .5rem;
    padding: 1.5rem;
}

#cart-list-view li img {
    max-width: 150px;
    border-radius: .5rem;
}

#cart-list-view table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .875rem;
}

#cart-list-view td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    width: 50%;
}

#cart-list-view td:first-child {
    font-weight: 700;
    color: #555;
}

#cart-list-view .items-dot~.items-dot::before {
    content: '，';
}

.cart-price {
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.cart-price p:last-child {
    font-weight: 700;
    color: #000;
}

.cart-btn-box {
    gap: .4rem;
}

.cart-btn-box a {
    padding: .5rem;
    color: #555;
    border: 1px solid #D9D9D9;
    border-radius: 500px;
    display: block;
}

.cart-btn-box a:hover {
    background-color: #f0f0f0;
}

.cart-btn-box a svg * {
    stroke-width: 1.2px;
}

#cart-price-card {
    margin-bottom: 1rem;
}

#cart-price-card>div {
    position: sticky;
    top: 80px;
}

#cart-price-content {
    padding: 1.25rem;
    border-radius: .75rem;
    border: 1px solid #D9D9D9;
    font-size: .875rem;
}

#cart-price-content h2 {
    font-size: .875rem;
    font-weight: 600;
    color: #000;
}

#cart-price-content dl>div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
}

#cart-price-content dt {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .2rem;
}

#cart-price-content dd {
    grid-column: 2;
    text-align: right;
}

#cart-price-content dl>div~div {
    padding-top: .75rem;
    margin-top: .75rem;
    border-top: 1px solid #D9D9D9;
}

#cart-price-btn-box a.uk-disabled {
    background-color: #D9D9D9;
    color: #555;
}

#cart-price-btn-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.5rem;
    border-radius: 500px;
    background-color: var(--mainColor);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

#cart-price-btn-box a:not(.uk-disabled):first-of-type {
    background-color: var(--mainColorLight);
}

#cart-price-btn-box a~a {
    margin-top: .5rem;
    background-color: #333;
    color: #fff;
}

#cart-price-tip-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    margin-top: 1.25rem;
}

#cart-price-tip-box span~span::before {
    content: '>';
    margin: 0 .25rem;
}

.member-form {
    border-radius: .75rem;
    background-color: #F7F7F7;
    padding: 2.5rem 5rem;
}

.member-form h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #000;
}

.member-form h1+p {
    font-size: .875rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.member-form label {
    font-size: .75rem;
    font-weight: 600;
    display: block;
    margin-bottom: .25rem;
}

.member-form>div~div {
    margin-top: .75rem;
}

.member-form>div:has(input:focus) label {
    color: var(--mainColor);
}

.member-form input {
    box-sizing: border-box;
    padding: .875rem;
    border-radius: .5rem;
    border: 1px solid #D9D9D9;
    outline: none;
}

.member-form input:focus {
    border-color: var(--mainColor);
}

.member-form .image-code-box div,
.member-form .sms-code-box div {
    display: flex;
}

.member-form .image-code-box input,
.member-form .sms-code-box input {
    flex-grow: 1;
}

.member-form .sms-code-box input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
}

.member-form .sms-code-box button {
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    width: 10rem;
}

.member-form .sms-code-box button:not(:disabled):hover {
    background-color: var(--mainColorLight);
    border-color: var(--mainColorLight);
}

.member-form .sms-code-box button:not(:disabled) {
    color: #fff;
    background-color: var(--mainColor);
    border-color: var(--mainColor);
}

.member-form .link-box {
    font-size: .875rem;
    margin-top: 1rem;
}

.member-form .link-box a {
    color: var(--mainColor);
}

.member-form .primary-btn {
    width: 100%;
    background-color: var(--mainColor);
    color: #fff;
    border-radius: 500px;
    border: none;
    padding: .75rem 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
}

.member-form .primary-btn:hover {
    background-color: var(--mainColorLight);
}

.member-form .check-box label {
    user-select: none;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

div:has(> .member-nav) {
    position: sticky;
    top: 80px;
}

.member-nav~.member-nav {
    margin-top: 1rem;
    border-top: 1px solid #D9D9D9;
    padding-top: 1.4rem;
}

.member-nav h3 {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: #999;
}

.member-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-nav ul li {
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem 0;
}

.member-nav ul li a {
    text-decoration: none;
    color: #555;
}

.member-nav ul li a:hover {
    color: var(--mainColor);
}

.member-nav ul li.active a {
    color: #000;
}

.member-content h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #000;
}

.member-content h1+p {
    font-size: .875rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.member-content .content-item {
    padding: 1rem 1.5rem;
    border-radius: .75rem;
    border: 1px solid #D9D9D9;
}

.member-content .content-item~.content-item {
    margin-top: 1.25rem;
}

.member-content .content-item h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #000;
}

.member-content .content-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-content .content-item li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.member-content .content-item li~li {
    margin-top: 1rem;
}

.member-content .content-item label {
    font-size: .75rem;
    font-weight: 600;
    color: #000;
    display: block;
    width: 10%;
    min-width: 4em;
}

.member-content .content-item input {
    flex-grow: 1;
    box-sizing: border-box;
    padding: .875rem;
    border-radius: .5rem;
    border: 1px solid #D9D9D9;
    outline: none;
}

.member-content .content-item label:has(+ input:not(.input-readonly):focus) {
    color: var(--mainColor);
}

.member-content .content-item input:not(.input-readonly):focus {
    border-color: var(--mainColor);
}

.member-content .content-item ul button {
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-radius: .5rem;
    width: 10rem;
    height: 45px;
    box-sizing: border-box;
}

.member-content .content-item ul button:not(:disabled) {
    color: #fff;
    background-color: var(--mainColor);
    border-color: var(--mainColor);
}

.member-content .content-item .item-submit {
    padding: .4rem 1.5rem;
    border-radius: 500px;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    border: none;
}

#address-card {
    padding: 1.25rem;
    background-color: #F7F7F7;
    margin-top: 1.5rem;
    border-radius: 1rem;
}

#address-card h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #000;
    padding-bottom: .875rem;
    margin-bottom: .875rem;
    border-bottom: 1px solid #D9D9D9;
}

#address-card-info p {
    margin: 0;
    color: #000;
    font-size: 1rem;
}

#address-card-info p:last-of-type {
    font-weight: 700;
}

#paytype-box {
    list-style: none;
    padding: 1rem;
    margin: 1.5rem 0;
    background-color: #F7F7F7;
    border-radius: 1rem;
}

#paytype-box li {
    background-color: #fff;
    border-radius: .75rem;
}

#paytype-box li~li {
    margin-top: 1rem;
}

#paytype-box li:has(input:checked) {
    box-shadow: 0 0 0 2px var(--mainColor);
}

#paytype-box label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1em;
    color: #000;
    cursor: pointer;
    user-select: none;
    padding: .75rem 1rem;
}

#paytype-box label:before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 0;
}

#paytype-box li:has(input:checked) label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23008539' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23008539'/%3E%3C/svg%3E");
}

#paytype-box label img {
    width: 1.5rem;
}

#paytype-box .uk-accordion-content {
    margin-top: 0;
    padding: 0 1rem 1rem;
}

.payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.5rem;
    border-radius: 500px;
    background-color: #333;
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    text-align: center;
    text-decoration: none;
}

.payment-button:hover {
    color: #fff;
    background-color: #000;
    text-decoration: none;
}

.address-input-box>div:has(> .address-input-name) {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.address-input-box>div:has(> .address-input-name)~div {
    margin-top: .75rem;
}

.address-input-box .address-input-name {
    font-size: .75rem;
    font-weight: 700;
    color: #000;
    min-width: 4em;
    user-select: none;
}

.address-input-box .address-input-name+div {
    flex-grow: 1;
}

.address-input-name+div>label {
    font-size: .875rem;
    font-weight: 700;
    color: #000;
}

.address-input-box textarea {
    min-height: 40px;
}

.member-myaddress p {
    margin: 0;
    color: #000;
}

.member-myaddress p:first-child {
    font-weight: 700;
}

.member-myaddress p~p {
    margin-top: .25rem;
}

.member-myaddress .button-box {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}

.member-myaddress .button-box button {
    cursor: pointer;
    border: 1px solid #D9D9D9;
    color: #000;
    border-radius: 500px;
    padding: .25rem 1rem;
    box-sizing: border-box;
    user-select: none;
}

.member-myaddress .button-box button:hover {
    border-color: #333;
}

.member-myaddress .active {
    width: 100%;
}

.member-myaddress .active .content-item {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
    background-color: #F6FBF8;
}

.member-content .add-address-button {
    margin-top: 1rem;
    cursor: pointer;
    background-color: var(--mainColor);
    color: #FFF;
    border: none;
    border-radius: 500px;
    padding: .4rem 1.25rem;
    box-sizing: border-box;
    user-select: none;
}

.member-content .add-address-button:hover {
    background-color: var(--mainColorLight);
}

.uk-modal-dialog:has(.address-input-box) {
    width: clamp(20rem, 80%, 40rem);
    padding: clamp(1.5rem, 5%, 2rem);
    border-radius: .5rem;
    background-color: #F7F7F7;
}

#address-modal li:not(:has(.uk-button-primary)):hover {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
    background-color: #F6FBF8;
}

#order-product-list {
    margin-top: 2rem;
}

#order-product-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#order-product-list li .list-product {
    display: flex;
    gap: .5rem;
}
#order-product-list li .list-express {
    display: inline-flex;
    gap: .5rem;
}

#order-product-list li .list-thumb,
#order-product-list li .list-file {
    flex-shrink: 0;
}

#order-product-list li .list-file {
    position: relative;
    overflow: hidden;
}

#order-product-list li .list-file>a {
    display: none;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border: 1px dashed #ccc;
    border-radius: 5px;
}

#order-product-list li .list-file>a.nothing {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") #ffffff no-repeat center center;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

#order-product-list li .list-file>a.doing {
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

#order-product-list li .list-file>a.doing::before {
    content: attr(data-progress);
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    color: #000;
    text-align: center;
}

#order-product-list li .list-file>a.works {
    background: url("/static/images/compress-on.svg");
    background-size: 34px;
    background-position: center;
    background-repeat: no-repeat;
}

#order-product-list li .list-file>a:not(.doing):hover {
    border-color: #666;
}

#order-product-list li .list-file>a.now {
    display: flex;
}

#order-product-list li img,
#order-product-list li .list-file {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: .5rem;
}

#order-product-list li .list-file .works.now::before {
    content: '✕';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#order-product-list li .list-file:not(.off) .works.now:hover::before {
    display: flex;
}

#order-product-list li~li {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dotted #D9D9D9;
}

#order-product-list li h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#order-product-list .list-content {
    flex-grow: 1;
    padding-left: .75rem;
}

#order-product-list .list-content>div {
    margin: .5rem 0 0;
    color: #666;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#order-product-list .list-content p {
    margin: 0;
    font-size: .875rem;
    color: #666;
}

/* 首页 */
#main-slider {
    position: relative;
    overflow-clip-margin: 500px;
}

#main-slider .card-slider {
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    cursor: pointer;
}

#main-slider .card-slider img {
    height: 100%;
}

#main-slider li .card-slider .title,
#main-slider li .card-slider .desc {
    max-width: 400px;
    user-select: none;
}

#main-slider li .card-slider span span {
    display: block;
}

#main-slider li .main-slider-text-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 80px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

#main-slider li .card-slider .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

#main-slider li .card-slider .desc {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
}

#main-slider li .card-slider .main-slider-btn {
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    color: #000;
    background-color: #fff;
    border-radius: 500px;
    padding: .4rem 1.25rem;
    box-sizing: border-box;
    user-select: none;
    bottom: 20px;
    left: 20px;
    position: absolute;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main-slider button {
    width: 36px;
    height: 36px;
    border-radius: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
}

#main-slider button svg {
    stroke-width: 1.8;
}

#line-logos {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

#line-logos img {
    max-height: 1.2rem;
    opacity: .6;
    transition: opacity .3s ease-in-out;
}

#line-logos img:hover {
    opacity: 1;
}

.main-title {
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 700;
}

.card-one {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .3rem;
}

.card-one:hover {
    text-decoration: none;
}

.card-one>span {
    display: block;
}

.card-one .img-box {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #F7F7F7;
}

.card-one .title {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}

.card-one .desc {
    font-size: .875rem;
    font-weight: 400;
    color: #333;
    margin-top: auto;
}

.card-one .price {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    color: #000;
}

.card-text-banner {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    min-height: 300px;
    background-color: #F7F7F7;
}

.card-text-banner>img {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform .2s ease-in-out;
}

.card-text-banner:hover>img {
    transform: scale(1.025);
}

.card-text-banner .text-banner-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 80px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.card-text-banner .text-banner-box .title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    width: clamp(60%, calc(200% - 60vw), 100%);
    box-sizing: border-box;
}

.card-text-banner .text-banner-box .desc {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    width: clamp(60%, calc(200% - 60vw), 100%);
    box-sizing: border-box;
}

.card-text-banner .text-banner-box .title+.desc {
    margin-top: .5rem;
}

.card-text-banner .text-banner-btn {
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    color: #000;
    background-color: #fff;
    border-radius: 500px;
    padding: .4rem 1.25rem;
    box-sizing: border-box;
    user-select: none;
    bottom: 20px;
    left: 20px;
    position: absolute;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-two {
    display: flex;
    background-color: #F7F7F7;
    overflow: hidden;
    border-radius: .5rem;
    box-sizing: border-box;
    text-decoration: none;
    height: 100%;
}

.card-two:hover {
    text-decoration: none;
}

.card-two>span {
    width: 50%;
}

.card-two .text-box {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 0 1rem 1rem;
    box-sizing: border-box;
}

.card-two .img-box {
    display: flex;
    align-items: center;
}

.card-two .title {
    font-size: 1rem;
    font-weight: 700;
    color: #666;
}

.card-two .card-two-btn {
    margin-top: auto;
}

.card-two .card-two-btn svg {
    background-color: #F7F7F7;
    border-radius: 500px;
    overflow: hidden;
    padding: .1rem;
    color: #ccc;
    margin-left: 0px;
    stroke-width: 1.2;
    transition: all .3s ease-in-out;
}

.card-two:hover .card-two-btn svg {
    margin-left: .5rem;
    background-color: #ccc;
    color: #fff;
    stroke-width: 1.6;
}

.group-link-list .group-item-link dt {
    font-weight: 700;
    margin-bottom: 0.4rem;
    font-size: .875rem;
    color: #000;
}

.group-link-list .group-item-link dd {
    margin: 0.2rem 0;
    font-size: .875rem;
}

.group-link-list .group-item-link dd a {
    text-decoration: none;
    color: #666;
}

.group-link-list .group-item-link a:hover {
    color: var(--mainColor);
}
.group-link-list .group-item-link .group-item-link-thumb {
    margin-bottom: 1rem;
}
.group-link-list .group-item-link .group-item-link-thumb a {
    display: block;
    overflow: hidden;
    border-radius: .5rem;
    height: 200px;
}
.group-link-list .group-item-link .group-item-link-thumb a img {
    width: 100%;
    height: 100%;
}

#footer-bottom-box {
    background-color: #000;
    color: #fff;
}
#footer-bottom-box > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
#footer-logo img {
    max-height: 2.5rem;
}
#footer-link {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
}
#footer-link a {
    color: #fff;
    text-decoration: none;
    font-size: .875rem;
}

#help-banner {
    padding: clamp(6rem, 10vw, 8rem) clamp(2rem, 8vw, 10rem);
    border-radius: .5rem;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #eee;
}
#help-banner h1 {
    font-size: clamp(1rem, 5vw, 2.5rem);
    margin-bottom: 0;
    font-weight: 700;
    color: #fff;
}
#help-banner p {
    font-size: clamp(.875rem, 3vw, 1.5rem);
    margin-top: .5rem;
    margin-bottom: 2rem;
    font-weight: 400;
    color: #fff;
}
#help-banner input {
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    border: none;
    padding-bottom: 0.15rem;
}
#help-banner input::placeholder {
  color: #fff;
}
#help-banner .uk-form-icon {
    color: #fff;
}
#help-category {
    padding: 2rem 0;
}
#help-category h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mainColor);
}
#help-category li a {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-weight: 600;
    text-decoration: none;
    padding: 2rem;
    background-color: #F7F7F7;
    border-radius: .5rem;
    transition: all .1s ease-in-out;
}
#help-category li a:hover {
    background-color: #F0F0F0;
}
.help-category-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
}
.help-category-list,
.help-article-list {
    padding: 0;
    list-style: none;
}
.help-subcategory-title {
    margin-bottom: .75rem;
}
.help-subcategory-title a {
    font-size: 1.25rem;
    text-decoration: none;
    font-weight: 600;
    color: #000;
}
.help-article-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    color: #000;
    text-decoration: none;
    border: 1px solid #F0F0F0;
    border-radius: .5rem;
}
.help-article-list a:hover {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 1px var(--mainColor);
}
.help-category-title + .help-article-list,
.help-article-content {
    padding-bottom: 2rem;
}

/** 移动 */
@media (max-width: 959px) {
    #header-logo img {
        height: 40px;
    }
    #header-search-box {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        border-radius: 0;
        background-color: #191919;
        padding: 0 15px .75rem;
    }
    #header-search-box:not(.toggle-show) {
        display: none;
    }
    #header-search-list li ~ li::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        margin: .75rem 0;
        background-color: #ededed;
    }
    .member-myorder li .item-ft {
        flex-direction: column;
        align-items: flex-start;
    }
    #header-top-box .uk-dropdown {
        padding: 1rem 1.5rem;
        border-radius: .5rem;
        min-width: 120px;
    }
    .member-form {
        padding: 2rem;
    }
    #list-filters-form {
        position: absolute;
        width: 85%;
        max-width: 400px;
        background-color: #fff;
        top: 0;
        bottom: 0;
        z-index: 1000;
        overflow-y: auto;
        padding: 0 1.5rem 1.5rem;
        left: 0;
        transition: left .25s linear, box-shadow .15s ease;
        box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
    }
    #list-filters-form.toggle-show {
        left: -100%;
    }
    #list-filters-form .uk-close {
        position: sticky;
        padding: .5rem;
        top: 26px;
        left: 100%;
    }
    #list-filters-form .uk-close svg * {
        stroke-width: 2;
        stroke: #000;
    }
    #footer-custom-email-form,
    #footer-custom-email-form .uk-input {
        width: 100%;
    }

    .show-breadcrumb #breadcrumb {
        display: flex !important;
    }

    #footer-bottom-box > div {
        justify-content: center;
    }

    #footer-link {
        flex-wrap: wrap;
        justify-content: center;
    }
    .group-link-list .group-item-link .group-item-link-thumb a {
        height: 100px;
    }
    .group-link-list .group-item-link dd a {
        font-size: 1.125rem;
        display: inline-block;
        padding: .2rem 0;
    }
    .uk-grid-small>.uk-grid-margin {
        margin-top: 2rem;
    }
}

/** 桌面 */
@media (min-width: 960px) {
    #list-filters-form:not(.toggle-show) {
        display: none;
    }
    #footer-custom-email-form .uk-input {
        width: 400px;
    }
}

@media (min-width: 640px) {
    #moble-nav-offcanvas .uk-offcanvas-close {
        top: 30px;
    }
}