:root {--theme-bg-color: rgba(36, 39, 59, 0.3);
    --theme-title-color: rgba(255, 255, 255, 0.03);
    --theme-bbg-color: rgba(0, 0, 0, 0.5);
    --in-bg-coldr: rgba(255, 255, 255, 0.03);
    --in-border-color: rgba(0, 0, 0, 0.4);
    --in-title-coldr: rgba(0, 0, 0, 0.15);
    --border-color: rgba(255,255,255,0.05);
    --main-shadow : 0 0 5px 0 rgba(0, 0, 0, 1);
    --font: #f9fafb;
    --button-active: linear-gradient(to right, rgba(43, 101, 247, 0.7), rgba(43, 101, 247, 0.8));
    --button-hover: #1e59f1;
    --button-cl: rgba(0, 0, 0, 0.07);
    --cl-border :rgba(255, 255, 255, 0.1);
    --input-color : rgba(0,0,0,0.3);
    --input-shadow : rgba(0, 0, 0, 0.7);
}


body {
    padding: 0px;
    border: 0px;
    margin: 0px;
    list-style-type: none;
    -ms-overflow-style:none ;
    overflow-x: none;
    background: url('../img/bg.webp') no-repeat center center fixed;
    background-size: cover;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 300;
    color: var(--font);
}

a {text-decoration-line : none;color: var(--font);cursor: pointer;}

button{cursor: pointer;}

div::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
}

div::-webkit-scrollbar-track {
    background: transparent;
}

div::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
}

#body {width: 1430px;
    margin: 0 auto;
    height: 800px;
    margin-top: 20px;
    position: relative;
}

#main {
    margin: 0px auto;
    width: 900px;
    height: 800PX;
    float: left;
    background-color: var(--theme-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-left: 10px;
    backdrop-filter: blur(5px);
    box-shadow: var(--main-shadow);
}
#sd_r {width: 250px;
    height: 800px;
    float: left;
}

#sd_l {width: 250px;
    height: 800px;
    float: left;
    margin-left: 10px;
    position: relative;
}

#sd_l .ybr, .ybrbox {position: relative;
    backdrop-filter: blur(5px);
    background-color: var(--theme-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 0 5px var(--main-shadow);
    text-align: center;
    width: 248px;
    height:90px;
    margin-top: 10px;
    overflow: hidden;
    transition: all 0.4s ease-out;
}

#sd_l .ybrbox::before, .ybr::before {
    position: absolute;
    top: 0;
    left: -85px;
    content: "";
    display: block;
    width: 25px;
    height: 90px;
    transform: skewX(-20deg);
    background-color: var(--button-before);
}



#sd_l .ybr:hover::before, #sd_l .ybrbox:hover::before {
    left: 305px;
    transition: all .3s ease-in;
}

#sd_l .ybr a img, #sd_l .ybrbox a img  {border-radius: 5px;
    width: 238px;
    height:80px;
    margin-top:5px;
}

#sd_l .ybrbox:first-child {
    margin-top: 0 !important;
}

.ybr-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease;
  will-change: transform;
  margin-left: 5px;
}

.ybr a {
  flex: 0 0 100%;
  display: block;
}

.ybr img {
  width: 100%;  
  height: auto;
  display: block;
}

.ybr-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.ybr-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.3s;
}

.ybr-dots span.active {
  background: rgba(255,255,255,1);
}

#game_til {
    width: 100%;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    border-radius: 5px 5px 0 0;
    background-color: var(--theme-title-color);
}

#game_til strong {font-size: 22px;
    padding-left: 30px;}

    #game_til_text {
        position: absolute;
        color: var(--font);
        font-size: 22px;
        padding-left: 30px;
        background-position: 0;
        background: linear-gradient(to right,#9a7732 -30%, #d7af39 -20%,#c7a644 -10%,white -5%, white 0%,white 5%, #be9a2d 10%,#d7ba39 20%,#9a7732 30%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 20s infinite;
        -webkit-text-size-adjust: none;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }

    @keyframes shine{0% {background-position: 0px}
        100% {background-position: 1000px}
    }
    
#img_box{width: 98%;
    height: 500px;
    background: none;
    color: #333;
    line-height: 515px;
    text-align: center;
    margin:5px auto;
    position: relative;
}

#img_box iframe {width: 100%;
    height: 100%;
    border-radius: 10px;}

    #live {width: 100%;
        border: 0px;
        border-radius: 15px;
        height: 500px}

    #liveVideo {width: 100%;
        height: 100%;
        border: 0px;
        position: relative;
        transition: opacity 0.2s ease-in-out;
        border-radius: 15px;height: 500px}

    #liveVideo.video-fading {
  opacity: 0;
}

/* 해상도 표시를 위한 기본 스타일 */
#qualityIndicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgb(255, 0, 0);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  z-index: 11; /* 재생 버튼(10)보다 위에 표시 */
  
  /* 부드러운 등장을 위한 설정 */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  
  /* 마우스 클릭을 방해하지 않도록 설정 */
  pointer-events: none;
}

/* 이 클래스가 추가되면 해상도 표시가 나타납니다. */
#qualityIndicator.visible {
  opacity: 1;
}


    #live_img {width: 100%;
        height: 100%;
        border: 0px;
        border-radius: 15px;height: 500px}

