@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@300;400;500;600;700&family=The+Nautigal:wght@700&display=swap');
@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
@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;
}
:root{
--paper:#E5EBF4;
--paper-soft:#dde4f0; /* º¸Á¶ ¹è°æ */
--ink:#232019;         /* º»¹®/ŸÀÌƲ */
--ink-soft:#726C5E;    /* º¸Á¶ ÅؽºÆ® */
--line:#E6E0D2;        /* Çì¾î¶óÀÎ */
--brass:#A6803C;       /* ½Ã±×´Ïó °ñµå */
--brass-deep:#8A6A2E;  /* °ñµå hover */
--onair:#9C2B2B;       /* ON AIR ½ÅÈ£µî */
--white:#FFFFFF;
--text-faint: #9ea3b0;
--section-gap: 10px;
--accent: #2f6fed;
--accent-deep: #344A67;

--overlay-scrim: rgba(11,38,36,0.35);

--loader-size: 150px;       /* ·Î´õ ÄÁÅ×ÀÌ³Ê Àüü Å©±â (¿øº»: 200px) */
--dot-ratio: 0.35;          /* ¹¶ÃÆÀ» ¶§(Å« Á¡) Å©±â = loader-size * dot-ratio */
--spread-scale: 0.45;       /* ÆÛÁ³À» ¶§(ÀÛÀº Á¡) Å©±â = ¹¶Ä£ Å©±â * spread-scale */
--spread-distance: 0.45;    /* ÆÛÁö´Â °Å¸® = loader-size * spread-distance (dot-3 ±âÁØ) */
--bg-color: #000;
--dot-color-3: #f74d75;
--dot-color-2: #10beae;
--dot-color-1: #ffe386;
}

