/* font-face */

@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/notoSansKR/NotoSansKR-Regular.otf") format("otf");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/openSans/OpenSans-Regular.ttf") format("ttf");
    unicode-range: U+0020-007E;
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/notoSansKR/NotoSansKR-Bold.otf") format("otf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/openSans/OpenSans-SemiBold.ttf") format("ttf");
    unicode-range: U+0020-007E;
    font-style: normal;
    font-weight:bold;
}

/* html CSS */
html {
    font-size: 14px;
    font-family: Poppins, sans-serif
}

* {
  font-family: 'NotoSansKR', sans-serif!important;
}

.fl { float:left; }
.fr { float:right; }
.cb { clear:both; }
.cf:after { content:''; display:block; clear:both; }


/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #7555d7 transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #7555d7;
    border-radius: 5px;
    border: none;
}

ul.naver_subscribers {
    column-count: 2;
}

th.t {
    color: #1d8def;
}

th.y {
    color: #fb0009;
}

th.f {
    color: #3351a3;
}


/* display toggle switch */
#display-switcher {
    height:39px;
}

#display-switcher .switch {
  position: relative;
  display: inline-block;
  top:9px;
  right:10px;
  width: 37px;
  height: 21px;
}

#display-switcher .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#display-switcher .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

#display-switcher .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 1px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#display-switcher input:checked + .slider {
  background-color: #977bea;
}

#display-switcher input:focus + .slider {
  box-shadow: 0 0 1px #977bea;
}

#display-switcher input:checked + .slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

/* Rounded sliders */
#display-switcher .slider.round {
  border-radius: 17px;
}

#display-switcher .slider.round:before {
  border-radius: 50%;
}

/* diff custom */
.diff_plus {
  color:crimson!important;
}

.diff_minus {
  color:dodgerblue!important;
}

.diff_zero {
  color:#03c75a!important;
  font-weight:bold;
}

/* roundborder */
.roundborder {
  border-radius:0.875rem;
}

/* uk custom */
.uk-card {
  border-radius: 0.875rem;
  overflow:hidden;
}

.uk-card-title {
  font-size:16px;
}

.uk-card-default {
  box-shadow: 0 5px 15px rgba(0,0,0,.28);
}

.uk-input:focus {
  border-color:#7555d7!important;
}

.uk-tab > .uk-active > a {
  border-color:#7555d7!important;
  color:#f5f6fa!important;
}

.uk-active > a {
  background:#7555d7!important;
  color:#f5f6fa!important;
}

.uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate {
  background-color:#7555d7!important;
}

/* background custom */
.bgc_main {
  background:#7555d7!important;
}

.bgc_sub1 {
  background:#15183c!important;
}

.bgc_sub2 {
  background:#f5f6fa!important;
}

.bgc_sub3 {
  background:#fff!important;
}

.fc_main {
  color:#7555d7!important;
}

.fc_sub1 {
  color:#15183c!important;
}

.fc_sub2, .fc_sub2 * {
  color:#f5f6fa!important;
}

.shadow_main {
  box-shadow:4px 0px 4px #7555d7!important;
}

.portalrank_tab, .portalrank_tab > * {
    color:#7555d7;
    background:#efefef!important;
}

.portalrank_tab_on, .portalrank_tab_on > *  {
    color:#f5f6fa!important;
    background:#7555d7!important;
}

tr.private-view {
    background:#bdbdbd!important;
}

/* wave bg custom */
#footer {
  position:relative;
  padding:120px;
}

.copyrightbox {
  position:absolute;
  left:0;
  bottom:20px;
  width:100%;
  padding:0 50px;
  box-sizing:border-box;
  z-index:99;
  color:#f6f5fa;
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #7555d7 20%, #15183c 80%);
}

.bgTop {
    z-index: 15;
    opacity: 0.5;
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}

.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 top;
    transform-origin: center top;
}

.waveTop {
    background-size: 50% 100px;
}

.waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -moz-animation: move-wave 3s;
    -o-animation: move-wave 3s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
}

.waveMiddle {
    background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
    -webkit-animation: move_wave 10s linear infinite;
    -moz-animation: move_wave 10s linear infinite;
    -o-animation: move_wave 10s linear infinite;
}

.waveBottom {
    background-size: 50% 100px;
}

