@charset "utf-8";

.clear:after{content:'';display:block;clear:both;}

/*role页面样式*/
.role_bg{height: 100%;overflow:hidden;background: url(../images/role_bg.png) no-repeat;background-size: cover;}
.role-logo{text-align: center; padding: 2% 0;}
.role-choice{text-align: center;color: #fff;font-size: 16px;}
.role-choice p{font-size: 20px;margin: 0 0 20px;}
.role-choice .role-check{display: inline-block;vertical-align: middle;width: 28px;}
.role-choice input[type=checkbox].choice {min-height: 14px;min-width: 14px;}
.role-choice input[type=checkbox].choice+.lbl{line-height: 14px;min-height: 14px;min-width: 14px;border: 1px solid #f8f8f8;width: 14px;}
.role-choice input[type=checkbox].choice+.lbl::before{background-color: transparent;border: 0;width: 14px;height: 14px;min-width: unset;}
.role-choice input[type=checkbox].choice:checked+.lbl::before {
    display: inline-block;
    content: " ";
    background: url(../images/dui_02.png) no-repeat center center;
    border: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 21px;
    height: 21px;
}
.role-con{overflow: hidden;}
.role-left,.role-right{float: left;width: 50%;height: 100%;position: relative;cursor: pointer;}
.role-left a,.role-right a{display:block;}
.role-left a{float: right;}
.role-right a{float: left;}
.role-left a img,.role-right a img{width: 100%;}
.role-left .hov,.role-right .hov{display:none;}
.role-left a:hover .default,.role-right a:hover .default{display:none;}
.role-left a:hover .hov,.role-right a:hover .hov{display:block;}

@media screen and (max-width: 1920px) {
    .role-con { margin-top: 5%;}
}
@media screen and (max-width: 1600px){
    .role-con {margin-top: 3%;}
}
@media screen and (max-width: 1366px){
    .role-logo { padding: 2% 0 2px; }
    .role-choice p {margin: 0 0 10px;}
    .role-logo img { width: 66%;}
    
}



/*登录页样式*/
#particles-js {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(../images/login_bg.png);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.sx-login-con{width: 1050px;position: absolute;left: 50%;margin-left: -525px;height: 100%;}
.sx-login-con *{box-sizing: border-box;}
.sx-login-logo {
    margin: 5% 0 0;text-align: center;
}
.login-main{
    width: 500px;
    height: 550px;
    margin: 5% auto;
    box-shadow: 2px 0 20px rgb(9, 54, 129, 0.4);
    background: url(../images/login_main_bg.png) repeat left top;
    border-radius: 10px;
    position: relative;
}
.login-main .change{position: absolute;right: 4px;top: 4px;cursor: pointer;}
.login-main .change-pic1 {background: url(../images/erwm.png) no-repeat center center;width: 88px;height: 88px;display: inline-block;}
.login-main .change-pic1:hover {background: url(../images/erwm-hover.png) no-repeat center center;}
.login-main .change-pic2 {background: url(../images/pc.png) no-repeat center center;width: 88px;height: 88px;display: inline-block;}
.login-main .change-pic2:hover {background: url(../images/pc-hover.png) no-repeat center center;}


.pc-lgo {padding: 35px 0 0;}
.pc-lgo .ch-t {margin: 0 10%;border-bottom: 1px solid #ececec;overflow: hidden;}
.pc-lgo .ch-t li {float: left;color: #666;font-size: 20px;margin-right: 6%;cursor: pointer;padding: 15px 0;}
.pc-lgo .ch-t li.cur {color: #3174e2;border-bottom: 2px solid #3174e2;}
.login-main .pattern {overflow: hidden;padding: 0 10%;}
.login-main .inp{box-shadow: 0 0 10px rgba(120, 165, 245, 0.42);height: 58px;line-height: 58px;border-radius: 58px;border: 1px solid #ececec;margin: 25px 0 0;}
.login-main .input-01 {background: #fff url(../images/users.png) no-repeat 18px center;}
.login-main .input-02 {background: #fff url(../images/password.png) no-repeat 18px center;}
.login-main input {
    height: 100%;
    line-height: 42px;
    color: #555;
    margin-left: 50px;
    font-size: 16px;
    outline: none;
    border: 0;
    width: 72%;
    background: #fff;
    padding:0 2px;
}
.login-main div.tag{border: 1px solid #3174e2;}
#tips {display: block;overflow: hidden;padding-left: 22px;font-size: 15px;margin: 20px 0 0;}
#tips .pos-rel {margin-right: 10px;}
#tips a.forget {color: #333;}
#tips a {font-size: 15px;float: right;color: #178bf1;}
.login-main .button {
    height: 58px;
    line-height: 28px;
    border-radius: 60px;
    border: 0;
    box-shadow: 2px 0 20px rgba(42, 167, 247, 0.5);
    display: block;
    width: 100%;
    background: url(../images/btn-bg.png) center center;
    color: #fff;
    font-size: 22px;
    outline: none;
    font-weight: 100;
    margin: 40px 0 20px;
    cursor: pointer;
}
.login-main .button:hover {background: #1067fe;}
.l-phone-div {height: 58px;line-height: 58px;position: relative;margin: 25px 0;}
.country-phone-covers {border-radius: 58px;border: 1px solid #ececec;background: #fff;box-shadow: 0 0 10px rgba(120, 165, 245, 0.42);height: 100%;}
.phone-area-code-ipt {background: url(../images/down-arrow.png) no-repeat center right;width: 18%;float: left;margin-left: 16px;font-size: 16px;cursor: pointer;}
.l-phone-div .input-phone {margin-left: 10px;width: 66%;}
.js-area-box {
    position: absolute;
    top: 64px;
    left: 0;
    height: 300px;
    overflow: auto;
    background: #fff;
    z-index: 2;
    width: 100%;
    box-shadow: 0 0 10px rgba(120, 165, 245, 0.42);
    border-radius: 24px;
}
.js-area-box ul {margin-top: 15px;}
.js-area-box ul li {margin: 0 5%;padding: 2% 2%;display: flex;flex-wrap: nowrap;justify-content: space-between;line-height: 36px;border-bottom: 1px solid #eeeeee;}
.js-area-box ul li:hover{background: #f5f5f5;}


.login-phone {height: 58px;line-height: 58px;position: relative;margin:23px 0 0;}
.login-phone .input_03 {
    width: 64%;
    background: #fff url(../images/code.png) no-repeat 18px center;
    box-shadow: 0 0 10px rgba(120, 165, 245, 0.42);
    height: 58px;
    line-height: 58px;
    border-radius: 58px;
    overflow: hidden;
    border: 1px solid #ececec;
}
.login-phone .input_03 input {margin-left: 50px;background: none;}

.login-phone .input_04 {
    width: 50%;
    background: #fff url(../images/code.png) no-repeat 18px center;
    box-shadow: 0 0 10px rgba(120, 165, 245, 0.42);
    height: 58px;
    line-height: 58px;
    border-radius: 58px;
    overflow: hidden;
    border: 1px solid #ececec;
}
.login-phone .input_04 input {margin-left: 50px;background: none;}

.yazm {
    position: absolute;
    top: 4px;
    right: 0px;
    width: 114px;
    height: 48px;
    color: #fff;
    line-height: 48px;
    background: #0a5cfe;
    text-align: center;
    font-size: 14px;
    border-radius: 60px;
    cursor: pointer;
}
.ewm-lgo {display: none;padding: 45px 25px 0;}
.ewm-lgo h3 {color: #666;font-weight: normal;font-size: 20px;text-align: center;}
.ewm-lgo h3 i {color: #3174e2;display: inline-block;padding: 0 8px;font-size: 26px;font-style: normal;}
.e-con {margin: 25px 30px;width: 86%;text-align: center;}
.e-con .e-fresh {width: 100%;max-width: 240px;position: relative;margin: 0 auto;}
.e-con .e-fresh .rate {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 16px;background: rgba(0, 0, 0, 0.5);color: #fff;display: none;}
.e-con .e-fresh .rate a {margin: 38% auto 1%;width: 30%;display: block;padding: 10px 0;font-size: 16px;border-radius: 4px;color: #fff;background: #1067fe;}
.e-con .e-fresh img {width: 100%;max-width: 240px;}
.e-tag {margin: 0 auto;width: 240px;position: relative;}
.e-tag:after{content:"";display:block;clear:both;}
.e-tag span {float: left;background: url(../images/fresh.png) no-repeat center left;padding-left: 30px;cursor: pointer;}
.e-tag a {float: right;color: #333;}
.user-help {position: absolute;bottom: -102px;left: 268px;display: none;z-index: 99;}


.sx-login-fotter{color: #fff;font-size: 16px;line-height: 24px;text-align: center;position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;}
    
@media screen and (min-width: 600px) {
  .login-main .button {
       margin-top:100px;
       font-size:30px;
  }
}

@media screen and (max-width: 1920px) {
    .login-main{margin: 8% auto;}
    .sx-login-logo { margin: 8% 0 0;}

}
@media screen and (max-width: 1768px) {
    .sx-login-logo { margin: 5% 0 0;}
    .login-main {margin: 5% auto;}

}
@media screen and (max-width: 1440px) {
    .sx-login-logo {margin: 4% 0 0;}
    .sx-login-logo img{width: 78%;}  

}
@media screen and (max-width: 1366px) {
    .login-main{height: 400px;margin: 3% auto;}
    .login-main .inp { height: 52px; line-height: 52px;}
    .l-phone-div {height: 52px;line-height: 52px;}
    .login-phone .input_03 { height: 52px;line-height: 52px; }
    .e-con .e-fresh {max-width: 220px;}
    .e-con .e-fresh img {max-width: 220px;}
    .e-tag { width: 220px; }
    .sx-login-fotter{bottom: 3%;}
    .pc-lgo { padding: 12px 0 0;}
}






/*单选和复选框*/
.pos-rel {position: relative; float: left;}
input[type=checkbox].choice+.lbl, input[type=radio].choice+.lbl { position: relative;z-index: 11;display: inline-block;margin: 0;line-height: 20px; min-height: 18px; min-width: 18px; font-weight: normal;}
input[type=checkbox].choice, input[type=radio].choice {opacity: 0;position: absolute;z-index: 12;width: 18px;height: 18px; cursor: pointer; left: 0;margin:0;}
input[type=checkbox].choice+.lbl::before, input[type=radio].choice+.lbl::before {font-family: fontAwesome;font-weight: normal;font-size: 12px; color: #32a3ce;
    content: "\a0"; background-color: #fafafa;border: 1px solid #c8c8c8;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 0; display: inline-block;
    text-align: center;vertical-align: middle; height: 16px; line-height: 14px; min-width: 16px; margin-right: 1px;}
input[type=checkbox].choice:checked+.lbl::before, input[type=radio].choice:checked+.lbl::before { display: inline-block; content: " "; background: #f5f8fc url(../images/dui.png) no-repeat center center;
    border-color: #0da1ff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);}
    
    
/*扫码登录的样式*/    
.ewmimg{
    padding: 8px;
    background: #fff;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 35px;	
    box-sizing: border-box;
}