/* Google Web Fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
/*---- footer ----*/
@import url("https://ids.iwplay.com.tw/includ/footer/footer.css");

/* Import Styles */
.hidden {
  display: none !important;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

.v_middle {
  display: inline-block;
  vertical-align: middle;
  margin-right: -3px;
  float: none;
}

/*--------------------------------------*/
body {
  font-family: "Noto Serif TC", sans-serif;
  font-display: swap;
  letter-spacing: 1px;
  word-break: break-all;
}

html {
  color: #646464;
  font-size: 16px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input,
input:focus {
  outline: none;
  border: 0 none;
}

textarea {
  resize: vertical;
  outline: none;
}

a {
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

a:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}

p {
  color: #646464;
  font-weight: 400;
}

/* ==========================
   KV 主視覺
============================ */
#mainarea {
  background: url(../images/kv_251203.webp) no-repeat center top;
  background-size: cover;
  overflow: hidden;
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
/*閃光效果*/
/*#mainarea:after {
    display: block;
    content: '';
    z-index: 6;
    position: absolute;
    width: 120px;
    height: 50px;
    top: 20%;
    left: 42%;
    background: url(../images/shine.png) 50% 0 no-repeat;
    -webkit-animation: whitebg 1s linear infinite;
    animation: whitebg 1s linear infinite;
}*/

@-webkit-keyframes whitebg {
  0%,
  100% {
    -webkit-transform: scale(1.25) rotate(-3deg);
    transform: scale(1.25) rotate(-3deg);
  }

  50% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@keyframes whitebg {
  0%,
  100% {
    -webkit-transform: scale(1.25) rotate(-3deg);
    transform: scale(1.25) rotate(-3deg);
  }

  50% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

.stars {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 2px;
  z-index: 1;
  opacity: 0.7;
  -webkit-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  pointer-events: none;
}

.stars > div {
  position: absolute;
  background: transparent;
  border-radius: 50%;
}

.stars > div:after {
  display: block;
  content: " ";
  position: absolute;
  background: transparent;
  top: 200px;
}

.stars #star1 {
  width: 1px;
  height: 1px;
  -webkit-box-shadow: 360px 526px 3px #a2baff, 1878px 680px 4px #a2baff,
    310px 284px 3px #a2baff, 1562px 238px 4px #a2baff, 1632px 165px 4px #a2baff,
    1848px 777px 3px #a2baff, 943px 665px 3px #a2baff, 848px 820px 4px #a2baff,
    719px 543px 2px #a2baff, 290px 722px 1px #a2baff, 538px 210px 2px #a2baff,
    506px 732px 2px #a2baff, 298px 574px 1px #a2baff, 1738px 383px 3px #a2baff,
    1865px 839px 4px #a2baff, 1897px 210px 2px #a2baff, 1560px 523px 1px #a2baff,
    1467px 515px 3px #a2baff, 1547px 286px 5px #a2baff, 650px 411px 1px #a2baff,
    320px 621px 4px #a2baff, 1679px 69px 1px #a2baff, 277px 799px 3px #a2baff,
    755px 801px 3px #a2baff, 1648px 643px 4px #a2baff, 397px 80px 5px #a2baff,
    142px 127px 4px #a2baff, 859px 731px 2px #a2baff, 38px 451px 5px #a2baff,
    1488px 775px 3px #a2baff, 59px 46px 3px #a2baff, 953px 289px 3px #a2baff,
    960px 774px 4px #a2baff, 904px 787px 2px #a2baff, 187px 44px 5px #a2baff,
    816px 186px 2px #a2baff, 1186px 295px 4px #a2baff, 1805px 816px 3px #a2baff,
    1414px 420px 3px #a2baff, 1860px 239px 4px #a2baff, 294px 302px 5px #a2baff,
    794px 191px 3px #a2baff, 460px 548px 1px #a2baff, 828px 516px 3px #a2baff,
    1154px 691px 1px #a2baff, 495px 470px 5px #a2baff, 824px 490px 2px #a2baff,
    1298px 692px 1px #a2baff, 1816px 649px 1px #a2baff, 983px 583px 3px #a2baff,
    903px 739px 3px #a2baff, 1540px 705px 3px #a2baff, 1201px 680px 2px #a2baff,
    990px 750px 4px #a2baff, 1795px 786px 1px #a2baff, 1767px 401px 1px #a2baff,
    1299px 420px 2px #a2baff, 1339px 806px 5px #a2baff, 1427px 508px 1px #a2baff,
    918px 537px 4px #a2baff, 128px 454px 1px #a2baff, 1281px 400px 5px #a2baff,
    499px 683px 5px #a2baff, 552px 355px 1px #a2baff, 1068px 710px 2px #a2baff,
    854px 559px 5px #a2baff, 1594px 99px 1px #a2baff, 5px 471px 5px #a2baff,
    508px 776px 1px #a2baff, 719px 203px 4px #a2baff, 803px 598px 5px #a2baff;
  box-shadow: 360px 526px 3px #a2baff, 1878px 680px 4px #a2baff,
    310px 284px 3px #a2baff, 1562px 238px 4px #a2baff, 1632px 165px 4px #a2baff,
    1848px 777px 3px #a2baff, 943px 665px 3px #a2baff, 848px 820px 4px #a2baff,
    719px 543px 2px #a2baff, 290px 722px 1px #a2baff, 538px 210px 2px #a2baff,
    506px 732px 2px #a2baff, 298px 574px 1px #a2baff, 1738px 383px 3px #a2baff,
    1865px 839px 4px #a2baff, 1897px 210px 2px #a2baff, 1560px 523px 1px #a2baff,
    1467px 515px 3px #a2baff, 1547px 286px 5px #a2baff, 650px 411px 1px #a2baff,
    320px 621px 4px #a2baff, 1679px 69px 1px #a2baff, 277px 799px 3px #a2baff,
    755px 801px 3px #a2baff, 1648px 643px 4px #a2baff, 397px 80px 5px #a2baff,
    142px 127px 4px #a2baff, 859px 731px 2px #a2baff, 38px 451px 5px #a2baff,
    1488px 775px 3px #a2baff, 59px 46px 3px #a2baff, 953px 289px 3px #a2baff,
    960px 774px 4px #a2baff, 904px 787px 2px #a2baff, 187px 44px 5px #a2baff,
    816px 186px 2px #a2baff, 1186px 295px 4px #a2baff, 1805px 816px 3px #a2baff,
    1414px 420px 3px #a2baff, 1860px 239px 4px #a2baff, 294px 302px 5px #a2baff,
    794px 191px 3px #a2baff, 460px 548px 1px #a2baff, 828px 516px 3px #a2baff,
    1154px 691px 1px #a2baff, 495px 470px 5px #a2baff, 824px 490px 2px #a2baff,
    1298px 692px 1px #a2baff, 1816px 649px 1px #a2baff, 983px 583px 3px #a2baff,
    903px 739px 3px #a2baff, 1540px 705px 3px #a2baff, 1201px 680px 2px #a2baff,
    990px 750px 4px #a2baff, 1795px 786px 1px #a2baff, 1767px 401px 1px #a2baff,
    1299px 420px 2px #a2baff, 1339px 806px 5px #a2baff, 1427px 508px 1px #a2baff,
    918px 537px 4px #a2baff, 128px 454px 1px #a2baff, 1281px 400px 5px #a2baff,
    499px 683px 5px #a2baff, 552px 355px 1px #a2baff, 1068px 710px 2px #a2baff,
    854px 559px 5px #a2baff, 1594px 99px 1px #a2baff, 5px 471px 5px #a2baff,
    508px 776px 1px #a2baff, 719px 203px 4px #a2baff, 803px 598px 5px #a2baff;
  -webkit-animation: animStar 5s linear infinite;
  animation: animStar 5s linear infinite;
}

.stars #star1:after {
  width: 1px;
  height: 1px;
  -webkit-box-shadow: 360px 526px 3px #a2baff, 1878px 680px 4px #a2baff,
    310px 284px 3px #a2baff, 1562px 238px 4px #a2baff, 1632px 165px 4px #a2baff,
    1848px 777px 3px #a2baff, 943px 665px 3px #a2baff, 848px 820px 4px #a2baff,
    719px 543px 2px #a2baff, 290px 722px 1px #a2baff, 538px 210px 2px #a2baff,
    506px 732px 2px #a2baff, 298px 574px 1px #a2baff, 1738px 383px 3px #a2baff,
    1865px 839px 4px #a2baff, 1897px 210px 2px #a2baff, 1560px 523px 1px #a2baff,
    1467px 515px 3px #a2baff, 1547px 286px 5px #a2baff, 650px 411px 1px #a2baff,
    320px 621px 4px #a2baff, 1679px 69px 1px #a2baff, 277px 799px 3px #a2baff,
    755px 801px 3px #a2baff, 1648px 643px 4px #a2baff, 397px 80px 5px #a2baff,
    142px 127px 4px #a2baff, 859px 731px 2px #a2baff, 38px 451px 5px #a2baff,
    1488px 775px 3px #a2baff, 59px 46px 3px #a2baff, 953px 289px 3px #a2baff,
    960px 774px 4px #a2baff, 904px 787px 2px #a2baff, 187px 44px 5px #a2baff,
    816px 186px 2px #a2baff, 1186px 295px 4px #a2baff, 1805px 816px 3px #a2baff,
    1414px 420px 3px #a2baff, 1860px 239px 4px #a2baff, 294px 302px 5px #a2baff,
    794px 191px 3px #a2baff, 460px 548px 1px #a2baff, 828px 516px 3px #a2baff,
    1154px 691px 1px #a2baff, 495px 470px 5px #a2baff, 824px 490px 2px #a2baff,
    1298px 692px 1px #a2baff, 1816px 649px 1px #a2baff, 983px 583px 3px #a2baff,
    903px 739px 3px #a2baff, 1540px 705px 3px #a2baff, 1201px 680px 2px #a2baff,
    990px 750px 4px #a2baff, 1795px 786px 1px #a2baff, 1767px 401px 1px #a2baff,
    1299px 420px 2px #a2baff, 1339px 806px 5px #a2baff, 1427px 508px 1px #a2baff,
    918px 537px 4px #a2baff, 128px 454px 1px #a2baff, 1281px 400px 5px #a2baff,
    499px 683px 5px #a2baff, 552px 355px 1px #a2baff, 1068px 710px 2px #a2baff,
    854px 559px 5px #a2baff, 1594px 99px 1px #a2baff, 5px 471px 5px #a2baff,
    508px 776px 1px #a2baff, 719px 203px 4px #a2baff, 803px 598px 5px #a2baff;
  box-shadow: 360px 526px 3px #a2baff, 1878px 680px 4px #a2baff,
    310px 284px 3px #a2baff, 1562px 238px 4px #a2baff, 1632px 165px 4px #a2baff,
    1848px 777px 3px #a2baff, 943px 665px 3px #a2baff, 848px 820px 4px #a2baff,
    719px 543px 2px #a2baff, 290px 722px 1px #a2baff, 538px 210px 2px #a2baff,
    506px 732px 2px #a2baff, 298px 574px 1px #a2baff, 1738px 383px 3px #a2baff,
    1865px 839px 4px #a2baff, 1897px 210px 2px #a2baff, 1560px 523px 1px #a2baff,
    1467px 515px 3px #a2baff, 1547px 286px 5px #a2baff, 650px 411px 1px #a2baff,
    320px 621px 4px #a2baff, 1679px 69px 1px #a2baff, 277px 799px 3px #a2baff,
    755px 801px 3px #a2baff, 1648px 643px 4px #a2baff, 397px 80px 5px #a2baff,
    142px 127px 4px #a2baff, 859px 731px 2px #a2baff, 38px 451px 5px #a2baff,
    1488px 775px 3px #a2baff, 59px 46px 3px #a2baff, 953px 289px 3px #a2baff,
    960px 774px 4px #a2baff, 904px 787px 2px #a2baff, 187px 44px 5px #a2baff,
    816px 186px 2px #a2baff, 1186px 295px 4px #a2baff, 1805px 816px 3px #a2baff,
    1414px 420px 3px #a2baff, 1860px 239px 4px #a2baff, 294px 302px 5px #a2baff,
    794px 191px 3px #a2baff, 460px 548px 1px #a2baff, 828px 516px 3px #a2baff,
    1154px 691px 1px #a2baff, 495px 470px 5px #a2baff, 824px 490px 2px #a2baff,
    1298px 692px 1px #a2baff, 1816px 649px 1px #a2baff, 983px 583px 3px #a2baff,
    903px 739px 3px #a2baff, 1540px 705px 3px #a2baff, 1201px 680px 2px #a2baff,
    990px 750px 4px #a2baff, 1795px 786px 1px #a2baff, 1767px 401px 1px #a2baff,
    1299px 420px 2px #a2baff, 1339px 806px 5px #a2baff, 1427px 508px 1px #a2baff,
    918px 537px 4px #a2baff, 128px 454px 1px #a2baff, 1281px 400px 5px #a2baff,
    499px 683px 5px #a2baff, 552px 355px 1px #a2baff, 1068px 710px 2px #a2baff,
    854px 559px 5px #a2baff, 1594px 99px 1px #a2baff, 5px 471px 5px #a2baff,
    508px 776px 1px #a2baff, 719px 203px 4px #a2baff, 803px 598px 5px #a2baff;
}

.stars #star2 {
  width: 2px;
  height: 2px;
  -webkit-box-shadow: 1426px 224px 5px #a2baff, 1814px 621px 5px #a2baff,
    28px 733px 4px #a2baff, 1701px 316px 1px #a2baff, 238px 479px 3px #a2baff,
    1783px 187px 2px #a2baff, 1390px 580px 3px #a2baff, 197px 348px 1px #a2baff,
    1679px 337px 5px #a2baff, 484px 408px 2px #a2baff, 1774px 208px 5px #a2baff,
    1208px 87px 5px #a2baff, 297px 262px 3px #a2baff, 42px 44px 1px #a2baff,
    661px 422px 5px #a2baff, 1505px 709px 5px #a2baff, 139px 527px 3px #a2baff,
    1001px 537px 2px #a2baff, 938px 186px 5px #a2baff, 39px 678px 5px #a2baff,
    1356px 381px 2px #a2baff, 1139px 132px 2px #a2baff, 223px 538px 4px #a2baff,
    1577px 215px 4px #a2baff, 1602px 795px 1px #a2baff, 146px 570px 1px #a2baff,
    624px 345px 4px #a2baff, 779px 401px 2px #a2baff, 1115px 343px 2px #a2baff,
    1549px 346px 5px #a2baff, 1092px 619px 5px #a2baff, 1368px 419px 5px #a2baff,
    910px 283px 1px #a2baff, 1721px 384px 5px #a2baff, 1424px 391px 4px #a2baff,
    859px 402px 1px #a2baff, 1563px 240px 5px #a2baff, 1610px 257px 3px #a2baff,
    566px 349px 4px #a2baff, 498px 313px 5px #a2baff, 1041px 286px 4px #a2baff;
  box-shadow: 1426px 224px 5px #a2baff, 1814px 621px 5px #a2baff,
    28px 733px 4px #a2baff, 1701px 316px 1px #a2baff, 238px 479px 3px #a2baff,
    1783px 187px 2px #a2baff, 1390px 580px 3px #a2baff, 197px 348px 1px #a2baff,
    1679px 337px 5px #a2baff, 484px 408px 2px #a2baff, 1774px 208px 5px #a2baff,
    1208px 87px 5px #a2baff, 297px 262px 3px #a2baff, 42px 44px 1px #a2baff,
    661px 422px 5px #a2baff, 1505px 709px 5px #a2baff, 139px 527px 3px #a2baff,
    1001px 537px 2px #a2baff, 938px 186px 5px #a2baff, 39px 678px 5px #a2baff,
    1356px 381px 2px #a2baff, 1139px 132px 2px #a2baff, 223px 538px 4px #a2baff,
    1577px 215px 4px #a2baff, 1602px 795px 1px #a2baff, 146px 570px 1px #a2baff,
    624px 345px 4px #a2baff, 779px 401px 2px #a2baff, 1115px 343px 2px #a2baff,
    1549px 346px 5px #a2baff, 1092px 619px 5px #a2baff, 1368px 419px 5px #a2baff,
    910px 283px 1px #a2baff, 1721px 384px 5px #a2baff, 1424px 391px 4px #a2baff,
    859px 402px 1px #a2baff, 1563px 240px 5px #a2baff, 1610px 257px 3px #a2baff,
    566px 349px 4px #a2baff, 498px 313px 5px #a2baff, 1041px 286px 4px #a2baff;
  -webkit-animation: animStar 10s linear infinite;
  animation: animStar 10s linear infinite;
}

.stars #star2:after {
  width: 2px;
  height: 2px;
  -webkit-box-shadow: 1426px 224px 5px #a2baff, 1814px 621px 5px #a2baff,
    28px 733px 4px #a2baff, 1701px 316px 1px #a2baff, 238px 479px 3px #a2baff,
    1783px 187px 2px #a2baff, 1390px 580px 3px #a2baff, 197px 348px 1px #a2baff,
    1679px 337px 5px #a2baff, 484px 408px 2px #a2baff, 1774px 208px 5px #a2baff,
    1208px 87px 5px #a2baff, 297px 262px 3px #a2baff, 42px 44px 1px #a2baff,
    661px 422px 5px #a2baff, 1505px 709px 5px #a2baff, 139px 527px 3px #a2baff,
    1001px 537px 2px #a2baff, 938px 186px 5px #a2baff, 39px 678px 5px #a2baff,
    1356px 381px 2px #a2baff, 1139px 132px 2px #a2baff, 223px 538px 4px #a2baff,
    1577px 215px 4px #a2baff, 1602px 795px 1px #a2baff, 146px 570px 1px #a2baff,
    624px 345px 4px #a2baff, 779px 401px 2px #a2baff, 1115px 343px 2px #a2baff,
    1549px 346px 5px #a2baff, 1092px 619px 5px #a2baff, 1368px 419px 5px #a2baff,
    910px 283px 1px #a2baff, 1721px 384px 5px #a2baff, 1424px 391px 4px #a2baff,
    859px 402px 1px #a2baff, 1563px 240px 5px #a2baff, 1610px 257px 3px #a2baff,
    566px 349px 4px #a2baff, 498px 313px 5px #a2baff, 1041px 286px 4px #a2baff;
  box-shadow: 1426px 224px 5px #a2baff, 1814px 621px 5px #a2baff,
    28px 733px 4px #a2baff, 1701px 316px 1px #a2baff, 238px 479px 3px #a2baff,
    1783px 187px 2px #a2baff, 1390px 580px 3px #a2baff, 197px 348px 1px #a2baff,
    1679px 337px 5px #a2baff, 484px 408px 2px #a2baff, 1774px 208px 5px #a2baff,
    1208px 87px 5px #a2baff, 297px 262px 3px #a2baff, 42px 44px 1px #a2baff,
    661px 422px 5px #a2baff, 1505px 709px 5px #a2baff, 139px 527px 3px #a2baff,
    1001px 537px 2px #a2baff, 938px 186px 5px #a2baff, 39px 678px 5px #a2baff,
    1356px 381px 2px #a2baff, 1139px 132px 2px #a2baff, 223px 538px 4px #a2baff,
    1577px 215px 4px #a2baff, 1602px 795px 1px #a2baff, 146px 570px 1px #a2baff,
    624px 345px 4px #a2baff, 779px 401px 2px #a2baff, 1115px 343px 2px #a2baff,
    1549px 346px 5px #a2baff, 1092px 619px 5px #a2baff, 1368px 419px 5px #a2baff,
    910px 283px 1px #a2baff, 1721px 384px 5px #a2baff, 1424px 391px 4px #a2baff,
    859px 402px 1px #a2baff, 1563px 240px 5px #a2baff, 1610px 257px 3px #a2baff,
    566px 349px 4px #a2baff, 498px 313px 5px #a2baff, 1041px 286px 4px #a2baff;
}

