main,
#chat {
    position: relative;
}

.indent {
    text-indent: -9999px
}

.user_photo50 {
    width: 50px;
    height: 50px
}

.user_photo {
    display: inline-block;
    overflow: hidden
}

    .user_photo img {
        width: 100%;
        height: 100%;
        vertical-align: bottom
    }

.noty {
    display: inline-block;
    border: 1px solid #c01e1e;
    color: #fff;
    background: #e62626;
    font-size: 12px;
    font-weight: 700
}

.noty {
    height: 20px;
    line-height: 18px;
    width: 20px;
    text-align: center
}

.tab_box {
    min-width: 380px;
    border-top: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    border-left: 1px solid #d1d1d1
}

    .tab_box li {
        float: left;
        width: 126px
    }

        .tab_box li > .tab_div {
            display: block;
            height: 54px;
            border-left: 1px solid #d1d1d1;
            background: #f5f5f5;
            text-align: center;
            padding-right: 30px
        }

        .tab_box li:first-child > .tab_div {
            border-left: none
        }

        .tab_box li > .tab_div.t_userlist {
            padding-right: 0
        }

        .tab_box li > .tab_div .title {
            letter-spacing: -1px;
            font-size: 13px;
            line-height: 54px
        }

        .tab_box li > .tab_div .add_box {
            display: inline-block;
            width: auto;
            line-height: 54px;
            text-align: left;
            margin-left: 4px
        }

            .tab_box li > .tab_div .add_box .count {
                background-position: -64px -143px;
                margin-right: 2px
            }

            .tab_box li > .tab_div .add_box .talk {
                background-position: 0 -143px;
                margin-right: 2px
            }

            .tab_box li > .tab_div .add_box .number {
                margin-right: 5px;
                position: relative;
                top: 1px
            }

        .tab_box li > .tab_div:hover {
            color: #555;
            background: #fff
        }

            .tab_box li > .tab_div:hover em.box {
                display: block;
                top: -1px;
                left: -1px;
                width: 127px;
                height: 56px;
                border: 1px solid #888;
                z-index: 9998
            }

        .tab_box li:first-child > .tab_div:hover em.box {
            width: 128px
        }

        .tab_box li > .tab_div.selected {
            background: #9c1bde;
            color: #fff
        }

            .tab_box li > .tab_div.selected .title {
                font-weight: 700
            }

            .tab_box li > .tab_div.selected .add_box .count {
                background-position: -64px -159px;
                margin-right: 2px
            }

            .tab_box li > .tab_div.selected .add_box .talk {
                background-position: 0 -159px;
                margin-right: 2px
            }

            .tab_box li > .tab_div.selected .add_box .number {
                color: #fff
            }

            .tab_box li > .tab_div.selected em.box {
                display: block;
                top: -1px;
                left: -1px;
                width: 127px;
                height: 56px;
                border: 1px solid #1787b0;
                z-index: 9999
            }

        .tab_box li:first-child > .tab_div.selected em.box {
            width: 128px
        }

        .tab_box li > .tab_talk .notybox {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%)
        }

            .tab_box li > .tab_talk .notybox .noty {
                border: 1px solid #1787b0;
                color: #fff;
                background: #9c1bde
            }

        .tab_box li > .tab_div.selected .notybox .noty {
            background: #fff;
            border: 1px solid #1787b0;
            color: #1787b0
        }

.notice {
    background: #fbfbfb;
    overflow: hidden;
    height: 50px;
}

    .notice ul {
        position: absolute;
        top: 0;       
    }

        .notice ul > li {
            line-height: 50px;
            height: 54px;
        }

            .notice ul > li > a {
                letter-spacing: -1px
            }

    .notice .label {
        margin-right: 10px;
        position: relative;
        top: -1px;
        font-size: 12px
    }

    .notice .l_notice {
        border: 1px solid #9c1bde;
        color: #9c1bde;
        background: #fff
    }

    .notice .l_event {
        border: 1px solid #e62626;
        color: #e62626;
        background: #fff
    }

.chat {
    margin-top: 0;
    position: relative
}

    .chat .scroll_bottom {
        position: absolute;
        bottom: 110px;
        right: 10px;
        width: 45px;
        height: 45px;
        display: block;
        opacity: 0;
        background: url(/Assets/res/chat/img/scroll_bottom.png) no-repeat;
    }
    .chat .scroll_bottom:hover {
        background-position: -45px 0;
    }

    .chat .toggle-img {
        background: url(/Assets/img/toggle-off.png) no-repeat;
        background-size: 35px;
        width: 35px;
        height: 35px;
    }

        .chat .toggle-img.on {
            background: url(/Assets/img/toggle-on.png) no-repeat;
            background-size: 35px;
            width: 35px;
            height: 35px;
        }

.chat_div {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 441px;
    background-color: #fff
}

.chat .chat_box {
    padding: 5px;
}

    .chat .chat_box li {
        margin: 5px 0;
        letter-spacing: -1px;
        list-style: none;
        border-radius: 8px;
    }

        .chat .chat_box li:first-child {
            margin-top: 0
        }

        .chat .chat_box li .icon16 {
            position: relative;
            top: -1px
        }

        .chat .chat_box li.msg:hover {
            background: #f8f8f8
        }

    .chat .chat_box .system {
        padding: 8px 10px 9px;
        line-height: 1.7
    }

        .chat .chat_box .system .icon {
            margin-right: 7px
        }

        .chat .chat_box .system .room:hover {
            text-decoration: underline
        }

.chat .chat_box .c_error {
    border: 1px solid #888;
    color: #666;
    background: #f5f5f5;
    font-size: 1.2rem;
    font-weight: 600;
}

.chat .chat_box .i_error {
    text-align: center;
    padding: 0
}

    .chat .chat_box .c_warning {
        border: 1px solid #c01e1e;
        color: #c01e1e;
        background: #fff5f5;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .chat .chat_box .c_notice {
        border: 1px solid #1787b0;
        color: #1787b0;
        background: #eaf9ff;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .chat .chat_box .c_issue {
        border: 1px solid #b349c3;
        color: #b349c3;
        background: #fdecff;
        font-size: 1.2rem;
        font-weight: 600;
        padding
    }

    .chat .chat_box .c_system {
        border: 1px solid #7fac49;
        color: #7fac49;
        background: #f9fff3;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .chat .chat_box .c_default {
        border: 1px solid #888;
        color: #333;
        background: #fbfbfb;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .chat .msg_box .msg {
        position: relative
    }

        .chat .msg_box .msg dl {
            width: 100%;
            min-height: 26px
        }

            .chat .msg_box .msg dl dd.d_icon {
                vertical-align: top;
                width: 28px;
                padding: 2px 0;
                text-align: center
            }

            .chat .msg_box .msg dl dd.primium_icon {
                vertical-align: top;
                width: 54px;
                padding: 2px 4px 2px 0;
                text-align: center
            }

            .chat .msg_box .msg dl dd.d_msg {
                vertical-align: middle;
                letter-spacing: -1px;
                line-height: 1.7;
                padding-left: 2px;
                word-break: break-all
            }

                .chat .msg_box .msg dl dd.d_msg strong {
                    color: #000;
                    margin: 0 11px 0 0;
                    font-weight: 700
                }

                    .chat .msg_box .msg dl dd.d_msg strong:hover {
                        color: #e62626
                    }

