.header {
	height: 50px;
	background: rgba(0, 0, 0, 0.8);
	line-height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	z-index:1;
}

.header .logo {
	vertical-align: text-bottom;
}

.header .search {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: 184px;
}

.header .public-container {
	text-align: left;
	padding-left: 184px;
}

.header .link-content {
	position: absolute;
	/* left: 180px; */
	display: flex;
	display: -webkit-flex;
	top: 0;
	bottom: 0;
	height: 20px;
	margin: auto 0;
	left: 360px;
}

.header a {
	display: inline-block;
	color: #FFF;
	font-size: 18px;
	line-height: 18px;
	padding: 0 10px;
	border-right: 2px solid #FFF;
}

.header a:hover {
	color: #e4261c;
}

.pannel,
.banner {
	background-position: center top;
	background-repeat: no-repeat;
}

.banner {
	background-image: url(../img/bg1.jpg);
	height: 800px;
}

.pannel2 {
	background-image: url(../img/bg2.jpg);
	height: 640px;
}

.pannel3 {
	background-image: url(../img/bg3.jpg);
	height: 2716px;
}

.pannel4 {
	background-image: url(../img/bg4.jpg);
	height: 973px;
}

.banner .public-container img {
	position: absolute;
}

.banner .public-container img.title-bg {
	top: 85px;
	left: 46px;
}

.banner .public-container .title-clcle {
	width: 564px;
	height: 564px;
	position: absolute;
	left: 0;
	right: 0;
	top: 145px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #ffe401;
	border: 12px solid #000;
}

.banner .public-container .title-clcle .title-inside {
	width: 533px;
	height: 533px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #f6eeff;
	border: 12px solid #000;
	border-radius: 50%;
}

.banner .public-container .title-clcle .title-inside img.title-small {
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 8px;
}

.banner .public-container .title-clcle .title-inside img.vvmember {
	left: 32px;
	bottom: 2px;
}

.banner .public-container .title-clcle .title-inside img.crown {
	right: 82px;
	top: 138px;
}

.banner .public-container .title-clcle .title-inside .title-inside-right {
	position: absolute;
	width: 160px;
	height: 160px;
	background-color: #8f48d8;
	border-radius: 50%;
	border: 13px solid #000;
	right: -84px;
	top: 86px;
}

.banner .public-container .title-clcle .title-inside .title-inside-right img {
	left: 20px;
	bottom: 26px;
}

.pannel2 .public-container {
	padding-top: 110px;
}

.pannel2 .card-bg {
	width: 840px;
	height: 457px;
	background: url(../img/cardbg.png) center top no-repeat;
	margin: 0 auto;
	position: relative;
	transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	left: 64px;
}

.pannel2 .card-bg .card {
	position: absolute;
	width: 840px;
	height: 454px;
	background-color: #e7222b;
	right: 20px;
	bottom: 16px;
	border-radius: 25px;
	border: 6px solid #000;
	padding-top: 136px;
}

.pannel2 .card-bg .card img {
	position: absolute;
}

.pannel2 .card-bg .card .crown2 {
	left: -114px;
	top: -120px;
}

.pannel2 .card-bg .card .line {
	top: 20px;
	right: 20px;
}

.pannel2 .card-bg .card .card-title {
	left: 70px;
	top: 40px;
}

.pannel2 .card-bg .card .card-img2 {
	position: relative;
}

.pannel2 .card-bg .card h1 {
	font-size: 22px;
	line-height: 22px;
	color: #FFF;
	font-weight: normal;
	margin-top: 14px;
}

.pannel2 .card-bg .card .card-left {
	width: 437px;
	height: 182px;
	margin-top: 10px;
	margin-left: 80px;
	position: relative;
	background: url(../img/cardleft.png) center top no-repeat;
}

.pannel2 .card-bg .card .card-left-title {
	width: 379px;
	height: 46px;
	line-height: 46px;
	font-size: 20px;
	color: #db000a;
	margin-top: 0px;
	margin-left: 44px;
	background: url(../img/cardltitle.png) center top no-repeat;
}

.pannel2 .card-bg .card .card-left span {
	display: block;
}

.pannel2 .card-bg .card .card-left .price {
	display: block;
	position: absolute;
	width: 155px;
	height: 58px;
	top: 58px;
	text-align: left;
	font-size: 42px;
	left: 0px;
	background: url(../img/cardi.png) center top no-repeat;
	color: #FFF;
	padding-left: 16px;
	font-weight: bold;
}

