/* Animations Delay */
/* ---------------------------------------------------- */
.animation-delay-1 {
	-webkit-animation-delay: .1s !important;
	-moz-animation-delay: .1s !important;
	-o-animation-delay: .1s !important;
	animation-delay: .1s !important;
}

.animation-delay-2 {
	-webkit-animation-delay: .2s !important;
	-moz-animation-delay: .2s !important;
	-o-animation-delay: .2s !important;
	animation-delay: .2s !important;
}

.animation-delay-3 {
	-webkit-animation-delay: .3s !important;
	-moz-animation-delay: .3s !important;
	-o-animation-delay: .3s !important;
	animation-delay: .3s !important;
}

.animation-delay-4 {
	-webkit-animation-delay: .4s !important;
	-moz-animation-delay: .4s !important;
	-o-animation-delay: .4s !important;
	animation-delay: .4s !important;
}

.animation-delay-5 {
	-webkit-animation-delay: .5s !important;
	-moz-animation-delay: .5s !important;
	-o-animation-delay: .5s !important;
	animation-delay: .5s !important;
}

.animation-delay-6 {
	-webkit-animation-delay: .6s !important;
	-moz-animation-delay: .6s !important;
	-o-animation-delay: .6s !important;
	animation-delay: .6s !important;
}

.animation-delay-7 {
	-webkit-animation-delay: .7s !important;
	-moz-animation-delay: .7s !important;
	-o-animation-delay: .7s !important;
	animation-delay: .7s !important;
}

.animation-delay-8 {
	-webkit-animation-delay: .8s !important;
	-moz-animation-delay: .8s !important;
	-o-animation-delay: .8s !important;
	animation-delay: .8s !important;
}

.animation-delay-9 {
	-webkit-animation-delay: .9s !important;
	-moz-animation-delay: .9s !important;
	-o-animation-delay: .9s !important;
	animation-delay: .9s !important;
}

.animation-delay-10 {
	-webkit-animation-delay: 1s !important;
	-moz-animation-delay: 1s !important;
	-o-animation-delay: 1s !important;
	animation-delay: 1s !important;
}

.animation-delay-11 {
	-webkit-animation-delay: 1.1s !important;
	animation-delay: 1.1s !important;
}

.animation-delay-12 {
	-webkit-animation-delay: 1.2s !important;
	animation-delay: 1.2s !important;
}

.animation-delay-13 {
	-webkit-animation-delay: 1.3s !important;
	animation-delay: 1.3s !important;
}

.animation-delay-14 {
	-webkit-animation-delay: 1.4s !important;
	animation-delay: 1.4s !important;
}

.animation-delay-15 {
	-webkit-animation-delay: 1.5s !important;
	animation-delay: 1.5s !important;
}

.animation-delay-16 {
	-webkit-animation-delay: 1.6s !important;
	animation-delay: 1.6s !important;
}

.animation-delay-17 {
	-webkit-animation-delay: 1.7s !important;
	animation-delay: 1.7s !important;
}

.animation-delay-18 {
	-webkit-animation-delay: 1.8s !important;
	animation-delay: 1.8s !important;
}

.animation-delay-19 {
	-webkit-animation-delay: 1.9s !important;
	animation-delay: 1.9s !important;
}

.animation-delay-20 {
	-webkit-animation-delay: 2s !important;
	animation-delay: 2s !important;
}

.animation-delay-21 {
	-webkit-animation-delay: 2.1s !important;
	animation-delay: 2.1s !important;
}

.animation-delay-22 {
	-webkit-animation-delay: 2.2s !important;
	animation-delay: 2.2s !important;
}

.animation-delay-23 {
	-webkit-animation-delay: 2.3s !important;
	animation-delay: 2.3s !important;
}

.animation-delay-24 {
	-webkit-animation-delay: 2.4s !important;
	animation-delay: 2.4s !important;
}

.animation-delay-25 {
	-webkit-animation-delay: 2.5s !important;
	animation-delay: 2.5s !important;
}

.animation-delay-26 {
	-webkit-animation-delay: 2.6s !important;
	animation-delay: 2.6s !important;
}

.animation-delay-27 {
	-webkit-animation-delay: 2.6s !important;
	animation-delay: 2.6s !important;
}

.animation-delay-28 {
	-webkit-animation-delay: 2.8s !important;
	animation-delay: 2.8s !important;
}

.animation-delay-29 {
	-webkit-animation-delay: 2.9s !important;
	animation-delay: 2.9s !important;
}

