﻿@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
/* 动画 */ 
.foot2{
	width:100%;
	height:auto;
	margin-top:30px;
	padding-top:30px;
    background: linear-gradient(to right, #484ab9, #3697fd);
	color:#FFFFFF;
/* 	background: #FFAFBD;  
	background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
	background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
	background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
 */
}
.foot2 a{color:#FFFFFF}
.foot2 a:hover{ color:#FFCC00}

.waves {
    position: relative;
    width: 100%;
    height: 0.8rem;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height:0.8rem;
    max-height:0.8rem;
}
.parallax > use {animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s; animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s; animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s; animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
@-webkit-keyframes move-forever{
	0%{-webkit-transform:translate3d(-90px,0,0);transform:translate3d(-90px,0,0)}
	100%{-webkit-transform:translate3d(85px,0,0);transform:translate3d(85px,0,0)}
}
@keyframes move-forever {
    0% {-webkit-transform:translate3d(-90px,0,0);transform: translate3d(-90px, 0, 0);}
    100% {-webkit-transform:translate3d(85px,0,0);transform: translate3d(85px, 0, 0);}
}
/* 动画end */

.foot{ width:100%; height:auto; margin-top:30px; padding:30px 0; background: linear-gradient(to right, #484ab9, #3697fd); color:#FFFFFF; position:relative}
.foot a{color:#FFFFFF}
.foot a:hover{ color:#FFCC00}

.bg_ware{/**波浪动态图**/
  position: absolute;/**相对于父标签来进行定位，这里的父标签的class是header**/
  left: 0;/**相对于父标签左边界重合**/
  bottom: 0;/**相对于父标签下边界重合**/
  width: 100%;/**相对于父标签宽度为100%**/
  mix-blend-mode: screen;/**透明部分用底部背景色填充，简称滤色**/
  height: 0.7rem;/**图片高度**/
}

.foot_box{overflow:hidden}
.foot_box .l{ display:none}
.foot_box .r{ width:100%; height:auto; text-align:center}
.foot_box .r img{width:150px; height:auto}
.foot_box .r p{text-align:center; line-height:36px}

.foot_foot{overflow:hidden; padding:20px 0}
.foot_foot li{text-align:center; line-height:30px;}
/*********footer*********/
}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
/* 动画 */ 
.foot2{
	width:100%;
	height:auto;
	margin-top:30px;
	padding-top:50px;
    background: linear-gradient(to right, #484ab9, #3697fd);
	color:#FFFFFF;
/* 	background: #FFAFBD;  
	background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
	background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
	background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
 */
}
.foot2 a{color:#FFFFFF}
.foot2 a:hover{ color:#FFCC00}

.waves {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
.parallax > use {animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s; animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s; animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s; animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
@-webkit-keyframes move-forever{
	0%{-webkit-transform:translate3d(-90px,0,0);transform:translate3d(-90px,0,0)}
	100%{-webkit-transform:translate3d(85px,0,0);transform:translate3d(85px,0,0)}
}
@keyframes move-forever {
    0% {-webkit-transform:translate3d(-90px,0,0);transform: translate3d(-90px, 0, 0);}
    100% {-webkit-transform:translate3d(85px,0,0);transform: translate3d(85px, 0, 0);}
}
/* 动画end */


.foot{width:100%; height:auto; margin-top:30px; padding:60px 0; color:#FFFFFF; background: linear-gradient(-45deg, #484ab9, #3697fd, #0306a3); background-size: 500% 500%; animation: moiveAnimation 15s infinite;}
.foot a{color:#FFFFFF}
.foot a:hover{ color:#FFCC00}

@keyframes moiveAnimation {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


.bg_ware{display:none}

.foot_box{overflow:hidden}
.foot_box .l{ float:left; width:800px; height:auto;}
.foot_box .r{ float:right; width:150px; height:auto;}
.foot_box .r img{width:100%; height:auto}
.foot_box .r p{text-align:center; line-height:36px}

.foot_text{width:100%; height:auto; display:flex; display: -webkit-flex; /*启用弹性布局*/ flex-direction:row;/*从左到右排*/}
.foot_text div{width:100%; height:auto; text-align:left; margin-right:10px;}
.foot_text h6{ color:#FFFFFF; font-size:18px; font-weight:400; position:relative;}
.foot_text h6:before{content: ""; width:40px; height:3px; background-color:#FFCC00; position:absolute; left:0; top:33px}

.foot_ul{width:100%; height:auto; color:#FFFFFF; margin-top:20px}
.foot_ul li{ line-height:27px; color:#FFFFFF}
.foot_ul li a{ display:block; color:#FFFFFF}

.foot_foot{overflow:hidden; padding:20px 0}
.foot_foot li{ text-align:center; line-height:30px}
/*********footer*********/
}

/* 移动端底部专用 */
.foot_height{height:0.5rem;}
.footer{width:100%; height:0.6rem; overflow:hidden; position:fixed; bottom:0; right:0; z-index:999; background-color:#3697fd; border-top-right-radius: 10px; border-top-left-radius: 10px;}
.footer li{float:left; width:25%; height:auto; position:relative}
.footer li:before{content: ""; width:1px; height:0.3rem; background-color:#55a6fc; position:absolute; right:0; top:0.15rem}
.footer li:nth-child(4):before{ display:none}
.footer li a{display:block}
.footer li span{display:block; width:100%; height:0.26rem; padding-top:0.07rem; text-align:center;}
.footer li span img{height:100%}
.footer li p{width:100%; height:0.26rem; line-height:0.26rem; text-align:center; font-size:0.12rem; font-weight:100; color:#fff;}
/* 移动端底部专用_end */