*{font-family:Microsoft JhengHei;font-size:12px;}
body{margin:0;padding:0;background-color:#e8e8e8;}
img{border:0;}
table,tr,td{padding:0;margin:0;border-collapse:collapse;}
td{vertical-align:top;}
iframe{border:0;padding:0;margin:0;}
a{color:#e8e8e8;font-weight:bold;text-decoration:none;}


#header{
  position:fixed;
  z-index:1000;
  width:100%;
  top:0;
 }
.headercontainer{
  margin-left: auto;
  margin-right: auto;
  width:1040px;
}


.menubar img{
width:90px;
height:90px;
float:left;
margin-right:520px;
}

.menubar{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-weight:bold;
	background:#100054;
}
.menubar ul{
    background:#100054;
    height:70px;
    list-style:none;
    margin:0;
    padding:0;
}
.menubar li{
    float:left;
    padding:0px;
}
.menubar li a{
    background:#100054;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:70px;
    margin:0px;
    padding:0px 35px;
    text-align:center;
    text-decoration:none;
	font-size:18px;
}
.menubar li a:hover, .menubar ul li:hover a{
    background:#0B003B;
    color:#FFFFFF;
    text-decoration:none;
}
.menubar li ul{
    background:#100054;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:200px;
    z-index:200;
	/*top:1em;
    /*left:0;*/
}
.menubar li:hover ul{
    display:block;
}
.menubar li li {
    background:#160073;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
}
.menubar li:hover li a{
    background:none;
}
.menubar li ul a{
    display:block;
    height:70px;
    font-size:16px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menubar li ul a:hover, .menubar li ul li:hover a{
    background:#0B003B;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
.menubar p{
    clear:left;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width:1040px;
  margin-top:150px;
}

.orangehr{border:0px;height:2px;color:#999;background-color:#999;margin: 30px 0 0 0;margin:0;border-collapse:collapse;font-size:1px;}
.introducetitle {color:#000000;}


#contentwrapper{background:url("images/background.png");background-repeat: repeat-x;min-width: 1080px;}
#contentmargin{width:1040px;margin:auto;}

.boxcontent{background-color:#ffffff;margin:0 32px;overflow: hidden;}
.boxcontent hr{border:0px;height:1px;color:#999;background-color:#999;margin: 10px 0 10px 0;}

.boxtopwide, .boxtopthin{padding:27px 32px 0 0;height:27px;margin-right:2px;}



.boxwide{color:#77787b;overflow: hidden;}
.boxtopwide{background:url("images/box-top-wide.png");width:1040px;}
.boxbottomwide{background:url("images/box-bottom-wide.png");width:1040px;height:32px;}
.boxleftwide{background:url("images/box-left.png") repeat-y;width:1040px;}
.boxrightwide{background:url("images/box-right.png") right repeat-y;text-align:left;width:1076px;margin:0 0 -4px 0;}
.boxwide .boxcontent{background-color:#ffffff;width:94%;}

.boxthin{float:right;color:#77787b;}
.boxtopthin{background:url("images/box-top-thin1.png");width:444px;}
.boxbottomthin{background:url("images/box-bottom-thin.png");width:476px;height:32px;}
.boxleftthin{background:url("images/box-left.png") repeat-y;width:476px;}
.boxrightthin{background:url("images/box-right.png") right repeat-y;text-align:left;width:476px;}

.boxscreen{background:url("images/box-screen.png");width:428px;margin:18px 0 0 17px;color:#ffffff;padding:15px;float:left;}
/*.boxscreen a{color:#d17600;font-weight:bold;text-decoration:none;}*/
.boxscreen hr{border:0px;height:1px;color:#dddddd;background-color:#dddddd;margin: 10px 0 10px 0;}
.boxscreen h3{color:#333333;font-size:14px;padding:0 0 5px 0;margin:0;line-height:14px;}

.video{
	margin:auto;
	width:1020px;
	margin-bottom:100px;
}

.introduce{
margin:auto;
width:1020px;
margin-top:100px;
margin-bottom:100px;

}
.introduce img{
margin-bottom:50px;
}
.introduce li{
margin:auto;
margin-top:40px;
width:1020px;
font-size:30px;
list-style: none;
}

.introduce ul{
padding:0;
margin:auto;
margin-top:40px;
width:1020px;
font-size:34px;
list-style: none;
}


#gutterleft{width:12px;height:20px;float:left;}

#footer{width:960px;padding:20px 0 20px 0;margin:0 auto;text-align:right;color:#555;height:80px;}
#footer #links{float:left;margin:0 0 0 0;}
#footer #links a{color:#555;text-decoration:none;margin:0 7px;font-size:18px;}
#footer #info{font-size:18px;margin:0 40px 0 0;}
#footer #info span{color:#555;font-size:18px;}
#footer #info b{margin-left:18px;font-size:18px;float:right;}
#footer #info li{margin-left:18px;font-size:14px;float:right;list-style: none;margin-top:15px;margin-bottom:10px;}




.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display: inline-block;}  /* for IE/Mac */
<!--[if IE]>
  .clear {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
<![endif]-->



/*------------------------contact pages-------------------------*/

.section-content{
margin-top:170px;
}
.col-md-12{
width:1040px;
margin:0 auto;
}


.map-holder {height:600px; border: 1px solid #d5dbe0; padding: 6px; background-color: #fafafa; }

li.contact a { border-color: #e3387c; }
li.contact a.active { color: #e3387c; }

.row {
margin-top:30px; 
margin-bottom:90px;
}

.inputcontainer{
padding-top:70px;
width:600px;
}

.massagebox{
width: 100%;
position: relative;
min-height: 1px;
margin-left: 15px;
margin-right: 15px;

}
.massagebox input {margin-bottom:20px; font-size:15px; margin-top: 10px;}
.massagebox label { font-size:17px; color:#333; }

.tel{
width:330px;
height:150px;
float:right;
display:block;
margin-top:92px;
font-size:40px;
background-color:#b4b4b4;
margin-right:25px;
border-radius: 4px;

}

.tel ul{
list-style: none;
padding-left:20px;
}

.tel p{
font-size:20px;
color:#333;
padding-top:10px;

}

.link{
width:330px;
height:340px;
float:right;
display:block;
margin-top:75px;
font-size:50px;
background-color:#b4b4b4;
border-radius: 4px;
padding-right:30;

}
.link li{
margin-top:30px;
margin-left:10px;
}

.link a{
font-size:20px;
color:#333;
list-style: none;

}

.link a:link{
	color: #111;
	opacity: .50;
	text-decoration: none;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
	-ms-transition: opacity .25s ease;
	-o-transition: opacity .25s ease;
	font-size:22px;
	padding: 10px;
}
.link a:hover {
	opacity: 1;
}

.link a:visited {
	color: #222
}


.link p {
font-size:25px;
text-align:center;
text-shadow: -2px 0px 3px #666;
}


.form-input, .form-area {
background: white;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
outline: 0;
line-height: 25px;
-o-transition: border-color 0.2s linear, box-shadow 0.2s ease;
-moz-transition: border-color 0.2s linear, box-shadow 0.2s ease;
-webkit-transition: border-color 0.2s linear, box-shadow 0.2s ease;
transition: border-color 0.2s linear, box-shadow 0.2s ease;
border-width: 1px;
border-style: solid;
border-color: gainsboro;
display:block;
width:600px;
height:50px;
}
.form-area{min-height: 240px;}

/*--------------------------submit E-mail button------------------------------*/

.submit-btn {
   border-top: 1px solid #777;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   
   position: relative;
   overflow: hidden;
   display: inline-block;
   margin-top: 25px;
   margin-left: 15px;
   margin-bottom:15px;
}

.submit-btn:before {
   content: "";
   width: 200%;
   height: 200%;
   position: absolute;
   top: -200%;
   left: -225%;

   background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0)); 
   background-image: -moz-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));  
    
     -moz-transition: all 0.5s ease-out; 
       -o-transition: all 0.5s ease-out; 
  -webkit-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
}

.submit-btn:hover:before {
  top: 200%;
  left: 200%;   
}

input[type="submit"]{
    text-decoration:none;
	background-color:rgba(255,255,255,0);
	border:0px;
}


/*-------------------------------------產品---------------------------------*/

.pdt-container{
  margin-left: auto;
  margin-right: auto;
  width: 1040px;
  margin-top:97px;
}

.pdt-2-back,.pdt-3-back,.pdt-2-front,.pdt-3-front,.pdt-4-front,.pdt-5-front,.pdt-6-front,.pdt-7-front{
margin:auto;
margin-top:-12px;
margin-bottom:-12px;
}

.pdt-1-img img,.pdt-2-img img,.pdt-3-img img,.pdt-4-img img,.pdt-5-img img,.pdt-6-img img,.pdt-7-img img{
width:380px;
height:380px;
float:left;
padding: 10px 10px 10px 10px ;
}

.pdt-1-front img,.pdt-3-front img,.pdt-5-front img,.pdt-7-img img{
width:500px;
height:500px;
float:left;
padding: 10px 10px 10px 10px ;
}

.pdt-2-front img,.pdt-4-front img,.pdt-6-front img{
width:500px;
height:500px;
float:right;
padding: 10px 10px 10px 10px ;
}

.pdt-1 ul,.pdt-2 ul,.pdt-3 ul,.pdt-4 ul{
list-style: none;
height:370px;
padding-top:30px;
margin-bottom:0px;
}

.pdt-1 p,.pdt-2 p,.pdt-3 p,.pdt-4 p{
font-size:20px;
color:#444;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
margin-left:380px;
text-shadow: -2px 0px 3px #999;
}
.pdt-1 li,.pdt-2 li,.pdt-3 li,.pdt-4 li{
font-size:15px;
color:#444;
margin-left:380px;
}

.pdt-1-back{
background-color:#e8e8e8;
margin:auto;
margin-top:-14px;
margin-bottom:-12px;
height:400px;
}

.pdt-2-back{
background-color:#dedede;
height:400px;
}

.pdt-3-back{
background-color:#d1d1d1;
height:400px;
}

.pdt-4-back{
background-color:#BDBDBD;
height:400px;
}

.pdt-1-front{
background:#e8e8e8;
margin:auto;
height:522px;
margin-top:-14px;
}

.pdt-2-front{
background:#dedede;
height:522px;
}

.pdt-3-front{
background:#d1d1d1;
height:522px;
}

.pdt-4-front{
background:#BFBFBF;
height:522px;
}
.pdt-5-front{
background:#ADADAD;
height:522px;

}
.pdt-6-front{
background:#9E9E9E;
height:522px;
}

.pdt-7-front{
background:#8C8C8C;
height:522px;
margin-bottom:20px;
}

.pdt-1-f ul,.pdt-2-f ul,.pdt-3-f ul,.pdt-4-f ul,.pdt-5-f ul,.pdt-6-f ul,.pdt-7-f ul{
list-style: none;
height:500px;
padding-top:30px;
}


.pdt-1-front:hover{
	background:#056269;	
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-2-front:hover{
	background:#944C00;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-3-front:hover{
	background:#632D2D;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-4-front:hover{
	background:#485C00;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-5-front:hover{
	background:#6C007A;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-6-front:hover{
	background:#035157;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}

.pdt-7-front:hover{
	background:#7D4000;
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
	
}



h2{
font-size:55px;
color:#666;
margin-top:200px;
margin-bottom:10px;
font-weight: bold;
margin-left:650px;
font-family:FangSong;

}

h3{
font-size:55px;
color:#808080;
margin-top:200px;
margin-bottom:10px;
font-weight: bold;
margin-left:570px;
font-family:FangSong;

}

.pdt-5-f h5{
margin-left:565px;
color:#777;
}

.pdt-6-f h5{
color:#666;
}
h5{
font-size:55px;
color:#888;
margin-top:200px;
margin-bottom:10px;
font-weight: bold;
margin-left:135px;
font-family:FangSong;

}
.pdt-4-f h5{
margin-left:90px;
}

h6{
font-size:55px;
color:#777;
margin-top:160px;
margin-bottom:10px;
font-weight: bold;
margin-left:640px;
font-family:FangSong;

}

.arrow img{
height:40px;
width:120px;
opacity:.35;
float:right;

}
.arrow{
height:40px;
margin-top:20px;
margin-bottom:10px;
}
.arrow :hover{
	opacity:1;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
}


.asknow {
	font-size:17px;
	font-weight:bold;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:1px solid #dcdcdc;
	padding:8px 19px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f9f9f9 7%, #e9e9e9 98% );
	background:-ms-linear-gradient( top, #f9f9f9 7%, #e9e9e9 98% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(7%, #f9f9f9), color-stop(98%, #e9e9e9) );
	background-color:#f9f9f9;
	color:#666666;
	text-shadow:1px 1px 0px #ffffff;
	float:right;
	margin-right:30px;
	margin-top:-70px;
}.asknow:hover {
	background:-moz-linear-gradient( center top, #e9e9e9 7%, #f9f9f9 98% );
	background:-ms-linear-gradient( top, #e9e9e9 7%, #f9f9f9 98% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(7%, #e9e9e9), color-stop(98%, #f9f9f9) );
	background-color:#e9e9e9;
}.asknow:active {
	position:relative;
	top:1px;
}



/*----------------------------------------產品(新)---------------------------------*/

.locate{
font-size:18px;
color:#888;
list-style: none;
margin-left:10px;
margin-bottom:20px;
}

.locate a{
font-size:18px;
color:#888;
list-style: none;

}

.npdt-1-back{
height:580px;
width:520px;
float:left;
}

.npdt-2-back{
height:580px;
width:520px;
float:right;
}

.npdt-3-back{
height:580px;
width:520px;
float:left;
margin-bottom:90px;
}

.npdt-4-back{
height:580px;
width:520px;
float:right;
margin-bottom:90px;
}

.npdt-n-back{
height:550px;
width:520px;
float:right;
margin-bottom:90px;
}

.npdt-1-img img,.npdt-2-img img,.npdt-3-img img,.npdt-4-img img,.npdt-5-img img,.npdt-6-img img,.npdt-7-img img{
width:380px;
height:380px;
margin-left:70px;
margin-top:70px;
}

.npdt-1 ul,.npdt-2 ul,.npdt-3 ul,.npdt-4 ul{
list-style: none;
padding-top:5px;
margin-bottom:0px;
}

.npdt-1 p,.npdt-2 p,.npdt-3 p,.npdt-4 p{
font-size:20px;
color:#444;
margin-top:5px;
margin-bottom:5px;
font-weight: bold;
text-shadow: -2px 0px 3px #999;
text-align:center;
}
.npdt-1 li,.npdt-2 li,.npdt-3 li,.npdt-4 li{
font-size:15px;
color:#444;
margin-left:380px;
}


.npdt-1-back:hover,.npdt-2-back:hover,.npdt-3-back:hover,.npdt-4-back:hover{
	background:#7480CF;	
	-webkit-transition: background .7s ease;
	-moz-transition: background .7s ease;
	-ms-transition: background .7s ease;
	-o-transition: background .7s ease;
}








/*----------------------單一商品頁-----------------------*/

.pdtback{
width:1024px;

}

.pdtimg img{
width:600px;
height:600px;
margin-left:212px;
}

.pdt ul{
list-style: none;
margin-top:40px;
margin-bottom:0px;
font-size:28px;
padding-left:0px;
}

.pdt li{
list-style: none;
font-size:16px;
float:left;
}

.pdtback p{
font-size:30px;
color:#444;
margin-top:5px;
margin-bottom:5px;
font-weight: bold;
text-shadow: -2px 0px 3px #999;
text-align:center;
}

.pdt{
width:1024px;
}


.pdt ul a.selected {
margin-bottom:0px;
color: #000;
background:#666;
border-bottom: 1px solid #666;
cursor: default;
color: #FFF;

}
.pdt ul a {
display: block;
padding: 6px 10px;
text-decoration: none!important;
margin-left:0px;
background:#D1D1D1;
font-size:18px;
color:#222;
}
.pdt div {
padding: 20px 20px 20px 20px;
clear: left;
background:#666;
font-size:16px;
color:#F2F2F2;
}
.pdtimg img{
margin-bottom:60px;
}

table{
border:0px;
margin:0px;
border-collapse:collapse;
}

table th{
padding:20px 10px 20px 0px;
font-size:16px;
text-align:left;
}

table td{
padding:20px 150px 20px 0px;
font-size:16px;
text-align:left;
}

.special ul{
margin-bottom:30px;
margin-top:0px;
}