/* CSS重置样式 */ /*public css*/ /*clear default style*/ body,form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,header,menu,footer,section,video,article,button{margin:0;padding:0;} li{list-style:none} body{font-size:14px;background:#fff;font-family:"微软雅黑","Microsoft YaHei","宋体";color:#7f7f7f;} a{text-decoration:none;color:#7f7f7f;cursor:pointer;outline:0;*star:expression(this.onFocus=this.blur());} a:active{border:none;} a:after{border:none;} a:hover{ color: #00b369; } img{border:0} html{height:100%;overflow-y: scroll;} i{ font-style:normal; } b{ font-weight: normal; } /*sidition action*/ .fl{float:left;} .fr{float:right;} .clear {clear: both;} .clearfix::after {clear: both; content: ""; display: block; height: 0;} .clearfix { zoom: 1;} .w1200{ width: 1200px; margin: 0 auto; } .trans{ transition: all 0.2s;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-o-transition: all 0.2s } #wrapper{ width: 100%;} body{ min-width: 1200px;background: url(../images/bg-img.jpg) no-repeat 0 0 ; background-size: cover; } /*** 头部 ***/ #hearder{ height:80px; background-color: #fff; box-shadow:0 0 10px rgba(0,0,0,0.2) } #hearder .logo{ height:27px; width: 107px; margin-top:27px; } #hearder .logo a{ display:inline-block; height:36px; width: 140px; background: url(../images/web-logo.png) no-repeat; } #hearder .notice-span{ color: #7f7f7f; line-height: 80px;} #hearder .notice-span a { color: #00b369; } #hearder .notice-span a:hover{ text-decoration:underline; } /** 底部固定 **/ .CopyRight-p{ width:100%; height:20px; line-height: 20px; text-align: center; position: absolute; bottom:20px; left: 0; color: #282828; font-size: 12px; } .CopyRight-p span{ padding: 0 12px; } #public-box,#no-verify{ width:524px; height:580px; box-shadow: 0 0 20px rgba(0,0,0,0.2); background-color: #fff; border-radius: 2px; } .margin-top-105{margin:65px auto 0; } .bg-box{ background:url(../images/bg-img-box.png) no-repeat;height:226px; width: 100%; } #public-box .ZC-trans{ color: #7f7f7f; height: 20px; line-height: 20px; font-size: 14px; padding:35px 65px; text-align: right; } /*** 默认登录 ****/ .circle-login{ width:362px; margin:0 auto; padding-top:145px} .circle-login .login-way{ width: 362px; margin: 0 auto } .circle-login .login-way .qq-way .link-box{ height:144px; width:144px; border-radius: 50%;background: url(../images/public-icon.png) 0 -264px; box-shadow: 0 5px 20px rgba(100,180,250,0.3)} .circle-login .login-way .ZH-way .link-box{ height:144px; width: 144px; border-radius: 50%;background: url(../images/public-icon.png) -149px -264px;box-shadow: 0 5px 20px rgba(101,228,155,0.3)} .circle-login .login-way p{ color: #5d5d5d; font-size: 16px; text-align: center; width: 144px; margin-top:25px } .circle-login .login-way .link-box:hover{ opacity: 0.8; } .circle-login .login-way .qq-way:hover p,.circle-login .login-way .ZH-way:hover p{ color: #00b369 } .circle-login .other-way{ width:338px;margin: 108px auto 0 } .circle-login .other-way-tilte{ position: relative; font-size:14px; color: #7f7f7f; text-align: center; width: 100%; margin-bottom: 30px; } .circle-login .other-way-tilte:before,.circle-login .other-way-tilte:after{ content: ''; height: 1px; width:110px; background: #e2e2e2; position: absolute; top:50%; } .circle-login .other-way-tilte:before{left: 0;} .circle-login .other-way-tilte:after{right: 0;} /** 第三方登陆 **/ .all-kinds-of a{ display: inline-block; width: 50px; height: 50px;} .all-kinds-of .margin-left{ margin-left:96px; } .all-kinds-of a{ opacity: 0.6} .qq-login{ background: url(../images/public-icon.png) 0px -57px; } .wx-login{ background: url(../images/public-icon.png) -53px -57px; } .wb-login{ background: url(../images/public-icon.png) -106px -57px ; } .phone-login{ background: url(../images/public-icon.png) -159px -57px; } .all-kinds-of a:hover{ opacity:1 } /*** 账号登陆 ***/ .w-400{ width: 362px; margin:0 auto 0 ; padding-top:50px; overflow: hidden;position:relative;left:0px;top:0px;} /*.none{ display: none\9; }*/ .login-state{ color: #333; font-size: 18px;} .login-state a{ display:inline-block; width:181px; height:60px; line-height:60px; text-align: center; cursor: pointer; } .login-state a:hover{ color: #00b369; } .login-state .on{ color: #00b369 } .title-actline{width: 100%;height: 2px;background: #ccc;position: relative; margin-bottom:22px; overflow: hidden\9;zoom:1;} .title-actline span{display: block;width: 50%;height: 2px;background:#00b369;position: absolute;top: 0;} .change{ width:765px; overflow: hidden; } .change .opacity{ opacity: 0; filter: alpha(opacity=0); } .fill-box{ width:362px; overflow: hidden;padding-right: 20px;} .fill-list{padding: 0 10px 0 15px ; border:#e2e2e2 1px solid; height:48px; margin-bottom:12px; position:relative; border-radius: 2px;} .fill-list input{ -webkit-box-shadow: 0 0 0px 30px white inset;border:0; height:24px ; line-height: 24px; padding:11px 0px; color: #1b1b1b;font-family:"Microsoft YaHei";background-color:#fff;outline: none; margin-top: 1px; font-size:14px; width:280px } /*修改placeholder的默认颜色*/ .fill-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b2b2b2; } .fill-list ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #b2b2b2; } .fill-box input:-ms-input-placeholder {color: #b2b2b2;} .fill-box input::-webkit-input-placeholder{color:#b2b2b2;} .fill-list-none input:-moz-placeholder{color: #b2b2b2;} .fill-list-none input::-moz-placeholder{color: #b2b2b2;} .fill-list .type-password{ font-size:15px;} .fill-list .type-password:-moz-placeholder { /* Mozilla Firefox 4 to 18 */font-size:14px; } .fill-list .type-password::-moz-placeholder { /* Mozilla Firefox 19+ */font-size:14px; } .fill-list .type-password:-ms-input-placeholder {font-size:14px;} .fill-list .type-password::-webkit-input-placeholder{font-size:14px} .fill-list i{ width: 20px; height: 22px; display: inline-block; background: url(../images/public-icon.png) -218px 0 no-repeat; margin-top:12px; margin-right:14px; } .fill-list .pasword-icon{ background-position:-243px 0 } .fill-list .phone-icon{ background-position:-284px 0px; height: 25px} .fill-list .mail-icon{ background-position:-308px 0px; width: 23px;} .fill-list-none{ position: relative; margin-bottom:12px;} .fill-list-none input{border:#e2e2e2 1px solid; height:48px; line-height:48px; width:147px; padding: 0 20px;font-family:"Microsoft YaHei" ; outline:none; font-size:14px; border-radius: 2px; } .fill-list-none .but-yzm{height: 44px;line-height: 44px; color: #fff; width: 125px; outline:none; cursor: pointer; border: none; } .fill-list-none .but-yzm-click{ background-color: #00b369 } .fill-list-none .but-yzm-click:hover{ background-color: #1abb78 } .fill-list-none .yzm-HQ .yzm-HQ-span{ height:50px ; line-height:50px; display: inline-block; border-radius: 2px; background-color: #b2b2b2;color: #fff; cursor: pointer; width: 165px; text-align: center;} .fill-list-none .w220{ width: 180px; } .fill-list-none .JYM-div{ width:130px; height: 50px; position: relative; } .fill-list-none .JYM-div .Refresh{ width: 130px; height: 50px;background:#000;filter:alpha(opacity=40);opacity: .1;cursor:pointer;position:absolute; top:0; left: 0; display: none; } .fill-list-none .JYM-div .Refresh i{ display:block; height: 29px; width:34px; background: url(../images/public-icon.png) -279px -30px no-repeat; line-height: 50px; text-align: center; margin:10px auto; cursor: pointer; transition: all 0.6s ease;-webkit-transition: all 0.6s ease ;-moz-transition: all 0.6s ease;} .fill-list-none .JYM-div .Refresh .rorate360{ transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg); } .fill-list-none .JYM-div:hover .Refresh{ display:block; } .fill-list-none .JYM-div img{ width: 130px;height: 50px;} .fill-list-none #phone_code_yzm{cursor:pointer;width: 140px;height: 50px;} /*提示及错误提示*/ .notice-box{ height: 28px; line-height: 28px; padding: 0 12px; position: absolute; z-index: 2; top:35px; left:25px; background-color: #fef4e5; border: #f6c090 1px solid; color: #dc873b; font-size:12px; display: none;} .notice-box i{ display: inline-block; width: 12px; height: 6px; background: url(../images/public-icon.png) -269px 0 ; position: absolute; top:-18px; left: 20px; } .posi-box{ height:30px ; line-height:30px; background-color: #ff6633; color: #fff; font-size: 12px; display: inline-block; right:10px; position: absolute; top:10px; padding: 0 10px; border-radius: 2px; display: none;} .error-border{ border:#ff6633 1px solid } .fill-list-none .yzm-HQ .gre-btn{ background-color: #00b369; } .positive{ position: relative; } /*** 记住密码 ****/ .Keep-Password{ height:40px; color:#333; line-height:30px; position: relative; cursor: pointer; /*margin-bottom:40px*/} .Keep-Password .notice-box{ width: 216px } .Keep-Password:hover .notice-box{ display: block; } .Keep-Password .jizhu{ display:inline-block; height:19px; width:19px; background:url(../images/public-icon.png) -241px -26px; vertical-align:-4px; margin:0 10px 0 0 } .Keep-Password-no .jizhu{background:url(../images/public-icon.png) -219px -26px; } /*** 登录注册按钮 **/ .now-login input{ width:362px; background-color: #00b369; color:#fff ; font-size: 18px; height:60px; line-height:60px; font-family:"Arial","Microsoft YaHei" ; border: none; outline: none; cursor: pointer; border-radius: 2px} .now-login input:hover{ background-color: #1abb78 } /*** 支付的方式 ***/ .posi-r{ position: relative; } .fixed-way{ height:110px; width:362px; position:absolute; position: absolute; bottom: -10px; left:82px;} .fixed-way a{ margin-right: 54px;display: inline-block; width: 50px; height:50px; opacity: 0.6 } .fixed-way a:hover{ opacity: 1; } .fixed-way .center-m{ width:362px; margin:28px auto 0;} .fixed-way .center-m .last-margin{ margin-right: 0 } /**** 弹窗 ***/ .wotu-logo{ width: 140px; height: 74px;background:url(../images/public-icon.png) -351px 0; margin: 0 auto 30px; } .padding-top{ padding-top: 95px; } .padding-top .other-way{ margin-top: 55px } .padding-top .login-way{ margin-bottom:90px } .member-change{ position: relative; height: 580px; } /*** 无法收到验证码联系客服及一系列弹窗样式 ****/ #public-mask{position: fixed;left: 0;top: 0; width: 100%; height:100%; z-index:99;} #public-mask .mask{ background:#000;filter:alpha(opacity=40);opacity: .4;height: 100% ;} .public-mask-box{ width:455px;height:326px; background-color:#fff; border-radius: 2px; overflow: hidden; position:fixed; top: 50%; left: 50%; margin-top:-163px; margin-left: -227px;box-shadow: 0px 0px 15px rgba(44,153,255,0.15) inset,0 0 15px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 15px rgba(44,153,255,0.15) inset,0 0 15px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 15px rgba(44,153,255,0.15) inset,0 0 15px rgba(0,0,0,0.2); -webkit-animation: login-win .4s forwards; animation: login-win .4s forwards;-moz-animation: login-win .4s forwards; } .icon-off{ width: 20px; height: 20px; display:inline-block; background: url(../images/public-icon.png ) -220px -88px no-repeat; position: absolute; top: 20px; right: 20px; cursor: pointer;} .icon-off:hover{ transform: rotate(180deg);-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);} .contact-p{ color: #000; font-size: 16px; text-align: center; padding-top: 110px; padding-bottom: 45px} .icon-qq-i{ display: inline-block; width: 22px; height: 24px; background:url(../images/public-icon.png ) -253px -59px no-repeat; margin-right: 10px; vertical-align: -5px; } .contact-a{ display: block; height:64px; width: 226px; background-color: #00b369; border-radius: 2px; color: #fff; font-size: 18px; line-height: 64px; margin:0 auto; text-align:center;} .contact-a:hover{ color: #fff; background-color: #1abb78; } .mail-p{ color: #000; font-size: 16px; text-align: center;padding-top: 110px; padding-bottom: 45px} .mail-p span{ color: #00b7ee } .icon-success,.icon-fail{ width: 65px; margin: 110px auto 40px; } .icon-success i{ display:inline-block; width:65px; height: 65px; background:url(../images/public-icon.png ) 0 -430px no-repeat;} .icon-fail i{display:inline-block; width:65px; height: 65px; background:url(../images/public-icon.png ) -72px -430px no-repeat;} .success-box p{ color: #000; text-align: center; font-size:20px; } .notice-box-div p,.mail-box-none p{ color: #1f1f1f; text-align: center; font-size:16px; } .close-style{-webkit-animation: login-win .4s forwards; animation: login-win .4s forwards;-moz-animation: login-win .4s forwards;} /*** 弹窗开启动画 ***/ @-webkit-keyframes login-win{ 0% {transform: scale(0.7);-webkit-transform: scale(0.7);} 45% {transform: scale(1.05);-webkit-transform: scale(1.05);} 80% {-webkit-transform: scale(0.95);transform: scale(0.95);-webkit-tranform: scale(0.95); } 100% {transform: scale(1);-webkit-transform: scale(1); } } @keyframes login-win{ 0% {transform: scale(0.7);-webkit-transform: scale(0.7);} 45% {transform: scale(1.05);-webkit-transform: scale(1.05);} 80% {-webkit-transform: scale(0.95);transform: scale(0.95);-webkit-tranform: scale(0.95); } 100% {transform: scale(1);-webkit-transform: scale(1); } } @-moz-keyframes login-win{ 0% {transform: scale(0.7);-webkit-transform: scale(0.7);} 45% {transform: scale(1.05);-webkit-transform: scale(1.05);} 80% {-webkit-transform: scale(0.95);transform: scale(0.95);-webkit-tranform: scale(0.95); } 100% {transform: scale(1);-webkit-transform: scale(1); } } /*验证码弹窗*/ .YZM-box-big{ position: fixed;left: 0;top: 0; width: 100%; height:100%; z-index:99;} .YZM-box-big .mask{ background:#000;filter:alpha(opacity=40);opacity: .4;height: 100% ;} .YZM-box{ height: 280px; width: 455px; position:absolute;top:50%;left:50%; z-index: 5;margin:-140px 0 0 -228px; box-shadow: 0 0 5px rgba(0,0,0,0.35) ; background: url(//js.wotucdn.com/2016/user/images/box-bg.png) left top no-repeat #fff; } .YZM-box h4{ font-size: 26px; color:#000; font-weight: normal; text-align: center; padding-top: 40px; padding-bottom: 30px } .YZM-box .close{ display: inline-block; width: 21px; height:20px; background: url(//js.wotucdn.com/2016/user/images/close-but-icon.png) 0 0; position: absolute; top: 12px; right: 12px; } .YZM-box .close:hover{ background-position: 0 -31px; } .YZM-box .fill-list-none{ width: 330px; margin: 0 auto; } .YZM-box .input-list-but{ margin-top: 30px; } .YZM-box .input-list-but input{ display: block; height:50px; line-height: 50px; background-color: #06af6c; width:332px; margin: 0 auto;border: none; margin-top: 10px; text-align: center; color: #fff; font-size: 18px; font-family:"Microsoft YaHei" ; cursor: pointer; outline: none; } .YZM-box .input-list-but input:hover{ background-color:#1abb78 } .about-web{ position: absolute;top:54px;z-index:6; background-color: #fff; right:-1px; border: #e2e2e2 1px solid; width: 368px; padding: 5px 0} .about-web li{ height: 26px; line-height: 26px; text-indent: 20px; } .about-web li:hover{ background-color: #f4f4f4; cursor: default; } @media screen and (max-height:770px) { .margin-top-105{ margin-top: 30px; } .CopyRight-p{ position: static; margin:50px 0 20px; } } /**** 尚未绑定现在绑定 ****/ #no-verify{ height:520px} .no-bind p{ font-size: 16px; text-align: center; color: #333; line-height:34px; } .no-bind p span{ color: #00b7ee; padding:0 5px; } .no-bind{ padding-top:70px; } .no-bind .fill-box{ width: 320px; margin: 60px auto 140px;padding: 0;} .no-bind .fill-list{ margin-bottom: 30px; } .no-bind .now-login input{ width: 320px; } .no-bind .new-login{ text-align: center; font-size:13px; color: #333; } .no-bind .new-login a{ color: #ff6633; padding: 0 3px;} .no-bind .new-login a:hover{ text-decoration: underline; }