/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);
@font-face {
	font-family: huakang;
	src: url(../images/huakang.woff) format("woff");
}

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:Arial,huakang; font-size:15px; color:#fff; line-height:22px; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; color:#fff;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover {	color:#fff; text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { max-width:1002px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

.top { background:url(../images/idx-top-bg.jpg) no-repeat top center; height:187px;}
.logo { padding-top:22px; position:absolute; z-index:99999; display:inline-block;}
.logo img { }
.top-info { position:absolute; top:16px; left:43.5%; background:url(../images/top-title.png) no-repeat top left; font-size:22px;padding: 16px 40px 0px 80px; line-height:30px; height:65px; font-weight:bold;}

#gotop { display: none; position: fixed; right:25px; bottom:25px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; border-radius:100%; padding-top:6px; color:#fff; opacity:0.5;  filter: alpha(opacity=50); background:#000;}
#gotop a:hover { color:#fff; opacity:1;  filter: alpha(opacity=80);}

.content-bg { background:url(../images/idx-wall.jpg) no-repeat top center;}
.banner { float:right; width:calc(100% - 271px); padding-left:27px; position:relative; top:-24px;}
.centered-btns_tabs, .transparent-btns_tabs, .large-btns_tabs { margin: -22px auto !important;}

.qrcode-box { float:left; background:url(../images/idx-tag-bg.png) no-repeat; width:271px; height:296px; padding:12px 25px;}
.qrcode { padding-bottom:10px;}
.qrcode li { width:50%; /*float:left;*/ padding:0 3px; text-align:center; font-size:16px;margin:0 auto;}
.qrcode li span { height:40px; display:block; font-weight:bold;line-height: 1.2;}
.qrcode li img { width:100%;}
.favorite-link li { width:33.3333%; float:left; padding:0 5px;}
.favorite-link li img { width:100%;}

.pro-list-bg { background:url(../images/idx-wall-bottom.jpg) no-repeat center bottom;}

.customNavigation { position:absolute; width:100%; left:0; top:40%; z-index:999; display:none; font-size:30px;}
.slide { width:89%; margin:0 auto;}
.prev { color:rgba(255,255,255,.4); position:absolute; left:6px; top:45%;}
.next { color:rgba(255,255,255,.4); position:absolute; right:6px; top:45%;}
.prev:hover, .next:hover { color:rgba(255,255,255,1);}
.owl-controls { display:none !important;}
.owl-item { text-align:center; padding:0 2px;}
.item { display:inline-block; border-spacing:0; background:url(../images/idx-product-bg.png) no-repeat top center; min-width:165px; height:231px; padding-top:22px; text-align:center; }
.item span { display:block; font-size:24px; font-weight:bold; color:#fff; text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;}
.item img { max-width:100%;}

.index-bottom { background:url(../images/idx-floor.jpg) no-repeat top center; padding-top:20px;}
.index-main li { float:left; width:33.3333%; background:url(../images/idx-frame-bg.jpg) no-repeat top center;  position:relative; padding: 52px 36px 50px 52px; height:333px; }
.title01 { background: transparent url("../images/icon01.png") no-repeat scroll left top; font-family: Arial,huakang; font-size: 26px; color: #D8BD3E; padding: 0px 0px 15px 30px; margin-bottom:10px;}
.more { position: absolute; right: 25px; bottom: 5px; display:inline-block; color:#FFE226; font-size:14px;}
.news_list{ float:left; width:100%; background:url(../images/idx-news-line.jpg) no-repeat left bottom; padding:0 0 8px 0;}
.news_date{ float:left; width:75px; padding:0 5px; font-family:Arial, huakang; font-size:12px; color:#ffee89;}
.news_title{ float:left; width:calc(100% - 75px); padding:0 11px 0 0; white-space:nowrap; text-overflow : ellipsis; overflow:hidden;}
.news_title a{ font-family:Arial, huakang; font-size:15px; color:#fff;}

.pro-list-bg2 { background:url(../images/idx-bottom-bg.png) no-repeat center bottom; padding-top:25px;}
.pro-list2 { background:url(../images/slide-pic-bg.png) no-repeat top center; width:167px; height:177px;}
.pro-list2 span { font-size:12px; color:#472B1D; font-family: Verdana,"微軟正黑體"; font-weight:bold; letter-spacing:-1px; display:block; text-shadow:none; margin-top:-10px;}

@media only screen and (max-width: 960px) {
.content-bg  { background-size:cover;}
.logo img { width:250px;}
.top-info { left:35%;}

.customNavigation { display:block;}
}

@media only screen and (max-width: 768px) {
.top-info { right:10px; left:auto; padding-right:0px; top:0;}
.logo { padding-top:55px;}
.index-bottom { background-size:cover;}


.banner { float:none; width:100%; padding:0; }
.qrcode-box { float:none; margin:0px auto 35px auto;}
.index-main li { float:none; width:320px; margin:0 auto; background-size:cover;}
}

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

}

@media only screen and (max-width: 414px) {
.logo { padding-top:75px;}
.logo img { width:200px;}

}

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


.centered-btns_tabs, .transparent-btns_tabs, .large-btns_tabs { margin: -15px auto !important;}
}