html,body{margin:0; padding:0; height: 100%; overflow-y: hidden;}
body{font:normal 16px/1.5em "Helvetica Neue",Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif; background-color: #fff;}
ul,ol,li,em {margin:0; padding:0; font-weight:normal; list-style:none; font-style:normal}
a {text-decoration: none;}
.hide{display: none;}

/* active-info */
.bgmwrap{
    position:fixed; right:20px; top:30px; width:30px; height: 30px; z-index:999;
    font-size: 0;
}
.bgmwrap a {
  display: none;
  width:30px; height: 30px; overflow: hidden;
  border: 0 none;
  background: transparent url(icon-play.png) 0 0 no-repeat;
  background-size: 30px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#btnMute {background-position: 0 bottom;}
#btnPlay {background-position: 0 0;}
.bgmwrap .active {display: block;}

/* loading box*/
#loading {
    position: fixed; width: 100%; height: 100vh; z-index: 999;
    background: #fff url(../img/bg.jpg) no-repeat center top;
    background-size: cover;
}
.loadicon {
    position: absolute; width: 80px; margin-left: -40px; left: 50%; top: 40%;
}
.loadicon > span {
    display: block;
    height: 100px;
    background: transparent url(../img/icon-loading.png) no-repeat center 0;
    background-size: auto 100%;
}
.loadtips {
    text-align: center;
    font-size: 14px;
    padding-top: 10px;
    color: #666;
}

/* thecover */
.thecover {
    position: absolute; left: 0; top: 0; width: 100%;  height: 100vh; z-index: 500;
    background: transparent url("../img/bg-cover.jpg") no-repeat center top;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
}
.thecover.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
}
.thecover .ct2 {
    position: absolute; width: 100%; left: 0; top: 2%; z-index: 1;
    opacity: 0;
    transform: translateY(-20px);
}
.thecover .logo {
    position: absolute; width: 60px; left: 30px; top: 30px; z-index: 1;
}
.thecover .logo img {
    width: 100%;
}

.thecover.active .ct2 {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s, transform 1s;
}

.btn-start {
    position: absolute; width: 120px; left: 50%; margin-left: -60px; top: 64%; z-index: 10;
    -webkit-animation: zoombtn 2s infinite linear;
            animation: zoombtn 2s infinite linear;
    opacity: 0;
}
.thecover.active .btn-start {
    opacity: 1;
    transition: opacity 1s 1s;
}

.yinyan {
    position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;
    position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100;
    background: transparent url("../img/bg-menu.jpg") no-repeat center bottom;
    background-size: cover;
    visibility: hidden;
    opacity: 0;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.yinyan.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
}
.yinyan .inner {
    width: 80%;
    height: 85%;
    background-color: rgba(255,255,255,0.5);
    padding: 10px 20px;
    border-radius: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}
.yinyan .inner p {
    margin: 0 0 10px;
}

.btn-next {
    position: absolute; width: 40px; right: 30px; bottom: 30px; z-index: 1;
    -webkit-animation: swing 1s infinite linear;
            animation: swing 1s infinite linear;
}

/* container box */
.menupage {
    position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100;
    background: transparent url("../img/bg.jpg") no-repeat center top;
    background-size: cover;
    visibility: hidden;
    transform: translateX(-100vw);
    opacity: 0;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.menupage.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
}

.menupage a {
    display: block; margin: 0 auto;
    position: relative;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}
.menupage.active a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s, transform 1s;
}
.menupage.active a:nth-child(2) { transition-delay: 0.3s;}
.menupage.active a:nth-child(3) { transition-delay: 0.6s;}

.menupage .tips-touch {
    position: absolute; width: 60px; height: 60px; left: 50%; top: 50px; z-index: 1;
    background: transparent url("../img/icon-touch.png") no-repeat left top;
    background-size: 100% auto;
    animation: zoombtn 1s infinite;
}
.menupage a img {
    width: 100%; vertical-align: top;
}

.mcon {height: 100%; position: relative;}
.p1,
.p2 { width: auto; height: 100vh; display: none; overflow-x: auto;}
.p1.active,
.p2.active { display: block;}

.p1 img,
.p2 img {height: 100%; vertical-align: top;}

.tips-scroll {
    position: absolute; width: 80px; height: 80px; left: 50%; margin-left: -40px; bottom: 30px; z-index: 1;
    background: transparent url("../img/tips-scroll.png") no-repeat center top;
    background-size: 100%;
    animation: swing 3s infinite;
}

.psw {
    position: absolute; left: 5%; top: 15px; z-index: 1;
    background-color: #d2ef9b;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    border-radius: 20px;
    padding: 4px;
    font-size: 13px;
    opacity: 0;
    transform: translateY(-200px);
}
.psw.active {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s, opacity 1s;
}
.psw span {
    display: inline-block;
    color: #fff;
    background-color: #adadad;
    border-radius: 20px;
    padding: 2px 10px;
}

.psw .active {background-color: #da6767;}
.psw .btn-back {height: 28px; vertical-align: top;}


.btn-menu {
    position: fixed; width: 36px; height: 36px; right: 20px; top: 20px; z-index: 10;
    background: transparent url("../img/btn-menu.png") no-repeat center top;
    background-size: 100%;
}

.maker {
    position: absolute; width: 100%; left: 0; bottom: 30px; z-index: 1;
    text-align: center;
    font-size: 11px; line-height: 1.4em;
    color: #333;
}
.maker em {font-weight: bold;}


/* iPhone 6s */
@media only screen
    and (device-width: 375px)
    and (device-height: 667px) /* 603px/667px */
    and (-webkit-device-pixel-ratio: 2) {
        .btn-start {top: 76%;}
        .psw {font-size: 12px;}
}

/* iPhone 6s plus */
@media only screen
    and (device-width: 414px)
    and (device-height: 736px) /* 672px/736px */
    and (-webkit-device-pixel-ratio: 3) {
        .btn-start {top: 76%;}
        .psw {font-size: 12px;}
}

@media screen and (min-width: 992px) {
    .thecover {background-size: auto 100%;}
    .thecover .ct2 {width: 50vh; left: 50%; margin-left: -25vh;}
    .thecover .logo {left: calc(50% - 22vh);}
    .yinyan .inner {width: 36vh;}
    .yinyan {background-size: auto 100%;}
    .btn-next {right: calc(50% - 22vh);}
    .menupage {background-size: auto 100%;}
    .menupage a img {width: 86%;}
    .menupage .tips-touch {top: 130px;}
    .psw span {cursor: pointer;}
}

@-webkit-keyframes swing{
    0% {-webkit-transform: translateX(0px);}
    50% {-webkit-transform: translateX(10px);}
    100% {-webkit-transform: translateX(0px);}
}
@keyframes swing{
    0% {transform: translateX(0px);}
    50% {transform: translateX(10px);}
    100% {transform: translateX(0px);}
}

@-webkit-keyframes zoombtn{
    0% {-webkit-transform: scale(1,1);}
    50% {-webkit-transform: scale(1.2,1.2);}
    100% {-webkit-transform: scale(1,1);}
}
@keyframes zoombtn{
    0% {transform: scale(1,1);}
    50% {transform: scale(1.2,1.2);}
    100% {transform: scale(1,1);}
}