#header .line {
	position: relative;
  max-width: 940px;
  background: #fff;
  margin: 0 auto;
}
/*@media screen and (max-width: 640px) {
	#header .line{
		
	}
}*/
#header .line .logo a{
	display: inline-block;
	padding: 20px 5px 20px 140px;
	background: url("/common/img/logo.jpg") no-repeat left center;
  	background-size: 115px;
}
@media screen and (max-width: 640px) {
	#header .line{
		padding:0 15px;
	}
	#header .line .logo a{
		padding: 20px 5px 20px 35%;
  		background-size: 32%;
  		box-sizing: border-box;
  		width:100%;
	}
	#header .line .logo a img{
		width:100%;
	}
}

#main{
    display: grid;
    grid-column: 1;
    place-items: center;
	background: #333;
	text-align: center;
	height: 100%;
}

#main .wrapper{
	padding: 10vh 0;
	width: 100%;
}

/*#main h2{
	margin: 0 auto;
	padding-bottom: 2vh;
	font-size: 10vw;
	color: #fff;
}*/

#main h2{
	margin: 0 auto;
	padding-bottom: 7vh;
	width: 30%;
}

#main h2 img{
	width: 100%;
}

.loading {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12vh;
	background: #333;
	transform: scale(0.9);
}

.circle-container {
    position: relative;
    --duration: 1s; /* 完整循环周期 */
}

.dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform-origin: 0px 0px; /* 半径10px */
    margin-left: 0px; /* 居中圆点 */
    margin-top: 0px;  /* 居中圆点 */
    transition: background-color calc(var(--duration)/10) ease-in-out;
}

/* 初始颜色分布（黑色在顶部） */
.dot:nth-child(1) { transform: rotate(-11deg) translateY(-40px); }
.dot:nth-child(2) { transform: rotate(19deg) translateY(-40px); }
.dot:nth-child(3) { transform: rotate(49deg) translateY(-40px); }
.dot:nth-child(4) { transform: rotate(79deg) translateY(-40px); }
.dot:nth-child(5) { transform: rotate(109deg) translateY(-40px); }
.dot:nth-child(6) { transform: rotate(139deg) translateY(-40px); }
.dot:nth-child(7) { transform: rotate(169deg) translateY(-40px); }
.dot:nth-child(8) { transform: rotate(199deg) translateY(-40px); }
.dot:nth-child(9) { transform: rotate(229deg) translateY(-40px); }
.dot:nth-child(10) { transform: rotate(259deg) translateY(-40px); }
.dot:nth-child(11) { transform: rotate(289deg) translateY(-40px); }
.dot:nth-child(12) { transform: rotate(319deg) translateY(-40px); }

.note{
	font-size: 12px;
	color: #fff;
}