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;}
.fin-video{background: #000;height: 500px}
.center{width: 1200px;margin: 0 auto;height: 100%}
.video{float: left;width: 940px;height: 100%;position: relative;}
.video audio{position: absolute;bottom: 0;left: 0;width: 100%;z-index: 999}
.code{display: none;position: absolute;top: 50%;left: 50%;width: 500px;height: 310px;background: #fff;z-index: 10;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.code p{color: #fc5c1f;font-size: 18px;text-align: center;padding: 45px 0}
.code .img{width: 118px;height: 118px;margin: 0 auto;padding: 6px;border:10px solid #eee;border-radius: 10px}
.code span{position: absolute;top: 10px;right: 10px;width: 22px;height: 22px;background: url(../images/video-close.png) no-repeat;}
.video > img{position: absolute;top: 50%;left: 50%;z-index: -1;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.tele{float: left;width: 12px;height: 100%}
.tele.left{background: #292929 url(../images/tele-left.png) no-repeat center;background-size: 6px auto}
.tele.right{background: #292929 url(../images/tele-right.png) no-repeat center;background-size: 6px auto}
.catalog{float: left;width: 248px;height: 100%}
.catalog .title{color: #fd5d2b;padding-left: 1em;border-bottom: 1px solid #333}
.catalog .title span{border-bottom: 2px solid #fd5d2b;line-height: 2em;display: inline-block;}
.catalog .list{background: #191919;height: calc(100% - 31px);overflow-y: auto;}
.catalog .list::-webkit-scrollbar{width: 8px;background: #191919}
.catalog .list::-webkit-scrollbar-thumb{background: #373737;border-radius: 8px;}
.catalog .list::-webkit-scrollbar-button{height: 0;}
.catalog .list li a{font-size: 14px;padding: 1em 0 1em 20px;display: block;color: #999}
.catalog .list li.active{background: #242424}
.catalog .list li.active a{color: #fd5d2b}


.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}
	.tele,.catalog,.other-title a,.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}
	.fin-video{height: 20rem}
	.center{width: 100%;}
	.video{float: none;width: 100%;}
	.code{width: 80%;height: 15rem}
	.code p{font-size: 1.2rem;padding: 1.5rem 0}
	.code .img{width: 6rem;height: 6rem;border:.5rem solid #eee;}
	.code span{display: none;}
	.fin-inform{width: 100%;padding: 1rem 0 0 0}
	.inform-this{padding: 1rem}
	.inform-this .left{float: none;width: 100%;line-height: 2rem}
	.inform-this .left p:first-child{font-size: 1.8rem}
	.inform-this .left p:last-child{margin-top: 0;font-size: 1.2rem}
	.inform-this .right{float: none;width: 100%;margin-top: 1rem;text-align: left;}
	.inform-this .right .money{margin-top: 1rem}
	.inform-this .right .money span{font-size: 1.6rem;background-size:1.4rem;padding-left: 1.8rem}
	.intro{padding: 1rem;margin: 1rem 0 0}
	.intro .title{margin-bottom: 1rem}
	.intro .title span{font-size: 1.6rem;padding-left: 1.4rem;border-left:.2rem solid #fd5d2b;}


	.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{height: 10rem}
}