.box{float: left;width: 100%;position: relative;}
.box .main .box-title{height: 66px;width: 100%;text-align: center;vertical-align: bottom;background-repeat: no-repeat;background-size: contain;background-position: center center;}
.box .main .box-title h1{font-size: 46px;height:46px;line-height: 78px;color: #333333;}
.box .main .box-title h1 span{color: #ea202b;}

.box1{padding-top: 50px;}
.box1 .box-title{background-image: url("../img/ui-course/bg-title/1.png");}
.box1 .box-content{margin-top:100px;}
.box1 .box-content .items{float: left;position: relative;}
.box1 .box-content .items img{display: block;margin: 0 auto;}
.box1 .box-content .items h1{margin-top: 25px;height: 22px;font-size: 22px; text-align: center;font-weight: bold;}
.box1 .box-content .items p{font-size: 16px;height: 77px;line-height: 20px;color: #000000;text-align:center;margin-top: 30px}
.box1 .box-content .item1{margin: 0px 75px 0px 38px;width: 225px;}
.box1 .box-content .item2{margin: 0px 76px 0px 0px;width: 224px;}
.box1 .box-content .item3{margin: 0px 75px 0px 0px;width: 224px;}
.box1 .box-content .item4{margin: 0px 38px 0px 0px;width: 224px;}

.box2{padding-top: 100px;}
.box2 .box-title{background-image: url("../img/ui-course/bg-title/2.png");}
.box2 .chart{width:1037px;height: 493px;margin: 0 auto; background: url("../img/ui-course/chart/1.png") center center no-repeat;background-size: contain;position: relative}
.box2 .chart .chart-word li{font-size: 16px;color: #ffffff;float: left;position: relative;margin: 0 46px;top: 393px;left: 67px;}
.box2 .chart .salary li{font-size: 15px;color: #ffffff;float: left;position: relative;margin: 0 30px;top: 200px;left: 60px;width: 116px;  height: 31px;border-radius: 17px;line-height: 31px;text-align: center;}
.box2 .chart .salary li:nth-of-type(1){background-color: #ec6194;}
.box2 .chart .salary li:nth-of-type(2){background-color: #3abce6;}
.box2 .chart .salary li:nth-of-type(3){background-color: #f0ba49;}
.box2 .chart .salary li:nth-of-type(4){background-color: #9fcf54;}
.box2 .chart .salary li:nth-of-type(5){background-color: #6870ec;}


.box3{padding-top: 100px;}
.box3 .box-title{background-image: url("../img/ui-course/bg-title/3.png");}
.box3 .box-content{padding-top: 100px;}
.box3 .box-content .items {float: left;width: 200px;height: 158px;margin-bottom: 50px;}
.box3 .box-content .items p{text-align: center;line-height: 24px;font-size: 16px;padding: 0px 10px;padding-top: 20px; }
.box3 .box-content .items img{display: block;margin: 0px auto;}






.box4{padding-top:50px;}
.box4 .box-title{background-image: url("../img/ui-course/bg-title/4.png");}
.box4 .content{padding-top: 100px;}
.box4 .content .items .item-title{width: 100%;height: 125px;background-size: contain;background-position: center center;background-repeat: no-repeat;}
.box4 .content .item1 .item-title{background-image: url("../img/ui-course/flow/title1.png");}
.box4 .content .item2 .item-title{background-image: url("../img/ui-course/flow/title2.png");}
.box4 .content .item3 .item-title{background-image: url("../img/ui-course/flow/title3.png");}

.box4 .content .items .item-content{background-size: auto;background-position: top center;background-repeat: no-repeat; position: relative; }
.box4 .content .item1 .item-content{background-image: url("../img/ui-course/flow/device1.png");}
.box4 .content .item2 .item-content{background-image: url("../img/ui-course/flow/device2.png");}
.box4 .content .item3 .item-content{background-image: url("../img/ui-course/flow/device3.png");}
.box4 .content .item1 .item-content{height: 685px;}
.box4 .content .item2 .item-content{height: 682px;}
.box4 .content .item3 .item-content{height: 605px;}

.box4 .content .items .item-content .part-left{position: absolute;top:20px;left: 40px;width: 458px;height:535px;background-repeat: no-repeat;}
.box4 .content .items .item-content .part-right{position: absolute;top:130px;left:696px;width: 458px;height:535px;background-repeat: no-repeat;}
.box4 .content .item1 .item-content .part-left{background-image: url("../img/ui-course/flow/1.png");}
.box4 .content .item1 .item-content .part-right{background-image: url("../img/ui-course/flow/2.png");}
.box4 .content .item2 .item-content .part-left{background-image: url("../img/ui-course/flow/3.png");}
.box4 .content .item2 .item-content .part-right{background-image: url("../img/ui-course/flow/4.png");}
.box4 .content .item3 .item-content .part-left{background-image: url("../img/ui-course/flow/5.png");}
.box4 .content .item3 .item-content .part-right{background-image: url("../img/ui-course/flow/6.png");}

.box4 .content .items .item-content .part-left,.box4 .content .items .item-content .part-right{padding-top: 135px;}
.box4 .content .items .item-content .part-left p,.box4 .content .items .item-content .part-right p{margin-bottom: 30px;font-size: 16px;line-height: 13px;color: #010101;padding-left: 45px;}
.box4 .content .items .item-content .part-left p span{margin-right: 5px;}
.box4 .content .items .item-content .part-right p span{margin-right: 5px;}
.box4 .content .item1 .item-content .part-left p span{color:#6870EC;}
.box4 .content .item1 .item-content .part-right p span{color:#F0BA49;}
.box4 .content .item2 .item-content .part-left p span{color:#EC6194;}
.box4 .content .item2 .item-content .part-right p span{color:#3ABCE6;}
.box4 .content .item3 .item-content .part-left p span{color:#FF7301;}
.box4 .content .item3 .item-content .part-right p span{color:#9FCF54;}

.box5{padding-top:100px;}
.box5 .box-title{background-image: url("../img/ui-course/bg-title/5.png");}
.box5 .box-content{padding-top: 100px;}
.box5 .box-content .content-contain{margin-top: 30px;margin-bottom: 180px;}
.box5 .box-content .content-title .swiper3 .swiper-wrapper{width: 489px;height: 55px;border-radius: 27px;border: solid 1px #ff0000; }
.box5 .box-content .content-title .swiper3 .swiper-wrapper .swiper-slide{width: 163px !important;height: 55px;border-radius: 27px;margin: 0px !important; font-size: 30px;line-height: 55px;text-align: center; }
.box5 .box-content .content-title .swiper3 .swiper-wrapper .swiper-slide-active{color: #ffffff;}
.box5 .box-content .content-title .swiper3 .swiper-wrapper .slide-bg{position: absolute;width: 163px !important;height: 55px;border-radius: 27px;background-color: #ff0000;}
.box5 .box-content .content-contain .swiper4 .swiper-slide{background-color: #ffffff;}
.box5 .box-content .content-contain .swiper4 .swiper-slide .items{float: left;position: relative;width: 400px;margin-bottom: 10px;transition: all 0.5s;}
.box5 .box-content .content-contain .swiper4 .swiper-slide .items:hover{transform: scale(1.1);}
.box5 .box-content .content-contain .swiper4 .swiper-slide .items img{display: block;margin: 0 auto;}