/*---- font ----*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

/*---- basic ----*/
*, :after, :before, a {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  outline: none;
  font-family: 'Noto Sans TC', 微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;
  /*font-family: 'Noto Serif TC', 微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;*/
}
ul, ol, li {
  margin: 0 auto;
  text-align: justify;
}
a {
  text-decoration: none;
}
html, body, section, footer {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
header img, section img, .popup img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}
header .container, section .container {
  position: relative;
  margin: 0 auto;
  padding: initial;
  max-width: initial;
  width: 100%;
}
header, section {
  position: relative;
  overflow: hidden;
}
section .title {
  position: relative;
  margin: 0 auto;
  width: 34%;
  z-index: 1;
  transform: translateZ(1px);
}
section .title p {
  margin: 1.5% auto;
  width: 63%;
  font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif;
  font-size: .93vw;
  font-weight: 400;
  letter-spacing: .5px;
  text-align: center;
}
section .content {
  position: relative;
  width: 100%;
}
.btn {
  border: initial;
  border-radius: initial;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 18.486%;
  line-height: initial;
  z-index: 1;
  transform: translateZ(1px);
}
.btn:focus {
  box-shadow: initial;
}
.btn img {
  transition: .3s;
}
.btn img:hover {
  filter: brightness(1.1);
}

/*---- scrollbar ----*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  overflow: visible;
}
::-webkit-scrollbar-thumb {
  border: solid transparent;
  border-width: 0 0 0 0px;
  padding: 100px 0 0;
  min-height: 28px;
  background-color: #3f5f71;
  background-clip: padding-box;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #3f5f71;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:active {
  background-color: #3f5f71;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  background-color: #071013;
}

/*---- header ----*/
header {
  aspect-ratio: 1920 / 1002;   /* 依 kv_bg.webp 圖片長寬 */
  background: #000;
}
header .kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* KV 進場：畫面大到小淡入 */
@keyframes kvZoomIn {
  from {
    opacity: 0;
    transform: scale(1.35);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.kvZoomIn {
  animation-name: kvZoomIn;
}
aside {
  position: fixed;
  padding-top: 25.44%;    /* 依 aside/bg.webp 189x439 比例（10.95% × 439/189），整體等比再縮小 */
  width: 10.95%;
  right: 0;
  bottom: 22%;
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/aside/bg.webp) no-repeat center top;
  background-size: 100%;
  z-index: 5;
  transform: translateZ(5px);
}
aside .btn_game {
  position: absolute;
  left: 12.5%;              /* 左右對稱內距 → 置中，寬度由內距決定（100% − 左 − 右）*/
  right: 15.5%;
  bottom: 15%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}
aside .btn_game  a {
  position: relative;
  margin: 3% auto;
  display: block;
  width: 100%;
  transition: .3s;
}
aside .btn_game  a:hover {
  filter: brightness(1.1);
}
/* ===== 手機底部浮動列 noke_flex_sp（PC 隱藏；≤767.98px 顯示，對應 aside）=====
   顯示/滑出樣式在 @media (max-width:767.98px) 區塊 */
.noke_flex_sp {
  display: none;
}
header .logo {
  position: absolute;
  left: 1%;
  top: 4%;
  width: 13.055%;
  z-index: 1;
}
header .btn {
  position: absolute;
  left:14.5%;                  
  top: 75%;                     
  z-index: 1;
  filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, .8));
}
/* KV 標題（照圖片長寬比 800x398）*/
header .kv_title {
  position: absolute;
  left: 5%;
  top: 42.5%;
  width: 35%;
  aspect-ratio: 800 / 398;
  z-index: 1;
}

