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

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

.slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    color:#fff;
}

.banner_text{width: 100%; position: absolute; top: 0; left: 0; margin-top: 16%; z-index: 9}
.banner_text img{width: 270px; float: none; display: block; margin: 0 auto 20px auto}
.banner_text h1{font-size: 50px; color: #fff; font-weight: bold; text-align: center;}

.b_down{width: 100px; position: absolute; bottom: 60px; left: 50%; margin-left: -50px; z-index: 9}
.b_down .down{display: block; width: 30px; height: 40px; margin: 0 auto 20px auto; background: url("../image/icon04.png") no-repeat;}
.b_down h3{font-size: 12px; color: #fff; text-align: center; font-family: 'novecentowide-book'}
.b_down .down{animation: down 3s infinite; -webkit-animation: down 3s infinite}

@keyframes down {
    0%{transform: translateY(0)}
    50%{transform: translateY(20px)}
    100%{transform: translateY(0)}
}

.swiper-button-prev, .swiper-button-next{top: 86%; width: 40px; height: 40px; padding: 10px}
.swiper-button-prev{left: 5%;}
.swiper-button-prev:after{width: 20px; height: 20px; background: url("../image/prev.png") no-repeat; font-size: 0; opacity: 0.8}
.swiper-button-next{right: 5%;}
.swiper-button-next:after{width: 20px; height: 20px; background: url("../image/next.png") no-repeat; font-size: 0; opacity: 0.8}
.swiper-button-prev:hover:after{opacity: 1}
.swiper-button-next:hover:after{opacity: 1}

.mark{width: 100%; height: 820px; position: relative; z-index: -1}

.wow{animation: fadeInUp 1s ease both; -webkit-animation: fadeInUp 1s ease both;}


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

.title{position: relative; margin-bottom: 60px; text-align: center; z-index: 2; animation-delay: .4s; -webkit-animation-delay: .4s}
.title h1{font-size: 42px; color: #333; font-weight: bold; margin-bottom: 10px;}
.title h4{font-size: 14px; color: #929292;}

.a_link{position: relative; display: block; width: 150px; height: 42px; line-height: 42px; text-align: center; margin-top: 40px; border: 1px solid #fff; box-sizing: border-box; overflow: hidden; transition: all ease .4s; -webkit-transition: all ease .4s; animation: fadeInUp 1s ease both; -webkit-animation: fadeInUp 1s ease both; animation-delay: .4s; -webkit-animation-delay: .4s}
.a_link i{display: inline-block; font-size: 14px; color: #fff; font-style: normal; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s; }
.a_link:before{content:""; display: block; width: 0; height: 100%; background: #fff; position: absolute; top: 0; left: 0; transition: all ease .4s; -webkit-transition: all ease .4s; }
.a_link:hover i{color: #cd0515;}
.a_link:hover:before{width: 100%;}

/*----list01----*/
.list01{position: relative; padding: 100px 0; overflow: hidden}
.list01 .list01_con{position: relative; display: flex; width: 1200px; margin: 0 auto; text-align: center}
.list01 .list01_con .li{width: 27.3333%; padding: 40px 0; margin: 0 3%; }
.list01 .list01_con .li img{width: 230px; display: block; float: none; margin: 0 auto;}
.list01 .list01_con .li:nth-child(1){background: #e60012; animation-delay: .5s; -webkit-animation-delay: .5s}
.list01 .list01_con .li:nth-child(2){background: #257339; animation-delay: .6s; -webkit-animation-delay: .6s}
.list01 .list01_con .li:nth-child(3){background: #f8f38d; animation-delay: .7s; -webkit-animation-delay: .7s}

/*----list02----*/
.list02{
    position: relative;
    overflow: hidden;
    background: url("../image/bg01.jpg") no-repeat fixed;
}

.list02 .list02_con{
    padding: 120px 0;
    text-align: center
}

.list02 .list02_con .v_play{
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;
    background: url("../image/icon08.png") no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

.list02 .list02_con .text{
    animation-delay: .6s;
    -webkit-animation-delay: .6s
}

.list02 .list02_con h1{
    font-size: 42px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 16px;
}

.list02 .list02_con h3{
    font-size: 18px;
    color: #fff;
}

.list02 .list02_video{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    opacity: 0;
    visibility: hidden;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list02 .list02_video.pay{
    z-index: 99;
    opacity: 1;
    visibility: visible;
}

.list02 .list02_video .video_con{
    width: 60%;
    margin: 10% auto 0 auto;
    position: relative;
}

.list02 .list02_video .video_con .my_video{
    width: 100%;
}

.list02 .list02_video .video_con .close{
    width: 27px;
    height: 27px;
    background: url("../image/close.png") no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 -40px 0 0;
    outline: none;
    border: none;
    cursor: pointer;
}

/*----list03----*/
.list03{
    position: relative;
    padding: 100px 0;
    overflow: hidden
}

.list03 .title{
    text-align: center;
}

.list03 .list03_text{
    margin-bottom: 80px;
    text-align: center;
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

.list03 .list03_text p{
    font-size: 14px;
    color: #696969;
    line-height: 2;
}

.list03 .list03_con{
    display: flex;
}

.list03 .list03_con .li{
    width: 25%;
    position: relative;
    overflow: hidden;
}

.list03 .list03_con .li:nth-child(1){
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

.list03 .list03_con .li:nth-child(2){
    animation-delay: .6s;
    -webkit-animation-delay: .6s
}

.list03 .list03_con .li:nth-child(3){
    animation-delay: .7s;
    -webkit-animation-delay: .7s
}

.list03 .list03_con .li:nth-child(4){
    animation-delay: .8s;
    -webkit-animation-delay: .8s
}

.list03 .list03_con .li .img{
    width: 100%;
    overflow: hidden;
}

.list03 .list03_con .li .img img{
    width: 100%;
    transition: all ease-in .4s;
    -webkit-transition: all ease-in .4s;
}

.list03 .list03_con .li .text{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 80% 40px 40px 40px;
}

.list03 .list03_con .li .text h1{
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 30px;
    transform: translateY(80px);
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list03 .list03_con .li .text h4{
    font-size: 14px;
    color: #fff;
    line-height: 2;
    transform: translateY(80px);
    opacity: 0;
    visibility: hidden;
    transition: all ease .4s .2s;
    -webkit-transition: all ease .4s .2s;
}

.list03 .list03_con .li:hover .img img{
    transform: scale(1.1);
}

.list03 .list03_con .li:hover .text h1{
    transform: translateY(20px);
}

.list03 .list03_con .li:hover .text h4{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/*----list04----*/
.list04{
    position: relative;
}

.list04 .list04_bg{
    width: 100%;
    height: 800px;
    position: relative;
}

.list04 .list04_bg .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-size: cover;
    background-position: center;
    transition: all ease-in .6s;
    -webkit-transition: all ease-in .6s;
}

.list04 .list04_bg .bg.active{
    opacity: 1;
    visibility: visible;
}

.list04 .list04_bg .bg .text{
    width: 75.5%;
    margin: 0 auto;
    padding-top: 8%;
}

.list04 .list04_bg .bg .text h1{
    font-size: 42px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
}

.list04 .list04_bg .bg .text p{
    font-size: 16px;
    color: #fff;
    line-height: 2;
    padding-right: 50%;
}

.list04 .list04_li{
    width: 75.5%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -37.75%;
    margin-bottom: 100px;
    animation-delay: .4s;
    -webkit-animation-delay: .4s
}

.list04 .list04_li .list li{
    width: 20%;
    float: left;
    background: #fff;
    padding: 40px;
    box-sizing: border-box;
    border-right: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list04 .list04_li .list li:last-child{
    border-right: none;
}

.list04 .list04_li .list li .ico{
    width: 40px;
    height: 40px;
    margin-right: 30px;
    margin-left: 20px;
    position: relative;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list04 .list04_li .list li .ico01{
    background: url("../image/icon09.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li .ico02{
    background: url("../image/icon10.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li .ico03{
    background: url("../image/icon11.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li .ico04{
    background: url("../image/icon12.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li .ico05{
    background: url("../image/icon13.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li .ico:before{
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: #f0f0f0;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 -12px 0 0;
}

.list04 .list04_li .list li .text h1{
    font-size: 16px;
    color: #333;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list04 .list04_li .list li .text h3{
    font-size: 12px;
    color: #999;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list04 .list04_li .list li.on{
    background: #cd0515;
}

.list04 .list04_li .list li.on h1{
    color: #fff;
}

.list04 .list04_li .list li.on h3{
    color: #fff;
}

.list04 .list04_li .list li.on .ico01{
    background: url("../image/icon09-1.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li.on .ico02{
    background: url("../image/icon10-1.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li.on .ico03{
    background: url("../image/icon11-1.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li.on .ico04{
    background: url("../image/icon12-1.png") no-repeat;
    background-size: cover;
}

.list04 .list04_li .list li.on .ico05{
    background: url("../image/icon13-1.png") no-repeat;
    background-size: cover;
}

/*----list05----*/
.list05{
    position: relative;
    padding: 100px 0 120px 0;
    overflow: hidden;
}

.list05 .title{
    text-align: center;
}

.list05 .list05_con{
    padding: 0 16%;
}

.list05 .list05_con .list05_list{
    padding-bottom: 120px;
    animation-delay: .4s;
    -webkit-animation-delay: .4s
}

.list05 .list05_con .list05_list .slick-list{
    overflow: visible;
}

.list05 .list05_con .list05_list .li{
    padding: 40px 30px 0 30px;
    border-top: 1px solid #dedede;
    position: relative;
}

.list05 .list05_con .list05_list .li:before{
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #cd0515;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -1px;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list05 .list05_con .list05_list .li h6{
    font-size: 14px;
    color: #999;
    margin-bottom: 30px;
    font-family: 'Montserrat-Light';
}

.list05 .list05_con .list05_list .li h1{
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin-bottom: 60px;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list05 .list05_con .list05_list .li .img{
    width: 100%;
    overflow: hidden;
}

.list05 .list05_con .list05_list .li .img img{
    width: 100%;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.list05 .list05_con .list05_list .li:hover:before{
    width: 100%;
}

.list05 .list05_con .list05_list .li:hover h1{
    color: #cd0515;
}

.list05 .list05_con .list05_list .li:hover .img img{
    transform: scale(1.1);
}