/* ======== 알람 ======== */

.tabs {position: sticky; top: 60px; z-index: 3;}
.tabs ul {display: flex; width: 100%; border-bottom: 1px solid #f1f1f1; padding: 0 16px; background: #fff;}
.tabs ul li {padding: 15px 9px; font-size: 15px; color: #888;}
.tabs ul li.on {color: #16854F; font-weight: 600; border-bottom: 2px solid #16854F;}

.alarm-wrap ul li {padding: 15px 0; display: flex; gap: 10px; border-bottom: 1px solid #f1f1f1;}
.alarm-wrap ul li .profile {width: 46px; height: 46px; position: relative;}
.alarm-wrap ul li .profile .pro-img {width: 100%; height: 100%; overflow: hidden; border-radius: 100%; border: 1px solid #ddd;}
.alarm-wrap ul li .profile .new {position: absolute; width: 6px; height: 6px; border-radius: 100%; background-color: #ff0000; top: 0; left: 0;}
.alarm-wrap ul li .profile img {object-fit: cover; height: 100%;}
.alarm-wrap ul li .al-con {width: calc(100% - 56px); display: flex; flex-direction: column; gap: 4px;}
.alarm-wrap ul li .al-con > b {font-size: 12px; color: #16854F; font-weight: 700;}
.alarm-wrap ul li .al-con > p {font-size: 16px; font-weight: 500;}
.alarm-wrap ul li .al-con > p em {font-weight: 500; display: inline-block;}
.alarm-wrap ul li .al-con > p b {font-weight: 800;}
.alarm-wrap ul li .al-con > span {font-size: 12px; color: #aaa;}
.alarm-wrap ul li .al-con button {padding: 8px 10px; border: 1px solid #16854F; background-color: #fff; color: #16854F; width: fit-content; height: fit-content; font-size: 14px; border-radius: 50px !important; margin-top: 5px;}

.alarm-none {display: flex; align-items: center; justify-content: center; flex-direction: column; height: calc(100vh - 115px); gap: 25px;}
.alarm-none span {display: block; width: 55px;}
.alarm-none p {font-size: 16px; color: #888;}