body{
      font-family: 'IBMPlex_r','Noto Sans TC', sans-serif;
}
.kv {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
}

.kv-cover {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('https://www.sohoko.media/media/i/sohoko_cover_n.png');
      z-index: 5;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}
.kv-content h1{
      position: absolute;
      z-index: -1;
      color: transparent

}
.kv-video {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0;
      transition: 3s;
}

.kv-video.show {
      opacity: 1;
}

.kv-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.6;
}

.kv-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
}

.logo-top {
      position: relative;
      overflow: hidden;
      line-height: 0px;
}

.logo-ch {
      width: 465px;
      transition: 1s;
      transform-origin: 0 0;
      transform: rotate(25deg) translate(100px, 120px);
      opacity: 0;
}

.logo-star {
      width: 37px;
      position: absolute;
      top: -4.8558%;
      left: 59.2469%;
      opacity: 0;
      transition: 0.5s;
      transition-delay: 1s;
      transform: translate(150px, -200px) scale(20, 20);
      transition-timing-function: ease-in;
}

.logo-slogan {
      width: 340px;
      transform: translateY(20px);
      opacity: 0;
      transition: 0.5s;
      transition-delay: 0.7s;
      margin-top: 16px;
}

.slogan {
      font-size: 24px;
      text-align: center;
      margin-top: 20px;
      line-height: 1.1em;
      background: linear-gradient(to bottom, white 75%, #614887 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      opacity: 0;
      transform: translateY(20px);
      transition: 0.5s;
      transition-delay: 1s;
}

.kv-scroll {
      margin-top: 75px;
      border-radius: 100px;
      border: 1px solid white;
      background-color: rgba(255, 255, 255, 0.3);
      padding: 0px 18px;
      cursor: pointer;
      font-size: 13px;
      opacity: 0;
      transition: 0.5s;
      transition-delay: 1.3s;
      transform: translateY(10px);
}

.kv-content.show .logo-ch {
      transform: rotate(0) translate(0, 0);
      opacity: 1;
}

.kv-content.show .logo-star {
      opacity: 1;
      transform: translate(0px, 0px) scale(1, 1);
}

.kv-content.show .logo-slogan {
      transform: translateY(0);
      opacity: 1;
}

.kv-content.show .slogan {
      transform: translateY(0);
      opacity: 1;
}

.kv-content.show .kv-scroll {
      transform: translateY(0);
      opacity: 1;
}

.logo-top.ofv {
      overflow: visible;
}

.goto-photo-logo {
      transform: translateY(-85px);
      animation: logofadetoggle 2s infinite alternate;
}

@keyframes logofadetoggle {
      0% {
            opacity: 1;
      }

      100% {
            opacity: 0.1;
      }
}

.goto-photo-logo img {
      width: 55px;
}

.goto-txt-1 br {
      display: none;
}

.goto-txt-2 {
      text-align: center;
      margin-top: 35px;
}

.goto-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 48px;
      font-size: 20px;
      line-height: 1em;
      letter-spacing: 0.15em;
      font-weight: 600;
      background-color: black;
      height: 42px;
      border-radius: 4px;
      margin-top: 60px;
      cursor: pointer;
}

.goto-btn::after {
      content: '';
      position: absolute;
      right: -1px;
      bottom: -1px;
      top: -1px;
      left: -1px;
      background: #E85000;
      background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(24, 7, 0, 1) 12.5%, rgba(114, 112, 241, 1) 32.5%, rgba(232, 80, 0, 1) 50%, rgba(114, 112, 241, 1) 67.5%, rgba(24, 7, 0, 1) 87.5%, rgba(255, 255, 255, 1) 100%);
      background-size: 200% 100%;
      background-position: 100% 50%;
      z-index: -1;
      border-radius: 4px;
      transition: 0.5s;
}

.goto-btn:hover::after {
      background-position: 0% 50%;
      filter: blur(10px);
}

#live {
      position: relative;
}

.live-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
      animation: livebgani 3s ease-in-out infinite alternate;
}

