@charset "utf-8";

.z_classcp_container .z_active,.z_classcp_container .all_s {
  float: left
}

.z_classcp_container .all_s a {
  display: block;
  color: #fff;
  width: 70px;
  background: #ff0000;
  border-radius: 30px;
  line-height: 32px;
  height: 32px;
  text-align: center;
  position: relative;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease
}

.z_classcp_container .z_active a {
  color: #ff0000
}

.z_classcp_container .all_s a:hover {
  color: #fff;
  background: #ff0000
}

.classcp_list {
  margin-left: 202px
}

.classcp_list_c {
  width: 93%
}

.classcp_list_d {
  width: 93%;
  padding-left: 40px
}

.class_icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 32px;
  margin: 0 10px 20px;
  overflow: hidden
}

.class_icon i {
  display: block;
  width: 10px;
  height: 2px;
  margin: 14px 0 0;
  background: #ccc;
  overflow: hidden
}

.z_common-width_pro {
  max-width: 1820px;
  margin: 0 auto
}

.z_classcp_container {
  margin: 40px 0;
  position: relative;
  padding-left: 6px
}

.z_classcp_container span {
  display: block;
  float: left;
  height: 32px;
  padding-right: 24px;
  line-height: 32px;
  padding-left: 46px;
  margin-right: 28px;
  color: #fff
}

.z_classcp_container ul {
}

.z_classcp_container ul li {
  float: left
}

.z_classcp_container ul li a {
  display: block;
  color: #333;
  width: 110px;
  line-height: 32px;
  height: 32px;
  text-align: left;
  position: relative;
  margin-left: 37px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease
}

.z_classcp_container ul li a:hover {
  color: #ff0000
}

.z_classcp_container ul>li {
  width: 139px;
  position: relative;
  margin-bottom: 20px
}

.z_classcp_lx span {
  background: url(../images/z_lx_w.png) 25px center no-repeat #65686a
}

.z_classcp_lx ul li:last-child a:after {
  border: 0
}

.z_classcp_hy span {
  background: url(../images/z_hy_w.png) 25px center no-repeat #65686a
}

.z_classcp_hy ul li:last-child a:after {
  border: 0
}

.z_classcp_sx span {
  background: url(../images/z_sx_w.png) 25px center no-repeat #65686a
}

.z_classcp_sx ul li {
  width: 13px;
  height: 12px;
  float: left;
  position: relative;
  -webkit-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  -ms-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  transition: all .5s ease-in;
  cursor: pointer;
  margin: 9px 11px 0 0!important
}

.z_classcp_sx ul li:after {
  content: '';
  display: block;
  border: 1px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
  left: 25px;
  top: -15px;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in
}

.z_classcp_sx ul li:hover:after,.z_classcp_sx ul li.z_active:after {
  border-color: #ff0000;
  width: 21px;
  height: 20px;
  left: -5px;
  top: -5px
}

.z_classcp_sx ul li:nth-child(1) {
  background: #f15246
}

.z_classcp_sx ul li:nth-child(2) {
  background: #ffa626
}

.z_classcp_sx ul li:nth-child(3) {
  background: #ede73d
}

.z_classcp_sx ul li:nth-child(4) {
  background: #2cbf51
}

.z_classcp_sx ul li:nth-child(5) {
  background: #3ac2ce
}

.z_classcp_sx ul li:nth-child(6) {
  background: #3574e6
}

.z_classcp_sx ul li:nth-child(7) {
  background: #803cd9
}

.z_classcp_sx ul li:nth-child(8) {
  background: #cc62c6
}

.z_classcp_sx ul li:nth-child(9) {
  background: #fff
}

.z_classcp_sx ul li:nth-child(10) {
  background: #e6e6e6
}

.z_classcp_sx ul li:nth-child(11) {
  background: #000
}

.z_classcp_sx ul li:nth-child(12) {
  background: #7b4611
}

.z_case li {
  float: left;
  width: 30.76923%;
  margin-right: 1.84615%;
  text-align: center;
 /* margin-bottom: 80px;*/
  margin-bottom: 20px;
  cursor: pointer
}

.z_case li:nth-child(3n) {
  margin-right: 0
}

.z_case li:hover .z_case_img_det {
  height: 100%;
  top: 0;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  left: 0
}

.z_case li:hover .z_case_title h2,.z_case li:hover .z_case_title p {
  color: #ff0000
}

li:nth-child(2n) .z_case_img .z_case_img_det {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 100%;
  top: 100%
}

li:nth-child(2n):hover .z_case_img .z_case_img_det {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  left: 0;
  top: 0
}

li:nth-child(3n) .z_case_img .z_case_img_det {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  left: 100%
}

li:nth-child(3n):hover .z_case_img .z_case_img_det {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  left: 0;
  top: 0
}

.z_case_img {
  position: relative;
  overflow: hidden
}

.z_case_img img {
  width: 100%;
  height: auto
}

.z_case_img_det {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left: -100%;
  overflow: hidden;
  top: 0;
  padding-right: 60px;
  padding-left: 60px;
  box-sizing: border-box;
  color: #fff;
  background: rgba(255,0,0,.95);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}

.z_case_img_det img {
  margin: 50px auto 20px;
  display: block;
  max-width: 168px
}

