@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.4;
  color: #000;
  background: linear-gradient(180deg, #DEEDFF 0%, #C6DFFF 12.5%); }
  @media only screen and (max-width: 1023px) {
    html.-menuOpen,
    body.-menuOpen {
      overflow: hidden; } }

main {
  overflow: hidden; }

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

.footer a {
  color: #FFF; }

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

/*
 * 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: 240px;
      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(0.9); }
  @media only screen and (max-width: 1279px) {
    .line {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .line {
      bottom: 189px;
      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(0.9); }
  @media only screen and (max-width: 1279px) {
    .goTop {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .goTop {
      bottom: 138px;
      width: 43px;
      height: 43px; } }

@-webkit-keyframes shineBanner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes shineBanner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); } }

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

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

.banner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 610px; }
  .banner-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 1920px;
    height: 100%;
    pointer-events: none;
    z-index: 2; }
  .banner-wrap {
    position: absolute;
    top: 0;
    right: 70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 100px);
    max-width: 1500px;
    height: 100%;
    font-size: 0;
    z-index: 1; }
    .banner-wrap img {
      width: 100%; }
  .banner-tit {
    position: relative;
    width: 44%; }
    .banner-tit > img {
      position: relative; }
    .banner-tit::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 319.62025%;
      height: 520.61856%;
      transform: translate(-50%, -50%);
      background: url(../images/bg/shine.png) no-repeat center/contain;
      -webkit-animation: shineBanner 60s linear infinite;
              animation: shineBanner 60s linear infinite; }
  .banner-main {
    position: relative;
    width: 54.66667%;
    margin-top: 6.66667%; }
    .banner-main img:nth-child(2) {
      display: none; }
  @media only screen and (max-width: 1530px) {
    .banner {
      padding-bottom: 48%; }
      .banner-deco {
        width: 120%; }
      .banner-wrap {
        right: 10px;
        width: calc(100% - 30px); }
      .banner-tit {
        width: 47%; }
      .banner-main {
        width: 50.5%; } }
  @media only screen and (max-width: 1279px) {
    .banner-main img:nth-child(1) {
      display: none; }
    .banner-main img:nth-child(2) {
      display: inline-block; } }
  @media only screen and (max-width: 767px) {
    .banner {
      padding-bottom: 136.84211%; }
      .banner-deco {
        width: 100%; }
      .banner-wrap {
        right: 0;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start; }
      .banner-tit {
        width: 83.26316%;
        margin-top: 5.57895%; }
      .banner-main {
        width: 84.94737%;
        margin-top: 14.94737%; } }

.banner .coin-1 {
  position: absolute;
  top: 26.88525%;
  left: 3.90625%;
  width: 3.95833%;
  -webkit-animation: float 1s ease-in-out infinite alternate;
          animation: float 1s ease-in-out infinite alternate; }

.banner .coin-2 {
  position: absolute;
  bottom: 27.86885%;
  left: 5.52083%;
  width: 8.07292%;
  animation: float 1.5s ease-in-out infinite alternate-reverse; }

.banner .coin-3 {
  position: absolute;
  bottom: 22.95082%;
  right: 9.375%;
  width: 5.625%;
  -webkit-animation: float 1.5s ease-in-out infinite alternate;
          animation: float 1.5s ease-in-out infinite alternate; }

.banner .coin-4 {
  position: absolute;
  top: 9.83607%;
  right: 5.36458%;
  width: 9.94792%;
  animation: float 2.5s ease-in-out infinite alternate-reverse; }

.banner .coin-5 {
  position: absolute;
  top: 20.16393%;
  right: 45.15625%;
  width: 2.65625%;
  -webkit-animation: float 2s ease-in-out infinite alternate;
          animation: float 2s ease-in-out infinite alternate; }

.banner .coin-6 {
  position: absolute;
  top: 48.03279%;
  right: 4.47917%;
  width: 2.65625%;
  animation: float 1s ease-in-out infinite alternate-reverse; }

.banner .coin-7 {
  display: none; }

@media only screen and (max-width: 1530px) {
  .banner .coin-3 {
    bottom: 19.07357%; }
  .banner .coin-4 {
    top: 8.17439%; }
  .banner .coin-5 {
    top: 16.75749%; }
  .banner .coin-6 {
    top: 39.91826%; } }

@media only screen and (max-width: 1279px) {
  .banner .coin-3 {
    right: 5.20833%;
    bottom: 4.08719%; }
  .banner .coin-6 {
    top: 35.42234%;
    right: 2.60417%; } }

@media only screen and (max-width: 767px) {
  .banner .coin-1,
  .banner .coin-3,
  .banner .coin-4,
  .banner .coin-6 {
    display: none; }
  .banner .coin-2 {
    bottom: 43.07692%;
    left: 7.89474%;
    width: 19.57895%; }
  .banner .coin-5 {
    top: 42.30769%;
    right: 13.57895%;
    width: 11.47368%; }
  .banner .coin-7 {
    position: absolute;
    display: block;
    bottom: 1.23077%;
    right: 8.42105%;
    width: 19.57895%;
    animation: float 2s ease-in-out infinite alternate-reverse; } }

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

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375em;
  padding: 0.4375em;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0154B7;
  border-radius: 0.3125em;
  box-shadow: 0 0.3125em 0 0 #E4AF1C;
  background-color: #FFCF57;
  cursor: pointer; }
  .btn span {
    flex: 0 0 auto;
    color: #0154B7; }
  .btn::after {
    content: '';
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    background: url(../images/icon/arrow.svg) no-repeat center/contain; }
  @media only screen and (min-width: 1024px) {
    .btn {
      transition: .3s; }
      .btn:hover {
        box-shadow: 0 0 0 0 #E4AF1C;
        transform: translateY(0.3125em); } }
  @media only screen and (max-width: 1023px) {
    .btn {
      font-size: 24px; } }

.anchor {
  transform: translateY(-200px); }
  @media only screen and (max-width: 1023px) {
    .anchor {
      transform: translateY(-170px); } }
  @media only screen and (max-width: 767px) {
    .anchor {
      transform: translateY(-130px); } }

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

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

@-webkit-keyframes float3 {
  0% {
    transform: translateY(0) rotate(-66.81deg); }
  100% {
    transform: translateY(20%) rotate(-66.81deg); } }

@keyframes float3 {
  0% {
    transform: translateY(0) rotate(-66.81deg); }
  100% {
    transform: translateY(20%) rotate(-66.81deg); } }

@-webkit-keyframes float2 {
  0% {
    transform: translateY(0) rotate(-162deg); }
  100% {
    transform: translateY(20%) rotate(-162deg); } }

@keyframes float2 {
  0% {
    transform: translateY(0) rotate(-162deg); }
  100% {
    transform: translateY(20%) rotate(-162deg); } }

.block {
  position: relative;
  padding: 100px 20px 0; }
  .block.-new::before {
    content: '';
    position: absolute;
    top: -3px;
    left: calc(50% - 310px);
    width: 1575px;
    height: 1575px;
    background: url(../images/bg/shine.png) no-repeat center/contain;
    -webkit-animation: shine 60s linear infinite;
            animation: shine 60s linear infinite; }
  .block.-new .block-wrap::before {
    content: '';
    position: absolute;
    top: 311px;
    left: -119px;
    width: 76px;
    height: 72px;
    background: url(../images/bg/coin-1.svg) no-repeat center/contain;
    -webkit-animation: float 2s ease-in-out infinite alternate;
            animation: float 2s ease-in-out infinite alternate; }
  .block.-new .block-wrap::after {
    content: '';
    position: absolute;
    top: 745px;
    left: -400px;
    width: 154px;
    height: 121px;
    transform: rotate(-66.81deg);
    background: url(../images/bg/coin-3.svg) no-repeat center/contain;
    animation: float3 2s ease-in-out infinite alternate-reverse; }
  .block.-new .block-content::before {
    content: '';
    position: absolute;
    top: 592px;
    right: -200px;
    width: 173px;
    height: 133px;
    transform: rotate(-162deg);
    background: url(../images/bg/coin-2.svg) no-repeat center/contain;
    animation: float2 1.5s ease-in-out infinite alternate-reverse; }
  .block.-digital::before {
    content: '';
    position: absolute;
    top: 12px;
    right: calc(50% - 326px);
    width: 1575px;
    height: 1575px;
    background: url(../images/bg/shine.png) no-repeat center/contain;
    -webkit-animation: shine 60s linear infinite;
            animation: shine 60s linear infinite; }
  .block.-digital .block-wrap::before {
    content: '';
    position: absolute;
    top: 86px;
    right: -387px;
    width: 117px;
    height: 111px;
    background: url(../images/bg/coin-1.svg) no-repeat center/contain;
    -webkit-animation: float 2s ease-in-out infinite alternate;
            animation: float 2s ease-in-out infinite alternate; }
  .block.-digital .block-wrap::after {
    content: '';
    position: absolute;
    top: 650px;
    left: -181px;
    width: 153px;
    height: 118px;
    background: url(../images/bg/coin-2.svg) no-repeat center/contain;
    animation: float 2s ease-in-out infinite alternate-reverse; }

  /*20250610*/  
  .block.-money::before {
    content: '';
    position: absolute;
    top: -600px;
    left: calc(50% - 310px);
    width: 1575px;
    height: 1575px;
    background: url(../images/bg/shine.png) no-repeat center/contain;
    -webkit-animation: shine 60s linear infinite;
            animation: shine 60s linear infinite; }
  .block.-money .block-wrap::before {
    content: '';
    position: absolute;
    top: 311px;
    left: -119px;
    width: 76px;
    height: 72px;
    background: url(../images/bg/coin-1.svg) no-repeat center/contain;
    -webkit-animation: float 2s ease-in-out infinite alternate;
            animation: float 2s ease-in-out infinite alternate; }
  .block.-money .block-content::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 173px;
    height: 133px;
    transform: rotate(-162deg);
    background: url(../images/bg/coin-2.svg) no-repeat center/contain;
    animation: float2 1.5s ease-in-out infinite alternate-reverse; }


  .block + .block {
    margin-top: 50px; }
  .block-wrap {
    position: relative;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    border: 5px solid #0154B7;
    padding: 110px 80px 52px;
    background-color: #FFF;
    z-index: 1; }
  .block-tit {
    position: absolute;
    top: -93px;
    left: 50%;
    transform: translateX(-50%);
    width: 552px; }
  .block-tit2 {
    top: -63px; }
  .block-friend {}
  .block-friend2 {
    margin-top: 120px; }
  .block-friend-tit {
    width: 400px;
    margin: 0 auto 60px; }
  .block-content {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto; }
  .block-content2 {
    display: flex;
    max-width: 1000px;
    margin: 0 auto; }
  .block-line {
    flex: 0 0 auto;
    width: 1px;
    background-color: #0154B7; }
  .block-item {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    width: 421px; }
    .block-item > img {
      flex: 0 0 auto; }

  .block-item2 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;  }
    .block-item2 > img {
    width: 421px;
    margin: 0 auto; }
  .block-item3 {
    display: flex;
    flex-direction: column;
    margin: 0 auto; }
  .block-item3 .block-pic {
    display: flex;
    gap: 60px;
    margin: 0 auto; }
  .block-item3 .block-pic > img{
    width: 421px;
    margin: 0 auto; }
  .block-item3 .block-cta {
    display: flex;
    gap: 60px; }

  .block-txt {
    flex: 0 0 auto;
    margin-top: 30px;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-align: justify;
    color: #2D1615; 
    min-height: 68px;}
  .block-tool {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30px; }
  .block-action {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 60px; }
  .block-note {
    max-width: 1000px;
    margin: 60px auto 0;
    font-size: 16px;
    letter-spacing: 0.18em;
    text-align: justify;
    color: #727272; }
  .block-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 0.20833em;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #0154B7;
    border: 1px solid #0154B7;
    border-radius: 0.41667em; }
    .block-btn span {
      flex: 0 0 auto;
      color: #0154B7; }
    .block-btn::after {
      content: '';
      flex: 0 0 auto;
      width: 0.66667em;
      height: 0.66667em;
      background: url(../images/icon/arrow.svg) no-repeat center/contain; }
  @media only screen and (min-width: 1024px) {
    .block-btn {
      transition: .3s; }
      .block-btn span, .block-btn::after {
        transition: .3s; }
      .block-btn:hover {
        color: #FFF;
        background-color: #0154B7; }
        .block-btn:hover span {
          color: #FFF; }
        .block-btn:hover::after {
          background-image: url(../images/icon/arrow-wt.svg); } }
  @media only screen and (max-width: 1279px) {
    .block-wrap {
      padding: 110px 30px 52px; } }
  @media only screen and (max-width: 1023px) {
    .block {
      padding: 50px 20px 0; }
      .block.-new::before {
        content: none; }
      .block.-new .block-wrap::before, .block.-new .block-wrap::after {
        content: none; }
      .block.-new .block-content::before {
        content: none; }
      .block.-digital::before {
        content: none; }
      .block.-digital .block-wrap::before, .block.-digital .block-wrap::after {
        content: none; }
      .block + .block {
        margin-top: 50px; }
      .block-wrap {
        padding: 50px 40px;
        border-width: 3px; }
      .block-friend2 {
        margin-top: 80px; }
      .block-content {
        justify-content: space-around; }
      .block-tit {
        top: -65px;
        width: 400px; }
      .block-tit2 {
        top: -45px; }
      .block-friend-tit {
        width: 300px; 
        margin: 20px auto 40px;}
      .block-item {
        width: 275px; }
      .block-item2 > img {
        width: 275px; }
      .block-item3 .block-pic > img{
        width: 275px; }
      .block-txt {
        margin-top: 20px;
        font-size: 20px; }
      .block-tool {
        margin-top: 20px; }
      .block-action {
        gap: 20px;
        margin-top: 30px; }
      .block-note {
        margin: 30px auto 0;
        font-size: 14px; }
      .block-btn {
        font-size: 20px; } }
  @media only screen and (max-width: 767px) {
    .block {
      padding: 80px 20px 0; }
    .block + .block {
      margin-top: 20px; }
    .block-wrap {
      padding: 50px 28px;
      border-width: 2px; }
    .block-friend2 {
      margin-top: 60px; }
    .block-content {
      flex-direction: column;
      gap: 30px; }
    .block-tit {
      top: -54px;
      width: 320px; }
    .block-tit2 {
      top: -34px; }
    .block-friend-tit {
      width: 275px; 
      margin: 20px auto;}
    .block-line {
      width: auto;
      height: 1px; }
    .block-txt {
      min-height: auto; }
    .block-item {
      width: 100%;
      align-items: center; }
      .block-item > img {
        width: 275px; }
    .block-item3 .block-pic {
      flex-direction: column;
      gap: 30px;
      margin: 0 auto; }
    .block-item3 .block-cta {
      flex-direction: column;
      gap: 0px;
      margin: 0 auto;}
    .block-btn {
      width: 275px; } 
    }

.pays {
  text-align: center; 
  margin-top: 30px;}
  .pays-title {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.6;
    color: #2D1615; }
  .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: 55px; } }
  @media only screen and (max-width: 1023px) {
    .pays {
    margin-top: 20px;} }

.notice {
  position: relative;
  box-sizing: border-box;
  margin-top: 120px;
  padding: 0 20px 45px;
  color: #474747; }
  .notice::before {
    content: '';
    position: absolute;
    top: -308px;
    left: calc(50% - 394px);
    width: 1575px;
    height: 1575px;
    background: url(../images/bg/shine.png) no-repeat center/contain;
    -webkit-animation: shine 60s linear infinite;
            animation: shine 60s linear infinite; }
  .notice::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 286px;
    background: linear-gradient(180deg, rgba(198, 223, 254, 0) 0%, #C6DFFE 43%);
    transition: height .8s; }
  .notice-wrap {
    position: relative;
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto; }
    .notice-wrap::before {
      content: '';
      position: absolute;
      top: -13px;
      left: -305px;
      width: 118px;
      height: 112px;
      background: url(../images/bg/coin-1.svg) no-repeat center/contain;
      -webkit-animation: float 2s ease-in-out infinite alternate;
              animation: float 2s ease-in-out infinite alternate; }
    .notice-wrap::after {
      content: '';
      position: absolute;
      top: 200px;
      right: -243px;
      width: 191px;
      height: 128px;
      background: url(../images/bg/coin-4.svg) no-repeat center/contain;
      animation: float 2s ease-in-out infinite alternate-reverse; }
  .notice-tit {
    margin-bottom: 40px;
    padding-left: 0.14em;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center; }
  .notice-content {
    position: relative;
    max-height: 260px;
    font-size: 20px;
    font-weight: 400;
    overflow: hidden;
    transition: max-height .8s; }
  .notice-action {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 200px;
    margin: 30px auto 0;
    padding: 8px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #0154B7;
    border-radius: 24px;
    background-color: #0154B7;
    z-index: 1; }
    @media only screen and (min-width: 1024px) {
      .notice-action {
        transition: .3s; }
        .notice-action:hover {
          color: #0154B7;
          background-color: #fff; } }
  .notice.is-open::after {
    height: 0; }
  .notice.is-open .notice-content {
    max-height: var(--openH, 3000px); }
  @media only screen and (max-width: 1023px) {
    .notice {
      margin-top: 60px; }
      .notice::before {
        content: none; }
      .notice::after {
        height: 252px; }
      .notice-tit {
        margin-bottom: 30px;
        font-size: 20px; }
      .notice-content {
        max-height: 290px;
        font-size: 14px; }
      .notice-action {
        margin: 24px auto 0; } }

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

.-rdText {
  color: #ff704a; }

.-buText {
  color: #005bab; }

@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; }


/*20250606*/
.mobOnly {display: none;}

@media screen and (max-width: 767px) {
  .webOnly {display: none;}
  .mobOnly {display: block;}
}

.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: #2E61B4; }
    .float-item img {
      width: 22px; }
    .float-item div {
      color: #FFF;
      -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-lr;
              writing-mode: vertical-lr; }
    .float-item.-rd {
      background-color: #FF6E3E; }
  @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; } }

/* ------------------------------- 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: 187px; }
    .header-logo img {
      width: 100%; }
  .header-nav {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    padding: 0 20px;
    font-size: 18px;
    color: #0b0b0b; }
    .header-nav a {
      color: #0b0b0b;
      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: 187px; }
    .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: 187px; }
      .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 #0b0b0b; }
          .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: 123px; } }