/*控制字体大小 
1.是因为这里是作为一个基础数值，换个方向去想，这里先不乘以100以免产生误解。

例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（320/640）=25px；这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=（320/640）。

2.一般浏览器的最小字体是12px，如果html的font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题。

3. 为了计算方便   我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变.
*/
html {
	font-size: calc(100vw / 750 * 100);
	width: 100%;
	background: #F5F8FA;
}

/*抬头背景*/
.head-bg-0 {
	width: 100%;
	height: auto;
}

/*背景--金融网样*/
.head-bg-1 {
	width: 84%;
	margin: -38.7% 8% 0 8%;
	background: url(../../image/index-bg2.png) no-repeat center center;
	background-size: 100% 100%;
}

/*用于高度控制*/
.head-bg-1 .security-qrcode:before {
	content: '';
	float: left;
	padding-top: 41.9%;
	width: 0;
}

/*正品标识图贴*/
.head-bg-1:before {
	content: '';
	position: absolute;
	left: auto;
	bottom: auto;
	top: 0;
	right: 0;
	width: 34.4%;
	padding-top: 28.73%;
	margin-top: -6.3%;
	margin-right: -4%;
	background: url(../../image/good.png) no-repeat center center;
	background-size: 100% 100%;
	z-index: 1;
}

/**
 * 防伪码 - 及介绍 - 商品缩略图
 */
.head-bg-1 .security-qrcode {
	color: #15222e;
	letter-spacing: 0;
	font-size: 0.28rem;
}

/**
 * 防伪码 - 及介绍
 */
.head-bg-1 .security-qrcode .text {
	float: left;
	width: 51%;
	padding-left: 4.8%;
	padding-top: 7%;
	padding-bottom: 6.8%;
	line-height: 1.2em;
}

.head-bg-1 .security-qrcode .field-goods {
	font-size: .24rem;
	margin-top: 6.1%;
}

/**
 * 商品图
 */
.head-bg-1 .security-qrcode .security-qrcode-img {
	left: 60.79%;
	margin: 7.9% 6.8% 6.8% 0;
	background: no-repeat center center;
	background-size: contain;
}

/*首次查询提示*/
.head-bg-1 .scan-count {
	font-size: .2rem;
	font-weight: 400;
	color: #A4A3A3;
	letter-spacing: 0;
	text-align: left;
	display: block;
	border-top: 1px dashed rgba(0, 0, 0, .3);
	margin: 0 1%;
	padding: 2.85% 3.4%;
	line-height: 1.2em;
}

/**
 * 图标导航列表
 */
.icon-nav {
	margin-top: 3%;
	text-align: left;
	font-size: 0;
	padding: 1.333% 4.333%;
}

/**
 * 控制单个最小高
 */
.icon-nav li:before {
	content: '';
	display: block;
	padding-top: 100%;
	width: 0;
	height: 0;
	opacity: 0;
	float: left;
}

.icon-nav li {
	position: relative;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	background: #fff;
	border-radius: .06rem;
	box-shadow: 0 1px 15px -10px rgba(0, 0, 0, .3);
	width: 25.333%;
	height: 100%;
	margin: 4%;
	cursor: pointer;
}

/**
 * 控制图标高度
 */
.icon-nav .img-icon:before {
	content: '';
	display: block;
	padding-top: 100%;
	width: 0;
	height: 0;
	opacity: 0;
	float: left;
}

.icon-nav .img-icon {
	display: block;
	background: no-repeat center center;
	background-size: contain;
	width: 31.57%;
}

.icon-nav li span {
	font-size: .24rem;
	color: #818181;
	line-height: 1em;
	margin-top: 9.5%;
	display: block;
}

.img-icon.i-1 {
	background-image: url(../../image/icon-trace.png);
}

.img-icon.i-2 {
	background-image: url(../../image/icon-enterprise.png);
}

.img-icon.i-3 {
	background-image: url(../../image/icon-shop.png);
}

