@font-face {
    /* font-properties */
    font-family: 'impact';
    src: url('../font/impact.ttf')
}

.pre100 {
    height: 100%;
    width: 100%;
}

.block_50 {
    height: 50px;
}

.block_30 {
    height: 30px;
}

.block_20 {
    height: 15px;
}

.block_35 {
    height: 35px;
}

.block_50_color {
    height: 50px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
}

.block_150 {
    height: 150px;
}

.display_none {
    display: none;
}

.display_block {
    display: block;
}

input::-webkit-input-placeholder {
    color: #aab2bd;
    text-align: left;
}

* {
    margin: 0;
    padding: 0;
    font-style: normal;
}

li {
    list-style: none
}

img {
    vertical-align: top;
    border: none
}

html, body {
    height: 100%;
    width: 100vw;
    background: rgba(256, 256, 256, 0);
}

#body {
    height: 100%;
    width: 100vw;
    overflow-x: hidden;
}

#header {
    height: 50px;
    z-index: 100;
}

#icon_header {
    height: 100%;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
    /*background: -o-linear-gradient(left,#FFA75B,#FB7E63);*/
    /*background: -moz-linear-gradient(left,#FFA75B,#FB7E63);*/
    /*background: linear-gradient(left,#FFA75B,#FB7E63);*/
    color: #FFFFFF;
    text-align: center;
    line-height: 50px;
}

#icon_header img {
    height: 20px;
    width: 200px;
    vertical-align: middle;
}

.bold_span {
    font-weight: bold;
}

#icon_header i {
    display: table-cell;
    vertical-align: middle;
}

#game_title {
    height: 5vh;
    padding-top: 5vh;
    font-size: 23px;
    color: #ff8d5b;
    text-align: center;
}

#game_title_div {
    vertical-align: text-bottom;
}

#game_team_div {
    margin-bottom: 20px;
    height: auto;
}

#game_team {
    height: auto;

}

#games_div {
    margin-left: 5%;
    width: 90%;
}

.game_div {
    height: 100%;
}

.game_div:hover {
    cursor: pointer;
}

.game {
    height: calc(100% - 3.8vh);
    width: calc(100% - 4.4vw);
    margin: 3.8vh 2.2vw 0 2.2vw;
    border-radius: 10px;
}

.game_select_tick {
    height: calc(100% - 3.6vh);
    width: calc(100% - 4.4vw);
    z-index: 10;
    position: absolute;
    bottom: 0;
}

.game_img {
    width: 98%;
    z-index: -1;
    margin-bottom: 2px;
    /*position: absolute;*/
    /*bottom: 2px;*/
    /*left: 15px;*/
}

#button_div {
    margin-top: 10vh;
    height: auto;
    width: 100%;
    margin-bottom: 10vh;
}

#button {
    height: 30px;
    font-size: 25px;
}

#button_valid {
    margin-left: 5%;
    width: 90%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
    box-shadow: 0px 10px 50px -10px #FB7E63;
}

#button_valid:hover {
    cursor: pointer;
}

#button_valid:active {
    background: #dc743e;
}

#button_invalid {
    margin-left: 5%;
    width: 90%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #A0A0A0, #606060);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.input_box {
    margin-bottom: 20px;
    height: auto;
}

.input_div {
    height: auto;
    margin-left: 50%;

}

.input {
    z-index: 23;
    margin-left: -45%;
    width: 90%;
    height: 50px;
    border-radius: 25px;
    border: #DADADA 2px solid;

    font-size: 20px;
}

.input_error {
    margin-left: -45%;
    width: 90%;
    height: 50px;
    border-radius: 25px;
    border: red 2px solid;
    text-indent: 20%;
    font-size: 20px;
}

.input_tip {
    margin-left: -43%;
    width: 86%;
    height: 25px;
    font-size: 15px;
    color: #FCB477;
    text-align: right;
    text-decoration: underline;
}

.input_tip:hover {
    cursor: pointer;
}

#code_img_div {
    margin-left: calc(45% - 117px);
    margin-top: -77px;
    position: absolute;
    height: 50px;
    border-radius: 23px;
    width: 120px;
    background: #D9D9D9;
    line-height: 50px;
    text-align: center;
}

#code_img {
    height: 25px;
    vertical-align: middle;
}

#uid {
    background: url("../image/icon/user.png") no-repeat left 8% bottom 13px;
    background-size: 22px 26px;
    text-indent: 20%;
}

