.grlv1 {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 90;
    left: 0;
    top: 0;
    z-index: 99999;
}

.grlv1__bg {
    width: 100%;
    height: 100%;
    background-image: url(about:blank);
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50);
    display: block;
}

.grlv1__frame {
    width: 422px;
    background: #fff;
    -webkit-box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
    position: absolute;
}

.grlv1 * {
    font-family: Tahoma, \5fae\8f6f\96c5\9ed1, Helvetica, arial;
    margin: 0;
    padding: 0;
}

.grlv1__title {
    height: 20px;
    padding: 22px 0 20px 0;
}

.grlv1__fixed {
    zoom: 1;
}

.grlv1__titleName {
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    color: #ff2400;
    border-left: 6px #ff2400 solid;
    padding-left: 14px;
    font-weight: 400;
    float: left;
    display: none;
}

.grlv1 a {
    color: #7e7e7e;
    text-decoration: none;
}

.grlv1__cose {
    width: 36px;
    height: 36px;
    display: inline-block;
    _zoom: 1;
    _display: inline;
    text-indent: -999px;
    overflow: hidden;
    position: absolute;
    right: -40px;
    top: 5px;
    background-image: url(../image/_sprite__img.png);
    background-position: -136px -132px;
}

a {
    outline: none;
    cursor: pointer;
}

.grlv1__lt {
    position: absolute;
    display: inline-block;
    _zoom: 1;
    _display: inline;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #f1f1f1;
    height: 55px;
    border-bottom: 1px solid #dedede;
}

.grlv1 li {
    list-style: none;
    vertical-align: top;
}

.grlv1__ltList {
    display: inline;
}

.grlv1__ltList--current a {
    background-color: #fff;
    line-height: 56px;
}

.grlv1 a {
    color: #ff7800;
    text-decoration: none;
}

.grlv1__ltSwitch {
    display: block;
    overflow: hidden;
    width: 210.5px;
    line-height: 55px;
    float: left;
    text-align: center;
}