.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
    -webkit-animation: move_wave 15s linear infinite;
    -moz-animation: move_wave 15s linear infinite;
    -o-animation: move_wave 15s linear infinite;
}

.loginpage .uk-section {
  position:absolute;
  width:100%;
  background:none;
  z-index:99;
}

.loginpage .waveWrapper {
  background:#f5f6fa;
}

.loginpage .waveWrapper .waveWrapperInner {
  height:55%;
}

/* header */
#header * { color:#fff; }

/* nav the drip */
.uk-navbar { z-index:10; }
.uk-navbar-toggle > svg { fill:rgb(255, 255, 255); }
.drip {
    position:absolute;
    top:0px;
    right:5%;
    width:250px;
    height:48px;
    background:#7555d7;
    cursor:pointer;
    -webkit-filter: url("#goo");
    filter: url("#goo");
}

.drop {
    position:absolute;
    top:0;
    left:75%;
    width:30px;
    height:80px;
    border-radius:50%;
    background:#7555d7;
    transition:all 0.4s ease;
}

.drop:hover {
    height:120px;
    animation:reset;
}

.droplet {
    position:absolute;
    top:0;
    left:64%;
    width:20px;
    height:55px;
    border-radius:50%;
    background:#7555d7;
    transition:all 0.4s ease;
    animation:droplet 1.4s 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

.droplet:hover {
    top:20px;
    left:63%;
    width:40px;
    animation:reset;
}

.droplet2 {
    position:absolute;
    top:20px;
    left:76%;
    width:20px;
    height:35px;
    border-radius:50%;
    background:#7555d7;
    z-index:3;
    transition:all 0.4s ease;
}

.droplet2.dripit {
    animation:droplet 1.3s 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

@keyframes drop {
    0% {
        transform: translate(0, 0);
    }
    50% {
        height: 40px;
        width: 40px;
    }
    100% {
        transform: translate(0, 550px);
    }
}


@keyframes droplet {
    0% {
        transform: translate(0, 0);
    }
    50% {
        height: 30px;
        width: 30px;
    }
    100% {
        transform: translate(0, 550px);
    }
}

/* offcanvas nav custom */
.uk-offcanvas-bar ul li a:hover {
    color:#7555d7!important;
}

.uk-offcanvas-bar ul li a.active {
    color:#7555d7!important;
}


/* notification custom */
.uk-notification-message {
  border-radius:0.875rem;
  background:#7555d7;
  color:#f5f6fa;
}

.uk-notification-message-primary {
  color:#f5f6fa;
}

.uk-notification-message-success {
  color:#00ff9f;
}

.uk-notification-message-danger, .uk-notification-message-warning {
  color:red;
}

/* tab on off */
.tab { display:none; }
.tab.on { display:block; }

/* custom button */
.uk-button {
    padding:0;
    border-radius:5px;
}

.uk-button > a {
    display:block;
    padding:0 30px;
    color:#7555d7;
}

.uk-button-small {
    padding:0;
}

.uk-button-small > a {
    display:block;
    padding:0 15px;
    color:#7555d7
}

.form-button {
    display:block;
    padding:0 30px;
    color:#7555d7;
}

.form-button-small {
    display:block;
    padding:0 15px;
    color:#7555d7;
}

/* custom switcher */
#custom-switcher {
    list-style:none;
}

#custom-switcher-content {
    list-style:none;
}

/* user info page custom */
table.userinfo tbody tr { line-height:37px; }

/* responsive custom */
@media screen and (max-width:992px){
    table.userinfo td, table.userinfo th { display:block; text-align:left; }

    table.userinfo thead { display:none; }

    table.userinfo tbody tr { line-height:1.5; }

    table.userinfo tbody tr { position:relative; }

    table.userinfo tbody tr td { position:relative; width:100%; padding:8px!important; padding-left:40%!important; box-sizing:border-box; }

    table.userinfo tbody tr td input { height:30px; padding-left:10px; }

    table.userinfo tbody tr td input.roundborder { height:25px; border-radius:0.375rem; }

    table.userinfo tbody tr td input.uk-checkbox { height:16px; }

    table.userinfo tbody tr td:before { position:absolute; left:30px; width:30%; }

    table.userinfo tbody tr td:nth-child(4):before { content: "ID"; }

    table.userinfo tbody tr td:nth-child(5):before { content: "이름"; }

    table.userinfo tbody tr td:nth-child(6):before { content: "이메일"; }

    table.userinfo tbody tr td:nth-child(7):before { content: "비밀번호"; }

    table.userinfo tbody tr td:nth-child(8):before { content: "관리자 권한"; }

    table.userinfo tbody tr td:nth-child(9):before { content: "등록날짜"; }

    table.userinfo tbody tr td:nth-child(10):before { content: "마지막 로그인"; }

    table.userinfo tbody tr td:last-child {
        padding:0!important;
        margin-bottom:10px;
    }

    table.userinfo tbody tr td:last-child button { width:50%; margin:0 auto; }
}

