.banner { position: relative; width: 100%; height: auto;  }

.banner img { width: 100%; height: auto; }

.banner div { width: 50%; height: auto; }

.banner div h1, .banner div h2, .banner div a { position: absolute; display: inline-block; color: #ffffff; }

.banner div h2 {right: 50%;top: 54%;margin-right: -1%;font-size: 30px;}

.banner div h1 {font-size: 60px;bottom: 50%;right: 50%;margin-right: 19%;}

.banner div .haone { font-size: 30px; font-family: "SimHei"; bottom: 50%; margin-bottom: 21px; width: 50%; font-weight: normal; text-align: initial; margin-left: 19%; }

.banner div .hatwo { font-size: 16px; font-family: "SimHei"; bottom: 50%; margin-bottom: -30px; width: 23%; font-weight: normal; text-align: -webkit-auto; }

.banner div a { bottom: 44%; background: #ff8400; font-size: 24px; width: 180px; text-align: center; line-height: 48px; height: 48px; margin-bottom: -123px; text-decoration: none; left: 19%; }

.con { background-color: #fafafa; height: 640px; width: 100%; }

.flixcon { width: 1226px; margin: 0 auto; display: flex; height: 384px; justify-content: space-between; margin-top: 78px; }

.con p:nth-child(1) { font-size: 40px; color: #333333; text-align: center; padding-top: 80px; font-weight: 700; }

.con p:nth-child(2) { color: #666666; font-size: 18px; text-align: center; margin-top: 4px; }

.con .flixcon ul { width: 360px; height: 307px; border: 1px solid #e5e5e5; text-align: center; background-color: #ffffff; }

.con .flixcon ul li:nth-child(1) { margin-top: 20%; }

.con .flixcon ul li:nth-child(2) { font-size: 20px; color: #333333; bottom: -15%; position: relative; }

.con .flixcon ul li:nth-child(3) { font-size: 14px; color: #888888; position: relative; bottom: -17%; }

.aboutbox { height: 1400px; width: 100%; }

.aboutbox .about { width: 100%; height: 600px; }

.aboutbox .about .aboutp { font-size: 40px; color: #333333; text-align: center; padding-top: 80px; font-weight: 700; }

.aboutleft { width: 50%; float: left; margin-top: 2%; }

.aboutleft p:nth-child(1) { font-size: 24px; color: #ff8400; font-weight: 700; text-align: -webkit-center; margin-top: 136px; }

.aboutleft p:nth-child(2) { font-size: 16px; color: #888888; text-align: -webkit-left; width: 50%; float: right; margin-right: 13%; margin-top: 2%; }

.aboutright { width: 50%; float: right; margin-top: 2%; }

.aboutbox .aboutright img { margin: 20px 20px 20px 186px; }

.aboutbox .abouttwo { height: 400px; width: 100%; }

.twoleft { float: right; }

.aboutbox  .twotight img { margin: 20px 20px 20px 328px; }

.aboutbox .twoleft p:nth-child(1) { text-align: -webkit-match-parent; margin-left: 20%; }

.aboutbox .twoleft p:nth-child(2) { float: left; text-align: inherit; margin-left: 20%; }

.opn { width: 100%; height: 590px; background-color: #fafafa; }

.opn p { font-size: 40px; color: #333333; text-align: center; padding-top: 80px; font-weight: 700; }

.opn .flixcontwo { width: 1226px; margin: 0 auto; display: flex; height: 384px; justify-content: space-between; margin-top: 60px; }

.opn .flixcontwo ul { width: 360px; height: 307px; text-align: center; }

.opn .flixcontwo ul li:nth-child(1) { margin-top: 20%; }

.opn .flixcontwo ul li:nth-child(2) { font-size: 24px; color: #333333; bottom: -9%; position: relative; }

.opn .flixcontwo ul li:nth-child(3) { font-size: 16px; color: #666666; position: relative; bottom: -11%; width: 58%; margin: 0 auto; }

.moto { width: 100%; height: auto; position: relative; overflow: hidden; }

.moto img { height: 100%; width: auto; display: inline-block; }

.moto p { position: absolute; margin-bottom: 20px; display: inline-block; width: 100%; text-align: center; bottom: 50%; color: #ffffff; font-size: 26.53px; }

.moto a { position: absolute; width: 100%; text-align: center; bottom: 32%; }

.moto button { width: 180px; margin-bottom: -20px; height: 48px; border: none; font-size: 20px; color: #ffffff; background-color: #40a4fc; border-radius: 6px; }

html { font-size: 100%; }

@media screen and (min-width:1600px) and (max-width:1920px) {

	html { font-size: 90%; }

}

@media screen and (max-width:1900px) {

	html { font-size: 90%; }

	.banner div h1 { margin-left: -43%; }

}

@media screen and (min-width: 1600px;

) { .banner div h1 { margin-left: -43%; }

}

@media screen and (min-width:1440px) and (max-width:1599px) {

	html { font-size: 79.1%; }

	.banner div h1 { font-size: 55px; width: 82%; margin-left: -26%; }

	.aboutleft p:nth-child(2) { margin-right: 17%; }

	.aboutbox  .twotight img { margin: 20px 20px 20px 207px; }

	.aboutbox .aboutright img { margin: 20px 20px 20px 136px; }

	.banner div .haone { margin-left: 18%; }

	.banner div a { margin-left: -10px; }

}

@media screen and (min-width:1360px) and (max-width:1439px) {

	html { font-size: 72.8%; }

	.banner div h1 { font-size: 52px; width: 82%; margin-left: -26%; }

	.aboutleft p:nth-child(2) { margin-right: 18%; }

	.aboutbox  .twotight img { margin: 20px 20px 20px 207px; }

	.aboutbox .aboutright img { margin: 20px 20px 20px 120px; }

	.banner div .haone { margin-left: 18%; }

	.banner div a { margin-left: -5px; }

}

@media screen and (min-width:1200px) and (max-width:1359px) {

	html { font-size: 66.6%; }

	.banner div h1 { font-size: 50px; width: 82%; margin-left: -22%; }

	.aboutleft p:nth-child(2) { margin-right: 21%; }

	.aboutbox  .twotight img { margin: 20px 20px 20px 207px; }

	.aboutbox .aboutright img { margin: 20px 20px 20px 120px; }

	.flixcon { width: 100%; justify-content: space-around; }

	.opn .flixcontwo { width: 100%; justify-content: space-around; }

	.banner div .haone { margin-left: 18%; }

	.banner div a { left: 18%; margin-bottom: -97px; }

	.moto button { margin-bottom: -30px; }

	.moto p { margin-bottom: 10px; }

	.con .flixcon ul {width:300px; height:300px;}

}

@media screen and (min-width:1080px) and (max-width:1199px) {

	html { font-size: 59.3%; }

	.banner div h1 { font-size: 48px; width: 82%; }

	.aboutleft p:nth-child(2) { margin-right: 23%; }

	.aboutbox .twotight img { margin: 20px 20px 20px 207px; }

	.aboutbox .aboutright img { margin: 20px 20px 20px 106px; }

	.flixcon { width: 100%; justify-content: space-around; }

	.opn .flixcontwo { width: 100%; justify-content: space-around; }

	.banner div h1 { margin-bottom: 45px; margin-left: -19%; }

	.banner div .haone { margin-bottom: -7px; margin-left: 188px; }

	.banner div a { margin-bottom: -95px; margin-left: -8px; }

}

@media screen and (min-width:960px) and (max-width:1079px) {

	html { font-size: 53%; }

	.banner div h1 { font-size: 42px; width: 82%; }

	.aboutleft p:nth-child(2) { margin-right: 26%; }

	.banner div h1 { margin-bottom: 50px; margin-left: -20%; }

	.banner div .haone { margin-bottom: -6px; margin-left: 166px; }

	.banner div a { margin-bottom: -7%; margin-left: -1%; }

	.aboutbox  .twotight img { margin: 20px 20px 20px 207px; }

	.aboutbox .aboutright img { margin: 20px 20px 20px 46px; }

	.flixcon { width: 100%; justify-content: space-around; }

	.opn .flixcontwo { width: 100%; justify-content: space-around; }

	.moto p { font-size: 22px; margin-bottom: 3px; }

	.moto button { width: 150px; margin-bottom: -33px; height: 40px; font-size: 18px; }

}

@media screen and  (max-width:960px) {

	html { font-size: 50%; }

}