/* 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:#717171; line-height:22px; }
img {	border:0; }

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

a { text-decoration:none; color:#717171;
-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:#717171; 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;}

.content-bg { background:url(../images/wall.jpg) no-repeat bottom center;}
.banner { padding-bottom:85px;}
.centered-btns_tabs, .transparent-btns_tabs, .large-btns_tabs { margin: -22px auto !important;}

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

#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);}



.master { background:url(../images/master-bg.jpg) repeat-y top center; padding-top:20px;}
.left-box { float:left; width:290px;}
.title01 { background:url(../images/submenu-title-bg.png) no-repeat; height:91px; font-size:30px; font-weight:bold; color:#fff;font-family: Verdana,huakang; text-align:center; padding-top:45px;}
.sub-pto { text-align:center;background:url(../images/submenu-bg.png) repeat-y;}
.pro-search { padding:20px 45px 0 30px;background:url(../images/submenu-bg.png) repeat-y;}
.pro-search div { float:left; width:calc(100% - 30px);}
.search-txt { height:30px; background:#fff; line-height:30px; padding:0 3px; width:100%; border-width:0; font-size:13px;}
.pro-search a { width:30px; height:30px; color:#fff; line-height:30px; text-align:center; background:#4F4F4F; display:block; float:left;}
.submenu_bottom {}
.side_classLink { background:url(../images/submenu-bg.png) repeat-y;}
.side_classLink ul { width:100%; padding-left:40px;}
.side_classLink ul li{ }
.side_classLink ul li > a { display:block; color:#7E7E7E; font-size:15px;font-family: Verdana,"微軟正黑體"; padding: 20px 0px 0px 30px; font-weight:bold; background-position:0px 20px;}
.side_classLink ul li > a:hover, .side_classLink ul li > a.current { color:#fff; background:url(../images/icon02.jpg) no-repeat 0px 20px;}
.side_classLink ul li span { display:block; width:160px; text-align:left; padding:7px 0 7px 25px; }
.side_classLink ul li span a { font-family: Verdana,"微軟正黑體"; font-size:13px; color:#FFE330; padding-left:30px;}
.side_classLink ul li span a:hover, .side_classLink ul li span a.current { color:#FFF1A7; background:url(../images/icon02.jpg) no-repeat 0px 0px; padding-left:30px;}
.side_classLink ul li font { display:block; width:160px; text-align:left; padding:5px 0 5px 38px; }
.side_classLink ul li font a { font-family: Verdana,"微軟正黑體"; font-size:13px; color:#f06175; padding-left:30px;}
.side_classLink ul li font a:hover, .side_classLink ul li font a.current { color:#ffd5d7; background:url(../images/icon02.jpg) no-repeat 0px 0px; padding-left:30px;}
.side_classLink ul li.current02{ display:none; }
.m_classLink{ display:none;}
.submenu_infor { background:url(../images/submenu-infor-bg.png) no-repeat; width:286px; height:266px;font-family: Verdana,huakang; padding:80px 20px 0 30px; color:#F5E6C7; font-size:15px; line-height:22px; position:relative; top:-45px;}
.submenu_infor a { color:#F5E6C7;}
.submenu_infor a:hover { color:#F5E6C7; text-decoration:underline;}
.submenu_infor b { font-size:20px; display:block;margin-top: 35px;}

.right-box { float:left; width:calc(100% - 290px); margin-top:-30px; line-height:1.7em;}
.right-top { background:url(../images/right-head.png) no-repeat top; min-height:175px; background-size:cover; padding-top:40px;background-size:100% 100%;}
h2 { background:url(../images/h2-bg.jpg) no-repeat center bottom; text-align:center; display:block; font-size:30px;font-family: Verdana,huakang; color:#4F4F4F; padding-bottom:20px;}
h1 { color:#3C3C3C; font-size:20px; padding:15px 40px 0 40px;font-family: Verdana,huakang;}
.path { padding:10px 40px 0 40px; color:#999; font-size:12px;}
.path a { color:#999;}
.path a:hover { color:#776149;}
.right-content { background:url(../images/content-bg.jpg) repeat-y; background-size:99% auto; padding:0px 40px 0 40px; margin-left:6px; min-height: 700px;}
h3 { color:#3C3C3C; font-size:15.5px; line-height:22px; font-weight:normal;font-family: Verdana,huakang; padding-bottom:20px;}

.pro-list01 li { padding:0 15px 20px 15px; display:inline-block; }
.pro-list01 li a:hover .pto{ border: 5px solid #000;}
.pro-list01 li a:hover span{ color:##776149;}
.pto { border: 5px solid #81654E; background: #FFF none repeat scroll 0% 0%; text-align:center; width:170px; height:170px;
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);}
.pto img { width:100%;}
.pro-list01 li span { display:block; text-align:center; font-family: Verdana,"微軟正黑體"; color:#312B21; font-size:14px; padding-top:5px; white-space:nowrap; text-overflow : ellipsis; width:170px; overflow:hidden;}


.fix{ text-align: center;}
.fix:before{ display: inline-block; width: 0px; height: 100%; vertical-align: middle; content: ' ';}
.fix img,.fix p{ display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; box-sizing: border-box;}

.pro-b-box { position:relative; padding:20px 30px; text-align:center;}
.pro-b-box div { border: 5px solid #312B21; background:#fff;}
.pro-b-box div a{display: none;}
.pro-b-box div a:first-child{display: block; line-height:0;}

.pro-b-box div:hover { border: 5px solid #69371E;}
.pro-b-box img { max-width:100%;}
.prev-btn, .next-btn { position:absolute; top:45%; z-index:10; display:block; font-size:40px; height:40px; overflow:hidden;}
.prev-btn i, .next-btn i { position:relative; top:0; color:#000;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.prev-btn span, .next-btn span { display:block; font-size:16px; position:relative; top:0; color:#7e4828; text-transform:uppercase;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.prev-btn:hover i, .next-btn:hover i { top:-40px;}
.prev-btn:hover span, .next-btn:hover span { top:-40px;}
.prev-btn { left:-20px;}
.next-btn { right:-20px;}

.products_show_title { background:url(../images/icon03.jpg) no-repeat 0px 20px; font-size:22px; color:#B2A18F; font-family: Verdana,huakang; font-weight:bold; padding:15px 0 20px 30px}
.products_show_introduction { background:url(../images/h2-bg.jpg) no-repeat left bottom; color:#383838; font-size:15px; font-family: Verdana,"微軟正黑體"; padding-bottom:20px; line-height:22px;}

.btn-box { padding-top:10px; padding-bottom:35px;}
.btn-box a { display:inline-block; min-width:130px; height:30px; margin:0 1px 3px 0; background:url(../images/btnbg.jpg) no-repeat; background-size:cover; font-size:14px; line-height:30px; text-align:center; font-family: Verdana,"微軟正黑體"; color:#FFF;}
.btn-box a:hover { color:#ffe330;}

.map-box { text-align:center; padding:10px;position:relative; }
.map-box img { display:inline-block; max-width:100%;}
.map-0 { position:absolute; border:0px solid red; display:block;}
.map-0:hover, .map-0.current { background:rgba(255,255,255,.3);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);}
.map-1 { width:34px; height:23px; top:7.8%; right:14%;}
.map-2 { width:37px; height:23px; top:7.5%; right:20%;}
.map-3 { width:41px; height:23px; top:13.7%; right:19.5%;}
.map-4 { width:34px; height:23px; top:9.5%; right:29.8%;}
.map-5 { width:34px; height:23px; top:16.3%; right:32%;}
.map-6 { width:34px; height:23px; top:22%; right:36%;}
.map-7 { width:34px; height:23px; top:27.6%; right:40%;}
.map-8 { width:30px; height:23px; top:33%; right:54%;}
.map-9 { width:30px; height:23px; top:38%; right:40%;}
.map-10 { width:34px; height:23px; top:39.7%; right:59%;}
.map-11 { width:34px; height:23px; top:47.8%; right:50.8%;}
.map-12 { width:32px; height:23px; top:54.6%; right:61%;}
.map-13 { width:34px; height:23px; top:58.8%; right:50%;}
.map-14 { width:34px; height:23px; top:72.6%; right:53.3%;}
.map-15 { width:35px; height:23px; top:62.5%; right:38%;}
.map-16 { width:30px; height:23px; top:38.3%; right:25%;}
.map-17 { width:34px; height:23px; top:21.4%; right:17.4%;}
.map-18 { width:34px; height:23px; top:36.8%; right:79.8%;}

.map-box-rwd { display:none;}
.map-box-rwd li { float:left; width:33.3333%; padding:0 5px 5px 10px;}
.map-box-rwd li a { display:block; height:35px; line-height:28px; text-align:center; border: 3px solid #81654E; font-size:15px; background:#fff; color:#312B21;}
.map-box-rwd li a:hover { border: 3px solid #000}

.store_title { background:url(../images/icon003.gif) no-repeat 0px 2px; color:#F06276; font-size:20px; font-weight:bold; margin-bottom:10px; padding-left:13px;font-family: Verdana,"微軟正黑體";}
.store-data { font-size:14px; color:#717171;font-family: Verdana,"微軟正黑體"; padding-bottom:30px;}


@media only screen and (max-width: 960px) {
.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;}
.master { padding-top:0;}
.banner { padding-bottom:55px;}
.centered-btns_tabs, .transparent-btns_tabs, .large-btns_tabs { margin: 13px auto !important;}

.left-box { float:none; width:100%;}
.title01, .sub-pto, .submenu_bottom, .submenu_infor { display:none;}
.side_classLink { display:none;}
.title01, .left-box-top { display:none;}
.m_classLink{ display:block; position:relative; top:-15px;}
.m_classLink a.main{ background:#191202; display:block; font-size:18px; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; position:relative; padding:8px 10px 8px 10px; color:#fff; text-align:left; cursor:pointer;}
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:10px; top:50%; margin-top:-8px; color:#fff; font-style:normal; font-family:FontAwesome;}
.m_classLink ul{ display:none; width:100%;  position:absolute; z-index:999; margin-top:0px; background:#191202; border-top:1px solid rgba(255,255,255,.15);}
.m_classLink ul li { border-bottom:1px solid rgba(255,255,255,.15); display:block; margin:4px 0 0 0; padding:0 10px;}
.m_classLink ul li > a { display:block; color:#7E7E7E; font-size:18px;font-family: Verdana,"微軟正黑體"; padding: 10px 0px 10px 30px; font-weight:bold; background-position:0px 10px;}
.m_classLink ul li > a:hover, .m_classLink ul li > a.current { color:#fff; background:url(../images/icon02.jpg) no-repeat 0px 10px;}
.m_classLink ul li span { display:block; width:160px; text-align:left; padding:7px 0 7px 25px; }
.m_classLink ul li span a { font-family: Verdana,"微軟正黑體"; font-size:15px; color:#FFE330; padding-left:30px;}
.m_classLink ul li span a:hover, .m_classLink ul li span a.current  { color:#FFF1A7; background:url(../images/icon02.jpg) no-repeat 0px 0px; padding-left:30px;}
.m_classLink ul li font { display:block; width:160px; text-align:left; padding:5px 0 5px 38px; }
.m_classLink ul li font a { font-family: Verdana,"微軟正黑體"; font-size:15px; color:#f06175; padding-left:30px;}
.m_classLink ul li font a:hover, .m_classLink ul li font a.current  { color:#ffd5d7; background:url(../images/icon02.jpg) no-repeat 0px 0px; padding-left:30px;}
.m_classLink ul li.current02{ display:none; }

.pro-search { padding:15px 0px 10px 0px; background:#191202; position:relative; top:-10px;}

.right-box { float:none; width:100%; margin-top:0;}

.right-content img{
	max-width: 100%;
	height: auto;
}
}

@media only screen and (max-width: 640px) {
.pro-list01 { text-align:center;}
}

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


.banner { position:relative; top:-46px; padding-bottom:10px;}
.map-box { display:none;}
.map-box-rwd { display:block;}
}

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


h2 { padding-top:15px;}
.map-box-rwd li { width:50%;}
}

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


.btn-box { text-align:center;}
.btn-box a { display:block;}
}