html{
	height: 100%;
}
body{
	background: #fff;font-size: 1em;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
}
.container{
	display: flex;flex-direction: row;align-items: center;justify-content: center;
}
p{margin: 0;}
h1,h2,h3,h4{margin: 0;}
ul{list-style: none;padding: 0;margin: 0;}

.main{width: 80%;min-width: 15em;max-width: 40em;}
.top{display: flex;flex-direction: column;align-items: center;margin-top: 5em;}
.top img{width: 8em;height: 8em;}
.top h1{color:#d04b2d;font-size: 2em;margin-top: 0.3em;margin-bottom: 0.8em;}
.top h1 span{font-size: 1.4em;}
.tip{font-size: 1em;color: #333;text-align: center;}

.list{margin-top: 1em;margin-bottom: 5em;}
.cell{display: flex;flex-direction: column;align-items: center;margin-top: 2em;}
.cell h4{font-size: 1.1em;font-weight: 400;margin-bottom: 0.4em;}

.sub-list{display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;;}
.sub-cell{font-size: 1em;color:#d04b2d;border: 1px solid #d04b2d;border-radius: 0.2em;padding: 0.4em 0.6em;margin: 0.5em;cursor: pointer;}

.detail{position: absolute;width: 100%;height:100%;min-height: 39em;background: #fff;top: 0;left: 0;display: flex;;flex-direction: row;align-items: center;justify-content: center;}
.center-container{display: flex;flex-direction: column;align-items: center;}
.detail .d-title{font-size: 1.8em;}
.detail .center{margin: 3em 0;text-align: center;font-size: 1em;color: #333;}
.detail .center p{font-size: 1.0em;}
.detail .center img{width: 15em;height: 17em;margin-top: 1em;}
.closebtn{font-size: 1em;color:#d04b2d;border: 1px solid #d04b2d;border-radius: 0.2em;padding: 0.4em 0.4em;margin: 0.5em;cursor: pointer;width: 6em;text-align: center;}