*,*: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;
}

.webcontent {
  width:100%;
  margin:0 auto;
  padding:0;
  display:block;
}
.webcontent1 {
  display:flex;
  width:100%;
  margin:0 auto;
  padding:0;
  background-color:#034b58;
  overflow:hidden;
}
#head {
  display:flex;
  width:100%;
  margin:0 auto;
  padding:0;
  background-color:#034b58;
  overflow:hidden;
}
header {
  flex:auto;
	margin:0 auto;
	padding:0;
	display:block;
	float:left;
}

#head1 {
  width:100%;
  height:1.5em;
  margin:0 auto;
  padding: 0 1%;
}
#head2 {
  width:100%;
  height:1.5em;
  margin:0 auto;
  padding: 0 1%;
}

.c {
	clear:both;
}

#head2_1 {
  width:30%;
  margin:0 auto;
  padding:0 1%;
  display:block;
  float:left;
}

#head2_2 {
  width:70%;
  padding:0;
  display:block;
  text-align:right;
  float:right;
}
#line {
  flex:none;
	width:120px;
	margin:0 auto;
	padding:10px;
	text-align:center;
	vertical-align:middle;
	display:block;
	float:left;
}
#head3 {
  width:100%;
  margin:0 auto;
  padding:0.5%;
  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;
}

#head3 ul{
  width:100%;
  margin:0 auto;
  padding 0;
}

#head3 li{
  list-style-type:none;
  margin:0 auto;
  padding:0 2%;
  text-align:center;
  font-size:1em;
  font-weight:bold;
  float:left;
}

.head_link{
  font-size: 16px;
  color: #333;
}
a.head_link{
  color: #333;
  text-decoration: none;
}
a.head_link:hover {
  font-weight:bold;
}

#head3 li a{
  text-align:center;
  font-size:1em;
  color:#fff;
  text-shadow:2px 2px 2px #555;
  font-weight:bold;
  text-decoration: none;
}

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

#login_box {
	width:100%;
	margin:5px 0 auto;
	background: url(images/login1_bg.jpg) repeat-x;
	display: block;
}

#login_1 {
	width:25%;
	float:left;
	background: url(images/login1_bg.jpg) repeat-x;
}

#login_2 {
	width:75%;
	padding:0.4% 0;
	float:left;
	font-size: 0.8em;
	color: #333;
	background: url(images/login1_bg.jpg) repeat-x;
}

.login_text {
	font-size: 14px;
	font-family: 微軟正黑體, 細明體,
	color: #333;
}

.login_text:hover {
	color: #000;
	text-decoration: none;
}

#nav_link {
  width:100%;
  margin:0 auto;
  padding:3px;
  background-color:#00a0ea;
  display:none;
}

.nav_link {
  color:#fff;
  text-shadow:2px 2px 2px #555;
  font-size:13px;
  font-family: 微軟正黑體, 細明體,
}
a.nav_link {
  color:#fff;
  text-shadow:2px 2px 2px #555;
  font-size:13px;
  font-family: 微軟正黑體, 細明體,
  text-decoration: none;
}
a.nav_link:hover {
  text-decoration: none;
  font-weight:bold;
}

#member_area {
  width:100%;
  margin:0 auto;
  padding:0;
  background-color: #109ddf;
  display:none;
}

#member_area ul {
  width:100%;
  margin:0 auto;
  padding:0;
  display:block;
}

#member_area li {
  width:100%;
  margin:0 auto;
  padding:10px;
  border-bottom:1px dotted #ccc;
  display:block;
  list-style-type: none;
}
#member_area li a {
  color:#fff;
  font-weight: bold;
}
#member_area li:hover {
  width:100%;
  background-color:#00a0ea;
  color:#fff;
  font-weight: bold;
  display:block;
}

#member_area li:hover a {
  width:100%;
  color:#fff;
  font-weight: bold;
  text-decoration:none;
  display:block;
}

#service {
  width:100%;
  margin:0 auto;
  padding:0;
  background-color: #109ddf;
  display:none;
}

#service ul {
  width:100%;
  margin:0 auto;
  padding:0;
  display:block;
}

#service li {
  width:100%;
  margin:0 auto;
  padding:10px;
  border-bottom:1px dotted #ccc;
  display:block;
  list-style-type: none;
}
#service li a {
  color:#fff;
  font-weight: bold;
}
#service li:hover {
  width:100%;
  background-color:#00a0ea;
  color:#fff;
  font-weight: bold;
  display:block;
}

#service li:hover a {
  width:100%;
  color:#fff;
  font-weight: bold;
  text-decoration:none;
  display:block;
}

#nav_mobile {
  width:100%;
  margin:0 auto;
  padding:0;
  background-color: #109ddf;
  display:block;;
}

#nav_mobile ul {
  width:100%;
  margin:0 auto;
  padding:0;
  color:#fff;
  display:block;
}

#nav_mobile ul li {
  width:100%;
  margin:0 auto;
  padding:10px 0;
  border-bottom:1px dotted #2585b1;
  display:block;
  text-align:left;
  text-indent:10px;
  list-style-type: none;
}
#nav_mobile ul li a {
  color:#fff;
  font-weight: bold;
}
#nav_mobile ul li:hover {
  width:100%;
  background-color:#0284c0;
  color:#fff;
  font-weight: bold;
  display:block;
}

#nav_mobile ul li:hover a {
  width:100%;
  color:#fff;
  font-weight: bold;
  text-decoration:none;
  display:block;
}

#nav_mobile ul li ul {
  width:100%;
  margin:0 auto;
  padding:0;
  background-color:#00a0ea;
  display:none;
}

#breadcrumbs {
	width:98%;
	margin:0 auto;
	height:25px;
	padding:5px;
}

