body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0;} table{ border-collapse:collapse; border-spacing:0;} fieldset,img{ border:0;} address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;} ol,ul{ list-style:none;} caption,th{ text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} q:before,q:after{ content:'';} abbr,acronym{ border:0; font-variant:normal;} sup{ vertical-align:text-top;} sub{ vertical-align:text-bottom;} input,textarea,select{ font-family:inherit; font-size:inherit; font-weight:inherit;} input,textarea,select{ *font-size:100%;} legend{ color:#000;} body{ font-family:"Microsoft YaHei",SimHei,"微软雅黑","黑体"; background: #fff; color: #313131; font-size: 14px; } a{text-decoration:none;color:#313131;outline:none;} a:hover{text-decoration:none;} .clearboth { zoom: 1; display:block; } .clearboth:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .mleft0{margin-left:0;} .mleft5{margin-left:5px;} .mleft10{margin-left:10px;} .mleft15{margin-left:15px;} .mleft20{margin-left:20px;} .mleft30{margin-left:30px!important;} .mleft60{margin-left:60px!important;} .mleft90{margin-left: 90px;} .mleft120{ margin-left: 120px;} .no-margin{ margin:0 !important;} .mtop0{margin-top:0;} .mtop5{margin-top:5px;} .mtop10{margin-top:10px;} .mtop15{margin-top:15px;} .mtop20{margin-top:20px;} .mtop25{margin-top:25px;} .mtop30{margin-top:30px!important;} .mtop60{margin-top:60px;} html, body{ overflow: hidden; } .box .load { position: absolute; left: 0; top: 0; z-index: 900; width: 100%; height: 100%; } .load_bg { width: 100%; height: 100%; background: #fff; } .load p { position: absolute; left: 50%; top: 50%; z-index: 200; width: 32px; height: 32px; overflow: hidden; margin: -16px 0 0 -16px; } .load .loadTxt { width: 400px; height: 86px; margin: 50px 0 0 -200px; text-align: center; color: #666; font-weight: bold; font-size: 30px; } /*nav*/ .navWrap{ position: fixed; top: 20px; left: 0; z-index: 100; width:100%; height:100px; } .nav{ width:1300px; height:100px; margin:0 auto; position: relative; } .logo{ width:206px; height:71px; float:left; } .logo img{ width:100%; } .navCon{ width:700px; height:40px; float:right; margin-top:40px; } .navCon li{ width: 90px; height: 40px; text-align:center; float:left; line-height:40px; margin-left: 10px; } .navCon li a{ width: 100%; height: 100%; display: block; font-size:14px; color: #fff; } .navCon li a:hover{ border: 1px solid #fff; border-radius: 60px; } .nav_tel{ font-size: 24px; color: #fff; position: absolute; top: 0px; right: 15px; } .fixedNav { display: none; position: fixed; left: 50%; top: 50%; z-index: 1000; width: 24px; height: 180px; margin-top: -80px; padding-top: 13px; border-radius:15px; list-style: none; } .fixedNav li { float: left; position: relative; width: 100%; height: 12px; padding-left: 3px; margin-bottom: 10px; } .fixedNav .icon { display: block; width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .fixedNav .txt { display: none; position: absolute; left: -80px; top: 0; width: 76px; height: 19px; background: url("/zt/java/img/fourthQ/sprite.png") no-repeat 0 -80px; color: #fff; font-size: 12px; line-height: 19px; text-align: center; } .fixedNav .cur .icon { background: #fff; } /**内容**/ .wrapBox { position: fixed; top: 0px; width: 100%; } .box { position: relative; left: 50%; margin-left: -960px; width: 1920px; height: 800px; overflow: hidden; } .box_fixed { position: relative!important; width: 100%; height: 570px; } .box div { position: absolute; z-index: 100; } .box .zIndex10 { z-index: 10; } .box .zIndex40 { z-index: 40; } .box .zIndex50 { z-index: 50; } .box .zIndex150 { z-index: 150; } .box .zIndex160 { z-index: 160; } /**box1**/ .b1_01{ width: 1625px; height: 416px; top: -30px; left: 0px; transform: scale(.9); } .b1_fixed p{ font-size: 24px; color: #fff; position: absolute; z-index: 1000; } .b1_01_big{ font-size: 36px; font-weight: bold; } .b1_02{ top: 400px; left: 600px; } .b1_03{ top: 460px; left: 760px; } .java_zx{ width: 197px; height: 57px; display: block; background: #fff; color: #1c0c62; line-height: 57px; text-align: center; border-radius: 100px; position: absolute; top: 540px; left: 900px; font-size: 22px; } /**box2**/ .b2_01{ top: 0px; left: 600px; color: #fff; text-align: center; } .b2_01 h3{ font-size: 46px; font-weight: bold; } .b2_01 h4{ font-size: 24px; color: #ffcf2a; line-height: 50px; } .b2_01 p{ font-size: 18px; } .b2_02{ width: 1200px; height: 350px; position: absolute; top: 160px; left: 350px; transform: scale(.9); } .b2_02 li{ width: 290px; height: 349px; position: absolute; } .b2_02 li:nth-child(1){ top: 0; left: 0; } .b2_02 li:nth-child(2){ top: 0; left: 300px; } .b2_02 li:nth-child(3){ top: 0; left: 600px; } .b2_02 li:nth-child(4){ top: 0; left: 900px; } .b2_03{ color: #5d44b9; left: 850px; } /**box3**/ .b3_t{ top: 0px; left: 700px; color: #fff; text-align: center; } .b3_t h3{ font-size: 46px; font-weight: bold; } .b3_t p{ font-size: 18px; } .b3_con{ width: 1200px; height: 440px; position: absolute; top: 90px; left: 470px; transform: scale(.9); } .b3_con li{ position: absolute; } .b3_01{ width: 423px; height: 423px; top: 0; left: 100px; } .b3_02{ width: 423px; height: 423px; top: 0; left: 400px; } .b3_03{ width: 239px; height: 42px; top: 100px; left: -120px; } .b3_04{ width: 169px; height: 45px; top: 300px; left: -60px; } .b3_05{ width: 297px; height: 41px; top: 100px; left: 780px; } .b3_06{ width: 305px; height: 57px; top: 300px; left: 790px; } .b3_07{ width: 386px; height: 93px; top: 400px; left: 350px; } .b3_08{ font-size: 18px; color: #fff; top: 200px; left: 830px; } .b3_09{ top: 600px; left: 850px; color: #007cca; } /**box4**/ .b4_t{ top: 0px; left: 550px; color: #fff; text-align: center; } .b4_t h3{ font-size: 46px; font-weight: bold; } .b4_t p{ font-size: 18px; } .b4_con{ width: 1283px; height: 48px; background: url("/zt/java/img/fourthQ/b4_01.png") no-repeat; position: absolute; top: 300px; left: 300px; } .b4_con li{ position: absolute; } .b4_01{ width: 194px; height: 194px; top: -75px; left: 260px; } .b4_02{ width: 235px; height: 355px; top: -150px; left: 560px; } .b4_03{ width: 194px; height: 194px; top: -75px; left: 900px; } .b4_04{ color: #24ab79; top: 580px; left: 880px; } /**box5**/ .b5_t{ top: 0px; left: 600px; color: #fff; text-align: center; } .b5_t h3{ font-size: 46px; font-weight: bold; } .b5_t p{ font-size: 18px; } .b5_con{ width: 1202px; height: 331px; position: absolute; top: 130px; left: 350px; overflow: hidden; transform: scale(.9); } .b5_con li{ float: left; cursor: pointer; } .b5_left{ width: 212px; height: 313px; float: left; } .b5_right{ width: 0px; height: 331px; float: left; } .b5_cur .b5_right{ width: 354px; transition: .6s all; } .b5_05{ color: #a378d0; left: 850px; } /**box6**/ .b6_t{ top: 0px; left: 650px; color: #fff; text-align: center; } .b6_t h3{ font-size: 46px; font-weight: bold; } .b6_t p{ font-size: 18px; } .b6_con{ width: 1109px; height: 418px; top: 100px; left: 400px; transform: scale(.9); background: url("/zt/java/img/fourthQ/b6_bg.png") no-repeat center; } .b6_left{ width: 278px; height: 418px; overflow: hidden; } .b6_left li{ width: 100%; height: 80px; cursor: pointer; } .b6_left li:nth-child(1){ margin-top: 30px; } .b6_left li span{ display: block; width: 223px; height: 100%; border-bottom: 1px dotted #6ed4e4; margin: auto; color: #fff; line-height: 80px; text-align: center; font-size: 24px; } .b6_left li .b6_01{ top: 0; left: 278px; width: 830px; height: 418px; box-sizing: border-box; padding: 87px 400px 0 40px; opacity: 0; } .b6_left li .b6_01 h5{ font-size: 24px; color: #ed4c6b; margin-bottom: 20px; } .b6_left li .b6_01 p{ font-size: 14px; line-height: 30px; } .b6_left li .b6_01 img{ width: 296px; height: 301px; position: absolute; top: 60px; right: 40px; } .b6_left li.b6_on{ border-left: 8px solid #ffe327; } .b6_left li.b6_on span{ color: #ffe327; } .b6_left li.b6_on .b6_01{ opacity: 1; } .b6_02{ color: #a378d0; } /**box7**/ .b7_t{ top: 0px; left: 750px; color: #fff; text-align: center; } .b7_t h3{ font-size: 46px; font-weight: bold; } .b7_t p{ font-size: 18px; } .b7_01{ width: 426px; height: 495px; top: 150px; left: 500px; } .b7_02{ width: 474px; height: 459px; top: 150px; left: 1000px; } /**box7**/ .free_con{ width: 1200px; height: 470px; overflow: hidden; box-sizing: border-box; padding-top: 60px; top: 150px; left: 350px; transform: scale(.9); } .free_con .free_left{ color: #fff; font-size: 24px; top: 0; left: 0; } .free_big{ font-size: 42px; } .free_bold{ font-weight: bold; margin-right: 10px; } .free_img{ display: inline-block; height: 60px; padding-top: 10px; box-sizing: border-box; margin-right: 20px; } .free_con .free_right{ width: 541px; height: 440px; background: url("/zt/images/high/h_b7_form.png") no-repeat center; font-size: 16px; color: #818181; text-align: center; box-sizing: border-box; padding-top: 30px; top: 0; right: 0; } .free_con .free_right h6{ font-size: 30px; color: #1c1c1c; font-weight: bold; margin-bottom: 10px; } .free_r_text{ width: 294px; height: 57px; margin: 20px auto; position: relative; } .free_r_text .free_f{ width: 100%; height: 100%; border-radius: 5px; border: 1px solid #d9d9d9; color: #818181; box-sizing: border-box; padding-left: 60px; } .free_r_text .free_icon1{ width: 25px; height: 29px; display: block; background: url("/zt/images/high/high_sprite.png") 0px 0px; position: absolute; top: 15px; left: 15px; } .free_r_text .free_icon2{ width: 28px; height: 28px; display: block; background: url("/zt/images/high/high_sprite.png") 0px -31px; position: absolute; top: 15px; left: 15px; } .free_r_text .free_icon3{ width: 23px; height: 27px; display: block; background: url("/zt/images/high/high_sprite.png") 0px -61px; position: absolute; top: 15px; left: 15px; } .free_zx{ width: 260px; height: 52px; display: block; margin: 20px auto; color: #fff; line-height: 52px; text-align: center; background: linear-gradient(to right, #42a7fe, #7040e3); font-size: 18px; border-radius: 100px; } .footerwrap{ width: 100%; height: 150px; background: #151e29; font-size: 14px; color: #8796a8; padding-top: 20px; box-sizing: border-box; bottom: 0; left: 0; } .footer{ width: 1200px; height: 150px; top: 0; left: 50%; margin-left: -600px; } .foo_left{ padding: 10px; top: 50px; left: 0; } .foo_right{ width: 510px; position: relative; top: 0px; right: 0; } .foo_r1{ position: absolute; top: 20px; left: 0; } .foo_r2{ position: absolute; top: 20px; left: 140px; } .foo_r3{ position: absolute; top: 50px; right: 0; } .java_st{ width: 100%; height: 60px; background: #151e29; }