.animation-delay-30 {
	-webkit-animation-delay: 3s !important;
	animation-delay: 3s !important;
}

	.sponsor-logo {
		display: none;
	}
	.sponsor-logo-mobile{
		display: block;
		margin-top:10px;
	}
	@media (max-width: 767px) {

		.sponsor-logo {
			display: block;
			margin-top:20px;
			text-align: center;
		}
		.sponsor-logo-mobile{
			display: none;
		}
	}

  p { font: bold 20px;}
  .info { font: 14px; #c5161d; }
  .margin {margin-bottom: 2px;}
  .bg-1 {
      background-color: #D91A21; /* red c5161d */
      color: #ffffff;
  }
  .bg-2 {
      background-color: #DDDFE0; /* Dark Blue */
      color: #333;
  }
  .bg-3 {
      background-color: #ffffff; /* White */
      color: #555555;
  }
  .bg-4 {
      background-color: #9C782C; /* Black Gray */
      color: #fff;
  }
  .container-fluid {
      padding-top: 30px;
      padding-bottom: 30px;
  }
  .container-content {
      padding-top: 60px;
      padding-bottom: 60px;
  }
   .container-footer {
      padding-top: 30px;
      padding-bottom: 30px;
  }
 .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
  }
  .navbar-brand{
      display: none;
  }
  .navbar-brand-center {
    text-align: center;
  }
  @media (max-width: 767px) {
      .navbar-brand-center {
        display: none;
      }
      .navbar-brand{
          display: block;
      }

  }

  .logo-brand-center {
    display: none;
  }
  @media (max-width: 767px) {
      .logo-brand-center {
        display: block;
      }
  }


  .navbar .navbar-nav {
      display: inline-block;
      float: none;
  }

  .navbar .navbar-collapse {
      text-align: center;
  }

  .navbar-nav  li a:hover {
      color: #FF9500 !important;
/*  color: #FF9500 !important;   yellow */
/*   color: #E10000 !important;  red */
  }
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    color: #FF9500;
/*		color: #E10000;   red*/
    background-color:  transparent;
  }

  .btn-file {
      position: relative;
      overflow: hidden;
  }
  .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
  }

  #img-upload{
      width: 50%;
  }

  .modal-body {
      max-height: calc(100vh - 210px);
      overflow-y: auto;
  }
/*-------- linkfooter --------*/
  a {
		color: #fff;
/*	color: #333; */
    text-decoration: none;
  }
  a:hover,
  a:focus {
    color: #E10000;
    text-decoration: none;
  }
  /*-------- menuheader  --------*/
  .navbar-default .navbar-nav > li > a {
    color: #fff;
/*	color: #333; */
  }

