/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

@media (min-width: 1400px) {
  .container {
    max-width: 1600px;
  }
}
/*aside body */
.basic-body-side {
    float: left;
    padding: 0 10px;
    width: 20% !important;
}
/*container body */
/*.basic-body-main.left-main, .basic-body-main.right-main {width:80% !important;}*/
@media (max-width: 360px) {
  .basic-body-main.left-main,
  .basic-body-main.right-main {
    width: 80% !important;
  }
}

:root {
  --bg: #151b2c;
  --text-default-color: #b0b4c0;
  --white: #fff;
  --black: #000;
  --red: #ff1616;

  --nav-fix-gray-100: #e2e4eb;
  --nav-fix-gray-200: #b0b4c0;
  --nav-fix-gray-300: #777b84;

  --primary-orange-500: #ff630c;
  --primary-orange-600: #fe5235;
  --primary-orange-700: #fe3e1a;
  --primary-orange-800: #fd2b19;

  --secondary-neon-yellow: #d9ff00;

  --navy-600: #010252;
  --navy-800: #05023e;
  --navy-900: #010039;

  --gray-50: #efeff0;
  --gray-100: #e2e4eb;
  --gray-200: #b0b4c0;
  --gray-300: #777b84;
  --gray-350: #4b505d;
  --gray-400: #292f3d;
  --gray-500: #212737;
  --gray-600: #1e2434;
  --gray-700: #151b2c;
  --gray-800: #111829;
  --gray-900: #101421;

  --blue-900: #0b0826;
  --blue-800: #100e41;
  --blue-700: #171257;
  --blue-600: #1c1671;
  --blue-500: #282497;
  --blue-400: #4047c9;
  --blue-300: #8c91c3;
  --blue-200: #dcdee9;
  --blue-100: #e8e9f0;

  --filter-white: invert(97%) sepia(97%) saturate(2%) hue-rotate(82deg)
    brightness(103%) contrast(100%);
  --filter-black: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg)
    brightness(97%) contrast(103%);

  --filter-gray-100: invert(95%) sepia(86%) saturate(295%) hue-rotate(263deg)
    brightness(110%) contrast(94%);
  --filter-gray-200: invert(100%) sepia(1%) saturate(3073%) hue-rotate(175deg)
    brightness(95%) contrast(93%);
  --filter-gray-300: invert(98%) sepia(1%) saturate(2181%) hue-rotate(185deg)
    brightness(89%) contrast(96%);
  --filter-gray-400: invert(83%) sepia(0%) saturate(1537%) hue-rotate(271deg)
    brightness(90%) contrast(92%);
  --filter-gray-500: invert(68%) sepia(16%) saturate(144%) hue-rotate(187deg)
    brightness(88%) contrast(89%);
  --filter-gray-600: invert(56%) sepia(6%) saturate(526%) hue-rotate(198deg)
    brightness(95%) contrast(87%);
  --filter-gray-700: invert(40%) sepia(17%) saturate(285%) hue-rotate(193deg)
    brightness(87%) contrast(84%);
  --filter-gray-800: invert(18%) sepia(8%) saturate(1034%) hue-rotate(202deg)
    brightness(91%) contrast(88%);
  --filter-gray-900: invert(9%) sepia(9%) saturate(859%) hue-rotate(201deg)
    brightness(101%) contrast(93%);

  --filter-secondary-neon-yellow: invert(85%) sepia(95%) saturate(3769%)
    hue-rotate(10deg) brightness(100%) contrast(102%);

  --gradient-purple: linear-gradient(90deg, #985cfd 0%, #1c92ff 100%);
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
}

/* =========================
   공통 레이아웃 스포츠중계 버튼
   ========================= */

.main-sports-broadcast-Livechannel-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  padding: 0 30px;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================
   타이틀 영역
   ========================= */

.main-sports-broadcast-Livechannel-wrap .title-shape {
  position: relative;
  display: flex;
  justify-content: center;
  font-family: "Gmarket Sans", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--white, #ffffff);
}

