/*--===============================================================--*/
/*--=================== 1440 - 2048 (1024 - 1240) ===================--*/
/*--===============================================================--*/


@media (max-width:2048px){

  .container-fluid {
      min-width: 100%;
  }

  .container {
      max-width: 1240px;
      width: 100%;
  }

  h1 {
      font-size: 52px;
  }

  h2 {
      font-size: 28px;
  }

  h3 {
      font-size: 20px;
      line-height: 28px;
  }

  h4 {
      font-size: 20px;
  }

  p {
      font-size: 18px;
  }

  /*------------------------- inner page content -------------------------*/

  .container-fluid.inner-page .container {
      margin: 30px auto;
      width: 1190px;
  }

  /*------------------------- row 1 upper -------------------------*/

  .row-1-upper h1 {
      margin-top: 60px;
  }

  .row-1-upper ul {
      margin-top: 0;
  }

  .row-1-upper ul li {
      font-size: 20px;
  }

  .row-1-upper p {
      font-size: 24px;
  }

  .row-1-upper .price_tag {
      font-size: 32px;
  }

  .row-1-upper .price_amount {
      font-size: 48px;
  }

  /*------------------------- row 1 lower -------------------------*/

  .container-fluid.row-1-lower {
      height: 700px;
  }

  .banner-element {
      height: 750px;
  }

  /*------------------------- row 2 -------------------------*/

  .row-2 h3 {
      font-size: 22px;
  }

  .row-2 p {
      font-size: 18px;
  }

  /*------------------------- row 3 -------------------------*/

  .row-3 h2 {
      margin-bottom: 15px;
  }

  .row-3 .number-2 {
      font-size: 48px;
  }

  .row-3 article {
      margin-left: 25px;
  }

  /*------------------------- row 4 -------------------------*/

  .row-4 {
      padding: 100px 0 60px;
  }

  .row-4 .feature-list {
      width: 1240px;
  }

  .row-4 .feature-list li {
      width: 520px;
      margin-right: 40px;
  }

  .row-4 .feature-list li p {
      font-size: 16px;
  }

  .row-4 .feature-item .feature-icon {
      width: 100px;
      height: 100px;
  }


  /*------------------------- row 5 -------------------------*/

  .row-5 {
      padding: 100px 0;
  }

  .row-5 article {
      padding-left: 25px;
      box-sizing: border-box;
  }

  .row-5 .number-100 {
      font-size: 46px;
  }

  .row-5 .route-map .pin.hk {
      top: 168px;/*-- 芒藛拧 --*/
      right: 165px;
  }
  .row-5 .route-map .pin.sh {
      top: 146px;
      right: 150px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.kr {
      top: 132px;
      right: 128px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.jp1 {
      top: 142px;
      right: 116px; /*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.jp2 {
      top: 122px;
      right: 94px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.tw {
      top: 165px;
      right: 142px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.bj {
      top: 123px;
      right: 165px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.sg {
      top: 217px;
      right: 183px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.au {
      top: 300px;
      right: 80px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.ru {
      top: 88px;
      right: 349px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.uk {
      top: 85px;
      right: 427px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.de {
      top: 87px;
      right: 397px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.fr {
      top: 102px;
      right: 418px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.it {
      top: 122px;
      right: 386px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.ca {
      top: 102px;
      right: 702px;
  }
  .row-5 .route-map .pin.la {
      top: 143px;
      right: 687px;
  }
  .row-5 .route-map .pin.ny {
      top: 130px;
      right: 598px;
  }
  .row-5 .route-map .pin.da {
      top: 133px;
      right: 639px;
  }
  .row-5 .route-map .pin.se {
      top: 108px;
      right: 676px;
  }

  /*------------------------- row 6 -------------------------*/

  .row-6 {
      padding-top: 160px;
      padding-bottom: 300px;
  }

  .row-6 .p-1 {
      font-size: 28px;
  }

  .row-6 .p-3 {
      font-size: 18px;
  }

  /*------------------------- row 7 -------------------------*/

  .row-7 {
      padding: 100px 25px;
  }

  .row-7 p {
      font-size: 18px;
      margin-top: 5px;
  }

  .row-7 .media-pf-list {
      margin-top: 30px;
  }


  /*------------------------- row 8 -------------------------*/

  .row-8 article {
      margin-top: 0;
      padding-left: 25px;
  }

  .row-8 .number-3 {
      font-size: 46px;
  }

  .row-8 p {
      font-size: 18px;
  }

  .row-8 ul li {
      width: 35px;
      height: 35px;
  }

  .row-8 .signal-l {
      width: 233px;
      left: 75px;
  }

  .row-8 .signal-m {
      width: 157px;
      left: 293px;
  }

  .row-8 .signal-r {
      width: 331px;
      left: 304px;
  }

  /*------------------------- row 9 -------------------------*/

  .row-9 {
      padding-bottom: 100px;
      padding-top: 100px;
  }

  .row-9 p {
      font-size: 18px;
      margin-top: 5px;
  }

  .row-9 .app-carousel .apps-display {
      margin-top: 30px;
      background-size: 1600px;
      height: 312px;
  }

  /*------------------------- row 10 -------------------------*/

  .row-10 {
      padding: 100px 0;
  }

  .row-10 p {
      font-size: 18px;
      margin-top: 5px;
  }

  .row-10 .flow-list {
      margin-top: 30px;
      width: 1190px;
  }

  .row-10 .flow-item {
      margin-bottom: 10px;
  }

  .row-10 .content-container .list-title {
      font-size: 20px;
  }

  .row-10 .content-container p {
      font-size: 15px;
      margin-top: 2px;
  }

  .row-10 .flow-number {
      width: 100px;
      height: 100px;
  }

  .row-10 .timer {
      font-size: 15px;
  }

  .row-10 .timer .time {
      font-size: 26px;
  }

  /*------------------------- row 11 -------------------------*/

  .row-11 {
      padding: 100px 0;
  }

  .row-11 .plan-list {
      margin-top: 30px;
  }

  .row-11 .plan-content {
      padding-bottom: 36px;
  }

  .row-11 .plan-title {
      font-size: 24px;
  }

  .row-11 .plan-description {
      font-size: 14px;
  }

  .row-11 .plan-content-item p {
      font-size: 14px;
  }

  .row-11 .plan-detail {
      margin-top: 22px;
  }

  .row-11 .circle-tick {
      width: 20px;
      height: 20px;
      margin-right: 5px;
  }

  .row-11 .start {
      height: 15px;
      vertical-align: middle;
      margin-bottom: 3px;
      margin-left: 5px;
  }

  .row-11 .from-price {
      margin-top: 24px;
  }

  .row-11 .price_tag {
      font-size: 23px;
  }

  .row-11 .unit {
      font-size: 16px;
  }

  .row-11 .price_amount {
      font-size: 30px;
  }

  .row-11 .remarks {
      font-size: 16px;
  }


  /*------------------------- row 12 -------------------------*/

  .row-12 {
      padding: 100px 0;
  }

  .row-12 ul {
      margin-top: 30px;
  }

  .row-12 .q-item .question .plus-icon {
      margin-top: -6px;
  }

  /*------------------------- row 13 -------------------------*/

  .row-13 {
      padding-top: 80px;
      padding-bottom: 80px;
  }

  .row-13 article {
      padding-left: 25px;
  }

  .row-13 aside .backend_screen {
      height: 600px;
  }

  .row-13 p {
      font-size: 18px;
  }

  .row-13 .function-list {
      font-size: 16px;
  }

  .row-13 .button {
      width: 160px;
  }

  /*------------------------- row 14 -------------------------*/

  .row-14 .privacy_protection {
      width: 75%;
      margin: auto;
  }

  .row-14 article p {
      width: 480px;
  }

  /*------------------------- row 15 -------------------------*/

  .row-15 .logo-carousel {
      width: 1240px;
  }

  .row-15 .logo-carousel .partner-logo-display {
      background-size: 1240px;
      height: 250px;
  }

   /*------------------------- row 16 -------------------------*/

  .row-16 {
      padding: 0 25px;
  }
  .row-16 aside {
      margin-top: 50px;
  }


}

/*--===============================================================--*/
/*--========================= 1240 - 1440 =========================--*/
/*--===============================================================--*/

@media (max-width: 1439px) {
  .container {
      max-width: 1240px;
  }

  /*------------------------- inner page content -------------------------*/

  .container-fluid.inner-page .container {
      margin: 30px auto;
  }

  /*------------------------- row 4 -------------------------*/

  .row-4 .feature-list {
      width: 1240px;
  }

  .row-4 .feature-list li {
      width: 480px;
      margin-left: 0;
  }

  /*------------------------- row 5 -------------------------*/

  .row-5 article {
      padding-left: 25px;
      box-sizing: border-box;
  }

  .row-5 .route-map .pin.hk {
      top: 168px;/*-- 芒藛拧 --*/
      right: 165px;
  }
  .row-5 .route-map .pin.sh {
      top: 146px;
      right: 150px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.kr {
      top: 132px;
      right: 128px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.jp1 {
      top: 142px;
      right: 116px; /*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.jp2 {
      top: 122px;
      right: 94px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.tw {
      top: 165px;
      right: 142px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.bj {
      top: 123px;
      right: 165px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.sg {
      top: 217px;
      right: 183px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.au {
      top: 300px;
      right: 80px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.ru {
      top: 88px;
      right: 349px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.uk {
      top: 85px;
      right: 427px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.de {
      top: 87px;
      right: 397px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.fr {
      top: 102px;
      right: 418px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.it {
      top: 122px;
      right: 386px;/*-- 芒藛拧 --*/
  }
  .row-5 .route-map .pin.ca {
      top: 102px;
      right: 702px;
  }
  .row-5 .route-map .pin.la {
      top: 143px;
      right: 687px;
  }
  .row-5 .route-map .pin.ny {
      top: 130px;
      right: 598px;
  }
  .row-5 .route-map .pin.da {
      top: 133px;
      right: 639px;
  }
  .row-5 .route-map .pin.se {
      top: 108px;
      right: 676px;
  }

  /*------------------------- row 7 -------------------------*/

  .row-7 .media-item .blue-tick {
      width: 70px;
      height: 70px;
  }

  /*------------------------- row 8 -------------------------*/

  .row-8 article {
      padding-left: 25px;
  }

  .row-8 .signal-l {
      width: 233px;
      left: 75px;
  }

  .row-8 .signal-m {
      width: 157px;
      left: 293px;
  }

  .row-8 .signal-r {
      width: 331px;
      left: 304px;
  }

}

/*--===============================================================--*/
/*--========================= 1024 - 1240 =========================--*/
/*--===============================================================--*/

@media (max-width:1239px){

  .container {
      max-width: 1024px;
  }

  /*------------------------- inner page content -------------------------*/

  .container-fluid.inner-page .container {
      width: 974px;
      margin: 30px auto;
  }

  /*------------------------- row 2 -------------------------*/

  .row-2 .container article {
      width: auto;
      padding: 38px 70px;
      margin: 0 52px;
  }

  /*------------------------- row 3 -------------------------*/

  .row-3 .signup_character {
      width: 170px;
      height: 250px;
      bottom: 30px;
  }

  /*------------------------- row 4 -------------------------*/

  .row-4 .feature-list {
      width: 1024px;
  }

  .row-4 .feature-list li {
      width: calc( 50% - 20px);
      margin-right: 40px;
  }

  /*------------------------- row 5 -------------------------*/

  .row-5 .route-map .pin {
      height: 12px;
      width: 12px;
      margin: -6px 0 0 -6px;
  }

  .row-5 .route-map .wave-1 {
      width: 12px;
      height: 12px;
  }
  .row-5 .route-map .wave-2 {
      width: 12px;
      height: 12px;
  }
  @keyframes signalanimation {
      0% {
          width: 12px;
          height: 12px;
          margin: 0 0 0 0;
          opacity:.5;
      }

      80% {
          width: 48px;
          height: 48px;
          margin: -150% 0 0 -150%;
          opacity:0;
      }

      100% {
          width: 12px;
          height: 12px;
          margin: 0 0 0 0;
          opacity:0;
      }
  }

  .row-5 .route-map .pin.hk { /*-- 芒藛拧 --*/
      top: 140px;
      right: 133px;
  }
  .row-5 .route-map .pin.sh { /*-- 芒藛拧 --*/
      top: 120px;
      right: 121px;
  }
  .row-5 .route-map .pin.kr { /*-- 芒藛拧 --*/
      top: 113px;
      right: 102px;
  }
  .row-5 .route-map .pin.jp1 { /*-- 芒藛拧 --*/
      top: 118px;
      right: 93px;
  }
  .row-5 .route-map .pin.jp2 { /*-- 芒藛拧 --*/
      top: 101px;
      right: 76px;
  }
  .row-5 .route-map .pin.tw { /*-- 芒藛拧 --*/
      top: 135px;
      right: 117px;
  }
  .row-5 .route-map .pin.bj { /*-- 芒藛拧 --*/
      top: 107px;
      right: 135px;
  }
  .row-5 .route-map .pin.sg { /*-- 芒藛拧 --*/
      top: 197px;
      right: 136px;
  }
  .row-5 .route-map .pin.au { /*-- 芒藛拧 --*/
      top: 248px;
      right: 65px;
  }
  .row-5 .route-map .pin.ru { /*-- 芒藛拧 --*/
      top: 74px;
      right: 288px;
  }
  .row-5 .route-map .pin.uk { /*-- 芒藛拧 --*/
      top: 73px;
      right: 349px;
  }
  .row-5 .route-map .pin.de { /*-- 芒藛拧 --*/
      top: 72px;
      right: 327px;
  }
  .row-5 .route-map .pin.fr { /*-- 芒藛拧 --*/
      top: 82px;
      right: 345px;
  }
  .row-5 .route-map .pin.it { /*-- 芒藛拧 --*/
      top: 101px;
      right: 318px;
  }
  .row-5 .route-map .pin.ca { /*-- 芒藛拧 --*/
      top: 82px;
      right: 572px;
  }
  .row-5 .route-map .pin.la { /*-- 芒藛拧 --*/
      top: 115px;
      right: 564px;
  }
  .row-5 .route-map .pin.ny { /*-- 芒藛拧 --*/
      top: 106px;
      right: 490px;
  }
  .row-5 .route-map .pin.da { /*-- 芒藛拧 --*/
      top: 110px;
      right: 526px;
  }
  .row-5 .route-map .pin.se {
      top: 88px;
      right: 540px;
  }

  /*------------------------- row 7 -------------------------*/

  .row-7 .media-character {
      width: 70px;
      height: 203px;
      left: -25px;
  }

  /*------------------------- row 8 -------------------------*/

  .row-8 {
      background-image: linear-gradient(#f0f5f8 0%, #e2ebf1 100%);
  }

  .row-8 .signal-l {
      width: 183px;
      left: 71px;
  }

  .row-8 .signal-m {
      width: 133px;
      left: 243px;
  }

  .row-8 .signal-r {
      width: 281px;
      left: unset;
      right: -23px;
  }

  /*------------------------- row 10 -------------------------*/

  .row-10 .flow-list {
      margin-top: 30px;
      width: 1024px;
  }

  /*------------------------- row 13 -------------------------*/

  .row-13 aside .backend_screen {
      height: 495px;
  }

  /*------------------------- row 14 -------------------------*/

  .row-14 {
      padding: 60px 0;
  }

  .row-14 .container {
      max-width: 1024px;
  }

  .row-14 article {
      padding-right: 25px;
  }

  .row-14 .privacy_protection {
      width: 80%;
  }

  /*------------------------- row 15 -------------------------*/

  .row-15 .logo-carousel {
      width: 1024px;
  }

  .row-15 .logo-carousel .partner-logo-display {
      background-size: 1024px;
      height: 205px;
  }

  /*------------------------- row 17 -------------------------*/

  .row-17 .download-item-container {
      width: calc(45% - 60px);
  }

  .row-17 .download-item-container .download-item-thumbnail {
      width: 100px;
      height: 100px;
      margin-right: 20px;
  }
}

/*--===============================================================--*/
/*--========================== 768 - 1024 ==========================--*/
/*--===============================================================--*/


@media (max-width: 1023px){

  .container-fluid {
      width: 100%;
      box-sizing: border-box;
  }

  .container {
      max-width: 768px;
      width: 100%;
  }

  h1 {
      font-size: 42px;
      line-height: 59px;
  }

  h2 {
      font-size: 24px;
      line-height: 30px;
  }

  h3 {
      font-size: 18px;
      line-height: 24px;
  }

  h4 {
      font-size: 15px;
  }

  p {
      font-size: 15px;
  }

  .button {
      font-size: 18px;
      line-height: 55px;
  }

  /*------------------------- inner page content -------------------------*/

  .container-fluid.inner-page .container {
      width: 738px;
      margin: 30px auto;
      padding: 40px;
  }

  /*------------------------- header -------------------------*/

  header a.logo {
      height: 75px;
      width: 75px;
  }

  header .container {
      padding: 19px 18px;
      min-width: 100%;
      width: 100%;
      box-sizing: border-box;
  }

  header .container .menu {
  }

  header .container .new_domain {
  }

  header .container .menu ul li a {
      font-size: 16px;
  }


  /*------------------------- row 1 -------------------------*/

  .row-1-upper h1 {
      margin-top: 50px;
  }

  .row-1-upper ul {
      margin-top: 10px;
  }

  .row-1-upper ul li {
      font-size: 16px;
      padding: 0 10px;
  }

  .row-1-upper .payment_support {
      margin-top: 14px;
  }

  .row-1-upper .payment_support li img {
      height: 18px;
  }

  .character-flying {
      background-position: 70% 0;
  }

  /*------------------------- row 2 -------------------------*/

  .row-2 .container article {
      padding: 32px 50px;
  }

  .row-2 article:before {
      width: 45px;
      height: 22px;
      right: -23px;
      top: 15px;
  }

  .row-2 article:after {
      width: 45px;
      height: 22px;
      left: -25px;
      bottom: 15px;
  }

  .row-2 h3 {
      font-size: 18px;
  }

  .row-2 p {
      font-size: 15px;
  }


  /*------------------------- row 3 -------------------------*/

  .row-3 {
      padding-top: 70px;
  }

  .row-3 .container {
      padding: 0 25px;
  }

  .row-3 h2 {
      font-size: 20px;
  }

  .row-3 .number-2 {
      font-size: 40px;
  }

  .row-3 p {
      font-size: 13px;
  }

  .row-3 .signup_character {
      width: 106px;
      height: 154px;
      left: 0;
  }

  /*------------------------- row 4 -------------------------*/

  .row-4 {
      padding: 70px 25px;
  }

  .row-4 .feature-list {
      width: 718px;
  }

  .row-4 .feature-list li {
      width: calc( 50% - 10px);
      margin-right: 20px;
      margin-bottom: 30px;
  }

  .row-4 .feature-item .feature-icon {
      width: 64px;
      height: 64px;
  }

  .row-4 .feature-list li p {
      font-size: 12px;
  }

  /*------------------------- row 5 -------------------------*/

  .row-5 {
      padding: 70px 25px;
  }

  .row-5 .container {
      width: 718px;
  }

  .row-5 article {
      width: 40%;
      padding-right: 20px;
      padding-left: 0;
      box-sizing: border-box;
  }

  .row-5 aside {
      width: 60%;
  }

  .row-5 .number-100 {
      font-size: 38px;
  }

  .row-5 .route-list {
      font-size: 13px;
  }

  .row-5 .route-map .pin {
      height: 8px;
      width: 8px;
      margin: -4px 0 0 -4px;
  }
  .row-5 .route-map .wave-1 {
      width: 8px;
      height: 8px;
  }
  .row-5 .route-map .wave-2 {
      width: 8px;
      height: 8px;
  }
  @keyframes signalanimation {
      0% {
          width: 8px;
          height: 8px;
          margin: 0 0 0 0;
          opacity:.4;
      }

      80% {
          width: 38px;
          height: 38px;
          margin: -188% 0 0 -188%;
          opacity:0;
      }

      100% {
          width: 8px;
          height: 8px;
          margin: 0 0 0 0;
          opacity:0;
      }
  }

  .row-5 .route-map .pin.hk {  /*-- 芒藛拧 --*/
      top: 89px;
      right: 84px;
  }
  .row-5 .route-map .pin.sh {  /*-- 芒藛拧 --*/
      top: 78px;
      right: 77px;
  }
  .row-5 .route-map .pin.kr {  /*-- 芒藛拧 --*/
      top: 71px;
      right: 64px;
  }
  .row-5 .route-map .pin.jp1 {  /*-- 芒藛拧 --*/
      top: 78px;
      right: 60px;
  }
  .row-5 .route-map .pin.jp2 {  /*-- 芒藛拧 --*/
      top: 68px;
      right: 52px;
  }
  .row-5 .route-map .pin.tw {  /*-- 芒藛拧 --*/
      top: 90px;
      right: 70px;
  }
  .row-5 .route-map .pin.bj {  /*-- 芒藛拧 --*/
      top: 74px;
      right: 82px;
  }
  .row-5 .route-map .pin.sg { /*-- 芒藛拧 --*/
      top: 125px;
      right: 86px;
  }
  .row-5 .route-map .pin.au { /*-- 芒藛拧 --*/
      top: 160px;
      right: 39px;
  }
  .row-5 .route-map .pin.ru {  /*-- 芒藛拧 --*/
      top: 49px;
      right: 185px;
  }
  .row-5 .route-map .pin.uk {  /*-- 芒藛拧 --*/
      top: 47px;
      right: 222px;
  }
  .row-5 .route-map .pin.de {  /*-- 芒藛拧 --*/
      top: 48px;
      right: 213px;
  }
  .row-5 .route-map .pin.fr {  /*-- 芒藛拧 --*/
      top: 55px;
      right: 220px;
  }
  .row-5 .route-map .pin.it {  /*-- 芒藛拧 --*/
      top: 65px;
      right: 204px;
  }
  .row-5 .route-map .pin.ca {  /*-- 芒藛拧 --*/
      top: 55px;
      right: 369px;
  }
  .row-5 .route-map .pin.la {  /*-- 芒藛拧 --*/
      top: 75px;
      right: 364px;
  }
  .row-5 .route-map .pin.ny {
      top: 69px;
      right: 315px;
  }
  .row-5 .route-map .pin.da {
      top: 74px;
      right: 341px;
  }
  .row-5 .route-map .pin.se {
      top: 56px;
      right: 348px;
  }

  /*------------------------- row 6 -------------------------*/

  .row-6 {
      padding-top: 80px;
      padding-bottom: 230px;
  }

  .row-6 .p-1 {
      font-size: 22px;
  }

  .row-6 .p-2 {
      font-size: 32px;
  }

  .row-6 .p-3 {
      font-size: 16px;
  }

  .iplc-label {
      width: 64px;
      margin-right: 5px;
  }

  .ms-label {
      width: 100px;
      margin-left: 10px;
  }

  /*------------------------- row 7 -------------------------*/

  .row-7 {
      padding: 70px 25px;
  }

  .row-7 p {
      font-size: 16px;
  }

  .row-7 .media-pf-container {
      padding-left: 10px;
  }

  .row-7 .media-item {
      width: 13.6%;
  }

  .row-7 .media-character {
      left: -30px;
      width: 60px;
      height: 174px;
  }

  .row-7 .media-item .blue-tick {
      bottom: -5px;
  }

  .row-7 .media-item .blue-tick {
      width: 50px;
      height: 50px;
  }

  /*------------------------- row 8 -------------------------*/

  .row-8 article {
      margin-top: 30px;
      margin-bottom: 60px;
      padding-left: 25px;
  }

  .row-8 p {
      font-size: 15px;
  }

  .row-8 p:nth-child(2) {
      margin-bottom: 10px;
  }

  .row-8 p.small {
      font-size: 13px;
  }

  .row-8 .characters {
      margin-top: 40px;
  }

  .row-8 .signal-l {
      width: 171px;
      left: 31px;
      top: 20px;
  }

  .row-8 .signal-m {
      width: 115px;
      left: 173px;
      top: 20px;
  }

  .row-8 .signal-r {
      width: 200px;
      left: unset;
      right: -13px;
      top: 80px;
  }

  /*------------------------- row 9 -------------------------*/

  .row-9 {
      padding: 70px 0;
  }

  .row-9 p {
      font-size: 16px;
  }

  .row-9 .app-carousel .apps-display {
      background-size: 1250px;
      height: 242px;
  }

  /*------------------------- row 10 -------------------------*/

  .row-10 {
      padding: 70px 25px;
  }

  .row-10 .flow-list {
      width: 718px;
  }

  .row-10 p {
      font-size: 16px;
  }

  .row-10 .flow-number {
      margin-right: 20px;
  }

  .row-10 .content-container .list-title {
      font-size: 18px;
  }

  .row-10 .content-container {
      width: calc(100% - 205px);
  }

  .row-10 .timer {
      width: 95px;
  }

  /*------------------------- row 11 -------------------------*/

  .row-11 {
      padding: 70px 0;
  }

  .row-11 .plan-list .plan-item {
      margin-right: 18px;
  }

  .row-11 .plan-character {
      height: 235px;
  }

  .row-11 .plan-description {
      padding: 0 15px;
      min-height: 60px;
  }

  .row-11 .plan-detail {
      padding: 0 20px;
  }

  .row-11 .payment_support {
      margin-top: 14px;
  }

  .row-11 .payment_support li img {
      height: 18px;
  }

  .row-11 .remarks {
      font-size: 14px;
  }

  /*------------------------- row 12 -------------------------*/

  .row-12 {
      padding: 70px 0;
  }

  .row-12 ul {
      width: 90%;
  }

  .row-12 .q-item .question h3 {
      font-size: 15px;
  }

  .row-12 .q-item .answer p {
      font-size: 15px;
  }

  .row-12 .go-to-faq {
      font-size: 18px;
      line-height: 55px;
  }

  /*------- inner page row 12 -------*/

  .row-12.inner-page .container {
      padding: 0;
  }

  .row-12 .q-item .question .plus-icon {
      margin-top: -7.5px;
  }

  /*------------------------- row 13 -------------------------*/

  .row-13 {
      padding: 70px 25px;
  }

  .row-13 aside {
      width: 65%;
      background-position: center;
  }

  .row-13 aside .backend_screen {
      height: 348px;
  }

  .row-13 p {
      font-size: 15px;
  }

  .row-13 .function-list {
      font-size: 14px;
  }

  .row-13 .button {
      width: 125px;
  }

  /*------------------------- row 14 -------------------------*/

  .row-14 {
      padding: 35px 25px;
  }

  .row-14 article {
      padding: 0;
      width: 55%;
  }

  .row-14 aside {
      width: 45%;
  }

  .row-14 article p {
      width: 405px;
  }

  /*------------------------- row 15 -------------------------*/

  .row-15 .logo-carousel {
      width: 100%;
  }

  .row-15 .logo-carousel .partner-logo-display {
      width: 100%;
      background-position: 0 top;
      animation: carouselanimation 60s infinite;
      animation-timing-function: linear;
      /*transform: translateX(15%);*/
  }

  /*------------------------- row 16 -------------------------*/

  .row-16 .fourk-label {
      width: 67px;
      margin-left: 12px;
      margin-right: 12px;
  }

  .row-16 article {
      width: 45%;
  }

  .row-16 aside {
      width: 55%;
  }

  /*------------------------- row 17 -------------------------*/

  .row-17 .download-item-container {
      margin: 0 8px 16px;
      width: calc(45% - 28px);
      padding: 20px 25px;
  }

  .row-17 .download-item-container .download-item-thumbnail {
      width: 100px;
      height: 100px;
      margin-right: 20px;
  }

  .row-17 .download-item-container .title {
      font-size: 16px;
  }

  .row-17 .download-item-container .button {
      font-size: 13px;
      line-height: 34px;
      width: 182px;
      margin-top: 4px;
  }

  .row-17 .download-item-container .remark {
      font-size: 12px;
  }

  /*------------------------- footer -------------------------*/

  footer .container {
      padding: 50px 25px;
  }

  /*------------------------- gradient main top -------------------------*/

  .gradient-main-top {
      padding-top: 100px;
  }

  .gradient-main-top:after {
      width: 240px;
      height: 195px;
  }

}


/*--===============================================================--*/
/*--=========================== 0 - 768 ===========================--*/
/*--===============================================================--*/


@media (max-width: 767px){

  .container-fluid {
      width: 100%;
      box-sizing: border-box;
  }

  .container {
      max-width: unset;
      width: 100%;
  }

  h1 {
      font-size: 28px;
      line-height: 45px;
  }

  h2 {
      font-size: 20px;
      line-height: 28px;
  }

  h5 {
      font-size: 15px;
  }

  p {
      font-size: 14px;
  }

  .button {
      font-size: 16px;
      line-height: 42px;
      width: 150px;
  }

  /*------------------------- inner page content -------------------------*/

  .container-fluid.inner-page .container {
      width: calc( 100% - 30px);
      margin: 30px auto;
      padding: 30px 20px;
  }

  .container-fluid.inner-page p {
      font-size: 14px;
  }

  .container-fluid.inner-page li {
      font-size: 14px;
      margin-bottom: 5px;
  }

  .container-fluid.inner-page .small {
      font-size: 10px;
  }

  .empty {
      height: 40px;
  }

  .empty.large {
      height: 60px;
  }

  .inner-page .inner-mark-logo {
      width: 110px;
  }

  /*------------------------- header -------------------------*/

  header.top-header {
      position: fixed;
      top: 0;
      margin: 0;
  }

  header.top-header.animated{
      animation-duration: 300ms !important;
  }

  header a.logo {
      width: 130px;
  }

  header .menu-btn {
      display: block;
  }

  header .container{
      text-align: center !important;
      padding: 16px 18px;
  }

  header .container .menu {
      padding: 50px 0;
      float: none;
      min-width: auto;
      width: 100%;
      text-align: center;
      background: #fff;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      display: none;
      height: 100vh;
      box-shadow: 0 0 80px 0 #ccc;
  }

  header .container .menu.animated{
      animation-duration: 300ms;
  }

  header .close-btn {
      display: none;

  }

  header .container .menu ul {
      display: block;
  }
  header .container .menu ul li {
      display: block;
      width: 100%;
      margin: 0;

  }

  header .container .menu ul li a {
      width: 50%;
      padding: 10px 0;
      text-align: center;
      margin: 10px auto;
      font-size: 18px;
      color: #333;
      display: block;
  }

  header .container .menu ul li a.mobile-a {
      display: block;
  }

  header .container .menu ul li a.desktop-a {
      display: none;
  }

  header .container .new_domain {
      display: none;
  }


  header .container .menu ul li a.header_button {
      width: 80%;
      max-width: 250px;
      background-color: #2F343B;
      font-weight: 700;
      font-size: 16px;
      color: #fff;
      letter-spacing: 0.02em;
      border-radius: 8px;
      line-height: 25px;
      margin-bottom: 20px;
  }

  header .container .menu ul li a.header_button:hover {
      background-color: #48515F;
  }

  header .container .menu ul li a.header_button.login_button {
      margin-top: 60px;
      color: #237EFF;
      border: 2px solid #237EFF;
      background-color: #ffffff;
  }

  header .container .menu ul li a.header_button.login_button:hover {
      background-color: #E9F2FF;
      border-color: #9DC6FF;
  }

  /*------------------------- row 1 upper -------------------------*/

  .row-1-upper h1 {
      margin-top: 90px;
  }

  .row-1-upper h1 + ul {
      width: 98%;
  }

  .row-1-upper ul {
      margin-top: 0px;
      margin-bottom: 0px;
  }

  .row-1-upper ul li {
      font-size: 14px;
      padding: 0 9px;
  }

  .row-1-upper p {
      font-size: 18px;
  }

  .row-1-upper .price_tag {
      font-size: 22px;
  }

  .row-1-upper .price_amount {
      font-size: 32px;
  }

  .row-1-upper .tips {
      font-size: 13px;
  }

  .row-1-upper .signup_container {
      margin-right: 0;
  }

  .row-1-upper .signup_button,.row-12-upper .signup_button {
      z-index: 1;
      position: relative;
  }

  .row-1-upper .download_container {
      display: block;
      margin-top: 10px;
      margin-bottom: 20px;
  }

  .row-1-upper .payment_support {
      font-size: 12px;
  }

  .row-1-upper .payment_support span {
      vertical-align: top;
  }

  .row-1-upper .payment_support li {
      padding: 0 4px;
  }

  .row-1-upper .payment_support li img {
      height: 13px;
  }

  .row-1-upper .head-banner-container-1111 {
      width: 100%;
      background-image: url("/static/images/banner_1111Sale_mobile.png");
      background-position: center;
      height: 50px;
      margin-top: 54px;
  }

  .row-1-upper .head-banner-container-1111 + article h1 {
      margin-top: 20px;
  }

  .row-1-upper .head-banner-container-1212 {
      width: 100%;
      background-image: url("/static/images/banner_1212Sale_mobile.png");
      background-position: center;
      height: 50px;
      margin-top: 54px;
  }

  .row-1-upper .head-banner-container-1212 + article h1 {
      margin-top: 20px;
  }

  /*------------------------- row 1 lower -------------------------*/

  .container-fluid.row-1-lower {
      height: 540px;
      margin-top: -30px;
  }

  .banner-element {
      height: 540px;
  }

  .banner-element.no-mobile {
      display: none;
  }

  .character-flying {
     /* background-position: -810px -50px;*/
      background-position: 110% -40px;
  }

  .character-on-floor {
      background-position: 60% 60%;
      background-size: auto 133%;
  }

  .banner-mobile-screens {
      background-image: url("/static/images/banner-mobile-screens@2x.png");
      display: block;
  }

  .banner-mobile-devices {
      background-image: url("/static/images/banner-mobile-devices@2x.png");
      display: block;
  }

  .banner-screens, .character-blue-sword, .banner-macbook, .character-red-sword, .banner-ios-mobile, .banner-mac, .banner-android-mobile, .character-long-hair {
      display: none;
  }

  .light-ray-bg {
      opacity: 1;
    animation: lightrayanimation 2s infinite;
    background-size: 150%;
}
  .light-ray-bg-2 {
      opacity: 1;
    animation: lightrayanimation 2s infinite;
    background-size: 150%;
}

  @keyframes lightrayanimation {
      0% {
          background-size: 150%
          opacity: 1;
      }

      100% {
          background-size: 200%;
          opacity: 0;
      }

  }
  /*------------------------- row 2 -------------------------*/

  .row-2 .container article {
      margin: 0 30px;
      padding: 28px 32px;
  }

  .row-2 article:before {
      width: 34px;
      height: 17px;
      right: -14px;
  }

  .row-2 article:after {
      width: 34px;
      height: 17px;
      left: -14px;
  }

  .row-2 p {
      font-size: 13px;
  }

  /*------------------------- row 3 -------------------------*/

  .row-3 .container {
      padding: 0 15px;
  }

  .row-3 article {
      width: 100%;
      text-align: center;
      margin-left: 0;
  }

  .row-3 aside {
      width: 100%;
  }

  .row-3 .container {
      flex-direction: column;
  }

  .row-3 h2 {
      font-size: 20px;
  }

  .row-3 .number-2 {
      font-size: 35px;
  }

  .row-3 p {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4px;
  }

  .row-3 aside {
      margin-top: 20px;
  }

  .row-3 .signup_character {
      bottom: 10px;
  }

  .row-3 .signup_ui {
      max-width: 500px;
  }

  /*------------------------- row 4 -------------------------*/

  .row-4 {
      padding: 60px 15px 35px;
  }

  .row-4 .feature-list {
      width: 100%;
  }

  .row-4 .feature-item .feature-icon {
      width: 50px;
      height: 50px;
      background-position: top;
      margin-top: -8px
  }

  .row-4 .feature-item .feature-content {
      margin-left: 8px;
      width: calc( 100% - 42px);
      padding-right: 10px;
  }

  .row-4 .feature-list li {
      margin-right: 0px;
      width: calc( 50% - 0px);
      margin-bottom: 25px;
      align-items: flex-start;
  }

  .row-4 .feature-list li p {
      font-size: 11px;
  }

  .row-4 h4 {
      font-size: 13px;
  }

  /*------------------------- row 5 -------------------------*/

  .row-5 {
      padding: 60px 15px 20px;
      overflow: hidden;
  }

  .row-5 .container {
      padding: 0;
      width: 100%;
      flex-direction: column;
  }

  .row-5 article {
      width: 100%;
      text-align: center;
      margin-bottom: 30px;
  }

  .row-5 aside {
      width: 100%;
  }

  .row-5 .route-list {
      display: none;
  }

  .row-5 .number-100 {
      font-size: 32px;
  }

  .row-5 .route-map {
      width: 430.8px;
      margin-left: 0;
  }

  /*------------------------- row 6 -------------------------*/

  .row-6 {
      background-image: url("/static/images/game_bg@2x.jpg");
      padding-bottom: 180px;
  }

  .row-6 .container {
      padding: 0 15px;
  }

  .row-6 .p-1 {
      font-size: 18px;
  }

  .iplc-label {
      width: 48px;
  }

  .row-6 .p-2 {
      font-size: 28px;
  }

  .ms-label {
      width: 90px;
      margin-left: 6px;
  }

  .row-6 .p-3 {
      font-size: 14px;
  }

  /*------------------------- row 7 -------------------------*/

  .row-7 {
      padding: 60px 15px;
  }

  .row-7 h2 {
      text-align: center;
  }

  .row-7 p {
      font-size: 14px;
      text-align: center;
  }

  .row-7 .media-pf-container {
      padding-left: 0;
  }

  .row-7 .media-pf-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  .row-7 .media-item {
      width: 23.5%;
      margin-right: 3px;
  }

  .row-7 .media-item:nth-child(5) {
      margin-left: 11.7%;
  }

  .row-7 .media-character {
      max-width: 75px;
      max-height: 210px;
      width: 16%;
      height: 230px;
      left: 5px;
  }

  .row-7 .media-item .blue-tick {
      min-width: 45px;
      min-height: 45px;
      width: 50%;
      height: 70px;
  }


  /*------------------------- row 8 -------------------------*/

  .row-8 {
      padding: 0 15px;
      background-image: linear-gradient(#f0f5f8, #e2ebf1);
  }

  .row-8 .container {
      flex-direction: column;
  }

  .row-8 article {
      width: 100%;
      padding-left: 0;
      text-align: center;
      margin-bottom: 30px;
      margin-top: 60px;
  }

  .row-8 .number-3 {
      font-size: 32px;
      line-height: 45px;
  }

  .row-8 p {
      font-size: 14px;
  }

  .row-8 ul li {
      width: 30px;
      height: 30px;
  }

  .row-8 aside {
      width: 400px;
  }

  .row-8 .characters {
      background-size: 400px;
      background-repeat: no-repeat;
      background-position: top center;
      margin-top: 0;
  }

  .row-8 .characters:after {
      padding-bottom: 312px;
  }

  .row-8 .signal-l {
      width: 144px;
      left: 51px;
      top: 0px;
  }

  .row-8 .signal-m {
      width: 105px;
      left: 193px;
      top: 0px;
  }

  .row-8 .signal-r {
      width: 210px;
      left: unset;
      right: -23px;
      top: 40px;
  }

  /*------------------------- row 9 -------------------------*/

  .row-9 {
      padding: 60px 0;
  }

  .row-9 p {
      font-size: 14px;
      padding: 0 15px;
  }

  .row-9 .app-carousel .apps-display {
      background-image: url("/static/images/apps_full@2x.jpg");
      background-size: 960px;
      height: 188px;
  }

  /*------------------------- row 10 -------------------------*/

  .row-10 {
      padding: 60px 15px;
  }

  .row-10 p {
      font-size: 14px;
  }

  .row-10 .flow-list {
      width: 100%;
  }

  .row-10 .flow-item {
      margin-bottom: 20px;
  }

  .row-10 .flow-number {
      width: 75px;
      height: 75px;
      margin-right: 10px;
  }

  .row-10 .content-container {
      width: calc( 100% - 160px );
      padding-right: 5px;
  }

  .row-10 .content-container .list-title {
      font-size: 14px;
  }

  .row-10 .content-container p {
      font-size: 13px;
  }

  .row-10 .timer {
      font-size: 12px;
      width: 65px;
  }

  .row-10 .timer .time {
      font-size: 18px;
      margin: 0 2px;
  }

  /*------------------------- row 11 -------------------------*/

  .row-11 {
      padding: 60px 0;
  }

  .row-11 .plan-box {
      position: relative;
  }

  .row-11 .plan-list {
      flex-direction: column;
      padding: 0 15px;
      margin-bottom: 15px;
  }

  .row-11 .plan-list .plan-item {
      width: 100%;
      max-width: 500px;
      margin-left: auto;
      margin-bottom: 25px;
      margin-right: auto;
  }

  .row-11 .plan-list li:last-child {
      margin-right: auto;
  }

  .row-11 .plan-content {
      padding: 15px 20px;
      margin-top: 0;
      text-align: left;
  }

  .row-11 .plan-description {
      padding: 0;
      margin-top: 4px;
      min-height: unset;
  }

  .row-11 .plan-character {
      position: absolute;
      background-position: 190px 40px;
      bottom: 0;
      right: 0;
      width: 350px;
  }

  .row-11 .plan-title {
      font-size: 22px;
  }

  .row-11 h3 {
      margin-bottom: 15px;
      font-size: 15px;
  }

  .row-11 .plan-detail {
      margin-top: 10px;
      padding: 0;
  }

  .row-11 .plan-content-item {
      margin-bottom: 0;
  }

  .row-11 .from-price {
      margin-top: 10px;
  }

  .row-11 .tips {
      font-size: 13px;
  }

  .row-11 .payment_support li {
      padding: 0 4px;
  }

  .row-11 .payment_support li img {
      height: 12px;
  }

  .row-11 .remarks {
      padding: 0 15px;
  }

  .row-11 .signup_button {
      width: 175px;
  }

  .row-11 .payment_support span {
      vertical-align: top;
      font-size: 12px;
  }

  /*------------------------- row 12 -------------------------*/

  .row-12 {
      padding: 60px 15px;
  }

  .row-12 ul {
      width: 100%;
      margin-bottom: 30px;
  }

  .row-12 .q-item .question {
      padding: 20px 30px;
  }

  .row-12 .q-item .question h3 {
      font-size: 14px;
  }

  .row-12 .q-item .question .plus-icon {
      width: 30px;
      height: 30px;
      margin-top: -2.5px;
      margin-right: -10px;
  }

  .row-12 .go-to-faq {
      font-size: 16px;
      line-height: 42px;
      width: 150px;
  }

  .row-12 .q-item {
      margin-bottom: 15px;
  }

  /*------- inner page row 12 -------*/

  .row-12.inner-page {
      padding: 30px 15px;
  }

  .row-12.inner-page .container {
      margin: auto;
      padding: 0;
      width: 100%;
      max-width: 600px;
  }

  .row-12.inner-page .container ul {
      margin: auto;
  }


  /*------------------------- row 13 -------------------------*/

  .row-13 {
      padding: 60px 15px;
  }

  .row-13 .container{
      flex-direction: column;
  }

  .row-13 article {
      width: 100%;
      padding: 0;
      text-align: center;
  }

  .row-13 aside {
      width: 100%;
      margin-top: 30px;
  }

  .row-13 aside .backend_screen {
      height: auto;
  }

  .row-13 p {
      font-size: 14px;
  }

  .row-13 .button {
      width: 150px;
  }

  .row-13 .function-list {
      display: none;
  }

  /*------------------------- row 14 -------------------------*/

  .row-14 {
      padding: 60px 15px 20px;
  }

  .row-14 .container {
      flex-direction: column-reverse;
  }

  .row-14 aside {
      width: 100%;
  }

  .row-14 article {
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
  }

  .row-14 .privacy_protection {
      width: 90%;
      margin: auto;
      max-width: 400px;
  }

  .row-14 article p {
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
  }

  /*------------------------- row 15 -------------------------*/

  .row-15 {
      padding: 40px 0;
  }

  .row-15 .logo-carousel .partner-logo-display {
      background-size: 720px;
      height: 145px;
  }

  /*------------------------- row 16 -------------------------*/

  .row-16 {
      padding: 0;
  }

  .row-16 .container {
      flex-direction: column;
      padding: 0;
      width: 100%;
  }

  .row-16 article {
      width: 100%;
      padding: 60px 15px 10px;
      box-sizing: border-box;
  }

  .row-16 h2 {
      text-align: center;
  }

  .row-16 p {
      text-align: center;
  }

  .row-16 aside {
      width: 100%;
      margin-top: 10px;
  }

  .row-16 .fourk-label {
      width: 60px;
  }

  .row-16 aside .fourk-screen {
      background-image: url("../image/4k_screen@2x.png");
  }

  /*------------------------- row 17 -------------------------*/
  .row-17 {
      padding: 50px 0;
  }

  .row-17 h2 {
      margin-bottom: 15px;
  }

  .row-17 h3 {
      font-size: 14px;
  }

  .row-17 .download-item-container {
      margin: 0 0 16px;
      width: 80%;
      padding: 15px 20px;
      justify-content: center;
  }

  .row-17 .download-item-container .download-item-thumbnail {
      width: 85px;
      min-width: 85px;
      max-width:85px;
      height: 85px;
      margin-right: 15px;
  }

  .row-17 .download-item-container .download-item-text {
      min-width: 200px;
  }

  .row-17 .download-item-container .title {
      font-size: 15px;
  }

  .row-17 .download-item-container .button {
      font-size: 13px;
      line-height: 34px;
      width: 182px;
      margin-top: 4px;
  }

  .row-17 .download-item-container .remark {
      font-size: 12px;
  }

  /*------------------------- footer -------------------------*/

  footer .container {
      padding: 50px 15px;
  }

  footer p {
      font-size: 12px;
  }

  .footer .social-media-container {
      display: block;
      position: relative;
      top: unset;
      right: unset;
      margin-bottom: 0;
      margin-top: 20px;
  }

  .footer-links {
      margin-top: 30px;
      margin-bottom: 35px;
  }

  .footer-links a {
      display: block;
      margin-right: 0;
      margin-bottom: 25px;
  }

  .footer-logo-container .footer-logo {
      width: 130px;
      height: 20px;
  }

  /*------------------------- gradient main top -------------------------*/

  .gradient-main-top {
      padding-top: 114px;
  }

  .gradient-main-top:after {
      width: 170px;
      height: 135px;
      right: 10px;
  }


}


/*--===============================================================--*/
/*--=========================== others ===========================--*/
/*--===============================================================--*/

@media (max-width: 400px){
  .row-5 .route-map {
      transform: scale(0.8);
      margin-left: -45px;
      transform-origin: top;
  }
}