html,body{margin:0; padding:0;}
body{
    font:normal 14px/1.5 "Microsoft Yahei","Lucida Grande",Tahoma,Verdana,STXihei,hei;
    background-color: #000;
}
ul,ol,li,em,p,span,h1,h2{margin:0; padding:0; font-weight:normal; list-style:none; font-style:normal}
a{text-decoration: none; color: #366; -webkit-tap-highlight-color:rgba(255,0,0,0);}
:focus {outline: 0;}
.show {display: block !important;}
.hide {display: none !important;}


/*loading page*/
.loadpage{position:fixed; width:100%; height:100%; left:0; top:0;z-index:100;
    background:#000 url(paper-logo.svg) no-repeat center 90%;
    -webkit-background-size: 50px auto;
    background-size: 50px auto;
}
.loader {
    position: absolute; left: 50%; top: 40%; margin-left: -15px;
    width:30px; height: 30px;
    background:transparent url(loading.png) no-repeat left top;
    background-size: 30px;
    -webkit-animation:rolling 3s linear infinite;
    animation:rolling 3s linear infinite;
}
.loadtips {
    position: absolute; width: 100%; left: 0; top: 50%; text-align: center;
    font-size: 14px; color: #847465;
}

.tonext {
    background:transparent url(arrow.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute; left:50%; margin-left: -30px; bottom: 10px; z-index: 200;
    width: 60px;
    height: 30px;
    opacity: 0;
    -webkit-animation:nextbtn infinite 3s ease 4s;
    animation:nextbtn infinite 3s ease 4s;
}


/* active-info */
.active-info{position:fixed; right:20px; top:20px; z-index:200; width:30px; height: 30px;}
.bgaudio a {visibility: hidden; width:30px; height: 30px; overflow: hidden; background: transparent url(icon-play.png) 0 0 no-repeat; -webkit-background-size: 30px; background-size: 30px;}
.bgaudio .active {display: block; visibility: visible;}
#mute-btn {opacity: 0.2;}
#play-btn {opacity: 0.6;}

/* main */
.container{
    width: 100%;
    background: transparent url(../img/bg.jpg) repeat-y 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
#scroller{position: relative;}

.cover {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.imgwrap {width: 100%;}
.cover img,
.imgwrap img {width: 100%; vertical-align: top;}
.imgwrap p {
    padding: 5px 15px 5px; color: #fff; font-size: 14px;
    background-color: #d3ccb5;
}
.bcover {
    position: relative; overflow: hidden;
}
.bcover .logo {
    display: block; margin-top: 100px;
    width: 100%; height: 40px;
    padding: 30px 0;
    background: transparent url(../img/paper-logo.png) no-repeat center top;
    -webkit-background-size:auto 40px;
    background-size: auto 40px;
}

.poem {
    padding: 50px 30px;
}
.poem .title {margin-bottom: 20px;}
.poem h1 {font-size: 24px; font-weight: bold;}
.poem h2 {font-size: 16px; font-weight: bold; text-align: right;}
.poem p {font-size: 16px; line-height: 1.6em;}

@media screen and (min-width: 700px) {
    .container{margin: 0 auto;}
}

@-webkit-keyframes rolling{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(-360deg);}
}
@keyframes rolling{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}

@-webkit-keyframes rollinner{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes rollinner{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

@-webkit-keyframes nextbtn{
    0% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:0;}
}
@keyframes nextbtn{
    0% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:0;}
}