@charset "utf-8";
/* 重置样式 */
*{ padding : 0px ; margin : 0px }
body{ font-size : 14px ; color : #333 ; font-family : "微软雅黑" ; overflow-x : hidden ; cursor : default; display: block; }
img { display : inline-block ; max-width : 100% ; max-height : 100% ; border : none }
input, textarea { outline : none ; background : none ; border: none }
h1, h2, h3, h4 { font-weight : normal ; font-size : 16px }
a:focus { text-decoration : none ; outline : none }
a { color : inherit ; text-decoration : none }
textarea { resize : none ; overflow : auto }
a:hover { text-decoration : none }
/* strong, b { font-weight : normal; font-size: 22px; margin-top: 14px; display: block; } */
ul { list-style-type : none }
em, i { font-style : normal }

/* 公共样式 */
.img-box { display : table-cell ; text-align : center ; vertical-align : middle ; font-size : 0px }
.banner-box { width : 100% ; max-width : 1920px ; margin : 0px auto ; font-size : 0px }
.clear-parent::after { content : "" ; display : block ; clear : both }
.main { width : 100% ; max-width : 1300px ; margin : 0px auto }
.banner-box img { width : 100% ; height : auto }
.clear-brother { clear : both }
.pointer { cursor : pointer }

@media all and (max-width : 1300px) {
    .main { width : 1300px }
}

@font-face {
    font-family : basictitlefont;
    src : url(../font/basictitlefont-1.ttf)
}

@font-face {
    font-family : Bahnschrift;
    src : url(../font/bahnschrift.ttf)
}

@font-face {
    font-family : Avanti;
    src : url(../font/avanti-2.ttf)
}




/* header */
.header { width : 100% ; background-color : #0f2663 ; background-image : url(../images/header-bakcground.png) ; background-repeat : no-repeat ; margin : 0px auto ; transition : .5s }
.header>.container { width : 100% ; max-width : 1300px ; height : 120px ; margin : 0px auto ; overflow : hidden }
.header .left { width : /* 310px */310px ; height : /* 57px */78px ; background : url(../images/header-logo-2.png) no-repeat ; float : left ; margin-top : /* 28px */13px ; text-indent : -999px ; text-overflow : ellipsis ; overflow : hidden ; position : relative }
.header .left a { display : block ; width : 310px ; height : 57px ; position : absolute ; left : 0px ; top : 0px }
.header .center { float : left ; margin-left : 40px ; z-index : 1 }
.header .center li { width : 100px ; height : 120px ; float : left ; line-height : 120px ; text-align : center }
.header .center li.on a{color:#0f2663;}
.header .center li:hover a{color:#0f2663;}
.header .center a { display : block ; color : #FFFFFF  ; font-size : 16px }
.header .right { height : 23px ; float : right ; margin-top : 49px }
.header .right i { display : inline-block ; width : 23px ; height : 23px ; background-repeat : no-repeat ; background-position : center center }
.header .right i:first-of-type { background-image : url(../images/header-icon1.png) ; margin-right : 26px }
.header .right i:last-of-type { background-image : url(../images/header-icon2.png) ; margin-right : 15px }
.header .right span { display : inline-block ; color : #FFFFFF ; font-size : 16px ; line-height : 23px ; vertical-align : top }

.header .drop { width : 100% ; height : 0px ; background : rgb(64, 64, 64, .9) ; padding : 0px 0px ; position : absolute ; left : 0px ; top : 120px ; overflow : hidden ; transition : .5s ; z-index : 2 }
.header .drop form { width : 250px ; height : 35px ; border-radius : 4px ; float : right ; margin-right : 300px ; overflow : hidden }
.header .drop .text { width : 215px ; height : 35px ; float : left ; background-color : #FFFFFF ; color : #666666 ; text-indent : 10px }
.header .drop .submit { width : 35px ; height : 35px ; background : url(../images/header-icon1.png) center center no-repeat ; background-color : ##0f2663 ; cursor : pointer }

@media all and (max-width : 1317px) {
    .header>.container { width : 1300px }
}




/* banner */
.banner { width : 100% ; max-width : 1920px ; margin : 0px auto ; position : relative ; font-size : 0px }
.banner .hd { transform : rotate(90deg) ; position : absolute ; right : -20px ; top : calc(50% - 10px) ; z-index : 1 }
.banner .hd ul { display : none }
.banner .page { color : #FFFFFF ; font-size : 14px }
.banner .page b { display : inline-block ; margin-right : 18px }
.banner .page i { display : inline-block ; width : 120px ; height : 2px ; background-image : linear-gradient(90deg,#FFFFFF 50%, rgba(255,255,255,.33) 50%) ; margin-right : 18px ; vertical-align : middle ; margin-bottom : 2px ; transition : .5s }
.banner .page span { opacity : .33 ; transition : .5s }
.banner .bd a { display : block }




/* nav-small */
.nav-small { border-bottom : solid 1px #E5E5E5 ; margin-top : 54px ; margin-bottom : 63px }
.nav-small .left { float : left ; margin-left : 2px ; font-size : 0px }
.nav-small .left a { display : inline-block ; width : 160px ; height : 48px ; color : #666666 ; font-size : 16px ; transition : .5s ; text-align : center ; line-height : 48px }
.nav-small .left a.on { background-color : ##0f2663 ; color : #000 }
.nav-small .left a:hover { background-color : #f5f5f5 ; color : #000 }
.nav-small .right { float : right ; margin-top : 6px ; margin-right : 7px ; color : #666666 ; font-size : 16px }
.nav-small .right a { transition : .5s }
.nav-small .right a:hover { color : ##0f2663 }




/* footer */
/* .footer { background-color : #313131 }
.footer .main { min-height : 290px }
.footer .left { float : left }
.footer dl { float : left ; margin-left : 80px }
.footer .left dl:first-of-type { margin-left : 17px }
.footer dt { margin-top : 35px ; margin-bottom : 12px ; color : #FFFFFF ; font-size : 16px }
.footer dd { color : #767676 ; transition : .5s }
.footer dd a { display : inline-block ; transition : .5s ; line-height : 30px }
.footer .naughty { width : 201px }
.footer .naughty dd { display : inline-block }
.footer .naughty dd:nth-of-type(2n + 1) { min-width : 112px ; margin-right : 42px }
.footer dd a:hover { color : #FFFFFF }
.footer .right { width : 210px ; float : right }
.footer .right em { display : block ; float : right ; margin-top : 22px ; color : #FFFFFF ; font-size : 18px }
.footer .right span { display : block ; float : right ; margin-top : 8px ; color : #FFFFFF ; font-family : Impact ; font-size : 36px }
.footer .right>div { width : 108px ; height : 108px ; float : right ; margin-top : 16px }
.footer .right .img-box { width : 108px ; height : 108px }
.footer .right b { display : block ; float : right ; margin-top : 18px ; color : #999999 ; font-size : 14px }
.footer .bottom { height : 126px ; padding-top : 28px ; border-top : solid 1px #525252 ; box-sizing : border-box ; color : #767676 ; text-align : center }
.footer .bottom span { display : inline-block ; margin-right : 12px }
.footer .bottom b { display : inline-block ; margin-right : 12px }
.footer .bottom i { display : inline-block } */
.footer { background-color : #0f2663 ; color : #fff ; font-size : 16px }
.footer-top { padding-top : 56px ; min-height : 200px ; border-bottom : solid 1px #fff }
.footer-top .flagship { width : 200px ; float : left ; margin-right : 80px }
.footer-top .flagship em { display : block ; margin-bottom : 35px }
.footer-top .flagship a { display : inline-block ; width : 63px ; height : 20px ; background : url(../images/footer-icon1a.png) center center no-repeat ; background-size : 100% 100% ; margin-right : 50px }
.footer-top .flagship a:last-of-type { margin-right : 0px }
.footer-top .flagship a:hover { background-image : url(../images/footer-icon1b.png) }
.footer-top .follow { width : 200px ; float : left ; margin-right : 150px }
.footer-top .follow em { display : block ; margin-bottom : 31px }
.footer-top .follow>div { display : inline-block ; width : 48px ; height : 48px ; background-color : #e62129 ; background-repeat : no-repeat ; background-position : center center ; border-radius : 50% ; margin-right : 23px ; transition : .5s ; cursor : pointer ; position : relative }
.footer-top .follow div:last-of-type { margin-right : 0px }
.footer-top .follow>div:hover { background-color : #998767 }
.footer-top .follow .WeChat { /* background-image : url(../images/footer-icon2.png) */ }
.footer-top .follow .trill { /* background-image : url(../images/footer-icon3.png) */ }
.footer-top .QRbox { display : none ; width : 130px ; background-color : #FFFFFF ; box-shadow: 0 15px 30px rgba(0,0,0,.1) ; font-size : 0px ; position : absolute ; left : calc(50% - 65px) ; bottom : calc(100% + 10px) }
.footer-top .follow>div:hover .QRbox { display : block }
.footer-top .QRbox::after { content : "" ; display : block ; border : solid 6px transparent ; border-top : solid 6px #FFFFFF ; position : absolute ; left : calc(50% - 6px) ; top : 100% }
.footer-top .QRbox .item { display : inline-block ; width : 100px ; padding : 8px 15px 15px 15px ; text-align : center }
.footer-top .QRbox span { display : block ; margin-bottom : 3px ; color : #333333 ; font-size : 14px }
.footer-top .QRbox .img-box { width : 100px ; height : 100px }
.footer-top .tel { float : left }
.footer-top .tel em { display : block ; margin-bottom : 32px }
.footer-top .tel i { display : inline-block ; width : 8px ; height : 18px ; background : url(../images/footer-icon4.png) center center no-repeat ; margin-right : 12px }
.footer-top .tel span { color : #FFFFFF ; font-family : Avanti ; font-size : 24px }
.footer-top dl { width : 200px ; height : 48px ; border : solid 1px #fff ; float : right ; position : relative }
.footer-top dt { height : 48px ; text-align : center ; line-height : 48px ; cursor : pointer }
.footer-top dt::after { content : "" ; display : inline-block ; width : 14px ; height : 9px ; background : url(../images/footer-icon5.png) center center no-repeat ; margin-left : 22px }
.footer-top dd { width : 200px ; max-height : 0px ; background-color : #fff ; padding : 0px 0px ; border : solid 1px transparent ; position : absolute ; left : -1px ; top : 49px ; transition : .5s ; overflow : hidden }
.footer-top dl:hover dd { max-height : 200px ; padding : 8px 0px ; border-color : #535353 }
.footer-top dd a { display : block ; line-height : 24px ; text-align : center ; transition : .5s }
.footer-top dd a:hover { color : #FFFFFF }

.footer .bottom { /* height : 130px ; */padding:30px 0; color : #fff ; font-size : 14px ; text-align : center ; /* line-height : 130px */}





/* index */
.index-product { overflow : hidden}
.index-product .left { float : left }
.index-product .left h2 { margin-top : 86px ; color : #000000 ; font-family : Arial ; font-size : 36px }
.index-product .left strong { display : block ; margin-top : 12px ; font-size : 30px }
.index-product .right { float : right ; margin-top : 117px }
.index-product .right a { color : #000000 ; font-size : 16px }
.index-product .right a::before { content : "" ; display : inline-block ; width : 22px ; height : 1px ; background-color : #BBBBBB ; margin-right : 14px ; vertical-align : middle ; transition : .5s }
.index-product .right a:hover::before { width : 50px }
.index-product .swiper1 { height : 624px ; margin-top : 43px ; margin-bottom : 86px }
.index-product .swiper-slide a { display : block ; position : relative }
.index-product .swiper-slide .img { width : 630px ; height : 420px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover }
.index-product .swiper-slide .mask { width : 630px ; height : 420px ; background-color : rgba(0,0,0,.4) ; opacity : 0 ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.index-product .swiper-slide:hover .mask { opacity : 1 }
.index-product .swiper-slide h3 { margin-top : 21px ; margin-bottom : 10px ; color : #393738 ; font-size : 24px }
.index-product .swiper-slide p { color : #666666 ; font-size : 16px ; line-height : 24px }
.index-product .swiper-pagination { display : flex ; align-items : center ; bottom : 2px !important ; overflow : hidden }
.index-product .swiper-pagination::before { content : "" ; display : inline-block ; width : 800px ; height : 1px ; background-color : #CCCCCC ; margin-right : 16px ; vertical-align : middle }
.index-product .swiper-pagination::after { content : "" ; display : inline-block ; width : 800px ; height : 1px ; background-color : #CCCCCC ; margin-left : 16px ; vertical-align : middle }
.index-product .swiper-pagination span { display : inline-block ; width : 5px ; flex-shrink : 0 ; height : 8.66px ; background-color : #CDCDCD ; border-radius : 0px ; color : #666666 ; font-size : 16px ; text-align : center ; line-height : 33px ; position : relative }
.index-product .swiper-pagination span::before { content : "" ; display : block ; border-width : 4.33px 2.5px ; border-style : solid ; border-color : transparent #CDCDCD transparent transparent ; position : absolute ; right : 5px }
.index-product .swiper-pagination span::after { content : "" ; display : block ; border-width : 4.33px 2.5px ; border-style : solid ; border-color : transparent transparent transparent #CDCDCD ; position : absolute ; left : 5px }
.index-product .swiper-pagination-bullet-active { width : 38px !important ; height : 33px !important ; background : url(../images/index-product-icon.png) no-repeat ; background-color : transparent !important ; margin : 0px 8px !important }
.index-product .swiper-pagination-bullet-active::before { display : none !important }
.index-product .swiper-pagination-bullet-active::after { display : none !important }


.index-case { background : url(../images/index-case-background.jpg) center top no-repeat }
.index-case .left { float : left }
.index-case .left h2 { margin-top : 76px ; color : #FFFFFF ; font-size : 30px }
.index-case .left strong { display : block ; margin-top : 10px ; color : #EEEEEE ; font-size : 18px }
.index-case .right { width : 150px ; height : 40px ; border : solid 1px #FFFFFF ; border-radius : 20px ; margin-top : 90px ; box-sizing : border-box  ; float : right ; text-align : center ; transition : .5s }
.index-case .right:hover { background-color : #FFFFFF }
.index-case .right a { display : block ; color : #EEEEEE ; font-size : 14px ;  ; line-height : 40px ; transition : .5s }
.index-case .right:hover a { color : #000000 }
.index-case ul { margin-top : 39px ; margin-bottom : 127px }
.index-case li { width : 320px ; height : 600px ; float : left ; margin-right : 6.5px ; padding-top : 28px ; padding-bottom : 21px ; position : relative ; overflow : hidden }
.index-case ul li:last-of-type { margin-right : 0px }
.index-case li a { display : block ; width : 320px ; height : 600px ; background-color : #FFFFFF }
.index-case h3 { font-size : 20px ; text-indent : 15px ; position : absolute ; top : 71px ; z-index : 1 ; transition : .5s }
.index-case li:hover h3 { color : #FFFFFF }
.index-case span { display : block ; color : #999999 ; font-family : Arial ; text-indent : 15px ; position : absolute ; top : 102px ; z-index : 1 ; transition : .5s }
.index-case li:hover span { color : #FFFFFF }
.index-case .img-box { width : 320px ; height : 477px ; background-color : #a8a8a8 ; position : absolute ; bottom : 21px }
.index-case img { transition : .5s }
.index-case li:hover img { transform : scale(1.65) }


.index-multiple { background-color : #F8F8F8 ; padding-top : 102px ; padding-bottom : 125px }
.index-multiple .left { width : 641px ; height : 569px ; background : url(../images/index-video.jpg) no-repeat ; padding-left : 36px ; box-sizing : border-box ; float : left }
.index-multiple .left a { display : block ; width : 100% ; height : 100% ; overflow : hidden }
.index-multiple .left h3 { margin-top : 45px ; font-size : 22px ; font-family : Arial; color: #fff; }
.index-multiple .left strong { display : block ; margin-top : 24px ; font-size : 22px ; text-indent : 3px; color: #fff; }
.index-multiple .right { width : 642px ; float : right }
.index-multiple .index-join { width : 642px ; height : 278px ; background : url(../images/index-join.jpg) no-repeat ; padding-left : 34px ; margin-bottom : 13px ; color : #fff ; overflow : hidden }
.index-multiple .index-join h3 { font-size : 22px ; margin-top : 43px }
.index-multiple .index-join span { display : block ; margin-top : 38px ; font-size : 22px;color:inherit; }
.index-multiple .index-join strong { display : block ; margin-top : 14px ; font-size : 22px; color: #fff; }
/* .index-multiple .index-join a { display : block ; width : 140px ; height : 40px ; border : solid 1px #fff;background-color:##0f2663 ; border-radius : 20px ; box-sizing : border-box ; margin-top : 38px ; margin-left : 4px ; font-size : 15px ; text-align : center ; line-height : 38px ; transition : .5s }
.index-multiple .index-join a:hover { background-color : #FFFFFF ;background-color:##0f2663 ; color : #000； }
 */
.index-multiple .index-join a{
	display:inline-block;
}


.index-multiple .index-contact { width : 642px ; height : 278px ; background : url(../images/index-contact.jpg) no-repeat ; padding-left : 40px }
.index-multiple .index-contact a { display : block ; width : 100% ; height : 100% ; overflow : hidden }
.index-multiple .index-contact h3 { margin-top : 49px ; font-size : 22px; color: #fff;}
.index-multiple .index-contact strong { display : block ; margin-top : 14px ; font-size : 22px; color: #fff; }
.index-multiple .index-contact .call {color: #fff; display: block; margin-top: 38px; font-size: 22px;}



.index-news .left { float : left }
.index-news .left h2 { margin-top : 134px ; color : #000000 ; font-family : Arial ; font-size : 36px }
.index-news .left strong { display : block ; margin-top : 10px ; font-size : 30px }
.index-news .right { float : right ; margin-top : 162px }
.index-news .right a { font-size : 16px ; vertical-align : middle ; transition : .5s }
.index-news .right a:hover { color : #c7000b }
.index-news .right a:first-of-type { display : inline-block }
.index-news .right a:first-of-type::after { content : "" ; display : inline-block ; width : 2px ; height : 17px ; background-color : #333333 ; margin-left : 21px ; vertical-align : middle }
.index-news .right a:last-of-type { display : inline-block ; margin-left : 16px }
.index-news ul { margin-top : 82px ; margin-bottom : 100px }
.index-news li { width : 382px ; float : left ; margin-right : 77px ; transition : .5s }
.index-news li a { display : block ; overflow : hidden ; transition : .5s }
.index-news li:hover a { transform : translateY(-23px) }
.index-news ul li:last-of-type { margin-right : 0px }
.index-news .img-box { width : 382px ; height : 205px }
.index-news h3 { margin-top : 26px ; font-size : 18px }
.index-news .text-box { height : 48px ; margin-top : 18px ; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
.index-news .text-box p { color : #767676 ; line-height : 24px }
.index-news .bottom { margin-top : 33px }
.index-news .bottom::after { content : "" ; display : block ; clear : both }
.index-news ul span { display : block ; float : left ; color : #828282 ; font-family : Arial ; font-size : 16px }
.index-news ul i { display : block ; width : 25px ; height : 10px ; float : right ; background : url(../images/index-news-icon.png) ; position : relative ; top : 2px }





/* join */
.join-introduce { text-align : center }
.join-introduce h2 { font-size : 36px }
.join-introduce .text-box { padding : 0px 20px ; margin-top : 70px }
.join-introduce p { color : #888585 ; font-size : 16px ; line-height : 30px }
.join-introduce div:last-of-type { width : 1059px ; height : 523px ; margin : 54px auto 100px auto }
.join-introduce .img-box { width : 1059px ; height : 523px }


.join-advantage { background-color : #F7F7F7 }
.join-advantage .main { overflow : hidden }
.join-advantage h2 { margin-top : 83px ; font-size : 36px ; text-align : center }
.join-advantage-swiper { padding-bottom : 137px ; position : relative }
.join-advantage-swiper .swiper-container { height : 187px ; background-color : #FFFFFF ; margin-top : 51px }
.join-advantage-swiper .swiper-slide { height : 100% ; text-align : center ; cursor : pointer }
.join-advantage-swiper .swiper-slide i { display : block ; height : 85px ; background-repeat : no-repeat ; background-position : center center ; margin-top : 31px }
.join-advantage-swiper .swiper-slide strong { color : #666666 ; font-size : 16px }
.join-advantage-detail { width : 1300px ; height : 420px ; background-color : #FFFFFF ; margin-top : 35px ; position : relative ; overflow : hidden }
.join-advantage-detail ul { position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.join-advantage-detail li { width : 1300px ; height : 420px ; float : left }
.join-advantage-detail .left { width : 623px ; height : 346px ; float : left ; margin : 36px 42px }
.join-advantage-detail .img-box { width : 623px ; height : 346px }
.join-advantage-detail .right { float : left }
.join-advantage-detail h3 { margin-top : 83px ; color : #000000 ; font-size : 30px }
.join-advantage-detail .text-box { width : 514px ; margin-top : 39px }
.join-advantage-detail p { color : #666666 ; font-size : 16px ; line-height : 30px }
.join-advantage-swiper .swiper-pagination { left : 50% ; bottom : 47px ; transform : translateX(-50%) }
.join-advantage-swiper .swiper-pagination span { width : 10px ; height : 10px ; background-color : #A2A2A2 ; opacity : 1 ; box-sizing : border-box ; margin-left : 13px }
.join-advantage-swiper .swiper-pagination span:first-of-type { margin-left : 0px }
.join-advantage-swiper .swiper-pagination-bullet-active { background-color : transparent !important ; border : solid 1px #A0A0A0 !important }


.join-condition h2 { margin-top : 80px ; font-size : 36px ; text-align : center }
.join-condition ul { margin-top : 60px }
.join-condition li { width : 306px ; height : 188px ; border : solid 1px #EEEEEE ; box-sizing : border-box ; float : left ; margin-right : 25px ; text-align : center ; cursor : pointer }
.join-condition ul li:last-of-type { margin-right : 0px }
.join-condition span { display : block ; margin-top : 36px ; color : #666666 ; font-family : Arial ; font-size : 36px ; transition : .5s }
.join-condition li:hover span { color : ##0f2663 }
.join-condition i { display : block ; width : 58px ; height : 1px ; background-color : #C2C1C1 ; margin : 12px auto 16px auto ; transition : .5s }
.join-condition li:hover i { background-color : ##0f2663 }
.join-condition p { color : #666666 ; font-size : 16px ; line-height : 24px }
.join-condition>div { width : 1300px ; height : 340px ; margin-top : 63px ; margin-bottom : 59px }
.join-condition .img-box { width : 1300px ; height : 340px }


.join-apply { background-color : #F8F8F8 ; padding-bottom : 60px }
.join-apply .main { overflow : hidden }
.join-apply h2 { margin-top : 63px ; font-size : 36px ; text-align : center }
.join-apply span { display : block ; margin-top : 14px ; color : #666666 ; font-size : 18px ; text-align : center }
.join-apply form { margin-top : 54px ; font-size : 0px }
.join-apply input { width : 410px ; height : 60px ; background-color : #FFFFFF ; color : #999999 ; font-size : 16px ; text-indent : 34px }
.join-apply input:first-of-type { margin-right : 35px }
.join-apply input:nth-of-type(2) { margin-right : 35px }
.join-apply textarea { width : 100% ; height : 329px ; padding : 36px 34px ; background-color : #FFFFFF ; box-sizing : border-box ; margin-top : 29px ; color : #999999 ; font-family : "微软雅黑" ; font-size : 16px ; line-height : 36px }
.join-apply .bottom { margin-top : 66px ; text-align : center }
.join-apply img { width : 180px ; height : 56px ; margin-right : 29px ; vertical-align : bottom }
.join-apply .bottom input:first-of-type { width : 306px ; margin-right : 29px ; color : #565656 ; text-indent : 0px ; text-align : center }
.join-apply .bottom input:last-of-type { width : 306px ; background-color : ##0f2663 ; color : #FFFFFF ; text-indent : 0px ; transition : .5s }
.join-apply .bottom input:last-of-type:hover { background-color : rgba(0,0,0,.8) }





/* about */
/*.about-introduce .title { background : url(../images/about-introduce-1.jpg) }*/
.about-introduce .left { float : left ; overflow : hidden }
.about-introduce h2 { margin-top : 55px ; margin-left : 54px ; font-size : 30px }
.about-introduce strong { display : block ; margin-top : 8px ; margin-left : 54px ; font-size : 16px }
.about-introduce a { display : block ; margin-top : 70px ; margin-left : 36px }
.about-introduce i { display : block ; width : 56px ; height : 56px ; background : url(../images/about-introduce-icon.jpg.png) no-repeat }
.about-introduce .right { width : 784px ; float : right ; margin : 69px 31px 63px 0px }
.about-introduce .right p { font-size : 16px ; line-height : 30px }
.about-introduce .img-box { width : 1300px ; height : 377px }
.about-introduce .text-box { margin-top : 72px ; margin-bottom : 76px }
.about-introduce .text-box p { font-size : 16px ; line-height : 30px }


.about-culture { height : 674px ; background : url(../images/about-culture-background.jpg) center top }
.about-culture .main { overflow : hidden }
.about-culture h2 { margin-top : 51px ; font-size : 36px ; text-align : center }
.about-culture strong { display : block ; margin-top : 4px ; font-size : 16px ; text-align : center }
.about-culture .left { width : 667px ; height : 382px ; float : left ; margin-top : 60px ; margin-right : 65px }
.about-culture .img-box { width : 667px ; height : 382px }
.about-culture .right { float : left ; margin-top : 89px }
.about-culture li { margin-bottom : 32px ; font-size : 0px }
.about-culture .right li:last-of-type { margin-bottom : 0px }
.about-culture i { display : inline-block ; width : 80px ; height : 80px ; background-repeat : no-repeat ; margin-right : 40px ; vertical-align : bottom }
.about-culture .right li:first-of-type i { background-image : url(../images/about-culture-icon1.png) }
.about-culture .right li:nth-of-type(2) i { background-image : url(../images/about-culture-icon2.png) }
.about-culture .right li:last-of-type i { background-image : url(../images/about-culture-icon3.png) }
.about-culture .text-box { display : inline-block ; padding-bottom : 10px }
.about-culture .text-box p { color : #666666 ; font-size : 16px ; line-height : 30px }


.about-process { background : url(../images/about_02.jpg) center top no-repeat }
.about-process .main { height : 778px ; position : relative ; overflow : hidden }
.about-process h2 { margin-top : 109px ; font-size : 36px }
.about-process strong { display : block ; margin-top : 4px ; font-size : 16px }
.about-process .swiper1 { width : 1000px ; padding-bottom : 50px ; font-size : 0px ; position : absolute ; top : 322px ; --swiper-navigation-color : #666666 ; --swiper-navigation-size : 17px }
.about-process .swiper-slide { display : inline-block ; text-align : center ; padding-bottom : 39px ; background-image : url(../images/about-process-icon1.png) ; background-position : center bottom ; background-repeat : no-repeat ; color : #666666 ; font-family : Bahnschrift ; font-size : 48px ; transition : .5s ; cursor : pointer }
.about-process .swiper-slide.on { background-image : url(../images/about-process-icon2.png) ; color : #CD0000 }
.about-process .swiper-slide:hover { background-image : url(../images/about-process-icon2.png) !important ; color : #CD0000 !important }
.about-process .text-container { width : 860px ; height : 180px ; margin-top : 56px ; margin-left : 66px ; overflow : hidden ; position : relative }
.about-process .text-container ul { height : 180px ; position : absolute ; left : 0px ; top : 0px ; transition : .5s ; color : #666666 ; font-size : 16px ; line-height : 36px }
.about-process .text-container li { width : 860px ; float : left }
.about-process .text-container p {  }
.about-process .button-container { position : absolute ; left : 640px ; bottom : 0px }
.about-process .swiper-button-next, .about-process .swiper-button-prev { display : inline-block ; margin : 0px 7px ; position : static }

/* 背景图处理办法一 */
@media all and (max-width : 1317px) {
    .about-process { background-position : -310px 0px }
}


.about-honor h2 { margin-top : 72px ; font-size : 36px ; text-align : center }
.about-honor strong { display : block ; margin-top : 4px ; font-size : 16px ; text-align : center }
.about-honor .swiper-container { width : 100% ; height : 340px ; margin-top : 48px ; padding-bottom : 140px ; position : relative}
.about-honor .swiper-slide { width : 253px ; opacity : 0.5 ; transform: scale(0.66) ; transition : .5s ; position : relative ; cursor : pointer }
.about-honor .swiper-slide-active { opacity : 1 ; transform: scale(1) }
.about-honor .swiper-slide-prev, .about-honor .swiper-slide-next { transform: scale(0.81) ; opacity : 0.8 }
.about-honor .swiper-slide a { display : block }
.about-honor .img-box { width : 253px ; height : 340px }
.about-honor .swiper-slide span { display : block ; font-size : 16px ; text-align : center }
.about-honor .swiper-pagination { position : absolute ; left : 50% !important ; bottom : 70px !important ; transform : translateX(-50%) }
.about-honor .swiper-pagination span { width : 10px ; height : 10px ; background-color : #A2A2A2 ; opacity : 1 ; box-sizing : border-box ; margin-left : 9px !important ; margin-right : 0px !important }
.about-honor .swiper-pagination span:first-of-type { margin-left : 0px !important }
.about-honor .swiper-pagination-bullet-active { background-color : transparent !important ; border : solid 1px #A0A0A0 !important }





/* pro */
.pro-main li { margin-top : 87px ; transition : .5s ; transition-timing-function : ease-in-out }
.pro-main li:hover { box-shadow: 0 15px 30px rgba(0,0,0,.2) ; transform: translateY(-6px) }
.pro-main ul li:first-of-type { margin-top : 95px }
.pro-main a { display : block }
.pro-main .left { float : left }
.pro-main ul li:nth-of-type(2n) .left { float : right }
.pro-main .img-box { width : 700px ; height : 500px }
.pro-main img { filter : grayscale(100%) }
.pro-main .right { max-width : 500px ; float : left ; margin-left : 80px ; position : relative }
.pro-main ul li:nth-of-type(2n) .right { float : left }
.pro-main span { display : block ; margin-top : 92px ; font-family : basictitlefont ; font-size : 72px }
.pro-main h3 { margin-left : 90px ; font-size : 30px ; font-weight : bold }
.pro-main h3::after { content : "" ; display : inline-block ; width : 75px ; height : 2px ; background-color : #333333 ; margin-left : 11px ; vertical-align : middle }
.pro-main strong { display : block ; margin-left : 90px ; margin-top : 4px ; font-family : Arial ; font-size : 18px }
.pro-main .text-box { width : 400px ; margin-top : 51px }
.pro-main p { color : #666666 ; font-size : 16px ; line-height : 24px }
.pro-main b { display : inline-block ; width : 400px ; margin-top : 41px ; font-size : 18px ; text-align : right }
.pro-main i { display : block ; width : 83px ; height : 142px ; background : url(../images/pro-line.png) no-repeat ; position : absolute ; left : 28px ; top : 90px }


.pro-main .pages { margin-top : 84px ; margin-bottom : 72px }
.pages div { display : flex ; justify-content : center ; align-items : center }
.pages a { width : 36px ; height : 36px ; border-radius : 50% ; margin-right : 14px ; color : #666666 ; font-size : 15px ; text-align : center ; line-height : 36px ; transition : .5s }
.pages a:nth-of-type(5) { margin-right : 40px }
.pages a.on { background-color : #0f2663 ; color : #FFFFFF }
.pages a:nth-of-type(2):hover { background-color : ##0f2663 ; color : #FFFFFF }
.pages a:nth-of-type(3):hover { background-color : ##0f2663 ; color : #FFFFFF }
.pages a:nth-of-type(4):hover { background-color : ##0f2663 ; color : #FFFFFF }
.pages a:nth-of-type(5):hover { background-color : ##0f2663 ; color : #FFFFFF }
.pages .prev, .pages .next { width : 9px ; height : 15px ; color : #838383 ; font-family : "宋体" }
.pages .prev { background-image : url(../images/pages-arrow1.png) ; margin-right : 40px }
.pages .next { background-image : url(../images/pages-arrow2.png) }





/* case */
.case-main { overflow : hidden ;padding-bottom: 32px;}
.case-main ul { margin-top : 23px }
.case-main li { width : 620px ; float : left ; margin-right : 60px ; margin-bottom : 94px }
.case-main ul li:nth-of-type(2n) { margin-right : 0px }
.case-main a { display : block }
.case-main .img-box { width : 620px ; height : 390px ; overflow : hidden }
.case-main img { transition : .5s     ;width: 100%;height: 100%; }
.case-main li:hover img { transform : scale(1.1) }
.case-main .title { float : left ; margin-bottom : 22px }
.case-main h3 { margin-top : 26px ; color : #666666 ; font-size : 16px }
.case-main span { display : block ; margin-top : 6px ; color : #C8C8C8 ; font-family : Arial ; font-size : 16px }
.case-main b { display : block ; width : 22px ; height : 13px ; background-image : url(../images/case-arrow1.png) ; float : right ; margin-top : 42px ; transition : .5s }
.case-main li:hover b { background-image : url(../images/case-arrow2.png) }
.case-main i { display : block ; width : 0px ; height : 1px ; background : ##0f2663 ; transition : .5s }
.case-main li:hover i { width : 373px }
.case-main i::after { content : "" ; display : block ; width : 620px ; height : 1px ; background-color : #E4E4E4 ; position : relative ; top : 0px ; z-index : -1 }





/* pro-detail */
.pd-nav-small { border-bottom : none ; margin-bottom : 0px }


.pd-detail { background-color : #F5F5F5 ; padding-bottom : 51px ; overflow : hidden }
.pd-detail .main { background-color : #FFFFFF ; margin-top : 49px }
.pd-detail .left { width : 640px ; height : 640px ; border : solid 1px #E5E5E5 ; float : left ; margin : 60px 0px 64px 58px ; position : relative }
.pd-detail .left li { display : none ; width : 640px ; height : 640px }
.pd-detail .left li.on { display : block }
.pd-detail .left a { display : block }
.pd-detail .left .img-box { width : 640px ; height : 640px }
.pd-detail .left i { display : block ; width : 34px ; height : 56px ; background-image : url(../images/pd-detail-arrow1.png) ; position : absolute ; top : 50% ; transition : .5s ; cursor : pointer }
.pd-detail .left i:first-of-type { left : 19px ; transform : translateY(-50%) }
.pd-detail .left i:hover { background-image : url(../images/pd-detail-arrow2.png) }
.pd-detail .left i:last-of-type { transform : translateY(-50%) scale(-1) ; right : 19px }
.pd-detail .right { width : 558px ; float : left }
.pd-detail .right h3 { width : 500px ; height : 56px ; border-bottom : solid 1px #F0F0F0 ; margin-top : 74px ; margin-left : 50px ; font-size : 30px }
.pd-detail .pd-parameter { height : 274px ; margin-top : 33px ; margin-left : 56px }
.pd-detail .pd-parameter li { margin-top : 25px ; line-height : 24px }
.pd-detail .pd-parameter li:first-of-type { margin-top : 0px }
.pd-detail .pd-parameter b { color : #000000 ; font-size : 16px }
.pd-detail .pd-parameter span { color : #666666 ; font-size : 16px }
.pd-detail .link { display : block ; width : 153px ; height : 41px ; background-image : url(../images/pd-detail-button.png) ; margin-left : 56px }
.pd-detail .pd-imgNav { margin-top : 70px ; margin-left : 38px }
.pd-detail .pd-imgNav span { display : block ; margin-bottom : 25px ; color : #696969 ; font-size : 16px }
.pd-detail .pd-imgNav .container { width : 462px ; height : 98px ; float : left ; position : relative ; overflow : hidden }
.pd-detail .pd-imgNav ul { position : absolute ; transition : .3s }
.pd-detail .pd-imgNav li { width : 96px ; height : 96px ; border : solid 1px #DCDCDC ; float : left ; margin-left : 14px ; transition : .5s ; cursor : pointer }
.pd-detail .pd-imgNav li.on { border-color : ##0f2663 }
.pd-detail .pd-imgNav li:hover { border-color : ##0f2663 }
.pd-detail .pd-imgNav .img-box { width : 96px ; height : 96px }
.pd-detail .arrow-left2, .pd-detail .arrow-right2 { display : block ; width : 29px ; height : 94px ; background-color : #B8B8B8 ;  margin-top : 2px ; color : #FFFFFF ; font-family : Corbel ; font-size : 36px ; text-align : center ; line-height : 94px ; cursor : pointer ; transition : .5s }
.pd-detail .arrow-left2 { opacity : 0.35 ; float : left }
.pd-detail .arrow-left2:hover { background-color : #000000 }
.pd-detail .arrow-right2 { float : right }
.pd-detail .arrow-right2:hover { background-color : #000000 }


.pd-img { overflow : hidden }
.pd-img h2 { height : 75px ; padding-left : 12px ; border-bottom : solid 1px #D4D4D4 ; margin-top : 26px ; font-size : 36px }
.pd-img .img-container { width : 1179px ;  margin : 65px auto 74px auto }
.pd-img .img-box { width : 1179px ; }

.pd-img .bottom { height : 104px ; padding : 21px 9px ; border-top : solid 1px #D9D9D9 ; box-sizing : border-box ; overflow : hidden }
.pd-img .bottom a { color : #696969 ; font-size : 16px ; transition : .5s }
.pd-img .bottom a:hover { color : #000000 }
.pd-img .bottom a:first-of-type { float : left }
.pd-img .bottom a:last-of-type { float : right }





/* pro-list */
.pl-nav-small { border-bottom : none ; margin-bottom : 0px }


.pl-nav { background-color : #F8F8F8 ; padding-top : 48px ; padding-bottom : 47px }
/* 通用 */
.pl-nav span { display : inline-block ; margin-left : 3px ; margin-right : 30px ; vertical-align : top ; color : #666666 ; font-size : 18px ; line-height : 36px ; font-weight : bold }
.pl-nav .text-container { display : inline-block ; width : 1200px ; line-height : 36px }
.pl-nav a { display : inline-block ; color : #949494 ; font-size : 16px ; transition : .5s }
.pl-nav .text-container a:first-of-type { margin-right : 69px ; position : relative }
.pl-nav .text-container a:first-of-type::after { content : ">" ; display : block ; position : absolute ; left : 54px ; top : 0px }
.pl-nav a.on { color : #000 }
.pl-nav a:hover { color : #000 }
/* 通用 */
.pl-color { padding-bottom : 8px ; border-bottom : solid 1px #EAEAEA }
.pl-color a { margin-right : 83px }
.pl-spec { padding-bottom : 8px ; border-bottom : solid 1px #EAEAEA ; margin-top : 12px }
.pl-spec a { margin-right : 78px }
.pl-series { margin-top : 22px }
.pl-series a { margin-right : 44px }


.pl-list { overflow : hidden }
.pl-list ul { margin-top : 71px }
.pl-list li { float : left ; margin-right : 33px ; margin-bottom : 28px }
.pl-list ul li:nth-of-type(4n) { margin-right : 0px }
.pl-list li a { display : block ; position : relative }
.pl-list .img-box { width : 300px ; height : 300px ; overflow : hidden }
.pl-list strong { display : block ; height : 42px ; margin-top : 23px ; font-size : 16px ; text-align : center ; transition : .5s }
.pl-list li:hover strong { color : #000 }
.pl-list .mask { width : 300px ; height : 300px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover ; opacity : 0 ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.pl-list li:hover .mask { opacity : 1 }


.pl-list .pages { margin-top : 59px ; margin-bottom : 68px }





/* news-detail */
.nd-main { overflow : hidden }
.nd-main h2 { margin-top : 15px ; font-size : 24px ; text-align : center }
.nd-statistics { display : flex ; justify-content : center ; align-items : center ; margin-top : 40px }
.nd-statistics i { width : 14px ; height : 14px ; background-image : url(../images/nd-icon1.png) ; margin-right : 12px }
.nd-statistics b { width : 14px ; height : 9px ; background-image : url(../images/nd-icon2.png) ; margin-left : 24px ; margin-right : 15px }
.nd-statistics span { color : #666666 }
.nd-main .text-box { margin-top : 52px }
.nd-main p { color : #666666 ; font-size : 16px ; line-height : 30px }
.nd-main .img-container { width : 846px ; height : 623px ; margin : 74px auto 77px auto }
.nd-main .img-box { width : 846px ; height : 623px }
.nd-main .bottom { height : 65px ; background-color : #F8F8F8 ; margin-bottom : 69px }
.nd-main .bottom a { color : #666666 ; font-size : 16px ; line-height : 65px ; transition : .5s }
.nd-main .bottom a:first-of-type { float : left ; margin-left : 14px }
.nd-main .bottom a:first-of-type::before { content : "" ; display : inline-block ; width : 10px ; height : 10px ; background-image : url(../images/nd-icon3.png) ; margin-right : 12px }
.nd-main .bottom a:last-of-type { float : right ; margin-right : 30px }
.nd-main .bottom a:last-of-type::before { content : "" ; display : inline-block ; width : 10px ; height : 10px ; background-image : url(../images/nd-icon4.png) ; margin-right : 31px }
.nd-main .bottom a:hover { color : ##0f2663 }





/* news */
.news-main { overflow : hidden }
.news-main ul { margin-top : 30px }
.news-main li { width : 382px ; float : left ; margin-right : 77px ; margin-bottom : 76px ; transition : .5s }
.news-main li:hover { transform : translateY(-23px) }
.news-main ul li:nth-of-type(3n) { margin-right : 0px }
.news-main li a { display : block }
.news-main .img-box { width : 382px ; height : 205px }
.news-main h3 { margin-top : 26px ; margin-bottom : 18px ; font-size : 18px }
.news-main p { height : 48px ; color : #767676 ; line-height : 24px }
.news-main .bottom { margin-top : 31px }
.news-main .bottom span { display : block ; float : left ; color : #828282 ; font-size : 16px }
.news-main .bottom i { display : block ; width : 25px ; height : 21px ; background : url(../images/news-icon.png) center center no-repeat ; float : right }


.news-main .pages { margin-top : 25px ; margin-bottom : 60px }





/* contact */
.contact-main .left { width : 596px ; float : left }
.contact-main .left .contact { height : 119px ; border-bottom : solid 1px #DCDCDC ; margin-top : 40px ; color : #444444 ; font-size : 18px ; line-height : 40px }
.contact-mode { margin-bottom : 141px }
.contact-mode>div { float : left ; margin-top : 45px ; margin-right : 16px }
.contact-mode .img-box { width : 145px ; height : 145px }
.contact-mode ul { float : left ; margin-top : 50px }
.contact-mode li { color : #666666 ; font-size : 16px ; line-height : 28px }

.contact-main .right { width : 588px ; float : right }
.contact-main form { width : 588px }
.contact-main input { height : 46px ; background-color : #EEEEEE ; border-radius : 6px ; color : #666666 ; font-size : 15px ; text-indent : 19px }
.contact-main form input:first-of-type { width : 275px ; margin-right : 33px }
.contact-main form input:nth-of-type(2) { width : 275px }
.contact-main form input:nth-of-type(3) { width : 179px ; margin-right : 33px }
.contact-main form input:last-of-type { width : 100% ; background-color : #9B9B9B ; margin-top : 26px ; color : #FFFFFF ; text-indent : 0px ; text-align : center ; cursor : pointer ; transition : .5s }
.contact-main form input:last-of-type:hover { background-color : #000000 }
.contact-main textarea { width : 100% ; height : 207px ; background-color : #EEEEEE ; padding : 21px 19px ; border-radius : 6px ; box-sizing : border-box ; margin-top : 26px ; margin-bottom : 27px ; color : #666666 ; font-family : "微软雅黑" ; font-size : 15px ; line-height : 24px }
.contact-main form img { width : 151px ; height : 46px ; cursor : pointer ; vertical-align : bottom }

.contact-main .map { clear : both ; width : 100% ; height : 560px ; margin-bottom : 82px }
.contact-main .map img { width : 100% ; height : auto }