#register-page{background-image: url(../images/register.png);background-position: center;background-size: cover;padding-bottom: 100px;padding-top: 20px;}




.form-box{width: 480px;background-color: #fff;border-radius: 10px;float: right;padding:0 30px;padding-bottom: 95px;}
.form-box .user-cate{padding:0 65px;width: 100%;height:247px;position: relative;transform: translateY(-10%);background-repeat: no-repeat;background-size: cover;
background-image: url(../images/user-cate.webp);flex-wrap: wrap;display: flex;align-items: center;justify-content: center;border-radius: 25px;}
.form-box .user-cate b,.user-cate p{width: 100%;display: block;text-align: center;}
.form-box .user-cate b{margin-bottom: 10px;font-size: 30px;color: #fff;}
.form-box .user-cate p{font-size: 16px;color: #fff;}
.form-box .user-cate .cate-box{position: absolute;bottom:10px;left: 0px;width: 100%;padding:0 65px;text-align: center;}
.form-box .user-cate .cate-box a{text-align: center;font-size: 22.5px;color: #fff;padding-bottom: 5px;display: inline-block;margin:0 20px;
border-bottom: 2px solid transparent;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.form-box .user-cate .cate-box a.active,.user-cate .cate-box a:hover{border-bottom: 2px solid #fff;}

.form-box form{display: block;width: 100%;margin-top: 50px;}
.form-box form input[type="text"],.form-box form input[type="password"],.form-box form input[type="email"]{margin-top: 35px;height: 60px;line-height: 60px;padding-left: 50px;
background-position: 16px center;background-repeat: no-repeat;outline: 2px solid transparent;transition: all 0.6s ease;-webkit-transition: all 0.6s ease;
border: 1px solid #eee;box-shadow: 4px 4px 7px -2px rgba(174,174,174,0.4);width: 100%;border-radius: 17px;font-size: 15px;}
.form-box form input[type="email"]{background-image: url(../images/reg_email.png);}
.form-box form input[type="text"]#username,.form-box form input[type="text"]#user_email{background-image:url(../images/user_icon.png);margin-top: 0;}
.form-box form input[type="password"]{background-image: url(../images/reg_pass.png);}

.form-box form .pass-box{position: relative;}
.error_msg{position: absolute;bottom: 0;left:0;transform: translateY(140%);color: red;font-size: 13px;display: none;}
.form-box form input[type="password"].error{outline: 2px solid red;}

.form-box form input[type="text"]:focus,
.form-box form input[type="password"]:focus,
.form-box form input[type="email"]:focus
{
    outline:2px solid #cba571;
}

.form-box form input[type="text"]:nth-child(1){margin-top: 0;}

.form-box .pass-do{margin:22px 0 60px;overflow: hidden;padding:0 20px}
.form-box .pass-do .check{float: left;}
.form-box .pass-do .check input[type="checkbox"]{position: relative;top: 2px;margin-right: 5px;}
.form-box .pass-do a{float: right;color: #c21e20;border-bottom: 1px solid transparent;padding-bottom: 5px;}
.form-box .pass-do a:hover{border-bottom: 1px solid #c21e20;}
.form-box form input[type="submit"]{font-size: 22.5px;background-color: rgba(203, 165, 113,1);border: 0;height: 60px;line-height: 60px;
color: #fff;text-align: center;display: block;width: 100%;border-radius: 17px;}
.form-box form input[type="submit"]:focus{background-color: rgba(203, 165, 113,0.5);}
.form-box h4{font-size: 22.5px;color: #666;line-height: 60px;text-align: center;position: relative;width: 80%;margin: 0 auto;font-weight: normal;}
.form-box h4 a{color: #666;}
.form-box h4 a:hover{color: #cba571;}
.form-box h4::before{content:"";width: 20%;height: 2px;background-color: #999;display: block;position: absolute;top:50%;left:0;transform: translateY(-50%);}
.form-box h4::after{content:"";width: 20%;height: 2px;background-color: #999;display: block;position: absolute;top:50%;right: 0;transform: translateY(-50%);}








@media(max-width:1100px){
    .form-box{float: unset;margin:0 auto;margin-top: 30px;}
    .form-box .user-cate{margin-top: 0;}
}

@media(max-width:768px){
    .form-box{width: 100%;padding: 0 20px;padding-bottom: 20px;}

    .form-box .user-cate{height: auto;display: block;padding: 10px 0;}
    .form-box .user-cate b{font-size: 24px;}
    .form-box .user-cate .cate-box{padding:0 10px;position: relative;margin-top: 30px;}
    .form-box .user-cate .cate-box a{font-size: 16px;}


    .form-box form{margin-top: 20px;}
    .form-box .pass-do{padding:0;margin: 20px 0;}
    .form-box .pass-do .check{font-size: 13px;}
    .form-box .pass-do a{font-size: 13px;position: relative;top:2px;}

    .form-box button{font-size: 18px;height: 40px;line-height: 40px;}

    .form-box form input[type="text"], .form-box form input[type="password"], .form-box form input[type="email"]{
        height: 40px;line-height: 40px;margin-top: 20px;font-size: 14px;
    }

    .form-box h4{width: 100%;font-size: 18px;}
}