@charset "gb2312";
*{margin:0;padding:0;list-style:none;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);}
ul,ol,li{list-style:none;}
img{margin: 0;padding: 0;border: none;}
html,body{width:100%;height:100%;overflow:hidden;-webkit-touch-callout: none !important;/*当触摸并按住触摸目标时，禁止系统默认菜单。*/}
body{font-family:"微软雅黑",'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;background: #fff;}

.wrap{width: 100%;height: 100%;overflow: hidden;}
.load{position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;z-index: 500;background: #fff;}
.load_poem{overflow: hidden;color: #000;font-style: italic;width: 100%;height: 100%;overflow: hidden;font-size: 34px;line-height: 70px;}
.load_poem_box{margin-top: 40%;width: 280px;margin-left: 235px;}
.loadnum{display: none;font-size: 30px;text-align: center;width: 100%;position: absolute;left: 0;bottom: 10%;}

.load_detail{width: 100%;height: 75%;overflow: hidden;background: #fff;margin-top: 20%;}
.load_pro{width: 100%;height: 120%;overflow: hidden;font-size: 30px;line-height: 60px;}
.load_pro.on{-webkit-animation: load_pro 10s linear forwards;animation: load_pro 10s linear forwards;}
.load_pro p{text-indent: 2em;width: 700px;margin-left: 25px;}
.load_pro p.title{padding-top: 20px;margin-top: 20px;background: url(../images/line.jpg) top center repeat-x;letter-spacing:-1px;}

.canvas_wrap{position: relative;width: 750px;height: 100%;overflow: hidden;}
#canvas{position: absolute;left: 0;top: 0;z-index: 90;}
.start{position:absolute;left: 50%;bottom: 40px;z-index: 100;width: 130px;height: 120px;background: url(../images/icon.png);margin-left: -65px;animation:start .4s steps(1) infinite;-webkit-animation:start .4s steps(1) infinite;}
.start.on{animation:none;-webkit-animation:none;background-position: 0 -120px;}

.cover{height: 100%;position: absolute;left: 0;top: 0;right: 0;overflow: hidden;background: url(../images/1.jpg);z-index: 95;background-size: 100% 100%;}
.music{background: url(../images/music_off.png);position: absolute;right: 20px;top: 20px;width: 104px;height: 110px;background-size: cover;z-index: 150;}
.music.on{background: url(../images/music_on.gif);}

.fc_btns{background: url(../images/btns.png);position: absolute;z-index: 100;width: 750px;height: 58px;bottom: 100px;left: 0;overflow: hidden;display: none;-webkit-animation: fc_btns 1s linear forwards;animation: fc_btns 1s linear forwards;}
.fc_btns>div{width: 224px;height: 58px;float: left;}
.pics{margin-left: 39px;}
.reload{float: right;}


@keyframes load_pro {
    0% {
        transform: translateY(900px);
    }
    100% {
        transform: translateY(-200px);
    }
}

@-webkit-keyframes load_pro {
    0% {
        -webkit-transform: translateY(900px);
    }
    100% {
        -webkit-transform: translateY(-200px);
    }
}

@keyframes fc_btns {
    0% {
        transform: translateY(200px);
    }
    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes fc_btns {
    0% {
        -webkit-transform: translateY(200px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}

@keyframes start{
    0%{background-position:0px 0px}
    50%{background-position:0px -120px}
    100%{background-position:0px 0px}
}

@-webkit-keyframes start{
    0%{background-position:0px 0px}
    50%{background-position:0px -120px}
    100%{background-position:0px 0px}
}