/*CSS重置, 消除不同浏览器默认样式之间的差异*/
body,
html,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {

	margin: 0;
	/* 移除所有元素的外边距 */
	padding: 0;
	/* 移除所有元素的内边距 */
	border: 0;
	/* 移除所有元素的边框 */
	font-size: 100%;
	/* 设置所有元素的字体大小为继承大小的100%，确保字体大小的一致性 */
	font: inherit;
	/* 使所有元素的字体属性继承自其父元素 */
	vertical-align: baseline;
	/* 将所有元素的垂直对齐方式设置为基线对齐 */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {

	display: block;
	/* 将这些元素设置为块级元素 */
}


body {

	padding: 0;
	/* 设置body元素的内边距（padding）为0，意味着body与其内容之间没有额外的空间 */
	margin: 0;
	/* 设置body元素的外边距（margin）为0，确保body元素紧贴浏览器窗口的边缘 */
	background: #FFF;
	/* 设置body的背景颜色为白色（#FFF是白色的十六进制表示） */
	font-family: 'Open Sans', sans-serif;
	/* 设置body中文本的字体系列为'Open Sans'。如果用户的计算机上没有安装'Open Sans'，则回退到使用通用的无衬线字体（sans-serif） */
}

body a {

	transition: 0.5s all;
	/* 为body内的所有<a>（链接）元素设置过渡效果，过渡时间为0.5秒，影响所有可动画属性 */
	-webkit-transition: 0.5s all;
	/* 为body内的所有<a>元素设置WebKit特有的过渡效果（用于旧版Safari和Chrome浏览器），过渡时间为0.5秒，影响所有可动画属性 */
	-moz-transition: 0.5s all;
	/* 为body内的所有<a>元素设置Mozilla特有的过渡效果（用于旧版Firefox浏览器），过渡时间为0.5秒，影响所有可动画属性 */
	-o-transition: 0.5s all;
	/* 为body内的所有<a>元素设置Opera特有的过渡效果（用于旧版Opera浏览器），过渡时间为0.5秒，影响所有可动画属性 */
	text-decoration: none;
	/* 移除<a>元素默认的下划线装饰 */
}

/* 对p标签进行样式设置 */
p {

	/* 设置p标签的外边距为0 */
	margin: 0;
	/* 设置p标签的字体大小为15像素 */
	font-size: 15px;
	/* 设置p标签的行高为1.9，这意味着行间距是字体大小的1.9倍 */
	line-height: 1.9;
	/* 设置p标签的文字颜色为#999（灰色调） */
	color: #999;
	/* 设置p标签的文字字母之间的间距为1像素 */
	letter-spacing: 1px;
}

/* 对具有navbar和navbar-default类的nav标签进行样式设置 */
nav.navbar.navbar-default {

	/* 设置背景颜色为继承父元素的背景颜色 */
	background-color: inherit;
	/* 去掉默认的边框 */
	border: none;
	/* 设置外边距为0 */
	margin: 0;
}

/* 对同时具有nav, navbar类的ul标签进行样式设置 */
ul.nav.navbar {

	/* 设置文本居中对齐 */
	text-align: center;
	/* 设置外边距，上为17px，右和左为0，下也为0 */
	margin: 17px 0 0;
	/* 设置最小高度为继承父元素的高度 */
	min-height: inherit;
}

/* 对.top-nav下的ul中的li进行样式设置 */
.top-nav ul li {

	/* 设置左右外边距为1em（相对单位，相对于当前字体大小） */
	margin: 0 1em;
	/* 设置元素为行内块，使其能在一行显示同时可以设置宽高 */
	display: inline-block;
}

/* 对.top-nav下的ul中的li内的a标签进行样式设置 */
.top-nav ul li a {

	/* 去掉下划线装饰 */
	text-decoration: none;
	/* 设置字母间距为1像素 */
	letter-spacing: 1px;
	/* 设置字体大小为17像素 */
	font-size: 17px;
	/* 设置文字颜色为#fff（白色） */
	color: #fff;
	/* 设置定位为相对定位，可以相对于其正常位置进行偏移 */
	position: relative;
	/* 设置内边距为0 */
	padding: 0;
	/* 设置元素为行内块 */
	display: inline-block;
}

/* 设置.nav下直接子元素li中的a标签在鼠标悬停或聚焦时的样式 */
.nav>li>a:hover,
.nav>li>a:focus {

	background: none;
	/* 移除背景色，如果有的话 */
}

/* 设置菜单跳转按键在鼠标悬停或处于活动状态时的样式 */
.top-nav ul li a:hover,
.top-nav ul li a.active {

	color: #3aa0e9;
	/* 改变文字颜色为#ff304f（一种粉红色） */
	-webkit-transform: scale(1.1);
	/* 为兼容WebKit浏览器，设置元素放大1.1倍 */
	-moz-transform: scale(1.1);
	/* 为兼容Mozilla浏览器，设置元素放大1.1倍 */
	-o-transform: scale(1.1);
	/* 为兼容Opera浏览器，设置元素放大1.1倍 */
	-ms-transform: scale(1.1);
	/* 为兼容Microsoft浏览器，设置元素放大1.1倍 */
	transform: scale(1.1);
	/* 设置元素放大1.1倍，为现代浏览器标准属性 */
}

/* 设置.top-nav下的.dropdown-menu中的li中的a标签在鼠标悬停或聚焦时的样式 */
.top-nav .dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {

	color: #FF5722;
	/* 改变文字颜色为#FF5722（一种橙色） */
	text-decoration: none;
	/* 去掉下划线装饰 */
	background-color: transparent;
	/* 设置背景色为透明 */
}

/* 设置.navbar-right类的样式，通常用于导航栏右侧元素 */
.navbar-right {

	margin-right: 0;
	/* 设置右侧外边距为0 */
}

/* 设置.banner-sec-agile类的样式，可能用于横幅或广告栏区域 */
.banner-sec-agile {

	background: #0ecff7;
	/* 设置背景颜色为#0ecff7（一种青色） */
}

/* 设置.banner-left-agile下的img标签的样式 */
.banner-left-agile img {

	height: 450px;
	/* 设置图片高度为450像素 */
	width: 100%;
	/* 设置图片宽度为其父元素宽度的100% */
}

/* 设置.banner-left-agile类的样式，可能用于横幅左侧部分 */
.banner-left-agile {

	float: left;
	/* 设置元素向左浮动，用于布局 */
	width: 45%;
	/* 设置元素宽度为其父元素宽度的45% */
}

/* 设置.banner-left-wthree类的样式，可能用于横幅右侧部分 */
.banner-left-wthree {

	float: right;
	/* 设置元素向右浮动，用于布局 */
	width: 50%;
	/* 设置元素宽度为其父元素宽度的50% */
}

.banner-left-wthree {

	margin: 5px auto 0;
	/* 设置上边距为5px，左右自动居中，下边距为0 */
	text-align: right;
	/* 文本对齐到右侧 */
}

.banner-left-wthree h6 {

	font-size: 28px;
	/* 字体大小设置为28px */
	color: #fff;
	/* 字体颜色设置为白色 */
	letter-spacing: 1px;
	/* 字符间距设置为1px */
	font-style: italic;
	/* 字体样式设置为斜体 */
	margin-bottom: 5px;
	/* 下边距设置为5px */
}

/*温轻舟样式*/
.banner-left-wthree h2 {

	color: #5d30ff;
	font-size: 80px;
	/* 字体大小设置为80px */
	font-family: 'Scada', sans-serif;
	/* 字体族设置为'Scada'，如果不可用则使用无衬线字体 */
	text-shadow: 2px 2px 11px rgba(12, 70, 92, 0.46);
	/* 文本阴影设置为2px 2px 11px #5d5d5d（一种灰色） */
	font-style: italic;
	/* 字体样式设置为斜体 */
}

.banner-left-wthree p.zi {

	/* 设置背景渐变 */
	background: linear-gradient(to bottom, #89dc4d, #32a9cd, #885cd0, #cb0db1, dimgray);
	/* 裁剪背景，使其只显示在文本上 */
	-webkit-background-clip: text;
	/* 隐藏文本的默认填充颜色 */
	-webkit-text-fill-color: transparent;
	color: transparent;
	letter-spacing: 1px;
	/* 字母间距设置为1像素 */
	font-size: 15px;
	/* 字体大小设置为15像素 */
	margin-top: 4em;
	/* 上边距设置为4倍的字体大小（通常用于创建视觉上的间距） */

	top: 50%;
	/* 初始时，元素顶部距离其父容器顶部50% */
	left: 50%;
	/* 初始时，元素左侧距离其父容器左侧50% */
	transform: translate(-50%, -50%) scale(0.8);
	/* 使用变换将元素移动到其父容器的正中心，并稍微缩小 */
	opacity: 0;
	/* 初始时，元素完全透明（隐藏） */
	animation: coolFadeInZoomMove 3.5s forwards 1.5s;
}

/* 定义动画 */
@keyframes coolFadeInZoomMove {

	0% {

		opacity: 0;
		/* 动画开始时，元素完全透明 */
		transform: translate(-50%, -50%) scale(0.8);
		/* 元素位于其父容器的正中心，并稍微缩小 */
	}

	20% {

		opacity: 1;
		/* 元素逐渐变得完全不透明 */
		transform: translate(-50%, -50%) scale(2);
		/* 元素放大到2倍，但中心位置不变 */
	}

	50% {

		opacity: 1;
		/* 元素保持完全不透明 */
		transform: translate(-50%, -50%) scale(2);
		/* 元素保持在2倍大小，中心位置不变 */
	}

	70% {

		opacity: 1;
		/* 元素保持完全不透明 */
		transform: translate(-50%, -50%) scale(1);
		/* 元素缩小到原始大小，中心位置不变 */
	}

	100% {

		opacity: 1;
		/* 元素保持完全不透明 */
		transform: translate(0, 0) scale(1);
		/* 元素移动到其最终位置（这里假设是父容器的左上角），并保持原始大小 */
		top: auto;
		/* 重置顶部位置为自动，以便元素跟随正常的文档流 */
		left: auto;
		/* 重置左侧位置为自动，以便元素跟随正常的文档流 */
		position: static;
		/* 重置定位方式为静态，以便元素跟随正常的文档流 */
	}
}


.popEffect span {

	animation: pop 10s linear infinite 0s;
	/* 应用名为'pop'的动画，持续7.5秒，线性变化，无限循环，从0秒开始 */
	-ms-animation: pop 10s linear infinite 0s;
	/* 针对旧版IE浏览器的动画设置 */
	-webkit-animation: pop 10s linear infinite 0s;
	/* 针对WebKit内核浏览器的动画设置（如Chrome, Safari） */
	opacity: 0;
	/* 透明度设置为0 */
	overflow: hidden;
	/* 超出内容区域的部分隐藏 */
	position: absolute;
	/* 位置设置为绝对定位 */
	width: 70%;
	/* 宽度设置为父元素的70% */
	left: 9.5%;
	/* 距离父元素左边9.5% */
	color: #fff;
	/* 字体颜色设置为白色 */
	font-family: 'Open Sans', sans-serif;
	/* 字体族设置为'Open Sans'，如果不可用则使用无衬线字体 */
	letter-spacing: 1px;
	/* 字符间距设置为1px */
	font-size: 40px;
	/* 字体大小设置为35px */
}

.popEffect span:nth-child(2) {

	animation-delay: 2.5s;
	/* 动画延迟2.5秒开始 */
	-ms-animation-delay: 2.5s;
	/* 针对旧版IE浏览器的动画延迟设置 */
	-webkit-animation-delay: 2.5s;
	/* 针对WebKit内核浏览器的动画延迟设置 */
}

.popEffect span:nth-child(3) {

	animation-delay: 5s;
	/* 为第三个span子元素设置动画延迟为5秒 */
	-ms-animation-delay: 5s;
	/* 为IE浏览器（特别是IE10）设置动画延迟为5秒 */
	-webkit-animation-delay: 5s;
	/* 为基于WebKit的浏览器（如Chrome, Safari）设置动画延迟为5秒 */
}

.popEffect span:nth-child(4) {

	animation-delay: 7.5s;
	/* 为第四个span子元素设置动画延迟为7.5秒 */
	-ms-animation-delay: 7.5s;
	/* 为IE浏览器设置动画延迟为7.5秒 */
	-webkit-animation-delay: 7.5s;
	/* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}

.popEffect span:nth-child(5) {

	animation-delay: 10s;
	/* 为第四个span子元素设置动画延迟为7.5秒 */
	-ms-animation-delay: 10s;
	/* 为IE浏览器设置动画延迟为7.5秒 */
	-webkit-animation-delay: 10s;
	/* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}

@-moz-keyframes pop {

	/* 定义Mozilla Firefox浏览器中的关键帧动画“pop” */
	0% {
		opacity: 0;
	}

	/* 动画开始时，元素完全透明 */
	5% {
		opacity: 0;
		-moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
	}

	/* 元素保持透明，同时进行旋转、缩放、倾斜和平移的变换 */
	10% {
		opacity: 1;
		-moz-transform: translateY(0px);
	}

	/* 元素变为不透明，并仅在Y轴上进行平移 */
	25% {
		opacity: 1;
		-moz-transform: translateY(0px);
	}

	/* 元素保持不透明和位置不变 */
	30% {
		opacity: 0;
		-moz-transform: translateY(0px);
	}

	/* 元素再次变为透明 */
	80% {
		opacity: 0;
	}

	/* 元素保持透明 */
	100% {
		opacity: 0;
	}

	/* 动画结束时，元素仍然透明 */
}

@-webkit-keyframes pop {

	/* 定义基于WebKit的浏览器（如Chrome, Safari）中的关键帧动画“pop” */
	/* 动画内容与@-moz-keyframes pop相同，但使用-webkit-前缀 */
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
	}

	10% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}

	25% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}

	30% {
		opacity: 0;
		-webkit-transform: translateY(0px);
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@-ms-keyframes pop {

	/* 定义IE浏览器中的关键帧动画“pop” */
	/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
		-ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
	}

	10% {
		opacity: 1;
		-ms-transform: translateY(0px);
	}

	25% {
		opacity: 1;
		-ms-transform: translateY(0px);
	}

	30% {
		opacity: 0;
		-ms-transform: translateY(0px);
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@-ms-keyframes pop {

	/* 定义IE浏览器中的关键帧动画“pop” */
	/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
		-ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
	}

	10% {
		opacity: 1;
		-ms-transform: translateY(0px);
	}

	25% {
		opacity: 1;
		-ms-transform: translateY(0px);
	}

	30% {
		opacity: 0;
		-ms-transform: translateY(0px);
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.wthree-btn {

	position: relative;
	/* 设置元素为相对定位，以便子元素可以使用绝对定位相对于它进行定位 */
	display: inline-block;
	/* 将元素设置为行内块级元素 */
	overflow: hidden;
	/* 隐藏超出元素边界的内容 */
	padding: 11px 20px;
	/* 设置内边距，上下为11px，左右为20px */
	color: #fff;
	/* 设置字体颜色为白色 */
	z-index: 9;
	/* 设置元素的层叠顺序为9，确保它位于其他z-index较低的元素之上 */
	font-size: 1em;
	/* 设置字体大小为1em */
	outline: none;
	/* 移除元素被聚焦时的轮廓线 */
	letter-spacing: 4px;
	/* 设置字符间距为4px */
	font-weight: 300;
	/* 设置字体权重为300（轻） */
	background-color: #ff304f;
	/* 设置背景颜色为#ff304f（一种红色） */
	-webkit-transition: .5s all;
	/* 为基于WebKit的浏览器设置所有可动画属性的过渡效果为0.5秒 */
	-moz-transition: .5s all;
	/* 为Mozilla Firefox浏览器设置过渡效果 */
	-o-transition: .5s all;
	/* 为Opera浏览器设置过渡效果 */
	-ms-transition: .5s all;
	/* 为IE浏览器设置过渡效果 */
	transition: .5s all;
	/* 为所有支持transition属性的浏览器设置过渡效果 */
	border-radius: 20px 0 0;
	/* 设置元素的圆角边框，仅左上角为20px */
	margin-top: 2em;
	/* 设置上边距为2em */
}

.wthree-btn.btn-6 span {

	position: absolute;
	/* 设置span为绝对定位 */
	display: block;
	/* 将span设置为块级元素 */
	width: 0;
	/* 初始宽度为0 */
	height: 0;
	/* 初始高度为0 */
	-webkit-border-radius: 50%;
	/* 为基于WebKit的浏览器设置span的圆角边框为50%（圆形） */
	-moz-border-radius: 50%;
	/* 为Mozilla Firefox浏览器设置圆角边框 */
	-o-border-radius: 50%;
	/* 为Opera浏览器设置圆角边框 */
	-ms-border-radius: 50%;
	/* 为IE浏览器设置圆角边框 */
	border-radius: 50%;
	/* 为所有支持border-radius属性的浏览器设置圆角边框 */
	background-color: #1796f8;
	/* 设置背景颜色为黑色 */
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	/* 为基于WebKit的浏览器设置宽度和高度的过渡效果 */
	-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	/* 为Mozilla Firefox浏览器设置过渡效果 */
	-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	/* 为Opera浏览器设置过渡效果 */
	-ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	/* 为IE浏览器设置过渡效果 */
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	/* 为所有支持transition属性的浏览器设置过渡效果 */
	-webkit-transform: translate(-50%, -50%);
	/* 为基于WebKit的浏览器设置span的位移，使其中心对齐父元素的中心 */
	-moz-transform: translate(-50%, -50%);
	/* 为Mozilla Firefox浏览器设置位移 */
	-o-transform: translate(-50%, -50%);
	/* 为Opera浏览器设置位移 */
	-ms-transform: translate(-50%, -50%);
	/* 为IE浏览器设置位移 */
	transform: translate(-50%, -50%);
	/* 为所有支持transform属性的浏览器设置位移 */
	z-index: -1;
	/* 设置span的层叠顺序为-1，确保它位于父元素之下 */
}

/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，或者该按钮获得焦点时，设置文字颜色为白色 */
.wthree-btn.btn-6:hover,
.wthree-btn.btn-6:focus {

	color: #fff;
}

/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，其内部的 span 元素的宽度设置为 225%，高度设置为 562.5px */
.wthree-btn.btn-6:hover span {

	width: 225%;
	height: 562.5px;
}

/* 当用户激活(通常是点击)类名为 .wthree-btn 且同时具有 .btn-6 的按钮时，设置背景颜色为 #FFC107 (一种黄色) */
.wthree-btn.btn-6:active {

	background-color: #FFC107;
}

/* 设置 h3 元素带有类名 .tittle-w3ls 的文字颜色为黑色，字体大小为 3.7em，字母间距为 1px，文本居中对齐，底部外边距为 50px */
h3.tittle-w3ls {

	/* 设置背景渐变 */
	background: linear-gradient(to bottom, #3ad3ee, #2fb6ff, #00acfc, #1655c1, deepskyblue, cadetblue);
	/* 裁剪背景，使其只显示在文本上 */
	-webkit-background-clip: text;
	/* 隐藏文本的默认填充颜色 */
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-size: 3.7em;
	letter-spacing: 1px;
	text-align: center;
	margin-bottom: 20px;
	/* 设置下边距 */
}

.we {

	/*margin: 20px 0; !* 可选，增加容器上下的外边距 *!*/
	text-align: center;
	/* 使容器内的内容居中对齐 */
	margin-bottom: 5px;
	/* 设置联系方式与邮箱之间的上边距 */
	font-weight: bold;
	/* 可选，加粗联系方式标签 */
	color: #0f1011;
}


.email-link {

	display: block;
	/* 确保邮箱链接作为块级元素显示，从而独占一行 */
	margin-top: 5px;
	/* 设置邮箱链接与联系方式之间的上边距（实际是块级元素的上外边距） */
	margin-bottom: 5px;
	/* 设置邮箱链接下方的外边距，如果需要的话 */
	color: #0f1011;
	/* 设置链接文字颜色 */
	text-decoration: none;
	/* 去掉链接下划线 */
	font-size: 16px;
	/* 可选，调整链接字体大小 */
	transition: 0.3s;
	/* 设置过渡效果持续时间为0.3秒 */
}

.email-link:hover {

	text-decoration: underline;
	/* 鼠标悬停时显示下划线 */
	color: #0ecff7;
}


/* 设置 h3 元素带有类名 .tittle-w3ls 内部 span 元素的文字颜色为 #0ecff7 (一种蓝色) */
h3.tittle-w3ls span {

	color: #0ecff7;
}

/*为多个类名设置相同的样式：内边距为上下各 1em，左右为 0 */
.banner-bottom-agileits,
.education-agileinfo,
.stats-w3layouts,
.expert-agile,
.experience-w3layouts,
.services-w3-agile,
.contact-w3l {

	padding: 20px 0;
}

.banner_bottom_left-w3ls {

	margin-right: 20px;
}

/* 设置 .banner_bottom_left-w3ls 内部 h4 元素的字体大小为 2.2em，颜色为 #262c38 (一种深蓝色)，字母间距为 2px，底部外边距为 20px */
.banner_bottom_left-w3ls h4 {

	font-size: 2.2em;
	color: #262c38;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

/* 设置 .banner_bottom_left-w3ls 内部 p 元素的文字颜色为 #666 (一种灰色)，行高为 2em，底部外边距为 1em */
.banner_bottom_left-w3ls p {

	color: #666;
	line-height: 2em;
	margin-bottom: 1em;
}

/* 设置 .banner_bottom_left-w3ls 内部第三个 p 元素的底部外边距为 0 */
.banner_bottom_left-w3ls p:nth-child(3) {

	margin-bottom: 0;
}

/* 为 .banner_bottom_right-w3l 设置内边距为上下 20px，左右 50px，并添加各种浏览器兼容的阴影效果 */
.banner_bottom_right-w3l {

	padding: 20px 50px;
	margin-top: 20px;
	/* 上边距 */
	margin-bottom: 30px;
	/* 下边距 */
	/*margin-left: 500px;*/
	/*margin-right: 50px;*/
	box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}

/* 设置 ul.some_facts 内部 li 元素的样式：无列表符号，上下外边距为 15px，文字颜色为 #444 (一种深灰色)，字体大小为 1.1em，字母间距为 1px */
ul.some_facts li {

	list-style: none;
	margin: 15px 0;
	color: #444;
	font-size: 1.1em;
	letter-spacing: 1px;
}

/* 设置 ul.some_facts 内部 span.fa 元素的样式：颜色为 #ff304f (一种红色)，宽度和高度均为 60px，背景色为白色，文本居中对齐，行高为 57px，
   右侧外边距为 30px，边框为 1px 黑色实线，并添加各种浏览器兼容的阴影效果 */
ul.some_facts span.fa {

	width: 60px;
	font-size: 21px;
	height: 60px;
	background: #fff;
	text-align: center;
	line-height: 57px;
	margin-right: 30px;
	border: 1px solid #000;
	box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
	-o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}

/* 设置 ul.some_facts 内部 label 元素的字体大小为 1.6em，颜色为黑色，右侧外边距为 12px */
ul.some_facts label {

	font-size: 1.6em;
	color: #000;
	margin-right: 12px;
}

.stats-w3layouts {
	text-align: center;
}

/* 设置 .stats-grid-w3-agile 的上下外边距为各 4em */
.stats-grid-w3-agile {

	margin: 10em 0;
}

/* 为类名为 .stats-info 下的 p 元素设置颜色为 #e6e6e6，字母间距为 3px，字体大小为 20px，以及字体权重为 300 */
.stats-info p {

	color: #e6e6e6;
	letter-spacing: 3px;
	font-size: 20px;
	font-weight: 300;
}

/* 为类名为 .right1-w3ls 和 .left1-w3ls 下的 h3 元素设置颜色为 #000，文本转换为大写，下外边距为 .5em，字体大小为 21px，以及字母间距为 1px */
.right1-w3ls h3,
.left1-w3ls h3 {

	color: #000;
	text-transform: uppercase;
	margin-bottom: .5em;
	font-size: 21px;
	letter-spacing: 1px;
}

/* 为类名为 .right1-w3ls 和 .left1-w3ls 下的 p 元素设置字体大小为 15px，字母间距为 .5px，以及颜色为 #909090 */
.right1-w3ls p,
.left1-w3ls p {

	font-size: 15px;
	letter-spacing: .5px;
	color: #909090;
}

/* 为类名为 .right1-w3ls 的元素设置下外边距为 3em，左文字安全下边距 */
.right1-w3ls {

	margin-bottom: 3em;
}

/* 为类名为 .left1-w3ls 的元素设置下外边距为 7em，文本右对齐，右内边距为 4em，以及相对定位，右文字下边距 */
.left1-w3ls {

	margin-bottom: 3em;
	text-align: right;
	padding-right: 4em;
	position: relative;
}

/* 为类名为 .left1-w3ls 下的 span 元素设置绝对定位，位置在父元素的右侧 -11% 和顶部 -4%，字体大小为 38px，以及颜色为 #ff304f */
.left1-w3ls span {

	position: absolute;
	right: -11%;
	top: -4%;
	font-size: 38px;
	color: #ff304f;
}

/* 为类名为 .left1-w3ls 的第四个子元素设置下外边距为 0em */
.left1-w3ls:nth-child(4) {

	margin-bottom: 0em;
}

/* 为类名为 .right1-w3ls 的第四个子元素设置下外边距为 0em */
.right1-w3ls:nth-child(4) {

	margin-bottom: 0em;
}

/* 为类名为 .eduright-agileinfo 的元素设置左内边距为 5em */
.eduright-agileinfo {

	padding-left: 5em;
}

/* 为类名为 .eduleft-agileinfo 的元素设置右侧一个半透明的黑色边框 */
.eduleft-agileinfo {

	border-right: 1px solid rgba(8, 8, 8, 0.25);
}

/* 为类名为 .left1-w3ls 下的 h3 元素设置颜色为 #0ecff7 */
.left1-w3ls h3 {

	color: #0ecff7;
}

/* 为类名为 .eduleft-agileinfo 和 .eduright-agileinfo 的元素设置上外边距为 1.5em */
.eduleft-agileinfo,
.eduright-agileinfo {

	margin-top: 1.5em;
}

/* 为类名为 .expert-agile 的元素设置背景颜色为 #0ecff7 */
.expert-agile {

	background: #0ecff7;
}

/* 为类名为 .expert-agile 下的 h3.tittle-w3ls span 元素设置颜色为 #fff */
.expert-agile h3.tittle-w3ls span {

	color: #fff;
}

/* 为类名为 .w3-agileits-services-w3-agile-grids 的元素设置上外边距为 4em */
.w3-agileits-services-w3-agile-grids {

	margin: 4em 0 0 0;
}

/* 为类名为 .services-w3-agile-right-grid 的元素设置文本居中对齐 */
.services-w3-agile-right-grid {

	text-align: center;
}

/* 为#toTop元素设置样式，这是一个返回顶部的按钮 */
#toTop {

	display: none;
	/* 默认不显示 */
	text-decoration: none;
	/* 移除下划线 */
	position: fixed;
	/* 固定定位 */
	bottom: 24px;
	/* 距离底部24px */
	right: 1%;
	/* 距离右侧1% */
	overflow: hidden;
	/* 溢出隐藏 */
	z-index: 999;
	/* 设置较高的层叠顺序，确保按钮在其他元素之上 */
	width: 64px;
	/* 宽度为64px */
	height: 64px;
	/* 高度为64px */
	border: none;
	/* 无边框 */
	text-indent: 100%;
	/* 文本缩进，使文字不可见 */
	background: url("../images/move-up.png") no-repeat 0px 0px;
	/* 设置背景图片，不重复显示 */
}

/* 为#toTopHover元素设置样式，这是#toTop的悬停状态 */
#toTopHover {

	width: 64px;
	/* 宽度为64px */
	height: 64px;
	/* 高度为64px */
	display: block;
	/* 块级显示 */
	overflow: hidden;
	/* 溢出隐藏 */
	float: right;
	/* 右浮动 */
	opacity: 0;
	/* 透明度为0，默认不可见 */
	-moz-opacity: 0;
	/* 针对Mozilla浏览器的透明度设置 */
	filter: alpha(opacity=0);
	/* 针对IE浏览器的透明度滤镜 */
}

/* 当屏幕宽度小于或等于1280px时，应用以下样式 */
@media(max-width: 1280px) {

	.banner-left-wthree h2 {

		font-size: 50px;
		/* 设置字体大小为50px */
		height: 35px;
		/* 设置元素高度为35px，这可能导致内容溢出或截断，通常不建议为文本元素设置固定高度 */
	}

	.banner-w3l {

		margin-top: 1px;
		/* 设置上边距为1px */
	}
}

/* 对所有元素应用以下样式 */
* {

	-webkit-box-sizing: border-box;
	/* 设置元素的box-sizing属性为border-box，以便padding和border包含在元素的总宽度和高度中 */
}

/* 对具有类img-responsive的元素应用以下样式 */
.img-responsive {

	max-width: 100%;
	/* 设置最大宽度为其父容器宽度的100%，用于响应式图片 */
}

/* 对h1, h2, h6元素应用以下通用样式 */
h1,
h2,
h6 {

	font-family: inherit;
	/* 继承父元素的字体家族 */
	font-weight: 500;
	/* 设置字体粗细为500 */
	line-height: 1;
	/* 设置行高为1，意味着字体高度和行高相同 */
	color: inherit;
	/* 继承父元素的颜色 */
}

/* 对h1和h2元素应用以下通用样式 */
h1,
h2 {
	margin-top: 10px;
	/* 设置上边距为20px */
	margin-bottom: 10px;
	/* 设置下边距为10px */
}

/* 对具有类container的元素应用以下样式 */
.container {

	padding-right: 55px;
	/* 设置右内边距为55px */
	padding-left: 55px;
	/* 设置左内边距为55px */
}

/* 对具有类col-xs-4和col-xs-8的元素应用以下通用样式 */
.col-xs-4,
.col-xs-8 {

	float: left;
	/* 设置元素浮动到左侧 */
}

/* 对具有类col-xs-8的元素应用以下样式 */
.col-xs-8 {

	width: 60.66666667%;
	/* 设置元素宽度为其父容器宽度的66.66666667% */
}

/* 对具有类col-xs-4的元素应用以下样式 */
.col-xs-4 {

	width: 33.33333333%;
	/* 设置元素宽度为其父容器宽度的33.33333333% */
}

/* 当屏幕宽度大于或等于992px时，应用以下样式 */
@media (min-width: 992px) {

	.col-md-6 {

		float: right;
		/* 设置元素浮动到左侧 */
		/*width: 50%; !* 设置元素宽度为其父容器宽度的50% *!*/

	}
}


.welcome-sub-agileits {

	display: flex;
	/* 使用Flexbox布局 */
	justify-content: space-between;
	/* 在子元素之间添加空间 */
	align-items: center;
	/* 垂直居中子元素（可选） */
	/* 如果需要，可以添加一个额外的内边距或外边距来调整整体间距 */
	padding: 0 15px;
	/* 例如，左右各15px的内边距 */
}

.banner_bottom_left-w3ls,
.banner_bottom_right-w3l {

	/* 设置子容器的宽度，确保它们的总和不超过父容器的宽度 */
	flex: 0 0 auto;
	/* 防止子容器在必要时换行 */
	width: calc(50% - 15px);
	/* 假设你想要它们各占50%的宽度，并减去一些间距 */
	/* 你可以根据需要调整宽度和间距 */
}

/* 当屏幕宽度大于或等于768px时，应用以下样式 */
@media (min-width: 768px) {

	.navbar-header {

		float: left;
		/* 设置元素浮动到左侧 */
	}
}

/* 对具有类container的元素后的伪元素:after应用以下样式，用于清除浮动 */
.container:after,
.navbar-collapse:before {
	/* 对具有类navbar-collapse的元素前的伪元素:before应用以下样式（此处只定义了:before，但未使用） */
	display: table;
	/* 使元素以块级表格显示，用于清除浮动 */
	content: " ";
	/* 设置内容为空格 */
}

/* 对具有类container的元素后的伪元素:after应用以下样式，进一步清除浮动 */
.container:after {

	clear: both;
	/* 清除元素前后的浮动 */
}

/* 导航栏样式 */
/* 设置.top-nav类的样式，用于顶部导航栏 */
.top-nav {

	background: #333;
	/* 背景颜色设置为#333（深灰色） */
	padding: 1em 0;
	/* 上下内边距为1em，左右为0 */
}

/* 设置标题的样式 */
.navbar-header h1 {

	color: #3aa0e9;
	/* 设置文字颜色为白色 */
	font-size: 2.5em;
	/* 设置字体大小为1.5倍于当前字体大小 */
}

/* 设置.nav下的li中的a标签的样式 */
.nav li a {

	color: #fff;
	/* 设置文字颜色为白色 */
	padding: 0.5em 1em;
	/* 设置内边距，上下为0.5em，左右为1em */
	text-decoration: none;
	/* 去掉下划线装饰 */
	display: inline-block;
	/* 设置元素为行内块，使其能在一行显示同时可以设置宽高 */
	transition: 0.3s;
	/* 设置过渡效果，持续时间为0.3秒，用于鼠标悬停等交互效果 */
}

/* 设置.nav下的li中的a标签在鼠标悬停或处于活动状态时的样式 */
.nav li a:hover,
.nav li a.active {
	border-radius: 5px;
	/* 设置圆角半径为5像素，使背景呈现圆角效果 */
}

/* Banner区域样式 */

/* 设置.banner-w3l类的样式，通常用于页面顶部的横幅区域 */
.banner-w3l {

	background-size: cover;
	/* 设置背景图片大小覆盖整个元素，保持比例 */
	padding: 6em 0;
	/* 设置上下内边距为6em，左右为0 */
	color: #fff;
	/* 设置文字颜色为白色 */
	text-align: center;
	/* 设置文本居中对齐 */
}

/* 设置.banner-left-agile下的img标签的样式 */
.banner-left-agile img {

	width: 200px;
	/* 设置图片宽度为200像素 */
	height: 200px;
	/* 设置图片高度为200像素 */
	border-radius: 50%;
	/* 设置圆角半径为50%，使图片呈现圆形 */
}

.banner-left-agile img.animated-img {

	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	left: 100px;
	/* 初始位置左移100px（根据需要调整） */
	top: -300px;
	/* 初始位置在顶部之上（根据动画需求调整） */
	/* 应用三个动画，每个动画在前一个完成后开始 */
	animation: slideDownBounce 3.5s forwards,
		shrinkAndMove 1.2s forwards 1.5s,
		rotate 3s linear infinite 4.7s;
}

@keyframes slideDownBounce {

	0% {

		top: -300px;
		/* 初始位置 */
		opacity: 0;
		transform: scale(3);
		/* 初始时放大3倍（这里您之前写的是1.5倍，但注释写的是放大1.5倍，我根据代码实际值写了3倍） */
	}

	50% {

		top: 0;
		/* 滑动到目标位置 */
		opacity: 1;
		transform: translateY(-20px) scale(1.1);
		/* 弹跳效果 */
	}

	70% {

		transform: translateY(0);
		/* 回到正常位置 */
	}

	100% {

		top: 0;
		/* 保持在目标位置 */
		transform: scale(1.1);
		/* 稍微放大一点 */
	}
}

@keyframes shrinkAndMove {

	0% {

		transform: scale(1.1);
		/* 继承上一个动画的结束状态 */
		left: 100px;
		/* 初始左移位置 */
	}

	100% {

		transform: scale(1);
		/* 缩小到原始大小 */
		left: 0;
		/* 移动到最终位置 */
	}
}

@keyframes rotate {

	from {

		transform: rotate(0deg);
		/* 从稍微放大的状态开始，并设置初始角度为0度 */
	}

	to {

		transform: rotate(360deg);
		/* 结束角度为360度，即旋转一圈 */
	}
}


/* 设置.banner-left-wthree下的h2标签的样式 */
.banner-left-wthree h2 {

	font-size: 2.5em;
	/* 设置字体大小为2.5倍于当前字体大小 */
	margin: 1em 0 0em;
	/* 设置外边距，上为1em，右左为0，下为0.5em */
}

.popEffect span {

	display: block;
	/* 将span元素设置为块级元素，使其独占一行 */
	font-size: 1.5em;
	/* 字体大小设置为1em（相对于父元素的字体大小） */
	margin: 0.3em 0;
	/* 上下边距设置为0.3em，左右边距为0 */
	color: #bb00ff;
	/* 字体颜色设置为 */
	transition: 1s;
	/* 设置所有可动画属性的过渡效果为1秒 */
}

/*按钮初始*/
.wthree-btn {

	display: inline-block;
	/* 将元素设置为行内块级元素，既可以在行内显示又可以设置宽高 */
	padding: 0.7em 2em;
	/* 内边距设置为上下0.7em，左右2em */
	color: #fff;
	/* 字体颜色设置为白色 */
	background: #0d131a;
	/* 背景颜色设置为#007BFF（一种蓝色） */
	text-transform: uppercase;
	/* 文本转换为大写 */
	border: none;
	/* 去掉元素的边框 */
	position: relative;
	/* 设置元素为相对定位，以便子元素可以使用绝对定位相对于它进行定位 */
	overflow: hidden;
	/* 隐藏超出元素边界的内容 */
	z-index: 1;
	/* 设置元素的层叠顺序为1，确保它位于其他z-index较低的元素之上 */
	transition: 0.3s;
	/* 设置所有可动画属性的过渡效果为0.3秒 */
}

.wthree-btn:hover {

	background: #054b93;
	/* 当鼠标悬停在按钮上时，背景颜色变为#0056b3（一种较深的蓝色） */
}

.wthree-btn:hover span {

	left: 0;
	/* 当鼠标悬停在按钮上时，将span的位置设置为左侧0%，使其滑入视图 */
}

/* 对具有类left1-w3ls和right1-w3ls下的p元素应用以下样式 */
.left1-w3ls p {

	font-size: 1em;
	/* 设置字体大小为1em */
	color: #777;
	/* 设置文本颜色为#777（灰色调） */
	line-height: 2em;
	/* 设置行高为1.8em */
}

.right1-w3ls p {

	font-size: 1em;
	/* 设置字体大小为1em */
	color: #777;
	/* 设置文本颜色为#777（灰色调） */
	line-height: 2em;
}

/* 对具有类gallery-agile的元素应用以下样式 */
.gallery-agile {

	padding: 20px 0;
	/* 设置上下内边距为4em，左右内边距为0 */
	background: #f5f5f5;
	/* 设置背景颜色为#f5f5f5（浅灰色调） */
}

/* 对具有类gallery-agile-grids的元素应用以下样式 */
.gallery-agile-grids {

	padding: 0.5em;
	/* 设置四个方向的内边距均为0.5em */
}

/* 对具有类portfolio-hover下的img元素应用以下样式 */
.portfolio-hover img {

	width: 100%;
	/* 设置图片宽度为父元素宽度的100% */
	transition: 0.3s;
	/* 设置过渡效果持续时间为0.3秒 */
}

/* 对具有类portfolio-hover下的img元素在悬停状态时应用以下样式 */
.portfolio-hover img:hover {

	transform: scale(1.1);
	/* 悬停时放大图片至原尺寸的1.1倍 */
}

/* Footer（页脚） */
/* 对具有类footer-bot-wthree的元素应用以下样式 */
.footer-bot-wthree {

	padding: 2em 0;
	/* 设置上下内边距为2em，左右内边距为0 */
	background: #333;
	/* 设置背景颜色为#333（深灰色调） */
	text-align: center;
	/* 设置文本居中对齐 */
	color: #fff;
	/* 设置文本颜色为#fff（白色） */
}

/* 对具有类copy-right-agile下的a元素应用以下样式 */
.copy-right-agile a {

	color: #007BFF;
	/* 设置链接颜色为#007BFF（蓝色） */
	text-decoration: none;
	/* 移除链接的下划线 */
	transition: 0.3s;
	/* 设置过渡效果持续时间为0.3秒 */
}

/* 对具有类copy-right-agile下的a元素在悬停状态时应用以下样式 */
.copy-right-agile a:hover {

	color: #FF6347;
	/* 悬停时改变链接颜色为#FF6347（橙色） */
}

/* 对具有类scroll的元素应用以下样式 */
.scroll {

	cursor: pointer;
	/* 设置鼠标悬停时的光标样式为指针 */
}

.about_div {
	width: 1000px;
	margin: 30px auto;
	display: flex;
	overflow: hidden;

	.left {
		flex-shrink: 0;
		margin-right: 20px;

		img {
			width: 500px;
		}
	}

	.right {
		flex-grow: 1;

		p {
			font-size: 15px;
			color: #333;
		}
	}
}

.copy {
	line-height: 45px;
	background: #000;
	text-align: center;
	color: #999;
	a{
		color: #999;
	}
}