<style media="screen">
@font-face {
  font-family:'sriracha';
  src: url('../fonts/Sriracha-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'loungethblack';
  src: url('../fonts/LOUNGETH-BLACK.OTF') format('truetype');
}
@font-face {
  font-family:'loungethbold';
  src: url('../fonts/LOUNGETH-BOLD.OTF') format('truetype');
}
@font-face {
  font-family:'loungethligth';
  src: url('../fonts/LOUNGETH-LIGHT.OTF') format('truetype');
}
@font-face {
  font-family:'DSDIGIT';
  src: url('../fonts/DS-DIGIT.TTF') format('truetype');
}
@font-face {
  font-family:'loungeth';
  src: url('../fonts/LOUNGETH.OTF') format('truetype');
}
@font-face {
  font-family:'loungeththin';
  src: url('../fonts/LOUNGETH-THIN.OTF') format('truetype');
}
@font-face {
  font-family:'KING84';
  src: url('../fonts/DB KING84.TTF') format('truetype');
}
@font-face {
    font-family:'eak_khunwai';
  src: url('../css/eak_khunwai.ttf') format('truetype');
}
@font-face {
    font-family:'Superspace';
  src: url('../css/Superspace/Superspace Regular ver 1.00.ttf') format('truetype');
}
@font-face {
    font-family:'SuperspaceB';
  src: url('../css/Superspace/Superspace Bold ver 1.00.ttf') format('truetype');
}

body{
  background-image:url(../image/BG-9-16-portrait.webp);
  background-position:top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color:#000;color:#FFF;
  font-family: loungeth,Tahoma, Geneva, sans-serif;
  font-size: 23px;
  overflow-x: hidden;
}
@media only screen and (orientation: landscape){
  body{
    background-image:url(../image/BG-16-9-landscape.webp);
    background-position:top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color:#000;color:#FFF;
    font-family: loungeth,Tahoma, Geneva, sans-serif;
    font-size: 23px;
  }
}
.fw-loungethbold{font-family: loungethbold;}
.fw-KING84{font-family: KING84;}
.fw-dsdigit{font-family: DSDIGIT;}
.fw-sriracha{font-family: sriracha;}
.font_benner{ color:#FFF;font-size:32px;text-align:left;}
.bt_banner{ -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;background-color:#541988;border:1px solid #541988;color:#FFF;padding-top:5px;}
.bt_banner:hover{color:#FFF;}
@media (min-width:240px)
{
  .carousel-caption{right:10%;left:10%;padding-bottom:30px ;border:0px solid #FFF;top:5%;bottom:40%;padding-top:0px;}.font_benner{ font-size:9px;}
  .banner_text{height:50px;}.bt_banner{ height:25px;margin-top:5px;font-size:10px;padding-left:5px;padding-right:5px;}
}
@media (min-width:320px)
{
  .carousel-caption{right:10%;left:10%;padding-bottom:30px ;border:0px solid #FFF;top:5%;bottom:40%;padding-top:0px;}.font_benner{ font-size:12px;}
  .banner_bt{margin-top:0px;}
  .bt_banner{ height:25px;margin-top:5px;font-size:10px;padding-left:5px;padding-right:5px;}
  .banner_text{height:80px;}
}
@media (min-width:375px)
{
  .banner_text{height:80px;}.bt_banner{ height:25px;margin-top:0px;font-size:10px;padding-left:5px;padding-right:5px;}
}
@media (min-width:568px)
{
  .carousel-caption{right:30%;left:10%;padding-bottom:30px ;border:0px solid #FFF;top:6%;bottom:40%;padding-top:10px;}.font_benner{ font-size:18px;}
  .banner_text{height:130px;}
}
@media (min-width:667px)
{
  .banner_text{border:0px solid #F00;height:150px;}
  .bt_banner{ height:35px;padding-top:10px;font-size:12px;padding-left:10px;padding-right:10px;}
}
@media (min-width:768px)
{
  .carousel-caption{right:40%;left:5%;padding-bottom:30px ;border:0px solid #FFF;top:13%;bottom:15%;padding-top:10px;}
  .font_benner{ font-size:24px;}
  .w-md-auto{width: auto;flex: 1 0 0%;}
}
@media (min-width:991px)
{
.font_benner{ color:#FFF;font-size:32px;text-align:left;}.banner_text{height:230px;}
.bt_banner{ height:45px;margin-top:10px;font-size:14px;padding-left:15px;padding-right:15px;}
}
/*@media (max-width:991px){.font_benner{ font-size:24px;}}*/
.text_cat_left{padding-left:0px;color:#FFF;font-size:18px;}
.text_cat_right{text-align:right;padding-right:60px;}
@media (max-width:991px){.text_cat_left{padding-left:0px;color:#FFF;font-size:22px;}
.text_cat_right{text-align:left;padding-right:0px;}}
.img_cat{ margin:10px 6px 10px 0px;}
.img_cat2{ margin:10px 19px 10px 0px;}

@media (max-width:320px){.img_cat{ margin:10px 2px;}}
@media (min-width:1200px){.img_cat_1{margin-left:25px;}}
.input_number{width:50px;height:50px;-webkit-border-radius:25%;-moz-border-radius:25%;border-radius:25%;border:1px solid #FFF;font-size:30px;color:#000;padding-left:15px;
margin-right:10px;margin-top:5px;margin-bottom:5px;}
.input_number_line{ width:20px;height:13px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 20px 0 15px; }
@media (max-width:736px)
{
  .input_number{width:45px;height:45px;font-size:28px;padding-left:14px;margin-right:14px;margin-top:5px;margin-bottom:5px;}
  .input_number_line{ width:20px;height:13px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 14px 0 0px; }
}
@media (max-width:667px)
{
  .input_number{width:40px;height:40px;font-size:28px;padding-left:11px;margin-right:14px;margin-top:5px;margin-bottom:5px;}
  .input_number_line{ width:20px;height:13px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 14px 0 0px; }
}
@media (max-width:600px)
{
  .input_number{width:36px;height:36px;font-size:24px;padding-left:10px;margin-right:10px;margin-top:5px;margin-bottom:5px;}
  .input_number_line{ width:20px;height:13px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 15px 0 10px; }
}
@media (max-width:568px)
{
  .input_number{width:34px;height:34px;font-size:24px;padding-left:8px;margin-right:10px;margin-top:5px;margin-bottom:5px;}
  .input_number_line{ width:20px;height:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 8px 0 0px; }
}
@media (max-width:414px)
{
  .input_number{width:28px;height:28px;font-size:16px;padding-left:8px;margin-right:3px;margin-top:0px;margin-bottom:5px;}
  .input_number_line{ width:10px;height:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 3px 0 0px; position:relative;top:-2px;}
}
@media (max-width:384px)
{
  .input_number{width:24px;height:24px;font-size:16px;padding-left:6px;margin-right:3px;margin-top:0px;margin-bottom:5px;}
  .input_number_line{ width:10px;height:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 3px 0 0px; position:relative;top:8px;}
  .text_cat_left{font-size:18px;}
}
@media (max-width:375px)
{
  .input_number{width:24px;height:24px;font-size:16px;padding-left:6px;margin-right:3px;margin-top:0px;margin-bottom:5px;}
  .input_number_line{ width:10px;height:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0 3px 0 0px; position:relative;top:-1px;}
  .text_cat_left{font-size:18px;}
}
@media (max-width:320px)
{
  .input_number{width:19px;height:19px;font-size:12px;padding-left:5px;margin-right:3px;margin-top:0px;margin-bottom:5px;}
  .input_number_line{ width:8px;height:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #FFF;margin:0px 3px 0px 0px;position:relative;top:10px;}
  .text_cat_left{font-size:16px;}
}
@media (max-width:240px)
{
  .input_number{width:15px;height:15px;font-size:10px;padding-left:4px;margin-right:0px;margin-top:0px;margin-bottom:5px;border-radius:0px;}
  .input_number_line{ display:none;}
}
.fms_left{float:left;border:0px solid #FFF;padding-right:10px;text-align:right;padding-top:0px;padding-bottom:5px;}
.fms_right{float:left;border:0px solid #F00;width:auto;padding:0px 5px 5px 5px;}
.drop{ width:100%;color:#333;}
@media (max-width:990px){.drop{ width:150px;}}
@media (max-width:240px){.drop{ width:90px;}}
.forecast_number{background-color:#FFF;}
.forecast_number_text{padding:10px 0 0 0;color:#501e70;font-weight:bold;text-align:center;}
.input_snumber{width:170px;height:30px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #4b0d73;background-color:#e5e5e5}
.bn_snumber{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;width:100px;height:30px;background-color:#4d0c75;border:1px solid #4d0c75;margin:10px 0 15px 0;}
.tab_head_bg_left{height:40px;background-color:#4c0d74;}
.tab_sub_left{min-height:35px;border-top:1px solid #440e67;padding-top:10px;margin-bottom:10px;padding-left:25px;}
.tab_sub_left2{height:50px;border-bottom:1px dashed #242424;padding-top:10px;padding-bottom:55px;padding-left:0px;}
.bt_up,.bt_down,.bt_up2{ display:none;}
.bt_down2{ display:inline;}
.bt_up2,.bt_down2{top:-20px;;float:right;padding-right:10px;cursor:pointer;}
.tab_21,.tab_22,.tab_23,.tab_24{ display:none;}
/*@media (max-width:990px)
{
  .bt_up,.bt_down{top:-20px;;float:right;padding-right:10px;display:inline;cursor:pointer;}
  .bt_up,bt_up2{ display:none;}
  .tab_1,.tab_2,.tab_3,.tab_4{ display:none;}
}*/
.img_round{ -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
.head_bg_right{height:50px;background-color:#4c0d74;padding-left:16px;padding-top:13px;font-size:20px;background-image:url(../image/text_head_l.png);background-repeat:no-repeat;background-position:top right;margin-bottom:10px;}
@media (max-width:414px)
{
  .head_bg_right{ background-image:inherit;}
}
.bg_light{background-image:url(../image/bg_light.webp);background-repeat:no-repeat}
.bg_clay{background-image:url(../image/bg_clay.webp);background-repeat:no-repeat}
.bg_water{background-image:url(../image/bg_water.webp);background-repeat:no-repeat}
.bg_wind{background-image:url(../image/bg_wind.webp);background-repeat:no-repeat}


.box_ber_day{border:1px solid #431960;min-height:160px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-position:top right;padding-top:5px;}
.box_ber_day>p{padding-left:20px;}
.box_ber_day_number{font-size:40px;font-weight:bold;color:#FFF;}
.box_ber_day_number_footer{ min-height:38px;background-image:url(../image/bg_tab_footer.png);background-repeat:repeat-x;background-position:bottom;background-color:#520f82;opacity: 0.8;}
.box_ber_day_number_footer_left{padding:5px 5px 5px 15px;float:left;width:65%;}
.box_ber_day_number_footer_right{ padding:5px 5px 5px 15px;text-align:right;float:left;width:35%;padding-right:10px;}
.box_ber_day_number_footer_right>a{color:#ffff00;font-size:12px;}


@media (max-width:320px)
{
  .box_ber_day_number{font-size:30px;}
}
@media (max-width:240px)
{
  .box_ber_day_number{font-size:20px;}
}
@media (max-width:240px)
{
  .box_ber_day_number_footer_left{padding:5px 5px 5px 15px;width:auto;}
  .box_ber_day_number_footer_right{ padding:5px 5px 5px 15px;text-align:right;padding-right:10px;width:auto;}
}
@media (max-width:990px)
{
  .category_number{ display:none;}
}
.head_bg_right2{height:40px;padding-left:16px;padding-top:5px;font-size:20px;background-image:url(../image/bg_tab_black.png);background-repeat:repeat-x;
margin: auto; border: 2px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #eaa413 0%, #fee998 100%);
-webkit-border-image: -webkit-linear-gradient(top, #eaa413 0%, #fee998 100%);
border-image: linear-gradient(to bottom, #eaa413 0%, #fee998 100%);
border-image-slice: 1;}
.head_right2_all{padding-right:5px;margin-top:-30px;text-align:right;}
.head_right2_all>a{color:#e6c409;font-size:14px;}
@media (max-width:320px)
{
  .head_right2_all>a{color:#e6c409;font-size:12px;}
}
@media (max-width:240px)
{
  .head_right2_all{padding-right:5px;margin-top:0px;text-align:right;}
}
.box_ber{border:1px solid #431960;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.tb_ber  td{ padding:3px;border:1px solid #000;background-color:#9b9b9b;text-align:center;}
td.tb_ber_price{background-color:#9b9b9b;padding-left:15px;text-align:center;}
td.tb_ber_next{background-color:#4b0d72;width:70px;}
ul.menu_footer{
  list-style:none;
  margin:0px;
  padding:0px;
  padding-top:15px;
}
ul.menu_footer > li{
  display:block;
  padding:10px 20px 10px 0px;
  border:0px solid #FFF;
  float:left;
  height:42px;
}
.menu_footer li > a { color:#FFF;text-align:right;text-decoration:none;}
@media (max-width:1024px)
{
  ul.menu_footer > li{padding:10px 5px 10px 30px;  }
}
@media (max-width:820px)
{
  .input_number{margin-right: 3px;}
}
@media (max-width:768px)
{
  ul.menu_footer > li{padding:10px 5px 10px 2px;  }
  .input_number{margin-right: 4px;}
  .input_number_line{margin: 0px 8px 0 8px;}
}
@media (max-width:736px)
{
  ul.menu_footer > li.menu_footer_li{ display:none;}
}
.footer{padding-top:10px;background-image:url(../image/bg-footer-new.webp);background-size: cover;background-repeat:no-repeat;background-position:top center;min-height:85px;margin-top:15px;}
.text_head_about{ text-align:center;font-size:16px;}
.text_footer{padding:10px 0px;border-bottom:1px dashed #cccccc;text-align:left;}
.aboutimg_footer{background-image:url(../image/text_head_s.png);background-position:bottom right;background-repeat:no-repeat;}
.at_read_moo,.at_read_moo:hover,.at_read_moo:active ,.at_read_moo:visited  { color:#ff00ff;text-decoration:none;}


.font_number{font-size:84px;font-weight:bold;background: rgba(0, 0, 0, .3);padding:10px;text-align:center;border:1px solid #8d3c9f;}




.font_numbersum{ font-size:60px;font-weight:bold;background: rgba(0, 0, 0, .5);padding:19px;text-align:center;border:1px solid #8d3c9f;border-left:0px; }
.number_detail_left{background: rgba(0, 0, 0, .3);padding:10px 15px;border:1px solid #8d3c9f;min-height:80px;}
.number_detail_right{background: rgba(0, 0, 0, .3);padding:22px;border:1px solid #8d3c9f;border-left:0px;text-align:center;min-height:80px;font-weight:bold;font-size:24px;}
.ndl_head { font-size:20px;}
.ndl_head2{ font-size:16px;}
.ndl_number_left{text-align:center;font-size:46px;padding:20px 0;font-weight:bold;min-height:100px;}
.ndl_number_right{border-left:1px solid #8d3c9f;padding:20px 10px;color:#939393;min-height:100px;}
.ndl_number{border:1px solid #8d3c9f;min-height:100px;margin-top:20px;}
.bar_plus{ border:1px solid #47204d;border-radius:0px;background-color:#000;}
.bar_plus_in{ background-color:#ffea00;}
.font_plus{float:left;color:#ffea00;font-size:16px;width:40px;text-align:left;}
.font_evil{float:left;color:#ed1c24;font-size:16px;width:40px;text-align:left;}
.bar_evil{ border:1px solid #47204d;border-radius:0px;background-color:#000;}
.bar_evil_in{ background-color:#ed1c24;}

.box_login_left{margin-top:15px;border-top:4px solid #8b2ec6;}
.box_login_left_h{border-left:4px solid #ebe7e7;border-right:4px solid #ebe7e7;border-bottom:4px solid #ebe7e7;background-color:#FFF;}
.input_login{background-color:#d4e3df;height:37px;border:0px;margin-bottom:15px;color:#4f4f4f;padding-left:25px;}
.user-pass{background:#d4e3df url(../image/icon_locked.png) no-repeat 5px 11px !important;}
.alink_reg:hover,.alink_reg:active{ color:#4f0c7a;}
.bg_headertext{background-color:#390445;width: max-content;}
.corner_cancel{ -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}
.bt_login,.bt_login:hover,.bt_login:active,.bt_login:visited{background-image:url(../image/bt_login.webp);width:138px;color:#FFF;border:none;background-repeat:no-repeat;height:30px;text-align:left;}
.bt_cancel,.bt_cancel:hover,.bt_cancel:active,.bt_cancel:visited{height:30px;background-color:#000;color:#FFF;width:70px;}
.bt_search{background-image:url(../image/bt_search.png);width:195px;height:37px;border:0px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.tb_forecast{font-size:22px;}
@media (max-width:600px)
{
  .tb_forecast{font-size:14px;}
}

@media (max-width:600px)
{
  .font_number{font-size:74px;}
}
@media (max-width:568px)
{
  .font_number{font-size:54px;}
}
@media (max-width:414px)
{
  .font_number{font-size:44px;}
}
@media (max-width:384px)
{
  .font_number{font-size:42px;}
}
@media (max-width:320px)
{
  .font_number{font-size:36px;}
}
@media (max-width:240px)
{
  .font_number{font-size:26px;}
}

.show_moblie,.img_moblie{ display:none}

@media (max-width:990px)
{
  .no_moblie,.img_web{ display:none}
  .show_moblie,.img_moblie{ display:inline}
}
@media (max-width:990px)
{
  .img_web{ display:none}
  .img_moblie{ display:inline}
}
.font_number_cweb{font-size:100px;}
.font_number_cmobile,.line_mob,.line_br{ display:none;}
.line_font_2{ font-size:30px;}
@media (max-width:768px){
.font_number_cmobile{display:inline;font-size:32px;}
.font_number_cweb{ display:none;}
}
@media (max-width:736px){
.font_number_cmobile{display:inline;font-size:26px;}
.font_number_cweb{ display:none;}

.line_web{display:none;}
.line_mob{display:inline;}
}
@media (max-width:667px){
.font_number_cmobile{display:inline;font-size:24px;}
.font_number_cweb{ display:none;}
}
@media (max-width:568px){
.font_number_cmobile{display:inline;font-size:24px;}
.font_number_cweb{ display:none;}
.line_web{display:none;}
.line_mob{display:inline;}
.line_font_2{ font-size:28px;}
}
@media (max-width:414px){
.font_number_cmobile{display:none;}
.font_number_cweb{ display:inline;font-size:40px;}
.line_web{display:none;}
.line_mob,.line_br{display:inline;}
}
@media (max-width:384px){
.font_number_cmobile{display:none;}
.font_number_cweb{ display:inline;font-size:40px;}
}

@media (max-width:375px){
.line_web{display:none;}
.line_mob,.line_br{display:inline;}
}
@media (max-width:320px){
.font_number_cmobile,.line_web{display:none;}
.font_number_cweb{ display:inline;font-size:30px;}
.line_mob{display:inline;}
}
@media (max-width:240px){
.font_number_cmobile,.line_web{display:none;}
.font_number_cweb{ display:inline;font-size:24px;}
.line_mob{display:inline;}
}
.div_com{ display:block;}
.div_mobile{ display:none;}
@media (max-width: 768px)
{
  /*.navbar-nav > .div_com{display:none;}*/
  .div_com{ display:none;}
  .div_mobile{ display:block;}
}
.text-kai-shadow1{
  text-shadow: 2px 2px 5px #6a01b3;
}
.align-center{align-items: center;}
.align-baseline{align-items: baseline;}
.text-kai-link{color: #feb935;}
.text-kai-shadow2 {
  text-align: center;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0px 0px 11px #9f00ff, 0px 0px 0px #9f00ff, 0px 0px 11px #9f00ff;
}
.form-control{border-radius: 0.8rem;padding: 0.75rem 0.75rem;font-size: inherit;}
.btn{border-radius: 0.8rem; font-size: inherit;}
.btn-kai1{
  color: #fff;
  background-color: #390445;
  border-color: #390445;
}
.btn-kai2{
  color: #fff;
  background-color: #ff9000;
  border-color: #ff9000;
}
.btn-outline-kai1{
  color: #390445;
  background-color: #ffffff;
  border-color: #390445;
}
.btn-kai3{
  color: #fff;
  background-image: linear-gradient(rgb(113,0,114,1), rgb(38,6,53,1));
  border-color: transparent;
}
.btn-kai4{
  color: #fff;
  background-image: linear-gradient(rgb(29,181,4,1), rgb(45,55,46,1));
  border-color: transparent;
}
.btn-kai5{
  color: #fff;
  background-image: linear-gradient(rgb(231,14,14,1), rgb(89,0,0,1));
  border-color: transparent;
}
.btn-kai1:hover{
  color: #390445;
  background-color: #fff;
  border-color: #390445;
}
.btn-outline-kai1:hover{
  color: #fff;
  background-color: #390445;
  border-color: #390445;
}
.btn-kai3:hover{
  color: #390445;
  background-color: #FFF;
  background-image:none;
  border-color: #390445;
}
.btn-kai4:hover{
  color: #390445;
}
.btn-kai5:hover{
  color: #390445;
}
.pt-fix{padding-top: 25rem;}
.pt-fix2{padding-top: 15rem;}

hr.line1 {
  border: 1px solid;
  opacity: 1;
  border-image-slice: 1;
  border-width: 1px;
}
input:disabled {
    cursor: default;
    border-color: #fff;
    background-color: #fff;
    color: #390445;
}
.bg-opacity-kai{
  border: 1px solid #40375d;
  border-radius: 25px;
  background-color: #40375d;
  /* background: transparent; */
  opacity: 0.75;
}
.border-kai1{border: 1px solid #5a0260;}
.bg-kai1{
  background-image: linear-gradient(rgb(113,0,114,0.75), rgb(38,6,53,0.75));
  background-image: url(../image/img_1.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-kai2{
  background-image: linear-gradient(rgb(254,215,79,1) 49% , rgb(255,120,0,1) 100%);
}
.rounded-kai1{border-radius: 1.5rem!important;}
.ck-kai1{width: 27px;height: 27px;}
.pt-kai1{padding-top: 0.5rem!important;}
.form-select{padding: 0rem 2.25rem 0rem 0.75rem;}
@media (max-width:736px)
{
  .ck-kai1{width: 17px;height: 17px;}
  .pt-kai1 {padding-top: 0rem!important;}
  .bg-kai1{background-position: center;}
}
.text-kai1{color: #390445;}
.w-kai1{width: 81px;}
.border-kai1 {
  border-bottom: 1px solid #ff7800;
  border-image-source: linear-gradient(to left, #fed74f, #ff7800);
  background-image: -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%), -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%), -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: -o-linear-gradient(top, #fed74f 0%, #ff7800 100%), -o-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: linear-gradient(to bottom, #fed74f 0%, #ff7800 100%), linear-gradient(to bottom, #fed74f 0%, #ff7800 100%);
}
/*
.border-kai2 {
  border-bottom: 1px solid #ff7800;
  border-image-source: linear-gradient(to left, #fed74f, #ff7800);
  border: 3px solid;
  opacity: 1;
  border-image-slice: 1;
  border-width: 3px;
  border-top: 3px solid #fed74f;
  border-bottom: 3px solid #ff7800;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 3px 100%;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%), -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%), -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: -o-linear-gradient(top, #fed74f 0%, #ff7800 100%), -o-linear-gradient(top, #fed74f 0%, #ff7800 100%);
  background-image: linear-gradient(to bottom, #fed74f 0%, #ff7800 100%), linear-gradient(to bottom, #fed74f 0%, #ff7800 100%);
  border-left: 0px;
  border-right: 0px;
}
*/
.border-kai2 {
  border: 3px solid #ff7800;
  border-radius: 27px;
}/*
.border-kai-left {
  border-image-source: linear-gradient(to top, #fed74f, #ff7800);
  opacity: 1;
  border-image-slice: 1;
  border-width: 1px;
  border-left: 3px solid #fed74f;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 1px 100%;
  }
  */
.border-kai-left {
    border-image-source: linear-gradient(to top, #fed74f, #ff7800);
    opacity: 1;
    border-image-slice: 1;
    border-width: 3px;
    border-left: 3px solid #fed74f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 1px 100%;
    border-top: 0px solid transparent!important;
    border-bottom: 0px solid transparent!important;
    border-right: 0px solid transparent!important;
}
.border-kai-right {
    border-image-source: linear-gradient(to top, #fed74f, #ff7800);
    opacity: 1;
    border-image-slice: 1;
    border-right: 3px solid #fed74f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 1px 100%;
    border-top: 0px solid transparent!important;
    border-bottom: 0px solid transparent!important;
    border-left: 0px solid transparent!important;
}
.border-kai-bottom {
  border-image-source: linear-gradient(to left, #fed74f, #ff7800);
  opacity: 1;
  border-image-slice: 1;
  border-width: 1px;
  border-bottom: 3px solid #fed74f;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 1px 100%;
  border-top: 0px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
  }
  .table-bordered>:not(caption)>*{border-width: 0px 0px;}
  .table-bordered>:not(caption)>*>*{border-width: 0px 0px;}
  .table-bordered>:not(caption)>*>*{border-width: 0px 0px;}
  .table>:not(caption)>*>*{border-bottom-width: 0px;border-right-width: 3px;}

.border-kai-bottom2 {
  border-image-source: linear-gradient(to top, #fed74f, #ff7800);
  opacity: 1;
  border-image-slice: 1;
  background: -webkit-linear-gradient( #fed74f, #ff7800); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient( #fed74f, #ff7800); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient( #fed74f, #ff7800); /* For Firefox 3.6 to 15 */
  background: linear-gradient( #fed74f, #ff7800); /* Standard syntax */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 100% 3px;
  border-top: 0px solid transparent;
  border-left: 0px solid transparent;
  background-position: bottom;
  }
.border-kai-bottom-light {
  border-image-source: linear-gradient(to left, #fff, #fff);
  opacity: 1;
  border-image-slice: 1;
  border-width: 1px;
  border-bottom: 1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 1px 100%;
  border-top: 0px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
  }
.border-kai3 {
  border-bottom: 1px solid #fed74f;
  border-image-source: linear-gradient(to bottom, #ff7800, #fed74f);

  border: 1px solid;
  opacity: 1;
  border-image-slice: 1;
  border-width: 1px;
  transform: rotate(-90deg);
}
/*
.border-kai2 {
    width: auto;
    height: auto;
    border-top: 1px solid #fed74f;
    border-bottom: 1px solid #ff7800;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 1px 100%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%), -webkit-linear-gradient(top, #fed74f 0%, #ff7800 100%);
    background-image: -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%), -moz-linear-gradient(top, #fed74f 0%, #ff7800 100%);
    background-image: -o-linear-gradient(top, #fed74f 0%, #ff7800 100%), -o-linear-gradient(top, #fed74f 0%, #ff7800 100%);
    background-image: linear-gradient(to bottom, #fed74f 0%, #ff7800 100%), linear-gradient(to bottom, #fed74f 0%, #ff7800 100%);
}
*/
.container-pro {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: $color-black;
}
.container__progressbars {
  display: grid;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  min-width: 60px;
  width: 100%;
  max-height: 100%;
}

.progressbar {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0em;
  transform: rotate(-90deg);
  margin-top: 9px;
}
.progressbar1 {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0em;
  transform: rotate(-90deg);
  margin-top: 6px;
}

.progressbar__svg {
  /*position: relative;*/
  width: 100%;
  height: 100%;
}

.progressbar__svg-circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  stroke: #ff7800;
  stroke-linecap: round;
  transform: translate(5px, 5px);
}

.progressbar__svg-circle1 {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  stroke: #ff7800;
  stroke-linecap: round;
  transform: translate(5px, 5px);
}

.shadow-html {
  /*filter: drop-shadow(0 0 5px #ff6633);*/
}

.circle-html {
  -webkit-animation: anim_circle-html 1s ease-in-out forwards;
          animation: anim_circle-html 1s ease-in-out forwards;
}

.progressbar__text {
  position: absolute;
  top: 50%;
  left: 50%;
  /*padding: 0.25em 0.5em;*/
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 0.25em;
  transform: translate(-50%, -50%) rotate(90deg);
}
.progressbar_text2 {
  position: relative;
  top: 0%;
  /*padding: 0.25em 0.5em;*/
  color: white;
  border-radius: 0.25em;
}

.small-kai{font-size: .65em;}
.small-kai1{font-size: 1.09em;}

.main {
  width: 100%;
  display:block;
  margin:0 auto;
}
.main2 {
  display:block;
  margin:0 auto;
}
.action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.action a {
  display:inline-block;
  padding:5px 10px;
  background:#f30;
  color:#fff;
  text-decoration:none;
}
.action a:hover{
  background:#000;
}
.slick-next {
    right: 0px;
}
.slick-prev {
    left: 0px;
    z-index: 99;
}
@media (max-width:736px)
{
  .small-kai {font-size: .55em;}
}
.bg-article-kai{
  background-image: url(../redbag/article/22-03-02-pgzuUc.png);
  width: 265px;
  height: 210px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 16px;
}
.f-fix{font-size: 2.5rem;}
.fw-menu{font-size: 21.5px;}
.carousel-indicators [data-bs-target]{height: 4px;}
.w-fix{width: 79px;}
@media (max-width:576px)
{
  .small1{font-size: 16px;}
}
@media (min-width:576.99px)
{
}
@media (min-width:768px)
{
  .w-fix{width: 60%;}
  .fix-h-btn{height: 60px;}
  .mt-k-1{margin-top: -2.5rem;}
  .col-md-fix-4{width: 35.66%}

}
@media (max-width:768px)
{
    .f-fix{font-size: 1.3rem;}

}
@media (max-width:767px)
{

}
@media (max-width:400px)
{

}
@media (min-width:992px)
{
}
@media (min-width:1200px)
{
  .fw-menu{font-size: 21.5px;}

}
.fix-l{
  font-size: 22px;
  padding-left: 8px;
}
.fix-s{
  position: relative;
  top: 4px;
  font-size: 19px;
}
.fix-h1{font-size: 31.5px}
.fix-h2{font-size: 31.5px;}

@media (min-width:1400px)
{
  .ms-xxl-d-1{margin-left: -12px;}
  .fw-menu{font-size: 23px;}
  .col-xxl-fix{width: 255px;}
  .fix-h1{font-size: 33.5px}
  .fix-h2{font-size: 33.5px;}
  label{font-size: 22px;}
  .fix-l{
    font-size: 19px;
    padding-left: 6px;
  }
}
.cursor-pointer{cursor: pointer;}
.h-86{height: 86%;}
.h-fix{height: 52px;}
.h-fix2{height: 352px;}
a:hover{color: #ffffff;}
.text-indent-1{text-indent: 0.5em;}
.rounded-4 {border-radius: 1rem!important;}
.btn-secondary2{
  color: #fff;
  background-color: #595a5b;
  border-color: #595a5b;
}
.active-btn{
  background-color: #390445;
  border-color: #390445;
}
.bg-warning-sim{
  color: #6e0073;
  background-color: #fef200;
  border-color: #fef200;
  width: 217px;
}

.btn-toolbar{font-size: 14px;}
.icon-btn-hi {
  width: 100px;
  margin-bottom: 15px;
}
@media (max-width: 800px) {
  .icon-btn-hi {
    width: 85px;
    margin-bottom: 15px;
  }
  .bg-warning-sim {
    width: 178px;
  }
}
</style>