@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap; }

html,
body {
  font-family: "Noto Sans TC", sans-serif, Arial, Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #573517; }
  @media only screen and (max-width: 1023px) {
    html.-menuOpen,
    body.-menuOpen {
      overflow: hidden; } }

main {
  overflow: hidden; }

a,
button {
  padding: 0;
  line-height: 1.6;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }

.footer a {
  color: #FFF; }

/*
 * 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; }

body {
  height: 100%; }

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

.main {
  padding-top: 80px; }
  .main p {
    padding: 0; }
  @media only screen and (max-width: 1023px) {
    .main {
      padding-top: 76px; } }
  @media only screen and (max-width: 767px) {
    .main {
      padding-top: 58px; } }

.service {
  position: fixed;
  right: 20px;
  bottom: 148px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/yuan.svg);
  cursor: pointer;
  z-index: 50;
  transition: .3s; }
  .service-box {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    display: none;
    flex-direction: column;
    width: 186px;
    padding: 8px;
    font-size: 12px;
    color: #0072ff;
    line-height: 1.6;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
    background: #fff;
    z-index: 10; }
    .service-box span {
      color: #707070; }
  @media only screen and (min-width: 768px) {
    .service:hover .service-box {
      display: flex; } }
  @media only screen and (max-width: 1279px) {
    .service {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .service {
      bottom: 172px;
      width: 43px;
      height: 43px; } }

.line {
  position: fixed;
  right: 20px;
  bottom: 84px;
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/line.svg) no-repeat center/contain;
  cursor: pointer;
  text-decoration: none;
  z-index: 50;
  transition: .2s; }
  .line:hover {
    transform: scale(1.1); }
  @media only screen and (max-width: 1279px) {
    .line {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .line {
      bottom: 121px;
      width: 43px;
      height: 43px; } }

.goTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/top.svg);
  opacity: 1;
  cursor: pointer;
  z-index: 50;
  transition: .2s; }
  .goTop:hover {
    transform: scale(1.1); }
  @media only screen and (max-width: 1279px) {
    .goTop {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .goTop {
      bottom: 70px;
      width: 43px;
      height: 43px; } }

.float {
  position: fixed;
  top: 160px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 50px;
  z-index: 50; }
  .float-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 20px 12px;
    border-radius: 10px;
    background-color: #005BAC; }
    .float-item img {
      width: 22px; }
    .float-item div {
      color: #FFF;
      letter-spacing: 0.05em;
      -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-lr;
              writing-mode: vertical-lr; }
    .float-item.-rd {
      background-color: #D93636; }
    .float-item.-pk {
      background-color: #F94B4B; }
  @media only screen and (min-width: 1024px) {
    .float-item {
      transition: .3s; }
      .float-item:hover {
        transform: scale(1.05); } }
  @media only screen and (max-width: 1279px) {
    .float {
      right: 12px;
      width: 40px; }
      .float-item {
        padding: 15px 10px; }
        .float-item img {
          width: 18px; } }
  @media only screen and (max-width: 767px) {
    .float {
      display: flex;
      top: auto;
      bottom: 0;
      right: 0;
      flex-direction: row;
      gap: 0;
      width: 100%; }
      .float-item {
        flex: 1;
        flex-direction: row;
        justify-content: center;
        padding: 12px;
        border-radius: 0; }
        .float-item div {
          padding-bottom: 1px;
          -webkit-writing-mode: initial;
              -ms-writing-mode: initial;
                  writing-mode: initial; } }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap; }

/* ------------------------------- Header ------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 20px;
  background: white url(../images/header/header_bg.png) no-repeat center right/contain;
  z-index: 100; }
  .header-logo {
    flex: 1;
    display: block; }
    .header-logo a {
      display: block;
      width: 308px; }
    .header-logo img {
      width: 100%; }
  .header-nav {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    padding: 0 20px;
    font-size: 18px;
    color: #573517; }
    .header-nav a {
      color: #573517;
      text-decoration: none; }
    .header-nav span {
      margin: 0 14px; }
  .header-plusLogo {
    flex: 0 0 auto;
    width: 130px;
    height: 39px;
    margin-left: 30px;
    background: url(../images/header/yuantaplus_logo.svg) no-repeat center/contain; }
  .header-burger {
    flex: 0 0 auto;
    display: none; }
  @media only screen and (max-width: 1279px) {
    .header-logo a {
      width: 270px; }
    .header-nav {
      font-size: 16px;
      padding: 0 12px; }
      .header-nav span {
        margin: 0 5px; }
    .header-plusLogo {
      width: 106px;
      margin-left: 5px; } }
  @media only screen and (max-width: 1023px) {
    .header {
      padding: 16px;
      height: 68px;
      background-position: center right -100px; }
      .header-logo a {
        width: 240px; }
      .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 50px;
        flex-direction: column;
        justify-content: center;
        font-size: 20px;
        text-align: center;
        background-color: #FFF;
        opacity: 0;
        pointer-events: none;
        transition: .3s;
        z-index: 5; }
        .header-nav a {
          padding: 20px;
          border-top: 1px solid #573517; }
          .header-nav a:first-child {
            border-top: none; }
        .header-nav span {
          display: none; }
        .-menuOpen .header-nav {
          opacity: 1;
          pointer-events: visible; }
      .header-plusLogo {
        display: none; }
      .header-burger {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        background: url(../images/header/burger.svg) no-repeat center/contain;
        z-index: 10; }
        .-menuOpen .header-burger {
          background-image: url(../images/header/cross.svg); } }
  @media only screen and (max-width: 767px) {
    .header {
      height: 59.5px; }
      .header-logo a {
        width: 190px; } }

@media only screen and (max-width: 1023px) {
  .main {
    padding-top: 68px; } }

@media only screen and (max-width: 767px) {
  .main {
    padding-top: 60px; } }

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

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

@-webkit-keyframes float {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(2%); } }

@keyframes float {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(2%); } }

@-webkit-keyframes dialog {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.05); } }

@keyframes dialog {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.05); } }

.banner {
  position: relative;
  padding-bottom: 709px;
  overflow: hidden; }
  .banner-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%; }
    .banner-bg img {
      width: auto;
      height: 100%; }
  .banner-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1480px;
    height: 100%;
    font-size: 0;
    z-index: 1; }
    .banner-wrap > div {
      position: absolute; }
    .banner-wrap img {
      width: 100%; }
  .banner-tit {
    top: 20.02821%;
    left: 1.28378%;
    width: 46.14865%; }
    .banner-tit.-pay {
      top: 15.37377%;
      left: -2.09459%;
      width: 49.66216%; }
  .banner-dialog {
    position: absolute;
    top: 0;
    right: 4.4898%;
    width: 30.20408%;
    transform-origin: 40% 100%;
    -webkit-animation: hand 0.5s ease-in-out infinite alternate;
            animation: hand 0.5s ease-in-out infinite alternate; }
  .banner-people01 {
    top: 18.33568%;
    right: 21.28378%;
    width: 33.64865%;
    background: url(../images/banner/people01-bg.svg) no-repeat center/contain; }
    .banner-people01 > div {
      position: relative;
      -webkit-animation: float 2s ease-in-out infinite alternate;
              animation: float 2s ease-in-out infinite alternate; }
  .banner-hand01 {
    position: absolute;
    top: 28.2243%;
    right: 19.47791%;
    width: 33.73494%;
    transform-origin: 75% 10%;
    -webkit-animation: hand 1s ease-in-out infinite alternate;
            animation: hand 1s ease-in-out infinite alternate; }
  .banner-people02 {
    top: 18.0536%;
    right: -0.87838%;
    width: 28.51351%;
    background: url(../images/banner/people02-bg.svg) no-repeat center/contain; }
    .banner-people02 > div {
      position: relative;
      animation: float 2s ease-in-out infinite alternate-reverse; }
  .banner-hand02 {
    position: absolute;
    top: 10.40564%;
    left: 1.4218%;
    width: 39.81043%;
    transform-origin: 5% 60%;
    -webkit-animation: hand 1s ease-in-out infinite alternate;
            animation: hand 1s ease-in-out infinite alternate; }
  @media only screen and (min-width: 1921px) {
    .banner-bg {
      top: auto;
      bottom: 0;
      width: 100%;
      height: auto; }
      .banner-bg img {
        width: 100%;
        height: auto; } }
  @media only screen and (max-width: 1479px) {
    .banner {
      padding-bottom: 47.90541%; } }
  @media only screen and (max-width: 767px) {
    .banner {
      padding-bottom: 136.75214%; }
      .banner-tit {
        top: 7.875%;
        left: 5.81197%;
        width: 84.10256%; }
        .banner-tit.-pay {
          top: 4.375%;
          left: 6.4%;
          width: 85.33333%; }
      .banner-people01 {
        top: auto;
        bottom: 3.625%;
        right: 37.86325%;
        width: 57.60684%;
        background-image: url(../images/banner/people01-bg-m.svg); }
      .banner-people02 {
        top: auto;
        bottom: 6.9375%;
        right: 2.90598%;
        width: 47.00855%; } }

.link {
  color: #007fe0 !important; }

.btn {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 53px;
  padding-bottom: 1px;
  font-size: 20px;
  color: #FFF;
  border-radius: 27px;
  background-color: #00659E;
  cursor: pointer; }
  .btn span {
    flex: 0 0 auto; }
  .btn::after {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 11px;
    background: url(../images/icon/arrow.svg) no-repeat center/contain; }
  .btn.-lt {
    background-color: #00A4DE; }
  .btn.-pk {
    background-color: #E74E95; }
  .btn.-yl {
    color: #000;
    background-color: #FFD100; }
    .btn.-yl::after {
      background-image: url(../images/icon/arrow-bk.svg); }
  .btn.-rd {
    background-color: #E8383B; }
  .btn.-bu {
    background-color: #007CC5; }
  .btn.-og {
    background-color: #E94921; }
  .btn.-gn {
    background-color: #50BD00; }
  .btn.-sm {
    width: 175px;
    height: 44px;
    font-size: 18px; }
  @media only screen and (min-width: 1024px) {
    .btn::after {
      transition: .3s; }
    .btn:hover::after {
      transform: translateX(70%); }
    .btn.-sm:hover::after {
      transform: translateX(50%); } }
  @media only screen and (max-width: 1023px) {
    .btn {
      gap: 4px;
      width: 120px;
      height: 40px;
      padding-bottom: 0;
      font-size: 16px; }
      .btn::after {
        width: 17px;
        height: 10px; }
      .btn.-sm {
        width: 138px;
        height: 40px;
        font-size: 16px; }
      .btn.-lg {
        gap: 8px;
        width: 240px;
        height: 53px;
        padding-bottom: 1px;
        font-size: 20px; } }

.anchor {
  transform: translateY(-80px); }
  @media only screen and (max-width: 1023px) {
    .anchor {
      transform: translateY(-68px); } }
  @media only screen and (max-width: 767px) {
    .anchor {
      transform: translateY(-60px); } }

@-webkit-keyframes plane {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(10%); } }

@keyframes plane {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(10%); } }

@-webkit-keyframes people {
  0% {
    transform: skewX(-1.5deg); }
  100% {
    transform: skewX(0deg); } }

@keyframes people {
  0% {
    transform: skewX(-1.5deg); }
  100% {
    transform: skewX(0deg); } }

.block.-section1 {
  padding: 70px 0 104px;
  background: #D1EFFA url(../images/section1/bg.svg) no-repeat center/2740px;
  background-blend-mode: screen; }

.block.-section2 {
  position: relative;
  padding: 40px 0 180px;
  background: #DFF6FF url(../images/section2/bg.svg) no-repeat center/1587px; }
  .block.-section2::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 187px;
    background: url(../images/section2/arc.svg) no-repeat center bottom/1920px; }
  .block.-section2::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 16px);
    left: calc(50% + 236px);
    width: 283px;
    height: 132px;
    background: url(../images/section2/plane.svg) no-repeat center/contain;
    -webkit-animation: plane 1s ease-in-out infinite alternate;
            animation: plane 1s ease-in-out infinite alternate; }

.block.-section3 {
  position: relative;
  padding: 60px 0 300px;
  background: url(../images/section3/city.svg) no-repeat center bottom/1920px, url(../images/section3/cloud.svg) no-repeat center top 260px/1920px;
  background-color: #D1EFFA; }
  .block.-section3::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 80px;
    background: url(../images/section3/arc.svg) no-repeat center bottom/1920px; }

.block.-section4 {
  position: relative;
  padding: 50px 0 150px;
  background: #DFF6FF url(../images/section4/bg.svg) no-repeat center/1550px;
  z-index: 1; }
  .block.-section4::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 94px;
    background: url(../images/section4/arc.svg) no-repeat center bottom/1920px; }
  .block.-section4.-pay {
    background-color: #D1EFFA; }
    .block.-section4.-pay::before {
      background-image: url(../images/section4/arc-pay.svg); }

.block.-section5 {
  position: relative;
  padding: 80px 0 90px;
  background-color: #D1EFFA;
  z-index: 1; }
  .block.-section5::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 143px;
    background: url(../images/section5/arc.svg) no-repeat center bottom/1920px; }
  .block.-section5::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: calc(50% + 395px);
    width: 282px;
    height: 345px;
    background: url(../images/section5/man.svg) no-repeat center/contain;
    transform-origin: bottom center;
    -webkit-animation: people 1s ease-in-out infinite alternate;
            animation: people 1s ease-in-out infinite alternate; }
  .block.-section5.-pay {
    background-color: #DFF6FF; }
    .block.-section5.-pay::before {
      background-image: url(../images/section5/arc-pay.svg); }

.block.-notice {
  padding: 50px 0;
  background-color: #D1EFFA; }
  .block.-notice.-pay {
    background-color: #DFF6FF; }

.block-wrap {
  position: relative;
  box-sizing: border-box;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 1; }

.block-tit {
  font-size: 0;
  text-align: center; }
  .block-tit > div {
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
    color: #0096EA;
    vertical-align: middle; }

.block-titBg {
  position: relative; }
  .block-titBg > img {
    width: auto;
    height: 90px; }
  .block-titBg > span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    color: #FFF; }

.block-content {
  margin-top: 30px; }

.block-tit + .block-note {
  margin-top: 32px; }

.block-note {
  margin-top: 70px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center; }

.block-action {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px; }

@media only screen and (min-width: 1921px) {
  .block.-section2::before {
    height: 9.73958vw;
    background-size: 100%;
    pointer-events: none; }
  .block.-section3 {
    background: url(../images/section3/city.svg) repeat-x center bottom/1920px, url(../images/section3/cloud.svg) no-repeat center top 260px/1920px;
    background-color: #D1EFFA; }
    .block.-section3::before {
      height: 4.16667vw;
      background-size: 100%;
      pointer-events: none; }
  .block.-section4::before {
    height: 4.89583vw;
    background-size: 100%;
    pointer-events: none; }
  .block.-section5::before {
    height: 7.44792vw;
    background-size: 100%;
    pointer-events: none; } }

@media only screen and (max-width: 1279px) {
  .block.-section3 {
    padding: 60px 0 260px; }
  .block.-section5::after {
    left: calc(50% + 340px);
    width: 200px;
    height: 245px; } }

@media only screen and (max-width: 1023px) {
  .block.-section1 {
    padding: 40px 0 80px; }
  .block.-section2 {
    padding: 50px 0 80px; }
    .block.-section2::before {
      background-size: 100%; }
    .block.-section2::after {
      bottom: calc(100% - 12px);
      left: auto;
      right: 32px;
      width: 141px;
      height: 70px; }
  .block.-section3 {
    padding: 60px 0 140px;
    background: url(../images/section3/city.svg) no-repeat center bottom/1024px, url(../images/section3/cloud.svg) no-repeat center top 30px/860px;
    background-color: #D1EFFA; }
    .block.-section3::before {
      background-size: 100%; }
  .block.-section4 {
    padding: 40px 0 60px; }
    .block.-section4::before {
      background-size: 100%; }
  .block.-section5 {
    padding: 30px 0 40px; }
    .block.-section5::before {
      background-size: 100%; }
    .block.-section5::after {
      content: none; }
  .block.-notice {
    padding: 30px 0;
    background-color: #D1EFFA; }
  .block-tit > div {
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.01em; }
  .block-titBg > img {
    height: 60px; }
  .block-titBg > span {
    line-height: 1.6; }
  .block-tit + .block-note {
    margin-top: 10px; }
  .block-note {
    margin-top: 38px;
    font-size: 13px; }
  .block-action {
    flex-direction: column;
    align-items: center;
    gap: 13px;
    margin-top: 26px; } }

@media only screen and (max-width: 767px) {
  .block.-section3 {
    background: url(../images/section3/city-m.svg) no-repeat center bottom/100%, url(../images/section3/cloud-m.svg) no-repeat center top 30px/490px;
    background-color: #D1EFFA; }
  .block.-section3 .block-wrap {
    padding: 0 18px; }
  .block-note {
    text-align: left; } }

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

@keyframes coin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-17deg); } }

.ticket {
  max-width: 679px;
  margin: 0 auto;
  padding: 0 13px;
  text-align: center;
  box-shadow: 3px 4px 19.2px rgba(129, 200, 226, 0.74);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.84);
  overflow: hidden; }
  .ticket::before, .ticket::after {
    content: '';
    display: block;
    height: 13px;
    margin: 0 -13px;
    background-color: #0096EA; }
  .ticket::before {
    margin-bottom: 20px; }
  .ticket::after {
    margin-top: 20px; }
  .ticket-txt {
    font-size: 24px; }
  .ticket-pic {
    position: relative;
    display: inline-block;
    margin-top: 20px; }
    .ticket-pic img {
      max-width: 425px; }
  .ticket-coin {
    position: absolute;
    bottom: 11px;
    left: 35px;
    width: 70px;
    -webkit-animation: coin .5s ease-in-out infinite alternate;
            animation: coin .5s ease-in-out infinite alternate; }
  .ticket-note {
    display: inline-block;
    padding: 2px 10px;
    font-size: 16px;
    font-weight: 400;
    background-color: #F0F0F0; }
  @media only screen and (max-width: 1023px) {
    .ticket {
      box-shadow: none;
      border-radius: 8px;
      background: #FFFFFF; }
      .ticket::before, .ticket::after {
        height: 7px; }
      .ticket::before {
        margin-bottom: 15px; }
      .ticket-txt {
        font-size: 15px; }
      .ticket-pic {
        margin-top: 12px; }
        .ticket-pic img {
          max-width: 300px; }
      .ticket-coin {
        bottom: 6px;
        left: 6px;
        width: 45px; }
      .ticket-note {
        margin-top: 16px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.3; } }
  @media only screen and (max-width: 767px) {
    .ticket-pic img {
      max-width: 240px; } }

.pays {
  margin-top: 38px;
  text-align: center; }
  .pays-title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: #573517; }
  .pays-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px; }
    .pays-logos a {
      flex: 0 0 auto; }
    .pays-logos img {
      width: 70px; }
  @media only screen and (min-width: 1024px) {
    .pays-logos a {
      transition: .3s; }
      .pays-logos a:hover {
        transform: scale(1.15); } }
  @media only screen and (max-width: 1023px) {
    .pays-title {
      font-size: 16px; }
    .pays-logos img {
      width: 60px; } }

.swiper-pagination {
  position: static;
  margin-top: 30px;
  line-height: 0; }

.swiper .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 4px;
  border-radius: 4px;
  background-color: #DEDEDE;
  opacity: 1;
  transition: background-color .3s; }
  .swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #0E6EA4; }

.account {
  margin-top: -20px;
  text-align: center; }
  .account-head {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #00659E; }
    .account-head .-rd {
      color: #EA5751; }
    .account-head .-num {
      font-size: 40px; }
  .account-slider {
    margin-top: 48px; }
  .account .swiper {
    overflow: visible; }
    .account .swiper-slide {
      width: 240px; }
  .account-icon {
    margin-bottom: -20px; }
  .account-tit {
    position: relative;
    padding: 17px 10px 30px;
    font-size: 25px;
    font-weight: 500;
    color: #FFF;
    border-radius: 13px;
    background-color: #00659E; }
  .account-content {
    position: relative;
    box-sizing: border-box;
    height: 224px;
    padding-top: 3px;
    background-color: #FFF; }
    .account-content::before, .account-content::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      padding-bottom: 8.33333%;
      background: url(../images/section2/frame.svg) no-repeat center bottom/cover; }
    .account-content::before {
      bottom: calc(100% - 1px); }
    .account-content::after {
      top: calc(100% - 1px);
      transform: rotateX(-180deg); }
  .account-txt {
    display: flex;
    align-items: center;
    min-height: calc(1.25 * 3em);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25; }
    .account-txt > div {
      width: 100%; }
  .account-img {
    margin-top: 8px; }
    .account-img > img {
      max-width: 204px; }
  .account-note {
    margin-top: 10px;
    padding: 2px 13px;
    display: inline-block;
    font-size: 16px;
    line-height: 1.3;
    color: #8B745F;
    background-color: #FFF3D8; }
  .account-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 46px; }
  @media only screen and (max-width: 1023px) {
    .account {
      margin-top: -24px; }
      .account-head {
        font-size: 19px; }
        .account-head .-num {
          font-size: 19px; }
      .account-slider {
        margin-top: 14px; }
      .account .swiper-slide {
        width: 232px; }
      .account-icon img {
        width: 198px; }
      .account-tit {
        padding: 12px 10px 29px;
        font-size: 22px; }
      .account-content {
        height: 188px;
        padding-top: 0; }
      .account-txt {
        min-height: calc(1.25 * 2.3em);
        font-size: 16px; }
      .account-img {
        margin-top: 6px; }
      .account-note {
        margin-top: 5px;
        padding: 1px 13px;
        line-height: 1.2; }
      .account-action {
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        margin: 44px -7px 0; } }

.tab {
  position: relative;
  padding-top: 30px; }
  .tab.-pay .tab-content {
    margin-top: 0; }
  .tab-nav {
    display: flex;
    justify-content: center;
    gap: 13px; }
    .tab-nav button {
      flex: 0 0 auto;
      width: 305px;
      height: 65px;
      font-size: 30px;
      font-weight: 700;
      color: #FFF;
      border-radius: 20px;
      background-color: #00A4DE;
      transition: background-color .3s, color .3s; }
      .tab-nav button.-active.-pk {
        background-color: #E74E95; }
      .tab-nav button.-active.-yl {
        color: #000;
        background-color: #FFD100; }
      .tab-nav button.-active.-rd {
        background-color: #E8383B; }
  .tab-content {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 32px;
    padding: 32px 64px;
    box-shadow: 5px 10px 6px 0px rgba(0, 164, 222, 0.141);
    border-radius: 56px;
    background-color: #E7F8FF;
    overflow: hidden;
    pointer-events: none;
    opacity: 0; }
    .tab-content.-active {
      position: static;
      pointer-events: visible;
      opacity: 1; }
  .tab-girl {
    position: absolute;
    bottom: -378px;
    right: calc(50% + 384px);
    width: 380px;
    pointer-events: none;
    z-index: 1; }
    .tab-girl > img {
      position: relative;
      z-index: 1; }
  .tab-hand {
    position: absolute;
    top: 0;
    right: 17.36842%;
    width: 42.36842%;
    transform-origin: 5% 80%;
    -webkit-animation: hand 1s ease-in-out infinite alternate;
            animation: hand 1s ease-in-out infinite alternate; }
  @media only screen and (max-width: 1279px) {
    .tab-girl {
      bottom: -300px;
      right: auto;
      left: -100px;
      width: 280px; } }
  @media only screen and (max-width: 1023px) {
    .tab {
      padding-top: 0; }
      .tab-nav {
        gap: 6px; }
        .tab-nav button {
          width: 108px;
          height: 34px;
          font-size: 16px;
          border-radius: 10px;
          background-color: #BDBDBD; }
      .tab-content {
        max-width: 812px;
        margin: 26px auto 0;
        padding: 20px;
        border-radius: 30px; }
      .tab-girl {
        display: none; } }
  @media only screen and (max-width: 767px) {
    .tab-content {
      padding: 0;
      box-shadow: none;
      border-radius: 0;
      background-color: transparent; }
      .tab-content.-active {
        overflow: visible; } }

.feedback {
  max-width: 772px;
  margin: 0 auto; }
  .feedback-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 23px 23px 20px;
    line-height: 1.5;
    text-align: center;
    border-radius: 12px;
    background-color: #FFF; }
  .feedback-icon {
    flex: 0 0 auto; }
    .feedback-icon img {
      width: 177px; }
  .feedback-name {
    flex: 0 0 auto;
    margin-top: 16px;
    font-size: 18px; }
  .feedback-num {
    flex: 1 0 auto;
    padding: 3px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #FF586C; }
  .feedback-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px; }
  .feedback .swiper-slide {
    height: auto; }
  @media only screen and (min-width: 768px) {
    .feedback .swiper-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 26px;
      transform: none !important; }
    .feedback .swiper-slide {
      flex: 0 1 auto;
      box-sizing: border-box;
      width: 240px; }
    .feedback .swiper-pagination {
      display: none; } }
  @media only screen and (max-width: 1023px) {
    .feedback {
      max-width: 526px; }
      .feedback .swiper-slide {
        width: 158px; }
      .feedback-item {
        padding: 9px 0 13px;
        border-radius: 10px; }
      .feedback-icon img {
        width: 122px; }
      .feedback-name {
        margin-top: 5px;
        font-size: 14px; }
      .feedback-num {
        padding: 2px 0;
        font-size: 18px; }
      .feedback-action {
        margin-top: 8px; } }
  @media only screen and (max-width: 767px) {
    .feedback.swiper {
      overflow: visible; } }

.letter {
  text-align: center; }
  .letter-head {
    position: relative;
    display: inline-block;
    width: 575px; }
    .letter-head > div {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      font-size: 38px;
      font-weight: 500;
      color: #FFFFFF; }
      .letter-head > div span {
        font-size: 42px;
        color: #F9FFAB;
        margin-left: 0.5em; }
  .letter-slider {
    margin-top: 70px; }
  .letter .swiper-slide {
    width: 315px; }
  .letter-tit {
    font-size: 28px;
    font-weight: 700;
    color: #00659E; }
  .letter-txt {
    font-size: 20px;
    font-weight: 500; }
    .letter-txt::after {
      content: '';
      display: block;
      width: 153px;
      height: 12px;
      margin: 10px auto 17px;
      background: url(../images/section4/line.svg) no-repeat center/contain; }
  .letter-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 36px; }
  @media only screen and (max-width: 1023px) {
    .letter-head {
      width: 301px; }
      .letter-head > div {
        bottom: 4px;
        font-size: 20px; }
        .letter-head > div span {
          font-size: 22px; }
    .letter-slider {
      margin-top: 40px; }
    .letter .swiper-slide {
      width: 253px; }
    .letter-tit {
      font-size: 22px; }
    .letter-txt {
      font-size: 17px; }
      .letter-txt::after {
        width: 153px;
        height: 12px;
        margin: 10px auto; }
    .letter-content img {
      width: 253px; }
    .letter-action {
      flex-direction: row;
      justify-content: center;
      gap: 5px;
      margin-top: 28px; } }

@-webkit-keyframes flash {
  0% {
    transform: rotate(-8deg); }
  100% {
    transform: rotate(12deg); } }

@keyframes flash {
  0% {
    transform: rotate(-8deg); }
  100% {
    transform: rotate(12deg); } }

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

@keyframes flower {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

.gift {
  text-align: center; }
  .gift-head {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
    color: #0E6EA4; }
    .gift-head .-rd {
      color: #F5683B; }
    .gift-head .-num {
      position: relative;
      font-size: 50px; }
      .gift-head .-num::after {
        content: '';
        position: absolute;
        top: 7px;
        right: -4px;
        width: 16px;
        height: 11px;
        background: url(../images/section5/line.svg) no-repeat center/contain;
        transform-origin: 50% 60%;
        -webkit-animation: flash 0.5s linear infinite alternate;
                animation: flash 0.5s linear infinite alternate; }
    .gift-head p {
      color: #0EA9E0; }
  .gift-slider {
    margin-top: 70px; }
  .gift .swiper-slide {
    width: 322px;
    padding: 0 45px 32px; }
  .gift .swiper-slide + .swiper-slide {
    border-left: 2px solid #BCE2EF; }
  .gift-pic {
    position: relative;
    display: inline-block;
    width: 100px;
    padding-top: 30px; }
  .gift-num {
    position: absolute;
    top: 0;
    left: -75px;
    width: 96px; }
    .gift-num > img {
      position: relative; }
    .gift-num::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../images/section5/flower.svg) no-repeat center/contain;
      -webkit-animation: flower 15s linear infinite;
              animation: flower 15s linear infinite; }
  .gift-tit {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #2E61B4; }
    .gift-tit.-pk {
      color: #E74E95; }
  .gift-txt {
    margin-top: 10px;
    font-size: 16px;
    text-align: justify; }
    .gift-txt b {
      color: #FF586C; }
  @media only screen and (max-width: 1023px) {
    .gift-head {
      font-size: 21px; }
      .gift-head .-num {
        font-size: 26px; }
        .gift-head .-num::after {
          top: 2px;
          width: 11px;
          height: 7px; }
    .gift-slider {
      margin-top: 40px; }
    .gift .swiper-slide {
      width: 250px;
      padding: 0 20px 26px; }
      .gift .swiper-slide:first-child {
        width: 230px;
        padding-left: 0; }
      .gift .swiper-slide:last-child {
        width: 230px;
        padding-right: 0; }
    .gift-pic {
      width: 88px;
      padding-top: 5px; }
    .gift-num {
      left: -38px;
      width: 65px; }
    .gift-tit {
      font-size: 20px; }
    .gift-txt {
      font-size: 14px; } }
  @media only screen and (max-width: 767px) {
    .gift .swiper-slide {
      padding: 0; }
    .gift .swiper-slide + .swiper-slide {
      border-left: none; }
    .gift-txt {
      padding: 0 55px; } }

.notice {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
  border-radius: 10px;
  background-color: #fff; }
  .notice .notice-action {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 25px 0;
    font-size: 20px;
    line-height: 1.6;
    font-weight: bold;
    text-align: left;
    color: #2C2C2C;
    text-decoration: none; }
    .notice .notice-action::after {
      content: '＋';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: block;
      font-size: 1;
      transition: .3s; }
  .notice-content {
    display: none;
    padding: 25px 0;
    font-size: 16px;
    color: #2C2C2C;
    border-top: 1px solid #2C2C2C; }
  .notice.is-open .notice-action::after {
    content: '－';
    transform: translateY(-50%) rotate(180deg); }
  @media only screen and (max-width: 1023px) {
    .notice {
      padding: 0 15px; }
      .notice .notice-action {
        padding: 20px 0;
        font-size: 16px; }
      .notice-content {
        padding: 20px 0;
        font-size: 14px; } }

ol {
  font-weight: inherit;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.5625em; }
  ol b {
    font-weight: bold; }
  ol a {
    display: inline; }
  ol table {
    width: 100%;
    margin: 0.25em 0;
    border-collapse: collapse;
    border-spacing: 0; }
    ol table th,
    ol table td {
      padding: 0.25em;
      border: 1px solid #000; }
  ol.chinese {
    list-style-type: none;
    padding-left: 2em; }
    ol.chinese > li {
      position: relative; }
      ol.chinese > li::before {
        content: "(" attr(data-num) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%); }
  ol.brackets {
    list-style-type: none; }
    ol.brackets > li {
      position: relative;
      counter-increment: section; }
      ol.brackets > li::before {
        content: "(" counter(section, decimal) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%);
        min-width: 1.25em;
        text-align: center; }
  ol.cjk {
    list-style-type: none;
    padding-left: 2em; }
    ol.cjk > li {
      position: relative; }
      ol.cjk > li::before {
        content: attr(data-num) "、";
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%); }

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

p {
  margin: 0; }

b {
  font-weight: bold; }

.-groupT {
  display: inline-block; }

.-rdT {
  color: #F5784C; }

.-centerT {
  text-align: center; }

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

@media only screen and (max-width: 767px) {
  .-pc-pad {
    display: none; } }

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

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

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

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

.-hidden {
  display: none !important; }