#IndexBanner {
    position: relative
}

#IndexBanner #IndexBannerLogo {
    display: none
}

@media (min-width:640px) {
    #IndexBanner #IndexBannerLogo {
        position: absolute;
        top: 1.25rem;
        left: 1.25rem;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.625rem;
        border-radius: 5.5rem;
        background-color: var(--color-primary);
        padding-top: 4vw;
        padding-bottom: 4vw;
        padding-left: 1.5625rem;
        padding-right: 1.5625rem
    }
}

@media (min-width:1536px) {
    #IndexBanner #IndexBannerLogo {
        padding-top: 6.1vw;
        padding-bottom: 6.1vw
    }
}

@media (max-width:639.9px) {
    #IndexBanner #IndexBannerLogo {
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.875rem;
        width: 80%
    }
}

#IndexBanner #IndexBannerLogo picture:first-child img {
    width: 2.5rem
}

@media (min-width:640px) {
    #IndexBanner #IndexBannerLogo picture:first-child img {
        width: 7.23vw
    }
}

#IndexBanner #IndexBannerLogo picture:last-child img {
    width: 1.875rem
}

@media (min-width:640px) {
    #IndexBanner #IndexBannerLogo picture:last-child img {
        width: 4.6vw
    }
}

#IndexBanner #IndexBannerLogo strong {
    text-align: center;
    font-size: var(--fontSize-sm);
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    --un-text-opacity: 1;
    color: rgb(200 163 138/var(--un-text-opacity))
}

@media (min-width:768px) {
    #IndexBanner #IndexBannerLogo strong {
        font-size: var(--fontSize-base);
        line-height: 1.4
    }
}

@media (min-width:1024px) {
    #IndexBanner #IndexBannerLogo strong {
        font-size: var(--fontSize-h5);
        line-height: 1.4
    }
}

#IndexBanner #IndexBannerSwiperContainer {
    padding-left: 0;
    padding-right: 0
}

@media (min-width:640px) {
    #IndexBanner #IndexBannerSwiperContainer {
        border-top-left-radius: 0;
    }
}

@media (min-width:768px) {
    #IndexBanner #IndexBannerSwiperContainer {
    }
}



#IndexBanner #IndexBannerSwiper .swiper-slide img {
    width: 100%
}

.IndexHead {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem
}

.IndexHeadTitle {
    text-align: center;
    font-size: var(--fontSize-h6);
    line-height: 1.4;
    font-weight: 700;
    --un-text-opacity: 1;
    color: rgb(49 49 49/var(--un-text-opacity));
    line-height: 1 !important;
    font-family: "Noto Serif TC"
}

@media (min-width:768px) {
    .IndexHeadTitle {
        font-size: var(--fontSize-h5);
        line-height: 1.4
    }
}

@media (min-width:1280px) {
    .IndexHeadTitle {
        font-size: var(--fontSize-h2);
        line-height: 1.4
    }
}

.IndexHeadSubTitle {
    --background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.92041 1.91504C0.92041 1.50057 1.04854 1.14859 1.30479 0.859118C1.56104 0.563065 1.93291 0.415039 2.42041 0.415039C2.90791 0.415039 3.27979 0.563065 3.53604 0.859118C3.79229 1.14859 3.92041 1.50057 3.92041 1.91504C3.92041 2.32951 3.79229 2.68478 3.53604 2.98083C3.27979 3.2703 2.90791 3.41504 2.42041 3.41504C1.93291 3.41504 1.56104 3.2703 1.30479 2.98083C1.04854 2.68478 0.92041 2.32951 0.92041 1.91504Z' fill='%23C8A38A'/%3E%3C/svg%3E%0A");
    --padding-x: 1.5625rem;
    position: relative;
    text-align: center;
    font-size: var(--fontSize-sm);
    line-height: 1.4;
    letter-spacing: .125rem;
    --un-text-opacity: 1;
    color: var(--color-primary);
}

