.page-product .sec-banner .banner-img-inner,
.page-product-detail .sec-banner .banner-img-inner {
    width: 100%
}

.page-product .sec-banner .banner-img .decornest:nth-child(1),
.page-product-detail .sec-banner .banner-img .decornest:nth-child(1) {
    left: 0;
    top: -70%
}

.page-product .sec-banner .banner-img .decornest:nth-child(2),
.page-product-detail .sec-banner .banner-img .decornest:nth-child(2) {
    width: 8%;
    bottom: 2%;
    left: -10%
}

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

    .page-product .sec-banner .banner-img .decornest:nth-child(2),
    .page-product-detail .sec-banner .banner-img .decornest:nth-child(2) {
        left: 0
    }
}

.page-product .sec-banner .banner-img .decornest:nth-child(3),
.page-product-detail .sec-banner .banner-img .decornest:nth-child(3) {
    right: 10%;
    width: 11%;
    top: -40%
}

.page-product .sec-banner .banner-img .decornest:nth-child(4),
.page-product-detail .sec-banner .banner-img .decornest:nth-child(4) {
    right: -12%;
    width: 12%;
    bottom: 0
}

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

    .page-product .sec-banner .banner-img .decornest:nth-child(4),
    .page-product-detail .sec-banner .banner-img .decornest:nth-child(4) {
        right: 0
    }
}

.page-product .banner-bot {
    display: none
}

.page-nutritious .banner-img-inner {
    width: 60%;
    margin-left: 25%
}

@media screen and (max-width:767px) {
    .page-nutritious .banner-img-inner {
        width: 100%;
        margin-left: 0
    }
}

.sec-banner {
    position: relative
}

.sec-banner.noBanner::after,
.sec-banner.noBanner::before {
    display: none;
    pointer-events: none
}

.sec-banner::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    right: 0;
    height: 10%;
    z-index: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(255, 255, 255, 0)), to(white));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, #fff 100%)
}

.sec-banner::after {
    position: absolute;
    content: '';
    left: 0;
    top: 100%;
    right: 0;
    height: 10%;
    z-index: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(255, 255, 255, 0)), to(white));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, #fff 100%)
}

.banner {
    position: relative;
    overflow: hidden
}

.banner .gr-nest .nest {
    mix-blend-mode: multiply;
    -webkit-filter: blur(2px);
    filter: blur(2px)
}

.banner-bdy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    row-gap: 2rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    min-height: calc(720/1440 * 100vw)
}

