html,
 body {
     position: relative;
     height: 100%;
 }
 
 body {
     background: #fff;
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     font-size: 14px;
     color: #000;
     margin: 0;
     padding: 0;
 }
 
 a {
     color: #999;
     text-decoration: none;
 }
 
 .swiper-container {
     width: 100%;
     height: 100%;
     margin-left: auto;
     margin-right: auto;
 }
 
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
 }
 
 body section {
     width: 100%;
     /*background-color: #fff;*/
 }
 
 .jz-yellow {
     color: #fea000;
 }
 
 .contain-top {
     width: 1000px;
     margin: 0 auto;
     padding: 10px 15px;
     background-color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .contain-top img {
     height: 60px;
 }
 
 .contain-top p a {
     color: #000;
     display: inline-block;
     padding: 5px 20px;
 }
 
 .contain-top p a.active {
     color: #ef3f28;
 }
 
 .contain-banner div {
     height: 400px;
     width: 100%;
 }
 
 .contain-sever {
     height: 500px;
     width: 1000px;
     margin: 0 auto;
     background-color: #fff;
 }
 
 .contain-sever .contain-server-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .contain-sever .server-left .server-info {
     text-align: right;
 }
 
 .contain-sever .server-right .server-info {
     text-align: left;
 }
 
 .contain-sever .server-info {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 25px 0;
     width: 300px;
 }
 
 .contain-sever .server-info h4 {
     color: #fea000;
     margin: 5px 0;
 }
 
 .contain-sever .server-info span {
     color: #999;
     display: inline-block;
     width: 210px;
 }
 
 .contain-sever .server-info img {
     margin: 20px;
 }
 
 .contain-sever .server-center {
     text-align: center;
 }
 
 .contain-sever .server-center h4 {
     color: #fea000;
     margin: 5px 0;
 }
 
 .contain-sever .server-center span {
     color: #999;
     display: inline-block;
     width: 210px;
 }
 
 .contain-sever .server-center img {
     width: 64px;
     height: 64px;
     margin: 20px;
 }
 
 .contain-creed {
     height: 500px;
     width: 1000px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .contain-creed>div {
     color: #999;
     width: 230px;
     background-color: #fff;
     border-radius: 5px;
     margin: 0 15px;
     padding: 25px 35px;
 }
 
 .contain-creed .creed-card-one {
     color: #fea000;
 }
 
 .contain-creed .creed-card div {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }
 
 .contain-creed .creed-card h4 span:first-child {
     color: #fea000;
 }
 
 .contain-creed .creed-card div>span {
     background-color: #fea000;
     color: #fff;
     border-radius: 50%;
     font-size: 25px;
     padding: 1px 8px;
     margin-right: 15px;
 }
 
 .contain-introduce {
     height: 500px;
     width: 1000px;
     margin: 0 auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 
 .contain-introduce .introduce-list {
     background-color: #fff7ea;
     color: #fea000;
     padding: 10px 20px;
 }
 
 .contain-introduce .introduce-list h4 {
     margin: 15px 0;
     font-size: 18px;
 }
 
 .contain-introduce .introduce-list p {
     margin: 0;
     padding: 15px 0;
     border-top: 1px solid #eee;
 }
 
 .contain-introduce .introduce-list p span {
     color: #fff;
     margin-left: 10px;
     padding: 1px 10px;
     border-radius: 90px;
     background-color: #fea000;
 }
 
 .contain-method {
     height: 500px;
     width: 1000px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .contain-desc.two {
     width: 270px;
     background-image: url("../images/2.png");
     background-repeat: no-repeat;
     background-size: contain;
 }
 
 .contain-desc.three {
     width: 380px;
     background-image: url("../images/3.png");
     background-repeat: no-repeat;
     background-size: contain;
 }
 
 .contain-desc h4 {
     font-size: 20px;
     color: #fea000;
 }
 
 .contain-desc p {
     color: #999;
 }
 
 .contain-method .method-img {
     text-align: right;
 }
 
 .contain-method img {
     height: 160px;
     margin: 5px;
     border-radius: 5px;
 }
 
 .contain-info {
     width: 800px;
     padding: 30px 0;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
 }
 
 .contain-info h4 {
     color: #fea000;
 }
 
 .contain-bottom {
     height: 100px;
     width: 800px;
     padding: 15px 0;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .contain-bottom p {
     text-align: center;
     color: #999;
 }
 
 .app-download {
     height: 500px;
     width: 800px;
     padding: 15px 0;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .app-download h4 {
     font-size: 18px;
     color: #fea000;
 }
 
 .app-download>div {
     width: 320px;
     color: #999;
 }
 
 .app-download .right {
     text-align: right;
 }
 
 .app-download.phone h4 {
     font-size: 30px;
     margin: 0;
 }
 
 .app-download.phone span {
     font-size: 16px;
     color: #fea000;
 }
 
 .app-download.phone p {
     font-size: 14px;
 }
 
 .app-download.phone img {
     height: 450px;
 }
 
 .jz-title {
     text-align: center;
 }
 
 .jz-title h4 {
     margin: 0;
     color: #666;
     font-size: 18px;
 }
 
 .jz-title p {
     margin: 0;
     color: #999;
     font-size: 14px;
 }
 
 .jz-platform {
     height: 500px;
     width: 800px;
     padding: 15px 0;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
 }
 
 .jz-platform .platform-card {
     color: #999;
     background-color: #fff;
     text-align: center;
     margin-bottom: 20px;
     width: 28%;
     height: 250px;
     border: 1px solid #eee;
 }
 
 .jz-platform .platform-card div {
     padding: 20px 15px;
     background-color: #fea000;
 }
 
 .jz-platform .platform-card div img {
     width: 80px;
 }
 
 .jz-platform .platform-card p {
     padding: 0 15px;
     font-size: 14px;
     text-align: left;
 }
 
 .paper {
     width: 200px;
     height: 50px;
     background-color: #fff;
     margin: auto;
     position: relative;
 }
 
 .paper:before,
 .paper:after {
     content: '';
     width: 90px;
     height: 40px;
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
     position: absolute;
     z-index: -1;
 }
 
 .paper:before {
     transform: rotate(-5deg);
     transform-origin: top right;
     left: 10px;
 }
 
 .paper:after {
     transform-origin: top left;
     right: 10px;
 }
 
 .paper:before,
 .paper:after {
     animation: shadow ease 2s infinite alternate;
 }
 
 @keyframes shadow {
     from {
         box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
     }
     to {
         box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
     }
 }
 
 .box-shadow-1 {
     -webkit-box-shadow: 3px 3px 3px;
     -moz-box-shadow: 3px 3px 3px;
     box-shadow: 3px 3px 3px;
 }
 
 .box-shadow-2 {
     -webkit-box-shadow: 0 0 10px #000;
     -moz-box-shadow: 0 0 10px #000;
     box-shadow: 0 0 10px #000;
 }
 
 .box-shadow-3 {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
     box-shadow: 0 0 10px rgba(0, 0, 0, .5);
 }
 
 .box-shadow-4 {
     -webkit-box-shadow: 0 0 10px 15px #0CC;
     -moz-box-shadow: 0 0 10px 15px #0CC;
     box-shadow: 0 0 10px 15px #0CC;
 }
 
 .box-shadow-5 {
     -webkit-box-shadow: inset 0 0 10px #0CC;
     -moz-box-shadow: inset 0 0 10px #0CC;
     box-shadow: inset 0 0 10px #0CC;
 }
 
 .box-shadow-6 {
     box-shadow: -10px 0 10px red, /*左边阴影*/
     10px 0 10px yellow, /*右边阴影*/
     0 -10px 10px blue, /*顶部阴影*/
     0 10px 10px green;
     /*底边阴影*/
 }
 
 .box-shadow-7 {
     box-shadow: 0 0 10px 5px black, 0 0 10px 20px red;
 }
 
 .box-shadow-8 {
     box-shadow: 0 0 10px 20px red, 0 0 10px 5px black;
 }
 
 .box-shadow-9 {
     box-shadow: 0 0 0 1px red;
 }
 
 .background-con {
     width: 100%;
     height: 400px;
     background-position: center 0;
     background-repeat: no-repeat;
     /*background-attachment: fixed;*/
     background-size: auto;
     -webkit-background-size: auto;
     -o-background-size: auto;
     zoom: 1;
 }