@charset "utf-8";

body#games {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 100%;
	display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
	
}

body#games.gamesbg01 {
    background-image: url(images/bg.jpg);
    background-size: auto;
    background-position: top center;
    background-repeat: repeat;
	
}
body#games.gamesbg02 {
    background-image: url(images/bg2.jpg);
    background-size: auto;
    background-position: top center;
    background-repeat: repeat;
	
}
#games .outerbg01{
    width: 100%;
    background-image: url(images/game01_bg.jpg);
    /*  整頁的主背景*/
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
    /*background-color: #fff0f9;*/
    color: #000;
    line-height: 1.8em;
    font-family: 'Noto Sans TC';
    font-size: 19px;
	flex: 1 1 auto;
}
#games .outerbg02{
    width: 100%;
    background-image: url(images/game02_bg.jpg);
    /*  整頁的主背景*/
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
    /*background-color: #fff0f9;*/
    color: #000;
    line-height: 1.8em;
    font-family: 'Noto Sans TC';
    font-size: 19px;
	flex: 1 1 auto;
}


#games #outer #weapper {
    width: 100%;
    max-width: 1050px;
    margin-right: auto;
    margin-left: auto;
    height: 933px;
	display: flex;
    flex-direction: column;
}

#games #outer #weapper #header {
    height: 185px;
    width: 100%;
    position: relative;
    /* background: url(images/header.png) no-repeat top left; */
}

#games #logo {
    display: block;
    width: 136px;
    height: 100px;
    position: absolute;
    top: 11px;
    left: 13px;
    z-index: 9;
}

#games .icon_bg {
    display: block;
    position: absolute;
    top: -17px;
    right: 3px;
	z-index: 1;
}

#games #outer #weapper #header #login {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    z-index: 10;
}

#login .btn02 {
    top: 63px;
}

#login .btn03 {
    position: absolute;
    display: block;
    width: 100px;
    height: 52px;
    background-image: url(images/loginbt.png);
    vertical-align: top;
    right: 35px;
    top: 92px;
}

#games #outer #weapper #header .user_id {
    position: absolute;
    right: 10px;
    top: 88px;
    color: #fff;
    z-index: 999;
    font-weight: bold;
    font-size: 16px;
}

#header .user_id .user_id_tt {
    display: flex;
    flex-direction: column;
	align-items: center;
}

.user_id_tt span {
	height: 30px;
    width: 150px;
	line-height: 30px;
    color: #ffee07;
	background-color: #17303f00;
	border-radius: 50px;
	text-align: center;
}

.user_id_tt a {
    display: inline-block;
    vertical-align: top;
    margin-left: 3px;
	margin-top: -5px;
	width: 78px;
	height: 43px;
	background-image: url(images/logoutbt.png);
}

.user_id_tt a:hover {
	background-image: url(images/logoutbta.png);
}



#header .values{
	position:relative;
    width: 100%;
    height:100%;
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.values .money_value, .values .chance_value{
	width: 195px;
    height: 100px;
	display: flex;
    flex-direction: column;
    align-items: center;	
	margin: 0 85px;
}
.values .money_value .tt, .values .chance_value .tt{
	display: flex;
	position:relative;
    width: 195px;
    height:42px;
	font-size:25px;
	font-weight: bold;
	color:#fff;
	padding: 5px 18px;
	border-radius: 50px;
	background: linear-gradient(to bottom, rgba(128, 80, 30, 0.8), rgba(78, 16, 16, 0.8));
	justify-content: flex-end;
    align-items: center;
}
.values .money_value .tt img, .values .chance_value .tt img{
	position:absolute;
    width: 59px;
    height:68px;
	top: -25px;
    left: 15px;
}

.values .txt{
	font-size:45px;
	padding: 15px 0;
	-webkit-text-stroke: 4px #582a1f;
    paint-order: stroke;
    text-shadow: -2px -2px 0 #582a1f, 2px 1px 0 #582a1f, 0px -3px 0 #582a1f, 2px 3px 0 #582a1f, -2px 3px 0px #582a1f;
    font-weight: bold;
  
}
.money_value .txt{
	color:#ffdf08;
  
}
.chance_value .txt{
	color:#ff691f;
  
}

#games #main{
	width: 100%;
	display: flex; 
	flex-direction: row;
	flex: 1 1 auto;
	padding: 10px 10px 10px 18px;
	
}
#games #main .ranking{
	width: 265px;
	display: flex; 
	flex-direction: column;
	align-items: center;
    padding: 6px 0 0;
}
.ranking .ranktitle{
	width: 15rem;
	margin-bottom: 5px;
}

.ranking .ranklist{
	width: 100%;
	height: 400px;
	display: flex; 
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 適用於 Chrome、Safari 及 Opera 等 WebKit 核心瀏覽器 */
.ranking .ranklist::-webkit-scrollbar {
  display: none; /* 將捲軸隱藏 */
}

.ranklist .place{
	width: 256px;
	height: auto;
	display: flex; 
	flex-direction: row;
	border-radius: 10px;
	border: 2px #46996b solid;
	background: linear-gradient(179deg, rgba(31, 111, 69, 0.7), rgba(14, 50, 30, 0.7));
	padding: 7px 0;
	justify-content: flex-start;
	margin: 4px 0;
}

.ranklist .place .picture {
    position:relative;
    display: block;
    width: 50px;
    height: 50px;
	margin: 0 10px;
}

.ranklist .place .picture iframe{
    position:relative;
    display: block;
	border-radius: 10px;
	border: 3px #31c57e solid;
	transform: scale(0.6);
    transform-origin: top left;
}
.place .p_tt{
    display: flex; 
	flex-direction: column;
	padding: 0;
}

.p_tt span:nth-child(1){
   color:#fff;
   font-size: 19px;
   line-height: 23px;
   font-weight: bold;
}
.p_tt span:nth-child(2){
   color:#ffeb3e;
   font-size: 17px;
   line-height: 28px;
   font-weight: bold;
}

#games .outerbg02 .ranklist .place{
	border: 2px #a2483e solid;
	background: linear-gradient(179deg, rgba(177, 38, 38, 0.7), rgba(54, 22, 15, 0.7));
	
}

#games .outerbg02 .ranklist .place .picture iframe {
    border: 3px #d54a20 solid;
}

