/* all sec_06 22個職業展示 */
:root{
  --job-pagination:80%;
  --job-thumb-size: 60px;
}

.sec_06 .block_content{ 
  background-color: #f2f2f5;
  background-image:url(../images/intro/job/bg_texture.png);
  background-repeat:repeat;
  background-size:auto;
  background-blend-mode:luminosity;
  color: var(--block-title-color-wt-bg);
  position: relative;
}


.job_wrapper{width:100%;}
.job_wrapper .swiper-slide{width:100%; height: auto; display: flex; transition: none;}
.job_wrapper .swiper-slide:not(.swiper-slide-active){opacity: 0 !important;}

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

.job_wrapper .pic{width:100%; height: 100%;}
.job_wrapper .pic img{
  width:100%; height:100%; object-fit:cover;
  opacity: 0; transform: translate(-30%);
  transition: opacity .3s linear, transform .4s cubic-bezier(.3, 1.2, .7, 1);
}

.job_wrapper .swiper-slide-active .pic img{opacity: 1; transform: translate(0);}

.job_wrapper .pic::before{
  content:""; width:40%; height: 100%;
  background: url(../images/intro/job/type3.webp) no-repeat left bottom; 
  display: block; position: absolute; top:0; left:0; z-index:-1;
  -webkit-mask-image: url(../images/intro/job/job_bg_mask.webp);
  mask-image: url(../images/intro/job/job_bg_mask.webp);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 1;
  transition: opacity .35s background-position .4s !important;
}

.job_01 .pic::before, .job_02 .pic::before, .job_03 .pic::before, .job_04 .pic::before{background-image: url(../images/intro/job/type1.webp);}
.job_05 .pic::before, .job_06 .pic::before, .job_07 .pic::before, .job_08 .pic::before{background-image: url(../images/intro/job/type2.webp);}

.job_wrapper .swiper-slide-active .pic::before{ background-position: right bottom; opacity: 1;}

.job_wrapper .name, .job_wrapper .content, .job_wrapper .mov{ width:100%; opacity: 0; transform: translateY(50px); backdrop-filter: blur(2px);}


.job_wrapper .name, .job_wrapper .content{
  filter: drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 8px rgba(255,255,255,.3));
  -webkit-filter: drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 8px rgba(255,255,255,.3));
}

.job_wrapper .name{  
  font-size: calc(var(--block-title) * .73); font-weight: 900; font-family: 'Noto Serif HK', 'Noto Serif TC', sans-serif;
  /* 全大寫 */
  /* text-transform: uppercase;  */
  display: flex;  align-items: center;
  transition: opacity .5s .1s, transform .6s cubic-bezier(.39,.71,.11,1.36) .1s !important;
}
.job_wrapper .swiper-slide-active .name,
.job_wrapper .swiper-slide-active .content,
.job_wrapper .swiper-slide-active .mov{opacity: 1; transform: translateY(0);}

.job_wrapper .name svg{
  width:calc(var(--block-title) * .75); aspect-ratio: 1 / 1; transform: translateY(3%);
  background-color:var(--block-title-color-wt-bg); mask-size: 100% 100%; 
}
.job_01 .name svg{ mask-image: url(../images/svg/job/01.svg)}
.job_02 .name svg{ mask-image: url(../images/svg/job/02.svg)}
.job_03 .name svg{ mask-image: url(../images/svg/job/03.svg)}
.job_04 .name svg{ mask-image: url(../images/svg/job/04.svg)}
.job_05 .name svg{ mask-image: url(../images/svg/job/05.svg)}
.job_06 .name svg{ mask-image: url(../images/svg/job/06.svg)}
.job_07 .name svg{ mask-image: url(../images/svg/job/07.svg)}
.job_08 .name svg{ mask-image: url(../images/svg/job/08.svg)}
.job_09 .name svg{ mask-image: url(../images/svg/job/09.svg)}
.job_10 .name svg{ mask-image: url(../images/svg/job/10.svg)}
.job_11 .name svg{ mask-image: url(../images/svg/job/11.svg)}
.job_12 .name svg{ mask-image: url(../images/svg/job/12.svg)}
.job_13 .name svg{ mask-image: url(../images/svg/job/13.svg)}
.job_14 .name svg{ mask-image: url(../images/svg/job/14.svg)}
.job_15 .name svg{ mask-image: url(../images/svg/job/15.svg)}
.job_16 .name svg{ mask-image: url(../images/svg/job/16.svg)}
.job_17 .name svg{ mask-image: url(../images/svg/job/17.svg)}
.job_18 .name svg{ mask-image: url(../images/svg/job/18.svg)}
.job_19 .name svg{ mask-image: url(../images/svg/job/19.svg)}
.job_21 .name svg{ mask-image: url(../images/svg/job/21.svg)}
.job_22 .name svg{ mask-image: url(../images/svg/job/22.svg)}

