:root {
  --tw-gradient-from: rgba(44, 44, 46, 1);
  --tw-gradient-to: rgba(44, 44, 46, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);   

  --block-title:3.6rem;
  --block-title-content:1.6rem;

  --decor-wt-bg:rgba(140, 145, 160, 1);
  --decor-bk-bg:rgba(236, 236, 239, 1);
  --block-title-color-wt-bg:rgb(34, 34, 36);
  --block-title-color-bk-bg:rgb(252, 252, 255);
  --block-subtitle-color:rgb(120, 120, 128);
  --maxW:1350px;

  --swiper-pagination-color: initial;
  --swiper-pagination-bullet-size: initial;
  --swiper-pagination-bullet-width: initial;
  --swiper-pagination-bullet-height: initial;
  --swiper-pagination-bullet-inactive-color: initial;
  --swiper-pagination-bullet-inactive-opacity: initial;
  --swiper-pagination-bullet-opacity: initial;
  --swiper-pagination-bullet-horizontal-gap: initial;
  --swiper-pagination-bullet-vertical-gap: initial;
}




html{font-size:15px; scroll-behavior: smooth;}
body{ 
  width:100%; margin:0; padding:0;
  font-family:'Noto Sans TC', 'Noto Serif HK', 'Noto Serif TC', 'Microsoft JhengHei','微軟正黑體', sans-serif, Verdana;
  overflow-x: hidden;
}

button,button,svg,
a, .btn, .btn *,.btn::before, .btn::after, .fixed_btn, .go_top, .go_top::before , .title_icons svg, *::before, *::after,
.swiper-pagination, .swiper-pagination *, .swiper-pagination *::before, .swiper-pagination *::after,
.swiper-button-prev,.swiper-button-prev::after, .swiper-button-next,.swiper-button-next::after
{transition: .25s cubic-bezier(0.4,0,0.2,1);}

i{margin-right: .25rem;}

a{cursor: pointer;}

img{width:100%; height:auto;}

svg, video{width:100%; height:100%;}

div[aria-hidden="true"] {opacity: 0; pointer-events: none; position: absolute; inset: 0; z-index:-1;}
div[aria-hidden="true"] img{width:100%; height:100%; object-fit:cover;}


@media (prefers-reduced-motion: no-preference) {
    body{scroll-behavior: smooth;}
  }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important;}
  }

/* --------↑版頭header↑-------- */



/* --------↓主要內容區塊↓-------- */

/* ↓section區塊設定↓ */
.sec_04 .block_content,
.sec_06 .block_content{
  width:100%; min-height: 100vh; position:relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}


/* ↑section區塊設定↑ */

/* ↓大項標題樣式↓ */
.title_name, .title_content{
  width:80%;  max-width: var(--maxW); position: relative; z-index: 1;
  display: flex; justify-content: center; flex-direction: column; align-items: center;
}

.title_content{
  --title-content-shadow: 1px 1px 1px rgba(0,0,0,.4), -1px 1px 1px rgba(0,0,0,.4), 0 0 0px rgba(0,0,0,.2);
  margin: calc(var(--block-title-content) * 1.5) 0;
  font-size: var(--block-title-content); text-align: center; letter-spacing: calc(var(--block-title-content) * .08);
  line-height:calc(var(--block-title-content) * 2);
  text-shadow: var(--title-content-shadow);
  -webkit-text-shadow: var(--title-content-shadow);
}

.title_icons{
  height:clamp(15px, calc(var(--block-title) * 1) , 64px); aspect-ratio: 1 / 1;
  margin-bottom: calc(-1 * var(--block-title) * 0.1); position: relative;
}

.title_icons svg{
  width:100%; height:100%;
  mask-size: 100% 100%; background-color:var(--block-title-color-wt-bg);
}

.sec_06 .title_icons svg{mask-image: url(../../../images/svg/header/02-2_job.svg);}
.sec_04 .title_icons svg{mask-image: url(../../../images/svg/header/02-3_race.svg);}


.top_decor, .bottom_decor{
  width:100%; margin:calc(var(--block-title) *.3) auto;
  display: flex; justify-content:space-between; align-items: center;
}

.decor{display: flex; justify-content: space-between; align-items: center; flex-grow: .5; flex-shrink: .5;}
.decor, .middle.ico{opacity: .8;}
.decor_item{display: flex; align-items: center;}

.decor_item svg{width:clamp(12px, calc(var(--block-title)* 0.35) , 24px); aspect-ratio: 16 / 5; mask-image: url(../images/svg/decor_arrow.svg);}
.rt .decor_item svg{transform: scaleX(-1);}

.top_decor svg, .bottom_decor svg,.decor.lt::after,.decor.rt::before{mask-size: 100% 100%;}