#code {
    background: url("../image/icon/code.png") no-repeat left 8% bottom 13px;
    background-size: 22px 26px;
    text-indent: 20%;
}

#help_img_div {
    background-color: #F5F5F5;
    width: 340px;
    height: 400px;
    display: none;
    border-radius: 20px;
}

#help_text {
    background-color: #F5F5F5;
    margin-left: 55px;
    padding-top: 20px;
    width: 250px;
    height: 30px;
    text-align: left;
    font-size: 18px;
    color: #6a6a6a;
    border-radius: 20px;
}

#help_img_div img {
    margin-top: 20px;
    margin-left: 20px;
    width: 300px;
    height: 260px;
}

#help_close {
    padding-top: 23px;
    padding-right: 32px;
    border-radius: 20px;
    background-color: #F5F5F5;
    text-align: right;
    font-size: 15px;
    color: #FDA757;
}

#help_close:hover {
    cursor: pointer;
}

#help_ {
    background-color: #F5F5F5;
    margin-left: 45px;
    padding-top: 20px;
    width: 250px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    color: #6a6a6a;
    border-radius: 20px;
}

#error_tip {
    padding-top: 10px;
    height: 20px;
    font-size: 15px;
    margin-left: 10%;
    color: red;
}

#error_tip i {
    vertical-align: bottom;
}

#user_data_box {
    height: 120px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);

}

#user_data_div {
    height: 100%;
}

#user_data {
    float: left;
    height: 100%;
    width: 70%;
    background: url("../image/line.png") no-repeat right 0 top 10px;
    background-size: 4px 100px;

}

#user_img {
    width: 30%;
    height: 100%;
    float: right;
    line-height: 120px;
}

#user_data img {
    margin-right: 15px;
    width: 90%;
    max-width: 100px;
    border-radius: 50%;
    vertical-align: middle;
}

#user_text {
    height: 70px;
    float: right;
    width: 60%;
    padding-top: 30px;
    padding-bottom: 35px;
}

#user_text div {
    height: 50%;
    line-height: 35px;
    color: #FBFFFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#user_uid {
    font-size: 14px;
}

#user_name {
    font-size: 18px;
}

#game_data {
    float: left;
    width: 30%;
    height: 100%;
    text-align: center;
    color: #FFEFDD;
}

#game_data img {
    margin-top: 10px;
    margin-bottom: 5px;
    height: 70px;
    width: 70px;
}

.orange_icon {
    height: 28px;
}

.icon_text_div_big {
    width: 100%;
    position: static;
}

.icon_text_big {
    width: 100%;
    background: #FFA75B;
    color: #FFFFFF;
    text-align: center;
    line-height: 28px;

}

.icon_text_big i {
    margin-left: 20px;
    font-size: 18px;
    vertical-align: middle;
}

.icon_text_big img {
    margin-top: 6px;
    height: 20px;
}

.icon_text_div_small {
    height: 100%;
    width: 100%;
}

.icon_text_small {
    width: 100%;
    background: #FFA75B;
    color: #FFFFFF;
    text-align: left;
    line-height: 28px;

}

.icon_text_small i {
    margin-left: 4vw;
    font-size: 18px;
    vertical-align: middle;
}

.error_span_big {
    line-height: 28px;;
    margin-left: -41%;
    position: relative;
    color: #D10600;
    font-size: 14px;
    vertical-align: middle;
}

.error_span_big_card_box {
    width: 100%;
    height: 14px;
}

.error_span_big_card {
    margin-left: 30px;
    line-height: 14px;
    color: #D10600;
    font-size: 14px;
    vertical-align: middle;
}

.error_span_small {
    /*display: inline-block;*/
    color: #D10600;
    float: right;
    margin-right: 5%;
    font-size: 18px;
    vertical-align: middle;
}

.error_span_small_card {
    /*display: inline-block;*/
    color: #D10600;
    float: right;
    margin-right: 5%;
    font-size: 18px;
    vertical-align: middle;
}

.icon_text_small img {
    margin-top: 6px;
    margin-left: 4vw;
    height: 20px;
}

.grey_icon {
    height: 18px;
    background: #E1E1E1;
}

.icon_text_div_grey {
    height: 100%;
    width: 100%;
    margin-left: 50%;
}

.icon_text_grey {
    background: #E1E1E1;
    width: 100%;
    color: #A9A9A9;
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
}

