/* 默认样式 */
@charset "utf-8";
body{ margin:0; padding:0; font-size:12px; font-family:"微软雅黑","宋体",Arial, Helvetica, sans-serif; background-color:#fff; overflow-x:hidden;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
button, input, select, textarea {border: none;outline: none;background: none;}
img{ border:0; margin:0; padding:0;}
ol,ul{list-style:none;}
em{font-style: normal!important;}
a{ font-family:"微软雅黑","宋体",Arial, Helvetica, sans-serif; text-decoration:none;outline:none;color: #333333;}
body,html{scroll-behavior: smooth;font:14px "微软雅黑";}
.clearfix:after {content:"";display:block;height:0;clear:both;} 
.clearfix {zoom:1;}
.fl{float: left;}
.fr{float: right;}

/* 防止图片闪一下 */
image{will-change: transform}
/* scroll-view */
.scroll-row{ width: 100%;white-space: nowrap; }
.scroll-row-item{ display: inline-block; }

.bg_f{background-color: #fff;}

/* 阴影 */
.shadow_sm {box-shadow: 0 2px 4px rgba(114, 130, 138, 0.2);}
.shadow {box-shadow: 0 8px 16px rgba(114, 130, 138, 0.2);}
.shadow_lg {box-shadow: 0 16px 48px rgba(114, 130, 138, 0.2);}
/* 全阴影 */
.showdow_full{box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);}

/* 定位 */
.p_absolute{ position: absolute; }
.p_fixed{ position: fixed; }
.p_relative{ position: relative; }
.left_0{ left: 0; }
.top_0{ top: 0; }
.bottom_0{ bottom: 0; }
.right_0{ right: 0; }

/* 宽高 */
.w_100{ width: 100%;}
.h_100{ height: 100%;}

/* 字体大小 */
.font12{ font-size: 12px; }
.font14{ font-size: 14px; }
.font16{ font-size: 16px; }
.font18{ font-size: 18px; }
.font20{ font-size: 20px; }
.font24{ font-size: 22px; }
.font26{ font-size: 26px; }
.font28{ font-size: 28px; }
.font30{ font-size: 30px; }


.font_bold{ font-weight: bold; }
.font_w100{ font-weight: 100;}


/* 划线 */
.line-through{ text-decoration: line-through; }

.t_center{ text-align: center; }
.t_left{ text-align: left; }
.t_right{ text-align: right;}


/* flex布局 */
.row { box-sizing: border-box!important; display: flex!important; flex-direction: row!important; flex-wrap: wrap!important;}
.d_flex{ display: flex; }
.d_block{ display: block; }
.d_inline-block{ display: inline-block; }
.d_none{display: none;}

.flex_1{ flex: 1; }
.flex_column{ flex-direction: column; }
.flex_row{ flex-direction: row; }
.flex_wrap{ flex-wrap: wrap; }
.flex_nowrap{ flex-wrap: nowrap; }
.flex_shrink{flex-shrink: 0;}
.j_start{ justify-content: flex-start; }
.j_center{ justify-content: center; }
.j_end{ justify-content: flex-end; }
.j_sb{ justify-content: space-between; }
.a_center{ align-items:center; }
.a_start{ align-items: flex-start; }
.a_end{ align-items:flex-end; }
.a_stretch{ align-items: stretch; }
.a_self-start{ align-self: flex-start; }
.a_self-auto{ align-self: auto; }
.a_self-end{ align-self: flex-end; }
.a_self-stretch{ align-self:stretch; }
.a_self-baseline{ align-self:baseline; }

/* 边框Border */
.border{ border: 1px solid #f2f2f2;}
.border_top{ border-top: 1px solid #f2f2f2; }
.border_right{border-right: 1px solid #f2f2f2;}
.border_bottom{border-bottom: 1px solid #f2f2f2;}
.border_left{ border-left: 1px solid #f2f2f2;}

/* 圆角方向 */
.radius_top{border-radius: 20px 20px 0 0; }
.radius_bottom{border-radius:  0 0 10px 10px; }

/* 外边距 */
.m_0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.m_5 { margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}
.m_10 { margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}
.m_20 { margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}
.m_30 { margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;}
.m_40 { margin-left: 40px;margin-right: 40px;margin-top: 40px;margin-bottom: 40px;}
.m_50 { margin-left: 50px;margin-right: 50px;margin-top: 50px;margin-bottom: 50px;}

.mx_0 { margin-left: 0;margin-right: 0;}
.mx_5 { margin-left: 5px;margin-right: 5px;}
.mx_auto{margin-left: auto;margin-right: auto;}
.mx_10 { margin-left: 10px;margin-right: 10px;}
.mx_20 { margin-left: 20px;margin-right: 20px;}
.mx_30 { margin-left: 30px;margin-right: 30px;}
.mx_40 { margin-left: 40px;margin-right: 40px;}
.mx_50 { margin-left: 50px;margin-right: 50px;}

.my_0 { margin-top: 0;margin-bottom: 0;}
.my_5 { margin-top: 5px;margin-bottom: 5px;}
.my_10 { margin-top: 10px;margin-bottom: 10px;}
.my_20 { margin-top: 20px;margin-bottom: 20px;}
.my_30 { margin-top: 30px;margin-bottom: 30px;}
.my_40 { margin-top: 40px;margin-bottom: 40px;}
.my_50 { margin-top: 50px;margin-bottom: 50px;}

.mt_0 { margin-top: 0;}
.mt_5 { margin-top: 5px;}
.mt_auto { margin-top: auto;}
.mt_10 { margin-top: 10px;}
.mt_20 { margin-top: 20px;}
.mt_30 { margin-top: 30px;}
.mt_40 { margin-top: 40px;}
.mt_50 { margin-top: 50px;}

.mb_0 { margin-bottom: 0;}
.mb_5 { margin-bottom: 5px;}
.mb_auto { margin-bottom: auto;}
.mb_10 { margin-bottom: 10px;}
.mb_20 { margin-bottom: 20px;}
.mb_30 { margin-bottom: 30px;}
.mb_40 { margin-bottom: 40px;}
.mb_50 { margin-bottom: 50px;}

.ml_0 { margin-left: 0;}
.ml_5 { margin-left: 5px;}
.ml_auto { margin-left: auto;}
.ml_10 { margin-left: 10px;}
.ml_20 { margin-left: 20px;}
.ml_30 { margin-left: 30px;}
.ml_40 { margin-left: 40px;}
.ml_50 { margin-left: 50px;}

.mr_0 { margin-right: 0;}
.mr_5 { margin-right: 5px;}
.mr_auto { margin-right: auto;}
.mr_10 { margin-right: 10px;}
.mr_20 { margin-right: 20px;}
.mr_30 { margin-right: 30px;}
.mr_40 { margin-right: 40px;}
.mr_50 { margin-right: 50px;}

/* 内边距 */
.p_0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.p_5 {padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom:5px;}
.p_10 {padding-left: 10px!important;padding-right: 10px!important;padding-top: 10px!important;padding-bottom: 10px!important;}
.p_20 {padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}
.p_30 {padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}
.p_40 {padding-left: 40px;padding-right: 40px;padding-top: 40px;padding-bottom: 40px;}
.p_50 {padding-left: 50px;padding-right: 50px;padding-top: 50px;padding-bottom: 50px;}

.px_0 { padding-left: 0;padding-right: 0;}
.px_5 { padding-left: 5px;padding-right: 5px;}
.px_10 { padding-left: 10px;padding-right: 10px;}
.px_20 { padding-left: 20px;padding-right: 20px;}
.px_30 { padding-left: 30px;padding-right: 30px;}
.px_40 { padding-left: 40px;padding-right: 40px;}
.px_50 { padding-left: 50px;padding-right: 50px;}

.py_0 { padding-top: 0;padding-bottom: 0;}
.py_5 { padding-top: 5px;padding-bottom: 5px;}
.py_10 { padding-top: 10px;padding-bottom: 10px;}
.py_20 { padding-top: 20px;padding-bottom: 20px;}
.py_30 { padding-top: 30px;padding-bottom: 30px;}
.py_40 { padding-top: 40px;padding-bottom: 40px;}
.py_50 { padding-top: 50px;padding-bottom: 50px;}

.pt_0 { padding-top: 0;}
.pt_5 { padding-top: 5px;}
.pt_10 { padding-top: 10px;}
.pt_20 { padding-top: 20px;}
.pt_30 { padding-top: 30px;}
.pt_40 { padding-top: 40px;}
.pt_50 { padding-top: 50px;}

.pb_0 { padding-bottom: 0;}
.pb_5 { padding-bottom: 5px!important;}
.pb_10 { padding-bottom: 10px!important;}
.pb_20 { padding-bottom: 20px!important;}
.pb_30 { padding-bottom: 30px!important;}
.pb_40 { padding-bottom: 40px!important;}
.pb_50 { padding-bottom: 50px!important;}

.pl_0 { padding-left: 0;}
.pl_5 { padding-left: 5px;}
.pl_10 { padding-left: 10px;}
.pl_20 { padding-left: 20px;}
.pl_30 { padding-left: 30px;}
.pl_40 { padding-left: 40px;}
.pl_50 { padding-left: 50px;}

.pr_0 { padding-right: 0;}
.pr_5 { padding-right: 5px;}
.pr_10 { padding-right: 10px;}
.pr_20 { padding-right: 20px;}
.pr_30 { padding-right: 30px;}
.pr_40 { padding-right: 40px;}
.pr_50 { padding-right: 50px;}

/* 隐藏提交输入框 */
.h_input{display: none;}
/* 滚动 */
.auto_y{overflow-y: auto;}

/* 动画 */
.trs2{transition:all .2s linear; -webkit-transition: all .2s linear;}
.trs4{transition:all .4s linear; -webkit-transition: all .4s linear;}
.trs6{transition:all .6s linear; -webkit-transition: all .6s linear;}
.trs8{transition:all .8s linear; -webkit-transition: all .8s linear;}
.trs10{transition:all 1s linear; -webkit-transition: all 1s linear;}

/* 省略号 */
.text_overflow{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 多行文本省略号 */
.text_overflow_2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

body{
	font-size: 14px;
	font-family: "微软雅黑";
	max-width: 768px;
	min-width: 320px;
	margin: 0 auto;
	color: #333333;
}



/* 弹出提示语句 */
.mask_box_text {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, .7);
	padding: 25px 10px;
	color: #fff;
	font-size: 14px;
	display: none;
	border-radius: 5px;
	transition: all .5s;
	max-width: 50%;
	min-width: 20%;
	z-index: 1000;
	text-align: center;
}

/* 加载动画 */
.loading_mask_box {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, .7);
	padding: 10px 10px;
	color: #fff;
	font-size: 14px;
	display: none;
	border-radius: 10px;
	height: 200px;
	width: 200px;
	z-index: 100;
	transition: all .5s;
	text-align: center;
}

.stage {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 20px 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.dot-overtaking {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: transparent;
	color: #fff;
	margin: -1px 0;
	box-shadow: 0 -20px 0 0;
	-webkit-animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
	animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
}

.dot-overtaking::before,
.dot-overtaking::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: transparent;
	color: #fff;
	box-shadow: 0 -20px 0 0;
}

.dot-overtaking::before {
	-webkit-animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
	animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}

.dot-overtaking::after {
	-webkit-animation: dot-overtaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
	animation: dot-overtaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
	-webkit-animation-delay: .6s;
	animation-delay: .6s;
}

@-webkit-keyframes dot-overtaking {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}

@keyframes dot-overtaking {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}

/* 弹出框 */
.home_mask_box,
.home_mask_box_zf{
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all .5s;
	opacity: 0;
	z-index: -1;
	opacity: 0;
	width: 100%;
}

.home_mask_box.active,
.home_mask_box_zf.active{
	opacity: 1;
	z-index: 999;
}

/* 内容 */
.home_mask_box .mask_panel,
.home_mask_box_zf .mask_panel{
	position: fixed;
	z-index: 10000;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 280px;
	padding: 5px;
	background-color: #fff;
	border-radius: 5px;
	transition: all .5s;
}
.home_mask_box.active .mask_panel,
.home_mask_box_zf.active .mask_panel{
	transform:translate(-50%, -50%);
}

.home_mask_box .content_box,
.home_mask_box .content_box_xy_list,
.home_mask_box_zf .content_box_xy_list{
	/* height: 100%; */
	text-align: center;
	padding: 10px;
	position: relative;
	/* min-height: 410px; */
}