#fp-nav li a:before{display: block; width: 40px; font-size: 13px; color: #fff; font-weight: 100; position: absolute; top: 0; left: 0; margin: 0 0 0 -40px; opacity: 0; transition: all ease .4s; -webkit-transition: all ease .4s}
#fp-nav li:nth-child(1) a:before{content: "首页"}
#fp-nav li:nth-child(2) a:before{content: "产品"}
#fp-nav li:nth-child(3) a:before{content: "简介"}
#fp-nav li:nth-child(4) a:before{content: "展示"}
#fp-nav li:nth-child(5) a:before{content: "动态"}
#fp-nav li:nth-child(6) a:before{content: "联系"}

#fp-nav li a.active:before{opacity: 1}

#fp-nav li:before{content: ""; display: block; width: 1px; height: 20px; background: #fff; position: absolute; top: 0; left: 0; margin: 18px 0 0 6px;}
#fp-nav li:last-child:before{display: none}

.tran{transition: all 1s ease .6s; -webkit-transition: all 1s ease .6s}
.tran1{transition: all 1s ease .9s; -webkit-transition: all 1s ease .9s}
.tran2{transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s}

.section{position: relative; overflow: hidden}

.title{margin-bottom: 30px; position: relative}
.title .title_left{width: 30%;}
.title .title_left h1{font-size: 22px; color: #fffefe; margin-bottom: 2px;}
.title .title_left h1 i{font-size: 14px; color: #7c7c7c; font-style: normal; padding-left: 6px; font-family: 'Montserrat-Light'}

.title .title_right{width: 60%; text-align: right}
.title .title_right a{display: inline-block; padding: 6px 16px; margin-left: 10px; font-size: 14px; color: #a1a1a1; transition: all ease .4s; -webkit-transition: all ease .4s}
.title .title_right a.on{background: #01499b; color: #fff;}
.title .title_right a:hover{background: #01499b; color: #fff;}

.a_link{position: relative; width: 120px;  padding: 10px 0; margin-top: 20px; text-align: center; border: 1px solid #999;}
.a_link:before{content: ""; display: block; width: 0; height: 100%; background: #fff; position: absolute; top: 0; left: 0; transition: all ease .4s; -webkit-transition: all ease .4s }
.a_link i{position: relative; font-size: 13px; color: #999; font-style: normal; font-family: 'novecentowide-book'; transition: all ease .4s; -webkit-transition: all ease .4s; z-index: 2}
.a_link:hover:before{width: 100%;}
.a_link:hover i{color: #999;}


/*----section01----*/
.banner{width: 100%; height: 100%; position: relative}
.banner .swiper-slide{width: 100%; height: 100%}
.banner .img{width: 100%; height: 100%; background-position: center; background-size: cover}

.banner .video-js{width: 100%; height: 100%}
.banner .swiper-slide video{width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; object-fit:cover;}
.banner .my-video .mask{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../image/makr_bg.png) repeat;}

.banner .swiper-slide-active .img{animation: zoom 5s cubic-bezier(0.42,0,0.58,1); -webkit-animation: zoom 5s cubic-bezier(0.42,0,0.58,1); animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards}

@keyframes zoom {
    0%{transform: scale(1.2)}
    100%{transform: scale(1)}
}
@-webkit-keyframes zoom {
    0%{transform: scale(1.2)}
    100%{transform: scale(1)}
}


/*----section03----*/
.section03{background: url("../image/bg01.jpg") no-repeat center; background-size: cover}

.section03 .title{transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .6s; -webkit-transition: all ease .6s .6s}

.section03_con{transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section03_con .li{width: 31.3333%; margin: 0 1%; float: left;}
.section03_con .li .img{width: 100%; overflow: hidden; position: relative; border: 1px solid #515151}
.section03_con .li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03_con .li .img:before{content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid transparent; transition: all ease .3s; -webkit-transition: all ease .3s}
.section03_con .li .img:after{content: ""; display: block; width: 50px; height: 50px; background: url("../image/ico06.png") no-repeat; position: absolute; top: 0; left: 50%; margin-left: -25px; margin-top: 10%; opacity: 0; transition: all ease .3s; -webkit-transition: all ease .3s}

.section03_con .li .txt{width: 100%; padding: 18px 0; text-align: center; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03_con .li .txt h1{font-size: 16px; color: #fff; font-weight: 100; margin-bottom: 4px;}
.section03_con .li .txt p{font-size: 13px; color: #a1a1a1;}

.section03_con .li:hover .img:before{top: 15px; left: 15px; bottom: 15px; right: 15px; border: 2px solid #515151;}
.section03_con .li:hover .img:after{margin-top: 32%; opacity: 1}
.section03_con .li:hover .txt{background: #515151}

.section03.active .title{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.section03.active .section03_con{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

/*----section02----*/
.section02{background: url("../image/bg02.jpg") no-repeat center fixed; background-size: cover; z-index: 2}
.section02_con{}

.section02_con .section02_li{width: 15%; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .6s; -webkit-transition: all ease .6s .6s}
.section02_con .section02_li a{width: 80px; font-size: 14px; color: #fff; padding: 10px 0; text-align: center; background: #15365b; border-bottom: 1px solid #15365b}
.section02_con .section02_li a.on{background: #01499b}
.section02_con .section02_li a:hover{background: #01499b}

.section02_con .section02_left{position: relative; width: 40%; margin-right: 5%; margin-top: 80px; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s 1s; -webkit-transition: all ease .6s 1s}
.section02_con .section02_left h1{font-size: 22px; color: #e3e3e3}
.section02_con .section02_left .line{display: block; width: 100%; height: 1px; background: #999999; margin: 20px 0;}
.section02_con .section02_left p{font-size: 13px; color: #999999; line-height: 32px;}
.section02_con .section02_left .a_link{margin-top: 40px;}

.section02_con .section02_right{width: 35%; margin-right: 5%; margin-top: 80px; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section02_con .section02_right .img{width: 100%; overflow: hidden}
.section02_con .section02_right .img img{float: none; display: block;}

.active .section02_left{bottom: 0; opacity: 1}
.active .section02_right{bottom: 0; opacity: 1}

.section02 .section02_bottom{width: 100%; height: 60px; position: absolute; bottom: 0; left: 0; background: rgba(255,255,255,.2)}
.section02 .section02_bottom .list{list-style: none}
.section02 .section02_bottom .list li{width: 20%; float: left; text-align: center; padding-top: 12px;}
.section02 .section02_bottom .list li h1{font-size: 26px; color: #0163bd; font-family: 'Montserrat-Light'}
.section02 .section02_bottom .list li h1 i{font-size: 14px; color: #bbbbbb; font-style: normal; padding-left: 8px;}

.active .section02_con .section02_li{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.active .section02_con .section02_left{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.active .section02_con .section02_right{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}


/*----section05----*/
.section05{background: url("../image/bg03.jpg") no-repeat center fixed; background-size: cover; overflow: hidden;}

.section05 .section05_list{width: 1600px; margin: 0 auto}

.section05 .section05_list .slick-list{overflow: visible}

.section05 .section05_list .slick-dots{width: 1600px; margin: 0 0 -142px 0}
.section05 .section05_list .slick-dots li{float: left; width: 24%; margin: 0 1% 0 0; transition: all ease .5s; -webkit-transition: all ease .5s; position: relative}
.section05 .section05_list .slick-dots li:before{content: ""; display: block; width: 74%; height: 1px; background: #444; position: absolute; top: 0; left: 0; margin: 9px 0 0 90px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05 .section05_list .slick-dots li button{width: 12px; height: 12px; margin-top: 4px; border-radius: 100%; border: 1px solid #999; box-sizing: border-box; position: relative; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05 .section05_list .slick-dots li button:before{content: ""; display: block; width: 6px; height: 6px; background: #fff; position: absolute; top: 0; left: 0; margin: 2px 0 0 2px; border-radius: 100%; opacity: 0; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05 .section05_list .slick-dots li.slick-active{width: 49%}
.section05 .section05_list .slick-dots li.slick-active:before{width: 84%;}
.section05 .section05_list .slick-dots li.slick-active button:before{opacity: 1}
.section05 .section05_list .slick-dots li:nth-child(1):after{content: "生产设备"; display: block; font-size: 14px; color: #999; position: absolute; top: 0; left: 0; margin: 0 0 0 20px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05 .section05_list .slick-dots li:nth-child(2):after{content: "企业风采"; display: block; font-size: 14px; color: #999; position: absolute; top: 0; left: 0; margin: 0 0 0 20px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05 .section05_list .slick-dots li:nth-child(3):after{content: "合作伙伴"; display: block; font-size: 14px; color: #999; position: absolute; top: 0; left: 0; margin: 0 0 0 20px; transition: all ease .5s; -webkit-transition: all ease .5s}

.section05_con{width: 1200px; padding: 0 200px; margin: 0; position: relative; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section05_con .section05_left{width: 400px; height: 530px; padding: 120px 50px; background: url("../image/img04.jpg") no-repeat; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .6s; -webkit-transition: all ease .6s .6s}
.section05_con .section05_left h1{font-size: 24px; color: #fff; margin-bottom: 6px;}
.section05_con .section05_left h6{font-size: 14px; color: #7c7c7c; margin-bottom: 20px; font-family: 'Montserrat-Light'}
.section05_con .section05_left p{font-size: 12px; color: #7c7c7c; line-height: 26px;}

.section05_con .section05_right{width: 800px; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section05_con .section05_right .li{width: 100%;}
.section05_con .section05_right .li .img{width: 100%; overflow: hidden}
.section05_con .section05_right .li .img img{width: 100%; float: none; display: block}

.section05_con .list{list-style: none; margin-right: -1%;}
.section05_con .list li{width: 24%; float: left; margin-right: 1%; margin-bottom: 12px; border-radius: 4px; overflow: hidden}
.section05_con .list li img{width: 100%;}


.section05_li{width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: 4%; opacity: 0}
.section05_li .li{float: left; width: 24%; margin-right: 1%; cursor: pointer; position: relative; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05_li .li:before{content: ""; display: block; width: 74%; height: 1px; background: #444; position: absolute; top: 0; left: 0; margin: 9px 0 0 90px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05_li .li span{display: inline-block; width: 12px; height: 12px; border-radius: 100%; border: 1px solid #999; box-sizing: border-box; position: relative; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05_li .li span:before{content: ""; display: block; width: 6px; height: 6px; background: #fff; position: absolute; top: 0; left: 0; margin: 2px 0 0 2px; border-radius: 100%; opacity: 0; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05_li .li h1{display: inline-block; font-size: 14px; color: #999; padding-left: 6px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section05_li .li.on{width: 49%}
.section05_li .li.on:before{width: 84%}
.section05_li .li.on span{border: 1px solid #fff;}
.section05_li .li.on span:before{opacity: 1}
.section05_li .li.on h1{color: #fff;}

.section05_con.active{}

.slider-track{-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);}
.section05_con .section05_right .li .img img {-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: scale(1.2); transform: scale(1.2);}
.section05_con .section05_right .li.slick-active .img img {-webkit-transform: scale(1); transform: scale(1);}

.active .section05_con .section05_left{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.active .section05_con .section05_right{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

/*----section04----*/
.section04{background: url("../image/bg04.jpg") no-repeat center fixed; background-size: cover; z-index: 2}
.section04 .w1600{height: 100%; position: relative}

.section04 .title{width: 100%; position: absolute; top: 0; left: 0; margin-top: 16%; z-index: 2; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .5s; -webkit-transition: all ease .6s .5s}

.section04 .section04_con{width: 1200px; height: 100%; margin-left: 200px; padding-top: 70px;}
.section04 .section04_con .list{list-style: none; height: 100%;}
.section04 .section04_con .list li{width: 33.3333%; height: 100%; float: left; padding: 24% 1.5% 0 1.5%; box-sizing: border-box; position: relative; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0;}
.section04 .section04_con .list li:before{content: ""; display: block; width: 100%; height: 0; background: #01499b; position: absolute; top: 0; left: 0; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list li .txt{height: 180px; margin-bottom: 30px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list li .txt h1{font-size: 16px; color: #fff;}
.section04 .section04_con .list li .txt .line{display: block; width: 14%; height: 1px; background: #808080; margin: 10px 0; transition: all ease .5s .5s; -webkit-transition: all ease .5s .5s}
.section04 .section04_con .list li .txt h6{font-size: 15px; color: #808080; margin-bottom: 30px; font-family: 'Montserrat-Light' }
.section04 .section04_con .list li .txt p{font-size: 14px; color: #8f8f8f; line-height: 22px;}

.section04 .section04_con .list li .img{width: 100%; height: 180px; margin-bottom: 30px; overflow: hidden; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list li .img img{width: 100%}

.section04 .section04_con .list li:hover{}
.section04 .section04_con .list li:hover:before{height: 100%;}
.section04 .section04_con .list li:hover .txt{transform: translateY(220px); -webkit-transform: translateY(220px)}
.section04 .section04_con .list li:hover .txt h1{color: #fff;}
.section04 .section04_con .list li:hover .txt .line{width: 100%; margin: 20px 0 10px 0;}
.section04 .section04_con .list li:hover .txt h6{color: #fff;}
.section04 .section04_con .list li:hover .txt p{color: #fff;}
.section04 .section04_con .list li:hover .img{transform: translateY(-200px); -webkit-transform: translateY(-200px)}

.section04 .section04_con .list li:nth-child(1){ transition: all ease .6s .6s; -webkit-transition: all ease .6s .6s}
.section04 .section04_con .list li:nth-child(2){ transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section04 .section04_con .list li:nth-child(3){ transition: all ease .6s 1s; -webkit-transition: all ease .6s 1s}

.section.active .section04_con .list li{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.section04.active .title{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}


/*----section06----*/
.section06{background: url("../image/bg05.jpg") no-repeat center; background-size: cover}

.section06 .section06_con{width: 800px; margin: 0 auto; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .5s; -webkit-transition: all ease .6s .5s; position: relative}
.section06 .section06_con .section06_ewm{width: 25%;}
.section06 .section06_con .section06_ewm .img{width: 140px;}
.section06 .section06_con .section06_ewm .img img{width: 100%;}
.section06 .section06_con .section06_left{width: 75%; margin-top: 20px;}
.section06 .section06_con .section06_left span{display: inline-block; width: 49%; font-size: 14px; color: #8f8f8f; line-height: 26px;}
.section06 .section06_con .section06_left .sp1{font-size: 30px; color: #0065bf; margin-bottom: 10px; font-family: 'Montserrat-Light'}

.section06 .section06_con .section06_t{width: 100%; margin-top: 80px; text-align: center}
.section06 .section06_con .section06_t h1{font-size: 24px; color: #8f8f8f; margin-bottom: 8px; font-weight: 100;}
.section06 .section06_con .section06_t h6{font-size: 14px; color: #8f8f8f; font-family: 'Montserrat-Light'}

.section06_footer{width: 100%; height: 80px; background: #000; padding-top: 16px; position: absolute; bottom: 0; left: 0;}
.section06_footer .section06_link{width: 60%;}
.section06_footer .section06_link .footer_ying{padding-bottom: 10px;}
.section06_footer .section06_link .footer_ying a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 12px; color: #8f8f8f;}
.section06_footer .section06_link .footer_ying .ying{font-size: 12px; color: #8f8f8f; padding: 0 6px 0 0; margin-right: 4px;}

.section06_footer .section06_link .footer_link{}
.section06_footer .section06_link .footer_link a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 12px; color: #8f8f8f;}
.section06_footer .section06_link .footer_link .link{font-size: 12px; color: #8f8f8f; padding: 0 6px 0 0; margin-right: 4px;}

.section06_footer .section06_cp{width: 40%;}
.section06_footer .section06_cp span{display: block; margin: 0 auto 10px auto; text-align: right; font-size: 12px; color: #8f8f8f;}
.section06_footer .section06_cp span a{display: inline-block; font-size: 12px; color: #8f8f8f; margin-left: 20px;}
.section06_footer .section06_cp span .design{width: 64px; height: 16px; color: transparent; background: url("../image/power.png") no-repeat; background-size: cover}

.active .section06_con{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}