@charset "utf-8";


.slideTxtBox{  text-align:left;  }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px;  position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; }
.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
.slideTxtBox .bd li .date{ float:right; color:#999;  }


/*notice*/
.z-notice {
	background-color: #FFFFFF;
	width: 1200px;
	height: 88px;
	position: relative;
	top: -44px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
	border-radius: 8px;
	display: grid;
	grid-template-columns: 150px auto 150px;
	grid-template-rows: 88px 88px 88px;
}

.z-notice>div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.z-notice>div.z-m {
	justify-content: flex-start;
	font-size: 24px;
	color: rgba(0, 0, 0, .5)
}

.z-notice .z-r ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

.z-notice .z-r ul li {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #A0CAE7;
	margin: 0 5px;
}

.z-notice .z-r ul li.active {
	width: 12px;
	height: 12px;
}

/*about*/
.z-about {
	position: relative;
}

.z-about .z-about-bg {
	position: absolute;
	bottom: 42px;
	left: 0;
	width: 100%;
}

.z-about .z-about-ft {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 4;
}

.z-about .z-about-container {
	/* display: grid; */
	/* grid-template-columns: 1000px 710px; */
	/* padding-left: 210px; */
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
	padding-bottom: 350px;
}

.z-about .z-about-container .z-l-l {
	flex: 2;
}

.z-about .z-about-container .z-l {
	/*padding:0 60px;*/
	box-sizing: border-box;
	flex: 1;
	padding-top: 50px;
}

.z-about .z-about-container .z-l .z-h2 {
	/*padding-top:112px;*/
	color: #000000;
	font-size: 60px;
	font-weight: bold;
}

.z-about .z-about-container .z-l .z-h3 {
	color: #333333;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 1.2em;
}

.z-about .z-about-container .z-l .z-content {
	color: #666666;
	font-size: 18px;
	line-height: 1.8;
	margin-top: 1.2em;
	text-align: justify;
}

.z-about .z-about-container .z-l .z-content p {
	text-indent: 2em;
}

.z-about .z-about-container .z-r {
	box-sizing: border-box;
	width: 500px;
	padding-top: 50px;
}

.z-about .z-about-container .z-r .z-h2 {
	font-size: 40px;
	font-weight: bold;
	color: #868686;
	opacity: .25;
	text-align: center;
}

.z-about .z-about-container .z-r .z-content {
	width: 80%;
	height: 200px;
	margin: 33px auto;
}

.z-about .z-about-container .z-r .z-content .z-line {
	width: 300px;
	height: 2px;
	background-color: rgba(112, 112, 112, .11);
	clear: both;
	margin: 0 auto 33px;
}

.z-about .z-about-container .z-r .z-content .z-li {
	width: 49%;
	height: 140px;
	float: left;
	text-align: center;
	margin-bottom: 33px;
}

.z-about .z-about-container .z-r .z-content .z-li:nth-child(1) {
	border-right: 2px solid rgba(112, 112, 112, .11);
}

.z-about .z-about-container .z-r .z-content .z-li:last-child {
	border-left: 2px solid rgba(112, 112, 112, .11);
}

.z-about .z-about-container .z-r .z-content .z-li .z-label {
	color: #000000;
	font-size: 24px;
	line-height: 41px;
}

.z-about .z-about-container .z-r .z-content .z-li .z-num {
	color: #0075C2;
	font-size: 50px;
	line-height: 100px;
	font-weight: 700;
}

.z-about .z-about-container .z-r .z-content .z-li .z-num i {
	position: relative;
	top: -30px;
	right: 12px;
	font-size: 18px;
}

.z-about .z-about-container .z-r .z-content .z-li .z-num .z-unit {
	color: rgb(0, 0, 0, .22);
	font-size: 12px;
	line-height: 20px;
	position: relative;
	bottom: 0;
	right: 0;
}

/*chanping*/
.z-chanping {
	margin-top: -26px;
	background-image: url("../images/chanping-bg.png");
	background-size: 100% auto;
	padding-bottom: 40px;
	box-sizing: border-box;
}

.z-chanping .z-chanping-container {
	margin: 0 auto;
}

.z-chanping .z-chanping-container {
	text-align: center;
}

.z-chanping .z-chanping-container .z-hd {
	width: 1200px;
	margin: 40px auto;
}

.z-chanping .z-chanping-container .z-hd ul {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	column-gap: 50px;
}

.z-chanping .z-chanping-container .z-hd ul a {
	display: block;
	background: #D1D1D1;
	border-radius: 46px;
	color: #000000;
	font-size: 14px;
	padding: 17px 50px;
	box-sizing: border-box;
}

.z-chanping .z-chanping-container .z-hd ul li.active a {
	background: #0075C2;
	color: #FFFFFF;
}

.z-chanping .z-chanping-box {
	//display: grid;
	//grid-template-columns: auto auto auto auto;
	//grid-gap: 30px;
	display:none;
	flex-wrap: wrap;
}
.z-chanping .z-chanping-box.active {
	display:flex;
}

.z-chanping .z-chanping-box .z-box-md {
	background-color: #FFFFFF;
	height: 430px;
	border-radius: 8px;
	//display: flex;
	//flex-direction: column;
	position: relative;
	width:23%;
	margin:1%;
}

.z-chanping .z-chanping-box .z-box-md .z-box-sm {
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.z-chanping .z-chanping-box .z-box-md .z-box-sm>img {
	width: 320px;
	height: auto;
}

.z-chanping .z-chanping-box .z-box-md .z-box-xs {
	width: 44px;
	height: 135px;
	border-radius: 30px 0 30px 0;
	color: #FFFFFF;
	position: absolute;
	left: 20px;
	top: 15px;
	writing-mode: vertical-rl;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 3px;
}

.z-ft {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px 30px;
	box-sizing: border-box;
	line-height: 18px;
}

.z-ft .z-h2 {
	color: rgba(0, 0, 0, .66);
	font-size: 22px;
}

.z-ft .z-h3 {
	color: rgba(0, 0, 0, 1);
	font-size: 20px;
	margin-top: 10px;
	text-align: left;
}

/*us*/
.z-us {
    width: 100%;
    height: 100%;
	background-image: url("../images/spinbg.png");
	background-repeat: no-repeat;
	background-position-y: 100%;
}

.z-us-container {
    width: 100%;
    height: 100%;
	text-align: center;
	height: auto;
	overflow: hidden;
}

.z-us-box {
    width: 100%;
	height: 680px;
	margin-top: 75px;
}

#zturn{
    height: 100%;
    position: relative;
}

#zturn li {
	width: 750px;
	height: 520px;
	background-color: #FFFFFF;
	padding: 20px 85px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(187, 187, 188, 0.44);
	transition: all 0.5s;
	cursor: default;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}

