@charset "utf-8";


.dev-content.pc{padding:0px;  height:100%}
.dev-content.pc:after{height:initial}

/* **************************************** *
*  lnb
* **************************************** */
.pc .app-lnb{display:flex; flex-direction:column; justify-content:space-between; background:#fff; border-right:1px solid #E4E4E4;  min-width:50px; max-width: 50px; height:100%; box-shadow: none;}
.pc .app-lnb ul.lnb {flex:none}
.pc .app-lnb ul.lnb li{position:relative; display:flex; justify-content: center; align-items: center; width:50px; height:50px; cursor:pointer}
.pc .app-lnb ul.lnb li > div{width:20px; height:20px}
.pc .app-lnb ul.lnb li .ico-app:before{content:"\ea42"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-home:before{content:"\F0BA7"; font-family: "Material Design Icons";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-aprv:before{content:"\F1782"; font-family: "Material Design Icons";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-chat:before{content:"\eb51"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-mail:before{content:"\eef6"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-drive:before{content:"\F0163"; font-family: "Material Design Icons";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-alarm:before{content:"\ef92"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-orgz:before{content:"\F199C"; font-family: "Material Design Icons";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-set:before{content:"\f0e4"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-logout:before{content:"\F05FC"; font-family: "Material Design Icons";  font-size:22px; color:#8095A8}
.pc .app-lnb ul.lnb li .ico-demo:before{content:"\f0e2"; font-family: "remixicon";  font-size:22px; color:#8095A8}

.pc .app-lnb ul.lnb li .ico-app.active::before{content:"\ea41"}
.pc .app-lnb ul.lnb li .ico-home.active::before{content:"\F02DE"}
.pc .app-lnb ul.lnb li .ico-aprv.active::before{content:"\F1781";}
.pc .app-lnb ul.lnb li .ico-chat.active::before{content:"\eb50";}
.pc .app-lnb ul.lnb li .ico-mail.active::before{content:"\eef3"}
.pc .app-lnb ul.lnb li .ico-drive.active::before{content:"\F015F"}
.pc .app-lnb ul.lnb li .ico-alarm.active:before{content:"\ef91"}
.pc .app-lnb ul.lnb li .ico-orgz.active:before{content:"\F04AA"}
.pc .app-lnb ul.lnb li .ico-set.active:before{content:"\f0e3"}
.pc .app-lnb ul.lnb li .ico-demo.atvie:before{content:"\f0e1"}

.pc .app-lnb ul.lnb li > .badge{position:absolute; left:25px; top:6px; display:block; max-width:40px; font-family:'ptd', 'roboto', 'sans-serif' !important; font-size:12px; font-weight:300; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; z-index:2}


/* **************************************** *
*  header
* **************************************** */
.pc .app-header{display:flex; justify-content:space-between; padding:0 24px; align-items:center; border-bottom:1px solid #E4E4E4;  width:100%; height:50px; box-shadow: none;}
.pc .app-header ul.nav{flex:none; height:50px; display:flex; gap:24px}
.pc .app-header ul.nav li{position:relative; display:flex; justify-content: center; align-items: center; width:50px; height:50px; cursor:pointer}

.pc .app-header ul.nav li .ico-search:before{content:"\f0d1"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-header ul.nav li .ico-alarm:before{content:"\ef92"; font-family: "remixicon";  font-size:22px; color:#8095A8}
.pc .app-header ul.nav li > .badge{position:absolute; left:25px; top:6px; display:block; max-width:40px; font-family:'ptd', 'roboto', 'sans-serif' !important; font-size:12px; font-weight:300; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; z-index:2}

.pc .app-header ul.nav li.account{width:auto}
.pc .app-header ul.nav li .profile-img{display:flex; justify-content:center; align-items: center; border-radius: 50%; overflow:hidden; width: 22px; height: 22px; border: 1px solid #0000000D; background:#CDD4D9}
.pc .app-header ul.nav li .profile-img img{object-fit: cover; width:100%; height:100%}
.pc .app-header ul.nav li .profile-img.nodata{min-height: 22px;}
.pc .app-header ul.nav li .profile-img.nodata::before{content:"\f264"; font-family:"remixicon"; font-size:16px; color:#fff; display:block;}
.pc .app-header ul.nav li .account-info{letter-spacing: -0.5px; color:#222; margin-left: 8px; font-size: 14px; font-weight: 300;}


/* **************************************** *
*  home
* **************************************** */
.pc .home-wrap{position:relative; background:#F3F6FA; width:100%; height:100%; padding:40px; overflow:hidden}
.pc .home-cont{background:#fff; width:100%; height:100%; border-radius: 14px; border:1px solid #ECECEC;; overflow:auto}
.pc .home-cont .board-wrap{display:flex; gap:32px 12px; flex-wrap: wrap; padding:30px}
.pc .home-cont .board-wrap .board{flex:1 auto; width:49%}
.pc .home-cont .board .tit-area{margin-bottom: 8px;}
.pc .home-cont .board .tit-area .tit{font-size: 20px;}
.pc .home-cont .board .post-item{height:300px; border:1px solid #F3F6FA;}
.pc .home-cont .board .post-item ul li{display:flex; justify-content: space-between; gap:32px; height:50px; padding:16px 24px; letter-spacing: -0.5px;}
.pc .home-cont .board .post-item ul li .post-tit{flex:1; color:#222}
.pc .home-cont .board .post-item ul li .post-tit .Label-color{margin-right:12px;}
.pc .home-cont .board .post-item ul li .account{text-align: right; color:#aaa; font-size: 14px;}
.pc .home-cont .board .post-item ul li .post-date{text-align: right; color:#aaa; font-size: 14px;}
.pc .home-cont .bookmark-wrap{gap:32px 12px; flex-wrap: wrap; padding:0px 30px}
.pc .home-cont .bookmark-wrap .tit-area{margin-bottom: 8px; width:100%;}
.pc .home-cont .bookmark-wrap .tit-area .tit{font-size: 20px;}
.pc .home-cont .bookmark-wrap .bookmark {display:flex; gap:14px}  
.pc .home-cont .bookmark-wrap .bookmark li{background:red; display:inline-flex; align-items:center; border-radius: 8px; width:12%; height:100px; flex:0 auto; padding:0px 24px}
.pc .home-cont .bookmark-wrap .bookmark li i{font-size:28px; margin-right: 12px; opacity:0.8}
.pc .home-cont .bookmark-wrap .bookmark li span.tit{font-size: 16px; letter-spacing: -0.5px; font-weight: 300;}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(1){background:#5629EE; color:#fff }
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(2){background:#EBE6FB; color:#5F21C7 }
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(3){background:#DFF5FF; color:#26A2DC}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(4){background:#4C90B9; color:#fff}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(5){background:#3E4BFF; color:#fff}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(6){background:#CAE5B7; color:#5F7A56}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(7){background:#FF8379; color:#fff}
.pc .home-cont .bookmark-wrap .bookmark li:nth-child(8){background:#F9EAA0; color:#C27B00}