.chat .msg_box .result {
    border: 1px solid #888;
    color: #666;
    background: #fff
}

    .chat .msg_box .result.best_in {
        border: 1px solid #e62626;
        color: #666;
        background: #fff
    }

    .chat .msg_box .c_result div.text {
        letter-spacing: -1px;
        background: #f5f5f5;
        border-bottom: 1px dashed #d1d1d1;
        padding: 15px
    }

    .chat .msg_box .result.best_in div.text {
        background: #fff4f4;
        border-bottom: 1px dashed #e62626
    }

    .chat .msg_box .c_result div.text {
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0
    }

        .chat .msg_box .c_result div.text strong.round {
            color: #e62626
        }

        .chat .msg_box .c_result div.text .icon {
            margin-right: 7px
        }

        .chat .msg_box .c_result div.text .btn_hidden {
            top: 15px;
            right: 10px;
            color: #aaa
        }

            .chat .msg_box .c_result div.text .btn_hidden:hover {
                color: #666
            }

    .chat .msg_box .c_result div.intro_box {
        letter-spacing: -1px;
        padding: 15px;
        color: #333;
        font-weight: 700;
        text-align: center
    }

    .chat .msg_box .c_result div.icon_box {
        letter-spacing: -1px;
        padding: 15px 10px;
        height: 58px;
        color: #999
    }

        .chat .msg_box .c_result div.icon_box .r_tab {
            margin: 0 5px;
            color: #aaa
        }

        .chat .msg_box .c_result div.icon_box .split {
            margin: 0 10px
        }

        .chat .msg_box .c_result div.icon_box .r_icon {
            position: relative;
            display: inline-block;
            line-height: 26px;
            width: 30px;
            height: 30px
        }

        .chat .msg_box .c_result div.icon_box .r_icon {
            text-align: center;
            padding-right: 3px;
            padding-top: 1px;
            margin: 0 1px
        }

.chat .msg_box .gift_box {
    border: 1px solid #b349c3;
    background: #fff
}

    .chat .msg_box .c_gift div.text {
        background: #e47ef4;
        border-bottom: 1px dashed #b349c3;
        padding: 12px 10px;
        text-align: center
    }

    .chat .msg_box .c_gift div.text {
        font-weight: 700;
        color: #fff
    }

    .chat .msg_box .c_gift div.text {
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0
    }

        .chat .msg_box .c_gift div.text .num {
            font-size: 16px;
            position: relative;
            top: -1px
        }

    .chat .msg_box .c_gift div.fbox {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px dashed #d1d1d1;
        color: #888;
        background: #f9f2ff
    }

        .chat .msg_box .c_gift div.fbox strong {
            color: #333
        }

        .chat .msg_box .c_gift div.fbox a {
            margin-left: 5px
        }

    .chat .msg_box .c_gift div.c_msg_box {
        letter-spacing: -1px;
        padding: 15px 10px;
        color: #666;
        text-align: center;
        line-height: 1.7;
        text-align: justify
    }

.chat .msg_box .egg_box {
    text-align: center;
    line-height: 2;
    color: #888;
    background: #fff;
    border: 1px solid #c01e1e
}

        .chat .msg_box .egg_box .sin {
            border-bottom: 1px dashed #db4c4c;
            padding: 10px;
            background: #fff5f5
        }

.chat .msg_box .egg_box .sin {
    border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    -webkit-border-radius: 15px 15px 0 0
}

        .chat .msg_box .egg_box .msg {
            padding: 10px;
            line-height: 1.7;
            text-align: justify
        }

        .chat .msg_box .egg_box a {
            color: #333
        }

            .chat .msg_box .egg_box a:hover {
                color: #e62626
            }

        .chat .msg_box .egg_box .num {
            font-size: 16px;
            position: relative;
            top: -1px
        }

    .chat .msg_box li.room_promotion {
        margin-top: 40px;
        border: 1px dashed #c7b56b;
        background: #fff;
        border-radius: 15px;
        margin-bottom: 10px
    }

        .chat .msg_box li.room_promotion .userbox {
            position: relative;
            height: 55px;
            line-height: 55px;
            border-bottom: 1px dashed #c7b56b;
            border-radius: 15px 15px 0 0;
            background: #fffcf3;
            text-align: center
        }

            .chat .msg_box li.room_promotion .userbox img.pbanner {
                position: absolute;
                left: 0;
                top: -35px
            }

        .chat .msg_box li.room_promotion .message {
            text-align: center;
            padding-bottom: 10px
        }

            .chat .msg_box li.room_promotion .message p {
                padding: 10px;
                padding-top: 15px;
                margin-bottom: 5px
            }

.winner_img {
    margin: 10px 0;
    height: 130px;
    text-align: center
}

.winner {
    text-align: center;
    margin-bottom: 10px
}

    .winner h2 {
        font-size: 14px;
        padding: 0;
        margin: 0;
        margin-bottom: 10px
    }

        .winner h2 .red {
            color: #c91a1a
        }

    .winner .user {
        font-size: 14px;
        margin-bottom: 5px
    }

    .winner .split {
        font-size: 12px;
        margin: 0 5px;
        color: #c78282
    }

    .winner .wbtn {
        padding: 3px 5px;
        border-radius: 5px;
        background-color: #9c1bde;
        border: 1px solid #1787b0;
        color: #fff;
        font-size: 12px;
        cursor: pointer
    }

        .winner .wbtn.room {
            background-color: #e62626;
            border: 1px solid #c01e1e
        }

.chat .setting_box {
    background: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    height: 40px;
    padding: 0 10px
}

    .chat .setting_box div.option {
        display: inline-block;
        padding: 7px;
        background: #fbfbfb;
        margin-top: 5px
    }

        .chat .setting_box div.option.result_view {
            top: 1px;
            right: 5px
        }

            .chat .setting_box div.option.result_view .text {
                color: #aaa;
                margin-right: 4px;
                position: relative;
                top: -3px;
                letter-spacing: -1px
            }

    .chat .setting_box .btn {
        display: inline-block;
        width: 15px;
        height: 15px
    }

    .chat .setting_box .cpopup {
        background-position: 0 -223px
    }

    .chat .setting_box .clear {
        background-position: -15px -223px
    }

    .chat .setting_box .text_up {
        background-position: -30px -223px
    }

    .chat .setting_box .text_down {
        background-position: -45px -223px
    }

    .chat .setting_box .help_command {
        background-position: -180px -223px
    }

    .chat .setting_box .help_cmd {
        position: relative
    }

        .chat .setting_box .help_cmd .help_cmd_list {
            position: absolute;
            top: -334px;
            left: -160px;
            width: 277px;
            background: #fff;
            border: 1px solid #666;
            z-index: 9999;
            border-radius: 8px;
        }

