.user-agreement {
    cursor: pointer;
    padding-left: 0 !important;
}

    .user-agreement label {
        position: relative;
       
    }
label {
    cursor: pointer;
}

.user-agreement span {
    color: #fc6a21;
    position: relative;
}

.mask-agreement {
    display: none;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    /* 09°æ */
    -webkit-box-align: center;
    /* 12°æ */
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 900;
}

.flex-v {
    display: box; /* OLD - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.mask-agreement .content {
    width: 70%;
    height: 80%;
    background: #fff;
    padding: 42px 12px;
    word-wrap: break-word;
    position: relative;
}

    .mask-agreement .content i {
        display: block;
        width: 22px;
        height: 22px;
        background: url("../images/close-icon.png");
        background-size: 100% 100%;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
    }

    .mask-agreement .content .main {
        width: 100%;
        height: 100%;
        word-wrap: break-word;
        overflow-y: scroll;
    }