body {
	margin: 0 auto; padding: 0;
}

.app {
	font-family: '微软雅黑', '宋体', Times New Roman, Arial, Verdana; color: #333; font-size: 16px;
}
.app-container {
	width: 1200px; margin: 0 auto;
}

/******** bannner ********/
.banner {
	margin: 0 auto; background: linear-gradient(45deg, #0063f8, #84c1ff);
}
.banner-tabs-container {
	width: 1200px; height: 105px; margin: 0 auto; position: relative;
}
.banner-tabs {
	height: 105px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
}
.banner-tabs.navFix {
	position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	z-index: 99999; background: linear-gradient(45deg, #0063f8, #84c1ff);
}
.banner-tabs ul {
	display: flex; list-style: none;
}
.banner-tabs ul li {
	display: inline-flex; list-style: none; margin-right: 50px;
}
.banner-tabs ul li a {
	height: 30px; line-height: 30px; color: #fff; text-decoration: none;
}
.banner-tabs ul li a:hover, .banner-tabs ul li a.active {
	border-bottom: 3px solid #fff;
}
.banner-tabs button {
	width: 120px; height: 36px; line-height: 36px; text-align: center; font-size: 14px;
	border-radius: 4px; border: none; color: #fff; cursor: pointer; margin-bottom: 5px;
	background: #00eaff; opacity: 0;
}
.banner-content {
	display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
}
.banner-content-left .title {
	color: #fff; font-size: 40px; margin-bottom: 15px;
}
.banner-content-left .subtitle {
	color: #fff; font-size: 21px; margin-bottom: 25px;
}
.banner-content-left .line {
	width: 50px; height: 5px; background: #fff;
}
.banner-content-right img {
	margin: 90px 0;
}

/******** advantage ********/
.advantage {
  padding: 80px 0 120px 0; height: 600px; background: #f4f7fe; text-align: center; position: relative; overflow: hidden;
}
.advantage:before {
	content: ''; width: 1909px; height: 249px; background-image: url('../img/ADVANTAGE_bg.png');
	position: absolute; top: 200px; left: 50%; margin-left: -955px;
}
.advantage-title {
	font-size: 34px; text-align: center; margin-bottom: 30px;
}
.advantage-line {
	display: inline-block; width: 80px; height: 4px; background: #61a8fc; margin-bottom: 65px;
}
.advantage-content ul {
	list-style: none;
}
.advantage-content ul li {
  background: #fff; width: 274px; height: 384px; border-radius: 2px; cursor: default;
	transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;
	box-shadow: 0 0 4px 4px rgba(42, 115, 210, .26);
}
.advantage-content ul li .title {
	height: 250px; display: flex; align-items: center; justify-content: center; flex-direction: column;
	border-bottom: 1px solid #cbe3ff; font-size: 18px;
}
.advantage-content ul li .title img {
	margin-bottom: 35px;
}
.advantage-content ul li .desc {
	height: 134px; display: flex; align-items: center; justify-content: center; flex-direction: column;
}

/******** service ********/
.service {
  padding: 80px 0 120px 0; height: 650px; text-align: center; position: relative; overflow: hidden;
}
.service:before {
	content: ''; width: 1532px; height: 249px; background-image: url('../img/SERVICE_bg.png');
	position: absolute; bottom: 90px; left: 50%; margin-left: -766px; z-index: -1; 
}
.service-title {
	font-size: 34px; text-align: center; margin-bottom: 30px;
}
.service-line {
	display: inline-block; width: 80px; height: 4px; background: #61a8fc; margin-bottom: 60px;
}
.service-content {
	position: relative; height: 420px; overflow: hidden;
}
.service-content:before {
	content: ''; width: 1220px; height: 100%; background: #7ebdff;
	position: absolute; left: 50%; margin-left: -590px; z-index: -1; 
}
.service-content ul {
	list-style: none; display: flex; justify-content: center; margin-top: 60px;
}
.service-content ul li {
  width: 300px; height: 265px; background: #fff; margin-right: 20px; text-align: center;
  box-shadow: 0 0 3px 3px rgba(42, 115, 210, .36); cursor: pointer; padding-top: 30px;
}
.service-content ul li:last-child {
  margin-right: 0;
}
.service-content ul li .service-image1 {
  display: inline-block; width: 74px; height: 74px; background-image: url('../img/service_logo1.png');
}
.service-content ul li .service-image2 {
  display: inline-block; width: 74px; height: 74px; background-image: url('../img/service_logo2.png');
}
.service-content ul li .service-image3 {
  display: inline-block; width: 74px; height: 74px; background-image: url('../img/service_logo3.png');
}
.service-content ul li .service-image4 {
  display: inline-block; width: 74px; height: 74px; background-image: url('../img/service_logo4.png');
}
.service-content ul li .title {
  font-size: 24px; margin-top: 30px;
}
.service-content ul li .subtitle {
  font-size: 14px; margin-top: 30px;
}
.service-content ul li .line {
  display: inline-block; width: 70px; height: 4px; background: #7ebdff; margin-top: 48px;
}
.service-content ul li:hover {
  background: linear-gradient(90deg, #29fcff, #00ffea); color: #fff;
}
.service-content ul li:hover .service-image1 {
  background-image: url('../img/service_logo1_hover.png');
}
.service-content ul li:hover .service-image2 {
  background-image: url('../img/service_logo2_hover.png');
}
.service-content ul li:hover .service-image3 {
  background-image: url('../img/service_logo3_hover.png');
}
.service-content ul li:hover .service-image4 {
  background-image: url('../img/service_logo4_hover.png');
}
.service-content ul li:hover .line {
  background: #fff;
}

/******** mode ********/
.mode {
  padding: 80px 0 120px 0; background: #f4f7fe; text-align: center;  position: relative; overflow: hidden;
}
.mode:before {
	content: ''; width: 1241px; height: 249px; background-image: url('../img/MODE_bg.png');
	position: absolute; top: 220px; left: 50%; margin-left: -620px;
}
.mode-title {
	font-size: 34px; text-align: center; margin-bottom: 30px;
}
.mode-line {
	display: inline-block; width: 80px; height: 4px; background: #61a8fc; margin-bottom: 50px;
}
.mode-content ul {
	list-style: none; display: flex; justify-content: center;
}
.mode-content ul li {
	width: 291px; height: 405px; margin-right: 20px; text-align: left; border: 3px solid #f4f7fe; cursor: pointer;
}
.mode-content ul li .image {
	height: 310px; background: rgba(237, 239, 241, .5);
}
.mode-content ul li .image img {
	width: 100%; height: 100%;
}
.mode-content ul li .detail {
	height: 95px; padding: 0 15px; display: flex; flex-direction: column; justify-content: center;
}
.mode-content ul li .detail .title {
	color: #61a8fc; margin-bottom: 5px;
}
.mode-content ul li .detail .desc {
	font-size: 14px;
}
.mode-content ul li:hover {
	border: 3px solid #aaccff;
}
.mode-content ul li:hover .image {
	background: #fff;
}
.mode-content ul li:hover .detail {
	background: #f0f3f7;
}

/******** partner ********/
.partner {
  padding: 80px 0 120px 0; text-align: center;
}
.partner-title {
	font-size: 34px; text-align: center; margin-bottom: 30px;
}
.partner-line {
	display: inline-block; width: 80px; height: 4px; background: #61a8fc; margin-bottom: 120px;
}
.partner-content ul {
	list-style: none; display: flex; justify-content: center;
}
.partner-content ul li {
	width: 184px; height: 87px; margin-right: 20px; text-align: center; border: 3px solid #dfdfdf; cursor: pointer;
}
.partner-content ul li .partner1 {
	width: 178px; height: 81px; background: url('../img/partner_logo.png') -5px -5px;
}
.partner-content ul li:hover .partner1 {
	background: url('../img/partner_logo.png') -5px -76px;
}
.partner-content ul li .partner2 {
	width: 178px; height: 81px; background: url('../img/partner_logo.png') -181px -5px;
}
.partner-content ul li:hover .partner2 {
	background: url('../img/partner_logo.png') -181px -76px;
}
.partner-content ul li .partner3 {
	width: 178px; height: 81px; background: url('../img/partner_logo.png') -356px -5px;
}
.partner-content ul li:hover .partner3 {
	background: url('../img/partner_logo.png') -356px -77px;
}
.partner-content ul li .partner4 {
	width: 178px; height: 81px; background: url('../img/partner_logo.png') -5px -164px;
}
.partner-content ul li:hover .partner4 {
	background: url('../img/partner_logo.png') -5px -235px;
}
.partner-content ul li .partner5 {
	width: 178px; height: 81px; background: url('../img/partner_logo.png') -179px -164px;
}
.partner-content ul li:hover .partner5 {
	background: url('../img/partner_logo.png') -179px -235px;
}

/******** business ********/
.business {
  padding: 80px 0; text-align: center; background: linear-gradient(45deg, #0063f8, #84c1ff);
}
.business-title {
	font-size: 34px; text-align: center; margin-bottom: 30px; color: #fff;
}
.business-line {
	display: inline-block; width: 80px; height: 4px; background: #fff; margin-bottom: 70px;
}
.business-map img {
	border: 2px solid rgba(35, 106, 201, .4);
}
.business-info {
	width: 726px; display: flex; align-items: center; justify-content: space-between;
	color: #fff; font-size: 14px; margin: 0 auto; margin-top: 30px;
}
.business-info .business-info-item {
	display: inline-flex; align-items: center;
}
.business-info .business-info-item img {
	margin-right: 12px;
}
.business-info .business-info-item a {
	color: #fff; font-size: 14px; text-decoration: none;
}


/******** company ********/
.company {
  padding: 80px 0; text-align: center; background: linear-gradient(45deg, #0063f8, #84c1ff);
}
.company-title {
	font-size: 34px; text-align: center; margin-bottom: 30px; color: #fff;
}
.company-line {
	display: inline-block; width: 80px; height: 4px; background: #fff; margin-bottom: 70px;
}
.company-info {
	width: 1200px; display: flex; align-items: center; justify-content: space-between;
	color: #fff; font-size: 16px; margin: 0 auto; margin-top: 30px;
}
.company-info .company-info-item {
	display: inline-flex; align-items: center;
}
/******** footer ********/
.footer {
	height: 120px; background: #33363a; font-size: 14px; color: #fff;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.toastView{
	width:50%;
	position: relative;
	z-index: 10;
}
.toastView button{
	display: inline-block;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
    color: #8590a6;
    border-color: #0084ff;
    text-align: center;
    cursor: pointer;
    background: none;
    border: 1px solid;
    border-radius: 3px;
}
.layer_shade{
	background-color: rgba(0,0,0,.7);
    pointer-events: auto;
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.layer_main{
	text-align: center;
	background: #f6f6f6;
	background-color: rgba(250,250,250,.8);
	position: fixed;
    left:25%;
    top:25%;
    margin: 0 auto;
    width:435px;
    height:405px;
    border-radius: 10px;
    overflow: hidden;
}
.buttonS{
	margin: 60px auto;
}
.form-control{
	    height: 48px;
	    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    width: 100%;
}
.Input-wrapper{
	    width: 100%;
    height: 48px;
    padding: 0;
    color: #8590a6;
    border: none;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0;
    margin-top: 10px;
}
.Input-code{
	width: 60%;
	float: left;
}
form{
	width:80%;
	margin:0 auto;
}
.img_captcha{
	float: right;
	height: 46px;
	width: 116px;
	line-height: 46px;
	cursor: pointer;
}
.transition_css{
	transition: transform .5s ease-out;
	-moz-transition: transform .5s ease-out; /* Firefox 4 */
	-webkit-transition: transform .5s ease-out; /* Safari 和 Chrome */
	-o-transition: transform .5s ease-out; /* Opera */
}
.btu_Login{
	margin-top:40px;
	width: 50%;
	border-color: blue;
	background-color: blue;
	color: white;
}
.btu_Login:hover,.Input-wrapper:hover{
    -webkit-transform:scale(1.1);-moz-transform:scale(1.1)
}
.close_btu:hover {
	-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);
}
.passwordForget{
	height: 48px;
	line-height: 48px;
}
.close_btu{
	position: absolute;
	right: 10px;
	top: 10px;
	background:url(../img/close_icon.png) no-repeat center center;
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    display: block;
}
.view_right{-webkit-animation-name:view_right;animation-name:view_right;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:inherit;-webkit-animation-fill-mode:inherit}
@-webkit-keyframes view_right{0%{left:0;opacity:0}
to{left:435px;opacity:1}
}
.view_left{-webkit-animation-name:view_left;animation-name:view_left;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:inherit;-webkit-animation-fill-mode:inherit}
@-webkit-keyframes view_left{0%{left:435px;opacity:0}
to{left:0;opacity:1}
}
.view_outleft{-webkit-animation-name:view_outleft;animation-name:view_outleft;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:inherit;-webkit-animation-fill-mode:inherit}
@-webkit-keyframes view_outleft{0%{left:0;opacity:0}
to{left:-435px;opacity:1}
}
.view_outright{-webkit-animation-name:view_outright;animation-name:view_outright;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:inherit;-webkit-animation-fill-mode:inherit}
@-webkit-keyframes view_outright{0%{left:-435px;opacity:0}
to{left:0;opacity:1}
}
.title_tab{
	display: flex;justify-content: center;align-items: center;
}
.title_tab p{
	width: 50%;
	height: 40px;
	margin: 0;
	padding:0;
	line-height: 40px;
	color: white;
}
.title_tab p.on{
    font-weight: bold;
	border-bottom: 1px solid #84c1ff;
}
.transition_color{
	transition: border-bottom .5s ease-out;
	-moz-transition: border-bottom .5s ease-out; /* Firefox 4 */
	-webkit-transition: border-bottom .5s ease-out; /* Safari 和 Chrome */
	-o-transition: border-bottom .5s ease-out; /* Opera */
}
.titlePushesImg{
	width: 124px;
    height: 78px;
}
.titleLeagueImg{
	width: 300px;
    height: 78px;
}
.title_PushesIcon{
	width: 30px;
    height: 45px;
}
.title_LeagueIcon{
	width: 32px;
    height: 39px;
}
.tab_p{display: flex;justify-content: center;align-items: center;cursor:pointer;}