@charset "UTF-8";
/* 1. 全域 box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. 消除所有 margin（常見壞版） */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* 3. 移除 ul/ol 預設 padding → 解決 slick 左邊多空白 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 4. 按鈕的 reset（避免 Safari 醜邊框） */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* 5. 圖片與影片 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. 表單元素繼承字體 */
input, button, textarea, select {
  font: inherit;
}

/* 7. placeholder 顏色（你需要的）*/
::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* 8. 根元素 */
#root, #__next {
  isolation: isolate;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, PingFang TC, Noto Sans TC, 黑體-繁, Heiti TC, 蘋果儷中黑, Apple LiGothic Medium, 微軟正黑體, Microsoft JhengHei, sans-serif;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
}

footer {
  z-index: 3;
}

.copyright {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 1px;
  padding-bottom: 16px;
}

hr {
  opacity: 0.2;
}

a {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  cursor: pointer;
}
a:active, afocus {
  color: rgba(0, 0, 0, 0.8);
}
a:hover {
  color: rgba(0, 0, 0, 0.8);
  opacity: 80%;
}

ol {
  list-style-type: decimal;
  padding: 0 16px;
}

.fs-7 {
  font-size: 12px;
}

.mb-60 {
  margin-bottom: 60px;
}

.text-color-black {
  color: rgba(0, 0, 0, 0.8);
}

.text-color-disable {
  color: rgba(0, 0, 0, 0.2);
}

.text-color-warn {
  color: #FF2E3C;
}

.title-main {
  color: #A73554;
  margin-top: 60px;
  margin-bottom: 24px;
}

.btn, .btn:focus, .btn-close:focus {
  box-shadow: none;
}

.full-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1040;
}

.h30vh {
  height: 30vh;
}

.section-mb {
  margin-bottom: 120px;
}

.section-mt {
  margin-top: 120px;
}

.border {
  border: red 1px solid;
}

.form-control {
  height: 40px;
}

.navbar {
  background-color: #fff;
}

.logo {
  margin: 6px 0;
}

#dropdownMenuButton {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#dropdownMenuButton:hover {
  opacity: 0.8;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 4px 0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown > ul {
  border: 1px solid rgba(247, 100, 140, 0.1);
  box-shadow: 0px 4px 12px rgba(247, 100, 140, 0.2);
}
.dropdown > ul li .dropdown-header {
  color: rgba(0, 0, 0, 0.8);
}
.dropdown > ul li a.dropdown-item {
  color: #A73554;
  padding: 16px;
}
.dropdown > ul li a.dropdown-item:hover {
  background-color: rgba(247, 100, 140, 0.05);
  opacity: 1;
}

.btn-normal {
  border-radius: 4px;
  padding: 12px 20px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-main {
  background: linear-gradient(315deg, rgb(247, 100, 140) 0%, rgb(255, 135, 97) 100%);
  color: #fff;
}
.btn-main:hover {
  opacity: 80%;
  color: #fff;
}

.btn-sub {
  border: 1px solid #A73554;
  color: #A73554;
}
.btn-sub:active, .btn-subfocus, .btn-sub:hover {
  color: #A73554;
}

.btn-madol {
  width: 100%;
}

.btn-pay {
  margin-bottom: 60px;
  width: 30%;
}

.btn-disable {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.2);
}
.btn-disable:hover {
  opacity: 1;
  color: rgba(0, 0, 0, 0.2);
}

.modal-dialog {
  width: 440px;
}

.modal-header {
  border: none;
  padding: 0.8em 0.8em 0 0.8em;
}

.btn-close {
  background-image: url("../img/close.svg");
  width: 32px;
  height: 32px;
}

.modal-body-style {
  padding: 0px 60px 47px 60px;
  color: rgba(0, 0, 0, 0.8);
}
.modal-body-style .fs-5 {
  color: #A73554;
  font-weight: 500;
}
.modal-body-style .info-img {
  width: 80%;
  margin: 0 auto;
}

.pay-bg-nomal {
  background-color: rgba(247, 100, 140, 0.1);
  border-radius: 4px;
  height: 70px;
  width: 100%;
  color: rgba(0, 0, 0, 0.8);
}

.pay-bg-select {
  box-shadow: inset 0px 0px 0px 1px #F7648C;
}

.pay-bg-disable {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.2);
}

.radiobtn-nomal {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(247, 100, 140, 0.4);
}

.radiobtn-select:before {
  display: block;
  content: " ";
  background-color: #F7648C;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 3px;
}

