*{
    padding: 0;
    margin: 0;
    font-family: 
    "Source Han Sans CN",    /* 思源黑体官方英文名称（简体中文） */
    "Source Han Sans SC",    /* 备用英文名称 */
    "思源黑体",              /* 中文名称（兼容部分系统） */
    "Noto Sans CJK SC",      /* 谷歌 Noto 字体（思源黑体的同源替代） */
    "Microsoft YaHei",       /* Windows 低版本 fallback */
    "PingFang SC",           /* macOS/iOS 兜底 */
    sans-serif;              /* 最终无衬线字体兜底 */
    box-sizing: border-box;
}
body{
   width: 100%;
   margin: 0 auto;
   background: rgba(247, 247, 247, 1);
}
a{
    text-decoration: none;
} 
li{
    list-style: none;
}
img{
    width: 100%;
    display: block;
}
.img{
    overflow: hidden;
}
    .w{
        width:1200px;
        margin: 0 auto;
    }
    header{min-width: 1200px;}
    /* 头部样式 */
    header .header1{
        position: relative;
      
        background: rgba(255, 255, 255, 1);
    }
   header .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 90px;
        min-width: 1200px;
     
    }
    header .top .logo{
        display: flex;
        align-items: end;
        gap: 20px;
      
        flex: 0 0 auto;
    }
    header .top .logo img{
        width: 140px;
        height: 54px;
    }
    header .top .logo .tip{
        font-size: 12px;
        height: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(19, 85, 178, 1);
    }
    header .login{
        width: 120px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 36px;
color: rgba(223, 92, 148, 0.8);
border: none;
line-height:  40px;
text-align: center;
cursor: pointer;
border: 1px solid rgba(223, 92, 148, 1);

flex: 0 0 auto;
    }
    header .header2{
        position: relative;
    }
    header .header2 .layer{
        background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
justify-content: center;
    }
    header .header2 .layer .cn{
        font-size: 48px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 69.5px;
        color: rgba(255, 255, 255, 1);
        height: 70px;
    }
    header .header2 .layer .en{
        font-size: 24px;
font-weight: 400;
letter-spacing: 0px;
line-height: 34.75px;
color: rgba(255, 255, 255, 1);
    }
    header form{
        width: 700px;
height: 60px;
border-radius: 30px;
border: 1px solid rgba(235, 235, 235, 1);
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(30px);
margin: 0 auto;
position: absolute;
left: calc((100% - 700px) / 2);
z-index: 1;
padding: 0 20px;
bottom: -28px;
flex: 0 0 auto;
    }
    header .img{
        width: 548px;
height: 530px;
margin: 0 auto;
position: relative;
bottom: 25px;
    }
    header .input-group{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    header .input-group:before{
        content:'';
        display: block;
        width: 25px;
        height: 25px;
       background: url(/images/search_icon.webp) no-repeat;
       background-size: 100% 100%;
    }
    header input{
        width: 100%;
        border: none;
        background: none;
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.5);
    }
    header input:focus{
        outline: none;
    }
    header input::placeholder{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 0.5);
    }
    header .header1 form{
        width: 430px;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        flex: 0 0 auto;
    }
    /* 底部样式 */
    footer{
        height: 360px;
opacity: 1;
background: rgba(255, 255, 255, 1);
overflow: hidden;
margin-top: 50px;
position: relative;
    }
    footer .foot1{
        position: relative;
    }
    footer .foot1 .img{
        width: 115px;
        height: 44px;
        margin-top: 30px;
    }
    footer .foot1 .cn{
        margin-top: 10px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.5);
    }
    footer .foot1 .list1{
        margin-top: 31px;
    }
    footer .foot1 .list1 a{
        font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 14px;
color: rgba(0, 0, 0, 0.7);
    }
    footer .foot1 .list{
display: flex;
align-items: center;
gap:30px ;
    }
    footer .foot1 .list2{
        margin-top: 20px;
    }
    footer .foot1 .list2 a{
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 14px;

color: rgba(0, 0, 0, 0.5);
    }
    footer .foot1 .bg{
        width: 515px;
height: 701px;
position: absolute;
top: -67px;
right: 0;
    }
    footer .foot1 .social{
        display: flex;
        align-items: center;
        gap: 30px;
        margin-top: 35px;
    }
    footer .foot1 .social>div{
        width: 30px;
height: 30px;
cursor: pointer;
    }
    footer .foot1 .social #wechat{
        position: relative;
    }
    footer .foot1 .social #wechat .ma{
       position: absolute;
       width: 115px;
       height: 115px;
       left: -125px;
       bottom: 0;
    }

    footer .foot2{
        height: 60px;
        opacity: 1;
        background: rgba(245, 218, 231, 0.8); 
        position: relative;
        bottom: -24px;
    }
    footer .foot2 .text{
        font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
color: rgba(223, 91, 147, 0.5);
    }
    main{
        padding-top: 78px;
    }
    main .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    main .head .topic .title{
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 43.44px;
        color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        gap:20px;
    }
    main .head .topic .title:after{
        content: '';
        display: block;
        width: 725px;
height: 18px;
background: url(/images/hr.webp) no-repeat;
background-size: 100% 100%;
    }
    main .head .topic .en{
        font-size: 24px;
font-weight: 300;
letter-spacing: 0px;
line-height: 34.75px;
color: rgba(0, 0, 0, 0.5);
    }
    main .head .more{
        width: 180px;
        height: 60px;
        border-radius: 30px 30px 0px 30px;
        background: rgba(229, 229, 229, 0.4); 
        text-align: center;
        line-height: 60px;
        font-size: 18px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
margin-top: -20px;
    }
  main .h-head{
        font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
    }
      main .h-head hr{
        width: 485px;
        height: 0px;
        opacity: 0.1;
        
          border: 1px solid rgba(0, 0, 0, 1); 
    }
    /* 登录注册界面 */
    #bgbox{
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       position: fixed;
       top: 0;
       left: 0;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
    }
    #loginbox{
        width: 850px;
        height: 505px;
        opacity: 1;
        border-radius: 20px;
        background: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
    }
    #loginbox .left{
        width:340px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    #loginbox .left .content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    #loginbox .left .content .tit{
        font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(0, 0, 0, 0.8);
