/* lineyoyo.html 页面专用样式
   （原先内联在 template/lineyoyo.html 的 <style> 里，这里统一外置；
     通过 base_beike.html 的 {% block head %} 在 css.css 之后加载，覆盖顺序与原来一致） */

/* 文字上移 */
.banner .wrapin {
	padding: 0px 60px;
}
.banner .wrapin dt {
	font-size: 2em;
	margin-bottom: 5px;
}
.banner .wrapin dd {
	font-size: 1.5em;
	margin-bottom: 1px;
}
/* 小圆点垂直居中靠右 */
.banner .btns {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.banner .btns span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}
.banner .btns span.hover {
	background: #fff;
}

/* 三个切换按钮 */
.tab-buttons {
	padding: 10px;
	padding-top: 20px;
	padding-left: 40%;
}
.tab-btn {
	display: inline-block;
	text-decoration: none;
	padding: 10px 30px;
	border: none;
	border-radius: 8px;
	background: #dd3333;
	color: #fff;
	cursor: pointer;
}
.tab-btn.active {
	background: #0066cc;
	color: #fff;
}

/* 手机上 60px 的左右内边距会吃掉大半屏宽，字号也要收 */
@media (max-width: 768px) {
	.banner .wrapin {
		padding: 0 12px;
	}
	.banner .wrapin dt {
		font-size: 1.25em;
	}
	.banner .wrapin dd {
		font-size: 1em;
	}
	.banner .btns {
		right: 12px;
	}
	/* 40% 的左内边距在手机上会把按钮推出屏幕，改为居中换行 */
	.tab-buttons {
		padding: 10px 12px 0 12px;
		display: block !important;
		text-align: center;
	}
	.tab-btn {
		padding: 8px 14px;
		font-size: 13px;
		margin: 0 4px 6px 0;
	}
}