*{
padding:0;
margin:0;
box-sizing:border-box;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
caret-color: transparent;
}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html{
background-color: var(--paper) !important;
background:linear-gradient(155deg, #FFFFFF 0%, #E5EBF4 100%) !important;
}
body{
margin: 0;
padding: 0;
text-rendering:optimizeLegibility;
font-family:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo","Nanum Gothic","Malgun Gothic","PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei","Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans KR","Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans CJK","Helvetica Neue",Arial,sans-serif;
background-color: var(--paper) !important;
background:linear-gradient(155deg, #FFFFFF 0%, #E5EBF4 100%) !important;
color: var(--ink);
}
::-webkit-scrollbar {
width: 7px;
background:rgba(255,255,255,.85);/*#724ae8 #344A67*/
}
::-webkit-scrollbar-thumb {
background: linear-gradient(transparent, #ddcc99, transparent);
border-radius:7px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(transparent, #0FFFF0, transparent);
}
input, textarea{
-webkit-user-select: text;
user-select: text;
caret-color: auto;
}
a {
color: var(--ink);
text-decoration: none;
-webkit-tap-highlight-color : transparent;
}
input:focus {
outline: none;
}
button{
cursor:pointer;
}
ul li {
list-style: none;
}
#smartweb{
position: relative;
}
/* ===================== TOP NAV ===================== */
.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:  var(--ink);
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: rgba(0, 0, 0, 0);
display:flex;
align-items:center;
gap:7px;
}
.fire_games_logo a{
color: #344A67;
background: rgba(0, 0, 0, 0);
font-size: 1.02rem;
font-family:"PyeongChangPeace-Bold", "NEXON Lv1 Gothic OTF","Noto Sans KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, sans-serif;
font-weight:800;
letter-spacing:.02em;
text-shadow:none;
display:inline-flex;
align-items:center;
gap:8px;
}
.fire_games_logo a::before{
content:"\f445";
font-family:"NEXON Lv1 Gothic OTF","Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px; height:32px;
border-radius:10px;
color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
font-size:.85rem;
box-shadow:0 4px 10px rgba(46,74,224,.35);
}
.power{
position: absolute;
top:50%;
right:20px;
transform:translate(0%,-50%);
display:flex;
align-items:center;
}
.power a{
margin-left:16px;
color: #FFF;
}
.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:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free","Font Awesome 7 Brands", sans-serif;
text-shadow:none;
letter-spacing:0.1px;
}
/* PAGE GALLERY */
.wrapper {
position: relative;
margin-top: 75px;
width: 100%;
text-align: center;
padding-bottom: 60px;
}
.page_categories{
width: 100%;
max-width: 640px;
margin: 24px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.gallery {
position: relative;
width: 180px;
height: 52px;
margin: 8px;
padding: 0 14px;
border-radius: 12px;
background: var(--white);
border: 1px solid var(--line);
border-left:5px solid #ff5a36;
box-shadow: 0 4px 14px rgba(35,32,25,0.05);
transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
}
.gallery:hover{
transform: translateY(-2px);
border-color: var(--brass);
box-shadow: 0 10px 22px rgba(35,32,25,0.08);
}
.gallery span{
width: 150px;
display: block;
white-space: nowrap;
overflow: hidden;
color: var(--ink);
font-size: 0.9em;
font-weight: 500;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.gallery span i{
color: var(--brass);
margin-right: 6px;
}
/* ===================== ¹æ¼Û±¹ µî·Ï ¹®ÀÇ Ä«µå ===================== */
.reg-inquiry-card{
position:relative;
width:calc(100% - 40px);/*Á ¿ì ¿©¹é¿ë*/
max-width:640px;
margin:18px auto 10px;
padding:2px;
border-radius:18px;
background:linear-gradient(120deg, #c8a25b, #f7e3a8, #bf9340, #f7e3a8, #c8a25b);
background-size:300% 300%;
animation: regBorderFlow 6s ease infinite;
box-shadow:0 7px 17px rgba(169,188,218,0.4);
box-sizing:border-box;
}
.reg-inquiry-inner{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:clamp(8px, 3vw, 14px);
padding:clamp(12px, 3.5vw, 16px) clamp(12px, 4vw, 18px);
border-radius:16px;
background:var(--white);
background-image:
radial-gradient(circle at 100% 0%, rgba(166,128,60,0.08), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(166,128,60,0.06), transparent 55%);
text-align:left;
}
.reg-inquiry-icon{
flex-shrink:0;
width:clamp(38px, 11vw, 52px);
height:clamp(38px, 11vw, 52px);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(145deg, #bf9340, #c8a25b);
color:#fff;
font-size:clamp(0.85rem, 3vw, 1.15rem);
box-shadow:0 6px 14px rgba(166,128,60,0.35), inset 0 1px 1px rgba(255,255,255,0.35);
animation: pulseRing2 2.4s ease-in-out infinite;
}
@keyframes pulseRing2 {
0% { box-shadow: 0 0 0 0 rgba(200,162,91,0.4); }
70% { box-shadow: 0 0 0 14px rgba(200,162,91,0); }
100% { box-shadow: 0 0 0 0 rgba(200,162,91,0); }
}
.reg-inquiry-body{ flex:1 1 0%; min-width:0; }
.reg-inquiry-title{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
font-size: 0.85rem;
font-weight:600;
color:var(--ink);
letter-spacing:-0.2px;
}
.reg-inquiry-title i{
color:var(--brass);
font-size:0.8em;
}
.reg-inquiry-title .reg-badge{
display:inline-flex;
align-items:center;
height:16px;
line-height:1;
font-size:0.55rem;
font-weight:300;
color:#fff;
background:var(--onair);
padding:2px 7px 1px;
margin-left: 5px;
border-radius:15px;
animation: regBadgeGlow 1.8s ease-in-out infinite;
}
.reg-inquiry-title .reg-badge i{
font-size:0.5rem;
font-weight:600;
color:#fff;
}
.reg-inquiry-desc{
margin-top:3px;
font-size:clamp(0.66rem, 2.6vw, 0.74rem);
color:var(--ink-soft);
line-height:1.45;
}
.reg-call-btn{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
gap:3px;
padding:4px 10px;
border-radius:999px;
background:var(--ink);
color:#fff !important;
font-size:0.65rem;
font-weight:600;
white-space:nowrap;
box-shadow:0 6px 16px rgba(35,32,25,0.22);
transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
margin-left:auto;
}
.reg-call-btn i{
font-size:0.55rem;
animation: regRing 1.6s ease-in-out infinite;
}
.reg-call-btn:hover{
transform:translateY(-2px);
background:var(--brass-deep);
box-shadow:0 10px 22px rgba(166,128,60,0.32);
}
.reg-call-btn:active{ transform:translateY(0) scale(0.97); }
@keyframes regBorderFlow{
0%{ background-position:0% 50%; }
50%{ background-position:100% 50%; }
100%{ background-position:0% 50%; }
}
@keyframes regCardIn{
from{ opacity:0; transform:translateY(-100px) scale(0.98); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes regBadgeGlow{
0%,100%{ box-shadow:0 0 0 0 rgba(156,43,43,0.45); }
50%{ box-shadow:0 0 0 5px rgba(156,43,43,0); }
}
@keyframes regRing{
0%,100%{ transform:rotate(0deg); }
10%{ transform:rotate(-15deg); }
20%{ transform:rotate(12deg); }
30%{ transform:rotate(-10deg); }
40%{ transform:rotate(6deg); }
50%{ transform:rotate(0deg); }
}
/* ¸ð¹ÙÀÏ ¼¼·Î Æø¿¡¼­: ¾ÆÀÌÄÜ+ÅؽºÆ®´Â Ç×»ó °¡·Î ¹èÄ¡ À¯Áö, ¹öÆ°¸¸ °ø°£ ºÎÁ·ÇÏ¸é ¾Æ·¡·Î ³»·Á Ç®¿ÍÀ̵å */
@media all and (max-width:480px){
.reg-call-btn{ flex-basis:100%; margin-left:0; margin-top:6px; }
}

/* BOTTOM CARDS */
.popular_games {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 14px;
}
.popular-card {
position: relative;
width: 172px;
height: 284px;
margin: 10px;
background: var(--white);
border: 1px solid var(--line);
border-top:7px solid #ff5a36;
border-radius: 20px 20px 8px 8px;
box-shadow: 0 10px 26px rgba(35,32,25,0.06);
transition: transform 220ms ease-in-out, box-shadow 220ms ease-in-out, border-color 220ms ease-in-out;
overflow: hidden;
}
.popular-card:hover{
transform: translateY(-5px);
box-shadow: 0 18px 36px rgba(35,32,25,0.12);
border-color: var(--brass);
}
/* ON AIR ½Ã±×´Ïó ¹îÁö */
.popular-card::before{
content:"ON AIR";
position:absolute;
top:12px;
left:15px;
padding:4px 9px 2.5px 16px;
font-size:0.52rem;
font-weight:600;
letter-spacing:0.08em;
color: var(--white);
background:var(--ink-soft);
background: var(--beforeBg, var(--ink-soft));
border-radius: 20px;
z-index:2;
}
.popular-card::after{
content:"";
position:absolute;
top:18.5px;
left:22px;
width:4px;
height:4px;
border-radius:50%;
background: #FFF;
animation: onairPulse 1.8s ease-out infinite;
z-index:3;
}
@keyframes onairPulse{
0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.55); }
70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); }
100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.img_container {
width: 116px;
height: 116px;
margin: 44px auto 0;
border-radius: 100px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow:
0 0 0 3px var(--paper),
0 0 0 4px var(--line),
0 10px 20px rgba(35,32,25,0.12);
}
.game_title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ink);
font-size:0.8em;
font-weight: 700;
margin: 10px 5px 0px;
}
.download_button {
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
min-width: 110px;
white-space: nowrap;
color: var(--ink);
border: 1px solid var(--brass);
margin:0;
padding:7px 17px;
outline: none;
background: transparent;
font-size: 0.8rem;
font-weight:600;
border-radius: 20px;
text-decoration: none;
transition: background 200ms ease-in-out, color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.download_button:hover{
background: var(--brass);
color: var(--white);
box-shadow: 0 6px 16px rgba(166,128,60,0.30);
}
.Loading{
position: relative;
top: 3px;
margin:0;
padding:0;
height:40px;
line-height:18px;
overflow:hidden;
color: var(--ink-soft);
font-size:0.7rem;
}
/* ===================== SCROLL TOP/BOTTOM FAB ===================== */
#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);
}
}

.banner-section {
position: relative;
margin:0 10px;
}
.banner {
display: flex;
align-items: center;
gap: 12px;
padding: 5px 10px;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
border: 1px solid #b5d4f4;
border-left: 3px solid #378ADD;
border-radius: 8px;
margin: 1.5rem auto 0;
animation: fadeIn 0.45s ease both;
text-decoration: none;
transition: background 0.15s;
box-shadow: 0.2rem 0.2rem 0.35rem #e0e6f1, -0.15rem -0.15rem 0.35rem #FFFFFF;
cursor: pointer;
text-align: left;
}
.icon-wrap {
flex-shrink: 0;
width: 45px;
height: 45px;
border-radius: 50%;
background: #e6f1fb;
display: flex;
align-items: center;
justify-content: center;
animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(55,138,221,0.3); }
70% { box-shadow: 0 0 0 14px rgba(55,138,221,0); }
100% { box-shadow: 0 0 0 0 rgba(55,138,221,0); }
}
.banner-text {
flex: 1;
font-size: .75rem;
line-height: 1.5;
margin: 0;
}
.banner-text strong { font-weight: 700;}
.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:8px;
font-size:.85rem;
z-index:999999999;
opacity:0;
visibility:hidden;
transition:.25s;
pointer-events:none;
}
.copy-toast.show{
opacity:1;
visibility:visible;
}
/* Toast container */
#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;
}
/* ===================== FOOTER ===================== */
.footer{
font-family:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo","Nanum Gothic","Malgun Gothic","PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei","Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans KR","Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans CJK","Helvetica Neue",Arial,sans-serif;
color: #9ea3b0;
font-size:0.74rem;
font-weight:500;
text-shadow: none;
margin: 10px auto 8px;
padding: 20px 14px 0;
z-index:10;
text-align:center;
letter-spacing:0.2px;
max-width:720px;
}
.footer span {
font-weight:700;
color: #000;
position: relative;
top: 2px;
display: inline-block;
-webkit-animation: bounce .3s ease infinite alternate;
animation: bounce .3s ease infinite alternate;
}