.help_cmd_list {
    letter-spacing: -1px;
    font-size: 12px
}

    .help_cmd_list h2 {
        font-weight: 400;
        padding: 15px 5px;
        border-bottom: 1px solid #eee;
        background: #fbfbfb;
        text-align: center;
        border-radius: 8px 8px 0 0;
    }

    .help_cmd_list li {
        padding: 8px 5px;
        border-top: 1px solid #eee
    }

        .help_cmd_list li:first-child {
            border-top: none
        }

        .help_cmd_list li h3 {
            color: #e62626;
            padding-bottom: 5px;
            letter-spacing: 0;
            font-size: 13px;
            font-weight: 600;
        }

        .help_cmd_list li p {
            color: #aaa;
            letter-spacing: -1px;
            font-size: 12px
        }

.chat .setting_box .refresh {
    background-position: -60px -223px
}

.chat .setting_box .admin_call {
    background-position: -75px -223px
}

.chat .setting_box .black {
    background-position: -90px -223px
}

    .chat .setting_box .black.bon {
        background-position: -90px -238px
    }


.chat .setting_box div.option:hover .popup {
    background-position: 0 -238px
}

.chat .setting_box div.option:hover .clear {
    background-position: -15px -238px
}

.chat .setting_box div.option:hover .text_up {
    background-position: -30px -238px
}

.chat .setting_box div.option:hover .text_down {
    background-position: -45px -238px
}

.chat .setting_box div.option:hover .refresh {
    background-position: -60px -238px
}

.chat .setting_box div.option:hover .admin_call {
    background-position: -75px -238px
}

.chat .setting_box div.option:hover .black {
    background-position: -90px -238px
}

.chat .setting_box div.color_box {
    border: 1px solid #888;
    background-color: #fff;
    width: 215px;
    position: absolute;
    top: -145px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px
}

    .chat .setting_box div.color_box h4 {
        position: relative;
        font-size: 12px;
        margin: 0 5px 15px
    }

        .chat .setting_box div.color_box h4 .close_color {
            position: absolute;
            right: 0;
            cursor: pointer
        }

            .chat .setting_box div.color_box h4 .close_color:hover {
                color: #c0392b
            }

    .chat .setting_box div.color_box .option_btn {
        display: inline-block;
        width: 23px;
        height: 23px;
        margin: 0 2px 4px;
        cursor: pointer
    }

        .chat .setting_box div.color_box .option_btn:hover {
            position: relative;
            top: -2px
        }

.chat .input_box {
    position: relative;
    height: 57px;
}

    .chat .input_box input {
        height: 55px;
        width: 100%;
        border: none;
        padding: 15px 10px;
        background: #fff;
        font-size: 13px;
    }

        .chat .input_box input.mcnt {
            padding: 15px 90px 15px 10px
        }

    .chat .input_box .login {
        display: block;
        height: 55px;
        width: 100%;
        border: none;
        padding: 0 10px;
        line-height: 55px;
        background: #fff;
        color: #bbb;
        font-size: 13px;
    }

    .chat .input_box .login {
        letter-spacing: -1px
    }

    .chat .input_box .cnt {
        position: absolute;
        right: 30px;
        top: 20px;
        color: #aaa
    }

    .chat .input_box .send {
        position: absolute;
        right: 6px;
        top: 6px;
        border: 0px;
    }

    .chat .input_box .split {
        margin: 0 2px;
        color: #aaa
    }

.userlist {
    height: 594px;
    border: 1px solid #d1d1d1;
    border-top: none
}

    .userlist ul {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 593px
    }

        .userlist ul li {
            position: relative;
            height: 40px;
            line-height: 39px;
            border-bottom: 1px solid #eee;
            padding-left: 15px
        }

            .userlist ul li.bg {
                background-color: #fbfbfb
            }

            .userlist ul li:hover {
                background-color: #fff8f8
            }

            .userlist ul li strong:hover {
                color: #e62626
            }

            .userlist ul li .date {
                position: absolute;
                top: 0;
                right: 15px;
                font-size: 12px;
            }

.userlayer {
    width: 130px;
    background-color: #fff;
    border: solid 1px #A786E9;
    font-size: 12px;
    border-radius: 8px;
    padding: 3px 0;
    z-index: 9999;
}

    .userlayer ul.line {
        margin-top: 3px;
        padding-top: 3px;
        border-top: 1px solid #A786E9
    }

    .userlayer ul li {
        font-size: 12px;
        line-height: 1;
    }

        .userlayer ul li a {
            display: block;
            padding: 7px 10px;
        }

            .userlayer ul li a:hover {
                color: #ED407F;
            }

.popupLayer {
    position: absolute;
    top: 220px;
    left: 120px;
    background-color: #fff;
    border: solid 1px #A786E9;
    font-size: 12px;
    z-index: 10000;
    border-radius: 8px
}

    .popupLayer .content {
        position: relative
    }

        .popupLayer .content .close {
            position: absolute;
            top: 10px;
            right: 6px;
            font-size: 24px;
            display: block;
            width: 24px;
            text-align: center;
            color: #A786E9;
            background: #fff;
            height: 20px;
            line-height: 15px;
            border-radius: 4px;
            z-index: 10;
        }

        .popupLayer .content .close {
 
        }

            .popupLayer .content .close:hover {
                color: #fff;
                background: #5a27bf;
                border-radius: 4px;
            }

        .popupLayer .content ul li {
            border-top: 1px solid #ebe1ff;
        }

            .popupLayer .content ul li:first-child {
                border-top: none
            }

            .popupLayer .content ul li.nick .level {
                margin-right: 5px
            }

            .popupLayer .content ul li.nick .in {
                height: 40px;
                line-height: 40px;
                font-size: 13px
            }

            .popupLayer .content ul li .in {
                position: relative;
                display: block;
                width: 150px;
                height: 30px;
                line-height: 30px;
                padding: 0 10px
            }

            .popupLayer .content ul li .hover:hover {
                background: #fff;
                color: #ED407F
            }
            .popupLayer .content ul li:last-child .hover:hover {
                border-radius: 8px;
            } 

.option_list {
    background-color: #f5f5f5;
    border: solid 1px #aaa;
    position: absolute
}

    .option_list dl dd {
        border-top: 1px dashed #d1d1d1;
        height: 31px;
        line-height: 31px;
        padding: 0 10px;
        width: 120px;
        color: #888
    }

        .option_list dl dd:first-child {
            border-top: none
        }

        .option_list dl dd:hover {
            background: #fff;
            color: #e62626
        }

