body{background: #eee;font-size: 14px}
.section-top{background: #fff;min-width: 1200px}
.location{width: 1200px;margin: 0 auto;font-size: 12px;color: #6f6f6f;line-height: 70px}
.location a{color: #6f6f6f;}
.location a:hover{color: #fd5d2b;}
.one{width: 1200px;margin:0 auto;background: #fff;padding: 60px 0 40px}
.one > div{width: 502px;margin: 0 auto;position: relative;}
.one-cont{position: absolute;top: 4px;left: 19px;width: 464px;height: 596px;}
.user{}
.user{margin: 22px}
.user:after{content: '';display: table;clear: both;}
.user .header{float: left;width: 58px;border-radius: 50%;border:6px solid #ff5b00;}
.user div{float: left;margin-left: 20px;width: 330px;}
.user p{margin: 0;line-height: 2.5em;font-size: 14px;color: #adabab;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.user strong{font-size: 20px;color: #ff5b00}
.one .title{margin: 0 24px;font-size: 24px;color:#ff5b00}
.one .cont{margin: 1em 24px;font-size: 18px;color:#ff7c34;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.one .img{width: 154px;height: 154px;margin: 66px auto;border:12px solid #fff;border-radius: 10px}
.one .code p{text-align: center;color:#fff;font-size: 16px;clear: both;padding: 0 4em;line-height: 2em}
.one .field{position: absolute;top: 20px;right: 14px;font-size: 12px}
.one .field span{padding: 2px 4px}
.one .field span:nth-child(3n+1){color: #ff5b00;border:1px solid #ff5b00;}
.one .field span:nth-child(3n+2){color: #2ad586;border:1px solid #2ad586;}
.one .field span:nth-child(3n){color: #798af9;border:1px solid #798af9;}


.mobile-nav,.mobile-level,.mobile-felid{display: none;}
@media screen and (max-width: 640px){
	html{
		font-size: -moz-calc(100vw * 20 / 750);
		font-size: -webkit-calc(100vw * 20 / 750);
		font-size: calc(100vw * 20 / 750);
	}
	body{background: #f5f5f5}
	.step .box .level,.step .box .felid,.step .box .cont,.step-title a,.dowmload-top,.top .nav,.top .logo em,.location,.section-footer{display: none;}
	.section-top{min-width: 100%;height: 5rem;background: #f9f9f9;}
	.top{width: 100%;height: 100%;padding: 0 1rem;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
	.top .logo a{display: table;height: 100%}
	.top .logo span{background-size:2.4rem;line-height: normal;padding-left: 3.3rem}
	.top .logo strong{font-size: 1.1rem;color: #fd5d2b}
	.mobile-nav{display: block;float: right;height: 100%;line-height: 5rem}
	.mobile-nav a{float: left;padding-left: 1.5rem;font-size: 1.1rem}
	.mobile-nav a:first-child{margin-right: 1.2rem;background: url(../images/android-download.png) no-repeat left center;background-size: .8rem auto}
	.mobile-nav a:last-child{padding-left: 1.4rem;background: url(../images/ios-download.png) no-repeat left center;background-size: .5rem auto}
	.one{width: auto;background: #f9f9f9;padding: 3rem 3rem 0;}
	.one > div{width: 100%;}
	.seo_bg{width: 100%;display: block;}
	.one-cont{
		width: -moz-calc(100% * 463 / 502);
		width: -webkit-calc(100% * 463 / 502);
		width: calc(100% * 463 / 502);
		height: -moz-calc(100% * 596 / 631);
		height: -webkit-calc(100% * 596 / 631);
		height: calc(100% * 596 / 631);
		left: -moz-calc(100% * 19 / 502);
		left: -webkit-calc(100% * 19 / 502);
		left: calc(100% * 19 / 502);
		top: -moz-calc(100% * 4 / 631);
		top: -webkit-calc(100% * 4 / 631);
		top: calc(100% * 4 / 631);
	}
	.user{margin: 1.25rem 1.25rem 1rem}
	.user .header{width: 14%;height: 14%;border: .3rem solid #ff5b00}
	.user div{width: 55%;margin-left: 3%}
	.user strong{font-size: 1.2rem}
	.user p{font-size: .9rem;line-height: 1.6em}
	.one .field{font-size: .9rem}
	.one .title{font-size: 1.4rem;margin: 0 1.1rem}
	.one .cont{font-size: 1.1rem;margin: .2rem 1.1rem 0}
	.code{
		overflow: hidden;
		display: table;
		position: absolute;
		bottom: 0 ;
		left:0;
		width: 100%;
		height: -moz-calc(100% * 390 / 596);
		height: -webkit-calc(100% * 390 / 596);
		height: calc(100% * 390 / 596);
	}
	.code > div{display: table-cell;vertical-align: middle;}
	.one .img{border: 1rem solid #fff;width: 7rem;height: 7rem;margin: 0 auto 1.5rem;overflow: hidden;}
	.one .code p{font-size: .9rem;padding: 0}

	.fin-inform{width: 100%;padding: 0}
	.inform-l{width: 100%;float: none;}
	.step{padding: 0;background: transparent;}
	.step-title{padding:1.2rem;position: relative;margin-bottom: 0;}
	.step-title:after{content: '';position: absolute;left: 1.2rem;right: 1.2rem;top: 50%;width: 80%;border-top: 1px solid rgba(59,59,59,.2);transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}
	.step-title span{background: #f5f5f5;position: relative;z-index: 10;font-size: 1.2rem;color: rgba(59,59,59,.6);border-left: 0;padding: 0 1.9rem 0 1.8rem}
	.step-title span:before{content: '';width: 1rem;height: 1rem;background: #ef6842;position: absolute;top: 50%;left: 0;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}
	.step-cont{width: 100%;overflow-x: auto;white-space:nowrap;}
	.step-cont::-webkit-scrollbar{opacity: 0;height: 0;width: 0}
	.step .box{width: 14.4rem;margin-left: 1rem;float: none;display: inline-block;padding: 1rem .8rem;font-size: 1.2rem;border-radius: .7rem}
	
	.step .box a{color: #959191;}
	.step .box .title{font-size: 1.2rem;color: #3b3b3b;line-height: 2em;padding-left: 2.5rem;position: relative;}
	.step .box .author{border-top:0;margin-top:0;line-height: 2em;color: #959191;}
	.mobile-felid{display: block;line-height: 2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
	.mobile-level{display: block;font-size: .8rem;line-height: normal;padding: 0 .2rem;position: absolute;left: 0;top: 50%;background: #96e2f6;color: #fff;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}
	.inform-r{width: 100%;}
	.other{padding: 0;}
	.other-cont{width: 100%;overflow-x: auto;white-space:nowrap;padding-top: 1.5rem}
	.other-cont::-webkit-scrollbar{opacity: 0;height: 0;width: 0}
	.other-title{position: relative;margin: 0 .7rem;padding: 4rem 0 0 0;border-bottom: 1px solid rgba(199,199,199,.4)}
	.other-title:after{content: '相关课程';position: absolute;top: 0;line-height: 4rem;left: 0;font-size: 1.2rem;color: #585858;}
	.other-title span{display: none;}
	.other-cont .box{width: 16rem;display: inline-block;border: 0;margin: 0;margin-left: .8rem}
	.other-cont .box:first-child{margin-left: 0}
	.other-cont .box p{font-size: 1.3rem;color: #585858;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.other-cont .box img{max-height: auto;height: 10rem}

}