@charset "UTF-8";
/*公用样式*/
.container {
    position: relative;
    z-index: 10;
}

.color1 {
    color: #fcf84a;
    text-decoration: underline;
}

.iconfont {
    padding-right: 10px;
    font-size: 18px;
    color: #fff;
}

.reg-warn {
    color: #FF2D55;
}

.wa-icon {
    background: url(/mobile/images/register/wa-icon.png) no-repeat;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    background-size: contain;
}

.cs-icon {
    background: url(/mobile/images/register/cs-icon.png) no-repeat;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    background-size: contain;
}

.label {
    color: #fff;
}

.white {
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
}

.text-context {
    position: relative;
    margin-top: 20px;
    font-size: 14px;
}

.reg-tip {
    position: absolute;
    left: 0;
    bottom: -22px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    text-align: left;
}

.reg-tip p {
    color: #FF2D55;
}

.hide {
    display: none !important;
}

.input-cont {
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    position: relative;
    align-items: center;
    height: 44px;
    line-height: 44px;
    background: #1b2442;
    border-radius: 6px;
}

.input-cont .input {
    width: 160px;
    height: 44px;
    border: none;
    padding-left: 10px;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    background: transparent;
    color: #fff;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font-size: 16px;
    color: red;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    font-size: 16px;
    color: red;
}

input.night::-webkit-input-placeholder, textarea.night::-webkit-input-placeholder {
    font-size: 16px;
    color: #d0d0d0;
}

input.night:-moz-placeholder, textarea.night:-moz-placeholder {
    font-size: 16px;
    color: #d0d0d0;
}

.input-cont .input:focus {
    border: none !important;
    outline: none !important;
}


.code-cont {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
}

.get-message-code {
    border: none;
    box-shadow: none;
    text-align: center;
    font-size: 14px;
    color: #0A84FF;
    background: none;
    letter-spacing: -1px;
}

#message-code.darkRed {
    color: #D02443;
}

#message-code2.darkRed {
    color: #D02443;
}

#message-code.disabled {
    color: #FFFFFF;
    opacity: 0.5;
}

.submit-button {
    width: 100%;
    height: 44px;
    line-height: 44px;
    border: none;
    box-shadow: none;
    text-align: center;
    font-size: 16px;
    color: #fff;
    outline: none;
    -webkit-appearance: none;
    background-size: 100% 100%;
    border-radius: 6px;
    background: linear-gradient(180deg, #4FB3F5 0%, #2564EA 100%);
}

.submit-button.night {
    background: linear-gradient(180deg, #4FB3F5 0%, #2564EA 100%);
}

#phone-register-btn.darkRed {
    background: linear-gradient(180deg, #FF4F6E 0%, #D02443 100%);
}

#username-register-btn.darkRed {
    background: linear-gradient(180deg, #FF4F6E 0%, #D02443 100%);
}

.submit-button.disabled {
    opacity: 0.5;
}

.layui-m-layercont {
    background: #212C4A;
    border-radius: 5px 5px 0 0;
}

.layer-cont {
    color: #E1E9FF;
}

.layer-title {
    font-size: 16px;
    line-height: 50px;
}

.layer-text {
    color: #9EA7C4;
    line-height: 24px;
}

.layer-span {
    color: #0A84FF;
}

.layui-m-layerbtn {
    background: #212C4A !important;
    border: none !important
}

.layui-m-layerbtn span[no] {
    border-right: 1px solid #2A375A !important;
    color: #E1E9FF;
}

.layui-m-layerbtn span[yes] {
    color: #9EA7C4 !important;
}

/*注册*/

.index-wrap, .night .index-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    color: #fff;
    background: url(/mobile/images/register/login.jpg) no-repeat center top / 100% 100%;

}

.world-font {
    width: 220px;
    height: 87px;
    position: absolute;
    left: 50%;
    bottom: 55px;
    transform: translateX(-50%);
    background: url(/mobile/images/register/world-font.png) no-repeat center top / 100% 100%;
    z-index: 3;
}

video#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
    z-index: 2;
}


.content {
    /* display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5; */
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
}

.login-main-content,
.reg-main-content {
    margin-top: 20%;
    text-align: center;
    padding: 0 15px;
}

.reg-moveon {
    margin-top: 10% !important;
}


