@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:#fdfcf9;
--paper-soft:#F3F0E8; /* º¸Á¶ ¹è°æ */
--ink:#232019;         /* º»¹®/ŸÀÌƲ */
--ink-soft:#726C5E;    /* º¸Á¶ ÅؽºÆ® */
--line:#E6E0D2;        /* Çì¾î¶óÀÎ */
--brass:#A6803C;       /* ½Ã±×´Ïó °ñµå */
--brass-deep:#8A6A2E;  /* °ñµå hover */
--onair:#9C2B2B;       /* ON AIR ½ÅÈ£µî */
--white:#FFFFFF;
}

*{padding:0;margin:0;box-sizing:border-box;}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
margin: 0;
padding: 0;
font-family:"NEXON Lv1 Gothic OTF","Noto Sans KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, "Font Awesome 6 Free", sans-serif;
background-color: var(--paper);
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);
}
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(251,250,246,0.92);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background-image:
radial-gradient(circle at 24px 50%, rgba(166,128,60,0.18) 0 2px, transparent 3px),
radial-gradient(circle at 24px 50%, rgba(166,128,60,0.11) 0 10px, transparent 11px),
radial-gradient(circle at 24px 50%, rgba(166,128,60,0.06) 0 18px, transparent 19px);
background-repeat: no-repeat;
box-shadow: 0 6px 12px -6px rgba(0,0,0,.2);
}
.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:45px;
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;
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: #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: absolute;
top: 55px;
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);
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 h1{
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 h1 i{
color: var(--brass);
margin-right: 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-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:3px 9px 3px 16px;
font-size:0.6em;
font-weight:700;
letter-spacing:0.08em;
color: var(--white);
/*background:hsla(var(--hue), 70%, 55%, .7);*/
background: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); }
}
.logo-onairPulse {
  position:absolute;
  top:5px;
  left:102px;
  width:4px;
  height:4px;
  border-radius:50%;
  background: hsl(var(--logoHue, 220) 70% 55%);
  animation: logoPulse 1.8s ease-out infinite;
  z-index:99;
}
@keyframes logoPulse {
  0%{ box-shadow:0 0 0 0 hsl(var(--logoHue, 220) 70% 55% / 0.55); }
  70%{ box-shadow:0 0 0 7px hsl(var(--logoHue, 220) 70% 55% / 0); }
  100%{ box-shadow:0 0 0 0 hsl(var(--logoHue, 220) 70% 55% / 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: 14px 12px 0px 12px;
}
.download_button {
color: var(--ink);
width: 75%;
border: 1px solid var(--brass);
margin:0;
padding:7px;
outline: none;
background: transparent;
font-size: 0.8rem;
font-weight:600;
letter-spacing: 0.02em;
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{
height: 40px;
color: var(--ink-soft);
font-size:0.7rem;
padding-top: 2px;
}
.footer{
font-family:"Noto Serif KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, "Font Awesome 6 Free", sans-serif;
color: var(--ink-soft);
font-size:0.8rem;
font-weight:500;
margin: 24px auto 10px;
padding-top: 20px;
border-top: 1px solid var(--line);
z-index:10;
}
.footer i{
color: var(--brass);
}
.footer span {
font-weight:700;
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;
}
}

/* ===================== 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);
}
#up svg polygon, .heroEffectsarrow svg polygon{
fill: #FFF;
stroke: #FFF;
stroke-width: 1.4;
}
@-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);
}
}