@layer reset, var, header, footer, contents-header;

@import url('config.css');
@import url('article.css') layer(contents-header);

.page-wrapper {
  overflow: hidden;  
} /* end of .page-wrapper */

.index {
  width: 100%;
  height: 18.75rem;
  background-image: url('../css/img/olympic.jpg');
  background-position: center;
  background-size: cover;
  padding-top: 17.275rem;
} /* end of .index */

.index .spotNav {
  width: 17rem;
  background-color: #000;
  padding: 0 10px;
} /* end of .index .spotNav */

.index .spotNav span {
  color: var(--bg-color5);
  font-weight: 600;
  font-size: var(--font-size5);
} /* end of .index .spotNav span */

.sponsor {
  padding-top: 3.75rem;
  margin-bottom: 12rem;
} /* end of .terms */ 

.sponsor .container .member {
  margin-top: 5.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
} /* end of .sponsor .container .member */

.sponsor .container .member .imgBox {
  border: 2px solid #ddd;
  padding: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
} /* end of .sponsor .container .member .imgBox */

/*========== 후원내역 영역 ==========*/ 
.sponsor .container .list {
  margin-top: 8rem;
} /* end of .sponsor .container .list */
.sponsor .container .list table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
} /* end of main table */

:is(.sponsor .container .list) :is(table) :is(td, th)  {
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: 0.8rem;
} /* end of :is(main) :is(table) :is(td, th)  */

.sponsor .container .list table th {
  background-color: #ddd;
} /* end of main table th */

.sponsor .container .list table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
} /* end of main table tbody tr:nth-child(even) */ 

.sponsor .container .list .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0;
} /* end of main  */

.sponsor .container .list .info .right .downSide {
  display: flex;
  justify-content: flex-end;
  align-items: center;
} /* end of main . */

.sponsor .container .list .info .right .pagenation a{
   display: inline-block;
   text-decoration: none;
   color: var(--bg-color6);
   padding: 0.5rem 0.8rem;
   border: thin solid #d4d4d4;
   transition: all 0.3s;
   font-size: 0.8rem;
   font-weight: bold;
   margin: 0 0.1rem;
}
 
.sponsor .container .list .info .right .pagenation a.active{
   background-color: var(--bg-color6);
   color: #fff;
}

.sponsor .container .list .info .right .page-numbers{
   display: inline-block;
}

.sponsor .container .list .info .right .page-numbers a{
  margin: 0 0.1rem;
} /* end of main .page-numbers */

/* ========== Responsive ========== */
/* 테블릿 가로 */
@media (max-width: 992px) {
  .container {
    padding: 0 0.9375rem;
  } /* end of .container */
}

/* 테블릿 세로 */ 
@media (max-width: 768px) {
  .sponsor .container .list table thead {
    display: none;
  } /* end of main table thead */

  :is(.sponsor .container .list) :is(table) :is(tr, td) {
    display: block;
    width: 100%;
  } /* end of :is(main) :is(table) :is(tr, td) */

  .sponsor .container .list table tr {
    margin-bottom: 0.9rem;
  } /* end of main table tr */

  .sponsor .container .list table td {
    text-align: right;
    padding-left: 50%;
    text-align: right;
    position: relative;
  } /* end of main table td */

  .sponsor .container .list table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 0.9rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: left;
  } /* end of main table td::before */
}

/* 모바일 */ 
@media (max-width: 575px){ 
  .sponsor .container .list .info {
    display: flex;
    justify-content: flex-end;
  } /* end of main .info */

  .sponsor .container .list .info .left {
    display: none;
  } /* end of main .info p */

  .sponsor .container .list .info .right .downSide {
    justify-content: flex-end;
  } /* end of main info .right .downSide */
}