/*
  author: 黄兰
  desc：向心力案例征集页面
  time: 2019-08-27
 */
 html,body,ul,ol,li,div,p,a,span,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp,a {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
 ul,ol,menu {list-style: none}
 p,a {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
 /* 顶部菜单 */
#header{
  width:100%;
  height:80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index:100;
  display: block;
  margin:0 auto;
}
.header-white{
  background:rgba(255,255,255,1);
}
.header-black{
  background:rgba(51,51,51,1);
}
#header img {
  width: 126px;
  height: 40px;
  float:left;
  margin: 20px 20px 20px 60px;
}
.header-title{
  height:41px;
  float:left;
  margin: 20px 0px;
}
.header-white-title{
  color:rgba(51,51,51,1);
}
.header-black-title{
  color:rgba(255,255,255,1);
}
#header .header-title div:nth-child(1){
  font-size:18px;
  height:18px;
}
#header .header-title div:nth-child(2){
  font-size:14px;
  height:14px;
  line-height:42px;
}
#header ul{
  position: fixed;
  right:0px;
  padding-right:30px;
  height:80px;
}
#header ul li a {
  font-size:16px;
  font-weight:normal;
  color: inherit;
  text-decoration: none;
  display: block
}
.default{
  color: #999999;
  list-style: none;
  cursor: pointer;
  height: 27px;
  margin-right:16px;
  margin-top: 32px;
  display: inline-block
}
/* 锚点活动样式 */
.active{
  border-bottom: 2px #E50213 solid;
  color:rgba(229,2,19,1);
  font-weight: bold;
}
#wrapper{
  width:100%;
  margin-top:80px;
  z-index:50;
}
.location{
  position: fixed;
  display: none;
  width:50px;
  height:101px;
  right: 0;
  bottom: 180px;
  z-index:100;
  border-radius:2px;
  box-shadow:-1px 11px 116px 1px rgba(153,153,153,1);
}
.location-top{
  width:50px;
  height:50px;
  background:#FFFFFF;
  
  z-index:100;
  font-size:14px;
  font-weight:bold;
  cursor: pointer;
}
.location-top .location-top-style1{
  padding-top:5px
}
.location-top .location-top-style{
  margin-left:11px;
  font-size:14px;
  color:rgba(51,51,51,1)
}
.location-top:hover{
  background:rgba(229,2,19,1);
  border-radius:2px 2px 0px 0px;
  color:rgba(254,254,254,1);
}
.location-top:hover .location-top-style{
  color:rgba(254,254,254,1);
}
.location-bo{
  width:50px;
  height:50px;
  background:#FFFFFF;
  color:rgba(51,51,51,1);
  cursor: pointer;
}
.location-bo-style{
  margin-left:11px;
  padding-top:11px;
  font-size:14px;
  font-weight:bold;
  line-height:20px;
}
.location-bo-style2{
  margin-left:19px;
  margin-bottom:5px;
  width:12px;
  height:7px;
  margin-top:3px;
  background: url(../img/Force/bo.png) no-repeat;
}
.location-bo:hover{
  background:rgba(229,2,19,1);
  color:rgba(255,255,255,1);
}
.location-bo:hover .location-bo-style2{
  background: url(../img/Force/bo-white.png) no-repeat;
}
/* 活动简介 */
.one{
  height:850px;
  width:100%;
  padding-top:70px;
  position: relative;
}
.one-backg{
  width:86.25%;
  height:663px;
  background:rgba(255,255,255,1);
  position: absolute;
  z-index:-10;
}
.one-left{
  z-index:30
}
.one-left .one-left-img{
  margin-left:21%;
  margin-top:60px;
}
.one-left .one-right-img{
  width: 126px;
  height: 40px;
  margin-top: 60px;
  margin-right: 20%;
}
.one-left ul{
  /* width:598px; */
  width:33.5%;
  margin-left:16.75%;
  margin-top:33px;
  font-size:22px;
  list-style:none;
}
.one-left ul li{
  font-weight:500;
  line-height: 42px;
}
.one-ul-img1{
  margin-right:10px;
}
.one-ul-img2{
  margin-bottom: -5px;
}
.one-left ul li span{
  color:#E50213;
}
.one-right{
  width:43%;
  margin-top:33px;
  background:rgba(225,225,225,1);
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.1); 
}
@media screen and (max-width: 1300px) {
  html {
    zoom: 0.6
  }
}
@media screen and (max-width: 1400px) {
  html {
    zoom: 0.7
  }
}
@media screen and (max-width: 1600px) {
  html {
    zoom: 0.8
  }
}