.msg_box {width: 100%;
    height: 235px;
    text-align: center;
    margin: 0;
   /* background: rgba(20, 20, 20,0.5);*/
}

.login_a {width: 250px;
    margin: 0 auto;
    height: 270px;
    position: relative;
    text-align: center;
    background-color: var(--theme-bg-color);
    border: 1px solid var(--border-color);;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.til {width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 5px 5px 0 0;
    background: var(--theme-title-color);
}
.til span {color: var(--font);float: left;font-size: 16px;margin-left: 5px;}
.til img {float: left;width: 20px;margin-top: 15px;margin-left: 20px;}
.logout {margin-right: 10px;
    color: var(--font);
    font-size: 14px;
    font-weight: 100;
    background: none;
    position: absolute;
    border-radius: 20px;
    padding: 2px 5px;
    height: 25px;
    width: 65px;
    line-height: 25px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    right: 0px;
}

.login_su {width:232px;margin-top: 10px;}

#my_st, #my_rand {width: 230px;
    height: 90px;
    margin:10px 10px;
    border: 1px solid var(--in-border-color);
    border-radius: 10px;
    background: var(--in-bg-coldr);
}

#m_t, #my_t {width: 100%;
    height: 40px;
    background: var(--in-title-coldr);
    border-radius: 10px 10px 0 0;
}
#m_t div, #sco div,#my_t div, #my_b div {
    float: left;
    line-height: 25px;
    margin-top: 7px;
    height: 35px;
    color: var(--font);
    margin-left: 2%;
    font-size: 14px;
}

#my_b div, #sco div {box-shadow:inset 0px 0px 3px 3px var(--main-shadow);
    border-radius: 10px;
    line-height: 35px;
     background: var(--in-title-coldr);
}

#m_t div, #my_t div,#my_rank, #now_round {width: 46%;}

#money_display, #betmoney {width: 42%;text-align: right;padding-right: 5%;}

#sco, #my_b {width: 100%;height: 50px;border-radius: 0 0 10px 10px;}

#toggleSignup {width: 232px; margin: 10px auto;}

#toggleSignup, .sing_but {
    height: 40px;
    border: 0px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 20px;
    background: var(--button-active);
    border: 1px solid var(--border-color);
    color: var(--font);
    box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.15),0 0 5px rgba(0, 0, 0, 0.5);
}

#toggleSignup:hover, .sing_but:hover, #help_cl:hover  {background: var(--button-hover);}

#signup_box {width: 350px;
    margin: 150px auto;
    height: 440px;
    position: relative;
    text-align: center;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 2px 2px 4px var(--main-shadow);}

#signup_box #singup_ti {height: 50px;
    line-height: 50px;
    font-size: 18px;
    background: var(--theme-title-color);
    margin-bottom: 10px;}

#loginForm {position: relative;
            width: 230px;
            height: 180px;
            margin: 10px auto;
    border-bottom: 1px solid var(--border-color);
}

#loginForm input, #signupForm input {width: 220px;
    padding-left: 10px;
    height: 40px;
    margin: 5px auto;
    background:var(--input-color);
    border-radius: 20px;
    color: var(--font);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 5px var(--input-shadow);
}

#loginForm input {width: 220px;}
#signupForm input {width: 300px;}

.sing_msg {width: 290px;
    height: 100px;
    border: 1px solid var(--in-border-color);
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
    background: var(--in-bg-coldr);
}

.sing_msg p {color: #ccc;font-size: 12px;}

.sing_but {width: 190px;margin-left: 20px;float: left;}

#cl_but {width: 110px;
    line-height: 40px;
    cursor: pointer;
    margin-left: 10px;
    float: left;
}

#cl_but, .login_su {
    height: 40px;
    border: 1px solid var(--cl-border);
    color: var(--font);
    border-radius: 20px;
    background: none;
    font-size: 14px;
}

/* 랭킹 */
#rank_box {width: 250px;
    height: 520px;
    margin-top: 10px;
    background-color: var(--theme-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow:0 0 5px 0 var(--main-shadow);
}

.til_rank {font-size: 18px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0px;
    background: var(--theme-title-color);
    border-radius: 10px 10px 0 0;
}
.til_rank strong {color: var(--font);font-size: 16px;}

#rank_tabs {width: 100%;
    height: 40px;
    display: flex;
    border-radius: 10px 10px 0 0;
    background: var(--theme-title-color);
    overflow: hidden;}

#rank_tabs .rank_tab {flex: 1;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: var(--font);
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;}

#rank_tabs .rank_tab.active {opacity: 1;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.08);}

#rank_memu {width: 100%;
    height: 30px;
    background: var(--in-title-coldr);
    border-radius: 10px 10px 0 0;}

#rank_list {
    width: 100%;height: 422px;overflow-x: auto;
}
.rank_list div img {
    width: 20px;
    margin-top: 5px;
    opacity: 0.2;
    position: absolute;
    left: 7px;}

.rank-change {
position: absolute;
    left: 20px;
    font-size: 10px;
    font-weight: bold;
    color: var(--font);
    line-height: 20px;
    text-align: center;
}

.rank_bg {margin-left: 0px;}

.rank-up {color: #00e413;}

.rank-down {color: #ff0000;}

#rank_memu div {width: 15%;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    color: var(--font);
    font-size: 12px;
}

#rank_list_box {width:230px;
    height: 460px;
    margin: 0 auto;
    margin: 10px auto;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--in-border-color);
    background: var(--in-bg-coldr);
}

