/* 竖屏状态下的样式 */

/* 全局样式 */
@font-face {

	/* 方正宋三简体 */
	font-family: 'SongSanJian';
	src: url("../font/FangZheng-SongSanJian.ttf");
}

@font-face {

	/* 文悦古典明朝体 */
	font-family: 'QingKe';
	src: url("../font/FangZheng-QingKe.TTF");
}

/* 页面布局样式 */
html,
body {

	/* 主体布局大小 */
	height: 100%;
	width: 100%;

	/* 主体布局位置 */
	margin: 0px auto;
}

body {

	/* 主题默认样式 */
	font-family: SongSanJian, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: gray;

	/* 主体布局位置 */
	margin: 0px auto;
	overflow: hidden;
	/* 禁用滚动 */

	/* cursor:pointer; */
	-webkit-tap-highlight-color: transparent;
}

/* 加载界面样式 */
#loading {

	/* 加载界面布局 */
	width: 100%;
	height: 100%;

	/* 加载界面背景 */
	background: url(../img/index_bg.jpg) rgb(31, 31, 31);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-attachment: fixed;
}

/* 进度条容器样式 */
.processcontainer {
	width: 100%;
	border: 1px solid #999;
	height: 0.3vh;
	position: absolute;
	margin-top: 2vh;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

}

/* 进度条样式 */
#processbar {
	background: #999;
	float: left;
	height: 100%;
	text-align: center;
	color: white;
	line-height: 150%;
	opacity: 0.8;
}

/* 加载图样式 */
.pic {
	margin: 0 auto;
	display: block;
	max-width: 100%;
	max-height: 80%;
}

/* 加载界面信息样式 */
.loading-footer {

	width: 50%;
	height: 18%;
	position: absolute;
	/* left: 50%; */
	bottom: 4%;
	/* margin-left: -45%; */
	color: lightgray;
	font-size: 3.4vw;
	text-align: right;
}

/* 加载区域样式 */
.loading-content {
	position: absolute;
	width: 25%;
	height: 18%;
	/* top: 38%; */
	bottom: 4%;
	right: 10%;
}

/* 加载界面国宝展示区域样式 */
.items {
	position: absolute;
	width: 100%;
	bottom: 24%;
	top: 60%;

}

/* 加载界面国宝样式 */
.single {
	position: absolute;
	width: 25%;
	height: 100%;

	/* 国宝再区域中居中显示 */
	text-align: center;
	text-align: center;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	display: -moz-box;
	-moz-box-align: center;
	-moz-box-pack: center;
	display: -o-box;
	-o-box-align: center;
	-o-box-pack: center;
	display: -ms-box;
	-ms-box-align: center;
	-ms-box-pack: center;
	display: box;
	box-align: center;
	box-pack: center;
}

.single img {
	max-width: 100%;
	max-height: 100%;
	margin: 0% auto;
}