#games #main .majian{
	display: flex; 
	flex-direction: column;
	flex: 1 1 auto;
	padding: 8px 12px 0px 13px;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
	height: 450px;
}

/* 適用於 Chrome、Safari 及 Opera 等 WebKit 核心瀏覽器 */
.majian::-webkit-scrollbar {
  display: none; /* 將捲軸隱藏 */
}

.majian .gm{
	width: 100%;
    display: inline-block;
	margin: 0px 0 10px ;
}
.majian .gm .gm_t01{
	width: 100%;
	display: flex;
    align-items: center;
	position: relative;
}
.majian .gm .gm_t01 span:nth-child(1){
	height: 29px;
	font-size:16px;
	font-weight: bold;
	line-height: 29px;
	color:#4fd6a1;
	padding: 10px;
    display: flex;
	background-color: #133823;
	border-radius:5px;
	border: 1px #4fd6a1 solid;
	align-items: center;
    justify-content: center;
	margin: 0 10px 0 0;
}
.majian .gm .gm_t01 span:nth-child(2){
	height: 29px;
	font-size:16px;
	font-weight: bold;
	line-height: 29px;
	color:#f0b71f;
	padding: 8px;
    display: flex;
	background-color: #29221c;
	border-radius:5px;
	border: 1px #f0b71f solid;
	align-items: center;
    justify-content: center;
}

.majian .gm .gm_t01 span:nth-child(3){
	font-size:18px;
	font-weight: bold;
	color:#fff;
	padding: 3px;
    display: flex;
	align-items: center;
    justify-content: center;
	position: absolute;
    right: 0;
}

.majian .gm .gm_t02{
	width: 100%;
	display: flex;
    align-items: center;
	
}

.majian .gm .gm_t02 span{
	height: 50px;
	font-size:16px;
	font-weight: bold;
	color:#eef04e;
	padding: 10px;
    display: flex;
	background-color: #143121;
	border-radius:5px;
	border: 1px #419a69 solid;
	align-items: center;
    justify-content: space-evenly;
	margin: 8px 0;
}

.majian .gm .gm_t02 span img{
	margin-left: 5px;
}

.majian .gm .gm_t03 {
	display: flex; 
	border-radius: 10px;
	border: 1px #46996b solid;
	background: linear-gradient(180deg, rgba(31, 111, 69, 0.8), rgba(14, 50, 30, 0.8));
}
.majian .gm .gm_t03 img{
	width: 100%;
	
}

#games .outerbg02 .majian .gm .gm_t01 span:nth-child(1) {
    color: #fd7462;
    background-color: #43140a;
    border: 1px #c05b44 solid;
}
#games .outerbg02 .majian .gm .gm_t02 span {
    background-color: #371d15;
    border: 1px #ba5e48 solid;
}
#games .outerbg02 .majian .gm .gm_t03 {
    border: 1px #a14f3c solid;
    background: linear-gradient(180deg, rgba(154, 48, 34, 0.8), rgba(65, 25, 25, 0.8));
}


/*** 失敗 ***/

.majian .fail .gm_t01 span:nth-child(1), .majian .fail .gm_t01 span:nth-child(2){
  text-decoration-line: line-through;
  filter: brightness(0.5); /* 數值小於1會變暗，0.5代表保留50%亮度 */
}
.majian .fail .gm_t01 span:nth-child(3){
  text-decoration-line: line-through;
}
.majian .fail .gm_t02, .majian .fail .gm_t03{
  text-decoration-line: line-through;
  filter: brightness(0.5); /* 數值小於1會變暗，0.5代表保留50%亮度 */
}

/*** 挑戰完 ***/

