@charset "utf-8";
/* CSS Document */
body { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; -webkit-text-size-adjust: none; color: #000; position: relative; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, p { margin: 0; padding: 0; }
img { border: 0; vertical-align: bottom; }
ul, li { list-style-type: none; }
a { color: #000; text-decoration: none; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }
input::-webkit-input-placeholder{
      color:#ABAAAA;
  }
  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:#ABAAAA;
  }
  input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:#ABAAAA;
  }
  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
      color:#ABAAAA;
  }
input{ border:none; }
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; }
.fb { font-weight: bold; }
.clear{clear: both;}


.login{ background: url(../images/loginBg.jpg) no-repeat bottom; background-size:100%; width: 100%; padding-top:2.1rem;}
.login .logo{ width: 33.4%; margin:0px auto; }
.login .logo img{ width:100%;}
.loginTit{ width: 77%;background:rgba(255,255,255,.42); margin:.6rem auto; height: .8rem; line-height: .8rem; border-radius: .8rem; overflow: hidden; }
.loginTit span{ display: block; width: 50%; float: left; height: .8rem; border-radius: .8rem; font-size: .36rem; color: #606060;   text-align: center;}
.loginTit span.hover{ color: #d03425; background:#fff;}
.form{ background:#fff; width: 80%; margin:0px auto; padding:.6rem 4%; border-radius: 18px; overflow: hidden; border: 2px solid #DFDFDF; }
.form .row{ width: 93%; margin:0px auto .35rem; height: .8rem; line-height: .8rem; padding-left:2%;border-radius: .4rem; overflow: hidden; border: 1px solid #DFDFDF; }
.form .row .icon{ display: block;float: left; width: 5%; padding-left: 3%;padding-right: 3%; }
.form .row .icon img{ width: 100%; vertical-align: middle; margin-top: -.08rem;}
.form .row input[type="text"]{ display: block; float: left; height: inherit; line-height: inherit; width: 80%; font-size: .24rem; color: #ABAAAA; }
.form .row input[type="password"]{ display: block; float: left; height: inherit; line-height: inherit; width: 80%; font-size: .24rem; color: #ABAAAA; }
.form .rowSub{  width: 95%; margin:0px auto .35rem; height: .8rem; line-height: .8rem; border-radius: .4rem; overflow: hidden; background: #E21810; padding-left: 0%;  }
.form .submit{font-size: .28rem; color: #fff; background:none; display: block;width: 100%; height: inherit; line-height: inherit; }
.forgetPass{ text-align: center; font-size: .24rem; color: #999999; margin:.2rem auto; width: 100%; display: block; }
.login .tip{ text-align: center; font-size: .24rem; color: #999999; margin:.2rem auto; width: 100%; display: block; padding-top:.6rem; }
.loginMode{ padding-top:.6rem;padding-bottom:3rem; width: 60%; margin:0px auto; }
.loginMode .item{ width: 50%; float: left;text-align: center; }
.loginMode .item img{ height: .7rem; }

.mask{ background:rgba(51,51,51,.49); position: fixed; top: 0; left: 0; height: 100%; width:100%;  }
.mask .adArea{width: 70%; margin:38% auto 0; position: relative;}
.mask .adArea .img{ width: 100%; }
.mask .adArea .img img{ width: 100%; }
.mask .adArea .close{ width: 10%; display: block;position: absolute;top: -.6rem; right:0%; }
.mask .adArea .close img{ width: 100%; }

.verificationCode input[type="text"]{ width: 50% !important; }
.getVerificationCode{ font-size: .28rem; color: #d03425; float: right; padding-right: 5%; display: block; }
.changePassword{ background:#F3F3F3; min-height: 100%; }
.changePassword form{ background:none; border: none;      padding: .3rem 2%;
    border-radius: 0px; width: 90%;}
.changePasswordTit{ height: 1rem; line-height: 1rem; overflow: hidden; text-align: center; font-size: .34rem; color: #000; background: #fff; }
.changePassword .block{ background:#fff; margin-bottom:.3rem;  border-radius: 8px; overflow: hidden; }
.changePassword .row{     border: none; border-bottom:1px solid #ECECEC; border-radius: 0; }
.changePassword .block .row:last-child{ border-bottom:none; }
.changePassword .form .row{ height: 1.15rem; line-height: 1.15rem; margin-bottom:.0rem; }
.changePassword .rowSub{ height: .8rem !important; line-height: .8rem !important;  width: 100%; border-radius: 8px; overflow: hidden; margin-top:1.2rem; }
.changePassword .form .row input[type="password"]{ display: block; float: left; height: inherit; line-height: inherit; width: 60%; font-size: .28rem; color: #ABAAAA; }
.changePassword .row .icon{     font-size: .28rem;    color: #000; width:30%; }
.changePasswordBg{ height: 100%; background:#F4F4F4;  }
footer{ width: 100%; position: fixed;bottom: 0; left: 0; background:#fff; box-shadow: 0 .1rem .1rem .15rem rgba(0,0,0,.1); z-index: 2; }
footer .item{ width: 25%;float: left; text-align: center; padding:.25rem 0;  }
footer .item .img {width: 100%;}
footer .item .img img{ width:25%; }
footer .item .tit{ font-size: .22rem; color: #6c6c6c; margin-top:.1rem; }
footer .item .hover{ color: #000; }

/* Codex responsive desktop shell: keep the mobile UI from stretching on PC */
* { box-sizing: border-box; }
img, video, audio, canvas { max-width: 100%; }
html, body { overflow-x: hidden; }

@media screen and (min-width: 751px) {
	html {
		background: #f3f4f6;
	}
	body {
		width: 750px;
		max-width: 750px;
		min-height: 100vh;
		margin-left: auto;
		margin-right: auto;
		background: #fff;
		overflow-x: hidden;
		box-shadow: 0 0 24px rgba(0,0,0,.08);
	}
	header,
	.pageBanner,
	.banner,
	.popular_courses,
	.course_display,
	.courseTit,
	.course_cate,
	.course_frame,
	.container,
	.nav-container,
	.z-vip3-d1,
	.z-vip9-d1,
	.z-vip10-d1,
	.z-vip11-d1 {
		max-width: 750px;
		margin-left: auto;
		margin-right: auto;
	}
	footer,
	.course_frame .bottomBuy,
	.bottomBuy {
		width: 750px !important;
		max-width: 750px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
	.mask,
	.mask2,
	.mask_qr {
		width: 750px !important;
		max-width: 100vw;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
	.inline-course-player audio,
	.inline-course-player video {
		max-width: 100% !important;
	}
}

@media screen and (max-width: 750px) {
	body {
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-shadow: none;
	}
}