/* loading */
#loading {
    position:absolute;
    top:0;
    left:0;
    margin:0 auto;
    width:100%;
    height:100%;
    background:#fff;
    cursor:wait;
    z-index:99999;
}

#loading > img {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-150px;
    width:300px;
    height:300px;
}

#wrapper {
    display:none;
}

/* 뉴스판 */
.ch_label p {
    margin:0;
}

.ch_label .ch_name_tag {
    margin:0;
    height:39px;
    line-height:42px;
}

.ch_label .ch_time_tag {
    margin:0;
    background:#fff;
}

.ch_time_tag .update_info {
    display:block;
    margin-bottom:3px;
}

.ch_time_tag .update_val {
    width:58%;
    box-sizing:border-box;
}

.ch_time_tag .update_text {
    width:40.7%;
    box-sizing:border-box;
    color:#00ff1f!important;
    font-size:0.875rem;
    text-align:center;
    margin-right:2px;
}

.ch_time_tag .refresh_text {
    width:40.7%;
    box-sizing:border-box;
    color:#ffe000!important;
    font-size:0.875rem;
    text-align:center;
    margin-right:2px;
}

.ch_time_tag .update_val, .ch_time_tag .refresh_val {
    width:58%;
    box-sizing:border-box;
    background: #876ed7;
    text-align:center;
}

.realtime_rank {
    margin:0 auto;
    padding-left:190px;
    width:250px;
    height:39px;
    overflow:hidden;
    line-height:39px;
}

.realtime_rank ul {
    list-style:none;
    margin:0;
    padding-left:0;
    line-height:39px;
    font-size:16px;
}

.rank_item {
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}

.rank_item .item_num {
    color:#03c75a;
    font-weight:bold;
}

#rolling_rank .rank_item {
    font-size:20px;
    font-weight:bold;
}

#rolling_rank .item_num {
    margin-right:5px;
}

#static_rank_list .rank_item { cursor:pointer; }

#static_rank_list .item_title { font-size:16px; color:#000; }

#static_rank_list .uk-modal-title {
    margin-bottom:0;
}

.static_left {
    width:40%;
    padding-left:5%;
}

.static_right {
    width:40%;
    padding-left:10%;
}

.static_left .rank_item, .static_right .rank_item {
    cursor:pointer;
    margin-bottom:15px;
    transition:all 0.3s;
}

.static_left .rank_item:hover, .static_right .rank_item:hover {
    color:#7555d7;
}

.static_left .item_num, .static_right .item_num {
    display:inline-block;
    width:20px;
    text-align:center;
}

.static_right .item_num {
    margin-right:2px;
}

@media screen and (max-width:961px){
    .realtime_rank {
        padding-left:0;
    }

    .rank_item {
        text-align:center;
    }
}

@media screen and (max-width:420px){
    .ch_label .ch_time_tag {
        width:100%;
    }

    .realtime_rank {
        width:180px;
        padding-left:0;
        padding-top:10px;
    }

    .static_left .rank_item {
        text-align:left;
    }

    .static_right .rank_item {
        text-align:left;
    }
}

.newspan_info .ch_link {
    display:inline-block;;
    overflow:hidden;
}

.newspan_info .ch_logo {
    width:48px;
    height:48px;
    border-radius:50%;
    margin-right:8px;
    overflow:hidden;
}

.newspan_info .ch_logo img {
    width:100%;
}

.newspan_info .ch_info {
    height:48px;
    line-height:48px;
}

.newspan_info .ch_info .ch_title {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#1e1e23;
    letter-spacing:-.5px;
    font-size:1.5rem;
    font-weight:bold;
    margin:0;
    height:32px;
    line-height:32px;
}

