/*Created by lk on 2020/06/04.*/

/*----banner----*/
.banner{width: 100%; position: fixed; top: 0;}
.banner .swiper-wrapper{overflow: hidden}
.banner .swiper-slide{width: 100%; height: 100%}
.banner .img{width: 100%; height: 100%; background-position: center; background-size: cover}

.banner .txt{width: 480px; position: absolute; left: 0; top: 0; margin: 24% 0 0 12%; z-index: 9}
.banner .txt img{transform: translateY(60px); -webkit-transform: translateY(60px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s;}
.banner .swiper-slide-active .txt img{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

.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 .swiper-slide .mask{width: 100%; height: 100%; position: absolute; left: 0; top: 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)}
}

.swiper-container-horizontal > .swiper-pagination-bullets{width: 20%; margin: 0 0 16% 12%; text-align: left}

.index_left{width: 40px; position: fixed; bottom: 60px; left: 50%; margin-left: -20px; z-index: 9}
.index_left .down{display: block; width: 40px; height: 60px; margin: 0 auto; background: url("../image/ico01.png") no-repeat}
.index_left .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}
}


.mark{width: 100%; height: 820px; position: relative;}



/*----content------*/
.content{position: relative; background: #fff; z-index: 9;}

.title{position: relative; margin-bottom: 60px; z-index: 2}
.title h1{font-size: 28px; font-weight: bold; color: #00589e; margin-bottom: 20px;}
.title h6{font-size: 36px; color: #555657; text-transform: uppercase; font-family: 'DisneyEnglish-Bold'}
.title:before{content: ""; display: block; width: 1px; height: 80px; background: #999; position: absolute; top: 0; left: 0; margin: 8px 0 0 -20px;}

.a_link{width: 60px; height: 60px; border: 1px dashed #999; margin: 50px auto 0 auto; text-align: center; border-radius: 100%; line-height: 60px; background: transparent; box-sizing: border-box; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link:before{content: ""; display: inline-block; position: relative; border-right: 2px solid #999; border-top: 2px solid #999; width: 8px; height: 8px; transform: rotate(45deg); margin-left: -4px; transition: all ease .5s; -webkit-transition: all ease .5s}
.a_link i{display: inline-block; border-right: 2px solid #fff; border-top: 2px solid #fff; width: 8px; height: 8px; transform: rotate(45deg); position: absolute; top: 0; left: 0; margin-top: 25px; margin-left: -14px; opacity: 0; transition: all ease .5s .2s; -webkit-transition: all ease .5s .2s; z-index: 2}
.a_link:after{content: ""; display: block; width: 100%; height: 100%; background: #00589e; position: absolute; top: 0; left: 0; border-radius: 100%; border: 2px solid #00589e; margin: -2px 0 0 -2px; transform: scale(0.1); -webkit-transform: scale(0.1); opacity: 0; transition: all ease .4s .1s; -webkit-transition: all ease .4s .1s}
.a_link span{display: block; width: 100px; height: 36px; line-height: 36px; font-size: 14px; color: #999; font-style: normal; background: #fff; position: absolute; top: 0; left: 40px; margin-top: 12px; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link:hover{border: 1px dashed #00589e}
.a_link:hover:before{margin-left: 64px; opacity: 0;}
.a_link:hover:after{transform: scale(1); -webkit-transform: scale(1); opacity: 1;}
.a_link:hover span{left: 50px;}
.a_link:hover i{margin-left: 22px; opacity: 1}

/*----list01----*/
.list01{padding: 100px 0; background: url("../image/bg01.jpg") no-repeat center; position: relative; overflow: hidden;}
.list01 .list01_con{text-align: center; margin-bottom: 80px;}
.list01 .list01_con h5{font-size: 18px; color: #878787; margin-bottom: 10px; margin-left: -41%; font-family: 'novecentowide-book'}
.list01 .list01_con h1{font-size: 36px; color: #111; font-weight: 100; margin-bottom: 50px;}
.list01 .list01_con p{font-size: 16px; color: #353535; line-height: 32px;}

.list01 .list01_data{width: 100%;}
.list01 .list01_data .li{width: 25%; float: left; margin-bottom: 40px; text-align: center}
.list01 .list01_data .li span{font-size: 60px; color: #333; font-family: 'novecentowide-book'}
.list01 .list01_data .li i{font-size: 14px; color: #939393; padding-left: 8px; font-style: normal; vertical-align: top}
.list01 .list01_data .li p{font-size: 14px; color: #939393; line-height: 22px}

/*----list02----*/
.list02{position: relative; overflow: hidden;}
.list02 .title{position: absolute; top: 0; left: 0; margin: 80px 0 0 14%}
.list02 .title h6{width: 400px;}

.list02 .list02_con{position: relative}
.list02 .list02_con .list02_left{width: 42%; position: absolute; top: 0; left: 0; margin: 18% 0 0 40%; padding: 60px 80px 80px 60px; background: #fff; z-index: 2}
.list02 .list02_con .list02_left .li{}
.list02 .list02_con .list02_left .li .t{width: 65%; padding-top: 40px;}
.list02 .list02_con .list02_left .li .t h1{font-size: 20px; color: #000; margin-bottom: 20px;}
.list02 .list02_con .list02_left .li .t h2{font-size: 14px; color: #575757; line-height: 26px; }
.list02 .list02_con .list02_left .li .img{width: 35%;}
.list02 .list02_con .list02_left .li .img img{float: none; display: block;}
.list02 .list02_con .list02_left .li .line{display: block; width: 100%; height: 1px; background: #dedede; margin: 10px 0 40px 0;}
.list02 .list02_con .list02_left .li .b_link{width: 120px; font-size: 14px; color: #575757; line-height: 30px; transition: all ease .8s; -webkit-transition: all ease .8s}
.list02 .list02_con .list02_left .li .b_link:hover{color: #00589e}

.list02 .list02_con .list02_right{width: 100%;}
.list02 .list02_con .list02_right .li{}
.list02 .list02_con .list02_right .li img{width: 100%;}

/*----list03----*/
.list03{padding: 120px 0; position: relative; overflow: hidden}
.list03 .title{padding-left: 280px;}
.list03 .title:before{width: 260px; height: 1px; margin: 8px 0 0 0;}
.list03 .title h1{margin-bottom: 0;}

.list03 .list03_list{position: relative}
.list03 .list03_list:before{content: ""; display: block; width: 1px; height: 100%; background: #dedede; position: absolute; top: 0; left: 50%;}
.list03 .list03_list .list{margin-right: -2%;}
.list03 .list03_list .list li{width: 48%; float: left; margin-right: 2%; margin-bottom: 60px; box-sizing: border-box; position: relative}
.list03 .list03_list .list li .img{width: 100%; margin-bottom: 20px; overflow: hidden}
.list03 .list03_list .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_list .list li h1{font-size: 18px; font-weight: bold; color: #383f42; margin-bottom: 20px; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_list .list li p{font-size: 14px; color: #646464; line-height: 28px; margin-bottom: 30px;}
.list03 .list03_list .list li h6{display: inline-block; position: absolute; top: 0; right: 0; font-size: 36px; color: #00589e; transform: translateY(60px); -webkit-transform: translateY(60px); opacity: 0; font-family: 'DisneyEnglish-Bold'; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_list .list li h6 i{display: block; font-size: 16px; font-style: normal;}
.list03 .list03_list .list li h6:before{content: ""; display: block; border: 8px solid; border-color: transparent #00589e transparent transparent; position: absolute; top: 0; left: 0; margin: 16px 0 0 -26px;}
.list03 .list03_list .list li .line{display: block; width: 100%; height: 2px; background: #dedede; position: relative}
.list03 .list03_list .list li .line:before{content: ""; display: block; width: 0; height: 2px; background: #00589e; position: absolute; top: 0; left: 0; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_list .list li:nth-child(even){padding-left: 10%;}
.list03 .list03_list .list li:nth-child(odd){padding-right: 10%;}
.list03 .list03_list .list li:nth-child(even) h6{left: 0; padding-left: 20px;}
.list03 .list03_list .list li:nth-child(even) h6 i{margin-left: -18px;}
.list03 .list03_list .list li:nth-child(even) h6:before{border-color: transparent  transparent transparent #00589e; margin: 16px 0 0 76px;}
.list03 .list03_list .list li .r{display: block; font-size: 15px; color: #646464; float: right; margin-top: 20px; transform: translateY(30px); -webkit-transform: translateY(30px); opacity: 0; transition: all ease .4s; -webkit-transition: all ease .4s; font-family: 'DisneyEnglish-Bold'}

.list03 .list03_list .list li:hover .img img{transform: scale(1.1); -webkit-transform: scale(1.1);}
.list03 .list03_list .list li:hover .line:before{width: 100%;}
.list03 .list03_list .list li:hover h1{color: #00589e}
.list03 .list03_list .list li:hover h6{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1;}
.list03 .list03_list .list li:hover .r{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1;}

.list03 .list03_list .a_link{margin: 10px auto 0 auto; background: #fff;}
.list03 .list03_list .a_link:before{transform: rotate(135deg); margin-left: 0; margin-bottom: 2px;}
.list03 .list03_list .a_link i{transform: rotate(135deg); margin-top: -10px; left: 50%; margin-left: -4px; opacity: 0;}
.list03 .list03_list .a_link span{height: 36px; line-height: 36px; left: 0; margin-top: 50px; margin-left: -20px;}
.list03 .list03_list .a_link:hover:before{margin-bottom: -30px; opacity: 0;}
.list03 .list03_list .a_link:hover i{margin-top: 24px; opacity: 1}
.list03 .list03_list .a_link:hover span{margin-top: 60px;}

.list03 .list03_list .list li:nth-child(1){animation-delay: .5s; -webkit-animation-delay: .5s}
.list03 .list03_list .list li:nth-child(2){animation-delay: .6s; -webkit-animation-delay: .6s}
.list03 .list03_list .list li:nth-child(3){animation-delay: .7s; -webkit-animation-delay: .7s}
.list03 .list03_list .list li:nth-child(4){animation-delay: .8s; -webkit-animation-delay: .8s}


/*----list04----*/
.list04{position: relative; padding: 80px 0; background: url("../image/bg04.jpg") no-repeat center; overflow: hidden;}

.list04 .title{padding-left: 280px; margin-bottom: 0}
.list04 .title:before{width: 260px; height: 1px; margin: 8px 0 0 0;}
.list04 .title h1{color: #fff; margin-bottom: 0;}

.list04 .list04_con{position: relative}
.list04 .list04_con .map_list{width: 800px; height: 600px; _background: rgba(255,255,255,.1); position: relative; margin: 0 0 0 10%}
.list04 .list04_con .map_list ul{list-style: none}
.list04 .list04_con .map_list li{width: 40px; height: 40px; position: absolute; cursor: pointer}
.list04 .list04_con .map_list li span{}
.list04 .list04_con .map_list li span:before{content: "";  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  border-radius: 50%;  border: 1px solid #00A0E9;  animation-name: circle;  animation-duration: 3s;  animation-timing-function: steps(90);  animation-iteration-count: infinite; animation-delay: 0s;}
.list04 .list04_con .map_list li span:after{content: "";  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  border-radius: 50%;  border: 1px solid #00A0E9;  animation-name: circle;  animation-duration: 3s;  animation-timing-function: steps(90);  animation-iteration-count: infinite;  animation-delay: 1s;}
.list04 .list04_con .map_list li span + span:before{animation-delay: 2s; -webkit-animation-delay: 2s}
.list04 .list04_con .map_list li span + span:after{animation-delay: 3s; -webkit-animation-delay: 3s}
.list04 .list04_con .map_list li i{display: block; font-size: 12px; color: #fff; font-weight: 100; font-style: normal; text-align: center; padding-top: 36px;}
.list04 .list04_con .map_list li:nth-child(1){top: 210px; right: 150px}
.list04 .list04_con .map_list li:nth-child(2){top: 300px; right: 260px}
.list04 .list04_con .map_list li:nth-child(3){top: 200px; left: 140px;}
.list04 .list04_con .map_list li:nth-child(4){top: 300px; right: 180px}
.list04 .list04_con .map_list li:nth-child(5){bottom: 40px; right: 230px}
.list04 .list04_con .map_list li:nth-child(6){bottom: -30px; right: 340px;}

.list04 .list04_con .map_list_con{width: 360px; height: 200px; position: absolute; top: 0; right: 0; padding: 40px; margin: 60px 40px 0 0; background: #383f42}
.list04 .list04_con .map_list_con .db{_display: none; position: absolute; opacity: 0; visibility: hidden; transform: translateX(180px); -webkit-transform: translateX(180px); transition: all ease .5s; -webkit-transition: all ease .5s;}
.list04 .list04_con .map_list_con .db h3{font-size: 20px; color: #fff; margin-bottom: 20px}
.list04 .list04_con .map_list_con .db p{font-size: 14px; color: #fff; margin-bottom: 10px;}
.list04 .list04_con .map_list_con .active{opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0)}

@keyframes circle {
    0%{width: 0; height: 0; opacity: 1}
    100%{width: 100%; height: 100%; opacity: 0;}
}

@-webkit-keyframes circle {
    0%{width: 0; height: 0; opacity: 1}
    100%{width: 100%; height: 100%; opacity: 0;}
}

/*----list05----*/
.list05{padding: 160px 0 100px 0; position: relative;}
.list05 .title{position: absolute; padding-top: 20px;}
.list05 .title:before{width: 360px; height: 1px; margin: 0;}
.list05 .title h1{margin-bottom: 0;}

.list05 .list05_con{}
.list05 .list05_con .list05_left{width: 35%; margin-right: 5%; margin-top: 160px;}
.list05 .list05_con .list05_left p{font-size: 14px; color: #555657; line-height: 30px;}

.list05 .list05_con .list05_right{width: 60%;}
.list05 .list05_con .list05_right .list{margin-right: -2%;}
.list05 .list05_con .list05_right .list li{width: 31.3333%; float: left; margin-right: 2%; margin-bottom: 20px; border: 1px solid #f0f0f0; box-sizing: border-box; transition: all ease .4s; -webkit-transition: all ease .4s; cursor: pointer}
.list05 .list05_con .list05_right .list li img{width: 100%;}

.list05 .list05_con .list05_left .a_link{margin: 40px 0 0 0;}

.list05 .list05_con .list05_right .list li:hover{box-shadow: 3px 3px 20px 3px #dedede;}