html,body{height: 100%;}

/*=contents_page*/
.contents_page{width: 100%;height: 100%;display: block;
background:url('../image/contents/bg.png') center center no-repeat;
background-size: cover;
}

.contents_page .q_pic{
	position: absolute;
	top: 0;
	left: 50px;
	animation: qq_anm 8s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: qq_anm 8s linear 0s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: qq_anm 8s linear 0s infinite alternate;
/* Opera: */
-o-animation: qq_anm 8s linear 0s infinite alternate;
}

.contents_page .pg_p:hover{
	-webkit-animation: jello 1s;
    animation: jello 1s;
}
.contents_page .pg_p.pg_1{
	position: absolute;
	top: 461px;
    left: 664px;
}

.contents_page .pg_p.pg_2{
	position: absolute;
	top: 681px;
    left: 342px;
}

.contents_page .pg_p.pg_3{
	position: absolute;
	top: 85px;
    left: 1120px;
}

.contents_page .pg_p.pg_4{
	position: absolute;
	top: 219px;
    right: 256px;
}

.contents_page .pg_p.pg_5{
	position: absolute;
	top: 573px;
    right: 249px;
}

.contents_page .pg_p.pg_6{
	position: absolute;
    top: 727px;
    right: 764px;
}

.contents_page .pg_p.pg_r1{
	position: absolute;
	top: 863px;
    left: 664px;
}

.contents_page .pg_p.pg_r2{
	position: absolute;
	top: 363px;
    right: 711px;
}

.contents_page .pg_p.pg_r3{
	position: absolute;
	top: 897px;
    right: 268px;
}

@keyframes qq_anm
{
0% {top:0;left:30px;transform: rotate(0deg);}
50% {top:60px;left: 180px;transform: rotate(60deg);}
100%{top:280px;left: 40px;transform: scale(.5,.5) rotate(180deg);}
}

@-moz-keyframes qq_anm /* Firefox */
{
0% {top:0;left:30px;transform: rotate(0deg);}
50% {top:60px;left: 180px;transform: rotate(60deg);}
100%{top:280px;left: 40px;transform: scale(.5,.5) rotate(180deg);}
}

@-webkit-keyframes qq_anm /* Safari 和 Chrome */
{
0% {top:0;left:30px;transform: rotate(0deg);}
50% {top:60px;left: 180px;transform: rotate(60deg);}
100%{top:280px;left: 40px;transform: scale(.5,.5) rotate(180deg);}
}

@-o-keyframes qq_anm /* Opera */
{
0% {top:0;left:30px;transform: rotate(0deg);}
50% {top:60px;left: 180px;transform: rotate(60deg);}
100%{top:280px;left: 40px;transform: scale(.5,.5) rotate(180deg);}
}
/*=contents_page(end)*/

/*=cover*/
.cover{
width: 100%;height: 100%;display: block;
background:url('../image/cover/p6_bg.png') center center no-repeat;
background-size: cover;
}

.cover .light_l{
	position: absolute;
	right: 832px;
    top: 585px;
    opacity:0;
    transition: .5s;
    cursor: pointer;
}
.cover .light_r{
	position: absolute;
	top: 589px;
    right: 592px;
    opacity:0;
    transition: .5s;
    cursor: pointer;
}
.cover .light_l.clk,
.cover .light_r.clk{
	opacity: 1;
}

.cover .wrench{
	display: block;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	/*background: rgba(255,255,0,.5);*/
	position: absolute;
	right: 279px;
    bottom: 100px;
    cursor: pointer;
}

.fixed_mu_btn{
	position: fixed;
	top: 0px;
	left: 10px;
	background:url('../image/fixed_menu/mu_btn.png') center center no-repeat;
	background-size:cover;
	border:none;
	width: 90px;
	height: 90px;
	cursor: pointer;
}

.fixed_mu_box{
	position: fixed;
	top: -600px;
	left: 10px;
	transition: 1.5s;
	width:90px;
	background:#9bd89a;
	box-shadow: 2px 2px 5px -1px #8F8F8F;
	-webkit-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-moz-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-o-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	padding-bottom: 20px;
}

.fixed_mu_box.clk{top: 0;}

.fixed_mu_box .mu_btn{display: block;background: none;border:none;max-width: 100%;cursor: pointer;margin-bottom: 10px;}
.fixed_mu_box .mu_btn img{width: 100%;}
.fixed_mu_box .mu_box{
height: auto;
padding: 15px;
background:#9bd89a;
display: block;
box-shadow: 2px 2px 5px -1px #8F8F8F;
-webkit-box-shadow: 2px 2px 5px -1px #8F8F8F;
-moz-box-shadow: 2px 2px 5px -1px #8F8F8F;
-o-box-shadow: 2px 2px 5px -1px #8F8F8F;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 1;
position: relative;
}

.fixed_mu_box .close_btn{
	width: 100%;
	z-index: 0;
	position: relative;
	margin-top: -20px;
	padding-top: 20px;
	padding-bottom:5px;
	font-size: 20px;
	cursor: pointer;
	border:none;
	background:#fff5da;
	color:#9bd89a;
	box-shadow: 2px 2px 5px -1px #8F8F8F;
	-webkit-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-moz-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-o-box-shadow: 2px 2px 5px -1px #8F8F8F;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	text-shadow:2px 2px 2px #8F8F8F;
}