.job_wrapper .name span{width: fit-content; word-break: keep-all; white-space:nowrap;}
.job_wrapper .name span.zh{ margin:0 calc(var(--block-title) * .7 * .25);}
.job_wrapper .name span.en{ align-self: flex-end;}

.job_wrapper .content{
  margin: calc(var(--block-title-content) * .25) 0;
  padding: 0 0 0 calc(var(--block-title-content) * .5);
  font-size: calc(var(--block-title-content) * .9);
  line-height: calc(var(--block-title-content) * 1.6);
  transition: opacity .5s .15s,transform .6s cubic-bezier(.39,.71,.11,1.36) .15s !important;
}

.job_wrapper .mov{ 
  /* aspect-ratio: 488 / 274; */
  font-size:0; line-height:0; position: relative; overflow: hidden;
  box-shadow: 0 0 9px -2px rgba(0, 0, 0, .06), 0 2px 6px -2px rgba(0, 0, 0, .12), 0 2px 4px -2px rgba(0, 0, 0, .16);
  transition: opacity .5s .2s, transform .6s cubic-bezier(.39,.71,.11,1.36) .2s !important;
}
.job_wrapper .mov iframe{width:100%; aspect-ratio: 490/276;}

.job_wrapper .swiper-pagination{
  width: var(--job-pagination);
  margin-bottom: 1vw; padding:calc(1vw + var(--block-title-content)) 8px 1vw;
  left: 10%; bottom: 0;
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
@media screen and (min-width:1921px) {
  .job_wrapper .swiper-pagination{justify-content: center;}
}

.job_wrapper .swiper-pagination-bullet{
  min-width: var(--job-thumb-size); height: auto; aspect-ratio: 1 / 1; position: relative;
  margin: 0 8px;
  background-repeat: no-repeat; background-position: center center;
  background-size: 100% 100%; background-color: var(--decor-bk-bg);
  border-radius: initial; opacity: 1; flex: 1 0 auto;
  box-shadow: rgba(0, 0, 0, 0) 0 0 5px, rgba(0, 0, 0, 0) 0px 2px 4px;
  border: 0 solid rgba(252, 255, 255, 1);
}

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 1"]{ background-image: url(../images/intro/job/thumb/job_01.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 2"]{ background-image: url(../images/intro/job/thumb/job_02.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 3"]{ background-image: url(../images/intro/job/thumb/job_03.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 4"]{ background-image: url(../images/intro/job/thumb/job_04.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 5"]{ background-image: url(../images/intro/job/thumb/job_05.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 6"]{ background-image: url(../images/intro/job/thumb/job_06.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 7"]{ background-image: url(../images/intro/job/thumb/job_07.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 8"]{ background-image: url(../images/intro/job/thumb/job_08.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 9"]{ background-image: url(../images/intro/job/thumb/job_09.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 10"]{ background-image: url(../images/intro/job/thumb/job_10.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 11"]{ background-image: url(../images/intro/job/thumb/job_11.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 12"]{ background-image: url(../images/intro/job/thumb/job_12.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 13"]{ background-image: url(../images/intro/job/thumb/job_13.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 14"]{ background-image: url(../images/intro/job/thumb/job_14.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 15"]{ background-image: url(../images/intro/job/thumb/job_15.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 16"]{ background-image: url(../images/intro/job/thumb/job_16.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 17"]{ background-image: url(../images/intro/job/thumb/job_17.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 18"]{ background-image: url(../images/intro/job/thumb/job_18.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 19"]{ background-image: url(../images/intro/job/thumb/job_19.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 20"]{ background-image: url(../images/intro/job/thumb/job_21.webp);}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 21"]{ background-image: url(../images/intro/job/thumb/job_22.webp);}


.job_wrapper .swiper-pagination-bullet::before,
.job_wrapper .swiper-pagination-bullet::after{ 
  width: 100%; content:""; display: block;
  position: absolute; top:0; left:0;
}

.job_wrapper .swiper-pagination-bullet::before{
  height: 100%; z-index: 1;
  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2) 30%, rgba(0, 0, 0, 0.4) 70%);
}

.job_wrapper .swiper-pagination-bullet::after{ 
  --job_type-color1: rgba(65, 84, 162, .8);
  --job_type-color2: rgba(69, 108, 47, .8);
  --job_type-color3: rgba(133, 56, 55, .8);
  font-size: calc(var(--block-title-content) * .55); text-align: center;   
  color: var(--block-title-color-bk-bg); opacity: 0; z-index: -1;
  text-shadow: 0 0 2px var(--job_type-color3), 0 0 4px var(--job_type-color3), 0 0 6px var(--job_type-color3), 0 0 8px var(--job_type-color3);
}

.job_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active{ z-index: 3;}

.job_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active{
  transform: scale(1.2);
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px, rgba(0, 0, 0, 0.23) 0px 2px 4px;
  border-width: 2px;
}

.job_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active::before{ opacity: 0;}

.job_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active::after{opacity: 1; transform: translateY(-105%);}

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 1"]::after{ content: "騎士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 2"]::after{ content: "戰士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 3"]::after{ content: "暗黑騎士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 4"]::after{ content: " 絕槍戰士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 5"]::after{ content: "白魔道士";}

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 1"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 2"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 3"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 4"]::after{ text-shadow: 0 0 2px var(--job_type-color1), 0 0 4px var(--job_type-color3), 0 0 6px var(--job_type-color1), 0 0 8px var(--job_type-color1);}

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 5"]::after{ content: "白魔道士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 6"]::after{ content: "學者";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 7"]::after{ content: "占星術師";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 8"]::after{ content: "賢者";}

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 5"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 6"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 7"]::after,
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 8"]::after{text-shadow: 0 0 2px var(--job_type-color2), 0 0 4px var(--job_type-color2), 0 0 6px var(--job_type-color2), 0 0 8px var(--job_type-color2); }

.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 9"]::after{ content: "武僧";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 10"]::after{ content: "龍騎士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 11"]::after{ content: "忍者";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 12"]::after{ content: "武士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 13"]::after{ content: "奪魂者";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 14"]::after{ content: "吟遊詩人";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 15"]::after{ content: "機工士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 16"]::after{ content: "舞者";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 17"]::after{ content: "黑魔道士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 18"]::after{ content: "召喚士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 19"]::after{ content: "赤魔道士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 20"]::after{ content: "毒蛇劍士";}
.job_wrapper .swiper-pagination-bullet[aria-label="Go to slide 21"]::after{ content: "繪靈法師";}


/* navigation滾動按鈕 */
.sec_06 .button-scrollbar{
  width: calc(var(--job-pagination) + var(--job-thumb-size) * 2 *.8);
  height: var(--job-thumb-size);
  padding:0; margin:0;
  position: absolute; left: 50%; bottom: calc(2vw + 12px) ; z-index: 99; transform: translateX(-50%); z-index: 9;
  display: flex; justify-content: space-between; align-items: center;
  transition: .3s;
  opacity: 0; pointer-events: none;
}
.sec_06 .button-scrollbar.active{ opacity: 1; pointer-events: initial;}

.sec_06 .swiper-button-prev,
.sec_06 .swiper-button-next{
  width: calc(var(--job-thumb-size) * .75); height:auto; aspect-ratio: 1 / 1;  
  margin: initial; padding: initial;
  position: relative; inset: initial;
  transform: initial;
}
.sec_06 .swiper-button-prev{ left:0;}
.sec_06 .swiper-button-next{ right:0;}

.sec_06 .swiper-button-prev::before{--color-code: 0, 0, 0;}
.sec_06 .swiper-button-next::before{--color-code: 255, 255, 255;}

.sec_06 .swiper-button-prev::before,
.sec_06 .swiper-button-next::before{
  content: ""; width: 75%; height: 100%; display: block;
  background-image: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%, rgba(35, 35, 32, 1) 100%);
  position: absolute;
  border-radius: 12%;
  border: 1px solid var(--decor-wt-bg);
  opacity: .7;
}

.sec_06 .swiper-button-prev::after{ background-color:var(--block-title-color-bk-bg);}
.sec_06 .swiper-button-next::after{ background-color:var(--block-title-color-bk-bg);}



@media (hover) {
  .job_wrapper .swiper-pagination-bullet:hover{
    transform: scale(1.2);
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px, rgba(0, 0, 0, 0.23) 0px 2px 4px;
    border-width: 2px;
    z-index: 4;
  }

  .job_wrapper .swiper-pagination-bullet:hover::before{ opacity: 0;}

  .job_wrapper .swiper-pagination-bullet:hover::after{
    opacity: 1; transform: translateY(-105%);
  }

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

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


}



@media screen and (min-width:768px) {
   /* only wide sec_06 22個職業展示 */
 .sec_06 .block_content{background-position: left top, right -20%; justify-content: flex-start; align-items: center;}

 .job_info{ width:50%; min-height: 100vh; height: 100%; padding-right: 2%;}

 .job_wrapper .mov{ max-width: 490px;}

 .sec_06 .title_name{
   width: 47% /* calc(var(--block-title) * 1.08 * 9) */;
   position: absolute; left: 50%; top: calc(var(--block-title) * .5); z-index: 2;
   flex-direction: row; flex-wrap: wrap;
  }

 /* .sec_06 .title_icons{ transform: translateY(calc(-1 * var(--block-title) *.24));} */
 /* .sec_06 .top_decor{width: fit-content; flex-grow: 1; flex-shrink: 1;}
 .sec_06 .top_decor .decor.rt{ flex-grow: 1; flex-shrink: 1;} */
 /* .sec_06 .top_decor .decor.lt{ display: none;} */
 .sec_06 .sec_title{width: 100%;}

 .job_wrapper{ height: 100%;}

 .job_wrapper .swiper-slide{ flex-direction: column; align-items: flex-end;}

 .job_wrapper .pic{position: absolute; left: 0; bottom: 0; z-index: -1;}
}

@media screen and (min-width:1580px) {
  .job_03 .pic img{ object-position: 60% bottom;}
  .job_04 .pic img{ object-position: 80% bottom;}
  .job_05 .pic img{ object-position: 65% bottom;}
  .job_06 .pic img{ object-position: 68% bottom;}
  .job_07 .pic img{ object-position: 60% bottom;}
  .job_08 .pic img{ object-position: 60% bottom;}
  .job_09 .pic img{ object-position: 68% bottom;}
  .job_10 .pic img{ object-position: 69% bottom;}
  .job_15 .pic img{ object-position: 58% bottom;}
  .job_16 .pic img{ object-position: 65% bottom;}
  .job_18 .pic img{ object-position: 69% bottom;}
  .job_19 .pic img{ object-position: 65% bottom;}
}

@media screen and (min-width:768px) and (max-width:1480px) {
  /* sec_06 22個職業展示 */
  .job_wrapper .name, .job_wrapper .content{
    filter: 
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,1)) 
    drop-shadow(0 0 4px rgba(255,255,255,.5))
    drop-shadow(0 0 8px rgba(255,255,255,.3))
    drop-shadow(0 0 8px rgba(255,255,255,.3));
    -webkit-filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,.5))
    drop-shadow(0 0 8px rgba(255,255,255,.3))
    drop-shadow(0 0 8px rgba(255,255,255,.3));
  }

}

