@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:100%; outline:none; font-family:"Microsoft YaHei"; margin:0; padding:0;}
*:focus{outline:none;}
body, button, input, select, textarea { font-size: 100%; margin:0 auto; font-family:"微软雅黑";}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
fieldset, img { border: 0; vertical-align: top;}
q:before, q:after { content: ''; }
input, textarea { outline-style: none; font-size:100%;}
input[type="text"], input[type="password"] {vertical-align:middle; }
input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; }
textarea { resize: none;  font-size:100%;}
address, caption, cite, code, dfn, em, i, th, var { font-style: normal; font-weight: normal; }
strong,b{font-weight: normal;}
abbr, acronym { border: 0; font-variant: normal;}
ul{ list-style:none; overflow:hidden;}
a{ outline:none; text-decoration:none; display:inline-block; border:none; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}

/*公用样式*/
html { height: 100%; height: 100%; overflow-x:hidden; overflow-y:hidden;}
body { width: 100%; height: 100%; background: #ffffff; overflow-x:hidden; overflow-y:hidden;}

/*预加载*/
.load_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; background:#fff; overflow: hidden;}
.load_box img{ width: 100%;}
.load_box .progress_box{ width: 100%; height: auto; text-align: center; font-size: 21px; color: #000; position: absolute; top: 10%; left: 0;}
.load_box .progress_bar_bg{ width: 698px; height: 30px; position: absolute; left: 26px; bottom: 80px;}
.load_box .progress_bar_bg img{ height: 100%;}
.load_box .progress_bar{ width: 0px; height: 30px; position: absolute; left: 26px; bottom: 80px; overflow: hidden;}
.load_box .progress_bar img{ width: 698px; height: 100%; float: left;}
.load_box .progress_num_bg{ width: 66px; height: auto; position: absolute; left: 0; bottom: 120px;}
.load_box .progress_mask{ width: 698px; height: 30px; position: absolute; left: 26px; bottom: 80px;}
.load_box .progress_mask img{ height: 100%;}
.load_box .progress_word{ width: 100%; height: auto; text-align: center; font-size: 30px; font-weight: bold; position: absolute; top: 620px; left: 0; line-height: 66px; letter-spacing: 1px;}
.load_box .load_add_word{ font-size: 18px; color: #000; position: fixed; right: 4%; bottom: 25px;}

/*视频播放*/
.video_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; overflow: hidden; background: #000;}
.video_box img{ width: 100%; height: 100%;}

/*重力感应场景*/
.wrapBox{ width:100%; max-width:750px; height: 100%; margin:0 auto; position:relative; display:block; overflow: hidden;}
.wrapBox img{ width:100%; height: 100%;}
.wrapBox .video_player{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #ffffff;}
.wrapBox .mask_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99;}
.wrapBox .gameView{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

/*游戏规则*/
.game_rule{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101;}
.game_rule_word{ width: 100%; height: auto; text-align: center; position: absolute; top: 30%; left: 0; color: #ffffff; font-size: 42px; line-height: 76px;}

/*全景展示*/
.panorama_show{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 1; background: #ffffff;}
.panorama_show .panorama_show_box{ width: auto; height: 100%; position: absolute; top: 0; left: 0;}
.panorama_show .panorama_show_box img{ width: auto; height: 100%;}
.panorama_show .panorama_show_card_light{ width: 200px; height: auto; position: absolute; top: 56.2%; left: 63%; display: none;}
.panorama_show .panorama_show_card_light img{ width: 100%; height: auto; }
.panorama_show .panorama_show_card{ width: 106px; height: auto; position: absolute; top: 63.5%; left: 64.5%;}
.panorama_show .panorama_show_card img{ width: 100%; height: auto;}
.panorama_show .hand_up{ width: 80px; height: auto; position: absolute; top: 65%; left: 66%; opacity: 0;}
.panorama_show .hand_up img{ width: 100%; height: auto;}
.panorama_show .panorama_show_word{ position: absolute; top: 68%; left: 62%; opacity: 0; font-size: 32px; color: #ffffff;}
.panorama_show .panorama_mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

/*手机演示*/
.phone_move{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101;}
.phone_box{ width: 40%; height: auto; position: absolute; top: 30%; left: 30%;}
.phone_box img{ width: 100%;}

/*明信片收集状态*/
.card_state{ width: 50%; height: auto; position: absolute; bottom: 5px; right: 5px; border-radius: 10px; overflow: hidden; display: none;}
.card_state img{ width: 100%; height: auto;}
.card_state .card_state_box{ width: 20%; height: auto; position: relative; float: left; margin: 0; border: 3px solid #ffffff; box-sizing:border-box;}
.card_state .card_state_box span{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #333333; opacity: 0.7; box-sizing:border-box;}

/*明信片收集动效*/
.card_dynamic{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101; overflow: hidden;}
.card_dynamic img{ width: 100%;}
.card_dynamic .card_light{ width: 100%; height: auto; position: absolute; top: 19%; left: 0%;}
.card_dynamic .card_show_box{ width: 82%; height: auto; position: absolute; top: 30%; left: 9%;}

/*明信片收集示意动效*/
.card_dynamic2{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101; overflow: hidden;}
.card_dynamic2 img{ width: 100%;}
.card_dynamic2 .card_show_box{ width: 82%; height: auto; position: absolute; top: 28%; left: 9%;}
.card_dynamic2 .card_show_box span{ width: 100%; height: auto; color: #ffffff; margin: 25px 0 0 0; float: left; font-size: 42px; line-height: 62px; text-align: center;}

/*明信片展示弹窗*/
.card_show{ width: 82%; height: auto; position: absolute; top: 30%; left: 9%; display: none; z-index: 101;}
.card_show_img{ width: 100%; height: auto;}
.card_show_img img{ width: 100%; height: auto;}
.card_show_img span{ width: 100%; height: auto; float: left; margin: 26px 0 0 0; text-align: center; font-size: 32px; color: #fff;}
.card_show_close{ position: absolute; top: 0px; right: -56px; width: 50px; height: 50px; background: url(../images/close2.png) no-repeat; background-size: 100% 100%;}
.bgdiv{ position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: #000; opacity: 0.5; display: none;}

/*收集成功弹窗*/
.success_zshow{ width: 94%; height: auto; position: absolute; top: 26%; left: 3%; display: none; z-index: 101;}
.success_zshow img{ width: 100%;}
.success_zshow .success_zshow_img img{ width: 100%; height: 60%; border-radius: 5%; overflow: hidden;}
.success_zshow .success_word{ width: 96%; height: auto; position: absolute; top: 3%; left: 5%; text-align: center; font-size: 38px; color: #333; line-height: 62px;}
.success_zshow .success_word b{ font-size: 38px; margin-bottom: 75px; width: 100%; float: left;}
.success_zshow .success_word span{ color: #ff0000; font-size: 42px; font-weight: bold; margin: 0 5px; line-height: 62px;}
.success_zshow .success_game{ width: 30%; height: 58px; position: absolute; bottom: 5%; left: 18%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow .success_schedule{ width: 30%; height: 58px; position: absolute; bottom: 5%; right: 14%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow .success_zshow_close{ position: absolute; top: 0px; right: 15px; width: 50px; height: 50px; background: url(../images/close2.png) no-repeat; background-size: 100% 100%;}

.zshow_btn_color{ background: #fcd729; color: #333;}

/*收集十张弹窗*/
.success_zshow2{ width: 94%; height: auto; position: absolute; top: 26%; left: 3%; display: none; z-index: 101;}
.success_zshow2 img{ width: 100%;}
.success_zshow2 .success_zshow_img2 img{ width: 100%; height: 60%; border-radius: 5%; overflow: hidden;}
.success_zshow2 .success_word2{ width: 64%; height: auto; position: absolute; top: 3%; left: 20%; text-align: center; font-size: 30px; color: #333; line-height: 54px;}
.success_zshow2 .success_word2 b{ font-size: 38px; margin-bottom: 35px; width: 100%; float: left;}
.success_zshow2 .success_word2 span{ color: #ff0000; font-size: 34px; font-weight: bold; margin: 0 5px; line-height: 54px;}
.success_zshow2 .success_game2{ display: none; width: 30%; height: 58px; position: absolute; bottom: 5%; left: 18%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow2 .success_schedule2{ width: 30%; height: 58px; position: absolute; bottom: 5%; right: 33%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow2 .success_zshow_close2{ position: absolute; top: 0px; right: 15px; width: 50px; height: 50px; background: url(../images/close2.png) no-repeat; background-size: 100% 100%;}

/*集齐五张第二次进入*/
.success_zshow3{ width: 94%; height: auto; position: absolute; top: 26%; left: 3%; display: none; z-index: 101;}
.success_zshow3 img{ width: 100%;}
.success_zshow3 .success_zshow_img3 img{ width: 100%; height: 60%; border-radius: 5%; overflow: hidden;}
.success_zshow3 .success_word3{ width: 96%; height: auto; position: absolute; top: 3%; left: 4%; text-align: center; font-size: 38px; color: #333; line-height: 62px;}
.success_zshow3 .success_word3 b{ font-size: 38px; margin-bottom: 75px; width: 100%; float: left;}
.success_zshow3 .success_word3 span{ color: #ff0000; font-size: 42px; font-weight: bold; margin: 0 5px; line-height: 62px;}
.success_zshow3 .success_game3{ width: 30%; height: 58px; position: absolute; bottom: 5%; left: 18%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow3 .success_schedule3{ width: 30%; height: 58px; position: absolute; bottom: 5%; right: 14%; text-align: center; line-height: 58px; font-size: 32px; border-radius: 10px;}
.success_zshow3 .success_zshow_close3{ position: absolute; top: 0px; right: 15px; width: 50px; height: 50px; background: url(../images/close2.png) no-repeat; background-size: 100% 100%;}

/*日程安排表*/
.schedule{ width: 100%; height: 1334px; position: absolute; top: 0; left: 0; display: none; background: #ffffff; z-index: 99; overflow-y:scroll; overflow-x:hidden; }
.schedule img{ width: 100%; height: auto; margin-top: 6.5%; float: left;}
.schedule_word{ width: 100%; height: auto; text-align: center; font-size: 24px; color: #000; display: block; float: left; margin-bottom: 36px;}
.schedule_chose{ width: 18%; height: 54px; line-height: 52px; background: #fcd729; color: #333; border-radius: 10px; position: absolute; top: 21px; left: 50%; font-size: 28px; margin-left: -9%; text-align: center; float: left;}
.schedule .schedule_chose img{ width: 40px; height: auto; margin: 0;}

/*收集十张弹窗*/
.tips_zshow{ width: 80%; height: auto; position: absolute; top: 34%; left: 10%; display: none; z-index: 101;}
.tips_zshow img{ width: 100%;}
.tips_zshow .tips_zshow_img img{ width: 100%; height: 60%; border-radius: 5%; overflow: hidden;}
.tips_zshow .tips_zshow_word{ width: 100%; height: auto; position: absolute; top: 34%; left: 0; text-align: center; font-size: 34px; color: #fff; line-height: 54px;}
.tips_zshow .tips_zshow_close{ position: absolute; top: 0px; right: -56px; width: 50px; height: 50px; background: url(../images/close2.png) no-repeat; background-size: 100% 100%;}

@media only screen and (max-width:480px){
    
}
@media only screen and (max-width:360px){
    
}
@media only screen and (max-width:320px){
    
}

/*动画效果*/
/*渐隐渐现*/
@-webkit-keyframes fadeInOut{
    0%{ opacity:1;}
    20%{ opacity:0;}
    40%{ opacity:1;}
    60%{ opacity:0;}
    80%{ opacity:1;}
    100%{ opacity:0;}
}
@keyframes fadeInOut{
    0%{ opacity:1;}
    20%{ opacity:0;}
    40%{ opacity:1;}
    60%{ opacity:0;}
    80%{ opacity:1;}
    100%{ opacity:0;}
}
.fadeInOut{ animation: fadeInOut 2.5s 0.1s ease both; -webkit-animation: fadeInOut 2.5s 0.1s ease both;}

/* 由下而上渐现 */
@-webkit-keyframes fadeInDown{
    0%{ opacity:0; -webkit-transform:translateY(20px)}
    100%{ opacity:1; -webkit-transform:translateY(0)}
}
@keyframes fadeInDown{
    0%{ opacity:0; transform:translateY(20px)}
    100%{ opacity:1; transform:translateY(0)}
}
.game_rule_word_show{ animation: fadeInDown 2s ease 0.6s both; -webkit-animation: fadeInDown 2s ease 0.6s both;}
.index_word_show{ animation: fadeInDown 2s ease 0.6s both; -webkit-animation: fadeInDown 2s ease 0.6s both;}

/*手机来回运动*/
@-webkit-keyframes repeated{
    0%{ top: 30%; left: 30%;}
    25%{ top: 30%; left: 60%;}
    50%{ top: 30%; left: 30%;}
    75%{ top: 30%; left: 0%;}
    100%{ top: 30%; left: 30%;}
}
@keyframes repeated{
    0%{ top: 30%; left: 30%;}
    25%{ top: 30%; left: 60%;}
    50%{ top: 30%; left: 30%;}
    75%{ top: 30%; left: 0%;}
    100%{ top: 30%; left: 30%;}
}
.repeated{ animation: repeated 3s ease both; -webkit-animation: repeated 4s ease both;}

/* 旋转 */
@-webkit-keyframes rotate_Clockwise{
    from{-webkit-transform:rotate(0deg)}
    to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate_Clockwise{
    from{-moz-transform:rotate(0deg)}
    to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate_Clockwise{
    from{-ms-transform:rotate(0deg)}
    to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate_Clockwise{
    from{-o-transform:rotate(0deg)}
    to{-o-transform:rotate(360deg)}
}
.glint{ animation:2s linear 0s normal none infinite rotate_Clockwise; -webkit-animation:2s linear 0s normal none infinite rotate_Clockwise;}

/*弹出*/
@-webkit-keyframes showInTurn {
  0%{ opacity: 1;-webkit-transform:scale(0.1);}
  100%{ opacity: 1;-webkit-transform:scale(1);}
}
@keyframes showInTurn {
  0%{ opacity:1; transform:scale(0.1);}
  100%{ opacity:1; transform: scale(1);}
}
.showInTurn{ animation: showInTurn 1.2s ease both; -webkit-animation: showInTurn 1.2s ease both;}

/*全景展示*/
@-webkit-keyframes panoramaMove{
    0%{ left: 0%;}
    70%{ left: -255%;}
    100%{ left: -192%;}
}
@keyframes panoramaMove{
    0%{ left: 0%;}
    70%{ left: -255%;}
    100%{ left: -192%;}
}
.panoramaMove{ animation: panoramaMove 10s ease both; -webkit-animation: panoramaMove 10s ease both;}

/*手指移动*/
@-webkit-keyframes handMove {
  0%{ opacity: 0; top: 67%; left: 68%;}
  100%{ opacity: 1; top: 65%; left: 66%;}
}
@keyframes handMove {
  0%{ opacity:0; top: 67%; left: 68%;}
  100%{ opacity:1; top: 65%; left: 66%;}
}
.handMove{ animation: handMove 1.2s ease both; -webkit-animation: handMove 1.2s ease both;}

/*文字展示*/
@-webkit-keyframes showWord{
    0%{ opacity:0;}
    100%{ opacity:1;}
}
@keyframes showWord{
    0%{ opacity:0;}
    100%{ opacity:1;}
}
.showWord{ animation: showWord 1.6s ease both; -webkit-animation: showWord 1.6s ease both;}
.showWord2{ animation: showWord 1s ease both; -webkit-animation: showWord 1s ease both;}

.video_box_bg{
    width: 100%;
    height: 100%;
    background: url(../images/video/1.jpg) no-repeat;
    background-size: 100% 100%;
}
.step {
    animation: step 3.3s steps(50) both infinite;
    -webkit-animation: step 3.3s steps(50) both infinite;
}
@keyframes step {
    0%{
        background-position: 0 0;
    }
    100% {
        background-position: 0 -36000px;
    }
}
@-webkit-keyframes step {
    0%{
        background-position: 0 0;
    }
    100% {
        background-position: 0 -36000px;
    }
}