/*banner*/

.introducing-rewards .banner {
    background-color: #f6faf6;
}

    .introducing-rewards .banner .banner-main-bg {
        max-width: 1155px;
        margin: 0 auto;
        width: 100%;
        height: 550px;
        position: relative;
        background: url("../../../Content/Images/SVG/IntroducingRewards/bg_Banner.svg") no-repeat right;
    }

        .introducing-rewards .banner .banner-main-bg .title-content-warp {
            margin: auto;
            display: flex;
            align-items: center;
            padding-top: 124px;
        }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .title-content {
                max-width: 600px;
                z-index: 1;
            }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .title-banner {
                font-size: 30px;
                font-weight: 600;
                color: #212121;
                margin-bottom: 24px;
            }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote-content {
                max-width: 400px;
            }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote {
                font-size: 16px;
                color: #212121;
            }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote.non-limited {
                    font-style: italic;
                    color: #212121;
                }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote > span {
                    font-weight: 700;
                    color: #212121;
                }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .title-button {
                display: flex;
            }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .refer-now {
                background-color: #31a035;
                border-radius: 4px;
                width: 148px;
                height: 44px;
                overflow: hidden;
                color: white;
                text-align: center;
                padding-top: 12px;
                margin-top: 24px;
            }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .refer-now:hover {
                    background-color: #08B508 !important;
                }

            .introducing-rewards .banner .banner-main-bg .title-content-warp .bg-co-gai {
                position: absolute;
                bottom: 0;
                right: 5%;
            }
.introducing-rewards .get-help-button {
    color: #2680eb;
    cursor: pointer;
}

    .introducing-rewards .get-help-button:hover {
        color: #2772c7;
    }
/*content*/
.introducing-rewards section.content {
    padding: 30px 0px 80px 0px;
    max-width: 1155px;
    margin: 0 auto;
}

.introducing-rewards .content .program-rules-title {
    font-size: 36px;
    font-weight: 600;
    color: #212121;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 30px;
}

    .introducing-rewards .content .program-rules-title.question {
        margin: 24px 0px 40px 0px;
    }

.introducing-rewards .content .program-rules-content {
    display: flex;
    padding: 24px 0px;
}

    .introducing-rewards .content .program-rules-content.reverse {
        flex-direction: row-reverse;
    }

    .introducing-rewards .content .program-rules-content .left-side {
        width: 50%;
        height: 100%;
    }

        .introducing-rewards .content .program-rules-content .left-side .iframe {
            max-height: 100%;
            width: 100%;
            outline: unset;
            border: unset;
        }

        .introducing-rewards .content .program-rules-content .left-side .iframe-image {
            position: relative;
            cursor: pointer;
        }

            .introducing-rewards .content .program-rules-content .left-side .iframe-image .play-video {
                background: url(../../../Content/Images/SVG/IntroducingRewards/ic_play.svg) no-repeat;
                width: 42px;
                height: 42px;
                display: inline-block;
                position: absolute;
                top: 43%;
                left: 43%;
            }

    .introducing-rewards .content .program-rules-content.reverse .left-side {
        padding-left: 24px;
    }

    .introducing-rewards .content .program-rules-content .right-side {
        width: 50%;
        padding-left: 24px;
    }

    .introducing-rewards .content .program-rules-content.reverse .right-side {
        padding-left: 0px;
    }

    .introducing-rewards .content .program-rules-content .right-side .sub-title {
        font-size: 24px;
        font-weight: 600;
        color: #212121;
        margin-bottom: 16px;
    }

    .introducing-rewards .content .program-rules-content .right-side .rule {
        font-size: 16px;
        color: #212121;
        position: relative;
        padding-left: 24px;
        margin-bottom: 12px;
    }

        .introducing-rewards .content .program-rules-content .right-side .rule.note {
            font-style: italic;
            color: #707070;
        }

        .introducing-rewards .content .program-rules-content .right-side .rule.non-tick {
            padding-left: 0px;
        }

            .introducing-rewards .content .program-rules-content .right-side .rule.non-tick::before {
                content: none !important;
            }

        .introducing-rewards .content .program-rules-content .right-side .rule::before {
            content: "";
            display: inline-block;
            width: 24px;
            height: 18px;
            background: url(../../../Content/Images/SVG/IntroducingRewards/tick.svg) no-repeat;
            background-position: 1px 2px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .introducing-rewards .content .program-rules-content .right-side .rule > span {
            font-weight: 700;
            color: #212121;
        }

        .introducing-rewards .content .program-rules-content .right-side .rule > a {
            color: #2680eb;
        }

            .introducing-rewards .content .program-rules-content .right-side .rule > a:hover {
                color: #2772c7;
            }

.introducing-rewards .content .question-content {
    padding: 24px 0px;
    border-top: 1px dotted #c5cee0;
    cursor: pointer;
}

    .introducing-rewards .content .question-content .question-content-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .introducing-rewards .content .question-content:last-child {
        border-bottom: 1px dotted #c5cee0;
    }

    .introducing-rewards .content .question-content .question-title {
        font-size: 16px;
        font-weight: 600;
        color: #212121;
        cursor: pointer;
    }

    .introducing-rewards .content .question-content .question-description {
        font-size: 16px;
        color: #707070;
        display: none;
        margin-top: 16px;
    }


/*Icon*/
.introducing-rewards .s-24 {
    min-width: 24px;
    min-height: 24px;
}

.introducing-rewards .i-sprites {
    background: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.8);
}

    .introducing-rewards .i-sprites:before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: 2px rgba(39, 40, 50, 0.66) solid;
        border-right: 2px rgba(39, 40, 50, 0.66) solid;
    }

    .introducing-rewards .i-sprites.i-arrow-down:before {
        transform: translateY(0px) rotate( 135deg );
        cursor: pointer;
    }

    .introducing-rewards .i-sprites.i-arrow-top:before {
        transform: translateY(0px) rotate( -45deg );
        cursor: pointer;
    }

