:root {
    /* font-size */
    --fz-32: 32px;
    --fz-28: 28px;
    --fz-18: 18px;

    /* color */
    --text-color: #333;
    --sub-color: #757575;
    --border-color: #d7d7d7;

    /* background */
    --calender-bg: #f5f5f5;
}

/* layout */
h3.sec-tit {
    font-size: var(--fz-32);
    line-height: 120%;
    color: var(--text-color);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.box-gap {
    padding-block: clamp(32px, 6vw, 52px);
    overflow: hidden;
}
.container .inner-box .text_wrap .title.pg-item-tit {
    color: var(--text-color);
    font-weight: 500;
    font-size: var(--fz-18);
    line-height: 150%;
    letter-spacing: -0.36px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.8s;
}

@media all and (max-width:430px) {h3.sec-tit {font-size: var(--fz-28);}}




/* banner */
.banner-box {
    position: relative;
    overflow: hidden;
}
.banner-box .slide-item {position: relative;}
.banner-box .slick-dotted.slick-slider {margin-bottom: 0;}
.banner-box .img-box {
    width: 100%;
    height: 100%;
}
.banner-box .img-box .img-pc {
    display: block;
    width: 100%;
    object-fit: cover;
}
.banner-box .img-box .img-mb {display: none;}
.banner-box .img-box::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    display: inline-block;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    opacity: 0.5;
}
.banner-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-box a .program-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    font-weight: 400;
    color: #fff;
} 
.banner-box a .inner-box {height: 100%;}
.banner-box a .program-info .info-tag {
    display: inline-block;
    padding: 3px 6px;
    background: linear-gradient(90deg,rgba(17, 138, 186, 1) 0%, rgba(44, 212, 114, 1) 100%);
    color: #fff;
    text-align: center;
    font-size: var(--fz-18);
    font-weight: 500;
}
.banner-box a .program-info .info-tit {
    margin-top: 16px;
    font-size: clamp(24px, 4.6vw, 52px);
    line-height: 1.2;
    font-weight: bold;
}
.banner-box a .program-info .info-date {
    margin-top: 20px;
    font-size: 16px;
}
.banner-dots .slick-dots {
    width: auto;
    left: -5px;
    bottom: 0;
    margin-bottom: 52px;
}
.banner-dots .slick-dots li {
    width: 10px;
    height: 10px;
}
.banner-dots .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 11px 6px, rgba(27, 31, 35, 0.15) 0px 0px 3px 2px;
    transition: width 0.8s;
}
.banner-dots .slick-dots li.slick-active {width: 52px;}
.banner-dots .slick-dots li.slick-active button {
    width: 100%;
    border-radius: 32px;
    background-color: #fff;
}
.banner-dots .slick-dots li button:before {
    content: "";
    width: 10px;
    height: 10px;
}
.banner-paging {
    display: none;
    padding: 8px 12px;
    width: fit-content;
    border-radius: 32px;
    background: rgba(0, 0, 0, 0.50);
    font-size: 14px;
    color: #ececec;
    font-weight: 400;
}
.banner-paging .now {
    font-weight: bold;
    color: #fff;
}

/* banner slide */
.slick-arrow {
    position: absolute;
    top: 50%;
    width: 100px;
    height: 100px;
    transform: translateY(-50%);
    opacity: 0.5;
    transition: opacity 1s;
    cursor: pointer;
}
.slick-arrow:hover{opacity: 1;}
.banner-slide-prev {
    background: url('https://worldimg.kbs.co.kr/src/images/new_tv_img/banner_prev.svg') no-repeat center;
    right: 50%;
    margin-right: 630px;
}
.banner-slide-next {
    background: url('https://worldimg.kbs.co.kr/src/images/new_tv_img/banner_next.svg') no-repeat center;
    left: 50%;
    margin-left: 630px;
}

@media all and (max-width:1440px) {.banner-dots .slick-dots{margin-bottom: 40px;}}
@media (max-width: 1440px) and (min-width: 768px) {
    .banner-box .img-box .img-pc {height: 400px;} 
}

