header {
  margin-bottom: 10px;
}
header ul {
  margin-bottom:0;
}
.hide-on-desktop, .hide-on-mobile, .hide-on-mobile-900 {
  display: none;
}

#top {
  padding: 0;
  background: url('../images/interface/top-nav.png') top left repeat-x;
  height:65px;
  position:relative;
}

#top-link {
  margin-top:12px;
}
#top-link a{
  width: 40px;
  height: 40px;
  margin-right:5px;
  float:right;
}
#top-link a.sitemap{
  background: url('../images/interface/sitemap.png') no-repeat;
}
#top-link a.sitemap:hover{
  background: url('../images/interface/sitemap-h.png') no-repeat;
}
#top-link a.account{
  background: url('../images/interface/account.png') no-repeat;
}
#top-link a.account:hover{
  background: url('../images/interface/account-h.png') no-repeat;
}

.logo {
  position: relative;
}
.logo h2 {
	padding:0;
	margin:0;
}
.logo a {
  position: absolute;
  width: 220px;
  height:63px;
  top:0;
  left:0;
  background: url('../images/site-brand-s2-small.gif') center center no-repeat;
}
main {
	margin-bottom:10px;
}
#breadcrumb {
	background-color: #F5F5F5;
    padding: 2px 10px;
    margin:0 0 10px;
}
#breadcrumb ul{
    margin:0;
}
#breadcrumb ul li{
    display:inline;
}

.module{
    margin-bottom:10px;
}
.attach, .latest, .answer {
margin-top:15px;
}
.attach a{
background-color: #FF9019;
background-position: 50% 15px;
background-repeat:no-repeat;
border:#4C4C4C 1px solid;
	-webkit-box-shadow: 0px 5px 5px #BABABA;
	-moz-box-shadow: 0px 5px 5px #BABABA;
	box-shadow: 0px 2px 5px #BABABA;	
margin: 0 10px 10px 0;
cursor:pointer;
text-align:center;
width:30%;
height:105px;
padding:60px 5px 0;

}
.attach a.setting{
background-image: url('../images/service/settings.png');
}
.attach a.seo{
background-image: url('../images/service/seo.png');
}
.attach a.camera{
background-image: url('../images/service/camera.png');
}
.attach a.payment{
background-image: url('../images/service/payment.png');
}
.attach a.social{
background-image: url('../images/service/social.png');
width:62.5%;
}

.answer h3, .latest h3, #footer h3{
	margin-bottom:10px;
	background:#000 url('../images/line.gif') repeat;
    padding: 3px 0 2px 10px;
    border:#4C4C4C 1px solid;
}

#footer {
	background:#B4CD3C url('../images/interface/footer_small_top.png') top left repeat-x;
	width:100%;
	min-height:160px;
  position:relative;
  padding-top:6px;
}
#footer > div{
	margin-top:10px;
}
#footer > .bottom{
	background: #FFF url('../images/interface/footer_small_bottom.png') bottom left repeat-x;
	height:12px;
	margin-top:0;
}
#footer h3{
    text-align: center;
    padding-left:2px;
}
#footer h4 {
    margin:10px 0;
}

#footer p {
	margin-bottom: 5px;
}
#footer .blog > ul {
    padding:0;
}
#footer .blog > ul {
  margin-left:0;
}

#footer .blog > ul > li > a {
margin-bottom:5px;
}

#footer .blog a:hover{
	text-decoration: underline;
}

#footer .blog img{
background-color:#FFF;
border:2px #777777 solid;
margin-top:5px;
}

#fb-fans {
    margin-top: 0px;
    text-align:center;
}
#social {
    position:absolute;
    width:150px;
    bottom:37px;
    right:0;
}
#social img{
    width:40px;
    margin-right:10px;
}
#about .brand, #about .contact-time {
    text-align:center;
    background-color:#4C4C4C;
}
#location .contact-mobile, #location .contact-address {
    text-align:right;
    background-color:#4C4C4C;
}

#about .contact-time, #location .contact-mobile, #location .contact-address {
    border-left:#FF9019 8px solid;
}
#about .social-link {
    margin:10px 0;
}
#about .brand img {
    max-width:125px;
    width:125px;
}
#about .contact-time img, #location .contact-mobile img, #location .contact-address img {
    max-width:320px;
}

