/* all sec_04 八種種族展示races */
:root{
  --frame-color: rgba(255, 255, 255, 1);
  --frame-style: 2px solid var(--frame-color);
  --races-thumb-name-size: 2rem;
  --top-triangle-size: 55%;
}


.sec_04 .races_thumb *::before, .sec_04 .races_thumb *::after{ pointer-events: none;}

.sec_04 .block_content{
  padding-top: calc(var(--block-title)* .5);
  background-color: rgb(214, 214, 214);
  color: var(--block-title-color-wt-bg);
}
.sec_04 .block_content:has(.mobile.races_wrapper){
  background-color: rgb(240, 240, 240);
}


/* races按鈕 */
.sec_04 .thumb_wrapper{
  width: 100%; padding-top: 90px; padding-bottom: calc(2vw + var(--block-title) * .5);
  display: grid; /* 啟用 Grid 布局 */
  grid-template-columns: repeat( var(--grid-number), 220px); /* 每行 4 個，固定 220px 寬 */
  justify-content: center;
}

.races_thumb{
  width: 220px; /* aspect-ratio: 220/170; */ position: relative;
  margin-right: 5rem;
  display: flex; justify-content: center;
}

.races_thumb.races_01{ z-index: 8;}
.races_thumb.races_02{ z-index: 7;}
.races_thumb.races_03{ z-index: 6;}
.races_thumb.races_04{ z-index: 5;}
.races_thumb.races_05{ z-index: 4;}
.races_thumb.races_06{ z-index: 3;}
.races_thumb.races_07{ z-index: 2;}
.races_thumb.races_08{ z-index: 1;}

.races_thumb .frame{width: 190.031px; height: 170px; transform: skewX(-10deg); box-sizing: content-box;}

.races_thumb .frame.under{
  --bg-posX: 700%;
  --shadow-width: 1vw;
  --shadow-opacity: .4;
  --bg-opacity: 0;
  --bg-color:rgba(255, 255, 255, var(--bg-opacity));
  --shadow-color1:rgba(255, 255, 255, 1);
  --shadow-color2: rgba(0, 0, 0, var(--shadow-opacity));
  --transition: background-color .3s, box-shadow .3s;
  background-color: var(--bg-color);
  border-top: var(--frame-style);
  position: relative;
  box-shadow:
    var(--shadow-width) var(--shadow-width) var(--shadow-width) 0 var(--shadow-color2),
    calc(var(--shadow-width) *.2) calc(var(--shadow-width) *.2) calc(var(--shadow-width) *.5) 0 var(--shadow-color2),
    inset 0 5px 5px -5px var(--shadow-color1),
    0 -5px 5px -5px var(--shadow-color1);
}
.races_thumb .frame.above{
  --shadow-color:rgba(255, 255, 255, 1);
  border: var(--frame-style); border-top: 0;
  position: absolute; z-index: 2;
  cursor: pointer;
  box-shadow: 
  inset 5px 0 5px -5px var(--shadow-color), inset -5px 0 5px -5px var(--shadow-color),
  inset 0px -5px 5px -5px var(--shadow-color),
  5px 0 5px -5px var(--shadow-color), -5px 0 5px -5px var(--shadow-color),
  0 5px 5px -5px var(--shadow-color);
}

.races_thumb.races_05 .frame.above{
  --start-percent:20%;
  --end-percent:70%;
}

.races_thumb .frame.above::before{  
  --above-color: 217, 220, 232;
  --start-opacity: .95; 
  --end-opacity: 0;
  --start-percent:15%;
  --end-percent:45%;
  content: ""; width: 100.3%; height: 100%; display: block;
  background: linear-gradient(
    to top,
    rgba(var(--above-color), var(--start-opacity)) var(--start-percent),
    rgba(var(--above-color), var(--end-opacity)) var(--end-percent)
  );
  position: absolute; top: 0; left: 0; z-index: -1;
}