/*---- sec01 ----*/
.sec01, .sec02 {
  padding-top: 5.5%;
}
.sec01 {
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec01_bg.webp) no-repeat center top;
  background-size: cover;
}
.sec01 .line, .sec02 .line {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.sec01 .line, .sec02 .line {
  aspect-ratio: 1920 / 114;
}
.sec01 .line img, .sec02 .line img, .sec03 .line img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PC：line 上移 2% 並壓在區塊上（裁切改由 .container 負責，避免 section 剪掉溢出的 line） */
@media (min-width: 576px) {
  .sec01, .sec02 {
    overflow: visible;
  }
  .sec01 .container, .sec02 .container {
    overflow: hidden;
  }
  .sec01 .line, .sec02 .line {
    top: -2%;
    z-index: 2;
  }
}
.sec01 .content {
  padding-top: 34%;
}
.sec01 .content .rewards {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.sec01 .content .prelogin, .sec01 .content .finish {
  position: absolute;
  width: 18.5%;
  top: 19%;
  left: 28.5%;
}
.sec01 .content .finish {
  top: 23%;
}
.sec01 .content .prelogin p, .sec01 .content .finish p {
  position: relative;
  margin: 6% auto 3% auto;
  width: 80%;
  color: #ffffff;
  font-size: .83vw;
  text-align: justify;
  letter-spacing: .03vw;
  line-height: 1.4vw;
}
.sec01 .content .prelogin p span, .sec01 .content .finish p span {
  margin: 0 .3vw;
  color: #e3d1b1;
}
.sec01 .content .prelogin .btn, .sec01 .content .finish .btn {
  margin-top: 7%;
  width: 73.44%;
  filter: drop-shadow(0px 1px 10px rgba(0, 0, 0, .5));
}
/* pattern 改為純間距元素（不放圖），高度沿用原 sec01_pattern 比例 383x37 */
.sec01 .content .pattern {
  padding-top: 9.66%;
}

/*---- sec02 ----*/
.sec02 {
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec02_bg.webp) no-repeat center top;
  background-size: cover;
}
.sec02 .content {
  padding-bottom: 2%;
}
.sec02 .content .roles, .sec02 .content .roles .role {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -12%;
}
.sec02 .content .roles .role {
  margin-left: 2%;
  opacity: 0;
  transition: .5s;
}
.sec02 .content .roles .role.active {
  margin-left: 0;
  opacity: 1;
}
.sec02 .content .role_skill {
  position: absolute;
  padding-top: 30%;
  width: 30%;
  top: -1%;
  left: 19%;
  filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, .95))drop-shadow(0px 15px 20px rgba(0, 0, 0, .5));
  z-index: 1;
}
.sec02 .content .role_skill .skill {
  position: absolute;
  width: 20%;
  cursor: pointer;
}
.sec02 .content .role_skill .skill.s1 {
  top: 35%;
  left: -1%;
}
.sec02 .content .role_skill .skill.s2 {
  top: 44%;
  left: 9%;
}
.sec02 .content .role_skill .skill.s3 {
  top: 68%;
  left: 27%;
}
.sec02 .content .role_skill .skill.s4 {
  top: 76.5%;
  left: 58%;
}
.sec02 .content .role_skill .skill.s5 {
  top: 78%;
  left: 88%;
}
.sec02 .content .role_skill .skill .tt {
  border-radius: 5px;
  position: absolute;
  padding: 10% 12%; 
  width: 350%;
  top: -85%;
  left: 50%;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  z-index: 1;
  transform: translateX(-50%)translateZ(1px);
  pointer-events: none;
  transition: .3s;
}
.sec02 .content .role_skill .skill .tt::after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 8px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/triangle.webp) no-repeat center top;
  background-size: 100%;
}
.sec02 .content .role_skill .skill:hover .tt {
  opacity: 1;
}
.sec02 .content .role_skill .skill .tt span {
  display: -webkit-box;
  color: #f8f9fa;
  font-size: .72vw;
  text-align: justify;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}
.sec02 .content .role_info {
  position: relative;
  margin: 2.5% auto 2%;
  margin-right: 19.5%;
  width: 26.6%;
}
.sec02 .content .role_info .type {
  position: relative;
  width: 100%;
}
.sec02 .content .role_info .type .tt {
  position: relative;
  margin-left: 0;
  width: 70.48%;
}
.sec02 .content .role_info .type .gender {
  position: absolute;
  width: 25.129%;
  right: 0;
  bottom: 26%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}
