@charset "utf-8";
/* 重置样式 */
body, h1, h2, h3, h4, h5, p, ul, ol, dl, dd, form, input, select, textarea, th, td, figure, figcaption { padding : 0px ; margin : 0px }
body { min-width : 1300px ; font-size : 14px ; color : #333333 ; overflow-x : hidden ; cursor : default }
img { display : inline-block ; max-width : 100% ; max-height : 100% ; border : none }
input, textarea { outline : none ; background : none ; border: none }
h1, h2, h3, h4, h5 { 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 }
ul { list-style-type : none }
em, i { font-style : normal }

/* 公共样式 */
.clearfix::before,.clearfix::after { content: '' ; display : block ; height : 0 ; clear : both ; visibility : hidden }
.img-box { display : table-cell ; text-align : center ; vertical-align : middle ; font-size : 0px }
.banner-other { width : 100% ; max-width : 1920px ; margin : 0px auto ; font-size : 0px }
.main { width : 100% ; max-width : 1300px ; margin : 0px auto }
.banner-other img { width : 100% ; height : auto }
.pointer { cursor : pointer }
.clearfix { *zoom: 1 }
.swiper-button-prev, .swiper-button-next { z-index : 1 !important }

@font-face {
    font-family : AlibabaPuHuiTiM;
    src : url(../font/Alibaba-PuHuiTi-Medium.otf)
}

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




/* header */
.header { height : 100px ; position : relative }
.header h1 { width : 216px ; height : 53px ; background : url(../images/header-logo.png) center center no-repeat ; float : left ; margin-top : 24px ; text-indent : -999px ; text-overflow : ellipsis ; overflow : hidden ; position : relative }
.header h1 a { display : block ; width : 100% ; height : 100% ; position : absolute ; left : 0px ; top : 0px }
.header .nav { float : left ; margin-left : 150px }
.header li { height : 100px ; padding : 0px 26px ; float : left ; color : #444444 ; font-size : 16px ; text-align :center ; line-height : 100px ; transition : .3s }
.header li.on { color : #ff3c3f }
.header li:hover { color : #ff3c3f }
.header li a { display : block }
.header i { display : block ; width : 30px ; height : 100px ; background : url(../images/header-icon-1.png) right center no-repeat ; float : right ; cursor : pointer }

.header .drop-search { width : 100% ; height : 0px ; background-color : rgba(199,199,199,0.5) ; position : absolute ; left : 0px ; top : 100% ; overflow : hidden ; transition : .5s ; z-index : 2 }
.header form { width : 270px ; height : 35px ; background-color : #FFFFFF ; border-radius : 5px ; font-size : 0px ; float : right ; margin : 20px 0px ; overflow : hidden }
.header form input { height : 35px }
.header form input:first-of-type { width : 235px ; font-size : 15px ; vertical-align : top ; text-indent : 15px }
.header form input:last-of-type { width : 35px ; background : url(../images/header-icon-2.png) center center no-repeat ; background-color : #ff3c3f
 ; cursor : pointer }





/* banner */
.banner { font-size : 0px }
.banner .swiper-slide a { display : block }
.banner .swiper-slide img { width : 100% ; height : auto }
.banner .swiper-pagination { bottom : 6% !important }
.banner .swiper-pagination span { width : 46px ; height : 4px ; background-color : #FFFFFF ; border-radius : 0px ; opacity : 1 ; margin : 0px 10px !important ; transition : .5s }
.banner .swiper-pagination-bullet-active { background-color : #ff3c3f !important }





/* nav-inner */
.nav-inner { border-bottom : solid 1px #E5E5E5 }
.nav-inner .main { display : flex ; justify-content : space-between }

.vice-nav { display : flex }
.vice-nav li { width : 180px ; height : 64px ; background-color : #EEEEEE ; margin-right : 3px ; color : #666666 ; font-size : 16px ; text-align : center; line-height : 64px ; transition : .5s }
.vice-nav li.on { background-color : #ff3c3f ; color : #FFFFFF }
.vice-nav li:hover { background-color : #ff3c3f ; color : #FFFFFF }
.vice-nav a { display : block }

.crumb { display : flex ; align-items : center ; height : 64px }
.crumb li { margin-right : 27px ; color : #888888 ; font-size : 15px ; position : relative }
.crumb li:last-of-type { margin-right : 0px }
.crumb li::after { content : ">" ; display : block ; width : 27px ; text-align : center ; position : absolute ; right : -27px ; top : 50% ; transform : translateY(-50%) }
.crumb li:last-of-type::after { display : none }
.crumb a { display : block ; transition : .3s }    
.crumb a:hover { color : #ff3c3f }    

.nav-inner.nav-product { border-bottom : none }
.nav-inner.nav-product .main { justify-content : flex-end }

.nav-inner.nav-contact .main { justify-content : flex-end }




/* footer */
.footer .top { padding : 67px 0px 95px ; background-color : #333333 ; position : relative }
.footer .top .main { display : flex ; justify-content : space-between }
.footer .top .main::after { content : "" ; display : block ; width : 100% ; height : 1px ; background-color : #566063 ; position : absolute ; top : 166px }
.footer .info h2 { color : #FFFFFF !important }
.footer .info em { color : #FFFFFF !important }
.footer .info .qr { display : flex ; margin-top : 55px }
.footer .info .img-box { width : 108px ; height : 108px }
.footer .info .tel { padding-top : 20px ; margin-left : 30px }
.footer .info b { color : #B6BABB ; font-size : 15px }
.footer .info span { display : block ; margin-top : 14px ; color : #FFFFFF ; font-family : Arial ; font-size : 32px }
.footer .info .text { margin-top : 25px ; color : #B6BABB ; font-size : 15px ; line-height : 24px }

.footer .nav-footer { display : flex ; padding-top : 48px }
.footer .nav-footer dl { margin-right : 72px }
.footer .nav-footer dl:last-of-type { margin-right : 0px }
.footer .nav-footer dt { margin-bottom : 50px ; color : #FFFFFFFF ; font-size : 16px ; font-weight : bold }
.footer .nav-footer dd { color : #B6BABB ; font-size : 15px ; line-height : 36px }
.footer .nav-footer a { display : block ; transition : .3s }
.footer .nav-footer a:hover { color : #ff3c3f }

.footer .bottom { background-color : #272727 }
.footer .bottom .main { display : flex ; justify-content : space-between ; align-items : center ; height : 66px }
.footer .bottom p { color : #8A8A8A ; font-size : 15px }
.footer .bottom b { margin-right : 22px }
.footer .bottom i { margin-left : 22px }
.footer .bottom a { transition : .3s }
.footer .bottom a:hover { color : #ff3c3f }
.footer select { width : 117px ; height : 34px ; padding-left : 14px ; background-color : transparent ; background-image : url(../images/footer-icon-1.png) ; background-repeat : no-repeat ; background-position : 87px 14px ; border : solid 1px #535353 ; outline : none ; box-sizing : border-box ; -webkit-appearance : none ; -moz-appearance : none ; appearance : none ; color : #898989 ; font-size : 15px ; cursor : pointer }
.footer select option:first-of-type { display : none }





/* index */
.index-link { margin-top : 98px }
.index-link .title { text-align : center }
.index-link .title h2 { color : #222222 ; font-family : AlibabaPuHuiTiM ; font-size : 30px }
.index-link .title h2::after { content : "" ; display : block ; width : 41px ; height : 2px ; background-color : #ff3c3f ; margin : 20px auto 0px auto }
.index-link .title p { padding : 48px 118px 0px ; color : #666666 ; font-size : 15px ; line-height : 30px }
.index-link .title a { display : block ; width : 191px ; height : 52px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; margin : 44px auto 0px auto ; color : #666666 ; font-size : 15px ; line-height : 50px ; transition : .5s }
.index-link .title a:hover { background-color : #ff3c3f ; border-color : #ff3c3f ; color : #FFFFFF }
.index-link .link { display : flex ; justify-content : space-between ; margin-top : 90px }
.index-link .link .index-video { width : 646px ; position : relative }
.index-link .link .right { width : 646px ; height : 600px }
.index-link .link .index-join { height : 296px }
.index-link .link .index-culture { height : 296px ; margin-top : 8px }
.index-link .link .common { position : relative ; overflow : hidden }
.index-link .link a { display : block ; height : 100% }
.index-link .link .img { height : 100% ; background-size : cover ; background-repeat : no-repeat ; background-position : center center ; transition : .5s ; transition-timing-function : ease-out }
.index-link .link .index-video .img { background-image : url(../images/index-img-1.jpg) }
.index-link .link .index-join .img { background-image : url(../images/index-img-2.jpg) }
.index-link .link .index-culture .img { background-image : url(../images/index-img-3.jpg) }
.index-link .link .common:hover .img { transform : scale(1.05) }
.index-link .link .text { width : 100% ; height : 100% ; padding : 88px 51px 0px ; box-sizing : border-box ; position : absolute ; left : 0px ; top : 0px }
.index-link .link .index-video .text::after { content : "" ; display : block ; width : 59px ; height : 59px ; background : url(../images/index-icon-1.png) ; position : absolute ; left : 53px ; bottom : 62px }
.index-link .link em { color : #FFFFFF ; font-family : AlibabaPuHuiTiM ; font-size : 24px ; text-transform : uppercase }
.index-link .link h3 { margin-top : 28px ; color : #FFFFFF ; font-family : Arial ; font-size : 24px ; font-weight : bold }


.index-product { padding : 77px 0px 93px }

/* title index通用 */
.title.index-common { position : relative }/* 5 9 5 */
.title.index-common h2 { display : inline-block ; color : #222222FF ; font-family : AlibabaPuHuiTiM ; font-size : 24px ; position : relative }
.title.index-common h2::after { content : "" ; display : block ; width : 26px ; height : 4px ; background-color : #ff3c3f ; position : absolute ; right : -41px ; top : 50% ; transform : translateY(-50%) }
.title.index-common em { display : block ; margin-top : 8px ; color : #222222 ; font-size : 30px ; text-transform : uppercase ; font-weight : bold }
.title.index-common a { display : block ; width : 191px ; height : 52px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; color : #666666FF ; font-family : Arial ; font-size : 15px ; text-align : center ; line-height : 50px ; position : absolute ; right : 0px ; top : 12px ; transition : .5s }
.title.index-common a:hover { background-color : #ff3c3f ; border-color : #ff3c3f ; color : #FFFFFF }

.index-product .content { margin-top : 40px }
.index-product .item { width : 418px ; float : left ; margin-top : 25px ; margin-right : 23px ; position : relative ; overflow : hidden }
.index-product .content .item:first-of-type { margin-top : 0px }
.index-product .content .item:nth-of-type(2) { margin-top : 0px }
.index-product .content .item:nth-of-type(3) { margin-top : 0px }
.index-product .content .item:nth-of-type(3n) { margin-right : 0px }
.index-product .item a { display : block }
.index-product .item .img { height : 290px ; transition : .5s ; transition-timing-function : ease-out ;background-size: cover;background-position: center;background-repeat: no-repeat;}
.index-product .item:hover .img { transform : scale(1.05) }
.index-product .item h4 { width : 100% ; height : 127px ; padding : 80px 36px 0px ; background-image : url(../images/index-bg-1.png) ; box-sizing : border-box ; color : #FFFFFF ; font-size : 16px ; position : absolute ; left : 0px ; bottom : 0px }


.index-news { padding : 77px 0px 95px ; background-color : #272727 }
.index-news .title h2 { color : #FFFFFF }
.index-news .title em { color : #FFFFFF }
.index-news .title a { color : #B8B8B8 }

.index-news .content { display : flex ; justify-content : space-between ; margin-top : 63px }
.index-news .item { width : 616px }
.index-news .item a { display : block }
.index-news .item .img-box { width : 616px ; height : 270px }
.index-news .item .text { margin-top : 40px }
.index-news .item .text::after { content : "" ; display : block ; width : 127px ; height : 1px ; margin-top : 19px ; background-color : #ff3c3f ; transition : .6s ; transition-timing-function : ease-out }
.index-news .item:hover .text::after { width : 617px }
.index-news .item h4 { color : #FFFFFF ; font-size : 18px }
.index-news .item p { height : 60px ; margin-top : 16px ; color : #949494 ; font-size : 15px ; line-height : 30px ; overflow : hidden }
.index-news .item span { display : block ; margin-top : 26px ; color : #949494 ; font-size : 15px }


.index-advantage { padding : 135px 0px 123px ; background : url(../images/index-bg-2.jpg) top center no-repeat ; text-align : center }
.index-advantage h2 { color : #222222 ; font-family : AlibabaPuHuiTiM ; font-size : 30px }
.index-advantage h2::after { content : "" ; display : block ; width : 41px ; height : 2px ; background-color : #ff3c3f ; margin : 20px auto 0px auto }
.index-advantage p { width : 1080px ; margin : 46px auto 0px auto ; color : #666666 ; font-size : 15px ; line-height : 30px }
.index-advantage a { display : block ; width : 202px ; height : 55px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; margin : 57px auto 0px auto ; color : #666666 ; font-size : 15px ; text-align : center ; line-height : 53px ; transition : .5s }
.index-advantage a:hover { background-color : #ff3c3f ; border-color : #ff3c3f ; color : #FFFFFF }





/* join */
.join-brand { margin-top : 94px }

/* title join通用 */ /* 3 10 4 */
.title.join-common { padding-bottom : 30px ; border-bottom : solid 1px #DCDCDC ; text-align : center ; position : relative }
.title.join-common::after { content : "" ; display : block ; width : 60px ; height : 5px ; background-color : #ff3c3f; position : absolute ; left : 50% ; bottom : -3px ; transform : translateX(-50%) }
.title.join-common em { color : #CDCDCD ; font-family : Arial ; font-size : 30px ; text-transform : uppercase ; font-weight : bold }
.title.join-common h2 { margin-top : 10px ; color : #222222 ; font-size : 30px ; font-weight : bold }

.join-brand .title { border : none ; padding-bottom : 0px }
.join-brand .title::after { display : none }
.join-brand .title p { padding : 34px 102px 0px ; border-top : solid 1px #DCDCDC ; margin-top : 30px ; color : #666666 ; font-size : 16px ; line-height : 32px ; position : relative }
.join-brand .title p::after { content : "" ; display : block ; width : 60px ; height : 5px ; background-color : #ff3c3f ; position : absolute ; left : 50% ; top : -3px ; transform : translateX(-50%) }

.join-brand .content { margin-top : 40px }
.join-brand .item { width : 408px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; float : left ; margin-top : 50px ; margin-right : 38px ; cursor : pointer }
.join-brand .content .item:first-of-type { margin-top : 0px }
.join-brand .content .item:nth-of-type(2) { margin-top : 0px }
.join-brand .content .item:nth-of-type(3) { margin-top : 0px }
.join-brand .content .item:nth-of-type(3n) { margin-right : 0px }
.join-brand .item .img { height : 250px ; background-size : cover ; background-repeat : no-repeat ; background-position : center center }
.join-brand .item .text { height : 250px ; padding : 36px 30px 0px ; box-sizing : border-box ; text-align : center ; overflow : hidden ; transition : .3s }
.join-brand .item:hover .text { background-color : #ff3c3f }
.join-brand .item h4 { color : #222222 ; font-size : 24px ; font-weight : bold ; transition : .3s }
.join-brand .item:hover h4 { color : #FFFFFF }
.join-brand .item h4::after { content : "" ; display : block ; width : 36px ; height : 3px ; background-color : #ff3c3f ; margin : 17px auto 0px ; transition : .3s }
.join-brand .item:hover h4::after { background-color : #FFFFFF }
.join-brand .item p { margin-top : 18px ; color : #666666 ; font-size : 15px ; line-height : 26px ; transition : .3s }
.join-brand .item:hover p { color : #FFFFFF }


.join-franchise { padding : 74px 0px 90px }
.join-franchise .content { margin-top : 50px }
.join-franchise .content .item { width : 630px ; height : 134px ; padding : 34px 35px 0px 140px ; background-color : #EEEEEE ; background-repeat : no-repeat ; background-position : 25px center ; border-radius : 6px ; box-sizing : border-box ; float : left ; margin-top : 22px ; margin-right : 40px ; position : relative }
.join-franchise .content .item:first-of-type { background-image : url(../images/join-icon-1.png) ; margin-top : 0px }
.join-franchise .content .item:nth-of-type(2) { background-image : url(../images/join-icon-2.png) ; margin-top : 0px }
.join-franchise .content .item:nth-of-type(3) { background-image : url(../images/join-icon-3.png) }
.join-franchise .content .item:nth-of-type(4) { background-image : url(../images/join-icon-4.png) }
.join-franchise .content .item:nth-of-type(5) { background-image : url(../images/join-icon-5.png) }
.join-franchise .content .item:nth-of-type(6) { background-image : url(../images/join-icon-6.png) }
.join-franchise .content .item:nth-of-type(7) { background-image : url(../images/join-icon-7.png) }
.join-franchise .content .item:last-of-type { background-image : url(../images/join-icon-8.png) }
.join-franchise .content .item:nth-of-type(2n) { margin-right : 0px }
.join-franchise .content .text { width : 465px ; position : absolute ; left : 140px ; top : 50% ; transform : translateY(-50%) }
.join-franchise .content h5 { color : #222222 ; font-size : 24px ; font-weight : bold }
.join-franchise .content p { margin-top : 8px ; color : #666666 ; font-size : 15px ; line-height : 26px }


.join-condition { padding : 85px 0px 100px ; background : url(../images/join-bg-1.jpg) top center no-repeat }
.join-condition .content { padding-left : 411px ; background : url(../images/join-img-2.png) left top no-repeat ; margin-top : 74px }
.join-condition .content div { margin-top : 19px ; font-size : 0px ; cursor : pointer }
.join-condition .content div:first-of-type { margin-top : 0px }
.join-condition .content span { display : inline-block ; width : 35px ; height : 35px ; background-color : #FFFFFF ; border-radius : 50% ; color : #666666 ; font-family : Arial ; font-size : 16px ; text-align : center ; line-height : 35px ; vertical-align : top ; transition : .3s }
.join-condition .content div:hover span { background-color : #ff3c3f ; color : #FFFFFF }
.join-condition .content p { display : inline-block ; width : 840px ; margin-left : 14px ; color : #444444 ; font-size : 15px ; line-height : 35px }


.join-apply { padding : 83px 0px 90px }
.join-apply .point { display : flex ; margin-top : 65px }
.join-apply .point div { width : 117px ; margin-right : 119.5px ; cursor : pointer ; position : relative }
.join-apply .point div:last-of-type { margin-right : 0px }
.join-apply .point div::after { content : "" ; display : block ; width : 13px ; height : 18px ; background-image : url(../images/join-icon-15.png) ; position : absolute ; right : -66px ; top : 50px }
.join-apply .point div:last-of-type::after { display : none }
.join-apply .point i { display : block ; width : 117px ; height : 117px ; background-repeat : no-repeat ; background-position : center center ; border : solid 2px #ff3c3f ; border-radius : 50% ; box-sizing : border-box ; transition : .3s }
.join-apply .point div:first-of-type i { background-image : url(../images/join-icon-9a.png) }
.join-apply .point div:first-of-type:hover i { background-image : url(../images/join-icon-9b.png) }
.join-apply .point div:nth-of-type(2) i { background-image : url(../images/join-icon-10a.png) }
.join-apply .point div:nth-of-type(2):hover i { background-image : url(../images/join-icon-10b.png) }
.join-apply .point div:nth-of-type(3) i { background-image : url(../images/join-icon-11a.png) }
.join-apply .point div:nth-of-type(3):hover i { background-image : url(../images/join-icon-11b.png) }
.join-apply .point div:nth-of-type(4) i { background-image : url(../images/join-icon-12a.png) }
.join-apply .point div:nth-of-type(4):hover i { background-image : url(../images/join-icon-12b.png) }
.join-apply .point div:nth-of-type(5) i { background-image : url(../images/join-icon-13a.png) }
.join-apply .point div:nth-of-type(5):hover i { background-image : url(../images/join-icon-13b.png) }
.join-apply .point div:last-of-type i { background-image : url(../images/join-icon-14a.png) }
.join-apply .point div:last-of-type:hover i { background-image : url(../images/join-icon-14b.png) }
.join-apply .point div:hover i { background-color : #ff3c3f }
.join-apply .point h5 { margin-top : 26px ; color : #444444 ; font-size : 16px ; text-align : center }
.join-apply form { margin-top : 76px ; font-size : 0px }
.join-apply input::-webkit-input-placeholder { color : #666666 }
.join-apply input::-moz-placeholder { color : #666666 }
.join-apply input:-moz-placeholder { color : #666666 }
.join-apply input:-ms-input-placeholder { color : #666666 }
.join-apply textarea::-webkit-input-placeholder { color : #666666 }
.join-apply textarea::-moz-placeholder { color : #666666 }
.join-apply textarea:-moz-placeholder { color : #666666 }
.join-apply textarea:-ms-input-placeholder { color : #666666 }
.join-apply .row-1 input { width : 307px ; height : 57px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; margin-right : 24px ; color : #666666 ; font-size : 15px ; text-indent : 22px }
.join-apply .row-1 input:last-of-type { margin-right : 0px }
.join-apply .row-2 { display : flex ; justify-content : space-between ; margin-top : 19px }
.join-apply .distpicker { width : 306px }
.join-apply .distpicker select { width : 306px ; height : 57px ; padding : 0px 32px 0px 22px ; background : url(../images/join-icon-16.png) 273px 24px no-repeat ; border : solid 1px #DCDCDC ; box-sizing : border-box ; background-color : transparent ; outline : none ; -webkit-appearance : none ; -moz-appearance : none ; appearance : none ; color : #666666 ; font-size : 15px ; cursor : pointer }
.join-apply .distpicker select:last-of-type { margin-top : 18px }
.join-apply .right { width : 970px }
.join-apply .right textarea { width : 970px ; height : 132px ; padding : 10px 22px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; color : #666666 ; font-family : "微软雅黑" ; font-size : 15px ; line-height : 26px }
.join-apply .row-3 { margin-top : 43px }
.join-apply .row-3 input[type="text"] { width : 210px ; height : 57px ; border : solid 1px #DCDCDC ; box-sizing : border-box ; margin-right : 6px ; color : #666666 ; font-size : 15px ; text-indent : 22px }
.join-apply .row-3 img { width : 164px ; height : 55px ; margin-right : 589px ; vertical-align : bottom ; cursor : pointer }
.join-apply .row-3 input[type="submit"] { width : 330px ; height : 55px ; background-color : #ff3c3f ; color : #FFFFFF ; font-size : 15px ; text-align : center ; line-height : 55px ; transition : .5s ; cursor : pointer }
.join-apply .row-3 input[type="submit"]:hover { background-color : #000000 }





/* product-detail */
.pd-introduce { padding : 68px ; background-color : #EEEEEE }
.pd-introduce .main { padding : 60px 45px 80px ; background-color : #FFFFFF ; box-sizing : border-box }
.pd-introduce .info { display : flex ; justify-content : space-between }
.pd-introduce .img-swiper { width : 560px ; margin : 0px }
.pd-introduce .img-swiper a { display : block }
.pd-introduce .img-swiper .img-box { width : 560px ; height : 560px }

.pd-introduce .text { width : 562px }
.pd-introduce .title { display : flex ; justify-content : space-between ; padding : 20px 0px 16px ; border-bottom : solid 1px #E5E5E5 }
.pd-introduce h2 { color : #222222 ; font-size : 30px }
.pd-introduce .link { margin-top : 10px ; font-size : 0px }
.pd-introduce .link a { margin-right : 33px ; color : #666666 ; font-size : 15px ; position : relative ; transition : .3s }
.pd-introduce .link a:hover { color : #ff3c3f }
.pd-introduce .link a:last-of-type { margin-right : 0px }
.pd-introduce .link a::after { content : "" ; display : block ; width : 1px ; height : 15px ; background-color : #d2d2d2 ; position : absolute ; right : -20px ; top : 50% ; transform : translateY(-50%) }
.pd-introduce .link a:last-of-type::after { display : none }
.pd-introduce .parameter { margin-top : 10px ; color : #666666 ; font-size : 16px ; line-height : 40px }
.pd-introduce .vr { width : 205px ; height : 57px ; padding-left : 83px ; background-color : #ff3c3f ; background-image : url(../images/pd-icon-1.png) ; background-repeat : no-repeat ; background-position : 39px center ; border-radius : 29px ; box-sizing : border-box ; margin-top : 38px ; color : #F6F6F6 ; font-size : 16px ; line-height : 57px ; transition : .3s }
.pd-introduce .vr:hover { background-color : rgba(0,0,0,0.8) }
.pd-introduce .vr a { display : block }

.pd-introduce .img-nav { margin-top : 87px ; position : relative }
.pd-introduce .img-nav .swiper-container { width : 446px }
.pd-introduce .img-nav .swiper-slide { padding-bottom : 5px ; border-bottom : solid 3px transparent ; cursor : pointer ; transition : .5 }
.pd-introduce .img-nav .swiper-slide:hover { border-color : #ff3c3f }
.pd-introduce .img-nav .swiper-slide-thumb-active { border-color : #ff3c3f }
.pd-introduce .img-nav .img-box { width : 86px ; height : 86px ; background-color : #EEEEEE }
.pd-introduce .img-nav .button { width : 100% ; --swiper-navigation-size : 0px ; position : absolute ; top : 22px }
.pd-introduce .img-nav .swiper-button-prev, .pd-introduce .img-nav .swiper-button-next { width : 20px ; height : 41px ; background-image : url(../images/pd-icon-2.png) ; outline : none ; opacity : 1 !important ;  }
.pd-introduce .img-nav .swiper-button-prev { left : 5px }
.pd-introduce .img-nav .swiper-button-next { right : 5px ; transform : scale(-1) }

.pd-introduce .various { border-top : solid 1px #DCDCDC ; margin-top : 72px ; text-align : center }
.pd-introduce .various h2 { margin-top : 53px ; color : #666666 ; font-size : 26px }
.pd-introduce .various .content { margin-top : 30px ; font-size : 0px }


.pd-effect { background-color : #EEEEEE ; padding : 65px 0px 90px ; text-align : center }
.pd-effect h2 { color : #666666 ; font-size : 30px }
.pd-effect .img-container { margin-top : 45px ; font-size : 0px }


.pd-about { padding : 67px 0px 86px }
.pd-about h2 { color : #666666 ; font-size : 30px ; text-align : center }
.pd-about .content { margin-top : 45px }
.pd-about .item { width : 298px ; float : left ; margin-right : 36px }
.pd-about .content .item:last-of-type { margin-right : 0px }
.pd-about a { display : block }
.pd-about .img-box { width : 298px ; height : 298px ; overflow : hidden }
.pd-about .img-box img { transition : .5s ; transition-timing-function : ease-in-out }
.pd-about .item:hover img { transform : scale(1.05) }
.pd-about h5 { margin-top : 20px ; color : #222222 ; font-size : 16px ; text-align : center ; transition : .5s }
.pd-about .item:hover h5 { color : #ff3c3f }





/* about */
.about-introduce { margin-top : 92px }

/* title about通用 */
.title.about-common { padding-bottom : 34px ; border-bottom : solid 1px #DCDCDC ; position : relative }/* 3 11 6 */
.title.about-common::after { content : ""  ; display : block ; width : 60px ; height : 5px ; background-color : #ff3c3f ; position : absolute ; bottom : -1px }
.title.about-common em { color : #222222 ; font-family : Arial ; text-transform : uppercase ; font-size : 30px ; font-weight : bold }
.title.about-common h2 { margin-top : 6px ; color : #222222 ; font-family : AlibabaPuHuiTiM ; font-size : 30px }

.about-introduce .text div { width : 610px ; padding-bottom : 40px ; border-bottom : solid 1px #DCDCDC ; float : left ; margin-top : 47px ; margin-right : 80px }
.about-introduce .text div:first-of-type { margin-top : 53px }
.about-introduce .text div:nth-of-type(2) { margin-top : 53px }
.about-introduce .text div:nth-of-type(3) { border-bottom : none }
.about-introduce .text div:last-of-type { border-bottom : none }
.about-introduce .text div:nth-of-type(2n) { margin-right : 0px }
.about-introduce .text h4 { padding-left : 46px ; background-repeat : no-repeat ; background-position : left center ; color : #222222 ; font-size : 26px }
.about-introduce .text div:first-of-type h4 { background-image : url(../images/about-icon-1.png) }
.about-introduce .text div:nth-of-type(2) h4 { background-image : url(../images/about-icon-2.png) }
.about-introduce .text div:nth-of-type(3) h4 { background-image : url(../images/about-icon-3.png) }
.about-introduce .text div:last-of-type h4 { background-image : url(../images/about-icon-4.png) }
.about-introduce .text p { min-height : 192px ; margin-top : 20px ; color : #444444 ; font-size : 15px ; line-height : 32px }

.about-introduce .img { margin-top : 7px ; text-align : center ; font-size : 0px }


.about-honor { margin-top : 90px }
.about-honor .main { position : relative }
.about-honor .content { margin-top : 42px }
.about-honor .swiper-container { padding-bottom : 177px }
.about-honor .swiper-slide { position : relative }
.about-honor .swiper-slide a { display : block }
.about-honor .swiper-slide .img-box { width : 288px ; height : 418px ; padding : 13.5px 12.5px ; border : solid 1px #DCDCDC ; box-sizing : border-box }
.about-honor .swiper-slide h5 { margin-top : 20px ; color : #444444 ; font-size : 15px ; text-align : center }
.about-honor .swiper-slide .mask { width : 288px ; height : 418px ; background-color : rgba(0,0,0,0) ; background-image : url(../images/magnifier.png) ; background-repeat : no-repeat ; background-position : center center ; opacity : 0 ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.about-honor .swiper-slide:hover .mask { background-color : rgba(0,0,0,0.4) ; opacity : 1 }

.about-honor .swiper-pagination { bottom : 89px !important }
.about-honor .swiper-pagination span { width : 14px ; height : 14px ; background-color : #DCDCDC ; border-radius : 50% ; opacity : 1 ; margin : 0px 8px !important ; transition : .5s }
.about-honor .swiper-pagination-bullet-active { background-color : #ff3c3f !important }

.about-honor .button { --swiper-navigation-size : 24px ; font-size : 0px ; position : absolute ; right : 0px ; top : 45px }
.about-honor .swiper-button-prev, .about-honor .swiper-button-next { display : inline-block ; outline : none ; opacity : 1 !important ; margin-top : 0px ; position : static }
.about-honor .swiper-button-prev { margin-right : 50px }





/* product */
.product-nav .main { background-color : #EDEDED }
.product-nav .classify { display : flex ; padding : 15px 0px 20px ; border-bottom : solid 1px #D2D2D2 }
.product-nav .main .classify:last-of-type { border-bottom : none }
.product-nav h5 { width : 112px ; margin-top : 10px ; font-size : 18px ; text-indent : 35px ; line-height : 27px }
.product-nav .content { width : 1188px ; font-size : 0px }
.product-nav a { display : inline-block ; padding : 0px 7px ; border-radius : 3px ; margin-top : 10px ; margin-right : 32px ; color : #666666 ; font-size : 16px ; line-height : 27px ; transition : .3s }
.product-nav a.on { background-color : #ff3c3f ; color : #FFFFFF }
.product-nav a:hover { background-color : #ff3c3f ; color : #FFFFFF }
.sort2nav .content{
	padding:0 15px;
	box-sizing: border-box;
}


.product-main { padding : 60px 0px 80px }
.product-main .item { width : 298px ; float : left ; margin-top : 60px ; margin-right : 36px }
.product-main .list .item:first-of-type { margin-top : 0px }
.product-main .list .item:nth-of-type(2) { margin-top : 0px }
.product-main .list .item:nth-of-type(3) { margin-top : 0px }
.product-main .list .item:nth-of-type(4) { margin-top : 0px }
.product-main .list .item:nth-of-type(4n) { margin-right : 0px }
.product-main .list a { display : block }
.product-main .img-box { width : 298px ; height : 298px ; overflow : hidden }
.product-main .img-box img { transition : .4s ; transition-timing-function : ease-in-out }
.product-main .item:hover img { transform : scale(1.05) }
.product-main h5 { margin-top : 20px ; color : #222222 ; font-size : 16px ; text-align : center ; transition : .4s }
.product-main .item:hover h5 { color : #ff3c3f }

/* page通用 */
.page { margin-top : 90px ; font-size : 0px ; text-align : center }
.page a { display : inline-block ; width : 40px ;height : 40px ; background-color : #EEEEEE ; border-radius : 50% ; margin : 0px 5.5px ; color : #666666 ; font-family : Arial ; font-size : 16px ; text-align : center ; line-height : 40px ; transition : .3s }
.page a.on { background-color : #ff3c3f ; color : #FFFFFF }
.page a:hover { background-color : #ff3c3f ; color : #FFFFFF }
.page .prev, .page .next { background-image : url(../images/page-1a.png) ; background-position : center center ; background-repeat : no-repeat ; vertical-align : bottom }
.page .prev:hover, .page .next:hover { background-image : url(../images/page-1b.png) }
.page .next { transform : scale(-1) }





/* branch */
.branch-main { padding : 67px 0px 82px }
.branch-main .search { padding : 87px 734px 90px 75px ; background-color : #EEEEEE ; background-image : url(../images/branch-img-1.jpg) ; background-repeat : no-repeat ; background-position : right top }
.branch-main .search h5 { color : #444444 ; font-size : 26px }
.branch-main .search form { margin-top : 24px }
.branch-main .distpicker select { width : 100% ; height : 62px ; padding : 0px 43px 0px 28px ; background : url(../images/join-icon-16.png) 450px 26px no-repeat ; border : solid 1px #BFBFBF ; border-radius : 5px ; box-sizing : border-box ; background-color : transparent ; outline : none ; -webkit-appearance : none ; -moz-appearance : none ; appearance : none ; color : #444444 ; font-size : 18px ; cursor : pointer }
.branch-main .distpicker select:last-of-type { margin-top : 13px }
.branch-main .search input { width : 100% ; height : 62px ; background-color : #ff3c3f ; background-image : url(../images/branch-icon-1.png) ; background-repeat : no-repeat ; background-position : 208px 20px ; border-radius : 5px ; margin-top : 25px ; color : #FFFFFF ; font-size : 18px ; text-indent : 245px ; text-align : left ; line-height : 62px ; cursor : pointer ; transition : .5s }
.branch-main .search input:hover { background-color : #66797C }

.branch-main .list { margin-top : 53px }
.branch-main .list div { width : 632px ; height : 133px ; /* padding : 30px 30px 0px 30px ; */ background-color : #EEEEEE ; border-top : solid 6px transparent ; box-sizing : border-box ; float : left ; margin-top : 33px ; margin-right : 36px ; transition : .3s }
.branch-main .list div:first-of-type { margin-top : 0px }
.branch-main .list div:nth-of-type(2) { margin-top : 0px }
.branch-main .list div:nth-of-type(2n) { margin-right : 0px }
.branch-main .list div:hover { border-color : #ff3c3f }
.branch-main .list a { display : block ; height : 100% ; padding : 30px 30px 0px 30px ; box-sizing : border-box }
.branch-main .list h5 { color : #222222 ; font-size : 20px }
.branch-main .list p { margin-top : 13px ; color : #666666 ; font-size : 16px }

.branch-main .page { margin-top : 76px }





/* news */
.news-main { margin : 80px 0px 85px }

.news-main .item { width : 616px ; float : left ; margin-top : 74px ; margin-right : 68px }
.news-main .item:first-of-type { margin-top : 0px }
.news-main .item:nth-of-type(2) { margin-top : 0px }
.news-main .item:nth-of-type(2n) { margin-right : 0px }
.news-main .item a { display : block }
.news-main .item .img-box { width : 616px ; height : 270px }
.news-main .item .text { margin-top : 40px }
.news-main .item .text::after { content : "" ; display : block ; width : 127px ; height : 1px ; margin-top : 19px ; background-color : #ff3c3f ; transition : .6s ; transition-timing-function : ease-out }
.news-main .item:hover .text::after { width : 617px }
.news-main .item h4 { color : #222222 ; font-size : 18px }
.news-main .item p { height : 60px ; margin-top : 16px ; color : #949494 ; font-size : 15px ; line-height : 30px ; overflow : hidden }
.news-main .item span { display : block ; margin-top : 26px ; color : #949494 ; font-size : 15px }

.news-main .page { margin-top : 86px }





/* contact */
.contact-main { padding-top : 64px ; background-color : #EEEEEE }
.contact-main .info { display : flex ; width : 1300px ; padding : 46px 0px ; background-color : #FFFFFF ; margin : 0px auto }
.contact-main .info div { width : 33% ; height : 266px ; padding : 0px 26px ; box-sizing : border-box ; text-align : center ; position : relative }
.contact-main .info div::after { content : "" ; display : block ; width : 1px ; height : 266px ; background-color : #DCDCDC ; position : absolute ; right : -1px ; top : 50% ; transform : translateY(-50%) }
.contact-main .info div:last-of-type::after { display : none }
.contact-main .info i { display : block ; height : 55px ; background-repeat : no-repeat ; background-position : center center ; margin-top : 44px }
.contact-main .info h5 { margin-top : 37px ; color : #666666 ; font-size : 16px }
.contact-main .info p { margin-top : 10px ; color : #222222 ; font-size : 16px ; line-height : 30px }
.contact-main .info .tel p { margin-top : 13px ; font-family : Arial ; font-size : 16px }

.contact-main .message { display : flex ; justify-content : space-between ; width : 1300px ; padding : 72px 60px 80px ; background-color : #FFFFFF ; box-sizing : border-box ; margin : 20px auto 0px }
.contact-main .message .text { padding-top : 34px }
.contact-main .message h4 { color : #444444FF ; font-size : 30px }
.contact-main .message p { margin-top : 22px ; color : #888888 ; font-size : 16px ; line-height : 42px }
.contact-main .form { width : 554px }
.contact-main .form input::-webkit-input-placeholder { color : #888888 }
.contact-main .form input::-moz-placeholder { color : #888888 }
.contact-main .form input:-moz-placeholder { color : #888888 }
.contact-main .form input:-ms-input-placeholder { color : #888888 }
.contact-main .form textarea::-webkit-input-placeholder { color : #888888 }
.contact-main .form textarea::-moz-placeholder { color : #888888 }
.contact-main .form textarea:-moz-placeholder { color : #888888 }
.contact-main .form textarea:-ms-input-placeholder { color : #888888 }
.contact-main .form .row { margin-top : 10px }
.contact-main .form form .row:first-of-type { margin-top : 0px }
.contact-main .form input { width : 100% ; height : 47px ; background-color : #EEEEEE ; color : #888888 ; font-size : 15px ; text-indent : 22px }
.contact-main .form textarea { width : 100% ; height : 120px ; padding : 10px 22px ; background-color : #EEEEEE ; box-sizing : border-box ; color : #888888 ; font-family : "微软雅黑" ; font-size : 15px ; line-height : 26px }
.contact-main .bottom { margin-top : 15px ; font-size : 0px }
.contact-main .bottom input[type="text"] { width : 140px }
.contact-main .bottom img { width : 120px ; height : 47px ; margin-right : 130px ; vertical-align : bottom ; cursor : pointer }
.contact-main .bottom input[type="submit"] { width : 164px ; background-color : #ff3c3f ; color : #FFFEFE ; text-align : center ; text-indent : 0px ; line-height : 47px ; cursor : pointer ; transition : .5s }
.contact-main .bottom input[type="submit"]:hover { background-color : #000000 }

.contact-main .map { max-width : 1920px ; margin : 80px auto 0px ; font-size : 0px }





/* news-detail */
.nd-main { overflow : hidden }
.nd-main h2 { margin-top : 50px ; 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-icon-1.png) ; margin-right : 12px }
.nd-statistics b { width : 14px ; height : 9px ; background-image : url(../images/nd-icon-2.png) ; margin-left : 24px ; margin-right : 15px }
.nd-statistics span { color : #666666 }
.nd-main .content { padding : 52px 0px 77px ; color : #666666 ; font-size : 16px ; line-height : 30px }
.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-icon-3.png) ; margin-right : 12px }
.nd-main .bottom a:last-of-type { float : right ; margin-right : 30px }
.nd-main .bottom a:last-of-type::after { content : "" ; display : inline-block ; width : 10px ; height : 10px ; background-image : url(../images/nd-icon-4.png) ; margin-left : 12px }
.nd-main .bottom a:hover { color : #ff3c3f }









.case {
	/* padding: 85px 0; */
	padding-top: 85px;
	padding-bottom: 60px;
}
/* .case .main{
	border: 1px solid red;
} */
.case .list{
	width: 410px;
	float: left;
	margin-right: 35px;
	margin-bottom: 65px;
	border-bottom: 1px solid #e2e2e2;
	position: relative;
}
.case .list:nth-child(3n){
	margin-right: 0;
}
.case .list::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 11%;
	height: 1px;
	background-color: #001d49;
	transition: all .5s; 
}
.case .list:hover::after{
	width: 100%;
}
.case .list .img{
	width: 100%;
	height: 275px;
}
.case .list h4{
	color: #333;
	font-size: 16px;
	width: 100%;
	height: 60px;
	line-height: 60px;
}
.case .page{
	padding: 20px 0;
}