@keyframes livebgani {
      0% {
            opacity: 1;
      }

      100% {
            opacity: 0.3;
      }
}

.live-content {
      padding: 55px 0px 0;
      position: relative;
}

.live-content video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
}

.live-content::before{
      position: absolute;
      content: '';
      width: 100%;
      height: 20%;
      top: 0;
      left: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      z-index: 1;


}
.live-simu {
      width: 100%;
}

#fns {
      padding: 200px calc((100% - 1440px) / 2 + 110px);
}

.fns-block {
      display: flex;
      width: 100%;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 150px;
}

.fns-item {
      width: auto;
      border: 1px solid white;
      border-radius: 20px;
      overflow: hidden;
      transition: 0.5s;
}

.fns-item:nth-child(4n+1),
.fns-item:nth-child(4n+4) {
      margin-top: 55px;
}

.fns-photo {
      width: 100%;
      padding-top: 74%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}

.fns-content {
      padding: 48px 0px 43px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      position: relative;
}

.fnsc-title {
      font-size: 18px;
      margin-bottom: 10px;
      text-align: center;
      font-weight: bold;
}

.fnsc-txt {
      font-size: 12px;
      text-align: center;
      line-height: 1.8em;
      height: 5.4em;
}

.fnsc-stxt {
      font-size: 11px;
      margin-top: 60px;
      text-align: center;
      line-height: 1.8em;
      color: rgba(255, 255, 255, 0.7);
}

.fnsc-bg2 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(210deg, rgba(255, 255, 255, 0.51) -55%, rgba(8, 0, 117, 0.10) 59%, rgba(255, 7, 0, 0.3) 120%);
      backdrop-filter: blur(10.252809524536133px);
      z-index: -1;
}

.fnsc-bg2::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('https://www.sohoko.media/media/i/noisebg_3n.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 10;
}


.gsapshow {
      transform: translateY(20px);
      opacity: 0;
      transition: 0.5s;
}

.gsapshow.show {
      transform: translateY(0px);
      opacity: 1;
}

#share {
      position: relative;
      height: calc(100vh + 250px);
      margin-top: 250px;
      margin-bottom: -250px;
}

#share .sohoko-title-block {
      /* margin-top: 250px; */
}

#share .goto-btn {
      margin-top: 20px;
      padding: 0 15px;
}

.shareblank {
      height: 100%;
      flex-shrink: 1;
      position: relative;
      width: 100%;
}

.sblock1 {
      display: flex;
      position: absolute;
      top: 0;
      left: -30px;
      width: calc(100% + 60px);
      align-items: flex-start;
      justify-content: center;
      flex-wrap: nowrap;
}

.sblock2 {
      display: flex;
      position: absolute;
      top: 0;
      left: -30px;
      width: calc(100% + 60px);
      align-items: flex-start;
      justify-content: center;
      flex-wrap: nowrap;
}

.sbcol {
      margin: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
}

.sbcol1 {
      width: 13.6vw;
      margin-top: 170px;
}

.sbcol2 {
      width: 24.6vw;
      margin-top: -45px;
}

.sbcol3 {
      width: 15.9vw;
}

.sbcol4 {
      width: 29.3vw;
}

.sbcol5 {
      width: 13.6vw;
      margin-top: 160px
}

.sbitem {
      width: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 10px;
      margin-bottom: 15px;
      opacity: 0;
      transform: translateY(100vh);
      transition: 0.5s;

}

.sbitem16,
.sbitem26 {
      width: 14.3vw;
      margin-right: 20px;
      margin-top: -45px;
      padding-top: 58%;
}

.sbitem17,
.sbitem27 {
      width: 13.6vw;
      padding-top: 70%;
}

.sbitem18,
.sbitem28 {
      width: 21.8vw;
      padding-top: 48%;
}

.sbitem.ani {
      transform: translateY(0);
      opacity: 1;
      transition: 1s;
}

.sbitem.ani.out {
      transform: translateY(-50px);
      opacity: 0;
      transition: 0.5s;
}