.scroll {
    overflow-x: hidden;
    overflow-y: scroll
}

    .scroll::-webkit-scrollbar-track {
        box-shadow: inset 0 0 1px rgba(0,0,0,.2);
        background-color: #f8f8f8
    }

    .scroll::-webkit-scrollbar {
        width: 13px;
        background-color: #f5f5f5
    }

    .scroll::-webkit-scrollbar-thumb {
        height: 6px;
        border: 2.5px solid transparent;
        background-clip: padding-box;
        background-color: rgba(0,0,0,.3);
        box-shadow: inset -1px -1px 0 rgba(0,0,0,.05),inset 1px 1px 0 rgba(0,0,0,.05)
    }

.star_img {
    max-width: 150px
}

.icon_5star {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-position: -230px -669px;
    margin-right: 3px
}

.icon_4star {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-position: -246px -669px;
    margin-right: 3px
}

.Rainbow {
    animation-duration: 1s;
    animation-name: rainbowLink;
    animation-iteration-count: infinite
}

@keyframes rainbowLink {
    0% {
        color: #ff2a2a
    }

    15% {
        color: #ff7a2a
    }

    30% {
        color: #ffc52a
    }

    45% {
        color: #43ff2a
    }

    60% {
        color: #2a89ff
    }

    75% {
        color: #202082
    }

    90% {
        color: #6b2aff
    }

    100% {
        color: #e82aff
    }
}

/*����*/
.btn-ico {
    background-color: transparent;
}
.btn-ico.set {
    width: 24px;
    height: 24px;
    background-size: 34px;
}
.btn-ico.set:hover {
    background: url(/Assets/img/icon-setting-pup.png) no-repeat center;
    background-size: 20px;
}
.tab-btn {
    -webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

    .tab-btn ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .tab-btn ul li {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            padding: 28px 0;
        }

    .tab-btn a {
        display: block;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 50%;
        text-indent: -99999px;
        margin: 0 auto;
        background-color: #f5f5f5;
    }

        .tab-btn a.friend {
            background-image: url("/assets/img/icon-userb.png");
        }

            .tab-btn a.friend:hover,
            .tab-btn a.friend.selected {
                background-image: url("/assets/img/icon-userb-on.png");
                background-color: #5A27BF;
            }

        .tab-btn a.talk {
            background-image: url("/assets/img/icon-list.png");
        }

            .tab-btn a.talk:hover,
            .tab-btn a.talk.selected {
                background-image: url("/assets/img/icon-list-on.png");
                background-color: #5A27BF;
            }

            .tab-btn a.config {
                background-image: url("/assets/img/icon-setting.png");
            }

            .tab-btn a.config:hover,
            .tab-btn a.config.selected {
                background-image: url("/assets/img/icon-setting-on.png");
                background-color: #5A27BF;
            }

        .tab-btn a.usersearch {
            background-image: url("/assets/img/icon-searchUser.png");
        }

            .tab-btn a.usersearch:hover,
            .tab-btn a.usersearch.selected {
                background-image: url("/assets/img/icon-searchUser-on.png");
                background-color: #5A27BF;
            }



.search-box {
    position: relative;
    background: #F1F1F1;
    border-radius: 4px;
}

    .search-box input {
        height: 32px;
        width: 100%;
        padding: 0 8px;
        border: 1px solid #E9E8EE;
        border-radius: 4px;
        background-color: #fff;
        letter-spacing: -1px;
        font-weight: 400;
        font-size: 13px;
    }

        .search-box input::-webkit-input-placeholder {
            color: #B7B7B7;
        }

        .search-box input:-ms-input-placeholder {
            color: #B7B7B7;
        }

        .search-box input::-ms-input-placeholder {
            color: #B7B7B7;
        }

        .search-box input::placeholder {
            color: #B7B7B7;
        }
    .search-box a,
    .search-box button {
        position: absolute;
        top: calc(50% - 10px);
        right: 8px;
        background-color: transparent;
    }

.btn-ico.search {
    width: 20px;
    height: 20px;
    background-image: url("/assets/img/icon-search.png");
}

.config-box {
    margin-top: 16px;
}

.bl_real-picktalk .f-scroll .f_list h1,
.config-box h1 {
    font-size: 13px;
    color: #333;
}

    .config-box .item {
        border-radius: 4px;
        padding: 6px 12px;
        margin: 10px 0;
        background: #f5f5f5;
    }

        .config-box .item .txt {
            font-weight: 400;
            font-size: 12px;
            color: #333;
            line-height: 2;
        }

            .config-box .item .txt.no {
                color: #888;
                text-align: center;
            }

.layer-wrap {
    position: absolute;
    top: 60px;
    left: 120px;
    background-color: #fff;
    border: 1px solid #A786E9;
    font-weight: 400;
    font-size: 12px;
    z-index: 10000;
    border-radius: 8px;
    overflow: hidden;
}

    .layer-wrap .layer-cont {
        position: relative;
    }

    .layer-wrap ul li {
        padding: 10px 12px;
    }

        .layer-wrap ul li.nick {
            font-weight: 700;
            font-size: 12px;
            color: #333;
        }

            .layer-wrap ul li.nick:hover {
                background: transparent;
            }

        .layer-wrap ul li:hover {
            background: #F5F5F5;
        }

    .layer-wrap .gift {
        color: #5A27BF;
    }

    .layer-wrap.hide {
        display: none;
    }


.round {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 0px
}

.round_left {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px
}

.round_right {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0
}

.round10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
}

.round15 {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px
}

.round15_left {
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px
}

.round15_right {
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0
}

.round35 {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px
}

.round45 {
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border-radius: 45px
}

.round55 {
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    border-radius: 55px
}

.round60 {
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px
}

/*side room_list*/

#room_list {
    position: absolute;
    top: 338px;
    left: 6px
}

    #room_list .title.type01 {
        font-size: 12px;
        width: 51px;
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 600;
        border-radius: 4px;
    }

    #room_list a.title.type02 {
        margin-top: 5px;
        font-size: 12px;
        width: 51px;
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border: 1px solid #5A27BF;
        background: #5A27BF;
        font-weight: 600;
        border-radius: 4px 4px 0 0;
    }

    #room_list .title.type01 {
        background-color: #5a27bf;
        /*  background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);*/
        animation: gradient-ani 2s infinite linear;
        background-size: 300% 100%;
        border-radius: 4px 4px 0 0;
    }

@-webkit-keyframes gradient-ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@-moz-keyframes gradient-ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@-o-keyframes gradient-ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes gradient-ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}


.float_list .nlist {
    border-radius: 4px;
}

