caimei-authentic-ross-static/css/cooperative.scss

.banner {
	width: 100%;
	height: 530px;
	img {
		width: 100%;
		height: 100%;
		display: block;
	}
}
.main {
	height: auto;
	box-sizing: border-box;
	.cooperative-tab {
		width: 100%;
		height: 100px;
		background-color: #f7f7f7;
		.tab-item-last {
			display: block;
			width: 300px;
			float: left;
			height: 100%;
			box-sizing: border-box;
			padding: 25px 0;
			position: relative;
			h1 {
				font-size: 24px;
				color: #272727;
				line-height: 30px;
				text-align: center;
			}
			p {
				font-size: 12px;
				color: #272727;
				line-height: 20px;
				text-align: center;
			}
		}
		.tab-item {
			display: block;
			width: 300px;
			float: left;
			height: 100%;
			box-sizing: border-box;
			padding: 25px 0;
			position: relative;
			&.select {
				h1 {
					color: #0688d2;
				}
				p {
					color: #0688d2;
				}
				&::before {
					content: '';
					width: 0;
					height: 0;
					border-left: 9px solid transparent;
					border-right: 9px solid transparent;
					border-bottom: 9px solid #0688d2;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -5px;
				}
			}
			.line {
				display: block;
				width: 1px;
				height: 32px;
				background-color: #dbdbdb;
				position: absolute;
				right: 0;
				top: 35px;
			}
			h1 {
				font-size: 24px;
				color: #272727;
				line-height: 30px;
				text-align: center;
			}
			p {
				font-size: 12px;
				color: #272727;
				line-height: 20px;
				text-align: center;
			}
		}
	}
	.cooperative-main {
		width: 100%;
		min-width: 1000px;
		box-sizing: border-box;
		padding: 60px 0;
		.cooperative-main-item {
			display: none;
			&.select {
				display: block;
			}
			.main-title {
				width: 400px;
				margin: 0 auto;
				position: relative;
				img {
					margin: 0 auto;
					display: block;
					height: 50px;
				}
				p {
					width: 100%;
					height: 30px;
					line-height: 30px;
					font-size: 34px;
					color: #272727;
					text-align: center;
					position: absolute;
					bottom: -12px;
					left: 0;
				}
			}
			.main-content {
				width: 100%;
				height: auto;
				margin-top: 100px;
				.main-content-item {
					width: 286px;
					height: 592px;
					float: left;
					.item {
						width: 286px;
						height: 286px;
						overflow: hidden;
						&:hover {
							img {
								transform: scale(1.2);
							}
						}
						img {
							width: 286px;
							height: 286px;
							display: block;
							transition: all 0.4s;
						}
						&.first {
							margin-bottom: 18px;
						}
					}
				}
				.main-content-mids {
					width: 592px;
					height: 592px;
					float: left;
					margin: 0 18px;
					.item {
						width: 592px;
						height: 592px;
						overflow: hidden;
						&:hover {
							img {
								transform: scale(1.2);
							}
						}
						img {
							width: 592px;
							height: 592px;
							display: block;
							transition: all 0.4s;
						}
					}
				}
				.main-content-serve {
					width: 400px;
					height: auto;
					padding: 30px 32px;
					box-sizing: border-box;
					transition: all 0.4s;
					cursor: pointer;
					float: left;
					&:hover {
						background-color: #fff;
						transform: translateY(-10px);
						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
					}
					.server-title {
						width: 336px;
						height: 216px;
						box-sizing: border-box;
						padding: 40px 0;
						background: url(/img/cooperative_server@2x.png);
						background-size: cover;
						.title {
							width: 100%;
							line-height: 45px;
							margin-top: 20px;
							position: relative;
							font-size: 34px;
							color: #ffffff;
							text-align: center;
							&::before {
								content: '';
								width: 16px;
								height: 2px;
								background-color: #fff;
								position: absolute;
								top: -8px;
								left: 50%;
								margin-left: -8px;
							}
						}
						img {
							width: 40px;
							height: 40px;
							display: block;
							margin: 0 auto;
						}
					}
					.server-text {
						width: 100%;
						height: auto;
						box-sizing: border-box;
						padding-top: 24px;
						p {
							line-height: 30px;
							font-size: 16px;
							color: #505050;
							&.max {
								display: none;
							}
						}
						.btn-show {
							display: block;
							width: 100px;
							height: 28px;
							text-align: center;
							box-sizing: border-box;
							border: 1px solid #e8e8e8;
							color: #999999;
							font-size: 12px;
							line-height: 28px;
							float: left;
							margin-top: 20px;
						}
					}
				}
				.main-content-mode {
					width: 580px;
					height: 180px;
					box-sizing: border-box;
					padding: 24px 12px;
					border: 1px solid #e8e8e8;
					margin-right: 40px;
					margin-bottom: 40px;
					transition: all 0.5s;
					float: left;
					&:hover {
						transform: translateY(-10px);
						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
					}
					&:nth-child(2n) {
						margin-right: 0;
					}
					.mode-label {
						width: 56px;
						height: 100%;
						float: left;
						img {
							width: 56px;
							height: 56px;
							float: left;
						}
					}
					.mode-content {
						width: 500px;
						height: 100%;
						margin-left: 12px;
						h1 {
							font-size: 24px;
							color: #272727;
							line-height: 32px;
							text-align: left;
							margin-bottom: 10px;
						}
						p {
							font-size: 16px;
							color: #505050;
							line-height: 25px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
}