#rank_list .rank_container {display: none;}
#rank_list .rank_container.active {display: block;}


.rank_list {height: 30px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    transition: transform 0.5s ease-in-out;
}

.rank_list div {width: 15%;height: 30px;float: left;text-align: center;}
.rank_list div span {font-size: 13px;color: var(--font);}
.rank_value_sub {font-size: 11px !important;color: rgba(255, 255, 255, 0.65) !important;}


#bet_box {width: 100%;height: 235PX;position: relative;}
.bet_box {width: 100%;height: 120px;margin-top: 20px;}

/* 배팅한도*/
#minMaxDisplay {float: right;
    margin-right: 20px;
    position: fixed;
    left: 20px;
    top:65px;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    color: var(--font);
    font-weight: 300;
    transition : transform 0.3s ease,0.4s ease-out;
    text-align: left;
}

/* 칩 구역*/
#quickAmounts {width: 98%;
    height: 50px;
    bottom: 10px;
    margin: 0 1%;
    position: absolute;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.15),0 0 5px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    transition: transform 250ms,all 0.4s ease-out, opacity 0.3s ease-in;
}

#quickAmounts img {position: absolute;
    left: 20px;
    width: 20px;
    margin-top: 15px;
    opacity: 0.5;}

#betAmount_u {width: 130px;
    height: 35px;
    padding: 0 10px;
    float: left;
    margin-left: 10px;
    background: var(--input-color);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    color: var(--font);
    text-align: center;
    font-size: 13px;
    margin-top: 6px;
    line-height: 35px;
    box-shadow: inset 0px 0px 3px 3px var(--input-shadow);
    text-align: right;
    font-weight: 400;
}

#betAmount_u span {float: left;padding-left: 5px;color: var(--font);}


#bet_money {float: right !important;padding-right: 5px;}

#u_money {width: 130px;
    height: 35px;
    padding: 0 10px;
    float: left;
    margin-left: 10px;
    background: var(--input-color);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    color: var(--font);
    text-align: center;
    font-size: 13px;
    margin-top: 6px;
    line-height: 35px;
    box-shadow: inset 0px 0px 3px 3px var(--input-shadow);
    text-align: right;
    font-weight: 400;
    }

#resetAmountBtn {width: 70px;
    height: 35px;
    border-radius: 40px;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--font);
    float: left;
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 7px;
    position: relative;
    box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.5);
}

#resetAmountBtn:hover {background: var(--border-color);}

.amountBtn {cursor: pointer;width: 60px;height: 60px;float: left;margin-left: 14px;border-radius: 50px;}
.amountBtn div {
    position: relative;
    border-radius: 50px;
    float: left;
    color: #000;
    margin-top: -15px;
    font-weight: 600;
}

.chip1 {background: url('../img/chip1.webp');}
.chip2 {background: url('../img/chip2.webp');}
.chip3 {background: url('../img/chip3.webp');}
.chip4 {background: url('../img/chip4.webp');}
.chip5 {background: url('../img/chip5.webp');}
.chip6 {background: url('../img/chip6.webp');}

.chip {
    width: 60px;
    height: 60px;
    background-position:-1px -1px;
    font-size: 16px;
    line-height: 60px;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.02);
    background-size: 102%;
    overflow: hidden;
}

#bettingArea {width: 100%;height: 240px;
    position: absolute;
    left: 0;
    top: 0;
}

#user_ui {height: 740px;position: relative;
}
/* 배팅버튼*/
#bettingButtons {width: 100%;
    height: 170px;
    position: absolute;
    left: 0;
    top: 0;
}

.shadow {box-shadow:0px 0px 5px var(--main-shadow);}
.shadowoff {box-shadow:none;}

#player, #banker {position: relative;
    width: 27.3%;
    height: 165px;
    margin-left: 10px;
    touch-action: manipulation;
    line-height: 280px;
    border: 0;
    border-radius: 15px;
    float: left;
    text-align: center;
}

#player {background: linear-gradient(200deg,rgba(40, 40, 255, 0.35) 0%,rgba(0, 0, 87, 0.25) 100%);}
#banker {background: linear-gradient(160deg, rgba(255, 0, 0, 0.5) 0%, rgba(87, 0, 0, 0.25) 100%);}

#tie {position: relative;
    width: 17%;
    height: 165px;
    touch-action: manipulation;
    line-height: 280px;
    border: 0;
    float: left;
    margin-left: 10px;
    background: linear-gradient(200deg,rgba(58, 255, 40, 0.35) 0%,rgba(0, 87, 0, 0.25) 100%);
    border-radius: 15px;
    text-align: center;
}

#ppair, #bpair {position: relative;
    width: 11%;
    height: 165px;
    touch-action: manipulation;
    line-height: 280px;
    border: 0;
    float: left;
    margin-left: 10px;
    text-align: center;
}

#ppair {background: linear-gradient(200deg,rgba(40, 40, 255, 0.35) 0%,rgba(0, 0, 87, 0.25) 100%);
    border-radius: 15px 15px 15px 30px;}

#bpair {background: linear-gradient(160deg, rgba(255, 0, 0, 0.5) 0%, rgba(87, 0, 0, 0.25) 100%);
    border-radius: 15px 15px 30px 15px;}