p.clr, .clr { clear:both; padding:0; margin:0; }
p.padding, .padding { clear:both; padding:2px 0 2px 0; margin:2px 0 2px 0; }
.font20center{ font-size: 20px; color: #E10000; line-height:22px; text-align:center; }
.font20black{ font-size: 20px; color: #333; line-height:22px; text-align:center; }
.font20black span { color:#dd0000; font-weight:bold;}

.font20{ font-size: 20px; color: #333; line-height:20px; text-align: left;}
.font_checkbox { font-size: 16px; color: #333; line-height:18px; font-weight:normal; text-align: left;}
.font18{ font-size: 18px; color: #333; line-height:18px; text-align: left;}
.font18center{ font-size: 18px; color: #333; line-height:18px; text-align: center;}
.font18 span{ color:#dd0000; font-weight:bold;}
.font14left{ font-size: 14px; color: #333; line-height:18px; text-align: left;}
.font12right{ font-size: 12px; color: #333; line-height:18px; text-align: right; font-weight:normal;}

.font14{ font-size: 13px; color: #666; line-height:20px; text-align: center; font-weight:normal;}
.font12table{ font-size: 12px; color: #666; line-height:20px; text-align: left; font-weight:normal;}
.font14red{ font-size: 13px; color: #E10000; line-height:20px; text-align: center; font-weight:normal;}
.font16redcenter{ font-size: 16px; color: #E10000; line-height:20px; text-align: center; font-weight:normal;}

.font16red{ font-size: 16px; color: #E10000; line-height:20px; text-align: left; font-weight:normal;}

.font16{ font-size: 16px; color: #666; line-height:24px; text-align: center; font-weight:normal;}
.font16 span { color:#dd0000; font-weight:bold;}
.remark{ font-size: 13px; color: #dd0000; line-height:14px; text-align: left;font-weight:normal;}

#myNavbar .menu-color {
		font-size:22px; color: #000;
/*		font-size:22px; color: #FFF; */

}

.img-rounded {
  border-radius: 50%;
	padding: 3px;
}
.icon-sm {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100px;
}
.content-box {
    padding : 0px;
    margin-top: 10px;
    margin-right: 0px;
    border: 1px solid transparent;
    border-color: #CCC;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}
.content-box-50 {
    border: 1px solid transparent;
    border-color: #CCC;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
		width: 50%;
			padding: 30px 10px;
			margin: auto;
}
@media (max-width: 767px) {
		.content-box-50 {
		    border: 1px solid transparent;
		    border-color: #CCC;
		    border-radius: 8px;
		    background-color: rgba(255, 255, 255, 0.8);
		    color: #333;
				width: 90%;
					padding: 30px 10px;
					margin: auto;
		}
}

/*************************
*******topic******
**************************/

#topic {
    padding-top: 10px;
    padding-bottom: 0px;
}

#topic .bg-topic{
	  width:80%;
		background: url(../images/bg_topic.png);
/*		background: url(../images/bg_choice.png); */
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
		border: 1px solid transparent;
		border-color: #012d5c;
		border-radius: 30px;
}
#topic .bg-topic .text-topic{
	text-align: center;
	padding-top: 12px;
	padding-bottom : 15px;
	font-size: 20px;
}
#topic .bg-topic .text-topic span{
	font-size: 24px;
}
@media (max-width: 767px) {
	#topic .bg-topic{
			width:90%;
			background: url(../images/bg_topic.png);
	/*		background: url(../images/bg_choice.png); */
			background-repeat: repeat;
			background-size: 100% 100%;
			border: 1px solid transparent;
			border-color: #012d5c;
			border-radius: 30px;
	}
	#topic .bg-topic .text-topic{
		text-align: center;
		padding-top: 15px;
		padding-bottom : 15px;
		font-size: 20px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	#topic .bg-topic{
			width:90%;
			background: url(../images/bg_topic.png);
/*	  background: url(../images/bg_choice.png); */
			background-repeat: repeat;
			background-size: 100% 100%;
			border: 1px solid transparent;
			border-color: #D98412;
			border-radius: 30px;
	}
	#topic .bg-topic .text-topic{
		text-align: center;
		padding-top: 15px;
		padding-bottom : 15px;
		font-size: 20px;
	}
}
@media (min-width: 992px) and (max-width: 1366px) {
	#topic .bg-topic{
			width:90%;
			background: url(../images/bg_topic.png);
/*		background: url(../images/bg_choice.png); */
			background-repeat: repeat;
			background-size: 100% 100%;
			border: 1px solid transparent;
			border-color: #D98412;
			border-radius: 30px;
	}
	#topic .bg-topic .text-topic{
		text-align: center;
		padding-top: 15px;
		padding-bottom : 15px;
		font-size: 20px;
	}
}


#topic .text-center h2 {
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 10px;
    color: #FFF;
}

#topic .text-center span {
    color: #333;
}


/*************************
*******maintopic******
**************************/
#maintopic .plan {
    position: relative;
    margin-bottom: 20px;
}

#maintopic .choice-area ul {
	background: url(../images/bg_topic.png) center;
/*	background: url(../images/bg_choice.png) center; */
	background-repeat:  repeat-y;
	background-size: 100%;
	width: 100%;
    padding: 0;
    margin: auto;
		border: 1px solid transparent;
		border-color: #FFF;
		border-radius: 20px;
}
@media (max-width: 767px) {
	#maintopic .choice-area ul {
		background: url(../images/bg_topic.png) center;
/*	background: url(../images/bg_choice.png) center; */
		background: url(../images/bg_choice.png) center;
		background-repeat:  repeat-y;
		background-size: 100% 100%;
		width: 80%;
	    padding: 0;
	    margin: auto;
			border: 1px solid transparent;
			border-color: #FFF;
			border-radius: 20px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#maintopic .choice-area ul {
		background: url(../images/bg_topic.png) center;
/*	background: url(../images/bg_choice.png) center; */
		background-repeat:  repeat-y;
		background-size: 100% 100%;
		width: 100%;
	    padding: 0;
	    margin: auto;
			border: 1px solid transparent;
			border-color: #FFF;
			border-radius: 20px;
	}
}
@media (min-width: 992px) and (max-width: 1366px) {
	#maintopic .choice-area ul {
		background: url(../images/bg_topic.png) center;
/*	background: url(../images/bg_choice.png) center; */
		background-repeat:  repeat-y;
		background-size: 100% 100%;
		width: 100%;
	    padding: 0;
	    margin: auto;
			border: 1px solid transparent;
			border-color: #FFF;
			border-radius: 20px;
	}
}

#maintopic .choice-area ul li {
    list-style: none;
		font-size: 16px;
		padding: 18px 5px;
		margin: auto;
}

#maintopic .choice-area ul li  span {
		font-size: 26px;
    color: #FFF;
}
#maintopic .choice-area ul a {
		font-size: 16px;
    color: #FFF;
}
#maintopic .choice-area ul a:hover {
		font-size: 16px;
    color: #FBB03B;
}
#maintopic .choice-area ul  a:hover li span{
		font-size: 26px;
    color: #FBB03B;
}
#maintopic .img-radius{
		border-radius: 20px;
}
/*************************
*******Vote******
**************************/

