.top {
    width: 100%;
    height: 80px;
    background: #000000;
    float: left;
}

.top .container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.top .container .logo {
    width: 200px;
    height: 80px;
    margin-right: 20px;
    background: url('https://cdn.nex2games.com/_images/logo.png') center left no-repeat;
    float: left;
    cursor: pointer;
}

.top .container .menu { float: left; }
.top .container .menu ul { list-style: none; }
.top .container .menu li {
    height: 80px;
    padding-top: 30px;
    margin-right: 20px;
    color: #D5D5D5;
    font-size: 14px;
    float: left;
    cursor: pointer;
    box-sizing: border-box;
}

.top .container .menu li:hover { border-bottom: 2px solid #5B61B2; color: #5B61B2; }
.top .container .menu li.select { border-bottom: 2px solid #5B61B2; color: #5B61B2; }
.top .container .submenu { margin-top: 30px; float: right; }
.top .container .submenu ul { list-style: none; }

.top .container .submenu li {
    margin-left: 20px;
    color: #D5D5D5;
    font-size: 14px;
    float: left;
    cursor: pointer;
}

.top .container .submenu li:hover { color: #5B61B2; text-decoration: underline; }
.top .icon-aside { display: none; }
.top .icon-search { display: none; }
.top_menu { display: none; }

@media (max-width:830px) {
    .top {
        height: 80px;
        position: fixed;
        box-sizing: border-box;
        z-index: 999;
    }

    .top .container { width: 750px; }
    .top .container .logo {
        height: 80px;
        background: url('https://cdn.nex2games.com/_images/logo.png') center center no-repeat;
        background-size: 80%;
        width: 200px;
        left: 50%;
        margin-left: -100px;
        position: absolute;
    }

    .top .container .menu { display: none; }
    .top .container .submenu { display: none; }
    .top .icon-aside {
        width: 80px;
        height: 80px;
        background: url('https://cdn.nex2games.com/_images/mobile/icon-aside.png') center center no-repeat;
        float: left;
        display: block;
    }

    .top .icon-search {
        width: 80px;
        height: 80px;
        background: url('https://cdn.nex2games.com/_images/mobile/icon-search.png') center center no-repeat;
        float: right;
        display: block;
    }

    .top_menu {
        width: 320px;
        height: 100%;
        background: #000000;
        position: fixed;
        z-index: 99999;
        display: none;
    }

    .top_menu .icon-close {
        width: 80px;
        height: 80px;
        background: url('https://cdn.nex2games.com/_images/mobile/icon-close.png') center center no-repeat;
        float: left;
        display: block;
    }

    .top_menu .container { width: 100%; }
    .top_menu .container .menu { width: 240px; margin-left: 20px; float: left; }
    .top_menu .container .menu ul { list-style: none; }
    .top_menu .container .menu li { width: 100%; padding: 10px 0; color: #D5D5D5; font-weight: bold; }
}



.chat {
    width: 330px;
    /*margin-bottom: 40px;*/
    box-sizing: border-box;
    float: right;
    box-shadow: 3px 0px 4px rgba(0,0,0,0.5);
}

.chat .title {
    width: 100%;
    padding: 10px 20px;
    background: #1D1D1D;
    border: 1px solid #545454;
    border-bottom: none;
    color: #AEAEAE;
    box-sizing: border-box;
    float: left;
}

.chat .conversations {
    width: 100%;
    height: 542px;
    padding: 0px;
    background: #000000;
    border: 1px solid #545454;
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat .conversations ul {
    list-style: none;
}

.chat .conversations li {
    width: 100%;
    margin-bottom: 4px;
    font-size: 12px;
    float: left;
}

.chat .conversations li.result {
    margin: 10px 10px;
    width: calc(100% - 20px);
    padding: 4px 0px;
    background-color: #1c3369e0 !important;
    border: 1px solid #1e429c;
    border-radius: 8px;
    color: #d0d0d0;
    text-align: center;
    box-sizing: border-box;
}

.chat .conversations li.result strong {
    color: #ff8f5b;
}

.chat .conversations li:nth-child(even) {
    background-color:#101010;
}

.chat .conversations li.me {
    margin-bottom: 4px;
    font-size: 12px;
    float: left;
}

.chat .conversations li .member-nick {
    font-weight: bold;
}

.chat .conversations li.me .message { color: #FFFFFF; }
.chat .conversations li img { margin-right: 10px; float: left; display:none; }

.chat .conversations li .message {
    /*width: 100%;*/
    margin-top: 4px;
    margin-left: 10px;
    color: #AEAEAE;
    float: left;
}

.chat .conversations li .message span { color: #545454; }

.chat .write {
    width: 100%;
    padding: 10px 20px;
    height:54px;
    background: #1D1D1D;
    border: 1px solid #545454;
    border-top: none;
    box-sizing: border-box;
    float: left;
}

.chat .write img { margin-right: 10px; float: left; }
.chat .write input {
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-bottom: 1px solid #545454;
    color: #FFFFFF;
    float: right;
}

@media (max-width:830px) {
    .chat .conversations li .ball_v2 {
        font-size: 23px;
    }
}

.chat .message > span { margin-right:7px; }

@media (max-width:830px) {
    .chat { width: 100%; }
    .chat .conversations li { font-size: 28px; }
    .chat .conversations li .message { width: 640px; }
}

/* width */
.chat ::-webkit-scrollbar { width: 10px; }
/* Track */
.chat ::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); }
/* Handle */
.chat ::-webkit-scrollbar-thumb { background: #888; border-radius:3px; }
/* Handle on hover */
.chat ::-webkit-scrollbar-thumb:hover { background: #555; }


.bottom {
    width: 100%;
    height: 180px;
    background: #000000;
    float: left;
}

.bottom .container {
    width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
}

.bottom .container .logo {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    background: url('https://cdn.nex2games.com/_images/logo.png') no-repeat center center;
    float: left;
}

.bottom .container .info {
    width: 100%;
    color: #AEAEAE;
    text-align: center;
    float: left;
}

@media (max-width:830px) {
    .bottom {
        /*height: 240px;*/
    }

    .bottom .container {
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .bottom .container .info {
        margin-bottom: 20px;
        font-size: 22px;
    }

    .bottom .container .info.detail {
        display:block !important;
        margin-top:-35px;
    }
}


.aside { width: 330px; margin: 10px 0; box-sizing: border-box; float: right; }
.aside .member {
    width: 100%;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #D5D5D5;
    box-sizing: border-box;
    float: left;
}

/*.aside .member .btn-login { width: 60%; }*/

.aside .aside-list { width: 100%; float: left; }
.aside .aside-list ul { list-style: none; }
.aside .aside-list li {
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aside iframe { width: 100%; height: 240px; }

@media (max-width:830px) {
    .aside iframe { width: 100%; height: 480px; }
    .aside { display:none;  }
}