@import "regular";

@media screen {

    // Small devices (landscape phones, less than 768px)
    @media (max-width: 767.98px) {
        .ent-image {
            background: linear-gradient(261.71deg, #0075FF 30.84%, #154AF5 93.77%);
            border-radius: 3px;
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            outline: none;
            border: 0;
            padding: 10px 33px;
            float: right;
            width: unset !important;
            margin-left: unset !important;
            margin-top: unset !important;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }

        .ent-play {
            width: 100%;
            border: 0.5px solid #BDBDBD;
            box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 20px;
            position: relative;
            margin: 50px 0 !important;
        }

        .ent-title {
            font-size: 15px;
            font-weight: 600;
            color: #154AF5;
        }

        .ent-hint {
            color: #f00;
            font-size: 15px;
        }

        .welfare {
            & .title-block {
                // background-color: red;

                background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)), url("../img/background/welfare_source.jpg");
            }

            & .welfare_content {
                width: 100%;

                & .nav {
                    width: 90%;
                    margin: 0 auto;

                    & #kgameTab {
                        // font-family: 'SF Pro Display';
                    }

                    & .tab-cust {
                        // font-family: 'PingFang TC';
                        position: relative;
                        width: 49.33%;
                        text-align: center;
                        border: none;
                        padding: 1.8em 0 1em;
                        // margin-right: 10px;
                        color: #4a4a4a;
                        font-size: 1em;
                        // font-family: PingFangSC;
                        font-weight: 600;
                        letter-spacing: normal;

                        & .new-icon {
                            display: block;
                            position: absolute;
                            right: 50%;
                            top: 50%;
                            transform: translate(240%, -30%);
                            font-size: 60%;
                            color: #EB5757;
                        }
                    }

                    & .active {
                        color: @color_deep_gold;

                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 4px;
                            background: @color_deep_gold;
                            border-radius: 5px;
                            bottom: 0px;
                            left: 0;
                        }
                    }
                }

                & .content-box {
                    padding: 1.25em;

                    // font-family: 'PingFang TC';
                    &>div {
                        margin: 0 0 1.875em;
                    }

                    & img {
                        width: 100%;
                    }

                    & .hipay_contact_infobox {
                        padding: 10px;
                        background-color: #E8F7FF;
                        border: 1px solid #AFD7ED;
                        border-radius: 10px;
                        margin-top: 10px;

                        ul,
                        li {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                        }

                        ul li {
                            margin-bottom: 10px;

                            button {
                                & img {
                                    float: none;
                                    width: auto;
                                    height: 20px;
                                    margin: 0 8px 0 0;
                                    font-size: 14px;
                                    vertical-align: sub;
                                }

                                position: relative;
                                top: 6px;
                                width: fit-content;
                                height: 30px;
                                border: none;
                                color: #FFFFFF;
                                padding: 0 15px;
                                font: normal normal 500 14px/28px Helvetica;
                                margin-left: 15px;
                                background-color: #154AF5;
                                cursor: pointer;

                                &:hover {
                                    filter: brightness(0.8);
                                }

                                &:focus {
                                    outline: none;
                                }
                            }
                        }

                        ul li span {
                            font: normal normal 500 16px/24px Helvetica;
                            color: #4F4F4F;
                            vertical-align: bottom;

                            .blue {
                                color: #154AF5;
                                font-weight: normal;
                            }
                        }
                    }

                    & h2 {
                        font-size: 1em;
                        font-weight: 600;
                        margin-top: 0.625em;
                        margin-bottom: 0.9375em;
                        color: #1e1e1e;
                    }

                    p {
                        // font-family: PingFangSC;
                        font-size: 0.9375em;
                        line-height: 1.67em;
                        margin-top: 0.5em;
                    }

                    & .center-btn {
                        // width: 7.1875em;
                        widows: fit-content;
                        height: 2.25em;
                        margin-left: auto;
                        margin-right: 0;
                    }

                    & button {
                        font-size: 0.9375em;

                        & i {
                            font-size: 1em;
                            padding-left: 0.3125em;
                        }
                    }

                    .walfare_choice {
                        & .choice-list-block {
                            & div:nth-child(4) {
                                margin-left: 16%;
                            }

                            & .choice-box {
                                width: 32%;
                                margin: 0;
                                padding: 0;
                                display: inline-block;
                                vertical-align: top;

                                & img {
                                    width: 5em;
                                    display: block;
                                    margin: 0 auto;
                                }

                                & p {
                                    text-align: center;
                                    font-size: 1em;
                                    color: #4a4a4a;
                                }
                            }
                        }
                    }

                    & .contact_info {
                        & p {
                            font-size: 0.875em;
                            line-height: 1.07;
                        }
                    }
                }

                & .kgame_content {

                    // & .kgame-logo {
                    //     width: 250px;
                    //     margin-bottom: 240px;
                    //     margin-left: 25px;
                    // }
                    // & .kgame-des-0 {
                    //     margin-bottom: 25px;
                    // }
                    & .notice {
                        font-size: 0.8em;
                        color: #EB5757;
                        margin-bottom: 20px;
                    }

                    // & .kgame-title-1 {
                    //     margin-top: 50px;
                    // }
                    // & .kgame-des-1 {
                    //     margin-bottom: 20px;
                    // }
                    & .kgame-download-pdf-btn {

                        // margin-bottom: 33px;
                        & button {
                            background: #0038d4;
                            color: #FFFFFF;
                            border: 1px solid #0044ff !important;
                        }
                    }
                }
            }
        }
    }

    // Medium devices (tablets, less than 992px)
    @media (min-width: 768px) and (max-width: 1199.98px) {

        .ent-image {
            background: linear-gradient(261.71deg, #0075FF 30.84%, #154AF5 93.77%);
            border-radius: 3px;
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            outline: none;
            border: 0;
            padding: 10px 33px;
            float: right;
            width: unset !important;
            margin-left: unset !important;
            margin-top: unset !important;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }

        .ent-play {
            width: 100%;
            border: 0.5px solid #BDBDBD;
            box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 20px;
            position: relative;
            margin: 50px 0 !important;
        }

        .ent-title {
            font-size: 21px;
            font-weight: 600;
            color: #154AF5;
        }

        .ent-hint {
            color: #f00;
            font-size: 15px;
        }

        .welfare {
            padding-bottom: 0 !important;

            & .title-block {
                background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)), url("../img/background/welfare_source.jpg");
            }

            & .welfare_content {
                width: 100%;
                text-align: center;
                margin: 45px auto 0;
                padding: 0 2em 1.8em;

                & .nav {
                    & #kgameTab {
                        // font-family: 'SF Pro Display';
                    }

                    & .tab-cust {
                        // font-family: 'PingFang TC';
                        position: relative;
                        border: none;
                        padding: 10px 20px 15px;
                        margin-right: 10px;
                        color: #4a4a4a;
                        font-size: 1.25em;
                        font-weight: 600;
                        letter-spacing: normal;

                        & .new-icon {
                            display: block;
                            position: absolute;
                            right: 0.5em;
                            top: -0.25em;
                            font-size: 60%;
                            color: #EB5757;
                        }
                    }

                    & .active {
                        color: @color_deep_gold;

                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 4px;
                            background: @color_deep_gold;
                            border-radius: 5px;
                            bottom: 0px;
                            left: 0;
                        }
                    }
                }

                & .content-box {
                    padding: 50px;
                    text-align: left;
                    // font-family: 'PingFang TC';

                    &>div {
                        margin: 0 0 60px;
                    }

                    & h2 {
                        font-size: 24px;
                        font-weight: 600;
                        margin-bottom: 20px;
                    }

                    & h3 {
                        font-size: 18px;
                        font-weight: 500;
                        margin-bottom: 30px;
                    }

                    & p {
                        font-size: 18px;
                        font-weight: normal;
                        line-height: 1.94;
                        margin: 0 auto 40px;

                        & a {
                            color: #e54600;
                            cursor: pointer;
                        }
                    }

                    & .center-btn {
                        text-align: center;
                        margin: 20px 0 80px;
                    }

                    & img {
                        width: 290px;
                        float: right;
                        margin-left: 70px;
                        margin-top: 15px;
                    }

                    & .top_banner {
                        width: 100%;
                        float: none;
                        margin: 0 auto 20px;
                    }

                    & .hipay_contact_infobox {
                        padding: 10px 30px 20px;
                        background-color: #E8F7FF;
                        border: 1px solid #AFD7ED;
                        border-radius: 20px;

                        ul,
                        li {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                        }

                        ul li {
                            margin-bottom: 12px;

                            button {
                                & img {
                                    float: none;
                                    width: auto;
                                    height: 25px;
                                    margin: 0 8px 0 0;
                                    vertical-align: sub;
                                }

                                position: relative;
                                top: 6px;
                                width: fit-content;
                                height: 40px;
                                border: none;
                                padding: 0 15px;
                                color: #FFFFFF;
                                font: normal normal 500 16px/36px Helvetica;
                                margin-left: 18px;
                                background-color: #154AF5;
                                cursor: pointer;

                                &:hover {
                                    filter: brightness(0.8);
                                }

                                &:focus {
                                    outline: none;
                                }
                            }
                        }

                        ul li span {
                            font: normal normal 500 21px/24px Helvetica;
                            color: #4F4F4F;
                            vertical-align: bottom;

                            .blue {
                                color: #154AF5;
                                font-weight: normal;
                            }
                        }
                    }

                    & h4,
                    h5,
                    h6 {
                        font-weight: 600;
                        text-align: center;
                        line-height: 1.25;
                        margin: 25px 0;
                    }

                    & h4 {
                        font-size: 28px;
                        color: #ff8800;
                        margin-bottom: 80px;
                    }

                    & h5 {
                        font-size: 28px;
                        color: #c3aa5b;
                    }

                    & h6 {
                        font-size: 24px;
                        font-weight: 500;
                    }

                    & .welfare-flow {
                        & img {
                            width: 100%;
                            margin: 2em 0;
                            float: none;
                        }
                    }

                    & .seven-cai-download-btn {
                        & button {
                            width: fit-content;
                            background-color: #0044ff;
                            font-size: 18px;
                            color: #ffffff;
                        }
                    }

                    .walfare_choice {
                        text-align: left;
                        margin-top: 55px;

                        & .choice-list-block {
                            display: flex;

                            & .choice-box {
                                --w: 100vw;
                                flex: auto;
                                display: inline-block;
                                width: 7em;
                                margin: 1.8em 2em 1.2em;
                                text-align: center;
                                vertical-align: top;

                                &:first-child {
                                    margin-left: 1em;
                                }

                                &:last-child {
                                    margin-right: 1em;
                                }

                                & p {
                                    font-size: 1.2em;
                                    margin: 1em 0;
                                }

                                & img {
                                    width: 100%;
                                    float: unset;
                                    margin: 0;
                                }
                            }
                        }

                        & h2 {
                            font-size: 24px;
                            font-weight: 600;
                            margin: 0 auto;

                            & .more-link {
                                float: right;
                                margin-top: 3px;
                                color: @default_hover_color;
                                font-size: 16px;
                                padding: 10px 0 0;
                                margin-left: -90px;

                                & i {
                                    font-size: 20px;
                                    margin-left: 10px;
                                    vertical-align: middle;
                                }
                            }

                            & .more-link:hover {
                                .no_underline;
                            }
                        }
                    }

                    & .contact_info {
                        margin: 50px 0 0;

                        & p {
                            margin: 20px 0;
                            font-size: 21px;
                            font-weight: 500;
                            line-height: 1.1;

                            & a {
                                .no_underline;
                                color: #0063ff;

                                &:first-child {
                                    cursor: pointer;
                                }
                            }
                        }
                    }

                    & .zoom-image {
                        cursor: zoom-in;
                        display: inline-block;
                        width: 35vw;
                        margin: 40px 20px 10px 0;

                        & img {
                            width: 100%;
                            float: unset;
                            margin: 0;
                        }
                    }

                    & .notice {
                        font-size: 18px;
                        color: #e54600;
                        line-height: 2.56;
                        margin-bottom: 60px;
                    }
                }

                & .kgame_content {
                    & .kgame-logo {
                        width: 250px;
                        margin-bottom: 240px;
                        margin-left: 25px;
                    }

                    & .kgame-des-0 {
                        margin-bottom: 25px;
                    }

                    & .notice {
                        font-size: 14px;
                        color: #EB5757;
                        margin-bottom: 20px;
                    }

                    & .kgame-title-1 {
                        margin-top: 50px;
                    }

                    & .kgame-des-1 {
                        margin-bottom: 20px;
                    }

                    & .kgame-download-pdf-btn {
                        margin-bottom: 33px;

                        & button {
                            background: #0038d4;
                            color: #FFFFFF;
                            border: 1px solid #0044ff !important;
                        }
                    }
                }

                & .software_content {
                    &>img {
                        width: 200px;
                        margin-top: 0;
                    }
                }
            }
        }
    }

    // PC
    // @media (min-width: 768px) {
    // Large devices (desktops, less than 1200px)
    @media (min-width: 1200px) {
        .ent-image {
            background: linear-gradient(261.71deg, #0075FF 30.84%, #154AF5 93.77%);
            border-radius: 3px;
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            outline: none;
            border: 0;
            padding: 10px 33px;
            float: right;
            width: unset !important;
            margin-left: unset !important;
            margin-top: unset !important;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }

        .ent-play {
            width: 630px;
            border: 0.5px solid #BDBDBD;
            box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 30px;
            position: relative;
            margin: 50px 0 !important;
        }

        .ent-title {
            font-size: 24px;
            font-weight: 600;
            color: #154AF5;
        }

        .ent-hint {
            color: #f00;
            font-size: 15px;
        }

        .welfare {
            padding-bottom: 0 !important;

            & .title-block {
                background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)), url("../img/background/welfare_source.jpg");
            }

            & .welfare_content {
                width: @wrap_max_width;
                text-align: center;
                margin: 45px auto 0;
                padding: 0 125px 50px;

                & .nav {
                    & #kgameTab {
                        // font-family: 'SF Pro Display';
                    }

                    & .tab-cust {
                        // font-family: 'PingFang TC';
                        position: relative;
                        border: none;
                        padding: 10px 20px 15px;
                        margin-right: 10px;
                        color: #4a4a4a;
                        font-size: 20px;
                        font-weight: 600;
                        letter-spacing: normal;

                        & .new-icon {
                            display: block;
                            position: absolute;
                            right: 0.5em;
                            top: -0.25em;
                            font-size: 50%;
                            color: #EB5757;
                        }
                    }

                    & .active {
                        color: @color_deep_gold;

                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 4px;
                            background: @color_deep_gold;
                            border-radius: 5px;
                            bottom: 0px;
                            left: 0;
                        }
                    }
                }

                & .content-box {
                    padding: 50px;
                    text-align: left;

                    // font-family: 'PingFang TC';
                    &>div {
                        margin: 0 0 60px;
                    }

                    & h2 {
                        font-size: 24px;
                        font-weight: 600;
                        margin-bottom: 20px;
                    }

                    & h3 {
                        font-size: 18px;
                        font-weight: 500;
                        margin-bottom: 30px;
                    }

                    & p {
                        font-size: 18px;
                        font-weight: normal;
                        line-height: 1.94;
                        margin: 0 auto 40px;

                        & a {
                            color: #e54600;
                            cursor: pointer;
                        }
                    }

                    & .center-btn {
                        text-align: center;
                        margin: 20px 0 80px;
                    }

                    & img {
                        width: 290px;
                        float: right;
                        margin-left: 70px;
                        margin-top: 15px;

                        &.top_banner {
                            float: none;
                            width: 100%;
                            margin: 0 auto 36px;
                        }
                    }

                    & .hipay_contact_infobox {
                        padding: 20px 65px 20px;
                        background-color: #E8F7FF;
                        border: 1px solid #AFD7ED;
                        border-radius: 30px;

                        ul,
                        li {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                        }

                        ul li {
                            margin-bottom: 18px;

                            button {
                                & img {
                                    float: none;
                                    width: auto;
                                    height: 25px;
                                    margin: 0 8px 0 0;
                                    vertical-align: sub;
                                }

                                position: relative;
                                top: 6px;
                                width: fit-content;
                                height: 40px;
                                border: none;
                                padding: 0 15px;
                                color: #FFFFFF;
                                font: normal normal 500 18px/40px Helvetica;
                                margin-left: 22px;
                                background-color: #154AF5;
                                cursor: pointer;

                                &:hover {
                                    filter: brightness(0.8);
                                }

                                &:focus {
                                    outline: none;
                                }
                            }
                        }

                        ul li span {
                            font: normal normal 500 26px/28px Helvetica;
                            color: #4F4F4F;
                            vertical-align: bottom;

                            .blue {
                                color: #154AF5;
                                font-weight: normal;
                            }
                        }
                    }

                    & h4,
                    h5,
                    h6 {
                        font-weight: 600;
                        text-align: center;
                        line-height: 1.25;
                        margin: 25px 0;
                    }

                    & h4 {
                        font-size: 28px;
                        color: #ff8800;
                        margin-bottom: 80px;
                    }

                    & h5 {
                        font-size: 28px;
                        color: #c3aa5b;
                    }

                    & h6 {
                        font-size: 24px;
                        font-weight: 500;
                    }

                    & .welfare-flow {
                        & img {
                            width: 100%;
                            margin: 50px 0;
                            float: none;
                        }
                    }

                    & .seven-cai-download-btn {
                        & button {
                            width: fit-content;
                            background-color: #0044ff;
                            font-size: 18px;
                            color: #ffffff;
                        }
                    }

                    .walfare_choice {
                        text-align: left;
                        margin-top: 55px;

                        & .choice-list-block {
                            & .choice-box {
                                display: inline-block;
                                width: 100px;
                                margin: 50px 35px 20px;
                                text-align: center;
                                vertical-align: top;

                                &:first-child {
                                    margin-left: 20px;
                                }

                                &:last-child {
                                    margin-right: 20px;
                                }

                                & p {
                                    font-size: 20px;
                                    margin: 20px 0;
                                }

                                & img {
                                    width: 100%;
                                    float: unset;
                                    margin: 0;
                                }
                            }
                        }

                        & h2 {
                            font-size: 24px;
                            font-weight: 600;
                            margin: 0 auto;

                            & .more-link {
                                float: right;
                                margin-top: 3px;
                                color: @default_hover_color;
                                font-size: 16px;
                                padding: 10px 0 0;
                                margin-left: -90px;

                                & i {
                                    font-size: 20px;
                                    margin-left: 10px;
                                    vertical-align: middle;
                                }
                            }

                            & .more-link:hover {
                                .no_underline;
                            }
                        }
                    }

                    & .contact_info {
                        margin: 50px 0 0;

                        & p {
                            margin: 20px 0;
                            font-size: 21px;
                            font-weight: 500;
                            line-height: 1.1;

                            & a {
                                .no_underline;
                                color: #0063ff;

                                &:first-child {
                                    cursor: pointer;
                                }
                            }
                        }
                    }

                    & .zoom-image {
                        cursor: zoom-in;
                        display: inline-block;
                        width: 302px;
                        margin: 40px 20px 10px 0;

                        & img {
                            width: 100%;
                            float: unset;
                            margin: 0;
                        }
                    }

                    & .notice {
                        font-size: 18px;
                        color: #e54600;
                        line-height: 2.56;
                        margin-bottom: 60px;
                    }
                }

                & .kgame_content {
                    & .kgame-logo {
                        width: 250px;
                        margin-bottom: 240px;
                        margin-left: 25px;
                    }

                    & .kgame-des-0 {
                        margin-bottom: 25px;
                    }

                    & .notice {
                        font-size: 14px;
                        color: #EB5757;
                        margin-bottom: 20px;
                    }

                    & .kgame-title-1 {
                        margin-top: 50px;
                    }

                    & .kgame-des-1 {
                        margin-bottom: 20px;
                    }

                    & .kgame-download-pdf-btn {
                        margin-bottom: 33px;

                        & button {
                            background: #0038d4;
                            color: #FFFFFF;
                            border: 1px solid #0044ff !important;
                        }
                    }
                }

                & .software_content {
                    &>img {
                        width: 200px;
                        margin-top: 0;
                    }
                }

            }
        }
    }

    .welfare {
        & .nav {
            & .btn-cust {
                & .new-icon {
                    display: block;
                    position: absolute;
                    right: 0.5em;
                    top: 0;
                    font-size: 50%;
                    color: #EB5757;
                }
            }
        }

        & .btn-cust {
            .inner_page_cust_btn_outline;
        }

        & .btn-cust:hover {
            .inner_page_cust_btn_outline_hover;
        }
    }

    .source {
        & .title-block {
            background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)),
                url("../img/background/welfare_source.jpg");
        }

        & p {
            width: 850px;
            padding: 60px 0 80px;
            font-size: 18px;
            font-weight: normal;
            line-height: 2.5;
            margin: 0 auto;
            text-align: left;
        }

        & .source-list {
            margin: 0 auto 60px;
            text-align: center;

            & .source-box {
                display: inline-block;
                width: 180px;
                height: fit-content;
                text-align: center;
                margin: 0 25px;

                & h5 {
                    font-size: 16px;
                    font-weight: 600;
                    color: #4a4a4a;
                }

                & .source-img {
                    display: inline-block;
                    width: 120px;
                    height: 120px;
                    background-image: url("../img/sprite.png");
                    background-repeat: no-repeat;
                }

                & .platform {
                    background-position: -1px -200px;
                }

                & .species {
                    background-position: -121px -200px;
                }

                & .info {
                    background-position: -241px -200px;
                }

                & .guarantee {
                    background-position: -361px -200px;
                }

                & .api {
                    background-position: -481px -200px;
                }

                & p {
                    width: 100%;
                    padding: 0 !important;
                    font-size: 13px;
                    line-height: 1 !important;
                    color: #a0a0a0;
                    text-align: center;
                }
            }
        }

        & .btn-cust {
            .inner_page_cust_btn_outline;
        }

        & .btn-cust:hover {
            .inner_page_cust_btn_outline_hover;
        }
    }

    .choice {
        text-align: center;
        background: #f2f2f2;
        padding: 90px 0 60px;

        & .choice-list-block {
            & .choice-box {
                display: inline-block;
                width: 130px;
                margin: 60px 52px 50px;

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 0;
                }

                & p {
                    font-size: 20px;
                    margin: 20px 0;
                }
            }
        }

        & h2 {
            max-width: 1150px;
            font-size: 36px;
            font-weight: 500;
            margin: 0 auto 40px;
            color: @default_hover_color;

            & .more-link {
                float: right;
                margin-top: 3px;
                color: @default_hover_color;
                font-size: 16px;
                padding: 10px 0 0;
                margin-left: -90px;

                & i {
                    font-size: 20px;
                    margin-left: 10px;
                    vertical-align: middle;
                }
            }

            & .more-link:hover {
                .no_underline;
            }
        }
    }

    .hipay {
        & .title-block {
            background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)),
                url("../img/background/welfare_hipay.jpg");
        }
    }

    .mc_soft {
        & .title-block {
            background-image: linear-gradient(to right, rgba(0, 112, 255, 0.39), rgba(45, 155, 255, 0.32) 29%, rgba(138, 199, 255, 0.18)),
                url("../img/background/welfare_mc.jpg");
        }
    }

    .hipay,
    .mc_soft {
        & .info-block {
            max-width: @wrap_max_width;
            min-height: 370px;
            margin: 0 auto;
            text-align: left;
            padding: 65px 65px 65px 80px;

            & p {
                text-align: left;
                font-size: 18px;
                line-height: 2.5;
                color: #4a4a4a;
            }

            & img {
                width: 290px;
                float: right;
                margin-left: 70px;
                margin-top: 15px;
            }

            & span {
                color: #e54600;
            }

            & .software-logo {
                width: 240px;
                float: right;
                margin-left: 85px;
                margin-top: 15px;
            }

            & .flow-image {

                & img {
                    float: unset;
                    width: 100%;
                    margin-left: 0px;
                    margin-top: 15px;
                }
            }

            .walfare_choice {
                text-align: left;

                & img {
                    width: 100%;
                    float: unset;
                    margin: 0;
                }

                & p {
                    font-size: 15px;
                    line-height: 1.5;
                    margin-top: 10px;
                }
            }

            & .zoom-image {
                cursor: zoom-in;
                display: inline-block;
                width: 302px;
                margin: 40px 20px 10px 0;

                & img {
                    width: 100%;
                    float: unset;
                    margin: 0;
                }
            }

            & .notice {
                font-size: 18px;
                color: #e54600;
                line-height: 2.56;
                margin-bottom: 60px;
            }
        }

        & .btn-cust {
            .inner_page_cust_btn_outline;
        }

        & .btn-cust:hover {
            .inner_page_cust_btn_outline_hover;
        }
    }

    .software-pop {
        & .popup-body {
            & img {
                width: 800px;
                height: auto;
            }
        }
    }
}

