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

html,
body {
  height: 100%;
  margin:0;
  /* The html and body elements cannot have any padding or margin. */
  font-family:"LiHei Pro",Meiryo,"微軟正黑體","Microsoft JhengHei",sans-serif;
  word-spacing:2px;
  text-decoration:none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

a:link,
a:visited,
a:hover,
a:active {
    outline: none;
}
a:hover img{opacity:0.9;}

img{ border:0px;}
input,button,select,textarea{outline:none}
 *:focus { outline: none; }
.header{ padding-top:10px;}

.index{ position:relative; width:1100px; height:650px; margin:0 auto; margin-top:-50px;}
.index #title{ position:absolute; left:250px; animation-duration: 2s; animation-delay:0s;}
.index #love{ position:absolute; left:400px; top:220px; animation: Updown 1s infinite alternate; /*IE*/
-moz-animation: Updown 1s infinite alternate; /*FireFox*/
-webkit-animation: Updown 1s infinite alternate; /*Chrome, Safari*/}
.index #word{ position:absolute; left:360px; top:320px; animation-duration: 2s; animation-delay:0.5s;}
.index #btn_farm{position: absolute; left: 175px; top: 438px; animation-duration: 2s; animation-delay: 1s;}
.index #btn_where{position: absolute; left: 588px; top: 457px; animation-duration: 2s; animation-delay: 1s;}

.where{ position:relative; width:1100px; height:650px; margin:0 auto; margin-top:-80px;}
.where #title{ position:absolute; left:300px; top:50px; animation-duration: 2s; animation-delay:0s;}
.where #btn_see{position: absolute; left: 175px; top: 438px; animation-duration: 2s; animation-delay: 1s;}
.where #form{position: absolute; left: 380px; top: 283px; width: 340px; color:#460000;}
.where #form select{margin:10px; border:2px solid #9f8678;height:50px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;color:#460000;font-size:16px;padding-left:8px;width:100%;}
.where #see{position: absolute; left: 470px; top: 440px;}
.where #check{
	position: absolute;
	left: 750px;
	top: 298px;
}
.where #bottle{
	position: absolute;
	left: 182px;
	top: 266px;
	animation: Updown 1s infinite alternate; /*IE*/
	-moz-animation: Updown 1s infinite alternate; /*FireFox*/
	-webkit-animation: Updown 1s infinite alternate; /*Chrome, Safari*/
}

.place{ position:relative; width:1100px; height:680px; margin:0 auto; margin-top:-80px;}
.place #title{ position:absolute; left:300px; top:50px; animation-duration: 2s; animation-delay:0s;}
.place #map{ position:absolute; left:210px; top:230px; animation-duration: 2s; animation-delay:0.5s;}
.place #taiwan{position:absolute; left:210px; top:230px; animation-duration: 2s; animation-delay:0.5s;}
.place #taiwan_1{
	position: absolute;
	left: 248px;
	top: 275px;
	animation-duration: 2s;
	animation-delay: 0.5s;
}
.place #taiwan_2{
	position: absolute;
	left: 212px;
	top: 304px;
	animation-duration: 2s;
	animation-delay: 0.5s;
}
.place #taiwan_3{
	position: absolute;
	left: 289px;
	top: 210px;
	animation-duration: 2s;
	animation-delay: 0.5s;
}
.place #taiwan_4{
	position: absolute;
	left: 239px;
	top: 249px;
	animation-duration: 2s;
	animation-delay: 0.5s;
}
.place #car{ position:absolute; left:280px; top:580px; animation-duration: 2s; animation-delay:0.5s;}
.place #car #btn_1{
	position: absolute;
	left: 133px;
	top: -40px;
}
.place #car #btn_2{
	position: absolute;
	left: 240px;
	top: -40px;
}
.place #car #btn_3{
	position: absolute;
	left: 346px;
	top: -40px;
}
.place #car #btn_4{
	position: absolute;
	left: 455px;
	top: -40px;
}
.place #check{
	position: absolute;
	left: 464px;
	top: 385px;
	animation-duration: 2s;
	animation-delay: 1s;
	z-index:500;
}

