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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica}
map :focus{outline:none}
a{text-decoration:none; }
body{min-width:100%;background-repeat:no-repeat;
	background-image: url(../images/bg.jpg);
	background-position:top center;
	background-color: #3eb13c;
	background-attachment:scroll;margin:0;
overflow-y: scroll;
　overflow-x: hidden;}
img{display:block;border:0}
ol,ul,li{list-style:none}
.clearfix::after{clear:both;display:block;height:0;visibility:hidden}
.clearfix{display:inline-block}
html[xmlns] .clearfix{display:block}

.blackbar{
	width: 100%;
	height:37px; 
	margin: 0 auto;
	background-color: #ffffff;
	color: #000000;
text-align: center;
    font-size: 14px;
    line-height:37px;
    z-index: 9999;
}
.blackbar span{
	width: 990px;
	height:37px;
    margin: 0 auto;
    margin-right: 35px;   
    background-color: #ffffff;
}
.wrap{
	width:1000px;
    margin: 0 auto;
    height: auto;
}

.kv_content{
	margin: 0 auto;
    height: 280px;
	width:1000px;
	position: relative;
}
.kv_contentpic{
	position: absolute;
	top:53%;
	left: -8%;	
}
.brightness-play {
    -webkit-animation: brightness2-play 3s -.20s linear infinite;
    animation: brightness2-play 3s -.20s linear infinite;
}

@keyframes brightness2-play{
	0%{filter:brightness(100%);}
	88%{filter:brightness(100%);}
	91%{filter:brightness(125%);}
	94%{filter:brightness(100%);}
	97%{filter:brightness(125%);}
	100%{filter:brightness(100%);}
}


.kv_contentpic img{
    width:50px;
	height:50px; 	
}
.kv_contenttitle{
	width:1000px;
	z-index: 999;
	margin: 0 auto;
	margin-top:55px;
}
.kv_contenttitle:hover{
-webkit-filter: brightness(105%);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;     
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;		
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
		-webkit-transform:translateY(-3px);
	-moz-transform:translateY(-3px);
	-ms-transform:translateY(-3px);
	-o-transform:translateY(-3px);
	transform:translateY(-3px);			
}

.content_01{
	width:1000px;
	margin: 0 auto;
	height: 226px;
	margin-top:4%;
}

.content_02pic{
position: absolute;
top:8%;
left:110%;
z-index: -9998;	
}
@media screen and (min-width: 768px) and (max-width: 1024px){
	.content_02pic{display: none;}
}
.content_02{
	width:1000px;
	margin: 0 auto;
	position:relative; 
	margin-bottom: 569px;
}
.content_02bg{
position: absolute;
right:4%;
z-index: 9999;
}
.content_02con-1{
	width:1000px;
	margin: 0 auto;
padding-top:235px;
}
.content_con02-1{
	animation-delay: 0.1s; 
}
.content_con02-2{
	animation-delay: 0.3s; 
}
.content_con02-3{
	animation-delay: 0.5s; 
}
.content_con02-4{
	animation-delay: 0.6s; 
}


.footer{
	width:100%;
	height:40px;
	bottom:0px; 
	line-height:20px;
	padding-top:21px;
		text-align: center;
	position:fixed;
	z-index: 99999;
	box-shadow:inset 0px 1px 0px 0px #fbafe3;
	background:linear-gradient(to bottom, #e62472 5%, #cc0b59 80%);
	background-color:#e27d93;
	border:1px solid #e62472;
	display:inline-block;
	position: relative;
	font-family:Microsoft JhengHei;
	position:fixed;
}
.footer a{
	width:350px;
	height:40px;
	color: #ffffff;
font-family:Microsoft JhengHei;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
	cursor:pointer;
	background-color: #e62472;	
}

.footer a:hover{
	width:350px;
	height:40px;
	color: #e62472;	
	background-color: #ffffff;
    border-radius: 20px;
    padding:5px 15px 5px 15px ;
    font-weight: bold;
    -webkit-transition: .2s;
    transition: .2s;
}


@media screen and (min-width: 768px) and (max-width: 1024px){
.bg2{display: block;}
.bg3{display: none;}
.content_02pic{display: none;}
.kv_contentpic{display: none;}
.blackbar{width: 104%;}
	}



/*animation*/

 @-webkit-keyframes bounce-down {
         25% {-webkit-transform: translateY(-5px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(5px);}
        }

        @keyframes bounce-down {
         25% {transform: translateY(-5px);}
         50%, 100% {transform: translateY(0);}
         75% {transform: translateY(5px);}
        }