@charset "utf-8";
/* CSS Document */

body {
	margin:0;
	padding:0;
	font-family:"微軟正黑體";
	color:#000;
}

* {box-sizing: border-box;}
._m{display:none!important}
@media screen and (max-width:800px){._m{display:block!important}}
@media screen and (max-width:800px){._pc{display:none!important}}

a{text-decoration:none; color:#0eaaea; }
a:hover{ color:#004766;}

.top_banner {
	float:left;
	width:100%;
	padding:5px 0px;
	background-color:#5ab3ce;
}

.top_banner_menu {
	position: relative;
	max-width:1400px;
	width:100%;
	margin:0 auto;
	font-size:24px;
}

.top_banner_logo {
	width:29%;
	float:left;
	margin-left:1%;
}

.top_banner_logo img{
	width:360px;
	height:auto;
	margin-top:5px;
}


@media screen and (max-width:800px){
.top_banner_logo img{
	width:300px;
	height:auto;
}	
}

.top_menu {
	width:200px;
	float:right;
}

.main_banner {
	float:left;
	width:100%;
}

.main_banner_img {
	width:100%;
	max-width:1400px;
	height:auto;
	margin:0 auto;
}

.main_banner_img img{
	width:100%;
	height:auto;
}


.topnav {
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight:bold;
}

.active {
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 20px 16px;
  font-family: inherit;
  font-weight:bold;
  margin: 0;
  background-color:#5ab3ce;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 16px;
  font-weight:normal;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  color:#0f6394;
}

.dropdown-content a:hover {
  color:#0f6394;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.level_banner {
	background-color:#43a098;
	float:left;
	width:100%;
	padding:0px;
}

.level {
	width:100%;
	max-width:1400px;
	margin:0 auto;
}

.level_box {
	width:20%;
	float:left;
	text-align:center;
	padding:1px 6px;
}

.level_box img{
	width:100%;
	max-width:150px;
}

.bgcolor_1 { background-color:#77b5b2;} 
.bgcolor_2 { background-color:#96ceb5;} 
.bgcolor_3 { background-color:#cae5d4;} 
.bgcolor_4 { background-color:#fcd7a2;} 
.bgcolor_5 { background-color:#f9c49a;} 

.main2_bg {
	background-color:#FFF;
	float:left;
	width:100%;
	padding:90px 10px;
}

.main2 {
	width:100%;
	max-width:1400px;
	margin:0 auto;
}

.class_box {
	width:29%;
	float:left;
	border:#ececec 1px solid;
	margin:10px 2%;
}

@media (max-width: 800px) {
.class_box {
	width:96%;
	float:left;
	border:#ececec 1px solid;
	margin:10px 2%;
}
}

/* Create two equal columns that floats next to each other */

.tab_column1 {
  background-color:#FFF;
  color:#0a62a9;
  float: left;
  width: 48%;
  padding:15px 10px;
  border:#2776b1 1px solid;
  border-radius: 12px;
  margin:1%;
  font-size:25px;
  font-weight:bold;
  text-align:center;  
} 


.tab_column {
  background-color:#ebfffd;
  color:#7cc0ef;
  float: left;
  width: 48%;
  padding:15px 10px;
  border:#2776b1 1px solid;
  border-radius: 12px;
  margin:1%;
  font-size:25px;
  font-weight:bold;
  text-align:center;  
} 

.tab_column:hover {
  background-color: #cff8ff;
  color:#7cc0ef;
  cursor: pointer;
} 



/* Clear floats after the columns */
.tab_row:after {
  content: "";
  display: table;
  clear: both;
}


.tab_info {
  background-color:#FFF;
  color:#0a62a9;
  float: left;
  width: 98%;
  padding:35px;
  border:#2776b1 1px solid;
  border-radius: 12px;
  margin:0 1%;
  font-size:19px;
} 


.tab_info ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab_info ul li {
	border-bottom:#b3b3b3 1px dashed;
    padding: 12px;
    color:#f5977b;
	font-weight:normal;
}

.tab_info ul li a{
    color:#4d4d4d;
	margin-left:10px;
	font-weight:normal;
}

.tab_info ul li a:hover{
    color:#0863a9;
}

.btn_new {
  background-color: #ff7bad;
  border: none;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 16px;
  font-size:9px;
  padding: 4px 8px;
  margin-left:5px;
} 


.btn_more {
	float:left;
	margin:0 auto;
	background-color:#FFF;
	color:#02d1cb;
	margin-top:30px;
	padding:10px 40px;
	border:#02d1cb 1px solid;
	border-radius: 25px;
	font-size:19px;
} 

.btn_more a{
  color:#02d1cb;
} 

.btn_more a:hover {
  color:#43a098;
  border:#43a098 1px solid;
} 

.btn_more hover {
  color:#43a098;
  border:#43a098 1px solid;
}


/* 認證機構 */
.company_bg {
	background-color:#49b2ab;
	float:left;
	width:100%;
	padding:90px 10px;
}

.font_white {color:#FFF;}

.company {
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

.company_lt{
  float: left;
  width: 48%;
  padding:0px 10px;
  margin:1%;
  font-size:25px;
  font-weight:bold;
}

.company_detail{
	border:#dddddd 1px solid;
	padding:35px;
	width:98%;
	background-color:#FFF;
}

.company_detail p{
	color:#666;
	font-size:17px;
	font-weight:normal;
}

.company_rt{
  float: left;
  width: 48%;
  border:#ddd 1px solid;
  margin:1%;
}

.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-family:"微軟正黑體";
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-inline select {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  width:48%;
  font-family:"微軟正黑體";
  font-size:19px;
}

.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: royalblue;
}

@media (max-width: 800px) {
.company_rt{
  float: left;
  width: 95%;
  margin:2.5%;
}
.company_lt{
  float: left;
  width: 100%;
}

.main2_bg {
	float:left;
	width:100%;
	padding:50px 10px;
}

.company_bg {
	float:left;
	width:100%;
	padding:50px 10px;
}
}

@media (max-width: 1150px) {
.form-inline select {
  width:98%;

}
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  font-family:"微軟正黑體";
}

.button1 {
  background-color:#6eb1e5; 
  border-radius: 10px;
  color:#FFF;
  border: 1px solid #6eb1e5;
}

.button2 {
  background-color:#f59879; 
  border-radius: 10px;
  color:#FFF;
  border: 1px solid #f59879;
}


.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
  cursor: pointer;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;cursor: pointer;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
  cursor: pointer;
}

/* 相關連結 */
.links_bg {
	background-color:#f2f2f2;
	width:100%;
	padding:60px 10px 50px 10px;
	float:left;
}

.links {
	width:100%;
	max-width:1400px;
	margin:0 auto;
	text-align:center;
}



/* 頁尾 */
.footer {
  width: 100%;
  background-color: #eee;
  color: #000;
  text-align: center;
  float:left;
  padding:30px 10px 30px 10px;
  font-size:17px;
  font-weight:normal;
}

.footer a{
  color: white;
  text-decoration:none;
}

.footer a:hover{
  color: #FF0;
  text-decoration:none;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  z-index: 99;
  font-size: 30px;
  border:#fca639 1px solid;
  outline: none;
  background-color:#fca639;
  color: white;
  cursor: pointer;
  width:50px;
  height:50px;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #FFF;
  border:#ec7c4f 1px solid;
  color:#ec7c4f;
}

.container_pt {
  position: relative;
  text-align: center;
  color: white;
}

.container_pt img{
	width:100%;
	height:auto;
	border-radius:20px 20px 0 0;
}

.bottom-left_pt {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color:#77b5b2;
  font-family:"微軟正黑體";
  font-size:19px;
  line-height:21px;
  padding:10px 20px;
}

.pt_bg2 { background-color:#96ceb5;}
.pt_bg3 { background-color:#cae5d4;}
.pt_bg4 { background-color:#fcd7a2;}
.pt_bg5 { background-color:#f9c49a;}

.top-left_pt {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right_pt {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right_pt {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered_pt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card_pt {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width:100%;
  margin: auto;
  text-align: left;
  font-family:"微軟正黑體", arial;
  background-color:#FFF;
  border-radius:20px;
}

.card_txt_pt {
	padding:10px 15px 1px 15px;
}

.title_pt {
  color:#0f6394;
  font-size: 23px;
  font-weight:bold;
  height:60px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #5ab3ce;
  border:#5ab3ce 1px solid;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  font-family:"微軟正黑體";
}

a {
  text-decoration: none;
  color: black;
  font-family:"微軟正黑體";
}

button:hover, a:hover {
  background-color: #FFF;
  color:#5ab3ce;
}

.card_li_h {
	padding-bottom:10px;
}

.font_gray {color:#4d4d4d;}

.pad_15 { padding:1.5%;}


.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


.video-container {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute; 
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}