body {
    font-family: 'Kanit', sans-serif !important;
}

.swal2-html-container {
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    font-style : normal;
    font-weight: normal;
    color      : #4F4F4F;
}
.f-noti{
    font-size: 10px;
}
.rg10-g3 {
    font-style : normal;
    font-weight: normal !important;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #828282;
}
.lg10-g3 {
    font-style : normal;
    font-weight:  300;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #828282;
}
.lg12-g2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg12-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg12-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg12-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}

.lg14-g1 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.lg14-g2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.lg14-g3 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}

.md14-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md14-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg14-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg14-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #4F4F4F;
}

.rg14-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}
.lg16-g1 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg16-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;

}

.rg16-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #4F4F4F;

}

.md16-g1 {
    font-style : normal;
    font-weight: 500 !important;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md16-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg18-g1 {
    font-style    : normal;
    font-weight   : normal;
    /* font-size  : 18px; */
    font-size     : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color         : #333333;
}

.rg18-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg18-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}

.md18-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #333333;
}

.md18-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.md18-g4 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #BDBDBD;
}

.rg20-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md20-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg24-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg24-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.md24-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md24-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg36-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #FFFFFF;
}

.rg36-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg48-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(48px + (48 - 36) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg48-g1 {
    font-style : normal;
    font-weight: 100;
    font-size  : calc(48px + (48 - 36) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md36-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md36-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}
.rg20-g1-2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.rg20-g1-3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg14-g1-2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg14-g1-3 {
    font-style : normal;
    font-weight: 0;
    font-size  : calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg16-g1-2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md36-g1-2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(14px + (29 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.f-weight-normal {
    font-weight: normal !important;
}
.f-100{
    font-size: 100px !important;
}

.cl-CI {
    color: #001689 !important;
}

.cl-C8 {
    color: #C8C8C8 !important;
}

.cl-2F {
    color: #001689 !important;
}

.cl-F2 {
    color: #F2C94C !important;
}

.cl-F29 {
    color: #F2994A !important;
}

.cl-21 {
    color: #219653 !important;
}

.cl-FF {
    color: #FFFFFF !important;
}

.cl-F0 {
    color: #F05522 !important;
}

.cl-G1 {
    color: #333333 !important;
}

.cl-G2 {
    color: #4F4F4F !important;
}

.cl-G3 {
    color: #828282 !important;
}

.cl-G4 {
    color: #BDBDBD !important;
}

.cl-G5 {
    color: #f1f1f1 !important;
}

.cl-GY {
    color: #4F4F4F !important;
}

.cl-BD {
    color: #BDBDBD !important;
}

.cl-B8 {
    color: #b8b8b8 !important;
}

.cl-red {
    color: #EB5757 !important;
}