@charset "UTF-8";

@font-face {
    font-family: 'GMS_Bold';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/GmarketSansTTFBold.ttf') format('truetype');
  }

  @font-face {
    font-family: 'GMS_Light';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/GmarketSansTTFLight.ttf') format('truetype');
  }

  @font-face {
    font-family: 'GMS_Medium';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/GmarketSansTTFMedium.ttf') format('truetype');
  }

  @font-face {
    font-family: 'BlackHansSans';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/BlackHanSans-Regular.ttf') format('truetype');
  }


  @font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


  @font-face {
    font-family: 'SB_B';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/SB_B.ttf') format('truetype');
  }

  @font-face {
    font-family: 'SB_L';
    font-style: normal;
    font-weight: normal;
    src: url('/resource/shop/mobile/font/SB_L.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


/* 아이폰 */
@supports (-webkit-touch-callout: none) { 
     #searchform input[type="text"] {
        font-size:16px;
        box-sizing: border-box;
     }
     
    input[type="text"],textarea,select {
        font-size:16px;
    }
    #wrap .search-var input {
        font-size:20px;
    }
}
/* 아이폰가로모드  */

/* @supports (-webkit-touch-callout: none) and (orientation: landscape) { 
    .swiper-slide .title {font-size:12px;}
}
 */



.ott_menu .home-item a {
    font-weight: bold;   /* 글자 굵게 */
    color: #FBD339;      /* 노란색 느낌 */
    display: inline-block;
 
}




.no-data {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    padding: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.no-data .want {
    color: white;
    font-size: 14px;
    width: 110px;
    background: #a31717;
    /* border: 1px solid grey; */
    border-radius: 4px;
    padding: 8px;
    margin-top: 10px;
}
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background:#000;
    font-family: "Pretendard-Regular";
        /* font-family: 'GmarketSansMedium'; */
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

* {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

img {

    height: auto;
    vertical-align: top;
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

form {
    display: inline;
}

input {
    font-family: inherit;
    outline:none;
}
input[type]::-ms-clear {
    display: none;
    opacity: 0;
    visibility: hidden;
}
input[type]::-ms-reveal {
    display: none;
    opacity: 0;
    visibility: hidden;
}
input[type]::-webkit-search-cancel-button {
    display: none;
}

select {
    font-family: inherit;
}

textarea {
    font-family: inherit;
    resize: vertical;
    outline:none;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    outline: 0;
}

embed, iframe, object {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}
body { 
  
    /* 기본적으로 텍스트 선택 가능 */
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    width:100%;
    overflow-x:hidden;        
}

/* 모바일 및 터치 디바이스에서 텍스트 선택 방지 */
@media screen and (max-width:1024px) {
    body {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
}

body::-webkit-scrollbar {width:10px;background-color:rgba(255,255,255,0.5);}
body::-webkit-scrollbar-thumb { background-color:#990c0c;}
input {outline: none;}
ul,li{list-style:none;}
#header>div.right-nav.right_menu_show>div>h4>div>li.btn-logout{
    background-color: #990c0c;
}

.hidden {display:none;}


/* 모바일 검색부분 */

.search-content {
    display: none;
}


/* 전체 */
#wrap {position:relative;width:100%;margin:0 auto;}
#wrap:after {display:block;visibility:hidden;clear:both;content:""}

.floating-community-banner {
    display:none;
}
  
/*헤더*/
#header {width:100%;z-indeX:9;height:90px;width:100%;left:0px;right:0px;background:#000; position: fixed; }
#header .inner {display:flex;align-items: center;margin:0 auto;max-width:90%;height:100%;font-size:20px;font-weight:bold;color:#fff;position:relative;font-family: 'GmarketSansMedium';}
#header .inner a {display:flex;align-items: center; }
#header .inner a.logo {
    width: 130px;
    flex-shrink: 0;
    margin-top: -10px;
}
#header .inner a.logo img {width:120%; margin-bottom: -10px;}
#header .inner a.logo .title1 {font-size:28px;font-weight:bold;text-shadow:2px 2px 2px #898989;color:#fff;}
#header .inner a.logo .title2 {color:#a31717;font-size:28px;font-weight:bold;text-shadow:1px 1px 1px #333;margin-left:4px;}

#header .inner > .menu-end .menu { 
    font-size: 1rem;

    margin-left: 14px;
    color:#fff;
    background-color: #1c2024;
    border-radius: 12px;
    padding:12px;cursor:pointer;
    white-space: nowrap;
    img {
        margin-top: 4px;
        margin-left: 8px;
        width:10px;
        height: 7px;
    }
}

#header .inner > .menu-end .menu .sub-menu {
    white-space: normal; 
}

#header .inner > .menu-end .sub-menu-list:hover > .sub-menu {display:block;}
#header .inner > .menu-end .menu .sub-menu {position:absolute;top:65px; right:42px; width:200px;background:#232323;z-index:3;display:none; border-radius: 12px;}
#header .inner > .menu-end .menu .sub-menu li.sub-item {display:inline-block;width:100%;font-size:12px;font-weight:normal;line-height:36px;padding-left:15px;}
#header .inner > .menu-end .menu .sub-menu li.sub-item:hover {background:#444;}
#header .inner > .menu-end .menu .sub-menu li.sub-item {color:white;}
#header .inner > .menu-end .menu .sub-menu li.guidline {height:1px;background:#444;}

.menu-close { color: #fff;padding: 10px;background: #a31717;width: 120px;float: right;margin-top: 20px; cursor:pointer; border-radius: 8px; }

/* OTT 호버 */
.platform_ico {
    position: relative;
    padding:0 8px;
  
}

#footer_wrap .footer ul { 
    gap:50px; 
}


.platform_ico.active{
    color:#fff;
    font-size:20px;
  
}


.platform_ico .ott_menu {
    display: none;
    /* 기본적으로 숨김 */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    z-index: 9999;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.7);
    gap: 10px;
    /* 요소 간격 */
    width: 500px;
    /* 서브메뉴의 총 너비 */
    color:hsla(0, 0%, 100%, .65);

}

  /* 마우스 오버 시 서브메뉴 표시 */
  .platform_ico:hover .ott_menu {
    display: flex !important;
    /* flex 레이아웃 */
    flex-wrap: wrap;
    /* 줄바꿈 활성화 */
    justify-content: flex-start;
    /* 왼쪽 정렬 */
}


/* 서브메뉴 항목 스타일 */
.platform_ico .ott_menu li {
    text-align: center;
    padding: 8px 5px;
    /* 항목 간격 */
    border-radius: 5px;
    transition: background-color 0.3s;
    width: calc(25% - 10px);
    /* 한 줄에 4개 */
    font-size: 14px;
    /* 글자 크기 */
    line-height: 0.2;
    /* 줄간 높이 */
}


.platform_ico .ott_menu li:hover {
    color:#fff;
   
}



.platform_ico .ya_menu {
    display: none;
    position: absolute;
    top: 95%; 
    left: 0;
    background-color: #333;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.platform_ico .ya_menu li {
    padding: 5px 15px;
    color: #777;
    text-align: center;
}

.platform_ico .ya_menu li:hover {
    color:red;
  
}

.platform_ico:hover .ya_menu {
    display: flex; 
}



.swpiper-gift-baner-1 { display:block; }
.swpiper-gift-baner-2 { display:block; }


/*헤더 카테고리*/
#header .inner .menu-end {margin-left: auto;margin-right:10px;height:2.6rem;display:flex;align-items: center;justify-content: center;}



.top-login-categories .carousel-items {
    margin-top: 10px;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 1vw, 18px);
    white-space: nowrap;
    width:100%;
    color:hsla(0, 0%, 100%, .65);
    margin-left: 15px;
    li{
        white-space: nowrap;
        padding:8px;
    }
    li:hover {
        padding:8px;
        color:white;
        background-color: #333;
        border-radius: 5px;
    }
 }

 /* .top-login-categories .carousel-items  */

 
#header .inner .menu-end .gift {
    img {
        width:38px;
        height: 38px;
        margin-left: 12px;
    }
}
#header .inner .menu-end .bell {
    img {
        width:36px;
        height: 36px;
        margin-left: 14px;
        cursor: pointer;
    }
}

#header .inner .menu-end .notification {
    z-index:99;
    display: none;
    position: absolute;
    background-color: white;
    width:160px;
    color: black;
    border-radius: 4px;
    border:1px solid black;
    text-align: center;
    transform: translate(-10px ,110px); 
    transition: all 0.5s ease; 
    opacity: 0;
    top:-55px;
    h4 {
        margin-top:auto;
        font-size:12px;
        border-top:1px solid #555;
        padding: 5px;
        font-weight: bold;
    }
}

#header .inner .menu-end .notification .noti_container {
    display: flex;
    flex-direction: column;
   
}
#header .inner .menu-end .notification .recent {
    border-bottom:1px solid #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    vertical-align: baseline;

    span {
        font-size:11px;
        color:#333;
        padding:8px;
        font-weight: 400;  
    }
    p {
        font-size:9px;
        color:#565656;
        padding:8px;
        font-weight: 400; 
    }
  
}

#header .inner .menu-end .notification .fiveNoti {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
        color:#555;
        font-size:10px;
        font-weight: 400;
    }
    span {
        font-size:12px;
        color:red;
    }
    
}

#header .inner .menu-end .notification.show {
    display: block;
    opacity: 1;
}

#header .inner .menu-end .notification .fiveNoti ul { list-style:none; width:100%;text-align: center; }
#header .inner .menu-end .notification .fiveNoti ul li { 
    font-size: 10pt;
    margin: 2pt;
    border-bottom: 1px solid #777;
    text-align: center;
    cursor: pointer;
    padding: 3pt 0;
    font-weight: normal;
}
#header .inner .menu-end .notification .fiveNoti ul li:last-child { 
    font-size: 10pt;
    margin: 2pt;
    border-bottom: 0px;
    text-align: center;
    cursor: pointer;
    padding: 3pt 0;
    font-weight: normal;
 }

#header .inner .menu-end a.btn-search2 img {
    width:35px;color:#fff;margin-left:12px;
}
#header .inner .menu-end a.btn-search img {width:30px;color:#fff;margin-left:12px;}

#header .inner .menu-end .point-container {}
#header .inner .menu-end .point-container img {
    width: 26px; margin-right: 10px;
}

#header .inner .menu-end a.btn-point {position:relative;}
#header .inner .menu-end a.btn-point img {}
#header .inner .menu-end a.btn-point i {font-size:28px;color:#fff;margin-left:20px;font-weight:normal;}
#header .inner .menu-end a.btn-point .point-bubble {
    display:none;
    position:absolute;
    width:100px;
    padding:10px;
    background-color:#000;
    opacity: 0.9;
    border-radius:4px;
    color:#fff;
    top:-2px;
    left:-110px;
    font-size:0.8vw;
    text-align:center;
    border:solid 1px #777;
}
#header .inner .menu-end a.btn-point .point-bubble:after {
    content:'';
    position:absolute;
    top:50%;
    right:-7px;
    opacity: 0.9;
    border-left:7px solid #000;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translateY(-50%);
}
#header .inner .menu-end a.btn-point .point-bubble:before {
    content:'';
    position:absolute;
    top:50%;
    right:-8px;
    opacity: 0.9;
    border-left:7px solid #777;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translateY(-50%);
}
#header .inner .menu-end a.btn-login {height:38px;border-radius:10px;margin-left:12px; }
#header .inner .menu-end a.btn-login :hover {
   
}
#header .inner .menu-end a.btn-login i {font-size:20px;}
#header .inner .menu-end a.btn_login img {width:24px;height:auto;border-radius:50%;}
#header .inner .menu-end a.btn-mypage {background:#000; border: 1px solid grey; 
    width:38px;height: 38px;
    img {
        width:100%;
        object-fit: cover;
    } 
}
#header .inner .menu-end a.btn-mypage i {color:#fff;}

#header .inner .menu-end .login-cont {position:absolute;right:0px;top:87px;background:#232323;width:230px;z-index:2;border:solid 1px #333;}

#header .inner .menu-end .login-cont li {height:48px;display:flex;padding-left:20px;}
#header .inner .menu-end .login-cont li a {color:#fff;font-size:13px;display:flex;width:100%;}
#header .inner .menu-end .login-cont li a i {margin-right:5px;margin-top:1px;}
#header .inner .menu-end .login-cont li + li {border-top:solid 1px #333;}
#header .inner .menu-end .login-cont li:hover {background:#333;}


#header .right-nav {
    font-family: 'GmarketSansMedium';
    background:#121212;position:absolute;top:0;text-align:center;transition: .2s ease;
    width: 40%;
    padding-top:0px;
    right: 0;
    overflow-y:auto;
    padding-bottom:100px;
    z-index: 100;
    height:100vh;
}
#header .right-nav::-webkit-scrollbar {width:5px;background-color:#999;direction:ltr;}
#header .right-nav::-webkit-scrollbar-thumb { background-color:#333;}
#header .right-nav .menu-title {
    padding-left:30px;
    line-height:60px;
    padding-top:0px;
    width:100%;
    color:#fff;
    font-weight:bold;
    text-align:left;
    border-bottom:solid 1px #222;
}
#header .right-nav .sub-cont { margin-bottom:120px; }
#header .right-nav .sub-cont .btn-login {
    font-size:14px;padding:10px 20px;
    width:100%;
    background:#a31717;
    border:solid 1px #333;
    border-radius:5px;
    color:#fff;
}
#header .right-nav .sub-cont .sub {
    background:#a31717;
    width:100%;
}
#header .right-nav .sub-cont .menu {
    width:100%;
    padding:15px;
    line-height:25px;
    border-bottom:solid 1px #222;
}
#header .right-nav .sub-cont .menu .depth1 {
    text-align:left;
    font-size:14px;
    color:#fff;
    width:100%;
    display:inline-block;
    position:relative;
    
}
#header .right-nav .sub-cont .menu .depth1 i {position:absolute;right:10px;color:#a31717;}
#header .right-nav .sub-cont .menu .depth1 i.group {color:#a31717;}
#header .right-nav .sub-cont .menu .sub-menu {display:none;padding-left:10px;margin-top:10px;}
#header .right-nav .sub-cont .menu .sub-menu li {position:relative;}
#header .right-nav .sub-cont .menu .sub-menu li a {color:#eee;font-size:12px;padding:6px 10px;border-radius:2px;background:#222;margin-top:8px;}
#header .right-nav .sub-cont .menu .sub-menu li a i {position:absolute;right:10px;color:#a31717;}
#header .right-nav .sub-cont .menu .sub-menu.active {display:block;}
#header .right-nav .sub-cont h4 {border-bottom:solid 1px #232323;padding:15px; width:100%; margin-top:0; margin-bottom:0;}
#header .right-nav .sub-cont .login-cont {border:solid 1px #333;background:#232323;border-radius:4px;}
#header .right-nav .sub-cont .login-cont li {line-height:40px;padding-left:10px; border-bottom: 1px solid #000;}
#header .right-nav .sub-cont .login-cont li a {font-size:12px;color:#ddd;}
#header .right-nav .sub-cont .login-cont li a i {margin-right:4px;margin-top:1px;}
#header .right-nav a.btn-menu {z-index: 1;
    color: #fff;
    right: 24px;
    position: absolute;
    top: 8px;
    font-size: 25pt;
}

.right_menu_show {transform: translateX(0); opacity: 1;}
.right_menu_hide {transform: translateX(100%); opacity: 0; display:none;}


