/* CSS Document */
*{margin:0; padding:0; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Arial, Microsoft YaHei; touch-action: pan-y; -webkit-box-sizing: border-box;    -moz-box-sizing: border-box; box-sizing: border-box;}
a{ color:#333; text-decoration:none;}
ul, ol{list-style-type:none;}
img{border:0; max-width:100%;  vertical-align: middle;}
input, textarea,select, button{outline:medium; blr:expression(this.onFocus=this.blur());}
body{ overflow:hidden !important;}
.clear{ clear:both;}

/***************侧导航************/
#fp-nav ul li, .fp-slidesNav ul li{ margin:16px 6px; width:14px; height:14px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{ border:2px solid #fff;     width: 10px;  height: 10px; top:0; left:0;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{ background:#fff; margin:0;}

.container{ width:1300px; margin:0 auto; display: table;}

.header{ height:110px; position:fixed; width:100%; left:0; top:0; z-index:9999; transition: all 0.3s ease-out;}
.header .logo{ float:left; height:110px; line-height:110px;}
.header .nav{ float:right; padding-top:20px;}
.header .nav li{ margin-left:50px; float:left;}
.header .nav li > a{ display:inline-block; line-height:58px; position:relative; color:#fff; font-size:16px;}
.header .nav li > a i{ display:inline-block; width:0px; height:2px; background:#fff; position:absolute; left:0; bottom:0; transition: all 0.3s ease-out;}
.header .nav li.on > a i, .header .nav li:hover > a i{ width:100%;}

.header.on{ background:#fff; height:90px; box-shadow: 0 0 10px rgba(0,0,0,.16);}
.header.on .logo{ height:90px; line-height:90px;}
.header.on .logo img{ height:60px;}
.header.on .nav{ padding-top:15px;}
.header.on .nav li > a{ color:#333;}
.header.on .nav li > a i{ background:#333;}

.banner{ height:100%; width:100%;}
.banner .swiper-container{ height:100%; width:100%;}
.banner .swiper-slide{ display:table;}
.banner .text{ text-align:center; color:#fff; display:table-cell; vertical-align: middle;}
.banner .text .p1{ font-size:2.2vw; transition: all 2s ease; transform: translateY(50px); opacity:0;}
.banner .text .p2{ font-size:5.7vw; font-weight:bold; transition: all 2s ease; transform: translateY(50px); opacity:0;}
.banner .text .p3{ font-size:1.8vw; margin-top:20px; transition: all 2s ease; transform: translateY(50px); opacity:0;}
.banner .text .p3 span{ display:inline-block; padding:10px 40px; border:2px solid #8bfbff; border-radius:20px;}

.banner .swiper-slide-active .p1{ transform: translateY(0px); opacity:1;  transition-delay: 0.5s; }
.banner .swiper-slide-active .p2{ transform: translateY(0px); opacity:1; transition-delay: 0.7s;}
.banner .swiper-slide-active .p3{ transform: translateY(0px); opacity:1; transition-delay: 0.9s;}
.banner .swiper-pagination-bullet{ width:35px; height:10px; background:#fff; border-radius:10px; margin:0 8px !important;}

.index-title{ text-align:center; color:#fff; opacity:0; position:relative; transform: translateY(-150px); transition: all 2s ease; padding-top: 50px;}
.index-title .line{ display:inline-block; width:60px; height:5px; background:#fff;}
.index-title .title{ font-size:30px; font-weight:bold; margin:20px 0 6px;}
.index-title .text{ font-size:18px;}
.section.active .index-title{ opacity:1; transform: translateY(0px);}

.box-two{ background:#f3f3f3; z-index: 5;}
.box-four{ background:#f3f3f3; z-index: 3;}
.box-two .index-title, .box-four .index-title{ color:#8ec31f;}
.box-two .index-title .line, .box-four .index-title .line{ background:#8ec31f;}
.box-two .index-title .text, .box-four .index-title .text{ color:#333;}

.case-list{ margin-top:40px;}
.case-list li{ width:300px; float:left;  margin-right:33px; transition: all 2s ease; opacity:0; position:relative; transform: translateY(-150px);}
.case-list li a{ display:inline-block; width:100%; height:100%; box-shadow:-3px -3px 5px rgba(178,178,178,.22); background:#fff; transition: all 0.3s ease-out;}
.case-list li:hover a{  margin-top:-20px;}
.case-list li:last-child{ margin-right:0;}
.case-list li .icon{ height:100px; width:100%; text-align:center; line-height:100px; margin-top:60px;}
.case-list li .text{ margin-top:30px; font-size:14px; color:#757575; line-height:22px; text-indent:2em; padding:0 30px; height:290px; text-align:justify;}
.case-list li .title{ font-size:22px; background:#333; width:100%; height:60px; line-height:60px; text-align:center; font-weight:bold; color:#fff;}
.case-list li:hover .title{ background:#155784;}
.case-list li .icon1{ background:url(../images/case-icon1.png) no-repeat center;}
.case-list li .icon2{ background:url(../images/case-icon2.png) no-repeat center;}
.case-list li .icon3{ background:url(../images/case-icon3.png) no-repeat center;}
.case-list li .icon4{ background:url(../images/case-icon4.png) no-repeat center;}
.case-list li:hover .icon1{ background:url(../images/case-icon1-2.png) no-repeat center;}
.case-list li:hover .icon2{ background:url(../images/case-icon2-2.png) no-repeat center;}
.case-list li:hover .icon3{ background:url(../images/case-icon3-2.png) no-repeat center;}
.case-list li:hover .icon4{ background:url(../images/case-icon4-2.png) no-repeat center;}

.section.active .case-list li:nth-child(1){ opacity:1; transform: translateY(0px); transition-delay: 0.4s;}
.section.active .case-list li:nth-child(2){ opacity:1; transform: translateY(0px); transition-delay: 0.6s;}
.section.active .case-list li:nth-child(3){ opacity:1; transform: translateY(0px); transition-delay: 0.8s;}
.section.active .case-list li:nth-child(4){ opacity:1; transform: translateY(0px); transition-delay: 1s;}

.box-three{ background:url(../images/box3-bg.jpg) no-repeat center; background-size:cover; z-index: 4;}
.yy-list{ margin-top:40px;}
.yy-list li{ overflow:hidden; margin-top:40px;}
.yy-list li .img{ width:50%; float:left; height:250px; overflow:hidden; transition: all 2s ease; opacity:0; position:relative; transform: translateX(-150px);}
.yy-list li .img img{ transition: all 0.3s ease-out; width:650px; height:250px }
.yy-list li:hover .img img{  transform: scale(1.1,1.1);}
.yy-list li .text{ float:right; width: 46.155%; opacity:0; position:relative; transform: translateX(150px); transition: all 2s ease;}
.yy-list li .text .title{ font-size:22px; color:#fff; padding-left:15px; position:relative; margin-top:10px;}
.yy-list li .text .title i{ position:absolute; display:inline-block; width:2px; background:#8ec31f; height:24px; left:0; top:50%; transform: translateY(-50%);}
.yy-list li .text .p{ font-size:14px; color:#fff; line-height:22px; text-indent:2em; text-overflow: ellipsis; display: -webkit-inline-box;    -webkit-line-clamp: 5;    -webkit-box-orient: vertical;    overflow: hidden; text-align:justify; height:110px; margin-top:25px;}
.yy-list li .text .btns{ text-align:right; margin-top:16px;}
.yy-list li .text .btns span{ display:inline-block; width:100px; height:35px; line-height:35px; text-align:center; font-size:14px; color:#8ec31f; background:#fff;}
.yy-list li .text .btns span:hover{ background:#8ec31f; color:#fff;}
.yy-list li:nth-child(2n) .img{ float:right; opacity:0; position:relative; transform: translateX(150px);}
.yy-list li:nth-child(2n) .text{ float:left; opacity:0; position:relative; transform: translateX(-150px);}

.section.active .yy-list li .img{ opacity:1; transform: translateX(0px); transition-delay: 0.6s;}
.section.active .yy-list li .text{ opacity:1; transform: translateY(0px); transition-delay: 0.6s;}
.section.active .yy-list li:nth-child(2n) .img{ opacity:1; transform: translateX(0px); transition-delay: 0.8s;}
.section.active .yy-list li:nth-child(2n) .text{ opacity:1; transform: translateY(0px); transition-delay: 0.8s;}

.date-list{ margin-top:40px;}
.date-list li{ width:33.3333%; float:left; box-shadow:3px 3px 5px rgba(178,178,178,.22); transition: all 2s ease; opacity:0; position:relative; transform: translateY(-150px);}
.date-list li:nth-child(2n){ box-shadow:-3px -3px 5px rgba(178,178,178,.22);}
.date-list li .img{ width:100%; height:260px; overflow:hidden;}
.date-list li .img img{ transition: all 0.3s ease-out; width:100%;}
.date-list li:hover .img img{  transform: scale(1.1,1.1);}
.date-list li .text{ background:#fff; height:260px;}
.date-list li .text .title{ font-size:24px; color:#155784; font-weight:bold; text-align:center; padding-top:50px;}
.date-list li .text .p{ padding:0 35px; font-size:14px; color:#757575; line-height:24px; text-indent:2em; margin-top:20px;}

.section.active .date-list li:nth-child(1){ opacity:1; transform: translateY(0px); transition-delay: 0.4s;}
.section.active .date-list li:nth-child(2){ opacity:1; transform: translateY(0px); transition-delay: 0.6s;}
.section.active .date-list li:nth-child(3){ opacity:1; transform: translateY(0px); transition-delay: 0.8s;}

.box-five{ background:url(../images/box5-bg.jpg) no-repeat center; background-size:cover; z-index: 2;}
.news-box{ margin:40px -20px 0;}
.news-box .box, .news-box .box3{ width:50%; float:left; padding:0 20px; transition: all 2s ease; opacity:0; position:relative; transform: translateY(-150px);}
.news-box .box .img { height:295px; overflow:hidden }
.news-box .box2{ width:100%; overflow:hidden; float:left;}
.news-box .box2:last-child{ margin:40px -20px 0; width: 106.4%;}
.news-box .text{ background:#fff; padding:30px;}
.news-box .text .title{ font-size:18px; font-weight:bold; color:#333; text-overflow: ellipsis; display: -webkit-inline-box;    -webkit-line-clamp: 1;    -webkit-box-orient: vertical;    overflow: hidden;}
.news-box .text .p{ font-size:14px; color:#757575; line-height:24px; margin:10px 0 25px; text-overflow: ellipsis; display: -webkit-inline-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden; height:72px;}
.news-box .text .date{ font-size:14px; color:#333; line-height:35px; padding-top:20px; border-top:1px dashed #c9c9c9;}
.news-box .text .date span{ color:#8ec31f; float:right;}
.news-box .box3:hover .title{ color:#155784;}
.news-box .box:first-child:hover .title{ color:#155784;}
.news-box .box2:first-child:hover .title{ color:#155784;}
.news-box .text .date span:hover{ text-decoration:underline;}

.news-box .btns{ text-align:center;}
.news-box .btns a{ display:inline-block; width:220px; height:45px; line-height:45px; background:#fff; color:#8ec31f; font-size:16px; margin-top:20px;}
.news-box .btns a:hover{ background:#8ec31f; color:#fff;}

.section.active .news-box .box, .section.active .news-box .box3{ opacity:1; transform: translateY(0px); transition-delay: 0.4s;}

/*-------- 底部 --------------*/
.box-six{ height: 380px !important;}
.box-six .fp-tableCell { display: block !important; height: 380px !important;}
.footer{ width:auto; height:380px; margin:0 auto; background:#f3f3f3; position:relative; overflow:hidden;}
.footer_box{ width:1100px; height:300px; margin:30px auto 0; overflow:hidden; background:url(../images/footer.png) center top no-repeat;}
.footer_1{ width:1100px; height:220px; margin:0 auto; overflow:hidden;}
.footer_z{ width:560px; height:220px; float:left;}
.footer_z_1{ width:560px; height:40px; float:left;}
.footer_z_1 ul{ width:560px; height:40px; float:left;}
.footer_z_1 ul li{ width:100px; height:40px; float:left; margin-right:40px; background:url(../images/footer_1.png) left bottom no-repeat;}
.footer_z_1 ul li a{ font-size:16px; color:#313131; line-height:40px; text-align:left; display:block;}
.footer_z_1 ul li a:hover{ text-decoration:none;}
.footer_z_2{ width:560px; height:180px; float:left;}
.footer_z_2 ul{ width:100px; height:180px; float:left; margin-right:40px;}
.footer_z_2 ul li{ width:100px; height:auto; float:left;}
.footer_z_2 ul li a{ font-size:12px; color:#707070; text-align:left; display:block; line-height:30px;}
.footer_z_2 ul li a:hover{ text-decoration:none;}
.footer_y{ width:540px; height:220px; float:left; overflow:hidden;}
.footer_y_1{ width:170px; height:220px; float:left; margin-right:40px;}
.footer_y_1_1{ width:100px; height:40px; float:left; background:url(../images/footer_1.png) left bottom no-repeat;}
.footer_y_1_1 a{ font-size:16px; color:#313131; line-height:40px; text-align:left; display:block;}
.footer_y_1_1 a:hover{ text-decoration:none;}
.footer_y_1_2{ width:170px; height:180px; float:left;}
.footer_y_1_2 p{ font-size:12px; color:#707070; text-align:left; line-height:30px;}
.footer_y_1_2 ul{ width:170px; height:180px; float:left;}
.footer_y_1_2 ul li{ width:170px; height:auto; float:left;}
.footer_y_1_2 ul li a{ font-size:12px; color:#707070; text-align:left; display:block; line-height:30px;}
.footer_y_1_2 ul li a:hover{ text-decoration:none;}
.footer_y_2{ width:120px; height:220px; float:left;}
.footer_y_2 p{ font-size:12px; color:#707070; text-align:center; line-height:30px;}
.footer_y_2 img{ width:108px; height:108px; text-align:center; margin:10px auto 0 ;}
.footer_2{ width:1100px; height:80px; float:left;}
.footer_2_1{ width:1100px; height:40px; float:left; background:url(../images/footer_1.png) left bottom no-repeat;}
.footer_2_1 p{ font-size:16px; color:#313131; line-height:40px; text-align:left;}
.footer_2_1 p span{ color:#7d7d7d;}
.footer_2_2{ width:1100px; height:40px; float:left;}
.footer_2_2 ul{ width:1100px; height:40px; float:left;}
.footer_2_2 ul li{ width:auto; height:40px; float:left; margin-left:20px;}
.footer_2_2 ul li a{ font-size:12px; color:#313131; line-height:40px; text-align:left; display:block;}
.footer_2_2 ul li a:hover{ text-decoration:none;}
.footer_3{ width:auto; height:45px; margin:0 auto; background:#e0e0e0; overflow:hidden;}
.footer_3_1{ width:1200px; height:45px; margin:0 auto;}
.footer_3_1 p{ font-size:12px; color:#313131; line-height:45px; text-align:center;}
.footer_3_1 a{ font-size:12px; color:#313131; line-height:45px;}
.footer_3_1 a:hover{ text-decoration:none;}