#stars{
    position: absolute;
    top:0;
    left: 0;
}


#wave{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    z-index: 10000;
}


.box{
    float: left;
    width:100%;
    position: relative;
}

.box{
    padding-top: 100px;
    background-color: #041527;
}

.box .box-head{

    height: 71px;
    background: url("../img/web_course/title.png") center center no-repeat;
    background-size: contain;
}

.box .box-head h1{
    font-size: 46px;
    color: #07c9ef;
    line-height: 71px;
    text-align: center;
    font-weight: bold;
}
.box .box-head h1 span{
    color: #00ffb9;
}

.box .box-content{
    margin-top: 50px;

}

/*为什么选择前端*/
.box1 .box-content .item{float: left; position:relative;top:0px;transition: top 0.5s;width: 268px;  }
.box1 .box-content .item:hover{top: -20px;}
.box1 .box-content .item  .item-box{width: 268px; height: 352px;}
.box1 .box-content .item .item-box p{font-size: 20px;padding-left: 29px;color: #ffffff;font-weight: 700}
.box1 .box-content .item .item-word h1{font-size: 24px;text-align: center;line-height: 26px;height: 26px;margin: 20px 0px 10px;}
.box1 .box-content .item .item-word p{font-size: 18px;text-align: center;line-height: 24px;height: 45px;color: #ffffff}
.box1 .box-content .item .item-box h1{font-size: 30px;padding: 45px 0px 0px 29px;font-weight: bold; font-size: 30px;}
.box1 .box-content .item1 .item-box{background: url("../img/web_course/img-box/1.png"); }
.box1 .box-content .item2 .item-box{background: url("../img/web_course/img-box/2.png"); }
.box1 .box-content .item3 .item-box{background: url("../img/web_course/img-box/3.png"); }
.box1 .box-content .item4 .item-box{background: url("../img/web_course/img-box/4.png"); }
.box1 .box-content .item1{margin-right: 43px}
.box1 .box-content .item2{margin-right: 42px}
.box1 .box-content .item3{margin-right: 43px}
.box1 .box-content .item4{margin-right: 0px}
.box1 .box-content .item1 .item-word h1,.box1 .box-content .item1 .item-box h1{color: #7342fd; }
.box1 .box-content .item2 .item-word h1,.box1 .box-content .item2 .item-box h1{color: #0cee9a; }
.box1 .box-content .item3 .item-word h1,.box1 .box-content .item3 .item-box h1{color: #0578f6; }
.box1 .box-content .item4 .item-word h1,.box1 .box-content .item4 .item-box h1{color: #07c9ef; }


/*如何提升前端*/
.box2{padding-bottom: 50px;}
.box2 .items{float: left ;width: 531px;height: 342px;position: relative; margin-bottom: 50px; background-position: bottom center;background-size: contain;background-repeat: no-repeat;}
.box2 .item1{margin-right: 69px; background-image: url("../img/web_course/charts/1.png");}
.box2 .item2{margin-left: 69px; background-image: url("../img/web_course/charts/2.png");}
.box2 .item3{margin-right: 69px;background-image: url("../img/web_course/charts/3.png");}
.box2 .item4{margin-left: 69px; background-image: url("../img/web_course/charts/4.png");}

.box2 .items .item-head{height: 24px;line-height: 24px;color:#07c9ef;font-size: 23px; padding-left: 60px;}
.box2 .item2 .item-money{position: absolute ;width: 100%;height: 55px;line-height: 55px;font-size: 70px;color: #1ef2b8;top:128px;text-align: center }
.box2 .item2 .item-word{position: absolute;width: 100%;height:24px;font-size: 24px;text-align: center;color: #07c9ef;top: 221px}

.box2 .item3 .item-salary,.box2 .item4 .item-salary{position: absolute;left: 25px;top: 70px; }
.box2 .item3 .item-salary ul li,.box2 .item4 .item-salary ul li{color:#00ffb9;margin-bottom: 27px;font-size: 16px;height: 14px;line-height: 14px;}
.box2 .item3 .item-year,.box2 .item4 .item-year{position: absolute;bottom: -25px;left: 100px;}
.box2 .item3 .item-year ul li{font-size: 16px;color: #07c9ef;margin-right: 80px;float: left}
.box2 .item4 .item-year ul li{font-size: 16px;color: #07c9ef;margin-right: 25px;float: left}

    /*精品服务课程*/
.box3,.box4,.box5{
    background-color: #122436;
}

.box3 .inner {
    background: url("../img/web_course/border.png") center center no-repeat;
    height: 387px;
    margin-top: 60px;
    position: relative;
}

.box3 .hover ul {
    margin-top: 70px;
    overflow: hidden;
}

.box3 .hover ul li {
    margin-bottom: 0;
    margin-bottom: 20px;
    width: 240px;
    height: 56px;
    background: #03EFFC;
    position: relative;
    left: 0;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    margin-left: 70px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box3 .hover ul li.li_11 {
    margin-top: 80px;
}

.box3 .hover ul li.li_22 {
    left: 835px;
    bottom: 227px;
}

.box3 .hover ul li.cur {
    background: #00ffb9;
}

.box3 ul li img {
}

.box3 .imgbox {
    width: 570px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -278px;
    color: #fff;
}
.box3 .imgbox div {
    display: none;
}
.box3 .imgbox  p{
    padding-top: 60px;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 20px;
    text-align: center;
    color: #ffffff;
}
.box3  .imgbox  ul{
    overflow: hidden;
    text-align: center;
}
.box3  .imgbox  li{
    display: inline-block;
    border: 1px solid #03EFFC;
    padding:10px;
    margin:5px ;
    font-size: 22px;
    color: #ffffff;
}
.box3 .imgbox .cur {
    display: block;
}


/*课程大纲*/

.box4{padding-top: 50px;}
.box4 .main .head{width: 308px;height: 63px;margin: 0px auto;background-color: #00ffb9;border-radius: 31px; line-height: 63px;color: #000000;font-size: 27px;text-align: center;font-weight: bold}
.box4 .main .title{margin-top:30px; }
.box4 .main .swiper3  .swiper-slide{width: 198px!important;background-color:#07c9ef;height: 38px;border-radius: 6px 6px 0px 0px;line-height: 38px;text-align: center;font-size: 22px;color: #000000;margin: 0px 1px !important; }
.box4 .main .swiper3 .swiper-slide-active{background-color: #0cee9a;}
.box4 .main .swiper4 .swiper-slide{background-color:#122436;}
.box4 .main .swiper4 .swiper-slide .items{height: 45px;width: 100%;position: relative;margin-bottom: 1px;}
.box4 .main .swiper4 .swiper-slide .item{float: left;color: #ffffff;text-align: left;line-height: 45px;font-size: 16px;padding-left: 9px;background-color: #102e4b;}
.box4 .main .swiper4 .swiper-slide .item1{width: 340px;margin-right: 1px;}
.box4 .main .swiper4 .swiper-slide .item2{width: 527px;margin-right: 1px;}
.box4 .main .swiper4 .swiper-slide .item3{width: 331px;}



.box5 .content{  margin-top: 50px;}
.box5{padding-bottom: 50px;}

.stu-work{  width: 363px;  height: 288px;  float: left;  position: relative;top:0px;margin-bottom: 50px;background-size: contain;background-repeat: no-repeat;background-position: center center;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -ms-transition:top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s; }

.stu-work:hover {
  top: -10px;
}

.middle-work{margin-left:56px;margin-right: 55px; }
.work1{background-image: url("../img/web_course/stu-work/1.png");}
.work2{background-image: url("../img/web_course/stu-work/2.png");}
.work3{background-image: url("../img/web_course/stu-work/3.png");}
.work4{background-image: url("../img/web_course/stu-work/4.png");}
.work5{background-image: url("../img/web_course/stu-work/5.png");}
.work6{background-image: url("../img/web_course/stu-work/6.png");}
.work7{background-image: url("../img/web_course/stu-work/7.png");}
.work8{background-image: url("../img/web_course/stu-work/8.png");}
.work9{background-image: url("../img/web_course/stu-work/9.png");}

/**/
.duty{
    width: 100%;
    height: 53px;
    position: absolute;
    bottom: 0px;
    line-height: 53px;
    font-size: 20px;
    color:#ffffff;
    text-align: center;
}