.races_thumb .cha{
  --bg-posY: -62%;
  --bg-size: 160.4%;
  --transX: translateX(0);
  --trans: var(--transX);
  --transition: background-position .3s;
  width: 119%; aspect-ratio: 220 / 340; position: absolute; left: 0; bottom: 0; z-index: 1;
  mask-image: url(../images/svg/sec_04_race_mask.svg); mask-size: 100% auto; mask-repeat: no-repeat; mask-position: center bottom;
  background-repeat: no-repeat; background-position: 50% var(--bg-posY); background-size: var(--bg-size) auto;
  transform: var(--trans);
}
.races_thumb .frame.under,
.races_thumb .cha{
  transition: var(--transition);
}

.races_thumb.races_08 .cha{
  --bg-posX: -140%;
  --bg-size:  108.6%;
  --transX:translateX(-32.5%);
  width: 175.8%; aspect-ratio: 325 / 340;
  mask-image: url(../images/svg/sec_04_race_mask_sp.svg);
  background-position: var(--bg-posX) var(--bg-posY);
}


/* 角色圖8個 */
.races_thumb.races_01 .cha{ background-image: url(../images/thumb/races_01.webp);}
.races_thumb.races_02 .cha{ background-image: url(../images/thumb/races_02.webp);}
.races_thumb.races_03 .cha{ background-image: url(../images/thumb/races_03.webp);}
.races_thumb.races_04 .cha{ background-image: url(../images/thumb/races_04.webp);}
.races_thumb.races_05 .cha{ background-image: url(../images/thumb/races_05.webp);}
.races_thumb.races_06 .cha{ background-image: url(../images/thumb/races_06.webp);}
.races_thumb.races_07 .cha{ background-image: url(../images/thumb/races_07.webp?v=20250330);}
.races_thumb.races_08 .cha{ background-image: url(../images/thumb/races_08.webp);}

.races_thumb .name{
  width: 79.5%; padding-bottom: .2rem;
  position: absolute; left: 6.5%; bottom: 0; z-index: 3;
  pointer-events: none;
  --start-percent: 30%;
    --end-percent: 100%;
    --start-opacity: 1;
    --end-opacity: 1;
    --above-color: 55, 55, 55;
    --under-color: 90, 100, 150;
    --direction:top;
}

