html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
	background: url(../images/bg_bigbg2.jpg) no-repeat;
	background-position: bottom; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.clearfix {
	clear: both;
}

.big_box {
	width: 100%;
	height: 100%;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	.logo {
		width: 3.10rem;
		height: 3.09rem;
		margin: 2rem 0 0 2rem;
		/*animation: logoMove 1s linear;*/
		opacity: 0;
		animation: basementMove 0.25s linear 0.5s;
	}

	.top_title {
		width: 100%;
		position: relative;
		overflow: hidden;

		.top_title1 {
			display: block;
			margin: 1.5rem auto 0 auto;
			width: 70%;
			height: auto;
			/*opacity: 0;
			animation: title1Move 1s linear 1s;*/
		}

		.top_title2 {
			display: block;
			width: 70%;
			margin: 0 15%;
		}

		.top_title_new_1{
			margin-top: 0;
		}
	}

	.btn_box{
		/*width: 70%;*/
		/*position: relative;*/
		margin-top: 3rem;
        /*z-index: 1;*/

		img{
			/*left: 0;
			top: 0;*/
			margin-left: 15%;
			width: 70%;
			/*animation: basementMove 1s linear 2s;*/
			margin-bottom: 1rem;
		}
		.btnmove1{
			animation: logoMove 1s linear;
		}
		.btnmove3{
			animation: logoMove 1s linear;
		}
		.btnmove2{
			animation: logoMove2 1s linear;
		}
		.btnmove4{
			animation: logoMove2 1s linear;
		}
		.status1-1,.status1-2{
			display: none;
		}
	}

	.top_name {
		margin: 0.416667rem 0 0 15.583333rem;
		width: 5.458333rem;
		height: 1.666667rem;
		font-size: 0.958333rem;
		color: #fffb8b;
		text-align: center;
		line-height: 1.666667rem;
		background: url(../images/bg_title.png) no-repeat;
		background-size: 100%;
		letter-spacing: 2px;
		text-shadow: 2px 0 1px #00165f;
	}

	.basement {
		margin: 2.583333rem 0 0 2.916667rem;
		width: 6.541667rem;
		height: 5rem;
		position: relative;
		float: left;
		z-index: 1;

		.basement_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			animation: basementMove 1s linear 2s;
		}

		.tower {
			position: absolute;
			left: -2.916667rem;
			top: -6.875rem;
			width: 1.75rem;
			animation: towerMove 1s linear 2s;
			opacity: 0;
		}

		.light {
			position: absolute;
			left: -2.916667rem;
			top: -13rem;
			width: 9.125rem;
			opacity: 0;
			animation: lightMove 1s linear 3s;
		}

		.building {
			position: absolute;
			left: -0.625rem;
			top: -10.125rem;
			width: 2.666667rem;
			z-index: -1;
			opacity: 0;
			animation: buildingMove 1s linear 2s;
		}

		.left_grass {
			position: absolute;
			left: -2.916667rem;
			top: -1.958333rem;
			width: 10.375rem;
			z-index: -1;
			opacity: 0;
			animation: leftGlassMove 1s linear 1s;
		}

		.left_tree {
			position: absolute;
			left: -2.916667rem;
			top: 0;
			width: 5.375rem;
			z-index: 2;
			opacity: 0;
			animation: leftGlassMove 1s linear 1s;
		}
	}

	.ccad_box {
		float: right;
		margin-right: 6.375rem;
		width: 5.333333rem;
		height: 7.7rem;
		margin-top: 0.625rem;
		position: relative;
		z-index: 1;

		.ccad_person1 {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			animation: basementMove 1s linear 2s;
		}

		.start {
			position: absolute;
			left: 5.25rem;
			top: 2.541667rem;
			width: 1.041667rem;
			opacity: 0;
			animation: lightMove 1s linear 2s, starRotate 1s linear 2s;
		}

		.startlight1 {
			position: absolute;
			left: 5.333333rem;
			top: 2.041667rem;
			width: 0.270833rem;
			opacity: 0;
			animation: lightMove 1s linear infinite 2s;
		}

		.startlight2 {
			position: absolute;
			left: 5.75rem;
			top: 1.833333rem;
			width: 0.270833rem;
			opacity: 0;
			animation: lightMove 1s linear infinite 2.2s;
		}

		.startlight3 {
			position: absolute;
			left: 6.041667rem;
			top: 1.75rem;
			width: 0.5625rem;
			opacity: 0;
			animation: lightMove 1s linear infinite 2.4s;
		}

		.right_class1 {
			position: absolute;
			left: -4rem;
			top: 5.833333rem;
			width: 8.083333rem;
			opacity: 0;
			animation: rightGlassMove 1s linear 1s;
		}

		.right_class2 {
			position: absolute;
			left: 2.708333rem;
			top: 1.833333rem;
			width: 8.958333rem;
			z-index: -1;
			opacity: 0;
			animation: rightMoreMove 1s linear 1s;
		}
	}

	.video1 {
		margin: 7.881667rem 1.5rem 0 1.625rem;
		width: 19.333333rem;
		height: 11.808333rem;
		background: url(../images/bg_video1.png) no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.img_subtitle1{
			position: absolute;
			margin-left: -5.354167rem;
			left: 50%;
			top: -4.12rem;
			width: 10.708333rem;
			height: 1.5rem;
			z-index: 10;
			animation: subtitle1Move 1s linear;
		}
		.video_box {
			width: calc(100% - 20px);
			height: calc(100% - 30px);
			border: 1px solid #00ffff;
			box-shadow: 0 0 3px #00ffff;
			background-color: #fff;
			border-radius: 4px;
			animation: sparkMove 2s linear infinite;
			position: relative;
			overflow: hidden;
			img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			video {
				width: 100%;
				height: 100%;
			}
		}
	}

	.ccad_person {
		margin-top: 2.541667rem;
		width: 3.541667rem;
		height: 5rem;
		margin-left: 0.958333rem;
		position: relative;

		.slide_person {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			opacity: 0;
		}

		.flicker_img {
			width: 4.666667rem;
			position: absolute;
			left: -0.5625rem;
			top: -0.479167rem;
			z-index: 1;
			opacity: 0;
		}

		.slide_move {
			animation: ccadMove 1s linear, lightMove 1s linear;
		}

		.move_class {
			animation: ccadScale 1s linear infinite;
		}
	}

	.video2 {
		margin: 1.998333rem 1.583333rem 0 1.333333rem;
		width: 19.5rem;
		height: 11.875rem;
		background: url(../images/bg_video2.png) no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.img_subtitle2,.img_sub{
			position: absolute;
			margin-left: -3.604167rem;
			left: 50%;
			top: -3.626667rem;
			width: 7.208333rem;
			height: 1rem;
			z-index: 10;
		}
		.img_subtitle3{
			position: absolute;
			margin-left: -2.770833rem;
			left: 50%;
			top: -3.566667rem;
			width: 5.541667rem;
			height: 0.958333rem;
			z-index: 10;
		}
		.video_box {
			width: calc(100% - 20px);
			height: calc(100% - 34px);
			border: 1px solid #00ffff;
			box-shadow: 0 0 3px #00ffff;
			background-color: #fff;
			border-radius: 4px;
			animation: sparkMove 2s linear infinite;
			position: relative;
			overflow: hidden;
			img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			video {
				width: 100%;
				height: 100%;
			}
		}
	}

	.video3 {
		margin: 6.583333rem 1.583333rem 0 1.333333rem;
	}

	.video4 {
		margin: 6.791667rem 1.583333rem 0 1.333333rem;
	}

	.text_wrap {
		margin: 4.583333rem 1.458333rem 0 1.458333rem;
		width: 19.5rem;
		height: 7.958333rem;
		background: url(../images/bg_text.png) no-repeat;
		background-size: 100%;
		position: relative;
		.img_subtitle4{
			position: absolute;
			width: 11.5rem;
			height: 1.125rem;
			left: 3.66rem;
			top: -2.301667rem;
			z-index: 10;
		}
		.ccad_person3 {
			position: absolute;
			right: -0.125rem;
			top: -1.968333rem;
			width: 2.5rem;
			z-index: 2;
		}

		.ccad_personlight {
			position: absolute;
			right: -0.595rem;
			top: -2.2rem;
			width: 3.458333rem;
			z-index: 1;
			animation: ccadScale 1s linear infinite;
		}

		.mark1 {
			position: absolute;
			right: 2.041667rem;
			top: -1.8rem;
			width: 0.3125rem;
			opacity: 0;
		}

		.mark2 {
			position: absolute;
			right: 1.85rem;
			top: -2.125rem;
			width: 0.354167rem;
			opacity: 0;
		}

		.mark3 {
			position: absolute;
			right: 1.516667rem;
			top: -2.133333rem;
			width: 0.208333rem;
			opacity: 0;
		}

		.mark4 {
			position: absolute;
			right: 0;
			top: -0.25rem;
			width: 0.375rem;
			opacity: 0;
		}

		.enter_btn {
			width: 4.583333rem;
			height: 1.666667rem;
			position: absolute;
			left: 10.166667rem;
			top: 2.02rem;
			background: url(../images/bg_into.png) no-repeat;
			background-size: 100%;
			font-size: 0.833333rem;
			letter-spacing: 2px;
			font-weight: bold;
			color: #fffb8b;
			text-align: center;
			line-height: 1.666667rem;
		}
	}

	.ccad_poster {
		margin: 1.291667rem 0 0 1.208333rem;
		width: 3.458333rem;
		height: 3.541667rem;
		position: relative;
		.img_subtitle5{
			position: absolute;
			width: 11.458333rem;
			height: 1.25rem;
			left: 4.475rem;
			top: 1.68rem;
		}
		.poster_img {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 2;
		}

		.poster_light {
			opacity: 0;
			position: absolute;
			width: 4.191667rem;
			left: -0.406667rem;
			top: -0.254167rem;
			b opacity: 0;
			z-index: 1;
		}

		.star_top {
			position: absolute;
			left: -0.25rem;
			top: 0.125rem;
			width: 1.458333rem;
			opacity: 0;
		}

		.star_left {
			position: absolute;
			left: -0.083333rem;
			bottom: 0.225rem;
			width: 3.166667rem;
			opacity: 0;
		}
	}

	.banner_box {
		width: 18.541667rem;
		height: 13.458333rem;
		margin: 0 1.875rem;
		background: url(../images/bg_banner.png) no-repeat;
		background-size: 100%;
		z-index: 2;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.banner_wrap {
			width: 16.625rem;
			height: 10.125rem;
			background-color: #fff;
			border-radius: 4px;
			border: 1px solid #00ffff;
			box-shadow: 0 0 3px #00ffff;
			animation: sparkMove 2s linear infinite;

			#certify {
				position: relative;
				width: calc(100% - 1.916667rem);
				margin: 0 0.958333rem;
				height: 100%;
				.swiper-container{
					width: 100%;
					height: 100%;
				}
			}

			#certify .swiper-slide img {
				width: 100%;
				height: calc(100% - 0.375rem);
			}

			#certify .swiper-button-prev {
				width: 0.583333rem;
				height: 0.916667rem;
				left: -0.916667rem;
				background: url(../images/btn_prev.png) no-repeat;
				background-size: 100%;
				top: 50%;
				margin-top: -0.458333rem;

				&:after {
					content: '';
				}
			}

			#certify .swiper-button-next {
				width: 0.583333rem;
				height: 0.916667rem;
				right: -0.916667rem;
				background: url(../images/btn_next.png) no-repeat;
				background-size: 100%;
				top: 50%;
				margin-top: -0.458333rem;

				&:after {
					content: '';
				}
			}
		}
	}

	.bottom_wrap {
		opacity: 0;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 14.541667rem;
		z-index: 1;
		background: url(../images/img_stone.png) no-repeat;
		background-size: 100%;
	}
}

