@charset "utf-8";

/*==共同區==*/

body {
	
	font-family: "微軟正黑體";
}

a {
  color: #435779;
  text-decoration: none;
}

.clear{clear: both;}

.Wrap {
	width: 100%;
}

h1{
	font-size: 30px;
	color: #001966;
	font-family:"微軟正黑體";
	}
h2{
	font-size: 22px;
	color: #000;
	font-family:"微軟正黑體";
	width: 100%;
	height: 34px;
	padding: 0;
	margin: 0 0 50px 0;
	line-height: 34px;
	}

.links {
	margin: 10px;
}
.links a {
	display: inline-block;
	padding: 3px 15px;
	margin: 7px 10px;
	background: #444;
	color: #fff;
	text-decoration: none;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.links a:hover {
	background: #eb3755;
	color: #fff;
}


/*Header*/
.Top-Wrap {
	width: 100%;
	height: 130px;
}
.Top-Bg{
	background-color: #000;
	height:30px;
	
	}

.Top-Language{ width: 100%; margin: 0 auto;}

.Top-Home{ margin: 5px 1% 0 0; color:#FFF; font-size:13px; float:right; z-index: 99999;}
.Top-Home a{ color:#FFF; }
.Top-Right{float:right; z-index: 9999;}

.Top-All-Menu{ width: 1100px; margin: 0 auto;}

.Left-Logo{
	float:left;
	margin: 1% 5% 0 0;
}




.Top-Menu{
	float:left;
	width: 65%;
	line-height: 80px;
	}
	



.container{ width: 100%;}


.Main-Banner{
	top:25px;
	z-index: 99;
	}

/*Main*/

	
.Main-About-Title{
	margin: 0 0 30px 0;
	}
	
.Main-About-Content{
	color: #000;
	font-size: 14px;
	line-height: 30px;
	}
.Main-Product{
	width: 100%;
	background-color: #38D2F8;
	height: 80px;
	clear: both;
	margin: 20px 0 0 0;
}
.Main-Product-Title{
	margin: 0 auto;
	padding: 25px 0 0 0 ;
	}
.Main-Product-Content{
	width: 100%;
	}

/*內頁背景*/	

.About-BG, .News-BG, .Product-BG, .Voltmeter-BG, .Download-BG, .Contact-BG{
	z-index:0;
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	margin-top: 20px;

	}


.About-BG{
	background-image:url(../img/Bg/BG-About.jpg);
	}
.News-BG{
	background-image:url(../img/Bg/BG-News.jpg);
	}
.Product-BG{
	background-image:url(../img/Bg/BG-Product.jpg);
	}
.Voltmeter-BG{
	background-image:url(../img/Bg/BG-Voltmeter.jpg);
	}
.Download-BG{
	background-image:url(../img/Bg/BG-Download.jpg);
	}
.Contact-BG{
	background-image:url(../img/Bg/BG-Contact.jpg);
	}

/*內頁*/
.Inside-container, .Inside-container2, .Inside-container3{
	
	margin: 40px auto 0  auto;
	background-image: url(../img/Bg/BG.png);
	position: relative;
	}
	
	
.News-container{
	margin: 2% auto 0 auto;
	padding: 5px 30px 0 30px;
	position: relative;
	height: auto;
	background-color: rgba(255,255,255,0.8);
	}
	
/*About*/
.About-Contact span{
	font-size: 20px;
	font-weight: bold;
	color: #8C0000;
	}
	
/*News*/
.News-Header{ margin: 3% auto 0 auto;}

.News-Title{
	font-size: 32px;
	color: #FFF;
	background-color: rgba(0, 0, 0, .6);
	position: relative;
	text-align: center ;
	}
	
.News-List{
	margin-top: 50px;
	}	
	
.News-List ul li{
	background-color: #FFF;
	padding: 1.5% 0 0 1.5%;
	}
.News-List ul li p a{
	color: #666;
	font-size: 15px;
	line-height: 22px;
	}
.News-List ul li p a:hover{
	color: #006699;
	}

.News-Date{ color:#4581C4; font-size: 14px; line-height: 26px;}	

.News-List-Title{
	width: 100%;
	height: 54px;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #477DCF;
	margin: 0 0 20px 0;
}

.News-ListPage{
	float: right;
	margin: 2% 0;
	}
.News-Content img{
	width: 95%;
	}


.Product-Right{
	float:right;
	}
	
.Product-Right ul li{
	float:left;
	margin-right: 20px;
	margin-bottom: 20px;
	}

	
.Product-Detail{
	width: 98%;
	background-color: #555555;
	color: #FFF;
	padding: 2% 2% 10% 2%;
	
	}	


	
.Product-Detail span{
	color: #FFF;
	font-size: 13px;
		}
.Product-Detail-Content{
	width: 98%;
	color: #666;
	font-size: 20px;
	font-weight: bold;
	margin: 20px 0 0 0;
	
	}


	
.Product-Detail-Title{
	width: 100%;
	color: #333;
	border-bottom: solid 1px #333;
	margin:  0 0 20px 0;
	clear:both;
	}	
	
/*Download*/
.Download-List ul li{
	height: 300px;
	}

.Box{
	font-size: 14px;
	font-weight: bold;
	color: #999;
	width: 80%;
	height: 25px;
	background-color: #EEE;
	line-height: 22px;
	border: 1px solid #BBB;
	}

.Contact-Button	{
	background-color: #28517D;
	height: 30px;
	width: 30%;
	margin: 0 3% 0 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 13px;
	color: #FFFFFF;
	}	
/*footer*/

.footer{
	width: 100%;
	background-color: #666;
	z-index: 99999;
	clear:both;
	bottom: 0;
	}
	
.Footer-Main	{
	width: 100%;
	background-color: #666;
	z-index: 99999;
	clear:both;
	bottom: 0;
	position: relative;
	}

.Footer-Container{
	margin:0 auto;
	padding: 15px 0 0 0;
	font-size: 13px;
	color: #FFF;
	line-height: 28px;
	}



.black{
	font-size: 14px;
	font-weight: bold;
	color: #000;
	line-height: 30px;
	}
.red{
	font-size: 14px;
	font-weight: bold;
	color: #8C0000;
	line-height: 22px;
	}

/*電腦版左選單*/

ul.mtree {
  opacity: 0;
  margin-left: 0;
  padding: 0.4em;
}
ul.mtree ul {
  margin-left: 0.5em;
}
ul.mtree li {
  list-style: none;
}
ul.mtree a {
  display: block;
}
ul.mtree li.mtree-node > a {
  font-weight: bold;
}

ul.mtree a {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}


ul.mtree.transit {
  background: #111;
}
ul.mtree.transit ul {
  margin-left: 0;
}
ul.mtree.transit ul > li {
  font-size: .6em;
}
ul.mtree.transit li.mtree-node {
  position: relative;
}
ul.mtree.transit li.mtree-node > a:before {
  color: #CCC;
  font-weight: normal;
  position: absolute;
  right: 20px;
}

ul.mtree.transit ul > li:first-child {
  margin-top: 1px;
}
ul.mtree.transit li.mtree-open > a {
  background: #222;
}
ul.mtree.transit li > a:hover, ul.mtree.transit li.mtree-active > a {
  background: #333;
  color: #FFF;
}
ul.mtree.transit li.mtree-node > ul > li:last-child {
  margin-bottom: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #333;
}
ul.mtree.transit li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.transit a {
  padding: 5px 0px 10px 0.8em;
  color: #CCC;
  line-height: 24px;
}
ul.mtree.transit li li > a {
  padding-left: 1.6em;
}
ul.mtree.transit li li li > a {
  padding-left: 2.4em;
}
ul.mtree.transit li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.transit li li li li li > a {
  padding-left: 4em;
}





	
	
@media only screen and (min-width: 320px) {
h1{
	margin: 50px 0 20px 0;
	}

.Top-Language{ width: 100%;}
.Top-Home{ width: 20%; }
.Top-Right{width: 40%; }
.Top-All-Menu{ width: 100%;}
.Left-Logo{
	width: 80%;
	float:left;
	margin: 1% 5% 0 0;
}
.Left-Logo img{
	width: 80%;
}


.Top-nav {
	display: none;
	}
.Top-nav ul li{
	display: none;
	}


.Top-Menu{
	float:left;
	width: 100%;
	line-height: 80px;
	}


.Inside-container, .Inside-container2, .Inside-container3{
	padding: 20px 10px 100px 10px;
	}

.Inside-container3{
	width: 100%;
	height: auto;
	}


.Main-About{ 
	width: 100%;
	margin: 30px 0 0 0 ;}

.Main-About-Left{
	width: 96%;
	margin-right: 2%;
	margin-left: 2%;
	float: none;
	}
.Main-About-Right{
	width: 100%;
	float: none;
	}
.Main-About-Right img{
	width: 100%;
	}

.Inside-container, .News-container{
	width:100%;
	}

.Inside-container{
	height: 3000px;
	}

.About-img{
	width: 100%;
	}

.About-img img{
	width: 90%;
	}
	
.Main-Product-Title{
	width: 100%;
	}

.About-BG, .News-BG, .Product-BG, .Voltmeter-BG, .Download-BG, .Contact-BG{
	position: absolute;
	display: none;
	}

	
/*News*/
.News-BG{
	width:100%;
	height:1000px;
	}

.News-Header{ width: 100%;}
.News-Title{
	width: 100%;
	height: 90px;
	margin: 0;
	padding: 8% 0 0 0;
	}

.News-List ul li{
	width: 90%;
	height: 230px;
	margin: 3% auto;
	float: none; 
	}
		
/*Download*/
.Download-List ul li{
	width: 100%;
	margin: 3% 0 3% 0;
	float: none;
	}

.Product-Left{
	display:none;
	}
.Product-Right{
	width: 100%;
	}	
.Product-Detail{
	height: auto;
	width:100%;
	}		
.Product-Right ul li img{
	width:90%;
	margin: 1.5% 0 0 1.5%;
	}
	
.Product-Detail-Content img{
	width: 98%;

	}

/*Contact*/
.Contact-Left{
	width: 100%;
	margin: 0 2% 15% 0;
	float: none;
	}

.Contact-Left img{
	width: 90%;
	}
		
/*Footer*/	

.footer{
	position: relative;
	}	
.Footer-Container{
	width: 100%;
	height: 170px;
	}
.Footer-Left{
	width: 98%;
	margin-left: 1.5%;
	}
	
.Footer-Right{
	width: 95%;
	margin-top: 3%;
	margin-left: 1.5%;
	}
  }

@media only screen and (max-width: 320px) {

.Inside-container{
	height: 2000px;
	}

}

@media only screen and (min-width: 480px) {
	.News-Title{
	padding: 5% 0 0 0;
	}


}



 
@media only screen and (min-width: 640px) {

.News-Title{
	padding: 3% 0 0 0;
}

/*Download*/
.Download-List ul li{
	width: 40%;
	margin: 3% 0 3% 0;
	float: left;
	}

}


@media only screen and (min-width: 768px) {

/*Download*/
.Download-List ul li{
	width: 32%;
	margin: 3% 0 3% 0;
	float: left;
	}
h1{
	margin: 0 0 20px 0;
	}

.Top-nav {
	display: none;
	}
	
.Main-Product-Title{
	width: 1100px;
	}
.Top-Home{ width: 12%;}
.Top-Right{width: 18%;}

.Left-Logo{
	width: 50%;
	float: left;
	margin-left:13%;
}


.Main-About-Left{
	width: 47%;
	float: left;
	margin-right: 3%;
	margin-left: 0;
	}
.Main-About-Right{
	width: 50%;
	float: left;
	}
.Main-About{ 
	width: 1100px;
	margin: 30px auto 0 auto;}

.About-Map{
	width: 50%;
	float: left;
	}
.About-Contact{
	width: 35%;
	margin: 0;
	float: left;
	}

.Inside-container, .News-container{
	width:98%;
	}
	
.Inside-container{
	height: 580px;
	}

.News-container{
	height: 700px;
	margin-bottom: 40px;
}


	
/*News*/
.News-BG{
	width:100%;
	height:780px;
	}
.News-Header{ width: 75%;}

.News-Title{
	width: 23%;
	height: 90px;
	margin: 0;
	padding: 1.5% 0 0 0;
	line-height: 2em;
	}
	
.News-List ul li{
	width: 31.3%;
	height: 230px;
	margin: 0 2% 0 0; 
	float: left; 
	}		
.News-Left{
	float: left;
	width: 40%;
	margin: 0 2% 0 0;
	}

.News-Right{
	float: left;
	width: 50%;
	margin: 0;
	}
		
/*Download*/
.Download-List ul li{
	width: 28%;
	margin: 0 4% 3% 0;
	float: left;
	}
	
	

.Product-Right{
	width: 100%;
	}

.Product-Detail{
	height: auto;

	}	
.Product-Detail-Content img{
	width: 90%;

	}	
.Inside-container, .Inside-container2, .Inside-container3{

	padding: 30px 30px 100px 30px;

	}	
	
	
/*Contact*/
.Contact-Left{
	width:45%;
	margin: 0 2% 0 0;
	float:left;
	}

.Contact-Right{
	width:50%;
	float:left;
	}	
/*Footer*/	

.footer{
	position: absolute;
	}
		
.Footer-Container{
	width: 80%;
	height: 80px;
	}
.Footer-Left{
	width: 70%;
	float: left;
	margin-left: 0;
	}
	
.Footer-Right{
	width: 30%;
	float: Right;
	margin-top: 1%;
	margin-left: 0;
	}

  }


@media only screen and (max-width: 768px) {

.About-img{
	width: 100%;
	}
	
.About-img img{
	width: 100%;
	}
.Product-Right ul li img{
	width:100%;
	}
}



@media only screen and (min-width: 1024px) {

.Top-Home{ width: 6%;}

/*Menu*/


.Left-Logo{
	width: 26%;
	float: left;
	margin-left:;
	margin: 25px 2% 10px 2%;
	z-index: 99999;
}

.Left-Logo img{
	width: 98%;

}

/*Menu*/

.Top-nav {
	display: block;
	z-index: 999;
	position: relative;
	width: 100%;
	padding-top: 25px;
	}

.Top-nav ul li {
	
	font-size: 15px;
	color: #000000;
	text-align:center;
	float: left;
	list-style-type: none;
	width: 120px;
}


	
.About-BG, .News-BG, .Product-BG, .Voltmeter-BG, .Download-BG, .Contact-BG{
	height:2000px;
	position: absolute;
	display: block;
	}

.About-img img{
	width: auto;
	}
	
.Product-Left{
	width: 18%;
	float:left;
	margin-right: 2%;
	display:block;
	}
.Product-Right{
	width: 80%;
	}	
	
.Product-Detail{
	height: 450px;

	}		
}  
  
 
@media only screen and (min-width: 1280px) {



/*Download*/

.Download-List ul li{
	width: 21%;
	margin: 0 4% 3% 0;
	float: left;
	}
	
/*Menu*/

.Top-nav {
	display: block;
	z-index: 999;
	position: relative;
	width: 100%;
	padding-top: 25px;
	}

.Top-nav ul li {
	
	font-size: 15px;
	color: #000000;
	text-align:center;
	float: left;
	list-style-type: none;
	width: 145px;
}


.About-img img{
	width: 100%;
	}
.footer{
	position: absolute;
	}

}

@media only screen and (max-width: 1280px) {

.About-BG, .Product-BG, .Voltmeter-BG, .Download-BG, .Contact-BG{
	height:780px;
	}

.News-BG{
	height:887px;
	}

.Top-nav {
	display: block;
	z-index: 999;
	position: relative;
	width: 100%;
	padding-top: 25px;
	}	
.Top-nav ul li {
	font-size: 15px;
	color: #000000;
	text-align:center;
	float: left;
	list-style-type: none;
	width: 140px;
}

.Inside-container, .News-container{
	width:90%;
	}

.About-img img{
	width: 100%;
	}
.Inside-container{
	height: 800px;
	margin-bottom: 102px;
	}

}

@media only screen and (min-width: 1366px) {

.About-img img{
	width: 60%;
	}
}
 
@media only screen and (max-width: 1366px) {


.Inside-container{
	height: 980px;
	margin-bottom: 50px;
	}
.About-BG, .Product-BG, .Voltmeter-BG, .Download-BG, .Contact-BG{
	height: 1050px;
	}

.About-img{
	width: 100%;
	}

.About-img img{
	width: 100%;
	}

.News-BG{
	height: 890px;
	}
.footer{
	position: relative;
	}
}


@media only screen and (min-width: 1400px) {

.Left-Logo{
	width: 18%;
	float: left;
	margin: 25px 4% 10px 13%;
	z-index: 99999;
}

.About-BG, .Contact-BG{
	height: 1300px;
	}


.Download-BG{
	height: 1800px;
	}

.News-BG{
	height: 1950px;
	}

.Voltmeter-BG{
	height: 1820px;
	}

.Product-BG{
	height: 3150px;
	}




.Inside-container, .News-container{
	width:75%;
	height:  1700px;
	}

.Inside-container{
	margin-bottom: 40px;
	
	}

.Inside-container2{
	width:75%;
	height: 1200px;
	}


.Inside-container3{
	width:75%;
	height: 3100px;
	}


.footer{
	position: relative;
	}
}