html, body { overflow-x: hidden; }
.bg_main{ background-image:url(../images/bg.jpg); background-size:cover; background-position: top center;}
.bg_main2{ background-image:url(../images/bg3.jpg); background-size:cover; background-position: top center; background-repeat: no-repeat;}
.bg_main3{ background-image:url(../images/bg4.jpg); background-size:cover; background-position: top center;}
.bg_page{ background-image:url(../images/bg_page.jpg); background-size:cover;}
.bg_footer{ background-image:url(../images/bg_footer.jpg); background-size:cover;}
.bg_green{background-color: #dafaff;}
.bg_green2{background-color: #ffffff;}
.btn-circle.btn-xl {
  width: 110px;
  height: 110px;
  padding: 10px 16px;
  font-size: 32px;
  line-height: 21px;
  border-radius: 55px;
  margin: 5px;
  border: 1px solid #2c3e50;
}
.PDT {
padding-top: 55px;
}
.MRT {
margin-top: 200px;
}
.RIGHT{
float:center;

}
.btn-circle:hover {
  background-color: #0070c2;
  color: #fff;
  border: 3px solid #fff;
}

.masthead2 {
  padding-top: calc(1rem + 74px);
}

.newbtn-join{padding: 5px 10px; background: linear-gradient(135deg, rgb(0, 182, 191), rgb(155, 230, 141)); box-shadow:rgba(2, 6, 16, 0.2) 0px 2px 16px; 
border-radius: 20px; border: 1px solid #fff; margin-bottom: 5px; }
.newbtn-join:hover{background: linear-gradient(135deg, rgb(155, 230, 141), rgb(0, 182, 191)); box-shadow:rgba(2, 6, 16, 0.2) 0px 2px 16px;}


.month_area{position:absolute; top:-10px; left: -10px; width: 300px; max-width: 100%;}
.month_text1{width: 30px;  height: 30px;  padding: 8px 5px;  font-size: 15px;  line-height: 18px;  border-radius: 15px; border: 2px solid #fff;
background-color: #fd9307; color: #fff;}
.month_text2{width: 30px;  height: 30px;  padding: 8px 5px;  font-size: 15px;  line-height: 18x;  border-radius: 15px; border: 2px solid #fff;
background-color: #00a6b9; color: #fff;}
.month_text3{width: 30px;  height: 30px;  padding: 8px 5px;  font-size: 15px;  line-height: 18px;  border-radius: 15px; border: 2px solid #fff;
background-color: #0099ff; color: #fff;}
.month_text4{width: 30px;  height: 30px;  padding: 8px 5px;  font-size: 15px;  line-height: 18px;  border-radius: 15px; border: 2px solid #fff;
background-color: #c82700; color: #fff;}
.month_text5{color: #0070c2; font-weight: bolder;  text-shadow: 5px 5px 10px #fff;}

.main_h1{ color: #2d44df; font-size: 1.5em; -webkit-text-stroke: 1px #2c3e50;}
.menu_text{ font-weight: bold; font-size: 15px; line-height: 12px !important;}

.main_h1new{ font-size: 3rem; color:#000; font-weight: bolder; -webkit-text-stroke: 0.5px #fff; text-shadow: 5px 5px 10px #006fbf;}
.main_date{ font-size: 1.5rem; font-weight: bold; color: #fff; -webkit-text-stroke: 0.5px #242424; text-shadow: 5px 5px 10px #006fbf; }


.box_step_black{ position: absolute; top: 20%; left: 10px; width: 85%; }
.box_title_black{font-size: 1.5rem; font-weight: bold; color: #000; border-bottom: 1px solid #242424;}
.box_detail_black{font-size: 1rem; font-weight: bold; color: #000; margin-bottom: 8px; }
.box_detail_orange{background-color: #00a6b9; padding: 3px 5px; color: #fff; border-radius: 20px;}

.box_step_white{ position: absolute; top: 20%; left: 10px; width: 85%; }
.box_title_white{font-size: 1.5rem; font-weight: bold; color: #fff; border-bottom: 1px solid #fff;}
.box_detail_white{font-size: 1rem; font-weight: bold; color: #fff; }

.box_hand{position: absolute; bottom: 0px; right: 0px; width: 23%; }

.join { position: fixed; bottom: 0; right: 0; z-index: 99999;   }

.fontsize1 {font-size: 18px; line-height: 28px; font-family: ahoma, Verdana, Arial !important;}

.form_text{ border: 1px solid #999; border-radius: 5px; background-color:#ffffff; margin: 5px;}
.text-right{ text-align: right;}

.text-purple{ background-color: #0070c2; color: #fff; padding: 5px 10px; text-align: center;}

.text-w{color: #f6a900; -webkit-text-stroke: 1px #2c3e50;}
.text-e{color: #00a0e9; -webkit-text-stroke: 1px #2c3e50;}
.text-n{color: #00a73c; -webkit-text-stroke: 1px #2c3e50;}
.text-g{color: #b8d200; -webkit-text-stroke: 1px #2c3e50;}
.text-l{color: #f39700; -webkit-text-stroke: 1px #2c3e50;}
.text-i{color: #ffe100; -webkit-text-stroke: 1px #2c3e50;}
.text-s{color: #e60012; -webkit-text-stroke: 1px #2c3e50;}
.text-h{color: #a65aa0; -webkit-text-stroke: 1px #2c3e50;}
.text-blue{ color: #2c47cc;}

.ming1{ min-height: 800px;}

.catjoin{ position: absolute; bottom: 130px; left: 80px; height: auto; }





table#t1 th {
    background-color: #00a6b9;
    color: #fff;
}
table#t1 tr:nth-child(even) {background-color: #f6f6f6;}
table#t1 tr:hover {background-color: #e5f5ff !important;}

.tableh1{ max-height: 350px; overflow: auto; }
.tableh1::-webkit-scrollbar { width: 12px;}
.tableh1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.tableh1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}

.imageborder{
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #CCC; 
}

/*------------------------------------------------------------------
[back-to-top]
-------------------------------------------------------------------*/

#back-to-top {
  right: 10px;
  top: auto;
  z-index: 10;
  display: none;
}

#back-to-top .btn:focus {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 767px) {
  #back-to-top {
    right: 5px;
  }
}

#back-to-top.position-fixed {
  bottom: 20px;
}



@media (max-width: 700px) {
.width1 { width: 80%;   }
.box_title_black{font-size: 2rem; }
.box_title_white{font-size: 2rem; }
.box_detail_black{font-size: 1.2rem;  }
.box_detail_white{font-size: 1.2rem;  }
}
@media (max-width: 480px) {
.bg_main2{ background-image:url(../images/bg3_mobile.png); background-size:cover; background-position: top center;}	
.bg_main3{ background-image:url(../images/bg4_mobile.png); background-size:cover; background-position: top center;}	
.width_mobile{ max-width: 340px; height: auto;}
}	
@media (max-width: 420px) {
.width1 { width: 60%;   }
  #back-to-top {
    right: 0;
    transform: translateX(10px);
  }
.newbtn-join{padding: 6px 4px; line-height: 15px; font-size: 13px;}  
.catjoin{ position: absolute; bottom: 80px; left: 10px; height: auto; }
.width2{ width: 58%;  }
}