@import url("reset.css");
ol,ul,li{ list-style: none; margin: 0; padding: 0;}

body{
	background-color: #232323;
	margin: 0;
	padding: 0;
	font-family: "微軟正黑體";
}

#jSplash {
  width: 430px;
  height: 50px;
  background: url(../img/loading.gif) no-repeat;
  margin: auto;
}

.gotop a{
	position: fixed;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background-color: #84bd01;
	border: solid 1px #000;
	right: 50px;
	bottom: 30px;
	z-index: 100;
	text-align: center;
	line-height: 50px;
	display: block;
	color: #000;
	text-decoration: none;
}

.peini{
	position: relative;
	width: 1000px;
	height: 240px;
	margin: auto;
}

.info{
	display: inline-block;
	width: 165px;
	margin-top: 25px;
	margin-left: 20px;
}

.poto{
	width: 165px;
	height: 165px;
	border-radius: 165px;
	overflow: hidden;
	background-color: #fff;
}

.poto img{
	display: block;
	width: 100%;
}

.info p{
	margin-top: 10px;
	text-align: center;
	font-size: 12px;
	color:#fff;
}

.info span , .skill span{
	color: #84bd01;
}

.skill{
	display: inline-block;
	margin-left: 10px;
}

.skill p{
	font-size: 13px;
	color: #acacac;
	line-height: 23px;
}

.top{
	position: relative;
	width: 100%;
	height: 300px;
	background: url(../img/top_bg.jpg) no-repeat center;
}


.nav{
	position: relative;
	width: 100%;
	height: 60px;
	background: url(../img/mune_bg.png) repeat;
}


.nav .nav_mune{
	position: relative;
	width: 1000px;
	height: 60px;
	margin:auto;
}

.nav .nav_mune ul{
	margin-left: 20px;
}

.nav .nav_mune ul li {
	line-height: 50px;
	display: inline-block;
	margin-right:16px;
}

.nav .nav_mune ul li a{
	color: #ffffff;
	font-size: 15px;
	text-decoration: none;
}

.nav .nav_mune ul li a:hover{
	color: #84bd01;
}

.main{
	position: relative;
	width: 100%;
		
}

.main .box{
	position: relative;
	width: 1000px;
	height: auto;
	margin:auto;
	/*background-color: #000000;*/
}

.main .box .type p{
	width: 800px;
	margin-left: 20px;
	font-size: 12px;
	font-family:"微軟正黑體";
	color: #c0c0c0;
	margin-top: 8px;
}


.main .box ul{
	position: relative;
	width: 1000px;
	height: 300px;
	padding-left: 19px;
	padding-top:14px;
}

.main .box ul li a,.main .box ul li {
	position: relative;
	width: 230px;
	height: 300px;
	overflow: hidden;
	display: inline-block;
	*display : inline;
  *zoom : 1;
  background-color: #dddddd;
  margin-right: 10px;
  transition: box-shadow .3s;
  text-decoration: none
}

.main .box ul li:hover{
	background-color: #000000;
	-moz-box-shadow:0px 0px 3px 4px rgba(0%,0%,0%,0.3);
	-webkit-box-shadow:0px 0px 3px 4px rgba(0%,0%,0%,0.3);
	box-shadow:0px 0px 3px 4px rgba(0%,0%,0%,0.3);
}


.main .box ul li a .box_img{
	width: 230px;
	height: 170px;
	overflow: hidden;
	z-index: 1;
}
  
.main .box ul li a .box_img img{
	display: block;
	width: 230px;
	transition:all 0.3s;
	filter:brightness(0.5);
	-webkit-filter:brightness(0.5);
	-moz-filter:brightness(0.5);
	-o-filter:brightness(0.5);
	-ms-filter:brightness(0.5);
}

.main .box ul li a:hover .box_img img{
	display: block;
	width: 250px;
	margin-left: -10px;
	filter:brightness(1);
	-webkit-filter:brightness(1);
	-moz-filter:brightness(1);
	-o-filter:brightness(1);
	-ms-filter:brightness(1);
}

.main .box ul li a span{
	position: absolute;
	width: 47px;
	height: 47px;
	line-height: 47px;
	border-radius: 47px;
	color: #ffffff;
	text-align: center;
	background-color: #000000;
	z-index: 2;
	top:145px;
	left: 92px;
	font-size: 13px;
	font-family: "微軟正黑體";
	transition:all 0.3s;
}


.main .box ul li a:hover span{
	 width: 39px;
	 height: 39px;
	 line-height: 39px;
	 font-size: 11px;
	 background-color: #84bd01;
	 left: 96px;
	 -webkit-transform:scale(0.91);

}

