/* @font-face {
    font-family: 'DB Ozone X MediumIt';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: local('DB Ozone X MediumIt'),
     url('/bla/css/DBOzoneX-MediumIt.woff2') format('woff2'),
        url('/bla/css/DBOzoneX-MediumIt.woff') format('woff');
}

@font-face {
    font-family: 'DB Ozone X LightIt';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: local('DB Ozone X LightIt'),
     url('/bla/css/DBOzoneX-LightIt.woff2') format('woff2'),
        url('/bla/css/DBOzoneX-LightIt.woff') format('woff');
} */

@font-face {
    font-family: 'DB Ozone X';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: local('DB Ozone X'),
     url('/bla/css/DBOzoneX.woff2') format('woff2'),
        url('/bla/css/DBOzoneX.woff') format('woff');
}


@font-face {
    font-family: 'DB Ozone X';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: local('DB Ozone X'),
        url('/bla/css/DBOzoneX-Light.woff2') format('woff2'),
        url('/bla/css/DBOzoneX-Light.woff') format('woff');
}


@font-face {
    font-family: 'DB Ozone X';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: local('DB Ozone X'),
     url('/bla/css/DBOzoneX-Medium.woff2') format('woff2'),
        url('/bla/css/DBOzoneX-Medium.woff') format('woff');
}

@font-face{
	font-family: 'THSarabunNew';
	font-style: normal;
	src: local('THSarabunNew'),
	/*url('/bla/images/THSarabunNew.ttf') format('ttf');*/
	 url('../images/THSarabunNew.ttf') format('truetype')
}

body{
    font-family: 'DB Ozone X',sans-serif !important;
}
 
.swal2-html-container {
    font-size  : calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
    font-style : normal;
    font-weight: normal;
    color      : #4F4F4F;
}

.rg10-g3 {
    font-style : normal;
    font-weight: normal !important;
    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;
}
.lg16-g2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}
.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;

}

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

}

.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;
}

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

.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      : #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;
}

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

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

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

.cl-00 {
   color: #00B3F0 !important; 
}

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

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

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

.cl-05 {
    color: #0057A7 !important;
}

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

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

.cl-FF0 {
    color: #FF0000 !important;
}

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

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

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

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

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

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

.cl-bla-bg{
    background-color: #0058A9 !important;
    color: #FFFFFF !important;
}

.m-t-40{
    margin-top: 40px !important;
}
.m-t-20{
    margin-top: 20px !important;
}
.m-l-20{
    margin-left: 20px !important;
}
.m-l-40{
    margin-left: 40px !important;
}
.m-r-20{
    margin-right: 20px !important;
}
.m-r-40{
    margin-right: 40px !important;
}
.m-l-80{
    margin-left: 80px !important;
    margin-right: 80px !important;
}
.m-b-10{
    margin-bottom: 10px !important;
}
.m-b-20{
    margin-bottom: 20px !important;
}
.nom{
    margin: 0px !important;
}
.t-c{
    text-align: center;
}