/* reset */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, menu, input, textarea, button, select, th, td iframe{ margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, b, strong { font-size:100%; font-weight:normal;}
li { list-style:none;}
em, i { font-style:normal;}
a, a:visited, a:active { text-decoration:none; border:none; outline:none;}
input, textarea { outline:none;}
textarea { resize: vertical;}
body { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; word-wrap:break-word; line-height:1.5;font-size: 12px;min-width:7.5rem!important;}
body, button, input, select, textarea { font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', 'microsoft yahei', simsun, sans-serif;}
.none{ display:none;}
.left { float:left;}
.right { float:right;}
.m-hide{display: none;}
.clearfix::after { content:''; clear:both; display:block; height:0; overflow:hidden;visibility:hidden;}
.The_total{display:none;}
a[title="站长统计"]{display: none;}
body{width:7.5rem;margin: 0 auto!important;overflow-x: hidden;overflow-y: auto;}
.wrap{width:6.8rem;margin: 0 auto; position: relative;}
.wrap1{width:7rem;margin: 0 auto;clear: both; text-align: center;}
.m-show{display:block!important;}
.m-hide{display: none!important;}


.page-index{width: 100%; height: 100%; background:#ed5762 url(../images/page-index.jpg) no-repeat center top; background-size: 7.5rem; float: left;}

/*banner*/
.banner-box{height:4.73rem;width: 100%;}
.banner-box .wrap{position: relative;}
.banner-box .logo{width:1.7rem; height:0; top: .25rem; position: absolute;}
.banner-box .logo img{width: 100%; display: block;}
.banner-box .banTip{width: 1.21rem; height: 1.23rem; display: block; position: absolute; top: .6rem; right: 2.3rem;
	-webkit-animation: rightDraw 4s ease-in-out infinite;
	animation: rightDraw 4s ease-in-out infinite;
}
.banner-box .banTip img{width: 100%; left: 0;}

.fixBtn{position: fixed; right: 0; top: .2rem;}
.fixBtn a{width: auto; background: #fff; height: .48rem; font: .24rem/.48rem "microsoft yahei";color: #da252a; float: left; display: block; clear: both; margin-bottom: .12rem; padding-right: .15rem; padding-left: .2rem;
	-webkit-border-radius: .24rem 0 0 .24rem;
	-moz-border-radius: .24rem 0 0 .24rem;
	border-radius: .24rem 0 0 .24rem;
}

/* 首页主体模块 */
.mainbox{width: 100%; clear: both; float: left; background: url(../images/img01.png) no-repeat center top; background-size: 100%; height: 9.73rem;
	border-radius: .2rem; overflow: hidden;
}
.zdbox{height: 10.82rem; background: url(../images/img02.png) no-repeat center top; background-size: 100%;}
.mainbox .mainTit{width: 100%; float: left; clear: both;height: .8rem; background: rgba(251,211,205,.5);}
.mainbox .mainTit h3{font: bold .36rem/.8rem "microsoft yahei"; color: #e33942; background: url(../images/index-title01.png) no-repeat center;background-size: 5.02rem;}
.step{width: 100%; float: left; clear: both; margin-top: .27rem;}
.step img{width: 6.25rem; display: block; margin: auto;}
.computer{width: 100%; clear: both; float: left; margin-top: .7rem;}
.computer img{width: 6.5rem; display: block; margin: auto;}
.index-btn{width: 100%; clear: both; float: left; margin-top: .4rem;}
.index-btn a{width: 5rem; height: 1.01rem; display: block; margin: auto; font: bold .32rem/.92rem "microsoft yahei"; color: #fff;
	background: url(../images/index-btn.png) no-repeat center; background-size: 100%;
	border-radius: .46rem;
	-webkit-box-shadow: 0 0 .1rem rgba(82,157,247,.2);
	box-shadow: 0 0 .1rem rgba(82,157,247,.2);
}
.index-btn a:after{content: ''; width: .39rem; height: .88rem; display: inline-block; vertical-align: top; background: url(../images/icon01.png) no-repeat center; background-size: 100%; margin-left: .1rem;
	-webkit-animation: scaleDraw 2s ease-in-out infinite;
	animation: scaleDraw 2s ease-in-out infinite;
}

.progressbox{width: 100%; clear: both; float: left; margin-top: .2rem;}
.progressbox img{width: 6.54rem; display: block; margin: auto;}
.list-btn{width: 100%; clear: both; float: left; margin-top: .4rem; position: relative;}
.list-btn a{width: 3rem; height: 1.01rem; display: none; margin: 0 .1rem; font: bold .32rem/.94rem "microsoft yahei"; color: #fff;
	border-radius: .46rem;
}
.list-btn a.btn01{background: url(../images/btn01.png) no-repeat center; background-size: 100%;}
.list-btn a.btn02{background: url(../images/btn02.png) no-repeat center; background-size: 100%;}
.list-btn a:after{content: ''; width: .39rem; height: .88rem; display: inline-block; vertical-align: top; background: url(../images/icon01.png) no-repeat center; background-size: 100%; margin-left: .1rem;
	-webkit-animation: scaleDraw 2s ease-in-out infinite;
	animation: scaleDraw 2s ease-in-out infinite;
}
.list-btn span{width: 1.83rem; height: .74rem; display: none; background: url(../images/btnTip.png) no-repeat center; background-size: 100%;
	position: absolute; top: -.35rem; right: .1rem; font: .24rem/.5rem "microsoft yahei"; color: #fff;
	-webkit-animation: rightTip 4s ease-in-out infinite;
	animation: rightTip 4s ease-in-out infinite;
}
.list-btn span em{font-weight: bold; font-size: .3rem;}

/* 课程主讲内容 */
.mainCont{background: #fff8ee; width: 100%; clear: both; float: left; margin: .38rem auto .45rem;
	border-radius: .2rem; overflow: hidden;
}
.mainCont .mainTit{width: 100%; float: left; clear: both;height: .8rem; background: rgba(251,211,205,.5);}
.mainCont .mainTit h3{font: bold .36rem/.8rem "microsoft yahei"; color: #e33942; background: url(../images/index-title02.png) no-repeat center;background-size: 5.56rem;}
.mainCont ul{width: 100%; clear: both; float: left; margin: .32rem 0;}
.mainCont ul li{width: 1.91rem;height: 2.1rem; display: inline-block; margin: 0 .12rem; background: url(../images/index-img02.png) no-repeat center top; background-size: 100%; float: left;}
.mainCont ul li.item01{margin-left: .39rem;}
.mainCont ul li font{width: 100%; font: bold .28rem/.6rem "microsoft yahei"; color: #fff;}
.mainCont ul li p{font: .24rem/.4rem "microsoft yahei"; color: #333; width: 100%; clear: both; float: left; margin-top: .12rem;}
.mainCont ul li.item01 p{margin-top: .35rem;}

/* base */
.basebox{width: 100%; float: left; clear: both; height: 2rem; margin-bottom: .45rem; display: block;background: url(../images/base-img01.png) no-repeat center; background-size: 100%;}
.basebox .baseEwm{float: right; margin-top: .2rem; margin-right: .65rem; width: 1.63rem; display: block;}
.basebox .baseEwm img{width: 100%; display: block;}

/* 充能记录 */
.record{width: 100%; display: block; float: left; margin: .35rem 0 .4rem; background: url(../images/img03.png) no-repeat center top; background-size: 100%; height: 4.23rem;}
.record h3{width: 100%; clear: both; float: left; margin-top: .68rem; font: bold .36rem/.45rem "microsoft yahei"; color: #e33942; background: url(../images/zd-title01.png) no-repeat center; background-size: 6.1rem;}
.record .recordShow{width: 100%; float: left; clear: both;}
.record .recordShow img{display: block; width: 2.83rem; margin: .4rem auto 0;}
.record .recordShow >p{display: block; width: 100%; clear: both; font: .26rem/.3rem "microsoft yahei"; color: #333;}
.record .recordShow ul{width: 6rem; float: left; clear: both; margin: 0 .5rem; display: none;}
.record .recordShow li{width: 100%; clear: both; border-bottom: dashed 1px #999999;  height: 1rem;}
.record .recordShow li:last-child{border-bottom: none;}
.record .recordShow li a{float: left; margin-left: .15rem; font: .26rem/1rem "microsoft yahei";color: #333;}
.record .recordShow li p{float: right; margin-right: .15rem; font: .26rem/1rem "microsoft yahei";}
.record .recordShow li p span{color: #e12e36;}


@-webkit-keyframes scaleDraw{
	0%  {transform: scale(1); }
	25% {transform: scale(1.2);}
	50% {transform: scale(1);}
	75% {transform: scale(1.2);}
	100%{transform: scale(1);}
}
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	0%  {transform: scale(1); }
	25% {transform: scale(1.2);}
	50% {transform: scale(1);}
	75% {transform: scale(1.2);}
	100%{transform: scale(1);}
}
@-webkit-keyframes rightDraw{
	0%  {right: 2.3rem; }
	25% {right: 2rem;}
	50% {right: 2.3rem;}
	75% {right: 2rem;}
	100%{right: 2.3rem;}
}
@keyframes rightDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	0%  {right: 2.3rem; }
	25% {right: 2rem;}
	50% {right: 2.3rem;}
	75% {right: 2rem;}
	100%{right: 2.3rem;}
}

@-webkit-keyframes rightTip{
	0%  {right: .1rem; }
	25% {right: .3rem;}
	50% {right: .1rem;}
	75% {right: .3rem;}
	100%{right: .1rem;}
}
@keyframes rightTip {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	0%  {right: .1rem; }
	25% {right: .3rem;}
	50% {right: .1rem;}
	75% {right: .3rem;}
	100%{right: .1rem;}
}