body{ max-width: 800px; margin: auto; background-color: #ab131e;}
.example-home_hd, .h5ui-page{ max-width: 700px;}
footer.h5ui-bar.bar-fixed{ max-width: 700px; margin: auto;}
header.h5ui-bar .h5ui-bar_title{ background-color: #37363b;}
header.h5ui-bar .h5ui-bar_title{ color: #fff; font-weight: normal;}
header.h5ui-bar .h5ui-bar_item{ color: #fff;}
.h5ui-toptips.h5ui-toptips_warning{ background-color: #ebf3e4; color: #1e62b2;}
.h5ui-toptips.h5ui-toptips_warning>a{ color: #1e62b2; text-decoration: underline;}
.h5ui-page.page_img{ padding: 0;}
.h5ui-page.page_img img{ width: 100%; margin-bottom: -5px;}
header.h5ui-bar .h5ui-bar_item .h5ui-bar_arrow_left{ border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
header.h5ui-bar .h5ui-bar_item{ font-size: 15px;}
.h5ui-btn1{ background-color: #108ee9; min-width: auto; border-radius: 3px;}
.btn_tip{ font-size: 12px; margin: 10px 0 0 0;}
.btn_tip a{ color: #108ee9;}
.white_bg { width: 100%; position: absolute; background-color: #fff; z-index: -9999;}
.spacing-cell{ background-color: #fff;}
.help .h5ui-list_hd{ width: 30px; height: 30px;}
.h5ui-group{ margin-bottom: 10px;}
.h5ui-tab .tab-item .active a{ color: #108ee9; border-bottom: 3px solid #108ee9; width: 100%;}
.h5ui-list:before{ border: none; }
.h5ui-page.spacing-cell{ padding: 0; background:none; }
.cm-infobar{ display: none; }
.h5ui-dialog_x{ color: #000; background-color: #fff; text-align: center; line-height: 25px; border-radius: 25px; height: 25px; width: 25px; float: right; margin-top: -25px; }
.left{ float: left;}
.right{ float: right;}
button{ background: none; border: none; }
ul{ padding: 0; margin: 0; }
li{ list-style: none; }

/**/
.index_pic{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.index_pic img{ width: 100%; height: 100%; }
.index_pic .time{ position: absolute; width: 50px; height: 50px; top: 10px; right: 10px; background: #000; opacity: 0.7; color: #fff; border-radius: 50px; padding-top: 11px; }
.index_pic .time p{ margin: 0; line-height: 16px; text-align: center; }

.index{ width: 100%; float: left; }
.index .piece{ float: left; width: 100%; }
.index .piece img{ width: 100%; float: left; }
.index .go{ width: 100%; float: left; background: url(../images/index2.jpg) no-repeat; background-size: 100% 100%; }
.index .go img{ width: 80%; margin-left: 10%; }
.hall{ width: 100%; float: left; padding-bottom: 75px; background: url(../images/hall_bg.jpg) no-repeat #e36337; background-size: 100% 100%; }
.hall .hall_{ width: 90%; float: left; margin-left: 5%; }
.hall .hall_ ul li{ float: left; width: 46%; margin: 0 2%; }
.hall .hall_ ul li img{ width: 100%; }
.hall .piece{ width: 46%; float: left; margin: 10px 2%; background-color: #fff; padding-bottom: 20px; }
.hall .piece .pic{ width: 92%; margin: 10px 4%; }
.hall .piece .pic img{ width: 100%; border-radius: 5px; }
.hall .piece .content1{ text-align: center; font-size: 16px; font-weight: bold; color: #000; margin-top: 5px; }
.hall .piece .content2{ text-align: center; color: #cc510e; margin-top: 5px; }
.hall .piece .enter{ width: 92%; margin: 5px 0 0 4%; }

.moon_star{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: url(../images/star_bg3.jpg) no-repeat; background-size: 100% 100%; z-index: 999; }
.star_btn{ position: absolute; width: 150px; top: 54%; }
.star_btn img{ width: 100%; }
.star_bottom{ position: absolute; width: 100%; top: 63%; }
.star_bottom img{ width: 100%; }
.star_title{ float: left; width: 92%; margin: 0 0 10px 4%; }
.star_title img{ width: 100%; }
.star_rull{ width: 80%; float: left; margin-left: 10%; color: #fff; font-size: 14px; }
.star_rull p{ margin: 0 0 10px 0; }

.game{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: url(../images/moon_bg.jpg) no-repeat; background-size: 100% 100%; }
#time,#num{ position: absolute; width: 150px; text-align: center; color: #503900; height: 65px; line-height: 65px; z-index: 10; top: 20px; font-weight: bold; font-size: 16px; }
#time{ background: url(../images/time_bg.png) no-repeat; background-size: 100% 100%; left: 7%; }
#num{ background: url(../images/num_bg.png) no-repeat; background-size: 100% 100%; right: 1%; }

.cake{ width: 70px; position: absolute; z-index: 2; }
.cake_move{ width: 70px; position: absolute; z-index: 2;}
.tuzi{ width: 100px; height: 100px; position: absolute; bottom: -10px; left: 0; z-index: 1; }
.tuzi img{ width: 100%; }
.tuzi2{ display: none; }

.grade{ width: 100%; position: absolute; top: 15%; text-align: center; background: url(../images/grade_bg.png) no-repeat; background-size: 100% 100%; z-index: 999; display: none; }
.grade .content{ width: 100%; float: left; color: #6a3d00; }
.grade .content p:first-child{ font-weight: bold; font-size: 16px; }
.grade .content span{ color: #cb0039; }
.grade button{ width: 150px; margin-top: 10px; }
.grade button img{ width: 100%; }
.black_bg{ width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: #000; opacity: 0.6; z-index: 998; display: none; }
.fullbg{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; opacity: 0.6; z-index: -1; }


.gamble{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; background: url(../images/gamble_bg1.jpg) no-repeat; background-size: 100% 100%; }
.gamble_position{ position: absolute; width: 100%; bottom: 7%; }
.bowl{ float: left; width: 50%; margin-left: 25%; background: url(../images/bowl.png) no-repeat; background-size: 100% 100%; }
.bowl img{ float: left; width: 20px; height: 20px; }
.bowl .piece{ float: left; width: 100%; }
.bowl img:nth-child(1){ margin-left: 34%; margin-top: 23%; transform:rotate(25deg); }
.bowl img:nth-child(2){ margin-left: 10%; margin-top: 25%; transform:rotate(-15deg); }
.bowl img:nth-child(3){ margin-left: 28%; margin-top: 4%; transform:rotate(70deg); }
.bowl img:nth-child(4){ margin-left: 8%; margin-top: 5%; }
.bowl img:nth-child(5){ margin-left: 5%; margin-top: 10%; transform:rotate(-25deg); }
.bowl img:nth-child(6){ margin-left: 45%; margin-top: 2%; transform:rotate(45deg); }
.start_gamble{ text-align:center; display:block; margin-top: 10px; }
.start_gamble button img,.share button img,.share_img img{ width: 100%; }
.start_gamble .back{ width:32%; }
.start_gamble #start{ width:37%; }
.share{ width:100%; position: absolute; padding: 160px 10% 40px 10%; text-align: center; top: 10%; width: 80%; margin-left: 10%; background: url(../images/share_bg.png) no-repeat; background-size: 100% 100%; z-index: 1; display: none; }
.share .gamble_result{ margin-bottom: 15px; }
.share .gamble_result .piece1{ background: url(../images/resule_bg1.png) no-repeat; background-size: 100% 100%; padding: 15px 0 5px 0; }
.share .gamble_result .piece2{ background: url(../images/resule_bg2.png) no-repeat; background-size: 100% 100%; padding: 10px 0; }
.share .gamble_result img{ width: 15%; margin: 0 5%; }
.share .say{ margin-bottom: 20px; }
.share .say p{ margin: 5px 0; }
.share #restart{ width: 45%; }
.share #fenxiang{ width: 45%; }
.share_img{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; display: none; }

.gamble_bottom{ position: absolute; width: 88%; margin-left: 6%; height: 70%; top: 10%; left: 0; right: 0; background: url(../images/gamble_bottom_bg.png) no-repeat; background-size: 100% 100%; padding-bottom: 20px; display: none; }
.bottom_top{ width: 90%; float: left; margin: 30px 5% 10px 5%; }
.bottom_top_btn{ width: 31%; margin: 0 1%; float: left; }
.bottom_top_btn img{ width: 100%; }
.bottom_piece{ float: left; width: 80%; margin-left: 10%; height: 80%; overflow: hidden; }
#bottom_piece2,#bottom_piece3,#bottom_piece4{ display: none; }
.bottom_piece table{ width: 100%; text-align: center; border: 1px solid #ddd; max-height: 300px; overflow: scroll; }
.bottom_piece .message{ width: 100%; text-align: center; margin-top: 10px; }
.bottom_piece .message .add_message{ width: 100px; }
.bottom_piece .message .add_message img{ width: 100%; }

#no_chance{ width: 90%; margin-left: 5%; height: 120px; position: absolute; top: 30%; z-index: 10; background: url(../images/no_chance.png) no-repeat; background-size: 100% 100%; text-align: center; display: none; }
#no_chance img{ margin-top: 60px; width: 100px; }
.chance_show{ font-size: 16px; margin-top: 10px; }
.chance_show img{ width: 18px; }
.chance_show #chance_show{ padding: 0 5px; background-color: #3c3837; color: #fff; border-radius: 20px; font-size: 14px; margin: 0 2px; }
#say{ margin-bottom: 10px; }