@media screen and (min-width:768px) and (max-width:1280px) {
  /* sec_06 22個職業展示 */
  .job_01 .pic img, 
  .job_02 .pic img, 
  .job_03 .pic img, 
  .job_04 .pic img, 
  .job_05 .pic img, 
  .job_06 .pic img, 
  .job_07 .pic img, 
  .job_08 .pic img, 
  .job_09 .pic img, 
  .job_10 .pic img, 
  .job_11 .pic img, 
  .job_12 .pic img, 
  .job_13 .pic img, 
  .job_14 .pic img, 
  .job_16 .pic img, 
  .job_17 .pic img, 
  .job_18 .pic img, 
  .job_19 .pic img,
  .job_21 .pic img, 
  .job_22 .pic img { object-position: 50% bottom;}  
}
@media screen and (min-width:768px) and (max-width:1050px) {
  /* sec_06 22個職業展示 */
  .job_01 .pic img{ object-position: 40% bottom;}
  .job_02 .pic img{ object-position: 45% bottom;}
  .job_03 .pic img{ object-position: 40% bottom;}
  .job_04 .pic img{ object-position: 44% bottom;}
  .job_05 .pic img{ object-position: 45% bottom;}
  .job_06 .pic img{ object-position: 45% bottom;}
  .job_07 .pic img{ object-position: 35% bottom;}
  .job_08 .pic img{ object-position: 40% bottom;}
  .job_09 .pic img{ object-position: 45% bottom;}
  .job_10 .pic img{ object-position: 40% bottom;}
  .job_11 .pic img{ object-position: 32% bottom;}
  .job_12 .pic img{ object-position: 45% bottom;}
  .job_13 .pic img{ object-position: 48% bottom;}
  .job_14 .pic img{ object-position: 43% bottom;}
  .job_16 .pic img{ object-position: 45% bottom;}
  .job_17 .pic img{ object-position: 45% bottom;}
  .job_18 .pic img{ object-position: 45% bottom;}
  .job_19 .pic img{ object-position: 45% bottom;}
  .job_21 .pic img{ object-position: 40% bottom;}
  .job_22 .pic img{ object-position: 40% bottom;}

}

