#fp-nav{top: 80%}
#fp-nav li a:before{display: block; width: 40px; font-size: 13px; color: #fff; font-weight: 100; position: absolute; bottom: 0; left: 0; margin: 0 0 -6px -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}


.index_fix{width: 100%; position: fixed; bottom: 0; left: 0; padding: 0 0 20px 30px; z-index: 9}
.index_fix a{display: inline-block; font-size: 12px; color: #666; margin-right: 20px;}
.index_fix .design{width: 64px; height: 16px; color: transparent; background: url("../image/power.png") no-repeat; background-size: cover}

.index_left{position: fixed; top: 150px; left: 0; z-index: 9}
.index_left p{font-size: 13px; color: #666; writing-mode: vertical-lr; padding: 0 30px 160px 0; transform: rotate(180deg); -webkit-transform: rotate(180deg); font-family: 'novecentowide-book'}
.index_left span{width: 60px; height: 450px; position: absolute; top: 0; left: 0; margin-left: 75px; background: url("../image/ico01.png") no-repeat}

.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{display: block; margin: 0 auto 40px auto; position: relative; text-align: center}
.title h1{font-size: 48px; color: #fff; margin-bottom: 2px;}
.title p{display: inline-block; font-size: 12px; color: #fff; text-align: right; letter-spacing: 3px; padding-left: 100px; font-family: 'novecentowide-book'; position: relative}
.title p:before{content: ""; display: block; width: 90px; height: 2px; background: #fff; position: absolute; top: 0; left: 0; margin: 6px 0 0 0}

.a_link{position: relative; width: 140px; padding: 10px 0; margin: 20px 10px 0 10px; text-align: center; background: #fff; border-radius: 20px; overflow: hidden}
.a_link:before{content: ""; display: block; width: 0; height: 100%; background: #2d3b59; position: absolute; top: 0; left: 0; transition: all ease .4s; -webkit-transition: all ease .4s }
.a_link i{position: relative; font-size: 13px; color: #333; 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: #fff;}


/*----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 .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)}
}

.banner_txt{width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin-top: 20%; z-index: 9}
.banner_txt .img{width: 500px; margin: 0 auto}


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

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

.section02 .section02_con{text-align: center; margin-top: 70px; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .9s; -webkit-transition: all ease .6s .9s}
.section02 .section02_con h1{font-size: 28px; color: #fff; font-weight: bold; margin-bottom: 20px;}
.section02 .section02_con h6{font-size: 20px; color: #fff; margin-bottom: 30px;}
.section02 .section02_con p{font-size: 14px;color: #fff; line-height: 26px; padding: 0 20%;}
.section02 .section02_con .a_link{display: inline-block;}

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

/*----section03----*/
.section03{background: url("../image/bg02.jpg") no-repeat center fixed; 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 .section03_con{width: 1170px; margin: 60px auto 0 auto}
.section03 .section03_con .list{list-style: none; margin: 0 auto}
.section03 .section03_con .list li{width: 33.3333%; float: left; box-sizing: border-box; cursor: pointer; position: relative; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0;}
.section03 .section03_con .list li .img_bg{width: 280px; height: 280px; padding: 10px; margin: 0 auto; position: relative; background: #2d3b59; border-radius: 100%;}
.section03 .section03_con .list li .img{width: 260px; height: 260px; margin: 0 auto; border-radius: 100%; overflow: hidden; position: relative}
.section03 .section03_con .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03 .section03_con .list li .img .line{width: 240px; height: 240px; position: absolute; top: 10px; left: 10px; right: 10px; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03 .section03_con .list li:nth-child(2) .img .line{transform: rotate(45deg); -webkit-transform: rotate(45deg)}
.section03 .section03_con .list li:nth-child(3) .img .line{transform: rotate(120deg); -webkit-transform: rotate(120deg)}

.section03 .section03_con .list li .text{text-align: center; margin: 70px 0 35px 0; position: relative}
.section03 .section03_con .list li .text h1{font-size: 24px; color: #fff; font-weight: bold; position: relative; z-index: 9; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03 .section03_con .list li .text h4{position: absolute; left: 50%; top: 50%; font-size: 64px; color: rgba(255,255,255,.4); transform: translate(-50%,-50%); font-family: 'DisneyEnglish-Bold'; transition: all ease .4s; -webkit-transition: all ease .4s}
.section03 .section03_con .list li .txt{padding: 0 40px; color: #333; font-size: 12px; line-height: 24px}

.section03 .section03_con .list li:hover .line{transform: rotate(90deg); -webkit-transform: rotate(90deg)}
.section03 .section03_con .list li:nth-child(2):hover .line{transform: rotate(190deg); -webkit-transform: rotate(190deg)}
.section03 .section03_con .list li:nth-child(3):hover .line{transform: rotate(320deg); -webkit-transform: rotate(320deg)}
.section03 .section03_con .list li:hover .img .img{transform: scale(1.05); -webkit-transform: scale(1.05)}
.section03 .section03_con .list li:hover .text h3{color: #fff}
.section03 .section03_con .list li:hover .text h4{color: #fff; margin-top: -40px;}

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

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

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

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

.section04 .title{display: inline-block; padding-left: 30px;}
.section04 .title p{padding-left: 80px; letter-spacing: 1px}
.section04 .title p:before{width: 70px;}

.section04 .section04_con{margin-top: 70px; position: relative}
.section04 .section04_con:before{content: ""; display: block; width: 120%; height: 1px; background: rgba(255,255,255,.1); position: absolute; top: 50%; left: 0; margin-top: -3%; margin-left: 30px;}
.section04 .section04_con .list{list-style: none; margin-right: -3%}
.section04 .section04_con .list li{width: 30.3333%; float: left; margin-right: 3%; padding: 0 2%; box-sizing: border-box; position: relative; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0;}

.section04 .section04_con .list li .txt{margin-bottom: 40px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list li .txt h1{font-size: 16px; color: #fff; margin-bottom: 16px;}
.section04 .section04_con .list li .txt p{font-size: 14px; color: #8f8f8f; line-height: 24px;}

.section04 .section04_con .list li .img{width: 100%; height: 180px; overflow: hidden; position: relative;}
.section04 .section04_con .list li .img img{width: 100%; opacity: 0; transform: scale(0.8); -webkit-transform: scale(0.8); transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list li .img h6{position: absolute; top: 0; left: 0; font-size: 15px; color: #dedede; margin-bottom: 30px; padding-left: 26px; background: url("../image/ico04.png") no-repeat; font-family: 'Montserrat-Light'; transition: all ease .5s; -webkit-transition: all ease .5s}

.section04 .section04_con .list li:nth-child(2) .txt{transform: translateY(150px); -webkit-transform: translateY(150px);}
.section04 .section04_con .list li:nth-child(2) .img{transform: translateY(-240px); -webkit-transform: translateY(-240px);}
.section04 .section04_con .list li:nth-child(2) .img h6{top: 90%}

.section04 .section04_con .list li:hover .img img{opacity: 1; transform: scale(1); -webkit-transform: scale(1);}
.section04 .section04_con .list li:hover .img h6{opacity: 0; }

.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}

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

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

.section05 .title{display: inline-block;}
.section05 .title p{padding-left: 80px; letter-spacing: 1px}
.section05 .title p:before{width: 70px;}

.section05 .section05_con{position: relative; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section05 .section05_con .section05_list{width: 950px;}
.section05 .section05_con .section05_list:before{content: ""; display: block; width: 30%; height: 1px; background: rgba(255,255,255,.8); position: absolute; top: 50%; right: 0; margin-right: -10%; margin-top: -5%; z-index: 5}
.section05 .section05_con .section05_list .li{position: relative}
.section05 .section05_con .section05_list .li .t{position: absolute; bottom: 0; left: 0; margin: 0 0 20px 40px;}
.section05 .section05_con .section05_list .li .t h1{font-size: 22px; color: #181818; font-weight: bold;}

.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_list .li .img{overflow: hidden}
.section05_con .section05_list .li .img img{width: 100%; -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_list .li.slick-active .img img {-webkit-transform: scale(1); transform: scale(1);}

.section05_list .slick-dots{width: auto; top: 50%; right: 0; margin: -5% -32% 0 0}
.section05_list .slick-dots:before{content: "0"; display: block; font-size: 136px; color: #fff; font-weight: bold; position: absolute; top: 0; right: 0; margin: -84% 100% 0 0; font-family: 'novecentowide-book';}
.section05_list .slick-dots li{display: block; width: auto; height: auto; opacity: 0;}
.section05_list .slick-dots li.slick-active{opacity: 1}
.section05_list .slick-dots li button{width: auto; height: auto; font-size: 140px; color: #fff; font-weight: bold; padding: 0; font-family: 'novecentowide-book';}
.section05_list .slick-dots li button:before{background: transparent}

.section.active .section05_con{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.section05.active .title{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

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

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

.section06 .section06_con{position: relative; transform: translateY(200px); -webkit-transform: translateY(200px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s}
.section06 .section06_con .list{border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2)}
.section06 .section06_con .list li{width: 33.3333%; float: left; padding: 20px 0; text-align: center; border-right: 1px solid rgba(255,255,255,.2); box-sizing: border-box;}
.section06 .section06_con .list li .ico{width: 40px; margin: 0 auto 10px auto}
.section06 .section06_con .list li .ico img{float: none; display: block;}
.section06 .section06_con .list li span{display: block; font-size: 14px; color: #fff; margin-bottom: 4px;}
.section06 .section06_con .list li p{font-size: 14px; color: #fff;}

.section06 .section06_con .section06_link{width: 60%; margin: 40px auto}
.section06 .section06_con .section06_link .footer_ying{padding-bottom: 10px; text-align: center}
.section06 .section06_con .section06_link .footer_ying a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 13px; color: #dedede;}
.section06 .section06_con .section06_link .footer_ying .ying{font-size: 13px; color: #dedede; padding: 0 6px 0 0; margin-right: 4px;}

.section06 .section06_con .section06_link .footer_link{text-align: center}
.section06 .section06_con .section06_link .footer_link a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 13px; color: #dedede;}
.section06 .section06_con .section06_link .footer_link .link{font-size: 13px; color: #dedede; padding: 0 6px 0 0; margin-right: 4px;}

.section06 .section06_con .section06_ewm{width: 128px; margin: 0 auto}
.section06 .section06_con .section06_ewm .img img{float: none; display: block; width: 100%;}

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