/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/k58ZM3h7ZSti/tTZ3h3y4acVg.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/k58ZM3h7ZSti/3lKj3x69UW8h.woff") format("woff");
  font-display: swap;
}
body {
				margin: 0;
				padding: 0;
				/*overflow: hidden;*/
				font-family: Regular,'Arial', sans-serif;
				/*height: 100vh;*/
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/*#app {*/
			/*	display: none;*/
			/*}*/

			.loader-container {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.holographic-loader {
				position: relative;
				width: 300px;
				height: 300px;
				margin-bottom: 30px;
			}

			.hologram-circle {
				position: absolute;
				border: 2px solid rgba(0, 255, 255, 0.5);
				border-radius: 50%;
				animation: pulse 4s infinite ease-in-out;
			}

			.circle1 {
				width: 100%;
				height: 100%;
				animation-delay: 0s;
			}

			.circle2 {
				width: 80%;
				height: 80%;
				top: 10%;
				left: 10%;
				animation-delay: 0.5s;
			}

			.circle3 {
				width: 60%;
				height: 60%;
				top: 20%;
				left: 20%;
				animation-delay: 1s;
			}

			.circle4 {
				width: 40%;
				height: 40%;
				top: 30%;
				left: 30%;
				animation-delay: 1.5s;
			}

			.core {
				position: absolute;
				width: 20%;
				height: 20%;
				top: 40%;
				left: 40%;
				background: radial-gradient(circle, #0ff, #0ff, transparent 70%);
				border-radius: 50%;
				box-shadow: 0 0 20px #0ff;
				animation: glow 2s infinite alternate;
			}

			.scan-line {
				position: absolute;
				width: 100%;
				height: 2px;
				background: linear-gradient(to right, transparent, #0ff, transparent);
				top: 50%;
				box-shadow: 0 0 10px #0ff;
				animation: scan 3s linear infinite;
			}

			.loading-text {
				font-size: 24px;
				letter-spacing: 5px;
				text-transform: uppercase;
				margin-top: 20px;
				text-shadow: 0 0 10px #0ff;
				color: #fff;
			}

			.progress-container {
				width: 300px;
				height: 4px;
				background: rgba(0, 255, 255, 0.2);
				margin-top: 20px;
				border-radius: 2px;
				overflow: hidden;
			}

			.progress-bar {
				height: 100%;
				width: 0%;
				background: linear-gradient(to right, #0af, #0ff);
				box-shadow: 0 0 10px #0ff;
				transition: width 0.3s ease;
			}

			.status-text {
				margin-top: 15px;
				font-size: 14px;
				color: #0af;
				text-align: center;
				min-height: 20px;
			}

			.particles {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
			}

			.particle {
				position: absolute;
				width: 2px;
				height: 2px;
				background: #0ff;
				border-radius: 50%;
				opacity: 0.6;
			}

			@keyframes pulse {

				0%,
				100% {
					transform: scale(1);
					opacity: 0.5;
				}

				50% {
					transform: scale(1.05);
					opacity: 0.8;
				}
			}

			@keyframes glow {
				0% {
					box-shadow: 0 0 10px #0ff;
				}

				100% {
					box-shadow: 0 0 30px #0ff;
				}
			}

			@keyframes scan {
				0% {
					top: 0%;
					opacity: 0;
				}

				10% {
					opacity: 1;
				}

				90% {
					opacity: 1;
				}

				100% {
					top: 100%;
					opacity: 0;
				}
			}

			.binary-code {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				opacity: 0.3;
				font-family: monospace;
				font-size: 12px;
				color: #0f0;
			}

			/*引导页*/
			

			.courses {
				width: 100%;
				float: left
			}

			.courses .section-heading,
			.section-heading {
				margin-bottom: 60px
			}

			.courses .section-heading h2,
			.section-heading h2 {
				font-size: 36px;
				font-weight: 600;
				text-transform: capitalize;
				margin: 20px 0;
				line-height: 44px;
				text-align: center;
				color: #fff;
			}

			.courses .section-heading h6 {
				color: #00f943;
				font-size: 18px;
				text-transform: uppercase;
				text-align: center;font-weight: bold;    text-shadow: 0 0 10px #fff;
			}

			.courses .event_filter {
				text-align: center;
				background-color: #f1f0fe;
				border-radius: 50px;
				padding: 15px 40px;
				list-style: none;
				margin: 0 auto 70px;
				max-width: max-content
			}

			.courses .event_filter li {
				display: inline-block;
				margin: 0 20px
			}

			.courses .event_filter li a {
				font-size: 14px;
				font-weight: 500;
				color: #1e1e1e;
				transition: .3s
			}

			.courses .event_filter li a.is_active {
				color: #7a6ad8
			}

			.courses .event_filter li a:hover,
			.courses .events_item:hover .down-content h4 {
				color: #7a6ad8
			}

			.courses .events_item .down-content h4 {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: 18px;
				font-weight: 600;
				transition: .3s
			}

			.courses .events_item .thumb {
				position: relative;
				border-radius: 0px;
				overflow: hidden
			}

			.courses .events_item .thumb {
				height: 307px;
				width: 92%;
				margin: 0 20px;
			}

			.courses .events_item .thumb a {
				display: block;
				width: 100%;
				height: 100%
			}

			.courses .events_item .thumb img {
				margin-bottom: -5px;
				width: 100%;
				margin-left: 0%;
				object-fit: cover;
				transition: all ease-in-out 2s;
				position: absolute;
				top: 0
			}

			.courses .events_item .thumb span.category {
				position: absolute;
				left: 30px;
				top: 30px;
				font-size: 14px;
				text-transform: uppercase;
				color: #7a6ad8;
				background-color: rgba(250, 250, 250, .95);
				padding: 8px 20px;
				border-radius: 25px;
				font-weight: 500;
				display: inline-block
			}

			.courses .events_item .thumb span.price {
				position: absolute;
				right: -30px;
				top: -50px;
				background-color: rgba(122, 106, 216, .95);
				width: 130px;
				height: 130px;
				border-radius: 50%;
				display: inline-block;
				transition: .3s
			}

			.courses .events_item .thumb span.price h6 {
				margin-top: 72px;
				margin-left: 22px;
				font-size: 20px;
				text-transform: uppercase;
				color: #fff;
				font-weight: 700
			}

			.courses .events_item .thumb span.price em {
				font-size: 18px;
				font-weight: 500;
				font-style: normal;
				vertical-align: top
			}

			.courses .events_item {
				/* 	background-color: #f1f0fe; */
				border-radius: 0px;
				margin-bottom: 30px;
				position: relative;
				justify-content: center;
				align-items: center;
				background: url(https://hbsjsdoss.oss-cn-zhangjiakou.aliyuncs.com/data01/pc.png) no-repeat 0 0;
				background-size: 100%;
				padding-top: 29px;
				padding-bottom: 80px;
				filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
			}

			.fun-facts:after,
			.fun-facts:before {
				position: absolute;
				top: 0;
				content: ''
			}

			.courses .events_item .down-content {
				padding: 5px 20px
			}

			.courses .events_item .down-content h4 {
				margin: 0;
				color: #00f943;
				font-size: 14px;
				text-align: center;
				text-shadow: 0 0 10px #f7b211;
				letter-spacing: 2px;
			}

			.courses .events_item .down-content span.author {
				color: #7a6ad8;
				font-size: 15px;
				display: inline-block;
				margin-bottom: 6px
			}

			.courses .events_item:hover .thumb span.price {
				transform: scale(1.2)
			}

			.planetImg {
				transform: scale(0.7) rotate(158deg);
				position: fixed;
				bottom: -10%;
				left: -5%;
				animation: float 12s ease-in-out infinite;
				z-index: -1;
			}

			@keyframes float {
				0% {
					box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
					transform: translatey(0px) translatex(5px) scale(0.7) rotate(156deg);
				}

				50% {
					box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translatey(-20px) translatex(-5px) scale(0.7) rotate(162deg);
				}

				100% {
					box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
					transform: translatey(0px) translatex(5px) scale(0.7) rotate(156deg);
				}
			}

			@media (max-width:1024px) {
				.courses .events_item {
					padding-top: 24px
				}

				.courses .events_item .thumb {
					height: 252px;
					width: 92%;
					margin: 0 18px;
				}
			}

			@media (max-width:992px) {
				.courses .events_item {
					padding-top: 32px;
				}

				.courses .events_item .thumb {
					height: 33vh;
					width: 92%;
					margin: 0 27px;
				}
			}

			@media (max-width:912px) {
				.courses .events_item .thumb {
					height: 29vh;
				}


			}

			@media (max-width: 820px) {
				.courses .events_item .thumb {
					height: 34vh;
				}

				.courses .events_item {
					padding-bottom: 110px;
				}
			}

			@media (max-width:768px) {

				.main-banner .item {
					padding: 80px 30px 120px !important
				}

				.main-banner .owl-buttons {
					left: 30px !important
				}

				.courses .event_filter {
					padding: 15px 20px;
					margin-bottom: 40px
				}

				.courses .event_filter li {
					display: inline-block;
					margin: 0 10px
				}

				.courses .section-heading h2 {
					font-size: .8rem;
					margin: 0
				}

				.courses .section-heading {
					margin-bottom: 20px
				}

				.courses .events_item .down-content h4,
				.courses .events_item .thumb span.price h6 {
					font-size: 1rem
				}

				.services .service-item h4 {
					font-size: 1rem !important;
					margin-bottom: 5px !important;
				}

				.services .service-item p {
					font-size: 0.8rem;
					line-height: 1.8
				}

				.courses .section-heading h2,
				.section-heading h2 {
					font-size: 20px;
					margin: 0
				}

				.events .section-heading {
					margin-bottom: 50px !important;
				}

				.courses .events_item {
					padding-top: 32px;
				}

				.courses .events_item .thumb {
					height: 39vh;
					width: 92%;
					margin: 0 27px;
				}

				.courses .events_item .down-content {
					padding: 5px 20px;
				}

				.courses .events_item .down-content h4 {
					font-size: 12px;
				}
			}

			@media (max-width: 578px) {
				.main-banner .item {
					padding: 80px 30px 120px !important
				}

				.main-banner .owl-buttons {
					left: 30px !important
				}

				.courses .event_filter {
					padding: 15px 20px;
					margin-bottom: 40px
				}

				.courses .event_filter li {
					display: inline-block;
					margin: 0 10px
				}

				.courses .section-heading h2 {
					font-size: .8rem;
					margin: 0
				}

				.courses .section-heading {
					margin-bottom: 20px
				}

				.courses .events_item .down-content h4,
				.courses .events_item .thumb span.price h6 {
					font-size: 1rem
				}

				.services .service-item h4 {
					font-size: 1rem !important;
					margin-bottom: 5px !important;
				}

				.services .service-item p {
					font-size: 0.8rem;
					line-height: 1.8
				}

				.courses .section-heading h2,
				.section-heading h2 {
					font-size: 20px;
					margin: 0
				}

				.events .section-heading {
					margin-bottom: 50px !important;
				}

				.courses .events_item {
					padding-top: 17px;
					width: 330px;
					margin: 0 auto;
					padding-bottom: 70px;
				}

				.courses .events_item .thumb {
					height: 186px;
					width: 92%;
					margin: 0 14px;
				}

				.courses .events_item .down-content {
					padding: 5px 20px;
				}

				.courses .events_item .down-content h4 {
					font-size: 12px;
				}
}
.ui-to-top {border-radius: 5px;
				position: fixed;
				right: 15px;
				bottom: 25px;
				z-index: 99;
				width: 45px;
				height: 52px;
				font-size: 14px;
				line-height: 18px;
				color: #fff;
				background: #6831e3;
				overflow: hidden;
				text-align: center;
				text-decoration: none;
				transition: .45s all ease-in-out;
				transform: translate3d(0, 100px, 0);
				box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
				padding: 7px;
			}

			#kf {
				bottom: 215px
			}
			
			.visitor-counter {
            position: fixed;
            bottom: 20px;
            right: 15px;
            font-size: 14px;
            color: #0ff;
            text-shadow: 0 0 5px #0ff;
            opacity: 0.8;
        }