@font-face {
  font-family : 'Glacial Indifference Bold';
  src         : url('../fonts/GlacialIndifference-Bold.woff2') format('woff2'), url('../fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight : bold;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : 'journalregular';
  src         : url('../fonts/journal-webfont.woff2') format('woff2'), url('../fonts/journal-webfont.woff') format('woff');
  font-weight : regular;
  font-style  : normal;
  font-display: swap;
}


@font-face {
  font-family : 'line_seed';
  src         : url('../fonts/LINESeedTW_OTF_Rg.woff2') format('woff2'), url('../fonts/LINESeedTW_OTF_Rg.woff') format('woff');
  font-weight : regular;
  font-style  : normal;
  font-display: swap;
}

/* Global Styles */
body {
 margin     : 0px;
 font-family: 
    'ZCOOL QingKe HuangYou',               /* English */
    'Nanum Gothic Coding',                 /* Korean */
    'Zen Maru Gothic',                     /* Japanese */
    'line_seed',                 /* Traditional Chinese */
    'PingFang TC',                         /* macOS Chinese */
    'Microsoft JhengHei', 'Heiti TC',      /* Windows Chinese */
    'Yu Gothic', 'Meiryo',                 /* Japanese system fonts */
    'Malgun Gothic', 'Apple SD Gothic Neo',/* Korean system fonts */
    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.logo img {
  height   : 60px;
  width    : auto;
  max-width: 100%;
}

.svg-symbol {
  display: none;
}
/* Hero section */
  .hero-image {
    position           : relative;
    height             : 100vh;
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
  }
  .hero-overlay {
    position       : absolute;
    top            : 0; left: 0; width: 100%; height: 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : rgba(0, 0, 0, 0.3);                     /* optional dark overlay */
  }
  .hero-logo {
    max-width: 300px;
  }

/* Navigation Bar Styling */
.site-header {
  width     : 100%;
  background: white;
  color     : black;
  z-index   : 9999;
}

.site-header nav.site-nav {
  width: 300px;
}
.site-header.headerFixed nav.site-nav {
  width  : initial;
  display: flex;
;
}

.site-header,
.site-header .logo img {
  transition: all 0.3s ease;
}

.site-header.headerFixed {
  position  : fixed;
  top       : 0;
  left      : 0;
  right     : 0;
  z-index   : 9999;
  padding   : 10px 4%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.site-header.headerFixed .logo img {
  height: 40px;
}

.site-header.headerFixed .lang-switcher {
  margin-left: 10px;
  transform  : scale(0.9);
}
.site-header.headerFixed .social-icons{
	display:none;
}
.nav-wrapper {
  margin    : 0 auto;
  background: #fff;
  padding   : 40px 5% 20px;
}
.site-header.headerFixed .nav-wrapper {
  padding: 0px 5% 0px 0px!important;
}

/* Top nav line (logo + menu) */
.nav-top {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  flex-wrap      : wrap;
}

.nav-menu {
  display        : flex;
  gap            : 0.8rem 2rem;
  list-style     : none;
  padding        : 0;
  margin         : 0;
  flex-wrap      : wrap;
  justify-content: end;
  align-content  : center;
}

.nav-menu li a {
  text-decoration: none;
  color          : black;
  font-size      : larger;
  text-transform : uppercase;
  font-weight    : bolder;
  font-family    : 'Glacial Indifference Bold';
}

/* Social media row */
.social-row {
  margin-top     : 1rem;
  display        : flex;
  gap            : 1.5rem;
  justify-content: center;
  transition     : opacity 0.3s ease;
}

.social-row a {
  color    : black;
  font-size: 16px;
}

.social-icons {
  display        : flex;
  justify-content: end;
  gap            : 1.2rem;
  margin         : 0.8rem 0;
}
.social-icons a {
  width  : 18px;
  height : 18px;
  display: inline-block;
}
.social-icons img {
  width  : 100%;
  height : auto;
  display: block;
}

.section-block {
  margin: 3rem 1rem;
}

@media (max-width: 768px) {
	.section-block>.container {
		padding: 0vw 0px;
	}
}
.section-block>.container {
	padding: 0px 10vw;
}

.block-tit {
 font-size     : xx-large;
 font-weight   : bold;
 font-family   : 'Glacial Indifference Bold';
 margin-bottom : 1rem;
 text-transform: uppercase;
}

/* Banner Section */
.section--bnr {
  position  : relative;
  overflow  : hidden;
  margin    : 2em 1em;
  background: #fff;
}
.section--bnr ul {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 2em;
  list-style     : none;
  padding        : 0;
  margin         : 0 auto;
  max-width      : 1200px;
}
.section--bnr li {
  flex     : 1 1 200px;
  max-width: 220px;
}
.section--bnr li img {
  width        : 100%;
  height       : auto;
  border-radius: 4px;
  transition   : transform 0.3s;
}
.section--bnr li a:hover img {
  transform: scale(1.03);
}

/* Banner swiper */
.banner-swiper .swiper-slide img {
  width        : 100%;
  height       : auto;
  border-radius: 4px;
}

/* Navigation arrow container */
.swiper-nav {
  display        : flex;
  justify-content: center;
  gap            : 2rem;
  margin-top     : 1.5rem;
}

/* Style for arrows */
.swiper-button-prev,
.swiper-button-next {
  width        : 42px;
  height       : 42px;
  border-radius: 50%;
  background   : white;
  color        : black;
  box-shadow   : 0 4px 8px rgba(0,0,0,0.2);
  position     : static;
  transform    : none;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size  : 18px;
  font-weight: bold;
}

.banner-nav {
  position       : relative;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  max-width      : 1024px;
  margin         : 1rem auto 0 auto;
  padding        : 0 10%;
}

/* Section Info */
.section-info {
  padding: 3rem 1rem;
}
.container {
  display        : flex;
  flex-wrap      : wrap;
  gap            : 3rem;
  justify-content: space-between;
}
.title a {
  text-decoration: none;
  color          : inherit;
}

.title a:hover {
  text-decoration: underline;
}
.info-block {
  flex: 1 1 45%;
}
.news-item, .media-item {
  margin-bottom: 1.25rem;
}
.new-tag {
  color      : red;
  font-family: cursive;
  font-weight: bold;
  margin-left: 0.5rem;
}
.more-link {
  text-align: right;
  width     : 100%;
}
.more-link a {
  display        : inline-flex;
  align-items    : center;
  font-weight    : bold;
  color          : #000;
  text-decoration: none;
  position       : relative;
  padding-right  : 1rem;
}

/* Release Section */
.release-section {
  display    : flex;
  align-items: flex-start;
  gap        : 3rem;
  margin-top : 4rem;
}

.release-image img {
  width     : 600px;
  max-width : 40vw;
  height    : auto;
  object-fit: cover;
}

.release-content {
  flex: 1;
}

.release-type {
  color         : inherit;
  font-size     : 14px;
  font-weight   : 400;
  line-height   : 1.8;
  letter-spacing: 0.05em;
  font-family   : 'Glacial Indifference Bold', 'Roboto';
  font-weight   : normal;
  color         : #000;
  display       : inline-block;
  line-height   : 1;
  text-transform: uppercase;
  margin-right  : 40px;
  position      : relative;
}

.release-title {
  color         : inherit;
  font-size     : 32px;
  font-weight   : 800;
  line-height   : 1.3;
  letter-spacing: 0.06em;
  margin-bottom : 10px;
  word-break    : break-all;
  text-align    : justify;
}

.release-date {
  color         : inherit;
  font-size     : 14px;
  font-weight   : 400;
  line-height   : 1.8;
  letter-spacing: 0.05em;
  font-family   : 'Glacial Indifference Bold', 'Roboto';
  font-weight   : normal;
  display       : inline-block;
  line-height   : 1;
  margin        : 0 0 5px;
}

.release-description {
  margin-bottom: 1.5rem;
  font-size    : 1rem;
  line-height  : 1.6;
}

.release-tracks {
  font-size: 0.95rem;
}

/* Video Section */
.section-video {
  position: relative;
  overflow: hidden;
}

.bio-swiper img{
  height: 60vh;
}

.bio-swiper .swiper-slide {
  display        : flex;
  justify-content: center;
}

.bio-swiper,
.banner-swiper,
.video-swiper {
  overflow: hidden;
  width   : 100%;
  margin  : 5vh 0px;
}

.swiper-wrapper {
  display    : flex;
  align-items: center;
}

.video-swiper .swiper-slide {
  flex-shrink: 0;
  width      : 70vw;
  transition : transform 0.3s ease;
  position   : relative;
}

.swiper-slide-prev,
.swiper-slide-next {
  opacity  : 0.6;
  transform: scale(0.9);
}

.swiper-slide.center-slide {
  opacity  : 1;
  transform: scale(1);
  z-index  : 5;
}

.video-slide {
  position: relative;
  cursor  : pointer;
}

.video-thumbnail {
  width              : 100%;
  padding-top        : 56.25%;
  background-size    : cover;
  background-position: center;
  position           : relative;
  border-radius      : 8px;
}

.video-overlay {
  position        : absolute;
  bottom          : 0;
  left            : 0;
  right           : 0;
  height          : 100%;
  background-color: rgba(255, 0, 0, 0.6);
  color           : white;
  font-size       : 2rem;
  font-weight     : bold;
  display         : flex;
  justify-content : center;
  align-items     : center;
  transform       : translateY(101%);
  transition      : transform 0.4s ease;   /* Apply transition */
  border-radius   : 8px;
}
.video-title {
  font-size : xx-large;
  text-align: center;
}

.swiper-slide:hover .video-overlay,
.video-slide:hover .video-overlay {
  transform: translateY(0);
}

.navigation-arrow {
  position   : absolute;
  z-index    : 10;
  line-height: 1;
  cursor     : pointer;
}

.navigation-arrow>svg {
	  /* height: 1rem; */
  width: 79px;
  height:21px;
}

.arrow--prev { left: 15vw; transform: scale(-1, 1);}
.arrow--next { right: 15vw; }

@media (max-width: 768px) {
  .swiper-slide {
    width: 80vw;
  }
  .arrow--prev {
    left: 12vw;
  }
  .arrow--next {
    right: 12vw;
  }
}

/* Container */
#nav-lang-switcher-container {
  display        : flex;
  justify-content: end;
}
.lang-switcher {
  width      : 60px;
  height     : 45px;
  font-size  : 14px;
  font-family: 'Glacial Indifference Bold', 'Roboto';
  font-weight: normal;
  cursor     : pointer;
  position   : relative;
  /* position: absolute;
  top: 20px;
  right: 5px;
  z-index: 9001; */
}

@media (max-width: 768px) {
  .lang-switcher {
    top  : 10px;
    right: 10px;
  }
}

/* Dropdown container */
.lang-switcher .nav-dropdown {
  width         : 100%;
  letter-spacing: 0.05em;
  position      : absolute;
  top           : 50%;
  left          : 0;
  line-height   : 2;
  text-align    : center;
  z-index       : 2;
  transform     : translateY(-20px);
}

/* Language list base styles */
.lang-switcher .nav-dropdown .list--language {
  display       : flex;
  flex-wrap     : wrap;
  flex-direction: row;
  list-style    : none;
  padding       : 0;
  margin        : 0;
}

/* Hide all languages by default */
.lang-switcher .nav-dropdown .list--language li {
  display       : none;
  opacity       : 0;
  pointer-events: none;
  width         : 100%;
  height        : 2em;
  cursor        : pointer;
  padding       : 0.3em 0;
  text-align    : center;
  transition    : 0.3s;
  list-style    : none;
  border        : 1px solid;
}

/* Show only the selected language initially */
.lang-switcher .nav-dropdown .list--language li.selected {
  display       : block;
  opacity       : 1;
  pointer-events: auto;
  border        : 1px solid;
  border-radius : 50%;
  cursor        : pointer;
  margin-bottom : 0;
}

/* Hover effect for selected */
.lang-switcher .nav-dropdown .list--language li.selected:hover {
  background: #000;
  color     : #fff;
}

/* Styles for non-selected language items */
.lang-switcher .nav-dropdown .list--language li:not(.selected) {
  background   : #000;
  color        : #fff;
  font-size    : 1em;
  border-radius: 50%;
  margin       : 10px 0 0 0 !important;
  transition   : 0.3s;
}

/* Hover state for non-selected languages */
.lang-switcher .nav-dropdown .list--language li:not(.selected):hover {
  background: #fff;
  color     : #000;
  border    : 1px solid #000;
}

/* When dropdown is open, show all languages */
.lang-switcher.visible .nav-dropdown {
  opacity       : 1;
  pointer-events: visible;
  z-index       : 1;
  top           : 3px;
  transform     : translateY(0);
}

/* When dropdown is open, make all languages visible */
.lang-switcher.visible .nav-dropdown .list--language li {
  display       : block;
  opacity       : 1;
  pointer-events: auto;
  transition    : opacity 0.4s, background 0.4s, color 0.4s;
  margin-bottom : 5px;
}

/* While open, disable clicking on selected item (to prevent reload) */
.lang-switcher.visible .nav-dropdown .list--language li.selected {
  pointer-events: none;
  margin-bottom : 0;
  transition    : none;
}

.section-archive,
.section--detail {
  width             : 60%;
  background        : #fff;
  margin            : 0 auto;
  padding           : 50px 0 0;
  -webkit-transition: none;
  transition        : none;
}

.bio-image img{
	width: 100%;
	height:100%;
}

.site-footer {
  padding   : 2rem 1rem;
  text-align: center;
}

.footer-social-icons {
  display        : flex;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : 1.5rem;
  margin         : 1rem 0;
}

.footer-social-icons .social-icon {
  width     : 24px;
  height    : 24px;
  display   : inline-block;
  transition: transform 0.2s ease;
}

.footer-social-icons .social-icon img {
  width : 100%;
  height: auto;
}

.footer-social-icon:hover {
  transform: scale(1.2);
}
footer .copyright {
  color         : inherit;
  font-size     : 14px;
  font-weight   : 400;
  line-height   : 1.8;
  letter-spacing: 0.05em;
  font-family   : 'Glacial Indifference Bold', 'Roboto';
  font-weight   : normal;
  text-align    : center;
  padding-bottom: 40px;
}

/* Section container */
.section--detail {
  padding         : 3rem 1rem;
  background-color: #fff;
}

/* Section title */
.section-tit {
  font-size     : 2rem;
  font-weight   : bold;
  text-align    : center;
  margin-bottom : 2rem;
  font-family   : 'Glacial Indifference Bold', sans-serif;
  text-transform: uppercase;
}


.archive-title {
  font-weight   : bold;
  font-family   : 'Glacial Indifference Bold', sans-serif;
  text-transform: uppercase;
  font-size     : xxx-large;
}
.archive-list {
  list-style: none;
}
.archive-list a{
  all:unset;
  cursor: pointer;
}
.archive-list li:not(:last-child) {
  margin-bottom: 30px;
}
.archive-list .date {
  color         : inherit;
  font-size     : 14px;
  font-weight   : 400;
  line-height   : 1.8;
  letter-spacing: 0.05em;
  font-family   : 'Glacial Indifference Bold', sans-serif;
  font-weight   : normal;
  line-height   : 1;
  display       : inline-block;
  margin        : 0 0 5px;
}

.archive-list .title {
  color         : inherit;
  font-size     : 14px;
  font-weight   : 400;
  line-height   : 1.8;
  letter-spacing: 0.05em;
  word-break    : break-all;
  text-align    : justify;
  margin        : 0;
  padding       : 0;
}

.new .title::after {
  content          : 'New';
  display          : inline-block;
  color            : #f53434;
  font-family      : 'journalregular';
  font-size        : 48px;
  line-height      : 0;
  transform        : scaleX(0.7) rotate(5deg) skew(-33deg);
  -webkit-transform: scaleX(0.7) rotate(5deg) skew(-33deg);
  bottom           : -10px;
  right            : 14px;
  position         : relative;
  letter-spacing   : -0.02em;
  font-weight      : normal;
  mix-blend-mode   : multiply;
}

.pagination {
  display: flex;
  justify-content: space-around;
}

.pagination .page-link a,
.pagination .page-link span {
  all: unset;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 5px;
  text-align: center;
  font-family   : 'Glacial Indifference Bold', sans-serif;
}


.pagination .page-link span {
  border: 1px solid;
}

.pagination .page-link a:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

.pagination a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.pagination .navigation-arrow {
  position: relative;
}

.pagination .arrow--prev {
  left: 0px;
}

.pagination .arrow--next {
  right: 0px;
}

#gme-contact-form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#gme-contact-form .form-group {
  display: flex;
  flex-direction: column;
}

#gme-contact-form label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

#gme-contact-form input,
#gme-contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

#gme-contact-form input:focus,
#gme-contact-form textarea:focus {
  outline: none;
  border-color: #000;
}

.gme-btn {
  background-color: #000;
  color: #fff;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.gme-btn:hover {
  background-color: #444;
}

#form-response {
  margin-top: 1rem;
  font-weight: bold;
  color: green;
}