@charset "utf-8";
/*---------------------新增積分賽CSS*/
/*---------------------上方*/
.btn_login_wap {
    position: relative;
}
.btn_login {
    position: absolute;
    display: block;
    left: 786px;
    top: 0px;
    width: 180px;
    height: 62px;
    z-index: 9;
}
.btn_login:hover {
    top: 1px;
}
.btn_login_user {
    min-width: 82%;
    width: 700px;
    margin: 0 auto;
    position: absolute;
    display: block;
    top: 16px;
    right: 0;
    left: 0;
    height: 62px;
    text-align: right;
}
.btn_login_user_tt {
    color: #fff;
}
.btn_login_user_n {
    color: #fffa52;
    padding: 0 10px;
}
.slot_bg01 {
    width: 970px;
    height: 672px;
    background-image: url(images/slot_bg01.png);
    position: relative;
    display: block;
    margin: 0 auto;
    left: 0;
    top: 70px;
}
.slot_wap_L {
    position: absolute;
}
.slot_wap_01 {
    position: absolute;
    top: 82px;
    left: 114px;
}
.slot_wap_topic01 {
    width: 214px;
    height: 44px;
    position: relative;
    top: 20px;
}
.slot_wap_card_bg01 {
    position: relative;
    left: 0;
    width: 214px;
    height: 290px;
    top: 28px;
}
.slot_wap_card_bg01 img {
    max-width: 85%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: block;
    border-style: dashed;
    border-color: white;
}
.slot_wap_tt1 {
    color: #fff;
    text-align: center;
    font-size: 18px;
}
.btn_getcard {
    position: absolute;
    display: block;
    text-align: center;
    top: 42px;
    left: 604px;
    width: 103px;
}
.btn_getcard .hoverImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
}
.btn_getcard:hover .hoverImg {
    display: block;
}
.btn_getcard:hover .imageInn {
    display: block;
    opacity: 0;
}
.btn_getcard {
    display: block;
    position: relative;
    width: 214px;
    height: 80px;
    top: 0px;
    left: 0px;
}
.arrow {
    display: block;
    position: absolute;
    top: 18px;
    left: 204px;
}
.slot_wap_R {
    position: absolute;
    left: 246px;
}
.slot_wap_topic02 {
    width: 466px;
    height: 52px;
    position: relative;
}
.slot_wap_card_bg02 {
    background-image: url(images/slot_wap_card_bg02.png);
    position: relative;
    display: block;
    margin: 0 auto;
    left: 0;
    width: 462px;
    height: 317px;
}
.btn_close {
    display: block;
    position: absolute;
    width: 39px;
    height: 37px;
    top: -4px;
    left: 180px;
}
.getcard_01 > .btn_close img, .getcard_02 > .btn_close img {
    width: 39px;
    height: 37px;
}
.getcard_01 {
    position: absolute;
    top: 18px;
    left: 12px;
}
.getcard_02 {
    position: absolute;
    top: 18px;
    left: 241px;
}
.getcard_01 img, .getcard_02 img {
    width: 210px;
    height: 284px;
}
.slot_wap_getscore {
    position: relative;
    display: block;
    height: 66px;
}
.getscore_bg_01 {
    background-image: url(images/getscore_bg.png);
    width: 200px;
    height: 40px;
    position: absolute;
    margin: 18px 0 0 18px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
}
.getscore_bg_02 {
    background-image: url(images/getscore_bg.png);
    width: 200px;
    height: 40px;
    position: absolute;
    margin: 18px 0 0 18px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    left: 228px;
}
.slot_wap_tt2 {
    color: #ff0000;
    text-align: center;
    font-weight: bold;
    padding: 0 6px;
    font-family: Arial;
    font-size: 24px;
}
.slot_wap_R p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: #fff;
    text-align: center;
}
/*---------------------下方*/
.slot_bg02 {
    width: 970px;
    height: 564px;
    background-image: url(images/slot_bg02.png);
    position: relative;
    display: block;
    margin: 0 auto;
    left: 0;
}
.slot_wap_02 {
    position: relative;
    top: 13px;
    left: 144px;
}
.slot_wap_02_a {
    position: absolute;
    z-index: 999;
}
.slot_wap_02_a_bg {
    position: absolute;
    z-index: 9;
}
.slot_wap_02_b {
    position: absolute;
    left: 230px;
    z-index: 999;
}
.slot_wap_02_b_bg {
    position: absolute;
    left: 230px;
    z-index: 9;
}
.slot_wap_02_c {
    position: absolute;
    left: 462px;
    z-index: 999;
}
.slot_wap_02_c_bg {
    position: absolute;
    left: 462px;
    z-index: 9;
}
.slot_wap_notice {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0 30px 0;
}
.slot_wap_notice ui {}
.slot_wap_notice li {
    list-style-type: decimal;
}
.slot_wap_02_btn {
    position: relative;
    display: block;
    text-align: center;
    top: 194px;
}
.btn_spin_wap {
    width: 200px;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 386px;
}
.btn_spin_wap .hoverImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
}
.btn_spin_wap:hover .hoverImg {
    display: block;
}
.btn_spin_wap:hover .imageInn {
    display: block;
    opacity: 0;
}
.btn_spin_wap_02 {
    width: 200px;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 170px;
}
.btn_spin_wap_02 .hoverImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
}
.btn_spin_wap_02:hover .hoverImg {
    display: block;
}
.btn_spin_wap_02:hover .imageInn {
    display: block;
    opacity: 0;
}
.btn_cardbook {
    position: absolute;
    display: block;
    text-align: center;
    top: 42px;
    left: 604px;
    width: 103px;
}
.btn_cardbook .hoverImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
}
.btn_cardbook:hover .hoverImg {
    display: block;
}
.btn_cardbook:hover .imageInn {
    display: block;
    opacity: 0;
}
.btn_cardlist {
    position: absolute;
    display: block;
    text-align: center;
    top: 42px;
    left: 712px;
    width: 103px;
}
.btn_cardlist .hoverImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
}
.btn_cardlist:hover .hoverImg {
    display: block;
}
.btn_cardlist:hover .imageInn {
    display: block;
    opacity: 0;
}
.btn_cardbook img {
    width: 103px
}
.btn_cardlist img {
    width: 103px
}
.btn_back {
    display: block;
    position: absolute;
    top: 35px;
    right: 58px;
}
.notice_in {
    width: 80%;
    margin: 0 auto;
    color: #fff;
    padding: 10px 0 0 0;
}
.notice_in p {
    font-size: 18px;
    line-height: 18px
}
.tt_topic {
    font-size: 30px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    padding-bottom: 30px;
}
.user_coin {
    display: block;
    position: absolute;
    margin-top: 10px;
    font-size: 18PX;
    color: #1a1a1a;
    left: 0;
    right: 0;
    top: 180px;
}
.user_coin_tt {
    color: #f82331;
}
.btn_spin_tt {
    font-size: 30px;
    font-weight: bold;
    font-family: arial;
    color: #fff;
    position: absolute;
    display: block;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 56px;
    z-index: 999;
}
.btn_spin_tt_sy {
    text-shadow: 0 0 7px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 7px #000;
    -webkit-text-shadow: 0 0 7px #000;
}

