.signup-page{background: url(../../image/44/sgin-inout.jpg) no-repeat center;background-size: cover;}
.signup-page .sgin-bj{position: absolute;top: 0;left:50%;-webkit-transform: translate(-50%,-0%);}
.signup-page .container{position: relative;width:70%;margin: auto;}
.signup-page .sin-bj{background: #fff;width:600px;height:auto;position: relative;left:-230px;padding: 40px;box-shadow: 10px 10px 20px rgb(34 25 25 / 20%);margin: auto;margin-top: 50px;margin-bottom: 60px;}
.signup-page .hello{font-size: 48px;font-weight: 600;}
.signup-page .to-sign{font-size: 18px;font-weight: 600;letter-spacing:1px;margin-bottom: 20px;}
.signup-page .to-sign .home{color: #0AA4EA;}
.signup-page .to-sign .sign-up{text-decoration:revert;}
.signup-page .sin-bj .add-address .columns li{position: relative;margin-bottom: 30px;}
.signup-page .sin-bj .add-address{margin-top: 60px;position: relative;}
.signup-page .sin-bj .form-control{height: 50px;}
.signup-page .sin-bj .title{padding-bottom: 5px;font-weight: 600;}
.signup-page .sin-bj .title i{color: #f00;padding-right: 5px;}
.signup-page .sin-bj .add-address .forget{position: absolute;right: 0;bottom: -30px;color: #999;}
.signup-page .sin-bj .add-address .forget:hover{color: #000;font-weight: 600;}
.signup-page .sin-bj .info-but{position: relative;margin-top: 60px;text-align: center;}
.signup-page .sin-bj .info-but .tips{top: -30px;}
.signup-page .sin-bj .info-but .btn-c{width: 100%;}
.signup-page .btn-c .btn{width: 100%;height: 60px;font-size: 1.2rem;opacity: 1;}
.signup-page .btn-c .btn-preloader{left: 52%;top: 14px;height: 40px;padding-top: 11px;}

.signup-page .btn-c .datatips {padding: 0px;position: absolute;width: 100%; background: #fff;top: -12px;display:none;height: 131px;}
.signup-page .third-register{margin-top: 38px;display: none;}
.signup-page .third-register .third-r h3{display: flex;align-items: center;justify-content: center;}
.signup-page .third-register .third-r h3 span{padding: 0 15px;color: #999;}
.signup-page .third-register .third-r i{width:200px;height: 1px;background: #eee;}
.signup-page .third-register .third-r .t-log{display: flex;justify-content: center;}
.signup-page .third-r .t-log .facebook{display: none;}
.signup-page .third-register .third-r .t-log .google{padding-left: 0;}
.signup-page .t-log li:not(:first-child){padding-left: 15px;}
.signup-page .t-log li span {background: url(../../image/44/log-quickly.png) no-repeat;cursor: pointer;display: block;height:39px;overflow: hidden;text-indent: -999px;width:38px; margin:0px}

.signup-page .t-log .facebook span  {background-position: 0 0;}
.signup-page .t-log .google span  {background-position:-56px 0;}
.signup-page .t-log .facebook span:hover{background-position: 0 -44px}
.signup-page .t-log .google span:hover{background-position:-56px -44px;}
.signup-page .t-log .twitch span  {background-position: -168px 0;}
.signup-page .t-log .youtube span  {background-position:-225px 0;}
.signup-page .t-log .twitch span:hover{background-position: -168px -44px}
.signup-page .t-log .youtube span:hover{background-position:-225px -44px;}

/*logon*/
.signup-page .sin-bj.sin-logon{height: auto;}
.signup-page .logon{background: var(--btn-black);width: 100px;text-align: center;height:30px;line-height:26px;border-radius: 50px;opacity: .8;}
.signup-page .logon:hover{opacity: 1;}
.signup-page .logon .return{color: #fff;font-size: 14px;font-weight: 500;}
.signup-page .logon i{font-weight: 600;padding-right: 10px;}
.signup-page .sin-bj .add-address .columns-logon li .grey{color: #999;font-size: 12px;}
.signup-page .sin-bj .add-address .columns-logon{display:grid;grid-template-columns: repeat(2, 1fr);grid-auto-rows auto;grid-column-gap: 20px;grid-row-gap: 20px;}
.signup-page .sin-bj .add-address .columns-w{display: block;}
.signup-page .sin-bj .info-but .already{padding-top: 10px;}
.signup-page .sin-bj .info-but .already a{color: #FF240E;}
.signup-page .sin-bj .info-but .already a:hover{font-weight: 600;}
.signup-page .sin-bj .info-but.info-logon{margin-top: 30px;}
.sin-logon .checkbox-text label{display: flex;align-items: center;}
.sin-logon .checkbox-text label p a{color: #FF240E;}
.sin-logon .checkbox-text label p a:hover{font-weight: 600;}
.sin-logon .checkbox-text label .subscribe{position: relative;top: 2px;}
.signup-page .sin-bj.sin-logon .checkbox-text{position: relative;}
.signup-page .sin-bj.sin-logon .r-agree-check-msg{top: -30px;}

/* security */
.signup-page .sin-bj.security{width: 700px;}
.security li{margin-top:20px;border:1px solid #e0e0e0;padding:30px 0px;padding-left:108px;position:relative;}
.security li .title{font-weight:bold;font-size:16px;}
.security li p{padding-top:5px;color:#666;font-size:13px;width:60%;}
.security li:hover{border:1px solid #a4a4a4;}
.security li:hover .title{color: #3e3e3f;}
.security .a-ico,
.security .b-ico,
.security .c-ico,
.security .d-ico{background:url(../../image/44/forgot-method.png) no-repeat;width:65px;height:65px;text-align:center;position:absolute;left:22px;top:22px;}
.security .a-ico{background-position: -17px 0px}
.security .b-ico{background-position: -17px -95px}
.security .c-ico{background-position: -17px -214px}
.security .d-ico{background-position: -17px -327px}
.security .btn{position:absolute;min-width:168px;right: 36px;top: 39px;}
.security .e-ico{background:url(../../image/44/forgot-method.png) no-repeat -17px -467px;width:65px;height:65px;text-align:center;position:absolute;left:22px;top:22px;}

@media screen and (max-width:768px){
  .signup-page .container{width: auto;}
}

@media screen and (max-width:980px){
  .signup-page .sin-bj.security{width: 100%;left: auto;}
  .signup-page .container{width: 100%;}
}


@media screen and (max-width:1440px){
.signup-page .sin-bj .add-address { margin-top: 27px;}
.signup-page .sin-bj .add-address .columns-logon {grid-row-gap:0px;}
signup-page .sin-bj .add-address .columns li {margin-bottom: 8px;}
.signup-page .sin-bj{padding: 18px;    margin-top: 18px;margin-bottom: 18px;}
.signup-page .sin-bj .form-control{height: 37px}
.signup-page .hello{font-size: 36px;}
}