.main-sports-broadcast-Livechannel-wrap .title-shape .text {
  width: 100%;
  height: 55px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 기존 title-channel.svg 그대로 사용 */
.main-sports-broadcast-Livechannel-wrap .title-shape::after {
  content: "";
  background: url("https://2daytoto.com/theme/eb4_comm_003/image/common/title-channel.svg")
    no-repeat center top;
  background-size: 100%;
  width: 500px;
  height: 70px;
}

/* =========================
   채널 리스트
   ========================= */

.main-sports-broadcast-Livechannel-wrap .channel-list {
  display: flex;
  gap: 16px;
}

/* 공통 채널 카드 */
.main-sports-broadcast-Livechannel-wrap .channel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 74px;
  color: var(--gray-300, #a5a7b2);
  border: 1px solid var(--gray-500, #3a3f4c);
  border-radius: 8px;
  transform: skewX(-7deg);
  font-family: "Titillium Web", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-weight: 900;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  background: transparent;
  transition:
    color 0.18s ease-out,
    border 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background 0.18s ease-out,
    transform 0.12s ease-out;
}

/* inner는 다시 반대로 기울여서 글자는 수평 */
.main-sports-broadcast-Livechannel-wrap .channel-item > * {
  transform: skewX(7deg);
}

/* 라이트/다크 모드 카드 배경 */
.theme-light .main-sports-broadcast-Livechannel-wrap .channel-item {
  background: #ffffff;
}

.theme-dark .main-sports-broadcast-Livechannel-wrap .channel-item {
  background: #181b21;
}

/* 컬럼 텍스트 */
.main-sports-broadcast-Livechannel-wrap .channel-item .colum-text {
  font-size: 32px;
  font-weight: 700;
}

.main-sports-broadcast-Livechannel-wrap .channel-item .colum-text > span {
  display: block;
  font-size: 12px;
  font-weight: 200;
}

/* 채널명 (A/B/C 등) */
.main-sports-broadcast-Livechannel-wrap .channel-item .channel-name {
  font-size: 50px;
  font-weight: 900;
}

/* 현재 선택된 채널 (A/B/C 중 active) – 기존 주황 스타일 유지 */
.main-sports-broadcast-Livechannel-wrap .channel-item.active {
  color: var(--primary-orange-500, #ff7a1a) !important;
  border: 2px solid var(--primary-orange-500, #ff7a1a);
  box-shadow: 4px 4px 0px 0px var(--primary-orange-500, #ff7a1a);
}

/* 기본 hover(살짝 떠오르게) */
.main-sports-broadcast-Livechannel-wrap .channel-item:hover {
  transform: skewX(-7deg) translateY(-1px);
}

/* =========================
   A/B/C 반짝(샤인) 효과
   ========================= */

/* 대상 채널 공통 설정 */
.main-sports-broadcast-Livechannel-wrap .channel-item[data-channel="A"],
.main-sports-broadcast-Livechannel-wrap .channel-item[data-channel="B"],
.main-sports-broadcast-Livechannel-wrap .channel-item[data-channel="C"] {
  cursor: pointer;
}

/* 반짝 라인 */
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="A"]::before,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="B"]::before,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="C"]::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -150%;
  width: 100%;
  height: 340%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: rotate(18deg);
  pointer-events: none;
}

/* A/B/C hover 시: 반짝 + 주황 글로우 */
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="A"]:hover,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="B"]:hover,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="C"]:hover {
  color: var(--primary-orange-500, #ff7a1a);
  border-color: var(--primary-orange-500, #ff7a1a);
  box-shadow:
    0 0 14px rgba(255, 122, 26, 0.6),
    4px 4px 0px 0px rgba(0, 0, 0, 0.6);
}

/* 반짝 애니메이션 실행 */
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="A"]:hover::before,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="B"]:hover::before,
.main-sports-broadcast-Livechannel-wrap
  .channel-item[data-channel="C"]:hover::before {
  animation: liveChannelShine 0.7s ease-out forwards;
  opacity: 1;
}

