@charset "utf-8";
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.cf { *+display:inline-block;}
.Panel.MsgList { position: absolute; top: 110px; bottom:81px; opacity: 0; width: 80%; left: 50%; transform:translateX(-50%);display: none;}
.MsgList .MsgItem { width: 100%;  position: relative; background-color: rgba(18, 96, 176, 0);
background: -webkit-gradient(linear,0 0,0 100%,from(rgba(255, 255, 255, 0.11)),to(rgba(255, 255, 255, 0.34)));
background: -moz-linear-gradient(top, rgba(255,255,255,0.11) 0%,rgba(255,255,255,0.34) 100%);
border: 1px solid rgba(255, 255, 255, 0);border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; margin: 0 0 .5% 0;-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;padding:10px; }
.MsgList .MsgItem:last-child { margin-bottom: 0 }
.MsgList .MsgItem .head { position: absolute; background-color: #fff; border-radius: 100%;
border: 5px solid rgba(255, 255, 255, 0.82); -webkit-border-radius: 100%; -moz-border-radius: 100%; background-size: cover }
.MsgList .MsgItem .nickname { position: absolute; overflow: hidden; color: #FFFFFF;
text-shadow: 0 0px 8px rgba(0, 0, 0, 0.37);}
.MsgList .MsgItem .msgword { position: absolute; overflow: hidden; color: #FFF;
text-shadow: 0 0px 8px rgba(0, 0, 0, 0.37);}
.msgin { -webkit-animation: msgin-transform 1s .2s ease both; -moz-animation: msgin-transform 1s .2s ease both }
.faceicon { display: inline-block; overflow: hidden; position: relative; margin: 0; padding: 0; display: none; vertical-align: middle }
.faceicon img { width: 2880px; height: 64px; position: absolute; top: 0; left: 0 }
@-webkit-keyframes msgin-transform { 0 {
-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateX(0);
opacity:1
}
}
@-moz-keyframes flipInX { 0 {
-moz-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotateX(-10deg)
}
70% {
-moz-transform:perspective(400px) rotateX(10deg)
}
100% {
-moz-transform:perspective(400px) rotateX(0);
opacity:1
}
}

/* 放大的消息框 */
.msg-box {
    font-family: "微软雅黑";
    width: 80%;
    height: calc(100%-191px);
    background-color: rgba(255, 255, 255, .22);
    position: absolute;
    top: 110px;
    bottom: 81px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    color: #FFF;
}

/* 关闭按钮 */
.msg-box .close-btn {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 40px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    /* background-color: #fff; */

}

/* 头像区域 */
.msg-box .header {

    box-sizing: border-box;
    width: 100%;
    height: 25%;
    border-bottom: 1px solid #fff;
    /* margin-top: 5%; */
    padding: 16px 25px;
}

.msg-box .head-img {
    border-radius: 50%;
    border: 2px solid #fff;
    height: 100%;
    width: auto;
    vertical-align: middle;
    
}

.msg-box .nickname {
    padding-left: 15px;
    font-size: 40px;
    /* color: #fff; */
}
/* 内容区域 */
.msg-box .content {
    width: 100%;
    height: 75%;
    line-height: 1.2;
    padding-top: 3px;
    overflow: hidden;
    position: relative;
}


.msg-box .content p {
    margin: 0;
    float: left;
    font-size: 70px;
    /* color: #fff; */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}
.msg-box .content p img {
    vertical-align: middle;
}
.msg-box .content .content-img {
    width: auto;
    height: 95%;
    /* margin: 0 auto; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}