@media (min-width:768px) {
    .IndexHeadSubTitle {
        font-size: var(--fontSize-base);
        line-height: 1.4
    }
}

@media (min-width:1024px) {
    .IndexHeadSubTitle {
        font-size: var(--fontSize-subtitle);
        line-height: 1.4
    }
}

.IndexHeadSubTitle:after {
    content: " ]";
    padding-right: var(--padding-x);
    background: var(--background-image) center right no-repeat
}

.IndexHeadSubTitle:before {
    content: "[ ";
    padding-left: var(--padding-x);
    background: var(--background-image) center left no-repeat
}

#IndexProducts .IndexHead {
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    position: relative;
    z-index: 1;
    width: 100%
}

@media (min-width:640px) {
    #IndexProducts .IndexHead {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexProducts .IndexHead {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexProducts .IndexHead {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    #IndexProducts .IndexHead {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexProducts .IndexHead {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

#IndexProducts .IndexHead .IndexProductsCover00 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0
}

@media (max-width:767.9px) {
    #IndexProducts .IndexHead .IndexProductsCover00 {
        top: 30px;
        right: 1rem;
        width: 8.4375rem
    }
}

@media (max-width:767.9px) {
    #IndexProducts.IndexSection {
        --section-gap: 2.625rem !important
    }
}

@media (max-width:639.9px) {
    #IndexProducts.IndexSection {
        --padding-bottom: 0rem !important
    }
}

#IndexProducts .IndexProductsContainer {
    position: relative
}

#IndexProducts #IndexProductsTopSwiperContainer {
    position: relative;
    z-index: 3;
    display: none;
    max-width: calc(100vw - .375rem)
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsTopSwiperContainer {
        display: block
    }
}

#IndexProducts #IndexProductsTopSwiperContainer:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: -1;
    width: 100%;
    height: 60%;
    --un-translate-y: -50%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
    --un-bg-opacity: 1;
    background-color: rgb(250 250 250/var(--un-bg-opacity));
    content: "";
    --un-bg-opacity: .7
}

#IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 20%
}

@media (min-width:640px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

#IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 img {
    --left: calc(100% - 5.875rem);
    position: absolute;
    z-index: 0;
    top: 60%;
    left: var(--left)
}

@media (min-width:1024px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 img {
        --left: calc(75% + (25% - 8.125rem)/2)
    }
}

@media (min-width:1280px) {
    #IndexProducts #IndexProductsTopSwiperContainer .IndexProductsCover01 img {
        --left: calc(20% - ((20% - 8.125rem)/2))
    }
}

#IndexProducts #IndexProductsTopSwiper {
    position: relative;
    z-index: 3
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

