.banner { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); background-color: var(--background); }
.banner .banner-swiper { width: 100%; overflow: hidden }
.banner .banner-swiper .swiper-slide { text-align: center; }
.banner .banner-swiper .swiper-slide a { display: block }
.banner .banner-swiper .swiper-slide .bg { background: no-repeat 50% 50%/cover; bottom: 0; left: 0; position: absolute; right: 0; top: 0; pointer-events: none }
.banner .banner-swiper .swiper-slide .bg .banner-image { display: flex; flex-direction: column; align-items: self-start; width: 40%; transform-origin: center center; transform: scale(1); }
.banner .banner-swiper .swiper-slide:not(.swiper-slide-active) .banner-transition { display: none; opacity: 0; visibility: hidden; }
.banner .a-flyLeftIn { animation-duration: .4s; animation: 1s ease 0s 1 normal both running flyLeftIn; }
.banner .banner-swiper .swiper-slide .banner-content { width: 1380px; margin: 0 auto; height: 100%; display: flex; align-items: center; }
.banner .banner-swiper .swiper-slide .bg .text { line-height: 1; }
.banner .banner-swiper .swiper-slide .bg .text h2 { font-size: 38px; color: var(--font-color) }
.banner .banner-swiper .swiper-slide .bg .text p { font-size: 16px; color: var(--font-color); margin: 30px 0; line-height: 1.8; text-align: left }
.banner .banner-swiper .swiper-slide .bg .text .btn { white-space: nowrap; border-radius: var(--radius); padding: 15px 28px; color: var(--buttonFont-color);  border: 0px none; background-color: var(--button-background); font-size: 14px; letter-spacing: 3px; pointer-events: auto }
.banner .banner-swiper .swiper-slide img { max-width: 100% }
.banner .swiper-pagination { list-style: none; position: relative; line-height: 0; bottom: unset }
.banner .swiper-pagination span { display: inline-block; width: 14px; height: 14px; border: 2px var(--buttonDef-color) solid; border-radius: 14px; margin: 0 6px; cursor: pointer; color: #000 !important; transition: all 0.3s; }
.banner .swiper-pagination .swiper-pagination-bullet-active { padding: 0 14px; background-color: var(--buttonFont-color) !important }
.banner .controller { position: absolute; bottom: 30px; left: 0; width: 100%; z-index: 10000; padding: 0 15px; }
.banner .controller .warp_ctrl { display: flex; justify-content: space-between; align-items: center; width: 1380px; margin: 0 auto }
.banner .controller .prev_box { display: flex; align-items: center }
.banner .controller .prev_box .def-prev { width: 26px; height: 26px; cursor: pointer; margin-right: 20px; position: unset; margin-top: 0; outline: none; flex-shrink: 0 }
.banner .controller .prev_box .def-prev:after { content: '' }
.banner .controller .next_box { display: flex; align-items: center }
.banner .controller .next_box .def-next { width: 26px; height: 26px; cursor: pointer; margin-left: 20px; position: unset; margin-top: 0; outline: none }
.banner .controller .next_box .def-next:after { content: '' }
.banner .controller .warp_ctrl svg { fill: var(--buttonFont-color) }
.banner .controller .next_box .num { color: var(--buttonFont-color); font-size: 20px; }
.banner .controller .next_box .num .totalpage { font-size: 16px; }


.custompagecomp-section { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); background-color: var(--background); }
.custompagecomp-section .section-inner { position: relative; max-width: var(--max-width); margin: 0 auto; z-index: 1; }
.custompagecomp-section .section-header h2 { text-align: center; font-size: 38px; font-weight: bold; position: relative; padding: 0 0 12px 0; color: var(--themes-color) }
.custompagecomp-section .section-container { color: var(--font-color) }



