@charset "utf-8";
@import url("main.css");
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/
body{background:url(../images/master/bg.jpg) repeat;font-size:13px;color:#333;}

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}
#logo{
	display: block;
	padding-top:15px;
	float: left;}
	
#logo:hover{opacity: 0.8;}	

header{width:100%;background:#fff;border-top:5px solid #E42427; height:100px;margin:0px;padding:0px;}

nav{
    margin:0px;padding:0px;
	float: right;
}

nav a{
	text-decoration: none;
}

#nav{
	margin: 25px 0 10px 0; width:100%;
}

#nav li{
	display: inline;
	font-size: 18px;
	float: left; font-family:"微軟正黑體";text-align:center;
}

#nav>li>a{
	display: block;
	overflow: hidden;
	padding:8px 15px 8px 15px;margin:0 4px 0 4px;
	color: #000;
	background: rgba(0,0,0,.0);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#nav>li>a:hover,
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
	background: #e21313;
}

#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
	color: #fff;
}

#nav>li>a>.subheader{
	color: #aeaeae;
	display: block;
	font-size: 12px;
	margin-top: 0px;
	font-weight: lighter;
}

#nav .sf-sub-indicator{
	float: right;
}

#nav>li>a>.sf-sub-indicator{
	display: none;
}

/* MOBILE NAVIGATION 尺寸縮小的menu改顏色------------------------------------------------*/

#mobile-nav-holder{
    z-index: 1000;
    background: #191a1a;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);font-family:"微軟正黑體";
}

#mobile-nav{
	display: none;
}

#mobile-nav-holder a{
	display: block;
	padding: 12px 14px;
	text-decoration: none;
	color: #fff;
	font-size: 13px;
	font-weight: lighter;
	
	-webkit-transition: all  0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#mobile-nav-holder li a{
	border-bottom: 1px solid #222;
}

#mobile-nav-holder li:last-child a,
#mobile-nav-holder li > ul a{
	border: none;
}

#mobile-nav-holder li > ul a{
	color: #FF6;/*子按鈕*/
	margin-left: 30px;
}

#mobile-nav-holder a:hover,
#mobile-nav-holder a:focus {
	background: #0d0d0d; /*滑入色塊*/
	 color:#fff;
}

#mobile-nav-holder a:hover{
	padding-left: 20px;
}

#mobile-nav-holder #nav-open{
	background: #191a1a; 
	position: absolute;
	right: 0px;
	
	z-index: 2000;
}

#mobile-nav-holder #nav-open a{
	display: block;
	padding: 7px 14px;
	
		
}

#mobile-nav-holder #nav-open a:hover,
#mobile-nav-holder #nav-open a:focus{
	background: #191a1a;
}

#mobile-nav-holder #nav-open:hover a{
	color: #cccccc;
}

#mobile-nav > .current-menu-item > a,
#mobile-nav > .current_page_item > a{
	color: #e21313;	
}


/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width:98%;
	padding-left: 1%;
	padding-right: 1%;
	clear: none;
	float: none;
}
#banner {text-align:center;
}
#services-title {
}
#services-01 {
width: 100%;
}
#services-02 {
width: 100%;
clear: both;
margin-left: 0;
}
#services-03 {
width: 100%;
clear: both;
margin-left: 0;
}
#services-04 {
width: 100%;
clear: both;
margin-left: 0;
}
#services-text01 {
width: 100%;text-align:center;margin-top:10px;
}
#services-text02 {
width: 100%;
clear: both;
text-align:center;margin-top:10px;
}
#services-text03 {
width: 100%;
clear: both;
text-align:center;margin-top:10px;
}
#works-title {
}
#works-01 {
width: 100%;text-align: center;
}
#works-01 ul{list-style:none;}
#works-01 ul li{float:left;width: 100%; margin-bottom:15px;}
#works-01 ul li a{}
#works-01 ul li a:hover{opacity: 0.6;}

#works-box{list-style:none;width: 100%;text-align: center;padding:15px 0 20px 0;clear:none;}
#works-box li{float:left;width: 100%; margin-bottom:15px;}
#works-box li a{}
#works-box li a:hover{opacity: 0.6;}

