*,*:before, *:after {
  -mov-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#webcontent {
	width:100%;
	max-width:1920px;
	margin: 0 auto;
	background-color:#fff;
}
header {
  width:100%;
  margin:0 auto;
  display:block;
}
#head_home {
  width:33.3%;
  margin:0 auto;
  padding:1% 0 0 0;
  display:block;
  float:left;
}
#home_img {
  width:33%;
  margin:0;
  padding:0;
  display:block;
  float:left;
}
nav {
  width:42.7%;
  margin:0;
  padding:1% 0 0 0;
  display:block;
  float:left;
}
nav ul{
  width:100px
  margin:0 auto;
  padding:0;
  display:block;
}
nav li{
    position: relative;
    float: left;
    color:#000;
    text-align:center;
    font-size:15px;
    font-family: PMingLiU;
    margin:0;
    padding:0;
    list-style: none;
}
nav li a {
    display: block;        
    padding: 0;
    text-decoration: none;
}
 
nav li:hover {
    color:#ffffff;
    text-decoration:none;
}
nav li ul {
    background-color: #F2EEEF;opacity:0.9;
    display: none;
    position: absolute;
    top: 0;
    width:100%;
    margin:0 auto;
}
nav li:hover ul{
    display: block;
    right: 0;
    left: 0;
    top: 100%;
   /*border: #000000 1px solid; */
    z-index:6;
    
}
nav li ul li {
   width:100%;
   margin:0 auto;
   padding:0;
   color:#ffffff;
   font-weight:bold;
   font-size:1vm;
   text-align:center;
}
nav li ul li:hover {
   width:100%;
   margin:0 auto;
   padding:0;
   color:#ffffff;
   font-weight:bold;
   font-size:1vm;
   text-align:center;
   background-color: #ff0000;opacity:0.9;
}
nav li ul li a {
   color:#2C2B2B;
   font-weight:bold;
   font-size:1vm;
   text-decoration:none;
}
nav li ul li a:hover {
   color:#ffffff;
   font-weight:bold;
   font-size:1vm;
   text-decoration:none;
}
#igface {
  width:22%;
  margin:0;
  padding:1% 0 0 0;
  display:block;
  float:left;
}

#camera {
  width:98%;
  margin:0 1% auto;
  padding:0.5% 0;
  display:block;
  float:left;
}
.camera_list {
  width:18%;
  margin: 5px 1%;
  text-align:center;
  vertical-align:top;
  display:inline-block;
  overflow:hidden;
}
#querier {
  width:100%;
	margin:0 auto;
	padding:0;
	background-color: #ffffff;
	display:block;
}
#menu1{
  width:100%;
	margin:3% 0 0 0;
	padding:0;
	background-color: #ffffff;
	display:none;
}
#logo {
	width:44.79%;
	margin:0 auto;
	padding:0;
	text-align:left;
	display:block;
	float:left;
}

#item {
	width:55.21%;
	margin:0 auto;
	padding:5.3% 0 0 0;
	display:block;
	float:left;
}
.c {
	clear:both;
}
#nav_mobile {
	width:100%;
	margin:0 auto;
	padding:0;
	display:none;
}
#nav_mobile ul {
  width:100%;
  margin:0;
  padding:0;
  background-color: #e6d9ce;
  display:block;
}
#nav_mobile ul li {
  margin:0;
  padding:2px 0;
  width:100%;
  font-size:14px;
  color:#FFF;
  background-color: #e6d9ce;
  list-style-type: none;
  display:block; 
}

#nav_mobile ul li>a {
  font-size:14px;
  color:#333;
  background-color: #e6d9ce;
  list-style-type: none;
  display:block;
  width:100%;
  border:1px dotted #c5a992;
}

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

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

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

#nav_mobile ul li ul li>a {
  font-size:1em;
  color:#333;
  background-color: #c4cbf3;
  list-style-type: none;
  display:block;
  margin:0 auto;
  width:100%;
}
#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%;
}

#nav_mobile ul li ul li ul {
  font-size:1em;
  color:#333;
  background-color: #f8ca9f;
  list-style-type: none;
  display:block;
  margin:0;
  padding:0;
  width:100%;  
}
#nav_mobile ul li ul li ul li {
  font-size:1em;
  color:#333;
  display:block;
  width:100%;
  padding:2px 0;
}
#nav_mobile ul li ul li ul li:hover {
  color:#FFF;
  background-color: #000;
  display:block;
}
#nav_mobile ul li ul li ul li>a {
  font-size:1em;
  color:#333;
  background-color: #f8ca9f;
  display:block;
}
#nav_mobile ul li ul li ul li>a:hover {
  font-size:1em;
  color:#FFF;
  background-color: #000;
  display:block;
}
#main_products {
  width:100%;
	max-width:1201px;
	margin: 0 auto;
	padding:0;
	display:block;
}
#breadcrumbs {
  width:96%;
  margin:0 auto;
  padding:0;
  display:block;
}
#webcenter {
  width:100%;
  margin:0 auto;
  padding: 0;
  display:block;
}
#title {
  width:100%;
  margin:0 auto;
  padding: 0 2%;
  display:block;
}
#content {
  width:100%;
	margin: 0 auto;
	padding:0 2%;
	display:flex;
}
aside {
  flex:none;
  width:200px;
  margin:10px;
  padding:5px;
  display:block;
  background-color:#EEE0D5;
  float:left;
}
article {
  flex:auto;
  margin:10px;
  padding:5px;
  display:block;
  float:left;
}
footer {
  width:100%;
  margin:0 auto;
  padding:0 ;
	display:block;
	background-color : #e6d9ce;
}