.icon_text_grey i {
    margin-left: 15px;
    font-size: 15px;
    vertical-align: middle;
}

.icon_text_grey img {
    margin-top: 1px;
    height: 15px;
}

#channel_team_div, #bank_team_div, #wallet_team_div {
    height: 100px;
    margin-bottom: 20px;
}

#channel_team, #bank_team, #wallet_team {
    height: 100%;
}

#left_scroll, #bank_left_scroll, #wallet_left_scroll {
    position: absolute;
    top: 45px;
    left: -4%;
}

#right_scroll, #bank_right_scroll, #wallet_right_scroll {
    position: absolute;
    top: 45px;
    right: -5%;
}

.channels_div, .banks_div, .wallets_div {
    height: 190px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow-x: auto;
}

.channels_div::-webkit-scrollbar , .banks_div::-webkit-scrollbar, .wallets_div::-webkit-scrollbar  {
    width: 0;
    height: 0;
    display: none;
}

.channel_div, .bank_div, .wallet_div {
    width: 180px;
    height: 95px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.channel, .bank, .wallet {
    height: 90%;
    width: 90%;
    margin: 2.5% 2.5% 2.5% 2.5%;
    border: 1px #CFCFCF solid;
    border-radius: 15px;
    text-align: center;
}

.channel_select {
    height: calc(90% - 4px);
    width: calc(90% - 4px);
    margin: 2.5% 2.5% 2.5% 2.5%;
    border: 3px #3BB755 solid;
    border-radius: 15px;
    background: url("../image/select.png") no-repeat right -2px bottom -2px;
    background-size: 30px 30px;
    text-align: center;
}

.channel_select img {
    margin-top: 22px;
    height: 33px;
    width: 110px;
    z-index: -1;
}

.channel img, .bank img, .wallet img {
    margin-top: 24px;
    height: 33px;
    width: 110px;
    z-index: -1;
}

.channel:hover, .bank:hover, .wallet:hover {
    border: 1px #77b782 solid;
}

#goods_team_div {
    margin-bottom: 20px;
}

#goods_team {
    height: 100%;
}

.goods {
    margin-top: 7px;
    margin-left: 3%;
    height: 60px;
    width: 94%;
    border: #FFA75B 1px solid;
    border-radius: 10px;

}

.goods_select {
    margin-top: 7px;
    margin-left: 3%;
    height: 60px;
    width: 94%;
    border: #30B44E 1px solid;
    border-radius: 10px;

}

.chips_img {
    float: left;
    height: 100%;
    margin-left: 5%;
}

.chips_img img {
    height: 54px;
    margin-top: 0;
}

.chips_num_box {
    height: 100%;
    width: calc(95% - 90px - 54px);
    float: left;
}

.no_dis {
    text-decoration: line-through
}

.discount {
    color: #ed480a;
}

.chips_num {
    line-height: 15px;
    margin-top: 15px;
    height: 15px;
    color: #919090;
    text-align: left;
    font-size: 6px;
    vertical-align: text-bottom;
    text-indent: 20px;
    font-weight: bolder;
    font-family: Impact;
    letter-spacing: 1px;
}

.chips_num_up {
    line-height: 20px;
    margin-bottom: 10px;
    height: 20px;
    color: #5E5E5E;
    text-align: left;
    font-size: 15px;
    vertical-align: text-top;
    text-indent: 20px;
    font-weight: bolder;
    font-family: Impact;
    letter-spacing: 1px;
}

.chips_num_small {
    margin-left: 0%;
}

.chips_num_big {
    margin-left: 15%;
}

.goods .chips_price {
    border-radius: 30px 5px 5px 30px;
    background-color: #FFA75B;
    width: 90px;
    height: 100%;
    float: right;
    display: inline-block;
    line-height: 60px;
    color: white;
    text-align: left;
    font-size: 12px;
    text-indent: 25px;
}

.goods_select .chips_price {
    border-radius: 30px 5px 5px 30px;
    background-color: #30B44E;
    width: 90px;
    height: 100%;
    float: right;
    display: inline-block;
    line-height: 60px;
    color: white;
    text-align: left;
    font-size: 12px;
    text-indent: 25px;
}

#submit_box {
    height: 100px;
}

#submit_div {
    height: 100%;
    background-color: blue;
}

#submit_input {

}

#submit_button_box {
    padding-top: 15px;
    background-color: #DEDEDE;
    height: 80px;
}