.majian .finish .gm_t01 span:nth-child(1), .majian .finish .gm_t01 span:nth-child(2), .majian .finish .gm_t02{
  filter: brightness(0.5); /* 數值小於1會變暗，0.5代表保留50%亮度 */
}
.majian .finish .gm_t01 span:nth-child(3){
  color:#e7cb11;
}
.majian .finish .gm_t03{
  border: 1px #fff951 solid;
  background: linear-gradient(180deg, #e7e66b, #d0a616);
}
.majian .finish .gm_t03{
  border: 1px #fff951 solid;
  background: linear-gradient(180deg, #e7e66b, #d0a616);
}

#games .outerbg02 .majian .finish .gm_t03{
  border: 1px #fff951 solid;
  background: linear-gradient(180deg, #e7e66b, #d0a616);
}


/*** 挑戰中 ***/

.majian .now .gm_t01 span:nth-child(1) {
    color: #fff;
    background: linear-gradient(180deg, #ee4618, #b3370b);
    border: 1px #ee5343 solid;
}

.majian .now .gm_t03{
  border: 1px #a5d926 solid;
  /* 套用無限循環的動畫，持續時間 1.5 秒 */
  animation: breathingGlow 1.5s infinite ease-in-out;
 
}

#games .outerbg02 .majian .now .gm_t01 span:nth-child(1) {
    color: #fff;
    background: linear-gradient(180deg, #ee4618, #b3370b);
    border: 1px #ee5343 solid;
}
#games .outerbg02 .majian .now .gm_t03{
  border: 1px #edab32 solid;
  /* 套用無限循環的動畫，持續時間 1.5 秒 */
  animation: breathingGlow 1.5s infinite ease-in-out;
 
}

@keyframes breathingGlow {
  0%, 100% {
    box-shadow: 0 0 3px rgb(255 248 44 / 50%);
  }
  50% {
    /* 中間狀態發光最強，呈現淡入到淡出的過程 */
    box-shadow: 0 0 9px 2px rgb(255 248 44 / 80%);
  }
}


#games #footer{
	width: 100%;
    height: 285px;
	display: flex; 
	flex-direction: column;
}
#games #footer .lable{
	width: 100%;
	height: 30px;
	display: flex; 
	flex-direction: row;
    justify-content: flex-end;
	padding: 0 20px 0;
}
.lable .bt{
	font-size:16px;
	font-weight: bold;
	color:#fff;
	margin: 0 1px;
	display: flex; 
	flex-direction: row;
	border-radius:8px;
	border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.lable .bt a{
	display: flex;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    align-items: center;
}

.lable .bt span{
	display: flex;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    align-items: center;
}

.lable .bt img{
    width: 1.2rem;
	margin-right: 8px;
}

.lable .bt:nth-child(1){
	border: 1px #279eb4 solid;
	border-bottom: none;
	background: linear-gradient(180deg, #077cff, #114ca5);
}
.lable .bt:nth-child(2){
	border: 1px #279eb4 solid;
	border-bottom: none;
	background: linear-gradient(180deg, #077cff, #114ca5);
}
.lable .bt:nth-child(3){
	border: 1px #bd69f2 solid;
	border-bottom: none;
	background: linear-gradient(180deg, #a630e4, #4a1587);
}
.lable .bt:nth-child(4){
	border: 1px #ff625e solid;
	border-bottom: none;
	background: linear-gradient(180deg, #ff3c00, #7f1e0e);
}

.lable .bt a:hover{
    color: #f9e540;
}

#games #footer .draw{
	width: 100%;
	display: flex; 
	flex-direction: column;
	flex: 1 1 auto;
}

.draw .txt{
	width: 100%;
	font-size:26px;
	font-weight: bold;
	color:#fff;
	text-align: center;
    padding: 24px 0 5px;
}

.draw .choice{
	width: 100%;
	display: flex; 
	flex-direction: row;
	justify-content: center;
    align-items: center;
}

.choice .card{
	width: 83px;
	margin: 0 5px;
}
.choice .card img{
	width: 100%;
}

.choice .card:hover {
  cursor: pointer;
}

#games #footer .buttons{
	width: 100%;
	display: flex; 
	flex-direction: row;
	justify-content: center;
    align-items: center;
	
}

.buttons .mj_btn01{
	width: 269px;
	position: relative;
	margin: 0 5px;
	
}


.buttons .mj_btn01 .text{
	width: 100%;
	display: flex; 
	flex-direction: row;
	position: absolute;
	left: 0;
    top: 0;
    bottom: 12%;
    right: 0;
	text-shadow: 0px 2px 2px #301e14;
}

.mj_btn01 .text .t1{
	display: flex; 
	flex-direction: column;
	justify-content: center;
    align-items: center;
	flex: 1 1 auto;
	
}

.mj_btn01 .text .t1 span:nth-child(1){
	font-size:26px;
	font-weight: bold;
	color:#fff;
	
}

.mj_btn01 .text .t1 span:nth-child(2){
	font-size:23px;
	font-weight: bold;
	color:#fff;
	margin-top: -8px;
}

.mj_btn01 .text .t2{
	width: 45%;
	display: flex; 
	justify-content: center;
    align-items: center;
	font-size:26px;
	font-weight: bold;
	color:#fff000;
	margin-left: -26%;
	
}

.mj_btn01 .text .t3{
	display: flex; 
	flex-direction: column;
	justify-content: center;
    align-items: center;
	flex: 1 1 auto;
	margin-bottom: 2.5%;
}

.mj_btn01 .text .t3 span:nth-child(1){
	font-size:23px;
	font-weight: bold;
	color:#fff;
	
}

.mj_btn01 .text .t3 span:nth-child(2){
	font-size:26px;
	font-weight: bold;
	color:#fff;
	margin-top: -8px;
}
.mj_btn01 .text .t3 span.yellow{
	font-size:26px;
	color:#fff000;
}


.buttons .mj_btn02{
	width: 269px;
	position: relative;
	margin: 0 5px;
	
}


.buttons .mj_btn02 .text{
	width: 100%;
	display: flex; 
	flex-direction: row;
	position: absolute;
	left: 0;
    top: 0;
    bottom: 18%;
    right: 0;
	text-shadow: 0px 2px 2px #301e14;
}

.mj_btn02 .text .t1{
	display: flex; 
	flex-direction: column;
	justify-content: center;
    align-items: center;
	flex: 1 1 auto;
	
}

.mj_btn02 .text .t1 span:nth-child(1){
	font-size:22px;
	font-weight: bold;
	color:#fff;
	
}

.mj_btn02 .text .t1 span:nth-child(2){
	font-size:27px;
	font-weight: bold;
	color:#fff;
	margin-top: -8px;
}


.buttons .mj_btn03{
	width: 269px;
	position: relative;
	margin: 0 5px;
}


.buttons .mj_btn03 .text{
	width: 100%;
	display: flex; 
	flex-direction: row;
	position: absolute;
	left: 0;
    top: 0;
    bottom: 15%;
    right: 0;
	align-items: center;
    justify-content: center;
	text-shadow: 0px 2px 2px #301e14;
}


.mj_btn03 .text span{
	font-size:22px;
	font-weight: bold;
	color:#fff;
	
}
.mj_btn03 .text span.yellow{
	color:#fff000;
	
}

.buttons .mj_btn01:hover, .mj_btn01:hover span, .mj_btn02:hover, .mj_btn02:hover span, .mj_btn03:hover, .mj_btn03:hover span{
  cursor: pointer;
  color:#fff000 !important;
}


/*** 彈窗 ***/

#lightbox-1_lightboxbg {
    display: none;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    z-index: 1000;
}

.white_content {
    display: none;
    position: fixed;
    width:95%;
    max-width:385px;
    height:auto;
    z-index: 1002;
    overflow: hidden;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
}

.cxbox1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height:395px;
    margin: 0 auto;
    background-color:#151623;
    border-radius: 25px;
    border: 3px #663acb solid;
    
}

.cxbox1_bt {
	line-height: 60px;
    position: relative;
    font-size:30px;
    font-weight: bold;
    color: #fff;
    background-color: #663acb;
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.cxbox1_bt a {
    font-size: 22px;
    color: #cac7e1;
    margin-right: 0.5rem;
    float: right;
    border-radius: 100px;
    border: 1px solid #cac7e1;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 32px;
    text-decoration: none;
    font-weight: 600;
    position: absolute;
    top: 18%;
    right: 0%;
    z-index: 10;
}
.cxbox1_bt a:hover {
   color: #fff;
   border: 1px solid #fff;
}

.cxbox1_bd {
    width: 100%;
    padding: 1.1rem 1.5rem;
}
.cxbox1_bd .autoplay{
    width: 100%;
    padding:0px 0px;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cxbox1_bd .autoplay .ap01{
    width: 100%;
    padding:0px 0px;
    font-size: 1.3rem;
    color: #fff;
	display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.cxbox1_bd .autoplay .ap01 .tt{
    width: 100%;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #fff;
    background-color: #000;
    border-radius: 0.75rem;
    border: 2px #603ab7 solid;
    height: 3.5rem;
    padding: 1rem;
    margin: 0.5rem 0;
}

.cxbox1_bd .autoplay .ap02{
    width: 100%;
    padding:0px 0px;
    font-size: 1.1rem;
    color: #fff;
	display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.cxbox1_bd .autoplay .ap02 .tt2{
    font-size: 1.3rem;
    color: #ffe139;
}
.cxbox1_bd .autoplay .ap02 input{
    width: 100%;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #fff;
    background-color: #000;
    border-radius: 0.75rem;
    border: 2px #603ab7 solid;
    height: 3.5rem;
    padding: 1rem;
    margin: 0.5rem 0;
	text-align: center;
}
.cxbox1_bd .autoplay select:focus-visible, .autoplay .ap02 input:focus-visible{
  outline: none;
  border: 2px #8656f5 solid!important;
}

.cxbox1_bd .ap_btn{
	width: 100%;
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.cxbox1_bd .ap_btn button{
	font-size: 1.25rem;
    color: #fff;
    border-radius: 0.75rem;
    height: 3.5rem;
    padding: 0.6rem 0;
    margin: 0.5rem 0rem;
    text-align: center;
    width: 48%;
	
}
.cxbox1_bd .ap_btn button.bt01{
    background-color: #252730;
    border: 2px #65666d solid;
}
.cxbox1_bd .ap_btn button.bt02{
    background: linear-gradient(90deg, #9f52f3, #4f3bcf);
    border: 2px #c084fc solid;
}

.cxbox1_bd .ap_btn button:hover {
  cursor: pointer;
}
.cxbox1_bd .ap_btn button.bt01{
    background-color: #252730;
    border: 2px #65666d solid;
}
.cxbox1_bd .ap_btn button.bt01:hover{
	color:#FFE818;
	border: 2px #9699ab solid;
}
.cxbox1_bd .ap_btn button.bt02:hover{
	color:#FFE818;
	border: 2px #d4a9ff solid;
}

/*** 結算下桌 彈窗 ***/

.cxbox2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height:330px;
    margin: 0 auto;
    background-color:#0f1d11;
    border-radius: 25px;
    border: 3px #3e9542 solid;
    
}

.cxbox2_bt {
	line-height: 60px;
    position: relative;
    font-size:30px;
    font-weight: bold;
    color: #fff;
    background-color: #3e9542;
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.cxbox2_bd {
    width: 100%;
    padding: 0.3rem 1.3rem;
}

.cxbox2_bd p{
    width: 100%;
    font-size: 1.4rem;
    line-height: 2.3rem;
    color: #fff;
	text-align: center;
}
.cxbox2_bd p span{
    width: 100%;
    font-size: 2.5rem;
    line-height: 3rem;
    color: #FFFD0E;
	text-align: center;
}

.cxbox2_bd .ap_btn{
	width: 100%;
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.cxbox2_bd .ap_btn button{
	font-size: 1.25rem;
    color: #fff;
    border-radius: 0.75rem;
    height: 3.5rem;
    padding: 0.6rem 0;
    margin: 0.2rem 0rem;
    text-align: center;
    width: 48%;
	
}
.cxbox2_bd .ap_btn button.bt01{
    background-color: #252730;
    border: 2px #65666d solid;
}
.cxbox2_bd .ap_btn button.bt02{
    background: linear-gradient(90deg, #21be5b, #16853f);
    border: 2px #4ade80 solid;
}

.cxbox2_bd .ap_btn button:hover {
  cursor: pointer;
}
.cxbox2_bd .ap_btn button.bt01{
    background-color: #252730;
    border: 2px #65666d solid;
}
.cxbox2_bd .ap_btn button.bt01:hover{
	color:#FFE818;
	border: 2px #9699ab solid;
}
.cxbox2_bd .ap_btn button.bt02:hover{
	color:#FFE818;
	border: 2px #a9fdc8 solid;
}

/*** 確認消耗 彈窗 ***/

.cxbox3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height:200px;
    margin: 0 auto;
    background-color:#0f1d11;
    border-radius: 25px;
    border: 3px #3e9542 solid;
    
}

.cxbox3_bt {
	line-height: 60px;
    position: relative;
    font-size:30px;
    font-weight: bold;
    color: #fff;
    background-color: #3e9542;
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.cxbox3_bd {
    width: 100%;
    padding: 0.3rem 1.3rem;
}

.cxbox3_bd p{
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.3rem;
    color: #fff;
	text-align: center;
}
.cxbox3_bd p span{
    width: 100%;
    font-size: 1.5rem;
    line-height: 3rem;
    color: #FFFD0E;
	text-align: center;
}

.cxbox3_bd .ap_btn{
	width: 100%;
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.cxbox3_bd .ap_btn button{
	font-size: 1.25rem;
    color: #fff;
    border-radius: 0.75rem;
    height: 3.5rem;
    padding: 0.6rem 0;
    margin: 0.2rem 0rem;
    text-align: center;
    width: 48%;
	
}
.cxbox3_bd .ap_btn button.bt01{
	background: linear-gradient(90deg, #21be5b, #16853f);
    border: 2px #4ade80 solid;
    
}
.cxbox3_bd .ap_btn button.bt02{
    background-color: #252730;
    border: 2px #65666d solid;
}

.cxbox3_bd .ap_btn button:hover {
  cursor: pointer;
}

.cxbox3_bd .ap_btn button.bt01:hover{
	color:#FFE818;
	border: 2px #a9fdc8 solid;
}
.cxbox3_bd .ap_btn button.bt02:hover{
	color:#FFE818;
	border: 2px #9699ab solid;
	
}

/*** 每日任務 彈窗 ***/

#mission {
    display: none;
    position: fixed;
    width: 100%;
    max-width: 735px;
    height: auto;
    z-index: 1002;
    overflow: hidden;
}

#mission .content{
    display: flex;
    width: 100%;
    height: auto;
	flex-direction: column;
}

#mission .content .top{
    width: 100%;
    height: 7.25rem;
	background-image: url("images/mission_top.png");
    background-size:contain;
    background-position: bottom center;
    background-repeat: no-repeat;
	position: relative;
}

#mission .content .top a{
	display: block;
    float: right;
    width:60px;
    height:60px;
    position: absolute;
    bottom: 35%;
    right: 2%;
    z-index: 10;
	background-image: url("images/close_bt.png");
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#mission .content .main{
    width: 100%;
    height: 66vh;
	background-image: url("images/mission_bg.png");
    background-size:contain;
    background-position: top center;
    background-repeat: repeat;
	display: flex;
    align-items: center;
    flex-direction: column;
}

/** 任務列表 **/

#mission .content .main .missionall{
    position: relative;
    display: flex;
    width: 100%;
    height: 90%;
    flex-direction: column;
	padding: 0 44px;
	overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#mission .content .main .missionall .mg{
    position: relative;
    display: flex;
    width: 100%;
    height: 123px;
	background-image: url("images/mg_bg.png");
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
	flex-direction: row;
	margin: 7px 0;
}

#mission .content .main .missionall .mg:nth-child(1){
   /*filter: brightness(0.5);*/
}

.missionall .mg .mg01{
	display: block;
	width: 232px;
    height: 123px;
}
.missionall .mg .mg01 img{
	width: 100%;
}
.missionall .mg .mg02{
    position: relative;
    display: flex;
    width: 265px;
    height: 123px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 0 3px;
}
.missionall .mg .mg02 span{
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    padding: 0 2px;
    height: 30px;
}
.missionall .mg .mg02 .level_wap {
    position: relative;
}
.mg02 .level_wap .energy_ba_tt {
    color: #fff55f;
    font-weight: bold;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
    position: absolute;
    
    z-index: 99;
    font-size: 20px;
	width: 100%;
    text-align: center;
}
.mg02 .level_wap .energy_bar_wap {
    width: 260px;
    height: 30px;
    background-color: #163b26;
    border: 2px solid #58ad55;
    overflow: hidden;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    position: relative;
    top: 6px;
    z-index: 9;
	display: flex;
    align-items: center;
}
.mg02 .level_wap .energy_bar_wap .energy_bar {
    position: relative;
    float: left;
    height: 100%;
    transition: width 0.4s ease-in-out;
    background: linear-gradient(180deg, #289c4e 0%, #1d6946 100%);
}

.missionall .mg .mg03{
    position: relative;
    display: flex;
    width: 150px;
    height: 123px;
    align-items: center;
    padding: 0 0 0 5px;
}

.missionall .mg .mg03 a{
    position: relative;
    display: block;
    width: 130px;
    height: 52px;
}

.missionall .mg .mg03 a.mgbtn01{
    background-image: url(images/mg_btn01.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.missionall .mg .mg03 a.mgbtn01:hover{
    background-image: url(images/mg_btn01a.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.missionall .mg .mg03 a.mgbtn02{
    background-image: url(images/mg_btn02.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.missionall .mg .mg03 a.mgbtn02:hover{
    background-image: url(images/mg_btn02a.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.missionall .mg .mg03 a.mgbtn03{
    background-image: url(images/mg_btn03.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.missionall .mg .mg03 a.mgbtn03:hover{
    background-image: url(images/mg_btn03.png);
	background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.missionall .mg .mg03 img{
    width: 130px;
    height: 52px;
}


#mission .content .main .missionbtn{
    position: relative;
    display: flex;
    width: 100%;
    height: 10%;
    flex-direction: row;
	justify-content: center;
    align-items: center;
	margin-top: 1rem;
}
#mission .content .main .missionbtn a{
    display: block;
    width: 200px;
    height: 72px;
	margin: 0 0.6rem;
	
}
#mission .content .main .missionbtn a.mbt01{
	background-image: url("images/missionbtn01.png");
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#mission .content .main .missionbtn a.mbt02{
	background-image: url("images/missionbtn02.png");
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#mission .content .main .missionbtn a.mbt01:hover{
	background-image: url("images/missionbtn01a.png");
    
}
#mission .content .main .missionbtn a.mbt02:hover{
	background-image: url("images/missionbtn02a.png");
    
}

#mission .content .bottom{
    width: 100%;
    height: 9.375rem;
	background-image: url("images/mission_bottom.png");
    background-size:contain;
    background-position: top center;
    background-repeat: no-repeat;
	color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.75rem;
    padding: 0 0 0 3.5rem;
}




/*** 自適應 ***/

@media screen and (max-width:1024px) {

html, body#games.gamesbg01, body#games.gamesbg02{
   background-image:none;
   background-color: #7e543c;	
}
}

@media screen and (max-width:1023px) {

html, body#games{
   overflow:hidden;
}
	
#fun-top{
	height: 0.9rem;	

}	
#fun-top iframe {
    transform: scale(0.4);
    transform-origin: top left; /* 從左上角開始縮放 */
    width: 250%; /* 倒數計算寬度，避免縮小後右邊留白 */
   
}
	
#fun-down{
	height: 2.5rem;	
    background-color: #fff;
}	
#fun-down iframe {
    transform: scale(0.4);
    transform-origin: top left; /* 從左上角開始縮放 */
    width: 250%; /* 倒數計算寬度，避免縮小後右邊留白 */
   
}

#games .outerbg01 {
    background-image: url(images/bg.jpg);
}
#games .outerbg02 {
    background-image: url(images/bg2.jpg);
}

#games #outer #weapper {
    height: 100%;
}

#games #outer #weapper #header {
    height: 11.804vh;
    background: url(images/header_bg.png) no-repeat bottom center;
    background-size: cover;
}	
#games #logo {
    width: 5rem;
    height: auto;
    top: 1rem;
    left: 0.2rem;
}
#games #logo a{
   height: 100%;
}	
#games #logo a img{
   width: 100%;
}
#login .btn03 {
    width: 4.6rem;
    height: 2.5rem;
    right: 0.5rem;
    top: 2rem;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
	 
}
	
