/*内容*/ @keyframes as { 0%{transform: rotateX(0deg); opacity:1} 50%{transform: rotateX(-180deg); opacity:0} 75%{transform: rotateX(180deg); opacity:0} 100%{transform: rotateX(0deg); opacity:1} } @keyframes as2 { 0%{transform: rotateY(0deg); opacity:1} 100%{transform: rotateY(180deg); opacity:0} } .sl{ animation: as 1s forwards} .s2{animation: as2 1s forwards} /*s缩放显示*/ .game_thumb { -webkit-animation: bounceIn 1.8s .9s ease both; -moz-animation: bounceIn 1.8s .9s ease both; } @keyframes bounceIn{ 0% { opacity: 0;-webkit-transform: scale(.01);} /*25% { opacity: 0;-webkit-transform: scale(.8);}*/ 50% { opacity: 1; -webkit-transform: scale(1.1);} /*75% { -webkit-transform: scale(.99);}*/ 100% {-webkit-transform: scale(1);} } /*字的动画*/ .charactar_box{ -webkit-animation: fadeInUp 2.2s ease both; -moz-animation: fadeInUp 2.2s ease both; } @keyframes fadeInUp{ 0% { opacity: 0;} 50% { opacity: 0.7;} 100% { opacity: 1;} } .liustst{ width: auto; display: table; } @keyframes liust{ 0% { -webkit-transform: translateX(0px)} 100% { -webkit-transform: translateX(-1500px)} } .content_warp{ min-width: 1500px; overflow: hidden;} /*第一屏*/ .con_1{ min-width: 100%; height: 1080px; background: url(/sw/jx3jhm/images/con_1.png) no-repeat center; width: 100%; } .con_1 .cent1{ width: 100%; margin: 0 auto; height: 100%; position: relative;} .con_1 .a1{ position: absolute;bottom: 315px; left: 70px; display: block; background: url(/sw/jx3jhm/images/imgitem.png) no-repeat center;height:85px;width:259px;background-position: 0 -85px;} .con_1 .a1:hover{height:87px;width:264px;background-position: 0 -257px;} .con_1 .a2{ position: absolute;bottom: 315px; left: 365px; display: block; background: url(/sw/jx3jhm/images/imgitem.png) no-repeat center;height:85px;width:259px;background-position: 0 0;} .con_1 .a2:hover{height:87px;width:264px;background-position: 0 -170px;} /*第二屏*/ .con_2{ min-width: 100%; background: url(/sw/jx3jhm/images/con_2.png) no-repeat center top; width: 100%; height: 780px;} .center2{ width: 1508px; margin: 0 auto; height: 100%;height: 689px; background: url(/sw/jx3jhm/images/con_2bj.png) no-repeat center; padding-top: 120px;} .cent2{width: 100%; margin: 0 auto;height: 567px;} .cent2 .spleft{ float: left; width: 710px; height: 567px; position: relative;} .cent2 .spleft ul{ width: 100%; height: 100%; position: absolute; top:0; left: 0; } .cent2 .spleft ul .spkuang1{ background: url(/sw/jx3jhm/images/kuangsp_01.png) no-repeat center; width: 35px; height: 567px; position: absolute; left: 0; top:0;z-index: 10;} .cent2 .spleft ul .spkuang2{ background: url(/sw/jx3jhm/images/kuangsp_02.png) no-repeat center; width: 639px; height: 3px; position: absolute; left: 35px; top:0;z-index: 10;} .cent2 .spleft ul .spkuang3{ background: url(/sw/jx3jhm/images/kuangsp_03.png) no-repeat center; width: 36px; height: 567px; position: absolute; right: 0; top:0;z-index: 10;} .cent2 .spleft ul .spkuang4{ background: url(/sw/jx3jhm/images/kuangsp_05.png) no-repeat center; width: 639px;; height: 3px; position: absolute; left: 35px; bottom:0;z-index: 10;} .cent2 .spleft .motai{ width: 100%; height: 100%; background-color:rgba(0,0,0,0.1); position: absolute; top:0; left: 0;} .cent2 .spleft .motai i{ display: block; width:88px ; height: 102px; background: url(/sw/jx3jhm/images/video.png) no-repeat center; position: absolute; top:0; left:0; right: 0; bottom: 0; margin: auto; cursor: pointer; z-index: 1;} .cent2 .spleft .spshow{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%; z-index: 2; display: none;} .cent2 .newright{ float: right; width: 470px;} .cent2 .newright h2{ color: #2C4B79; text-align: center; height: 50px; line-height: 50px; font-size: 28px;} .cent2 .newright ul{} .cent2 .newright ul li a{color: #395582; display: block;} .cent2 .newright ul li{ height: 49px; line-height: 49px; font-size: 18px; width:360px; padding:0 45px 0 65px; position: relative; overflow: hidden;} .cent2 .newright ul li i{ display:block; width: 20px; height: 20px; background: url(/sw/jx3jhm/images/as.png) no-repeat center; position: absolute; top: 14px; left:40px;} .cent2 .newright ul .ac { background: #2c4b79; height: 80px; line-height: 80px;} .cent2 .newright ul .ac a{ color: #b0bfe8; display: block;} .cent2 .newright .jhlist{ border: 3px solid #2c4b79; width: 470px; height: 507px; overflow-y: auto;} .cent2 .newright .jhlist::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } .cent2 .newright .item2::-webkit-scrollbar-button { width: 0; height: 0; } .cent2 .newright .item2::-webkit-scrollbar-corner { display: block; } .cent2 .newright .jhlist::-webkit-scrollbar-thumb { background-clip: padding-box; background-color: rgba(44, 75, 121, 0.5); border-radius: 10px;} .div{ overflow: hidden;} /*第三屏*/ .con_3{ min-width: 100%; background: url(/sw/jx3jhm/images/con_3.png) no-repeat center top; width: 100%; height: 1310px; padding-top: 70px;} .bt1{ margin: 0 auto; display: block;} .con_3 .text{ margin: 0 auto; width: 978px; line-height: 50px; padding-top: 65px; font-size: 25px; color: #2c4b79; text-indent: 2em;} .con_3 .dang{ width: 100%; margin: 0 auto; height: 900px; position: relative;} .con_3 .dang .mask{ width:100%; height:360px; overflow: hidden; position: relative; padding: 20px 0;} .itema{ height: 79px;} .itema h3{ width: 350px; line-height: 70px; height: 70px; font-size:25px; color: #2c4b79; float: left;} .itema .tab1{ margin-top:15px;float: right; background: url(/sw/jx3jhm/images/imgaq.png) no-repeat center;height:49px;width:75px;background-position: 0 -49px;color: #FFFFFF; text-align: center; line-height: 42px; font-size: 14px; cursor: pointer;} .itema .tab1:hover{background-position: 0 0; } .itema .tab2{ margin-top:15px; float: right; background: url(/sw/jx3jhm/images/imgaq.png) no-repeat center;height:49px;width:75px;background-position: 0 -147px;color: #FFFFFF; text-align: center; line-height: 42px; font-size: 14px;cursor: pointer;} .itema .tab2:hover{background-position: 0 -98px;} .itema .tab3{ margin-top:15px; float: right; background: url(/sw/jx3jhm/images/imgaq.png) no-repeat center;height:49px;width:157px;background-position: 0 -196px;color: #FFFFFF; text-align: center; line-height: 42px; font-size: 14px;cursor: pointer;} .itema .tab3:hover{background-position: 0 -245px; } .con_3 .dang .bottom{ height: 50px;} .con_3 .dang .bottom .content{ width: 990px; border:1px solid #2c4b79; font-size: 17px; font-family: "宋体"; color: #2c4b79; background:#c2ccdb; height: 50px; float: left;} .con_3 .dang .send{ float: right; width: 180px; height: 50px; background: #2c4b79; color: #FFFFFF; text-align: center; line-height: 50px; cursor: pointer;} .con_3 .warp1{ width: 100%; height: 366px; padding-top: 20px;} .con_3 .warp1 .test{ width: 530px; float:left; height: 366px;} .con_3 .warp1 h4{ font-size: 25px; color: #2C4B79; height: 60px; line-height: 60px;} .con_3 .warp1 .test p{ line-height: 42px; color: #2C4B79; font-size: 25px;} .con_3 .warp1 .test p a{ color: #ff0700;} .con_3 .dang .test_imte{ /*transform: translateX(-368px);transition: transform 5s linear 0s;*/ position:absolute; right:0px; font-size:20px; white-space: nowrap; } .choujiang{ float: right; width: 600px; height: 366px;} .choujiang li{ float: left; overflow:hidden; position: relative;width: 177px; height: 266px;transform-style: preserve-3d; perspective: 600px;} .choujiang li i{ display: block;width: 177px; height:266px; background: url(/sw/jx3jhm/images/cjbj.png) no-repeat center;z-index:3; position: absolute;top:0; left: 0;} .choujiang li img{ position: absolute; top:3px; left: 3px; z-index: 2; border-radius: 25px;} .choujiang li .bj{ transform-origin: center;position: absolute; top:0px; left: 0px; width: 100%; height: 100%;} .choujiang li .btn{width: 63px; height: 20px; position: absolute; bottom: 40px; left: 57px; border:1px solid #FFFFFF; border-radius: 15px; font-size: 13px; color: #FFFFFF; text-align: center; z-index: 4; cursor: pointer; background: rgba(0,0,0,0.6);} .choujiang li .btn:hover{ background: rgba(0,0,0,0.3);} .choujiang li .txt{position: absolute; top:6px; left: 3px; width: 158px; height:214px; z-index: 1; padding: 41px 6px 0 6px; text-align: center;} .choujiang li .txt h2{ font-size: 18px; text-align: center; line-height: 50px; height: 50px; color: #2C4B79;} .choujiang li .txt p{ width: 143px; line-height: 25px; color: #2C4B79; margin: 0 auto;} .choujiang li .txt .post{ width:65px; height: 25px; border-radius: 15px; background: #2C4B79; color: #FFFFFF; font-size: 13px; margin: 0 auto; margin-top: 10px; text-align: center; line-height: 25px; cursor: pointer; z-index: 10;} .maring{ margin: 0 34px;} .choujiang li .txt2{position: absolute; top:6px; left: 3px; width: 168px; height: 198px; z-index: 1; padding-top: 50px; display: none;} .choujiang li .txt2 h2{ font-size: 18px; text-align: center; line-height: 50px; height: 50px; color: #2C4B79;width: 150px; margin: 0 auto;} /*第四屏*/ .con_4{min-width: 100%; background: url(/sw/jx3jhm/images/con_4.png) no-repeat center; width: 100%; position: relative; height: 1079px;} .bt2{ margin: 0 auto; display: block;} .banner{width:100%;position:relative; height: 1080px;} .banner_inner{position:relative;min-height:1080px;width:100%;max-width:1920px;background-size:cover;overflow:hidden} .banner_img{} .banner_img li{position:relative} .banner_img li.bgli01{} .banner_img li.bgli02{} .banner_img li.bgli03{} /*.banner_img li.bgli04{ background:url(/sw/jx3jhm/images/bg6.jpg) no-repeat center top;background-size:cover;}*/ /*.banner_img li.bgli05{ background:url(/sw/jx3jhm/images/bg6.jpg) no-repeat center top;background-size:cover;}*/ .banner .a,.banner .b,.banner .c,.banner .d,.banner .e,.banner .f,.banner .g,.banner .h,.banner .i,.banner .j,.banner .k,.banner .l,.banner .m{position:absolute;top:0%} .banner .a{right:2%;width:60.68%;} .banner .b{right:11%;width:49.822%;} .banner .c{right:8%;width:61.208%;} .banner .d{right:13%;width:71.291%;} .banner .e{right:13%;width:46.010%;} .banner .f{right:5%;width:68.010%;} .banner .g{right:12%;width:54.010%;} .banner .h{right:19%;width:41.010%;} .banner .i{right:9%;width:63.010%;} .banner .j{right:10%;width:60.010%;} .banner .k{right:18%;width:39.010%;} .banner .l{right:12%;width:58.010%;} .banner .m{right:9%;width:46.010%;} .banner .secd{width:21.979%;position:absolute;left:17%;top:0%} .banner .a img,.banner .b img,.banner .c img,.banner .d img,.banner .e img,.banner .f img,.banner .g img,.banner .h img,.banner .i img,.banner .j img,.banner .k img,.banner .l img,.banner .m img,.banner .secd img{width:100%;max-width:100%; height: 100%;} .banner_common{position:relative;} .banner_pre{position:absolute;top:350px;left:7%;width:98px;height:112px;cursor:pointer;background:url(/sw/jx3jhm/images/l.png) no-repeat;opacity:.5;filter:alpha(opacity=50)} .banner_next{position:absolute;top:350px;right:7%;width:98px;height:112px;cursor:pointer;background:url(/sw/jx3jhm/images/r.png) no-repeat;opacity:.5;filter:alpha(opacity=50)} .banner_pre:hover, .banner_next:hover{opacity:1;filter:alpha(opacity=100)} .banner .control{width:40px;position:absolute;top:-25px;left:85px; height: 820px; background: url(/sw/jx3jhm/images/ultiao.png) no-repeat center; padding-top: 34px;} .banner .control li{margin-left: 3px; height:40px;width:31px;background:url(/sw/jx3jhm/images/img3.png) no-repeat 0 -40px;cursor:pointer; margin-bottom: 17px; } .banner .control li:nth-child(1){height:32px;width:35px;background:url(/sw/jx3jhm/images/img1.png) no-repeat 0 -32px;cursor:pointer; margin-bottom:15px;} .banner .control li:nth-child(2){height:49px;width:26px;background:url(/sw/jx3jhm/images/img2.png) no-repeat 0 -49px;cursor:pointer; margin-bottom: 22px; } .banner .control li:nth-child(3){height:40px;width:31px;background:url(/sw/jx3jhm/images/img3.png) no-repeat 0 -40px;cursor:pointer; margin-bottom: 17px; } .banner .control li:nth-child(4){height:33px;width:36px;background:url(/sw/jx3jhm/images/img4.png) no-repeat 0 -33px;cursor:pointer; margin-bottom: 26px;} .banner .control li:nth-child(5){height:31px;width:32px;background:url(/sw/jx3jhm/images/img5.png) no-repeat 0 -31px;cursor:pointer; margin-bottom: 21px;} .banner .control li:nth-child(6){height:46px;width:31px;background:url(/sw/jx3jhm/images/img6.png) no-repeat 0 -46px;cursor:pointer; margin-bottom: 20px;} .banner .control li:nth-child(7){height:45px;width:37px;background:url(/sw/jx3jhm/images/img7.png) no-repeat 0 -45px;cursor:pointer; margin-bottom: 16px;} .banner .control li:nth-child(8){height:31px;width:38px;background:url(/sw/jx3jhm/images/img8.png) no-repeat 0 -32px;cursor:pointer; margin-bottom: 20px;} .banner .control li:nth-child(9){height:44px;width:36px;background:url(/sw/jx3jhm/images/img9.png) no-repeat 0 -44px;cursor:pointer; margin-bottom: 23px;} .banner .control li:nth-child(10){height:41px;width:31px;background:url(/sw/jx3jhm/images/img10.png) no-repeat 0 -41px;cursor:pointer; margin-bottom: 20px; } .banner .control li:nth-child(11){height:27px;width:45px;background:url(/sw/jx3jhm/images/img11.png) no-repeat 0 -27px;cursor:pointer; margin-bottom: 26px;margin-left: 0;} .banner .control li:nth-child(12){height:42px;width:34px;background:url(/sw/jx3jhm/images/img12.png) no-repeat 0 -42px;cursor:pointer; margin-bottom: 19px;} .banner .control li:nth-child(13){height:39px;width:34px;background:url(/sw/jx3jhm/images/img13.png) no-repeat 0 -39px;cursor:pointer; margin-bottom: 34px;} .banner .control li a{display:none} .banner .control li.current{background-position:0 0;} /*第五页面啊*/ .con_5{min-width: 100%;width: 100%; position: relative; height: 1080px;} .con_5 ul{ position: absolute; top:274px; left: 210px; width: 192px; height: 600px; z-index: 39;transform-style: preserve-3d;perspective: 5000px;} .con_5 ul li{ width: 192px; height: 58px; background: url(/sw/jx3jhm/images/lia.png) no-repeat center; text-align: center; line-height: 58px; font-size: 25px; color: #FFFFFF; margin-bottom: 40px; cursor: pointer;font-weight: "宋体";} .con_5 ol{ position: absolute; top:0; left: 0; width: 100%; height: 100%;} .con_5 ol li{ position: absolute; top:0; left: 0; width: 100%; height: 100%; overflow: hidden;} .con_5 ol li img{ width: 100%; height: 100%;} .con_5 ol .hide{display: none;} /*弹框*/ .tanshow{width: 100%; height: 5560px; position: absolute; top:0; left: 0; z-index: 50; min-width:100%; display: none; background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); zoom: 1;background: rgba(0,0,0,0.5); } .tan1{ width:384px; height: 615px;left:42%;top: 19%;position: fixed;z-index: 51; border-radius: 20px; display: none;} .tan1 img{ position: absolute; right: 20px; top:20px; cursor: pointer; width: 24px; height: 24px;} .iframe_warp{ width: 100%; height: 100%; border:none} /*中奖的信息*/ .tan2{ width: 316px ;position: fixed;left:42%;top: 35%; left: calc(50% - 180px);z-index: 51; border-radius: 8px; background:#b0bfe8; padding-top: 25px; border:2px solid #4727e8; display: none; } .tan2 img{ position: absolute; right: 8px; top:8px;cursor: pointer; } .tan2 p{ color: #43280d; height: 43px; line-height: 43px; text-align: center;font-size: 19px; padding-bottom: 10px;} .tan2 h6{color: #43280d; height: 35px; text-align: center; font-size: 15px;padding-bottom: 25px; font-weight: normal;} .tan2 .btn{ width:134px; height: 38px; background: url(/sw/jx3jhm/images/btnbj.png) no-repeat center; text-align: center; line-height: 34px; margin: 0 auto; font-size: 16px; color: #43280d; border-radius: 8px; margin-bottom: 20px; cursor: pointer;} /*填写资料啊*/ .tanshow .tan3{ position: fixed; left: 38%; left: calc(50% - 192px); top: 190px; height: 586px;width:402px; z-index: 1001; border: 0; border-radius: 20px; background: url(/sw/jx3jhm/images/bg-dl.png) no-repeat center; padding-top: 6px; background-size:100% 100%; display: none;} .tanshow .tan3 .toplist{ height: 75px; text-align: center; color: #ffea00; font-size: 23px; width: 390px; margin: 0 auto; margin-bottom: 26px; font-weight: normal; border-bottom:2px solid #2c4b79; background: url(/sw/jx3jhm/images/bj.png) no-repeat center; border-radius: 10px 10px 0 0;} .tanshow .tan3 .toplist h2{ height: 45px; line-height: 45px; text-align: center; font-size: 23px; font-weight: 500; color: #000000;} .tanshow .tan3 .toplist h3{ font-size: 14px; color: #2c4b79; font-weight: 500;} .tanshow .tan3 .inpu{ width: 325px; margin: 0 auto; height: 40px; border:1px solid #2c4b79; border-radius: 10px; background: #8baaff; line-height: 40px; color: #FFFFFF; padding: 0 10px; margin-top: 10px;} .tanshow .tan3 input{ height: 36px; width: 210px; background: #8baaff;border:none; color: #FFFFFF; font-size: 18px;} .tanshow .tan3 .pa{ color: #FF0000; font-size: 13px; height: 20px; line-height: 20px;width: 325px; margin: 0 auto; text-align: center;} .tanshow .tan3 .btn{ width: 320px;margin: 0 auto; height: 35px; background:url(/sw/jx3jhm/images/btnbj.png) no-repeat center; background-size:100% 100% ; border-radius: 10px; margin-top: 20px; text-align: center; line-height: 35px; color: #43280d; font-size: 19px; cursor: pointer; display: block;} .tanshow .tan3 .p1{ height: 35px; line-height: 35px; color: #2c4b79; font-size: 25px; width: 345px; margin: 0 auto; margin-top: 20px; } .tanshow .tan3 .p2{line-height: 38px; color:#FFFFFF; font-size: 19px; width: 344px; margin: 0 auto;} .tanshow .tan3 img{position: absolute; top:20px; right: 20px; cursor: pointer; }