@function px2rem($px) {
    @return $px / 75+rem;
}

html,
body {
    width: 100%;
    background: #260006;
}

.back {
    width: 100%;
    height: px2rem(44);
    line-height: px2rem(44);
    position: fixed;
    left: 0;
    top: px2rem(65);
    text-align: center;
    color: #FFFFFF;
    font-size: px2rem(38);
    font-weight: bold;
    z-index: 10;

    img {
        width: px2rem(44);
        height: px2rem(44);
        position: absolute;
        left: px2rem(18);
        top: px2rem(0);
    }
}

.header {
    width: px2rem(750);
    height: px2rem(1210);
    background: url(../images/header.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;

    .rule_icon {
        width: px2rem(140);
        height: px2rem(50);
        line-height: px2rem(45);
        text-align: center;
        position: absolute;
        right: 0;
        top: px2rem(514);
        background: url(../images/rule_iconBg.png) no-repeat;
        background-size: 100% 100%;
        color: #FDF565;
        font-size: px2rem(28);
        font-weight: 500;
    }

    .time {
        width: 92%;
        height: px2rem(122);
        box-sizing: border-box;
        padding: 0 px2rem(50);
        margin: px2rem(871) auto 0;

        div {
            float: left;
            width: px2rem(110);
            height: px2rem(110);
            background: url(../images/timeBg.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            text-align: center;
            box-sizing: border-box;
            padding-top: px2rem(18);
            // line-height: px2rem(122);

            b {
                color: #FFF783;
                font-size: px2rem(44);
                font-weight: 600;
                font-family: PingFang SC;
            }

            span {
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0.25rem;
                text-align: center;
                color: #FFF783;
                font-size: px2rem(28);
                font-weight: 400;
                font-family: PingFang SC;
            }
        }

        .day {
            background: url(../images/timeBg.png) no-repeat;
            // background: url(../images/timeBgAct.png) no-repeat;
            background-size: 100% 100%;
            margin-right: px2rem(47);
        }

        .colon {
            width: px2rem(16);
            height: px2rem(40);
            background: url(../images/icon1.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 px2rem(17);
            margin-top: px2rem(41);
        }
    }
}

.myRecharge {
    width: px2rem(750);
    height: px2rem(540);
    background: url(../images/myRechargeBg.png) no-repeat;
    background-size: 100% 100%;
    margin: px2rem(-120) auto px2rem(0);
    position: relative;

    .title {
        width: px2rem(550);
        height: px2rem(134);
        line-height: px2rem(124);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -0.3rem;
        text-align: center;
        color: #FFF783;
        font-size: px2rem(34);
        font-weight: 600;
        background: url(../images/title.png) no-repeat;
        background-size: 100% 100%;
    }

    p {
        width: 100%;
        height: 1.2rem;
        line-height: 1.2rem;
        position: absolute;
        text-align: center;
        left: 0;
        top: px2rem(160);
        display: flex;
        align-items: center;
        justify-content: center;
        .avatar {
            width: px2rem(88);
            height: px2rem(90);
            border-radius: 50%;
            border: px2rem(4) solid #FFF783;
            margin: 0 px2rem(20);
        }

        b {
            color: #FFF783;
            font-size: px2rem(86);
            font-weight: 600;
            display: inline-block;
        }

        img {
            display: inline-block;
            width: px2rem(50);
            height: px2rem(50);
            margin: 0 px2rem(10) 0;
        }
    }

    .but {
        width: px2rem(435);
        height: px2rem(144);
        line-height: px2rem(134);
        text-align: center;
        color: #292601;
        font-size: px2rem(32);
        font-weight: 600;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(276);
        background: url(../images/myRechargeBut.png) no-repeat;
        background-size: 100% 100%;
    }
}

.recharge100 {
    width: px2rem(750);
    margin: px2rem(53) auto 0;
    background: url(../images/Recharge_Bg.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: px2rem(20);

    .top {
        width: 100%;
        height: px2rem(150);
        // background: url(../images/bgTop.png) no-repeat;
        // background-size: 100% 100%;
        position: relative;

        .title {
            width: px2rem(550);
            height: px2rem(134);
            line-height: px2rem(124);
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #FFF783;
            font-size: px2rem(40);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-16);
        }
    }

    .bottom {
        width: 100%;
        height: 2.7rem;
        // background: url(../images/bgBottom.png) no-repeat;
        // background-size: 100% 100%;
        position: relative;
        margin-top: px2rem(40);

        .but {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            text-align: center;
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            background: url(../images/but.png) no-repeat;
            background-size: 100% 100%;
        }

        .act {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            background: url(../images/myRechargeBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            text-align: center;
        }
    }

    .content {
        width: 100%;
        // background: url(../images/bgCentent.png) no-repeat;
        // background-size: 100% 100%;
        margin-bottom: -0.05rem;

        .rewardImg {
            display: block;
            width: px2rem(680);
            height: px2rem(620);
            margin: 0 auto 0;
            background: url(../images/recharge100.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;

            .ts {
                width: 2.2rem;
                height: 2.2rem;
                position: absolute;
                right: 1.1rem;
                top: 0.8rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .zj {
                width: 3.75rem;
                height: 7.37rem;
                position: absolute;
                left: 1.1rem;
                top: 0.2rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
}


.recharge300 {
    width: px2rem(750);
    margin: px2rem(53) auto 0;
    background: url(../images/Recharge_Bg.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: px2rem(20);
    .top {
        width: 100%;
        height: px2rem(150);
        position: relative;

        .title {
            width: px2rem(550);
            height: px2rem(134);
            line-height: px2rem(124);
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #FFF783;
            font-size: px2rem(40);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-16);
        }
    }

    .bottom {
        width: 100%;
        height: 2.7rem;
        position: relative;
        margin-top: px2rem(40);

        .but {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            text-align: center;
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            background: url(../images/but.png) no-repeat;
            background-size: 100% 100%;
        }

        .act {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            background: url(../images/myRechargeBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            text-align: center;
        }
    }

    .content {
        width: 100%;
        margin-bottom: -0.05rem;

        .rewardImg {
            display: block;
            width: px2rem(680);
            height: px2rem(620);
            margin: 0 auto 0;
            background: url(../images/recharge300.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;

            .ts {
                width: 2.2rem;
                height: 2.2rem;
                position: absolute;
                right: 1.1rem;
                top: 0.2rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .zj {
                width: 3.75rem;
                height: 7.37rem;
                position: absolute;
                left: 1.1rem;
                top: 0.87rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }

        .topTitle {
            width: 100%;
            height: px2rem(30);
            line-height: px2rem(30);
            display: flex;
            justify-content: center;
            margin-top: px2rem(27);

            img {
                display: inline-block;
                width: px2rem(207);
                height: px2rem(17);
                margin-top: 0.15rem;
                vertical-align: middle;
            }

            b {
                display: inline-block;
                color: #FFF783;
                font-size: px2rem(30);
                font-weight: 600;
                margin: 0 px2rem(11);
                vertical-align: middle;
            }
        }

        .topBox {
            width: 78%;
            height: px2rem(200);
            display: flex;
            justify-content: space-between;
            margin: px2rem(64) auto 0;

            div {
                width: px2rem(166);
                height: px2rem(160);
                position: relative;

                .tx {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .ts {
                    width: px2rem(210);
                    height: px2rem(210);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -0.25rem;
                }
            }

            .no2 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no3 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no1 {
                .tx {
                    width: px2rem(166);
                    height: px2rem(170);
                    border: px2rem(2) solid #FFDB00;
                }
            }
        }
    }
}

.recharge500 {
    width: px2rem(750);
     margin: px2rem(53) auto 0;
    background: url(../images/Recharge_Bg.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: px2rem(20);

    .top {
        width: 100%;
        height: px2rem(150);
        position: relative;

        .title {
            width: px2rem(550);
            height: px2rem(134);
            line-height: px2rem(124);
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #FFF783;
            font-size: px2rem(40);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-16);
        }
    }

    .bottom {
        width: 100%;
        height: 2.7rem;
        margin-top: px2rem(40);
        position: relative;

        .but {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            text-align: center;
            color: #292601;
            font-size: px2rem(32);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            background: url(../images/but.png) no-repeat;
            background-size: 100% 100%;
        }

        .act {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            background: url(../images/myRechargeBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-10);
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            text-align: center;
        }
    }

    .content {
        width: 100%;
        margin-bottom: -0.05rem;

        .rewardImg {
            display: block;
            width: px2rem(680);
            height: px2rem(620);
            margin: 0 auto 0;
            background: url(../images/recharge500.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;

            .ts {
                width: 2.2rem;
                height: 2.2rem;
                position: absolute;
                right: 1.1rem;
                top: 0.2rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .zj {
                width: 3.75rem;
                height: 7.37rem;
                position: absolute;
                left: 1.1rem;
                top: 0.2rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }

        .topTitle {
            width: 100%;
            height: px2rem(30);
            line-height: px2rem(30);
            display: flex;
            justify-content: center;
            margin-top: px2rem(27);

            img {
                display: inline-block;
                width: px2rem(207);
                height: px2rem(17);
                margin-top: 0.15rem;
                vertical-align: middle;
            }

            b {
                display: inline-block;
                color: #FFF783;
                font-size: px2rem(30);
                font-weight: 600;
                margin: 0 px2rem(11);
                vertical-align: middle;
            }
        }

        .topBox {
            width: 78%;
            height: px2rem(200);
            display: flex;
            justify-content: space-between;
            margin: px2rem(64) auto 0;

            div {
                width: px2rem(166);
                height: px2rem(160);
                position: relative;

                .tx {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .ts {
                    width: px2rem(210);
                    height: px2rem(210);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -0.25rem;
                }
            }

            .no2 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no3 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no1 {
                .tx {
                    width: px2rem(166);
                    height: px2rem(170);
                    border: px2rem(2) solid #FFDB00;
                }
            }
        }
    }
}

.recharge1000 {
     width: px2rem(750);
    margin: px2rem(53) auto 0;
    background: url(../images/Recharge_Bg.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: px2rem(20);

    .top {
        width: 100%;
        height: px2rem(150);
        position: relative;

        .title {
            width: px2rem(550);
            height: px2rem(134);
            line-height: px2rem(124);
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #FFF783;
            font-size: px2rem(40);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-16);
        }
    }

    .bottom {
        width: 100%;
        // height: 2.7rem;
        position: relative;
        margin-top: px2rem(40);

        .but {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            text-align: center;
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-200);
            background: url(../images/but.png) no-repeat;
            background-size: 100% 100%;
            margin-bottom: px2rem(20);
        }
        .act {
            width: px2rem(435);
            height: px2rem(144);
            line-height: px2rem(134);
            background: url(../images/myRechargeBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-200);
            color: #292601;
            font-size: px2rem(36);
            font-weight: 600;
            text-align: center;
        }
         .topTitle {
            width: 100%;
            height: px2rem(30);
            line-height: px2rem(30);
            display: flex;
            justify-content: center;
            margin-top: px2rem(220);

            img {
                display: inline-block;
                width: px2rem(207);
                height: px2rem(17);
                margin-top: 0.15rem;
                vertical-align: middle;
            }

            b {
                display: inline-block;
                color: #FFF783;
                font-size: px2rem(30);
                font-weight: 600;
                margin: 0 px2rem(11);
                vertical-align: middle;
            }
        }

        .topBox {
            width: 78%;
            height: px2rem(200);
            display: flex;
            justify-content: space-between;
            margin: px2rem(64) auto 0;
            padding-bottom: px2rem(100);

            div {
                width: px2rem(166);
                height: px2rem(160);
                position: relative;

                .tx {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .ts {
                    width: px2rem(210);
                    height: px2rem(210);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -0.25rem;
                }
            }

            .no2 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no3 {
                margin-top: px2rem(6);

                .tx {
                    border: px2rem(2) solid #BEC6CD;
                    width: px2rem(154);
                    height: px2rem(154);
                }

                .ts {
                    width: px2rem(194);
                    height: px2rem(194);
                }
            }

            .no1 {
                .tx {
                    width: px2rem(166);
                    height: px2rem(170);
                    border: px2rem(2) solid #FFDB00;
                }
            }
        }
    }

    .content {
        width: 100%;
        margin-bottom: -0.05rem;

        .rewardImg {
            display: block;
            width: px2rem(680);
            height: px2rem(732);
            margin: 0 auto 0;
            background: url(../images/recharge1000.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;

            .ts {
                width: 2.2rem;
                height: 2.2rem;
                position: absolute;
                right: 1.1rem;
                top: 0.2rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .zj {
                width: 3.75rem;
                height: 7.37rem;
                position: absolute;
                left: 1.1rem;
                top: 0.95rem;

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .why {
                width: px2rem(50);
                height: px2rem(50);
                position: absolute;
                right: px2rem(60);
                top: 6.5rem;
            }

        }

       
    }
}


.pub {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    display: none;

    .pub_in {
        width: px2rem(630);
        height: px2rem(660);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/Recharge_Bg.png) no-repeat;
        background-size: 100% 100%;

        .close {
            width: px2rem(68);
            height: px2rem(68);
            position: absolute;
            right: px2rem(23);
            top: px2rem(-80);
        }

        .title {
            width: px2rem(430);
            height: px2rem(108);
            line-height: px2rem(98);
            text-align: center;
            color: #FFF783;
            font-size: px2rem(30);
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
            top: px2rem(-20);
        }

        .centent {
            width: 100%;
            height: px2rem(460);
            overflow-y: scroll;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(10);
            box-sizing: border-box;
            padding: 0 px2rem(90);
            margin-top: px2rem(100);
            &::-webkit-scrollbar {
                display: none;
            }

            p {
                color: #FFF784;
                font-size: px2rem(28);
                font-weight: 400;
                // line-height: 0.45rem;
                margin-bottom: 0.2rem;
                width: 100%;
                line-height: px2rem(38);

            }
        }

        .myRechargeText {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: flex-start;

            p {
                // padding-bottom: 0.3rem;
            }
        }

        .myRechargeTextWhy {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: flex-start;

            p {
                // padding-bottom: 2.3rem;
            }
        }
    }
}

.disclaimer {
    width: 100%;
    text-align: center;
    margin-top: px2rem(30);
    margin-bottom: px2rem(42);
    color: #FFF784;
    font-size: px2rem(26);
    font-weight: 400;
}

.video {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    display: none;

    video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 65%;
    }

    .close {
        width: px2rem(68);
        height: px2rem(68);
        position: absolute;
        top: 10%;
        right: px2rem(70);
        z-index: 9;
    }
}

.arabic {
    .back img {
        left: auto;
        right: 0.24rem;
        transform: rotate(180deg);
    }

    .header {
        background: url(../images/header-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .header .time .day,
    .header .time .hour,
    .header .time .colon,
    .header .time .min,
    .header .time .sec {
        float: right;
    }

    .header .time .day {
        margin-right: 0;
        margin-left: 0.62667rem;
    }

    .recharge10 .content .rewardImg {
        background: url(../images/recharge10-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge100 .content .rewardImg {
        background: url(../images/recharge100-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge300 .content .rewardImg {
        background: url(../images/recharge300-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge500 .content .rewardImg {
        background: url(../images/recharge500-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge1000 .content .rewardImg {
        background: url(../images/recharge1000-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge3000 .content .rewardImg {
        background: url(../images/recharge3000-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge5000 .content .rewardImg {
        background: url(../images/recharge5000-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge8000 .content .rewardImg {
        background: url(../images/recharge8000-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge10000 .content .rewardImg {
        background: url(../images/recharge10000-ar.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharges .content .topTitle {
        direction: ltr;
    }
}
.Turkiye{
     .header {
        background: url(../images/header-tr.png) no-repeat;
        background-size: 100% 100%;
    }
    .recharge100 .content .rewardImg {
        background: url(../images/recharge100-tr.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge300 .content .rewardImg {
        background: url(../images/recharge300-tr.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge500 .content .rewardImg {
        background: url(../images/recharge500-tr.png) no-repeat;
        background-size: 100% 100%;
    }

    .recharge1000 .content .rewardImg {
        background: url(../images/recharge1000-tr.png) no-repeat;
        background-size: 100% 100%;
    }
}