.float_list a.item {
    position: relative;
    display: block;
    width: 51px;
    height: 50px;
    border: 1px solid #d1d1d1;
    background: #fbfbfb
}
.float_list a.item {
    border-top: none
}
    .float_list a.item:first-child  {
        border-top: 1px solid #d1d1d1;
    }
    .float_list a.item.type01:hover {
        background: #fdd
    }

    .float_list a.item.type02:hover {
        background: #f2e0ff
    }

    .float_list a.item.type03:hover {
        background: #d7ecbf
    }

    .float_list a.item.type04:hover {
        background: #e4f3f9
    }

    .float_list a.item.type05:hover {
        background: #fff3de
    }

    .float_list a.item div.user_photo {
        padding: 2px
    }

        .float_list a.item div.user_photo img.img_photo {
            box-sizing: border-box;
            width: 45px;
            height: 45px;
         
        }

    .float_list a.item .ranking {
        position: absolute;
        top: 3px;
        left: -43px;
        width: 46px;
        height: 50px;
        text-align: center;
    }

    .float_list a.item .primium_icon {
        position: absolute;
        top: 0px;
        left: -16px;
    }

    .float_list a.item .primium_icon img {
        width: 14px;
        height: 49px;
        background-size: cover;
    }

    .float_list a.item .slevel_icon {
        position: absolute;
        top: 0;
        left: -63px
    }

        .float_list a.item .slevel_icon img, .float_list a.item .primium_icon img {
            display: block
        }

    .float_list a.item .sslevel_icon {
        position: absolute;
        top: 0;
        left: -35px
    }

    .float_list a.item:hover .primium_icon {
        left: -19px
    }

    .float_list a.item:hover .ranking {
        left: -45px
    }

    .float_list a.item:hover .sslevel_icon {
        left: -50px
    }

    .float_list a.item:hover .slevel_icon {
        left: -67px
    }

    .float_list a.item .ranking.r1 {
        background: url(/Assets/img/rank-1-icon.png) no-repeat;
        background-size: contain;
        text-indent: -999px;
    }

    .float_list a.item .ranking.r2 {
        background: url(/Assets/img/rank-2-icon.png) no-repeat;
        background-size: contain;
        text-indent: -999px;
    }

    .float_list a.item .ranking.r3 {
        background: url(/Assets/img/rank-3-icon.png) no-repeat;
        background-size: contain;
        text-indent: -999px;
    }

.float_list div.explain {
    position: absolute;
    z-index: 9999;
    top: -5px;
    left: -5px;
    display: none;
    width: 390px;
    height: 65px;
    border: 1px solid rgba(0,0,0,.1);
    background: #fff
}

.float_list div.explain {
    padding: 0 0 0 70px;
    border-radius: 4px;
}

    .float_list div.explain .user_photo2 {
        position: absolute;
        top: -1px;
        left: -1px;
        box-sizing: border-box;
        height: 65px
    }

        .float_list div.explain .user_photo2 img {
            box-sizing: border-box;
            width: 65px !important;
            height: 65px !important;
            border: 1px solid rgba(0,0,0,.1);
            border-right: none
        }

    .float_list div.explain.type01 {
        color: #fff;
        background: #5a27bf;
    }

    .float_list div.explain.type02 {
        color: #fff;
        background: #5a27bf;
    }

    .float_list div.explain .intro {
        font-weight: 700;
        line-height: 42px;
        letter-spacing: 0
    }

        .float_list div.explain .intro.not {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0
        }

    .float_list div.explain.type03 .intro.not {
        color: #6d963b
    }

    .float_list div.explain.type04 .intro.not {
        color: #62a0b7
    }

    .float_list div.explain.type05 .intro.not {
        color: #dab673
    }

    .float_list div.explain .permission {
        font-size: 12px;
        display: inline-block;
        padding: 4px 4px 2px;
        letter-spacing: -1px
    }

    .float_list div.explain .permission {
        line-height: 1
    }

        .float_list div.explain .permission.p1 {
            color: #fff;
            border: 1px solid #44A0F4;
            background: #44A0F4;
            border-radius: 4px;
            font-weight: 600
        }

        .float_list div.explain .permission.p2 {
            color: #ffff;
            border: 1px solid #9b77e7;
            background: #9b77e7;
            border-radius: 4px;
            font-weight: 600
        }

        .float_list div.explain .permission.p3 {
            color: #fff;
            border: 1px solid #ED407F;
            background: #ED407F;
            border-radius: 4px;
            font-weight: 600
        }

        .float_list div.explain .permission.primium {
            margin-right: 3px;
            color: #fff;
            border: 1px solid #222;
            background: #333
        }

    .float_list div.explain .price {
        font-size: 12px;
        display: inline-block;
        padding: 4px 4px 2px;
        letter-spacing: -1px
    }

    .float_list div.explain .price {
        line-height: 1
    }

        .float_list div.explain .price.p1 {
            color: #fff;
            border: 1px solid #515151;
            background: #656565
        }

        .float_list div.explain .price.p2 {
            vertical-align: middle;
            color: #fff;
            border: 1px solid #515151;
            background: #656565
        }

        .float_list div.explain .price.p2 {
            font-size: 12px;
            font-weight: 700;
            padding: 3px 4px 4px;
            letter-spacing: 0
        }

    .float_list div.explain .img {
        display: inline-block;
        background: url(/Assets/img/logo.png) no-repeat;
        background-size: 18px

    }

    .float_list div.explain .icon16 {
        width: 18px;
        height: 18px
    }


    .float_list div.explain .icon_list {
        margin-right: 7px;
        background-position: -193px -669px
    }

    .float_list div.explain .icon_record {
        position: relative;
        margin-right: 3px;
    }

    .float_list div.explain .icon_explain {
        position: relative;
        top: -1px;
        margin-right: 3px;
        background-position: -129px -669px
    }

    .float_list div.explain .icon_list_cnt {
        margin-left: 7px;
        background-position: 0 -143px
    }

    .float_list div.explain .icon_user_cnt {
        margin-left: 7px;
        background-position: -177px -669px
    }

    .float_list div.explain .icon_reco_cnt {
        margin-left: 7px;
        background-position: -161px -669px
    }

    .float_list div.explain .icon_bookmark {
        margin-right: 5px;
        background-position: -81px -669px
    }

        .float_list div.explain .icon_bookmark.on {
            background-position: -97px -669px
        }

    .float_list div.explain .icon_youtobe {
        position: relative;
        top: 3px;
        width: 21px;
        height: 16px;
        margin-right: 3px;
        background-position: -209px -669px
    }

    .float_list div.explain .title_box {
        padding: 10px 0 0 10px
    }

        .float_list div.explain .title_box .title {
            font-size: 13px;
            display: inline-block;
            max-width: 250px;
            letter-spacing: -1px;
            margin-left: 5px;
        }

    .float_list div.explain .record_box {
        font-size: 12px;
        padding-top: 7px;
        padding-left: 10px;
        display: flex;
        gap: 5px;
        align-items: center;
    }

        .float_list div.explain .record_box strong {
            letter-spacing: 0.03rem;
        }

        .float_list div.explain .record_box .split {
            margin: 0 3px;
            color: #fff
        }

