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

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

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

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


.banner { margin-top:16px; background:url(../images/demo-banner.jpg) no-repeat top right; background-size:cover; min-height:156px;}

h1 { padding:60px 10px 60px 50px; text-transform:uppercase; font-weight:normal; font-size:44px; color:#fff; line-height:120%;}
.path { background:#ffc923; min-height:32px; padding:10px 15px; color:#444444; font-size:15px; letter-spacing:0.5px;}
.path a { color:#444;}
.path a:hover { color:#d23309;}

aside { display:table; width:100%;}
.submenu-title { display:table-cell; width:206px; background:#000000; text-align:center; padding-top:13px; text-transform:uppercase; font-size:22px; color:#fff;}
.submenu { display:table-cell; padding:10px 15px; background:#d23309;}
.submenu a { display:inline-block; padding-right:25px; font-size:18px; letter-spacing:0.5px; color:#fff; margin-bottom:5px;}
.submenu a i { display:inline-block; padding-right:7px;}
.submenu a:hover, .submenu a.current { color:#eaff00;}

.hot { padding-top:15px;}
.hot li { display:inline-block; vertical-align:top; padding:0 24px 20px 24px; text-align:center; width:calc(20% - 5px);}
.hot li:hover img { -webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.hot-pto { overflow:hidden;}
.hot-pto img { width:100%;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.hot-name { padding-top:10px; white-space:nowrap; text-overflow : ellipsis; overflow:hidden;}

.hot-pto div { position:relative;}
.hot-pto div:before {border-color: #d23309; color:#d23309; top: 0px; left: 0px; right: 100%; bottom: 100%; border-top: 8px solid; border-left: 8px solid;}
.hot-pto div:after {border-color: #d23309; color:#d23309; left: 100%; top: 100%; bottom: 0px; right: 0px; border-bottom: 8px solid; border-right: 8px solid;}
.hot-pto div:before,
.hot-pto div:after { content: ""; opacity: 0; pointer-events: none; z-index: 3; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.hot li:hover div:before { opacity: 1; bottom: 0px; right: 0px; }
.hot li:hover div:after { opacity: 1; top: 0px; left: 0px; }

.page { text-align:center; padding:20px 0;}
.page a { display:inline-block; margin:0 3px 5px 3px; border:1px solid #58595b; width:30px; height:30px; text-align:center; color:#58595b; line-height:28px;}
.page a:hover, .page a.current { color:#fff; background:#d23309; border:1px solid #d23309;}

#main { padding:25px 12px;}
.pro-b { display:inline-block; width:247px; vertical-align:top;}
.rslides_tabs { text-align:center;}
.rslides_tabs li { display:inline-block; width:60px; border:1px solid #e3e3e3; line-height:0;}

.pro-b-table-box { display:inline-block !important; vertical-align:top; width:calc(100% - 247px - 5px); padding-left:10px;}
.pro-b-table-box table { margin-bottom:8px; background:#bfbfbf;}
.pro-b-table-box table th { text-align:center; background:#e9e9e9; font-size:15px; padding:7px; color:#303030;}
.pro-b-table-box table td { text-align:center; background:#ffffff; font-size:15px; padding:7px; color:#303030;}
.pro-b-table-box table td i { font-size:12px;}

.pro-b-table-box2 { width:100%;}
.pro-b-table-box2 table { width:100%; margin-bottom:10px;}
.pro-b-table-box2 img { width:inherit; max-width:inherit;}
.bgcolor-blue { background:#00a0e9 !important;}
.bgcolor-yellow { background:#fff100 !important;}
.bgcolor-red { background:#d0121b !important;}
.bgcolor-green { background:#339b60 !important;}
.bgcolor-pink { background:#cd7254 !important;}
.bgcolor-gray { background:#818d93 !important;}
.bgcolor-gray2 { background:#e6e6e6 !important;}
.arrow-red { color:#d0121b; font-size:34px !important;}
.spec-note { padding-bottom:15px; text-align:right; padding-right:0px; font-size:15px;}
.spec-note span { display:inline-block; vertical-align:top; padding-right:10px;}
.spec-note i { font-size:12px; display:inline-block; padding-right:4px;}

.btn-box { text-align:center; padding-bottom:25px;}
.btn-box a { margin:0 2px 5px 2px; display:inline-block; min-width:118px; height:36px; text-align:center; text-transform:uppercase; font-size:15px; border-left:1px solid #d7d7d7; border-top:1px solid #d7d7d7; border-right:1px solid #d7d7d7; border-bottom:2px solid #d23309; padding-top:6px;}
.btn-box a:hover { background:#d23309; color:#fff; border-color:#d23309;}

/*about*/
.about {
    position: relative;
}
.about img {
    position: absolute;
        bottom: 0;
    left: 0;
    z-index: -1;
}
.about .right {
    padding: 35px 40px 40px 280px;
    min-height: 400px;
}
.about p {
    padding: 5px 0;
}
.about .title {
    position: relative;
    padding-top: 10px;
    color: #ff7403;
    font-weight: bold;
    font-size: 18px;
    line-height: 48px;
}
.about .title::before, .about .title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ff7403;
    content: "";
}
.about .title::before {
    margin-left: 6px;
    width: 50px;
    height: 7px;
}
.about .title::after {
    width: 100%;
    height: 1px;
}
@media only screen and (max-width: 960px) {
}

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

}
@media only screen and (max-width: 640px) {
.hot li { width:calc(50% - 5px);}
}
@media only screen and (max-width: 570px) {
aside, .submenu, .submenu-title { display:block;}
.submenu-title { width:100%; text-align:left; padding:10px 15px;}
.pro-b { width:100%;}
.pro-b-table-box { width:100%; padding-left:0;}
.btn-box a { width:calc(50% - 4px - 5px);}
}

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

}

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