.banner.is-inview .banner-tt {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.banner.is-inview .banner-des .inner .txt {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.banner.bannersec .banner-bdy {
    min-height: calc(600/1440 * 100vw)
}

.banner.bannersec::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    z-index: -2;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65.61%, rgba(242, 253, 255, 0)), color-stop(80.43%, #f2fdff));
    background: linear-gradient(180deg, rgba(242, 253, 255, 0) 65.61%, #f2fdff 80.43%)
}

.banner.bannersec::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 20%;
    right: 0;
    height: 100%;
    z-index: -3;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65.61%, rgba(242, 253, 255, 0)), color-stop(80.43%, #f2fdff));
    background: linear-gradient(180deg, rgba(242, 253, 255, 0) 65.61%, #f2fdff 80.43%)
}

.banner.bannerimgcus .banner-img {
    width: 100%
}

.banner.bannerimgcus .banner-img .decornest:nth-child(1) {
    left: 0;
    bottom: 100%;
    top: auto;
    width: 16%
}

.banner.bannerimgcus .banner-img .decornest:nth-child(2) {
    right: 100%;
    top: 80%;
    width: 10%
}

.banner.bannerimgcus .banner-img .decornest:nth-child(3) {
    left: 80%;
    bottom: 100%;
    top: auto;
    width: 10%
}

.banner.bannerimgcus .banner-img .decornest:nth-child(4) {
    left: 101%;
    bottom: 0;
    top: auto;
    width: 10%
}

.banner-bg {
    position: absolute;
    inset: 0;
    z-index: -4
}

.banner-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    height: 100% !important;
    -webkit-animation: scaledown 3s ease;
    animation: scaledown 3s ease
}

.banner-img {
    width: 100%;
    position: relative
}

.banner-img-inner {
    width: 70%;
    margin: 0 auto
}

@media screen and (max-width:767px) {
    .banner-img-inner {
        width: 100%
    }
}

.banner-img-inner img {
    width: 100%;
    display: block;
    -webkit-filter: drop-shadow(0 1rem .75rem rgba(0, 0, 0, .7));
    filter: drop-shadow(0 1rem .75rem rgba(0, 0, 0, .7))
}

@media screen and (max-width:800px) {
    .banner-img .decornest {
        display: none
    }
}

.banner-img .decornest:nth-child(1) {
    left: -10%;
    top: -10%;
    width: 17%
}

@media screen and (max-width:1500px) {
    .banner-img .decornest:nth-child(1) {
        left: 0
    }
}

.banner-img .decornest:nth-child(2) {
    width: 14%;
    left: 0;
    bottom: 10%
}

@media screen and (max-width:1500px) {
    .banner-img .decornest:nth-child(2) {
        left: 10%
    }
}

.banner-img .decornest:nth-child(3) {
    width: 11%;
    right: 0;
    top: 10%
}

@media screen and (max-width:1500px) {
    .banner-img .decornest:nth-child(3) {
        right: 0
    }
}

.banner-img .decornest:nth-child(3) .in {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.banner-img .decornest:nth-child(4) {
    right: -15%;
    bottom: 0;
    width: 18%
}

@media screen and (max-width:1500px) {
    .banner-img .decornest:nth-child(4) {
        right: 10%
    }
}

.banner-img .decornest:nth-child(4) .in {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.banner-des {
    padding: 3rem 0
}

@media screen and (max-width:800px) {
    .banner-des {
        padding: 1.6rem
    }
}

.banner-des .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.banner-des .inner .txt {
    color: #f2fdff;
    --f-sz: clamp(1.6rem, calc(1.2rem + 0.5vw), 1.8rem);
    font-size: var(--f-sz);
    position: relative;
    text-align: center;
    font-weight: 500;
    line-height: 150%;
    z-index: 1;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 0;
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem)
}

.banner-des .inner .txt::before {
    position: absolute;
    content: attr(data-txt);
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    color: #f2fdff;
    --f-sz: clamp(1.6rem, calc(1.2rem + 0.5vw), 1.8rem);
    font-size: var(--f-sz);
    text-align: center;
    -webkit-text-stroke-width: .2rem;
    -webkit-text-stroke-color: #0c4ca3;
    font-weight: 500;
    line-height: 150%;
    z-index: -1
}

.banner-tt {
    color: #ed1c24;
    position: relative;
    text-align: center;
    --f-sz: clamp(3rem, calc(-0.6rem + 4.5vw), 4.8rem);
    font-size: var(--f-sz);
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 0;
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem)
}

.banner-tt::before {
    position: absolute;
    content: attr(data-tt);
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    color: #ed1c24;
    text-align: center;
    --f-sz: clamp(3rem, calc(-0.6rem + 4.5vw), 4.8rem);
    font-size: var(--f-sz);
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    z-index: -1;
    -webkit-text-stroke-width: .3rem;
    -webkit-text-stroke-color: #fef200
}

.banner-bot {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
    -webkit-transform: translateY(5%);
    transform: translateY(5%)
}

.banner-bot img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.hbanner {
    position: relative;
    overflow: hidden
}

.hbanner-img {
    width: 100%;
    height: 100%
}

@media screen and (min-width:1024px) {
    .hbanner-img {
        /* height: calc(100vh - var(--size-hd)) */
    }
}

.hbanner-img .inner {
    display: block;
    padding-top: calc((790 / 1920) * 100%);
    /* padding-top: calc((839 / 1440) * 100%); */
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.hbanner-img .inner iframe,
.hbanner-img .inner img,
.hbanner-img .inner video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.hbanner-video {
    width: 100%;
    height: 100%
}

@media screen and (min-width:1024px) {
    .hbanner-video {
        height: calc(100vh - var(--size-hd))
    }
}

.hbanner-video .inner {
    display: block;
    padding-top: calc((839 / 1440) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.hbanner-video .inner iframe,
.hbanner-video .inner img,
.hbanner-video .inner video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.hbanner-slider {
    position: relative
}

.hbanner-slider .swiper {
    height: 100%
}

.hbanner-slider .swiper-pagination {
    bottom: 2rem !important
}