.radiobtn-disable {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pay-img {
  height: 20px;
  display: block;
}

.pay-img24 {
  height: 24px;
}

.pay-img-credidcard {
  background-image: url("../img/pay-creditcard.png");
  background-size: cover;
  width: 100px;
}

.pay-img-atm {
  background-image: url("../img/pay-atm.svg");
  width: 24px;
}

.pay-img-conv {
  background-image: url("../img/pay-conv.svg");
  width: 108px;
}

.pay-img-jko {
  background-image: url("../img/pay-jko.svg");
  width: 50px;
}

.pay-img-applepay {
  background-image: url("../img/pay-applepay.svg");
  width: 32px;
}

.pay-img-credidcard-disable {
  background-image: url("../img/pay-creditcard-disable.png");
  background-size: cover;
  width: 100px;
}

.pay-img-jko-disable {
  background-image: url("../img/pay-jko-disable.svg");
  width: 50px;
}

.pay-img-applepay-disable {
  background-image: url("../img/pay-applepay-disable.svg");
  width: 32px;
}

#pay-bg-ap, #pay-disable-cc, #pay-disable-jko, #pay-disable-ap {
  display: inline-flex;
  align-items: center;
}

.login {
  border-radius: 4px;
  padding: 60px;
  background: linear-gradient(315deg, rgb(251, 150, 172) 0%, rgb(255, 171, 146) 100%);
}
.login .fs-4, .login .fs-6, .login .fs-small, .login a {
  color: #fff;
}
.login .fs-small, .login a {
  opacity: 0.8;
}
.login .fs-small {
  font-size: 0.8em;
}
.login a:hover {
  opacity: 1;
}

.btn-login {
  background-color: #fff;
  border-radius: 4px;
  height: 56px;
  width: 330px;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.btn-login:hover {
  transform: translateY(-2px);
  transition: 0.2s;
  box-shadow: 0px 4px 12px rgba(247, 100, 140, 0.35);
}

.key-view {
  margin-top: 60px;
}

.cta {
  padding-top: 126px;
  height: 680px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.cta-bg-01 {
  background-image: url("../img/index_cta_bg_01.jpg");
}

.cta-bg-02 {
  background-image: url("../img/index_cta_bg_02.jpg");
}

.cta-bg-03 {
  background-image: url("../img/index_cta_bg_03.jpg");
}

.logo-slogan {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 350px;
  background-image: url("../img/index_logo_slogan.png");
  margin-bottom: 24px;
}

.download-ios {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 194px;
  height: 57px;
  background-image: url("../img/index_dawnload_ios.png");
  margin-right: 12px;
}

.download-android {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 194px;
  height: 57px;
  background-image: url("../img/index_dawnload_android.png");
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video-wrapper iframe#youtube-player-a, .video-wrapper iframe#youtube-player-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-style {
  padding-top: 120px;
  padding-bottom: 120px;
}

.directions {
  font-size: 28px;
  font-weight: 400;
  width: 100%;
  padding-top: 32px;
}

.img-schematic-01 {
  background-size: contain;
  background-position: center center;
  position: relative;
  width: 100%;
  padding-top: 97%;
  background-image: url("../img/index_schematic_01.jpg");
  background-repeat: no-repeat;
}

.img-schematic-02 {
  background-size: contain;
  background-position: center center;
  position: relative;
  width: 100%;
  padding-top: 83%;
  background-image: url("../img/index_schematic_02.jpg");
  background-repeat: no-repeat;
}

.img-schematic-03 {
  background-size: contain;
  background-position: center center;
  position: relative;
  width: 100%;
  padding-top: 97%;
  background-image: url("../img/index_schematic_03.jpg");
  background-repeat: no-repeat;
}

.img-schematic-04 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 570px;
  background-image: url("../img/index_schematic_04.jpg");
  background-position: left center;
  background-repeat: no-repeat;
}

.img-schematic-05 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 570px;
  background-image: url("../img/index_schematic_05.jpg");
  background-position: right center;
  background-repeat: no-repeat;
}

.index_title_01 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 260px;
  height: 140px;
  background-image: url("../img/index_title_01.svg");
}

.index_title_02 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 260px;
  height: 140px;
  background-image: url("../img/index_title_02.svg");
}

.index_title_03 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 260px;
  height: 140px;
  background-image: url("../img/index_title_03.svg");
}

