@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);}

/*公用样式*/
body { background: #000000; overflow-y:hidden;}

.wrapBox{ width:100%; max-width:750px; margin:0 auto; position:relative; display:block; overflow: hidden;}
.wrapBox img{ width:100%;}

.begin_box{ width: 100%; height: 100%; background: #000000; position: absolute; top: 0; left: 0; z-index: 101; display: block;}
.begin_box span{ width: 61.33%; height: auto; position: absolute; top: 31.48%; left: 19.33%;}

.load_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: block;}
.load_box .load_bg{ width: 100%; height: auto;}
.load_box .line_top_left{ width: 0px; height: 0px; position: absolute; top: 0; left: 0; overflow: hidden;}
.load_box .line_top_right{ width: 0px; height: 0px; position: absolute; top: 0; left: 0; overflow: hidden;}
.load_box .line_bottom_left{ width: 0px; height: 0px; position: absolute; top: 0; left: 0; overflow: hidden;}
/*.load_box .line_bottom_left img{ position: absolute; bottom: 0; left: 0;}*/
.load_box .line_bottom_right{ width: 0px; height: 0px; position: absolute; top: 0; left: 0; overflow: hidden;}
/*.load_box .line_bottom_right img{ position: absolute; bottom: 0; left: 0;}*/
.load_box .line_word{ width: 85.4%; height: auto; position: absolute; top: 10.19%; left: 7.3%;}
.load_box .progress_box{ width: 35.33%; height: 4.12%; position: absolute; top: 30.88%; left: 32.33%; background: url(../images/progress_bg.png) no-repeat; background-size: 100% 100%; display: none;}
.load_box .progress_box span{ width: auto; height: 25.45%; position: absolute; top: 37%; left: 7%;}
.load_box .progress_box span img{ width: 100%; height: 100%; display: block;}
.load_box .load_word{ width: 100%; height: auto; text-align: center; line-height: 40px; font-size: 28px; color: #d4e9d7; position: absolute; top: 38.98%; left: 0;}
.load_box .ship_box{ width: 59.2%; height: 32.23%; position: absolute; top: 58.47%; left: 20.4%; background: url(../images/ship.png) no-repeat; background-size: 100% 100%; display: block;}

/*动画效果*/
/* Left */
@-webkit-keyframes fadeInLeft{
    0%{ opacity:1; left: 32%;}
    40%{ opacity:1;}
    100%{ opacity:0; left: 6%;}
}
@-moz-keyframes fadeInLeft{
    0%{ opacity:1; left: 32%;}
    40%{ opacity:1;}
    100%{ opacity:0; left: 6%;}
}
.left_con{ animation: fadeInLeft 1.4s 0.2s ease infinite both; -webkit-animation: fadeInLeft 1.4s 0.2s ease infinite both;}

/* Right */
@-webkit-keyframes fadeInRight{
    0%{ opacity:1; right: 32%;}
    40%{ opacity:1;}
    100%{ opacity:0; right: 6%;}
}
@-moz-keyframes fadeInRight{
    0%{ opacity:1; right: 32%;}
    40%{ opacity:1;}
    100%{ opacity:0; right: 6%;}
}
.right_con{ animation: fadeInRight 1.4s 0.2s ease infinite both; -webkit-animation: fadeInRight 1.4s 0.2s ease infinite both;}

/* 开始效果 */
@-webkit-keyframes startFadeOut{
    0%{ opacity:0; transform:scale(1);}
    45%{ opacity:1; transform:scale(1.2);}
    100%{ opacity:1; transform:scale(0.1);}
}
@-moz-keyframes startFadeOut{
    0%{ opacity:0; transform:scale(1);}
    45%{ opacity:1; transform:scale(1.2);}
    100%{ opacity:1; transform:scale(0.1);}
}
.fade_con{ animation: startFadeOut 1.8s ease 0.6s both; -webkit-animation: startFadeOut 1.8s ease 0.6s both; animation-play-state: paused; -webkit-animation-play-state: paused;}



.mail_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none; float: left;}
.mail_box .mail_bg{ width: 100%; height: auto;}
.mail_box .mail{ width: 16.13%; height: 7.64%; background: url(../images/mail.png) no-repeat; background-size: 100% 100%; position: absolute; top: 32%; left: 41.86%; z-index: 101;}
.mail_box .mail_arrow{ width: 10.26%; height: 5.77%; background: url(../images/arrow.png) no-repeat; background-size: 100% 100%; position: absolute; top: 36.73%; left: 54.66%; animation-delay:1.2s; -webkit-animation-delay:1.2s;}
.mail_box .mail_word{ width: 100%; height: auto; text-align: center; line-height: 40px; font-size: 28px; color: #d4e9d7; position: absolute; top: 42.35%; left: 0;}



.rule_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.rule_box .rule_title{ width: 70.8%; height: auto; position: absolute; top: 15.86%; left: 14.6%; text-align: center; font-size: 28px; color: #d4e9d7; opacity: 0;}
.rule_box .rule_title2{ width: 52.4%; height: 4.42%; position: absolute; top: 19.49%; left: 23.8%; background: url(../images/rule_word1.png) no-repeat; background-size: 100% 100%; opacity: 0; animation-delay:1.0s; -webkit-animation-delay:1.0s;}
.rule_box .rule_word1{ width: 42.8%; height: 4.94%; position: absolute; top: 27.36%; left: 17%; overflow: hidden; animation-delay:1.4s; -webkit-animation-delay:1.4s;}
.rule_box .rule_word1 span img{ width: auto; height: 100%; display:block;}
.rule_box .rule_photo1{ width: 25.46%; height: 9.52%; background: url(../images/rule_photo1.png) no-repeat; background-size: 100% 100%; position: absolute; top: 26%; left: 62.93%; animation-delay:2s; -webkit-animation-delay:2s;}
.rule_box .rule_word2{ width: 21.6%; height: 5%; position: absolute; top: 39.35%; left: 47.73%; overflow: hidden; animation-delay:3.2s; -webkit-animation-delay:3.2s;}
.rule_box .rule_word2 span img{ width: auto; height: 100%; display:block;}
.rule_box .rule_logo{ width: 34.53%; height: 3.59%; position: absolute; top: 36.35%; left: 50.4%; background: url(../images/rule_logo.png) no-repeat; background-size: 100% 100%; animation-delay:2.8s; -webkit-animation-delay:2.8s;}
.rule_box .rule_photo2{ width: 25.46%; height: 9.52%; background: url(../images/rule_photo2.png) no-repeat; background-size: 100% 100%; position: absolute; top: 35.83%; left: 20.66%; animation-delay:2.4s; -webkit-animation-delay:2.4s;}
.rule_box .rule_word3_1{ width: 38.66%; height: 3.8%; position: absolute; top: 46%; left: 21.33%; overflow: hidden; animation-delay:4.4s; -webkit-animation-delay:3.8s;}
.rule_box .rule_word3_1 span img{ width: auto; height: 100%; display:block;}
.rule_box .rule_word3_2{ width: 38.66%; height: 3.8%; position: absolute; top: 49.8%; left: 21.33%; overflow: hidden; animation-delay:5.6s; -webkit-animation-delay:4.8s;}
.rule_box .rule_word3_2 span img{ width: auto; height: 100%; display:block;}
.rule_box .rule_photo3{ width: 25.46%; height: 9.52%; background: url(../images/rule_photo3.png) no-repeat; background-size: 100% 100%; position: absolute; top: 45%; left: 62.93%; animation-delay:5.6s; -webkit-animation-delay:5.6s;}
.rule_box .rule_btn{ width: 60%; height: 4.79%; background: url(../images/rule_btn.png) no-repeat; background-size: 100% 100%; position: absolute; top: 80.13%; left: 20.53%; animation-delay:6s; -webkit-animation-delay:6s;}



.connect_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.connect_box .connect_bg{ width: 88.66%; height: 80.2%; position: absolute; top: 5.3%; left: 5.66%; background: url(../images/line2.png) no-repeat; background-size: 100% 100%;}
.connect_box .connect_line_bg{ width: 84.4%; height: auto; position: absolute; top: 17%; left: 7.8%;}
.connect_box .connect_title{ width: 100%; height: auto; position: absolute; top: 13.86%; left: 0; text-align: center; font-size: 28px; color: #d4e9d7;}
.connect_box .connect_title2{ width: 52.4%; height: 4.42%; position: absolute; top: 16.49%; left: 23.8%; background: url(../images/rule_word1.png) no-repeat; background-size: 100% 100%; background-size: 100% 100%;}
.connect_box .connect_phone{ width: 50%; height: auto; position: absolute; top: 25%; left: 25%;}
.connect_box .benchmark_bg{ width: 49.86%; height: 27.96%; position: absolute; top: 28.48%; left: 25%; background: url(../images/benchmark_bg.png) no-repeat; background-size: 100% 100%; display: block;}
.connect_box .benchmark_box{ width: 26.13%; height: 12.66%; position: absolute; top: 36.13%; left: 36.93%; background: url(../images/benchmark_2.png) no-repeat; background-size: 100% 100%;}
.connect_box .benchmark_line{ width: 33.46%; height: 18.89%; position: absolute; top: 32.98%; left: 33.26%; background: url(../images/benchmark_1.png) no-repeat; background-size: 100% 100%;}
.connect_box .crown_box_light{ width: 100%; height: auto; position: absolute; top: 11.4%; left: 0; display: none;}
.connect_box .crown_box{ width: 30%; height: auto; position: absolute; top: 21%; left: 35%; display: none;}
.connect_box .crown_logo_box{ width: 52%; height: auto; position: absolute; top: 52%; left: 24%; opacity: 0;}
.connect_box .crown_light1{ width: 13.33%; height: auto; position: absolute; top: 23.8%; left: 35.5%; display: none;}
.connect_box .crown_light2{ width: 16%; height: auto; position: absolute; top: 22.5%; left: 42.1%; display: none;}
.connect_box .crown_light3{ width: 13.33%; height: auto; position: absolute; top: 23.8%; left: 51.6%; display: none;}
.connect_box .connect_tips{ width: 33.33%; height: auto; position: absolute; top: 52.6%; left: 33.33%; display: none;}
.connect_box .connect_tips2{ width: 44%; height: auto; position: absolute; top: 52.6%; left: 28%; display: none;}
.connect_box .connect_btn2{ width: 12.6%; height: auto; position: absolute; top: 39.8%; left: 43.7%; display: none;}
.connect_box .connect_btn{ width: 60%; height: 4.79%; background: url(../images/connect_btn.png) no-repeat; background-size: 100% 100%; position: absolute; top: 80.13%; left: 20.53%; display: none;}
.connect_box .crown_end_word{ width: 48.93%; height: auto; position: absolute; top: 59%; left: 25.53%; display: none;}
.connect_box .connect_crown_btn{ width: 60%; height: 4.79%; background: url(../images/sure_btn.png) no-repeat; background-size: 100% 100%; position: absolute; top: 80.13%; left: 20.53%; display: none;}
.connect_box .baoshi_light{ width: 42%; height: auto; position: absolute; top: 30.8%; left: 29.2%; display: none; opacity: 0.8;}
.connect_box .new_baoshi_box{ width: 16%; height: auto; position: absolute; top: 39%; left: 42%; opacity: 0;}
.connect_box .connect_add_btn{ width: 14.93%; height: 8.39%; position: absolute; top: 38.3%; left: 42.53%; background: url(../images/connect.png) no-repeat; background-size: 100% 100%; display: block; opacity: 0.5;}


.btn_box1{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.btn_box2{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.btn_box3{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.btn_box4{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}


.voice_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.voice_box .voice_bg{ width: 100%; height: 1334px; position: absolute; top: 0; left: 0;}
.voice_box .voice_obstacle1{ width: 60.66%; height: 34%; position: absolute; top: 13.4%; left: 19.66%; background: url(../images/obstacle_1.png) no-repeat; background-size: 100% 100%;}
.voice_box .voice_obstacle2{ width: 52.13%; height: 29.23%; position: absolute; top: 15.8%; left: 23.93%; background: url(../images/obstacle_2.png) no-repeat; background-size: 100% 100%;}
.voice_box .voice_obstacle3{ width: 50.13%; height: 28.11%; position: absolute; top: 15.96%; left: 24.93%; background: url(../images/obstacle_bg.png) no-repeat; background-size: 100% 100%;}
.voice_box .tapeBtn_bg{ width: 16.26%; height: 9%; position: absolute; top: 67.1%; left: 41.86%; background: url(../images/voice_bg.png) no-repeat; background-size: 100% 100%;}
.voice_box .voice_wave{ width: 56%; height: auto; position: absolute; top: 44.97%; left: 22%; display: none;}
.voice_box .voice_btn{ width: 13%; height: 7.27%; position: absolute; top: 67.99%; left: 43.46%; background: url(../images/voice_btn.png) no-repeat; background-size: 100% 100%;}
.voice_box .tapeBtn{ width: 100%; height: 28%; position: absolute; top: 59.97%; left: 0;}
.voice_box .voice_light{ width: 97.6%; height: 58%; position: absolute; top: 13.49%; left: 1%; display: none;}
.voice_box .voice_light img{ width: 100%;}



.success_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.success_box .success_icon{ width: 20%; height:auto; position: absolute; top: 18.74%; left: 40%;}
.success_box .success_word{ width: 100%; height: auto; position: absolute; top: 26%; left: 0; text-align: center; font-size: 24px; color: #ffffff; display: none;}
.success_box .success_tip{ width: 49.73%; height: 6.82%; position: absolute; top: 28%; left: 25.13%; background: url(../images/success_word.png) no-repeat; background-size: 100% 100%;}
.success_box .code_box{ width: 56%; height: auto; padding-bottom: 64px; position: absolute; top: 38%; left: 26.26%;}
.success_box .code_box img{ width: 100%;}
.success_box .code_box_word{ display: none; font-size: 20px; position: absolute; top: 51.72%; left: 57.33%; color: #ffffff; text-align: center; line-height: 28px;}
.success_box .code2{ width: 200%; height: auto; position:absolute; top: 0; left: 0;}
.success_box .coding_box{ position: absolute; top: 86%; left: 0; width: 93.5%; text-align: right; font-size: 10px; color: #ffffff;}



.common_box{ width: 100%; height: 17.5%; position: absolute; top: 59.97%; left: 0; z-index: 100; display: none;}
.common_box .random_num1{ color: #d4d4d4; font-size: 16px; position: absolute; top: 77.77%; left: 16%;}
.common_box .random_num2{ color: #d4d4d4; font-size: 14px; position: absolute; top: 34%; left: 31.6%;}
.common_box .random_num3{ color: #d4d4d4; font-size: 14px; position: absolute; top: 34%; left: 62.26%;}
.common_box .light_left{ width: 16%; height: 12.39%; position: absolute; top: 0px; left: 32%; background: url(../images/light.png) no-repeat; background-size: 100% 100%;}
.common_box .light_right{ width: 16%; height: 12.39%; position: absolute; top: 0px; right: 32%; background: url(../images/light.png) no-repeat; background-size: 100% 100%;}

/*渐隐渐现*/
@-webkit-keyframes fadeInOut{
    0%{ opacity:0;}
    50%{ opacity:1;}
    100%{ opacity:0;}
}
@-moz-keyframes fadeInOut{
    0%{ opacity:0;}
    50%{ opacity:1;}
    100%{ opacity:0;}
}
.fadeInOut{ animation: fadeInOut 1.2s 0.6s ease infinite both; -webkit-animation: fadeInOut 1.2s 0.6s ease infinite both;}

/*渐现*/
@-webkit-keyframes fadeIn{
    0%{ opacity:0;}
    100%{ opacity:1;}
}
@-moz-keyframes fadeIn{
    0%{ opacity:0;}
    100%{ opacity:1;}
}
.showIn{ animation: fadeIn 0.6s 0.6s ease both; -webkit-animation: fadeIn 0.6s 0.6s ease both;}
.showIn2{ animation: fadeIn 0.6s ease both; -webkit-animation: fadeIn 0.6s ease both;}

/*字幕*/
@-webkit-keyframes subtitles{
    0%{ width: 0;}
    100%{ width: 44%;}
}
@-moz-keyframes subtitles{
    0%{ width: 0;}
    100%{ width: 44%;}
}
.subtitles{ animation: subtitles 1.2s 1.2s ease both; -webkit-animation: subtitles 1.2s 1.2s 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)}
}
.rotate_Clockwise{ animation:5s linear 0s normal none infinite rotate_Clockwise; -webkit-animation:5s linear 0s normal none infinite rotate_Clockwise;}
.rotate_Clockwise2{ animation:1.2s linear 0s normal none infinite rotate_Clockwise; -webkit-animation:1.2s linear 0s normal none infinite rotate_Clockwise;}
.rotate_Clockwise3{ animation:2.4s linear 0s normal none infinite rotate_Clockwise; -webkit-animation:2.4s linear 0s normal none infinite rotate_Clockwise;}

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

/*手机来回运动*/
@-webkit-keyframes repeated{
    0%{ top: 25%; left: 25%;}
    12.5%{ top: 25%; left: 50%;}
    25%{ top: 25%; left: 25%;}
    37.5%{ top: 25%; left: 0%;}
    50%{ top: 25%; left: 25%;}
    62.5%{ top: 10%; left: 25%;}
    75%{ top: 25%; left: 25%;}
    87.5%{ top: 40%; left: 25%;}
    100%{ top: 25%; left: 25%;}
}
@-moz-keyframes repeated{
    0%{ top: 25%; left: 25%;}
    12.5%{ top: 25%; left: 50%;}
    25%{ top: 25%; left: 25%;}
    37.5%{ top: 25%; left: 0%;}
    50%{ top: 25%; left: 25%;}
    62.5%{ top: 10%; left: 25%;}
    75%{ top: 25%; left: 25%;}
    87.5%{ top: 40%; left: 25%;}
    100%{ top: 25%; left: 25%;}
}
.repeated{ animation: repeated 4s ease both; -webkit-animation: repeated 4s ease both; animation-play-state: paused;-webkit-animation-play-state: paused;}

/*旋转出*/
@-webkit-keyframes showAround {
    0{ -webkit-transform:rotate(0deg) scale(0);}
    100%{ -webkit-transform:rotate(360deg) scale(6.5);}
}
@-moz-keyframes showAround { 
    0{ transform:rotate(0deg) scale(0);}
    100%{ transform:rotate(360deg) scale(6.5);}
}
.showAround{ animation: showAround 2s ease both; -webkit-animation: showAround 2s ease both; animation-play-state: paused;-webkit-animation-play-state: paused;}



.mask_box{ width: 100%; height: 1334px; position: absolute; top: 0; left: 0; background: #000000; opacity: 0.4;}
.bg_box{ width: 100%; position: absolute; top: 0; left: 0;}


/*提示弹窗*/
.pop_tips{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101;}
.pop_mask{ width: 100%; height: 1334px; background: #000000; opacity: 0.4; position: absolute; top: 0; left: 0;}
.pop_bg{ width: 80%; height: auto; position: absolute; top: 30%; left: 10%;}
.pop_reset_btn{ width: 49%; height: 42%; position: absolute; top: 58%; left: 0.6%;}
.pop_sure_btn{ width: 49%; height: 42%; position: absolute; top: 58%; left: 50.6%;}



/*播放录音弹窗*/
.play_video_pop{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101;}
.play_video_pop .pop_mask{ opacity: 0.4;}
.pop_video_pop_bg{ width: 72.26%; height: auto; position: absolute; top: 16.4%; left: 13.87%;}
.pop_video_pop_bg ul{ width: 100%; height: 60%; position: absolute; top: 41.2%; left: 0; display: none;}
.pop_video_pop_bg li{ width: 68%; height: 11.7%; float: left; margin: 0 16%;}
.pop_video_pop_bg li .list_user{ width: 65%; height: 100%; line-height: 220%; float: left; font-size: 100%; color: #ffffff; margin-left: 5%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pop_video_pop_bg li span{ width: 14%; height: auto; float: right; margin:2% 5% 0 0;}
.pop_video_pop_bg .pop_video_wave{ width: 92.61%; height: auto; position: absolute; top: 38.99%; left: 3.69%;}
.pop_video_pop_bg .pop_video_icon{ width: 38.37%; height: auto; position: absolute; top: 36.9%; left: 30.815%;}
.pop_video_pop_bg .play_video_pop_btn{ width: 99%; height: 10%; position: absolute; bottom: 0%; left: 0.6%;}
.pop_video_pop_bg .pop_video_prve{ width: 5.71%; height: auto; position: absolute; top: 71.4%; left: 17.6%; padding: 5%;}
.pop_video_pop_bg .pop_video_next{ width: 5.71%; height: auto; position: absolute; top: 71.4%; right: 17.6%; padding: 5%;}
.pop_video_pop_bg .pop_video_light{ width: 47%; position: absolute; top: 34.4%; left: 26.5%;}
.pop_video_pop_bg .pop_video_play_btn{ width: 11.2%; height: auto; position: absolute; top: 73%; left: 44.4%;}



.loading_pop{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 101;}
.loading_pop .loading_pop_bg{ width: 80%; height: auto; position: absolute; top: 30%; left: 10%;}


/*开场动画*/
@-webkit-keyframes startTopLeft{
    0%{ width: 0px; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 17.6%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 17.6%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 17.6%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 11.7%; top:10.4%; height: 29.4%; -webkit-transform:scale(1.368);}
}
@-moz-keyframes startTopLeft{
    0%{ width: 0px; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 17.6%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 17.6%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 17.6%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 11.7%; top:10.4%; height: 29.4%; -webkit-transform:scale(1.368);}
}
.startTopLeft{ animation: startTopLeft 3.6s ease 2.6s both; -webkit-animation: startTopLeft 3.6s ease 2.6s both;}

@-webkit-keyframes startTopRight{
    0%{ width: 0px; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 50%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 50%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 56%; top:10.4%; height: 29.4%; -webkit-transform:scale(1.369);}
}
@-moz-keyframes startTopRight{
    0%{ width: 0px; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 50%; top:12.5%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 50%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 50%; top:12.5%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 56%; top:10.4%; height: 29.4%; -webkit-transform:scale(1.369);}
}
.startTopRight{ animation: startTopRight 3.6s ease 2.6s both; -webkit-animation: startTopRight 3.6s ease 2.6s both;}

@-webkit-keyframes startBottomLeft{
    0%{ width: 0px; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 17.6%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 17.6%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 17.6%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 11.7%; top:50.6%; height: 29.4%; -webkit-transform:scale(1.368);}
}
@-moz-keyframes startBottomLeft{
    0%{ width: 0px; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 17.6%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 17.6%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 17.6%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 11.7%; top:50.6%; height: 29.4%; -webkit-transform:scale(1.368);}
}
.startBottomLeft{ animation: startBottomLeft 3.6s ease 2.6s both; -webkit-animation: startBottomLeft 3.6s ease 2.6s both;}

@-webkit-keyframes startBottomRight{
    0%{ width: 0px; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 50%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 50%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 56%; top:50.6%; height: 29.4%; -webkit-transform:scale(1.369);}
}
@-moz-keyframes startBottomRight{
    0%{ width: 0px; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    25%{ width: 32.4%; left: 50%; top:66.9%; height: 4.4%; -webkit-transform:scale(1);}
    50%{ width: 32.4%; left: 50%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    75%{ width: 32.4%; left: 50%; top:41.9%; height: 29.4%; -webkit-transform:scale(1);}
    100%{ width: 32.4%; left: 56%; top:50.6%; height: 29.4%; -webkit-transform:scale(1.369);}
}
.startBottomRight{ animation: startBottomRight 3.6s ease 2.6s both; -webkit-animation: startBottomRight 3.6s ease 2.6s both;}

@-webkit-keyframes ship_roll{
    0%{ -webkit-transform:translateY(0px)}
    100%{ -webkit-transform:translateY(580px)}
}
@-moz-keyframes ship_roll{
    0%{ -moz-transform:translateY(0)}
    100%{ -moz-transform:translateY(580px)}
}
.ship_roll{ animation: ship_roll 1.8s ease 5.1s both; -webkit-animation: ship_roll 1.8s ease 5.1s both;}

@-webkit-keyframes startWordIn{
    0%{ opacity:0;}
    25%{ opacity:0;}
    50%{ opacity:0;}
    75%{ opacity:1; width: 62.4%; top: 20%; left: 18.8%;}
    100%{ opacity:1;}
}
@-moz-keyframes startWordIn{
    0%{ opacity:0;}
    25%{ opacity:0;}
    50%{ opacity:0;}
    75%{ opacity:1; width: 62.4%; top: 20%; left: 18.8%;}
    100%{ opacity:1;}
}
.startWordIn{ animation: startWordIn 3.6s ease 2.6s both; -webkit-animation: startWordIn 3.6s ease 2.6s both;}


@-webkit-keyframes btnJump {
    0{ -webkit-transform:scale(0);}
    50%{ -webkit-transform:scale(1.4);}
    100{ -webkit-transform:scale(0);}
}
@-moz-keyframes btnJump { 
    0{ transform:scale(0);}
    50%{ transform:scale(1.4);}
    100{ -webkit-transform:scale(0);}
}
.btnJump{ animation: btnJump 1s ease infinite both; -webkit-animation: btnJump 1s ease infinite both;}

/*闪光*/
@-webkit-keyframes glint {
    0{ -webkit-transform:rotate(0deg) scale(0.1);}
    50%{ -webkit-transform:rotate(180deg) scale(1.6);}
    100%{ -webkit-transform:rotate(360deg) scale(0.1);}
}
@-moz-keyframes glint { 
    0{ transform:rotate(0deg) scale(0.1);}
    50%{ transform:rotate(180deg) scale(1.6);}
    100%{ transform:rotate(360deg) scale(0.1);}
}
.glint{ animation: glint 2s ease infinite both; -webkit-animation: glint 2s ease infinite both;}

/*宝石收集成功*/
@-webkit-keyframes GemSuccess {
    0{ top:21%; left: 35%; width: 30%;}
    100%{ top:30%; left: 28.5%; width: 43%; }
}
@-moz-keyframes GemSuccess { 
    0{ top:21%; left: 35%; width: 30%;}
    100%{ top:30%; left: 28.5%; width: 43%;}
}
.GemSuccess{ animation: GemSuccess 2s ease both; -webkit-animation: GemSuccess 2s ease both; animation-play-state: paused;-webkit-animation-play-state: paused;}

/*宝石移动到王冠*/
@-webkit-keyframes GemMove {
    0{ -webkit-transform:rotate(0deg) scale(1); top: 39%; opacity: 1;}
    100%{ -webkit-transform:rotate(360deg) scale(0.3); top: 22.8%; opacity: 1;}
}
@-moz-keyframes GemMove { 
    0{ transform:rotate(0deg) scale(1); top: 39%; opacity: 1;}
    100%{ transform:rotate(360deg) scale(0.3); top: 22.8%; opacity: 1;}
}
.GemMove{ animation: GemMove 2s ease both; -webkit-animation: GemMove 2s ease both;}



@media only screen and (max-width:480px){
    .load_box .load_word{ font-size: 20px; line-height: 26px;}
    .mail_box .mail_word{ font-size: 20px; line-height: 26px;}

    .rule_box .rule_title{ font-size: 20px;}
    .connect_box .connect_title{ font-size: 20px;}

    .success_box .code_box_word{ font-size:12px; line-height: 16px;}
    .success_box .success_word{ font-size:16px;}

    .common_box .random_num1{ font-size: 12px;}
    .common_box .random_num2{ font-size: 10px;}
    .common_box .random_num3{ font-size: 10px;}
}
@media only screen and (max-width:360px){
    .load_box .load_word{ font-size: 16px; line-height: 24px;}
    .mail_box .mail_word{ font-size: 16px; line-height: 24px;}

    .rule_box .rule_title{ font-size: 14px;}
    .connect_box .connect_title{ font-size: 14px;}

    .success_box .code_box_word{ font-size:12px; line-height: 16px;}
    .success_box .success_word{ font-size:14px;}

    .common_box .random_num1{ font-size: 9px;}
    .common_box .random_num2{ font-size: 7px;}
    .common_box .random_num3{ font-size: 7px;}
}
@media only screen and (max-width:320px){
    .load_box .load_word{ font-size: 16px; line-height: 22px;}
    .mail_box .mail_word{ font-size: 16px; line-height: 22px;}

    .rule_box .rule_title{ font-size: 12px;}
    .connect_box .connect_title{ font-size: 12px;}

    .success_box .code_box_word{ font-size:8px; line-height: 16px;}
    .success_box .success_word{ font-size:12px;}
}