/*
  auther:f7
  date:2017.2
*/

html,body { width:100%; height:100%; margin:0; overflow:hidden; -webkit-text-size-adjust:none;}

body { background:url('../img/bg.jpg') no-repeat 0 0; background-size:cover;}
.portrait { background-image:url('../img/bg-portrait.jpg'); background-position: 0 0;}

#touchConsole { width:100%; height:100%; position:fixed; top:0; left:0; z-index:10;}

.magazine-viewport { overflow:visible!important; }

.slide-prompt { width:7%; position:absolute; right:20%; bottom:6%; transform:scale(.85);}
.slide-prompt img { display:block; width:100%;}
.slide-prompt div { width:100%; height:100%;}
.portrait .slide-prompt { transform:rotate(90deg) scale(1.4); -moz-transform:rotate(90deg) scale(1.4); -webkit-transform:rotate(90deg) scale(1.4); left:8%; right:auto; bottom:13%;}

.motion-animate-left-right {
    -webkit-animation: animate-left-right 1s infinite ease-in-out;
    -moz-animation: animate-left-right 1s infinite ease-in-out;
    animation: animate-left-right 1s infinite ease-in-out;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; /* Safari 和 Chrome */

}
@-webkit-keyframes animate-left-right {
    0% {opacity: 1;-webkit-transform: translate(5px,0);}
    100% {opacity: 1;-webkit-transform: translate(-5px,0);}
}
@-moz-keyframes animate-left-right {
    0% {opacity: 1;-moz-transform: translate(5px,0);}
    100% {opacity: 1;-moz-transform: translate(-5px,0);}
}
@keyframes animate-left-right {
    0% {opacity: 1;transform: translate(5px,0);}
    100% {opacity: 1;transform: translate(-5px,0);}
}
.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;}
}

.motion-animate-rotate {
    -webkit-animation: animate-rotate 1s infinite ease-in-out;
    -moz-animation: animate-rotate 1s infinite ease-in-out;
    animation: animate-rotate 1s infinite ease-in-out;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}
@-webkit-keyframes animate-rotate {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes animate-rotate {
    0% {-moz-transform:rotate(0deg);}
    100% {-moz-transform:rotate(360deg);}
}
@keyframes animate-rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

.motion-animate-opacity-fudiao {
    -webkit-animation: animate-opacity-fudiao 1s infinite ease-in-out;
    -moz-animation: animate-opacity-fudiao 1s infinite ease-in-out;
    animation: animate-opacity-fudiao 1s infinite ease-in-out;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}
@-webkit-keyframes animate-opacity-fudiao {
    0% {opacity: .4;}
    100% {opacity: 0;}
}
@-moz-keyframes animate-opacity-fudiao {
    0% {opacity: .4;}
    100% {opacity: 0;}
}
@keyframes animate-opacity-fudiao {
    0% {opacity: .4;}
    100% {opacity: 0;}
}


/**/
.p12-gif { position:absolute;  top:18.5%; left:17%; width:71%; }
.p15-gif { position:absolute;  bottom:6.5%; left:22%; width:57%; }
.fengdi-code { position:absolute;  top:29%; left:0; height:36%; width:100%; text-align:center; z-index:999;}
.fengdi-code img { width:auto; height:100%; display:inline-block;}
.code-huanqiu { padding-right:4%; }
.code-china { padding-left:4%; }



/**/
.music-but { position:absolute; top:4%; right:2%; z-index:11; width:28px; height:28px; margin-top:0px!important; }
.portrait .music-but { top:auto; bottom:3%; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);}
.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;}

.audio-click { background:rgba(0,0,0,0); position:absolute; z-index:9999;}
#js-audio-6-click { width:10%; height:16%; bottom:15%; left:41%;}
.portrait #js-audio-6-click { width:16%; height:10%; top:41%; left:14%;}
#js-audio-15-click { width:10%; height:16%; bottom:9%; left:50%;}
.portrait #js-audio-15-click { width:16%; height:10%; top:51%; left:8%;}
#js-audio-18-click { width:10%; height:16%; bottom:14%; left:69%;}
.portrait #js-audio-18-click { width:16%; height:10%; top:70%; left:12%;}

/**/
.code-shade { position:absolute; top:0; width:100%; height:100%; z-index:999; opacity:0;}
.code-shade img { width:100%; height:100%; display:block;}

/**/
.page-inner-bg-box { opacity:0; -webkit-transition-duration:300ms; -moz-transition-duration:300ms; transition-duration:300ms;}
.page-inner-bg,
.page-inner-bg-portrait { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.page-inner-bg { display:block;}
.page-inner-bg-portrait { display:none; }
.portrait .page-inner-bg { display:none; }
.portrait .page-inner-bg-portrait { display:block;}


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


/**/
#js-fudiao,
.fudiao-flash,
.fudiao-renwu { position:absolute; top:0; left:0; width:100%; height:100%; display:block;}
#js-fudiao { background:url("../img/fudiao-bg.jpg") no-repeat; background-size:100% 100%;}