html,body { overflow: hidden; width: 640px; height: 100%;-webkit-user-select: none; margin: 0 auto;} body,tr,td,textarea,input,select,button { font-size:24px; font-family:"Hiragino Sans GB W3","微软雅黑","汉仪细等线简","Lucida Grande", "Lucida Sans Unicode", "STHeiti", "Helvetica","Arial","Verdana","sans-serif"; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} a{text-decoration:none;color:inherit;} a:hover, a:link, a:visited { cursor: pointer;text-decoration: none;} dl,dd,dt,h1 { margin:0; padding:0;} ul { margin:0; padding:0; list-style:none;} h2,p { margin:0;} li { list-style:none;} form { margin:0; padding:0;} input { margin:0; padding:0;} select { vertical-align:middle;} input.checkbox { cursor:pointer;} .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .bboxfix { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;} .cuttext { overflow: hidden; white-space: nowrap;text-overflow: ellipsis;} .middle { -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); position: absolute; top: 50%;} .center { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); position: absolute; left: 50%;} .middcent { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;} .clearfb { max-height: 999999px;} .img100 { width: 100%;} body { font-size: 24px; margin:0; padding:0; position: relative; color: #FFF;} .pageloading { width: 100%; text-align: center; height: 100%; position:fixed; left: 0; top: 0; z-index:1100; overflow:hidden; background:#FFD13A url(bg_1.jpg) no-repeat center bottom;} .pageloading .container { left: 0; width: 100%; height: 100%; text-align: center;} .pageloading .container .bg { width: 100%; position: absolute; left: 0; bottom: 0;} .pageloading .container .cont { margin-top: -100px; width: 100%;} .pageloading .container .cont .img2 { position: absolute; left: 0; top: 0; -webkit-animation: loadyan 1s ease infinite; } .pageloading .container .cont .dians { height: 14px; text-align: center; font-size: 0; margin-top: 20px;} .pageloading .container .cont .dians img { display: inline-block; margin: 0 9px; opacity: 0; -webkit-transform: scale(1);} .pageloading .container .cont .dians .d1 { -webkit-animation: loaddian1 2s ease infinite;} .pageloading .container .cont .dians .d2 { -webkit-animation: loaddian2 2s ease infinite;} .pageloading .container .cont .dians .d3 { -webkit-animation: loaddian3 2s ease infinite;} .pageloading .container .cont .dians .d4 { -webkit-animation: loaddian4 2s ease infinite;} .pageloading .container .cont .dians .d5 { -webkit-animation: loaddian5 2s ease infinite;} .pageloading .container .num { width: 100%; text-align: center; font-size: 26px; color: #FFF; padding-top: 30px; display:none;} .fix_logo1 { position: absolute; z-index: 99999; top: 15px; left: 28px;} .fix_logo2 { position: absolute; z-index: 99999; bottom: 5px; right: 15px;} .But { position: relative; } .But .m1 { position: relative; z-index: 1; } .But .m2 { position: absolute; z-index: 2; top: 0; left: 0;} #bg_all { width: 100%; height: 100%; background:#FFD13A url(bg_1.jpg) no-repeat center bottom;} #bg_all .line1 { position:absolute; top: -125px; left: 50%; margin-left: -557px;} #bg_all .info_k { height: 950px; width: 100%; left: 0; z-index: 2; opacity: 0;} #bg_all .info_k .border { position: absolute; top: 145px; bottom: 0; left: 21px; width: 598px; border: transparent 31px solid; -webkit-border-image:url(border_1.png) 31 31 31 31; border-image-repeat:repeat;} #bg_all .info_k .hill { position: absolute; top: 5px; left: 0;} #bg_all .plogo { position: absolute; top: 26px; left: 0; } .nextpage { position: absolute; bottom: 15px; left: 50%; margin-left: -81px; z-index: 80; -webkit-animation: nextpage 0.8s linear infinite;} #page1 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 100; display: none;} #page1 .info_k { height: 950px; width: 100%; left: 0; z-index: 2; } #page1 .info_k .bigtxt { margin-top: 60px; height: 178px; position: relative;} #page1 .info_k .bigtxt .t2 { position: absolute; right: 60px; top: 0; transform-origin: left bottom;} #page1 .info_k .bigtxt .t2.ani { -webkit-animation: scale_spring001 0.5s ease forwards; } #page1 .info_k .mainimg { height: 390px; margin-top: 27px; position: relative;} #page1 .info_k .mainimg .m1 { position: absolute; top: 0; left: 0; width: 100%;} #page1 .info_k .mainimg .m2 { position: absolute; top: 0; left: 0; width: 100%;} #page1 .info_k .mainimg .m3 { position: absolute; top: 390px; left: 0; width: 100%;} #page1 .info_k .mainimg .m4k { position: absolute; top: -40px; left: 124px; width: 164px; height: 165px;} #page1 .info_k .mainimg .m4k.ani { -webkit-animation: slate001 4s linear infinite; } #page1 .info_k .mainimg .m4 { display: block;} #page1 .info_k .mainimg .m4.ani { -webkit-animation: scalerotate001 4s linear infinite; } #page1 .info_k .mainimg .o1 { position: absolute; right: -18px; top: 149px; transform-origin: right center;} #page1 .info_k .mainimg .o2 { position: absolute; left: -32px; top: 119px;} #page1 .info_k .mainimg .o3 { position: absolute; top: 268px; right: 94px; transform-origin: right bottom;} #page1 .info_k .mainimg .o4 { position: absolute; top: 9px; right: 138px; transform-origin: left bottom;} #page1 .info_k .txtcont { margin-top: 73px; color: #000000; font-size: 20px; text-align: center; position: relative; line-height: 32px; font-weight: bold;} #page1 .info_k .nextbtn { margin: 38px auto 0; position: relative; display: block;} #page2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 90; display: none;} #page2 .info_k { height: 950px; width: 100%; left: 0; z-index: 2; } #page2 .info_k .bigtxt { position: relative; margin-top: 18px;} #page2 .info_k .mainimg { height: 291px; margin-top: 30px; position: relative; transform-origin: top center;} #page2 .info_k .mainimg .m1 { position: absolute; top: 14.5px; left: 187.5px;} #page2 .info_k .mainimg .m2 { position: absolute; top: 0; left: 174px;} #page2 .info_k .mainimg .m2.ani { -webkit-animation: rotate001 8s ease infinite; } #page2 .info_k .mainimg .m3 { position: absolute; top: 104px; left: 30px; transform-origin: right center;} #page2 .info_k .mainimg .m3.ani { -webkit-animation: page2_001 1.5s ease forwards; -webkit-transform-style: preserve-3d;} #page2 .info_k .mainimg .m3.ani2 { -webkit-animation: page2_003 1.5s ease infinite;} #page2 .info_k .mainimg .m4 { position: absolute; top: 104px; right: 42px; transform-origin: left center;} #page2 .info_k .mainimg .m4.ani { -webkit-animation: page2_002 1.5s ease forwards; -webkit-transform-style: preserve-3d;} #page2 .info_k .mainimg .m4.ani2 { -webkit-animation: page2_004 1.5s ease infinite;} #page2 .info_k .txtcont { margin-top: 60px; color: #000000; font-size: 24px; text-align: center; position: relative; line-height: 38px; font-weight: normal; transform-origin: top center;} #page2 .info_k .txtcont span { color: #FF000C;} #page2 .info_k .txtcont .img { margin-top: 20px;} #page2 .info_k .btns { margin: 50px auto 0; position: relative; transform-origin: top center; text-align: center;} #page2 .info_k .btns img { display: inline-block; margin: 0 20px;} #page3 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 80; display: none;} #page3 .info_k { height: 950px; width: 100%; left: 0; z-index: 2; } #page3 .info_k .bigtxt { position: relative; margin-top: 18px;} #page3 .info_k .mainimg { height: 242px; margin-top: 8px; position: relative; transform-origin: top center;} #page3 .info_k .mainimg .m1 { position: absolute; top: 12px; left: 209.5px;} #page3 .info_k .mainimg .m2 { position: absolute; top: 0; left: 198.5px;} #page3 .info_k .mainimg .m2.ani { -webkit-animation: rotate001 8s ease infinite; } #page3 .info_k .mainimg .m3 { position: absolute; top: 194px; left: 53.5px; transform-origin: 60% top;} #page3 .info_k .mainimg .m3.ani { -webkit-animation: page3_001 1.5s ease infinite;} #page3 .info_k .txtcont { margin-top: 68px; margin-bottom: 5px; color: #000000; font-size: 24px; text-align: center; position: relative; line-height: 38px; font-weight: normal; transform-origin: top center;} #page3 .info_k .txtcont span { color: #FF000C;} #page3 .info_k .txtcont .img { margin-top: 10px; margin-bottom: 8px;} #page3 .info_k .btns { margin: 0 auto; position: relative; transform-origin: top center; text-align: center;} #page3 .info_k .btns img { display: inline-block; margin: 0 20px;} #page4 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 70; display: none;} #page4 .info_k { height: 950px; width: 100%; left: 0; z-index: 2; } #page4 .info_k .bigtxt { position: relative; margin-top: 18px;} #page4 .info_k .mainimg { height: 355px; margin-top: 60px; position: relative; transform-origin: top center;} #page4 .info_k .mainimg .m1 { position: absolute; top: 4px; left: 96px; transform-origin: top center;} #page4 .info_k .mainimg .m1.ani { -webkit-animation: page4_001 1.4s linear infinite;} #page4 .info_k .mainimg .m2_k { position: absolute; top: -50px; left: 190px; width: 260px; height: 456px; padding: 50px 50px;z-index: 2;} #page4 .info_k .mainimg .m2png_s { position: absolute; top: 50px; left: 50px; z-index: 2; display: none} #page4 .info_k .mainimg .m2png_s img { position: absolute; top: 0; left: 0; visibility: hidden;} #page4 .info_k .mainimg .m2png_b { position: absolute; top: 50px; left: 50px; z-index: 3; display: none} #page4 .info_k .mainimg .m2png_b img { position: absolute; top: 0; left: 0; visibility: hidden;} #page4 .info_k .mainimg .m3 { position: absolute; top: -10px; right: -42px; transform-origin: right bottom; z-index: 3;} #page4 .info_k .mainimg .m3.ani { -webkit-animation: page4_002 3s ease forwards;} #page4 .info_k .mainimg .m4 { position: absolute; top: -62px; left: 256px; display: none; z-index: 3;} #page4 .info_k .txtcont { margin-top: 60px; color: #000000; font-size: 20px; text-align: left; position: relative; line-height: 35px; font-weight: normal; transform-origin: top center; padding: 0 40px; margin-bottom: 80px; display: block;} #page4 .info_k .txtcont2 { margin-top: -28px; color: #000000; font-size: 22px; text-align: center; position: relative; line-height: 35px; font-weight: normal; transform-origin: top center; margin-bottom: 10px; display: none;} #page4 .info_k .txtcont2 .img { margin-bottom: 8px;} #page4 .info_k .txtcont2 .p2 { color: #E80018; font-weight: bold; margin-top: 0;} #page4 .info_k .btns { position: absolute; transform-origin: top center; left: 0; top: 908px; width: 100%; text-align: center;} #page4 .info_k .btns img { display: inline-block; margin: 0 20px;} #page5 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 60; display: none;} #page5 .info_k { height: 950px; width: 100%; left: 0; z-index: 2; } #page5 .info_k .video_k { position: relative; margin-top: 162px; background: #FFF; border: #EA0017 4px solid; border-radius: 10px; width: 610px; height: 388px; left: 16px;} #page5 .info_k .video_k .preview { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} #page5 .info_k .video_k .playbut { position: absolute; z-index: 2;} #page5 .info_k .video_k .txt1 { position: absolute; top: 364px; left: -4px; z-index: 2; width: 610px;} #page5 .info_k .video_k .txt2 { margin-top: -450px;} #page5 .info_k .btns { margin: 300px auto 0; position: relative; transform-origin: top center; text-align: center;} #page5 .info_k .btns img { display: inline-block; margin: 0 20px;} #startplaykuang { position: relative; z-index: 1; width: 602px; height: 380px; border-radius: 6px; overflow: hidden; background: #000;} #startplaykuang video { width: 100%; height: 100%; background: #000;} #share_k { width: 100%; height: 100%; position: fixed; overflow: hidden; z-index: 1300; display: none; top: 0; background: rgba(178,197,220,0.7);} #share_k .jiantou { margin-top: 60px; } #share_k .jiantou .img1 { -webkit-animation: sharejiantouani 0.5s ease infinite; -webkit-transform-origin: 100% 100%; } #share_k .info1 { margin-top: 10px; } .pageview { text-align: center; font-size: 80px; line-height: 140px; padding-top: 200px;} /*加载进度*/ #loadtip { background: rgba(0,0,0,0.5); position: fixed; z-index: 1000; top: 0; bottom: 0; width: 100%; height: 100%; display: none;} #loadtip>div { display: none;} #loadtip span { line-height: 40px; position: absolute; top: 70%; border-radius: 30px; background: rgba(96,1,1,0.6); color: #F6E887; font-size: 24px; text-align: center; padding: 10px 8%; white-space: nowrap; max-width: 76%;} #loadtip.loading { background: transparent;} #loadtip.loading>div { background: rgba(0,0,0,0.8); border-radius: 10px; display: block; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;} #loadtip.loading>div>.la-line-spin-clockwise-fade { width: 80px; height: 80px; margin: 10px auto;} #loadtip.loading>div>.la-line-spin-clockwise-fade>div {width: 4px; height: 20px; margin-top: -10px; margin-left: -2px;} #loadtip.loading>span { display: none;} #loadtip.loadingtxt>div { height: 140px; width: auto;} #loadtip.loadingtxt>div p { line-height: 40px; text-align: center; height: 40px; width: 100%; color: #FFF; padding: 0 20px;} /*针对小屏调整*/ @media screen and (min-height: 900px) and (max-height:980px){ } @media screen and (min-height: 981px) and (max-height:1100px){ }