@charset "utf-8";
/* CSS Document */

.fbpl-header { background: #f1f1f1;}
.fbpl-header .back { position: absolute; top: 0; left: 15px;}
.fbpl-header .txt { position: absolute; top: 0; right: 15px;}
.fbpl-header .txt span { margin-left: 15px;}
.fbpl-header .txt span:nth-child(1) { margin-left: 0;}
.fbpl-wrapper { min-height: 100vh; background: #f1f1f1;}
.fbpl-con { background: #fff;}
.fbpl-con .fbpl-box { width: 100%; min-height: 20vh; line-height: 1.75; padding: 10px 15px; box-sizing: border-box;}
.fbpl-con .fbpl-num { padding: 10px 15px; text-align: right; font-size: 13px; color: #999; background: #fff;}
.fbpl-bq { padding: 10px 15px;}
.fbpl-bq img { width: 30px; height: 30px;}
.fbpl-addpic { padding: 0 10px;}
.fbpl-addpic ul { display: flex; flex-direction: row; flex-wrap: wrap;}
.fbpl-addpic ul li { width: 33.33%; max-width: 140px; padding: 0 5px 10px 5px; box-sizing: border-box; position: relative;}
.fbpl-addpic ul li img { width: 100%; height: 100px; vertical-align: top;}
.fbpl-addpic ul li .addpic { display: inline-block;width: 100%; height: 100px; line-height: 100px; color: #bbb; font-size: 60px; text-align: center; vertical-align: top; background: #e5e5e5;}
.fbpl-addpic ul li .fbpl-close { display: inline-block; width: 24px; height: 24px; border-radius: 24px; border: solid 2px #fff; background: url(../images/close2.png) center center no-repeat #333; background-size: 10px auto; position: absolute; top: 10px; right: 15px;}
.fbpl-btn { padding: 5px 15px 15px 15px;}
.fbpl-btn button { width: 100%; height: 40px; color: #fff; font-size: 16px; border-radius: 3px; border: solid 1px #0084ff; background: #0084ff;}

.fbpl-user { max-height: 150px; overflow: auto; padding: 15px 10px 0 0;}
.fbpl-user ul { display: flex; flex-direction: row; flex-wrap: wrap;}
.fbpl-user ul li { display: flex; align-items: center; width: 33.33%; margin-bottom: 15px; box-sizing: border-box;}
.fbpl-user ul li .fbpl-user1 { flex: 1; height: 28px; line-height: 28px; margin-left: 20px; font-size: 15px; border: solid 1px #ddd; border-right: 0; background: #fff; position: relative;}
.fbpl-user ul li .fbpl-user1 img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: solid 3px #fff; background: #fff; position: absolute; top: -3px; left: -10px;}
.fbpl-user ul li .fbpl-user1 span { height: 28px; margin-left: 30px; display: block; overflow: hidden;}
.fbpl-user ul li .fbpl-user2 { width: 16px; height: 28px; border: solid 1px #ddd; border-left: 0; border-radius: 0 3px 3px 0; background: url(../images/close.png) left center no-repeat #fff; background-size: 10px 10px;}
.fbpl-user ul li.active .fbpl-user1 { border: solid 1px #0084ff; color: #fff; background: #0084ff;}
.fbpl-user ul li.active .fbpl-user2 { border: solid 1px #0084ff; background: url(../images/close2.png) left center no-repeat #0084ff; background-size: 10px 10px;}

.xinzeng { width: 86%; max-width: 600px; padding: 16px; box-sizing: border-box; border-radius: 2px; background: #fff; position: fixed; top: 50%; left: 0; right: 0; z-index: 100; margin: auto; transform: translateY(-50%);}
.xinzeng .close { width: 20px; height: 20px; display: inline-block; background: url(../images/close.png) center center no-repeat; background-size: 100% 100%; position: absolute; top: 16px; right: 16px;}
.xinzeng .tit { border-bottom: solid 1px #eee;}
.xinzeng .tit h3 { padding: 10px 0; display: inline-block; font-size: 17px; font-weight: bold; border-bottom: solid 3px #0084ff;}
.xinzeng .input { padding-top: 5px;}
.xinzeng .input ul {}
.xinzeng .input ul li { margin-top: 10px; display: flex;}
.xinzeng .input ul li input { width: 100%; height: 40px; padding: 0 6px; box-sizing: border-box; border: solid 1px #ebebeb; border-radius: 4px; background: #f1f1f1;}
.xinzeng .input ul li img { width: 40px; height: 40px; margin-left: 10px; border-radius: 50%; object-fit: cover;}
.xinzeng .btn { margin-top: 10px;}
.xinzeng .btn button { width: 100%; height: 40px; color: #fff; border: 0; border-radius: 4px; background: #0084ff;}
.xinzeng-black-bg { background: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;}

.fbpl-emoticon { width: 100%; max-width: 750px; margin: 0 auto; background: #fff; position: fixed; bottom: 0; z-index: 1;}
.emoticon-list { display: flex; flex-direction: row; flex-wrap: wrap; padding: 8px 5px 30px 5px; text-align: center;}
.emoticon-list li { width: 12.5%; padding: 5px; box-sizing: border-box;}
.emoticon-list li img { width: 30px; height: auto;}
.emoticon-list li.emoticon-delite img { width: 26px;}

.hot-pl {}
.hot-pl-tit { margin-bottom: 30px; margin-top: 10px; padding: 0 10px; border-bottom: solid 1px #eee;}
.hot-pl-tit h2 { display: inline-block; padding: 10px 0; font-size: 17px; font-weight: bold; border-bottom: solid 4px #0084ff;}
.hot-pl-con { display: flex; margin-bottom: 30px; padding: 0 10px;}
.hot-pl-con.sp { background: url(../images/sp.png) top right 60px no-repeat; background-size: auto 55px;}
.hot-pl-pic1 { width: 32px; margin-right: 10px; color: #999; font-size: 13px;}
.hot-pl-pic1 img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;}
.hot-pl-pic1 span { display: block; line-height: 1.2; text-align: center;}
.hot-pl-per { flex: 1;}
.hot-pl-chr { font-size: 17px; font-weight: normal; position: relative;}
.hot-pl-chr .pl-delete { height: 26px; line-height: 26px; margin: auto; padding: 0 12px; font-size: 13px; display: inline-block; border-radius: 26px; background: #f5f5f5; position: absolute; top: 0; bottom: 0; right: 0;}
.hot-pl-chr .pl-dongjie { height: 26px; line-height: 26px; margin: auto; padding: 0 12px; font-size: 13px; display: inline-block; border-radius: 26px; background: #f5f5f5; position: absolute; top: 0; bottom: 0; right: 55px;}
.hot-pl-time { display: flex; margin-top: 10px; margin-bottom: 5px; font-size: 13px; color: #999;}
.hot-pl-timel { flex: 1;}
.hot-pl-timer {}
.hot-pl-timer img { width: 17px; height: 17px; vertical-align: middle; margin-right: 3px;}
.hot-pl-detail { line-height: 1.75; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 15; overflow: hidden;}
.hot-pl-pic2 { margin-top: 10px;}
.hot-pl-pic2 ul { display: flex; flex-direction: row; flex-wrap: wrap;}
.hot-pl-pic2 ul li { width: 33.33%; max-width: 150px; padding-right: 10px; padding-bottom: 10px; box-sizing: border-box;}
.hot-pl-pic2 ul li img { width: 100%; height: 120px; vertical-align: top;}
.hot-pl-pic2.only {}
.hot-pl-pic2.only ul li { width: 100%; max-width: 750px; padding: 0;}
.hot-pl-pic2.only ul li img { width: auto; max-width: 100%; height: auto;}
.hot-pl-pic2s { margin-top: 10px;}
.hot-pl-pic2s ul { display: flex; flex-direction: row; flex-wrap: wrap;}
.hot-pl-pic2s ul li { width: 33.33%; max-width: 120px; padding-right: 10px; padding-bottom: 10px; box-sizing: border-box;}
.hot-pl-pic2s ul li img { width: 100%; height: 100px; vertical-align: top;}
.hot-pl-pic2ss { margin-top: 10px;}
.hot-pl-pic2ss ul { display: flex; flex-direction: row; flex-wrap: wrap;}
.hot-pl-pic2ss ul li { width: 33.33%; max-width: 100px; padding-right: 10px; padding-bottom: 10px; box-sizing: border-box;}
.hot-pl-pic2ss ul li img { width: 100%; height: 85px; vertical-align: top;}
.hot-pl-btn { margin-top: 10px;}
.hot-pl-btn span { display: inline-block; height: 32px; line-height: 32px; margin-right: 10px; padding: 0 15px; border-radius: 30px; background: #eee;}
.hot-pl-btn span:last-child { margin-right: 0;}
.hot-pl-btn span.qw { color: #175199;}
.hot-pl-replay-box { margin-top: 10px; padding: 5px 10px; background: #f5f5f5;}
.hot-pl-replay { padding: 5px 0;}
.hot-pl-replay-tit { margin-bottom: 5px; color: #175199; position: relative;}
.hot-pl-replay-tit img { display: inline-block; width: 20px; height: 20px; margin-right: 3px; border-radius: 50%; object-fit: cover; vertical-align: middle;}
.hot-pl-replay-tit .hot-pl-chr2 { display: inline-block; font-size: 15px; font-weight: normal;}
.hot-pl-replay-tit span { height: 24px; line-height: 24px; margin: auto; padding: 0 10px; font-size: 12px; color: #000; display: inline-block; border-radius: 26px; background: #fff; position: absolute; top: 0; bottom: 0; right: 0;}
.hot-pl-replay-tit span.pl-delete { right: 50px;}
.hot-pl-replay-tit span.pl-dongjie { right: 100px;}
.hot-pl-replay-tit span.pl-dongjie2 { right: 50px;}
.hot-pl-replay-con { line-height: 1.75;}
.hot-pl-hf { display: inline-block;}
.hot-pl-pic3 { display: inline-block; width: 18px; height: 18px; margin: 0 3px; border-radius: 50%; object-fit: cover; vertical-align: middle;}
.hot-pl-chr3 { display: inline-block; font-weight: normal; font-size: 15px; color: #175199;}
.hot-pl-mm { display: inline;}
.hot-pl-mm p { display: inline;}
.hot-pl-all { padding: 5px 0; color: #999;}

.pl1 { padding: 15px;}
.pl1t { display: flex; align-items: center;}
.pl1-pic { margin-right: 10px;}
.pl1-pic img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover;}
.pl1-per { flex: 1;}
.pl1-chr { margin-bottom: 10px; font-size: 17px;}
.pl1-time { display: flex; font-size: 13px; color: #999;}
.pl1-zan { font-size: 14px; color: #555;}
.pl1-zan img { width: 20px; height: 20px; vertical-align: middle; margin-right: 3px;}
.pl1-detail { line-height: 1.75; margin-top: 10px;}
.pl1-pic2 { margin-top: 10px;}

.pl2-box {}
.pl2 { display: flex; margin: 0 15px; padding: 15px 0; border-bottom: solid 1px #eee; position: relative;}
.pl2:last-child { border-bottom: none;}
.pl2-pic { width: 40px; margin-right: 10px;}
.pl2-pic img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;}
.pl2r { flex: 1;}
.pl2-per { display: flex;}
.pl2-per .pl2-chr { flex: 1; margin-bottom: 10px; color: #175199;}
.pl2-per span { height: 26px; line-height: 26px; padding: 0 12px; font-size: 13px; display: inline-block; border-radius: 26px; background: #eee; position: absolute; top: 15px; right: 0;}
.pl2-per span.pl-delete { right: 55px;}
.pl2-per span.pl-dongjie { right: 110px;}
.pl2-time { margin-bottom: 5px; font-size: 13px; color: #999;}
.pl2-detail { line-height: 1.75;}

.pl-foot { width: 100%; max-width: 750px; height: 50px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; border-top: solid 1px #eee; background: #fff; position: fixed; bottom: 0;}
.pl-foot input { width: 100%; height: 32px; margin-top: 9px; padding: 0 15px; box-sizing: border-box; border: solid 1px #ebebeb; border-radius: 32px; background: #f1f1f1;}

.pl-list { padding: 15px; border-bottom: solid 1px #eee;}
.pl-list .pl-tit { display: flex; align-items: center;}
.pl-list .pl-tit .pl-titl { margin-right: 10px;}
.pl-list .pl-tit .pl-titl img { width: 54px; height: 54px; border-radius: 50%; background: url(../images/loader.gif) center center no-repeat; background-size: 50% auto;}
.pl-list .pl-tit .pl-titr {}
.pl-list .pl-tit .pl-titr .name { margin-bottom: 10px; font-size: 17px;}
.pl-list .pl-tit .pl-titr .time { font-size: 13px; color: #999;}
.pl-list .pl-qi { margin-top: 10px;}
.pl-list .mypl-list { margin-top: 10px; padding: 5px 10px; background: #f5f5f5;}
.pl-list .mypl { padding: 5px 0;}
.pl-list .mypl-tit { display: flex; align-items: center; margin-bottom: 5px;}
.pl-list .mypl-tit img { width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; object-fit: cover;}
.pl-list .mypl-tit h3 { display: inline-block; margin-right: 5px; color: #175199; font-size: 15px; font-weight: normal;}
.pl-list .mypl-tit span { font-size: 13px; color: #999;}
.pl-list .mypl-con { padding-left: 25px; line-height: 1.75;}

.search { width: 100%; height: 50px; padding: 10px; box-sizing: border-box; border-bottom: solid 1px #eee;}
.search-box { display: flex; align-items: center; height: 32px; padding: 0 12px; box-sizing: border-box; font-size: 14px; border: solid 1px #ebebeb; border-radius: 32px; background: #f1f1f1;}
.search-l {}
.search-l select { height: 30px; background: none;}
.search-l option {}
.search-r { flex: 1; margin-left: 5px;}
.search-r input { width: 100%; height: 30px; background-size: 15px 15px; background: none;}

.indexed-plbg { width: 100%; max-width: 750px; height: 100vh; margin: 0 auto; background: rgba(0,0,0,.7); position: fixed; top: 50px; z-index: 9;}
.indexed-plbox { width: 50%; height: 100vh; overflow: auto; background: #fff; position: absolute; top: 0; right: 0;}
.indexed-list { padding: 0 10px;}
.indexed-list li {}
.indexed-list li a { display: block; height: 46px; line-height: 46px; border-bottom: 1px solid #eee; position: relative;overflow: hidden; white-space: nowrap;}
.indexed-list li a span { display: inline-block; height: 26px; line-height: 26px; padding: 0 10px; font-size: 14px; border-radius: 4px; color: #175199; background: #f5f5f5; position: absolute; right: 0; top: 10px;}