.sbitem.pt111 {
      padding-top: 111%;
}

.sbitem.pt116 {
      padding-top: 116%;
}

.sbitem.pt121 {
      padding-top: 121%;
}

.sbitem.pt676 {
      padding-top: 67.6%;
}

.sbitem.pt762 {
      padding-top: 76.2%;
}

.sbcolrow {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
}

#steps-b {
      height: calc(100vh + 1200px);
}

.steps-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 500;
      background-color: black;
      border-radius: 6px;
      margin-top: 15px;
      cursor: pointer;
      padding: 8px 15px;
}

.steps-btn::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
      background: #E85000;
      background: linear-gradient(90deg, #FFFFFF 0%, #382C54 12.5%, #A56388 32.5%, #E75101 50%, #A56388 67.5%, #382C54 87.5%, #FFFFFF 100%);
      background-size: 200% 100%;
      background-position: 100% 50%;
      z-index: -1;
      border-radius: 6px;
      transition: 0.5s;
}

.steps-content {
      margin-top: 130px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
      padding: 0 170px;
      position: relative;
}

.steps-content::before {
      content: '';
      width: 100vw;
      height: 2px;
      position: absolute;
      top: -44px;
      left: 0;
      background-color: #7270F1;
      background: linear-gradient(90deg, #000000 0%, #180700 5%, #7270F1 20%, #E85000 50%, #7270F1 75%, #001D05 80%, #000000 100%);
      z-index: 100;
}

.steps-cover {
      width: 100vw;
      height: 40px;
      position: absolute;
      top: -65px;
      right: 0;
      background-color: black;
      z-index: 200;
}

.steps-item {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      /* width: 100%;
      flex-shrink: 1; */
      margin-right: 170px;
      position: relative;
}

.steps-item-icon::before {
      content: '';
      position: absolute;
      width: 30px;
      height: 30px;
      border: 2px solid;
      background-color: black;
      top: -60px;
      left: 10px;
      border-radius: 100%;
      z-index: 105;
}

.steps-item:nth-child(2) .steps-item-icon:before {
      border-color: #453B77;
}

.steps-item:nth-child(3) .steps-item-icon:before {
      border-color: #B95D61;
}

.steps-item:nth-child(4) .steps-item-icon:before {
      border-color: #B95D61;
}

.steps-item:last-child {
      margin-right: 0px;
}

.steps-item-icon {
      margin-right: 20px;
      position: relative;
}

.steps-item-cc {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
}

.steps-item-cc-num {
      font-size: 24px;
      font-weight: 500;
      line-height: 1em;
      letter-spacing: 0.05em;
}

.steps-item-cc-txt {
      font-size: 14px;
      line-height: 2em;
      letter-spacing: 0.1em;
}

#plans {
      padding: 0 calc((100% - 1440px) / 2 + 200px);
}

.plans-info {
      font-size: 14px;
      line-height: 1.8em;
      letter-spacing: 0.1em;
      text-align: center;
      margin-top: 16px;
}

.plans-swiper {
      width: 100%;
      margin-top: 130px;
}

.plans-item {
      position: relative;
      height: 520px;
      border: 1px solid white;
      border-radius: 20px;
      padding: 45px 0px 40px 30px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      transition: 0.5s;
      overflow: hidden;

}

.pi-bg2 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(220deg, rgba(255, 255, 255, 0.51) -15%, rgba(8, 0, 117, 0.10) 39%, rgba(255, 132, 134, 0.22) 95%);
      backdrop-filter: blur(10.252809524536133px);
      z-index: -1;
}

.pi-bg2::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('https://www.sohoko.media/media/i/noisebg_3n.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 10;
}

.pi-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 20px;
      left: 20px;
      background: linear-gradient(220deg, rgba(8, 0, 117, 0.5) 10%, rgba(255, 144, 85, 0.6) 50%, rgba(255, 255, 255, 0.5) 95%);
      background-size: 200% 200%;
      background-position: 0 100%;
      filter: blur(10px);
      z-index: -2;
      border-radius: 20px;
      transition: 1s;
}