.btn03 a, .btn03 a:hover {
    width: 100%;
    height: 100%;
	background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
	
#games .icon_bg {
    display: none;
}	

#games #outer #weapper #header .user_id {
    right: 0.3rem;
    top: 0.9rem;
    font-size: 3vw;
}
.user_id_tt span {
    height: auto;
    width: auto;
    line-height: 4.5vw;
    display: flex;
    flex-direction: column;
}
.user_id_tt a {
    margin-left: 0px;
    margin-top: -0.2rem;
    width: 4.5rem;
    height: 2.5rem;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}
	
#games #main {
    flex-direction: column;
    padding: 0.5vh 0px;
	height: 0;
	background-image: url("images/main_bg01.jpg");
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}
	
#games .outerbg02 #main {
    flex-direction: column;
    padding: 0.5vh 0px;
	height: 0;
	background-image: url("images/main_bg02.jpg");
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

#games #main .ranking {
    width: 100%;
    padding: 1vw 0 0.8vw;
}

.ranking .ranklist{
	width: 100%;
	height: auto;
	display: grid; 
	grid-auto-flow: column;
	align-items: center;
	overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
	
.ranking .ranktitle {
    width: 50vw;
    margin-bottom: 1.5vw;
}
#games #footer {
    height: 15rem;
	
}
#games #footer .draw{
	background: url(images/footer_bg.png) no-repeat top center;
    background-size: 130%;	
}

