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;
}
}