.img_show {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.64);
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;

	img {
		width: 90%;
	}

	div {
		width: 1.25rem;
		height: 1.25rem;
		line-height: 1.166667rem;
		border-radius: 50%;
		border: 1px solid #00ffff;
		text-align: center;
		position: absolute;
		right: 5%;
		top: 20px;
		font-size: 1rem;
		font-weight: bold;
		color: #00ffff;
	}
}

.prompt_show {
	position: fixed;
	left: 25%;
	right: 25%;
	top: 30%;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.64);
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;

	color:#fff;
	padding:2.5rem 2rem;
	border-radius: 5px;

	div {
		width: 1.25rem;
		height: 1.25rem;
		line-height: 1.166667rem;
		border-radius: 50%;
		border: 1px solid #00ffff;
		text-align: center;
		position: absolute;
		right: 5%;
		top: 10px;
		font-size: 1rem;
		font-weight: bold;
		color: #00ffff;
	}
}

.map_show {
	position: fixed;
	left: 5%;
	right: 5%;
	top: 10%;
	z-index: 9999;
	background-color: #fff;
	display: block;
	align-items: center;
	justify-content: center;
	display: none;

	padding:2.5rem 0.05rem;
	border-radius: 5px;

	.map_show_box1{
		display:block;
		float:left;
		overflow-y: auto;
		overflow-x: hidden; 
		height:28rem;

	}
	ul{
		width:100%;
		padding-left:1rem;

		li{
			width:94%;
			text-align:left;
			margin:0.05rem 0;
			padding:0.5rem 0;
			border-bottom:1px solid #ddd;
			list-style-type: none;
			a{
				color:#000;
				text-decoration: none;

			}
		}
	}

	.btn_close {
		width: 1.25rem;
		height: 1.25rem;
		line-height: 1.166667rem;
		border-radius: 50%;
		border: 1px solid #00ffff;
		text-align: center;
		position: absolute;
		right: 5%;
		top: 10px;
		font-size: 1rem;
		font-weight: bold;
		color: #00ffff;
	}
	.title_wz{
		position: absolute;
		left: 5%;
		top: 10px;
		font-size: 1.2rem;
		font-weight: bold;
	}
}