#welfare-info {
    nav {
        display: flex !important;
        align-items: center;

        img {
            width: 20px !important;
            height: 20px !important;
            margin: 0 5px;
            position: relative;
            top: -6px;
            cursor: pointer;
        }
    }

    .nav {
        flex-wrap: unset;

        @media (max-width: 767.98px) {
            flex-wrap: wrap;
        }
    }
}

.nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    scroll-behavior: smooth;
    // firefox隱藏卷軸
    scrollbar-width: none;
    a {
        white-space: nowrap;
        margin-right: 0px !important;

        @media (max-width: 767.98px) {
            margin-right: 0px !important;
        }
    }

    &::-webkit-scrollbar {
        display: none;
    }

    /* Track */
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

.gold_content {
    padding-bottom: 0px!important;
    h3 {
        font-weight: bold !important;

        @media (max-width: 767.98px) {
            font-size: 1.1rem;
        }
    }

    .gold_logo {
        margin-top: -30px !important;
        margin-bottom: 150px !important;
        width: 225px !important;
        height: 225px;
        float: right;

        @media screen and (max-width: 767.98px) {
            width: 100% !important;
            height: auto;
            margin: 0 auto;
            display: block;
            margin-top: 0px !important;
            margin-bottom: 20px !important;
        }

        &.gold_logoCN {
            margin-bottom: 50px !important;
        }
    }

    .banner {
        display: block;
        width: 100% !important;
        height: auto;
        float: unset !important;
        margin: 0 auto !important;
        margin-bottom: 50px !important;
    }

    .jingdingTitleRow {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px !important;

        .left {
            width: 60%;
        }

        .right {
            width: 40%;
        }

        .left,
        .right {

            h2 {
                font-size: 24px !important;
            }

            h3 {
                margin: 0;
            }

            img {
                width: 80% !important;
                margin: 0 auto !important;
                position: relative !important;
                top: 20px !important;
            }
        }

        .orangeEnBlock {
            color: white;
            height: 57px;
            background: #FF7A27 0% 0% no-repeat padding-box;
            padding: 10px;
            letter-spacing: 0px;
            margin: 0 auto;
            margin-top: 34px;
            text-align: center;
            font-size: 1.18rem;
            display: flex;
            align-content: center;
            justify-content: center;
            line-height: unset !important;

            span {
                margin-top: 5px;


                @media screen and (max-width: 640px) {
                    margin-top: -5px;
                }

                @media screen and (max-width: 400px) {
                    font-size: 0.8rem;
                    margin-top: 0px;
                }
            }
        }
    }

    .bannerBlock {
        position: relative;

        .btn {
            position: absolute;
            right: 15px;
            bottom: 15px;
            background: white;

            &:hover {
                background: #0044ff;
                color: white;
            }

            @media screen and (max-width: 767.98px) {
                right: 5px;
                bottom: 5px;
                font-size: 0.8rem !important;
            }
        }
    }

    .threeRow {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 140px !important;

        @media (max-width: 767.98px) {
            flex-wrap: wrap;
            margin-bottom: 0px !important;
        }

        .rowBlock {
            width: 32%;

            @media (max-width: 767.98px) {
                width: 100%;
                height: fit-content;
                margin-bottom: 50px;
            }

            .headBlock {
                img {
                    width: 100% !important;
                    margin: 0 auto !important;
                    float: unset !important;
                }
            }

            .contentBlock {
                background-color: #FAFAFA;
                height: 80%;
                position: relative;

                .title {
                    text-align: center;
                    height: 70px;
                    text-align: center;
                    font: normal normal bold 24px/29px Helvetica Neue;
                    letter-spacing: 0px;
                    color: #4F4F4F;
                    line-height: 70px !important;
                }

                .content {
                    font: normal normal normal 20px/32px Helvetica Neue;
                    letter-spacing: 0px;
                    color: #4F4F4F;
                    padding: 0 17px 20px 17px;
                }

                .smallIcon {
                    position: absolute;
                    bottom: -25px;
                    left: 50%;
                    transform: translateX(-50%);

                    img {
                        width: auto !important;
                        height: auto !important;
                        margin: 0 !important;
                    }
                }
            }
        }
    }

    .richFreeBlock {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        .block {
            width: 33%;

            @media screen and (max-width: 767.98px) {
                width: 50%;
            }

            img {
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
            }

            .text {
                padding: 25px;
                font: normal normal normal 22px/27px Helvetica Neue;
                letter-spacing: 0px;
                color: #4F4F4F;
            }

            &:nth-child(odd) {
                margin-top: 10px;
            }
        }
    }

    .contactBlock {
      display: flex;
      justify-content: center;
      margin-top: 100px!important;
         @media (max-width: 767.98px) {
                margin-top: 50px!important;
            }
    }
}