#banker span, #player span, #tie span, #ppair span, #bpair span {
    font-weight:900;
    font-size: 16px;
    color: var(--font);
}

    .fb {color: #ff2d2d !important;}
    .fp {color: #1d5dff !important;}

#countdown_timer,#countdown,#start_time {color: var(--font);padding: 20px 0;font-size: 16px;font-weight: 400;}

#applyBtn {width: 190px;
    height: 40px;
    margin-top: 30px;
    border-radius: 30px;
    background: var(--button-active);
    border: 1px solid var(--border-color);
    color: var(--font);
    font-size: 16px;
    overflow: hidden;
    backdrop-filter:saturate(180%);
}

#betmsg {position: absolute;
    z-index: 999999;
    width: 100%;
    height: 232px;
    line-height: 170px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.4);
    left: 0px;
    z-index: 9999;
    backdrop-filter: blur(1.5px);
    font-size: 26px;
    border-radius: 10px;
    font-weight: 600;
}

.allrank {position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-Index: 99999;
    backdrop-Filter: blur(5px);
}

#allrank_box {
    width: 600px;
    height: 700px;
    margin: 70px auto;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 250ms;
    color: var(--font);
}

#rank_table {width: 100%;
        background: rgba(255, 255, 255,0.03);
        height: 50px;
    line-height: 50px;
    text-align: center;
}

#rank_table span {padding-left: 20px;font-weight: 500;}

#rank_body {width: 94%;height: 570px;
    overflow-x: auto;
    margin: 10px auto;
    border-radius: 10px;
    border: 1px solid var(--in-border-color);
    background: rgba(255, 255, 255, 0.03);
}

.rank_table tbody {width: 100%;}
.rank_table tbody tr {width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255,0.1);
    background: rgba(255, 255, 255,0.03);
}
.rank_table tbody tr:hover {background: rgba(0, 0, 0, 0.4);}
.rank_table tbody tr:last-child {border-radius:0 0 10px 10px;}
.rank_table tbody tr td {
    height: 40px;
    text-align: center;
    font-weight: 100;
    font-size: 15px;
}

#lr {font-size: 12px;}


#allrank_box.final-rank-tabbed #rank_body.final_rank_body {
    overflow: hidden;
}

#final_rank_tabs {
    width: calc(100% - 20px);
    margin: 8px auto 0;
    display: flex;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

#final_rank_tabs .final_rank_tab {
    flex: 1;
    text-align: center;
    line-height: 38px;
    color: var(--font);
    font-size: 13px;
    opacity: 0.75;
    cursor: pointer;
}

#final_rank_tabs .final_rank_tab.active {
    opacity: 1;
    font-weight: 600;
    background: rgba(255,255,255,0.10);
}

.final_rank_panels {
    width: calc(100% - 20px);
    margin: 8px auto;
    height: calc(100% - 38px - 20px);
    overflow-y: auto;
}

.final_rank_panels .final_rank_panel {
    width: 100%;
}

.final_rank_panels .final_rank_panel.final_rank_winrate tbody tr td {
    height: 52px;
    vertical-align: middle;
}

.final_rank_panels .final_rank_panel.final_rank_winrate tbody tr td .rank_value_sub {
    display: block;
    font-size: 11px;
}
#rank_st_cl {border-radius: 30px;
    background: #3a6df0; 
    margin: 15px auto;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

/* 카운드 구역 */ 
.Count {
    position: relative;
    overflow: hidden;
    margin: 20px;
    border-radius: 100px;
    width: 200px;
    height: 200px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
    -webkit-mask-image : radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-Image : radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat : no-repeat;
    mask-repeat : no-repeat;
}

.Count::before {
    position: absolute;
    top: -25%;
    left: -25%;
    display: block;
    content: "";
    width: 150%;
    height: 150%;
    z-index: -1;
    animation: rotate 3s infinite linear;
    background: conic-gradient(#f54, #fc0, #05f, #f54);
    -webkit-mask-image : radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-Image : radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat : no-repeat;
    mask-repeat : no-repeat;
}

.Count::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: "";
    border-radius: 100px;
    width: 180px;
    height: 180px;
    background-color: rgba(0,0,0,0);
    transform: translate(-50%, -50%);
    z-index: 0;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* 라운드 배경*/
#roundresultbg {
    background-color: rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 50px;
    left:10px;
    backdrop-filter: blur(5px);
    border-radius:10px;
    width: 882px;
    height: 502px;
    z-index: 9999;
    display: none;
}

#finalCountdownNumber {position: relative;margin-top: -10px;}

#msg_img {position: absolute;margin-top: 30px;margin-left: -50px;}

#playerSummary {left: 170px;}
#playerSummary div {float: left;}
#playerSummary strong {float: left;padding-left: 9px;}

#bankerSummary {right: 170px;}
#bankerSummary div {float: right;}
#bankerSummary strong {float: right;padding-right: 7px;}

#tieSummary {left: 375px;
    width: 152px;
    height: auto;
    position: absolute;
    opacity: 1;
    margin-top: 10px;
    line-height: 20px;
    display: none;
    z-index: 2;
    text-align: center;
}
#tieSummary div {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

