@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, 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");
    font-weight: 400;
    font-style: normal
}

        .commonWidget {
            border-radius: 10px;
            overflow: hidden;
            display: block;
            color: #222
        }

        .commonWidget:hover {
            box-shadow: 0 2px 4px -1px rgba(34, 34, 34, .2), 0 1px 10px 0 rgba(34, 34, 34, .12), 0 4px 5px 0 rgba(34, 34, 34, .14)
        }


        .SubTitle_title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px
        }

        .SubTitle_title:before {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 9px 0 9px 15px;
            margin-right: 7px
        }

        @media only screen and (min-width: 1024px) {
            .SubTitle_title {
                font-size: 24px
            }
        }

        .Title_Container {
            text-align: center;
        }

        .Title_Container .Title_title {
            margin-top: 30px;
            /* margin-bottom: 20px; */
            position: relative;
            font-size: 24px;
            font-weight: 700;
            display: inline-block;
            z-index: 1
        }

        .Title_Container .Title_title:before {
            content: "";
            display: block;
            position: absolute;
            left: -10px;
            z-index: -1;
            top: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 36px 36px 0 0
        }

        @media only screen and (min-width: 1024px) {
            .Title_Container .Title_title {
                /* margin-bottom: 30px; */
                font-size: 30px
            }
        }


        .Sec_anchor {
            display: block;
            z-index: -1;
            visibility: hidden;
            height: 77px;
            margin-top: -77px
        }

        @media only screen and (min-width: 577px) {
            .Sec_anchor {
                height: 116px;
                margin-top: -116px
            }
        }


        .Sec_article:first-of-type [class^=Title_Container] .title {
            margin-top: 0
        }


        .Sec_article:last-of-type .Sec_section {
            margin: 0 auto
        }

        .Sec_article:last-of-type .Sec_section .Sec_wrapper {
            margin-bottom: 0
        }

        .Sec_article.iframe-article {
            margin: 0;
            padding: 0
        }

        .Sec_article.iframe-article .Sec_section .Sec_wrapper {
            margin: 0
        }

        .Sec_article .text-section_with_more [class^=SubTitle_widgetText] {
            margin-top: -30px
        }

        .Sec_article .Sec_section {
            margin: 0 auto;
            position: relative;
            padding-bottom: 30px
        }

        .Sec_article .Sec_section.full {
            width: 100%;
            margin: 0;
            padding: 0
        }

        .Sec_article .Sec_wrapper {
            margin: 20px 15px 0
        }

        .Sec_article .column322 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(2, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column322 .Sec_widgets {
                grid-gap: 30px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .column322 .Sec_widgets {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .Sec_article .column221 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(1, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column221 .Sec_widgets {
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 30px
            }
        }

        .Sec_article .column321 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(1, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column321 .Sec_widgets {
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 30px
            }
        }

        @media only screen and (min-width: 1024px) {
            .Sec_article .column321 .Sec_widgets {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .Sec_article .column1 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            margin-bottom: 10px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column1 .Sec_widgets {
                grid-gap: 30px;
                margin-bottom: 0
            }
        }

        .Sec_article .column1 .Sec_widgets.widgetBank-wrapper {
            grid-gap: 20px
        }

        .Sec_article .slider322 .Sec_widgets .next,
        .Sec_article .slider322 .Sec_widgets .prev {
            display: none
        }

        @media only screen and (min-width: 1024px) {

            .Sec_article .slider322 .Sec_widgets .next,
            .Sec_article .slider322 .Sec_widgets .prev {
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: 45px;
                height: 45px;
                background-color: #fff;
                border-radius: 50%;
                transform: translateY(-50%);
                z-index: 1;
                box-shadow: 0 3px 15px 0 rgba(34, 34, 34, .15);
                display: flex;
                align-items: center;
                justify-content: center
            }

            .Sec_article .slider322 .Sec_widgets .next.swiper-button-disabled,
            .Sec_article .slider322 .Sec_widgets .prev.swiper-button-disabled {
                display: none
            }

            .Sec_article .slider322 .Sec_widgets .next:hover .Sec_icon,
            .Sec_article .slider322 .Sec_widgets .prev:hover .Sec_icon {
                color: #11d073
            }

            .Sec_article .slider322 .Sec_widgets .prev {
                left: -65px
            }

            .Sec_article .slider322 .Sec_widgets .next {
                right: -65px
            }

            .Sec_article .slider322 .Sec_widgets .Sec_icon {
                color: #666;
                width: 35px;
                height: 35px
            }
        }

        .Sec_article .center321 .Sec_widgets {
            display: grid;
            grid-gap: 10px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .center321 .Sec_widgets {
                display: flex;
                flex-wrap: wrap;
                grid-gap: 30px;
                justify-content: center
            }
        }



        .Sec_article .swiper [class^=Card_content] {
            min-height: 123px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .swiper [class^=Card_content] {
                min-height: 136px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .swiper [class^=Card_content] {
                min-height: 156px
            }
        }

        .Sec_article .swiper [class^=Card_content] p+p {
            position: absolute;
            bottom: 10px;
            right: 10px
        }

        @media only screen and (min-width: 1024px) {
            .Sec_article .swiper [class^=Card_content] p+p {
                bottom: 10px;
                right: 20px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .swiper [class^=Card_content] p+p {
                bottom: 20px;
                right: 20px
            }
        }




        .Sec_anchor__YzlXs {
            display: block;
            z-index: -1;
            visibility: hidden;
            height: 77px;
            margin-top: -77px
        }

        @media only screen and (min-width: 577px) {
            .Sec_anchor__YzlXs {
                height: 116px;
                margin-top: -116px
            }
        }

        .Sec_article {
            margin-top: 0px;
        }



        .Sec_article:first-of-type [class^=Title_Container] .title {
            margin-top: 0
        }


        .Sec_article:last-of-type .Sec_section__F6npP {
            margin: 0 auto
        }

        .Sec_article:last-of-type .Sec_section__F6npP .Sec_wrapper__WTA3M {
            margin-bottom: 0
        }

        .Sec_article.iframe-article {
            margin: 0;
            padding: 0
        }

        .Sec_article.iframe-article .Sec_section__F6npP .Sec_wrapper__WTA3M {
            margin: 0
        }

        .Sec_article .text-section_with_more [class^=SubTitle_widgetText] {
            margin-top: -30px
        }

        .Sec_article .Sec_section__F6npP {
            margin: 0 auto;
            position: relative;
            padding-bottom: 30px
        }

        .Sec_article .Sec_section__F6npP.full {
            width: 100%;
            margin: 0;
            padding: 0
        }

        .Sec_article .Sec_wrapper__WTA3M {
            margin: 20px 15px 0
        }

        .Sec_article .column322 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(2, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column322 .Sec_widgets {
                grid-gap: 30px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .column322 .Sec_widgets {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .Sec_article .column221 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(1, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column221 .Sec_widgets {
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 30px
            }
        }

        .Sec_article .column321 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(1, 1fr)
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column321 .Sec_widgets {
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 30px
            }
        }

        @media only screen and (min-width: 1024px) {
            .Sec_article .column321 .Sec_widgets {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .Sec_article .column1 .Sec_widgets {
            display: grid;
            grid-gap: 10px;
            margin-bottom: 10px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .column1 .Sec_widgets {
                grid-gap: 30px;
                margin-bottom: 0
            }
        }

        .Sec_article .column1 .Sec_widgets.widgetBank-wrapper {
            grid-gap: 20px
        }

        .Sec_article .slider322 .Sec_widgets .next,
        .Sec_article .slider322 .Sec_widgets .prev {
            display: none
        }

        @media only screen and (min-width: 1024px) {

            .Sec_article .slider322 .Sec_widgets .next,
            .Sec_article .slider322 .Sec_widgets .prev {
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: 45px;
                height: 45px;
                background-color: #fff;
                border-radius: 50%;
                transform: translateY(-50%);
                z-index: 1;
                box-shadow: 0 3px 15px 0 rgba(34, 34, 34, .15);
                display: flex;
                align-items: center;
                justify-content: center
            }

            .Sec_article .slider322 .Sec_widgets .next.swiper-button-disabled,
            .Sec_article .slider322 .Sec_widgets .prev.swiper-button-disabled {
                display: none
            }

            .Sec_article .slider322 .Sec_widgets .next:hover .Sec_icon,
            .Sec_article .slider322 .Sec_widgets .prev:hover .Sec_icon {
                color: #11d073
            }

            .Sec_article .slider322 .Sec_widgets .prev {
                left: -65px
            }

            .Sec_article .slider322 .Sec_widgets .next {
                right: -65px
            }

            .Sec_article .slider322 .Sec_widgets .Sec_icon {
                color: #666;
                width: 35px;
                height: 35px
            }
        }

        .Sec_article .center321 .Sec_widgets {
            display: grid;
            grid-gap: 10px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .center321 .Sec_widgets {
                display: flex;
                flex-wrap: wrap;
                grid-gap: 30px;
                justify-content: center
            }
        }

        .Sec_article .Sec_swiper {
            min-height: 200px;
            margin-bottom: 10px;
            padding: 5px 0
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .Sec_swiper {
                margin-bottom: 0;
                min-height: 310px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .Sec_swiper {
                min-height: 360px
            }
        }

        .Sec_article .swiper [class^=Card_content] {
            min-height: 123px
        }

        @media only screen and (min-width: 577px) {
            .Sec_article .swiper [class^=Card_content] {
                min-height: 136px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .swiper [class^=Card_content] {
                min-height: 156px
            }
        }

        .Sec_article .swiper [class^=Card_content] p+p {
            position: absolute;
            bottom: 10px;
            right: 10px
        }

        @media only screen and (min-width: 1024px) {
            .Sec_article .swiper [class^=Card_content] p+p {
                bottom: 10px;
                right: 20px
            }
        }

        @media only screen and (min-width: 1280px) {
            .Sec_article .swiper [class^=Card_content] p+p {
                bottom: 20px;
                right: 20px
            }
        }


        .More_moreBlock {
            margin: 10px 20px 0
        }

        @media only screen and (min-width: 577px) {
            .More_moreBlock {
                text-align: right;
                margin-top: 30px
            }
        }

        .More_moreBlock .More_more {
            padding: 10px 20px;
            border-radius: 3px;
            display: block;
            text-align: center;
            font-weight: 700
        }

        @media only screen and (min-width: 577px) {
            .More_moreBlock .More_more {
                font-size: 18px;
                min-width: 200px;
                display: inline-block
            }
        }


        .GoTop_topBlock {
            position: fixed;
            right: 20px;
            bottom: 100px;
            opacity: 0;
            visibility: hidden;
            transition: all .4s;
            z-index: 10
        }

        .GoTop_topBlock.GoTop_active {
            opacity: 1;
            visibility: visible
        }



        .GoTop_topBlock .GoTop_goTop {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            box-shadow: 0 1px 5px 0 rgba(34, 34, 34, .2), 0 3px 1px -2px rgba(34, 34, 34, .12), 0 2px 2px 0 rgba(34, 34, 34, .14);
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin: 0 auto
        }

        .GoTop_topBlock .GoTop_goTop .GoTop_icon {
            width: 32px;
            height: 32px
        }




        .Tag_tag {
            display: inline-block;
            padding: 3px 5px;
            margin-top: 10px;
            color: #666;
            border-radius: 3px;
            grid-area: tag;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            box-sizing: border-box
        }



        .Title_title {
            font-weight: 700;
            color: #222;
            font-size: 14px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            grid-area: title
        }

        @media only screen and (min-width: 1024px) {
            .Title_title {
                font-size: 16px
            }
        }


        .Card_Card {
            display: flex;
            flex-direction: column;
            position: relative
        }

        .Card_Card .Card_imgWrapper {
            min-height: 75px;
            aspect-ratio: 550/350
        }

        .Card_Card .Card_imgWrapper img {
            height: 100%
        }

        @media only screen and (min-width: 1024px) {
            .Card_Card .Card_imgWrapper {
                min-height: 150px
            }
        }

        .Card_Card .Card_content {
            flex: 1 1;
            box-sizing: border-box;
            position: relative;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 115px
        }

        @media only screen and (min-width: 1024px) {
            .Card_Card .Card_content {
                padding: 10px 20px;
                min-height: 126px
            }

            .Card_Card .Card_content:hover {
                background-color: #fff
            }
        }

        @media only screen and (min-width: 1280px) {
            .Card_Card .Card_content {
                padding: 20px;
                min-height: 146px
            }
        }

        .Card_Card .price {
            align-self: flex-end;
            margin-top: auto
        }

        .Card_Card .Card_tmpImg {
            width: 100%;
            position: relative;
            z-index: 5
        }

        .Card_Card .Card_tmpImg+img {
            position: absolute;
            z-index: 2;
            top: 0
        }

        .Card_Card ul[class^=SubTitle_subTitles] {
            display: block
        }

        .Card_Card ul[class^=SubTitle_subTitles] li[class^=SubTitle_subTitle] {
            display: none
        }

        @media only screen and (min-width: 577px) {
            .Card_Card ul[class^=SubTitle_subTitles] li[class^=SubTitle_subTitle] {
                display: block
            }
        }

        .Card_Card ul[class^=SubTitle_subTitles] li[class^=SubTitle_subTitle]:first-child {
            display: block
        }




      




.red {
    background-color: #fceeee
}

.red .nav {
    background-color: #ed5c5b
}

.red .nav li:hover {
    background-color: #fceeee
}

.red .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.red .nav li.active a {
    color: #b60400
}

.red .nav a {
    color: #fff
}

.red .nav a:hover {
    color: #b60400
}

.red .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#ed5c5b)
}

.red .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#ed5c5b)
}

.red .subTab li:hover a {
    color: #b60400
}

.red .subTab li .active {
    border-color: #ed5c5b;
    box-shadow: 0 6px #fff,0 10px #ed5c5b
}

.red .subTab li .active a {
    color: #b60400;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .red .subTab li a.active {
        border-bottom:4px solid #ed5c5b!important
    }
}

.red .subTab li a.active {
    font-weight: 700;
    color: #b60400
}

.red .title {
    color: #b60400
}

.red .title:before {
    border-color: #b9e9f1 transparent transparent
}

.red .sectionTitle {
    color: #b60400
}

.red .sectionTitle:before {
    border-color: transparent transparent transparent #b9e9f1
}

.red .notice {
    background-color: #eff7f8
}

.red .subTitle {
    color: #b60400!important
}

.red .tag {
    background-color: #b9e9f1
}

.red .button {
    background-color: #ed5c5b;
    color: #fff
}

.red .button:hover {
    background-color: #b60400;
    color: #fff
}

.red .cardMedia,.red .commonWidget,.red .widgetBank,.red .widgetBasic,.red .widgetDiscount,.red .widgetImgText {
    background-color: #fff
}

.red .widgetImgTextTitle {
    color: #b60400;
    border-color: #ed5c5b!important
}

.red .widgetImgTextMoreIcon {
    background-color: #ed5c5b
}

.red .widgetBasicHr:before {
    background-color: #b9e9f1
}

.red .widgetFaqTag {
    color: #b60400
}

.red .widgetDiscountTag {
    background-color: #ed5c5b;
    color: #fff
}

.red .widgetDiscountTag:after,.red .widgetDiscountTag:before {
    background-color: #fceeee
}

.red .widgetDiscountShowButton:hover {
    color: #b60400!important
}

.red .discountButton {
    border-color: #ed5c5b;
    color: #b60400
}

.red .discountButton:hover {
    background-color: #fceeee
}

.red .widgetTextMore .widgetTextMoreIcon {
    background-color: #ed5c5b
}

.red .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #b60400
}

.red .imgMedia {
    background-color: #ed5c5b
}

.red .goTop {
    color: #b60400
}

.red .innerHTML table {
    border-bottom: 1px solid #ed5c5b
}

.red .innerHTML table tr:has(>th) {
    background-color: #ed5c5b
}

.red .innerHTML table th {
    background-color: #ed5c5b;
    color: #fff
}

.green {
    background-color: #eaf3e9
}

.green .nav {
    background-color: #588158
}

.green .nav li:hover {
    background-color: #eaf3e9
}

.green .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.green .nav li.active a {
    color: #205620
}

.green .nav a {
    color: #fff
}

.green .nav a:hover {
    color: #205620
}

.green .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#588158)
}

.green .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#588158)
}

.green .subTab li:hover a {
    color: #205620
}

.green .subTab li .active {
    border-color: #588158;
    box-shadow: 0 6px #fff,0 10px #588158
}

.green .subTab li .active a {
    color: #205620;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .green .subTab li a.active {
        border-bottom:4px solid #588158!important
    }
}

.green .subTab li a.active {
    font-weight: 700;
    color: #205620
}

.green .title {
    color: #205620
}

.green .title:before {
    border-color: #f7daa9 transparent transparent
}

.green .sectionTitle {
    color: #205620
}

.green .sectionTitle:before {
    border-color: transparent transparent transparent #f7daa9
}

.green .notice {
    background-color: #fbf4ea
}

.green .subTitle {
    color: #205620!important
}

.green .tag {
    background-color: #f7daa9
}

.green .button {
    background-color: #588158;
    color: #fff
}

.green .button:hover {
    background-color: #205620;
    color: #fff
}

.green .cardMedia,.green .commonWidget,.green .widgetBank,.green .widgetBasic,.green .widgetDiscount,.green .widgetImgText {
    background-color: #fff
}

.green .widgetImgTextTitle {
    color: #205620;
    border-color: #588158!important
}

.green .widgetImgTextMoreIcon {
    background-color: #588158
}

.green .widgetBasicHr:before {
    background-color: #f7daa9
}

.green .widgetFaqTag {
    color: #205620
}

.green .widgetDiscountTag {
    background-color: #588158;
    color: #fff
}

.green .widgetDiscountTag:after,.green .widgetDiscountTag:before {
    background-color: #eaf3e9
}

.green .widgetDiscountShowButton:hover {
    color: #205620!important
}

.green .discountButton {
    border-color: #588158;
    color: #205620
}

.green .discountButton:hover {
    background-color: #eaf3e9
}

.green .widgetTextMore .widgetTextMoreIcon {
    background-color: #588158
}

.green .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #205620
}

.green .imgMedia {
    background-color: #588158
}

.green .goTop {
    color: #205620
}

.green .innerHTML table {
    border-bottom: 1px solid #588158
}

.green .innerHTML table tr:has(>th) {
    background-color: #588158
}

.green .innerHTML table th {
    background-color: #588158;
    color: #fff
}

.blue {
    background-color: #edf6ff
}

.blue .nav {
    background-color: #2176cb
}

.blue .nav li:hover {
    background-color: #edf6ff
}

.blue .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.blue .nav li.active a {
    color: #024282
}

.blue .nav a {
    color: #fff
}

.blue .nav a:hover {
    color: #024282
}

.blue .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#2176cb)
}

.blue .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#2176cb)
}

.blue .subTab li:hover a {
    color: #024282
}

.blue .subTab li .active {
    border-color: #2176cb;
    box-shadow: 0 6px #fff,0 10px #2176cb
}

.blue .subTab li .active a {
    color: #024282;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .blue .subTab li a.active {
        border-bottom:4px solid #2176cb!important
    }
}

.blue .subTab li a.active {
    font-weight: 700;
    color: #024282
}

.blue .title {
    color: #024282
}

.blue .title:before {
    border-color: #fff297 transparent transparent
}

.blue .sectionTitle {
    color: #024282
}

.blue .sectionTitle:before {
    border-color: transparent transparent transparent #fff297
}

.blue .notice {
    background-color: #fffce7
}

.blue .subTitle {
    color: #024282!important
}

.blue .tag {
    background-color: #fff297
}

.blue .button {
    background-color: #2176cb;
    color: #fff
}

.blue .button:hover {
    background-color: #024282;
    color: #fff
}

.blue .cardMedia,.blue .commonWidget,.blue .widgetBank,.blue .widgetBasic,.blue .widgetDiscount,.blue .widgetImgText {
    background-color: #fff
}

.blue .widgetImgTextTitle {
    color: #024282;
    border-color: #2176cb!important
}

.blue .widgetImgTextMoreIcon {
    background-color: #2176cb
}

.blue .widgetBasicHr:before {
    background-color: #fff297
}

.blue .widgetFaqTag {
    color: #024282
}

.blue .widgetDiscountTag {
    background-color: #2176cb;
    color: #fff
}

.blue .widgetDiscountTag:after,.blue .widgetDiscountTag:before {
    background-color: #edf6ff
}

.blue .widgetDiscountShowButton:hover {
    color: #024282!important
}

.blue .discountButton {
    border-color: #2176cb;
    color: #024282
}

.blue .discountButton:hover {
    background-color: #edf6ff
}

.blue .widgetTextMore .widgetTextMoreIcon {
    background-color: #2176cb
}

.blue .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #024282
}

