@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; box-sizing: border-box; word-break: keep-all; }

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

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

a:hover, a:focus { color: inherit; text-decoration: none; }

/* HTML5 display-role reset for older browsers */
body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

table caption { display: none; }

img { max-width: 100%; height: auto; }

button { margin: 0px; padding: 0px; cursor: pointer; border: 0px; background: none; }

[role="button"], input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; }

/* Reset `button` and button-style `input` default styles */
input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; line-height: 1; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; }

input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; }

input { border: 0 none; }

/*
input[type="text"], input[type="password"], input[type="tel"], input[type="email"] {
    border:0 none;
}*/
/* Make `a` like a button */
[role="button"] { color: inherit; cursor: default; display: inline-block; text-align: center; text-decoration: none; white-space: pre; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

[role="button"]:focus, [role="button"]:active { outline: 0 none !important; }

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select:focus, select:active { outline: 0 none !important; }

input::-webkit-input-placeholder { color: 333; }

input:-ms-input-placeholder { color: 333; }

input::-ms-input-placeholder { color: 333; }

input::placeholder { color: 333; }

textarea::-webkit-input-placeholder { color: 333; }

textarea:-ms-input-placeholder { color: 333; }

textarea::-ms-input-placeholder { color: 333; }

textarea::placeholder { color: 333; }

input::-webkit-input-placeholder { color: #acacb6; }

input:-ms-input-placeholder { color: #acacb6; }

input::-ms-input-placeholder { color: #acacb6; }

input::placeholder { color: #acacb6; }

/* Firefox 4-18 */
:-moz-placeholder { color: #acacb6; }

/* Firefox 19-50 */
::-moz-placeholder { color: #acacb6; }

/* - Internet Explorer 10–11 - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder { color: #acacb6; }

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder { color: #acacb6; }

select::-ms-expand { display: none; }

input::-ms-clear { display: none; }

input:focus, select:focus { outline-style: none; border-color: inherit; }

/* don't show the eye for password inputs */
::-ms-reveal { width: 0; height: 0; display: none; }

/*mixin*/
:root { --vh: 100%; }

.hidden { position: absolute; top: -9999%; left: -9999%; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; }

@media (max-width: 992px) { .spanblock { display: inline; } }

.containerBox { width: 100%; padding: 0 6px; margin: 0 auto; max-width: 1280px; }

@media (max-width: 1344px) { .containerBox { padding: 0 24px; } }

.slide-list { padding-left: 12px; }

@media (max-width: 1344px) { .slide-list { padding-left: 24px; } }

.slide-wrap { -webkit-overflow-scrolling: touch; -ms-scroll-snap-type: none; scroll-snap-type: none; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ overflow-x: auto !important; cursor: -webkit-grab; cursor: grab; /*  & > ul li { scroll-snap-align: start; scroll-snap-stop: always; } */ /*transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); 
*/ }

.slide-wrap::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

.srcoll-wrap { /* touch-action: pan-x; scroll-snap-type: x proximity; */ -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* 스크롤바 뒷 배경 설정*/ }

.srcoll-wrap::-webkit-scrollbar { width: 6px; }

.srcoll-wrap::-webkit-scrollbar-thumb { /* 스크롤바 막대 높이 설정 */ height: 17%; /* 스크롤바 둥글게 설정 */ border-radius: 10px; background-color: rgba(33, 133, 133, 0.5); }

.srcoll-wrap::-webkit-scrollbar-track { background-color: rgba(33, 133, 133, 0.1); }

body { color: #fafafa; background-color: #121212; overflow: hidden; }

.conetents { position: fixed; width: 100%; min-height: 100vh; max-height: 100vh; min-height: -webkit-fill-available; max-height: -webkit-fill-available; min-height: calc(var(--vh, 1vh) * 100); max-height: calc(var(--vh, 1vh) * 100); }

@media (max-width: 767px) { .conetents { position: static; width: 100%; min-height: none; max-height: none; } }

.content-video { position: absolute; top: 50%; left: 50%; width: auto; width: calc(100vh * 0.5); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-height: 100vh; max-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); max-height: calc(var(--vh, 1vh) * 100); }

@media (max-width: 767px) { .content-video { position: relative; top: 0%; left: 0%; width: auto; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); overflow: hidden; } }

.content-video::before { display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 250px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), color-stop(75%, transparent)); background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 75%); content: ""; pointer-events: none; }

.content-video::after { display: block; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 250px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), color-stop(75%, transparent)); background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 75%); content: ""; pointer-events: none; }

