/*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: 1400px; position: absolute; left: 0; top: 0; margin: 32% 0 0 12%; z-index: 9}
.banner .txt:before{content: ""; display: block; width: 80%; height: 1px; background: rgba(255,255,255,.6); position: absolute; top: 0; left: 0; margin-top: 80px;}
.banner .txt img{transform: translateX(60px); -webkit-transform: translateX(60px); opacity: 0; transition: all ease .6s .8s; -webkit-transition: all ease .6s .8s;}
.banner .swiper-slide-active .txt img{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)}
}


.swiper-button-prev, .swiper-button-next{margin-bottom: 256px;}
.swiper-button-prev{left: 76%;}
.swiper-button-next{left: 72%;}

.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: 42px; font-weight: bold; color: #064b8a;}
.title h2{font-size: 42px; font-weight: bold; color: #064b8a;}
.title h6{font-size: 14px; color: #9a9a9a; font-family: 'novecentowide-book'}

.a_link{width: 140px; height: 42px; margin: 0; border-radius: 24px; line-height: 42px; background-image: linear-gradient(to right,rgba(105,165,206,1),rgba(12,80,142,1)); box-sizing: border-box; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link i{font-size: 14px; color: #fff; font-style: normal; padding-left: 30px;}
.a_link span{display: block; width: 25px; height: 25px; font-size: 14px; color: #999; background: url("../image/ico02.png") no-repeat -36px -36px; position: absolute; top: 0; right: 0; margin: 14px 14px 0 0; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link:hover span{background: url("../image/ico02.png") no-repeat 0 0;}


/*----list01----*/
.list01{position: relative}
.list01 .title{position: absolute; top: 0; left: 0; margin: 80px 0 0 8%;}