.index_title_04 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 320px;
  height: 140px;
  background-image: url("../img/index_title_04.svg");
}

.index_title_05 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 260px;
  height: 140px;
  background-image: url("../img/index_title_05.svg");
}

.slider-section-style {
  padding-top: 100px;
  padding-bottom: 100px;
}

.reports {
  background-color: rgba(247, 100, 140, 0.1);
}

.title-report {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 160px;
  height: 38px;
  background-image: url("../img/index_title_report.svg");
  margin: 0 auto 40px auto;
}

.news-reports-slide {
  background-color: #fff;
  border-radius: 12px;
  min-height: 264px;
}

.news-reports-slide:focus {
  outline: none;
}

.img-media-yahoo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_yahoo.png");
  margin: 40px auto 30px auto;
}

.img-media-economy {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_economy.png");
  margin: 40px auto 30px auto;
}

.img-media-line {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_line.png");
  margin: 40px auto 30px auto;
}

.img-media-ebc {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_ebc.png");
  margin: 40px auto 30px auto;
}

.img-media-freedom {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_freedom.png");
  margin: 40px auto 30px auto;
}

.img-media-storm {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 90px;
  background-image: url("../img/index_media_storm.png");
  margin: 40px auto 30px auto;
}

.report-headline {
  font-size: 1.2em;
  font-weight: 800;
  text-decoration: underline;
  width: 80%;
  margin: 0px auto 40px auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-youtuber {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 305px;
  height: 36px;
  background-image: url("../img/index_title_youtuber.svg");
  margin: 0 auto 40px auto;
}

.youtuber-slide iframe {
  width: 100%;
  height: 230px;
  margin-bottom: 8px;
}
.youtuber-slide .video-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}
.youtuber-slide .video-sub-title {
  font-size: 12px;
  opacity: 0.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-view-BG {
  margin-top: 60px;
  min-height: calc(100vh - 125px);
  height: auto;
  background: url("../img/Bubble_B.png"), url("../img/Bubble_A.png"), url("../img/Bubble_B.png"), url("../img/Bubble_A.png"), linear-gradient(315deg, rgba(247, 100, 140, 0.25) 0%, rgba(255, 135, 97, 0.35) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 24%, 26%, 24%, 25%, cover;
  background-position: 85% 114%, 110% 109%, 30% 2%, -6% -6%, top;
}

.price-title {
  color: #A73554;
  width: 100%;
  padding: 8px;
}

#plan {
  cursor: pointer;
}
#plan:hover {
  transform: translateY(-2px);
  transition: 0.2s;
  box-shadow: 0px 4px 12px rgba(247, 100, 140, 0.35);
}

.bonus {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  font-size: 14px;
  padding: 4px 16px;
  background-color: #E50215;
  color: #ffffff;
  border-radius: 0 0 8px 0;
}

.price {
  position: relative;
  width: calc(50% - 12px);
  height: 120px;
  margin: 6px;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgba(247, 100, 140, 0.2);
  background-color: #fff;
  overflow: hidden;
}
.price:last-child {
  margin-bottom: 100px;
}

.diamond {
  color: #31B6BD;
}
.diamond img {
  width: 24px;
}

.diamond-amount {
  font-size: 36px;
  padding-right: 4px;
}

.price-btn {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
  width: 110px;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 4px;
}
.price-btn span {
  font-size: 14px;
}

.diamond_value {
  color: rgba(0, 0, 0, 0.4);
}

