@charset "utf-8";
/* CSS Document */

@import url(reset.css);

.clearfix:after {content: "."; display: block; clear: both; visibility: hidden;	line-height: 0;	height: 0;}
h1, h2, h3, h4, h5, h6, p, a{ font-family:"微軟正黑體"; letter-spacing:1px;}

body{ background:url(../images/bg.jpg) repeat-x center -130px;}
.wrapper{ width:1300px; background:url(../images/main.png) no-repeat center top; margin: 0 auto;}
.wrapper .container{ width:1020px; margin: 0 auto; }


/*==header==*/
.wrapper .container .header{ width:100%; height:410px; padding:15px 0; position:relative;}
.wrapper .container .header h1{ position:absolute; left:60px; top:0px;}
.wrapper .container .header h1 a{ display:block; width:220px; height:50px; text-indent:-9999px; background:url(../images/logo.png) no-repeat;}

.wrapper .container .header .title{ position:absolute; left:60px; top:0px;}
.wrapper .container .header .title a{ display:block; width:220px; height:50px; text-indent:-9999px; background:url(../images/logo.png) no-repeat;}

.wrapper .container .header .linkBox{ position:absolute; right:10px; top:20px;}
.wrapper .container .header .linkBox ul  li{ float:left; border-right:1px #c4e58f solid;}
.wrapper .container .header .linkBox ul  li a{ display:block; color:#fff; font-size:12px; padding:0 8px; letter-spacing:0;}
.wrapper .container .header .linkBox ul  li a:hover{ text-decoration:underline;}
.wrapper .container .header .linkBox ul  li:last-child{ border-right:none; }

.wrapper .container .header .txt_slogan{ width:360px; height:60px; position:absolute; right:165px; top:90px; background:url(../images/banner_txt.png) no-repeat; text-indent:-9999px;}
.wrapper .container .header .shine01{ width:570px; height:400px; position:absolute; left:-145px; top:0px; background:url(../images/shine01.png) no-repeat;}
.wrapper .container .header .shine02{ width:181px; height:233px; position:absolute; left:250px; top:167px; background:url(../images/shine02.png) no-repeat;}

.wrapper .container .header .menuBox{ background:#000; opacity:0.9; position:absolute; right:13px; bottom:0px;}
.wrapper .container .header .menuBox ul.menu{ position:relative;}
.wrapper .container .header .menuBox ul li{ float:left; padding:10px 0;}
.wrapper .container .header .menuBox ul li a{ display:block; color:#fff; font-size:18px; padding: 0 40px; border-left:1px #5b7280 solid; letter-spacing:2px;}
.wrapper .container .header .menuBox ul li:first-child a{ border-left:none;}
.wrapper .container .header .menuBox ul li a.active{ color:#fcff00;}
.wrapper .container .header .menuBox ul li a:hover{ color:#fcff00;}

.wrapper .container .header .menuBox ul.secMenu{ position:absolute; left:0; top:-29px; background:#000; opacity:0.8; display:none; width:100%;}
.wrapper .container .header .menuBox ul.secMenu li{ float:left;  padding: 5px 0;}
.wrapper .container .header .menuBox ul.secMenu li a{ display:block; font-size:14px; border-left:1px #fff solid; padding: 0 25px;}
.wrapper .container .header .menuBox ul.secMenu li a:hover{ color:#ffba00;}
.wrapper .container .header .menuBox ul.secMenu li a.active{ color:#ffba00;}
.wrapper .container .header .menuBox ul.secMenu li:first-child a{border-left:none;}



/*==content==*/
.wrapper .container .content{ width:947px; /*background:#fff;*/padding:25px 0; margin-left:60px; box-sizing: border-box; }
.wrapper .container .content > div{float:left; box-sizing:border-box; padding-right:10px;}
.wrapper .container .content h3{ font-size:16px; color:#333; padding:0 0 5px 5px;}

/*aboutBox*/
.wrapper .container .content .aboutBox{ width:34%; padding:0 20px 0 0;}
.wrapper .container .content .aboutBox h3{ border-bottom:1px #ccc solid;}
.wrapper .container .content .aboutBox div{ font-weight:bold; border-bottom:1px #ccc solid;}
.wrapper .container .content .aboutBox p{ font-family: Arial, Helvetica, sans-serif, "新細明體"; font-size:12px; color:#333; padding: 10px 0 0 5px; line-height:20px; text-align:justify; background:url(../images/bg_about.jpg) no-repeat; background-size: contain;}

/*serviceBox*/
.wrapper .container .content .serviceBox{ width:35%;}
.wrapper .container .content .serviceBox .service{ width:297px; height:148px; border:1px #dedede solid; background:url(../images/pic_service.jpg) no-repeat 7px 8px; padding:8px 7px; position:relative;}
.wrapper .container .content .serviceBox .service a{ display:block; width:310px; height:42px; position:absolute; left:0; text-indent:-9999px;}
.wrapper .container .content .serviceBox .service a.ser_a{ top:0;}
.wrapper .container .content .serviceBox .service a.ser_b{ top:42px;}
.wrapper .container .content .serviceBox .service a.ser_c{ top:84px;}
.wrapper .container .content .serviceBox .service a.ser_d{ top:126px;}
.jc{ font-weight:bold; color:#333;}

/*contactBox*/
.wrapper .container .content .contactBox{ width:31%;}
.wrapper .container .content .contactBox .contact{ border:3px #d7d7d7 solid;}
.wrapper .container .content .contactBox .contact ul{ padding: 0 5px;}
.wrapper .container .content .contactBox .contact ul li{ border-bottom:1px #eee solid; padding:6px 0;}
.wrapper .container .content .contactBox .contact ul li:last-child{ border:none;}
.wrapper .container .content .contactBox .contact ul li .leftCon{ float:left; padding:0 10px;}
.wrapper .container .content .contactBox .contact ul li .rightCon{ float:left;}
.wrapper .container .content .contactBox .contact ul li .rightCon p{ color:#2241b3; font-size:14px;}
.wrapper .container .content .contactBox .contact ul li .rightCon strong{ color:#454545; font-size:16px; font-family:"Century Gothic", "微軟正黑體"; font-weight:normal;}
.wrapper .container .content .contactBox .contact ul li .rightCon strong.tel{ font-size:18px;}

/*==footer==*/
.wrapper .container .footer{ width:948px; margin: 20px 0 0 60px; background:url(../images/bg_footer.jpg) no-repeat; padding:25px 0; box-sizing: border-box;}
.wrapper .container .footer .logoBox{ float:left; width:160px; height:40px; background:url(../images/logo_m.jpg) no-repeat; margin:5px 0 0 40px; _display:inline;}
.wrapper .container .footer .inforBox{ float:left; width:700px;}
.wrapper .container .footer .inforBox .serviceLink{ padding-left:100px; }
.wrapper .container .footer .inforBox .serviceLink ul li{ float:left;}
.wrapper .container .footer .inforBox .serviceLink ul li a{ display:block; font-size:14px; color:#666; padding: 0 20px; border-left:1px #ccc solid; text-align:center;}
.wrapper .container .footer .inforBox .serviceLink ul li a:hover{ text-decoration:underline;}
.wrapper .container .footer .inforBox .serviceLink ul li:first-child a{ border:none;}
.wrapper .container .footer .inforBox p{ font-size:12px; color:#333; text-align:center; margin-top:10px;}
	
/*==CSS3動畫==*/
.ffr{-webkit-animation: ffr ease-out 1s /*infinite*/;}	
@-webkit-keyframes ffr{
	0% { opacity:0; right:130px;}
	100% { opacity:1; right:165px;}
}	

.flash{-webkit-animation: flash ease-out 2s infinite;}	
@-webkit-keyframes flash{
	0% { opacity:0;}
	50% { opacity:1;}
	100% { opacity:0;}
}	

.flash_b{-webkit-animation: flash ease-out 8s infinite;}	
@-webkit-keyframes flash{
	0% { opacity:1;}
	50% { opacity:0.2;}
	100% { opacity:1;}
}	

/*page 模組*/
.page{
	width:100%;
	clear:both;
	text-align:right;}

.page a{
	text-align: center;
	padding: 2px 5px 0px 5px;
	line-height: 20px;
	margin-left: 4px;
	font-size: 13px;
	color:#000;}/*頁碼字顏色*/

.page a:hover{/*頁碼滑過樣式*/
	text-decoration: underline;
	background-color: #b4280e;
	color: #FFF;}

.page a.pageLink{
	color: #FFF;/*頁碼字顏色*/}/*頁碼框線*/

.page a.pageLink:hover{
	background:none;
	text-decoration: underline;}

.page a.over{
	background-color: #b4280e;
	color: #FFF;}/*頁碼字選取後背景顏色*/
/*page 模組*/