@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{
	background:url(../images/bg.jpg) no-repeat;
	background-repeat:no-repeat;background-position:top center;
	background-attachment:scroll;background-color:#fff;margin:0;
}
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}


.sidebar{
    position: fixed;
    right: -15px;
    top:15%;
    z-index: 100;
    display: block;}
.sidebar ul li{	margin-bottom: 10px;}
.sidebar ul li a{
	display: block;
    background-color: #061094;
    border-radius:50px;
    padding: 10px 50px 10px 20px;
    color: #FFFFFF;
    font-size: 15px;
    position: relative;
    right: -15px;
    -webkit-transition: .3s;
    transition: .3s;}
.sidebar ul li a:hover{
	color: #f5be28;
    font-size: 15px;
    position: relative;
    right: 0px;
    -webkit-transition: .3s;
    transition: .3s;}

	@media screen and (min-width: 768px) and (max-width: 1024px){
     .sidebar{display: none;}
     body{
	background:url(../images/bg2.jpg) no-repeat;
	background-repeat:no-repeat;background-position:top center;
	background-attachment:scroll;background-color:#fff;margin:0;
}

	}

.topbar{
	width: 100%;
	height: 30px;
	background-color: #061094;
	font-family:sans-serif,Microsoft JhengHei;
	/**font-weight: bold;**/
	color: #ffffff;
	letter-spacing:0.1em;
	line-height:30px; 
	text-align: center;
}
#gotop { display: none; position:fixed; z-index:5; right:40px; bottom:11%;padding:10px 10px 3px 10px;
 border-radius:50px; font:12px/30px Verdana; text-align:center; color:#ffffff; 
 background-color:rgba(6,16,148,0.85); cursor:pointer;
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
          transition: all 0.3s ease;}
#gotop:hover { padding-top:40px; background-color:#061094;} 
#gotop::before { content: ""; position:absolute; top:7px; left:18px; width: 0; height: 0; 
border: 4px solid #000; border-color: transparent transparent #ffffff; }
	@media screen and (max-width:767px){
		#gotop { right:20px; bottom:65px; }
	}

	@media screen and (min-width: 768px) and (max-width: 1024px){
    .topbar{width:128%; } 
	#gotop{display: none;}

}


.wrap{
	max-width:1000px;
    margin: 0 auto;
    height: auto;
}
.kv_content{
	margin: 0 auto;
	max-width:1000px;
	height:727px;
	position: relative;
}
.kv_title0{
	position: absolute;
	z-index: 999;
    top:30px;
    left: 10%;
}
.kv_title{
	position: absolute;
	z-index: 1;
    top:-28px;
    left: -40px;
}
.kv_title img:hover,.kv_title2 img:hover{
	-webkit-filter: brightness(115%);
	-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:translateY(-3px);
	-moz-transform:translateY(-3px);
	-ms-transform:translateY(-3px);
	-o-transform:translateY(-3px);
	transform:translateY(-3px);**/	
}
.kv_title2{
	position: absolute;
	top:73%;
	left: 50%;
	z-index: 1;
}

.brightness-play {
    -webkit-animation: brightness2-play 3s -.20s linear infinite;
    animation: brightness2-play 3s -.20s linear infinite;
}
/*animation*/
@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%);}
}
 @-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);}
        }

.content_01{
	max-width:100%;
	margin: 0 auto;
	transition: 2s ease-in-out;
	margin-top: 10px;
	margin-left: -40px;
}
.content_02 {
	max-width:100%;
	margin: 0 auto;
	animation-delay: 0.3s;
	margin-left: -40px; 
}
.content_03,.content_04,.content_05,.content_06{
	max-width:100%;
	margin: 0 auto;
	animation-delay: 0.3s;
    position: relative;
    margin-left: -40px;
}
.con03more{
	position: absolute;
	top:81%;
	left:83%;
}
.con04more{
	position: absolute;
	top:81%;
	left:24%;
}
.con05more{
	position: absolute;
	top:81%;
	left:83%;}
