@charset "UTF-8";

.menuHamberger .wrapMenuHamberger a .btnRegistCardSmallMenu, .subMenuPromotionDetail ul li, .subMenuPromotionDetail ul li a, header .wrapHeader .wrapHeaderBox a .btnRegisCard, header .wrapHeader .wrapHeaderBox ul li a {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #828282
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h1, .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h1, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h2 {
    font-family: "Krungsri Simple";
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 59px;
    color: #25447e
}

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h1, .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h1, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h2 {
        font-size: 24px;
        line-height: 39px
    }
}

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h1, .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h1, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h2 {
        font-size: 22px;
        line-height: 160%
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h1 {
    font-family: "Krungsri Simple";
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 59px;
    color: #fff
}

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h1 {
        font-size: 30px;
        line-height: 49px
    }
}

@media (max-width:767px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h1 {
        font-size: 22px;
        line-height: 39px
    }
}

.bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h3 {
    font-family: "Krungsri Simple";
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 36px;
    color: #828282
}

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h3 {
        font-size: 18px;
        line-height: 29px
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail, .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner, .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll, .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a .btnRigistPromotionDetial, .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a .btnReadmoreBannerPromo, .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a .btnLearnMoreBanner, .bannerVdoCareSection .wrapBannerVdoSmallText a .btnLearnMoreVdoSmall, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm, .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm, .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a .btnLearnMore, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a .btnRegisterCard, .creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail, .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail, .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard, .faqSection .wrapBtnViewMoreQuestion a .btnViewMoreQuestion, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnSubmitButtonFilter, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup .btnPopup, .promotionDetailConditionSection .showMoreContentPromotion .btnShowContentPromo, .promotionDetailConditionSection .wrapTopicPromotionDetailBox a .btnPromoDetail, .promotionDetailContentSection .wrapTopicPromotionDetailBox a .btnPromoDetail, .promotionDetailTagSection .aLinkTagBtn .btnTagView, .stickyTopicCardDetail ul li, .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a .btnSubStart, .subscribeSection .wrapSubscribe form .btnSubscriber {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #fff
}

.cardPromotionSection .wrapCardPromotionSection h3, .interestSection h3 {
    font-family: "Krungsri Simple";
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 42px;
    color: #25447e
}

@media (max-width:992px) {
    .cardPromotionSection .wrapCardPromotionSection h3, .interestSection h3 {
        font-size: 18px;
        line-height: 29px
    }
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #fff
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h3, .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox h3, .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText h4 {
    font-family: "Krungsri Simple";
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 29px;
    color: #fff
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h4 {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 700;
    line-height: 46px;
    color: #fff
}

.feedbackUSerSliderSection h2, .highlightHomeSection h2, .lifestyleHomeSection .wraplifestyleTitle h2, .partnerSection h3, .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle h2 {
    font-family: "Krungsri Simple";
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 42px;
    color: #25447e
}

@media (max-width:992px) {
    .feedbackUSerSliderSection h2, .highlightHomeSection h2, .lifestyleHomeSection .wraplifestyleTitle h2, .partnerSection h3, .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle h2 {
        font-size: 22px;
        line-height: 36px
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox h4, .lifestyleHomeSection .wraplifestyleTitle a, .lifestyleHomeSection .wraplifestyleTitleMobile a, .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle a .btnViewAllPromotion, .promotionHomeSection .wrapPromotionHomeBoxSlider .promoHomeLink .btnLinkPromo, .promotionHomeSection .wrapPromotionHomeBoxTablet .promoHomeLink .btnLinkPromo {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 700;
    line-height: 31px;
    color: #25447e
}

.promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #828282
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox h3, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h4, .promotionDetailContentSection .wrapTopicPromotionDetailBox h4, .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeText h3, .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeText h3, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeText h3 {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 500;
    line-height: 31px;
    color: #25447e;
    --line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
    margin-right: -100px;
    width: 100%;
}

.bannerCardDetail .wrapBannerCardDetail p, .headerNoti h3, .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox span, .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p, .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p, .searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll a, .searchResultSection .wrapBreadcrumbSearch p, .searchSection .wrapSearchSection .wrapBreadCrumbSearch p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #828282;
    --line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
    margin-right: -100px;
    width: 100%;
}

.bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText h2 {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 700;
    line-height: 31px;
    color: #fff
}

.bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #fff
}

.bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText a {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #12aadf
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider h2, .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox .wrapTextCardHighlight h3 {
    font-family: "Krungsri Condensed";
    font-size: 24px;
    font-weight: 500;
    line-height: 42px;
    color: #fff
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider h2, .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox .wrapTextCardHighlight h3 {
        font-size: 16px;
        line-height: 28px
    }
}

.highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox .wrapTextCardHighlight p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #fff
}

@media (max-width:992px) {
    .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox .wrapTextCardHighlight p {
        font-size: 12px;
        line-height: 21px
    }
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText .tagLifestyle, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .tagLifestyle {
    font-family: "Krungsri Condensed";
    font-size: 12px;
    font-weight: 700;
    line-height: 200%;
    color: #fff
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText h3 {
    font-family: "Krungsri Condensed";
    font-size: 24px;
    font-weight: 500;
    line-height: 42px;
    color: #25447e
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText h3 {
        font-size: 16px;
        line-height: 22px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailConditionSection .wrapTopicPromotionDetailBox p, .promotionDetailConditionSection .wrapTopicPromotionDetailBox ul li, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul li {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #828282
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailConditionSection .wrapTopicPromotionDetailBox p, .promotionDetailConditionSection .wrapTopicPromotionDetailBox ul li, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul li {
        font-size: 14px;
        line-height: 20px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox p, .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText p, .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox p, .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText p, .faqSection .faqSectionSection .faqSectionBox .faqSectionText p, .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ol li, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ul li, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h4, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .pLinkContent, .promotionDetailContentSection .wrapTopicPromotionDetailBox .pLinkContent, .searchResultSection .searchResultAll .wrapSearchResultBox p, .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul li {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #828282
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox p, .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText p, .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox p, .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText p, .faqSection .faqSectionSection .faqSectionBox .faqSectionText p, .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ol li, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox p, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ul li, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h4, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .pLinkContent, .promotionDetailContentSection .wrapTopicPromotionDetailBox .pLinkContent, .searchResultSection .searchResultAll .wrapSearchResultBox p, .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul li {
        font-size: 14px;
        line-height: 20px
    }
}

.lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #25447e
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p {
        font-size: 12px;
        line-height: 20px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard h3, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText h3 {
    font-family: "Krungsri Condensed";
    font-size: 20px;
    font-weight: 500;
    line-height: 35px;
    color: #fff
}

@media (max-width:992px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard h3, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText h3 {
        font-size: 16px;
        line-height: 28px
    }
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard h3, .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText h3 {
        font-size: 14px;
        line-height: 20px
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h3 {
    font-family: "Krungsri Simple";
    font-size: 20px;
    font-weight: 500;
    line-height: 35px;
    color: #25447e
}

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h3 {
        font-size: 18px;
        line-height: 29px
    }
}

.bannerVdoCareSection .wrapBannerVdoSmallText h2 {
    font-family: "Krungsri Simple";
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 28px;
    color: #fff
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText h2 {
        font-size: 24px;
        line-height: 39px
    }
}

@media (max-width:767px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText h2 {
        font-size: 22px;
        line-height: 39px
    }
}

.bannerVdoCareSection .wrapBannerVdoSmallText p {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 500;
    line-height: 31px;
    color: #fff
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText p {
        font-size: 14px;
        line-height: 24px
    }
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox a, .feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapSliderUserData h4 {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #828282
}

.feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapTextCommentUser p {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #828282
}

.subscribeSection .wrapSubscribe h3 {
    font-family: "Krungsri Condensed";
    font-size: 24px;
    font-weight: 500;
    line-height: 42px;
    color: #fff
}

@media (max-width:992px) {
    .subscribeSection .wrapSubscribe h3 {
        font-size: 22px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h6, .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText a, .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox a, .menuHamberger .wrapMenuHamberger ul li a, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr th, .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox h5, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox, .searchResultSection .paginationSearch ul li, .searchResultSection .searchResultAll .wrapSearchResultBox a, .searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar .searchField, .subscribeSection .wrapSubscribe form .inputEmail {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #25447e
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3, .subFooterSection a .wrapSubFooterBox h3 {
    font-family: "Krungsri Condensed";
    font-size: 26px;
    font-weight: 500;
    line-height: 45px;
    color: #fff
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3, .subFooterSection a .wrapSubFooterBox h3 {
        font-size: 24px;
        line-height: 42px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3, .subFooterSection a .wrapSubFooterBox h3 {
        font-size: 22px;
        line-height: 42px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a .wrapSidePromoBox p, .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner p, .subFooterSection a .wrapSubFooterBox p {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #fff
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a .wrapSidePromoBox p, .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner p, .subFooterSection a .wrapSubFooterBox p {
        font-size: 14px;
        line-height: 24px
    }
}

footer .wrapFooterBottom .footerBottomBox h3 {
    font-family: "Krungsri Simple";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 200%;
    color: #fff
}

footer .wrapFooterBottom .footerBottomBox ul li a, footer .wrapLastFooter p {
    font-family: "Krungsri Condensed";
    font-size: 12px;
    font-weight: 400;
    line-height: 200%;
    color: #fff
}

.bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo h1, .searchSection .wrapSearchSection .wrapTextSearchBar h1 {
    font-family: "Krungsri Simple";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 50px;
    color: #fff
}

@media (max-width:767px) {
    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo h1, .searchSection .wrapSearchSection .wrapTextSearchBar h1 {
        font-size: 22px;
        line-height: 150%
    }
}

.filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .titleTopicFilter h3, .promotionContentSection .promotionContentArticle .promotionContentFilter .titleTopicFilter h3 {
    font-family: "Krungsri Simple";
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 29px;
    color: #25447e
}

.filterPromotionContentSection .btnFilterPromotionTablet, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox h4, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection h4, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .anotherFilterBox h4, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection h4 {
    font-family: "Krungsri Simple";
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 26px;
    color: #25447e
}

.bannerCardAllFormSection .breadcrumbSection p, .bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox h4, .bannerPromotionDetailSection .breadcrumbSection p, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .current, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .list, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm .current, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm .list, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .current, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .list, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm .current, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm .list, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p, .cardSliderSection .breadcrumbSection p, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard p, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul li, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnResetButtonFilter, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .btnResetFilter, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter p, .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .titleTopicFilter .btnResetFilter, .promotionContentSection .breadcumbSection p, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .anotherFilterBox .btnResetButtonFilter, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter p, .promotionContentSection .promotionContentArticle .promotionContentFilter .titleTopicFilter .btnResetFilter {
    font-family: "Krungsri Condensed";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #505050;
/*    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;*/
}

.promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox .tagPromotion {
    font-family: "Krungsri Condensed";
    font-size: 12px;
    font-weight: 700;
    line-height: 200%;
    color: #fff
}

.promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox h2 {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #25447e;
    --line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
    margin-right: -100px;
    width: 100%;
}

.promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox p {
    font-family: Sarabun;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #828282;
    --line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
    margin-right: -100px;
    width: 100%;
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h1 {
    font-family: "Krungsri Simple";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 150%;
    color: #25447e
}

@media (max-width:992px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h1 {
        font-size: 22px
    }
}

.promotionDetailTagSection .wrapTagArticle h6 {
    font-family: "Krungsri Simple";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 32px;
    color: #505050
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex a {
    font-family: "Krungsri Simple";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 32px;
    color: #505050
}

.creditDetailContent2Section .wrapCreditDetailContentArticle h3, .promotionDetailRecomendSection h3, .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapTopicRuleCardDetail h2 {
    font-family: "Krungsri Simple";
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 200%;
    color: #25447e
}

.subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri h2 {
    font-family: "Krungsri Simple";
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 40px;
    color: #25447e
}

@media (max-width:767px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri h2 {
        font-size: 22px
    }
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h4, .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h5, .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft h4 {
    font-family: "Krungsri Simple";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 23px;
    color: #fff
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h4, .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h5, .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft h4 {
    font-family: "Krungsri Simple";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 26px;
    color: #fff
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent p {
    font-family: "Krungsri Simple";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 23px;
    color: #fff
}

.cardSliderSection .wrapSliderCard h1, .cardWhyHaveSection h2 {
    font-family: "Krungsri Simple";
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 52px;
    color: #25447e
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard h1, .cardWhyHaveSection h2 {
        font-size: 22px;
        line-height: 36px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend h4 {
    font-family: "Krungsri Simple";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 23px;
    color: #fff
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail h6 {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #25447e
}

.cardDetailRegisterSection .wrapFormCardDetailSection p, .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox p {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    color: #fff
}

.bannerCardAllFormSection h1, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h4, .cardDetailPromotionRegisterSection h2, .cardDetailRegisterSection h2, .creditDetailContentSection .wrapCreditDetailContentSection h3, .faqSection h3 {
    font-family: "Krungsri Simple";
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 140%;
    color: #fff
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .h3TopicCard, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent h3, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent h3 {
    font-family: "Krungsri Simple";
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 29px;
    color: #25447e
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBox h3 {
    font-family: "Krungsri Simple";
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 35px;
    color: #828282
}

@media (max-width:1025px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBox h3 {
        font-size: 18px
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBox h3 {
        font-size: 14px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox p, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox ul li, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox p, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p {
    font-family: "Krungsri Condensed";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 28px;
    color: #505050
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox p, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox ul li, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox p, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p {
        font-size: 14px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .h3TopicCard, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId, .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent h3, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId, .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent h3 {
    font-family: "Krungsri Simple";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 200%;
    color: #25447e
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox h5 {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 700;
    line-height: 31px;
    color: #505050
}

.searchResultSection .searchResultAll .wrapSearchResultBox h3 {
    font-family: "Krungsri Condensed";
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 35px;
    color: #000
}

@media (max-width:767px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox h3 {
        font-size: 22px
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection h3, .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText h4, .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h3 {
    font-family: "Krungsri Simple";
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 48px;
    color: #25447e
}

@media (max-width:1025px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection h3, .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText h4, .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h3 {
        font-size: 18px;
        line-height: 31px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h4 {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: Bold;
    line-height: 31px;
    color: #505050
}

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h4 {
        font-size: 16px;
        line-height: 28px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox h3 {
    font-family: "Krungsri Simple";
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
    color: #25447e
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox h3 {
        font-size: 22px
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner h3 {
    font-family: "Krungsri Condensed";
    font-size: 24px;
    font-weight: 700;
    line-height: 200%;
    color: #25447e
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner h3 {
        font-size: 18px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionText h4, .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic h4 {
    font-family: "Krungsri Condensed";
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 140%;
    color: #25447e
}

@media (max-width:992px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionText h4, .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic h4 {
        font-size: 30px
    }
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionText h4, .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic h4 {
        font-size: 22px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic p {
    font-family: "Krungsri Condensed";
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: #25447e
}

@media (max-width:992px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic p {
        font-size: 16px
    }
}

@keyframes arrowSwipe {
    0% {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0)
    }

    50% {
        transform: translateX(5px);
        -ms-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -webkit-transform: translateX(5px);
        -o-transform: translateX(5px)
    }

    100% {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0)
    }
}

@keyframes arrowSwipeDown {
    0% {
        transform: translateY(2px);
        -ms-transform: translateY(2px);
        -moz-transform: translateY(2px);
        -webkit-transform: translateY(2px);
        -o-transform: translateY(2px)
    }

    50% {
        transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        -o-transform: translateY(-2px)
    }

    100% {
        transform: translateY(2px);
        -ms-transform: translateY(2px);
        -moz-transform: translateY(2px);
        -webkit-transform: translateY(2px);
        -o-transform: translateY(2px)
    }
}

a, button, input {
    outline: 0;
    box-shadow: none
}

a, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    text-decoration: none
}

form {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0
}

.modal {
    display: none;
    position: fixed;
    z-index: 1300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0,0,0,.3);
    justify-content: center;
    align-items: center;
    padding: 0 16px
}

@media (min-width:767px) {
    .modal {
        padding: 0
    }
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 100%;
    max-height: 70vh;
    border-radius: 20px;
    animation-name: animatetop;
    animation-duration: .4s;
    top: 50%;
    transform: translateY(-50%)
}

@media (min-width:767px) {
    .modal-content {
        width: 80%
    }
}

.modal-content .content {
    padding: 58px 12px 28px;
    overflow-y: auto
}

@media (min-width:767px) {
    .modal-content .content {
        padding: 77px 22px 40px
    }
}

.close {
    position: absolute;
    top: 20px;
    right: 20px
}

    .close:focus, .close:hover {
        color: #000;
        text-decoration: none;
        cursor: pointer
    }

@keyframes animatetop {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle {
    width: 100%;
    height: auto
}

    .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox {
        display: block;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding-left: 30px;
        margin-bottom: 20px
    }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #828282;
            background-color: #f4f4f4
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark {
            background-color: #f4f4f4
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark:after, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark:after {
            content: "";
            position: absolute;
            display: none
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark:after, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark:after {
            display: block
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark:after, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .checkmark:after {
            left: 2px;
            top: 2px;
            width: 14px;
            height: 14px;
            background-color: #25447e
        }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter {
            display: flex;
            align-items: center;
            gap: 16px;
            grid-gap: 16px
        }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter .wrapDetailFilterIcon, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter .wrapDetailFilterIcon {
                flex: 0 0 30px;
                display: flex;
                justify-content: center
            }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter img, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox .wrapDetailFilter img {
                max-width: 100%;
                filter: opacity(.6);
                margin-bottom: 4px
            }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox:hover .inputCheckFilter ~ .checkmark, .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .wrapPromoFilterArticle .wrapLabelFilterCheckbox:hover .inputCheckFilter ~ .checkmark {
            background-color: #d0d0d0
        }

.bannerCardAllFormSection .breadcrumbSection, .bannerPromotionDetailSection .breadcrumbSection, .cardSliderSection .breadcrumbSection, .promotionContentSection .breadcumbSection {
    width: 100%;
    height: auto;
    padding: 48px 0
}

@media (max-width:1281px) {
    .bannerCardAllFormSection .breadcrumbSection, .bannerPromotionDetailSection .breadcrumbSection, .cardSliderSection .breadcrumbSection, .promotionContentSection .breadcumbSection {
        padding: 38px 0 30px
    }
}

@media (max-width:992px) {
    .bannerCardAllFormSection .breadcrumbSection, .bannerPromotionDetailSection .breadcrumbSection, .cardSliderSection .breadcrumbSection, .promotionContentSection .breadcumbSection {
        padding: 42px 0 42px
    }
}

@media (max-width:767px) {
    .bannerCardAllFormSection .breadcrumbSection, .bannerPromotionDetailSection .breadcrumbSection, .cardSliderSection .breadcrumbSection, .promotionContentSection .breadcumbSection {
        padding: 18px 0 24px
    }
}

.bannerCardAllFormSection .breadcrumbSection p a, .bannerPromotionDetailSection .breadcrumbSection p a, .cardSliderSection .breadcrumbSection p a, .promotionContentSection .breadcumbSection p a {
    color: #505050
}

body {
    padding: 0;
    margin: 0;
    border: 0;
    min-height: 100vh;
    min-width: 100%;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.wrapperPage {
    width: 1160px;
    margin: 0 auto
}

@media (max-width:1281px) {
    .wrapperPage {
        width: 1100px
    }
}

@media (max-width:1241px) {
    .wrapperPage {
        width: calc(100% - 180px)
    }
}

@media (max-width:992px) {
    .wrapperPage {
        width: calc(100% - 70px)
    }
}

@media (max-width:767px) {
    .wrapperPage {
        width: calc(100% - 44px)
    }
}

.wrapperPageRMMobile {
    width: 1160px;
    margin: 0 auto
}

@media (max-width:1281px) {
    .wrapperPageRMMobile {
        width: calc(100% - 180px)
    }
}

@media (max-width:1241px) {
    .wrapperPageRMMobile {
        width: calc(100% - 180px)
    }
}

@media (max-width:992px) {
    .wrapperPageRMMobile {
        width: calc(100% - 70px)
    }
}

@media (max-width:767px) {
    .wrapperPageRMMobile {
        width: 100%
    }
}

.wrapperPageRMMobileB {
    width: 1160px;
    margin: 0 auto
}

@media (max-width:1281px) {
    .wrapperPageRMMobileB {
        width: 1100px
    }
}

@media (max-width:1241px) {
    .wrapperPageRMMobileB {
        width: calc(100% - 180px)
    }
}

@media (max-width:992px) {
    .wrapperPageRMMobileB {
        width: calc(100% - 70px)
    }
}

@media (max-width:767px) {
    .wrapperPageRMMobileB {
        width: 100%
    }
}

.desktopOnly {
    display: block
}

@media (max-width:992px) {
    .desktopOnly {
        display: none
    }
}

.tabletOnly {
    display: none
}

@media (max-width:992px) {
    .tabletOnly {
        display: block
    }
}

@media (max-width:767px) {
    .tabletOnly {
        display: none
    }
}

.mobileOnly {
    display: none
}

@media (max-width:767px) {
    .mobileOnly {
        display: block
    }
}

.desktopTablet {
    display: block
}

@media (max-width:767px) {
    .desktopTablet {
        display: none
    }
}

.tabletMobile {
    display: none
}

@media (max-width:992px) {
    .tabletMobile {
        display: block
    }
}

.desktopMobile {
    display: block
}

@media (max-width:992px) {
    .desktopMobile {
        display: none
    }
}

@media (max-width:767px) {
    .desktopMobile {
        display: block
    }
}

.hideme, .hideme_b, .hideme_c {
    opacity: 0;
    transform: translateY(30px);
    -ms-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -o-transform: translateY(30px)
}

.hideme_active {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

header {
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

    header .wrapHeader {
        width: 100%;
        height: 80px;
        padding: 0 60px;
        display: grid;
        grid-template-columns: 120px 1fr
    }

@media (max-width:1191px) {
    header .wrapHeader {
        padding: 0 20px;
        grid-template-columns: 80px 1fr
    }
}

header .wrapHeader .wrapHeaderBox {
    width: 100%;
    height: 100%
}

    header .wrapHeader .wrapHeaderBox ul {
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px
    }

@media (max-width:1080px) {
    header .wrapHeader .wrapHeaderBox ul {
        display: none
    }
}

header .wrapHeader .wrapHeaderBox ul li {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0 15px;
    position: relative
}

    header .wrapHeader .wrapHeaderBox ul li a {
        transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out
    }

        header .wrapHeader .wrapHeaderBox ul li a:hover {
            color: #25447e;
            transition: all .1s ease-in-out;
            -ms-transition: all .1s ease-in-out;
            -moz-transition: all .1s ease-in-out;
            -webkit-transition: all .1s ease-in-out;
            -o-transition: all .1s ease-in-out
        }

header .wrapHeader .wrapHeaderBox ul .liActive::after {
    content: "";
    width: 100%;
    height: 5px;
    background-color: #25447e;
    position: absolute;
    bottom: 0;
    left: 0
}

header .wrapHeader .wrapHeaderBox a {
    width: fit-content
}

    header .wrapHeader .wrapHeaderBox a .btnRegisCard {
        width: 110px;
        height: 35px;
        border: 1px solid #25447e;
        border-radius: 50px;
        background: 0 0;
        color: #25447e;
        transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -webkit-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out
    }

@media (max-width:992px) {
    header .wrapHeader .wrapHeaderBox a .btnRegisCard {
        display: none
    }
}

header .wrapHeader .wrapHeaderBox a .btnRegisCard:hover {
    background: #25447e;
    color: #fff;
    transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out
}

header .wrapHeader .wrapHeaderBox a .btnSearch {
    background: 0 0;
    border: none
}

header .wrapHeader .wrapHeaderBox .aSpaceSearch {
    margin-left: 30px
}

header .wrapHeader .wrapHeaderBox .wrapHamberger {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 100%;
    background-color: rgba(0,0,0,.05);
    margin-left: 30px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

@media (max-width:1025px) {
    header .wrapHeader .wrapHeaderBox .wrapHamberger {
        display: flex
    }
}

header .wrapHeader .wrapHeaderBox .wrapHamberger .hamberger {
    width: 15px;
    height: 12px;
    position: relative
}

    header .wrapHeader .wrapHeaderBox .wrapHamberger .hamberger .bar {
        width: 100%;
        height: 2px;
        background-color: #7f7f7f;
        position: absolute
    }

        header .wrapHeader .wrapHeaderBox .wrapHamberger .hamberger .bar:nth-child(1) {
            top: 0;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

        header .wrapHeader .wrapHeaderBox .wrapHamberger .hamberger .bar:nth-child(2) {
            top: 5px;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

        header .wrapHeader .wrapHeaderBox .wrapHamberger .hamberger .bar:nth-child(3) {
            top: 10px;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

header .wrapHeader .wrapHeaderBox .wrapHamberger .hambergerActive .bar:nth-child(1) {
    top: 5px;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

header .wrapHeader .wrapHeaderBox .wrapHamberger .hambergerActive .bar:nth-child(2) {
    opacity: 0;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

header .wrapHeader .wrapHeaderBox .wrapHamberger .hambergerActive .bar:nth-child(3) {
    top: 5px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

header .wrapHeader .wrapHeaderLogo {
    display: flex;
    justify-content: center;
    align-items: center
}

    header .wrapHeader .wrapHeaderLogo img {
        width: 120px;
        height: auto
    }

@media (max-width:1191px) {
    header .wrapHeader .wrapHeaderLogo img {
        width: 80px
    }
}

header .wrapHeader .wrapHeaderText {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.headerScroll {
    background-color: #fff;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.headerWhite {
    background-color: #fff
}

.spaceHeaderWhite {
    padding-top: 80px
}

.bannerSection {
    width: 100%;
    height: 48vw;
    overflow: hidden
}

@media (max-width:992px) {
    .bannerSection {
        height: 56vw;
        min-height: 570px
    }
}

.bannerSection .wrapBannerSlider {
    width: 100%;
    height: auto;
    margin-bottom: 0
}

    .bannerSection .wrapBannerSlider .bannerSliderBox {
        width: 100%;
        height: 48vw;
        position: relative
    }

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox {
        height: 56vw;
        min-height: 570px
    }
}

.bannerSection .wrapBannerSlider .bannerSliderBox .imgBannerSlider {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .imgBannerSlider {
        background-position: top;
        background-size: cover
    }
}

.bannerSection .wrapBannerSlider .bannerSliderBox .bannerText {
    height: auto;
    min-height: 100px;
    position: absolute;
    top: 50%;
    right: 8vw;
    z-index: 2;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%)
}

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText {
        right: 50%;
        top: 70px;
        transform: translateX(50%);
        -ms-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -o-transform: translateX(50%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }
}

@media (max-width:767px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText {
        width: 100%
    }
}

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText h3 {
        text-align: center
    }
}

.bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a {
    width: fit-content;
    height: auto;
    display: block;
    margin-top: 30px
}

@media (max-width:992px) {
    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a {
        margin-top: 16px
    }
}

.bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a .btnLearnMoreBanner {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a .btnLearnMoreBanner img {
        margin-left: 5px
    }

    .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a .btnLearnMoreBanner:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .bannerSection .wrapBannerSlider .bannerSliderBox .bannerText a .btnLearnMoreBanner:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.bannerSection .wrapBannerSlider .bannerSliderBox .sliderProgress {
    width: 100%;
    height: 5px;
    background: 0 0;
    position: absolute;
    bottom: 0;
    left: 0
}

    .bannerSection .wrapBannerSlider .bannerSliderBox .sliderProgress .progress {
        width: 0%;
        height: 5px;
        background-image: linear-gradient(to right,#003e7b,#44c7f4)
    }

.bannerSection .wrapBannerSlider .slick-dots {
    bottom: 30px
}

    .bannerSection .wrapBannerSlider .slick-dots li {
        width: 10px;
        height: 10px
    }

        .bannerSection .wrapBannerSlider .slick-dots li button {
            padding: 0
        }

            .bannerSection .wrapBannerSlider .slick-dots li button:before {
                content: "";
                width: 10px;
                height: 10px;
                background-color: #fff;
                border: none;
                border-radius: 100%;
                opacity: 1
            }

    .bannerSection .wrapBannerSlider .slick-dots .slick-active button:before {
        background-color: #25447e
    }

.interestSection {
    width: 100%;
    height: auto;
    padding: 80px 0 20px;
    background-color: #f4f4f4;
    overflow: hidden
}

@media (max-width:992px) {
    .interestSection {
        padding: 36px 0 32px
    }
}

.interestSection h3 {
    text-align: center
}

.interestSection .slideCardInterest {
    width: 100%;
    height: auto
}

    .interestSection .slideCardInterest .wrapSliderCardInterest {
        width: 100%;
        height: auto;
        padding-top: 60px
    }

@media (max-width:767px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest {
        padding-top: 30px
    }
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox {
    width: 285px;
    height: 285px;
    border: none;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

@media (max-width:1241px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox {
        height: 220px
    }
}

@media (max-width:992px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox {
        height: 28vw
    }
}

@media (max-width:767px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox {
        height: 92vw;
        max-height: 270px
    }
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox .imgSliderCard {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox p {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 15px 20px
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox:hover .imgSliderCard {
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1)
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox::-webkit-scrollbar {
    display: none
}

.interestSection .slideCardInterest .wrapSliderCardInterest .sliderCardInterestBox:before {
    content: "";
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0
}

@media (max-width:992px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-list {
        margin: 0 -12px
    }
}

@media (max-width:767px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-list {
        max-width: 270px;
        max-height: 270px
    }
}

@media (max-width:767px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-list .slick-track {
        margin: 0 10px
    }
}

.interestSection .slideCardInterest .wrapSliderCardInterest .slick-list .slick-track .slick-slide {
    margin: 0 4px
}

@media (max-width:992px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-list .slick-track .slick-slide {
        margin: 0 12px
    }
}

@media (max-width:767px) {
    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-list .slick-track .slick-slide {
        max-width: 270px;
        max-height: 270px
    }
}

.interestSection .slideCardInterest .wrapSliderCardInterest .slick-dots {
    bottom: -30px
}

    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-dots li {
        width: 10px;
        height: 10px
    }

        .interestSection .slideCardInterest .wrapSliderCardInterest .slick-dots li button {
            padding: 0
        }

            .interestSection .slideCardInterest .wrapSliderCardInterest .slick-dots li button:before {
                content: "";
                width: 10px;
                height: 10px;
                background-color: #d0d0d0;
                border: none;
                border-radius: 100%;
                opacity: 1
            }

    .interestSection .slideCardInterest .wrapSliderCardInterest .slick-dots .slick-active button:before {
        background-color: #25447e
    }

@media (max-width:992px) {
    .interestSection .slick-list {
        margin: 0 -12px;
        overflow: visible
    }
}

@media (max-width:767px) {
    .interestSection .slick-list {
        margin: 0 -12px
    }
}

@media (max-width:992px) {
    .interestSection .slick-list .slick-track {
        position: relative;
        overflow: auto;
        margin: 0 -12px
    }
}

@media (max-width:767px) {
    .interestSection .slick-list .slick-track {
        margin: 0 -12px
    }
}

@media (max-width:992px) {
    .interestSection .slick-list .slick-track .slick-slide {
        margin: 0 12px
    }
}

@media (max-width:767px) {
    .interestSection .slick-list .slick-track .slick-slide {
        margin: 0 12px
    }
}

.creditDetailSectionSlider {
    padding-top: 48px;
    padding-bottom: 44px
}

@media (max-width:992px) {
    .creditDetailSectionSlider {
        padding-top: 40px;
        padding-bottom: 47px
    }
}

@media (max-width:767px) {
    .creditDetailSectionSlider {
        padding-top: 50px;
        padding-bottom: 42px
    }
}

.creditDetailSectionSlider h3 {
    text-align: left
}

@media (max-width:992px) {
    .creditDetailSectionSlider h3 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .creditDetailSectionSlider h3 {
        text-align: center
    }
}

.creditDetailSectionSlider .slideCardInterest .wrapSliderCardInterest {
    padding-top: 24px
}

@media (max-width:992px) {
    .creditDetailSectionSlider .slideCardInterest .wrapSliderCardInterest {
        padding-top: 27px
    }
}

.bannerCardSection {
    width: 100%;
    height: 440px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:992px) {
    .bannerCardSection {
        height: 310px
    }
}

@media (max-width:767px) {
    .bannerCardSection {
        height: auto;
        padding-top: 80px
    }
}

.bannerCardSection .wrapBannerCardSection {
    width: 100%;
    height: 287px;

    background-repeat: no-repeat;
    background-size: cover;
    /*background-color: #15326e*/
}

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection {
        height: 255px
    }
}

@media (max-width:767px) {
    .bannerCardSection .wrapBannerCardSection {
        grid-template-columns: 1fr;
        min-height: 452px;
        background-image: url(../images/object/bannerCardMobile.jpg);
        background-position: right;
        background-size: 100%;
        background-repeat: no-repeat;

        background-size: cover;

    }
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard {
    width: 100%;
    height: 287px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard {
        grid-template-columns: 1fr 1fr;
        height: 255px
    }
}

@media (max-width:767px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard {
        grid-template-columns: 1fr;
        min-height: 452px
    }
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative
}

    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h1 {
        color: #fff
    }

    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h3 {
        z-index: 2
    }

    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox .cardBannerImg {
        position: absolute;
        max-width: 470px;
        z-index: 1;
        animation: cardAnimateBig 5s linear infinite
    }

@media (max-width:1241px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox .cardBannerImg {
        max-width: 400px
    }
}

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox .cardBannerImg {
        top: -50px;
        max-width: 330px
    }
}

@media (max-width:767px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox .cardBannerImg {
        top: -100px
    }
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox .cardBannerImg img {
    width: 100%
}

@keyframes cardAnimateBig {
    0% {
        transform: rotate(-3deg) translateY(-10px);
        -ms-transform: rotate(-3deg) translateY(-10px);
        -moz-transform: rotate(-3deg) translateY(-10px);
        -webkit-transform: rotate(-3deg) translateY(-10px);
        -o-transform: rotate(-3deg) translateY(-10px)
    }

    50% {
        transform: rotate(3deg) translateY(10px);
        -ms-transform: rotate(3deg) translateY(10px);
        -moz-transform: rotate(3deg) translateY(10px);
        -webkit-transform: rotate(3deg) translateY(10px);
        -o-transform: rotate(3deg) translateY(10px)
    }

    100% {
        transform: rotate(-3deg) translateY(-10px);
        -ms-transform: rotate(-3deg) translateY(-10px);
        -moz-transform: rotate(-3deg) translateY(-10px);
        -webkit-transform: rotate(-3deg) translateY(-10px);
        -o-transform: rotate(-3deg) translateY(-10px)
    }
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox h4 {
    z-index: 2
}

.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a {
    width: fit-content;
    margin-top: 20px;
    z-index: 2
}

    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        display: flex
    }

        .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner img {
            margin-left: 5px
        }

        .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner img {
            max-width: 8px;
            height: auto;
            margin-top: -2px
        }

        .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner:hover {
            background-image: linear-gradient(to right,#44c7f4,#003e7b)
        }

            .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBox a .btnRegisCardBanner:hover img {
                animation: arrowSwipe 2s linear infinite
            }

@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBoxTabletHide {
        display: none
    }
}

/*.bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBoxR {
    background-image: url(../images/object/bannerCardDesktop.svg);
    background-repeat: no-repeat;
    background-size: 292px;
    background-position: right;
    justify-content: center;
    align-items: center
}*/

/*@media (max-width:992px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBoxR {
        background-image: url(../images/object/bannerCardTablet.svg);
        background-size: contain;
        background-position: left
    }
}*/

@media (max-width:767px) {
    .bannerCardSection .wrapBannerCardSection .wrapGridBannerCard .gridBannerCardBoxR {
        background: 0 0
    }
}

.promotionHomeSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding: 30px 0 82px;
    overflow: hidden
}

@media (max-width:992px) {
    .promotionHomeSection {
        padding: 30px 0 25px
    }
}

.promotionHomeSection .wrapHeaderPromotionHome {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 18px
}

@media (max-width:767px) {
    .promotionHomeSection .wrapHeaderPromotionHome {
        grid-template-columns: 1fr
    }
}

.promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle {
    width: 100%;
    height: auto
}

@media (max-width:767px) {
    .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle h2 {
        text-align: center
    }
}

.promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle a {
    width: fit-content;
    height: auto
}

@media (max-width:767px) {
    .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle a {
        display: none
    }
}

.promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle a .btnViewAllPromotion {
    border: none;
    background: 0 0
}

    .promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitle a .btnViewAllPromotion img:hover img {
        animation: arrowSwipe 2s linear infinite
    }

.promotionHomeSection .wrapHeaderPromotionHome .headerPromotionHomeTitleR {
    display: flex;
    justify-content: flex-end
}

.promotionHomeSection .wrapPromotionTagAll {
    width: 100%;
    height: auto;
    overflow: hidden;
    overflow-x: scroll
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionTagAll {
        padding: 0 10px;
        margin-bottom: 10px
    }
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionTagAll {
        overflow-x: scroll
    }
}

.promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag {
    width: fit-content;
    height: auto;
    padding: 18px 0 14px;
    display: flex;
    margin: -12px 0 0
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag {
        width: 1520px;
        padding-bottom: 20px;
        margin: -12px -15px;
        flex-wrap: wrap
    }
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag {
        width: 1180px
    }
}

.promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo {
    width: fit-content;
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 5px 7px;
    border-radius: 10px;
    cursor: pointer;
    margin: 6px 5px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo img {
        max-width: 18px;
        height: auto;
        margin-right: 7px;
        margin-top: -4px;
        filter: opacity(.5)
    }

    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo p {
        margin: 0
    }

    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo:hover {
        background-color: #25447e;
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

        .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo:hover p {
            color: #fff
        }

        .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromo:hover img {
            filter: invert(1) opacity(1)
        }

.promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromoActive {
    background-image: linear-gradient(to left,#44c7f4 30%,#003e7b)
}

    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromoActive p {
        color: #fff
    }

    .promotionHomeSection .wrapPromotionTagAll .wrapPromotionTag .tagPromoActive img {
        filter: invert(1) opacity(1)
    }

.promotionHomeSection .wrapPromotionTagAll::-webkit-scrollbar {
    height: 5px;
    top: -6px
}

.promotionHomeSection .wrapPromotionTagAll::-webkit-scrollbar-track {
    background-color: #f4f4f4;
    border-radius: 10px;
    overflow: hidden
}

.promotionHomeSection .wrapPromotionTagAll::-webkit-scrollbar-thumb {
    background-color: #bdbdbd;
    border-radius: 10px
}

.promotionHomeSection .wrapPromotionHomeBox {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 38px 35px;
    grid-gap: 38px 35px;
    margin-top: 20px
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBox {
        display: block;
        padding-bottom: 60px;
        display: none
    }
}

.promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,.1)
}

    .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg {
        width: 100%;
        height: auto;
        overflow: hidden
    }

        .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg img {
            width: 100%;
            height: auto;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out
        }

    .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeText {
        width: 100%;
        height: 180px;
        padding: 7px 12px 17px;
        background-color: #fff
    }

        .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p {
            margin-top: 16px
        }

    .promotionHomeSection .wrapPromotionHomeBox .promotionHomeBox:hover .promoHomeBoxImg img {
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

.promotionHomeSection .wrapPromotionHomeBox .slick-list {
    margin: 0 -17px
}

    .promotionHomeSection .wrapPromotionHomeBox .slick-list .slick-track .slick-slide {
        margin: 0 17px
    }

    .promotionHomeSection .wrapPromotionHomeBox .slick-list::-webkit-scrollbar {
        display: none
    }

.promotionHomeSection .wrapPromotionHomeBox .slick-dots {
    bottom: 0
}

    .promotionHomeSection .wrapPromotionHomeBox .slick-dots li {
        width: 10px;
        height: 10px
    }

        .promotionHomeSection .wrapPromotionHomeBox .slick-dots li button {
            padding: 0
        }

            .promotionHomeSection .wrapPromotionHomeBox .slick-dots li button:before {
                content: "";
                width: 10px;
                height: 10px;
                background-color: #d0d0d0;
                border: none;
                border-radius: 100%;
                opacity: 1
            }

    .promotionHomeSection .wrapPromotionHomeBox .slick-dots .slick-active button:before {
        background-color: #25447e
    }

.promotionHomeSection .wrapPromotionHomeBoxSlider, .promotionHomeSection .wrapPromotionHomeBoxTablet {
    display: none
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider, .promotionHomeSection .wrapPromotionHomeBoxTablet {
        display: block
    }
}

.promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 38px 35px;
    grid-gap: 38px 35px
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox {
        display: block
    }
}

.promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,.1)
}

    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg {
        width: 100%;
        height: auto
    }

        .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg img, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeBoxImg img {
            width: 100%;
            height: auto
        }

    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeText, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeText {
        width: 100%;
        height: 150px;
        padding: 7px 12px 17px;
        background-color: #fff
    }

        .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .promotionHomeBox .promoHomeText p {
            margin-top: 16px
        }

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list {
        margin: 0;
        overflow: visible
    }
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list {
        margin: 0 -20px;
        max-width: 265px;
        height: auto
    }
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list .slick-track, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list .slick-track {
        position: relative;
        overflow: auto;
        margin: 0 -12px
    }
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list .slick-track, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list .slick-track {
        margin: 0 10px
    }
}

@media (max-width:992px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list .slick-track .slick-slide, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list .slick-track .slick-slide {
        margin: 0 12px
    }
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-list .slick-track .slick-slide, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-list .slick-track .slick-slide {
        margin: 0 12px;
        max-width: 265px;
        height: auto
    }
}

.promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-dots, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-dots {
    bottom: 0
}

    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-dots li, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-dots li {
        width: 10px;
        height: 10px
    }

        .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-dots li button, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-dots li button {
            padding: 0
        }

            .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-dots li button:before, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-dots li button:before {
                content: "";
                width: 10px;
                height: 10px;
                background-color: #d0d0d0;
                border: none;
                border-radius: 100%;
                opacity: 1
            }

    .promotionHomeSection .wrapPromotionHomeBoxSlider .wrapPromotionHomeBox .slick-dots .slick-active button:before, .promotionHomeSection .wrapPromotionHomeBoxTablet .wrapPromotionHomeBox .slick-dots .slick-active button:before {
        background-color: #25447e
    }

.promotionHomeSection .wrapPromotionHomeBoxSlider .underlineSection, .promotionHomeSection .wrapPromotionHomeBoxTablet .underlineSection {
    display: none
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .underlineSection, .promotionHomeSection .wrapPromotionHomeBoxTablet .underlineSection {
        display: block
    }
}

.promotionHomeSection .wrapPromotionHomeBoxSlider .promoHomeLink, .promotionHomeSection .wrapPromotionHomeBoxTablet .promoHomeLink {
    width: fit-content;
    height: auto;
    display: none;
    margin: 27px auto
}

@media (max-width:767px) {
    .promotionHomeSection .wrapPromotionHomeBoxSlider .promoHomeLink, .promotionHomeSection .wrapPromotionHomeBoxTablet .promoHomeLink {
        display: block
    }
}

.promotionHomeSection .wrapPromotionHomeBoxSlider .promoHomeLink .btnLinkPromo, .promotionHomeSection .wrapPromotionHomeBoxTablet .promoHomeLink .btnLinkPromo {
    border: none;
    background: 0 0
}

    .promotionHomeSection .wrapPromotionHomeBoxSlider .promoHomeLink .btnLinkPromo img, .promotionHomeSection .wrapPromotionHomeBoxTablet .promoHomeLink .btnLinkPromo img {
        max-width: 12px
    }

.underlineSection {
    width: 100%;
    height: 1px;
    background-color: #e7e7e7
}

.partnerSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-bottom: 72px
}

@media (max-width:992px) {
    .partnerSection {
        padding-bottom: 0
    }
}

.partnerSection h3 {
    padding-bottom: 12px
}

@media (max-width:767px) {
    .partnerSection .underlineSection {
        display: none
    }
}

.partnerSection .wrapLogoPartner {
    width: calc(100% - 50px);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0;
    margin: 27px 0 12px
}

@media (max-width:992px) {
    .partnerSection .wrapLogoPartner {
        width: 100%;
        justify-content: space-between;
        padding: 20px;
        padding-top: 20px;
        padding-bottom: 10px;
        margin: 0
    }
}

@media (max-width:767px) {
    .partnerSection .wrapLogoPartner {
        padding-top: 18px;
        padding-bottom: 60px
    }
}

.partnerSection .wrapLogoPartner .logoPartnerBox {
    flex: 0 0 calc(25% - 50px);
    margin: 36px 25px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:992px) {
    .partnerSection .wrapLogoPartner .logoPartnerBox {
        flex: 0 0 calc(25% - 50px)
    }
}

@media (max-width:767px) {
    .partnerSection .wrapLogoPartner .logoPartnerBox {
        flex: 0 0 calc(50% - 50px);
        margin: 15px 12px
    }
}

.partnerSection .wrapLogoPartner .logoPartnerBox img {
    mix-blend-mode: darken
}

@media (max-width:992px) {
    .partnerSection .wrapLogoPartner .logoPartnerBox img {
        max-width: 90%
    }
}

.bannerCardSliderSection {
    width: 100%;
    height: 525px;
    position: relative;
    background-color: #f4f4f4;
    overflow: hidden;
}

    .bannerCardSliderSection .bgBludCard {
        width: 100%;
        height: 430px;
        position: absolute;
        bottom: 0;
        left: 0;
/*        background-color: #113067;
        background-image: url(../images/object/bannerCardSliderDesktop.svg);*/
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bannerCardSliderSection .bgBludCardCustom {
        width: 100%;
        height: 430px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #113067;
        background-image: url(../images/object/bannerCardSliderDesktop.svg);
        background-repeat: no-repeat;
        /*background-size: cover;*/
    }

@media (max-width:992px) {
    .bannerCardSliderSection .bgBludCard {
        background-image: url(../images/object/bannerCardSliderTablet.svg);
        background-size: cover;
        background-size: contain;
        background-color: #1b3a73
    }

    .bannerCardSliderSection .bgBludCardCustom {
        /*background-image: url(../images/object/bannerCardSliderTablet.svg);*/
        /*background-size: cover;
        background-size: contain;*/
        /*background-color: #1b3a73*/
    }
}

.bannerCardSliderSection .wrapCardSlider {
    width: 100%;
    height: 385px;
    position: relative;
    z-index: 2
}

@media (max-width:767px) {
    .bannerCardSliderSection .wrapCardSlider {
        height: auto
    }
}

.bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox {
    width: 100%;
    height: auto
}

    .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapImgCardSlider {
        width: 100%;
        height: 190px;
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

        .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapImgCardSlider img {
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

    .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-top: 20px
    }

        .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText p {
            margin-top: 8px
        }

        .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText a {
            display: flex;
            align-items: center;
            margin-top: 12px
        }

            .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox .wrapCardSliderText a img {
                max-width: 10px;
                margin-left: 5px
            }

    .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox:hover .wrapImgCardSlider img {
        transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

@media (max-width:992px) {
    .bannerCardSliderSection .wrapCardSlider .wrapCardSliderBox:hover .wrapImgCardSlider img {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.bannerCardSliderSection .wrapCardSlider .slick-list {
    margin: 0 -12px
}

@media (max-width:767px) {
    .bannerCardSliderSection .wrapCardSlider .slick-list {
        margin: 0 -12px;
        overflow: visible;
        max-width: 60vw;
        height: auto
    }
}

.bannerCardSliderSection .wrapCardSlider .slick-list .slick-track {
    margin: 0 10px
}

@media (max-width:767px) {
    .bannerCardSliderSection .wrapCardSlider .slick-list .slick-track {
        position: relative;
        overflow: auto;
        margin: 0 10px
    }
}

.bannerCardSliderSection .wrapCardSlider .slick-list .slick-track .slick-slide {
    margin: 0 12px
}

@media (max-width:767px) {
    .bannerCardSliderSection .wrapCardSlider .slick-list .slick-track .slick-slide {
        margin: 0 12px;
        max-width: 60vw;
        height: auto
    }
}

.bannerCardSliderSection .wrapCardSlider .slick-dots li {
    width: 10px;
    height: 10px
}

    .bannerCardSliderSection .wrapCardSlider .slick-dots li button {
        padding: 0
    }

        .bannerCardSliderSection .wrapCardSlider .slick-dots li button:before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #25447e;
            border: none;
            border-radius: 100%;
            opacity: 1
        }

.bannerCardSliderSection .wrapCardSlider .slick-dots .slick-active button:before {
    background-color: #fff
}

.bannerCardSliderSection .wrapBtnViewCard {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2
}

    .bannerCardSliderSection .wrapBtnViewCard a {
        width: fit-content;
        height: auto;
        margin-top: 30px
    }

        .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll {
            width: 170px;
            height: 40px;
            border: none;
            border-radius: 50px;
            color: #fff;
            background-image: linear-gradient(to right,#003e7b,#44c7f4);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out
        }

            .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll img {
                margin-left: 5px
            }

            .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll img {
                max-width: 10px;
                margin-top: -2px
            }

            .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll:hover {
                background-image: linear-gradient(to right,#44c7f4,#003e7b)
            }

                .bannerCardSliderSection .wrapBtnViewCard a .btnViewCardAll:hover img {
                    animation: arrowSwipe 2s linear infinite
                }

.highlightHomeSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-top: 60px;
    padding-bottom: 120px
}

@media (max-width:992px) {
    .highlightHomeSection {
        padding-bottom: 56px
    }
}

@media (max-width:767px) {
    .highlightHomeSection {
        padding-top: 30px
    }
}

.highlightHomeSection h2 {
    padding-bottom: 22px
}

@media (max-width:767px) {
    .highlightHomeSection h2 {
        text-align: center;
        padding-bottom: 0
    }
}

@media (max-width:767px) {
    .highlightHomeSection .underlineSection {
        display: none
    }
}

.highlightHomeSection .wrapCardBoxHighlightGrid {
    width: 100%;
    height: auto;
    padding-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 35px;
    grid-gap: 35px
}

@media (max-width:992px) {
    .highlightHomeSection .wrapCardBoxHighlightGrid {
        gap: 24px;
        grid-gap: 24px
    }
}

@media (max-width:767px) {
    .highlightHomeSection .wrapCardBoxHighlightGrid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        grid-gap: 20px;
        padding-top: 30px
    }
}

.highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox {
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

    .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox img {
        width: 100%;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

    .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox .wrapTextCardHighlight {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 20px
    }

    .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox:hover img {
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

    .highlightHomeSection .wrapCardBoxHighlightGrid .wrapCardHighlightBox::before {
        content: "";
        width: 100%;
        height: 50%;
        background-image: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1
    }

.lifestyleHomeSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-top: 10px;
    padding-bottom: 140px
}

@media (max-width:992px) {
    .lifestyleHomeSection {
        padding-bottom: 76px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection {
        padding-bottom: 30px;
        background-color: #fff
    }
}

.lifestyleHomeSection .wraplifestyleTitle {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between
}

    .lifestyleHomeSection .wraplifestyleTitle h2 {
        padding-bottom: 22px
    }

@media (max-width:767px) {
    .lifestyleHomeSection .wraplifestyleTitle h2 {
        text-align: center;
        width: 100%;
        padding-top: 27px;
        padding-bottom: 0
    }
}

.lifestyleHomeSection .wraplifestyleTitle a {
    border: none;
    background: 0 0
}

@media (max-width:767px) {
    .lifestyleHomeSection .wraplifestyleTitle a {
        display: none
    }
}

.lifestyleHomeSection .wrapLifestyleBig {
    width: 100%;
    height: 389px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-top: 46px;
    overflow: hidden
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig {
        height: 240px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig {
        grid-template-columns: 1fr;
        height: auto;
        margin-top: 20px
    }
}

.lifestyleHomeSection .wrapLifestyleBig .lifestyleBigBox {
    width: 100%;
    height: 389px;
    position: relative;
    overflow: hidden
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .lifestyleBigBox {
        height: 240px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .lifestyleBigBox {
        height: 180px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .lifestyleBigBox:first-child:after {
        content: "";
        width: 100%;
        height: 180px;
        position: absolute;
        top: 0;
        left: 0;
        background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0));
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleBigImg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText {
    width: 100%;
    height: 100%;
    padding: 22px
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText {
        padding: 12px 16px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText {
        padding: 12px 22px;
        border-bottom: 1px solid #f4f4f4
    }
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText .tagLifestyle {
    width: fit-content;
    background-color: #25447e;
    padding: 1px 9px;
    border-radius: 5px
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText .tagLifestyle {
        position: absolute;
        top: -163px;
        left: 15px
    }
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText h3 {
    margin-top: 32px
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText h3 {
        margin-top: 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }
}

.lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText p {
    margin-top: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig .wrapLifestyleText p {
        margin-top: 18px
    }
}

.lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig {
    width: fit-content;
    height: auto;
    position: absolute;
    bottom: 22px;
    left: 22px;
    display: flex
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig {
        top: -30px;
        bottom: auto
    }
}

.lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p {
    margin-right: 30px
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p {
        color: #fff
    }
}

.lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p img {
    margin-right: 8px
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleBig .dateViewLifestyleBig p img {
        filter: brightness(0) invert(1)
    }
}

.lifestyleHomeSection .wrapLifestyleBig:hover .wrapLifestyleBigImg {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleBig:hover .wrapLifestyleBigImg {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.lifestyleHomeSection .wrapLifestyleSmall {
    width: 100%;
    height: 389px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 0
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall {
        height: 32vw
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall {
        grid-template-columns: 1fr;
        gap: 1px;
        grid-gap: 1px;
        height: auto;
        margin-top: 16px;
        background-color: #f4f4f4
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox {
    width: 100%;
    height: 389px;
    position: relative;
    overflow: hidden
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox {
        height: 32vw
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox {
        height: auto;
        padding: 17px 20px;
        background-color: #fff
    }
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a {
        width: fit-content;
        height: 0;
        padding-right: 100%
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a {
        display: grid;
        grid-template-columns: 152px 1fr;
        height: auto;
        padding-right: 0;
        gap: 20px;
        grid-gap: 20px
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallImg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallImg {
        position: absolute;
        top: 0;
        left: 0
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallImg {
        position: relative;
        width: 152px;
        height: 152px
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText {
        padding: 12px 10px
    }
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText {
        position: relative;
        padding: 0 10px;
        justify-content: flex-start
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .tagLifestyle {
    width: fit-content;
    background-color: #25447e;
    padding: 1px 9px;
    border-radius: 5px
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText h3 {
    margin-top: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText h3 {
        color: #25447e;
        -webkit-line-clamp: 3
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 12px
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig {
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 10px
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p {
    margin-right: 30px;
    color: #fff
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p {
        color: #828282;
        margin-right: 10px
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p img {
    margin-right: 8px
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox a .wrapLifestyleSmallText .dateViewLifestyleBig p img {
        filter: invert(1) opacity(.5)
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox:hover a .wrapLifestyleSmallImg {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

@media (max-width:992px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox:hover a .wrapLifestyleSmallImg {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))
}

@media (max-width:767px) {
    .lifestyleHomeSection .wrapLifestyleSmall .lifestyleSmallBox::before {
        width: 45%;
        left: 20px;
        display: none
    }
}

.lifestyleHomeSection .wraplifestyleTitleMobile {
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none
}

@media (max-width:767px) {
    .lifestyleHomeSection .wraplifestyleTitleMobile {
        display: flex
    }
}

.lifestyleHomeSection .wraplifestyleTitleMobile a {
    width: fit-content;
    border: none;
    background: 0 0
}

@media (max-width:767px) {
    .lifestyleHomeSection .wraplifestyleTitleMobile a {
        margin-top: 28px
    }
}

.bannerVdoCareSection {
    width: 100%;
    height: 360px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden
}

@media (max-width:992px) {
    .bannerVdoCareSection {
        height: 260px
    }
}

@media (max-width:767px) {
    .bannerVdoCareSection {
        grid-template-columns: 1fr;
        height: auto
    }
}

.bannerVdoCareSection .wrapBannerVdo {
    width: 100%;
    height: 360px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdo {
        height: 260px
    }
}

.bannerVdoCareSection .wrapBannerVdo .vdoBG {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: auto;
    width: auto;
    height: 70vw;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%)
}

.bannerVdoCareSection .wrapBannerVdo .btnPlayVdo {
    width: 58px;
    height: 58px;
    background-color: #25447e;
    border: none;
    border-radius: 100%;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    position: relative;
    z-index: 2
}

    .bannerVdoCareSection .wrapBannerVdo .btnPlayVdo img {
        margin-top: -3px;
        margin-left: 2px
    }

    .bannerVdoCareSection .wrapBannerVdo .btnPlayVdo:hover {
        background-color: #12aadf;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.bannerVdoCareSection .wrapBannerVdoSmallText {
    width: 100%;
    height: 360px;
    background-color: #25447e;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText {
        height: 260px
    }
}

.bannerVdoCareSection .wrapBannerVdoSmallText h2 {
    text-align: center
}

.bannerVdoCareSection .wrapBannerVdoSmallText p {
    margin-top: 24px;
    text-align: center
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText p {
        margin-top: 4px
    }
}

.bannerVdoCareSection .wrapBannerVdoSmallText a {
    width: fit-content;
    height: auto;
    margin-top: 40px
}

@media (max-width:992px) {
    .bannerVdoCareSection .wrapBannerVdoSmallText a {
        margin-top: 14px
    }
}

.bannerVdoCareSection .wrapBannerVdoSmallText a .btnLearnMoreVdoSmall {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

    .bannerVdoCareSection .wrapBannerVdoSmallText a .btnLearnMoreVdoSmall img {
        margin-left: 5px
    }

    .bannerVdoCareSection .wrapBannerVdoSmallText a .btnLearnMoreVdoSmall:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .bannerVdoCareSection .wrapBannerVdoSmallText a .btnLearnMoreVdoSmall:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.feedbackUSerSliderSection {
    width: 100%;
    height: auto;
    padding: 64px 0 145px;
    background-color: #f4f4f4;
    overflow: hidden
}

@media (max-width:992px) {
    .feedbackUSerSliderSection {
        padding: 62px 0 110px
    }
}

@media (max-width:767px) {
    .feedbackUSerSliderSection {
        padding: 64px 0 98px
    }
}

.feedbackUSerSliderSection h2 {
    text-align: center
}

.feedbackUSerSliderSection .wrapSliderFeedback {
    width: 100%;
    height: auto;
    margin-top: 34px
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback {
        margin: 0 -15px;
        margin-top: 48px
    }
}

.feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox {
    height: auto;
    min-height: 235px;
    background-color: #fff;
    padding: 19px 22px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    border-radius: 5px
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox {
        min-height: 244px
    }
}

.feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapSliderUserData {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center
}

    .feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapSliderUserData .wrapUserImg {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 100%;
        background-color: #f4f4f4;
        background-position: center;
        background-size: cover
    }

    .feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapSliderUserData h4 {
        margin-left: 18px
    }

.feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapStarRateUser {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    grid-gap: 5px;
    margin-top: 15px
}

.feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapTextCommentUser {
    width: 100%;
    height: auto;
    margin-top: 19px
}

    .feedbackUSerSliderSection .wrapSliderFeedback .sliderFeedbackBox .wrapTextCommentUser p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical
    }

.feedbackUSerSliderSection .wrapSliderFeedback .slick-list {
    margin: 0 17px;
    padding: 15px 0
}

@media (max-width:992px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list {
        margin: 0 12px;
        overflow: visible
    }
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list {
        margin: 0;
        max-width: 75vw
    }
}

@media (max-width:992px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list .slick-track {
        position: relative;
        overflow: auto;
        margin: 0 12px
    }
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list .slick-track {
        margin: 0
    }
}

.feedbackUSerSliderSection .wrapSliderFeedback .slick-list .slick-track .slick-slide {
    margin: 0 17px
}

@media (max-width:992px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list .slick-track .slick-slide {
        margin: 0 12px
    }
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-list .slick-track .slick-slide {
        margin: 0 12px;
        max-width: 75vw
    }
}

.feedbackUSerSliderSection .wrapSliderFeedback .slick-dots {
    bottom: -90px
}

@media (max-width:992px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-dots {
        bottom: -57px
    }
}

@media (max-width:767px) {
    .feedbackUSerSliderSection .wrapSliderFeedback .slick-dots {
        bottom: -60px
    }
}

.feedbackUSerSliderSection .wrapSliderFeedback .slick-dots li {
    width: 10px;
    height: 10px
}

    .feedbackUSerSliderSection .wrapSliderFeedback .slick-dots li button {
        padding: 0
    }

        .feedbackUSerSliderSection .wrapSliderFeedback .slick-dots li button:before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #d0d0d0;
            border: none;
            border-radius: 100%;
            opacity: 1
        }

.feedbackUSerSliderSection .wrapSliderFeedback .slick-dots .slick-active button:before {
    background-color: #25447e
}

.subscribeSection {
    width: 100%;
    height: 270px;
    background-color: #183262
}

@media (max-width:767px) {
    .subscribeSection {
        height: auto;
        padding-top: 52px;
        padding-bottom: 90px
    }
}

.subscribeSection .wrapSubscribe {
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

@media (max-width:992px) {
    .subscribeSection .wrapSubscribe {
        max-width: 465px;
        margin: 0 auto
    }
}

@media (max-width:767px) {
    .subscribeSection .wrapSubscribe {
        height: auto
    }
}

@media (max-width:767px) {
    .subscribeSection .wrapSubscribe h3 {
        text-align: center
    }
}

.subscribeSection .wrapSubscribe h3 br {
    display: none
}

@media (max-width:767px) {
    .subscribeSection .wrapSubscribe h3 br {
        display: block
    }
}

.subscribeSection .wrapSubscribe form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .subscribeSection .wrapSubscribe form .inputEmail {
        width: 465px;
        height: 45px;
        background-color: #fff;
        border: 1px solid #dedede;
        box-shadow: none;
        outline: 0;
        padding: 10px;
        margin-top: 25px
    }

@media (max-width:992px) {
    .subscribeSection .wrapSubscribe form .inputEmail {
        width: 440px
    }
}

@media (max-width:767px) {
    .subscribeSection .wrapSubscribe form .inputEmail {
        width: 100%;
        margin-top: 42px
    }
}

.subscribeSection .wrapSubscribe form .inputEmail::placeholder {
    color: #828282
}

.subscribeSection .wrapSubscribe form .btnSubscriber {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    margin: 20px auto 0
}

    .subscribeSection .wrapSubscribe form .btnSubscriber img {
        margin-left: 5px
    }

    .subscribeSection .wrapSubscribe form .btnSubscriber:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .subscribeSection .wrapSubscribe form .btnSubscriber:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.subFooterSection {
    width: 100%;
    height: 270px;
    background-color: #f4f4f4;
    display: grid;
    grid-template-columns: 1fr 1fr
}

@media (max-width:992px) {
    .subFooterSection {
        height: 156px
    }
}

@media (max-width:767px) {
    .subFooterSection {
        height: auto;
        grid-template-columns: 1fr
    }
}

.subFooterSection a {
    width: 100%;
    height: auto;
    overflow: hidden
}

    .subFooterSection a .wrapSubFooterBox {
        width: 100%;
        height: 270px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

@media (max-width:992px) {
    .subFooterSection a .wrapSubFooterBox {
        height: 156px
    }
}

.subFooterSection a .wrapSubFooterBox h3 {
    text-align: center;
    transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none
}

.subFooterSection a .wrapSubFooterBox p {
    text-align: center;
    transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none
}

.subFooterSection a:hover .wrapSubFooterBox {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

@media (max-width:992px) {
    .subFooterSection a:hover .wrapSubFooterBox {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.subFooterSection a:hover .wrapSubFooterBox h3 {
    transform: scale(.9);
    -ms-transform: scale(.9);
    -moz-transform: scale(.9);
    -webkit-transform: scale(.9);
    -o-transform: scale(.9)
}

@media (max-width:992px) {
    .subFooterSection a:hover .wrapSubFooterBox h3 {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.subFooterSection a:hover .wrapSubFooterBox p {
    transform: scale(.9);
    -ms-transform: scale(.9);
    -moz-transform: scale(.9);
    -webkit-transform: scale(.9);
    -o-transform: scale(.9)
}

@media (max-width:992px) {
    .subFooterSection a:hover .wrapSubFooterBox p {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

footer {
    width: 100%;
    height: auto;
    background-color: #183262
}

    footer .wrapFooterTop {
        width: 100%;
        height: 95px;
        padding: 0 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #265eac
    }

@media (max-width:767px) {
    footer .wrapFooterTop {
        padding: 0 20px
    }
}

footer .wrapFooterTop .wrapSnsIconFooter a img {
    margin: 0 4px
}

@media (min-width:1200px) {
    footer .wrapFooterBottom {
        width: 100%;
        height: auto;
        padding: 40px 60px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 48px;
        grid-gap: 48px;
        border-bottom: 1px solid #265eac
    }

}

@media (max-width:1199px) {
    footer .wrapFooterBottom {
        width: 100%;
        height: auto;
        padding: 40px 60px;
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;*/
        gap: 48px;
        grid-gap: 48px;
        border-bottom: 1px solid #265eac
    }
}



@media (max-width:1281px) {
    footer .wrapFooterBottom {
        gap: 42px;
        grid-gap: 42px
    }
}

@media (max-width:992px) {
    footer .wrapFooterBottom {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width:767px) {
    footer .wrapFooterBottom {
        display: unset;
        border-bottom: unset;
        grid-template-columns: 1fr 1fr;
        padding: 40px 20px;
        gap: 32px 16px;
        grid-gap: 32px 16px
    }
}

footer .wrapFooterBottom .footerBottomBox {
    width: 100%;
    height: auto
}

    footer .wrapFooterBottom .footerBottomBox h3 {
        margin-bottom: 12px
    }

    footer .wrapFooterBottom .footerBottomBox ul {
        padding: 0;
        margin: 0
    }

        footer .wrapFooterBottom .footerBottomBox ul li {
            list-style: none
        }

footer .wrapLastFooter {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:767px) {
    footer .wrapLastFooter {
        padding: 10px 0;
        height: auto
    }
}

footer .wrapLastFooter p {
    text-align: center
}

@media (max-width:767px) {
    footer .wrapLastFooter p {
        padding: 0 20px
    }
}

footer .wrapLastFooter p br {
    display: none
}

@media (max-width:767px) {
    footer .wrapLastFooter p br {
        display: block
    }
}

.popupVdoSection {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 14;
    background-color: rgba(0,0,0,.8);
    display: block
}

    .popupVdoSection .wrapPopupVdo {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .popupVdoSection .wrapPopupVdo .wrapPopupVdoIn {
            width: 1000px;
            height: auto
        }

    .popupVdoSection .btnClosePopup {
        width: 40px;
        height: 40px;
        background: 0 0;
        outline: 0;
        box-shadow: none;
        border: none;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 16
    }

        .popupVdoSection .btnClosePopup img {
            width: 100%;
            height: auto
        }

.plyr__control--overlaid {
    background: #25447e
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #12aadf
}

.bannerPromotionSection {
    width: 100%;
    height: auto
}

    .bannerPromotionSection .wrapBannerPromotionSection {
        width: 100%;
        height: 32vw;
        margin: 0
    }

@media (max-width:992px) {
    .bannerPromotionSection .wrapBannerPromotionSection {
        min-height: 400px
    }
}

@media (max-width:767px) {
    .bannerPromotionSection .wrapBannerPromotionSection {
        min-height: 360px
    }
}

.bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox {
    width: 100%;
    height: 32vw;
    position: relative
}

@media (max-width:992px) {
    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox {
        min-height: 400px
    }
}

@media (max-width:767px) {
    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox {
        min-height: 360px
    }
}

.bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapBGBannerPromo {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapBGBannerPromo::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: rgba(0,0,0,.3)
    }

.bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo h1 {
        text-align: center;
        padding: 0 20px
    }

    .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a {
        margin-top: 20px
    }

        .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a .btnReadmoreBannerPromo {
            width: 170px;
            height: 40px;
            border: none;
            border-radius: 50px;
            color: #fff;
            background-image: linear-gradient(to right,#003e7b,#44c7f4);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out
        }

            .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a .btnReadmoreBannerPromo img {
                margin-left: 5px
            }

            .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a .btnReadmoreBannerPromo:hover {
                background-image: linear-gradient(to right,#44c7f4,#003e7b)
            }

                .bannerPromotionSection .wrapBannerPromotionSection .wrapBannerPromotionBox .wrapTextBannerPromo a .btnReadmoreBannerPromo:hover img {
                    animation: arrowSwipe 2s linear infinite
                }

.bannerPromotionSection .wrapBannerPromotionSection .slick-dots {
    bottom: 30px
}

    .bannerPromotionSection .wrapBannerPromotionSection .slick-dots li {
        width: 10px;
        height: 10px
    }

        .bannerPromotionSection .wrapBannerPromotionSection .slick-dots li button {
            padding: 0
        }

            .bannerPromotionSection .wrapBannerPromotionSection .slick-dots li button:before {
                content: "";
                width: 10px;
                height: 10px;
                background-color: #fff;
                border: none;
                border-radius: 100%;
                opacity: 1
            }

    .bannerPromotionSection .wrapBannerPromotionSection .slick-dots .slick-active button:before {
        background-color: #25447e
    }

.promotionContentSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-bottom: 146px
}

    .promotionContentSection .promotionContentArticle {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 35px;
        grid-gap: 35px
    }

@media (max-width:992px) {
    .promotionContentSection .promotionContentArticle {
        grid-template-columns: 1fr
    }
}

.promotionContentSection .promotionContentArticle .promotionContentFilter {
    width: 100%;
    height: auto
}

@media (max-width:992px) {
    .promotionContentSection .promotionContentArticle .promotionContentFilter {
        display: none
    }
}

.promotionContentSection .promotionContentArticle .promotionContentFilter .titleTopicFilter {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 12px;
    position: relative
}

    .promotionContentSection .promotionContentArticle .promotionContentFilter .titleTopicFilter .btnResetFilter {
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        border: none;
        background: 0 0;
        position: absolute;
        top: 2px;
        right: 0;
        color: #25447e;
        text-decoration: underline
    }

.promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection {
    width: 100%;
    height: auto;
    padding-top: 12px
}

    .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection h4 {
        margin-bottom: 14px
    }

    .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .anotherFilterBox {
        width: 100%;
        height: auto;
        border-top: 1px solid #d0d0d0;
        padding-top: 14px;
        margin-top: 32px;
        position: relative
    }

        .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .anotherFilterBox h4 {
            margin-bottom: 20px
        }

        .promotionContentSection .promotionContentArticle .promotionContentFilter .promoFilterSection .anotherFilterBox .btnResetButtonFilter {
            width: auto;
            height: auto;
            padding: 0;
            margin: 0;
            border: none;
            background: 0 0;
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            color: #25447e;
            text-decoration: underline;
            margin-top: 17px
        }

.promotionContentSection .promotionContentArticle .promotionContentAll {
    width: 100%;
    height: auto;
}

@media (max-width:992px) {
    .promotionContentSection .promotionContentArticle .promotionContentAll {
        gap: 24px 26px;
        grid-gap: 24px 26px
    }
}

@media (max-width:767px) {
    .promotionContentSection .promotionContentArticle .promotionContentAll {
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
        grid-gap: 10px 20px
    }
}

.promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    box-shadow: 0 2px 8px 3px rgba(0,0,0,.1)
}

    .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapImgPromotionContentBox {
        width: 100%;
        height: auto;
        overflow: hidden
    }

        .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapImgPromotionContentBox img {
            width: 100%;
            height: auto;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out
        }

    .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox {
        width: 100%;
        height: 220px;
        background-color: #fff;
        padding: 12px
    }

        .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox .tagPromotion {
            width: fit-content;
            height: fit-content;
            background-color: #25447e;
            padding: 0 8px;
            border-radius: 5px
        }

        .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox h2 {
            margin-top: 8px
        }

        .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox p {
            margin-top: 8px
        }

        .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox .wrapTextPromotionContentBox span {
            color: #25447e;
            margin-top: 12px;
            display: block
        }

    .promotionContentSection .promotionContentArticle .promotionContentAll .promotionContentBox:hover .wrapImgPromotionContentBox img {
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

.bannerPromotionDetailSection {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-bottom: 46px
}

    .bannerPromotionDetailSection .wrapBannerRow {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: .8fr 1fr;
        gap: 0 136px;
        grid-gap: 0 136px
    }

@media (max-width:1281px) {
    .bannerPromotionDetailSection .wrapBannerRow {
        gap: 0 132px;
        grid-gap: 0 132px
    }
}

@media (max-width:992px) {
    .bannerPromotionDetailSection .wrapBannerRow {
        gap: 0 58px;
        grid-gap: 0 58px;
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow {
        grid-template-columns: 1fr;
        gap: 15px;
        grid-gap: 15px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapImgBannerPromotionDetail {
    padding: 0
}

    .bannerPromotionDetailSection .wrapBannerRow .wrapImgBannerPromotionDetail img {
        width: 100%;
        height: auto
    }

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column
}

    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h6 {
        color: #828282
    }

@media (max-width:992px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h6 {
        font-size: 14px
    }
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h6 {
        text-align: center;
        width: 100%
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h1 {
    margin-top: 16px
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail h1 {
        text-align: center;
        width: 100%;
        font-size: 22px;
        margin-top: 12px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p {
    color: #828282;
    margin-top: 12px
}

@media (max-width:992px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p {
        font-size: 18px
    }
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail p {
        text-align: center;
        width: 100%
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a {
    width: fit-content;
    height: auto;
    margin-top: 22px
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a {
        margin: 0 auto;
        margin-top: 18px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a .btnRigistPromotionDetial {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a .btnRigistPromotionDetial img {
        margin-left: 5px
    }

    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a .btnRigistPromotionDetial:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail a .btnRigistPromotionDetial:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail .socialSharePromoDetail {
    display: flex;
    margin-top: 20px
}

@media (max-width:767px) {
    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail .socialSharePromoDetail {
        margin: 0 auto;
        margin-top: 28px
    }
}

.bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail .socialSharePromoDetail a {
    cursor: pointer;
    margin: 0 7px
}

    .bannerPromotionDetailSection .wrapBannerRow .wrapTextBannerPromotionDetail .socialSharePromoDetail a:hover img {
        filter: hue-rotate(319deg) saturate(500%)
    }

.subMenuPromotionDetail {
    width: 100%;
    height: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    z-index: 15;
    background-color: #fff;
    border-top: 2px solid #fff;
    overflow: hidden
}

@media (max-width:992px) {
    .subMenuPromotionDetail {
        overflow-x: scroll
    }
}

.subMenuPromotionDetail ul {
    width: 100%;
    height: 60px;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:992px) {
    .subMenuPromotionDetail ul {
        width: 860px;
        padding-right: 40px
    }
}

.subMenuPromotionDetail ul li {
    height: 60px;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 17px
}

    .subMenuPromotionDetail ul li .current {
        color: #25447e
    }

    .subMenuPromotionDetail ul li:hover {
        color: #12aadf
    }

.subMenuPromotionDetail ul .activeSubMenuPromo {
    color: #25447e
}

    .subMenuPromotionDetail ul .activeSubMenuPromo a {
        color: #25447e
    }

    .subMenuPromotionDetail ul .activeSubMenuPromo:hover {
        color: #25447e
    }

    .subMenuPromotionDetail ul .activeSubMenuPromo::after {
        content: "";
        width: 100%;
        height: 5px;
        background-color: #25447e;
        position: absolute;
        bottom: 0;
        left: 0
    }

.subMenuPromotionDetail::-webkit-scrollbar {
    display: none;
    overflow: hidden
}

.subMenuPromotionDetail.subMenuPromotionDetailStickyActive {
    border-color: #f4f4f4
}

.promotionDetailConditionSection, .promotionDetailContentSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-top: 22px;
    padding-bottom: 136px;
    overflow: hidden
}

@media (max-width:992px) {
    .promotionDetailConditionSection, .promotionDetailContentSection {
        padding-top: 12px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection, .promotionDetailContentSection {
        padding-top: 0;
        padding-bottom: 60px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox {
    width: 100%;
    height: auto
}

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2 {
        padding: 10px 0 10px 32px;
        position: relative;
        color: #25447e;
        margin-bottom: 32px;
        margin-top: 34px;
        font-weight: 700
    }

@media (max-width:1281px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2 {
        margin-top: 60px;
        margin-bottom: 28px
    }
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2 {
        font-size: 26px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2 {
        margin-top: 46px;
        padding: 10px 16px 10px 17px;
        width: 100%;
        margin-bottom: 18px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B {
    padding: 10px 0 10px 32px;
    position: relative;
    color: #25447e;
    margin-bottom: 32px;
    margin-top: 34px
}

@media (max-width:1281px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B {
        margin-top: 60px;
        margin-bottom: 28px
    }
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B {
        font-size: 22px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .h2B, .promotionDetailContentSection .wrapTopicPromotionDetailBox .h2B {
        margin-top: 46px;
        padding: 10px 16px 10px 17px;
        width: 100%;
        margin-bottom: 26px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox h2:after, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background-color: #12aadf
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h2:after, .promotionDetailContentSection .wrapTopicPromotionDetailBox h2:after {
        width: 5px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3 {
    color: #25447e;
    margin-bottom: 14px;
    margin-top: 14px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3 {
        font-size: 22px;
        line-height: 180%
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h3, .promotionDetailContentSection .wrapTopicPromotionDetailBox h3 {
        padding: 0 16px;
        width: 100%;
        margin-bottom: 26px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox p {
    padding-bottom: 40px;
    color: #505050;
    line-height: 180%
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox p {
        font-size: 16px;
        padding-bottom: 42px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox p {
        padding: 0 16px 42px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox p a, .promotionDetailContentSection .wrapTopicPromotionDetailBox p a {
    width: auto;
    height: auto;
    display: inline;
    margin: 0;
    text-decoration: underline;
    color: #12aadf
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox p span, .promotionDetailContentSection .wrapTopicPromotionDetailBox p span {
    text-decoration: underline
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .pLinkContent, .promotionDetailContentSection .wrapTopicPromotionDetailBox .pLinkContent {
    font-weight: 500;
    text-align: center;
    margin-top: 24px;
    padding-bottom: 12px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .pLinkContent, .promotionDetailContentSection .wrapTopicPromotionDetailBox .pLinkContent {
        margin-top: 28px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .pLinkContent .aLinkPromotion, .promotionDetailContentSection .wrapTopicPromotionDetailBox .pLinkContent .aLinkPromotion {
    color: #12aadf;
    text-decoration: underline
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .underlineSection, .promotionDetailContentSection .wrapTopicPromotionDetailBox .underlineSection {
    width: 100%;
    height: 1px;
    background-color: #d0d0d0
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .underlineSection, .promotionDetailContentSection .wrapTopicPromotionDetailBox .underlineSection {
        width: calc(100% - 32px);
        margin-left: 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo {
    width: 100%;
    height: auto;
    overflow: hidden
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo {
        overflow-x: scroll
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    box-sizing: border-box;
    background-color: #d0d0d0
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB {
        width: 800px;
        margin: 0 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox {
    width: 100%;
    height: 40px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBox {
        font-size: 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBoxHead, .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBoxHead, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotion .tablePromotionBoxHead, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB .tablePromotionBoxHead {
    background-color: #25447e;
    color: #fff;
    border: none
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo .tablePromotionB {
    gap: 1px;
    grid-gap: 1px;
    background-color: #d0d0d0;
    border: 1px solid #d0d0d0
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar {
        height: 34px;
        display: block;
        position: absolute
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar-track, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar-track {
        background-color: #f4f4f4;
        border-radius: 10px;
        overflow: hidden;
        width: calc(100% - 32px);
        margin-top: 10px;
        border: 16px solid #f4f4f4;
        border-right: 16px solid #f4f4f4
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar-thumb, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapTablePromo::-webkit-scrollbar-thumb {
        background-color: #828282;
        border: 14px solid #f4f4f4;
        border-left: 16px solid #f4f4f4;
        left: 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox a, .promotionDetailContentSection .wrapTopicPromotionDetailBox a {
    width: fit-content;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 12px;
    margin-bottom: 30px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox a, .promotionDetailContentSection .wrapTopicPromotionDetailBox a {
        margin-bottom: 52px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox a .btnPromoDetail, .promotionDetailContentSection .wrapTopicPromotionDetailBox a .btnPromoDetail {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox a .btnPromoDetail img, .promotionDetailContentSection .wrapTopicPromotionDetailBox a .btnPromoDetail img {
        margin-left: 5px
    }

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox a .btnPromoDetail:hover, .promotionDetailContentSection .wrapTopicPromotionDetailBox a .btnPromoDetail:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .promotionDetailConditionSection .wrapTopicPromotionDetailBox a .btnPromoDetail:hover img, .promotionDetailContentSection .wrapTopicPromotionDetailBox a .btnPromoDetail:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% + 16px);
    margin: 0 -8px;
    margin-bottom: 32px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon {
        padding: 0 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon a, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon a {
    width: fit-content;
    height: auto;
    display: block;
    margin: 0 8px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon a img, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromoContentIcon a img {
        width: 100%
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .howtoPromo, .promotionDetailContentSection .wrapTopicPromotionDetailBox .howtoPromo {
    text-decoration: underline
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll {
    width: 100%;
    height: auto;
    overflow: hidden
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll {
        overflow-x: scroll
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid {
    width: calc(100% + 34px);
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -17px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid {
        margin: 0 -12px;
        width: calc(100% + 24px)
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid {
        width: 1000px;
        margin-left: 4px;
        margin-right: 4px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox {
    flex: 0 0 calc(25% - 34px);
    height: auto;
    margin: 0 17px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox {
        flex: 0 0 calc(25% - 24px);
        margin: 0 12px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox img, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox img {
    max-width: 100%;
    height: auto
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p {
    margin-top: 14px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll .wrapImgPromotionGrid .wrapImgPromotionGridBox p {
        padding-bottom: 37px;
        padding-left: 0
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll::-webkit-scrollbar, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapImgPromotionGridAll::-webkit-scrollbar {
    display: none;
    opacity: 0
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .alertPromoDetailP, .promotionDetailContentSection .wrapTopicPromotionDetailBox .alertPromoDetailP {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    grid-gap: 12px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .alertPromoDetailP, .promotionDetailContentSection .wrapTopicPromotionDetailBox .alertPromoDetailP {
        padding-bottom: 37px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .rmPad, .promotionDetailContentSection .wrapTopicPromotionDetailBox .rmPad {
    padding-top: 0;
    margin-top: 0
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .padBtn, .promotionDetailContentSection .wrapTopicPromotionDetailBox .padBtn {
    margin-top: 46px
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .marBottom, .promotionDetailContentSection .wrapTopicPromotionDetailBox .marBottom {
    margin-bottom: 46px
}

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .marBottom, .promotionDetailContentSection .wrapTopicPromotionDetailBox .marBottom {
        margin-bottom: 60px
    }
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .marBottom, .promotionDetailContentSection .wrapTopicPromotionDetailBox .marBottom {
        margin-bottom: 32px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox h4, .promotionDetailContentSection .wrapTopicPromotionDetailBox h4 {
    margin-bottom: 22px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox h4, .promotionDetailContentSection .wrapTopicPromotionDetailBox h4 {
        padding: 0 16px;
        width: 100%;
        margin-bottom: 26px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox ul, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul {
    position: relative;
    margin: 0;
    padding-left: 15px;
    margin-left: 15px
}

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox ul li, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul li {
        list-style: none;
        color: #505050;
        margin-bottom: 5px
    }

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox ul li, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul li {
        font-size: 16px;
        width: 100%;
        padding-right: 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox ul li:before, .promotionDetailContentSection .wrapTopicPromotionDetailBox ul li:before {
    content: "•";
    position: absolute;
    left: 0
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 50px 1px;
    grid-gap: 50px 1px
}

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner {
        gap: 10px 1px;
        grid-gap: 10px 1px;
        padding: 0 16px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox {
    width: 100%;
    height: 45px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #d0d0d0
}

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox img, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox img {
        padding: 0 24px;
        max-width: 100%
    }

@media (max-width:992px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox img, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox img {
        padding: 0 6px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox:nth-child(6n), .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox:nth-child(6n) {
    border: none
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox:last-child, .promotionDetailContentSection .wrapTopicPromotionDetailBox .wrapLogoPartner .wrapLogoPartnerBox:last-child {
    border: none
}

.promotionDetailConditionSection {
    padding-bottom: 45px;
    position: relative
}

    .promotionDetailConditionSection .wrapTopicPromotionDetailBox {
        max-height: 260px;
        overflow: hidden;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

@media (max-width:767px) {
    .promotionDetailConditionSection .wrapTopicPromotionDetailBox {
        max-height: 150px
    }
}

.promotionDetailConditionSection .wrapTopicPromotionDetailBox ul {
    margin-bottom: 30px
}

.promotionDetailConditionSection .showMoreContentPromotion {
    width: 100%;
    height: 180px;
    background: linear-gradient(0deg,#f4f4f4 36.31%,rgba(255,255,255,0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 1;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:767px) {
    .promotionDetailConditionSection .showMoreContentPromotion {
        background-color: #f4f4f4;
        height: 80px;
        overflow: hidden
    }
}

.promotionDetailConditionSection .showMoreContentPromotion .btnShowContentPromo {
    width: 170px;
    height: 40px;
    border: 2px solid #25447e;
    border-radius: 50px;
    color: #fff;
    background: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #25447e;
    font-weight: 500;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    margin-bottom: 30px
}

    .promotionDetailConditionSection .showMoreContentPromotion .btnShowContentPromo:hover {
        background-color: #25447e;
        color: #fff;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.promotionDetailConditionSection .wrapTopicPromotionDetailBoxActive {
    max-height: 999999px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.promotionDetailConditionSection .showMoreContentPromotionHide {
    opacity: 0;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.cardPromotionSection {
    width: 100%;
    height: auto;
    padding-top: 22px;
    padding-bottom: 55px;
    background-color: #fff;
    overflow: hidden
}

@media (max-width:767px) {
    .cardPromotionSection {
        padding-bottom: 30px
    }
}

.cardPromotionSection .wrapCardPromotionSection {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 35px
    }

@media (max-width:992px) {
    .cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail {
        width: calc(100% + 30px)
    }
}

@media (max-width:767px) {
    .cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail {
        width: calc(100% + 36px);
        margin-top: 26px
    }
}

.cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail a {
    /*width: 90px;*/
    max-width: 100%;
    height: 90px;
    margin: 0 15px;
    background: #fff;
    box-shadow: 0 2px 8px 3px rgba(0,0,0,.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:767px) {
    .cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail a {
        margin: 9px;
        width: 96px;
        height: 96px
    }
}

.cardPromotionSection .wrapCardPromotionSection .wrapImgCardWithPromotionDetail a img {
    max-width: 100%;
    height: auto
}

.promotionDetailTagSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-top: 14px;
    padding-bottom: 46px;
    overflow: hidden
}

    .promotionDetailTagSection .underlineSection {
        width: 100%;
        height: 1px;
        background-color: #d0d0d0
    }

    .promotionDetailTagSection .wrapTagArticle {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 52px 1fr;
        margin-top: 24px
    }

@media (max-width:767px) {
    .promotionDetailTagSection .wrapTagArticle {
        grid-template-columns: 1fr;
        padding-left: 16px
    }
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll {
    width: 100%;
    height: auto
}

@media (max-width:767px) {
    .promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll {
        overflow-x: scroll
    }
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex {
    width: calc(100% + 16px);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px
}

@media (max-width:767px) {
    .promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex {
        flex-wrap: nowrap;
        width: fit-content
    }
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex a {
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 0 10px;
    margin: 6px 8px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:767px) {
    .promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex a {
        width: auto;
        min-width: fit-content
    }
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll .wrapTagAllFlex a:hover {
    background-color: #25447e;
    border-color: #25447e;
    color: #fff;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.promotionDetailTagSection .wrapTagArticle .wrapTagAllFlexAll::-webkit-scrollbar {
    display: none;
    opacity: 0
}

.promotionDetailTagSection .aLinkTagBtn {
    width: fit-content;
    height: auto;
    margin: 0 auto;
    display: block;
    margin-top: 46px
}

@media (max-width:767px) {
    .promotionDetailTagSection .aLinkTagBtn {
        margin-top: 72px
    }
}

.promotionDetailTagSection .aLinkTagBtn .btnTagView {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out
}

    .promotionDetailTagSection .aLinkTagBtn .btnTagView img {
        margin-left: 5px
    }

    .promotionDetailTagSection .aLinkTagBtn .btnTagView:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .promotionDetailTagSection .aLinkTagBtn .btnTagView:hover img {
            animation: arrowSwipe 2s linear infinite
        }

.promotionDetailRecomendSection {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding-top: 14px;
    padding-bottom: 46px
}

    .promotionDetailRecomendSection h3 {
        text-align: center
    }

@media (max-width:992px) {
    .promotionDetailRecomendSection h3 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .promotionDetailRecomendSection h3 {
        font-size: 18px
    }
}

.subStartKrungsri {
    width: 100%;
    height: 240px;
    background-color: #fff;
    position: relative
}

@media (max-width:992px) {
    .subStartKrungsri {
        height: auto;
        box-shadow: 0 2px 8px 3px rgba(0,0,0,.1)
    }
}

.subStartKrungsri .wrapSubStartKrungsri {
    width: 100%;
    height: 240px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr
}

@media (max-width:992px) {
    .subStartKrungsri .wrapSubStartKrungsri {
        height: auto;
        grid-template-columns: 1fr;
        gap: 18px;
        grid-gap: 18px;
        padding: 50px 0 40px
    }
}

.subStartKrungsri .wrapSubStartKrungsri .wrapImgHandCard {
    z-index: 1
}

@media (max-width:992px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapImgHandCard {
        display: none
    }
}

.subStartKrungsri .wrapSubStartKrungsri .wrapImgHandCard img {
    max-width: 100%;
    height: auto
}

.subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 86px
}

@media (max-width:992px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri {
        padding-top: 0
    }
}

.subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri h2 {
    text-align: center
}

@media (max-width:992px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri h2 {
        font-size: 20px;
        line-height: 140%
    }
}

@media (max-width:992px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri br {
        display: none
    }
}

@media (max-width:767px) {
    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri br {
        display: block
    }
}

.subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a {
    width: fit-content;
    height: auto
}

    .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a .btnSubStart {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

        .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a .btnSubStart img {
            margin-left: 5px
        }

        .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a .btnSubStart:hover {
            background-image: linear-gradient(to right,#44c7f4,#003e7b)
        }

            .subStartKrungsri .wrapSubStartKrungsri .wrapTextSubStartKrungsri a .btnSubStart:hover img {
                animation: arrowSwipe 2s linear infinite
            }

.subStartKrungsri::before {
    content: "";
    width: 100%;
    height: 86px;
    background-color: #f4f4f4;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 -4px 6px 0 rgba(0,0,0,.05)
}

@media (max-width:992px) {
    .subStartKrungsri::before {
        display: none
    }
}

.cardHeaderSection {
    width: 100%;
    height: 180px;
    background-color: #25447e
}

@media (max-width:767px) {
    .cardHeaderSection {
        height: auto;
        padding: 26px 0
    }
}

.cardHeaderSection .wrapperCardHeader {
    width: 100%;
    height: 180px;
    display: grid;
    grid-template-columns: .7fr 1fr .6fr
}

@media (max-width:992px) {
    .cardHeaderSection .wrapperCardHeader {
        grid-template-columns: 130px 1fr 150px;
        gap: 35px;
        grid-gap: 35px
    }
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader {
        grid-template-columns: 1fr;
        gap: 34px;
        grid-gap: 34px;
        height: auto
    }
}

.cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft {
    width: 100%;
    height: 100%;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    grid-gap: 44px
}

@media (max-width:992px) {
    .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft {
        grid-template-columns: 1fr
    }
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        border-bottom: 1px solid #265eac;
        padding-bottom: 18px
    }
}

.cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft img {
    max-width: 100%;
    height: auto
}

@media (max-width:1191px) {
    .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft h4 {
        display: none
    }
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapperCardHeaderLeft h4 {
        display: block
    }
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapHeaderBorderLine {
        width: 1px;
        height: 126px;
        background-color: #fff
    }

@media (max-width:1191px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapHeaderBorderLine {
        display: none
    }
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 30px
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent {
        margin-left: 0
    }
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h5 {
    display: none;
    font-size: 12px;
    margin-bottom: 7px
}

@media (max-width:1191px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h5 {
        display: block
    }
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h5 {
        display: none
    }
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent h4 {
        text-align: center;
        width: 100%
    }
}

.cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent p {
    margin-top: 12px
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapCardHeaderContentCenter .wrapTextHeaderCardContent p {
        text-align: center
    }
}

.cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

@media (max-width:767px) {
    .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent {
        justify-content: center
    }
}

.cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a {
    width: fit-content;
    height: auto
}

    .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a .btnLearnMore {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out
    }

        .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a .btnLearnMore img {
            margin-left: 5px
        }

        .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a .btnLearnMore:hover {
            background-image: linear-gradient(to right,#44c7f4,#003e7b)
        }

            .cardHeaderSection .wrapperCardHeader .wrapBtnHeaderCardContent a .btnLearnMore:hover img {
                animation: arrowSwipe 2s linear infinite
            }

.cardBannerRecommend {
    position: relative
}

    .cardBannerRecommend .btnClosePopupBannerCard {
        position: absolute;
        top: 5px;
        right: 5px;
        background: 0 0;
        border: none;
        padding: 0;
        margin: 0
    }

        .cardBannerRecommend .btnClosePopupBannerCard img {
            width: 22px;
            height: auto
        }

.cardSliderSection {
    width: 100%;
    height: auto;
    /*padding-top: 30px;*/
    padding-bottom: 88px;
    background-color: #fff
}

@media (max-width:1281px) {
    .cardSliderSection {
        padding-bottom: 40px
    }
}

@media (max-width:992px) {
    .cardSliderSection {
        padding-top: 26px;
        padding-bottom: 0
    }
}

.cardSliderSection .breadcrumbSection {
    padding-top: 0;
    padding-bottom: 40px
}

@media (max-width:992px) {
    .cardSliderSection .breadcrumbSection {
        padding-bottom: 32px
    }
}

.cardSliderSection .wrapSliderCard {
    width: 100%;
    height: auto
}

    .cardSliderSection .wrapSliderCard h1 {
        padding-bottom: 16px
    }

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard h1 {
        text-align: center;
        padding-bottom: 22px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll {
    width: 100%;
    height: auto;
    margin-top: 38px;
    /*padding-bottom: 72px*/
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll {
        padding-bottom: 52px
    }
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll {
        padding-top: 22px;
        border-top: 1px solid #e7e7e7;
        margin-top: 40px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox {
    height: auto
}

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: flex-start
    }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend {
            width: 200px;
            height: 30px;
            background-color: #ffca32;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative
        }

            .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend h4 {
                text-align: center
            }

            .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend::before {
                content: "";
                width: 0;
                height: 0;
                background-color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                border-style: solid;
                border-width: 15px 0 15px 10px;
                border-color: #ffca32 #ffca32 #ffca32 #fff
            }

            .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend::after {
                content: "";
                width: 0;
                height: 0;
                background-color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                border-style: solid;
                border-width: 15px 10px 15px 0;
                border-color: #ffca32 #fff #ffca32 #fff
            }

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapImgCard {
        width: 100%;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapImgCard img {
            max-width: 100%;
            height: auto;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider {
        width: 100%;
        height: auto
    }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider h2 {
            color: #25447e;
            text-align: center
        }

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider h2 {
        font-size: 14px;
        line-height: 24px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail {
    width: 100%;
    height: auto;
    margin-top: 24px
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail {
        margin-top: 15px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul {
    margin: 0;
    padding: 0;
    height: 180px;
    overflow: hidden
}

@media (max-width:767px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul {
        height: auto
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul li {
    list-style: none;
    position: relative;
    color: #000;
    margin-bottom: 10px;
    padding-left: 24px
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul li {
        font-size: 12px;
        line-height: 150%;
        margin-bottom: 8px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail ul li::before {
    content: "";
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 100%;
    background-color: #25447e;
    position: absolute;
    top: 7px;
    left: 0
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail h6 {
    text-align: center
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail h6 {
        font-size: 12px;
        line-height: 21px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail h6 a {
    color: #25447e;
    text-decoration: underline
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard {
    width: 100%;
    height: 150px;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    background-color: #f2f2f2;
    margin-top: 24px
}

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard h3 {
        color: #25447e
    }

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard p {
        color: #000;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical
    }

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail .wrapDetailPromotionRegisterCard p {
        font-size: 12px;
        line-height: 21px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a {
    width: fit-content;
    height: auto
}

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a .btnRegisterCard {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        width: 100%;
        margin-top: 26px
    }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a .btnRegisterCard img {
            margin-left: 5px
        }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a .btnRegisterCard:hover {
            background-image: linear-gradient(to right,#44c7f4,#003e7b)
        }

            .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTextCardSlider .wrapTextCardSliderDetail a .btnRegisterCard:hover img {
                animation: arrowSwipe 2s linear infinite
            }

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox:hover .wrapImgCard img {
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -o-transform: translateY(-10px)
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox:hover .wrapImgCard img {
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-list {
    margin: 0 -17px
}

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-list .slick-track .slick-slide {
        margin: 0 17px
    }

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-next, .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-prev {
        z-index: 2;
        top: -21px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-prev {
    left: 24vw
}

@media (max-width:767px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-prev {
        left: 14vw
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-next {
    right: 24vw
}

@media (max-width:767px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-next {
        right: 14vw
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots {
    bottom: 0
}

@media (max-width:992px) {
    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots {
        bottom: auto;
        top: -34px
    }
}

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots li {
    width: 10px;
    height: 10px
}

    .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots li button {
        padding: 0
    }

        .cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots li button:before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #d0d0d0;
            border: none;
            border-radius: 100%;
            opacity: 1
        }

.cardSliderSection .wrapSliderCard .wrapSliderCardAll .slick-dots .slick-active button:before {
    background-color: #25447e
}

.cardSliderSection .wrapSliderCard .slick-dotted.slick-slider {
    margin-bottom: 0
}

.cardSliderSectionGray {
    background-color: #f8f8f8
}

    .cardSliderSectionGray .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend::before {
        background-color: #f8f8f8;
        border-color: #ffca32 #ffca32 #ffca32 #f8f8f8
    }

    .cardSliderSectionGray .wrapSliderCard .wrapSliderCardAll .wrapSliderCardBox .wrapTagRecommend .wrapInTagRecommend::after {
        background-color: #f8f8f8;
        border-color: #ffca32 #f8f8f8 #ffca32 #f8f8f8
    }

.cardWhyHaveSection {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 62px;
    background-color: #16306d;
    background-image: url(../images/bg/cardAll.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    position: relative;
    margin-top: 60px
}

@media (max-width:992px) {
    .cardWhyHaveSection {
        padding-top: 180px;
        background-image: url(../images/bg/cardAllTablet.jpg);
        background-size: 100% 100%;
        margin-top: 100px;
        padding-bottom: 42px
    }
}

@media (max-width:767px) {
    .cardWhyHaveSection {
        background-image: url(../images/bg/cardAllMobile.jpg);
        padding-top: 190px;
        padding-bottom: 68px
    }
}

.cardWhyHaveSection .wrapCardOnSection {
    width: auto;
    height: auto;
    position: absolute;
    top: -140px;
    right: 140px
}

@media (max-width:992px) {
    .cardWhyHaveSection .wrapCardOnSection {
        right: 50%;
        transform: translateX(50%);
        -ms-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -o-transform: translateX(50%)
    }
}

.cardWhyHaveSection .wrapCardOnSection img {
    max-width: 365px;
    height: auto;
    animation: cardAnimateBig 5s linear infinite
}

.cardWhyHaveSection h2 {
    color: #fff
}

@media (max-width:992px) {
    .cardWhyHaveSection h2 {
        text-align: center;
        width: 100%
    }
}

.cardWhyHaveSection .cardWhyHaveGrid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px 35px;
    grid-gap: 32px 35px;
    padding-top: 62px
}

@media (max-width:992px) {
    .cardWhyHaveSection .cardWhyHaveGrid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 25px;
        grid-gap: 32px 25px;
        padding-top: 46px
    }
}

@media (max-width:767px) {
    .cardWhyHaveSection .cardWhyHaveGrid {
        grid-template-columns: 1fr;
        gap: 20px;
        grid-gap: 20px;
        padding-top: 27px
    }
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox {
    width: 100%;
    height: auto
}

@media (max-width:992px) {
    .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox img {
    width: 70px;
    height: auto
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox h3 {
    margin-top: 22px
}

@media (max-width:992px) {
    .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox h3 {
        font-size: 16px
    }
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox p {
    margin-top: 5px
}

@media (max-width:992px) {
    .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox p {
        font-size: 14px;
        margin-top: 0
    }
}

.cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox a {
    color: #12aadf;
    margin-top: 10px
}

@media (max-width:992px) {
    .cardWhyHaveSection .cardWhyHaveGrid .cardWhyHaveGridBox a {
        font-size: 14px
    }
}

.bannerCardAllFormSection {
    width: 100%;
    height: 520px;
    background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(../images/bg/cardForm.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden
}

    .bannerCardAllFormSection .breadcrumbSection {
        padding-top: 0;
        padding-top: 30px;
        padding-bottom: 40px
    }

        .bannerCardAllFormSection .breadcrumbSection p {
            color: #fff
        }

            .bannerCardAllFormSection .breadcrumbSection p a {
                color: #fff
            }

@media (max-width:767px) {
    .bannerCardAllFormSection h1 {
        font-size: 22px;
        text-align: center
    }
}

.bannerCardAllFormSection .wrapBannerCardAllForm {
    width: 100%;
    height: auto
}

@media (max-width:1301px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm {
        max-width: 90%;
        margin: 0 auto
    }
}

.bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox {
    height: 200px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 15px;
    margin-top: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

    .bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 16px
    }

        .bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox .wrapBannerCardImgSlider {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center
        }

            .bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox .wrapBannerCardImgSlider img {
                max-width: 100%;
                height: auto
            }

@media (max-width:1025px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox .wrapBannerCardImgSlider img {
        max-width: 80%
    }
}

.bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBox .wrapInBannerCardAllFormBox h4 {
    color: #fff;
    text-align: center;
    margin-top: 10px
}

.bannerCardAllFormSection .wrapBannerCardAllForm .wrapBannerCardAllFormBoxActive {
    height: 200px;
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -o-transform: scale(1.15);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    border-color: #fff;
    background-color: rgba(37,68,126,.55)
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-slider .slick-disabled {
    opacity: .5
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-list {
    margin: 0 -17px;
    overflow: initial;
    overflow-x: hidden;
    height: 320px
}

@media (max-width:992px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .slick-list {
        overflow: visible;
        height: auto;
        margin: 0 17px;
        max-width: 50vw
    }
}

@media (max-width:767px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .slick-list {
        max-width: 100vw
    }
}

@media (max-width:992px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .slick-list .slick-track {
        overflow: auto;
        height: 270px
    }
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-list .slick-track .slick-slide {
    margin: 0 17px
}

@media (max-width:992px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .slick-list .slick-track .slick-slide {
        max-width: 50vw
    }
}

@media (max-width:767px) {
    .bannerCardAllFormSection .wrapBannerCardAllForm .slick-list .slick-track .slick-slide {
        max-width: 100vw
    }
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-next, .bannerCardAllFormSection .wrapBannerCardAllForm .slick-prev {
    width: 40px;
    height: 40px;
    top: 48%
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-prev {
    left: -80px
}

.bannerCardAllFormSection .wrapBannerCardAllForm .slick-next {
    right: -80px
}

.cardAllFormContentSection {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 90px
}

@media (max-width:992px) {
    .cardAllFormContentSection {
        padding-bottom: 65px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0 36px;
    grid-gap: 0 36px
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent {
        grid-template-columns: 1fr
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox {
    width: 100%;
    height: auto
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox {
        display: none
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapCardBigAllForm {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapCardBigAllForm {
        display: none
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapCardBigAllForm img {
    max-width: 100%;
    height: auto
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h3 {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 18px
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h3 {
        display: none
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .underlineSection {
    width: 100%;
    height: 1px;
    background-color: #e7e7e7
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h4 {
    color: #25447e;
    margin-top: 28px
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h4 {
        font-size: 34px
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox h4 {
        font-size: 22px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo {
    width: 100%;
    height: auto
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo {
        display: grid;
        /*grid-template-columns: 1fr 1fr;*/
        gap: 24px;
        grid-gap: 24px
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo {
        grid-template-columns: 1fr
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a {
    width: fit-content;
    height: auto;
    margin: 36px 0;
    display: block
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a {
        margin-bottom: 0
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a .wrapSidePromoBox {
    width: 100%;
    height: auto
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a .wrapSidePromoBox img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        overflow: hidden
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBox .wrapSidePromo a .wrapSidePromoBox p {
        color: #505050;
        margin-top: 16px
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxTabletMobile {
    display: none
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxTabletMobile {
        display: block
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister {
    width: 100%;
    height: auto
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister {
        padding-bottom: 80px;
        position: relative
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister {
        padding-bottom: 46px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .h3TopicCard {
    text-align: center;
    padding-bottom: 100px
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .h3TopicCard {
        font-size: 24px;
        line-height: 39px
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .h3TopicCard {
        font-size: 16px;
        line-height: 26px;
        padding-bottom: 70px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent {
    width: 100%;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer
}

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent {
        position: absolute;
        top: 70px;
        left: -35px;
        width: 100vw;
        border-bottom: 1px solid #e7e7e7
    }
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent {
        left: -22px;
        top: 40px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBox {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBox h3 {
        text-align: center;
        padding: 0
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBoxActive h3 {
    color: #25447e;
    font-weight: 700
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapTopicCardAllFormContent .wrapTopicCardAllFormBoxActive::after {
    content: "";
    width: 100%;
    height: 5px;
    background-color: #25447e;
    position: absolute;
    left: 0;
    bottom: 0
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain {
    width: 100%;
    height: auto
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox {
        width: 100%;
        height: auto;
        display: none;
        padding-top: 46px
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin-top: 24px;
            opacity: 1;
            max-height: 999999;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent h3 {
                margin-bottom: 15px
            }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard {
                display: grid;
                grid-template-columns: 110px 1fr;
                gap: 20px;
                /* gap: 26px; */
                /* grid-gap: 26px */
            }

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard {
        grid-template-columns: 1fr;
        gap: 0;
        grid-gap: 0
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm {
    width: 100%;
    height: auto;
    display: flex;
    gap: 20px;
    grid-gap: 20px;
    flex-wrap: wrap
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio {
        display: block;
        position: relative;
        padding-left: 40px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio {
            position: absolute;
            opacity: 0;
            cursor: pointer
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio {
            position: absolute;
            top: 2px;
            left: 0;
            width: 25px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #d0d0d0;
            border-radius: 100%;
            cursor: pointer
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio:checked ~ .checkmarkRadio {
            background-color: #fff
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio:after {
            content: "";
            position: absolute;
            display: none
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio:checked ~ .checkmarkRadio::after {
            display: block
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio:after {
            top: 3px;
            left: 3px;
            width: 17px;
            height: 17px;
            border-radius: 100%;
            background: #25447e
        }

@media (max-width:992px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p {
        font-size: 14px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm .list {
        width: 100%;
        height: auto
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm .option:hover {
        background-color: #25447e;
        color: #fff
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm::after {
        border: none;
        transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0);
        -o-transform: rotate(0);
        width: 12px;
        height: 7px;
        background-image: url(../images/icon/iconDropdownForm.svg);
        background-size: cover;
        background-position: center
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .selectForm.open:after {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        right: 16px
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom {
    width: 75%;
    margin: 0 auto
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom {
        width: 100%
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom {
    display: grid;
    grid-template-columns: 82px 2.2fr 170px;
    gap: 24px;
    grid-gap: 24px
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom {
        grid-template-columns: 1fr
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox {
    display: flex;
    justify-content: center;
    align-items: center
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox h3 {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: left
    }

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox h3 {
        text-align: center
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox .inputFieldCenter {
    text-align: center
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox img {
    max-width: 100%;
    height: auto
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideMobile {
    display: flex
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideMobile {
        display: none
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideDesktopTablet {
    display: none
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideDesktopTablet {
        display: flex
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    padding: 0 16px;
    box-shadow: none;
    outline: 0
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField:focus {
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputFieldWarning {
    border-color: #e01b1b
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputFieldWarning::placeholder {
        color: #e01b1b
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapGoogleChaphar {
    width: 100%;
    height: auto
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm {
    width: 100%;
    height: auto;
    margin-top: 34px
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox {
        display: block;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding-left: 30px;
        margin-bottom: 20px
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #828282;
            background-color: #fff
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark {
            background-color: #fff
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark:after {
            content: "";
            position: absolute;
            display: none
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark:after {
            display: block
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark:after {
            left: 2px;
            top: 2px;
            width: 14px;
            height: 14px;
            background-color: #25447e
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter {
            display: flex;
            align-items: center;
            gap: 16px;
            grid-gap: 16px
        }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter .wrapDetailFilterIcon {
                flex: 0 0 30px;
                display: flex;
                justify-content: center
            }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter img {
                max-width: 100%;
                filter: opacity(.6);
                margin-bottom: 4px
            }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p {
                color: #000
            }

                .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p a {
                    color: #000;
                    text-decoration: underline
                }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox:hover .inputCheckFilter ~ .checkmark {
            background-color: #fff
        }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: ce
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a {
        width: fit-content;
        height: auto;
        display: block;
        margin-top: 16px
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm {
            width: 170px;
            height: 40px;
            border: none;
            border-radius: 50px;
            color: #fff;
            background-image: linear-gradient(to right,#003e7b,#44c7f4);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            width: 265px
        }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm img {
                margin-left: 5px
            }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm:hover {
                background-image: linear-gradient(to right,#44c7f4,#003e7b)
            }

                .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm:hover img {
                    animation: arrowSwipe 2s linear infinite
                }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId {
    width: 100%;
    height: auto;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId {
        text-decoration: underline;
        text-align: center;
        cursor: pointer;
        width: fit-content
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId {
        width: 265px;
        height: 50px;
        border: 1px solid #d0d0d0;
        padding: 0 16px;
        text-align: center;
        margin-top: 16px;
        opacity: 0;
        box-shadow: none;
        outline: 0;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleIdActive {
        opacity: 1;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId:focus {
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapHideSectionBranch {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 36px;
    grid-gap: 22px 36px;
    margin-top: 22px
}

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent {
        grid-template-columns: 1fr;
        gap: 22px 44px;
        grid-gap: 22px 44px
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox {
    width: 100%;
    height: auto
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3 {
        margin-bottom: 7px
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField {
        width: 100%;
        height: 50px;
        border: 1px solid #d0d0d0;
        padding: 0 16px;
        box-shadow: none;
        outline: 0
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField:focus {
            border-color: #25447e;
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputFieldWarning {
        border-color: #e01b1b !important;
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputFieldWarning::placeholder {
            color: #e01b1b
        }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm {
        width: 100%;
        height: 50px;
        border: 1px solid #d0d0d0;
        display: flex;
        align-items: center;
        /*overflow: hidden;*/
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 349px;
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .list {
            width: 100%;
            height: auto
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .option:hover {
            background-color: #25447e;
            color: #fff
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm::after {
            border: none;
            transform: rotate(0);
            -ms-transform: rotate(0);
            -moz-transform: rotate(0);
            -webkit-transform: rotate(0);
            -o-transform: rotate(0);
            width: 12px;
            height: 7px;
            background-image: url(../images/icon/iconDropdownForm.svg);
            background-size: cover;
            background-position: center
        }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm.open:after {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            right: 16px
        }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .padFormContent {
    margin-bottom: 42px
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .padFormContentTop {
    margin-top: 32px
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    grid-gap: 36px
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister.classDisplay {
        display: inline-block;
    }

@media (max-width:767px) {
    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister {
        grid-template-columns: 1fr
    }
}

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox {
    width: 100%;
    height: auto
}

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox h3 {
        margin-bottom: 15px
    }

    .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox ul {
        padding: 0;
        margin: 0;
        margin-bottom: 24px
    }

        .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox ul li {
            list-style: none;
            position: relative;
            padding-left: 34px;
            margin: 12px 0
        }

            .cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBox .wrapContentRuleRegister .wrapContentRuleRegisterBox ul li::before {
                content: "•";
                position: absolute;
                top: 0;
                left: 10px
            }

.cardAllFormContentSection .wrapCardAllFormContent .wrapCardAllFormContentBoxRegister .wrapContentCardAllContentMain .wrapContentCardAllContentMainBoxActive {
    display: block
}

.filterPromotionContentSection {
    width: 100%;
    height: 70px;
    display: none;
    background-color: #fff;
    position: relative
}

@media (max-width:992px) {
    .filterPromotionContentSection {
        display: flex
    }
}

.filterPromotionContentSection .btnFilterPromotionTablet {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #25447e;
    background-color: #fff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    grid-gap: 12px;
    position: relative
}

    .filterPromotionContentSection .btnFilterPromotionTablet::after {
        content: "";
        width: 20px;
        height: 10px;
        background-image: url(../images/icon/iconDropdownForm.svg);
        background-position: 100%;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 14px;
        right: 14px;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.filterPromotionContentSection .btnFilterPromotionTabletActive::after {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.filterPromotionContentSection .wrapFilterPromotionContent {
    width: 100%;
    height: auto;
    position: absolute;
    top: 70px;
    background-color: #fff;
    max-width: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

    .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
        padding-bottom: 80px
    }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .titleTopicFilter {
            width: 100%;
            height: auto;
            border-bottom: 1px solid #d0d0d0;
            padding-bottom: 12px;
            position: relative
        }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .titleTopicFilter .btnResetFilter {
                width: auto;
                height: auto;
                padding: 0;
                margin: 0;
                border: none;
                background: 0 0;
                position: absolute;
                top: 2px;
                right: 0;
                color: #25447e;
                text-decoration: underline
            }

        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection {
            width: 100%;
            height: auto;
            padding-top: 12px
        }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection h4 {
                margin-bottom: 14px
            }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .btnResetFilter {
                width: auto;
                height: auto;
                padding: 0;
                margin: 0;
                border: none;
                background: 0 0;
                position: absolute;
                top: 12px;
                right: 22px;
                color: #25447e;
                text-decoration: underline
            }

            .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox {
                width: 100%;
                height: auto;
                border-top: 1px solid #d0d0d0;
                padding-top: 14px;
                margin-top: 32px;
                position: relative
            }

                .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox h4 {
                    margin-bottom: 20px
                }

                .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnResetButtonFilter {
                    width: auto;
                    height: auto;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: 0 0;
                    position: absolute;
                    top: 60px;
                    left: 50%;
                    transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -o-transform: translateX(-50%);
                    color: #25447e;
                    text-decoration: underline;
                    margin-top: 17px
                }

                .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnSubmitButtonFilter {
                    width: 170px;
                    height: 40px;
                    border: none;
                    border-radius: 50px;
                    color: #fff;
                    background-image: linear-gradient(to right,#003e7b,#44c7f4);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all 1s ease-in-out;
                    -ms-transition: all 1s ease-in-out;
                    -moz-transition: all 1s ease-in-out;
                    -webkit-transition: all 1s ease-in-out;
                    -o-transition: all 1s ease-in-out;
                    margin: 0 auto
                }

                    .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnSubmitButtonFilter img {
                        margin-left: 5px
                    }

                    .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnSubmitButtonFilter:hover {
                        background-image: linear-gradient(to right,#44c7f4,#003e7b)
                    }

                        .filterPromotionContentSection .wrapFilterPromotionContent .promotionContentFilter .promoFilterSection .anotherFilterBox .btnSubmitButtonFilter:hover img {
                            animation: arrowSwipe 2s linear infinite
                        }

.filterPromotionContentSection .wrapFilterPromotionContentActive {
    max-width: 999999px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.headerNoti {
    width: 100%;
    height: 40px;
    background-color: #25447e;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    margin-bottom: 20px
}

@media (max-width:767px) {
    .headerNoti {
        height: 50px;
        padding-right: 60px;
        padding-left: 10px;
        padding-top: 6px;
        padding-bottom: 6px
    }
}

.headerNoti h3 {
    color: #fff;
    text-align: center;
    padding-top: 8px
}

@media (max-width:767px) {
    .headerNoti h3 {
        text-align: left;
        line-height: 16px;
        font-size: 12px;
        padding-top: 3px
    }
}

.headerNoti h3 a {
    color: #fff;
    text-decoration: underline
}

.headerNoti .btnCloseNoti {
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 6px;
    right: 4px;
    background: 0 0;
    border: none
}

@media (max-width:767px) {
    .headerNoti .btnCloseNoti {
        top: 46%;
        right: 10px;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%)
    }
}

.headerNoti .btnCloseNoti img {
    width: 100%;
    height: auto
}

.headerHasNoti {
    top: 40px
}

@media (max-width:767px) {
    .headerHasNoti {
        top: 50px
    }
}

.headerNotiHide {
    display: none
}

.spaceHeaderWhiteMargin {
    padding-top: 120px
}

@media (max-width:767px) {
    .spaceHeaderWhiteMargin {
        padding-top: 130px
    }
}

.searchSection {
    width: 100%;
    height: auto;
    margin-top: 42px;
    padding-bottom: 200px
}

@media (max-width:1281px) {
    .searchSection {
        margin-top: 32px
    }
}

@media (max-width:992px) {
    .searchSection {
        margin-top: 12px
    }
}

.searchSection .wrapSearchSection {
    width: 100%;
    height: auto
}

    .searchSection .wrapSearchSection .wrapBreadCrumbSearch {
        width: 100%;
        height: auto
    }

@media (max-width:767px) {
    .searchSection .wrapSearchSection .wrapBreadCrumbSearch p {
        font-size: 12px
    }
}

.searchSection .wrapSearchSection .wrapBreadCrumbSearch p a {
    color: #505050
}

.searchSection .wrapSearchSection .wrapTextSearchBar {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2px
}

@media (max-width:767px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar {
        margin-top: 18px
    }
}

.searchSection .wrapSearchSection .wrapTextSearchBar h1 {
    color: #000
}

@media (max-width:992px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar h1 {
        font-size: 28px
    }
}

@media (max-width:767px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar h1 {
        font-size: 26px
    }
}

.searchSection .wrapSearchSection .wrapTextSearchBar form {
    width: fit-content;
    height: auto
}

@media (max-width:767px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar form {
        width: 100%
    }
}

.searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar {
    width: 578px;
    height: auto;
    margin-top: 30px;
    position: relative
}

@media (max-width:1281px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar {
        margin-top: 28px
    }
}

@media (max-width:992px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar {
        width: 455px;
        margin-top: 28px
    }
}

@media (max-width:767px) {
    .searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar {
        width: 100%;
        margin-top: 38px
    }
}

.searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar .searchField {
    width: 100%;
    height: 50px;
    outline: 0;
    box-shadow: none;
    border: 1px solid #d2d2d2;
    padding-left: 20px;
    padding-right: 50px;
    color: #000
}

    .searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar .searchField::placeholder {
        color: #828282
    }

.searchSection .wrapSearchSection .wrapTextSearchBar .wrapFieldSearchBar .btnSubmitSearch {
    width: 50px;
    height: 50px;
    background-color: #25447e;
    border: none;
    position: absolute;
    bottom: 0;
    right: 0
}

.searchSectionRmPad {
    padding-bottom: 0
}

.searchResultSection {
    width: 100%;
    height: auto;
    margin-top: 38px;
    padding-bottom: 200px
}

@media (max-width:992px) {
    .searchResultSection {
        margin-top: 28px
    }
}

@media (max-width:767px) {
    .searchResultSection {
        margin-top: 24px
    }
}

.searchResultSection .wrapBreadcrumbSearch {
    width: 100%;
    height: auto
}

    .searchResultSection .wrapBreadcrumbSearch p a {
        color: #505050
    }

.searchResultSection .searchResultAll {
    width: 100%;
    height: auto;
    padding-top: 42px
}

@media (max-width:992px) {
    .searchResultSection .searchResultAll {
        padding-top: 38px
    }
}

@media (max-width:767px) {
    .searchResultSection .searchResultAll {
        padding-top: 44px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox {
    width: 100%;
    height: auto;
    margin-bottom: 60px
}

@media (max-width:992px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox {
        margin-bottom: 64px
    }
}

@media (max-width:767px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox {
        margin-bottom: 46px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox h3 {
    margin-bottom: 8px
}

.searchResultSection .searchResultAll .wrapSearchResultBox p {
    color: #000;
    margin-bottom: 3px
}

@media (max-width:992px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox p {
        font-size: 14px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox a {
    color: #12aadf
}

@media (max-width:992px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox a {
        font-size: 14px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll {
    width: calc(100% + 10px);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    padding-top: 25px
}

@media (max-width:767px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll {
        padding-top: 10px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll a {
    width: fit-content;
    height: 35px;
    padding: 0 18px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    color: #505050;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:992px) {
    .searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll a {
        font-size: 14px
    }
}

.searchResultSection .searchResultAll .wrapSearchResultBox .wrapSearchResultTagAll a:hover {
    background-color: #25447e;
    color: #fff;
    border-color: #25447e;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.searchResultSection .paginationSearch {
    width: 100%;
    height: auto
}

    .searchResultSection .paginationSearch ul {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .searchResultSection .paginationSearch ul li {
            list-style: none;
            margin: 0 10px;
            color: #505050;
            cursor: pointer
        }

        .searchResultSection .paginationSearch ul .liPagination {
            width: 27px;
            height: 27px;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .searchResultSection .paginationSearch ul .liPaginationActive {
            background-color: #25447e;
            color: #fff;
            border-radius: 100%
        }

.bannerCardDetail {
    width: 100%;
    height: auto;
    background-color: #fff;
    position: relative;
    padding-bottom: 66px
}

@media (max-width:767px) {
    .bannerCardDetail {
        padding-bottom: 50px
    }
}

.bannerCardDetail .wrapBgTopBannerCardDetail {
    width: 100%;
    min-height: 300px;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/bg/bgCardDetail.svg)
}

@media (max-width:992px) {
    .bannerCardDetail .wrapBgTopBannerCardDetail {
        background-image: url(../images/bg/bgCardDetailTablet.svg)
    }
}

@media (max-width:767px) {
    .bannerCardDetail .wrapBgTopBannerCardDetail {
        background-image: url(../images/bg/bgCardDetailMobile.svg)
    }
}

.bannerCardDetail .wrapBannerCardDetail {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    padding-top: 22px
}

    .bannerCardDetail .wrapBannerCardDetail p {
        color: #fff
    }

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail p {
        font-size: 12px
    }
}

.bannerCardDetail .wrapBannerCardDetail p a {
    color: #fff
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc {
        width: 765px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column
    }

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc {
        width: 100%
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h1 {
    margin-top: 30px
}

@media (max-width:767px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h1 {
        margin-top: 46px
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc img {
    max-width: 100%;
    height: auto
}

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc img {
        max-width: 90%
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc h3 {
    text-align: center;
    margin-top: 15px
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    width: 265px;
    height: 40px;
    border-radius: 50px;
    margin-top: 36px
}

    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail img {
        margin-left: 5px
    }

@media (max-width:992px) {
    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail {
        margin-top: 30px
    }
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail img {
    margin-top: -3px;
    margin-left: 10px
}

.bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail:hover {
    background-image: linear-gradient(to right,#44c7f4,#003e7b)
}

    .bannerCardDetail .wrapBannerCardDetail .wrapBannerCardDesc .wrapInBannerCardDesc .btnRegisterDetail:hover img {
        animation: arrowSwipeDown 2s linear infinite
    }

.stickyTopicCardDetail {
    width: 100%;
    height: 60px;
    position: sticky;
    top: 80px;
    background-color: #fff;
    z-index: 20;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:767px) {
    .stickyTopicCardDetail {
        overflow-x: scroll
    }
}

.stickyTopicCardDetail ul {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:767px) {
    .stickyTopicCardDetail ul {
        width: 524px
    }
}

.stickyTopicCardDetail ul li {
    list-style: none;
    padding: 0 26px;
    color: #828282;
    height: 100%;
    display: block
}

@media (max-width:767px) {
    .stickyTopicCardDetail ul li {
        padding: 0 13px
    }
}

.stickyTopicCardDetail ul li a {
    color: #828282;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.stickyTopicCardDetail ul li .activeLiCradDetail {
    color: #25447e
}

    .stickyTopicCardDetail ul li .activeLiCradDetail::after {
        content: "";
        width: 100%;
        height: 5px;
        background-color: #25447e;
        position: absolute;
        bottom: 0;
        left: 0
    }

.stickyTopicCardDetail::-webkit-scrollbar {
    opacity: 0;
    display: none
}

.stickyTopicCardDetailActive {
    top: 120px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:767px) {
    .stickyTopicCardDetailActive {
        top: 130px
    }
}

.stickyCashCard {
    box-shadow: 0 4px 7px rgba(0,0,0,.07)
}

@media (max-width:767px) {
    .stickyCashCard ul {
        width: 700px
    }
}

@media (max-width:992px) {
    .stickyCashCard ul li {
        padding: 0 20px
    }
}

.creditDetailContentSection {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-top: 28px;
    padding-bottom: 58px
}

@media (max-width:1281px) {
    .creditDetailContentSection {
        padding-top: 70px
    }
}

@media (max-width:992px) {
    .creditDetailContentSection {
        padding-top: 38px;
        padding-bottom: 70px
    }
}

@media (max-width:767px) {
    .creditDetailContentSection {
        padding-top: 34px;
        padding-bottom: 72px
    }
}

.creditDetailContentSection .wrapCreditDetailContentSection {
    width: 100%;
    height: auto
}

    .creditDetailContentSection .wrapCreditDetailContentSection h3 {
        color: #25447e
    }

@media (max-width:992px) {
    .creditDetailContentSection .wrapCreditDetailContentSection h3 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection h3 {
        text-align: center;
        font-size: 22px
    }
}

.creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle {
    width: 100%;
    height: auto;
    padding-top: 8px
}

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 68px;
        grid-gap: 68px;
        margin-top: 72px
    }

@media (max-width:1281px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox {
        gap: 72px 42px;
        grid-gap: 72px 42px
    }
}

@media (max-width:992px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox {
        gap: 60px 24px;
        grid-gap: 60px 24px;
        margin-top: 60px
    }
}

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox {
        grid-template-columns: 1fr;
        gap: 32px;
        grid-gap: 32px
    }
}

.creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxImg {
    width: 100%;
    height: auto
}

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxImg img {
        width: 100%;
        height: auto
    }

.creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column
}

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText h4 {
        margin-bottom: 30px
    }

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText h4 {
        margin-bottom: 16px
    }
}

.creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText p {
    color: #505050;
    margin-bottom: 32px;
    line-height: 28px
}

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText p {
        margin-bottom: 24px
    }
}

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a {
        width: fit-content;
        height: auto;
        margin: 0 auto;
        display: block
    }
}

.creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    width: 265px
}

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard img {
        margin-left: 5px
    }

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard img {
        margin-top: -2px;
        margin-left: 14px
    }

    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard:hover {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox .wrapCreditDetailContentBoxText a .btnMoreDetailCard:hover img {
            animation: arrowSwipeDown 2s linear infinite
        }

@media (max-width:992px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox:first-child {
        margin-top: 50px
    }
}

@media (max-width:767px) {
    .creditDetailContentSection .wrapCreditDetailContentSection .wrapCrediaDetailContentArticle .wrapCrediaDetailContentBox:first-child {
        margin-top: 32px
    }
}

.creditDetailContentGrid {
    width: 100%;
    height: auto;
    padding: 48px 0 58px;
    background-color: #25447e
}

@media (max-width:992px) {
    .creditDetailContentGrid {
        padding: 52px 0 42px
    }
}

@media (max-width:767px) {
    .creditDetailContentGrid {
        padding: 26px 0 50px
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 0 20px
}

@media (max-width:992px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid {
        gap: 0 12px
    }
}

@media (max-width:767px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid {
        grid-template-columns: 1fr
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox {
    width: 100%;
    height: auto;
    padding: 30px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column
}

    .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox img {
        margin-bottom: 28px
    }

    .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox h4 {
        color: #fff;
        margin-bottom: 18px;
        text-align: center
    }

@media (max-width:992px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox h4 {
        font-size: 16px
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox p {
    color: #fff;
    line-height: 28px;
    text-align: center;
    margin-bottom: 22px
}

@media (max-width:992px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox p {
        font-size: 14px
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox a {
    color: #12aadf;
    position: relative
}

@media (max-width:992px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox a {
        font-size: 14px
    }
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox a span {
    width: 0;
    height: 2px;
    background-color: #12aadf;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox a:hover span {
    width: 100%;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.creditDetailContentGrid .wrapCreditDetailContentGrid .sectionLine {
    width: 1px;
    height: 100%;
    background-color: #fff
}

@media (max-width:767px) {
    .creditDetailContentGrid .wrapCreditDetailContentGrid .sectionLine {
        width: 100%;
        height: 1px
    }
}

.creditDetailContentGrid .wrapBtnRegisterCardDetail {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 34px
}

    .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        width: 265px
    }

        .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail img {
            margin-left: 5px
        }

@media (max-width:992px) {
    .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
        height: 45px
    }
}

@media (max-width:767px) {
    .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
        height: 35px
    }
}

.creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail img {
    margin-top: -2px;
    margin-left: 14px
}

.creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail:hover {
    background-image: linear-gradient(to right,#44c7f4,#003e7b)
}

    .creditDetailContentGrid .wrapBtnRegisterCardDetail .btnRegisterCardDetail:hover img {
        animation: arrowSwipeDown 2s linear infinite
    }

.creditDetailContent2Section {
    width: 100%;
    height: auto;
    padding: 52px 0 75px;
    background-color: #265eac
}

@media (max-width:992px) {
    .creditDetailContent2Section {
        padding: 54px 0 60px
    }
}

@media (max-width:767px) {
    .creditDetailContent2Section {
        padding: 36px 0 48px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle {
    width: 100%;
    height: auto
}

    .creditDetailContent2Section .wrapCreditDetailContentArticle h3 {
        color: #fff;
        margin-bottom: 30px
    }

@media (max-width:992px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle h3 {
        font-size: 22px;
        line-height: 140%;
        margin-bottom: 32px
    }
}

@media (max-width:767px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle h3 {
        text-align: center;
        margin-bottom: 30px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 45px 40px;
    grid-gap: 45px 40px
}

@media (max-width:992px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 65px;
        grid-gap: 40px 65px
    }
}

@media (max-width:767px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid {
        grid-template-columns: 1fr;
        gap: 48px;
        grid-gap: 48px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px
}

    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox img {
        width: 24px;
        height: auto;
        margin-top: 2px
    }

    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText {
        width: 100%;
        height: auto
    }

        .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText h4 {
            margin-bottom: 5px
        }

@media (max-width:992px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText h4 {
        font-size: 16px;
        margin-bottom: 8px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText p {
    color: #fff;
    line-height: 28px;
    margin-bottom: 10px
}

@media (max-width:992px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText p {
        font-size: 14px;
        margin-bottom: 14px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText a {
    color: #12aadf;
    position: relative
}

@media (max-width:992px) {
    .creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText a {
        font-size: 14px
    }
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText a span {
    width: 0;
    height: 2px;
    background-color: #12aadf;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.creditDetailContent2Section .wrapCreditDetailContentArticle .wrapCreditDetailContentGrid .wrapCreditDetailContentGridBox .wrapCreditDetailContentGridBoxText a:hover span {
    width: 100%;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.creditDetailContent2Section .wrapBtnRegisterCardDetail {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 70px
}

@media (max-width:992px) {
    .creditDetailContent2Section .wrapBtnRegisterCardDetail {
        padding-top: 54px
    }
}

.creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    width: 265px
}

    .creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail img {
        margin-left: 5px
    }

@media (max-width:992px) {
    .creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
        height: 45px
    }
}

@media (max-width:767px) {
    .creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail {
        height: 35px
    }
}

.creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail img {
    margin-top: -2px;
    margin-left: 14px
}

.creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail:hover {
    background-image: linear-gradient(to right,#44c7f4,#003e7b)
}

    .creditDetailContent2Section .wrapBtnRegisterCardDetail .btnRegisterCardDetail:hover img {
        animation: arrowSwipeDown 2s linear infinite
    }

.wrapCreditCardDetailRuleRegisterSection {
    width: 100%;
    height: auto
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic {
        width: 100%;
        height: 80px;
        background-color: #25447e
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic {
        height: 65px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid {
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-columns: 1fr 15px;
    cursor: pointer
}

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid {
        height: 65px
    }
}

@media (max-width:767px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid {
        grid-template-columns: 1fr 15px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapTopicRuleCardDetail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapTopicRuleCardDetail h2 {
        color: #fff
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapTopicRuleCardDetail h2 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapTopicRuleCardDetail h2 {
        font-size: 22px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail {
    width: 100%;
    height: 100%;
    position: relative
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        cursor: pointer
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol {
        width: 15px;
        height: 15px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol .bar {
    background-color: #fff;
    position: absolute
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol .bar:nth-child(1) {
        width: 20px;
        height: 2px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol .bar:nth-child(1) {
        width: 15px;
        height: 2px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol .bar:nth-child(2) {
    width: 2px;
    height: 20px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    opacity: 1
}

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbol .bar:nth-child(2) {
        width: 2px;
        height: 15px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbolActive {
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTopic .wrapCreditCardDetailRuleRegisterTopicGrid .wrapSymbolRuleCardDetail .plusSymbolActive .bar:nth-child(2) {
        opacity: 0;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter {
    width: 100%;
    height: auto;
    max-height: 0;
    transform: scaleY(0);
    -ms-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform-origin: top;
    transition: all .5s ease;
    -ms-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    overflow: hidden
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText {
        width: 100%;
        height: auto;
        background-color: #fff
    }

        .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText {
            width: 100%;
            height: auto;
            padding: 46px 0 76px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 35px;
            grid-gap: 35px
        }

            .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText.classDisplay {
                display: inline-block;
            }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText {
        padding: 52px 0 55px;
        gap: 24px;
        grid-gap: 24px
    }
}

@media (max-width:767px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText {
        grid-template-columns: 1fr;
        gap: 34px;
        grid-gap: 34px;
        padding: 20px 0 26px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox {
    width: 100%;
    height: auto
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h3 {
        margin-bottom: 10px
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h3 {
        margin-bottom: 20px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h4 {
    margin-bottom: 2px
}

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox h4 {
        margin-bottom: 10px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    margin-bottom: 24px
}

    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul li {
        color: #505050;
        line-height: 28px;
        margin-bottom: 12px;
        list-style: none;
        padding-left: 34px;
        position: relative
    }

@media (max-width:992px) {
    .wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul li {
        margin-bottom: 2px
    }
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuter .wrapCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterText .wrapInCreditCardDetailRuleRegisterTextBox ul li:before {
    content: "•";
    position: absolute;
    top: 0;
    left: 14px
}

.wrapCreditCardDetailRuleRegisterSection .wrapCreditCardDetailRuleRegisterTextOuterActive {
    max-height: 99999px;
    transform: scaleY(1);
    -ms-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    transition: all .5s ease;
    -ms-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease
}

.cardDetailRegisterSection {
    width: 100%;
    height: auto;
    padding: 44px 0 72px;
    background-color: #f4f4f4
}

@media (max-width:992px) {
    .cardDetailRegisterSection {
        padding: 40px 0 42px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection {
        padding: 24px 0 42px
    }
}

.cardDetailRegisterSection h2 {
    color: #25447e;
    margin-bottom: 10px;
    margin-bottom: 16px
}

@media (max-width:992px) {
    .cardDetailRegisterSection h2 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection h2 {
        text-align: center;
        font-size: 22px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail {
    width: 100%;
    height: auto;
    padding: 58px 0 74px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail {
        padding: 24px 0 30px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail {
        grid-template-columns: 1fr;
        padding: 42px 0
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox h3 {
        margin-bottom: 28px
    }

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox h3 {
        font-size: 18px;
        margin-bottom: 9px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox h3 {
        margin-bottom: 0
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox p {
    color: #25447e;
    line-height: 28px
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox p {
        font-size: 14px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .imgBannerCardDetail {
    width: 100%;
    height: auto
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .imgBannerCardDetail {
        margin: 18px 0 20px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .imgBannerCardDetailHide {
    display: none
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .imgBannerCardDetailHide {
        display: block
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .wrapBannerDownloadApp {
    width: fit-content;
    height: auto;
    margin-top: 30px
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .wrapBannerDownloadApp {
        margin-top: 18px
    }
}

.cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .wrapBannerDownloadApp a {
    width: fit-content;
    height: auto;
    margin: 0 7px
}

    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBox .wrapBannerDownloadApp a img {
        max-width: 100%;
        height: auto
    }

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapBannerPromoteCardDetail .wrapBannerPromoteCardDetailBoxHide {
        display: none
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection {
    width: 100%;
    height: auto;
    padding-top: 54px
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection {
        padding-top: 32px
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection h3 {
    margin-bottom: 30px
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection h3 {
        margin-bottom: 22px
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection p {
    color: #505050
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection p {
        width: 564px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection p {
        width: 100%
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent {
    width: 714px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 24px;
    opacity: 1;
    max-height: 999999;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent {
        width: 100%
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent h3 {
    margin-bottom: 15px
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 26px;
    grid-gap: 26px
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard {
        grid-template-columns: 1fr;
        gap: 0;
        grid-gap: 0
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio {
        display: block;
        position: relative;
        padding-left: 40px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-bottom: 20px;
        margin-right: 42px;
        overflow: hidden
    }

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio {
        margin: 0;
        max-width: 50%
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio {
        margin: 0;
        max-width: 100%;
        margin-bottom: 20px
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio {
    position: absolute;
    top: 2px;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 100%;
    cursor: pointer
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio:checked ~ .checkmarkRadio {
    background-color: #fff
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio:after {
    content: "";
    position: absolute;
    display: none
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .inputCheckFilterRadio:checked ~ .checkmarkRadio::after {
    display: block
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .checkmarkRadio:after {
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    background: #25447e
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio .wrapDetailFilterRadio p {
        font-size: 14px
    }
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .howToGetCard .wrapLabelRadioForm .wrapLabelFilterRadio:last-child {
        margin-bottom: 0
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm .list {
        width: 100%;
        height: auto
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm .option:hover {
        background-color: #25447e;
        color: #fff
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm::after {
        border: none;
        transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0);
        -o-transform: rotate(0);
        width: 12px;
        height: 7px;
        background-image: url(../images/icon/iconDropdownForm.svg);
        background-size: cover;
        background-position: center
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .selectForm.open:after {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        right: 16px
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom {
    width: 550px;
    margin: 0 auto
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom {
        width: 100%
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom {
    display: grid;
    grid-template-columns: 82px 2.2fr 170px;
    gap: 24px;
    grid-gap: 24px
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom {
        grid-template-columns: 1fr
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox {
    display: flex;
    justify-content: center;
    align-items: center
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox h3 {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: left
    }

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox h3 {
        text-align: center
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox .inputFieldCenter {
    text-align: center
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBox img {
    max-width: 100%;
    height: auto
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideMobile {
    display: flex
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideMobile {
        display: none
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideDesktopTablet {
    display: none
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .wrapContentFormAllBottomBoxHideDesktopTablet {
        display: flex
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    padding: 0 16px;
    box-shadow: none;
    outline: 0
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputField:focus {
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputFieldWarning {
    border-color: #e01b1b
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapInContentFormAllBottom .inputFieldWarning::placeholder {
        color: #e01b1b
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm {
    width: 100%;
    height: auto;
    margin-top: 34px
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox {
        display: block;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding-left: 30px;
        margin-bottom: 20px
    }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #828282;
            background-color: #fff
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark {
            background-color: #fff
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark:after {
            content: "";
            position: absolute;
            display: none
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .inputCheckFilter:checked ~ .checkmark:after {
            display: block
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .checkmark:after {
            left: 2px;
            top: 2px;
            width: 14px;
            height: 14px;
            background-color: #25447e
        }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter {
            display: flex;
            align-items: center;
            gap: 16px;
            grid-gap: 16px
        }

            .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter .wrapDetailFilterIcon {
                flex: 0 0 30px;
                display: flex;
                justify-content: center
            }

            .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter img {
                max-width: 100%;
                filter: opacity(.6);
                margin-bottom: 4px
            }

            .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p {
                color: #000
            }

                .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox .wrapDetailFilter p a {
                    color: #000;
                    text-decoration: underline
                }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapLabelForm .wrapLabelFilterCheckbox:hover .inputCheckFilter ~ .checkmark {
            background-color: #fff
        }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: ce
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a {
        width: fit-content;
        height: auto;
        display: block;
        margin-top: 16px
    }

        .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm {
            width: 170px;
            height: 40px;
            border: none;
            border-radius: 50px;
            color: #fff;
            background-image: linear-gradient(to right,#003e7b,#44c7f4);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            width: 265px
        }

            .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm img {
                margin-left: 5px
            }

            .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm:hover {
                background-image: linear-gradient(to right,#44c7f4,#003e7b)
            }

                .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnRegisterForm a .btnRegisterForm:hover img {
                    animation: arrowSwipe 2s linear infinite
                }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId {
    width: 100%;
    height: auto;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .saleId {
        text-decoration: underline;
        text-align: center;
        cursor: pointer;
        width: fit-content
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId {
        width: 265px;
        height: 50px;
        border: 1px solid #d0d0d0;
        padding: 0 16px;
        text-align: center;
        margin-top: 16px;
        opacity: 0;
        box-shadow: none;
        outline: 0;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleIdActive {
        opacity: 1;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapSingleFormAllContent .wrapContentFormAllBottom .wrapBtnSaleId .inputFieldSaleId:focus {
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapHideSectionBranch {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    grid-gap: 36px;
    margin-top: 24px
}

@media (max-width:992px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent {
        gap: 30px 24px;
        grid-gap: 30px 24px
    }
}

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent {
        grid-template-columns: 1fr;
        gap: 12px;
        grid-gap: 12px
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox {
    width: 100%;
    height: auto
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3 {
        margin-bottom: 15px
    }

@media (max-width:767px) {
    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox h3 {
        margin-bottom: 0
    }
}

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    padding: 0 16px;
    box-shadow: none;
    outline: 0
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputField:focus {
        border-color: #25447e;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputFieldWarning {
    border-color: #e01b1b !important
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .inputFieldWarning::placeholder {
        color: #e01b1b
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center
}

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .list {
        width: 100%;
        height: auto
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm .option:hover {
        background-color: #25447e;
        color: #fff
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm::after {
        border: none;
        transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0);
        -o-transform: rotate(0);
        width: 12px;
        height: 7px;
        background-image: url(../images/icon/iconDropdownForm.svg);
        background-size: cover;
        background-position: center
    }

    .cardDetailRegisterSection .wrapFormCardDetailSection .wrapDuoFormAllContent .wrapDuoFormAllContentBox .selectForm.open:after {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        right: 16px
    }

.cardDetailRegisterSection .wrapFormCardDetailSection .padFormContent {
    margin-bottom: 42px
}

.cardDetailRegisterSection .wrapFormCardDetailSection .padFormContentTop {
    margin-top: 32px
}

.cardDetailRegisterSection .wrapFormCardDetailSection .padFormContentTopB {
    margin: 0 auto;
    margin-top: 32px
}

.cardDetailPromotionRegisterSection {
    width: 100%;
    height: auto;
    padding: 42px 0 22px;
    background-color: #fff
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection {
        padding: 48px 0 82px
    }
}

.cardDetailPromotionRegisterSection h2 {
    color: #25447e;
    margin-bottom: 10px
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection h2 {
        font-size: 24px;
        margin-bottom: 0
    }
}

@media (max-width:767px) {
    .cardDetailPromotionRegisterSection h2 {
        font-size: 22px;
        margin-bottom: 0
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister {
    width: 100%;
    height: auto
}

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox {
        width: 100%;
        height: auto;
        margin-top: 27px
    }

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox {
        margin-top: 30px
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    grid-gap: 34px
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox {
        gap: 36px;
        grid-gap: 36px
    }
}

@media (max-width:767px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox {
        grid-template-columns: 1fr
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner img {
        width: 100%;
        height: auto
    }

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner h3 {
        margin-bottom: 7px;
        text-align: center
    }

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner h3 {
        margin-bottom: 0
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner p {
    color: #25447e;
    text-align: center;
    margin-bottom: 15px
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner p {
        margin-bottom: 12px
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner .pSubPromoRegister {
    color: #000;
    margin-bottom: 26px
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail {
    width: 170px;
    height: 40px;
    border: none;
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right,#003e7b,#44c7f4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    width: 216px
}

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail img {
        margin-left: 5px
    }

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail {
        width: 204px;
        height: 40px
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail img {
    width: 7px;
    height: auto
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail:hover {
    background-image: linear-gradient(to right,#44c7f4,#003e7b)
}

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .wrapSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBox .wrapInSliderCardDetailPromotionRegisterBoxInner a .btnViewDetail:hover img {
        animation: arrowSwipe 2s linear infinite
    }

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots {
/*    bottom: 30px;
    text-align: right;
    transform: translateX(-22%);
    -ms-transform: translateX(-22%);
    -moz-transform: translateX(-22%);
    -webkit-transform: translateX(-22%);
    -o-transform: translateX(-22%)*/
}

@media (max-width:1025px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots {
      /*  bottom: -24px;
        transform: translateX(-19%);
        -ms-transform: translateX(-19%);
        -moz-transform: translateX(-19%);
        -webkit-transform: translateX(-19%);
        -o-transform: translateX(-19%)*/
    }
}

@media (max-width:992px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots {
/*        bottom: -24px;
        transform: translateX(-19%);
        -ms-transform: translateX(-19%);
        -moz-transform: translateX(-19%);
        -webkit-transform: translateX(-19%);
        -o-transform: translateX(-19%)*/
    }
}

@media (max-width:767px) {
    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots {
        transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -o-transform: translateX(-40%);
        bottom: -50px;
        text-align: right;
    }
}

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots li {
    width: 10px;
    height: 10px
}

    .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots li button {
        padding: 0
    }

        .cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots li button:before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #d0d0d0;
            border: none;
            border-radius: 100%;
            opacity: 1
        }

.cardDetailPromotionRegisterSection .wrapSliderCardDetailPromotionRegister .slick-dots .slick-active button:before {
    background-color: #25447e
}

.cardDetailPromotionRegisterSection .slick-dotted.slick-slider {
    margin-bottom: 0
}

.cashCardPromotionRegisterSection {
    padding-bottom: 90px
}

.faqSection {
    width: 100%;
    height: auto;
    padding: 120px 0 74px;
    background-color: #f4f4f4
}

@media (max-width:992px) {
    .faqSection {
        padding: 34px 0 94px
    }
}

@media (max-width:767px) {
    .faqSection {
        padding: 26px 0 62px
    }
}

.faqSection h3 {
    color: #25447e
}

@media (max-width:992px) {
    .faqSection h3 {
        font-size: 24px
    }
}

@media (max-width:767px) {
    .faqSection h3 {
        text-align: center;
        font-size: 22px
    }
}

.faqSection .faqSectionSection {
    width: 100%;
    height: auto;
    padding-top: 38px
}

@media (max-width:992px) {
    .faqSection .faqSectionSection {
        padding-top: 30px
    }
}

@media (max-width:767px) {
    .faqSection .faqSectionSection {
        padding-top: 20px
    }
}

.faqSection .faqSectionSection .faqSectionBox {
    width: 100%;
    height: auto;
    max-height: 112px;
    overflow: hidden
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox {
        max-height: 72px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic {
    width: 100%;
    height: 112px;
    border-bottom: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic {
        height: 72px
    }
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic {
        padding-right: 35px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic h4 {
    margin-left: 20px
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic h4 {
        margin-left: 12px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic p {
    margin-left: 22px
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic p {
        margin-left: 14px;
        padding-right: 30px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq {
        width: 15px;
        height: 15px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq .bar {
    background-color: #25447e;
    position: absolute
}

    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq .bar:nth-child(1) {
        width: 20px;
        height: 2px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq .bar:nth-child(1) {
        width: 15px;
        height: 2px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq .bar:nth-child(2) {
    width: 2px;
    height: 20px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    opacity: 1
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic .wrapPlusFaq .bar:nth-child(2) {
        width: 2px;
        height: 15px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic:hover {
    background-color: #fff;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic:hover {
        background-color: #f4f4f4
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionTopic::before {
    content: "";
    width: 7px;
    height: calc(100% + 1px);
    background-color: #25447e;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionTopic::before {
        width: 5px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionText {
    width: 100%;
    height: auto;
    padding: 32px 0 44px;
    padding-left: 28px;
    padding-right: 100px;
    background-color: #fff;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 24px;
    grid-gap: 24px
}

@media (max-width:1025px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionText {
        padding: 24px 0;
        padding-left: 25px;
        padding-right: 10px
    }
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionText {
        padding: 16px 14px;
        grid-template-columns: 24px 1fr;
        gap: 12px;
        grid-gap: 12px
    }
}

.faqSection .faqSectionSection .faqSectionBox .faqSectionText p {
    line-height: 130%;
    margin-top: 12px
}

@media (max-width:767px) {
    .faqSection .faqSectionSection .faqSectionBox .faqSectionText p {
        margin-top: 6px
    }
}

.faqSection .faqSectionSection .faqSectionBoxActive {
    max-height: 999999px
}

    .faqSection .faqSectionSection .faqSectionBoxActive .faqSectionTopic {
        background-color: #fff;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out
    }

        .faqSection .faqSectionSection .faqSectionBoxActive .faqSectionTopic .wrapPlusFaq {
            transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out
        }

            .faqSection .faqSectionSection .faqSectionBoxActive .faqSectionTopic .wrapPlusFaq .bar:nth-child(2) {
                opacity: 0;
                transition: all .3s ease-in-out;
                -ms-transition: all .3s ease-in-out;
                -moz-transition: all .3s ease-in-out;
                -webkit-transition: all .3s ease-in-out;
                -o-transition: all .3s ease-in-out
            }

.faqSection .wrapBtnViewMoreQuestion {
    width: 100%;
    height: auto;
    padding: 68px 0 0;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width:767px) {
    .faqSection .wrapBtnViewMoreQuestion {
        padding: 65px 0 0
    }
}

.faqSection .wrapBtnViewMoreQuestion a {
    width: fit-content;
    height: auto
}

    .faqSection .wrapBtnViewMoreQuestion a .btnViewMoreQuestion {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        width: 265px
    }

        .faqSection .wrapBtnViewMoreQuestion a .btnViewMoreQuestion img {
            margin-left: 5px
        }

        .faqSection .wrapBtnViewMoreQuestion a .btnViewMoreQuestion:hover {
            background-image: linear-gradient(to right,#44c7f4,#003e7b)
        }

            .faqSection .wrapBtnViewMoreQuestion a .btnViewMoreQuestion:hover img {
                animation: arrowSwipe 2s linear infinite
            }

.popupCreditDetailSection {
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: none
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection {
            width: 100%;
            height: auto;
            max-height: 80vh;
            border: none;
            border-radius: 20px;
            padding: 77px 80px 46px;
            background-color: #fff;
            position: relative;
            overflow: hidden;
            overflow-y: scroll
        }

@media (max-width:992px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection {
        padding: 77px 60px 46px
    }
}

@media (max-width:767px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection {
        padding: 77px 26px 46px
    }
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .btnClosePopup {
    width: 22px;
    height: 22px;
    border: none;
    background: 0 0;
    outline: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 26px;
    right: 22px;
    z-index: 10
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .btnClosePopup img {
        width: 100%;
        height: auto
    }

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText {
    width: 100%;
    height: auto
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h2 {
        text-align: center;
        margin-bottom: 10px
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h4 {
        text-align: center;
        width: 500px;
        height: auto;
        margin: 0 auto;
        margin-bottom: 32px;
        line-height: 150%
    }

@media (max-width:767px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText h4 {
        width: 100%
    }
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox {
    width: 100%;
    height: auto;
    margin-bottom: 32px
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox h3 {
        margin-bottom: 20px
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox p {
        line-height: 150%
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox img {
        max-width: 100%;
        height: auto;
        margin: 30px auto;
        display: block
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox h5 {
        color: #7f7f7f
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ul {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 10px 0
    }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ul li {
            list-style: none;
            line-height: 150%;
            position: relative;
            padding-left: 18px
        }

            .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ul li::before {
                content: "";
                width: 6px;
                height: 6px;
                background-color: #828282;
                border-radius: 100%;
                position: absolute;
                top: 10px;
                left: 0
            }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ol {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 10px 0;
        padding-left: 20px
    }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox ol li {
            line-height: 150%;
            position: relative;
            padding-left: 2px
        }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox {
        width: 100%;
        height: auto
    }

@media (max-width:767px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox {
        overflow: hidden;
        overflow-x: scroll
    }
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox {
    width: 100%;
    height: auto;
    margin-top: 30px
}

@media (max-width:767px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox {
        width: 768px
    }
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr th {
    height: 50px;
    background-color: #25447e;
    color: #fff;
    text-align: center;
    border-right: 1px solid #fff
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr th:last-child {
        border: none
    }

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td {
    border: 1px solid #d0d0d0
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td p {
        line-height: 150%;
        color: #505050;
        padding: 10px 20px
    }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td img {
        margin: 10px auto
    }

@media (max-width:992px) {
    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox .tablePopupBox tr td img {
        width: 80%
    }
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .wrapTablePopupBox::-webkit-scrollbar {
    display: none;
    opacity: 0
}

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup {
    width: fit-content;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 30px
}

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup .btnPopup {
        width: 170px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background-image: linear-gradient(to right,#003e7b,#44c7f4);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup .btnPopup img {
            margin-left: 5px
        }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup .btnPopup img {
            margin: 0;
            margin-left: 5px
        }

    .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup:hover .btnPopup {
        background-image: linear-gradient(to right,#44c7f4,#003e7b)
    }

        .popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection .wrapInPopupCreditDetailText .wrapInPopipCreditDetailTextBox .aLinkPopup:hover .btnPopup img {
            animation: arrowSwipe 2s linear infinite
        }

.popupCreditDetailSection .wrapPopupCreditDetailSection .wrapInPopupCreditDetailSection::-webkit-scrollbar {
    display: none;
    opacity: 0
}

.popupCreditDetailSectionShow {
    display: block
}

.menuHamberger {
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #f8f8f8;
    position: fixed;
    top: 80px;
    left: 100vw;
    z-index: 15;
    transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    display: none
}

@media (max-width:992px) {
    .menuHamberger {
        display: block
    }
}

.menuHamberger .wrapMenuHamberger {
    width: 100%;
    height: 100%
}

    .menuHamberger .wrapMenuHamberger ul {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        grid-gap: 0;
        padding: 0;
        margin: 0
    }

        .menuHamberger .wrapMenuHamberger ul li {
            list-style: none;
            padding: 14px 28px;
            border-bottom: 1px solid #d0d0d0
        }

            .menuHamberger .wrapMenuHamberger ul li a {
                margin: 0
            }

            .menuHamberger .wrapMenuHamberger ul li:last-child {
                border-color: #f8f8f8
            }

    .menuHamberger .wrapMenuHamberger a {
        width: calc(100% - 70px);
        height: auto;
        display: block;
        margin: 0 auto;
        margin-top: 70px
    }

        .menuHamberger .wrapMenuHamberger a .btnRegistCardSmallMenu {
            width: 100%;
            height: 40px;
            background-color: #25447e;
            border: none;
            border-radius: 100px;
            color: #fff
        }

.menuHambergerNoti {
    height: calc(100vh - 120px);
    top: 120px
}

.menuHambergerActive {
    left: 0;
    transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out
}

.headerMenuHamActive {
    background-color: #f8f8f8
}

.error404Section {
    width: 100%;
    height: auto
}

    .error404Section .wrapError404Section {
        width: 100%;
        height: calc(95vh - 80px);
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

        .error404Section .wrapError404Section h1 {
            font-family: "Krungsri Simple";
            font-size: 144px;
            font-weight: 700;
            color: rgba(24,50,98,.4);
            text-align: center
        }

@media (max-width:992px) {
    .error404Section .wrapError404Section h1 {
        font-size: 96px
    }
}

@media (max-width:767px) {
    .error404Section .wrapError404Section h1 {
        font-size: 48px
    }
}

.error404Section .wrapError404Section h2 {
    font-family: "Krungsri Simple";
    font-size: 48px;
    font-weight: 500;
    color: rgba(24,50,98,.4);
    text-align: center;
    text-transform: uppercase
}

@media (max-width:992px) {
    .error404Section .wrapError404Section h2 {
        font-size: 36px
    }
}

@media (max-width:767px) {
    .error404Section .wrapError404Section h2 {
        font-size: 18px
    }
}