.footer span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
.footer span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }
.footer span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.footer span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }
.footer span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }
.footer span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.footer span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }
.footer span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; }
.footer span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; }
.footer span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.footer span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.footer span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.footer span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

@-webkit-keyframes bounce {
100% {
top: -2px;
}
}
@keyframes bounce {
100% {
top: -2px;
}
}

@media all and (max-width: 768px) and (orientation: portrait) {
.cast-samsung-margin {
margin: 0 15px;
}
}

.admin-popular-card {
position:absolute;
bottom:5px;
right:5px;
font-size:.75rem;
cursor: pointer;
}
/*·Îµù¾Ö´Ï¸ÞÀ̼Ç*/
#pageLoaderBackdrop{
position:fixed;inset:0;z-index:999998;
background:var(--overlay-scrim);
opacity:0;visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
#pageLoaderWrap:has(#pageLoaderOverlay.is-active) #pageLoaderBackdrop{
opacity:1;visibility:visible;
}
#pageLoaderOverlay {
position:fixed; top:50%; top:50dvh; left:50%;
transform: translate(-50%, -50%);
z-index:999999 !important;
display:flex; align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
width: var(--loader-size);
height: var(--loader-size);
margin: 0;
filter: url('#smartgoo');
-webkit-animation: rotate-move 2s ease-in-out infinite;
animation: rotate-move 2s ease-in-out infinite;
}
#pageLoaderOverlay.is-active{ opacity:1; visibility:visible; }
.smartdot {
width: calc(var(--loader-size) * var(--dot-ratio));
height: calc(var(--loader-size) * var(--dot-ratio));
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.smartdot-3 {
background-color: var(--dot-color-3);
-webkit-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}
.smartdot-2 {
background-color: var(--dot-color-2);
-webkit-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}
.smartdot-1 {
background-color: var(--dot-color-1);
-webkit-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}
@-webkit-keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -0.2)) scale(var(--spread-scale))}
  60% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  80% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -0.2)) scale(var(--spread-scale))}
  60% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  80% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes rotate-move {
55% {transform: translate(-50%, -50%) rotate(0deg)}
80% {transform: translate(-50%, -50%) rotate(360deg)}
100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@keyframes rotate-move {
55% {transform: translate(-50%, -50%) rotate(0deg)}
80% {transform: translate(-50%, -50%) rotate(360deg)}
100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@-webkit-keyframes index {
0%, 100% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
}
@keyframes index {
0%, 100% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
}