@charset "UTF-8";
html, body {
    touch-action: manipulation; /* 터치 스크롤과 확대/축소 제한 */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard";
    background-color: #161616;

}

.top-date {
    font-size: clamp(14px, 1.042vw, 24px);
    text-align: right;
}

.main ::-webkit-scrollbar {
    width: 2.5rem;
    height:8px;
  }
  
.main ::-webkit-scrollbar-track {
box-shadow: inset 0 0 .5rem#666;
border-radius: 1rem;
}

.main ::-webkit-scrollbar-thumb {
background: #666;
border-radius: 1rem;
}

.main ::-webkit-scrollbar-thumb:hover {
background: #666;
}

h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    color: white;
    font-family: "Pretendard";
}
.audio-item{
    height: 147px;
    border-radius: 16px;
    border: solid 2px #333;
    background-color: #161616;
    display: flex;
    align-items: center;
}

        .slide-btn-left{display:none;}
        .slide-btn-right{display:none;}
        .nav-menu {
            font-size: clamp(18px, 2.59vh, 32px);
            width: 100%;
            display: flex;
            align-items: center;
            gap: clamp(4px, 0.74vh, 12px);
        }

        .nav-item {
            padding: clamp(10px, 1.39vh, 20px) clamp(8px, 0.93vh, 16px);
            display: flex;
            align-items: center;
            height: clamp(60px, 9.26vh, 120px);
        }


        .overinfo{display:none;}
        h1 {
            font-size: 1.875vw; /* 36px / 1920 * 100 */
            line-height: 2.4vw; /* 46px / 1920 * 100 */
            font-weight: bold;
            letter-spacing: normal;
            text-align: left;
        }

        h2 {
            font-size: 1.5625vw; /* 30px / 1920 * 100 */
            line-height: 2.08vw; /* 40px / 1920 * 100 */
        }

        h3 {
            font-size: 1.46vw; /* 28px / 1920 * 100 */
            line-height: 2.08vw;
        }

        h4 {
            font-size: 1.25vw; /* 24px / 1920 * 100 */
            line-height: 1.56vw;
        }

        h5 {
            font-size: 1.25vw;
            line-height: 1.25vw;
        }
        #home{
            padding: clamp(40px, 6.57vh, 100px) 0;
        }

       #main {
            padding-left: 3.125vw;
            padding-right: 3.125vw;
            padding-top: 0;
            padding-bottom: 0;
        }
        .main .progress-bar {
            cursor: pointer;
            background-color: #1b44dc;
            border-radius: 5px;
            height:8px;
        }
        .main .progress {
            cursor: pointer;
            border-radius: 5px;
            height:8px;
            position: relative;
            bottom: 20px;
            margin-left: 5px;
            margin-right: 5px;
            width: calc(100%-10px);
        }


.main .btn.btn-play-live {
    cursor: pointer;
    font-size: 1.46vw; /* 28px / 1920 * 100 = 1.46vw */
    color: #fff;
}


        

        .progress-bar {
            cursor: pointer;
            background-color: #1b44dc;
            border-radius: 7px;
        }
        .progress {
            cursor: pointer;
            border-radius: 7px;
        }
        
        .item {
            cursor: pointer;
        }
        
        .section-title-head{
            padding-left: 8px;
        }

        .custom-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 13.02vw;     /* 250px at 1920 */
            max-width: 41.67vw;     /* 800px at 1920 */
            z-index: 9990;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            text-align: center;
        }


        .fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000; /* 배경 색상 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999; /* 최상위 레이어 */
            flex-direction: column; /* 세로 방향 정렬 */
            }

            .content {
            display: flex;
            flex-direction: column; /* 세로 방향으로 정렬 */
            align-items: center; /* 가로 중앙 정렬 */
            justify-content: center; /* 세로 중앙 정렬 */
            }

            .slide-wrapper{    
                overflow-x: auto; /* 스크롤 동작을 유지 */
                overflow-y: hidden;
                display: flex;
                flex-direction: row;
                /*flex-direction: row;flex-wrap: wrap;*/
            }

            .slide-wrapper > *:last-child {
                margin-right: 00px;
            }
            
                

            .spinner-container {
            margin-top: 20px; /* 로고와 스피너 사이 간격 */
            }

            .spinner-border {
            width: 2rem; /* 스피너 크기 조정 */
            height: 2rem; /* 스피너 크기 조정 */
            }

            .loading-text {
            margin-top: 20px; /* 스피너와 텍스트 사이 간격 */
            color: #fff; /* 텍스트 색상: 흰색 */
            font-size: 1.8rem; /* 텍스트 크기 */
            text-align: center; /* 가운데 정렬 */
            }

            .player-notice{
                z-index: 11;
                position: absolute;
                top: 0px;display: flex;align-items: center;justify-content: center;flex-direction: column;
                
            }
            .notice-msg{
                margin-bottom:100px;
            }
            .progress-bar {
                transition: width 0.1s linear !important; /* 기본 0.6s → 0.2s로 변경 */
            }
            
