/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
	font-family: 'Microsoft JhengHei', sans-serif;
	/* background: #edf7ff; */
	/* background-image: linear-gradient(to bottom right, #edf7ff, #215ec2); */
	background-image: url('../images/bg.png'); 
	background-size: 100% auto;
	font-size: 16px;
}

html {
	min-height: 100%;
}

a{
  color:#333; cursor: pointer;
}

a:hover {
  color:#666;
  text-decoration:none;
  cursor: pointer;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  /* width: 240px;
  height: 70px;
  background-image: url('../images/submit.png'); */
  border: none;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: contain;
}

button:hover {
 transform: translate(1px,1px);
}

.button1 {
  width: 240px;
  height: 70px;
  background-image: url('../images/submit.png');
}

.button2 {
  width: 380px;
  height: 120px;
  background-image: url('../images/advanced.png');
}

.button_cert {
  width: 380px;
  height: 120px;
  background-image: url('../images/cert.png');
}

/* .top { max-width: 1920px; margin: auto; top: -20px; position: relative; } */
.top { max-width: 1920px; margin: auto; top: -25px; position: relative; }
.footer { max-width: 1920px; margin: auto; background-color: #FFFFFF; padding:30px; color:#08b0e6; }
.footer_blue { max-width: 1920px; margin: auto; background-color: #08b0e6; padding:30px; color:#FFFFFF; }
.index_count { max-width: 1920px; margin: auto; background-color: #FFFFFF; padding:30px; color:#08b0e6; }

.logo_top { background-color: #FFFFFF; padding:15px 30px; }
.logo { height:70px; }

.shadow { /* box-shadow: 3px 3px 5px #888888; */ padding:50px; margin-bottom:70px; background-color: #fff; border-radius: 30px; }

.shadow2 { /* box-shadow: 3px 3px 5px #888888; */ padding:50px; margin-bottom:70px; background-color: #fff; border-radius: 0 30px 30px 30px; }

.shadow3 { /* box-shadow: 3px 3px 5px #888888; */ padding:50px; margin-bottom:70px; background-color: #fff; border-radius: 30px; }

.question { font-size: 18px; color:#215ec2; background-color: #b6f2fe; padding:10px; border-radius: 10px; margin-bottom:10px; }

.row { font-size: 16px; letter-spacing:2px} 

.topic { color:#c09d78; font-size:22px } 

.error { color:#F30; font-size:14px; }

.topic1_img { height:80px; margin:30px auto;  }

.topic1_img_xs { height:100px; margin:20px auto;  }

.subtopic { background-color: #25aaea; color: #fff; border-radius: 25px; margin-bottom: auto; padding: 10px 30px; width: fit-content; font-weight: bold; font-size: 20px; margin-bottom: 20px; }

.img_topic { height:48px; }

.btn_join { height: 70px; }

.intro { font-size:20px; letter-spacing: 2px; line-height: 40px; }

.overlay_txt1 { position: absolute; top: 50%; width: 94%; text-align: center; }
.overlay_txt2 { position: absolute; top: 50%; width: 94%; text-align: center; }
.overlay_txt3 { position: absolute; top: 50%; width: 94%; text-align: center; }

.txt1 { color: #000000; font-size: 32px; font-weight: bold; }

.txt2 { color: #154659; font-size: 18px; margin-top:20px; }

.txt_school { color: #000000; font-size: 22px; font-weight: bold; }

.mfn-item {
	/* font-family: "Poppins",Helvetica,Arial,sans-serif; */
	font-family: 'Microsoft JhengHei', sans-serif !important;
}

.top_btn {font-size:22px; padding:20px; float: right; }

.info_box { display: table; margin: auto; }

.info_box_size1 { width: 75%; }
.info_box_size2 { width: 50%; }


@media(max-width: 767px) {
	.logo_top { background-color: #FFFFFF; padding:10px; }
	.logo { height:40px; }
	.shadow { padding:20px; padding-top: 40px; }
	.shadow2 { padding:20px; padding-top: 20px; }
	.shadow3 { padding:20px; padding-top: 20px; }
	.button1 { width: 200px; height: 70px; }
	.button2 { width: 280px; height: 120px; }
	.button_cert { width: 280px; height: 120px; }
	.img_topic { height:40px; }
	.btn_join { height: 50px; }
	.top_btn {font-size:15px; padding:7px; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.logo_top { background-color: #FFFFFF; padding:15px 30px; }
	.logo { height:50px; }
	.button1 { width: 210px; height: 70px; }
	.button2 { width: 320px; height: 120px; }
	.button_cert { width: 320px; height: 120px; }
	.shadow { padding:30px; padding-top: 40px; }
	.shadow2 { padding:30px; padding-top: 40px; }
	.shadow3 { padding:30px; padding-top: 40px; }
	.img_topic { height:42px; }
	.intro { font-size:18px; letter-spacing: 2px; line-height: 30px; }
	.top_btn {font-size:18px; padding:13px; }
	
	.info_box_size1 { width: 100%; }
	.info_box_size2 { width: 70%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	hr {
  		margin-top: 20px;
  		margin-bottom: 20px;
		border-top: 1px solid #fff;
	}
	.logo_top { background-color: #FFFFFF; padding:15px 30px; }
	.logo { height:60px; }
	.button1 { width: 220px; height: 70px; }
	.button2 { width: 360px; height: 120px; }
	.button_cert { width: 360px; height: 120px; }
	.shadow { padding:40px; padding-top: 40px; }
	.shadow2 { padding:40px; padding-top: 40px; }
	.shadow3 { padding:40px; padding-top: 40px; }
	.img_topic { height:45px; }
	.top_btn {font-size:20px; padding:13px; }
	
	.info_box_size1 { width: 100%; }
	.info_box_size2 { width: 70%; }
}

@media (min-width: 1200px) {
	hr {
  		margin-top: 20px;
  		margin-bottom: 20px;
		border-top: 1px solid #fff;
	}
}