html,body{
    width:100%;
    height: 100%;
    margin:0;

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

.banner{
    width:100%;
    height:120px;
    background: url("/images/pay.banner.jpg") center top no-repeat;
    background-size: cover;
}

.logo{
    position: absolute;
    width: 120px;
    top:12px;
    left: 50%;
    margin-left: -420px;
    border:none;
}

.mid-cont{
    width:1200px;
    margin: 0 auto;
}
.introduction{
    padding: 0 6.8rem;
}

.introduction i{
    line-height: 52px;
    font-size:16px;
    color:#656565;
    font-family: "微软雅黑";
    text-align: justify;
    

}
.introduction span{
    padding: 7px 56px;
    margin-right:10px;
}

.android{
    margin-left:30px;
    background: url("/images/pay.android.png") center center no-repeat;
}

.ios{
    background: url("/images/pay.ios.png") center center no-repeat;
}
.title{
    height: 64px;
    overflow: hidden;
    background-image:url("/images/pay.toolbar.png");
    background-repeat: no-repeat;
    margin:14px auto 18px;
}
.first-page,.second-page,.third-page{
    padding: 0 78px;
}
.first-page{
    overflow: hidden;
}

.second-page .title{
    background-position: 0 center;
}
.second-page {
    margin-top:20px;
}

.area {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.area a{

    display: inline-block;
    width:212px ;
    height:48px;
    margin : 8px 10px;
    border:1px solid #666666;
    border-radius: 4px;
    cursor: pointer;
}
.area a i{
    background-image: url('/images/areas.png');
    background-repeat: no-repeat;
     display: block;
     margin :0 auto;
     line-height: 48px;
     width:200px;
     height:44px;
}
.area a:hover{
    box-shadow: 1px 1px 3px 3px #cfbfdf;
}
.area a.select{
    background: url("/images/pay.selected.png") left top no-repeat;
    box-shadow: 1px 1px 3px 3px #cfbfdf;
}
.Philippines i{
    background-position: 0 -2px;
}
.Malaysia i{
    background-position:-220px -5px
}
.Singapore i{
    background-position: -446px -5px;
}
.Indonesia i{
    background-position: -4px -68px;
}
.Taiwan i{
    background-position: -218px -68px;
}



.third-page .title{
    background-position: 0 -158px;
}

.first-page input{
    display: inline-block;
    height:50px;
    width:216px;
    border: 1px solid #666666;
    border-radius: 4px;
    margin:0 10px 0 86px;
    font-size:18px;
    padding-left:8px;
}

.first-page input.danger{
    border:1px solid #f93a19;
    box-shadow: 0 0 2px 2px #ecb9b9f2;
}

.first-page .help{
    display: inline-block;
    background:url("/images/pay.help.png") center center no-repeat;
    padding: 10px;
    cursor: pointer;
}

.first-page .tip{
    color:#f93a19;
    padding:0 10px;
}

.desc{
    padding: 0 36px;
    line-height: 20px;
    color:#656565;
    font-family: "微软雅黑";

}
.platforms{
    display: inline-block;
}
.platforms .left{
    /* display: inline-block; */
    float: left;
    width:240px;
    /* height: 50px; */
    margin:4px 4px;
    /* border: 1px solid #666666; */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    background-color:#e3e1e4;
    height:620px;
    overflow-y: scroll;
}

.left li{
    position: relative;
    height:52px;
    padding-left:20px;
}
.left li:hover{
    background-color: #decfe4;
}
.left span{
    display: block;
    width:180px;
    height: 50px;
    font-size: 18px;
    font-family: "微软雅黑";
    font-weight: bold;
    line-height: 40px;
    background-image:url("/images/pay.platforms.png");
    background-repeat: no-repeat;

}
.left .line{
    display: block;
    height: 1px;
    position: absolute;
    bottom:0;
    right:0;
    width:100%;
    background-color: #fff;
    font-size:10px;
}
.left li.select{
    background: url("/images/pay.selected.png") left top no-repeat;
    background-color: #decfe4;
}
.tag{
    position: absolute;
    top:0;
    right:4px;
    /* padding:2px 4px; */
    width:100px;
    height:18px;
    border-radius: 2px;
    line-height: 18px;
    background-color:#e64734;
    color:#fff;
    font-size: 8px;
}

.platforms .right{
    /* float: right; */
    display: inline-block;
    width:742px;
    min-height: 620px;
    margin-left:28px;
    /* border:1px dashed #decfe4; */
    padding: 8px;
}
.right .tips{
    text-align: left;
    padding-left:18px;
    font-size:14px;
    color:#666666;
}
.right .items{
    min-height:112px;
}

.right li{
    display: inline-block;
    text-align: center;
    margin:8px;
    padding : 4px 8px;
    /* width: */
    border:1px dashed #decfe4;
    cursor: pointer;
}
.right li:hover{
    background-color:#a34bc4;
    color:#fff;
    border: 1px solid #fff;
}
.right li.select{
    background-color:#a34bc4;
    color:#fff;
    border: 1px solid #fff;
}
.platforms p{
    text-align: center;
    width:100%;
}
.topup{
    margin-bottom:40px;
    text-align: center;
}
.btn{
    background-color: #53218b;
    color:#fff;
    font-size: 25px;
    font-family: "微软雅黑";
    padding:10px 50px;
    border:none;
    border-radius: 4px;
    margin: 0 auto;
    cursor: pointer;
}

.third-page{
    position: relative;
    /* padding-bottom: 20px;
     */
     /* min-height:680px; */
}

.hidden{
    display: none;
}
.player{

    position: absolute;
    margin-left:20px;
    margin-top:-60px;

}

.lay{
    position: fixed;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    z-index:999;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal .content{
    width:678px;
    height:320px;
    margin: 42px auto;
    background-color:#faf6ff;
    border:1px solid #a34bc4;
    box-shadow: 3px 3px 3px 3px #9a88a2;
    text-align: center;
}
.modal .content p{
   
    font-size: 22px;
    font-family: "微软雅黑";
}


.modal table{
    width: 632px;
    padding: 5px 5px;
    margin: 0 auto;
    background-color: #ecd9ff;
    border-radius: 10px;
    border-collapse: separate;
}
.modal tbody{
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.modal tr{
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th,td{
    display: table-cell;
    vertical-align: inherit;
}
.modal th{
    height: 56px;
    background-color: #f8f1ff;
    border-bottom:none;
}
.modal td{
    height: 56px;
    background-color:#fff;
    border-top:none;
}
.modal .error{
    color:#f93a19;
    height:36px;
}

.modal button{
    width:138px;
    height:40px;
    margin:14px 40px;
    background-color:#53218b;
    border:none;
    border-radius: 4px;
    font-size:25px;
    font-family: "微软雅黑";
    font-weight: bold;
    color:#fff;

}
.modal .buttons{
    margin: 0 auto;
}

.footer{
    
    width:100%;
    background-color:#116cc1;
    text-align: center;
}
.footer{
    padding-top:10px;
}
.footer p{
    margin : 0 auto;
}
.footer a{
    text-decoration: none;
    cursor: pointer;
}

.footer span,.footer a{
    display: inline-block;
    font-size: 12px;
    color: #6cb6fb;
    padding: 14px 5px;  
}
.footer div span{
    padding:0 8px;
}
.footer div{
    color: #92c1f0;
    font-size:12px;
}

.copy{
    padding-bottom:20px;
}


.Telkomsel{
    background-position: -40px -273px;
}
.Tri-Indonesia{
    background-position: -264px -272px;
}
.Indosat{
    background-position: -490px -270px;
}

.XL{
    background-position: -80px -336px;
}

.Go-Pay{
    background-position: -280px -338px;
}
.Indomaret{
    background-position: -504px -338px;
}

.ATM-Banks{
    background-position: -68px -403px;
}
.Alfamart{
    background-position: -274px -408px;
}
.DoKu-wallet{
    background-position: -504px -405px;
}
.Razer-Gold-Wallet{
    background-position: -86px -468px;
}
.Razer-Gold-PIN{
    background-position: -306px -472px;
}
.Globe{
    background-position: -66px -11px;
}
.Smart{
    background-position: -290px -10px;
}
.Sun{
    background-position: -538px -12px;
}
.Bank-Transfer{
    background-position: -274px -74px;
}
.Convenience-Store{
    background-position: -500px -72px;
}
.GCash{
    background-position: -68px -70px;
}
.Maxis{
    background-position: -74px -208px;
}

.DiGi{
    background-position: -286px -204px;
}
.Celcom{
    background-position: -522px -208px;
}

.M1{
    background-position: -74px -140px;
}

.SingTel{
    background-position: -306px -138px;
}
.StarHub{
    background-position: -510px -140px;
}

.UniPin-Express{
    background-position: -508px -468px;
}

.UP-Gift-Card-Express{
    background-position: -72px -536px;
}


.UniPin-Wallet{
    background-position: -284px -538px;
}


.UP-Gift-Card-Wallet{
    background-position: -510px -536px;
}


.Credit-Card{
    background-position: -46px -614px;
}

.MOLPay-Credit-Card{
    background-position: -74px -688px;
}


.FPX{
    background-position: -312px -608px;
}


.eNETS{
    background-position: -530px -608px;
}


.Maya{
    background-position: -60px -860px;
}

.GrabPay{
    background-position: -280px -780px;
}

.Coins{
    background-position: -60px -780px;
}

.Boost{
    background-position: -490px -685px;
}

.ShopeePay{
    background-position: -280px -860px;
}

.MAE{
    background-position: -490px -780px;
}

.TouchN-Go{
    background-position: -300px -685px;
}

.PayNow{
    background-position: -508px -860px;
}

.Dito{
    background-position: -75px -915px;
}