html,
body {
  font-family: "Noto Sans TC", sans-serif, Arial, "Microsoft JhengHei", Helvetica;
  font-size: 16px;
  line-height: 1.5;
  color: #333; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/*
 * Browser Upgrade Prompt
 */
.browserupgrade {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  margin: 0.2em 0;
  background: #ccc;
  padding: 0.2em 0; }

html,
body {
  height: 100%; }

.container {
  min-height: 100%;
  overflow: hidden; }

/* ------------------------------- Header ------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background-image: url(../images/background/header.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-color: white;
  z-index: 100; }
  @media only screen and (max-width: 1023px) {
    .header {
      padding: 16px; } }

.logo {
  display: inline-block;
  width: 308px; }
  .logo img {
    width: 100%; }
  @media only screen and (max-width: 1023px) {
    .logo {
      width: 203px; } }

/* ------------------------------- Main ------------------------------- */
.main {
  margin-top: 80px; }
  @media only screen and (max-width: 1023px) {
    .main {
      margin-top: 59.5px; } }

/* ------------------------------- Footer ------------------------------- */
.appDownload {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  padding: 16px 0;
  background-color: #58aafe; }
  .appDownload-QRcode img {
    width: 100px;
    margin-right: 20px; }
  .appDownload-link h5 {
    margin-bottom: 13px;
    font-size: 15px;
    line-height: 19px;
    text-align: center; }
  .appDownload-link a {
    display: inline-block;
    padding: 0 3px;
    text-decoration: none;
    transition: .3s; }
  .appDownload-link img {
    width: 170px; }
  @media only screen and (min-width: 1024px) {
    .appDownload-link a:hover {
      -webkit-transform: translateY(-10%);
              transform: translateY(-10%); } }
  @media only screen and (max-width: 1023px) {
    .appDownload-QRcode {
      display: none; }
    .appDownload-link img {
      width: 140px; } }

.footer {
  box-sizing: border-box;
  padding: 20px 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  background-color: #007fe0; }
  @media only screen and (max-width: 767px) {
    .footer {
      padding-bottom: 60px;
      text-align: left; } }

/* ------------------------------- Floating tool ------------------------------- */
.mediaIcons {
  position: fixed;
  bottom: 50%;
  right: 20px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  margin: 0;
  padding: 0;
  z-index: 20; }
  .mediaIcons li {
    margin: 20px 10px;
    list-style: none; }
    .mediaIcons li a {
      display: block;
      width: 33px;
      height: 33px;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      opacity: .4; }
      .mediaIcons li a.facebook {
        background-image: url(../images/icon/social/facebook-bk.png); }
      .mediaIcons li a.line {
        background-image: url(../images/icon/social/line-bk.png); }
      .mediaIcons li a.instagram {
        background-image: url(../images/icon/social/instagram-bk.png); }
      .mediaIcons li a.youtube {
        background-image: url(../images/icon/social/youtube-bk.png); }
      .mediaIcons li a.telegram {
        background-image: url(../images/icon/social/telegram-bk.png); }
  @media only screen and (min-width: 1024px) {
    .mediaIcons li a:hover {
      opacity: 1; }
      .mediaIcons li a:hover.facebook {
        background-image: url(../images/icon/social/facebook-hover.png); }
      .mediaIcons li a:hover.line {
        background-image: url(../images/icon/social/line-hover.png); }
      .mediaIcons li a:hover.instagram {
        background-image: url(../images/icon/social/instagram-hover.png); }
      .mediaIcons li a:hover.youtube {
        background-image: url(../images/icon/social/youtube-hover.png); }
      .mediaIcons li a:hover.telegram {
        background-image: url(../images/icon/social/telegram-hover.png); } }
  @media only screen and (max-width: 1023px) {
    .mediaIcons {
      right: 0; } }
  @media only screen and (max-width: 767px) {
    .mediaIcons {
      bottom: 0;
      right: 0;
      -webkit-transform: none;
              transform: none;
      width: 100%;
      padding: 4px 0;
      text-align: center;
      background-color: rgba(0, 159, 232, 0.9); }
      .mediaIcons li {
        display: inline-block;
        vertical-align: middle;
        margin: 6px; }
        .mediaIcons li a {
          width: 28px;
          height: 28px;
          opacity: 1; }
          .mediaIcons li a.facebook {
            background-image: url(../images/icon/social/facebook-wt.svg); }
          .mediaIcons li a.line {
            background-image: url(../images/icon/social/line-wt.svg); }
          .mediaIcons li a.instagram {
            background-image: url(../images/icon/social/instagram-wt.svg); }
          .mediaIcons li a.youtube {
            background-image: url(../images/icon/social/youtube-wt.svg); }
          .mediaIcons li a.telegram {
            background-image: url(../images/icon/social/telegram-wt.svg); } }

.gotop {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  opacity: .7;
  overflow: hidden;
  z-index: 50; }
  .gotop:hover {
    opacity: 1; }
  @media only screen and (max-width: 767px) {
    .gotop {
      right: 12px; } }

@-webkit-keyframes coins {
  0% {
    opacity: 0;
    -webkit-transform: translate(0);
            transform: translate(0); }
  20% {
    opacity: 1;
    -webkit-transform: translate(-10px, 10px);
            transform: translate(-10px, 10px); }
  100% {
    opacity: 0;
    -webkit-transform: translate(-60px, 60px);
            transform: translate(-60px, 60px); } }

@keyframes coins {
  0% {
    opacity: 0;
    -webkit-transform: translate(0);
            transform: translate(0); }
  20% {
    opacity: 1;
    -webkit-transform: translate(-10px, 10px);
            transform: translate(-10px, 10px); }
  100% {
    opacity: 0;
    -webkit-transform: translate(-60px, 60px);
            transform: translate(-60px, 60px); } }

@-webkit-keyframes hand {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); } }

@keyframes hand {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); } }