@media screen and (min-width: 1600px) {
	.z-us-box {
		height: 750px;	
	}

	#zturn li {
	width: 950px ;
	height: 620px;
	}
}

#zturn li a {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#zturn li img {
	width: 100%;
}

#zturn li .z-icon-wrap {
	width: 82%;
	height: 72%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% -50%);
}

#zturn li img.z-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 180px;
	height: 180px;
	opacity: .8;
}

#zturn li a span {
	position: absolute;
	bottom: 50px;
	width: 780px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	background-color: rgba(0, 0, 0, .3);
	display: block;
	color: #FFFFFF
}

/*yyalbg*/
.z-yyalbg {
	background-image: url("../images/yyalbg.png");
	background-repeat: no-repeat;
	padding-bottom: 150px;
	box-sizing: border-box;
}

.z-yyalbg-container {
	text-align: center;
}

.z-yyalbg-container .z-hd {
	width: 1200px;
	margin: 40px auto;
}

.z-yyalbg-container .z-hd ul {
	display: grid;
	grid-template-columns: auto auto auto auto;
	column-gap: 50px;
}

.z-yyalbg-container .z-hd ul a {
	border-radius: 0 46px 46px;
	background-color: #FFFFFF;
	color: #000000;
	padding: 30px 50px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}

.z-yyalbg-container .z-hd ul li.active a {
	background-color: #0075C2;
	color: #FFFFFF;
}

.z-yyalbg-container .z-hd ul a>img {
	margin-right: 10px;
}

.z-yyalbg-container .z-hd ul a>span {
	white-space: nowrap;
}

