
.network-wrap .layout{
	padding: 0 50px;
}
/* 父网络 */
.network-wrap{
	position: relative;
	width: 100%;
	height: 50vh;
}
.mainNetwork{
	height: 120px;
	display: flex;
	justify-content: space-evenly;
	// align-items: center;
    align-items: flex-start;
}
.networkItem{
	position: relative;
	width: 130px;
	height: 112px;
	text-align: center;
	font-weight: 400;
	cursor: pointer;
}

.networkItem .topMask{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgb(255 255 255 / 50%);
}
//点击时的大类背景色
.networkItem.active .topMask{
    // background: linear-gradient(to top,#4f50b95c,#fff9f900);
	// border-bottom: 1px solid #00c;
}

.networkItem .topCont{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: center;
	background: #fff url('~@/assets/image/instruct/network_default.png') no-repeat center;
	background-size:  126px 112px;
    color: #7484AB;
}
.networkItem.active .topCont{
    background: #fff url('~@/assets/image/instruct/network_hub.png') no-repeat center;
    background-size: 126px 112px;
}
.networkItem .topCont .subtitle{
	display: block;
    font-size: 16px;
	color: #7484AB;
}

.networkItem .title{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
    font-size: 18px;
    color: #7484AB;
}
.networkItem.active .title{
	opacity: 1;
    color: #255CE7;
}

.networkItem.active .topCont,.networkItem.active .topDesc {
	color: #255CE7;
    font-size: 18px;
}
.networkItem.active .topCont .subtitle{
    color: #FFCB11;
    font-size: 16px;
}
.networkItem .line{
	width: 3px;
	height: 20px;
	position: absolute;
	top: 100%;
	transform: translateY(1px);
	z-index: 2;
}
.networkItem .line.green{
	background-color: green;
}

/* 子网格 */
.subNetwork{
	margin-top: 62px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.subNetworkItem{
	position: relative;
	font-size: 12px;
	text-align: center;
	flex-basis: 11%;
	height: 120px;
	/* margin-bottom: 20px; */
}
.subNetworkItem .subNetworkLine{
	width: 20px;
	display: block;
	position: absolute;
	bottom: 65px;
	border-width: 3px;
	border-style: solid;
	border-top: none;
	border-right: none;
}
.subNetworkItem .subNetworkMask{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(255 255 255 / 50%);
	z-index: 1;
}
.subNetworkItem .subNetworkImg{
	// width: 50px;
	position: relative;
	left: 45%;
	transform: translateX(-50%);
}
.subNetworkInfo{
	transform: scale(.9);
}
.subNetworkItem .subNetworkName{
	font-weight: bold;
}
.subNetworkItem .subNetworkID{
	color: #999;
}
.subNetworkItem .subNetworkImg img{
	width: 80px;
    height: 80px;
    // width: 100%;
}

/* 线条 */
.networkLine{
	position: absolute;
	top: 139px;
	left: 0;
	width: 100%;
	height: auto;
}
.networkLine .mainLine{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	cursor: pointer;
}
.mainLine .lineTag{
	width: 25px;
	text-align: center;
	font-size: 13px;
	transform: scale(0.9);
	font-weight: bold;
}
.mainLine .line{
	margin: 0;
	width: 100%;
	height: 3px;
	margin-left: -5px;
}