.blue .imgMedia {
    background-color: #2176cb
}

.blue .goTop {
    color: #024282
}

.blue .innerHTML table {
    border-bottom: 1px solid #2176cb
}

.blue .innerHTML table tr:has(>th) {
    background-color: #2176cb
}

.blue .innerHTML table th {
    background-color: #2176cb;
    color: #fff
}

.purple {
    background-color: #efecf5
}

.purple .nav {
    background-color: #6f5ba5
}

.purple .nav li:hover {
    background-color: #efecf5
}

.purple .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.purple .nav li.active a {
    color: #332067
}

.purple .nav a {
    color: #fff
}

.purple .nav a:hover {
    color: #332067
}

.purple .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#6f5ba5)
}

.purple .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#6f5ba5)
}

.purple .subTab li:hover a {
    color: #332067
}

.purple .subTab li .active {
    border-color: #6f5ba5;
    box-shadow: 0 6px #fff,0 10px #6f5ba5
}

.purple .subTab li .active a {
    color: #332067;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .purple .subTab li a.active {
        border-bottom:4px solid #6f5ba5!important
    }
}

.purple .subTab li a.active {
    font-weight: 700;
    color: #332067
}

.purple .title {
    color: #332067
}

.purple .title:before {
    border-color: #fbd4ad transparent transparent
}