/* 모바일 헤더 */
#header_mobile {
    font-family: 'GmarketSansMedium';
    display:none;position:fixed;left:0;right:0;top:0;width:100%;padding:10px 10px;background:#111;z-index:99;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6 s ease-out;
    align-items: center;
    height:60px;
    opacity: 0.96;
    z-index:100;
}
#header_mobile .title1 {color:#fff;font-size:22px;font-weight:bold;text-shadow:2px 2px 2px #a31717;}
#header_mobile .title2 {color:#a31717;font-size:22px;font-weight:bold;text-shadow:1px 1px 1px #333;margin-left:4px;}
#header_mobile:after {display:block;visibility:hidden;clear:both;content:""}
#header_mobile a.logo { justify-content: left;}
#header_mobile a.logo img {width:40%; padding:10px;}
#header_mobile a {display:flex;align-items: center; justify-content: center;}
#header_mobile .menu-end {display:flex; margin-left: auto;margin-right:10px;}
#header_mobile .menu-end a.btn-search i {font-size:24px;color:#fff;margin-left:10px;}
#header_mobile .menu-end a.btn-point {position:relative;}
#header_mobile .menu-end a.btn-point img {width:26px;}
#header_mobile .menu-end a.btn-point i {font-size:28px;color:#fff;margin-left:10px;}
#header_mobile .menu-end a.btn-point .point-bubble {
    display:none;
    position:absolute;
    width:100px;
    padding:10px;
    background-color:#000;
    opacity: 0.9;
    border-radius:4px;
    color:#fff;
    top:-6px;
    left:-110px;
    font-size:12px;
    text-align:center;
    border:solid 1px #777;
}

#header_mobile .menu-end a.btn-point .point-bubble:after {
    content:'';
    position:absolute;
    top:50%;
    right:-6px;
    opacity: 0.9;
    border-left:7px solid #000;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translateY(-50%);
}
#header_mobile .menu-end a.btn-point .point-bubble:before {
    content:'';
    position:absolute;
    top:50%;
    right:-7px;
    opacity: 0.9;
    border-left:7px solid #777;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translateY(-50%);
}
#header_mobile .menu-end a.btn-menu {z-index:1;color:#fff;margin-left:10px;}
#header_mobile .menu-end a.btn-menu i {font-size:24px;color:#fff;}
#header_mobile .menu-end a.btn-mypage {background:#a31717;}
#header_mobile .menu-end a.btn-mypage i {color:#fff;}
#header_mobile .menu-end .login-cont {position:absolute;right:10px;top:65px;background:#232323;width:230px;}
#header_mobile .menu-end .login-cont li {height:48px;display:flex;padding-left:20px;}
#header_mobile .menu-end .login-cont li a {color:#fff;font-size:13px;display:flex;width:100%;}
#header_mobile .menu-end .login-cont li + li {border-top:solid 1px #333;}
#header_mobile .menu-end .login-cont li:hover {background:#333;}
#header_mobile .menu-end a.btn-menu {z-index:1;color:#fff;margin-left:10px;}
#header_mobile .menu-end a.btn-menu i {font-size:24px;color:#fff;}
#header_mobile .menu-end a.btn-mypage {background:#a31717;}
#header_mobile .menu-end a.btn-mypage i {color:#fff;}
#header_mobile .menu-end .login-cont {position:absolute;right:10px;top:65px;background:#232323;width:230px;}
#header_mobile .menu-end .login-cont li {height:48px;display:flex;padding-left:20px;}
#header_mobile .menu-end .login-cont li a {color:#fff;font-size:13px;display:flex;width:100%;}
#header_mobile .menu-end .login-cont li + li {border-top:solid 1px #333;}
#header_mobile .menu-end .login-cont li:hover {background:#333;}
#header_mobile .mobile-nav {
    background:#121212;
    opacity:1;
    position:absolute;
    top:0;
    height:100vh;
    text-align:center;
    transition: .2s ease;
    width:45%;
    /*  transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    transition:left .5s ease-in-out;*/
    padding-top:0px;
    overflow-y:auto;
    padding-bottom:150px;
    right:0;
}
#header_mobile .mobile-nav::-webkit-scrollbar {width:5px;background-color:#999;direction:ltr;}
#header_mobile .mobile-nav::-webkit-scrollbar-thumb { background-color:#333;}
#header_mobile .mobile-nav .menu-title {
    padding-left:30px;
    line-height:60px;
    padding-top:0px;
    width:100%;
    color:#fff;
    font-weight:bold;
    text-align:left;
    border-bottom:solid 1px #222;
}
#header_mobile .mobile-nav .sub-cont {padding:20px;padding-top:5px;}
#header_mobile .mobile-nav .sub-cont .btn-login {
    font-size:14px;padding:10px 20px;
    width:100%;
    background:#a31717;
    border:solid 1px #333;
    border-radius:5px;
    color:#fff;
}
#header_mobile .mobile-nav .sub-cont .sub {
    background:#a31717;
    width:100%;
}
#header_mobile .mobile-nav .sub-cont .menu {
    width:100%;
    margin-top:12px;
    padding-bottom:12px;
    line-height:25px;
    border-bottom:solid 1px #222;
}
#header_mobile .mobile-nav .sub-cont .menu .depth1 {
    text-align:left;
    font-size:14px;
    color:#fff;
    width:100%;
    display:inline-block;
    position:relative;
}
#header_mobile .mobile-nav .sub-cont .menu .depth1 i {position:absolute;right:10px;color:#a31717;}
#header_mobile .mobile-nav .sub-cont .menu .depth1 i.group {color:#a31717;}
#header_mobile .mobile-nav .sub-cont .menu .sub-menu {display:none;padding-left:10px;margin-top:10px;}
#header_mobile .mobile-nav .sub-cont .menu .sub-menu li {position:relative;}
#header_mobile .mobile-nav .sub-cont .menu .sub-menu li a {color:#eee;font-size:12px;padding:6px 10px;border-radius:2px;background:#222;margin-top:8px;}
#header_mobile .mobile-nav .sub-cont .menu .sub-menu li a i {position:absolute;right:10px;color:#a31717;}
#header_mobile .mobile-nav .sub-cont .menu .sub-menu.active {display:block;}
#header_mobile .mobile-nav .sub-cont h4 {border-bottom:solid 1px #232323;padding-bottom:15px;margin-top:15px;}
#header_mobile .mobile-nav .sub-cont .login-cont {display: flex;
        border: solid 1px #333;
        background: #232323;
        border-radius: 4px;
        flex-direction: column;
        /* align-items: center; */
        text-align: center;
        align-items: center; }
#header_mobile .mobile-nav .sub-cont .login-cont .btn-logout{background-color: #a31717;display: flex;
        background-color: #a31717;
        align-items: center;
        justify-content: center; 
    width: 100%;}
#header_mobile .mobile-nav .sub-cont .login-cont .user-info{ padding: 20px 0 10px 0;display: flex;flex-direction: column;justify-content: center;align-items: center;color: white;border-bottom: 1px solid #555555;flex-wrap: wrap;align-content: center;}
#header_mobile .mobile-nav .sub-cont .login-cont li {line-height:40px;padding-left:10px; width:100%;}
#header_mobile .mobile-nav .sub-cont .login-cont li a {font-size:12px;color:#ddd;}
#header_mobile .mobile-nav .sub-cont .login-cont li a i {margin-right:4px;margin-top:1px;}

/* .mobile_menu_show {left:20%;opacity:1;} */
.mobile_menu_show {opacity:1;}
.mobile_menu_hide {opacity:0;left:100%;}

/* ott 리스트 */
.ott_list {margin-bottom:10px;box-sizing:border-box;position:relative;padding-left:40px;padding-right:40px;}
.ott_list .inner {overflow-x: auto;white-space: nowrap;}
.ott_list .inner::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
.ott_list .inner .item {display:inline-block;}
.ott_list .inner .item a img {border-radius:10px;width:50px;}
.ott_list .inner .item + .item {margin-left:12px;}
.ott_list .inner .item a.blank {opacity: 0.2}
.ott_list .inner {}
.ott_list .left-icon {z-index:1;cursor:pointer;position:absolute;top:0px;left:0px;height:50px;width:30px;display:flex;align-items: center;justify-content: center;font-size:20px;color:#fff;background:rgba(0,0,0,0.7);}
.ott_list .right-icon {z-index:1;cursor:pointer;position:absolute;top:0px;right:0px;height:50px;width:30px;display:flex;align-items: center;justify-content: center;font-size:20px;color:#fff;background:rgba(0,0,0,0.7);}



/* 탑 카테고리 */
.top-categories { width: 100%;   overflow: hidden; overflow-x: auto;white-space: nowrap;margin-bottom:10px;background:#0f0f0f;}
.top-categories::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
/* .top-categories .swiper-carousel-items {
    width: 100%;
} */
.top-categories .swiper-carousel-items .swiper-wrapper{display: inline-block;font-size:20px; }
.top-categories .swiper-carousel-items .swiper-wrapper::-webkit-scrollbar { display: none;}
.top-categories .swiper-carousel-items .swiper-wrapper .item {display: inline-block;margin-right:2px;padding:0px 12px;cursor: pointer;background:#333;height:40px;font-size:14px;border-radius:3px;display:inline-flex;align-items: center;justify-content: center;}
.top-categories .swiper-carousel-items .swiper-wrapper .item a {color:#979797;font-size:12px;}
.top-categories .swiper-carousel-items .swiper-wrapper .item.active {background:#fff}
.top-categories .swiper-carousel-items .swiper-wrapper .item.active a {color:#111;}

.company-list .carousel-items {overflow-x: auto;white-space: nowrap; }

#contents .main-section .top-categories .swiper-carousel-items .swiper-wrapper #main-section_category {
    background-color:#1c2024;

}

#contents .main-section .top-categories .swiper-carousel-items .swiper-wrapper #main-section_category:hover {
    background-color: #555555;
}



/* 푸터 */
#footer_mobile {display:none;z-index:10;font-family: 'GmarketSansMedium';}
#footer_mobile {display:none;position:fixed;left:0;right:0;bottom:0;width:100%;background:#111;}
#footer_mobile ul {}
#footer_mobile ul:after {display:block;visibility:hidden;clear:both;content:""}
#footer_mobile ul li {display:block;float:left;width:20%;font-size:0px;}
#footer_mobile ul li a {display:block;text-align:center;color:#999;font-size:13px;padding: 10px 0;}
#footer_mobile ul li.active a {color:#a31717;}
#footer_mobile ul li.active a .icon {color:#a31717;}
#footer_mobile ul li a .icon {font-size:20px;height:20px;width:20px;display:inline-block;margin-bottom:5px;}

#contents {font-size:0px;margin:0 auto;max-width:90%;margin-bottom:20px;  min-height: 90vh;}
#contents.active {margin-left:50px;}
#contents .banners {display:flex;flex-wrap: wrap;margin:0 auto;margin-top:10px;}
#contents .banners.banner-mobile {display:none;}
#contents .banners .banner-item {margin-bottom:5px;}
#contents .banners .banner { width:25%;padding:0.2em;box-sizing:border-box;}
#contents .banners .banner img {width:auto;width:100%;}
#contents .banners .line { flex-grow: 1;width:100%;padding:0.2em;box-sizing:border-box;}
#contents .banners .line img {width:auto;height:100%;}

/* 경고 메시지 */
.warn-message {background:#333;border-radius:2px;padding:12px;text-align:center;width:100%;font-size:14px;color:#DAA520;display:block;
    margin-bottom:10px;
}
.top-notice-msg {
    top: 90px;
    position: relative;
}
/* 깜빡임 */
@keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .warn-message p {
    animation: blink 1s infinite; /* 1초 간격으로 무한 반복 */
  }

/* 메인화면 처리 */
#contents .main-section {margin-bottom:10px;display:block;}
#contents .main-section h2{
    padding:4px;
	font-size:28px;
	font-weight:bold;
	line-height:70px;
	margin-top:10px;
	color:#fff;
	position:relative;
}
#contents .main-section h2 .more {font-size:12px;position:absolute;right:5px;}
#contents .main-section h2 .more2 {font-size:12px;position:absolute;right:5px;color: #fff;background: #333;border-radius: 5px;padding: 2px 10px 0px 10px;bottom: 3px;}
#contents .main-section h2 .more i {}
#contents .main-section .top-categories .carousel-items #main-section_category {
    background-color:#1c2024;
}

#contents .main-section .top-categories .carousel-items #main-section_category:hover {
    background-color: #555555;
}

#contents .main-section .test_banner {

    width:80%;
    height: 160px;
    text-align: center;
    margin-bottom:20px;
    background-size: 80% 100%; 
    background-position: center; 
    background-repeat: no-repeat;
   
}
#contents .main-section .test_banner2 {
  
    width:90%;
    height: 136px;
    text-align: center;
    background-size: 80% 100%; 
    background-position: center; 
    background-repeat: no-repeat;
   
}

/* 메인화면 슬라이드 처리 */
.swiper-slide {cursor:pointer; position: relative; transition: transform .3s ease-out;display:block;}


/* 메인 배너 슬라이더 스타일 */

.swpiper-banner .swiper-slide {
    width: 100%;
    transition: transform 0.3s ease, width 0.3s ease; 
}

.swpiper-banner .swiper-slide-prev,
.swpiper-banner .swiper-slide-next {
    /* width: 20%; 
    transform: scale(0.8); */
  
}
.swpiper-banner .swiper-slide {
    width: 85%;
}


.swpiper-banner .swiper-slide-active {

    transform: scale(1);
    opacity: 1;
}




.swiper-slide:hover {transform:translate(0,-5px);}
/* .swiper-slide .number { font-size: 90px;position: absolute;color: #aaa;  bottom: -16px;z-index: 99999; left: -4px; font-weight: bold; -webkit-text-stroke-width: 0.3px;-webkit-text-stroke-color: #fff;} */
.swiper-slide .number { 
    font-size: 35px;

    position: absolute;
    color: #fff;
    bottom: 0;
    z-index: 99999;
    /* left: -4px; */
    font-weight: bold;
    width: 40px;
    text-align: center;
    text-align: center;
    /* background-color: #29838d; */
    background-color: #a31717; 
    /* border-radius: 0 0 0 6px; */
}
.swiper-slide .img .recomand_left_red { 
    z-index: 10;position: absolute;color: #fff;top: 0px;font-weight: bold;width: 55px;text-align: center;left: -4px;font-size: 8pt;
    padding: 6px;
    border-radius: 30px;
    
}
.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);
}


.item .img .recomand_right_green { 
    /* 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: rgba(5, 121, 15, 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);
}

.swiper-slide .img {position:relative; overflow: hidden; }
.swiper-slide .img img {border-radius:10px;aspect-ratio: 1 / 1.45; max-width:100%;width:100%;}
.swiper-slide .title {font-family: 'GmarketSansMedium';font-size:16px;width:100%;color:#fff;margin-top:5px;max-height:40px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.swiper-slide .category {font-family: 'GmarketSansMedium';font-size:14px;line-height:18px;width:100%;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#aaa;margin-top:2px;}
.swiper-slide .playtype {font-family: 'GmarketSansMedium';font-size:14px;line-height:18px;width:100%;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#f33;margin-top:2px;}
.swiper-slide .fav {font-size:14px;line-height:25px;width:100%;color:#aaa;display:flex;margin-top:2px;}
.swiper-slide .fav i {font-size:14px;margin-right:4px;margin-top:1px;color:#fff;}
.swiper-slide .fav i:nth-child(2) {margin-left:8px;}
.swiper-slide > .progress {height:5px;width:100%;margin-top:5px;}
.swiper-slide > .progress {appearance: none;border-radius:4px;;}
.swiper-slide > .progress::-webkit-progress-bar {background:#444;border-radius:4px;box-shadow: inset 3px 3px 10px #ccc;}
.swiper-slide > .progress::-webkit-progress-value {border-radius:4px;background: #a31717;}
.swpiper-active .swiper-slide .img { height: auto; overflow: hidden; }
.swpiper-active .swiper-slide .img img {border-radius:15px;max-width:100%;width:100%; object-position: 0px 0px;}
/* aspect-ratio: 16 /9; */

.swpiper-top .swiper-slide .img {position:relative; overflow: hidden; }


/* 인기 있는 영상 슬라이드 */
.swiper-slide #por {
    border-radius:10px; aspect-ratio: 1 / 1.65; max-width:100%;width:90%;
}