#copyright {
    text-align:right;
    color: #000;
    background-color:#FFF;
    padding: 2px 20px;
    border-top:#899B38 1px solid;
    border-bottom:#899B38 1px solid;
}
#contact, #contact input, #contact select, #contact textarea{
	font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", PMingLiU, Verdana, Arial, sans-serif;
}
#contact .title > span:first-child {
    font-size:0.95em;
    border:#FF9019 1px solid;
    color:#FF9019;
    padding:0 5px;
}
#contact .info{
    padding-bottom: 5px;
    margin-bottom: 10px;
	border-bottom: 1px solid #DDDDDD;
}
#contact .info > div {
    margin:20px 30px;
}

#contact .info h1{
    color:#000;
    background:#F5F5F5 url("../images/title.png") repeat;
    margin-bottom:15px;
    padding-left:10px;
    border:#CBDB7F 1px solid;
}
#contact .info div p {
    padding-bottom:10px;
}
#contact .info ul li{
    list-style-image:url('../images/h2-square.gif');
    line-height: 1.3em;
	letter-spacing: 2px;
    margin:5px 0;
}

#contact .form {
    margin-bottom: 5px;
    padding:10px 0;
    overflow: hidden;
    border:#DDDDDD 1px solid;
}
#contact .form .options select{
    height:24px;
    font-size:1em;
    width:160px;
}
#contact .form p {
    font-size:105%;
}
#contact .customer > div {
  margin-bottom:20px;
}
#contact .customer input {
    height:20px;
    font-size:1em;
}

#contact .customer .title{
    padding:0 10px;
    clear:both;
    margin-bottom:20px;
}
#contact .error {
	color: #FF9019;
}
#contact .des {
    padding:0 20px;
}
#contact .des .title{
    padding-bottom:8px;
}
#contact textarea {
	 min-height:192px;
     margin-bottom:10px;
     width: 100%;
}
#contact .item {
	margin-top:10px;
}
#contact .title{
	font-weight: bold;
    padding:0;
    margin-bottom:10px;
    font-size:105%;
}

#contact .gray{
	color:#606060;
}
#contact .item span + span{
    cursor: pointer;
    font-size:90%;
    color:#666666;
}
#contact .error {
    font-size:90%;
}
#contact .captcha {
    font-size:110%;
    text-align:center;
    height:26px;
    margin-bottom:20px;
    width:100%;
    min-width:80px;
}
#contact img{
    width: auto;
    margin-left:20px;
    float:left;
}
#contact .button {
    height:30px;
    font-size:1em;
    float:right;
}
.warning{
    background-color:#FF9019;
    color:#FFF;
    margin-bottom:10px;
    text-align:center;
}
#go-top {
  position: fixed;
  overflow: hidden;
  top: 50%;
  right: 8%;
  cursor: pointer;
  background: url("../images/interface/go-top.png") right top no-repeat;
  height: 36px;
  width: 36px;
  z-index: 999;
  text-indent: -99999px;
  }
#go-top:hover {
  background-image: url("../images/interface/go-top-h.png");
  height: 41px;
  width: 41px;
}

a.button, input.button {
	cursor: pointer;
	background-color :#FF9019;
	color:#FFF;
	padding:5px 15px;
}
a.button {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}

a.button:hover, input.button:hover {
    background-color: #4C4C4C;
  transition-property: color, background-color;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 0s;
}

.buttons{
	width:100%;
	height:40px;
	position: relative;
	margin-top:60px;
}
.buttons .left {
	float: left;
	text-align: left;
}
.buttons .left > a.button {
	cursor: pointer;
	background-color :#FF9019;
	color:#FFF;
	padding:5px 15px;
	position:absolute;
	left:-10px;
}

.buttons .left > a.button:hover {
	background-color: #4C4C4C;
	border:#515151 1px solid;
	border-left: none;
}
.buttons .right {
	float: right;
	text-align: right;
}
.buttons .right > a.button {
	cursor: pointer;
	background-color :#FF9019;
	color:#FFF;
	padding:5px 15px;
	position:absolute;
	right:-10px;
}

.buttons .right > a.button:hover {
	background-color: #4C4C4C;
}

.buttons .center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.article-list  section{
	margin:15px 0;
	overflow:hidden;
    min-height:130px;
}
.article-list p {
 line-height: 1.5em;
 }