.purple .sectionTitle {
    color: #332067
}

.purple .sectionTitle:before {
    border-color: transparent transparent transparent #fbd4ad
}

.purple .notice {
    background-color: #fffaf0
}

.purple .subTitle {
    color: #332067!important
}

.purple .tag {
    background-color: #fbd4ad
}

.purple .button {
    background-color: #6f5ba5;
    color: #fff
}

.purple .button:hover {
    background-color: #332067;
    color: #fff
}

.purple .cardMedia,.purple .commonWidget,.purple .widgetBank,.purple .widgetBasic,.purple .widgetDiscount,.purple .widgetImgText {
    background-color: #fff
}

.purple .widgetImgTextTitle {
    color: #332067;
    border-color: #6f5ba5!important
}

.purple .widgetImgTextMoreIcon {
    background-color: #6f5ba5
}

.purple .widgetBasicHr:before {
    background-color: #fbd4ad
}

.purple .widgetFaqTag {
    color: #332067
}

.purple .widgetDiscountTag {
    background-color: #6f5ba5;
    color: #fff
}

.purple .widgetDiscountTag:after,.purple .widgetDiscountTag:before {
    background-color: #efecf5
}

.purple .widgetDiscountShowButton:hover {
    color: #332067!important
}

.purple .discountButton {
    border-color: #6f5ba5;
    color: #332067
}