.plans-item.swiper-slide-active .pi-bg {
      /* background: linear-gradient(210deg, rgba(8,0,117,0.3) 10%, rgba(255, 144, 85, 1) 150%); */
      background-position: 100% 0%;
}

.pi-name {
      font-size: 26px;
      line-height: 1.8em;
      letter-spacing: 0.1em;
}

.pi-desp,
.pi-freq {
      font-size: 14px;
      line-height: 1.8em;
      letter-spacing: 0.1em;
}

.pi-txt {
      font-size: 16px;
      opacity: 0.7;
      line-height: 1.6em;
      letter-spacing: 0.1em;
}

.pi-price {
      font-size: 42px;
      line-height: 1.5em;
      font-weight: 600;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      letter-spacing: 0.01em;
}

.pi-price span {
      font-size: 12px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 600;
      margin-left: 5px;
      margin-top: 20px;
}

.swiper-out {
      width: 100%;
      position: relative;
}

.plans-prev {
      position: absolute;
      left: -60px;
      bottom: 0;
      height: 520px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
}

.plans-next {
      position: absolute;
      right: -60px;
      bottom: 0;
      height: 520px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
}



/* .plans-content{
      width: 100%;
      padding: 0 300px;
      margin-top: 100px;
}
.plans-row{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transform: translateX(100vw);
      opacity: 0;
}
.plans-item{
      width: calc( ( 100% - 50px ) / 3 );
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      background-color: black;
      border-radius: 18px;
      margin: 0 25px 30px 0;
      padding: 30px;
      cursor: pointer;
}
.plans-item:last-child{
      margin-right: 0px;
}
.plans-item::before{
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 20px;
      z-index: -1;
      box-shadow: 0 0 10px rgba(255,255,255,0.8);
      filter: blur(0px);
      transition: 0.5s;
}

.pi1::before{
      background: linear-gradient(219.17deg,#E35109 2%, #DEDEDE 23%, #524B9C 50%, #DEDEDE 73%, #E35109 95.84%);
      background-size: 200% 100%;
      background-position: 100% 50%;
}
.pi2::before{
      background: linear-gradient(224.65deg,#F19762 0%, #DEDEDE 23%, #F55DCC 50%, #DEDEDE 73%, #F19762 99.7%);
      background-size: 200% 100%;
      background-position: 100% 50%;
}
.pi3::before{
      background: linear-gradient(219.17deg, #FFE297 4%, #DEDEDE 23%, #0101EE 50%, #DEDEDE 73%, #FFE297 95.84%);
      background-size: 200% 100%;
      background-position: 100% 50%;
}
.pi4::before{
      background: linear-gradient(224.65deg, #F19762 0%, #DEDEDE 23%, #F55DCC 50%, #DEDEDE 73%, #F19762 99.7%);
      background-size: 200% 100%;
      background-position: 100% 50%;
}
.pi5::before{
      background: linear-gradient(219.17deg, #E35109 2%, #DEDEDE 23%, #524B9C 50%, #DEDEDE 73%, #E35109 95.84%);
      background-size: 200% 100%;
      background-position: 100% 50%;
}

.plans-item-top{
      font-size: 24px;
      line-height: 1.5em;
      letter-spacing: 0.15em;
      font-weight: 600;
      margin-bottom: 75px;
}
.plans-item:hover::before{
      background-position: 0% 50%;
      filter: blur(5px);
}
.plans-item-bottom{

}
.plans-item-bottom-name{
      font-size: 20px;
      
}
.plans-item-bottom-txt{

} */

#flows {
      padding: 100px calc((100% - 1440px) / 2 + 340px) 0;
}

.flows-block {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-bottom: 35px;
}