.sec02 .content .role_info .type .gender li {
  position: relative;
  padding-bottom: 21.88%;
  width: 50%;
  list-style: none;
  cursor: pointer;
}
.sec02 .content .role_info .type .gender li:nth-child(1) {
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/gender_left.webp) no-repeat center top;
  background-size: 100%;
}
.sec02 .content .role_info .type .gender li.active:nth-child(1) {
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/gender_left_active.webp) no-repeat center top;
  background-size: 100%;
}
.sec02 .content .role_info .type .gender li:nth-child(2) {
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/gender_right.webp) no-repeat center top;
  background-size: 100%;
}
.sec02 .content .role_info .type .gender li.active:nth-child(2) {
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/gender_right_active.webp) no-repeat center top;
  background-size: 100%;
}
.sec02 .content .role_info p {
  position: relative;
  margin: 5% auto 3%;
  margin-left: 3.5%;
  width: 96%;
  color: #f8f9fa;
  font-size: .83vw;
  text-align: justify;
  letter-spacing: .03vw;
  line-height: 1.4vw;
}
.sec02 .content .role_info .pattern {
  position: relative;
  margin-left: 3.5%;
  width: 97.375%;
}
.sec02 .content .role_info .role_video_all {
  position: relative;
  margin-top: 4%;
  margin-left: 3%;
  padding-top: 56.055%;
  width: 98.5%;
}
.sec02 .content .role_info .role_video_all::after { 
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0%;
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/sec02_frame.webp) no-repeat center top;
  background-size: 100%;
  z-index: 1;
  transform: translateZ(1px);
}
.sec02 .content .role_info .role_video_all .role_video {
  position: absolute;
  width: 96.5%;
  height: 96.5%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 0;
  transition: .5s;
}
.sec02 .content .role_info .role_video_all .role_video.active {
  opacity: 1;
  z-index: 1;
}
.sec02 .content .role_info .role_video_all .role_video img {
  position: absolute;
  top: 0;
  left: 0;
}
.sec02 .content .role_info .role_video_all .role_video video {
  position: absolute;
  width: 100%;
  height: 99%;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
}
.sec02 .content .bottom {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  width: 30.68%;
  filter: drop-shadow(0px 1px 10px rgba(0, 0, 0, .5));
  z-index: 1;
}
.sec02 .content .bottom .btn {
  margin: 0 1%;
  width: 50%;
}

/*---- footer ----*/
footer {
  color: #000000;
  font-size: .62vw;
  font-weight: 400;
  background: #ffffff;
}
footer .container {
  position: relative;
  padding: .6vw;
  max-width: initial;
  width: 100%;
  text-align: center;
}
footer .container .copyright, footer .container .copyright .company, footer .container .copyright p, footer .container .grading, footer .container .grading img, footer .container .grading ul {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}
footer .container .copyright img {
  width: 7.5vw;
}
footer .container .copyright a img {
  margin-left: .4vw;
  width: 5.782vw;
}
footer .container .copyright p {
  margin-left: .4vw;
  text-align: left;
}
footer .container .copyright p a {
  color: #000000;
}
footer .container .copyright p a:hover {
  text-decoration: underline;
}
footer .container .grading {
  margin-left: 1vw;
}
footer .container .grading img {
  width: 1.9795vw;
}
footer .container .grading ul {
  margin-left: .4vw;
  padding-left: 0;
  list-style: none;
}