.stars #star3 {
  width: 3px;
  height: 3px;
  -webkit-box-shadow: 601px 129px 1px #a2baff, 1816px 49px 4px #a2baff,
    797px 276px 4px #a2baff, 794px 200px 5px #a2baff, 511px 716px 3px #a2baff,
    1110px 827px 5px #a2baff, 528px 454px 3px #a2baff, 1701px 679px 4px #a2baff,
    1146px 227px 5px #a2baff, 1693px 207px 5px #a2baff, 1851px 88px 2px #a2baff,
    755px 824px 3px #a2baff, 747px 46px 4px #a2baff, 1003px 500px 5px #a2baff,
    1888px 14px 1px #a2baff, 132px 270px 4px #a2baff, 1501px 175px 5px #a2baff,
    1825px 565px 2px #a2baff, 1846px 185px 1px #a2baff, 770px 651px 2px #a2baff,
    1618px 765px 5px #a2baff, 229px 293px 5px #a2baff, 376px 163px 3px #a2baff,
    1439px 433px 5px #a2baff, 998px 496px 1px #a2baff, 615px 740px 2px #a2baff,
    558px 51px 2px #a2baff, 245px 755px 5px #a2baff, 736px 158px 2px #a2baff,
    1206px 346px 1px #a2baff, 261px 760px 3px #a2baff;
  box-shadow: 601px 129px 1px #a2baff, 1816px 49px 4px #a2baff,
    797px 276px 4px #a2baff, 794px 200px 5px #a2baff, 511px 716px 3px #a2baff,
    1110px 827px 5px #a2baff, 528px 454px 3px #a2baff, 1701px 679px 4px #a2baff,
    1146px 227px 5px #a2baff, 1693px 207px 5px #a2baff, 1851px 88px 2px #a2baff,
    755px 824px 3px #a2baff, 747px 46px 4px #a2baff, 1003px 500px 5px #a2baff,
    1888px 14px 1px #a2baff, 132px 270px 4px #a2baff, 1501px 175px 5px #a2baff,
    1825px 565px 2px #a2baff, 1846px 185px 1px #a2baff, 770px 651px 2px #a2baff,
    1618px 765px 5px #a2baff, 229px 293px 5px #a2baff, 376px 163px 3px #a2baff,
    1439px 433px 5px #a2baff, 998px 496px 1px #a2baff, 615px 740px 2px #a2baff,
    558px 51px 2px #a2baff, 245px 755px 5px #a2baff, 736px 158px 2px #a2baff,
    1206px 346px 1px #a2baff, 261px 760px 3px #a2baff;
  -webkit-animation: animStar 15s linear infinite;
  animation: animStar 15s linear infinite;
}

