.app{
	background: url(/Static/img/about/bg.jpg) center top / cover no-repeat;
}
@media screen and (min-width: 1200px) {
	.content{
		padding-bottom: 160px;
	}
	.jianjie{
		width:918px;
		height: 229px;
		background: url(/Static/img/about/jianjie-bg.png) center / cover no-repeat;
		margin: 137px auto 0; 
		font-family: 'syst-default';
	}
	.jianjie::before{
		display: block;
		height: 1px;
		content: '';
	}

	.jianjie-title{
		width: 449px;
		height: 30px;
		background: url(/Static/img/icon/title-bg.png) center / 100% no-repeat;
		text-align: center;
		line-height: 30px;
		font-size: 30px;
		color: var(--fontColor);
		margin: 25px auto 0;
	}
	.jianjie p{
		text-align: center;
		color: #000;
		font-size: 22px;
		margin-top: 20px;
	}
	.jianjie span{
		display: block;
		color: #333333;
		font-size: 16px;
		line-height: 25px;
		max-width: 90%;
		margin: 10px auto 0;
	}
	.code{
		display: flex;
		justify-content: center;
		margin-top: 389px;
		cursor: pointer;
	}
	.code-item:nth-child(2){
		margin-left:224px;
	}
	.code-item > img{
		width: 162px;
		height: 162px;
	}
	.code-item{
		position: relative;
	}
	.code-item .code-main{
		position: absolute;
		height: 0;
		left: 0;
		top: 0;
		transition: all .5s;
		width: 100%;
		overflow:hidden;
	}
	.code-item.on .code-main{
		height: 162px;
	}
	.code-item p{
		font-size: 24px;
		color: #333333;
		text-align: center;
		margin-top: -3px;
	}
	.lichen-title{
		margin: 115px auto 0;
		letter-spacing: 5px;
	}
	.lichen-title p{
		text-align: center;
		color: var(--fontColor);
		font-size: 48px;
		font-family: 'syst-blod';
	}
	.lichen-title span{
		font-size: 16px;
		color: #999999;
		display: block;
		text-align: center;
	}
	.lichen-list{
		width:985px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 45px auto 0;
	}
	.lichen-item{
		width: 444px;
		height: 146px;
		border:1px solid var(--fontColor);
		border-radius: 25px;
		position: relative;
	}
	.lichen-item:nth-child(even){
		margin-top: 101px;
	}
	.lichen-item:not(:nth-child(1)):nth-child(odd){
		margin-top: -47px;
	}
	.lichen-item:not(:nth-child(2)):nth-child(even){
		margin-top: 55px;
	}
	.lichen-item-img{
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 25px;
	}
	.lichen-item::before{
		display: block;
		content: '';
		width: 18px;
		height: 26px;
		background: url(/Static/img/icon/jiantou.png) center / cover no-repeat;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}
	.lichen-item::after{
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 25px;
	}
	.lichen-item:nth-child(odd)::before{
		right: -18px;
		transform: rotateY(-180deg) translate(0, -50%);
	}
	.lichen-item:nth-child(even)::before{
		left: -18px;
	}
	.lichen-item:nth-child(odd)::after{
		background: linear-gradient(to right, rgba(255, 255, 255, .3), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	}
	.lichen-item:nth-child(even)::after{
		background: linear-gradient(to left, rgba(255, 255, 255, .3), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	}

	.lichen-item-con{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}
	.lichen-item-con p{
		color: #8d4bbb;
		font-size: 42px;
		font-family: 'syst-blod';
		width: 90%;
	}
	.lichen-item-con span{
		width: 90%;
		display: block;
		font-size: 24px;
		color: #333333;
		margin-top: -40px;
	}
	.lichen-item:nth-child(odd) .lichen-item-con p,
	.lichen-item:nth-child(odd) .lichen-item-con span{
		text-align: right;
	}

	.lichen-xian{
		width: 25px;
		height: 26px;
		background: url(/Static/img/icon/icon-lichen.png) center / cover no-repeat;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}
	.lichen-item:not(:last-child) .lichen-xian::after{
		display: block;
		content: '';
		/*width: 1px;*/
		height: 75px;
		border-left: 2px dashed #8d4bbb;
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translate(-50%, 0);
	}
	.lichen-item:nth-child(odd) .lichen-xian{
		right: -60px;
	}
	.lichen-item:nth-child(even) .lichen-xian{
		left: -60px;
	}
}
@media screen and (max-width: 1200px) {
	.content{
		padding-bottom: 1.6rem;
	}
	.jianjie{
		font-family: 'syst-default';
		width:7.01rem;
		height: 4.66rem;
		background: url(/Static/img/about/jianjie-bg-m.png) center / cover no-repeat;
		margin: 1.37rem auto 0; 
	}
	.jianjie::before{
		display: block;
		height: .01rem;
		content: '';
	}

	.jianjie-title{
		width: 4.5rem;
		height: .3rem;
		background: url(/Static/img/icon/title-bg.png) center / 100% no-repeat;
		text-align: center;
		line-height: .3rem;
		font-size: .26rem;
		color: var(--fontColor);
		margin: .25rem auto 0;
	}
	.jianjie p{
		text-align: center;
		color: #000;
		font-size: .22rem;
		margin-top: .2rem;
	}
	.jianjie span{
		display: block;
		color: #333333;
		font-size: .2rem;
		line-height: .4rem;
		max-width: 90%;
		margin: .10rem auto 0;
	}

	.code{
		width: 7rem;
		display: flex;
		justify-content: space-around;
		margin: 1rem auto 0;
	}
	.code-item{
		margin: 0 0rem;
	}
	.code-item > img{
		width: 1.62rem;
		height: 1.62rem;
	}
	.code-item{
		position: relative;
	}
	.code-item .code-main{
		width: 1.62rem;
		position: absolute;
		height: 0;
		left: 0;
		top: 0;
		transition: all .5s;
		overflow:hidden;
	}
	.code-item.on .code-main{
		height: 162px;
	}
	.code-item p{
		font-size: .20rem;
		color: #333333;
		text-align: center;
		margin-top: -.2rem;
	}

	.lichen-title{
		margin: 1.15rem auto 0;
		letter-spacing:.05rem;
	}
	.lichen-title p{
		text-align: center;
		color: var(--fontColor);
		font-size: .48rem;
		font-family: 'syst-blod';
	}
	.lichen-title span{
		font-size: .16rem;
		color: #999999;
		display: block;
		text-align: center;
	}

	.lichen-list{
		width:7rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: .45rem auto 0;
	}
	.lichen-item{
		margin-left: .5rem;
		width: 4.44rem;
		height: 1.46rem;
		border:1px solid var(--fontColor);
		border-radius: .25rem;
		position: relative;
		margin-top: .5rem;
	}
	.lichen-item:nth-child(5) .lichen-item-img,
	.lichen-item:nth-child(7) .lichen-item-img{
		transform: rotateY(180deg);
	}
	.lichen-item-img{
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: .25rem;
	}
	.lichen-item::before{
		display: block;
		content: '';
		width: .18rem;
		height: .26rem;
		background: url(/Static/img/icon/jiantou.png) center / cover no-repeat;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		left: -.18rem;
	}
	.lichen-item::after{
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: .25rem;
		background: linear-gradient(to left, rgba(255, 255, 255, .3), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	}

	.lichen-item-con{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		z-index: 1;
		text-align: left;
	}
	.lichen-item-con p{
		color: #8d4bbb;
		font-size: .42rem;
		font-family: 'syst-default';
		width: 90%;
	}
	.lichen-item-con span{
		width: 90%;
		display: block;
		font-size: .24rem;
		color: #333333;
		margin-top: -.40rem;
	}

	.lichen-xian{
		width: .25rem;
		height: .26rem;
		background: url(/Static/img/icon/icon-lichen.png) center / cover no-repeat;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		left: -.60rem;

	}
	.lichen-xian::after{
		display: block;
		content: '';
		height: 1.7rem;
		border-left:.02rem dashed #8d4bbb;
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translate(-50%, 0);
	}
	.lichen-item:last-child .lichen-xian::after{
		height: 0;
	}
}