*,*:before, *:after {
  -mov-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#web_top {
  width:100%;
  margin:0;
  padding:0;
  position:absolute;
  z-index:10;
  display:block;
}
.webcontent1 {
	display:flex;
  width:100%;
  margin:0 auto;
  padding:1px;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
  overflow:hidden;
}
.webcontent {
	position:absolute;
  width:100%;
  margin:0 auto;
  padding:1px;
  border:1px solid #ddd;
  overflow:hidden;
}
.webcontent2 {
	display:flex;
  width:100%;
  margin:0 auto;
  padding:0;
  overflow:hidden;
}

header {
	flex:auto;
  display:block;
	padding:0 5px;
  background-color:#fff;
	float:left;
}
#logo {
  width:30%;
  padding:0 0 0 20px;
  display:block;
  float:left;
	
}
#head1_1 {
  float:left;
  display:block;
  font-size:0.8em;
  color:#333;
	background-color:#fff;
}

#head1_2 {
  float:right;
  display:block;
  font-size:0.8em;
  color:#333;
	background-color:#fff;
}
#head2_2 {
  width:70%;
  padding:0 20px 0 0;
  display:block;
  text-align:right;
  float:left;
  margin-bottom:5px;
}
#webcounter {
	width:49.37%;
	margin:0 auto;
	padding:1% 3% 0 0;
	display:block;
	text-align:right;
	float:left;
}
.info {
  width:100%;
  height:auto;
}
nav {	
	width:98%;
  margin:0 1% auto;
  padding:0.5% 2%;
  background-color:#27a1d9;
  -moz-border-radius:0 0 10px 10px;
  -webkit-border-radius:0 0 10px 10px;
  border-radius:0 0 10px 10px;
  display:block;
  float:left;
}
nav ul {
  margin: 0;
  padding:0;
  width:100%;
  display:block;
}
nav ul > li {
	position:relative;
  list-style-type:none;
  margin:0 auto;
  padding:0 2%;
  text-align:center;
  font-size:1em;
  font-weight:bold;
  float:left;
}

nav li ul {
  background-color: #125573;opacity:0.8;
  display: none;
  position: absolute;
  width:100%;
  margin:0 auto;
  top: 100%;
  padding:0;
  box-shadow:4px 4px 12px -2px rgba(20%,20%,20%,0.5);
}
nav ul li:hover ul {
  display: block;
  right: 0;
  top:100%;
  left: 0;
  padding: 0;
  text-align:left;
  width:100%;
  z-index:11;
}
nav li:hover ul > li{
    display: block;
    right: 0;
    left: 0;
    width:100%;
    padding:10px 0;
    font-size: 12px;
    font-family: "微軟正黑體";
    text-align:center;
    border-bottom: 1px solid #42aede;
}

nav li ul > li{
    display: block;
    right: 0;
    left: 0;
    width:100%;
    padding:10px 0;
    color:#fff;
    font-size: 12px;
    font-family: "微軟正黑體";
    border-bottom: 1px solid #42aede;
}
nav li ul > li a{
    color:#fff;
}
nav li ul > li:hover {
    display: block;
    right: 0;
    left: 0;
    width:100%;
    padding:10px 0;
    color:#fefccb;
    font-size: 12px;
    font-family: "微軟正黑體";
    background-color:#42aede;
}
nav li ul > li a:hover {
    text-decoration:none;
    color:#fefccb;
}
nav li:hover ul > li:last-child {
    display: block;
    right: 0;
    left: 0;
    width:100%;
    padding:10px 0;
    font-size: 12px;
    font-family: "微軟正黑體";
    border-bottom: 1px solid #9ad6f2;
}
#line {
	flex:none;
	width:120px;
	margin:0 auto;
	padding:10px;
	text-align:right;
	vertical-align:middle;
	display:block;
	float:left;
}
#nav_icon {
  width:30%;
  margin:0 auto;
  padding:1% 0 5% 0;
  display:none;
  float:left;
}
#nav_mobile {
	width:100%;
	margin:0 auto;
	padding:0;
	display:none;
}
#nav_mobile ul {
  width:100%;
  margin:0 auto;
  padding:0;
  display:block;
	border-top:1px solid ##4fc1f3;
}
#nav_mobile ul li {
  margin:0 auto;
  width:100%;
  padding:0;
  font-size:1em;
  color:#000000;
  list-style-type: none;
  display:block; 
  text-indent: 3px;
}

#nav_mobile ul li > a {
  font-size:1em;
  color:#000000;
  background-color: #4fc1f3;opacity:0.9;
  list-style-type: none;
  display:block;
  margin:0 auto;
  padding:10px 0;
  float:left;
  width:100%;  
}

