/* BTOCSITE-114627 베샵 플레이 */
.page-header.bsplay-kv-banner img { width: 100%; }

.bsplay-contents { max-width: 1460px; margin: 0 auto; margin-top: 80px; padding: 0 40px;}
.bsplay-contents .bsplay-section:not(:first-child) { margin-top: 100px; }
.bsplay-section { max-width: 1460px; margin: 0 auto; padding: 0 40px; }
.bsplay-contents .hidden-item { display: none !important; }

.bsplay-section .bsplay-badge,
.bsplay-contents .bsplay-badge { display: none; }
.bsplay-contents .component-wrap { position: absolute; top: 0px; right: 0px; }
.bsplay-contents .btn-link { text-decoration: none; font-size: 14px; }
.bsplay-contents .btn-link::after { background-size: 10px; }
.bsplay-contents .btn-area { display: flex; width: 100%; justify-content: center; align-items: center; margin-top: 64px; }

.bsplay-section .section-header { width: 100%; border-bottom: 2px solid #000; padding-bottom: 16px; display: flex; justify-content: space-between; align-items: center;}

.bsplay-section .bsplay-hero { display: flex; flex-direction: row; margin-top: 24px; width: 100%; }
.bsplay-contents .bsplay-hero .hero-media { display: flex; flex-direction: row; gap: 40px; align-items: flex-start;     justify-content: space-between; width: 100%; }
.bsplay-contents .bsplay-hero .hero-media .video-link { border-radius: 8px; width: 100%; overflow: hidden; }
.bsplay-contents .bsplay-hero .hero-media img { width: 100%; /* max-width: 840px; */ max-height: 472px; object-fit: cover; }
.bsplay-contents .bsplay-hero .hero-media .caption { display: flex; flex-direction: column; width: 500px; justify-content: space-between; }
.bsplay-contents .bsplay-hero .hero-media .caption .caption-head { display: flex; flex-direction: column; position: relative; }
.bsplay-contents .bsplay-hero .hero-media .caption .caption-title { font-size: 24px; font-weight: bold; line-height: 1.4; max-height: 70px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: ellipsis; }
.bsplay-contents .bsplay-hero .hero-media .caption .caption-date { font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 8px; padding-bottom: 24px; border-bottom: 1px solid #DDDDDD; overflow: hidden; }
.bsplay-contents .bsplay-hero .hero-media .caption .caption-desc { font-size: 16px; font-weight: 400; line-height: 1.5; margin-top: 24px; max-height: 320px; overflow-y: scroll; }

.bsplay-contents .video-list.video-list-grid.shorts-grid { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.bsplay-contents .video-list.video-list-grid.shorts-grid .video-item { min-width: 0; }
.bsplay-contents .video-list .video-card { display: flex; flex-direction: column; }
.bsplay-contents .video-list .video-card .video-thumb { border-radius: 8px; width: 100%; overflow: hidden; position: relative; }
.bsplay-contents .video-list .video-card .video-thumb img { width: 100%; height: 250px; }
.bsplay-contents .video-list.shorts-grid .video-card .video-thumb img { width: 100%; height: 581px; }
/* .bsplay-contents .video-list .video-card .video-thumb .play-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: url(../images/icons/btn_play_red.svg) no-repeat center center; background-size: 100% auto; } */
.bsplay-contents .video-list .video-card .video-info { margin-top: 16px; max-height: 52px; overflow: hidden; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: ellipsis; font-size: 18px; font-weight: 500; line-height: 1.4; }
.bsplay-contents .video-list .video-card .video-title { font-weight: 500; }
/* 베샵play > 동영상 */
.bsplay-contents .video-list.video-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 24px; }
.bsplay-contents .video-list.video-list-grid .video-item { min-width: 0; }
/* 베샵play > tv ad */
.bsplay-contents .tvad-list-wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; gap: 80px; }
.bsplay-contents .tvad-list-wrap .tvad-hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 973px; max-width: 973px; }
.bsplay-contents .tvad-list-wrap .tvad-hero .video-link { width: 100%; overflow: hidden; border-radius: 8px; }
.bsplay-contents .tvad-list-wrap .tvad-hero img { width: 100%; max-width: 973px; max-height: 547px; min-width: 973px; min-height: 547px; object-fit: cover; }
.bsplay-contents .tvad-list-wrap .tvad-hero .caption { display: flex; flex-direction: column; margin-top: 22px; width: 100%; }
.bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-head { display: flex; flex-direction: column; position: relative; }
.bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-title { font-size: 24px; font-weight: bold; line-height: 1.4; max-height: 70px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: ellipsis; padding-right: 32px; }
.bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-date { font-size: 16px; font-weight: 500; line-height: 1.6; margin-top: 8px; border-bottom: 1px solid #DDDDDD; padding-bottom: 16px;  overflow: hidden; }
.bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-desc { font-size: 16px; font-weight: 500; line-height: 1.5; margin-top: 32px; max-height: 225px; overflow-y: scroll; }
/* padding-left: 47px; */
.bsplay-contents .tvad-list-wrap .tvad-list-content { display: flex; flex-direction: column; padding-top: 12px; width: 327px; }
.bsplay-contents .tvad-list-wrap .tvad-list-content .total-count { font-size: 14px; font-weight: 400; line-height: 1.7; }
.bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul { display: flex; flex-direction: column; margin-top: 45px; gap: 24px; height: 862px; overflow-y: scroll;}
.bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; width: 100%; }
.bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item .video-link { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
.bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item .video-link img { max-width: 120px; min-width: 120px; object-fit: cover;}
.bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item .tvad-item-desc { font-size: 16px; font-weight: 700; line-height: 1.5; width: calc(100% - 136px); max-width: 161px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: ellipsis; }

@media screen and (max-width: 767px) {
    .page-header.bsplay-kv-banner { padding: 0; margin: 0 auto;}
    .page-header.bsplay-kv-banner img { width: 100%; }
    .bsplay-contents { padding: 0; margin-top: 40px; width: 100%; overflow-x: hidden; box-sizing: border-box; }
    .bsplay-section { padding: 0 16px; padding-bottom: 50px; border-bottom: 12px solid #F4F4F4; }
    .bsplay-contents .bsplay-section:not(:first-child) { margin-top: 60px; }
    .bsplay-section .section-header { padding-bottom: 10px;}
    .bsplay-contents .section-header .section-title { font-size: 20px; font-weight: 700; line-height: 1;}
    .bsplay-contents .btn-link { font-size: 14px; }
    .bsplay-contents .btn-link::after { background-size: 12px; }
    .bsplay-section-line { width: 100%; height: 12px; background-color: #F4F4F4;}

    .bsplay-contents .bsplay-hero .hero-media { flex-direction: column; gap: 24px; justify-content: flex-start; }
    .bsplay-contents .bsplay-hero .hero-media img { max-width: 100%; max-height: 100%; min-width: 345px; min-height: 184.5px;}
    .bsplay-contents .bsplay-hero .hero-media .video-link img { width: 100%; }
    .bsplay-contents .bsplay-hero .hero-media .caption { width: 100%; }
    .bsplay-contents .bsplay-hero .hero-media .caption .caption-date { font-size: 14px; margin-top: 16px; padding-bottom: 20px;}
    .bsplay-contents .bsplay-hero .hero-media .caption .caption-desc { font-size: 14px; max-height: 202px;}

    .bsplay-contents .video-list .video-card .video-info { font-size: 14px; }
    .bsplay-contents .video-list.swiper-manager { margin-top: 24px; width: 100%; }
    .bsplay-contents .video-list .swiper-slide .video-card .video-thumb img { /* object-fit: contain; max-width: 140px; min-width: 140px; */ max-width: 100%; min-width: 100%; min-height: 248px; max-height: 248px; }

    /* 베샵play > 동영상 */
    .bsplay-contents .video-list.video-list-grid { padding: 0 16px; grid-template-columns: repeat(1, 1fr); gap: 30px; }
    .bsplay-contents .btn-area { margin-top: 30px; margin-bottom: 80px;}
    .bsplay-contents .video-list .video-card .video-thumb img { width: 100%; height: 184.5px; }
    .bsplay-contents .video-list.shorts-grid .video-card .video-thumb img { min-height: 281px; height: 100%; }

    /* 베샵play > shorts */
    .bsplay-contents .video-list.video-list-grid.shorts-grid { margin-top: 0px; grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }

    /* 베샵play > tv ad */
    .bsplay-contents .tvad-list-wrap { flex-direction: column; align-items: center; gap: 0;}
    .bsplay-contents .tvad-list-wrap .tvad-hero { width: 100%; max-width: 100%; padding-right: 16px; padding-left: 16px; }
    .bsplay-contents .tvad-list-wrap .tvad-hero img { /* max-width: 328px; */ max-width: 100%; max-height: 184.5px; min-width: 100%; min-height: 184.5px;}
    .bsplay-contents .tvad-list-wrap .tvad-hero .caption { margin-top: 24px; }
    .bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-date { padding-bottom: 20px;}
    .bsplay-contents .tvad-list-wrap .tvad-hero .caption .caption-desc { margin-top: 24px; max-height: 202px; margin-bottom: 50px;}
    .bsplay-contents .tvad-list-wrap .tvad-list-content { width: 100%; padding-right: 16px; padding-left: 16px; }
    .bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul {height: auto;}
    .bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item .video-link { flex-direction: column; width: 100%; align-items: flex-start; }
    .bsplay-contents .tvad-list-wrap .tvad-list-content .tvad-list-ul .tvad-list-item .video-link img {max-width: 100%; max-height: 184.5px; min-width: 100%; min-height: 184.5px;}
    .bsplay-contents .btn-area.pc-hidden { display: flex !important; margin-top: 0px; }

}