@media screen and (max-width:1510px) {
  /*sec_06 22個職業展示 */

 .sec_06 .title_name{ left: initial; right: 3%;}

.sec_06 .title_name{ width: 54%;}
 .job_info{ width: 57%;}

}




/* mobile */
@media (max-width:767px){

  /* mobile sec_06 22個職業展示 */
  .sec_06 .block_content{padding :calc(var(--block-title) * .5) 0;}
  .sec_06 .title_name{ width: 90%; right:initial;}

  .job_wrapper{margin-top: calc(var(--block-title) * 0.5);}

  .job_wrapper .swiper-slide{justify-content: center; align-items: center;}
  /* .job_wrapper .swiper-slide:not(.swiper-slide-active){height: 0;} */

  .job_info{width:100%; justify-content: center;}

  .job_wrapper .pic::before{
    width:100%; height: auto; aspect-ratio: 1 / .93;
    transform: scale(-1);
  }

  .job_wrapper .swiper-slide-active .pic::before{background-size: cover;}

  .job_wrapper .name,
  .job_wrapper .content,
  .job_wrapper .mov{width: 85%;}

  .job_wrapper .content{padding: 0;}

  .job_wrapper .swiper-pagination{
    --top-size:350;
    --padding-top-var:4vw;
    width:100%; padding-top: calc(var(--padding-top-var) + var(--block-title-content) *.9); padding-bottom: 2vw;
    left: 0; right:initial; top: calc(100vw * var(--top-size) / 376); bottom: initial;
  }
  .job_wrapper .swiper-pagination-bullet{width: 16vw; margin: 0 1vw !important;}

  .job_wrapper .swiper-pagination-bullet::before{border-width: 2px;}
  .job_wrapper .swiper-pagination-bullet::after{font-size: calc(var(--block-title-content) * .9);}

  .job_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active::before{border-color: rgba(255, 255, 255, 1);}

  .button-scrollbar,
  .sec_06 .swiper-button-prev,
  .sec_06 .swiper-button-next{ opacity: 0; pointer-events: 0; display: none !important;}
 

  @media (hover) {
    .job_wrapper .swiper-pagination-bullet:hover::before{border-color: rgba(255, 255, 255, 1);}
    .job_wrapper .swiper-pagination-bullet:hover{transform: scale(1.2);}
  }
}


@media (max-width:430px){
  /* sec_06  */
  .job_wrapper .name{ font-size: calc(var(--block-title) * .85);;}
  
  .job_wrapper .content{padding: 0; font-size: calc(var(--block-title-content) * 1);}

  .job_wrapper .swiper-pagination{ --top-size:360;  padding-bottom: 3vw;}

}

@media (max-width:310px){
  .job_wrapper .swiper-pagination{ --padding-top-var:5vw;}
}