@import "keyframes.css";

body{
    overflow-x: hidden;
}
body,html{width:100%;background:#060c22;height:100%;font-family:"Microsoft Sans Serif";}
.main{width:100%;height:100%}
.fl{float:left}
.fr{float:right}
.hide{display:none;display: block\0;}

/*头部*/
.header{width:100%;min-width:1200px;height:60px;background-color:#fff}
.session{width:1200px;margin:0 auto;}
.header-logo{width:178px;margin-top:12px}
.header-phone{margin-left:20px;margin-top:13px}
.header-icon{width:32px;height:32px;border-radius:50%;border:1px solid #6a6a6a;text-align:center;line-height:32px}
.header-p{font-size:12px;line-height:15px;padding-top:2px;margin-left:8px}
.header-ul{margin-right:6%}
.header-ul li{float:left}
.header-ul li a{border-left:1px solid #e5e5e5;color:#333;font-size:14px;padding:0 15px;line-height:60px}
.header-ul li:first-child a{border-left:0}
.header-tit{width:140px;height:100%;line-height:60px;color:#fff;text-align:center;font-size:18px;background-color:#4285ff;margin-right:26px}
/*banner*/
.banner .banner1{width:100%;height:390px;}
.banner .banner1 .swiper-wrapper .banner-slide{width: 1200px;float: left;height: 390px;}
.banner-con{width:100%;height:100%;position:relative}
.banner1-font{width:75%;position:absolute;top:0;left:50%;margin-left:-37.5%;display:none;display: block\0;}
.banner1-bg{width:28%;position:absolute;top:10%;left:50%;margin-left:-14%;animation:5s rowup linear infinite normal}




.banner-con1{
    background-image: url("../images/index/banner2.jpg");
    position: relative;
}
.banner-con1 .banner2Btn{
    width: 229px;
    height: 34px;
    border: 1px solid #04ffea;
    text-align: center;
    position: absolute;
    line-height: 34px;
    border-radius: 40px;
    left: 482px;
    top:266px;
    z-index: 10;
}
.banner-con1 .banner2Btn span{
    color: #04ffea;
    font-size: 15px;
    z-index: 10;
}
.banner-con1 .banner2Text1{
    width: 754px;
    height: 132px;
    background-image: url("../images/index/banner2Text1.jpg");
    position: absolute;
    top:97px;
    left:225px;
    z-index: 10;
}
.banner-con1 .banner2Text2{
    width: 342px;
    height: 25px;
    background-image: url("../images/index/banner2Text2.jpg");
    position: absolute;
    top:185px;
    left:428px;
    z-index: 10;
}
.banner-con1 .banner2Text3{
    width: 275px;
    height: 20px;
    background-image: url("../images/index/banner2Text3.jpg");
    position: absolute;
    top:222px;
    left:460px;
    z-index: 10;
}
.banner-con1 .banner2_Div1_PR{
    width: 42px;
    height: 42px;
    background-image: url("../images/index/pr.jpg");
    position: absolute;
    top:59px;
    left: 177px;
    z-index: 5;
}
.banner-con1 .banner2_Div2_PS{
    width: 42px;
    height: 42px;
    background-image: url("../images/index/ps.jpg");
    position: absolute;
    top:175px;
    left: 1018px;
    z-index: 5;
}
.banner-con1 .banner2_Div3_UX{
    width: 42px;
    height: 42px;
    background-image: url("../images/index/ux.jpg");
    position: absolute;
    top:304px;
    left: 690px;
    z-index: 5;
}
.banner-con1 .banner2_Div4_UE{
    width: 42px;
    height: 42px;
    background-image: url("../images/index/ue.jpg");
    position: absolute;
    top:240px;
    left: 219px;
    z-index: 5;
}
.banner-con1 .banner2_Div5{
    width: 70px;
    height: 70px;
    background-image: url("../images/index/banner2_div5.jpg");
    position: absolute;
    top:139px;
    left: 105px;
    z-index: 5;
}
.banner-con1 .banner2_Div6{
    width: 48px;
    height: 48px;
    background-image: url("../images/index/banner2_div6.jpg");
    position: absolute;
    top:160px;
    left: 287px;
    z-index: 5;
}
.banner-con1 .banner2_Div7{
    width: 44px;
    height: 44px;
    background-image: url("../images/index/banner2_div7.jpg");
    position: absolute;
    top:52px;
    left: 565px;
    z-index: 5;
}
.banner-con1 .banner2_Div8{
    width: 56px;
    height: 56px;
    background-image: url("../images/index/banner2_div8.jpg");
    position: absolute;
    top:240px;
    left: 787px;
    z-index: 5;
}
.banner-con2{
    background-image: url("../images/index/banner3.jpg");
    position: relative;
}
.banner-con2 .banner3Text1{
    position: absolute;
    background-image: url("../images/index/banner3Text1.jpg");
    width: 243px;
    height: 23px;
    top:110px;
    left: 478px;
    z-index: 10;
}
.banner-con2 .banner3Text2{
    position: absolute;
    background-image: url("../images/index/banner3Text2.jpg");
    width: 528px;
    height: 46px;
    top:148px;
    left: 340px;
    z-index: 10;
}
.banner-con2 .banner3Text3{
    position: absolute;
    background-image: url("../images/index/banner3Text3.jpg");
    width: 437px;
    height: 20px;
    top:210px;
    left: 382px;
    z-index: 10;
}
.banner-con2 .banner3Btn{
    position: absolute;
    width: 122px;
    height: 28px;
    top:251px;
    left: 539px;
    background-color: #effe03;
    line-height: 28px;
    text-align: center;
    border-radius: 40px;z-index: 10;

}
.banner3Text3 span{
    font-size: 14px;
    color: #000;
    z-index: 10;
}
.banner3_Div1{
    position: absolute;
    background-image: url("../images/index/banner3_Div1.jpg");
    width: 58px;
    height: 39px;
    top:60px;
    left: 182px;
    z-index: 5;
}
.banner3_Div2{
    position: absolute;
    background-image: url("../images/index/banner3_Div2.jpg");
    width: 91px;
    height: 91px;
    top:111px;
    left: 273px;
    z-index: 5;
}
.banner3_Div3{
    position: absolute;
    background-image: url("../images/index/banner3_Div3.jpg");
    width: 41px;
    height: 41px;
    top:274px;
    left: 846px;
    z-index: 5;
}
.banner3_Div4{
    position: absolute;
    background-image: url("../images/index/banner3_Div4.jpg");
    width: 255px;
    height: 28px;
    top:60px;
    left: 886px;
    z-index: 5;
}
.banner3_Div5{
    position: absolute;
    background-image: url("../images/index/banner3_Div5.jpg");
    width: 199px;
    height: 41px;
    top:260px;
    left: 178px;
    z-index: 5;
}
.banner3_Div6{
    position: absolute;
    background-image: url("../images/index/banner3_Div6.jpg");
    width: 119px;
    height: 29px;
    top:149px;
    left: 98px;
    z-index: 5;
}
.banner3_Div7{
    position: absolute;
    background-image: url("../images/index/banner3_Div7.jpg");
    width: 161px;
    height: 41px;
    top:315px;
    left: 910px;
    z-index: 5;
}


.banner-con2{background-color:blueviolet}
.banner-animation{height:390px;width:900px;position:absolute;top:0;left:50%;margin-left:-450px;border-radius:50%;display:block;display: none\0}
.banner-animation .ball{color:#fff;font-size:28px;width:180px;font-weight:400;border-radius:50%;position:absolute}

/*7个圆,x和y轴动画加起来是36s , 36/12 约等于 3 每个球y轴 从0递减3,x轴与y差18/2s*/
.ball1{animation:animX1 18s cubic-bezier(.36,0,.64,1) -9s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) 0s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) 0s infinite alternate}
.ball2{animation:animX1 18s cubic-bezier(.36,0,.64,1) -12s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -3s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -3s infinite alternate}
.ball3{animation:animX1 18s cubic-bezier(.36,0,.64,1) -15s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -6s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -6s infinite alternate}
.ball4{animation:animX1 18s cubic-bezier(.36,0,.64,1) -18s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -9s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -9s infinite alternate}
.ball5{animation:animX1 18s cubic-bezier(.36,0,.64,1) -21s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -12s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -12s infinite alternate}
.ball6{animation:animX1 18s cubic-bezier(.36,0,.64,1) -24s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -15s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -15s infinite alternate}
.ball7{animation:animX1 18s cubic-bezier(.36,0,.64,1) -27s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -18s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -18s infinite alternate}
.ball8{animation:animX1 18s cubic-bezier(.36,0,.64,1) -30s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -21s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -21s infinite alternate}
.ball9{animation:animX1 18s cubic-bezier(.36,0,.64,1) -33s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -24s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -24s infinite alternate}
.ball10{animation:animX1 18s cubic-bezier(.36,0,.64,1) -36s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -27s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -27s infinite alternate}
.ball11{animation:animX1 18s cubic-bezier(.36,0,.64,1) -39s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -30s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -30s infinite alternate}
.ball12{animation:animX1 18s cubic-bezier(.36,0,.64,1) -42s infinite alternate,animY1 18s cubic-bezier(.36,0,.64,1) -33s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -33s infinite alternate}

/*第二波 40  40/12  3.33*/
.ball13{animation:animX2 20s cubic-bezier(.36,0,.64,1) -9s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) 0s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) 0s infinite alternate}
.ball14{animation:animX2 20s cubic-bezier(.36,0,.64,1) -12.33s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -3.33s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -3.33s infinite alternate}
.ball15{animation:animX2 20s cubic-bezier(.36,0,.64,1) -15.66s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -6.66s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -6.66s infinite alternate}
.ball16{animation:animX2 20s cubic-bezier(.36,0,.64,1) -18.99s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -9.99s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -9.99s infinite alternate}
.ball17{animation:animX2 20s cubic-bezier(.36,0,.64,1) -22.32s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -13.32s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -13.32s infinite alternate}
.ball18{animation:animX2 20s cubic-bezier(.36,0,.64,1) -25.65s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -16.65s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -16.65s infinite alternate}
.ball19{animation:animX2 20s cubic-bezier(.36,0,.64,1) -28.98s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -19.98s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -19.98s infinite alternate}
.ball20{animation:animX2 20s cubic-bezier(.36,0,.64,1) -32.31s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -23.31s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -23.31s infinite alternate}
.ball21{animation:animX2 20s cubic-bezier(.36,0,.64,1) -35.64s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -26.64s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -26.64s infinite alternate}
.ball22{animation:animX2 20s cubic-bezier(.36,0,.64,1) -38.97s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -28.97s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -28.97s infinite alternate}
.ball23{animation:animX2 20s cubic-bezier(.36,0,.64,1) -42.3s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -33.3s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -33.3s infinite alternate}
.ball24{animation:animX2 20s cubic-bezier(.36,0,.64,1) -45.6s infinite alternate,animY2 20s cubic-bezier(.36,0,.64,1) -36.6s infinite alternate,scale 40s cubic-bezier(.36,0,.64,1) -36.6s infinite alternate}

/*第三波  12个 36*/
.ball25{animation:animX3 18s cubic-bezier(.36,0,.64,1) -9s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) 0s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) 0s infinite alternate}
.ball26{animation:animX3 18s cubic-bezier(.36,0,.64,1) -12s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -3s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -3s infinite alternate}
.ball27{animation:animX3 18s cubic-bezier(.36,0,.64,1) -15s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -6s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -6s infinite alternate}
.ball28{animation:animX3 18s cubic-bezier(.36,0,.64,1) -18s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -9s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -9s infinite alternate}
.ball29{animation:animX3 18s cubic-bezier(.36,0,.64,1) -21s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -12s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -12s infinite alternate}
.ball30{animation:animX3 18s cubic-bezier(.36,0,.64,1) -24s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -15s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -15s infinite alternate}
.ball31{animation:animX3 18s cubic-bezier(.36,0,.64,1) -27s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -18s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -18s infinite alternate}
.ball32{animation:animX3 18s cubic-bezier(.36,0,.64,1) -30s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -21s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -21s infinite alternate}
.ball33{animation:animX3 18s cubic-bezier(.36,0,.64,1) -33s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -24s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -24s infinite alternate}
.ball34{animation:animX3 18s cubic-bezier(.36,0,.64,1) -36s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -27s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -27s infinite alternate}
.ball35{animation:animX3 18s cubic-bezier(.36,0,.64,1) -39s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -30s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -30s infinite alternate}
.ball36{animation:animX3 18s cubic-bezier(.36,0,.64,1) -42s infinite alternate,animY3 18s cubic-bezier(.36,0,.64,1) -33s infinite alternate,scale 36s cubic-bezier(.36,0,.64,1) -33s infinite alternate}