.stars #star3:after {
  width: 3px;
  height: 3px;
  -webkit-box-shadow: 601px 129px 1px #a2baff, 1816px 49px 4px #a2baff,
    797px 276px 4px #a2baff, 794px 200px 5px #a2baff, 511px 716px 3px #a2baff,
    1110px 827px 5px #a2baff, 528px 454px 3px #a2baff, 1701px 679px 4px #a2baff,
    1146px 227px 5px #a2baff, 1693px 207px 5px #a2baff, 1851px 88px 2px #a2baff,
    755px 824px 3px #a2baff, 747px 46px 4px #a2baff, 1003px 500px 5px #a2baff,
    1888px 14px 1px #a2baff, 132px 270px 4px #a2baff, 1501px 175px 5px #a2baff,
    1825px 565px 2px #a2baff, 1846px 185px 1px #a2baff, 770px 651px 2px #a2baff,
    1618px 765px 5px #a2baff, 229px 293px 5px #a2baff, 376px 163px 3px #a2baff,
    1439px 433px 5px #a2baff, 998px 496px 1px #a2baff, 615px 740px 2px #a2baff,
    558px 51px 2px #a2baff, 245px 755px 5px #a2baff, 736px 158px 2px #a2baff,
    1206px 346px 1px #a2baff, 261px 760px 3px #a2baff;
  box-shadow: 601px 129px 1px #a2baff, 1816px 49px 4px #a2baff,
    797px 276px 4px #a2baff, 794px 200px 5px #a2baff, 511px 716px 3px #a2baff,
    1110px 827px 5px #a2baff, 528px 454px 3px #a2baff, 1701px 679px 4px #a2baff,
    1146px 227px 5px #a2baff, 1693px 207px 5px #a2baff, 1851px 88px 2px #a2baff,
    755px 824px 3px #a2baff, 747px 46px 4px #a2baff, 1003px 500px 5px #a2baff,
    1888px 14px 1px #a2baff, 132px 270px 4px #a2baff, 1501px 175px 5px #a2baff,
    1825px 565px 2px #a2baff, 1846px 185px 1px #a2baff, 770px 651px 2px #a2baff,
    1618px 765px 5px #a2baff, 229px 293px 5px #a2baff, 376px 163px 3px #a2baff,
    1439px 433px 5px #a2baff, 998px 496px 1px #a2baff, 615px 740px 2px #a2baff,
    558px 51px 2px #a2baff, 245px 755px 5px #a2baff, 736px 158px 2px #a2baff,
    1206px 346px 1px #a2baff, 261px 760px 3px #a2baff;
}

