
/*----banner----*/
.banner{width: 100%; height: 800px; margin-top: 60px; overflow: hidden; position: fixed}
.banner .img{width: 100%; height: 100%; background-position: center; background-size: cover}

.banner .txt{width: 600px; position: absolute; bottom: 25%; right: 15%; text-align: right}
.banner .txt h3{font-size: 30px; color: #333; margin-bottom: 8px; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s .8s; -webkit-transition: all ease .4s .8s}
.banner .txt h4{font-size: 20px; color: #333; margin-bottom: 10px; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s 1s; -webkit-transition: all ease .4s 1s}
.banner .txt p{font-size: 20px; color: #666; font-family: 'novecentowide-book'; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s 1.2s; -webkit-transition: all ease .4s 1.2s }

.banner .swiper-slide-active .txt h3{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}
.banner .swiper-slide-active .txt p{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}
.banner .swiper-slide-active .txt h4{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}

.mark{width: 100%; height: 860px; position: relative;}

/*----content----*/
.content{position: relative; background: #fff; z-index: 3}

.title{position: relative; margin: 0 auto 50px auto; text-align: center}
/*.title:before{content: ""; display: block; width: 46px; height: 46px; background: url("../image/logoi.png") no-repeat 0 0; position: absolute; top: 0; left: 0; margin: -4px 0 0 0}*/
.title h1{font-size: 18px; color: #222; line-height: 22px; font-weight: bold; font-family: 'novecentowide-book';}
.title p{font-size: 14px; color: #222;}
/*.title span{display: block; width: 50px; height: 2px; background: #fa8504; position: absolute; bottom: 0; left: 0; margin: 0 0 8px 120px}*/

/*----list01----*/
.list01{position: relative; padding: 80px 0 0 0; overflow: hidden}
.list01 .list01_list{width: 100%; margin-bottom: 80px; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); overflow: hidden}
.list01 .list01_list .list{list-style: none; margin: 50px -3.3333% 50px 0; }
.list01 .list01_list .list li{float: left; width: 30%; margin-right: 3.3333%; position: relative}
.list01 .list01_list .list li:before{content: ""; display: block; width: 1px; height: 90px; background: rgba(0,0,0,.08); position: absolute; top: 0; right: 0; margin-top: 10px;}
.list01 .list01_list .list li:nth-child(3):before{display: none}
.list01 .list01_list .list li .img{width: 100px; height: 100px; position: relative; transition: all ease .5s; -webkit-transition: all ease .5s}
.list01 .list01_list .list li .img img{width: 100%; transition: all ease .2s; -webkit-transition: all ease .2s}
.list01 .list01_list .list li .img .img_on{width: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: all ease .2s; -webkit-transition: all ease .2s}
.list01 .list01_list .list li .txt{width: 60%; margin-left: 5%; margin-top: 12px;}
.list01 .list01_list .list li .txt h3{font-size: 18px; color: #333; margin-bottom: 14px}
.list01 .list01_list .list li .txt p{font-size: 12px; color: #666; line-height: 22px;}

.list01 .list01_list .list li:hover .img{transform: rotateY(360deg); -webkit-transform: rotateY(360deg)}
.list01 .list01_list .list li:hover .img img{opacity: 0}
.list01 .list01_list .list li:hover .img .img_on{opacity: 1}
.list01 .list01_list .list li:hover .txt h3{color: #fa8504; transition: all ease .4s; -webkit-transition: all ease .4s}

.list01 .list01_con{width: 90%; margin: 0 auto}
.list01 .list01_con .list{list-style: none; margin: 0 -1% 0 0}
.list01 .list01_con .list li{float: left; width: 24%; margin-right: 1%; position: relative}
.list01 .list01_con .list li .img{width: 100%; overflow: hidden}
.list01 .list01_con .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list li .txt{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.0); text-align: center; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list li .txt h3{font-size: 18px; color: #fff; margin-top: 20%; transform: translateY(20px); -webkit-transform: translateY(20px); opacity: 0;  transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list li .txt span{display: block; width: 0; height: 1px; margin: 16px auto; background: #fa8504; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list li .txt i{display: block; width: 40px; height: 40px; margin: 0 auto; background: url("../image/ico01.png") no-repeat; transform: translateY(-30px); -webkit-transform: translateY(-30px); opacity: 0; transition: all ease .6s; -webkit-transition: all ease .6s}

.list01 .list01_con .list li:hover .img img{transform: scale(1.08); -webkit-transform: scale(1.08)}
.list01 .list01_con .list li:hover .txt{background: rgba(0,0,0,.7)}
.list01 .list01_con .list li:hover .txt h3{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}
.list01 .list01_con .list li:hover .txt span{width: 20%}
.list01 .list01_con .list li:hover .txt i{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1}

/*----list02----*/
.list02{width: 100%; height: 580px; position: relative; margin-top: 80px; padding-top: 120px; background: url("../image/img01.jpg") no-repeat fixed; background-size: cover; overflow: hidden}
.list02 .list02_con{width: 80%; margin-left: 20%; padding: 50px 40px; background: #fff; position: relative; z-index: 2}
.list02 .list02_con h1{font-size: 18px; color: #333; margin-bottom: 30px}
.list02 .list02_con p{font-size: 13px; color: #333; line-height: 28px;}
.list02 .list02_con .link{position: relative; width: 140px; line-height: 34px; text-align: center; margin: 40px 0 0 0; border: 1px solid #999; transition: all ease .4s; -webkit-transition: all ease .4s}
.list02 .list02_con .link h5{font-size: 13px; color: #333; font-family: 'novecentowide-book'; position: relative; z-index: 2; transition: all ease .4s; -webkit-transition: all ease .4s}
.list02 .list02_con .link h5 i{font-size: 16px; color: #fff; transition: all ease .4s; -webkit-transition: all ease .4s}
.list02 .list02_con .link span{display: block; width: 0; height: 100%; margin: 0; background: #fa8504; position: absolute; top: 0; left: 0; z-index: 1; transition: all ease .4s; -webkit-transition: all ease .4s}
.list02 .list02_con .link:hover{border: 1px solid #fa8504}
.list02 .list02_con .link:hover h5{color: #fff;}
.list02 .list02_con .link:hover h5 i{margin-left: 20px;}
.list02 .list02_con .link:hover span{width: 100%}

.list02 span{display: block; width: 80%; height: 120px; background: #fa8504; position: absolute; top: 0; right: 0; margin: 260px 40px 0 0}
.list02 .t{width: 60px; height: 240px; position: absolute; top: 0; left: 0; background: url("../image/ico05.png") no-repeat;}

/*----list03----*/
.list03{position: relative; padding: 80px 0 0 0}
.list03 .list03_con .list{list-style: none; margin-right: -2.3333%}
.list03 .list03_con .list li{float: left; width: 31%; margin-right: 2.3333%;}
.list03 .list03_con .list li:nth-child(1){animation-delay: .6s}
.list03 .list03_con .list li:nth-child(2){animation-delay: .8s}
.list03 .list03_con .list li:nth-child(3){animation-delay: 1s}
.list03 .list03_con .list li .img{width: 100%; height: 190px; overflow: hidden}
.list03 .list03_con .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_con .list li .txt{width: 100%; height: 80px; padding-top: 16px; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_con .list li .txt h3{font-size: 15px; color: #333; margin-bottom: 8px;}
.list03 .list03_con .list li .txt p{font-size: 12px; color: #666; line-height: 18px;}
.list03 .list03_con .list li .txt span{display: block; position: relative; width: 100%; height: 1px; background: #e0e0e0; margin: 10px 0;}
.list03 .list03_con .list li .txt span:before{content: ""; display: block; width: 0; height: 1px; position: absolute; top: 0; left: 0; background: #fa8504; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list03_con .list li .txt h6{font-size: 18px; color: #999; font-family: 'novecentowide-book'; transition: all ease .4s; -webkit-transition: all ease .4s}

.list03 .list03_con .list li:hover .img img{transform: scale(1.06); -webkit-transform: scale(1.06)}
.list03 .list03_con .list li:hover .txt{transform: translateY(10px); -webkit-transform: translateY(10px)}
.list03 .list03_con .list li:hover .txt span:before{width: 100%}
.list03 .list03_con .list li:hover .txt h6{color: #fa8504}

/*----list04----*/
.list04{position: relative; width: 100%; height: 300px; margin-top: 120px; background: url("../image/img02.jpg") no-repeat; background-size: cover; overflow: hidden}
.list04 .li{width: 25%; float: left; margin-top: 100px; text-align: center; position: relative; z-index: 2}
.list04 .li span{height: 60px; font-size: 50px; color: #fff; margin-top: 10px; font-family:'novecentowide-book'}
.list04 .li i{font-size: 12px; font-style: normal; color: #fff; vertical-align: top; line-height: 32px; padding-left: 6px}
.list04 .li p{font-size: 12px; color: #fff; line-height: 30px}

/*----list05----*/
.list05{position: relative; padding: 80px 0 80px 0; overflow: hidden}
.list05 .title{width: 320px;}
.list05  h6{font-size: 16px; color: #333; text-align: center; padding: 0 0 30px 0}
.list05 .list05_con .list{list-style: none; margin-top: 60px; margin-right: -3%}
.list05 .list05_con .list li{float: left; width: 22%; margin-right: 3%; margin-bottom: 30px; cursor: pointer}
.list05 .list05_con .list li .ico{width: 70px; height: 68px; margin: 0 auto 20px auto; transition: all ease-out .3s; -webkit-transition: all ease-out .3s}
.list05 .list05_con .list li .ico01{background: url("../image/ico06.png") no-repeat 0 0}
.list05 .list05_con .list li .ico02{background: url("../image/ico06.png") no-repeat 0 -131px;}
.list05 .list05_con .list li .ico03{background: url("../image/ico06.png") no-repeat 0 -263px;}
.list05 .list05_con .list li .ico04{background: url("../image/ico07.png") no-repeat 0 0;}
.list05 .list05_con .list li .ico05{background: url("../image/ico06.png") no-repeat 0 -394px}
.list05 .list05_con .list li .ico06{background: url("../image/ico07.png") no-repeat 0 -131px;}
.list05 .list05_con .list li .ico07{background: url("../image/ico07.png") no-repeat 0 -263px;}
.list05 .list05_con .list li .ico08{background: url("../image/ico07.png") no-repeat 0 -394px;}
.list05 .list05_con .list li .txt{text-align: center; transition: all ease-out .3s; -webkit-transition: all ease-out .3s}
.list05 .list05_con .list li .txt h3{font-size: 16px; color: #333; margin-bottom: 8px}
.list05 .list05_con .list li .txt p{font-size: 13px; color: #666; line-height: 22px}

.list05 .list05_con .list li:hover .ico01{background: url("../image/ico06.png") no-repeat 0 -66px}
.list05 .list05_con .list li:hover .ico02{background: url("../image/ico06.png") no-repeat 0 -197px}
.list05 .list05_con .list li:hover .ico03{background: url("../image/ico06.png") no-repeat 0 -329px}
.list05 .list05_con .list li:hover .ico04{background: url("../image/ico07.png") no-repeat 0 -66px}
.list05 .list05_con .list li:hover .ico05{background: url("../image/ico06.png") no-repeat 0 -460px}
.list05 .list05_con .list li:hover .ico06{background: url("../image/ico07.png") no-repeat 0 -197px}
.list05 .list05_con .list li:hover .ico07{background: url("../image/ico07.png") no-repeat 0 -329px}
.list05 .list05_con .list li:hover .ico08{background: url("../image/ico07.png") no-repeat 0 -460px}
.list05 .list05_con .list li:hover .txt h3{color: #053c8f}


/*--------*/
.img_fix{position: fixed; top: 50%; left: 10px; z-index: 9}
.img_fix .img{width: 140px; height: auto; overflow: hidden}
.img_fix .img img{float: none; display: block; width: 100%}