/*---- modal ----*/
.modal-backdrop.show {
  opacity: .7;
}
.popup .modal-dialog {
  margin: 0 auto;
  max-width: initial;
  width: 40.261%;
}
.popup .modal-dialog.modal-dialog-centered {
  min-height: 100%;
}
.popup .modal-dialog .modal-content {
  border-radius: initial; 
  border: none;
  height: 23.2295vw;
  background: url(https://images4.iwplay.com.tw/image/pwm/events/20260717/images/popup/bg.webp) no-repeat center top;
  background-size: 100%;
}
.popup .modal-dialog .modal-content .modal-header {
  border: initial;
  margin: 7% auto 5%;
  padding: 0;
  width: 100%;
}
.popup .modal-dialog .modal-content .modal-header .title {
  width: 38.81%;
}
.popup .modal-dialog .modal-content .modal-body {
  margin: 0 auto 10%;
  padding: 0;
  padding-left: 0;
  width: 75%;
  overflow-y: auto;
  text-align: center;
}
#eventAlertModal .modal-dialog .modal-content .modal-body {
  margin-top: 26%;
}
#eventAlertModal .modal-dialog .modal-content .modal-body, #eventAlertModal .modal-dialog .modal-content .modal-body p {
  color: #4a6a76;
  font-size: 1.6vw;
  font-weight: 700;
}
.popup .modal-dialog .modal-content .modal-body::-webkit-scrollbar {
  height: 4px;
  overflow: visible;
  width: 4px;
}
.popup .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .1);
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 0px;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
  cursor: pointer;
}
.popup .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, .1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}
.popup .modal-dialog .modal-content .modal-body::-webkit-scrollbar-track {
  background: none;
}
.popup .modal-dialog .modal-content .modal-body ol, .popup .modal-dialog .modal-content .modal-body ul {
  padding-left: 1.4vw;
  color: #4a6a76;
  font-size: .83vw;
  font-weight: 400;
  line-height: 1.2vw;
}
.popup .modal-dialog .modal-content .modal-body ol li {
  margin-bottom: .3vw;
}
.popup .modal-dialog .modal-content .modal-body ul li {
  margin-bottom: 0;
}
.popup .modal-dialog .modal-content .modal-body p {
  margin-bottom: 0;
}
.popup .modal-dialog .modal-content .modal-body table {
  width: 100%;
  font-size: .83vw;
  text-align: center;
}
.popup .modal-dialog .modal-content .modal-body table thead {
  border-bottom: 1px solid #4a6a76;
  color: #ffffff;
  background: #4a6a76;
}
.popup .modal-dialog .modal-content .modal-body table thead tr th, .popup .modal-dialog .modal-content .modal-body table tbody tr td {
  padding: .3vw;
  width: 22%;
}
.popup .modal-dialog .modal-content .modal-body table thead tr th {
  font-weight: 400;
  letter-spacing: .05vw;
}
.popup .modal-dialog .modal-content .modal-body table tbody tr:nth-child(odd) {
  background: #f3f7fe;
}
.popup .modal-dialog .modal-content .modal-body table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .6);
}
.popup .modal-dialog .modal-content .modal-body table tbody tr td p {
  font-size: .83vw;
  font-weight: 400;
}
.popup .modal-dialog .modal-content .modal-body table tbody tr td .btn_copy {
  padding: .1vw;
  color: #ffffff;
  font-size: .83vw;
  font-weight: 300;
  background: #4a6a76;
  cursor: pointer;
  transition: .3s;
}
.popup .modal-dialog .modal-content .modal-body table tbody tr td .btn_copy:hover {
  background: #0d161f;
}
.popup .modal-dialog .modal-content .popup_close {
  position: absolute;
  display: block;
  padding-top: 6.728%;
  width: 6.728%;
  top: 9%;
  right: 5%;
  background: url(https://images4.iwplay.com.tw/image/pwm/events/20260717/images/popup/close.webp) no-repeat center top;
  background-size: 100%;
  cursor: pointer;
  transition: .5s;
}
.popup .modal-dialog .modal-content .popup_close:hover {
  transform: rotate(180deg);
}

/* ≤767.98px：隱藏 PC 的 aside，顯示手機底部浮動列 noke_flex_sp */
@media (max-width: 767.98px) {
  aside {
    display: none;
  }
  .noke_flex_sp {
    position: fixed;
    left: 0;
    bottom: -26%;                 /* 預設沉在畫面外（看不到）*/
    width: 100%;
    padding-bottom: 29.17%;       /* 依 aside/flex_bg_m.webp 1080x315 比例 */
    background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/aside/flex_bg_m.webp) no-repeat center top;
    background-size: 100%;
    z-index: 99;
    transition: all .5s ease;
    cursor: pointer;
    display: block;               /* 手機才顯示 */
  }
  .noke_flex_sp.scroll {
    bottom: 0%;                   /* 捲動觸發（JS 加 .scroll）→ 滑到底部露出 */
  }
  .noke_flex_sp .btn_box {
    position: absolute;
    top: 59%;
    left: 2%;
    width: 66%;
    height: 40%;
    z-index: 22;
  }
  .noke_flex_sp .btn_box a {
    padding: 1%;
  }
  .noke_flex_sp .download_btn {
    position: absolute;
    top: 10%;
    left: 3%;
    width: 40%;
  }
  .noke_flex_sp .go_fb_btn {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 40%;
  }
}

