@charset "utf-8";


/* 열린공간 - 01.학술대회 사진*/
/* =========================
   학술대회 사진 갤러리
========================= */
.gallery{
  width:100%;
}

.year-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.year-tabs button{
  border:1px solid #d9d9d9;
  background:#fff;
  color:#333;
  padding:10px 16px;
  font-size:15px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
}

.year-tabs button.active{
  background:#1b1464;
  border-color:#1b1464;
  color:#fff;
}

.year-heading{
  margin:8px 0 16px;
  font-size:24px;
  font-weight:700;
  color:#222;
  line-height:1.4;
}

.gallery-main{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:520px;
  border:1px solid #e5e5e5;
  background:#fafafa;
  overflow:hidden;
}

.gallery-main img{
  display:block;
  max-width:100%;
  max-height:500px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.gallery-main .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:24px;
  line-height:48px;
  text-align:center;
  cursor:pointer;
}

.gallery-main .prev{
  left:16px;
}

.gallery-main .next{
  right:16px;
}

.gallery-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.gallery-thumbs img{
  width:110px;
  height:78px;
  object-fit:cover;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}

.gallery-thumbs img.active{
  border-color:#1b1464;
}


/* =========================
   태블릿
========================= */
@media (max-width: 1024px){
  .gallery-main{
    min-height:420px;
  }

  .gallery-main img{
    max-height:400px;
  }

  .year-heading{
    font-size:21px;
  }
}

/* =========================
   PC에서만 가운데 정렬
========================= */
@media (min-width: 769px){
  .year-tabs{
    justify-content:center;
  }

  .year-heading{
    text-align:center;
  }

  .gallery-thumbs{
    justify-content:center;
    margin-top:16px;
  }
}


/* =========================
   모바일
========================= */
@media (max-width: 768px){
  .page-title{
    font-size:24px;
    line-height:1.3;
    margin-bottom:16px;
  }

  .gallery{
    width:100%;
  }

  .year-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-bottom:8px;
    margin-bottom:12px;
    -webkit-overflow-scrolling:touch;
  }

  .year-tabs button{
    flex:0 0 auto;
    padding:9px 14px;
    font-size:13px;
    border-radius:999px;
    white-space:nowrap;
  }

  .year-tabs::-webkit-scrollbar{
    height:6px;
  }

  .year-tabs::-webkit-scrollbar-track{
    background:#efefef;
    border-radius:999px;
  }

  .year-tabs::-webkit-scrollbar-thumb{
    background:#bcbcbc;
    border-radius:999px;
  }

  .year-heading{
    margin:4px 0 12px;
    font-size:18px;
    line-height:1.4;
  }

  .gallery-main{
    min-height:auto;
    padding:12px;
  }

  .gallery-main img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
  }

  .gallery-main .nav{
    width:38px;
    height:38px;
    font-size:18px;
    line-height:38px;
    background:rgba(0,0,0,.38);
  }

  .gallery-main .prev{
    left:8px;
  }

  .gallery-main .next{
    right:8px;
  }

  .gallery-thumbs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    margin-top:12px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }

  .gallery-thumbs img{
    flex:0 0 auto;
    width:88px;
    height:62px;
  }

  .gallery-thumbs::-webkit-scrollbar{
    height:6px;
  }

  .gallery-thumbs::-webkit-scrollbar-track{
    background:#efefef;
    border-radius:999px;
  }

  .gallery-thumbs::-webkit-scrollbar-thumb{
    background:#bcbcbc;
    border-radius:999px;
  }
}


/* =========================
   작은 모바일
========================= */
@media (max-width: 480px){
  .year-tabs button{
    font-size:12px;
    padding:8px 12px;
  }

  .year-heading{
    font-size:16px;
  }

  .gallery-main{
    padding:10px;
  }

  .gallery-thumbs img{
    width:74px;
    height:54px;
  }

  .gallery-main .nav{
    width:34px;
    height:34px;
    font-size:16px;
    line-height:34px;
  }
}