#auto-slide {
    position: relative;
    width: 100%;
    height: 100%; /* 슬라이드 높이를 부모 요소 높이와 같게 설정 */
    overflow: hidden;
}

#auto-slide ul {
    display: flex;
    width: 300%; /* 슬라이드 수에 맞게 설정 */
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 1s ease-in-out;
}

#auto-slide li {
    flex: 0 0 33.3333%; /* 슬라이드 수에 맞게 설정 */
    height: 100%;
}

/* 기본 스타일 */
li[class^="x"] span {
  position: relative;
  color: white; /* 기본 글자색 */
  text-decoration: none; /* 기본 밑줄 없음 */
}

/* 밑줄 애니메이션 */
li[class^="x"] span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /* 글자와 밑줄 사이 간격 */
  width: 0;
  height: 2px; /* 밑줄 두께 */
  background-color: #eee8aa; /* 밑줄 색상 */
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

/* li.s*에 is-active 클래스가 추가되었을 때 스타일 */
li[class^="x"].is-active span {
  color: #eee8aa; /* 원하는 글자색으로 변경 */
}

li[class^="x"].is-active span::before {
  width: calc(100% + 10px); /* 글자 너비보다 10px 더 넓게 */
  left: 50%;
  transform: translateX(-50%);
}

/* 기본 스타일 */
li[class^="z"] span {
  position: relative;
  color: black; /* 기본 글자색 */
  text-decoration: none; /* 기본 밑줄 없음 */
}

/* 다크모드 */
.dark-mode li[class^="z"] span {
  position: relative;
  color:#c8c8c8; /* 기본 글자색 */
  text-decoration: none; /* 기본 밑줄 없음 */
}


/* 밑줄 애니메이션 */
li[class^="z"] span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /* 글자와 밑줄 사이 간격 */
  width: 0;
  height: 0px; /* 밑줄 두께 */
  background-color: red; /* 밑줄 색상 */
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

/* 밑줄 애니메이션 */
.dark-mode li[class^="z"] span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /* 글자와 밑줄 사이 간격 */
  width: 0;
  height: 0px; /* 밑줄 두께 */
  background-color: white; /* 밑줄 색상 */
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

/* li.s*에 is-active 클래스가 추가되었을 때 스타일 */
li[class^="z"].is-active span {
  color: red; /* 원하는 글자색으로 변경 */
}

/* li.s*에 is-active 클래스가 추가되었을 때 스타일 */
.dark-mode li[class^="z"].is-active span {
  color: white; /* 원하는 글자색으로 변경 */
}

li[class^="z"].is-active span::before {
  width: calc(100% + 10px); /* 글자 너비보다 10px 더 넓게 */
  left: 50%;
  transform: translateX(-50%);
}

.dark-mode li[class^="z"].is-active span::before {
  width: calc(100% + 10px); /* 글자 너비보다 10px 더 넓게 */
  left: 50%;
  transform: translateX(-50%);
}

.leftPanelTitle{
	font-size: 16px; /* 제목 글자 크기를 줄임 */
	color: 	#28288C; /* 원하는 글자색으로 변경 */
	font-weight: bold;
}

.dark-mode .leftPanelTitle{
	font-size: 16px; /* 제목 글자 크기를 줄임 */
	color: 		#CD904A; /* 원하는 글자색으로 변경 */
	font-weight: bold;
}

.leftTitle{
	margin-left:10px;
	padding:10px;
}
.serverName{
	color:#323232; /* 원하는 글자색으로 변경 */
}

.dark-mode .serverName{
	color:#CD904A; /* 원하는 글자색으로 변경 */
}

.dark-mode .serverName:hover{
	color:gold; /* 원하는 글자색으로 변경 */
}

.left-header{
	font-size: 18px; /* 제목 글자 크기를 줄임 */
	color:white;
	margin-top: 10px;
}

.wrap-header{
	background-image: url(/res/uikit/cnb/3.1.0/img/header/header-lineageremaster-2021.jpg);
}

/* 딤 처리 효과 */
.dimmed-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명한 검은색 */
    z-index: 9999; /* 패널보다 높은 z-index */
    pointer-events: auto; /* 딤 처리된 동안 클릭 방지 */
}

/* 클릭이 되지 않도록 하는 효과 */
.dimmed-overlay.active {
    pointer-events: auto;
}

#fixed-container {
    position: fixed; /* 고정 위치 */
    bottom: 20px;    /* 하단에서 20px 위 */
    right: 20px;     /* 오른쪽에서 20px 왼쪽 */
    display: flex;   /* 버튼들을 나란히 배열 */
    flex-direction: column; /* 버튼을 세로로 배열 */
    gap: 10px;       /* 버튼 사이의 간격 */
    z-index: 1000; /* 다른 요소보다 위에 오도록 설정 */
}