.header-cont {
    height: 43px;
    text-align: center;
    background: url('/mobile/images/register/logo4.png') no-repeat center center / auto 100%;
}

.reg-main-content .header-cont,
.login-main-content .header-cont {
    margin: 70px auto 40px;
}

.phone-bg {
    justify-content: center;
}

.left-cont {
    flex: 7;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    color: #333;
}

.right-cont {
    width: 40px;
    padding: 100px 12px 0;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
}

.tips {
    font-size: 12px;
    color: #fff;
}

.imgCode {
    position: absolute;
    top: 10px;
    right: 0;
    height: 25px;
    border-radius: 4px;
}

.way-cont {
    position: relative;
}

.register-list {
    display: none;
}

.register-list.active {
    display: block;
}


.protocol-tips {
    display: block;
    padding: 20px 0;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

.xy {
    color: #0A84FF;
    text-decoration: underline;
    margin-left: 5px;
}

#regCode {
    width: 67%;
}


.register-tips {
    display: block;
    height: 44px;
    line-height: 44px;
    border-radius: 6px;
    font-size: 16px;
    border: 0.5px solid rgba(0, 122, 255, 0.5);
    color: #0A84FF;
}

/*登录*/
.reg-change-cont {
    position: relative;
    height: 40px;
    line-height: 38px;
    margin-bottom: 20px;
}

.login-change-cont {
    position: relative;
    height: 40px;
    line-height: 38px;
}

.reg-change-cont li,
.login-change-cont li {
    position: relative;
    flex: 1;
    font-size: 16px;
    transition: all .3s;
    border-radius: 6px;
    color: #fff;
    opacity: 0.5;
    letter-spacing: 1px;
}

.reg-change-cont li.active::after,
.login-change-cont li.active::after {
    position: absolute;
    content: '';
    width: 48px;
    height: 4px;
    background: #fff;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
}

.reg-change-cont li.active,
.login-change-cont li.active {
    color: #fff;
    opacity: 1;
}

.reg-change-cont li.active:nth-child(2),
.login-change-cont li.active:nth-child(2) {
    color: #fff;
    opacity: 1;
}

.login-phone-left-cont {
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    color: #333;
}

.login-account-left-cont {
    width: 100%;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    color: #333;
}

.forget-box {
    position: relative;
}

.forget-pwd-link {
    position: absolute;
    right: 0;
    display: block;
    text-align: right;
    margin: 20px auto 40px;
    color: #877E89;
}

.login-footer {
    padding: 20px 34px;
    color: #877E89;
}

.login-footer .link-cont {
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.login-footer .link-cont.night {
    color: rgba(255, 236, 236, 0.5);
}

.input::placeholder {
    color: #979797;
}

.input.night {
    color: white;
    opacity: 0.5;
}

/* 德甲法兰克 */
.login-partner {
    height: 70px;
    margin-top: 30px;
    background: url(/mobile/images/register/login-partner1.png) no-repeat center center / auto 100%;
}


/*协议弹窗*/
.layer-protocol .layui-layer-title {
    background: #bb9a55;
    color: #fff;
}

.layer-protocol .layui-layer-btn {
    text-align: center;
    padding: 6px 10px;
}

.layer-protocol .layui-layer-btn .layui-layer-btn0 {
    background: #bb9a55;
    border: none;
}

/*密码小眼睛显示隐藏*/
.account-icon {
    position: absolute;
    right: 10px;
    width: 35px;
    height: 44px;
    border-radius: 4px 0 0 4px;
    background: transparent url(../images/login/login-sprite4.png) no-repeat 8px -118px;
}

.account-icon.active {
    background: transparent url(../images/login/show2.png) no-repeat center 15px;
}

.clear-icon {
    position: absolute;
    right: 15px;
    width: 20px;
    height: 20px;
    background: url(/mobile/images/register/clear.png) no-repeat;
    display: none;
}

.icon-index-close {
    display: none;
    position: absolute;
    right: 10px;
    color: #d0d0d0;
}

.layui-m-layer-layer-protocol .layui-m-layercont {
    height: 300px;
    overflow: auto;
    text-align: left;
    color: #666;
    padding: 0 20px;
}

.layui-m-layer-layer-protocol .layui-m-layercont h3 {
    color: #333;
}

.reg-logo {
    width: 172px;
}

.mgt20 {
    margin-top: 20px;
}

/*用户协议*/
#p-content {
    line-height: 1.5;
    color: #5C6686;
}