.flows-order {
      font-size: 24px;
      line-height: 1em;
      letter-spacing: 0.05em;
      font-weight: 600;
      background: linear-gradient(to bottom, white 75%, #614887 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      margin-bottom: 15px;
}

.flows-label {
      font-size: 24px;
      line-height: 1.25em;
      letter-spacing: 0.1em;
      font-weight: 500;
      margin-bottom: 20px;
}

.flows-form-row {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
}

.flows-form-row.ffcal {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
}

.flows-form-row.ffrcol {
      flex-direction: column;
}

.flows-form-row.ffrjcfs {
      justify-content: flex-start;
}

.flows-form-row.ffrcol div {
      margin-bottom: 20px;
}

.flows-form-row div:last-child {
      margin-right: 0px;
}

.flows-form-row.ffrcol div:last-child {
      margin-bottom: 0px;
}

.flows-form-row:last-child {
      margin-bottom: 0px;
}

.ff-radio {
      width: 100%;
      flex-shrink: 1;
      margin-right: 40px;
      /* border: 2px solid white; */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 120px;
      border-radius: 8px;
      font-size: 26px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
      background-color: black;
      position: relative;
}

.ff-radio::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 10px;
      z-index: -1;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      transition: 0.5s;
      background: linear-gradient(90deg, #E35109 2%, #DEDEDE 23%, #524B9C 35%, #FFFFFF 50%, #FFFFFF 100%);
      background-size: 300% 100%;
      background-position: 100% 50%;
}

.ff-radio.choose::before {
      background-position: 0% 50%;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
}

.ff-select {
      width: 100%;
      flex-shrink: 1;
      margin-right: 40px;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 55px;
      border-radius: 10px;
      font-size: 24px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
      padding: 0 60px;
      position: relative;
}

.ff-select::after {
      content: url('https://www.sohoko.media/media/i/select_arrow.svg');
      position: absolute;
      top: 10px;
      right: 30px;
}

.ff-select span {
      font-size: 14px;
      vertical-align: bottom;
}

.ff-select-options {
      position: absolute;
      width: 100%;
      top: 71px;
      left: 0;
      max-height: 500px;
      overflow-y: scroll;
      overflow-x: hidden;
      border: 2px solid white;
      border-radius: 10px;
      z-index: 100;
      background-color: black;
      display: none;
      padding: 10px 0;
}

.ff-select-options::-webkit-scrollbar {
      display: none;
}

.ff-select-options.areacode_options {
      white-space: nowrap;
      width: auto;
      max-width: none;
}

.ff-select-options-item {
      padding: 12px 60px;
      transition: 0.5s;
      line-height: 1.5em;
}

.ff-select-options-item:hover {
      background-color: white;
      color: black;
}

.ff-remark {
      width: 100%;
      flex-shrink: 1;
      margin-right: 40px;
      font-size: 16px;
      line-height: 2em;
      letter-spacing: 0.1em;
      font-weight: 500;
}

.ff-remark a {
      font-size: 24px;
      line-height: 1.7em;
}

.ff-btn {
      width: 100%;
      flex-shrink: 1;
      margin-right: 40px;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      border-radius: 10px;
      font-size: 26px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
      position: relative;
}

.ffrcol .ff-btn {
      margin-right: 0px;
}

.ff-label {
      font-size: 14px;
      line-height: 2.25em;
      letter-spacing: 0.1em;
      font-weight: 500;
      margin-right: 25px;
      flex-shrink: 0;
}

.ff-input {
      width: 100%;
      flex-shrink: 1;
      border: 2px solid white;
      height: 55px;
      border-radius: 10px;
      font-size: 24px;
      line-height: 1em;
      letter-spacing: 0.1em;
      font-weight: 500;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
      background-color: transparent;
      color: white;
      padding: 0 60px;
}

.ff-input.is-invalid {
      border-color: red;
}

.flows-calc-total {
      font-size: 20px;
      font-weight: 600;
      line-height: 1em;
      letter-spacing: 0.1em;
      margin-bottom: 15px;
      width: 100%;
      text-align: right;
      margin-top: 15px;
}

.flows-calc {
      font-size: 12px;
      font-weight: 500;
      line-height: 1.8em;
      letter-spacing: 0.1em;
      /* margin-bottom: 25px; */
      width: 100%;
      text-align: right;
}

#flows .goto-btn {
      margin-bottom: 30px;
      margin-top: 35px;
}