.purple .discountButton:hover {
    background-color: #efecf5
}

.purple .widgetTextMore .widgetTextMoreIcon {
    background-color: #6f5ba5
}

.purple .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #332067
}

.purple .imgMedia {
    background-color: #6f5ba5
}

.purple .goTop {
    color: #332067
}

.purple .innerHTML table {
    border-bottom: 1px solid #6f5ba5
}

.purple .innerHTML table tr:has(>th) {
    background-color: #6f5ba5
}

.purple .innerHTML table th {
    background-color: #6f5ba5;
    color: #fff
}

.orange .nav {
    background-color: #ffcc9d
}

.orange .nav li:hover {
    background-color: #fef5eb
}

.orange .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.orange .nav li.active a {
    color: #e46719
}

.orange .nav a {
    color: #666
}

.orange .nav a:hover {
    color: #e46719
}

.orange .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#ffcc9d)
}

.orange .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#ffcc9d)
}

.orange .subTab li:hover a {
    color: #e46719
}

.orange .subTab li .active {
    border-color: #ffcc9d;
    box-shadow: 0 6px #fff,0 10px #ffcc9d
}

.orange .subTab li .active a {
    color: #e46719;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .orange .subTab li a.active {
        border-bottom:4px solid #ffcc9d!important
    }
}

