.header-out {
	box-shadow: 0px 3px 5px 0px rgba(76, 45, 7, 0.1);
}

.personal {
	width: 1200px;
	margin: 30px auto;
	position: relative;
	margin-bottom: 0;
	height: 960px;
}

.personal-head-con {
	float: left;
}

.personal-header {
	height: 104px;
	width: 300px;
	margin-top: 83px;
	background: rgba(248, 250, 252, 1);
	border-radius: 10px;
	text-align: center;
	position: relative;
	padding-top: 62px;
}

.personal-header-pic-t {
	height: 104px;
	width: 104px;
	border-radius: 50%;
	position: absolute;
	left: 100px;
	top: -50px;
	overflow: hidden;

}

#personal-header-pic {
	height: 100px;
	width: 100px;
	border-radius:50%;
	border: 2px solid #a5b2be;
}

.personal-header-pic-animate {
	line-height: 30px;
	width: 100px;
	position: absolute;
	bottom: -30px;
	left: 0;
	color: #fff;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.personal-header-pic-t:hover .personal-header-pic-animate {
	bottom: 0;
	transition: all 0.5s;
}

.personal-header h1 {
	margin: 0 auto;
	width: 270px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: 20px;
	font-family: PingFang-SC-Medium;
	font-weight: 500;
	color: rgba(233, 121, 0, 1);
	margin-bottom: 10px;
}

.personal-header h1 img {
	margin-right: 3px;
}

#personal-email {
	font-size: 14px;
	font-family: PingFang-SC-Medium;
	color: rgba(153, 153, 153, 1);
	margin-bottom: 15px;
}

.personal-bind-list {
	height: 30px;
	width: 190px;
	margin: 15px auto;
	color: #DF3225;
	line-height: 30px;
	position: relative;
}

.personal-bind-list-Nbind {
	position: absolute;
	top: 35px;
	left: 40px;
}

.personal-bind-list i {
	font-size: 18px;
	border: 1px solid #DF3225;
	border-radius: 50%;
	padding: 5px;
	cursor: pointer;
	margin-right: 15px;
}

.personal-bind-list .personal-bind-list-em {
	margin-right: 0;
}

.personal-bind-list .personal-bind-list-wx {
	color: #999;
	border-color: #999;
}

#personal-tittle {
	margin-top: 22px;
	font-size: 20px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	width: 122px;
	background: rgba(248, 250, 252, 1);
	line-height: 60px;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.personal-centre {
	border-radius: 10px;
	width: 300px;
	background: rgba(248, 250, 252, 1);
}

.personal-centre li {
	width: 280px;
	line-height: 70px;
	cursor: pointer;
	color: rgba(51, 51, 51, 1);
	padding-left: 20px;

}
.personal-centre li span i{
	font-size: 30px;
	float: left;
}
.iconfont-left{
	margin-left: 120px;
}
.personal-centre-li-active {
	color: #E13124 !important;
	background: rgba(223, 50, 37, 0.05);
}

.personal-animate {
	width: 5px;
	height: 52px;
	background: rgba(223, 50, 37, 1);
	position: absolute;
	top: 343px;
	left: 0;
	transition: 0.2s;
}

.personal-centre li span {
	font-size: 18px;
	font-weight: 400;
	padding-left: 22px;
}

.personal-concent {
	margin-left: 30px;
	float: left;
	padding-top: 50px;
	display: none;
	width: 870px;
}

.personal-concent-top {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.personal-masg {
	display: block;
}

.personal-concent h6 {
	width: 200px;
	float: left;
	height: 52px;
}

.personal-concent h6 #bgc {
	height: 18px;
	width: 8px;
	border-radius: 4px;
	background-color: #DF3225;
	display: block;
	margin-right: 20px;
	margin-top: 2px;
}

.personal-concent h6 span {
	float: left;
	font-size: 20px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

#edit-btn {
	text-align: center;
	width: 64px;
	padding-left: 20px;
	line-height: 33px;
	border: 1px solid rgba(153, 153, 153, 1);
	border-radius: 18px;
	float: right;
	font-size: 16px;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	cursor: pointer;
	background: url(../imgages/personal/1@2x.png) 15px center no-repeat;
}

.personal-masg li {
	margin-top: 48px;
	height: 43px;
}

.personal-masg h4 {
	text-align: center;
	float: left;
	width: 129px;
	line-height: 43px;
	background: rgba(246, 246, 246, 1);
	border-radius: 5px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);

}

.personal-masg h5 {
	float: left;
	width: 615px;
	padding-left: 30px;
	line-height: 42px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	margin-left: 15px;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
}