.main-view {
  margin-top: 60px;
  min-height: calc(100vh - 125px);
  height: auto;
  background: linear-gradient(315deg, rgba(247, 100, 140, 0.25) 0%, rgba(255, 135, 97, 0.35) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

iframe.doc-iframe {
  border-radius: 8px;
  min-height: calc(100vh - 120px - 80px);
  background-color: #fff;
}

.userdoc, .container-warpper {
  margin: 40px auto 33px auto;
}

.container-warpper {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 60px;
}

iframe {
  height: 100%;
}

.tappay-logo {
  width: 100px;
}
.tappay-logo img {
  width: 100%;
}

.fs-small {
  font-size: 0.6em;
  color: #000;
  opacity: 0.3;
  line-height: 1.5;
}

.tappay-text {
  width: calc(100% - 100px);
  font-size: 0.8em;
}

.boarder-line-top {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 20px;
}

.table .fs-6 {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.4em;
}
.table th {
  background-color: rgba(247, 100, 140, 0.2);
  color: #A73554;
  padding: 12px 16px;
  width: 20%;
  border: 1px solid #fff;
}
.table td {
  background-color: rgba(247, 100, 140, 0.1);
  color: rgba(0, 0, 0, 0.8);
  padding: 12px 16px;
  border: 1px solid #fff;
}
.table td.text-red {
  color: #FF2E3C;
}
.table .btn-info {
  padding: 0;
  line-height: 0;
  background-color: rgba(255, 255, 255, 0);
  border: rgba(255, 255, 255, 0);
}
.table .btn-info:focus, .table .btn-info active {
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0);
  border: rgba(255, 255, 255, 0);
}
.table .btn-info:hover {
  opacity: 0.5;
}

.radiobtn-bill {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #A73554;
  padding-bottom: 16px;
}

.radiobtn-bill-select:before {
  display: block;
  content: " ";
  background-color: #A73554;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin: 3px;
}

.radiobtn-disable {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.bill-form-group {
  width: 100%;
}
.bill-form-group label .fs-7 {
  opacity: 0.6;
}

.form-control::placeholder {
  color: rgba(0, 0, 0, 0.2);
}

.input-boader-warn {
  border: 2px solid #FF2E3C;
}

@media screen and (min-width: 769px) and (max-width: 1430px) {
  .index_title_01, .index_title_02, .index_title_03, .index_title_04 {
    max-width: 82%;
  }
  .index_title_05 {
    max-width: 64%;
  }
  .directions {
    font-size: 26px;
    padding-top: 16px;
    padding-top: 24px;
  }
  .point04-layout {
    padding-left: 32px;
  }
  .point05-layout {
    padding-right: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .index_title_01, .index_title_02, .index_title_03, .index_title_04 {
    max-width: 80%;
    height: 130px;
  }
  .index_title_05 {
    max-width: 63%;
  }
  .directions {
    font-size: 20px;
    padding-top: 0px;
  }
  .section-style {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .img-schematic-04, .img-schematic-05 {
    height: 380px;
  }
  .section-mt {
    margin-top: 60px;
  }
  .section-style {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .title-youtuber {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 305px;
    height: 34px;
  }
  .title-report {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 160px;
    height: 36px;
  }
}
@media screen and (max-width: 766px) {
  .navbar-brand img {
    width: 85%;
  }
  .avatar {
    transform: scale(0.85);
  }
  .title-main {
    margin-bottom: 16px;
  }
  .btn-pay {
    width: 100%;
  }
  footer {
    padding-bottom: 16px;
  }
  footer a {
    font-size: 0.8em;
  }
  footer .copyright {
    text-align: center;
    margin-left: 16px;
    margin-right: 16px;
    padding-bottom: 0;
  }
  .modal-body-style {
    padding: 0px 24px 47px 24px;
  }
  .modal-dialog {
    width: auto;
  }
  .login {
    height: calc(100vh - 125px);
    width: 100vw;
    border-radius: 0px;
  }
  .btn-login {
    width: 280px;
  }
  .dropdown .arrow {
    width: 10px;
  }
  .section-style {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-mt {
    margin-top: 80px;
  }
  .section-mb {
    margin-bottom: 80px;
  }
  .cta {
    height: 600px;
    padding-top: 0;
  }
  .cta-bg-01 {
    background-image: url("../img/index_cta_bg_01_m.jpg");
  }
  .cta-bg-02 {
    background-image: url("../img/index_cta_bg_02_m.jpg");
  }
  .cta-bg-03 {
    background-image: url("../img/index_cta_bg_03_m.jpg");
  }
  .cta-empty {
    height: 224px;
    width: 100%;
  }
  .logo-slogan {
    width: 100%;
    height: 284px;
    margin-bottom: 12px;
  }
  .download-ios {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 157px;
    height: 44px;
    margin-right: 8px;
  }
  .download-android {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 157px;
    height: 44px;
  }
  .container.marketing-video-container .col-md-10 {
    padding-left: 0;
    padding-right: 0;
  }
  iframe#youtube-player-a, iframe#youtube-player-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .img-schematic-01, .img-schematic-03, .img-schematic-04 {
    margin-bottom: 32px;
  }
  .img-schematic-02, .img-schematic-05 {
    margin-bottom: 24px;
  }
  .img-schematic-04, .img-schematic-05 {
    background-position: center;
    height: 367px;
  }
  .index_title_01, .index_title_02, .index_title_03, .index_title_04, .index_title_05 {
    margin: 0 auto;
  }
  .index_title_01 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 280px;
    height: 34px;
    background-image: url("../img/index_title_01_m.svg");
    background-position: -2px;
    width: 90%;
  }
  .index_title_02 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 280px;
    height: 34px;
    background-image: url("../img/index_title_02_m.svg");
    background-position: -2px;
    width: 90%;
  }
  .index_title_03 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 280px;
    height: 34px;
    background-image: url("../img/index_title_03_m.svg");
    background-position: -2px;
    width: 90%;
  }
  .index_title_04 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 320px;
    height: 34px;
    background-image: url("../img/index_title_04_m.svg");
    background-position: -2px;
    width: 90%;
  }
  .index_title_05 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 280px;
    height: 34px;
    background-image: url("../img/index_title_05_m.svg");
    background-position: -2px;
    width: 90%;
  }
  .directions {
    font-size: 18px;
    line-height: 28.8px;
    width: 90%;
    margin: 0 auto;
    padding-top: 12px;
  }
  .slider-section-style {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .title-youtuber {
    width: 65%;
    margin-bottom: 24px;
  }
  .title-report {
    width: 33%;
    margin-bottom: 24px;
  }
  .index-footer {
    background-color: #fff;
    margin: auto;
    position: relative;
  }
  .container-fluid.reports.slider-section-style {
    padding-right: 0;
    padding-left: 0;
  }
  .main-view-BG {
    height: auto;
    background: url("../img/Bubble_B.png"), url("../img/Bubble_A.png"), linear-gradient(315deg, rgba(247, 100, 140, 0.25) 0%, rgba(255, 135, 97, 0.35) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 40%, 55%, cover;
    background-position: 70% 8%, -14% -2%, top;
  }
  .price-title {
    margin-top: 32px;
    margin-bottom: 12px;
  }
  .price {
    width: 100%;
    height: 100px;
    padding: 16px;
  }
  .price:last-child {
    margin-bottom: 24px;
  }
  .bonus {
    font-size: 12px;
    font-weight: 500;
  }
  .diamond-amount {
    font-size: 34px;
  }
  .main-view {
    min-height: calc(100vh - 125px);
  }
  iframe.doc-iframe, iframe.doc-iframe {
    border-radius: 8px;
    height: calc(100vh - 130px - 40px);
  }
  .userdoc {
    margin: 20px auto;
  }
  .container-warpper {
    padding: 0 24px;
    width: calc(100% - 32px);
    margin: 20px 16px;
  }
  .tappay-text {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  }
  .table th {
    width: 33%;
  }
  .bill-form-group {
    width: 90%;
  }
}
@media screen and (max-width: 320px) {
  footer img {
    width: 24px;
    height: 24px;
  }
  footer a {
    font-size: 0.6em;
  }
  .table th {
    padding: 12px;
    width: 40%;
  }
  .table td {
    padding: 12px;
  }
  .login {
    padding: 10%;
    height: calc(100vh - 118px);
  }
  .download {
    width: 100%;
  }
  .download img {
    width: 43%;
  }
  .index_title_01, .index_title_02, .index_title_03, .index_title_04, .index_title_05 {
    margin: 0 auto;
    background-position: -2px;
    width: 90%;
  }
  .directions {
    width: 90%;
    padding-top: 8px;
  }
  .img-schematic-01, .img-schematic-03, .img-schematic-04, .img-schematic-05 {
    height: 280px;
    margin-bottom: 24px;
  }
  .img-schematic-02 {
    height: 240px;
    margin-bottom: 24px;
  }
  .img-schematic-04, .img-schematic-05 {
    width: 90%;
    margin: 0 auto 24px;
  }
  .img-media-yahoo, .img-media-economy, .img-media-line, .img-media-ebc, .img-media-freedom, .img-media-storm {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 180px;
    height: 74px;
  }
  #plan:hover {
    transform: translateY(0px);
    box-shadow: 0px 0px 8px rgba(247, 100, 140, 0.2);
  }
  .price {
    padding: 12px;
    width: 100%;
  }
  .diamond {
    width: 32%;
  }
  .diamond .h2 {
    font-size: 1.25em;
  }
  .price-btn {
    width: 83px;
    border-radius: 4px;
    padding: 8px 2px;
  }
  .price-btn span {
    font-size: 0.6em;
  }
  .main-view-BG {
    min-height: calc(100vh - 118px);
  }
  iframe {
    height: calc(100vh - 120px - 40px);
  }
}