@charset "UTF-8";
@import "style.css";

*{font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;}

body{ 
	background: url(../images/bg.jpg) top center no-repeat;
	background-color:#800101;
	margin: 0 auto; 
	padding: 0;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden;
	}

#wrapper{
	position: relative;
	width: 960px;
	height: 860px;
	margin: 0 auto;
}

.flag1{
	float: left;
	margin-top:-20px;
}

.flag2{
	float: right;
	margin-top:-20px;
}

/*flag animation*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInUp{
	0%{
		-webkit-transform:translate3d(0,50%,0);
		transform:translate3d(0,50%,0);
		visibility:visible
	}
	100%{
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0)
	}
}

@keyframes slideInUp{
	0%{
		-webkit-transform:translate3d(0,50%,0);
		transform:translate3d(0,50%,0);
		visibility:visible
	}
	100%{
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0)
	}
}

.slideInUp{
	-webkit-animation-name:slideInUp;
	animation-name:slideInUp
}


.logo{
	display: block;
	position: relative;
	background: url(../images/logo.png)top center no-repeat;
	width: 280px;
	height: 121px;
	margin: 20px auto 0;
	z-index: 1;
}

.logo:hover{
	background: url(../images/logo.png)3px 3px  no-repeat;
}

.slogan{
	position: relative;
	background: url(../images/slogan.png)top center no-repeat;
	width: 657px;
	height: 165px;
	margin: 0 auto; 
}

.btngroup{
	position: relative;
	width:300px;
	height:80px;
	margin: 0 auto;
}

.member{
	float: left;
	width:73px;
	height:73px;
	background: url(../images/member.png)top center no-repeat;
	text-indent: -9999px;
	z-index: 1;
}

.member:hover{
	background: url(../images/member_r.png)3px 3px no-repeat;
}

.download{
	float: left;
	width:73px;
	height:73px;
	background: url(../images/download.png)top center no-repeat;
	text-indent: -9999px;
	z-index: 1;
}

.download:hover{
	background: url(../images/download_r.png)3px 3px no-repeat;
}

.fb{
	float: left;
	width:73px;
	height:73px;
	background: url(../images/fb.png)top center no-repeat;
	text-indent: -9999px;
	z-index: 1;
}

.fb:hover{
	background: url(../images/fb_r.png)3px 3px no-repeat;
}

.bh{
	float: left;
	width:73px;
	height:73px;
	background: url(../images/bh.png)top center no-repeat;
	text-indent: -9999px;
	z-index: 1;
}

.bh:hover{
	background: url(../images/bh_r.png)3px 3px no-repeat;
}

.people{
	position: relative;
	margin: 0 auto;
	background: url(../images/people.png)top center no-repeat;
	width: 1000px;
	height: 415px;
}

.menu{
	position: relative;
	margin: 0 auto;
	width:900px;
	height:120px;
}

.eventbtn01{
	float: left;
	width:138px; 
	height:119px; 
	background: url(../images/btn.png)top center no-repeat;
	text-indent: -9999px;
	margin: 0 20px 0;
}

.eventbtn01:hover{
	background: url(../images/btn1_r.png)top center no-repeat;
}

.eventbtn02{
	float: left;
	width:138px; 
	height:119px; 
	background: url(../images/btn.png)top center no-repeat;
	text-indent: -9999px;
	margin: 0 20px 0;
}
.eventbtn02:hover{
	background: url(../images/btn2_r.png)top center no-repeat;
}

.eventbtn03{
	float: left;
	width:138px; 
	height:119px; 
	background: url(../images/btn.png)top center no-repeat;
	text-indent: -9999px;
	margin: 0 20px 0;
}

.eventbtn03:hover{
	background: url(../images/btn3_r.png)top center no-repeat;
}

.eventbtn04{
	float: left;
	width:138px; 
	height:119px; 
	background: url(../images/btn.png)top center no-repeat;
	text-indent: -9999px;
	margin: 0 20px 0;
}

.eventbtn04:hover{
	background: url(../images/btn4_r.png)top center no-repeat; 
}

.eventbtn05{
	float: left;
	width:138px; 
	height:119px; 
	background: url(../images/btn.png)top center no-repeat;
	text-indent: -9999px;
	margin: 0 20px 0;
}

.eventbtn05:hover{
	background: url(../images/btn5_r.png)top center no-repeat;
}

.content{
	position: relative;
	width: 716px;
	margin: -900px auto;
}

.close{
	position: absolute;
	margin-top: 10px;
	margin-left: 670px;
	width: 25px;
	height: 25px;
	opacity:1;
}

.event01, .event02, .event03, .event04, .event05{
    display: none;
    position: absolute;
    top:-2000px;
    z-index: 1;
	width: 716px;
	height: 650px;
	overflow-x:hidden;
}
    
        #footer{
            text-align: center;
            color: #FFF;
            padding: 10px;
            position:relative;
            bottom: 0px;
		    width:100%;
		    clear:both;
        }
        #footer img{
            width: 100%;
            height: auto;
            display: block;
        }
        #footer .rating{
            text-align:left;
        }
        #footer .rating img{
            width:25%;
            float:left;
            display: block;
        }
        #footer .rating div{
            float:right;
            display: block;
        }
        #footer .rating div p{
            display:list-item;
            list-style: initial;
            margin:0;
            font-size: 12px;
        }