html,body{
	min-width: 1200px;
	max-width: 1920px;
	min-height: 967px;
	margin: 0 auto;
}
body{
	background: url(http://qiniu.hixiaoluwenwen.com/PC/images/bg.png) no-repeat;
	background-size: 100% ;
	background-position:0 60px;
	background-color: #D5EDF1;
}

/*banner*/
.banner{
	margin-top: 60px;
	width: 1920px;
	margin-bottom: 15px;
}
.banner img{
	width: 100%;
}
/*btn-box*/
.btn-box{
	width: 50%;
	margin: 0 auto 10px;
	display: flex;
	justify-content: space-between;
}
.btn-box>div{
	width: 30%;
	position: relative;
	overflow: hidden;
}
.btn-box>div::after{
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	background: linear-gradient(to bottom, rgba(229,172,142,0),rgba(255,255,255,0.5)50%,rgba(229,172,142,0));
	transform: rotateZ(60deg) translate(-5em ,29em);
}
.btn-box>div:hover::after,.btn-box>div:focus::after{
	animation: sheen 2s forwards;
}
@keyframes  sheen{
	100%{
		transform: rotateZ(60deg) translate(1em ,-29em);
	}
}
.btn-box>div>a{
	display: inline-block;
	width: 100%;
}
.btn-box>div>a>img{
	width: 100%;
}
/*cloud*/
.cloud{
	width: 32%;
	margin: 0 auto;
	background: url(http://qiniu.hixiaoluwenwen.com/PC/images/class.png) no-repeat;
	background-size: 100%;
	padding:180px 10% 245px 18%;
	min-height: 40%;
}
.class-list{
	width: 100%;
	
}
.class-list .class{
	display: flex;
	justify-content: space-between;
}
.class-list .lt{
	width: 25%;
	background: url(http://qiniu.hixiaoluwenwen.com/PC/images/class-bg.png) no-repeat;
	background-size: 100% 100%;
	height: 20%;
}
.class-list .lt img{
	width: 80%;
	margin: 20px auto 30px;
	display: block;
}
.class-list .rt{
	width: 70%;
}
.class-list .rt h6{
	color: #FC0000;
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 20px;
}
.class-list p{
	margin: 10px 0;
	color: #000000;
	font-size: 14px;
	line-height: 20px;
	max-height: 38px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	
}
.class-list p span{
	color: #666666;
}
/*introduct*/
.introduct{
	width: 51%;
	margin: 0 auto;
	margin-top: -100px;
	margin-bottom: 150px;
}
.introduct .tit{
	padding:  15% 25px 15px;
	background: url(http://qiniu.hixiaoluwenwen.com/PC/images/introduce.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 30px;
	overflow: hidden;
	background-color: transparent;
	border-bottom: 15px #0092CA solid;
	position: relative;
}
.introduct .tit::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.1rem;
	box-shadow: 0 10px 10px  rgba(26,122,138,0.3);
}
.introduct .tit img{
	width: 100%;
}
.introduct .trait{
	padding: 30px 60px;
	background: #FFFFFF;
	border-radius: 15px 15px 30px 30px;
	border-bottom: 15px #00A5FF solid;
	margin-top: 20px;
}
.introduct .trait h5 span{
	padding: 5px 30px;
	display: inline-block;
	color: #FFFFFF;
	background: #05CDFF;
	font-size: 22px;
	border-radius: 25px;
	font-weight: 400;
	margin-bottom: 20px;
}
.introduct .trait .container{
	color: #666666;
	font-size: 14px;
	line-height: 25px;
}
.introduct .trait .container p{
	text-align: left;
}
.introduct .trait .key-word{
	font-size: 14px;
	width: 100%;
	display: flex;
	justify-content: space-around;
}
.introduct .trait .key-word div{
	padding: 30px;
	background: #FFC806;
	color: #FFFFFF;
	font-size: 18px;
	border-radius: 13px;
	margin-top: 10px;
}
.introduct .trait .key-word div:nth-of-type(2){
	background: #68D0FB;
}
.introduct .trait .key-word div:nth-of-type(3){
	background: #6884FB;
}
.introduct .trait .key-word div:nth-of-type(4){
	background: #D768FB;
}
.introduct .trait .key-word div:nth-of-type(5){
	background: #FB6880;
}
.trait p{
	text-align: center;
	line-height: 20px;
	color: #666666;
	font-size: 14px;
}
.trait .title{
	font-size: 18px;
	color: #5E5D5D;
}
.trait .dtl{
	width: 67%;
	margin: 20px auto 20px;
}
.trait .imgList{
	display: flex;
	justify-content: space-between;
}
.trait1 .imgList div,.trait2 .imgList div{
	width: 24.5%;
}
.trait1 .imgList div img,.trait2 .imgList div img{
	width: 100%;
}
.trait3 .imgList div {
	width: 32.5%;
}
.trait3 .imgList div img{
	width: 100%;
}
.trait2,.trait3, .trait4{
	margin-top: 30px;
}
.trait4 .imgList img {
	width: 100%;
}
/*qrcode*/
.qrcode{
	width: 100px;
	height: 100px;
	position: absolute;
	top: -30%;
	right: -10%;
	background: palegoldenrod;
	z-index: 1000;
}
.lock{
	position: relative;
}
.lock .tl,.lock .tr,.lock .bl,.lock .br{
	position: absolute;
}
.lock .tl,.lock .tr{
	top: -20%;
	
}
.lock .tr,.lock .br{
	right: 3%;
}
.lock .bl,.lock .br{
	bottom: -18%;
}
.lock .tl, .lock .bl{
	left: 3%;
}
.introduct .trait{
	box-shadow: 1px 10px 50px rgba(26,122,138,0.3);
}