#works-more {margin:8px 0 4px 0; text-align:center;
}
#works-more a{background:#000 url(../images/index/arrow-01.png) no-repeat 60% 50%;font-size:1.2em;color:#fff;font-weight:bold;padding:10px 0px 10px 0;letter-spacing:2px;width:100%;height:100%;display:block; text-decoration:none;}
#works-more a:hover{background:#e21313 url(../images/index/arrow-01.png) no-repeat 60% 50%;}
#index-map { background:url(../images/index/map.jpg) no-repeat center top; background-size:cover;width:100%; height:400px;margin-top:20px;}
#map-01 {
width: 100%; margin-top:-50px; position:relative; z-index:10px;
}
#map-02 {
width: 100%;
clear: both;
margin-left: 0; margin-top:20px
}
#map-03 {
width: 100%;
clear: both;
margin-left: 0;margin-top:20px
}
#index-contact {margin:15px 0 0px 0;padding-bottom:0px;
}
#index-contact h2{height:39px;background:url(../images/index/contact-icon.png) no-repeat center top; margin:0px;padding:0px;}
#index-contact h1{background:#e21313; text-align:center;color:#fff;font-size:1.2em;font-family:"微軟正黑體"; width:100%;padding:5px 0 20px 0;line-height:45px;margin:0px;}
#index-contact h1 a{background:url(../images/index/contact-bnt.jpg) no-repeat;text-align:center;width:290px;height:53px;display:block;margin: auto;}
#index-contact h1 a:hover{background:url(../images/index/contact-bnt-hover.jpg) no-repeat;}
#friendship-link {
width: 47.3684%;margin: 0px;padding:0px;}
#friendship-link a{background:url(../images/index/friendship-link-bnt.jpg) no-repeat;width:132px;height:26px;display:block;margin: 0px;padding:0px;}
#top {
width: 47.3684%;
clear: none;
margin: 0px;padding:0px;
margin-left: 5.2631%;
}

#top a{background:url(../images/index/top-bnt.jpg) no-repeat;width:48px;height:26px;display:block;float:right;margin: 0px;padding:0px;}

#about-text01{width:100%;}
#about-text02{width:100%;text-align:center;}
#about-text03{width:100%;}

#footer{color:#7e7e7e;font-size:13px;text-align:center;font-family:"微軟正黑體"; margin:8px 0 8px 0;}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

.services-tick{list-style:none;text-align:center;margin:20px 0 20px 0;width:100%;}
.services-tick li{width:100%;float:left;margin:12px 0 12px 0;}
.services-tick li h2{color:#303030;line-height:22px;font-size:15px;}
.services-bg2-text{color:#fff; width:100%;font-family:"微軟正黑體";font-weight:100;padding:34px 0 34px 0; font-size:15px;line-height:22px;}
.services-bg2-text h2{letter-spacing:2px;font-size:1.5em;text-align:center;line-height:30px;}
.services-bg2-text h3{margin:16px 0 16px 0;text-align:center;}
.services-bg2-text h4{}
.services-bg2-text h5{font-size:18px;}

.services-bg2-text2{width:100%;font-family:"微軟正黑體";text-align:center;}
.services-bg2-text2 h1{font-size:15px;line-height:22px;}
.services-bg2-text2 h2{margin:10px 0 10px 0;}
.services-bg2-text2 p{font-size:28px;margin:25px 0 15px 0;}
.contact-box01{width:100%;}
.contact-box01 ul{list-style:none;}
.contact-box01 ul li{border-top:1px dotted #3e3e3e;clear:both;padding:8px 0 0px 0;}
.contact-box01 ul li h1{float:left;text-align:right;font-size:13px;font-weight:100;width:20%;}
.contact-box01 ul li h2{float:left;width:70%;text-align:left;}
.contact-bnt{background:#ddeef1 url(../images/contact/contact_arrow.png) no-repeat 20% center;text-align:center;border:1px solid #328d9e;color:#328d9e;width:100%;padding:8px 0 8px 0;text-decoration:none; font-family:"微軟正黑體";margin:20px 4% 20px 0; display:block;}
.contact-bnt:hover{background:#328d9e url(../images/contact/contact_arrow.png) no-repeat 20% center;color:#fff;}
.contact-box02{width:89%;background:#ddeef1;border:3px solid #328d9e;padding:5%;text-align:left; font-family:"微軟正黑體";color:#328d9e;margin-top:20px;overflow:hidden;font-size:14px;line-height:22px;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;
	clear: none;
	float: none;
	margin-left: auto;
}
#banner {
}
#services-title {
}
#services-01 {
width: 48.7179%;
}
#services-02 {
width: 48.7179%;
clear: none;
margin-left: 2.5641%;
}
#services-03 {
width: 48.7179%;
clear: both;
margin-left: 0;
}
#services-04 {
width: 48.7179%;
clear: none;
margin-left: 2.5641%;
}
#services-text01 {
	width: 100%;
	text-align: center;
}
#services-text02 {
	width: 100%;
	clear: both;
	margin-left: 0;
	text-align: center;
	margin-top: 10px;
}
#services-text03 {
	width: 100%;
	clear: both;
	margin-left: 0;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 0px;
}
#works-title {
}
#works-01 {
	width: 100%;
	text-align: center;
}
#works-01 ul{list-style:none;}
#works-01 ul li{ margin-bottom:15px; width:50%}

#works-box{list-style:none;width: 100%;text-align: center;}
#works-box li{ margin-bottom:15px; width:50%}