.races_thumb .name span{
  background-image: linear-gradient(
      to var(--direction),
      rgba(var(--above-color), var(--start-opacity)) var(--start-percent),
      rgba(var(--under-color), var(--end-opacity)) var(--end-percent)
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.races_thumb .name,
.races_wrapper .name{
  font-family: 'noto serif hk', 'noto serif tc'; font-weight: 800;
}

.races_thumb .name span.zh{ font-size: var(--races-thumb-name-size);}
.races_thumb .name span.en{ font-size: calc(var(--races-thumb-name-size) * .5);}

.races_thumb.races_05 .name{display: flex; flex-wrap: wrap;}
.races_thumb.races_05 .name span{position: relative;}
.races_thumb.races_05 .name span.zh{order: 2; z-index: 1;}

.races_thumb.races_05 .name span.en{
  order: 1; z-index: 0;
  transform: translate(.25rem, .25rem);
  filter:
  drop-shadow(1px 1px 1px rgba(217, 220, 232, .8))
  drop-shadow(-1px -1px 1px rgba(217, 220, 232, .8))
  drop-shadow(0 0 3px rgba(217, 220, 232, .5))
  drop-shadow(0 0 10px rgba(217, 220, 232, 1));
}

@media (hover) {
  .races_thumb:has(.frame.above:hover){ z-index: 10;}
  .races_thumb .frame.above:hover + .frame.under{
    /* --bg-posX:center; */
    --shadow-width: .8vw;
    --shadow-opacity:.3;
    --bg-opacity: .5;
  }

  .races_thumb .frame.above:hover + .frame.under + .cha{  --bg-posY: -57%;}
  .races_thumb .frame.above:hover + .frame.under + .cha + .name{ --direction:bottom;}
}


/* races內容 */
.races_wrapper{width:100%; display: none; position: relative;}
.races_wrapper .swiper-wrapper{align-items: flex-start;}

.races_wrapper .swiper-slide{
  width:100%; 
  background-color: rgba(252, 255, 255, .25);
  display: flex; justify-content: center; align-items: flex-start;
  transition: none;
}

/* ↓ swiper transition用 ↓ */
.races_wrapper .swiper-slide:not(.swiper-slide-active){ /* height: 0; */ opacity: 0 !important;}

.overall_wrap_info .name,
.overall_wrap_info .content{ 
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s .1s, transform .6s cubic-bezier(.39,.71,.11,1.36) .1s !important;
}
.races_wrapper .swiper-slide-active .overall_wrap_info .name,
.races_wrapper .swiper-slide-active .overall_wrap_info .content{ 
  opacity: 1;
  transform: translateY(0);
}

.races_wrapper .sub .name,
.races_wrapper .sub .pic{ 
  --transition-posX: 15%;
  opacity: 0;
  transform: translateX(var(--transition-posX));
  transition: opacity .3s .1s, transform .4s ease-out .1s !important;
}
.races_wrapper .sub li.sub2 .name,
.races_wrapper .sub li.sub1 .pic{--transition-posX: -15%;}

.races_wrapper .swiper-slide-active .sub .name,
.races_wrapper .swiper-slide-active .sub .pic{ 
  opacity: 1;
  transform: translateX(0);
}



.races_wrapper .sub .content{ 
  --transition-posX: 100%;
  mask-image: linear-gradient(to right, black 50%, transparent 50.01%);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50.01%);
  mask-position: var( --transition-posX) 0;
  -webkit-mask-position: var( --transition-posX)0;
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  transition: mask-position .4s ease-out, -webkit-mask-position .4s ease-out !important;
}
.races_wrapper .sub li.sub2 .content{ --transition-posX: -100%;}


.races_wrapper .swiper-slide-active .sub .content{ --transition-posX: 0 !important;}




/* ↑ swiper transition用 ↑ */


.races_info{width: 100%; display: flex; flex-direction: column; align-items: center;}

.overall_block{
  width: 100%;
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 10;
  /* display: flex;*/
  text-align: center;
}

.shape{
  width: 50%; height: auto; aspect-ratio: 1/.4;
}
.shape.lt{
   float: left;
  shape-outside: polygon(0 0, var(--top-triangle-size) 0, 100% 100%, 0% 100%);
  pointer-events: none;
  /* ↓for testing */
  /* clip-path: polygon(0 0, var(--top-triangle-size) 0, 100% 100%, 0% 100%);
  background-color: rgba(255, 0, 0, .1); */
}
.shape.rt{
  float: right;
  shape-outside: polygon( calc(100% - var(--top-triangle-size))  0%, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
  /* ↓for testing */
  /* clip-path: polygon(calc(100% - var(--top-triangle-size)) 0%, 100% 0, 100% 100%, 0% 100%);
  background-color: rgba(255, 0, 0, .1); */
}

.overall_wrap_info{ width: 100%;}


.overall_wrap_info .name{
  padding: calc(var(--block-title-content) * .25);
  font-size: calc(var(--block-title) * .7);
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 1));
  filter: -webkit-drop-shadow(1px 1px 0 rgba(255, 255, 255, 1));
}

.overall_wrap_info .name span{ display: inline-block;}

.overall_wrap_info .content{
  --shadow-color: rgba(255, 255, 255, 1);
  --text-shadow: 0 0 2px var(--shadow-color), 0 0 5px var(--shadow-color), 0 0 15px var(--shadow-color);
  font-size: calc(var(--block-title-content) * .9);
  line-height: calc(var(--block-title-content) * 1.3);
  text-shadow: var(--text-shadow);
  -webkit-text-shadow: var(--text-shadow);
}

.races_wrapper .sub{
  width: 100%; height: 100vh;
  display: flex; justify-content: space-between; align-items: stretch;
}

.races_wrapper .sub li{
  width: 50%; position: relative;
  display: flex; flex-direction: column;
}

.races_wrapper .sub li.sub2{ align-items: flex-end;}


.races_wrapper .sub .name{
  width: 59%;
  margin: calc(var(--block-title-content) * .45) 0 calc(var(--block-title-content) * 2.5) 0;
  padding: .5vw 2vw;
  font-size: calc(var(--block-title) * .6);
  /* ↓ for testing */
  /* background-color: rgba(255, 0, 0, .1); */
}

.races_wrapper .sub .sub2 .name{  text-align: right;}