/* 个人中心编辑个人信息 */
.personal-editor {
	width: 433px;
	height: 484px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: #fff;
	/* border: 1px solid rgba(218, 218, 218, 1); */
	box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	display: none;
	z-index: 999;
}

.personal-editor i {
	font-style: normal;
	font-size: 14px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-left: 50px;
	margin-right: 10px;
}
.personal-editor .iconfont{
	margin-left: 0;
}
.personal-signature i {
	margin-left: 22px;
}

#personal-nickname-text,
#personal-name-text,
#personal-age-text {
	width: 270px;
	height: 36px;
	border: 1px solid rgba(228, 228, 228, 1);
	border-radius: 4px;
	padding-left: 15px;
	color: rgba(51, 51, 51, 1);
}

.personal-null {
	font-size: 12px;
	font-weight: 400;
	color: rgba(225, 49, 36, 1);
	margin-left: 108px;
	line-height: 20px;
}

.personal-editor h1 {
	line-height: 58px;
	font-size: 20px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	text-align: center;
	position: relative;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

#personal-del {
	position: absolute;
	top: 3px;
	right: 10px;
	color: rgba(153, 153, 153, 1);
	cursor: pointer;
	padding: 5px;
	line-height: 20px;
	width: 20px;
}
#personal-del i{
	font-size: 20px;
	color: #999;
}
#personal-del i:hover{
	color: #DF3225;
}
.personal-nickname {
	margin-top: 20px;
}

.personal-sex {
	line-height: 46px;
	position: relative;
}

.personal-sex input[type="radio"] {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	line-height: 30px;
	margin: 10px;
	margin-top: 8px;
}

.personal-sex-radio label {
	margin-right: 15px;
}

.personal-sex-radio input {
	appearance: none;
	-moz-appearance: none;
	/* Firefox */
	-webkit-appearance: none;
	/* Safari 和 Chrome */
}

.personal-sex-radio label::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #999;
	border-radius: 50%;
	position: absolute;
	top: 15px;
	margin-left: 10px;
}
.personal-sex-radio input:checked::before{
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #E13124;
	border-radius: 50%;
	position: absolute;
	top: 15px;
}
.personal-sex-radio input:checked::after {
	content: '';
	width: 8px;
	height: 8px;
	background-color: #E13124;
	display: inline-block;
	border-radius: 50%;
	margin-top: -5px;
    position: absolute;
    top: 24px;
    margin-left: 4px;
}

.personal-signature {
	position: relative;
}

.personal-signature i {
	float: left;

}

#personal-signature-text {
	float: left;
	height: 70px;
	width: 285px;
	border: 1px solid rgba(228, 228, 228, 1);
	border-radius: 4px;
	outline: none;
	resize: none;
}

.personal-signature-text-num {
	position: absolute;
	bottom: 5px;
	right: 45px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(194, 194, 194, 1);
}

.personal-btn {
	width: 235px;
	margin: 30px auto;
}

#personal-define {
	width: 100px;
	height: 40px;
	background: rgba(225, 49, 36, 1);
	border-radius: 20px;
	border: none;
	font-weight: 400;
	color: rgba(254, 254, 254, 1);
	font-size: 14px;
	margin-right: 30px;
	cursor: pointer;
	outline: none;
}

#personal-cancel {
	width: 98px;
	height: 38px;
	border: 1px solid rgba(225, 49, 36, 1);
	border-radius: 20px;
	background: #fff;
	color: rgba(225, 49, 36, 1);
	cursor: pointer;
	outline: none;
}

/* 更换头像 */
.personal-header-change {
	width: 433px;
	height: 379px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(218, 218, 218, 1);
	box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: #fff;
	z-index: 999;
	display: none;
}

.personal-header-change h1 {
	line-height: 58px;
	font-size: 20px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	text-align: center;
	position: relative;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.personal-header-photo {
	width: 165px;
	height: 165px;
	border-radius: 50%;
	border: 2px solid rgba(225, 49, 36, 1);
	background: hotpink;
	margin: 25px auto;
	margin-bottom: 15px;
}

#Change-Viewpoints {
	margin-left: 50px;
	padding-left: 25px;
	cursor: pointer;
	background: url(../imgages/personal/icon1@2x.png) left center no-repeat;
}

#Upload-header {
	margin-left: 166px;
	padding-left: 25px;
	cursor: pointer;
	background: url(../imgages/personal/icon2@2x.png) left center no-repeat;
}