/*第四波 30s 5个 6s  15/2 */
.ball37{animation:animX4 15s cubic-bezier(.36,0,.64,1) -7.5s infinite alternate,animY3 15s cubic-bezier(.36,0,.64,1) 0s infinite alternate,scale 30s cubic-bezier(.36,0,.64,1) 0s infinite alternate}
.ball38{animation:animX4 15s cubic-bezier(.36,0,.64,1) -13.5s infinite alternate,animY3 15s cubic-bezier(.36,0,.64,1) -6s infinite alternate,scale 30s cubic-bezier(.36,0,.64,1) -6s infinite alternate}
.ball39{animation:animX4 15s cubic-bezier(.36,0,.64,1) -19.5s infinite alternate,animY3 15s cubic-bezier(.36,0,.64,1) -12s infinite alternate,scale 30s cubic-bezier(.36,0,.64,1) -12s infinite alternate}
.ball40{animation:animX4 15s cubic-bezier(.36,0,.64,1) -25.5s infinite alternate,animY3 15s cubic-bezier(.36,0,.64,1) -18s infinite alternate,scale 30s cubic-bezier(.36,0,.64,1) -18s infinite alternate}
.ball41{animation:animX4 15s cubic-bezier(.36,0,.64,1) -31.5s infinite alternate,animY3 15s cubic-bezier(.36,0,.64,1) -24s infinite alternate,scale 30s cubic-bezier(.36,0,.64,1) -24s infinite alternate}