@media (max-width: 1199.98px) {
  footer {
    padding: 3vw 0;
    font-size: 1vw;
    min-height: initial !important;
  }
  footer .container .copyright .company, footer .container .grading {
    display: block;
  }
  footer .container .copyright img {
    width: 12.011vw;
  }
  footer .container .copyright a img {
    margin-left: 1vw;
    width: 9.258vw;
  }
  footer .container .copyright p {
    margin: 1.5vw auto;
    text-align: center;
  }
  footer .container .grading img {
    width: 3.17vw;
  }
}

@media (max-width: 991.98px) {
  footer {
    font-size: 1.3vw;
  }
  footer .container .copyright img {
    width: 14.531vw;
  }
  footer .container .copyright a img {
    width: 11.202vw;
  }
  footer .container .grading img {
    width: 3.835vw;
  }
}

@media (max-width: 768px) {
  footer {
    font-size: 1.7vw;
  }
  footer .container .copyright img {
    width: 18.775vw;
  }
  footer .container .copyright a img {
    width: 14.474vw;
  }
  footer .container .grading img {
    width: 4.955vw;
  }
}

@media (max-width: 575.98px) {
  section .title {
    width: 95%;
  }
  /* 手機：只有 sec01 的 title 下方加 3% 外距 */
  .sec01 .title {
    margin-bottom: 3%;
  }
  header {
    aspect-ratio: 1080 / 1638;   /* 覆蓋桌機 1920/1002，配合手機 kv_m 完整呈現 */
    padding-top: 0;
    background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/kv_m.webp) no-repeat center top;
    background-size: 100% 100%;   /* 比例已對，填滿不裁切/不變形 */
  }
  header .kv, .sec02 .content .role_skill .skill .tt, .sec02 .content .role_skill .skill:hover .tt {
    display: none;
  }
  header .logo {
    position: absolute;
    top: 3%;
    left: 4%;
    width: 35%;
    margin: 0;
  }
  header .btn {
    position: absolute;
    left:20%;
    top: auto;         
    bottom: 6%;
    width: 60%;
    margin: 0;
  }
  header .kv_title {
    top: auto;         
    width: 90%;
    bottom: 15%;
    left: 1.5%;
  }
  .sec01, .sec02 {
    padding-top: 16%;
    overflow: visible;        /* 讓 line 往上溢出不被裁切 */
  }
  .sec01 {
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec01_bg_m.webp);   /* 手機背景 1080x2218 */
    background-size: 100%;                              /* 全寬、依原比例 */
  }
  .sec01 .container, .sec02 .container {
    overflow: hidden;         /* 內容照樣裁切（避免橫向捲動/人物溢出）*/
  }
  /* 手機：sec01 底部留白加在 container（content 外層），不改 content 高度→內部子元素定位不變 */
  .sec01 .container {
    padding-bottom: 10%;
  }
  .sec01 .line, .sec02 .line{
    width: 100%;
    left: 0;
    top: -1.5%;               /* 上移蓋住上方區塊 */
    transform: none;
    aspect-ratio: 1080 / 152;   /* 依 secline_m.webp 長寬 */
    background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/secline_m.webp) no-repeat center / 100% 100%;
    z-index: 2;
  }
  .sec01 .line img, .sec02 .line img{
    display: none;              /* 手機改用 secline_m 背景，隱藏桌機 line 圖 */
  }
  .sec01 .content {
    padding-top: 172%;
  }
  .sec01 .content .rewards {
    bottom: initial;
    top: 0;
  }
  .sec01 .content .prelogin, .sec01 .content .finish {
    width: 80%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    height: 85%;
    display: flex;
    flex-direction: column;   /* 手機：.text 最上，其餘 margin-top:auto 貼底 */
  }
  .sec01 .content .prelogin p, .sec01 .content .finish p {
    font-size: 3.4vw;
    line-height: 5.4vw;
    margin-top: auto;   /* p 起（p / pattern / btn）整組貼底 */
  }
  .sec01 .content .prelogin .btn, .sec01 .content .finish .btn {
    margin-top: 4%;
    width: 61%;
  }
  .sec02 {
    background-position: 20% top;
  }
  .sec02 .content {
    padding-bottom: 8%;
  }
  .sec02 .content::after {
    content: "";
    position: absolute;
    display: block;
    padding-top: 150%;
    width: 100%;
    bottom: 5%;
    background: linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, .8) 30% ,rgba(0, 0, 0, 0) 95%);
    z-index: 0;
  }
  .sec02 .content .roles, .sec02 .content .roles .role {
    width: 160%;
    left: -19%;
    bottom: 55%;
  }
  .sec02 .content .role_info {
    position: relative;
    margin-right: initial;
    margin: 45% auto 5%;
    margin-left: 3.5%;
    width: 90%;
    z-index: 1;
  }
  .sec02 .content .role_info p {
    margin: 5% auto 1%;
    margin-left: 3.5%;
    font-size: 3.4vw;
    line-height: 5.4vw;
  }
  .sec02 .content .role_info .role_video_all {
    margin-top: 1%;
  }
  .sec02 .content .role_skill {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5%;
    padding-top: initial;
    width: 85%;
    top: initial;
    left: initial;
  }
  .sec02 .content .role_skill .skill {
    width: 16%;
  }
  .sec02 .content .role_skill .skill, 
  .sec02 .content .role_skill .skill.s1, 
  .sec02 .content .role_skill .skill.s2, 
  .sec02 .content .role_skill .skill.s3, 
  .sec02 .content .role_skill .skill.s4, 
  .sec02 .content .role_skill .skill.s5 {
    position: relative;
    top: initial;
    left: initial;
  }
  .sec02 .content .bottom {
    width: 97%;
  }
  .sec02 .content .bottom .btn {
    margin: 0 auto;
  }
  footer {
    padding: 6vw 0;
    font-size: 2vw;
  }
  footer .container .copyright img {
    width: 25.045vw;
  }
  footer .container .copyright a img {
    width: 19.305vw;
  }
  footer .container .copyright p {
    margin: 2.5vw auto;
  }
  footer .container .grading img {
    width: 6.61vw;
  }
  footer .container .grading ul {
    margin-left: 1vw;
  }
  .popup .modal-dialog {
    width: 95%;
  }
  .popup .modal-dialog .modal-content {
    height: 113vw;
    background: url(https://images4.iwplay.com.tw/image/pwm/events/20260717/images/popup/bg_m.webp) no-repeat center top;
    background-size: 100%;
  }
  .popup .modal-dialog .modal-content .modal-header {
    margin: 8% auto;
  }
  .popup .modal-dialog .modal-content .modal-header .title {
    width: 55%;
  }
  #eventAlertModal .modal-dialog .modal-content .modal-body {
    margin-top: 50%;
  }
  #eventAlertModal .modal-dialog .modal-content .modal-body, #eventAlertModal .modal-dialog .modal-content .modal-body p {
    font-size: 6vw;
  }
  .popup .modal-dialog .modal-content .modal-body ol, .popup .modal-dialog .modal-content .modal-body ul, .popup .modal-dialog .modal-content .modal-body table {
    padding-left: 4.4vw;
    font-size: 3.4vw;
    line-height: 4.4vw;
  }
  .popup .modal-dialog .modal-content .modal-body ol li {
    margin-bottom: 1.2vw;
  }
  .popup .modal-dialog .modal-content .modal-body ul li {
    margin-bottom: 0;
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr td p {
    margin-right: 3vw;
    font-size: 3vw;
    width: 38vw;
  }
  .popup .modal-dialog .modal-content .modal-body table thead {
    border: none;
  }
  .popup .modal-dialog .modal-content .modal-body table thead tr th {
    display: none;
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, .5);
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .6);
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr td, .popup .modal-dialog .modal-content .modal-body table tbody tr td:last-child {
    display: block;
    padding: 1% 2%;
    width: 100%;
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr td:before {
    content: attr(data-th) " ";
    display: block;
    width: 30%;
    text-align: center;
    font-weight: bold;
    float: left;
    color: #4a6a76;
  }
  .popup .modal-dialog .modal-content .modal-body table tbody tr td .btn_copy {
    display: inline-block;
    margin-left: 5%;
    padding: 1% 10%;
    font-size: 3.4vw;
  }
  .popup .modal-dialog .modal-content .popup_close {
    padding-top: 11%;
    width: 11%;
    top: 8%;
    right: 8%;
  }
}

@media (max-width: 430px) {
  footer {
    font-size: 2.7vw;
  }
  footer .container .copyright img {
    width: 33.49vw;
  }
  footer .container .copyright a img {
    width: 25.815vw;
  }
  footer .container .copyright p {
    margin: 3vw auto;
  }
  footer .container .grading img {
    width: 8.84vw;
  }
}