#hero {display: flex;height: calc(100vh - 0px);min-height: 800px;width: 100%;position: relative;background: #fff;overflow: hidden;padding-top: 80px;justify-content: flex-end;}
#hero .hero-sidebar {gap: 3vw;flex-shrink: 0;display: flex;position: relative;z-index: 10;padding-bottom: 0;flex-direction: row;align-items: flex-end;position: absolute;height: 100%;left: 0;}
#hero .hero-sidebar .banner_box_01 { height: 90%; display: flex; flex-direction: column; justify-content: flex-end; background: url(/images/43/scroll-hint-box-bg.jpg); }
#hero .hero-sidebar .banner_box_02{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#hero .hero-sidebar .banner_box_03 { display: flex; height: 100%; align-items: center; }
#hero .sidebar-top { flex: 1; display: flex; justify-content: center; padding-top: 0; padding-bottom: 60px; }
#hero .hero-text-container { display: flex; flex-direction: row-reverse; gap: 1px; z-index: 1; align-items: flex-start; }
#hero .hero-title-main {writing-mode: vertical-rl;font-size: 3rem;letter-spacing: 6px;color: #ffffff;font-weight: 400;margin: 0;line-height: 1.2;text-shadow: 2px 2px 5px rgb(0 0 0 / 49%);}
#hero .title-col-2 { display: flex; flex-direction: column; gap: 5px; align-items: center; }
#hero .hero-title-sub {writing-mode: vertical-rl;font-size: 3rem;letter-spacing: 6px;color: #ffffff;font-weight: 400;margin: 0;line-height: 1.2;text-shadow: 2px 2px 5px rgb(0 0 0 / 49%);}
#hero .hero-title-en { writing-mode: vertical-rl; font-size: 11px; letter-spacing: 2px; color: #313131; margin: 0; text-transform: uppercase; line-height: 1.6; }
#hero .sidebar-bottom { position: relative; bottom: 0; left: 0; display: flex; flex-direction: row; width: 100%; height: 325px; background: #fff; z-index: 20; border-top: 1px solid #f9f9f9; }
#hero .scroll-hint-box {width: 80px;background: var(--primary);display: flex;justify-content: center;align-items: flex-start;transition: background 0.3s;cursor: pointer;padding: 25px 0;}
#hero .scroll-hint-box #scrollBtn { display: flex; flex-direction: column; align-items: center; gap: 69px; }
#hero .scroll-hint-box #scrollBtn span { position: relative; width: 1px; height: 72px; background: rgb(255 255 255/66%); }
#hero .scroll-hint-box #scrollBtn span:before { content: ""; position: absolute; width: 1px; height: 10px; transform: rotate(45deg); background: rgb(255 255 255/66%); bottom: 0; transform-origin: right bottom; }
#hero .scroll-hint-box:hover { background: #272727; }
#hero .scroll-hint { writing-mode: vertical-rl; font-size: 12px; letter-spacing: 4px; font-weight: 500; color: #ffffff; animation: scrolldownrun 1.8s linear infinite; }
#hero .sidebar-controls {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;gap: 37px;padding-bottom: 0;margin-top: 15px;}
#hero .slider-numbers { display: flex; flex-direction: column; align-items: center; font-family: "Noto Serif TC",serif; font-size: 14px; letter-spacing: 2px; }
#hero .current-slide {position: relative;color: var(--primary);font-weight: bold;font-size: 1.75rem;transition: transform 0.3s ease,opacity 0.3s ease;display: flex;flex-direction: column;align-items: center;font-family: Cormorant Garamond;}
#hero .current-slide:before {content: "";position: absolute;width: 1px;height: 25px;bottom: -28px;margin-left: 0px;background: var(--primary);z-index: 5;}
#hero .current-slide.num-out { transform: translateY(-10px); opacity: 0; }
#hero .current-slide.num-in { transform: translateY(10px); opacity: 0; transition: none; }
#hero .number-divider {width: 1px;height: 55px;background: #ffffff;margin: 12px 0;}
#hero .total-slides {color: #ffffff;font-size: 1.75rem;font-family: Cormorant Garamond;}
#hero .slider-dots { display: flex; flex-direction: column; position: relative; z-index: 20; }
#hero .slick-dots { display: flex !important; flex-direction: column !important; gap: 30px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; position: static !important; width: auto !important; }
#hero .slick-dots li { margin: 0 !important; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; }
#hero .slick-dots button { font-size: 0 !important; line-height: 0 !important; display: block !important; width: 13px !important; height: 13px !important; padding: 0 !important; cursor: pointer; color: transparent !important; border: 2px solid #a12d2d !important; border-radius: 50% !important; background: transparent !important; transition: all 0.3s ease !important; outline: none !important; }
#hero .slick-dots li button:before { display: none; }
#hero .slick-dots .slick-active button { background: #a12d2d !important; transform: scale(1) !important; }
#hero .hero-slider-wrapper {/* flex: 1; */width: calc(100% - 80px);height: 100%;overflow: hidden;position: relative;display: flex;flex-direction: column;}
#hero .hero-slider { width: 100%; height: 100%; }
#hero .slide-item {width: 100%;height: calc(100% - 80px);position: relative;outline: none;}
#hero .slide-item video{position:absolute;z-index: 2;height: 100%;width: 100%;object-fit: cover;object-position: 50% 50%;}
#hero .slide-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; transform: scale(1.0); }
#hero .slick-active .slide-item img { transform: scale(1.04); }
#hero .slick-list,#hero .slick-track { height: 100%; }
@keyframes scrolldownrun {
  0% { transform: translate(0,-5px); }
  50% { transform: translate(0,10px); }
  100% { transform: translate(0,-5px); }
}
@media (max-width:1470px) {
  #hero { padding-top: 80px; }
}
@media (max-width:768px) {
  #hero { flex-direction: column; height: auto; min-height: auto; padding-top: 54px; }
  #hero .hero-sidebar { width: 100%; flex-direction: column; height: auto; padding: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); z-index: 20; display: none; }
  #hero .sidebar-top { padding: 40px 20px; align-items: center; justify-content: center; }
  #hero .hero-text-container { flex-direction: column; align-items: center; gap: 15px; }
  #hero .hero-title-main { writing-mode: horizontal-tb; font-size: 26px; letter-spacing: 6px; }
  #hero .title-col-2 { flex-direction: column; gap: 10px; align-items: center; }
  #hero .hero-title-sub { writing-mode: horizontal-tb; font-size: 26px; letter-spacing: 6px; }
  #hero .hero-title-en { writing-mode: horizontal-tb; line-height: 1.4; text-align: center; }
  #hero .hero-title-en br { display: none; }
  #hero .sidebar-bottom { position: relative; flex-direction: row; height: auto; border-top: 1px solid #eee; }
  #hero .scroll-hint-box { display: none; }
  #hero .sidebar-controls { width: 100%; flex-direction: row; padding: 20px 0; gap: 30px; }
  #hero .slider-numbers { flex-direction: row; gap: 15px; margin-bottom: 0; }
  #hero .number-divider { width: 20px; height: 1px; margin: 0; }
  #hero .slider-dots { flex-direction: row; margin-bottom: 0; }
  #hero .slick-dots { flex-direction: row !important; }
  #hero .hero-slider-wrapper { width: 100%; height: auto; }
  #hero .slide-item { height: auto; min-height: auto; }
}