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

header{
	position:absolute;
	top:auto;
	bottom:0;}
.btn_play{
	position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 30px;
    height: 30px;
	cursor:pointer;}
ul.menu li .submenu{
	top:auto;
	bottom:90px;}

footer{
	background:none;}

.bannerArea{
	padding-top:0;
	position:relative;}

.bannerArea .bx-wrapper img{
	display:none !important;}

.bannerArea li{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;}

.bannerArea li a{
	display:block;
	width:100%;
	height:100%;}

.bannerArea .bx-wrapper .bx-pager, 
.bannerArea .bx-wrapper .bx-controls-auto{
	z-index:100;}

.bannerArea .bx-wrapper .bx-controls-direction a{
	width:26px;
	height:51px;
	margin-top:-25px;
	
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;}

.bannerArea .bx-wrapper .bx-prev{
	background:url(../images/bx_arrow_prev_w.png) no-repeat;
	left:25px;}
.bannerArea .bx-wrapper .bx-next{
	background:url(../images/bx_arrow_next_w.png) no-repeat;
	right:25px;}
.bannerArea .bx-wrapper .bx-next:hover{
	background:url(../images/bx_arrow_next_w.png) no-repeat;}

.bannerArea a.scrollDown{
	display:block;
	color:#FFF;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:50px;
	left:50%;
	margin-left:-40px;
	z-index:99;}

.bannerArea a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}

@media screen and (max-width:1160px){
	.bannerArea li{
		background:none;
		height:auto !important;}
	
	.bannerArea .bx-wrapper img{
		display:block !important;}
	
	.bannerArea a.scrollDown{
		display:none;}
}

.videoBox{
	position:absolute;
	left:50px;
	top:50px;
	z-index:999;}

.videoBox .box{
	position:relative;}

.videoBox .Txt{
	padding:20px;
	padding-top:120px;
	font-family:Arial, Helvetica, sans-serif, "微軟正黑體";
	color:#FFF;
	
	position:absolute;
	left:0;
	top:0;}

.videoBox .Txt strong{
	display:block;
	font-size:28px;}

.videoBox .Txt p{
	font-size:18px;}

.videoBox .btn{
	padding-top:50px;}

.videoBox .btn a{
	display:inline-block;
	margin-right:5px;
	padding:8px 15px;
	background:#1b89c5;
	color:#FFF;}

.videoBox .btn a i{
	margin-right:5px;
	font-size:13px;}

.videoBox .btn a:hover{
	background:#51A8D8;}

/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:60px; opacity:1;}
  50%   {bottom:68px; opacity:0.5;}
  100% {bottom:60px; opacity:1;}
}
@-moz-keyframes upDown {
  0%     {bottom:60px; opacity:1;}
  50%   {bottom:68px; opacity:0.5;}
  100% {bottom:60px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:60px; opacity:1;}
  50%   {bottom:68px; opacity:0.5;}
  to {bottom:60px; opacity:1;}
}

.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;
	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}

.enTitle{
	font-weight:normal;
	font-size:16px;
	color:#000;
	position:relative;
	padding-bottom:20px;
	margin-bottom:40px;
	letter-spacing:2px;
	text-align:center;}

.enTitle:after{
	content:"";
	width:30px;
	display:block;
	height:1px;
	background:#000;
	position:absolute;
	left:50%;
	bottom:5px;
	margin-left:-15px;}
	
.enTitle em{
    display: inline-block;
    font-size: 42px;
    line-height: 90px;
	position: relative;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;}
	
.enTitle em:before{
	content:"";
	display:block;
	background: url(../images/icon01.png) no-repeat left top;
	width:70px;
	height:90px;
	position:absolute;
	left:-70px;
	top:0;}
		
.enTitle strong{
	display:block;
	font-weight:normal;
	text-align:center;
	margin-top:-10px;}
	
.aboutArea{
	padding:250px 0 100px 0;
	background:url(../images/bg_about.jpg);
	background-size:cover;}
	
.aboutArea .Img{
	width:50%;
	float:right;}
	
.aboutArea .Img img{
	max-width:100%}
	
.aboutArea .Txt{
	width:50%;
	float:left;
	text-align:center;
	padding-right:70px;}
	
