/*
  auther:f7
  date:2015.10
*/
 html, body, a, img { -webkit-user-select: none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout: none; -moz-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); -ms-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none;}


html{ font-family: "Lato", sans-serif;/* 1 */ -ms-text-size-adjust:100%;/* 2 */ -webkit-text-size-adjust:100%;/* 2 */}
html,
body,
.main { width:100%; height:100%;}
html,
body { overflow:hidden; -webkit-overflow-scrolling:auto;}
body { background:#000; font-family:"Microsoft YaHei";}
body { max-width:640px; margin:auto; position:relative;}
.scene { height:77%; position:relative;}


body.landscape { min-height:0; max-width:100%;}
body.landscape div,
body.landscape a { display:none !important;}
body.landscape .landscape { display:block !important; width:100%; height:100%; background:#000 url("../img/block.jpg") no-repeat center center;}


.scene-full { height:100%;}
.scene-scale .scene-con { opacity:0; -webkit-transform-origin: 50% 100%; -webkit-transform: translateY(20%) perspective(600px) rotateX(90deg); transform: translateY(20%) perspective(600px) rotateX(90deg);}


.main,
.scene,
.scene-con { -webkit-transition-duration:600ms; -moz-transition-duration:600ms; transition-duration:600ms;}
.scene-con { width:100%; height:100%; position:absolute; opacity:1; -webkit-transform:scale(1) translate(0, 0) perspective(0) rotateX(0deg); transform:scale(1) translate(0, 0) perspective(0) rotateX(0deg);}
.scene-photo { width:100%; height:100%;}
.scene-photo { background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
.scene-photo img,
.fengdi-text img { display:block; margin:auto; max-width:100%; max-height:100%;}

.scene-photo {
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;
  
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;
  
  display:-o-box;
  -o-box-orient:horizontal;
  -o-box-pack:center;
  -o-box-align:center;
  
  display:-ms-box;
  -ms-box-orient:horizontal;
  -ms-box-pack:center;
  -ms-box-align:center;
  
  display:box;
  box-orient:horizontal;
  box-pack:center;
  box-align:center;
}


/**/
.fengmian-logo img,
.fengmian-bigTitle img,
.fengmian-smallTitle img,
.tool img { display:block; width:100%;}


/**/
.fengmian-logo { position:absolute; top:5%; left:3%; width:18%;}

.fengmian-bigTitle { width:43%; position:absolute; left:2%; bottom:5%;}
.fengmian-smallTitle { width:50%; position:absolute; left:46%; bottom:7%;}
.fengmian-smallTitle img { margin-bottom:2px;}


/**/
.scene-text { color:#fff; padding:0 5%; position:absolute; width:90%; left:0; bottom:3%;}
.scene-big-title { font-size:20px; font-weight:bold; text-align:center;}
.scene-small-title { font-size:15px; font-weight:normal; text-align:center; color:#ddd;}
.scene-info { font-size:16px; color:#eee; padding:0 7%; line-height:160%;}
.fengdi-text { position:absolute; width:80%; left:10%; bottom:10%;}


.tool { position:absolute; bottom:6%; width:80%; left:10%; overflow:hidden; z-index:10; display:none;}
.share-but { width:18%; max-width:60px; float:left; margin-top:2%;}
.menu-but { width:12%; max-width:40px; float:right; background:url("../img/menu.png") no-repeat; background-size:100% 100%;}
.menu-but-close { background-image:url("../img/menu-close.png")}
.menu-but img { opacity:0;}


/**/
.move-shade { width:100%; height:100%; position:absolute; top:0; left:0; background:#000;}



@-webkit-keyframes moveToLeft {
  to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
  to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
  to { transform: translateX(-100%); }
}
.page-moveToLeft {
  -webkit-animation: moveToLeft 4s ease both;
  -moz-animation: moveToLeft 4s ease both;
  animation: moveToLeft 4s ease both;
}




.page-share { background:rgba(255,255,255,.8); box-shadow:0 2px 4px #666; position:absolute; top:0; left:0; width:100%; padding:1rem; display:none; z-index:12;}
.bshare-custom { width:100%; overflow:hidden;}
.page-share .bshare-custom.icon-medium-plus a { float:left; margin:3% 7%; width:50px; height:50px; padding-left:0;}
.page-share .bshare-custom a.bshare-qzone { background:url("../img/qzone.gif") no-repeat;}
.page-share .bshare-custom a.bshare-sinaminiblog { background:url("../img/sinaminiblog.gif") no-repeat;}
.page-share .bshare-custom a.bshare-douban { background:url("../img/douban.gif") no-repeat;}
.page-share .bshare-custom a.bshare-renren { background:url("../img/renren.gif") no-repeat;}
.page-share .bshare-custom a.bshare-qqmb { background:url("../img/qqmb.gif") no-repeat;}
.page-share .bshare-custom a.bshare-neteasemb { background:url("../img/neteasemb.gif") no-repeat;}




/**/
.page-menu { position:absolute; top:0; left:0; background:rgba(0,0,0,.9); width:100%; height:100%; z-index:9; display:none;}
.page-menu-con { width:90%; height:85%; margin:10% 0 0; overflow:hidden; position:relative; left:6%;}
.timeline-line { height:82%; width:0; border-left:2px dotted #ba945b; margin:7% 0 0 8%;}
.timeline-con { width:90%; position:absolute; top:0; left:8%; color:#fff;}

.timeline-text h1 { font-size:16px; font-weight:bold; color:#f7f7f7; margin:-15px 0 0; line-height:170%;}
.timeline-text h2 { font-size:12px; font-weight:normal; color:#a3a3a3; margin:0; line-height:170%;}
.timeline-text a { text-decoration:none;}
.timeline-item {
  margin-left:-5px; padding:7% 0;
  display:none;
  -webkit-animation-duration: 1.0s;
  animation-duration: 1.0s;
}
.timeline-item:after { display:block; clear:both; content:""; visibility:hidden; height:0;}
.timeline-dot { float:left; width:10px; height:10px; border-radius:50px; background:#f985f6;}
.timeline-year { margin-top:-5px; float:left; font-size:14px; color:#a2a2a2; width:40px; text-align:center;}
.timeline-text { float:left; margin-left:15px;}


/**/
.page-share-wx { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7) url("../img/share-wx.png") no-repeat center 0; background-size:80% auto; z-index:10; display:none;}


.music-but { position:absolute; top:5%; right:3%; z-index:11; width:30px; height:30px; margin-top:-5px;}
.music-play { background:url("../img/music-play.png") no-repeat;}
.music-pause { background:url("../img/music-pause.png") no-repeat;}
.music-play,
.music-pause { width:100%; height:100%; background-size:100% 100%; display:none;}









@media screen and (min-width:350px) {
  .page-share .bshare-custom.icon-medium-plus a { margin:3% 4%;}
  /*.timeline-line { margin-top:6%;}*/
}

@media screen and (max-height:500px) {/* 高度小于500时 */
  .timeline-item { padding:5% 0;}
}