.orange .subTab li a.active {
    font-weight: 700;
    color: #e46719
}

.orange .title {
    color: #e46719
}

.orange .title:before {
    border-color: #d1f0dd transparent transparent
}

.orange .sectionTitle {
    color: #e46719
}

.orange .sectionTitle:before {
    border-color: transparent transparent transparent #d1f0dd
}

.orange .notice {
    background-color: #eff8f4
}

.orange .subTitle {
    color: #e46719!important
}

.orange .tag {
    background-color: #d1f0dd
}

.orange .button {
    background-color: #ffcc9d;
    color: #666
}

.orange .button:hover {
    background-color: #e46719;
    color: #fff
}

.orange .cardMedia,.orange .commonWidget,.orange .widgetBank,.orange .widgetBasic,.orange .widgetDiscount,.orange .widgetImgText {
    background-color: #fafafa
}

.orange .widgetImgTextTitle {
    color: #e46719;
    border-color: #ffcc9d!important
}

.orange .widgetImgTextMoreIcon {
    background-color: #ffcc9d
}

.orange .widgetBasicHr:before {
    background-color: #d1f0dd
}

.orange .widgetFaqTag {
    color: #e46719
}

.orange .widgetDiscountTag {
    background-color: #ffcc9d;
    color: #666
}