.farm{position:relative; width:1100px; height:750px; margin:0 auto; margin-top:-80px;}
.farm .road{ position:absolute; left:160px;}
.farm #title{ position:absolute; left:340px; top:70px; animation-duration: 2s; animation-delay:0s;}
.farm #chose{position: absolute;left: 405px;top: 310px; animation-duration: 2s;animation-delay: 0s; animation: Updown2 1s infinite alternate; /*IE*/-moz-animation: Updown2 1s infinite alternate; /*FireFox*/-webkit-animation: Updown2 1s infinite alternate;/*Chrome, Safari*/}
.farm #word{position: absolute;left: 340px;top: 390px; animation-duration: 2s;	animation-delay: 0.5s;}
.farm #start{position: absolute;left: 587px;top: 484px;animation-duration: 2s;animation-delay: 0.5s;}
.farm #intro{
	position: absolute;
	left: 711px;
	top: 480px;
	animation-duration: 2s;
	animation-delay: 0.5s;
}
.farm #boy{position: absolute; left: 234px;top: 180px;	animation-duration: 3s;	animation-delay: 0s;}
.farm #boy_talk{position: absolute;left: 211px;top: 120px;animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.farm #girl{position: absolute;	left: 740px;top: 177px;	animation-duration: 3s;	animation-delay: 0s;}
.farm #girl_talk{position: absolute;left: 835px;top: 140px;animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate; /*Chrome, Safari*/}

.step1{position:relative; width:1100px; height:750px; margin:0 auto;}
.step1 #title{ position:absolute; left:60px; top:100px; animation-duration: 2s; animation-delay:0s;}
.step1 #word{ position:absolute; left:60px; top:250px; animation-duration: 2s; animation-delay:1s;}
.step1 #pic{ position:absolute; left:680px; top:220px; animation-duration: 2s; animation-delay:1s;}

.step2{position:relative; width:1100px; height:750px; margin:0 auto;}
.step2 #title{position: absolute;left: 618px;top: 140px;animation-duration: 2s;animation-delay: 0s;}
.step2 #word{position: absolute;left: 665px;top: 280px;animation-duration: 2s;animation-delay: 1s;}
.step2 #cow{position: absolute;left: 320px;top: 180px;animation-duration: 2s;animation-delay: 1s;width: 300px;height: 160px; background-image:url(../img/step2_cow.png);-webkit-animation: eat 1s steps(4) infinite alternate; animation: eat 1s steps(4) infinite alternate;}
@-webkit-keyframes eat {
   from { background-position:    0px; }
     to { background-position: -1200px; }
}

@keyframes eat {
   from { background-position:    0px; }
     to { background-position: -1200px; }
}

.step3{position:relative; width:1100px; height:750px; margin:0 auto;}
.step3 #title{ position:absolute; left:130px; top:280px; animation-duration: 2s; animation-delay:0s;}
.step3 #word{ position:absolute; left:180px; top:410px; animation-duration: 2s; animation-delay:1s;}
.step3 #sun{position: absolute;	left: 430px;	top:0px;	animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.step3 #house{position: absolute;left: 210px;top: 70px;animation-duration: 2s;animation-delay: 1s;width: 300px;height: 185px; background-image:url(../img/step3_house.png);-webkit-animation: play 0.3s steps(2) infinite alternate; animation: play 0.3s steps(2) infinite alternate;}
@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -600px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -600px; }
}

.step3 #cow{position: absolute;left: 480px;top: 40px;animation-duration: 2s;animation-delay: 1s;width: 400px;height: 215px; background-image:url(../img/step3_cow.png);-webkit-animation: water 1s steps(3) infinite alternate; animation: water 1s steps(3) infinite alternate;}
@-webkit-keyframes water {
   from { background-position:    0px; }
     to { background-position: -1200px; }
}

@keyframes water {
   from { background-position:    0px; }
     to { background-position: -1200px; }
}