.races_wrapper .sub .name span{ display: inline-block;}

.races_wrapper .sub .pic{
  --bg-position-x:center;
  --bg-position-y:top;
  width: 95%; height: 100%;
  background-repeat:no-repeat; background-position: var(--bg-position-x) var(--bg-position-y); background-size: cover;
}

.races_wrapper .races_05 .sub .pic{ background-size: 90% auto;}

.races_wrapper .sub li::before{ 
  --bg-posY:50%;
  background-image: url(../images/sec_04_bg3.webp);
  background-position: var(--bg-posX) var(--bg-posY);
  background-size: 200% auto;
  top:0; z-index: -1;
}

.races_wrapper .sub li::after{  
  background-position: right bottom;
  background-size: cover;
  bottom:0; z-index: 0;
}

.races_wrapper .sub li.sub1::before,
.races_wrapper .sub li.sub1::after{
  background-color: rgb(230, 215, 210);
  pointer-events: none;
}

.races_wrapper .sub li.sub1::before{
  --bg-posX: left;
  clip-path: polygon(101% 0, 101% 101%, 0 0);
  right: 0;
}

.races_wrapper .sub li.sub1::after{
  background-image: url(../images/sec_04_bg2.webp);
  clip-path: polygon(0 101%, 101% 101%, 0 0);
  left:0;
}

.races_wrapper .sub li.sub2::before,
.races_wrapper .sub li.sub2::after{
  background-color: rgb(210, 210, 220);
}

.races_wrapper .sub .sub2::before{
  --bg-posX: right;
  clip-path: polygon(0 0, 101% 0, 0 101%);
  left:0;
}

.races_wrapper .sub .sub2::after{
  background-image: url(../images/sec_04_bg1.webp);
  clip-path: polygon(101% 0, 101% 101%, 0 101%);
  background-size: cover;
  right:0;
}

.races_wrapper .sub li::before,
.races_wrapper .sub li::after{
  height: auto; aspect-ratio: 1/1; content: ""; display: block;
  background-repeat: no-repeat;
  background-blend-mode:multiply;
  font-size: 0; line-height: 0; margin: 0; padding: 0;
  position: absolute;
}
.races_wrapper .sub li::before{width: calc(100% - var(--top-triangle-size)); }
.races_wrapper .sub li::after{ width: 40%;}

.races_wrapper .sub .content{
  width: calc(100% - 2.5vw); margin: 0;padding: .7vw 1vw;
  font-size: calc(var(--block-title-content) * .9);
  position:absolute; bottom: calc(var(--block-title-content) * 1.5); z-index: 99;
  background-color: rgba(255, 255, 255, .8);
}

.races_wrapper .sub .sub1 .content{ left: 0;}
.races_wrapper .sub .sub2 .content{ right: 0;}

.races_01 .sub1 .pic{background-image: url(../images/races_01_1.webp);}
.races_01 .sub2 .pic{background-image: url(../images/races_01_2.webp);}
.races_02 .sub1 .pic{background-image: url(../images/races_02_1.webp);}
.races_02 .sub2 .pic{background-image: url(../images/races_02_2.webp);}
.races_03 .sub1 .pic{background-image: url(../images/races_03_1.webp);}
.races_03 .sub2 .pic{background-image: url(../images/races_03_2.webp);}
.races_04 .sub1 .pic{background-image: url(../images/races_04_1.webp);}
.races_04 .sub2 .pic{background-image: url(../images/races_04_2.webp);}
.races_05 .sub1 .pic{background-image: url(../images/races_05_1.webp);}
.races_05 .sub2 .pic{background-image: url(../images/races_05_2.webp);}
.races_06 .sub1 .pic{background-image: url(../images/races_06_1.webp);}
.races_06 .sub2 .pic{background-image: url(../images/races_06_2.webp);}
.races_07 .sub1 .pic{background-image: url(../images/races_07_1.webp?v=20250330);}
.races_07 .sub2 .pic{background-image: url(../images/races_07_2.webp?v=20250330);}
.races_08 .sub1 .pic{background-image: url(../images/races_08_1.webp);}
.races_08 .sub2 .pic{background-image: url(../images/races_08_2.webp);}

