#creativedoc{

  font-family: helvetica;

}

#creativedoc .banner{

  background:  50% 50% no-repeat;

  height: 440px;

  width: 100%;

  max-width: 3067px;

  background-size: cover;

}

.creative-container{

  margin-top: 60px;

  padding-bottom: 60px;

}

.creative-container--underline{

  border-bottom: 1px solid #e6e6e6;;

}

.creative-title{

	text-align: center;

  padding-bottom: 30px;

  margin-bottom: 48px;

}

.creative-title span{

  font-size: 36px;

  color: #4c4c4c;

  line-height: 36px;

}

.creative-title .line{

  width: 48px;

  height: 2px;

  background: #d7d7d7;

  position: absolute;

  bottom: -2px;

  left: 50%;

  margin-left: -24px;

}

.advantage-list{

  width: 1030px;

  margin: 0 auto;

  overflow: hidden;

}

.advantage-list li{

  width: 33.333%;

  float: left;

}

.advantage-icon{

  width: 40px;

  height: 40px;

  margin: 0 auto;

  margin-bottom: 14px;

}

.advantage-title{

  text-align: center;

  font-size: 16px;

  color: #333333;

  line-height: 16px;

  margin-bottom: 12px;

  text-align: center;

}

.advantage-desc{

  text-align: center;

  font-size: 12px;

  color: #666666;

  line-height: 12px;

}

.advantage-list .experience{

  background:  50% 50% no-repeat;

}

.advantage-list .team{

  background:  50% 50% no-repeat;

}

.advantage-list .creative-icon{

  background:  50% 50% no-repeat;

}

.creative-title .important{

  color: #fa3a4c;

}

.creative-container #doc-table2{

  margin: 0 auto;

  width: 960px;

  box-shadow: none;

}

.creative-container #doc-table2 thead td{

  font-size: 14px;

  color: #333333;

  font-weight: bolder;

  height: 48px;

  background: #f2f3f7;

}

.creative-container #doc-table2 td{

  border: 1px solid #e5e5e5;

  text-align: center;

  font-size: 14px;

  color: #666666;

  padding: 8px 20px;

}

.creative-container #doc-table2 td.beizhu{

  text-align: left;

  padding-top: 16px;

  padding-bottom: 16px;

}

td.beizhu p{

  margin-bottom: 5px;

  line-height: 18px;

}

td.beizhu p:last-of-type{

  margin-bottom: 0;

}

.creative-container--client{

  background: 50% 0 no-repeat;

  width: 100%;

  max-width: 3067px;

  background-size: contain;

  margin-top: 0;

  padding-top: 60px;

}

.creative-container--client .creative-title{

  color: white;

}

.creative-container--client .creative-title .line{

  background: #dbdbdb;

}

.client{

  width: 960px;

  height: 330px;

  margin: 96px auto;

  margin-bottom: 30px;

}

.client li{

  width: 33.333%;

  height: 326px;

  float: left;

}

.client-con{

  position: relative;

  padding: 65px 30px 30px 30px;

  width:240px;

  margin: 0 auto;

  height: 229px;

  background: #ffffff;

  border: 1px solid #e6e6e6;

  box-shadow: 0 8px 10px 0 rgba(0,0,0,0.02);

  border-radius: 4px;

}

.client-img{

  position: absolute;

  width: 88px;

  height: 88px;

  border-radius: 50%;

  top: -44px;

  left: 50%;

  margin-left: -44px;

}

.client-title{

  text-align: center;

  font-size: 18px;

  color: #333333;

  line-height: 18px;

  font-weight: bolder;

  margin-bottom: 30px;

}

.client-desc{

  font-size: 14px;

  color: #666666;

  line-height: 24px;

}

.client-bottom{

  position: absolute;

  bottom: 30px;

  left: 30px;

  right: 30px;

  font-size: 12px;

  color: #999999;

  line-height: 12px;

}

.banner-content{

  position: relative;

  width: 960px;

  height: 100%;

  margin: 0 auto;

}

.banner-content--bd{

  position: absolute;

  top: 93px;

  left: 0;

}

.banner-content--bd .banner-title{

  font-size: 48px;

  color: #ffffff;

  line-height: 48px;

  margin-bottom: 18px;

}

.banner-content--bd .banner-desc{

  font-size: 14px;

  color: #ffffff;

  color: rgba(255, 255, 255, .8);

  line-height: 24px;

  margin-bottom: 40px;

}

.banner-content--bd .order{

  display: block;

  width: 178px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  background: #ff395d;

  border-radius: 4px;

  font-weight: bolder;

  font-size: 18px;

  color: #ffffff;

}

@media only screen and (-moz-min-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {

  .advantage-list .experience{

    background:  50% 50% no-repeat;

    background-size: contain;

  }

  .advantage-list .team{

    background:  50% 50% no-repeat;

    background-size: contain;

  }

  .advantage-list .creative-icon{

    background:  50% 50% no-repeat;

    background-size: contain;

  }

}