.orange .widgetDiscountTag:after,.orange .widgetDiscountTag:before {
    background-color: #fef5eb
}

.orange .widgetDiscountShowButton:hover {
    color: #e46719!important
}

.orange .discountButton {
    border-color: #ffcc9d;
    color: #e46719
}

.orange .discountButton:hover {
    background-color: #fef5eb
}

.orange .widgetTextMore .widgetTextMoreIcon {
    background-color: #ffcc9d
}

.orange .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #e46719
}

.orange .imgMedia {
    background-color: #ffcc9d
}

.orange .goTop {
    color: #e46719
}

.orange .innerHTML table {
    border-bottom: 1px solid #ffcc9d
}

.orange .innerHTML table tr:has(>th) {
    background-color: #ffcc9d
}

.orange .innerHTML table th {
    background-color: #ffcc9d;
    color: #666
}

.yellow .nav {
    background-color: #fada60
}

.yellow .nav li:hover {
    background-color: #fffad5
}

.yellow .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.yellow .nav li.active a {
    color: #b56300
}

.yellow .nav a {
    color: #666
}

.yellow .nav a:hover {
    color: #b56300
}

.yellow .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#fada60)
}

.yellow .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#fada60)
}

.yellow .subTab li:hover a {
    color: #b56300
}

.yellow .subTab li .active {
    border-color: #fada60;
    box-shadow: 0 6px #fff,0 10px #fada60
}

.yellow .subTab li .active a {
    color: #b56300;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .yellow .subTab li a.active {
        border-bottom:4px solid #fada60!important
    }
}

.yellow .subTab li a.active {
    font-weight: 700;
    color: #b56300
}

.yellow .title {
    color: #b56300
}

.yellow .title:before {
    border-color: #dfdefc transparent transparent
}

.yellow .sectionTitle {
    color: #b56300
}

.yellow .sectionTitle:before {
    border-color: transparent transparent transparent #dfdefc
}

.yellow .notice {
    background-color: #f0eefa
}

.yellow .subTitle {
    color: #b56300!important
}

.yellow .tag {
    background-color: #dfdefc
}

