/* 重置样式 */
* {box-sizing: border-box;}
body {margin: 0; font-family: "fzss", Arial; font-size: 16px; color: #000;}
p {margin: 0; padding: 0;}
ul {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: #000;}
img {border: none; display: block;}
input, textarea {font-family: "fzss", Arial; font-size: 16px; color: #000; outline: none;}
button {border: none; outline: none; cursor: pointer;}
i {font-style: normal;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0;}

select::-ms-expand {
    display: none;
}

input::-ms-clear {
    display: none;
}

input::-ms-reveal {
    display: none;
}


@font-face {
    font-family: 'fzss';
    src: url("../fonts/方正宋三_GBK.woff2") format("woff2"),
         url("../fonts/方正宋三_GBK.woff") format("woff"),
         url("../fonts/方正宋三_GBK.ttf") format("truetype"),
         url("../fonts/方正宋三_GBK.eot") format("embedded-opentype"),
         url("../fonts/方正宋三_GBK.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fzqk';
    src: url("../fonts/方正清刻本悦宋简体.woff2") format("woff2"),
         url("../fonts/方正清刻本悦宋简体.woff") format("woff"),
         url("../fonts/方正清刻本悦宋简体.ttf") format("truetype"),
         url("../fonts/方正清刻本悦宋简体.eot") format("embedded-opentype"),
         url("../fonts/方正清刻本悦宋简体.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

/*公用样式*/
.wrapper {width: 1200px; position: relative; margin: 0 auto;}
.clear {clear: both;}

/* 头部 */
.header {border-bottom: 1px solid #920811; height: 100px;}
.header .wrapper {overflow: hidden;}
.header .logo {margin-top: 10px; float: left; margin-right: 20px;}
.header .name {margin-top: 30px; padding-left: 20px; height: 40px; border-left: 1px solid #920811; line-height: 40px; color: #920811; letter-spacing: 3px; font-size: 20px; float: left;}
.header .personal {float: right; height: 30px; margin-top: 35px;}
.header .personal > * {letter-spacing: 2px; float: left; line-height: 30px; color: #920811; height: 100%;}
.header .icon {position: relative; width: 30px;}
.header .language {margin-left: 6px;}
.header .personal img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.header .logout {margin: 0 10px;}

/* 底部 */
.footer {height: 390px; letter-spacing: 2px; background: #727177; border-top: 10px solid #920811;}
.footer .wrapper {height: 100%; overflow: hidden;}
.footer .info {margin-top: 64px; overflow: hidden;}
.footer .con {font-size: 12px; line-height: 20px; color: #fff; margin-top: 18px;}
.footer .address {float: left;}
.footer .qr-code {float: right;}
.footer .qr-code .img {width: 136px; height: 136px;}
.footer .qr-code img {width: 100%; height: 100%;}
.footer .qr-code p {font-size: 12px; color: #fff; text-align: center; margin-top: 10px;}
.footer .copyright {border-top: 1px solid #959599; text-align: center; padding: 40px 0; position: absolute; bottom: 0; width: 100%;}
.footer .link span {margin: 0 15px;}
.footer .link a {font-size: 16px; color: #fff;}
.footer .copyright p {color: #fff; opacity: .3; text-transform: uppercase; font-size: 12px; margin-top: 15px;}

/* banner */
.banner {width: 100%; height: 370px; margin-bottom: 36px; background-size: cover !important;}

/* 左侧菜单 */
.menu {width: 255px; float: left; letter-spacing: 2px; text-indent: 40px; line-height: 66px;}
.menu .list {margin-bottom: 20px;}
.menu .title {font-family: "fzqk"; height: 66px; color: #fff; font-size: 24px; background: url(../img/title_bg.png); margin-bottom: 2px;}
.menu .gray-bg {height: 66px; background: #ededed; margin-top: 1px;}
.menu .gray-bg a {display: block; width: 100%; height: 100%; background: #ededed; font-size: 18px; color: #323338; position: relative;}
.menu .gray-bg a.active:after {content: ''; position: absolute; background: url(../img/white_arrow.png); width: 18px; height: 12px; right: 12px; top: 27px;}
.menu .gray-bg a.active {background: #920811; color: #fff; transform: translateX(18px); box-shadow: 0 10px 40px rgba(146, 8, 17, .6); z-index: 1;}

/* 登录 注册 找回密码 */
.login-bg {position: relative; width: 100%; height: 980px; background: url(../img/login_bg.png) no-repeat top center; background-size: cover; overflow: hidden; transition: height 1s;}
.login-bg.register {height: 1360px;}
.container > .mask {width: 50%; height: 100%; position: absolute; background: rgba(255, 255, 255, .7); z-index: 0; left: 50%; transition: left 1s;}
.red-bg {width: 1240px; height: 425px; margin: 256px auto 0; background: url(../img/login_red_bg.png) no-repeat; background-size: cover; position: relative;}
.red-bg .con-box {width: 50%; position: absolute; letter-spacing: 4px; padding-left: 100px; top: 50%; transform: translateY(-50%); color: #fff; left: 0; transition: left 1s; font-family: "fzqk";}
.red-bg .con .tit {font-size: 20px;}
.red-bg .con .des {font-size: 16px; opacity: .6; margin-top: 15px;}
.red-bg .con .link {margin-top: 50px;}
.red-bg .con a {background: url(../img/white_arrow.png) no-repeat left center; color: #fff; padding-left: 34px;}
.white-bg {width: 590px; height: 590px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); position: absolute; left: 50%; background: #fff; top: -78px; transition: left 1s;}
.login-box {width: 100%; height: 100%;;}
.login-box .tit {width: 100%; height: 120px; background: #dadada; margin-left: -35px; transition: margin-left 1s;}
.login-box .tit p {font-family: "fzqk"; background: url(../img/red_arrow.png) no-repeat left; padding-left: 35px; color: #920811; letter-spacing: 5px; font-size: 24px; height: 120px; line-height: 120px; margin-left: 72px;}
.login-box form {width: 440px; margin: 0 auto; padding-top: 20px;}
.login-bg .form-group {font-size: 0; margin-top: 50px; padding: 10px 0; border-bottom: 1px solid #a0a0a0;}
.login-bg .form-group > * {display: inline-block; vertical-align: middle;}
.login-bg .form-group .icon {width: 50px;}
.login-bg .form-group .icon img {margin: 0 auto;}
.login-bg .form-group .input {width: 340px; height: 40px; position: relative;}
.login-bg .form-group input {width: 100%; height: 100%; border: none; font-size: 18px;}
.login-bg .form-action {overflow: hidden; margin-top: 70px;}
.login-bg .form-action button {width: 216px; height: 60px; background: #940408; color: #fff; border-radius: 30px; font-size: 20px; float: right;}
.login-bg .form-action .forget {height: 60px; line-height: 60px; float: left;}
.login-bg .form-action .forget a {font-size: 18px; color: #000; opacity: .6;}
.login-bg .form-group label.error {font-size: 16px; width: 100%; position: absolute; left: 0; top: 54px;}
label.error {color: #940408;}
.login-bg .form-group label.error:after {content: ''; position: absolute; width: 26px; height: 26px; background: url(../img/error_icon.png); top: -47px; right: -38px;}
.login-bg .form-group .input.code {width: 200px;}
.login-bg .form-group .send-code {width: 140px; height: 40px; background: #920811; border-radius: 20px; color: #fff; font-size: 18px; letter-spacing: 2px; float: right;}
.login-bg .form-group .send-code.disabled {background: #ccc;}
.register .mask {left: 0;}
.register .white-bg {height: 1000px; left: calc(50% - 590px);}
.register .login-box .tit {margin-left: 35px;}
.pic-code {margin-top: 44px;}
.pic-code > * {display: inline-block; vertical-align: middle;}
.pic-code .icon {width: 164px; height: 66px;}
.pic-code .icon img {width: 100%; height: 100%;}
.pic-code .input {width: 200px; height: 40px; margin-left: 38px;}
.pic-code input {width: 100%; height: 100%; border: none; font-size: 18px;}
.register .read {margin-top: 40px; padding-bottom: 24px; overflow: hidden; position: relative;}
.register .check label.error {position: absolute; bottom: 0; left: 40px;}
.register .check input {width: 18px; height: 18px; position: relative; top: 4px;}
.register .text {float: right; width: 400px; font-size: 16px; line-height: 30px; position: relative; color: #000; opacity: .6;}
.register .text a:hover {color: #940408;}
.register .form-action {margin-top: 50px;}
.register .con-box {left: 50%;}

/* 个人信息 */
.main {border-top: 1px solid #e2e6e8; width: 920px; float: right;}
.main > .title {font-family: "fzqk"; color: #920811; font-size: 24px; letter-spacing: 2px; text-align: center; padding: 20px 0;}
.main > .title span.sub {font-family: "fzss"; font-size: 18px; color: #323338; display: block; margin-top: 10px;}

.form-body {position: relative; padding: 20px 0 50px; background: #fafafa; overflow: hidden;}
.form-body:after {position: absolute; content: ''; width: 245px; height: 100%; background: #f6f6f6; left: 0; top: 0; border-right: 2px solid #fff;}
.form-body .form-group {font-size: 0; margin-top: 30px; position: relative; z-index: 1;}
.form-body .form-group > * {display: inline-block; vertical-align: middle; font-size: 18px; color: #323338;}
.form-body .form-group label {width: 245px; letter-spacing: 5px; text-align: right;}
.form-body .form-group .input {width: 314px; height: 40px; margin-left: 15px;}
.form-body .form-group input {border: none; letter-spacing: 2px; background: none; font-size: 18px; color: #323338; width: 100%; height: 100%; border-bottom: 1px solid #920811;}
.form-body .form-group select {-webkit-appearance: none; appearance: none; border: none; border-bottom: 1px solid #920811; letter-spacing: 2px; border-radius: 0; height: 100%; font-size: 18px;  padding-right: 30px; outline: none; font-family: "fzss";}
.form-body .form-group .sel {position: relative; display: inline-block; height: 40px;}
.form-body .form-group .sel:after {content: ''; position: absolute; background: url(../img/select_icon.png); width: 12px; height: 8px; right: 0; top: 16px;}
.form-body .form-group .sex {position: relative; margin-right: 20px; height: 100%; display: inline-block;}
.form-body .form-group .sex.active i {border-bottom: 1px solid #920811;}
.form-body .form-group .sex input {width: 20px; margin: 0; opacity: 0;}
.form-body .form-group .sex i {position: absolute; z-index: -1; width: 100%; text-align: center; line-height: 40px; height: 100%; top: 0; left: 0;}
.main .form-action {margin: 44px auto 64px; text-align: right;}
.main .form-action button {width: 218px; height: 60px; background: #fff; border: 1px solid #920811; border-radius: 30px; font-size: 20px; letter-spacing: 5px; margin-left: 30px; font-family: "fzss"; color: #920811; transition: background .4s, color .4s;}
.main .form-action button:hover {background: #920811; color: #fff;}
.form-body label.error {padding-top: 4px; width: 100%; text-align: left; display: block;}

/* 邀访申请记录 */
.table-body table {width: 100%; text-align: left; text-indent: 30px; font-size: 18px; background: #fafafa; border-collapse: collapse;}
.table-body thead tr {height: 66px; background: #940408; color: #fff;}
.table-body thead th {border-right: 1px solid #fff;}
.table-body tbody tr {height: 66px; color: #323338;}
.table-body tbody tr:hover {background: #ededed;}
.table-body tbody span {cursor: pointer; margin-right: 20px;}
.table-body tbody span:last-child {color: #920811;}

/* 邀访申请 */
.step-title {width: 100%; height: 66px; font-size: 0; margin-bottom: 2px;}
.step-title span {display: inline-block; font-size: 20px; color: #323338; background: #ededed; width: 33.333333%; height: 100%; text-align: center; line-height: 66px; border-right: 1px solid #fff; letter-spacing: 5px;}
.step-title span.active {background: #920811; color: #fff;}
.step-title span:last-child {border: none;}
.step2 .title {height: 66px; background: #920811; line-height: 66px; color: #fff; font-size: 20px; letter-spacing: 5px; text-indent: 40px;}
.step2 .title span:nth-child(2) {opacity: .7; font-size: 18px;}
.step2 .table {margin-top: 10px;}
.step2 table {width: 100%; border-collapse: collapse;}
.step2 th {background: #ededed; height: 66px; border: 1px solid rgba(130, 130, 130, .3); border-top: none;}
.step2 th:first-child {border: none;}
.step2 th:last-child {border: none;}
.step2 .table > table td {background: #fafafa; height: 66px; border: 1px solid rgba(130, 130, 130, .3);}
.step2 .table > table input {width: 100%; height: 100%; border: 0; text-align: center;}
.step2 .table .del-td {display: none; border-left: 1px solid rgba(130, 130, 130, .3);}
.step2 .table .del-td img {cursor: pointer; margin: 0  auto;}
.step2 td:first-child {border-left: none !important;}
.step2 td, .step2 th {border-right: none !important;}
.step2 .add {height: 66px; background: #ededed; overflow: hidden;}
.step2 .add img {margin: 24px auto; width: 19px; height: 19px; cursor: pointer;}
.step2 ul {margin-top: 10px;}
.step2 li {margin-top: 1px; background: #fafafa; padding: 14px 40px;}
.step2 li > * {display: inline-block; vertical-align: middle;}
.step2 li label {font-size: 20px; color: #940408; letter-spacing: 5px;}
.step2 .file {position: relative; width: 240px; height: 38px; margin: 0 30px 0 20px;}
.step2 .delFile {display: none; position: absolute; width: 17px; height: 17px; right: -17px; top: 0; cursor: pointer;}
.step2 .file input {width: 100%; height: 100%; border: none; border-bottom: 1px solid #807f85; font-family: "fzss"; font-size: 20px;}
.step2 .file [type=file] {display: none;}
.step2 li button {width: 134px; height: 38px; background: #940408; border-radius: 19px; font-size: 20px; color: #fff; font-family: "fzss";}
.step3 .title {background: #e2e2e2; padding: 13px 40px; margin-top: 10px;}
.step3 .title * {display: inline-block; vertical-align: middle; font-size: 20px; color: #323338; letter-spacing: 5px;}
.step3 .title input {width: 570px; border: none; border-bottom: 1px solid #807f85; background: none; height: 40px;}
.step2, .step3 {display: none;}