@charset "UTF-8";
html {-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color: rgba(0,0,0,0);}
body { text-align:center;font-family:"PingFangSC-Regular","SourceHanSansCN-Regular";-webkit-user-select:none; -webkit-text-size-adjust:none;background-color:#F1FAFF;}
* { margin:0; padding:0;list-style:none;-webkit-tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: rgba(0,0,0,0);}
i, em{ font-style:normal; font-weight:normal; }
textarea::-webkit-input-placeholder{color: #CECECE;font-size: 1.8rem;}
input,textarea,select,button{-webkit-appearance:none;appearance:none;border:0;outline:none;}
input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;}
.none{display:none !important;}
.hidden{visibility:hidden !important;}

/* 小费单选区域 */
.tipShow{background: rgba(243,250,255,0.80);border: 1px solid #E2EBF1;margin: 10px -1.8rem 0;padding: 11px; position: relative;}
.tipArrow{width:0;height:0;border-width:0 10px 10px;border-style:solid;border-color: transparent transparent #E2EBF1;position:absolute;top: -10px;right: 70px;}
.tipArrowUp{display:block;width:0;height:0;border-width:0 9px 9px;border-style:solid;border-color: transparent transparent rgba(243,250,255,0.80);position: absolute;top: 2px;right: -9px;}
.tipChoose{display: flex;justify-content: space-around;}
.tipChoice span{vertical-align: middle;}
.tipChoiceSpan{width: 13px;height: 13px;border: 1px solid #E2EBF1;border-radius: 50%;display: inline-block;margin-right: 6px;cursor: pointer;}
.active{border: 1px solid #11A0F8;background: #11A0F8 url('../image/duigou.png') no-repeat center;background-size: 27px;}

/* 按钮边框1像素 */
.btn_border{position: relative;}
.btn_border:after{content:'';position:absolute;left:0;top:0;right:-100%;bottom:-100%;-webkit-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);
-moz-transform:scale(0.5);transform:scale(0.5);-ms-transform-origin:0px 0px;-webkit-transform-origin:0px 0px;-moz-transform-origin:0px 0px;transform-origin:0px 0px;
-o-transform-origin:0px 0px;border:1px #11A0F8 solid;border-radius:16px;}

.btn_border:active:after{border:1px solid #8FD8FD;}
/* 页面1开始 */
.page{position: absolute;top:0;left: 0;right: 0;bottom: 0;overflow: auto;color: #90A4AE;font-size: 1.5rem;}
.wrap{padding:1.4rem 1.2rem;}
.white_wrap{background-color: #fff;border-radius:12px;box-shadow: 0 2px 16px 0 rgba(144,164,174,0.42);padding:2.5rem 1.8rem 0.7rem 1.8rem;}
.sh_title{font-size:1.5rem;color: #2C405A;line-height: 2.1rem;}
.show_top{border-bottom: 1px solid #E2EBF1;padding:1.7rem 0 1.8rem 0;}
.all_money{font-size:2.5rem;color: #2C405A;font-weight: 600;line-height: 3.6rem;word-wrap: break-word;word-break: normal;}
/* .show_top .money{word-wrap: break-word;word-break: normal;} */
.show_top .top_rate{word-wrap: break-word;word-break: normal;}
.currency{padding-left:0.4rem;}
.currency_small{font-size: 1.4rem;padding-left: 0.4rem;}
.list .ipt_money{white-space:nowrap;}
/* 操作输入金额 */
.op_wrap{border-bottom: 1px solid #E2EBF1;padding:1.3rem 0rem 1.1rem 0;}
.op_wrap_tip{padding:1.3rem 0rem 0rem 0;}
.list{
    display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -o-box; display: box;padding: 0rem 0.8rem;
    box-align: center;-webkit-box-align: center;-moz-box-align: center;-ms-box-align: center;-o-box-align: center;height:3.9rem;line-height:4.1rem;}
.left{width:6.1rem;text-align: left;}
.right{-webkit-box-flex:1;-ms-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;text-align: right;overflow:hidden;}
.more_right{text-align: right;}
.edit_icon{display:inline-block;width:1.7rem;height:2.2rem;background:url(../image/icon_edi.svg) no-repeat -0.4rem center;background-size:2.2rem 2.2rem;vertical-align: middle;
margin-top: -0.2rem;}
.money_icon{padding-left:2rem;background:url(../image/icon_edi.svg) no-repeat left center;background-size: 2.1rem 2.1rem;margin-top: -0.2rem;}


/* 正在输入金额时(正常规格)*/
.ipt_on .ipt_money{position:relative;white-space:nowrap;}
.list.ipt_on{background:#F4FCFF;border-radius:3px;border:1px #4AC8FF solid;}

@-webkit-keyframes animate_flash{
    50%{opacity:1;}
}
@-o-keyframes animate_flash{
    50%{opacity:1;}
}
@-ms-keyframes animate_flash{
    50%{opacity:1;}
}
@-moz-keyframes animate_flash{
    50%{opacity:1;}
}
@keyframes animate_flash{
    50%{opacity:1;}
}
.ipt_on .money_icon{background: none;padding-left:0;}
.ipt_on .right{font-weight: 600;color:#2C405A;}
.ipt_on .more_right{font-weight: 600;color:#2C405A;position:relative;}
.ipt_on .line_simu{display:inline-block;width:0.2rem;height:1.9rem;line-height:4rem;background:#11A0F8;vertical-align: middle; opacity: 0;position: absolute;top:50%;
     margin-top: -1rem;left:0rem;-webkit-animation: animate_flash 1s ease-in-out infinite;-ms-animation: animate_flash 1s ease-in-out infinite;
     animation: animate_flash 1s ease-in-out infinite;-moz-animation: animate_flash 1s ease-in-out infinite;-o-animation: animate_flash 1s ease-in-out infinite;
 }

/* 什么费都没有的时候，输入框变大 */
.op_wrap_big{border-bottom: 1px solid #E2EBF1;padding:2.4rem 0 2rem 0rem;}
.op_wrap_big .list{padding: 0 0.8rem 0 0.8rem;}
.ipt_big.list{height:4.7rem;line-height:4.9rem;}
.ipt_on.ipt_big .line_simu{display:inline-block;width:0.2rem;height:2.2rem;line-height:4.8rem;background:#11A0F8;vertical-align: middle; opacity: 0;position: absolute;top:50%;
     margin-top: -1.3rem;right:-0.2rem;-webkit-animation: animate_flash 1s ease-in-out infinite;-ms-animation: animate_flash 1s ease-in-out infinite;
     animation: animate_flash 1s ease-in-out infinite;-moz-animation: animate_flash 1s ease-in-out infinite;-o-animation: animate_flash 1s ease-in-out infinite;
 }
.op_wrap_big .right{font-size:2.2rem;}
.op_wrap_big .currency{font-size: 2rem;padding-left: 0.4rem;}
.op_wrap_big .big_rate{text-align: right;padding-top: 0.7rem;padding-left: 0.6rem;}
.op_wrap_big .currency_small{padding-right:0.9rem;}
.op_wrap_big .more_right{text-align: right;padding-left: 0.1rem;}
 /* 备注和选择语言区 */
.bz_wrap{padding-top: 1rem 0;line-height: 2.1rem;}
.bz_left{-webkit-box-flex:1;box-flex:1;-ms-box-flex:1;-moz-box-flex:1;-o-box-flex:1;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right:2.4rem;}
.bz_right{text-align:right;position: relative;padding-right:1.8rem;}
.arrow_up{display:inline-block;width:1.2rem;height: 0.7rem;background:url(../image/arrow1.svg) no-repeat center center;background-size:1.2rem 0.7rem;position: absolute;right:0;
          top:50%;margin-top:-0.35rem;}
.arrow_up.icon_change{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* Internet Explorer */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); /* Opera */
}
.select_box{position: absolute;width: 14.5rem;background: #FFFFFF;box-shadow: 0 1px 12px 0 rgba(145,162,171,0.66);border-radius: 6px;z-index:3;text-align: center;
            right:-2.8rem;}
.select_box li{height:3.8rem;line-height:4rem;border-bottom: 1px solid #E2EBF1;z-index: 3;}
.select_box li:first-child{border-radius:6px 6px 0px 0px;}
.select_box li:last-child{border-bottom:0;border-radius: 0px 0px 6px 6px;}
.select_bg{background-color:#F4F8F9;}
/* 三角形 */
.select_box::before{position: absolute;content:'';width: 0;height: 0;border-right:1rem solid transparent;border-bottom:1rem solid #E2EBF1;
                    border-left:1rem solid transparent;top:-1rem;left:50%;margin-left: -1rem;}
.select_box:after{position: absolute;content:'';width: 0;height: 0;border-right:0.9rem solid transparent;border-bottom:0.9rem solid #fff;
                  border-left:0.9rem solid transparent;top:-0.9rem;left:50%;margin-left: -0.9rem;}
/* 空白区域*/
.blank{height: 21.2rem;}

/* 键盘 */
.keyboard{position:fixed;left: 0;bottom: 0;width: 100%;background: #fff;z-index: 2;}
.keyboard.key_down{
    height: 0;
    -webkit-animation:keyboard_down 0.4s;
    animation:keyboard_down 0.4s;
    -ms-animation:keyboard_down 0.4s;
    -moz-animation:keyboard_down 0.4s;
    -o-animation:keyboard_down 0.4s;
}
@keyframes keyboard_down{
    from{height:21.2rem;}
    to {height:0rem;}
}
@-webkit-keyframes keyboard_down{
    from{height:21.2rem;}
    to {height:0rem;}
}
@-moz-keyframes keyboard_down{
    from{height:21.2rem;}
    to {height:0rem;}
}
@-ms-keyframes keyboard_down{
    from{height:21.2rem;}
    to {height:0rem;}
}
@-o-keyframes keyboard_down{
    from{height:21.2rem;}
    to {height:0rem;}
}

.keyboard table{width: 100%;height: 21.2rem;}
.keyboard td{text-align: center;font-size:2.4rem;color:#2C405A;-webkit-transition: 0.1s;transition: 0.1s;border: 1px solid #E6E9EA;border-width: 1px 0px 0px 1px;}
.keyboard td.w25{width: 25%;}
.keyboard td:active{background-color:#F4F8F9;}
.keyboard td.delete{background: url(../image/keyboard_Delete.svg) no-repeat center center;background-size: 2.6rem 1.9rem;}
/* .keyboard td.hidekey{background: url(../image/keyboard_1.svg) no-repeat center center;background-size:3.5rem;}
.keyboard td.hidekey:active{background-color:#F4F8F9;} */
.keyboard td.delete:active{background-color:#F4F8F9;}
.keyboard td.btn{background-color:#11A0F8;color: #fff;font-size:2.2rem;}
.keyboard td.btn:active{background-color:#1B92DB;}
.keyboard td.btn.disable{background-color:#BEE6FF;}
/* 底部logo说明 */
.footer{position: absolute;bottom:1rem;text-align:center;width:100%;left:50%;margin-left:-50%;color:#A9BFC8;font-size: 1.2rem;z-index: 1;}
.footer .english_by{padding-right: 0.6rem;}
.footer .airpay{font-weight:500;}
.footer .provide{position: relative;padding-left: 0.8rem;}
.footer .provide:after{position:absolute;content:'';width:0.1rem;height:1.3rem;background-color:#C6E0E9;left:0.3rem;top:50%;margin-top:-0.65rem;}
.footer .ok_icon{display:inline-block;width:1.4rem;height:1.8rem;background: url(../image/keyboard_shield.svg) no-repeat center -0.1rem;background-size:1.4rem 1.8rem;vertical-align: middle;}
/* footer放上 */
.footer.up_footer{position:static;margin: 0 auto;padding-top: 1.3rem;}
.footer.mg_top_footer{margin-top: -2.1rem;}
/* 顶部错误提示 */
.tips{width: 100%;background-color:#FFEAD8;box-shadow: 0 1px 8px 0 rgba(145,162,171,0.49);position:absolute;top:0;left:0;color: #F07005;
     font-size: 1.5rem;height: 5.9rem;display: table;}
.tip_wrap{padding-top:0.9rem;padding-bottom: 0.9rem;padding-right: 1.8rem;padding-left: 3.5rem;display: table-cell;height: 100%;vertical-align: middle;}
.tips .tips_text{display:inline-block;line-height: 2.1rem;}
.tips .tips_text .tips_inside{position: relative;}
.tips .tips_text .tips_inside:after{position:absolute;content:'';background: url(../image/icon_waring.svg) no-repeat center center;width: 2.5rem;height: 2.5rem;top:-0.26rem;left:-2.5rem}


/* 备注弹窗 */
.zzc{position:absolute;top: 0;left: 0;bottom: 0;right:0;background:rgba(0,0,0,0.6);z-index: 5;}
.remark_pop{height: 22.5rem;background-color: #fff;position: absolute;bottom: 0;left:0;right: 0;}
.pop_title{border-bottom:1px solid #E2EBF1;height:5rem;font-size: 18px;line-height:5rem;position: relative;color: #2C405A;}
.pop_title .rm_cancel{width:5rem;height: 5rem;background:url(../image/close1.svg) no-repeat center center;background-size:2.5rem 2.5rem;position: absolute;left: 0;}
.pop_title .rm_save{position:absolute;color: #11A0F8;right:1.9rem;}
.remark_text{padding: 1.5rem 2.7rem 0 2.3rem;}
.remark_text textarea{width: 100%;text-align: left;font-size: 1.8rem;color: #2C405A;resize:none;line-height: 2.5rem;height:15.6rem;}


/* 固定金额付款页面 */
.page2{position: absolute;top:0;left: 0;right: 0;bottom: 0;overflow: auto;color: #90A4AE;font-size: 1.5rem;}
.page2 .white_wrap{padding:2.5rem 2.3rem 0.7rem 2.3rem;margin-bottom:2.1rem;}
.page2 .white_wrap_tip{padding:2.5rem 2.3rem 0 2.3rem;margin-bottom:2.1rem;}
.page2 .tipShow{background: rgba(243,250,255,0.80);border: 1px solid #E2EBF1;margin: 10px -2.3rem 0;padding: 11px; position: relative;}
.page2 .show_top{padding: 2.8rem 0 2.6rem 0;}
.page2 .op_wrap{padding: 1rem 0 1rem 0;}
.page2 .op_wrap .list{height:2.1rem;line-height:2.1rem;padding:0;}
.page2 .op_wrap .list{
    display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -o-box; display: box;padding: 0rem 0.2rem;
    height:3.9rem;line-height:4.1rem;}
.page2 .bz_wrap .list{padding:0;}
.page2 .op_wrap .list:first-child{padding-bottom: 0rem;}
.btn_wrap{padding:0 1.4rem;}
.btn_wrap .blue_btn{width:100%;height:4.3rem;line-height: 4.5rem;background: #11A0F8;box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);border-radius:8px;font-size:1.8rem;color: #FFFFFF;}
.btn_wrap .blue_btn:active{background:#1B92DB;}

/* 正在付款loading */
.loading{background:rgba(0,0,0,0.45);height:9rem;width:11.5rem;border-radius: 8px;position: absolute;top:50%;left: 50%;font-size: 1.5rem;padding:2.5rem 0rem 0 0rem;color: #FFFFFF;
    -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.loading_text{padding-top: 1.1rem;font-size:1.5rem;}
/* loading动图 */
.loading_icon{
    width: 33px;
    height: 33px;
    display: inline-block;
    vertical-align: middle;
    animation: Loading 1s steps(12, end) infinite;
    background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
    background-size: 100%;
}
@-webkit-keyframes Loading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
@keyframes Loading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

/* 付款完成页面 */
.page3{font-size:1.5rem;color: #90A4AE;}
.page3 .white_wrap{padding:3.6rem 1.8rem 0.7rem 1.8rem;}
.page3 .success_logo{width: 6.7rem;height: 6.7rem;background: url(../image/img_success.svg) no-repeat center center;background-size: 6.7rem 6.7rem;margin: 0 auto;}
.page3 .show_top{padding:2rem 0 3.5rem 0;}
.page3 .op_wrap{padding:1.7rem 0 1.2rem 0;border-bottom:none;}
.page3 .op_wrap .list{line-height: 2.1rem;height:2.1rem;padding:0 0 1rem 0;}
.page3 .list .right{-webkit-box-flex:1;box-flex:1;}
.page3 .list .right.ordernum{width:5rem}
.page3 .list .left{padding-right: 0.5rem;}
.page3 .list .leftnum{-webkit-box-flex:1;box-flex:1;text-align: left;}
.page3 .list .more_right{font-size: 1.4rem;padding-left:0.4rem;}
.page3 .btn_wrap{margin-top:1.8rem;padding: 0;}
.white_btn{width:100%;height:4.2rem;line-height: 4.4rem;border-radius:8px;font-size:1.8rem;color:#11A0F8;background:rgba(0,0,0,0);}
.white_btn:active{background:#E5F3FD;color:#8FD8FD;}
.page3 .tb_order{padding: 0.8rem 1.4rem 0 1.4rem;}

/* 错误提示页面 */
.page4{padding-top: 13.4rem;}
.error_icon{margin: 0 auto;width:12rem;height:4.8rem;background: url(../image/error.png) no-repeat center center;background-size: 12rem 4.8rem;padding-bottom: 1.5rem;}
.page4 .error_wrap{text-align: center;font-size: 16px;color: #A9BFC8;line-height: 2.4rem;padding:0 1rem;}
/*界面2*/
 .xh-title{height:66px;line-height:66px;text-align:center;font-size:22px;font-weight:300;border-bottom:2px solid #eee;background: #fff;}
         .qrbox{max-width: 900px;margin: 0 auto;padding:85px 20px 20px 50px;}

          .qrbox .left{width: 95%;
             display: block;
            margin: 15% auto;}
          .qrbox .left .qrcon{
            border-radius: 10px;
            background: #fff;
            overflow: visible;
            text-align: center;
            padding-top:25px;
            color: #555;
            box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .05);
            vertical-align: top;
            -webkit-transition: all .2s linear;
            transition: all .2s linear;
          }
          .bggrey{background-color: #f5f5f5;}
            .qrbox .left .qrcon .logo{width: 100%;}
            .qrbox .left .qrcon .title{font-size: 16px;margin: 10px auto;width: 100%;height:30px;line-height:30px;overflow:hidden;text-overflow :ellipsis }
            .qrbox .left .qrcon .price{font-size: 22px;margin: 0px auto;width: 100%;}
            .qrbox .left .qrcon .bottom{border-radius: 0 0 10px 10px;
            width: 100%;
            background: #32343d;
            color: #f2f2f2;padding:15px 0px;text-align: center;font-size: 14px;}
           .qrbox .sys{width: 60%;float: right;text-align: center;padding-top:20px;font-size: 12px;color: #ccc}
           .qrbox img{max-width: 100%;}

        .qrbox{padding:20px;}
            .qrbox .left{width: 95%;float: none;}
            .qrbox .sys{display: none;}
            .xhpay{width:100%;margin-top:15px;padding:30px 0;display:flex;flex-direction:column;justify-content:center;align-items: center;}
            .xhpay .logo{width:100px;border-radius:100px;}
            .xhpay .price{font-size:36px;color:#333;margin-top:15px;}
            .xhpaybt{width:90%;margin:15px auto;}
        .xunhu-btn {
            border-radius: 2px;
            color: #fff;
            margin: auto;
            cursor: pointer;
            padding: 10px 0px;
            font-size: 16px;
            text-align: center;

            display: block;
            text-decoration: none;
            box-shadow: none!important;
        }
        .xunhu-btn-green {
            background-color: #5fb878;
            border-color: #5fb878!important;
            box-shadow: none!important;
        }
        .xunhu-btn-border-green {
            background-color: #fff !important;
            -webkit-transition: background-color .1s ease-in-out;
            transition: background-color .1s ease-in-out;
            border: 1px solid #5fb878;
            color: #5fb878!important;
        }
        .xunhu-btn-blue {
            background-color: #11A0F8;
            border-color: #4AC8FF!important;
            box-shadow: none!important;
        }
        .xunhu-btn-border-blue {
            background-color: #fff !important;
            -webkit-transition: background-color .1s ease-in-out;
            transition: background-color .1s ease-in-out;
            border: 1px solid #4AC8FF;
            color: #999!important;
        }
        .xhtext{font-size:14px;color:#999;text-align:center}
        .xhfooter{position: absolute;bottom:10px;left:0;text-align:center;width:100%;font-size:12px;color:#ddd}



           @media (max-width : 320px){

          }
          @media ( min-width: 321px) and ( max-width:375px ){

          }