body {background: #eaebec; overflow: hidden}
body.oh::after {content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.3); z-index: 100}
section {position: relative; width: 100%; height: 100vh; min-height: 540px; background: #fff}
button {border-radius: 5px}
button.btn2 {width: 100%; color: #fff; background: #363d45}
button.btn3 {width: 100%; color: #fff; background: #5c6d81}
img {max-width: 100%}
input:not([type="file"]) {min-height: 30px; border-radius: 5px; padding: 0 5px; border: none; background: #eee}
input[type='checkbox'], input[type='radio'] {min-height: 10px; padding: 0}
input[type='search'] {padding: 0 10px; border-radius: 15px; background-image: url("../images/search.png"); background-position: right 5px center; background-repeat: no-repeat; background-size: 30px auto}
h2 {font-size: 1.5rem}
h3 {font-size: 1.25rem}
h4 {font-size: 1.125rem}
header.menu {position: fixed; left: 0; bottom: 0; width: 100%; height: 60px; background: #eff1f4; z-index: 20}
header.menu ul {height: inherit; display: flex; justify-content: space-around; align-items: center}
header.menu ul li {display: flex; flex-direction: column; align-items: center; flex: 1; font-size: 0.625rem; text-align: center}
header.menu ul li::before {content: ''; display: block; width: 40px; height: 40px; background-image: url("../images/nav.png"); background-size: auto 80px}
header.menu ul li:nth-child(2)::before {background-position: -40px 0}
header.menu ul li:nth-child(3)::before {background-position: -80px 0}
header.menu ul li:nth-child(4)::before {background-position:-120px 0}
header.pcTop {display: none}
nav {position: fixed; width: 60%; height: calc(100% - 60px); top: 0; left: -60%; background: #fff; transition: all ease-in .1s; z-index: 200}
nav > div {position: relative; height: 100%; padding: 10px}
nav > div dl {margin-bottom: 10px; padding: 10px 0 5px; border-radius: 10px; background: #f8f8f8}
nav > div dl dt {margin-bottom: 10px; padding-left: 10px; display: flex; align-items: center}
nav > div dl dt::before {content: ""; display: block; width: 30px; height: 30px; background-image: url("../images/nav.png"); background-size: auto 60px}
nav > div dl dt.liv::before {background-position: -30px 0px}
nav > div dl dt.msg::before {background-position: -60px 0px}
nav > div dl dt.myp::before {background-position: -90px 0px}
nav > div dl dt.com::before {background-position: -120px -30px}
nav > div dl dt.set::before {background-position: -120px 0px}
nav > div dl dd {margin-bottom: 5px; padding-left: 20px; font-size: .875rem}
nav > div dl dd.onair {display: none}
nav > div dl dd::before {content: "\2010"; margin-right: 10px}
nav > div > ul {position: absolute; bottom: 30px}
nav > div > ul li {margin-bottom: 10px; display: flex; align-items: center}
nav > div > ul li::before {content: ""; display: block; width: 30px; height: 30px; background-image: url("../images/nav.png"); background-size: auto 60px}
nav > div > ul li.out::before {background-position: 0px -30px}
nav > div > ul li.log::before {background-position: -90px -30px}
nav > div > ul li.joi::before {background-position: -30px -30px}
nav .no-member {position: absolute; top: 127px; left: 10px; width: calc(100% - 20px); height: 302px; border-radius: 5px; background-color: rgba(240,240,240,0.75)}
nav .no-member ul {position: relative; height: inherit; display: flex; justify-content: center; flex-direction: column; align-items: center}
nav .no-member ul li { text-align: center; font-size: .875rem; font-weight: bold; margin-bottom: 15px}
nav .no-member ul a {border: 1px solid #ff3a3a; border-radius: 3px; color: #f61919; padding: 2px 5px; background: #fff}
nav.open {left: 0%; transition: all ease-in .3s; box-shadow: 2px 2px 5px rgba(0,0,0,0.5)}
nav.open:after {display: block; position: absolute; width: 100%; height: calc(100vh - 70px); top: 0; left:0; background-color: rgba(0,0,0,0.25); z-index: 10}
.up {color: #ec320d}
.dn {color: #0058f7}

/* common */
.emp {color: #7226b1}
.fs {font-size: 0.75rem}
.cg {color: #999}
.resize {display: none}

.sub .body {height: calc(100vh - 110px); overflow-y: auto}
.sub .logo {position: absolute; top: 5px; left: 10px; width: 20%; height: 40px;}

.head {position: relative; height: 50px}
.head .back {position: absolute; top: 0; left: 0; z-index: 100}
.head .back button {width: 40px; height: 40px; text-indent: -9000px; background-color: transparent; background-image: url("../images/back.png"); background-size:30px; background-position: center; background-repeat: no-repeat}
.head .title {text-align: center}

.tab {width: 100%; margin-bottom: 20px}
.tab ul {display: flex; border-bottom: 1px solid #aaa}
.tab ul li {position: relative; padding: 5px 10px; text-align: center; color: #999}
.tab ul li.on {color: #333;}
.tab ul li.on::after {content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #3e3e3e}
.tab.scroll {-webkit-overflow-scrolling: touch; overflow: hidden; overflow-x: auto; scroll-snap-type:none}
.tab.scroll ul {height: 30px; min-width: 100%; -webkit-box-pack: justify; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; vertical-align: top}
.tab.scroll ul li {display: inline-block; font-size: .875em; margin-right: 5px; white-space: nowrap; background: #ffff}

.logo {text-indent: -9000px; background-image: url("../images/logo.png"); background-repeat: no-repeat; background-size: contain}

.form button {height: 40px;}
.form label {font-size: 0.875rem; margin-bottom: 5px}
.form .logo {width: 40%; padding-top: 25%; margin: 0 auto 30px;}

/*list*/
#list {height: calc(100vh - 60px); overflow: hidden}
#list .head {width: 100%; height: 50px; background: #fff; z-index: 100}
#list .list {height: calc(100vh - 110px); border-top: 1px solid #888; padding-bottom: 50px; overflow-y: auto}
.list table {width: 100%; }
.list thead {display: none}
.list tbody tr {display:flex; flex-wrap: wrap; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #ccc; overflow: hidden}
.list tbody tr td {display: block; padding: 3px 0}
.list tbody tr .num {flex: 1 1 10%; text-align: center; line-height: 1.5rem}
.list tbody tr .sbj {flex: 1 1 90%; max-width: 90%;}
.list tbody tr .sbj h4 {width: 90%; line-height: 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.list tbody tr .wrt {flex: 1 1 30%; padding-left: 10%; color: #999; font-size: .875rem}
.list tbody tr .dat {flex: 1 1 50%; color: #999; font-size: .875rem}
.list tbody tr .hit {flex: 1 1 20%; text-align: center; color: #999; font-size: .875rem}
.list tbody tr .view {flex: 1 1 100%; padding: 10px; display: none}
.list tbody tr.on .sbj h4 {width: 90%; white-space: normal; word-break: keep-all; -webkit-line-clamp: 3}
.list tbody tr.on .view {display: block}
.list tbody tr .view p {margin-bottom: 10px}

.head .toggle {position: absolute; top: 14px; right: 14px; display: flex; column-gap: 10px}
.toggle li {font-size: 0.875rem; line-height: 26px; padding: 0 10px; border-radius: 13px; cursor: pointer; background: #eee}
.toggle li.on {color: #fff; background: #777}

.head .btnArea {position: absolute; right: 5px; top: 5px; z-index: 100}
.head .btnArea .set button {width: 40px; height: 40px; background-color: transparent; overflow: hidden}
.head .btnArea .set button::before {display: block; width: 40px; height: 40px; background-size: auto 80px; background-position: -160px 0}

/*login*/
#login section {height: calc(100vh - 34px); display: flex; align-items: center; justify-content: center; flex-direction: column}
#login .head {width: 75%}
#login .body {width: 75%; min-height: 50vh; overflow-y: auto}
.loginBox {width: 100%}
.loginBox ul {width: 100%; margin-bottom: 30px}
.loginBox ul li {min-height: 30px; margin-bottom: 5px}
.loginBox ul li p {margin-bottom: 5px}
.loginBox input:not([type="checkbox"]) {width: 100%}
#login .bottom {position: fixed;
    top: calc(100vh - 30px); height: 34px; text-align: right; padding-right: 10px; background-color: #fff}

/*join*/
#join section {height: calc(100vh - 34px); display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding: 10% 0}
.joinBox {width: 100%}
.joinBox ul {margin-bottom: 10px}
.joinBox ul li {min-height: 30px; margin-bottom: 5px}
.joinBox input:not([type="checkbox"]) {width: 100%}
.joinBox .grid2 {position: relative}
.joinBox .grid2 button {position: absolute; bottom: 1px; right: 1px; width: 25%; height: 28px; color: #333; background: #f4f4f4}
#join .bottom {height: 34px; text-align: right; padding-right: 10px; background-color: #fff}
#join .head {width: 75%}
#join .body {width: 75%; min-height: 50vh; overflow-y: auto}

/*loading*/
.loadBox {position: relative; height: 100%; background: url("../images/main_bg.png") no-repeat center right -100px; background-size: auto 50%}
.loadBox .top {position: absolute; top: 15%; left: 10%}
.loadBox .top h2 {font-size: 1.875rem}
.loadBox .top h2 span {color: #084c94}
#loading .bottom {position: absolute; bottom: 15%; right: 10%; width: 80%}
#loading .bottom li {text-align: right; margin-bottom: 5px}
#loading .bottom li.bar {height: 10px; border-radius: 5px; background: #eee; overflow: hidden}
#loading .bottom li.bar span {display: block; height: inherit; border-radius: 5px; background: #3ecfcd}

/*liveList*/
#liveList {position: relative}
#liveList .body {height: calc(100vh - 80px); background: #eaebec}
#liveList .body dl {margin-bottom: 30px}
#liveList .body dt {position: relative; padding-top: 56.25%; background: #000; overflow: hidden}
#liveList .body dt figure {position: absolute; top: 0; width: 100%; opacity: .95}
#liveList .body dt figure img {width: 100%; height: 100%; object-fit: cover}
#liveList .body dt label {position: absolute; right: 20px; bottom: 10px; display: none; align-items: center; padding: 0 5px; border-radius: 3px; color: #fff; font-size: 0.75rem; background: #d01818}
#liveList .body dt label::before {content: ''; width: 20px; height: 20px; background-size: auto 40px; background-position: -80px -20px; background-image: url("../images/live.png")}
#liveList .body dd {position: relative; padding: 10px 0; padding-left: 60px; border-bottom: 1px solid #ccc; background: #fff}
#liveList .body dd figure {position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 20px; overflow: hidden;}
#liveList .body dd figure img {width: 100%; height: 100%; object-fit: cover;}
#liveList .body dd h4 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25}
#liveList .body dd p {font-size: .875rem; color: #777}
#liveList .body dd p span {display: none}

/*vodList*/
#vodList {position: relative}
#vodList .tab {margin-bottom: 0}
#vodList .body {height: calc(100vh - 140px); display: flex; flex-direction: column; padding: 20px 10px; }
#vodList .x-play {border-bottom: 1px solid #ccc}
#vodList .x-play.show {display: block}
#vodList .x-play.show + .body { height: calc(100vh - 227px - 56.25vw); overflow-y: auto; }
#vodList .body dl {display: flex; margin-bottom: 15px}
#vodList .body dt {position: relative; width: 40%; background: #000}
#vodList .body dt figure {position: relative; padding-top: 56.25%; overflow: hidden}
#vodList .body dt figure img {position: absolute; top: 0; height: 100%; object-fit: cover; opacity: .95}
#vodList .body dt label {position: absolute; right: 5px; bottom: 5px; padding: 0 5px; border-radius: 3px; color: #fff; font-size: 0.75rem; background-color: rgba(0,0,0,0.6)}
#vodList .body dd {position: relative; width: 60%; padding-left: 15px; padding-top: 5px}
#vodList .body dd h4 {margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25}
#vodList .body dd figure {position: absolute; top: 0; left: 10px; width: 40px; height: 40px; border-radius: 20px; overflow: hidden;}
#vodList .body dd .name {margin-bottom: 5px}
#vodList .body dd .hit span:last-child::before {content: '\00B7'; padding: 0 5px}
#vodList .x-play ul {position: relative; width: 100%; height: 56.25vw; overflow: hidden}
#vodList .slide {position: relative; height: 32px; overflow: hidden; padding: 0 10px}
#vodList .slide::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0;  z-index: 10; width: 20px; background-image: linear-gradient(270deg,rgba(255,255,255,0) 0,#fff); display: none}
#vodList .slide::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0;  z-index: 10; width: 20px; background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,#fff); display: none;}
#vodList .slide ul li {cursor: pointer; white-space: nowrap}
#vodList .slide ul li.on {color: #333;}
#vodList .slide ul li.on::after {content: ''; display: block; position: absolute; left: 0; bottom: 0px; width: 100%; height: 2px; background: #3e3e3e}
#vodList .x-play-info {padding: 5px}
#vodList .x-play-info h2 {font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25}
#vodList .x-play-info p {display: flex; column-gap: 20px}
#vodList .x-play-info p span:first-child{position: relative}
#vodList .x-play-info p span:first-child::after {content: "\007C"; position: absolute; right: -12px; color: #ccc}
#vodList .hit {display: none}
.x-more {width: 100%}
.x-more button {display: flex; align-items: center; margin: 0 auto; height: 30px; padding: 0 15px; border: none; border-radius: 15px; background: #eee}
.x-more button::after {content: '\002B'; color: #999}
.ico::before {content: ''; background-image: url("../images/nav.png"); }

/*live*/
.liveCast {position: relative; padding-top: 56.25%; background: #000}
.liveCast label {position: absolute; top: 10px; right: 10px; padding: 0 5px; border-radius: 3px; color: #fff; font-size: 0.75rem; background: #d01818; z-index: 10}
.liveCast .viewer {position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 10}
.liveCast .viewer #w-player {height: 100%}
.liveCast .viewer iframe {width: 100%; height: 100%}

#live section {height: calc(100vh - 60px); min-height: calc(56.25vw); background: #eff1f4}
#live section.vh {height: calc(100vh)}
#live section.vh .body {height: calc(100vh - 56.25vw - 190px)}
#live .info {height: 50px; padding-left: 10px; display: flex; align-items: center; background: #fff}
#live .info ul {}
#live .info li {display: flex; align-items: baseline; column-gap: 10px; flex-wrap: wrap}
#live .info li h2 {font-size: 1.25rem; line-height: 1.5rem; margin-right: 10px; ; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
#live .info li p {font-size: 0.75rem; color: #999}
#live .info li p::before {content: '\007C'; margin-right: 8px;}
#live .info .watch {display: none}
#live .index {padding: 10px 0; border-top: 1px solid #ccc; background: #fff}
#live .index ul {display: flex; justify-content: center; column-gap: 20px; font-size: 0.875rem}
#live .head h3 {position: absolute; top: 12px; left: 12px; font-size: 1.125rem; line-height: 26px}
#live .head {box-shadow: 0 2px 5px rgba(0,0,0,0.1); background: #f3f5f7;}
#live .head .toggle {top: 0; right: 10px; justify-content: center; align-items: center; height: inherit}
#live .body {padding-top: 10px; height: calc(100vh - 56.25vw - 250px); overflow-y: auto}
#live .body .ntc {display: block; width: 100%; text-align: center; margin-bottom: 10px}
#live .body ul {margin: 0 10px}
#live .body li {margin-bottom: 10px; align-self:center}
#live .body li label {font-size: 0.875rem; margin-bottom: 3px; color: #4b7bb0; display: inline-flex} 
#live .body li p {display: inline; font-size: 0.875rem; word-break: break-all} 
#live .bottom {position: absolute; bottom: 0; width: 100%; min-height: 50px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; background: #fff; z-index: 10}
#live .bottom textarea {width: calc(100% - 40px); height: 50px; border: none; font-size: 1rem}
#live .bottom button {width: 40px; height: 40px; border-radius: 50%; text-indent: -9000px; background: url("../images/send.png") no-repeat left 8px center #2c6195; background-size: 65%}
.nick em {display: inline-flex; min-width: 30px; font-size: .75rem; margin-right: 5px; background: #ccc}
.nick em::before {content: 'OFF'; margin: 0 auto}
.nick em.on {color: #fff; background: #ec5252}
.nick em.on::before {content: 'ON'}
.dark .nick em.off {background: #5e5f64}
.controlBar {display: none}


/* room */
#rooms {background: #fff}
#rooms .head {margin-bottom: 10px}
#rooms .search {position: absolute; top: 15px; right: 10px}
#rooms .room {position:relative; height:100px; margin: 0 10px; border-radius:10px; margin-bottom:20px; background: #f8f8f8}
#rooms .room dl {display: flex; padding:10px; column-gap: 10px}
#rooms .room dt figure {width:80px; height:80px; border-radius:5px; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover}
#rooms .room dd {width: 100%}
#rooms .room dd h2 {color:#333; margin-bottom:5px; font-size: 1rem; font-weight: bold; line-height: 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
#rooms .room dd h3 {color:#777; margin-bottom:5px; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
#rooms .room dd p {position: relative; width: 100%; display: flex; align-items: center}
#rooms .room dd p button {width:30px; height:30px; border:none; text-indent:-9000px; background-color:transparent; background-image:url(../images/chat.png); background-size:auto 60px}
#rooms .room dd p button.bmk {background-position:-90px 0}
#rooms .room dd p button.alm {background-position:-60px -30px}
#rooms .room dd p button.bmk.on {background-position:-90px 30px}
#rooms .room dd p button.alm.on {background-position:-60px 0}
#rooms .room dd p .bdg {display: none; position: absolute; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; text-align: center; color: #fff; font-size: .875rem; background: #f85240}
#rooms .room dd p .cnt {display: flex; align-items: center; height: 20px; padding: 0 10px 0 5px; border-radius: 10px; color: #fff; font-size: 0.75rem; background: #333;}
#rooms .room dd p .cnt::before {content: ''; width: 20px; height: 20px; background:url("../images/chat.png") no-repeat -100px 0px; background-size: auto 40px}
#rooms .room .new {position:absolute; top:0; right:10px; color:#b9bbc7}
#rooms .room .new::after {content:'N'; display:inline-block; width:18px; height:18px; line-height:18px; margin-left:5px; font-size:12px; font-weight:600; text-align:center; border-radius:50%; color:#fff; background-color:#f9414e}
#rooms .bottom {height:80px; position:fixed; left:0; bottom:0; width:100%; text-align:center}
#rooms .sub .body {height: calc(100vh - 120px)}
#rooms .sub.vh .body {height: calc(100vh - 60px)}

.pop_up { width: 485px; height: 335px; background: #fff; border-radius: 20px; display: none; }
.pop_up_top { width: 100%; height: 60px; background: #ec5252; display: flex; justify-content: center; align-items: center; border-radius: 20px 20px 0 0; }
.pop_up_top img { width: 40px; }
.pop_up_btm { width: 100%; text-align: center; display: flex; justify-content: center; }

/* chat */
header.head {display: flex; align-items: center; justify-content: space-between; width: 100%; height:50px; background-color: rgba(255,255,255,0.8); box-shadow:0 3px 3px rgba(0,0,0,.1)}
header.head h2 {font-size: 1.125rem}
#chat .head .back {top: 5px; left: 5px;}
#chat .head .title {padding-left: 50px; text-align: left; word-break: keep-all} 
#chat .head + div {height: 40px; padding-top: 9px; background: #fff}
#chat .head + div ul {display: flex; justify-content: center; margin: 0 auto; column-gap: 10px;} 
#chat .head ul:first-child {width: calc(100% - 120px)}
.head .topIcon {width: 120px; margin-right: 10px}
.head .topIcon button {width:30px; height:30px; border:none; text-indent:-9000px; background-color:transparent; background-image:url(../images/chat.png); background-position:0 0; background-size:auto 60px}
.head .topIcon button[name=push] {background-position:-0 0}
.head .topIcon button[name=pick] {background-position:-60px 0}
.head .topIcon button[name=news] {background-position:-30px 0}
.head .topIcon button.pic {background-position:-30px -30px}
.head .topIcon button.vod {background-position: 0 -30px}
#freeze {width: 0; height: 0}
#freeze + label {background-position:-180px 0}
#freeze + label {display: inline-block; width:30px; height:30px; text-indent:-9000px; vertical-align: top; background-image:url(../images/chat.png); background-size: auto 60px}
#freeze:checked + label {background-position:-180px -30px}

#chat section {height:calc(100vh - 180px); padding:20px 10px; overflow:hidden; overflow-y:scroll}
#chat .chatArea > div {position:relative; margin-bottom:10px; padding-left:50px }
#chat .chatArea > div:after {content:''; display:block; width:100%; height:1px; clear:both}
#chat .chatArea > div figure { position:absolute; left:0; top:0; width:40px; height:40px; border:none; border-radius:50%; overflow:hidden}
#chat .chatArea > div figure img {width: 100%; height: 100%; object-fit: cover}
#chat .chatArea > div label {display:flex; margin-bottom:10px}
#chat .chatArea > div label::after {display: none; content: ''; width: 25px; height: 25px; background-image:url(../images/chat.png); background-size:auto 50px}
#chat .chatArea > div[auth='xpt'] label::after {display: block; background-position: -175px 0px}
#chat .chatArea > div[auth='mnt'] label::after {display: block; background-position: -175px -25px}
#chat .chatArea > div ul {clear:both}
#chat .chatArea > div ul li {position:relative; display:inline-block; max-width:80%; background:#2d80e6; margin-bottom:20px; padding: 5px 10px; border-radius:0 10px 10px 10px; font-size: 0.875rem; color:#fff; text-align:left; word-break:keep-all; white-space: pre-line; line-height:1.6; word-wrap: break-word;}
#chat .chatArea > div ul li img {max-height: 30vh; vertical-align: top}
#chat .chatArea > div ul li a {text-decoration:underline; color:#0cf}
#chat .chatArea > div ul li.P:before {content:'[벙]'; display:inline-block; margin-right:5px; color:#3cf}
#chat .chatArea > div ul li.M:before {content:'[벙]'; display:inline-block; margin-right:5px; color:#3cf}
#chat .chatArea > div ul li.X:before {content:'[금]'; display:inline-block; margin-right:5px; color:#3cf}
#chat .chatArea > div ul li.H:before {content:'[가]'; display:inline-block; margin-right:5px; color:#3cf}
#chat .chatArea > div ul li.img {padding: 0; background-color: transparent}
#chat .chatArea > div ul.pick li {width:calc(100% - 40px); max-width:100%; color:#3f434d; padding-bottom:40px; border-radius:10px; background:#fff}
#chat .chatArea > div ul.pick li span {right:10px; bottom:8px}
#chat .chatArea > div ul span {display:block; position:absolute; right:-80px; bottom:5px; width:80px; text-align:center; font-size: 0.75rem; color:#99a;}
#chat .chatArea > div.myChat ul li {float:right; border-radius:10px 0 10px 10px; color: #333; background-color: #dae2ea}
#chat .chatArea > div.myChat ul li.img {background-color:transparent}
#chat .chatArea > div.myChat ul span  {right:auto; left:-80px}
#chat section > p {color:#8f95a3; text-align:center; margin-bottom:10px}
#chat .adm ul {display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px}
#chat .adm .add {text-align: center; padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 20px}
#chat .adm .add textarea {height: 30px}
#chat .adm .add button {margin-left: 5px; min-height: 30px; border: 1px solid #ccc; padding: 0 10px; background: #fff; vertical-align: top}
#chat .adm ul .nick span {font-size: .875rem}
#chat .adm ul textarea {height: 30px; vertical-align: top}
#chat .adm ul button {height: 25px; margin-left: 5px; border: 1px solid #ccc; padding: 0 10px; background: #fff; vertical-align: top}
#chat ul.reply {position: relative; padding-top: 20px}
#chat .reply label {position: absolute; top: 0; right: 0; font-size: .875rem}
#chat footer {position: absolute; bottom: 0; width:100%; height:90px; background:#f8f8f8}
#chat footer ul {display: flex}
#chat footer .chatTop {height: 55px}
#chat footer .chatTop li:first-child {width:calc(100% - 60px); }
#chat footer .chatTop li:last-child {width: 60px; padding-top: 10px }
#chat footer .chatTop .send {width: 50px; height: 25px; min-height: 10px; font-size: 1rem; border: 1px solid #adbcc3; background: #eceff1}
#chat footer .chatTop .send.on {color: #fff; border: 1px solid #ef3e51; background: #ff5668}
#chat footer .chatTop textarea {width: 100%; height:60px; padding: 5px 10px; color:#333; border:none; background-color: transparent}
#chat footer input[type='file'] {width: 30px; height: 30px; text-indent: -9000px; background-color: transparent; background-image: url("../images/file.png"); background-position: center; background-repeat: no-repeat; background-size: 20px auto}
#chat footer input[value="emt"] {width: 30px; height: 30px; text-indent: -9000px; background-color: transparent; background-image: url("../images/emt.png"); background-position: center; background-repeat: no-repeat; background-size: 20px auto}
#chat footer .chatBot {position: relative; height: 30px; padding-left: 5px}
#chat footer .chatBot li {display: flex; align-items: center}
#chat footer .chatBot .emoticon {position: fixed; left: 0; bottom: 90px; width: 100%; background-color: #fff}

/*news*/
#news .head .back {left: 5px; top: 5px}
#news .head .title {padding-left: 50px}
#news .sub {height: calc(100vh - 50px); overflow: hidden}
#news .sub > div {height: calc(100vh - 50px); overflow-y: auto}
#news .sub.xpt .leading.list {height: calc(100vh - 180px)}
#news .list li {position: relative; min-height: 40px; display: flex; align-items: center; padding: 10px}
#news .list li p {position: relative; width: 80%; padding-left: 15px; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.25}
#news .list li p::before {content: '\2022'; color: #999; position: absolute; top: 0; left: 0}
#news .list li.on p {overflow: visible; display: block}
#news .list li span {position: absolute; bottom: 10px; right: 10px; color: #7d818a; font-size: 0.75rem}
#news .list span button {width: 30px; height: 26px; margin-left: 5px; border: 1px solid #ccc; padding: 0 10px; background: #fff}
#news .list li:nth-child(odd) {background: #f8f8f8}
#news .list table {width: 100%}
#news .list thead {display: block; position: sticky; top: 0; border-bottom: 1px solid #999; background: #fff; z-index: 10}
#news .list thead tr {display: flex; align-items: baseline}
#news .list thead th {font-size: 0.875rem; text-align: center}
#news .list thead th:nth-child(1) {width: 25%; text-align: left; padding-left: 15px}
#news .list thead th:nth-child(2) {width: 25%}
#news .list thead th:nth-child(3) {width: 25%; text-align: right; padding-right: 10px}
#news .list thead th:nth-child(4) {width: 25%; text-align: right; padding-right: 15px}
#news .list thead span {display: block}
#news .list tbody tr {align-items: center; margin-bottom: 0; position: relative}
#news .list tbody tr:nth-child(odd) {background: #f8f8f8}
#news .list tbody td {font-size: 0.875rem}
#news .list tbody td:nth-child(1) {width: 25%; padding-left: 15px}
#news .list tbody td:nth-child(2) {width: 25%; text-align: center}
#news .list tbody td:nth-child(3) {width: 25%; text-align: right; padding-right: 10px}
#news .list tbody td:nth-child(4) {width: 25%; text-align: right; padding-right: 15px}
#news .list tbody td:nth-child(4) span:first-child {color: #ec320d}
#news .list tbody span {display: block; color: #777}
#news .reading {display: none}
#news .news {display: none}
#news .write {position: fixed; bottom: 0; width: 100%; height: 50px;background: #f8f8f8; z-index: 50}
#news .write ul {display: flex}
#news .write button {padding: 5px 10px}
#news .write.leading {position: fixed; height: auto}
#news .write.leading ul {padding: 5px}
#news .write.leading ul li {width: 30%; margin-right: 5px}
#news .write.leading ul label {font-size: .75rem}
#news .write.leading ul input {width: 100%; border: 1px solid #ddd; background: #fff}
#news .write ul button {min-height: 30px; border: 1px solid #ccc; padding: 0 10px; background: #fff}
#news .write.leading ul.btn {display: flex; justify-content: flex-end; column-gap: 5px; position: absolute; top: 20px; right: 0; width: 120px}
#news .write.notify ul li:first-child {width: calc(100% - 60px)}
#news .write.notify ul li:first-child textarea {width: 100%; height: 50px; border: none; background-color: transparent}
#news .write.notify ul li:last-child {width: 60px; display: flex; flex-direction: column}

/*mypage*/
#mypage .title {margin: 0 10px; padding: 5px 10px; color: #fff; font-size: 1.25rem; background-image: linear-gradient(90deg, rgba(48,58,69,1), rgba(48,58,69,0))}
#mypage .user {text-align: center; margin-bottom: 20px; font-family:'NanumSquare'; font-weight:bold; font-size: 1.125rem}

.myxpt {padding: 10px}
.myxpt dl {display: flex; align-items: center; margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #ddd}
.myxpt dl:last-child {border-bottom: none}
.myxpt dt {width: 70px}
.myxpt dt figure {width:60px; height:60px; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover}
.myxpt dd {position: relative; width: calc(100% - 70px)}
.myxpt dd h2 {color:#333; margin-bottom:5px; font-size: 1rem; font-weight: bold; font-family:'Noto Sans KR', sans-serif}
.myxpt dd h3 {color:#777; margin-bottom:5px; font-size: 0.875rem; font-weight: bold; font-family:'Noto Sans KR', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 77%;}
.myxpt dd p {position: absolute; bottom: 5px; right: 5px; display: flex}
.myxpt dd p button {width:30px; height:30px; border:none; text-indent:-9000px; background-color:transparent; background-image:url(../images/chat.png); background-size:auto 60px}
.myxpt dd p button.bmk {background-position:-90px 0}
.myxpt dd p button.alm {background-position:-60px -30px}
.myxpt dd p button.bmk.on {background-position:-90px 30px}
.myxpt dd p button.alm.on {background-position:-60px 0}
.mylist {display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px; overflow-y: auto}
.mylist dl {width: calc(50% - 5px); margin-bottom: 20px; margin-right: 10px}
.mylist dl h4 { overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; 
	display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mylist dl:nth-child(2n) {margin-right: 0}
.mylist dl dt {position: relative; padding-top: 56.25%; overflow: hidden}
.mylist dl dt img {position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover}
.mylist dl p {font-size: 0.75rem}
.myLink {margin: 0 10px; padding: 10px}
.myLink li {display: flex; align-items: baseline; justify-content: center; margin-bottom: 10px; padding: 5px 10px; border-radius: 5px; background: #e2e2e4}
.myLink li::after {display: none; content: ''; width: 75px; height: 15px; background-image: url("../images/link_arr.png"); background-repeat: no-repeat; background-size: auto 15px}
.myLink li a {min-width: 140px; font-size: 1.125rem; font-weight: bold; text-align: center; font-family: 'NanumSquare', sans-serif;  }

.counsel.pop {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: none}
.counsel.pop::after {content: ''; display: block;  position: fixed;  top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.3); z-index: 50;}
.counsel.pop > div {position: absolute; top: calc(50% - 120px); left: calc(50% - 160px); width: 320px; background: #272d3b; z-index: 100}
.counsel .top {position: relative; padding-top: 20px; margin-bottom: 10px}
.counsel .top h3 {width: 100%; text-align: center; color: #fff}
.counsel .top .topBtn {position: absolute; top: 2px; right: 2px}
.counsel .top .topBtn button {width: 30px; height: 30px; background-color: transparent; overflow: hidden}
.counsel .top .topBtn button::before {content: "\2573"; display: block; width: 30px; height: 30px; color: #fff; font-size: 1.125rem}
.counsel .mid {width: 70%; margin: 0 auto 10px}
.counsel .mid li {margin-bottom: 5px}
.counsel .mid input {width: 100%}
.counsel .bot {width: 70%; margin: 0 auto; padding-bottom: 20px}
.counsel .bot button {width: 100%; height: 30px; color: #272d3b; background: #6bfff3}
.counsel .bot li {margin-bottom: 10px}
.counsel .bot li span {color: aliceblue;}
.counsel .bot li a {font-size: .75rem; color: #fff}

/*set*/
#set .head ul {width: 100%; height: inherit; display: flex; align-items: center; justify-content: center}
#set .body {width:100%; height: calc(100vh - 40px); padding: 0 10px; overflow-y: auto}
#set .body dl {margin-bottom: 10px; padding: 10px 30px; border-radius: 10px; background: #f8f8f8}
#set .body dl dt + dd {margin-top: 10px}
#set .body dl dd {margin-bottom: 5px}

#set .grid2 button {position: absolute; bottom: 1px; right: 1px; width: 20%; height: 28px; color: #333; background: #f4f4f4}
#set figure {width: 40px; height: 40px; border-radius: 50%; overflow: hidden}
#set figure img {width: 100%; height: 100%; object-fit: cover}
#set dl dt {font-size: 1rem; font-weight:600; color: #111}
#set dl dd {position:relative; font-size: 0.875rem; text-align:right; margin-bottom:5px; line-height:30px}
#set dl dd label {position:absolute; top:0; left:0}
#set dl dd label::before {content: '\2219'; margin-right: 5px; color: #999}
#set dl dd button.toggle {position:relative; width:50px; height:24px; border:none; border-radius:12px; padding:3px; text-indent: -9000px; background:#dadadd}
#set dl dd button.toggle:after {position: absolute; top: 3px; left: 3px; display:inline-block; content:''; width:18px; height:18px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 5px rgba(10,0,0,.3)}
#set .image {display: flex; flex-direction: column; align-items: flex-end}
#set dl dd button.toggle.on {background: linear-gradient(45deg, #ff3a64, #f44040)}
#set dl dd button.toggle.on:after {left: auto; right: 3px;}
#set dl dd input {width: 60%; line-height:24px; padding:0 5px; background:#fff}
#set dl dd input[type="button"] {width: auto; padding:0 10px; color:#fff; border: none; background:#777}
#set dl dd input[type="file"] {position: absolute; width: 50px; height: 50px; padding: 0; top: 0; right: 0; text-indent: -9000px; background-color: transparent; z-index: 100}


@media only screen and (max-height:640px){
    header.menu {display: none}
}

/*tablet*/
@media only screen and (min-device-width : 481px) and (max-device-width : 1024px) {
    #live section {display: grid; grid-template-columns: 70% 30%; grid-template-rows: calc(100vh - 40px) 40px; height: 100vh; overflow: hidden}
    #live article {grid-column: 1 / 2; grid-row: 1 / 2}
    #live .info {grid-column: 1 / 2; grid-row: 2 / 3}
    #live aside {grid-column: 2 / 3; grid-row: 1 / 3}
}


/*pc*/
.pc {border: 2px solid #aaa}
.pc .sub .body {height: calc(100vh - 140px)}
.pc section {height: calc(100vh - 34px); min-height: 240px}
.pc header.menu {left: 2px; bottom: 2px; width: calc(100% - 4px)}
.pc header.pcTop {display: flex; justify-content: space-between; height: 30px; background: #fff}
.pc header.head {position: relative} 
.pc header.head .topIcon {margin-right: 0}
.pc nav > div dl dd.onair {display: block}

.pc #live {height: calc(100vh - 34px)}
.pc #live .head h3 {left: 20px}
.pc #live section {position: relative; width: calc(100% - 20px); height: calc(100vh - 34px); min-height: 0; margin: 0 10px}
.pc #live section.full article {width: calc(100%)}
.pc #live section.full .liveCast .controlBar {width: calc(100%); transition: all ease-in 0.05s}
.pc #live section .index {position: absolute; top: 0; right: 0; width: 390px; height: 50px; border-top: none; border-radius: 10px}
.pc #live section article {position: absolute; top: 50px; left: 0; bottom: 0; width: calc(100% - 400px)}

.pc #live .info {position: absolute; top: 0; left: 0; width: calc(100% - 400px); height: 50px; padding: 0 10px}
.pc #live .info ul {display: flex; flex-direction: column; width: 100%}
.pc #live .info ul .time {font-size: 0.875rem; color: #777}
.pc #live .info ul .time span {padding: 0 5px}
.pc #live .info li h2 {max-width: calc(100% - 180px)}
.pc #live .index ul {height: 30px; align-items: center}
.pc #live .index li {padding: 0 10px}

.pc #live aside {position: absolute; top: 50px; right: 0; bottom: 0; width: 390px; height: calc(100vh - 90px)}
.pc #live aside.hide {right: -400px}
.pc #live aside.hide .hideBtn {left: -35px}
.pc #live aside.hide .hideBtn button::after {transform: rotate(180deg)}
.pc #live aside .hideBtn {position: absolute; left: 0; top: 0; z-index: 200}
.pc #live aside .hideBtn button {position: relative; width: 30px; height: 30px; text-indent: -9000px; background-color: #eee}
.pc #live aside .hideBtn button::after {position: absolute; top: 0; left: 0; content: ''; display: block; width: 30px; height: 30px; background-image: url("../images/pc.png"); background-size: auto 60px; background-repeat: no-repeat; background-position: 0 -30px}
.pc #live aside .top {position: relative; height: 30px}
.pc #live aside .night {display: flex; position: absolute; top: 0; right: 10px; align-items: center}
.pc #live aside .night::before {content: ''; width: 30px; height: 30px; background-image: url("../images/pc.png"); background-size: auto 60px; background-repeat: no-repeat; background-position: -30px -30px; margin-right: 5px}
.pc #live aside .night button.toggle {position: relative; width: 40px; height: 20px; border: none; border-radius: 10px; padding: 2px; text-indent: -9000px; background: #dadadd;}
.pc #live aside .night button.toggle.on {background: linear-gradient(45deg, #34444e, #2c435a)}
.pc #live aside .night button.toggle.on:after {left: auto; right: 3px;}
.pc #live aside .night button.toggle:after {position: absolute; top: 2px; left: 2px; display:inline-block; content:''; width:16px; height:16px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 5px rgba(10,0,0,.3)}

.pc #live .head .toggle {position: static}
.pc #live .top h3 {position: absolute; top: 4px; left: 40px; font-size: 1.125rem; line-height: 26px}
.pc #live .tab {margin-bottom: 0} 
.pc #live .tab li {cursor: pointer} 
.pc #live .body {height: calc(100vh - 220px); background: #f3f5f7}
.pc #live .adm .body {height: calc(100vh - 274px)}
.pc #live .bottom {position: absolute; width: 390px; height: 50px; bottom: 0}
.pc #liveList .body {display: flex; flex-wrap: wrap; height: calc(100vh - 144px);}
.pc #liveList .body dl {margin-bottom: 1vh}
.pc #vodList .body {height: calc(100vh - 174px)}

.pc .vodList .body dl {display: flex; margin-bottom: 15px}
.pc .vodList .body dt {position: relative; width: 40%; background: #000}
.pc .vodList .body dt figure {position: relative; padding-top: 56.25%; overflow: hidden}
.pc .vodList .body dt figure img {position: absolute; top: 0; height: 100%; object-fit: cover; opacity: .95}
.pc .vodList .body dt label {position: absolute; right: 5px; bottom: 5px; padding: 0 5px; border-radius: 3px; color: #fff; font-size: 0.75rem; background-color: rgba(0,0,0,0.6)}
.pc .vodList .body dd {position: relative; width: 60%; padding-left: 15px; padding-top: 5px}
.pc .vodList .body dd h4 {margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25}
.pc .vodList .body dd figure {position: absolute; top: 0; left: 10px; width: 40px; height: 40px; border-radius: 20px; overflow: hidden;}
.pc .vodList .body dd .name {margin-bottom: 5px}
.pc .vodList .body dd .hit span:last-child::before {content: '\00B7'; padding: 0 5px}

@media only screen and (min-width:360px){
    .pc #liveList .body dl {width: 100%}
}
@media only screen and (min-width:720px) and (max-width:1440px){
    .pc #liveList .body dl {width: calc(100% / 2 - 2%); margin-right: 4%}
    .pc #liveList .body dl:nth-child(2n) {margin-right: 0}
    .pc #vodList .body {flex-direction: row; flex-wrap: wrap; align-items: flex-start; height: auto; max-height: calc(100vh - 174px)}
    .pc #vodList .body dl {width: calc(100% / 2 - 2%); margin-right: 4%; align-items: flex-start}
    .pc #vodList .body dl:nth-child(2n) {margin-right: 0}
}
@media only screen and (min-width:1441px) and (max-width:1920px){
    .pc #liveList .body dl {width: calc(100% / 3 - 2%); margin-right: 3%}
    .pc #liveList .body dl:nth-child(3n) {margin-right: 0}
    .pc #vodList .body {flex-direction: row; flex-wrap: wrap; align-items: flex-start; height: auto; max-height: calc(100vh - 174px)}
    .pc #vodList .body dl {width: calc(100% / 3 - 2%); margin-right: 3%; align-items: flex-start}
    .pc #vodList .body dl:nth-child(3n) {margin-right: 0}
}
@media only screen and (min-width:1921px){
    .pc #liveList .body dl {width: calc(100% / 4 - 1.5%); margin-right: 2%}
    .pc #liveList .body dl:nth-child(4n) {margin-right: 0}
    .pc #vodList .body {flex-direction: row; flex-wrap: wrap; align-items: flex-start; height: auto; max-height: calc(100vh - 174px)}
    .pc #vodList .body dl {width: calc(100% / 4 - 1.5%); margin-right: 2%; align-items: flex-start}
    .pc #vodList .body dl:nth-child(4n) {margin-right: 0}
}

.pc .liveCast {width: 100%; height: calc(100%); padding-top: 0; overflow: hidden}
.pc .liveCast .viewer {width: 100%}
.pc .liveCast label {right: auto; left: 10px}
.pc .liveCast:hover .controlBar {bottom: 0; transition: all ease-in .1s}
.pc .liveCast .controlBar {position:absolute; left: 0; bottom: -50px; width: calc(100%); height: 50px; display: flex; justify-content: space-between; z-index: 50; transition: all ease-in .1s .5s; background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0.0))}
.pc .liveCast .controlBar .control {display: flex; align-items: center}
.pc .liveCast .controlBar .control .time {color: #fff; font-size: 0.75rem;}
.pc .liveCast .controlBar button {width: 40px; height: 40px; text-indent: -9000px; background-image: url("../images/live.png"); background-color: transparent; background-size: auto 80px}
.pc .liveCast .controlBar button.pause {background-position: 0 0}
.pc .liveCast .controlBar button.play {background-position: 0 -40px}
.pc .liveCast .controlBar button.next {background-position: -40px 0}
.pc .liveCast .controlBar button.volume {background-position: -80px 0}
.pc .liveCast .controlBar button.mute {background-position: -80px -40px}
.pc .liveCast .controlBar button.set {background-position: -40px -40px}
.pc .liveCast .controlBar button.min {background-position: -120px -40px}
.pc .liveCast .controlBar button.pls {background-position: -120px 0}
.pc .liveCast .controlBar button.full {background-position: -160px 0}
.pc .liveCast .controlBar .volumeBar {position: relative; width: 60px; height: 4px; margin-right: 10px; cursor: pointer;border-radius: 2px; background-color: rgba(255,255,255,0.5)}
.pc .liveCast .controlBar .volumeBar span {display: block; height: inherit; border-radius: 2px; background: #fff}
.pc .liveCast .controlBar .volumeBar input {position: absolute; top: -3px; display: block; width: 10px; min-height: 0; height: 10px; margin-left: -5px; padding: 0; border-radius: 50%; background: #fff; z-index: 10}

.pc .toggle li {margin-left: 10px}
.pc .btnTop {position: absolute; top: 0; right: 0; z-index: 100}
.pc .btnTop button {position: relative; width: 30px; height: 30px; text-indent: -9000px; background-color: transparent}
.pc .btnTop button:hover {background-color: rgba(0,0,0,0.1)}
.pc .btnTop button::after {content: ''; display: block; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background-image: url("../images/pc.png"); background-repeat:no-repeat; background-size:  auto 40px}
.pc .btnTop .rld::after {background-position: 0 0}
.pc .btnTop .min::after {background-position: -60px 0}
.pc .btnTop .max::after {background-position: -40px 0}
.pc .btnTop .win::after {background-position: -40px -20px}
.pc .btnTop .cls::after {background-position: -20px 0}
.pc #chat section {width: calc(100% - 10px); height: calc(100vh - 214px); padding: 20px 5px; margin: 0 5px; background: #fff}
.pc #chat footer {left: 2px; bottom: 2px; width: calc(100% - 4px)}
.pc #set .body {height: calc(100vh - 84px)}
.pc #chat .head .back {display: none}
.pc #chat .head .title {width: calc(100% - 10px); padding-left: 10px; line-height: 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.pc #chat .adm .add {padding-bottom: 5px}
.pc #news .sub {height: calc(100vh - 84px);}
.pc #news .write {bottom: 2px; width: calc(100% - 4px)}
.pc #news .sub > div {height: calc(100vh - 134px); overflow-y: auto}
.pc #news .sub.xpt .leading.list {height: calc(100vh - 204px)}

.pc #rooms .sub .body {height: calc(100vh - 154px)}
.pc #rooms .sub .body dt {margin-right: 10px}
.pc #mypage .sub .body {height: calc(100vh - 144px)}
.pc #login .bottom {position: absolute; bottom: 5px; right: 5px}
.pc #login .pa {position: static}
.pc #join .bottom {position: absolute; bottom: 5px; right: 5px}
.pc #join .pa {position: static}

.pc .alertify .ajs-header {display: block; height: 56px}
.pc .alertify .ajs-header::before {position: absolute; top: 12px; left: calc(50% - 20px)}

/*dark*/
.dark {border-color: #414651; background-color: #272d3b}
.dark .dn {color: #0092ff}
.dark .btnTop button::after {background-image: url("../images/dk-pc.png")}
.dark #live section {background-color: #272d3b}
.dark #live .info {background-color: #14171e; color: #cbcccf}
.dark #live .index {background-color: #14171e; color: #cbcccf}
.dark #live aside .hideBtn button {background-color: #272d3b}
.dark #live aside .hideBtn button::after {background-image: url("../images/dk-pc.png")}
.dark #live aside .night::before {background-image: url("../images/dk-pc.png")}
.dark #live .top {color: #cbcccf}
.dark #live .head {background: #14171e; color: #cbcccf}
.dark #live .body {background: #14171e; color: #cbcccf}
.dark #live aside .night button.toggle.on {background: linear-gradient(45deg, #416f96, #2c6390)}
.dark #live aside .night button.toggle.on::after {background: #cbcccf}
.dark .toggle li {background: #374351}
.dark .toggle li.on {background: #416f96}
.dark .tab ul {border-color: #4e525c}
.dark .tab ul li.on {color: #2699ea}
.dark .tab ul li.on::after {background: #146bb5}
.dark #chat .adm {border-color: #4e525c}
.dark #chat .adm ul button {border-color: #3b3d43; background: #5a5c61}

.emoticon dt {margin-bottom: 5px; padding: 5px; background-color: #efefef}
.emoticon dt input {width: 50px; height: 30px; text-indent: -9000px; background-position: center; background-size: contain; background-repeat: no-repeat}
.emoticon dt input.on {background-color: #fff}
.emoticon dt input[value='e1'] {background-image: url("../images/econ01.png")}
.emoticon dt input[value='e2'] {background-image: url("../images/econ02.png")}
.emoticon dd {min-height: 240px}
.emoticon .emta button {width: 30px; height: 30px; background-image: url("../images/econ.png"); background-size: auto 180px}
.emoticon .emtb button {width: 75px; height: 75px; background-image: url("../images/econ2.png"); background-size: auto 375px}
#chat .chatArea .emta em {display: block; width: 30px; height: 30px; background-image: url("../images/econ.png"); background-size: auto 180px}
#chat .chatArea .emtb em {display: block; width: 75px; height: 75px; background-image: url("../images/econ2.png"); background-size: auto 375px; zoom:2}

.emta .emt01 {background-position: 0 0}
.emta .emt02 {background-position: -30px 0}
.emta .emt03 {background-position: -60px 0}
.emta .emt04 {background-position: -90px 0}
.emta .emt05 {background-position: -120px 0}
.emta .emt06 {background-position: 0 -30px}
.emta .emt07 {background-position: -30px -30px}
.emta .emt08 {background-position: -60px -30px}
.emta .emt09 {background-position: -90px -30px}
.emta .emt10 {background-position: -120px -30px}
.emta .emt11 {background-position: 0 -60px}
.emta .emt12 {background-position: -30px -60px}
.emta .emt13 {background-position: -60px -60px}
.emta .emt14 {background-position: -90px -60px}
.emta .emt15 {background-position: -120px -60px}
.emta .emt16 {background-position: 0 -90px}
.emta .emt17 {background-position: -30px -90px}
.emta .emt18 {background-position: -60px -90px}
.emta .emt19 {background-position: -90px -90px}
.emta .emt20 {background-position: -120px -90px}
.emta .emt21 {background-position: 0 -120px}
.emta .emt22 {background-position: -30px -120px}
.emta .emt23 {background-position: -60px -120px}
.emta .emt24 {background-position: -90px -120px}
.emta .emt25 {background-position: -120px -120px}
.emta .emt26 {background-position: 0 -150px}
.emta .emt27 {background-position: -30px -150px}
.emta .emt28 {background-position: -60px -150px}
.emta .emt29 {background-position: -90px -150px}
.emta .emt30 {background-position: -120px -150px}
.emtb .emt31 {background-position: 0 0}
.emtb .emt32 {background-position: 0 -75px}
.emtb .emt33 {background-position: 0 -150px}
.emtb .emt34 {background-position: 0 -225px}
.emtb .emt35 {background-position: 0 -300px}
.emtb .emt36 {background-position: -75px 0}
.emtb .emt37 {background-position: -75px -75px}
.emtb .emt38 {background-position: -75px -2px}
.emtb .emt39 {background-position: -75px -225px}
.emtb .emt40 {background-position: -75px -300px}
.emtb .emt41 {background-position: -150px 0}
.emtb .emt42 {background-position: -150px -75px}
.emtb .emt43 {background-position: -150px -150px}
.emtb .emt44 {background-position: -150px -225px}
.emtb .emt45 {background-position: -150px -300px}

#win_adm, #win_mbr {position:fixed; width:120px; height:auto; border:1px solid #c9d2d7; border-radius:5px; background:#404756; display:none; z-index:1000}
#win_adm ul,#win_mbr ul {padding:5px;}
#win_adm ul li, #win_mbr ul li {margin-bottom:3px}
#win_adm button, #win_mbr button {width:100%; color:white; border:none; line-height:20px; text-align:left; padding-left:10px; background-color:transparent}
#win_adm button:hover, #win_mbr button:hover {color:#fff; background:#c9d2d7}

.alertify .ajs-dialog {border-radius: 15px; border: 1px solid #333; overflow: hidden}
.alertify .ajs-header {display: flex; align-items: center; justify-content: center; text-indent: -9000px; padding: 8px 16px; background-color:#fff}
.alertify .ajs-header::before {content: ''; width: 40px; height: 40px; background: url("../images/warning.png") no-repeat center; background-size: cover}
.alertify .ajs-body {min-height: 80px; text-align: center}
.alertify .ajs-commands button.ajs-close {background-image: url("../images/close.png")}
.alertify .ajs-footer {padding-bottom: 14px}
.alertify .ajs-footer .ajs-buttons.ajs-primary {text-align: center}
.alertify .ajs-footer .ajs-buttons .ajs-button {min-height:30px; border-radius: 15px; color: #111; background-color:#ccc}
.alertify .ajs-footer .ajs-buttons .ajs-button:last-child {color: #fff; background-color:#272727}

.player-dimensions {max-width: 100%; max-height: 100%}

/*방송 메신저에서 관리자, 모니터링 관리자, 고객 글씨 크기 굵기 색상 등 다르게*/
/*방송채팅 화면에서는 줄넘어간 것으로 입력 되지만 메시지를 보낼때는 띄어쓰기로 변경 됨*/

.dark .chatArea li[auth='user'] {}
.dark .chatArea li[auth='xpt'] {color: #34ffee;}
.dark .chatArea li[auth='mnt'] {color: #34ffee;}

.chatArea li[auth='user'] {}
.chatArea li[auth='xpt'] {color: #000cff; }
.chatArea li[auth='mnt'] {color: #000cff; }


/*벙어리 : 관리자는 벙어리 된 사람인지 구별 필요해 보임 ex) 벙어리된 아이디 : (벙)가나다라마사바*/
.chatArea li.P:before {content:'[벙]'; display:inline-block; margin-right:5px; color:#3cf}
.chatArea li.M:before {content:'[벙]'; display:inline-block; margin-right:5px; color:#3cf}
.chatArea li.X:before {content:'[금]'; display:inline-block; margin-right:5px; color:#3cf}
.chatArea li.H:before {content:'[가]'; display:inline-block; margin-right:5px; color:#3cf}