/*
  auther:F7
  date:2016.2
*/
 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:#fff; font-family:"Heiti SC",Helvetica;}
body { max-width:640px; margin:auto; position:relative;}
html {font-size:62.5%;line-height:1.8;}
body {font-size:1.4rem;}
.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 { display:none;}
.scene-scale .scene-con { opacity:0;}

.scene-hide { display:none !important;}

.main,
.scene,
.scene-con { -webkit-transition-duration:600ms; -moz-transition-duration:600ms; transition-duration:600ms;}
.scene-con { width:100%; height:100%; overflow:hidden; 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-middle {
  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;
}


/**/
.loading { width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999; background:#fff; background-size:100% auto;}
.loading img { width:48%; margin:45% 0 0;}

.loading-bg { width:100%; height:100%; position:absolute; left:0; top:0;}
.loading-bg img { width:100%; height:100%; margin:0;}

.loading .percent { text-align:center; position:relative; line-height:2.6em; font-size:1.4em; color:#ff5300;}
.loading .percent em { display:block; font-style:normal;}

.loading .schedule { width:70%; margin:auto; position:relative;}
.loading .filler { background-color:#ff5300;}
.schedule { height:20px; background:#ddd; overflow:hidden; border-radius:16px; -webkit-border-radius:16px; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);}

.filler { -webkit-animation:progress-bar-stripes 2s linear infinite; background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size:40px 40px; background-color:#5bc0de; float:left; height:100%; color:#fff; box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition:width 0.6s ease;}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

/**/
.music-but { position:absolute; top:3%; right:5%; z-index:11; width:15%; display:none;}
.scene .music-but { display:block;}
.music-play,
.music-pause { display:none;}

/**/
.sharelogo { width:100%; height:100%; position:absolute; top:200%; left:200%;}

/**/
.page { position:fixed; left:0; bottom:2%; width:100%; z-index:100; display:block; text-align:center;}
.pageBut { margin:13px auto; height:14px; width:auto;}
.pageBut img { height:100%; width:auto; margin:auto;}
.reverse-page { transform: rotate(180deg);}

.motion-animate-up-down {
    -webkit-animation: animate-up-down 1s infinite ease-in-out;
    -moz-animation: animate-up-down 1s infinite ease-in-out;
    animation: animate-up-down 1s infinite ease-in-out;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}
@-webkit-keyframes animate-up-down {
    0% {opacity: 1;-webkit-transform: translate(0,-5px);}
    100% {opacity: 1;-webkit-transform: translate(0,5px);}
}
@-moz-keyframes animate-up-down {
    0% {opacity: 1;-moz-transform: translate(0,-5px);}
    100% {opacity: 1;-moz-transform: translate(0,5px);}
}
@keyframes animate-up-down {
    0% {opacity: 1;transform: translate(0,-5px);}
    100% {opacity: 1;transform: translate(0,5px);}
}
.motion-animate-opacity-0 {
    -webkit-animation: animate-opacity-0 1s infinite ease-in-out;
    -moz-animation: animate-opacity-0 1s infinite ease-in-out;
    animation: animate-opacity-0 1s infinite ease-in-out;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}
@-webkit-keyframes animate-opacity-0 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes animate-opacity-0 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes animate-opacity-0 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/**/
.main-bg { background:#fff;}
.main-box { width:100%; height:100%;}
.main img { width:100%; height:100%; display:block;}
.page-but { display:none; width:12%; position:absolute; left:44%; bottom:4%;}

.up-btn-animate {
    -webkit-animation:upBtnAnimate 1.5s ease-in-out infinite;
    -moz-animation:upBtnAnimate 1.5s ease-in-out infinite;
    animation:upBtnAnimate 1.5s ease-in-out infinite;
}

/**/
.c-logo { width:42%; position:absolute; left:6%; top:4%;}
.c-elems span { display:block;}
.c-font-1 { width:77%; position:absolute; left:13%; top:15%;}
.c-font-2 { width:72%; position:absolute; left:14%; top:32%;}
.c-cloud-1 { width:55%; position:absolute; right:0; top:0;}
.c-cloud-2 { width:55%; position:absolute; left:0; top:31%;}
.c-button { width:100%; position:absolute; left:0; top:0;}
.c-bottom { width:100%; position:absolute; left:0; bottom:0;}

/**/
.p1 span { display:block; width:100%; position:absolute; left:0; top:0;}
.p1-txt p { width:70%; position:absolute; left:16.7%; top:20.5%; font-size:1.9rem; word-break:break-all; }

/**/
.p2-con { width:100%; position:absolute; left:0; top:0;}
.p2-con span { display:block;}
.p2-con-txt,
.p2-con-but { position:absolute; left:0; top:0;}

.mess-box { width:92%; height:405px; position:absolute; left:4%; top:50%; margin-top:-200px; background-color:#fafafa; border-radius:6%;}
.mess-box-txt { height:345px; overflow:hidden; margin:20px; padding:10px; background-color:#eee; border-radius:3%; -moz-box-shadow:-5px 5px 5px #ccc inset; -webkit-box-shadow:-5px 5px 5px #ccc inset; box-shadow:-5px 5px 5px #ccc inset; }
.mess-box-txt p { margin:0; }
.mess-box-txt em { font-style:normal; color:#2f57a8; font-weight:bold;}
.mess-box-ico { height:42px; position:absolute; left:50px; bottom:-42px;}
.mess-box-ico img { width:auto; height:100%;}

.articel-scroll { position:absolute; z-index:1; top:0; bottom:0; left:0; width:100%; overflow:hidden;}
.scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 96%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

/**/
.train { width:200px; height:60px; position:absolute; left:50%; top:50%; margin:-30px 0 0 -140px; z-index:99; background:url("../img/ico_train_spirt.png") no-repeat; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: 'translateX(0px)'; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}
.train-station img { display:block; width:100%; height:100%;} 
.train-station .mfp-close { display:none;}
.train-station-txt { display:block; position:absolute; left:0; top:0;}

.train-flipx { background-position:0 -60px;}


.g20-logo { width:42%; position:absolute; left:6%; top:4%;}

.g20-world-map { width:3292px; height:2048px; overflow:hidden; position:absolute; left:0; top:0;  background:url("../img/map.png") no-repeat;}

.train-move {
  -webkit-animation-name: train-slow;
  -webkit-animation-duration: 950ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps(1, start);
  -moz-animation-name: train-slow;
  -moz-animation-duration: 950ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: steps(1, start)
}
.train-move-flipx {
  -webkit-animation-name: train-slow-flipx;
  -webkit-animation-duration: 950ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps(1, start);
  -moz-animation-name: train-slow-flipx;
  -moz-animation-duration: 950ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: steps(1, start)
}

.train-pause { -webkit-animation-play-state: paused;}

.s-board { width:53%; height:120px; position:absolute; left:32%; top:23%; background-color:#eeeeef; border-radius:10%;}
.s-board-txt { margin:10% 0 10% 10%;}
.s-board-txt em { font-style:normal; font-weight:bold; color:#06599f;}
.s-board-bot { display:block; height:25px; position:absolute; left:12%; bottom:-25px;}
.s-board-bot img { width:auto; height:100%;}

.g20-mask { width:100%; height:100%; background-color:#fff; opacity:0; position:absolute; left:0; top:0; display:none; z-index:99;}


/**/
.share-but { width:18%; max-width:114px; position:absolute; right:4%; top:4%;}
.goback-but { width:18%; max-width:114px; position:absolute; left:4%; top:4%;}

.fllow-but-hqzx { width:28%; position:absolute; left:16%; bottom:22%;}
.fllow-but-zhw { width:28%; position:absolute; right:16%; bottom:22%;}

/**/
.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:121;}
.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;}

.bdsharebuttonbox { width:100%; overflow:hidden;}
.page-share .bdsharebuttonbox a { float:left; margin:3% 7%; width:50px; height:50px; padding-left:0;}
.page-share .bdsharebuttonbox a.bds_qzone { background:url("../img/qzone.gif") no-repeat;}
.page-share .bdsharebuttonbox a.bds_tsina { background:url("../img/sinaminiblog.gif") no-repeat;}
.page-share .bdsharebuttonbox a.bds_douban { background:url("../img/douban.gif") no-repeat;}
.page-share .bdsharebuttonbox a.bds_renren { background:url("../img/renren.gif") no-repeat;}
.page-share .bdsharebuttonbox a.bds_tqq { background:url("../img/qqmb.gif") no-repeat;}
.page-share .bdsharebuttonbox a.bds_h163 { background:url("../img/neteasemb.gif") no-repeat;}

.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 20px; background-size:60% auto; z-index:10; display:none;}

.music {position:absolute;right:5px;top:15px;width:40px;height:40px;background-repeat:no-repeat;background-size:contain;background-position:50% 50%; z-index:5;overflow:hidden;}
.music.on {background-image:url("../img/play.png");}
.music.off {background-image:url("../img/stop.png");}

/**/
@media screen and (max-width:360px) {/* 宽度小于360时 */

}

@media screen and (max-height:603px) {/* 高度小于600时 */

}

@media screen and (max-height:530px) {/* 高度小于530时 */

}

@media screen and (max-height:490px) {/* 高度小于490时 */

}

/**/
@-webkit-keyframes train-slow {
  0% { background-position: -1000px -0px }
  10% { background-position: -800px -0px }  
  20% { background-position: -600px -0px }
  30% { background-position: -400px -0px }
  40% { background-position: -200px -0px }
  50% { background-position: 0 -0px }
  60% { background-position: -800px -0px }
  70% { background-position: -600px -0px }
  80% { background-position: -400px -0px }
  90% { background-position: -200px -0px } 
  100% { background-position: 0 -0px } 
}

@-moz-keyframes train-slow {
  0% { background-position: -0px -0px }
  10% { background-position: -200px -0px }  
  20% { background-position: -400px -0px }
  30% { background-position: -600px -0px }
  40% { background-position: -800px -0px }
  50% { background-position: -1000px -0px }
  60% { background-position: -800px -0px }
  70% { background-position: -600px -0px }
  80% { background-position: -400px -0px }
  90% { background-position: -200px -0px } 
  100% { background-position: 0 -0px }   
}

/**/
@-webkit-keyframes train-slow-flipx {
  0% { background-position: -1000px -60px }
  10% { background-position: -800px -60px }  
  20% { background-position: -600px -60px }
  30% { background-position: -400px -60px }
  40% { background-position: -200px -60px }
  50% { background-position: 0 -60px }
  60% { background-position: -800px -60px }
  70% { background-position: -600px -60px }
  80% { background-position: -400px -60px }
  90% { background-position: -200px -60px } 
  100% { background-position: 0 -60px } 
}

@-moz-keyframes train-slow-flipx {
  0% { background-position: -0px -60px }
  10% { background-position: -200px -60px }  
  20% { background-position: -400px -60px }
  30% { background-position: -600px -60px }
  40% { background-position: -800px -60px }
  50% { background-position: -1000px -60px }
  60% { background-position: -800px -60px }
  70% { background-position: -600px -60px }
  80% { background-position: -400px -60px }
  90% { background-position: -200px -60px } 
  100% { background-position: 0 -60px }   
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-webkit-keyframes upBtnAnimate {
    0% {opacity: 0;}
    50% {opacity: 0.8;}
    100% {opacity: 0;-webkit-transform: translate3d(0px, -15px, 0px);-moz-transform: translate3d(0px, -15px, 0px);transform: translate3d(0px, -15px, 0px);}
}
@-moz-keyframes upBtnAnimate {
    0% {opacity: 0;}
    50% {opacity: 0.8;}
    100% {opacity: 0;-webkit-transform: translate3d(0px, -15px, 0px);-moz-transform: translate3d(0px, -15px, 0px);transform: translate3d(0px, -15px, 0px);}
}
@keyframes upBtnAnimate {
    0% {opacity: 0;}
    50% {opacity: 0.8;}
    100% {opacity: 0;-webkit-transform: translate3d(0px, -15px, 0px);-moz-transform: translate3d(0px, -15px, 0px);transform: translate3d(0px, -15px, 0px);}
}