/* 최근 업로드 영상 슬라이드 */
/* .swiper-slide #new {
    border-radius:10px; aspect-ratio: 3 / 2;
   
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
 
} */

/* 최근 업로드 영상 슬라이드 */
.swiper-slide #new {
    border-radius: 10px;
    aspect-ratio: 1 / 1.45;
    background-size: 100% 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
}





.swiper-button-next {top:0px;right:10px !important;left:auto !important;}
/* .swiper-button-prev {top:0px;right:50px !important;left:auto !important;} */
.swiper-button-prev {top:0px;left:10px !important;left:auto !important;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {font-size:16px !important;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {font-size:16px !important;}

/* 리스트 아이템 */
.item-list {width:100%;}
.item-list .items {display:grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 30px 10px; }
/* height: 70vh; */
.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:5px;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;
    line-height: 1.3;
    color: #fff;
    margin-top: 5px;
    /* text-align: center; */
    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; */
    /* min-height: 43px; */
}
.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;margin-top:2px;}
.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 .btn {font-size:14px;line-height:25px;width:100%;color:#aaa;display:flex;margin-top: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;}



/* 리스트 아이템 가로형 */
.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;}

/* 공지사항 */
.notice-section {margin-bottom:20px;text-align:center; height:100%; width:50%; margin:0 auto;font-family: 'GmarketSansMedium';}
.notice-section .notice-info {font-size:14px;color:#ddd;}
.notice-section .notice-info table {border-top:solid 1px #333;}
.notice-section .notice-info table tr th {height:40px;width:100px;border-bottom:solid 1px #333;font-size:13px; }
.notice-section .notice-info table tr td {height:40px;border-bottom:solid 1px #333;padding:15px;color:#bbb;text-align:left;}
.notice-section .btn-list {width:100%;height:48px;background:#a31717;border:none;font-size:14px;color:#fff;margin-top:20px;width:200px;     border-radius: 4px;}
.notice-section .board-list {margin-top:10px;}
.notice-section .board-list table {width:100%;}
.notice-section .board-list table tr th {height:50px;font-size:16px;font-weight:bold;background:#171717;border:solid 1px #000;font-size:12px;text-align:center;color:#fff;}
.notice-section .board-list table tr td {height:40px;font-size:13px;font-weight:normal;background:#333;border:solid 1px #000;padding:5px;text-align:center;color:#fff;}
.notice-section .board-list table tr td a.btn-mng {padding:4px 10px;background:#333;color:#fff;border-radius:5px;}
.notice-section .board-list table tr td a.btn-del {padding:4px 10px;background:#f33;color:#fff;border-radius:5px;margin-left:5px;}


/* 하단 */
#footer_wrap { display:block; clear:both;
    position:absolute;
    /* bottom:0px;  */
    width:100%;margin:0 auto;font-size:12px;background:#090909; border-top: solid 1px #777;}
#footer_wrap:after {display:block;visibility:hidden;clear:both;content:""}
#footer_wrap .notices {height:60px;background:#090909;width:100%;border-top:solid 1px #333;border-bottom:solid 1px #333;display:flex;}
#footer_wrap .notices .inner {max-width:1140px;width:100%;margin:0 auto;text-align:left;display:flex;align-items:center;}
#footer_wrap .notices .inner a {color:#ccc;font-size:13px;}
#footer_wrap .notices .inner a.notice-link {margin-left:20px;}
#footer_wrap .notices .inner a.notice-telle {margin-left:auto;}
#footer_wrap .footer {
    font-family: 'GmarketSansMedium';
    position: relative;
    width: 100%;
    /* max-width: 1140px; */
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 0;
    font-size: 13px;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    /* align-items: center; */
    /* gap:30px; */

}
#footer_wrap .footer:after {display:block;visibility:hidden;clear:both;content:""}
#footer_wrap .footer .bnb {margin:0 0 40px 0;}
#footer_wrap .footer .bnb a {display:inline-block;margin:0 20px 0 0;color:#999;font-size:16px;font-weight:400;}
/* #footer_wrap .footer ul {margin:0 0 20px 0;display:flex;gap:15px;align-items: center;} */
#footer_wrap .footer ul {margin:0;display:flex;gap:15px;align-items: center;margin-bottom: 15px; }
#footer_wrap .footer ul:after {display:block;visibility:hidden;clear:both;content:""}
#footer_wrap .footer img {
    width: 120px;
    height: auto;
    /* margin-top: -5px; */
}
#footer_wrap .footer ul li:last-child {margin:0;padding:0;background:none;}
#footer_wrap .footer ul li a {display:block;color:#eee;font-size:13px;}
#footer_wrap .footer p {margin:0 0 10px 0;color:#999;line-height:180%;word-break:keep-all;}
#footer_wrap .footer p span {display:inline-block;}
#footer_wrap .footer .copy {color:#999;}
#footer_wrap .footer a.telegram {display:block;position:absolute;right:10px;top:40px;width:36px;height:36px;color:#ddd;font-size:!6px;line-height:36px;text-align:center;border-radius:50%;}
#footer_wrap .footer a.telegram i {font-size:40px;}
#footer_wrap .footer a.telegram:hover {background:#a31717;}
#footer_wrap .footer .tabs {display:none;margin:30px 20px 20px 20px;}
#footer_wrap .footer .tabs a {color:#999;}
#footer_wrap .footer .tabs .dot {display:inline-block;width:3px;height:3px;margin:0 8px;background:#999;border-radius:50%;vertical-align:middle;}


/* 2025-02-15 add */
#footer_wrap .footer ul {
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
    padding: 0;
    list-style: none;
    gap: 30px;
    line-height: 20px;
}

#footer_wrap .footer ul li {
    flex: 1 1 auto;   /* 자동 크기 조정 */
    text-align: center;
}



/* 검색 */
.background {z-index:100;position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,0.75);align-items:center;justify-content:center;}
.menu-fixed {z-index:2;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;}

/* 검색 팝업 */
#search-container .inner {width:500px;background:#232323;padding:25px;position:absolute;top:100px; left:50%;margin-left:-250px;padding-top:35px;}
#search-container .inner h3 {color:#fff;line-height:40px;font-size:16px;font-weight:500;}
#search-container .inner .input {width:100%;;background:#171717;color:#aaa;display:flex;}
#search-container .inner .input input[type=text] {background:auto;background:#171717;border:none;width:100%;color:#fff;height:100%;padding-left:10px;height:45px;}
#search-container .inner .input input[type=text]::placeholder {color:#aaa;}
#search-container .inner .input .pop-btn-search {display:inline-block;width:40px;text-align:center;height:45px;}

#search-container .inner .list { padding:0px;margin-top:0px; display: grid;grid-template-columns: repeat(1, 100%);color:#fff; }
#search-container .inner .list li { font-size: 13px; line-height:20px; display:flex;align-items: center;padding-top:6px;padding-bottom:6px;}
#search-container .inner .list li span { color:#a31717;font-weight:bold; border-radius:4px;margin-right:10px;width:15px;display:inline-flex;align-items: center;justify-content: center;font-size:14px;text-align:center;}
#search-container .inner .list li a {color:#eee;font-size:13px;width:100%;display:flex;}
#search-container .inner .last {line-height:30px;margin-top:6px;line-height:30px;border-bottom:solid 1px #222;padding-bottom:10px;}
#search-container .inner .last a {background:#333;border:solid 1px #454545;font-size:12px;color:#eee;border-radius:3px;padding:2px 5px;display:inline-block;height:26px;display:inline-flex;align-items: center;justify-content: center;}
#search-container .inner .last a:first-child {margin-right:6px;}
#search-container .inner .last a + a {margin-right:6px;}
#search-container .inner .hint {color:#aaa;font-size:13px;margin-top:10px;}
#search-container .inner .links {font-size:14px;margin-top:10px;background:#a31717;color:#eee;height:42px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
#search-container .inner .links a {display:flex;height:100%;width:100%;align-items: center;justify-content: center;color:#eee;}
#search-container .inner .links i {margin-left:5px;}
#search-container .pop-search-close {position:absolute;right:0px;top:0px;width:40px;height:40px;}
#search-container .pop-search-close i {font-size:22px;color:#aaa;}

/* 최근검색어 전체삭제 */
.last-search { position: absolute;right:25px;top:42px; }
.last-search .btn-search-rm { padding:5px; background: #333;font-size: 13px;color: #ccc;border-radius: 3px;height: 25px;}



#share-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content: center;align-items:center;}
#share-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:20px 25px;font-size:14px;}
#share-container .inner h4 {font-size:18px;width:100%;position:relative;}
#share-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
#share-container .inner .contents {color:#fff;padding-top:15px;}
#share-container .inner .contents li {width:100%;display:flex;align-items:center;height:40px;padding-left:10px;background:#202020;cursor:pointer;}
#share-container .inner .contents li + li {margin-top:12px;}
#share-container .inner .contents li:hover {background:#a31717;}
#share-container .inner p {line-height:40px;color:#aaa;}
#share-container .inner .btns {display:flex;font-size:14px;}
/* #share-container .inner .btns .btn-confirm-alert {margin-left:auto;color:#a31717;} */
#share-container .inner .btns .btn-confirm-alert {margin-left:auto;color:#fff;}

#setting-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content: center;align-items:center;}
#setting-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:20px 25px;font-size:14px;}
#setting-container .inner h4 {font-size:18px;width:100%;position:relative;}
#setting-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
#setting-container .inner .contents {color:#fff;padding-top:15px;}
#setting-container .inner .contents li {width:100%;display:flex;align-items:center;height:40px;padding-left:10px;background:#202020;cursor:pointer;color:#fff;background:#a31717;border-radius:5px;}
#setting-container .inner .contents li i {color:#fff;font-size:16px;margin-right:10px;font-weight:bold;}
#setting-container .inner .contents li + li {margin-top:12px;}
#setting-container .inner .contents li.disable {color:#565656;background:#333;}
#setting-container .inner .contents li.disable i {color:#565656;}
#setting-container .inner p {line-height:40px;color:#aaa;}
#setting-container .inner .btns {display:flex;font-size:14px;margin-top:20px;}
/* #setting-container .inner .btns .btn-confirm-alert {margin-left:auto;color:#a31717;} */
#setting-container .inner .btns .btn-confirm-alert {margin-left:auto;color:#fff;}

/* cc 팝업 */
#cc-container .inner {width:500px;background:#232323;padding:25px;position:absolute;top:100px; left:50%;margin-left:-250px;padding-top:35px;min-height:400px;}
#cc-container .inner h3 {color:#fff;line-height:40px;font-size:16px;font-weight:500;}
#cc-container .inner .input {width:100%;;background:#171717;color:#aaa;display:flex;}
#cc-container .inner .input input[type=text] {background:auto;background:#171717;border:none;width:100%;color:#fff;height:100%;padding-left:10px;height:45px;}
#cc-container .inner .input input[type=text]::placeholder {color:#aaa;}
#cc-container .inner .input .cc-btn-search {display:inline-block;width:40px;text-align:center;height:45px;}
#cc-container .inner .input .cc-btn-search i {color:#fff;font-size:20px;}
#cc-container .inner .list { padding:0px;margin-top:0px; display: grid;grid-template-columns: repeat(1, 100%);color:#fff; }
#cc-container .inner .list li { font-size: 13px; line-height:26px; display:flex;align-items: center;padding-top:6px;padding-bottom:6px;}
#cc-container .inner .list li span { background:#a31717;color:#fff;height:22px;font-size:12px;width:55px;display:inline-flex;align-items: center;justify-content: center;margin-right:5px;border-radius:15px;}
#cc-container .inner .list li a {color:#eee;font-size:14px;width:100%;display:flex;text-decoration:underline;}
#cc-container .inner .hint {color:#aaa;font-size:13px;margin-top:10px;}
#cc-container .cc-search-close {position:absolute;right:0px;top:0px;width:40px;height:40px;}
#cc-container .cc-search-close i {font-size:22px;color:#aaa;}

#report-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content: center;align-items:center;}
#report-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:20px 25px;font-size:14px;}
#report-container .inner h4 {font-size:18px;width:100%;position:relative;}
#report-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
#report-container .inner .contents {color:#fff;padding-top:15px;}
#report-container .inner p {line-height:23px;color:#aaa;}
#report-container .inner .btns {display:flex;font-size:14px;}
#report-container .inner .btns .right {margin-left:auto;}
#report-container .inner .btns .right .btn-confirm-report {color:red;margin-right:20px;}
#report-container .inner .btns .right .btn-confirm-alert {color:white;}

/* 알럿 */
/* .alert-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;justify-content: center;align-items:center;}
.alert-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:20px;}
.alert-container .inner h4 {font-size:18px;width:100%;position:relative;border-top-right-radius:10px;}
.alert-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.alert-container .inner .message {padding:20px;min-height:140px;display:flex;justify-content: center;align-items:center;font-size:14px;color:#aaa;}
.alert-container .inner .btns {display:flex;}
.alert-container .inner .btns .btn-confirm-alert {margin-left:auto;color:#a31717;} */
.alert-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;justify-content: center;align-items:center;}
.alert-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:20px;}
.alert-container .inner h4 {font-size:18px;width:100%;position:relative;border-top-right-radius:10px;color:#171717;}
.alert-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.alert-container .inner .message {padding:20px;min-height:140px;display:flex;justify-content: center;align-items:center;font-size:14px;color:#fff;}
.alert-container .inner .btns {display:flex;}
.alert-container .inner .btns .btn-confirm-alert {margin-left:auto;border-radius: 8px;background:#4f4f4f;color:#fff;font-weight:bold;padding: 8px 25px;}


.confirm-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;justify-content: center;align-items:center; border-radius: 8px;}
.confirm-container .inner {width:400px;background:#141414;color:#fff;font-weight:normal;padding:40px 0 20px 0 ;position:relative; text-align: center;
    border: 1px solid #676767;
    border-radius: 12px;
}
.confirm-container .inner img { width: 100px; height: 100px; display: block; margin: 0 auto;}
.confirm-container .inner h4 {font-size:18px;width:100%;position:relative;border-top-right-radius:10px;}
.confirm-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.confirm-container .inner .btn-x-close {color:#fff;position:absolute;right:15px;top:12px;}
.confirm-container .inner .message {min-height:80px;display:flex;justify-content: center;align-items:center;font-size:14px;color:#aaa;margin-top: -20px;}
.confirm-container .inner .login {display:flex;justify-content: center;align-items:center;height:40px;}
.confirm-container .inner .login .login {border-radius: 8px; background:#4f4f4f;color:#fff;padding:7px 14px;display:flex;justify-content: center;align-items:center;width:110px;font-size:13px;height:100%;}
.confirm-container .inner .login .join { border-radius: 8px; background:#a31717;color:#fff;padding:7px 14px;display:flex;justify-content: center;align-items:center;width:110px;margin-left:10px;font-size:13px;height:100%;}
.confirm-container .inner .btns {display:block;text-align:center;}
.confirm-container .inner .btns a {}
.confirm-container .inner .btns .btn-confirm-confirm {
    margin-left: auto;
    color: #fff;
    background: #a31717;
    padding: 10px 40px;
    border-radius: 5px;
    font-size: 14px;
}

.confirm-container .inner .btns .btn-confirm-close {
    margin-left: auto;
    color: #fff;
    background: #4f4f4f;

    padding: 10px 40px;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
}

  
#char-container .inner {    
    width: 600px;
    /* height: 800px; */
    height: 98%;
    background: #232323;
    padding: 25px;
    position: absolute;
    top: 100px;
    left: 45%;
    margin-left: -250px;
    /* padding-top: 35px; */
    overflow-y: scroll;
    scrollbar-color: #a31717;
}

#char-container .inner::-webkit-scrollbar {
    width: 8px; /* 스크롤바 너비 */
}

#char-container .inner::-webkit-scrollbar-track {
    background: #888;
}

#char-container .inner::-webkit-scrollbar-thumb {
    background-color: #a31717;
}


#char-container .inner h3 {color:#fff;line-height:40px;font-size:16px;font-weight:500;}
#char-container .inner .char-list { padding:0px;margin-top:0px; display: grid;grid-template-columns: repeat(5, 20%);color:#fff; }
#char-container .inner .char-list li {width:100%;padding:5px;text-align: center;}
#char-container .inner .char-list li a img {    
    object-fit: cover;
    width: 50px;
    height: 50px;
    border: solid 1px #454545;
    border-radius: 50px}
#char-container .pop-char-close {position:absolute;right:0px;top:0px;width:40px;height:40px;}
#char-container .pop-char-close i {font-size:22px;color:#aaa;}


/* 비디오 리스트 */
.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;border:none;}
.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 {position:relative;margin-top: 90px;}
.search-section {margin-top:00px;position:relative;}


.video-tabs .swiper-video-tabs {border-bottom: 1px solid #333;font-family: "Pretendard-Regular";}


/* 전체삭제 */
.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;}



/* 검색 필터 */
.search-section .videos-filter {display:flex;width:100%;margin-top:10px;margin-bottom:10px;align-items:center;}
.search-section .videos-filter .select-group-wrap {width:500px;margin-left:auto;display:flex;}
.search-section .videos-filter .select-wrap {width:100%;margin-left:auto;display:flex;margin:0 5px;}
.search-section .videos-filter .select-category {width:250px;margin-left:auto;display:flex;}
.search-section .videos-filter .input {width:100%;;height:49px;background:#fff;color:#000;display:flex;max-width:300px;}
.search-section .videos-filter .input input[type=text] {background:#fff;width:100%;color:#000;height:100%;padding-left:10px;border:none;}
.search-section .videos-filter .input .share-btn-search {display:inline-block;width:60px;text-align:center;}
.search-section .videos-filter .input i {font-size:20px;color:#000;}
.search-section .videos-section {margin-top:10px;position:relative;}
.search-section .search-section {margin-top:00px;position:relative;}



/* 검색 화면 */

.search-result {font-size:18px;color:#fff;justify-self:left;padding-top:8px;padding-bottom:8px;}
.search-result span {color:#ff1f45;}

.mypage-section .result-filter {margin-bottom:20px;display:flex;margin-top:20px;position:relative;}
.button-wrap {font-size:14px;position:absolute;right:10px;top:-10px;}
.button-wrap .btnAllDelete {color:#ddd;height:45px;width:170px;border:solid 1px #ddd;display:flex;align-items:center;justify-content:center;}


/* 상세화면 */
.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 {
        line-height: 24px;
    font-family: 'GmarketSansMedium';
    margin-left:auto;display:flex;align-items:center;justify-content:center;height:80px;border-bottom:solid 1px #333;
    user-select: none;
    -webkit-user-select: none;
}
.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;
    margin-bottom: 10px;
    overflow-x: auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    scroll-behavior: smooth;
}

/* ✅ 스크롤바 보이게 하면서 얇게 디자인 */
.wrap-detail .item-cast .cast-list::-webkit-scrollbar {
    height: 12px;
}

.wrap-detail .item-cast .cast-list::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.5);
    border-radius: 6px;
    cursor: pointer;
}

.wrap-detail .item-cast .cast-list::-webkit-scrollbar-track {
    background: transparent;
}
.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;}
.member-image {border-radius:60px;display:flex;align-items:center;justify-content:center;}
.member-image.round{padding:4px;border:solid 1px #333;background:#333;}
.member-image i {font-size:18px;}
.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 {margin:0 auto; width:50%; background:#232323;padding:10px 11px 25px 11px;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:24px;font-weight:bold;text-align: center; padding: 0px 50px;}
/* .wrap-detail .main-info .title {font-size:2rem;font-weight:bold; margin-bottom:10px;padding:10px 0;text-align: center;} */
.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: 30px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: -5px;
    /* max-width:450px; */
}
.wrap-detail .main-info .btns .btn {display:none;width:100%;}
.wrap-detail .main-info .btns .btn a {  
     font-family: "Pretendard-Regular";
    width: 100%;
    /* max-width: 500px; */
    background: #a31717;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    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 {} */
.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 .quick-menu2 {position:absolute;right:10px;top:60px;}
/* .wrap-detail .main-info .quick-menu {} */
.wrap-detail .main-info .quick-menu2 a {width:60px;height:38px;display:inline-flex;align-items: center;justify-content: center;background:#a31717;border-radius:5px;}
.wrap-detail .main-info .quick-menu2 a.disable {background:#292929;color:#454545;}


.wrap-detail .main-info .quick-menu-left {position:absolute;left:10px;top:10px;}
/* .wrap-detail .main-info .quick-menu {} */
.wrap-detail .main-info .quick-menu-left 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-left a.disable {background:#292929;color:#454545;}



.wrap-detail .main-info .process {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    height: 30px;
    /* max-width: 450px; */
    margin-bottom: -20px;
 }
.wrap-detail .main-info .process span {
    display: inline-block;
    width: 35px;
    padding: 12px 0px 12px 15px;
    /* text-align: left; */
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
}
.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 .main-info .option-menu {display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: flex-start;width: 100%;}
.wrap-detail .main-info .option-menu .btns {margin-top:15px;display:flex;width:100%;} */

/* 플레이리스트 버튼 */

#popupOverlay {
   
}


.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: 1000; 
}

.wrap-detail .popup-content {
    font-family: 'GmarketSansMedium';
    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;
        line-height: 1.3;
        color: #fff;
        margin-top: 5px;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.3em * 2);
    }
    
}

.wrap-detail .popup-content .left .playlist-thumbnail {
    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;
    height:84vh;
    input {
        outline: none;
        width: 90%;
        border-radius: 6px;
        height: 30px;
        padding:10px;
    }
    select {
        outline: none;
        width: 90%;
        border-radius: 6px;
        height: 30px;
    }
}

/* 

.wrap-detail .popup-content .right input {
    outline: none;
    width: 90%;
    border-radius: 6px;
    height: 30px;
    padding:10px;
}



.wrap-detail .popup-content .right select {
    outline: none;
    width: 90%;
    border-radius: 6px;
    height: 30px;
} */

.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: 90%; /* 리스트의 너비 */
    max-height: 450px; 
    white-space: normal;
    overflow-x:hidden;
    overflow-y: auto; /* 세로 스크롤 활성화 */ /* 선택적으로 스크롤 영역 표시 */
    padding: 0 12px; /* 내부 여백 */
    border-radius: 6px; /* 부드러운 모서리 */
    scrollbar-width: thin; /* Firefox용 스크롤바 너비 */
    scrollbar-color: #a31717 transparent; /* Firefox용 스크롤바 색상 */
}

.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;
}
.pl-close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    border:none;
    background-color: #990c0c;
    color: white;
    /* border-radius: 50%; */
    width: 60px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    /* padding: 5px; */
    white-space: nowrap;
    border-radius: 8px;
    margin-bottom: 10px;
}
.wrap-detail .close-btn {
    
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    /* border-radius: 50%; */
    width: 60px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    /* padding: 5px; */
    white-space: nowrap;
    border: 1px solid grey;
    border-radius: 8px;
    margin-bottom: 10px;
}



.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;border-bottom: 1px solid #333;}

/* .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 {display:flex;align-items: center;}
.wrap-detail .video-tabs .tabs a {white-space: nowrap; border-radius: 5px;margin: 10px 0;font-size:15px;display:inline-flex;padding:8px 15px;text-align: center;align-items: center;justify-content: center;}
.wrap-detail .video-tabs .tabs a.active {background:#232323;}
/* .wrap-detail .video-tabs .tabs a + a {margin-left:5px;} */
.wrap-detail .video-tabs .tabs a + a {}

.wrap-detail .video-tabs .tab-inner {display:none;margin-top:10px;padding:10px;font-family: 'GmarketSansMedium';}
.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;}

.comments {}
.comment-write {
    position: relative;
    padding-top: 50px; /* result 공간 확보 */
}

.comment-write .inline-result {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.inline-result .star-score {
    font-size: 20px;
    line-height: 1;
}

.inline-result .score {
    position: static;
    font-size: 18px;
    font-weight: bold;
}

.inline-result .count {
    font-size: 13px;
    margin: 0;
}
.comments .result .star-score .star-icon {display:flex;color: transparent;-webkit-background-clip: text !important;}
/* .comments .result {padding:10px;background:#232323;padding:10px 15px;border-radius:5px;position:relative;}
.comments .result .star-score {display:flex;font-size: 24px;align-items: center;gap:0px; line-height: 2;}

.comments .result .star-score .star-icon span {display:inline-flex;padding:0px 3px;} */
/* .comments .result .score {position:absolute;right:15px;font-weight:bold;font-size:30px;top:15px; display:flex}
.comments .result .count {margin-top:10px;font-size: 16px;color: #aaa;} */
.comments .comment-write {border:solid 1px #333;background:#232323;margin-top:10px;border-radius:5px;padding:10px;}
.comments .comment-write .star_rating {
    /* width: 100%; */
    box-sizing: border-box;display:flex;flex-direction: row;justify-content:center;margin-top:2px;}
.comments .comment-write .star_rating .star {width:24px;height: 24px;display: inline-block;color:#ddd;font-size:18px;background-size: 100%;box-sizing: border-box;cursor:pointer;}
.comments .comment-write .star_rating .star.on {display: inline-block;color:#EAB838;background-size: 100%;box-sizing: border-box;}
.comments .comment-write .profile {display:flex;font-size:12px;align-items: center; gap:15px;}
.comments .comment-write .profile img {width:20px;}
.comments .comment-write .profile .name {margin-left:5px; font-size:16px;margin-top: 5px;}
.comments .comment-write .editor {display:flex;padding-top:10px;}
.comments .comment-write .editor textarea {width:100%;padding:10px;background:#121212;border-radius:5px;color:#fff;border:solid 1px #333;height:100px;max-height:200px;min-height:100px;}
.comments .comment-write .editor textarea::-webkit-scrollbar {width:1px;background-color:rgba(255,255,255,0.5);}
.comments .comment-write .editor textarea::-webkit-scrollbar-thumb { background-color:#222;}
.comments .comment-write .editor .btn-cmt {margin-left:10px;background:#a31717;color:#fff;border-radius:5px;width:120px;display:flex;align-items: center;justify-content: center;}
.comments .comment-list {width:100%;}

.comment-header {
    display: flex;
    justify-content: space-between; /* ← 이게 핵심! */
    align-items: center;
    padding: 10px 15px;
    background: #232323;
    border-radius: 5px;
    flex-wrap: wrap;
    gap:8px;
}

.left-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.left-info .name {
    font-weight: bold;
    font-size: 16px;
    color: white;
    white-space: nowrap;
    margin-top:3px;
}
.profile {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-left {
    display: flex;
    align-items: center;
    gap: 10px;
}


.profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.nickname-stars {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.nickname-stars .name {
    font-weight: bold;
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

.star_rating {
    display: flex;
    gap: 2px;
    font-size: 18px;
    color: #ccc;
}

.star_rating .star.on {
    color: #EAB838;
}
.rate-button-wrap {
    display: flex;
    align-items: center;
}

.rate-button {
    /* display:none; */
    display: inline-block;
    background: #a31717;
    color: white;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
    white-space: nowrap;
    margin-left: -4px;
    margin-top: 2px;
}

.rate-button:hover {
    background: #d42020;
}
.result {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 22px;
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
    background: #171717;
}

.result .score {
    display:flex;
    font-size: 24px;
    align-items: center; line-height: 2;
    font-weight: bold;
    display: flex;
    margin-top:4px;
    gap: 4px;
}

.result .count {
    font-size: 16px;
    color: #aaa;
    margin-top: 5px;
}

.result .score .avg-count {
    font-size:14px;
    margin-top:4px;
    color: #aaa;
}

.comments .comment-list .item {width:100%;border-bottom:solid 1px #333;margin-top:10px;padding-bottom:20px;position:relative;}
.comments .comment-list .item.reply {padding-left:24px;}
.comments .comment-list .item .reply {width:20px;position:absolute;top:0px;left:0px;}
.comments .comment-list .item .reply i {color:#ccc;font-size:20px;}
.comments .comment-list .item .score {display:flex;
    /* width:88px; */
}
.comments .comment-list .item .score .star {display: inline-flex;font-size:12px;box-sizing: border-box;padding:0px 3px;}
.comments .comment-list .item .name {margin-top:8px;color:#ddd;font-size:12px;display:flex;align-items: center;}
.comments .comment-list .item .name .member-image {margin-right:5px;border-radius:50px;background:#333;}
.comments .comment-list .item .name .datetime {color:#aaa;margin-left:5px;font-weight:normal;}
.comments .comment-list .item .contents {padding-top:10px;padding-bottom:10px;word-break:break-all;}
.comments .comment-list .item .btnCmtDelete {
    position: inherit;
    /* right:10px; */
    /* top:10px; */
    /* background: #232323; */
    padding: 7px 10px;
    border-radius: 5px;
}
.comments .comment-list .item .btnCmtDelete i {color:#aaa;margin-left: 5px;}
.comments .comment-list .item .func {margin-top: 5px;display: flex;white-space: nowrap;flex-direction: row;flex-wrap: wrap;align-content: flex-end;justify-content: flex-start;align-items: center;}
.comments .comment-list .item .func a {
    padding: 5px 10px 5px 0px;
    /* background: #232323; */
    border-radius: 5px;
    font-size: 12px;
    display: inline-flex;
}
.comments .comment-list .item .func a i {margin-right:5px;margin-top:1px;}
.comments .comment-list .item .func a .ri-thumb-up-fill{
    color:white;
}
.comments .comment-list .item .func a .ri-thumb-down-fill {
    color: white;
}

.comments .comment-list .item .func a .ri-thumb-up-fill.active {
    color: #c90000;
}

.comments .comment-list .item .func a .ri-thumb-down-fill.active {
    color: #2c81f1;
}

.comments .comment-list .item .func .toggle-replies {
    color:#2c81f1;
}

.comments .comment-list .item .func a span {margin-left:4px;}
.comments .comment-list .item .func a + a {margin-left:5px;}
.comments .comment-list .item .item-reply {display:none;margin-top:10px;border:solid 1px #333;border-radius:5px;padding:10px;background:#232323;position:relative;}
.comments .comment-list .item .item-reply .btn-cancel {position:absolute;right:10px;top:10px;}
.comments .comment-list .item .item-reply .profile {display:flex;font-size:12px;}
.comments .comment-list .item .item-reply .profile img {width:20px;margin-right:5px;}
.comments .comment-list .item .item-reply .editor {display:flex;padding-top:8px;}
.comments .comment-list .item .item-reply .editor textarea {width:100%;padding:10px;background:#121212;border-radius:5px;color:#fff;border:solid 1px #333;overflow:hidden;min-height:100px;}
.comments .comment-list .item .item-reply .editor .btn-cmt {margin-left:10px;background:#a31717;color:#fff;border-radius:5px;width:90px;display:flex;align-items: center;justify-content: center;}

.wrap-detail .video-tabs .tab-fav {margin-top:20px;}
.wrap-detail .video-tabs .tab-fav .subject {font-size:14px;}
.wrap-detail .video-tabs .tab-detail .line + .line {margin-top:20px;}
.wrap-detail .video-tabs .tab-detail .line .subject {font-size:16px;}


    /* 페이지 네이션 */
.site-pagenation {display:flex;font-size:12px;width:100%;margin-top:50px;margin-bottom: 50px;}
.site-pagenation ul {display:flex;align-items:center; width:100%;line-height:40px;justify-content:center;}
.site-pagenation ul li {width:45px;display:flex;align-items:center;justify-content:center;}
.site-pagenation ul li a {display:flex;width:34px;height:34px;background:#333;align-items:center;justify-content:center;color:#fff;border-radius:34px;}
.site-pagenation ul li a.current {background:#a31717;}
.site-pagenation ul li i {font-size:26px;}
.site-pagenation ul li.first {width:30px;}
.site-pagenation ul li.first a {background:none;}
.site-pagenation ul li.prev {width:30px;}
.site-pagenation ul li.prev a {background:none;}
.site-pagenation ul li.next {width:30px;}
.site-pagenation ul li.next a {background:none;}
.site-pagenation ul li.last {width:30px;}
.site-pagenation ul li.last a {background:none;}

.site-pagenation ul li.first button {background:none;}
.site-pagenation ul li.prev button {background:none;}
.site-pagenation ul li.next button {background:none;}
.site-pagenation ul li.last button {background:none;}

.site-pagenation ul li button {display:flex;width:34px;height:34px;background:#333;align-items:center;justify-content:center;color:#fff;border-radius:34px;}
.site-pagenation ul li button.current {background:#a31717;}


/* 회원가입 로그인 */
.member-section {display:flex;justify-content: center;align-items:center;font-size:14px;color:#fff;position:fixed;top:0;left:0;right:0;bottom:0;}
.member-section .inner {display:flex;justify-content: center;align-items:center;padding:40px;}
.member-section .inner .form-row {display:flex;}
.member-section .inner .form-row + .form-row {margin-top:15px;}
.member-section .inner .form-row label .form-text {width:100%;height:48px;background:#232323;border:none;padding-left:20px;color:#fff;font-size:14px;}
/* width:320px; */
.member-section .inner .form-row label .form-text::placeholder {
    color: #ccc;
}
.member-section .inner .form-row .join {margin-left:auto;}
.member-section .inner .form-row .btn-login {width:100%;height:48px;background:#a31717;border:none;font-size:14px;}
.member-section .inner .form-row .btn-join {width:100%;height:48px;background:#333;border:none;font-size:14px;}
.member-section .inner .form-row .checked {display:flex;justify-content: center;align-items:center;}
.member-section .inner .form-row .checked input[type=checkbox] {margin-right:5px;width:16px;height:16px;background:#232323;}
.member-section .inner .form-icon {display:flex;align-items:center;justify-content: center;align-items:center;padding-bottom:40px;}
.member-section .inner .form-icon .title1 {font-size:28px;font-weight:bold;text-shadow:2px 2px 2px #444;}
.member-section .inner .form-icon .title2 {color:#a31717;font-size:28px;font-weight:bold;text-shadow:2px 2px 2px #444;margin-left:4px;}


/* 요청  */
.request-section {display:flex;justify-content: center;align-items:center;font-size:14px;color:#fff;position:fixed;top:0;left:0;right:0;bottom:0; background: rgba(0, 0, 0, 0.8);}
.request-section .inner {display:flex;justify-content: center;align-items:center;padding:40px;}
.request-section .inner .form-row {display:flex;}
.request-section .inner .form-row + .form-row {margin-top:15px; gap:10px;}
.request-section .inner .form-row label .form-text {width:520px;height:48px;background:#232323;border:none;padding-left:20px;color:#fff;font-size:14px;}
.request-section .inner .form-row label .form-text::placeholder {color: #ccc;}
.request-section .inner .form-row .textarea {width:520px;height:200px;background:#232323;border:none;padding:20px;color:#fff;font-size:14px;}
.request-section .inner .form-row .textarea::placeholder {color:#ddd;}
.request-section .inner .form-row .join {margin-left:auto;}
.request-section .inner .form-row .btn-login {width:100%;height:48px;background:#a31717;border:none;font-size:14px;}
.request-section .inner .form-row .btn-home {width:100%;height:48px;background:#333;border:none;font-size:14px;}
.request-section .inner .form-row .checked {display:flex;justify-content: center;align-items:center;}
.request-section .inner .form-row .checked input[type=checkbox] {margin-right:5px;width:16px;height:16px;background:#232323;}
.request-section .inner .form-icon {display:flex;align-items:center;justify-content: center;align-items:center;padding-bottom:40px;}
.request-section .inner .form-warn {text-align:left;line-height:34px;color:#f33;font-size:14px;}



/* 선물함 */

/* 마이페이지 */



.mypage-section {padding:20px;background:#232323;border-radius:5px;color:#fff; margin-top:90px;}
.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; */
    margin: 0;
    color: #fff;
    font-size: 16px;
    padding: 16px 15px;
    border-radius: 5px;
    border-bottom: solid 1px #454545;
    background: #333;
    display: flex
;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.4;
}
.mypage-section h3 .btnBack {color:#fff;font-size:20px;width:30px;}
.mypage-section h3 .count {margin-left:auto;color:#fff;}
.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:#a31717;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;line-height:16px;  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;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-family: 'GmarketSansMedium';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:56px;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 { white-space:nowrap;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;}
.mypage-section .point-list table tr td .star i {
    color:#fbd339;
}
/* 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 .coupon-list .use {
    white-space: nowrap;
    padding:6px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #a31717;
    border:none;
}
.mypage-section .coupon-list .point {
    white-space: nowrap;
}

/* 전체삭제 */
.mypage-section .functoin {margin-left:auto;display:flex;align-items:center;justify-content:right;margin-top:20px;}
.mypage-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: 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 .tbl {width:100%;}
.mypage-section .tbl th {background:#333;border:solid 1px #232323;padding:8px;width:100px;text-align:center;font-size:13px;color:#fff;}
.mypage-section .tbl .pass {display:none;}
.mypage-section .tbl td {background:#333;border:solid 1px #232323;padding:8px;font-size:13px;color:#eee;text-align:left;}
.mypage-section .tbl td input[type='text']{width:100%;height:35px;border:solid 1px #ddd;padding-left:10px;color:#454545;background:#eee;}
.mypage-section .tbl td input[type='password']{width:100%;height:35px;border:solid 1px #ddd;padding-left:10px;color:#454545;background:#eee;}
.mypage-section .tbl td textarea {width:100%;height:200px;border:solid 1px #ddd;padding:10px;color:#454545;}
.mypage-section .tbl td .btnImage {display:flex;width:120px;background:#454545;color:#eee;border-radius:5px;height:30px;align-items: center;justify-content: center;margin-top:5px;}
.mypage-section .tbl td .check {display:flex;align-items: center;}
.mypage-section .tbl td .check input[type='checkbox'] {margin:0px;transform : scale(1.2);margin-right:5px;}
.mypage-section .tbl td .profile img {width:60px;height:60px;display:inline-flex;border:solid 1px #ddd;border-radius:100px;}
.mypage-section .btns {padding:20px;padding-top:10px;width:100%;text-align:center;display:flex;align-items: center;justify-content: center;margin-top:15px;}
.mypage-section .btns a {font-size:14px;display:flex;align-items: center;justify-content: center;width:140px;height:45px;border-radius:5px;}
.mypage-section .btns a + a {margin-left:10px;}
.mypage-section .btns a.btnBack {background:#f7f7f7;color:#333;display:flex;align-items: center;justify-content: center;border:solid 1px #e9e9e9;}
.mypage-section .btns a.btnWrite {background:#333;color:#fff;display:flex;align-items: center;justify-content: center;}



.message-list .item {font-size:14px;color:#454545;padding:10px;border-radius:5px;background:#f9f9f9;}
.message-list .item .user a {display:inline-flex;align-items: center;}
.message-list .item .user a .nick {margin-left:5px;}
.message-list .item > div {padding-top:10px;padding-bottom:10px;}
.message-list .item .date {color:#aaa;}
.message-list .item .text {padding:10px;background:#eee;border-radius:5px;}

.message-list .tbl-list tr th {font-size:13px;background:#eee;padding:10px;text-align:center;border:solid 1px #ddd;color:#333;}
.message-list .tbl-list tr td {
    font-size: 12px;
    background: #1c1c1c;
    padding: 15px;
    text-align: center;
    border: solid 1px #000000;
    color: #454545;
    display: block;
    border-radius: 5px;
    margin-bottom: 10px;
}


.message-list .tbl-list tr td .user-popup {display:inline-flex;align-items: center;}
.message-list .tbl-list tr td .user-popup .nick {margin-left:5px; color:white;}
.message-list .tbl-list tr td .text {
    /* padding:10px;background:#f6f6f6;border-radius:5px;margin-top:10px;line-height:24px;border:solid 1px #eee; */
    padding: 10px;
    /* background: #f6f6f6; */
    /* border-radius: 5px; */
    margin-top: 10px;
    line-height: 24px;
    color: white;
    border-top: 1px solid #444;
     /* border: solid 1px #454545; */
}
.message-list .tbl-list tr td .date {color:#aaa;margin-top:5px;}
.message-list .tbl-list tr td .btnSend {position:absolute;right:15px;top:10px;background:#a31717;color:#fff;font-size:12px;padding:8px 13px;border-radius:5px;}


.basic-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content: center;align-items:center;}
.basic-container .inner {width:400px;background:#171717;color:#fff;font-weight:normal;padding:20px 25px;font-size:14px;}
.basic-container .inner h4 {font-size:18px;width:100%;position:relative;}
.basic-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.basic-container .inner .contents {color:#fff;padding-top:15px;}
.basic-container .inner p {line-height:23px;color:#aaa;}
.basic-container .inner .btns {display:flex;font-size:14px;margin-top:20px;}
.basic-container .inner .btns .right {margin-left:auto;}
.basic-container .inner .btns .right .btn-close {color:#f33;margin-left:20px;font-size:14px;font-weight:bold;}
.basic-container .inner .btns .right .btn-confirm {color:#a31717;font-size:14px;font-weight:bold;}
.basic-container .inner .form-row {}
.basic-container .inner .form-row + .form-row {margin-top:15px;}
.basic-container .inner .form-row span {display:inline-block;width:100%;color:#ddd;font-weight:bold;}
.basic-container .inner .form-row label {margin-top:5px;display:block;color:#333;}
.basic-container .inner .form-row label .form-text {height:40px;border:none;width:100%;padding-left:10px;}


.search-item-list { display: grid;grid-template-columns: repeat(6, 1fr); }
.search-item-list .item { display: inline-grid;justify-items: center;align-items: center;font-size:13px;position: relative; margin:10px; }
.search-item-list .item .number { 
    font-size: 35px;
    position: absolute;
    color: #fff;
    bottom: 0;
    z-index: 99;
    /* left: -4px; */
    font-weight: bold;
    width: 40px;
    text-align: center;
    text-align: center;
    /* background-color: #29838d; */
    background-color: #a31717; 
    border-radius: 0 0 0 6px;
}


.search-item-mobile-list { display: grid;grid-template-columns: repeat(1, 1fr); }
.search-item-mobile-list .item { display: inline-grid;justify-items: center;align-items: center;font-size:13px;position: relative; max-width:220px;}
.search-item-mobile-list .item .number { 
    font-size: 25px;
    position: absolute;
    color: #fff;
    bottom: 0;
    z-index: 99999;
    /* left: -4px; */
    font-weight: bold;
    width: 30px;
    text-align: center;
    /* text-align: center; */
    /* background-color: #29838d; */
    background-color: #a31717; 
    border-radius: 0 0 0 0;
}

.search-item-mobile-list .item .img { 
    margin-bottom:10px;
    overflow:hidden;
}
.search-item-mobile-list .item .img img { 
    max-height: 319px;
}



#wrap .search-var {
    margin: 20px 0 0 0;
    display: flex;
    /* background-color: #1c2024; */
    width: 100%;
    max-width: 1024px;
    margin: auto;
}

#wrap .search-var .btn-search  {
    color:rgba(255,255,255,0.5);
    border-right:1px solid hsla(0, 0%, 100%, .1);
    border-top:1px solid hsla(0, 0%, 100%, .1);
    border-bottom:1px solid hsla(0, 0%, 100%, .1);
    padding:20px 20px 20px 25px;
    vertical-align: middle;
    background-color: #1c2024;

    
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* margin-left:20px; */
}
#wrap .search-var .btn-search .ri-search-line  {
    font-size:25px;
}



#wrap .search-var input {
    /* background-color: #1c2024; */
    width:100%;
    border-left:1px solid hsla(0, 0%, 100%, .1);
    border-top:1px solid hsla(0, 0%, 100%, .1);
    border-bottom:1px solid hsla(0, 0%, 100%, .1);
    font-size: 25px; 
    /* color:#0084FF; */
    padding:20px 0 20px 10px;
    /* margin-right:20px; */
    
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-align: center;
    background-color:#fff;
    color:#000;
    border:0px;
    &::placeholder {
        color:#999;
    }
}

#wrap .search-var input:focus {
    /* border-top:3px solid #0084FF;
    border-right:3px solid #0084FF;
    border-bottom:3px solid #0084FF; */
    color:black;

      
}



/*  메인 배너 비율 */
.main-banner .swiper-slide img {
    /* aspect-ratio: 3 / 1.38; */
    aspect-ratio: 3 / 1.45;
}

/* PC 버전 (화면 너비가 768px 이상일 때) */
@media screen and (min-width: 768px) {
    .search-item-mobile-list .item .number {
        font-size: 35px;
        position: absolute;
        color: #fff;
        bottom: 0;
        z-index: 99999;
        /* left: -4px; */
        font-weight: bold;
        width: 45px;
        text-align: center;
        text-align: center;
        /* background-color: #29838d; */
        background-color: #a31717;
        border-radius: 0 0 0 0;
    }

    .main-banner .swiper-slide .container {
        position:absolute;
    
        bottom: clamp(40px, 7.41vh, 80px); 
        left: clamp(20px, 2.08vw, 40px);
    }
    .main-banner .swiper-slide .container .img .play {
        width:23vw; border-radius:16px; background-color:#a31717; display: flex; justify-content: center; align-items: center;
        padding:5px 0;
        position: relative;
        bottom: -45px;
        p {
            color: white; font-weight:600; font-size: 1.5rem; text-align: center; margin: 0;
        }
    }

    .main-banner .swiper-slide .container .img .star {
        width: 23vw;
        border-radius: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 0.5rem;
        line-height: 2rem;
        position: relative;
        bottom: -45px;
    }

    .main-banner .swiper-slide .container .img .star p {
        color: white;
        font-weight: 600;
        font-size: 2rem;
        text-align: center;
        margin: 0;
        margin-left: 0.5rem;
    }

    .main-banner .swiper-slide .container .img .star img {
        width: 30px; /* PC에서의 이미지 크기 */
        height: 30px;
    }
    
}

/* 모바일 버전 (화면 너비가 767px 이하일 때) */
@media screen and (max-width: 767px) {

    .mypage-section .point-list table tr th {
        font-size:11px;
        white-space: nowrap;
    }  
    .mypage-section .point-list table tr td{
        font-size:10px;
    }
    .swpiper-gift-baner-1 { display:block; }
    .swpiper-gift-baner-2 { display:none; }

    .main-banner .swiper-slide .container {
        position:absolute;
    
        bottom: clamp(40px, 9.41vh, 80px); 
        left: clamp(20px, 2.08vw, 40px);
    }
    .main-banner .swiper-slide .container .img .play {
         border-radius:16px; display: flex; justify-content: center; align-items: center;
         background-color:#a31717;
         position: relative;
         bottom: -50px;
    }
    .main-banner .swiper-slide .container .img .play  p {
        color: white; font-weight:600; font-size: 1.7rem; text-align: center; margin: 0;
    }

    .main-banner .swiper-slide .container .img .star {
        width: 23vw;
        height: 7.5vh;
        border-radius: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 0.5rem;
        line-height: 2rem;
        position: relative;
        bottom: -65px;
    }

    .main-banner .swiper-slide .container .img .star p {
        color: white;
        font-weight: 600;
        font-size: 2rem;
        text-align: center;
        margin: 0;
        margin-left: 0.5rem;
    }

    .main-banner .swiper-slide .container .img .star img {
        width: 20px; /* 모바일에서의 이미지 크기 */
        height: 20px;
    }
    .swiper-slide .number { 
        font-size: 25px;
        width: 35px;
    }

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

    .swiper-slide .img .recomand_right_blue { 
        right: -57px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .swiper-slide .img .recomand_right_green { 
        right: -57px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .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 .img .recomand_right_green { 
        right: -57px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .main-section .swiper-slide .img .recomand_right_red { 
        right: -60px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

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


    .main-section .swiper-slide .img .recomand_right_blue { 
        right: -60px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .main-section .item .img .recomand_right_blue { 
        right: -60px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }




    .main-section .swiper-slide .img .recomand_right_green { 
        right: -60px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }

    .main-section .item .img .recomand_right_green { 
        right: -60px;
        width: 150px;
        font-size: 8px;
        top: 7px;
    }


}

/* 태블릿 버전 (화면 너비가 768px 이상 1024px 이하일 때) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
 
    .main-banner .swiper-slide .container {
        position:absolute;
    
        bottom: clamp(40px, 7.41vh, 80px); 
        left: clamp(20px, 2.08vw, 40px);
    }
    .main-banner .swiper-slide .container .img .play {
        width:20vw; height:4.5vh; border-radius:16px; background-color:#a31717; display: flex; justify-content: center; align-items: center;
        position: relative;
        bottom: -40px;
    }
    .main-banner .swiper-slide .container .img .play p{
        color: white; font-weight:600; font-size: 10pt; text-align: center; margin: 0;
    }

    .main-banner .swiper-slide .container .img .star {
        width: 23vw;
        height: 7.5vh;
        border-radius: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: -1.5rem;
        line-height: 2rem;
        position: relative;
        bottom: -30px;
    }

    .main-banner .swiper-slide .container .img .star p {
        color: white;
        font-weight: 600;
        font-size: 15pt;
        text-align: center;
        margin: 0;
        margin-left: 0.5rem;
    }

    .main-banner .swiper-slide .container .img .star img {
        width: 20px; /* 태블릿에서의 이미지 크기 */
        height: 20px;
    }
}

/* 태블릿 버전 (화면 너비가 1024px 이상 1024px 이하일 때) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .main-banner .swiper-slide .container {
        position:absolute;
    
        bottom: clamp(40px, 7.41vh, 80px); 
        left: clamp(20px, 2.08vw, 40px);
    }
    .main-banner .swiper-slide .container .img .play {
        width:20vw; height:4.5vh; border-radius:16px; background-color:#a31717; display: flex; justify-content: center; align-items: center;
        p {
            color: white; font-weight:600; font-size: 1.7rem; text-align: center; margin: 0;
        }
    }

    .main-banner .swiper-slide .container .img .star {
        width: 23vw;
        height: 7.5vh;
        border-radius: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: -1.5rem;
        line-height: 2rem;
    }

    .main-banner .swiper-slide .container .img .star p {
        color: white;
        font-weight: 600;
        font-size: 2rem;
        text-align: center;
        margin: 0;
        margin-left: 0.5rem;
    }

    .main-banner .swiper-slide .container .img .star img {
        width: 30px; /* 태블릿에서의 이미지 크기 */
        height: 30px;
    }
}



@media (max-width: 460px) {
    .comment-header {
    display: none !important;
  }

  .comment-header-mobile {
    display: block;
  }

 

  .result-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: 10px;
    background: #171717;

  }

  .result-vertical .star-score {
    display: flex;
    font-size: 18px;
    gap: 2px;
  }

  .result-vertical .score {
    font-size: 17px;
    font-weight: bold;
    color: white;
  }

  .result-vertical .score .avg-count {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
    margin-left: 2px;
  }
  .result-vertical .count {
    font-size: 13px;
    color: #aaa;
  }

  .star-and-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .star_rating {
    display: flex;
    gap: 4px;
    font-size: 18px;
  }

  .rate-button {
    /* display:none; */
    background: #a31717;
    color: white;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
  }


}



/* 모바일 버전 (화면 너비가 400px 이하일 때) */
@media screen and (max-width: 400px) {
    .search-item-mobile-list .item .number {
            font-size: 18px;
            position: absolute;
            color: #fff;
            bottom: 0;
            z-index: 99999;
            /* left: -4px; */
            font-weight: bold;
            width:27px;
            text-align: center;
            text-align: center;
            /* background-color: #29838d; */
            background-color: #a31717;
            border-radius: 0 0 0 0;
        }
    .main-banner .swiper-slide .container {
        position:absolute;
    
        bottom: clamp(40px, 9.41vh, 80px); 
        left: clamp(20px, 2.08vw, 40px);
    }
    .main-banner .swiper-slide .container .img .play {
        width:20vw; height:3.5vh; border-radius:16px; background-color:#a31717; display: flex; justify-content: center; align-items: center;
        p {
            color: white; font-weight:600; font-size: 1.7rem; text-align: center; margin: 0;
        }
    }

    .main-banner .swiper-slide .container .img .star {
        width: 23vw;
        height: 7.5vh;
        border-radius: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 0.5rem;
        line-height: 2rem;
    }

    .main-banner .swiper-slide .container .img .star p {
        color: white;
        font-weight: 600;
        font-size: 2rem;
        text-align: center;
        margin: 0;
        margin-left: 0.5rem;
    }

    .main-banner .swiper-slide .container .img .star img {
        width: 15px; /* 모바일에서의 이미지 크기 */
        height: 15px;
    }

    .confirm-container .inner .btns .btn-confirm-confirm { 
        padding: 10px 20px;
    }
    .confirm-container .inner .btns .btn-confirm-close {
        padding: 10px 20px;
    }
    
      
}


/* 공통 정보 */
.div-empty {color:#aaa;}

#video {width:100%;height:100%;}

.genre_list span {padding:2px 8px;background:#222;color:#ccc;border-radius:4px;font-size:14px;}
.genre_list span + span {margin-left:5px;}

.ott_list span img {border-radius:10px;}

/* 타이틀 */
.page-title {border-radius:5px;height:50px;font-size:16px;color:#fff;display:flex;align-items: center;background:#151515;padding:0px 20px;margin-bottom:10px;}
.page-title i {font-size:17px;margin-right:8px;}
.page-title span {font-size:14px;margin-left:auto;}
.page-title span strong {color:#a31717;margin-right:5px;}
.page-title .point {font-size:16px;color:#a31717;margin-left:5px;}

/* 공지사항 */
.notice-title {  width:50%; margin:20px auto; border-radius:5px;height:50px;font-size:16px;color:#fff;display:flex;align-items: center;background:#151515;padding:0px 20px;margin-bottom:10px;margin-top:90px;}



.page-tabs {display:flex;margin-top:10px;margin-bottom:10px;}
.page-tabs a {width:33.3333%;align-items: center;justify-content: center;height:40px;background:#ddd;display:inline-flex;color:#888;border-radius:5px;max-width:170px;font-size:13px;}
.page-tabs a + a {margin-left:10px;}
.page-tabs a.active {background:#a31717;color:#fff;}
/* no-data */
.no-data {margin-top:10px;background:rgba(0,0,0,0);width:100%;padding:50px;text-align:center;} 
/* border-radius:10px; */
.no-data img {width:320px;}
/*border-radius:120px;  */
.no-data p {color:#333;line-height:50px;font-weight:bold;font-size:16px;color:#fff;}

/* 포인트 안내 처리 */
.point-section h5 {font-size:18px;font-weight:900;height:50px;display:flex;align-items: center;color:#fff; margin-bottom:15px;}
.point-section .cont {padding:20px;background:#232323;color:#fff;font-size:16px;border-radius:5px;line-height:22px;}
.point-section .cont strong {font-weight:bold;color:#fbd339;}
.point-section .cont .title {font-weight:bold;color:#eee;}
.point-section .coupon-list {display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:10px;}
/* .point-section .coupon-list li a {width:100%;background:#333;text-align:center;display:block;padding:10px;border-radius:5px;} */
.point-section .coupon-list li a.active {background:#171717;}
.point-section .coupon-list li a .strong {font-size:14px;color:#fff;display:flex;align-items: center;justify-content: center;line-height:30px;font-weight:bold;}
.point-section .coupon-list li a .strong .point {color:#fbd339;}
.point-section .coupon-list li a .small {font-size:14px;color:#aaa;display:flex;align-items: center;justify-content: center;line-height:20px;}
.point-section .btn-buy {margin:0 auto;max-width:400px;margin-top:20px;display:flex;height:55px;align-items: center;justify-content: center;font-size:15px;color:#fff;background:#a31717;border-radius:5px;}
.point-section + .point-section {margin-top:20px;}


/* .point-section .desc-info { display: grid;grid-template-columns: repeat(1, 100%);background:#454545;width:100%;} */
.point-section .desc-info { display: grid;background:#454545;width:100%;}
/* .point-section .desc-info li {display:inline-flex;height:70px;align-items: center;border:solid 1px #232323;margin-left:-1px;padding-left:10px;font-size:13px; border:1px solid #fff;flex-wrap: wrap;} */
.point-section .desc-info li.desk {display:inline-flex;}
/* .point-section .desc-info li .title {width:60px;display:inline-flex;font-weight:900;color:#fff;margin-left: 10px;} */
.point-section .desc-info li .desc {color: #ccc;display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: center;}
.point-section .desc-info li .desc a {background:#333;padding:4px 10px;margin-left:10px;border-radius:5px;color:#fff;font-size:12px;    margin-top: 4px;}
.point-section .desc-info li .desc a i {margin-right:4px;}
.point-section .desc-info li .point {color:#ccc; background:#171717;}

/* .point-section .point-info { display: grid;grid-template-columns: repeat(1, 20% 80%);background:#454545; width:100%; margin:0 auto; text-align:center; margin-top:20px;}
.point-section .point-info li { display: inline-grid;justify-items: center;height:50px;align-items: center;font-size:13px; border:1px solid #fff;}
.point-section .point-info li:nth-child(2n) { justify-items: left;padding:10px;}
.point-section .point-info li .title {width:100%;color:#fff;}
.point-section .point-info li .point {color:#fff;}
.point-section .point-info li .gold-option {color:#fff; display: flex;flex-wrap: wrap;}
.point-section .point-info li .gold-option input {    
     padding: 4px;
    border-radius: 4px;
    border: 3px solid yellow;
    text-align: right;
    box-shadow: #d3efff 0px 0px 12px 0px;
    background-color: rgb(255, 255, 255); }
.point-section .point-info li .gold-option a {white-space: nowrap;  background: #999;padding: 4px 10px;margin-left: 5px;border-radius: 5px;color: #fff;font-size: 12px; line-height: 2;}
.point-section .point-info li .btn-gold-option {gap:10px; margin: 5px 0 10px 0;color:#fff; display: flex;flex-wrap: wrap; height: 120px;}
.point-section .point-info li .btn-gold-option a {background: #999;padding: 4px 0px;border-radius: 5px;color: #fff;font-size: 12px; margin-top:5px; }
.point-section .point-info li .btn-gold-option .point {
    
}


.point-section .point-info li .gold-option .receive_mm_id {
    text-align: center;
} */


/* 포인트 안내 처리 */
.gold-section h5 {font-size:18px;font-weight:900;height:50px;display:flex;align-items: center;color:#fff;}
.gold-section .cont {padding:20px;background:#232323;color:#fff;font-size:16px;border-radius:5px;line-height:22px;}
.gold-section .cont strong {font-weight:bold;color:#fbd339;}
.gold-section .cont .title {font-weight:bold;color:#eee;}
.gold-section .aution-list {display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:10px;}
.gold-section .aution-list li a {width:100%;background:#333;text-align:center;display:block;padding:10px;border-radius:5px;}
.gold-section .aution-list li a.active {background:#171717;}
.gold-section .aution-list li a .strong {font-size:14px;color:#fff;display:flex;align-items: center;justify-content: center;line-height:30px;font-weight:bold;}
.gold-section .aution-list li a .strong .point {color:#fbd339;}
.gold-section .aution-list li a .small {font-size:14px;color:#aaa;display:flex;align-items: center;justify-content: center;line-height:20px;}
.gold-section .btn-buy {margin:0 auto;max-width:400px;margin-top:20px;display:flex;height:55px;align-items: center;justify-content: center;font-size:15px;color:#fff;background:#a31717;border-radius:5px;}
.gold-section + .gold-section {margin-top:20px;}

.gold-section .user-info { margin-top:20px;overflow-x: auto;white-space: nowrap;margin-bottom:10px;background:#0f0f0f;display: flex; border:1px solid #fff;background:#454545;border-radius:5px;border:solid 1px #ddd;}
.gold-section > .user-info > .img {text-align:center;padding-top:20px;padding-bottom:10px;width:30%;}
.gold-section > .user-info > .img .user-img {width:80px;height:80px;}
.gold-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;}
.gold-section > .user-info > .img .no-img i {font-size:48px;color:#ccc;}
.gold-section > .user-info > .img .title {font-size:14px;margin-top:10px;color:#fff;font-weight:bold;}

.gold-section .desc-info { display: grid;grid-template-columns: repeat(1, 100%);background:#454545;width:100%;}
.gold-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; border:1px solid #fff;}
.gold-section .desc-info li.desk {display:inline-flex;}
.gold-section .desc-info li .title {width:60px;display:inline-flex;font-weight:900;color:#fff;}
.gold-section .desc-info li .desc {color:#ccc;}
.gold-section .desc-info li .desc a {background:#333;padding:4px 10px;margin-left:10px;border-radius:5px;color:#fff;font-size:12px;}
.gold-section .desc-info li .desc a i {margin-right:4px;}
.gold-section .desc-info li .point {color:#ccc; background:#171717;}

.gold-section .gold-info { display: grid;grid-template-columns: repeat(1, 20% 80%);background:#454545;width:100%;}
.gold-section .gold-info li { display: inline-grid;justify-items: center;height:50px;align-items: center;font-size:13px; border:1px solid #fff;}
.gold-section .gold-info li:nth-child(2n) { justify-items: left;padding-left:20px;}
.gold-section .gold-info li .title {width:100px;font-weight:900;color:#fff;}
.gold-section .gold-info li .point {color:#fff;}
.gold-section .gold-info li .gold-option {margin: 10px 0 0 0;color:#fff; display: flex;}
.gold-section .gold-info li .gold-option input { width:120px;margin-right:20px;border-radius: 5px; }
.gold-section .gold-info li .gold-option a { background: #999;padding: 4px 10px;margin-left: 5px;border-radius: 5px;color: #fff;font-size: 12px; }
.gold-section .gold-info li .btn-gold-option { margin: 5px 0 0 0;color:#fff; display: flex;}
.gold-section .gold-info li .btn-gold-option a {width:300px; background: #999;padding: 4px 10px;margin-left: 10px;border-radius: 5px;color: #fff;font-size: 12px; }

.gold-nav-section {background: #232323;border-radius: 5px;color: #fff;display: flex;}
.gold-nav-section div {margin: 0 10px;color: #fff;font-size: 16px;padding: 16px 15px;border-radius: 5px;display: flex;height: 51px;align-items: center;}
.gold-nav-section div.active {background: #d9d9d9;color:#000;}
.gold-nav-section div .btnBack {color:#fff;font-size:20px;width:30px;}
.gold-nav-section div .count {margin-left:auto;color:#a31717;}





/* 이미지 로딩 처리 */
.img-noimg {display:flex;align-items: center;justify-content: center;display:none;aspect-ratio:1/1.35;width:100%;height:100%;background:#171717;border-radius:5px;}
.img-noimg .inner { }
.img-noimg .inner i {display:flex;align-items: center;justify-content: center;font-size:46px;color:#454545;width:100%;}
.img-noimg .inner .subject {display:flex;align-items: center;justify-content: center;font-size:14px;color:#454545;width:100%;margin-top:10px;}
.img-thumb {display:flex;align-items: center;justify-content: center;display:none;aspect-ratio:2/1.2;width:200px;height:100%;background:#171717;border-radius:5px;}
.img-thumb .inner { }
.img-thumb .inner i {display:flex;align-items: center;justify-content: center;font-size:46px;color:#454545;width:100%;}
.img-thumb .inner .subject {display:flex;align-items: center;justify-content: center;font-size:14px;color:#454545;width:100%;margin-top:5px;}
.img-loader {width:50px;height: 50px;display:grid;position:absolute;top:50%;left:50%;margin-left:-25px;margin-top:-25px;}
.img-loader::before,.custom-loader::after {content:"";grid-area: 1/1;--c: radial-gradient(farthest-side,#333333 92%,#0000);
    background:
            var(--c) 50%  0,
            var(--c) 50%  100%,
            var(--c) 100% 50%,
            var(--c) 0    50%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation: s2 1s infinite;
}
.img-loader::before {margin:4px;filter:hue-rotate(45deg);background-size: 8px 8px;animation-timing-function: linear}
@keyframes s2{100%{transform: rotate(.5turn)}}

@media screen and (max-width:1150px) {
    .videos-section{
        margin-top: 70px;
    }
	#contents {padding:10px;}
	#header {padding-left:10px;}
    .mypage-section {
        margin-top:70px;
    }
    .notice-title {
        margin-top:70px;
    }
    .wrap-detail .main-info {margin:0 auto; width:100%; background:#232323;
        /* padding:10px 25px 25px 25px; */
        border-radius:10px;position:relative;}
	/* 푸터 */
	#footer_wrap .footer {
        align-items: center;
        /* padding: 20px; */
        padding: 30px 20px 0 20px;
        font-size: 12px;
        display: flex;
        flex-direction: column;}
    #footer_wrap .footer ul {justify-content: center;padding-bottom:30px;gap: 50px;}
	#footer_wrap .footer ul li a {font-size:13px;}
    #footer_wrap .notices .inner a {padding-left:10px;}

    /*  메인 배너 비율 */
    .main-banner .swiper-slide img {aspect-ratio: 3 / 1.65;}

    
}


@media screen and (max-width:1000px) { 
    .mypage-section {
        margin-top:70px;
    }
    .notice-section {
        width: 80%;
    }
    .notice-title {
        width:80%;
    }
    #header .inner .menu-end a.btn-point .point-bubble {
        position:absolute;
        top:40px;
        right:50px;
        display:none;
    }
    #header .inner .menu-end a.btn-point .point-bubble:after {
        content:'';
        position:absolute;
        bottom:70px;
        right:-7px;
        opacity: 0.9;
        border-left:7px solid #000;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent;
        
    }
    #header .inner .menu-end a.btn-point .point-bubble:before {
        content:'';
        position:absolute;
        bottom:70px;
        right:-8px;
        opacity: 0.9;
        border-left:7px solid #777;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent;
        transform:translateY(-50%); 
    }

    .item-list .items .item .title {
        /* font-size: 16px; */
        color: #fff;
        max-height: 42px;
        overflow: hidden;
        margin-top: 5px;
        line-height: 1.3;
        color: #fff;
        margin-top: 5px;
        /* text-align: center; */
        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; */
        min-height: 43px;
  }
}


@media screen and (max-width:800px) {
   
      


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

}




@media screen and (max-width:560px) {
    .item-list .items {display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;}
    /* 모바일은 9번째 제거한다 */
    .main-section > .item-list > .items .swiper-slide:nth-child(10) {
        display:none;
    }
}




@media screen and (max-width:360px) {
    .wrap-detail .popup-content .right .list {
        font-size:12px;
    }
    .comments .result .star-score {
        display: flex;
        font-size: 16px;
        align-items: center;
        gap: 0px;
        line-height: 2.8; 
    }
    .comments .result .score {
        position: absolute;
        right: 15px;
        font-weight: bold;
        font-size: 24px;
        top: 15px;
        display: flex;
    }

    .comments .result .count {
        margin-top: 10px;
        font-size: 14px;
        color: #aaa;
    }

    .wrap-detail .main-info .quick-menu-left a {
        width:30px;
        height:30px;
    }
    .wrap-detail .main-info .title {
        font-size:16px;
        padding:0px;
    }
  
    .mypage-section h3 {
        font-size:12px;
    }
    .mypage-section .coupon-list table tr th {
        white-space: nowrap;
        font-size:11px;
        font-weight: 500;
    }
    .mypage-section .coupon-list .use {
        font-size:8px;
        /* margin-bottom: 10px; */

    }
    .mypage-section .coupon-list table tr td {
        font-size:10px;
    }
    .item-list .items {display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;}
    /* .wrap-detail .video-tabs .tabs {padding:0px 2px}
    .wrap-detail .video-tabs .tabs a {padding:6px 7px} */
    .wrap-detail .main-info .date {
        display:none;
    }
    .wrap-detail .main-info .add-info {
        display: none;;
    }
    /* .wrap-detail .main-info .quick-menu {
        width: 100%;
        margin-left: 10px;
        position: relative;
        display: none;
        gap: 5px;
        justify-content: center;
    } */
    .wrap-detail .main-info .quick-menu a {
        /* width: 150px; */
        width: 30px;
        height: 30px;
        /* margin-left: 20px; */
        gap: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #a31717;
        border-radius: 5px;
    }

    .wrap-detail .main-info .btns .btn {
        margin-right: 0px;
    }

}


/* 헤더 반응형 처리 : 960 */
@media screen and (max-width:680px) {
    .comment-header {
        display: none !important;
      }
      .result-vertical .score .avg-count {
        font-size: 12px;
        color: #aaa;
        margin-top: 2px;
            margin-left: 2px;
      }

      .comment-header-mobile {
        display: block;
      }
    
      
    
      .result-vertical {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.2;
        margin-left: 10px;
        padding: 4px 8px;
        border-radius: 10px;
        background: #171717;
    
      }
    
      .result-vertical .star-score {
        display: flex;
        font-size: 18px;
        gap: 2px;
      }
    
      .result-vertical .score {
        font-size: 17px;
        font-weight: bold;
        color: white;
      }
    
      .result-vertical .score .avg-count {
        font-size: 12px;
        color: #aaa;
      }
      .result-vertical .count {
        font-size: 13px;
        color: #aaa;
      }
    
      .star-and-button {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
      }
    
      .star_rating {
        display: flex;
        gap: 4px;
        font-size: 18px;
        color: white;
      }
    
      .rate-button {
        /* display:none; */
        background: #a31717;
        color: white;
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        white-space: nowrap;
      }




    .no-data img {
        width:200px !important;
    }
    #footer_wrap .footer ul { 
        padding-bottom: 70px;
    }
    .mypage-section {
        margin-top:0px;
    }
    .wrap-detail .video-tabs .tabs a {font-size:12px;display:inline-flex;padding:6px 0;}
    .videos-section {
        margin-top: 0px;
    }
    .notice-section {
        height: 100%;
        width: 100%;
    }
    .notice-title {
        width: 100%;
        margin-top:0px
    }

	#side {left:-220px;height:calc(100vh - 56px);margin:56px 0 0 0;}
	#side.active {left:0;overflow-y: auto;}
	#footer_mobile {display:block;}
	#contents {padding:0px 10px 10px 10px; max-width:98%;}
	#contents .main-section h2{line-height:50px;font-size:13px;font-weight:bold;}
	#contents .banners .banner { flex-grow: 1;width:50%;padding:0.2em;box-sizing:border-box;}
    #contents .banners.banner-pc {display:none;}
    #contents .banners.banner-mobile {display:flex;}

    /*  업체 배너 부분 */

    #contents .main-section .test_banner {
        width:100%;
        height: 6rem;
        background-size: 100% 100%; 
        background-position: center; 
        background-repeat: no-repeat;
    }

    #contents .main-section .test_banner2 {
        display:none;
       
    }
    .swpiper-active .swiper-slide .img img {
        width:100%;
        height: 100%;
    }

     /* 검색부분 */
    
    #contents .search-content{
        display: none;
        position: relative;
        width: 100%;
        padding:10px 0;
    }

    #contents .search-content input {
        width: 100%;
        padding: 10px 40px 10px 50px;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 4px;
       
    }
    #contents .search-content .btn-search {
        position: absolute;
        left: 10px;
        top: 50%;
        font-size:24px;
        color:#333;
        transform: translateY(-50%);
        pointer-events: none;
    }

	/* .메인 슬라이더 */
	.swiper-slide .title {font-size:12px;}

	/* 아이템 */
	.item-list .items .item .title {
        font-size: 14px;
        max-height: 33px;
        /* overflow: hidden; */
        line-height: 1.3;
        color: #fff;
        margin-top: 5px;
        /* text-align: center; */
        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; */
        min-height: 36px;
    }

    
    
    

    /* 리트스 아이템 */
    .swiper-slide .img img {border-radius:5px;aspect-ratio: 1 / 1.45; 
        /* min-height:100px; */
    }
    .item-list .items .item .img img {border-radius:5px;aspect-ratio: 1 / 1.45;}
    .swiper-slide .category {font-size:12px;}
    .swiper-slide .playtype {font-size:12px;}
    .swiper-slide .fav {font-size:12px;}
    .item-list .items .item .category {font-size:12px; 
        /* padding:0px 5px */
    }
    .item-list .items .item .playtype {font-size:12px;}
    .item-list .items .item .fav {font-size:12px;}


	/* ott 리스트 */
	.ott_list {margin-bottom:10px;margin-bottom:10px;background:#0f0f0f;padding-left:0px;padding-right:0px;}
	.ott_list .item a {display:inline;}
	.ott_list .item a img {border-radius:10px;width:55px;}
	.ott_list .item + .item {margin-left:10px;}
	.ott_list .left-icon {display:none;}
	.ott_list .right-icon {display:none;}



	/* 탑 카테고리 */
	.top-categories {overflow-x: auto;white-space: nowrap;margin-bottom:10px;background:#0f0f0f; }
	.top-categories::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
	.top-categories .carousel-items {display: inline-block;font-size:20px;}
	.top-categories .carousel-items .item { width:80px; display: inline-block;margin-right:2px;padding:0px 12px;cursor: pointer;background:#333;height:35px;font-size:12px;border-radius:3px;display:inline-flex;align-items: center;justify-content: center;}
	.top-categories .carousel-items .item a {color:#979797;font-size:12px;}

	/* 상세화면 */
	.wrap-detail .empty-video-container {height:240px;}
	.wrap-detail .item-thumbnail .thumbnail-list {display:grid;grid-template-columns: repeat(1, 1fr);gap: 10px;}
    .wrap-detail .item-thumbnail .subject .select-wrap {max-width:100%;}
    .wrap-detail .item-cast .cast-list::-webkit-scrollbar-thumb {display: none;}
	.wrap-detail .item-cast .cast-list {margin-top:20px;overflow-x: auto;margin-bottom:10px;display: grid;grid-gap: 10px;overflow-x: scroll;grid-template-columns: repeat(auto-fill,minmax(100px,1fr));grid-auto-flow: column;grid-auto-columns: minmax(100px,1fr);overflow-x: auto;}
	.wrap-detail .item-cast .cast-list .item .right {display:block;}
	.wrap-detail .item-cast .cast-list .item .bottom .title {font-size:12px;font-weight:bold;margin-top:5px;}
	.wrap-detail .item-cast .cast-list .item .bottom .contents {margin-top:10px;color:#aaa;font-size:11px;}
	.wrap-detail .item-cast .cast-list .item .top img {width:200px;border-radius:8px;}
	.wrap-detail .item-title {display:block;}
	.wrap-detail .item-title .right {margin-top:20px;display:flex;justify-content: center;padding-top:24px;border-top:solid 1px #333;}
	.wrap-detail .item-title .right a {color:#bbb;font-size:13px;align-items:center;display:inline-flex;}
	.wrap-detail .item-title .right a + a {margin-left:14px;}
	.wrap-detail .item-title .right a i {font-size:22px;margin-right:5px;}
	.wrap-detail .play-container {min-height:140px;margin-bottom:10px;}
	.wrap-detail .item-thumbnail .thumbnail-list .item .img img {width:140px;}
	.wrap-detail .item-thumbnail .thumbnail-list .item .right {}
	.wrap-detail .item-thumbnail .thumbnail-list .item .right .title {font-size:13px;font-weight:normal;margin-top:0px;}
	.wrap-detail .item-thumbnail .thumbnail-list .item .right .contents {margin-top:5px;}

    .notice-section .board-list {margin-top:10px;}
    .notice-section .board-list table {width:100%;}
    .notice-section .board-list table tr th {height:50px;font-size:12px;font-weight:bold;background:#333;border:solid 1px #bbb;color:#fff;}
    .notice-section .board-list table tr td {height:40px;font-size:11px;color:#fff;font-weight:normal;background:#000;border:solid 1px #bbb;padding:5px;text-align:center;}


	/* 알럿 */
	.alert-container .inner {margin-left:20px;margin-right:20px;}
	.alert-container .inner .message {min-height:120px;}
	.confirm-container .inner {margin-left:20px;margin-right:20px; padding:20px; }
	.confirm-container .inner .message {min-height:120px;}


	.search-result {font-size:16px;}

	#share-container .inner {margin-left:20px;margin-right:20px;}
	#report-container .inner {margin-left:20px;margin-right:20px;}

	.item-list .mypage .item-list .img {position:relative;display:block;}
	.item-list .mypage .item-line .img img {border-radius:5px;aspect-ratio: 1 / 1.26;width:110px;height:auto;}
	.item-list .mypage .item-line .right .center {font-size:13px;color:#bbb;}
	.item-list .mypage .item-line .right .center div + div {margin-top:6px;}
	.item-list .mypage .item-line .right .center .title {font-size:16px;width:100%;font-weight:normal;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#fff;margin-bottom:10px;}
	.item-list .mypage .item-line .right .center .title .num {color:#f33;}
	.item-list .mypage .item-line .right .center .category {font-size:13px;width:100%;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#bbb;}
    .item-list .mypage .item-line .right .center .playtype {font-size:13px;width:100%;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;color:#f33;}
	.item-list .mypage .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 .desc {display: -webkit-box;
        /* Flex 기반 레이아웃 */
        -webkit-box-orient: vertical;
        /* 세로 방향 */
        overflow: hidden;
        /* 넘치는 내용 숨김 */
        text-overflow: ellipsis;
        /* 말줄임표(...) 추가 */
        -webkit-line-clamp: 2;
        }

	.button-wrap {font-size:14px;position:absolute;right:10px;top:-6px;}
	.button-wrap .btnAllDelete {color:#ddd;height:40px;width:120px;border:solid 1px #ddd;display:flex;align-items:center;justify-content:center;}

	.request-section .inner {width:100%;}
	.request-section .inner form {width:100%;}
	.request-section .inner .form-row label {width:100%;}
	.request-section .inner .form-row label .form-text {width:100%;}
	.request-section .inner .form-row .textarea {width:100%;}

    .genre_list span {padding:2px 8px;background:#222;color:#ccc;border-radius:4px;font-size:11px;padding-bottom:4px;}
    .genre_list span + span {margin-left:5px;}

    /* no-data */
	.no-data {margin-top:10px;background:rgba(0,0,0,0);width:100%;padding:30px;text-align:center;border-radius:10px;}
	.no-data img {width:320px;}
	.no-data p {color:#333;line-height:50px;font-weight:bold;font-size:16px;color:#fff;}

    /* 퀵메뉴 */
    #family-container {top:-340px;height:340px;position:fixed;z-index:99;padding:20px;width:100%;display:flex;max-width:500px;left:auto;margin-left:0px;}
    
        /*  메인 배너 비율 */
        /* .swpiper-banner .swiper-slide {
            height: 20vh;
        } */
        /* .swiper-backface-hidden .swiper-slide
        {
            height: 30vh;
        } */
    .main-banner .swiper-slide img {aspect-ratio: 3 / 1.65;}
    .main-banner .swiper-slide .container .img .play {
        position: absolute;
        bottom:-65px;
        width:23vw; border-radius:16px;  display: flex; justify-content: center; align-items: center;
        padding:3px 0;
        background-color:#a31717;
        height:30px;
        p {
            color: white; font-weight:600; text-align: center; margin: 0;
            font-size:10pt;
        }
    }
    .main-banner .swiper-slide .container .img .play p{
        color: white; font-weight:600; text-align: center; margin: 0;font-size:10pt;
    }

    /* 기본 스타일 */
    .main-banner .swiper-slide .container .img .star {
        padding: 4px;
        position: absolute;
        bottom: -40px;
        width: 1.3rem;
        height: 1.3rem;
    }

    .main-banner .swiper-slide .container .img .star p {
        font-size: 0.8rem;
        margin-top: 3px;
        font-size:10pt;
    }




    /* 영상 상세 정보 */
    .wrap-detail .main-info {padding:11px;border-radius:0px;}
    .wrap-detail .main-info .date span {font-size:11px;}
    .wrap-detail .main-info .title {font-size:18px;     }
    .wrap-detail .main-info .add-info div {font-size:12px;}
    .wrap-detail .main-info .btns {max-width:100%;}
    .wrap-detail .main-info .btns .btn a {max-width:100%;}
    .wrap-detail .main-info .process {
        margin-top: 10px;
        width: 100%;
        display: flex ;
        align-items: center;
        height: 30px;
        /* max-width: 450px; */
        margin-bottom: -5px;
    }
    
    /* .wrap-detail .video-tabs .tabs {height:52px;} */
    .wrap-detail .video-tabs .tab-episode .item .img img {width:140px;}
    .wrap-detail .video-tabs .tab-episode .item .right .title {font-size:14px;}
    .wrap-detail .video-tabs .tab-episode .item .right .contents {font-size:12px;}

    .wrap-detail .video-tabs .tab-short .item .info .img img {width:140px;}
    .wrap-detail .video-tabs .tab-short .item .info .right .title {font-size:12px;}
    .wrap-detail .video-tabs .tab-short .item .contents {font-size:12px;overflow:hidden;}


    /* .wrap-detail .video-tabs .tabs a {font-size:11px;display:inline-flex;padding:6px 8px;} */
    /* .wrap-detail .video-tabs .tabs a {font-size:11px;display:inline-flex;padding:6px 0;} */
    .wrap-detail .video-tabs .tab-cmt .comments .comment-write .editor {display:block;}
    .wrap-detail .video-tabs .tab-cmt .comments .comment-write .editor textarea {width:100%;}
    .wrap-detail .video-tabs .tab-cmt .comments .comment-write .editor .btn-cmt {margin-left:0px;margin-top:5px;width:100%;height:40px;}
    .wrap-detail .video-tabs .tab-cmt .comments .comment-list .item .item-reply .editor {display:block;}
    .wrap-detail .video-tabs .tab-cmt .comments .comment-list .item .item-reply .editor textarea {}
    .wrap-detail .video-tabs .tab-cmt .comments .comment-list .item .item-reply .editor .btn-cmt {margin-left:0px;height:40px;width:100%;margin-top:3px;}
    

    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8); 
        display: none; 
        z-index: 97; }

    

    
    .warn-message {font-size:13px;}

    /* 마이페이지 */
    /* .mypage-section {padding:10px; margin-top: 0px;} */
    .mypage-section .more {display:inline-flex;}
    .mypage-section .desc-info li.desk {display:none;}
    .mypage-section .tbl th {font-size:12px;width:90px;}
    .mypage-section .point-list {margin-top:10px;}
    .mypage-section .point-list table {width:100%;}
    .mypage-section .point-list table tr th.desktop {display:none;}
    .mypage-section .point-list table tr td.desktop {display:none;}
    .mypage-section .point-list table tr td {font-size:12px;}
    .mypage-section .result-filter {margin-bottom:20px;display:flex;margin-top:20px;position:relative;}
    .mypage-section .result-filter .search-result {font-size:14px;}
    .mypage-section .desc-info { display: grid;grid-template-columns: repeat(1, 100%);}
    .mypage-section .my-list {grid-template-columns: repeat(1, 100%);grid-gap:10px 0px;}
    .mypage-section .my-list li {width:100%;}

    /* 포인트 안내 처리 */
    .point-section h5 {font-size:16px;}
    .point-section .cont {font-size:14px;}
    .point-section .btn-buy {width:100%;max-width:100%;}

    /* 이미지 로딩 처리 */
    .img-noimg {aspect-ratio:1 / 1.45;}
    .img-noimg .inner i {font-size:26px;}
    .img-noimg .inner .subject {font-size:11px;margin-top:5px;}
    .img-thumb {width:140px;}
    .img-thumb .inner i {font-size:26px;}
    .img-thumb .inner .subject {font-size:11px;margin-top:5px;}
    .item-list .mypage .img-noimg {width:110px;aspect-ratio:1/1.26;}

    /* 검색 처리 */
    /*
    .videos-filter {display:block;}
    .videos-filter .select-wrap {width:100%;right:auto;}
    .videos-filter .search-result {padding-bottom:15px;}
    .videos-filter .input {margin-bottom:10px;width:100%;max-width:100%;}
    */
    
    /* 검색 처리 */
    .videos-filter {display:block; flex-direction:column;}
    .videos-filter .select-group-wrap {width:100%;right:auto;margin-bottom: 10px;}
    .videos-filter .select-wrap {width:100%;right:auto;margin-bottom: 10px;}
    .videos-filter .search-result {padding-bottom:15px;}
    .videos-filter .input {margin-bottom:10px;width:100%;max-width:100%;}

    .search-section .videos-filter .select-group-wrap {width:100%;right:auto;margin-bottom: 10px;display: flex;flex-direction: column;right:5px}
    .search-section .videos-filter .select-wrap {width:100%;right:auto;margin-bottom: 10px;}
    .search-section .videos-filter .input { max-width: none;}
    
        
    #footer_wrap  {
    
        /* bottom: 50px; */
        bottom: 10px;
        /* margin-top: 100px; */
        clear: both;
        /* display: block; */
        position: relative;
        width: 100%;
        /* margin: 0 auto; */
        font-size: 12px;
        background: #090909;
        border-top: solid 1px #777;
    }

    /* #footer_wrap .footer ul {
        padding-bottom:70px
    } */
    #footer_wrap .footer ul li a {
        white-space: nowrap;
        font-size: 13px;
    }  
    
}



@media screen and (max-width:500px) { 
    #contents .main-section .test_banner {
        width: 100%;
        height: 3rem;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 0px;
    }
    #footer_wrap .footer ul {
        gap: 10px;
        padding-bottom: 25px;
    }
}


/* 헤더 반응형 처리 :1024 */
@media screen and (max-width:1024px) {

    .community-menu {
        display: none !important;
    }
    /* 검색창 */

    .swpiper-gift-baner-1 { display: block !important; }
    .swpiper-gift-baner-2 { display: none !important; }

    
    #search-container {padding:10px;align-items:normal;}
    #search-container .inner {width:100%;max-width:500px;margin-left:0px;left:auto;top:auto;position:relative;}

    #cc-container {padding:10px;align-items:normal;}
    #cc-container .inner {width:100%;max-width:500px;margin-left:0px;left:auto;top:auto;position:relative;}

    #char-container {padding:10px;align-items:normal;}
    #char-container .inner {width:100%;max-width:500px;margin-left:0px;left:auto;top:auto;position:relative;margin: auto;}
    #char-container .inner .char-list { grid-template-columns: repeat(4, 25%);color:#fff; }
    
    .top-categories {overflow-x: auto;white-space: nowrap;margin-bottom:10px;background:#0f0f0f; }
	.top-categories::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
	.top-categories .carousel-items {display: inline-block;font-size:20px;}
	.top-categories .carousel-items .item { width:80px; display: inline-block;margin-right:2px;padding:0px 12px;cursor: pointer;background:#333;height:35px;font-size:12px;border-radius:3px;display:inline-flex;align-items: center;justify-content: center;}
	.top-categories .carousel-items .item a {color:#979797;font-size:12px;}

    .wrap-detail .popup-content {
        grid-template-columns: 1fr; /* 한 열로 정렬 */
        width: 100%; /* 화면 폭의 90% 차지 */
        height: 100%;
        border-radius: 0;
        border: 0;
    }


       
    .wrap-detail .popup-content .left 
  {
        margin-top: 10px;
        height: 120px;
        text-align: center; /* 가운데 정렬 */
        img {width: 50%;}
        
        .playlist-thumbnail{
            height: 0;
            opacity:0;
        }
    }

       
    .wrap-detail .popup-content .left .all_add {max-height: 50px; max-width: 40%;}
   
       
    .wrap-detail .popup-content .left .playlist-thumbnail{
        height: 0;
        opacity:0;
    }

    .wrap-detail .popup-content .right {
        margin-top: 0;
        display: flex;
        height: 80vh;
        flex-direction: column;
        gap: 10px; /* 요소 간격 */
        align-items: center; /* 중앙 정렬 */
        text-align: center;
    }
    .wrap-detail .popup-content .right input {
        outline: none;
        width: 80%;
        border-radius: 6px;
        height: 30px;
        padding: 10px;
    }

    #closePopupButton {
        display: none;
    }
    .wrap-detail .popup-content .right .list-wrapper {
        margin-top:0;
        white-space: normal;
        width: 90%; /* 리스트의 너비 */
        max-height: 45%;/* 스크롤이 필요한 높이 제한 */
        /* max-height: 60%; */
        overflow-y: auto; /* 세로 스크롤 활성화 */ /* 선택적으로 스크롤 영역 표시 */
        padding: 10px; /* 내부 여백 */
        /* border-radius: 6px; */ /* 부드러운 모서리 */
        border-radius: 0;
        scrollbar-width: thin; /* Firefox용 스크롤바 너비 */
        scrollbar-color: #a31717 transparent; /* Firefox용 스크롤바 색상 */
        border-bottom: 1px solid #676767;
        border-top: 1px solid #676767;
    }
  

    /* 리스트 내부 스타일 */
    .wrap-detail .popup-content .right .list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        margin-bottom: 6px; /* 리스트 간 간격 */
        width:100%;
        padding:0px 5px;
    }
    .wrap-detail .popup-content .right .top {
        width:90%;
    }
    .wrap-detail .popup-content .right .baro {
        display:flex;
    }
    .wrap-detail .popup-content .right .back {
        display:flex;
    }
    .wrap-detail .popup-content .left .baro1 {
        display: none;
    }
    
    .wrap-detail .popup-content .right input {
        width: 90%; /* 입력 필드를 화면에 맞춤 */
    }

    .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;
    }


}


@media screen and (min-width:680px) {

    #contents #banners.banner-pc {display:flex;}
    #contents #banners.banner-mobile {display:none;}
}

/* 기본 스타일 (모든 화면 크기에서 공통적으로 적용될 스타일) */
#contents .main-section {
    margin-top: 10px;
}

#contents .main-section h2 {
    line-height: 33px;
    margin-bottom: 8px;
}

#contents .main-section .top-categories {
    background-color: #000;
}

#contents .main-section .top-categories.auto-scroll-category {
    background-color: #000;
}

#contents .main-section .swiper-carousel-items {
    background-color: #000;
}

#contents .main-section .swiper-slide.item {
    width: auto;
    margin-top: 20px;
    margin-right: 12px;
    padding: 4px 12px;
    border-radius: 12px;
}

#contents .main-section .swiper-slide.item a {
    color: #fff;
    font-size: 15px;
}

/* 모바일 버전 (화면 너비가 768px 이하일 때) */
@media screen and (max-width: 768px) {

    .wrap-detail .popup-content .right .list-wrapper {
        margin-top:0;
        width: 90%; /* 리스트의 너비 */
        max-height: 55%;/* 스크롤이 필요한 높이 제한 */
        /* max-height: 60%; */
        overflow-y: auto; /* 세로 스크롤 활성화 */ /* 선택적으로 스크롤 영역 표시 */
        padding: 10px; /* 내부 여백 */
        /* border-radius: 6px; */ /* 부드러운 모서리 */
        border-radius: 0;
        scrollbar-width: thin; /* Firefox용 스크롤바 너비 */
        scrollbar-color: #a31717 transparent; /* Firefox용 스크롤바 색상 */
        border-bottom: 1px solid #676767;
        border-top: 1px solid #676767;
    }

    @media screen and (max-width: 768px) {
        #contents .main-section.m3{
            margin-top: -150px;
        }
    }

    @media screen and (max-width: 400px) {
        #contents .main-section.m3{
            margin-top: -110px;
        }
    }

    @media screen and (max-width: 768px) {
        #contents .main-section.m4{
            height: 180px; /* 고정된 높이 */
        }
    }

    @media screen and (max-width: 400px) {
        #contents .main-section.m4{
            height: 155px; /* 고정된 높이 */
        }
    }

    #contents .main-section h2 {
        font-size: 15px;
        line-height: 28px;
        margin-bottom: 0px;
    }

    #contents .main-section .swiper-slide.item {
        padding: 0px 10px;
        margin-top: 15px;
        margin-right: 8px;
        font-size: 14px;
    }

    #contents .main-section .swiper-slide.item a {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* PC 버전 (화면 너비가 769px 이상일 때) */
@media screen and (min-width: 769px) {
    #header .inner a.logo {
        margin-left:-12px;
    }
    #contents .main-section .swiper-slide.item {
        padding: 3px 20px;
        margin-top: 25px;
        margin-right: 15px;
        font-size: 16px;
    }

    #contents .main-section .swiper-slide.item a {
        font-size: 16px;
        line-height: 1.7;
    }

    #contents .main-section h2 {
        font-size: 22px;
    }

    .main-banner .swiper-slide .container .img .play {
        height:40px;
    }
    #footer_wrap .footer {
        /* padding:30px 20px; */
    }
}


@media (max-width: 500px) {
    
    #footer_wrap .footer ul {
        gap: 10px;       /* 아이템 간 간격 */
        margin-bottom: 50px;
        padding-bottom: 30px;
    }
    #footer_wrap .footer ul li:nth-child(1) {
        width:100%;
        margin-bottom:10px;
    }
}


/* 아이폰  15 PRO */

@supports (-webkit-touch-callout: none) {
    @media only screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) {
        #footer_mobile ul li a{
            font-size:12px;
        }
        #footer_mobile ul li{
            margin-bottom: 5px;
        }

        #footer_mobile {
            padding: 0px 15px;
        }
    }
  }
  
  
/* 아이폰  16 PRO  예상 */

@supports (-webkit-touch-callout: none) {
    @media only screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) {
        #footer_mobile ul li a{
            font-size:12px;
        }
        #footer_mobile ul li{
            margin-bottom: 5px;
        }

        #footer_mobile {
            padding: 0px 15px;
        }
    }
  }



  @media (max-width: 1024px) {
    .floating-community-banner {
        display: none; /* 처음에는 표시 안함 */
        opacity: 0;
        transform: translateY(20px); /* 살짝 아래에서 시작 */
        transition: opacity 0.6s ease, transform 0.6s ease;
        position: fixed;
        bottom: 20px;
        right: 10px;
        z-index: 9999;
        width: 200px;
        max-width: 90%;
        pointer-events: none;
    }

    .floating-community-banner.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .floating-community-banner img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 680px) {
    .floating-community-banner {
        bottom: 70px;
      
    }
}







.btn-top {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 1000;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); /* 반투명 검정 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(80px);
    transition: 0.25s;
    border: 1px solid #313131;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn-top.show {
    opacity: 1;
    transform: translateY(0);
}

.btn-top i {
    font-size: 22px;
    line-height: 1;
    color: white;
}

@media (max-width: 768px) {
    .btn-top {
        width: 55px;
        height: 55px;
        right: 20px;
        bottom: 80px;
    }

    .btn-top i {
        font-size: 20px;
    }
}



@media (max-width: 460px) {
    .btn-top {
        width: 45px;
        height: 45px;
        right: 10px;
        bottom: 80px;
    }

    .btn-top i {
        font-size: 16px;
    }
}