#games #footer .lable {
    height: 3.5vh;
    padding: 0 0.5vh 0;
	background: linear-gradient(180deg, rgba(31, 111, 69, 0), rgb(50 14 14 / 50%));
    position: relative; /*額外加-確保標籤列層級高於頁尾其他區塊*/
    z-index: 90;	/*額外加-確保標籤列層級高於頁尾其他區塊*/
}
	
.lable .bt {
    font-size: 15px;
}
.lable .bt a {
    padding: 0.4rem;
	/* 確保按鈕連結能正常接收觸控 */
    position: relative;
    z-index: 91;
    touch-action: manipulation; /* 消除手機端 300ms 點擊延遲 */	
}	
.lable .bt img {
    width: 1rem;
    margin-right: 0.2rem;
}

	
.draw .txt {
    font-size: 1.2rem;
    padding: 1.5vh 0 0.2vh;
}	
	
.choice .card {
    width: 4.5rem;
    margin: 0 0.5vh;
}	
	
.buttons .mj_btn01, .buttons .mj_btn02{
    width: 45vh;
	height: 4.3rem;
    margin: 0 1vw;
}	
.buttons .mj_btn03 {
    width: 13rem;
	height: 4.3rem;
    margin: 0 1vw;
}	
.buttons .mj_btn01 img, .buttons .mj_btn02 img, .buttons .mj_btn03 img{
	width: 100%;	
	height: 100%;
}


