.banner-header .swiper-container { width : 100% }
.banner-header .swiper-slide img { width : 100% ; height : auto }
.banner-header .swiper-pagination span { width : 15px ; height : 4px ; background-color : #FFFFFF ; opacity : 1 ; border-radius : 0px ; margin : 0px 5px !important }
.banner-header .swiper-pagination .swiper-pagination-bullet-active { width : 30px ; height : 4px ; background-color : #D50C0C }

.product { margin-top : 160px ; margin-bottom : 165px }
.product .left { float : left }
.product .title h2 { display : inline-block ; margin-top : 10px ; margin-right : 20px ; color : #B20808 ; font-size : 26px ; font-weight : bold }
.product .title strong { display : inline-block ; color : #B3B3B3 ; font-size : 28px ; font-family : Arial ; font-weight : bold }
.product .left i { display : block ; width : 2px ; height : 60px ; background-color : #DFDFDF ; margin-top : 18px }
.product .left li { margin-top : 15px ; cursor : pointer }
.product .left li strong { display : inline-block ; height : 42px ; background-color : transparent ; padding : 0px 0px ; margin-right : 20px ; color : #444444 ; font-size : 18px ; font-weight : bold ; line-height : 42px ; transition : .5s }
.product .left li:first-of-type strong { padding : 0px 36px ; background-color : #B10808 ; color : #FFFFFF }
.product .left li em { display : inline-block ; color : transparent ; font-size : 20px ; transition : 1s }
.product .left li:first-of-type em { color : #888888 }
.product .left .more { display : block ; width : 140px ; height : 46px ; border : solid 2px #666666 ; margin-top : 138px ; color : #666666 ; font-size : 18px ; font-weight : bold ; text-align : center ; line-height : 46px ; transition : 1s }
.product .left .more:hover { background-color : #000000 ; border-color : #000000 ; color : #FFFFFF }
.product .right { float : right }
.product .right li { width : 820px ; height : 0px ; transition : .5s ; transition-timing-function : ease-in-out ; overflow : hidden }
.product .right li:first-of-type { height : 620px }
.product .right li:hover { transform: translateY(-2px) }
.product .right li a { display : block ; width : 780px ; height : 580px ; margin : 20px 20px ; position : relative }
.product .right li .img-box { display : table-cell ; width : 780px ; height : 580px ; margin : 20px 20px ; text-align : center ; vertical-align : middle ; transition : .5s ;  }
.product .right img { display : inline-block ; max-width : 100% ; max-height : 100% ; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.35) }
.product .right .text-container { width : 780px ; height : 120px ; background-color : rgba(0,0,0,.5) ; padding-left : 31px ; box-sizing : border-box ; line-height : 120px ; position : absolute ; left : 0px ; bottom : 0px }
.product .right p { display : inline-block ; color : #FFFFFF ; font-size : 16px ; line-height : 36px !important ; vertical-align : middle }

.about { background-color : #F8F8F8 ; overflow : hidden }
.about .text-container { margin-top : 85px ; margin-bottom : 91px }
.about .left { float : left ; margin-right : 124px }
.about .left h2 { margin-top : 5px ; color : #B20808 ; font-size : 26px ; font-weight : bold }
.about .left strong { display : block ; margin-top : 15px ; color : #B3B3B3 ; font-size : 28px ; font-family : Arial ; font-weight : bold }
.about .right { padding-left : 125px ; float : left ; border-left : solid 1px #D3D3D3 }
.about .right p { max-width : 900px ; color : #666666 ; font-size : 16px ; text-indent : 2em ; line-height : 36px }
.about .img-container { position : relative ; cursor : pointer }
.about .img-container img { filter : grayscale(100%) ; transition : .5s }
.about .img-container:hover img { filter : grayscale(0%) }
.about .img-container .button { width : 140px ; height : 46px ; background-color : #B10808 ; color : #FFFFFF ; font-size : 18px ; font-weight : bold ; text-align : center ; line-height : 46px ; position : absolute ; left : calc(50% - 70px) ; top : calc(50% - 23px) ; transition : .5s }
.about .img-container .button:hover { background-color : #000000 ; color : #FFFFFF }

.join { background : url(../images/index-join-8.jpg) center top no-repeat ; text-align : center ; overflow : hidden }
.join .title { margin-top : 140px }
.join .title h2 { color : #B20808 ; font-size : 26px ; font-weight : bold }
.join .title strong { display : block ; margin-top : 15px ; margin-bottom : 45px ; color : #B3B3B3 ; font-size : Arial ; font-size : 28px ; font-weight : bold }
.join .title b { color : #666666 ; font-size : 28px ; font-weight : bold }
.join .title em { color : #C61414 ; font-size : 28px ; font-weight : bold }
.join .list { display : flex ; flex-wrap : wrap ; margin-top : 80px ; margin-bottom : 130px }
.join .list li { width : 30% ; flex-grow : 1 ; height : 431px ; transition : .5s ; transition-timing-function : ease-in-out }
.join .list li:first-of-type, .join .list li:nth-of-type(2) { border-right : solid 1px #DEDEDE ; border-bottom : solid 1px #DEDEDE }
.join .list li:nth-of-type(3) { border-bottom : solid 1px #DEDEDE }
.join .list li:nth-of-type(4), .join .list li:nth-of-type(5) { border-right : solid 1px #DEDEDE }
.join .list li:hover { background-color : #FFFFFF ; box-shadow: 0 15px 30px rgba(0,0,0,.1) ; transform: translateY(-4px) }
.join .list li .icon { height : 180px }
.join .list li:first-of-type .icon { background : url(../images/index-join-1.png) center center no-repeat }
.join .list li:nth-of-type(2) .icon { background : url(../images/index-join-2.png) center center no-repeat }
.join .list li:nth-of-type(3) .icon { background : url(../images/index-join-3.png) center center no-repeat }
.join .list li:nth-of-type(4) .icon { background : url(../images/index-join-4.png) center center no-repeat }
.join .list li:nth-of-type(5) .icon { background : url(../images/index-join-5.png) center center no-repeat }
.join .list li:last-of-type .icon { background : url(../images/index-join-6.png) center center no-repeat }
.join .list strong { color : #343434 ; font-size : 24px }
.join .list p { margin-top : 25px ; padding : 0px 60px ; color : #666666 ; font-size : 15px ; line-height : 36px }
.join .form-container { height : 117px ; background : url(../images/index-join-10.jpg) no-repeat }
.join .form-container form { display : flex ; align-items : center ; height : 100% }
.join .form-container i { display : block ; width : 38px ; height : 40px ; background : url(../images/index-join-9.png) center center no-repeat ; margin-right : 63px }
.join .form-container input { background-color : #FFFFFF ; border-radius : 4px ; color : #656565 ; font-size : 15px ; text-indent : 15px }
.join .form-container .name, .join .form-container .tel { width : 220px ; height : 48px }
.join .form-container .name { margin-right : 47px }
.join .form-container .tel { margin-right : 37px }
.join .form-container .message { width : 430px ; height : 48px ; margin-right : 82px }
.join .form-container .submit { width : 160px ; height : 46px ; background-color : #000000 ;  ; color : #FFFFFF ; font-size : 16px ; text-align : center ; line-height : 46px ; text-indent : 0px ; cursor : pointer }

.case { height : 950px ; position : relative ; overflow : hidden }
.case .background { width : 50% ; height : 100% ; background : url(../images/index-case.png)  no-repeat ; position : absolute ; z-index : -1 }
.case .container { position : relative }
.case h2 { margin-top : 145px ; color : #FFFFFF ; font-size : 26px ; font-weight : bold }
.case strong { display : block ;  margin-top : 15px ; color : #FFFFFF ; font-size : 28px ; font-family : Arial ; font-weight : bold }
.case .line-1 { display : block ;  width : 1px ; height : 260px ; background-color : #B9B9B9 ; margin-top : 59px }
.case .more { width : 140px ; height : 48px ; background-color : #B10808 ; border-radius : 2px ; margin-top : 217px ; color : #FFFFFF ; font-size : 18px ; font-family : Arial ; font-weight : bold ; text-align : center ; line-height : 48px ; transition : .5s ; cursor : pointer }
.case .more:hover { background-color : #000000 }

.banner-footer { position : absolute ; left : 324px ; top : 0px ; --swiper-navigation-size : 30px ; --swiper-theme-color : #FFFFFF }
.banner-footer .swiper-container { width : 1286px ; height : 700px ;  }
.banner-footer .swiper-slide a { display : block ; position : relative }
.banner-footer .swiper-slide .img { width : 360px ; height : 700px ; background-position : center center ; background-repeat : no-repeat ; background-size : cover }
.banner-footer .swiper-slide .mask { width : 360px ; height : 360px ; background : rgba(0,0,0,.9) ; color : #FFFFFF ; font-size : 18px ; text-align : center ; line-height : 360px ; position : absolute ; left : 0px ; bottom : -360px ; transition : .5s }
.banner-footer .swiper-slide a:hover .mask { bottom : 0px }
.banner-footer .navigation-container { position : absolute ; left : -320px ; bottom : 150px }
.banner-footer .swiper-button-prev, .banner-footer .swiper-button-next { margin-top : 0px ; position : static }
.banner-footer .line-2 { display : block ; width : 1px ; height : 31px ; background : #FFFFFF ; float : left ; margin-right : 45px }
.banner-footer .swiper-button-prev { float : left ; margin-right : 45px }
.banner-footer .swiper-button-next { float : left }
.banner-footer .swiper-pagination { width : auto ; left : -320px ; bottom : 217px ; color : #FFFFFF ; font-family : Arial ; font-size : 30px }

.news { height : 647px ; background-color : #F8F8F8 ; overflow : hidden }
.news h2 { margin-top : 142px ; color : #B10808 ; font-family : Arial ; font-size : 26px ; font-weight : bold }
.news strong { display : block ; margin-top : 15px ; color : #B3B3B3 ; font-size : 28px ; font-weight : bold }
.news ul { display : flex ; margin-top : 68px }
.news ul li { position : relative }
.news ul li:nth-of-type(1), .news ul li:nth-of-type(2) { margin-right : 45px }
.news ul h3 { height : 54px ; border-bottom : solid 1px #E0E0E0 ; color : #333333 ; font-size : 18px ; font-weight : bold ; transition : .5s }
.news ul li:hover h3 { color : #C61414 }
.news ul i { display : block ; width : 52px ; height : 1px ; background-color : #939393 ; position : relative ; bottom : 1px ; transition : .5s }
.news ul li:hover i { width : 100% ; background-color : #B10808 }
.news ul p { margin-top : 28px ; margin-bottom : 24px ; color : #666666 ; font-size : 16px ; line-height : 28px }
.news ul em { display : inline-block ; color : #B3B3B3 ; font-size : 14px ; font-weight : bold }
.news ul span { display : inline-block ; width : 36px ; height : 15px ; background : url(../images/index-news.png) left bottom no-repeat ; opacity : 0 ; position : absolute ; right : 50px ; transition : .5s }
.news ul li:hover span { opacity : 1 ; right : 0px }