
/* Hero */
#mainVisual {position:relative; margin-top:100px;}
.mainSwiper {width:100%; height:100vh; max-height:600px; overflow:hidden;}
.mainSwiper .swiper-wrapper{height:100%;}
.mainSwiper .swiper-slide {width: 100%; background-size:cover; background-position:center; position:relative;}

.slide01 {background-image: url(../../images/thema/main/slide01.png);}
.slide02 {background-image: url(../../images/thema/main/slide02.png);}

.mainSwiper .slide-text {position:absolute; top:50%; right: 15%; transform:translateY(-50%); width: 700px; max-width:100%; text-align: left;}
.mainSwiper .slide-text h2 {font-size: 2.5rem; font-weight: 800; color: #333; line-height:1.4;}
.mainSwiper .slide-text h2 strong {font-weight: 800;}
.mainSwiper .slide-text p {margin-top:1rem; font-size:1.1rem;}

.mainSwiper .slide-text .orange {color: #FFA319;}
.mainSwiper .slide-text .sky {color: #30b7e0;}

.swiper-button-next, .swiper-button-prev {width:40px; height:40px; background:rgba(0,0,0,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: .3s ease; margin: 0 10px;}

.swiper-button-next::after, .swiper-button-prev::after {font-size:20px; color:#fff;}
.swiper-button-next:hover, .swiper-button-prev:hover {background: rgba(0,0,0,.5);}

/*sec1*/
.card-frame {border:1px solid #ddd; border-radius: 20px; padding: 35px;}
.card-grid .col-6 {display:flex; justify-content:center;}
.card-grid .col-6:nth-child(even){padding-left:20px}
.card-grid .col-6:nth-child(-n+2){margin-bottom:20px}

.card-item {width:290px; height:370px; background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column;}
.card-item img {width:100%; height:290px; object-fit:cover; border-radius: 20px; border: 1px solid #ddd;}

.card-item p {flex:1; font-size: 1rem; margin: 1.75rem 0 0; font-weight: 500; text-align: left; color: #555; padding-left: 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.4; max-height:calc(1.4em * 2);}

/* Buttons */
.btn-more {width: 50px; height: 50px; background: #eee; color: #555; font-weight: 500; border-radius: 50%; transition: all 0.3s; font-size: 24px; display: flex; justify-content: center; align-items: center;}
.btn-more:hover {background: #bbb;}

/* Section */
.section-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;}
.section-title {font-size: 2rem; font-weight: 800; margin: 0;}
.content-section {padding: 1rem 0;}
.bg-light-blue {background: #F2FAFF;}

/* Notice/List */
.bg-light-blue{background:#eaf4fb}
.board-card{border:1px solid #ddd;border-radius:20px;background:#fff;padding:35px;height:270px}

.notice-list {margin:0}
.notice-list .list-group-item{border:none;padding:0;margin:0}

.notice-link{display:flex;align-items:center;justify-content:space-between;width:100%; min-height: 42px;padding:6px 0;text-decoration:none;color:inherit}
.notice-title{flex:1;display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:16px;color:#222}
.notice-date{flex:0 0 auto; color:#666; font-size:1rem; font-weight:400}

.notice-list .list-group-item:first-child .notice-link{padding-top:0}

.notice-list .badge{display:inline-flex; align-items:center; justify-content:center; width: 100%; max-width: 90px; height: 30px; padding:0 10px;border-radius:999px;font-size:.95rem;line-height:1;margin-right:10px;flex-shrink:0}
.badge-pink{background:#FFEBF3;color:#D8427C}
.badge-blue{background:#E9F3FF;color:#196ECC}
.badge-orange{background:#FFF2DF;color:#FF7700}

.no-data {width: 100%; display: flex; text-align: center; align-items: center; justify-content: center; border: none;}
.no-data p {margin-bottom: 0;}
.no-data.card {height: 390px;}
.no-data.board {height: 270px;}

@media (max-width:1536px){
  .mainSwiper .slide-text {width: 500px}
}

@media (max-width:1024px){
  #mainVisual {margin-top: 80px;}
  .mainSwiper .slide-text h2 {font-size:2rem;}
  .mainSwiper .slide-text p {font-size:1rem;}

}

@media (max-width:768px){
  .content-section {padding: 1rem 20px;}
  .slide01 {background-image: url(../../images/thema/main/m_slide01.png);}
  .slide02 {background-image: url(../../images/thema/main/m_slide02.png);}

  .mainSwiper .slide-text {top: 30%; left: 10%;}
  .mainSwiper .slide-text h2 {font-size: 1.75rem;}
  .mainSwiper .slide-text p {width: 80%;}


  .section-title{font-size:1.5rem}
  .board-card{padding:20px;height:auto}

  .card-item {width: 100%;}
  .card-grid .col-6{flex:0 0 100%; max-width:100%}
  .card-grid .col-6:nth-child(even){padding-left: 0}
  .card-grid .col-6{margin-bottom: 20px}
  .card-grid .col-6:last-child {margin-bottom: 0;}

  .notice-list .list-group-item:first-child .notice-link {padding-top: 10px}
  .notice-link{padding:10px 4px}
  .notice-date{font-size:.9rem}
}

@media (max-width:576px){
  
}