/* 内容页面 样式 */
.core {

	/* 内容页面大小 */
	width: 100%;
	height: 100%;

	/* 内容页面布局位置 */
	margin: 0px auto;
	padding: 0% 0%;

	/* 内容页面背景设置 */
	background: url(../img/bg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden;

	/* 内部元素对齐方式 */
	vertical-align: middle;

	z-index: 0;
	position: absolute;
}

/* 左上角标志 样式 */
.logo {

	/* 标志大小 */
	max-height: 7%;
	max-width: 75%;

	/* 标志布局位置 */
	position: absolute;
	top: 2%;
	left: 6%;

	/* display: none; */
}

/* 右上角音乐按钮 样式 */
.music {

	/* 按钮大小 */
	max-height: 5%;
	max-width: 13%;


	/* 按钮布局位置 */
	position: absolute;
	top: 2%;
	right: 6%;

	/* display: none; */
}

.music img {
	height: 100%;
}

/* 单个选项 样式*/
.menu-item {
	width: 33%;
	height: 100%;

	position: absolute;
	top: 0%;

	/* background: url(../img/menu_item.png); */
	/* background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%; */

	/* 单个选项文字字体设置 */
	font-family: QingKe;

	font-size: 2.3vh;
	color: rgba(0, 0, 0, 0.9);
	-webkit-filter: brightness(120%);
	/* Chrome, Safari, Opera */
	filter: brightness(120%);
	/* 单个选项内部元素对齐方式：水平垂直居中 */
	display: box;
	/* OLD - Android 4.4- */
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.menu-item img {
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	margin-top: 0%;
}


/* 标题部分 样式 */
.header {

	/* 标题部分大小 */
	height: 10%;
	width: 100%;

	/* 标题部分布局位置 */
	position: absolute;
	top: 12%;
	/* background: lightcoral; */

	/* 标题部分内部元素对齐方式：水平垂直居中 */
	display: table;
	text-align: center;

	/* 标题部分文字字体设置 */
	font-family: QingKe;
	font-size: 7vw;
	letter-spacing: 2.5vw;
	/* display: none; */
}

/* 关卡级别样式 */
.level {
	display: none;
	vertical-align: middle;
	font-size: 5vw;
	height: 38.2%;
}

/* 副标题样式 */
.subheader {
	/* 副标题部分大小 */
	height: 6%;
	width: 100%;

	/* 副标题部分布局位置 */
	position: absolute;
	top: 22%;
	/* background: lightcoral; */

	/* 副标题部分内部元素对齐方式：水平垂直居中 */
	display: table;
	text-align: center;

	/* 副标题部分文字字体设置 */
	font-family: QingKe;
	font-size: 7vw;
	letter-spacing: 1vw;
}

/* 副标题部分文字 */
.subheader_txt {
	vertical-align: middle;
	font-size: 5vw;
	height: 38.2%;
}

/* 计时区域样式 */
#timer {
	vertical-align: middle;
	top: 25%;
	background: url(../img/under.png) no-repeat 100% 100%;
	background-size: 100% 100%;
	margin: 0 auto;
	width: 88%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	text-shadow: 3px 3px 2px black;
}

/* 计时区域文字样式 */
.timer_txt_font {
	font-size: 4vw;
}

/* 计时区域数字样式 */
.timer_num_font {
	font-size: 4vw;
}

/* 主游戏区域样式 */
.play_wrap {
	position: absolute;
	top: 30%;
	width: 88%;
	height: 55%;
	left: 6%;
}

/* 顶部箭头样式 */
#arrow_top {
	width: 20%;
	position: absolute;
	left: 40%;
	top: 0px;

	display: none;

	/* 顶部箭头动画效果 */
	animation: arrowMovedown 500ms infinite;
	-moz-animation: arrowMovedown 500ms infinite;
	/* Firefox */
	-webkit-animation: arrowMovedown 500ms infinite;
	/* Safari and Chrome */
	-o-animation: arrowMovedown 500ms infinite;
	/* Opera */

	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	/* Safari 和 Chrome */
}

/* 顶部箭头动画效果 向下移动*/
@keyframes arrowMovedown {
	from {}

	to {
		transform: translateY(20%);
	}
}

@-moz-keyframes arrowMovedown

/* Firefox */
	{
	from {}

	to {
		transform: translateY(20%);
	}
}

@-webkit-keyframes arrowMovedown

/* Safari and Chrome */
	{
	from {}

	to {
		transform: translateY(20%);
	}
}

@-o-keyframes arrowMovedown

/* Opera */
	{
	from {}

	to {
		transform: translateY(20%);
	}
}

/* 底部箭头样式 */
#arrow_bottom {
	width: 20%;
	position: absolute;
	left: 40%;
	bottom: 0px;
	transform: rotate(180deg);

	display: none;

	/* 底部箭头动画效果*/
	animation: arrowMoveUp 500ms infinite;
	-moz-animation: arrowMoveUp 500ms infinite;
	/* Firefox */
	-webkit-animation: arrowMoveUp 500ms infinite;
	/* Safari and Chrome */
	-o-animation: arrowMoveUp 500ms infinite;
	/* Opera */

	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	/* Safari 和 Chrome */
}

/* 底部箭头动画效果 向上移动*/
@keyframes arrowMoveUp {
	from {}

	to {
		transform: rotate(180deg) translateY(20%);
	}
}