/*=cover(end)*/

/*=text_page*/
.text_page{width: 100%;height: 100%;display: block;
background:url('../image/text_page/p8p9.png') center center no-repeat;
background-size: cover;

}

.text_page .dialogue_box{position: absolute;transition:.5s;}
.text_page .dialogue_box.clk{transform:scale(1.2,1.2);}
.text_page .dialogue_box.dialogue1{top: 160px;left: 600px;}
.text_page .dialogue_box.dialogue2{bottom: 251px;left: 468px;}
.text_page .dialogue_box.dialogue3{right: 491px;top: 26px;}
.text_page .dialogue_box.dialogue4{right: 274px;bottom: 434px;}
.text_page .dialogue_box.dialogue5{right: 274px;bottom: 134px;}

.text_page .brushes_btn{position: absolute;background:none;border:none;cursor: pointer;

}

.text_page .brushes_btn:active{
	/*-webkit-animation: jello 1s;
    animation: jello 1s;*/
}

.text_page .brushes_btn.brushes_1{bottom:100px;left: 360px;}
.text_page .brushes_btn.brushes_2{bottom:100px;left: 460px;}
.text_page .brushes_btn.brushes_3{bottom:100px;left: 560px;}
.text_page .brushes_btn.brushes_4{bottom:100px;left: 660px;}
.text_page .brushes_btn.brushes_5{bottom:100px;left: 760px;}

.text_page .traffic_light{position: absolute;width: 75px;height: 243px;top: 33px;right: 787px;
background:url('../image/text_page/traffic_light_b.png') center center no-repeat;
background-size: cover;
cursor: pointer;
}

.text_page .traffic_light.clk{
animation: traffic_light .5s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: traffic_light .5s linear 0s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: traffic_light .5s linear 0s infinite alternate;
/* Opera: */
-o-animation: traffic_light .5s linear 0s infinite alternate;
}

.text_page .pinky_gosh{
	position: absolute;
	bottom: 462px;
    right: 648px;
    opacity: 0;
}

.text_page .pinky_gosh.clk{
	opacity: 1;
}

.text_page .pinky_btn{
	position: absolute;
    bottom: 317px;
    right: 550px;
    width: 267px;
    height: 237px;
    border-radius: 50%;
    cursor: pointer;
}

/*紅綠燈動畫*/
@keyframes traffic_light
{
0%   {background-image:url('../image/text_page/traffic_light_g.png');}
100% {background-image:url('../image/text_page/traffic_light_r.png');}
}

@-moz-keyframes traffic_light /* Firefox */
{
0%   {background-image:url('../image/text_page/traffic_light_g.png');}
100% {background-image:url('../image/text_page/traffic_light_r.png');}
}

@-webkit-keyframes traffic_light /* Safari 和 Chrome */
{
0%   {background-image:url('../image/text_page/traffic_light_g.png');}
100% {background-image:url('../image/text_page/traffic_light_r.png');}
}

@-o-keyframes traffic_light /* Opera */
{
0%   {background-image:url('../image/text_page/traffic_light_g.png');}
100% {background-image:url('../image/text_page/traffic_light_r.png');}
}

/*=text_page(end)*/

/*=text_page2*/
.text_page2{
width: 100%;height: 100%;display: block;
background:url('../image/text_page2/p10_p11.png') center center no-repeat;
background-size: cover;
}

.text_page2 .brushes_btn{position: absolute;background:none;border:none;cursor: pointer;}
.text_page2 .brushes_btn.brushes_1{bottom:100px;left: 360px;}
.text_page2 .brushes_btn.brushes_2{bottom:100px;left: 460px;}
.text_page2 .brushes_btn.brushes_3{bottom:100px;left: 560px;}
.text_page2 .brushes_btn.brushes_4{bottom:100px;left: 660px;}
.text_page2 .brushes_btn.brushes_5{bottom:100px;left: 760px;}

.text_page2 .dialogue_box{position: absolute;transition: .5s;}
.text_page2 .dialogue1{top: 382px;left: 200px;}
.text_page2 .dialogue2{top: 473px;left: 545px;}
.text_page2 .dialogue3{top: 479px;right: 587px;}
.text_page2 .dialogue4{bottom: 50px;right: 249px;}

.text_page2 .fish_btn{position: absolute;
    width: 278px;
    height: 223px;
    top: 200px;
    left: 704px;
    transform: rotate(9deg);
    cursor: pointer;
}

.text_page2 .oli{position: absolute;width: 136px;height: 207px;
top: 241px;
right: 616px;
background:url('../image/text_page2/oli_green.png') center center no-repeat;
background-size: cover;
cursor: pointer;
transition: .5s;
}
.text_page2 .oli.clk{
background:url('../image/text_page2/oli_purple.png') center center no-repeat;
background-size: cover;
}

.text_page2 .dialogue_box.clk{transform:scale(1.2,1.2);}

/*=text_page2(end)*/