.float_list a.item:hover > div.explain {
    display: block
}

.float_list div.pick_pm {
    font-size: 12px;
    width: 51px;
    height: 45px;
    text-align: center;
    border-radius: 4px;
}

.float_list div.pick_pm {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 5px;
    padding-top: 8px;
}

.float_list div.pick_pm span {
    color: #00ff4e;
}

.float_list div.pick_pm .color-gray {
    color: #eee
}

.pick-inform {
    position: relative;
}

    .pick-inform .pick-on {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        border: 1px solid #565656;
        background: #605E65;
    }

    .pick-inform .pick-off {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        border: 1px solid #565656;
        background: #605E65;
    }

/*����*/
.btn-ico {
    background-color: transparent;
}

    .btn-ico.set {
        width: 24px;
        height: 24px;
        background-size: 34px;
    }

        .btn-ico.set:hover {
            background: url(/Assets/img/icon-setting-pup.png) no-repeat center;
            background-size: 20px;
        }

.tab-btn {
    -webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

    .tab-btn ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .tab-btn ul li {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            padding: 21px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            position:relative
        }

            .tab-btn ul li span {
                font-size: 1.2rem;
                position: absolute;
                left: 22%;
                bottom: 3px;
            }
            .tab-btn ul li .config span {
                left: 37%;
            }

    .tab-btn a {
        display: block;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 50%;
        text-indent: initial;
        margin: 0 auto;
        background-color: #f5f5f5;
    }
        .tab-btn a:hover span,
        .tab-btn a.selected span {
            color: #5a27bf;
            font-weight: 600;
        }

        .tab-btn a.friend {
            background-image: url("/assets/img/icon-userb.png");
        }

            .tab-btn a.friend:hover,
            .tab-btn a.friend.selected {
                background-image: url("/assets/img/icon-userb-on.png");
                background-color: #5A27BF;
            }

        .tab-btn a.talk {
            background-image: url("/assets/img/icon-list.png");
        }

            .tab-btn a.talk:hover,
            .tab-btn a.talk.selected {
                background-image: url("/assets/img/icon-list-on.png");
                background-color: #5A27BF;
            }

        .tab-btn a.config {
            background-image: url("/assets/img/icon-setting.png");
        }

            .tab-btn a.config:hover,
            .tab-btn a.config.selected {
                background-image: url("/assets/img/icon-setting-on.png");
                background-color: #5A27BF;
            }


.bl_real-picktalk {
    padding: 16px;
    height: 550px;
    overflow-y: scroll;
    background: #fff;
}

    .bl_real-picktalk.type2 {
        padding: 16px;
    }

    .bl_real-picktalk .user {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
    }

    .bl_real-picktalk .list_friend .user,
    .bl_real-picktalk .list_black .user,
    .bl_real-picktalk .list_follower .user {
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
    }

        .bl_real-picktalk .list_friend .user:last-child,
        .bl_real-picktalk .list_black .user:last-child,
        .bl_real-picktalk .list_follower .user:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .bl_real-picktalk .list_follower .user {
            cursor: default;
        }

        .bl_real-picktalk .user .img-wrap {
            position: relative;
            border-radius: 5px;
            background-color: #e9e8ee;
            padding: 6px;
        }

            .bl_real-picktalk .user .img-wrap .log {
                position: absolute;
                bottom: 0;
                right: 0;
                background: #D0D0D5;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid #fff;
                padding: 2px;
            }

                .bl_real-picktalk .user .img-wrap .log.in {
                    background: #5A27BF;
                    text-indent: -9999px
                }

        .bl_real-picktalk .user .txt-wrap {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 2px 0;
            gap: 5px;
            align-items: flex-start
        }

            .bl_real-picktalk .user .txt-wrap .user-lgtxt {
                font-weight: 400;
                font-size: 12px;
                color: #333;
            }

    .bl_real-picktalk::-webkit-scrollbar {
        width: 7px;
    }

    .bl_real-picktalk::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 100px;
    }

    .bl_real-picktalk .f-scroll {
        margin-top: 16px;
    }

        .bl_real-picktalk .f-scroll .f_list h1 {
            font-weight: 500;
            font-size: 13px;
            color: #333;
            margin-bottom: 8px;
        }

        .bl_real-picktalk .f-scroll .f_list + .f_list {
            margin-top: 24px;
        }

        .bl_real-picktalk .f-scroll .f_list .null:before {
            content: '';
            background: url(/Assets/img/null.png) no-repeat;
            background-size: cover;
            width: 48px;
            height: 48px;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .bl_real-picktalk .f-scroll .f_list .null {
            text-align: center;
            font-size: 13px;
            color: #888;
            position: relative;
            padding-top: 54px;
        }

        .bl_real-picktalk .f-scroll .f_list .user + .user {
            margin-top: 8px;
        }

.chat .chat_div li.egg_box {
    color: #333;
    font-weight: 400;
    margin: 0 0 8px;
}
.chat .chat_div li.egg_box .red {
    color: #ED407F;
    font-weight: 600;
}
.egg_box {
    position: relative;
    list-style: none;
    margin: 13px 0;
    font-size: 1.3px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    box-shadow: inset 0 0 12px 2px #7630ff;
    background: url(/Assets/res/chat/img/egg-bg.png) no-repeat;
    background-position: center;
    height: 275px;
}
    .egg_box .sin .icon_level {
        width: 26px;
        background: rgba(255,255,255,.5);
        border-radius: 50%;
        padding: 2px;
    }

.egg_box .sin span {
    font-weight: 600
}
.egg_box .sender {
    display: flex;
    align-items: center;
    font-weight: 400;
    color: #dbdbdb;
    justify-content: center;
    font-size: 13px;
}
.egg_box .sin .sender span {
    font-size: 16px;
    color: #fff;
    margin-right: 3px;
    letter-spacing: 0.03rem
} 
.egg_box .sin .sender .user_nick {
    z-index: 1;
}
.egg_box .msg {
    line-height: 1.2;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #44A0F4;
    position: absolute;
    top: 81%;
    left: 50%;
    transform: translateX(-50%);
    width: 79%;
}
.egg_box .user-wrap {
    padding: 0 34px;
}
.egg_box .user-wrap .icon_level {
    width: 26px
}
.egg_box .user-wrap a span {
    font-weight: 600;
    color: #fff;
    font-size: 16px;
}
.egg_box .receiver {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    color: #dbdbdb;
    top: 3px;
    left: 3px;
    position: absolute;
    font-size: 13px;
    background: #150E20;
    padding: 2px 4px;
    border-radius: 6px;
}
.egg_box .receiver  span {
    font-size: 16px;
    color: #fff;
     margin-right: 3px;
}
.egg_box .name-wrap img {
    margin-left: 6px;
}
.egg_box .egg-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: 700;
    color: #fff;
}
.egg_box .egg-img-wrap img {
    width: 69px;
    margin: 50px -15px 0;
}
 