.step4{position:relative; width:1100px; height:750px; margin:0 auto;}
.step4 #title{ position:absolute; left:80px; top:90px; animation-duration: 2s; animation-delay:0s;}
.step4 #word{position: absolute;left: 260px;top: 280px;animation-duration: 2s;animation-delay: 1s;}
.step4 #FB{position: absolute;left: 600px;top: 100px;animation-duration: 2s;animation-delay: 1s;}
.step4 #Q1{ position:absolute; left:250px; top:350px; animation-duration: 2s; animation-delay:1s; width:648px; height:303px; background-image:url(../img/step4_bg.png);}
.step4 #Q1 h1{ position:absolute; left:140px; top:25px; color:#544037; font-size:18px; line-height:45px;}
.step4 #Q1 h1 a{ color:#544037; font-size:18px; padding-right:30px; text-decoration:none;}
.step4 #Q1 h1 a:hover{ color:#F60;}
.step4 #Q1 #skip{position: absolute;left: 255px;top: 270px;}
.step4 #Q2{ position:absolute; left:350px; top:350px; animation-duration: 2s; animation-delay:1s; width:648px; height:303px; background-image:url(../img/step4_bg.png);}
.step4 #Q2 h1{ position:absolute; left:180px; top:25px; color:#544037; font-size:18px; line-height:32px;}
.step4 #Q2 h1 a{ font-size:12px; color:#999; text-decoration:none;}
.step4 #Q2 #cow{ position:absolute; left:-300px; top:-20px;}
.step4 #Q2 #bottle{ position:absolute; width:500px; left:180px; top:140px;}
.step4 #Q2 #bottle span{ margin:6px;}
.step4 #Q2 #radio{position: absolute;left: 655px;top: 150px;}
.step4 #Q2 #click_music{position: absolute;left: 623px;top: 25px; animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.step4 #Q2 #start{position: absolute;left: 623px;top: 25px; animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.step4 #Q2 #click_cow{position: absolute;left: -120px;top: 200px;animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.step4 #Q2 #music{position: absolute;left: 617px;top: 121px;animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate;/*Chrome, Safari*/}
.step4 #Q2 #time{position: absolute;left: 439px;top: -10px;}
.step4 #Q2 #time span{position: absolute; font-size:43px; left:30px; top:18px; color:#FFF; font-family:'cwTeXYen'; font-weight:bold;}
.step4 #Q2 #skip{position: absolute;left: 255px;top: 270px;}

.step5{position:relative; width:1100px; height:750px; margin:0 auto;}
.step5 #title{position: absolute;left: 220px;top: 180px;animation-duration: 2s;animation-delay: 0s;}
.step5 #barn{position: absolute;left: 230px;top: 550px;animation-duration: 2s;animation-delay: 0s;}
.step5 #board{position: absolute;left: 450px;top: 310px;animation-duration: 2s;animation-delay: 0s; width:613px; height:240px;}
.step5 #board #check1{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 60px;top: 83px;}
.step5 #board #check2{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 60px;top: 118px;}
.step5 #board #check3{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 60px;top: 153px;}
.step5 #board #check4{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 60px;top: 190px;}
.step5 #board #check5{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 223px;top: 83px;}
.step5 #board #check6{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 223px;top: 118px;}
.step5 #board #check7{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 223px;top: 153px;}
.step5 #board #check8{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 223px;top: 190px;}
.step5 #board #check9{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 410px;top: 83px;}
.step5 #board #check10{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 410px;top: 118px;}
.step5 #board #check11{position: absolute;animation-duration: 2s;animation-delay: 0s;left: 410px;top: 153px;}
.step5 #ok{position: absolute;left: 496px;top: 127px;animation-duration: 2s;animation-delay: 0s;}
.step5 #milk{position: absolute;left: 366px;top: 690px;animation-duration: 2s;animation-delay: 0s;}

.step6{position:relative; width:1100px; height:300px; margin:0 auto;}
.step6 #title{ position:absolute; left:60px; top:120px; animation-duration: 2s; animation-delay:0s;}
.step6 #word{position: absolute;left: 104px;top: 194px;animation-duration: 2s;animation-delay: 1s;}
.step7 #pic{position: absolute;left: 643px;top: 114px;animation-duration: 2s;animation-delay: 1s;width: 350px;height: 211px;background-image: url(../img/step7_pic.png);-webkit-animation: spin 1s steps(5) infinite ;animation: spin 1s steps(5) infinite;}
@-webkit-keyframes spin {
   from { background-position:    0px; }
     to { background-position: -1750px; }
}

