@charset "utf-8";

/* 연세캘린더 */
.wrap-cal .title {display: flex; justify-content: space-between; align-items: center;}
.wrap-cal .title strong {font-family: pp; font-size: 32px; line-height: 1.1; color: #323131;}
.wrap-cal .title .more {position: relative; display: none; align-items: center; font-family: pps; font-size: 15px; letter-spacing: 0; color: #1163FF;}
.wrap-cal .title .on .more {display: flex;}
.wrap-cal .title .more::after {content: ''; display: block; width: 8px; height: 8px; margin-left: 7px; background: url('../images/btn-news-more.png') no-repeat center; transition: transform .35s;}
.wrap-cal .title .more:hover::after {transform: rotate(270deg);}
.wrap-cal .title .more::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #1163FF;}

.wrap-cal .list {min-height: 420px; margin-top: 30px; padding: 50px; background: #e9f2fc; border-radius: 10px;}
.wrap-cal .top {position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; padding-bottom: 28px; border-bottom: 1px solid #b8c3ce;}
.wrap-cal .top::after {content: ''; position: absolute; left: 0; bottom: -3px; width: 196px; height: 3px; background: #023bcf;}
.wrap-cal .top .month {display: flex; align-items: center}
.wrap-cal .top .month .prev,
.wrap-cal .top .month .next {display: block; width: 14px; height: 23px; text-indent: -99999px;}
.wrap-cal .top .month .prev {background: url('../images/btn-cal-prev.png') no-repeat right center;}
.wrap-cal .top .month .prev:hover {background-position: right center;}
.wrap-cal .top .month .next {background: url('../images/btn-cal-next.png') no-repeat right center;}
.wrap-cal .top .month .next:hover {background-position: right center;}
.wrap-cal .top .month .now {padding: 0 17px; font-family: pp; font-size: 35px; line-height: 1; color: #012a64;}
.wrap-cal .top .tab ul {display: flex;}
.wrap-cal .top .tab button {display: flex; justify-content: center; height: 35px; margin: 0 5px; padding: 0 15px; font-family: ppr; font-size: 19px; line-height: 33px; color: #333333;}
.wrap-cal .top .tab button:hover,
.wrap-cal .top .tab .on button {background: #1163FF; border-radius: 100px; color: #fff;}

.wrap-cal .detail {overflow: auto; max-height: 221px;}
.wrap-cal .detail::-webkit-scrollbar {width: 10px; height: 10px;}
.wrap-cal .detail::-webkit-scrollbar-thumb {background: #bac2ca; border: 2px solid #f1f1f1; border-radius: 10px;}
.wrap-cal .detail::-webkit-scrollbar-track {background-color: transparent;}
.wrap-cal .detail li {display: flex; width: 100%; padding-bottom: 12px;}
.wrap-cal .detail > ul > li {padding-bottom: 0;}
.wrap-cal .detail > ul > li.on {padding-bottom: 6px;}
.wrap-cal .detail li:last-child {padding-bottom: 0;}
.wrap-cal .detail .date {flex-shrink: 0; width: 175px; font-family: pps; font-size: 18px; color: #666666;}
.wrap-cal .detail p {overflow: hidden; flex-grow: 1; padding-right: 15px; font-family: ppr; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; color: #333333;}
.wrap-cal .detail .no-data {text-align: center;}
.wrap-cal .detail li .more {display: none;}
.wrap-cal .detail .event {display: none; width: 100%;}
.wrap-cal .detail li.on .event {display: block;}

@media screen and (max-width: 1450px) {
  .wrap-cal .title strong {font-size: 25px;}
  .wrap-cal .title .more {font-size: 13px;}
}

@media screen and (max-width: 1100px) {
  .wrap-cal .title strong {font-size: 20px;}
  .wrap-cal .title .more {font-size: 12px;}

  .wrap-cal .list {min-height: 283px; margin-top: 20px; padding: 30px;}
  .wrap-cal .top {margin-bottom: 19px; padding-bottom: 19px;}
  .wrap-cal .top::after {width: 153px;}
  .wrap-cal .top .month .now {padding: 0 10px; font-size: 24px;}
  .wrap-cal .top .tab button {margin: 0 2px; padding: 0 10px; font-size: 15px;}

  .wrap-cal .detail {max-height: 173px;}
  .wrap-cal .detail .date {width: 150px; font-size: 15px;}
  .wrap-cal .detail li {padding-bottom: 10px;}
  .wrap-cal .detail p {font-size: 16px;}
}

@media screen and (max-width: 870px) {
  .wrap-cal .list {padding: 20px;}
  .wrap-cal .top .month .now {font-size: 20px;}
  .wrap-cal .detail {max-height: 172px;}
  .wrap-cal .detail li {padding-bottom: 10px;}
}

@media screen and (max-width: 650px) {
  .wrap-cal .title strong {font-size: 30px;}
  .wrap-cal .title .more {font-size: 17px;}
  .wrap-cal .list {padding: 30px;}
  .wrap-cal .top {flex-direction: column; align-items: center;}
  .wrap-cal .top::after {display: none; width: 113px;}
  .wrap-cal .top .month {margin-bottom: 20px;}
  .wrap-cal .top .month .now {padding: 0  8px; font-size: 35px;}
  .wrap-cal .top .tab button {padding: 0 15px; font-size: 18px;}
  .wrap-cal .detail {height: 168px; max-height: none;}
  .wrap-cal .detail .date {width: 160px; font-size: 18px;}
  .wrap-cal .detail p {font-size: 18px;}
  .wrap-cal .detail li {flex-direction: column; padding-bottom: 9px;}
  .wrap-cal .detail #recentSchdul28 li,
  .wrap-cal .detail #recentSchdul26 li {flex-direction: row;}
}