.mj_btn01 .text .t1 span:nth-child(1) {
    font-size: 1.3rem;
}
.mj_btn01 .text .t1 span:nth-child(2) {
    font-size: 1.2rem;
    margin-top: -0.8rem;
}
.mj_btn01 .text .t2 {
    width: 38%;
    font-size: 1.4rem;
    margin-left: -25%;
}
	
.mj_btn01 .text .t3 span:nth-child(1) {
        font-size: 1.1rem;
    }

.mj_btn01 .text .t3 span:nth-child(2) {
        font-size: 1.2rem;
        margin-top: -0.8rem;
   }
.mj_btn01 .text .t3 span.yellow{
	   font-size: 1.2rem;
	}

.mj_btn02 .text .t1 span:nth-child(1) {
    font-size: 1.2rem;
}	
.mj_btn02 .text .t1 span:nth-child(2) {
    font-size: 1.3rem;
    margin-top: -0.8rem;
}
	
.mj_btn03 .text span {
    font-size: 1.3rem;
}
.values img{
	width: 0.6vw;
	height: 13vw;	
}
	
.values .money_value, .values .chance_value {
    width: 24vw;
    height: 8vw;
    margin: 0 0.7rem 0;
    padding: 0; 
}
.values .money_value .tt, .values .chance_value .tt {
	width: 100%;
    height: 8vw;
    font-size: 1.1rem;
    padding: 0rem 0.5rem;
    margin-top: -1.5rem;
	justify-content: center;
}
.values .money_value .tt img, .values .chance_value .tt img {
    display: none;
}	
.values .txt {
    font-size: 7.8vw;
    padding: 0rem 0;
    margin-top: 0.2vw;
	line-height: 2rem;
}
.ranklist .place {
    width: 13rem;
    padding: 0.5rem 0.3rem;
    margin: 0.1rem 0rem 0.1rem 0.5rem;
}
.ranklist .place:nth-last-child(1) {
    margin-right: 0.5rem;
}
	
.ranklist .place .picture {
    width: 2.8rem;
    height: 0;
    margin: 0 0.5rem 0 0.2rem;
}
.ranklist .place .picture iframe {
    width: 84px;
    height: 84px;
    transform: scale(0.6);
    transform-origin: top left;
   
}
.place .p_tt {
    padding: 0 0.3rem;
}
.p_tt span:nth-child(1) {
    font-size: 1.1rem;
    line-height: 28px;
}
.p_tt span:nth-child(2) {
    font-size: 1rem;
    line-height: 25px;
}
	
#games #main .majian {
    padding: 0.5rem 0.5rem 0px 0.5rem;
}
.majian .gm {
    margin: 0px 0 3vw;
}
.majian .gm .gm_t01 span:nth-child(1) {
    height: 4vh;
    font-size: 4.5vw;
    padding: 2vw;
    margin: 0 1.5vw 0 0;
	line-height: 0px;
}
.majian .gm .gm_t01 span:nth-child(2) {
    height: 4vh;
    font-size: 4.5vw;
    padding: 2vw;
	line-height: 0px;
}
.majian .gm .gm_t01 span:nth-child(3) {
    font-size: 4vw;
    padding: 0.2vw;
}
.majian .gm .gm_t02 span {
	height: auto;
    font-size: 4.5vw;
    padding: 1.2vw 1.6vw;
    margin: 1.5vw 0;
}
.majian .gm .gm_t02 span img {
	
    margin-left: 1.5vw;
}
	
.cxbox1 {
    height: 25.5rem;
}	
.cxbox1_bt {
    line-height: 3.5rem;
    font-size: 1.7rem;
}
/*.cxbox1_bt a {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2rem;
}	
*/
.cxbox1_bd .autoplay .ap02 {
    font-size: 1.3rem;
}
.cxbox1_bd .autoplay .ap02 label {
     display: flex;
     flex-direction: column;
}
	
.cxbox2_bt {
    line-height: 3.5rem;
    font-size: 1.7rem;
}
#mission .content .top {
    height: 20vw;
}
	
#mission .content .top a{
    width: 9vw;
    height: 9vw;
    bottom: 25%;
    right: 2%;
}

	
#mission .content .bottom {
    height: 21.5vw;       
    font-size: 3vw;
    display: flex;
    line-height: 4.5vw;
    padding: 4.2vw 0 0 8vw;
	align-items: flex-start;
}
#mission .content .main .missionbtn {
    margin-top: 0.5vh;
}
	
