@CHARSET 	"utf-8";
@IMPORT 	"reset.css";

/* Global */
body {font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; background:#F8F8F8 url('../images/bg.jpg'); font-size: 12px; margin:0 auto;}
a:link, a:visited {text-decoration:none;}
.page {border-top:10px solid #e60012;}
a:hover {text-decoration:none;}
header {max-width:1280px;margin:0 auto;}
footer {max-width:1280px;margin:0 auto;}
#overlay {height:100%; width:100%; z-index:11; left:0; top:0; position:fixed;}
#overlay.before {visibility:hidden;}
#overlay.after {background:rgba(0,0,0,.5); visibility:visible;}
.transition_in_out {transition: all 300ms ease-in-out; webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out;}

/* Common */
.left {float:left;}
.right {float:right;}
.fix {clear:both; width:100%;}
.fix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

/* Logo */
.logo {padding:20px 0 29px 45px; max-width:320px;}
.logo img {max-width:310px;width:100%;}

/* TopNav */
.nav {display:inline-block;vertical-align:top;float:right;}
.topnav {list-style:none;z-index:2;padding-top:35px;padding-right:45px;}
.topnav li {border:3px solid transparent; display:inline-block; list-style:none; font-size:16px; font-weight:bold; transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;}
.topnav li:hover {border:3px solid #cb171d;}
.topnav li.icons a {padding:20px 15px 20px 45px; background-position: 8px 15px; background-size:24px 24px; background-repeat:no-repeat;}
.topnav li a {display:block; vertical-align:middle; height:100%; color:#000; padding:10px 45px;}
.topnav li:hover > ul {display:block;}
.topnav ul {display:none; position:absolute;background:#fff;}
.topnav ul li {display:block;}
.topnav ul li.icons a {padding:10px 15px 10px 45px; background-position: 8px 5px; background-size:24px 24px; background-repeat:no-repeat;}
.topnav ul li a {font-size:16px; padding:10px 15px; font-weight:bold; transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;}

.menubar {display:none;}

/* Ads */
.ads {max-width:100%;margin:0 auto;}
.ads img {width:100%; display:block; margin:0; padding:0;}

/* Contents */
.contents {min-height:100px;max-width:1280px;margin:0 auto;}
.hot {position:absolute;}
.hot img {position:relative;top:-50px;z-index:999;}

/* Contact */
.contact {font-size:18px;line-height:30px;padding:60px 0 30px 45px;}
.contact span {color:#b01a20;font-size:24px;}
.map {margin:0 auto; text-align:center;border:1px solid #ccc;max-width:1190px;max-height:423px;height:423px;}

/* Slides */
#slides {text-align:center;}
.banner_container {}
.banner_container img{width:100%;}
#slides .pagination{list-style-type:none;padding:0;display:inline;left:0px;position:absolute;margin:0 auto;width:100%;}
#slides .pagination li {display:inline;margin: 0px 8px;position:relative;top:-30px;z-index:10;line-height:0px;}
#slides .pagination li a {width:30px;height:0px;padding:10px;background-image:url('../images/pagination.png');background-position:0 0;overflow:hidden;}
#slides .pagination li a:hover {text-decoration:none;background-position: 0 -60px;}
#slides .pagination li.current a, #slides .pagination li.current a:hover {background-position: 0 -30px;}

/* Project */
.projects {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	padding-top: 40px;
}
.project {padding:20px;display:inline-block;max-width:551px;}
.project img {width:100%;max-width:551px;}

/* Case */
.cases {max-width:1280px; text-align:center;padding-top:60px;}
.case {display:inline-block;max-width:1280px;background:#fff;margin-bottom:20px;}
.case img {float:left;}
.case div {float:left;font-size:16px; line-height:32px; text-align:left; vertical-align:top;padding:30px;width:330px;}
.case .more {float:right;}
.moretext {display:none;}

/* Case Detail */
.casedetail {max-width:1280px; text-align:center;padding-top:60px;}
.caseads {margin:0 auto;}
.caseads img {width:100%;max-width:1199px;}
.casephototitle {padding:30px 0 20px 0; text-align:left; max-width:1199px;margin:0 auto;}
.casephotos {text-align:left;max-width:1220px;margin:0 auto;}
.casephotos img {padding:14px;}

/* Footer */
.copyright {padding:10px 0 20px 45px;color:#000; font-size:14px; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;}
.copyright a {color:#000;}

/* Icons */
.menu-icon {background-image:url('../images/icon/menu.png');}
.home-icon {background-image:url('../images/icon/home.png');}

@media screen and (max-width: 1010px) {
	.logo {padding:10px 0;display:block; float:none; margin:0 auto; text-align:center;}
	.menubar {display:inline-block; float:left; text-align:left; padding:5px 0 10px 10px;}
	.menubar img {float:left;padding-top:24px;}
	.menubar div {font-size:24px;font-weight:bold;color:#fff;text-align:left;padding-top:10px;padding-left:50px;}
	.nav {background-color:#cb171d;display:none;float:none;}
	.topnav {padding-top:5px;}
	.topnav li {width:100%;list-style:none; font-size:16px; font-weight:bold;display:block;text-align:left; padding-left:36px;}
	.topnav li a {color:#fff;}
	.topnav li:hover {background:#9b090e;}
	.topnav ul {display:none; position:static;}
	.hot img {top:-30px;width:180px;}
	.copyright {padding:10px 0 20px 10px;margin:0 auto;}
	.map{max-height:250px;height:250px;}
	.case .more {display:none;}
	.cases {width:100%;}
	.case {width:95%;display:block;margin:0 auto;margin-bottom:20px;}
	.case img {float:none;width:100%;margin:0 auto;}
	.case div {display:table-cell;float:none;width:100%;text-align:left;}
	.case .more {display:none;float:none;}
	.caseads img {width:92%;}
	.casephototitle {padding:30px 0 0px 0;width:92%;}
	.casephotos {text-align:left;width:100%;}
	.casephotos img {padding:14px;width:92%;}
	.moretext {display:block;width:100%;font-size:16px;color:#cb171d;}
}

@media screen and (max-width: 1250px) {
	.topnav li a {padding:10px 20px;}
	.map {width:90%;}
	.case .more {display:none;float:none;}

}

@media screen and (max-width: 470px) {
	.logo {text-align:right;}
	.logo img{width:80%;}
	.menubar {display:inline-block; float:left; text-align:left; padding:5px 0 10px 10px;}
	.menubar img {float:left;padding-top:24px;width:50px;}
	.contact {padding:60px 0 30px 25px;font-size:16px;}

}