/*Responsive*/

@media (max-width: 1366px) {
    .introducing-rewards .banner {
        padding: 0 35px;
    }

    .introducing-rewards section.content {
        padding: 30px 35px 80px 35px;
    }
}

@media (max-width: 1024px) {
    .introducing-rewards .banner .banner-main-bg {
        background-position: bottom right;
        background-size: 85%;
    }

        .introducing-rewards .banner .banner-main-bg .title-content-warp .bg-co-gai {
            max-height: 400px;
            right: 8%;
        }
}

@media (max-width: 768px) {
    .introducing-rewards .banner .banner-main-bg .title-content-warp .bg-co-gai {
        max-height: 350px;
        right: 0%;
    }
}

@media (max-width: 680px) {
    .introducing-rewards .banner {
        height: auto;
        padding: 0 24px;
    }

        .introducing-rewards .banner .banner-main-bg {
            height: auto;
            background: none;
        }

            .introducing-rewards .banner .banner-main-bg .title-content-warp {
                padding-top: 36px;
                flex-direction: column;
            }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .title-banner {
                    font-size: 26px;
                }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote {
                    font-size: 18px;
                }

                    .introducing-rewards .banner .banner-main-bg .title-content-warp .title-quote.non-limited {
                        font-size: 16px;
                    }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .title-button {
                    justify-content: center;
                }

                .introducing-rewards .banner .banner-main-bg .title-content-warp .bg-co-gai {
                    position: unset;
                    margin-top: 48px;
                    max-height: unset;
                }

    .introducing-rewards section.content {
        padding: 0px 24px 50px 24px;
    }

    .introducing-rewards .content .program-rules-title {
        font-size: 26px;
    }

    .introducing-rewards .content .program-rules-content {
        flex-direction: column;
    }

        .introducing-rewards .content .program-rules-content.reverse {
            flex-direction: column;
        }

        .introducing-rewards .content .program-rules-content .left-side {
            width: 100%;
            margin-bottom: 28px;
        }

        .introducing-rewards .content .program-rules-content .right-side {
            width: 100%;
            padding-left: 0px;
        }

        .introducing-rewards .content .program-rules-content.reverse .left-side {
            padding-left: 0px;
        }

        .introducing-rewards .content .program-rules-content .right-side .rule {
            font-size: 18px;
        }
}