@charset "UTF-8";

body {font-family:Microsoft Yahei, STHeiti, Droid Sans Fallback, Sans-serif; font-size:16px; font-weight:normal; color:#333; background:url(../images/bg_body.jpg) repeat;}
* {margin:0; padding:0; border:0;}
ul,ol,li{ list-style: none;}
a{ text-decoration:none; color:#5d0202;outline:none;}
a:hover{ text-decoration:none; color:#5d0202;}
img{ vertical-align:middle;}
section{ display:block;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear{clear:both; font-size:0; height:0; line-height:0; overflow:hidden;}

.main{width:100%; max-width:480px; height:100%; overflow: hidden; position:relative; margin:0 auto;}
.page{ width:100%; height:100%; font-size:1em; overflow:hidden; position:relative;}

/* 改变动画的效果方式*/
* {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

/*箭头指示引导1*/
.arrow  { position:absolute; top:96%; left:50%; margin:-10px 0 0 -20px; z-index:20;width:40px; height:22px; background:url(../images/arrow.png) no-repeat; background-size:100% auto;
-webkit-animation: start 1.5s infinite ease-in-out;
     -moz-animation: start 1.5s infinite ease-in-out;
          animation: start 1.5s infinite ease-in-out;
}

@-webkit-keyframes start {
    0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
    0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
    0%,30% {opacity: 0;transform: translate(0,10px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,-8px);}
}

/*箭头指示引导2*/
.arrow2{ position:absolute; top:95%; left:50%; margin:-10px 0 0 -20px;z-index:20; width:40px; height:22px; background:url(../images/arrow2.png) no-repeat; background-size:100% auto;
-webkit-animation: start2 1.5s infinite ease-in-out;
     -moz-animation: start2 1.5s infinite ease-in-out;
          animation: start2 1.5s infinite ease-in-out;
}

@-webkit-keyframes start2 {
    0%,30% {opacity: 0;-webkit-transform: translate(0,-8px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,10px);}
}
@-moz-keyframes start2 {
    0%,30% {opacity: 0;-moz-transform: translate(0,-8px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,10px);}
}
@keyframes start2 {
    0%,30% {opacity: 0;transform: translate(0,-8px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,10px);}
}

#loading{width:100%; height:100%; background:#000; opacity:0.5; text-align:center; position:fixed; top:0; left:0; z-index:1000;}

/* page1 */
#page1{ background:url(../images/bg_01.png) right center no-repeat; background-size:auto 100%; position: relative;}
.logo{ height:140px; padding-bottom:10%; text-align:left;}
.logo img{width:175px; margin-top:-200px; margin-left:-200px; opacity:0;}
.date{ height:120px; padding-bottom:20px; text-align:center;}
.date img{ width:80%; max-width:290px; opacity:0;}
.content_p1{}
.content_p1 .h1{ height:25px; font-weight:normal; color:#323a47; text-align:center;}
.content_p1 .h1 img{height:100%; margin-left:-300%; vertical-align:top;}
#page1 .btn_play{ width:96px; height:18px; outline:none; border:none; position:absolute; top:82%; left:50%; margin-left:-48px;}
#page1 .btn_play img{ width:100%; -webkit-transform:scale(0); -moz-transform:scale(0); vertical-align:top;}
#page1 .btn_play.active img{
	-webkit-transition: -webkit-transform .5s 2.5s;
    -moz-transition: -moz-transform .5s 2.5s;
    transition: transform .5s 2.5s;
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
            transform:scale(1);
}
.songname{width:100%; height:20px; font-size:1em; color:#323a47; text-align:center; -webkit-transform:scale(0); -moz-transform:scale(0); position:absolute; top:88%; left:0;}
.songname.active {
	-webkit-transition: -webkit-transform .5s 2.8s;
    -moz-transition: -moz-transform .5s 2.8s;
    transition: transform .5s 2.8s;
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
            transform:scale(1);
}

#page2, #page3, #page4, #page5, #page6, #page7, #page8, #page9, #page10 { position:relative; }
.tici{width:100px; position:absolute; top:50%; right:-300px;}
.tici img{width:100%;}
.logo_bodhi{width:100%; border-bottom:3px solid #bd4e40; text-align:center;}
.logo_bodhi img{ width:100%;}
.daoyu{ width:80%; padding-top:10px; border-top:1px solid #bd4e40; font-size:18px; line-height:28px; color:#323a47; position:absolute; bottom:10%; left:-200%;}
.daoyu span{width:11px; height:11px; background:#bd4e40; position:absolute; left:0; top:-6px;}
.gohome{width:80%; min-height:40px; padding:10%;}
.gohome li{width:50%; float:left;}
.gohome li img{height:40px; outline:none; border:none;}
.jiemi{width:80%; margin:0 auto; text-align:left;}
.share_tips{ width:100%; height:100%; margin:0; padding:0; position:fixed; top:0; left:0; z-index:100; background:#000; -webkit-opacity:0.7; -moz-opacity:0.7; opacity:0.7; text-align:right; display:block;}
.share_tips img{width:70%; margin:10px 5px 0 0;}
.music_play{ width:23px; height:26px; background:url(../images/open.png) no-repeat; background-size:100% auto; outline:none; border:none; position:fixed; top:10px; right:10px; z-index:99; display:none;}
.music_play.pause{ width:23px; height:26px; background:url(../images/close.png) no-repeat; background-size:100% auto;}

.device {
  width: 100%;
  height: 360px;
  padding:20px 0 100px;
  position: relative;
}
.swiper-container {
  height: auto;
  width: 100%;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../images/dot.png) no-repeat; background-size:100% 100%;
  margin: 0 8px;
  cursor: pointer;
}
.swiper-active-switch {
  background: url(../images/dot2.png) no-repeat; background-size:100% 100%;
}

@media screen and (max-height:480px){
.logo { padding-bottom:0; }
.tici{ width:80px; top:55%;}
.device {padding:10px 0 40px;}
}