* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #f4f4f4;
	position: relative;
}

/* 临时 */
img {
	height: 20px;
}
/* 临时 */

.main-page {
	width: 100vw;
	height: 64vh;
	margin-bottom: 1vh;
	position: relative;
	background-color: #fff;
	border-bottom: 1px solid #e4e4e4;
}

.air-quality,
.high-temperature-warning {
	position: absolute;
}

.air-quality {
	z-index: 10;
	padding: 1vh;
	border-radius: 12px;
	background-color: #a3d765;
	color: #fff;
	top: 8vh;
	left: 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.main-page > .warning {
	position: absolute;
	height: 30vh;
	width: 35vw;
	top: 8vh;
	right: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: end;
}

.main-page > .warning .warning-message1 {
	height: 2.6vh;
	margin-bottom: 10px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 1.5vh 0 0 1.5vh;
	padding: 0 1vh;
	font-size: small;
	color: #fff;
	display: flex;
	align-items: center;
}

.main-page > .warning .warning-message1 > .circle {
	height: 0.8vh;
	width: 0.8vh;
	border-radius: 50%;
	background-color: Green;
	margin-right: 1vh;
}

.main-page > .top {
	position: relative;
	width: 100vw;
	height: 52vh;

	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	z-index: 5;
}

.main-page > .top > .background123,
.main-page > .top > .background4,
.main-page > .top > .gradient {
	position: absolute;
	width: 100vw;
	height: 52vh;
}
.main-page > .top > .background123 {
	background-image: url(../images/bg02.png), url(../images/bg03.png), url(../images/bg01.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 100%;
	z-index: -3;
}
.main-page > .top > .background4 {
	background-image: url(../images/bg04.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 100%;
	z-index: -1;
}

.main-page > .top > .gradient {
	background-image: linear-gradient(rgba(80, 173, 232, 1), 70%, rgb(255, 255, 255, 0));
	z-index: -2;
}

.main-page > .top > .location {
	width: 100vw;
	height: 5vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main-page > .top > .location > .back {
	height: 100%;
	width: 10vw;
	background-image: url(../images/arrow.png);
	background-size: 100% 100%;
}

.main-page > .top > .location > .share {
	height: 60%;
	width: 6vw;
	background-image: url(../images/link_icon.png);
	background-size: 100% 100%;
	margin-right: 8px;
}

.main-page > .top > .location > .location-word > img {
	height: 2vh;
	padding-top: 0.5vh;
	padding-right: 2px;
}

.main-page > .top > .latest-release {
	font-size: xx-small;
	height: 1.8vh;
	transform: translateY(-1vh);
	overflow: hidden;
}

.main-page > .top > .latest-release div {
	animation: opacity 10s linear 1 forwards;
}

.opacity-animation {
	animation: opacity 5s linear infinite;
}

@keyframes opacity {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.main-page > .top > .temperature {
	font-size: 7vh;
	font-weight: 500;
	margin-top: 5vh;
	margin-left: 24px;
}

.main-page > .top > .weather {
	font-size: 3vh;
}

.main-page > .top > .humidity-wind {
	margin-top: 1vh;
	height: 2vh;
	width: 20vw;
	font-size: small;
	position: relative;
}
.main-page > .top > .humidity-wind > .humidity,
.main-page > .top > .humidity-wind > .wind {
	position: absolute;
	animation: scroll-up 10s linear infinite;
}
.main-page > .top > .humidity-wind > .humidity {
	white-space: nowrap;
	left: 50%;
}
.main-page > .top > .humidity-wind > .wind {
	white-space: nowrap;
	left: 50%;
	opacity: 0;
	transform: translateY(100%);
	animation-delay: 5s; /* 风向动画延迟，确保湿度消失后开始 */
}
@keyframes scroll-up {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	5% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(0);
		opacity: 1;
	}
	55% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(-100%);
		opacity: 0;
	}
}

.main-page > .top > .greeting {
	margin-top: 5vh;
}

.main-page > .bottom {
	width: 100vw;
	height: 12vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5vw;
}

.main-page > .bottom > .today,
.main-page > .bottom > .tomorrow {
	height: 8vh;
	width: 40vw;
}

.main-page > .bottom > .today > .today-weather,
.main-page > .bottom > .today > .today-temperature,
.main-page > .bottom > .tomorrow > .tomorrow-weather,
.main-page > .bottom > .tomorrow > .tomorrow-temperature {
	display: flex;
	justify-content: space-between;
	margin-top: 1vh;
}

.main-page > .bottom > .line {
	width: 1px;
	height: 8vh;
	background-color: #f0f0f0;
}

.real-time-weather {
	height: 15vh;
	background-color: #fff;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 1vh;
	overflow: auto;
}
.real-time-weather > .flexbox {
	height: 100%;
	width: 390vw;
	display: flex;
	align-items: center;
}

.real-time-weather > .flexbox > div {
	height: 10vh;
	width: 15vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.real-time-weather > .flexbox > div > .time {
	font-size: xx-small;
	color: #999;
}
.real-time-weather > .flexbox > div > img {
	height: 3vh;
}

.weather-forecast {
	width: 100vw;
	overflow: auto;
	height: 45vh;
	background-color: #fff;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 1vh;
}

.weather-forecast > .day {
	width: 136vw;
	height: 11vh;
	margin-top: 3vh;
	display: flex;
}

.weather-forecast > .day > div,
.weather-forecast > .night > div {
	width: 17vw;
	height: 11vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	align-items: center;
}

.weather-forecast > .day > div > .day-text,
.weather-forecast > .day > div > .day-date,
.weather-forecast > .night > div > .wind-direction,
.weather-forecast > .night > div > .wind-power {
	font-size: xx-small;
	color: #999;
}
.weather-forecast > .day > div > .day-date {
	margin-top: -1vh;
}
.weather-forecast > .night > div > .wind-direction {
	margin-bottom: -1vh;
}
.weather-forecast > .day > div > img,
.weather-forecast > .night > div > img {
	height: 3vh;
}

.weather-forecast > .middle {
	height: 16vh;
	width: 136vw;
}

.weather-forecast > .night {
	height: 11vh;
	width: 136vw;
	margin-bottom: 3vh;
	display: flex;
}

.activities-suggested {
	height: 20vh + 2px;
	width: 100vw;
	overflow: auto;
	background-color: #fff;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 1vh;
}

.activities-suggested > table {
	width: 200vw;
	table-layout: fixed;
}

.activities-suggested td {
	height: 10vh;
	width: 25vw;
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.activities-suggested td:last-child {
	border-right: none;
}
.activities-suggested tr:last-child td {
	border-bottom: none;
}

.activities-suggested td > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.activities-suggested td > div > img {
	height: 3vh;
	margin-bottom: 1vh;
}
.activities-suggested td > div > .active {
	font-size: x-small;
	color: gray;

	white-space: nowrap;
}

.marquee-text {
	display: inline-block;
	padding-left: 100%;
	animation: marquee 5s linear infinite;
}

@keyframes marquee {
	0% {
		transform: translateX(-10%);
	}
	50% {
		transform: translateX(-30%);
	}
	100% {
		transform: translateX(-10%);
	}
}

.about {
	width: 100vw;
	height: 5vh;
	margin-bottom: 2vh;

	font-size: small;
	color: #b2b2b2;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.about a {
	font-size: small;
	color: #b2b2b2;
	text-decoration: none;
}

.gary-mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.43);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: none;
}

.suggest-dialog {
	width: 60vw;
	margin-left: -30vw;
	z-index: 1000;
	left: 50%;
	top: 50%;

	border-radius: 8px;
	background: #fff;
	padding-bottom: 20px;
	position: fixed;

	display: none;
}

.suggest-dialog > .title {
	width: 100%;
	padding: 2vh 0;
	text-align: center;
	background-color: #dfc79c;
	color: #fff;
	border-radius: 8px 8px 0 0;
}

.suggest-dialog > .text {
	width: 100%;
	padding: 2vh;
}

.suggest-dialog > .ok {
	width: 80%;
	height: 5vh;
	margin-left: 10%;
	text-align: center;
	line-height: 5vh;

	background-color: #dfc79c;
	color: #fff;
	border-radius: 8px;
}

@keyframes scroll-up3 {
	0% {
		transform: translateY(20%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes scroll-down3 {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(20%);
		opacity: 0;
	}
}

.air-dialog {
	position: fixed;
	top: 26%;
	width: 60vw;
	height: 42vh;
	background-color: #fff;
	margin-left: -30vw;
	z-index: 1000;
	left: 50%;
	border-radius: 10px;
	display: none;
}

.air-dialog > img {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 3vh;
}

.air-dialog > .top {
	height: 70%;
	width: 100%;
	background-color: #80d2e5;
	border-radius: 10px 10px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url(../images/airmore.png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
}

.air-dialog > .top > .title {
	font-size: 1.5vh;
	color: #fff;
	margin-top: 6vh;
}

.air-dialog > .top > .score {
	font-weight: 500;
	font-size: 6vh;
	color: #fff;
	margin-top: 1vh;
}

.air-dialog > .top > .level {
	height: 3vh;
	width: 12vw;
	background-color: #f0cc35;
	font-size: 1.5vh;
	color: #fff;
	margin-top: 2vh;
	border-radius: 0.8vh;

	text-align: center;
	line-height: 3vh;
}

.air-dialog > .bottom {
	height: 30%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	background-color: #e4e4e4;
	border-radius: 0 0 10px 10px;
	gap: 1px;
}

.air-dialog > .bottom > .others {
	background-color: #fff;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.air-dialog > .bottom > .others:nth-child(4) {
	border-radius: 0 0 0 10px;
}

.air-dialog > .bottom > .others:nth-child(6) {
	border-radius: 0 0 10px 0;
}

.air-dialog > .bottom > .others > .others-score {
	margin-bottom: 2px;
}

.air-dialog > .bottom > .others > .others-title {
	font-size: 1.5vh;
	color: #b2b2b2;
}