.grlv1__loading {
    height: 276px;
    background: url(http://123.99.192.180:89/css/loading.gif) center 40% no-repeat;
}

.grlv1__getMobileImgCode,
.grlv1__logged,
.grlv1__login,
.grlv1__phLogin,
.grlv1__reg,
.grlv1__regImgCode,
.grlv1__verified {
    padding: 0 24px;
}

.grlv1__loggedInfo {
    padding-bottom: 10px;
}

.grlv1 .grlv1__loggedAvatar {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    position: relative;
    background: url(http://123.99.192.180:89/css/loading.gif) center center no-repeat;
}

.grlv1 .grlv1__imgScript,
.grlv1 .grlv1__uiCheckbox {
    display: inline-block;
    background-image: url(../image/_sprite__img.png);
    background-repeat: no-repeat;
}

.grlv1__loggedTitle {
    text-align: center;
    font-size: 16px;
    color: #7f7f7f;
    height: 40px;
    line-height: 40px;
    padding-top: 10px;
}

.grlv1__formInputList {
    padding-top: 26px;
}

.grlv1__fixed {
    zoom: 1;
}

.grlv1__inputBox {
    position: relative;
    height: 40px;
}

.grlv1__inputBLine {
    height: 2px;
    position: relative;
    overflow: hidden;
}

.grlv1 input {
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.grlv1__inputBox .grlv1__inputTxtTip {
    cursor: text;
}

.grlv1__inputTxtTip {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.grlv1__inputPdText {
    color: #a7a7a7;
    padding-right: 10px;
}

.grlv1__formList--error .grlv1__inputPdTipText {
    color: red;
    display: inline;
}

.grlv1__inputPdTipText {
    color: #bbb;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: -14px;
    height: 20px;
    line-height: 20px;
    display: none;
}

.grlv1__inputBLine {
    height: 2px;
    position: relative;
    overflow: hidden;
}

.grlv1__validformTipLine--default {
    width: 100%;
    background-color: #e7e6e6;
}

.grlv1__validformTipLine {
    width: 0%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    display: block;
}

.grlv1__validformTipLine--error {
    background-color: #ff8f8f;
}

.grlv1__formList--error .grlv1__validformTipLine--error {
    width: 100%;
}

.grlv1__formList--error .grlv1__validformTipLine--success {
    width: 0%;
}

.grlv1__validformTipLine--success {
    background-color: #80c872;
}

.grlv1 input,
.grlv1 textarea {
    outline: 0;
}

.grlv1__inputTxtWhole {
    width: 100%;
}

.grlv1__inputTxt {
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    border: 0;
    font-size: 18px;
    background: 0 0;
    position: relative;
    z-index: 2;
}

.grlv1 .grlv1__imgScript,
.grlv1 .grlv1__uiCheckbox {
    display: inline-block;
    background-image: url(../image/_sprite__img.png);
    background-repeat: no-repeat;
}




/* 重置所有元素的内边距、外边距和盒模型为border-box */
*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* 设置form的样式 */
form {
    max-width: 260px;
    /* 设置form的最大宽度为260px */
    width: 100%;
    /* 设置form的宽度为100% */
    margin: 0 auto;
    /* 设置form的水平居中 */
    height: 100%;
    /* 设置form的高度为100% */
    display: flex;
    /* 将form的子元素设置为flex布局 */
    flex-direction: column;
    /* 设置form的子元素在垂直方向上排列 */
    justify-content: space-evenly;
    /* 在form的子元素之间均匀分布空间 */
    grid-column: 1/2;
    /* 设置form的列为1到2 */
    grid-row: 1/2;
    /* 设置form的行为1到2 */
    transition: opacity 0.02s 0.4s;
    /* 设置form的过渡效果 */
}


/* 设置.logo的样式 */
.logo {
    display: flex;
    /* 将.logo的子元素设置为flex布局 */
    align-items: center;
    /* 在.logo的子元素之间垂直居中 */
}

/* 设置.logo img的样式 */
.logo img {
    height: 27px;
    /* 设置.logo img的高度为27px */
    margin-right: .3rem;
    /* 设置.logo img的右侧外边距为0.3rem */
}

/* 设置.logo h4的样式 */
.logo h4 {
    font-size: 1.1rem;
    /* 设置.logo h4的字体大小为1.1rem */
    letter-spacing: 0.5px;
    /* 设置.logo h4的字母间距为0.5px */
    color: floralwhite;
    /* 设置.logo h4的字体颜色为#151111 */
}


/* 选择所有具有.heading类的元素下的h2元素 */
.heading h2 {
    /* 设置字体大小为2.1rem */
    font-size: 2.1rem;
    /* 设置字体粗细为600 */
    font-weight: 600;
    /* 设置字体颜色为#151111 */
    color: aqua;
}

/* 选择所有具有.heading类的元素下的h6元素 */
.heading h6 {
    /* 设置字体大小为0.75rem */
    font-size: 0.75rem;
    /* 设置字体粗细为400 */
    font-weight: 400;
    /* 将元素显示为行内元素 */
    display: inline;
    /* 设置字体颜色为#bababa */
    color: aqua;
}

/* 选择所有具有.toggle类的元素 */
.toggle {
    /* 设置字体颜色为#bbb */
    color: white;
    /* 设置文本阴影 */
    text-shadow: 0 0 20px #bababa;
    /* 去除文本装饰 */
    text-decoration: none;
    /* 设置字体大小为0.75rem */
    font-size: 0.75rem;
    /* 设置字体粗细为500 */
    font-weight: 500;
    /* 设置过渡效果为0.3秒 */
    transition: .3s;
}

/* 当鼠标悬停在.toggle元素上时 */
.toggle:hover {
    /* 设置字体颜色为#8371f6 */
    color: #8371f6;
}


/* 选择所有具有.input-wrap类的元素 */
.input-wrap {
    /* 设置相对定位 */
    position: relative;
    /* 设置高度为37像素 */
    height: 37px;
    /* 设置下边距为2rem */
    margin-bottom: 2rem;
}

/* 选择所有具有.input-field类的元素 */
.input-field {
    /* 设置绝对定位 */
    position: absolute;
    /* 设置宽度为100% */
    width: 100%;
    /* 设置高度为100% */
    height: 100%;
    /* 设置背景为透明 */
    background: none;
    /* 去除边框 */
    border: none;
    /* 去除外边框 */
    outline: none;
    /* 设置底部边框为1像素的实线，颜色为#bbb */
    border-bottom: 1px solid #bbb;
    /* 去除内边距 */
    padding: 0;
    /* 设置字体大小为0.95rem */
    font-size: 0.95rem;
    /* 设置字体颜色为#151111 */
    color: #151111;
    /* 设置过渡效果为0.4秒 */
    transition: 0.4s;
}

/* 选择所有label元素 */
label {
    /* 设置绝对定位 */
    position: absolute;
    /* 设置左侧为0 */
    left: 0;
    /* 设置顶部为50% */
    top: 50%;
    /* 将元素向上移动50% */
    transform: translateY(-50%);
    /* 设置字体大小为0.95rem */
    font-size: 0.95rem;
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 禁用指针事件 */
    pointer-events: none;
    /* 设置过渡效果为0.4秒 */
    transition: 0.4s;
}

/* 当输入框处于活动状态时 */
.input-field:active {
    /* 设置底部边框颜色为#151111 */
    border-bottom-color: #151111;
}

/* 当输入框处于活动状态时，其后面的label元素 */
.input-field.active+label {
	/* 设置字体颜色为 */
	 color: #ff7800;
    /* 设置字体大小为0.75rem */
    font-size: 1.0rem;
    /* 将元素向上移动15像素 */
    top: -15px;
}


/* 选择所有具有.sign-btn类的元素 */
.sign-btn {
    /* 设置为内联块元素 */
    display: inline-block;
    /* 设置宽度为100% */
    width: 100%;
    /* 设置高度为43像素 */
    height: 43px;
    /* 设置背景颜色为#151111 */
    background: #b7b2a9;
    /* 设置字体颜色为白色 */
    color: #fff;
    /* 去除边框 */
    border: none;
    /* 设置光标为手型 */
    cursor: pointer;
    /* 设置圆角为0.8rem */
    border-radius: 0.8rem;
    /* 设置下边距为2rem */
    margin-bottom: 2rem;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
}


/* 当鼠标悬停在.sign-btn元素上时 */
.sign-btn:hover {
    /* 设置背景颜色为#8371f6 */
    background-color: #8371f6;
}

/* 选择所有具有.text类的元素 */
.text {
    /* 设置为弹性盒子 */
    display: flex;
    /* 设置字体颜色为白色 */
    color: white;
    /* 设置文本阴影 */
    text-shadow: 0 0 20px #b7b2a9;
    /* 设置字体大小为0.7rem */
    font-size: 0.7rem;
}

/* 选择所有.text元素内的a元素 */
.text a {
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
}

/* 当鼠标悬停在.text元素内的a元素上时 */
.text a:hover {
    /* 设置字体颜色为#8371f6 */
    color: #8371f6;
}


/* 当处于注册模式下的登录表单 */
main.sign-up-mode form.sign-in-form {
    /* 设置透明度为0 */
    opacity: 0;
    /* 禁用指针事件 */
    pointer-events: none
}

/* 当处于注册模式下的注册表单 */
main.sign-up-mode form.sign-up-form {
    /* 设置透明度为1 */
    opacity: 1;
    /* 启用指针事件 */
    pointer-events: all
}

/* 当处于注册模式下的表单容器 */
main.sign-up-mode .forms-wrap {
    /* 设置左侧位置为55% */
    left: 55%;
}

/* 当处于注册模式下的轮播容器 */
main.sign-up-mode .carousel {
    /* 设置左侧位置为0% */
    left: 0%;
}

/* 选择所有.carousel元素 */
.carousel {
    /* 设置圆角为2rem */
    border-radius: 2rem;
    /* 设置内边距为2rem */
    padding: 2rem;
    /* 设置为绝对定位 */
    position: absolute;
    /* 设置溢出隐藏 */
    overflow: hidden;
    /* 设置高度为100% */
    height: 100%;
    /* 设置宽度为55% */
    width: 55%;
    /* 设置左侧位置为45% */
    left: 45%;
    /* 设置顶部位置为0 */
    top: 0;
    /* 设置阴影效果 */
    box-shadow: 0 0 5px #b7b2a9;
    /* 设置背景颜色为透明 */
    background-color: transparent;
    /* 设置为网格布局 */
    display: grid;
    /* 设置过渡效果为0.8秒 */
    transition: 0.8s ease-in-out;
    /* 设置为相对定位 */
    position: relative;
    /* 设置网格行模板 */
    grid-template-rows: auto 1fr;
}


/* 选择所有.images-wrapper元素 */
.images-wrapper {
    /* 设置为网格布局 */
    display: grid;
    /* 设置网格列模板 */
    grid-template-columns: 2fr;
    /* 设置网格行模板 */
    grid-template-rows: 1fr;
}

/* 选择所有.image元素 */
.image {
    /* 设置宽度为100% */
    width: 100%;
    /* 设置网格列为1到2 */
    grid-column: 1/2;
    /* 设置网格行为1到2 */
    grid-row: 1/2;
    /* 设置透明度为0 */
    opacity: 0;
    /* 设置过渡效果 */
    transition: opacity 0.3s, transform 0.5s;
}

/* 选择所有.img-1元素 */
.img-1 {
    /* 设置向上平移50像素 */
    transform: translate(0, -50px);
}

/* 选择所有.img-2元素 */
.img-2 {
    /* 设置水平和垂直缩放 */
    transform: scale(0.4, 0.5);
}

/* 选择所有.img-3元素 */
.img-3 {
    /* 设置缩放和旋转 */
    transform: scale(0.3), rotate((-20deg));
}

/* 选择所有具有.show类的.image元素 */
.image.show {
    /* 设置透明度为1 */
    opacity: 1;
    /* 取消所有变换效果 */
    transform: none;
}


/* 选择所有.text-slider元素 */
.text-slider {
    /* 设置为flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 设置主轴方向为垂直 */
    flex-direction: column;
}

/* 选择所有.text-wrap元素 */
.text-wrap {
    /* 设置最大高度为2.2rem */
    max-height: 2.2rem;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 底部外边距为2.5rem */
    margin-bottom: 2.5rem;
}

/* 选择所有.text-group元素 */
.text-group {
    /* 设置为flex布局 */
    display: flex;
    /* 设置主轴方向为垂直 */
    flex-direction: column;
    /* 文本居中 */
    text-align: center;
    /* 初始位置为不偏移 */
    transform: translateY(0);
    /* 过渡效果为0.5秒 */
    transition: 0.5s;
}

/* 选择所有.text-group元素下的h2元素 */
.text-group h2 {
    /* 设置行高为2.2rem */
    line-height: 2.2rem;
    /* 设置字体粗细为600 */
    font-weight: 600;
    /* 设置字体大小为1.6rem */
    font-size: 1.6rem;
}


/* 选择所有.bullets元素 */
.bullets {
    /* 顶部外边距为20px */
    margin-top: 20px;
    /* 设置为flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}

/* 选择所有.bullets元素下的span元素 */
.bullets span {
    /* 设置为块级元素 */
    display: block;
    /* 宽度为0.5rem */
    width: 0.5rem;
    /* 高度为0.5rem */
    height: 0.5rem;
    /* 圆角为0.2rem */
    border-radius: 0.2rem;
    /* 背景颜色为白色 */
    background-color: white;
    /* 设置阴影 */
    box-shadow: 20px #b7b2a9;
    /* 左右外边距为0.25rem */
    margin: 0 0.25rem;
    /* 鼠标指针为手型 */
    cursor: pointer;
    /* 过渡效果为0.3秒 */
    transition: .3s;
}

/* 选择所有.bullets元素下的.active元素 */
.bullets span.active {
    /* 宽度为1.1rem */
    width: 1.1rem;
    /* 背景颜色为aqua */
    background-color: aqua;
    /* 圆角为1rem */
    border-radius: 1rem;
}


/* 当屏幕宽度小于等于850px时生效 */
@media (max-width:850px) {

    /* 选择所有.box元素 */
    .box {
        /* 高度自适应 */
        height: auto;
        /* 最大宽度为550px */
        max-width: 550px;
        /* 溢出隐藏 */
        overflow: hidden;
    }

    /* 选择所有.inner-box元素 */
    .inner-box {
        /* 位置为默认值 */
        position: static;
        /* 变换为默认值 */
        transform: none;
        /* 宽度为默认值 */
        width: revert;
        /* 高度为默认值 */
        height: revert;
        /* 上下左右内边距为2rem */
        padding: 2rem;
    }

    /* 选择所有.forms-wrap元素 */
    .forms-wrap {
        /* 位置为默认值 */
        position: revert;
        /* 宽度为100% */
        width: 100%;
        /* 高度为100% */
        height: 100%;
    }

    /* 选择所有.form元素 */
    .form {
        /* 最大宽度为默认值 */
        max-width: revert;
        /* 上内边距为1.5rem，左右内边距为2.5rem，下内边距为2rem */
        padding: 1.5rem 2.5rem 2rem;
        /* 过渡效果为0.8秒，缓动函数为ease-in-out，透明度过渡效果为线性 */
        transition: transform 0.8s ease-in-out, opacity 0.4s linear;
    }

    /* 选择所有.heading元素 */
    .heading {
        /* 上下外边距为2rem，左右外边距为0 */
        margin: 2rem 0;
    }

    /* 选择所有.sign-up-form元素 */
    form.sign-up-form {
        /* 向右偏移100% */
        transform: translateX(100%);
    }

    /* 选择所有.sign-up-mode元素下的.sign-in-form元素 */
    main.sign-up-mode form.sign-in-form {
        /* 向左偏移100% */
        transform: translateX(-100%);
    }

    /* 选择所有.sign-up-mode元素下的.sign-up-form元素 */
    main.sign-up-mode form.sign-up-form {
        /* 不偏移 */
        transform: translateX(0%);
    }

    /* 选择所有.carousel元素 */
    .carousel {
        /* 位置为默认值 */
        position: revert;
        /* 高度自适应 */
        height: auto;
        /* 宽度为100% */
        width: 100%;
        /* 上下内边距为3rem，左右内边距为2rem */
        padding: 3rem 2rem;
        /* 设置为flex布局 */
        display: flex;
    }

    /* 选择所有.images-wrapper元素 */
    .images-wrapper {
        /* 隐藏 */
        display: none;
    }

    /* 选择所有.text-slider元素 */
    .text-slider {
        /* 宽度为100% */
        width: 100%;
    }
}


/* 当屏幕宽度小于等于530px时生效 */
@media (max-width:530px) {

    /* 选择所有main元素 */
    main {
        /* 上下左右内边距为1rem */
        padding: 1rem;
    }

    /* 选择所有.box元素 */
    .box {
        /* 边框半径为2rem */
        border-radius: 2rem;
    }

    /* 选择所有.inner-box元素 */
    .inner-box {
        /* 上下左右内边距为1rem */
        padding: 1rem;
    }

    /* 选择所有.carousel元素 */
    .carousel {
        /* 上下内边距为1.5rem，左右内边距为1rem */
        padding: 1.5rem 1rem;
        /* 边框半径为1.6rem */
        border-radius: 1.6rem;
    }

    /* 选择所有.text-wrap元素 */
    .text-wrap {
        /* 下外边距为1rem */
        margin-bottom: 1rem;
    }

    /* 选择所有.text-group元素下的h2元素 */
    .text-group h2 {
        /* 字体大小为1.2rem */
        font-size: 1.2rem;
    }

    /* 选择所有form元素 */
    form {
        /* 上内边距为1rem，左右内边距为2rem，下内边距为1.5rem */
        padding: 1rem 2rem 1.5rem;
    }
}