﻿/* 首页CSS */
#wrap-home {
	overflow: auto;
	height: 100vh;
}

/* 轮播图容器 */
#wrap-home .carousel-container {
	position: relative;
	display: flex;
	height: calc(100vw * 0.26);
	/*(500/1920=0.26(原图比例))*/
	justify-content: center;
}

#wrap-home .carousel-images {
	width: 100%;
	height: 100%;
	position: relative;
}

/* 轮播图项 */
#wrap-home .carousel-item {
	width: 100%;
	height: 100%;
	position: absolute;
	transition: opacity 0.5s ease 0s;
	opacity: 0;
}

#wrap-home .carousel-checked {
	opacity: 1 !important;
}

#wrap-home .carousel-item:nth-child(1) {
	opacity: 1;
}

/* 轮播图圆点容器 */
#wrap-home .carousel-circles {
	display: flex;
	position: absolute;
	bottom: 18px;
	z-index: 1;
}

/* 轮播图、新闻轮播图圆点 */
#wrap-home .circles-item,
#wrap-home .circlesNews-item {
	width: 25px;
	height: 3px;
	cursor: pointer;
	transition: background-color 0.2s ease 0s;
	margin-right: 5px;
	background-color: #8c8fc7;
}

/* 轮播图、新闻轮播图圆点交互效果 */
#wrap-home .circles-item:hover,
#wrap-home .circlesNews-item:hover {
	background-color: #1078f0 !important;
}

#wrap-home .circles-checked,
#wrap-home .circlesNews-checked {
	background-color: #1078f0 !important;
}

/* 内容容器 */
#wrap-home .content-container {
	margin-top: 70px;
}

/* 内容标题 */
#wrap-home .title-container {
	text-align: center;
	margin-bottom: 50px;
}

/* 主标题 */
#wrap-home .main-title {
	font-size: 35px;
	color: #333333;
	font-weight: bold;
	margin-bottom: 5px;
}

/* 副标题 */
#wrap-home .deputy-title {
	font-size: 20px;
	color: #9a9a9a;
}

/* 产品中心 */
#wrap-home .product-list {
	width: 1200px;
	margin: 0px auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#wrap-home .product-item {
	display: flex;
	width: 500px;
	align-items: center;
	cursor: pointer;
	margin-top: 100px;
}

#wrap-home .product-item:nth-child(1),
#wrap-home .product-item:nth-child(2) {
	margin-top: 0px;
}

#wrap-home .product-item:hover,
#wrap-home .product-item:hover .product-name {
	color: #045dcc !important;
}

#wrap-home .product-item-checked {
	color: #045dcc !important;
}

#wrap-home .product-icon {
	height: 56px;
	margin-right: 45px;
}

#wrap-home .product-info {
	width: calc(100% - 45px);
}

#wrap-home .product-name {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #343434;
}

#wrap-home .product-desc {
	font-size: 14px;
	line-height: 20px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 新闻中心 */
#wrap-home .news-container {
	width: 1200px;
	margin: 0px auto;
	display: flex;
}

/* 新闻轮播图容器 */
#wrap-home .carouselNews-container {
	width: 590px;
	height: 410px;
	position: relative;
	overflow: hidden;
	margin-right: 30px;
	display: flex;
}

#wrap-home .carouselNews-images {
	display: flex;
}

#wrap-home .carouselNews-item {
	position: relative;
}

#wrap-home .carouselNews-image {
	width: 590px;
	height: 410px;
}

/* 新闻轮播图图片描述 */
#wrap-home .carouselNewsDesc-container {
	background-color: rgba(0, 0, 0, 0.5);
	height: 35px;
	position: absolute;
	width: 100%;
	bottom: 0px;
	z-index: 1;
}

#wrap-home .carouselNews-desc {
	width: calc(100% - 160px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
	text-indent: 15px;
	line-height: 35px;
}

