*,*:before, *:after {
  -mov-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#web-top {
  width:100%;
  margin:0;
  padding:0 0 1% 0;
  display:block;
  background: -webkit-linear-gradient(left,#0268e8,#51279d);
	background: -o-linear-gradient(right,#0268e8,#51279d);
	background: -moz-linear-gradient(right,#0268e8,#51279d);
	background: linear-gradient(to right,#0268e8,#51279d);
}
.webcontent {
	width:1200px;
	margin: 0 auto;
	padding:0;
	display:block;
}
header {
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  display:block;
}
#head1 {
	width:30%;
	margin:0;
	padding:2% 0 0 0;
	float:left;
}
#head2 {
  width:70%;
  margin:0;
	padding:2% 0 0 0;
	float:left;
}
nav {
	width:100%;
	margin:0;
	padding:3% 0 0 0;
	float:left;
}
nav ul{ 
    margin: 0 auto;
    padding:0;
    width:100%;
    display:block;
}

/* Alex 20240604 - this works (the dropdown will show now)
This will not affect the behavior 
because the show_infolist() already covered this
nav ul li ul li a:hover {
	display: block;        
	padding:1% 3%;
	color: #fff;
	text-decoration: none;
} */

nav li{
    position: relative;
    width:100%;
    float: left;
    color: #fff;
    text-align:center;
    list-style: none;
    z-index:5;
}
nav li a {
    display: block; 
    maigin:0 auto;       
    padding:1% 3%;
    color: #fff;
    text-align:center;
    text-decoration: none;
}
nav li a:hover {
    display: block;        
    padding:1% 3%;
    color: #fff;
    text-decoration: none;
}
nav li ul {
    background-color: #3340ba;opacity:0.9;
    display: none;
    position: absolute;
    padding:1%;
    top: 150%;
    width:120%;
    font-family: "微軟正黑體";
    font-size:14px;
    border:1px solid #126b77;
}
nav li ul > li{
    display: block;
    right: 5;
    left: 0;
    width:98%;
    padding:1%;
    text-align:center;
    font-weight:bold;
    font-family: "微軟正黑體";
    font-size:14px;
    border-bottom: 1px solid #126b77;
}
nav li:hover ul > li{
    display: block;
    right: 5;
    left: 0;
    width:98%;
    padding:1%;
    text-align:center;
    font-weight:bold;
    font-family: "微軟正黑體";
    font-size:14px;
    border-bottom: 1px solid #126b77;
}
nav li:hover ul > li:last-child{
    display: block;
    right: 5;
    left: 0;
    width:98%;
    padding:1%;
    text-align:center;
    font-weight:bold;
    font-family: "微軟正黑體";
    font-size:14px;
    border-bottom: 1px solid #3340ba;
}
nav li ul > li:hover{
    display: block;
    right: 5;
    left: 0;
    width:98%;
    padding:1%;
    text-align:center;
    font-weight:bold;
    font-family: "微軟正黑體";
    font-size:14px;
    background-color:#000;
    border-bottom: 1px solid #126b77;
}
#nav_mobile {
	width:100%;
	margin:3px 0 auto;
	padding:5px;
	background-color: #34d0ce;
	display:none;
	float:left;
}
#nav_mobile ul {
  width:100%;
  margin:0 auto;
  padding:3px 0;
  background-color: #34d0ce; 
  display:block;
  float:left;
}
#nav_mobile ul li {
  margin:0;
  width:100%;
  font-size:1em;
  font-family:"微軟正黑體";
  color:#FFF;
  background-color: #34d0ce;
  list-style-type: none;
  display:block; 
  line-height:25px;
  text-indent: 3px;
}

#nav_mobile ul li>a {
  font-size:1em;
  color:#333;
  font-weight:bold;
  background-color: #a4cbf3;
  list-style-type: none;
  display:block;
  float:left;
  width:100%;
  height:25px;
  line-height:23px;
  border:1px dotted #c5a992;
}

#nav_mobile ul li>a:hover {
  font-size:1em;
  color:#FFF;
  font-weight:bold;
  background-color: black;
  list-style-type: none;
  display:block;
  width:100%;
  height:25px;
  line-height:23px;
  text-decoration: none;
}

#nav_mobile ul li ul {
  font-size:1em;
  color:#333;
  background-color: #fce7d3;
  list-style-type: none;
  display:block;
  float:left;
  margin:0 auto;
  padding:0;
  width:100%;
}

#nav_mobile ul li ul li {
  font-size:1em;
  color:#333;
  list-style-type: none;
  display:block;
  float:left;
  margin:0 auto;
  width:100%;
  height:25px;
  line-height:23px;
  text-indent: 20px;
}

#nav_mobile ul li ul li>a {
  font-size:1em;
  color:#333;
  background-color: #fce7d3;
  list-style-type: none;
  display:block;
  margin:0 auto;
  width:100%;
  height:25px;
}