#footer1{
  width:100%;
  margin:0 auto;
  padding:1% 0;
  background-color:#222;
}
#footer1_left {
  width:35%;
  margin:0 auto;
  padding: 0.375% 0.5%;
  float:left;
}

#footer1_center {
  width:18%;
  margin:0 auto;
  padding:2% 1%;
  float:left;
}

#footer1_right {
  width:47%;
  margin:0 auto;
  padding:0.375%;
  float:right;
}

.font10 {
  font-family: "微軟正黑體"; 
  font-size: 15px;
  line-height: 25px;
  color: #f4f4f4;
  letter-spacing: normal;
}

#footer{
  width:100%;
  max-width:1920px;
  margin:0 auto;
  padding:0;
  display:flex;
}
#footer_left {
	flex:auto;
	margin:0 auto;
	padding:1%;
	display: block;
	float:left;
	
}
.footer_txt{
  font-size:14px;
  color:#000;
  font-weight:bold;
}
#footer_top,#footer_bottom {
  width:100%;
	margin:0 auto;
	padding: 3px 0;
	display: block;
	float:left;
}
#line_qrcode {
  flex:none;
  width:147px;
  height:147px;
  padding: 5px;
	display: block;
	float:left;
}
#footer_1 {
  width:93%;
  margin: 0;
  padding: 0 28.6%;
  display: block;
  float:left;
}
#footer_line {
  width:7%;
  margin: 0;
  padding: 0;
  display: block;
  float:left;
}
#footer_21 {
  width:24.9%;
  margin: 0;
  padding: 0 2%;
  display: block;
  float:left;
}
#footer_22 {
  width:16.3%;
  margin:0 auto;
  padding: 0 2%;
  display: block;
  float:left;
}
#footer_23 {
  width:20.4%;
  margin:0 auto;
  padding: 0 2%;
  display: block;
  float:left;
}
#footer_24 {
  width:22.9%;
  margin:0 auto;
  padding: 0 2%;
  display: block;
  float:left;
}
#footer_25 {
  width:15.5%;
  margin:0 auto;
  padding: 0 2%;
  display: block;
  float:left;
}
#counter {
  width:100%;
  margin:0;
  padding:5% 1% 6% 1%;
  display:block;
  background-image: url(/images/footer/footer.gif);
  background-position:right;
  -moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
#footer_text {
  width:100%;
  padding:1%;
  margin:0 auto;
  display:block;
  float:left;
}
#mobile_only {
  display:none;
}
#computer_only {
  display:inline-block;
}
.info{
  width:100%;
  height:auto;
  padding:0;
  display:block;
}

A.e01 ,#footer1_right .e01{
  font-family : 微軟正黑體, sans-serif; font-size : 15px;
  color: #adadad;
  line-height: 20px;
  text-decoration: none;
  }
a:hover.e01,#footer1_right .e01 {
  font-family : 微軟正黑體, Arial, sans-serif; font-size : 15px;
  color: #ffffff;
  line-height: 20px;
  text-decoration: none;
}


.products {
  width:31%;
  height:auto;
  margin: 0 1% 10px 1%;
  padding:1%;
  font-size:12px;
  line-height:20px;
  text-align:center;
  vertical-align : top;
  display:block;
  float:left;
  overflow:hidden;
}
.circle img{
  width:100%;
  padding:10%;
  border-radius:50%;
  box-shadow: 0px 8px 20px #aaa;
}
.text_bg {
  width:90%;
  margin:5% auto;
  padding:2.5%;
  background-color:#ffaeae;
  font-color:#fff;
  font-weight:bold;
  border-radius:10px;
}
.products1 {
  width:48%;
  height:auto;
  margin: 0 1% 10px 1%;
  padding:1%;
  text-align:center;
  vertical-align : top;
  display:inline-block;
  overflow:hidden;
}
.products3 {
  width:48%;
  height:auto;
  margin: 0 1% 10px 1%;
  padding:1%;
  font-size:12px;
  line-height:20px;
  text-align:center;
  vertical-align : top;
  display:block;
  float:left;
  overflow:hidden;
}