button {
    padding: 10px 20px; /* 버튼 내부 여백 */
    font-size: 16px;    /* 글꼴 크기 */
    cursor: pointer;    /* 마우스 오버 시 커서 변경 */
    border: none;       /* 테두리 제거 */
    background-color: #007BFF; /* 배경색 */
    color: white;       /* 글자색 */
}

.button-image {
    width: 100px;    /* 버튼의 너비 */
    height: 100px;    /* 버튼의 높이 */
    background-size: contain; /* 이미지가 버튼 내부에 맞게 조정됨, 이미지 비율 유지 */
    background-position: center; /* 이미지 중앙에 배치 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    border: none;    /* 테두리 제거 */
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
    background-color: transparent !important; /* 배경 투명하게 설정 */
}

/* 상담채널 버튼 이미지 */
.button-image:first-child {
    background-image: url('/img/main/kakao.png'); /* 여기에 상담채널 이미지 경로 입력 */
}

/* 고객센터 버튼 이미지 */
.button-image:last-child {
    background-image: url('/img/main/tele.png'); /* 여기에 고객센터 이미지 경로 입력 */
}

.ncc-lnb-list {
  transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

.ncc-lnb-list.fixed {
  position: fixed;
  top: 0;
  left: -20px;  /* 왼쪽을 화면 가장자리로 고정 */
  right: 0; /* 오른쪽을 화면 가장자리로 고정 */
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5); /* 배경을 검은색으로 하고, 투명도를 50%로 설정 */
  width: 100%; /* 전체 화면 너비로 확장 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 고정 상태에서 그림자 */
}

.ncc-lnb-list.fixed > .ncc-lnb-item {
  margin-left: 20px !important;
}

/* 고정 상태에서 서브 메뉴 내부 텍스트에만 색상 변경 */
.ncc-lnb-list.fixed .ncc-lnb-item__sub li a span {
  color: black !important; /* span 텍스트 색상 변경 */
}

/* 고정 상태에서 서브 메뉴 내부 텍스트에만 색상 변경 */
.dark-mode .ncc-lnb-list.fixed .ncc-lnb-item__sub li a span {
  color: white !important; /* span 텍스트 색상 변경 */
}

/* 고정 상태에서 서브 메뉴 내부 텍스트에만 색상 변경 */
.ncc-lnb-list.fixed .ncc-lnb-item__sub li a span:hover {
  color: red !important; /* span 텍스트 색상 변경 */
}

/* 고정 상태에서 서브 메뉴 내부 텍스트에만 색상 변경 */
.dark-mode .ncc-lnb-list.fixed .ncc-lnb-item__sub li a span:hover {
  color: gold !important; /* span 텍스트 색상 변경 */
}

.custom-theme#nc-cnb .ncc-gnb-wrap .ncc-bi{
  background-image: url(/img/main/bi-lineageremaster-type1.png);
  width: 77px;
  height: 40px;
  margin-top: 2px;
  background-size: contain; /* 이미지를 부모 요소에 맞게 축소 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  background-position: center; /* 이미지를 중앙에 배치 */
}

/* 버튼 스타일 */
.toggle-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: #f1c40f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  
  /* 초기 숨김 설정 */
  visibility: hidden;
  opacity: 0;
  transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.toggle-btn.on {
  background-color: #34495e;
}

.toggle-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

.toggle-text {
  display: none;
  font-size: 12px;
  font-weight: bold;
  color: white;
  margin-left: 5px;
}

.toggle-btn.on .toggle-text {
  display: inline;
}

/* 텍스트 위치 애니메이션 */
.toggle-btn .toggle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toggle-btn.on .toggle-text {
  transform: translate(-50%, -60%);
}

/* 기본 스크롤바를 숨기고 커스텀 스크롤바만 보여줍니다 */
.scrollable-content {
    scrollbar-width: none; /* Firefox에서 기본 스크롤바 숨기기 */
    -ms-overflow-style: none; /* Internet Explorer에서 기본 스크롤바 숨기기 */
}

.scrollable-content::-webkit-scrollbar {
    display: none; /* 크롬, 사파리에서 기본 스크롤바 숨기기 */
}

/* 스크롤바 컨테이너 */
.iScrollVerticalScrollbar {
    transition: opacity 250ms ease;
}

/* 커스텀 스크롤바 인디케이터 */
.iScrollIndicator {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    height: 100px; /* 초기 높이 설정 */
}

.game-start-btn {
    width: 280px;
    transition: opacity 0.3s ease;
  }

  .game-start-btn:hover {
    opacity: 0.8; /* 마우스 올렸을 때 살짝 투명해짐 */
  }