.newspan_info .ch_info .ch_subs {
    margin:0;
    height:16px;
    line-height:16px;
    color:#303030;
}

.newspan_list {
    margin-top:0;
}

.newspan_list li {
    position:relative;
    margin-top:0!important;
    border-top:1px solid #efeff0;
}

.newspan_list li a:hover, .newspan_list li a:hover .list_view > span {
    text-decoration:underline;
    text-decoration-color:#7555d7;
}

.newspan_list li:first-child {
    border-top:0;
}

.newspan_list li:nth-child(5).status_new, .newspan_list li:nth-child(6).status_new, .newspan_list li:nth-child(5).status_move, .newspan_list li:nth-child(6).status_move {
    border:none;
}

.newspan_list li.status_new::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    background:url('https://image.imnews.imbc.com/page/include/images/status_new.png') no-repeat 100% 100%;
    z-index:1;
}

.newspan_list li.status_move::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    background:url('https://image.imnews.imbc.com/page/include/images/status_move.png') no-repeat 100% 100%;
    z-index:1;
}

.newspan_list li:nth-child(5).status_new::before, .newspan_list li:nth-child(6).status_new::before, .newspan_list li:nth-child(5).status_move::before, .newspan_list li:nth-child(6).status_move::before {
    top:0%;
    right:4px;
}

.newspan_list li a {
    display:block;
    padding:5px 0px 2.5px 6px;
    letter-spacing:-.5px;
    overflow:hidden;
    text-overflow:ellipsis;;
    white-space:nowrap;
    transition:all 0.1s;
    text-decoration:none;
    color:#333!important;
}

.newspan_list li a .item_thumb {
    display:none;
}

