@font-face{ font-family: 'SourceHanSansCN-Medium'; src:url('../fonts/SourceHanSansCN-Medium.otf');}

*{ margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 8%; }
body{ font-family: "SourceHanSansCN-Medium"; font-size: 12rem; text-align:center; color:#fff; background:#191932; }
ol,ul{ margin:0; padding:0; }
ul li{ list-style:none; margin:0; }
img{ border:0; }
a,a:focus,a:hover{ text-decoration: inherit; color: inherit; }
.h1, .h2, .h3, h1, h2, h3,.h4, .h5, .h6, h4, h5, h6{ margin:0; }
input:focus,textarea:focus{ outline:none; }

.home-bg{ background:url(../images/home-bg2.jpg) no-repeat top center; background-size: cover;}

.main{ padding:30px 15px; }
.logo{ padding:0 35px; }
.logo img{ max-width:100%; margin:30px 0 15px; }
.welcome{ font-size:10rem; }
.bottom{ font-size:10rem; }
.home{ padding:100px 0; }
.home a{ display: inline-block; background-color:#2d2b5a; font-size:18rem; letter-spacing: 3px; border-radius:30px; margin:10px 0; padding:5px 30px; }

.gallery img{ max-width:100%; }
.fancybox-nav span{ visibility:visible!important; }
.fancybox-prev{ left:-30px!important; }
.fancybox-next{ right:-30px!important; }

.set-top{ padding: 15px; text-align:left; }
.set-title{ padding-top:15px; }
.set-jifen{ width: 80px; text-align: center; margin:15px 0; font-size:13rem; }
.set-jifen:before{ content:''; display:block; height: 30px; background:url(../images/ico-jifen.png) no-repeat top center; background-size:30px; }
.set-touxian{ font-size:8rem; margin:10px 0 0 0; }
.set-touxian:before{ content: ''; display: block; margin-bottom: 5px; width: 100%; height: 3px; border-radius: 2px; background-color: #2a2a57; }
.touxian-left{ text-align:left; position:relative; }
.touxian-left:before{ content: ''; position: absolute; top:-8px; width: 100%; height: 3px; border-radius: 2px; background-color: #ffa613; }
.touxian-right{ text-align:right; }
.set-info{ margin-top: 10px; font-size:8rem; line-height:1.8; }
.set-main{ padding:0 15px; }
.form-links{ padding: 0 15px 15px; display: flex; justify-content: space-between;}
.form-links a{ background-color:#2d2b5a; letter-spacing: 3px; border-radius:30px; margin: 0 10px; padding:5px 30px; }
.set-title ul li{ display:inline-block; margin-right:5px; }
.set-title ul li a{ text-decoration:underline; color: #fff; opacity: 0.9;}

.chat-top{ padding: 15px 15px 0; }
.logo3{ margin-bottom:10px; }
.logo3 img{ max-width:100%; }
.chat-title{ margin-bottom:30px; text-align:left; }
.chat-title h3{ font-size:19rem; letter-spacing:3px; }
.chat-title h2{ font-size:38rem; font-weight:bold; margin-bottom:30px; }
.chat-title h4{ font-size:16rem; margin-bottom:15px; }
.chat-title ul{ }
.chat-title ul li{ display:inline-block; }
.chat-title ul li:first-child{ margin-right:50px; }
.chat-title ul li a{ display: block; text-align:center; }
.chat-title ul li img{ display: inline-block; height:20px; }
.chat-title ul li span{ font-size:8rem; display:block; }
.chat-img{ width: 150px; padding-bottom:20px; }
.chat-img img{ max-width:100%; }
.chat-main{ padding:15px; }
.scc-chat-header{ width: 100%; overflow: hidden; background-color:#2b2a58; padding: 5px 15px; border-radius:10px; margin-bottom:10px;}
.scc-chat-header button{ float:left; padding:5px 30px; background-color:#191932; color: #fff; border:0; border-radius:30px; letter-spacing:3px; }
.scc-chat-header div{ float:right; font-size:16rem; }
.chat-panel{ margin-bottom: 10px; background-color:#2b2a58; border-radius:20px; padding:15px 5px; }
.chat-block{ width:100%; overflow-x: hidden; padding: 0 10px; height:400px; overflow-y:scroll; text-align: left; }
.scc-message{ width:100%; margin-bottom:10px; }
.scc-msg-me{ float:left; }
.scc-msg-friend{ float:right; text-align:right; }
.scc-message-user{ margin-bottom:5px; }
.scc-message-user img{ height:30px; }
.scc-message-user span{ display:block; }
.scc-message-content{ display: inline-block; background-color:#ffffff; color:#161625; padding:5px 15px; border-radius:5px; }
.scc-chat-image{ max-height:100px; }
.scc-msg-friend .scc-message-content{ background-color:#7775bb; color:#fff; }
.scc-message-time{ font-size:10rem; margin-top: 5px; }
.scc-message-time img{ height:10px; }
.scc-delete-message{ margin-right:5px; color:#97a7b2; }
.scc-retract-message{ margin-right:5px; color:#00a6ed;}
.scc-chat-toolbar{ margin: 10px 0; text-align:left; }
.scc-chat-toolbar button{ display:inline-block; background:none; border:0; color:#fff; margin:0 15px 0 0; }
.scc-chat-toolbar img{ height:30px; margin-bottom:5px; }
.scc-chat-toolbar span{ display:block; font-size:8rem; line-height:20px; }
#scc-chat-input{ width: 100%; border:0; color: #fff; background-color:#2b2a58; padding:5px 15px; border-radius:15px; }
#scc-send-message{ line-height: 55px; float: right; margin: 0; background-color:#33325c; color: #fff; border:0; padding:5px 30px; border-radius:30px; letter-spacing:3px; }

#scc-chat-search{ display:none; width: 100%; height: 100%; position: fixed; z-index: 2; top:0; left: 0; padding: 100px 15px 30px; background-color: rgba(0, 0, 0, 0.9);}
#scc-search-close{
    position: absolute;
    top: 20px; 
    right: 20px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    background: transparent;
    border:0;
}
.scc-search-form{ }
#scc-search-input{ color: #fff; line-height: 20px; border:0; background-color:#2b2a58; padding:5px 15px; border-radius:15px; }
#scc-search-btn{ background-color:#33325c; color: #fff; border:0; padding:5px 30px; border-radius:30px; letter-spacing:3px;}
#scc-search-btn img{ height:20px; }

#scc-search-results{ height: 300px; overflow-y: scroll; padding:15px; margin:10px 0; text-align:left; }
.scc-search-list{ background:#2b2a58; padding: 15px;}
.scc-search-list li{ margin:0 0 10px 0; }
.scc-search-list li img{ height: 18px; display:inline-block;}
.scc-search-list li strong{ display:inline-block; }
.scc-search-list li span, .scc-search-list li em{ display:block; }

#scc-unread-count{ background:red; color:white; border-radius:50%; padding:2px 6px; margin-left:10px;}

#emoji-panel {
    display: none;
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    position: absolute;
}
#emoji-panel span {
    cursor: pointer;
    font-size: 20px;
    margin: 3px;
}

#scc-upload-loading{ display: none; width:100%; height:100%; position: fixed; left: 0; top: 0; z-index: 2; background-color:rgba(0, 0, 0, 0.7);}
#scc-upload-loading div{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

#scc-image-lightbox {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    padding: 5%;
}
.scc-lightbox-overlay{ width:100%; height:100%; position: absolute; left: 0; top: 0; background-color:rgba(0, 0, 0, 0.5); }
#scc-lightbox-img {
    max-height: 90%;
    position: absolute;
    top:5%;
    left: 0;
    z-index: 2;
}
#scc-lightbox-close {
    position: absolute;
    top: 20px; 
    right: 20px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    background: transparent;
    border:0;
}


.scc-page-friends{ padding: 15px; }
.scc-friends-block{ padding: 15px; background: #2a2a57; border-radius: 15px; text-align:left;}
.scc-page-friends h3{ font-size:14rem; margin:5px 0; }
.scc-page-friends input[type='text']{
    
    background-color: #161625;
    border: 0;
    border-radius: 15px;
    padding: 0 12px;
    color: #fff;
    line-height: 30px;
    margin-bottom: 10px;
    display: inline-block;
}
.scc-page-friends button{
    display: inline-block;
    border: 0;
    background: #5b599b;
    color: #fff;
    letter-spacing: 3px;
    line-height: 30px;
    border-radius: 30px;
    padding: 0 20px;
    margin-bottom: 10px;
}
#scc-add-friend-result{ color:#f00; }
#scc-friends-list{ padding:15px; }
#scc-friends-list li{ width:100%; overflow:hidden; }
#scc-friends-list li span{ float:left; }
#scc-friends-list li span.scc-remove-friend, #scc-friends-list li span.scc-chat-friend{ float:right; margin-left:10px; }
#scc-sent-requests-list{ padding:15px;}
#scc-received-requests-list{ padding:15px;}
#scc-received-requests-list button{ float:right; margin-left:10px; }

.scc-notification-page{ padding:15px; }
.scc-notification-page h2{ font-size:14rem; }
button#scc-mark-all-read{ margin: 10px 0; background:#2b2a58; color:#fff; border:0; border-radius:15px; padding:5px 15px; }
#scc-notification-list{ background:#2b2a58; border-radius: 15px; padding: 15px; text-align:left; }
#scc-notification-list li{ width:100%; overflow:hidden; margin-bottom:10px; }
#scc-notification-list li a{ width:100%; float:left; }
#scc-notification-list li small{ line-height: 30px; float:left; }
#scc-notification-list li button{ line-height: 30px; float:right; background: #5b599b; color:#fff; border:0; border-radius:15px; padding:0 15px; border:0; margin: 0 0 0 10px;}
#scc-notification-list li.unread { }
#scc-notification-list li.read { opacity:0.5; }

#scc-friends-container{ padding:0 0 30px 0; }
.scc-friend-item{ width:100%; overflow:hidden; text-align: left; line-height: 30px; margin-bottom: 10px;}
.scc-friend-item button{ float:right; background: #5b599b; color:#fff; border:0; border-radius:15px; padding:0 15px; border:0; }
.scc-friend-item.active{ color:#5b599b; }