/*uek*/
.uek{position: relative;}
/*流星*/
.meteor{width:1200px;margin:0 auto;position:absolute;left:50%;top:0;margin-left:-600px;height:1250px;}
.meteor-1{position:absolute;left:-22px;top:68px;animation:1s planetAni linear infinite normal}
.meteor-3{position:absolute;top:68px;left:148px;animation:2s starAni linear infinite normal}
.meteor-4{position:absolute;top:281px;left:-22px;animation:1s starAni4 linear infinite normal}
.meteor-5{position:absolute;top:600px;left:-22px;animation:3s starAni5 linear infinite normal}
.meteor-6{position:absolute;top:765px;left:-22px;animation:2s planetAni 1s linear infinite normal}
.meteor-7{position:absolute;top:990px;left:-22px;animation:3s starAni7 linear infinite normal}
.meteor-8{position:absolute;top:1189px;left:-22px;animation:2s planetAni linear infinite normal}
.meteor-9{position:absolute;top:768px;left:165px;animation:2s starAni9 2s linear infinite normal}
.meteor-10{position:absolute;top:507px;left:361px;animation:3s starAni10 linear infinite normal}
.meteor-11{position:absolute;top:880px;left:400px;animation:3s starAni11 2s linear infinite normal}
.meteor-12{position:absolute;top:1067px;left:391px;animation:2s planetAni 1s linear infinite normal}
.meteor-13{position:absolute;top:488px;left:741px;animation:4s starAni13 linear infinite normal}
.meteor-star{position:absolute;top:793px;left:741px;animation:3s star linear infinite normal}
.meteor-14{position:absolute;top:1061px;left:771px;animation:2s planetAni 2s linear infinite normal}
.meteor-15{position:absolute;top:40px;right:140px;animation:2s planetAni 1s linear infinite normal}
.meteor-16{position:absolute;top:350px;right:140px;animation:2s planetAni linear infinite normal}
.meteor-17{position:absolute;top:740px;right:140px;animation:2s planetAni 2s linear infinite normal}
.meteor-18{position:absolute;top:1067px;right:70px;animation:10s starAni18 linear infinite normal}
.meteor-19{position:absolute;top:0;right:-100px;animation:3s starAni19 linear infinite normal}
.meteor-20{position:absolute;top:698px;right:-100px;animation:2s starAni20 linear infinite normal}