/*滚动*/
.z-yyalbg .scroll {
	height: 400px;
	padding-bottom: 50px;
	position: relative;
}

.z-yyalbg .scroll ul {
	white-space: nowrap;
	width: 10000px;
	position: absolute;
	height: 492px;
}

.z-yyalbg .scroll ul li {
	width: 600px;
	margin: 0 20px;
	display: inline-block;
	float: left;
	position: relative;
}

.z-yyalbg .scroll ul li a {
	width: 600px;
	height: 400px;
	overflow: hidden;
	display: flex;
	justify-items: center;
}

.z-yyalbg .scroll ul img {
	width: 100%;
	vertical-align: top;
}

.z-yyalbg .z-scr-ft-box {
	width: 550px;
	height: 100px;
	background-color: #FFFFFF;
	position: absolute;
	z-index: 2;
	left: 25px;
	bottom: -50px;
	display: flex;
	justify-content: space-between;
}

.z-yyalbg .z-scr-ft-box .z-src-l {
	flex: 1;
	padding: 25px 30px;
	box-sizing: border-box;
}

.z-yyalbg .z-scr-ft-box .z-src-l .z-src-name {
	font-size: 20px;
	color: #000000;
}

.z-yyalbg .z-scr-ft-box .z-src-l .z-src-sub {
	font-size: 16px;
	color: #0075C2;
	margin-top: 10px;
}

.z-yyalbg .z-scr-ft-box .z-src-r {
	width: 100px;
	height: 100px;
	background-color: #EAF0F8;
	display: flex;
	justify-content: center;
	align-items: center;
}

.z-yyalbg .z-scr-ft-box .z-src-r>img {
	width: 100%;
}

/*服务中心*/
.z-service-container {
	text-align: center;
}

.z-service-box {
	width: 1200px;
	margin: 60px auto;
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-gap: 70px;
}