@media only screen and (max-width:1000px) {
  #webcontent {
	  width:100%;
	  margin:0 auto;
	  padding:1px;
	  overflow:hidden;
	}
	#head_home {
	  width:50%;
	}
	nav {
	  display:none;;
	}
	#igface {
	  width:50%;
	}
	#item {
	  display:none;
	}
	#menu1 {
	  display:block;
	}
	aside {
	  display:none;
	}
	article {
	  width:100%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	  float:left;
	}
}

@media only screen and (max-width:800px) {
  #webcontent {
	  width:100%;
	  margin:0 auto;
	  padding:1px;
	  overflow:hidden;
	}
	#product_left {
	  display:none;
	}
	#product_right {
	  width:100%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	  float:left;
	}
	#product_left1 {
	  display:none;
	}
	#product_center {
	  width:100%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	  float:left;
	}
	#product_right1 {
	  display:none;;
	}
	
	#selector1,#selector2,#selector3,#selector4{
	  width:100%;
	  font-size:3.59vw;
	}
	.products {
	  width:48%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  vertical-align : top;
	  display:block;
	  float:left;
	  overflow:hidden;
	}
	#800none{
	  dispaly:none;
	}

  #footer1_left {
    width:22%;
    margin:0 auto;
    padding: 2.5% 0.5%;
    float:left;
  }

  .footer1_left_qr{
    display:none;
  }
  #footer1_center {
    width:0%;
    margin:0 auto;
    padding:2% 1%;
    float:left;
  }
  #footer1_right{
    float: left;
  }
  .footer1_right_title {
    display:none;
  }

  .camera_list {
    width:31%;
    margin: 5px 1%;
    text-align:center;
    vertical-align:top;
    display:inline-block;
    overflow:hidden;
  }
}
@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;
	}
	#logo {
	  width:80%;
	}
	#footer_1 {
	  width:100%;
	  margin: 0;
	  padding: 0 2%;
	  display: block;
	  float:left;
	}
	#footer_line {
	  width:100%;
	  margin: 0;
	  padding: 0 30%;
	  display: block;
	  float:left;
	}
	#footer_21 {
	  width:100%;
	  margin: 0;
	  padding: 0 10%;
	  display: block;
	  float:left;
	}
	#footer_22 {
	  width:44%;
	  margin:0 auto;
	  padding: 0 2%;
	  display: block;
	  float:left;
	}
	#footer_23 {
	  width:56%;
	  margin:0 auto;
	  padding: 0 2%;
	  display: block;
	  float:left;
	}
	#footer_24 {
	  width:60%;
	  margin:0 auto;
	  padding: 0 2%;
	  display: block;
	  float:left;
	}
	#footer_25 {
	  width:40%;
	  margin:0 auto;
	  padding: 0 2%;
	  display: block;
	  float:left;
	}

  #footer1_left {
    width:100%;
    margin:0 auto;
    padding: 2% 0.5%;
    float:left;
  }
  #footer1_center {
    width:100%;
    margin:0 auto;
    padding:2% 1%;
    float:left;
  }

	#selector1,#selector2,#selector3,#selector4{
	  width:100%;
	  font-size:4.4vw;
	}
	#breadcrumbs_web {
	  display:none;
	}
	#breadcrumbs_mobile {
	  display:block;
	}
	aside {
	  display:none;
	}
	
	article {
	  width: 100%;
	  padding: 0 1%;
	  display:block;
	}
	#counter {
	  width:100%;
	  margin:0;
	  padding:5% 1% 6% 1%;
	  display:block;
	}
	#footer {
	  width:100%;
	  margin:0 auto;
	  padding:0;
	  display:block;
	}
	#footer_left {
	  width:75%;
	  margin:0 auto;
	  padding:1%;
	  display:block;
	  float:left;
	}
	#footer_text {
	  width:100%;
	  padding:1%;
	  margin:0 auto;
	  display:block;
	  float:left;
	}
	#line_qrcode {
	  width:25%;
	  margin:0 auto;
	  padding:1%;
		display: block;
		float:left;
	}
	#mobile_only {
	  display:inline-block;
	}
	#computer_only {
	  display:none;
	}
	.products {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  display:block;
	  float:left;
	  overflow:hidden;
	}
	.products1 {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  display:inline-block;
	  overflow:hidden;
	  border:1px dotted #ccc;
	}
	.products3 {
	  width:98%;
	  height:auto;
	  margin: 0 1% 10px 1%;
	  padding:1%;
	  text-align:center;
	  display:inline-block;
	  overflow:hidden;
	  border:1px dotted #ccc;
	}

  .camera_list {
    width:48%;
    margin: 5px 1%;
    text-align:center;
    vertical-align:top;
    display:inline-block;
    overflow:hidden;
  }
}