@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
select,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset,
img {
  border: 0;
  border-style: none; }

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal; }

ol,
ul {
  list-style: none; }

caption,
th {
  text-align: left; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%; }

q:before, q:after {
  content: ""; }

abbr,
acronym {
  border: 0; }

a {
  text-decoration: none;
  color: inherit; }

input,
button,
textarea,
select,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit; }

*:focus {
  outline: none; }

h1 {
  font-size: 40px;
  font-weight: 700; }

h2 {
  font-size: 36px;
  font-weight: bold; }

h3 {
  font-size: 28px;
  font-weight: bold; }

h4 {
  font-size: 26px;
  font-weight: bold; }

h5 {
  font-size: 22px; }

h6 {
  font-size: 18px; }

p, td {
  font-size: 16px;
  line-height: 23px; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #060a21; }

body {
  line-height: 1.5;
  font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
  font-size: 16px;
  color: white; }

footer {
  background-color: #000000; }

.wrapper {
  width: 100%;
  margin: 0 auto;
  background-image: url(../img/main_bg.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  overflow-x: hidden; }

header {
  background-image: url(../img/header_bg.png);
  width: 100%;
  height: 634px;
  position: relative;
  background-position: center center; }
  header .logo {
    position: absolute;
    display: inline-block;
    left: 20px;
    top: 20px; }
    header .logo a {
      display: block;
      width: 100%;
      height: 100%; }
    header .logo img {
      max-width: 100%; }

.nav__hd {
  position: fixed;
  left: 0;
  top: calc(100vh + 500px);
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  z-index: 1; }
  .nav__hd.active {
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    top: 100px; }
  .nav__hd ul li {
    width: 144px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    text-indent: -999999px;
    background-image: url(../img/main_tab_btn_off.png);
    -webkit-transition: 0.3s background;
    -o-transition: 0.3s background;
    transition: 0.3s background;
    cursor: pointer; }
    .nav__hd ul li:nth-child(1) {
      background-position: 0 0; }
    .nav__hd ul li:nth-child(2) {
      background-position: 0 -80px; }
    .nav__hd ul li:nth-child(3) {
      background-position: 0 -160px; }
    .nav__hd ul li:nth-child(4) {
      background-position: 0 -240px; }
    .nav__hd ul li:hover, .nav__hd ul li.active {
      background-image: url(../img/main_tab_btn_on.png); }

.nav__mobile {
  display: none; }

.main_container {
  padding: 50px 0; }
  .main_container .foreword {
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
    position: relative; }
    .main_container .foreword p:not(:last-child) {
      margin-bottom: 20px; }
    .main_container .foreword::before {
      content: '';
      display: block;
      width: 76px;
      height: 108px;
      background-image: url(../img/butterfly_01.png);
      position: absolute;
      left: -100px;
      top: 52px; }
    .main_container .foreword::after {
      content: '';
      display: block;
      width: 84px;
      height: 102px;
      background-image: url(../img/butterfly_02.png);
      position: absolute;
      right: -100px;
      top: 148px; }
  .main_container .mainTab {
    margin: 80px auto 0;
    text-align: center; }
    .main_container .mainTab--01 {
      display: none; }
    .main_container .mainTab--02 {
      display: none; }
    .main_container .mainTab .title {
      margin-bottom: 30px; }
      .main_container .mainTab .title img {
        max-width: 100%; }
    .main_container .mainTab .quest {
      position: relative;
      margin: 0 auto 80px;
      max-width: 600px; }
      .main_container .mainTab .quest:not(:last-child)::after {
        content: "";
        position: absolute;
        background-image: url(../img/arrow.png);
        width: 62px;
        height: 62px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -62px; }
      .main_container .mainTab .quest--table {
        background-color: rgba(31, 29, 118, 0.2);
        width: 100%;
        border-top: 1px solid #3b8de1;
        border-bottom: 1px solid #3b8de1;
        margin-bottom: 30px; }
        .main_container .mainTab .quest--table tr:not(:last-child) {
          border-bottom: 1px solid #133562; }
        .main_container .mainTab .quest--table tr td {
          padding: 10px 20px; }
          .main_container .mainTab .quest--table tr td:nth-child(1) {
            color: #edf3ff;
            text-align: center;
            width: 30%;
            position: relative; }
            .main_container .mainTab .quest--table tr td:nth-child(1)::before {
              content: '';
              position: absolute;
              width: 1px;
              height: 60%;
              background-color: #133562;
              top: 20%;
              right: 0; }
          .main_container .mainTab .quest--table tr td:nth-child(2) {
            color: rgba(178, 218, 255, 0.7);
            text-align: left; }
      .main_container .mainTab .quest--img:not(:last-child) {
        margin-bottom: 30px; }
      .main_container .mainTab .quest--img img {
        margin-bottom: 10px;
        max-width: 100%; }
      .main_container .mainTab .quest--img p {
        color: rgba(255, 255, 255, 0.8); }
    .main_container .mainTab .item {
      position: relative;
      max-width: 600px;
      margin: 0 auto 80px; }
      .main_container .mainTab .item::after {
        content: "";
        position: absolute;
        background-image: url(../img/arrow.png);
        width: 62px;
        height: 62px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -62px; }
      .main_container .mainTab .item--img {
        margin-bottom: 30px; }
        .main_container .mainTab .item--img img {
          max-width: 100%; }
      .main_container .mainTab .item--description table {
        width: 100%;
        border-top: 1px solid #3b8de1;
        border-bottom: 1px solid #3b8de1; }
        .main_container .mainTab .item--description table tr:nth-child(1) {
          background-color: rgba(31, 29, 118, 0.2);
          border-bottom: 1px solid #3b8de1; }
          .main_container .mainTab .item--description table tr:nth-child(1) td {
            padding: 10px; }
        .main_container .mainTab .item--description table tr:nth-child(2) {
          text-align: left; }
          .main_container .mainTab .item--description table tr:nth-child(2) .icon, .main_container .mainTab .item--description table tr:nth-child(2) .txt {
            display: inline-block;
            vertical-align: middle; }
          .main_container .mainTab .item--description table tr:nth-child(2) .icon {
            width: 25%; }
          .main_container .mainTab .item--description table tr:nth-child(2) .txt p:not(:last-child) {
            margin-bottom: 5px; }
          .main_container .mainTab .item--description table tr:nth-child(2) .it2 {
            color: rgba(178, 218, 255, 0.7); }
          .main_container .mainTab .item--description table tr:nth-child(2) .it3 {
            font-size: 14px;
            color: rgba(178, 218, 255, 0.5); }
          .main_container .mainTab .item--description table tr:nth-child(2) td {
            padding: 15px 10px; }
    .main_container .mainTab .itemList {
      max-width: 720px;
      margin: 0 auto; }
      .main_container .mainTab .itemList__btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 30px; }
        .main_container .mainTab .itemList__btn .itemListBtn {
          width: 230px;
          height: 55px;
          background-repeat: no-repeat;
          background-size: contain;
          cursor: pointer;
          -webkit-transition: 0.3s background;
          -o-transition: 0.3s background;
          transition: 0.3s background;
          margin: 0 5px 15px 0; }
        .main_container .mainTab .itemList__btn--01 {
          background-image: url(../img/item_list_btn_01_off.png); }
          .main_container .mainTab .itemList__btn--01:hover, .main_container .mainTab .itemList__btn--01.active {
            background-image: url(../img/item_list_btn_01_on.png); }
        .main_container .mainTab .itemList__btn--02 {
          background-image: url(../img/item_list_btn_02_off.png); }
          .main_container .mainTab .itemList__btn--02:hover, .main_container .mainTab .itemList__btn--02.active {
            background-image: url(../img/item_list_btn_02_on.png); }
        .main_container .mainTab .itemList__btn--03 {
          background-image: url(../img/item_list_btn_03_off.png); }
          .main_container .mainTab .itemList__btn--03:hover, .main_container .mainTab .itemList__btn--03.active {
            background-image: url(../img/item_list_btn_03_on.png); }
        .main_container .mainTab .itemList__btn--04 {
          background-image: url(../img/item_list_btn_04_off.png); }
          .main_container .mainTab .itemList__btn--04:hover, .main_container .mainTab .itemList__btn--04.active {
            background-image: url(../img/item_list_btn_04_on.png); }
        .main_container .mainTab .itemList__btn--05 {
          background-image: url(../img/item_list_btn_05_off.png); }
          .main_container .mainTab .itemList__btn--05:hover, .main_container .mainTab .itemList__btn--05.active {
            background-image: url(../img/item_list_btn_05_on.png); }
        .main_container .mainTab .itemList__btn--06 {
          background-image: url(../img/item_list_btn_06_off.png); }
          .main_container .mainTab .itemList__btn--06:hover, .main_container .mainTab .itemList__btn--06.active {
            background-image: url(../img/item_list_btn_06_on.png); }
      .main_container .mainTab .itemList__content {
        max-width: 600px;
        margin: 0 auto 80px;
        font-size: 0; }
        .main_container .mainTab .itemList__content img {
          max-width: 100%; }
        .main_container .mainTab .itemList__content .itemListContent {
          max-height: 80vh;
          overflow-y: scroll; }
          .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar {
            width: 10px; }
          .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar-thumb {
            background: #0f71de; }
          .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar-track {
            background: #202750; }
        .main_container .mainTab .itemList__content .notice {
          text-align: left;
          color: rgba(255, 255, 255, 0.7);
          overflow-y: initial; }
          .main_container .mainTab .itemList__content .notice h5 {
            color: #259eff;
            margin-bottom: 10px; }
          .main_container .mainTab .itemList__content .notice h6 {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 5px; }
          .main_container .mainTab .itemList__content .notice span {
            color: rgba(178, 218, 255, 0.7); }
          .main_container .mainTab .itemList__content .notice--01, .main_container .mainTab .itemList__content .notice--02 {
            margin-bottom: 15px; }
    .main_container .mainTab .cardWrap {
      margin: 0 auto 80px;
      max-width: 600px;
      border-bottom: 1px solid #3b8de1;
      border-top: 1px solid #3b8de1; }
    .main_container .mainTab .card {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: rgba(31, 29, 118, 0.2);
      border-bottom: 1px solid rgba(59, 141, 225, 0.3);
      padding: 20px 50px; }
      .main_container .mainTab .card--img {
        font-size: 0;
        margin-right: 20px; }
      .main_container .mainTab .card--description {
        text-align: left; }
        .main_container .mainTab .card--description p:first-child {
          margin-bottom: 5px;
          color: #edf3ff; }
        .main_container .mainTab .card--description .mvp::before {
          content: 'MVP';
          display: inline-block;
          color: #12162d;
          background-color: #ffe33e;
          border-radius: 20px;
          font-size: 14px;
          font-weight: bold;
          line-height: 14px;
          margin-right: 5px;
          margin-top: -5px;
          padding: 2px 5px;
          vertical-align: middle; }
      .main_container .mainTab .card .ct2 {
        font-size: 14px;
        color: rgba(178, 218, 255, 0.5);
        margin-bottom: 5px; }
      .main_container .mainTab .card .ct3 {
        font-size: 14px;
        color: rgba(221, 239, 255, 0.7); }

@media only screen and (max-width: 1280px) {
  header .logo {
    width: 140px; } }

@media only screen and (max-width: 1024px) {
  header {
    background-size: 173%;
    height: 55vw; }
    header .logo {
      width: 120px;
      left: inherit;
      right: 20px; }
  .main_container {
    padding: 5vw; }
  .nav__hd ul li {
    width: 120px;
    height: 66px; }
    .nav__hd ul li:nth-child(1) {
      background-position: 0 0; }
    .nav__hd ul li:nth-child(2) {
      background-position: 0 -67px; }
    .nav__hd ul li:nth-child(3) {
      background-position: 0 -134px; }
    .nav__hd ul li:nth-child(4) {
      background-position: 0 -201px; } }

@media only screen and (max-width: 768px) {
  header .logo {
    width: 14vw;
    right: 1.5vw;
    top: 2vw; }
  .overlay {
    position: fixed;
    left: calc(-75% - 50px);
    top: 0;
    width: 75%;
    height: 100%;
    background-image: url(../img/nav_m_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.9;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); }
    .overlay.open {
      -webkit-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      left: 0; }
  .ham {
    position: fixed;
    left: 18px;
    top: 18px;
    z-index: 5;
    cursor: pointer;
    width: 30px;
    height: 24px; }
    .ham span {
      position: absolute;
      display: block;
      width: 100%;
      height: 4px;
      background-color: #fff;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
      transform-origin: center left; }
      .ham span:nth-child(1) {
        top: 0px; }
      .ham span:nth-child(2) {
        top: 10px; }
      .ham span:nth-child(3) {
        top: 20px; }
    .ham.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0;
      left: 3px; }
    .ham.open span:nth-child(2) {
      opacity: 0;
      width: 0%; }
    .ham.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 21px;
      left: 3px; }
  .nav__hd {
    display: none; }
  .nav__mobile {
    display: block;
    position: fixed;
    width: 75%;
    height: 100%;
    left: -75%;
    top: 0;
    z-index: 2;
    text-align: center;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; }
    .nav__mobile.open {
      -webkit-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      left: 0; }
    .nav__mobile ul {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .nav__mobile ul li {
        font-size: 28px;
        padding: 3vw 0;
        cursor: pointer;
        position: relative;
        font-family: 'Noto Serif TC', serif;
        letter-spacing: 1px;
        font-weight: 700; }
        .nav__mobile ul li:not(:last-child)::before {
          content: "";
          position: absolute;
          display: block;
          width: 80%;
          height: 1px;
          background-color: #000;
          left: 10%;
          bottom: -1px;
          -webkit-box-shadow: 0 1px 0 rgba(101, 101, 101, 0.5);
          box-shadow: 0 1px 0 rgba(101, 101, 101, 0.5); } }

@media only screen and (max-width: 580px) {
  p, td {
    font-size: 14px;
    line-height: 20px; }
  header {
    background-image: url(../img/header_bg_m.png);
    background-size: cover;
    background-position: center top;
    height: 119vw; }
    header .logo {
      width: 17vw;
      top: 2.5vw; }
  .nav__mobile ul li {
    font-size: 20px; }
  .main_container .foreword br {
    display: none; }
  .main_container .mainTab .quest--table tr td {
    padding: 5px 10px; }
  .main_container .mainTab .item--description table tr:nth-child(2) .icon {
    width: 100%;
    text-align: center;
    margin-bottom: 10px; }
  .main_container .mainTab .item--description table tr:nth-child(2) .txt {
    text-align: center; }
  .main_container .mainTab .itemList__btn .itemListBtn {
    width: 48%;
    height: 11vw;
    margin: 0 0 2vw 0; }
    .main_container .mainTab .itemList__btn .itemListBtn:nth-child(odd) {
      margin: 0 2% 2vw 0; }
  .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar {
    width: 5px; }
  .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar-thumb {
    background: #0f71de; }
  .main_container .mainTab .itemList__content .itemListContent::-webkit-scrollbar-track {
    background: #202750; } }

@media only screen and (max-width: 480px) {
  .main_container .mainTab .card {
    padding: 20px 30px; } }