.pannel2 .card-bg .card .card-left .price i {
	position: absolute;
	display: block;
}

.pannel2 .card-bg .card .card-left .price i:nth-last-child(2) {
	font-weight: normal;
	width: 33px;
	height: 33px;
	background-color: #ffe401;
	text-align: center;
	line-height: 33px;
	font-size: 22px;
	color: #e7222b;
	border-radius: 50%;
	bottom: 5px;
	left: 70px;
}

.pannel2 .card-bg .card .card-left .price i:nth-last-child(1) {
	width: 12px;
	height: 12px;
	background-color: #FFF;
	border-radius: 50px;
	border: 2px solid #000;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: 12px;
}

.pannel2 .card-bg .card .card-left .card-contnet2 {
	color: #e7222b;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	margin-top: 36px;
	margin-left: 80px;
}

.pannel2 .card-bg .card .card-left .card-contnet3 {
	color: #333;
	font-size: 18px;
	line-height: 18px;
	margin-top: 20px;
	font-weight: bold;
	margin-left: 20px;
}

.pannel2 .card-bg .card .join {
	position: absolute;
	display: block;
	font-size: 36px;
	color: #e02b08;
	font-weight: bold;
	background-color: #ffe401;
	width: 294px;
	height: 90px;
	line-height: 82px;
	border-radius: 24px;
	border: 4px solid #000;
	right: -50px;
	bottom: 40px;
	box-shadow: 4px 10px 0px #000;
}

.pannel2 .card-bg .card .join i {
	position: absolute;
	display: block;
	background-color: #FFF;
}

.pannel2 .card-bg .card .join i:nth-child(1) {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	left: 12px;
	top: 6px;
}

.pannel2 .card-bg .card .join i:nth-child(2) {
	top: 6px;
	border-radius: 4px 4px 4px 4px;
	height: 8px;
	width: 60px;
	left: 30px;
}

.pannel2 .card-bg .card .join i:nth-last-child(1) {
	position: sticky;
	display: inline-block;
	width: 24px;
	height: 26px;
	background: transparent;
	border-left: 24px solid #e7222b;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	margin-left: 14px;
}

.pannel3 .public-container .title-vice {
	color: #FFF;
	font-size: 30px;
	line-height: 30px;
	transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	margin-top: 24px;
	letter-spacing: 2px;
}

.pannel3 .pannel3-content {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 1000px;
	margin: 0 auto;
	padding-top: 160px;
	padding-left: 34px;
	padding-right: 44px;
	height: 840px;
	justify-content: flex-start;
	align-content: space-between;
}

.pannel3 .pannel3-content .pannel3-part {
	position: relative;
	background-position: center top;
	background-repeat: no-repeat;
	margin-bottom: 55px;
	cursor: pointer;
}

.pannel3 .pannel3-content .pannel3-part .crown {
	position: absolute;
}

.pannel3 .pannel3-content .pannel3-part:nth-child(1) .crown,
.pannel3 .pannel3-content .pannel3-part:nth-child(2) .crown,
.pannel3 .pannel3-content .pannel3-part:nth-child(3) .crown {
	width: 147px;
	height: 136px;
	background: url(../img/crown3.png) center top no-repeat;
	left: -34px;
	top: -62px;
	text-align: left;
	padding: 54px 0 0 52px;
}

.pannel3 .pannel3-content .pannel3-part:nth-child(4),
.pannel3 .pannel3-content .pannel3-part:nth-child(5),
.pannel3 .pannel3-content .pannel3-part:nth-child(6) {
	bottom: 56px;
}

.pannel3 .pannel3-content .pannel3-part:nth-child(4) span,
.pannel3 .pannel3-content .pannel3-part:nth-child(5) span,
.pannel3 .pannel3-content .pannel3-part:nth-child(6) span {
	padding-left: 46px;
}

.pannel3 .pannel3-content .pannel3-part:nth-child(4) .crown,
.pannel3 .pannel3-content .pannel3-part:nth-child(5) .crown,
.pannel3 .pannel3-content .pannel3-part:nth-child(6) .crown {
	width: 153px;
	height: 141px;
	background: url(../img/crown4.png) center top no-repeat;
	right: -34px;
	top: -64px;
	text-align: left;
	padding: 54px 0 0 72px;
}

.pannel3 .pannel3-content .pannel3-part h1 {
	font-size: 26px;
	color: #FFF;
	font-weight: normal;
	line-height: 52px;
}

