.ban{ margin-top:80px; } .part-bg{ position: relative; width:100%; height:100px; background-color: #f7f7f7; } .cj_part { position: absolute; width: 1000px; left: 50%; margin-left: -500px; top: -70px; height: 120px; background: #fff; z-index: 98; -moz-box-shadow: 0 2px 3px #cfcfcf; -webkit-box-shadow: 0 2px 3px #cfcfcf; -ms-box-shadow: 0 2px 3px #cfcfcf; box-shadow: 0 2px 3px #cfcfcf; display: flex; } .cj_part .cj_part_li { float: left; width: 254px; position: relative; overflow: hidden; } .cj_part_li img{ width:50px; margin:35px 15px 35px 22px; vertical-align: middle; } .cj_part_li .info{ vertical-align: middle; } .cj_part_li .info h2 { margin-top: 40px; font-size: 18px; line-height: 18px; color: #333; font-weight: normal; } .cj_part_li .info p { margin-top: 8px; line-height: 14px; color: #999; } .cj_part_li .link { top: 120px; width: 250px; height: 100%; position: absolute; background: #ee8333; /*background: rgba(283,131,51,0.9);*/ transition: 0.4s; } .cj_part_li:hover .link{ top:0; } .cj_part_li .link p { margin: 39px 64px; font-size: 16px; width: 120px; height: 42px; line-height: 42px; text-align: center; color: #ffffff; border: 1px solid #ffffff; border-radius: 8px; } #step1{ height:590px; } .step1-title{ padding:65px 0 30px; text-align:center; } .step1-title h1{ font-size:36px; line-height:36px; color:#878787; } .step1-title h1 span{ color:#bf095f; /*color:#ee8333;*/ } .step1-title p{ margin-top:10px; font-size:16px; line-height:28px; color:#878787; } .zweb03{ padding-bottom:50px; } .zweb03 .line{ margin:0 auto; width:824px; height:290px; position:relative; background:url("../images/line.png") no-repeat center center; } .zweb03 .line .num{ top:131px; width:28px; height:28px; z-index:2; position:absolute; background:#bf095f; /*background-color:#ee8333;*/ border-radius:50%; } .zweb03 .line .num.n1{ left:-13px; } .zweb03 .line .num.n2{ left:253px; } .zweb03 .line .num.n3{ left:520px; } .zweb03 .line .num.n4{ right:-14px; } .zweb03 .line .num p{ text-align:center; font-size:18px; color:#ffffff; line-height:28px; } .zweb03 .line .num .box{ left:-41px; top:-130px; width:126px; height:290px; position:absolute; } .zweb03 .line .num.n1 .box h1, .zweb03 .line .num.n3 .box h1{ margin-left:-46px; margin-top:78px; font-size:18px; width:200px; line-height:22px; color:#545454; text-align:center; } .zweb03 .line .num.n1 .tag, .zweb03 .line .num.n3 .tag{ bottom:0; width:126px; height:139px; z-index:-1; position:absolute; background:url("../images/zweb03-tag1.png") no-repeat center; } .zweb03 .line .num.n1 .tag h2, .zweb03 .line .num.n3 .tag h2{ margin-top:56px; width:108px; font-size:24px; line-height:26px; color:#ffffff; text-align:center; } .zweb03 .line .num.n2 .box h1, .zweb03 .line .num.n4 .box h1{ margin-left:-46px; margin-top:170px; font-size:18px; width:200px; line-height:22px; color:#545454; text-align:center; } .zweb03 .line .num.n2 .tag, .zweb03 .line .num.n4 .tag{ top:0; width:126px; height:139px; z-index:-1; position:absolute; background:url("../images/zweb03-tag2.png") no-repeat center; } .zweb03 .line .num.n2 .tag h2, .zweb03 .line .num.n4 .tag h2{ margin-top:28px; width:108px; font-size:24px; line-height:26px; color:#ffffff; text-align:center; } .zweb03 .line:hover .num.n1{ animation:move1 2s linear infinite; } .zweb03 .line:hover .num.n2{ animation:move2 2s linear infinite; } .zweb03 .line:hover .num.n3{ animation:move3 2s linear infinite; } .zweb03 .line:hover .num.n4{ animation:move4 2s linear infinite; } @keyframes move1{ 0%{left:-13px;} 50%{left:13px;} 100%{left:-13px;} } @keyframes move2{ 0%{left:253px;} 50%{left:233px;} 100%{left:253px;} } @keyframes move3{ 0%{left:500px;} 50%{left:520px;} 100%{left:500px;} } @keyframes move4{ 0%{right:-14px;} 50%{right:6px;} 100%{right:-14px;} } #step2{ width:100%; height:647px; background: url("../images/bg1.jpg") no-repeat center/cover; } .part-title2{ padding-top:80px; padding-bottom:50px; } .part-title2 .num{ padding-bottom:3px; font-size:80px; color:#ec1c32; text-align:center; font-family:Agency FB,sans-serif; background:url("../images/bg1.jpg") no-repeat center bottom; } .part-title2 h1{ margin-top:8px; font-size:45px; line-height:45px; text-align:center; } .part-title2 h1.c2{ color:#ffffff; } .part-title2 p{ margin:0 auto; margin-top:8px; font-size:16px; line-height:24px; text-align:center; width:635px; color:#888888; } .part-title2 p.big{ width:1000px; } .teacher02{ width:1090px; padding-bottom:40px; margin: 0 auto; } .teacher02 .box{ float:left; margin:0 15px; width:187px; } .teacher02 .box img{ width:187px; height:187px; } .teacher02 .box p{ margin-top:5px; font-size:16px; line-height:25px; text-align:center; color:#ffffff; } #step2 .btn{ margin:0 auto; width:276px; height:60px; line-height:43px; color:#ffffff; font-size:24px; text-align:center; display:block; transition:0.5s; border:1px solid #ffffff; border-radius:28px; } #step2 .btn:hover{ transition:0.5s; color:#363636; background:#ffffff; } #steps{ padding-top: 60px; padding-bottom: 60px; box-sizing: border-box; } .step{ height:780px; } .stepsWords{ text-align: center; position: relative; margin:0 auto; width:210px; font-size:32px; } .stepsWords .steps-left{ position:absolute; top:10px; left:0; width:25px; height:25px; background: url("../images/sprite.png") no-repeat 0 0; } .stepsWords .steps-right{ position:absolute; top:10px; right:0; width:25px; height:25px; background: url("../images/sprite.png") no-repeat -25px 0; } .stepsShow { display: flex; justify-content: space-between; padding: 26px 0; } .stepsShow li { width: 384px; text-align: center; padding-top:30px; } .stepsShow li:hover{ box-shadow: 0 1px 16px #bcbcbc, 0 0 1px #eee, 0 0 1px #eee; } .stepsShow li a{ display: inline-block; color:#000; } dl { display: block; } .detail .detailTitle { font-size: 20px; margin-top:20px; opacity: 0; } .detailicon img { position: relative; cursor: pointer; width:90px; } .detailDescription { width: 100%; font-size: 12px; line-height: 20px; color: #999; opacity: 0; margin-top: 20px; } #step3 { position: relative; padding-bottom: 150px; background: url('../images/bg2.jpg') no-repeat center/cover; box-sizing: border-box; } .step1BgContainer { position: absolute; right: 0; top: 15%; margin: auto; display: flex; align-items: center; opacity: 0; } .system-img{ width:890px; } .step1Content { max-width: 1200px; width: 80%; margin: 0 auto; text-align: right; padding-bottom: 90px; } .stepWords { text-align: left; font-size: 36px; color: #fff; opacity: 0; } .step1Line { height: 3px; background: #fff; width: 130px; margin-top: 40px; } .step1Detail { margin-top:20px; text-align: left; font-size: 18px; line-height: 36px; color: #fff; width: 380px; opacity: 0; margin-bottom: 80px; padding:10px; /*background-color:rgba(204,204,204,0.3);*/ border-radius: 6px; } .holderDiv { height: 200px; } .font-size{ font-size: 48px; color:#ee8333; } #step4 { position: relative; box-sizing: border-box; } .step2Content { width: 30%; max-width: 1200px; margin: 0 auto; margin-left: 60%; } .step2Line { height: 3px; background: #000; width: 130px; opacity: 0; margin-top: 40px; } .step2Words { font-size: 36px; color: #000; opacity: 0; } .step2Detail { margin-top:80px; font-size: 16px; line-height: 36px; color: #000; margin-bottom: 80px; width: 400px; opacity: 0; } .step2BgContainer { position: absolute; left: 5%; top: 10%; margin: auto; display: flex; align-items: center; opacity: 0; } .system-img2{ width:780px; margin-top:18.5%; } .hook-left{ position:absolute; top:0; left:10%; } .hook-right{ position:absolute; top:0; right:10%; } #step5 { position: relative; padding-bottom: 150px; background: url('../images/index2-1.jpg') no-repeat center/cover; box-sizing: border-box; } #step6 { position: relative; box-sizing: border-box; } #step7 { position: relative; padding-bottom: 150px; background: url('../images/index3-1.jpg') no-repeat center/cover; box-sizing: border-box; } #step8 { position: relative; box-sizing: border-box; } /*@media screen and (max-width: 1920px) and (min-width: 1681px) {*/ /* .steps {*/ /* !*height: auto;*!*/ /* padding-bottom: 80px;*/ /* }*/ /* .holderDiv {*/ /* height: 200px;*/ /* }*/ /* .stepWords ,.step2Words {*/ /* margin-top: 50px;*/ /* }*/ /* .system-img{*/ /* width:890px;*/ /* }*/ /*}*/ /*@media screen and (min-width: 1367px) and (max-width: 1440px) {*/ /* .step{*/ /* height:675px;*/ /* }*/ /* .ban{*/ /* height:670px;*/ /* }*/ /* #steps {*/ /* padding-top: 46px;*/ /* }*/ /* #steps{*/ /* height:700px;*/ /* }*/ /* .system-img{*/ /* width:660px;*/ /* }*/ /* .stepWords{*/ /* font-size:32px;*/ /* }*/ /* .step1Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step1Detail{*/ /* font-size: 15px;*/ /* margin-top:65px;*/ /* }*/ /* .step2Words{*/ /* font-size:32px;*/ /* }*/ /* .step2Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step2Detail{*/ /* font-size: 15px;*/ /* margin-top:65px;*/ /* }*/ /* .system-img2{*/ /* width:635px;*/ /* margin-top: 20.5%;*/ /* }*/ /* .hook-left{*/ /* width:42px;*/ /* }*/ /* .hook-right{*/ /* width:42px;*/ /* }*/ /*}*/ /*@media screen and (min-width: 1281px) and (max-width: 1366px) {*/ /* .step{*/ /* height:630px;*/ /* }*/ /* .ban{*/ /* height:610px;*/ /* }*/ /* .ban .banner-top{*/ /* margin-top:150px;*/ /* font-size:55px;*/ /* }*/ /* .ban-top-title{*/ /* font-size: 18px;*/ /* }*/ /* #steps {*/ /* padding-top: 35px;*/ /* }*/ /* .stepsShow{*/ /* margin-top: 45px;*/ /* }*/ /* .detailicon img{*/ /* width:75px;*/ /* }*/ /* .detail .detailTitle{*/ /* font-size:18px;*/ /* }*/ /* .stepWords{*/ /* font-size:30px;*/ /* }*/ /* .step1Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step1Detail{*/ /* font-size: 15px;*/ /* margin-top:50px;*/ /* }*/ /* .step2Words{*/ /* font-size:30px;*/ /* }*/ /* .step2Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step2Detail{*/ /* font-size: 15px;*/ /* margin-top:50px;*/ /* }*/ /* .system-img{*/ /* width:640px;*/ /* }*/ /* .system-img2{*/ /* width:620px;*/ /* margin-top: 20.5%;*/ /* }*/ /* .hook-left{*/ /* width:41px;*/ /* }*/ /* .hook-right{*/ /* width:41px;*/ /* }*/ /*}*/ /*@media screen and (min-width: 1025px) and (max-width: 1280px) {*/ /* .step{*/ /* height:600px;*/ /* }*/ /* .ban{*/ /* height:610px;*/ /* }*/ /* #steps {*/ /* padding-top: 35px;*/ /* }*/ /* .ban .banner-top{*/ /* margin-top: 180px;*/ /* font-size:48px;*/ /* }*/ /* .ban-top-title{*/ /* margin-top: 28px;*/ /* font-size:16px;*/ /* width:520px;*/ /* }*/ /* .ban .experience{*/ /* width:160px;*/ /* height:52px;*/ /* font-size:18px;*/ /* margin-top: 30px;*/ /* }*/ /* .stepsShow{*/ /* margin-top: 45px;*/ /* }*/ /* .detailicon img{*/ /* width:70px;*/ /* }*/ /* .detail .detailTitle{*/ /* font-size:18px;*/ /* }*/ /* .stepWords{*/ /* font-size:30px;*/ /* }*/ /* .step1Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step1Detail{*/ /* width:326px;*/ /* font-size: 14px;*/ /* margin-top:50px;*/ /* padding:10px;*/ /* background-color:rgba(204,204,204,0.3);*/ /* border-radius: 6px;*/ /* }*/ /* .step2Words{*/ /* font-size:30px;*/ /* }*/ /* .step2Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step2Detail{*/ /* font-size: 14px;*/ /* margin-top:50px;*/ /* }*/ /* .system-img{*/ /* width:555px;*/ /* }*/ /* .system-img2{*/ /* width:550px;*/ /* margin-top: 20.5%;*/ /* }*/ /* .hook-left{*/ /* width:37px;*/ /* }*/ /* .hook-right{*/ /* width:37px;*/ /* }*/ /* .holderDiv{*/ /* width:170px;*/ /* }*/ /*}*/ /*@media screen and (min-width: 0) and (max-width: 1024px) {*/ /* .step{*/ /* height:560px;*/ /* }*/ /* .ban{*/ /* height:610px;*/ /* }*/ /* #steps {*/ /* padding-top: 35px;*/ /* }*/ /* .ban .banner-top{*/ /* margin-top: 148px;*/ /* font-size:44px;*/ /* }*/ /* .ban-top-title{*/ /* font-size:15px;*/ /* margin-top:30px;*/ /* width:430px;*/ /* }*/ /* .ban .experience{*/ /* width:150px;*/ /* height:52px;*/ /* font-size:16px;*/ /* margin-top: 30px;*/ /* }*/ /* .stepsShow{*/ /* margin-top: 45px;*/ /* }*/ /* .detailicon img{*/ /* width:60px;*/ /* }*/ /* .detail .detailTitle{*/ /* font-size:17px;*/ /* }*/ /* .step1Content{*/ /* margin-bottom: 49px;*/ /* }*/ /* .stepWords{*/ /* font-size:30px;*/ /* }*/ /* .step1Line{*/ /* margin-top: 30px;*/ /* }*/ /* .step1Detail{*/ /* width:290px;*/ /* font-size: 12px;*/ /* margin-top:30px;*/ /* }*/ /* .step2Words{*/ /* font-size:30px;*/ /* }*/ /* .step2Line{*/ /* margin-top: 25px;*/ /* }*/ /* .step2Detail{*/ /* font-size: 14px;*/ /* margin-top:40px;*/ /* }*/ /* .system-img{*/ /* width:545px;*/ /* }*/ /* .system-img2{*/ /* width:540px;*/ /* margin-top: 20%;*/ /* }*/ /* .hook-left{*/ /* width:35px;*/ /* }*/ /* .hook-right{*/ /* width:35px;*/ /* }*/ /* .holderDiv{*/ /* width:160px;*/ /* }*/ /* .footer{*/ /* width:1005px;*/ /* }*/ /*}*/