.egg_box .egg-img-wrap img {
    -webkit-animation: shake 1s infinite;
    animation: shake 0.3s infinite;
}
@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(7deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-7deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
.egg_box .egg-img-wrap .egg-cnt {
    position: relative;
    margin: 0px 5px 44px;
    letter-spacing: 0.2rem;
}
.egg_box .egg-img-wrap .outer-text {
    -webkit-text-stroke: 10px #ED407F;
    color: #fff;
}
.egg_box .egg-img-wrap .inner-text {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}
.egg_box .egg-info {
    font-size: 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    gap: 3px;
    letter-spacing: -0.08rem;
    margin-top: 3px;
}
.egg_box .egg-info span{
    color: #E240ED;
    font-weight: 600
}

.c_warning {
    margin: 0 auto;
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    color: #ED407F;
    background: #fbecf1;
    border: 1px dashed #ED407F;
    padding: 10px 0;
    border-radius: 8px;
    justify-content: center;
}

.ranking .item .info .etp-txt span {
    font-size: 1.3rem
}
.ranking .item .info .etp-txt span.badge {
    color: #fff !important;
    font-weight: 500;
} 

.ranking .item .info p {
    display: flex;
    align-items: center;
    color: #555;
}

.ranking .item .info p .badge {
    margin-right: 3px
}

/* 업다운톡 친구찾기*/
.bl_real-picktalk.usersearch .user_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .bl_real-picktalk.usersearch .user_item a {
        font-size: 14px;
        font-weight: 600;
    }

.bl_real-picktalk.usersearch .search_guide {
    margin: 16px 0 10px;
    font-size: 1.3rem;
    color: #666;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
}
.bl_real-picktalk.usersearch .user_list .level-txt {
    margin-left: 4px;
    display: inline-block;
}
.bl_real-picktalk.usersearch .user_list .null {
    font-size: 1.3rem;
    text-align: center
}
.talk .tit,
.usersearch .tit {
    font-size: 1.4rem;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
    color: #444;
}
.talk .f_list.talk .user {
    justify-content: space-between
}
.talk .f_list.talk .user .box {
    padding: 0;
}
.talk .f_list.talk .user_photo img {
    border: 1px solid #f1f1f1;
}
.talk .item.user .close_room {
    font-size: 1.3rem;
    border: 1px solid #44A0F4;
    color: #44A0F4;
    padding: 7px 8px;
    border-radius: 4px;
}
.talk .item.user .close_room:hover {
    background-color: #44A0F4;
    color: #fff;
}
.user-red {
    padding: 3px 5px;
    border-radius: 4px;
    margin-bottom: 3px;
}
.user-mp {
    font-size: 13px;
    border: 1px solid #111;
    border-radius: 4px;
    gap: 0 !important;
}
.user-mp .img-wrap {
    background-color: #fff !important;
}
.user-mp .chat-wrap.msg {
    background: #111;
    width: 100%;
    padding:5px 10px!important;
    margin: 0;
    justify-content: center !important;
}
.user-mp .mp-chat {
    color: #fff !important;
    line-height: 1.5;
    letter-spacing: 0.01rem;
}

.float_list .premium_box a.bg-1st {
    background: url(/Assets/img/side-banner-bg.png) no-repeat;
    background-position: 0 0px;
}
.float_list .premium_box a.bg-2nd {
    background: url(/Assets/img/side-banner-bg.png) no-repeat;
    background-position: 0 -52px;
}
.float_list .premium_box a.bg-3rd {
    background: url(/Assets/img/side-banner-bg.png) no-repeat;
    background-position: 0 -104px;
}
.float_list .premium_box a.bg-premium {
    position: relative;
    background-color: #E8E4FF;
}
.float_list .premium_box a.bg-premium:before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    background: url(/Assets/img/icon-premium.png) no-repeat;
    background-size: contain;
    width: 14px;
    height: 49px;
}
.float_list .premium_box a.bg-premium:hover:before {
    left: -19px;
}
.chat_box .user .rank-best.user-name,
.chat_box .user .rank-1st.user-name,
.chat_box .user .rank-2nd.user-name,
.chat_box .user .rank-3rd.user-name {
    position: relative;
    font-size: 1.3rem;
    padding: 3px 5px;
    border-radius: 4px;
    margin-top: -3px;
    color: #fff
}
.chat_box .user .rank-best.user-name::after {
    content: '';
    background: url(/Assets/img/icon-best.png) no-repeat;
    width: 35px;
    height: 17px;
    background-size: cover;
    position: absolute;
    top: 2px;
    margin-left: 10px;
}
.chat_box .user .rank-1st.user-name:after,
.chat_box .user .rank-2nd.user-name:after,
.chat_box .user .rank-3rd.user-name:after {
    content: '';
    display: inline-block;
    position: absolute;
    top:0px;
    margin-left: 7px;
    width: 20px;
    height: 20px;
    background: url(/Assets/img/icon-ranking-set.png) no-repeat;
    background-size: 56px;
}
.chat_box .user .rank-1st.user-name:after {
    background-position: 2px 0;
}
.chat_box .user .rank-2nd.user-name:after {
    background-position: -18px 0;
}
.chat_box .user .rank-3rd.user-name:after {
    background-position: -37px 0;
}

.chat_box .user .img-wrap.rank-1st img,
.chat_box .user .img-wrap.rank-2nd img,
.chat_box .user .img-wrap.rank-3rd img {
    z-index: 3
}
.chat_box .user .user-name.rank-best {
    background: #FD37AF;
}
.chat_box .user .user-name.rank-1st {
    background: #d7a849;
}
.chat_box .user .user-name.rank-2nd {
    background: #A8A8A8;
}
.chat_box .user .user-name.rank-3rd {
    background: #c77b76;
}

