@font-face{
font-family:'PyeongChangPeace-Bold';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight:700;
font-style:normal;
}
::-webkit-scrollbar {
width: 5px;
background:#FBFCFE;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(transparent, #ff0080, transparent);
border-radius:6px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(transparent, #0FFFF0, transparent);
}
::placeholder {
font-size: 0.8rem !important;
font-weight: 400 !important;
}
#smartweb{
position:relative;
}
.wrapper {
position: absolute;
top: 78px;
width: 100%;
}
.broadcast-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));/*index.php var minCard = 300; 와 동일*/
padding: 7px 20px 20px;
}
.top-naviagation{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
z-index: 20;
width: 100%;
}
.fire_games-nav {
width: 100vw;
height: 58px;
border: none;
padding: 0px;
margin: 0px;
color: #FFF;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
box-shadow: 0 3px 9px -3px rgba(0,0,0,.12);
background-image:none;
position:relative;
}
.fire_games-nav::before{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(46,74,224,.25), transparent);
}
.fire_games_logo{
position:absolute;
top:50%;
left:16px;
transform:translate(0,-50%);
background:transparent;
}
.fire_games_logo a{
color:#344A67;
background:transparent;
font-size:1.02rem;
font-family:"PyeongChangPeace-Bold","NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight:800;
letter-spacing:.02em;
text-shadow:none;
display:inline-flex;
align-items:center;
gap:8px;
}
.fire_games_logo a::before{
content: "";
display: inline-block;
width: 32px;
height: 32px;
background: url("/logo-32.png") no-repeat center center;
background-size: contain;
}
.power a i{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:50%;
color: #FFF !important;
background: rgba(0, 0, 0, 0.2);
font-size: 0.85rem;
font-family:"NEXON Lv1 Gothic OTF","Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free", sans-serif;
text-shadow:none;
letter-spacing:0.1px;
}
.power{
position: absolute;
top:50%;
right:20px;
transform:translate(0%,-50%);
display:flex;
align-items:center;
}
.power a{
margin-left:16px;
color: #6b7080;
transition: color 140ms cubic-bezier(.22,.9,.32,1.1);
}
.power a:active{ color: #2f6fed }
.cast-samsung, .tv_samsung{
margin: 0 20px;
}
.tv_samsung{
margin-bottom:70px;
}
#vip_toast{
position: fixed;
left: 50%;
bottom: 56px;
transform: translate(-50%, 24px) scale(0.92);
display:flex;
align-items:center;
gap:14px;
padding: 18px 20px 18px 20px;
border-radius: 16px;
background: linear-gradient(160deg, rgba(30,26,18,0.92), rgba(15,13,10,0.96));
border: 1px solid rgba(212,175,106,0.35);
box-shadow:
0 20px 45px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.03) inset,
0 0 30px rgba(212,175,106,0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
pointer-events: none;
transition:
opacity .45s cubic-bezier(.19,1,.22,1),
transform .45s cubic-bezier(.19,1,.22,1);
z-index: 999;
max-width: 96vw;
overflow: hidden;
}
#vip_toast.show{
opacity: 1;
transform: translate(-50%, 0) scale(1);
animation: toast-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-pop{
0%{ transform: translate(-50%, 24px) scale(0.9); }
55%{ transform: translate(-50%, -6px) scale(1.02); }
100%{ transform: translate(-50%, 0) scale(1); }
}
/* Crown icon badge */
.vip_icon{
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #f3d9a4, #d4af6a);
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 0 14px rgba(212,175,106,0.55);
animation: icon-glow 2.2s ease-in-out infinite;
}
.vip_icon svg{
width: 18px;
height: 18px;
fill: #241a08;
}
@keyframes icon-glow{
0%,100%{ box-shadow: 0 0 10px rgba(212,175,106,0.4); }
50%{ box-shadow: 0 0 20px rgba(212,175,106,0.75); }
}
.vip_text{
display:flex;
flex-direction:column;
gap:2px;
}
#vip_toast span.msg{
color: #f6ecd8;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
}
.vip_sub{
color: rgba(246,236,216,0.55);
font-size: 0.7rem;
font-weight: 400;
}
/* progress underline */
.vip_progress{
position:absolute;
left:0; bottom:0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #d4af6a, #f3d9a4);
transform-origin: left;
transform: scaleX(0);
}
#vip_toast.show .vip_progress{
animation: progress-run 3s linear forwards;
}
@keyframes progress-run{
from{ transform: scaleX(1); }
to{ transform: scaleX(0); }
}
.support {
color: #FFF;
border: none;
padding: 4px 10px;
outline: none;
background: #f1ac4e;
margin: 0 5px;
font-size: 0.66rem;
font-weight:700;
border-radius: 999px;
text-decoration: none;
box-shadow:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition: 140ms ease-in-out;
}
.copyAccount {
cursor: pointer;
}
.copy-toast{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.85);
color:#fff;
padding:12px 22px;
border-radius:7777px;
font-size:.85rem;
z-index:999999999;
opacity:0;
visibility:hidden;
transition:.25s;
pointer-events:none;
}
.copy-toast.show{
opacity:1;
visibility:visible;
}
.cast-button{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:3px;
margin: 15px 0 5px;
}
.support.active {
background-color: #ff0080;
color: #fff;
}
#up{
display:none;
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.heroEffectsarrow {
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
}
.heroEffectsbouncy {
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#up svg{
transform: scaleY(-1);
}
@-webkit-keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}

@keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}