/*账户绑定*/
#normal-problem {
	color: rgba(153, 153, 153, 1);
	font-size: 18px;
	width: 80px;
	float: right;
	padding-left: 25px;
	background: url(../imgages/personal/cjwt.png) no-repeat;
}

.personal-bind ul {
	padding-left: 40px;
	font-size: 14px;
}

.personal-bind h4 {
	margin-top: 40px;
	padding-top: 53px;
	text-align: center;
	width: 60px;
	color: rgba(51, 51, 51, 1);
	font-weight: 400;
	float: left;
	background: url(../imgages/personal/shoujibangding.png) top no-repeat;
}

.personal-bind p {
	margin-top: 50px;
	width: 450px;
	float: left;
	margin-left: 30px;
	line-height: 24px;
}

.personal-bind li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-bottom: 30px;
	width: 790px;
}

.personal-bind p span {
	padding-right: 8px;
	font-size: 18px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.personal-bind p i {
	font-style: normal;
	color: #E13124;
}

.personal-bind li button {
	line-height: 43px;
	border: none;
	outline: none;
	cursor: pointer;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 22px;
	margin-top: 55px;
}

#personal-bind-phone {
	background: rgba(225, 49, 36, 1);
	color: #fff;
}

#personal-bind-change {
	background: #fff;
	border: 1px solid rgba(225, 49, 36, 1);
	color: rgba(225, 49, 36, 1);
	margin-left: 30px;
}

.personal-bind-email #personal-bind-change {
	width: 120px;
}

.personal-bind-email h4 {
	background: url(../imgages/personal/yx.png) top no-repeat;
}

.personal-bind-password h4 {
	background: url(../imgages/personal/mm.png) top no-repeat;
}

.personal-bind-socialcontact h4 {
	background: url(../imgages/personal/sj.png) top no-repeat;
}

.change-Password {
	margin-left: 156px;
}

.personal-bind-qq {
	float: left;
	margin-right: 40px;
}

.personal-bind-qq-WeChat {
	margin-left: 80px;
	margin-top: 30px;
}

.personal-bind-qq i {
	color: #4296d5;
	font-size: 40px;
	border: 1px solid rgba(228, 228, 228, 1);
	border-radius: 50%;
	padding: 20px;
	float: left;
	margin-right: 8px;
}

.personal-bind .personal-bind-socialcontact {
	border-bottom: none;
}

.personal-bind-qq h3 {
	padding-top: 12px;
	font-size: 14px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.personal-bind-qq h5 {
	font-size: 12px;
	font-weight: 400;
	color: rgba(225, 49, 36, 1);
	margin-top: 8px;
	margin-bottom: 10px;
}

.personal-bind-qq-r {
	float: left;
}

.personal-bind-qq h1 {
	width: 61px;
	padding: 3px;
	font-size: 12px;
	font-family: MicrosoftYaHei;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	border: 1px solid rgba(207, 207, 207, 1);
	border-radius: 10px;
	text-align: center;
}

.personal-bind-WeChat i {
	/* color: #5ac33a; */
	color: rgba(207, 207, 207, 1);
}

/* 邮箱验证弹框 */
.mailbox-Verification {
	width: 487px;
	height: 289px;
	background: #fff;
	border: 1px solid rgba(218, 218, 218, 1);
	box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 999;
	display: none;
}

.mailbox-Verification h1 {
	line-height: 58px;
	text-align: center;
	position: relative;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.mailbox-Verification i {
	font-style: normal;
	margin-left: 50px;
	font-size: 14px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.mailbox-Verification .iconfont{
	margin-left:0;
}
.mailbox-Verification .personal-null {
	margin-left: 142px;
}

.mailbox-Verification  h1 span i{
	position: absolute;
	right: 12px;
	bottom: 18px;
	color: #999;
	cursor: pointer;
	line-height: 20px;
	width: 20px;
	padding: 5px;
}
.mailbox-Verification h1 span i{
	font-size: 20px;
}
.mailbox-Verification h1 span i:hover{
	color: #E13124;
}
.mailbox-Verification .personal-yanzhengma {
	margin-top: 0;
}

.mailbox-Verification .personal-yanzhengma i {
	margin-left: 36px;
}

.mailbox-Verification .personal-yanzhengma #personal-nickname-text {
	width: 170px;
}

.personal-yanzhengma-send {
	height: 38px;
	width: 96px;
	background: rgba(255, 156, 64, 1);
	border-radius: 4px;
	border: none;
	outline: none;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
}

/* 验证手机号码 */
.mobile-number-Verification {
	width: 487px;
	height: 289px;
	background: #fff;
	border: 1px solid rgba(218, 218, 218, 1);
	box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 999;
	display: none;
}

.mobile-number-Verification i {
	font-style: normal;
	font-size: 14px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: #999;
	margin-left: 22px;
}
.mobile-number-Verification .iconfont{
	margin-left: 0;
}
.mobile-number-Verification h1 {
	text-align: center;
	line-height: 58px;
	position: relative;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

#mobile-number-Verification-del {
	display: block;
	line-height: 20px;
	width: 20px;
	padding: 5px;
	position: absolute;
	bottom: 18px;
	right: 8px;
	cursor: pointer;
}
#mobile-number-Verification-del i{
	font-size: 20px;
}
#mobile-number-Verification-del i:hover{
	color: rgba(225, 49, 36, 1);
}
.mobile-number-Verification .personal-mobile-yanzhengma {
	margin-top: 0;
}