.races_wrapper .line{flex-grow:1; flex-shrink:1;}


/* navigation切換slide按鈕 */
.swiper-button-prev,
.swiper-button-next{
  --hover-shadow-posX: 4px;
  --hover-shadow-color: rgba(255, 255, 255, .4);
}
.sec_04 .swiper-button-prev,
.sec_04 .swiper-button-next{
  width: fit-content;
  height: auto;
  --arrow_posX: 34%;
  margin-top:0;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  top: calc(var(--block-title-content) *.25 + var(--block-title) * .1) ;
  mix-blend-mode:luminosity;
  display: block;
}

.sec_04 .swiper-button-prev{ left: var(--arrow_posX);}
.sec_04 .swiper-button-next{ right: var(--arrow_posX);}

.sec_04 .swiper-button-prev::before,
.sec_04 .swiper-button-next::before,
.sec_04 .swiper-button-prev::after,
.sec_04 .swiper-button-next::after{
  width: calc(var(--block-title-content) * 1.8); height: auto; aspect-ratio: 1 / 1;
}
.sec_04 .swiper-button-prev::after,
.sec_04 .swiper-button-next::after{ top: 0; left: 0;}

.sec_04 .swiper-button-prev::before,
.sec_04 .swiper-button-next::before{
  --bg-opacity: .2;
  content: ""; display: block;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  border-radius: 50%;
}

.sec_04 .swiper-button-prev::after,
.sec_04 .swiper-button-next::after{
  background-image: linear-gradient(to bottom, rgba(150, 150, 150, 1) 30%, rgba(100, 100, 100, 1) 70%);
}

.sec_04 .swiper-button-prev::after{transform: scaleX(-1);}
.sec_04 .swiper-button-next::after{transform: initial;}

.btn_scroll_up{
  --btn-bottom:0;
  --btn-transform: translateX(-50%);
  width:fit-content;
  position: absolute; bottom: var(--btn-bottom); left: 50%; transform: var(--btn-transform); z-index: 999;
  display: flex; justify-content: center; align-items: center; flex-direction: column;
  cursor: pointer;
}

.btn_scroll_up .btn{
  --btn-w: 40px;
  --btn-bg-opacity: 1;
  --btn-transformY: 55%;
  width: var(--btn-w); position: relative;
  background-color: rgba(35, 35, 32, var(--btn-bg-opacity));
  transform: translateY(var(--btn-transformY));
  border-radius:calc(var(--btn-w) * .5);
  opacity: .8;
}

.btn_scroll_up svg{
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  mask-image: url(../images/svg/up.svg);  
}

.btn_scroll_up .btn::after{
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  content: ""; display: block; opacity: 1;
  mask-image: url(../../../images/svg/header/02-3_race.svg);
  mask-position: center; mask-size: 100% auto;
  transform: translateY(0);
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
}

.btn_scroll_up svg, .btn_scroll_up .btn::after{
  mask-size: 100% auto;
  background-color:var(--block-title-color-bk-bg);
}

@media (hover) {
  .sec_04 .swiper-button-next:hover{--hover-shadow-posX: -4px;}

  .sec_04 .swiper-button-prev:hover,
  .sec_04 .swiper-button-next:hover{  
    filter: drop-shadow(var(--hover-shadow-posX) 0 0 var(--hover-shadow-color));
    -webkit-filter: drop-shadow(var(--hover-shadow-posX) 0 0 var(--hover-shadow-color));
  }
  

  .sec_04 .swiper-button-prev:hover{ left: calc(var(--arrow_posX) - var(--hover-shadow-posX));}
  .sec_04 .swiper-button-next:hover{ right: calc(var(--arrow_posX) + var(--hover-shadow-posX));}

  .sec_04 .swiper-button-prev:hover::before,
  .sec_04 .swiper-button-next:hover::before{ --bg-opacity: .8;}

  .btn_scroll_up:hover .btn{ --btn-transformY: -10%; --btn-bg-opacity:1; opacity: 1;}
  .btn_scroll_up:hover .btn:after{ transform: translateY(-25%);}

}




@media screen and (min-width:1200px) {
  .sec_04 .thumb_wrapper{
    grid-column-gap: 1.5rem;
  }
}

