/* login */
#login { display: flex; flex-direction: column; min-height: 100vh; } 

.login { display: flex; align-items: center; justify-content: center; flex:1; } 
.login .login_wrap { display: flex; gap:6.25rem; flex-direction: column; padding: 4.375rem 6.25rem; max-width:620px; background: #fff; border-radius:18px; } 
.login .login_area { text-align: center; } 
.login .login_area h1 { margin: 1.25rem 0 .625rem 0; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; } 
.login .login_area p { font-size: 1.125rem; color:#9FA0A0; } 
.login .login_area .login_btn { display: flex; align-items: center; justify-content: center; margin-top: 3.125rem; height: 5.25rem; background: var(--primary); font-size: 1.25rem; font-weight: 700; color: #fff; border-radius: 18px; } 
.login .login_area .login_btn:after { display: inline-flex; margin-left: 2.25rem; width: 1.6875rem; height: 1.375rem; background: url("../../img/ico_login.svg") no-repeat center/cover; content: ''; } 

.login .sync_area {display: flex;flex-direction: column;} 
.login .sync_area .btn_area{display: flex;justify-content: flex-end;gap:5px;margin-bottom: .9375rem;}
.login .sync_area .btn_sync { display: flex; gap:0.625rem; align-items: center; justify-content: center; padding:0.875rem 1.5rem; background: var(--primary-dark); font-weight: 600; color:#fff; color: #FFF; border-radius: 18px; } 
.login .sync_area .btn_sync::after { display: block; width:1.125rem; height:1.125rem; background:url("../../img/ico_sync.svg") no-repeat center/cover; content: ""; } 
.login .sync_area .btn_gray{background: #595959;}
.login .sync_area p { font-weight: 500; line-height:160%; color: #595959; word-break: keep-all;text-align: right; } 

@media screen and (max-width:640px) { 
 .login { padding-right:16px; padding-left:16px; } 
 .login .login_wrap { gap:3rem; padding:3rem 2.25rem; } 
 .login .login_area h1 {font-size: 1.75rem; font-weight: 600;} 
 .login .login_area .login_btn{height: 60px;}
}






/* 공통 */
.main > article.card { margin-top:12px; } 
.main > article.card:first-of-type { margin-top:0; } 

.main .paging { padding-bottom:46px; } 

.main_title { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.25rem; font-weight: bold; } 
.main_title span { display: flex; align-items: center; justify-content: center; margin-right: 10px; width: 50px; height: 50px; background: var(--primary); border-radius: 18px; } 
#evaluator .main_title span { background: var(--evaluator); } 
#managed .main_title span { background:#222; } 



/* 나의 제안 현황 */
.main_offer .offer_area { display: flex; gap:10px; justify-content: space-between; } 
.main_offer .offer_area .item { display: flex; justify-content: space-between; flex-direction: column; padding: 30px 20px; border-radius: 18px; } 
.main_offer .offer_area .item.all { width:240px; background: var(--primary-light); color: #fff; } 
.main_offer .offer_area .item:not(.all) { flex:1; background: #F5F5F5; } 
.main_offer .offer_area .item h4 { display: flex; gap:8px; align-items: center; margin-bottom: 2.5rem; position: relative; font-size: 1rem; } 
.main_offer .offer_area .item h4::before { display: block; flex-shrink: 0; width: 24px; height: 24px; content: ''; } 
.main_offer .offer_area .item.all h4:before { background: url("../../img/ico_offter_cont01.svg") no-repeat; } 
.main_offer .offer_area .item.received h4:before { background: url("../../img/ico_offter_cont02.svg") no-repeat; } 
.main_offer .offer_area .item.review h4:before { background: url("../../img/ico_offter_cont03.svg") no-repeat; } 
.main_offer .offer_area .item.rejected h4:before { background: url("../../img/ico_offter_cont04.svg") no-repeat; } 
.main_offer .offer_area .item.completed h4:before { background: url("../../img/ico_offter_cont05.svg") no-repeat; } 
.main_offer .offer_area .item.pending h4:before { background: url("../../img/ico_offter_cont06.svg") no-repeat; } 

#managed .main_offer .offer_area .item:not(.all) h4:before { display: none; } 
.main_offer .offer_area .count { font-size: 1rem; text-align: right; } 
.main_offer .offer_area .count .num { font-weight: 600; } 
.main_offer .offer_area .item .count .num { font-size: 1.8rem; } 
.main_offer .offer_area .item.all .count .num { font-size: 3rem; } 

#evaluator .main_offer .offer_area .item.all { background: var(--evaluator-light); color: #fff; } 
#managed .main_offer .offer_area .item.all { background: #464646; color: #fff; } 

@media screen and (max-width:1024px){ 
  .main_offer .offer_area{display: grid;grid-template-columns: repeat(2, 1fr);}
  .main_offer .offer_area .item.all {grid-column: 1 / -1;width: 100%;}
}

@media screen and (max-width:768px){ 
.main_offer .offer_area .item{padding: 20px 30px;}
.main_offer .offer_area .item h4::before{width:20px;height: 20px;background-size: 20px !important;}
.main_offer .offer_area .item.all .count .num{font-size: 2.125rem;}
.main_offer .offer_area .item .count .num{font-size: 1.75rem;}

}


/* 빠른 작업*/
.main_row { display: flex; gap: 12px; margin: 12px 0; } 
.main_row .card_qucik { width: 59.5%; } 
.main_row .quick_area { display: grid;; gap: 12px; height: calc(100% - 50px - 1rem); grid-template-columns: repeat(2, 1fr); } 
.main_row .quick_area .item { padding: 30px 30px 45px 30px; border: 1px solid #e5e5e5; background: url("../../img/ico_link.svg") no-repeat right 30px bottom 20px; transition: all 0.5s; border-radius: 18px; } 
.main_row .quick_area .item .title { margin-bottom: .625rem; font-size: 1.25rem; font-weight: 500; } 
.main_row .quick_area .item .desc { font-size: .9375rem; font-weight: 500; line-height: 130%; color: var(--gray-450); } 
.main_row .quick_area .item:hover { border-color:#9FA0A0 } 

/* 나의 성과 요약 */
.card_rundown { flex:1 } 
.card_rundown .rundown_area .score_item { display: flex; align-items: center; justify-content: space-between; } 
.card_rundown .rundown_area .score_item > * { width: 50%; } 
.card_rundown .rundown_area .score_item .score_title { display: flex; align-items: center; justify-content: center; padding: 1.875rem 1.25rem; background: #f5f5f5; border-radius: 18px; } 
.card_rundown .rundown_area .score_item .score_title .ico { margin-right: 10px; width: 50px; height: 50px; background: url("../../img/ico_score.svg") no-repeat center #fff; border-radius: 10px; } 
.card_rundown .rundown_area .score_item .score_title .txt { font-weight: 500; color: var(--gray-900); } 
.card_rundown .rundown_area .score_item .count { font-size: 1.25rem; color: var(--gray-700); text-align: right; } 
.card_rundown .rundown_area .score_item .count .num { font-size: 3.75rem; font-weight: bold; color: var(--primary); } 
.card_rundown .rundown_area .score_cont .item { display: flex; justify-content: space-between; padding: 2.125rem 1.5rem; border: 1px solid #e5e5e5; border-radius: 18px; } 
.card_rundown .rundown_area .score_cont .item:first-child { margin: 12px 0; } 
.card_rundown .rundown_area .score_cont .title { font-weight: 500; color: #536CA7; } 
.card_rundown .rundown_area .score_cont .count { font-weight: 500; color: var(--gray-550); } 
.card_rundown .rundown_area .score_cont .count .num { font-size: 1.875rem; font-weight: bold; color: var(--gray-900); } 

@media screen and (max-width:1024px){ 
  .main_row .card_qucik{width:50%}
  .main_row .quick_area .item .desc {word-break: keep-all;}
  .main_row .quick_area .item .desc br{display: none;}
}

@media screen and (max-width:768px){ 
.main_row{flex-direction: column;}
.main_row .card_qucik{width:100%}
.card_rundown .rundown_area .score_item .score_title{padding: 10px 30px;}
.card_rundown .rundown_area .score_item .count .num{font-size: 3.125rem;}
}

@media screen and (max-width:480px){ 
  .login .sync_area .btn_area{flex-direction: column;}
  .login .sync_area p{text-align: center;font-size: .9375rem;}
.main_row .quick_area{grid-template-columns: repeat(1, 1fr);}
.main_row .quick_area .item{padding: 20px 60px 20px 30px;background-position: right 30px center;}
.card_rundown .rundown_area .score_item .score_title{padding: 10px 20px;}

}

/* 공지사항 */
.main_notice { display:flex; align-items: flex-start; justify-content: space-between; position: relative; } 
.main_notice .main_title { width: calc(33.333% - 3.333px); } 
.main_notice .main_notice_list { display: flex; justify-content: space-between; width: 66.666%; } 
.main_notice .main_notice_list .item a { display: block; } 
.main_notice .main_notice_list .item { flex: 1; margin: 15px 0; padding: 0 1.875rem; } 
.main_notice .main_notice_list .item .title { display: -webkit-box; margin-bottom: 10px; overflow: hidden; height: calc(18px * 1.4 * 2); font-size: 18px; font-weight: 500; line-height: 140%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis } 
.main_notice .main_notice_list .item:nth-child(1) { padding-left: 0; border-right: 1px solid #e5e5e5; } 
.main_notice .main_notice_list .item:nth-child(1):only-child{border-right: 0;}
.main_notice .main_notice_list .item:last-child { padding-right: 0; } 
.main_notice .main_notice_list .item .date { font-size: 15px; font-weight: 500; color: var(--gray-450); } 
.main_notice .main_notice_list .item .title .notice_fix { margin-right: 3px; padding: .375rem .5rem; background: #80A6CF; font-size: .875rem; color:#fff; border-radius: 8px; } 
.main_notice .main_notice_list .item .notice_file { display: inline-block; width: 16px; height: 21px; background: url("../../img/ico_down.svg") no-repeat; text-indent: 999px; } 
.main_notice .notice_more { display: flex; position: absolute; bottom: 1.875rem; left: 1.875rem; font-size: .875rem; font-weight: 500; color: var(--gray-700); } 
.main_notice .notice_more:after { margin-left: 13px; width: 7px; height: 12px; background: url("../../img/ico_more.svg") no-repeat; content: ''; } 

@media screen and (max-width:768px){ 
.main_notice{flex-direction: column;}
.main_notice .main_title{width:100%}
.main_notice .main_notice_list{width:100%;flex-direction: column;gap:17px}
.main_notice .main_notice_list .item:nth-child(1){border-right: 0;border-bottom:1px solid #e5e5e5 ;padding-bottom: 17px;}
.main_notice .main_notice_list .item:nth-child(1):only-child{border-bottom: 0;padding-bottom: 0;}
.main_notice .main_notice_list .item{margin: 0;padding: 0;}
.main_notice .notice_more{bottom: auto;top: 40px;left: auto;right: 1.5rem;}
.main_notice .main_notice_list .item .title{height: auto;max-height: calc(18px * 1.4 * 2);}
}


/* ---------------------- 관리자 대쉬보드 */
.main_managed { display: flex; gap:0.75rem; align-items: center;margin-top:1.875rem;}
.main_managed ul { display: flex; align-items: center;flex:1;}
.main_managed ul.monthly_count {padding:1.125rem; border: 1px solid var(--gray-100, #E5E5E5); position: relative; border-radius: 18px; }
.main_managed ul.monthly_count:after { position: absolute; top:50%; left:50%; width:1px; height:25px; background-color:#D4D4D4;content: ""; transform: translate(-50%,-50%);}
.main_managed ul.monthly_count li { display: flex; gap:5px; align-items: center; justify-content: center;flex:1; }

.main_managed ul.monthly_count li .tit {font-weight: 500;color: #80A6CF;}
.main_managed ul.monthly_count li .count {display: flex; gap:4px; align-items: center;}
.main_managed ul.monthly_count li .count b { font-size: 26px;
font-weight: 600;line-height: 34px; /* 130.769% */ color: var(--gray-900, #1A1A1A);} 

.main_managed ul.quick_link {display: flex; gap:0.25rem; align-items: center;}
.main_managed ul.quick_link li {flex:1;}
.main_managed ul.quick_link li a {display: flex; align-items: center; justify-content: center; width:100%; height:3.125rem;font-weight: 600; color: #FFF; border-radius: 10px;}
.main_managed ul.quick_link li:first-child a {background: var(--gray-700, #4D4D4D);}
.main_managed ul.quick_link li:last-child a {background: var(--gray-800, #333);}


.main_grahp .tab_menu { gap:10px; flex-wrap: wrap;margin-bottom:16px; border-bottom:0 none;}
.main_grahp .tab_menu li { flex: unset; border:1px solid #E5E5E5;width: calc((100% - (10px * 3)) / 4); border-radius: 18px;}
.main_grahp .tab_menu li.active {border-color: transparent;}
.main_grahp .tab_menu li a {position: relative; display: flex; align-items: center; justify-content:space-between; padding-right:40px; border: 2px solid transparent; position: relative; background: var(--gray-0, #FFF); border-radius: 18px; }
.main_grahp .tab_menu li a:hover {background-color: transparent; color: inherit;}
.main_grahp .tab_menu li a .tit { font-weight: 500;color: var(--gray-900, #1A1A1A); font-weight: 500; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; display: block;}
.main_grahp .tab_menu li a .count {flex-shrink: 0; font-weight: 500;color: var(--gray-550, #737373);}
.main_grahp .tab_menu li a .count b {font-size: 20px; font-weight: 600;color: var(--gray-900, #1A1A1A);}
.main_grahp .tab_menu li.active a {border-color:var(--primary); background-color: #fff; color:#000; }
.main_grahp .tab_menu li.active a .count b { font-weight: 600;color: var(--primary, #E4096D);}

.main_grahp .tab_menu li a::after {content: ""; width:10px; height:8px; position: absolute; top:50%; right:16px; transform: translateY(-50%); background: url("../../img/ico_polygon.svg") no-repeat center/contain;}
.main_grahp .tab_item {border-top:1px solid #E5E5E5; padding-top:12px;}
.main_grahp .tab_item h4 {margin-bottom:24px; display: flex; align-items: center; gap:10px; color: var(--primary, #E4096D);font-weight: 500;}
.main_grahp .tab_item h4::before {content: ""; display: block; width:20px; height:20px; background:url("../../img/ico_polygon2.svg") no-repeat center/cover;}

.main_grahp .graph_area {width:100%; height:240px;}

@media screen and (max-width:1024px) {
.main_grahp .tab_menu li a{flex-direction: column;gap:10px}
}

@media screen and (max-width:768px) {
  .main_managed{flex-direction: column;margin-top: 1.25rem;}
  .main_managed ul.monthly_count{width:100%}
  .main_managed ul.quick_link{width:100%}
  .main_grahp .tab_menu{flex-wrap: nowrap;width:100%;overflow-x: auto;gap:5px}
  .main_grahp .tab_menu li{width: auto}
  .main_grahp .tab_menu li a::after{display: none;}
  .main_grahp .tab_menu li a{padding-right: 10px;padding: 10px 15px;min-width: 70px;}
  .main_grahp .tab_menu li a .count b{font-size: 1.125rem;}
  .main_grahp .tab_menu li a .count{font-size: .9375rem;}
  
}

@media screen and (max-width:480px) {
.main_managed ul.monthly_count li{flex-direction: column;}
}