[id*="custom-html"]{padding:0 !important;}
.text-bold{font-weight: 500;}
.text-show{display: block !important;}
.text-light{color: #fff;}
.text-blue{color: #00b2ff;}
.text-004fee{color: #004fee;}
.text-002855{color: #002855;}
.text-note{font-size: 15px;}
.bg-light-blue{background: #e5f7ff;}
.bg-004fee{background: #ccdcfc;}
.bg-002855{background: #ccd4dd;}
.bg-blue{background: #00b2ff}
.bg-white{background: #fff;}
.break-line{display: block;}
.blue-line {border-top:1px solid #00b2ff; width: 100%;}
.small-text{font-size: 15px !important;}
.desktop-block{display: block;}
.mobile-block{display: none;}
.zyx-paragraph--top-hero{position: relative; padding: 0 !important;}
.zyx-paragraph--top-hero .row {height: 500px; align-items: center;}
#report-section .btn.color-adjusted {background-color: #fff !important; border-color: #fff !important; color: #003eab !important;}
#report-section .border-adjusted {color: #fff !important;}
#report-section .border-adjusted:hover {background-color: transparent!important;}
#report-section .border-adjusted::before {background-color: #fff !important;}

.swiper {width: 100%; height: 140px;}
.swiper-slide {text-align: center; font-size: 18px; display: flex !important; justify-content: center; align-items: center; height: auto; overflow: hidden;}
.swiper-slide img {display: block; width: 170px; max-width: 100%; height: auto;}
.swiper-pagination {position: relative !important; margin: 0 auto; padding-top: 1rem;}
.swiper-pagination-bullets.swiper-pagination-horizontal {top: var(--swiper-pagination-top,10px);}

.swiper-slide .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 140px; width: 170px; opacity: 0; transition: .5s ease; background-color:#00b2ff;}
.swiper-slide:hover .overlay {opacity: 1;}
.swiper-slide .text a{color: #fff;}
.swiper-slide .text a:before {background-color: transparent !important;}
.swiper-slide .text {font-size:18px; line-height: 1.2rem; color: #fff; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}


#report-section h2{display: none;}
#report-section .col-md-5 {width: 80%;}

/* 基礎頁面排版 */
.gallery-item {cursor: pointer; text-align: center;}
.gallery-item img {width: 100%;}
.sdg-box{position: relative; width:150px; height:auto; margin: 0 0.5rem 1rem;}
.sdg-box .cover{position:absolute; top:0; width:100%; height:100%;}
.sdg-box .icon{position:absolute; top:50%; transform:translate(0, -50%); left:0; right:0; margin:0 auto; text-align:center;}
.sdg-box .icon i{opacity:0; transition: all 0.35s ease-in-out;}
.sdg-box:hover{cursor:pointer;}
.sdg-box:hover .cover{background:rgba(0,0,0,0.8);}
.sdg-box:hover .icon i{opacity:1; background:#fff; color:#000; font-size:2rem; padding:15px; border-radius:50%; text-align:center;}

/* Lightbox 遮罩 */
.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999;
  justify-content: center;
  align-items: center; /* 垂直置中 */
}

.lightbox-overlay {
  position: absolute;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px); /* 增加點高級感的毛玻璃效果 */
}

/* 資訊字卡本體 */
.lightbox-card {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 600px; /* 電腦端寬度 */
  height: auto;     /* 高度根據內容自動彈性 */
  max-height: 80vh; /* 最高不超過螢幕的 80% */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow-y: auto; /* 內容過多時顯示捲軸 */
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
}

.info-body { color: #444; line-height: 1.8; padding: 20px 30px; font-size: 16px; }
.info-body h5 { color: #000; margin-top: 0 !important; }

.close-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none;
  cursor: pointer; color: #000;
}

.close-btn i{font-size: 2rem;}

/* 進場動畫 */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* RWD 手機版微調 */
@media (max-width: 600px) {
  .lightbox-card {
    max-height: 85vh;
  }
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}


@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 500px) {
    .desktop-block{display: none;}
    .mobile-block{display: block;}
	  .top-header-canvas .banner-title{width:80%; margin: 0 auto; left:0; right:0;}
    #report-section .col-md-5 {width: 90%;}
    .info-body {padding: 20px;}
    .info-body h5{padding-right: 20px; text-align: center;}
    .sdg-box{margin:5px;}
}