@media all and (min-width:1440px) {
    .banner-box .img-box .img-pc {
        width: 100%;
        height: 600px;
    } 
}
@media all and (max-width:1200px) {
    .banner-box a .program-info .info-tag {font-size: 16px;}
    .banner-box a .program-info .info-date {margin-top: 12px; font-size: 14px;}
    .banner-dots .slick-dots {margin-bottom: 30px;}
    .banner-dots .slick-dots li.slick-active {width: 35px;}
    .banner-dots .slick-dots {left: auto; right: 0;}
}
@media all and (max-width:767px) {
    .banner-dots.inner-box {width: 95%;}
    .banner-box a .program-info .info-tag {
        padding: 8px;
        font-size: 14px;
    }
    .banner-box a .program-info .info-tit {margin-top: 15px;}
    .banner-box .img-box {aspect-ratio: 2/1;}
    .banner-box .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50%;
    }
}
@media all and (max-width:430px) {
    .banner-box .img-box {aspect-ratio: 9/10;}
    .banner-box .img-box .img-pc {display: none;}
    .banner-box .img-box .img-mb {display: block;}
    .banner-box .img-box::before {background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);width: 100%;top:auto;bottom: 0;height: 50%;}
    .banner-box a .program-info {
        top: auto;
        bottom: 46px;
        transform: translateY(0);
        width: 80%;
    }
    .banner-box a .program-info .info-date {margin-top: 4px;}
    .banner-dots.inner-box {display: none;}
    .banner-paging {
        position: absolute;
        bottom: 20px;
        right: 14px;
        display: inline-block;
    }
}


/* program of the week */
.calender-box {background-color: var(--calender-bg);}
.calender-box .week {
    margin-top: 35px;
    border-top: none;
    border-bottom: 1px solid #0088cf;
}
.calender-box .week li {
    height: 50px;
    line-height: 50px;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.8s;
}
.calender-box .week li:hover {color: #0088cf;}
.calender-box .week li.on {
    position: relative;
    border: 1px solid #0088cf;
    border-bottom: none;
}
.calender-box .week li.on::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: var(--calender-bg);
}

