/* banner start */
#banner{
	background-image:url('../images/index/banner_bg.jpg');
	width:100%;
	height:640px;
	background-size:cover;
	position:relative;
	overflow:hidden;
	background-attachment:fixed;
}
#banner h1,#banner h2,#banner h3,#banner h4{
	color:#FFF;
	font-weight:100;
	text-align:center;
}
#banner .bg{
	background-color: #136af0;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
    opacity:0.8;
}
@-webkit-keyframes spaceInUp {
  0% {
	opacity: 0;
	-webkit-transform-origin: 50% 0%;
	-webkit-transform: scale(0) translate(0, -300%);
  }

  100% {
	opacity: 1;
	-webkit-transform-origin: 50% 0%;
	-webkit-transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
	opacity: 0;
	transform-origin: 50% 0%;
	transform: scale(0) translate(0, -300%);
  }

  100% {
	opacity: 1;
	transform-origin: 50% 0%;
	transform: scale(1) translate(0%, 0%);
  }
}
@-webkit-keyframes vanishIn {
  0% {
	opacity: 0;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(2, 2);
	-webkit-filter: blur(90px);
	filter: blur(90px);
  }

  100% {
	opacity: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1, 1);
	-webkit-filter: blur(0px);
	filter: blur(0px);
  }
}
@keyframes vanishIn {
  0% {
	opacity: 0;
	transform-origin: 50% 50%;
	transform: scale(2, 2);
	filter: blur(90px);
  }

  100% {
	opacity: 1;
	transform-origin: 50% 50%;
	transform: scale(1, 1);
	filter: blur(0px);
  }
}
#banner h1{
	font-size:36px;
	margin-top:145px;
    position:relative;
    z-index:2;
	animation-name: spaceInUp;
}
#banner h2{
	font-size:16px;
	margin-top:26px;
    line-height:30px;
	animation-name: spaceInUp;
    position:relative;
    z-index:2;
}
#banner h3{
	font-size:24px;
	margin-top:15px;
	animation-name: spaceInUp;
}
#banner h4{
	width:200px;
	height:50px;
	line-height:50px;
	color:#FFF;
	text-align:center;
	font-size:16px;
	margin:120px auto 0;
	cursor:pointer;
    position:relative;
    z-index:2;
	animation-name: vanishIn;
    border:1px solid #FFF;
    border-radius:50px;
}
#banner .next{
    background-image: url(../images/index/jz-index-next.png);
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 3;
    background-size: 100% 100%;
    left: 50%;
    margin-left: -15px;
    bottom: 30px;
}
#banner h4:hover{
	box-shadow:0 0 5px 0 #1c7ef2;
	/* background-color: #3399ff; */
	background-color: #fff;
	color:#1c7ef2;
}
#banner h4:active{
	background-color: #fff;
	color:#3c8dee;
}
/* banner end */
/* course start */
#course{
	position:relative;
	overflow:hidden;
	width:100%;
	height:720px;
   
}
#course .bg{
    width: 100%;
    background-position: 0 bottom;
    height: 720px;
    background-size: 100% auto;
    left: 0;
    background-repeat: no-repeat;
    right: 0;
    top: -100px;
    background-image: url(../images/index/2-bg.png);
    position: absolute;
    z-index:-1;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
#course .center-icon{
    overflow: hidden;
    margin: 60px auto 0;
    text-align: center;
}
#course .center-icon img{
    width: 166px;
    margin: 0 auto;
    display: block;
}
#course .center-icon i{
    font-size: 14px;
    display: block;
    margin: 0 auto;
}
#course .title{
	font-size:36px;
	color:#333;
	text-align:center;
	font-weight:100;
	margin-top:60px;
}
#course .subhead{
	color:#656565;
	font-size:16px;
	text-align:center;
	margin-top:10px;
}
#course .dot{
	width:1100px;
	/* overflow:hidden; */
	margin:215px auto 0;
	display:table;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
}
#course .dot .ceil{
	float:left;
	width:33.33%;
	text-align:center;
	position:relative;
	height:280px;
	top:170px;
	opacity:0;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
}
#course .dot .ceil .front{
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}
#course .dot .ceil .back{
	position: absolute;
	left: -50px;
	top: -50px;
	width: 300px;
	height: 300px;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