.newspan_list li a .item_title {
    font-size:16px;
    font-weight:400;
    line-height:20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.newspan_list li a .list_view {
    font-size:12px;
    font-weight:bold;
    color:#5e5e5e;
    margin-right:9px;
}

.display .newspan_list li a .list_view {
    font-size:20px;
}

.newspan_list li:nth-child(4) {
    margin-bottom:6px;
}

.newspan_list li:nth-child(5), .newspan_list li:nth-child(6) {
    float:left;
    width:50%;
    padding:0 5px;
    box-sizing:border-box;
}

.newspan_list li:nth-child(5) a, .newspan_list li:nth-child(6) a {
    display:block;
    padding:0;
    line-height:1.6;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.newspan_list li:nth-child(5) a .item_thumb, .newspan_list li:nth-child(6) a .item_thumb {
    display:block;
    position:relative;
    border-radius:4px;
    overflow:hidden;
    white-space:nowrap;
}

.newspan_list li:nth-child(5) a .item_thumb img, .newspan_list li:nth-child(6) a .item_thumb img {
    width:100%;
    height:auto;
}

.newspan_list li:nth-child(5) a .item_title, .newspan_list li:nth-child(6) a .item_title {
    display:block;
    padding:6px 2px 0px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;
    font-weight:400;
    line-height:1.8rem;
    letter-spacing:-.5px;
}

.newspan { overflow:hidden; }

.newspan .link_more {
    display:block;
    margin:0 auto;
}

.newspan .link_more .btn_more {
    display:block;
    max-width:200px;
    margin:0 auto;
    padding:0 18px;
    box-sizing:border-box;
    line-height:40px;
    font-weight:400;
    font-size:14px;
    color:#4d4d4d;
    letter-spacing:-0.5px;
    border:1px solid #7555d7;
    border-radius:19px;
    background-color:#fff;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 2px 4px 0 rgb(237, 239, 242);
    transition:all 0.1s;
}

.newspan .link_more .btn_more:hover {
    border:1px solid #fff;
    background:#7555d7;
    color:#fff;
}

.newspan .link_more .btn_more .ch_name {
    margin-right:3px;
}


/* newspan list - slider custom*/
.uk-slider-nav.uk-dotnav > li > a {
    color:#fff;
    border-color:#333;
}

.uk-slider-nav.uk-dotnav>*>:hover {
    color:#333;
    background-color:#333;
    border-color:transparent;
}

/* categoryarticle */
.article_row { cursor:pointer; }
.article_row.row-opened { background:#dedede; color:#7555d7; }
.discord_row.row-opened { background:#dedede; color:#7555d7; }
.blob.row-opened { background:#dedede; color:#7555d7; }
[class^='detail_row_'] { background:#edebeb; }
.uk-table-hover tbody tr.row-opened:hover,.uk-table-hover > tr.row-opened:hover {
    background: #dedede;
}

/* display mode custom */
.display .newspan_info .ch_logo { width:96px; height:96px; }
.display .newspan_info .ch_info .ch_title { font-size:3rem; height:64px; line-height:64px; }
.display .newspan_info .ch_info .ch_subs { height:32px; line-height:32px; font-size:24px; }
.display ul li a { padding-top:15px; padding-bottom:15px; }
.display ul li a .item_title { font-size:24px; font-weight:bold; line-height:24px; letter-spacing:-1px; }
.display ul li:nth-child(5) a .item_thumb, .display ul li:nth-child(6) a .item_thumb { padding:8%; }
.display ul li:nth-child(5) a .item_title, .display ul li:nth-child(6) a .item_title { padding:0 8%; font-size:24px; font-weight:bold; line-height:24px; letter-spacing:-1px; }
.display ul li:nth-child(5) a .list_view, .display ul li:nth-child(6) a .list_view { padding:0 8%; margin-right:0px; }
.display .newspan_list li.status_new::before { width:55px; height:55px; background-size:100%; }
.display .newspan_list li.status_move::before { width:55px; height:55px; background-size:100%; }
.display .newspan_list li:nth-child(5).status_new::before, .display .newspan_list li:nth-child(6).status_new::before { top:calc(8% - 6px); right:calc(8% + 4px); width:100px; height:100px; background-size:100%; }
.display .newspan_list li:nth-child(5).status_move::before, .display .newspan_list li:nth-child(6).status_move::before { top:calc(8% - 6px); right:calc(8% + 4px); width:100px; height:100px; background-size:100%; }


/* studio */
#studioReserve .studio_notice { padding-left:15px; list-style:none; overflow:hidden; }
#studioReserve .studio_notice li { line-height:1.6; font-size:16px; color:#333; }

#studioReserve .tui-full-calendar-section-detail .tui-full-calendar-content { font-weight:bold; }

#studioReserve .tui-full-calendar-timegrid-hourmarker-time { font-size:18px!important; }

#studioReserve .refreshBtn {
    cursor:pointer;
    transition:0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}

#studioReserve .refreshBtn:hover {
    transform:rotate(450deg);
}

#studioReserve #menu-navi > span {
    cursor:pointer;
}

#studioReserve .calendar-render-range {
    height:40px;
    line-height:40px;
    font-weight:bold;
}

#studio_status .studio_status {
    display:inline-block;
    border-radius:3px;
    border:2px solid #929292;
    margin-right:10px;
    padding:2px 5px;
    box-sizing:border-box;
    font-size:12px;
    color:#929292;
}

#studio_status .studio_status.on {
    border:2px solid crimson;
    font-weight:bold;
    background:crimson;
    color:#fff;
    animation: blink 1.0s linear infinite;
    -webkit-animation: blink 1.0s linear infinite;
    -moz-animation: blink 1.0s linear infinite;
    -ms-animation: blink 1.0s linear infinite;
    -o-animation: blink 1.0s linear infinite;
}

#scheduleList_Table tr.on {
    color:crimson;
    font-weight:bold;
    animation: blinktr 1.0s linear infinite;
    -webkit-animation: blinktr 1.0s linear infinite;
    -moz-animation: blinktr 1.0s linear infinite;
    -ms-animation: blinktr 1.0s linear infinite;
    -o-animation: blinktr 1.0s linear infinite;
}