@keyframes spin {
   from { background-position:    0px; }
     to { background-position: -1750px; }
}

.step7{position:relative; width:1100px; height:440px; margin:0 auto;}
.step7 #title{ position:absolute; left:60px; top:70px; animation-duration: 2s; animation-delay:0s;}
.step7 #word{position: absolute;left: 104px;top: 144px;animation-duration: 2s;animation-delay: 1s;}
.step8 #pic{position: absolute;left: 643px;top: 110px;animation-duration: 2s;animation-delay: 1s;width: 350px;height: 211px;background-image: url(../img/step8_pic.png);-webkit-animation: spin 1s steps(5) infinite ;animation: spin 1s steps(5) infinite;}


.step8{position:relative; width:1100px; height:730px; margin:0 auto;}
.step8 #title{position: absolute;left: 214px;top: 140px;animation-duration: 2s;animation-delay: 0s;}
.step8 #word{position: absolute;left: 256px;top: 270px;animation-duration: 2s;animation-delay: 1s;}
/* .step8 #pic{position: absolute;left: 870px;top: 122px;animation-duration: 2s;animation-delay: 1s;width: 230px;height: 360px;background-image: url(../img/step8_pic.png);-webkit-animation: drop 4s steps(9) infinite ;animation: drop 4s steps(9) infinite;}
@-webkit-keyframes drop {
   from { background-position:    0px; }
     to { background-position: -2070px; }
}

@keyframes drop {
   from { background-position:    0px; }
     to { background-position: -2070px; }
} */

.step9{position:relative; width:1100px; height:750px; margin:0 auto;}
.step9 #title{position: absolute;left: 377px;top: 0px;animation-duration: 2s;animation-delay: 0s;}
.step9 #word{position: absolute;left: 424px;top: 130px;animation-duration: 2s;animation-delay: 1s;}
.step9 #fb{position: absolute;left: 248px;top: 100px;animation-duration: 2s;animation-delay: 1s;}
.step9 #game1{ position:absolute; left:280px; top:200px; animation-duration: 2s; animation-delay:1s; width:647px; height:325px; background-image:url(../img/step9_bg.png);}
.step9 #game1 #skip{position: absolute;left: 240px;top: 290px;}
.step9 #game1 #time{position: absolute;left: 520px;top: 10px;}
.step9 #game1 #time span{position: absolute; font-size:43px; left:30px; top:18px; color:#FFF; font-family:'cwTeXYen'; font-weight:bold;}
.step9 #game1 h1{ position:absolute; left:110px; top:50px; color:#5c2900; font-size:36px; line-height:32px; font-family:SimSun, PMingLiU, 細明體; font-weight:bold;}
.step9 #game1 h2{ position:absolute; left:110px; top:100px; color:#544037; font-size:18px; line-height:32px; font-family:'cwTeXYen';}
.step9 #game1 #start{position: absolute;left: 490px;top: 140px;}

.step9 #game2{ position:absolute; left:280px; top:200px; animation-duration: 2s; animation-delay:1s; width:647px; height:325px; background-image:url(../img/step9_bg.png);}
.step9 #game2 #skip{position: absolute;left: 240px;top: 290px;}
.step9 #game2 #time{position: absolute;left: 520px;top: 10px;}
.step9 #game2 #time span{position: absolute; font-size:43px; left:30px; top:18px; color:#FFF; font-family:'cwTeXYen'; font-weight:bold;}
.step9 #game2 #time a{ font-size:12px; color:#999; text-decoration:none;}
.step9 #game2 #gun{position: absolute;left: 420px;top: 103px; width: 180px;height: 160px;background-image:url(../img/step9_gun.png);-webkit-animation: gun 0.3s steps(2) infinite ;animation: gun 0.3s steps(2) infinite;}
@-webkit-keyframes gun {
   from { background-position:    0px; }
     to { background-position: -360px; }
}