@-moz-keyframes arrowMoveUp

/* Firefox */
	{
	from {}

	to {
		transform: rotate(180deg) translateY(20%);
	}
}

@-webkit-keyframes arrowMoveUp

/* Safari and Chrome */
	{
	from {}

	to {
		transform: rotate(180deg) translateY(20%);
	}
}

@-o-keyframes arrowMoveUp

/* Opera */
	{
	from {}

	to {
		transform: rotate(180deg) translateY(20%);
	}
}

/* 左侧箭头样式 */
#arrow_left {
	width: 20%;
	position: absolute;
	top: 40%;
	left: 0px;
	transform: rotate(-90deg);

	display: none;

	/* 左侧箭头动画效果*/
	animation: arrowMoveRight 500ms infinite;
	-moz-animation: arrowMoveRight 500ms infinite;
	/* Firefox */
	-webkit-animation: arrowMoveRight 500ms infinite;
	/* Safari and Chrome */
	-o-animation: arrowMoveRight 500ms infinite;
	/* Opera */

	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	/* Safari 和 Chrome */
}

/* 左侧箭头动画效果 向右移动*/
@keyframes arrowMoveRight {
	from {}

	to {
		transform: rotate(-90deg) translateY(20%);
	}
}

@-moz-keyframes arrowMoveRight

/* Firefox */
	{
	from {}

	to {
		transform: rotate(-90deg) translateY(20%);
	}
}

@-webkit-keyframes arrowMoveRight

/* Safari and Chrome */
	{
	from {}

	to {
		transform: rotate(-90deg) translateY(20%);
	}
}

@-o-keyframes arrowMoveRight

/* Opera */
	{
	from {}

	to {
		transform: rotate(-90deg) translateY(20%);
	}
}

/* 右侧箭头样式 */
#arrow_right {
	width: 20%;
	position: absolute;
	top: 40%;
	right: 0px;
	transform: rotate(90deg);

	display: none;

	/* 右侧箭头动画效果 */
	animation: arrowMoveLeft 500ms infinite;
	-moz-animation: arrowMoveLeft 500ms infinite;
	/* Firefox */
	-webkit-animation: arrowMoveLeft 500ms infinite;
	/* Safari and Chrome */
	-o-animation: arrowMoveLeft 500ms infinite;
	/* Opera */

	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	/* Safari 和 Chrome */
}

/* 右侧箭头动画效果 向左移动*/
@keyframes arrowMoveLeft {
	from {}

	to {
		transform: rotate(90deg) translateY(20%);
	}
}

@-moz-keyframes arrowMoveLeft

/* Firefox */
	{
	from {}

	to {
		transform: rotate(90deg) translateY(20%);
	}
}

@-webkit-keyframes arrowMoveLeft

/* Safari and Chrome */
	{
	from {}

	to {
		transform: rotate(90deg) translateY(20%);
	}
}

@-o-keyframes arrowMoveLeft

/* Opera */
	{
	from {}

	to {
		transform: rotate(90deg) translateY(20%);
	}
}

/* 按钮区域样式 */
.dock {

	/* 轮播图展示区域布局位置 */
	position: absolute;
	bottom: 0px;

	/* 轮播图展示区域大小 */
	/* height: 20%; */
	top: 88%;
	width: 100%;
}

/* 开始界面按钮区域容器样式 */
.start_dock_wrap {
	width: 100%;
	height: 100%;
}

/* 开始界面按钮样式 */
.start_dock_btn {
	width: 30%;
	left: 35%;
	position: absolute;
}

/* 游戏界面按钮区域容器样式 */
.gaming_dock_wrap {
	width: 100%;
	height: 90%;
}

/* 游戏界面“原图”按钮样式 */
.gaming_dock_btn_ori {
	width: 30%;
	left: 12%;
	position: absolute;
}

/* 游戏界面“帮助”按钮样式 */
.gaming_dock_btn_help {
	width: 30%;
	right: 12%;
	position: absolute;
}

