@charset "UTF-8";

/* 메인서브공통사용*/
.cal {background:#fff;}
.cal .tit {font-size:23rem;}
.cal .align {display:flex; align-items:center; justify-content:space-between;}
.cal .legend {display:flex; margin-top:-25rem;}
.cal .legend li {display:flex; align-items:center; margin-left:20rem;}
.cal .legend li:before {content:''; width:20rem; height:20rem; margin-right:10rem; border-radius:3rem;}
.cal .legend li.ava:before {background:#f7f7f7; border:1px dashed #cfcfcf;}
.cal .legend li.unava:before {background:#084636; border:1px dashed #084636;}
.cal .select {margin:0 -5rem;}
.cal .select .month {text-align:center; display:block; font-size:28rem; margin-bottom:13rem;}
.cal .select .tbl tr {display:flex; flex-wrap:wrap;}
.cal .select .tbl td,
.cal .select .tbl th {width:14.28%; padding:5rem;}
.cal .select .tbl thead th {font-weight:600;}
.cal .select .tbl thead th.sun {color:#831d1d;}
.cal .select .tbl thead th.sat {color:#2942dc;}
.cal .select .tbl tbody td span,
.cal .select .tbl tbody td a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; text-align:center; font-weight:600; font-size:20rem; color:#a6a6a6; background:#f7f7f7; border:1px dashed #cfcfcf; border-radius:var(--border-radius-6rem); height:70rem;}
.cal .select .tbl tbody td a.ava {background:#fff; color:#323232;}
.cal .select .tbl tbody td a.on {background:#084636; border:1px solid #084636; color:#fff; font-size:21rem;}
.cal .select .tbl tbody td span b.closed {display:block; font-size:14rem;}
@media all and (max-width:1240px){
  .cal .select {margin:0 -3rem;}
  .cal .select .month {margin-bottom:0;}
  .cal .select .tbl td,
  .cal .select .tbl th {padding:3rem;}
  .cal .select .tbl thead th {margin:20rem 0 15rem}
}
@media all and (max-width:768px){
  .cal .legend li.ava:before {background:#e0dbce; border:0;}
  .cal .legend li.unava:before {border:0;}
  .cal .select {margin:0;}
  .cal .select .tbl td,
  .cal .select .tbl th {padding:0;}
  .cal .select .tbl tbody td span,
  .cal .select .tbl tbody td a {font-size:17rem; border-radius:0; border:0; background:#e0dbce; color:#878171;}
  .cal .select .tbl tbody td a.on {font-size:18rem;}
  .cal .select .tbl tbody td span b.closed {display:none;}
}
@media all and (max-width:599px){
  .cal .legend  {position:absolute; bottom:0; right:20rem;}
  .cal .legend li:before {width:10rem; height:10rem;}
  .cal .select .tbl tbody td span,
  .cal .select .tbl tbody td a {height:60rem}
}
@media all and (max-width:321px){
  .cal .select .month {margin-bottom:20rem;}
  .cal .select .tbl {display:flex;}
  .cal .select .tbl tr {flex-direction:column;}
  .cal .select .tbl td,
  .cal .select .tbl th {width:auto; margin:0 !important; height:60rem; line-height:60rem;}
  .cal .select .tbl thead {width:33%;}
  .cal .select .tbl thead th {background:#f8f4ea;}
  .cal .select .tbl tbody {display:flex; width:calc(100% - 33%)}
  .cal .select .tbl tbody tr {width:50%;}
  .cal .select .tbl tbody td span,
  .cal .select .tbl tbody td a {height:auto;}
}