#contents {
    margin: 0 auto;
    min-height: 90vh;
}

/* 비디오 리스트 */
.videos-filter {display:flex;width:100%;margin-top:10px;margin-bottom:10px;align-items:center;}
.videos-filter .select-group-wrap {width:250px;margin-left:auto;display:flex;}
.videos-filter .select-category {width:250px;margin-left:auto;display:flex;}
.videos-filter .select-wrap {width:250px;margin-left:auto;display:flex;}
.videos-filter .input {width:100%;;height:49px;background:#232323;color:#aaa;display:flex;max-width:300px; }
.videos-filter .input input[type=text] {background:#232323;width:100%;color:#fff;height:100%;padding-left:10px;}
.videos-filter .input .share-btn-search {display:inline-block;width:60px;text-align:center;}
.videos-filter .input i {font-size:20px;color:#fff;}
.videos-section {margin-top:100px;position:relative; padding-bottom:20px; }
.search-section {margin-top:00px;position:relative;}


/* 전체삭제 */
.videos-section .functoin {margin-left:auto;display:flex;align-items:center;justify-content:right;margin-top:20px;margin-bottom:15px;}
.videos-section .functoin div {background:#333;color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;cursor:pointer;border-radius:3px;padding: 3px 5px 5px 5px;}
.videos-section .functoin div + div {margin-left:14px;}
.videos-section .functoin div .text {display:block;width:100%;margin-top:4px;}
.videos-section .functoin div i {font-size:22px;margin-right:5px;display:block;width:100%;}
.videos-section .functoin div span {margin-left:2px;}
.videos-section .functoin div.active i {color:#f33;}
.videos-section .functoin a {background:#333;color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;cursor:pointer;border-radius:3px;padding: 6px 5px 5px 5px;}


.mypage-section .select-wrap .selectbox{position: relative;
    z-index: 2;
    width: fit-content;
    border: 0.1em solid #999;
    overflow: hidden;
    font-size: 13px;
    color: #666666;
    padding: 10px 0 10px 18px;
    width: 100%;
    color: white;
    cursor: pointer;
    background: #171717;
    border: 1px solid #f5f5f5;
    border-radius: 4px;}
.mypage-section .videos-filter {display:flex;width:100%;margin-top:10px;margin-bottom:10px;align-items:center;}
.mypage-section .videos-filter .select-group-wrap {margin-left:auto;display:flex; width:100%; margin-bottom:0;}
.mypage-section .videos-filter .select-wrap {width:100%;margin-left:auto;display:flex;margin:0 5px;}
.mypage-section .videos-filter .select-category {width:250px;margin-left:auto;display:flex;}
.mypage-section .videos-filter .input {border-radius: 5px;width:100%;;height:49px;background:#fff;color:#000;display:flex;max-width:100%;}
.mypage-section .videos-filter .input input[type=text] {background:#fff;width:100%;color:#000;height:100%;padding-left:10px;border:none; border-radius: 5px; text-align: center;}
.mypage-section .videos-filter .input input::placeholder { color: #000; }
.mypage-section .videos-filter .input .local-btn-search {display:inline-block;width:60px;text-align:center;}
.mypage-section .videos-filter .input i {font-size:20px;color:#000;}
.mypage-section .videos-section {margin-top:10px;position:relative;}


/* 리스트 아이템 */
.item-list {width:100%; height:70vh;}
.item-list .items {display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 30px 10px;}
.item-list .items {}
.item-list .items .item {transition: transform .3s ease-out;}
.item-list .items .item:hover {transform:translate(0,-5px);}
.item-list .items .item a {width:100%;}
.item-list .items .item .img {position:relative;display:inline-block;width:100%; overflow:hidden;}
.item-list .items .item .img img {    
    border-radius: 0px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;

    aspect-ratio: 1 / 1.35;max-width:100%;width:100%;background:#171717;}
/*
.item-list .items .item .title {font-size:16px;color:#fff;max-height:42px;overflow:hidden;}
.item-list .items .item .category {font-size:14px;width:100%;line-height:24px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#aaa;margin-top:5px;}
*/
.item-list .items .item .title {
    /* font-size:16px;color:#fff;max-height:42px;overflow:hidden;margin-top:5px; text-align: center; */
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
    margin-top: 5px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.3em * 2);
    /* padding: 0px 5px */
}
.item-list .items .item .category {font-size:14px;width:100%;line-height:24px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#aaa;}
.item-list .items .item .playtype {font-size:14px;width:100%;line-height:20px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#f33;}

.item-list .items .item .btn {}
.item-list .items .item .btn a {font-size:14px;width:100%;line-height:24px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#aaa;}

.item-list .items .item .img .fav {font-size:14px;width:auto;color:#fff;display:flex;position:absolute;right:5px;bottom:5px;align-items:center;}
.item-list .items .item .img .fav i {font-size:14px;margin-right:4px;color:#fff;}
.item-list .items .item .fav {font-size:14px;line-height:25px;width:100%;color:#aaa;display:flex;}
.item-list .items .item .fav i {font-size:14px;margin-right:4px;margin-top:1px;color:#fff;}
.item-list .items .item .fav i:nth-child(2) {margin-left:8px;}
.item-list .items .item > .progress {height:5px;width:100%;margin-top:5px;}
.item-list .items .item > .progress {appearance: none;border-radius:4px;;}
.item-list .items .item > .progress::-webkit-progress-bar {background:#444;border-radius:4px;box-shadow: inset 3px 3px 10px #ccc;}
.item-list .items .item > .progress::-webkit-progress-value {border-radius:4px;background: #a31717;}


.item-list .items .list {
    border :1px solid white;
    border-radius: 4px;
}

.item-list .items .list .btn {font-size:14px;line-height:25px;width:100%;color:#aaa;display:flex;margin-top:2px; flex-direction: column; padding: 0px 10px;}
.item-list .items .list .btn .playlist_input {
          font-family: "Pretendard-Regular";
    cursor: pointer;
    color: #ff3131;
    /* padding: 12px 20px; */
    font-size: 14px;
    border: 1px solid #7b7b7b;
    background: black;
    white-space: nowrap;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.item-list .items .list .btn .playlist_input span {
    font-size: 14px;
    color: white;
    margin-left: 2px;
}
.item-list .items .list .btn i {font-size:14px;margin-right:4px;margin-top:1px;color:#fff;}
.item-list .items .list .btn i:nth-child(2) {margin-left:8px;}

.btnDelete{background: #4e4e4e;width: 100%;border-radius: 5px;text-align: center;color: #fff; opacity: 0.9; margin-bottom: 10px;}

/* 리스트 아이템 가로형 */
.item-list {width:100%;}
.item-list .mypage {display:block;margin-top:20px;}
.item-list .mypage .img-noimg {width:154px;aspect-ratio:1/1.26;}
.item-list .mypage .item-line {transition: transform .3s ease-out;display:flex;overflow:hidden;}
.item-list .mypage .item-line + .item-line {margin-top:15px;}
.item-list .mypage .item-line:hover {transform:translate(0,-5px);}
.item-list .mypage .item-line
.item-list .mypage .item-list .img {position:relative;display:block;min-width:200px;}
.item-list .mypage .item-line .img img {border-radius:5px;aspect-ratio: 1 / 1.3;height:200px;}
.item-list .mypage .item-line .right {width:100%;margin-left:20px;display:flex;}
.item-list .mypage .item-line .right .center {font-size:14px;color:#bbb;}
.item-list .mypage .item-line .right .center div + div {margin-top:15px;}
.item-list .mypage .item-line .right .center .title {font-size:16px;width:100%;font-weight:bold;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#fff;margin-bottom:20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.item-list .mypage .item-line .right .center .title .num {color:#f33;}
.item-list .mypage .item-line .right .center .category {font-size:14px;width:100%;line-height:24px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#bbb;}
.item-list .mypage .item-line .right .center .playtype {font-size:14px;width:100%;line-height:20px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#f33;}
.item-list .items .item-line .right .center .func a + a {margin-left:10px;}
.item-list .mypage .item-line .right .center .func a:hover {color:#fff;}
.item-list .mypage .item-line .right .center .fav {font-size:14px;line-height:25px;width:100%;color:#aaa;display:flex;margin-top:2px;}
.item-list .mypage .item-line .right .center .fav i {font-size:14px;margin-right:4px;margin-top:1px;color:#fff;}
.item-list .mypage .item-line .right .center .fav i:nth-child(2) {margin-left:8px;}

/* 공지사항 리스트  */
.item-list {width:100%;}
.item-list .notice {display:block;margin-top:20px;}
.item-list .notice {}
.item-list .notice .item {width:100%;height:60px;display:flex;color:#fff;border-bottom:solid 1px #333;}
.item-list .notice .item a {font-size:14px;color:#fff;display:flex;align-items:center;justify-content:center;width:100%;}
.item-list .notice .item:hover {background:#333;}
.item-list .notice .item a .no {width:80px;text-align:center;}
.item-list .notice .item a .title {}
.item-list .notice .item a .reg_dt {margin-left:auto;text-align:center;width:180px;}

.item .img .recomand_right_red { 
    /* z-index: 10;position: absolute;color: #fff;top: 0px;font-weight: bold;width: 62px;text-align: center;right: 0px;background: #a31717;font-size: 8pt;
    padding: 6px;
    border-radius: 30px; */
    position: absolute;
    top: 18px;
    right: -50px;
    width: 150px;
    background-color: rgb(163, 23, 23, 0.8);
    color: white;
    text-align: center;
    transform: rotate(45deg);
    font-size: 13px;
    padding: 5px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.item .img .recomand_right_blue { 
    /* z-index: 10;position: absolute;color: #fff;top: 0px;font-weight: bold;width: 62px;text-align: center;right: 0px;background: #0d2187;font-size: 8pt;
    padding: 6px;
    border-radius: 30px; */
    position: absolute;
    top: 18px;
    right: -50px;
    width: 150px;
    background-color: rgb(19, 72, 213, 0.8);
    color: white;
    text-align: center;
    transform: rotate(45deg);
    font-size: 13px;
    padding: 5px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}



/* 상세화면 */
.wrap-detail {font-size:14px;color:#fff;}
.wrap-detail .empty-video-container {height:480px;display:flex;align-items:center;justify-content:center;background:#121212;}
.wrap-detail section + section {padding:25px 0px;}
.wrap-detail section.no-padding {padding:0px;}
.wrap-detail section.navigation {display:flex;height:60px;align-items:center;}
.wrap-detail section.navigation i {font-size:20px;}
.wrap-detail section.navigation .next {margin-left:auto;}
.wrap-detail section.navigation .next a {display:flex;align-items:center;justify-content:center;}
.wrap-detail section.navigation .next a i {margin-left:5px;}
.wrap-detail section.navigation .prev a {display:flex;align-items:center;justify-content:center;}
.wrap-detail section.navigation .prev a i {margin-right:5px;}
.wrap-detail section.line {border-bottom:solid 1px #333;}
.wrap-detail .play-container {width:100%;min-height:200px;display:flex;background:#ddd;margin-top:20px;margin-bottom:20px;position:relative;}

.wrap-detail .play-container .left {position:absolute;left:10px;bottom:20px;z-index:98;}
.wrap-detail .play-container .left .btn-init {background:#222;color:#aaa;padding:6px 14px;border-radius:4px;font-size:12px;border:solid 1px #444;}
.wrap-detail .play-container .left a + a {margin-left:5px;}


.wrap-detail .play-container .right {position:absolute;right:10px;top:10px;z-index:98;}
.wrap-detail .play-container .right .btn-intro {background:#222;color:#aaa;padding:6px 14px;border-radius:4px;font-size:12px;border:solid 1px #444;}
.wrap-detail .play-container .right .btn-continue {background:#222;color:#aaa;padding:6px 14px;border-radius:4px;font-size:12px;border:solid 1px #444;}
.wrap-detail .play-container .right a + a {margin-left:5px;}

.wrap-detail .add-controller {font-size:14px;display:flex;}
.wrap-detail .add-controller .left {}
.wrap-detail .add-controller .right {margin-left:auto;}
.wrap-detail .add-controller .left .btn-first {background:#222;color:#aaa;padding:9px 20px;border-radius:4px;}
.wrap-detail .add-controller .right .btn-intro {background:#222;color:#aaa;padding:9px 20px;border-radius:4px;}
.wrap-detail .add-controller .right .btn-continue {background:#222;color:#aaa;padding:9px 20px;border-radius:4px;}

.wrap-detail .item-title {display:flex;}
.wrap-detail .item-title .left {display:block;}
.wrap-detail .item-title .left div{width:100%;}
.wrap-detail .item-title .left .subject {font-size:20px;font-weight:bold;}
.wrap-detail .item-title .left .datetime {margin-top:4px;color:#aaa;}
.wrap-detail .functoin {margin-left:auto;display:flex;align-items:center;justify-content:center;height:80px;border-bottom:solid 1px #333;}
.wrap-detail .functoin div {color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;width:60px;cursor:pointer;}
.wrap-detail .functoin div + div {margin-left:14px;}
.wrap-detail .functoin div .text {display:block;width:100%;margin-top:4px;}
.wrap-detail .functoin div i {font-size:22px;margin-right:5px;display:block;width:100%;}
.wrap-detail .functoin div span {margin-left:2px;}
.wrap-detail .functoin div.active i {color:#f33;}

.wrap-detail .item-contents {}
.wrap-detail .item-contents .subject {font-size:20px;font-weight:bold;}
.wrap-detail .item-contents .contents {padding:20px 0px;font-size:14px;color:#aaa;}
.wrap-detail .item-contents .contents span + span {margin-left:5px;}

.wrap-detail .item-thumbnail {}
.wrap-detail .item-thumbnail .subject {font-size:20px;font-weight:bold;}
.wrap-detail .item-thumbnail .subject .select-wrap {max-width:300px;}
.wrap-detail .item-thumbnail .thumbnail-list {display:grid;grid-template-columns: repeat(2, 1fr);gap: 10px;margin-top:20px;}
.wrap-detail .item-thumbnail .thumbnail-list .item {display:flex;cursor:pointer;border:solid 1px rgba(0,0,0,0);}
.wrap-detail .item-thumbnail .thumbnail-list .item:hover {border:solid 1px #ddd;box-sizing:border-box;}
.wrap-detail .item-thumbnail .thumbnail-list .item .right {display:block;padding-left:20px;}
.wrap-detail .item-thumbnail .thumbnail-list .item .right .title {font-size:15px;font-weight:bold;margin-top:5px;}
.wrap-detail .item-thumbnail .thumbnail-list .item.active .right .title {color:#f33;}
.wrap-detail .item-thumbnail .thumbnail-list .item .right .contents {margin-top:15px;color:#aaa;font-size:13px;}
.wrap-detail .item-thumbnail .thumbnail-list .item .img img {width:200px;border-radius:8px;}

.wrap-detail .add-videos .add-list {margin-top:20px;}
.wrap-detail .add-videos .subject {font-size:20px;font-weight:bold;}

.wrap-detail .item-cast {}
.wrap-detail .item-cast .subject {font-size:20px;font-weight:bold;}
.wrap-detail .item-cast .cast-list {margin-top:20px;overflow-x: auto;white-space: nowrap;margin-bottom:10px;display: grid;grid-gap: 10px;overflow-x: scroll;grid-template-columns: repeat(auto-fill,minmax(140px,1fr));grid-auto-flow: column;grid-auto-columns: minmax(140px,1fr);overflow-x: auto;}
.wrap-detail .item-cast .cast-list::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
.wrap-detail .item-cast .cast-list .item {}
.wrap-detail .item-cast .cast-list .item .right {display:block;}
.wrap-detail .item-cast .cast-list .item .bottom .title {font-size:15px;font-weight:bold;margin-top:5px;}
.wrap-detail .item-cast .cast-list .item .bottom .contents {margin-top:10px;color:#aaa;font-size:13px;}
.wrap-detail .item-cast .cast-list .item .top img {width:200px;border-radius:8px;max-width:100%;}

.wrap-detail .item-comment {}
.wrap-detail .item-comment .subject {font-size:20px;font-weight:bold;}
.wrap-detail .item-comment .comment-write {display:block;margin-top:20px;padding:15px;border-radius:10px;border:solid 1px #444;}
.wrap-detail .item-comment .comment-write .profile {display:flex;width:100%;}
.wrap-detail .item-comment .comment-write .profile .name {line-height:40px;margin-left:10px;}
.wrap-detail .item-comment .comment-write .bottom {width:100%;margin-top:10px;text-align:right;padding-left:60px;}
.wrap-detail .item-comment .comment-write .bottom textarea{width:100%;border:none;border-bottom:solid 1px #444;background:none;color:#ccc;font-size:14px;}
.wrap-detail .item-comment .comment-write .bottom .btn-cmt {background:#000;color:#fff;padding:10px 20px;display:inline-block;margin-top:10px;margin-left:10px;}
.wrap-detail .item-comment .comment-write .bottom .btn-cancel{background:#f33;color:#fff;padding:10px 20px;display:inline-block;margin-top:10px;}
.wrap-detail .item-comment .comment-list {display:block;clear:both;margin-top:20px;}
.wrap-detail .item-comment .comment-list .item {display:block;}
.wrap-detail .item-comment .comment-list .item + .item {margin-top:15px;}
.wrap-detail .item-comment .comment-list .item .bottom {padding-left:40px;}
.wrap-detail .item-comment .comment-list .item .bottom .title {font-size:15px;font-weight:bold;margin-top:5px;}
.wrap-detail .item-comment .comment-list .item .bottom .contents {margin-top:10px;color:#aaa;font-size:13px;}
.wrap-detail .item-comment .comment-list .item .bottom .func {margin-top:10px;font-size:12px;}
.wrap-detail .item-comment .comment-list .item .bottom .func a {align-items:center;display:inline-flex;}
.wrap-detail .item-comment .comment-list .item .bottom .func a i {margin-right:4px;}
.wrap-detail .item-comment .comment-list .item .bottom .func a + a {margin-left:10px;}
.wrap-detail .item-comment .comment-list .item .left {display:flex;}
.wrap-detail .item-comment .comment-list .item .left img {width:40px;height:40px;border-radius:40px;}
.wrap-detail .item-comment .comment-list .item .left .name {font-size:13px;margin-top:2px;margin-left:8px;line-height:40px;}
.wrap-detail .item-comment .comment-list .item .left .name .datetime {color:#999;margin-left:10px;}

.wrap-detail .item-comment .comment-list .item .item-reply {display:none;margin-top:20px;margin-left:30px;padding:15px;border-radius:10px;border:solid 1px #444;}
.wrap-detail .item-comment .comment-list .item.left-margin {padding-left:40px;}
.wrap-detail .item-comment .comment-list .item .item-reply .profile {display:flex;width:100%;}
.wrap-detail .item-comment .comment-list .item .item-reply .profile img {width:40px;height:40px;border-radius:40px;margin-right:10px}
.wrap-detail .item-comment .comment-list .item .item-reply .bottom {width:100%;margin-top:10px;text-align:right;padding-left:60px;}
.wrap-detail .item-comment .comment-list .item .item-reply .bottom textarea{width:100%;border:none;border-bottom:solid 1px #444;background:none;color:#ccc;font-size:14px;}
.wrap-detail .item-comment .comment-list .item .item-reply .bottom .btn-cmt {background:#000;color:#fff;padding:10px 20px;display:inline-block;margin-top:10px;margin-left:10px;}
.wrap-detail .item-comment .comment-list .item .item-reply .btn-cancel{background:#f33;color:#fff;padding:10px 20px;display:inline-block;margin-top:10px;}

/* 버젼2 */
/* .wrap-detail .main-info {background:#232323;padding:25px;border-radius:10px;position:relative;} */
.wrap-detail .main-info {background:#232323;padding:10px 25px 25px 25px;border-radius:10px;position:relative;}
.wrap-detail .main-info .date span {font-size:13px;background:#121212;padding:5px 10px;border-radius:5px;display:inline-block;}
/* 추가 수정 */
/* .wrap-detail .main-info .title {font-size:24px;font-weight:bold;margin-top:10px;} */
/* .wrap-detail .main-info .title {font-size:2rem;font-weight:bold; margin-bottom:10px;} */
/* .wrap-detail .main-info .add-info {margin-top:8px;font-size:14px;}
.wrap-detail .main-info .add-info div {display:inline-block;font-size:14px;}
.wrap-detail .main-info .add-info div .star-count {}
.wrap-detail .main-info .add-info .auto {cursor: pointer;}
.wrap-detail .main-info .add-info div i {margin-right:2px;}
.wrap-detail .main-info .add-info div + div {margin-left:10px;}
.wrap-detail .main-info .add-info div.score i {color:#FABC3F;}
.wrap-detail .main-info .add-info div.views i {color:#DAD4B5;}
.wrap-detail .main-info .desc {margin-top:10px;font-size:12px;}
.wrap-detail .main-info .btns {margin-top:15px;display:flex;max-width:450px;}
.wrap-detail .main-info .btns .btn {display:none;width:100%;}
.wrap-detail .main-info .btns .btn a {  
    width: 100%;
    max-width: 500px;
    background: #a31717;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;} */
/* .wrap-detail .main-info .btns .btn a i {margin-left:10px;}
.wrap-detail .main-info .btns .auto {width:60px;height:42px;display:inline-flex;align-items: center;justify-content: center;font-size:15px;background:#333;border-radius:5px;font-weight:bold;cursor:pointer;}
.wrap-detail .main-info .btns .auto.disable {color:#999}
.wrap-detail .main-info .btns .cc {width:60px;height:42px;display:inline-flex;align-items: center;justify-content: center;font-size:15px;background:#333;margin-left:10px;border-radius:5px;font-weight:bold;cursor:pointer;}
.wrap-detail .main-info .btns .cc.disable {color:#999}
.wrap-detail .main-info .quick-menu {position:absolute;right:10px;top:10px;}
.wrap-detail .main-info .quick-menu a {width:38px;height:38px;display:inline-flex;align-items: center;justify-content: center;background:#a31717;border-radius:5px;}
.wrap-detail .main-info .quick-menu a.disable {background:#292929;color:#454545;}

.wrap-detail .main-info .process {width:100%;display:flex;align-items:center;height:30px;max-width:450px; }
.wrap-detail .main-info .process span {display:inline-block;width:65px;text-align:right;font-size:12px;font-weight:bold; margin-right: 3px;}
.wrap-detail .main-info .process .progress {height:6px;width:100%;}
.wrap-detail .main-info .process .progress {appearance: none;border-radius:10px;;}
.wrap-detail .main-info .process .progress::-webkit-progress-bar {background:#ddd;border-radius:10px;box-shadow: inset 3px 3px 10px #ccc;}
.wrap-detail .main-info .process .progress::-webkit-progress-value {border-radius:10px;background: #a31717;} */



/*  
.wrap-detail .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
}

.wrap-detail .popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 600px;
    height: 700px;
    border-radius: 12px;
    border: 1px solid #a31717;
    padding: 20px;
    z-index: 1000;

}


.wrap-detail .popup-content .left {
    margin-top:40px;
    display: flex;
    flex-direction: column;
    gap: 10px; 
    align-items: center; 
    text-align: center;
    h2 {
        font-size: 22px;
        font-weight:600;
        padding: 4px;
    }
    img {
        border-radius: 12px; width:100%; border:1px solid grey;
    }
}




.wrap-detail .popup-content .right {
    margin-top:40px;
    display: flex;
    flex-direction: column;
    gap: 10px; 
    align-items: center; 
    text-align: center;
    input {
        outline: none;
        width: 80%;
        border-radius: 6px;
        height: 30px;
        padding:10px;
    }
}

.wrap-detail .popup-content .right .top {
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width:80%;
}

.wrap-detail .popup-content .right .list-wrapper {
    margin-top:10px;
    width: 100%;
    max-height: 500px; 
    overflow-y: auto; 
    padding: 0 12px; 
    border-radius: 6px; 
    scrollbar-width: thin; 
    scrollbar-color: #a31717 transparent; 
}

.wrap-detail .popup-content .right .list{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-top: 8px;
}
.wrap-detail .popup-content .right .baro {
    display:none;
}
.wrap-detail .popup-content .right .back {
    display:none;
}  */

.wrap-detail .close-btn {
    
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
}



.wrap-detail .main-info .functoin {margin-left:auto;display:flex;align-items:center;justify-content:center;}
.wrap-detail .main-info .functoin div {color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;width:60px;cursor:pointer;}
.wrap-detail .main-info .functoin div + div {margin-left:14px;}
.wrap-detail .main-info .functoin div .text {display:block;width:100%;margin-top:4px;}
.wrap-detail .main-info .functoin div i {font-size:22px;margin-right:5px;display:block;width:100%;}
.wrap-detail .main-info .functoin div span {margin-left:2px;}
.wrap-detail .main-info .functoin div.active i {color:#f33;}

.wrap-detail .video-tabs {padding:0px;}
.wrap-detail .video-tabs .tabs {display:flex;padding:0px 10px;height:60px;align-items: center;border-bottom:solid 1px #333;}
.wrap-detail .video-tabs .tabs a {font-size:15px;display:inline-flex;padding:8px 15px;}
.wrap-detail .video-tabs .tabs a.active {background:#232323;border-radius:10px;}
.wrap-detail .video-tabs .tabs a + a {margin-left:5px;}

.wrap-detail .video-tabs .tab-inner {display:none;margin-top:10px;padding:10px;}
.wrap-detail .video-tabs .tab-inner.active {display:block;margin-top:10px;padding:10px;}
.wrap-detail .video-tabs .tab-episode {}
.wrap-detail .video-tabs .tab-episode .item {display:flex;border-bottom:solid 1px #333;padding-bottom:10px;padding-top:10px;cursor:pointer;padding-left:10px;}
.wrap-detail .video-tabs .tab-episode .item.active {background:#333;}
.wrap-detail .video-tabs .tab-episode .item .img {position:relative;}
.wrap-detail .video-tabs .tab-episode .item .img img {width:200px;border-radius:10px;aspect-ratio:2/1.2;}/*aspect-ratio : 3.7/2 */
.wrap-detail .video-tabs .tab-episode .item + .item {}
.wrap-detail .video-tabs .tab-episode .item .right {margin-left:10px;margin-top:10px;}
.wrap-detail .video-tabs .tab-episode .item .right .title {font-size:15px;font-weight:bold;margin-top:0px;}
.wrap-detail .video-tabs .tab-episode .item .right .contents {margin-top:5px;color:#ddd;}


.wrap-detail .video-tabs .tab-episode .tab-item-title { display: grid;white-space: nowrap;width: 100%;flex-direction: column;grid-template-columns: repeat(2, 1fr); font-size:16px;  margin-bottom: 15px; }
.wrap-detail .video-tabs .tab-episode .tab-item-title .item-title {  }
.wrap-detail .video-tabs .tab-episode .tab-item-title .item-title .point { color:#f33; }
.wrap-detail .video-tabs .tab-episode .tab-item-title .item-sort { text-align:right }


.wrap-detail .video-tabs .tab-short {}
.wrap-detail .video-tabs .tab-short .item {border-bottom:solid 1px #333;cursor:pointer;padding:10px;}
.wrap-detail .video-tabs .tab-short .item.active {background:#333;}
.wrap-detail .video-tabs .tab-short .item + .item {}
.wrap-detail .video-tabs .tab-short .item .info {display:flex;}
.wrap-detail .video-tabs .tab-short .item .info .img img {width:200px;border-radius:10px;}
.wrap-detail .video-tabs .tab-short .item .info .right {margin-left:10px;margin-top:0px;}
.wrap-detail .video-tabs .tab-short .item .info .right .title {font-size:15px;font-weight:bold;margin-top:0px;}
.wrap-detail .video-tabs .tab-short .item .contents {margin-top:5px;color:#ddd;width:100%;display:none;}

.playlist-thumbnail {
    transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
}




/* 마이페이지 */
/* .mypage-section {padding:20px;background:#000;border-radius:5px;color:#fff;} */
.mypage-section {padding:0 0 0 0;background:#000;border-radius:5px;color:#fff;}
.mypage-section h3 {margin:0px;color:#fff;font-size:16px;padding:16px 15px;border-radius:5px;border-bottom:solid 1px #454545;background:#333;display:flex;height:54px;align-items: center;}
.mypage-section h3 .btnBack {color:#fff;font-size:20px;width:30px;}
.mypage-section h3 .count {margin-left:10px;}
.mypage-section h3 .count strong{margin-right:1px; color:gold;}

.mypage-section > .user-info > .img {text-align:center;padding-top:20px;padding-bottom:10px;width:100%;}
.mypage-section > .user-info > .img .user-img {width:80px;height:80px;border-radius:60px;border:solid 1px #ddd;}
.mypage-section > .user-info > .img .no-img {width:80px;height:80px;border-radius:60px;border:solid 1px #ddd;display:inline-flex;align-items: center;justify-content: center;background:#eee;}
.mypage-section > .user-info > .img .no-img i {font-size:48px;color:#ccc;}
.mypage-section > .user-info > .img .title {font-size:14px;margin-top:10px;color:#fff;font-weight:bold;}
.mypage-section > .user-info > .img .logout {color:#f33;font-size:12px;position:absolute;right:10px;top:10px;}

.mypage-section .desc-info { display: grid;grid-template-columns: repeat(2, 50%);margin-top:10px;background:#454545;}
.mypage-section .desc-info li {display:inline-flex;height:50px;align-items: center;border:solid 1px #232323;margin-top:-1px;margin-left:-1px;padding-left:10px;font-size:13px;}
.mypage-section .desc-info li.desk {display:inline-flex;}
.mypage-section .desc-info li .title {width:60px;display:inline-flex;font-weight:900;color:#fff;}
.mypage-section .desc-info li .desc {color:#ccc;}
.mypage-section .desc-info li .desc a {background:#333;padding:4px 10px;margin-left:10px;border-radius:5px;color:#fff;font-size:12px;}
.mypage-section .desc-info li .desc a i {margin-right:4px;}
.mypage-section .my-list {margin-top:20px;display: grid;grid-template-columns: repeat(2, 50%);grid-gap:10px 5px;}
.mypage-section .my-list li {height:50px;box-sizing:border-box;display:inline-flex;width:calc(100% - 5px);background:#333;border-radius:5px;}
.mypage-section .my-list li a {font-size:14px;color:#ddd;height:100%;align-items: center;padding:14px;display:inline-flex;width:100%;}
.mypage-section .my-list li a .arrow {margin-left:auto;}
.mypage-section .my-list li a .left {margin-right:5px;color:#fff;font-size:14px;}
.mypage-section .h3_title {font-size:16px;font-weight:bold;color:#333;margin-top:20px;display:none;}
.mypage-section .more {width:100px;display:inline-flex;height:30px;background:#333;color:#fff;align-items: center;justify-content: center;border:solid 1px #232323;border-top:none;font-size:12px;display:none;border-radius:0px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.mypage-section .more i {margin-left:4px;}
.mypage-section .point-list {margin-top:10px;}
.mypage-section .point-list table {width:100%;}
.mypage-section .point-list table tr th  {height:46px;border-bottom:solid 1px #bbb;color:#fff;border-top:solid 2px #eee;text-align:center;font-size:13px;background:#333;}
.mypage-section .point-list table tr td {padding:15px 10px;height:50px; font-size:13px;color:#ccc;font-weight:normal;border-bottom:solid 1px #eee;padding:5px;text-align:center;}
.mypage-section .point-list table tr td a.btn-mng {padding:4px 10px;background:#333;color:#fff;border-radius:5px;}
.mypage-section .point-list table tr td a.btn-del {padding:4px 10px;background:#f33;color:#fff;border-radius:5px;margin-left:5px;}
/* 20241121 쿠폰발급 리스트 css 추가 */
.mypage-section .coupon-list {margin-top:10px;}
.mypage-section .coupon-list table {width:100%;}
.mypage-section .coupon-list table tr th  {height:46px;border-bottom:solid 1px #bbb;color:#fff;border-top:solid 2px #eee;text-align:center;font-size:13px;background:#333;}
.mypage-section .coupon-list table tr td {padding:15px 10px;height:50px; font-size:13px;color:#ccc;font-weight:normal;border-bottom:solid 1px #eee;padding:5px;text-align:center;}
.mypage-section .coupon-list table tr td a.btn-mng {padding:4px 10px;background:#333;color:#fff;border-radius:5px;}
.mypage-section .coupon-list table tr td a.btn-del {padding:4px 10px;background:#f33;color:#fff;border-radius:5px;margin-left:5px;}


/* 전체삭제 */
.mypage-section .functoin {margin-left:auto;display:flex;align-items:center;justify-content:right;margin-top:0;}
.mypage-section .functoin div {background:#464545;color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;cursor:pointer;border-radius:3px;padding: 5px;}
.mypage-section .functoin div + div {margin-left:14px;}
.mypage-section .functoin div .text {display:block;width:100%;margin-top:4px;}
.mypage-section .functoin div i {font-size:22px;margin-right:5px;display:block;width:100%;}
.mypage-section .functoin div span {margin-left:2px;}
.mypage-section .functoin div.active i {color:#f33;}
.mypage-section .functoin a {background:#333;color:#bbb;font-size:13px;align-items:center;display:inline-block;text-align:center;cursor:pointer;border-radius:3px;padding: 5px;}


/* 전체삭제 */
.mypage-section .history {margin-left:auto;display:flex;align-items:center;justify-content:right;margin-top:-48px;}
.mypage-section .history div {
    margin-right:3px;
    background:#990c0c;
    color:#fff;
    font-size:13px;
    align-items:center;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    border-radius:5px;
    padding: 8px 10px;
}

.mypage-section .history div + div {margin-left:14px;}
.mypage-section .history div .text {display:block;width:100%;margin-top:4px;}
.mypage-section .history div i {font-size:22px;margin-right:5px;display:block;width:100%;}
.mypage-section .history div span {margin-left:2px;}
.mypage-section .history div.active i {color:#f33;}
.mypage-section .history a {
    background:#333;
    color:#bbb;
    font-size:13px;
    align-items:center;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    border-radius:3px;
    padding: 5px;
}
.mypage-section .history .btnAllDelete {}

@media screen and (max-width: 1150px) { 
    .videos-section {margin-top:80px; }
}


@media screen and (max-width: 680px) { 
    .videos-section {margin-top:0px; }
}

@media screen and (max-width: 460px) { 
    .item-list .items .list .btn .playlist_input span {
        font-size:12px;
    }
    .item-list .items .list .btn .playlist_input {
        font-size: 12px;
    }
}
/* 폴드 접었을때 */
@media screen and (max-width: 360px) {
    #contents {
    /* margin: 10px 10px 40px 10px; */
        margin: 0 auto;
        padding: 0;
        /* width:100%; */
    }

    .item .img .recomand_right_red { 
        right: -57px;
        width: 150px;
        font-size: 6px;
        top: 7px;
    }

    .item .img .recomand_right_blue { 
        right: -57px;
        width: 150px;
        font-size: 6px;
        top: 7px;
    }

    .item-list .items {display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;}

    .item-list .items .item .title { font-size: 14px; }
    .item-list .items .item .category { font-size: 13px; }
    .item-list .items .item .fav { font-size: 13px; line-height: 20px; }

    .mypage-section h3 .btnBack {
        color: #fff;
        font-size: 20px;
        width: 20px;
    }
    .mypage-section h3 .count strong{
        margin-right:2px;
    }
    .mypage-section .history div {
        
    }
}

@media (min-width: 681px) and (max-width: 720px) {
    .mypage-section {
        margin-top: 90px;
    }
}


/* 모바일 ( 폴드 펼쳤을때 포함 ) */
@media screen and ( min-width : 361px ) and ( max-width : 720px ) {
    #contents {
        margin: 0 auto;
        padding:0;
    }

    .item .img .recomand_right_red { 
        right: -57px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .item .img .recomand_right_blue { 
        right: -57px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }
    .item-list .items {display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;}
    
    .item-list .items .item .title { font-size: 16px; }
    .item-list .items .item .category { font-size: 13px; }
    .item-list .items .item .fav { font-size: 13px; line-height: 20px; }
    .img-noimg {display:none;}

}

/* PC */
@media screen and ( min-width : 1024px ) {
    #contents {
        margin: 0 auto;
    }
    .item-list .items {display:grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 10px;}
}