@charset "utf-8";
/* CSS Document */
.mainbg{position: absolute; bottom:-350px; color: #fff; z-index: 99999; background:url(../images/anbg.png) repeat center center; background-size: contain; user-select: none;}
.circle-nav {
    position: relative;
    width: 660px;
    height: 660px;
}

.pc{display: block}
.mobile{display: none}
@media screen and (max-width: 480px){
.pc{display: none}
.mobile{display: block}
}

.glowing-image {
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 0 rgba(255, 207, 0, 0.7);
	animation: glowing 1.5s infinite;
}

@keyframes glowing {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 207, 0, 0.7);
	}
	70% {
		box-shadow: 0 0 10px 30px rgba(255, 207, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 207, 0, 0);
	}
}
 
.circle-item {
    position: absolute;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 84px;
    /*background-color: #333;*/
    color: #111;
	font-weight: 600;
    border-radius: 50%; /* 使得元素成为圆圈 */
    text-decoration: none; /* 去除下划线 */
    transition: background-color 0.3s; /* 平滑过渡效果 */
	font-size: 14px;
	text-align: center;
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}
.circle-item2 {
    position: absolute;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 60px;
    /*background-color: #333;*/
    color: #111;
	font-weight: 600;
    border-radius: 50%; /* 使得元素成为圆圈 */
    text-decoration: none; /* 去除下划线 */
    transition: background-color 0.3s; /* 平滑过渡效果 */
	font-size: 14px;
	text-align: center;
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}


.circle-in{
	/*display: flex;*/
	background-color: #dc383a;
	border-radius: 50%;
	width: 70px;
    height: 70px;
    margin: 0px auto;
    text-align: center;
	margin-bottom: 5px;
}
.circle-item2 .circle-in{
	/*display: flex;*/
	background-color: #dc383a;
	border-radius: 50%;
	width: 50px;
    height: 50px;
    margin: 0px auto;
    text-align: center;
	margin-bottom: 5px;
}
.circle-in:hover {
    background-color: #e44143; /* 鼠标悬停时改变颜色 */
	transform: scale(1.2); /* 放大到原始尺寸的1.5倍 */
  	transition: transform 0.5s ease; /* 添加平滑的过渡效果 */
}
.circle-in img{
	width: 50%;
    display: block;
    margin: 0px auto;
	padding-top: 15px;
}
.circle-item2 .circle-in img{
	width: 50%;
    display: block;
    margin: 0px auto;
	padding-top: 12px;
}
 
/* 定位每个圆圈 */
.circle-nav .circle-item:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); } /* 首页 */
.circle-nav .circle-item:nth-child(2) { top: 30%; left: 6%; transform: translateX(-6%) translateY(-30%); } /* 在线报名 */
.circle-nav .circle-item:nth-child(3) { top: 15%; left: 17%; transform: translateX(-17%) translateY(-15%); } /* 联系我们 */
.circle-nav .circle-item:nth-child(4) { top: 5%; left: 31%; transform: translateX(-31%) translateY(-5%); } /* 新闻动态 */
.circle-nav .circle-item:nth-child(5) { top: 5%; left: 69%; transform: translateX(-69%) translateY(-5%);  } /* 个人作品 */
.circle-nav .circle-item:nth-child(6) { top: 15%; left: 84%; transform: translateX(-84%) translateY(-15%);  } /* 进入展厅 */
.circle-nav .circle-item:nth-child(7) { top: 30%; left: 94%; transform: translateX(-94%) translateY(-30%);  } /* 红龄美育馆 */

.circle-nav .circle-item2:nth-child(1) { bottom: 885px; left: 30px; } /* 首页 */
.circle-nav .circle-item2:nth-child(2) { bottom: 800px; left: 30px; } /* 在线报名 */
.circle-nav .circle-item2:nth-child(3) { bottom: 715px; left: 30px; } /* 联系我们 */
.circle-nav .circle-item2:nth-child(4) { bottom: 630px; left: 30px; } /* 新闻动态 */
.circle-nav .circle-item2:nth-child(5) { bottom: 545px; left: 30px; } /* 个人作品 */
.circle-nav .circle-item2:nth-child(6) { bottom: 460px; left: 30px; } /* 进入展厅 */
.circle-nav .circle-item2:nth-child(7) { bottom: 375px; left: 30px; } /* 红龄美育馆 */
.bottomtext{position: absolute; bottom:10px; right: 20%; color: #fff; z-index: 99999; user-select: none;}
@media screen and (max-width: 839px) {
	.bottomtext{display: none}
}
.icp{color: #fff; text-decoration: none;font-weight: 100;}
.a-enter-vr-button{display: none}





.indexbg{width: 100%; height: 100vh; color: #fff; background:url(../images/bg.jpg) repeat center -30px; background-size: revert; background-repeat: no-repeat;}
.logo{margin: 0px auto; text-align: center; user-select: none;}
.logo img{width:25%; max-width:180px; margin-top:5%;}
.indextext{margin: 0px auto; text-align: center; font-size:3.2vw; color:#fff; font-weight:800; margin-top:5%; line-height: 150%; user-select: none;}
.buttonbox{
	margin: 0px auto; width: 60%; max-width: 300px; clear: both; margin-top:6%; user-select: none;
	position: relative;
    top: 50%;
}
@media screen and (max-width: 839px) {
	.logo img{width:30%; max-width:220px; margin-top:40%}
	.indextext{margin: 0px auto; text-align: center; font-size:5vw; color:#fff; font-weight:800; margin-top:5%; margin-bottom:45px; line-height: 150%; user-select: none;}
	.indexbg{width: 100%; height: 100vh; color: #fff; background:url(../images/sbg.jpg) repeat center bottom; background-size: cover; background-repeat: no-repeat;}
	.buttonbox{
		top: 45%;
	}
}
button {
  display: block;
  position: relative;
  top: 0;
  border: 0;
  cursor: pointer;
  color: #fff;
  border-radius: 80px;
  height:50px;
  line-height:250%;
  font-size: 18px;
  outline: 0;
  font-weight:bold;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
button.shiny {
  margin: 0px auto;
  width: 100%;
  background: #c60d0d;
  background-size: 600% 100%;
  -webkit-animation: shine 20s infinite;
          animation: shine 20s infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
button.shiny:hover {
    background: #fdb80a;
	color:#b4050a;
}