html,body,div,p,span,h1,h2,h3,h4,p,a, em,font,img,strong,dl,dt,dd,ul,li{margin:0; padding:0; font-family:"Microsoft YaHei";} html,body{height:100%; font-size:12px;} ul,ol{list-style:none;} ul li{list-style-type:none;} img{border:0;} em,i{font-style:normal;} .f_r,.fr{float:right;} .f_l,.fl{float:left;} canvas { cursor:crosshair; display:block;} .mubu{ background:url(../images/mubu_1_s.jpg) no-repeat top center; min-width:960px;height:99.9%;} .mubu_main{ width:960px; margin:0 auto; text-align:center; padding-top:300px; } .mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;} .mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;} .mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;} .mubu_main p.into{ margin-top:50px; height:120px;} .mubu_top{ background:url(../images/mubu_2_s.png) no-repeat top center; position:fixed; top:0; left:0; height:150px; width:100%;} .mubu_left{ background:url(../images/mubu_left_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; left:-720px; -webkit-animation:mubu_dh_1 5s linear; animation:mubu_dh_1 8s linear forwards; display:none\9;} .mubu_right{ background:url(../images/mubu_right_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; right:-720px; -webkit-animation:mubu_dh_2 5s linear; animation:mubu_dh_2 8s linear forwards; display:none\9;} @-webkit-keyframes mubu_dh_1 { 0%{left:0;} 75% { left:-540px; opacity:100;} 100% { left:-720px; opacity:0; display:none;} } @keyframes mubu_dh_1 { 0% { left:0;} 75% { left:-540px; opacity:100;} 100% { left:-720px; opacity:0; display:none;} } @-webkit-keyframes mubu_dh_2 { 0% { right:0;} 75% { right:-540px; opacity:100;} 100% { right:-720px; opacity:0; display:none;} } @keyframes mubu_dh_2 { 0% { right:0;} 75% { right:-540px; opacity:100;} 100% { right:-720px; opacity:0; display:none;} } .mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:300px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;} .mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:250px; left:25%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;} .mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:250px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;} @media (min-width:1440px){ .mubu{ background:url(../images/mubu_1.jpg) no-repeat top center; height:99.9%;} .mubu_main{ width:1150px; margin:0 auto; text-align:center; padding-top:300px; } .mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;} .mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;} .mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;} .mubu_main p.into{ margin-top:50px; height:120px;} .mubu_top{ background:url(../images/mubu_2.png) no-repeat top center; position:fixed; top:0; left:0; height:200px; width:100%;} .mubu_left{ background:url(../images/mubu_left.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0;left:-960px; -webkit-animation:mubu_dh_1 5s ease-in; animation:mubu_dh_1 8s linear forwards; display:none\9;} .mubu_right{ background:url(../images/mubu_right.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0; right:-960px; -webkit-animation:mubu_dh_2 5s ease-in; animation:mubu_dh_2 8s linear forwards; display:none\9;} @-webkit-keyframes mubu_dh_1 { 0% { left:0;} 75% { left:-720px; opacity:100;} 100% { left:-960px; opacity:0; display:none;} } @keyframes mubu_dh_1 { 0% { left:0;} 75% { left:-720px; opacity:100;} 100% { left:-960px; opacity:0; display:none;} } @-webkit-keyframes mubu_dh_2 { 0% { right:0;} 75% { right:-720px; opacity:100;} 100% { right:-960px; opacity:0; display:none;} } @keyframes mubu_dh_2 { 0% { right:0;} 75% { right:-720px; opacity:100;} 100% { right:-960px; opacity:0; display:none;} } .mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:450px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite;} .mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:350px; left:30%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite;} .mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:400px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite;} } /*ΡΜ»¨*/ @keyframes fireworksfn{ 0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)} 50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)} 100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)} } @-moz-keyframes fireworksfn{ 0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)} 50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)} 100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)} } @-webkit-keyframes fireworksfn{ 0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)} 50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)} 100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)} } @-o-keyframes fireworksfn{ 0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)} 50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)} 100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)} }