/* slider inner-box */
.program-inner-box {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}
.calender-box .calender-program {
    margin-top: 20px;
    white-space: normal;
}
.calender-box .calender-program .img_wrap img{transition: filter 0.8s;}
.calender-box .calender-program .text_wrap {
    position: static;
    margin-top: 12px;
    padding: 0px 0px 10px;
}
.calender-box .calender-program .text_wrap .title {
    color: var(--text-color);
    font-size: var(--fz-18);
    font-weight: 500;
    line-height: 150%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.8s;
}
.calender-box .calender-program .text_wrap .text {
    color: var(--sub-color);
    line-height: 150%;
    transition: color 0.8s;
}
.calender-box .week-mb {
    display: none;
    margin-top: 24px;
}
.calender-box .week-mb select {
    padding: 0 40px 0 12px;
    height: 40px;
    border: 1px solid #bfc0c3;
    background: url(https://worldimg.kbs.co.kr/src/images/new_tv_img/bg_select.svg) no-repeat right /contain;
    background-size: 32px 6px;
    font-size: var(--fz-18);
    color: #333;
    box-sizing: border-box;
}
.swiper-scrollbar {display: none;}

@media all and (max-width:1199px){
    .program-inner-box {
        width: 100%;
    }
    .calender-box .calender-program .text_wrap {margin-bottom: 36px;}
    .swiper-scrollbar.swiper-scrollbar-horizontal {
        display: block;
        left: 50% !important;
        transform: translateX(-50%);
        width: 95% !important;
        border-radius: 0;
    }
    .swiper.swiper-initialized {padding: 0px 2.5%;}
}


@media all and (max-width:767px) {
    .calender-box .inner-box {padding: 0 14px;}
    .calender-box .calender-program .text_wrap .title {font-size: 16px;}
    .calender-box .calender-program .text_wrap .text {font-size: 13px;}
}
@media all and (max-width:431px) {
    .calender-box ul.week {display: none;}
    .calender-box .week-mb {display: block;}
    .calender-box .calender-program .text_wrap {margin-bottom: 30px;}
}
@media all and (min-width:480px) {
    .calender-box .calender-program .swiper-slide:hover .img_wrap img{filter: brightness(0.75);}
    .calender-box .calender-program .swiper-slide:hover .text_wrap .title, 
    .calender-box .calender-program .swiper-slide:hover .text_wrap .text {color: #3D99D6;}
}



/* kbs world programs */
.program-list-box {
    margin: 0;
    padding: 52px 0px 32px;
}
.program-list-box ul.program-list {
    display: flex;
    flex-wrap: wrap;
    margin: 35px -12px 0px;
}
.program-list-box ul.program-list li {padding: 0 10px 35px;}
.program-list-box ul.program-list li:nth-child(n+9) {display: none;}
.program-list-box ul.program-list li .img_wrap img {transition: filter 0.8s;}
.program-list-box ul.program-list li .text_wrap .title {
    margin-top: 8px;
    min-height: 54px;
}
.program-list-box .more-list button {
    display: block;
    margin: 0 auto;
    padding: 10px;
    min-width: 184px;
    border: 1px solid #BFC0C3;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.28px;
    cursor: pointer;
}
.program-list-box .more-list button:not(:disabled):hover {
    border: 1px solid var(--sub-color);
    background-color: #eaeaea;
}
.program-list-box .more-list button:disabled {
    border: 1px solid #d4d6dd;
    color: #bfc0c3;
}

@media all and (max-width:767px) {.program-list-box ul.program-list li {padding: 0 10px 12px;}}
@media all and (max-width:460px) {.program-list-box ul.program-list li .text_wrap .title {font-size: 16px;}}
@media all and (max-width:360px) {
    .program-list-box ul.program-list li {width: 100%;}
    .program-list-box ul.program-list li:nth-child(n+5) {display: none;}
    .program-list-box ul.program-list li .text_wrap .title {min-height: 35px;}
}
@media all and (min-width:480px) {
    .program-list-box ul.program-list li:hover .img_wrap img {filter: brightness(0.75);}
    .program-list-box ul.program-list li:hover .text_wrap .title {color: #3D99D6;}
}





/* official teasers */
.official-list-box {padding-block: 90px;}
.official-list-box .teaser-wrap {
    display: flex;
    margin-top: 20px;
}
.official-list-box .teaser-wrap .teaser-vod {
    width: 66.66%;
    aspect-ratio: 16/9;
}
.official-list-box .teaser-wrap .teaser-vod iframe {
    width: 100%;
    height: 100%;
}
.official-list-box .teaser-wrap .teaser-tabs {width: 33.33%;}
.official-list-box .teaser-wrap .teaser-tabs ul {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.official-list-box .teaser-wrap .teaser-tabs ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    height: 33.33%;
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom: none;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}
.official-list-box .teaser-wrap .teaser-tabs ul li:nth-child(1) {border-top: 1px solid var(--border-color);}
.official-list-box .teaser-wrap .teaser-tabs ul li:nth-child(3) {border-bottom: 1px solid var(--border-color);}
.official-list-box .teaser-wrap .teaser-tabs ul li:hover {background-color: #eaeaea;}
.official-list-box .teaser-wrap .teaser-tabs ul li.on {
    padding: 40px 20px;
    background-color: #383a41;
    border: none;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
.official-list-box .teaser-wrap .teaser-tabs ul li:not(:last-child)::after{
    content: "";
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: calc(100% - 40px);
    height: 1px;
    background: var(--border-color);
}
.teaser-tabs ul:has(li:not(:first-child).on) li::after,
.teaser-tabs ul li:first-child.on::after {opacity: 0;}
.teaser-tabs ul:has(li:last-child.on) li:first-child::after {opacity: 1;}


.official-list-box .teaser-wrap .teaser-tabs ul li .tab-date {
    font-size: 14px;
    font-weight: 400;
    color: var(--sub-color);
}
.official-list-box .teaser-wrap .teaser-tabs ul li.on .tab-date {color: #fff;  } 

/* moblie style */
.official-list-box .teaser-wrap .teaser-tabs ul li iframe {display: none;}



@media all and (max-width:961px) {.official-list-box .teaser-wrap .teaser-tabs ul li.on {font-size: var(--fz-18);}}
@media all and (max-width:767px) {
    .official-list-box {padding-block: clamp(32px, 6vw, 52px);}
    .official-list-box .teaser-wrap {flex-direction: column;}
    .official-list-box .teaser-wrap .teaser-vod {width: 100%;}
    .official-list-box .teaser-wrap .teaser-tabs {width: 100%;}
    .official-list-box .teaser-wrap .teaser-tabs ul li {padding: 15px; border: 1px solid var(--border-color);}
    .official-list-box .teaser-wrap .teaser-tabs ul li:nth-child(1) {border-bottom: none;}
    .official-list-box .teaser-wrap .teaser-tabs ul li:nth-child(2) {border-bottom: none;}
    .official-list-box .teaser-wrap .teaser-tabs ul li.on {padding: 35px 15px;}
    .official-list-box .teaser-wrap .teaser-tabs ul li::after{display: none !important;}
    .official-list-box .teaser-wrap .teaser-vod iframe {aspect-ratio: 16/9;}
}
@media all and (max-width:430px) {
    .official-list-box .teaser-wrap .teaser-vod {display: none;}
    .official-list-box .teaser-wrap .teaser-tabs ul li.on {
        padding: 15px;
        padding-top: 35px;
    }
    .official-list-box .teaser-wrap .teaser-tabs ul li.on iframe {
        display: block;
        margin: -35px -15px 0px -15px;
        border: none;
        aspect-ratio: 16/9;
    }
}