.card_scoremultiple_wap {
    position: relative;
    display: block;
    margin: 0 auto;
    top: -64px;
    text-align: center;
    width: 334px;
}
.card_scoremultiple_tt {
	position: absolute;
	left: 218px;
	top: 31px;
	font-size: 34px;
	color: #f9de71;
	font-family: 'Arial Bold', sans-serif;
}

.card_scoremultiple_bg {}
.card_scoremultiple_bg img { width:334px;}

/*彈出視窗----------*/
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Initially hide the popup */
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 1000;
}
.popup-content {
    background: white;
    padding: 40px 10px;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    top: 30%;
    /*    margin-top: 50px;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    pointer-events: auto;
    border: 4px solid #ffe34e;
}
.close-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 30px;
    cursor: pointer;
    color: #aaa;
}
.close-btn:hover {
    color: #333;
}
.gacha_10ok {
    font-size: 18px;
    line-height: 30px;
    background-color: #1e73e4;
    color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 0px 10px;
}
.gacha_10no {
    font-size: 18px;
    line-height: 30px;
    background-color: #b0b0b0;
    color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 0px 10px;
}
.gacha_10tt {
    padding-bottom: 10px;
}
.gacha_10_open {
}
.gacha_10_open table {
    font-size: 15px;
}
.gacha_10_open tr {
}
.gacha_10_open td {
    width: 20%;
    vertical-align: top;
}
.gacha_10_open table img {
    max-width: 100%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}
.gacha_10_open_tt {display: inline-block;position: relative;width: 100%;margin: 0 auto;padding: 0;}
.gacha_10_open_btn {
    font-size: 17px;
    display: inline-block;
    position: relative;
    background-color: #0065e5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding: 0px 22px;
}
.gacha_10_open_btn a {
    color: #fff;
    text-decoration: none;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    z-index: 99999;
}
.modal-content {
    background: white;
    padding: 24px;
    border-radius: 16px;
    /*width: 800px;*/
	width: 1000px;
    top: 2%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    pointer-events: auto;
    border: 4px solid #ffe34e;
    margin: 0 auto;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    cursor: pointer;
}