.elementor-1218 .elementor-element.elementor-element-1a15bd22{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1218 .elementor-element.elementor-element-16c56076{z-index:0;text-align:center;}.elementor-1218 .elementor-element.elementor-element-16c56076 .elementor-heading-title{color:#000000;}.elementor-1218 .elementor-element.elementor-element-3718724f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1218 .elementor-element.elementor-element-416d3532 .twae-wrapper{--tw-ibx-position:1;--tw-cbx-text-align:center;--tw-lbl-big-size:22px;--tw-lbl-small-size:16px;--tw-ybx-size:75px;--tw-cbx-bottom-margin:36px;}.elementor-1218 .elementor-element.elementor-element-416d3532 .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-1218 .elementor-element.elementor-element-7caf1f6{--display:flex;--min-height:600px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.62;}.elementor-1218 .elementor-element.elementor-element-7caf1f6:not(.elementor-motion-effects-element-type-background), .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DBDBDBE8;background-image:url("https://scbcok.org/wp-content/uploads/2025/06/holycross-bg-scaled.png");background-position:center right;background-repeat:repeat;background-size:cover;}.elementor-1218 .elementor-element.elementor-element-7caf1f6::before, .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .elementor-background-video-container::before, .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .e-con-inner > .elementor-background-video-container::before, .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .elementor-background-slideshow::before, .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-1218 .elementor-element.elementor-element-32087ff{width:var( --container-widget-width, 800px );max-width:800px;--container-widget-width:800px;--container-widget-flex-grow:0;}.elementor-1218 .elementor-element.elementor-element-32087ff > .elementor-widget-container{margin:50px 50px 50px 50px;box-shadow:5px 4px 5px 2px rgba(0, 0, 0, 0.71);}.elementor-1218 .elementor-element.elementor-element-32087ff.elementor-element{--align-self:center;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-1218 .elementor-element.elementor-element-32087ff .elementor-wrapper{--video-aspect-ratio:1.77777;}@media(min-width:1025px){.elementor-1218 .elementor-element.elementor-element-7caf1f6:not(.elementor-motion-effects-element-type-background), .elementor-1218 .elementor-element.elementor-element-7caf1f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-1218 .elementor-element.elementor-element-416d3532 .twae-wrapper{--tw-lbl-big-size:20px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}@media(max-width:767px){.elementor-1218 .elementor-element.elementor-element-416d3532 .twae-wrapper{--tw-lbl-big-size:18px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}/* Start custom CSS for timeline-widget-addon, class: .elementor-element-416d3532 *//*
.timeline-animate {
  opacity: 0;
  transform: translateX(100px); // 初始在右邊 
  transition: all 0.8s ease-out;
}

.timeline-animate-left {
  transform: translateX(-100px); // 初始在左邊 
}

.timeline-visible {
  opacity: 1;
  transform: translateX(0); // 移動到主軸 
}
*//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3718724f *//* hide the arrow in mobile device*/
@media (max-width: 768px) {
  .scbc-timeline .twae-arrow {
    display: none !important;
  }
}


/* Ensure the overall label container stays within width constraints */
.scbc-timeline .twae-labels {
  display: block !important;         /* Override any flex settings that prevent wrapping */
  max-width: 100% !important;        /* Prevent exceeding parent container width */
  width: 100% !important;            /* Fill the width of parent */
  box-sizing: border-box;            /* Include padding/border in width calculation */
  overflow: hidden;                  /* Prevent overflow from spilling out */
}

/* Ensure the sublabel text wraps and stays within bounds */
.scbc-timeline .twae-label-small {
  display: block;                    /* Avoid inline rendering that prevents wrapping */
  white-space: normal !important;   /* Allow automatic line breaks */
  word-break: break-word !important;/* Break long unbreakable words */
  overflow-wrap: break-word !important; /* Ensure compatibility for word breaking */
  max-width: 100% !important;       /* Limit to container width */
  box-sizing: border-box;           /* Consistent box sizing */
  overflow: hidden;                 /* Hide any overflowed text if it occurs */
}

/* Ensure the description text wraps and fits within its box */
.scbc-timeline .twae-desc {
  white-space: normal !important;   /* Allow line wrapping */
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

.scbc-timeline .twae-content .twae-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

/* reset opacity of all components in timeline  */
.scbc-timeline .twae-content,
.scbc-timeline .twae-labels,
.scbc-timeline .twae-arrow {
  opacity: 0;
}

.sub-label-content {
  max-width: 100%;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
  font-size: clamp(10px, 1.vw, 22px);
font-family: 'Kaiti', '標楷體', serif;   
line-height: 1.8;
padding: 5px;   
border-radius: 12px;   
background-color: #fefefe;   
color: #333;   
box-shadow: 0 4px 12px rgba(0,0,0,0.1);   
margin: 0 auto;   
}

.sub-label-content h2 {
    text-align: center; font-size: 24px; color: #5a3e36; margin-bottom: 20px;
}


 #gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
  }

  #gallery-overlay img {
    max-width: 90%;
    max-height: 80%;
    border: 4px solid white;
    border-radius: 10px;
    box-shadow: 0 0 20px #fff;
  }

  #gallery-close {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 36px;
    color: white;
    cursor: pointer;
    z-index: 10000;
  }

  #gallery-prev, #gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: white;
    cursor: pointer;
    user-select: none;
    z-index: 10000;
  }

  #gallery-prev {
    left: 30px;
  }

  #gallery-next {
    right: 30px;
  }
  
  /* ========= for image popup =========== */
    #image-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  #image-popup-overlay img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px #fff;
    border: 4px solid white;
    border-radius: 10px;
  }

  #image-popup-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 36px;
    cursor: pointer;
    z-index: 10000;
  }/* End custom CSS */