@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap');
@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;
}
*{padding:0;margin:0;box-sizing:border-box;}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-tap-highlight-color: transparent;
}
body {
overflow-x: hidden;
padding: 0;
margin: 0;
background-color: #d6dfe8;
background-image: url("https://tistory2.daumcdn.net/tistory/240726/skin/images/flower-5152600_640.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', FontAwesome, serif;
min-width:380px;
 -ms-overflow-style: none;
 }
::-webkit-scrollbar {
  display: none;
}
a, input {
text-decoration:none;
color:#4A6888;
}
ul li {
list-style: none;
}
#loading-body{
display: none;
margin: 0px;
padding: 0px;
}
.top-naviagation{
position: fixed;
top: -2px;
left: 0px;
margin: 0px;
padding: 0px;
z-index: 1;
}
.fire_games-nav {
width: 100vw;
height: 50px;
border: none;
padding: 0px;
margin: 0px;
color: #000;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.4);
background-image: url(../img/dragon.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 15px;
}

.fire_games_logo{
position: absolute;
top:50%;
left:25px;
transform:translate(0%,-50%);
cursor:pointer;
color: #000;
background: rgba(255, 255, 255, 0);
font-size: 1.105rem;
font-family:"PyeongChangPeace-Bold", "Font Awesome 5 Free", sans-serif;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
}
.power a{
cursor:pointer;
color: #000;
background: rgba(255, 255, 255, 0);
font-size: 1.105rem;
font-family:"PyeongChangPeace-Bold", "Font Awesome 5 Free", sans-serif;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
margin-left:20px;
}
.power{
position: absolute;
top:50%;
right:30px;
transform:translate(0%,-50%);
}
.my-m{
margin: 0px 30px;
}
.centered-audio-container{
margin: 15px auto;
padding: 0px;
}
.fontAwesome {
  font-family: "Font Awesome 5 Free","Font Awesome 5 Brands", sans-serif;
  font-weight: 900;
}
.iButton{
position: fixed;
top: 55%;
right: 10px;
transform: translateY(-50%);
}
.iButton i{
color: #FFF;
font-size:1.585em;
text-shadow:1px 1px 0px rgba(0,0,0,.9);
cursor: pointer;
margin:10px 5px;
padding:0px;
z-index:9;
}
#myProgress {
width:96%;
background-color: #d9d9f2;
cursor: pointer;
border-radius: 10px;
margin:0 auto;
padding:0px;
}
#myBar {
width: 0%;
height: 5px;
background-color: #ffc266;
border-radius: 10px;
margin-top: 5px;
padding:0px;
}
.timer, .duration{
position: absolute;
top:18px;
font-size:1rem;
font-weight:700;
}
.duration{
right:7px;
}
.timer{
left:7px;
}
.fa{
width: 22px;
}
.title{
display: block;
white-space: nowrap;
/*overflow: hidden;
text-overflow: ellipsis;*/
margin: 0px;
padding:0px;
width:100%;
font-size:1.125rem;
font-weight:700;
text-align: center;
}
/*.title::before{
content:'\f001\00a0';
  font-family: "Font Awesome 5 Free","Font Awesome 5 Brands", sans-serif;
  font-weight: 600;
}*/
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: calc(98%);
margin: 0 auto;
}
.marquee-content {
display:block;
padding: 5px 0px;
margin: 0 auto;
}
.paused .marquee-content {
animation-play-state: paused;
}

