@charset "utf-8";

/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;font-family:"微软雅黑";font-size:14px;}

table { border-collapse:collapse; border-spacing:0; margin:0; padding:0;}

textarea{resize:none;}

fieldset, img { border:0; }

img{ vertical-align:top;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ol, ul { list-style:none; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

abbr, acronym { border:0; }

em,i{font-style: normal;}

.clear{zoom:1;}

.clear:after{ content:""; display:block; clear:both;}

a{ text-decoration:none; cursor:pointer;}

a:hover{ text-decoration:none; cursor:pointer; }

a:focus { outline-style:none;}
.base{
    width:1200px;
    margin:0 auto;
}
/*banner*/
.banner{
    height:555px;
    background: url(../img/bj_learn/banner_bg.jpg) no-repeat center top;
    text-align: center;
}
.banner img{
    margin:0 0 20px -15px;
}
.banner a{
    display: inline-block;
    width:161px;
    height:47px;
    line-height: 47px;
    background:#fff url(../img/bj_learn/banner_img2.jpg) no-repeat 144px 12px;
    color:#4600c5;
    font-size: 24px;
    padding-left:35px;
    text-align: left;
    margin:0 25px;
}
.banner a:nth-child(3){
    background:#fff url(../img/bj_learn/banner_img3.jpg) no-repeat 144px 12px;
}

/*contain1 视频教程*/
.contain1{
    padding: 70px 0 0;
    background: #f6f6f6;
}

.biaoti{
    font-size: 44px;
    color:#514f50;
    text-align: center;
}
.fubiaoti{
    font-size: 20px;
    color:#8e8d8e;
    text-align: center;
    width:355px;
    height:40px;
    line-height: 40px;
    margin:0 auto 80px;
    background:url(../img/bj_learn/fubiaoti_bg.png) no-repeat center;
    font-style: italic;
}

.con1_list{
    width:1200px;
    height:400px;
    position: relative;
    margin-bottom: 50px;
}
.con1_list li{
    width:170px;
    height:170px;
    position: absolute;
    transition:.5s;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
}

.con1_list li div:nth-child(1){
    width:100%;
    height:100%;
    position: relative;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}
.con1_list li:nth-child(1) div:nth-child(1):before,.con1_list li:nth-child(2) div:nth-child(1):before,.con1_list li:nth-child(3) div:nth-child(1):before,.con1_list li:nth-child(4) div:nth-child(1):before,.con1_list li:nth-child(5) div:nth-child(1):before{
    content: "";
    position: absolute;
    display: block;
    width:170px;
    height:170px;
    top:-6px;
    left:4px;
}
.con1_list li:nth-child(6) div:nth-child(1):before,.con1_list li:nth-child(7) div:nth-child(1):before,.con1_list li:nth-child(8) div:nth-child(1):before,.con1_list li:nth-child(9) div:nth-child(1):before{
    content: "";
    position: absolute;
    display: block;
    width:170px;
    height:170px;
    top:4px;
    left:-6px;
}

.con1_list li div:nth-child(1) p{
    margin:0 auto;
    width:100%;
    height:100%;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.con1_list li div:nth-child(1) p img{
    display: block;
    margin:0 auto 10px;
}
.con1_list li div:nth-child(1) span{
    display: block;
    text-align: center;
    font-size: 24px;
    color:#fff;
}
.con1_list li:nth-child(1){
    top:45px;
    left:35px;
}
.con1_list li:nth-child(2){
    top:45px;
    left:275px;
}
.con1_list li:nth-child(3){
    top:45px;
    left:50%;
    margin-left: -85px;
}
.con1_list li:nth-child(4){
    top:45px;
    right:275px;
}
.con1_list li:nth-child(5){
    top:45px;
    right:35px;
}
.con1_list li:nth-child(6){
    bottom:60px;
    left:155px;
}
.con1_list li:nth-child(7){
    bottom:60px;
    left:395px;
}
.con1_list li:nth-child(8){
    bottom:60px;
    left:635px;
}
.con1_list li:nth-child(9){
    bottom:60px;
    left:875px;
}

.con1_list li:nth-child(1) div{
    background:#f2612b ;
}
.con1_list li:nth-child(1) div:nth-child(1):before{
    border:1px solid #f2612b;
}
.con1_list li:nth-child(2) div{
    background:#f3285f ;
}
.con1_list li:nth-child(2) div:nth-child(1):before{
    border:1px solid #f3285f;
}
.con1_list li:nth-child(3) div{
    background:#ac11a3 ;
}
.con1_list li:nth-child(3) div:nth-child(1):before{
    border:1px solid #ac11a3;
}
.con1_list li:nth-child(4) div{
    background:#229ea1 ;
}
.con1_list li:nth-child(4) div:nth-child(1):before{
    border:1px solid #229ea1;
}
.con1_list li:nth-child(5) div{
    background:#4ba381 ;
}
.con1_list li:nth-child(5) div:nth-child(1):before{
    border:1px solid #4ba381;
}
.con1_list li:nth-child(6) div{
    background:#1880d7 ;
}
.con1_list li:nth-child(6) div:nth-child(1):before{
    border:1px solid #1880d7;
}
.con1_list li:nth-child(7) div{
    background:#eab117 ;
}
.con1_list li:nth-child(7) div:nth-child(1):before{
    border:1px solid #eab117;
}
.con1_list li:nth-child(8) div{
    background:#59a930 ;
}
.con1_list li:nth-child(8) div:nth-child(1):before{
    border:1px solid #59a930;
}
.con1_list li:nth-child(9) div{
    background:#e28748 ;
}
.con1_list li:nth-child(9) div:nth-child(1):before{
    border:1px solid #e28748;
}

.con1_list li div:nth-child(2){
    width:100%;
    height:100%;
    display: table;
}
.con1_list li div:nth-child(2) p{
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    text-align: center;
    color:#fff;
    padding:0 15px;
}
.con1_list li:hover div:nth-child(1){
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    display: none;
}
.con1_list li:hover{
    z-index: 10;
}
.con1_list li:hover div:nth-child(2) {
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    display: table;
}
.con1_list li div:nth-child(2){
    display: none;
}

.con1_bottom{
    height:365px;
    background: url(../img/bj_learn/con1_bottom_bg.png) no-repeat center top;
}
.con1_left{
    float: left;
    width:750px;
    height:160px;
    padding-top: 155px;
    margin-left: 50px;
}
.con1_right{
    float: right;
    margin-right: 47px;
    width:288px;
    padding-top: 11px;
}
.con1_right span{
    display: block;
    padding-top:15px;
    font-size: 20px;
    color:#fff;
    text-align: center;
}
.con1_left p:nth-child(1){
    font-size: 20px;
    text-align: left;
    color: #fff;
    margin-bottom: 30px;
}
.con1_left p:nth-child(1) span{
    color:#f63c3d;
    margin-left:15px;
}
.con1_left p:nth-child(2){
    font-size: 22px;
    color:#fff;
    margin-bottom: 25px;
}
.con1_left p:nth-child(3){
    height:38px;
    background: #f63c3d;
    font-size: 20px;
    color:#fff;
    line-height: 32px;
}
.con1_left p:nth-child(3) span{
    margin-right:50px;
}
.con1_left p:nth-child(3) i{
    font-size: 24px;
    color:#fefb44;
}
/*contain2*/
.contain2{
    padding:70px 0;
    background: #f6f6f6;
}
.con2_list{
    overflow: hidden;
}
.con2_list li{
    float:left;
    margin:0 15px 15px 0;
    width:388px;
    height:348px;
    border:1px solid #b2b2b2;
    border-radius:10px;
}
.con2_list li:nth-child(3n){
    margin-right: 0px;
}
.con2_list li h4{
    font-size: 20px;
    color:#3b80db;
    height:57px;
    line-height: 65px;
    padding-left:34px;
    position: relative;
    border-bottom:1px solid #b2b2b2;
    margin-bottom: 17px;
}
.con2_list li h4:before{
    content: "";
    display: block;
    position: absolute;
    width:4px;
    height:19px;
    background: #e0e0e0;
    left:20px;
    top:22px;
}
.con2_list li h4 a{
    float: right;
    font-size: 15px;
    width:54px;
    height:22px;
    color: #fff;
    margin:20px 12px 0 0;
    background: #ff7403;
    line-height: 22px;
    text-align: center;
}
.con2_list li img{
    display: block;
    margin:0 auto 20px;
}
.con2_list li p{
    width:330px;
    margin:0 auto 15px;
    font-size: 14px;
    color:#5c5c5c;
    text-align: left;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}
.con2_list li p a{
    color:#5c5c5c;
}
.con2_list li p a:hover{
    color:#ff7403;
}
/*contain3*/
.contain3{
    padding:25px 0 35px;
    background: url(../img/bj_learn/contain3_bg.jpg) no-repeat center top;
}
.contain3 .biaoti{
    color:#fff;
    margin-bottom: 25px;
}
.con3_wrap{
    overflow: hidden;
    padding-left: 100px;
}
.con3_wrap p{
    float: left;
    height:24px;
    line-height: 24px;
    width:400px;
    margin-right: 200px;
    font-size: 14px;
    color:#fff;
    text-align: left;
    margin-bottom: 15px;
}
.con3_wrap p span{
    display: inline-block;
}
.con3_wrap p span:nth-child(1){
    width:170px;
}
.con3_wrap p span:nth-child(2){
    width:100px;
}
.con3_wrap p a{
    display: inline-block;
    text-align: center;
    width:112px;
    height:24px;
    background: #352c2f;
    color:#fff;
}
.con3_wrap p:nth-child(2n){
    margin-right: 0px;
}
.con3_wrap p:nth-child(2n) a{
    background:#f63c3d;
}