/* shine keyframes */
@keyframes liveChannelShine {
  0% {
    transform: translateX(-140%) rotate(18deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(260%) rotate(18deg);
    opacity: 0;
  }
}

/* =========================
   반응형
   ========================= */

@media all and (max-width: 768px) {
  .main-sports-broadcast-Livechannel-wrap {
    padding: 0;
    gap: 6px;
    background: transparent;
    border: none;
  }

  .main-sports-broadcast-Livechannel-wrap .title-shape {
    font-size: 17px;
  }

  .main-sports-broadcast-Livechannel-wrap .title-shape .text {
    height: 40px;
  }

  .main-sports-broadcast-Livechannel-wrap .title-shape::after {
    height: 75px;
  }

  .main-sports-broadcast-Livechannel-wrap .channel-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .main-sports-broadcast-Livechannel-wrap .channel-item {
    height: 56px;
    border-radius: 4px;
    transform: skewX(-7deg);
  }

  .main-sports-broadcast-Livechannel-wrap
    .channel-item
    .colum-text {
    font-size: 26px;
  }

  .main-sports-broadcast-Livechannel-wrap
    .channel-item
    .colum-text
    > span {
    font-size: 12px;
    font-weight: 200;
  }

  .main-sports-broadcast-Livechannel-wrap
    .channel-item
    .channel-name {
    font-size: 36px;
  }

  .main-sports-broadcast-Livechannel-wrap .channel-item.active {
    color: var(--primary-orange-500, #ff7a1a);
    border: 1px solid var(--primary-orange-500, #ff7a1a);
    box-shadow: 2px 2px 0px 0px var(--primary-orange-500, #ff7a1a);
  }
}

@media all and (max-width: 414px) {
  .main-sports-broadcast-Livechannel-wrap .title-shape {
    font-size: 17px;
  }

  .main-sports-broadcast-Livechannel-wrap .title-shape .text {
    height: 40px;
  }

  .main-sports-broadcast-Livechannel-wrap .title-shape::after {
    background: none;
    height: 40px;
  }
}

/* =========================
   페이지 타이틀
   ========================= */

.page-title-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  padding: 0;
  margin: 0 0 30px 0;

  & > h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 35px;
    transform: skewX(-10deg);
    color: var(--white);
  }
  .sub-breadcrumb {
    &:after {
      content: "";
      display: block;
      clear: both;
    }

    & > li {
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-300);
      float: left;
      margin-left: 6px;

      &:before {
        content: "/";
        margin-right: 6px;
      }

      &:first-child:before {
        display: none;
      }
    }

    & > a {
      color: var(--gray-200);
    }
  }
}
@media all and (max-width: 991px) {
  .page-title-wrap {
    margin: 18px 0 12px 0;
    & > h2 {
      font-size: 28px;
    }
  }
}

@media all and (max-width: 768px) {
  .page-title-wrap {
    margin: 4px 0 12px 0;

    & > h2 {
      gap: 14px;
      font-size: 20px;
    }
    .sub-breadcrumb {
      display: none;
    }
  }
}
/*** sidebar > 포인트·경험치 랭킹 배너 ***************************************************************/
.left-banner-area {

  /* 배너 기본 크기 */
  a {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/*** sidebar > 광고 배너 ***************************************************************/
.left-adPartner-banner-area {
  .ad-banner {
    border-radius: 10px;
    overflow: hidden;
  }
}

/*** sidebar > 포인트·경험치 랭킹 ***************************************************************/
.left-Ranking-content {
  padding: 0;
}

/*** 모바일(500px 이하)에서 left-banner-area 숨김 ***************************************************************/
@media (max-width: 500px) {
  .left-banner-area {
    display: none !important;
  }
}
.nav-wrap {
    border-top:1px solid rgba(0, 0, 0, 0.15);;
}