/* 案例展示 */
.two{
  padding-top:40px
}
.case-main{
  list-style:none;
  padding-inline-start: 0;
  margin-top:60px;
}
.is-right{
  margin-right:0px
}
.case-main .swiper-wrapper .swiper-slide img{
  width:285px;
  height:160px;
}
.case-main-item .anli-title{
  font-size: 18px;
  text-align: left;
  width:284px;
  font-weight:500;
  color:rgba(46,46,46,1);
  line-height: 27px;
  margin: 20px auto;
}
.case-main-item{
  cursor: pointer;
}
.case-main-item:hover .anli-title{
  color:#E50213;
}
.img-left{
  margin-right:10px;
  cursor: pointer;
  width:20px;
  height:30px;
  background: url(../img/Force/left-h.png) no-repeat;
}
.img-left:hover{
  background: url(../img/Force/left-o.png) no-repeat;
}
.img-right{
  cursor: pointer;
  margin-left:10px;
  width:20px;
  height:30px;
  background: url(../img/Force/right-n.png) no-repeat;
}
.img-right:hover,.img-right:active{
  background: url(../img/Force/right-h.png) no-repeat;
}
/* 专家评委 */
.expert{
  background: url(../img/Force/back-zhuanjia.png) no-repeat;
  background-position: center;
}
.three{
  width:1280px;
  margin:auto;
  text-align:center;
  padding-top:109px;
}
.expert-main{
  list-style:none;
  padding-inline-start: 0;
  margin-top:60px;
}
.expert-main .expert-main-item{
  width:248px;
  text-align: center;
}
.expert-main .expert-main-item img{
  width:180px;
  height:180px;
  background:rgba(222,222,222,1);
  border-radius:50%;
}
.expert-main .expert-main-item .three-content-name{
  font-size:30px;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:31px;
  margin-top:19px;
  margin-bottom: 20px;
  display: block
}
.expert-main .three-content-title{  
  margin-top:10px; 
  font-size:12px; 
  color:rgba(153,153,153,1); 
  line-height:18px;
  margin-bottom:20px;
}
.img-left2{
  cursor: pointer;
  width:20px;
  height:30px;
  background: url(../img/Force/left-h.png) no-repeat;
}
.img-left2:hover,.img-left2:active{
  background: url(../img/Force/left-o.png) no-repeat;
}
.img-right2{
  cursor: pointer;
  width:20px;
  height:30px;
  background: url(../img/Force/right-n.png) no-repeat;
}
.img-right2:hover,.img-right2:active{
  background: url(../img/Force/right-h.png) no-repeat;
}
/* 活动回报 */
.four{
  padding-top:70px
}
.activity {
  position: relative;
  z-index:-10
}
.center-outside{
  position:absolute;
  width:530px;
  height:530px;
  background:rgba(255,255,255,0);
  border:3px solid rgba(226, 226, 226, 0.27);
  border-radius:50%;
  top:100px;
  left:375px;
}
.center-inside{
  width:276px;
  height:276px;
  /* background:rgba(255,255,255,0); */
  /* box-shadow:0px 5px 59px 0px rgba(229,2,19,0.06);
  background:url(../img/Force/yuan-b.png) no-repeat; */
  border-radius:50%;
  position:absolute;
  top:127px;
  left:127px;
  animation: breathing 1s alternate infinite;
}
@keyframes breathing {
  from {
    box-shadow: 0px 5px 59px 0px rgba(255,255,255,1);
    background:url(../img/Force/yuan-b.png) no-repeat;
  }
  
  to {
    background:url(../img/Force/yuan-h.png) no-repeat;
    box-shadow:0px 5px 59px 0px rgba(229,2,19,0.06);
  }
}
.center-inside img{
  width:126px;
  height:40px;
  position:absolute;
  top:118px;
  left:75px
}
.activity-main{
  margin-top:98px;
  z-index:30;
  /* -webkit-animation: circle 1s linear .5s; */
}
.activity-commen{
  width:415px;
  /* height:154px; */
  background:rgba(255,255,255,1);
  box-shadow:0px 5px 59px 0px rgba(229,2,19,0.06);
  border-radius:10px;
  padding-bottom:20px;
}
.activity-commen:nth-child(1){
  text-align: left;
}
.activity-commen:nth-child(2){
  margin-left:316px;
  text-align: right
}
.activity-commen:nth-child(3){
  margin-top:216px;
  text-align: left
}
.activity-commen:nth-child(4){
  margin-left:316px;
  margin-top:216px;
  text-align: right
}
.activity-commen-content-one{
  width:293px;
  height:100%;
  padding-left:5px
}
.activity-commen-content-two{
  width:265px;
  height:100%;
  /* padding-right:20px; */
  margin-left:30px
}
.activity-commen-content-three{
  width:282px;
  height:100%;
  padding-left:20px;
}
.activity-commen-content-four{
  width:250px;
  height:100%;
  /* padding-right:20px; */
  margin-left:30px
}
.theme-img{
  margin-left:20px;
  margin-top:53px;
}
.share-img{
  margin-left:20px;
  margin-top:54px;
}
.book-img{
  margin-left:20px;
  margin-top:54px;
}
.honor-img{
  margin-left:20px;
  margin-top:52px;
}
.partition-line{
  width:60px;
  height:2px;
  background:rgba(229,2,19,1);
}
.partition-line-right2{
  margin-left:203px;
}
.partition-line-right4{
  margin-left:190px;
}
.activity-desc{
  /* height:69px; */
  font-size:14px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:27px;
  margin-top:10px
}
.activity-desc-one{
  width:280px;
}
.activity-desc-three{
  width:252px;
}
.activity-title{
  font-size:24px;
  font-weight:500;
  color:rgba(46,46,46,1);
  line-height:54px;
  height:46px;
}
/* 活动流程 */
.activity-flow{
  width:100%;
  height:auto;
  background: url(../img/Force/activity-background.png) no-repeat;
  background-position: center;
  margin-top:150px;
  position: relative;
}
.line{
  width:100%;
  height:2px;
  background:rgba(229,2,19,1);
  position:absolute;
  top:255px;
}
.five{
  padding-top:40px;
  width:1280px;
  margin:auto;
  text-align:center
}
.pack-content{
  margin-top:10px;
}
.pack-top{
  background: url(../img/Force/shape.png) no-repeat;
  width:190px;
  height:180px;
  text-align: left;
  margin-top: -225px;
  position: relative;
  padding-left: 20px;
}
.pack-bottom{
  background: url(../img/Force/shape-bottom.png) no-repeat;
  width:190px;
  height:180px;
  text-align: left;
  margin-top:162px;
  padding-left: 20px;
  position: relative;
}
.pack-time{
  height:15px;
  font-size:16px;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height:32px;
  margin-top: 75px;
}
.pack-title{
  height:18px;
  font-size:18px;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height:32px;
  margin-top:10px;
  width:360px;
}
.pack-top img{
  width:18px;
  height:18px;
  background:rgba(255,255,255,1);
  border-radius:50%;
  position: absolute;
  right: 0px;
  bottom: -15px;
}
.pack-bottom img{
  width:18px;
  height:18px;
  background:rgba(255,255,255,1);
  border-radius:50%;
  position: absolute;
  right: 0px;
  top: -15px;
}
/* 案例报名 */
.six{
  padding-top:110px
}
.form{
  /* width:995px; */
  /* height:710px; */
  background:rgba(255,255,255,1);
  box-shadow:-1px 11px 116px 1px rgba(153,153,153,0.1);
  padding:59px 105px 68px 100px;
}
.form-header{
  text-align: left
}
.form-header img{
  width:146px;
  height:46px
}
.form-header .form-header-desc{
  margin-top:26px;
  height:53px;
  font-size:24px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
}
.form-left{
  width:50%;
  text-align: left;
  padding-top:38px;
}
.form-left-title{
  width:100%;
  border-left: 2px solid #E50213;
  margin-top:30px;
  padding-left:13px;
}
.form-left-title span{
  height:20px;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:24px;
  font-size:20px;
}
.form-left-desc{
  width:450px;
  height:257px;
  font-size:18px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
  margin-top:25px
}
.form-right{
  width:50%;
  height:593px;
  text-align: left;
  position: relative;
}
.form-right-title{
  height:20px;
  font-size:20px;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:27px;
  text-align: right;
  padding-top:69px;
  margin-bottom:40px
}
.form-right-content{
  width:450px;
  height:340px;
  text-align: left;
  position: absolute;
  right:0;
}
.form-right-item{
  margin-top:28px;
  margin-bottom: 28px;
}
.form-right-item img{
  width:22px;
  height:18px;
}
.form-right-item span{
  width:424px;
  margin-left:20px;
  font-size:20px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
}
.form-right-bottom{
  width:450px;
  height:60px;
  background:rgba(229,2,19,1);
  border-radius:30px;
  text-align: center;
  margin-top:30px;
  display: block;
  font-size:28px;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height: 60px
}
.form-right-bottom:hover{
  box-shadow:0px 10px 24px 8px rgba(229,2,19,0.18);
}
/* 同期活动 */
.seven{
  padding-top:120px
}
.synchronized{
  margin-top:60px;
  width:100%;
}
.synchronized a{
  width:100%
}
.synchronized img{
  width:100%;
}
/* 联系我们 */
.eight{
  padding-top:120px
}
.contact{
  margin-top:59px
}
.contact-item{
  width:585px;
  height:200px;
  border:1px solid rgba(153,153,153,1);
}
.contact-item:nth-child(1){
  margin-right:31px;
}
.contact-img{
  float:left;
  margin:17px 77px 15px 18px;
}
.contact-right{
  float:left;
  text-align: left;
  font-weight:500;
  font-size:24px;
  color:rgba(51,51,51,1);
  line-height:30px;
  margin-top:3px
}
.contact-right p{
  margin: 1.5rem 0;
}
/* 底部 */
#footer{
  width:100%;
  height:80px;
  background:rgba(51,51,51,1);
  margin-top:150px;
}
#footer .footer-left-img{
  width:126px;
  height:40px;
  margin: 20px 20px 20px 0px;
}
#footer .footer-right-img{
  width:196px;
  margin:20px 0px 20px 20px;
}
/* 公用class */
body{
  font-family:PingFang SC;
  background: #F8F8F8;
}
a{
  text-decoration:none;
}
/* 不超过两行 */
.text-tow-line{ 
  text-overflow: -o-ellipsis-lastline; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  line-clamp: 2; 
  -webkit-box-orient: vertical;
}
/* 不超过一行 */
.text-one-line{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 横向换行 */
.horizontal-break{ 
  display: flex;
  flex-flow:row wrap;
  align-items:flex-start;
}
/* 横向换行居中 */
.horizontal-break-center{ 
  display: flex;
  /* flex-direction 决定主轴的方向 row(默认)|row-reverse|column|column-reverse*/
  /* flex-direction: row; */

  /* flex-wrap决定当排列不下时是否换行以及换行的方式,nowrap(默认)|wrap|wrap-reverse */
  /* flex-wrap:wrap; */

  /* flex-flow是lex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行 */
  flex-flow:row wrap;

  /* !当主轴沿水平方向时!justify-content,决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around */
  justify-content:center;
  /* !主轴水平时!决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch */
  align-items:center;
}
.horizontal-break-wide{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
/* 主体 */
.content{
  width:1280px;
  margin:auto;
  text-align:center
}
.packing{
  display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
  align-items: center;
}
/* 加载中 */
.loading {
  background: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000
}
.spinner {
  margin: 200px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #ccc;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}