.z_case_img_det h2 {
  font-size: 18px;
  line-height: 36px;
  border-bottom: 2px solid #fff;
  padding-bottom: 9px
}

.z_case_img_det p {
  font-size: 13px;
  line-height: 24px;
  margin-top: 19px
}

@media(min-width:768px) and (max-width:1800px) {
  .z_case_img_det p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .z_case_img_det span {
    margin-top: 15px!important
  }

  .z_case_img_det img {
    margin-top: 30px
  }
  .z_common-width_pro{
    width: 100%;
  }
  .z_case li{
    width: 32%;
  }
}

.z_case_img_det span {
  font-size: 12px;
  display: inline-block;
  margin: 27px auto;
  padding-left: 25px;
  background: url(../images/z_case_eye.png) left center no-repeat;
  color: #fff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease
}

.z_case_img_det span:hover {
  border: 1px solid #fff;
  padding: 5px 5px 5px 30px;
  background: url(../images/z_case_eye.png) 5px center no-repeat
}

.z_case_title h2 {
  font-size: 15px;
  color: #333;
  line-height: 1;
  margin-top: 18px;
  margin-bottom: 6px
}

.z_case_title p {
  font-size: 13px;
  color: #666;
  line-height: 20px
}

.z_case_loading,.z_case_nomore {
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
  position: relative;
  margin: 28px auto 130px!important
}

.z_case_loading:after,.z_case_loading:before,.z_case_nomore:after {
  content: '';
  display: block;
  position: absolute;
  left: 52%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}

.z_case_loading:before {
  width: 130px;
  height: 30px;
  background: #fff
}

.z_case_loading:after {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: url("../images/z_loading.png") center center/100% 100% no-repeat #ffffff;
  -webkit-animation: row .8s linear 0s infinite;
  -o-animation: row .8s linear 0s infinite;
  animation: row .8s linear 0s infinite
}

.z_case_nomore:after {
  width: 220px;
  height: 87px;
  background: url(../images/z_nomore.png) center center no-repeat #fff
}

@media screen and (max-width:1250px) {
  .z_classcp_container {
    left: 0
  }

  .z_case_img_det p {
    display: none
  }

  .z_case_loading {
    margin: 80px auto
  }

  .z_case_nomore {
    margin: 50px auto
  }
}

@media screen and (min-width:769px) and (max-width:995px) {
  .z_classcp ul {
    left: 0
  }

  .z_case ul li {
    width: 48%;
    margin-right: 4%
  }

  .z_case ul li:nth-child(2n) {
    margin-right: 0
  }

  .z_case ul li:nth-child(2n+1) {
    margin-right: 4%
  }

  .z_case_loading {
    margin: 80px auto
  }

  .z_case_nomore {
    margin: 50px auto
  }
  

}

.wap_case_menu {
  display: none
}
@media(max-width:768px) {
  .z_classcp {
    display: none
  }

  .wap_case_menu {
    display: block;
    padding: .35rem 0 .35rem .5rem;
    background: #eceeed
  }

  .wap_case_menu span {
    display: block;
    float: left;
    width: 2rem;
    border-radius: 5px;
    margin-right: .2rem;
    overflow: hidden;
    font-size: 14px;
    color: #363636
  }

  .wap_case_menu span a {
    display: block;
    height: 30px;
    background: #ddd;
    text-align: center;
    line-height: 30px;
    color: #363636
  }

  .wap_case_menu .cson {
    background: #ff0000;
    color: #fff
  }

  .z_classcp_container {
    left: 0
  }

  .z_classcp_container li span {
    font-size: 16px;
    margin-bottom: 10px
  }

  .z_classcp_container li ul li a {
    font-size: 16px
  }

  .z_classcp_container .z_classcp_sx ul li {
    width: 16px;
    height: 16px
  }

  .z_classcp_container .z_classcp_sx ul li:hover:after,.z_classcp_container .z_classcp_sx ul .z_active:after {
    left: -6px;
    top: -5px;
    width: 25px;
    height: 25px
  }

  .z_case ul {
    width: 100%;/*width: 95%;*/
    margin: 0 auto
  }

  .z_case ul li {
    width: 100%;
    margin-bottom: 12px
  }

  .z_case ul li .z_case_img_det {
    padding: 15px;
    width: 100%
  }

  .z_case ul li .z_case_img_det img {
    margin-top: 10px
  }

  .z_case ul li .z_case_img_det p {
    display: none
  }

  .z_case_loading {
    margin: 80px auto
  }

  .z_case_nomore {
    margin: 50px auto
  }
}
@media screen and (min-width:768px) and (max-width:799px) {
     #page a,#page span {
  padding: 7px 14px;
  display: inline-block;
  background: #ebebeb;
  color: #666;
  margin:4px 2px
 } 
}
@media screen and (min-width:800px) and (max-width:920px) {
     #page a,#page span {
  padding: 7px 14px;
  display: inline-block;
  background: #ebebeb;
  color: #666;
  margin:4px 2px
 } 
}
@media(max-width:519px) {
      #page {
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (min-width:520px) and (max-width:768px) {    
  #page {
  text-align: center;
  margin-bottom: 100px;
 }
 #page a,#page span {
  padding: 7px 14px;
  display: inline-block;
  background: #ebebeb;
  color: #666;
  margin:2px
 }  
}
.content .content_left{margin-bottom: 0px;}