.con06more{
	position: absolute;
	top:81%;
	left:24%;
}
.con03more img:hover,.con04more img:hover,.con05more img:hover,.con06more img:hover{
-webkit-filter: brightness(105%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	transform:scale(0.9);	
}
.content_07{
	max-width: 100%;
	height: 250px;
	margin:0 auto;
}

.content_07 ul{
	width: 1183px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}
@media screen and (min-width: 768px) and (max-width: 1024px){
	.content_07{height: 400px;}
	.kv_content{margin-left:39px;}
	.kv_title{top:-19px;left: 10px;}
	.kv_title2{
	position: absolute;
	top:75%;
	left: 55%;
	z-index: 1;
}
	.content_01,.content_02,.content_03,.content_04,.content_05,.content_06{
    margin-left:25px;
	}
}
.content_07 li{
	display: table;
	float: left;
	cursor:pointer;
	padding: 0px;
}

.social{
	display: table;
	margin:0 auto;
	margin-top:90px;
	padding-left: 3%;
}

.social li{
	width:33.333333%;
}

.social li img{
	margin: 0 auto;
	display: block;
}

.social li img:hover{
	transition: 0.3s;
	transform:translateY(2px);
	-webkit-transform:translateY(2px);
	-moz-transform:translateY(2px);
	-ms-transform:translateY(2px);
	-o-transform:translateY(2px)	
}

.social a{
	display: block;
	text-align: center;
	margin:23px auto 0px auto; 
}

.social span:hover{
	transition: 0.3s;		
}

.social span{
	display: block;
	color: #ffffff;
	font-size:18px;
	line-height: 50px;
}

	@media screen and (min-width: 768px) and (max-width: 1024px){

		.social{
			max-width: 100%;
			margin: 0 auto;
			padding-bottom: 10px;
		}

		.social li{
			width:33.333333%;
		}

		.social span{
			display: block;
			font-size:26px;
			line-height: 70px;
		}
		.social a{
	display: block;
	text-align: center;
	margin:128px auto 30px auto; 
}
	}

.footer{
	width: 100%;
	height: 60px;
	background: #061094;
	bottom: 0;
	position:fixed;
	z-index: 99999;
}

.footer ul{
	width: 1183px;
	margin:0 auto;
}

.footer li{
	display: table;
	width: 50%;
	float: left;
}

.footer li a{
	width: 150px;
	display: block;
	text-align: center;
    color: #fff;
    font-size:26px;
    height: 36px;
    line-height: 36px;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
    margin: 15px auto;
	opacity: 1;
	transition: 0.5s ease-in-out;
}
.footer li a:hover{
	width: 160px;
    color: #000000;
    background-color: #f5be28;
    border-radius:50px; 	
    font-weight: bold;
    animation:3s linear infinite; 
}

.footer .join_m a{
	display: none;
}


.footer_m{
	display: none;
}

	@media screen and (min-width: 768px) and (max-width: 1024px){

		.footer{
			display: none;
		}


		.footer_m{
			width: 100%;
			height: 80px;
			background: #061092;
			bottom: 0;
			position:fixed;
			z-index: 9999;
			opacity: 0.95;
			display: block;
		}

		.footer_m ul{
			width: 100%;
			margin:0 auto;
		}

		.footer_m li{
			display: table;
			width: 49%;
			float: left;
			border-right: 2px solid #fff;
		}

		.footer_m li:last-child { border-right:none; } 

		.footer_m li a{
			width: 100%;
		    display: block;
		    text-align: center;
		    border-radius: 0px;
		    background: #061092;
		    color: #fff;
		    font-size: 35px;
		    height: 80px;
		    line-height:80px;
		    position: relative;
		    -webkit-transition: .3s;
		    transition: .3s;
		    margin: 0px auto;
		    font-weight: bold;
		    letter-spacing: 0.1em;
		}

	}
/*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);}
        }
@-webkit-keyframes bounce-downtwo {
         25% {-webkit-transform: translateY(-15px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(15px);}
        }

        @keyframes bounce-downtwo {
         25% {transform: translateY(-15px);}
         50%, 100% {transform: translateY(0);}
         75% {transform: translateY(15px);}
        }       
@media screen and (min-width: 768px) and (max-width: 1024px){
	.kv_bg2 img{display: inline-flex;
}