:root{--Color_Affi_Main_100: #ff5722;--Color_Articlel_Main_100: #64c6d3;--Color_Black_90: #323136;--Color_Black_Main_100: #000000;--Color_Gradient_01-1: #d00514;--Color_Gradient_01-2: #ff5823;--Color_Gray_100: #575757;--Color_Gray_30: #efefef;--Color_Gray_60: #d8d8d8;--Color_Gray_70: #adadaf;--Color_Gray_80: #979797;--Color_Gray_90: #8c8c8c;--Color_Gray_Main_20: #f6f6f6;--Color_Green_100: #38c171;--Color_Mall_Main_100: #ff7f8b;--Color_Orange_100: #ff5f00;--Color_Pink_100: #fa4c5f;--Color_Promo_Main_100: #f09035;--Color_Red_80: #d7717a;--Color_Red_Dark_100: #9f172b;--Color_Red_Light_10: #fcf6f7;--Color_Red_Light_20: #f9ebec;--Color_Red_Main_100: #bf202f;--Color_White_Main_100: #ffffff;--Color_Yellow_100: #f6af00;--PUNPRO_PRIMARY_500: #bf202f;--PUNPRO_600: #991a26;--FONT_PRIMARY_500: #000000;--FONT_150: #686868;--FONT_50: #858585;--FONT_LIGHT: #ffffff;--STROKE_PRIMARY_500: #ebebeb;--STROKE_150: #f3f3f3;--STROKE_50: #f9f9f9;--BACKGROUND_BASE_BG_LIGHT: #ffffff;--BACKGROUND_BASE_BG_GREY_PRIMARY_500: #e1e1e1;--BACKGROUND_BASE_BG_GREY_150: #f9f9f9;--BACKGROUND_BASE_BG_GREY_50: #fcfcfc;--BG_ICON_PRIMARY_500: #fcf6f7;--BG_ICON_150: #fdf8f9;--BG_ICON_50: #fefbfc;--ELEMENTS_BLACK_PRIMARY_500: #000000;--ELEMENTS_BLACK_150: #686868;--ELEMENTS_BLACK_50: #858585;--ELEMENTS_PRIMARY_PRIMARY_500: #bf202f;--ELEMENTS_PRIMARY_150: #e5a6ac;--ELEMENTS_PRIMARY_50: #f9e9ea;--ELEMENTS_GREEN_PRIMARY_500: #3ac922;--ELEMENTS_GREEN_150: #c4efbd;--ELEMENTS_GREEN_50: #ebfae9;--ELEMENTS_YELLOW_PRIMARY_500: #febc2e;--ELEMENTS_YELLOW_150: #ffebc0;--ELEMENTS_YELLOW_50: #fff8ea;--ELEMENTS_RED_PRIMARY_500: #ff3030;--ELEMENTS_RED_150: #ffc1c1;--ELEMENTS_RED_50: #ffeaea;--ELEMENTS_BLUE_PRIMARY_500: #007aff;--ELEMENTS_BLUE_150: #b2d7ff;--ELEMENTS_BLUE_50: #e5f2ff;--ELEMENTS_WHITE_PRIMARY_500: #ffffff;--ELEMENTS_YELLOW_PRIMARY_500: #febc2e;--TAGS_ARTICLE: #64c6d3;--TAGS_PRO_ONLINE: #ff5324;--TAGS_SUGGEST_PRO: #ec8e36}

.db-helvethaicamon-x-h1-reg{font-size:53px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:56px}.db-helvethaicamon-x-h1-med{font-size:53px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:56px}.db-helvethaicamon-x-h1-bd{font-size:53px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:56px}.db-helvethaicamon-x-h2-reg{font-size:45px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:54px}.db-helvethaicamon-x-h2-med{font-size:45px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:54px}.db-helvethaicamon-x-h2-bd{font-size:45px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:54px}.db-helvethaicamon-x-h3-reg{font-size:36px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:43px}.db-helvethaicamon-x-h3-med{font-size:36px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:43px}.db-helvethaicamon-x-h3-bd{font-size:36px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:43px}.db-helvethaicamon-x-h4-reg{font-size:32px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:38px}.db-helvethaicamon-x-h4-med{font-size:32px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:38px}.db-helvethaicamon-x-h4-bd{font-size:32px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:38px}.db-helvethaicamon-x-subtitle-reg{font-size:24px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:28px}.db-helvethaicamon-x-subtitle-med{font-size:24px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:28px}.db-helvethaicamon-x-subtitle-bd{font-size:24px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:28px}.db-helvethaicamon-x-body-reg{font-size:22px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:26px}.db-helvethaicamon-x-body-med{font-size:22px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:26px}.db-helvethaicamon-x-body-bd{font-size:22px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:26px}.db-helvethaicamon-x-body-decoration{font-size:22px;text-decoration:line-through;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:26px}.db-helvethaicamon-x-body-2-reg{font-size:18px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:22px}.db-helvethaicamon-x-body-2-med{font-size:18px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:22px}.db-helvethaicamon-x-body-2-bd{font-size:18px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:22px}.db-helvethaicamon-x-body-2-decoration{font-size:18px;text-decoration:line-through;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:22px}.db-helvethaicamon-x-caption-reg{font-size:16px;font-family:DBHevethaicaRegx400;font-weight:400;letter-spacing:0px;line-height:20px}.db-helvethaicamon-x-caption-med{font-size:16px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:20px}.db-helvethaicamon-x-caption-bd{font-size:16px;font-family:DBHevethaicaRegx400;letter-spacing:0px;line-height:20px}.sarabun-h1-reg{font-size:40px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:52px}.sarabun-h1-med{font-size:40px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:52px}.sarabun-h1-bd{font-size:40px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:52px}.sarabun-h2-reg{font-size:32px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:42px}.sarabun-h2-med{font-size:32px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:42px}.sarabun-h2-bd{font-size:32px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:42px}.sarabun-h3-reg{font-size:24px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:32px}.sarabun-h3-med{font-size:24px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:32px}.sarabun-h3-bd{font-size:24px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:32px}.sarabun-h4-reg{font-size:20px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:26px}.sarabun-h4-med{font-size:20px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:26px}.sarabun-h4-bd{font-size:20px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:26px}.sarabun-subtitle-reg{font-size:18px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:24px}.sarabun-subtitle-med{font-size:18px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:24px}.sarabun-subtitle-bd{font-size:18px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:24px}.sarabun-body-1-reg{font-size:16px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:22px}.sarabun-body-1-med{font-size:16px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:22px}.sarabun-body-1-bd{font-size:16px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:22px}.sarabun-body-1-decoration{font-size:16px;text-decoration:line-through;font-family:Inter;font-weight:400;letter-spacing:0em;line-height:22px}.sarabun-body-2-reg{font-size:14px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:18px}.sarabun-body-2-med{font-size:14px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:18px}.sarabun-body-2-bd{font-size:14px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:18px}.sarabun-body-2-decoration{font-size:14px;text-decoration:line-through;font-family:Inter;font-weight:400;letter-spacing:0em;line-height:18px}.sarabun-caption-reg{font-size:12px;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:16px}.sarabun-caption-med{font-size:12px;font-family:Sarabun;font-weight:600;letter-spacing:0px;line-height:16px}.sarabun-caption-bd{font-size:12px;font-family:Sarabun;font-weight:700;letter-spacing:0px;line-height:16px}.sarabun-caption-decoration{font-size:12px;text-decoration:line-through;font-family:Sarabun;font-weight:400;letter-spacing:0px;line-height:16px}

:root{--space0: 0;--space1: 4;--space2: 8;--space3: 12;--space4: 16;--space5: 20;--space6: 24;--space7: 28;--space8: 32;--space9: 36;--space10: 40;--space11: 44;--space12: 48;--space13: 56;--space14: 60;--space15: 64;--space16: 68;--space17: 80;--space18: 96}.px-space-0{padding-left:calc(var(--space0) * 1px) !important;padding-right:calc(var(--space0) * 1px) !important}.px-space-1{padding-left:calc(var(--space1) * 1px) !important;padding-right:calc(var(--space1) * 1px) !important}.px-space-2{padding-left:calc(var(--space2) * 1px) !important;padding-right:calc(var(--space2) * 1px) !important}.px-space-3{padding-left:calc(var(--space3) * 1px) !important;padding-right:calc(var(--space3) * 1px) !important}.px-space-4{padding-left:calc(var(--space4) * 1px) !important;padding-right:calc(var(--space4) * 1px) !important}.px-space-5{padding-left:calc(var(--space5) * 1px) !important;padding-right:calc(var(--space5) * 1px) !important}.px-space-6{padding-left:calc(var(--space6) * 1px) !important;padding-right:calc(var(--space6) * 1px) !important}.px-space-7{padding-left:calc(var(--space7) * 1px) !important;padding-right:calc(var(--space7) * 1px) !important}.px-space-8{padding-left:calc(var(--space8) * 1px) !important;padding-right:calc(var(--space8) * 1px) !important}.px-space-9{padding-left:calc(var(--space9) * 1px) !important;padding-right:calc(var(--space9) * 1px) !important}.px-space-10{padding-left:calc(var(--space10) * 1px) !important;padding-right:calc(var(--space10) * 1px) !important}.px-space-11{padding-left:calc(var(--space11) * 1px) !important;padding-right:calc(var(--space11) * 1px) !important}.px-space-12{padding-left:calc(var(--space12) * 1px) !important;padding-right:calc(var(--space12) * 1px) !important}.px-space-13{padding-left:calc(var(--space13) * 1px) !important;padding-right:calc(var(--space13) * 1px) !important}.px-space-14{padding-left:calc(var(--space14) * 1px) !important;padding-right:calc(var(--space14) * 1px) !important}.px-space-15{padding-left:calc(var(--space15) * 1px) !important;padding-right:calc(var(--space15) * 1px) !important}.px-space-16{padding-left:calc(var(--space16) * 1px) !important;padding-right:calc(var(--space16) * 1px) !important}.px-space-17{padding-left:calc(var(--space17) * 1px) !important;padding-right:calc(var(--space17) * 1px) !important}.px-space-18{padding-left:calc(var(--space18) * 1px) !important;padding-right:calc(var(--space18) * 1px) !important}.py-space-0{padding-top:calc(var(--space0) * 1px) !important;padding-bottom:calc(var(--space0) * 1px) !important}.py-space-1{padding-top:calc(var(--space1) * 1px) !important;padding-bottom:calc(var(--space1) * 1px) !important}.py-space-2{padding-top:calc(var(--space2) * 1px) !important;padding-bottom:calc(var(--space2) * 1px) !important}.py-space-3{padding-top:calc(var(--space3) * 1px) !important;padding-bottom:calc(var(--space3) * 1px) !important}.py-space-4{padding-top:calc(var(--space4) * 1px) !important;padding-bottom:calc(var(--space4) * 1px) !important}.py-space-5{padding-top:calc(var(--space5) * 1px) !important;padding-bottom:calc(var(--space5) * 1px) !important}.py-space-6{padding-top:calc(var(--space6) * 1px) !important;padding-bottom:calc(var(--space6) * 1px) !important}.py-space-7{padding-top:calc(var(--space7) * 1px) !important;padding-bottom:calc(var(--space7) * 1px) !important}.py-space-8{padding-top:calc(var(--space8) * 1px) !important;padding-bottom:calc(var(--space8) * 1px) !important}.py-space-9{padding-top:calc(var(--space9) * 1px) !important;padding-bottom:calc(var(--space9) * 1px) !important}.py-space-10{padding-top:calc(var(--space10) * 1px) !important;padding-bottom:calc(var(--space10) * 1px) !important}.py-space-11{padding-top:calc(var(--space11) * 1px) !important;padding-bottom:calc(var(--space11) * 1px) !important}.py-space-12{padding-top:calc(var(--space12) * 1px) !important;padding-bottom:calc(var(--space12) * 1px) !important}.py-space-13{padding-top:calc(var(--space13) * 1px) !important;padding-bottom:calc(var(--space13) * 1px) !important}.py-space-14{padding-top:calc(var(--space14) * 1px) !important;padding-bottom:calc(var(--space14) * 1px) !important}.py-space-15{padding-top:calc(var(--space15) * 1px) !important;padding-bottom:calc(var(--space15) * 1px) !important}.py-space-16{padding-top:calc(var(--space16) * 1px) !important;padding-bottom:calc(var(--space16) * 1px) !important}.py-space-17{padding-top:calc(var(--space17) * 1px) !important;padding-bottom:calc(var(--space17) * 1px) !important}.py-space-18{padding-top:calc(var(--space18) * 1px) !important;padding-bottom:calc(var(--space18) * 1px) !important}.pt-space-0{padding-top:calc(var(--space0) * 1px) !important}.pt-space-1{padding-top:calc(var(--space1) * 1px) !important}.pt-space-2{padding-top:calc(var(--space2) * 1px) !important}.pt-space-3{padding-top:calc(var(--space3) * 1px) !important}.pt-space-4{padding-top:calc(var(--space4) * 1px) !important}.pt-space-5{padding-top:calc(var(--space5) * 1px) !important}.pt-space-6{padding-top:calc(var(--space6) * 1px) !important}.pt-space-7{padding-top:calc(var(--space7) * 1px) !important}.pt-space-8{padding-top:calc(var(--space8) * 1px) !important}.pt-space-9{padding-top:calc(var(--space9) * 1px) !important}.pt-space-10{padding-top:calc(var(--space10) * 1px) !important}.pt-space-11{padding-top:calc(var(--space11) * 1px) !important}.pt-space-12{padding-top:calc(var(--space12) * 1px) !important}.pt-space-13{padding-top:calc(var(--space13) * 1px) !important}.pt-space-14{padding-top:calc(var(--space14) * 1px) !important}.pt-space-15{padding-top:calc(var(--space15) * 1px) !important}.pt-space-16{padding-top:calc(var(--space16) * 1px) !important}.pt-space-17{padding-top:calc(var(--space17) * 1px) !important}.pt-space-18{padding-top:calc(var(--space18) * 1px) !important}.pb-space-0{padding-bottom:calc(var(--space0) * 1px) !important}.pb-space-1{padding-bottom:calc(var(--space1) * 1px) !important}.pb-space-2{padding-bottom:calc(var(--space2) * 1px) !important}.pb-space-3{padding-bottom:calc(var(--space3) * 1px) !important}.pb-space-4{padding-bottom:calc(var(--space4) * 1px) !important}.pb-space-5{padding-bottom:calc(var(--space5) * 1px) !important}.pb-space-6{padding-bottom:calc(var(--space6) * 1px) !important}.pb-space-7{padding-bottom:calc(var(--space7) * 1px) !important}.pb-space-8{padding-bottom:calc(var(--space8) * 1px) !important}.pb-space-9{padding-bottom:calc(var(--space9) * 1px) !important}.pb-space-10{padding-bottom:calc(var(--space10) * 1px) !important}.pb-space-11{padding-bottom:calc(var(--space11) * 1px) !important}.pb-space-12{padding-bottom:calc(var(--space12) * 1px) !important}.pb-space-13{padding-bottom:calc(var(--space13) * 1px) !important}.pb-space-14{padding-bottom:calc(var(--space14) * 1px) !important}.pb-space-15{padding-bottom:calc(var(--space15) * 1px) !important}.pb-space-16{padding-bottom:calc(var(--space16) * 1px) !important}.pb-space-17{padding-bottom:calc(var(--space17) * 1px) !important}.pb-space-18{padding-bottom:calc(var(--space18) * 1px) !important}.pl-space-0{padding-left:calc(var(--space0) * 1px) !important}.pl-space-1{padding-left:calc(var(--space1) * 1px) !important}.pl-space-2{padding-left:calc(var(--space2) * 1px) !important}.pl-space-3{padding-left:calc(var(--space3) * 1px) !important}.pl-space-4{padding-left:calc(var(--space4) * 1px) !important}.pl-space-5{padding-left:calc(var(--space5) * 1px) !important}.pl-space-6{padding-left:calc(var(--space6) * 1px) !important}.pl-space-7{padding-left:calc(var(--space7) * 1px) !important}.pl-space-8{padding-left:calc(var(--space8) * 1px) !important}.pl-space-9{padding-left:calc(var(--space9) * 1px) !important}.pl-space-10{padding-left:calc(var(--space10) * 1px) !important}.pl-space-11{padding-left:calc(var(--space11) * 1px) !important}.pl-space-12{padding-left:calc(var(--space12) * 1px) !important}.pl-space-13{padding-left:calc(var(--space13) * 1px) !important}.pl-space-14{padding-left:calc(var(--space14) * 1px) !important}.pl-space-15{padding-left:calc(var(--space15) * 1px) !important}.pl-space-16{padding-left:calc(var(--space16) * 1px) !important}.pl-space-17{padding-left:calc(var(--space17) * 1px) !important}.pl-space-18{padding-left:calc(var(--space18) * 1px) !important}.pr-space-0{padding-right:calc(var(--space0) * 1px) !important}.pr-space-1{padding-right:calc(var(--space1) * 1px) !important}.pr-space-2{padding-right:calc(var(--space2) * 1px) !important}.pr-space-3{padding-right:calc(var(--space3) * 1px) !important}.pr-space-4{padding-right:calc(var(--space4) * 1px) !important}.pr-space-5{padding-right:calc(var(--space5) * 1px) !important}.pr-space-6{padding-right:calc(var(--space6) * 1px) !important}.pr-space-7{padding-right:calc(var(--space7) * 1px) !important}.pr-space-8{padding-right:calc(var(--space8) * 1px) !important}.pr-space-9{padding-right:calc(var(--space9) * 1px) !important}.pr-space-10{padding-right:calc(var(--space10) * 1px) !important}.pr-space-11{padding-right:calc(var(--space11) * 1px) !important}.pr-space-12{padding-right:calc(var(--space12) * 1px) !important}.pr-space-13{padding-right:calc(var(--space13) * 1px) !important}.pr-space-14{padding-right:calc(var(--space14) * 1px) !important}.pr-space-15{padding-right:calc(var(--space15) * 1px) !important}.pr-space-16{padding-right:calc(var(--space16) * 1px) !important}.pr-space-17{padding-right:calc(var(--space17) * 1px) !important}.pr-space-18{padding-right:calc(var(--space18) * 1px) !important}.mx-space-0{margin-left:calc(var(--space0) * 1px) !important;margin-right:calc(var(--space0) * 1px) !important}.mx-space-1{margin-left:calc(var(--space1) * 1px) !important;margin-right:calc(var(--space1) * 1px) !important}.mx-space-2{margin-left:calc(var(--space2) * 1px) !important;margin-right:calc(var(--space2) * 1px) !important}.mx-space-3{margin-left:calc(var(--space3) * 1px) !important;margin-right:calc(var(--space3) * 1px) !important}.mx-space-4{margin-left:calc(var(--space4) * 1px) !important;margin-right:calc(var(--space4) * 1px) !important}.mx-space-5{margin-left:calc(var(--space5) * 1px) !important;margin-right:calc(var(--space5) * 1px) !important}.mx-space-6{margin-left:calc(var(--space6) * 1px) !important;margin-right:calc(var(--space6) * 1px) !important}.mx-space-7{margin-left:calc(var(--space7) * 1px) !important;margin-right:calc(var(--space7) * 1px) !important}.mx-space-8{margin-left:calc(var(--space8) * 1px) !important;margin-right:calc(var(--space8) * 1px) !important}.mx-space-9{margin-left:calc(var(--space9) * 1px) !important;margin-right:calc(var(--space9) * 1px) !important}.mx-space-10{margin-left:calc(var(--space10) * 1px) !important;margin-right:calc(var(--space10) * 1px) !important}.mx-space-11{margin-left:calc(var(--space11) * 1px) !important;margin-right:calc(var(--space11) * 1px) !important}.mx-space-12{margin-left:calc(var(--space12) * 1px) !important;margin-right:calc(var(--space12) * 1px) !important}.mx-space-13{margin-left:calc(var(--space13) * 1px) !important;margin-right:calc(var(--space13) * 1px) !important}.mx-space-14{margin-left:calc(var(--space14) * 1px) !important;margin-right:calc(var(--space14) * 1px) !important}.mx-space-15{margin-left:calc(var(--space15) * 1px) !important;margin-right:calc(var(--space15) * 1px) !important}.mx-space-16{margin-left:calc(var(--space16) * 1px) !important;margin-right:calc(var(--space16) * 1px) !important}.mx-space-17{margin-left:calc(var(--space17) * 1px) !important;margin-right:calc(var(--space17) * 1px) !important}.mx-space-18{margin-left:calc(var(--space18) * 1px) !important;margin-right:calc(var(--space18) * 1px) !important}.my-space-0{margin-top:calc(var(--space0) * 1px) !important;margin-bottom:calc(var(--space0) * 1px) !important}.my-space-1{margin-top:calc(var(--space1) * 1px) !important;margin-bottom:calc(var(--space1) * 1px) !important}.my-space-2{margin-top:calc(var(--space2) * 1px) !important;margin-bottom:calc(var(--space2) * 1px) !important}.my-space-3{margin-top:calc(var(--space3) * 1px) !important;margin-bottom:calc(var(--space3) * 1px) !important}.my-space-4{margin-top:calc(var(--space4) * 1px) !important;margin-bottom:calc(var(--space4) * 1px) !important}.my-space-5{margin-top:calc(var(--space5) * 1px) !important;margin-bottom:calc(var(--space5) * 1px) !important}.my-space-6{margin-top:calc(var(--space6) * 1px) !important;margin-bottom:calc(var(--space6) * 1px) !important}.my-space-7{margin-top:calc(var(--space7) * 1px) !important;margin-bottom:calc(var(--space7) * 1px) !important}.my-space-8{margin-top:calc(var(--space8) * 1px) !important;margin-bottom:calc(var(--space8) * 1px) !important}.my-space-9{margin-top:calc(var(--space9) * 1px) !important;margin-bottom:calc(var(--space9) * 1px) !important}.my-space-10{margin-top:calc(var(--space10) * 1px) !important;margin-bottom:calc(var(--space10) * 1px) !important}.my-space-11{margin-top:calc(var(--space11) * 1px) !important;margin-bottom:calc(var(--space11) * 1px) !important}.my-space-12{margin-top:calc(var(--space12) * 1px) !important;margin-bottom:calc(var(--space12) * 1px) !important}.my-space-13{margin-top:calc(var(--space13) * 1px) !important;margin-bottom:calc(var(--space13) * 1px) !important}.my-space-14{margin-top:calc(var(--space14) * 1px) !important;margin-bottom:calc(var(--space14) * 1px) !important}.my-space-15{margin-top:calc(var(--space15) * 1px) !important;margin-bottom:calc(var(--space15) * 1px) !important}.my-space-16{margin-top:calc(var(--space16) * 1px) !important;margin-bottom:calc(var(--space16) * 1px) !important}.my-space-17{margin-top:calc(var(--space17) * 1px) !important;margin-bottom:calc(var(--space17) * 1px) !important}.my-space-18{margin-top:calc(var(--space18) * 1px) !important;margin-bottom:calc(var(--space18) * 1px) !important}.mt-space-0{margin-top:calc(var(--space0) * 1px) !important}.mt-space-1{margin-top:calc(var(--space1) * 1px) !important}.mt-space-2{margin-top:calc(var(--space2) * 1px) !important}.mt-space-3{margin-top:calc(var(--space3) * 1px) !important}.mt-space-4{margin-top:calc(var(--space4) * 1px) !important}.mt-space-5{margin-top:calc(var(--space5) * 1px) !important}.mt-space-6{margin-top:calc(var(--space6) * 1px) !important}.mt-space-7{margin-top:calc(var(--space7) * 1px) !important}.mt-space-8{margin-top:calc(var(--space8) * 1px) !important}.mt-space-9{margin-top:calc(var(--space9) * 1px) !important}.mt-space-10{margin-top:calc(var(--space10) * 1px) !important}.mt-space-11{margin-top:calc(var(--space11) * 1px) !important}.mt-space-12{margin-top:calc(var(--space12) * 1px) !important}.mt-space-13{margin-top:calc(var(--space13) * 1px) !important}.mt-space-14{margin-top:calc(var(--space14) * 1px) !important}.mt-space-15{margin-top:calc(var(--space15) * 1px) !important}.mt-space-16{margin-top:calc(var(--space16) * 1px) !important}.mt-space-17{margin-top:calc(var(--space17) * 1px) !important}.mt-space-18{margin-top:calc(var(--space18) * 1px) !important}.mb-space-0{margin-bottom:calc(var(--space0) * 1px) !important}.mb-space-1{margin-bottom:calc(var(--space1) * 1px) !important}.mb-space-2{margin-bottom:calc(var(--space2) * 1px) !important}.mb-space-3{margin-bottom:calc(var(--space3) * 1px) !important}.mb-space-4{margin-bottom:calc(var(--space4) * 1px) !important}.mb-space-5{margin-bottom:calc(var(--space5) * 1px) !important}.mb-space-6{margin-bottom:calc(var(--space6) * 1px) !important}.mb-space-7{margin-bottom:calc(var(--space7) * 1px) !important}.mb-space-8{margin-bottom:calc(var(--space8) * 1px) !important}.mb-space-9{margin-bottom:calc(var(--space9) * 1px) !important}.mb-space-10{margin-bottom:calc(var(--space10) * 1px) !important}.mb-space-11{margin-bottom:calc(var(--space11) * 1px) !important}.mb-space-12{margin-bottom:calc(var(--space12) * 1px) !important}.mb-space-13{margin-bottom:calc(var(--space13) * 1px) !important}.mb-space-14{margin-bottom:calc(var(--space14) * 1px) !important}.mb-space-15{margin-bottom:calc(var(--space15) * 1px) !important}.mb-space-16{margin-bottom:calc(var(--space16) * 1px) !important}.mb-space-17{margin-bottom:calc(var(--space17) * 1px) !important}.mb-space-18{margin-bottom:calc(var(--space18) * 1px) !important}.ml-space-0{margin-left:calc(var(--space0) * 1px) !important}.ml-space-1{margin-left:calc(var(--space1) * 1px) !important}.ml-space-2{margin-left:calc(var(--space2) * 1px) !important}.ml-space-3{margin-left:calc(var(--space3) * 1px) !important}.ml-space-4{margin-left:calc(var(--space4) * 1px) !important}.ml-space-5{margin-left:calc(var(--space5) * 1px) !important}.ml-space-6{margin-left:calc(var(--space6) * 1px) !important}.ml-space-7{margin-left:calc(var(--space7) * 1px) !important}.ml-space-8{margin-left:calc(var(--space8) * 1px) !important}.ml-space-9{margin-left:calc(var(--space9) * 1px) !important}.ml-space-10{margin-left:calc(var(--space10) * 1px) !important}.ml-space-11{margin-left:calc(var(--space11) * 1px) !important}.ml-space-12{margin-left:calc(var(--space12) * 1px) !important}.ml-space-13{margin-left:calc(var(--space13) * 1px) !important}.ml-space-14{margin-left:calc(var(--space14) * 1px) !important}.ml-space-15{margin-left:calc(var(--space15) * 1px) !important}.ml-space-16{margin-left:calc(var(--space16) * 1px) !important}.ml-space-17{margin-left:calc(var(--space17) * 1px) !important}.ml-space-18{margin-left:calc(var(--space18) * 1px) !important}.mr-space-0{margin-right:calc(var(--space0) * 1px) !important}.mr-space-1{margin-right:calc(var(--space1) * 1px) !important}.mr-space-2{margin-right:calc(var(--space2) * 1px) !important}.mr-space-3{margin-right:calc(var(--space3) * 1px) !important}.mr-space-4{margin-right:calc(var(--space4) * 1px) !important}.mr-space-5{margin-right:calc(var(--space5) * 1px) !important}.mr-space-6{margin-right:calc(var(--space6) * 1px) !important}.mr-space-7{margin-right:calc(var(--space7) * 1px) !important}.mr-space-8{margin-right:calc(var(--space8) * 1px) !important}.mr-space-9{margin-right:calc(var(--space9) * 1px) !important}.mr-space-10{margin-right:calc(var(--space10) * 1px) !important}.mr-space-11{margin-right:calc(var(--space11) * 1px) !important}.mr-space-12{margin-right:calc(var(--space12) * 1px) !important}.mr-space-13{margin-right:calc(var(--space13) * 1px) !important}.mr-space-14{margin-right:calc(var(--space14) * 1px) !important}.mr-space-15{margin-right:calc(var(--space15) * 1px) !important}.mr-space-16{margin-right:calc(var(--space16) * 1px) !important}.mr-space-17{margin-right:calc(var(--space17) * 1px) !important}.mr-space-18{margin-right:calc(var(--space18) * 1px) !important}

.siwper-slide-custom-pagination>.swiper-pagination-bullet{width:9px;height:9px}.siwper-slide-custom-pagination>.swiper-pagination-bullet.swiper-pagination-bullet-active{width:12px !important;height:12px !important;background-color:var(--ELEMENTS_BLACK_PRIMARY_500) !important}.siwper-slide-custom-pagination.siwper-pagination-article-homepage>.swiper-pagination-bullet{background-color:var(--BACKGROUND_BASE_BG_GREY_PRIMARY_500) !important}.siwper-slide-custom-pagination.siwper-pagination-article-homepage>.swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:var(--ELEMENTS_WHITE_PRIMARY_500) !important}.vertical-nav{position:sticky;inset-block-start:0px;block-size:100dvh;transition-property:inline-size, min-inline-size, margin-inline-start, inset-inline-start;transition-duration:300ms;transition-timing-function:ease-in-out}.vertical-nav.vertical-nav-breakpoint-reached{position:fixed;block-size:100%;inset-block-start:0px;inset-inline-start:-375px;margin:0px}.vertical-nav.vertical-nav-breakpoint-reached.vertical-nav-toggled{inset-inline-start:0px}



