* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  outline: none;
  text-decoration: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Microsoft YaHei, arial, sans-serif;
  font-size: 18px;
  color: #4c4c4c;
}
html {
  font-size: 18px;
}
img {
 
  max-width: 100%;
  height: auto; text-align:center;
}
body {	max-width: 100%; overflow-x: hidden;
	background: url(../img/banner.jpg) no-repeat center 40px;
 }
.Width { width: 1200px; margin: 0 auto; }
.clearfix:after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  font-size: 0;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}


/* 通用头部 */
.ht_top {
	position: relative; width: 100%; overflow: hidden; z-index: 2;
	background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;
	line-height: 41px; }
.ht_top .zt_top {
	width: 1200px; height: 41px; margin: 0 auto; }
.ht_top h1 {
	float: left; }
.ht_top h1 a {
	float: left; width: 131px; height: 40px; overflow: hidden;
	background: url(https://www.huatu.com/z/topfooter/images/logo.gif) no-repeat;
	font-size: 12px; text-indent: -100em; }
.ht_top .topnav {
	float: right; color: #333; font-size: 12px; }
.ht_top .topnav a {
	padding: 0 8px; }
.ht_top .topnav a:hover {
	color: #e4393c; text-decoration: underline; }


.main {
  width: 1100px;
  margin: 0 auto;
}
.container {
  margin: 5px auto;
  width: 100%;
  position: relative;
}
.container p {
  text-align: center;
  padding: 10px auto; font-size:34px; font-weight:bold;
}
.beat-char {
  line-height: 0.2em;
  position: relative;
  display: inline-block;
  background: transparent;
  font-size: 48px;
  color: #232959;
  letter-spacing: 0.2em;
  font-weight: bold;
}
.rotate {
  transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  /* IE 9 */
  -moz-transform: rotate(360deg);
  /* Firefox */
  -webkit-transform: rotate(360deg);
  /* Safari �� Chrome */
  -o-transform: rotate(360deg);
  -webkit-transition-duration: 0.7s;
}
.public-title {
  font-size: 48px;
  color: #232959;
  text-align: center;
  font-weight: bold;
}
a {
  transition: 0.5s;
}
a:hover {
  transform: translateY(-5px);
}
.pc-top {
  background: white;
}
.pc-top .t-middle {
  width: 1100px;
  height: 60px;
  margin: 0 auto;
  background: white;
}
.pc-top .t-middle .logo {
  float: left;
  width: 203px;
  height: 25px;
  display: block;
  margin-top: 15px;
}
.pc-top .t-middle .navlist {
  float: right;
}
.pc-top .t-middle .navlist .list {
  float: left;
  padding-left: 25px;
  padding-right: 25px;
  margin-top: 20px;
}
.pc-top .t-middle .navlist .list a {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  color: #262626;
  transition: 0.5s;
}
.pc-top .t-middle .navlist .list a:hover {
  color: #e11e3c;
  transition: 0.5s;
}
.pc-top .t-middle .navlist .list + .list {
  border-left: 1px solid #737373;
}
.phone-top {
  display: none;
  position: relative;
}
.phone-top .top-nav {
  width: 100%;
  
  background: white;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.phone-top .top-nav .logo {
  width: 203px;
  height: 25px;
  display: block;
  float: left;
  padding-left: 15px;
  
}
.phone-top .top-nav .navicon {
  width: 26px;
  height: 18px;
  display: block;
  float: right;
  margin-right: 15px;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.5s;
  background: url(../img/navicon.png) no-repeat;
}
.phone-top .top-nav .trangle {
  transition: 0.5s;
  transform: rotate(90deg);
}
.phone-top .sublist {
  display: none;
  width: 100%;
  height: 100%;
  background: #e11e3c ;
  position: fixed;
  padding-top: 60px;
  z-index: 9998;
}
.phone-top .sublist .list {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.phone-top .sublist .list a {
  font-size: 16px;
  color: white;
}
.phone-top .sublist .list + .list {
  border-top: 1px solid #e03d54;
}
.banner {
  height: 743px; width:100%;
  
  overflow: hidden;
}
.banner .main {
  position: relative;
}
.banner .main .banner-icon1 {
  width: 405px;
  height: 228px;
  background: url(../img/banner-icon2.png) no-repeat;
  animation: down 2s ease-out infinite alternate;
  position: absolute;
  left: 503px;
  top: 296px;
}
.main ul{
	margin-top: 20px;
	margin-bottom: 40px;
	box-shadow: 5px 5px 0 yellow;
	background-color: rgb(35,201,241);
	border-radius: 15px;
	padding: 20px 0;
}
.main ul li{
	font-size: 30px;
	font-weight: bold;
	line-height: 50px;
	color: white;
	text-shadow:2px 3px 0px gray;
}
.main ul li span{
	color: rgb(255,215,3);
	font-size: larger;	
}
@media only all and (max-width:1200px) {
body {
		width: 18.75rem; font-size: .7rem; line-height: 1.2rem;
		background-image:url(../img/banner-m.jpg); 
		background-size:105%; }
.banner { height:6rem;}
	
	.main ul{
	padding: 10px 0;
}
.main ul li{
	font-size: .45rem;
	line-height: 1rem;
	white-space: nowrap;
	text-shadow:1.5px 1.3px 0px gray;
}

}

@keyframes down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}
.gift {
  margin-top: 50px;
}
.gift .main {
  text-align: center;
}
.gift .main .bank {
  display: inline-block;
  margin-top: 40px;
}
.gift .main .bank .bank-list {
  width: 115px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
}
.gift .main .bank .bank-list + .bank-list {
  margin-left: 28px;
}
.gift .main .g-list {
  margin-top: 50px;
}
.gift .main .g-item {
  width:99%;
  height: auto; text-align:center;
  border-radius: 20px;
  background: white;
  box-shadow: 0 10px 35px #e5e5e5;
  margin-bottom: 40px;
  transition: 0.5s;
}
.gift .main .g-item .g-icon {
  width: 77px;
  height: 73px;
  display: block;
  background: url(../img/g-icon1.png) no-repeat;
  background-size: 100% ;
  margin: 32px auto 10px;
  transition: 0.5s;
}
.gift .main .g-list .g-item .g-icon2 {
  background: url(../img/g-icon2.png) no-repeat;
  background-size: 100% ;
}
.gift .main .g-list .g-item .g-icon3 {
  background: url(../img/g-icon3.png) no-repeat;
  background-size: 100% ;
}
.gift .main .g-list .g-item .g-icon4 {
  background: url(../img/g-icon4.png) no-repeat;
  background-size: 100% ;
}
.gift .main .g-list .g-item .g-icon5 {
  background: url(../img/g-icon5.png) no-repeat;
  background-size: 100% ;
}
.gift .main .g-list .g-item .g-icon6 {
  background: url(../img/g-icon6.png) no-repeat;
  background-size: 100% ;
}
.gift .main .g-list .g-item .g-text {
  font-size: 20px;
  text-align: center;
  display: block;
  transition: 0.5s;
}
.gift .main .g-list .g-item:hover .g-icon {
  transform: translateY(-2px);
}
.gift .main .g-list .g-item:hover .g-text {
  transform: translateY(2px);
}
.gift .main .g-list .g-item + .g-item {
  margin-left: 20px;
}
.gift .main .buy-btn {
  width: 240px;
  height: 50px;
  background: #e5220d;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
.time {
  padding-top: 60px;
  padding-bottom: 80px;
  overflow: hidden;
  background: #f5f5f5;
  margin-top: 60px;
}
.time .main .feature {
  margin-top: 50px;
}
.time .main .feature .title {
  font-size: 36px;
  color: #d92851;
  font-weight: bold;
}
.time .main .feature .con {
  padding-top: 40px;
  font-size: 22px;
  color: #4a4747;
  line-height: 36px;
}
.time .main table {
  margin-top: 40px;
  box-shadow: 0 10px 20px #e0ecf8;
}
.time .main table tr th {
  text-align: center;
  padding: 12px 0;
  background: #232959;
  border-left: 1px solid #cccccc;
  color: white;
}
.time .main table tr td {
  text-align: center;
  padding: 10px 0;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  background: #ffffff;
}
.ziliao {
  margin-top: 60px;
}
.ziliao .z-sublic-title {
  font-size: 24px;
  color: #d92851;
  text-align: center;
  padding-top: 10px;
}
.ziliao .main {
  margin-top: 20px;
}
.ziliao .main .z-list .z-item {
  width: 50%;
}
.ziliao .main .z-list .z-item .z-con {
  width: 531px;
  height: 282px;
  background: url(../img/z-onebg.png) no-repeat;
  margin: 20px auto 0;
  padding: 50px 0;
}
.ziliao .main .z-list .z-item .z-con .z-title {
  width: 230px;
  padding: 5px 10px;
  background: #d92851;
  border-radius: 0 50px 50px 0;
  font-size: 24px;
  color: white;
}
.ziliao .main .z-list .z-item .z-con .z-info {
  color: white;
  line-height: 36px;
  padding-top: 26px;
  padding-left: 16px;
}
.ziliao .main .z-list .z-item .z-con2 {
  background: url(../img/z-twobg.png) no-repeat;
}
.ziliao .main .z-list .z-item .z-con3 {
  background: url(../img/z-threebg.png) no-repeat;
}
.ziliao .main .z-list .z-item .z-con4 {
  background: url(../img/z-fourbg.png) no-repeat;
}
.qq-group {
  padding-top: 60px;
  margin-bottom: 80px;
  background: url(../img/qq-bg.jpg) center no-repeat;
  overflow: hidden;
}
.qq-group .main .qq-title {
  font-size: 46px;
  text-align: center;
  color: #232959;
  padding-top: 70px;
  font-weight: bold;
}
.qq-group .main .qqlist {
  width: 1120px;
  margin-top: 50px;
  position: relative;
}
.qq-group .main .qqlist .lis {
  float: left;
  width: 118px;
  height: 62px;
  background: #ffb01b;
  font-size: 22px;
  color: white;
  margin-right: 20px;
  text-align: center;
  line-height: 62px;
  margin-bottom: 18px;
  border-radius: 8px;
  transition: 0.5s;
  cursor: pointer;
}
.qq-group .main .qqlist .lis:hover {
  background: #f6ca00;
}
.qq-group .main .qqlist .add-cur {
  background: #f6ca00;
}
.qq-group .main .qqlist .address {
  clear: both;
  margin-bottom: 18px;
  background: #f6ca00;
  width: 100%;
  height: 150px;
  display: none;
  overflow: hidden;
}
.qq-group .main .qqlist .address ul li {
  padding: 20px;
}
.qq-group .main .qqlist .address ul li .a-left p,
.qq-group .main .qqlist .address ul li .a-left a {
  line-height: 30px;
  font-size: 18px;
}
.qq-group .main .qqlist .address ul li .a-left a {
  border-bottom: 1px solid #333 ;
}
.qq-group .main .qqlist .address ul li .a-right {
  margin-left: 20px;
}
.qq-group .main .qqlist .address ul li .a-right img {
  width: 110px;
  height: 110px;
  display: inline-block;
  margin-left: 20px;
}
.footer {
  background: #d92851;
}
.footer .copy-middle {
  margin: 0 auto;
  width: 1100px;
  background: #d92851;
  overflow: hidden;
}
.footer .copy-middle .footer-list {
  width: 770px;
  margin: 20px auto 0;
}
.footer .copy-middle .footer-list li {
  float: left;
  margin-left: 6px;
  margin-right: 6px;
  height: 16px;
  line-height: 16px;
}
.footer .copy-middle .footer-list li a {
  transition: 0.5s;
  color: white;
  padding-left: 6px;
  font-size: 16px;
}
.footer .copy-middle .footer-list li + li {
  border-left: 1px solid white;
}
.footer .copy-middle .footer-list li:hover a {
  transition: 0.5s;
  color: white;
}
.footer .copy-middle p {
  color: white;
  text-align: center;
  margin-top: 10px;
  padding-bottom: 20px;
  font-size: 16px;
}
#nav-bottom {
  height: 155px;
  background: url(../img/nav-bottom.png) center no-repeat;
  width: 100%;
  z-index: 100;
}
#nav-bottom .main {
  position: relative;
}
#nav-bottom .main a {
  font-size: 48px;
  color: white;
  text-align: center;
  display: block;
  margin: 0 auto;
  line-height: 155px;
}
#nav-bottom .main span {
  width: 50px;
  height: 50px;
  background: url(../img/buy-colse.png) no-repeat;
  position: absolute;
  right: 0px;
  top: 50px;
}
.yidong {
  bottom: 0;
  left: 0;
  position: fixed;
}