@media screen and (min-width:1001px) {
  .sec_04 .thumb_wrapper{
    --grid-number:4;
    grid-row-gap: 100px; /* 每行的行距 */
  }
  
  .races_thumb:nth-child(-n+4) { transform: translate(-18%);}
  .races_thumb:nth-of-type(n+5) { transform: translate(18%);}
}

@media screen and (min-width:1451px) and (max-width:1750px) {
  :root{
    --top-triangle-size: 50%;
  }
  .shape{ aspect-ratio: 1/.5;}
  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{
    --arrow_posX: 30%;
  }
}

@media screen and (min-width:1001px) and (max-width:1450px) {
  :root{
    --top-triangle-size: 39%;
  }

  .shape{ aspect-ratio: 1/.61;}

  .races_wrapper .sub .name{ /* width: 55%; */ font-size: calc(var(--block-title) * .45);}
  .races_wrapper .sub .name .en{ font-size: calc(var(--block-title) * .42);}
  .races_wrapper .sub .sub2 .name{ text-align: right;}
  .races_wrapper .sub li .name span{ display: block;}

  .races_wrapper .sub li.sub1{ align-items: flex-start;}
  .races_wrapper .sub li.sub2{ align-items: flex-end;}

  .races_wrapper .sub .pic{width: 100%;}
  .races_wrapper .sub li.sub1 .pic{ --bg-position-x:right;}
  .races_wrapper .sub li.sub2 .pic{ --bg-position-x:left;}

  .races_wrapper .races_05 .sub .pic{--bg-position-y: 25%; background-size: 100% auto;}

  .races_wrapper .races_01 .sub li.sub1 .pic{ --bg-position-x: 96%;}
  .races_wrapper .races_01 .sub li.sub2 .pic{ --bg-position-x: 25%;}

  .races_wrapper .races_02 .sub li.sub1 .pic{ --bg-position-x: 90%;}
  .races_wrapper .races_02 .sub li.sub2 .pic{ --bg-position-x: 15%;}

  .races_wrapper .races_03 .sub li.sub2 .pic{ --bg-position-x: 25%;}


  .races_wrapper .races_04 .sub li.sub2 .pic{ --bg-position-x: 20%;}

  .races_wrapper .races_06 .sub li.sub1 .pic{ --bg-position-x: 70%;}
  .races_wrapper .races_06 .sub li.sub2 .pic{ --bg-position-x: 30%;}

  .races_wrapper .races_05 .sub li.sub1 .pic{ --bg-position-x: 85%;}
  .races_wrapper .races_05 .sub li.sub2 .pic{ --bg-position-x: 38%;}

  .races_wrapper .races_07 .sub li.sub2 .pic{ --bg-position-x: 22%;}

  .races_wrapper .races_08 .sub li.sub1 .pic{ --bg-position-x: 70%;}
  .races_wrapper .races_08 .sub li.sub2 .pic{ --bg-position-x: 30%;}

  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{
    --arrow_posX: 26%;
    top: calc(var(--block-title-content) *.25 + var(--block-title) * .1) ;
  }


}

/* @media screen and (min-width:1001px) and (max-width:1280px)  {
  .overall_wrap_info .content{
    --text-shadow:
    0 0 2px var(--shadow-color),
    0 0 4px var(--shadow-color),
    0 0 6px var(--shadow-color),
    0 0 8px var(--shadow-color),
    0 0 10px var(--shadow-color);
  }
} */

@media screen and (min-width:768px) and (max-width:1000px)  {
  .sec_04 .thumb_wrapper{ --grid-number: 3;}
  .races_thumb:nth-of-type(n+7) { transform: translate(33%);}
}