#nav_mobile ul li > :hover {
  font-size:1em;
  color:#000000;
  font-weight:bold;
  background-color: #97cfe9;
  list-style-type: none;
  display:block;
  width:100%;
  margin:0 auto;
  padding:10px 0;
  text-decoration: none;
}

#nav_mobile ul li ul {
  font-size:1em;
  color:#ffffff;
  background-color: #4ebbeb;
  list-style-type: none;
  display:block;
  float:left;
  margin:0 auto;
  padding:0;
  width:100%;
  border-bottom:1px dotted #ccc;
}

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

#nav_mobile ul li ul li>a {
  font-size:1em;
  color:#ffffff;
  background-color: #4ebbeb;
  list-style-type: none;
  display:block;
  margin:0 auto;
  padding:10px 0;
  width:100%;
}

#nav_mobile ul li ul li>a:hover {
  font-size:1em;
  color:#ffffff;
  font-weight:bold;
  background-color: #2795c6;
  text-decoration: none;
  display:block;
  margin:0 auto;
  padding:10px 0;
  width:100%;
}

//-----------

#nav_mobile ul li ul li ul {
  font-size:1em;
  color:#ffffff;
  background-color: #2795c6;
  list-style-type: none;
  display:block;
  float:left;
  margin:0 auto;
  padding:0;
  width:100%;  
}
#nav_mobile ul li ul li ul li {
  font-size:1em;
  color:#ffffff;
  list-style-type: none;
  display:block;
  float:left;
  margin:0 auto;
  padding:0;
  width:100%;
  text-indent: 20px;  
}
#nav_mobile ul li ul li ul li>a {
  font-size:1em;
  color:#ffffff;
  background-color: #2795c6;
  list-style-type: none;
  display:block;
  margin:0 auto;
  padding:10px 0;
  width:100%; 
}
#nav_mobile ul li ul li ul li>a:hover {
  font-size:1em;
  color:#ffffff;
  background-color: #0b79aa;
  list-style-type: none;
  display:block;
  margin:0 auto;
  padding:10px 0;
  width:100%; 
}
#main_slide {
  width:100%;
  margin:0 auto;
  padding:0;
  display:block;
	background-color:#bcdcc5;
}
#main_slide1 {
  width:100%;
  margin:0 auto;
  padding:0;
  display:none;
	background-color:#bcdcc5;
}
.nav_link {
  color: #ffffff; 
  font-size: 14px; 
  font-family: 微軟正黑體, Arial, Helvetica, Verdana, sans-serif;
	text-shadow:2px 2px 2px #555;
	font-weight:bold;
	line-height:2.0;
}
a.nav_link {
  color: #ffffff; 
  font-size: 14px; 
  font-family: 微軟正黑體, Arial, Helvetica, Verdana, sans-serif;
	text-shadow:2px 2px 2px #555;
	font-weight:bold;
	line-height:2.0;
}
a.nav_link:hover {
  color:#ffffff;
  text-decoration:none;
}
.mousehover {
  margin:0 auto;
}
.mousehover:hover {
  border-bottom:2px solid #417747;
}
#content{
  width:100%;
  margin:0 auto;
  padding:0.5%;
  display:block;
	background-color:#bcdcc5;
}
#bread_marquee {
	width:100%;
	height:33px;
	margin:5px 0 auto;
	padding:0 2%;
	background: url(/images/login1_bg.jpg) repeat-x;
	display: block;
}
#breadcrumbs, #numrequests {
  width:100%;
  margin:0 auto;
  padding:5px 0 0 0;
  display:left;
	float:left;
}
#webcenter {
	display:flex;
	width:100%;
  margin:0 auto;
  padding:0;
}
aside {
	flex:none;
  width:220px;
	margin:0 auto;
	padding:0 10px 20px 10px;
	float: left;
}
article {
  flex:auto;
	margin:0 auto;
	padding:0 10px 20px 10px;
	float: left;
}
#web_bg4 {
  width:100%;
  height:auto;
  margin 0 auto;
  padding:0 px;
  display:block;
  background-color:#19601c;
}
footer {
  width:100%;
  margin:0 auto;
  padding: 1% 2%;
  display:block;
	background-color:#50a23e;
}
#counter {
  width:100%;
  height:auto;
  margin:0;
  padding:0.6%;
  display:block;
  float:left;
}

