@charset "utf-8";
@media screen and (min-width: 640px){
	body{
		width: auto;
		min-width: 1210px;
	}
}
.suggestion {
	background-color: #fbf3ce;
	float: left;
	width: 100%
}

.suggestion .top {
	background: url(../images/bg.png) no-repeat center center;
	width: 100%;
	height: 530px
}

.suggestion .top .cover-page-wrapper {
	overflow: hidden
}

.suggestion .top div.img1 {
	padding-left: 60px;
	position: relative;
	height: 200px
}

.suggestion .top div.img1 div.text {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	width: 66%;
	position: absolute;
	top: 40px
}

.suggestion .top div.img2 {
	margin: -80px auto 0;
	width: 35%;
	height: 290px;
	overflow: hidden
}

.suggestion .top div.img2 img {
	width: 100%
}

.suggestion .wrap {
	position: relative;
	width: 1210px;
	margin: -120px auto 0
}

.suggestion .wrap .pos {
	position: absolute;
	bottom: 20px;
	right: 30px;
	z-index: 10
}
.suggestion .wrap .pos img{
	width: 70%;
}
.suggestion .top-bar {
	background: #49b9ee;
	width: 1110px;
	height: 50px;
	margin: 0 auto
}

.suggestion .border-top-bar {
	height: 15px;
	width: 1050px;
	margin: 0 auto;
	background: #40afe4
}

.suggestion .form-box {
	border: 20px #49b9ee solid;
	width: 1050px;
	margin: 0 auto;
	border-top: 0;
	background: #fff;
}

.suggestion div.title {
	height: 210px;
	background: #339dd0;
	color: #fff;
	text-align: left;
	padding: 10px 0 0 30px
}

.suggestion div.title h2 {
	font-size: 30px;
	line-height: 2
}

.suggestion div.title p {
	font-size: 16px;
	line-height: 1.8
}

.suggestion div.form {
	height: auto;
	width: 90%;
	overflow: hidden;
	padding-top: 20px;
	position: relative;
	margin: 0 auto
}

.suggestion div.form-box>p {
	background: url(../images/title-bg-bar.png) no-repeat center center;
	height: 41px;
	width: 599px;
	line-height: 2.8;
	padding-left: 20px;
	margin: 30px -8px
}

.suggestion div.form ul {
	width: 520px;
	text-align: left
}

.suggestion div.form-con {
	padding: 50px 0;
}

.suggestion div.form-con .btn {
	background: #888;
	color: #fff;
	font-size: 18px;
	padding: 8px 50px
}

.suggestion div.form-con .btn.active {
	background: #fdad78
}

.suggestion div.form-con .reset-form {
	padding: 0;
	background: #fff;
	border: 0;
	margin-left: 20px;
	color: #888
}

.suggestion div.form ul li.active,.suggestion div.form ul li:hover {
	border-bottom: 2px red solid;
	color: #f75a53
}

.suggestion div.form ul li {
	cursor: pointer;
	font-size: 16px;
	float: left;
	margin-right: 50px
}

.suggestion div.form ul li:last-child {
	margin-right: 0
}

.suggestion div.form .content {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate3d(-100%,0,0);
	-webkit-transform: translate3d(-100%,0,0);
	transition: all .5s ease 0s;
	-webkit-transition: all .5s ease 0s;
	filter: alpha(opacity=0);
	opacity: 0
}

.suggestion div.form .show {
	position: relative;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	transition: all .5s ease 0s;
	-webkit-transition: all .5s ease 0s;
	filter: alpha(opacity=100);
	opacity: 1
}

.suggestion div.form .width1 {
	width: 30%;
	height: 40px
}

.suggestion div.form .width2 {
	width: 40%;
	height: 40px
}

.suggestion div.form form label {
	color: #a1a1a1;
	font-size: 14px;
	font-weight: 400
}

.suggestion div.form form input,.suggestion div.form form textarea {
	border-radius: 0;
	border-color: #fed9c0
}
.suggestion div.form form input.error,.suggestion div.form form textarea.error {
	border-color: #f75a53
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0);
		-ms-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

@-webkit-keyframes rotateIn {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0,0,1,-200deg);
		transform: rotate3d(0,0,1,-200deg);
		opacity: 0
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateIn {
	0% {
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0,0,1,-200deg);
		-ms-transform: rotate3d(0,0,1,-200deg);
		transform: rotate3d(0,0,1,-200deg);
		opacity: 0
	}

	100% {
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		opacity: 1
	}
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%,0,0);
		-ms-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		-ms-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,100%,0);
		-ms-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: .2s;
	animation-delay: .2s
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	-webkit-animation-duration: .4s;
	animation-duration: .4s
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-duration: .4s;
	animation-duration: .4s
}

.rotateIn {
	-webkit-animation-name: rotateIn;
	animation-name: rotateIn;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: .4s;
	animation-duration: .4s
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-delay: .5s;
	animation-delay: .5s
}

.ecmoban {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}