/*流星 END*/
.uek h2{text-align:center;color:#fff;font-size:30px;line-height:80px}
.uek h2 span{color:#3afdff;font-weight: 900}
.mechanism{width:720px;height:426px;margin:0 auto}
.mechanism-left{width:240px;float:left}
.mechanism-title{width:100%;height:60px;background-color:#151c3d;color:#fffefe;text-align:center;line-height:60px;font-size:18px}
.mechanism-ul{width:100%}
.mechanism-ul li{width:100%;height:60px;background-color:#232946;border-bottom:1px solid #444962}
.mechanism-ul li .fl{line-height:60px;margin-left:36px}
.mechanism-ul li span{color:#fff;line-height:60px;margin-left:20px;font-size:14px}
.mechanism-ul li .iconxingxing1{color:#2dcba0}
.mechanism-ul li .iconxingxing{color:#ff6c32}
.mechanism-ul1 li span{margin-left:30px;width:45px;text-align:center}
.mechanism-ul1 li div.fl{margin-left:20px}
.mechanism-center{width:240px;float:left;height:100%;background-color:#3952ea}
.mechanism-logo{width:100%;height:60px;background:linear-gradient(to right,#2aa8dd,#4f32ff);text-align:center}
.mechanism-logo img{margin-top:11px}
.mechanism-center-ul li{width:100%;height:60px;border-bottom:1px solid #576ced;text-align:center}
.mechanism-center-ul li span{display:block;width:100%;text-align:center;color:#fff;line-height:33px;font-size:14px}
.mechanism-center-ul li:last-child span{line-height:60px}
.mechanism-center-ul li i{color:#ffd632}
.mechanism-btn{width:210px;height:44px;border:1px solid #1c2236;margin:60px auto 40px auto;border-radius:40px;padding:4px;cursor:pointer;position: relative}
.mechanism-btn-con{
    background:linear-gradient(90deg, #FC903F, rgb(218, 39, 19));
    background-size: 150% 100%;
    background-position: 0 0;
    animation:btnBgAni 1s linear alternate infinite;
    height:100%;border-radius:40px;text-align:center;line-height:44px;color:#fff;font-size:20px;text-shadow:0 2px 1px #e63220}
.designer{width:100%}
.designer-ul{margin-top:20px;padding:0 120px;overflow:hidden}
.designer-ul li{width:33.3333%;float:left;position: relative}
.designer-ul li p{text-align:center;color:#fff;font-size:12px;line-height:18px;}
.li-top{width:192px;height:190px;background: url(../images/index/big_yuan.jpg) no-repeat; margin:0 auto 18px auto;text-align:center;transition:transform 2s ease;transform-style:preserve-3d;}
.li-top img{
    width:172px;
    height:170px;
    position: absolute;
    left: 10px;
    top: 10px;
}
.li-top h3{color:#3afdff;font-size:42px;text-shadow:3px 0 0 #f74635;margin:0px 0 22px 0}
.li-top {background: url(../images/index/big_yuan.jpg) no-repeat}
.li-top span{color:#fff;font-size:20px}
.li-top .hr{width:44px;height:2px;background:#f48448;position: relative;margin: 10px auto;overflow: hidden}
.li-top .hr .xian{
    position: absolute;
    left: 0;
    top: 0;
    width:5px;height:2px;
    background: #fff;
}
/*高薪*/
.salary{overflow:hidden}
.salary-ul{width:100%;overflow:hidden}
.salary-ul li{width:20%;float:left;text-align:center}
.salary-ul li .li-img{width:135px;height:135px;overflow:hidden;margin:0 auto;border-radius:50%}
.salary-ul li .li-img img{height: 100%;margin-left: -25px;}
.salary-ul li span{font-size:20px;color:#fff;line-height:37px}
.salary-ul li p{color:#fff;font-size:14px;line-height:22px}
.salary-ul li .li-salary{width:150px;height:40px;margin:11px auto 0 auto;background:url(../images/index/salary.jpg) no-repeat;background-size:cover;font-size:18px;color:#3afdff;text-align:center;line-height:40px}
.img-ul{width:100%;overflow:hidden;margin-top:40px}
.img-ul li{width:18.4%;float:left;margin-right:2%}
.img-ul li:last-child{margin-right:0}
.img-ul li .class-img{width:100%;position:relative;overflow:hidden}
.img-ul li .class-img img{width:100%;transition:transform 2s}
.img-ul li .class-img:hover img{transform:scale(1.2)}
.img-ul li .class-info{position:absolute;left:0;bottom:0;width:100%;height:32px;background:rgba(23,22,39,.9);text-align:center;color:#fff;line-height:32px}
.class-bom{width:100%;height:60px;background-color:#32418c;text-align:center;color:#fff}
.class-bom p{font-size:18px;color:#fff;font-weight:700}
.class-bom p:first-child{font-size:14px;font-weight:400;line-height:29px}
.class-name{width:133px;height:36px;background-color:#4285ff;color:#fff;text-align:center;position:absolute;transform:rotate(-45deg);top:11px;left:-36px}

/*折线图*/
/*月薪开始*/
.wj-monthly {
    position: relative;
}
.wj-monthly h2 {
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 80px;
    margin-bottom: 60px;
}

.wj-monthly h2 span {
    color: #3afdff;
    font-weight: 900;
}
.beijingbox{
    width: 100%;
    height: 489px;
}
.beijingbox .yuexin{
    width: 150px;
    height: 100%;
    margin-left: 50px;
    float: left;
}
.beijingbox .yuexin li{
    font-size: 20px;
    color: #ffffff;
    margin-top: 60px;
    text-align: center;
}
.beijingbox .yuexin li.one{
    margin-top: 0;
}
.beijingbox .yuexin li.two{
    margin-top: 20px;
}
.beijingbox .beijing{
    width: 920px;
    height: 100%;
    float: left;
    background: url("../images/VR/wj_line.jpg") no-repeat 100% 90%;
    background-size: cover;
    position: relative;
    font-size: 24px;
    font-weight: 700;
}
.beijingbox .beijing .line{
    border-left: 10px solid #3affd3;
    border-top: 10px solid #3affd3;
    position: absolute;
    bottom: 0;
    left: 45px;
    display: none;
}
.beijingbox .beijing .line2{
    border-left: 10px solid #3affd3;
    border-top: 10px solid #3affd3;
    position: absolute;
    bottom: 45px;
    left: 250px;
    display: none;
}
.beijingbox .beijing .line3{
    border-left: 10px solid #3affd3;
    border-top: 10px solid #3affd3;
    position: absolute;
    bottom: 119px;
    left: 453px;
    display: none;
}
.beijingbox .beijing .line4{
    border-left: 10px solid #3affd3;
    border-top: 10px solid #3affd3;
    position: absolute;
    bottom: 193px;
    left: 656px;
    display: none;
}
.beijingbox .beijing .line5{
    border-left: 10px solid #3affd3;
    border-top: 10px solid #3affd3;
    position: absolute;
    bottom: 267px;
    left: 859px;
    display: none;
}
.beijingbox .beijing .liuqian{
    position: absolute;
    bottom: 74px;
    left: 45px;
    display: none;
}
.beijingbox .beijing ul .left-line{
    width: 1px;
    height: 150px;
    background: #3affd3;
    opacity: 0.51;
    position: absolute;
    bottom: -25px;
    left:5px;
}
.beijingbox .beijing ul h3{
    margin-bottom: 29px;
    color:  #3affd3;
    margin-left: 20px;
}
.beijingbox .beijing ul li{
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    margin-left: 20px;
}
.beijingbox .beijing .baqian{
    position: absolute;
    bottom: 145px;
    left: 250px;
    display: none;
}
.beijingbox .beijing .yiwaner{
    position: absolute;
    bottom: 219px;
    left: 453px;
    display: none;
}
.beijingbox .beijing .yiwanba{
    position: absolute;
    bottom: 293px;
    left: 656px;
    display: none;
}
.beijingbox .beijing .sanwan{
    position: absolute;
    bottom: 437px;
    left: 859px;
    display: none;
}
.beijingbox .beijing .common{
    width: 20px;
    height: 20px;
}
.beijingbox .beijing .yuandian1{
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: none;
}
.beijingbox .beijing .yuandian2{
    position: absolute;
    bottom: 114px;
    left: 245px;
    display: none;
}
.beijingbox .beijing .yuandian3{
    position: absolute;
    bottom: 188px;
    left: 448px;
    display: none;
}
.beijingbox .beijing .yuandian4{
    position: absolute;
    bottom: 262px;
    left: 651px;
    display: none;
}
.beijingbox .beijing .yuandian5{
    position: absolute;
    bottom: 432px;
    left: 854px;
    display: none;
}
.beijingbox .beijing .bj1{
    width: 0;
    height: 45px;
    position: absolute;
    bottom: 0px;
    left: 45px;
    display: none;
}
.beijingbox .beijing .bj2{
    width: 0;
    height: 119px;
    position: absolute;
    bottom: 0px;
    left: 249px;
    display: none;
}
.beijingbox .beijing .bj3{
    width: 0;
    height: 193px;
    position: absolute;
    bottom: 0px;
    left: 454px;
    display: none;
}
.beijingbox .beijing .bj4{
    width: 0;
    height: 268px;
    position: absolute;
    bottom: 0px;
    left: 659px;
    display: none;
}

.yuexin-name{
    margin-top: 40px;
    margin-left: 80px;
    width: 100%;
    height: 100px;
    font-size: 20px;
    color: #fff;
}
.yuexin-name li{
    margin-right: 80px;
    float: left;
}
.yuexin-name .one{
    margin-left: 120px;
}

/*课程迭代*/
.wj-border{width:95%;height:750px;margin:0 auto;position:relative;margin-bottom:70px;background-image:url(../images/index/wj_border.jpg);background-position:center;background-repeat:no-repeat;background-size:100% 100%}
.wj-border .wj-box{width:1200px;height:825px; margin-left:-35px;position:relative}
.btnCommon{width:78px;height:113px;position:absolute;right:0;z-index:100;background-color:#060c22;color:rgba(255,255,255,.6);text-align:center;line-height:113px;user-select:none;cursor: pointer}
.btnCommon i{font-size:34px}
.wj-leftBtn{top:126px}
.wj-rightBtn{top:239px}
.wj-border .wj-box .common{opacity:.6;color:#fff;font-size:30px}
.wj-border .wj-box .leftBtn{width:78px;height:110px;background:#060c22;position:absolute;top:138px;right:0;opacity:.6;text-align:center;line-height:110px;z-index:20}
.wj-border .wj-box .rightBtn{width:78px;height:110px;background:#060c22;position:absolute;top:248px;right:0;opacity:.6;text-align:center;line-height:110px;z-index:20}
.wj-border .wj-box .big-box .hezi{width:1200px;float:left}
.wj-border .wj-box .wj-top{width:100%;height:87px;position:relative}
.wj-border .wj-box .wj-top div{float:left;color:#fff;font-size:30px;line-height:87px}
.wj-border .wj-box .wj-top .title{font-size:24px;margin-left:18px}
.wj-border .wj-box .wj-top .line{width:86px;height:1px;background-color:#ff4c32;position:absolute;top:43.5px;left:70px;z-index:-1}
.wj-border .wj-box .wj-top .title-name{margin-left:60px}
.wj-border .wj-box .wj-bottom{width:100%;height:650px;background:#15193e;position:relative}
.wj-border .wj-box .wj-bottom .top{width:100%;height:280px}
.wj-border .wj-box .wj-bottom .top .left{width:50%;height:100%;float:left}
.wj-border .wj-box .wj-bottom .top .left .yi{width:50%;height:100%;float:left}
.wj-border .wj-box .wj-bottom .top .left .yi .tu-box{height:100%;width:35%;float:left}
.wj-border .wj-box .wj-bottom .top .left .yi .tu-box img{width:46px;height:46px;margin:40px 10px 0 30px}
.wj-border .wj-box .wj-bottom .top .left .yi .count{width:180px;float:left;margin-top:30px;font-size:14px;color:#fff}
.wj-border .wj-box .wj-bottom .top .left .yi .count div{margin-top:10px}
.wj-border .wj-box .wj-bottom .top .right{width:50%;height:100%;float:left}
.wj-border .wj-box .wj-bottom .top .right .two{width:480px;height:93px}
.wj-border .wj-box .wj-bottom .top .right .two .title{font-size:20px;color:#fff;margin-top:40px}
.wj-border .wj-box .wj-bottom .top .right .two .content{font-size:14px;color:#fff;opacity:.8;margin-top:10px;line-height:25px}
.wj-border .wj-box .wj-bottom .top .right .er .title{margin-top:40px}
.wj-border .wj-box .wj-bottom .top .right .er .content .jineng{
    width:100%;line-height:25px;font-size:14px;
}
.wj-border .wj-box .wj-bottom .bottom{width:100%;height:180px;margin-top:40px}
.wj-border .wj-box .wj-bottom .bottom ul{width:100%;height:150px}
.wj-border .wj-box .wj-bottom .bottom ul li{width:30%;height:100%}
.wj-border .wj-box .wj-bottom .bottom ul .picture1{background:url(../images/index/wj_picture1.jpg) no-repeat;background-size: cover }
.wj-border .wj-box .wj-bottom .bottom ul .picture2{background:url(../images/index/wj_picture2.jpg) no-repeat;background-size: cover }
.wj-border .wj-box .wj-bottom .bottom ul .picture3{background:url(../images/index/wj_picture3.jpg) no-repeat;background-size: cover }
.wj-border .wj-box .wj-bottom .bottom ul .picture4{background:url(../images/index/wj_picture4.jpg) no-repeat;background-size: cover }
.wj-border .wj-box .wj-bottom .bottom ul .picture5{background:url(../images/index/wj_picture5.jpg) no-repeat;background-size: cover }
.wj-border .wj-box .wj-bottom .bottom ul .picture6{background:url(../images/index/wj_picture6.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture7{background:url(../images/index/wj_picture7.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture8{background:url(../images/index/wj_picture8.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture9{background:url(../images/index/wj_picture9.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture10{background:url(../images/index/wj_picture10.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture11{background:url(../images/index/wj_picture11.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture12{background:url(../images/index/wj_picture12.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture13{background:url(../images/index/wj_picture13.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture14{background:url(../images/index/wj_picture14.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture15{background:url(../images/index/wj_picture15.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture16{background:url(../images/index/wj_picture16.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture17{background:url(../images/index/wj_picture17.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture18{background:url(../images/index/wj_picture18.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture19{background:url(../images/index/wj_picture19.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture20{background:url(../images/index/wj_picture20.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture21{background:url(../images/index/wj_picture21.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture22{background:url(../images/index/wj_picture22.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture23{background:url(../images/index/wj_picture23.jpg) no-repeat;background-size: cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture24{background:url(../images/index/wj_picture24.jpg) no-repeat;background-size: cover}

.wj-border .wj-box .wj-bottom .bottom ul{width:90%;height:100%;margin:0 auto}
.wj-border .wj-box .wj-bottom .bottom ul li{width:30%;height:100%;float:left;margin-right:15px}
.wj-border .wj-box .wj-bottom .bottom ul .picture1{margin-left:30px;background:url(../images/index/wj_picture1.jpg) no-repeat 30% 100%/cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture2{background:url(../images/index/wj_picture2.jpg) no-repeat 30% 100%/cover}
.wj-border .wj-box .wj-bottom .bottom ul .picture3{margin-right:0;background:url(../images/index/wj_picture3.jpg) no-repeat 30% 100%/cover}

/* 设计师展示开始*/
.jd-designer{width:100%;margin-bottom:100px}
.jd-designer h2{text-align:center;color:#fff;font-size:30px;line-height:116px}
.jd-designer h2 span{color:#3afdff;font-weight: 900}
.jd-linebox{width:750px;position:relative;margin:0 auto}
.jd-linebox .jd-line{width:750px;height:1px;background:#3afdff;position:absolute;top:20px}
.jd-options{overflow:hidden;margin-left:45px;position:absolute;z-index:999}
.jd-options li{background-image:url(../images/index/workShowBtn.jpg);background-repeat:no-repeat;color:#fff;font-size:16px;text-align:center;line-height:40px;float:left;width:140px;cursor:pointer;margin-right:30px;background-color:#060c22;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.jd-options li:after{margin-right:0}
.jd-options li.jd-active{background-color:#32418c;border-radius:30px;background-image:none}
.jd-options>span{display:block;float:left;margin-top:20px;height:1px;width:30px;background-color:#3afdff}
.jd-options>span:first-child{width:45px}
.jd-options>span:last-child{width:45px}
.jd-cardsbox{width:100%;margin-top:60px;}
.jd-cards{width:90%;margin:0 auto;}
.jd-cards>li{display:none}
.jd-cards>li.jd-active{display:block}
.jd-secondoptions li{overflow:hidden;display:none}
.jd-secondoptions li.jd-active{display:block}
.jd-card1{height: 348px}
.jd-card2{height: 324px}
.jd-card3{height: 396px}
/*.jd-card4{height: 580px}*/
.jd-left{float:left}
.jd-left img{display:block;width:86px;height:86px;border-radius:50%}
.jd-name{font-size:20px;color:#fff;font-weight:600;margin:20px 0 24px 0}
.jd-description{width:351px;color:#fff;font-size:14px;line-height:24px}
.jd-right{width:300px;float:right;background:#ccc;margin-top:30px}
.jd-secondoptions li .jd-right:last-child{margin-right:27px}
.jd-right img{display:block;width:300px;height:193px}
.jd-secondcard{margin:38px auto 0;overflow:hidden;width:900px}
.jd-secondcard li{width:90px;height:90px;border-radius:50%;float:left;margin-right:72px;cursor:pointer}
.jd-secondcard li.jd-active{background:#f34b31}
.jd-secondcard li:last-child{width:86px;height:86px;margin-right:0;background-image:url(../images/index/designer_more.jpg);background-size:100% 100%;font-size:20px;line-height:86px;text-align:center}
.jd-secondcard li:last-child a{color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.jd-secondcard li img{display:block;width:86px;height:86px;margin:2px auto 0;border-radius: 50%}
/*田*/
.ty-stage{margin-bottom:70px}
.ty-stageTitle{color:#fff;font-size:30px;overflow:hidden;text-align:center}
.ty-stageTitle span i{font-weight:700;color:#39fdfb;font-style:normal}
.ty-stageTitle span:first-child{margin-right:16px}
.ty-stage .ty-stageBannerBack{margin:40px auto 0;width:92.6%;height:100px;background:-webkit-linear-gradient(left top,#56bf7d,#ff4133),-webkit-linear-gradient(right top,#d46248,#b97252)}
.ty-workSowTitile{color:#fff;font-size:30px;overflow:hidden;text-align:center}
.ty-workSowTitile span i{font-weight:700;color:#39fdfb;font-style:normal}
.ty-workSowTitile span:first-child{margin-right:16px}
.ty-workSowBtn{width:910px;margin:40px auto;overflow:hidden}
.ty-workSowBtn>li{background-image:url(../images/index/workShowBtn.jpg);width:140px;height:40px;background-size:100% 100%;float:left;color:#fff;line-height:40px;text-align:center}
.ty-workSowBtn>li.pitchOn{background-color:#31418c;border-radius:40px;background-image:none}
.ty-workSowBtn>span{display:block;float:left;margin-top:20px;height:1px;width:30px;background-color:#3afdff}
.ty-workSowBtn>span:first-child{width:45px}
.ty-workSowBtn>span:last-child{width:45px}
.ty-workSowBanner{width:89.4%;margin:0 auto 60px;}
.ty-workSowBannerAll{width:5365px;overflow:hidden}
.ty-workSowBannerAll ul{float:left;width:1073px;height:416px}
.ty-workSowBanner ul{width:100%;overflow: hidden; display: none;}
.ty-workSowBanner ul:first-child{
    display: block;
}
.ty-workSowBanner ul li{float:left;width:340px;height:193px}
.ty-workSowBannerRight{margin-right:26px}
.ty-workSowBannerBottom{margin-bottom:30px}
.ty-workSowBanner ul li img{width:100%;height:100%}

.jd-service h2 {
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 40px;
}
.jd-service h2 span {
    color: #3afdff
}
.ty-earningEnvironment{width:100%}
.ty-earningEnvironmentTitle{text-align:center;color:#fff;font-size:30px;overflow:hidden}
.ty-earningEnvironmentTitle span i{font-weight:700;color:#39fdfb;font-style:normal}
.ty-earningEnvironmentTitle span:first-child{margin-right:16px}
.ty-earningEnvironmentShow{width:89.4%;margin:60px auto;overflow:hidden}
.ty-earningEnvironmentShow li{width:339px;height:193px;float:left;overflow:hidden}
.ty-earningEnvironmentShow li:hover img{transform:scale(1.1)}
.ty-earningEnvironmentShow li img{width:100%;height:100%;transition:all 1s}
.ty-earningEnvironmentShow .liLeft{margin-left:27.9px}
.ty-earningEnvironmentShow .liBottom{margin-bottom:30px}
.ty-earningEnvironmentBtn{width:210px;height:44px;border:1px solid #1b2137;border-radius:30px;margin:0 auto;padding:4px}
.ty-earningEnvironmentBtn div{border-radius:30px;margin:0 auto;width:210px;height:45px;background:-webkit-linear-gradient(left,#ff9132,#ff4b32);font-size:20px;color:#fff;line-height:45px;text-align:center}
/*END*/
/*光*/
.guang{
    position: relative;
    overflow: hidden;
}
.guang .line{
    position: absolute;
    left: -25px;
    top: 0;
    transform: rotate(20deg);
    width: 10px;
    height: 44px;
    background: #fff;
    opacity: 0.5;
}
/*点点*/
.dian1{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 20px;
    left: 20px;
}
.dian2{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 20px;
    right: 20px;
}
.dian{
    opacity: 0.1;
}