html { -ms-touch-action: none; } body, div, h1, h3, h4, p, ul, li { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; border: none; outline: none; } img { display: block; border:none; } body { width: 100%; *cursor: default; overflow: hidden; font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial; } #pageContain { overflow: hidden; } .page { box-shadow: 1px 1px 4px 0 #000; display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain,.slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important; } #navBar { *padding-left: 80px; z-index: 3; position: absolute; font-size: 0px; line-height: 0; bottom: 60px; text-align: center; width: 400px; left: 50%; margin-left: -200px; } #navBar .active { background: #e74800; } #navBar li { background: transparent; display: inline-block; font-size: 0px; margin: 0 10px; *float: left; *zoom:1; cursor: pointer; transition: all .7s ease; line-height: 8px; text-align: center; width: 55px; height: 8px; background: #fff; } #prev,#next { z-index: 4; text-align: center; line-height: 40px; position: absolute; width: 40px; height: 40px; top: 50%; cursor:pointer; margin-top: -20px; } #prev { left: 0 } #next { right: 0 } .nav { z-index: 5; position: fixed; _position:absolute; box-shadow: 0 2px 10px 0px #000; background: #fff; top: 0; left: 0; width: 100%; height: 70px; line-height: 70px; } .logo { width: 51px; height: 51px; vertical-align: top; margin: 9px 0 0 20px; transition:all .4s ease; } .logo:hover { transform:rotate(5deg) scale(1.05); } .nav a { line-height: 70px; transition:all .4s ease; color: #333; } .nav a:hover { text-shadow:1px 1px 3px #000; } .nav h1 { line-height: 70px; float: left; } .nav span { position: absolute; left: 80px; top: 0; } .nav h1 p { display: none; } .nav li { display: inline; float: right; margin: 0 22px; } .title,.titleEng { -webkit-animation:dragTop .7s ease-in-out both; -moz-animation:dragTop .7s ease-in-out both; -ms-animation:dragTop .7s ease-in-out both; animation:dragTop .7s ease-in-out both; position: absolute; text-align: center; color: #fff; top: 13%; left: 50%; } .title { -webkit-animation-delay: .8s; -moz-animation-delay:.8s; -ms-animation-delay:.8s; animation-delay:.8s; width: 500px; line-height: 60px; height: 60px; font-weight: normal; letter-spacing: 8px; font-size: 40px; margin-left: -250px; } .titleEng { -webkit-animation-delay: 1.2s; -moz-animation-delay:1.2s; -ms-animation-delay:1.2s; animation-delay:1.2s; width: 400px; height: 50px; line-height: 50px; font-size: 24px; margin-left: -200px; margin-top: 50px; } .page3 .title,.page3 .titleEng { top: 25%; color: #333; } .page1 p { font-size: 24px; color: #fff; text-align: center; position: absolute; bottom: 180px; width: 100%; -webkit-animation:scaleIn .6s ease 2s both; -moz-animation:scaleIn .6s ease 2s both; -ms-animation:scaleIn .6s ease 2s both; animation:scaleIn .6s ease 2s both; } .page1-box,.page2-box,.page3-box,.page4-box { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-animation:scaleAll .7s ease-in-out 1.6s both; -moz-animation:scaleAll .7s ease-in-out 1.6s both; -ms-animation:scaleAll .7s ease-in-out 1.6s both; animation:scaleAll .7s ease-in-out 1.6s both; } .page1-box { margin-left: -182px; margin-top: -150px; width: 365px; height: 347px; } .page2-box { margin-left: -366px; margin-top: -151px; width: 733px; height: 302px; } .page3-box { margin-left: -150px; width: 299px; height: 203px; margin-top: -40px; } .page4-box { width: 398px; height: 322px; background-image: url("/wwwjxsyczjcom/media/images/a6.png"); background-size: 100% 100%; margin-left: -199px; margin-top: -120px; } .page4-box img{ float: right; -webkit-animation:scaleIn .6s ease 2.4s both; -moz-animation:scaleIn .6s ease 2.4s both; -ms-animation:scaleIn .6s ease 2.4s both; animation:scaleIn .6s ease 2.4s both; } .scTop,.scBottom { position: absolute; left: 0; background: #2f2f2f url("/wwwjxsyczjcom/media/images/a15.png") repeat-x 0 0; width: 100%; height: 82px; } .scTop { top: 70px; -webkit-animation: bgL 20s linear 0s infinite alternate both; -moz-animation:bgL 20s linear 0s infinite alternate both; -ms-animation:bgL 20s linear 0s infinite alternate both; animation:bgL 20s linear 0s infinite alternate both; } .scBottom { bottom: 70px; -webkit-animation: bgR 20s linear 0s infinite alternate both; -moz-animation:bgR 20s linear 0s infinite alternate both; -ms-animation:bgR 20s linear 0s infinite alternate both; animation:bgR 20s linear 0s infinite alternate both; } .section1 .contain { display: block !important; } @media screen and (max-width: 680px) { .nav ul { display: none; } .nav span { font-size: 22px; } .page1 p { font-size: 14px; } #next,#prev { display: none; } .page1-box { margin-left: -91px; margin-top: -90px; width: 182px; height: 173px; } .page2-box { margin-left: -160px; margin-top: -70px; width: 320px; height: 140px; } .page3-box { margin-left: -60px; margin-top: -50px; width: 160px; height: 100px; } .page4-box { margin-left: -91px; margin-top: -90px; width: 182px; height: 173px; } .title { font-size: 30px; letter-spacing: 2px; } .titleEng { font-size: 18px; } } @keyframes dragTop { 0% { opacity:0; transform:translateY(-70px) } 60% { opacity:1; transform:translateY(20px) } 90% { transform:translateY(-5px) } 97% { transform:translateY(-1px) } 100% { transform:translateY(0px) } } @-webkit-keyframes dragTop { 0% { opacity:0; -webkit-transform:translateY(-70px) } 60% { opacity:1; -webkit-transform:translateY(20px) } 90% { -webkit-transform:translateY(-5px) } 97% { -webkit-transform:translateY(-1px) } 100% { -webkit-transform:translateY(0px) } } @-moz-keyframes dragTop { 0% { opacity:0; -moz-transform:translateY(-70px) } 60% { opacity:1; -moz-transform:translateY(20px) } 90% { -moz-transform:translateY(-5px) } 97% { -moz-transform:translateY(-1px) } 100% { -moz-transform:translateY(0px) } } @-ms-keyframes dragTop { 0% { opacity:0; -ms-transform:translateY(-70px) } 60% { opacity:1; -ms-transform:translateY(20px) } 90% { -ms-transform:translateY(-5px) } 97% { -ms-transform:translateY(-1px) } 100% { -ms-transform:translateY(0px) } } @keyframes scaleAll { 0% { opacity: 0; transform: scale(0) rotate(30deg); } 30% { opacity: 1; } 100% { transform: scale(1) rotate(0); } } @-webkit-keyframes scaleAll { 0% { opacity: 0; -webkit-transform: scale(0) rotate(30deg); } 30% { opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes scaleAll { 0% { opacity: 0; -moz-transform: scale(0) rotate(30deg); } 30% { opacity: 1; } 100% { -moz-transform: scale(1) rotate(0); } } @-ms-keyframes scaleAll { 0% { opacity: 0; -ms-transform: scale(0) rotate(30deg); } 100% { opacity: 1; -ms-transform: scale(1) rotate(0); } } @keyframes scaleIn { 0% { opacity: 0; transform: scale(3); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes scaleIn { 0% { opacity: 0; transform: scale(3); } 100% { opacity: 1; transform: scale(1); } } @-ms-keyframes scaleIn { 0% { opacity: 0; -ms-transform: scale(3); } 100% { opacity: 1; -ms-transform: scale(1); } } @keyframes bgL { 0% { background-position: 0 0; } 100% { background-position: 2000px 0; } } @-webkit-keyframes bgL { 0% { background-position: 0 0; } 100% { background-position: 2000px 0; } } @-moz-keyframes bgL { 0% { background-position: 0 0; } 100% { background-position: 2000px 0; } } @-ms-keyframes bgL { 0% { background-position: 0 0; } 100% { background-position: 2000px 0; } } @keyframes bgR { 0% { background-position: 2000px 0; } 100% { background-position: 0 0; } } @-webkit-keyframes bgR { 0% { background-position: 2000px 0; } 100% { background-position: 0 0; } } @-moz-keyframes bgR { 0% { background-position: 2000px 0; } 100% { background-position: 0 0; } } @-ms-keyframes bgR { 0% { background-position: 2000px 0; } 100% { background-position: 0 0; } }