@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.5;
  color: #000;
  background-color: #014D8E; }
  @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; }

/*
 * 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 screen and (max-width: 1024px) {
    .main {
      padding-top: 76px; } }
  @media only screen and (max-width: 767px) {
    .main {
      padding-top: 58px; } }

.appDownload {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 65px;
  z-index: 1; }
  .appDownload-QRcode img {
    width: 125px;
    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 {
      transform: translateY(-10%); } }
  @media only screen and (max-width: 1023px) {
    .appDownload {
      margin-top: 135px; }
      .appDownload-QRcode {
        display: none; }
      .appDownload-link h5 {
        font-size: 13px;
        font-weight: normal; }
      .appDownload-link img {
        width: 140px; } }

/* ------------------------------- creditSlogan ------------------------------- */
.creditSlogan {
  width: 100%;
  height: auto;
  background: #ffffff;
  padding: 25px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; }

.creditSlogan div {
  font-size: 14px;
  color: #575757;
  padding: 0 0 0 30px;
  line-height: 1.6; }

.creditSlogan div:first-child {
  font-size: 28px;
  font-weight: bold;
  color: #575757;
  letter-spacing: 2px;
  border-right: 1px solid #666666;
  padding: 0 30px 0 0; }

.creditSlogan div span:first-child::after {
  content: '：'; }

.creditSlogan div:first-child span:first-child {
  padding: 0 10px 0 0; }

.creditSlogan div:first-child span:first-child::after {
  display: none; }

.creditSlogan a {
  display: inline-block;
  color: #575757; }

.creditSlogan a:hover {
  color: #575757; }

@media screen and (max-width: 1200px) {
  .creditSlogan div {
    font-size: 14px;
    padding: 0 0 0 10px; }
  .creditSlogan div:first-child {
    padding: 0 10px 0 0; } }

@media screen and (max-width: 1024px) {
  .topView h2 {
    width: 100%;
    position: absolute;
    top: 30%; }
  .creditSlogan div {
    font-size: 14px;
    padding: 0 0 0 10px; }
  .creditSlogan div:first-child {
    box-sizing: border-box;
    padding: 0; }
  .creditSlogan div:first-child span {
    display: block; } }

@media screen and (max-width: 870px) {
  .creditSlogan {
    height: 125px;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center; }
  .creditSlogan div {
    align-self: flex-start; }
  .creditSlogan div:first-child {
    font-size: 20px;
    margin: 0; }
  .creditSlogan p {
    font-size: 14px;
    line-height: 22px; } }

@media screen and (max-width: 800px) {
  .creditSlogan {
    width: 100%;
    height: auto;
    padding: 20px; }
  .creditSlogan div {
    width: 100%;
    align-self: center;
    text-align: center; }
  .creditSlogan div:first-child {
    font-size: 30px;
    border-bottom: 1px solid;
    border-right: none;
    display: flex;
    justify-content: center;
    margin: 0 0 10px; }
  .creditSlogan p {
    font-size: 14px;
    line-height: 2;
    padding: 0; } }

@media screen and (max-width: 420px) {
  .creditSlogan {
    padding: 20px 10px; }
  .creditSlogan div:first-child {
    font-size: 24px; }
  .creditSlogan p {
    font-size: 12px;
    line-height: 1.8; } }

.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: 60px;
  z-index: 50; }



  .float-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 25px 0;
    border-radius: 30px;
    background-color: #EB6100; }
    .float-item img {
      width: 42px; }
    .float-item div {
      color: #FFF;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0.1em;
      writing-mode: vertical-lr; }
    .float-item.-rd {
      background-color: #FF586C; }
  @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: 55px; }
      .float-item {
        padding: 16px 0; }
        .float-item img {
          width: 38px; } }