height: 27px;
    }
    #loginbox .left .content .des{
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.8);
height: 21px;
    }
    #loginbox .left .content .ma{
        width: 200px;
        height: 200px;
    }
    #login{
        margin-left: 70px;
    }
    #login .tab{
        display: flex;
        align-items: center;
        gap: 30px;
    }
    #login .tab .tit{
        font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
line-height: 23.17px;
color: rgba(0, 0, 0, 0.8);
height: 24px;
text-align: center;
    }
    #login .tab .tit.active:after{
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: rgba(223, 91, 147, 1);
        border-radius: 2.5px;
        margin: 10px auto 0;
    }
    #login form{
        margin-top: 40px;
        width: 360px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
     label{
        width: 360px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    input{
        width: 360px;
height: 60px;
background: rgba(255, 255, 255, 1);
border: none;
    }
    #verifyCode{
        /* width: 360px; */
height: 60px;
background: rgba(255, 255, 255, 1);
border: none;
    }
    #getCodeBtn{
        background: none;
        border: none;
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.8);
margin-left: auto;
margin-right: 0;
flex: 0 0 auto;
    }
    input{
        font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.8);
    }
    input:focus{
        outline: none;
    }
    input::placeholder{
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.5);
    }
    .loginBtn{
        width: 360px;
        height: 40px;
        opacity: 1;
        border-radius: 20px;
        background: rgba(245, 218, 231, 1);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 20.27px;
        color: rgba(223, 92, 148, 1);
        border: none;
        margin-top: 30px;
        cursor: pointer;
    }
    .other_login{
        margin-top: 35px;
        width: 360px;
    }
    .other_login .tit{
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
    }
    .other_login .tit hr{
        width: 120px;
height: 1px;
color: rgba(0, 0, 0, 0.1);
    }
    #wechat_login{
        width: 40px;
        height: 40px; 
        margin: 25px auto 30px;
        cursor: pointer;
    }
    .other_login .tip{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 0.3);   
    }
    #passwordToggle{
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }
    #pwdLoginForm{
        display: none;
    }
    #forgotPwdBtn{
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 20.27px;
        color: rgba(223, 92, 148, 0.8);
margin-top: 4.8px;
text-align: right;
cursor: pointer;
    }
    #pwdLoginForm .loginBtn{
        margin-top: 20px;
    }
    /* 找回密码 */
    #relogin{
        margin-left: 70px;
        width: 360px;
  
    }
    #relogin .tit{
        font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
line-height: 23.17px;
color: rgba(0, 0, 0, 0.8);
    }
    #relogin .des{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 0.5);
        margin: 10px 0 20px;
    }
    #next{
        width: 360px;
height: 40px;
opacity: 1;
border-radius: 20px;
background: rgba(245, 218, 231, 1);
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
color: rgba(223, 92, 148, 1);
margin-top: 40px;
cursor: pointer;
    }
    #nextBtn{
        width: 360px;
        height: 40px;
        opacity: 1;
        border-radius: 20px;
        background: rgba(245, 218, 231, 1);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        color: rgba(223, 92, 148, 1);
        margin-top: 40px;
        cursor: pointer;
        border: none;
    }
    #resetBtn{
        width: 360px;
        height: 40px;
        opacity: 1;
        border-radius: 20px;
        background: rgba(245, 218, 231, 1);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        color: rgba(223, 92, 148, 1);
        margin-top: 40px;
        cursor: pointer;
        border: none;
    }
    #wechatLogin{
        margin-left: 70px;
    }
    #wechatLogin .title{
        font-size: 24px;
font-weight: 400;
letter-spacing: 0px;
line-height: 34.75px;
color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
    }
    #wechatLogin .title:before{
        content:'';
        display: block;
        width: 40px;
height: 40px;
background: url('/images/wechat_login.webp') no-repeat;
background-size: 100% 100%;
    }
    #wechatLogin .ma{
        width: 200px;
        height: 200px;
        background: url(/images/ma_bg.webp) no-repeat;
        background-size: 100% 100%;
        padding: 8px;
        margin: 35px auto 60px;
    }
    #wechatLogin .tip{
        margin-top: 30px;
    }
    #phoneLogin{
        cursor: pointer;
    }
    #fenye{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
    }
    #fenye ul{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    #fenye ul a{
        display: block;
        font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.5);
    }
    #fenye ul li{
        padding: 10px 15px;
        border-radius: 5px;
background: rgba(247, 247, 247, 1);
  border: 1px solid rgba(223, 92, 148, 0.5);
  font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(0, 0, 0, 0.5);
    }
    #fenye ul li:nth-child(1){
        background: rgba(235, 157, 189, 0.5);  
        color: rgba(255, 255, 255, 1); 
        border: none;
    }
    #fenye ul li.active{
        background: rgba(224, 94, 149, 1);
        color: #fff;
    }
@media screen and (max-width: 1200px) {
    header .top .logo{
    margin-left: 0;
  }  
  header .top form{
    margin-left: 0;
  }  
  header .top .login{
    margin-right: 0;
  }  
}