/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"Arial", "微軟正黑體", sans-serif; font-size:14px; color:#5c5c5c; line-height:22px; letter-spacing:1px; }
img {	border:0; }

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

a { text-decoration:none; color:#5c5c5c;
-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:#5c5c5c; 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:1000px; 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;}

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



#content { }
.banner { line-height:0; background:url(../images/demo-ban-bg.jpg) no-repeat top center; height:152px; }
#main { padding:15px 15px;}
#main p { margin: 0 0 25px 0;}

.path { margin-bottom:20px;}
.path a { display:inline-block; margin:0 3px 5px 0; text-align:center; height:25px; padding:1px 10px 0 10px; color:#a1a1a1; background:#ebebeb; font-size:13px;}
.path a:hover, .path a.current { background:#d04a02; color:#fff;}

h1 { padding:12px 10px; font-family:"微軟正黑體"; font-size:32px; color:#010101; font-weight:normal; text-transform:uppercase; line-height:130%; border-top:1px solid #3f3f3f; border-bottom:1px solid #3f3f3f; margin-bottom:22px; text-align:center;}
h2 { font-weight:normal; letter-spacing:1px; font-size:14px; color:#5c5c5c; padding:0 0 20px 0;}

.pro-list1 { padding-bottom:60px; clear:both;}
.pro-list1-pto { display:inline-block; vertical-align:top; width:45%; text-align:center;}
.pro-list1-pto2 { float:right;}
.pro-list1-data { display:inline-block; vertical-align:top; width:calc(55% - 6px); padding:10px 40px 0 40px; text-align:left;}
.pro-list1-data b { display:block; font-size:30px; font-family:"微軟正黑體"; color:#000000; padding-bottom:30px; line-height:130%; text-align:center; font-weight:normal;}
.pro-list1-data a { display:block; margin-top:60px; height:55px; text-align:center; border:2px solid #000000; text-transform:uppercase; font-family:Abel; font-size:18px; color:#fff; line-height:52px; background: rgb(63, 63, 63);}
.pro-list1-data a:hover { background:#d04a02; color:#fff; border-color:#d04a02;}

aside ul { display:table; width:100%; margin-bottom:15px; border-spacing:2px;}
aside li { display:table-cell; min-height:68px; text-align:center; padding:10px 5px 28px 5px; border:3px solid #000000; font-family:Abel; font-size:16px; text-transform:uppercase; position:relative; }
aside li a { display:block; color:#000000; height:100%; font-family:"微軟正黑體";}
aside li:after { position:absolute; content:"\f107"; bottom:6px; left:50%; margin-left:-6px; font-size:18px; font-family:'FontAwesome'}
aside li:hover, aside li.current { color:#fff; background:#dd2419; border-color:#dd2419;}
aside li:hover a, aside li.current a { color:#fff;}

.pro-select { padding-bottom:28px;}

.side_classLink { display:none;}
.m_classLink{ display:block; position:relative; border-bottom:1px solid #D6D6D6;}
.m_classLink a.main{ display:block; font-size:18px; position:relative; padding: 8px 10px 6px 10px; color:#fff; text-align:left; cursor:pointer; font-family:Abel; font-weight:normal; letter-spacing:1px;
background:#dd2419; }
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:50%; margin-top:-11px; color:#fff; font-style:normal; font-family:FontAwesome;}
.m_classLink ul{ display:none; width:100%;  position:absolute; z-index:999; margin-top:1px; background:#dd2419; }
.m_classLink ul li { border-bottom: 1px solid #e6e6e6; display:block; margin:0 0; padding:0 ;}
.m_classLink ul li > a { display:block; position:relative; font-size:16px; color:#fff; padding:8px 25px 10px 16px; }
.m_classLink ul li > a:hover, .m_classLink ul li > a.current { color:#fff; background:#000}
.m_classLink ul li.current02{ display:none; }


.list { margin-bottom:25px;}
.list li { display:inline-block; vertical-align:top; width:calc(33.333% - 6px); padding:0 3px 8px 3px;}
.list li a { display:table; width:100%;}
.list-pto { display:table-cell; width:50%; line-height:0;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.list-pto img { width:100%;}
.list-data { display:table-cell; width:50%; vertical-align:middle; color:#fff; background:#3f3f3f; padding:5px; text-align:center; font-family:"微軟正黑體"; font-size:15px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.list li a:hover .list-pto { opacity:0.6;  filter: alpha(opacity=60); }
.list li a:hover .list-data { background:#d04a02;}

.pro-box { position:relative; padding:25px 0 0 0px; width:100%; margin:0 auto;}
.pro-b { display:inline-block; vertical-align:middle; width:calc(40% - 6px); }
.pro-b img { width:100%;}
.pro-s { text-align:center; padding:0px 0;}
.rslides_tabs { text-align:left;}
.rslides_tabs li { display:inline-block; width:65px; margin:1px; opacity:0.35;  filter: alpha(opacity=35);}
.rslides_tabs li a img { width:100%;}
.rslides_here { opacity:1 !important;  filter: alpha(opacity=100) !important;}

.pro-content { display:inline-block; vertical-align:top; width:60%; text-align:left; padding:0 28px; position:relative; }
.download { font-family:Abel; padding-bottom:25px; font-size:18px; text-transform:uppercase; color:#000;}
.download img { vertical-align:middle;}

.btn-box { text-align:center; margin:0px 0 25px 0; border-top:1px solid #d9d9d9; padding-top:15px;}
.btn-box a { display:inline-block; margin:0 1px 3px 1px; width:calc(25% - 3px - 6px); height:44px; text-align:center; line-height:44px; text-transform:uppercase; font-size:15px; color:#fff; font-family:"微軟正黑體"; background:#3f3f3f;}
.btn-box a:hover { color:#fff; background:#d04a02;}
#aboutus-video iframe	{width:100%;}
.name {
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
}
.distributor_agent {
	display: inline-block;
	vertical-align: middle;
	max-width: 430px;
	font-size: .88rem;
}
.distributor_agent strong{
	font-size: 1rem;
}
.distributor_map {
	display: inline-block;
	vertical-align: middle;
	padding-left: 50px;
}
.distributor_map img{
	width: 420px;
}

/*download*/
.down_list{
	overflow:hidden;
	padding:10px 0;
	border-bottom:1px solid #c8c8c8;
}
.down_pic{
	float:left;
	padding:10px;
	border-right:1px solid #c8c8c8;
}
.down_title{
	overflow:hidden;
	padding:10px 0 5px 20px;
	font-size: 17px;
}
.down_title a{
	color:#24a7da;
	font-family:Verdana, "?????";
	font-size: 13px;
}

@media only screen and (max-width: 999px) {
.banner { margin-top:10px;}
#aboutus-video iframe	{height:500px;}
}

@media only screen and (max-width: 768px) {
.list li { width:calc(50% - 6px); }
.pro-select { padding-bottom:10px;}
.distributor_map { padding-left: 0;}
}
@media only screen and (max-width: 640px) {
.pro-b { width:100%;}
.pro-content { width:100%; padding:20px 0 0 0;}
}
@media only screen and (max-width: 570px) {
.pro-list1 { padding-bottom:30px;}
.pro-list1-pto { width:100%;}
.pro-list1-data { width:100%; padding:0 0 20px 0;}
.pro-list1-data a { margin-top:25px;}
}

@media only screen and (max-width: 414px) {
.list li { width:100%; }
}

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

}

#slider3-pager li a img{
	float:left;
}