/*--===============================================================--*/
/*--=================== 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;
    }
}

/*--===============================================================--*/
/*--========================== 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: 22px;
        width: 140px;
    }
    
    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%;
    }
    
    /*------------------------- 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: 120px;
    }
	
	.button2 {
        font-size: 16px;
        /* line-height: 42px;*/
        width: 120px;
    }
    
    /*------------------------- 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_button {
        z-index: 1;
        position: relative;
    }
    
    .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 {
        width: 100%;
        background-image: url("../image/banner_618_mobile.png");
        background-position: center;
        height: 50px;
        margin-top: 54px;
    }
    
    .row-1-upper .head-banner-container + article h1 {
        margin-top: 20px;
    }

    .row-1-upper .head-banner-container-1212 {
        width: 100%;
        background-image: url("../image/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("../image/banner-mobile-screens@2x.png");
        display: block;
    }
    
    .banner-mobile-devices {
        background-image: url("../image/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("../image/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("../image/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");
    }
    
    /*------------------------- 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;
    }
}