/* --- 手機版懸浮按鈕優化區塊 (無 !important 版) --- */
@media only screen and (max-width: 767px) {
    .float {
        display: flex;
        flex-direction: row; /* 改為橫向排列 */
        top: auto;           /* 抵銷 PC 版的 160px */
        bottom: 0;           /* 貼齊底部 */
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        gap: 0;              /* 移除間隙讓按鈕緊貼 */
        padding: 0;
        align-items: stretch; /* 核心：強迫子元素(按鈕)等高 */
        border-top: 1px solid rgba(255,255,255,0.2); /* 增加頂部細邊界 */
    }

    .float-item {
        flex: 1;             /* 平分寬度 */
        display: flex;
        flex-direction: row; /* 圖案文字橫排 */
        align-items: center; /* 內容垂直居中 */
        justify-content: center; /* 內容水平居中 */
        height: auto;        /* 讓高度由 stretch 決定 */
        padding: 10px 5px;   /* 統一上下內距 */
        margin: 0;
        border-radius: 0;    /* 移除 PC 版的圓角 */
    }

    .float-item img {
        width: 28px;         /* 統一圖示大小 */
        height: auto;
        margin-bottom: 0;    /* 移除 PC 版的下方間距 */
        margin-right: 8px;   /* 增加與文字的間距 */
    }

    .float-item div {
        writing-mode: horizontal-tb; /* 確保文字是橫寫 */
        font-size: 16px;
        line-height: 1;
        padding-bottom: 0;
    }
}

