.wrap{ background: black; width: 100%; min-width: 1200px; min-height: 1000px; /*max-width: 1920px;*/ text-align: center; } .all{ width: 100%; margin: 0 auto; } .banner{ /*background: center center no-repeat;*/ /*background-size: 1920px 694px;*/ /*height: 694px;*/ } /*顶部banner图载入动画效果*/ header{display: flex;background: #000;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;-o-perspective:1000px;perspective:1000px;justify-content: center;align-items: center;height:745px;overflow: hidden;} .out #title{opacity: 0; -webkit-transform: translatez(-50px) rotatex(5deg); -moz-transform: translatez(-50px) rotatex(5deg); -ms-transform: translatez(-50px) rotatex(5deg); -o-transform: translatez(-50px) rotatex(5deg); transform: translatez(-50px) rotatex(5deg);} .out #stage{opacity: 0;-webkit-transform: translatez(0px);-moz-transform: translatez(0px);-ms-transform: translatez(0px);-o-transform: translatez(0px);transform: translatez(0px);} .in div{opacity: 1;-webkit-transform: translatez(0px) rotatey(0) rotatex(0);-moz-transform: translatez(0px) rotatey(0) rotatex(0);-ms-transform: translatez(0px) rotatey(0) rotatex(0);-o-transform: translatez(0px) rotatey(0) rotatex(0);transform: translatez(0px) rotatey(0) rotatex(0);} #core{display: block;position: absolute;width: 400px;height: 316px;left: 50%;top: 50%;margin-left: -200px;margin-top: -158px;-webkit-transition: all 0.9s ease;-moz-transform: translatez(-4000px) rotatey(90deg) rotatez(30deg);-ms-transform: translatez(-4000px) rotatey(90deg) rotatez(30deg);-o-transform: translatez(-4000px) rotatey(90deg) rotatez(30deg);transform: translatez(-4000px) rotatey(90deg) rotatez(30deg);opacity: 1;} #core.pass{-webkit-transform: rotatez(0) translatez(1000px) rotatey(-15deg);-moz-transform: rotatez(0) translatez(1000px) rotatey(-15deg);-ms-transform: rotatez(0) translatez(1000px) rotatey(-15deg);-o-transform: rotatez(0) translatez(1000px) rotatey(-15deg);transform: rotatez(0) translatez(1000px) rotatey(-15deg);opacity: 1;} #core img{width: 100%;} #stage{display: flex;justify-content: center;align-items: center;-webkit-transition:all 2.3s 0s ease-in;-ms-transition:all 2.3s 0s ease-in;-moz-transition:all 2.3s 0s ease-in;-o-transition:all 2.3s 0s ease-in;transition:all 2.3s 0s ease-in;-webkit-filter:brightness(1.3);-moz-filter:brightness(1.3);-ms-filter:brightness(1.3);-o-filter:brightness(1.3);filter:brightness(1.3);} #hero{width:1920px;height:745px;min-width:1200px;position:relative;overflow:hidden;} #hero img{height:745px;width:1920px;position:absolute;top:0;left:50%;margin-left: -960px;} #light{width: 700px;height: 500px;position: absolute;top: 50%;left: 50%;margin-left: -350px;margin-top: -250px;background: ;-webkit-transform:scalex(0.1) scaley(0.1);-moz-transform:scalex(0.1) scaley(0.1);-ms-transform:scalex(0.1) scaley(0.1);-o-transform:scalex(0.1) scaley(0.1);transform:scalex(0.1) scaley(0.1);-webkit-filter:brightness(0);-moz-filter:brightness(0);-ms-filter:brightness(0);-o-filter:brightness(0);filter:brightness(0);-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;} #light.pass{-webkit-transform:scalex(2) scaley(0.5);-moz-transform:scalex(2) scaley(0.5);-ms-transform:scalex(2) scaley(0.5);-o-transform:scalex(2) scaley(0.5);transform:scalex(2) scaley(0.5);-webkit-filter:brightness(6);-moz-filter:brightness(6);-ms-filter:brightness(6);-o-filter:brightness(6);filter:brightness(6);} #light.passed{-webkit-transform:scalex(6) scaley(1.1);-moz-transform:scalex(6) scaley(1.1);-ms-transform:scalex(6) scaley(1.1);-o-transform:scalex(6) scaley(1.1);transform:scalex(6) scaley(1.1);-webkit-filter:brightness(0);-ms-filter:brightness(0);-moz-filter:brightness(0);-o-filter:brightness(0);filter:brightness(0);-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;} #wave{width: 320px;height: 320px;top: 50%;left: 50%;margin-left: -160px;margin-top: -160px;position: absolute;background: ; -webkit-transform: scale(0.01);-ms-transform: scale(0.01);-moz-transform: scale(0.01);-o-transform: scale(0.01);transform: scale(0.01); -webkit-transition: all 0.9s 0.62s ease;-moz-transition: all 0.9s 0.62s ease;-o-transition: all 0.9s 0.62s ease;-ms-transition: all 0.9s 0.62s ease;transition: all 0.9s 0.62s ease; -webkit-filter:brightness(3);-moz-filter:brightness(3);-ms-filter:brightness(3);-o-filter:brightness(3);filter:brightness(3);} #wave.pass{-webkit-transform: scale(12);-moz-transform: scale(12);-ms-transform: scale(12);-o-transform: scale(12);transform: scale(12); -webkit-filter:brightness(1);-moz-filter:brightness(1);-ms-filter:brightness(1);-o-filter:brightness(1);filter:brightness(1);opacity: 0;} #ringgroup{position: absolute;width: 800px;height: 800px;left: 50%;top: 50%;margin-left: -400px;margin-top: -400px; -webkit-transition: all 2.2s 0.1s;-moz-transition: all 2.2s 0.1s;-ms-transition: all 2.2s 0.1s;-o-transition: all 2.2s 0.1s;transition: all 2.2s 0.1s; -webkit-transform: rotatez(-360deg) translatez(-4000px) scale(0.02);-ms-transform: rotatez(-360deg) translatez(-4000px) scale(0.02);-moz-transform: rotatez(-360deg) translatez(-4000px) scale(0.02);-o-transform: rotatez(-360deg) translatez(-4000px) scale(0.02);transform: rotatez(-360deg) translatez(-4000px) scale(0.02); -webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;-o-perspective:1000px;perspective:1000px; -webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;} #ringgroup.pass{-webkit-transform:rotatez(0) translatez(3200px) scale(1);-moz-transform:rotatez(0) translatez(3200px) scale(1);-ms-transform:rotatez(0) translatez(3200px) scale(1);-o-transform:rotatez(0) translatez(3200px) scale(1);transform:rotatez(0) translatez(3200px) scale(1); opacity: 1;} .ring{position: absolute;width: 100%;height: 100%;background: ; -webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;} .ring:nth-of-type(1){-webkit-transform: translatez(0px);-o-transform: translatez(0px);-ms-transform: translatez(0px);-moz-transform: translatez(0px);transform: translatez(0px);opacity: 1;} .ring:nth-of-type(2){-webkit-transform: rotatez(60deg) translatez(-1000px) scale(0.9);-moz-transform: rotatez(60deg) translatez(-1000px) scale(0.9);-ms-transform: rotatez(60deg) translatez(-1000px) scale(0.9);-o-transform: rotatez(60deg) translatez(-1000px) scale(0.9);transform: rotatez(60deg) translatez(-1000px) scale(0.9);opacity: 0.7;} .ring:nth-of-type(3){-webkit-transform: rotatez(120deg) translatez(-200px) scale(0.8);-moz-transform: rotatez(120deg) translatez(-200px) scale(0.8);-ms-transform: rotatez(120deg) translatez(-200px) scale(0.8);-o-transform: rotatez(120deg) translatez(-200px) scale(0.8);transform: rotatez(120deg) translatez(-200px) scale(0.8);opacity: 0.5;} .ring:nth-of-type(4){-webkit-transform: rotatez(30deg) translatez(-3000px) scale(0.7);-moz-transform: rotatez(30deg) translatez(-3000px) scale(0.7);-ms-transform: rotatez(30deg) translatez(-3000px) scale(0.7);-o-transform: rotatez(30deg) translatez(-3000px) scale(0.7);transform: rotatez(30deg) translatez(-3000px) scale(0.7);opacity: 0.1;} .canwork{ height: 1068px; padding-right: 110px; box-sizing: border-box; } .canwork-bg1{ background: center center no-repeat; background-size: 1920px 129px; height: 129px; margin-left: 55px; } .canwork-bg2{ background: center 20px no-repeat; background-size: 1057px 968px; height: 968px; box-sizing: border-box; } .canwork-bg3{ background: center 45px no-repeat; background-size: 1017px 635px; height: 680px; margin-left: 55px; } .canwork-bg4{ background: center center no-repeat; background-size: 1920px 288px; height: 288px; margin-left: 55px; } .canwork-wrap{ width: 1017px; margin: 0 auto; height: 100%; /*background: grey;*/ } .status-wrap{ width: 884px; margin: 0 auto; height: 100%; } .text1{ top: 25px; left: 220px; } .text2{ top: 130px; left: 170px; } .text3{ top: 220px; left: 90px; } .text4{ top: 330px; left: 60px; } .text5{ top: 445px; left: 65px; } .text6{ top: 545px; left: 110px; } .text7{ top: 640px; left: 210px; } .text8{ top: 25px; left: 580px; } .text9{ top: 130px; left: 680px; } .text10{ top: 220px; left: 720px; } .text11{ top: 330px; left: 730px; } .text12{ top: 445px; left: 720px; } .text13{ top: 545px; left: 650px; } .text14{ top: 640px; left: 590px; } .status{ height: 900px; box-sizing: border-box; } .status-bg1{ background: center center no-repeat; background-size: 1920px 900px; height: 900px; } .status-bg2{ background: center center no-repeat; background-size: 884px 758px; height: 900px; } .status-what{ top: 205px; left: 360px; } .status-text1{ top: 300px; left: 25px; } .status-text2{ top: 300px; left: 570px; } .status-text3{ top: 470px; left: 315px; } .college{ height: 561px; box-sizing: border-box; } /*.playvideo{ width: 600px; height: 320px; background: red; z-index: 2; top: 100px; left: 300px; }*/ .co-clo{ top: 100px; right: 300px; width: 70px; height: 36px; background: rgb(180,180,180); line-height: 36px; text-align: center; font-size: 19px; color: rgb(230,230,230); z-index: 4; display: none; } .college-bg1{ background: center center no-repeat; background-size: 1920px 561px; height: 561px; } .college-bg6{ background: center center no-repeat; background-size: 1920px 129px; height: 129px; } .college-content{ width: 1200px; margin: 0 auto; height: 432px; /*background: grey;*/ } .college-bg2{ background: 0 100px no-repeat; background-size: 260px 164px; width: 260px; height: 302px; margin-left: 20px; float: left; } .college-bg3{ background: 0 100px no-repeat; background-size: 260px 164px; height: 302px; margin-left: 40px; float: left; width: 260px; } .college-bg4{ background: 0 100px no-repeat; background-size: 260px 164px; height: 302px; margin-left: 40px; float: left; width: 260px; } .college-bg5{ background: 0 100px no-repeat; background-size: 260px 164px; height: 302px; margin-left: 40px; float: left; width: 260px; } .college-text1{ top: 285px; left: 0px; width: 260px; text-align: center; } .college-text2{ top: 285px; left: 0px; width: 260px; text-align: center; } .college-text3{ top: 285px; left: 0px; width: 260px; text-align: center; } .college-text4{ top: 285px; left: 0px; width: 260px; text-align: center; } .buy{ height: 278px; } .buy-bg{ background: center center no-repeat; background-size: 1920px 378px; height: 278px; } .job{ height: 232px; } .job-content{ width: 1200px; margin: 0 auto; height: 232px; /*background: grey;*/ } .job-bg1{ background: 0 0 no-repeat; background-size: 260px 164px; width: 260px; height: 192px; margin-left: 20px; float: left; } .job-bg2{ background: 0 0 no-repeat; background-size: 260px 164px; width: 260px; height: 192px; margin-left: 40px; float: left; } .job-bg3{ background: 0 0 no-repeat; background-size: 260px 164px; width: 260px; height: 192px; margin-left: 40px; float: left; } .job-bg4{ background: 0 0 no-repeat; background-size: 260px 164px; width: 260px; height: 192px; margin-left: 40px; float: left; } .job-text{ width: 260px; text-align: center; left: 0; top: 170px; } .salary{ height: 929px; box-sizing: border-box; } .salary-bg1{ background: center center no-repeat; background-size: 1920px 561px; height: 560px; } .salary-bg6{ background: center center no-repeat; background-size: 1920px 129px; height: 169px; } .salary-content1{ width: 1200px; margin: 0 auto; height: 270px; padding-top: 20px; box-sizing: border-box; } .content-name{ top: 172px; left: 10px; } .content-salary{ top: 172px; right: 10px; } .content-business{ top: 192px; left: 10px; } .salary-bg2{ background: 0 0px no-repeat; background-size: 224px 172px; width: 224px; height: 192px; margin-left: 20px; float: left; } .salary-bg3{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-bg4{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-bg5{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-content2{ width: 1200px; margin: 0 auto; height: 270px; /*background: grey;*/ } .salary-bg7{ background: 0 0px no-repeat; background-size: 224px 172px; width: 224px; height: 192px; margin-left: 20px; float: left; } .salary-bg8{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-bg9{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-bg0{ background: 0 0px no-repeat; background-size: 224px 172px; height: 192px; margin-left: 88px; float: left; width: 224px; } .salary-text{ text-align: center; margin: 0 auto; width: 1200px; line-height: 40px; height: 100px; } .rank{ height: 689px; box-sizing: border-box; } .rank-bg1{ background: center center no-repeat; background-size: 1920px 560px; height: 560px; } .rank-bg0{ background: center center no-repeat; background-size: 1920px 129px; height: 129px; } .rank-bg2{ background: center center no-repeat; background-size: 1226px 93px; height: 93px; width: 100%; } .rank-title{ width: 1200px; margin: 0 auto; height: 93px; line-height: 93px; text-align: center; } .title-bank1{ width: 180px; } .title-bank2{ width: 180px; } .title-bank3{ width: 200px; } .title-bank4{ width: 200px; } .title-bank5{ width: 220px; } .title-bank6{ width: 220px; } .rank-content{ width: 1200px; margin: 0 auto; height: 460px; /*background: grey;*/ } .swiper-container { width: 1200px; height: 460px; /*background: red;*/ } .teacher{ height: 809px; box-sizing: border-box; } .teacher-bg1{ background: center center no-repeat; background-size: 1920px 560px; height: 560px; } .teacher-bg0{ background: center center no-repeat; background-size: 1920px 129px; height: 129px; padding: 40px 0; } .teacher-content{ width: 1200px; margin: 0 auto; height: 460px; /*background: grey;*/ } .teacher-bg2{ background: 0 0px no-repeat; background-size: 190px 391px; width: 190px; height: 391px; margin-left: 25px; float: left; } .teacher-bg3{ background: 0 0px no-repeat; background-size: 190px 391px; width: 190px; height: 391px; margin-left: 50px; float: left; } .teacher-bg4{ background: 0 0px no-repeat; background-size: 190px 391px; width: 190px; height: 391px; margin-left: 50px; float: left; } .teacher-bg5{ background: 0 0px no-repeat; background-size: 190px 391px; width: 190px; height: 391px; margin-left: 50px; float: left; } .teacher-bg6{ background: 0 0px no-repeat; background-size: 190px 391px; width: 190px; height: 391px; margin-left: 50px; float: left; } .intro{ top: 30px; left: 20px; text-align: left; width: 160px; height: 330px; /*background: red;*/ opacity: 0; } .teacher1{ background: 2px 15px no-repeat; background-size: 179px 362px; width: 179px; height: 362px; } .teacher-text{ width: 179px; height: 29px; line-height: 29px; text-align: center; color: rgb(230,230,230); font-size: 18px; top: 362px; left: 0; } .teacher2{ background: 2px 15px no-repeat; background-size: 179px 362px; width: 179px; height: 362px; } .teacher3{ background: 2px 15px no-repeat; background-size: 179px 362px; width: 179px; height: 362px; } .teacher4{ background: 2px 15px no-repeat; background-size: 179px 362px; width: 179px; height: 362px; } .teacher5{ background: 2px 15px no-repeat; background-size: 179px 362px; width: 179px; height: 362px; } .environment{ background: center center no-repeat; background-size: 1920px 818px; height: 790px; /*background: grey;*/ } .environment-bg1{ height: 790px; } .environment-bg2{ background: center center no-repeat; background-size: 1600px 86px; height: 86px; padding: 60px 0; } .environment-content1{ width: 1200px; margin: 0 auto; height: 193px; } .environment-content2{ width: 1200px; margin: 0 auto; height: 193px; } .environment-content3{ width: 1200px; margin: 0 auto; height: 193px; } .environment1{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 13px; float: left; } .environment2{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment3{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment4{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment5{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment6{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 13px; float: left; } .environment7{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment8{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment9{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment0{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment10{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 13px; float: left; } .environment11{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment12{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment13{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .environment14{ background: 0px 0px no-repeat; background-size: 214px 143px; width: 214px; height: 143px; margin-left: 26px; float: left; } .en-little{ position: relative; } .en-text{ top: 155px; left: 0; text-align: center; width: 214px; height: 20px; line-height: 20px; font-size: 18px; } .imgshow{ height: 429px; width: 642px; /*background: red;*/ top: 0px; left: 279px; display: none; z-index: 4; border: 1px solid black; } .en-img{ width: 100%; height: 100%; top: 0; left: 0; /*background: blue;*/ } .en-clo{ width: 80px; height: 30px; text-align: center; line-height: 30px; top: 0; right: 0; background: white; font-size: 18px; background: rgba(100,100,100,0.5); color: white; } .business-bg1{ background: center center no-repeat; background-size: 1600px 86px; height: 86px; padding: 20px 0px 60px; } .contact{ background: center center no-repeat; background-size: 1920px 616px; height: 550px; } .contact-bg1{ background: center center no-repeat; background-size: 1595px 86px; height: 86px; padding: 70px 0; } .contact-content{ width: 1200px; height: 550px; margin: 0 auto; } .contentl{ margin-left: 150px; width: 500px; height: 550px; /*background: red;*/ } .contentr{ margin-left: 100px; width: 350px; height: 550px; /*background: blue;*/ } .online{ background: center center no-repeat; background-size: 221px 77px; height: 77px; display: inline-block; width: 221px; } .free{ background: center center no-repeat; background-size: 221px 77px; height: 77px; display: inline-block; width: 221px; margin-left: 40px } .map{ margin-top: 40px; background: center center no-repeat; background-size: 484px 311px; width: 484px; height: 311px; margin-left: 8px; } .tel{ height: 77px; line-height: 77px; width: 350px; letter-spacing: 2px; } .i-tel{ background: 0px 22px no-repeat; background-size: 38px 32px; width: 40px; height: 77px; margin-left: 60px; } .form{ margin-top: 10px; width: 310px; height: 311px; margin-left: 60px; /*background: red;*/ } .form .input{ width: 310px; } .form input{ height: 35px; border: none; outline: none; } .form select{ width: 310px; height: 35px; border: none; outline: none; } .form label{ height: 30px; line-height: 33px; text-align: left; padding-left: 15px; width: 295px; } .button-submit{ margin-top: 20px; } .sendword{ width: 116px; display: inline-block; margin-left: 10px; } .showword{ display: inline-block; width: 180px; } /*footer*/ .size{ opacity: 0; background: red; width: 30px; height: 50px; z-index: 3; } .bj{ top: 130px; left: 360px; } .dl{ top: 130px; left: 396px; } .sh{ top: 210px; left: 407px; } .zz{ top: 185px; left: 340px; } .xa{ top: 200px; left: 300px; } .wh{ top: 235px; left: 345px; } .consult{ border-width: 1px; border-color: rgb(73,254,252); border-style: solid; border-radius: 10px; background-color: rgba(42,167,255,0.188); padding: 7px 15px; text-align: center; line-height: 40px; font-size: 20px; color: rgb(73,224,252); text-shadow: 0px 2px 5px rgb(73,254,252); font-weight: lighter; letter-spacing: 1px; } .consult:hover { background-color: rgba(42,167,255,0.361); } .consult1{ top: 700px; left: 385px; } .consult2{ top: 760px; left: 385px; } .consult3{ top: 360px; left: 525px; } .consult4{ top: 270px; left: 525px; } .consult5{ top: 450px; left: 500px; } /*新增*/ .consult6{ top: 790px; left: 555px; } .consult7{ width: 146px; margin: 0 auto; } /*修改*/ .business{ background: center center no-repeat; background-size: 1920px 818px; height: 718px; margin-top: 60px; } .business-bg2{ background: center center no-repeat; background-size: 1169px 251px; height: 251px; margin-bottom: 40px; } /*2.新增*/ .college-img{ width: 40px; height: 40px; } .college-img-wrap{ width: 260px; height: 164px; background: rgba(0,0,0,0.5); top: 100px; left: 0; display: none; text-align: center; padding-top: 60px; box-sizing: border-box; } .college-bg2:hover .iw1{ display: block; } .college-bg3:hover .iw2{ display: block; } .college-bg4:hover .iw3{ display: block; } .college-bg5:hover .iw4{ display: block; }