body,html {
    height: 100%;
}

.mf-online-actSystem {
    padding-top: 72px;
    background: url(../img/online_open/online_bg.png)no-repeat left bottom ;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mf-online-actSystem .wrapper {
    width: 1200px;
    height: 700px;
}

.mf-online-actSystem .wrapper .main {
    position: relative;
    left: -204px;
    margin: 50px auto;   
    padding-top: 70px;
    width: 600px;
    height: 476px;
    text-align: center;
    background: rgba(255, 255, 255, .7);
    border-radius: 60px;
    color: #2a91c8;
    box-sizing: border-box;
}
.mf-online-actSystem .wrapper .main .qr-card {
    position: absolute;
    top: 0;
    left: 600px;
    width: 408px;
    height: 476px;
    background: rgba(255, 255, 255, .7);
    border-radius: 60px;
    
}
.mf-online-actSystem .wrapper .main .qr-card .tips {
    padding: 30px 0 24px;
}
.mf-online-actSystem .wrapper .main .qr-card h2 {
    font-size: 24px;
    color: #2a91c8;
}
.mf-online-actSystem .wrapper .main .star {
    position: absolute;
    top: 66px;
    left: 52px;
}

.mf-online-actSystem .wrapper .main .title {
    margin: 0 auto;
    width: 385px;
    height: 36px;
    font-size: 32px;
    font-weight: 700;
    font-style: italic;
    background: url(../img/online_open/italic02.png)no-repeat center bottom;
    text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
    text-indent: -24px;
    letter-spacing: 7px;
}

.mf-online-actSystem .wrapper .main .tips{
    margin-top: 20px;
    font-size: 20px;
}
.mf-online-actSystem .wrapper .main .form .item {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 18px; */
}
.mf-online-actSystem .wrapper .main .form .error-tips {
    width: 92%;
    padding: 8px 0 18px;
    color: red;
}
.mf-online-actSystem .wrapper .main .form .error-tips img {
    margin-right: 8px;
}
.mf-online-actSystem .wrapper .main .form .item > div {
    margin-right: 26px;
    width: 80px;
    text-align: right;
    font-size: 22px;
    color: #2a91c8;
}

.mf-online-actSystem .wrapper .main .form .item input {
    padding-left: 20px;
    width: 320px;
    height: 40px;
    border-radius: 40px;
    font-size: 18px;
    color: #6e6e6e;
    border: 1px solid #2a91c8;
}

.mf-online-actSystem .wrapper .ctrl-btn {
    position: absolute;
    left: 50%;
    bottom: -26px;
    margin-left: -130px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    width: 260px;
    height: 56px;
    line-height: 56px;
    font-size: 20px;
    border-radius: 56px;
    box-sizing: border-box; 
    background: #fff;
}

.mf-online-actSystem .wrapper .ctrl-btn button {
    display: inline-block;
    width: 256px;
    line-height: 48px;
    text-align: center;
    border-radius: 56px;
    background-image:linear-gradient(90deg,#8ed8b0,#47c39c);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    /* -webkit-text-stroke: 1px #fff; */
    text-shadow: #52ab81 -2px 2px 6px;
    transition: all 220ms ease-in;
    cursor: pointer;
}
.mf-online-actSystem .wrapper .ctrl-btn .isAbled {
    background-image:linear-gradient(90deg,#eee,#bbb);
}
.mf-online-actSystem .wrapper .ctrl-btn button:hover {
    letter-spacing: 6px;
}