.h4 {
    padding: 10px 0;
    font-size: 14px;
    color: #9EA7C4;
}

.logo-wrapper {
    /* display: flex; */
    display: none;
    width: 100%;
    height: 50px;
    margin: 30px auto 0;
}

.logo-wrapper li {
    position: relative;
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}

.logo-wrapper li img {
    width: 30px;
    height: 30px;
}

.logo-wrapper .big {
    width: 50px;
    height: 50px;
}

.logo-wrapper li:after {
    position: absolute;
    content: "|";
    width: 1px;
    height: 15px;
    color: #4F5566;
    right: 0;
    top: 50%;
    transform: translate(-50%);
}

.logo-wrapper li:last-child:after {
    content: "";
}

.logo-wrapper li p {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    color: #9EA7C4;
}

/* 语音验证码 */
.getTelCode {
    color: rgba(255, 255, 250, 0.5);
    display: block;
    text-align: right;
    margin: 20px 0;
}

.getTelCode span {
    color: #0A84FF;
}

.layui-m-layer-msg .layui-m-layercont {
    color: #D7D7D7;
}

body .getFromTel {
    width: 300px !important;
    height: 236px !important;
    background: #212C4A !important;
}

body .getFromTel .layui-m-layercont {
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #5C6A8F;
}

body .getFromTel.layui-m-layerchild h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: #E1E9FF;
    padding-top: 20px;
    height: auto;
}

body .getFromTel .tel-get {
    background: #007AFF;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    width: 260px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px 0px 0px 0px;
    margin: 20px auto;
}

body .getFromTel .tel-close {
    color: #9EA7C4;
}

body .getFromTel .layui-m-layercont .msg {
    font-size: 18px;
    height: 90px;
    line-height: 90px;
    color: #9EA7C4;
}

.reg-container {
    margin: 42px auto 20px;
}

.spokePerson {
    box-sizing: border-box;
    width: 100%;
    margin-top: 28px;
}

.inputHover {
    border: 1px solid #007AFF;
}

.inputWrong {
    border: 1px solid #FF3434 !important;
}

.log-reg {
    line-height: 20px;
    color: #FF2D55;
    font-size: 12px;
    text-align: left;
}

.icon-red {
    color: #FF2D55 !important;
}

/* 语音验证码 */

/* 注册引导页面 */
.regGuide-container {
    margin-top: 50px;
}

.regGuide-container .name-info {
    position: relative;
    width: 100%;
    height: 74px;
    margin-bottom: 17px;
    border-radius: 5px;
}

.guide-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -37px;
    width: 75px;
    height: 75px;
    box-sizing: border-box;
    background: #480000 url('/mobile/images/registerGuide/logo.png') no-repeat center center / 40px 40px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.regGuide-container .name-info p {
    padding-top: 44px;
}

.regGuide-container .gift-box {
    padding: 10px;
    border-radius: 6px;
}

.gift-box h2 {
    font-size: 18px;
    text-align: left;
}

.gift-box li {
    box-sizing: border-box;
    height: 66px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.regGuide-container .icon-part {
    display: flex;
}

.regGuide-container .icon-part img {
    width: 44px;
    height: 44px;
    margin-right: 5px;
}

.regGuide-container .icon-part > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.regGuide-container .icon-part > div h3 {
    font-size: 12px;
    color: #fff;
}

.regGuide-container .icon-part div h3 span {
    color: #FF3434;
}

.regGuide-container .icon-part div p {
    font-size: 10px;
    color: #9095A4;
    margin-top: 5px;
    text-align: left;
}

.regGuide-container .btn-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.regGuide-container .btn-part > img {
    display: inline-block;
    width: 44px;
    height: 44px;
}

.regGuide-container .btn-part > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #FFC964;
    color: #FFC964;
    font-size: 12px;
    width: 68px;
    height: 24px;
    border-radius: 50px;
    margin-left: 5px;
}

.regGuide-container .name-info, .gift-box {
    box-sizing: border-box;
    background: #212C4A;
}

.regGuide-container .goGame {
    display: block;
    margin-top: 17px;
    font-size: 12px;
    color: #8B8E9C;
}

/* 注册引导页面 */

@media (max-width: 374px) {

    .main-wrap .container {
        height: 150%;
    }

}

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

}