html, body { margin: 0; padding: 0; } #superContainer { height: 100%; position: relative; } a{text-decoration: none;} .section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .slide { float: left; } .slide, .slidesContainer { height: 100%; display: block; } .slides { height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .section.table, .slide.table { display: table; width: 100%; } .tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .slidesContainer { float: left; position: relative; } .controlArrow { position: absolute; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; } .controlArrow.prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent; } .controlArrow.next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff; } .scrollable { overflow: scroll; } .easing { -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #fullPage-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; } #fullPage-nav.right { right: 17px; } #fullPage-nav.left { left: 17px; } .fullPage-slidesNav { position: absolute; z-index: 4; left: 50%; opacity: 1; } .fullPage-slidesNav.bottom { bottom: 17px; } .fullPage-slidesNav.top { top: 17px; } #fullPage-nav ul, .fullPage-slidesNav ul { margin: 0; padding: 0; } #fullPage-nav li, .fullPage-slidesNav li { display: block; width: 14px; height: 13px; margin: 7px; position: relative; } .fullPage-slidesNav li { display: inline-block; } #fullPage-nav li a, .fullPage-slidesNav li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #fullPage-nav li .active span, .fullPage-slidesNav .active span { background: #333; } #fullPage-nav span, .fullPage-slidesNav span { top: 2px; left: 2px; width: 8px; height: 8px; border: 1px solid #000; background: rgba(0, 0, 0, 0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 1; } .fullPage-tooltip { position: absolute; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; top: -2px; } .fullPage-tooltip.right { right: 20px; } .fullPage-tooltip.left { left: 20px; } #menu { position: fixed; right: 20px; top: 40%; z-index: 10; list-style-type: none; } #menu li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;} #menu a { display: block; height: 27px; padding-right: 30px; line-height: 27px; background: url("/www.kxtwz.com/pic/003/016/921/00301692100_df5b42e0.png") right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; text-decoration: none; overflow: hidden;} #menu span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;} #menu a:hover span { text-indent: 0;} #menu .active a { background-position: right 0;} .section { position: relative; overflow: hidden;} .section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .middle { position: relative; width: 1000px; height: 100%; margin: 0 auto;} .section1 { background: url("/www.kxtwz.com/pic/003/016/919/00301691966_dddad6bf.jpg") 100% 100% no-repeat; } .wave{position: absolute; left: 0%; bottom: 14%;; width: 1920px; height: 104px;background-image: url("/www.kxtwz.com/pic/003/016/922/00301692283_75fdb48c.png");z-index: 100;} .roat{position: absolute; left: 18%; bottom: 14%; width: 1046px; height: 389px;background-image: url("/www.kxtwz.com/pic/003/016/922/00301692241_3a9db96a.png");animation:10s linear infinite worksMove; -webkit-animation:10s linear infinite worksMove;} .subTitle{position: absolute; left: 50%; top: 35%;; width: 275px; height: 510px;margin: -300px 0 0 -150px;background-image: url("/www.kxtwz.com/pic/003/016/922/00301692279_62bfe290.png");animation:zoomIn 1s ease-in forwards;-moz-animation:zoomIn 1s ease-in forwards;-webkit-animation:zoomIn 1s ease-in forwards;} .left1 { position: absolute; left: -200%; top: 50%; width: 142px; height: 308px; margin: -296px 0 0 100px; background-image: url("/www.kxtwz.com/pic/003/016/921/00301692150_04b309d0.png");} .right1 { position: absolute; left: 200%; top: 50%; width: 123px; height: 368px; margin: -350px 0 0 280px; background-image: url("/www.kxtwz.com/pic/003/016/922/00301692217_2a28da00.png");} .section2 { background: url("/www.kxtwz.com/pic/003/016/919/00301691969_ac28fad8.jpg") 100% 100% no-repeat; } .logo2 { position: absolute; left: 50%; top: 30px; z-index: 20; width: 491px; height: 96px; margin-left: -210px; text-indent: -9999px; background: url("/www.kxtwz.com/pic/003/016/921/00301692199_af53dfcb.png") 0 0; overflow: hidden;} .bg2-3 {transition: all 1.5s;background:url("/www.kxtwz.com/pic/003/016/920/00301692032_8bd26177.png") 50% -300% no-repeat;} .left2 { position: absolute; left: -200%; top: 50%; width: 430px; height: 550px; margin: -173px 0 0 20px;} .left2 .video img{width: 430px;} .left2 ul{margin-left: -40px;} .left2 ul li{font-size: 12px;line-height: 28px;list-style: none;} .left2 ul a{color: #000;} .left2 ul a:hover{text-decoration: underline;} .right2 { position: absolute; left: 200%; top: 50%; width: 380px; height: 518px; margin-top: -220px;margin-left: 100px;} .section3 { background: url("/www.kxtwz.com/pic/003/016/919/00301691971_be536bcf.jpg") 100% 100% no-repeat; } .logo3 { position: absolute; left: 50%; top: 30px; width: 536px; height: 96px; margin-left: -220px; text-indent: -9999px; background: url("/www.kxtwz.com/pic/003/016/921/00301692199_af53dfcb.png") 0 -105px; overflow: hidden;} .bg3-3 {transition: all 1.5s;background:url("/www.kxtwz.com/pic/003/016/920/00301692036_b163cf49.png") 50% -300% no-repeat;} .left3 { position: absolute; left: -200%; top: 50%; width: 602px; margin: -220px 0 0 10px;} .left3 a img,.right3 a img{padding-top: 15px;} .right3 { position: absolute; left: 200%; top: 50%; width: 519px; margin: -220px 0px 0 10px;} .section4 { background: url("/www.kxtwz.com/pic/003/016/919/00301691974_06c59f13.jpg") 100% 100% no-repeat; } .logo4 { position: absolute; left: 50%; top: 30px; width: 482px; height: 94px; margin-left: -210px; text-indent: -9999px; background: url("/www.kxtwz.com/pic/003/016/921/00301692199_af53dfcb.png") 0 -208px; overflow: hidden;} .bg4-3{transition: all 1.5s;background:url("/www.kxtwz.com/pic/003/016/920/00301692049_764ddefe.png") 50% -300% no-repeat;} .left4 { position: absolute; left: -200%; top: 50%; width: 205px; height: 495px; margin: -210px 0 0 0px; background: url("/www.kxtwz.com/pic/003/016/921/00301692151_82e55fc3.png") 50% 50% no-repeat;} .left4-1 { position: absolute; left: -57px; top: 50%; width: 205px; height: 495px; margin: -210px 0 0 258px; background: url("/www.kxtwz.com/pic/003/016/921/00301692152_fa2720bc.png") 50% 50% no-repeat; opacity: 0;} .right4 { position: absolute; left: 200%; top: 50%; width: 205px; height: 495px; margin: -210px 0 0 280px; background: url("/www.kxtwz.com/pic/003/016/922/00301692221_767c4edd.png") 50% 50% no-repeat;} .right4-1{position: absolute; left: 380px; top: 50%; width: 205px; height: 495px; margin: -210px 0 0 236px; background: url("/www.kxtwz.com/pic/003/016/922/00301692223_30a696e0.png") 50% 50% no-repeat; opacity: 0;} .section5 {background: url("/www.kxtwz.com/pic/003/016/919/00301691976_fc04eb46.jpg") 100% 100% no-repeat; } .logo5 { position: absolute; left: 50%; top: 30px; width: 493px; height: 96px; margin-left: -210px; text-indent: -9999px; background: url("/www.kxtwz.com/pic/003/016/921/00301692199_af53dfcb.png") 0 -308px; overflow: hidden;} .bg4-4{transition: all 1.5s;background:url("/www.kxtwz.com/pic/003/016/920/00301692054_5b48122d.png") 50% -300% no-repeat;} .left5 { position: absolute; left: -200%; top: 50%; width: 400px; height: 505px; margin: -220px 0 0 20px;} .right5 { position: absolute; left: 200%; top: 50%; width: 400px; height: 505px; margin-top: -220px;margin-left: 90px;} .middle h5{font-size: 14px;color: #8e0798;margin: 15px 0;} .middle p{font-size: 12px;line-height: 26px;text-indent: 2em;} .section6 { background: url("/www.kxtwz.com/pic/003/016/919/00301691978_87ff94fb.jpg") 100% 100% no-repeat; } .logo6 { position: absolute; left: 50%; top: 30px; width: 491px; height: 90px; margin-left: -210px; text-indent: -9999px; background: url("/www.kxtwz.com/pic/003/016/921/00301692199_af53dfcb.png") 0 -411px; overflow: hidden;} .bg4-5{transition: all 1.5s;background:url("/www.kxtwz.com/pic/003/016/920/00301692082_cbf9e334.png") 50% -300% no-repeat;} .left6 { position: absolute; left: -200%; top: 50%;margin: -220px 0 0 10px;width: 290px;} .right6 { position: absolute; left: 200%; top: 50%;margin-left: -90px;width: 580px;margin-top: -120px;} /* 动画 */ .left { transition: all 1.5s;} .right { transition: all 1.5s;} .active .left, .ltie10 .left { left: 0;} .active .right, .ltie10 .right { left: 50%;} .godown span { -webkit-animation: fade 3s infinite linear; animation: fade 3s infinite linear;} @-webkit-keyframes fade { 0% { opacity: 1;} 50% { opacity: 0.3;} 100% { opacity: 1;} } @keyframes fade { 0% { opacity: 1;} 50% { opacity: 0.3;} 100% { opacity: 1;} } /* 第一屏动??*/ .active .http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png, .ltie10 .http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png { opacity: 1; -webkit-animation: http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png 3s; animation: http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png 3s;} @-webkit-keyframes http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png { 0% { opacity: 0;} 50% { opacity: 0;} 100% { opacity: 1;} } @keyframes http://www.kxtwz.com/pic/003/016/920/00301692026_a4cb25e2.png { 0% { opacity: 0;} 50% { opacity: 0;} 100% { opacity: 1;} } /* 第二屏动??*/ .active .bg2-3,.active .bg3-3,.active .bg4-3,.active .bg4-4,.active .bg4-5{ background-position: 50% 18%; transition-delay: 0.5s;} .active .left2-1, .ltie10 .left2-1 { opacity: 1; transition-delay: 1.5s;} .active .left2-2, .ltie10 .left2-2 { left: 38px; top: 0; opacity: 1; transition: all 1s ease 2.5s;} /* 第四屏动??*/ .active .left4-1{ left: 0; opacity: 1; transition: all 1s ease 1.5s;} .active .right4-1{ left: 280px; opacity: 1; transition: all 1s ease 1.5s;} /* 第五屏动??*/ .link { position: absolute; height: 52px; text-indent: -9999px; overflow: hidden;} .a1-1 { width: 202px; left: 45px; bottom: 63px;} .a2-1 { width: 268px; left: 20px; bottom: 237px;} .a2-2 { width: 270px; left: 78px; bottom: 158px;} .a3-1 { width: 268px; left: 20px; bottom: 10px;} .a3-2 { width: 270px; right: 22px; bottom: 10px;} .a4-1 { width: 268px; left: 20px; bottom: 10px;} .a4-2 { width: 270px; right: 18px; bottom: 10px;} .a5-1 { width: 268px; left: 20px; bottom: 10px;} .a5-2 { width: 270px; right: 20px; bottom: 10px;} @keyframes worksMove{ 0%{} 49%{transform:rotateY(0deg);} 50%{ left:450px; transform:rotateY(0deg);} 100%{ transform:rotateY(0deg);} } @-webkit-keyframes worksMove{ 0%{} 49%{-webkit-transform:rotateY(0deg);} 50%{ left:450px; -webkit-transform:rotateY(0deg);} 100%{ -webkit-transform:rotateY(0deg);} }