.yellow .button {
    background-color: #fada60;
    color: #666
}

.yellow .button:hover {
    background-color: #b56300;
    color: #fff
}

.yellow .cardMedia,.yellow .commonWidget,.yellow .widgetBank,.yellow .widgetBasic,.yellow .widgetDiscount,.yellow .widgetImgText {
    background-color: #fafafa
}

.yellow .widgetImgTextTitle {
    color: #b56300;
    border-color: #fada60!important
}

.yellow .widgetImgTextMoreIcon {
    background-color: #fada60
}

.yellow .widgetBasicHr:before {
    background-color: #dfdefc
}

.yellow .widgetFaqTag {
    color: #b56300
}

.yellow .widgetDiscountTag {
    background-color: #fada60;
    color: #666
}

.yellow .widgetDiscountTag:after,.yellow .widgetDiscountTag:before {
    background-color: #fffad5
}

.yellow .widgetDiscountShowButton:hover {
    color: #b56300!important
}

.yellow .discountButton {
    border-color: #fada60;
    color: #b56300
}

.yellow .discountButton:hover {
    background-color: #fffad5
}

.yellow .widgetTextMore .widgetTextMoreIcon {
    background-color: #fada60
}

.yellow .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #b56300
}

.yellow .imgMedia {
    background-color: #fada60
}

.yellow .goTop {
    color: #b56300
}

.yellow .innerHTML table {
    border-bottom: 1px solid #fada60
}

.yellow .innerHTML table tr:has(>th) {
    background-color: #fada60
}

.yellow .innerHTML table th {
    background-color: #fada60;
    color: #666
}

.aquamarine .nav {
    background-color: #a2e2e3
}

.aquamarine .nav li:hover {
    background-color: #ecfbfb
}

.aquamarine .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.aquamarine .nav li.active a {
    color: #019ca6
}

.aquamarine .nav a {
    color: #666
}

.aquamarine .nav a:hover {
    color: #019ca6
}

.aquamarine .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#a2e2e3)
}

.aquamarine .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#a2e2e3)
}

.aquamarine .subTab li:hover a {
    color: #019ca6
}

.aquamarine .subTab li .active {
    border-color: #a2e2e3;
    box-shadow: 0 6px #fff,0 10px #a2e2e3
}

.aquamarine .subTab li .active a {
    color: #019ca6;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .aquamarine .subTab li a.active {
        border-bottom:4px solid #a2e2e3!important
    }
}

.aquamarine .subTab li a.active {
    font-weight: 700;
    color: #019ca6
}

.aquamarine .title {
    color: #019ca6
}

.aquamarine .title:before {
    border-color: #ffdee0 transparent transparent
}

.aquamarine .sectionTitle {
    color: #019ca6
}

.aquamarine .sectionTitle:before {
    border-color: transparent transparent transparent #ffdee0
}

.aquamarine .notice {
    background-color: #fcf3f4
}

.aquamarine .subTitle {
    color: #019ca6!important
}

.aquamarine .tag {
    background-color: #ffdee0
}

.aquamarine .button {
    background-color: #a2e2e3;
    color: #666
}

.aquamarine .button:hover {
    background-color: #019ca6;
    color: #fff
}

.aquamarine .cardMedia,.aquamarine .commonWidget,.aquamarine .widgetBank,.aquamarine .widgetBasic,.aquamarine .widgetDiscount,.aquamarine .widgetImgText {
    background-color: #fafafa
}

.aquamarine .widgetImgTextTitle {
    color: #019ca6;
    border-color: #a2e2e3!important
}

.aquamarine .widgetImgTextMoreIcon {
    background-color: #a2e2e3
}

.aquamarine .widgetBasicHr:before {
    background-color: #ffdee0
}

.aquamarine .widgetFaqTag {
    color: #019ca6
}

.aquamarine .widgetDiscountTag {
    background-color: #a2e2e3;
    color: #666
}

.aquamarine .widgetDiscountTag:after,.aquamarine .widgetDiscountTag:before {
    background-color: #ecfbfb
}

.aquamarine .widgetDiscountShowButton:hover {
    color: #019ca6!important
}

.aquamarine .discountButton {
    border-color: #a2e2e3;
    color: #019ca6
}

.aquamarine .discountButton:hover {
    background-color: #ecfbfb
}

.aquamarine .widgetTextMore .widgetTextMoreIcon {
    background-color: #a2e2e3
}

.aquamarine .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #019ca6
}

.aquamarine .imgMedia {
    background-color: #a2e2e3
}

.aquamarine .goTop {
    color: #019ca6
}

.aquamarine .innerHTML table {
    border-bottom: 1px solid #a2e2e3
}

.aquamarine .innerHTML table tr:has(>th) {
    background-color: #a2e2e3
}

