*{ margin: 0; padding: 0; font-family: "Arial"; -webkit-tap-highlight-color: rgba(255,0,0,0);}
html{ width: 640px; height: 100%;}
body{ width: 640px; height: 100%; position: relative; margin: 0 auto; background: #fff; overflow: hidden; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
img{ width: 100%; height: auto; display:block; border: none;}
a,button{ cursor: pointer; display: block; text-decoration: none; -webkit-tap-highlight-color: rgba(255,0,0,0);}
p{ word-wrap: break-word;}
audio{ display: none;}
video{ display: block; width: 100%;}

.main_parts{ width: 640px; height: 100%; position: absolute; left: 0; left: 0; overflow: hidden;}
.part{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.part.on{ display: block;}
.border_btm{ border-bottom: 4px solid #000;}
.btm_bar{ width: 640px; height: 83px; position: absolute; left: 0; bottom: 0; background: url(../images/btm_bar_bg.jpg) no-repeat; background-size: cover;}
.back_to_index{ width: 80px; position: absolute; right: 25px; margin-top: -40px; top: 50%;}
.sign_back_index{ width: 80px; position: absolute; right: 25px; top: 40px;}
.for_loading{ display: none;}

.sign_sc_page{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; z-index: 1001; display: none;}
.sign_sc_code{ width: 260px; height: 260px; position: absolute; left: 190px; top: 270px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.sign_sc_follow{ width: 180px; height: 40px; position: absolute; left: 230px; top: 790px;}
.sign_sc_page img{ pointer-events: none;}

.loading_part{ z-index: 1000; background: #000;}
/*.loading_part p{ width: 640px; position: absolute; left: 0; top: 45%; font-size: 28px; color: #fff; text-align: center;}*/
.loading_gif{ width: 256px; position: absolute; left: 192px; top: 40%;}

.index_bg{ width: 2184px; height: 100%; position: absolute; left: -772px; top: 0; background: url(../images/index_bg.jpg) no-repeat; background-size: cover;}
.index_body{ width: 2184px; height: 1040px; position: relative;}
.index_content{ width: 2184px; position: absolute; left: 0; top: 0; z-index: 10;}
.index_creatures{ width: 2184px; height: 100%; position: absolute; left: 0; top: 0; z-index: 11;}
.index_motors{ width: 826px; position: absolute; right: 0; top: 0; z-index: 12;}
.animate_objects{ position: absolute; width: 2184px; height: 100%; left: 0; top: 0;}
.animate_objects .object{ position: absolute;}
.animate_objects .object.fog{ z-index: 13;}
.animate_objects .object.btn{ width: 41px; z-index: 14; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: btns 4s linear infinite; -webkit-animation: btns 4s linear infinite;}
.index_cloud_1{ width: 550px; left: -50px; top: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: cloud_one 4s linear infinite; -webkit-animation: cloud_one 4s linear infinite;}
.index_cloud_2{ width: 2184px; left: -40px; top: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: cloud_two 4s linear infinite; -webkit-animation: cloud_two 4s linear infinite;}
.index_cloud_3{ width: 2184px; left: 100px; top: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: cloud_thr 4s linear infinite; -webkit-animation: cloud_thr 4s linear infinite;}
.index_cloud_4{ width: 360px; left: 1300px; top: 140px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: cloud_fr 4s linear infinite; -webkit-animation: cloud_fr 4s linear infinite;}
.index_cloud_5{ width: 150px; left: 260px; top: 150px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: cloud_fv 4s linear infinite; -webkit-animation: cloud_fv 4s linear infinite;}
.index_fog_1{ width: 972px; left: -180px; bottom: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: fog_one 4s linear infinite; -webkit-animation: fog_one 4s linear infinite;}
.index_fog_2{ width: 595px; left: 630px; bottom: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: fog_two 4s linear infinite; -webkit-animation: fog_two 4s linear infinite;}
.index_fog_3{ width: 1060px; right: -100px; bottom: 0px; transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); animation: fog_thr 4s linear infinite; -webkit-animation: fog_thr 4s linear infinite;}
.index_btn1{ left: 640px; top: 520px;}
.index_btn2{ left: 930px; top: 440px;}
.index_btn3{ left: 1095px; top: 555px;}
.index_btn4{ left: 1240px; top: 440px;}
.index_btn5{ left: 1485px; top: 385px;}
.index_btn6{ left: 1665px; top: 460px;}
.animate_objects .object.areas{ z-index: 14;}
.index_clickarea_1{ width: 60px; height: 60px; left: 632px; top: 732px;}
.index_clickarea_2{ width: 139px; height: 174px; left: 884px; top: 642px;}
.index_clickarea_3{ width: 143px; height: 230px; left: 1038px; top: 725px;}
.index_clickarea_4{ width: 150px; height: 270px; left: 1190px; top: 600px;}
.index_clickarea_5{ width: 220px; height: 180px; left: 1390px; top: 600px;}
.index_clickarea_6{ width: 360px; height: 180px; left: 1390px; top: 750px; z-index: 15;}
.index_creatures .creature{ position: absolute;}
.index_creatures .helmet{ width: 60px; left: 632px; top: 732px;}
.index_creatures .wanted{ width: 139px; left: 884px; top: 642px;}
.index_creatures .board{ width: 143px; left: 1023px; top: 725px;}
.index_creatures .door{ width: 410px; left: 1206px; top: 534px;}
.index_creatures .R{ width: 50px; left: 1344px; top: 299px;}

.substations_part{ background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
.substations_list_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.substations_title{ width: 640px; margin: 0 auto; position: relative;}
.substations_intro{ width: 640px; padding: 10px 0px; background: url(../images/halo_mid.png) no-repeat; background-size: cover;}
.substations_intro p{ display: table; margin: 0 auto; font-size: 16px; color: #fff; line-height: 24px; letter-spacing: 1px; margin-bottom: 5px;}
.substations_intro p.sub{ display: table; margin: 0 auto; color: #999999;}
.substations_list{ width: 640px; list-style: none; padding-bottom: 83px;}
.substations_list li{ width: 640px; height: 177px; background: url(../images/halo_big.png) no-repeat; background-size: cover;}
.substations_list li.on p span{ display: table; float: left;}
.substations_list li p{ display: table; font-size: 25px; color: #fff; text-align: center; margin: 0 auto; line-height: 177px;}
.substations_list li p span.big{ font-size: 60px; padding-left: 25px;}
.substations_list li p span.small{ font-size: 16px; padding-right: 25px;}
.substations_list li p span.sign,.substations_list li p span.bulding{ font-size: 20px; padding: 6px 12px; border: 2px solid #f06126; border-radius: 5px; color: #f06126; line-height: 20px; margin-top: 70px; margin-left: 20px;}
.substations_list li p span.wait{ font-size: 20px; padding: 6px 12px; border-radius: 5px; color: #fff; line-height: 20px; margin-top: 70px; margin-left: 20px;}
.substations_list li p span.border{ line-height: 28px; margin-top: 75px; border-right: 2px solid #fff;}
.substations_list li p span.middot{ padding: 0 15px; color: #fff}
.substations_list li p span.main{ padding: 0px 15px; border-left: 2px solid #fff; border-right: 2px solid #fff;}
.substations_list_page .btm_bar .follow_harley{ width: 177px; position: absolute; left: 232px; top: 20px;}
.substations_sign_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none; background: #000;}
.substations_sign_part{ background: #000;}
.substations_sign_content{ width: 640px; position: absolute; left: 0; top: 0;}
.substations_sign_welfare{ width: 640px; position: absolute; left: 0; top: 600px;}
.substations_sign_welfare p{ font-size: 22px; color: #fefefe; line-height: 28px; display: table; margin: 0 auto;}
.substations_sign_btn{ width: 640px; position: absolute; left:0; bottom: 100px;}
.substations_sign_btn button{ font-size: 30px; background: transparent; border: 3px solid #fefefe; border-radius: 10px; margin: 0 auto; color: #fefefe; padding: 10px 30px;}
.substations_sign_time{ width: 396px; height: 36px; border: 1px solid #ffffff; position: absolute; left: 122px; top: 550px; box-sizing: border-box;}
.substations_sign_time .time{ width: 131px; height: 35px; display: table; float: left;}
.substations_sign_time .time.time_3,.substations_sign_time .time.time_2{ border-left: 1px solid #ffffff;}
.substations_sign_time .time.time_1{ width: 130px;}
.substations_sign_time .time.on{ background: #fff;}
.substations_sign_time .time p{ font-size: 22px; color: #ababab; display: table; line-height: 35px; margin: 0 auto;}
.substations_sign_time .time.on p{ color: #000;}
.substations_sign_back{ width: 90px; position: absolute; right: 25px; top: 40px;}


.players_list_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0;}
.players_list_page .btm_bar .follow_harley{ width: 177px; position: absolute; left: 232px; top: 20px;}
.players_title{ width: 640px; margin: 0 auto; position: relative;}
.players_intro{ width: 640px; display: table; padding: 7px 0px; background: url(../images/halo_small.png) no-repeat; background-size: cover;}
.players_intro p{ display: table; margin: 0 auto; text-align: center; font-size: 16px; color: #999999; line-height: 24px; letter-spacing: 1px;}
.players_list{ width: 640px; overflow: hidden; position: relative;}
.players_list ul{ width: 640px; list-style: none; padding-bottom: 83px;}
.players_list ul li{ width: 640px; height: 90px; background: url(../images/halo_small.png) no-repeat; background-size: cover;}
.players_list_cat{ width: 640px; height: 34px; background: #313131; display: table;}
.players_list_cat .cat_name{ display: table; float: left; font-size: 14px; line-height: 34px; color: #d3d3d3; text-align: center;}
.players_list ul li .cat_content{ display: table; float: left; height: 90px; overflow: hidden;}
.players_list_page .cat_01{ width: 190px;}
.players_list_page .cat_02{ width: 120px; text-align: left;}
.players_list_page .cat_03{ width: 200px; text-align: left;}
.players_list_page .cat_04{ width: 130px;}
.players_list ul li .cat_content .player_rank{ width: 65px; float: left; margin-left: 25px;}
.players_list ul li .cat_content .player_rank p{ display: table; margin: 0 auto; font-size: 30px; font-style: oblique; line-height: 90px; color: #999999;}
.players_list ul li .cat_content .player_pic{ width: 80px; padding: 5px;float: left;}
.players_list ul li .cat_content .player_name{ width: 100%; height: 100%;}
.players_list ul li .cat_content .player_name p{ display: table; font-size: 22px; line-height: 90px; color: #999999;}
.players_list ul li .cat_content .player_motor{ width: 100%; height: 100%;}
.players_list ul li .cat_content .player_motor p{ display: table; font-size: 16px; line-height: 22px; color: #999999; padding-top: 23px;}
.players_list ul li .cat_content .player_tips{ width: 100%; height: 100%;}
.players_list ul li .cat_content .player_tips p{ display: table; margin: 0 auto; font-size: 48px; font-style: oblique; line-height: 90px; color: #f06126; text-decoration: underline;}
.players_det_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; display: none;}
.scroll_wrap{ width: 100%; position: absolute; left: 0; top: 0;}
.photoshow_wall .scroll_wrap{ position: relative; display: table; padding-bottom: 83px;}
.player_poster{ width: 640px; margin: 0 auto; position: relative;}
.player_logo{ width: 640px; margin-top: -25px;}
.player_file{ width: 640px; margin-top: 15px;}
.player_file p.title{ width: 538px; line-height: 21px; font-size: 21px; color: #f1f1f1; margin: 0 auto; text-align: center; background: url(../images/player_column_bg.png) no-repeat; background-size: 538px 21px;}
.player_experience{ width: 640px; margin-top: 15px;}
.player_experience p.title{ width: 538px; line-height: 21px; font-size: 21px; color: #f1f1f1; margin: 0 auto; text-align: center; background: url(../images/player_column_bg.png) no-repeat; background-size: 538px 21px;}
.player_file .cols{ width: 510px; padding-left: 30px; margin: 0 auto;}
.player_file .cols p{ display: table; color: #999999; font-size: 17px; line-height: 17px; margin-top: 10px;}
.player_experience .cols{ width: 510px; padding-left: 30px; margin: 10px auto 0;}
.player_experience .cols p{ display: table; color: #999999; font-size: 17px; line-height: 27px;}
.player_tip{ width: 84px; height: 98px; position: absolute; left: 278px; bottom: 30px;}
.player_brief{ width: 400px; position: absolute; left: 85px; top: 280px;}
.player_brief .bar{ width: 20px; height: 5px; background: #f1f1f1; margin-top: 10px; margin-bottom: 10px;}
.player_brief p.player{ display: table; font-size: 34px; line-height: 48px; color: #f1f1f1;}
.player_brief p.style{ display: table; color: #f06126; margin-top: 10px;}
.players_det_back{ width: 90px; position: absolute; right: 25px; top: 40px;}


.cardgame_title{ width: 640px; margin: 0 auto; position: relative;}
.cardgame_play_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.cardgame_rank_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.cardgame_rank_cat{ width: 640px; height: 34px; background: #313131; display: table;}
.cardgame_rank_page .cat_name{ display: table; float: left; font-size: 14px; line-height: 34px; color: #d3d3d3; text-align: center;}
.cardgame_rank_page .cat_01{ width: 260px;}
.cardgame_rank_page .cat_02{ width: 200px;}
.cardgame_rank_page .cat_03{ width: 180px;}
.cardgame_rank_list ul{ width: 640px; list-style: none; padding-bottom: 177px;}
.cardgame_rank_list ul li{ width: 640px; height: 90px; background: url(../images/halo_small.png) no-repeat; background-size: cover;}
.cardgame_rank_self{ width: 640px; height: 90px; background: #f06126; position: absolute; left: 0; bottom: 83px; display: none;}
.cardgame_rank_self .cat_content{ display: table; float: left; height: 90px; overflow: hidden;}
.cardgame_rank_self .cat_content .player_rank{ width: 65px; float: left; margin-left: 25px;}
.cardgame_rank_self .cat_content .player_rank p{ display: table; margin: 0 auto; font-size: 30px; font-style: oblique; line-height: 90px; color: #000000;}
.cardgame_rank_self .cat_content .player_pic{ width: 80px; padding: 5px; float: left;}
.cardgame_rank_self .cat_content .player_name{ width: 100%; height: 100%;}
.cardgame_rank_self .cat_content .player_name p{ display: table; margin: 0 auto; font-size: 22px; line-height: 90px; color: #000000;}
.cardgame_rank_self .cat_content .player_cards{ width: 100%; height: 100%;}
.cardgame_rank_self .cat_content .player_cards p{ display: table; margin: 0 auto; font-size: 48px; font-style: oblique; line-height: 90px; color: #000000; text-decoration: underline;}
.cardgame_rank_page .cat_name .rankcat_bg{ width: 160px; height: 27px; margin: 4px auto 0px; background: url(../images/cardgame_thistation.png) no-repeat; background-size: cover;}
.cardgame_rank_page .cat_name .rankcat_bg.on{ background: url(../images/cardgame_allstation.png) no-repeat; background-size: cover;}
.cardgame_rank_page .cat_name .rankcat_bg .this{ color: #d9d9d9; display: table; float: left; font-size: 16px; line-height: 27px; padding-left: 11px;}
.cardgame_rank_page .cat_name .rankcat_bg .all{ color: #898989; display: table; float: left; font-size: 16px; line-height: 27px; padding-left: 11px;}
.cardgame_rank_page .cat_name .rankcat_bg.on .this{ color: #898989;}
.cardgame_rank_page .cat_name .rankcat_bg.on .all{ color: #d9d9d9;}
.cardgame_rank_list{ width: 640px; overflow: hidden;}
.cardgame_rank_list ul li .cat_content{ float: left; height: 90px; overflow: hidden;}
.cardgame_rank_list ul li .cat_content .player_rank{ width: 65px; float: left; margin-left: 25px;}
.cardgame_rank_list ul li .cat_content .player_rank p{ display: table; margin: 0 auto; font-size: 30px; font-style: oblique; line-height: 90px; color: #999999;}
.cardgame_rank_list ul li .cat_content .player_pic{ width: 80px; padding: 5px; float: left;}
.cardgame_rank_list ul li .cat_content .player_name{ width: 100%; height: 100%;}
.cardgame_rank_list ul li .cat_content .player_name p{ display: table; margin: 0 auto; font-size: 22px; line-height: 90px; color: #999999;}
.cardgame_rank_list ul li .cat_content .player_cards{ width: 100%; height: 100%;}
.cardgame_rank_list ul li .cat_content .player_cards p{ display: table; margin: 0 auto; font-size: 48px; font-style: oblique; line-height: 90px; color: #f06126; text-decoration: underline;}
.cardgame_rank_page .btm_bar .follow_harley{ width: 177px; position: absolute; left: 232px; top: 20px;}
.cardgame_play_page .btm_bar .follow_harley{ width: 177px; position: absolute; left: 232px; top: 20px;}
.cardgame_rank_page .btm_bar .cardgame_checkme{ width: 245px; position: absolute; right: 40px; top: 15px;}
.cardgame_play_1,.cardgame_play_2{ display: table; margin: 30px auto 0px;}
.cardgame_play_1 .card{ width: 180px; height: 242px; margin: 0px 4px; display: table; float: left; transition: 0.8s; -webkit-transition:0.8s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: relative;}
.cardgame_play_1 .card.on{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg)}
.cardgame_play_2 .card{ width: 180px; height: 242px; margin: 0px 4px; display: table; float: left; transition: 0.8s; -webkit-transition:0.8s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: relative;}
.cardgame_play_2 .card.on{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg)}
.card .card_front{ width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; z-index: 10;}
.card .card_back{ width: 100%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0;}
.card .card_back .corner{ width: 32px; display: table; position: absolute;}
.card .card_back .corner_1{ left: 0; top: 10px;}
.card .card_back .corner_2{ right: 0; bottom: 10px; -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate3d(180deg);}
.card .card_back .corner .corner_number{ width: 32px; display: table;}
.card .card_back .corner .corner_color{ width: 32px; display: table;}
.cardgame_pick{ width: 640px; display: table; margin-top: 25px; position: relative;}
.cardgame_pick_det{ display: table; margin: 0 auto;}
.cardgame_pick_det p{ width: 165px; display: table; font-size: 19px; line-height: 40px; text-align: center; background: url(../images/cardgame_pick.png) no-repeat; background-size: cover; color: #e4e4e4;}
.cardgame_task{ width: 640px; margin-top: 20px; border-top: 4px solid #000; background: url(../images/halo_big.png) no-repeat; background-size: cover; padding-bottom: 83px;}
.cardgame_task_top{ width: 640px; margin: 0 auto;}
.cardgame_task_content{ width: 640px; padding: 25px 0px 25px 0px; display: table; position: relative; box-sizing: border-box;}
.cardgame_task_content p{ display: table;}
.cardgame_task_content p.title{ font-size: 17px; color: #f06126; line-height: 37px; margin: 0 auto;}
.cardgame_task_content p.common{ font-size: 17px; color: #d4d4d4; line-height: 30px; padding-left: 15px; background: url(../images/cardgame_task_icon.png) no-repeat left center; background-size: 12px 12px; margin-left: 90px;}
.cardgame_task_content p.common_2{ font-size: 17px; color: #d4d4d4; line-height: 30px; padding-left: 15px;}
.cardgame_chekranking{ width: 50px; position: absolute; left: 40px; bottom: 20px;}
.cardgame_chekranking_sub{ width: 50px; position: absolute; left: 40px; bottom: 20px; display: none;}
.cardgame_layer{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.cardgame_layer.on{ display: block;}
.cardgame_layer_1 .layer_part_1{ width: 640px; height: 174px;}
.cardgame_layer_1 .layer_part_2{ width: 640px; height: 100%; padding-top: 285px; position: relative;}
.cardgame_layer_2 .layer_part_1{ width: 640px; height: 470px; position: relative;}
.cardgame_layer_2 .layer_part_2{ width: 640px; height: 100%; margin-top: 325px;}
.cardgame_layer_3 .layer_part_1{ width: 640px; height: 174px;}
.cardgame_layer_3 .layer_part_2{ width: 640px; height: 100%; margin-top: 621px; position: relative;}
.cardgame_layer .top_part .layer_bg{ width: 640px; height: 100%; background-color: #000; opacity: 0.7; background-image: url(../images/cardgame_layer_border.png); background-repeat: no-repeat; background-size: contain; background-position: center bottom;}
.cardgame_layer .bottom_part .layer_bg{ width: 640px; height: 100%; background-color: #000; opacity: 0.7; background-image: url(../images/cardgame_layer_border.png); background-repeat: no-repeat; background-size: contain; background-position: center top;}
.cardgame_layer_1 .layer_content{ width: 640px; position: absolute; left: 0; top: 320px;}
.cardgame_layer_2 .layer_content{ width: 640px; position: absolute; left: 0; bottom: 40px;}
.cardgame_layer .layer_content p{ display: table; font-size: 24px; margin: 0 auto; color: #fefefe; line-height: 36px;}
.cardgame_layer .layer_content button{ font-size: 24px; background: transparent; border: 2px solid #fff; border-radius: 10px; margin: 0 auto; color: #fefefe; padding: 5px 15px; margin-top: 20px;}
.cardgame_chekranking_words{ display: table; position: absolute; left: 100px; bottom: 20px; display: none;}
.cardgame_chekranking_words p{ display: table; font-size: 24px; color: #fefefe; line-height: 50px; padding-left: 30px; background: url(../images/cardgame_leftarr.png) no-repeat left center; background-size: 27px 19px;}
.cardgame_task_content .start_task{ display: table;}
.cardgame_task_content .start_task p{ display: table; color: #d4d4d4; font-size: 20px; line-height: 20px; padding: 5px 15px; border: 2px solid #d4d4d4; border-radius: 5px;}
.cardgame_task_content .start_task_1{ margin: 20px auto 0px;}
.cardgame_task_content .start_task_2{ right: 40px; top: 115px;}
.cardgame_task_content .start_task_3{ right: 40px; top: 160px;}
.cardgame_rule_layer{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none;}
.cardgame_rule_layer .layer_bg{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; opacity: 0.7;}
.cardgame_rule_layer .layer_content{ width: 640px; height: 100%; position: absolute; left: 0; top: 0;}
.cardgame_rule_layer .rule_content{ width: 640px; padding-top: 50px;}
.cardgame_rule_layer .close_layer{ width: 90px; position: absolute; left: 275px; bottom: 10px;}
.cardgame_achievement_layer{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none;}
.cardgame_achievement_layer .layer_bg{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; opacity: 0.7;}
.cardgame_achievement_layer .layer_content{ width: 640px; height: 100%; position: absolute; left: 0; top: 0;}
.cardgame_achievement_layer .rule_content{ width: 640px;}
.cardgame_achievement_layer .close_layer{ width: 90px; position: absolute; left: 275px; bottom: 90px;}
.cardgame_rule_icon{ width: 80px; position: absolute; right: 40px; top: 10px;}
.achievement_content{ width: 500px; display: table; margin: 400px auto 0; padding: 15px 0px; border-top: 2px solid #666666;  border-bottom: 2px solid #666666;}
.achievement_content p{ font-size: 30px; line-height: 50px; display: table; margin: 0 auto; color: #ffffff;}
.achievement_content p span{ font-size: 36px; color: #f06126; padding: 0 5px;}
.cardgame_backlast{ width: 80px; position: absolute; left: 25px; margin-top: -40px; top: 50%;}



.photoshow_wall_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0;}
.photoshow_play_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.photoshow_done_page{ width: 640px; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.photoshow_title{ width: 640px; margin: 0 auto; position: relative;}
.photoshow_intro{ width: 640px; display: table; padding: 7px 0px; background: url(../images/halo_small.png) no-repeat; background-size: cover;}
.photoshow_intro p{ display: table; margin: 0 auto; text-align: center; font-size: 16px; color: #999999; line-height: 24px; letter-spacing: 1px;}
.photoshow_wall_page .btm_bar .create_my_legend{ width: 172px; margin: 20px auto 0px; position: relative;}
.photoshow_wall_page .btm_bar .my_legend{ width: 38px; position: absolute; top: 22px; left: 25px;}
.photoshow_wall{ width: 640px; overflow: hidden;}
.photoshow_left_wall{ width: 300px; padding-left: 15px; float: left; display: table;}
.photoshow_right_wall{ width: 300px; padding-right: 15px; float: right; display: table;}
.photoshow_wall .wall_item{ width: 100%; position: relative; margin-bottom: 5px;}
.photoshow_wall .wall_item .like_bar{ width: 100%; height: 40px; position: absolute; left: 0; bottom: 0;}
.photoshow_wall .wall_item .like_bar .layer_bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; opacity: 0.7;}
.photoshow_wall .wall_item .like_bar .click_like{ display: table; position: absolute; left: 20px; top: 10px;}
.photoshow_wall .wall_item .like_bar .like_icon{ width: 27px; display: table; float: left;}
.photoshow_wall .wall_item .like_bar .like_number{ display: table; font-size: 14px; color: #f06126; float: left; line-height: 24px; padding: 0 5px;}
#takepicture{ position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0;}
.photoshow_operatebar{ width: 640px; height: 48px; position: absolute; left: 0; top: 0; background: #313131;}
.photoshow_operatebar .rechoose{ display: table; float: left; font-size: 18px; color: #dcdcdc; line-height: 48px; margin-left: 30px; padding-left: 20px; background: url(../images/photoshow_leftarr.png) no-repeat left center; background-size: 18px 14px;}
.photoshow_operatebar .done{ display: table; float: right; font-size: 18px; color: #dcdcdc; line-height: 48px; margin-right: 30px; padding-right: 22px; background: url(../images/photoshow_ok.png) no-repeat right center; background-size: 20px 14px;}
.photoshow_stickerts{ position: absolute; width: 640px; height: 150px; left: 0; bottom: 0; overflow: hidden; background: #626262;}
.photoshow_stickerts ul{ width: 1350px; list-style: none; height: 100%; display: table;}
.photoshow_stickerts ul li{ width: 130px; display: table; float: left; margin: 10px 0px 10px 5px; background: #313131;}
.photoshow_stickert_t{ width: 320px; position: absolute; left: 160px; top: 360px;}
.photoshow_stickert_del{ width: 96px; position: absolute; left: 272px; top: 48px; display: none;}
.photoshow_done_topbar{ width: 640px; height: 88px; position: absolute; left: 0; top: 0;}
.photoshow_done_topbar .follw{ display: table; float: left; width: 177px; margin: 30px 0px 0px 30px;}
.photoshow_done_topbar .share{ display: table; float: right; font-size: 24px; color: #dcdcdc; line-height: 34px; margin-right: 30px; margin-top: 30px; padding-right: 25px; background: url(../images/photoshow_rtarr.png) no-repeat right center; background-size: 23px 23px;}
.photoshow_done_pic{ width: 600px; position: absolute; left: 20px; top: 88px; overflow: hidden; background: url(../images/photoshow_pic_bg.jpg) no-repeat; background-size: cover;}
.photoshow_done_botbar{ width: 640px; height: 88px; position: absolute; left: 0; bottom: 0px;}
.photoshow_done_botbar p{ display: table; font-size: 24px; color: #dcdcdc; line-height: 88px; margin-left: 30px;}
.photoshow_done_code{ position: absolute; width: 100px; height: 100px; right: 161px; bottom: 25px; padding: 5px; background: #fff;}
.photoshow_done_pic_fn{ width: 600px; position: absolute; left: 20px; top: 88px; overflow: hidden;}
.photo_canvas{ position: absolute; left: 0; width: 640px;}
.photoshow_done_logo{ width: 128px; position: absolute; left: 143px; bottom: 30px;}
.photoshow_done_area{ width: 550px; position: absolute; left: 25px; top: 25px;}

.products_part{ z-index: 100;}
.products_content{ width: 560px; display: table; padding: 60px 0px; margin: 0 auto; position: relative;}
.close_products_part{ width: 90px; height: 90px; position: absolute; left: 235px; top: 855px; z-index: 100;}
.products_content_follow{ width: 75px; height: 30px; position: absolute; left: 390px; top: 800px; z-index: 100;}
.photoshow_done_back{ width: 80px; position: absolute; right: 25px; bottom: 8px;}
.photoshow_play_back{ width: 90px; position: absolute; right: 25px; bottom: 150px;}
.photoshow_in_loading{ width: 640px; display: table; position: absolute; left: 0; bottom: 85px;}
.photoshow_in_loading p{ display: table; font-size: 20px; line-height: 26px; color: #fff; margin: 0 auto;}


#adminpassword{ width: 480px; position: absolute; left: 80px; top: 350px; height: 70px; border: none; font-size: 30px;}
#admin_confirm{ width: 200px; height: 60px; font-size: 30px; display: table; color: #fff; border: 2px solid #fff; border-radius: 10px; position: absolute; left: 220px; top: 450px; text-align: center; line-height: 60px;}


.share_pic{ width: 640px; position: relative; left: 0; top: 0; overflow: hidden;}
.review_share_pic{ width: 640px; position: relative; left: 0; top: 0; overflow: hidden;}
.review_share_pic2{ width: 640px; position: relative; left: 0; top: 0; overflow: hidden;}
.review_share_pic3{ width: 640px; position: relative; left: 0; top: 0; overflow: hidden;}
.share_bar{ width: 640px; height: 83px; position: absolute; left: 0; bottom: 0;background: url(../images/btm_bar_bg.jpg) no-repeat; background-size: cover;}
.share_bar .share_bar_like{ display: table; position: absolute; left: 20px; top: 25px;}
.share_bar .share_bar_like .like_icon{ width: 35px; display: table; float: left;}
.share_bar .share_bar_like .like_number{ display: table; float: left; padding: 0 5px;}
.share_bar .share_bar_like .like_number p{ display: table; font-size: 20px; color: #f06126; line-height: 31px;}
.share_bar .share_bar_goplay{ display: table; position: absolute; right: 40px; top: 25px;}
.share_bar .share_bar_goplay p{ display: table; font-size: 24px; color: #f06126; line-height: 31px;}

.substations_learnmore{ width: 100%; position: absolute; left: 0; bottom: 140px;}
.substations_learnmore p{ font-size: 18px; color: #c9caca; display: table; margin: 0 auto;}
.substations_learnmore .follw{ display: table; width: 177px; margin: 10px auto 0px;}




.review_layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}
.review_layer2{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}
.review_layer3{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}
.review_layer4{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}
.review_layer5{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}
.review_layer6{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 10;}

.review_wall_page .follw{ display: table; width: 177px; margin: 23px auto 0px;}
.review_wall_page{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
.review_in_loading{ width: 640px; display: table; position: absolute; left: 0; bottom: 85px; display: none;}
.review_in_loading p{ display: table; font-size: 20px; line-height: 26px; color: #fff; margin: 0 auto;}
.review_wall{ width: 640px; overflow: hidden;}
.review_left_wall{ width: 300px; padding-left: 15px; float: left; display: table;}
.review_right_wall{ width: 300px; padding-right: 15px; float: right; display: table;}
.review_wall .reviewwall_item{ width: 100%; position: relative; margin-bottom: 5px;}
.review_wall .reviewwall_item .like_bar{ width: 100%; height: 40px; position: absolute; left: 0; bottom: 0;}
.review_wall .reviewwall_item .like_bar .layer_bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; opacity: 0.7;}
.review_wall .reviewwall_item .like_bar .click_like{ display: table; position: absolute; left: 20px; top: 10px;}
.review_wall .reviewwall_item .like_bar .like_icon{ width: 27px; display: table; float: left;}
.review_wall .reviewwall_item .like_bar .like_number{ display: table; font-size: 14px; color: #f06126; float: left; line-height: 24px; padding: 0 5px;}
.review_back_to_last{ width: 80px; position: absolute; right: 25px; margin-top: -40px; top: 50%;}


#picdetail{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail2{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail3{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail4{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail5{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail6{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}
#picdetail7{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; display: none; background: url(../images/harley_bg.jpg) no-repeat; background-size: cover;}

.review_picname{ position: absolute; width: 100%; left: 0; bottom: 120px;}
.review_picname p{ display: table; font-size: 25px; color: #fff; margin: 0 auto;}
.review_wall .scroll_wrap{ position: relative; display: table; padding-bottom: 83px;}

.players_list_layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.players_list_layer .layer_bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; opacity: 0.7;}
.players_list_layer .layer_content{ width: 100%; position: absolute; left: 0; top: 25%;}
.players_list_layer .layer_content .normal{ display: table; margin: 0 auto; font-size: 42px; color: #fff;}
.players_list_layer .layer_content .border{ display: table; margin: 0 auto; font-size: 32px; color: #fff; padding: 10px; border: 1px solid #fff; margin-top: 15px;}
.substations_sign_btn p{ font-size: 18px; color: #fff; display: table; margin: 50px auto 0px; text-align: center;}
.substations_sign_btn p .tel{ color: #e78122; display: inline;}







@media screen and (min-aspect-ratio: 32/50){
.substations_sign_btn{ bottom: 40px;}
}

@media screen and (min-aspect-ratio: 32/46){
.substations_sign_btn{ bottom: 0px;}
.substations_learnmore{ bottom: 80px;}
}