#nav_mobile ul li ul li>a:hover {
  font-size:1em;
  color:#ddd;
  font-weight:bold;
  background-color: black;
  text-decoration: none;
  display:block;
  margin:0 auto;
  width:100%;
}

#main_products {
	width:75%;
	margin:0 auto;
	padding:2% 0;
	display:block;
	float:left;
}
#top_right {
  width:25%;
	margin:0 auto;
	padding:2% 0;
	display:block;
	float:left;
}
#right1, #right2 {
  width:100%;
  margin:0;
  padding:4%;
  display:block;
  float:left;
}
#home_products {
  width:100%;
  height:auto;
  margin:0 auto;
  padding:3% 0;
  display:block;
  background-color:#ffffff;
}
#products_title {
  width:22%;
  margin:0;
  padding:0 3%;
  display:block;
  float:left;
}
#products_content {
  width:78%;
  margin:0;
  padding:0;
  display:block;
  float:left;
}
#about_news {
  width:100%;
  height:auto;
  margin:0 auto;
  padding:3% 0;
  display:block;
}
#home_news {
  width:40%;
  margin:0 auto;
  padding:0 2% 0 0;
  display:block;
  float:left;
}
#home_about {
  width:35%;
  margin:0 auto;
  padding:0 2%;
  display:block;
  float:left;
}
#home_intro {
  width:25%;
  margin:0 auto;
  padding:0 2%;
  display:block;
  float:left;
}
.c {
  clear:both;
}
#marquee_line {
  width:100%;
  
}
#webcenter {
  width:100%;
  background-color:#fff;
  margin:0 auto;
  padding:0;
}
aside {
  width:18.5%;
  margin:0 0.75% 0 0;
  padding:2% 0;
  display:block;
  float:left;
}
article {
  width:80.75%;
  margin:0;
  padding:2% 1%;
  display:block;
  float:left;
}

#counter {
  width:100%;
  margin:0 auto;
  padding:2% 1% 1% 1%;
}
.info {
  width:100%;
  height:auto;
  padding:0;
  display:inline-block;
}
#footer1{
  width:100%;
  margin:0 auto;
  padding:1% 0;
  background-color:#222;
}
#footer1_left {
  width:86%;
  margin:0 auto;
  padding: 0.5% 0.5%;
  float:left;
}
#left_top,#left_bottom {
	width:100%;
	margin:0;
	padding:0;
	display:block;
}
#bottom1, #bottom2 {
  width:50%;
  margin:0;
  padding:1% 3%;
  display:block;
  float:left;
}
#footer1_right {
  width:14%;
  margin:0 auto;
  padding:0.1%;
  float:left;
}
#footer2{
  width:100%;
  margin:0;
   padding:0.2% 0;
  display:block;
  background: -webkit-linear-gradient(left,#0268e8,#51279d);
	background: -o-linear-gradient(right,#0268e8,#51279d);
	background: -moz-linear-gradient(right,#0268e8,#51279d);
	background: linear-gradient(to right,#0268e8,#51279d);
}

#foote2_1 {
  width:50%;
  margin:0 auto;
  padding:1%;
  float:left;
}
#foote2_2 {
  width:50%;
  margin:0 auto;
  padding:1%;
  float:left;
}

.products {
  width:32%;
  height:auto;
  margin: 0 0.5% 10px 0.5%;
  padding:0;
  text-align:center;
  word-break:break-all;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
  border:2px dotted #ccc;
}
.products1 {
  width:23%;
  height:auto;
  margin: 0 0.5% 10px 0.5%;
  padding:0;
  text-align:center;
  word-break:break-all;
  vertical-align:top;
  display:inline-block;
  background-color:#fff
  overflow:hidden;
  border:2px dotted #ccc;
}
.iframe4x3 {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.iframe4x3 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
A.b01 {
  font-family : 微軟正黑體, sans-serif; font-size : 17px;
  color: #ffffff;
  line-height: 20px;
  text-decoration: none;
  }
a:hover.b01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 17px;
  color: #fff729;
  line-height: 20px;
  text-decoration: none;
}
A.e01 {
  font-family : 微軟正黑體, sans-serif; font-size : 15px;
  color: #e3e3e3;
  line-height: 20px;
  text-decoration: none;
  }
a:hover.e01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 15px;
  color: #ffffff;
  line-height: 20px;
  text-decoration: none;
}
.font2 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 26px;
	line-height: 35px;
	color: #010101;
	letter-spacing: normal;
}
.font7 {
	font-family: "微軟正黑體";	
	font-size: 15px;
	line-height: 23px;
	color: #323232;
	letter-spacing: normal;
}
.font10 {
	font-family: "微軟正黑體";	
	font-size: 16px;
	line-height: 25px;
	color: #f4f4f4;
	letter-spacing: normal;
}
.font11 {
	font-family: "新細明體";	
	font-size: 16px;
	color: #555555;
	letter-spacing: normal;
}
.font12 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 14px;
	color: #ffffff;
	letter-spacing: normal;
}
.font13 {
	font-family: "新細明體";	
	font-size: 22px;
	line-height: 20px;
	color: #bdbdbd;
	letter-spacing: normal;
}