#bankerSummary, #playerSummary {
    position: absolute;
    opacity: 1;
    margin-top: 10px;
    height: 40px;
    display: none;
    z-index: 2;
}
#playerSummary div, #bankerSummary div {
    min-width: 40px;
    height: 60px;
    font-size: 12px;
}

#playerSummary img {width: 12px;float: left;margin-top: 5px;margin-left: 6px;}
#bankerSummary img {width: 12px;float: right;margin-top: 5px;margin-left: 6px;}

#playerSummary span {float: left;padding: 0 7px;}
#bankerSummary span {float: right;padding: 0 7px;}

#playerSummary strong, #bankerSummary strong {font-weight: 500;font-size: 12px;color: rgba(255, 255, 255, 0.8);}

#tieSummary img {width: 12px;}
#tieSummary strong {font-weight: 500;font-size: 12px;padding-right: 5px;color: rgba(255, 255, 255, 0.8);}

#playerDonut, #bankerDonut {
    position: absolute;
    margin-top: 0px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    box-shadow:inset 0px 0px 5px 2px rgba(0, 0, 0,0.2);
} 

#playerDonut {left: -40px;}
#bankerDonut {right: -40px;}
#tieDonut {background: rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    box-shadow:inset 0px 0px 5px 2px rgba(0, 0, 0,0.2);
}

#blind {
    font-weight: bolder;
    font-size: 36px;
    font-style: italic;
    color: var(--font);
    padding-left: 30px;
}

#blind object {position: absolute;margin-top: 30px;margin-left: -40px;}

@keyframes smokeFade {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px) scale(1);
  }
    50% {
    opacity: 0.8;
    filter: blur(1px);
    transform: translateY(-10px) scale(1.2);
  }
  100% {
    opacity: 1;
    filter: blur(10px);
    top:10px;
    transform: translateY(-20px) scale(3);
  }
}

#ticon {width: 30px;position: absolute;margin-top: 12px;left: 10px;}

/* 사운드 온오프 아이콘 */
#sound_icon {width:35px;
    height:35px;
    position: absolute;
    background: none;
    border: 1px solid var(--border-color);
    right: 20px;
    margin-top: 6px;
    cursor: pointer;
    border-radius: 25px;
    z-index: 9999;
    line-height:35px;
    text-align: center;
    
}
#sound_icon:hover {background: rgba(0, 0, 0, 0.1);}

#sound_icon img {width:20px;
    height:20px;
    z-index: 9;
    position: absolute;
    right: 8px;
    margin-top: 7px;
}

#nm_msg {position: absolute;width: 100%;height: 100px;color: var(--font);font-size: 14px;padding-top:50px ;font-weight: 200 !important;}

#nm_msg div {width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 30px;
    background: var(--button-active);
    border: 1px solid var(--border-color);
    margin: 30px auto;
    box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.15),0 0 5px rgba(0, 0, 0, 0.5);
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  color: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

#loading-screen img {width: 300px;}