.aboutArea .Txt h2{
	color:#FFF;}

.aboutArea .Txt h2.enTitle em:before{
    background: url(../images/icon02.png) no-repeat left top;}

.aboutArea .Txt h2.enTitle:after{
	background:#FFF;}

.aboutArea .Txt p{
	display:block;
	margin-bottom:30px;
	font-size:15px;
	line-height:2;
	color:#FFF;
	text-align:left;}
	
.aboutArea .Txt a.btn{
	display:inline-block;
	padding:12px 22px;
	font-size:1em;
	color:#FFF;
	border:1px solid #b7e3c4;}
	
.aboutArea .Txt a.btn:hover{
	color:#FFF;
	font-weight:800;}
	
.workArea{
	padding:100px 0;
	width:100%;
	overflow:hidden;
	background:#FFF;}
		
.workArea ul{}
	
.workArea li{}
	
.workArea li .Img{}
	
.workArea li .Img img{
	transition:all 0.4s linear;
	width:100%;}
	
.workArea li:hover .Img img{
	opacity:0.8;
	transform:scale(1.05);}
	
.workArea li .Txt{
	padding:15px 20px 0 30px;}
	
.workArea li .Txt h3{
	font-size:25px;
	font-weight:normal;}	

.workArea li .Txt h3 a{
	color:#000;}
	
.workArea li .Txt h3 a:hover{
	text-decoration:underline;}	

.workArea li .Txt p{
	margin-top:15px;
	color:#666;
	font-size:15px;
	line-height:1.8;
	text-align:left;}
	
.workArea .btn {
	margin-top:50px;
	text-align:center;}
	
.workArea .btn a{
	display:inline-block;
	padding:12px 22px;
	color:#666;
	border:1px solid #CCC;}
	
.workArea .btn a:hover{
	color:#FFF;
	font-weight:800;}	

.workArea .bx-wrapper .bx-controls-direction a{
	width:26px;
	height:52px;
	margin-top:-26px;
	
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;}

.workArea .bx-wrapper .bx-prev{
	background:url(../images/bx_arrow_prev.png) no-repeat;
	left:-50px;}
.workArea .bx-wrapper .bx-next{
	background:url(../images/bx_arrow_next.png) no-repeat;
	right:-50px;}
.workArea .bx-wrapper .bx-next:hover{
	background:url(../images/bx_arrow_next.png) no-repeat;}

	
.newsArea{
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:20px;}

.newsArea ul{
	padding:20px 0;
	margin:0 -20px;}

.newsArea ul li{
	padding:0 20px 20px 20px;}
	
.newsArea ul li .Img{
	overflow:hidden;
	position:relative;
	background:#FFF;
	padding:3px;}

.newsArea ul li .Img a{
	display:block;
	background:#205A0F}
	
.newsArea ul li .Img img{
	display:block;
	transition:all 0.4s ease;
	width:100%;}
		
.newsArea ul li:hover .Img img{
	opacity:0.1;}
	
.newsArea ul li .Img:before{
	font-family: 'Lato', sans-serif;
	content:"Read More ";
	font-size:15px;
	padding-top:60px;
	text-align:center;
	color:#fff;
	background:url(../images/icon02.png) no-repeat center top;
	background-size:60%;
	width:80px;
	height:45px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-40px;
	margin-top:-70px;
	transition:all 0.4s ease;
	opacity:0;}
	
.newsArea ul li:hover .Img:before{
	top:65%;
	opacity:1;}

.newsArea ul li .Txt{
	margin-top:15px;}

.newsArea ul li .Txt b{
	color:#1383bb;
	font-size:12px;
	display:block;
	padding:5px 0;}
	
.newsArea ul li .Txt h3{ 
	overflow:hidden;}

.newsArea ul li .Txt h3 a{
	font-size:16px;
	color:#1383bb;}
	
.newsArea ul li .Txt h3 a:hover{
	text-decoration:underline;
	color:#22556F;}

.newsArea .btn{
	margin-top:15px;
	text-align:center;}

.newsArea .btn a{
	display:inline-block;
	padding:12px 22px;
	color:#FFF;
	border:1px solid #FFF;}
	
.newsArea .btn a:hover{
	color:#FFF;
	font-weight:800;}	
	
.homemain{
	background:url(../images/bg_footer.jpg) no-repeat;
	background-size:cover;
	padding:85px 0 30px 0;}

.link{
	clear:both;
	margin-top:30px;}

.link ul li{
	padding:15px 10px;}
	
.link ul li img{
	display:block;
	width:100%;}

@media (max-width: 1280px){
	.enTitle em{
		font-size:25px;}
	
	.aboutArea .Txt{
		width:100%;
		padding:0 0 30px 0;}
	
	.aboutArea .Img{
		width:100%;
		text-align:center;}
}
	
@media (max-width: 1160px){	

	.videoBox{
		display:none;}
	
	.aboutArea{
		padding:50px 0;}
	.workArea .bx-wrapper .bx-prev{
		left:0;}
	.workArea .bx-wrapper .bx-next{
		right:0;}

}