iphone div{
    box-sizing: border-box;
}

iphone {width: 338px; height: 685px; border-radius: 55px; background: #303030;  display: table; color: #333;
    box-sizing: border-box;   cursor: default; position: relative;right:-28px}
iphone .skin {width: 100%; height: 100%; border: 1px solid #000; border-radius: 50px; background: #222; padding: 8px;}
iphone .screen {width: 100%; height: 667px; border-radius: 42px; background: #fff; position: relative; overflow: hidden}
iphone .head {width: 100%; height: 82px; text-align: center; position: absolute; padding: 37px 15px 8px 15px; border-bottom: 1px solid #f5f5f5;display: flex;justify-content: space-between;}
iphone .head span {font-size: 14px; font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 360px;display: block;line-height: 25px;}
iphone .peak {width: 56.28%; height: 27px; margin: 0px auto; border-radius: 0 0 20px 20px; background: #222; position: relative}
iphone .piece-l,iphone .piece-r {width: 10px; height: 10px; background: #222; position: absolute}
iphone .piece-l {left: -10px}
iphone .piece-r {right: -10px}
iphone .circular-l,iphone .circular-r {width: 10px; height: 10px; background: #fff; position: absolute}
iphone .circular-l {border-radius: 0 5px 0 0}
iphone .circular-r {border-radius: 5px 0 0 0}
iphone .sound {width: 48px; height: 6px; border-radius: 15px; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24px; margin-top: -10px;
    box-shadow: 0px 4px 4px 0px #444 inset}
iphone .lens {width: 6px; height: 6px; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34px; margin-top: -10px}
iphone .talk {width: 50%; height: 6px; border-radius: 15px; background: rgba(0,0,0,.3); position: absolute; bottom: 8px; left: 50%; margin-left: -25%}
iphone .area-l,iphone .area-r {width: 70px; height: 16px; position: absolute; top: 6px}
iphone .area-l {left: 0; text-align: center; font-size: 12px; line-height: 22px; text-indent: 10px; font-family: "Verdana"; font-weight: 600}
iphone .area-r {right: 3px}
iphone .signal {float: left; width: 16px; height: 9px; margin-top: 7px; margin-right: 6px; margin-left: 4px}
iphone .signal span {float: left; width: 2px; margin-left: 2px; border-radius: 2px; background: #111; display: block}
iphone .signal span:first-child {margin-left: 0}
iphone .signal .ico01 {height: 3px; margin-top: 6px}
iphone .signal .ico02 {height: 5px; margin-top: 4px}
iphone .signal .ico03 {height: 7px; margin-top: 2px}
iphone .signal .ico04 {height: 9px}
iphone .fa-feed {float: left; font-size: 12px!important; transform:rotate(-45deg); margin-top: 4px; margin-right: 8px}
iphone .fa-battery-full {float: left; font-size: 12px!important; margin-top: 6px}
iphone .fa-chevron-left {float: left; margin-top: 4px}
iphone .fa-cog {float: right; margin-top: 4px}
iphone .btn01 {width: 3px; height: 28px; border-radius: 3px 0 0 3px; background: #222; position: absolute; top: 105px; left: -3px}
iphone .btn02 {width: 3px; height: 54px; border-radius: 3px 0 0 3px; background: #222; position: absolute; top: 160px; left: -3px}
iphone .btn03 {width: 3px; height: 54px; border-radius: 3px 0 0 3px; background: #222; position: absolute; top: 230px; left: -3px}
iphone .btn04 {width: 3px; height: 86px; border-radius: 0 3px 3px 0; background: #222; position: absolute; top: 180px; right: -3px}
iphone iframe {
    width: 320px;
    height: 601px;
    position: absolute;
    top: 69px;
}
.mine {width: 300px; height: auto; margin: 20px auto; background: #fdd700; display: table; margin-top: 90px; border-radius: 30px; padding: 5px; box-shadow: 0 0 10px #fdd700}
.mine-img {float: left; width: 50px; height: 50px; border-radius: 100%; overflow: hidden; margin-right: 20px}
.mine-img img {width: 50px; height: 50px}
.mine-mes {float: left; width: auto; height: 50px}
.mine-name {height: 25px; line-height: 25px; font-size: 16px; font-weight: bold}
.mine-name span {float: left}
.mine-name i {float: left; width: 16px; height: 16px; text-align: center; font-weight: bold; margin: 4.5px; color: #fff; font-size: 12px; border-radius: 15px; display: block}
.mine-name .fa-mars {background: #0de5ed; line-height: 18px}
.mine-txt {height: 25px; line-height: 25px; font-size: 13px; color: #333}
.mine-contact {float: left; width: 180px; padding: 10px}
.mine-contact ul li {float: left; width: 100%; height: 25px; line-height: 25px; font-size: 12px}
.mine-code {float: left; margin-top: 10px}
.mine-code img {width: 90px; height: 90px; border: 5px solid #fff; border-radius: 10px}
.mine em {float: left; width: 100%; height: 1px; margin-top: 15px; display: block; background: rgba(0,0,0,.1)}

.user {width: 290px; height: 50px; margin: 20px auto; display: table}
.user-img {float: left; width: 50px; height: 50px; border-radius: 100%; overflow: hidden; margin-right: 20px}
.user-img img {width: 50px; height: 50px}
.user-mes {float: left; width: auto; height: 50px}
.user-name {height: 25px; line-height: 25px; font-size: 16px}
.user-name span {float: left}
.user-name i {float: left; width: 16px; height: 16px; text-align: center; font-weight: bold; margin: 4.5px; color: #fff; font-size: 12px; border-radius: 15px; display: block}
.user-name .fa-venus {background: #ff4170; line-height: 17px; transform:rotate(30deg)}
.user-name .fa-mars {background: #0de5ed; line-height: 18px}
.user-txt {height: 25px; line-height: 25px; font-size: 13px; color: #ccc}


/* 公告的样式 */
#gonggao_none{
    position: absolute;top:78px;left:8px;width:321px;height:30px;line-height:30px;font-size:14px;z-index: 999;background: rgba(255,152,0,0.7);overflow: hidden;color:#fff;display:none;
}

.float-box {
    width: 320px;
    height: 587px;
    position: absolute;
    left: 9px;
    top: 78px;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
    border-radius: 0 0 40px 41px;
}