.spinner {
    border: 8px solid var(--border-color);
    border-top: 8px solid var(--font);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 배경 */
.bg_a {
    position: fixed;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    top: 0;
    left: 0;
}

.background_background__3Oeal {
  width: 100%;
  height: 100%;
  background: #000000;
  position:relative;
  opacity: 0.2;
}

.background_background__3Oeal > span {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50vmin;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    -webkit-animation-name: background_move__307V1;
    -moz-animation-name: background_move__307V1;
    animation-name: background_move__307V1;
    -webkit-animation-duration: 30s;
    -moz-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count:infinite
}

.background_background__3Oeal > span:first-child {
    color: #c1b3a0;
    opacity: .2;
    top: 64%;
    left: 3%;
    -webkit-animation-duration: 18.8s;
    -moz-animation-duration: 18.8s;
    animation-duration: 18.8s;
    -webkit-animation-delay: -10.7s;
    -moz-animation-delay: -10.7s;
    animation-delay: -10.7s;
    -webkit-transform-origin: 14vw -22vh;
    -moz-transform-origin: 14vw -22vh;
    transform-origin: 14vw -22vh;
    -webkit-box-shadow: 100vmin 0 20.5259430347vmin currentColor;
    box-shadow:100vmin 0 20.5259430347vmin currentColor
}

.background_background__3Oeal > span:nth-child(2) {
    color: #e6c6b9;
    opacity: .2;
    top: 24%;
    left: 85%;
    -webkit-animation-duration: 26.5s;
    -moz-animation-duration: 26.5s;
    animation-duration: 26.5s;
    -webkit-animation-delay: -3.1s;
    -moz-animation-delay: -3.1s;
    animation-delay: -3.1s;
    -webkit-transform-origin: -1vw -14vh;
    -moz-transform-origin: -1vw -14vh;
    transform-origin: -1vw -14vh;
    -webkit-box-shadow: 100vmin 0 36.2934581027vmin currentColor;
    box-shadow:100vmin 0 36.2934581027vmin currentColor
}

.background_background__3Oeal > span:nth-child(3) {
    color: #e5654b;
    opacity: .2;
    top: 41%;
    left: 38%;
    -webkit-animation-duration: 26.3s;
    -moz-animation-duration: 26.3s;
    animation-duration: 26.3s;
    -webkit-animation-delay: -9.8s;
    -moz-animation-delay: -9.8s;
    animation-delay: -9.8s;
    -webkit-transform-origin: -5vw -21vh;
    -moz-transform-origin: -5vw -21vh;
    transform-origin: -5vw -21vh;
    -webkit-box-shadow: -100vmin 0 21.6771071789vmin currentColor;
    box-shadow:-100vmin 0 21.6771071789vmin currentColor
}

.background_background__3Oeal > span:nth-child(4) {
    color: #a0e54b;
    opacity: .2;
    top: 31%;
    left: 36%;
    -webkit-animation-duration: 32.4s;
    -moz-animation-duration: 32.4s;
    animation-duration: 32.4s;
    -webkit-animation-delay: -3.9s;
    -moz-animation-delay: -3.9s;
    animation-delay: -3.9s;
    -webkit-transform-origin: -24vw -5vh;
    -moz-transform-origin: -24vw -5vh;
    transform-origin: -24vw -5vh;
    -webkit-box-shadow: -100vmin 0 16.8646404307vmin currentColor;
    box-shadow:-100vmin 0 16.8646404307vmin currentColor
}

.background_background__3Oeal > span:nth-child(5) {
    color: #4b5e62;
    opacity: .2;
    top: 82%;
    left: 36%;
    -webkit-animation-duration: 30.6s;
    -moz-animation-duration: 30.6s;
    animation-duration: 30.6s;
    -webkit-animation-delay: -2.6s;
    -moz-animation-delay: -2.6s;
    animation-delay: -2.6s;
    -webkit-transform-origin: -7vw -4vh;
    -moz-transform-origin: -7vw -4vh;
    transform-origin: -7vw -4vh;
    -webkit-box-shadow: 100vmin 0 24.5628275968vmin currentColor;
    box-shadow:100vmin 0 24.5628275968vmin currentColor
}

.background_background__3Oeal > span:nth-child(6) {
    color: var(--font);
    opacity: .2;
    top: 69%;
    left: 33%;
    -webkit-animation-duration: 16.9s;
    -moz-animation-duration: 16.9s;
    animation-duration: 16.9s;
    -webkit-animation-delay: -22.3s;
    -moz-animation-delay: -22.3s;
    animation-delay: -22.3s;
    -webkit-transform-origin: 19vw 0;
    -moz-transform-origin: 19vw 0;
    transform-origin: 19vw 0;
    -webkit-box-shadow: -100vmin 0 30.1798673544vmin currentColor;
    box-shadow:-100vmin 0 30.1798673544vmin currentColor
}

.background_background__3Oeal > span:nth-child(7) {
    color: #dec756;
    opacity: .2;
    top: 5%;
    left: 35%;
    -webkit-animation-duration: 13s;
    -moz-animation-duration: 13s;
    animation-duration: 13s;
    -webkit-animation-delay: -2.4s;
    -moz-animation-delay: -2.4s;
    animation-delay: -2.4s;
    -webkit-transform-origin: 12vw 23vh;
    -moz-transform-origin: 12vw 23vh;
    transform-origin: 12vw 23vh;
    -webkit-box-shadow: 100vmin 0 18.4708847196vmin currentColor;
    box-shadow:100vmin 0 18.4708847196vmin currentColor
}

.background_background__3Oeal > span:nth-child(8) {
    color: #e5d64b;
    opacity: .2;
    top: 9%;
    left: 60%;
    -webkit-animation-duration: 31.5s;
    -moz-animation-duration: 31.5s;
    animation-duration: 31.5s;
    -webkit-animation-delay: -29.6s;
    -moz-animation-delay: -29.6s;
    animation-delay: -29.6s;
    -webkit-transform-origin: -16vw -24vh;
    -moz-transform-origin: -16vw -24vh;
    transform-origin: -16vw -24vh;
    -webkit-box-shadow: 100vmin 0 33.2981169125vmin currentColor;
    box-shadow:100vmin 0 33.2981169125vmin currentColor
}

.background_background__3Oeal > span:nth-child(9) {
    color: #e5db4b;
    opacity: .2;
    top: 100%;
    left: 63%;
    -webkit-animation-duration: 30.4s;
    -moz-animation-duration: 30.4s;
    animation-duration: 30.4s;
    -webkit-animation-delay: -2.9s;
    -moz-animation-delay: -2.9s;
    animation-delay: -2.9s;
    -webkit-transform-origin: -5vw 14vh;
    -moz-transform-origin: -5vw 14vh;
    transform-origin: -5vw 14vh;
    -webkit-box-shadow: -100vmin 0 28.9639176573vmin currentColor;
    box-shadow:-100vmin 0 28.9639176573vmin currentColor
}

.background_background__3Oeal > span:nth-child(10) {
    color: #e5d34b;
    opacity: .2;
    top: 15%;
    left: 30%;
    -webkit-animation-duration: 29.4s;
    -moz-animation-duration: 29.4s;
    animation-duration: 29.4s;
    -webkit-animation-delay: -7.4s;
    -moz-animation-delay: -7.4s;
    animation-delay: -7.4s;
    -webkit-transform-origin: -16vw -16vh;
    -moz-transform-origin: -16vw -16vh;
    transform-origin: -16vw -16vh;
    -webkit-box-shadow: -100vmin 0 20.9210912688vmin currentColor;
    box-shadow:-100vmin 0 20.9210912688vmin currentColor
}

@-webkit-keyframes background_move__307V1 {
    to {
        -webkit-transform: translateZ(1px) rotate(1turn);
        transform:translateZ(1px) rotate(1turn)
    }
}

@-moz-keyframes background_move__307V1 {
    to {
        -moz-transform: translateZ(1px) rotate(1turn);
        transform:translateZ(1px) rotate(1turn)
    }
}

@keyframes background_move__307V1 {
    to {
        -webkit-transform: translateZ(1px) rotate(1turn);
        -moz-transform: translateZ(1px) rotate(1turn);
        transform: translateZ(1px) rotate(1turn)
    }
}

#amountchip, #chip_player, #chip_banker, #chip_tie, #chip_ppair, #chip_bpair  {pointer-events: none;width: 60px;height: 60px;border-radius: 50px;position: absolute;z-index: 10;}

#amountchip div, #chip_player div, #chip_banker div, #chip_tie div, #chip_ppair div, #chip_bpair div {width: 60px;
    height: 60px;
    position: relative;
    border-radius: 50px;
    line-height: 60px;
    color: #000;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    font-size: 14px;
    font-weight: 600px;
    box-sizing: content-box;
}

