@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,500,700&display=swap&subset=chinese-simplified');
body {
  background: #f7f7f7;
  overflow-x: hidden;
  font-family: 'Noto Sans SC';
  /*font-family: 'sy';*/
}


@font-face {
	font-family: fz;
	src:url('../fonts/FZCSJW.woff'),	
	url('../fonts/FZCSJW.ttf'),	
	url('../fonts/FZCSJW.eot'),
	url('../fonts/FZCSJW.svg'); 
}

@font-face {
	font-family: sy;
	src:url('../fonts/sy2.woff'),	
	url('../fonts/sy2.ttf'),	
	url('../fonts/sy2.eot'),
	url('../fonts/sy2.svg'); 
}

a {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.layout {
  margin: 0 auto;
	max-width: 7.5rem;
  	width: 100%;
	height: 100vh;
}

.img {
  font-size: 0;
}

.img img {
  max-width: 100%;
}

.wrapper {
  padding: 0 .3rem;
}

.bg-index{
	position: relative;
	background: url(../images/bg-index.png) center no-repeat;
	background-size: cover;
}

.bg-index div{
	width: 100%;
	text-align: center;
}
.bg-index img{
	max-width: 70%;
}
.bg-about .topline{
	height: 1px;
}
.bg-about .header{
	position:relative;
	width: calc(100% - 2px);
	margin:auto;
	padding: 0.2rem 0;
	background: #bcada5;	
}
.bg-about .header h1{
	font-size: 0.3rem;
	color: #fff;
	font-weight: 100;
	height:1.3rem;
	line-height: 0.6rem;
}
.bg-about .header h1 span{
	font-size: 0.45rem;
}
.bg-about .header .back{
	position: absolute;
	left:0.3rem;
	top: 0.3rem;
	width: 1rem;
	height: 1rem;
	color: #fff;
	text-align: left;
	background: url(../images/icon_left.png) center no-repeat;
	background-size: 60%;
}
.bg-about .header .back a{
	display: inline-block;
	width: 100%;
	height: 100%;
}

.bg-index .top{
	position: absolute;
	top: 10%;
}
.bg-index .top .div2 {
	margin-top: 0.5rem;
}
.bg-index .bottom{
	position: absolute;
	bottom: 7%;
}
.bg-index .bottom .button{
	width: 40%;
	height: 1.5rem;
	margin: auto;
	background: url(../images/index-button.png) center no-repeat;
	background-size: contain;
}
.bg-index .bottom .button a{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.bg-about{
	position: relative;
	background: url(../images/bg-about.png) center no-repeat;
	background-size: cover;
}
.bg-about div{
	width: 100%;
	text-align: center;
}
.bg-about .title img{
	max-width: 70%;
}
.bg-about h1{
	color: #332c2b;
	font-size: .5rem;
}
.bg-about .top{
	position: absolute;
	top: 10%;
}
.bg-about .bottom{
	position: absolute;
	bottom: 7%;
}
.bg-about .bottom .button{
	width: 40%;
	height: 1.5rem;
	margin: auto;
	background: url(../images/about-button.png) center no-repeat;
	background-size: contain;
}
.bg-about .bottom .button a{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.bg-about .draw-box{
	clear: both;
	position: relative;
	top: 17%;
}
.bg-about .draw-line{
	margin: auto;
	width: 76%;
	height: 10px;
	background: url(../images/draw-line.png) center repeat-x;
}
.bg-about .draw-line::before{	
	content: '';
	float: left;
	width: 2%;
	height: 10px;
	background: url(../images/draw-left.png) center no-repeat;
}
.bg-about .draw-line::after{	
	content: '';
	float: right;
	width: 2%;
	height: 10px;
	background: url(../images/draw-right.png) center no-repeat;
}
.bg-about .draw-content-outter{
	position: absolute;
	width: 100%;
	height: 63vh;
	text-align: center;
}
.bg-about .draw-content-border{
	width: 74%;
	height: 100%;
	margin: auto;
	border-left: 1px solid #d7d6d5;
	border-right: 1px solid #d7d6d5;
}
.bg-about .draw-content{
	position: relative;
	width: 80%;
	height: 63vh;
	line-height: 0.6rem;
	margin: auto;
	padding: 0;
	overflow-x: hidden;
	overflow-y: scroll;	
}
.bg-about .content-box{
	width: 76%;
	height: auto;
	margin: auto;
	padding: 3vh 8%;
	text-align: left;
	color: #332c2b;
	font-size: 0.36rem;	
}
.bg-about .banner{
	width: 100%;
	text-align: center;
}
.bg-about .banner img{
	width: 100%;
	height: auto;
	text-align: center;
}
.bg-about .category-box{
	padding: 1%;
	width: 98%;
	overflow-y: visible;
	overflow-x: hidden;
}
.bg-about .category-box ul{
	clear: both;
}
.bg-about .category-box ul li{
	margin: 0.5rem auto;
	padding: 0.5rem;
	background: rgba(253, 249, 245, 0.8);
	text-align: left;
}
.bg-about .category-box ul li{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0.3rem auto;
	padding: 0.3rem 0.5rem;
	background: rgba(253, 249, 245, 0.8);
	text-align: left;
}
.bg-about .category-box ul li a.circle{
	width: 10%;
	font-size: 0.3rem;
	color: #897870;
}
.bg-about .category-box ul li a.text{
	width: 80%;
}
.bg-about .category-box ul li a.arrow{
	width: 10%;
	height: 1rem;
	background: url(../images/icon_right.png) center no-repeat;
	background-size: 40%;
}
.bg-about .category-box ul li p{
	font-size: 0.26rem;
	line-height: 0.6rem;
}
.bg-about .category-box ul li p.p1{
	color: #797878;
}
.bg-about .category-box ul li p.p2{
	font-family: fz, Arial, sans-serif;
	color: #332c2b;
	font-size: 0.4rem;
}
.bg-about .category-box ul li p.p3{
	color: #666565;
}
.bg-about .list-box ul li a.circle{
	width: 10%;
	margin-right: 2%;
	padding: 0.05rem 0;
	text-align: center;
	background: #bcada5;
	color: #fff;
	font-size: 0.32rem;
}
.bg-about .list-box ul li a.arrow{
	width: 10%;
	height: 1rem;
	background: url(../images/icon_play.png) center no-repeat;
	background-size: 70%;
}


.bg-page{
	position: relative;
	background: url(../images/bg-about.png) center no-repeat;
	background-size: cover;
}
.bg-page .header{
	position: relative;
}
.bg-page .header .back{
	width: 1rem;
	height: 1rem;
	color: #fff;
	text-align: left;
	background: url(../images/icon_left_bg.png) center no-repeat;
	background-size: 60%;
}
.bg-page .header .back a{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.bg-page .banner{
	position:relative;
	top: 0; 
	left: 0;
	width: 100%;
	text-align: center;
}
.bg-page .banner img{
	max-width: 100%;
	margin: 0 auto 0.5rem;
}
.bg-page h1{
	text-align: center;
	font-size: 0.4rem;
	color: #332c2b;
	font-weight: 400;
}
.bg-about .content-box p{
	text-align:justify;
}