.article-list ol{
  font-size: 110%;
}
.article-list section img{
	float:left;
	margin-right:20px;
    border:#A3A3A3 1px solid;
    width:auto;
}
.icon-h2 {
	background: url('../images/h2-square.gif') center left no-repeat;
	padding-left: 20px;
}
.pagination {
	border-top: 1px solid #EEEEEE;
	padding-top: 8px;
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
}
.pagination .links {
	float: left;
}
.pagination .links a {
	display: inline-block;
	border: 1px solid #EEEEEE;
	padding: 4px 10px;
	text-decoration: none;
	color: #A3A3A3;
}
.pagination .links b {
	display: inline-block;
	border: 1px solid #269BC6;
	padding: 4px 10px;
	font-weight: normal;
	text-decoration: none;
	color: #269BC6;
	background: #FFFFFF;
}
.pagination .results {
	float: right;
	padding-top: 3px;
}
.share {
	height:32px;
    vertical-align:bottom;
}

.share > .addthis_default_style{
	float:right;
}
.share  > .addthis_default_style > span{
    float:left;
    padding-top:5px;
}
#blog_latest .content div img, #opencart_latest .content div img{
    margin-bottom:15px;
    background-color:#F9F9F9;
    padding:5px 0;
}
#blog_latest .content div, #opencart_latest .content div{
    text-align:center;
}
p img {
	vertical-align:middle;
}

img {
	border: none;
}
input {
	vertical-align: middle;
}
input, select, textarea{
    border:#CCC 1px solid;
}
input[type=text], textarea{
    padding-left: 5px;
    padding-right: 5px;
}
.view_all article header h1{
    background:#F5F5F5 url("../images/title.png") repeat;
    text-align: right;
    margin-bottom:15px;
    padding-right:20px;
    border:#CBDB7F 1px solid;
	-webkit-box-shadow: 0px 1px 2px #DDD;
	-moz-box-shadow: 0px 1px 2px #DDD;
	box-shadow: 0px 1px 2px #DDD;	
}
.view_all section > h1{
    padding:3px 10px;
	margin-bottom: 0px;
    display:inline-block;
    background-color:#4C4C4C;
}
.view_all section > h2{
	background: url('../images/h2-square.gif') center left no-repeat;
	padding-left: 20px;
}
.view_all h1 + div{
    margin: 5px 0 20px;
    border:#FF9019 1px solid;
    padding: 10px 10px 0;
    
}
.view_main h1, .article-list article h1{
	background:#B4CD3C url("../images/title.png") repeat;
	padding-left:10px;
	margin-bottom:20px;
	-webkit-box-shadow: 0px 1px 2px #CCC;
	-moz-box-shadow: 0px 1px 2px #CCC;
	box-shadow: 0px 1px 2px #CCC;	
}
.view_main h1.opencart, .article-list article h1.opencart{
	background-color:#BFDFFF;
}
.view_main h1.blog, .article-list article h1.blog{
	background-color:#E6F2A9;
}

.view_main .description{
    margin-bottom:30px;
    padding:10px 10px 0;
}
article {
	padding:10px 10px 20px;
	background:#F9F9F9;
  border:#D8D8D8 1px solid;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDD;
	-moz-box-shadow: 0px 2px 2px #DDD;
	box-shadow: 0px 2px 2px #DDD;	
}
article.opencart {
  background-image:url("../images/interface/bg-top-b.png"),url("../images/interface/bg-right-b.png"), url("../images/interface/bg-bottom-b.png"),url("../images/interface/bg-left-b.png");
  background-repeat:repeat-x, repeat-y, repeat-x, repeat-y;
	background-position:top center, top right, bottom center, top left;
}
article.blog {
  background-image:url("../images/interface/bg-top-g.png"),url("../images/interface/bg-right-g.png"), url("../images/interface/bg-bottom-g.png"),url("../images/interface/bg-left-g.png");
  background-repeat:repeat-x, repeat-y, repeat-x, repeat-y;
	background-position:top center, top right, bottom center, top left;
}


article a:link , p a:link, article a:visited, p a:visited  {
	color:#FF9019;
}
article h2 {
	background: url('../images/h2-square.gif') center left no-repeat;
	padding-left: 20px;
}
.article-list article h2 {
	background: none;
}

article > ul {
	list-style: disc;
	list-style: url('../images/h2-circle.png') none outside;
	font-size:110%;
	margin-bottom:25px;
	color:#515151;
}
article > ol {
	list-style: decimal outside;
	font-size:110%;
	margin:5px 10px 25px 40px;
	color:#515151;
}
article .image, article .image-additional{
	text-align:center;
}
article > ol > li{
	color:#DB7A13;
}
section .list-style1 li{
	list-style: url("../images/square.gif") ;
}
section .list-style2 li{
	list-style: url("../images/square2.gif") ;
}

