@-webkit-keyframes upIn {  0% {
opacity:0;
-webkit-transform:translate3d(0, -30px, 0);
}
 100% {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes upIn {  0% {
opacity:0;
-moz-transform:translate3d(0, -30px, 0);
}
 100% {
opacity:1;
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes upIn {  0% {
opacity:0;
transform:translate3d(0, -30px, 0);
}
 100% {
opacity:1;
transform:translate3d(0, 0, 0);
}
}
 @-webkit-keyframes downIn {  0% {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
}
 100% {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes downIn {  0% {
opacity:0;
-moz-transform:translate3d(0, 30px, 0);
}
 100% {
opacity:1;
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes downIn {  0% {
opacity:0;
transform:translate3d(0, 30px, 0);
}
 100% {
opacity:1;
transform:translate3d(0, 0, 0);
}
}
 @-webkit-keyframes leftIn {  0% {
opacity:0;
-webkit-transform:translate3d(-30px, 0, 0);
}
 100% {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes leftIn {  0% {
opacity:0;
-moz-transform:translate3d(-30px, 0, 0);
}
 100% {
opacity:1;
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes leftIn {  0% {
opacity:0;
transform:translate3d(-30px, 0, 0);
}
 100% {
opacity:1;
transform:translate3d(0, 0, 0);
}
}
 @-webkit-keyframes rightIn {  0% {
opacity:0;
-webkit-transform:translate3d(30px, 0, 0);
}
 100% {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes rightIn {  0% {
opacity:0;
-moz-transform:translate3d(30px, 0, 0);
}
 100% {
opacity:1;
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes rightIn {  0% {
opacity:0;
transform:translate3d(30px, 0, 0);
}
 100% {
opacity:1;
transform:translate3d(0, 0, 0);
}
}
 @-webkit-keyframes fadeIn {  0% {
opacity:0;
}
 100% {
opacity:1;
}
}
@-moz-keyframes fadeIn {  0% {
opacity:0;
}
 100% {
opacity:1;
}
}
@keyframes fadeIn {  0% {
opacity:0;
}
 100% {
opacity:1;
}
}
 @-webkit-keyframes fadeOut {  0% {
opacity:1;
}
 100% {
opacity:0;
}
}
@-moz-keyframes fadeOut {  0% {
opacity:1;
}
 100% {
opacity:0;
}
}
@keyframes fadeOut {  0% {
opacity:1;
}
 100% {
opacity:0;
}
}
 @-webkit-keyframes bounceIn {  0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3);
}
 60% {
opacity:1;
-webkit-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03);
}
 80% {
-webkit-transform:scale3d(.97, .97, .97);
transform:scale3d(.97, .97, .97);
}
 100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
}
@-moz-keyframes bounceIn {  0% {
opacity:0;
-moz-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3);
}
 60% {
opacity:1;
-moz-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03);
}
 80% {
-moz-transform:scale3d(.97, .97, .97);
transform:scale3d(.97, .97, .97);
}
 100% {
opacity:1;
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
}
@keyframes bounceIn {  0% {
opacity:0;
transform:scale3d(.3, .3, .3);
}
 60% {
opacity:1;
transform:scale3d(1.03, 1.03, 1.03);
}
 80% {
transform:scale3d(.97, .97, .97);
}
 100% {
opacity:1;
transform:scale3d(1, 1, 1);
}
}
 @-webkit-keyframes titleIn {  0% {
opacity:0;
-webkit-transform:scale(8);
}
 70% {
opacity:1;
-webkit-transform:scale(0.9);
}
 80% {
-webkit-transform:translateX(10px) scale(1);
}
 85% {
-webkit-transform:translateX(-10px);
}
 90% {
-webkit-transform:translateX(5px);
}
 95% {
-webkit-transform:translateX(-5px);
}
 100% {
-webkit-transform:translateX(0);
}
}
@-moz-keyframes titleIn {  0% {
opacity:0;
-moz-transform:scale(8);
}
 70% {
opacity:1;
-moz-transform:scale(0.8);
}
 80% {
-moz-transform:translateX(10px) scale(1);
}
 85% {
-moz-transform:translateX(-10px);
}
 90% {
-moz-transform:translateX(5px);
}
 95% {
-moz-transform:translateX(-5px);
}
 100% {
-moz-transform:translateX(0);
}
}
@keyframes titleIn {  0% {
opacity:0;
transform:scale(8);
}
 70% {
opacity:1;
transform:scale(0.8);
}
 80% {
transform:translateX(10px) scale(1);
}
 85% {
transform:translateX(-10px);
}
 90% {
transform:translateX(5px);
}
 95% {
transform:translateX(-5px);
}
 100% {
transform:translateX(0);
}
}
html, body { width: 100%; height: 100%; overflow: hidden; }
#full_screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pages { position: relative; width: 100%; height: 100%; overflow: hidden; }
#indicator { position: absolute; top: 200px; right: 5%; width: 14px; z-index: 10; }
#indicator li { position: relative; width: 14px; height: 14px; margin: 10px 0; cursor: pointer; }
#indicator li i { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; }
#indicator li b { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background: #fff; border-radius: 50%; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; }
#indicator li span { display: none; position: absolute; top: -4px; right: 22px; width: 80px; height: 20px; border-radius: 3px; background: #fff; background:rgba(255,255,255,0.6) color:#000;
line-height: 20px; font-size: 12px; text-align: center; -webkit-animation: fadeIn 1s 0.1s both; -moz-animation: fadeIn 1s 0.1s both; animation: fadeIn 1s 0.1s both; }
#indicator li.act i { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
#indicator li.act b { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
/*#indicator li.act span{display:block;}*/




@-webkit-keyframes holeIn {  0% {
width:0;
height:0;
margin:0 0 0 0;
}
 100% {
width:343px;
height:449px;
margin:-225px 0 0 -172px;
}
}
@-moz-keyframes holeIn {  0% {
width:0;
height:0;
margin:0 0 0 0;
}
 100% {
width:343px;
height:449px;
margin:-225px 0 0 -172px;
}
}
@keyframes holeIn {  0% {
width:0;
height:0;
margin:0 0 0 0;
}
 100% {
width:343px;
height:449px;
margin:-225px 0 0 -172px;
}
}
 @-webkit-keyframes handIn {  0% {
-webkit-transform:translate3d(-100%, -100%, 0);
}
 100% {
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes handIn {  0% {
-moz-transform:translate3d(-100%, -100%, 0);
}
 100% {
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes handIn {  0% {
transform:translate3d(-100%, -100%, 0);
}
 100% {
transform:translate3d(0, 0, 0);
}
}
.slogan { position: absolute; top: 20%; left: 50%; width: 400px; margin-left: -580px; }
.slogan p { position: relative; padding: 60px 0 35px; color: #fff; font-size: 17px; }
.slogan p:after { content: ''; position: absolute; bottom: 0; left: 0; width: 58px; height: 2px; background-color: #fff; }
#page01 { background-color: #f47355; }
#page01 .main { display: none; position: absolute; top: 20%; left: 45%; width: 344px; height: 450px; margin-top: 80px; }
#page01 .main .hole { width: 343px; height: 449px; }
#page01 .main .hole { position: absolute; top: 50%; left: 50%; width: 343px; height: 449px; margin: -225px 0 0 -172px; overflow: hidden; -webkit-animation: holeIn 0.8s 0.1s ease both; -moz-animation: holeIn 0.8s 0.1s ease both; animation: holeIn 0.8s 0.1s ease both; }
#page01 .main .hole img { position: absolute; top: 50%; left: 50%; width: 343px; height: 449px; margin: -225px 0 0 -172px; }
#page01 .main .hand { position: absolute; top: 163px; left: 150px; width: 247px; height: 164px; overflow: hidden; }
#page01 .main:after { content: ''; position: absolute; top: 160px; left: 150px; width: 50px; height: 80px; background: url(../images/img_ys_hole_a.png) no-repeat; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation: fadeIn 0.1s 0.9s both; -moz-animation: fadeIn 0.1s 0.9s both; animation: fadeIn 0.1s 0.9s both; }
#page01 .main .hand img { position: absolute; top: 0; left: 0; -webkit-animation: handIn 1.2s 1s both; -moz-animation: handIn 1.2s 1s both; animation: handIn 1.2s 1s both; }
#page01 .main .qs { position: absolute; top: -77px; left: 328px; width: 569px; height: 570px; background: url(../images/img_ys_p1_qs.png) no-repeat; -webkit-animation: rightIn 1s 2.1s both; -moz-animation: rightIn 1s 2.1s both; animation: rightIn 1s 2.1s both; }
#page01 .main .client01 { position: absolute; top: 328px; left: -116px; width: 195px; height: 31px; background: url(../images/img_ys_p1_client01.png) no-repeat; -webkit-animation: bounceIn 0.6s 2.4s both; -moz-animation: bounceIn 0.6s 2.4s both; animation: bounceIn 0.6s 2.4s both; }
#page01 .main .client02 { position: absolute; top: 137px; left: -136px; width: 139px; height: 67px; background: url(../images/img_ys_p1_client02.png) no-repeat; -webkit-animation: bounceIn 0.6s 2.6s both; -moz-animation: bounceIn 0.6s 2.6s both; animation: bounceIn 0.6s 2.6s both; }
#page01 .main .client03 { position: absolute; top: 18px; left: -150px; width: 182px; height: 83px; background: url(../images/img_ys_p1_client03.png) no-repeat; -webkit-animation: bounceIn 0.6s 2.8s both; -moz-animation: bounceIn 0.6s 2.8s both; animation: bounceIn 0.6s 2.8s both; }
#page01 .main .client04 { position: absolute; top: -71px; left: 116px; width: 144px; height: 61px; background: url(../images/img_ys_p1_client04.png) no-repeat; -webkit-animation: bounceIn 0.6s 3s both; -moz-animation: bounceIn 0.6s 3s both; animation: bounceIn 0.6s 3s both; }
#page01 .main .client05 { position: absolute; top: 0; left: 321px; width: 105px; height: 82px; background: url(../images/img_ys_p1_client05.png) no-repeat; -webkit-animation: bounceIn 0.6s 3.2s both; -moz-animation: bounceIn 0.6s 3.2s both; animation: bounceIn 0.6s 3.2s both; }
#page01 .main .client06 { position: absolute; top: 161px; left: 310px; width: 107px; height: 90px; background: url(../images/img_ys_p1_client06.png) no-repeat; -webkit-animation: bounceIn 0.6s 3.4s both; -moz-animation: bounceIn 0.6s 3.4s both; animation: bounceIn 0.6s 3.4s both; }
#page01 .slogan h1 { width: 204px; height: 134px; margin-bottom: 45px; text-indent: -9999px; background: url(../images/img_ys_p1_title.png) no-repeat; overflow: hidden; -webkit-animation: fadeIn 1s 4s both; -moz-animation: fadeIn 1s 4s both; animation: fadeIn 1s 4s both; }
#page01 .slogan .a1 { -webkit-animation: leftIn 1s 4.5s both; -moz-animation: leftIn 1s 4.5s both; animation: leftIn 1s 4.5s both; }
#page01 .slogan .a2 { -webkit-animation: leftIn 1s 4.7s both; -moz-animation: leftIn 1s 4.7s both; animation: leftIn 1s 4.7s both; }
#page01 .slogan p { -webkit-animation: downIn 1s 5.3s both; -moz-animation: downIn 1s 5.3s both; animation: downIn 1s 5.3s both; }
#page01.animated .main { display: block; }
 @-webkit-keyframes cloud {  0% {
opacity:0;
-webkit-transform:translate3d(100px, 0, 0);
}
 25% {
opacity:0.5;
}
 49% {
opacity:0;
-webkit-transform:translate3d(0, 0, 0);
}
 56% {
opacity:0;
-webkit-transform:translate3d(80px, -50px, 0);
}
 75% {
opacity:0.45;
}
 100% {
opacity:0;
-webkit-transform:translate3d(-90px, -50px, 0);
}
}
@-moz-keyframes cloud {  0% {
opacity:0;
-moz-transform:translate3d(100px, 0, 0);
}
 25% {
opacity:0.5;
}
 49% {
opacity:0;
-moz-transform:translate3d(0, 0, 0);
}
 56% {
opacity:0;
-moz-transform:translate3d(80px, -50px, 0);
}
 75% {
opacity:0.45;
}
 100% {
opacity:0;
-moz-transform:translate3d(-90px, -50px, 0);
}
}
@keyframes cloud {  0% {
opacity:0;
transform:translate3d(100px, 0, 0);
}
 25% {
opacity:0.5;
}
 49% {
opacity:0;
transform:translate3d(0, 0, 0);
}
 56% {
opacity:0;
transform:translate3d(80px, -50px, 0);
}
 75% {
opacity:0.45;
}
 100% {
opacity:0;
transform:translate3d(-90px, -50px, 0);
}
}
 @-webkit-keyframes volcanoIn {  0% {
opacity:0;
-webkit-transform:translate3d(0, 80px, 0);
}
 100% {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
}
}
@-moz-keyframes volcanoIn {  0% {
opacity:0;
-moz-transform:translate3d(0, 80px, 0);
}
 100% {
opacity:1;
-moz-transform:translate3d(0, 0, 0);
}
}
@keyframes volcanoIn {  0% {
opacity:0;
transform:translate3d(0, 80px, 0);
}
 100% {
opacity:1;
transform:translate3d(0, 0, 0);
}
}
#page02 { background-color: #917189; }
#page02 .volcano { display: none; position: absolute; top: 0; left: 24%; z-index: 1; height: 100%; width: auto; -webkit-animation: volcanoIn 1s 0.1s both; -moz-animation: volcanoIn 1s 0.1s both; animation: volcanoIn 1s 0.1s both; }
#page02 .volcano img { height: 100%; }
#page02 .cloud01 { position: absolute; top: 35%; left: 28%; z-index: 2; -webkit-animation: cloud 16s linear 0.5s infinite both; -moz-animation: cloud 16s linear 0.5s infinite both; animation: cloud 16s linear 0.5s infinite both; }
#page02 .cloud02 { position: absolute; top: 45%; left: 85%; z-index: 2; width: 46px; height: auto; -webkit-animation: cloud 13s linear 2s infinite both; -moz-animation: cloud 13s linear 2s infinite both; animation: cloud 13s linear 2s infinite both; }
#page02 .cloud03 { position: absolute; top: 50%; left: 92%; width: 30px; height: auto; -webkit-animation: cloud 20s linear 5s infinite both; -moz-animation: cloud 20s linear 5s infinite both; animation: cloud 20s linear 5s infinite both; }
#page02 .cloud04 { position: absolute; top: 30%; left: 60%; width: 50px; height: auto; -webkit-animation: cloud 25s linear 8s infinite both; -moz-animation: cloud 25s linear 8s infinite both; animation: cloud 25s linear 8s infinite both; }
#page02 .qs { display: none; position: absolute; bottom: 0; left: 50%; z-index: 3; width: 483px; height: 626px; margin-left: -242px; -webkit-animation: downIn 1s 0.6s both; -moz-animation: downIn 1s 0.6s both; animation: downIn 1s 0.6s both; }
#page02 .slogan { display: none; }
#page02 .slogan h1 { width: 206px; height: 163px; margin-bottom: 45px; text-indent: -9999px; background: url(../images/img_ys_p2_title.png) no-repeat; overflow: hidden; -webkit-animation: fadeIn 1s 1.2s both; -moz-animation: fadeIn 1s 1.2s both; animation: fadeIn 1s 1.2s both; }
#page02 .slogan .a1 { -webkit-animation: leftIn 1s 1.7s both; -moz-animation: leftIn 1s 1.7s both; animation: leftIn 1s 1.7s both; }
#page02 .slogan .a2 { -webkit-animation: leftIn 1s 1.9s both; -moz-animation: leftIn 1s 1.9s both; animation: leftIn 1s 1.9s both; }
#page02 .slogan p { -webkit-animation: downIn 1s 2.5s both; -moz-animation: downIn 1s 2.5s both; animation: downIn 1s 2.5s both; }
#page02.animated .qs, #page02.animated .volcano, #page02.animated .slogan { display: block; }
#page03 { background-color: #54988c; }
#page03 .tree { display: none; position: absolute; bottom: 0; left: 50%; width: 1194px; height: 995px; margin-left: -330px; -webkit-animation: fadeIn 1s 0.1s both; -moz-animation: fadeIn 1s 0.1s both; animation: fadeIn 1s 0.1s both; }
#page03 .qs { display: none; position: absolute; bottom: 0; left: 50%; width: 531px; height: 625px; margin-left: -100px; -webkit-animation: rightIn 1s 0.6s both; -moz-animation: rightIn 1s 0.6s both; animation: rightIn 1s 0.6s both; }
#page03 .slogan { display: none; }
#page03 .slogan h1 { width: 236px; height: 131px; margin-bottom: 45px; text-indent: -9999px; background: url(../images/img_ys_p3_title.png) no-repeat; overflow: hidden; -webkit-animation: fadeIn 1s 1.4s both; -moz-animation: fadeIn 1s 1.4s both; animation: fadeIn 1s 1.4s both; }
#page03 .slogan .a1 { -webkit-animation: leftIn 1s 1.9s both; -moz-animation: leftIn 1s 1.9s both; animation: leftIn 1s 1.9s both; }
#page03 .slogan .a2 { -webkit-animation: leftIn 1s 2.1s both; -moz-animation: leftIn 1s 2.1s both; animation: leftIn 1s 2.1s both; }
#page03 .slogan p { -webkit-animation: downIn 1s 2.7s both; -moz-animation: downIn 1s 2.7s both; animation: downIn 1s 2.7s both; }
#page03.animated .qs, #page03.animated .tree, #page03.animated .slogan { display: block; }
 @-webkit-keyframes bird {  0% {
opacity:0;
-webkit-transform:translate3d(0, 0, 0) scale(1) rotate(0);
}
 25% {
-webkit-transform:translate3d(-9px, -3px, 0) scale(.75) rotate(10deg);
}
 50% {
opacity:1;
-webkit-transform:translate3d(6px, -6px, 0) scale(.5) rotate(-8deg);
}
 75% {
-webkit-transform:translate3d(-3px, -9px, 0) scale(.25) rotate(3deg);
}
 100% {
-webkit-transform:translate3d(0, -12px, 0) scale(0) rotate(0);
}
}
@-moz-keyframes bird {  0% {
opacity:0;
-moz-transform:translate3d(0, 0, 0) scale(1) rotate(0);
}
 25% {
-moz-transform:translate3d(-9px, -3px, 0) scale(.75) rotate(10deg);
}
 50% {
opacity:1;
-moz-transform:translate3d(6px, -6px, 0) scale(.5) rotate(-8deg);
}
 75% {
-moz-transform:translate3d(-3px, -9px, 0) scale(.25) rotate(3deg);
}
 100% {
-moz-transform:translate3d(0, -12px, 0) scale(0) rotate(0);
}
}
@keyframes bird {  0% {
opacity:0;
transform:translate3d(0, 0, 0) scale(1) rotate(0);
}
 25% {
transform:translate3d(-9px, -3px, 0) scale(.75) rotate(10deg);
}
 50% {
opacity:1;
transform:translate3d(6px, -6px, 0) scale(.5) rotate(-8deg);
}
 75% {
transform:translate3d(-3px, -9px, 0) scale(.25) rotate(3deg);
}
 100% {
transform:translate3d(0, -12px, 0) scale(0) rotate(0);
}
}
#page04 { background-color: #4e6d88; }
#page04 .main { display: none; position: absolute; bottom: 0; left: 50%; margin-left: -430px; width: 1000px; height: 50px; }
#page04 .main .hill { position: absolute; bottom: 330px; left: 390px; width: 910px; height: 173px; -webkit-animation: fadeIn 1s 0.1s both; -moz-animation: fadeIn 1s 0.1s both; animation: fadeIn 1s 0.1s both; }
#page04 .main .hill div { width: 910px; height: 173px; background: url(../images/img_ys_p4_hill.png) no-repeat; }
#page04 .main .hill img { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; }
#page04 .main .qs { position: absolute; bottom: 0; left: 0; width: 1101px; height: 629px; -webkit-animation: downIn 1s 0.8s both; -moz-animation: downIn 1s 0.8s both; animation: downIn 1s 0.8s both; }
#page04 .bird { position: absolute; top: 40px; left: 230px; -webkit-animation: bird 10s linear 0.6s infinite both; -moz-animation: bird 10s linear 0.6s infinite both; animation: bird 10s linear 0.6s infinite both; }
#page04 .bird1 { position: absolute; top: 30px; left: 210px; -webkit-animation: bird 8s linear 3s infinite both; -moz-animation: bird 8s linear 3s infinite both; animation: bird 8s linear 3s infinite both; }
#page04 .bird2 { position: absolute; top: 60px; left: 150px; -webkit-animation: bird 6s linear 5.5s infinite both; -moz-animation: bird 6s linear 5.5s infinite both; animation: bird 6s linear 5.5s infinite both; }
#page04 .slogan { display: none; }
#page04 .slogan h1 { width: 215px; height: 123px; margin-bottom: 45px; text-indent: -9999px; background: url(../images/img_ys_p4_title.png) no-repeat; overflow: hidden; -webkit-animation: fadeIn 1s 1.5s both; -moz-animation: fadeIn 1s 1.5s both; animation: fadeIn 1s 1.5s both; }
#page04 .slogan .a1 { -webkit-animation: leftIn 1s 2s both; -moz-animation: leftIn 1s 2s both; animation: leftIn 1s 2s both; }
#page04 .slogan .a2 { -webkit-animation: leftIn 1s 2.2s both; -moz-animation: leftIn 1s 2.2s both; animation: leftIn 1s 2.2s both; }
#page04 .slogan p { -webkit-animation: downIn 1s 2.8s both; -moz-animation: downIn 1s 2.8s both; animation: downIn 1s 2.8s both; }
#page04.animated .main, #page04.animated .slogan { display: block; }
 @-webkit-keyframes lineWidth {  0% {
width:0;
}
 100% {
width:100%;
}
}
@-moz-keyframes lineWidth {  0% {
width:0;
}
 100% {
width:100%;
}
}
@keyframes lineWidth {  0% {
width:0;
}
 100% {
width:100%;
}
}
#page05 { background-color: #373248; background-position: center center; background-repeat: no-repeat; }
#page05 b { display: none; position: absolute; top: 0; left: -10%; width: 120%; height: 100%; background: url(../images/img_ys_p5_bg.jpg) no-repeat center center; background-size: cover; -webkit-animation: fadeIn 1s 0.1s both; -moz-animation: fadeIn 1s 0.1s both; animation: fadeIn 1s 0.1s both; }
#page05 .main { display: none; position: absolute; top: 20%; left: 50%; width: 700px; margin-left: -350px; }
#page05 .main img { display: block; margin: auto; -webkit-animation: downIn 1s 0.1s both; -moz-animation: downIn 1s 0.1s both; animation: downIn 1s 0.1s both; }
#page05 .main a { position: relative; display: block; width: 210px; height: 50px; margin: 80px auto 0; *border-top:1px solid #fff;
*border-bottom:1px solid #fff;
line-height: 50px; text-align: center; color: #fff; box-shadow: 0 0 20px 5px rgba(0,0,0,0); -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: fadeIn 1s 0.7s both; -moz-animation: fadeIn 1s 0.7s both; animation: fadeIn 1s 0.7s both; }
#page05 .main a:before, #page05 .main a:after { content: ''; position: absolute; width: 100%; height: 1px; background: #fff; -webkit-animation: lineWidth 0.6s 1.6s both; -moz-animation: lineWidth 0.6s 1.6s both; animation: lineWidth 0.6s 1.6s both; }
#page05 .main a:before { top: 0; left: 0; }
#page05 .main a:after { right: 0; bottom: 0; }
#page05 .main a:hover { background: #fff; color: #000; box-shadow: 0 0 20px 5px rgba(0,0,0,0.2); }
#page05.animated .main, #page05.animated b { display: block; }