@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,section,canvas {
    padding: 0;
    margin: 0;
}
li{ list-style: none;}

html,body {
    font-size: 22px;
    color: #FFFFFF;
    font-family: 'Microsoft YaHei', Arial;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #ea9574;
    -webkit-touch-callout:none; /* 禁用长触弹出的下载图片菜单 */
    -webkit-user-select:none; /* 禁用长触选择文字等功能 */
}

.hide{ display: none;}

.loading{ position: absolute; top: 50%; left: 50%; margin:-120px 0 0 -40px; width: 76px;}
.loadingicon{ background: url("../images/loadingicon.png") no-repeat; width: 76px; height: 100px; margin-bottom: 26px;}
.loadingtxt{ font-size: 24px; color: #FFFFFF; text-align: center; margin-top: 45px;}

.main{ display: none; width: 100%; height: 100%;position: relative; overflow: hidden;}
.page{ width: 100%; height: 100%;  position: absolute;}
.page>div{ width: 100%; height: 100%; overflow: hidden;position: absolute;left:0;top:0;background-repeat: no-repeat;background-position: center center;}

.page1{background-image: url("../images/p1.jpg");}
.page1>div{ position: absolute;left:50%;top:50%;}
.page1_1{ margin: -372px 0 0 -262px;}

.page2{background-image: url("../images/p2.jpg");}
.page2>div{ position: absolute;left:50%;}
.page2_1{ margin: -238px 0 0 -118px;top:50%;}
.page2_2{ margin-left:-304px;bottom:-6px;}

.page3{background-color:white;}
.page3>div{ position: absolute;left:50%;}
.page3_1{ margin: -520px 0 0 -320px;top:50%;}
.page3_2{ margin: -520px 0 0 -245px;top:50%;}
.page3_3{ margin-left:-304px;bottom:-6px;}

.page4{background-color:white;}
.page4>div{ position: absolute;left:50%;}
.page4_1{ margin: -258px 0 0 -320px;top:50%;}
.page4_2{ margin: -520px 0 0 -320px;top:50%;}
.page4_3{ margin-left:-304px;bottom:-6px;}

.page5{background-image: url("../images/p5.jpg");}
.page5>div{ position: absolute;left:50%;}
.page5_1{ margin: -520px 0 0 -320px;top:50%;}
.page5_2{ margin: -243px 0 0 -87px;top:50%;}
.page5_3{ margin-left:-304px;bottom:-6px;}

.page6{background-image: url("../images/p6.jpg");}
.page6>div{ position: absolute;left:50%;}
.page6_1{ margin: -469px 0 0 -286px;top:50%;}
.page6_2{ margin-left:-304px;bottom:-6px;}

.page7{background-color: #fda786;}
.page7>div{ position: absolute;left:50%;top:50%;}
.page7_0{ margin: 276px 0 0 -320px;}
.page7_1{ margin: -399px 0 0 -293px;}
.page7_2{ margin: -399px 0 0 -93px;}
.page7_3{ margin: -399px 0 0 107px;}
.page7_4{ margin: -199px 0 0 -293px;}
.page7_5{ margin: -199px 0 0 -93px;}
.page7_6{ margin: -199px 0 0 107px;}
.page7_7{ margin: 1px 0 0 -293px;}
.page7_8{ margin: 1px 0 0 -93px;}
.page7_9{ margin: 1px 0 0 107px;}

.page8{background-color: #fda786;}
.page8>div{ position: absolute;left:50%;top:50%;}
.page8_1{ margin: -410px 0 0 -256px;}
.page8_2{ margin: 106px 0 0 -63px;}
.page8_3{ margin: 232px 0 0 -122px;}
.page8_4{ margin: 105px 0 0 -320px;width:100%;font-size:36px;color: white;text-align: center;}
.page8_4>span{ font-size: 46px; }
.page8_5{ margin: 288px 0 0 -145px;}
.page8_t1{ margin: -280px 0 0 -210px; }
.page8_t2{ margin: -223px 0 0 -210px; }
.page8_t3{ margin: -166px 0 0 -210px; }
.page8_t4{ margin: -108px 0 0 -210px; }
.page8_t5{ margin: -51px 0 0 -210px; }
.page8_t6{ margin: 1px 0 0 -210px; }

.logo{ position: absolute;left:50%;bottom:10px;margin-left: -148px; }

.popmask { width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; left: 0; top: 0; }
.popmask>img{ position: absolute;left:50%;top:50%;margin: -141px 0 0 -198px; }

.sharemask{ width: 100%; height: 100%; background: rgba(0,0,0,0.85); position: absolute; left: 0; top: 0;}
.sharemask>div{ position: absolute;left:50%;top:50%; }
.share1{ margin: -174px 0 0 -87px; }
.share2{ margin: -178px 0 0 28px;animation: gebo 1s infinite linear;-webkit-animation: gebo 1s infinite linear;transform-origin:10% 90%;-webkit-transform-origin: 10% 90%; }
.share3{ margin: 16px 0 0 -112px; }
@keyframes gebo {
    0%,100% { transform: rotate(0deg) }
    50% { transform: rotate(10deg) }
}
@-webkit-keyframes gebo {
    0%,100% { -webkit-transform: rotate(0deg) }
    50% { -webkit-transform: rotate(10deg) }
}

.xintiao { animation: xt 2s infinite linear;-webkit-animation: xt 2s infinite linear; }
@keyframes xt {
    0%,20%,40%,100%{ transform: scale(1) }
    10%{ transform: scale(1.1) }
    30%{ transform: scale(1.05) }
}

@-webkit-keyframes xt {
    0%,20%,40%,100%{ -webkit-transform: scale(1) }
    10%{ -webkit-transform: scale(1.1) }
    30%{ -webkit-transform: scale(1.05) }
}

/*音乐按钮*/
.musicicon{ background: url("../images/musicicon.png") no-repeat; width: 60px; height: 60px; position: absolute; top: 20px; right: 20px;}
/*按钮旋转*/
.musicrotate{-webkit-animation: xuanzhuan 5s infinite linear; animation: xuanzhuan 5s infinite linear;}
@keyframes xuanzhuan {
    0% { transform: rotate(0deg)}
    100% { transform: rotate(360deg)}
}
@-webkit-keyframes xuanzhuan {
    0% { -webkit-transform: rotate(0deg)}
    100% { -webkit-transform: rotate(360deg)}
}
/*按钮旋转*/

.loader {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.loader > div {
    content: " ";
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: shift 2s linear infinite;
    animation: shift 2s linear infinite;
}
.loader > div:nth-of-type(1) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s;
}
.loader > div:nth-of-type(2) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
}
.loader > div:nth-of-type(3) {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
}
.loader > div:nth-of-type(4) {
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s;
}

@-webkit-keyframes shift {
    0% {
        left: -30px;
        opacity: 0;
    }
    10% {
        left: 0;
        opacity: 1;
    }
    90% {
        left: 50px;
        opacity: 1;
    }
    100% {
        left: 80px;
        opacity: 0;
    }
}

@keyframes shift {
    0% {
        left: -30px;
        opacity: 0;
    }
    10% {
        left: 0;
        opacity: 1;
    }
    90% {
        left: 50px;
        opacity: 1;
    }
    100% {
        left: 80px;
        opacity: 0;
    }
}