@-webkit-keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
  }
}

@keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
  }
}

.search-sec {
  height: 90px;
  background: rgba(0, 0, 0, 0.51);
  z-index: 2;
}

.search-sec-m {
  background: rgba(0, 0, 0, 0.51);
}

.top-icon {
  bottom: 123px;
}

.section-bg-2 {
  background: url(../images/bg02.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section-bg-3 {
  background: url(../images/bg03.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top;
  position: relative;
}

.section-bg-4 {
  background: url(../images/bg04.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section-bg-5 {
  background: url(../images/bg05.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section-bg-pur {
  background: #634a95;
}

.section-bg-gray {
  background: #efefef;
}

.section-padding {
  padding: 4vh 0;
}

.section-title {
  margin-bottom: 4rem;
}

.newsdetails-newsbadge {
  display: inline-block;
  background: #e51737;
  text-align: center;
  color: #fff;
  padding: 4px 10px;
  font-weight: 500;
  font-size: 16px;
}

.newsdetails-sysbadge {
  display: inline-block;
  background: #007ac8;
  text-align: center;
  color: #fff;
  padding: 4px 10px;
  margin-bottom: 5px;
  font-size: 16px;
}
.newsdetails-actbadge {
  display: inline-block;
  background: #66950b;
  text-align: center;
  color: #fff;
  padding: 4px 10px;
  margin-bottom: 5px;
  font-size: 16px;
}

.systemtime,
.newstime {
  color: #967ab7;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  margin-left: 10px;
  text-indent: -999px;
  cursor: pointer;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #fff;
  transition: opacity 0.6s ease;
  transform: rotate(45deg);
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #fff;
}

/* ==========================
   btn hover
============================ */
/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* ==========================
   iconarea 社群ICON
============================ */

.icons {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 53px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #967ab7;
}

.fbicons:hover {
  background: #3b5998;
}

.yticons:hover {
  background: #ff0000;
}

.lineicons:hover {
  background: #00b400;
}

.bhicons:hover {
  background: #0b7593;
}

/* ==========================
   Main Menu Styles 導覽列
============================ */

.main-menu {
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.5s;
}

.main-menu .navbar {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0;
}

.navbar .navbar-collapse {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.navbar .navbar-collapse ul li {
  margin-right: 20px;
  position: relative;
}

.navbar .navbar-collapse ul li:last-child {
  margin-right: 0;
}

.navbar .navbar-collapse ul li a {
  color: #634a95;
  font-weight: 700;
  text-transform: uppercase;
}

.navbar .navbar-collapse ul li a:hover {
  color: #967ab7;
}

.navbar .navbar-collapse ul li a.dropdown-toggle:after {
  content: none;
}

.navbar .navbar-collapse ul li.active a {
  color: #634a95;
}

.navbar .navbar-collapse ul li.active .dropdown-menu a {
  color: #634a95;
}

.navbar .navbar-collapse ul li.dropdown .dropdown-menu {
  top: 60px;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  padding: 15px 0;
  min-width: 12rem;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 0 none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navbar .navbar-collapse ul li.dropdown .dropdown-menu:before {
  position: absolute;
  content: "";
  left: 8px;
  top: -9px;
  border-bottom: 9px solid #ededed;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.navbar .navbar-collapse ul li.dropdown .dropdown-menu a {
  padding: 5px 20px;
  font-weight: 400;
  text-transform: capitalize;
}

.navbar .navbar-collapse ul li.dropdown .dropdown-menu a:hover {
  background: none;
}

.navbar .navbar-collapse ul li.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  top: 40px;
}

.navbar .navbar-collapse ul li.dropdown:hover a.nav-link {
  color: #634a95 !important;
}

.navbar .navbar-collapse.collapse.show {
  z-index: 100;
  background: #fff;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  outline: none;
}

.navbar-nav {
  font-size: 1.2rem;
}

/* ==========================
   system 遊戲新聞
============================ */
.system-more {
  margin-bottom: 1rem;
  position: relative;
}

.system-more span {
  font-size: 27px;
  font-weight: 700;
  color: #634a95;
}

.system-more span:after {
  width: calc(100% - 190px);
  display: inline-block;
  content: "";
  height: 1px;
  background-color: #634a95;
  margin: 10px 8px;
}

.system-more .btns {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 14px;
  padding: 4px 14px;
  background: transparent;
  color: #634a95;
  font-weight: 400;
  border: 1px solid #634a95;
}

.system-more .btns:hover {
  background: #634a95;
  color: #fff;
  font-weight: 400;
  border: 1px solid #634a95;
}

.system-single {
  border-bottom: 1px dashed #967dc7;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
}

.system-single .system-title span {
  font-size: 16px;
  font-weight: 700;
  color: #634a95;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.system-single .system-title span:hover {
  font-size: 16px;
  font-weight: 700;
  color: #967dc7;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.system-details a {
  color: #967dc7;
}

.system-details a:hover {
  color: #634a95;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.system-single .system-details .morebtn {
  display: inline-block;
  font-size: 14px;
  padding: 0px 20px;
  color: #e51737;
  font-weight: 400;
  -webkit-border-radius: 0.25rem;
  border: 1px solid #e51737;
  border-radius: 0.25rem;
  margin: 0rem;
}

.system-single .system-details .morebtn:hover {
  color: #fff;
  background: #e51737;
}

/* ==========================
   character 職業介紹
============================ */
.character a {
  color: #634a95;
  font-size: 1.2rem;
  text-decoration: none;
  background-color: transparent;
}

.character .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #634a95;
}

.character .nav-pills .nav-link {
  border-radius: 10rem;
}

/* 雲霧 */
/* .fog__img {
    position: absolute;
    height: 100vh;
    width: 100vw;

}
 */
.fog1 {
  background: url(../images/fog-1.png) repeat-x;
  background-size: 100%;
  width: 56.1%;
  height: 10vw;
  position: absolute;
  bottom: 0;
  right: 1%;
  z-index: 2;
  animation: chara_c 5s infinite linear;
}

.fog2 {
  background: url(../images/fog-2.png) repeat-x;
  background-size: 100%;
  width: 56.1%;
  height: 8vw;
  position: absolute;
  bottom: 0;
  right: 1%;
  z-index: 2;
  opacity: 0;
  animation: chara_c 5s infinite linear;
  animation-delay: 2.5s;
}

@keyframes chara_c {
  0% {
    transform: translateX(-15%);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(5%);
    opacity: 0;
  }
}

/* ==========================
   features 遊戲特色
============================ */

.flip {
  animation: flipInX 8s ease-out 0s 10 both;
}

.drop-shadow {
  -webkit-filter: drop-shadow(8px 8px 6px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(8px 8px 6px rgba(0, 0, 0, 0.3));
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);

    opacity: 1;
  }

  12% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -2deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -2deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  25% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    opacity: 1;
  }

  37% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -2deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -2deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  50% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
  }
}

/* ==============================
    latestnews Styles   最新消息
=============================== */

.latestnews-single {
  border-bottom: 1px dashed #ededed;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.latestnews .latestnews-single figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

.latestnews .latestnews-single figure img {
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.latestnews .latestnews-single figure:hover img {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.latestnews-single .latestnews-title {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.latestnews-single .latestnews-title a {
  color: #634a95;
}

.latestnews-single .latestnews-title a:hover {
  color: #917ab6;
}

.morebtn {
  display: inline-block;
  font-size: 14px;
  padding: 8px 13px;
  background: transparent;
  color: #634a95;
  font-weight: 400;
  -webkit-border-radius: 0.25rem;
  border: 1px solid #634a95;
  border-radius: 50rem;
}

.morebtn:hover {
  background: #634a95;
  color: #fff;
  font-weight: 400;
  border: 1px solid #634a95;
}

/* ==============================
    newsdetails Styles   新聞內頁
=============================== */

.newsdetails .newsdetails-title {
  font-size: 20px;
  font-weight: 700;
  color: #634a95;
  margin-bottom: 1rem;
}

.newsdetails .newsdetails-contents h3 {
  margin: 1.5rem 0;
  font-size: 18px;
  font-weight: 500;
  color: #212529;
}

.newsdetails .newsdetails-contents p {
  margin: 2rem 0;
}

.newsdetails .newsdetails-contents a {
  color: #e51737;
}

.newsdetails .newsdetails-contents a:hover {
  color: #212529;
}

.newsdetails .newsdetails-contents blockquote {
  border: 15px solid #f5f5f5;
  padding: 20px;
  font-style: italic;
  margin: 30px 0;
  color: #e51737;
}

.newsdetails .newsdetails-contents blockquote span {
  color: #e51737;
  display: inline-block;
  padding-right: 5px;
}

.newsdetails .backto {
  margin: 80px 0;
}

.newsdetails .backto a {
  color: #634a95;
  font-size: 16px;
}

.newsdetails .backto a:hover {
  color: #967dc7;
}

/* ==========================
   pagination Styles 頁碼
============================ */

.pagination ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}

.pagination ul li {
  margin-right: 10px;
}

.pagination ul li:last-child {
  margin-right: 0;
}

.pagination ul li a {
  padding: 12px 15px;
  border: 1px solid #ececec;
  color: #b1b1b1;
}

.pagination ul li a:hover {
  color: #634a95;
  border-color: #634a95;
}

.pagination ul li.active a {
  color: #fff;
  border-color: #634a95;
  background: #634a95;
}

/* ==========================
   pages-header Styles 橫幅
============================ */

.pages-header {
  padding: 10rem 0;
  background: url(../images/header_banner.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.pages-header h1 {
  color: #fff;
  font-weight: 700;
  font-size: 30px;
}

.pages-header span {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.pages-header .breadcrumbs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 30px 0 0 0;
  padding: 0;
}

.pages-header .breadcrumbs li {
  list-style: none;
}

.pages-header .breadcrumbs li + li {
  margin-left: 25px;
  position: relative;
}

.pages-header .breadcrumbs li + li:before {
  position: absolute;
  content: "/";
  left: -14px;
  top: 0;
}

.pages-header .breadcrumbs li a {
  color: #fff;
}

.pages-header .breadcrumbs li a span {
  margin-right: 5px;
}

.pages-header .breadcrumbs li a:hover {
  color: #252b33;
}

.pages-header .breadcrumbs li.active {
  color: #eee;
}

/* ==========================
    video Area Styles 哈燒影音
============================ */
.video .video-image {
  margin-bottom: 1rem;
}

.video .video-image figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  text-align: center;
  border-radius: 0.25rem;
}

/* .video .video-image figure img {
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.video .video-image figure:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
 */

.video .video-image figure figcaption {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.video .video-image figure figcaption a {
  display: inline-block;
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #a163e6;
  color: #fff;
  font-size: 25px;
  padding-top: 18px;
  padding-left: 7px;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.video .video-image figure figcaption a:hover {
  background: #212529;
  color: #fff;
}

/* ==========================
    gameinfo 遊戲訊息
============================ */
.gameinfo h2 {
  font-size: 27px;
  font-weight: 700;
  color: #634a95;
}

.gameinfo p {
  font-size: 16px;
  font-weight: 500;
  color: #979797;
}

.gameinfo span {
  font-size: 18px;
  font-weight: 700;
  color: #634a95;
}

/* Btn 10  */
.gameinfo .btn24h {
  padding: 10px 0px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  text-decoration: none;
  display: block;
}

.gameinfo .btn24h {
  padding: 10px 0px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  text-decoration: none;
  display: block;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase !important;
  cursor: hand;
  text-align: center;
  text-transform: capitalize;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #634a95 !important;
  z-index: 10;
}

.gameinfo .btn24h:hover {
  color: #fff !important;
}

.gameinfo .btn24h a:hover {
  color: #fff;
}

.gameinfo .btn24h::after {
  content: "";
  width: 0%;
  height: 100%;
  display: block;
  background: #967ab7;
  position: absolute;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  left: -10%;
  opacity: 0;
  top: 0;
  z-index: -15;
  -webkit-transition: all 0.94s cubic-bezier(0.2, 0.95, 0.57, 0.99);
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
  -o-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
  transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
  box-shadow: 2px 0px 14px rgba(0, 0, 0, 0.6);
}

.gameinfo .btn24h:hover::after {
  opacity: 1;
  width: 120%;
}

/***************************************
    RESPONSIVE CSS GOES HERE
****************************************/
/*****************************
	RESPONSIVE
*****************************/
/*this is responsive scss*/

/* 767 */
@media only screen and (max-width: 767px) {
  #mainarea {
    background: url(../images/bg_topm_251203.webp) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    position: relative;
  }

  #mainarea:after {
    top: 22%;
    left: -4%;
  }

  .latestnews-single .latestnews-title {
    -webkit-line-clamp: 2;
  }
}

/* 768-991 */
@media (min-width: 768px) and (max-width: 991px) {
  .top-icon {
    bottom: 52px;
  }

  #mainarea:after {
    top: 18%;
    left: 39%;
  }
}

/* 992-1199 */
@media (min-width: 992px) and (max-width: 1199px) {
  .top-icon {
    bottom: 96px;
  }
}

/* 991 */
@media (max-width: 991px) {
  .navbar .navbar-collapse ul li.dropdown .dropdown-menu {
    top: 100%;
    display: none;
    visibility: visible;
    opacity: 1;
  }

  .navbar .navbar-collapse ul li.dropdown .dropdown-menu.show {
    display: block;
  }

  .navbar .navbar-collapse ul li.dropdown .dropdown-menu:before {
    content: none;
  }

  .navbar .navbar-collapse ul li.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
}

footer {
  color: #000;
  background: #fff;
}

footer p,
footer ul {
  opacity: 1;
}