.player-ctn{
position: relative;
border-radius: 15px;
width: 100%;
padding: 0px;
background-color: rgba(0, 103, 115, 0.3);
margin:0 auto;
box-shadow: 0px 0px 20px rgba(0, 103, 115, 0.5);
}
.btn-ctn{
height: 50px;
padding-top: 7px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-action{
cursor: pointer;
padding: 0px 8px;
margin: 0px;
}
#toggleMute i{
min-width:20px;
}
.btn-faplay i{
font-size: 1.525rem;
padding: 0px;
margin:0px;
}
.playlist-track-ctn{
display: flex;
background-color: rgba(0, 103, 115, 0.3);
margin-top: 3px;
border-radius: 5px;
cursor: pointer;
padding:0 10px;
}
.playlist-track-ctn:last-child{
border-radius:5px 5px 15px 15px;
}
.playlist-track-ctn > div{
margin:10px 0px;
}
.playlist-info-track{
width: 100%;
}
.playlist-info-track, .playlist-duration{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin:0px;
padding: 0px;
color: #000;
font-size: 0.875rem;
font-weight:600;
pointer-events: none;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.4);
}
.playlist-ctn{
padding-bottom: 0px;
}
.active-track{
background: rgba(0, 103, 115, 0.8);
}
.active-track > .playlist-info-track,.active-track > .playlist-duration,.active-track > .playlist-btn-play{
color: #FFF;
font-weight: 700;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.7);
}
.playlist-btn-play{
display:flex;
align-items:center;
pointer-events: none;
padding-right:5px;
}
.playlist-duration{
display:none !important;
width: 0px;
}
.title, .timer, .duration, .btn-action{
text-shadow:0px 0px 4px rgba(255, 255, 255, 1);
}
.my-search{
position: relative;
margin:0 auto;
padding-top:70px;
width:auto;
}
.my-input, .searchTerm_p{
background:rgba(255, 255, 255, 0.3);
}
.my-input{
font-family:'Noto Sans KR', "Apple SD Gothic Neo", "Malgun Gothic", serif;
width:100%;
outline:none;
margin:0px;
padding:0px;
font-size:0.875em;
color:#006773;
background:transparent;
height:40px;
line-height:38px;
border:3px solid #006773;
margin:0px;
padding:0px 120px 0px 20px;
border-radius:7px;
text-align: center;
ime-mode:active;
}
.my-close-btn{
position:absolute;
top:70px;
right:0px;
cursor:pointer;
color:#fff;
border: solid 1px #006773;
background:#006773;
width:100px;
height:40px;
border-radius:0px 7px 7px 0px;
outline:none;
text-transform:uppercase;
font-weight:bold;
}
::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
color:#006773;
text-transform:uppercase;
}
::-moz-placeholder{ /* Firefox 19+ */
color:#006773;
}
:-ms-input-placeholder{ /* IE 10+ */
color:#006773;
}
.wrap_p{
width:350px;
margin:1px auto;
padding:0;
text-align: center;
}
.search_p {
  width: 100%;
  position: relative;
  display: flex;
}
.searchTerm_p {
 font-family:'Noto Sans KR', "Apple SD Gothic Neo", "Malgun Gothic", serif;
  width: 100%;
  border: 3px solid #006773;
  border-right: none;
  padding: 5px;
  height: 36px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #006773;
  text-align:center;
}
.searchButton {
  width: 60px;
  height: 36px;
  border: 1px solid #006773;
  background: #006773;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}
.songtotal{
/*width: fit-content;*/
width:250px;
height: 40px;
background-color: rgba(0, 103, 115, 0.5);
font-size:0.85rem;
color:#000;
font-weight:600;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5);
border: 5px solid transparent;
border-radius: 0px 0px 15px 15px;
box-shadow:0px 0px 15px rgba(129, 162, 171, 0.7);
margin:0px auto;
padding:5px;
text-align: center;
}
.auto_page{
/*width: fit-content;*/
width:250px;
height: 40px;
background-color: rgba(0, 103, 115, 0.5);
border: 5px solid transparent;
border-radius: 15px 15px 0px 0px;
box-shadow:0px 0px 15px rgba(129, 162, 171, 0.7);
margin:0px auto;
padding:5px;
text-align: center;
}
.auto_page input[type="checkbox"]{
border:0px;
background:transparent;
appearance:none;
overflow: hidden;
cursor:pointer;
}
.auto_page input::before {
content: "´ÙÀ½ ÆäÀÌÁö ÀÚµ¿Àç»ý\00a0\f204\00a0²¨Áü";
color: #101416;
font-family: "Noto Serif KR", "Font Awesome 5 Free", serif;
font-size:1rem;
font-weight: 700;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5);
}
.auto_page input[type="checkbox"]:checked::before {
content: "´ÙÀ½ ÆäÀÌÁö ÀÚµ¿Àç»ý\00a0\f205\00a0ÄÑÁü";
color: #101416;
font-family: "Noto Serif KR", "Font Awesome 5 Free", serif;
font-size:1rem;
font-weight: 700;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5);
}
.pagination{
margin:10px 0px;
padding:0;
width:100%;
text-align:center;
/*white-space:nowrap;*/
line-height:45px;
}
.pagination a{
display:inline-block;
width:53px;
height:40px;
line-height:38px;
background-color: rgba(0, 103, 115, 0.7);
color:#FFF;
padding:0;
margin:0px 1px;
font-size:0.75rem;
text-align:center;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius:7px;
transition:0.3s;
}
.pagination .active{
color:#000;
font-weight:700;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5);
}
.pagination a:hover{
color:#00ffff;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
}
@media screen and (orientation:landscape){/* °¡·Î ¹æÇâ È­¸é¿¡ ´ëÇÑ ½ºÅ¸ÀÏ ±ÔÄ¢ */
.btn-action{
padding: 10px 20px;
}
}
@media screen and (orientation:portrait){/* ¼¼·Î ¹æÇâ È­¸é¿¡ ´ëÇÑ ½ºÅ¸ÀÏ ±ÔÄ¢ */
.title{
font-size:0.875rem;
}
}
.footer-container{
width:100%;
padding-bottom: 10px;
}
.footer{
width: 100%;
font-family:"Noto Serif KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, "Font Awesome 5 Free", sans-serif;
color:#123456;
font-size:0.765rem;
font-weight:500;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
margin: 0px;
padding: 0px;
text-align: center;
}
.footer a {
color:#123456;
}
.footer span {
color:#123456;
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;
}
}
/*START LOADER DESIGN*/
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;
  -ms-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  z-index: 1001;
}