.z-service-md {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.z-service-md .z-service-name {
	font-size: 28px;
	font-weight: bold;
	line-height: 48px;
	color: #0075C2;
}

.z-service-md .z-service-sub {
	font-size: 24px;
	font-weight: 400;
	line-height: 41px;
	color: #6A6A6A;
	display: flex;
	align-items: center;
}

/*.z-service-md .z-service-sub:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;border:2px solid #707070;margin-right:10px;}*/
/*.z-service-md .z-service-sub:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;border:2px solid #707070;margin-left:10px;}*/
.z-service-md .z-service-btn {
	margin-top: 20px;
}

/*企业资质*/
.z-zs {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url("../images/zs-bg1.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.z-zs ul {
	width: 100%;
	height: 318px;
	display: flex;
	margin-top: 60px;
	position: relative;
align-items: center;
	justify-content: center;
	
}

.z-zs .z-zs-pg .z-zs-pg-item {
	width: 100%;
	height: 100%;
}

.z-zs .z-zs-pg .z-zs-pg-item img {
	width: 260px;
}

.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry01 {
	position: absolute;
	top: 90px;
	left: 140px;
	transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(0.9);
}

.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry02 {
	position: absolute;
	top: 90px;
	left: 360px;
	transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(1.0);
}

.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry03 {
	position: absolute;
	top: 90px;
	left: 50%;
	z-index: 999;
	transform: translate(-50%, 50%) perspective(140px) rotateY(0deg) scale(3.0);
}

.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry04 {
	position: absolute;
	top: 90px;
	right: 360px;
	z-index: 4;
	transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(1.0);
}

.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry05 {
	position: absolute;
	top: 90px;
	right: 140px;
	transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(0.9);
}

@media (min-width: 1500px) {

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry01 {
		position: absolute;
		top: 90px;
		left: 100px;
		transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(0.8);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry02 {
		position: absolute;
		top: 90px;
		left: 270px;
		transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(0.9);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry03 {
		position: absolute;
		top: 90px;
		left: 50%;
		z-index: 999;
		transform: translate(-50%, 50%) perspective(140px) rotateY(0deg) scale(2.2);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry04 {
		position: absolute;
		top: 90px;
		right: 270px;
		z-index: 4;
		transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(0.9);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry05 {
		position: absolute;
		top: 90px;
		right: 100px;
		transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(0.8);
	}

}

@media (min-width: 1600px) {
	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry01 {
		position: absolute;
		top: 90px;
		left: 140px;
		transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(0.9);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry02 {
		position: absolute;
		top: 90px;
		left: 360px;
		transform: translate(0, 0) perspective(140px) rotateY(7deg) scale(1.0);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry03 {
		position: absolute;
		top: 90px;
		left: 50%;
		z-index: 999;
		transform: translate(-50%, 50%) perspective(140px) rotateY(0deg) scale(3.0);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry04 {
		position: absolute;
		top: 90px;
		right: 360px;
		z-index: 4;
		transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(1.0);
	}

	.z-zs .z-zs-pg .z-zs-pg-item .z-pg-ry05 {
		position: absolute;
		top: 90px;
		right: 140px;
		transform: translate(0, 0) perspective(140px) rotateY(-7deg) scale(0.9);
	}

}

.z-zs-box1 {
	display: grid;
	grid-template-columns: 250px auto 250px;
	grid-gap: 16px;
	width: 1050px;
	margin: 40px auto 0;
}

.z-zs-box2 {
	display: grid;
	grid-template-columns: 204px 204px 204px 204px 204px 204px;
	grid-gap: 36px;
	width: 1400px;
	padding: 60px 0;
}

.z-zs-box2 img {
	width: 100%;
}

.swiper-button{
	background-color: #bdbdbd;
	width: 50px!important;
	height: 50px!important;
	border-radius: 50%!important;
	background-size: 50% 50%!important;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.z-zs-container {
	text-align: center;
}

.z-zs-container .z-pg-h1 {
	color: #FFFFFF;
}

.z-zs-container .z-pg-h2 {
	color: #D8D8D8;
}

/*新闻中心*/
.z-news {}

.z-news-container {
	text-align: center;
}

.z-news-btns {
	width: 440px;
	margin: 50px auto;
	display: grid;
	grid-template-columns: 200px 200px;
	grid-gap: 40px;
}

.z-news-btn {
	height: 50px;
	background: #D1D1D1;
	border-radius: 46px;
	font-size: 16px;
	color: #000000;
	line-height: 50px;
	text-align: center;
	cursor: pointer
}

.z-news-btn.active {
	background: #0075C2;
	color: #FFFFFF;
}

.z-news-main ul li {
	height: 200px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.z-news-main ul li a {
	display: inline-block;
	width: 800px;
	margin-right: 210px;
	height: 200px;
	padding: 50px 0;
	box-sizing: border-box;
}

.z-news-main ul li a .z-hd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26px;
	color: #000000;
}

.z-news-main ul li a .z-hd span {
	font-size: 24px;
	color: rgba(0, 0, 0, .21);
	font-weight: bold;
}

.z-news-main ul li a .z-text {
	font-size: 16px;
	color: rgba(0, 0, 0, .49);
	line-height: 28px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.z-news-main ul li a .z-text .z-content {
	padding-right: 90px;
	box-sizing: border-box;
	border-right: 1px solid #C9C9C9;
	margin-right: 50px;
}

.z-news-main ul li a .z-text span {
	display: inline-block;
	width: 12px;
	height: 8px;
	border: 2px solid;
	border-color: #C9C9C9 #C9C9C9 transparent transparent;
	transform: rotate(45deg);
}

.z-news-main .z-add-bg {
	background-image: url("../images/b-ner-bg.png");
	width: 100%;
	height: 200px;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
	top: 200px;
	left:-300px;
}

.z-news-main ul li.active {
	background-color: #0075C2;
	width: 1130px;
	height: 200px;
	margin-left: 790px;
}

.z-news-main ul li.active a .z-hd,
.z-news-main ul li.active a .z-hd span {
	color: #FFFFFF;
}

.z-news-main ul li.active a .z-text {
	color: rgba(255, 255, 255, .49);
}

.z-news-main ul li.active a .z-text .z-content {
	border-right-color: #FFFFFF;
}

.z-news-main ul li.active a .z-text span {
	border-color: #FFFFFF #FFFFFF transparent transparent;
}

.z-news-main {
	position: relative;
}

.z-news-main .z-news-l1 {
	position: absolute;
	width: 430px;
	height: 560px;
	left: 300px;
	background: rgba(209, 209, 209, 0.39);
	border-radius: 12px;
}

.z-news-main .z-news-l2 {
	position: absolute;
	width: 480px;
	height: 620px;
	left: 330px;
	top: 30px;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 30px;
	box-sizing: border-box;
	overflow: hidden;
}


.z-news-main .z-news-l2 .z-time {
	font-size: 24px;
	color: rgba(0, 0, 0, .21);
}

.z-news-main .z-news-l2 .z-name {
	font-size: 26px;
	color: rgba(0, 0, 0, 1);
	margin-top: 30px;
}

.z-news-main .z-news-l2 .z-text {
	font-size: 16px;
	color: rgba(0, 0, 0, .49);
	margin-top: 30px;
	line-height: 26px;
	text-align: justify;
}

.z-news-main .z-news-l2 img {
	width: 100%;
	margin-top: 35px;
}

.z-news-main ul {
	min-height: 700px;
	display: block;
}

/*走进松盛包装*/
.z-video {
	background-image: url("../images/shuping.png");
	background-repeat: no-repeat;
	padding-bottom: 40px;
	box-sizing: border-box;
}

.z-video-pinpai {
	padding-bottom: 40px;
	box-sizing: border-box;
}

.z-video-container {
	text-align: center;
}

.z-video-box {
	width: 1200px;
	border: 20px solid #0075C2;
	border-radius: 8px;
	margin: 40px auto 0;
	background-color: #0075C2;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative
}

.z-video-box a img {
	width: 100%;
	height: auto;
}

.z-video-box a img.videoed {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 180px;
	height: 180px;
	opacity: .8;
}

/*感谢客户一直以来的支持*/
.z-customer {
	padding-bottom: 40px;
	box-sizing: border-box;
}

.z-customer-container {
	text-align: center;
}

.z-customer-box {
	margin: 40px auto 0;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
}

.z-customer-box-md {
	/*background-color:rgba(239, 239, 239, 0.39);*/
	box-shadow: 0px 0px 15px rgb(0 0 0 / 12%);
	height: 115px;
	width: 14.5%;
	margin: 1%;
}

.z-customer-box-md-ms{
    height: 88px!important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.z-customer-box-md>img {
	max-width: 100%;
	max-height: 100%;
}

/*咨询热线*/
.z-tel-us {
	background-image: url("../images/b-tel-bg.png");
	background-repeat: no-repeat;
	padding: 120px 0 40px;
	box-sizing: border-box;
	text-align: center;
}

.z-tel-us .z-tel {
	font-size: 32px;
	font-weight: bold;
	line-height: 18px;
	color: #FFFFFF;
}

.z-tel-us .z-tel-box {
	width: 830px;
	display: grid;
	grid-template-columns: 280px 280px 280px;
	grid-gap: 16px;
	margin: 40px auto 0;
}

.z-tel-us .z-tel-box input {
	border-radius: 50px;
	padding: 20px 30px;
	box-sizing: border-box;
	background: #9EBCE2;
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
	border: 0;
}

.z-tel-us .z-tel-box input::input-placeholder {
	color: #FFFFFF;
}

.z-tel-us .z-tel-box input::-webkit-input-placeholder {
	color: #FFFFFF;
}

.z-tel-us .z-tel-box input::-moz-placeholder {
	color: #FFFFFF;
}

.z-tel-us .z-tel-box input::-moz-placeholder {
	color: #FFFFFF;
}

.z-tel-us .z-tel-box input::-ms-input-placeholder {
	color: #FFFFFF;
}

.z-tel-us .z-tel-box button.btnpage {
	border-radius: 50px;
	padding: 20px 30px;
	box-sizing: border-box;
	background: #FFFFFF;
	color: #0075C2;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
border: none;
    outline: none;
}

/*模态*/
html.modal-active,
body.modal-active {
	overflow: hidden;
}

#modal-container {
	position: fixed;
	/*display: table;*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	z-index: 999;
}

#modal-container.one {
	transform: scaleY(0.01) scaleX(0);
	animation: unfoldIn 0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background {
    width: 100%;
    height: 100%;
}

#modal-container.one .modal-background .modal {
	transform: scale(0);
	animation: zoomIn 0s 0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out {
	transform: scale(1);
	animation: unfoldOut 0s 0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out .modal-background .modal {
	animation: zoomOut 0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two {
	transform: scale(1);
}

#modal-container.two .modal-background {
	background: rgba(0, 0, 0, 0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two .modal-background .modal {
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two+.content {
	animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out {
	animation: quickScaleDown 0s .5s linear forwards;
}

#modal-container.two.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out .modal-background .modal {
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out+.content {
	animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three {
	z-index: 0;
	transform: scale(1);
}

#modal-container.three .modal-background {
	background: rgba(0, 0, 0, 0.6);
}

#modal-container.three .modal-background .modal {
	animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three+.content {
	z-index: 1;
	animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three.out .modal-background .modal {
	animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three.out+.content {
	animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four {
	z-index: 0;
	transform: scale(1);
}

#modal-container.four .modal-background {
	background: rgba(0, 0, 0, 0.7);
}

#modal-container.four .modal-background .modal {
	animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four+.content {
	z-index: 1;
	animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four.out .modal-background .modal {
	animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four.out+.content {
	animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five {
	transform: scale(1);
}

#modal-container.five .modal-background {
	background: rgba(0, 0, 0, 0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five .modal-background .modal {
	transform: translateX(-1500px);
	animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five.out {
	animation: quickScaleDown 0s .5s linear forwards;
}

#modal-container.five.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five.out .modal-background .modal {
	animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six {
	transform: scale(1);
}

#modal-container.six .modal-background {
	background: rgba(0, 0, 0, 0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal {
	background-color: transparent;
	animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal h2,
#modal-container.six .modal-background .modal p {
	opacity: 0;
	position: relative;
	animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal .modal-svg rect {
	animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out {
	animation: quickScaleDown 0s .5s linear forwards;
}

#modal-container.six.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal {
	animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal h2,
#modal-container.six.out .modal-background .modal p {
	animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal .modal-svg rect {
	animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven {
	transform: scale(1);
}

#modal-container.seven .modal-background {
	background: rgba(0, 0, 0, 0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven .modal-background .modal {
	height: 75px;
	width: 75px;
	border-radius: 75px;
	overflow: hidden;
	animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven .modal-background .modal h2,
#modal-container.seven .modal-background .modal p {
	opacity: 0;
	position: relative;
	animation: modalContentFadeIn .5s 1.4s linear forwards;
}

#modal-container.seven.out {
	animation: slowFade .5s 1.5s linear forwards;
}

#modal-container.seven.out .modal-background {
	background-color: rgba(0, 0, 0, 0.7);
	animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven.out .modal-background .modal {
	border-radius: 3px;
	height: 162px;
	width: 227px;
	animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven.out .modal-background .modal h2,
#modal-container.seven.out .modal-background .modal p {
	animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
	/*display: table-cell;*/
	background: rgba(0, 0, 0, 0.8);
	/*text-align: center;*/
	/*vertical-align: middle;*/
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

#modal-container .modal-background .modal {
	background: white;
	padding: 30px;
	display: inline-block;
	border-radius: 3px;
	font-weight: 300;
	position: relative;
}

#modal-container .modal-background .modal h2 {
	font-size: 25px;
	line-height: 25px;
	margin-bottom: 15px;
}

#modal-container .modal-background .modal p {
	font-size: 18px;
	line-height: 22px;
}

#modal-container .modal-background .modal .modal-svg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect {
	stroke: #FFFFFF;
	stroke-width: 2px;
	stroke-dasharray: 778;
	stroke-dashoffset: 778;
}

.content {
	min-height: 100%;
	height: 100%;
	background: white;
	position: relative;
	z-index: 0;
}

.content h1 {
	padding: 75px 0 30px 0;
	text-align: center;
	font-size: 30px;
	line-height: 30px;
}

.content .buttons {
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.content .buttons .button {
	display: inline-block;
	text-align: center;
	padding: 10px 15px;
	margin: 10px;
	background: red;
	font-size: 18px;
	background-color: #EFEFEF;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.content .buttons .button:hover {
	color: white;
	background: #009BD5;
}

@keyframes unfoldIn {
	0% {
		transform: scaleY(0.005) scaleX(0);
	}

	50% {
		transform: scaleY(0.005) scaleX(1);
	}

	100% {
		transform: scaleY(1) scaleX(1);
	}
}

@keyframes unfoldOut {
	0% {
		transform: scaleY(1) scaleX(1);
	}

	50% {
		transform: scaleY(0.005) scaleX(1);
	}

	100% {
		transform: scaleY(0.005) scaleX(0);
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes fadeIn {
	0% {
		background: rgba(0, 0, 0, 0);
	}

	100% {
		background: rgba(0, 0, 0, 0.7);
	}
}

@keyframes fadeOut {
	0% {
		background: rgba(0, 0, 0, 0.7);
	}

	100% {
		background: rgba(0, 0, 0, 0);
	}
}

@keyframes scaleUp {
	0% {
		transform: scale(0.8) translateY(1000px);
		opacity: 0;
	}

	100% {
		transform: scale(1) translateY(0px);
		opacity: 1;
	}
}

@keyframes scaleDown {
	0% {
		transform: scale(1) translateY(0px);
		opacity: 1;
	}

	100% {
		transform: scale(0.8) translateY(1000px);
		opacity: 0;
	}
}

@keyframes scaleBack {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.85);
	}
}

@keyframes scaleForward {
	0% {
		transform: scale(0.85);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes quickScaleDown {
	0% {
		transform: scale(1);
	}

	99.9% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes slideUpLarge {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes slideDownLarge {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0%);
	}
}

@keyframes moveUp {
	0% {
		transform: translateY(150px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes moveDown {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(150px);
	}
}

@keyframes blowUpContent {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	99.9% {
		transform: scale(2);
		opacity: 0;
	}

	100% {
		transform: scale(0);
	}
}

@keyframes blowUpContentTwo {
	0% {
		transform: scale(2);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes blowUpModal {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes blowUpModalTwo {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0);
		opacity: 0;
	}
}

@keyframes roadRunnerIn {
	0% {
		transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
	}

	70% {
		transform: translateX(30px) skewX(0deg) scaleX(0.9);
	}

	100% {
		transform: translateX(0px) skewX(0deg) scaleX(1);
	}
}

@keyframes roadRunnerOut {
	0% {
		transform: translateX(0px) skewX(0deg) scaleX(1);
	}

	30% {
		transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
	}

	100% {
		transform: translateX(1500px) skewX(30deg) scaleX(1.3);
	}
}

@keyframes sketchIn {
	0% {
		stroke-dashoffset: 778;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes sketchOut {
	0% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 778;
	}
}

@keyframes modalFadeIn {
	0% {
		background-color: transparent;
	}

	100% {
		background-color: white;
	}
}

@keyframes modalFadeOut {
	0% {
		background-color: white;
	}

	100% {
		background-color: transparent;
	}
}

@keyframes modalContentFadeIn {
	0% {
		opacity: 0;
		top: -20px;
	}

	100% {
		opacity: 1;
		top: 0;
	}
}

@keyframes modalContentFadeOut {
	0% {
		opacity: 1;
		top: 0px;
	}

	100% {
		opacity: 0;
		top: -20px;
	}
}

@keyframes bondJamesBond {
	0% {
		transform: translateX(1000px);
	}

	80% {
		transform: translateX(0px);
		border-radius: 75px;
		height: 75px;
		width: 75px;
	}

	90% {
		border-radius: 3px;
		height: 182px;
		width: 247px;
	}

	100% {
		border-radius: 3px;
		height: 162px;
		width: 227px;
	}
}

@keyframes killShot {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translateY(300px) rotate(45deg);
		opacity: 0;
	}
}

@keyframes fadeToRed {
	0% {
		box-shadow: inset 0 0 0 rgba(201, 24, 24, 0.8);
	}

	100% {
		box-shadow: inset 0 2000px 0 rgba(201, 24, 24, 0.8);
	}
}

@keyframes slowFade {
	0% {
		opacity: 1;
	}

	99.9% {
		opacity: 0;
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}