html{
	height: 100%;          /*必须设置这个来获取屏幕高度*/
}
body{
	background-image: url(./img/s.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	margin: 0 auto;
	height: 100%;               /*必须要设置这个为100%，即屏幕高度，否则水平居中不生效。必须和html的height配合使用。*/
	display: flex;              /*配合下面两个居中使用*/
	align-items: center;        /*垂直居中*/
	justify-content: center;     /*水平居中*/
}
a{
	text-decoration: none;
}
.mainbox{
	display: flex;
	width: 65em;          /*使用em可适应缩放*/
	height: 31em;
/*	text-align: center;*/
    border-radius: 5px;              /*设置圆角*/
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    overflow: hidden;
/*    opacity: 0.4;*/
}
.left{
	flex: 0 0 33%;
    max-width: 33%;
    background-image: url(https://p.ssl.qhimg.com/t01ebfdf44718beb679.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.right{
	flex: 0 0 67%;
    max-width: 67%;
    padding: 3em;
    background:rgba(255,255,255, 0.65);       /*设置透明度*/
}
.title{
	font-size: 2em;
	margin-bottom: .5em;
}
.contents{
	font-size: 1.2em;
	color: #595959;
	margin-bottom: 3em;
}
.copy{
	font-size: 0.8em;
	color: #595959;
}
.guan{
	font-size: 2em;
}
i{
    color:#1EAF97;
}
.follow{
	margin-bottom: .3em;
}
@media (max-width: 560px) {
  .left{
	display:none;}
	.right{
	flex: 0 0 100%;
    max-width: 100%;
    padding: .3em;}
    .title{
	margin-top: 1em;}
}
@media (min-width:560px) and (max-width: 760px){
  .left{
	display:none;}
	.right{
	flex: 0 0 100%;
    max-width: 100%;
    padding: 3em;}
}
@media (min-width: 760px) {
  .left{
	display: block;}
}