*{ margin:0; padding: 0; outline: none; box-sizing: border-box; }
body{ background: #FFF; color: #000; font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

.clearfix{zoom:1}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}
.clearfix:after{clear:both}

a{color:#000;text-decoration:none}
a:hover{color:#333}
ul{list-style:none;}

.container{ max-width: 1330px; margin:0 auto; padding: 0 15px; }

.img-center{text-align:center;font-size:0}
.img-center img{display:inline-block;width:auto;height:auto;max-width:100%;max-height:100%;vertical-align:middle;transition:all 0.5s}

.img-cover{overflow:hidden;position:relative}
.img-cover span{display:block;width:100%;background:no-repeat center / cover;transition:all 0.5s;height:100%;position:absolute;left:0;top:0}

.header{ background: #5061ec; color: #FFF; }
.logo{ height: 30px; display: flex; align-items: center; padding:20px 0; font-size: 24px; margin-bottom: 80px; }
.logo i{ height: 100%; margin-right: 8px; }
.logo span{ height: 100%; }
.banner{ display: flex; align-items: center; padding-bottom: 200px; }
.banner .text{ flex:0 0 50%; }
.banner .text h2{ font-size: 48px; margin-bottom: 60px; }
.banner .text .ys{ display: flex; justify-content: center; align-items: center; margin-bottom: 70px;}
.banner .text .ys li{ display: flex; align-items: center; justify-content: center; text-align: center; width: 148px; height: 148px; border-radius: 50%; border: 3px solid #FFF; margin:0 30px;}
.banner .text .ys li a{ color: #FFF; }
.banner .text .ys li h3{ font-size: 20px; }
.banner .text .ys li h3 span{ font-size: 42px; }
.banner .text .ys li p{ font-size: 18px; }
.banner .text .download{ display:flex;  justify-content: center; align-items: center; }
.banner .text .download li{ flex:1; margin:0 35px; }
.banner .text .download li a{ padding: 0 20px;  display:flex; justify-content: center; align-items: center; border-radius: 30px; background: #FFF; color: #4853e3;height: 60px;  }
.banner .text .download li span{ font-size: 24px; font-weight: bold; margin-left: 8px; }
.banner .text .download li a:hover{ box-shadow: 0 10px 25px rgba(0,0,0,0.3) }
.banner .img-center {flex:1;}

.main{ display: flex; padding: 100px 0; }
.main .text{ flex:0 0 50%; }
.main .text h2{ display: flex; align-items: center; font-weight: normal; color: #444; margin-bottom: 12px; }
.main .text h2 img{ height: 50px; margin-right: 8px;}
.main .text h2 span{ font-size: 36px; }
.main .text p{ font-size: 20px; line-height: 1.5; font-weight: lighter; color: #666; max-width: 570px;}
.main .img-center {flex:1;}

.footer{ text-align: center; font-size: 16px; padding: 30px 15px; color: #777; line-height: 1.6; }

@media screen and (max-width: 767px)  {
	.banner{ flex-wrap: wrap;  padding-bottom: 30px; }
	.banner .text{ flex:100%; }
	.banner .text h2{ font-size: 24px; margin-bottom: 30px; text-align: center;}
	.banner .text .ys{ margin-bottom: 30px;}
	.banner .text .ys li{ width: auto; height: auto; border:0; margin:0 15px;}
	.banner .text .download li{ margin:0 5px; }
	.banner .text .download li span{ font-size: 18px; }
	.banner .img-center { flex:100%; margin-top: 15px;}

	.main{ flex-wrap: wrap; padding: 30px 0; }
	.main .text{ flex:100%; }
	.main .text h2{ flex-wrap: wrap; text-align: center; }
	.main .text h2 i{ flex:100%;text-align: center; }
	.main .text h2 span{ font-size: 18px; flex:100%;}
	.main .text p{ font-size: 16px; line-height: 1.5; }
	.main .img-center {flex:100%; margin-top: 15px;}
	
}