@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/auto;
  z-index: 100; }
  .header-logo {
    flex: 1;
    display: block;
    font-size: 0; }
    .header-logo a {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 187px;
      height: 39px;
      background-image: url("../images/header/yuantabank_logo.svg");
      background-size: 100% auto;
      background-repeat: no-repeat; }
  .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-burger {
    flex: 0 0 auto;
    display: none; }
  @media screen and (max-width: 1024px) {
    .header {
      height: 76px; }
      .header-logo a {
        width: 171px;
        height: 36px; }
      .header-nav {
        font-size: 16px;
        padding: 0 12px; }
        .header-nav span {
          margin: 0 5px; } }
  @media only screen and (max-width: 1023px) {
    .header-nav {
      position: fixed;
      top: 76px;
      left: 0;
      width: 100%;
      height: calc(100% - 76px);
      padding: 0 50px 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-burger {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      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 {
      padding: 16px;
      height: 58px; }
      .header-logo a {
        width: 123px;
        height: 26px; }
      .header-nav {
        top: 58px;
        height: calc(100% - 58px); }
      .header-burger {
        width: 24px;
        height: 24px; } }

.main-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 20px; }

@media only screen and (max-width: 1023px) {
  .main-wrap {
    padding: 50px 20px; } }

@media only screen and (max-width: 767px) {
  .main-wrap {
    padding: 30px 20px 40px; } }

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

@keyframes name {
  0% { }
  100% { } }

.banner {
  position: relative;
  padding-bottom: 57.81818%;
  background: url(./../images/banner/bg.svg) no-repeat top center/cover;
  overflow: hidden; }
  .banner > div {
    position: absolute; }
  .banner-tit {
    top: 8.80503%;
    right: 7.27273%;
    width: 55.54545%; }
  .banner-cards {
    top: 40.25157%;
    right: 7.27273%;
    width: 46.36364%; }
  .banner-iphone17 {
    top: 18.23899%;
    left: 4.54545%;
    width: 23.27273%; }
  .banner-txt {
    bottom: 0;
    left: 4.72727%;
    width: 47.09091%; }
  .banner-date {
    bottom: 3.61635%;
    right: 4.54545%;
    font-size: 24px;
    color: #FFF;
    white-space: nowrap; }
  @media only screen and (max-width: 1099px) {
    .banner-date {
      font-size: 2.18182vw; } }
  @media only screen and (max-width: 767px) {
    .banner {
      padding-bottom: 73.96825%;
      background-image: url(./../images/banner/bg-mb.svg); }
      .banner-tit {
        top: 6.00858%;
        right: 6.34921%;
        width: 60.31746%; }
      .banner-cards {
        top: 33.69099%;
        right: 6.34921%;
        width: 40.95238%; }
      .banner-iphone17 {
        top: auto;
        bottom: 0;
        left: 4.7619%;
        width: 37.46032%; }
      .banner-txt {
        bottom: 24.03433%;
        left: auto;
        right: 6.03175%;
        width: 45.39683%; }
      .banner-date {
        bottom: 2.7897%;
        right: 3.49206%;
        font-size: 2.69841vw;
        line-height: 1.4; } }

.link {
  color: #007fe0 !important;
  text-decoration: underline; }

.btn {
  display: inline-block;
  padding: 16px 48px;
  color: #FFF;
  background-color: #EB6100;
  cursor: pointer; }
  @media only screen and (min-width: 1024px) {
    .btn {
      transition: background-color .3s; }
      .btn:hover {
        background-color: #014D8E; } }
  @media only screen and (max-width: 1023px) {
    .btn {
      padding: 10px 28px; } }

.anchor {
  transform: translateY(-80px); }
  @media screen and (max-width: 1024px) {
    .anchor {
      transform: translateY(-76px); } }
  @media only screen and (max-width: 767px) {
    .anchor {
      transform: translateY(-58px); } }

.block {
  position: relative;
  padding: 64px 50px;
  border-radius: 80px;
  background-color: #FFFDEE; }
  .banner + .block {
    margin-top: -1px;
    border-top-left-radius: 0; }
  .block + .block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background-color: #014D8E; }
  .block-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px; }
    .block-head img {
      width: auto;
      height: 56px; }
  .block-body {
    font-size: 24px; }
    .block-body + .block-body {
      margin-top: 48px; }
  @media only screen and (max-width: 1023px) {
    .block {
      padding: 38px 30px;
      border-radius: 48px; }
      .block-head {
        gap: 10px;
        margin-bottom: 24px; }
        .block-head img {
          height: 34px; }
      .block-body {
        font-size: 15px; }
        .block-body + .block-body {
          margin-top: 28px; } }
  @media only screen and (max-width: 767px) {
    .block {
      padding: 26px 16px;
      border-radius: 34px; }
      .block-head {
        gap: 7px;
        margin-bottom: 16px; }
        .block-head img {
          height: 26px;
          max-width: 100%; }
      .block-body + .block-body {
        margin-top: 20px; } }

.info {
  display: flex;
  flex-direction: column;
  gap: 16px; }
  .info table {
    width: 100%;
    max-width: 870px;
    border-collapse: collapse;
    border-spacing: 0; }
    .info table th,
    .info table td {
      padding: 8px 24px;
      text-align: left;
      vertical-align: middle;
      border: 1px solid #000; }
    .info table th {
      font-weight: 500; }
  @media only screen and (max-width: 1023px) {
    .info {
      gap: 10px; }
      .info table th,
      .info table td {
        padding: 4px 14px; } }
  @media only screen and (max-width: 767px) {
    .info {
      gap: 7px; }
      .info table th,
      .info table td {
        padding: 3px 10px; } }

.card {
  position: relative;
  padding-top: 33px; }
  .card-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background-color: #FFFDEE; }
    .card-head img {
      width: auto;
      height: 48px; }
  .card-body {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 56px 32px 48px;
    border: 2px solid #014D8E; }
  .card-pic {
    flex: 0 0 auto;
    width: 444px; }
  .card-content {
    flex: 1; }
  .card-action {
    margin-top: 24px; }
  @media only screen and (max-width: 1023px) {
    .card {
      padding-top: 20px; }
      .card-head {
        padding: 5px 10px; }
        .card-head img {
          height: 30px; }
      .card-body {
        gap: 30px;
        padding: 34px 10px 28px;
        border-width: 1px; }
      .card-pic {
        width: 266px; }
      .card-action {
        margin-top: 14px; } }
  @media only screen and (max-width: 767px) {
    .card {
      padding-top: 14px; }
      .card-head {
        padding: 3px; }
        .card-head img {
          height: 23px; }
      .card-body {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 34px 16px 20px; }
      .card-pic {
        width: 100%;
        max-width: 266px;
        margin: 0 auto; }
      .card-action {
        margin-top: 12px;
        text-align: center; } }

.notice-tit {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: 500; }

@media only screen and (max-width: 1023px) {
  .notice-tit {
    margin-bottom: 4px;
    font-size: 20px; } }

@media only screen and (max-width: 767px) {
  .notice-tit {
    font-size: 18px; } }

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

ol {
  font-weight: inherit;
  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.brackets-en {
    list-style-type: none; }
    ol.brackets-en > li {
      position: relative; }
      ol.brackets-en > li::before {
        content: "(" attr(data-num) ")";
        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; }

.-gText {
  display: inline-block; }

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