/* main */
main > .stateWrap{display:flex; position:sticky; top:75px; z-index: 2;}
main > .stateWrap > .totalPresent{padding:0 20px; background:#ddd; height:6rem; display:flex; flex-direction:column; align-items: center; justify-content: center;}
main > .stateWrap > .totalPresent > .tit{font-size:13px; display:block; text-align: center; color:#666;}
main > .stateWrap > .totalPresent > .num{font-size:20px; display:block; text-align: center; color:#666;}
main > .stateWrap > .totalPresent > .num > b{color:var(--fontColor);}

main > .stateWrap > .detailsPresent{background:#efefef; width:100%; padding:0 20px; height:6rem; display:flex; flex-direction:column; justify-content: center;}
main > .stateWrap > .detailsPresent > div{display:flex; align-items: center; justify-content: space-between;}
main > .stateWrap > .detailsPresent > div > .tit{font-size:13px; color:#666;}
main > .stateWrap > .detailsPresent > div > .num{font-size:13px; color:#666;}
main > .stateWrap > .detailsPresent > div > .num > b{color:var(--fontColor);}

main > .chatList{padding:20px 0;}
main > .chatList > .item + .item{margin-top:20px;}
main > .chatList > .item > a{display:flex; padding:0 20px 0 15px; gap:10px; align-items: center; position:relative;}
main > .chatList > .item > a > .profile{width:60px; height:60px; position:relative; flex-shrink: 0;}
main > .chatList > .item > a > .profile > .profileImg{width:100%; height:100%; border-radius: 50%; overflow:hidden;}
main > .chatList > .item > a > .profile > .profileImg > img{width:100%; height:100%; object-fit:cover;}
main > .chatList > .item > a > .profile > .state{position:absolute; bottom:0; left:0; right:0p; text-align: center; width:100%; padding:5px; color:#fff; font-size:12px;}
main > .chatList > .item > a > .profile > .state.type0{background:#cc0000;} 
main > .chatList > .item > a > .profile > .state.type1{background:#3399cc;} 
main > .chatList > .item > a > .profile > .state.type2{background:#9933cc;} 
main > .chatList > .item > a > .profile > .state.type3{background:#006600} 
main > .chatList > .item > a > .profile > .state.type4{background:#444;} 
main > .chatList > .item > a > .profile > .state.type5{background:#444;} 
main > .chatList > .item > a > .profile > .state.type6{background:#fe7c1c;} 
main > .chatList > .item > a > .profile > .state.type7{background:#cc0000;} 
main > .chatList > .item > a > .profile > .state.type8{background:#757bf6} 
main > .chatList > .item > a > .profile > .state.type9{background:#757bf6} 
main > .chatList > .item > a > .profile > .state.type10{background:#444;} 
main > .chatList > .item > a > .profile > .state.type11{background:#3399cc;} 
main > .chatList > .item > a > .profile > .state.type12{background:#444;} 
main > .chatList > .item > a > .profile > .state.type13{background:#ffcb2a;} 
main > .chatList > .item > a > .profile > .state.type14{background:#ffcb2a;} 

main > .chatList > .item > a > .chatCon{width:calc(100% - 70px);}
main > .chatList > .item > a > .chatCon > .tit{display:flex; align-items: center; justify-content: space-between;}
main > .chatList > .item > a > .chatCon > .tit > .name{font-size:15px; font-weight:600;}
main > .chatList > .item > a > .chatCon > .tit > .date{font-size:13px; color:#666;}
main > .chatList > .item > a > .chatCon > .txt{font-size:13px; margin-top:5px; width:100%; word-break: break-all;}

main > .chatList > .item > a > .alam{position:absolute; bottom:0; right:15px; background:#cc0000; padding:0 5px; height:25px; min-width:25px; display:flex; align-items: center; justify-content: center; border-radius:50%; color:#fff; font-size:12px; font-weight: 600;}