#mission .content .main .missionbtn a {
    width: 36vw;
    height: 17vw;
    margin: 0 1.3vw;
}
	
#mission .content .main .missionall{
	padding: 0 5.5vw;
}

#mission .content .main .missionall .mg{
    height: 19vw;
	background-size: 100% 90%;
	margin: 0.05vh 0;
}
.missionall .mg .mg01 {
    width: 35%;
    height: auto;
}
.missionall .mg .mg01 img {
    margin: 0.5vh 0;
}
.missionall .mg .mg02 {
    width: 41%;
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1vw 0vw 0;
}
.missionall .mg .mg02 span {
    font-size: 3.37vw;
    padding: 0 2px;
    height: 9vw;
}
.mg02 .level_wap .energy_ba_tt {
    font-size: 3.8vw;
}
.mg02 .level_wap .energy_bar_wap {
    width: 35vw;
    height: 6vw;
    top: -1.5vw;
}
.missionall .mg .mg03 {
    width: 25%;
    height: auto;
    padding: 0 0 0 0.5vw;
}
.missionall .mg .mg03 a {
    width: 95%;
    height: 10vw;
}
.missionall .mg .mg03 img {
    width: 95%;
    height: 8vw;
}
	
}

@media screen and (max-width:414px) and (max-height:736px) {
	
#games #logo {
   top: 0.3rem;
   width: 5rem;
}
#login .btn03 {
   top: 1.2rem;
   right: 0.2rem;
}
.values .money_value .tt, .values .chance_value .tt {
   font-size: 4.2vw;
   margin-top: -1.2rem;
}
.values .txt {
   font-size: 6.5vw;
   padding: 0rem 0;
   margin-top: -0.3rem;
   line-height: 2.2rem;
}
#games #outer #weapper #header .user_id {
        top: 0.3rem;
  }
.user_id_tt a {
        margin-top: -0.2rem;
        width: 4rem;
        height: 2rem;
    }
#games #footer {
        height: 12rem;
}
.draw .txt {
       font-size: 1.05rem;
       padding: 1vh 0 0vh;
  }
.choice .card {
        width: 3.5rem;
        margin: 0 0.5vh;
  }
.buttons .mj_btn01, .buttons .mj_btn02 {
        width: 27vh;
        height: 3.8rem;
        margin: 0 1vw;
 }
.mj_btn01 .text .t1 span:nth-child(1) {
         font-size: 1.2rem; 
  }
.mj_btn01 .text .t1 span:nth-child(2) {
        font-size: 1.1rem;
        margin-top: -0.8rem;
 }
.mj_btn01 .text .t3 span:nth-child(1) {
        font-size: 1.1rem;
    }

.mj_btn01 .text .t3 span:nth-child(2) {
        font-size: 1.2rem;
        margin-top: -0.8rem;
   }
.mj_btn01 .text .t3 span.yellow{
	   font-size: 1.2rem;
	}
.mj_btn02 .text .t1 span:nth-child(1) {
        font-size: 1.1rem;
 }
.mj_btn02 .text .t1 span:nth-child(2) {
        font-size: 1.2rem;
        margin-top: -0.8rem;
 }
    

}


@media screen and (max-width:410px) {
.cxbox1 {
        height: 26.3rem;
    }
.cxbox3_bd p {
    line-height: 2rem;
    display: flex;
    flex-direction: column;
}
.cxbox3_bd p span {
    line-height: 2rem;
}
.cxbox3_bd .ap_btn button {
    margin: 0rem 0rem;
}
	
}


@media screen and (max-width:1023px) and (min-width:540px) {

#fun-top {
        height: 1.2rem;
}
#fun-top iframe {
        transform: scale(0.54);
        transform-origin: top left;
        width: 185%;
}
#fun-down {
        height: 3.2rem;
}
#fun-down iframe {
        transform: scale(0.54);
        transform-origin: top left;
        width: 185%;
}
	
#games #logo {
     width: 18vw;
     top: -0.5vw;
     left: 0.2vw;
}

#login .btn03 {
        width: 15vw;
        height: 8vw;
        right: 2vw;
        top: 3vw;
}
#games #outer #weapper #header .user_id {
	   font-size: 2.8vw;
        top: 0.5rem;
        right: 0.8rem;
 }
.user_id_tt span {
        line-height: 3.5vw;
}
.user_id_tt a {
        width: 12vw;
        height: 6.5vw;
        background-size: 100%;
}
	
.values .money_value, .values .chance_value {
        width: 25vw;
        height: 11vw;
        margin: 0 3vw 0;
        padding: 0;
}
.values .money_value .tt, .values .chance_value .tt {
        height: 5.8vw;
        font-size: 3.2vw;
        padding: 0.5vw 0;
        margin-top: -0.5vw;
		justify-content: center;
}
.values .money_value .tt img, .values .chance_value .tt img {
        display: block;
		position: relative;
        width: 5vw;
        height: 5vw;
		top: 0px;
        left: 0;
		margin-right: 0.7vw;
    }
.values .txt {
        font-size: 5.5vw;
        padding: 0rem 0;
        margin-top: 0vw;
        line-height: 5.5vw;
}
	

#games #footer {
        height: 38vw;
}
.draw .txt {
        font-size: 3.5vw;
        padding: 2.5vh 0 0.2vh;
}
.choice .card {
        width: 10vw;
        
}
.buttons .mj_btn01, .buttons .mj_btn02 {
        width: 26vh;
        height: 8.5vh;
        margin: 0 1vw;
}
	
.buttons .mj_btn01 .text {
    bottom: 22%;
	
}
.mj_btn01 .text .t1 span:nth-child(1) {
        font-size: 3.5vw;
        line-height: 6vw;
}
.mj_btn01 .text .t1 span:nth-child(2) {
        font-size: 3vw;
        margin-top: -0.5vw;
        line-height: 3.5vw;
}
.mj_btn01 .text .t2 {
        width: 39%;
        font-size: 4.5vw;
        margin-left: -20%;
}
	
.mj_btn01 .text .t3 span:nth-child(1) {
        font-size: 3vw;
        line-height: 3vw;
    }