.line{
  height:2px;
  background:linear-gradient(to right, rgba(236, 236, 239, 0), var(--decor-bk-bg) 2%, var(--decor-bk-bg) 98%, rgba(236, 236, 239, 0));
  flex-grow:.49; flex-shrink:.49;
}
.sec_02 .line, .sec_04 .line, .sec_06 .line{
  background:linear-gradient(to right, rgba(140, 145, 160, .0), var(--decor-wt-bg) 2%, var(--decor-wt-bg) 98%, rgba(140, 145, 160, .0));}

.line.s{flex-grow:.5; flex-shrink: .5;}
.bottom_decor .line{margin:0; clip-path: polygon(99% 0, 100% 100%, 0 100%, 1% 0);}

.middle{width: fit-content; display: flex; justify-content: center; align-items: center;}
.middle.text{ margin:0 2.5%; text-align:center;}

.middle.text h3{ 
  font-family: "Noto Sans Display";
  font-weight: 900;
  font-stretch: condensed;
  font-variation-settings:"wdth" 75;
  text-transform: uppercase;
  font-size:clamp(15px, calc(var(--block-title) * 0.33) , 20px);
  line-height: 100%;
  letter-spacing:clamp(5px, calc(var(--block-title) * 0.19) , .53rem);  
  text-indent:0.5rem; white-space: nowrap;
}

.middle svg,
.decor.lt::after, .decor.rt::before,
.decor_item2 svg{
  width:clamp(4px, calc(var(--block-title) * 0.14) , 8px); aspect-ratio: 1 / 1.5; mask-image: url(../images/svg/star.svg);
}

.middle svg{width:clamp(7px, calc(var(--block-title) * 0.16) , 12px); margin:0 2px;}

.decor_item2{display: flex; justify-content: center; align-items: center;}

.decor.lt::after,.decor.rt::before{content:""; display: block;}
.decor.lt::after{ margin-left: calc(var(--block-title) * .05);}
.decor.rt::before{margin-right: calc(var(--block-title) * .05);}

.sec_title{
  font-size:var(--block-title); letter-spacing:calc(var(--block-title) * 0.075);
  line-height:calc(var(--block-title) * 1.25);
}
.sec_title h1{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

h1, h2, .sec_title{font-family:'Noto Serif HK'; font-weight: 800; text-align: center;}

.title_name{
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .9));
  filter: -webkit-drop-shadow(1px 1px 0 rgba(255, 255, 255, .9));
}


.top_decor svg, .bottom_decor svg, .decor.lt::after, .decor.rt::before{background-color:var(--decor-wt-bg);}

/* ↑大項標題樣式↑ */



/* swiper */
.swiper-button-prev, .swiper-button-next, .swiper-button-prev::after, .swiper-button-next::after
{transition: .25s cubic-bezier(0.4,0,0.2,1) !important;}

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

.swiper-button-prev::after,
.swiper-button-next::after{
  content:''; width:100%; height:100%;
  mask-image: url(../images/svg/slide_arrow.svg); mask-size: 100% 100%;
  position: absolute; /* left: 0; top: 0; */ z-index: 3;
  opacity: .9;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after{opacity: 1;}

.swiper-button-prev:hover::after{transform: scale(-1.2,1.2);}
.swiper-button-next:hover::after{transform: scale(1.2);}



@media (max-width:1280px){
  :root {
    --block-title:4.2vw;
    --block-title-content: 1.85vw;
  }
}

@media (max-width:1000px){
  :root {
    --block-title-content:2.5vw;
  }
}

@media (max-width:835px){
  :root {
    --sec_01_title:8.5vw;
  }
}

/* ------------------------mobile view-------------------------- */
@media (max-width:767px){
  :root {
    --block-title:8vw;
    --block-title-content:3.5vw;
  }

  .title_name, .title_content{ width:90%;}

  .title_icons{margin-bottom: calc(var(--block-title) *.2);}
    
  .top_decor, .bottom_decor{margin:calc(var(--block-title) *.1) auto;}


  .middle.text{margin:0 2%;}

  .middle.text h3{font-size:clamp(6px, calc(var(--block-title) * 0.4) , 15px); letter-spacing: .37rem;}

  .middle svg, .decor.lt::after, .decor.rt::before{width:clamp(4px, calc(var(--block-title) * 0.3) , 6px);}

  .decor_item svg{width:clamp(12px, calc(var(--block-title) * 0.5) ,16px);}

  .line{height:1px; margin:0 2px;}
}



@media (max-width:640px){
  :root {
    --block-title-content:3.4vw;
  }  
}


@media (max-width:500px){
  :root {
    --block-title:7.8vw;
    --block-title-content:3.9vw;
  }
}

@media (max-width:430px){
  :root {
    --btn-crystal:1.64rem;
    --sec_01_title:14vw;
  }

  body{ width:100vw;}
}

@media (max-width:410px){
  .title_name, .title_content{width:92%;}

}


@media (max-width:310px){
  :root {
    --block-title-content:5vw;
  }    
  .middle.text h3{letter-spacing:.1rem;}

  .line{margin:0 1px;}

}


@media (max-width:200px){
  :root {    
    --block-title:7.6vw;
  }
}