#works-more {
}
#index-map {
}
#map-01 {
width: 100%;margin-top:-50px; position:relative;z-index:10;
}
#map-02 {
width: 100%;
clear: both;
margin-left: 0;margin-top:20px; position:relative;z-index:10;
}
#map-03 {
width: 100%;
clear: both;
margin-left: 0;margin-top:20px; position:relative;z-index:10;
}
#index-contact {
}
#friendship-link {
width: 48.7179%;
}
#top {
width: 48.7179%;
clear: none;
margin-left: 2.5641%;
}
#footer {
}

#about-text01{width:100%;}
#about-text02{width:100%;}
#about-text03{width:100%;}

.zeroMargin_tablet {
margin-left: 0;
}
.hide_tablet {
display: none;
}

.contact-bnt{background:#ddeef1 url(../images/contact/contact_arrow.png) no-repeat 20% center;text-align:center;border:1px solid #328d9e;color:#328d9e;width:45%;padding:8px 0 8px 0;text-decoration:none; font-family:"微軟正黑體";margin:20px 4% 20px 0; display:block;float:left;}
.contact-bnt:hover{background:#328d9e url(../images/contact/contact_arrow.png) no-repeat 20% center;color:#fff;}

}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 100%;
	max-width: 1000px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#banner {
}
#services-title {
}
#services-01 {
width: 23.7288%;
}
#services-02 {
width: 23.7288%;
margin-left: 1.6949%;
clear: none;
}
#services-03 {
width: 23.7288%;
margin-left: 1.6949%;
clear: none;
}
#services-04 {
width: 23.7288%;
margin-left: 1.6949%;
clear: none;
}
#services-text01 {
	width: 32.2033%;
	text-align: center;
	margin-top: 10px;
}
#services-text02 {
	width: 32.2033%;
	margin-left: 1.6949%;
	clear: none;
	text-align: center;
	margin-top: 10px;
}
#services-text03 {
width: 32.2033%;
margin-left: 1.6949%;
clear: none;
}
#works-title {
}
#works-01 {
	width: 100%;
	text-align: center;
}
#works-01 ul{list-style:none;}
#works-01 ul li{float:left;width: 23%;margin-left: 1.6949%;}

#works-box{list-style:none;width: 100%;text-align: center;}
#works-box li{float:left;width: 23%;margin-left: 1.6949%;}

#works-more {
}
#index-map {
}
#map-01 {
width: 32.2033%;
}
#map-02 {
width: 32.2033%;
margin-left: 1.6949%;
clear: none;margin-top:-50px;
}
#map-03 {
width: 32.2033%;
margin-left: 1.6949%;
clear: none;margin-top:-50px;
}
#index-contact {
}
#friendship-link {
width: 49.1525%;
}
#top {
width: 49.1525%;
margin-left: 1.6949%;
clear: none;
}
#footer {
}

#about-text01{width:45%;}
#about-text02{width:55%;clear:none;text-align:right;}
#about-text03{width:100%;}

.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
.services-tick{list-style:none;text-align:center;margin:20px 0 20px 0;}
.services-tick li{width:30%;float:left;margin:0 1.6% 0 1.6%;}
.services-tick li h2{color:#303030;line-height:22px;font-size:15px;}

.services-bg2-text{color:#fff;width:100%;font-family:"微軟正黑體";font-weight:100;padding:25px 0 34px 0; font-size:13px;}
.services-bg2-text h2{letter-spacing:2px;font-size:28px;width:50%;float:left;margin-top:20px; line-height:32px;}
.services-bg2-text h3{margin:16px 0 16px 0;width:50%;float:left;}
.services-bg2-text h4{clear:both;margin-top:15px;}
.services-bg2-text h5{font-size:16px;}

.services-bg2-text2{width:100%; font-family:"微軟正黑體";text-align:left;}
.services-bg2-text2 h1{font-size:15px;width:58%;float:left;}
.services-bg2-text2 h2{margin:25px 0 10px 0;width:42%;float:left;}
.services-bg2-text2 p{font-size:28px;margin:25px 0 15px 0;}

.contact-box01{width:50%;float:left;margin-top:15px;}
.contact-box02{width:42%;background:#ddeef1;border:3px solid #328d9e;padding:3%
2% 3% 2%;text-align:left; font-family:"微軟正黑體";color:#328d9e;float:right;margin-top:15px;}

.contact-bnt{background:#ddeef1 url(../images/contact/contact_arrow.png) no-repeat 20% center;text-align:center;border:1px solid #328d9e;color:#328d9e;width:45%;padding:8px 0 8px 0;text-decoration:none; font-family:"微軟正黑體";margin:20px 4% 20px 0; display:block;float:left;}
.contact-bnt:hover{background:#328d9e url(../images/contact/contact_arrow.png) no-repeat 20% center;color:#fff;}

}