@media (min-width:1280px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide {
        justify-content: center;
        padding-left: 0;
        padding-right: 0
    }
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperItem {
    position: relative;
    z-index: 3
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperItem picture img {
    object-fit: contain;
    object-position: center
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperItem picture img {
        aspect-ratio: 2/3;
        width: 25rem
    }
}

@media (min-width:1536px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperItem picture img {
        aspect-ratio: 1/1;
        width: 37.5rem
    }
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperContent {
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 5;
    width: calc(100vw - 27.75rem);
    height: 60%;
    display: flex;
    flex-direction: column;
    --un-translate-y: -50%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
    gap: 1.5625rem;
    padding-top: 2.5rem;
    padding-left: 1.875rem
}

@media (min-width:1024px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperContent {
        left: 118%;
        width: 21.875rem
    }
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperTitle {
    font-size: var(--fontSize-h5);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .125rem;
    color: var(--color-primary);
    font-family: "Noto Serif TC"
}

@media (min-width:1024px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperTitle {
        font-size: var(--fontSize-h3);
        line-height: 1.4
    }
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwipertext {
    text-align: justify;
    font-size: .8125rem;
    line-height: 1.8
}

@media (min-width:1280px) {
    #IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwipertext {
        padding: .9rem
    }
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperLink {
    position: absolute;
    bottom: 0;
    left: 118%;
    z-index: 5;
    width: 100%;
    max-width: 12.5rem;
    display: flex
}

#IndexProducts #IndexProductsTopSwiper .swiper-slide .IndexProductsTopSwiperLink .btn {
    --btn-border-radius: 5rem
}

#IndexProducts #IndexProductsBottomSwiperContainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    padding: 0 1.875rem !important
}

@media (max-width:639.9px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: calc(100vw - .25rem)
    }
}

@media (min-width:640px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsBottomSwiperContainer {
        max-height: 12.5rem;
        margin: 0 auto;
        position: absolute;
        z-index: 5;
        left: 50%;
        top: 50%;
        z-index: 0;
        transform: translate(-50%, 20%);
        overflow: hidden;
        padding: 0 .625rem !important
    }
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide {
    min-height: .0625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 3em;
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide img {
    margin-left: auto;
    margin-right: auto;
    width: 8.125rem
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsBottomSwiper .swiper-slide img {
        --un-blur: blur(.125rem);
        filter: var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)
    }
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperContent {
    display: flex;
    flex-direction: column;
    gap: .9375rem;
    padding-top: 1.25rem
}

@media (max-width:767.9px) {
    #IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperContent {
        display: flex
    }
}

@media (min-width:768px) {
    #IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperContent {
        display: none
    }
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperTitle {
    font-size: var(--fontSize-subtitle);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .125rem;
    color: var(--color-primary);
    font-family: "Noto Serif TC"
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwipertext {
    text-align: justify;
    font-size: .8125rem;
    line-height: 1.8
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperLink {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center
}

#IndexProducts #IndexProductsBottomSwiper .swiper-slide .IndexProductsBottomSwiperLink .btn {
    --btn-border-radius: 5rem
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width:639.9px) {
    #IndexFeature.IndexSection {
        --padding-bottom: 0rem !important
    }
}

.IndexFeatureList {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    display: flex;
    flex-direction: column;
    padding: 0 !important
}

@media (min-width:640px) {
    .IndexFeatureList {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    .IndexFeatureList {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem;
        flex-direction: row
    }
}

@media (min-width:1024px) {
    .IndexFeatureList {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    .IndexFeatureList {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    .IndexFeatureList {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

.IndexFeatureItem {
    position: relative;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.IndexFeatureItem:not(:last-child) {
    border-bottom-width: .125rem;
    border-color: var(--color-white)
}

@media (min-width:768px) {
    .IndexFeatureItem:not(:last-child) {
        border-right-width: .125rem;
        border-bottom-width: 0
    }
}

@media (min-width:768px) {
    .IndexFeatureItem {
        width: calc(100%/var(--count))
    }
}

@media (min-width:768px) {
    .IndexFeatureList:hover .IndexFeatureItem {
        width: calc(50%/(var(--count) - 1))
    }
}

@media (min-width:1536px) {
    .IndexFeatureList:hover .IndexFeatureItem {
        width: calc((100% - 60rem)/(var(--count) - 1))
    }
}

@media (min-width:768px) {
    .IndexFeatureList:hover .IndexFeatureItem:hover {
        width: 50%
    }
}

@media (min-width:1536px) {
    .IndexFeatureList:hover .IndexFeatureItem:hover {
        width: 60rem
    }
}

.IndexFeatureList:hover .IndexFeatureItem:hover .IndexFeatureContent {
    --un-bg-opacity: .2
}

@media (min-width:768px) {
    .IndexFeatureList:hover .IndexFeatureItem:hover .IndexFeatureTop {
        display: none
    }
}

@media (min-width:768px) {
    .IndexFeatureList:hover .IndexFeatureItem:hover .IndexFeatureBottom {
        display: flex
    }
}

.IndexFeatureCover {
    width: 100%;
    height: 28.125rem
}

@media (min-width:768px) {
    .IndexFeatureCover {
        height: 31.25rem
    }
}

@media (min-width:1280px) {
    .IndexFeatureCover {
        height: 44.75rem
    }
}

.IndexFeatureCover img {
    width: 100%;
    height: 100%
}

.IndexFeatureContent {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --un-bg-opacity: 1;
    background-color: rgb(25 25 25/var(--un-bg-opacity));
    --un-bg-opacity: .5
}

.IndexFeatureTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 3.125rem
}

@media (min-width:640px) {
    .IndexFeatureTop {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}

.IndexFeatureImage {
    --size: 5.625rem;
    width: var(--size);
    height: var(--size);
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--color-white);
    border-radius: 9999px
}

@media (min-width:768px) {
    .IndexFeatureImage {
        --size: 3.75rem
    }
}

@media (min-width:1024px) {
    .IndexFeatureImage {
        --size: 5.625rem
    }
}

.IndexFeatureImage picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.IndexFeatureImage img {
    --object-fit: contain;
    width: calc(var(--size)*.6);
    height: calc(var(--size)*.6)
}

.IndexFeatureTitle {
    font-size: var(--fontSize-subtitle);
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-white)
}

@media (min-width:1024px) {
    .IndexFeatureTitle {
        text-align: center
    }
}

.IndexFeatureBottom .IndexFeatureTitle {
    text-align: left
}

@media (min-width:768px) {
    .IndexFeatureBottom .IndexFeatureTitle {
        font-size: var(--fontSize-h6);
        line-height: 1.4
    }
}

@media (min-width:1024px) {
    .IndexFeatureBottom .IndexFeatureTitle {
        font-size: var(--fontSize-h5);
        line-height: 1.4
    }
}

.IndexFeatureBottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    display: none;
    width: 100%;
    gap: 1.25rem;
    padding: 1.25rem
}

@media (min-width:768px) {
    .IndexFeatureBottom {
        --un-translate-y: 100%;
        transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
        opacity: 0
    }
}

@media (min-width:768px) {
    .IndexFeatureBottom {
        animation: fadeInUp .3s ease-in-out .1s forwards
    }
}

.IndexFeatureArticle {
    display: flex;
    flex-direction: column;
    gap: .9375rem
}

.IndexFeatureText {
    text-align: justify;
    font-size: var(--fontSize-sm);
    line-height: 1.4;
    line-height: 1.8;
    color: var(--color-white)
}

@media (min-width:768px) {
    .IndexFeatureTop .IndexFeatureText {
        display: none
    }
}

#IndexShopping {
    --un-bg-opacity: 1;
    background-color: rgb(246 233 226/var(--un-bg-opacity))
}

#IndexShoppingSwiper {
    width: 100%;
    padding-left: .625rem;
    padding-right: .625rem;
    margin-left: auto;
    margin-right: auto
}

@media (min-width:640px) {
    #IndexShoppingSwiper {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexShoppingSwiper {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexShoppingSwiper {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    #IndexShoppingSwiper {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexShoppingSwiper {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

#IndexShoppingSwiperContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3.125rem;
    padding-right: 3.125rem
}

#IndexShoppingSwiperContainer .swiper-button-next,
#IndexShoppingSwiperContainer .swiper-button-prev {
    --swiper-navigation-top-offset: 0rem;
    --swiper-navigation-sides-offset: 0rem;
    --swiper-navigation-size: 1.25rem;
    --swiper-navigation-color: #ffffff;
    margin-top: 0;
    width: 2.5rem;
    height: 100%;
    background-color: #ffffff4d
}

@media (min-width:768px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        width: 3.125rem
    }
}

@media (min-width:1024px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        width: 3.75rem
    }
}

@media (min-width:1536px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        width: 4.375rem
    }
}