.video-header { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 65px; padding: 0 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.video-header-logo { color: #fafafa; font-size: 30px; margin-right: auto; font-family: "Meow Script", cursive; -webkit-transform: skewX(-10deg) rotateZ(-5deg); transform: skewX(-10deg) rotateZ(-5deg); }

.video-header-logo span { color: #009688; }

.video-header-utill { display: none; }

.video-detail-active .video-header-utill { display: -webkit-box; display: -ms-flexbox; display: flex; }

#live { position: relative; z-index: 1; width: 100%; max-height: 100vh; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); max-height: calc(var(--vh, 1vh) * 100); }

@media (max-width: 767px) { #live { position: absolute; top: 50%; left: 50%; z-index: -1; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 100vh; min-height: 100vh; -o-object-fit: cover; object-fit: cover; max-height: none; } }

.video-btn { display: block; width: 40px; font-size: calc(1rem + 4px); text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }

.video-btn span { pointer-events: none; }

.video-cont { position: absolute; top: 75px; left: 0; z-index: 1; width: 100%; }

.good-circle-list { display: none; padding: 0 12px; }

.video-detail-active .good-circle-list { display: block; }

.good-circle-list li { font-size: 0; }

.good-circle-list--view { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 8px; }

.good-circle-list-cover { display: inline-block; margin-right: 8px; width: 45px; height: 45px; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 50%; }

.good-circle-list .elipsis-wrap { display: inline-block; width: calc(100% - 45px - 8px); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); vertical-align: 5px; }

.good-circle-list .elipsis-wrap-title { font-weight: 500; font-size: calc(1rem + 2px); padding-bottom: 4px; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: nowrap; }

.good-circle-list .elipsis-wrap-text { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: calc(1rem - 2px); line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.8; }

.good-circle-list .elipsis-wrap-text .icon { padding: 0 8px; font-size: calc(1rem); }

.chat-like { display: none; position: fixed; right: 12px; bottom: 12px; z-index: 2; width: 45px; height: 45px; }

.video-detail-active .chat-like { display: block; }

.chat-like-btn { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; width: 45px; height: 45px; -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; background-color: #626261; }

.chat-like-btn .icon { color: rgba(255, 255, 255, 0.7); font-size: 30px; }

.chat-like-effect { position: absolute; top: 15px; left: 50%; z-index: 1; width: 60px; height: 140px; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); pointer-events: none; /*  &:nth-child(1n + 1) .chat-like-effect-heart { animation: ani-like-move1 1s linear 1; } &:nth-child(2n + 1) .chat-like-effect-heart { animation: ani-like-move2 1s linear 1; } &:nth-child(3n + 1) .chat-like-effect-heart { animation: ani-like-move3 1s linear 1; } &:nth-child(4n + 1) .chat-like-effect-heart { animation: ani-like-move4 1s linear 1; } */ }

.chat-like-effect-heart { position: absolute; bottom: -20px; left: 0; }

.chat-like-effect-heart span { display: block; z-index: 0; width: 50px; height: 50px; background: url("../images/effect/like.png") no-repeat; -webkit-animation: ani-like 1s steps(28) 1; animation: ani-like 1s steps(28) 1; background-position: left; background-size: 2900%; background-position: right; }

.chat-like:active .icon, .chat-like:hover .icon, .chat-like.active .icon { -webkit-transform: scale(0.8); transform: scale(0.8); }

.video-chat { display: none; position: fixed; bottom: 60px; left: 12px; z-index: 2; width: calc(100% - 45px - 12px - 24px); height: 30vh; padding: 10px 10px 0; -webkit-mask-image: linear-gradient(transparent, #fff 30px); mask-image: linear-gradient(transparent, #fff 30px); /* touch-action: pan-x; scroll-snap-type: x proximity; */ -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* 스크롤바 뒷 배경 설정*/ }

.video-detail-active .video-chat { display: block; }

.video-chat::-webkit-scrollbar { width: 6px; }

.video-chat::-webkit-scrollbar-thumb { /* 스크롤바 막대 높이 설정 */ height: 17%; /* 스크롤바 둥글게 설정 */ border-radius: 10px; background-color: rgba(33, 133, 133, 0.5); }

.video-chat::-webkit-scrollbar-track { background-color: rgba(33, 133, 133, 0.1); }

.video-chat-list li { display: -webkit-box; display: -ms-flexbox; display: flex; padding-bottom: 8px; }

.video-chat-list span { color: rgba(255, 255, 255, 0.9); line-height: 1.2; }

.video-chat-list span.video-chat-list-user { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: rgba(255, 255, 255, 0.6); font-size: calc(1rem - 2px); padding-right: 8px; }

.input-box { display: none; position: fixed; bottom: 12px; left: 12px; z-index: 2; width: calc(100% - 45px - 12px - 24px); }

.video-detail-active .input-box { display: block; }

.input-box-inp { width: 100%; height: 45px; padding: 0 12px; border: 0 none; color: #fafafa; background-color: transparent; }

.input-box-inp:focus ~ .input-box-focus::after, .input-box-inp.active ~ .input-box-focus::after { width: 100%; }

.input-box-focus { position: relative; width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.5); }

.input-box-focus::after { display: block; position: absolute; bottom: 0; left: 50%; width: 0%; height: 100%; content: ""; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); background-color: #009688; }

.input-box .video-msg-btn { position: absolute; right: 0; bottom: 0; width: 45px; height: 45px; color: rgba(255, 255, 255, 0.8); }

.video-control { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; bottom: 0; z-index: 2; width: 100%; padding: 0 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.video-detail-active .video-control { display: none; }

.video-control-btn { display: -webkit-box; display: -ms-flexbox; display: flex; width: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.video-control-btn span { pointer-events: none; }

.video-control-progress { position: relative; padding: 30px 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.video-control-progress-bar { position: relative; width: 100%; height: 6px; border-radius: 25px; background-color: rgba(0, 0, 0, 0.2); overflow: hidden; }

.video-control-progress-bar-inner { position: absolute; top: 0; left: 0; height: 100%; background-color: #009688; }

.video-control-progress-point { display: block; position: absolute; top: 0; width: 20px; height: 20px; -webkit-transform: translate(calc(-10px + 1.5px), calc(-10px + 2.5px + 30px)); transform: translate(calc(-10px + 1.5px), calc(-10px + 2.5px + 30px)); pointer-events: none; background-color: #009688; -webkit-box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.1); border-radius: 50%; }

.video-control-time { padding-left: 24px; }

@-webkit-keyframes ani-like-move1 { 0% { left: 10%; }
  50% { left: 40%; }
  100% { bottom: 100%;
    left: 30%; } }

@keyframes ani-like-move1 { 0% { left: 10%; }
  50% { left: 40%; }
  100% { bottom: 100%;
    left: 30%; } }

@-webkit-keyframes ani-like-move2 { 0% { left: 30%; }
  50% { left: 20%; }
  100% { bottom: 80%;
    left: 0%; } }

@keyframes ani-like-move2 { 0% { left: 30%; }
  50% { left: 20%; }
  100% { bottom: 80%;
    left: 0%; } }

@-webkit-keyframes ani-like-move3 { 0% { left: 30%; }
  50% { left: 20%; }
  100% { bottom: 60%;
    left: 0%; } }

@keyframes ani-like-move3 { 0% { left: 30%; }
  50% { left: 20%; }
  100% { bottom: 60%;
    left: 0%; } }

@-webkit-keyframes ani-like-move4 { 0% { left: 0%; }
  50% { right: 30%; }
  100% { bottom: 140%;
    left: -10%; } }

@keyframes ani-like-move4 { 0% { left: 0%; }
  50% { right: 30%; }
  100% { bottom: 140%;
    left: -10%; } }

@-webkit-keyframes ani-like { 0% { background-position: left; }
  90% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0);
    background-position: right; } }

@keyframes ani-like { 0% { background-position: left; }
  90% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0);
    background-position: right; } }