/* 新闻轮播图按钮容器(描述遮罩层) */
#wrap-home .carouselNews-shade {
	position: absolute;
	bottom: 0px;
	height: 35px;
	width: 590px;
	line-height: 35px;
}

/* 按钮列表 */
#wrap-home .carouselNews-circles {
	height: 35px;
	width: 150px;
	display: flex;
	align-items: center;
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}

/* 按钮项 */
#wrap-home .circlesNews-item {
	background-color: #fff;
}

/* 新闻列表 */
#wrap-home .news-list {
	width: calc(100% - 620px);
}

/* 新闻列表项 */
#wrap-home .news-item {
	display: flex;
	cursor: pointer;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px #e5e5e5 solid;
}

/* 新闻交互效果 */
#wrap-home .news-item:hover {
	color: #045DCC !important;
}

#wrap-home .news-item:hover .news-desc,
#wrap-home .news-item:hover .news-title,
#wrap-home .news-item:hover .time-day,
#wrap-home .news-item:hover .time-month {
	color: #045DCC !important;
}

/* 时间容器 */
#wrap-home .time-info {
	text-align: center;
	width: 80px;
	height: 75px;
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

/* 日 */
#wrap-home .time-day {
	font-size: 30px;
	color: #666666;
}

/* 年月 */
#wrap-home .time-month {
	font-size: 16px;
	color: #686868;
}

/* 新闻信息 */
#wrap-home .news-info {
	margin-left: 20px;
	width: calc(100% - 100px);
}

/* 新闻标题 */
#wrap-home .news-title {
	font-size: 21px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333333;
	font-weight: bold;
	margin-bottom: 15px;
}

/* 新闻描述 */
#wrap-home .news-desc {
	color: #666666;
	font-size: 16px;
	line-height: 20px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 成功案例 */
#wrap-home .stories-container {
	text-align: center;
}

/* 菱形容器绘制 */
#wrap-home .stories-item {
	width: 235px;
	height: 235px;
	margin-top: -80px;
	/*绘制菱形*/
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* 编号菱形项 */
#wrap-home .serialNo-item {
	height: 112px !important;
}

#wrap-home .stories-image {
	width: 100%;
	height: 100%;
	/*绘制菱形*/
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* 图片列表 */
#wrap-home .stories-list {
	display: flex;
	justify-content: center;
	margin-top: 100px;
}

/* 图片 */
#wrap-home .stories-image {
	width: 100%;
	height: 100%;

}

/* 内容列表 */
#wrap-home .stories-list:nth-child(2) {
	margin-left: -233px;
	margin-top: -33px;
}

/* 编号列表 */
#wrap-home .stories-list:nth-child(3) {
	margin-left: -470px;
	margin-top: -33px;
}

/* 编号内容 */
#wrap-home .serialNo {
	margin-top: 52px;
	margin-left: 25px;
	width: 100%;
	font-size: 30px;
	color: #045DCC;
}

/* 内容背景图 */
#wrap-home .stories-content {
	background-image: url(../images/diamonds-content.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#wrap-home .content-item {
	margin-bottom: 10px;
	font-size: 16px;
	color: #000;
	white-space: nowrap;
	padding-left: 30px;
	padding-right: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* 其他 */
#wrap-home .serve-container {
	height: 490px;
	background-image: url(../images/service.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 70px;
	margin-bottom: 70px;
}

/* 列表 */
#wrap-home .serve-list {
	display: flex;
}

/* 列表项 */
#wrap-home .serve-item {
	width: 288px;
	height: 370px;
	margin-right: 20px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* 列表标题 */
#wrap-home .serve-title {
	font-size: 16px;
	font-weight: bold;
	color: #065cce;
	margin-top: 50px;
}

/* 小列表 */
#wrap-home .list {
	width: 100%;
	text-align: center;
	color: #666666;
	font-size: 14px;
	margin-top: 10px;
}

#wrap-home .list-item {
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	display:block;
}

/* 交互效果 */
#wrap-home .list-item:hover {
	color: #065cce;
}