#course .dot .ceil .front,#course .dot .ceil .back{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
}
#course .dot .ceil:hover .back{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

#course .dot .ceil:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#course .dot .ceil .back .text{
	color: #FFF;
	text-align: center;
	width: 100%!important;
	margin-top: 85px;
}
#course .dot .ceil.c1 .back .text{

}
#course .dot .ceil.c2 .back .text{
	margin-top:70px;
}
#course .dot .ceil.c2 .front{
	left:89px;
}
#course .dot .ceil.c2 .back{
	left:38px;
}
#course .dot .ceil.c3 .front{
	left:172px;
}
#course .dot .ceil.c3 .back{
	left:122px;
}
#course .dot .ceil.c3 .back .text{
	margin-top:90px;
}
#course .dot .ceil .back .text i{
	line-height: 30px;
}
#course .dot .ceil .back img{
	width: 100%;
}
#course .dot .ceil.c1{
    margin-top:-100px;
    text-align:left;
}
#course .dot .ceil.c1 .text,#course .dot .ceil.c2 .text,#course .dot .ceil.c3 .text{
    width:200px;
}
#course .dot .ceil.c3{
    margin-top:-100px;
    text-align:right;
}
#course .dot .ceil.c3 .text{
    right:0;
}
#course .dot .ceil.c2{
    margin-top: -52px;
    height: 280px;
}
#course .dot .ceil .text{
	position:absolute;
	line-height:126px;
	text-align:center;
	width:100%;
	font-size:18px;
	color:#3399ff;
	opacity:1;
}
#course .dot .ceil .text p{
    font-size: 48px;
    line-height: 1;
    margin-top: 60px;
}
#course .dot .ceil .text i{
    font-size: 16px;
    line-height: 1;
    display: block;
    margin-top: 3px;
}
/* course end */
/* capacity start */
#capacity{
	width: 100%;
    height: 720px;
    background-image: url(../images/index/jz-index-channel-mapbg.png);
    background-size: 87% auto;
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
}
#capacity .bg{
    background-color: #136af0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0.77;
}
#capacity .pb_title,#capacity .pb_subhead{
    position:relative;
    z-index:1;
    color:#FFF;
}
#capacity .title{
	font-size:36px;
	color:#333;
	text-align:center;
	font-weight:100;
	margin-top:60px;
    position:relative;
    z-index:1;
}
#capacity .subhead{
	color:#656565;
	font-size:16px;
	text-align:center;
	margin-top:10px;
    position:relative;
    z-index:1;
}
#capacity .box{
	width:1200px;
	margin:80px auto 0;
	position:relative;
    z-index:1;
}
#capacity ul{
	width:100%;
	text-align:center;
}
#capacity li{
	display:inline-block;
	overflow:hidden;
	background-color:#FFF;
	width:260px;
	height:200px;
    margin:0 15px;
	border:1px solid #e7e7e7;
	position:relative;
}
#capacity li img{
    width: 190px;
    margin-top: 60px;
}
#capacity svg{
	position: absolute;
	z-index: 2;
	right: 38px;
	top: -120px;
}
/* capacity end */
/* cases start */
#cases{
    width: 100%;
    height: 720px;
    position: relative;
    overflow: hidden;
}
#cases .pb_title,#case .pb_subhead{
    color:#000;
}
#cases ul{
    width:1160px;
    overflow:hidden;
    margin:100px auto 30px;
    padding:10px;
}
#cases ul li{
    width:285px;
    height:160px;
    float:left;
    box-sizing:border-box;
    border:1px solid #f3eff2;
}
#cases ul li img{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    opacity:.6;
    width: 190px;
    margin: 33px auto 0;
    display: block;
}
#cases ul li:hover{
    box-shadow:0 0 10px 0 #a9d8ff;
}
#cases ul li:hover img{
    -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%);
    opacity:1;
}
#cases .more{
	width: 200px;
	margin:0 auto 100px;
	text-align:center;
}
#cases .more i{
	width: 20px;
	height: 20px;
	display:inline-block;
	border-radius: 100%;
	background-color: #78797b;
	margin:0 15px;
}
#cases .more .d_1{
	background-color: #dfdfdf;
}
#cases .more .d_2{
	background-color: #ececec;
}
#cases .more .d_3{
	background-color: #f2f2f2;
}
/* cases end */