@media only screen and (max-width:1200px) {
  .webcontent {
		width:100%;
		margin: 0 auto;
	}
	.products {
	  width:31%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:0;
	  text-align:center;
	  word-break:break-all;
	  display:block;
	  overflow:hidden;
	  float:left;
	  border:2px dotted #ccc;
	}
	.font15 {
		font-family: "微軟正黑體", "新細明體", "標楷體";
		font-size: 1.9vw;
		font-weight: 700;
		line-height: 35px;
		color: #2e2d2d;
		letter-spacing: normal;
	}
}

@media only screen and (max-width:800px) {
  .webcontent {
		width:100%;
		margin: 0 auto;
	}
	.web_only {
	  display:none;
	}
	#main_products {
		width:100%;
		margin:0 auto;
		padding:2% 0;
		display:block;
		float:left;
	}
	#top_right{
	  width:100%;
		margin:0 auto;
		padding:2% 0;
		display:block;
		float:left;
	}
	#right1, #right2 {
		width:50%;
	  margin:0;
	  padding:0 4%;
	  display:block;
	  float:left;
	}

  #products_title {
	  width:100%;
	  margin:0;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#products_content {
	  width:100%;
	  margin:0;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#home_news {
	  width:100%;
	  margin:0 auto;
	  padding:1% 0;
	  float:left;
	}
	#home_about {
	  width:60%;
	  margin:0 auto;
	  padding:0 2%;
	  display:block;
	  float:left;
	}
	#home_intro {
	  width:40%;
	  margin:0 auto;
	  padding:0 2%;
	  display:block;
	  float:left;
	}

	#footer1_left {
	  width:100%;
	  margin:0 auto;
	  padding: 2.5% 0.5%;
	  float:left;
	}
	#footer1_right {
	  display:none;
	}
	.products {
	  width:48%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:0;
	  text-align:center;
	  word-break:break-all;
	  display:block;
	  overflow:hidden;
	  float:left;
	  border:2px dotted #ccc;
	}
	.products1 {
	  width:48%;
	  height:auto;
	  margin: 0 0.5% 10px 0.5%;
	  padding:0;
	  text-align:center;
	  word-break:break-all;
	  display:inline-block;
	  overflow:hidden;
	  border:2px dotted #ccc;
	}
	.font15 {
		font-family: "微軟正黑體", "新細明體", "標楷體";
		font-size: 2.1vw;
		font-weight: 700;
		line-height: 35px;
		color: #2e2d2d;
		letter-spacing: normal;
	}
}

@media only screen and (max-width:40em) {
	.webcontent {
	  width:100%;
	  margin:0 auto;
	  padding:1px;
	  overflow:hidden;
	}
	header {
	  display:block;
	  width:100%;
	  margin:0 auto;
	  padding:2%;
	}
	#head1 {
	  width:50%;
	  margin:0;
	  padding:0 1%;
	}
	#head2 {
	  width:50%;
	  margin:0;
	  padding:0 1%;
	}
  nav {
    display:none;
  }
  
	#right1, #right2 {
		width:100%;
	  margin:0;
	  padding:1%;
	  display:block;
	  float:left;
	}
	
	#nav_mobile {
		display:block;
		float:left;
	}
	#marquee_left {
	  display:none;
	}
	#home_news {
	  width:100%;
	  margin:0 auto;
	  padding:1% 0;
	  float:left;
	}
	#home_about {
	  width:100%;
	  margin:0 auto;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#home_intro {
	  width:100%;
	  margin:0 auto;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#webcenter {
	  width:100%;
	  margin:1px auto;
	  display:block;
	}
	
	aside {
	  display:none;
	}
	
	article {
	  width: 100%;
	  padding: 0 1%;
	  display:block;
	}
	#counter {
	  width:100%;
	  margin:0;
	  padding:1%;
	  display:block;
	}
	#footer1_left {
	  width:100%;
	  margin:0 auto;
	  padding: 2% 0.5%;
	  float:left;
	}
	#left_top {
	  display:none;
	}
	#bottom1, #bottom2 {
		width:100%;
	  margin:0;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#foote2_1 {
	  width:100%;
	  margin:0 auto;
	  padding:2%;
	  float:left;
	}
	#foote2_2 {
	  width:100%;
	  margin:0 auto;
	  padding:2%;
	  float:left;
	}
	.products {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:0;
	  text-align:center;
	  word-break:break-all;
	  display:block;
	  overflow:hidden;
	  float:left;
	  border:2px dotted #ccc;
	}
	.products1 {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:0;
	  text-align:center;
	  word-break:break-all;
	  display:inline-block;
	  overflow:hidden;
	  border:2px dotted #ccc;
	}
	.font15 {
		font-family: "微軟正黑體", "新細明體", "標楷體";
		font-size: 25px;
		font-weight: 700;
		line-height: 35px;
		color: #2e2d2d;
		letter-spacing: normal;
	}
}