.banner-wrap{
      max-width:1410px;
      margin:0 auto;
      position:relative;
    }

    .banner-carousel{
      border-radius:34px;
      overflow:visible;
      position:relative;
    }

    .carousel-inner{
      border-radius:34px;
      overflow:hidden;
/*      box-shadow:0 8px 22px rgba(0,0,0,.08);*/
    }

    .carousel-item{
      /*min-height:560px;*/
	  min-height:480px;
    }

    .banner-card{
      position:relative;
      min-height:560px;
      background:
        linear-gradient(rgba(223, 194, 108, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 194, 108, .16) 1px, transparent 1px),
        #f8f8f4;
      background-size:56px 56px,56px 56px,auto;
      padding:42px 60px;
      display:flex;
      align-items:center;
    }
    .banner-card:before,
    .banner-card:after{
      content:"";
      position:absolute;
      background:#ead86e;
      z-index:0;
    }
    .banner-card:before{
      width:260px;
      height:150px;
      left:0;
      top:0;
      border-radius:32px 0 110px 0;
    }
    .banner-card:after{
      width:330px;
      height:170px;
      right:0;
      top:0;
      border-radius:0 30px 0 140px;
    }
    .banner-cloud-left,
    .banner-cloud-right{
      position:absolute;
      background:#ead86e;
      z-index:0;
    }
    .banner-cloud-left{
      width:180px;
      height:90px;
      left:0;
      bottom:0;
      border-radius:0 90px 0 0;
    }
    .banner-cloud-right{
      width:300px;
      height:125px;
      right:0;
      top:118px;
      border-radius:80px 0 0 80px;
    }

    .theme-a{
      background:
        linear-gradient(rgba(223, 194, 108, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 194, 108, .16) 1px, transparent 1px),
        #f8f8f4;
      background-size:56px 56px,56px 56px,auto;
    }
    .theme-b{
      background:
        linear-gradient(rgba(195, 216, 231, .20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(195, 216, 231, .20) 1px, transparent 1px),
        #f7fbff;
      background-size:56px 56px,56px 56px,auto;
    }
    .theme-b:before,.theme-b:after,.theme-b .banner-cloud-left,.theme-b .banner-cloud-right{
      background:#b7dbff;
    }

    .theme-c{
      background:
        linear-gradient(rgba(220, 209, 171, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 209, 171, .18) 1px, transparent 1px),
        #fffaf1;
      background-size:56px 56px,56px 56px,auto;
    }
    .theme-c:before,.theme-c:after,.theme-c .banner-cloud-left,.theme-c .banner-cloud-right{
      background:#f2d77a;
    }

    .banner-content{
      position:relative;
      z-index:2;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:40px;
    }
    .banner-illustration{
      flex:0 0 37%;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:360px;
      position:relative;
    }

    .monitor{
      width:300px;
      height:190px;
      border:7px solid #323232;
      border-radius:22px;
      background:linear-gradient(135deg,#6fd0c1,#f7eab1);
      position:relative;
      box-shadow:0 10px 20px rgba(0,0,0,.08);
    }
    .monitor:before{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      top:18px;
      bottom:18px;
      border-radius:14px;
      background:
        radial-gradient(circle at 20% 30%, #2e7b7f 0 18%, transparent 19%),
        radial-gradient(circle at 75% 24%, #5b9e67 0 16%, transparent 17%),
        linear-gradient(90deg,#2f7e88 0 22%, #e6e3b2 22% 45%, #65b49b 45% 70%, #f0cd79 70% 100%);
      opacity:.92;
    }
    .monitor-stand{
      width:112px;
      height:16px;
      border-radius:20px;
      background:#323232;
      position:absolute;
      left:50%;
      bottom:-34px;
      transform:translateX(-50%);
    }
    .monitor-stand:before{
      content:"";
      width:24px;
      height:38px;
      background:#323232;
      position:absolute;
      left:50%;
      top:-28px;
      transform:translateX(-50%);
      border-radius:8px;
    }

    .deco-circle,.deco-line,.deco-chip,.deco-square{ position:absolute; }
    .deco-circle{
      width:28px;
      height:28px;
      border:4px solid #4aa5a0;
      border-radius:50%;
      background:#fff;
    }
    .deco-circle.c1{ left:18px; top:48px; }
    .deco-circle.c2{ right:30px; top:86px; border-color:#86c571; }
    .deco-circle.c3{ right:10px; bottom:72px; border-color:#4d6da7; }

    .deco-line{
      height:10px;
      background:#e3b35a;
      border-radius:30px;
      opacity:.95;
    }
    .deco-line.l1{ width:82px; left:42px; top:8px; }
    .deco-line.l2{ width:58px; left:60px; top:38px; }
    .deco-line.l3{ width:68px; right:8px; top:12px; }

    .deco-chip{
      width:24px;
      height:24px;
      border:3px solid #555;
      transform:rotate(-18deg);
      left:6px;
      top:0;
      border-radius:5px;
      background:#fffdf3;
    }
    .deco-square{
      width:34px;
      height:34px;
      border:4px solid #5f7db0;
      border-radius:8px;
      right:38px;
      bottom:34px;
      transform:rotate(18deg);
      background:#fff;
    }

    .banner-title{
      flex:1 1 auto;
      text-align:center;
      color:#111;
      padding-right:40px;
    }
    .banner-title .small-title{
      display:block;
      font-size:clamp(38px, 4vw, 74px);
      font-weight:900;
      line-height:1.05;
      margin-bottom:8px;
      letter-spacing:1px;
    }
    .banner-title .big-title{
      display:block;
      font-size:clamp(60px, 7vw, 126px);
      font-weight:900;
      line-height:.95;
      letter-spacing:2px;
      text-shadow:4px 4px 0 rgba(0,0,0,.06);
    }

    .banner-caption{
      display:block;
      margin-top:14px;
      font-size:22px;
      font-weight:700;
      color:#4e5e4d;
      letter-spacing:1px;
    }

    .banner-controls{
      position:absolute;
      left:50%;
      /*top:745px;*/
	  top:450px;
      transform:translateX(-50%);
      z-index:5;
      background:#8bcf67;
      border-radius:18px;
      padding:10px 28px;
      color:#fff;
      font-weight:700;
      display:flex;
      align-items:center;
      gap:22px;
      box-shadow:0 8px 18px rgba(85,126,54,.25);
      font-size:20px;
    }
    .banner-controls .ctrl{
      border:0;
      background:transparent;
      color:#fff;
      padding:0;
      line-height:1;
      font-size:30px;
      font-weight:700;
      cursor:pointer;
    }
    .banner-controls .ctrl:hover{
      opacity:.85;
    }
    .banner-count{
      min-width:54px;
      text-align:center;
    }
    .float-panel{
     position: fixed;
    right: 18px;
    top: 225px;
    z-index: 1030;
    width: 90px;
    background: #f8f8f4;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 14px 10px 12px;
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .35s ease, opacity .25s ease, visibility .25s ease;
    }
    .float-panel.is-hidden{
      transform:translateY(120%);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    .float-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      text-decoration:none;
      color:#222;
      font-size:12px;
      font-weight:700;
      line-height:1.3;
      padding:5px 4px;
      border-radius:16px;
      transition:.2s ease;
    }
    .float-item:hover{
      background:#fee393;
      color:#000;
    }

    .float-icon{
      width:42px;
      height:42px;
      border-radius:50%;
      background:#fff;
      border:1px solid #000;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      margin-bottom:6px;
    }

    .float-icon i{
      color:#000;
    }


    .float-toggle{
      position:fixed;
      /*right:25px;
      top:195px;*/
	  right:40px;
      top:600px;
      z-index:1031;
      width:52px;
      height:52px;
      border:0;
      border-radius:50%;
      background:#111;
      color:#fff;
      /*font-size:34px;*/
      line-height:1;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 8px 18px rgba(0,0,0,.18);
      transition:transform .2s ease;
      /*cursor:pointer;*/
    }
    .float-toggle:hover{
      transform:scale(1.05);
    }
    .float-toggle .icon-open{ display:none; }
    .float-toggle.is-collapsed .icon-close{ display:none; }
    .float-toggle.is-collapsed .icon-open{ display:block; }

    @media (max-width:1199.98px){
      .banner-section{ padding:14px 40px 38px; }
      .carousel-item, .banner-card{ min-height:480px; }
      .banner-card{ padding:36px 34px; }
      .banner-content{ gap:22px; }
      .banner-title{ padding-right:0; }
    }
    @media (max-width:991.98px){
      .carousel-item, .banner-card{ min-height:auto; }
      .banner-card{ padding:34px 24px 54px; }
      .banner-content{ flex-direction:column; }
      .banner-illustration{ flex:0 0 auto; min-height:260px; }
      .banner-title{ text-align:center; }
      .banner-caption{ font-size:18px; }

      .float-panel{
        right:25px;
        top:auto;
        bottom:90px;
        width:96px;
      }
      .float-toggle{
        /*right:25px;
        top:auto;
        bottom:25px;*/
      }
      .float-icon{ width:38px; height:38px; font-size:18px; }
    }
    @media (max-width:575.98px){
      .banner-section{ padding:10px 14px 42px; }
      .banner-carousel, .carousel-inner{ border-radius:22px; }
      .monitor{ width:220px; height:140px; }
      .banner-controls{ font-size:16px; gap:14px; padding:8px 18px; }
      .banner-controls .ctrl{ font-size:24px; }

      .float-panel{
        right:25px;
        bottom:78px;
        width:92px;
        padding:10px 8px;
      }
      .float-item{ font-size:11px; }
      .float-toggle{
        /*right:25px;*/
        /*bottom:20px;*/
        width:46px;
        height:46px;
        font-size:28px;
      }
    }

/* =========================================================
   RWD 修正版：Banner 綠色控制器與右側浮動按鈕
   - 移除 top 寫死造成手機版掉位
   - 控制器改以 Banner 底部定位
   - 浮動按鈕固定右側 25px
========================================================= */

.banner-wrap{
  position:relative;
}

.banner-controls{
  position:absolute;
  left:50%;
  bottom:-22px;
  top:auto !important;
  transform:translateX(-50%);
  z-index:20;
}

.float-toggle{
  right:36px !important;
  /*top:200px;*/
  top:575px;
}

/* 平板與小筆電 */
@media (max-width:1199.98px){
  .banner-section{
    padding-bottom:64px;
  }

  .banner-controls{
    bottom:-20px;
    top:auto !important;
  }
}

/* 平板 */
@media (max-width:991.98px){
  .banner-section{
    padding-bottom:58px;
  }

  .banner-controls{
    bottom:-18px;
    top:auto !important;
    padding:8px 18px;
    gap:14px;
    font-size:16px;
    border-radius:999px;
  }

  .banner-controls .ctrl{
    font-size:24px;
  }

  .banner-count{
    min-width:46px;
  }

  .float-panel{
    right:25px;
    top:auto;
    bottom:90px;
  }

  .float-toggle{
    right:25px !important;
    top:auto;
    bottom:25px;
  }
}

/* 手機 */
@media (max-width:575.98px){
  .banner-section{
    padding-bottom:52px;
  }

  .banner-controls{
    bottom:-14px;
    top:auto !important;
    padding:6px 14px;
    gap:10px;
    font-size:14px;
    max-width:calc(100vw - 32px);
    border-radius:999px;
  }

  .banner-controls .ctrl{
    font-size:20px;
  }

  .banner-count{
    min-width:40px;
  }
/*
  .float-panel{
    right:25px;
    bottom:78px;
  }

  .float-toggle{
    right:25px !important;
    top:auto;
    bottom:20px;
    width:46px;
    height:46px;
    font-size:28px;
  }
}
*/

/* =========================================================
   小尺寸浮動視窗修正
   條件：高度 < 699px 且 寬度 < 597px
   - 展開時縮小為 80%
   - 位置改為右下
========================================================= */

@media (max-width:596.98px) and (max-height:698.98px){

  .float-panel{
    transform: scale(.8);
    transform-origin: right bottom;

    right: 25px;
    top: auto !important;
    bottom: 76px;
  }

  .float-panel.is-hidden{
    transform: translateY(120%) scale(.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .float-toggle{
    right: 25px !important;
    top: auto !important;
    bottom: 20px;

    width: 42px;
    height: 42px;
    font-size: 24px;
  }
}