#red-bar-1{background-image:url(https://s3-ap-southeast-1.amazonaws.com/asset.punpro.com/static/bg/575x151/Red-Bar-1.png);background-size:cover;background-repeat:round}

.pac-container{z-index:10001}

.form-control.is-valid,.was-validated .form-control:valid{border-color:#495057;background-image:none}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#495057}.partner-validated .has-invalid{border-radius:4px;border:1px solid #dc3545 !important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;background-repeat:no-repeat;background-position:right calc(0.375em + 0.1875rem) center;background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.partner-validated .d-flex.justify-content-center.has-invalid{padding-right:calc(1.5em + 0.75rem);margin-right:calc((1.5em + 0.75rem) * -1)}.partner-validated .d-flex.justify-content-center.has-invalid .form-group{margin-bottom:0px}



@media (max-width: 768px){.text-head{font-size:30px;color:#545454}.text-desc{font-size:12px;color:#545454}.container-privileges{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:center;width:100%;height:auto}.privileges-item{width:100%;height:auto;padding:10px;background-color:#fff;margin:10px;border-radius:2px}.privileges-header{font-size:22px;text-align:center;color:#bf202f}.privileges-desc{font-size:14px;text-align:center;color:#000}.ribbon-grey{height:71px;background:url(/static/img/paycard/ribbon-gray.png);background-repeat:no-repeat;background-size:100% 50%;background-position:center bottom;margin-bottom:35px}.pp-logo-on-ribbon-grey{position:absolute;width:70px;height:70px;top:20px;left:calc(50% - 35px)}.be-our-top-fan{padding-top:51px;padding-bottom:30px;margin-top:-55px;margin-left:6px;margin-right:4px}.be-our-top-fan img{width:90%}.btn-register-top-fan{font-size:20px;background-color:#bf202f}.block-success{width:90%;min-height:250px;margin:0 auto}.ribbon-yellow{margin-top:50px;width:100%}.pp-logo-on-ribbon{width:110px;height:110px;top:25px;left:calc(50% - 55px)}.channel-item{position:relative;padding:10px;border-radius:10px;width:240px;height:110px;margin:10px 0px;box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.2) !important}.channel-item img{left:20px}.select-channel{height:20px;width:20px;background-color:#fff;border-radius:3px;display:inline-block;border:2px solid #c4c4c4;left:20px}}@media (min-width: 769px) and (max-width: 991px){.text-head{font-size:45px;color:#545454}.text-desc{font-size:18px;color:#545454}.container-privileges{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:center;width:100%;height:640px}.privileges-item{width:200px;height:270px;padding:10px;background-color:#fff;margin:10px;border-radius:2px}.privileges-header{font-size:22px;text-align:center;color:#bf202f}.privileges-desc{font-size:14px;text-align:center;color:#000}.ribbon-grey{height:71px;background:url(/static/img/paycard/ribbon-gray.png);background-repeat:no-repeat;background-size:100%;background-position:center bottom;margin-bottom:35px}.pp-logo-on-ribbon-grey{position:absolute;width:80px;height:80px;top:10px;left:calc(50% - 40px)}.be-our-top-fan{padding-top:51px;padding-bottom:30px;margin-top:-55px;margin-left:6px;margin-right:4px}.be-our-top-fan img{width:400px}.btn-register-top-fan{font-size:20px;background-color:#bf202f}.block-success{width:90%;min-height:250px;margin:0 auto}.ribbon-yellow{margin-top:50px;width:100%}.pp-logo-on-ribbon{width:120px;height:120px;top:25px;left:calc(50% - 60px)}.channel-item{position:relative;padding:10px;border-radius:10px;width:240px;height:110px;margin:10px 0px;box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.2) !important}.channel-item img{left:20px}.select-channel{height:20px;width:20px;background-color:#fff;border-radius:3px;display:inline-block;border:2px solid #c4c4c4;left:20px}}@media (min-width: 992px){.text-head{font-size:45px;color:#545454}.text-desc{font-size:18px;color:#545454}.container-privileges{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:center;width:100%;height:640px}.privileges-item{width:280px;height:280px;padding:10px;background-color:#fff;margin:10px;border-radius:2px}.privileges-header{font-size:22px;text-align:center;color:#bf202f}.privileges-desc{font-size:14px;text-align:center;color:#000}.ribbon-grey{height:71px;background:url(/static/img/paycard/ribbon-gray.png);background-repeat:no-repeat;background-size:100%;background-position:center bottom;margin-bottom:35px}.pp-logo-on-ribbon-grey{position:absolute;width:100px;height:100px;top:0;left:calc(50% - 50px)}.be-our-top-fan{padding-top:51px;padding-bottom:30px;margin-top:-55px;margin-left:6px;margin-right:4px}.be-our-top-fan img{width:400px}.btn-register-top-fan{font-size:22px;background-color:#bf202f}.block-success{width:500px;min-height:250px;margin:0 auto}.ribbon-yellow{margin-top:50px;width:100%}.pp-logo-on-ribbon{width:140px;height:140px;top:20;left:calc(50% - 70px)}.channel-item{position:relative;padding:10px;border-radius:10px;width:240px;height:110px;margin:10px 0px;box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.2) !important}.channel-item img{left:20px}.select-channel{height:20px;width:20px;background-color:#fff;border-radius:3px;display:inline-block;border:2px solid #c4c4c4;left:20px}}