.aquamarine .innerHTML table th {
    background-color: #a2e2e3;
    color: #666
}

.pink .nav {
    background-color: #fbd0e0
}

.pink .nav li:hover {
    background-color: #fcf4f7
}

.pink .nav li.active {
    background-color: #fff;
    font-weight: 700
}

.pink .nav li.active a {
    color: #c10c4f
}

.pink .nav a {
    color: #666
}

.pink .nav a:hover {
    color: #c10c4f
}

.pink .nav .tabPrev {
    background-image: linear-gradient(270deg,rgba(238,51,119,0),#fbd0e0)
}

.pink .nav .tabNext {
    background-image: linear-gradient(90deg,rgba(238,51,119,0),#fbd0e0)
}

.pink .subTab li:hover a {
    color: #c10c4f
}

.pink .subTab li .active {
    border-color: #fbd0e0;
    box-shadow: 0 6px #fff,0 10px #fbd0e0
}

.pink .subTab li .active a {
    color: #c10c4f;
    font-weight: 700
}

@media only screen and (min-width: 1024px) {
    .pink .subTab li a.active {
        border-bottom:4px solid #fbd0e0!important
    }
}

.pink .subTab li a.active {
    font-weight: 700;
    color: #c10c4f
}

.pink .title {
    color: #c10c4f
}

.pink .title:before {
    border-color: #c7e7ff transparent transparent
}

.pink .sectionTitle {
    color: #c10c4f
}

.pink .sectionTitle:before {
    border-color: transparent transparent transparent #c7e7ff
}

.pink .notice {
    background-color: #f0f9ff
}

.pink .subTitle {
    color: #c10c4f!important
}

.pink .tag {
    background-color: #c7e7ff
}

.pink .button {
    background-color: #fbd0e0;
    color: #666
}

.pink .button:hover {
    background-color: #c10c4f;
    color: #fff
}

.pink .cardMedia,.pink .commonWidget,.pink .widgetBank,.pink .widgetBasic,.pink .widgetDiscount,.pink .widgetImgText {
    background-color: #fafafa
}

.pink .widgetImgTextTitle {
    color: #c10c4f;
    border-color: #fbd0e0!important
}

.pink .widgetImgTextMoreIcon {
    background-color: #fbd0e0
}

.pink .widgetBasicHr:before {
    background-color: #c7e7ff
}

.pink .widgetFaqTag {
    color: #c10c4f
}

.pink .widgetDiscountTag {
    background-color: #fbd0e0;
    color: #666
}

.pink .widgetDiscountTag:after,.pink .widgetDiscountTag:before {
    background-color: #fcf4f7
}

.pink .widgetDiscountShowButton:hover {
    color: #c10c4f!important
}

.pink .discountButton {
    border-color: #fbd0e0;
    color: #c10c4f
}

.pink .discountButton:hover {
    background-color: #fcf4f7
}

.pink .widgetTextMore .widgetTextMoreIcon {
    background-color: #fbd0e0
}

.pink .widgetTextMore:hover .widgetTextMoreIcon {
    background-color: #c10c4f
}

.pink .imgMedia {
    background-color: #fbd0e0
}

.pink .goTop {
    color: #c10c4f
}

.pink .innerHTML table {
    border-bottom: 1px solid #fbd0e0
}

.pink .innerHTML table tr:has(>th) {
    background-color: #fbd0e0
}

.pink .innerHTML table th {
    background-color: #fbd0e0;
    color: #666
}



.SubTitle_subTitles {
    list-style: none;
    display: none;
    grid-area: subTitle;
    margin: 10px 0 0;
    padding: 0 20px 0 0;
    overflow: hidden;
    width: 100%
}

.SubTitle_subTitles .SubTitle_subTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    color: #666
}

.SubTitle_subTitles .SubTitle_subTitle:nth-child(2) {
    margin: 5px 0
}

.SubTitle_subTitles .SubTitle_subTitle:before {
    content: "•";
    margin-right: 7px;
    vertical-align: top
}

@media only screen and (min-width: 577px) {
    .SubTitle_subTitles {
        display:block
    }
}



.Media_img,.Media_player {
    width: 100%
}

.Media_img {
    position: relative;
    z-index: 10
}

.Price_priceBlock {
    text-align: right;
    margin-top: 10px;
    grid-area: price
}

.Price_priceBlock .Price_originPrice {
    display: none;
    text-decoration: line-through;
    color: #999;
    margin-right: 10px
}

@media only screen and (min-width: 577px) {
    .Price_priceBlock .Price_originPrice {
        display:inline
    }
}

.Price_priceBlock .Price_price {
    font-size: 18px;
    font-weight: 700;
    color: #ff8b00;
    margin-right: 5px
}

@media only screen and (min-width: 1024px) {
    .Price_priceBlock .Price_price {
        font-size:24px
    }
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}