.cusinfo .ff-input {
      font-size: 16px;
      padding-left: 20px;
      height: 40px;
}

.cusinfo .ff-select {
      height: 40px;
      padding-left: 20px;
      font-size: 16px;
      margin-right: 10px;
}

.cusinfo .ff-select::after {
      content: url('https://www.sohoko.media/media/i/select_arrow_s.svg');
      position: absolute;
      top: 7px;
      right: 13px;
}

.golden{
      color: white;
      font-size: 20px;
      line-height: 1.5em;
}
.golden br{
      display: none;    
}
.statistic{
      font-size: 36px;
      line-height: 55px;
      letter-spacing: 0.15em;
      margin-top: 24px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
}
.statistic span{
      font-size: 14px;
      line-height: 35px;
      margin-left: 6px;
}
.roller {
  width: 30px;
  height: 55px;
  font-family: "Inter", monospace;
  overflow: hidden;
  font-size: 48px;
  position: relative;
  display: inline-block;
  margin: 0px;
}

.roller-inner {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  z-index: 10;
}

.digit {
  height: 55px;
  line-height: 55px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fadein{
      opacity: 0;
      transform: translateY(30px);
      transition: 1s;
}
.fadein.show{
      opacity: 1;
      transform: translateY(0);
}

.staline{
      margin:0px 30px;
      transform:translateY(-5px)
}


.planhtml{
      position: absolute;
      top: 0;
      left: 0;
      color:black;
}

@media(max-width:1440px) {
      #flows {
            padding: 100px calc((100% - 760px) / 2) 0;
      }

      .steps-content {
            padding: 0 11%;
      }

      .steps-item {
            margin-right: 6vw;
      }
}

@media(max-width:1200px) {
      .goto-txt-1 br {
            display: block;
      }

      .goto-txt-1 span {
            display: none;
      }

      .fns-block {
            width: 140%;
            margin-left: -20%;
            margin-top: 5vw;
      }

      .fns-item {
            margin-top: 55px;
      }

      .fns-item.swiper-slide-active {
            margin-top: 0;
      }

      #plans {
            padding-left: 0px;
            padding-right: 0px;
            width: calc(326px * 3 + 28px * 2);
            margin-left: calc((100vw - 326px * 3 - 28px * 2) / 2);
      }

      .plans-item {
            /* width: 326px; */
      }

}

.mshow {
      display: none;
}

.ff-in {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}
.bbtitle{
      font-size: 60px;
      line-height: 1em;
}
.bbtitle span{
      font-size: 36px;
}
.bbtitle-svg{
      transform: rotate(90deg);
      width: 60px;
}

@media(max-width: 900px) {
      .steps-cover {
            width: 300vw;
            height: 40px;
            position: absolute;
            top: -65px;
            right: 0;
            background-color: black;
            z-index: 200;
      }

      .steps-content {
            padding: 0;
            transform: translateX(100vw);
      }

      .steps-content::before {
            width: 300vw;
            left: -100vw;
            background-color: #7270F1;
            background: linear-gradient(90deg, #000000 0%, #180700 5%, #7270F1 20%, #E85000 50%, #7270F1 75%, #001D05 90%, #000000 100%);
      }

      .steps-item {
            margin-right: 0;
            width: 100vw;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;

      }

      .steps-item-icon::before {
            width: 12px;
            height: 12px;
            border: 2px solid;
            background-color: black;
            top: -52px;
            left: calc(50vw -);
            border-radius: 100%;
            z-index: 105;
      }
}

@media(max-width: 820px) {
      #flows {
            padding: 100px 30px 0;
      }
}