.focus-box {
    position: absolute;
    border: 2px solid white;
    pointer-events: none; /* 포커스 박스가 클릭을 방해하지 않도록 설정 */
    display: none; /* 기본적으로 숨김 */
    z-index: 1000; /* 포커스된 요소 위에 표시되도록 설정 */
  }

footer .footer-bottom span {
    font-size: 0.625vw;
    padding-left: 0.26vw;
    padding-right: 0.26vw;
}

.video-wrapper {
    width: 100%;    
    height: 100vh; /* 높이를 브라우저 높이에 맞춤 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; /* 검은 배경 */
    overflow: hidden;
}

.navbar-bottom-menu .navbar-nav .nav-item .nav-link{
    color:white;
}

.blind {
    display: none;
}

.policy-desc {
    color: #999999;
    font-size: 2.222vh; /* 24px at 1080px height */
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: left;
}


#content a {
    color: #cccccc;
}


a.nav-link.nav-menu.active {
    color: #cccccc !important;
}

.carousel-content .title {
    min-height: 200px
}

app-aside-articles picture img {
    height: auto;
    max-width: 100%;
}

.navbar-light .navbar-toggler {
    border: 0px;
    padding: 0px;
}

p.description {
    line-height: 1.5;
    max-height: 8.33vw;     /* 160px at 1920px */
    min-height: 1.302vw;    /* 25px at 1920px */
    overflow: hidden;
    text-overflow: ellipsis;
    color: lightgrey;
}


.button:focus-visible {
    outline: 2px solid blue; /* 키보드로 포커스될 때만 스타일 적용 */
}


.btn:focus {
    outline: none; /* 기본 포커스 테두리 제거 */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* 커스텀 포커스 효과 */
    background-color: white;
    color:black;
}

.jumbotron .item:focus/*,
.jumbotron .focused_item*/{
    outline: none; /* 기본 포커스 테두리 제거 */
    background-color: inherit;
    border-radius: 16px;
}

.side{
    margin-left: 20px;
}

.side .item{
    color: #999;;
    text-decoration: none;
    background-color: inherit;   
    border-radius: 16px;
    color: #fff;    
}

.side .item .memu_name{
    color: #fff;    
}

.side .item:focus/*,
.side .focused_item*/{
    outline: none; /* 기본 포커스 테두리 제거 */
    border-radius: 16px;
    background-color: #fff;
}
.side .item:focus .memu_name/*,
.side .focused_item .memu_name*/{
    color:#000 !important;
}

.item-icon {
    display: inline-block;
    width: 3.125vw;
    height: 3.125vw;
    background-size: cover;
    background-repeat: no-repeat;
}


.icon-play{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-play.png');
}
.icon-headphone{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-headphone.png');
}
.icon-pause{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-pause-s.png');
}



.side .menu-icon {
    display: inline-block;
    width: 2.083vw;
    height: 2.083vw;
    background-size: cover;
    background-repeat: no-repeat;
}

.side .icon-today {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-today.png');
}
.side .item:focus .icon-today/*,
.side .focused_item .icon-today*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-today-on.png');
}

.side .icon-knowledge {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-knowledge.png');
}
.side .item:focus .icon-knowledge/*,
.side .focused_item .icon-knowledge*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-knowledge-on.png');
}

.side .icon-topic {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-topic.png');
}
.side .item:focus .icon-topic/*,
.side .focused_item .icon-topic*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-topic-on.png');
}

.side .icon-myplay {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-myplay.png');
}
.side .item:focus .icon-myplay/*,
.side .focused_item .icon-myplay*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-myplay-on.png');
}

.side .icon-policy {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-policy.png');
}
.side .item:focus .icon-policy/*,
.side .focused_item .icon-policy*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-policy-on.png');
}

.side .icon-exit {
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-exit.png');
}
.side .item:focus .icon-exit/*,
.side .focused_item .icon-exit*/{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-exit-on.png');
}