#webcenter {
  display:flex;
	margin: 0 auto;
	padding: 5px 0 0 0;
}

aside {
  flex:none;
	width:200px;
	margin: 0 auto;
	padding: 0 0.5%;
	float: left;
	display: block;
}

article {
  flex:auto;
	margin: 0 auto;
	padding: 0 0.5%;
	float: left;
	display: block;
}

#footer {
	width:98%;
	margin: 0 1% auto;
	padding:5px 0 0 0;
	display:block;
	border-top:1px solid #00a0ea;
}

#footer-space {
	width:15%;
	margin:0;
	padding:0;
	display: block;
	float: left;
}

#footer-left {
	width:23%;
	margin:0;
	padding:0 1% 0 0;
	display: block;
	float: left;
}

#footer-right {
	width:62%;
	margin:0;
	padding:0;
	display: block;
	float: left;
}

.products {
  width:24%;
  margin:0.5%;
  padding:1%;
  vertical-align:top;
  text-align:center;
  display:inline-block;
  background-color:#f5f5fc;
  border:1px dotted #f3d42e;
  border-radius:5px;
  overflow:hidden;
}
.products:hover {
  background-color:#ffffff;
  box-shadow: 0 0 4px #f3d42e;
  border-radius:5px;
}
div.products1 {
  width:28%;
  margin:0 2% 10px 2%;
  padding:5px;
  height:320px;
  border:1px solid #ccc;
  text-align:center;
  display:block;
  float: left;
  overflow:hidden;
}

#footer1 {
  width:100%;
  height:1.5em;
  margin:10px 0 auto;
  padding: 0 1%;
  display:none;
}
.activity {
  width:17.5%;
  height:auto;
  margin: 0 1% 10px 1%;
  padding:1%;
  text-align:center;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
  border:1px dotted #bbb;
}

@media only screen and (max-width:1400px) {
  .products {
	  width:32%;
	  margin:0.5%;
	  padding:1%;
	  vertical-align:top;
	  text-align:center;
	  display:inline-block;
	  background-color:#f5f5fc;
	  border:1px dotted #f3d42e;
	  border-radius:5px;
	  overflow:hidden;
	}
}

@media only screen and (max-width:1200px) {
  #line {
	  flex:none;
		width:10%;
		margin:0 auto;
		padding:0.7%;
		text-align:center;
		vertical-align:middle;
		display:block;
		float:left;
	}
}

@media only screen and (max-width:1000px) {
  .webcontent {
	  width:100%;
	  margin:0 auto;
	  padding:1px;
	  overflow:hidden;
	}
	#web_top {
	  width:100%;
	}
	header {
	  display:block;
	  width:100%;
	  height:auto;
	  margin:0 auto;
	}
	
	#head3 {
	  font-size:1.2vw;
	}
	#login_2{
		font-size: 1.6vw;
	}
	.head_link{
		font-size: 1.6vw;
	}
	
	#head3 li a{
	  font-size:1.6vw;
	  font-weight:bold;
	}
	.login_text {
	  font-size: 1.6vw;
	}
	#foot_text {
	  padding-top:5px;
	  font-size:0.9em;
	  color: #fff;
	  line-height:1.3;
	  font-family: "微軟正黑體";
	  display:block;
	  float:left;
	}
	div.products1 {
	  width:46%;
	  margin:0 2% 10px 2%;
	  padding:5px;
	  height:320px;
	  border:1px solid #ccc;
	  text-align:center;
	  display:block;
	  float: left;
	  overflow:hidden;
	}
	.products {
	  width:48%;
	  margin:1%;
	  padding:1%;
	  vertical-align:top;
	  text-align:center;
	  display:inline-block;
	  border:1px dotted #f3d42e;
	  border-radius:5px;
  	overflow:hidden;
	}
.activity {
	  width:33%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
	  border:1px dotted #bbb;
	}
}

@media only screen and (max-width:798px) {
  #head2_1 {
	  width:75%; 
	}
	#head2_2{
	  display:none;
	}
  #nav_icon{
    width:25%;
    display:block;
  }
	#line{
	  width:20%;
	}
	.mobile_no {
    display:none;
  }
  #head3 {
		display: none;
	}
	#login_box {
    display:none;
  }
  
  #nav_link {
    display:block;
  }
  aside {
    display:none;
  }
  article {
    width:100%;
  }
}
@media only screen and (max-width:40em) {
	header{
	  width:83%;
	}
	#line{
	  width:17%;
	}
	
  
  
  #leftbanner, #rightbanner {
    display:none;
  }
  
  #content {
		width:100%;
		margin: 0 auto;
		padding: 0 0.5%;
		float: left;
		display: block;
	}
		
	#footer-space {
		display: none;
	}
	
	#footer-left {
		display: none;
	}
	
	#footer-right {
		width:100%;
		margin:0;
		padding:0;
		display: block;
	}
	.nav_text {
	  font-size:12px;
	  color: #333;
	}
	.products {
	  width:96%;
	  margin:2%;
	  padding:1%;
	  vertical-align:top;
	  text-align:center;
	  display:inline-block;
	  border:1px dotted #f3d42e;
	  border-radius:5px;
  	overflow:hidden;
	}
	div.products1 {
	  width:94%;
	  margin:0 3% 10px 3%;
	  padding:5px;
	  height:320px;
	  border:1px solid #ccc;
	  text-align:center;
	  display:block;
	  float: left;
	  overflow:hidden;
	}
	#footer1 {
	  display:block;
	}
	.activity {
	  width:48%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  vertical-align:top;
	  display:inline-block;
	  overflow:hidden;
	  border:1px dotted #bbb;
	}
}