@media(max-width:768px) {
      .bbtitle{
            font-size: 40px;
      }
      .bbtitle span{
            font-size: 24px;
      }
      .bbtitle-svg{
            width: 40px;
      }
      .mhide {
            display: none;
      }

      .goto-btn {
            padding: 0 16px;
            font-size: 12px;
            line-height: 1em;
            letter-spacing: 0.15em;
            font-weight: 500;
            background-color: black;
            height: 24px;
            border-radius: 4px;
            margin-top: 30px;
            cursor: pointer;
      }

      .goto-photo svg {
            width: 72vw;
            height: auto;
      }

      .goto-photo-logo img {
            width: 28px;
      }

      .goto-txt-2 {
            font-size: 12px;
            margin-top: 25px;
      }

      .goto-photo-logo {
            transform: translateY(-9.6vw);
      }

      .live-content {
            padding-top: 25px;
      }

      .live-content video {
            width: 140%;
            margin-left: -20%;
      }

      .fns-item:nth-child(4n+1),
      .fns-item:nth-child(4n+4) {
            margin-top: 20px;
      }

      .fns-block {
            width: 220%;
            margin-left: -60%;
            margin-top: 40px;
      }

      .fns-item {
            margin-top: 20px;
            width: ;
      }

      .fns-item.swiper-slide-active {
            margin-top: 0;
      }

      .fns-content {
            padding-top: 30px;
            padding-bottom: 30px;
      }

      .fnsc-title {
            font-size: 16px;
      }

      .fnsc-txt {
            font-size: 12px;
            line-height: 1.8em;
            height: 5.4em;
      }

      .fnsc-stxt {
            font-size: 12px;
            margin-top: 45px;
      }

      #share {
            width: 180%;
            margin-left: -40%;
            height: 100vh;
            margin-top: 0px;
            margin-bottom: 0px;
            justify-content: space-between;
      }

      .mshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            margin-left: 18vw;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12vw;
      }

      .mshow .sbitem {
            display: block;
            width: 36.7vw;
            height: 40.8vw;
            margin: 10px;
      }

      .steps-btn {
            font-size: 8px;
      }

      .plans-swiper {
            margin-top: 30px;
            transform-origin: 50% 0;
            transform: scale(0.7, 0.7);
      }

      .plans-info {
            color: rgba(255, 255, 255, 0.7);
            font-size: 10px;
      }

      .flows-order {
            font-size: 16px;
            margin-bottom: 5px;
      }

      .flows-label {
            font-size: 16px;
            margin-bottom: 10px;
      }

      .flows-block {
            margin-bottom: 15px;
      }

      .ff-select {
            height: 30px;
            font-size: 12px;
            padding: 0 25px;
            border-radius: 5px;
            border: 1px solid white;
      }

      .ff-select::after {
            content: url('https://www.sohoko.media/media/i/select_arrow.svg');
            position: absolute;
            top: 5px;
            right: 0px;
            transform: scale(0.3, 0.3);
      }

      .ff-select span {
            font-size: 12px;
            vertical-align: bottom;
      }

      .ff-select-options {
            top: 31px;
            max-height: 232px;
            border: 1px solid white;
            border-radius: 5px;
            padding: 5px 0;
      }

      .ff-select-options-item {
            padding: 5px 25px;
      }

      .flows-calc-total {
            font-size: 16px;
      }

      .flows-calc {
            font-size: 10px;
            margin-bottom: 25px;
      }

      .ff-input {
            border: 1px solid white;
            height: 30px;
            border-radius: 5px;
            font-size: 12px;
            padding: 0 25px;
      }

      .cusinfo .ff-input {
            font-size: 12px;
            padding-left: 12px;
            height: 30px;
      }

      .cusinfo .ff-select {
            height: 30px;
            padding-left: 12px;
            font-size: 12px;
            margin-right: 5px;
      }

      .flows-form-row {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 15px;
      }

      .ff-label {
            font-size: 12px;
            margin-bottom: 5px;
      }

      .cusinfo .ff-select::after {
            content: url('https://www.sohoko.media/media/i/select_arrow.svg');
            position: absolute;
            top: 5px;
            right: 0px;
            transform: scale(0.3, 0.3);
      }

      .areacode_options .ff-select-options-item {
            padding: 5px 12px;
      }

      #flows .goto-btn {
            margin: 15px 0;
            font-size: 22px;
            height: 43px;
            border-radius: 8px;
            padding: 0 30px;
      }
      #flows .goto-btn::after {
            border-radius: 8px;
      }
      #goto .goto-btn{
            margin-top: 100px;
            font-size: 22px;
            height: 43px;
            border-radius: 8px;
            padding: 0 30px;
      }
      #goto .goto-btn::after {
            border-radius: 8px;
      }
      .steps-item-icon svg {
            width: 60px;
      }

      .steps-item-cc-num {
            font-size: 16px;
      }

      .steps-item-cc-txt {
            font-size: 16px;
      }

      .sblock1,
      .sblock2 {
            left: -50vw;
            width: 300vw;
      }

      .sbcol1 {
            width: 33.3vw;
            margin-top: 170px;
      }

      .sbcol2 {
            width: 60.2vw;
            margin-top: -45px;
      }

      .sbcol3 {
            width: 38.9vw;
      }

      .sbcol4 {
            width: 71.7vw;
      }

      .sbcol5 {
            width: 33.3vw;
            margin-top: 160px
      }

      .sbitem16,
      .sbitem26 {
            width: 25.74vw;
            margin-right: 20px;
            margin-top: -45px;
            padding-top: 58%;
      }

      .sbitem17,
      .sbitem27 {
            width: 24.48vw;
            padding-top: 70%;
      }

      .sbitem18,
      .sbitem28 {
            width: 39.24vw;
            padding-top: 48%;
      }

      .sbcol {
            align-items: flex-start;
      }

      .kv-scroll {
            margin-top: 175px;
      }
      .golden{
            font-size: 12px;
            text-align: center;
            margin-top: 10px;
      }
      .golden br{
            display: block;    
      }
      .staline{
            margin:0px 10px;
            transform:translateY(-5px)
      }
}