.list01 .list01_con{}
.list01 .list01_con .list01_bg{height: 900px; position: relative}
.list01 .list01_con .list01_bg .bg_li{width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: all ease .4s; -webkit-transition: all ease .4s;}
.list01 .list01_con .list01_bg .bg_li .txt{width: 45%; padding: 32% 0 6% 8%; opacity: 0; transition: all ease-out .4s .4s; -webkit-transition: all ease-out .4s .4s;}
.list01 .list01_con .list01_bg .bg_li .txt .t_left{width: 30%;}
.list01 .list01_con .list01_bg .bg_li .txt .t_left h3{font-size: 56px; color: #175a96; font-family: 'DisneyEnglish-Bold'}
.list01 .list01_con .list01_bg .bg_li .txt .t_left h1{font-size: 38px; color: #175a96}
.list01 .list01_con .list01_bg .bg_li .txt .t_right{width: 70%; padding-top: 80px;}
.list01 .list01_con .list01_bg .bg_li .txt .t_right p{font-size: 14px; color: #656565; line-height: 2}
.list01 .list01_con .list01_bg .bg_li .txt .t_right .a_link{margin: 10px 0 0 60%}
.list01 .list01_con .list01_bg .bg_li.active{opacity: 1; visibility: visible}

.list01 .list01_con .list01_li{position: absolute; top: 0; right: 0; margin: 80px 8% 0 0; z-index: 2}
.list01 .list01_con .list01_li .list{width: 550px;}
.list01 .list01_con .list01_li .list li{position: relative; float: left; margin: 0 20px 20px 0; padding: 30px 20px; width: 160px; background: #cedce4;  border-radius: 10px; box-sizing: border-box; transition: all ease .4s; -webkit-transition: all ease .4s; cursor: pointer}
.list01 .list01_con .list01_li .list li h3{font-size: 18px; color: #728187; margin-bottom: 8px; font-family: 'Montserrat-Light'; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list01_li .list li h1{font-size: 16px; color: #728187; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list01_li .list li span{display: block; position: absolute; top: 0; right: 0; margin: 10px 10px 0 0; font-size: 14px; color: #728187; font-family: 'Montserrat-Light'; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list01_li .list li:hover{background-image: linear-gradient(to right,rgba(105,165,206,1),rgba(12,80,142,1));}
.list01 .list01_con .list01_li .list li:hover h3{color: #fff;}
.list01 .list01_con .list01_li .list li:hover h1{color: #fff;}
.list01 .list01_con .list01_li .list li:hover span{color: #fff;}
.list01 .list01_con .list01_li .list li:nth-child(4){margin-left: 180px;}
.list01 .list01_con .list01_li .list li.on{background-image: linear-gradient(to right,rgba(105,165,206,1),rgba(12,80,142,1));}
.list01 .list01_con .list01_li .list li.on h3{color: #fff;}
.list01 .list01_con .list01_li .list li.on h1{color: #fff;}
.list01 .list01_con .list01_li .list li.on span{color: #fff;}

.list01 .list01_con .list01_bg .bg_li.active .txt{animation: rt 1s both; animation-delay: .3s; -webkit-animation: rt 1s both; -webkit-animation-delay: .3s;}

@keyframes rt {
    0%{transform: translateY(40px); opacity: 0;}
    100%{transform: translateY(0); opacity: 1}
}

@-webkit-keyframes zy {
    0%{transform: translateY(40px); opacity: 0;}
    100%{transform: translateY(0); opacity: 1}
}

/*----list02----*/
.list02{position: relative; padding: 100px 0; overflow: hidden;}
.list02 .list02_left{width: 50%; padding-right: 30px;}
.list02 .list02_left p{font-size: 14px; color: #333; line-height: 2;}
.list02 .list02_left .a_link{margin: 40px 0 0 0}
.list02 .list02_right{width: 50%; padding-top: 80px;}
.list02 .list02_right .img{width: 80%; margin: 0 auto}
.list02 .list02_right .img img{width: 100%;}

/*----list03----*/
.list03{padding: 40px 0; position: relative; overflow: hidden}
.list03 .list03_con{display: flex; flex-wrap: wrap; width: 100%; position: relative}
.list03 .list03_con .list03_li{width: 34.375%; position: relative; overflow: hidden; transition: all ease .6s; -webkit-transition: all ease .6s; cursor: pointer}
.list03 .list03_con .list03_li.on{width: 65.625%}
.list03 .list03_con .list03_li .img{width: 100%;}
.list03 .list03_con .list03_li .img img{float: none; display: block}

.list03 .list03_con .list03_li .txt{position: absolute; top: 0; padding: 180px 0 0 14%}
.list03 .list03_con .list03_li .txt h1{width: 550px; font-size: 42px; color: #064b8a; font-weight: bold; margin-bottom: 50px;}
.list03 .list03_con .list03_li .txt p{width: 550px; font-size: 24px; color: #7e7e7e; line-height: 2;}
.list03 .list03_con .list03_li .txt .a_link{margin: 60px 0 0 0}

/*----list04----*/
.list04{position: relative; padding: 80px 0 120px 0; overflow: hidden;}
.list04 .title{text-align: center}
.list04 .list04_list{}
.list04 .list04_list .list{margin-right: -2%;}
.list04 .list04_list .list li{width: 31.3333%; float: left; margin-right: 2%;}
.list04 .list04_list .list li .img{width: 100%; height: 240px; overflow: hidden}
.list04 .list04_list .list li .img img{width: 100%; transition: all ease-out .6s; -webkit-transition: all ease-out .6s;}

.list04 .list04_list .list li .text{padding: 30px 40px; background: #f4f4f4; position: relative}
.list04 .list04_list .list li .text h4{font-size: 14px; color: #175a96; margin-bottom: 10px;}
.list04 .list04_list .list li .text h1{font-size: 18px; color: #333; margin-bottom: 80px;}
.list04 .list04_list .list li .text h6{font-size: 14px; color: #999; font-family: 'novecentowide-book'}
.list04 .list04_list .list li .text span{display: block; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #175a96; position: absolute; bottom: 0; right: 0; margin: 0 10px 10px 0; transition: all ease .6s; -webkit-transition: all ease .6s; overflow: hidden}
.list04 .list04_list .list li .text span i{display: inline-block; width: 40px; height: 40px; background: url("../image/ico07.png") no-repeat -22px -22px; transition: all ease .4s; -webkit-transition: all ease .4s;}

.list04 .list04_list .list li:hover .img img{transform: scale(1.2); -webkit-transform: scale(1.2)}
.list04 .list04_list .list li:hover .text span{background: linear-gradient(to right,rgba(105,165,206,1),rgba(12,80,142,1)); border: 1px solid #fff;}
.list04 .list04_list .list li:hover .text span i{background: url("../image/ico07.png") no-repeat 12px 12px;}

.list04 .list04_list .list li:nth-child(1){animation-delay: .6s; -webkit-animation-delay: .6s}
.list04 .list04_list .list li:nth-child(2){animation-delay: .7s; -webkit-animation-delay: .7s}
.list04 .list04_list .list li:nth-child(3){animation-delay: .8s; -webkit-animation-delay: .8s}