/*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-size: cover;
    background-position: center;
    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{position: absolute; top: 60%; left: 120px;}
.banner .text h1{font-size: 50px; color: #fff; font-weight: bold; line-height: 80px;}
.banner .text h6{font-size: 40px; color: #fff; text-transform: uppercase; font-weight: bold;}

.index_end{position: absolute; bottom: 0; right: 0; margin: 0 40px 160px 0; z-index: 9}
.index_end h1{font-size: 20px; color: #fff; font-family: 'DisneyEnglish-Bold'; transform: rotate(90deg); -webkit-transform: rotate(90deg)}
.index_end .line{display: block; width: 1px; height: 30px; margin: 40px 0 0 40px; background: #fff;}

.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; color: #181818; margin-bottom: 4px; font-weight: bold;}
.title h6{font-size: 36px; color: #999; text-transform: uppercase; font-family: 'DisneyEnglish-Bold'}

.a_link{display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; margin-top: 40px; background: #fff; overflow: hidden; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link:before{content: ""; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; background: #60b131; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link i{font-size: 14px; color: #333; font-style: normal; position: relative; z-index: 2; transition: all ease .4s; -webkit-transition: all ease .4s}
.a_link:hover:before{width: 100%;}
.a_link:hover i{color: #fff;}


/*----list01----*/
.list01{position: relative; overflow: hidden;}
.list01 .list01_con{height: 820px; position: relative;}