calendar-range {
  display: block; 
  width: 100%;
}

.flows-form-row.ffcal > calendar-range {
  flex: 1 1 100%;
}

calendar-range .cal {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;
}

calendar-range .cal-head {
      position: absolute;
      width: 100%;
      top: 0px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
}
calendar-range .cal-nav{
      font-size: 18px;
      text-align: center;
      padding: 8px 15px;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      border: 1px solid rgba(255,255,255,0.5);
}
calendar-range .cal-title {
      font-weight: 600;
      text-align: center;
      flex: 1;
}
calendar-range .cal-dual {
  display: flex;
  gap: 24px;
  width: 100%;
}

calendar-range .cal-panel {
      width: 100%;
      flex: 1 1 0%;
      min-width: 0;
      max-width: none;
}

calendar-range .cal-week,
calendar-range .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

calendar-range .cal-cell.is-blank {
      visibility: hidden;
      pointer-events: none;
}

calendar-range .cal-ym{
      font-size: 18px;
      font-weight: 600;
      width: 100%;
      text-align: center;
      margin: 5px 0 15px;
}

calendar-range .cal-wcell {
      text-align: center;
      font-size: 16px;
      color: #6b7280;
      padding: 4px 0;
}

calendar-range .cal-cell {
      text-align: center;
      padding: 8px 0;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      border: 1px solid rgba(255,255,255,0.5);
}

calendar-range .cal-cell.is-other {
      color: #cbd5e1;
}

calendar-range .cal-cell.is-disabled {
      color: #666666;
      background-color: #999999;
      border-color: transparent;
      opacity: .6;
      pointer-events: none;
}

calendar-range .cal-cell.is-today {
      outline: 2px solid #60a5fa;
      background-color: #60a5fa;
      color:white;
      outline-offset: -2px;
}

calendar-range .cal-cell.is-inrange {
      background: #2563eb;
      color: #fff;
}

calendar-range .cal-cell.is-selected {
      background: #1d4ed8;
      color: #fff;
      font-weight: 600;
}

calendar-range .cal-cell:not(.is-disabled):hover {
      background: #e5e7eb;
}

@media( max-width: 768px ) {
  calendar-range .cal-panel:nth-child(2) {
    display: none;
  }
}