html{
		height: 100%;
	}
	body{
		height: 100%;
		overflow: hidden;
	}
	main{
		height: 100%;
		margin-top: 80px;
		background-color: #fdfdfd;
		overflow: scroll;
	}
	main .box{
		margin: 0;
		display: flex;
		flex-flow: column;
		/*overflow: scroll;*/
		/*height: calc(100vh - 80px);*/
	}
	footer{
	/*//	display: none;*/
	}
	main .box .search{

		margin: 30px 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fafafa;
		border-radius: 25px;
		font-size: 22px;
		padding: 19px 28px;
		color: #67605f;
	}
	main .box .search span{
		width: 88%;
	}

	main .box .classify{
		display: flex;
		flex-wrap: wrap;
		
		text-align: center;

		border-bottom: solid 1px #fafafa;
	}
	main .box .classify span{
		flex:0 0 20%;
		color: #67605f;
		font-size: 25px;
		padding: 10px 0px;
		margin: 5px 0px;
		width: 10%;
		display: block;
		letter-spacing:4px
	}

	main .box .classify .active{
		
	}
	main .box .classify .active strong{
		color: #fff;
		background-color: #e52e31;
		border-radius: 30px;
		padding: 11px 14px;

	}
	main .box .classify span strong:hover{
		color: #fff;
		background-color: #e52e31;
		border-radius: 30px;
		padding: 11px 14px
	}
	main .box .btn{
		display: block;
		justify-content: center;
		padding: 16px 26px 14px 28px;
		font-size: 22px;
		border: solid 1px #c1c1c1;
		border-radius: 30px;
		margin: 20px auto;
		color: #848484;
	}

	main .box .list{
		padding-top:10px ;
		background-color: #fafafa;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	
	}
	main .box .list .item{
		background-color: #fff;
		flex:0 0 50%;
		display: flex;
		flex-flow: column;
		border-bottom: solid 1px #fafafa;
	}
	main .box .list .item .img{
		height:408px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	main .box .list .item .img img{
		height:80%;
	}
	main .box .list .item span{
		padding: 30px;
		font-size: 27px;
		color: #848484;
		letter-spacing: 2px;
	}

	main .box .page{
		padding: 40px 20px;
		background-color: #fafafa;
		display: flex;
		justify-content: space-around;
	}
	main .box .page a{
		display: block;
		text-decoration: none;
		background-color: #fff;
		width: 33%;
		line-height: 78px;
		text-align: center;
		font-size: 24px;
		color: #bcbaba;
		letter-spacing: 2px;
	}
	main .box .page .active{
		color: #e52e31;
	}

	main .box2{
		position: relative;
		height: 100%;
		overflow-y: scroll;
	}
	main .box2 .search{
		padding: 12px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fdfdfd;
	}
	main .box2 .search span{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	
		background-color: #f8f8f8;
		line-height: 60px;
		border-radius: 25px;
		letter-spacing: 2px;
		width: 90%;
	}
	main .box2 .search span img{
		margin-left: 25px;
	}
	main .box2 .search span input{
		display: block;
		border:none;
		background-color: #f8f8f8;
		font-size: 23px;
		color: #6c6666;
		outline: none;
		width: 80%;
		margin-left: 20px;
		line-height: 60px;
	}
	main .box2 .search button{
		font-size: 30px;
		color: #666;
		letter-spacing: 2px;
		border: none;
		background-color:#fdfdfd; 

	}

	main .box2 .content{
		
		background-color: #fafafa;
		padding: 20px;

		/*display: flex;*/
		flex-direction: column;
		overflow: scroll;
		height: calc(100vh - 167px);
	}
	main .box2 .content h3{
		color: #6c6666;
		font-size: 30px;
		letter-spacing: 1px;
		margin: 18px 0;
	}
	main .box2 .content .item{
		display: flex;
		flex-direction: column;
		margin: 1px;
	}
	main .box2 .content .item p{
		color: #6c6666;
		font-size: 22px;
		letter-spacing: 1px;
		margin: 20px 0;
	}
	main .box2 .content .item .list{
		/*display: flex;*/
		/*flex-wrap: wrap;*/
	}
	main .box2 .content .item .list .li{
		/*flex:0 0 50%;*/
		height: 90px;
		/*align-items: center;*/
		width: 50%;
		float: left;

	}
	main .box2 .content .item .list .li div {
		display: block;
		background-color: #fff;
		margin: 11px 6px;
		padding: 0 ;
		display: flex;
		align-items: center;
		/*justify-content: center;*/
		/*flex-wrap: wrap;*/
	}
	main .box2 .content .item .list .li div span{
		display: inline-block;
		/*flex:0 0 45%;*/
		color: #666;
		font-size: 22px;
		letter-spacing: 2px;
		margin-left: 10px;
	}
	main .box2 .content .item .list .li div .ico{
		padding:5px 15px;
		/*height: 90px;*/
	}
	main .box2 .content .item .list .li div .ico img{
		width: 70px;
	}

	main .box2 .letter{
		position: absolute;
		display: flex;
		flex-flow: column;
		right: 15px;
		top: 80px;

	}
	main .box2 .letter span{
		text-decoration: none;
		color: #6c6666;
		font-size: 20px;
		line-height: 48px;
	}

	main .box3{
		position: fixed;
		top: 84px;
		width: 100%;
		height: 100%;
		background-color: rgba(123,123,123,0.5);

	}
	main .box3 .blank{
		width: 25%;
		display: block;
		height: 100%;
		margin: 0;
		float: left;
	}
	main .box3 .content{
		display: flex;
		flex-flow: column;

		float: right;
		width: 75%;
		height: 100%;
		background-color: #fafafa;
		
		justify-content: flex-start;

	}
	main .box3 .content .condition{
		display: flex;
		justify-content: flex-start;
		background-color: #fdfdfd;
		align-items: center;
		
	}
	main .box3 .content .condition .node{
		margin: 0 10px;
		display: flex;
		align-items: center;
	}
	main .box3 .content .condition .node img{
		height: 40px;
		margin: 0 20px;
	}
	main .box3 .content .condition span {
		line-height: 80px;
		color: #6c6666;
		font-size: 23px;
		letter-spacing: 2px;
		margin: 0 10px;
	}
	main .box3 .content .condition span img{
		margin:0 20px;
	}
	main .box3 .content .list .title{
		background-color: #fafafa;
		line-height: 80px;
		color: #6c6666;
		font-size: 23px;
		letter-spacing: 2px;
		text-indent: 1em;

	} 
	main .box3 .content .list {
		background-color: #fff;
		display: flex;
		flex-flow: column;
		overflow-y: scroll;
	} 

	main .box3 .content .list .item{
		text-indent: 1em;
		line-height: 80px;
		color: #6c6666;
		font-size: 23px;
		letter-spacing: 2px;
		border-bottom: solid 1px #fafafa;
	}