#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 20px; 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: 42px; color: #fffefe; margin-bottom: 10px;}
.title .title_left span{display: block; width: 80px; height: 2px; margin: 10px 0; background: #fff;}
.title .title_left h1 i{display: block; font-size: 14px; color: #fff; font-style: normal; text-transform: uppercase; font-family: 'Montserrat-Light'}
.title .title_left p{font-size: 14px; color: #9ca3b4; padding-top: 40px;}

.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: 140px;  padding: 8px 0; margin-top: 20px; text-align: center; border: 1px solid #999; border-radius: 20px; overflow: hidden}
.a_link:before{content: ""; display: block; width: 0; height: 100%; background: #074c8a; 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: #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)}
}

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

.section02_con .sec_txt{text-align: center; margin-bottom: 30px;}
.section02_con .sec_txt h1{font-size: 48px; color: #fff; font-weight: 100}
.section02_con .sec_txt .line{display: block; width: 100px; height: 2px; background: #fff; margin: 10px auto;}
.section02_con .sec_txt h4{font-size: 14px; color: #fff; margin-bottom: 70px; font-family: 'novecentowide-book'}
.section02_con .sec_txt h5{font-size: 28px; color: #fff; font-weight: bold; margin-bottom: 40px;}
.section02_con .sec_txt p{font-size: 14px; color: #9ca3b4; line-height: 1.8; padding: 0 26%;}

.section02_con .sec_li{text-align: center}
.section02_con .sec_li a{display: inline-block; margin: 0 40px;}
.section02_con .sec_li a .ico{width: 92px; height: 92px; margin-bottom: 10px; border-radius: 100%; border: 2px solid #fff; padding: 14px; transition: all ease .3s; -webkit-transition: all ease .3s}
.section02_con .sec_li a .ico img{width: 60px; height: 60px; float: none; display: block}
.section02_con .sec_li a p{font-size: 14px; color: #fff;}

.section02_con .sec_li a:hover .ico{background: #074c8a; border: 2px solid #074c8a}

.section02_bg{width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: -24%;}
.section02_bg img{display: block; float: none; margin: 0 auto; animation: rot 240s infinite; -webkit-animation: rot 240s infinite}

@keyframes rot {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
@-webkit-keyframes rot {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}


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


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

.section03_con{}
.section03_con .sec_con{display: flex; flex-wrap:wrap; padding: 0 20px;}

.section03_con .sec_con .li{position: relative; margin-right: 20px; margin-bottom: 20px;}
.section03_con .sec_con .li .img{width: 100%; border-radius: 12px; overflow: hidden}
.section03_con .sec_con .li .img img{width: 100%;}
.section03_con .sec_con .li .text{width: 46%; height: 100%; position: absolute; top: 0; left: 0; padding: 110px 0 0 60px;}
.section03_con .sec_con .li .text h1{font-size: 24px; color: #333; font-weight: bold; margin-bottom: 30px;}
.section03_con .sec_con .li .text h6{font-size: 14px; color: #666; line-height: 1.8;}
.section03_con .sec_con .li01 .text{width: 56%; padding: 50px 0 0 50px;}
.section03_con .sec_con .li01 .text h1{margin-bottom: 20px;}

.section03_con .sec_con .li:nth-child(2){margin-right: 0}
.section03_con .sec_con .li:nth-child(3){margin-right: 25px;}
.section03_con .sec_con .li:nth-child(4){margin-right: 25px;}
.section03_con .sec_con .li:nth-child(5){margin-right: 0;}


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


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

.section04 .title{width: 100%; position: absolute; top: 0; left: 0; margin-top: 12%; z-index: 2; transition: all ease .6s .5s; -webkit-transition: all ease .6s .5s}

.section04 .section04_con{width: 1200px; height: 100%; margin-left: 100px;}
.section04 .section04_con .list{list-style: none; height: 100%;}
.section04 .section04_con .list li{width: 33.3333%; height: 100%; float: left; padding: 28% 1.5% 0 1.5%; box-sizing: border-box; position: relative;}
.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)}

/*----section05----*/
.section05{background: url("../image/bg04.jpg") no-repeat center fixed; background-size: cover; overflow: hidden;}
.section05_con .title .title_left{width: 100%; text-align: center}
.section05_con .title .title_left span{margin: 10px auto}
.section05_con .list05_list{margin-top: 70px; padding: 0 80px}
.section05_con .list05_list .list{margin-right: -5%;}
.section05_con .list05_list .list li{width: 28.3333%; float: left; margin-right: 5%; margin-bottom: 60px; cursor: pointer}
.section05_con .list05_list .list li .img{width: 100%; position: relative; overflow: hidden; border-radius: 16px;}
.section05_con .list05_list .list li .img img{width: 100%;}
.section05_con .list05_list .list li .img img.on{opacity: 0; position: absolute; top: 0; left: 0; transition: all ease .6s; -webkit-transition: all ease .6s}

.section05_con .list05_list .list li:hover .img img.on{opacity: 1}



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

.section06_con{}
.section06_con .sec_logo{width: 560px; margin: 0 auto 80px auto; background: url("../image/logoi.png") no-repeat}
.section06_con .sec_logo h1{font-size: 24px; color: #fff; padding-left: 160px; padding-bottom: 10px;}
.section06_con .sec_logo h3{padding-left: 160px;}
.section06_con .sec_logo h3 span{display: inline-block; font-size: 22px; color: #fff;}
.section06_con .sec_logo h3 i{display: block; font-size: 12px; color: #fff; font-style: normal}
.section06_con .sec_logo h3 .tel{position: relative; top: -4px; font-size: 40px; color: #fff; padding-left: 10px; font-family: 'DisneyEnglish-Bold'}

.section06_con .sec_ewm{margin-bottom: 80px; text-align: center}
.section06_con .sec_ewm .li{margin: 0 40px; display: inline-block}
.section06_con .sec_ewm .li .ewm{margin-right: 40px; margin-top: 10px;}
.section06_con .sec_ewm .li .ewm img{width: 130px; float: none; display: block;}
.section06_con .sec_ewm .li .ico{width: 120px;}
.section06_con .sec_ewm .li .ico img{width: 100px; display: block; float: none; margin: 0 auto}
.section06_con .sec_ewm .li .ico p{font-size: 14px; color: #8f8f8f; line-height: 1.4; text-align: center}

.section06_con .sec_con{width: 90%; margin: 0 auto; padding: 4px 0; background: #074c8a; border-radius: 30px; text-align: center}
.section06_con .sec_con span{display: inline-block; font-size: 14px; color: #fff; padding-left: 60px; line-height: 50px; text-align: left; margin: 0 20px; background-repeat: no-repeat}

.section06_footer{width: 100%; height: 70px; 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}


/*----index_right----*/
.index_right{width: 40px; position: fixed; top: 0; right: 0; margin: 24% 20px 0 0; z-index: 9}
.index_right .down{display: block; width: 40px; height: 50px; margin: 0 auto 80px auto; background: url("../image/ico01.png") no-repeat}
.index_right .down{animation: down_an 3s linear infinite; -webkit-animation: down_an 3s linear infinite; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards}


@keyframes down_an {
    0%{transform: translateY(0); opacity: .8}
    50%{transform: translateY(20px); opacity: 1}
    100%{transform: translateY(0); opacity: .8}
}

@-webkit-keyframes down_an {
    0%{transform: translateY(0); opacity: .8}
    100%{transform: translateY(20px); opacity: 1}
    100%{transform: translateY(0); opacity: .8}
}

.index_right .copy{display: block; width: 10px; margin-left: 10px; font-size: 13px; color: rgba(255,255,255,.6); writing-mode: vertical-rl; transform: rotate(180deg); -webkit-transform: rotate(180deg); font-family: 'novecentowide-book' }