.chat_box .user .img-wrap.rank-best {
    position: relative;
    background: linear-gradient(125deg, #FFF951 9.90%, #FF67A1 43.89%, #F64BB6 65.43%, #6978FF 100%);
    z-index: 1;
}

.chat_box .user .img-wrap.rank-1st {
    position: relative;
    background: linear-gradient(132deg,#E8B13E 0%, #E8B13E 3.00%, #ECBF4A 6.00%, #efbe3e 9.00%, #F3D35C 12.00%, #f7e57e 14.00%, #fff399 20.00%, #ffde57 30.00%, #dbac48 41.00%, #cda34e 43.00%, #db9f21 45.00%, #c59b44 50%, #c5993f 52.00%, #c58e29 55.00%, #D0972F 100%);
    z-index: 1;
}

.chat_box .user .img-wrap.rank-2nd {
    position: relative;
    background: linear-gradient(132deg, #aaa9ad 0%, #c5c4c8 5%, #e1e0e4 10%, #fefdff 15%, #ededed 20%, #cdcdcd 30%, #c5c4c8 35%, #c5c4c8 40%, #e1e0e4 50%, #fff 60%, #fff 80%, #c5c4c8 100%);
    z-index: 1;
}
.chat_box .user .img-wrap.rank-3rd {
    position: relative;
    background: linear-gradient(132deg, #e5b8b8 0%, #e59696 3.00%, #FBBDBD 6.00%, #FCD2D2 9.00%, #FDD7D7 10.00%, #ffdfdf 11.00%, #FEE6E6 12.00%, #FDE3E3 17.00%, #FDDBDB 19.00%, #FDD6D6 20.00%, #FCD1D1 23.00%, #FCC7C7 25%, #F8BFBE 26.00%,#bb7671 50.00%, #D47E78 100%);
    z-index: 1;
}
.chat_box .user .img-wrap.rank-best:before,
.chat_box .user .img-wrap.rank-1st:before,
.chat_box .user .img-wrap.rank-2nd:before,
.chat_box .user .img-wrap.rank-3rd:before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 5px;
    background-color: #fff;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-image-slice: 1;
    z-index: -1;
}
.chat_box .user .img-wrap.rank-2nd:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #b9b9b9;
    border-radius: 4px;
}
.chat_box .user .img-wrap.rank-best:before {
    background: linear-gradient(125deg, #ffe3aa 0%, #FFF951 9.90%, #ffcc9e 20.00%, #ff58ee 47%, #ff64c5 65.43%, #c06dff 77%, #6978FF 100%);
}
.chat_box .user .img-wrap.rank-1st:before {
    background: linear-gradient(132deg,#E8B13E 0%, #E8B13E 3.00%, #ECBF4A 6.00%, #efbe3e 9.00%, #F3D35C 12.00%, #f7e57e 14.00%, #fff399 20.00%, #ffde57 30.00%, #dbac48 41.00%, #cda34e 43.00%, #db9f21 45.00%, #c59b44 50%, #c5993f 52.00%, #c58e29 55.00%, #D0972F 100%) !important;
}
.chat_box .user .img-wrap.rank-2nd:before {
    background: linear-gradient(132deg, #aaa9ad 0%, #c5c4c8 5%, #e1e0e4 10%, #fefdff 15%, #ededed 20%, #cdcdcd 30%, #c5c4c8 35%, #c5c4c8 40%, #e1e0e4 50%, #fff 60%, #fff 80%, #c5c4c8 100%) !important;
}
.chat_box .user .img-wrap.rank-3rd:before {
    background: linear-gradient(132deg, #e5b8b8 0%, #e59696 3.00%, #FBBDBD 6.00%, #FCD2D2 9.00%, #FDD7D7 10.00%, #ffdfdf 11.00%, #FEE6E6 12.00%, #FDE3E3 17.00%, #FDDBDB 19.00%, #FDD6D6 20.00%, #FCD1D1 23.00%, #FCC7C7 25%, #F8BFBE 26.00%,#bb7671 50.00%, #D47E78 100%) !important;
}

/* 오픈채팅방 프리미엄 호출버튼 */
.call-info {
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 8px 11px;
    border-radius: 6px;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    background-color: #00147C;
    color: #fff;
}
.call-info .text-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 200px;
    width: 100%;
}
    .call-info .icon-callBtn {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 84px;
    }
.call-info .text-box .icon-level {
    width: 32px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    padding: 2px;
}
.call-info .user-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.call-info .user-name span {
    font-size: 1.3rem;
    font-weight: 600;
}
.call-info .btn {
    background-color: #425EF0;
    color: #fff;
    margin-top: 6px;
    width: 100%;
}
.call-info .btn:hover {
    background-color: #223ABC;
}
.call-info .btn span {
    position: relative;
    padding-right: 24px;
}
.call-info .btn span:after, 
.call-info .btn span:before {
  content: "";
  display: block;
  position: absolute;
  transition: all 0.2s ease-in-out;
}
.call-info .btn span:before {
  top: 60%;
  right: 5px;
  width: 10px;
  height: 10px;
  transform-origin: 50% 50%;
  transform: translate(0, -0.5em) rotate(45deg);
  box-shadow: inset -0.2em 0.2em 0 0 #fff;
  border-radius: 0 0.15em 0 0;
}
.call-info .btn span:after {
  top: 54%;
  right: 5px;
  width: 16px;
  height: 2px;
  transform: translate(0, -0.1em);
  background-color: #fff;
}
.call-info .btn:hover span:before {
  transform: translate(0.5em, -0.5em) rotate(45deg);
}
.call-info .btn:hover span:after {
  transform: translate(0.5em, -0.1em);
}
.call-info .result-win {
    display: flex;
    align-items: center;
    gap: 4px;
}
.call-info .result-win span{
    position: relative;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #ed407f;
    padding: 2px 5px 3px;
    line-height: 18px;
}
.premium_room.call-info {
    background-color: #25002B;
    gap: 7px;
    padding-top: 11px;
}
.premium_room.call-info .user-name {
    margin-bottom: 3px;
}
.premium_room.call-info .btn {
    background-color: #A30092;
}
.premium_room.call-info .btn:hover {
    background-color: #6F0264;
}

/* 베스트 채팅방 플로팅 배너 */
#best_list {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 266px;
    left: 6px;
    background: #fff;
}

    #best_list:before, #best_list:after {
        content: '';
        position: absolute;
        left: -3px;
        top: -3px;
        background: linear-gradient(45deg, #ff13bd, #032bff, #ff00e5, #ffc700, #ff13bd, #032bff, #ff00e5, #ffc700);
        background-size: 150%;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        z-index: -1;
        animation: steam 5s linear infinite;
    }

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

#best_list:after {
    filter: blur(5px);
}

#best_room:before {
    content:'';
    display:inline-block;
    background: #FD37AF;
    border-radius: 5px 5px 0 0;
    width: 55px;
    height: 20px;
    line-height: 10px;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    position: absolute;
    top: -23px;
    left: -2px;
    z-index: -1;
}
#best_room::after {
    content: '';
    background: url(/Assets/img/icon-best.png) no-repeat;
    width: 38px;
    height: 19px;
    background-size: cover;
    position: absolute;
    top: -42px;
    left: 9px;
}
#best_list span.tit {
    position: absolute;
    top: -19px;
    left: 8px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}
#best_list .item {
    border: 0
}
#best_list .item .user_photo {
    padding: 3px;
}
#best_list.float_list .premium_box a.bg-premium:before {
    left: -17px;
}
.gm-result {
    padding: 8px 16px;
}
.infos-wrap + .box-wrap {
    margin: 8px 0;
}
.chat_box .result .circle.bigs {
    box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%)
}