@media (min-width:768px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        --swiper-navigation-size: 1.5rem
    }
}

@media (min-width:1280px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        --swiper-navigation-size: 2.5rem
    }
}

@media (min-width:1536px) {

    #IndexShoppingSwiperContainer .swiper-button-next,
    #IndexShoppingSwiperContainer .swiper-button-prev {
        --swiper-navigation-size: 4.125rem
    }
}

#IndexNews .IndexNewsList {
    --gap: 1.875rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap)
}

@media (min-width:640px) {
    #IndexNews .IndexNewsList {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexNews .IndexNewsList {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexNews .IndexNewsList {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem;
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (min-width:1280px) {
    #IndexNews .IndexNewsList {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexNews .IndexNewsList {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexNews .IndexNewsList {
        --gap: 2.5rem
    }
}

@media (min-width:1280px) {
    #IndexNews .IndexNewsList {
        --gap: 3.125rem
    }
}

@media (min-width:768px) {
    #IndexNews .IndexNewsList {
        row-gap: 2.5rem
    }
}

@media (max-width:1023.9px) {
    #IndexNews .IndexNewsList .NewsCard:first-child {
        --flex-direction: row;
        grid-column: span 2/span 2
    }

    #IndexNews .IndexNewsList .NewsCard:nth-child(2n):not(:first-child):after {
        content: "";
        position: absolute;
        top: 0;
        z-index: 3;
        width: .0625rem;
        height: 100%;
        --un-bg-opacity: 1;
        background-color: rgb(149 149 149/var(--un-bg-opacity));
        right: calc(-1*var(--gap)/2);
        --un-bg-opacity: .3
    }
}

