@charset "UTF-8";
@font-face {
  font-family: "SB Aggro";
  font-weight: 400;
  font-display: swap;
  src: local("SB Aggro Regular"), url("../font/SB 어그로 L.ttf") format("truetype");
}
@font-face {
  font-family: "SB Aggro";
  font-weight: 500;
  font-display: swap;
  src: local("SB Aggro Medium"), url("../font/SB 어그로 M.ttf") format("truetype");
}
@font-face {
  font-family: "SB Aggro";
  font-weight: 700;
  font-display: swap;
  src: local("SB Aggro Bold"), url("../font/SB 어그로 B.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Regular.woff2) format("woff2"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Regular.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Medium.woff2) format("woff2"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Medium.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Bold.woff2) format("woff2"), url(//image.genie.co.kr/imageg/rele/fonts/Pretendard-Bold.woff) format("woff");
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, input, select, textarea, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  padding: 0;
  margin: 0;
  vertical-align: middle;
  box-sizing: border-box;
}

header, footer, section, article, menu, nav, aside {
  display: block;
}

html {
  -webkit-overflow-scrolling: touch;
  font-size: 2.1342vw;
  -webkit-overflow-scrolling: touch;
}

html, body {
  width: 100%;
  -webkit-text-size-adjust: none;
  overflow: auto;
  font-family: "SB Aggro", HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif;
}

body {
  line-height: 1.2;
  overflow-x: hidden;
  position: relative;
  min-width: 320px;
  -webkit-text-size-adjust: none;
  justify-: center;
  align-items: flex-start;
  word-break: keep-all;
}

ul, ol {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, fieldset {
  border: 0;
  outline: none;
}

label {
  cursor: pointer;
}

a {
  text-decoration: none;
  outline: none !important;
}

i, em, address {
  font-style: normal;
}

button {
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  line-height: 1.567em;
  letter-spacing: -0.035em;
  cursor: pointer;
}

caption, legend {
  visibility: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

iframe, object, video, embed {
  position: relative;
  top: 0;
  left: 0;
  max-width: 100%;
}

.blind, .hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

ㅈ select::-ms-expand {
  display: none;
}

input::-ms-clear {
  display: none;
}

body {
  min-width: 320px;
  height: 100%;
  color: #fff;
  overflow: hidden;
}

@media (min-width: 768px) {
  html, body {
    font-size: 16.384px !important;
  }
}
.event_container {
  width: 100vw;
}
.event_container .gnb_wrap {
  position: relative;
  z-index: 10;
  height: 11.25rem;
  background: #1B3CAB;
  padding-top: 6rem;
  padding-right: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 2.0625rem;
}
.event_container .gnb_wrap .gnb_wrap_inner {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.event_container .gnb_wrap .gnb_wrap_inner .logo {
  width: 8.125rem;
}
.event_container .gnb_wrap .gnb_wrap_inner .nav_auth {
  color: #5cdeff;
  font-size: 1.875rem;
  font-weight: 400;
  font-family: "Pretendard";
}
.event_container .main_wrap {
  background-image: url("//image.genie.co.kr/imageg/web/promo_2025/0812_vote_promotion/bg.png");
}
.event_container .main_wrap .header_wrap {
  max-width: 750px;
  margin: 0 auto;
  max-width: 750px;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80.9375rem;
  position: relative;
}
.event_container .main_wrap .header_wrap h1 {
  position: relative;
  height: fit-content;
  width: fit-content;
  margin: 0 auto;
}
.event_container .main_wrap .header_wrap h1 .header {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 24.8125rem;
  width: 31.5rem;
  margin: 0 auto;
  display: block;
}
.event_container .main_wrap .header_wrap h1 .sub_title {
  position: absolute;
  z-index: 10;
  line-height: 2.9375rem;
  white-space: nowrap;
  font-weight: 400;
  font-size: 2.125rem;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 212%);
  bottom: 1.625rem;
}
.event_container .main_wrap .header_wrap .object_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.event_container .main_wrap .header_wrap .object_wrap img {
  position: absolute;
}
@keyframes floatAndSway {
  0% {
    transform: translateY(15%) rotate(-4deg);
  }
  50% {
    transform: translateY(7%) rotate(4deg);
  }
  100% {
    transform: translateY(15%) rotate(-4deg);
  }
}
@keyframes floatAndSwayReverse {
  0% {
    transform: translateY(7%) rotate(-4deg);
  }
  50% {
    transform: translateY(15%) rotate(4deg);
  }
  100% {
    transform: translateY(7%) rotate(-4deg);
  }
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(1) {
  animation: floatAndSway 2.5s linear infinite;
  width: 12rem;
  top: 7.0625rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(2) {
  animation: floatAndSwayReverse 2.5s linear infinite;
  width: 6.9375rem;
  top: 13.875rem;
  left: 4.625rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(3) {
  animation: floatAndSway 2.5s linear infinite;
  width: 12.625rem;
  top: -1.9375rem;
  right: 3.3125rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(4) {
  animation: floatAndSwayReverse 2.5s linear infinite;
  right: 1.3125rem;
  top: 3.5rem;
  width: 16rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(5) {
  animation: floatAndSway 2.5s linear infinite;
  bottom: 10.8125rem;
  width: 14rem;
  left: -0.5rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(6) {
  animation: floatAndSwayReverse 2.5s linear infinite;
  width: 11.375rem;
  bottom: 4.375rem;
  right: 9.375rem;
}
.event_container .main_wrap .header_wrap .object_wrap img:nth-child(7) {
  animation: floatAndSway 2.5s linear infinite;
  width: 13.1875rem;
  bottom: 9.75rem;
  right: 2.25rem;
}
.event_container .main_wrap .description_wrap {
  background-color: #EEF3FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 2.5rem 8rem 2.5rem;
}
.event_container .main_wrap .description_wrap h2 {
  display: flex;
  flex-direction: column;
  color: #3D6CFF;
  font-size: 4.625rem;
  font-weight: bold;
  align-items: center;
  margin-bottom: 2rem;
}
.event_container .main_wrap .description_wrap h2 span {
  font-weight: bold;
  color: #000;
  font-size: 2.75rem;
  margin-bottom: 0.4375rem;
}
.event_container .main_wrap .description_wrap p {
  text-align: center;
  line-height: 1.6;
  color: #444444;
  white-space: nowrap;
  font-size: 2rem;
  font-weight: 400;
}
.event_container .main_wrap .description_wrap img {
  width: 34.125rem;
  margin-bottom: 3.3125rem;
}
.event_container .main_wrap .description_wrap .description_content {
  display: flex;
  flex-direction: column;
  background-color: #E1EAFF;
  border-radius: 1.25rem;
  font-family: "Pretendard";
  padding: 2.4375rem 2.1875rem 0.875rem 2.1875rem;
}
.event_container .main_wrap .description_wrap .description_content li {
  display: flex;
  margin-bottom: 1.5625rem;
}
.event_container .main_wrap .description_wrap .description_content li p:nth-child(1) {
  font-size: 1.875rem;
  font-weight: bold;
  color: #000000;
  margin-right: 1rem;
}
.event_container .main_wrap .description_wrap .description_content li p:nth-child(2) {
  font-size: 1.875rem;
  font-weight: 400;
  color: #000000;
}
.event_container .main_wrap .description_wrap .description_content li p:nth-child(1)::before {
  content: "•";
  color: black;
  margin-right: 0.625rem;
  font-size: 1.4rem;
  position: relative;
  top: -0.3125rem;
}
.event_container .main_wrap .swiper_wrap {
  background: url("//image.genie.co.kr/imageg/web/promo_2025/0812_vote_promotion/swiper_bg.png") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 10.625rem;
}
.event_container .main_wrap .swiper_wrap h2 {
  color: #fff;
  font-weight: bold;
  font-size: 4.625rem;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.event_container .main_wrap .swiper_wrap h2 span {
  font-size: 2.75rem;
  margin-bottom: 0.4375rem;
}
.event_container .main_wrap .swiper_wrap p {
  color: #CFE8FF;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 4.5rem;
  line-height: 1.6;
}
.event_container .main_wrap .swiper_wrap .swiper_container {
  max-width: 750px;
  overflow: hidden;
  margin: 0 auto;
}
.event_container .main_wrap .swiper_wrap .swiper {
  overflow: visible;
}
.event_container .main_wrap .swiper_wrap .swiper-slide:first-child {
  margin-left: -9.0625rem !important;
}
.event_container .main_wrap .swiper_wrap .swiper-slide {
  width: 31.6875rem !important;
}
.event_container .main_wrap .swiper_wrap .swiper-slide img {
  display: block;
  width: 100%;
  border-radius: 1.25rem 1.25rem 0 0;
}
.event_container .main_wrap .swiper_wrap .swiper-slide span {
  display: block;
  line-height: 2.75rem;
  background-color: #1E34C1;
  border-radius: 0 0 1.25rem 1.25rem;
  color: #D9D9D9;
  font-family: "Pretendard";
  font-size: 2rem;
  padding: 2.75rem;
  text-align: center;
}
.event_container .main_wrap .swiper_wrap .swiper-slide span b {
  color: #fff;
  font-size: 2.25rem;
}
.event_container .main_wrap .swiper_wrap .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.5;
  width: 0.875rem !important;
  height: 0.875rem !important;
}
.event_container .main_wrap .swiper_wrap .swiper-pagination-bullet-active {
  background-color: #fff !important;
  width: 1.625rem !important;
  height: 0.875rem !important;
}
.event_container .main_wrap .swiper_wrap .swiper-pagination {
  margin-top: 2.5rem;
}
.event_container .main_wrap .artist_part {
  background-color: #16161A;
}
.event_container .main_wrap .artist_part .artist_part_wrap {
  max-width: 750px;
  margin: 0 auto;
  background-color: #16161A;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
  padding-top: 2.1875rem;
  padding-bottom: 8rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap img {
  width: 22.4375rem;
  margin: auto;
  margin-bottom: 2.5rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .vote_info {
  margin-bottom: 4.5625rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .vote_info li {
  color: #96969C;
  font-size: 1.875rem;
  font-family: "Pretendard";
  font-weight: 500;
}
.event_container .main_wrap .artist_part .artist_part_wrap .vote_info li span {
  font-weight: 300;
  vertical-align: bottom;
  vertical-align: baseline;
  font-family: "Montserrat";
  margin-left: 1.75rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .vote_info li:nth-child(1) {
  margin-bottom: 0.8125rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .vote_info li:nth-child(1) span {
  margin-left: 1.99rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2열 */
  gap: 2.5rem 1.25rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li {
  font-family: "Pretendard";
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .thumb.check:after {
  content: "";
  background: url("//image.genie.co.kr/imageg/web/promo_2025/0812_vote_promotion/selected_icon.png") no-repeat center center;
  background-size: 5rem;
  position: absolute;
  right: 3.125rem;
  width: 5rem;
  height: 5rem;
  top: 0.9375rem;
  right: 0.9375rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .info_wrap {
  padding: 1.875rem 1.25rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .info_wrap .song_name {
  margin-bottom: 0.75rem;
  line-height: 2.375rem;
  z-index: 2;
  display: flex;
  font-size: 2.375rem;
  font-weight: 500;
  color: #0b84ff;
  position: relative;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .info_wrap .song_name .rank {
  margin-right: 0.8125rem;
  font-size: 2.5rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .info_wrap .song_name strong {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  font-size: 2.25rem;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li a .info_wrap .artist_name {
  margin-bottom: 1.375rem;
  color: #999999;
  font-size: 1.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li .winner {
  border: solid 0.375rem #0b84ff;
  border-radius: 1.25rem;
  position: relative;
}
.event_container .main_wrap .artist_part .artist_part_wrap .lank .vote_list li .winner .gfficial_mark {
  width: 7.4375rem;
  height: 7.4375rem;
  position: absolute;
  top: 0.625rem;
  right: -8.2rem;
}
.event_container .main_wrap .g_trend {
  padding-top: 8rem;
  background-color: #EEF3FF;
}
.event_container .main_wrap .g_trend h2 {
  display: flex;
  flex-direction: column;
  color: #000;
  font-size: 4.625rem;
  font-weight: bold;
  align-items: center;
  margin-bottom: 2rem;
}
.event_container .main_wrap .g_trend h2 span {
  font-weight: bold;
  color: #000;
  font-size: 2.75rem;
  margin-bottom: 0.4375rem;
}
.event_container .main_wrap .g_trend .g_trend_Swiper {
  width: 32rem;
  height: 40.1875rem;
  margin-top: 3.75rem;
  margin-bottom: 1.25rem;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide {
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
  font-size: 1.375rem;
  font-weight: bold;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 4.375rem 0 3.75rem 0;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide h3 {
  font-size: 2.75rem;
  margin-bottom: 2.5rem;
  color: #fff;
  font-weight: 500;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap {
  position: relative;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap img {
  width: 20.125rem;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .badge {
  position: absolute;
  color: #fff;
  font-size: 1.875rem;
  width: 8.125rem;
  height: 8.125rem;
  border-radius: 50%;
  text-align: center;
  align-content: center;
  right: -2.6rem;
  top: -0.4375rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .badge b {
  font-size: 2.1875rem;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .teens {
  background-color: #2C58DA;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .twenties {
  background-color: #BF5AE6;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .thirties {
  background-color: #C15119;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .forties {
  background-color: #783EE4;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .img_wrap .fifties {
  background-color: #B96941;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .info {
  font-family: "Pretendard";
  margin-top: 1rem;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .info .info {
  color: #FFFFFF;
  font-size: 2.5rem;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .info p:nth-child(1) {
  font-size: 2.5rem;
  max-width: 27.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide .info p:nth-child(2) {
  font-weight: 400;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 27.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide:nth-child(1n) {
  background-color: #5980F4;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide:nth-child(2n) {
  background-color: #CA7DE7;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide:nth-child(3n) {
  background-color: #E4813A;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide:nth-child(4n) {
  background-color: #9C6CF5;
}
.event_container .main_wrap .g_trend .g_trend_Swiper .swiper-slide:nth-child(5n) {
  background-color: #D49867;
}
.event_container .main_wrap .g_trend .g_trend_content {
  border-radius: 1.25rem;
  margin: 0 auto;
  margin-top: 3.75rem;
  width: 40rem;
  height: 24.5rem;
  padding: 2.5rem 3.375rem;
}
.event_container .main_wrap .g_trend .g_trend_content h3 {
  margin-bottom: 1.25rem;
  font-size: 2.75rem;
  font-weight: 500;
}
.event_container .main_wrap .g_trend .g_trend_content h3 span {
  font-weight: 400;
  font-size: 2.125rem;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content {
  display: flex;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content img {
  width: 11.5rem;
  height: 11.5rem;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info {
  color: #fff;
  font-family: "Pretendard";
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  display: flex;
  margin-left: 2.25rem;
  flex-direction: column;
  justify-content: space-around;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info p:nth-child(1) {
  color: #fff;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 700;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info p:nth-child(1) span {
  color: #fff;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 700;
  vertical-align: unset;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info p:nth-child(2) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
  margin-bottom: 0;
  text-align: left;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info .counter {
  width: fit-content;
  display: flex;
  font-size: 1.875rem;
  background-color: #E78318;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  color: #F5FF84;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .g_trend_content .album_content .info .counter #count_up {
  font-size: 1.875rem;
  color: #FFFF8A;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_album {
  background-color: #F39C3F;
}
.event_container .main_wrap .g_trend .like_artist {
  background-color: #5D84FF;
  height: fit-content;
  height: 22.125rem;
  padding: 2.5rem 3.375rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 2.5rem;
}
.event_container .main_wrap .g_trend .like_artist .album_content .info p:nth-child(1) {
  text-align: left;
}
.event_container .main_wrap .g_trend .like_artist .album_content .info .counter {
  background-color: #3A66F3;
  color: #85FBFF;
  white-space: nowrap;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .like_artist .album_content .info .counter #count_up {
  color: #85FBFF;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(1n) {
  background-color: #8D84F6;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(1n) .pop {
  background-color: #685DEB;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(2n) {
  background-color: #3186E1;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(2n) .j-pop {
  background-color: #0D64C1;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(3n) {
  background-color: #54A7AE;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(3n) .classic {
  background-color: #2D8890;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(4n) {
  background-color: #E35F6A;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(4n) .jazz {
  background-color: #CE3843;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(5n) {
  background-color: #E26289;
}
.event_container .main_wrap .g_trend .best_genre .swiper-slide:nth-child(5n) .song {
  background-color: #C73B65;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .genre_trend {
  background-color: #32BFC3;
  height: fit-content;
  height: 22.125rem;
}
.event_container .main_wrap .g_trend .genre_trend .album_content .info .counter {
  background-color: #0098A9;
  color: #5EFFF4;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .genre_trend .album_content .info .counter #count_up {
  color: #5EFFF4;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .artist_trend {
  background-color: #9E5F2E;
  height: fit-content;
  margin-top: 2.5rem;
  height: 22.125rem;
}
.event_container .main_wrap .g_trend .artist_trend .album_content .info .counter {
  background-color: #804C20;
  color: #FFF585;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .artist_trend .album_content .info .counter #count_up {
  color: #FFF585;
  font-weight: bold;
}
.event_container .main_wrap .g_trend .best_chart_artist {
  height: fit-content !important;
  width: 35rem !important;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide > h3:nth-of-type(1) {
  margin-bottom: 0;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide > .img_wrap > img:nth-of-type(1) {
  width: 15.625rem;
  margin-bottom: 0;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide > .img_wrap > p:nth-of-type(1) {
  font-size: 1.625rem;
  width: 5.6875rem;
  height: 5.6875rem;
  right: -0.8125rem;
  top: 8.5625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide > .img_wrap > p:nth-of-type(1) b {
  font-size: 2.125rem;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide .info > p:nth-of-type(1) {
  font-size: 2.375rem;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide .info > p:nth-of-type(1) ~ p {
  color: rgba(255, 255, 255, 0.6980392157);
  line-height: 1.4;
  font-size: 1.75rem;
  text-align: center;
  font-weight: 400;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide {
  height: fit-content;
  padding: 3.75rem 0;
  padding-bottom: 3.4375rem;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(1n) {
  background-color: #D483D7;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(1n) .songs {
  background-color: #BB57C1;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(2n) {
  background-color: #5D84FF;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(2n) .songs {
  background-color: #365EDA;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(3n) {
  background-color: #987D68;
}
.event_container .main_wrap .g_trend .best_chart_artist .swiper-slide:nth-child(3n) .songs {
  background-color: #7A583E;
}
.event_container .main_wrap .g_trend .playlist_trend {
  background-color: #BA5698;
  height: 22.6875rem;
}
.event_container .main_wrap .g_trend .playlist_trend .album_content {
  align-items: center;
}
.event_container .main_wrap .g_trend .playlist_trend .album_content .info > p:nth-of-type(1) {
  font-size: 2rem;
  white-space: nowrap;
  line-height: 2.5625rem;
}
.event_container .main_wrap .g_trend .playlist_trend .album_content .info > p:nth-of-type(2) {
  font-size: 1.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.event_container .main_wrap .g_trend .playlist_trend .album_content .info > .counter {
  background-color: #9F4581;
}
.event_container .main_wrap .g_trend .share_wrap {
  background-color: #000;
  position: relative;
  margin-top: 8rem;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner {
  max-width: 750px;
  margin: 0 auto;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner img {
  width: 46.875rem;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner a {
  position: absolute;
  width: 5rem;
  height: 5rem;
  bottom: 3.1875rem;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner .x {
  left: 12rem;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner .kakao {
  right: 20.8rem;
}
.event_container .main_wrap .g_trend .share_wrap .share_wrap_inner .share {
  right: 11.5rem;
}
.event_container .main_wrap .g_trend .footer_wrap {
  margin-bottom: 8.125rem;
  color: #333333;
  padding: 6.875rem 2.1875rem 6.25rem;
  background-color: #F1F1F1;
  font-family: "Pretendard";
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner {
  max-width: 750px;
  margin: 0 auto;
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner h3 {
  font-size: 3rem;
  font-weight: 400;
  font-weight: 500;
  font-family: "SB Aggro";
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner p {
  margin-bottom: 1.5rem;
  margin-top: 3.125rem;
  font-weight: bold;
  font-size: 2.125rem;
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner ul li {
  font-weight: 500;
  font-size: 1.75rem;
  margin-left: 0.75rem;
  margin-bottom: 1rem;
  letter-spacing: 0;
  position: relative;
  margin-left: 2.375rem;
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner ul li:before {
  content: "•";
  color: black;
  margin-right: 0.625rem;
  font-size: 1.75rem;
  position: absolute;
  left: -1.625rem;
}
.event_container .main_wrap .g_trend .footer_wrap .footer_wrap_inner img {
  width: 46.875rem;
}
.event_container .main_wrap .g_trend > p:first-of-type {
  text-align: center;
  line-height: 1.6;
  color: #000000;
  white-space: nowrap;
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 4.375rem;
}
.event_container .main_wrap .g_trend > p:first-of-type span {
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.75rem;
}
.event_container .main_wrap .banner_wrap {
  background-color: #7B59FF;
}
.event_container .main_wrap .banner_wrap .banner_wrap_inner a {
  display: block;
}
.event_container .main_wrap .banner_wrap .banner_wrap_inner a img {
  width: 100%;
}
.event_container .wrap_vote_layer {
  background-color: #0D5AF9;
  opacity: 1;
  transform: translateY(200px); /* 아래로 100px 이동한 상태로 시작 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.event_container .wrap_vote_layer .vote_layer_content {
  background-color: #0D5AF9;
}
.event_container .wrap_vote_layer .vote_layer_content .confirm {
  font-size: 2.375rem;
  font-family: "SB Aggro";
  font-weight: 500;
}

.popup {
  background-color: #313131;
  color: #FFFFFF;
  font-family: "Pretendard";
  text-align: center;
  padding: 3.125rem 2.5rem 2.5rem 2.5rem;
  width: 41.875rem;
  border-radius: 1.25rem;
}
.popup h3 {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 3.75rem;
}
.popup p {
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 2.625rem;
}
.popup .btn-wrap {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  margin-top: 3.125rem;
}
.popup .btn-wrap .btn-gray {
  flex: 1;
}
.popup .btn-wrap .btn-blue {
  flex: 1;
}

.btn-gray {
  background-color: #474749;
  color: white;
  font-size: 1.875rem;
  border-radius: 0.3125rem;
  padding: 1.875rem;
}

.btn-blue {
  background-color: #2B70FF;
  color: white;
  font-size: 1.875rem;
  border-radius: 0.3125rem;
  padding: 1.875rem;
}

/*# sourceMappingURL=style.css.map */
.dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  /* flex 제거 - 팝업을 dimmed 내부에 위치시키지 않음 */
}

.dimmed.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* 팝업들을 dimmed보다 높은 z-index로 설정 */
.popup:not(.hidden) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  display: block !important;
}

.base__layer.show {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  opacity: 1;
  visibility: visible;
}