.video-container a.item{
    color: #999 !important;;
    border: 6px solid rgba(0, 0, 0, 0);
}


.video-container a.item:focus{
    color:#ffffff !important;
    outline: none; /* 기본 포커스 테두리 제거 */
    border: 6px solid #ffffff;    
}

.section-title {
    margin-bottom: 22px;
    margin-top: 22px;
    color: #FFFFFF;
}

.all-play-btn,.refresh-btn {
    margin-bottom: 22px;
    margin-top: 22px;
    margin-left:5px;
}


.time, .reporter {
    color: #666666;
}

.image-hover:hover .thumb-title {
    background: #cccccc;
}

.section-title:after {
    top: 36px;
    background: #cccccc;
}

.article-paragraph h1 {
    font-size: 1.3rem
}

@media screen and (min-width: 20rem) {
    .news-post-wrapper h1 {
        font-size: calc(1.3rem + 1 * (100vw - 20rem) / 60)
    }
}

@media screen and (min-width: 80rem) {
    .news-post-wrapper h1 {
        font-size: 2.3rem
    }
}

.video-item h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    height: 3em;
    line-height: 1.5em;
}

.audio-item h2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    height: 4.5em;
    line-height: 1.5em;
}

#today-audio .audio-item h2 {
    height: 1.5em;    
}

#today-audio .audio-item .icon-headphone{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-play.png');
}



.thumb-title {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}


.focused-slide{
    border: none;
}
img.default-image{
    max-width:640px;
    max-height:360px;
}

/* 높이 1080px 이상일 때 */
@media (min-height: 1080px) {
  #navbar {
    height: 850px;
  }
}

/* 높이 720px 이상이면서 1080px 미만일 때 */
@media (min-height: 720px) and (max-height: 1079px) {
  #navbar {
    height: 550px;
  }
}

/* 그 외 (즉, 720px 미만) 구간에서 적당한 비율을 적용하고 싶으면 추가로 작성 */
@media (max-height: 719px) {
  /* 예: 창 높이의 75% 정도로 줄여서 적용 */
  #navbar {
    height: 75vh;
  }
}

.navbar-left li a {
    color: #666666;
}

.navbar-bottom-menu .navbar-nav .nav-item .nav-link:hover {
    color: #cccccc;
}

#main-banner-carousel .owl-dots .owl-dot.active {
    background: #cccccc;
}

.navbar-bottom-menu .navbar-nav .nav-item {
    padding-right: 12px;
    padding-left: 12px;
}

.sticky{
    background-color: #3a3a3a; 
}

.jumbotron .player_video_info{
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
}

.main_container {
    margin: 11px 5px;
    
  }
  
  .main .item {
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    color: #404040;
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #161616 !important;
  }
  
  .main .item .image-container{
    transition: filter 0.3s ease, opacity 0.3s ease;
  }

  .main .item .image-container img{
    border-radius: 16px;
  }
    

  .main .item:focus .image-container /*,
  .main .selected_item .image-container,
  .main .focused_item .image-container */{
    filter: brightness(0.6); /* 60% 밝기 조절 */
    opacity: 0.8; /* 불투명도 조절 */
  }

  .main .item:focus /*,
  .main .selected_item,
  .main .focused_item*/ {
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #2177ff !important;
    border-radius: 16px;
  }

  .main .video-item.item {
    outline: none; 
    color: white !important;
    border: 0px solid #161616 !important;
    border-radius: 16px;
  }
  .main .video-item.item:focus {
    outline: none; 
    color: white !important;
    border: 0px solid #161616 !important;
    border-radius: 16px;
  }