@keyframes blink {
    0% { background:#929292; border:2px solid #929292; }

    50% { background:crimson; border:2px solid crimson; }

    100% { background:#929292; border:2px solid #929292; }
}

@keyframes blinktr {
    0% { color:#666; }

    50% { color:crimson; }

    100% { color:#666; }
}

.tui-full-calendar-section-title { width:100%!important; }
.tui-full-calendar-section-allday, .tui-full-calendar-section-state { display:none!important; }
.tui-full-calendar-section-private, .tui-full-calendar-section-public { display:none!important; }



/* Sorting table custom */
.sortable { cursor: pointer; color:black!important; }
.sortable:after { content:'⇵'; }
.sortable.sort-desc { color:crimson!important; }
.sortable.sort-desc:after { content:'↓'; font-weight:bold; }
.sortable.sort-asc { color:dodgerblue!important; }
.sortable.sort-asc:after { content:'↑'; font-weight:bold; }


/* daily */
.article_type_mbc { color:#7555d7; }
.article_type_mbc a { color:#7555d7!important; }
.article_type_vod { color:#ff6384; }
.article_type_vod a { color:#ff6384!important; }
.article_type_imgtxt { color:#36a2eb; }
.article_type_imgtxt a { color:#36a2eb!important; }


/* live */
#live_datatable tr td:first-child { box-sizing:border-box; text-align:center; cursor:pointer; }
#live_datatable tr td:first-child img { display:none; width:18px; }
#live_datatable tr td:first-child img.chart_visible { display:inline-block; }

#platform_group span button { color:#7555d7!important; background:#f5f6fa!important; border:1px solid transparent; }
#platform_group span button.checked, #platform_group button.checked * { color:#f5f6fa!important; background:#7555d7!important; }



/* wordcloud */
#keyword_table tr.article_MBC, #keyword_table tr.article_MBC * { color:#7555D7!important; }
#keyword_table tr.article_SBS, #keyword_table tr.article_SBS * { color:#1672eb!important; }
#keyword_table tr.article_KBS, #keyword_table tr.article_KBS * { color:#0f5a52!important; }
#keyword_table tr.article_JTBC, #keyword_table tr.article_JTBC * { color:#f15f5f!important; }
#keyword_table tr.none_searched_article { color:crimson; font-weight:bold; }

.keywordtableview {
    position:relative;
    max-height: calc(100vh) !important;
}

.keywordtableview .waveWrapper {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh);
    z-index: -1;
}

.keywordtableview .waveAnimation {
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:calc(200vh);
    background:url('../images/backgrounds/tablewavebg.png');
    background-repeat: no-repeat repeat;
    background-position: left 0;
    animation: move-wave-onwordcloudtable 30s linear infinite;
    -webkit-animation: move-wave-onwordcloudtable 30s linear infinite;
    -moz-animation: move-wave-onwordcloudtable 30s linear infinite;
    -o-animation: move-wave-onwordcloudtable 30s linear infinite;
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
}

@keyframes move-wave-onwordcloudtable {
    0% {
        transform: translateY(0) translateZ(0)
    }
    50% {
        transform: translateY(-25%) translateZ(0)
    }
    100% {
        transform: translateY(-50%) translateZ(0)
    }
}

#keyword_search_btn [stroke*='#'] { stroke: #7555d7!important; }
#keyword_search { background:#fff; color:#7555d7; font-weight:bold; border-color:#7555d7; }
#keyword_search::placeholder { color:#7555d7; }

#keyword_info div[data-chname='MBC'] .chname p { color:#7555d7; font-weight:bold; }
#keyword_info div[data-chname='MBC'] .article_count p { color:#7555d7; font-weight:bold; font-size:32px; }
#keyword_info div[data-chname='MBC'] .total_article_views p { color:#7555d7; font-size:20px; }
#keyword_info div[data-chname='KBS'] .chname p { color:#0f5a52; font-weight:bold; }
#keyword_info div[data-chname='KBS'] .article_count p { color:#0f5a52; font-weight:bold; font-size:32px; }
#keyword_info div[data-chname='KBS'] .total_article_views p { color:#0f5a52; font-size:20px; }
#keyword_info div[data-chname='SBS'] .chname p { color:#1672eb; font-weight:bold; }
#keyword_info div[data-chname='SBS'] .article_count p { color:#1672eb; font-weight:bold; font-size:32px; }
#keyword_info div[data-chname='SBS'] .total_article_views p { color:#1672eb; font-size:20px; }
#keyword_info div[data-chname='JTBC'] .chname p { color:#f15f5f; font-weight:bold; }
#keyword_info div[data-chname='JTBC'] .article_count p { color:#f15f5f; font-weight:bold; font-size:32px; }
#keyword_info div[data-chname='JTBC'] .total_article_views p { color:#f15f5f; font-size:20px; }

#keyword_attention div[data-chname='MBC'] .chname p { color:#7555d7; font-weight:bold; }
#keyword_attention div[data-chname='MBC'] .first_keyword p { color:#7555d7; font-weight:bold; font-size:32px; cursor:pointer; }
#keyword_attention div[data-chname='MBC'] .second_keyword p { color:#7555d7; font-size:20px; cursor:pointer;  }
#keyword_attention div[data-chname='KBS'] .chname p { color:#0f5a52; font-weight:bold; }
#keyword_attention div[data-chname='KBS'] .first_keyword p { color:#0f5a52; font-weight:bold; font-size:32px; cursor:pointer;  }
#keyword_attention div[data-chname='KBS'] .second_keyword p { color:#0f5a52; font-size:20px; cursor:pointer;  }
#keyword_attention div[data-chname='SBS'] .chname p { color:#1672eb; font-weight:bold; }
#keyword_attention div[data-chname='SBS'] .first_keyword p { color:#1672eb; font-weight:bold; font-size:32px; cursor:pointer;  }
#keyword_attention div[data-chname='SBS'] .second_keyword p { color:#1672eb; font-size:20px; cursor:pointer;  }
#keyword_attention div[data-chname='JTBC'] .chname p { color:#f15f5f; font-weight:bold; }
#keyword_attention div[data-chname='JTBC'] .first_keyword p { color:#f15f5f; font-weight:bold; font-size:32px; cursor:pointer;  }
#keyword_attention div[data-chname='JTBC'] .second_keyword p { color:#f15f5f; font-size:20px; cursor:pointer;  }


/* cctv_archive*/
.cctv_archive_video > p { display:inline-block; font-size:1.25rem; line-height:1.4; color:#333; font-weight:bold; }

/* livepan custom */
.livepan_ch_filter > p { display:inline-block; font-size:1.25rem; line-height:1.4; color:#333; font-weight:bold; }
.livepan_ch_filter .selectedChannelLen { transition: all 0.3s ease; }
.livepan_info { padding:10px; border-radius:0.875rem; background: rgba(255, 255, 255, 0.65); margin-right:0px; margin-bottom:15px; cursor:pointer; transition:all 0.3s ease; }
.livepan_info.selected { background:#7555d7; }
.livepan_info.selected .ch_info .ch_title { color:#fff; }
.livepan_info.selected .ch_info .ch_subs { color:#fff; }
.livepan_info:last-child { margin-bottom:0; }
.livepan_info .ch_link { display:inline-block; overflow:hidden; }
.livepan_info .ch_logo { width:48px; height:48px; border-radius:50px; overflow:hidden; }
.linepan_info .ch_logo img { width:100%; }
.livepan_info .ch_info { height:48px; line-height:48px; margin-left:8px; }
.livepan_info .ch_info .ch_title { margin:0; height:32px; line-height:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1e1e23; letter-spacing:-.5px; font-size:1.5rem; font-weight:bold; }
.livepan_info .ch_info .ch_subs { margin:0; height:16px; line-height:16px; color:#303030; }
.livepan_info .ch_liveLen { height:48px; line-height:48px; }
.livepan_info .ch_liveLen .ch_len { margin:0; height:48px; line-height:48px; color:#fff; text-align:center; font-size:1.5rem; }

.livepan_list { }
.livepan_list .mainView { margin-bottom:30px; padding:0; margin-left:0; }
.livepan_list .mainView > div:first-child { padding-left:0; }
.livepan_list .mainView .video_wrap { position:relative; width:100%; height:0; padding-bottom:56.25%; border-radius:0.875rem; overflow:hidden; box-shadow: 0 5px 15px rgba(0,0,0,.28); }
.livepan_list .mainView .video_wrap iframe { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
.livepan_list .mainView > div:first-child { position:relative; }
.livepan_list .mainView > div:first-child .live_label { position:absolute; top:5px; left:5px; color:#fff; margin-bottom:0; background:crimson; z-index:10; transition:all 0.3s ease; }
.livepan_list .mainView > div:first-child .live_viewer { position:absolute; bottom:5px; left:5px; color:#fff; margin-bottom:0; z-index:10; transition:all 0.3s ease; }
.livepan_list .mainView > div:first-child:hover .live_label { display: none; }
.livepan_list .mainView > div:first-child:hover .live_viewer { display: none; }
.livepan_list .mainView > div:last-child { position:relative; }
.livepan_list .mainView > div:last-child .video_viewer_chart { position:relative; height:100%; }
.livepan_list .mainView > div:last-child .video_viewer_chart .uk-card { height:100%; padding:15px; }
.livepan_list .mainView > div:last-child .video_viewer_chart .uk-card canvas { margin-bottom:10px; }
.livepan_list .mainView .video_viewer_chart p { display: inline-block; font-size: 1.25rem; line-height: 1.4; color: #333; font-weight: bold; }
.livepan_list .mainView .video_viewer_chart #refreshLiveData a span.uk-icon { transition:all 0.3s ease; }
.livepan_list .mainView .video_viewer_chart #refreshLiveData {
    height:38px;
    box-sizing: border-box;
    border:2px solid #929292;
    border-radius: 5px;
    animation: refreshBlink 2.0s linear infinite;
    -webkit-animation: refreshBlink 2.0s linear infinite;
    -moz-animation: refreshBlink 2.0s linear infinite;
    -ms-animation: refreshBlink 2.0s linear infinite;
    -o-animation: refreshBlink 2.0s linear infinite;
}

@keyframes refreshBlink {
    0% { background:#929292; border:2px solid #929292; }

    50% { background:#00ffad; border:2px solid #00ffad; }

    100% { background:#929292; border:2px solid #929292; }
}

.livepan_list .mainView .video_viewer_chart #refreshLiveData a:hover span.uk-icon { transform:rotate(450deg); }

.livepan_list .listView { }
.livepan_list .listView .uk-slider { }
.livepan_list .listView .uk-slider > div { padding:0; }
.livepan_list .listView .uk-slider > div > .uk-slider-items { margin-bottom:10px; }
.listView li .livepan_ch_link .uk-card-media-top { position:relative; }
.listView li .livepan_ch_link .uk-card-media-top .video_wrap { position:relative; width:100%; height:0; padding-bottom: 56.25%; overflow:hidden; }
.listView li .livepan_ch_link .uk-card-media-top .video_wrap iframe { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
.listView li .livepan_ch_link .uk-card-body { padding:10px; }
.listView li .livepan_ch_link .live_label { position:absolute; top:5px; left:5px; color:#fff; margin-bottom:0; background:crimson; z-index:10; transition:all 0.3s ease; }
.listView li .livepan_ch_link .live_viewer { position:absolute; bottom:5px; left:5px; color:#fff; margin-bottom:0; z-index:10; transition:all 0.3s ease; }
.listView li .livepan_ch_link img { width:100%; }
.listView li .livepan_ch_link:hover .live_label { display: none; }
.listView li .livepan_ch_link:hover .live_viewer { display: none; }

.listView li .livepan_ch_logo { width:48px; height:48px; border-radius:50%; overflow:hidden; }
.listView li .livepan_ch_info { width:calc(100% - 56px); margin-left:8px; }
.listView li .livepan_ch_info .livepan_ch_title { color:#333; margin-bottom:0; font-size: 1rem; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.listView li .livepan_ch_info .livepan_ch_name { color:#333; margin-bottom:0; font-size: 1rem; font-weight:bold; }

@media screen and (max-width: 650px) {
    .livepan_ch_filter > p { display:none; }
    .livepan_ch_list { text-align:center; }
    .livepan_info { display:inline-block; padding:5px; float:none; margin-right: 10px; margin-bottom:0px; background: rgba(255, 255, 255, 0.65); }
    .livepan_info .ch_info { display:none; }
    .livepan_info.selected .ch_logo { margin-right:0px; }

    .livepan_list .mainView > div:last-child { margin-top:15px; padding-left:0; }
    .livepan_list .mainView > div:last-child { position:static; }
    .livepan_list .mainView > div:last-child .video_viewer_chart { position:static; height:auto; }
    .livepan_list .mainView > div:last-child .video_viewer_chart .uk-card { height:auto; }
    .livepan_list .mainView > div:last-child .video_viewer_chart .uk-card canvas { margin-bottom:0px; }
}


table.cctv_archive td {vertical-align: middle}
table.cctv_archive img {max-width: 60%; border-radius: 7px; float:right}
tr.blob img {max-width: 100%; border-radius: 7px;}