#applyBtn::before {
    position: absolute;
    top: 0;
    left: -85px;
    content: "";
    display: block;
    width: 50px;
    height: 40px;
    transform: skewX(-20deg);
    background-color: var(--button-before);
}

#applyBtn:hover {
    color: var(--font);
    background-color: var(--button-active);
}

#applyBtn:hover::before {
    left: 275px;
    transition: all .4s ease-in;
}

.chip::before {
    position: absolute;
    top: 0;
    left: -85px;
    content: "";
    display: block;
    width: 20px;
    height: 70px;
    transform: skewX(-20deg);
    background-color: var(--button-before);
}

.chip:hover::before {
    left: 275px;
    transition: all .4s ease-in;
}

#help_button img {width: 238px;
    height: 80px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;}

#help_bg, #signup_bg {position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 99999;
}

#help_box {position: relative;
    margin: 200px auto;
    z-index: 999999;
    width: 700px;
    height: 470px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 0 10px 0 var(--main-shadow);
}

#help_main {width: 680px;
    height: 400px;
    margin: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--theme-bg-color);;
    box-shadow: 0 0 5px var(--main-shadow);
}
.help_til { width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 10px 10px 0 0;
    background: var(--theme-title-color);
}

.help_til img {width: 30px;
    margin: 10px;
    position: absolute;}

.help_til strong {padding-left: 45px;
    color: var(--font);
    font-size: 18px;
    font-weight: 500;}

#help_cl {width: 80px;
    height: 30px;
    border-radius: 30px;
    float: right;
    margin:10px 10px;
    color: var(--font);
    background: var(--button-active);
    border: 0px;
}

#help_menu {width: 199px;
    height: 100%;
    float: left;
    transition: all 0.4s ease-out;
}
.menu2, .menu1 {width: 90%;
    padding:0 5%;
    float: left;
    position: relative;
    height: 200px;
    transition: all 0.4s ease-out;
}

.menu2 {box-shadow:inset 0 0 3px var(--main-shadow);background: rgba(0, 0, 0, 0.2);}

.menu1 > span,.menu2 > span  {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.2em;
    line-height: 1.6;
    white-space: normal;
    word-break: keep-all;
    font-size: 14px;
    padding-top: 35px;
    transition: all 0.4s ease-out;
    font-weight: 300;
    color: #aaa;
}

.menu1 > span {padding-top: 75px;color: var(--font);}

.menu2:hover > span {padding-top: 60px;text-align: center;font-weight: 500;color: var(--font);}
.menu2:hover > #help_link div {left: 250px;
    transform: scale(1.2);
    bottom: 40px;
    background: linear-gradient(to right, rgb(255, 174, 0), rgb(255, 170, 0));
    border: 0px;
}

#help_list {width: 475px;
    height: 100%;
    float: left;
    position: relative;
    transition: all 0.4s ease-out;
}

#help_link div {width: 180px;
    height: 40px;
    padding: 0;
    left: 10px;
    bottom: 30px;
    position: absolute;
    text-align: center;
    line-height: 39px;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s ease-out;
}

#help_link div::before {
    position: absolute;
    top: 0;
    left: -85px;
    content: "";
    display: block;
    width: 25px;
    height: 70px;
    transform: skewX(-20deg);
    background-color: var(--button-before);
}

#help_link div:hover::before {
    left: 275px;
    transition: all .4s ease-in;
}

#help_link img {width: 20px;position: absolute;margin-top: 11px;left: 20px;} 
#help_link strong {padding-left: 30px;
        font-size: 14px;
        font-weight: 400;
        color: var(--font);
} 

.h_list {width: 450px;
    height: 70px;
    position: relative;
    margin: 5px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px var(--main-shadow);
    line-height: 70px;
    padding-left: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.4s ease-out;
    color: var(--font);
    overflow: hidden;
    font-weight: 300;
}

.h_list:first-child {margin-top: 10px;}

.h_list:hover {transform: scale(1.05);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    background: rgba(0, 0, 0, 0.4);
    color: #00e413;
    font-weight: 500;}