.mobile-number-Verification .personal-mobile-yanzhengma #personal-nickname-text {
	width: 170px;
}

.personal-mobile-yanzhengma i {
	margin-left: 36px;
}

.mobile-number-Verification .personal-null {
	margin-left: 140px;
}

/* 更改手机号 */
.change-mphone-num {
	height: 406px;
	display: none;
}

.change-mphone-num h1 {
	margin-bottom: 20px;
}

.change-mphone-num .personal-nickname {
	float: right;
	margin-right: 55px;
}

.change-mphone-num .personal-yanzhengma-send {
	margin-right: -2px;
}

.change-mphone-num .personal-nickname {
	margin-top: 0;
}

.change-mphone-num .personal-null {
	margin-left: 100px;
}

.change-mphone-num .change-mphone-num-now1 .personal-null {
	margin-left: 126px;
}

.change-mphone-num .change-mphone-num-now3 .personal-null {
	margin-left: 140px;
}

.change-mphone-num #personal-define {
	margin-top: 20px;
}

#change-mphone-num-del {
	position: absolute;
	display: block;
	width: 20px;
	bottom: 20px;
	right: 15px;
	padding: 5px;
	line-height: 20px;
	cursor: pointer;
}
#change-mphone-num-del i{
	font-size: 20px;
}
#change-mphone-num-del i:hover{
	color: rgba(225, 49, 36, 1);
}
/* 修改密码 */
.per-change-Password {
	height: 340px;
}

.per-change-Password h1 {
	margin-bottom: 20px;
}

.per-change-Password-in-new i {
	margin-left: 36px;
}

.per-change-Password .personal-nickname {
	margin-top: 0;
}

.per-change-Password .personal-btn {
	margin-top: 15px;
}

/* 更换邮箱 */
.personal-change-email {
	height: 406px;
}

.personal-change-email h1 {
	margin-bottom: 20px;
}

.personal-change-email .personal-nickname {
	margin-top: 0;
}

.personal-change-email i {
	margin-left: 64px;
}

.personal-change-email-in3 i {
	margin-left: 36px;
}

.personal-change-email-in4 i {
	margin-left: 79px;
}

.personal-change-email .personal-btn {
	margin-top: 20px;
}

/* 我的课程 */
#personal-all-class {
	float: right;
	color: #333;
	line-height: 36px;
	cursor: pointer;
}

.personal-MyCollection li {
	padding: 30px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.personal-MyCollection ul {
	margin-top: 10px;
}

.personal-MyCollection img {
	float: left;
	border-radius: 10px;
}

.personal-MyCollection-con {
	width: 340px;
	float: left;
	margin-left: 20px;
}

.personal-MyCollection h1 {
	font-size: 18px;
	font-family: MicrosoftYaHei-Bold;
	font-weight: bold;
	color: #333;
	margin-top: 20px;
}

.personal-MyCollection h3 {
	font-size: 14px;
	font-weight: 400;
	color: #666;
	margin-top: 18px;
}

.personal-MyCollection h5 {
	font-size: 12px;
	font-weight: 400;
	color: #999;
	margin-top: 18px;
}

.personal-MyCollection-btn {
	float: right;
	margin-top: 42px;
}

#MyCollection-btn {
	height: 32px;
	width: 88px;
	border: 1px solid #DF3225;
	border-radius: 16px;
	background-color: #DF3225;
	color: #fff;
	margin-right: 30px;
	cursor: pointer;
	outline: none;
}

#mylearn-btn {
	height: 32px;
	width: 88px;
	border: 1px solid #DF3225;
	border-radius: 16px;
	background-color: #fff;
	color: #DF3225;
	cursor: pointer;
	outline: none;
}

.problic-page{
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 270px;
}
.footer-out{
    height: 270px;
    margin-top: -270px;
}