.pannel3 .pannel3-content .pannel3-part span {
	text-align: left;
	font-size: 20px;
	height: 96px;
	color: #333;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	padding-left: 30px;
}

.pannel3 .pannel3-content .pannel3-part:nth-child(1) {
	width: 449px;
	height: 166px;
	background-image: url(../img/flex1.png);
}

.pannel3 .pannel3-content .pannel3-part:nth-child(2) {
	width: 449px;
	height: 164px;
	background-image: url(../img/flex2.png);
}

.pannel3 .pannel3-content .pannel3-part:nth-child(3) {
	width: 449px;
	height: 164px;
	background-image: url(../img/flex3.png);
}

.pannel3 .pannel3-content .pannel3-part:nth-child(4) {
	width: 451px;
	height: 169px;
	background-image: url(../img/flex4.png);
}

.pannel3 .pannel3-content .pannel3-part:nth-child(5) {
	width: 450px;
	height: 166px;
	background-image: url(../img/flex5.png);
}

.pannel3 .pannel3-content .pannel3-part:nth-child(6) {
	width: 448px;
	height: 166px;
	background-image: url(../img/flex6.png);
}

.pannel3 .change {
	width: 1321px;
	height: 418px;
	background: url(../img/title4bg.png) center top no-repeat;
	position: relative;
	z-index: 1;
	bottom: 32px;
	right: 24px;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	padding-left: 206px;
	padding-right: 125px;
	justify-content: space-between;
	align-content: space-between;
	padding-top: 126px;
	/* padding-bottom: 110px; */
}

.pannel3 .change a:nth-child(1) {}

.pannel3 .change a:nth-child(2) {
	bottom: 46px;
}

.pannel3 .change a:nth-child(3) {
	bottom: 94px;
}

.pannel3 .change a:nth-child(4) {
	bottom: 52px;
}

.pannel3 .change a:nth-child(5) {
	bottom: 98px;
}

.pannel3 .change a:nth-child(6) {
	bottom: 146px;
}

.pannel3 .change a {
	display: block;
	position: relative;
	width: 309px;
	height: 138px;
	background: url(../img/changed.png) center top no-repeat;
}

.pannel3 .change a i {
	display: inline-block;
	color: #666;
	font-size: 35px;
	transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	font-weight: bold;
	position: relative;
	top: 40px;
}

.pannel3 .change a img {
	display: none;
}

.pannel3 .change a.changed {
	width: 314px;
	height: 137px;
	line-height: 137px;
	background: url(../img/change.png) center top no-repeat;
}

.pannel3 .change a.changed i {
	display: none;
}

.pannel3 .change a.changed img {
	display: inline-block;
	position: relative;
	top: 24px;
}

.pannel3 .change-part {
	display: none;
	width: 1001px;
	height: 1448px;
	position: relative;
	margin: -240px auto 0;
	z-index: 0;
	padding-top: 20px;
	background: url(../img/changepart.png) center top no-repeat;
}

.pannel3 .change-part .change-part-title {
	color: #e7222b;
	font-size: 30px;
	width: 1154px;
	height: 254px;
	background: url(../img/change2title.png);
	position: relative;
	right: 96px;
	padding-top: 110px;
}

.pannel3 .change-part .change-part-title i {
	display: block;
	transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	letter-spacing: 2px;
}

.pannel3 .change-one {
	padding-top: 21px;
}

.pannel3 .change-one .change-part-title {
	color: #FFF;
	right: 96px;
	padding-top: 110px;
	background: url(../img/change1title.png);
}

.pannel3 .change-one .change-part-title i {
	/* display: block; */
}

.pannel3 .change-one .partone-change {
    position: absolute;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    top: 270px;
}

.pannel3 .change-one .partone-change a {
    width: 75px;
    height: 259px;
    line-height: 259px;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 0 4px 13px 16px;
    background-image: url(../img/slbg.png);
    position: relative;
    margin-bottom: 20px;
}

.pannel3 .change-one .partone-change a.clicked {
	background-image: url(../img/slclicked.png);
}

.pannel3 .change-one .partone-change a:nth-child(1) {
	height: 266px;
	line-height: 266px;
	background-image: url(../img/xcbg.png);
}

.pannel3 .change-one .partone-change a:nth-child(1).clicked {
	background-image: url(../img/xcclicked.png);
}

.pannel3 .change-one .partone-change a i {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 16px;
	right: 4px;
	top: 0;
	bottom: 13px;
	line-height: 36px;
	color: #333;
	font-size: 30px;
}