#help_can {position: absolute;
    width: 0px;
    height: 360PX;
    right: -7px;
    top: -1px;
    border-radius: 10px;
    transition: all 0.4s ease-out;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    border: 0px;
    padding: 20px 0;
    color: rgba(255,255,255,0);
    transition: all 0.4s ease-out;
}

#help_subject {width: 100%;height: 40px;border-bottom:1px solid var(--border-color) ;font-size: 16px;font-weight: 500;line-height: 20px;}
#help_content {width: 100%;height: 296;font-size: 14px;padding-top: 10px;}

#content_cl {position: absolute;
    bottom: 10px;
    left: 285px;
    width: 100px;
    height: 40px;
    border: 1px solid var(--border-color);
    color: var(--font);
    background: none;
    border-radius: 40px;
    opacity : 0;
}

#content_cl:hover {background: rgba(255, 255, 255, 0.05);}

.bet-msg, .msgbox {height: 100px;
        line-Height: 100px;
        text-Align: center;
        position: absolute;
        background : rgba(0, 0, 0, 0.4);
        backdrop-Filter : blur(5px);
        border : 10px solid rgba(0, 0, 0, 0.9);
        box-Shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
        border-Left: 0px;
        border-Right: 0px;
        color: #fff;
        left: 250px;
        top: 240px;
        z-Index: 10000;
        width: 400px;
        font-Weight : 300;
        font-Size: 1.8rem;
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        mask-Image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        -webkit-mask-iepeat: no-repeat;
        mask-Repeat: no-repeat;
}
.bet-msg {transition : all 0.2s ease-out;opacity : 0;}

/* 채팅 */ 
#text_msg {width: 145px;
    height: 30px;
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    margin-top: 4px;
    border-radius: 20px 0 0 20px;
    background: var(--input-color);
    box-shadow: inset 0 0 3px var(--input-shadow);
    border: 1px solid var(--border-color);
    color: var(--font);
}

#text_send {width: 53px;
    height: 32px;
    float: left;
    border-radius: 0 20px 20px 0;
    background: var(--button-active);
    border: 0px solid var(--border-color);
    border-left: 0px;
    color: var(--font);
    line-height: 30px !important;
    box-shadow: inset -1px -1px 5px 0px rgba(0, 0, 0, 0.5);
    margin-top: 5px;
    cursor: pointer;
    font-size: 14px;
}

    #text_box {
    position: relative;
    width: 230px;
    height: 43PX;
    z-index: 9999;
    border-radius: 10px;
    text-align: center;
    background: var(--in-bg-coldr);
    border: 1px solid var(--in-border-color);
    transition: transform 250ms;
    color: var(--font);
    margin: 5px auto;
    box-shadow: 0 0 1px 0 var(--input-shadow);
    }

    #chat_cl {position: absolute;
    width: 230px;
    height: 43PX;
    line-height: 45px;
    z-index: 9999;
    border-radius: 10px;
    text-align: center;
    background: rgb(0 0 0 / 82%);
    color: var(--font);
    left: 10px;
    bottom: 9px;
}

/* 채팅 구역 전체 */
#chat_ti {margin: 0 auto;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: var(--font);
    background: var(--theme-title-color);
    border-radius: 10px 10px 0 0;
    transition: 0.2s ease-out;
    position: relative;
    font-weight: 400;
}

#chat_box {position: relative;
    z-index: 9999;
    width: 250px;
    height: 395px;
    background: var(--theme-bg-color);
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: var(--main-shadow);
}

/* 채팅 메시지 박스: 좌우 정렬 및 말풍선 스타일 */
#chat_list {
    position: relative;
    z-index: 9999;
    width: 230px;
    margin: 5px auto;
    padding: 5px 0;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: 0.2s ease-out;
    border: 1px solid var(--in-border-color);
    border-radius: 10px;
    background: var(--in-bg-coldr);
    box-shadow: 0 0 3px var(--main-shadow);
    display: flex; 
    flex-direction: column; 
}

.messagebox {
    display: inline-block;
    margin: 3px 10px;  
    max-width: 90%; 
    font-size: 14px;
    color: var(--font);
}

.messagebox.me {align-self: flex-end;}

/* 닉네임 영역 */
.messagebox .ch_nick {
    font-weight: 400;
    color: #71ff0b;
    font-size: 15px;
}

/* 텍스트 영역 */
.messagebox .ch_text {
    display: inline-block;
    word-wrap: break-word;
    text-align: left;
    padding: 2px 10px;
    box-sizing: border-box;
    background: var(--in-bg-coldr);
    border: 1px solid var(--border-color);
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    align-self: flex-start;
    overflow-wrap: anywhere;
}

/* 닉/텍스트 정렬은 상태 클래스에 따라 */
.messagebox.me .ch_nick { text-align: right; color: #ffc800; }
.messagebox.other .ch_nick { text-align: left; }
.messagebox.me .ch_text { text-align: right;background: rgba(0, 0, 0, 0.22); }

 #muteNoticeBtn {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 350px;
    top: 150px;
    z-Index: 20;
    border-Radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-Size: 13px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
 }

 #muteNoticeBtn img {width:130px}

 #notice {position: absolute;
top: 200px;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background: rgba(255,0,0,0.8);
color: #fff;
font-size: 40px;
z-index: 99999;
border: 10px solid #000;
border-left: 0;
border-right: 0;
font-weight: 400;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}