img.info{
  width:100%;
  height:auto;
}
.c {
  clear:both;
}
.products {
  width:24%;
  height:auto;
   margin: 0 0.5% 10px 0.5%;
  padding:1%;
  text-align:center;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
	background-color:#F5F5F7;
	box-shadow:0 0 5px #ccc;
	border-radius:5px;
}
.products:hover {
	background-color:#FFFFFF;
}
.products1 {
  width:16%;
  height:auto;
  margin:0.33%;
  padding:0.33;
  text-align:center;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
	border:1px solid #ccc;
  background-color:#fff;
	box-shadow:0 0 10px #ccc;
	border-radius:5px;
}
.activity {
	width:20%;
	height:auto;
	margin:0 auto;
	padding:0.5%;
	text-align:center;
	vertical-align:top;
	display:block;
	float:left;
	overflow:hidden;
}
.home_section {
  width:32.33%;
  height:auto;
  margin:0.5%;
  padding:0.5%;
  text-align:center;
  vertical-align:top;
  display:block;
	float:left;
  overflow:hidden;
}
.cate_section {
  width:24%;
  height:auto;
  margin: 0 0.25% 10px 0.25%;
  padding:1%;
  text-align:center;
  vertical-align:top;
  display:inline-block;
	background-color:#dfdfdf;
	border:1px dotted #ddd;
  overflow:hidden;
}
.movie_section {
  width:32.3%;
  height:auto;
  margin: 0 0.25% 10px 0.25%;
  padding:1%;
  text-align:center;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
}

.font2 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 26px;
	line-height: 35px;
	color: #3e3e3e;
	letter-spacing: normal;
}
.font3 {
	font-family: "微軟正黑體";	
	font-size: 16px;
	line-height: 25px;
	color: #3e3e3e;
	letter-spacing: normal;
}
.font5 {
	font-family: "微軟正黑體";	
	font-size: 15px;
	line-height: 24px;
	color: #3e3e3e;
	letter-spacing: normal;
}
.font6 {
	font-family: "Georgia", "微軟正黑體", "標楷體";
	font-size: 24px;
	line-height: 17px;
	color: #ffffff;
	letter-spacing: normal;
}
.font7 {
	font-family: "微軟正黑體";	
	font-size: 16px;
	color: #ffffff;
	letter-spacing: normal;
}
.font9 {
	font-family: "微軟正黑體";	
	font-size: 13px;
	font-weight: 700;
	color: #83b835;
	letter-spacing: normal;
}
.font10 {
	font-family: "微軟正黑體";	
	font-size: 17px;
	line-height: 25px;
	color: #000000;
	letter-spacing: normal;
}
.font17 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 26px;
	line-height: 35px;
	color: #000000;
	letter-spacing: normal;
}
.font18 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 21px;
	line-height: 35px;
	color: #000000;
	letter-spacing: normal;
}
.font21 {
	font-family: "微軟正黑體", "新細明體", "標楷體";
	font-size: 26px;
	line-height: 35px;
	color: #cb904d;
	letter-spacing: normal;
}
A.c01 {
  font-family : 微軟正黑體, sans-serif; font-size : 16px;
  color: #3e3e3e;
  line-height: 20px;
  text-decoration: none;
  }
a:hover.c01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 16px;
  color: #b07e11;
  line-height: 20px;
  text-decoration: none;
}
A.d01 {
  font-family : 微軟正黑體, sans-serif; font-size : 16px;
  color: #ffffff;
  line-height: 20px;
  text-decoration: none;
  }
a:hover.d01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 16px;
  color: #efc67f;
  line-height: 20px;
  text-decoration: none;
}
A.f01 {
  font-family : 微軟正黑體, sans-serif; font-size : 18px;
  color: #000000;
  line-height: 25px;
  text-decoration: none;
  }
a:hover.f01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 18px;
  color: #d89624;
  line-height: 25px;
  text-decoration: none;
}
@media only screen and (max-width:1400px) {
	.products {
		width:32.33%;
		height:auto;
		 margin: 0 0.5% 10px 0.5%;
		padding:1%;
		text-align:center;
		vertical-align:top;
		display:inline-block;
		overflow:hidden;
		background-color:#F5F5F7;
		box-shadow:0 0 5px #ccc;
		border-radius:5px;
	}
	.cate_section {
		width:32.23%;
		height:auto;
		margin: 0 0.25% 10px 0.25%;
		padding:1%;
		text-align:center;
		vertical-align:top;
		display:inline-block;
		background-color:#dfdfdf;
		border:1px dotted #ddd;
		overflow:hidden;
	}
	.movie_section {
		width:49%;
		height:auto;
		margin: 0 0.25% 10px 0.25%;
		padding:1%;
		text-align:center;
		vertical-align:top;
		display:inline-block;
		overflow:hidden;
	}
}

@media only screen and (max-width:1280px) {
  .webcontent {
		width:100%;
		margin: 0 auto;
		padding: 0;
	}
	.webcontent1 {
		width:100%;
		margin: 0 auto;
		padding: 0;
		display:block;
	}
	header{
		width:90%;
	}
	nav {
		width:100%;
		padding:0;
	}
	#line {
		width:10%;
	}
	footer {
	  width:100%;
	}
	#numrequests {
	  width:100%;
	}
	#contact {
	  width:100%;
	}
}