.pannel3 .change-one .partone-change a img {
	display: none;
}

.pannel3 .change-one .partone-change a.clicked img {
	display: inline-block;
	vertical-align: middle;
}

.pannel3 .change-one .partone-change a.clicked i {
	display: none;
}

.pannel3 .change-one .partone-change a:nth-child(1) i.mouse {
	position: absolute;
	display: block;
	width: 24px;
	height: 24px;
	background: #FFF;
	border-radius: 50%;
	border: 4px solid #1c1b1e;
	left: auto;
	top: auto;
	bottom: 22px;
	right: 20px;
	padding-top: 9px;
	padding-left: 9px;
}

.pannel3 .change-one .partone-change a:nth-child(1) i.mouse img {
	display: block;
}

.pannel3 .change-part .change-part-title2 {
	transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-webkit-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
	font-size: 18px;
	color: #333;
	font-weight: bold;
	position: relative;
	bottom: 60px;
	text-align: left;
	padding-left: 160px;
}

.pannel3 .change-one-part {
	width: 865px;
	margin-left: 102px;
	margin-top: 100px;
	display: none;
}

.pannel3 .change-one-part .tv {
	width: 791px;
	height: 384px;
	border-radius: 10px;
	background: #8f48d8;
	border: 4px solid #000;
	margin-left: 39px;
	margin-bottom: 50px;
	position: relative;
	z-index: 0;
	padding-top: 13px;
	padding-left: 25px;
	box-shadow: 15px 14px 0px #000;
}

.pannel3 .change-one-part .tv .tv-title {
	position: absolute;
	width: 327px;
	height: 104px;
	text-align: center;
	background: url(../img/tvtitle.png) center top no-repeat;
	left: 0;
	right: 0;
	top: -104px;
	margin: 0 auto;
	color: #FFF;
	font-size: 24px;
	padding-top: 68px;
}

.pannel3 .change-one-part .tv .video-content {
	width: 425px;
}

.pannel3 .change-one-part .video-content .video-title {
	width: 258px;
	height: 42px;
	background: #ffe401;
	border-radius: 4px;
	border: 4px solid #000;
	position: relative;
	margin: 0 auto 7px;
	color: #e7222b;
	font-size: 20px;
	line-height: 34px;
}

.pannel3 .change-one-part .video-content .video-title img {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -13px;
}

.pannel3 .change-one-part .video-content .video-title i {
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
}

.pannel3 .change-one-part .video-content .video-title i:nth-child(1) {
	left: 8px;
	top: 4px;
}

.pannel3 .change-one-part .video-content .video-title i:nth-child(2) {
	right: 8px;
	top: 4px;
}

.pannel3 .change-one-part .video-content .video-title i:nth-child(3) {
	right: 8px;
	bottom: 4px;
}

.pannel3 .change-one-part .video-content .video-title i:nth-child(4) {
	left: 8px;
	bottom: 4px;
}

.pannel3 .change-one-part .video {
	position: relative;
	width: 100%;
	height: 294px;
	border: 5px solid #1c1b1e;
	border-radius: 5px;
}

