body{ font-family: MicrosoftYaHei; } .main { background: url(../img/bg.png) no-repeat; background-size: 100% 100%; width: 1280px; height: 645px; position: relative; font-size: 0; } .main2{ position: absolute; top: 644px; left: 0; width: 1280px; background-color: #1E202F; height: 40px; } .logo{ width: 79px; height: 80px; position: absolute; left: 48px; top: 29px; } .mTtile{ position: absolute; left: 143px; top: 49px; font-size: 28px; line-height: 28px; font-weight: bold; color: #5DD9E1; } .fireflyImg{ width: 477px; height: 485px; position: absolute; top: 89px; left: 129px; } .firefly{ background: url(../img/newbigbg.png) no-repeat; background-size: 100% 100%; width: 477px; height: 485px; position: absolute; top: 89px; left: 129px; z-index: 10; } .fireflyBack{ width: 50px; height: 44px; z-index: 20; position: absolute; left: 0; top: 70px; } .fireflyTitle{ position: absolute; left: 14px; top: 70px; font-size: 30px; line-height: 30px; font-weight: bold; color: #5DD9E1; z-index: 30; } .fireflyNum{ position: absolute; left: 0; top: 157px; width: 100%; text-align: center; font-size: 100px; line-height: 100px; color: #FFF; font-weight: bold; text-shadow: 0 0 0, 0 0 0.3em; } .fireflyInfo{ position: absolute; top: 294px; left: 50%; width: 340px; height: 88px; margin-left: -170px; font-size: 0; } .fireflyDesc{ position: absolute; width: 50%; left: 0; top: 0; font-size: 0; } .fireflyDesc2{ left: 50%; } .fireflyDesc p{ font-size: 26px; line-height: 29px; color: #64ADDB; font-weight: bold; width: 100%; text-align: center; } .fireflyDesc p:nth-child(2){ margin-top: 26px; font-size: 28px; line-height: 28px; color: #F93E7A; } .fireflyDesc p img{ width: 17px; height: 24px; margin-right: 12px; vertical-align: middle; margin-top: -5px; } .fireflyDesc p.blue{ color: #73fbac; } .fireflyLine{ width: 8px; height: 73px; position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: -36.5px; z-index: 10; } .smallBg{ width: 253px; height: 256px; position: absolute; top: 39px; left: 658px; background: url(../img/FTbg.png) no-repeat; background-size: 100% 100%; z-index: 10; } .smallBg.MTBox{ background: url(../img/mtskbg.png) no-repeat; background-size: 100% 100%; top: 326px; left: 657px; } .smallBg.SKBox{ background: url(../img/mtskbg.png) no-repeat; background-size: 100% 100%; top: 186px; left: 910px; } .FtImg{ width: 251px; height: 254px; position: absolute; top: 39px; left: 658px; } .MTImg{ width: 251px; height: 254px; position: absolute; top: 326px; left: 657px; } .SKImg{ width: 251px; height: 254px; position: absolute; top: 186px; left: 910px; } .mBoxTitle{ position: absolute; left: 22px; top: 31px; font-size: 28px; line-height: 28px; color: #DF2E73; font-weight: bold; z-index: 10; } .mBoxNum{ position: absolute; left: 0; top: 71px; font-weight: bold; color: #FFF; font-size: 55px; line-height: 55px; width: 100%; text-align: center; } .mBoxInfo{ position: absolute; left: 0; top: 142px; width: 100%; height: 100px; font-size: 0; } .mBoxInfoCon{ position: relative; left: 50%; float: left; } .mBoxInfo p{ position: relative; left: -50%; height: 35px; line-height: 35px; font-size: 0; text-align: left; } .mBoxInfo p font{ font-size: 18px; font-weight: bold; color: #64ADDB; vertical-align: 2px; } .mBoxInfo p img{ width: 17px; height: 24px; margin: 0 7px 0 15px; vertical-align: -2px; } .mBoxInfo p span{ font-size: 20px; color: #F93E7E; font-weight: bold; } .mBoxInfo p.blue span{ color: #73fbac; } .breathe { -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: breathe; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; overflow: hidden; border-radius: 50%; } .breathe2{ animation-delay:2000ms; } .breathe3 { -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: breathe2; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; overflow: hidden; border-radius: 50%; } @-webkit-keyframes breathe { 0% { box-shadow: 0 1px 2px #E62E74; } 100% { box-shadow: 0 1px 15px #E62E74; } } @-webkit-keyframes breathe2 { 0% { box-shadow: 0 1px 2px rgba(63, 249, 220, 0.1); } 100% { box-shadow: 0 1px 35px rgba(63, 249, 220, .6); } }