@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=PT+Sans);

/* commen */
html { background: #ececec;}
body{
	margin: 0 auto;
	padding: 0;
	font-family: 'PT Sans', Arial, sans-serif, 微軟正黑體, Microsoft JhengHei, 新細明體;
}

a:link, a:visited, a:active {text-decoration:none; color: #000000;}
a:hover {text-decoration:none; color: #e83525; transition: .3s color;}

ul, li { margin: 0; padding: 0; list-style: none;}
img { border: 0; max-width: 100%;} 

.clear {display: inline-block;}
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

.shadow {
-moz-box-shadow:  0px 3px 10px 0px #555555;
-webkit-box-shadow:  0px 3px 10px 0px #555555;
box-shadow:  0px 3px 10px 0px #555555;
}
.border { border: 1px solid #aaaaaa;}
.dotted { border: dotted 1px #555555;}
.dotted-bottom { border-bottom: dotted 1px #555555;}

.left { float: left;}
.right { float: right;}
.center { margin: 0 auto;}
.inline { display: inline-block; zoom:1; *display: inline; _height: 30px;}

.padding1 { padding: 0.7em 0;}
.padding2 { padding: 0.3em 0;}
.article-padding { padding: 0 0.7em;}
.padding-right { padding-right: 1em;}
.padding-left { padding-left: 1em;}

.margin-top { margin-top: 1em;}
.margin-bottom { margin-bottom: 1em;}
.margin-right { margin-right: 1em;}
.margin-left { margin-left: 1em;}

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-style: normal;
  color: #000000;
  text-rendering: optimizeLegibility;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
  line-height: 1.2125em; }
  
h1 { 
font-family: Myriad Pro, Arial, sans-serif, 微軟正黑體, Microsoft JhengHei, 新細明體; 
font-size: 20px; 
margin-top: 0; 
margin-bottom: 7px; 
color: #e83525;
}

h2 { font-size: 1.6875em;}
  
h3 { font-size: 1.5em;}

h4 { font-size: 1.125em;}
  
h5 { font-size: 1em; font-weight: normal; letter-spacing: 1px;}

h6 { font-size: 14px; margin: 0;}

hr {
  border: solid #dddddd;
  border-width: 1px 0 0;
  clear: both;
  margin: 1.25em 0 1.1875em;
  height: 0; }
  
/* INPUT BUTTON */
button, .button {
display: inline-block; }

button, .button {
border: none;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
background-color: #e83525;
color: white;
height: 2em;
width: 100%;
}
  button:hover, button:focus, .button:hover, .button:focus {
    background: #cccccc; transition: .3s background; }
  button:hover, button:focus, .button:hover, .button:focus {
    color: white; }

figure a { display: block;}
.row {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 64em;
position: relative;
*zoom: 1;
}
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
}
.wrap {
width: 100%;
max-width: 1680px;
min-width: 1280px;
margin: 0 auto;
position: relative;
background: #ffffff;
}
@media only screen and (min-width: 1280px) and (max-width: 1680px) {

}

/*TOP*/
header { background: #ffffff;}
.header { 
height: 6em;
position: absolute;
top: 0;
left: 50%;
margin-left: -512px;
z-index: 500;
}
.header-bottom { background: url(../images/top-sep.png) center bottom no-repeat; width: 100%; height: 16px; position: absolute; bottom: 0;}
.header-wrap { width: 100%; margin: 0 auto;}
.header-left { 
vertical-align: bottom;
position: absolute;
bottom: 2.3em;
margin-left: 12em;
}

.header .search-wrap { padding-left: 1.5em;}
.header .search {
width: 188px;
height: 25px;
}
.header .search .search_textarea {
width: 145px;
height: 17px;
font-size: 12px;
letter-spacing: 1px;
padding: 0 5px;
outline: 0; /*chrome的黃框線*/
border-radius: 5px;
border: 2px solid #bababa;
-webkit-appearance: none;
float: left;
}
.header .search .search_textarea:hover, .search .search_textarea:focus {  
border: 2px solid #888888;
-webkit-appearance: none;
}
.header .search .search_submit {
width: 25px;
height: 25px;
background: url(../images/search.png) 50% -5px no-repeat;
-webkit-appearance: none;
border: 0; 
}

.logo { margin-top: 1em; background: rgb(232,53,37); padding-top: 0.1em; width:16%;}
.nav ul li { float: left;}

.cover {
display: block;
width: 100%;
height: 6em;
background: url(../images/cover.png) 50% bottom no-repeat;
position: absolute;
bottom: 0;
z-index: 1;
}

/*Index*/
.index-about { width: 47%; padding-right: 3%;}
.index-custom { width: 100%; padding:0; margin:0 auto;}
.index-message {width: 50%; padding:0; margin:0 auto;}
.index-inquiry {width: 50%; padding:0;}
.more { 
width: auto;
height: auto;
border-radius: 5px;
font-size: 14px;
letter-spacing: 1px;
vertical-align: middle;
line-height: 20px;
padding: 0 6px;
}
.pd-inquiry{
float: left;
width: 100%;
border-radius: 7px;
border: 2px solid #dddddd;
margin-bottom: 12px;
padding: 5px;
height: 95px;
}
.pd-inquiry .inquiry-form {
  float:left;
  width: 100%;
}
.pd-inquiry ul li {
  padding: 0px 5px 0px;
  color:#333;
  float: left;
  width: 18%;
}
.pd-inquiry ul li:hover {color: #e83525;}
.pd-inquiry ul li a {
    display:block;
    border:none;
    text-decoration:none;
    padding:3px 0px;
}
.pd-inquiry ul li a:hover{transition: .0s color;}
.pd-inquiry ul li p {
  margin: 5px 0px;
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid #ccc;
  line-height: 1.5;
  padding: 3px 0px 3px 3px;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 49%, #f9f9f9 50%, #eeeeee 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#ffffff), color-stop(50%,#f9f9f9), color-stop(100%,#eeeeee));
  background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.pd-inquiry ul li p:hover {
  background: #ededed;
  background: -moz-linear-gradient(top, #ededed 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: -o-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: -ms-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
}
.pd-inquiry ul li a span {
  float: right; 
  font-weight:bold;
  font-size: 12px;
  padding:6px 5px 4px 5px;
  /*box-shadow: 2px 2px 0 #666666;*/
  background-color: transparent;
  line-height: 0.7;
  height:auto;
  width:auto;
}

.index-about article table { font-size: 14px; vertical-align: top;}
.index-about article table td { vertical-align: top; padding-bottom: 5px;}
/*Index -- Pd carousel*/
.index-custom .index-custom-wrap {
width: 100%; 
border-radius: 5px;
display: table;
text-align: center;
/*border: 1px solid #cccccc;
padding: 10px;*/
}
.index-custom .index-custom-wrap .index-custom-inner { width: 19%; margin-right: 10px;}
.index-custom .index-custom-wrap .index-custom-inner a { display: block;}
.index-custom .index-custom-wrap .index-custom-inner img { width: 100%;}
.index-custom .index-custom-wrap .index-custom-inner img:hover { opacity: .7;}
.block img:hover {opacity: .7;}

.index-custom-wrap .block figure {
border: 1px solid #cccccc;
position: relative;
width: 100%;
height: 230px;
float: left;
text-align: center;
}
.index-custom-wrap .block figure figcaption {
position: absolute;
bottom: 0;
background: #333333\9;
background: rgba(0, 0, 0, .7);
display: block;
width: 100%;
}
.index-custom-wrap .block figure figcaption div {
margin: 5px;
padding: 7px;
letter-spacing: 1px;
color: white;
border: 1px solid rgba( 255,255,255,.7);
height:45px;
}
.index-custom-wrap .block figure figcaption div a {
color: white;
font-size: 12px;
}
.index-custom-wrap:last-child {
margin-right: 0px;
}

/*Breadcrumbs*/
.breadcrumbs {
position: relative;
zoom: 1;
margin-top: 6em;
font-size: 13px;
letter-spacing: 1px;
padding: 15px 0;
}
.breadcrumbs > *:before {
content: "/";
font-weight: normal;
margin: 0 0.75em;
position: relative;
top: 1px; }
.breadcrumbs > *:first-child:before {
content: " ";
margin: 0; }
.breadcrumbs .active { font-weight: bold;}

/*About*/
article.about { width: 85%; margin: 0 auto; line-height: 1.4;}
article.about table { border: 1px solid #bbbbbb; /*white-space: pre-wrap;*/}
article.about table td { padding: 7px; vertical-align: top;}

/*Products*/
.products aside {
width: 25%;
padding-right: 2%;
background: url(../images/aside-bottom.jpg) center bottom no-repeat;
}
.products aside hgroup { padding: 0 7px; background: url(../images/aside.jpg) center top no-repeat; text-align: right;}
.products aside hgroup h5 { margin: 0; padding: 10px 0;}
/*Products--accordion*/
.accordion { padding: 15px 5px;}
.open { background: url(../images/arrow.jpg) top left no-repeat!important;}
.accordion h5{
font-size: 13px;
font-weight: bold;
white-space: pre-wrap;
background: url(../images/arrow2.jpg) top left no-repeat;
padding-left: 20px;
}
.accordion h5:hover {

}
.accordion p {
padding: 0;
margin: 0;
padding-left: 20px;
display: none;
}
.accordion p span{
display: block;
font-size: 13px;
line-height: 24px;
letter-spacing: 1px;
}
.accordion p span:hover { }

.products article { width: 73%;}
.products .block > * { margin-right: auto;}
.products .block > *:first-child { margin-right: 10px;}
.products .block figure { 
border: 1px solid #cccccc; 
position: relative; 
width: 32%; 
height: 284px;
float: left;
text-align: center;
margin-bottom: 10px;
}
.products .block figure figcaption { 
position: absolute;
bottom: 0;
background: #333333\9;
background: rgba(0, 0, 0, .7);
display: block;
width: 100%;
}
.products .block figure figcaption div { 
margin: 5px; 
padding: 7px;
letter-spacing: 1px;
color: white;
border: 1px solid rgba( 255,255,255,.7);
height: 60px;
}
.products .block figure figcaption div a { color: white;}

.products table { 
width: 100%;
border: 1px solid #bbbbbb;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
}
.products table th { 
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top,  #f3f3f3 0%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3f3f3 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3f3f3 0%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3f3f3 0%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3f3f3 0%,#eaeaea 100%); /* W3C */
font-weight: normal;
}
.products table td, .products table th { 
border: 1px solid #bbbbbb;
padding: 5px;
}
.products table td.img { position: relative;}
.products table td.img a { 
width: 100%;
height: 100%;
display: block;
}
.products table td.img img { width: 100%; height: auto; max-width: 121px; max-height: 91px;}
.products table td .zoom { 
background: url(../images/zoom.png) right bottom no-repeat; 
width: 95%; 
height: 90%;
position: absolute;
}

/*Firefox*/
@-moz-document url-prefix() 
{
.products table td.img { position: static;}
.products table td.img a { position: relative;}
.products table td .zoom { 
width: 100%; 
height: 100%;
}
}

.page { margin-top: 15px;}
.page .pageButton {
padding: 5px;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #727272;
background: #eeeeee;
margin: 0 5px;
}
.page span.active { color: white; background: #e83525;}

.page .pageButton:hover, .page .pageButton:focus{
background: #e83525; color: white;}

/*Custom*/
.banner {
width: 1440px;
margin: 0 auto;
background: #fff;
position: relative;
zoom: 1;
margin-top: 5em;
}
.custom figure { 
position: relative;
float: left;
width: 19.2%;
width: 19.1%\9;
margin-right: 0.7%;
border: 1px solid #cccccc;
}
.custom figure:hover { opacity: .7; filter: alpha(opacity=70);}
.custom figure .zoom { 
background: url(../images/zoom.png) right bottom no-repeat; 
width: 97%;
height: 97%;
position: absolute;
}
.custom div > *:last-child { margin-right: 0;}

.send {
width: auto;
height: auto;
padding: 17px 20px;
font-family: Myriad Pro, Arial, sans-serif, 微軟正黑體, Microsoft JhengHei, 新細明體; 
font-size: 18px;
letter-spacing: 1px;
box-shadow: 3px 3px 0 #af2013;
}
.send:hover, .send:focus { box-shadow: 3px 3px 0 #777777;}

/*Contact*/
.form label {
width: 25%;
float: left;
text-align: right;
line-height: 34px;
padding-right: 10px;
}
.form input, .form textarea {
width: 72%;
float: left;
width: 70%;
float: left;
border-radius: 7px;
border: 2px solid #dddddd;
margin-bottom: 12px;
padding: 5px;
}
.form input:focus, .form textarea:focus {
border: 2px solid #888888;
outline: none;
}
.form textarea {
width: 100%;
height: 100px;
}
.validation { 
text-align: right;
padding: 15px;
margin-right: 10px;
}

/*Search*/
.pd_top_container {
width: 82.5%;
margin: 0 auto;
padding: 20px 0 40px 0;
font-size: 14px;
text-align: center;
}
.pd_category { /*float: left;*/}
.pd_top_title { padding: 0 10px; /*float: left;*/}
/*下拉選單&textarea*/
.pd_category_select, .pd_search_input { padding: 0 5px; /*padding: 0 10px; margin-right: 10px; float: left;*/}
.pd_select { width: 100%; text-align: center;}
.pd_option { text-align: center; margin: 0 auto;}
.pd_input {
width: 220px;
letter-spacing: 1px;
padding: 0 5px;
outline: 0;/*chrome的黃框線*/
border: 1px solid #aaaaaa;
-webkit-appearance: none;
height: 20px;
}
.pd_search_submit {
padding: 2px 15px;
margin-left: -5px;
color: #ffffff;
border: none;
-webkit-appearance: none;
background: #e83525;
}
.pd_search { width: 530px; margin: 10px auto 0 auto;}
.result {
clear: both;
text-align: center;
padding-top: 15px;
letter-spacing: 1px;
}
.result_keyword { color: #e51b24; font-size: 14px;}


/*FOOTER*/
footer { 
width: 100%;
height: 100%;
background: #ececec;
font-size: 13px;
text-align: center;
}
footer .top { background: url(../images/footer.jpg) center top no-repeat; width: 100%; height: 76px;}

/*Floating PartNumber*/
#floatMenu {
    position:absolute;
    border:1px solid #eeeeee;
    top:135px;
    left:50%;
    margin-left:530px;
    width:120px;
}
#floatMenu ul {
    margin-bottom:0px;
}
#floatMenu ul li {
  /*border-bottom: 1px solid #eeeeee; 
  border-top:1px solid #fff;*/
  background-color:#f9f9f9;
  padding: 8px 5px 0px;
  color:#333;
}
#floatMenu ul li.fMenu-head{
  text-align: center;
  font-size:14px;
  font-weight: bold;
  padding: 10px 0px;
  border-bottom: 1px double #eeeeee;
}
#floatMenu ul li.fMenu-head:hover {color:#333;}
#floatMenu ul li:hover {color: #e83525;}
#floatMenu ul li a {
    display:block;
    border:none;
    text-decoration:none;
    font-size: 15px;
    padding:3px 0px;
}
#floatMenu ul li a:hover{transition: .0s color;}
#floatMenu ul li p {
  margin: 0px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border: 1px solid #ccc;
  line-height: 1.5;
  padding: 3px 0px 3px 3px;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 49%, #f9f9f9 50%, #eeeeee 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#ffffff), color-stop(50%,#f9f9f9), color-stop(100%,#eeeeee));
  background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 49%,#f9f9f9 50%,#eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
#floatMenu ul li p:hover {
  background: #ededed;
  background: -moz-linear-gradient(top, #ededed 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: -o-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: -ms-linear-gradient(top, #ededed 0%,#ffffff 100%);
  background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
}

#floatMenu ul li a span {
  float: right; 
  font-weight:bold;
  font-size: 12px;
  padding:6px 5px 4px 5px;
  /*box-shadow: 2px 2px 0 #666666;*/
  background-color: transparent;
  line-height: 0.7;
  height:auto;
  width:auto;
}
#floatMenu .addto {
  margin: 10px 10px 15px;
  width: 100px;
  height: 2em;
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  background: #e83525;
  color: #fff;
  box-shadow: 0 4px 0 #af2013;
  transition: .1s linear; 
  border-radius: 3px;
}
#floatMenu .addto:active {
  background: #e83525;
  color:#efefef;
  box-shadow: 0 2px 0 #666; 
  transform: translateY(3px);
}