@import 'common.less';
.search-wrapper {
	border-top: 1px solid #eee;
	.result {
		margin-bottom: 0.2rem;
		span {
			.inline-block;
			font-size: var(--fs16);
			margin-right: 0.3rem;
			line-height: 0.48rem;
		}
		b {
			.inline-block;
			margin: 0 4px;
			color: @color;
			.bold;
			text-decoration: underline;
		}
	}
	.tips {
		.txt-center;
		font-size: var(--fs18);
		line-height: 30px;
		margin: .48rem auto 0;
		b {
			.bold;
			color: @color;
		}
	}
	.list {
		ul {
			list-style-type: none;
			.flex;
			.flex-wrap;
			margin-bottom: 0;
		}
		li {
			.rel;
			list-style: none;
			width: calc(~"(100% - .8rem) / 3");
			margin-right: 0.4rem;
			margin-top: 0.3rem;
			border: 1px solid #eee;
			border-radius: 5px;
			.transition(all,.48s);
			&:hover {
				.title {color: @color}
				border-color: #fff;
				box-shadow: 0 5px 10px rgba(0,0,0,.1);
				p {
					&:before {color: #000;}
					&:after {.after;.translateX(0px)}
				}
			}
			a {
				padding: .2rem .3rem;
				.block;
			}
		}
		.title {
			font-size: var(--fs18);
			color: #000;
			line-height: 24px;
			.transition(color,0.3s);
			.txt-over(3);
		}
		p {
			.txt-right;
			font-size: 0;
			margin-top: 0.2rem;
			&:before {
				.transition(all,.48s);
				.middle;
				content: "MORE";
				font-size: var(--fs16);
				color: #666;
			}
		}
	}
	@media @min1004 {
		.list li {
			&:nth-child(-n+3) {margin-top: 0;}
			&:last-child,
			&:nth-child(3n) {margin-right: 0;}
		}
	}
	@media @max1004 {
		.result {
			margin-bottom: 0.3rem;
			span {
				font-size: var(--fs14);
				margin-right: 0.48rem;
			}
		}
		.list {
			li {
				width: 100%;
				margin-right: 0;
				margin-top: 0.3rem;
				&:first-child {margin-top: 0;}
				a {
					padding: 0.3rem;
				}
			}
			.title {
				font-size: var(--fs18);
				line-height: 0.48rem;
				margin-right: 0.6rem;
			}
			p:before {color: #333;}
			p:after {
				.after;
				.translateX(0);
				width: 0.2rem;
				height: 0.2rem;
			}
		}
	}
}