@media only screen and (max-width:1000px) {
	.activity {
	  width:25%;
	  height:auto;
	  margin: 0 auto;
	  padding:0.5%;
	  text-align:center;
	  vertical-align:top;
	  display:block;
		float:left;
	  overflow:hidden;
	}
	.products1 {
	  width:32.3%;
	  height:auto;
	  margin:0.5%;
	  padding:0.5%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
		border:1px solid #ccc;
	  background-color:#fff;
		box-shadow:0 0 10px #ccc;
		border-radius:5px;
	}
}

@media only screen and (max-width:850px) {
	.products {
	  width:49%;
	  height:auto;
	  margin: 0 0.5% 10px 0.5%;
	  padding:0.5%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
		background-color:#fff;
		box-shadow:0 0 5px #ccc;
		border-radius:5px;
	}
	#webcounter {
		display:none;
	}
	header {
		width:85%;
	}
	#line{
		width:15%;
	}
	#logo {
	  width:60%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	  float:left;  
	}
	#head1_2 {
	  display:none;
	}
	#head2_2 {
	  display:none;
	}
	nav {
	  display:none;
	}
	#nav_icon {
	  width:25%;
	  margin:0 auto;
	  padding:5% 5% 0 0;
	  display:block;
	  float:left;
	}
	#nav_mobile {
		display:block;
	}
	aside{
	  display:none;
	}
	#center_bar {
		display:none;
	}
	article {
	  width:100%;
	}
	.products1 {
	  width:49%;
	  height:auto;
	  margin:0.5%;
	  padding:0.5%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
		border:1px solid #ccc;
	  background-color:#fff;
		box-shadow:0 0 10px #ccc;
		border-radius:5px;
	}
	.youtube_normal {
	  width:48%;
	  margin:10px 1% auto;
	  padding:0.5%;
	  display:inline-block;
	}
	.activity {
	  width:33.3%;
	  height:auto;
	  margin: 0 auto;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:block;
		float:left;
	  overflow:hidden;
	}
}

@media only screen and (max-width:40em) {
	#webcontent {
	  width:100%;
	  margin:0 auto;
	  padding:1px;
	  overflow:hidden;
	}
	#web_bg2 {
		display:none;
	}
	#web_bg2_1 {
		display:block;
	}
	#web_bg2_2 {
		display:block;
	}
	header {
		width:85%;
	}
	#logo {
	  width:65%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	  float:left;  
	}
	#nav_icon {
	  width:20%;
	  margin:0 auto;
	  padding:5% 5% 0 0;
	  display:block;
	  float:left;
	}
	#line {
		width:15%;
	}
	#head_right {
	  display:none;
	}
	nav {
	  display:none;
	}
	#main_slide1 {
		display:block;
	}
	#main_slide {
		display:none;
	}
	
	#special_products, #news, #activity {
    width:100%;
    margin:0 auto;
    padding:0 1%;
    display:block;
    float:left;
  }
	.marquee_line {
	  display: none;
	  width:100%;
	}	
	#webcenter {
	  width:100%;
	  margin:0 auto;
	  padding:0 1% 2% 1%;
	  display:block;
	}
	
	.mobile_no {
	  display:none;
	}
	.products {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
		background-color:#fff;
		box-shadow:0 0 5px #ccc;
		border-radius:5px;
	}
	.products1 {
	  width:98%;
	  height:auto;
	  margin:1%;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:block;
  	display:inline-block;
		border:1px solid #ccc;
	  background-color:#fff;
		box-shadow:0 0 10px #ccc;
		border-radius:5px;
	}
	.youtube_normal {
	  width:98%;
	  margin:10px 1% auto;
	  padding:0.5%;
	  display:inline-block;
	}
	.corner_left, .corner_right, .corner_left1, .corner_right1 {
  width:100%;
  height:auto;
  margin: 0 auto;
  padding:1%;
  vertical-align:top;
  display:block;
  float:left;
  overflow:hidden;
}
	.activity {
	  width:50%;
	  height:auto;
	  margin: 0 auto;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:block;
		float:left;
	  overflow:hidden;
	}
	.home_section {
		width:99%;
		height:auto;
		margin:0.5%;
		padding:0.5%;
		text-align:center;
		vertical-align:top;
		display:lock;
		float:left;
		overflow:hidden;
	}
	.cate_section {
		width:48%;
		height:auto;
		margin: 0 0.5% 10px 0.5%;
		padding:1%;
		text-align:center;
		vertical-align:top;
		display:inline-block;
		overflow:hidden;
	}
	.movie_section {
		width:98%;
		height:auto;
		margin: 0 0.5% 10px 0.5%;
		padding:1%;
		text-align:center;
		vertical-align:top;
		display:inline-block;
		overflow:hidden;
	}
}