.main .box ul li a h2{
	width: 210px;
	font-size: 14px;
	line-height: 20px;
	color: #000000;
	font-family: "微軟正黑體";
	margin: 30px 10px 5px 10px;
	transition:all 0.3s;
	text-decoration: none
}

.main .box ul li a p{
	width: 210px;
	font-size: 12px;
	font-family: "微軟正黑體";
	color: #7c7c7c;
	margin: 0 10px;
	line-height: 16px;
	text-decoration: none
}

.main .box ul li a:hover h2{
	color:#84bd01;
}

.main .box ul li a:hover p{
	color:#666666;
}

.box02{
	position: relative;
	width: 100%;
	margin-top: 50px;
	background: url(../img/box_bg.jpg) no-repeat top #000000;
}

.box03{
	position: relative;
	width: 100%;
	background-color: #84bd01;
	padding-bottom: 50px;
}

.box02 .area,.box03 .area{
	width: 1000px;
	margin: auto;
}

.box02 .area p{
	font-size: 12px;
	color:#fff;
	margin-left: 20px;
	margin-top: 8px;
}

.box03 .area p{
	font-size: 12px;
	color:#000000;
	margin-left: 20px;
	padding-top: 10px;
}

.box03 .area .infor{
	font-size: 15px;
	color:#fff;
	font-weight: bold;
	margin-top: 20px;
	text-align: center;
}

.box03 .area .infor a{
	color:#fff;
	text-decoration:none;
}

.box03 .area .infor a:hover{
	color:#fff;
	text-decoration:underline;
}
.main .box .type h2 , .box02 .area h1{
  padding:40px 0 0 20px;
	font-size: 30px;
	/*font-weight: bold;*/
	font-family: "Century Gothic","微軟正黑體";
	color:#84bd01;
	height: 30px;
	line-height: 30px;
}

#a05{
	padding:40px 0 10px 20px;
}

.cakebox{
	margin-left: 20px;
	margin-top: 20px;
}
.cake01{
	position: relative;
	display: inline-block;
	width: 228px;
	height: 228px;
	border-radius: 230px;
	margin-right: 8px;
	background-color: #90bb39;
	margin-bottom: 20px;
}

.small01{
	width: 180px;
	height: 180px;
	border-radius: 180px;
	border: solid 2px #90bb39  ;
	background-color: #232323;
	position: absolute;
	top: 22px;
	left: 22px;
	text-align: center;
}

.small01 h3{
	font-size: 100px;
	line-height: 100px;
	color: #90bb39;
	margin-top: 20px;
}

.cakebox .cake01 .small01 p{
	font-size: 12px;
	line-height: 18px;
	width: 120px;
	color: #90bb39;
	margin-left: 32px;
}

.cake02{
	position: relative;
	display: inline-block;
	width: 228px;
	height: 228px;
  border: solid 2px #90bb39  ;
	border-radius: 230px;
	margin-right: 8px;
	background-color: #232323;
	margin-bottom: 20px;
}

.small02{
	width: 180px;
	height: 180px;
	border-radius: 180px;
	border: solid 2px #90bb39  ;
	background-color: #232323;
	position: absolute;
	top: 22px;
	left: 22px;
	text-align: center;
	z-index: 2;
}

.small02 h3{
	font-size: 100px;
	line-height: 100px;
	color: #90bb39;
	margin-top: 20px;
}

.cakebox .cake02 .small02 p{
	font-size: 12px;
	line-height: 18px;
	width: 120px;
	color: #90bb39;
	margin-left: 32px;
}

.linebox02{
	position:absolute;
  border-width: 115px;
  border-style: solid;
  border-color: transparent #90bb39 #90bb39;
  border-radius: 115px;
  transform: rotate(-45deg);
}

.linebox02:before{
  content:"";
  position:absolute; 
  border-width: 115px;
  border-style: solid;
  border-color: transparent #90bb39 #90bb39;
  border-radius: 115px;
  transform: rotate(50deg);
  top: -116px;
  left: -116px;
}

.linebox03{
	position:absolute;
  border-width: 115px;
  border-style: solid;
  border-color: transparent #90bb39 #90bb39;
  border-radius: 115px;
  transform: rotate(-45deg);
}

.linebox04{
	position:absolute;
  border-width: 115px;
  border-style: solid;
  border-color: transparent #90bb39 #90bb39 transparent;
  border-radius: 115px;
  transform: rotate(-45deg);
}

.linebox05{
	position:absolute;
  border-width: 115px;
  border-style: solid;
  border-color: transparent #90bb39 transparent transparent;
  border-radius: 115px;
  transform: rotate(-45deg);
}