#vote {
    padding-top: 40px;
    padding-bottom: 20px;
}
#vote .bg-choice{
		background: url(../images/bg_choice.png) center;
		background-repeat:  repeat-y;
		background-size: 100% ;
		width: 70%;
		padding: 0;
		margin: auto;
}
#vote .text-center  {
    font-size: 18px;
    padding: 10px 0;
    color: #FFF;
}
#vote .plan {
    position: relative;
    margin-bottom: 20px;
}

#vote .choice-area ul {
	background: url(../images/bg_choice.png);
	background-repeat:  repeat-y;
	background-size: 100%;
	width: 90%;
    padding: 0;
    margin: auto;
}

#vote .choice-area ul li {
    list-style: none;
		font-size: 16px;
		padding: 10px 0;
}

#vote .choice-area ul li  span {
		font-size: 24px;
    color: #FFF;
}


@media (max-width: 767px) {
	#vote .choice-area ul {
		background: url(../images/bg_choice.png);
		background-repeat:  repeat-y;
		background-size: 100%;
		width: 80%;
	    padding: 0;
	    margin: auto;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#vote .choice-area ul {
		background: url(../images/bg_choice.png);
		background-repeat:  repeat-y;
		background-size: 100%;
		width: 100%;
	    padding: 0;
	    margin: auto;
	}

	#vote .choice-area ul li {
	    list-style: none;
			font-size: 14px;
			padding: 10px 0;
	}

	#vote .choice-area ul li  span {
			font-size: 22px;
	    color: #FFF;
	}
}
@media (min-width: 992px) and (max-width: 1366px) {
	#vote .choice-area ul {
		background: url(../images/bg_choice.png);
		background-repeat:  repeat-y;
		background-size: 100%;
		width: 90%;
	    padding: 0;
	    margin: auto;
	}

}


#vote .choice-area .bg-none{
	background-color: #FBB03B;
	background-image: none;
	color: #000;
}


#vote .btn-vote {
  background-color: #FBB03B;
  border-color: #D98412;
  color: #000;
  font-size: 14px;
  padding: 5px 2px;
	width: 100%;
	margin-top: 1px;
}
#vote  .btn-vote:hover  {
  background-color: #D37E18;
  border-color: #ffc77d;
  color: #000;
}

#vote .btn-vote-yna2024 {
  background-color: #DFC6D3;
  border-color: #DFC6D3;
  color: #000;
  font-size: 14px;
  padding: 5px 2px;
	width: 100%;
	margin-top: 1px;
}
#vote  .btn-vote-yna2024:hover  {
  background-color: #B2427A;
  border-color: #B2427A;
	color: #fff;
/*  color: #000; */
}

#en {
	width: 90%;
  padding: 20px 10px;
  text-align: left;
  margin-top: 20px;
	margin-bottom: 20px;
	height: 500px;
	overflow: auto;
}

#th {
  width: 90%;
  padding: 20px 10px;
  text-align: left;
  margin-top: 20px;
	margin-bottom: 20px;
	height: 500px;
	overflow: auto;
}
tableList
.countdown{
	width: 100%;
	overflow: auto;
}

.bluelight {
  text-shadow: 0 0 10px #3498DB,
               0 0 20px #3498DB,
               0 0 30px #3498DB,
               0 0 40px #2980B9,
               0 0 70px #2980B9,
               0 0 80px #2980B9,
               0 0 100px #2980B9,
               0 0 150px #2980B9;
}

.clock {
    overflow: hidden;
}

.col-md-12 {
    overflow: hidden;
    padding-bottom: 10px;
}

.top-section {
  margin-bottom: 0px;
  border-radius: 5px 5px 0px 0px;
  background-color: #c00000;
  border: 0px;
	padding: 5px;
}

.bottom-section {
  margin-top: 0px;
  border-radius: 0px 0px 5px 5px;
  background-color: #920000;
  border: 0px;
	padding: 4px;
}

@media (min-width: 768px) {
  .num {
    font-size: 24px;
  }
	.countdown{
		width: 400px;
		overflow: auto;
	}
}

@media (max-width: 767px) {
  .num {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .num {
    font-size: 20px;
  }
}

@media (min-width: 768px) {
  .text {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .text {
    font-size: 14px;
  }
}

#tableList {
  width: 100%;
	height: 400px;
	overflow: auto;
}

.vote-box-50 {
		width: 50%;
			padding: 30px;
			margin: auto;
}
@media (max-width: 767px) {
		.vote-box-50 {
				width: 100%;
					padding: 30px;
					margin: auto;
		}
}

.img-txt-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