.img-icon.i-4 {
	background-image: url(../../image/icon-money.png);
}

.img-icon.i-5 {
	background-image: url(../../image/icon-balance.png);
}

.img-icon.i-6 {
	background-image: url(../../image/icon-game.png);
}

.img-icon.i-7 {
	background-image: url(../../image/weixin.png);
}

.img-icon.i-8 {
	background-image: url(../../image/qq.png);
}

.img-icon.i-9 {
	background-image: url(../../image/iphone.png);
}

/**
 * 返回按钮
 */
.return-btn {
	position: absolute;
	right: 0;
	color: #fff;
	display: block;
	margin-top: 2.93%;
	margin-right: 1.86%;
	padding: .6% 4%;
	border: 1px solid transparent;
	box-sizing: border-box;
	z-index: 9999;
}

.return-btn:after {
	content: '返回';
	font-size: .24rem;
	display: block;
	font-weight: 300;
}

.return-btn.ui-line-round:before {
	border-color: #fff;
	border-radius: 999999px;
}

/**
 * 内页导航盒子
 */
.body-nav {
	text-align: center;
	vertical-align: middle;
	font-size: 0;
}

/**
 * 导航链接
 */
.body-nav a {
	position: relative;
	padding-top: 13.66%;
	box-sizing: border-box;
	display: inline-block;
	width: calc(100% / 4);
}

/**
 * body内部页导航
 */
.body-nav a span {
	font-size: .28rem;
	display: block;
	color: #fff;
	margin: 0 5%;
	box-sizing: border-box;
	padding: 1% 5%;
}

.body-nav :target span {
	color: #12caa9;
	border-radius: 99999px;
	background: #fff;
	border: 1px solid #fff;
}
/**
 * 内页子页盒子
 */
.body-info {
	padding-top: 24.66%;
	background: url(../../image/body-bg.png) no-repeat top center;
	background-size: 100% auto;
	min-height: 100vh;
}



/**
 *显示信息 - 块框
 */
.show-info {
	background: #fff;
	border-radius: .08rem;
	margin: 0 2.667% 2.667%;
	font-size: .24rem;
	color: #4f5d6a;
	letter-spacing: 0;
	padding: 6.667% 5.1%;
	position: relative;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
}

/*小图标*/
.show-info:after {
	content: '';
	position: absolute;
	background-image: linear-gradient(0deg, rgba(40, 215, 143, 1) 0%, rgba(9, 197, 180, 1) 100%);
	width: .12rem;
	height: .35rem;
	top: .5rem;
	left: 0;
	border-bottom-right-radius: .03rem;
	border-top-right-radius: .03rem;
}

/*标题*/
.show-info .font-title {
	font-size: .3rem;
	color: #15222e;
	font-weight: 700;
	letter-spacing: 0;
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-bottom: .2rem;
	align-items: center;
}

/*副标题*/
.show-info .vice-title {
	font-size: .2rem;
	color: #666;
	vertical-align: bottom;
}

/*内容*/
.show-info .font-detail {
	font-size: .24rem;
}

.show-info .img-list {
	margin-top: 7.1%;
}

.show-info .img-list img {
	width: 100%;
}

/**
 * 时间线
 */
.time-line {}

/*轴列*/
.time-line .time-point {
	padding-left: .4rem;
	padding-bottom: .2rem;
	font-size: .24rem;
	color: #4f5d6a;
	letter-spacing: 0;
}

/*轴点*/
.time-line .time-point:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: .06rem;
	height: .06rem;
	border-radius: 50%;
	background: #D0F5EC;
	box-shadow: 0 0 0 .1rem rgba(20, 203, 167, 1);
}

.time-line .time-point .img-box {
	max-width: 1.4rem;
	margin-left: .1rem;
}

.time-line .time-point .img-box img {
	max-width: 1.4rem;
}

.time-line .time-point .time {
	font-size: .28rem;
	color: #12caa9;
	letter-spacing: 0;
	line-height: .3rem;
}
