.page-pagepiling-wrap{width: 100%; height: 100%}
.section01{background: #000; overflow: hidden}
.section02{background: #fff url("../image/bg01_1.jpg") no-repeat right; overflow: hidden}
.section03{background: url("../image/banner02.jpg") no-repeat; background-size: cover}
.section04{background: url("../image/bg05.jpg") no-repeat center; background-size: cover}
.section05{background: url("../image/bg05.jpg") no-repeat center; background-size: cover}
.section06{background: url("../image/bg06_1.jpg") no-repeat; background-size: cover}


.h_line{width: 1170px; height: 100%; position: fixed; left: 50%; top: 0; margin-left: -585px; z-index: 3}
.h_line .line_list{list-style: none; height: 100%}
.h_line .line_list li{width: 33.3333%; height: 100%; float: left; border-right: 1px solid #f4f4f4; box-sizing: border-box}
.h_line .line_list li:nth-child(1){border-left: 1px solid #f4f4f4}

.section_title{position: fixed; top: 16%; right: 40px;}
.section_title h3{font-size: 18px; color: #555; writing-mode: vertical-lr; font-family:  'novecentowide-book'}

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

/*------------*/
.section01 .banner{width: 100%; height: 100%; position: relative}
.section01 .banner .swiper-slide{width: 100%; height: 100%}
.section01 .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;}


.section01 .banner .txt{position: absolute; left: 10%; top: 50%}
.section01 .banner .txt h3{font-size: 36px; color: #fff; margin-bottom: 16px; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s .8s; -webkit-transition: all ease .4s .8s}
.section01 .banner .txt h4{font-size: 36px; color: #fff; margin-bottom: 16px; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s 1s; -webkit-transition: all ease .4s 1s}

.section01 .banner .swiper-slide-active .txt h3{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}
.section01 .banner .swiper-slide-active .txt h4{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}

.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 .section02_con{width: 100%; height: 100%; position: relative}
.section02 .section02_con .list02_left{width: 46%; height: 100%; position: relative; background-position: center; background-size: cover; transition: all ease .8s .2s; -webkit-transition: all ease .8s .2s}

.section02 .section02_con .list02_right{width: 60%; position: absolute; top: 34%; right: 0; padding: 50px; background: rgba(197,0,17,.8); opacity: 0; transition: all ease 1s .8s; -webkit-transition: all ease 1s .8s}
.section02 .section02_con .list02_right .list02_v{width: 50%; margin-right: 5%;}
.section02 .section02_con .list02_right .list02_v .video_li{width: 100%; height: 100%;}

.section02 .section02_con .list02_right .list02_t{width: 45%; padding-top: 20px;}
.section02 .section02_con .list02_right .list02_t h1{font-size: 26px; color: #fff; font-weight: bold; margin-bottom: 40px; font-family:  'Montserrat-Light'}
.section02 .section02_con .list02_right .list02_t h1 i{font-size: 20px; color: #fff; font-style: normal; padding-left: 6px;}
.section02 .section02_con .list02_right .list02_t p{font-size: 14px; color: #fff; line-height: 26px;}

.section.active .section02_con .list02_left{width: 80%;}
.section.active .section02_con .list02_right{right: 14%; opacity: 1}


/*----*/
.section03:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.2) url("../image/wenli.png") repeat; position: absolute; top: 0; left: 0;}
.section03 .section03_con{width: 1170px; height: 100%; margin: 0 auto; padding-top: 8%; position: relative; transform: translateY(-200px); -webkit-transform: translateY(-200px); opacity: 0; transition: all ease .8s .6s; -webkit-transition: all ease .8s .6s}
.section03 .section03_con .banner01{width: 100%; position: relative; z-index: 4; }
.section03 .section03_con .banner01 img{width: 100%}
.section03 .section03_con .banner01 div{position: relative}
.section03 .section03_con .banner01 .txt01{position: absolute; left: 80px; bottom: 10px; opacity: 0; transition: all ease 1.4s .4s; -webkit-transition: all ease 1.4s .4s}
.section03 .section03_con .banner01 .txt01 h3{font-size: 36px; color: #fff; font-family: 'Montserrat-Light'}
.section03 .section03_con .banner01 .txt02{position: absolute; right: 10px; bottom: 60px; width: 30px; height: 200px; opacity: 0; transition: all ease 1.4s .2s; -webkit-transition: all ease 1.4s .2s}
.section03 .section03_con .banner01 .txt02 h3{font-size: 20px; color: #fff; writing-mode: vertical-lr;}
.section03 .section03_con .banner01 .slick-active .txt01{left: -40px; opacity: 1}
.section03 .section03_con .banner01 .slick-active .txt02{bottom: -60px; opacity: 1}

.section03 .section03_con .banner01 .slick-prev{left: -50px}
.section03 .section03_con .banner01 .slick-next{right: -50px}

.section03 .section03_con .a_link{margin: 40px auto 0 auto; z-index: 9}

.section03 .section03_con .section_title h3{color: #fff;}

.section03 .section03_con .h_line .line_list li{border-right: 1px solid #222}
.section03 .section03_con .h_line .line_list li:nth-child(1){border-left: 1px solid #222}

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


/*-----*/
.section04 .section04_con{height: 100%;}

.section04 .section04_con .list04_left{width: 20%; padding-top: 20%; transform: translateY(-100px); -webkit-transform: translateY(-100px); opacity: 0; transition: all ease .8s .6s; -webkit-transition: all ease .8s .6s}
.section04 .section04_con .list04_left h1{font-size: 28px; color: #333; margin-bottom: 10px;}
.section04 .section04_con .list04_left h2{font-size: 30px; color: #999; font-family: 'DisneyEnglish-Bold'}

.section04 .section04_con .list04_right{width: 80%; height: 100%; transform: translateX(200px); -webkit-transform: translateX(200px); opacity: 0; transition: all ease .8s 1s; -webkit-transition: all ease .8s 1s}
.section04 .section04_con .list04_right .list{list-style: none; height: 100%;}
.section04 .section04_con .list04_right .list li{width: 33.3333%; height: 100%; float: left; padding: 24% 1.5% 0 1.5%; box-sizing: border-box; position: relative; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list04_right .list li:before{content: ""; display: block; width: 100%; height: 0; background: rgba(197,0,17,.9); position: absolute; top: 0; left: 0; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list04_right .list li .txt{height: 180px; margin-bottom: 30px; transition: all ease .5s; -webkit-transition: all ease .5s}
.section04 .section04_con .list04_right .list li .txt h1{font-size: 16px; color: #333;}
.section04 .section04_con .list04_right .list li .txt .line{display: block; width: 14%; height: 1px; background: #dedede; margin: 10px 0; transition: all ease .5s .5s; -webkit-transition: all ease .5s .5s}
.section04 .section04_con .list04_right .list li .txt h6{font-size: 15px; color: #999; margin-bottom: 30px; font-family: 'Montserrat-Light' }
.section04 .section04_con .list04_right .list li .txt p{font-size: 14px; color: #999; line-height: 22px;}

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

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

.section.active .section04_con .list04_left{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.section.active .section04_con .list04_right{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}

/*----*/
.section05 .section05_con{padding-top: 80px; z-index: 2}
.section05 .section05_con .list05_left{width: 100%; margin-bottom: 30px; transform: translateY(-100px); -webkit-transform: translateY(-100px); opacity: 0; transition: all ease .8s .6s; -webkit-transition: all ease .8s .6s}
.section05 .section05_con .list05_left h1{font-size: 28px; color: #333; margin-bottom: 4px;}
.section05 .section05_con .list05_left h2{font-size: 30px; color: #999; font-family: 'DisneyEnglish-Bold'}

.section05 .section05_con .list05_right{width: 100%;}
.section05 .section05_con .list05_right .list{list-style: none; margin-right: -1%;}
.section05 .section05_con .list05_right .list li{position: relative; width: 24%; float: left; margin-right: 1%; margin-bottom: 20px; box-sizing: border-box; transform: translateY(100px); -webkit-transform: translateY(100px); opacity: 0; transition: all ease .7s; -webkit-transition: all ease .7s}
.section05 .section05_con .list05_right .list li .img{width: 100%; overflow: hidden}
.section05 .section05_con .list05_right .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.section05 .section05_con .list05_right .list li .txt{padding: 10px 0; text-align: center}
.section05 .section05_con .list05_right .list li .txt h1{font-size: 15px; color: #333;}

.section05 .section05_con .list05_right .list li:hover .img img{transform: scale(1.1); -webkit-transform: scale(1.1)}


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

.section.active .section05_con .list05_right .list li{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.section.active .section05_con .list05_right .list li:nth-child(1){transition-delay: .7s}
.section.active  .section05_con .list05_right .list li:nth-child(2){transition-delay: .8s}
.section.active  .section05_con .list05_right .list li:nth-child(3){transition-delay: .9s}
.section.active  .section05_con .list05_right .list li:nth-child(4){transition-delay: 1s}
.section.active  .section05_con .list05_right .list li:nth-child(5){transition-delay: 1.1s}
.section.active  .section05_con .list05_right .list li:nth-child(6){transition-delay: 1.2s}
.section.active  .section05_con .list05_right .list li:nth-child(7){transition-delay: 1.3s}
.section.active  .section05_con .list05_right .list li:nth-child(8){transition-delay: 1.4s}



/*----*/
.section06 .section06_con{overflow: hidden}
.section06 .section06_con .list06_left{width: 50%; height: 480px; padding: 100px 0 0 100px; background: #c50011; overflow: hidden; position: relative; transform: translateY(480px); -webkit-transform: translateY(480px); opacity: 0; transition: all ease .5s .3s; -webkit-transition: all ease .5s .3s}
.section06 .section06_con .list06_left:before{content: ""; display: block; width: 50%; height: 70%; background: rgba(0,0,0,.1); position: absolute; top: 0; left: 0}
.section06 .section06_con .list06_left:after{content: ""; display: block; width: 50%; height: 30%; background: rgba(0,0,0,.1); position: absolute; bottom: 0; right: 0}
.section06 .section06_con .list06_left h1{font-size: 28px; color: #fff; margin-bottom: 10px;}
.section06 .section06_con .list06_left h6{font-size: 30px; color: #fff; margin-bottom: 20px; font-family: 'DisneyEnglish-Bold'}
.section06 .section06_con .list06_left p{font-size: 14px; color: #fff; line-height: 32px;}

.section06 .section06_con .list06_left .footer_ying{margin-top: 20px; margin-bottom: 10px; position: relative; z-index: 2}
.section06 .section06_con .list06_left .footer_ying a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 13px; color: #dedede;}
.section06 .section06_con .list06_left .footer_ying .ying{font-size: 13px; color: #dedede; padding: 0 6px 0 0; margin-right: 4px;}
.section06 .section06_con .list06_left .footer_link{margin-bottom: 10px; position: relative; z-index: 2}
.section06 .section06_con .list06_left .footer_link a{display: inline-block; padding: 0 6px; margin-right: 2px; font-size: 13px; color: #dedede;}
.section06 .section06_con .list06_left .footer_link .link{font-size: 13px; color: #dedede; padding: 0 6px 0 0; margin-right: 4px;}
.section06 .section06_con .list06_left span{display: inline-block; font-size: 13px; color: #fff; font-weight: 100; }
.section06 .section06_con .list06_left span a{display: inline-block; font-size: 13px; color: #fff; font-weight: 100; margin-right: 10px;}


.section06 .section06_con .list06_right{width: 50%; height: 480px; position: relative; }
.section06 .section06_con .list06_right .img{width: 100%; height: 100%; background-size: cover; transform: translateY(-480px); -webkit-transform: translateY(-480px); opacity: 0; transition: all ease .8s .6s; -webkit-transition: all ease .8s .6s}
.section06 .section06_con .list06_right:before{content: ""; display: block; width: 40%; height: 40%; background: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; z-index: 1}
.section06 .section06_con .list06_right:after{content: ""; display: block; width: 60%; height: 60%; background: rgba(0,0,0,.2); position: absolute; bottom: 0; right: 0}


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