.list01 .list01_con .title{position: absolute; top: 0; left: 0; margin: 10% 0 0 5%;}
.list01 .list01_con .title h1{color: #fff;}
.list01 .list01_con .title h6{color: #fff;}

.list01 .list01_bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.list01 .list01_bg .bg_b{width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; overflow: hidden; transform: scale(1.2); -webkit-transform: scale(1.2); transition: all ease 5s; -webkit-transition: all ease 5s}
.list01 .list01_bg .bg_b img{float: none; display: block; width: 100%}
.list01 .list01_bg .bg_b.active{transform: scale(1); -webkit-transform: scale(1); opacity: 1}

.list01 .list01_con .list01_list{width: 40%; margin: 0 0 0 55%; padding-top: 10%; position: relative; z-index: 2}
.list01 .list01_con .list01_list .list{}
.list01 .list01_con .list01_list .list li{position: relative; width: 48%; float: left; margin-right: 2%; margin-bottom: 20px; padding: 50px 0; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; box-sizing: border-box; background: rgba(0,0,0,.5); overflow: hidden; transition: all ease .7s; -webkit-transition: all ease .7s}
.list01 .list01_con .list01_list .list li .li_box{text-align: center}
.list01 .list01_con .list01_list .list li .li_box .img{width: 40px; height: 40px; margin: 0 auto 30px auto}
.list01 .list01_con .list01_list .list li .li_box .img img{float: none}
.list01 .list01_con .list01_list .list li .li_box h1{font-size: 16px; color: #fff; margin-bottom: 10px;}
.list01 .list01_con .list01_list .list li .li_box {font-size: 14px; color: #fff; font-family: 'novecentowide-book'}

.list01 .list01_con .list01_list .list li .li_boxv{width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 40px 20px; background: #dedede; transform: scale(0.5); -webkit-transform: scale(0.5); opacity: 0; transition: all ease .5s; -webkit-transition: all ease .5s}
.list01 .list01_con .list01_list .list li .li_boxv h1{font-size: 16px; color: #fff; margin-bottom: 10px;}
.list01 .list01_con .list01_list .list li .li_boxv h6{font-size: 14px; color: #fff; margin-bottom: 20px; font-family: 'novecentowide-book'}
.list01 .list01_con .list01_list .list li .li_boxv p{font-size: 13px; color: #fff; line-height: 22px; transform: translateY(40px); -webkit-transform: translateY(40px); opacity: 0; transition: all ease .5s .3s; -webkit-transition: all ease .5s .3s}

.list01 .list01_con .list01_list .list li:hover{border: 1px solid #ff0000;}
.list01 .list01_con .list01_list .list li:hover .li_boxv{background: #ff0000; transform: scale(1); -webkit-transform: scale(1); opacity: 1}
.list01 .list01_con .list01_list .list li:hover .li_boxv p{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

.list01 .list01_con .list01_list .list li:nth-child(1):hover{border: 1px solid #25ce17;}
.list01 .list01_con .list01_list .list li:nth-child(2):hover{border: 1px solid #22455d;}
.list01 .list01_con .list01_list .list li:nth-child(3):hover{border: 1px solid #ffbc53;}
.list01 .list01_con .list01_list .list li:nth-child(4):hover{border: 1px solid #31a99d;}
.list01 .list01_con .list01_list .list li:nth-child(1):hover .li_boxv{background: #25ce17}
.list01 .list01_con .list01_list .list li:nth-child(2):hover .li_boxv{background: #22455d}
.list01 .list01_con .list01_list .list li:nth-child(3):hover .li_boxv{background: #ffbc53}
.list01 .list01_con .list01_list .list li:nth-child(4):hover .li_boxv{background: #31a99d}


/*----list02----*/
.list02{position: relative; padding: 120px 0; background: #f0f0f0 url("../image/bg01.jpg") no-repeat; overflow: hidden}
.list02 .list02_left{width: 50%; padding-right: 5%;}
.list02 .list02_left .title{margin-bottom: 40px;}
.list02 .list02_left p{font-size: 15px; color: #444; line-height: 1.8}
.list02 .list02_right{width: 50%;}
.list02 .list02_right .list02_video{width: 100%;}


/*----list03----*/
.list03{padding: 80px 0; overflow: hidden}

.list03 .list03_con{}
.list03 .list03_con .list{list-style: none; margin-right: -2%}
.list03 .list03_con .list li{width: 31.3333%; float: left; margin-right: 2%; border: 1px solid #dedede; background: #fff; position: relative; box-sizing: border-box}
.list03 .list03_con .list li .img{width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0.3); -webkit-transform: scale(0.3); transition: all .4s; -webkit-transition: all .4s}
.list03 .list03_con .list li .img img{height: 100%}

.list03 .list03_con .list li .txt{padding: 40px 40px; height: 310px; position: relative; transition: all .4s; -webkit-transition: all .4s; z-index: 3}
.list03 .list03_con .list li .txt .data h6{font-size: 16px; color: #999; margin-bottom: 6px; font-family: 'novecentowide-book'; transition: all .4s; -webkit-transition: all .4s}
.list03 .list03_con .list li .txt .data h6 i{display: block; font-size: 22px; color: #333; font-style: normal;}
.list03 .list03_con .list li .txt h3{font-size: 18px; color: #333; margin-bottom: 10px; transition: all .4s; -webkit-transition: all .4s}
.list03 .list03_con .list li .txt p{font-size: 14px; color: #666; line-height: 22px; margin-bottom: 50px; transition: all .4s; -webkit-transition: all .4s}
.list03 .list03_con .list li .txt span{display: block; width: 120px; height: 32px; line-height: 32px; font-size: 13px; color: #fff; background: #dedede; border-radius: 16px; text-align: center; font-family: 'novecentowide-book'; transition: all .4s; -webkit-transition: all .4s}

.list03 .list03_con .list li:hover .img{transform: scale(1); -webkit-transform: scale(1); opacity: 1}
.list03 .list03_con .list li:hover .txt{background: rgba(0,0,0,.4)}
.list03 .list03_con .list li:hover .txt .data h6{color: #fff}
.list03 .list03_con .list li:hover .txt .data h6 i{color: #fff}
.list03 .list03_con .list li:hover .txt h3{color: #fff}
.list03 .list03_con .list li:hover .txt p{color: #fff;}
.list03 .list03_con .list li:hover .txt span{color: #333; background: #fff;}

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


/*----list05----*/
.list05{padding: 80px 0 100px 0; background: #f1f1f1; position: relative}

.list05 .title{width: 16%; height: 100%; background: #3f3f3f; position: absolute; top: 0; left: 0; padding: 80px 0 0 6%;}
.list05 .title h1{color: #fff;}
.list05 .title h6{color: #fff;}
.list05 .title:before{content: "CASE"; display: block; font-size: 180px; color: rgba(255,255,255,.1); position: absolute; top: 0; left: 0; margin: 80% 0 0 -66%; transform: rotate(90deg); -webkit-transform: rotate(90deg); font-family: 'DisneyEnglish-Bold'}

.list05 .list05_con{margin-left: 8%;}
.list05 .list05_con .list05_list{}
.list05 .list05_con .list05_list .li{margin: 0 10px;}
.list05 .list05_con .list05_list .li .img{width: 100%; overflow: hidden}
.list05 .list05_con .list05_list .li .img img{width: 100%;}
.list05 .list05_con .list05_list .li .text{padding: 30px 0; text-align: center; background: #fff;}
.list05 .list05_con .list05_list .li .text h1{font-size: 16px; color: #333;}

.list05 .list05_con .a_link{margin-left: 10px;}

.list05 .list05_con .list05_list .slick-prev, .list05 .list05_con .list05_list .slick-next{width: 80px; padding: 0 20px; margin-bottom: -100px}
.list05 .list05_con .list05_list .slick-prev{left: 86%; background: #fff;}
.list05 .list05_con .list05_list .slick-next{left: 93%; background: #dedede}