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

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

a { text-decoration:none; color:#6d6d6d;
-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:#6d6d6d; 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;position:relative;}
.item { height:340px;}
.item > div { height:100%;}
.owl-theme .owl-controls { position:absolute; width:100%; z-index:100; bottom:0px;}
#owl-demo .owl-buttons, #owl-demo2 .owl-buttons { display:none !important;}
#owl-demo2 .owl-controls { bottom:-50px}
.main-slgon { color:#ffffff; font-size:42px; line-height:120%; text-shadow: 2px 2px 8px #000; max-width:300px; text-transform:uppercase;}
.slogon-right { right:5%; top:calc(50% - 46px); position:absolute; text-align:left; padding-left:10px;}

h1 { padding:25px 22px 8px 22px; text-transform:uppercase; font-weight:normal; font-size:24px; color:#000000; border-bottom:1px solid #cccccc;}
.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; }


@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);}
.hot li:last-child { display:none;}
}
@media only screen and (max-width: 570px) {

}

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

}

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