/***************map*****************/
.top_title3{
	width:20%;
	overflow:hidden;
	margin:0.1rem 40% 0 40%;
}
.map_btn_box{
	width:100%;
	overflow:hidden;
	text-align: center;

	.btn_select{width:90%;margin:1rem auto;}
}
.map_box{background:#fff;height:12rem;margin:0.2rem 5%;padding:0.1rem;border-radius: 10px;}
.mapNameShow{
	width:80%;
	margin:0 auto 0.5rem auto;
	overflow:hidden;
	text-align: center;
	display:flex;
	justify-content: center;

	img{width:0.6rem;height:1rem;margin-left:1rem;display:none;}
	#mapNameBox{color:#fff;margin-left:0.5rem;font-size:16px;}
}
.map_btn_show{
	position:relative;
	display:none;
	img{
		width:70%;margin:2rem 15% 1rem 15%;
	}
	.btn_name_show{position:absolute;width:73%;left:50%;margin-left:-36.5%;text-align:center;top:1.55rem;font-size:18px;color:#e50012;font-weight:bold;}
}

.btn_a1{
		margin-left: 15%;
		width: 70%;
		animation: logoMove 1s linear;
		margin-bottom: 1rem;
}
.btn_box_1{
		width: 90%;
		margin: 1rem 4% 2rem;
		border: 4px solid #fff;
		border-radius: 30px;

		table{
			margin: 1rem;
			width: 90%;

			tr{
				display: block;
				border-bottom: 1px solid #fff;
				width: 100%;
			}

			th{
				color: #fff;
				font-size: 16px;
				text-align: left;
				padding: .3rem 0;
				width: 49%;
				
				span{
					display: block;
					font-size: 12px;
					font-weight: 200;
				}
			}

			td{

				input{
					border: 0;
					width: 9rem;
				}
				select{
					border: 0;
					float: right;
					width: 100%;
					display: inline-block;
				}
				textarea{
					border: none;
				}
				.big_inp{width:17.5rem;}
			}

			.select_css{
			 	position: relative; 
			 	select { 
			 		right: 0;
			 		width: 9.2rem; 
			 		float: right;
			 	}
			} 

			.no_border{
				border: none;
			}
		}
}

/*骑士页面样式*/
.courier_box{
	h3{
		color: #fff;
		font-size: 16px;
		text-align: center;
		margin: 0;
	}
	.map_div{
		width: 90%;
		height: 11rem;
		margin: 0 auto;
		background: url(../images/8map.jpg);
		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center center;
  		border: 4px solid #05b28a;
  		position: relative;
  		a{
  			display: block;
  			width: 3rem;
  			height: 3rem;
  			/*background: red;*/
  			position: absolute;

  		}
  		a:nth-child(1) {
  			top: 0;
  			left: 0;
  		}
  		a:nth-child(2) {
  			top: 0;
  			left: 3.1rem;
  		}
  		a:nth-child(3) {
  			top: 3rem;
  			left: 4.5rem;
  		}
		a:nth-child(4) {
			top: 3.5rem;
			left: 7.6rem;
  		}
  		a:nth-child(5) {
			top: 7.5rem;
			left: 8.7rem;
  		}
  		a:nth-child(6) {
			top: 5.5rem;
			right: 2.5rem;
  		}
  		a:nth-child(7) {
			top: 1.8rem;
			right: 3.8rem;
  		}
  		a:nth-child(8) {
			top: 0;
			right: 0;
  		}
	}
	.text_div{
		width: 90%;
		margin: 10px auto;
		background: #05b28a;
		color: #fff;
		border: 2px solid #05b28a;

		h2{
			font-size: 20px;
			text-align: center;
			margin:0;
		}
		h4{
			font-size: 14px;
			margin: 0 .5rem 0;
		}
	}

}
/*骑士页面中弹出层的样式*/
.prompt_show_new{
	left: 5%;
	top: 20%;
	right: 5%;
	padding: 2.2rem 1rem;
	img{
		width: 100%;
		height: auto;
	}
}