@charset "utf-8";

/*頁籤切換區--------------------------------*/
.tabBox{ display: flex; gap: 24px;/*頁籤和內容的間距*/ align-items: flex-start;}

/*--頁籤選單----*/
.tabMenu{ list-style: none; margin: 0; padding: 0; width: 265px;/*頁籤選單寬度*/}
.tabMenu img{ display: block;}
.tabMenu li{ margin: 0 0 8px; border: #000 0px solid;/*頁籤外框*/ border-radius: 0px;/*頁籤圓角*/ cursor: pointer; user-select: none;/*禁止點擊拖曳時反白*/}
/*頁籤底色*/
.tabMenu > li:nth-child(1){ background-color: #aea2da;}
.tabMenu > li:nth-child(2){ background-color: #f0bc24;}
.tabMenu > li:nth-child(3){ background-color: #53bfdd;}
.tabMenu > li:nth-child(4){ background-color: #8a1e2a;}
/*頁籤(滑入)底色*/
.tabMenu > li:nth-child(1)[aria-selected="true"]{ background:#aea2da;}
.tabMenu > li:nth-child(2)[aria-selected="true"]{ background:#f0bc24;}
.tabMenu > li:nth-child(3)[aria-selected="true"]{ background:#53bfdd;}
.tabMenu > li:nth-child(4)[aria-selected="true"]{ background:#8a1e2a;}
/*頁籤(點擊)外框*/
/* .tabMenu li:focus{ outline: 3px dashed #000; outline-offset: 2px;} */
/*.tabMenu li{ outline: 3px dashed #cccccc;}*/
.tabMenu li:nth-child(1):focus{ outline: 3px dashed #aea2da; outline-offset: 2px;}
.tabMenu li:nth-child(2):focus{ outline: 3px dashed #f0bc24; outline-offset: 2px;}
.tabMenu li:nth-child(3):focus{ outline: 3px dashed #53bfdd; outline-offset: 2px;}
.tabMenu li:nth-child(4):focus{ outline: 3px dashed #8a1e2a; outline-offset: 2px;}

/*--頁籤內容----*/
.tabContents{ width: calc(100% - 430px);/*扣掉選單的寬度*/ flex: 1 1 auto; min-width: 0;}

/*頁籤內容：用aria-hidden切換(不用display:none;)*/
/*滑鼠未滑入，不顯示內容*/
.mainTabCon[aria-hidden="true"]{
  position: absolute;
  inset: 0;            /*把元素固定在父層範圍內*/
  height: 0;           /*高度歸零，不佔空間*/
  overflow: hidden;    /*裡面的東西不要露出*/
  visibility: hidden;  /*不顯示*/
  pointer-events: none;
  opacity: 0;
}
/*滑鼠滑入，顯示對應內容*/
.mainTabCon[aria-hidden="false"]{
  position: relative;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/*頁籤內容(外框設定)*/
.tabConBg{ padding: 40px;/*內容內間距*/ border: 3.5px solid #b587aa;/*內容外框*/ border-radius: 0px;/*內容圓角*/ background:#fff;}
.tabConBg1{ padding: 40px;/*內容內間距*/ border: 3.5px solid #b587aa;/*內容外框*/ border-radius: 0px;/*內容圓角*/ background:#fff;}
.tabConBg2{ padding: 40px;/*內容內間距*/ border: 3.5px solid #f0bc24;/*內容外框*/ border-radius: 0px;/*內容圓角*/ background:#fff;}
.tabConBg3{ padding: 40px;/*內容內間距*/ border: 3.5px solid #53bfdd;/*內容外框*/ border-radius: 0px;/*內容圓角*/ background:#fff;}
.tabConBg4{ padding: 40px;/*內容內間距*/ border: 3.5px solid #8a1e2a;/*內容外框*/ border-radius: 0px;/*內容圓角*/ background:#fff;}

/*頁籤內容(對應底色)*/
.tabConBg1.t1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251201_springfish/images/bg_04_1.png);}
.tabConBg2.t2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251201_springfish/images/bg_04_2.png);}
.tabConBg3.t3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251201_springfish/images/bg_04_3.png);}
.tabConBg4.t4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251201_springfish/images/bg_04_4.png);}

/*頁籤切換區(小於1024就不需要頁籤，頁籤內容全部顯示)------------------------------------------------------*/
/*若要搬進index.css，請放在所有@media斷點的最下面*/
@media (max-width: 1024px){
  /*--頁籤選單----*/
  .tabMenu{ display: none;}/*隱藏*/

  /*--頁籤內容----*/
  .tabContents{ width: 100%;}

  /*頁籤內容全顯示*/
  .mainTabCon {
    margin-bottom: 0px;
    position: relative !important;  /*取消隱藏時的絕對定位*/
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }

}