:root {
  --color1: #ffff00;
  --color2: #008b7c;
}

/* General */
body {
	/* background: #31469C; */
	/* background-image: linear-gradient(to right top, #31469c, #1659a9, #006bb3, #007cba, #008cbe, #009bc6, #00a9cd, #00b8d2, #00cadc, #00dce2, #00eee6, #00ffe6); */
	background-image: linear-gradient(to right top, #003db5, #0052c3, #0065cf, #0078d9, #008be2, #0096e3, #00a0e1, #00aadf, #00aed3, #00afc0, #00b0aa, #00af91);
	/* background-image: url('../img/bg_8.png'); */
	background-size: cover;
	background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center top; 	
	color: white;
	font-size: 15pt;
}

.il-index{
	background-image: linear-gradient(to right top, #31469c, #1659a9, #006bb3, #007cba, #008cbe, #009bc6, #00a9cd, #00b8d2, #00cadc, #00dce2, #00eee6, #00ffe6);
}

h2 {
  color: var(--color1);
  font-size: 30pt;
  font-weight: bold;
}
h3 {
  font-size: 20pt;  
	color: #1effff;
	font-weight: bold;
}

h4 {
  font-size: 20pt;
}

p {
  text-align: justify; 
}

a{
	color: #ffff00;
}

.btn{
	background-color: #8b00ff;
	color: white;
}



.btn:hover{
	background-color: #b864ff;
	color: white;
}

.progress{
	height: 25px;
}

.table>:not(caption)>*>*{
	background-color: inherit;
	color: white;
	padding: 20px;
	border: 2px solid white;
}

/* .progress-bar.animated {
  animation: fillBar 1s ease-out;
}

@keyframes fillBar {
  from { width: 0%; }
  to { width: 45%; }
} */

.il-suggestion th:first-child{
	width: 10px;
}

.il-logo{
	
}

.il-share {
	min-width: 165px !important;
}

.il-share li{
	display: inline-block;
}

.fa-award{
	color: yellow;
	padding-right: 10px;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-4 {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-4::after {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #bbb;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-4 {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-4::after {
  /* content: "\f073"; */
  font-family: "Font Awesome 7 Free";
	font-weight: 900;
  position: absolute;
  width: 40px;
  height: 40px;
	font-size: 20pt;
  right: -18px;
  background-color: white;
  top: 15px;
  border-radius: 50%;
  text-align: center;
	color: #065dad;
}

.il-icon1::after {
	content: "\f3c9";
	z-index: 1;

}

.il-icon2::after {
	content: "\f303";
	z-index: 2;
}

.il-icon3::after {
	content: "\f073";
	z-index: 3;
}

.il-icon4::after {
	content: "\f164";
	z-index: 4;
}

.il-icon5::after {
	content: "\f086";
	z-index: 5;
}

.il-icon6::after {
	content: "\e53d";
	z-index: 6;

}

.il-icon7::after {
	content: "\f091";
	z-index: 7;
}

.il-header{
	background-color: white;
}

.navbar{
	box-shadow: none !important;
}

/* Place the container to the left */
.left-4 {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right-4 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left-4::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid #e0adfa;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #00e7e7;
}

/* Add arrows to the right container (pointing left) */
.right-4::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid rgba(245, 87, 108, 1);
  border-width: 10px 10px 10px 0;
  border-color: transparent #00e4bf transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-4::after {
  left: -19px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline-4::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline-4 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline-4::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left-4::after,
  .right-4::after {
    left: 18px;
  }

  .left-4::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right-4 {
    left: 0%;
  }
}

.gradient-custom {
  /* fallback for old browsers */
  background: #00e7e7;
	border: 0;
	color: black;
	border-top-left-radius: 50px 50px;
	border-bottom-right-radius: 50px 50px;
	min-height: 180px;
	border-left: 5px solid #1979ab;
	border-bottom: 5px solid #1979ab;
	/* background-image: linear-gradient(to left top, #b4ccf3, #aed2f8, #a9d8fc, #a3defe, #9fe4ff); */
	/* background-image: linear-gradient(to right top, #2eca29, #80ec15, #31e594, #2acbd3, #1cfcbd); */
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: -webkit-linear-gradient(
    to right,
    rgba(43, 155, 159, 1),
    rgba(37, 117, 252, 1)
  ); */

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* background: linear-gradient(
    to right,
    rgba(43, 155, 159, 1),
    rgba(37, 117, 252, 1)
  ); */
}

.gradient-custom-4 {
  /* fallback for old browsers */
  background: #00e4bf;
	color: black;
	border: 0;
	border-top-right-radius: 50px 50px;
	border-bottom-left-radius: 50px 50px;
	min-height: 180px;
	border-right: 5px solid #31979b;
	border-bottom: 5px solid #31979b;
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: -webkit-linear-gradient(
    to left,
    rgb(247, 238, 73),
    rgb(25, 255, 251)
  );

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* background: linear-gradient(
    to left,
    rgb(247, 238, 73),
    rgba(25, 255, 251)
  ); */
}
/* nav bar */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 品牌標誌樣式 */
.navbar-brand img {
  transition: transform 0.3s ease;
}

.il-c-border{
  border: 2px solid white;
  padding: 10px 20px;
}

.il-c-border h4{
  color: var(--color1);
}

.navbar-brand img:hover {
  transform: scale(1.1);
}

/* 導航連結樣式 */
.il-header{
	background-color: white;
}

.navbar-nav .nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem;
  margin: 0 0.1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  position: relative;
}
.il-desktop-nav .nav-item {
  min-width: 100px;
  text-align: center;
}


.navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

*:lang(tc) .nav-item {
	padding-left: 10px; 
	padding-right: 10px;
}

/* 下拉選單樣式 */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.dropdown-item {
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  padding-left: 1.5rem;
}

/* 立即報名按鈕樣式 */
.btn-primary {
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 分享按鈕樣式 */
.share-icon {
  font-size: 1.2rem;
  padding: 0.5rem;
}

.share-btn {
  min-width: auto;
  padding: 0.5rem;
}

.share-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem;
  color: white;
  transition: all 0.3s ease;
}

.share-link:hover {
  transform: scale(1.1);
  color: white;
}

/* 語言切換器樣式 */



.il-md-lang {
	padding: 0;
}

.il-md-lang li{
	display: inline-block;
}

.il-md-lang li a{
	color: var(--bs-nav-link-color);
}

#langDropdown {
	font-size: 14pt;
  font-weight: 500;
}
.share-md-holder li {
  list-style: none;
}
.il-lang-switcher{
    font-size: 10pt !important;
}

.il-eligibility {
  min-height: 200px;
  height: 100%; 
  border: 2px dashed #c8ffff;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between;  */
}

.il-award {
  min-height: 200px;
  height: 100%; 
  border: 2px dashed #c8ffff;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between;  */
}
.il-judging {
  border: 2px dashed #c8ffff;
  padding: 30px 20px;
  margin-bottom: 30px; /* 可選：讓每組之間有距離 */
  
}

.il-prize-tb td{
	vertical-align: middle;
}

.il-example{
	width: fit-content;
	border: 1px solid white;
  padding: 10px 40px;
  margin: 10px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto; /* 水平置中 */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
td {
  word-break: break-word;
  white-space: normal;
}

/* Footer Start */
footer{
	background-color: white !important;
}
.il-copyright {
  background-color: var(--color2);
  color: white;
}
/* Footer End */
@media (min-width: 300px) { 

	.il-prize-tb{
		font-size: 0.65rem;
	}

	.il-logo {
			max-height: 30px;
	}

	*:lang(en) .nav-item a{
		font-size: 12pt;
	}	
  
 }

@media (min-width: 576px) { 

	.il-prize-tb{
		font-size: 0.8rem;
	}

	.il-logo {
			max-height: 45px;
	}

	*:lang(en) .nav-item a{
		font-size: 10pt;
	}	

 }

@media (min-width: 768px) { 

.il-left-block, .il-right-block{
	width: 300px;
}
	
	.il-prize-tb{
		font-size: 1.2rem;
	}

	*:lang(en) .nav-item {
		font-size: 12pt;
	}		
  .il-logo {
			max-height: 60px;
	}
 }

@media (min-width: 992px) { 
	*:lang(en) .nav-item {
		font-size: 12pt;
	}		
 }

@media (min-width: 1200px) { 
	*:lang(en) .nav-item {
		font-size: 12pt;
	}	
 }

@media (min-width: 1400px) { 
	*:lang(en) .nav-item {
		font-size: 8pt;
	}
	*:lang(en) .il-join-btn{
		font-size: 8pt;
	}
	*:lang(tc) .nav-item {
		font-size: 12pt;
	}
	*:lang(tc) .il-join-btn{
		font-size: 12pt;
	}	
}

@media (min-width: 1800px) { 
	*:lang(en) .nav-item {
		font-size: 12pt;
	}
	*:lang(en) .il-join-btn {
		font-size: 12pt;
	}	
	*:lang(tc) .nav-item {
		font-size: 15pt;
	}
	*:lang(tc) .il-join-btn{
		font-size: 15pt;
	}	

}