#submit_button_valid {
    width: 74%;
    margin-left: 13%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
    box-shadow: 0 10px 50px -10px #FB7E63;
}

#submit_button_valid:hover {
    cursor: pointer;
}

#submit_button_valid:active {
    background: #dc743e;
}

#submit_button_valid2 {
    width: 74%;
    margin-left: 13%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
    box-shadow: 0 10px 50px -10px #FB7E63;
}

#submit_button_valid2:hover {
    cursor: pointer;
}

#submit_button_valid2:active {
    background: #dc743e;
}

#submit_button_valid_card {
    width: 74%;
    margin-left: 13%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #FFA75B, #FB7E63);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
    box-shadow: 0 10px 50px -10px #FB7E63;
}

#card {
    width: 61%;
    margin-left: 3%;
    height: 50px;
    border-radius: 20px;
    line-height: 50px;
    text-align: left;
    vertical-align: middle;
}

#submit_button_valid_card:hover {
    cursor: pointer;
}

#submit_button_valid_card:active {
    background: #dc743e;
}

#submit_button_invalid {
    width: 74%;
    margin-left: 13%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #A0A0A0, #606060);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
}

#submit_button_invalid_card {
    width: 20%;
    margin-left: 10%;
    height: 50px;
    border-radius: 25px;
    background: -webkit-linear-gradient(left, #A0A0A0, #606060);
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: white;
}

#submit_error_tip {
    padding-top: 10px;
    height: 20px;
    font-size: 15px;
    margin-left: -40%;
    color: red;
}

#submit_error_tip i {
    vertical-align: bottom;
}

#card {
    text-indent: 5%;
}

#phone {
    text-indent: 5%;
}

#success_user_data_box {
    height: 120px;
}

#success_user_data_div {
    height: 100%;
}

#success_user_data {
    float: left;
    height: 100%;
    width: 70%;
    background: url("../image/line2.png") no-repeat right 0 top 10px;
    background-size: 3px 75px;

}

#success_user_img {
    width: 30%;
    height: 100%;
    float: right;
    line-height: 120px;
}

#success_user_data img {
    margin-right: 15px;
    width: 90%;
    max-width: 100px;
    border-radius: 50%;
    vertical-align: middle;
}

#success_user_text {
    height: 70px;
    float: right;
    width: 60%;
    padding-top: 30px;
    padding-bottom: 35px;
}

#success_user_text div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#success_user_uid {
    height: 15px;
    line-height: 15px;
    font-size: 14px;
    color: #838383;
}

#success_user_chips {
    margin-top: 10px;
    background: url("../image/coin.png") no-repeat top 0 left 2px;
    background-size: 15px 15px;
    text-indent: 19px;
    height: 15px;
    line-height: 15px;
    font-size: 14px;
    color: #838383;
}

#success_user_name {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    color: #858585;
}

#success_game_data {
    float: left;
    width: 30%;
    height: 100%;
    text-align: center;
    color: #838383;
}

#success_game_data img {
    margin-top: 10px;
    margin-bottom: 5px;
    height: 70px;
    width: 70px;
}

#goods_data_div {
    height: 80px;
}

#goods_data_box {
    height: 80px;
}

#goods_data1 {
    float: left;
    height: 100%;
    text-align: center;
    line-height: 80px;
    width: 25%;
}

#goods_data1 img {
    height: 30px;
    vertical-align: middle;
}

#goods_data2 {
    color: #6b6b6b;
    float: left;
    height: 100%;
    text-align: right;
    width: 50%;
    line-height: 80px;
}

#goods_data2 i {
    width: 50%;
    font-size: 15px;
    vertical-align: middle;
    margin-left: 50px;
    letter-spacing: 1px;
}

#goods_data3 {
    color: #434343;
    float: left;
    height: 100%;
    text-align: left;
    width: 30%;
    line-height: 80px;
}

#goods_data3 i {
    vertical-align: middle;
}

#result_box {
    height: 200px;
}

#result {
    text-align: center;
    height: 200px;
}

#result_img {
    margin-top: 40px;
    height: 100px;
}

#result_img img {
    height: 100px;
}

#success_text {
    margin-top: 15px;
    color: #71C346;
    font-size: 30px;
}

#fail_text {
    margin-top: 15px;
    color: #DF5241;
    font-size: 30px;
}

#tid_text {
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    color: #FB7E63;
}