@keyframes gun {
   from { background-position:    0px; }
     to { background-position: -360px; }
}
.step9 #game2 #cell_1{
	position: absolute;
	left: 151px;
	top: 70px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_2{
	position: absolute;
	left: 113px;
	top: 189px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_3{
	position: absolute;
	left: 320px;
	top: 66px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_4{
	position: absolute;
	left: 166px;
	top: 189px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_5{
	position: absolute;
	left: 364px;
	top: 80px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_6{
	position: absolute;
	left: 259px;
	top: 87px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_7{
	position: absolute;
	left: 61px;
	top: 106px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_8{
	position: absolute;
	left: 292px;
	top: 134px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_9{
	position: absolute;
	left: 212px;
	top: 41px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_10{
	position: absolute;
	left: 293px;
	top: 216px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_11{
	position: absolute;
	left: 380px;
	top: 207px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_12{
	position: absolute;
	left: 253px;
	top: 208px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_13{
	position: absolute;
	left: 386px;
	top: 156px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_14{
	position: absolute;
	left: 164px;
	top: 125px;
	animation-duration: 1s;
	animation-delay: 0s;
}
.step9 #game2 #cell_15{
	position: absolute;
	left: 223px;
	top: 140px;
	animation-duration: 1s;
	animation-delay: 0s;
}



.step10{position:relative; width:1100px; height:750px; margin:0 auto;}
.step10 #title{ position:absolute; left:150px; top:30px; animation-duration: 2s; animation-delay:0s;}
.step10 #word{position: absolute;left: 250px;top: 270px;animation-duration: 2s;animation-delay: 1s;}
.step10 #fb{position: absolute;left: 620px;top: 100px;animation-duration: 2s;animation-delay: 1s;}
.step10 #game1{ position:absolute; left:280px; top:350px; animation-duration: 2s; animation-delay:1s; width:647px; height:325px; background-image:url(../img/step9_bg.png);}
.step10 #game1 #skip{position: absolute;left: 477px;top: 360px;}
.step10 #game1 #time{position: absolute;left: 520px;top: 10px;}
.step10 #game1 #time span{position: absolute; font-size:43px; left:30px; top:18px; color:#FFF; font-family:'cwTeXYen'; font-weight:bold;}
.step10 #game1 h1{
	position: absolute;
	left: 147px;
	top: 8px;
	color: #5c2900;
	font-size: 36px;
	line-height: 32px;
	font-family: SimSun, PMingLiU, 細明體;
	font-weight: bold;
}
.step10 #game1 h2{
	position: absolute;
	left: 48px;
	top: 55px;
	color: #544037;
	font-size: 18px;
	line-height: 32px;
	font-family: 'cwTeXYen';
	width: 553px;
}
.step10 #game1 #start{
	position: absolute;
	left: 573px;
	top: 64px;
}

.step10 #game2{ position:absolute; left:280px; top:350px; animation-duration: 2s; animation-delay:1s;}
.step10 #game2 #skip{position: absolute;left: 477px;top: 360px;}
.step10 #game2 #time{position: absolute;left: 0px;top: 0px;}
.step10 #game2 #time span{position: absolute; font-size:43px; left:30px; top:18px; color:#FFF; font-family:'cwTeXYen'; font-weight:bold;}
.step10 #game2 #time a{ font-size:12px; color:#999; text-decoration:none;}
.step10 #game2 #milk{position: absolute;left: 160px;top: 180px;}
.step10 #game2 #cow{position: absolute;left: 290px;top: 60px;}
.step10 #game2 #light_1{position: absolute;left: 475px;top: -34px;}
.step10 #game2 #light_2{position: absolute;left: 390px;top: -31px;}
.step10 #game2 #get{position: absolute;left: 315px;top: -10px;}

.step11{position:relative; width:1100px; height:750px; margin:0 auto;}
.step11 #title{position: absolute;left: 278px;top: 200px;animation-duration: 2s;animation-delay: 0s;}
.step11 #word{position: absolute;left: 399px;top: 330px;animation-duration: 2s;animation-delay: 1s;}
.step11 #view{position: absolute;left: 450px;top: 380px;animation-duration: 2s;animation-delay: 1s;}
.step11 #milk{position: absolute;left: 850px;top:200px;animation: Updown 1s infinite alternate; /*IE*/-moz-animation: Updown 1s infinite alternate; /*FireFox*/-webkit-animation: Updown 1s infinite alternate; /*Chrome, Safari*/}


#Q1_wrong{ text-align:center;}
#Q1_wrong #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#Q1_wrong p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#Q1_right{ text-align:center;}
#Q1_right #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#Q1_right p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#Q1_right span{ font-size:30px; padding-right:10px; padding-left:10px;}

#Q2_fail{ text-align:center;}
#Q2_fail #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:80px; color:#420000; font-weight:bold;}
#Q2_fail p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#Q2_fail a{margin:10px;}
#Q2_angry{ text-align:center;}
#Q2_angry #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:80px; color:#420000; font-weight:bold;}
#Q2_angry p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#Q2_finish{ text-align:center;}
#Q2_finish #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#Q2_finish p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#Q2_finish span{ font-size:30px; padding-right:10px; padding-left:10px;}

#shot_fail{ text-align:center;}
#shot_fail #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:80px; color:#420000; font-weight:bold;}
#shot_fail p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#shot_fail a{margin:10px;}
#shot_finish{ text-align:center;}
#shot_finish #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#shot_finish p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#shot_finish span{ font-size:30px; padding-right:10px; padding-left:10px;}

#super_fail{ text-align:center;}
#super_fail #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#super_fail p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#super_fail a{margin:10px;}
#super_finish{ text-align:center;}
#super_finish #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:50px; color:#420000; font-weight:bold;}
#super_finish p{ font-size:22px; font-family:'cwTeXYen'; text-align:center; padding:20px; color:#733300;}
#super_finish span{ font-size:30px; padding-right:10px; padding-left:10px;}

#game_final{ position:relative;}
#game_final #title{ font-size:48px; font-family:SimSun, PMingLiU, 細明體; padding-top:0px; color:#420000; font-weight:bold; text-align:left; margin-left:20px;}
#game_final p{ font-size:22px; font-family:'cwTeXYen'; text-align:left; color:#733300; margin-left:20px;}
#game_final #word{ font-size:18px; font-family:'cwTeXYen'; text-align:center; color:#420000; text-align:left; width:350px; margin-left:20px;}
#game_final #cow{ position:absolute; top:30px; right:0px;}
#game_final span{ font-size:30px; padding-right:10px; padding-left:10px;}
#game_final a{margin:5px;}

/* Wrapper for page content to push down footer */
.wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -90px;
  /* Pad bottom by footer height */
  padding: 0 0 90px;
}

.footer{height: 90px; background:url(../img/index_bottom.png); background-position:bottom center; background-repeat:repeat-x; text-align:center;}

@keyframes Updown {
  from {margin-top: 0px;}
  to {margin-top: 13px;}
}
@-webkit-keyframes Updown {
  from {margin-top:0px;}
  to {margin-top:13px;}
}

@keyframes Updown2 {
  from {margin-left: 13px;}
  to {margin-left: 0px;}
}
@-webkit-keyframes Updown2 {
  from {margin-left:13px;}
  to {margin-left:0px;}
}

input[type="text"] {
	border:3px solid #e3d6bb;
	height:45px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color:#8a613b;
	font-size:16px;
	padding-left:8px;
	margin:3px;
	width:400px;
	outline:none;
　　　　}
input[type="text"].focus, input[type="text"]:focus  { border:3px solid #936027;
}

/* lightbox */
/* Pure CSS3 Lightbox start */
.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  overflow: hidden;
  z-index:1000;
}
.lightbox-target .content {
  width: 60%;
  height: 60%;
  background:;
  color: #333;
  margin: auto;
  position: absolute;
  padding:40px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 0px solid #fff;
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}
.lightbox-target:target .content, .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}
.lightbox-target:target .lightbox-close {
  top: ;
}

.lightbox .content span{font-size:22px; color:#e94720; font-weight:600; line-height:40px;}
.lightbox .content p{font-size:16px; color:#333; line-height:30px;}

.lightbox-close {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #F60;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  z-index:800;
}
.lightbox-close:before, .lightbox-close:after {
  content: " ";
  display: block;
  height: 50px;
  width: 1px;
  background: #fff;
  position: absolute;
  left: 30px;
  top: 6px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lightbox-close:after {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}