.banner {
  position: relative;
  padding-bottom: 39.1%;
  background-image: url(../images/banner/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat; }
  .banner img {
    width: 100%; }
  .banner-title {
    position: absolute;
    top: 5%;
    left: 12%;
    width: 47%; }
  .banner-event {
    position: absolute;
    bottom: 13.5%;
    left: 13.5%;
    width: 54%;
    cursor: pointer; }
  .banner-phone {
    position: absolute;
    top: 8.3%;
    right: 15%;
    width: 34%;
    box-shadow: 0 0 50px 3px rgba(140, 255, 251, 0.5);
    background: linear-gradient(-85deg, #00e0ff, #007cde);
    border-radius: 50%;
    overflow: hidden; }
  .banner-phoneImg {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: url(../images/banner/phone.png);
    background-size: 119%;
    background-position: top right;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-name: hand;
            animation-name: hand; }
  .banner-now {
    position: absolute;
    top: 9%;
    left: 75%;
    width: 19%; }
  .banner-action {
    position: absolute;
    bottom: 0;
    left: 21.5%;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    width: 25.2%; }
    .banner-action::before {
      content: '';
      position: absolute;
      top: 2%;
      left: 0.5%;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50px;
      background-color: #ffd75a; }
    .banner-action a {
      position: relative;
      display: block;
      padding: 3.5% 0;
      font-size: 2.5vw;
      font-weight: bold;
      letter-spacing: 0.15vw;
      text-align: center;
      color: #fff;
      text-decoration: none;
      border-radius: 50px;
      border: 1px solid #ffd75a;
      background-color: #ffb740;
      cursor: pointer; }
  .banner .coins {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; }
  .banner .coin {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-name: coins;
            animation-name: coins; }
    .banner .coin.TL01 {
      top: 27%;
      left: 4.5%;
      width: 7%;
      -webkit-animation-delay: -2s;
              animation-delay: -2s; }
    .banner .coin.TL02 {
      top: 0;
      left: -3.5%;
      width: 8.5%; }
    .banner .coin.BL01 {
      bottom: 17%;
      left: 7%;
      width: 8.1%;
      -webkit-animation-delay: -.5s;
              animation-delay: -.5s; }
    .banner .coin.BL02 {
      bottom: 0;
      left: 4%;
      width: 8.3%;
      -webkit-animation-delay: -1s;
              animation-delay: -1s; }
    .banner .coin.TR01 {
      top: 10%;
      right: 1.6%;
      width: 8.8%;
      -webkit-animation-delay: -1.5s;
              animation-delay: -1.5s; }
    .banner .coin.TR02 {
      top: -5.2%;
      right: -2.5%;
      width: 7.2%;
      -webkit-animation-delay: -1s;
              animation-delay: -1s; }
    .banner .coin.BR01 {
      bottom: 12.5%;
      right: 15%;
      width: 6.3%; }
    .banner .coin.BR02 {
      bottom: 0;
      right: 1%;
      width: 7.3%;
      -webkit-animation-delay: -1.5s;
              animation-delay: -1.5s; }
  .banner.mb {
    display: none; }
  @media only screen and (max-width: 1023px) {
    .banner {
      padding-bottom: 0;
      background: none; }
      .banner.pc {
        display: none; }
      .banner.mb {
        display: block; }
      .banner-event {
        bottom: 22.1%;
        left: 0;
        width: 45%;
        height: 25%; }
      .banner-action {
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, 50%);
                transform: translate(-50%, 50%);
        width: 57%; }
        .banner-action::before {
          content: none; }
        .banner-action a {
          font-size: 5.5vw; } }

.wrap {
  max-width: 1060px;
  margin: auto;
  padding: 0 20px; }

.intro {
  padding: 70px 0;
  overflow: hidden;
  background-image: url(../images/background/intro.png);
  background-repeat: no-repeat;
  background-position: left bottom 170px; }
  .intro img {
    width: 100%; }
  .intro-top {
    display: -webkit-flex;
    display: flex; }
  .intro-privacy {
    -webkit-flex: 67;
            flex: 67;
    -webkit-order: 2;
            order: 2;
    max-width: 542px;
    margin-left: -10px; }
  .intro-noInput {
    -webkit-flex: 77;
            flex: 77;
    -webkit-order: 1;
            order: 1;
    position: relative;
    max-width: 615px;
    margin-top: 65px;
    margin-left: -20px; }
    .intro-noInput::before {
      content: '';
      position: absolute;
      top: 13%;
      left: -12%;
      display: block;
      width: 14%;
      padding-bottom: 14%;
      background-image: url(../images/intro/coin.png);
      background-repeat: no-repeat;
      background-size: contain; }
  .intro-easy {
    max-width: 944px;
    margin: 0 7%; }
  @media only screen and (max-width: 1023px) {
    .intro {
      background-position: left top 200px;
      background-size: 26%; }
      .intro-top {
        display: block; }
      .intro-privacy {
        margin: 0 25.6%; }
      .intro-noInput {
        margin: 0 22%;
        margin-top: 25px; }
        .intro-noInput::before {
          left: auto;
          right: -18%; }
      .intro-easy {
        margin-top: 15px; } }
  @media only screen and (max-width: 767px) {
    .intro {
      background-position: left top 10px;
      background-size: 28%; }
      .intro-privacy {
        max-width: none;
        margin: 0 6.4%; }
      .intro-noInput {
        max-width: none;
        margin: auto;
        margin-top: 15px; }
        .intro-noInput::before {
          top: -5%;
          right: -8%; }
      .intro-easy {
        width: 142%;
        max-width: none;
        margin: auto;
        margin-left: -23.5%; } }

.howToUse {
  padding: 60px 0 35px 0;
  background-color: #fff8f0; }
  .howToUse-title {
    margin-bottom: 50px; }
  @media only screen and (max-width: 767px) {
    .howToUse-title {
      margin-bottom: 30px; } }

.noticeBox {
  box-sizing: border-box;
  width: 88%;
  margin: auto;
  margin-top: 44px;
  padding: 20px 52px;
  border-radius: 10px;
  border: 1px solid #df3333;
  background-color: #fff; }
  .noticeBox-title {
    text-align: center;
    margin-bottom: 20px; }
  .noticeBox-item {
    color: #df3333; }
  .noticeBox .checkList > li + li {
    margin-top: 10px; }
  @media only screen and (max-width: 767px) {
    .noticeBox {
      width: 100%;
      margin-top: 24px;
      padding: 16px; }
      .noticeBox-title {
        margin-bottom: 12px; }
      .noticeBox .checkList > li + li {
        margin-top: 4px; } }

.step {
  max-width: 760px;
  margin: auto;
  margin-top: 30px;
  padding: 40px 0; }
  .step-title {
    margin-bottom: 26px;
    font-size: 28px;
    font-weight: bold;
    text-align: center; }
  .step-pic {
    position: relative;
    margin-bottom: 32px;
    padding-top: 20px;
    text-align: center; }
    .step-pic img{
      max-width: 280px; }
    .step-pic img + img {
      margin-left: 50px; }
  .step-note {
    position: absolute;
    top: -26px;
    left: 50%;
    -webkit-transform: translateX(19px);
            transform: translateX(19px);
    width: 240px;
    text-align: center;
    line-height: 1.2;
    color: #ef670e; }
  .step-text {
    font-size: 20px;
    color: #666666;
    text-align: center; }
    .step-text .note {
      margin-top: 20px;
      font-size: 14px;
      line-height: 2; }
  .owl-carousel .owl-item .step-pic img {
    display: inline-block;
    width: auto; }
  @media only screen and (max-width: 767px) {
    .step {
      margin-top: 0;
      padding: 33px 0; }
      .step-title {
        font-size: 22px;
        margin-bottom: 16px; }
      .step-text {
        font-size: 18px; }
        .step-text .note {
          margin-top: 10px;
          font-size: 12px;
          line-height: 1.5; }
      .step-note {
        top: -15px;
        font-size: 13px;
        width: 155px;
        -webkit-transform: translateX(2px);
                transform: translateX(2px); }
      .owl-carousel .owl-item .step-pic img {
        display: inline-block;
        width: 155px; }
      .owl-carousel .owl-item .step-pic img + img {
        margin-left: 4px; } }

.owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .owl-nav {
      top: 28px;
      -webkit-transform: none;
              transform: none; } }

.owl-prev {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .3s; }
  .owl-prev.disabled {
    opacity: 0;
    pointer-events: none; }
  @media only screen and (max-width: 767px) {
    .owl-prev {
      left: 0;
      -webkit-transform: none;
              transform: none; }
      .owl-prev img {
        width: 40px; } }

.owl-next {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .3s; }
  .owl-next.disabled {
    opacity: 0;
    pointer-events: none; }
  @media only screen and (max-width: 767px) {
    .owl-next {
      right: 0;
      -webkit-transform: none;
              transform: none; }
      .owl-next img {
        width: 40px; } }

.owl-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

.owl-dot + .owl-dot {
  margin-left: 12px; }

.owl-dot span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ef670e;
  background-color: #fff; }

.owl-dot.active span {
  background-color: #ef670e; }

@media only screen and (max-width: 767px) {
  .owl-dot + .owl-dot {
    margin-left: 8px; }
  .owl-dot span {
    width: 12px;
    height: 12px; } }

.arrowBtn.next {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.commonQA {
  padding: 70px 0 110px 0; }
  .commonQA-title {
    margin-bottom: 50px; }
  .commonQA-ans {
    font-size: 22px; }
    .commonQA-ans + .commonQA-ans {
      margin-top: 8px; }
  @media only screen and (max-width: 767px) {
    .commonQA-title {
      margin-bottom: 30px; }
    .commonQA-ans {
      font-size: 18px; } }

.event {
  padding-bottom: 100px;
  background-image: linear-gradient(to bottom, #e8feff, #00a2ff); }
  .event-title {
    text-align: center;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }

.eventBox {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  margin-top: 35px;
  padding: 30px;
  border: 2px solid #83cff9;
  border-radius: 16px;
  background-image: linear-gradient(to bottom, #87c8fb, #e2f6fd); }
  .eventBox-content {
    margin-left: 25px; }
  .eventBox-title {
    margin-bottom: 25px; }
  .eventBox-text {
    font-size: 22px;
    line-height: 1.8; }
  @media only screen and (max-width: 767px) {
    .eventBox {
      position: relative;
      display: block;
      margin-top: 25px;
      padding: 20px; }
      .eventBox-img {
        text-align: center;
        margin-top: 80px; }
        .eventBox-img img {
          width: 240px; }
      .eventBox-content {
        margin-left: 0;
        margin-top: 20px; }
      .eventBox-title {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        text-align: center; }
      .eventBox-text {
        font-size: 18px; } }

.btn {
  display: inline-block;
  padding: 16px 40px;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid #ffd75a;
  background-color: #ffb740;
  cursor: pointer; }
  @media only screen and (max-width: 767px) {
    .btn {
      padding: 12px 40px;
      font-size: 20px; } }

.collapse {
  border-bottom: 2px solid #ef670e; }
  .collapse-action {
    position: relative;
    display: block;
    padding: 24px 50px 24px 20px;
    font-size: 22px;
    text-decoration: none; }
    .collapse-action::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 24px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      display: block;
      width: 24px;
      height: 15px;
      background-image: url(../images/icon/down.svg);
      background-repeat: no-repeat;
      background-size: contain;
      transition: .3s; }
    .collapse-action.open::after {
      -webkit-transform: translateY(-50%) rotate(180deg);
              transform: translateY(-50%) rotate(180deg); }
  .collapse-num {
    display: inline-block;
    vertical-align: text-top;
    color: #ef670e; }
  .collapse-title {
    display: inline-block;
    vertical-align: text-top;
    max-width: calc(100% - 133px);
    color: #333;
    margin-left: 25px; }
  .collapse-content {
    display: none;
    padding: 24px;
    background-color: #fff8f0; }
  .collapse.notice {
    border: 1px solid #fff;
    border-radius: 16px; }
  .collapse.notice .collapse-action {
    padding: 24px 20px;
    font-size: 20px; }
    .collapse.notice .collapse-action::after {
      width: 28px;
      height: 28px;
      background-image: url(../images/icon/plus.png); }
  .collapse.notice .collapse-title {
    max-width: 100%;
    margin-left: 0; }
  .collapse.notice .collapse-content {
    margin: 20px;
    margin-top: 0;
    padding: 30px 0;
    border-top: 1px solid #fff;
    background-color: transparent; }
  @media only screen and (max-width: 767px) {
    .collapse-action {
      padding: 12px 34px 12px 10px;
      font-size: 18px; }
      .collapse-action::after {
        right: 8px;
        width: 20px;
        height: 15px; }
    .collapse-num {
      display: block; }
    .collapse-title {
      display: block;
      max-width: 100%;
      margin-left: 0;
      margin-top: 4px; }
    .collapse.notice .collapse-action {
      padding: 12px 20px;
      font-size: 16px; }
      .collapse.notice .collapse-action::after {
        right: 20px;
        width: 18px;
        height: 18px; }
    .collapse.notice .collapse-title {
      margin-top: 0; }
    .collapse.notice .collapse-content {
      padding: 20px 0; } }

.checkList {
  margin: 0;
  padding: 0; }
  .checkList > li {
    position: relative;
    padding-left: 33px;
    font-size: 22px;
    list-style: none; }
    .checkList > li::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 18px;
      height: 18px;
      margin: 7.5px 0;
      background-image: url(../images/icon/check-bk.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    .checkList > li .note {
      margin-top: 16px; }
  @media only screen and (max-width: 767px) {
    .checkList > li {
      font-size: 18px;
      padding-left: 27px; }
      .checkList > li::before {
        width: 16px;
        height: 16px;
        margin: 5.5px 0; }
      .checkList > li .note {
        margin-top: 12px; } }

ol {
  font-size: 22px;
  margin: 0;
  padding-left: 25px; }
  ol li {
    padding-left: 8px; }
  @media only screen and (max-width: 767px) {
    ol {
      font-size: 18px;
      padding-left: 21px; }
      ol li {
        padding-left: 6px; } }

.zhlist {
  margin: 0;
  padding: 0;
  padding-left: 60px;
  font-size: 20px; }
  .zhlist > li {
    position: relative;
    padding-left: 66px;
    list-style: none; }
    .zhlist > li span {
      position: absolute;
      top: 0;
      left: 0; }
  .zhlist > li + li {
    margin-top: 6px; }
  .zhlist.inside {
    padding-left: 0; }
  @media only screen and (max-width: 767px) {
    .zhlist {
      font-size: 16px;
      padding-left: 0; }
      .zhlist > li {
        padding-left: 48px; }
      .zhlist li {
        font-size: 16px; } }

.tab-nav {
  display: -webkit-flex;
  display: flex; }

.tab-action {
  display: block;
  -webkit-flex: 1;
          flex: 1;
  padding: 9px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #ef670e;
  text-decoration: none;
  border: 2px solid #ef670e;
  background-color: #fff; }
  .tab-action.active {
    color: #fff;
    background-color: #ef670e; }

.tab-content {
  display: none; }
  .tab-content.active {
    display: block; }

@media only screen and (max-width: 767px) {
  .tab-action {
    font-size: 20px; } }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: 1em; }

p {
  margin: 0; }

.warning {
  position: relative;
  display: inline-block;
  padding-left: 33px;
  font-size: 22px;
  font-weight: bold;
  color: #df3333; }
  .warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin: 7.5px 0;
    background-image: url(../images/icon/warning.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
  @media only screen and (max-width: 767px) {
    .warning {
      font-size: 18px;
      padding-left: 27px; }
      .warning::before {
        width: 16px;
        height: 16px;
        margin: 5.5px 0; } }

.note {
  font-size: 16px;
  color: #666666; }
  @media only screen and (max-width: 767px) {
    .note {
      font-size: 14px; } }

.title {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #ef670e;
  text-align: center; }
  .title::before, .title::after {
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
    content: '';
    display: block;
    width: 36px;
    height: 16.2px;
    background-image: url(../images/icon/title.svg);
    background-size: contain;
    background-repeat: no-repeat; }
  .title::before {
    margin-right: 24px; }
  .title::after {
    margin-left: 24px; }
  @media only screen and (max-width: 767px) {
    .title {
      font-size: 24px; }
      .title::before, .title::after {
        width: 28px;
        height: 13px; }
      .title::before {
        margin-right: 14px; }
      .title::after {
        margin-left: 14px; } }

.bold {
  font-weight: bold; }

.ribbonTitle {
  position: relative;
  display: inline-block;
  margin: 0 24px;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #fff;
  text-align: center; }
  .ribbonTitle div {
    padding: 14px 20px;
    background-color: #1b62c3; }
  .ribbonTitle img {
    position: absolute;
    top: 0;
    height: 100%; }
    .ribbonTitle img.left {
      left: 1px;
      -webkit-transform: translateX(-100%) rotateY(180deg);
              transform: translateX(-100%) rotateY(180deg); }
    .ribbonTitle img.right {
      right: 1px;
      -webkit-transform: translateX(100%);
              transform: translateX(100%); }
  .ribbonTitle.sm {
    font-size: 26px; }
    .ribbonTitle.sm div {
      padding: 10px 30px; }
  @media only screen and (max-width: 767px) {
    .ribbonTitle {
      font-size: 24px; }
      .ribbonTitle.sm {
        font-size: 20px; } }

.info {
  display: -webkit-flex;
  display: flex;
  font-size: 22px;
  margin-bottom: 16px; }
  .info-title {
    padding: 2px 15px 2px 18px;
    letter-spacing: 3px;
    color: #fff;
    border-radius: 16px;
    background-color: #00a2ff; }
  .info-content {
    margin-left: 15px; }
  .info-btn {
    margin-top: 30px;
    text-align: center; }
  .info.vh {
    display: block;
    margin-bottom: 50px; }
  .info.vh .info-title {
    display: inline-block; }
  .info.vh .info-content {
    margin-left: 0;
    margin-top: 15px; }
  @media only screen and (max-width: 767px) {
    .info {
      display: block;
      font-size: 18px; }
      .info-title {
        display: inline-block; }
      .info-content {
        margin-left: 0;
        margin-top: 6px; }
      .info-btn {
        margin-top: 20px; }
      .info.vh {
        margin-bottom: 30px; } }

.bu {
  color: #1b62c3; }

.rd {
  color: #dd2121; }

.money {
  padding: 0 10px 2px 10px;
  border-radius: 20px;
  background-color: #ffd833; }

.link {
  color: inherit; }

@media only screen and (min-width: 1024px) {
  .mobileOnly {
    display: none; } }

@media only screen and (max-width: 1023px) {
  .desktopOnly {
    display: none; } }

/*20260317*/
.footer {
    width: 100%;
    background-color: #007fe0;
    height: 80px;
    padding: 10px 0
}
.footer a {
    color: #fff
}

.footerCont {
    color: white;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 28px;
  text-align: center;
}

.footerCont .copyright {
    width: 100%;
}

.footerCont .contWrapper {
    width: 100%;
}

.contWrapper .footer-item {
  display: inline-block;
  padding: 0 5px;
}

.contWrapper .footer-item a{
    display: inline-block;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .footer {
        height: auto;
        padding-bottom: 60px;
    }

    .footerCont {
        font-size: 12px;
        line-height: 20px;
    text-align: left;
    }
  
  .contWrapper .footer-item {
    width: 100%;
    display: block;
    padding: 0;
  }

    .footerCont .copyright,.footerCont .contact {
        float: none;
        display: block;
        max-width: 100%;
        padding-bottom: 10px
    }
}