html,body,p,h3,h4{
  margin: 0;
  padding: 0;
  font-family: PingFangSC-Regular;
}
ul,li{
  margin: 0;
  padding: 0;
  list-style:none;
}
.container {
  margin-top:70px;
}
.multimedia{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.multimedia .banner{
  width: 100%;
  min-width: 1200px;
  height:500px;
  background: linear-gradient(to right, #01081e , #031657);
}
.multimedia .bannerCon{
  width: 1200px;
  margin: 0 auto;
  height:500px;
  display: flex;
  background: url("../mediaSource/banner_bg.png") #0d3279 no-repeat;
}
.multimedia .bannerCon .txt{
  padding-top:136px;
  padding-left:90px;
}
.multimedia .bannerCon .txt h3{
  font-size: 44px;
  color:#fff;
  margin-bottom: 22px;
}
.multimedia .bannerCon .txt p{
  font-size: 20px;
  color:#fff;
}
.multimedia .bannerCon .txt button{
  margin-top:60px;
  font-size: 20px;
  color:#09a493;
  border:1px solid #09a493;
  width:160px;
  height: 46px;
  border-radius: 23px;
  background:#020a28;
  cursor: pointer;
  outline: none;
}
@media screen and (max-width: 1200px){
  
}
.multimedia .bannerCon .txt button:hover{
  background:url('../internationalityImg/btnHover.png') #020a28;
  border:none;
  color:#03293e;
}
.multimedia .bannerCon .img{
  position: relative;
}
.multimedia .bannerCon .img img{
  position: absolute;
  top:85px;
  left:408px;
  -webkit-animation:move 2.5s ease-in-out infinite alternate;
  -o-animation:move 2.5s ease-in-out infinite alternate;
  -moz-animation:move 2.5s ease-in-out infinite alternate;
  animation: move 2.5s ease-in-out infinite alternate;
}
@-webkit-keyframes move{
  from{
    top:85px;
  }
  to{
    top: 30px;
  }
}
@-o-keyframes move{
  from{
    top:85px;
  }
  to{
    top: 30px;
  }
}
@-moz-keyframes move{
  from{
    top:85px;
  }
  to{
    top: 30px;
  }
}
@keyframes move{
  from{
    top:85px;
  }
  to{
    top: 30px;
  }
}
.multimedia .intro{
  position: relative;
}
.multimedia .intro .info{
  width: 500px;
  margin: 0 auto;
  padding:76px 0;
  position: relative;
  z-index: 100;
}
.multimedia .intro .info h4{
  font-size: 30px;
  color: #333333;
  text-align: center;
}
.multimedia .intro .info i{
  border:1px solid #f4f4f4;
  display: inline-block;
  width:100%;
}
.multimedia .intro .info p{
  margin-top:18px;
  font-size: 16px;
  color: #000000;
  text-align: center;
}
.multimedia .adhibition{
  width:100%;
  min-width: 1200px;
  height:750px;
  background: url('../mediaSource/bg_application.png') no-repeat; 
  background-size: 100% 750px;
  color:#fff;  
}
.multimedia .adhibition h4{
  font-size: 30px;
  width: 1200px;
  text-align: center;
  margin: 0 auto;
  padding-top:73px;
  padding-bottom: 60px;
}
.adhibition .content{
  display: flex;
  width:1200px;
  margin:auto;
}
.adhibition .iphone{
  width:375px;
  height: 577px;
  background: url('../mediaSource/iphone.png') no-repeat;
  background-size:375px  577px; 
  margin-left:100px;
}
.adhibition .iphone .video{
  width:320px;
  margin-left:28px;
  margin-top:40px;
  
}
.adhibition .iphone .video video{
  outline: none;
}
.adhibition .iphone .presentation{
  margin:28px;
  font-size: 14px;
}
.adhibition .list ul{
  padding-top:40px;
  width:520px;
  margin:0 15px;
  padding-bottom:22px; 
  margin-left:105px;
}
.adhibition .list ul li{
  width:520px;
  height: 116px;
  background: rgba(255,255,255,.1);
  text-align: center;
  margin:0 10px 16px 0;
  padding-top:22px;
  padding-left:20px;
  padding-right:20px;
  border-radius: 3px;
  display: flex;
  color:#fff;
}
.adhibition .list ul li:hover{
  cursor: pointer;
}
.adhibition .list ul li:nth-child(1)  p:nth-child(3){
  color:#fff;
}
.adhibition .list ul li i{
  min-width:22px;
  height: 18px;
  margin-top:3px;
  margin-right: 10px;
}
.adhibition .list ul li:nth-child(1){
  background: #1EC5C0;
}
.adhibition .list ul li:nth-child(1) i{
  background: url(../mediaSource/application_icon_one.png) no-repeat;
  background-size: cover;
}
.adhibition .list ul li:nth-child(2) i{
  background: url(../mediaSource/application_icon_two.png) no-repeat;
  background-size: cover;
}
.adhibition .list ul li:nth-child(3) i{
  background: url(../mediaSource/application_icon_three.png) no-repeat;
  background-size: cover;
}
.adhibition .list ul li div p:nth-child(1){
  font-size: 20px;
  color: #fff;
  height: 17px;
  line-height: 17px;
  text-align: left;
  margin-bottom:10px;
}
.adhibition .list ul li div p:nth-child(3){
  font-size: 14px;
  line-height: 17px;
  margin-top: 10px;
  color: #9d9ca1;
  text-align: left;
  line-height: 22px;
}
.multimedia .advantage{
  width: 1200px;
  height: 420px;
  margin: 0 auto;
}
.multimedia .advantage h4{
  font-size: 30px;
  width: 1200px;
  text-align: center;
  padding-top:73px;
  padding-bottom: 54px;
}
.multimedia .advantage ul{
  margin: 0 auto;
  width: 1200px;
  display:flex;
  justify-content: space-around;
}
.multimedia .advantage ul li{
  width:300px;
  font-size: 20px;
  overflow: hidden;
}
.multimedia .advantage ul li img{
  margin-left:85px;
}
.multimedia .advantage ul li p{
  width:240px;
  text-align: center;
  font-size: 18px;
  margin-top:20px;
  margin-bottom:12px;
}
.multimedia .advantage ul li span{
  width:100%;
  display:inline-block;
  text-align: center;
  font-size: 14px;
  color: #999999;
}
.multimedia .price{
  position: relative;
}
.multimedia .price .info{
  width: 500px;
  margin: 0 auto;
  padding:76px 0;
  text-align: center;
  position: relative;
  z-index: 100;
}
.multimedia .price h4{
  font-size: 30px;
  color: #333333;
  text-align: center;
}
.multimedia .price p{
  margin-top:26px;
  font-size: 16px;
  color: #000000;
  text-align: center;
  margin-bottom: 34px;
}
.multimedia .price button{
  font-size: 20px;
  color:#09a493;
  border:1px solid #09a493;
  width:160px;
  height: 46px;
  border-radius: 23px;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.multimedia .price button:hover{
  background:url('../internationalityImg/btnHover.png') #fff;
  border:none;
  color: #333333;
}
.multimedia .path{
  color:#fff;
  width: 100%;
  min-width: 1200px;
  height: 320px;
  background: url('../internationalityImg/bg_process.png') no-repeat;
  background-size: 100% 320px;
}
.multimedia .path div{
  width: 500px;
  margin: 0 auto;
  padding:76px 0;
  text-align: center;
}
.multimedia .path h4{
  font-size: 30px;
  text-align: center;
}
.multimedia .path p{
  margin-top:18px;
  font-size: 16px;
  text-align: center;
  margin-bottom: 34px;
}
.multimedia .path button{
  font-size: 20px;
  color:#09a493;
  border:1px solid #09a493;
  width:160px;
  height: 46px;
  border-radius: 23px;
  background: #25262e;
  cursor: pointer;
  outline: none;
}
.multimedia .path button:hover{
  background:url('../internationalityImg/btnHover.png') #25262e;
  border:none;
  color: #333333;
}
.multimedia .circle1{
  position: absolute;
  left:300px;
  top:10px;
  z-index: -1;
  width:322px;
  height: 321px;
  border-radius: 50%;
  background:url('../mediaSource/introduction_bg_one.png') no-repeat;
  -webkit-animation:circle1move 10s ease-in-out infinite alternate;
  -o-animation:circle1move 10s ease-in-out infinite alternate;
  -moz-animation:circle1move 10s ease-in-out infinite alternate;
  animation: circle1move 10s ease-in-out infinite alternate;
  -webkit-transition:all 0.1s ease-in;
  -o-transition:all 0.1s ease-in;
  -moz-transition:all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
@-webkit-keyframes circle1move{
  0%   {top:30px;left:300px;transform:rotate(0deg)}
  25%  {top:10px;left:450px;transform:rotate(30deg)}
  50%  {top:20px;left:300px;transform:rotate(180deg)}
  100% {top:10px;left:250px;transform:rotate(30deg)}
}
@-o-keyframes circle1move{
  0%   {top:30px;left:300px;transform:rotate(0deg)}
  25%  {top:10px;left:450px;transform:rotate(30deg)}
  50%  {top:20px;left:300px;transform:rotate(180deg)}
  100% {top:10px;left:250px;transform:rotate(30deg)}
}
@-moz-keyframes circle1move{
  0%   {top:30px;left:300px;transform:rotate(0deg)}
  25%  {top:10px;left:450px;transform:rotate(30deg)}
  50%  {top:20px;left:300px;transform:rotate(180deg)}
  100% {top:10px;left:250px;transform:rotate(30deg)}
}
@keyframes circle1move{
  0%   {top:30px;left:300px;transform:rotate(0deg)}
  25%  {top:10px;left:450px;transform:rotate(30deg)}
  50%  {top:20px;left:300px;transform:rotate(180deg)}
  100% {top:10px;left:250px;transform:rotate(30deg)}
}
.multimedia .circle2{
  position: absolute;
  left:900px;
  top:0px;
  z-index: -1;
  width:336px;
  height:312px;
  border-radius: 50%;
  background:url('../mediaSource/introduction_bg_two.png') no-repeat;
  -webkit-animation:circle2move 10s ease-in-out infinite alternate;
  -o-animation:circle2move 10s ease-in-out infinite alternate;
  -moz-animation:circle2move 10s ease-in-out infinite alternate;
  animation: circle2move 10s ease-in-out infinite alternate;
  -webkit-transition:all 0.1s ease-in;
  -o-transition:all 0.1s ease-in;
  -moz-transition:all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
@-webkit-keyframes circle2move{
  0%   {top:10px;left:900px;transform:rotate(30deg)}
  25%  {top:-40px;left:800px;transform:rotate(90deg)}
  50%  {top:10px;left:900px;transform:rotate(30deg)}
  100% {top:30px;left:700px;transform:rotate(90deg)}
}
@-o-keyframes circle2move{
  0%   {top:10px;left:900px;transform:rotate(30deg)}
  25%  {top:-40px;left:800px;transform:rotate(90deg)}
  50%  {top:10px;left:900px;transform:rotate(30deg)}
  100% {top:30px;left:700px;transform:rotate(90deg)}
}
@-moz-keyframes circle2move{
  0%   {top:10px;left:900px;transform:rotate(30deg)}
  25%  {top:-40px;left:800px;transform:rotate(90deg)}
  50%  {top:10px;left:900px;transform:rotate(30deg)}
  100% {top:30px;left:700px;transform:rotate(90deg)}
}
@keyframes circle2move{
  0%   {top:10px;left:900px;transform:rotate(30deg)}
  25%  {top:-40px;left:800px;transform:rotate(90deg)}
  50%  {top:10px;left:900px;transform:rotate(30deg)}
  100% {top:30px;left:700px;transform:rotate(90deg)}
}
.multimedia .circle3{
  position: absolute;
  left:1300px;
  top:30px;
  z-index: -1;
  width:375px;
  height:279px;
  border-radius: 50%;
  background:url('../mediaSource/introduction_bg_three.png') no-repeat;
  -webkit-animation:circle3move 10s ease-in-out infinite alternate;
  -o-animation:circle3move 10s ease-in-out infinite alternate;
  -moz-animation:circle3move 10s ease-in-out infinite alternate;
  animation: circle3move 10s ease-in-out infinite alternate;
  -webkit-transition:all 0.1s ease-in;
  -o-transition:all 0.1s ease-in;
  -moz-transition:all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
@-webkit-keyframes circle3move{
  0%   {top:20px;left:1300px;transform:rotate(30deg)}
  25%  {top:0px;left:1200px;transform:rotate(90deg)}
  50%  {top:40px;left:1100px;transform:rotate(180deg)}
  100% {top:-40px;left:1300px;transform:rotate(270deg)}
}
@-o-keyframes circle3move{
  0%   {top:20px;left:1300px;transform:rotate(30deg)}
  25%  {top:0px;left:1200px;transform:rotate(90deg)}
  50%  {top:40px;left:1100px;transform:rotate(180deg)}
  100% {top:-40px;left:1300px;transform:rotate(270deg)}
}
@-moz-keyframes circle3move{
  0%   {top:20px;left:1300px;transform:rotate(30deg)}
  25%  {top:0px;left:1200px;transform:rotate(90deg)}
  50%  {top:40px;left:1100px;transform:rotate(180deg)}
  100% {top:-40px;left:1300px;transform:rotate(270deg)}
}
@keyframes circle3move{
  0%   {top:20px;left:1300px;transform:rotate(30deg)}
  25%  {top:0px;left:1200px;transform:rotate(90deg)}
  50%  {top:40px;left:1100px;transform:rotate(180deg)}
  100% {top:-40px;left:1300px;transform:rotate(270deg)}
}
.multimedia .circle4{
  position: absolute;
  left:400px;
  top:-40px;
  z-index: -1;
  width:628px;
  height:618px;
  border-radius: 50%;
  background:url('../mediaSource/price_bg_one.png') no-repeat;
  -webkit-animation:circle4move 10s ease-in-out infinite alternate;
  -o-animation:circle4move 10s ease-in-out infinite alternate;
  -moz-animation:circle4move 10s ease-in-out infinite alternate;
  animation: circle4move 10s ease-in-out infinite alternate;
  -webkit-transition:all 0.1s ease-in;
  -o-transition:all 0.1s ease-in;
  -moz-transition:all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
@-webkit-keyframes circle4move{
  0%   {top:-40px;left:400px;transform:rotate(0deg)}
  25%  {top:-100px;left:150px;transform:rotate(30deg)}
  50%  {top:-150px;left:300px;transform:rotate(180deg)}
  100% {top:-80px;left:150px;transform:rotate(30deg)}
}
@-o-keyframes circle4move{
  0%   {top:-40px;left:400px;transform:rotate(0deg)}
  25%  {top:-100px;left:150px;transform:rotate(30deg)}
  50%  {top:-150px;left:300px;transform:rotate(180deg)}
  100% {top:-80px;left:150px;transform:rotate(30deg)}
}
@-moz-keyframes circle4move{
  0%   {top:-40px;left:400px;transform:rotate(0deg)}
  25%  {top:-100px;left:150px;transform:rotate(30deg)}
  50%  {top:-150px;left:300px;transform:rotate(180deg)}
  100% {top:-80px;left:150px;transform:rotate(30deg)}
}
@keyframes circle4move{
  0%   {top:-40px;left:400px;transform:rotate(0deg)}
  25%  {top:-100px;left:150px;transform:rotate(30deg)}
  50%  {top:-150px;left:300px;transform:rotate(180deg)}
  100% {top:-80px;left:150px;transform:rotate(30deg)}
}
.multimedia .circle5{
  position: absolute;
  left:800px;
  top:-100px;
  z-index: -1;
  width:608px;
  height:618px;
  border-radius: 50%;
  background:url('../mediaSource/price_bg_one.png') no-repeat;
  -webkit-animation:circle5move 10s ease-in-out infinite alternate;
  -o-animation:circle5move 10s ease-in-out infinite alternate;
  -moz-animation:circle5move 10s ease-in-out infinite alternate;
  animation: circle5move 10s ease-in-out infinite alternate;
  -webkit-transition:all 0.1s ease-in;
  -o-transition:all 0.1s ease-in;
  -moz-transition:all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
@-webkit-keyframes circle5move{
  0%   {top:-150px;left:800px;transform:rotate(-30deg)}
  25%  {top:-100px;left:1000px;transform:rotate(0deg)}
  50%  {top:-50px;left:900px;transform:rotate(-90deg)}
  100% {top:-150px;left:1100px;transform:rotate(-180deg)}
}
@-o-keyframes circle5move{
  0%   {top:-150px;left:800px;transform:rotate(-30deg)}
  25%  {top:-100px;left:1000px;transform:rotate(0deg)}
  50%  {top:-50px;left:900px;transform:rotate(-90deg)}
  100% {top:-150px;left:1100px;transform:rotate(-180deg)}
}
@-moz-keyframes circle5move{
  0%   {top:-150px;left:800px;transform:rotate(-30deg)}
  25%  {top:-100px;left:1000px;transform:rotate(0deg)}
  50%  {top:-50px;left:900px;transform:rotate(-90deg)}
  100% {top:-150px;left:1100px;transform:rotate(-180deg)}
}
@keyframes circle5move{
  0%   {top:-150px;left:800px;transform:rotate(-30deg)}
  25%  {top:-100px;left:1000px;transform:rotate(0deg)}
  50%  {top:-50px;left:900px;transform:rotate(-90deg)}
  100% {top:-150px;left:1100px;transform:rotate(-180deg)}
}