.mj_btn01 .text .t3 span:nth-child(2) {
        font-size: 3.5vw;
        margin-top: 0.5vw;
        line-height: 4vw;
   }
.mj_btn01 .text .t3 span.yellow{
	   font-size: 3.5vw;
	}

.mj_btn01 .text .t3 {
    margin-bottom: -2%;
}
	
.mj_btn02 .text .t1 span:nth-child(1) {
        font-size: 3vw;
        line-height: 3vw;
}
.mj_btn02 .text .t1 span:nth-child(2) {
        font-size: 3.5vw;
        margin-top: 0.5vw;
        line-height: 4vw;
}
.buttons .mj_btn03 {
        width: 30vw;
        height: 10.5vw;
        margin: 0 1vw;
}
.mj_btn03 .text span {
        font-size: 3.6vw;
}
	
#games #footer .lable {
        height: 4vh;
        padding: 0 1vh 0;
}
.lable .bt {
       font-size: 2.5vw;
       margin: 0 0.3vw;
}
.lable .bt a {
        padding: 0vw 1.5vw;
}
.lable .bt img {
        width: 4vw;
        margin-right: 1vw;
}	

.ranking .ranktitle {
        width: 40vw;
 }
#games #main .majian {
       padding: 0.5rem 0.8rem 0px;
 }
.majian .gm .gm_t01 span:nth-child(1) {
        height: 5vh;
        font-size: 3.2vw;
        padding: 1.3vw;
        margin: 0 1.5vw 0 0;
}
.majian .gm .gm_t01 span:nth-child(2) {
        height: 5vh;
        font-size: 3.2vw;
        padding: 1.5vw;
}
.majian .gm .gm_t01 span:nth-child(3) {
        font-size: 3.6vw;
        padding: 0.2vw;
}
.majian .gm .gm_t02 span {
        font-size: 3.2vw;
        padding: 1.3vw 1.5vw;
        margin: 1.1vw 0;
}
	
#mission .content .bottom {
        height: 21vw;
        font-size: 2.5vw;
        line-height: 4vw;
        padding: 3vw 0 0 8vw;
 }
#mission .content .main .missionbtn a {
        width: 28vw;
        height: 12vw;
        margin: 0 1.3vw;
 }	

	
.missionall .mg .mg02 {
        width: 40%;
        padding: 1.5rem 0vw 0;
 }
.missionall .mg .mg02 span {
        font-size: 3vw;
        padding: 0 2px;
        height: 4.3vh;
 }
.mg02 .level_wap .energy_bar_wap {
        width: 34vw;
        height: 5vw;
        top: -1vw;
 }
.mg02 .level_wap .energy_ba_tt {
        font-size: 3.5vw;
 }
.missionall .mg .mg03 {
        width: 25%;
        height: auto;
        padding: 0 0 0 2vw;
 }
.missionall .mg .mg03 a {
        width: 90%;
        height: 10vw;
 }
.missionall .mg .mg03 img {
        width: 90%;
        height: 3.5rem;
 }
	
#mission .content .main .missionbtn {
        margin-top: 1vh;
}
	
}

@media screen and (max-width:950px) and (min-height:1200px) {
    
	
 .missionall .mg .mg02 {
	    width: 41%;
        padding: 2vh 0vw 0;
  }
 .missionall .mg .mg02 span {
        height: 3.6vh;
	    font-size: 2.7vw;
}

	.mg02 .level_wap .energy_bar_wap {
        width: 30vw;
        height: 4.5vw;
    }
	   .mg02 .level_wap .energy_ba_tt {
        font-size: 3.3vw;
	    
    }	
	.missionall .mg .mg03 a {
        width: 96%;
    }
}

@media screen and (max-width:540px) and (min-width:445px) {
	.missionall .mg .mg02 {
        padding: 1.8vh 0vw 0;
    }
	
	.missionall .mg .mg02 span {
        height: 4.8vh;
    }
	    .mg02 .level_wap .energy_ba_tt {
		
        font-size: 3.5vw;
    }
	.mg02 .level_wap .energy_bar_wap {
        width: 35vw;
        height: 5.8vw;
		top: -0.2vh;
    }
	.missionall .mg .mg03 img {
        width: 90%;
        height: 2.5rem;
    }
}

@media screen and (max-width:375px) and (height:667px) {
   .ranklist .place {
        width: 13rem;
        padding: 0.3rem 0.3rem;
        margin: 0.1rem 0rem 0.1rem 0.3rem;
 }
	.ranklist .place .picture {
        width: 2.8rem;
        height: 0;
        margin: 0 0.5rem 0 0.2rem;
  }
  .p_tt span:nth-child(1) {
        font-size: 1.05rem;
        line-height: 7vw;
    }
.p_tt span:nth-child(2) {
        font-size: 0.95rem;
        line-height: 7vw;
    }
.majian .gm .gm_t02 span {
        padding: 1.2vw 1.8vw;
    }
}

@media screen and (max-width:360px) {
.lable .bt {
      font-size: 3.9vw;
    }
.values .money_value .tt, .values .chance_value .tt {
      font-size: 1rem;
    }
#login .btn03 {
        width: 4.2rem;
        height: 2.5rem;
        right: 0.3rem;
        top: 1.6rem;
}
#games #logo {
        top: 0.6rem;
}
#games #footer {
       background-size: 157%;
}
#games #outer #weapper #header .user_id {
        right: 0.1rem;
        top: 0.6rem;
        font-size: 0.8rem;
}
.user_id_tt a {
        margin-top: -0.2rem;
        width: 4.2rem;
        height: 2rem;
  }

.mj_btn01 .text .t3 span:nth-child(1) {
        font-size: 1.1rem;
    }

.mj_btn01 .text .t3 span:nth-child(2) {
        font-size: 1.1rem;
        margin-top: -0.8rem;
   }
.mj_btn01 .text .t3 span.yellow{
	   font-size: 1.1rem;
}	
	
.missionall .mg .mg02 {
        padding: 0.2vw 0vw 0;
	    width: 43%;
    }
.missionall .mg .mg02 span {
        font-size: 3.5vw;
        padding: 0 2px;
        height: 9vw;
    }
 .mg02 .level_wap .energy_ba_tt {
        
        font-size: 3.8vw;
    }	
 .mg02 .level_wap .energy_bar_wap {
        width: 34vw;
        height: 6vw;
        top: -0.6vw;
    }
}