* {
	margin:0px;
	padding:0px;
	font-family:"微软雅黑",Roboto,Arial,sans-serif;
}
a {
	text-decoration:none;
}


#banner {
	background:url(../images/2022-05-02_10.54.05.jpg);
	background-size:cover;
	background-position:center;
	width:100%;
	height:100vh;
	display:flex;
    align-items:flex-end; /* 垂直靠下 */
    justify-content:flex-start; /* 水平靠左 */
	transition: background-image 0.8s ease-in-out;
}

.join-buttom {

    padding:0 0 90px 50px; /* 左50px + 底部90px 控制靠下 */
}
.join-buttom a {
	padding:15px;
	border:3px solid white;
	color:white;
	margin-right:15px;
	float:left;
	transition:0.4s;
}
.join-item {
	font-size:30px;
	color:white;
	padding-bottom:50px;
}
.join-item h2 {
	margin-bottom:40px;
}
.join-buttom a:hover {
	color:black;
	background:white;
}
.item-page-box {
	padding-top:10px;
	width:1005px;
	margin:auto;
	color:#5F5F5F;
	padding-left:20px;
}
.item-page-box hr {
	margin-top:20px;
	margin-bottom:50px;
	height:4px;
	border:none;
	background:#EBEBEB;
}
.item-page-box h2 {
	padding:20px 0px;
	color:#333333;
}
.item-page div[class="item-font"] {
	}.item-font h3 {
	line-height:80px;
	color:#333333;
}
.item-font p {
	line-height:35px;
}
.item-font a {
	color:#337AB7;
}
.item-font img {
	margin-top:100px;
	box-shadow:none;
	float:right;
	height:auto;
	width:auto;
	max-width:349px;
}
#footer {
	padding-top:20px;
	padding-right:20px;
	float:right;
}
#footer a {
	padding-right:20px;
	color:#5F5F5F;
	transition:0.4s;
}
#footer a:hover {
	color:#337AB7;
}
#footer p[id="counter"] {
	color:#337AB7;
	padding-left:190px;
}
.box a {
	overflow:hidden;
	color:white;
	margin-top:20px;
	float:right;
	background:#f8a5c2;
	width:25px;
	height:40px;
	padding-top:15px;
	padding-right:10px;
	white-space:nowrap;
	transition:0.4s;
	box-shadow:3px 8px 10px #EAEAEA;
}
.box a:hover {
	width:120px;
}
/* ===== 响应式适配 ===== */
@media (max-width:768px){

    .join-item h2{
        font-size:28px;
    }

    .join-item p{
        font-size:15px;
    }

    .menu-item-list{
        display:none;
    }

    .item-font{
        flex-direction:column;
        align-items:center;
    }

    .item-font img{
        width:100%;
    }
}
/* 深色模式 */
body.dark-mode {
    background-color: #121212;
    color: #CCCCCC;
}
body.dark-mode .menu {
    background: #1E1E1E;
    box-shadow: 0 0 8px #222;
}
body.dark-mode #menu-box {
    background: #1E1E1E;
    box-shadow: 0px 0px 8px #333333;
}
body.dark-mode .menu-item h2 a,
body.dark-mode .menu-item a {
    color: #CCCCCC;
}
body.dark-mode .join-buttom a {
    border-color: #CCCCCC;
    color: #CCCCCC;
}
body.dark-mode .join-buttom a:hover {
    color: black;
    background: #CCCCCC;
}
body.dark-mode #item-box {
    background: #1B1B1B;
}
body.dark-mode .item-page-box hr {
    background: #333333;
}
body.dark-mode .item-font h3,
body.dark-mode .item-font p {
    color: #DDDDDD;
}
body.dark-mode #footer,
body.dark-mode #footer a,
body.dark-mode #footer p {
    color: #AAAAAA;
}