.wrapper{ background-color: #fff; position: relative; width: 100%; padding-top: 0; }
.wrapper .bg{ width: 100%; height: 100vh; object-fit: cover; }
.wrapper .shade{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; padding-right: 700px; }
.wrapper .center-box{ width: 700px; position: absolute; top: 0; height: 100%; right: 0; background-color: #fff; }
.wrapper .text{ position: absolute; left: 59px; bottom: 99px; color: #fff; }
.wrapper .text h4 { font-size: 24px; margin-bottom: 20px; margin-top: 0; }
.wrapper .text p { font-size: 16px; margin-bottom: 0; }

.wrapper .center-box > div{ position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); left: 50%; width: 60%; }
.wrapper .center-box .logo{ margin-bottom: 40px; }
.wrapper .center-box .logo img{ height: 60px; }
.wrapper .center-box .tips{ margin-bottom: 32px; font-weight: bold; }
.wrapper .center-box .tips p{ margin-bottom: 19px; font-size: 18px; color: #222; }
.wrapper .center-box .tips h4{ margin: 0; font-size: 22px; color: #222; font-weight: bold; }
.wrapper .center-box .infor-input .list-div{ margin-bottom: 24px; }
.wrapper .center-box .infor-input .z-control{ width: 100%; border-radius: 21px; border: 1px solid #E6E6E6; height: 42px; line-height: 40px; font-size: 16px; overflow: hidden; }
.wrapper .center-box .infor-input .z-control input{ width: 100%; height: 100%; border: none; outline: none; color: #222; padding: 0 31px; }
.wrapper .center-box .infor-input .z-control input::-webkit-input-placeholder{ color: #666; }
.wrapper .center-box .infor-input .z-control input::-o-input-placeholder{ color: #666; }
.wrapper .center-box .infor-input .z-control input::-moz-input-placeholder{ color: #666; }
.wrapper .center-box .infor-input .z-control input::-ms-input-placeholder{ color: #666; }
/* 验证码 */
.wrapper .center-box .infor-input .z-control.ma-box { position: relative; padding-right: 120px; }
.wrapper .center-box .infor-input .z-control.ma-box .ma{ height: 100%; line-height: 1; position: absolute; right: 0; color: #0188FB; top: 50%; transform: translateY(-50%); font-size: 16px; cursor: pointer; }
/* 登录按钮 */
.wrapper .center-box .infor-input .z-control.login-btn{ border-color: #F5F5F5; }
.wrapper .center-box .infor-input .z-control.login-btn button{ background-color: #0188FB; color: #fff; width: 100%; outline: none; border: none; }
.wrapper .center-box .infor-input .z-control.login-btn button.disabled{ background-color: #F5F5F5; cursor: not-allowed; color: #999; }
.wrapper .center-box .bottom-text{ margin-bottom: 31px; font-size: 0; }
.wrapper .center-box .bottom-text .read-xy{cursor: pointer; }
.wrapper .center-box .bottom-text .read-xy i{ display: inline-block; margin-right: 10px; color: transparent; line-height: 16px; text-align: center; font-size: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ccc; vertical-align: middle; }
.wrapper .center-box .bottom-text .read-xy.select i{ color: #fff; background-color: #0188FB; border-color: #0188FB; }
.wrapper .center-box .bottom-text .read-xy small{ display: inline-block; font-size: 14px; vertical-align: middle; color: #666; }
.wrapper .center-box .bottom-text span.xy-btn{ color: #0188FB; display: inline-block; font-size: 14px; vertical-align: middle; cursor: pointer; }
.wrapper .center-box .register-text { text-align: right; }
.wrapper .center-box .register-text span{ display: inline-block; font-size: 16px; vertical-align: middle; color: #666; }
.wrapper .center-box .register-text a{ font-size: 14px; color: #0188FB; display: inline-block; font-size: 16px; vertical-align: middle; }

/* 协议 */
.xy-box{ background-color: rgba(0,0,0,0.6); position: fixed; top: 0%; display: none; left: 0; width: 100%; height: 100%; z-index: 11; }
.xy-box .xy-content{ background-color: #fff; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); left: 50%; max-width: 800px; width: 90%; height: 540px; padding: 60px 0 70px; }
.xy-box .xy-content .title{  background-color: #F5F5F5; padding: 0 24px; position: absolute; top: 0; width: 100%; height: 60px; line-height: 60px; }
.xy-box .xy-content .title h4{ color: #000; font-size: 22px; margin: 0; display: inline-block; }
.xy-box .xy-content .title i{ color: #666; font-size: 16px; float: right; font-size: 22px; margin-top: 19px; cursor: pointer; }
.xy-box .xy-content .xy-center{ background-color: #fff; height: 100%; padding: 0 24px; }
.xy-box .xy-content .xy-center .scroll-box{ height: 100%; overflow: auto; }
.xy-box .xy-content .xy-center h3{ color: #222; font-size: 18px; font-weight: bold; margin: 24px 0 15px 0; }
.xy-box .xy-content .xy-center p{ color: #222; font-size: 14px; line-height: 24px; margin-bottom: 15px; }
.xy-box .xy-content .xy-bottom{ background-color: #fff; text-align: center; }
.xy-box .xy-content .xy-bottom span{ cursor: pointer; background-color: #0188FB; color: #fff; font-size: 16px; display: inline-block; width: 330px; border-radius: 21px; height: 42px; line-height: 42px; margin-top: 15px; }

.pointer{ padding-left: 32px; color: red; font-size: 14px; margin-top: 10px; }

@media (max-width: 767px){ 
    .xy-box .xy-content .xy-bottom span{ width: 80%; }

    .wrapper .shade{ padding-right: 0; }
    .wrapper .center-box{ width: 80%; height: auto; right: 10%; top: 50%; transform: translateY(-60%); border-radius: 10px; }
    .wrapper .center-box > div{ position: static; transform: none; padding: 10px; width: 100%; }
    .wrapper .center-box .logo, .wrapper .center-box .tips, .wrapper .center-box .register-text{ text-align: center; }
    .wrapper .text{ left: 10px; bottom: 10px; }
    .wrapper .text h4{ font-size: 16px; margin-bottom: 10px; }
    .wrapper .text p{ font-size: 14px; }
}