article > div > ul li, article > section > div > ul li {
 list-style: url("../images/circle.png") none outside; 
}
article > div > ul , article > section > div > ul, article > div > ol, article > section > div > ol {
    margin-left:30px;
}

.answer ol li{
    margin-left:30px;
    margin-bottom:5px;
}
.latest ul li {
    margin:0 3px 6px 5px;
    line-height:1.4em;
    border-bottom:#D8D8D8 1px solid;
    padding-bottom:4px;
}
.latest ul span{
    background-color:#FFF;
    border:#CCC 1px solid;
    padding:0 4px;
    margin-right:5px;
    font-size:0.9em;
    float:left;
    line-height:1.6em;
}

.placeholder {
    color:#CCC;
}
#contact ::-moz-placeholder {
    color:#CCC;
    opacity: 1;
}
#contact ::-webkit-input-placeholder {
    color:#CCC;
}
#sitemap-info {
	font-family: "微軟正黑體", "Microsoft JhengHei", "Trebuchet MS",Trebuchet,Calibri,Tahoma,Arial,sans-serif;
}
#sitemap-info > h1 + section {
    overflow:visible;
    margin-top:30px;
}
#sitemap-info > h1 + section span {
    background-color:#B4CD3C;
    border:#A0A0A0 1px solid;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	-khtml-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
    padding:14px 7px;
}
#sitemap-info > h1 + section span:hover {
    background-color:#FFF;
    border-color:#B4CD3C;
}

#sitemap-info img{
    width:100%;
    border:none;
    margin:0;
}
#sitemap-info section {
    min-height: 0;
    text-align: center;
    margin:0;
    position:relative;
}
#sitemap-info section a{
    color:#000;
}

#sitemap-info section h2 {
    background-color:#B4CD3C;
    border:#A0A0A0 1px solid;
    color:#000;
    padding:0;
    margin: 15px 0 10px;
}
#sitemap-info section h2:hover {
    background-color:#FFF;
    border-color:#B4CD3C;
}
#sitemap-info section > ul {
    margin:0;
    border:#A0A0A0 1px solid;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;	
}
#sitemap-info section > ul > li {
    background-color:#CCC;
    border:#A0A0A0 1px solid;
    margin:10px;
    padding:5px 0;
    text-align:center;
}
#sitemap-info section > ul > li  ul{
    margin:0;
    border-top:#A0A0A0 1px solid;
}
#sitemap-info section > ul > li  ul >li{
    background-color:#E5E5E5;
    margin:0px;
    padding:5px 0;
    text-align:center;
}
#social-share {
    height:35px;
    background-color:#E5E5E5 ;
    border-left:#4C4C4C 5px solid;
    margin:0;
    padding:0;
}
#social-share a {
  float: right;
  margin:0 auto;
  background: url('../images/interface/social-share.png') left top no-repeat;
  width: 70px;
  height: 35px;
}
#social-share .social-fb a {
  background-position: 0 0;
}
#social-share .social-fb a:hover,
#social-share .social-fb a:focus {
  background-position: 0 -35px;
}
#social-share .social-gp a {
  background-position: -70px 0;
}
#social-share .social-gp a:hover,
#social-share .social-gp a:focus {
  background-position: -70px -35px;
}
#social-share .social-tw a {
  background-position: -140px 0;
}
#social-share .social-tw a:hover,
#social-share .social-tw a:focus {
  background-position: -140px -35px;
}
#social-share .social-li a {
  background-position: -210px 0;
}
#social-share .social-li a:hover,
#social-share .social-li a:focus {
  background-position: -210px -35px;
}
#article-prev-next {
    border-top:#ccc 1px solid;
    margin-top:10px;
    padding-top:20px;
}
#article-prev-next .prev, .next {
    line-height:1.2em;
    letter-spacing: 1px;
    min-height:50px;
}

#article-prev-next .prev {
    background: url('../images/interface/prev.gif') top left no-repeat;
    padding: 20px 0 10px 35px;
    text-align:left;
}
#article-prev-next .next {
    background: url('../images/interface/next.gif') top right no-repeat;
    padding: 20px 35px 10px 0;
    text-align:right;
}