@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    font-size:14px;
    font-family: 'Microsoft yahei',Verdana, Arial, Helvetica, sans-serif;
}
body{
    overflow-x: hidden;
    width: 100%;
}
#section{
    width: 100%;
    min-width: 1200px;
    color:#fff;
}
#section .top{
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 1373px;
    background: url("../images/index_bg.jpg") center/cover;
}
#section .top .logo{
    position: absolute;
    top:93px;
    left:-240px;
    width: 240px;
    height: 56px;
    background:url("../images/logo.png") center/cover;
    transition: left .8s ease-out;
}
#section .top .app-home{
    position: absolute;
    top:60px;
    right:-708px;
    width: 708px;
    height: 713px;
    background:url("../images/app_home.png") center/cover;
    transition: right .8s ease-out;
}
#section .top .content{
    width: 1100px;
    margin:0 auto;
    padding-top: 235px;
}
#section .top .content .top-title{
    position: relative;
    font-size: 36px;
    font-weight: bold;
}
#section .top .content .top-title::after{
    position: absolute;
    top:2px;
    left:260px;
    content: "";
    width:15px;
    height:15px;
    border:4px solid rgba(255,255,255,1);
    border-radius:50%;
}
 #section .top .content .top-explain{
     width:395px;
     margin-top: 29px;
     font-size:16px;
     font-weight:400;
     color:rgba(255,255,255,1);
     line-height:28px;
 }
#section .top .content .download{
    width:177px;
    height:58px;
    background:rgba(255,255,255,1);
    margin-top: 65px;
    border:1px solid rgba(244,244,244,1);
    border-radius:8px;
}
#section .top .content .download a::after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    clear: both;
}
#section .top .content .download a{
    display: block;
    width:119px;
    height: 100%;
    padding: 0 29px;
}
#section .top .content .download a span{
    display: block;
}
#section .top .content .download a .icon{
    float: left;
    width: 26px;
    height: 22px;
    margin-top: 18px;
    background: url("../images/download.png") center/cover;
}
#section .top .content .download .font{
    float: right;
    line-height: 58px;
    color:#06BB44;
    font-weight:bold;
    font-size:20px;
}
#section .top .app-pt{
    position: absolute;
    bottom: 0;
    left:50%;
    width: 1200px;
    height: 611px;
    margin-left:-600px;
}
#section .top .app-pt .pt-title{
    width:520px;
    margin: 0 auto;
    font-size:34px;
    font-weight:bold;
    text-align: center;
    color:rgba(37,37,37,1);
    line-height:42px;
}
#section .top .app-pt .pt-explain{
    width:1200px;
    margin: 20px auto 0;
    font-size:16px;
    text-align: center;
    font-weight:400;
    color:rgba(128,128,128,1);
    line-height:28px;
}
#section .top .app-pt .app-pt-bg{
    position: absolute;
    bottom: 0;
    left:50%;
    width: 677px;
    height: 437px;
    background:url("../images/app_pt.png") center/cover;
    transform: translateX(-50%);
}
#section .top .course-icon{
    position: absolute;
    left:-177px;
    bottom: 52px;
    width: 177px;
    height: 284px;
    background:url("../images/course_icon.png") center/cover;
    transition: left .8s ease-out .5s;
}
#section .top .exam-icon{
    position: absolute;
    right:-176px;
    bottom: 188px;
    width: 176px;
    height: 133px;
    background:url("../images/exam_icon.png") center/cover;
    transition: right .8s ease-out .5s;
}
#section .middle{
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 680px;
    background: #f7f7f7;
}
#section .middle .app-course{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
#section .middle .app-course .course-title{
    width:520px;
    padding-top: 70px;
    margin: 0 auto;
    font-size:34px;
    font-weight:bold;
    text-align: center;
    color:rgba(37,37,37,1);
    line-height:42px;
}
#section .middle .app-course .course-explain{
    width:1200px;
    margin: 20px auto 0;
    font-size:16px;
    text-align: center;
    font-weight:400;
    color:rgba(128,128,128,1);
    line-height:28px;
}
#section .middle .app-course .app-course-bg{
    position: absolute;
    bottom: 0;
    left:50%;
    width: 100%;
    height: 503px;
    background:url("../images/app_course.png") bottom center no-repeat;
    transform: translateX(-50%);
}
#section .bottom{
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 893px;
    background: #fff;
}
#section .bottom .app-member{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
#section .bottom .app-member .member-title{
    width:520px;
    padding-top: 70px;
    margin: 0 auto;
    font-size:34px;
    font-weight:bold;
    text-align: center;
    color:rgba(37,37,37,1);
    line-height:42px;
}
#section .bottom .app-member .member-explain{
    width:1200px;
    margin: 20px auto 0;
    font-size:16px;
    text-align: center;
    font-weight:400;
    color:rgba(128,128,128,1);
    line-height:28px;
}
#section .bottom .app-member .app-member-bg{
    position: absolute;
    bottom: 0;
    left:50%;
    width: 100%;
    height: 623px;
    background:url("../images/app_member.png") bottom center no-repeat;
    transform: translateX(-50%);
}
#section .bottom .items .item{
    position: absolute;
    height: 52px;
    width: 400px;
}
#section .bottom .items .item::after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    clear: both;
}
#section .bottom .items .item:nth-child(odd){
    left:-400px;
    transition: left .8s ease-out 1s;
}
#section .bottom .items .item:nth-child(even){
    right:-400px;
    transition: right .8s ease-out 1s;
}
#section .bottom .items .item:nth-child(1),#section .bottom .items .item:nth-child(2){
    bottom:485px;
}
#section .bottom .items .item:nth-child(3),#section .bottom .items .item:nth-child(4){
    bottom:305px;
}
#section .bottom .items .item:nth-child(5),#section .bottom .items .item:nth-child(6){
    bottom:126px;
}
#section .bottom .items .item .item-icon{
    display: block;
    width: 52px;
    height: 100%;
    background-image: url("../images/icon.png");
}
#section .bottom .items .item p{
    width: 334px;
    height: 100%;
}
#section .bottom .items .item p span{
    display: block;
    width: 100%;
}
#section .bottom .items .item p .item-title{
    font-size:18px;
    font-weight:500;
    color:rgba(37,37,37,1);
}
#section .bottom .items .item p .item-font{
    margin-top: 6px;
    font-size:14px;
    font-weight:400;
    color:rgba(128,128,128,1);
}
#section .bottom .items .item:nth-child(even) .item-icon{
    float: left;
}
#section .bottom .items .item:nth-child(even) p{
    float: right;
}
#section .bottom .items .item:nth-child(odd) .item-icon{
    float: right;
}
#section .bottom .items .item:nth-child(odd) p{
    float: left;
}
#section .bottom .items .item:nth-child(odd) p span{
    text-align: right;
}
#footer{
    width: 100%;
    min-width: 1200px;
    height: 67px;
    background: url("../images/footer_bg.png") center/cover;
}
#footer p{
    line-height: 67px;
    text-align: center;
    color:#fff;
}
#footer p a{
    color:#6fffa0;
}