.onair-badge {
    width: clamp(80px, 5.729vw, 140px);
    height: clamp(28px, 2.083vw, 60px);
    padding: clamp(4px, 0.313vw, 10px) 0;
    border-radius: clamp(4px, 0.417vw, 12px);
    background-color: #eb003b;
    font-family: Pretendard;
    font-size: clamp(16px, 1.25vw, 28px);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: clamp(-1px, -0.03125vw, 0px);
    color: #fff;
}


  .main .video-item.item .overinfo {
    display: none;
  }

  .main .video-item.item:focus .overinfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
  }

  .main .video-item.item .image-area/*,
  .main .video-item.selected_item .image-area,
  .main .video-item.focused_item .image-area*/
   {
    outline: none; 
    color: white !important;
    border: 8px solid #161616 !important;
    border-radius: 16px;
  }

  .main .video-item.item:focus .image-area/*,
  .main .video-item.selected_item .image-area,
  .main .video-item.focused_item .image-area*/
   {
    outline: none; 
    color: white !important;
    border: 8px solid #2177ff !important;
    border-radius: 16px;
  }



  .main .video-item.item:focus/*.main .video-item.selected_item,.main .video-item.focused_item*/ {
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #161616 !important;
  }

  .main .video-item.item:focus .image-area/*,.main .video-item.selected_item .image-area,.main .video-item.focused_item .image-area */{
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #2177ff !important;
    border-radius: 16px;
  }



  .jumbotron .item:focus/*.jumbotron .selected_item,.jumbotron .focused_item*/ {
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #2177ff !important;
    border-radius: 16px;
  }

  .jumbotron .item.btn-watch-prev,.jumbotron .item.btn-watch-next{
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid transparent !important;
    border-radius: 16px;
  }
  .jumbotron .item img,.jumbotron .item.btn-watch-next img{
    border-radius: 8px;
  }
  .jumbotron .item.btn-watch-prev:focus,.jumbotron .item.btn-watch-next:focus/*.jumbotron .selected_item,.jumbotron .focused_item*/ {
    outline: none; /* 기본 포커스 테두리 제거 */
    color: white !important;
    border: 8px solid #2177ff !important;
    border-radius: 16px;
  }

  .jumbotron .item.btn-watch-back,
    .jumbotron .item.btn-play-pause,
    .jumbotron .status_title
     {
        background-size: contain; /* 또는 cover */
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: auto;
        background-color: rgba(255, 255, 255, 0.08); /* 거의 투명한 배경 */        
        cursor: pointer;
        z-index: 12;
    }

    

  .jumbotron .item.btn-watch-back{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/back.png');
    border: 0px solid #2177ff !important;
    width:21px;
    height:42px;
  }

  .jumbotron .item.btn-watch-back:focus{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-on.png');
    border: 0px solid #2177ff !important;
    width:21px;
    height:42px;
  }
  .jumbotron .item.btn-play-pause.play{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-play@3x.png');
    border: 0px solid #2177ff !important;
    width:137px;
    height:138px;
  }

  .jumbotron .item.btn-play-pause.play:focus{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-play-on@3x.png');
    border: 0px solid #2177ff !important;
    width:137px;
    height:138px;
  }
  .jumbotron .item.btn-play-pause.pause{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-pause-s@3x.png');
    border: 0px solid #2177ff !important;
    width:137px;
    height:138px;
  }

  .jumbotron .item.btn-play-pause.pause:focus{
    background-image: url('https://ott.sbsnews.co.kr/assets/jeplin/icon-pause-on@3x.png');
    border: 0px solid #2177ff !important;
    width:137px;
    height:138px;
  }
  
  .skeleton {
  background-color: #444444;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 95%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 0.5s infinite;
}

@keyframes shimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

  .w_spinner{position:relative;width:86px;height:86px;z-index:9999}
  .w_spinner::before{content:"";width:86px;height:86px;position:absolute;left:0;top:0;background-color:transparent;border:6px solid #d0ddfe;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:100%}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;z-index:2;position:absolute;top:0;left:0;width:86px;height:86px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.path{stroke:#2579ff;-webkit-animation:dash 2s ease-in-out infinite;animation:dash 2s ease-in-out infinite}@-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(-100deg);
    transform: rotate(-100deg);
    }
    100% {
    -webkit-transform: rotate(260deg);
    transform: rotate(260deg);
    }
}@keyframes rotate {
    0% {
        -webkit-transform: rotate(-100deg);
        transform: rotate(-100deg);
    }
    100% {
        -webkit-transform: rotate(260deg);
        transform: rotate(260deg);
    }
}@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
.vjs-loading-spinner{
    display:none !important;
}