@charset "utf-8";
/*================重置样式部分===============*/
html,
body,
div,
span,
object,
iframe,
table,
tr,
th,
td,
em,
img,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
dl,
dt,
dd,
ul,
li,
ol,
form,
label {
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
}
body {
  color: #000;
  font-family: 微软雅黑;
  font-size: 20px;
}
input,
select {
  font-size: 12px;
  line-height: 16px;
}
img {
  border: none;
}
a {
  text-decoration: none;
}
ul,
li,ol {
  list-style-type: none;
}
.zt_body img{ vertical-align: bottom}
em,i{ font-style:normal}
.p_hide{ overflow:hidden}
.clearfix{ clear: both}
.text_c{ text-align: center}
.text_l{ text-align: left}
.patb30{ padding: 30px 0}
.patb40{ padding: 40px 0}
.pa20{ padding: 20px}
.font28{ font-size: 28px}
.font24{ font-size: 24px}
.col_white{ color: #fff}
.line30{line-height: 30px}
.line35{line-height: 35px}
.line40{line-height: 40px}
.mb40{ margin-bottom: 40px}
.pat30{ padding-top: 30px}
.p_pr{ position: relative}
.p_fl{ float: left}
.p_fr{ float: right}
.col_yel{ color: #fcc83e}
.col_blue{ color: #32598e}
.mb150{ margin-bottom: 150px}
.mb50{ margin-bottom: 50px}
.p_block{ display: block}

.wi{ width: 1200px}
.auto{ margin: 0 auto}

.ml10{ margin-left: 10px}



.bg_pic{ background: url("../images/bg.jpg") no-repeat top center #050107}
.bg_pic1{ background: url("../images/pic_15.jpg") no-repeat top center}
.bg_pic2{ background: url("../images/bg_pic1.jpg") repeat center}
.bg_pic3{ background: url("../images/bg_pic2.jpg") repeat top}
.bg_pic4{ background: url("../images/bg_pic3.jpg") repeat top}
.bg_yel{ background: url("../images/p3_tab1.jpg") no-repeat left center #fcc83e}
.bg_blue{ background: #2f588f}
.bg_pink{ background: #b2568e}

.shou_ico{ display: inline-block; width: 27px; height: 27px; background: url("../images/shou_ico.png") no-repeat; vertical-align: middle}

.btn_click {
  cursor: pointer;
  padding: 1em;
  position: relative;
  overflow: hidden;
  color: #000;
  padding: 10px 50px;
  display: inline-block;
  border-radius: 50px;
  background: #ffc426;
  font-size: 24px;
}
.btn_click a{ display: block; color: #000}

.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 870px;
  background: url("../images/banner.jpg") no-repeat center top;
}
.banner .wi{ height: 870px;}
.banner img{ position: absolute; right: -400px; top:121px; opacity: 0}
.banner a{ display: block; width: 165px; height: 159px;background: url("../images/ban_btn.png") no-repeat; position: absolute; bottom:50px; right: 70px;
  -webkit-animation: rubberBand 3s infinite linear;
  -moz-animation: rubberBand 3s infinite linear;
  -o-animation: rubberBand 3s infinite linear;
  -ms-animation: rubberBand 3s infinite linear;
  animation: rubberBand 3s infinite linear; z-index: 3 }
.banner em{
  display:block;position: absolute; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 1px 2px rgba(255,255,255,0.8); bottom:55px; right: 80px;z-index: 2; opacity: 0; -webkit-animation: halo 2s 1s infinite ease-out; -moz-animation: halo 2s 1s infinite ease-out; animation: halo 2s 1s infinite ease-out;
}


.ti h3{ display: inline-block; height: 97px; background: url("../images/ti_bg.png") no-repeat center; line-height: 90px; font-size: 52px; font-weight: normal; padding: 0 80px}
.ti1 h3{ display: inline-block; height: 97px; background: url("../images/ti_bg1.png") no-repeat center; line-height: 90px; font-size: 52px; font-weight: normal; padding: 0 80px}
.ti2{ animation: flip 1s;  -webkit-animation: flip 1s;-moz-animation: flip 1s;-ms-animation: flip 1s;}


.p2 .con{ width: 1000px; height: 500px; border: 1px solid #fff}
.p2 .con p{ width: 500px; height: 300px; line-height: 50px; background: rgba(0,0,0,0.9); position: absolute; right: -500px; top:0; bottom: 0; margin:  auto 0; opacity: 0; padding: 20px}
.p2 .con p em{ font-size: 26px; color: #ffc426;}
.p2 .con img{ position: absolute; top:-140px; left: -300px; opacity: 0}
.p2 .con i{ display: block;background: #fff;}
.p2 .con i.aniX{
  animation: borderX 0.5s linear 1s forwards; -webkit-animation: borderX 0.5s linear 1s forwards;
  -o-animation: borderX 0.5s linear 1s forwards;
}
.p2 .con i.aniY{
  animation: borderY 0.5s linear 1.5s forwards; -webkit-animation: borderY 0.5s linear 1.5s forwards;
  -o-animation: borderY 0.5s linear 1.5s forwards;
}
.p2 .con .b1{  width:0; height: 2px; background: #fff; position: absolute; top: 10px; left: 10px;  }
.p2 .con .b2{ width:2px; height: 0; background: #fff; position: absolute; top: 10px; right: 10px;  }
.p2 .con .b3{ width:0; height: 2px; background: #fff; position: absolute; bottom: 10px; right: 10px;  }
.p2 .con .b4{ width:2px; height: 0; background: #fff; position: absolute; bottom: 10px; left: 10px;  }


.p3 ol span{ display: block; width: 243px; height: 383px; background: url("../images/p3_ti_bg.jpg") no-repeat center; padding: 80px 0 0; position: absolute; left: 0; right: 0; margin: 0 auto}
.p3 .prev,.p3 .next{ position: absolute; z-index: 9999;bottom:50px; cursor: pointer; width: 31px;height: 35px}
.p3 .prev{ left: 20px; background: url("../images/prev_btn.png") no-repeat}
.p3 .next{ right:20px; background: url("../images/next_btn.png") no-repeat}

.p3 ol{ width: 1000px;}
.p3 ol li{ float: left; border-top: 4px solid #2f588f;border-right: 4px solid #2f588f;border-left: 4px solid #2f588f; position: relative}
.p3 ol li.on:before{content: ""; width: 370px; height: 475px; background: rgba(255,255,255,0.5); position: absolute; top: 0; left:0}
.p3 ol li.i2{ float: right; border-top: 4px solid #b2568e;border-right: 4px solid #b2568e;border-left: 4px solid #b2568e}
.p3 ol li i{ display: block; padding: 10px; width: 30px; position: absolute;  top: -4px }
.p3 ol li.i1 i{left: -50px;}
.p3 ol li.i2 i{ right: -50px;}


.p3 .con{ width: 100%; height: 1024px; overflow: hidden}
.p3 .con ul{ position: absolute; left: 0; right: 0; width: 100%}
.p3 .con ul li{ float: left;}
.p3 .tro1{ width: 100%}
.p3 .tro1 span{ width: 561px; display: block}
.p3 .tro1 .anli_pic{ position: absolute; right: 0; bottom: -30px}
.p3 .tro2{ height: 246px}
.p3 .tro2 a{ color: #2e568b; }
.p3 .tro2 span a{display: inline-block; padding: 10px; border: 1px solid #2e568b; border-radius: 50px}
.p3 .tro2 dl a{ float: left; position: relative}
.p3 .tro2 dl i{ display: block; background: rgba(0,0,0,0.5); height: 60px; line-height: 60px; position: absolute; top:100px; left: 0; width: 100%; color: #fff}



.p4_con .control .left{ top:180px; left:30px; width:87px; height:87px; border-radius: 50%; background:url(../images/p4_prev.png) no-repeat center #dcdcdc; z-index: 4}
.p4_con .control .right{ top:180px; right:30px; width:87px; height:87px; border-radius: 50%; background:url(../images/p4_next.png) no-repeat center #dcdcdc;z-index: 4}

.p4_con{ overflow:hidden;width:1170px; margin:50px auto 0; position:relative;}
.p4_con .pic{ width:1170px; height:570px;}
.p4_con .pic ul li{ background:#000;list-style:none; width:0; height:0; position:absolute; top:225px; left:585px;}
.p4_con .pic ul li img{ width:100%; height:100%; opacity:1;}
.p4_con .pic .l1{ width:684px; height:562px; left:250px; top:0; z-index:2;}
.p4_con .pic .l2{ width:540px; height:444px; left:670px; top:40px; z-index:1;}
.p4_con .pic .l0{  width:540px; height:444px; left:0; top:40px;z-index:1;}
.p4_con .pic .l3{ width:300px; height:246px; left:1000px; top:90px; z-index:0;}
.p4_con .pic .l4{ width:300px; height:246px; left:-230px; top:90px; z-index:0;}
.p4_con .pic .l2 img{ opacity:.5}
.p4_con .pic .l0 img{ opacity:.5}
.p4_con .control img{ position:absolute;}


.p5 .p5_con{ width: 1366px}
.p5 .con{ width: 100%; height: 589px;  background: url("../images/pic_19.jpg") no-repeat top center}
.p5 .con ol{ padding:0 0 }
.p5 .con ol li{ width: 225px; height: 589px;display: inline-block; }
.p5 .con ul{ position: absolute; left: 0; top:275px; color: #fff}
.p5 .con ul li{ width: 240px; float: left; background: rgba(47,118,197,0.7); padding: 30px; font-size: 18px; line-height: 35px; position: absolute;top: 0; left: 0; display: none}
.p5 .con ul li h3{ font-size: 30px;}
.p5 .con ul li i{ font-size: 22px; padding: 10px 0; border-bottom: 1px solid #fff; display: block; margin-bottom: 20px}
.p5 .con ul li.i1{ left: 0}
.p5 .con ul li.i2{ left: 200px}
.p5 .con ul li.i3{ left: 500px;display: block}
.p5 .con ul li.i4{ left: 700px}
.p5 .con ul li.i5{ left: 937px}
.p5 .con ul li.i6{ left: 1065px}
.p5 .con ul li.i7{ left: 1093px}
.p5 .con ul li.i8{ left: 1093px}


.p5 .con ol li {width: 184px;height: 589px;display: inline-block;}
.p5 .con ol li:nth-of-type(1) {width: 168px;}
.p5 .con ol li:nth-of-type(2) {width: 160px;}
.p5 .con ol li:nth-of-type(3) {width: 160px;}
.p5 .con ol li:nth-of-type(5) {width: 160px;}
.p5 .con ol li:nth-of-type(6) {width: 160px;}
.p5 .con ol li:nth-of-type(7) {width: 160px;}
.p5 .con ol li:nth-of-type(8) {width: 160px;}
.p5 .con ul li.i7 {left: 0px;}
.p5 .con ul li.i1 {left: 150px;}
.p5 .con ul li.i2 {left: 320px;}

.p6 .con ul li{ width:336px; height: 498px; position: relative; display: inline-block; margin-right: 20px;}
.p6 .con ul li:nth-last-child(1){ margin-right: 0}
.p6 .con ul li .box{ position: absolute; bottom:0; left: 0}
.p6 .con ul li span{  display: block; position: absolute; top:-300px; opacity: 0; left: 0; background: rgba(0,0,0,0.5); width: 296px; height: 478px; padding: 10px 20px; font-size: 22px;  }
.p6 .con ul li span img{ border-radius: 50%}
.p6 .con ul li:hover span{ top:0; opacity: 1;
  -webkit-animation: bounceY 0.9s linear;
  -moz-animation: bounceY 0.9s linear;
  -ms-animation: bounceY 0.9s linear;
  animation: bounceY 0.9s linear; }
.p6 .con ul li span a{ display: inline-block;border: 1px solid #fff; font-size: 22px; color: #fff; border-radius: 50px; position: absolute; bottom:30px; left: 0; right: 0; width: 150px; line-height: 60px; margin: 0 auto}



@-moz-keyframes borderX{
  0%	 {width:0px; opacity:1;}
  100% {width:980px; opacity:1;}
}
@-ms-keyframes borderX{
  0%	 {width:0px; opacity:1;}
  100% {width:980px; opacity:1;}
}
@-o-keyframes borderX{
  0%	 {width:0px; opacity:1;}
  100% {width:980px; opacity:1;}
}
@-webkit-keyframes borderX{
  0%	 {width:0px; opacity:1;}
  100% {width:980px; opacity:1;}
}
@keyframes borderX{
  0%	 {width:0px; opacity:1;}
  100% {width:980px; opacity:1;}
}

@-moz-keyframes borderY{
  0%	 {height:0px; opacity:1;}
  100% {height:480px; opacity:1;}
}
@-ms-keyframes borderY{
  0%	 {height:0px; opacity:1;}
  100% {height:480px; opacity:1;}
}
@-o-keyframes borderY{
  0%	 {height:0px; opacity:1;}
  100% {height:480px; opacity:1;}
}
@-webkit-keyframes borderY{
  0%	 {height:0px; opacity:1;}
  100% {height:480px; opacity:1;}
}
@keyframes borderY{
  0%	 {height:0px; opacity:1;}
  100% {height:480px; opacity:1;}
}


@-webkit-keyframes rubberBand {
  from { -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1); }
  to { -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes halo { 0% { opacity: 0;-webkit-transform: scale(0.1); }
  50% {opacity: 1; }
  100%{opacity: 0;-webkit-transform: scale(1.2); } }
@-moz-keyframes halo {0% { opacity: 0; -moz-transform: scale(0.1); }
  50% { opacity: 1; }
  100%{ opacity: 0; -moz-transform: scale(1.2); } }
@-ms-keyframes halo {0% { opacity: 0; }
  50% { opacity: 1; }
  100%{opacity: 0; } }
@-o-keyframes halo {0% { opacity: 0; -o-transform: scale(0.1); }
  50% {opacity: 1; }
  100%{ opacity: 0;-o-transform: scale(1.2); } }
@keyframes halo {0% { opacity: 0; transform: scale(0.1); }
  50% {opacity: 1; }
  100%{opacity: 0;transform: scale(1.2); } }

@keyframes bounceY {
  0% { transform: translateY(-205px);}
  40% { transform: translateY(-100px);}
  65% { transform: translateY(-52px);}
  82% { transform: translateY(-25px);}
  92% { transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
  0% { -moz-transform: translateY(-205px);}
  40% { -moz-transform: translateY(-100px);}
  65% { -moz-transform: translateY(-52px);}
  82% { -moz-transform: translateY(-25px);}
  92% { -moz-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
  0% { -webkit-transform: translateY(-205px);}
  40% { -webkit-transform: translateY(-100px);}
  65% { -webkit-transform: translateY(-52px);}
  82% { -webkit-transform: translateY(-25px);}
  92% { -webkit-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}


@keyframes flip {
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-webkit-keyframes flip {
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-moz-keyframes flip {
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}