.pannel3 .change-one-part .tv .tv-right {
	position: absolute;
	right: -4px;
	top: -4px;
	bottom: -4px;
	border-radius: 10px;
	width: 312px;
	border: 4px solid #000;
	padding-top: 43px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 {
	width: 272px;
	height: 306px;
	margin: 0 auto;
	background: url(../img/tvright.png) center top no-repeat;
	position: relative;
	padding-top: 164px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 {
	width: 258px;
	height: 42px;
	background: #ffe401;
	border-radius: 4px;
	border: 4px solid #000;
	position: absolute;
	margin: 0 auto;
	color: #e7222b;
	font-size: 20px;
	line-height: 34px;
	left: 0;
	right: 0;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 i {
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 i:nth-child(1) {
	left: 8px;
	top: 4px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 i:nth-child(2) {
	right: 8px;
	top: 4px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 i:nth-child(3) {
	right: 8px;
	bottom: 4px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1 i:nth-child(4) {
	left: 8px;
	bottom: 4px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1.tv-content2-title {
	top: -30px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 h1.tv-content2-title2 {
	width: auto;
	bottom: -4px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 .tv-content2-two {
	width: 191px;
	height: 125px;
	background: url(../img/cloud.png) center top no-repeat;
	position: absolute;
	top: 27px;
	right: -19px;
	font-size: 0;
	line-height: 125px;
	padding-left: 20px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 .tv-content2-two span {
	display: inline-block;
	text-align: left;
	font-size: 18px;
	color: #333;
	line-height: 22px;
	vertical-align: middle;
	transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	-o-transform: rotate(6deg);
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 .tv-content2-two img {
	position: absolute;
	left: -68px;
	bottom: 20px;
}

.pannel3 .change-one-part .tv .tv-right .tv-content2 .tv-content2-three {
	font-size: 18px;
	color: #FFF;
	line-height: 24px;
}

.pannel3 .change-one .part-one-writing {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.pannel3 .change-one .part-one-writing .part-one-inside {
	width: 270px;
	height: 223px;
	border: 4px solid #000;
	border-radius: 10px;
	margin-bottom: 22px;
	padding-top: 3px;
}

.pannel3 .change-one .part-one-writing .part-one-inside h1 {
	font-size: 18px;
	font-weight: normal;
	padding-left: 10px;
	text-align: left;
	line-height: 40px;
	color: #FFF;
}

.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(1),
.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(6) {
	background: #e7222b;
}

.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(2),
.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(5) {
	background: #ffe401;
}

.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(3),
.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(4) {
	background: #45aee6;
}

.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(2) h1,
.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(5) h1 {
	color: #333;
}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-title {
	width: 145px;
	height: 41px;
	position: relative;
	border: 4px solid #000;
	border-radius: 5px;
	background: #ffe401;
	line-height: 34px;
	color: #e7222b;
	font-weight: bold;
	left: -19px;
	padding: 0;
	text-align: center;
}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-title img {
	position: absolute;
	bottom: -23px;
	left: -3px;
}

.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(2) .part1-inside-title,
.pannel3 .change-one .part-one-writing .part-one-inside:nth-child(5) .part1-inside-title {
	color: #fff;
	background: #e7222b;
}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-title2 {}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-title3 {}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-title3 img {
	margin-right: 8px;
}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-writing {
	padding-right: 10px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	align-content: center;
}

.pannel3 .change-one .part-one-writing .part-one-inside .part1-inside-writing span {
	display: block;
	color: #333;
	font-size: 18px;
	background: #fff;
	height: 28px;
	border: 1px solid #130d11;
	line-height: 26px;
	text-align: center;
	border-radius: 4px;
	padding: 0 5px;
}

.pannel3 .change-one .part-one-writing .part-one-inside i {
	display: block;
	width: 42px;
	height: 42px;
	margin-left: 10px;
	background: #FFF;
	border-radius: 50%;
	border: 1px solid #000;
	line-height: 40px;
	text-align: center;
	margin-top: 8px;
}

.pannel3 .change-image {
	position: absolute;
}

.pannel3 .change-part .i11 {
	position: absolute;
	right: 201px;
	top: 97px;
}

.pannel3 .change-one .i11 {
	right: 169px;
	top: 199px;
}

.pannel3 .change-one .i12 {
	top: 123px;
	right: 0;
}

.pannel3 .change-part .serve {
	width: 801px;
	height: 385px;
	background: url(../img/serve1.png) center top no-repeat;
	margin-left: 92px;
	margin-top: -33px;
	padding-top: 24px;
	margin-bottom: 43px;
}

.pannel3 .change-part .serve-content {
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	margin-left: 16px;
	margin-top: 42px;
	margin-bottom: 28px;
}

.pannel3 .change-part .serve-content .serve-part {
	width: 159px;
	height: 159px;
	border-radius: 50%;
	background-color: #e7222b;
	border: 6px solid #000;
	margin-right: 48px;
	font-size: 0;
	line-height: 147px;
	text-align: center;
	position: relative;
	box-shadow: 10px 8px 0px #000;
}

.pannel3 .change-part .serve-content .serve-part span {
	display: inline-block;
	text-align: left;
	font-size: 18px;
	color: #FFF;
	line-height: 22px;
	vertical-align: middle;
}

.pannel3 .change-part .serve-content .serve-part i {
	position: absolute;
	background: url(../img/yellow.png) center top no-repeat;
	display: block;
	width: 52px;
	height: 57px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -19px;
}

.pannel3 .change-part .serve-content .serve-part i img {
	position: absolute;
	left: 11px;
	top: 5px;
}

.pannel3 .change-part .serve-content .serve-part .ellipse {
	position: absolute;
	top: 20px;
	right: 7px;
}

.pannel3 .change-part .change2-title2 {
	margin-right: 80px;
}

.pannel3 .change-two {}

.pannel3 .change-two .iphone {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	padding-left: 68px;
	padding-right: 80px;
}

.pannel3 .change-two .iphone .iphone-part {
	width: 268px;
	height: 495px;
	position: relative;
	background-position: center top;
	background-repeat: no-repeat;
	border: 4px solid #000;
	background-origin: border-box;
	border-radius: 19px;
	overflow: hidden;
	box-shadow: 6px 11px 0px #000;
}

.pannel3 .change-two .iphone .iphone-part:nth-child(1) {
	background-image: url(../img/phone1.png);
}

.pannel3 .change-two .iphone .iphone-part:nth-child(2) {
	background-image: url(../img/phone2.png);
}

.pannel3 .change-two .iphone .iphone-part:nth-child(3) {
	background-image: url(../img/phone3.png);
}

.pannel3 .change-two .iphone .iphone-part i {
	position: absolute;
	display: block;
}

.pannel3 .change-two .iphone .iphone-part i.iphone-top {
	width: 120px;
	height: 28px;
	background: #000;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 8px;
}

.pannel3 .change-two .iphone .iphone-part i.iphone-top i {
	background: #FFF;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.pannel3 .change-two .iphone .iphone-part i.iphone-top i:nth-child(1) {
	width: 56px;
	height: 6px;
	border-radius: 3px 3px 3px 3px;
	left: 22px;
}

.pannel3 .change-two .iphone .iphone-part i.iphone-top i:nth-child(2) {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	right: 25px;
}

.pannel3 .change-two .iphone .iphone-part i.iphone-bottom {
	width: 136px;
	height: 6px;
	background: #000;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 3px;
}

.pannel3 .change-three .serve {
	background-image: url(../img/serve2.png);
	height: 400px;
	padding-top: 47px;
}

.pannel3 .change-three .serve .change2-title1 {
	margin-left: 70px;
}

.pannel3 .change-three .serve-content {
	margin-top: 14px;
	margin-bottom: 49px;
}

.pannel3 .change-three .change2-title2 {
	margin-right: 50px;
}

.pannel3 .change-three .change-three-bottom {
	text-align: center;
	font-size: 18px;
	color: #333;
	margin-top: 56px;
	font-weight: bold;
}

.pannel3 .change-four .change-four-content {
	width: 828px;
	height: 570px;
	background: url(../img/change4content.png) center top no-repeat;
	position: relative;
	margin-left: 129px;
	margin-top: -142px;
	z-index: -1;
	padding-left: 38px;
	padding-top: 249px;
	text-align: left;
}

.pannel3 .change-four .change-four-content img {
	position: absolute;
}

.pannel3 .change-four .change-four-content i {
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #FFF;
	right: -21px;
}

.pannel3 .change-four .change4-writing {
	width: 274px;
	height: 90px;
	background: #000;
	position: relative;
	line-height: 90px;
	font-size: 0;
	text-align: center;
}

.pannel3 .change-four .change4-writing span {
	display: inline-block;
	color: #FFF;
	font-size: 22px;
	line-height: 26px;
	vertical-align: middle;
	text-align: left;
}

.pannel3 .change-four .change4-writing::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	width: 70px;
	height: 90px;
	top: 0;
	right: -70px;
	border-left: 70px solid #000;
	border-top: 45px solid transparent;
	border-bottom: 45px solid transparent;
}

.pannel3 .change-four .change-four-content .change4title {
	margin-top: 33px;
	margin-left: 156px;
	margin-bottom: 40px;
	display: block;
	position: static;
}

.pannel3 .change-four .change4-bottom {
	display: inline-block;
	font-size: 20px;
	color: #FFF;
	text-align: left;
	width: auto;
	border-bottom: 2px solid;
	margin-left: 123px;
	margin-bottom: 27px;
	position: relative;
}

.pannel3 .change-four .change4-bottom i {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	background: #ffe401;
	border: 2px solid #000;
	left: -52px;
}

.pannel3 .change-four .change4-bottom i img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.pannel3 .change-four .pencil {
	right: -35px;
	bottom: 143px;
}

.pannel3 .change-five .table {
	width: 748px;
	margin: 0 auto;
	position: relative;
}

.pannel3 .change-five .table .table-up {
	height: 161px;
	border: 6px solid #000;
	border-radius: 6px;
	background: #ffe401;
	position: relative;
}

.pannel3 .change-five .table .table-up .table-left {
	width: 377px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	position: relative;
	height: 100%;
	padding-top: 35px;
	padding-left: 48px;
	padding-right: 36px;
}

.pannel3 .change-five .table .table-up .table-left span {
	width: 100px;
	height: 32px;
	background: #000;
	position: relative;
	border-radius: 14px;
	font-size: 18px;
	color: #FFF;
	text-align: center;
	line-height: 32px;
}

.pannel3 .change-five .table .table-up .table-left span i {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 20px;
	color: #e7222b;
	line-height: 20px;
	bottom: -52px;
	font-weight: bold;
}

.pannel3 .change-five .table .table-up .table-left span i:nth-last-child(2) {
	width: 12px;
	height: 12px;
	background: #000;
	border-radius: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -18px;
}

.pannel3 .change-five .table .table-up .table-left span i:nth-last-child(3) {}

.pannel3 .change-five .table .table-up .table-left .right {
	position: absolute;
	right: 0;
	top: 70px;
}

.pannel3 .change-five .table .table-up .table-right {
	width: 346px;
	height: 210px;
	background: url(../img/tableright.png) center top no-repeat;
	position: absolute;
	right: -6px;
	bottom: -4px;
	line-height: 210px;
	font-size: 0;
}

.pannel3 .change-five .table .table-up .table-right .table-right1 {
	display: inline-block;
	font-size: 24px;
	color: #FFF;
	line-height: 60px;
	text-align: left;
	vertical-align: middle;
}

.pannel3 .change-five .table .table-up .table-right .table-right2 {
	width: 165px;
	height: 66px;
	line-height: 66px;
	font-size: 0;
	position: absolute;
	background: url(../img/left.png) center top no-repeat;
	right: 0;
	top: 50px;
}

.pannel3 .change-five .table .table-up .table-right .table-right2 span {
	display: inline-block;
	text-align: left;
	line-height: 24px;
	color: #e7222b;
	font-size: 33px;
	vertical-align: middle;
	font-weight: bold;
}

.pannel3 .change-five .table .table-up .table-right .table-right2 span i {
	font-size: 24px;
}

.pannel3 .change-five .table-bottom {
	width: 745px;
	border: 6px solid #000;
	border-radius: 0 0 10px 10px;
	margin: -6px auto 0;
}

.pannel3 .change-five .table-bottom table {
	border-collapse: collapse;
	width: 100%;
	background-color: #45aee6;
	font-size: 14px;
	color: #FFF;
}

.pannel3 .change-five .table-bottom table th {
	border: 2px solid #000;
	font-size: 24px;
	font-weight: normal;
	height: 72px;
}

.pannel3 .change-five .table-bottom table td {
	border: 2px solid #000;
	padding: 10px 0px;
}

.pannel3 .change-part table a {
	width: 110px;
	height: 47px;
	display: block;
	position: relative;
	background-color: #ffe401;
	border: 4px solid #000;
	border-radius: 16px;
	line-height: 39px;
	font-size: 20px;
	color: #e02b08;
	font-weight: bold;
	margin: 0 auto;
	box-shadow: 2px 6px 0 #000;
}

.pannel3 .change-part table a:nth-child(1) {
	margin-bottom: 16px;
}

.pannel3 .change-part table a i {
	display: inline-block;
}

.pannel3 .change-part table a i:nth-last-child(3) {
	display: inline-block;
	border-left: 12px solid;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 6px;
}

.pannel3 .change-part table a i:nth-last-child(2),
.pannel3 .change-part table a i:nth-last-child(1) {
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	top: 2px;
	background-color: #FFF;
	left: 12px;
}

.pannel3 .change-part table a i:nth-last-child(1) {
	width: 26px;
	left: 20px;
}

.pannel3 .change-six {
	padding-top: 383px;
}

.pannel3 .change-six .table {
	width: 761px;
	background-color: #ffe401;
	border-radius: 10px;
	border: 6px solid #000;
	margin: 0 auto 0;
	position: relative;
	padding-top: 150px;
}

.pannel3 .change-six .table .diamond {
	width: 381px;
	position: absolute;
	top: -172px;
	left: -72px;
}

.pannel3 .change-six .table .diamond .diamond-up {
	width: 381px;
	height: 89px;
	background: url(../img/diamond1.png) center top no-repeat;
	color: #e7222b;
	font-size: 20px;
	line-height: 80px;
	font-weight: bold;
}

.pannel3 .change-six .table .diamond .diamond-bottom {
	width: 348px;
	height: 161px;
	background: url(../img/diamond2.png) center top no-repeat;
	margin: 0 auto 0;
	font-size: 20px;
	color: #e7222b;
	font-weight: bold;
	padding-top: 20px;
}

.pannel3 .change-six .table .diamond-right {
	position: absolute;
	width: 744px;
	height: 351px;
	background: url(../img/diamonr.png) center top no-repeat;
	top: -205px;
	right: -113px;
	text-align: left;
	padding-left: 210px;
	color: #FFF;
	font-size: 18px;
	line-height: 35px;
	padding-top: 50px;
}

.pannel3 .change-six .table .diamond-right span {
	display: block;
	position: relative;
	padding-left: 25px;
}

.pannel3 .change-six .table .diamond-right span i {
	position: absolute;
	display: block;
	background: #FFF;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.pannel3 .change-six .table-title {
	font-size: 24px;
	line-height: 35px;
	color: #e7222b;
}

.pannel3 .change-six table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	color: #e7222b;
	font-size: 18px;
}

.pannel3 .change-six table th {
	font-size: 20px;
	height: 68px;
}

.pannel3 .change-six table th,
.pannel3 .change-six table td {
	border: 2px solid #000;
}

.pannel3 .change-six table td {
	padding: 10px 0;
}

.pannel3 .change-six a {}

.pannel3 .change-six .miaosha{

	transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	position: relative;
	margin-top: 8px;

}

.pannel3 .change-six .miaosha a {
	position: absolute;
    display: block;
    font-size: 36px;
    color: #e02b08;
    font-weight: bold;
    background-color: #ffe401;
    width: 294px;
    height: 90px;
    line-height: 82px;
    border-radius: 24px;
    border: 4px solid #000;
    left: 50%;
    margin-left: -197px;
    top: 40px;
    box-shadow: 4px 10px 0px #000;
}

.pannel3 .change-six .miaosha span{
	position: absolute;
    left: 28px;
    top: 178px;
    font-size: 36px;
}



.pannel3 .change-six table a:nth-child(1) {
	margin: 0 auto 0;
	background-color: #45aee6;
	color: #FFF;
}

.pannel4 .public-container {
	padding-top: 12px;
}

.pannel4 .qr-content {
	width: 875px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	margin: 123px auto 0;
}

.pannel4 .qr-content .qr {
	width: 263px;
	height: 267px;
	background-position: center top;
	background-repeat: no-repeat;
}

.pannel4 .qr-content .qr:nth-child(1) {
	background-image: url(../img/q1.png);
}

.pannel4 .qr-content .qr:nth-child(2) {
	background-image: url(../img/q2.png);
}

.pannel4 .qr-content .qr:nth-child(3) {
	background-image: url(../img/q3.png);
}

.pannel4 .qr-content .qr .qr-border {
	width: 217px;
	height: 217px;
	line-height: 217px;
	font-size: 0;
}

.pannel4 .qr-content .qr .qr-border img {
	width: 196px;
	vertical-align: middle;
}

.pannel4 .qr-content .qr h1 {
	height: 50px;
	line-height: 50px;
	font-size: 0;
}

.pannel4 .qr-content .qr h1 span {
	display: inline-block;
	vertical-align: middle;
	font-size: 18px;
	color: #FFF;
	line-height: 20px;
	font-weight: normal;
	padding-right: 28px;
}

.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 80px;
    background-color: #ffe401;
    border: 6px solid #000;
}

.bottom .public-container {
	width: 1000px;
}
.bottom .public-container img{
	zoom: 0.7;
}

.bottom img {
	position: absolute;
}

.bottom img.girl {
	bottom: -6px;
	left: 173px;
}

.bottom img.heart1 {
	bottom: 98px;
	left: 364px;
}

.bottom img.heart2 {
	top: -29px;
	left: 413px;
}

.bottom .join{
    position: absolute;
    display: block;
    background: #8f48d8;
    width: 190px;
    height: 60px;
    border-radius: 30px;
    border: 4px solid #000;
    line-height: 52px;
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 409px;
}

.bottom .join i{
    position: absolute;
    display: block;
    background: #FFF;
    top: 4px;
}

.bottom .join i:nth-last-child(3){
    position: static;
    display: inline-block;
    background: transparent;
    width: 16px;
    height: 16px;
    border-left: 16px solid #FFF;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 10px;
}

.bottom .join i:nth-last-child(2){
    width: 6px;
    height: 6px;
    border-radius: 3px;
    left: 17px;
}

.bottom .join i:nth-last-child(1){
    width: 48px;
    height: 6px;
    border-radius: 3px;
    left: 26px;
}