@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-family : Arial ; */ 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 : SourceHanSansCN;
    src : url(../font/SourceHanSansCN-Normal.otf)
}

@font-face {
    font-family : SourceHanSerifCN;
    src : url(../font/SourceHanSerifCN-Bold.otf)
}

@font-face {
    font-family : Impact;
    src : url(../font/Impact字体.ttf)
}

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





/* header */
.header { max-width : 1920px ; margin : 0px auto }
.header .top { height : 40px ; background-color : #EEEEEE }
.header .top .main { display : flex ; justify-content : space-between }
.header .top p { margin-left : 6px ; color : #666666 ; line-height : 40px }
.header .wechat  { display : flex }
.header .wechat .item  { padding-left : 22px ; background-repeat : no-repeat ; background-position : left center ; margin-left : 25px ; color : #666666 ; line-height : 40px ; position : relative ; cursor : pointer }
.header .qr  { display : none ; width : 96px ; height : 96px ; background-color : #EEEEEE ; padding : 6px ; border-radius : 3px ; position : absolute ; left : 50% ; top : 54px ; transition : .5s ; transform : translateX(-50%) ; z-index : 2 }
.header .wechat .item:hover .qr  { display : block }
.header .qr::after  { content : "" ; display : block ; border : solid 9px transparent ; border-bottom : solid 9px #EEEEEE ; position : absolute ; left : 50% ; top : -18px ;transform : translateX(-50%) }
.header .qr img  { width : auto ; height : auto ; max-width : 96px ; max-height : 96px ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }

.header .bottom { height : 114px }
.header h1 { width : 162px ; height : 60px ; background-image : url(../images/header-logo.png) ; float : left ; margin-top : 28px ; text-indent : -999px ; text-overflow : ellipsis ; white-space : nowrap ; overflow : hidden ; position : relative }
.header h1 a { width : 100% ; height : 100% ; position : absolute ; left : 0px ; top : 0px }
.nav { display : flex ; float : right }
.nav li { height : 114px ; padding : 0px 20px ; font-size : 17px ; line-height : 114px ; transition : .3s }
.nav li:last-of-type { padding : 0px 35px 0px 20px }
.nav li.on { color : #E60012 }
.nav li:hover { color : #E60012 }
.nav a { display : block }
.header .search { width : 258px ; height : 40px ; background-color : #F7F7F7 ; border-radius : 20px ; float : right ; margin-top : 37px }
.header .search form { font-size : 0px }
.header .search input::-webkit-input-placeholder{ color : #CBCBCB }
.header .search input::-moz-placeholder{ color : #CBCBCB }
.header .search input:-moz-placeholder{ color : #CBCBCB }
.header .search input:-ms-input-placeholder{ color : #CBCBCB }
.header .search input[type="text"] { width : 192px ; height : 40px ; padding-left : 22px ; box-sizing : border-box ; color : #CBCBCB ; vertical-align : top }
.header .search input[type="submit"] { width : 66px ; height : 40px ; background-image : url(../images/header-icon-3a.png) ; background-repeat : no-repeat ; background-position : center center ; cursor : pointer }
.header .search input[type="submit"]:hover { background-image : url(../images/header-icon-3b.png) }



.mask{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-color: rgba(30,30,30,0.87); */
    z-index: 99;
}

.mask .pic{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 33%;
    height: 95%;
    opacity: 1;
    z-index: 9999;
    background-color: #fff;
}


/* banner */
.banner { max-width : 1920px ; margin : 0px auto }
.banner .swiper-container { font-size : 0px ; --swiper-navigation-size : 0px }
.banner .swiper-slide a { display : block }
.banner .swiper-pagination { bottom : 4.11% !important }
.banner .swiper-pagination span { width : 12px ; height : 12px ; background-color : #EEEEEE ; opacity : 1 ; border-radius : 0px ; margin : 0px 4px !important }
.banner .swiper-pagination-bullet-active { background-color : #E60012 !important }
.banner .swiper-button-prev, .banner .swiper-button-next { width : 54px ; height : 64px ; background-color : rgba(0,0,0,0.5) ; background-image : url(../images/banner-icon.png) ; background-repeat : no-repeat ; background-position : center center ; opacity : 1 ; outline : none ; top : 50.47% }
.banner .swiper-button-prev { left : 2.6% }
.banner .swiper-button-next { right : 2.6% ; transform : scale(-1) }





/* 副导航 */
.nav-other { max-width : 1920px ; border-bottom : solid 1px #D2D2D2 ; margin : 0px auto }
.crumb { display : flex ; height : 70px ; float : left ; color : #333333 ; font-size : 16px }
.crumb b { line-height : 70px }
.crumb li { margin-right : 24px ; transition : .3s ; position : relative ; line-height : 70px }
.crumb li::after { content : ">" ; display : block ; width : 24px  ; height : 70px ; text-align : center ; line-height : 70px ; position : absolute ; left : 100% ; top : 0px }
.crumb li:last-of-type::after { content : "" }
.crumb a { display : block }
.crumb a:hover { color : #E60012 }

.vice-nav { display : flex ; float : right ; position : relative }
.vice-nav li { height : 67px ; margin-left : 68px ; color : #333333 ; font-size : 16px ; text-align : center ; position : relative ; line-height : 67px }
.vice-nav li::after { content : "" ; display : block ; width : 60px ; height : 3px ; background-color : #E60012 ; opacity : 0 ; position : absolute ; left : 50% ; bottom : -3px ; transition : .5s ; transform : translateX(-50%) }
.vice-nav li.on::after { opacity : 1 }
.vice-nav li:hover::after { opacity : 1 }
.vice-nav a { display : block ; height : 100% }

.join-nav-other { background-color : #F8F8F8 ; border-bottom : none }
.join-nav-other .vice-nav { display : none }

.pd-nav-other .vice-nav { display : none }




/* footer */
.footer .top { height : 130px ; background-color : #E60012 }
.footer .top .item { width : 50% ; height : 130px ; padding-left : 90px ; background-repeat : no-repeat ; background-position : left center ; box-sizing : border-box ; float : left ; position : relative }
.footer .top .item:first-of-type::after { content : "" ; display : block ; width : 1px ; height : 55px ; background-color : rgba(255,255,255,0.4) ; position : absolute ; right : 0.5px ; top : 50% ; transform : translateY(-50%) }
.footer .top .item:first-of-type { background-image : url(../images/footer-icon-1.png) }
.footer .top .item:last-of-type { padding-left : 174px ; background-image : url(../images/footer-icon-2.png) ; background-position : 75px center }
.footer .top .item a { display : block ; height : 100% ; padding-top : 37px ; box-sizing : border-box }
.footer .top h3 { margin-bottom : 10px ; color : #FFFFFF ; font-size : 20px ; font-weight : bold }
.footer .top span { color : #FFFFFF ; font-family : Arial ; font-size : 17px }
.footer .top i { display : block ; width : 55px ; height : 55px ; background-color : #FFFFFF ; background-image : url(../images/footer-icon-3.png) ; background-repeat : no-repeat ; background-position : center center ; position : absolute ; right : 75px ; top : 50% ; transform : translateY(-50%) }
.footer .top .item:last-of-type i { right : 0px }

.footer .middle { padding : 68px 0px 34px ; background-color : #181819 }
.footer .middle .info { width : 290px ; float : left }
.footer .middle h4 { padding-left : 34px ; background : url(../images/footer-icon-4.png) left center no-repeat ; color : #FFFFFF ; font-size : 17px ; font-weight : bold }
.footer .middle span { display : block ; margin-top : 21px ; color : #FFFFFF ; font-size : 35px ; font-weight : bold }
.footer .middle .text-box { margin-top : 27px ; color : #777777 ; font-size : 15px ; line-height : 24px }
.footer-nav { display : flex ; float : right }
.footer-nav dl { min-width : 150px }
.footer-nav dl:last-of-type { min-width : auto }
.footer-nav dt { margin-bottom : 16px ; color : #FFFFFF ; font-size : 17px ; font-weight : bold }
.footer-nav dd { color : #777777 ; font-size : 15px ; line-height : 26px }
.footer-nav a { transition : .3s }
.footer-nav a:hover { color : #EEEEEE }

.footer .bottom { height : 150px ; background-color : #111111 ; position : relative }
.footer .bottom .main { display : flex ; justify-content : space-between ; align-items : center ; height : 100% }
.footer .bottom .text { color : #777777 ; font-size : 15px ; line-height : 26px }
.footer .bottom .text b { margin-left : 15px }
.footer .bottom .text a { transition : .3s }
.footer .bottom .text a:hover { color : #EEEEEE }
.footer h2 { width : 143px ; height : 54px ; background-image : url(../images/footer-logo.png) ; text-indent : -999px ; text-overflow : ellipsis ; white-space : nowrap ; overflow : hidden ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }
.footer h2 a { width : 100% ; height : 100% ; position : absolute ; left : 0px ; top : 0px }
.footer .wechat  { width : 55px ; height : 55px ; background-image : url(../images/footer-icon-5.png) ; background-repeat : no-repeat ; background-position : center center ; border : solid 3px #434343 ; box-sizing : border-box ; position : relative ; cursor : pointer }
.footer .qr  { display : none ; width : 96px ; height : 96px ; background-color : #EEEEEE ; padding : 6px ; border-radius : 3px ; position : absolute ; left : 50% ; bottom : 70px ; transition : .5s ; transform : translateX(-50%) ; z-index : 2 }
.footer .wechat:hover .qr  { display : block }
.footer .qr::after  { content : "" ; display : block ; border : solid 9px transparent ; border-top : solid 9px #EEEEEE ; position : absolute ; left : 50% ; bottom : -18px ;transform : translateX(-50%) }
.footer .qr img  { width : auto ; height : auto ; max-width : 96px ; max-height : 96px ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }





/* index */
.index-link { margin-top : 60px }
.index-link .main { display : flex }
.index-link .item { width : 25% ; height : 180px ; text-align : center ; font-size : 0px ; position : relative ; cursor : pointer }
.index-link .item::after { content : "" ; display : block ; width : 1px ; height : 180px ; background-color : #DDDDDD ; position :absolute ; right : -1px ; top : 0px }
.index-link .item a { display : block }
.index-link .icon { display : flex ; justify-content : center ; align-items : flex-end ; height : 73px }
.index-link img { display : none ; flex-shrink : 0 }
.index-link .icon img:first-of-type { display : inline-block }
.index-link .item:hover .icon img:first-of-type { display : none }
.index-link .item:hover .icon img:last-of-type { display : inline-block }
.index-link h5 { margin-top : 30px ; font-size : 18px }
.index-link .item:hover h5 { color : #E60012 }
.index-link h5::after { content : "" ; display : block ; height : 11px ; background-image : url(../images/index-icon-5a.png) ; background-repeat : no-repeat ; background-position : center center ; margin-top : 27px }
.index-link .item:hover h5::after { background-image : url(../images/index-icon-5b.png) }


.index-recommend { max-width : 1920px ; padding : 67px 0px 85px ; background : url(../images/index-bg-1.jpg) center bottom no-repeat ; background-size : auto 81% ; margin : 0px auto ; position : relative }
.index-recommend .swiper-container { width : 91.66% ; margin-left : 0px ; margin-right : 0px ; font-size : 0px }
.index-recommend a { display : block }
.index-recommend .button { width : 22px ; height : 110px ; position : absolute ; right : 3.4375% ; top : 55.38% }
.index-recommend .button::before { content : "" ; display : block ; width : 22px ; height : 1px ; background-color : #D2D2D2 ; position : absolute ; left : 0px ; top : 50% ; transform : translateY(-50%) }
.index-recommend .swiper-button-prev, .index-recommend .swiper-button-next { opacity : 1 !important ; outline : none ; margin : 0px ; --swiper-navigation-color : #333333 ; --swiper-navigation-size : 28px ; left : 50% ; right : auto ; transform : translateX(-50%) ; transition : .5s }
.index-recommend .swiper-button-prev:hover, .index-recommend .swiper-button-next:hover { --swiper-navigation-color : #E60012 }
.index-recommend .swiper-button-prev { top : 0px }
.index-recommend .swiper-button-next { top : auto ; bottom : 0px }


.index-product { padding : 80px 0px 118px }

/* title index通用 */
.title.index-common { font-size : 0px }
.title.index-common h2 { display : inline-block ; padding-right : 44px ; background : url(../images/index-icon-6.png) right center no-repeat ; font-family : "SourceHanSansCN" ; font-size : 20px ; font-weight : bold }
.title.index-common span { display : block ; margin-top : 10px ; font-family : Arial ; font-size : 45px ; text-transform : uppercase ; font-weight : bold }
.title.index-common em { display : block ; margin-top : 10px ; color : #6A6A6A ; font-size : 17px }
.title.index-common i { display : block ; margin-top : 22px ; width : 16px ; height : 21px ; background-image : url(../images/index-icon-7.png) }

.index-product .title .text { float : left }
.index-product .title .link { float : right ; margin-top : 52px }
.index-product .title a { margin-left : 20px ; color : #6A6A6A ; font-size : 17px ; transition : .3s }
.index-product .title a:hover { color : #E60012 }

.index-product .content { height : 643px ; position : relative }
.index-product .content>div { position : absolute }
.index-product .img-container { overflow : hidden ; position : relative ; cursor : pointer ; overflow : hidden }
.index-product .img { width : 100% ; height : 100% ; background-repeat : no-repeat ; background-position : center center ; background-size : cover ; transition : .5s }
.index-product .img-container:hover .img { transform : scale(1.05) }
.index-product .mask { width : 100% ; height : 100% ; background : linear-gradient(0deg, rgba(0, 0, 0, 0.67) 0%, rgba(255, 255, 255, 0) 100%) ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.index-product .img-container:hover .mask { background : linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%) }
.index-product .mask div { width : calc(100% - 40px) ; text-align : left ; position : absolute ; left : 20px ; bottom : 15px }
.index-product .mask span { color : #FFFFFF ; font-family : Arial ; font-size : 17px }
.index-product .mask h5 { display : block ; margin-top : 3px ; color : #FFFFFF ; font-family : "SourceHanSansCN" ; font-size : 20px ; font-weight : bold }
.index-product .item-1 { left : 0px ; top : 0px }
.index-product .item-1 .img-container { width : 408px ; height : 246px }
.index-product .item-1 .pro-a { display : block ; width : 180px ; height : 55px ; border : solid 2px #313131 ; box-sizing : border-box ; margin : 28px 0px 38px ; text-align : center }
.index-product .item-1 a { display : block ; width : 180px ; height : 55px ;  box-sizing : border-box ; margin : 28px 0px 38px ; text-align : center }
.index-product .item-1 a:hover { background-color : #E60012 ; border-color : #E60012 }
.index-product .item-1 b { padding-right : 33px ; background-image : url(../images/index-icon-8a.png) ; background-position : right center ; background-repeat : no-repeat ; font-size : 17px ; line-height : 52px ; transition : .3s }
.index-product .item-1 a:hover b { background-image : url(../images/index-icon-8b.png) ; color : #FFFFFF }
.index-product .item-2 { left : 418px ; top : 0px }
.index-product .item-2 .img-container { width : 547px ; height : 367px }
.index-product .item-3 { right : 0px ; top : /* 0px */50% ; transform : translateY(-50%) }
.index-product .item-3 .img-container { width : 327px ; height : 468px }
.index-product .item-3 .text { display : none ; width : 327px ; padding : 42px 53px 0px 39px ; box-sizing : border-box }
.index-product .item-3 .text p { line-height : 25px ; font-size : 0px }
.index-product .item-3 .text em { color : #E60012 ; font-size : 14px }
.index-product .item-3 .text span { color : #8E8E8E ; font-size : 14px }
.index-product .item-4 { left : 173px ; top : 377px }
.index-product .item-4 .img-container { width : 391px ; height : 265px }
.index-product .item-5 { left : 573px ; top : 377px }
.index-product .item-5 .img-container { width : 391px ; height : 265px }


.index-about { max-width : 1920px ; height : 700px ; padding-top : 220px ; background : url(../images/index-bg-2.jpg) ; box-sizing : border-box ; margin : 0px auto }
.index-about b { display : block ; padding-left : 70px ; color : #FFFFFF ; font-family : Arial ; font-size : 26px ; position : relative }
.index-about b::before { content : "" ; display : block ; width : 50px ; height : 5px ; background-color : #E60012 ; position : absolute ; left : 0px ; top : 45% ; transform : translateY(-50%) }
.index-about h2 { margin-top : 20px ; color : #FFFFFF ; font-size : 45px ; font-weight : bold }
.index-about a { display : block ; margin-top : 73px ; width : 180px ; height : 60px ; background-color : #E60012 ; text-align : center ; transition : .5s }
.index-about a:hover { background-color : #000000 }
.index-about i { padding-right : 33px ; background-image : url(../images/index-icon-8b.png) ; background-position : right center ; background-repeat : no-repeat ; color : #FFFFFF ; font-size : 18px ; line-height : 60px }


.index-custom { padding : 93px 0px 85px ; background : url(../images/index-bg-3.jpg) center bottom no-repeat }
.index-custom .content { display : flex ; justify-content : space-between ; margin-top : 30px }
.index-custom .item { width : 300px ; height : 470px ; position : relative ; overflow : hidden ; cursor : pointer }
.index-custom .content .item:nth-of-type(2n) { margin-top : 70px }
.index-custom .img { height : 100% ; background-repeat : no-repeat ; background-position : center center ; background-size : cover ; transition : .5s }
.index-custom .item:hover .img { transform : scale(1.05) }
.index-custom .text { width : 100% ; height : 100% ; background-image : url(../images/index-bg-4.png) ; position : absolute ; left : 0px ; top : 0px }
.index-custom .text span { color : #FFFFFF ; font-family : Arial ; font-size : 22px ; font-weight : bold ; text-transform : uppercase ; font-style : italic ; line-height : 28px ; position : absolute ; left : 25px ; top : 30px }
.index-custom .text h5 { color : #FFFFFF ; font-size : 22px ; font-weight : bold ; position : absolute ; left : 25px ; bottom : 30px }
.index-custom .text h5::after { content : "" ; display : block ; width : 24px ; height : 16px ; background-image : url(../images/index-icon-9.png) ; margin-top : 12px }


.index-news { padding : 102px 0px 123px }
.index-news .title .text { float : left }
.index-news .title i { margin-top : 15px }
.index-news .title a { display : block ; width : 180px ; height : 55px ; border : solid 2px #313131 ; box-sizing : border-box ; float : right ; margin-top : 25px ; text-align : center }
.index-news .title a:hover { background-color : #E60012 ; border-color : #E60012 }
.index-news .title b { padding-right : 33px ; background-image : url(../images/index-icon-8a.png) ; background-position : right center ; background-repeat : no-repeat ; font-size : 17px ; line-height : 52px ; transition : .3s }
.index-news .title a:hover b { background-image : url(../images/index-icon-8b.png) ; color : #FFFFFF }

.index-news .content { margin-top : 46px }
.index-news .focus { width : 630px ; height : 360px ; float : left ; position : relative ; overflow : hidden }
.index-news .focus a { display : block ; height : 100% }
.index-news .focus .img { height : 100% ; background-repeat : no-repeat ; background-position :center center ; background-size : cover ; transition : .5s }
.index-news .focus:hover .img { transform : scale(1.05) }
.index-news .focus .text { width : 330px ; height : 290px ; padding : 22px 22px 0px ; background-color : #FFFFFF ; box-sizing : border-box ; position : absolute ; left : 40px ; top : 40px }
.index-news .focus h4 { display : -webkit-box ; display : -moz-box ; display : -ms-flexbox ; display : -o-box ; display : box ; height : 60px ; font-size : 20px ; font-weight : bold ; text-overflow : ellipsis ; overflow : hidden ; line-height : 30px ; -webkit-box-orient : vertical ; -moz-box-orient : vertical ; -ms-box-orient : vertical ; -o-box-orient : vertical ; box-orient : vertical ; -webkit-line-clamp : 2 }
.index-news .focus span { display : block ; margin-top : 15px ; font-size : 16px }
.index-news .focus p { display : -webkit-box ; display : -moz-box ; display : -ms-flexbox ; display : -o-box ; display : box ; height : 75px ; margin-top : 18px ; font-size : 16px ; text-overflow : ellipsis ; overflow : hidden ; line-height : 25px ; -webkit-box-orient : vertical ; -moz-box-orient : vertical ; -ms-box-orient : vertical ; -o-box-orient : vertical ; box-orient : vertical ; -webkit-line-clamp : 3 }
.index-news .focus i { display : block ; width : 31px ; height : 31px ; background-color : #E60012 ; background-image : url(../images/index-icon-8b.png) ; background-repeat : no-repeat ; background-position : center center ; margin-top : 25px }
.index-news .list { width : 630px ; float : right }
.index-news .item { height : 112px ; margin-top : 12px }
.index-news .list .item:first-of-type { margin-top : 0px }
.index-news .item a { display : flex ; justify-content : space-between ; height : 100% }
.index-news .item .img { width : 196px ; height : 112px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover }
.index-news .item .text { width : 410px }
.index-news .item h5 { font-size : 19px ; margin-top : 10px ; white-space : nowrap ; text-overflow : ellipsis ; overflow : hidden ; transition : .3s ;font-weight: bold;}
.index-news .item:hover h5 { color : #E60012 }
.index-news .item p { margin-top : 8px ; color : #666666 ; white-space : nowrap ; text-overflow : ellipsis ; overflow : hidden }
.index-news .item span { display : block ; margin-top : 17px ; color : #666666 }





/* join */
.join-banner { background-color : #f8f8f8 ; padding-top : 64px }

.join-1 { background-color : #f8f8f8 ; padding-top : 45px }
.join-1 .main { padding : 40px 40px 52px ; background-color : #FFFFFF ; box-sizing : border-box }

/* title join通用 */
.title.join-common { height : 70px ; background : url(../images//join-bg-1.png) left center no-repeat ; font-size : 0px ; line-height : 70px }
.title.join-common span { margin-left : 48px ; color : #FF0000 ; font-family : Arial ; font-size : 80px ; font-weight : bold }
.title.join-common h2 { display : inline-block ; margin-left : 88px ; color : #FFFFFF ; font-size : 26px ; vertical-align : top }

.join-1 .content { text-align : center }
.join-1 .text { padding : 50px 30px 0px ; text-align : left }
.join-1 .text h3 { font-size : 28px ; font-weight : bold }
.join-1 .text p { margin-top : 20px ; color : #666666 ; font-size : 16px }
.join-1 .count { display : flex ; justify-content : center ; margin-top : 55px }
.join-1 .count div { position : relative }
.join-1 .count div:first-of-type { margin-right : 144px }
.join-1 .count div:nth-of-type(2) { margin-right : 155px }
.join-1 .count div:nth-of-type(3) { margin-right : 185px }
.join-1 .count div::after { content : "" ; display : block ; width : 19px ; height : 14px ; background-image : url(../images/join-icon-1.png) ; position : absolute ; top : 20px }
.join-1 .count div:first-of-type::after { right : -74px }
.join-1 .count div:nth-of-type(2)::after { right : -84px }
.join-1 .count div:nth-of-type(3)::after { right : -102px }
.join-1 .count div:last-of-type::after { display : none }
.join-1 .count i { display : block ; margin-bottom : 10px ; color : #FF0000 ; font-family : Arial ; font-size : 50px }
.join-1 .count b { font-size : 16px }
.join-1 img { margin-top : 48px }


.join-2 { background-color : #f8f8f8 ; padding-top : 30px }
.join-2 .main { padding : 40px 40px 0px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-2 .content { padding : 105px 30px 140px ; position : relative }
.join-2 .text { width : 580px }
.join-2 .text h3 { font-size : 28px ; font-weight : bold }
.join-2 .text p { margin-top : 18px ; color : #666666 ; font-size : 16px ; line-height : 26px }
.join-2 .swiper1 { margin-top : 77px ; position : relative }
.join-2 .swiper-container { width : 549px ; margin-left : 0px ; margin-right : 0px }
.join-2 .swiper-slide a { display : block }
.join-2 .swiper-slide .img-box { width : 173px ; height : 124px ; background-color : #F8F8F8 }
.join-2 .button { width : 549px ; --swiper-navigation-size : 21px ; position : absolute ; top : 50% }
.join-2 .swiper-button-prev, .join-2 .swiper-button-next { opacity : 1 !important ; outline : none ; margin : 0px ; --swiper-navigation-color : #666666 ; transform : translateY(-50%) ; transition : .5s }
.join-2 .swiper-button-prev:hover, .join-2 .swiper-button-next:hover { --swiper-navigation-color : #E60012 }
.join-2 .swiper-button-prev { left : -48px }
.join-2 .swiper-button-next { right : -48px }
.join-2 .img { position : absolute ; right : 30px ; top : 50% ; transform : translateY(-50%) }
.join-2 .img a { display : block }
.join-2 .img img { max-width : 358px ; max-height : 486px }


.join-3 { background-color : #f8f8f8 ; padding-top : 30px }
.join-3 .main { padding : 40px 40px 53px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-3 .content { padding : 50px 30px 0px ; text-align : center }
.join-3 .content p { color : #666666 ; font-size : 16px ; line-height : 26px ; text-align : left }
.join-3 .content img { margin-top : 30px }

.join-4 { background-color : #f8f8f8 ; padding-top : 30px }
.join-4 .main { padding : 40px 40px 74px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-4 .content { width : 1160px ; margin : 0px auto }
.join-4 .top { margin-top : 60px }
.join-4 .top h3 { font-size : 28px ; font-weight : bold }
.join-4 .top p { margin-top : 20px ; color : #666666 ; font-size : 16px }
.join-4 .item { display : flex ; width : 570px ; float : left ; margin-top : 20px ; margin-right : 20px }
.join-4 .point .item:first-of-type { margin-top : 40px }
.join-4 .point .item:nth-of-type(2) { margin-top : 40px }
.join-4 .point .item:nth-of-type(3) { flex-direction : row-reverse }
.join-4 .point .item:nth-of-type(4) { flex-direction : row-reverse }
.join-4 .point .item:nth-of-type(2n) { margin-right : 0px }
.join-4 .text { width : 280px ; height : 215px ; padding : 27px 30px 0px ; box-sizing : border-box ; overflow : hidden }
.join-4 .point .item:first-of-type .text { background-image : url(../images/join-bg-2.jpg) }
.join-4 .point .item:nth-of-type(2) .text { background-image : url(../images/join-bg-2.jpg) }
.join-4 .point .item:nth-of-type(3) .text { background-image : url(../images/join-bg-3.jpg) }
.join-4 .point .item:nth-of-type(4) .text { background-image : url(../images/join-bg-4.jpg) }
.join-4 .point .item:nth-of-type(5) .text { background-image : url(../images/join-bg-5.jpg) }
.join-4 .point .item:nth-of-type(6) .text { background-image : url(../images/join-bg-6.jpg) }
.join-4 .text h5 { color : #FFFFFF ; font-size : 20px ; font-weight : bold }
.join-4 .text p { margin-top : 12px ; color : #FFFFFF ; line-height : 24px }
.join-4 .img { width : 290px ; height : 215px ; background-repeat : no-repeat ; background-position : center center ;  background-size : cover }


.join-5 { background-color : #f8f8f8 ; padding-top : 30px }
.join-5 .main { padding : 40px 40px 66px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-5 .content { width : 1160px ; margin : 0px auto }
.join-5 .text { margin-top : 60px }
.join-5 .text h3 { font-size : 28px ; font-weight : bold }
.join-5 .text p { margin-top : 23px ; color : #666666 ; font-size : 16px }
.join-5 .img { margin-top : 40px }
.join-5 .img img:first-of-type { max-width : 705px ; max-height : 368px ; float : left }
.join-5 .img img:last-of-type { max-width : 438px ; max-height : 369px ; float : right }


.join-6 { background-color : #f8f8f8 ; padding-top : 30px }
.join-6 .main { padding : 40px 40px 61px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-6 .content { width : 1160px ; margin : 0px auto }
.join-6 .text { margin-top : 60px }
.join-6 .text h3 { font-size : 28px ; font-weight : bold }
.join-6 .text p { margin-top : 25px ; color : #666666 ; font-size : 16px }
.join-6 img { margin-top : 36px }


.join-7 { background-color : #f8f8f8 ; padding-top : 30px }
.join-7 .main { padding : 40px 40px 49px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-7 .content { width : 1160px ; margin : 0px auto ; text-align : center }
.join-7 .text { margin-top : 60px ; text-align : left }
.join-7 .text h3 { font-size : 28px ; font-weight : bold }
.join-7 .text p { margin-top : 22px ; color : #666666 ; font-size : 16px ; line-height : 26px }
.join-7 img { margin-top : 40px }


.join-8 { background-color : #f8f8f8 ; padding-top : 30px }
.join-8 .main { padding : 40px 40px 49px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-8 .content { width : 1160px ; margin : 60px auto 0px auto }
.join-8 .text { width : 430px ; margin-top : 60px ; float : left }
.join-8 .text h3 { font-size : 28px ; font-weight : bold }
.join-8 .text p { margin-top : 30px ; color : #666666 ; font-size : 16px ; line-height : 30px }
.join-8 img { max-width : 606px ; max-height : 362px ; float : right }


.join-9 { background-color : #f8f8f8 ; padding-top : 30px }
.join-9 .main { padding : 40px 40px 53px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-9 .content { width : 1160px ; margin : 0px auto ; text-align : center }
.join-9 .text { margin-top : 60px ; text-align : left }
.join-9 .text h3 { font-size : 28px ; font-weight : bold }
.join-9 .text p { margin-top : 28px ; color : #666666 ; font-size : 16px ; line-height : 30px }
.join-9 img { margin-top : 15px }


.join-10 { background-color : #f8f8f8 ; padding-top : 30px }
.join-10 .main { padding : 40px 40px 61px 40px ; box-sizing : border-box ; background-color : #FFFFFF }
.join-10 .content { width : 1160px ; margin : 50px auto 0px auto ; text-align : center }

.join-10 .left { width : 438px ; padding-top : 188px ; background-image : url(../images/join-img-19.jpg) ; background-repeat : no-repeat ; float : left }
.join-10 .left div { width : 217px ; height : 128px ; background-color : #EFEFEF ; float : left ; margin-top : 3px ; margin-right : 4px ; position : relative ; transition : .5s ; cursor : pointer }
.join-10 .left div:first-of-type { margin-top : 7px }
.join-10 .left div:nth-of-type(2) { margin-top : 7px }
.join-10 .left div:nth-of-type(2n) { margin-right : 0px }
.join-10 .left div.on { background-color : #FF0000 }
.join-10 .left div:hover { background-color : #FF0000 }
.join-10 .left span { opacity : 0.15 ; color : #000000 ; font-family : SourceHanSerifCN ; font-size : 100px ; font-weight : bold ; line-height : 118px }
.join-10 .left em { font-size : 16px ; font-weight : bold ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }
.join-10 .left div.on em { color : #FFFFFF }
.join-10 .left div:hover em { color : #FFFFFF }

.join-10 .right { width : 717px ; float : right }
.join-10 .item { display : none ; width : 100% ; height : 585px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover ; position : relative }
.join-10 .right .item:first-of-type { display : block }
.join-10 .item .text { display : flex ; flex-direction : column ; justify-content : center ; width : 100% ; height : 150px ; padding : 0px 20px 0px 134px ; background-color : rgba(255,255,255,0.68) ; background-repeat : no-repeat ; background-position : 40px center ; box-sizing : border-box ; text-align : left ; position : absolute ; bottom : 0px }
.join-10 .item h4 { font-size : 16px ; font-weight : bold }
.join-10 .item p { margin-top : 8px ; color : #666666 ; line-height : 20px }


.join-11 { max-width : 1920px ; height : 500px ; background : url(../images/join-bg-8.jpg) ; margin : 0px auto ; position : relative }
.join-11 .content { width : 1300px ; height : 280px ; padding-left : 305px ; background-color : #FFFFFF ; background-image : url(../images/join-img-20.jpg) ; background-repeat : no-repeat ; box-sizing : border-box ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }
.join-11 form { padding-top : 38px }
.join-11 .left { width : 560px ; float : left ; padding : 0px 35px 0px 35px ; border-right : solid 1px #EEEEEE ; margin-right : 35px }
.join-11 .left div { margin-top : 20px }
.join-11 .left div:first-of-type { margin-top : 0px }
.join-11 .left input { width : 100% ; height : 55px ; background-color : #F2F2F2 ; color : #888888 ; text-indent : 15px }
.join-11 .left input::-webkit-input-placeholder{ color : #888888 }
.join-11 .left input::-moz-placeholder{ color : #888888 }
.join-11 .left input:-moz-placeholder{ color : #888888 }
.join-11 .left input:-ms-input-placeholder{ color : #888888 }
.join-11 .distpicker { font-size : 0px }
.join-11 .distpicker::after { content : "" ; display : block ; clear : both }
.join-11 select { width : 180px ; height : 55px ; background-color : #F2F2F2 ; background-image : url(../images/join-icon-3.png) ; background-repeat : no-repeat ; background-position : 150px 23px ; border : none ; outline : none ; box-sizing : border-box ; float : left ; margin-right : 10px ; color : #888888 ; font-size : 14px ; text-indent : 15px ; -webkit-appearance : none ; -moz-appearance : none ; appearance : none ; cursor : pointer }
.join-11 .distpicker select:last-of-type { margin-right : 0px }
.join-11 .right { width : 300px ; float : left }
.join-11 h4 { padding-left : 29px ; background : url(../images/join-icon-4.png) left center no-repeat ; font-size : 18px }
.join-11 .text-box { margin-top : 15px ; color : #E60012FF ; font-family : Arial ; font-size : 28px ; font-weight : bold ; line-height : 38px }
.join-11 .right input { width : 204px ; height : 55px ; background-color : #E60012 ; margin-top : 35px ; color : #FFFFFF ; font-size : 16px ; text-align : center ; transition : .5s ; cursor : pointer }
.join-11 .right input:hover { background-color : #000000 }





/* about */
.about-story { max-width : 1920px ; padding-top : 86px ; background-color : #F8F8F8 ; margin : 0px auto }

/* title about通用 */
.title.about-common { background : url(../images/about-icon-2.png) right 52px no-repeat }
.title.about-common h2 { color : #1F1F1F ; font-size : 20px ; font-weight : bold }
.title.about-common span { display : block ; margin-top : 8px ; color : #1F1F1F ; font-family : Arial ; font-size : 40px ; font-weight : bold ; text-transform : uppercase }
.title.about-common i { display : block ; width : 16px ; height : 17px ; background-image : url(../images/about-icon-1.png) ; margin-top : 16px }

.about-story .content { margin-top : 58px }
.about-story .item { height : 390px ; position : relative }
.about-story .content .item:first-of-type { height : 646px }
.about-story .text { width : 50% ; height : 390px ; background-color : #FFFFFF ; box-sizing : border-box }
.about-story .content .item:first-of-type .text { height : 646px ; padding : 27px 80px 0px 0px ; background-color : #F8F8F8 }
.about-story .content .item:nth-of-type(2) .text { width : 960px ; padding : 64px 315px 0px 48px ; position : absolute ; left : 50% ; top : 0px }
.about-story .content .item:nth-of-type(3) .text { width : 960px ; padding : 69px 48px 0px 310px ; position : absolute ; right : 50% ; top : 0px }
.about-story .content .item:nth-of-type(4) .text { width : 960px ; padding : 67px 315px 0px 48px ; position : absolute ; left : 50% ; top : 0px }
.about-story strong { color : #E60012 ; font-family : Impact ; font-size : 45px }
.about-story .content .item:first-of-type strong { display : block ; width : 275px ; height : 274px ; padding : 68px 44px 0px 44px ; background-image : url(../images/about-bg-1.jpg) ; box-sizing : border-box ; color : #FFFFFF ; font-family : SourceHanSansCN ; font-size : 30px ; line-height : 46px }
.about-story h3 { margin-top : 5px ; font-family : SourceHanSansCN ; font-size : 28px ; font-weight : 500 }
.about-story .content .item:first-of-type h3 { margin-top : 42px }
.about-story p { margin-top : 25px ; color : #666666 ; font-size : 16px ; line-height : 28px }
.about-story .content .item:first-of-type p { margin-top : 15px }
.about-story .img { width : 960px ; height : 390px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover ; position : absolute ; top : 0px }
.about-story .content .item:first-of-type .img { height : 646px ; left : 50% ; background-image : url(../images/about-img-1.jpg) }
.about-story .content .item:nth-of-type(2) .img { right : 50% ; background-image : url(../images/about-img-2.jpg) }
.about-story .content .item:nth-of-type(3) .img { left : 50% ; background-image : url(../images/about-img-3.jpg) }
.about-story .content .item:nth-of-type(4) .img { right : 50% ; background-image : url(../images/about-img-4.jpg) }


.about-process { padding : 96px 0px 97px ; background-color : #F8F8F8 }
.about-process .content { margin-top : 8px }

.about-process .swiper1 { height : 100px ; background : url(../images/about-bg-2.jpg) center 90px no-repeat ; position : relative }
.about-process .swiper1 .swiper-wrapper { align-items : flex-end }
.about-process .swiper1 .swiper-slide { height : auto ; text-align : center ; cursor : pointer }
.about-process .swiper1 .swiper-slide b { display : block ; margin-bottom : 10px ; font-size : 20px ; transition : .3s ; transition-timing-function : ease-out }
.about-process .swiper1 .swiper-slide i { display : block ; width : 20px ; height : 20px ; background-image : url(../images/about-icon-3a.png) ; margin : 0px auto ; transition : .5s }
.about-process .swiper1 .swiper-slide:hover i { background-image : url(../images/about-icon-3b.png) }
.about-process .swiper1 .swiper-slide-thumb-active i { background-image : url(../images/about-icon-3b.png) }

.about-process .swiper2 { margin-top : 72px }
.about-process .swiper2 .swiper-slide { display : flex ; cursor : pointer }
.about-process .swiper2 .img { width : 50% ; height : 330px ; background-repeat : no-repeat ; background-position : center center ; background-size : cover }
.about-process .swiper2 .text { width : 50% ; min-height : 330px ; padding : 53px 48px 0px 48px ; box-sizing : border-box }
.about-process .swiper2 h4 { font-size : 45px }
.about-process .swiper2 h5 { margin-top : 52px ; font-size : 20px ; font-weight : bold }
.about-process .swiper2 .text-box { max-height : 120px ; margin-top : 17px ; font-size : 16px ; line-height : 24px ; overflow-y : auto }


.about-honor { margin-top : 96px }
.about-honor .swiper-container { width : 100% ; padding-bottom : 225px ; margin-top : 50px }
.about-honor .swiper-slide { width : 100% !important }
.about-honor .swiper-slide::after { content : "" ; display : block ; clear : both }
.about-honor .swiper-slide .item { width : 420px ; float : left ; margin-top : 43px ; margin-right : 20px ; text-align : center ; position : relative }
.about-honor .swiper-slide .item:first-of-type { margin-top : 0px }
.about-honor .swiper-slide .item:nth-of-type(2) { margin-top : 0px }
.about-honor .swiper-slide .item:nth-of-type(3) { margin-top : 0px }
.about-honor .swiper-slide .item:nth-of-type(3n) { margin-right : 0px }
.about-honor .swiper-slide .item a { display : block }
.about-honor .swiper-slide .item .img-box { width : 420px ; height : 300px ; padding : 26px 22px ; box-sizing : border-box }
.about-honor .swiper-slide .item h5 { font-size : 16px }
.about-honor .swiper-slide .item .mask { width : 376px ; height : 248px ; background-color : rgba(0,0,0,.4) ; background-image : url(../images/magnifier.png) ; background-repeat : no-repeat ; background-position : center center ; opacity : 0 ; position : absolute ; left : 22px ; top : 26px ; transition : .5s }
.about-honor .swiper-slide .item:hover .mask { opacity : 1 }
.about-honor .swiper-pagination { height : 10px !important ; background-color : #EEEEEE ; border-radius : 5px ; bottom : 140px !important ; overflow : hidden }
.about-honor .swiper-pagination span { background-color : #FF0808 ; border-radius : 5px }


.about-video { padding : 51px 0px 87px ; background-color : #F8F8F8 }
.about-video .main { position : relative }
.about-video .title { background : none }
.about-video .swiper-container { width : 100% ; margin-top : 47px }
.about-video .swiper-slide { width : 100% !important }
.about-video .swiper-slide::after { content : "" ; display : block ; clear : both }
.about-video .item { width : 400px ; background-color : #FFFFFF ; border : solid 1px #EEEEEE ; box-sizing : border-box ; float : left ; margin-right : 50px }
.about-video .swiper-slide .item:nth-of-type(3n) { margin-right : 0px }
.about-video a { display : block }
.about-video .img-box { width : 398px ; height : 259px ; position : relative ; overflow : hidden }
.about-video .img-box img { transition : .5s }
.about-video .item:hover img { transform : scale(1.05) }
.about-video .mask { width : 55px ; height : 55px ; background-image : url(../images/about-icon-5.png) ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }
.about-video .text { padding : 0px 10px }
.about-video h5 { height : 52px ; background : url(../images/about-icon-6.png) right center no-repeat ; border-bottom : solid 1px #E4E4E4 ; font-size : 16px ; line-height : 52px }
.about-video span { height : 48px ; font-family : Arial ; color : #999999 ; line-height : 48px }

.about-video .button { display : flex ; justify-content : space-between ; width : 121px ; height : 53px ; position : absolute ; right : 0px ; top : 29px ; --swiper-navigation-size : 0px }
.about-video .swiper-button-prev, .about-video .swiper-button-next { width : 53px ; height : 53px ; background : url(../images/about-icon-4a.png) center center no-repeat ; border : solid 1px #E5E5E5 ; box-sizing : border-box ; opacity : 1 !important ; outline : none ; margin : 0px ; position : static ; transition : .5s }
.about-video .swiper-button-prev:hover, .about-video .swiper-button-next:hover { background : url(../images/about-icon-4b.png) center center no-repeat ; border-color : #000000 }
.about-video .swiper-button-next { transform : scale(-1) }





/* product-detail */
.product-nav { margin-top : 24px }
.product-nav .classify { display : flex ; margin-top : 30px ; border-bottom : solid 1px #EEEEEE }
.product-nav h4 { width : 97px ; flex-shrink : 0 ; color : #666666 ; font-size : 18px ; font-weight : bold ; line-height : 20px }
.product-nav .option { font-size : 0px }
.product-nav a { display : inline-block ; margin-right : 30px ; margin-bottom : 30px ; color : #888888 ; font-size : 16px ; /* line-height : 66px ; */ transition : .3s }
.product-nav a.on { color : #E60012 }
.product-nav a:hover { color : #E60012 }


.pd-introduce { margin-top : 87px }
.pd-introduce .main { display : flex ; background-color : #F8F8F8 }
.pd-introduce .text { width : 628px ; padding : 42px 43px 0px 40px ; box-sizing : border-box }
.pd-introduce .title { display : flex ; align-items : center }
.pd-introduce h2 { margin-right : 28px ; font-size : 25px }
.pd-introduce .qr  { width : 25px ; height : 25px ; background-image : url(../images/pd-icon-1.png) ; position : relative ; cursor : pointer } 
.pd-introduce .qr>div  { display : none ; width : 96px ; height : 96px ; background-color : #EEEEEE ; padding : 6px ; border-radius : 3px ; position : absolute ; left : 50% ; bottom : 50px ; transition : .5s ; transform : translateX(-50%) ; z-index : 2 }
.pd-introduce .qr:hover>div  { display : block }
.pd-introduce .qr>div::after  { content : "" ; display : block ; border : solid 9px transparent ; border-top : solid 9px #EEEEEE ; position : absolute ; left : 50% ; bottom : -18px ;transform : translateX(-50%) }
.pd-introduce .qr img  { width : auto ; height : auto ; max-width : 96px ; max-height : 96px ; position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }
.pd-introduce .text-box-1 { padding : 15px 0px 23px ; border-bottom : solid 1px #D2D2D2 ; color : #888888 ; line-height : 24px }
.pd-introduce .text-box-2 { margin-top : 26px ; color : #666666 ; line-height : 30px }
.pd-introduce a { display : block ; width : 160px ; height : 45px ; background-color : #FF0000 ; margin-top : 30px ; color : #FFFFFF ; font-size : 16px ; text-align :center ; line-height : 45px ; transition : .5s }
.pd-introduce a:hover { background-color : #000000 }
/* .pd-introduce .img { width : 672px ; height : 400px ; background-position : center center ; background-size : cover ; background-repeat : no-repeat ; position : relative } */
.pd-introduce .img { width : 672px ; height : 400px ; position : relative }
.pd-introduce img { position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }


/* title pd通用 */
.title.pd-common { text-align : center }
.title.pd-common h2 { margin-bottom : 10px ; font-size : 40px ; font-weight : bold }
.title.pd-common span { font-family : Arial ; font-size : 16px }

.pd-detail { padding : 80px 0px 85px }
.pd-detail .content { margin-top : 40px ; position : relative }
.pd-detail .swiper-container { font-size : 0px }
.pd-detail .swiper-slide { display : flex ; justify-content : center }
.pd-detail .swiper-slide a { display : block }
.pd-detail .rectangle .item { width : 250px ; margin-right : 12.5px }
.pd-detail .rectangle .swiper-slide .item:last-of-type { margin-right : 0px }
.pd-detail .rectangle .img-box { width : 250px }
.pd-detail .square .item { width : 306px ; margin-right : 19px }
.pd-detail .square .swiper-slide .item:last-of-type { margin-right : 0px }
.pd-detail .square .img-box { width : 306px ; height : 306px }
.pd-detail .swiper-slide .text { text-align : center }
.pd-detail .swiper-slide h5 { margin-top : 14px ; font-size : 18px }
.pd-detail .swiper-slide span { display : block ; margin-top : 6px ; color : #888888 ; font-size : 14px }

.pd-detail .button { width : 100% ; position : absolute ; --swiper-navigation-size : 0px ; top : 50% }
/* .pd-detail .rectangle .button { top : 187px }
.pd-detail .square .button { top : 142px } */
.pd-detail .swiper-button-prev, .pd-detail .swiper-button-next { width : 40px ; height : 40px ; background : url(../images/pd-icon-2a.png) center center no-repeat ; border : solid 1px #D2D2D2 ; box-sizing : border-box ; opacity : 0 !important ; outline : none ; transition : .5s }
.pd-detail .swiper-button-prev:hover, .pd-detail .swiper-button-next:hover { background : url(../images/pd-icon-2b.png) center center no-repeat ; border-color : #000000 }
.pd-detail:hover .swiper-button-prev, .pd-detail:hover .swiper-button-next { opacity : 1 !important }
.pd-detail .swiper-button-prev { left : -118px ; transform : translateY(-50%) }
.pd-detail .swiper-button-next { right : -118px ; transform : translateY(-50%) scale(-1) }


.pd-show { padding : 76px 0px 106px ; background : url(../images/pd-bg-1.jpg) center top no-repeat }
.pd-show .content { margin-top : 33px ; position : relative }
.pd-show .swiper-container { font-size : 0px }
.pd-show .swiper-slide { text-align : center }
.pd-show .swiper-slide a { display : block }

.pd-show .button { width : 100% ; position : absolute ; top : 50% ; --swiper-navigation-size : 0px }
.pd-show .swiper-button-prev, .pd-show .swiper-button-next { width : 58px ; height : 58px ; background : url(../images/pd-icon-2a.png) center center no-repeat ; border : solid 1px #D2D2D2 ; box-sizing : border-box ; opacity : 1 !important ; outline : none ; transition : .5s }
.pd-show .swiper-button-prev:hover, .pd-show .swiper-button-next:hover { background : url(../images/pd-icon-2b.png) center center no-repeat ; border-color : #000000 }
.pd-show .swiper-button-prev { left : -118px ; transform : translateY(-50%) }
.pd-show .swiper-button-next { right : -118px ; transform : translateY(-50%) scale(-1) }

.pd-show .link { margin-top : 74px ; position : relative }
.pd-show .link a { font-size : 18px ; transition : .3s }
.pd-show .link a:hover { color : #E60012 }
.pd-show .link .prev { float : left }
.pd-show .link .next { float : right }
.pd-show .link .back { position : absolute ; left : 50% ; top : 0px ; transform : translateX(-50%) }





/* download */
.download-main { margin : 65px 0px 129px }
.download-main .main { padding-bottom : 63px ; background-color : #F4F4F4 }

.download-main .login { height : 390px ; padding : 40px 52px 0px 852px ; background-color : #EEEEEE ; background-image : url(../images/download-img-1.jpg) ; background-repeat : no-repeat ; box-sizing : border-box ; }
.download-main .login .title { text-align : center }
.download-main .login h2 { font-size : 28px }
.download-main .login span { display : block ; margin-top : 6px ; color : #666666FF ; font-family : Arial ; font-size : 16px }
.download-main .login form { font-size : 0px }
.download-main .login input::-webkit-input-placeholder{ color : #A5A5A5 }
.download-main .login input::-moz-placeholder{ color : #A5A5A5 }
.download-main .login input:-moz-placeholder{ color : #A5A5A5 }
.download-main .login input:-ms-input-placeholder{ color : #A5A5A5 }
.download-main .login .user, .download-main .login .pass { width : 100% ; height : 50px ; background-color : #FFFFFF ; background-repeat : no-repeat ; background-position : 354px center ; color : #A5A5A5 ; font-size : 16px ; text-indent : 25px ; line-height : 50px }
.download-main .login .user { background-image : url(../images/download-icon-1.png) ; margin-top : 30px }
.download-main .login .pass { background-image : url(../images/download-icon-2.png) ; margin-top : 30px }
.download-main .login .submit { width : 100% ; height : 50px ; background-color : #E60012 ; margin-top : 30px ; color : #FFFFFF ; font-size : 18px ; text-align : center ; line-height : 50px ; cursor : pointer ; transition : .5s }
.download-main .login .submit:hover { background-color : #000000 }

.download-main .list { width : 1250px ; margin : 0px auto 0px auto ;padding-top:50px;}
.download-main .list a { display : block }
.download-main .list div { height : 60px ; padding : 0px 70px 0px 30px ; background-color : #E5E5E5 ; background-image : url(../images/download-icon-3.png) ; background-position : 1204px center ; background-repeat : no-repeat ; cursor : pointer }
.download-main .list div:nth-of-type(2n) { background-color : #FFFFFF }
.download-main .list em { display : block ; float : left ; font-size : 16px ; line-height : 60px ; transition : .3s }
.download-main .list div:hover em { color : #E60012 }
.download-main .list span { display : block ; float : right ; color : #888888 ; line-height : 60px }

/* 分页通用 */
.page { margin-top : 55px ; text-align : center ; font-size : 0px }
.page a { display : inline-block ; width : 42px ; height : 42px ; background-color : #313131 ; margin : 0px 5px ; color : #FFFFFF ; font-size : 16px ; text-align : center ; line-height : 42px ; transition : .5s }
.page a.on { background-color : #E60012 }
.page a:hover { background-color : #E60012 }
.page .prev { width : 85px }
.page .next { width : 85px }





/* contact */
.contact-main { padding : 107px 0px 88px }
.contact-main .text { width : 500px ; float : left }
.contact-main h4 { padding-left : 29px ; background : url(../images/contact-icon-1.png) left center no-repeat ; font-size : 20px }
.contact-main span { display : block ; margin-top : 12px ; font-family : Arial ; font-size : 40px ; font-weight : bold }
.contact-main .text-box { margin-top : 20px ; font-size : 18px ; line-height : 32px }
.contact-main .qr { display : flex ; float : right }
.contact-main .item { margin-right : 30px ; text-align : center }
.contact-main .qr .item:last-of-type { margin-right : 0px }
.contact-main .img-box { width : 168px ; height : 168px }
.contact-main h5 { margin-top : 12px ; font-size : 16px }

.contact-main .map { margin-top : 67px }





/* appoint */
.appoint-main { padding : 65px 0px 130px }
.appoint-main .main { padding : 40px 60px 83px ; background-color : #F5F5F5 ; box-sizing : border-box }
.appoint-main .title {  }
.appoint-main .left { display : flex ; float : left }
.appoint-main .num { color : #E60012 ; font-family : Arial ; font-size : 106px }
.appoint-main .text { margin-left : 20px }
.appoint-main .text h4 { margin-top : 30px ; font-size : 26px }
.appoint-main .text span { display : block ; margin-top : 5px ; font-family : Arial ; font-size : 15px }
.appoint-main .right { display : flex ; float : right ; margin-top : 40px }
.appoint-main .right div { height : 40px ; padding-left : 60px ; background-repeat : no-repeat ; background-position : left center ; margin-right : 100px ; font-size : 18px ; line-height : 40px ; position : relative }
.appoint-main .right div:first-of-type { background-image : url(../images/appoint-icon-1.jpg) }
.appoint-main .right div:nth-of-type(2) { background-image : url(../images/appoint-icon-2.jpg) }
.appoint-main .right div:last-of-type { background-image : url(../images/appoint-icon-3.jpg) ; margin-right : 0px }
.appoint-main .right div::after { content : ">" ; display : block ; color : #BDBDBD ; font-family : SimSun ; font-size : 18px ; position : absolute ; right : -58px ; top : 50% ; transform : translate(-50%, -50%) }
.appoint-main .right div:last-of-type::after { display : none }

.appoint-main form {  }
.appoint-main .row { margin-top : 25px }
.appoint-main form .row:first-of-type { margin-top : 20px }
.appoint-main input { height : 55px ; background-color : #FFFFFF ; color : #888888 ; text-indent : 30px }
.appoint-main input::-webkit-input-placeholder { color : #888888 }
.appoint-main input::-moz-placeholder { color : #888888 }
.appoint-main input:-moz-placeholder { color : #888888 }
.appoint-main input:-ms-input-placeholder { color : #888888 }
.appoint-main form .row:nth-of-type(2) { display : flex ; justify-content : space-between }
.appoint-main form .row:nth-of-type(2) input { width : 573px }
.appoint-main form .row:nth-of-type(3) input { width : 100% }
.appoint-main .distpicker { display : flex ; justify-content : space-between ; font-size : 0px }
.appoint-main .distpicker select { width : 372px ; height : 55px ; padding : 0px 45px 0px 30px ; background : url(../images/appoint-icon-4.png) 327px 23px no-repeat ; background-color : #FFFFFF ; border : none ; outline : none ; box-sizing : border-box ; color : #888888 ;  font-size : 14px ; -webkit-appearance : none ; -moz-appearance : none ; appearance : none ; cursor : pointer }
.appoint-main .bottom { display : flex ; justify-content : space-between }
.appoint-main .bottom div {  }
.appoint-main .bottom img { width : 224px ; height : 55px ; cursor : pointer ; vertical-align : bottom }
.appoint-main .bottom input[type="text"] { width : 372px ; margin-right : 30px }
.appoint-main .bottom input[type="submit"] { width : 372px ; height : 55px ; background-color : #E60012 ; color : #FFFFFF ; font-size : 16px ; text-indent : 0px ; text-align : center ; line-height : 55px ; transition : .5s ; cursor : pointer }
.appoint-main .bottom input[type="submit"]:hover { background-color : #000000 }





/* news */
.news-main { padding-bottom : 115px }
.news-main .item { padding-bottom : 29px ; border-bottom : solid 1px #EEEEEE ; margin-top : 75px }
.news-main .list .item:first-of-type { margin-top : 84px }
.news-main .item::after { content : "" ; display : block ; clear : both }
.news-main .text { width : 710px ; float : left }
.news-main .item a { display : block }
.news-main .item a::after { content : "" ; display : block ; clear : both }
.news-main .item h4 { font-size : 20px ;font-weight:bold;}
.news-main .data { margin-top : 15px }
.news-main .data em { padding-left : 19px ; background : url(../images/news-icon-1.png) left center no-repeat ; color : #666666 ; font-size : 16px }
.news-main .data span { padding-left : 25px ; background : url(../images/news-icon-2.png) left center no-repeat ; color : #666666 ; font-size : 16px }
.news-main .item p { min-height : 75px ; margin-top : 21px ; color : #666666 ; font-size : 15px ; line-height : 25px }
.news-main .item b { display : block ; width : 120px ; height : 40px ; border : solid 1px #BFBFBF ; box-sizing : border-box ; margin-top : 23px ; color : #666666 ; text-align : center ; line-height : 38px ; transition : .3s }
.news-main .item:hover b { background-color : #E60012 ; border-color : #E60012 ; color : #FFFFFF }
.news-main .img { width : 420px ; height : 240px ; float : right ; position : relative }
.news-main .img img { position : absolute ; left : 50% ; top : 50% ; transform : translate(-50%, -50%) }

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





/* product */
.product-main { padding-bottom : 130px }
/* .product-main .item { width : 630px ; float : left ; margin-top : 40px ; margin-right : 40px ; position : relative }
.product-main .list .item:first-of-type { margin-top : 73px }
.product-main .list .item:nth-of-type(2) { margin-top : 73px }
.product-main .list .item:nth-of-type(2n) { margin-right : 0px }
.product-main .item a { display : block } */
/* .product-main .item .img-box { width : 630px ; height : 350px }
.product-main .item .mask { width : 100% ; height : 100% ; background-color : rgba(0,0,0,0.2) ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.product-main .item:hover .mask { background-color : rgba(0,0,0,0) }
.product-main .item .mask.new { background-image : url(../images/product-icon-1.png) ; background-position : left top ; background-repeat : no-repeat }
.product-main .item h4 { width : 100% ; padding : 0px 77px 0px 35px ; background : url(../images/product-icon-2.jpg) 553px top no-repeat ; box-sizing : border-box ; color : #FFFFFF ; font-size : 20px ; font-weight : bold ; line-height : 42px ; position : absolute ; left : 0px ; bottom : 19px }
.product-main .item h4 span { color : #E60012 } */
.product-main .item { width : 310px ; float : left ; margin-top : 20px ; margin-right : 20px }
.product-main .list .item:first-of-type { margin-top : 38px }
.product-main .list .item:nth-of-type(2) { margin-top : 38px }
.product-main .list .item:nth-of-type(3) { margin-top : 38px }
.product-main .list .item:nth-of-type(4) { margin-top : 38px }
.product-main .list .item:nth-of-type(4n) { margin-right : 0px }
.product-main .item a { display : block }
.product-main .item .img-box { width : 310px ; position : relative ;height:310px;}
.product-main .item .mask { width : 100% ; height : 100% ; /* background-color : rgba(0,0,0,0.2) ; */ position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.product-main .item:hover .mask { background-color : rgba(0,0,0,0) }
.product-main .item .mask.new { background-image : url(../images/product-icon-1.png) ; background-size : 72px 72px ; background-position : left top ; background-repeat : no-repeat }
.product-main .text { height : 60px ; text-align : center ; line-height : 60px }
.product-main .item h4 { display : inline-block ; font-size : 19px ; line-height : 26px ; vertical-align : middle }
.product-main .item h4 span { color : #E60012 }

.product-main .page { margin-top : 100px }





/* case */
.case-main { padding-bottom : 138px ; background-color : #F6F6F6 }
.case-main .item { width : 420px ; float : left ; margin-top : 17px ; margin-right : 20px ; position : relative }
.case-main .list .item:first-of-type { margin-top : 66px }
.case-main .list .item:nth-of-type(2) { margin-top : 66px }
.case-main .list .item:nth-of-type(3) { margin-top : 66px }
.case-main .list .item:nth-of-type(3n) { margin-right : 0px }
.case-main .item a { display : block }
/* .case-main .img-box { width : 420px ; height : 290px } */
.case-main .img { width : 420px ; height : 290px ; background-size : cover ; background-repeat : no-repeat ; background-position :center center }
.case-main .mask { width : 420px ; height : 290px ; background-color : rgba(0,0,0,.4) ; background-image : url(../images/magnifier.png) ; background-repeat : no-repeat ; background-position : center center ; opacity : 0 ; position : absolute ; left : 0px ; top : 0px ; transition : .5s }
.case-main .item:hover .mask { opacity : 1 }
.case-main h5 { padding : 0px 10px ; font-size : 18px ; text-align : center ; line-height : 57px }

.case-main .page { margin-top : 50px }





/* 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 : #E60012 }

.nd-main iframe { width : 100% ; height : 650px }





/* space */
.space-nav { padding : 76px 0px 58px ; background-color : #F9F9F9 ; position : relative ; --swiper-navigation-size : 0px }
.space-nav .swiper-container { width : 1300px }
.space-nav a { display : block }
.space-nav .img-box { width : 230px ; height : 240px }
.space-nav .text { text-align : center }
.space-nav h5 { margin-top : 14px ; font-size : 18px ; transition : .3s }
.space-nav .swiper-slide:hover h5 { color : #E60012 }
.space-nav span { display : block ; margin-top : 2px ; color : #888888 ; transition : .3s }
.space-nav .swiper-slide:hover span { color : #E60012 }

.space-nav .button { width : 1300px ; position : absolute ; left : 50% ; top : 178px ; transform : translateX(-50%) }
.space-nav .swiper-button-prev, .space-nav .swiper-button-next { width : 50px !important ; height : 50px !important ; background : url(../images/space-icon-1.png) center center no-repeat ; border : solid 1px #DCDCDC ; border-radius : 50% ; box-sizing : border-box ; opacity : 1 !important ; outline : none ; top : 0px }
.space-nav .swiper-button-prev { left : -95px !important }
.space-nav .swiper-button-next { right : -95px !important ; transform : scale(-1) }

.space-main { padding : 28px 0px 115px }
.space-main .route { color : #888888 ; font-size : 16px }
.space-main .route span { color : #333333 }

.space-main .list { padding-top : 23px }
.space-main .item { width : 290px ; float : left ; margin-top : 20px ; margin-right : 46.5px }
.space-main .list .item:nth-of-type(4n) { margin-right : 0px }
.space-main .item a { display : block }
.space-main .item .img-box { width : 290px ; height : 310px }
.space-main .item h5 { height : 57px ; font-size : 18px ; text-align : center ; line-height : 57px ; transition : .3s }
.space-main .item:hover h5 { color : #E60012 }

.space-main .page { margin-top : 70px }





/* space-detail */
/*.sd-main { padding-bottom : 115px }*/
.sd-main h2 { height : 280px ; padding-top : 103px ; background : url(../images/sd-bg-1.jpg) top center no-repeat ; box-sizing : border-box ; font-size : 35px ; font-weight : bold ; text-align : center ; position : relative }
.sd-main h2::after { content : "" ; display : block ; width : 60px ; height : 1px ; background-color : #000000 ; position : absolute ; top : 180px ; left : 50% ; transform : translateX(-50%) }
.sd-main .content { max-width : 1300px ; padding : 50px 0px ; margin : 0px auto }
.sd-main .bottom { height : 65px ; background-color : #F8F8F8 ; /*margin-bottom : 69px ;*/width: 100%;max-width: 1300px;margin: 0px auto 69px auto;}
.sd-main .bottom a { color : #666666 ; font-size : 16px ; line-height : 65px ; transition : .5s }
.sd-main .bottom a:first-of-type { float : left ; margin-left : 14px }
.sd-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 }
.sd-main .bottom a:last-of-type { float : right ; margin-right : 30px }
.sd-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 }
.sd-main .bottom a:hover { color : #E60012 }