@charset "utf-8"; .input:disabled { background: rgba(192, 201, 209, .5) !important; } input[type="password"]::-ms-reveal { display: none; filter: blur(0); } .userInfo-edit.phones-show, .userInfo-edit2.phones-show { display: none; } .pc-show { display: block; } .phones-show { display: none; } a { color: #666; } .layui-form .layui-form-checkbox { display: none; } /*公共*/ /* 页面盒子 */ .bodyBg { height: auto; } .bodyBg, .registerBody { background: url("../image/login-bg-p.png") no-repeat; /*-o-background-size: cover;*/ /* background-size: cover;*/ background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; /*height: 100%;*/ } .main-box { background: #fff; -webkit-box-shadow: 0px 2px 30px 0px #E2E7EF; box-shadow: 0px 2px 30px 0px #E2E7EF; border-radius: 10px; } /* 表单头部背景 */ .fromHead-bg { width: 100%; height: 60px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(216, 236, 255, .49)), to(#FFFFFF)); background: -webkit-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -moz-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -o-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: linear-gradient( 180deg, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); z-index: 1; border-radius: 10px 10px 0 0; } /* 表单头部标题 */ .fromHead-titleBox { position: relative; margin: -10px 0 14px 0; padding: 0 120px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 46px; font-size: 16px; line-height: 26px; color: #999999; border-bottom: 1px solid #E7F3FF; } .returnIcon { cursor: pointer; position: absolute; left: 65px; width: 27px; height: 27px; } .fromHead-titleBox .fromHead-nav { cursor: pointer; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .fromHead-titleBox .fromHead-nav.sel, .fromHead-titleBox .fromHead-nav.on { position: relative; font-size: 20px; font-weight: bold; color: #0068B7; font-style: normal; } .fromHead-titleBox .fromHead-nav.sel:before{ content: ""; position: absolute; bottom: 0; left: 50%; width: 36px; height: 6px; background: #0068B7; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-radius: 3px; } /* 线按钮 */ .lineBtn { position: relative; height: 20px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; line-height: 20px; width: -webkit-calc(100% - 54px); width: -moz-calc(100% - 54px); width: calc(100% - 54px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lineBtn:before{ content: ""; position: absolute; top: 50%; left: 0,; width: 100%; border-bottom: 2px solid #E2E6EA; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .lineBtn .lineBtn-text { cursor: pointer; display: inline-block; padding: 0 12px; font-size: 14px; color: #333333; background: #fff; z-index: 1; } /* 协议选择 */ .checkbox-agree { margin: 0 0 20px 0; padding: 0 0 0 26px; position: relative; line-height: 20px; color: #666666; cursor: pointer; } .checkbox-agree:before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 2px solid #E0E1E3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; } .checkbox-agree.on:before { border: 2px solid #0068B7; background: #0068B7; } .checkbox-agree.on:after { content: ""; /*content: "✔";*/ /*position: absolute;*/ /*top: 0;*/ /*left: 5px;*/ /*color: #fff !important;*/ width: 3px; height: 9px; position: absolute; top: 2px; left: 8px; border: 2px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); } /* 确认按钮 */ .subminBtn { margin: 0 0 20px 0; display: block; cursor: pointer; width: 100%; height: 50px; font-weight: bold; font-size: 16px; color: #FFFFFF; text-align: center; line-height: 50px; background: #C0C9D1; border: 0; } .subminBtn.on { background: #0068B7; border-radius: 5px; } /* 登录错误提示 */ .login-hint-box { display: none; margin: 0 70px 20px; padding: 11px 13px; text-align: left; font-size: 14px; color: #E63939; line-height: 20px; letter-spacing: 1px; background: #FFF6F6; border-radius: 5px; border: 1px solid #E63939; } .resetPad-box .login-hint-box { margin: 0 70px 30px; } /*密码提示*/ .pad-tag-icon, .pc-tag-icon { width: 20px; height: 20px; cursor: pointer; vertical-align: sub; } .pad-tag-box { position: relative; } .pad-tag-text, .pc-tag-text { display: none; padding: 16px 22px; position: absolute; top: 36px; left: 0; font-size: 14px; color: #FFFFFF; line-height: 20px; width: -webkit-calc(100% - 22px); width: -moz-calc(100% - 22px); width: calc(100% - 22px); min-width: 330px; background: rgba(0, 0, 0, 0.70); border-radius: 10px; z-index: 10; } .pc-tag-text { top: 30px; left: -280px; } .pad-tag-text:before{ content: ""; position: absolute; top: -10px; left: 65px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 6px solid rgba(0, 0, 0, 0.70); } .pc-tag-text:before { content: ""; position: absolute; top: -10px; right: 32px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 6px solid rgba(0, 0, 0, 0.70); } .register-box .pad-tag-text{ top: 40px; } .register-box .pad-tag-text:before { top: -10px; left: 50px; } .resetPad-box .pad-tag-text, .resetPad-box .pc-tag-text { top: 30px; } .resetPad-box .pad-tag-text:before{ top: -10px; left: 55px; } /*密码展示隐藏*/ .inputCode-box .eye-icon { position: absolute; top: 50%; right: 0; width: 40px; height: 24px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; } /*注册页面弹窗*/ .register-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; z-index: 10; } .register-dialog::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } .register-dialog .register-dia-bg { width: 100%; height: 95px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: -webkit-gradient( linear, left top, left bottom, from(rgba(216, 236, 255, .49)), to(#FFFFFF)); background: -webkit-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -moz-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -o-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: linear-gradient( 180deg, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); border-radius: 10px 10px 0 0; z-index: 1; } .register-dialog .register-dia-box { position: relative; top: 50%; left: 50%; display: inline-block; width: 395px; background: #FFFFFF; font-size: 16px; color: #333333; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); border-radius: 10px; z-index: 10; } .register-dialog .register-dia-icon { margin: -30px auto 18px; width: 77px; height: 77px; } .register-dialog .register-dia-btn { cursor: pointer; margin: 60px 73px 64px; height: 50px; line-height: 50px; font-weight: bold; font-size: 16px; color: #0068B7; text-align: center; background: #FFFFFF; border: 1px solid #0068B7; } /*个人中心页面弹窗*/ .user-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; -ms-transition: all .5s; z-index: 99; overflow-y: scroll; } .user-dialog::before { content: ""; /*position: absolute;*/ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } .user-dialog .user-dia-bg { width: 100%; height: 95px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: -webkit-gradient( linear, left top, left bottom, from(rgba(216, 236, 255, .49)), to(#FFFFFF)); background: -webkit-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -moz-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: -o-linear-gradient( top, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); background: linear-gradient( 180deg, rgba(216, 236, 255, .49) 0%, #FFFFFF 100%); border-radius: 10px 10px 0 0; z-index: 12; } .user-dialog .user-dia-box { position: relative; top: 50%; left: 50%; display: inline-block; width: 740px; background: #FFFFFF; font-size: 16px; color: #333333; /* text-align: center; */ -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); border-radius: 10px; z-index: 12; } .user-dialog .editUserInfo { top: 0; -webkit-transform: translateX(-50%) translateY(0); -moz-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } .user-dialog .editUserInfo.cen { top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .user-dialog .user-edit { margin: -50px auto 0; padding: 0 115px; display: none; } .user-dialog .user-edit-h { text-align: center; font-weight: bold; font-size: 32px; color: #333333; line-height: 42px; } /* form表单 */ .form-list { margin: 0 0 30px 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .form-list.hide { display: none; } .form-list .input-label { position: relative; /* margin: 0 0 10px; */ padding: 0 20px 0 10px; display: inline-block; font-weight: bold; font-size: 16px; color: #333333; line-height: 40px; text-align: right; } .form-list .input-label.flex { display: flex; align-items: center; } .form-list.required .input-label::before { content: "*"; position: absolute; top: 54%; left: 0; font-size: 16px; color: #f00; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .form-list .input, .form-list .yq-select .layui-form-select { width: 100%; max-width: 400px; padding: 0 12px; font-size: 16px; color: #333333; height: 40px; line-height: 40px; background: #FFFFFF; border: 1px solid #CFD2DA; } .form-list .input.error, .form-list .layui-form-select.error, .form-list .error { background: #FFF6F6; border: 1px solid #E63939; } .form-list .input:hover, .form-list .input:focus, .form-list .layui-form-select:hover { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,104,183,0.3); box-shadow: 0px 0px 5px 0px rgba(0,104,183,0.3); border: 1px solid #0068B7; } .form-list .layui-input { border-width: 0; padding-left: 0; background-color: transparent; } .form-list .layui-this { color: #0068B7 !important; } .form-list .layui-input:hover, .form-list .layui-input:focus { -webkit-box-shadow: 0 0 0 0 #fff; box-shadow: 0 0 0 0 #fff; border: 0px solid #0068B7; } .form-list .inputCode-box { margin: 0; width: 100%; max-width: 400px; } /* 页面样式 */ .login-box .lineBtn { margin: 0 27px; } .login-box .checkbox-agree { margin-bottom: 68px; } .login-box .form-list, .resetPad-box .form-list { display: block; } .login-box .form-list .input-label, .resetPad-box .form-list .input-label { padding: 0; } .register-box .subminBtn { margin: 0 auto 20px; width: 340px; } .register-box .lineBtn { margin: 0 auto 30px; } /*————————————————————————————— 登录弹窗样式 ———————————————————————————*/ .login-box, .resetPad-box { width: 540px; padding: 0 0 50px; margin: 60px auto 60px; /* position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); */ } .login-box .fromHead-titleBox { margin: -10px 0 14px 0; padding: 0 120px; height: 46px; } .login-box .login-from-small { margin: 0 auto 30px; font-size: 14px; color: #666666; line-height: 20px; text-align: center; } .login-box .showHint .login-from-small{ margin: 0 0 14px; } .login-box .fromBox, .resetPad-box .fromBox { margin: 0 70px; } .login-box .login-nav-val { display: none; } .login-box .login-nav-val.sel { display: block; } .login-box .input-label, .resetPad-box .input-label { line-height: 30px; } .login-box .input, .resetPad-box .input { height: 46px; line-height: 46px; } .login-box .input.error, .input-box .input.error { background: #FFF6F6; border: 1px solid #E63939; } .login-box .input:hover,.login-box .input:focus, .input-box .input:hover, .input-box .input:focus { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,104,183,0.3); box-shadow: 0px 0px 5px 0px rgba(0,104,183,0.3); border: 1px solid #0068B7; } .login-box .login-input-yzm { margin: 0 0 80px 0; } .login-box .login-input-pad { margin: 0 0 20px; } .login-box .login-other-li { display: inline-block; float: right; padding-bottom: 10px; cursor: pointer; color: #999999; } .login-box .clearfix::after { content: ""; display: table; clear: both; } .login-box .login-other-li.on { color: #0068B7; } /*邮箱验证码登录*/ .inputCode-box { position: relative; margin: 0 0 30px 0; height: 46px; line-height: 40px; } .inputCode-box .input { margin: 0 0 30px 0; padding: 0 12px; width: 100%; font-size: 16px; color: #333333; height: 46px; line-height: 46px; background: #FFFFFF; border: 1px solid #CFD2DA; } .emailCode { cursor: pointer; position: absolute; top: 50%; right: 12px; color: #C0C9D1; font-size: 16px; text-align: right; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .emailCode.on { color: #0068B7; } /*————————————————————————————— 忘记密码样式 ———————————————————————————*/ .resetPad-box { padding: 0 0 60px; } .resetPad-box .fromHead-titleBox { margin: -30px 0 0; } .resetPad-box .fromBox { margin-top: 30px; } .resetPad-box .form-list { margin: 0 0 24px 0; } .resetPad-box .subminBtn { margin: 0 auto; } .resetPad-box .last-list { margin: 0 0 54px 0; } /*————————————————————————————— 创建账号样式 ———————————————————————————*/ .register-box { margin: 37px auto 30px; width: 740px; } .register-box .fromHead-titleBox { margin: -46px 0 0; padding: 0 120px; height: 46px; border: 0; } .register-box .fromHead-nav.on { font-size: 32px; } /*————————————————————————————— 创建账号、个人信息更新、更新密码样式 ———————————————————————————*/ .userInfo-body { overflow-y: scroll; background: #F0F4F8; } /* .register-body, .editUserInfo-body, .editUserPad-body, .editUserEmail-body, .resetUserPad-body { overflow-y: scroll; background: url("../image/login-bg-p.png") no-repeat; -o-background-size: cover; background-size: cover; } */ .editUserInfo-box, .editUserPad-box, .editUserEmail-box, .resetUserPad-box { padding: 40px 0 0; /*margin: 37px auto 30px;*/ /*padding: 40px 115px 40px 108px;*/ /*width: 740px;*/ background: #FFFFFF; /*box-shadow: 0px 2px 30px 0px #E2E7EF;*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; } .register-box .fromHead-bg{ height: 95px; } .registerForm { padding: 20px 115px 30px 108px; width: -webkit-calc(100%); width: -moz-calc(100%); width: calc(100%); } .register-box .register-title, .editUserInfo-box .editUserInfo-title, .editUserPad-box .editUserPad-title, .editUserEmail-box .editUserEmail-title, .resetUserPad-box .resetUserPad-title { margin: 0 0 34px 0; font-size: 32px; color: #333333; line-height: 42px; text-align: center; font-weight: bold; } /* .register-box .input-box, .editUserInfo-box .input-box, .editUserPad-box .input-box, .editUserEmail-box .input-box, .resetUserPad-box .input-box{ margin: 0 0 30px 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } */ .register-box .checkbox-bigbox, .editUserInfo-box .checkbox-bigbox{ margin-bottom: 40px; display: block; text-align: left; } .checkbox-box { /*margin-top: 16px;*/ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* height: 20px; line-height: 20px; */ } .checkbox-item-li { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .checkbox-bigbox .input-label { margin: 0 0 16px 0; line-height: 20px; padding: 0; } .checkbox-bigbox .checkbox-item { display: inline-block !important; margin: 0 0; width: 20px; height: 20px; } .checkbox-bigbox .checkbox-li { /* margin: 0 20px 0 6px; */ display: inline-block; } .checkbox-bigbox .checkbox-label { /* margin: 0 20px 0 6px; */ display: inline-block; height: 20px; line-height: 20px; vertical-align: top; } .register-box .select, .editUserInfo-box .select { padding: 0 12px; width: 400px; /*background: #FFFFFF;*/ border: 1px solid #CFD2DA; -webkit-appearance: none; /* 移除ioses默认样式 */ -moz-appearance: none; /* 移除Firefox默认样式 */ appearance: none; /* 移除其他浏览器默认样式 */ background: url("/arrow.png") no-repeat scroll right center transparent !important; background-color: #fff !important; padding-right: 14px !important; } .register-box .agreement-checkbox-box, .editUserInfo-box .agreement-checkbox-box { padding: 0 0 30px 0; margin: -30px 115px 0 108px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; /*height: 20px;*/ cursor: pointer; } .register-box .agreement-label, .editUserInfo-box .agreement-label { margin: 0 0 0 6px; display: inline-block; line-height: 20px; text-align: center; } .register-box .agreement-item, .editUserInfo-box .agreement-item { display: none; margin: 0; width: 20px; height: 20px; border-radius: 50px; } .register-box .custom-checkbox { height: 20px; } /* 隐藏原生的checkbox */ .register-box .custom-checkbox input[type="checkbox"] { display: none; } /* 创建一个新的checkbox模拟 */ .register-box .custom-checkbox .checkmark { display: inline-block; width: 20px; /* 根据需要调整大小 */ height: 20px; /* 根据需要调整大小 */ background-color: #fff; /* 未选中状态的背景色 */ border-radius: 10px; /* 圆角大小 */ position: relative; border: 2px solid #E0E1E3; } .register-box .custom-checkbox input[type="checkbox"]:checked + .checkmark { background-color: #0068B7; /* 选中后的背景颜色 */ border: 2px solid #0068B7; } /* 当checkbox被选中时,显示一个打勾的图形 */ .register-box .custom-checkbox input[type="checkbox"]:checked + .checkmark:before { content: ""; position: absolute; left: 4px; /* 根据模拟checkbox的大小调整 */ top: 1px; /* 根据模拟checkbox的大小调整 */ width: 5px; /* 打勾图形的宽度 */ height: 10px; /* 打勾图形的高度 */ border: solid #eee; /* 打勾的颜色 */ border-width: 0 3px 3px 0; /* 创建打勾的样式 */ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* 将打勾旋转 */ } .register-box .agreement-text, .editUserInfo-box .agreement-text { color: #0068B7; } .register-box .subminBtn.on, .userInfo-btn.on { background: #0068B7; border-radius: 5px; } /* 个人信息更新 */ .btnBox { margin: 0 0 40px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .userInfo-btn { width: 170px; height: 50px; } .btn-cancel { cursor: pointer; margin-right: 20px; color: #666666; background: #FFFFFF; border: 1px solid #E0E1E3; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } /*————————————————————————————— 个人中心样式 ———————————————————————————*/ /*左侧导航栏*/ .userInfo-bodyBox { width: 100%; /* height: -webkit-calc(100% - 80px); height: -moz-calc(100% - 80px); height: calc(100% - 80px); */ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sideView-box { width: 15%; /* height: 100%; */ background: #046AB8; } .sideView-box .sideView-head { position: relative; padding: 28px 15px 28px 30px; width: 100%; /* font-weight: bold; */ font-size: 16px; color: #fff; /*border-bottom: 1px solid #CCD2D6;*/ } /* .sideView-box .sideView-head:before { content: ""; position: absolute; left: 50%; bottom: 0; width: 89%; border-bottom: 1px solid #CCD2D6; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } */ .sideView-box .sideView-h-name { margin: 0 0 8px 0; padding: 0 0; text-align: left; } .sideView-h-email { /* padding: 0 8.6%; */ } .sideView-nav { /* margin: 30px 0; */ /* padding: 0 15px; */ } .sideView-box .sideView-nav-h { margin: 0 0 14px 0; padding: 0 0; font-size: 20px; font-weight: bold; color: #fff; text-align: left; } .sideView-nav .sideView-n-ul { font-weight: bold; font-size: 16px; color: #fff; } .sideView-nav .sideView-n-li { /* margin: 16px 0 16px 0; */ padding: 12px 15px 12px 30px; display: block; color: #fff; position: relative; /* height: 20px; */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sideView-nav .sideView-n-li.on, .sideView-n-li:hover { color: #fff; font-weight: bold; background: #1881D0; } .sideView-nav .sideView-n-li:after { content: ""; position: absolute; top: 50%; right: 0; width: 4px; height: 16px; background: #F7FAFC; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sideView-nav .on:after, .sideView-n-li:hover:after { content: ""; background: #fff; } .userInfo-bigbox { width: 85%; height: 100%; /* background: #F5F8FB; */ } .userInfo-box { margin: 50px; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); /*min-width: 1000px;*/ font-size: 16px; color: #333333; /*box-shadow: 0px 2px 30px 0px #E2E7EF;*/ } .userInfo-box .userInfo-h { padding: 16px 30px; width: 100%; height: 66px; font-weight: bold; font-size: 20px; color: #0068B7; line-height: 26px; background: #F1F9FE; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .userInfo-userPad { margin: 40px 0 0 0; } .userInfo-box .userInfo-h-icon { width: 35px; height: 35px; vertical-align: middle; } /*.userInfo-title-box {*/ /* padding: 12px 40px;*/ /* width: 100%;*/ /* height: 52px;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: space-between;*/ /* background: #F7FAFC;*/ /*}*/ .userInfo-title { font-weight: bold; font-size: 16px; color: #333333; line-height: 26px; } .userInfo-edit { /*display: flex;*/ -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; color: #0068B7!important; line-height: 26px; cursor: pointer; } .userInfo-h-icon { width: 26px; height: 26px; vertical-align: middle; } .userInfo-c-icon { width: 22px; height: 22px; vertical-align: middle; } .userInfo-synopsisBox { position: relative; padding: 25px 40px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; } .userInfo-userPadBox { position: relative; padding: 26px 35px; background: #fff; } .userInfo-userPad-li { margin-bottom: 10px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .userInfo-syno-text { line-height: 22px; } .userInfo-syno-label { line-height: 22px; } .userInfo-userPad-small { font-size: 12px; color: #666666; } .userInfo-edit { position: absolute; top: 16px; right: 40px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; z-index: 10; } .userInfo-edit2 { margin-left: 6px; cursor: pointer; font-size: 14px; color: #0068B7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .userInfo-edit2 .userInfo-h-icon { width: 22px; height: 22px; vertical-align: middle; } .userInfo-syno-li { padding: 15px 0; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; /* line-height: 50px; */ } .userInfo-synopsisBox .userInfo-syno-li:last-child { -webkit-box-flex: 0; -webkit-flex: 0 0 33%; -moz-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; } .userInfo-syno-li .userInfo-syno-label { display: inline-block; width: 150px; text-align: right; } .userInfo-syno-li .userInfo-syno-text { display: inline-block; /* width: 160px; */ width: -webkit-calc(100% - 150px); width: -moz-calc(100% - 150px); width: calc(100% - 150px); font-weight: bold; } .userInfo-syno-li .userInfo-syno-label2 { display: inline-block; width: 160px; text-align: right; } .userInfo-syno-li .userInfo-syno-text2 { display: inline-block; width: 300px; font-weight: bold; } .userInfo-subStatusBox { margin-top: 37px; padding: 0 32px; width: 100%; height: 80px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E0E1E3; background: #FFFFFF; } .userInfo-subStatus-edit { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #333; } .userInfo-subStatus-edit.on { color: #0068B7; } .userInfo-subStatus-edit .subStatus-item { margin-right: 6px; } .subStatus-item { width: 20px; height: 20px; } .user-dialog .subminBtn { margin: 0; } /*更改密码*/ .editUserPad-box .editUserPad-qrPad { margin: 0 0 20px 0; } .editUserPad-box .editUserPad-resetPad { cursor: pointer; margin: 0 0 36px 0; display: inline-block; font-size: 16px; color: #999999; } .editUserPad-resetPadBox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header { width: 100%; height: 81px; } .footer { position: fixed; bottom: 0; /* position: static; bottom: 0; */ display: block; width: 100%; height: 36px; overflow: hidden; } .registerBody .footer { position: static; } .registerFooter { position: unset; } /* 密码提示 */ .pwd-tag { position: relative; } .pc-tag-box { position: absolute; top: 25%; right: -.28rem; } .resetPad-box .pc-tag-box { top: 40px; } /*针对平板 手机等移动设备*/ @media screen and (max-width: 1200px) { body { height: 100%; } .userInfo-userPad .phones-show { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } /* 公共 */ .userInfo-edit.phones-show, .userInfo-edit2.phones-show { position: unset; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: .44rem; } .userInfo-edit.pc-show, .userInfo-edit2.pc-show { display: none !important; } /* 页面盒子 */ .main-box { width: 7.02rem; } /* 表单头部背景 */ .fromHead-bg, .register-box .fromHead-bg { height: 1rem; } /* 线按钮 */ .lineBtn { height: .30rem; font-size: .24rem; line-height: .30rem; width: -webkit-calc(100% - 1.16rem); width: -moz-calc(100% - 1.16rem); width: calc(100% - 1.16rem); } .lineBtn .lineBtn-text { font-size: .24rem; } .login-box .lineBtn { margin: 0 .58rem; } .register-box .lineBtn { margin: 0 auto; } /* 协议选择 */ .checkbox-agree { margin: 0 0 .94rem 0; padding: 0 0 0 .40rem; font-size: .22rem; line-height: .32rem; } .checkbox-agree:before { width: .32rem; height: .32rem; } .register-box .checkbox-agree:before { width: .25rem; height: .25rem; background: #FFFFFF; } .register-box .checkbox-agree.on:before { border: 2px solid #0068B7; background: #0068B7; } .register-box .agreement-label, .editUserInfo-box .agreement-label { line-height: .25rem; } .checkbox-agree.on:after { top: .01rem; left: .11rem; } .register-box .checkbox-agree.on:after { width: 2px; height: 7px; top: 0; left: .07rem; } /* 确认按钮 */ .subminBtn { margin: 0 0 .22rem 0; height: .76rem; line-height: .76rem; font-size: .30rem; } /* 登录错误提示 */ .login-hint-box { margin: 0 .24rem .3rem; padding: .19rem 0 .19rem .26rem; font-size: .26rem; line-height: .37rem; letter-spacing: 0; } /*个人中心页面弹窗*/ .user-dialog { overflow-y: scroll; } .user-dialog::before { position: fixed; } .user-dialog .user-dia-box { top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .user-dialog .editUserInfo { top: 0; } .user-dialog .editUserEmail, .user-dialog .editUserPad, .user-dialog .resetUserPad { top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } .user-dialog .user-edit { padding: 0 .25rem; } .user-dialog .user-dia-box { margin: .2rem 0; width: 7.02rem; } /*密码展示隐藏*/ .form-list .inputCode-box { max-width: 10rem; } .inputCode-box .eye-icon { right: .1rem; width: .40rem; height: .34rem; } /*密码提示*/ .pc-tag-box { display: none; } .pad-tag-box { position: relative; } .pad-tag-icon.phones-show{ display: inline-block; } .pad-tag-icon { width: .30rem; height: .3rem; } .pad-tag-text { padding: .16rem .22rem; top: .50rem; font-size: .22rem; line-height: .36rem; width: -webkit-calc(100% - .44rem); width: -moz-calc(100% - .44rem); width: calc(100% - .44rem); } .resetPad-box .pad-tag-text:before{ content: ""; left: 1.03rem; } .register-box .pad-tag-text { top: .5rem; } .register-box .pad-tag-text:before { left: 0.85rem; } /*注册成功弹窗*/ .register-dialog .register-dia-box { width: 5.94rem; font-size: .26rem; } .register-dialog .register-dia-icon { margin: -.30rem auto .2rem; width: 1.35rem; height: 1.35rem; } .register-dialog .register-dia-btn { margin: .50rem auto .85rem; width: 2.86rem; height: .7rem; line-height: .7rem; font-size: .28rem; } /* form表单 */ .form-list { margin: 0 0 .40rem 0; display: block; } .form-list .input-label { display: block; text-align: left; margin: 0 0 .14rem 0; font-size: .3rem; height: .42rem; line-height: .42rem; } .form-list .input { padding: 0 .2rem; width: 100%; max-width: 10rem; height: .76rem; line-height: .76rem; font-size: .28rem; } .form-list .yq-select .layui-form-select, .form-list .layui-input { padding: 0 .2rem; width: 100%; max-width: 10rem; height: .76rem; line-height: .76rem; font-size: .28rem; } .form-list .layui-input { padding-left: 0; } .form-list .layui-input { height: .74rem; line-height: .74rem; } .layui-form-select .layui-edge { border-width: .16rem !important; } .layui-form-selected .layui-edge { margin-top: -.21rem !important; } /* 页面样式 */ .login-box, .resetPad-box { margin: .32rem auto 0; padding: 0 0 1.05rem; position: unset; width: 7.02rem; transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); } .login-box .fromHead-titleBox { margin: -.5rem 0 .3rem; padding: 0 .9rem; font-size: .26rem; height: .68rem; } .resetPad-box .fromHead-titleBox { margin: -.5rem 0 0; padding: 0 .9rem; height: auto; border: 0; } .register-box .fromHead-titleBox { margin: -.5rem 0 0; padding: 0 .9rem; font-size: .26rem; height: auto; } .fromHead-titleBox .fromHead-nav.sel, .fromHead-titleBox .fromHead-nav.on { font-size: .4rem; } .login-box .login-from-small { margin: 0 0 .7rem; font-size: .22rem; line-height: .30rem; } .login-box .showHint .login-from-small{ margin: 0 0 .3rem 0; } .login-box .fromBox, .resetPad-box .fromBox { margin: 0 .25rem; } .login-box .form-list { margin: 0 0 .6rem 0; } .login-box .form-list .input-label, .resetPad-box .form-list .input-label { padding: 0; } .inputCode-box { height: .76rem; line-height: .76rem; } .inputCode-box .input { margin: 0 auto; } .emailCode { font-size: .28rem; line-height: .37rem; } .login-box .login-input-pad { margin: 0 0 .20rem 0; } .login-box .login-input-yzm { margin: 0 0 1.3rem 0; } .login-box .login-other-sel { padding-bottom: .17rem; margin: 0 auto; font-size: .24rem; color: #999999; line-height: .33rem; } /*邮箱验证码登录*/ /* 忘记密码 */ .resetPad-box .fromBox { margin-top: .50rem; } .resetPad-box .form-list { margin: 0 0 .40rem 0; display: block; } .resetPad-box .last-list { margin: 0 0 .6rem 0; } .resetPad-box .form-list .input { height: .76rem; line-height: .76rem; } /* .login-box .login-input-box { margin: 0 0 .60rem 0; height: .76rem; line-height: .76rem; } */ .login-box .login-emailCode { right: .22rem; font-size: .28rem; } /* 创建账号、个人信息更新 */ .register-box { position: relative; margin: .18rem auto .8rem; } .registerForm { padding: .38rem .24rem .4rem; } .register-title { margin: 0 0 .34rem 0; font-weight: 600; font-size: .42rem; } /* .register-box .input-label, .editUserInfo-box .input-label, .editUserPad-box .input-label, .editUserEmail-box .input-label, .resetUserPad-box .input-label { display: block; text-align: left; margin: 0 0 14px 0; font-size: .3rem; } */ /* .register-box .input, .editUserInfo-box .input, .editUserPad-box .input, .editUserEmail-box .input, .resetUserPad-box .input { padding: 0 .2rem; width: 100%; height: .76rem; line-height: .76rem; font-size: .28rem; } */ .checkbox-box { display: inline-block; /* height: .32rem; line-height: .6rem; */ } .checkbox-bigbox .checkbox-item { width: .32rem; height: .32rem; } .checkbox-bigbox .checkbox-li { margin: 0 0 .32rem; } .checkbox-bigbox .checkbox-label { margin: 0 .4rem 0 .05rem; font-size: .26rem; height: .32rem; line-height: .32rem; } .register-box .agreement-item, .editUserInfo-box .agreement-item { width: .32rem; height: .32rem; } .register-box .agreement-checkbox-box, .editUserInfo-box .agreement-checkbox-box { margin: 0 0 .2rem 0; padding: 0; height: .34rem; font-size: .22rem; line-height: .34rem; } .register-box .register-btn, .editUserInfo-box .register-btn { margin: 0 0 .22rem 0; width: 100%; height: .76rem; line-height: .76rem; font-size: .30rem; } .register-box .custom-checkbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: .25rem; } .register-box .custom-checkbox .checkmark { width: .25rem; height: .25rem; } .register-box .custom-checkbox input[type="checkbox"]:checked + .checkmark:before { left: .07rem; top: .03rem; } .register-box .agreement-checkbox-box { position: absolute; bottom: -.64rem; left: 0; } /*————————————————————————————— 个人中心样式 ———————————————————————————*/ .userInfo-bodyBox { display: inline-block; /* height: 100%; */ background: #F0F4F8; } .sideView-box { width: 100%; height: auto; background: transparent; } .sideView-nav, .sideView-nav-h { display: none; } .sideView-box .sideView-head { position: unset; padding: .20rem .24rem; color: #333333; } /* .sideView-box .sideView-head:before { content: ""; border-bottom: 0; } */ .sideView-box .sideView-h-name { padding: 0; font-weight: bold; font-size: .32rem; } .sideView-h-email { padding: 0; font-size: .22rem; font-weight: 400; } .userInfo-bigbox { margin: 0 auto; width: -webkit-calc(7.02rem); width: -moz-calc(7.02rem); width: calc(7.02rem); height: auto; border-radius: 10px; } .userInfo-box { margin: 0 auto; width: 100%; min-width: -webkit-calc(7.02rem); min-width: -moz-calc(7.02rem); min-width: calc(7.02rem); font-size: .28rem; border-radius: 10px; } .userInfo-userPad { margin: .2rem 0 0; } .userInfo-box .userInfo-h { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; /*padding: 26px 24px;*/ /* height: 1rem; */ font-size: .36rem; line-height: .50rem; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 10px 10px 0 0; } .userInfo-box .userInfo-h-icon { width: .46rem; height: .46rem; vertical-align: bottom; } .userInfo-c-icon { width: .46rem; height: .46rem; vertical-align: bottom; } /*.userInfo-title-box {*/ /* padding: .2rem .24rem;*/ /* height: .8rem;*/ /* box-sizing: border-box;*/ /*}*/ .userInfo-title { font-size: .28rem; line-height: .40rem; } .userInfo-edit, .userInfo-edit2 { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; font-size: .26rem; height: .46rem; line-height: .46rem; color: #0068B7!important; } .userInfo-edit { margin-left: .2rem; } .userInfo-synopsisBox { padding: .3rem 0 .4rem; display: inline-block; } .userInfo-syno-li { margin: 0 0; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0 .24rem .4rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .userInfo-userPad-li { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .userInfo-userPad-small { margin-top: .28rem; font-size: .22rem; color: #666666; } .userInfo-synopsisBox .userInfo-syno-li:last-child { display: block; } .userInfo-syno-li .userInfo-syno-label { width: 2rem; text-align: left; } .userInfo-syno-li .userInfo-syno-text { width: -webkit-calc(100% - 2rem); width: -moz-calc(100% - 2rem); width: calc(100% - 2rem); text-align: right; font-weight: bold; } .userInfo-syno-li .userInfo-syno-label2, .userInfo-synopsisBox .userInfo-syno-li:last-child .userInfo-syno-label { width: 100%; text-align: left; } .userInfo-syno-li .userInfo-syno-text2, .userInfo-synopsisBox .userInfo-syno-li:last-child .userInfo-syno-text { margin: .1rem 0 0; display: block; width: 100%; font-weight: bold; text-align: left; } .userInfo-syno-li2 { display: block; } .userInfo-synopsisBox .userInfo-syno-li:last-child { padding: 0 .24rem 0; } .userInfo-subStatusBox { padding: 0 .24rem; margin-top: .2rem; font-size: .26rem; height: 1.37rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .userInfo-subStatus-text { width: -webkit-calc(100% - .6rem); width: -moz-calc(100% - .6rem); width: calc(100% - .6rem); } .userInfo-subStatus-edit { width: .6rem; display: unset; font-size: .22rem; text-align: center; } .subStatus-item { display: block; margin: 0 auto .1rem !important; width: .32rem; height: .32rem; } .userInfo-btn { width: 50%; height: .76rem; font-size: .3rem; } .btn-cancel { margin-right: .10rem; } /* 个人信息更新 */ .editUserInfo-box, .editUserPad-box, .editUserEmail-box, .resetUserPad-box { padding: .44rem 0 0; } .register-box .checkbox-bigbox, .editUserInfo-box .checkbox-bigbox { margin-bottom: .2rem; } .btnBox { margin: 0 0 .5rem; } #editUserEmail .btnBox, #resetUserPad .btnBox { margin: .88rem 0 .73rem; } .editUserPad-box .editUserPad-resetPad { margin: 0 0 .5rem 0; font-size: .3rem; } .footer { display: none; } .returnIcon { display: none; } .user-dialog .user-edit-h { font-size: .42rem; margin-left: 0; } } @media screen and (max-width: 1440px) { .header { width: 100%; height: 71px; } } @media screen and (min-height: 600px) { .userInfo-bodyBox{ height: calc(100vh - 81px); } } @media screen and (max-height: 900px) { .footer{ position: static; } }