/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */
.left-main {border: 1px solid #0000002b; background: #0000002b; border-radius: 12px;}

@media (min-width:992px){ // 가로폭 992px 이상
	.container {max-width:1600px !important}
}
@media (min-width:1200px){ // 가로폭 1200px 이상
	.container {max-width:1600px !important}
}
@media (min-width:1400px){ // 가로폭 1400px 이상
	.container {max-width:1600px !important}
}
.border_x {
	border-radius: 15px;
    border: 1px solid #1a2b59;
    padding: 10px;
    margin-bottom: 10px;
    background: #0000002b;
}


/* 버튼 색상 */
.btn-orang-500-primary {
  background: var(--primary-orange-500) !important;
  color: var(--white) !important;
}

.btn-primary-line {
  border: 1px solid var(--primary-orange-500);
  color: var(--primary-orange-500) !important;
}

.btn-gray-secondary {
  background: var(--gray-400);
  color: var(--gray-300);
}

.btn-gray-200-line {
  border: 1px solid var(--gray-300);
  color: var(--gray-800);
}

.btn-gray-100 {
  background: var(--gray-100);
  color: var(--gray-900);
}
.btn-gray-200 {
  background: var(--gray-200);
  color: var(--gray-900);
}
.btn-gray-300 {
  background: var(--gray-300);
  color: var(--gray-900);
}
.btn-gray-400 {
  background: var(--gray-600);
  color: var(--gray-300);
}
.btn-gray-900 {
  background: var(--gray-900);
  color: var(--gray-100);
}
.btn-gray-400-line {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--gray-400);
}

.btn-disabled {
  background: var(--gray-900);
  color: var(--gray-700);
}

.btn-Cancel {
  background: var(--gray-800);
  color: var(--gray-300);
}

.btn-red {
  background: var(--red);
  color: var(--white);
}

: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;
  background: #161b22;
  border-radius: 12px;
  padding: 0 30px 30px;
}
  .title-shape {
    position: relative;
    display: flex;
    justify-content: center;
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 22px;
    color: var(--white);

    .text {
      width: 100%;
      height: 55px;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &::after {
      content: "";
      background: url("/img/title-channel.svg") no-repeat center top;
      background-size: 100%;
      width: 500px;
      height: 70px;
    }
  }
  
  .channel-list {
    display: flex;
    gap: 16px;

    .channel-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1;
      height: 74px;
      color: var(--gray-300);
      border: 1px solid var(--gray-500);
      border-radius: 8px;
      transform: skewX(-7deg);
      font-family: "Titillium Web";
      font-weight: 900;

      .colum-text {
        font-size: 32px;
        font-weight: 700;

        & > span {
          display: block;
          font-size: 12px;
          font-weight: 200;
        }
      }

      .channel-name {
        font-size: 50px;
        font-weight: 900;
      }
      &:hover,
      &.active {
        color: #ab0000 !important;
        border:2px solid #ab0000;
        box-shadow: 4px 4px 0px 0px #ab0000;
      }
    }
  }

  @media all and (max-width: 768px) {
    padding: 0;
    gap: 6px;
    background: 0;

    .title-shape {
      font-size: 17px;

      .text {
        height: 40px;
      }
      &::after {
        height: 75px;
      }
    }

    .channel-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      .channel-item {
        height: 56px;
        border-radius: 4px;
        transform: skewX(-7deg);

        .colum-text {
          font-size: 26px;
          & > span {
            display: block;
            font-size: 12px;
            font-weight: 200;
          }
        }

        .channel-name {
          font-size: 36px;
        }

        &:hover,
        &.active {
          color: #ab0000;
          border: 1px solid #ab0000;
          box-shadow: 2px 2px 0px 0px #ab0000;
        }
      }
    }
  }
  @media all and (max-width: 414px) {
    .title-shape {
      font-size: 17px;

      .text {
        height: 40px;
      }
      &::after {
        background: none;
        height: 40px;
      }
    }
  }
}