@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 所有設備共同的樣式及手機、小型平板版型
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body { width: 100%;  background-color:#F9F9F9;  color:#000;}
a {  color:#000;  text-decoration:none;}
a:hover {  color:#333;  text-decoration:underline;}
/*==========================================
 header style
===========================================*/
header {  text-align:center;border-top: 3px solid #888; background-color:#ddd}
header h1 {  font-size:1.5em;  margin:0 auto;  padding:10px 5px 8px 5px;  width:90%;}
header h1 img {  width:100%;  max-width:265px;}
header {  position:relative;  overflow:hidden;}
header ul#s_nav {  margin-bottom:5px;  position:relative;  left:50%;  float:left;}
header ul#s_nav li {  float:left;  position:relative;  left: -50%;}
header ul#s_nav li a {  display:block;  font-size:1.2em;  margin-right:10px;  padding-left:10px;}
header ul#s_nav li.contact a {  background:url(../images/icn_contact.jpg) no-repeat left center;}
header ul#s_nav li.news a {  background:url(../images/icn_news.jpg) no-repeat left center;}
header ul#s_nav li.sitemap a {  background:url(../images/icn_sitemap.jpg) no-repeat left center;	}
header p {  width:100%;}
header p img {  width:100%;  height:auto;  max-width:960px;}

/*==========================================
  global navigation style
===========================================*/
nav ul {  margin-bottom: 10px;}
nav ul li {  text-align: center;  float: left;  width: 50%;  border-bottom: 1px solid #000;border-top: 0px solid #000;background-color:#eff;}
nav ul li:nth-child(odd) {  width: 49%;  border-right: 1px dotted #000;}
nav ul li a{  font-size:1em; display: block;  width: 100%;padding:5px 2px 5px 2px; }
/* 用以設定當前選擇項目的class */
.active {background-color:#ddd;}

/*==========================================
 content area style
===========================================*/
div#contents {  background: url(../images/bg_footer.jpg) no-repeat bottom;  padding-bottom: 90px;}
/*==========================================
 content area -> WORKS
===========================================*/
div#contents section#work h2 {  font-size:1.3em;margin: 0 0 15px 5px;}
div#contents section#work article {text-align:center;width:80%;min-width:200px;float:center;  margin-bottom:30px;}
div#contents section#work article img {width:90%;  height:auto;  max-width:220px;} /*圖片尺寸*/
div#contents section#work article h3 {font-size:1.1em;line-height:1.4em;color:#2d444f;font-weight: bold; }
div#contents section#work article p {text-align:left; font-size: 1em; line-height:1.8em;padding: 0 15px; color:#00C;display:none;}
div#contents section#work article h3:hover {;}

div#contents section#work art p {text-align: center;  font-size: 0.75em;  line-height: 1.5em;  padding: 0 10px;}
div#contents section#work art {text-align:left;width:60%;min-width:80px;float:left;margin-bottom: 50px;}
div#contents section#work art img {  width:100%;  height: auto;  max-width: 160px;} 
div#contents section#work art h3 {font-size:1.2em;line-height:1.5em;color:#2d444f; font-weight: bold;}
div#contents section#work art h3{color:#00F;line-height:1.2em;}
div#contents section#work art h3:hover {color:#ff8800;}

/*==========================================
 content area -> NEWS
===========================================*/
div#contents section#news {  margin-left: 5px;}
div#contents section#news h2 {  margin: 0 5px 15px 0;  background: url(../images/bg_headerLine.jpg) repeat-x bottom;  padding-bottom: 10px;}
div#contents section#news article h3 {  font-size: 0.7em;  background: url(../images/icn_arrow.jpg) no-repeat center left;  margin-bottom: 10px;  padding-left: 7px;}
div#contents section#news article p {  line-height: 1.3em;  font-size: 0.9em;  margin: 0 0 20px 10px;}
div#contents section#news article p a {  text-decoration: underline;}
div#contents section#news article p a:hover {  text-decoration: none;}

/*==========================================
 content area ->INFORMATION
===========================================*/
div#contents section#information {  text-align: center;  margin-left: 5px;} 
div#contents section#information h2 {  text-align: left;
  margin: 0 5px 15px 0;  background: url(../images/bg_headerLine.jpg) repeat-x bottom;
  padding-bottom: 10px;}
div#contents section#information ul li {  width: 100%;  margin-bottom: 5px;}
div#contents section#information ul li img {  width: 98%;  height: auto;  max-width: 470px;}

/*==========================================
page top button style
===========================================*/
a#pagetopBtn img {  position: fixed;  bottom: 10px;  right: 4px;}

/*==========================================
 footer style
===========================================*/
footer {  border-top: 3px solid #009; background-color:#eFF;}
footer div {  margin: 2px 10px 10px 20px;}
footer div p {  font-size: 0.75em;line-height: 2.0em; text-align: left;}
footer div small {  font-size: 0.7em;text-align: left;}

/* 電腦或大型平板的版型設定：769px～960px */
@media only screen and (min-width: 769px) {
  header {    position:static;    overflow:visible;  }
  header h1 {    text-align:left;    padding:15px 5px 7px 5px;    width:280px;    float:left;  }
  header h1 img {    width:100%;  }
  header ul#s_nav {    float:right;    margin-top:20px;    position:static;  }
  header ul#s_nav li {    float:left;    position:static;  }
  nav {    text-align: center;    border-bottom: 3px double #000;    margin: 10px auto 15px auto;  }
  nav ul li {text-align: center;float: left;    width: 16%;    border-bottom: none;    border-right: 1px dotted #000;  }
  nav ul li:nth-child(odd) {    width: 17%;    border-bottom: none;  }
  nav ul li.home {    border-left: none;    margin-left: 1px;  }
  nav ul li.contact {    border-right: none;  }
  nav ul li a{    display: block;  }
  div#contents section#work article {    width: 33%;  }
  div#contents section#work article h3 {    line-height: 2.0em;  }
  div#contents section#work article p {  font-size: 0.8em;    line-height: 2.0em;  }
}

/* 電腦版型設定：961px以上固定版型 */
@media only screen and (min-width: 961px) {
  header {    width:960px;    margin-left:auto;    margin-right:auto;  }
  nav {    max-width: 960px;  }
  nav ul{    margin-left: auto;    margin-right: auto;  }
  nav ul li:nth-child(odd) {    border-bottom: none;  }
  nav ul li.home {    border-left: 1px dotted #000;  }
  nav ul li.contact {    border-right: 1px dotted #000;  }
  div#contents {    max-width: 960px;    margin: 0 auto;  }
  div#contents section#work article {    width: 30%;  }
  div#contents section#work article h3 {    line-height: 1.4em;  }
  div#contents section#news {    width: 49%;    float: left;  }
  div#contents section#information {width: 49%;    float: right;  }
  footer {    text-align: center;  }
}