@media (max-width:639.9px) {
    #IndexNews .IndexNewsList .NewsCard:first-child {
        --flex-direction: column;
        grid-column: span 2/span 2
    }

    #IndexNews .IndexNewsList .NewsCard:first-child .NewsCardTitle strong {
        font-size: var(--fontSize-subtitle);
        line-height: 1.4
    }

    #IndexNews .IndexNewsList .NewsCard:first-child .NewsCardSubTitle,
    #IndexNews .IndexNewsList .NewsCard:first-child .NewsCardLink {
        font-size: var(--fontSize-sm);
        line-height: 1.4
    }
}

@media (min-width:1024px) {
    #IndexNews .IndexNewsList .NewsCard:nth-child(2n) {
        --flex-direction: column-reverse
    }

    #IndexNews .IndexNewsList .NewsCard:not(:last-child):after {
        content: "";
        position: absolute;
        top: 0;
        z-index: 3;
        width: .0625rem;
        height: 100%;
        --un-bg-opacity: 1;
        background-color: rgb(149 149 149/var(--un-bg-opacity));
        right: calc(-1*var(--gap)/2);
        --un-bg-opacity: .3
    }
}

#IndexNews .IndexNewsBack {
    margin-left: auto;
    margin-right: auto;
    padding-left: .625rem;
    padding-right: .625rem;
    width: 100%;
    display: flex;
    justify-content: flex-end
}

@media (min-width:640px) {
    #IndexNews .IndexNewsBack {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:768px) {
    #IndexNews .IndexNewsBack {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1024px) {
    #IndexNews .IndexNewsBack {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1280px) {
    #IndexNews .IndexNewsBack {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

@media (min-width:1536px) {
    #IndexNews .IndexNewsBack {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: .625rem;
        padding-right: .625rem
    }
}

#IndexNews .IndexNewsBack .btn {
    --btn-border-radius: 5rem
}

#Index .IndexSection {
    --section-gap: 2.5rem;
    --padding-top: 5rem;
    --padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--section-gap);
    padding: var(--padding-top)0 var(--padding-bottom)
}

@media (min-width:1024px) {
    #Index .IndexSection {
        --padding-top: 4.4375rem;
        --padding-bottom: 8.375rem;
        --section-gap: 4.625rem
    }
}