.menu-layout { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); background: var(--background); }
.menu-layout .section-inner { max-width: 1380px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.menu-layout .section-header { margin-bottom: 50px }
.menu-layout .section-header h2 { text-align: center;  color: var(--font-color); }
.menu-layout .section-container { display: flex; place-content: var(--menu-align) }
.menu-layout .section-container .grid-layout { display: grid; grid-template-columns: repeat(var(--menu-grid-column), 1fr); gap: var(--menu-grid-gap); }
.menu-layout .section-container .grid-layout .item { cursor: pointer; display: flex; place-items: center; gap: 20px; flex-direction:column;  }
.menu-layout .section-container .grid-layout .item h2 { font-size: 14px; line-height: 1.4; flex: 1; color: var(--font-color) }
.menu-layout .section-container .grid-layout .item .img-view { width: 80px; height: 80px; flex-shrink: 1; display: flex; place-items: center; place-content: center }
.menu-layout .section-container .grid-layout .item .img-view img { max-height: 100%; max-width: 100%; border-radius: var(--menu-radius); }
.menu-layout .section-container .grid-layout .item:hover {  }

.imgTextComp-section { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); background-color: var(--background) }
.imgTextComp-section .graphics { display: flex; align-items: center; justify-content: center; gap: 50px; max-width: 1380px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.imgTextComp-section .graphics .images-box { width: 50%; flex: 1 }
.imgTextComp-section .graphics .images-box img { width: 100% }
.imgTextComp-section .graphics .images-box video { max-width: 100%; }
.imgTextComp-section .graphics .text-content { flex: 1; }
.imgTextComp-section .graphics .text-content .title { font-size: 38px; font-weight: 700; margin-bottom: 15px; color: var(--font-color) }
.imgTextComp-section .graphics .text-content .desc { font-size: 16px; color: var(--subFont-color); margin-bottom: 50px }
.imgTextComp-section .graphics .text-content .desc p { margin-bottom: 10px }
.imgTextComp-section .graphics .text-content .list { margin: 0px 0 70px }
.imgTextComp-section .graphics .text-content .list .item { position: relative; font-size: 18px; padding-left: 15px; margin-bottom: 20px; color: var(--font-color) }
.imgTextComp-section .graphics .text-content .list .item::after { content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 8px; height: 8px; background-color: var(--themes-color); border-radius: 50% }
.imgTextComp-section .graphics .section-btn { display: flex; place-items: center; }
.imgTextComp-section .graphics .section-btn .btn { border-radius: 30px; font-size: 16px; padding: 10px 24px; background-color: var(--button-background); color: var(--buttonFont-color); display: flex; place-items: center; width: fit-content; gap: 10px; transition: transform .25s ease; font-weight: 700; }
.imgTextComp-section .graphics .section-btn .btn svg { width: 32px; fill: var(--buttonFont-color); }
.imgTextComp-section .graphics .section-btn .btn img { height: 32px }
.imgTextComp-section .graphics .section-btn .btn .inner-button { display: flex; place-items: center; place-content: center; font-weight: 700; transition: all 0.3s ease-in-out; }
.imgTextComp-section .graphics .section-btn .btn .inner-button .icon { width: 25px; fill: var(--buttonFont-color); }
.imgTextComp-section .graphics .section-btn .btn:hover { transform: translate3d(0, -3px, 0); }
.imgTextComp-section .graphics .section-btn .btn:hover .inner-button { transform: rotate(-45deg); }

.product-section .container { max-width: var(--max-width); margin: 0px auto; }
.product-section .container .section-header { display: flex; place-items: center; place-content: space-between }
.product-section .container .section-header .btn { display: inline-block; border: none; padding: 10px; pointer-events: auto; cursor: pointer; background: #f1f1f1; color: #404040; border-radius: 0; vertical-align: top; transition: all 50ms; outline: none }
.product-section .container .section-header .btn[disabled] { opacity: .7; }
.product-section .container .section-header .icon { display: block; width: 18px; height: 18px; }
.product-section .container .section-header .icon svg { width: 18px; height: 18px; position: relative; display: inline-block; vertical-align: top; fill: transparent; stroke: currentColor; }

.product-section .container .grid-view { display: flex; flex-direction: row; flex-wrap: nowrap; }
.product-section .container .grid-view .grid__item { max-height: 100%; height: auto; }
.product-section .container .grid-view .grid__item .view_image { padding-bottom: var( --youjia-view-scale); overflow: hidden; width: 100%; display: flex; position: relative; }
.product-section .container .grid-view .grid__item .view_image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; width: 100%; height: 100%; margin: auto; border-radius: var(--radius); }

.product-section .container .grid-view .grid__item .view_image .effect { opacity: 0; transition-duration: 150ms; transition-property: all; transition-timing-function: cubic-bezier(0,0,.2,1); transform: scale(1.05); }
.product-section .container .grid-view .grid__item .grid-view-item:hover .view_image .effect { transform: scale(1); opacity: 1; }
.product-section .container .grid-view .grid__item .view_image_link { display: block; white-space: nowrap; }
.product-section .container .grid-view .grid__item .view_image .product-labels { position: absolute; top: 10px; right: 10px; background-color: #b46e6f; padding: .2rem 1rem .3rem; text-align: center; color: #fff; font-size: 1.2rem; font-weight: 700; }
.product-section .container .grid-view .grid__item .view_image .sold-out { position: absolute; bottom: 10px; left: 10px; border: 1px solid transparent; border-radius: 50px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: rgb(36, 40, 51); border-color: rgba(255, 255, 255, 0.1); color: #fff; word-break: break-word; }

.product-section .container .grid-view .grid__item .sale-tag { position: absolute; top: 10px; left: 10px; background-color: #c82a23; border-radius: 3px; color: #fff; line-height: 1; padding: 6px; text-align: center }
.product-section .container .grid-view .grid__item .sale-tag .lable { display: block; margin-top: 2px; }
.product-section .container .grid-view .grid__item .product-detail { padding-top: 10px; }
.product-section .container .grid-view .grid__item .product-detail .title { color: var(--font-color); }
.product-section .container .grid-view .grid__item .product-detail .title h4 { font-size: 1.6rem; font-weight: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow-wrap: break-word; }
.product-section .container .grid-view .grid__item .product-detail .item__meta { }
.product-section .container .grid-view .grid__item .product-detail .item__meta .price { font-size: 1.6rem; font-weight: 500; }
.product-section .container .grid-view .grid__item .product-detail .item__meta .price .text { color: var(--subFont-color); }
.product-section .container .grid-view .grid__item .product-detail .item__meta .price .del { font-size: 14px; color: #999; padding-left: 5px; }
.product-section .container .grid-view .grid__item .product-detail .item__meta .sold { font-size: 1.4rem; color: var(--subFont-color); }

.product-section .container .grid-view .grid__item .heading-block { position: relative; flex-grow: 1; display: flex; color: #fff; border-radius: var(--radius); height: 100%; overflow: hidden; }
.product-section .container .grid-view .grid__item .heading-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, var(--bg-opacity)); z-index: 1; pointer-events: none; transition: opacity .35s; }
.product-section .container .grid-view .grid__item .heading-block .cover { background: #1212121a; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .55s ease; }
.product-section .container .grid-view .grid__item .heading-block .cover img { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .6s cubic-bezier(.26,.81,.47,.95); opacity: 1; transform: none; }
.product-section .container .grid-view .grid__item .heading-block:hover .cover { transform: scale(1.03); }
.product-section .container .grid-view .grid__item .heading-block .video { background: #1212121a; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .55s ease; }
.product-section .container .grid-view .grid__item .heading-block .video video { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.product-section .container .grid-view .grid__item .heading-block .block__text { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; z-index: 2; }
.product-section .container .grid-view .grid__item .heading-block .block__text .overlay-text { display: block; position: relative; width: 100%; }
.product-section .container .grid-view .grid__item .heading-block .block__text .overlay-text:before { content: ""; pointer-events: none; position: absolute; top: -200px; right: -100px; bottom: -200px; left: -100px; z-index: -1; background: radial-gradient(rgba(0,0,0,.15) 0%,transparent 70%); }
.product-section .container .grid-view .grid__item .heading-block .block__text .overlay-text h2 { font-size: 32px; font-weight: 700 }
.product-section .container .grid-view .grid__item .heading-block .block__text .overlay-text p { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }


.collections-section .container { max-width: 1960px; margin: 0px auto; }
.collections-section .container .section-header { width: 100%; padding-bottom: 30px; text-align: right }
.collections-section .container .section-header h2 { font-size: 32px; color: #212a2f; }
.collections-section .container .section-header .btn { display: inline-block; border: none; padding: 10px; pointer-events: auto; cursor: pointer; background: #f1f1f1; color: #404040; border-radius: 0; vertical-align: top; transition: all 50ms; outline: none }
.collections-section .container .section-header .btn[disabled] { opacity: .7; }
.collections-section .container .section-header .icon { display: block; width: 18px; height: 18px; }
.collections-section .container .section-header .icon svg { width: 18px; height: 18px; position: relative; display: inline-block; vertical-align: top; fill: transparent; stroke: currentColor; }
.collections-section .container .grid-view { position: relative; display: grid; grid-template-columns: repeat(var(--grid-columns),1fr); grid-row-gap: 40px; grid-column-gap: var(--grid-gap); /*overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; scroll-snap-type: both mandatory;*/ padding-bottom: 20px; /* margin-left: -20px;*/ }
.collections-section .container .grid-view .grid__item {scroll-snap-align: start;  height: auto; }
.collections-section .container .grid-view .grid__item:nth-child(1) { padding-left: 0px; }
.collections-section .container .grid-view .grid__item .grid-view-item { border-radius: var(--radius); overflow: hidden; background-color: #fff; box-shadow: 0px 0px 10px #00000026 !important; }

.collections-section .container .grid-view .grid__item .view_image { padding-bottom: var( --youjia-view-scale); overflow: hidden; width: 100%; display: flex; position: relative; }
.collections-section .container .grid-view .grid__item .view_image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; width: 100%; height: 100%; margin: auto; }

.collections-section .container .grid-view .grid__item .view_image .effect { opacity: 0; transition-duration: 150ms; transition-property: all; transition-timing-function: cubic-bezier(0,0,.2,1); transform: scale(1.05); }
.collections-section .container .grid-view .grid__item .grid-view-item:hover .view_image .effect { transform: scale(1); opacity: 1; }
.collections-section .container .grid-view .grid__item .view_image_link { display: block; white-space: nowrap; }
.collections-section .container .grid-view .grid__item .view_image .product-labels { position: absolute; top: 10px; right: 10px; background-color: #b46e6f; padding: .2rem 1rem .3rem; text-align: center; color: #fff; font-size: 1.2rem; font-weight: 700; }
.collections-section .container .grid-view .grid__item .view_image .sold-out { position: absolute; bottom: 10px; left: 10px; border: 1px solid transparent; border-radius: 50px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: rgb(36, 40, 51); border-color: rgba(255, 255, 255, 0.1); color: #fff; word-break: break-word; }

.collections-section .container .grid-view .grid__item .sale-tag { position: absolute; top: 10px; left: 10px; background-color: #c82a23; border-radius: 3px; color: #fff; line-height: 1; padding: 6px; text-align: center }
.collections-section .container .grid-view .grid__item .sale-tag .lable { display: block; margin-top: 2px; }
.collections-section .container .grid-view .grid__item .product-detail { padding: 10px 0; text-align: center }
.collections-section .container .grid-view .grid__item .product-detail .title { color: var(--font-color); }
.collections-section .container .grid-view .grid__item .product-detail .title h4 { font-size: 1.6rem; font-weight: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow-wrap: break-word; }
.collections-section .container .grid-view .grid__item .product-detail .item__meta { }
.collections-section .container .grid-view .grid__item .product-detail .item__meta .price { font-size: 1.6rem; font-weight: 500; }
.collections-section .container .grid-view .grid__item .product-detail .item__meta .price .text { color: var(--subFont-color); }
.collections-section .container .grid-view .grid__item .product-detail .item__meta .price .del { font-size: 14px; color: #999; padding-left: 5px; }


.collections-section .container .grid-view .grid__item .heading-block { position: relative; flex-grow: 1; display: flex; color: #fff; border-radius: var(--radius); height: 100%; overflow: hidden; }
.collections-section .container .grid-view .grid__item .heading-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, var(--bg-opacity)); z-index: 1; pointer-events: none; transition: opacity .35s; }
.collections-section .container .grid-view .grid__item .heading-block .cover { background: #1212121a; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .55s ease; }
.collections-section .container .grid-view .grid__item .heading-block .cover img { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .6s cubic-bezier(.26,.81,.47,.95); opacity: 1; transform: none; }
.collections-section .container .grid-view .grid__item .heading-block:hover .cover { transform: scale(1.03); }
.collections-section .container .grid-view .grid__item .heading-block .video { background: #1212121a; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .55s ease; }
.collections-section .container .grid-view .grid__item .heading-block .video video { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }


.collections-section .container .grid-view .grid__item .heading-block .block__text { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; z-index: 2; }
.collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text { display: block; position: relative; width: 100%; }
.collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text:before { content: ""; pointer-events: none; position: absolute; top: -200px; right: -100px; bottom: -200px; left: -100px; z-index: -1; background: radial-gradient(rgba(0,0,0,.15) 0%,transparent 70%); }
.collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text h2 { font-size: 32px; font-weight: 700 }
.collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text p { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }


/* 4K 及以上 */
@media (min-width: 1920px) {
    .hidden-xl { display: none !important; opacity: 0; visibility: hidden; }
    .product-section .container .grid-view .grid__item .heading-block .block__text { padding: 15px }
    .collections-section .container .grid-view .grid__item .heading-block .block__text { padding: 15px }
    /* 样式 */
}
/* 2K 显示器 */
@media (min-width: 1600px) and (max-width: 1919px) {
    .hidden-lg { display: none !important; opacity: 0; visibility: hidden; }

}

/* 平板横屏 / 笔记本 */
@media (min-width: 992px) and (max-width: 1599px) {
    .hidden-md { display: none !important; opacity: 0; visibility: hidden; }

}

@media screen and (max-width: 991px) {




    .banner { padding: 0 }
    .banner .controller { bottom: 10px; }
    .banner .controller .warp_ctrl { width: unset; justify-content: center; }
    .banner .banner-swiper .swiper-pagination .swiper-pagination-bullet-active { padding: 0 10px; }
    .banner .banner-swiper .swiper-pagination span { width: 10px; height: 10px; margin: 0 3px; }
    .banner .banner-swiper .swiper-slide .banner-content { width: 100%; padding: 20px }
    .banner .banner-swiper .swiper-slide .bg .text { width: 80%; }
    .banner .banner-swiper .swiper-slide .bg .text h2 { font-size: 20px; }
    .banner .banner-swiper .swiper-slide .bg .text p { font-size: 14px; margin: 10px 0; line-height: 1.4 }
    .banner .banner-swiper .swiper-slide .bg .text .btn { padding: 8px 10px; }


    .menu-layout { padding: 15px }
    .menu-layout .section-header { margin-bottom:20px}
    .menu-layout .section-header h2 { font-size: 18px; }
    .menu-layout .section-container .grid-layout { grid-template-columns: repeat(4, 1fr); gap:15px; }
    .menu-layout .section-container .grid-layout .item .img-view { width:60px;height:60px;}
    .menu-layout .section-container .grid-layout .item { gap:15px}
    .menu-layout .section-container .grid-layout .item h2 { text-align:center}

    
    .custompagecomp-section { padding: 15px 10px; }
    .custompagecomp-section .section-header h2 { font-size: 24px }

    /*imgTextComp*/
    .imgTextComp-section { padding: 20px 10px; }
    .imgTextComp-section .graphics { flex-direction: column; gap: 0px; }
    .imgTextComp-section .graphics .images-box { order: 0; width: 100%; }
    .imgTextComp-section .graphics .text-content { order: 1; width: 100%; }
    .imgTextComp-section .graphics .text-content .title { font-size: 28px; }
    .imgTextComp-section .graphics .text-content .desc { margin-bottom: 20px; }
    .imgTextComp-section .graphics .text-content .list .item { margin-bottom: 10px; font-size: 16px; }
    .imgTextComp-section .graphics .text-content .list { margin: 0px 0px 30px 10px; }
    .imgTextComp-section .graphics .section-btn { place-content: center; }
    .imgTextComp-section .graphics .section-btn .btn { font-size: 14px; padding: 8px 12px; gap: 5px; }
    .imgTextComp-section .graphics .section-btn .btn svg { width: 26px; }
    .imgTextComp-section .graphics .section-btn .btn .inner-button .icon { width: 20px }

    .collections-section .container .grid-view .grid__item { padding-left: 0px; width: 100% }
    .collections-section .container .grid-view { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px; }
    .collections-section .container .grid-view .grid__item .heading-block .block__text { padding: 20px 5px; }
    .collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text h2 { font-size: 22px }
    .collections-section .container .grid-view .grid__item .heading-block .block__text .overlay-text p { font-size: 14px; line-height: 1.2; }
    .collections-section .container .grid-view .grid__item .product-detail { padding: 5px 0; }
    .collections-section .container .grid-view .grid__item .product-detail .title h4 { font-size: 1.4rem; line-height: 1.2; }
    .collections-section .container .grid-view .grid__item .sale-tag { padding: 2px; top: 5px; left: 5px; }
    .collections-section .container .grid-view .grid__item .sale-tag svg { width: 12px }
    .collections-section .container .grid-view .grid__item .sale-tag .lable { font-size: 12px; margin-top: 0px; }
    .collections-section .container .grid-view .grid__item .view_image .product-labels { padding: .1rem 0.5rem .2rem; top: 5px; right: 5px; }
    .collections-section .container .grid-view .grid__item .view_image .sold-out { padding: .2rem 0.5rem .3rem; bottom: 5px; left: 5px; }
}