@media screen and (max-width:1000px)  {
  :root{
    --top-triangle-size: 60%;
  }

  .sec_04 .thumb_wrapper{ grid-row-gap: 80px; padding-bottom: calc(var(--block-title) * .5);}

  .races_wrapper .swiper-wrapper, .races_wrapper .swiper-slide{align-items: stretch;}
.races_wrapper .swiper-slide{ height: auto;}
.races_info{height: auto;}
.races_wrapper .overall_block{ height: auto; flex: 1 1 auto;}

  .overall_block{ position: relative; display: flex; justify-content: center; align-items: stretch;}
 .overall_wrap_info{display: flex; justify-content: stretch; flex-direction: column;}
 .overall_wrap_info .content{ flex: 1 1 auto;}

  .shape{aspect-ratio: 1/.55; display: none;}

  .overall_wrap_info{ width: 95%; padding-bottom: calc(var(--block-title-content) * .5);}

  .overall_wrap_info .name{
    padding: calc(var(--block-title-content) * .75) 0 calc(var(--block-title-content) * .5);
    font-size: calc(var(--block-title) * .85);
  }

  .overall_wrap_info .content{ text-align: left; text-shadow: initial;}

  .races_wrapper .sub{ height: auto; flex-wrap: wrap;}

  .races_wrapper .sub li{ width: 100%; /* align-items: center; */}

  .races_wrapper .sub li::before{
    background-size: cover;
  }

  .races_wrapper .sub li.sub1::before{ 
    background-image: url(../images/sec_04_bg2.webp);
  }

  .races_wrapper .sub li.sub1::after,
  .races_wrapper .sub li.sub2::before{
    --bg-posX: 70%;
    background-image: url(../images/sec_04_bg3.webp);
    background-position: var(--bg-posX) var(--bg-posY);
    background-size: auto 250%;
  }
  .races_wrapper .sub li.sub1::after{ --bg-posY: 25%;}
  .races_wrapper .sub li.sub2::before{--bg-posY: 92%;}

  .races_wrapper .sub li .pic{ aspect-ratio: 1/1;}

  .races_wrapper .sub .name{font-size: calc(var(--block-title) * .75); margin-bottom: calc(var(--block-title-content) * .5);}

  .races_wrapper .sub .content{ width: 95%; padding: 2vw;}

  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{
    --arrow_posX: 5%;
    top: calc(var(--block-title-content) *.25 + var(--block-title) * .25);
  }

}


/* mobile */
@media (max-width:767px){
  .sec_04 .thumb_wrapper{ 
    --grid-number: 2; transform-origin: top center;
    display: none;
  }
  
  .races_wrapper{margin-top: calc(var(--block-title) * 0.5); display: block;}

  .races_wrapper .swiper-slide{ background-color: transparent;}

  .races_info{width:100%;}
  .races_wrapper .content{padding: 0;}

  .races_wrapper .sub li, .races_wrapper .sub .name{width: 100%;}

  .races_wrapper .sub .content{ padding: 3vw 3.5vw;}

  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{
    top: calc(var(--block-title) * .35);
  }


  .btn_scroll_up::after{
    font-size: calc(var(--block-title) * .65);
    margin-top: calc(-4 * var(--block-title) * .65);
  }
  
}

/* 隱藏選單，直接顯示種族說明 */
@media (max-width:500px){
  .sec_04 .thumb_wrapper, .btn_scroll_up{display: none;}
  .sec_04 .races_wrapper {display: initial;}

  .races_wrapper .swiper-slide {background-color: transparent;}

  .overall_wrap_info .name{ padding-top: 0;}

  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{
    top: calc(var(--block-title) * .05);
  }
}

@media (max-width:430px){
  /* sec_04  */
  .overall_wrap_info .name{

  font-size: calc(var(--block-title) * 1);
  }
  .races_wrapper .sub .name{  
  margin-top: calc(var(--block-title) * .25);
  margin-bottom: 0;
  font-size: calc(var(--block-title) * .85);
  }


  .races_wrapper .sub .sub1 .name{
    padding-left: calc(var(--block-title) * .5);
  }
  
  .races_wrapper .sub .sub2 .name{
    padding-right: calc(var(--block-title) * .5);
  }

  .races_wrapper .sub .pic{width: 100%; background-size: cover;}

  .overall_wrap_info .content,
  .races_wrapper .sub .content{ font-size: calc(var(--block-title-content) * 1);}

  .sec_04 .swiper-button-prev,
  .sec_04 .swiper-button-next{ --arrow_posX:2%; top: calc(var(--block-title) * .05);}
}
@media (max-width:300px){
.sec_04 .swiper-button-prev,
.sec_04 .swiper-button-next{ top: 0;}
}