﻿

.celar{
	clear: both;
}

/* 幻灯片 */

.banner-container{
  max-width: 768px;
  margin: 0px auto;
}




.swipslider {
  position: relative;
  overflow: hidden;
  display: block;
  padding-top: 47%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .swipslider .sw-slides {
    display: block;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    position: absolute;
    bottom: 0; }
  .swipslider .sw-slide {
    width: 100%;
    height: 100%;
    margin: auto;
    display: inline-block;
    position: relative; }
    .swipslider .sw-slide > img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              width: 100%;
      max-height: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
    .swipslider .sw-slide .sw-content {
      width: 100%;
      height: 100%;
      margin-left: 0;
      margin-right: 0;
      font-size: 14px; }

.sw-next-prev {
  font-family: "Courier New", Courier, monospace;
  height: 30px;
  width: 30px;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  line-height: 30px;
  font-size: 20px;
  font-weight: bolder;
  color: rgba(160, 160, 160, 0.53);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50%;
  text-decoration: none;
  transition: all .2s ease-out;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .sw-next-prev:hover {
    background-color: rgba(255, 255, 255, 0.534); }
  .sw-next-prev:active {
    background-color: rgba(255, 255, 255, 0.5); }

.sw-prev {
  left: 1%; }
  .sw-prev::after {
    content: '<'; }

.sw-next {
  right: 1%; }
  .sw-next::after {
    content: '>'; }

.sw-bullet {
  position: absolute;
  bottom: 2%;
  list-style: none;
  display: block;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0; }
  .sw-bullet li {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all .2s ease-out; }
    .sw-bullet li:hover {
      background-color: rgba(255, 255, 255, 0.74); }
    .sw-bullet li.active {
      background-color: rgba(255, 103, 1, 0.73);
      box-shadow: 0 0 2px rgba(160, 160, 160, 0.53); }
    .sw-bullet li:not(:last-child) {
      margin-right: 5px; }





/* 四大优势 */

.screen-1{
  max-width: 768px;
  height: auto;
  min-width: 320px;
  margin: 0px auto;
  overflow: hidden;
  background: #fff;
  border-bottom: solid 1px #ece7e7;
}

.screen-1 ul li{
  float: left;
  width: 25%;
  margin: 23px 0 23px 0px ;
  text-align: center;

}

.screen-1 ul li span{
  color: #36bce7;
  text-align: center;
  display: inline-block;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0px 0px 10px 0px
}
.screen-1 ul li h3{
  font-size: 1em;
  color:#969595;
  line-height: 1em;
  font-family: "pfzt";
}

/* tab图 */


.screen-2{
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #ebebeb;
}
.screen-2-wrap{
	width: 100%;
	height: auto;
}
.screen-2-wrap>h3{
	font-size: 1.1rem;
	color: #494444;
	padding-left: 20px;
	line-height: 2rem;
	padding-top: 1rem;
}
.screen-2-wrap>h4{
	font-size:0.8rem;
	color: #494444;
	padding-left: 20px;
	line-height: 1rem;
	padding-bottom: 1rem;
	border-bottom: solid 1px #07459d;
}
	.cpzx-xj-wrap-content {
		width: 100%;
		height: auto;
		position: relative;
		margin:10px auto;
	}

	.cpzx-xj-wrap-content-list{
		overflow: hidden;
		zoom: 1; border-bottom: none;
		z-index: 110;
		background: #ebebeb;
		height: auto;
		width: 100%;
		display: block;
	 /*   border-top: solid 1px #d1d1d1;
		border-left: solid 1px #d1d1d1; */
		border-bottom: solid 5px #425280;
	}


	.cpzx-xj-wrap-content-list ul li {
		float: left;
		color: #000;
		
		cursor: pointer;
		line-height: 49px;
		width: 33%;
		text-align: center;
		font-size: 14px;
		border-radius: 5px;
		-webkit-webkit-transition:all ease-in 0.4s;
		-moz-webkit-transition:all ease-in 0.4s;
		-ms-webkit-transition:all ease-in 0.4s;
		-o-webkit-transition:all ease-in 0.4s;
		webkit-transition: all ease-in 0.4s;
		transition: all ease-in 0.4s;
	/*    border-right: solid 1px #d1d1d1;
		border-bottom: solid 2px #d1d1d1; */
	}
	.cpzx-xj-wrap-content-list ul li a {
		color: #000;
		display: inline-block;
		    width: 100%;
	}
	

	.cpzx-xj-wrap-content-list ul .cpzx-xj-wrap-content-list-current {
		color: #f54343;
		background: #425280;
		/* border-bottom: solid 2px #f54144; */
		
	}

	.cpzx-xj-wrap-content-list ul .cpzx-xj-wrap-content-list-current a {
		color: #fff;
	}
	.cpzx-xj-wrap-content-list-item{
		display: none;
		-webkit-webkit-transition:all ease-in 0.4s;
		-moz-webkit-transition:all ease-in 0.4s;
		-ms-webkit-transition:all ease-in 0.4s;
		-o-webkit-transition:all ease-in 0.4s;
		webkit-transition: all ease-in 0.4s;
		transition: all ease-in 0.4s;

	}



	.cpzx-xj-wrap-content-list-tab{
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.cpzx-xj-wrap-content-list-item-page{
		width: 100%;
		height: auto;
		padding-top: 12px;
		position: relative;
		background: #fff;
		overflow: hidden;
		border-top: 1px solid #ddd;
		padding-bottom: 10px;
		margin-bottom: 100px;
	}

	.cpzx-xj-wrap-content-list-item-page ul li{
		float: left;
		width: 46%;
		position: relative;
		border: solid 1px #f7efef;
		overflow: hidden;
		margin:2% 2%;
		display: grid;
		place-items: center;
	}

 .cpzx-xj-wrap-content-list-item-page ul li .page-btn{
	 display: inline-block;
	 width: 100%;
	 height: 100%;
 }

/* 内容 */


	.cpzx-xgcp-wrap-list-c img{
		width: 100%;
		height: auto;
	}


	:root {
	  --d: 700ms;
	  --e: cubic-bezier(0.19, 1, 0.22, 1);
	  --font-sans: 'Rubik', sans-serif;
	  --font-serif: 'Cardo', serif;
	}
	

	
	
	.card {
	  position: relative;

	  -webkit-box-align: end;
	  align-items: flex-end;
	  overflow: hidden;
	  padding: 2.1rem 0;
	  width: 100%;
	  text-align: center;
	  color: whitesmoke;
	  background-color: whitesmoke;
	  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
	}
	
	
	.card:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-size: cover;
	  background-position: 0 0;
	  -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
	  transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
	  transition: transform calc(var(--d) * 1.5) var(--e);
	  transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e);
	  pointer-events: none;
	}
	.card:after {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 200%;
	  pointer-events: none;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79)));
	  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
	  -webkit-transform: translateY(-50%);
	   transform: translateY(-50%);
	  -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
	  transition: -webkit-transform calc(var(--d) * 2) var(--e);
	  transition: transform calc(var(--d) * 2) var(--e);
	  transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e);
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(1) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(1) .card:before{
	   background: url(../image/ftdcrlb.png) no-repeat center top;
	   background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(1) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(2) .card:before{
	  background: url(../image/ytdcrlb.png) no-repeat center top;
	  background-size: cover;
	}
	
	.cpzx-xj-wrap-content-list-item:nth-of-type(2) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(1) .card:before{
	  background: url(../image/ytdc.jpg) no-repeat center top;
	   background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(2) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(2) .card:before{
	  background: url(../image/ftdc.jpg) no-repeat center top;
	   background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(2) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(3) .card:before{
	  background: url(../image/crdc.jpg) no-repeat center top;
	   background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(3) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(1) .card:before{
	  background: url(../image/ytcsbrlb.png) no-repeat center top;
	  background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(3) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(2) .card:before{
	  background: url(../image/crcsb.png) no-repeat center top;
	  background-size: cover;
	}
	
	
	.cpzx-xj-wrap-content-list-item:nth-of-type(4) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(1) .card:before{
	  background: url(../image/dtb.png) no-repeat center top;
	  background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(4) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(2) .card:before{
	  background: url(../image/kbllj.png) no-repeat center top;
	  background-size: cover;background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(4) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(3) .card:before{
	  background: url(../image/pzllj.png) no-repeat center top;
	  background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(4) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(4) .card:before{
	  background: url(../image/xxlljzx.jpg) no-repeat center top;
	  background-size: cover;
	}
	.cpzx-xj-wrap-content-list-item:nth-of-type(4) .cpzx-xj-wrap-content-list-item-page ul li:nth-of-type(5) .card:before{
	  background: url(../image/vzlljzx.jpg) no-repeat center top;
	  background-size: cover;
	}
	
	.content {
	  position: relative;
	  display: -webkit-box;
	  display: flex;
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
	          flex-direction: column;
	  -webkit-box-align: center;
	          align-items: center;
	  width: 100%;
	  padding: 0rem 0.4rem;
	  -webkit-transition: -webkit-transform var(--d) var(--e);
	  transition: -webkit-transform var(--d) var(--e);
	  transition: transform var(--d) var(--e);
	  transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
	  z-index: 1;
	}
	.content > * + * {
	  margin-top: 1rem;
	}
	.title {
	  font-size: 1rem;
	  font-weight: bold;
	  line-height: 1.2;
	  color: #FFF;

	  
	}
	
	.copy {
	  font-family: var(--font-serif);
	  font-size: 0.8rem;
	  font-style: normal;
	  line-height: 1rem;
	  margin:0;
	  color: #fff;
	  padding-top: 0.7rem;
	}
	
	.btn {
	  cursor: pointer;
	  margin-top: 1.5rem;
	  padding: 0.6rem 1.2rem;
	  font-size: 0.6rem;
	  font-weight: bold;
	  letter-spacing: 0.025rem;
	  border-radius: 5px;
	  text-transform: uppercase;
	  color: white;
	  background-color: #00244B;
	  border: none;
	  
	}
	.btn:hover {
	  background-color: #00244B;
	}
	.btn:focus {
	  outline: none;
	  outline-offset: 3px;
	}
	
	@media (hover: hover) and (min-width: 600px) {
	  .card:after {
	    -webkit-transform: translateY(0);
	            transform: translateY(0);
	  }
	
	  .content {
	    -webkit-transform: translateY(calc(100% - 4.5rem));
	            transform: translateY(calc(100% - 4.5rem));
	  }
	  .content > *:not(.title) {
	    opacity: 0;
	    -webkit-transform: translateY(1rem);
	            transform: translateY(1rem);
	    -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
	    transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
	    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
	    transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
	  }
	
	  .card:hover,
	  .card:focus-within {
	    -webkit-box-align: center;
	            align-items: center;
	  }
	  .card:hover:before,
	  .card:focus-within:before {
	    -webkit-transform: translateY(-4%);
	            transform: translateY(-4%);
	  }
	  .card:hover:after,
	  .card:focus-within:after {
	    -webkit-transform: translateY(-50%);
	            transform: translateY(-50%);
	  }
	  .card:hover .content,
	  .card:focus-within .content {
	    -webkit-transform: translateY(0);
	            transform: translateY(0);
	  }
	  .card:hover .content > *:not(.title),
	  .card:focus-within .content > *:not(.title) {
	    opacity: 1;
	    -webkit-transform: translateY(0);
	            transform: translateY(0);
	    -webkit-transition-delay: calc(var(--d) / 8);
	            transition-delay: calc(var(--d) / 8);
	  }
	
	  .card:focus-within:before, .card:focus-within:after,
	  .card:focus-within .content,
	  .card:focus-within .content > *:not(.title) {
	    -webkit-transition-duration: 0s;
	            transition-duration: 0s;
	  }
	}
	