.object {
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  position: absolute;
  border-top: 5px solid #FFF;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #FFF;
  border-right: 5px solid transparent;
  -webkit-animation: animate 2s infinite;
  animation: animate 2s infinite;
}

#object_one {
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
}

#object_two {
  left: 65px;
  top: 65px;
  width: 70px;
  height: 70px;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#object_three {
  left: 55px;
  top: 55px;
  width: 90px;
  height: 90px;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#object_four {
  left: 45px;
  top: 45px;
  width: 110px;
  height: 110px;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes animate {
  50% {
    -ms-transform: rotate(360deg) scale(0.8);
    -moz-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    transform: rotate(360deg) scale(0.8);
  }
}
@keyframes animate {
  50% {
    -ms-transform: rotate(360deg) scale(0.8);
    -moz-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    transform: rotate(360deg) scale(0.8);
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background-color: #4241b8;
  z-index: 999;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loading-center-absolute {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  -moz-transform: translateX(100%);
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.5s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.v_blue #loader-wrapper .loader-section,
.v_navy_blue #loader-wrapper .loader-section {
  background-color: #121a6d;
}

.v_dark #loader-wrapper .loader-section,
.v_light_dark #loader-wrapper .loader-section {
  background-color: #030307;
}

.v_blue_light #loader-wrapper .loader-section,
.v_royal_blue #loader-wrapper .loader-section {
  background-color: #081990;
}

.v_light_purple #loader-wrapper .loader-section {
  background-color: #4e0094;
}

.v_cyan_blue #loader-wrapper .loader-section,
.v_cyan_blue .spop {
  background-color: #0e082c;
}
/*END LOADER DESIGN*/
/*******loader-container START********/
.loader-container {
 display:none;
  width: 92px;
  height: 38px;
  float: left;
  z-index: 10;
}

.abs-center {
position: fixed;;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
}

@keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes "spin" {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes "spin" {
  from {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.olympicloader {
  position: relative;
}
.olympicloader .loader-circle {
  width: 28px;
  height: 28px;
  border: 3px solid #589dec;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spin 400ms infinite linear;
  -moz-animation: spin 400ms infinite linear;
  -ms-animation: spin 400ms infinite linear;
  -o-animation: spin 400ms infinite linear;
  animation: spin 400ms infinite linear;
  float: left;
}
.olympicloader .loader-circle.first {
  position: absolute;
  top: 0;
  left: 0;
  border-top-color: #fff;
}
.olympicloader .loader-circle.second {
  position: absolute;
  top: 0;
  left: 32px;
  border-right-color: #fff;
}
.olympicloader .loader-circle.third {
  position: absolute;
  top: 0;
  left: 64px;
  border-bottom-color: #fff;
}
.olympicloader .loader-circle.fourth {
  position: absolute;
  top: 10px;
  left: 16px;
  border-left-color: #fff;
}
.olympicloader .loader-circle.fifth {
  position: absolute;
  top: 10px;
  left: 48px;
  border-right-color: #fff;
}
/*******loader-container END********/