@keyframes spin1{
	0%{transform:rotate(360deg)}
	100%{transform:rotate(0deg)}
}

.account_box{display: flex;height: 100vh;}
.account_box .left_bar{width: 50%;flex: 1;display: flex;justify-content: center;align-items: center;padding: 10px;background-color: #fff;z-index: 1;}
.account_box .right_bar{width: 50%;background-image: url(../images/account/right_bg.jpg);background-size: cover;position: relative;overflow: hidden;}
.account_box .right_bar .circle1{width: 37.8vw;height: 37.8vw;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.account_box .right_bar .circle1 .spin{width: 100%;height: 100%;border: 2px dashed #fff;border-radius: 100%;animation: spin 120s infinite linear;}
.account_box .right_bar .circle1 .avatar1{width: 5.88vw;height: 5.88vw;position: absolute;top: 7.81vw;right: -2.34vw;}
.account_box .right_bar .circle1 .avatar2{width: 3.95vw;height: 3.95vw;position: absolute;top: 27.6vw;left: 2.6vw;}
.account_box .right_bar .circle2{width: 27.8vw;height: 27.8vw;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.account_box .right_bar .circle2 .spin{width: 100%;height: 100%;border: 2px dashed #fff;border-radius: 100%;animation: spin1 150s infinite linear;}
.account_box .right_bar .circle2 .avatar3{width: 5.31vw;height: 5.31vw;position: absolute;top: 9.89vw;left: -2.6vw;}
.account_box .right_bar .circle2 .avatar4{width: 3.07vw;height: 3.07vw;position: absolute;top: 15.82vw;right: -1.56vw;}
.account_box .right_bar .theme{width: 20vw;max-width: 90%;height: 770px;max-height: 90vh;top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;background-color: #fff;border-radius: 30px;overflow: hidden;}
.account_box .right_bar .theme img{max-height: none;}
.account_box .head_logo{text-align: center;margin-bottom: 20px;}
.account_box .head_title{font-size: 40px;text-align: center;font-weight: bold;}
.account_box .head_subtitle{font-size: 20px;color: #495567;text-align: center;margin-top: 20px;}
.account_box .head_subtitle a{color: #4f46e5;}
.account_box .google_button{height: 50px;line-height: 50px;position: relative;overflow: hidden;width: 414px;margin: 0 auto;margin-top: 30px;max-width: 100%;}
.account_box .google_button .g_id_signin{width: 100%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);opacity: 0;z-index: 2;}
.account_box .google_button .replace{width: 100%;height: 100%;border: 1px solid #d5d5d5;border-radius: 50px; position: absolute;top: 0;left: 0;z-index: 1;text-align: center;box-sizing: border-box;font-size: 15px;}
.account_box .google_button .replace img{width: 18px;height: 18px;margin-right: 10px;vertical-align: text-top;}
.account_box .google_line{text-align: center;position: relative;width: 414px;margin: 25px auto 15px auto;max-width: 100%;}
.account_box .google_line span{display: inline-block;line-height: 25px;background-color: #fff;padding: 0 30px;position: relative;z-index: 2;font-size: 16px;color: #40444f;}
.account_box .google_line::after{content: '';width: 100%;height: 1px;background-color: #ddd;position: absolute;top: 13px;left: 0;z-index: 1;}
.account_box .form_item .input input.error{border-color: #f00;background-color: #fffafa;}
.account_box .form_item .input .eye{width: 25px;height: 25px;position: absolute;right: 13px;top: 13px;background: url(../images/account/icon_eye.png) center no-repeat;cursor: pointer;}
.account_box .form_item .input .eye.active{background-image: url(../images/account/icon_eye_cur.png);}
.account_box .form_item .error_tips{color: #ff5353;height: 25px;margin-top: 5px;}
.account_box .form_item .input_tips{color: #97a2b6;margin-top: 5px;}
.account_box .form_box .form_button{margin-top: 30px;}

#signup{max-height: 90vh;overflow: auto;box-sizing: border-box;}
#signup .form_box{width: 414px;margin: 0 auto;max-width: 100%;}
#signup .agreement{margin-top: 10px;}
#signup .agreement a{color: #4f46e5;}
#signup .agreement .checkbox{width: 22px;height: 22px;border: 1px solid #5d55e7;border-radius: 3px;display: inline-block;vertical-align: middle;margin-right: 3px;cursor: pointer;}
#signup .agreement .checkbox.active{background-image: url(../images/icon_checkbox.png);background-repeat: no-repeat;background-position: center;background-color: #5149e5;}
#signup .agreement input{display: none;}

#login{max-height: 90vh;overflow: auto;box-sizing: border-box;}
#login .form_box{width: 414px;margin: 0 auto;max-width: 100%;}
#login .forget{text-align: center;margin-top: 15px;}
#login .forget a{font-size: 16px;color: #755cde;}

#start{max-height: 90vh;overflow: auto;box-sizing: border-box;}
#start .enter{width: 525px;margin: 0 auto;max-width: 100%;}
#start .enter .item{display: flex;padding: 25px;border: 2px solid #f2f4f8;margin-top: 17px;border-radius: 10px;align-items: center;}
#start .enter .item .icon{margin-right: 20px;margin-top: 5px;}
#start .enter .item .info{flex: 1;}
#start .enter .item .info .title{font-size: 20px;font-weight: bold;}
#start .enter .item .info .brief{color: #2d355f;margin-top: 5px;}
#start .enter .item:hover{border-color: #ad9dff;}
#start .enter .item:hover .info .title{color: #ad9dff;}
#start .enter .item:first-child{margin-top: 25px;}

#forget{min-height: 100vh;display: flex;flex-direction: column;background-color: #f7faff;}
#forget .main{flex: 1;display: flex;justify-content: center;align-items: center;}
#forget .box{max-width: 590px;padding: 20px;}
#forget .box.large{max-width: 650px;}
#forget .h1{font-size: 36px;font-weight: bold;text-align: center;}
#forget .h2{font-size: 20px;color: #495567;text-align: center;margin-top: 20px;line-height: 1.5;}
#forget .h3{font-size: 18px;color: #495567;margin-top: 20px;text-align: center;line-height: 2;}
#forget .form_box{margin-top: 40px;}
#forget .form_box.small{max-width: 416px;margin-left: auto;margin-right: auto;}
#forget .form_box .form_button{margin-top: 30px;}
#forget .back{text-align: center;margin-top: 20px;}
#forget .back a{font-size: 16px;color: #5046e5;}
#forget .email{font-size: 18px;font-weight: bold;color: #5e55e7;text-align: center;margin-top: 5px;}
#forget .input .eye{width: 25px;height: 25px;position: absolute;right: 13px;top: 13px;background: url(../images/account/icon_eye.png) center no-repeat;cursor: pointer;}
#forget .input .eye.active{background-image: url(../images/account/icon_eye_cur.png);}
#forget .input_tips{color: #97a2b6;margin-top: 5px;}

#verify-email{min-height: 100vh;display: flex;flex-direction: column;background-color: #f7faff;}
#verify-email .main{flex: 1;display: flex;justify-content: center;align-items: center;}
#verify-email .box{max-width: 650px;padding: 20px;}
#verify-email .h1{font-size: 32px;font-weight: bold;text-align: center;}
#verify-email .h2{font-size: 20px;color: #000514;text-align: center;margin-top: 25px;line-height: 1.8;}
#verify-email .h1 a,
#verify-email .h2 a{color: #5046e5;}
#verify-email .resend{width: 335px;margin: 25px auto 0 auto;}
#verify-email .resend a{display: inline-block;}
#verify-email .resend a.current{background-color: #888;cursor: no-drop;}
#verify-email .resend span{margin-left: 5px;}

@media (max-width: 768px) {
	.account_box .left_bar{width: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-width: 90vw;border-radius: 15px;}
	.account_box .right_bar{width: 100%;}
	.account_box .right_bar .circle1{width: 86.53vw;height: 86.53vw;}
	.account_box .right_bar .circle1 .avatar1{width: 14.71vw;height: 14.71vw;top: 19.53vw;right: -6.55vw;}
	.account_box .right_bar .circle1 .avatar2{width: 9.89vw;height: 9.89vw;top: 69.01vw;left: 12.51vw;}
	.account_box .right_bar .circle2{width: 61.53vw;height: 61.53vw}
	.account_box .right_bar .circle2 .avatar3{width: 13.28vw;height: 13.28vw;top: 24.73vw;left: -6vw;}
	.account_box .right_bar .circle2 .avatar4{width: 7.68vw;height: 7.68vw;top: 39.06vw;right: -1.96vw;}
	.account_box .right_bar .theme{display: none;}
	#signup, #login, #start{padding: 30px;}
	.account_box .head_title{font-size: 28px;}
	.account_box .head_subtitle{font-size: 16px;}
	.account_box .form_box .form_button{font-size: 16px;margin-top: 15px;}
}
@media (max-width: 500px) {
	#signup, #login, #start{padding: 10px;}
}