/* 弹出界面背景样式 */
.zoom-bg {
	width: 100%;
	height: 100%;
	background: rgba(31, 31, 31, 0.9);
	position: absolute;
	z-index: 500;
	left: 0px;

	vertical-align: middle;
}

/* 关闭按钮样式 */
.close {

	/* 按钮大小 */
	height: 7%;

	/* 按钮布局位置 */
	position: absolute;
	z-index: 501;
	top: 0px;
	margin-top: 5%;
	right: 6%;
	padding: 0px;

	border: hidden;
	outline: none;
	color: gray;
	font-size: 5vw;
	background-color: rgba(31, 31, 31, 0);
}

/* 过关弹出界面的图片样式 */
.popup_pic {
	position: absolute;
	width: 100%;
	left: 0%;
	right: 0%;
	top: 9%;
	height: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup_pic img {
	max-width: 88%;
	max-height: 100%;
}

/* 过关弹出界面的文字样式 */
.popup_txt {
	position: absolute;
	width: 88%;
	left: 0%;
	right: 0%;
	top: 50%;
	height: 30%;
	padding: 0% 6%;
	overflow: scroll;
}

.popup_txt p {
	text-indent: 2em;
	font-size: 5vw;
	line-height: 5vh;
	text-align: justify;
}

/* 过关弹出界面的按钮区域样式 */
.popup_btns {
	position: absolute;
	width: 100%;
	left: 0%;
	right: 0%;
	top: 85%;
	height: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 过关弹出界面的按钮样式 */
.popup_btn {
	max-width: 88%;
	max-height: 100%;
	margin: 0px 10px;
}

/* 原图弹出界面的图片样式 */
.tips_pic {
	position: absolute;
	width: 100%;
	left: 0%;
	right: 0%;
	top: 10%;
	bottom: 20%;
	height: 48%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tips_pic img {
	max-width: 88%;
	max-height: 100%
}

/* 原图弹出界面的文字样式 */
.tips_txt {
	position: absolute;
	width: 88%;
	left: 0%;
	right: 0%;
	top: 58%;
	height: 40%;
	padding: 0% 6%;
	overflow: scroll;
	
}

.tips_txt p {
	text-indent: 2em;
	font-size: 5vw;
	line-height: 5vh;
	text-align: justify;
}

/* 帮助信息弹出界面的文字样式 */
.help_txt {
	position: absolute;
	width: 88%;
	left: 0%;
	right: 0%;
	top: 13%;
	bottom: 20%;
	height: 80%;
	padding: 0% 6%;
	overflow: scroll;
}

.help_txt p {
	text-indent: 2em;
	font-size: 5vw;
	line-height: 4vh;
	text-align: justify;
}

.help_txt img {
	width: 100%
}

/* 成功过关弹出界面的容器样式 */
.success_wrap {
	position: absolute;
	width: 70%;
	left: 15%;
	top: 30%;
	height: 30%;
	overflow: scroll;
	background-color: blanchedalmond;
	background: url(../img/msg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;
	color: black;
	border-radius: 15px;
}

/* 成功过关弹出界面的文字样式 */
.success_txt {
	text-align: center;
	line-height: 80px;
	font-size: 5vw;
}

/* 成功过关弹出界面的结果样式 */
.success_result {
	text-align: center;
	font-size: 6vw;
}

/* 结果文字样式 */
.result_txt {
	text-align: center;
	font-size: 4vw;
}

/* 成果过关界面 “继续”按钮样式 */
.subheader_btn {
	position: absolute;
	top: 70%;
	width: 100%;
	height: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 提示点击 */
.node {

	/* 标题部分大小 */
	height: 16%;
	width: 100%;

	/* 标题部分布局位置 */
	position: absolute;
	top: 12%;
	/* background: lightcoral; */
	background-color: rgb(31, 31, 31);
	background-repeat: no-repeat;
	/* 标题部分内部元素对齐方式：水平垂直居中 */
	display: table;
	text-align: center;

	/* 标题部分文字字体设置 */
	/* font-family: STHupo; */
	font-size: 6vw;
	letter-spacing: 0.5vw;
	display: flex;
    justify-content: center;
    align-items: center;
}