@media screen and (min-width: 1440px) {
    body {
        width: 100vw;
        margin: 0;
        overflow: initial;
        background-color: var(--gr4);
    }
    
    header {
        width: 100%;
        height: 60px;
        position: fixed;
        z-index: 3;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        opacity: 0.95;
    }
    
    header .logo img {
        width: auto;
        height: 50px;
        margin: 5px 0;
    }
    
    header .logo {
        position: absolute;
        left: 13%;
    }

    .hamburger,
    .hamburger-close {
        display: none;
    }
    
    header .tab-box {
        position: absolute;
        right: 13%;
    }
    
    header .tab {
        height: 22px;
        
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        text-align: center;
        color: var(--w);
        text-decoration: none;
        -moz-text-decoration: none;
        margin: 18px 32px 18px 0;
        display: block;
        float: left;
    }
    
    .banner,
    .foot-banner {
        width: 100%;
        height: auto;
        background-color: rgba(56, 59, 83, 0.5);
    }

    .carousel-inner > .item > div {
        width: 100%;
        height: 52.77vw;
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
    }

    #banner-arrow {
        width: 50px;
        height: 100px;
        z-index: 1;
    }

    #banner-arrow img {
        width: 50px;
        height: 100px;
    }

    .carousel-inner > .item > #banner-img-1 {
        background-image: url("./image/1440/img_background_omni_1440.png");
    }

    .carousel-inner > .item > #banner-img-2 {
        background-image: url("./image/1440/img_background_rocket_1440.png");
    }

    .carousel-inner > .item > #banner-img-3 {
        background-image: url("./image/1440/img_background_sunwave_1440.png");
    }

    .carousel-inner > .item > #banner-img-4 {
        background-image: url("./image/1440/img_background_business_promote_1440.png");
    }

    .carousel-inner > .item > #banner-img-5 {
        background-image: url("./image/1440/img_background_teamleader_1440.png");
    }

    .carousel-inner > .item > #banner-img-6 {
        background-image: url("./image/1440/img_background_brand1_1440.png");
    }

    .carousel-inner > .item > #banner-img-7 {
        background-image: url("./image/1440/img_background_brand2_1440.png");
    }

    .carousel-inner > .item > #banner-img-8 {
        background-image: url("./image/1440/img_background_brand3_1440.png");
    }
    
    #myCarousel .carousel-left-arrow {
        position: absolute;
        left: 0;
        top: calc(50% - 50px);
    }
    
    #myCarousel .carousel-right-arrow {
        position: absolute;
        right: 0;
        top: calc(50% - 50px);
    }
    
    .carousel-indicators .active {
        width: 15px;
        height: 8px;
        border-radius: 4px;
        background-color: var(--m2);
    }
    
    .carousel-indicators li {
        width: 8px;
        height: 8px;
        background-color: var(--gr4);
        border: none;
    }
    
    .banner {
        position: relative;
        background-color: rgba(56, 59, 83, 0);
    }
    
    .banner-dialog {
        width: 620px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 45%;
        z-index: 1;
    }
    
    .banner-dialog h1 {
        width: 620px;
        height: 67px;
        font-size: 48px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1.18px;
        color: var(--w);
    }
    
    .banner-dialog h2 {
        width: 620px;
        height: 100px;
        font-size: 36px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.89px;
        color: var(--w);
        margin-bottom: 30px;
    }
    
    .sign {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        text-align: center;
        color: var(--w);
        width: 138px;
        height: 42px;
        border-radius: 25px;
        background-image: linear-gradient(to bottom, var(--r1), var(--o1) 196%);
        display: block;
        line-height: 43px;
        text-decoration: none;
        float: left;
        margin-left: 15px;
    }

    .sign:hover {
        color: var(--w);
        box-shadow : 0 0 4px 0 var(--gr3);
        background-image: linear-gradient(to bottom, var(--r1), var(--o1) 300%);
        text-decoration: none;
    }
    
    .banner-dialog .video {
        width: 44px;
        height: 44px;
        object-fit: contain;
        float: left;
        margin-left: 20px;
        cursor: pointer;
    }
    
    .banner-dialog .video img {
        width: inherit;
        height: inherit;
    }
    
    .section {
        width: 100%;
        max-width: 1440px;
        overflow: hidden;
        margin: auto;
        position: relative;
    }
    
    .content {
        width: 1040px;
        margin: auto auto 97px;
        overflow: hidden;
    }
    
    .content h3 {
        height: 50px;
        font-size: 36px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.89px;
        text-align: center;
        color: var(--m1);
        margin-top: 70px;
        margin-bottom: 20px;
    }
    
    .content h4 {
        height: 33px;
        font-size: 24px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: center;
        color: var(--m1);
    }
    
    #background-a {
        background-image: url("./image/1440/img_bgc_intro.png");
        -moz-background-size: 1040px auto;
        -webkit-background-size: 1040px auto;
        -o-background-size: 1040px auto;
        background-size: 1040px auto;
        background-repeat: no-repeat;
    }
    
    .block-1 {
        width: 300px;
        height: 294px;
        float: left;
        margin-top: 50px;
    }
    
    #mid {
        margin: 50px 65px 0;
    }
    
    .block-1 p {
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: center;
        color: var(--gr1);
    }
    
    .block-1 #show {
        font-size: 20px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: center;
        color: var(--m1);
        margin-bottom: 20px;
    }

    .block-1 #show #under-1,
    .block-1 #show #under-2,
    .block-1 #show #under-3 {
        width: 110px;
        height: 6px;
        border-radius: 3.5px;
        margin: auto;
        margin-top: -7px;
    }

    .block-1 #show #under-1 {
        background-color: rgba(254, 185, 18, 0.5);
    }

    .block-1 #show #under-2 {
        background-color: rgba(241, 96, 113, 0.5);
    }

    .block-1 #show #under-3 {
        background-color: rgba(23, 190, 187, 0.5);
    }
    
    .block-1 img {
        width: 80px;
        height: auto;
        display: block;
        margin: auto;
    }
    
    .block-1 #event {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: center;
        color: var(--m1);
        margin-top: 20px;
    }

    #sign-custom-1 {
        margin-left: 451px;
    }
    
    #background-b {
        width: 1060px;
        height: 623px;
        border-radius: 0 80px 80px 0;
        background-color: #f3f3f3;
        margin-bottom: 97px;
        padding: 70px 0 0 195px;
    }

    #background-b .info img {
        width: 50px;
        height: auto;
    }

    #background-b .info h2 {
        font-size: 36px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.89px;
        text-align: left;
        color: var(--m1);
        margin: 20px 0;
    }

    #background-b .info p {
        font-size: 24px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: left;
        color: var(--m1);
    }
    
    #background-c {
        background-image: url("./image/1440/img_bgc_figames_life.png");
        -moz-background-size: 520px auto;
        -webkit-background-size: 520px auto;
        -o-background-size: 520px auto;
        background-size: 520px auto;
        background-repeat: no-repeat;
        background-position-y: 22px;
        overflow: hidden;
    }

    .block-2 {
        width: 320px;
        height: 300px;
        float: left;
        margin: 200px 0 0 65px;
        display: block;
    }
    
    .block-2-1440 {
        width: 320px;
        height: 300px;
        float: left;
        margin: 195px 75px 230px 135px;
        display: block;
    }

    .block-2 img,
    .block-2-1440 img {
        width: 50px;
        height: auto;
    }

    .block-2-375,
    .block-3-375 {
        display: none;
    }
    
    .block-2 h3,
    .block-2-1440 h3,
    .block-3-1440 h3 {
        width: 245px;
        font-size: 36px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.89px;
        color: var(--m1);
        margin-top: 20px;
    }

    .block-2 a {
        margin-top: 30px;
    }
    
    .block-2 p,
    .block-2-1440 p,
    .block-3-1440 p {
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        color: var(--gr1);
        margin-top: 20px;
    }

    .block-3-1440 p {
        color: var(--m1);
    }
    
    .block-3-1440 {
        width: 805px;
        height: 423px;
        float: left;
        margin: 160px 0 60px 100px;
        display: block;
    }
    
    .block-3-1440 .title {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 40px auto 30px 60px;
        float: left;
    }

    .block-3-1440 .gif {
        width: 320px;
        height: 320px;
        float: left;
    }

    .block-3-1440 .content {
        width: 480px;
        height: 320px;
        float: left;
        margin: 0;
    }
    
    .block-3-1440 img {
        width: 320px;
        height: 320px;
        float: left;
        margin: 5px;
        margin-top: 12px;
    }
    
    .block-3-1440 .title img {
        width: 30px;
        height: auto;
        float: left;
        margin: 0;
        margin-right: 5px;
    }
    
    .block-3-1440 .title h4 {
        width: 100%;
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: left;
        color: var(--m1);
        float: left;
        padding: 0;
        margin: 9px 0 20px;
    }

    .block-3-1440 .title #under-1,
    .block-3-1440 .title #under-2 {
        width: 70px;
        height: 6px;
        border-radius: 3.5px;
        margin: -6px 35px;
    }
    .block-3-1440 .title #under-1 {
        background-color: rgba(254, 185, 18, 0.5);
    }
    .block-3-1440 .title #under-2 {
        background-color: rgba(23, 190, 187, 0.5);
    }

    .block-3-1440 .title p {
        width: 100%;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: left;
        color: var(--gr1);
        float: left;
        padding: 0;
        margin: 0;
    }

    #sign-custom-2 {
        display: none;
    }

    .block-3-1440 .slogan {
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: center;
        color: var(--gr1);
        display: inline-block;
        margin-top: 113px;
        padding-left: 55px;
    }


    .block-3-1440 .slogan::before {
        content: '“\00A0';
        color: var(--m2);
    }

    .block-3-1440 .slogan::after {
        content: '\00A0”';
        color: var(--m2);
    }

    .captain-list-375 {
        display: none;
    }
    
    .captain-list-1440 {
        width: 750px;
        margin: 158px 0 126px 150px;
        float: left;
        display: block;
    }
    
    .captain-list-1440 img {
        margin: 30px 40px 20px;
        border-radius: 50%;
    }
    
    .captain-1,
    .captain-2,
    .captain-3 {
        width: 215px;
        height: 307px;
        margin: auto 0px;
        float: left;
        position: relative;
        cursor: pointer;
    
    }
    
    .captain-1:hover img,
    .captain-2:hover img,
    .captain-3:hover img{
        box-shadow: 2px 2px 8px 0 var(--gr3);
    }
    
    #captain-background {
        position: absolute;
        top: 76px;
        right: 0;
    }
    
    .captain-list-1440 h4 {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: center;
        color: var(--m1);
        margin: 0 25px;
    }
    
    .captain-list-1440 p {
        font-size: 16px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        text-align: center;
        color: var(--m1);
        margin: 10px 25px;
        padding-bottom: 10px;
    }
    
    #background-d {
        background-image: url("./image/1440/img_bgc_leader.png");
        -moz-background-size: 700px auto;
        -webkit-background-size: 700px auto;
        -o-background-size: 700px auto;
        background-size: 700px auto;
        background-repeat: no-repeat;
        background-position: 163px 250px;
        overflow: initial;
        height: 700px;
        margin-bottom: 150px;
    }
    
    .captain-list-1440 #arrow {
        width: 40px;
        height: auto;
        border-radius: 50%;
        box-shadow: 2px 2px 8px 0 var(--gr5);
        float: left;
        margin: 185px 0 0;
    }
    
    .block-4 {
        width: 928px;
        height: 162px;
        margin: auto auto 42px;
        overflow: hidden;
        /* background-image: url("./image/1440/img_bgc_join_leader.png");
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat; */
        object-fit: contain;
        border-radius: 40px;
        box-shadow: 2px 2px 8px 0 #e3e3e3;
        background-color: var(--w);
        position: relative;
    }
    
    .block-4 h3 {
        width: 100%;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: center;
        color: var(--m1);
        margin-top: 40px;
    }

    .block-4 h3::before {
        content: '“\00A0';
        color: var(--t1);
    }

    .block-4 h3::after {
        content: '\00A0”';
        color: var(--t1);
    }
    
    .sign-captain {
        width: 98px;
        height: 36px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 36px;
        letter-spacing: 0.35px;
        text-align: center;
        color: var(--m1);
        border-radius: 25px;
        border: solid 1px var(--m1);
        margin: 20px auto;
        display: block;
    }

    .sign-captain:hover {
        color: var(--w);
        border: solid 1px var(--m1);
        background-color: var(--m1);
        text-decoration: none;
    }

    #background-e {
        background-image: url("./image/1440/img_bgc_line_chart.png");
        -moz-background-size: 745px auto;
        -webkit-background-size: 745px auto;
        -o-background-size: 745px auto;
        background-size: 745px auto;
        background-repeat: no-repeat;
        background-position: right bottom;
        overflow: hidden;
    }
    
    .block-5 {
        width: 475px;
        overflow: hidden;
        margin: 60px auto 0 835px;
        padding-bottom: 45px;
    }

    #background-e #icon-1440 {
        width: 50px;
        height: auto;
        display: block;
    }

    #background-e #icon-375 {
        display: none;
    }
    
    .phones {
        width: 650px;
        height: auto;
        margin-left: 150px;
        position: absolute;
        top: -45px;
        z-index: 1;
    }
    
    .block-5 h2 {
        font-size: 36px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.89px;
        color: var(--m1);
        margin: 16px auto 40px;
    }

    #background-e #title-1440 {
        display: block;
    }

    #background-e #title-375 {
        display: none;
    }
    
    .block-5 li {
        list-style: none;
        margin: 40px 0;
        overflow: hidden;
    }
    
    .block-5 li h3 {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 29px;
        letter-spacing: 0.59px;
        color: var(--m1);
        margin: 0 0 10px 0;
        float: left;
    }

    .block-5 li h3 img {
        width: 25px;
        height: auto;
    }

    .block-5 #app_download_ios {
        width: 120px;
        height: auto;
        margin: 0 10px;
    }

    .block-5 #app_download_googleplay {
        width: 135px;
        height: auto;
        margin: 0 10px;
    }
    
    .block-5 li p {
        width: 100%;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        color: var(--gr1);
        margin-left: 35px;
        float: left;
    }
    
    #background-f {
        background-image: url("./image/1440/img_bgc_device.png");
        -moz-background-size: 745px auto;
        -webkit-background-size: 745px auto;
        -o-background-size: 745px auto;
        background-size: 745px auto;
        background-repeat: no-repeat;
        background-position: center top;
        overflow: hidden;
    }
    
    #title-2 {
        font-size: 32px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.79px;
        text-align: center;
        color: var(--m1);
        margin: 70px auto 20px;
    }
    
    #subtitle-2 {
        font-size: 24px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: center;
        color: var(--m1);
        margin: 10p;
    }
    
    .game {
        margin: 20px auto 10px;
        display: table;
    }
    
    .tec {
        margin: 20px auto 30px;
        display: table;
    }
    
    .game img,
    .tec img {
        width: 100px;
        height: auto;
        margin: 10px;
    }
    
    .pay {
        width: 400px;
        margin: 90px 276px 90px 205px;
        float: left;
    }

    .pay #easycard-logo {
        width: 150px;
        height: auto;
    }

    #easycard {
        width: 324px;
        height: auto;
        margin: 90px auto;
    }
    
    .pay h4 {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        color: var(--m1);
        margin: 20px auto 10px;
    }
    
    .pay p {
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        color: var(--gr1);
        margin: 10px auto;
    }
    
    #background-g {
        background-image: url("./image/1440/img_bgc_easycard.png");
        -moz-background-size: 670px auto;
        -webkit-background-size: 670px auto;
        -o-background-size: 670px auto;
        background-size: 670px auto;
        background-repeat: no-repeat;
        background-position: right bottom;
        overflow: hidden;
    }
    
    #background-h {
        background-image: url("./image/1440/img_footer_bgc.png");
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        overflow: hidden;
        height: 0;
        padding-bottom: 24%;
    }
    
    .foot-banner h1 {
        font-size: 48px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1.18px;
        text-align: center;
        color: var(--w);
        margin-top: 5.5%;
        margin-bottom: 1.38%;
    }
    
    .foot-banner h3 {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        text-align: center;
        color: var(--w);
        margin-bottom: 1.38%;
    }
    
    .foot-banner .mask {
        width: 100%;
        height:0;
        padding-bottom:24%;
        background-color: rgba(56, 59, 83, 0.5);
        overflow: hidden;
    }

    #sign-custom-3 {
        margin: 2.76% auto;
        float: unset;
    }
    
    footer {
        width: 100%;
        height: 270px;
        overflow: hidden;
        text-decoration: none;
        background-color: var(--w);
    }
    
    footer .footer-logo {
        width: 300px;
        margin: 52px 13.9% 52px 9.4%;
        float: left;
    }
    
    footer div {
        width: 600px;
        float: right;
        margin: 63px 14% 29px auto;
    }
    
    footer div ul {
        padding: 0;
    }
    
    footer div ul li {
        display: inline-block;
    }
    
    footer li {
        width: 210px;
    }
    
    footer p {
        margin-top: 43px;
    }
    
    footer a,
    footer a:hover {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        text-decoration: none;
        color: var(--m1);
    }
    
    footer p {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.35px;
        color: var(--gr2);
    }
    
    footer .footer_icon {
        margin: 0;
    }
    
    footer .footer_icon img {
        width: 30px;
        height: auto;
    }

    .carousel-375 {
        display: none;
    }

    .carousel-games {
        width: 580px;
        height: 240px;
        margin-top: 60px;
    }

    .carousel-games-title {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: left;
        color: var(--gr1);
        margin-bottom: 40px;
    }

    .carousel-games .game {
        width: 125px;
        height: 125px;
        padding: 0 20px;
        float: left;
        cursor: pointer;
    }

    .game div {
        width: 85px;
        height: 85px;
        max-height: 85px;
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
    }

    .game p {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        color: var(--m1);
        text-align: center;
        margin-top: 10px;
    }

    #carouselGames {
        position: relative;
    }

    #carouselGames > .carousel-inner > .item > div {
        padding: 0 40px;
    }

    #carouselGames .carousel-left-arrow,
    #carouselGames .carousel-right-arrow {
        position: absolute;
        top: calc(50% - 10px);
    }

    #carouselGames .carousel-left-arrow {
        left: 0;
    }

    #carouselGames .carousel-right-arrow {
        right: 0;
    }

    #carouselGames > .carousel-inner > .item > div {
        width: 100%;
        height: 100%;
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
    }

    #game-carousel-arrow {
        width: 20px;
        height: 20px;
        z-index: 1;
    }

    #game-carousel-arrow img {
        width: 20px;
        height: 20px;
    }

    #game-0  div{
        background-image: url("./image/1440/icon_category_default_jump_rope.png");
    }

    #game-0.hover  div{
        background-image: url("./image/1440/icon_category_hover_jump_rope.png");
    }

    #game-0.active  div{
        background-image: url("./image/1440/icon_category_active_jump_rope.png");
    }

    #game-1  div{
        background-image: url("./image/1440/icon_category_default_running.png");
    }

    #game-1.hover  div{
        background-image: url("./image/1440/icon_category_hover_running.png");
    }

    #game-1.active  div{
        background-image: url("./image/1440/icon_category_active_running.png");
    }

    #game-2  div{
        background-image: url("./image/1440/icon_category_default_flywheel.png");
    }

    #game-2.hover  div{
        background-image: url("./image/1440/icon_category_hover_flywheel.png");
    }

    #game-2.active  div{
        background-image: url("./image/1440/icon_category_active_flywheel.png");
    }

    #game-3  div{
        background-image: url("./image/1440/icon_category_default_stepper.png");
    }

    #game-3.hover  div{
        background-image: url("./image/1440/icon_category_hover_stepper.png");
    }

    #game-3.active  div{
        background-image: url("./image/1440/icon_category_active_stepper.png");
    }

    #game-4  div{
        background-image: url("./image/1440/icon_category_default_basketball.png");
    }

    #game-4.hover  div{
        background-image: url("./image/1440/icon_category_hover_basketball.png");
    }

    #game-4.active  div{
        background-image: url("./image/1440/icon_category_active_basketball.png");
    }

    #game-5  div{
        background-image: url("./image/1440/icon_category_default_soccer.png");
    }

    #game-5.hover  div{
        background-image: url("./image/1440/icon_category_hover_soccer.png");
    }

    #game-5.active  div{
        background-image: url("./image/1440/icon_category_active_soccer.png");
    }

    #game-6  div{
        background-image: url("./image/1440/icon_category_default_tennis.png");
    }

    #game-6.hover  div{
        background-image: url("./image/1440/icon_category_hover_tennis.png");
    }

    #game-6.active  div{
        background-image: url("./image/1440/icon_category_active_tennis.png");
    }

    #game-7  div{
        background-image: url("./image/1440/icon_category_default_muscle.png");
    }

    #game-7.hover  div{
        background-image: url("./image/1440/icon_category_hover_muscle.png");
    }

    #game-7.active  div{
        background-image: url("./image/1440/icon_category_active_muscle.png");
    }

    #game-8  div{
        background-image: url("./image/1440/icon_category_default_stretching.png");
    }

    #game-8.hover  div{
        background-image: url("./image/1440/icon_category_hover_stretching.png");
    }

    #game-8.active  div{
        background-image: url("./image/1440/icon_category_active_stretching.png");
    }

    #game-9 div {
        background-image: url("./image/1440/icon_category_default_yoga.png");
    }

    #game-9.hover  div{
        background-image: url("./image/1440/icon_category_hover_yoga.png");
    }

    #game-9.active  div{
        background-image: url("./image/1440/icon_category_active_yoga.png");
    }

    #game-10 div {
        background-image: url("./image/1440/icon_category_default_walk.png");
    }

    #game-10.hover  div{
        background-image: url("./image/1440/icon_category_hover_walk.png");
    }

    #game-10.active  div{
        background-image: url("./image/1440/icon_category_active_walk.png");
    }

    #game-11 div {
        background-image: url("./image/1440/icon_category_default_swim.png");
    }

    #game-11.hover  div{
        background-image: url("./image/1440/icon_category_hover_swim.png");
    }

    #game-11.active  div{
        background-image: url("./image/1440/icon_category_active_swim.png");
    }

    .games-area {
        width: 1260px;
        height: 130px;
        overflow-x: hidden;
    }

    .games-info {
        width: 320px;
        height: 116px;
        padding: 10px;
        overflow: hidden;
        margin-right: 40px;
        border-radius: 8px;
        box-shadow: 2px 2px 8px 0 var(--gr5);
        background-color: var(--w);
        float: left;
    }

    .games-info img {
        width: 96px;
        height: 96px;
        float: left;
    }

    .games-info-block {
        width: 195px;
        padding: 0;
        padding-left: 10px;
        float: left;
    }

    .games-info-block #title {
        width: 100%;
        height: 22px;
        font-size: 16px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        color: var(--m1);
        margin: 0;
    }

    .games-info-block #detail {
        width: 100%;
        height: 54px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.35px;
        color: var(--gr1);
        margin: 0;
    }

    .games-info-block #time {
        width: 100%;
        height: 20px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.35px;
        color: var(--gr2);
        margin: 0;
    }

    .games-info-area {
        width: 535px;
        height: 460px;
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("./image/1440/img_rectangle_test_result.png");
        position: absolute;
        top: 60px;
        left: 860px;
        text-align: center;
        padding: 50px 0 50px 20px;
    }

    .games-info-area #game {
        height: 45px;
        font-size: 32px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.79px;
        text-align: center;
        color: var(--m1);
        margin: 0;
    }

    .games-info-area #game img {
        width: 40px;
        height: auto;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .games-info-area #praise {
        width: 440px;
        height: 60px;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.49px;
        text-align: center;
        color: var(--m1);
        margin: 60px auto 50px;
        position: relative;
    }

    .games-info-area #praise #semicolon-left {
        color: var(--r1);
        position: absolute;
        top: 0;
        left: 0;
    }

    .games-info-area #praise #semicolon-right {
        color: var(--r1);
        position: absolute;
        top: 0;
        right: 0;
    }

    .games-info-area #praise #text {
        width: 399px;
        margin: 0 auto 10px;
    }



    .games-info-area #promote {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.39px;
        color: var(--gr2);
        margin-bottom: 10px;
    }

    .games-info-area #promote-game {
        font-size: 24px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.59px;
        color: var(--m1);
        margin-bottom: 30px;
    }

    .games-info-area .sign {
        float: unset;
        margin: auto;
    }

    .video-pop {
        width: 100vw;
        height: 100vh;
        background-color: rgba(8, 7, 13, 0.95);
        display: none;
    }

    .video-pop #media {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-pop #media iframe {
        width: 1040px;
        height: 585px;
    }

    .video-close {
        width: 20px;
        height: auto;
        position: absolute;
        top: 30px;
        right: 30px;
        cursor: pointer;
    }
    
    .video-close img {
        width: 100%;
        height: auto;
    }
}