@charset "utf-8";
#pictureViewer .handel-prev:hover, #pictureViewer .handel-next:hover, #pictureViewer .menu-bar .handel:hover, .aboutNewBox2 .aboutNewBox2Box .aboutNewBox2BoxR, .aboutNewBox2 .aboutNewBox2BoxMessage h4::before, .aboutNewBox2 .aboutNewBox2BoxMessage ul li:nth-child(5) button, .newsPageProductPage1 .newsPageProductPage1BottomBd ul li .newsPageProductPage1BottomText .newsPageProductPage1BottomTextBox i em, .service3Ny .service3NyTable ul li .service3NyTableL, .productHot2 .productHot2choose .productHot2chooseBox .productHot2chooseR .productHot2chooseBd .productHot2chooseBdList .productHot2chooseBdListTel .productHot2chooseBdListTelL a, .productHot2 .productHot2choose .productHot2chooseBox .productHot2chooseBoxNum em::after, .productHot2 .productHot2Case .productHot2CaseBox .productHot2CaseBoxBd .productHot2CaseBoxBdList .productHot2CaseBoxBdListText .productHot2CaseBoxBdListTextBox .productHot2CaseBoxBdListTextMore, .productHot3 .productHot3Title span, .productHot3 .productHot3Product .productHot3ProductBoxTop ul li::after, .productHot3 .productHot3Product .productHot3ProductBoxTop ul li .productHot3ProductBoxTopList .productHot3ProductBoxTopListText i, .productHot3 .productHot3advantages ul li em, .productHot3 .productHot3Message .productHot3MessageBoxBth .productHot3MessageBoxBthR, .pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomIco, .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on, .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i::after, .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR .pageAddJoinBottomBoxRButton, .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxRMore:hover, .caseproductTransformBox.caseproductTransformBox2 ul li:hover .caseproductTransformBoxR a.caseproductTransformBoxRMore::after, .caseproductTransform ul li.caseproductTransform1.on, .caseproductTransform ul li.caseproductTransform2.on, .caseproductTransform ul li.caseproductTransform3.on, .caseproductTransform ul li.caseproductTransform5.on, .caseproductTransform ul li.caseproductTransform1:hover, .caseproductTransform ul li.caseproductTransform2:hover, .caseproductTransform ul li.caseproductTransform3:hover, .caseproductTransform ul li.caseproductTransform4:hover, .caseproductTransform ul li.caseproductTransform4.on, .caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR a.caseproductTransformBoxRMore::after, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomL:hover, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomR:hover, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover::before, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover a::before, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover a::after, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover::after, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText b::after {
    background-color: rgb(207, 161, 108) !important;
}
.newsTOnewTopRCenterL span, .newsTonewTopRTitleRMore:hover, .img_hd ul li.on, .aboutNewBox2 .aboutNewBox2Box, .newsPageProductPageNewCenter1 .newsPageProductPageNewCenter1R .newsPageProductPageNewCenter1RXgnr .newsPageProductPageNewCenter1RXgnrMenu ul li:hover, .newsPageProductPageNewCenter1 .newsPageProductPageNewCenter1R .newsPageProductPageNewCenter1CaseHotNews ul li a:hover i, .productHot1 .productHot1recommend .productHot1recommendBox ul li.swiper-slide-next, .productHot2 .productHot2choose .productHot2chooseBox .productHot2chooseBoxNum em, .productHot2 .productHot2Case .productHot2CaseBox .productHot2CaseBoxHd ul li.on .productHot2CaseBoxHdImg, .productHot2 .productHot2relevant ul li:hover .productHot2relevantImg, .productHot2 .productHot2Case .productHot2CaseBox .productHot2CaseBoxHd ul li:hover .productHot2CaseBoxHdImg, .productHot3 .productHot3News .productHot3NewsBox ul li:nth-child(1)::before, .caseproductTransform ul li.caseproductTransform1.on, .caseproductTransform ul li.caseproductTransform2.on, .caseproductTransform ul li.caseproductTransform3.on, .caseproductTransform ul li.caseproductTransform4.on, .caseproductTransform ul li.caseproductTransform1:hover, .caseproductTransform ul li.caseproductTransform2:hover, .caseproductTransform ul li.caseproductTransform3:hover, .caseproductTransform ul li.caseproductTransform4:hover, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover i::before, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover i::after, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover i::before, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li.active-border, .product-list li mark:after, .product-list li mark:before, .newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a:hover {
    border-color: rgb(207 161 108);
}
.productCenterShow .ShowProductTitle {
    background: rgb(207, 161, 108) url(/templates/pc_wjdh/img/ShowProductTitle.png) no-repeat top;
}
.wjdhBg, .wjdhColor::before, .swiper-pagination-bullet-active, .pro_centern2BoxMainNew ul li:hover .bdlistdd, .pro_centern2BoxMainNew ul li:hover .bdlistdd, .pc2b1mb .hd ul li .on i, .wjdhBg1:hover, .xgnrbd ul li:hover, .wjdhBg1, .wjdhBg2:hover, .proBg, .proListclass3:hover, .proListclass1, .proListRsort1 a::before, .wjdhColor3::before, .liebiaocolor ul li:hover, .proList_classify ul li p a b, .caseLdd .button_text_container, .caseLdd:hover .button_text_container, .caseTab ul li:hover, .pro_list .newsTop ul li:hover .newsTopcenter, .pro_list ul li:hover .descdd, .news_classify ul li b, .newsQa ul li i span, .contact ul li:hover .contactTop, .driving-way .hd li .on, .pro_centern3 .pro_centern3Box .pro_centern3BoxLi1 ul li a.pro_centern3BoxLiTitle i, .pro_centern1Box3 .pro_centern1Box3R a.pro_centern1Box3RMore, .pro_centern3 .pro_centern3Box .pro_centern3BoxRight ul li .pro_centern3BoxRightBox a.pro_centern3BoxMore::after, .pro_centern3 .pro_centern3Box .pro_centern3BoxBottom ul li .pro_centern3BoxRightBox a.pro_centern3BoxMore::after, .pro_centern2 .pro_centern2Box1Main .pro_centern2Box1MainBox .hd ul li.on i, .newsTop ul li:hover .newsTopcenter, .driving-way .hd li.on, .pro_addPageTitle, .ShowProductCenter ul li h6, .ShowProductCenter ul li ol li i, .pro_addPageTitle h4, .pro_addPagenr ul li:hover h5, .pro_addNewsTitle, pro_addNewsText:hover, .proListR ul li .proListCenterBpx:hover .proListCenterTextR, .pro_addNewsCenter .pro_addNewsBoxR:hover i, .pro_addNewsCenter .pro_addNewsBoxL:hover i, .pagination a:hover, .pagination span:hover, .pagination span.current, .pro_centern1Box1 .pro_centern1Box1Box .pro_centern1BoxTextBox1Center .pro_centern1Box1BoxList .pro_centern1Box1dd, .JourCenterTitle h3::before, .JourCenterTitle h3::after, .newsTonewsTioTime, .newsToNewTopRRboxRTitle::after, .newsTOnewBottomBox ul li:hover .newsTOnewBottomBoxTimeL, .newsTOnewBottomBox ul li::before, .newsTOnewBottomBox ul li::after, .newsTOnewTopRCenter ul li:hover .newsTOnewTopRCenterL, .aboutNewBox .aboutHonorAndxinxi .aboutHonorAndxinxiBg, .service2Ny .service2NyList .service2NyListBox ul li .service2NyListBoxListText .service2NyListBoxListTextL i, .newsPageProductPage1Case .newsPageProductPage1CaseBox .hd ul li.on, .newsPageProductaddPage span:hover, .newsPageProductaddPage a:hover, .service2Ny .service2NyList .service2NyListBox ul li .service2NyListBoxListText .service2NyListBoxListTextL .service2NyListBoxListTextLList a:hover, .service3Ny .service3NyBox ul li .service3NyBoxText .service3NyBoxTextR em, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsMenu h4 i::after, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsMenu ul li em, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsProduct .newsPageBoxRNewsProductBox h4 i::after, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsProduct .newsPageBoxRNewsTextBox h4 i::after, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsProduct .newsPageBoxRNewsTextBox ul li a:hover::after, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsProduct .newsPageBoxRNewsProductBox ul li:hover, .newsPage .newsPageBoxCenter .newsPageBoxR .newsPageBoxRNewsMenu ul li:hover a, .newsPageProductPageNewCenter1 .newsPageProductPageNewCenter1R .newsPageProductPageNewCenter1RXgnr .newsPageProductPageNewCenter1RXgnrMenu ul li:hover, .newsPageProductPageNewCenter1 .newsPageProductPageNewCenter1R .newsPageProductPageNewCenter1CaseHot .newsPageProductPageNewCenter1CaseHotCenter ul li .newsPageProductPageNewCenter1CaseHotCenterText b, .newsPageProductPageNewCenter1 .newsPageProductPageNewCenter1R .newsPageProductPageNewCenter1CaseHotNews ul li a:hover i, .productHot1 .productHot1Product .productHot1ProductTop .productHot1ProductTopText span.productHot1ProductTopTextZs::after, .productHot1 .productHot1Product .productHot1ProductTop .productHot1ProductTopText .productHot1ProductTopTextMore::after, .productHot1 .productHot1Product .productHot1ProductTop .productHot1ProductTopText .productHot1ProductTopTextTel a, .productHot1 .productHot1Product .productHot1ProductBottom ul li:hover .productHot1ProductBottomText, .productHot1 .productHot1ReasonBox .bd .productHot1ReasonList a, .productHot1 .productHot1ReasonBox .productHot1ReasonListHd ul li.on .productHot1ReasonListHdBox .productHot1ReasonListHdR, .productHot1 .productHot1ReasonBox .productHot1ReasonListHd .productHot1ReasonListHdJt, .productHot1 .productHot1Message .container .productHot1MessageBox .productHot1MessageL .productHot1MessageLCenter .productHot1MessageLCenterr a, .productHot1 .productHot1Message .container .productHot1MessageBox .productHot1MessageR ul li b::after, .productHot1 .productHot1Message .container .productHot1MessageBox .productHot1MessageR ul li .productHot1MessageRBth, .productHot1 .productHot1News .productHot1NewsBox ul li.swiper-slide-next::after, .productHot1 .productHot1News .productHot1NewsBox .productHot1NewsBoxL:hover, .productHot1 .productHot1News .productHot1NewsBox .productHot1NewsBoxR:hover, .productHot2 .productHot2recommend .productHot2recommendBoxTop .productHot2recommendBoxTopBox .productHot2recommendBoxTopL .productHot2recommendBoxTopLText b, .productHot2 .productHot2choose .productHot2chooseBox .productHot2chooseL .productHot2chooseLBox ul li.on, .productHot2 .productHot2choose .productHot2chooseBox .productHot2chooseR .productHot2chooseRJt .productHot2chooseRJtBox, .productHot2 .productHot2Message .productHot2MessageBottom button, .productHot1recommendBoxL:hover, .productHot1recommendBoxR:hover, .caseproductTransformBox ul li:hover .caseproductTransformBoxR p i, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover::before, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover i::before, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover i::after, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover::after, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel, .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover a::after, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover a::before, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6, .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 .listproduct5BoxLBoxRR i::after, .product-list li:hover figcaption, .product-list li mark b:before, .product-list li mark b:after, .newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a:hover {
    background: rgb(207, 161, 108) !important;
}
* {
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei', arial, helvetica, clean, sans-serif;
}

body {
    font: 0.14rem/1.231 'Microsoft YaHei', arial, helvetica, clean, sans-serif;
    color: #333;
    margin: 0;
    line-height: 1.5;
    -webkit-text-size-adjust: none;
}

:focus {
    outline: 1;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

a {
    color: #333;
    text-decoration: none;
}

a:link,
a:hover,
a:active,
a:visited {
    text-decoration: none;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: auto;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

li,
ul {
    list-style-type: none;
}

img {
    border: none;
}

input,
textarea {
    outline: 0;
    border: 0;
}

textarea {
    resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
dt,
i,
em {
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 100px;
}

.clearboth {
    clear: both;
}

ol,
ul {
    margin-bottom: 0;
}

p {
    margin: 0 0 0px;
}

dl {
    margin-bottom: 0;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
}

.navbar-left {
    float: left;
}

.navbar-right {
    float: right;
}

.productscd {
    height: 1.4rem;
    border-bottom: 1px solid #ededed;
}

.productsTopvd {
    height: 1.4rem;
    overflow: hidden;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
}

.col-lg-1 {
    width: 8.33333333%;
}

.col-lg-2 {
    width: 16.6666666%;
}

.col-lg-3 {
    width: 25%;
}

.col-lg-4 {
    width: 33.33333333%;
}

.col-lg-5 {
    width: 41.66666666%;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-7 {
    width: 58.33333333%;
}

.col-lg-8 {
    width: 66.66666666%;
}

.col-lg-9 {
    width: 75%;
}

.col-lg-10 {
    width: 83.33333333%;
}

.col-lg-11 {
    width: 91.666666666;
}

.col-lg-12 {
    width: 100%;
}

.mbanner {
    width: 100%;
}

.mbanner img {
    width: 100%;
    display: block;
    height: 100%;
}

.caseMenu {
    width: 100%;
    height: 150px;
    background: url(../images/casemenu.jpg) no-repeat center;
    color: #999;
}

.caseMenu a {
    color: #999;
}

.caseMenuTop span a {
    color: #333;
}

.caseMenuTop {
    width: 100%;
    padding: .1rem 0;
    border-bottom: 1px solid #e6e6e6;
    color: #999;
    font-size: 0.15rem;
}

.caseMenuTop a {
    color: #999;
}

.caseMenuR i {
    float: right;
    padding-right: 5px;
}

.caseMenuR img {
    padding-left: 5px;
}

.caseMenuR a:hover {
    color: #333;
}

.caseMenuBottom {
    padding-top: .24rem;
}

.caseTitleL {
    font-size: .24rem;
    color: #333;
}

.caseRe {
    float: left;
}

.caseRer {
    float: left;
    text-align: right;
    margin-top: .06rem;
}

.text-center {
    margin-top: 20px;
}

.caseTitleR ul li {
    float: left;
    padding: .05rem .2rem;
    background: #fff;
    border-radius: .05rem;
    border: 1px solid #f2f2f2;
    margin-right: .1rem;
    -webkit-transition: .4s;
    transition: .4s;
    margin-right: .3rem;
    margin-bottom: 0.03rem;
}

.caseRe i {
    font-size: .22rem;
}

.caseTitleR ul li a {
    display: block;
    line-height: .2rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseTitleR ul li a::before {
    width: .1rem;
    height: .1rem;
    border: 2px solid #ddd;
    content: "";
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    line-height: .2rem;
    vertical-align: unset;
}

.caseTitleR ul li:hover {
    box-shadow: 0 0 10px rgba(32, 107, 209, 0.2);
}

.caseList {
    padding-top: .4rem;
    margin-bottom: .4rem;
}

.caseList li {
    margin-bottom: .3rem;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 0 0 .03rem .03rem;
    overflow-y: hidden;
}

.caseList li i {
    display: block;
    position: relative;
    padding: 34%;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    background: #fff;
    border-radius: 5px 5px 0 0;
}

.caseList li img.caseImgList1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: auto;
    bottom: 0;
    right: 0;
    border-radius: 5px;
}

.caseLdd .caseListdd {
    display: block;
    margin: 1%;
    position: absolute;
    width: 98%;
    height: 96.1%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}

.caseListBg {
    width: 100%;
    height: 100%;
    display: block;
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 2;
    -webkit-transition: .5s;
    transition: .5s;
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.caseListhide {
    width: 0%;
    height: 0%;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transition: .8s;
    transition: .8s;
    background: rgba(255, 255, 255, .2) url(../images/see.png) no-repeat center;
    position: absolute;
    z-index: 1;
    -moz-transform: rotateX(90deg);
}

.newsMeenu .caseMenu {
    width: 100%;
    height: 150px;
    background: url(../images/aboutmenu.jpg) no-repeat center;
    color: #999;
}

.aboutMenu .caseMenu {
    width: 100%;
    height: 150px;
    background: url(../images/aboutmenu1.jpg) no-repeat center;
    color: #999;
}

.contactMenu .caseMenu {
    width: 100%;
    height: 150px;
    background: url(../images/contact.jpg) no-repeat center;
    color: #999;
}

.caseList li:hover .caseListhide {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
}

.caseList li .caseListTitle {
    font-size: .18rem;
    text-align: center;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .12rem 5%;
    -webkit-transition: 1.2s;
    transition: 1.2s;
}

.caseLdd:hover .caseListTitle {
    font-weight: bold;
}

.caseLine {
    width: .2rem;
    height: 1px;
    margin: .08rem auto .1rem;
    background: transparent;
}

.caseList li p {
    font-size: .14rem;
    line-height: 2;
    padding: 0 .1rem;
    height: .52rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #999;
    -webkit-transition: 1.2s;
    transition: 1.2s;
    text-align: center;
}

.caseLdd:hover .caseText {
    border-bottom: 1px solid transparent;
}

.caseList li:hover p {
    color: #fff;
}

.caseList li .caseMore {
    font-size: .36rem;
    display: block;
    text-align: center;
    margin-top: .08rem;
    font-weight: 100;
    color: #fff;
}

.caseList li .caseMore img {
    position: relative;
    animation: lr linear 3s infinite alternate;
}

.caseText {
    -webkit-transition: .5s;
    transition: .5s;
    padding-top: .1rem;
    padding-bottom: .1rem;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 0rem;
    height: 100%;
}

.caseList li:hover .caseListTitle {
    color: #fff !important;
}

.caseList li:hover .caseLine {
    background: #fff;
}

.pagination {
    text-align: center;
}

.wjdh-message .message-form ul li button {
    outline: none;
}

input {
    outline: none;
}

.pagination a,
.pagination span {
    color: #999;
    margin: 0 .1rem;
    position: relative;
    float: left;
    padding: 5px 15px;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 0.05rem;
}

.pagination a:hover,
.pagination span:hover {
    color: #fff;
    background: #333;
    box-shadow: 0 0 14px rgba(0, 0, 0, .2);
}

.caseCenter h3 {
    text-align: center;
    padding-top: .2rem;
    font-size: .24rem;
    color: #4c4c4c;
    line-height: 2;
}

.casemfx {
    display: block;
    text-align: center;
    padding-top: .1rem;
    position: relative;
    font-size: .15rem;
    color: #8c8c8c;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: .3rem;
}

.sidepromenu {
    margin-top: 0rem;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.scan {
    vertical-align: text-top;
}

.casemfx a {
    color: #8c8c8c;
}

.casemfx i {
    position: relative;
    display: inline-block;
    float: left;
    margin-top: .02rem;
}

.casemfx i img {
    padding: 0 0.05rem;
}

.casemImg ul li a {
    position: relative;
    padding: 80%;
    float: left;
}

.casemImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.casemImg {
    padding: .13rem .3rem .2rem .1rem;
    border: 1px solid #ddd;
    position: absolute;
    top: 2.8rem;
    right: .5rem;
    display: none;
    z-index: 2;
    background: #fff;
}

.casemImg b {
    display: block;
    text-align: left;
    padding-left: .1rem;
    padding-bottom: .07rem;
    font-weight: normal;
}

.detailsR {
    position: absolute;
    right: 0
}

.casemfx {
    padding-bottom: .1rem;
    position: relative;
}

.productsTTOP .casemImg {
    width: 2.6rem;
}

.caseContainer {
    padding-top: .1rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid #ddd; 
    margin-top: .3rem;
}

.caseRe img {
    border-left: 180px solid transparent;
    -webkit-filter: drop-shadow(-180px 0 0px #333);
    filter: drop-shadow(-180px 0 0px #333);
}

.caseContainer p {
    padding-top: .2rem;
    margin: 0;
    font-size: .15rem;
    color: #666;
}

.caseContainer {
    padding-bottom: .2rem;
    border-bottom: 1px solid #ddd;
}

.caseContainer img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}

.productRtopr h4 {
    color: #333;
    font-weight: bold;
    line-height: 1.3;
    margin: 0.08rem auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-slide .swiper-wrapper {
    padding-bottom: .1rem;
}

.preview ul li.active-nav {
    border: 1px solid #333;
}

.productsCenter {
    border-top: 1px solid #ededed;
    padding-top: .1rem;
    overflow: hidden;
    padding-bottom: .2rem;
    display: block;
}

.caseTab ul li {
    padding: .25rem;
    background: #ededed;
    -webkit-transition: .5s;
    transition: .5s;
    color: #666;
}

.productsText {
    padding-top: .2rem;
}

.caseTab ul li:last-child a {
    text-align: right;
    width: 100%;
    background: url(../images/casecenterico2.png) no-repeat center right;
    padding-right: 15%;
    color: #666;
}

.caseTab ul li:last-child:hover a {
    background: url(../images/casecenterico2-1.png) no-repeat center right;
}

.caseTab ul li i.caseCenterIco1 {
    display: block;
    float: left;
    padding: .25rem;
    background: url(../images/casecenterico1.png) no-repeat center;
    animation: lr linear 3s infinite alternate;
}

.caseTab ul li i.caseCenterIco2 {
    display: block;
    padding: .25rem;
    animation: lr linear 3s infinite alternate;
    background: url(../images/casecenterico2.png) no-repeat center;
}

.caseTab ul li span {
    width: 47%;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: .5rem;
    margin: 0 .1rem;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: .15rem;
}

.caseTab ul li b {
    margin: 0 .07rem;
    position: relative;
    padding: .25rem 13%;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseReC ul li i a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: auto;
    bottom: 0;
    right: 0;
}

.caseTab ul li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseTab ul li:hover img {
    opacity: 1;
}

.caseTab ul li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85%;
    padding-left: 15%;
    background: url(../images/casecenterico1.png) no-repeat center left;
    -webkit-transition: .5s;
    transition: .5s;
    color: #666;
    font-size: 0.14rem;
}

.caseTab ul li:hover {
    background: #333;
}

.caseTab ul li:hover a {
    color: #fff !important;
}

.caseTab {
    margin-top: .1rem;
}

.caseTab ul li:hover a {
    background: url(../images/casecenterico1-1.png) no-repeat center left;
}

.caseTab ul li:hover .caseCenterIco2 {
    background: url(../images/casecenterico2-1.png) no-repeat center;
}

.caseTab ul li:hover span {
    color: #fff;
}

.caseRecommend {
    padding: .3rem 0 .2rem 0;
    margin-bottom: .4rem;
}

.caseRel {
    font-size: .2rem;
    color: #333;
}

.caseRel img {
    display: inline-block;
    margin-right: .05rem;
}

.caseRer a {
    display: block;
    color: #666;
}

.caseRecenter {
    cursor: url(../img/curpo.png), default;
}

.caseRecenter a {
    cursor: url(../img/curpo.png), default;
}

.caseRecenter li i {
    display: block;
    position: relative;
    padding: 30%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 5px 5px 0 0;
}

.caseCenter {
    max-width: 1300px;
    margin: 0 auto;
}

.contactBox iframe {
    display: none;
}

.caseRecenter li {
    margin-bottom: .3rem;
    -webkit-transition: .5s;
    transition: .5s;
    width: 33.333333333333333%;
}

.caseRecenter li:hover .caseListhide {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(90deg);
}

.caseList li:hover .caseText {
    background: transparent;
    border-bottom: 1px solid transparent;
}

.caseRecenter li:hover .caseListTitle {
    color: #fff;
}

.caseRecenter li:hover .caseLine {
    background: #fff;
}

.caseRecenter li:hover p {
    color: #fff;
}

.caseRecenter li .caseMore {
    font-size: .36rem;
    display: block;
    text-align: center;
    margin-top: .04rem;
    font-weight: 100;
    color: #fff;
}

.caseRecenter li .caseMore img {
    position: relative;
    animation: lr linear 3s infinite alternate;
}

.caseRecenter li .caseListTitle {
    font-size: .18rem;
    text-align: center;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .1rem 5%;
    -webkit-transition: 1.2s;
    transition: 1.2s;
}

.caseReC {
    position: relative;
}

.caseRecenter li p {
    font-size: .14rem;
    line-height: 2;
    padding: 0 .1rem;
    height: .52rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #666;
    text-align: center;
    -webkit-transition: 1.2s;
    transition: 1.2s;
}

.caseRecenter {
    margin-top: .3rem;
}

.caseRecenter .caseText {
    padding-bottom: .2rem;
}

.proList {
    padding-top: .4rem;
    margin-bottom: .4rem;
    position: relative;
    z-index: 0;
}

.proListL {
    margin-left: .121rem;
    position: relative;
    overflow: hidden;
}

.proBg {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #333;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    margin-bottom: 7px;
    display: block;
    height: 112px;
}

.prouctsTitle {
    position: relative;
    z-index: 1;
    /* padding-bottom:0.13rem;	*/
}

.pro-ico {
    margin: .12rem auto 0rem;
    display: block;
}

.proListRsort1 {
    border-bottom: 1px solid #f2f2f2;
}

.proListRsort .proListRsort {
    border: 0;
}

.productss .proListRsort1 {
    border: 0;
    border-bottom: 1px solid #dededd;
    box-shadow: 0 0 0;
    margin-bottom: 0rem;
    padding-bottom: 0.1rem;
}

.prouctsTitle h3 {
    text-align: center;
    font-size: .22rem;
    color: #fff;
    padding: 0;
    margin: 0.1rem 0 0;
}

.proListRsort1 a {
    display: inline-block;
    margin-right: 20px;
    font-size: .14rem;
    line-height: 2.5;
    color: #666;
    -webkit-transition: .5s;
    transition: .5s;
}

.proListRsort1 a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    margin: 3px .07rem;
}

.proListTop {
    overflow: hidden;
}

.newsTop li {
    padding: 0 8px;
}

.prouctsTitle p {
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    padding-top: 0rem;
    margin-bottom: 19px;
    font-size: 0.16rem;
    height: 0.16rem;
}

.proList_classify {
    background: #fafafa;
    overflow: hidden;
}

.news_classify {
    overflow: hidden;
}

.proList_classify ul {}

.proList_classify ul li a.proListclass1 {
    position: relative;
    margin-top: .06rem;
}

.proList_classify ul li i {
    width: 3%;
    background: #fff;
    display: inline-block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 2px;
}

.proList_classify ul li p {
    border: 1px solid #dededd;
    border-top: 1px solid #fff;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.proListclass1 {
    padding: .12rem;
    background: #333;
    display: block;
    width: 100%;
    padding-left: 6%;
    font-weight: bold;
    color: #fff;
    position: relative;
}

.proListclass1 span {
    width: 85%;
    margin-left: 2%;
    display: block;
    font-size: .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proListclass1:hover {
    color: #fff;
}

.proList_classify ul li p a {
    border-bottom: 1px solid #f3f3f3;
    width: 94%;
    padding-top: 0;
    margin-left: 3%;
    display: block;
    margin: .05rem;
    padding-bottom: .05rem;
    position: relative;
}

.proList_classify ul li p a span {
    padding: .07rem;
    width: 90%;
    display: block;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    font-size: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proList_classify ul {
    margin-left: 0px;
    margin-right: 0px;
    display: block;
    overflow: hidden;
}

.proList_classify ul li p a b {
    position: absolute;
    width: 100%;
    height: 86%;
    background: #333;
    left: -108%;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: .04rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.proList_classify ul li p a:hover b {
    left: -0.07rem;
}

.proList_classify ul li p a.cur b {
    left: -0.07rem;
}

.proList_classify ul li p a.cur span {
    color: #fff;
}

.proList_classify ul li p a:hover span {
    color: #fff;
}

.proList_classify ul li p a span::before {
    width: 2px;
    padding: .05rem 0;
    margin-right: .1rem;
    vertical-align: middle;
    background: #dededd;
    content: "";
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
    height: .2rem;
    margin-left: 0.05rem;
}

.proHot {
    width: 100%;
    padding: .1rem 0 0.18rem;
    background: #fafafa;
}

.proHot i {
    display: block;
    font-size: .22rem;
    text-align: center;
}

.proHot i img {
    padding-right: .1rem;
}

.proList_sort1 {
    width: 100%;
    margin-top: .2rem;
    position: relative;
}

.proList_sort1 li {
    margin-bottom: .1rem;
}

.proList_sort1 ul li img {
    width: 100%;
}

.proList_sort1 ul li p a {
    display: block;
    text-align: center;
}

.proList_sortGd {
    width: 100%;
    margin-top: .2rem;
    position: relative;
}

.proList_sortGd li {
    margin-bottom: .1rem;
}

.proList_sortGd ul li img {
    width: 100%;
}

.proList_sortGd ul li p a {
    display: block;
    text-align: center;
}

.proHotimg {
    display: block;
    position: relative;
    padding: 36%;
    border: 5px solid #fff;
}

.proHotimg img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    right: 0;
    margin: auto;
}

.proHot_txt {
    text-align: center;
    display: block;
    line-height: .3rem;
    border-bottom: 1px solid #dededd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pro-next img {
    margin-left: 80%;
    cursor: pointer;
}

.pro-prev img {
    cursor: pointer;
    margin-left: 20%;
}

.newsHot {
    width: 100%;
    padding: .1rem 0.1rem 0.1rem;
    background: #fafafa;
    margin-top: .1rem;
    overflow: hidden;
}

.newsHot>i {
    display: block;
    font-size: .22rem;
    text-align: center;
    padding-bottom: .1rem;
    border-bottom: 1px solid #e6e6e6;
}

.newsHot i img {
    padding-right: .1rem;
}

.newsHot ul li {
    display: inline-block;
    line-height: 2.6;
    border-bottom: 1px solid #e6e6e6;
    color: #999;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsHot ul li:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.newsHot ul li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
    margin-left: .1rem;
    font-size: .14rem;
    width: 8em;
}

.newsHot ul li i,
.newsHot ul li span {
    color: #999;
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .15rem;
    white-space: nowrap;
}

.newsHot ul li:hover i,
.newsHot ul li:hover span {
    color: #333
}

.proListR {
    /* float: right; */
}

.proList .container>.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.proListRtop {
    padding: .1rem 0;
    background: #f4f4f4;
}

.proListRtop i {
    padding-left: .2rem;
    font-size: .16rem;
}

.proListRtop i img {
    display: inline-block;
    margin-right: .1rem;
}

.proListRsort {
    padding: .15rem;
    background: #fff;
    box-shadow: -6px 8px 15px rgba(0, 0, 0, 0.02);
    border: 1px solid #f2f2f2;
    border-top: 0;
}

.productsLir {
    padding: 0;
}

.proListRsort a {
    display: inline-block;
    margin-right: 20px;
    font-size: .14rem;
    line-height: .3rem;
    color: #666;
}

.proList_sort ul li:hover .proHot_txt {
    color: #333;
}

.proListRsort a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    margin: 3px .07rem;
}

.proListCenter li {
    margin-top: .2rem;
    padding: 0 10px;
}

.proListCenter i a {
    position: relative;
    padding: 31%;
    overflow: hidden;
    object-fit: cover;
    display: block;
}

.row1 {
    margin-left: -10px;
    margin-right: -10px;
}

.proListCenter i a::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    position: absolute;
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    z-index: 2;
    background: url(../images/see.png) no-repeat center;
}

.proListCenter i a::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    position: absolute;
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    z-index: 2;
}

.productsBorer:hover i a::before,
.productsBorer:hover i a::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.pagination span.current {
    display: block;
    background: #333;
    color: #fff;
}

.productsBorer i {
    position: relative;
    padding: 0%;
    overflow: hidden;
    object-fit: cover;
    display: block;
    -webkit-transition: .5s;
    transition: .5s;
    width: 96%;
    margin: 2%
}

.productsBorer i::after {
    content: "";
    width: 0%;
    height: 0%;
    background: rgba(0, 0, 0, .1);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: .03rem
}

.proText {
    width: 96%;
    margin: 0 2%;
}

.productsBorer:hover i::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.productss ul li {
    margin-bottom: .3rem;
}

.productsMore {
    display: block;
    margin-bottom: .4rem;
}

.border-left {
    width: 1px;
    height: 0px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-right {
    width: 1px;
    height: 0px;
    background: #333;
    position: absolute;
    bottom: 0;
    right: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-top {
    width: 0px;
    height: 1px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-bottom {
    width: 0px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 0;
    right: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-proleft {
    width: 1px;
    height: 0px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-proright {
    width: 1px;
    height: 0px;
    background: #333;
    position: absolute;
    bottom: 0;
    right: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-protop {
    width: 0px;
    height: 1px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.border-probottom {
    width: 0px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 0;
    right: 0%;
    -webkit-transition: .5s;
    transition: .5s;
}

.proListCenter li .productsBorer:hover .border-left {
    height: 100%;
}

.proListCenter li .productsBorer:hover .border-right {
    height: 100%;
}

.proListCenter li .productsBorer:hover .border-top {
    width: 100%;
}

.proListCenter li .productsBorer:hover .border-bottom {
    width: 100%;
}

.productsLil:hover .border-proleft {
    height: 100%;
}

.productsLil:hover .border-proright {
    height: 100%;
}

.productsLil:hover .border-protop {
    width: 100%;
}

.productsLil:hover .border-probottom {
    width: 100%;
}

.proListCenter i a img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    right: 0;
    bottom: 0;
    margin: auto;
}

.proListRsort a:hover {
    color: #333;
}

.proListCenter ul li:hover .caseListhide {
    top: 0;
}

.proListCenter ul li:hover a.proListTitle {
    color: #333;
    border-bottom: 1px solid #dededd;
}

.proListCenter ul li:hover a.proMore {
    color: #333;
}

.proListCenter ul li:hover .productsBorer {}

.productsBorer {
    border: 1px solid #dededd;
    padding: 0;
    border-radius: .05rem;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
}

.proText a.proListTitle {
    display: block;
    padding: .1rem 0;
    color: #4c4c4c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: .16rem;
    padding: .08rem;
    border-bottom: 1px solid #dededd;
}

@keyframes llr {
    0% {
        background: url(../images/promore.png) no-repeat 95% center;
    }

    25% {
        background: url(../images/promore.png) no-repeat 97% center;
    }

    50% {
        background: url(../images/promore.png) no-repeat 100% center;
    }

    75% {
        background: url(../images/promore.png) no-repeat 97% center;
    }

    100% {
        background: url(../images/promore.png) no-repeat 95% center;
    }
}

@keyframes proll {
    0% {
        background: url(../images/productsico3.png) no-repeat 95% center;
    }

    25% {
        background: url(../images/productsico3.png) no-repeat 97% center;
    }

    50% {
        background: url(../images/productsico3.png) no-repeat 100% center;
    }

    75% {
        background: url(../images/productsico3.png) no-repeat 97% center;
    }

    100% {
        background: url(../images/productsico3.png) no-repeat 95% center;
    }
}

.proMore {
    padding: .08rem;
    display: block;
    font-size: .1rem;
    text-transform: uppercase;
    color: #c6c6c6;
    background: url(../images/promore.png) no-repeat 100% center;
    animation: llr linear 1.5s infinite alternate;
}

.pro_page {
    padding-top: .1rem;
    margin-left: 15px;
    margin-top: .4rem;
    text-align: right;
}

.btn-text-parent {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.wrap_text {
    display: inline-block;
}

.buildin-btn-text {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    transform: translateY(100%);
}

.buildin-btn-text .btn-letter {
    opacity: 0;
}

.btn-letter {
    display: inline-block;
    margin: 0em 0.05em;
    position: relative;
    transition: transform .6s, opacity .6s ease;
}

.current-btn-text .btn-letter:nth-child(1) {
    transition-delay: 49ms;
}

.current-btn-text .btn-letter:nth-child(2) {
    transition-delay: 99ms;
}

.current-btn-text .btn-letter:nth-child(3) {
    transition-delay: 149ms;
}

.current-btn-text .btn-letter:nth-child(4) {
    transition-delay: 199ms;
}

.current-btn-text .btn-letter:nth-child(5) {
    transition-delay: 249ms;
}

.current-btn-text .btn-letter:nth-child(6) {
    transition-delay: 299ms;
}

.current-btn-text .btn-letter:nth-child(7) {
    transition-delay: 349ms;
}

.current-btn-text .btn-letter:nth-child(8) {
    transition-delay: 399ms;
}

.current-btn-text .btn-letter:nth-child(9) {
    transition-delay: 449ms;
}

.current-btn-text .btn-letter:nth-child(10) {
    transition-delay: 499ms;
}

.current-btn-text .btn-letter:nth-child(11) {
    transition-delay: 549ms;
}

.current-btn-text .btn-letter:nth-child(12) {
    transition-delay: 599ms;
}

.current-btn-text .btn-letter:nth-child(13) {
    transition-delay: 649ms;
}

.current-btn-text .btn-letter:nth-child(14) {
    transition-delay: 699ms;
}

.current-btn-text .btn-letter:nth-child(15) {
    transition-delay: 749ms;
}

.current-btn-text .btn-letter:nth-child(16) {
    transition-delay: 799ms;
}

.current-btn-text .btn-letter:nth-child(17) {
    transition-delay: 849ms;
}

.current-btn-text .btn-letter:nth-child(18) {
    transition-delay: 899ms;
}

.current-btn-text .btn-letter:nth-child(19) {
    transition-delay: 949ms;
}

.current-btn-text .btn-letter:nth-child(20) {
    transition-delay: 999ms;
}

.current-btn-text .btn-letter:nth-child(21) {
    transition-delay: 1049ms;
}

.current-btn-text .btn-letter:nth-child(22) {
    transition-delay: 1099ms;
}

.current-btn-text .btn-letter:nth-child(23) {
    transition-delay: 1149ms;
}

.current-btn-text .btn-letter:nth-child(24) {
    transition-delay: 1199ms;
}

.current-btn-text .btn-letter:nth-child(25) {
    transition-delay: 1249ms;
}

.current-btn-text .btn-letter:nth-child(26) {
    transition-delay: 1299ms;
}

.current-btn-text .btn-letter:nth-child(27) {
    transition-delay: 1349ms;
}

.current-btn-text .btn-letter:nth-child(28) {
    transition-delay: 1399ms;
}

.current-btn-text .btn-letter:nth-child(29) {
    transition-delay: 1449ms;
}

.current-btn-text .btn-letter:nth-child(30) {
    transition-delay: 1499ms;
}

.buildin-btn-text .btn-letter:nth-child(1) {
    opacity: 0;
    transition-delay: 49ms;
}

.buildin-btn-text .btn-letter:nth-child(2) {
    opacity: 0;
    transition-delay: 99ms;
}

.buildin-btn-text .btn-letter:nth-child(3) {
    opacity: 0;
    transition-delay: 149ms;
}

.buildin-btn-text .btn-letter:nth-child(4) {
    opacity: 0;
    transition-delay: 199ms;
}

.buildin-btn-text .btn-letter:nth-child(5) {
    opacity: 0;
    transition-delay: 249ms;
}

.buildin-btn-text .btn-letter:nth-child(6) {
    opacity: 0;
    transition-delay: 299ms;
}

.buildin-btn-text .btn-letter:nth-child(7) {
    opacity: 0;
    transition-delay: 349ms;
}

.buildin-btn-text .btn-letter:nth-child(8) {
    opacity: 0;
    transition-delay: 399ms;
}

.buildin-btn-text .btn-letter:nth-child(9) {
    opacity: 0;
    transition-delay: 449ms;
}

.buildin-btn-text .btn-letter:nth-child(10) {
    opacity: 0;
    transition-delay: 499ms;
}

.buildin-btn-text .btn-letter:nth-child(11) {
    opacity: 0;
    transition-delay: 549ms;
}

.buildin-btn-text .btn-letter:nth-child(12) {
    opacity: 0;
    transition-delay: 599ms;
}

.buildin-btn-text .btn-letter:nth-child(13) {
    opacity: 0;
    transition-delay: 649ms;
}

.buildin-btn-text .btn-letter:nth-child(14) {
    opacity: 0;
    transition-delay: 699ms;
}

.buildin-btn-text .btn-letter:nth-child(15) {
    opacity: 0;
    transition-delay: 749ms;
}

.buildin-btn-text .btn-letter:nth-child(16) {
    opacity: 0;
    transition-delay: 799ms;
}

.buildin-btn-text .btn-letter:nth-child(17) {
    opacity: 0;
    transition-delay: 849ms;
}

.buildin-btn-text .btn-letter:nth-child(18) {
    opacity: 0;
    transition-delay: 899ms;
}

.buildin-btn-text .btn-letter:nth-child(19) {
    opacity: 0;
    transition-delay: 949ms;
}

.buildin-btn-text .btn-letter:nth-child(20) {
    opacity: 0;
    transition-delay: 999ms;
}

.buildin-btn-text .btn-letter:nth-child(21) {
    opacity: 0;
    transition-delay: 1049ms;
}

.buildin-btn-text .btn-letter:nth-child(22) {
    opacity: 0;
    transition-delay: 1099ms;
}

.buildin-btn-text .btn-letter:nth-child(23) {
    opacity: 0;
    transition-delay: 1149ms;
}

.buildin-btn-text .btn-letter:nth-child(24) {
    opacity: 0;
    transition-delay: 1199ms;
}

.buildin-btn-text .btn-letter:nth-child(25) {
    opacity: 0;
    transition-delay: 1249ms;
}

.buildin-btn-text .btn-letter:nth-child(26) {
    opacity: 0;
    transition-delay: 1299ms;
}

.buildin-btn-text .btn-letter:nth-child(27) {
    opacity: 0;
    transition-delay: 1349ms;
}

.buildin-btn-text .btn-letter:nth-child(28) {
    opacity: 0;
    transition-delay: 1399ms;
}

.buildin-btn-text .btn-letter:nth-child(29) {
    opacity: 0;
    transition-delay: 1449ms;
}

.buildin-btn-text .btn-letter:nth-child(30) {
    opacity: 0;
    transition-delay: 1499ms;
}

.caseTitleR>ul {
    position: relative;
}

.caseTitleR ul li {
    float: left;
    text-align: center;
    font-size: 15px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.caseTitleR ul li a {
    display: block;
    color: #666666;
    overflow: hidden;
    font-size: .15rem;
}

.pc-slide {
    width: 100%;
    margin: 0 auto;
}

.view .swiper-container {
    width: 100%;
}

.view .arrow-left {
    background: rgba(0, 0, 0, .1);
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -25px;
    width: 38px;
    height: 37px;
    z-index: 10;
}

.view .arrow-left:after {
    content: "";
    background: url(../images/prev.png) no-repeat left center;
    overflow: hidden;
    padding: 49%;
    top: 0px;
    position: absolute;
}

.view .arrow-right:after {
    content: "";
    background: url(../images/next.png) no-repeat left center;
    overflow: hidden;
    padding: 49%;
    top: 0px;
    position: absolute;
}

.view .arrow-right {
    background: rgba(0, 0, 0, .1);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -25px;
    width: 38px;
    height: 37px;
    z-index: 10;
}

.preview {
    width: 100%;
    margin-top: 10px;
    position: relative;
}

.preview .swiper-container {
    width: 100%;
}

.preview .swiper-slide {
    width: 20%;
    cursor: pointer;
}

.preview .slide6 {
    width: 82px;
}

.preview .arrow-left {
    background: url(../images/feel3.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
}

.preview .arrow-right {
    background: url(../images/feel4.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
}

.preview img {
    padding: 1px;
}

.productTopImg i {
    display: block;
    position: relative;
    padding: 30.9%;
}

.messageBth {
    width: 1rem;
    height: 0.3rem;
    display: block;
    border: 1px solid #dedede;
    position: absolute;
    left: 36%;
    top: 70%;
    -webkit-transition: .5s;
    transition: .5s;
}

.messageBth:hover {
    background: #333;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .02);
}

.productTopImg img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 96%;
    max-height: 96%;
    margin: auto;
}

.productTopImg {
    padding: 0rem;
}

.productsTTOP:hover .casemImg {
    display: block;
}

.view {
    border: 1px solid #ededed;
}

.preview ul li span {
    display: block;
    position: relative;
    padding: 32.8%;
}

.preview ul li span img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 96%;
    max-height: 96%;
    bottom: 0;
    right: 0;
    margin: auto;
}

.contactBox ul li:last-child {
    border-right: 0;
}

.productRtopr h4 a {
    color: #333;
    font-weight: bold;
    -webkit-transition: .5s;
    transition: .5s;
    display: block;
}

.productRtopr h4 a:hover {
    color: #333;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.productRtopr p {
    height: 1.6rem;
    overflow: hidden;
}

.productRtopr span {
    font-size: .1rem;
    line-height: 2;
    color: #999;
    display: block;
    font-size: .12rem;
    height: .7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 0.1rem;
}

.productRtopr h5 {
    font-weight: bold;
    font-size: .15rem;
    font-weight: bold;
    margin-top: .1rem;
    margin-bottom: 0.1rem;
}

.relevant a {
    display: inline-block;
    border: 1px solid #dededd;
    padding: .03rem .1rem;
    margin-bottom: .04rem;
    margin-right: .05rem;
    color: #808080;
    font-size: .14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    -webkit-transition: .5s;
    transition: .5s;
}

.relevant a:hover {
    color: #333;
}

.relevantImg ul li {
    width: 48%;
    margin: 0 1%;
    float: left;
}

.relevantImg ul li>a.relevantImgA {
    position: relative;
    padding: 34%;
    display: block;
    border: 1px solid #dededd;
}

.relevantImg ul li img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: .02rem;
}

.relevantImg ul li .relevantImgMore {
    display: block;
    text-align: center;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #808080;
}

.relevantImg ul li:hover .relevantImgMore {
    color: #333;
}

.productsMore {
    display: inline-block;
    padding: 0.05rem .1rem;
    border: 1px solid #dededd;
    margin-top: .3rem;
    margin-left: .3rem;
    -webkit-transition: .5s;
    transition: .5s;
    color: #737373;
}

.productsMore i {
    overflow: hidden;
    display: inline-block;
    width: .16rem;
    vertical-align: sub;
}

.productsMore:hover i img {
    border-left: 180px solid transparent;
    -webkit-filter: drop-shadow(-180px 0 0px #fff);
    filter: drop-shadow(-180px 0 0px #fff);
}

.productsMore:hover {
    background: #333;
    color: #fff;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.productsCtl {
    background: #333;
    padding: .05rem .1rem;
    border-radius: .03rem .03rem 0 0;
}

.productsCtl img {
    display: inline-block;
    margin-right: .05rem;
    margin-left: .2rem;
}

.productsCtl i {
    color: #fff;
    font-size: .16rem;
}

.productCenTop {
    overflow: hidden;
    margin-top: .1rem;
    border-bottom: 1px solid #dededd;
    position: relative;
}

.details {
    line-height: 1;
    text-transform: uppercase;
    color: #dededd;
    font-size: 0.16rem;
    margin-top: 0.1rem;
}

.detailsR {
    text-align: right;
    padding: 0;
}

.detailsR i img {
    padding: 0 0.05rem;
}

.casemImg1 {
    padding: .13rem .3rem .2rem .1rem;
    border: 1px solid #ddd;
    top: .3rem;
    right: .05rem;
    z-index: 2;
    background: #fff;
}

.casemImg1 b {
    display: block;
    text-align: left;
    padding-left: .1rem;
    padding-bottom: .07rem;
    font-weight: normal;
}

.casemImg1 ul li a {
    position: relative;
    padding: 80%;
    float: left;
}

.casemImg1 img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.productsText {
    padding-bottom: .2rem;
    border-bottom: 1px solid #dededd;
}

.caseTab {
    padding-top: .4rem;
    background: url(../images/icod33.png) no-repeat center .1rem;
}

.productsText p {
    padding-top: .2rem;
    margin: 0;
    color: #999;
}

.caseTab ul li:hover {
    color: #fff;
}

.productsTTOP {
    position: relative;
}

.productsText img {
    max-width: 100%;
    margin: .2rem 0;
    height: auto;
}

.proMessage h4 {
    text-align: center;
    margin-top: .3rem;
    font-size: .24rem;
}

.proMessage p {
    font-size: .14rem;
    text-align: center;
    color: #666;
    margin-bottom: .2rem;
    font-family: arial;
}

.promessageBox input {
    border: 1px solid #dededd;
    padding: 0.07rem .1rem;
    display: block;
    width: 100%;
    padding-left: .14rem;
    text-indent: .14em;
    color: #666;
    background: #999;
    border-radius: 5px;
    font-size: .15rem;
    text-indent: 1.5em;
}

::-webkit-input-placeholder {
    color: #999;
    font-size: .16rem;
}

::-moz-placeholder {
    color: #999;
    font-size: .16rem;
}

:-ms-input-placeholder {
    color: #999;
    font-size: .16rem;
}

.contactBox input::placeholder {
    color: #999;
}

.promessageBox input::placeholder {
    color: #999;
}

.promessageBox input.pro-name {
    background: url(../images/name.png) no-repeat .1rem center;
}

.promessageBox input.pro-tel {
    background: url(../images/tel.png) no-repeat .1rem center;
}

.promessageBox input.pro-email {
    background: url(../images/yanzheng.png) no-repeat .1rem center;
}

.imgCode1 {
    padding: 0.2rem 15px 0.1rem;
}

.imgcodeText {
    width: 100%;
    padding: 0 5px 0 15px;
}

.pro-textarea {
    width: 80%;
    border: 1px solid #dededd;
    text-indent: 1.44em;
    padding: .8% 1.4%;
    line-height: 1.5;
    min-height: .85rem;
    color: #666;
    margin-top: .2rem;
    background: url(../images/textarea.png) no-repeat .1rem .1rem;
    padding-left: .14rem;
    border-radius: 5px;
    font-size: .16rem;
}

.yanzhengma {
    width: 20%;
    float: right;
}

.promessageBox input.a-bth {
    display: block;
    margin-top: .2rem;
    outline: none;
    border: 0;
    -webkit-transition: .5s;
    transition: .5s;
    color: #fff;
    padding-left: 0;
    letter-spacing: 4px;
}

.promessageBox input.a-bth::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

.a-bth:hover {
    background: #333;
    color: #fff;
}

.productsLil {
    border: 1px solid #dededd;
    overflow: hidden;
    border-radius: .03rem;
}

.productsLil i {
    display: block;
    position: relative;
    padding: 49.5%;
    object-fit: cover;
    margin-top: .1rem;
}

.productsLil img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    right: 0;
    bottom: 0;
    margin: auto;
}

.productsTitle {
    display: block;
    width: 100%;
    padding: .1rem 0;
    background: url(../images/productsico3.png) no-repeat 100% center;
    animation: proll linear 2s infinite alternate;
}

.productsTitle span {
    display: block;
    font-size: .16rem;
}

.productsTitle b {
    display: block;
    font-weight: normal;
    font-size: .14rem;
    color: #999;
}

.productsLir i {
    display: block;
    position: relative;
    padding: 40.5%;
    overflow: hidden;
    border-radius: .05rem;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #e6e6e6;
}

.proMored {
    height: .21rem;
    border-radius: 0 0 .05rem .05rem;
}

.prpductsLi {
    display: block;
    padding: .05rem;
}

.proList {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.prolistImgd:hover i {
    box-shadow: 0 0px 8px rgba(0, 0, 0, .2);
    border: 1px solid #fff;
    border-radius: .03rem;
}

.productsLir i img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    padding: 4%;
    right: 0;
    bottom: 0;
    margin: auto;
}

.proMored {
    position: absolute;
    top: 83.5%;
    display: block;
    border-radius: 0 0 .03rem .03rem;
    left: 0;
    width: 96%;
    background: rgba(0, 0, 0, .4) url(../images/productslist3.png) no-repeat 90% .08rem;
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0% 5%;
    font-size: .14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20%;
    left: 2%;
    line-height: 1.8;
    height: .24rem;
}

.prolistImgd:hover .proMored {
    padding: 0;
    width: 97%;
    height: 97%;
    display: block;
    text-align: center;
    padding: 33% 2%;
    top: 1.5%;
    color: #fff;
    background: rgba(0, 0, 0, .2) url(../images/productslist4.png) no-repeat center 67%;
    left: 1.5%;
    overflow: hidden;
    border-radius: .03rem;
}

.proListRsort1 a:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.productss .proListRsort {
    border-bottom: 1px solid #dededd;
    box-shadow: 0 0 0;
    margin-bottom: 0rem;
}

.prolistImgd {
    padding: 0 .05rem .1rem;
}

.pagination>li>a,
.pagination>li>span {
    margin: 0 .03rem;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    background: #333;
    color: #fff;
}

.caseTitleR {
    margin-top: 0.05rem;
}

.abouttitleR ul li {
    margin-right: .2rem;
}

.aboutTitle h3 {
    font-size: .26rem;
    text-align: center;
    line-height: 1;
    margin-top: .4rem;
    color: #4c4c4c;
}

.aboutTitle span {
    text-align: center;
    display: block;
    text-transform: uppercase;
    color: #666;
    font-size: .16rem;
    line-height: 2.5;
    font-family: Arial;
}

.aboutTop {
    margin-top: .2rem;
}

.aboutL {
    padding-left: 0;
    padding-bottom: .7rem;
}

.aboutL i {
    display: block;
    position: relative;
    padding: 39%;
    overflow: hidden;
}

.aboutL i img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: .5s;
    transition: .5s;
}

.aboutR {
    padding-top: .2rem;
}

.aboutR h3 {
    color: #fff;
    font-size: .26rem;
    color: #333;
    text-align: center;
}

.aboutR span {
    font-size: .15rem;
    color: #333;
    line-height: 2;
}

.aboutLine {
    width: 1rem;
    height: 1px;
    background: #f2f2f2;
    margin: .2rem auto;
}

.aboutR p {
    color: #666;
    line-height: 2;
    text-indent: 2em;
    -webkit-transition: .3s;
    transition: .3s;
}

.clear {
    clear: both;
}

.aboutR i {
    display: block;
    font-size: .15rem;
    padding-bottom: .5rem;
    background: url(../images/aboutidd.png) no-repeat center bottom;
}

.honor ul li {
    margin-top: .3rem;
}

.honorImg {
    display: block;
    position: relative;
    padding: 36%;
    background: #fff;
    border: 1px solid #ddd;
}

.honorImg img {
    padding: 2%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.honorMore {
    text-align: center;
    display: block;
    padding-top: 0.08rem;
    line-height: 3;
    font-size: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.honor ul li i {
    width: .08rem;
    height: .08rem;
    display: block;
    border-radius: 50%;
    border: 2px solid #dededd;
    margin: .2rem auto 0;
    background: #fff;
}

.honorArrow {
    height: .3rem;
    position: relative;
}

.honorArrow .honorL {
    width: .3rem;
    height: .3rem;
    overflow: hidden;
    background: #fff url(../images/honorl.png) no-repeat center;
    top: -0.2rem;
    position: absolute;
    z-index: 99;
    left: 0;
    cursor: pointer;
}

.honor {
    position: relative;
}

.honorLine {
    width: 100%;
    height: 1px;
    background: #dededd;
    position: absolute;
    top: -0.05rem;
}

.honorArrow .honorR {
    width: .3rem;
    height: .3rem;
    overflow: hidden;
    background: #fff url(../images/honorr.png) no-repeat center;
    top: -0.2rem;
    position: absolute;
    z-index: 99;
    cursor: pointer;
    right: 0;
}

.contact {
    background: url(../images/aboutbottomhover.jpg) no-repeat center bottom;
    overflow: hidden;
    padding-bottom: 1.5rem;
    margin-bottom: -10px;
}

.contactTop h4 {
    text-align: center;
    padding-top: .9rem;
    font-weight: bold;
    font-size: .18rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.contactmeg {
    background: url(../images/contactico1.png) no-repeat center .1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.contactNetwork {
    background: url(../images/contactico2.png) no-repeat center .1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.contactService {
    background: url(../images/contactico3.png) no-repeat center .1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.contactTop span {
    font-size: .14rem;
    text-align: center;
    display: block;
    padding-bottom: .1rem;
    -webkit-transition: .5s;
    transition: .5s;
    color: #d4d4d4;
}

.contactBottom {
    padding: .3rem .3rem .7rem;
    text-align: center;
    line-height: 2;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    font-size: .15rem;
    overflow: hidden;
    color: #666;
}

.contactTop {
    background: #fff;
    -webkit-transition: .5s;
    transition: .5s;
    padding: .1rem 0;
}

.contact ul li {
    margin-top: .4rem;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
}

.contact ul li:hover .contactTop {
    background: #333;
}

.contact ul li:hover .contactTop h4 {
    color: #fff;
}

.contact ul li:hover .contactTop span {
    color: #fff;
}

.contact ul li:hover h4.contactmeg {
    background: url(../images/contactico1-1.png) no-repeat center .1rem;
}

.contact ul li:hover h4.contactNetwork {
    background: url(../images/contactico2-1.png) no-repeat center .1rem;
}

.contact ul li:hover h4.contactService {
    background: url(../images/contactico3-1.png) no-repeat center .1rem;
}

.contact ul li:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.aboutTitle p {
    padding: .3rem .5rem;
    font-size: .15rem;
    color: #999;
    text-align: center;
    line-height: 1.8;
}

.contactList {
    overflow: hidden;
}

.contactList ul li {
    border-right: 1px solid #dededd;
    padding: .2rem 0 0.4rem;
}

.contactList ul li:last-child {
    border-right: 0;
}

.contactList ul li img {
    display: block;
    margin: 0 auto .1rem;
    height: .4rem;
    animation: tb linear 3s infinite alternate;
}

.contactList ul li h4 {
    font-size: .2rem;
    text-align: center;
    line-height: 3;
    margin: 0;
}

.contactList ul li p {
    text-align: center;
    font-size: .16rem;
    height: .6rem;
    line-height: 2;
    padding: 0 .2rem;
}

.contactBox {
    border: 5px solid #f4f4f4;
    display: block;
    overflow: hidden;
    margin-top: .5rem;
}

.contactBox ul li {
    padding: 2% 5%;
    margin: .4rem 0;
    border-right: 1px solid #dededd;
    min-height: 3.7rem;
}

.contactBox ul li p {
    line-height: 2;
    color: #999;
    font-size: .15rem;
}

.contactBox ul li p span {
    font-size: .16rem;
}

.contactBox .proMessage h4 {
    margin-top: 0;
    margin-bottom: 0;
}

.contactBox input.contact-name {
    background: url(../images/name.png) no-repeat .1rem center;
}

.contactBox input.contact-imgCode {
    background: url(../images/yanzheng.png) no-repeat .1rem center;
    width: 80%;
    margin-top: 0.2rem;
    float: left;
}

.contactImgcode {
    float: left;
    margin-top: 0.2rem;
    margin-left: 1%;
}

.contactBox input {
    border: 1px solid #dededd;
    padding: .07rem .1rem;
    display: block;
    width: 100%;
    text-indent: .25rem;
    color: #666;
    font-size: .14rem;
}

.contactBox input.contact-tel {
    background: url(../images/tel.png) no-repeat .1rem center;
}

.contact-textarea {
    width: 100%;
    border: 1px solid #dededd;
    text-indent: .28rem;
    padding: 1% 1.4%;
    line-height: 1.5;
    min-height: .7rem;
    color: #666;
    margin-top: .1rem;
    background: url(../images/textarea.png) no-repeat .08rem .1rem;
    margin-top: .2rem;
    font-size: .16rem;
}

.contactBox .contact-bth {
    display: block;
    margin-top: 0.05rem;
    outline: none;
    border: 0;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: .05rem;
    color: #fff;
    background: #999;
    margin-top: .2rem;
    padding-left: 0;
    letter-spacing: 4px;
    font-size: .16rem;
    text-indent: 0rem;
}

.news_classify ul {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0px;
}

.news_classify ul li {
    margin-bottom: 0.05rem;
}

.news_classify ul li:nth-child {
    margin-bottom: 0;
}

.newsclass1 {
    padding: .12rem;
    background: #fafafa;
    display: block;
    width: 100%;
    padding-left: 6%;
    font-weight: bold;
    color: #333;
}

.news_classify ul li i {
    width: 2%;
    background: #fff;
    display: inline-block;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100px;
    z-index: 9;
    -webkit-transition: .5s;
    transition: .5s;
}

.news_classify span {
    width: 100%;
    padding: 0 15%;
    display: block;
    font-size: .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    position: relative;
    z-index: 999;
    background: url(../images/newsico1.png) no-repeat 90% center;
    -webkit-transition: .5s;
    transition: .5s;
}

.news_classify ul li b {
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #333;
    -webkit-transition: .5s;
    transition: .5s;
}

.news_classify ul li:hover i {
    left: .18rem;
}

.news_classify ul li:hover b {
    left: 0;
}

.news_classify ul li:hover span {
    color: #fff;
    background: url(../images/newsico3.png) no-repeat 90% center;
}

.newsCenterTop {
    padding: .2rem;
    overflow: hidden;
    box-shadow: 0 -5px 12px rgba(0, 0, 0, .03);
    margin-bottom: 0.3rem;
}

.newsCenterTopl a {
    display: block;
    position: relative;
    padding: 32%;
    overflow: hidden;
    border: 1px solid #f2f2f2;
}

.newsCenterTopl a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 98%;
    max-height: 98%;
    -webkit-transition: 1s;
    transition: 1s;
}

.newsCenterTop:hover a img {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    opacity: .8;
}

.newsCenterTopr h4 a {
    font-size: .2rem;
    display: block;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    -webkit-transition: 1s;
    transition: 1s;
}

.newsCenterTop:hover h4 a {
    color: #333;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.newsCenterTopr p {
    font-size: .15rem;
    line-height: 2;
    height: .54rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #999;
}

.newsCenterTopr span {
    margin-top: .3rem;
    display: block;
    color: #999;
}

.newsCenterTopr span img {
    display: inline-block;
    vertical-align: inherit;
    padding-right: .06rem;
}

.newsCemterb ul li {
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

.newsCenterb ul li .newsCenterbImg {
    position: relative;
    padding: 18%;
    display: block;
    background: #fafafa;
}

.newsCenterb ul li .newsCenterbImg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    margin: auto;
    max-height: 100%;
}

.newsCenterbImg::after {
    content: "";
    top: 8%;
    right: 5%;
    bottom: 8%;
    left: 5%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    -moz-transition: opacity .4s, -moz-transform .4s;
    -o-transition: opacity .4s, -o-transform .4s;
    transition: opacity .4s, transform .4s;
}

.newsCenterbImg::before {
    top: 8%;
    right: 5%;
    bottom: 8%;
    z-index: 2;
    left: 5%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    -moz-transition: opacity .4s, -moz-transform .4s;
    -o-transition: opacity .4s, -o-transform .4s;
    transition: opacity .4s, transform .4s;
}

.newsCenterbImg i {
    display: block;
    width: 0%;
    height: 0%;
    background: rgba(0, 0, 0, .2);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsCenterb ul li:hover .newsCenterbImg i {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.newsCenterb ul li:hover .newsCenterbTextr a {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.newsCenterbImg::before,
.newsCenterbImg::after {
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    -moz-transition: opacity .4s, -moz-transform .4s;
    -o-transition: opacity .4s, -o-transform .4s;
    transition: opacity .4s, transform .4s;
}

.newsCenterb ul li:hover .newsCenterbImg::before,
.newsCenterb ul li:hover .newsCenterbImg::after {
    content: "";
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.nwesCenterbText {
    overflow-y: hidden;
    padding-bottom: .05rem;
}

.nwesCenterbText span {
    display: block;
    width: 20%;
    margin: .1rem;
    border: 1px solid #dededd;
    font-size: .25rem;
    line-height: 1;
    padding: .1rem .12rem;
    color: #999;
    float: left;
}

.nwesCenterbText span i {
    font-size: .15rem;
    display: block;
    padding-top: .04rem;
    padding-bottom: 0rem;
}

.newsCenterbTextr {
    padding: 0 .2rem 0 0;
    width: 74.4%;
    float: left;
    background: url(../images/newsico04.png) no-repeat 97% center;
}

.newsCenterbTextr a {
    padding: .16rem 0 0;
    display: block;
    font-size: .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
    width: 90%;
}

.newsCenterbTextr p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 2.7;
    margin: 0;
    font-size: .15rem;
    width: 96%;
    color: #808080;
}

.proHot_txt {
    display: block;
    font-size: .14rem;
    line-height: 3;
    color: #4c4c4c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caseMenuL {
    font-size: .14rem;
}

.newsCenter {
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    border-bottom: 1px solid #dededd;
}

.newsCenterb ul li {
    margin-top: .3rem;
}

.newsCenterb ul li:hover .newsCenter {
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    border-bottom: 1px solid #fff;
}

.newsCenterb ul li:hover a {
    color: #333;
}

.newsdetails {
    padding: 0 2%;
    overflow: hidden;
    padding-bottom: .2rem;
}

.newsdetails .casemImg {
    top: .5rem;
}

.newsdetails .caseCenter h3 {
    padding-top: 0;
}

.aboutTitle a {
    display: block;
    text-align: center;
    font-size: .16rem;
    padding-top: .1rem;
    color: #333;
}

.newsTop ul li a.newsImg {
    position: relative;
    padding: 34%;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;
}

.newsTop ul li a.newsImg img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
}

.newsText {
    font-size: .15rem;
    display: block;
    padding: .1rem 0;
}

.newsTopcenter {
    border: 1px solid #dededd;
    -webkit-transition: .8s;
    transition: .8s;
    margin-bottom: .2rem;
    border-radius: 6px 6px 0 0;
}

.newsTopcenter .newsText {
    padding: 0 .07rem;
    margin: .05rem 0;
    margin-bottom: .15rem;
    height: .46rem;
    -webkit-transition: .5s;
    transition: .5s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .15rem;
    -webkit-transition: 1s;
    transition: 1s;
}

.newsTop {
    margin-top: .3rem;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
}

.newsTopcenter span {
    margin: 0 .07rem .1rem;
    width: 96%;
    padding-right: 30%;
    display: block;
    background: url(../images/newslistmore.png) no-repeat 96% center;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: .15rem;
    color: #999;
}

.newsTop ul li:hover .newsTopcenter {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    background: #333;
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

.newsTop ul li:hover .newsText {
    color: #fff;
}

.newsTop ul li:hover .newsTopcenter span {
    color: #fff;
    background: url(../images/newslistmore2.png) no-repeat 96% center;
}

.newsTop ul li:hover a.newsImg {
    background: #fff;
}

.newsListCenter {
    margin-top: .3rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsListLImg {
    display: block;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
}

.newsListLImg::after {
    content: "";
    opacity: 0;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    border: 1px solid white;
    height: 2.68rem;
    width: 90%;
    position: absolute;
    top: 0.18rem;
    left: 5%;
    padding: 70px;
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0px;
    background-color: transparent;
}

.newsListLImg img {
    width: 100%;
}

.newsListLcenter img {}

.newsListLcenter:hover .newsListLImg::after {
    opacity: 1;
    content: "";
    transform: scale(1);
    background-color: transparent;
}

.newsListLtext {
    padding: 4.1% .2rem;
    -webkit-transition: .5s;
    transition: .5s;
    position: absolute;
    z-index: 3;
    bottom: 0;
    background: #fff;
    width: 100%;
}

.newsQa ul li:hover i span {
    animation: tan linear 2s infinite alternate;
}

.newsListLtext a {
    display: block;
    font-size: .16rem;
    line-height: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsListLcenter {
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: .05rem .05rem 0 0;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    height: 5rem;
    position: relative;
}

.newsListLtext p {
    color: #999;
    text-indent: 2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: .68rem;
    font-size: .15rem;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    line-height: 2;
}

.page-content {
    margin: .2rem 0;
    overflow: hidden;
    font-size: .16rem;
    line-height: 0.3rem;
    display: block;
    color: #666;
}

.productsText {
    font-size: .16rem;
    line-height: 2;
}

.newsListLcenter span {
    margin-top: .2rem;
    display: block;
    background: url(../images/news04.png) no-repeat center left;
    padding-left: .2rem;
    color: #999;
    font-size: .14rem;
}

.newsListLcenter:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

.newsListLcenter:hover .newsListLtext a {
    color: #333;
}

.newsListRtop {
    padding: .17rem;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    border-radius: .05rem;
    border-radius: 5px;
}

.newsListRtop span {
    font-size: .22rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: .2rem;
    float: left;
    padding-bottom: 0.5em;
    color: #4c4c4c;
    font-family: arial;
}

.newsListRtop b {
    font-size: .16rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: right;
    font-weight: normal;
    line-height: .2rem;
    padding-bottom: 0.5em;
    color: #4c4c4c;
    font-family: arial;
}

.newsListRtop b::after {
    content: "";
    display: block;
    clear: both;
}

.newsListRtop a.newsListRImg {
    display: none;
    position: relative;
    padding: 36%;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #f1f1f1;
}

.newsListRtopR {
    width: 100%;
    padding: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsListRtopL {
    padding: 0;
    width: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsListRtop a.newsListRImg img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
}

.newsListRtopR a {
    display: block;
    font-size: .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.newsListRtopR p {
    font-size: .14rem;
    color: #999;
    margin-top: 0.05rem;
    line-height: 1.5;
    height: .6rem;
    text-indent: 2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.newsListRtop:hover .newsListRtop a.newsListRImg {
    display: block;
    position: relative;
    padding: 30%;
}

.newsListRtop:hover span,
.newsListRtop:hover b {
    color: #333;
}

.newsListRtop:hover .newsListRImg {
    display: block;
}

.newsListRtop:hover .newsListRtopR {
    width: 75%;
    padding: 0 .1rem;
}

.newsListRtop:hover {
    background: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    border: 1px solid #fff;
}

.newsListRtop:hover .newsListRtopL {
    width: 25%;
}

.newsListRtop:hover .newsListRtopR a {
    color: #333;
}

.newsListR ul li {
    margin-bottom: .1rem;
}

.newsQa ul li {
    background: #fff;
    border: 1px solid #f2f2f2;
    padding: .3rem .1rem;
    border-radius: 0.05rem;
}

.newsQa ul li span {
    font-size: .13rem;
    background: #333;
    float: left;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: .2rem;
}

.newsQa ul li p {
    margin-top: .15rem;
}

.newsQa ul li b {
    margin: 0 .1rem;
    float: left;
    width: 85%;
    font-weight: normal;
    background: #fcfcfc;
    font-size: 0.15rem;
    padding: .03rem .1rem;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 2;
    padding-bottom: .08rem;
}

.newsQa ul li a {
    margin: 0 .1rem;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85%;
    font-weight: normal;
    background: #fcfcfc;
    padding: .05rem .1rem;
    font-size: .15rem;
    cursor: url(../images/curpo.png), default;
}

.newsQa ul li:hover a {
    color: #333
}

.newsQa ul li i::after {
    content: "";
    clear: both;
    display: block;
}

.newsQa ul li p span {
    background: #333;
}

.newsQa {
    overflow: hidden;
    padding-bottom: .5rem;
    margin-top: .3rem;
    cursor: url(../img/curpo.png), default;
}

.content-show {
    border: 18px solid #f4f4f4;
    padding: 22px;
    background-color: #fff;
    margin: .2rem 0;
}

.wjdh-map {
    position: relative;
}

.wjdh-map #r-result {
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 99;
}

.wjdh-map #wmap {
    width: 100%;
    height: 500px;
}

.driving-way {
    font-family: 'Microsoft JhengHei';
}

.driving-way .hd li.on {
    background-color: #333;
    color: #fff;
}

.driving-way .hd li {
    float: left;
    font-size: 15px;
    width: 50%;
    height: 50px;
    line-height: 50px;
    background-color: #eee;
    text-indent: 80px;
    cursor: pointer;
}

.driving-way .map-tab {
    padding: 20px 0;
}

.driving-way .map-tab .trip-mode a {
    position: relative;
    float: left;
    font-size: 16px;
    padding-left: 50px;
    width: 100px;
    height: 50px;
    line-height: 50px;
}

.driving-way .map-tab .trip-mode a.active {
    _background: url(../images/checkbox.png) no-repeat 10px center;
    *background: url(../images/checkbox.png) no-repeat 10px center;
}

.driving-way .map-tab ul {
    position: relative;
    width: 100%;
    height: 112px;
    _background: url(../images/ico5.png) no-repeat left center;
    *background: url(../images/ico5.png) no-repeat left center;
}

.driving-way .map-tab ul .d1 {
    top: 0;
    transition: .5s;
}

.driving-way .map-tab ul li {
    height: 35px;
    line-height: 35px;
    width: 70%;
    font-size: 16px;
    padding: 10px 0;
    margin-left: 80px;
    position: absolute;
    left: 0;
}

.driving-way .map-tab ul li input {
    font-size: 16px;
    width: 100%;
    height: 35px;
    line-height: 35px;
}

.driving-way .map-tab ul i {
    display: block;
    width: 75%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    left: 50px;
    top: 56px;
}

.driving-way .map-tab ul .d2 {
    top: 56px;
    transition: .5s;
}

.driving-way .map-tab ul .d2:before {
    position: absolute;
    left: -20px;
    top: 25px;
    content: '';
    display: block;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    border: 2px solid #12a7eb;
}

.driving-way .map-tab #result {
    background-color: #313131;
    color: #fff;
    width: 200px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -25px;
    display: block;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
}

.driving-way .map-tab ul .d2:before {
    position: absolute;
    left: -20px;
    top: 25px;
    content: '';
    display: block;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    border: 2px solid #12a7eb;
}

.driving-way .map-tab ul .d1:before {
    position: absolute;
    left: -20px;
    top: 30px;
    content: '';
    display: block;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    border: 2px solid #ed744e;
}

.driving-way .map-tab ul:before {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    content: '';
    display: block;
    width: 16px;
    height: 17px;
    background: url(../images/ico5.png) no-repeat center center;
    -webkit-transition: .5s;
    transition: .5s;
}

.driving-way .map-go ul:before {
    transform: rotateX(180deg);
}

.driving-way .map-tab .trip-mode a i:before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: #666;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
    opacity: 0;
}

.driving-way .map-tab .trip-mode a i {
    width: 14px;
    height: 14px;
    display: block;
    border: 3px solid #666;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -10px;
}

.driving-way .map-tab .trip-mode a:hover i,
.driving-way .map-tab .trip-mode a.active i {
    transform: translateZ(0px) rotate(45deg);
    -webkit-transform: translateZ(0px) rotate(45deg);
}

.driving-way .map-tab .trip-mode a i {
    width: 14px;
    height: 14px;
    display: block;
    border: 3px solid #666;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -10px;
    transition: 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition: 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.newsdetails .casemImg {
    top: .35rem;
    right: -.5rem;
}

.aboutTop:hover .aboutL img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.honorImg span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
}

.honorImg span::before {
    content: "";
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, .2) url(../images/sosuo.png) no-repeat center -.2rem;
    padding: 14px 18px;
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

.honor ul li:hover .honorImg span::before {
    width: 100%;
    left: 0;
    opacity: 1;
    background: rgba(0, 0, 0, .2) url(../images/sosuo.png) no-repeat center center;
}

.buildin-btn-text {
    position: absolute;
    left: 0;
    top: 0%;
    z-index: 9;
    width: 100%;
    transform: translateY(100%);
}

.honorMore::after,
.honorMore::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid transparent;
    bottom: 0;
    content: " ";
    display: block;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all 280ms ease-in-out;
    transition: all 280ms ease-in-out;
    width: 0;
}

.honor ul li:hover .honorMore::after,
.honor ul li:hover .honorMore::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-color: #ddd;
    -webkit-transition: width 350ms ease-in-out;
    transition: width 350ms ease-in-out;
    width: 90%;
    content: "";
}

.honorMore:hover::before {
    bottom: auto;
    top: 0;
    width: 90%;
}

.honor ul li:hover .honorMore {
    color: #333;
}

.contact ul li .contactBottom::before {
    content: "";
    width: 90%;
    height: 1px;
    border-top: 0;
    border-bottom: 1px solid #ddd;
    position: absolute;
    top: 99%;
    left: 5%;
    opacity: 1;
    -webkit-transition: .5s;
    transition: .5s;
}

.contact ul li:hover .contactBottom::after {
    content: "";
    bottom: 81px;
    right: -306px;
}

.contactTop span:after {
    content: ""
}

.contact ul li:hover .contactBottom::before {
    content: "";
    height: 101%;
    top: 0%;
    opacity: 1;
    border-top: 1px solid #ddd;
}

.contact ul li:hover .contactBottom {
    background: #fcfcfc;
}

.contactTop i {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
    margin: 0 auto;
    position: absolute;
    left: 43.5%;
    top: 1.8rem;
}

@keyframes newsd {
    0% {
        background: url(../images/newsico04.png) no-repeat 97% center;
    }

    50% {
        background: url(../images/newsico04.png) no-repeat 95% center;
    }

    100% {
        background: url(../images/newsico04.png) no-repeat 97% center;
    }
}

.newsCenterb ul li:hover .newsCenterbTextr {
    animation: newsd linear 1s infinite alternate;
}

.newsImg::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 102%;
    height: 103%;
    border: 2px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition: .8s;
    transition: .8s;
}

.newsTop ul li:hover .newsImg::before {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -135deg) scale3d(1, 1, 1);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
    z-index: 2;
}

@keyframes lr {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    25% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    50% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    75% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    100% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}

@keyframes tb {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    25% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    75% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    100% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

.promessageBox input.a-bth {
    text-indent: 0rem;
    color: #fff;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    margin-top: .2rem;
    display: block;
}

.promessageBox input.a-bth::after {
    width: 50%;
    left: 50%;
    background: #333;
    position: absolute;
    content: "";
}

.promessageBox input.a-bth::after:hover {
    width: 100%;
    height: 100%;
    background: #333;
    content: "";
}

.caseTitleR ul li a {
    position: relative;
}

.caseTitleR ul li .ctc {
    display: block;
    width: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all .8s ease-out;
    transition: all .8s ease-out;
    opacity: 0;
    font-size: 0.15rem;
}

.caseTitleR ul li:hover .ctc {
    width: 100%;
    color: #333;
    opacity: 1;
}

.caseTitleR ul li .gaoliang .ctc {
    width: 100%;
    color: #333;
    opacity: 1;
}

.news_classify ul li .gaoliang i {
    left: .18rem;
}

.news_classify ul li .gaoliang span {
    color: #fff;
    background: url(../images/newsico3.png) no-repeat 90% center;
}

.news_classify ul li .gaoliang b {
    left: 0;
}

.caseTitleR ul li span::before {
    width: .1rem;
    height: .1rem;
    border: 2px solid #333;
    content: "";
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    line-height: .2rem;
    vertical-align: revert;
    border-color: #333;
}

.caseTitleR ul li a {
    position: relative;
}

.caseTitleR ul li .ctc {
    display: block;
    width: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all .8s ease-out;
    transition: all .8s ease-out;
    opacity: 0;
}

.caseTitleR ul li:hover .ctc {
    width: 100%;
    color: #333;
    opacity: 1;
}

.caseTitleR ul li span::before {
    width: .1rem;
    height: .1rem;
    border: 2px solid #333;
    content: "";
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    line-height: .2rem;
    vertical-align: unset;
    border-color: #333;
}

.proListclass2 {
    width: 82%;
    color: #fff;
    display: inline-block;
    font-size: .16rem;
    margin-left: .05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.caseLdd {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 .03rem .03rem;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 5px;
    border-radius: 5px 5px 0 0;
}

.caseLdd:hover .caseText {
    border-radius: 0 0 .03rem .03rem;
}

.caseLdd:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

.caseLdd .button_text_container {
    width: 0%;
    height: 0%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0258b8;
    z-index: -1;
    -webkit-transition: 1.2s;
    transition: 1.2s;
    border-radius: 50%;
}

.caseLdd:hover .button_text_container {
    top: 0;
    left: -25%;
    width: 150%;
    height: 150%;
    background: #333;
}

.proListclass1 b {
    display: inline-block;
    width: 15%;
    background: url(../images/proico1.png) no-repeat center;
    overflow: hidden;
    cursor: pointer;
    padding: .1rem 0;
    vertical-align: bottom;
    transition: all .4s;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    position: relative;
    z-index: 2;
}

.proListclass1 i {
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: .03rem;
    background: #fff;
    z-index: 3
}

.proListclass1 b.active {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.proListclass2:hover {
    color: #fff !important;
}

.bdsharebuttonbox {
    zoom: 1;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
}

.button_text_container {
    position: absolute;
    top: 0;
    left: 0;
}

.detailsR {
    width: 35%;
    margin-top: .04rem;
}

.productsCC {
    overflow: hidden;
    border-bottom: 1px solid #ededed;
    padding-left: -15px;
    padding-right: -15px;
}

.scan {
    color: #666;
    background-image: url(../images/ewm.gif);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0px 0 3px 30px;
    position: relative;
    display: inline-block;
}

#qrcode {
    margin-top: 10px;
    position: absolute;
    right: 8px;
    top: .3rem;
}

.newsdetails #qrcode {
    position: absolute;
    right: -50px;
    top: 40px;
    z-index: 3
}

#qrcode img {
    width: 200px;
    height: 200px;
    border: 8px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    position: relative;
    z-index: 9999999;
}

.map-marker dt {
    float: left;
}

.map-marker dd {
    height: 100px;
    overflow: hidden;
    margin-left: 110px;
}

.map-marker h4 {
    height: 30px;
    font-size: 18px;
    padding-bottom: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0;
    margin-top: 0;
    line-height: 30px;
}

.map-marker {
    height: 100px;
}

.map-marker dd span {
    font-size: 18px;
}

.map-marker p {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}

.bdshare-button-style1-16 span {
    float: left;
    margin-top: .02rem;
    color: #666;
}

.addLine {
    display: block;
    font-size: .15rem;
    padding-bottom: .2rem;
    background: url(../images/aboutidd.png) no-repeat center bottom;
    margin-bottom: .2rem;
}

.contactMap {
    background: url(../images/aboutbottomhover.jpg) no-repeat center bottom;
    overflow: hidden;
    padding-bottom: .10rem;
    margin-bottom: -10px;
}

.productRtopl {
    padding: 0;
}

.productRtopr {
    padding: 0;
    border: 1px solid #ededed;
    border-left: 0;
    padding: 0 3% .1rem;
    height: 417px;
}

.pc-slide .view {
    height: 417px;
}

.relevant {
    overflow: hidden;
    max-height: 0.66rem;
    margin-bottom: 0.2rem;
}

.caseRe img {
    display: inline-block;
}

.caseREimg {
    width: .32rem;
    height: .25rem;
    overflow: hidden;
    display: inline-block;
    float: none;
    margin-top: 6px;
    vertical-align: sub;
}

.caseContainer {
    font-size: 0.16rem;
    line-height: 0.3rem;
    color: #666;
}

.caseContainer p,
.caseContainer span,
.productsText p,
.productsText span {
    font-size: 0.16rem;
    line-height: 0.3rem;
}

.productsCC img {
    display: inline-block;
}

.proListclass1:before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    -webkit-transition: .5s;
    z-index: 1;
}

.dd:before {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    -webkit-transition: .5s;
    z-index: 1;
}

.sidepromenu:hover .proListclass1:before {
    top: 0;
}

.JourTop {
    margin-top: 0.36rem;
}

.JourTopLineL {
    height: 0.1rem;
    border: 1px solid #dadada;
    border-left: 0;
    border-right: 0;
    margin-top: 0.07rem;
    float: left;
    width: 40%;
}

.JourTopLineR {
    height: 0.1rem;
    border: 1px solid #dadada;
    border-left: 0;
    border-right: 0;
    margin-top: 0.07rem;
    float: left;
    width: 40%;
}

.JourTopLineText {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    float: left;
    width: 20%;
}

.JourTopLineText span {
    font-size: 0.18rem;
    color: #797979;
    letter-spacing: 2px;
}

.JourTopLineText h4 {
    font-size: 0.26rem;
    font-weight: bold;
    margin-top: 0.04rem;
}

.JourTopLineText a {
    width: 0.38rem;
    height: 0.17rem;
    display: block;
    margin: 0.12rem auto 0;
}

.JourTopLineText a img {
    display: block;
}

.JourTopCenter ul li {
    height: 1.1rem;
    width: 100%;
    border-bottom: 1px solid #dadada;
}

.JourTopCenterL {
    margin-top: 0.05rem;
}

.JourTopCenterLimg {
    padding-left: 0;
    margin: 0;
    padding-right: 0;
    width: 48.66%;
}

.JourTopCenterLimg a {
    display: block;
    height: 1rem;
    width: 100%;
}

.JourTopCenter {
    margin-top: 0.26rem;
}

.JourTopCenterLimg a img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.JourTopCenterLTime {
    border-right: 1px solid #dadada;
    height: 0.9rem;
    margin-top: 0.05rem;
}

.JourTopCenterLTime h4 {
    font-size: 0.4rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    color: #d6d6d6;
    margin-top: 0.1rem;
    line-height: 0.4rem;
}

.JourTopCenterLTime span {
    text-align: center;
    display: block;
    color: #d6d6d6;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.22rem;
}

.JourTopCenterR {
    margin-top: 0.05rem;
}

.JourTopCenterRL {
    padding-left: 6px;
    width: 89%;
    float: left;
}

.JourTopCenterRL a {
    display: block;
    font-size: 0.16rem;
    color: #363636;
    padding-top: 0.18rem;
    line-height: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.JourTopCenterRL P {
    font-size: 0.14rem;
    line-height: 0.22rem;
    height: 0.44rem;
    margin-top: 0.12rem;
    color: #c2c2c2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.JourTopCenterRR {
    float: right;
    width: 10%;
    height: 100px;
    background: url(../images/jourtopcentermore.png) no-repeat 70% center;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourTopCenter ul li {
    -webkit-transition: .5s;
    transition: .5s;
    height: 1.1rem;
}

.JourTopCenter ul li:hover {
    background-color: #fff;
    height: 1.1rem;
    border-bottom: 1px solid #dadada;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.2);
}

.JourTopCenter ul li.JourTopCenterActive {
    background-color: #fff;
    height: 1.1rem;
    border-bottom: 1px solid #dadada;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.2);
}

.JourTopCenter ul li:nth-child(1) {
    border-top: 1px solid #dadada;
}

.JourTopCenter ul li:hover .JourTopCenterRR {
    background: url(../images/jourtopcentermore.png) no-repeat 85% center;
}

.JourCenter {
    margin-top: 0.5rem;

    padding-bottom: 1rem;
}

.JourCenterTitle h3 {
    float: left;
    padding-left: 0.4rem;
    font-size: 0.26rem;
    color: #363636;
    font-weight: bold;
    position: relative;
}

.JourCenterTitle {
    display: block;
    padding-bottom: 0.1rem;
    border-bottom: 4px solid #b1b1b1;
    line-height: 36px;
}

.JourCenterTitle h3::before {
    content: "";
    width: 0.04rem;
    height: 0.35rem;
    background: #0f4c81;
    position: absolute;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
    left: 0.08rem;
}

.JourCenterTitle h3::after {
    content: "";
    width: 0.04rem;
    height: 0.35rem;
    background: #0f4c81;
    position: absolute;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
    left: 0.2rem;
    opacity: 0.2;
}

.JourCenterTitle a {
    float: right;
    margin-top: 0.1rem;
}

.JourCenterN a.JourCenterNImg {
    display: block;
    position: relative;
    display: block;
    background: #f1f1f1;
    height: 1.55rem;
}

.JourCenterN a.JourCenterNImg img {
    width: 100%;
    height: 100%;
}

.JourCenterN h4 a {
    font-size: 15px;
    font-weight: bold;
}

.JourCenterText {
    padding: 0.1rem 0.15rem;
}

.JourCenterNCenter {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #f6f6f6;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourCenterText h4 {
    width: 100%;
}

.JourCenterText h4 a {
    display: block;
    width: 100%;
    line-height: 0.22rem;
    height: 0.44rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #373636;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourCenterText p {
    font-size: 0.14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #929292;
    padding: 0.06rem 0;
}

.JourCenterTimeBox i {
    padding-left: 0.16rem;
    background: url(../images/jourcentertime.png) no-repeat center left;
    font-size: 0.12rem;
    color: #c0c0c0;
    float: left;
}

.JourCenterTimeBox a {
    padding-left: 0.16rem;
    background: url(../images/jourcentermore.png) no-repeat center left;
    font-size: 0.12rem;
    color: #c0c0c0;
    float: right;
}

.JourCenterTimeBox {
    padding: 0.rem 0;
}

.JourCenterN ul li {
    margin-top: 0.2rem;
}

.JourCenterN ul li .JourCenterNCenter:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
    background-color: #f6f6f6;
}

.JourCenterN ul li .JourCenterNCenter:hover .JourCenterText h4 a {
    color: #0f4c81;
}

.JourCenterL {
    width: 65%;
    float: left;
}

.JourCenterR {
    width: 31%;
    float: right;
}

/* curHover */
/* curEnd */
.JourCenterR ul li {
    width: 100%;
    padding-left: 5%;
    border-left: 2px solid #e4e4e4;
    margin-left: 2%;
    position: relative;
    padding-right: 0.07rem;
    padding-bottom: 0.3rem;
}

.JourCenterR ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: 0%;
    border-left: 2px solid #0f4c81;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourCenterR ul li:hover::after {
    width: 2px;
    height: 100%;
}

.JourCenterR ul li:hover span a {
    color: #0f4c81;
}

.JourCenterRCenter {
    position: relative;
}

#lanPos {
    width: 100%;
    padding-left: 5%;
    border-left: 2px solid #0f4c81;
    margin-left: 2%;
    position: absolute;
    padding-right: 0.07rem;
    padding-top: 0.1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourCenterR ul li span i {
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50%;
    border: 1px solid #0f4c81;
    margin: 0 auto;
    left: -0.08rem;
    top: 0rem;
    position: absolute;
}

.JourCenterR ul li span i::before {
    width: 0.08rem;
    display: block;
    height: 0.08rem;
    border-radius: 50%;
    border: 1px solid #0f4c81;
    position: absolute;
    content: "";
    left: 0.01rem;
    top: 0.01rem;
}

.JourCenterR ul li:nth-child(1) span i {
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50%;
    border: 1px solid #0f4c81;
    margin: 0 auto;
    left: -0.08rem;
    top: 0.1rem;
    position: absolute;
}

.JourCenterR ul li:nth-child(1) span i::before {
    width: 0.08rem;
    display: block;
    height: 0.08rem;
    border-radius: 50%;
    border: 1px solid #0f4c81;
    position: absolute;
    content: "";
    left: 0.01rem;
    top: 0.01rem;
}

.JourCenterR ul li:nth-child(4) {
    padding-bottom: 0;
}

.JourCenterR ul li span a {
    font-size: 0.15rem;
    display: block;
    line-height: 0.15rem;
    height: 0.15rem;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.JourCenterR ul li p {
    padding: 0.08rem 0.22rem;
    background: #fcfcfc;
    font-size: 0.13rem;
    color: #9e9e9e;
    line-height: 0.22rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 0.15rem;
    border-radius: 6px;
}

.JourCenterR ul li p i {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 0.22rem;
    height: 0.44rem;
    display: -webkit-box;
}

.JourCenterR ul li b {
    padding-left: 0.16rem;
    background: url(../images/jourcentertime.png) no-repeat 0 0.04rem;
    font-size: 0.12rem;
    margin: 0.09rem 0 0;
    display: block;
    font-weight: normal;
    color: #c0c0c0;
}

.JourCenterR ul {
    margin-top: 0.2rem;
    width: 100%;
}

.JourCenterR ul li:nth-child(1) {
    padding-bottom: 0.21rem;
    padding-top: 10px;
}

.JourBottom {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.JourBottomCenterBox {
    margin-top: 0.26rem;
    padding: 0 15px;
}

.JourBottomCenterBox ul li {
    padding: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    margin: 0.2rem 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.JourBottomCenterBox ul li:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

.JourBottomCenterBoxTitle i {
    font-size: .13rem;
    background: #333;
    float: left;
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: .25rem;
}

.JourBottomCenterBoxTitle a {
    width: 82%;
    float: right;
    margin: 0 .1rem;
    background: #fcfcfc;
    padding: .05rem .1rem;
    font-size: .15rem;
    border-radius: 5px;
    position: relative;
}

.JourBottomCenterBoxTitle a b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    display: block;
}

.JourBottomCenterBoxTitle a::after {
    content: "";
    border-left: 13px solid transparent;
    width: 2px;
    height: 0;
    border-top: 13px solid #fcfcfc;
    left: -1%;
    position: absolute;
    top: 3px;
    transform: rotate(-133deg);
}

.JourBottomCenterBoxText {
    margin-top: 0.15rem;
}

.JourBottomCenterBoxText i {
    font-size: .13rem;
    background: #0f4c81;
    float: left;
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: .25rem;
}

.JourBottomCenterBoxText p {
    margin: 0 .1rem;
    float: right;
    width: 84%;
    font-weight: normal;
    background: #fcfcfc;
    font-size: 0.14rem;
    padding: .03rem .1rem;
    color: #999;
    position: relative;
    padding-bottom: .08rem;
    border-radius: 5px;
}

.JourBottomCenterBoxText p b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 2;
    font-weight: normal;
}

.JourBottomCenterBoxText p::after {
    content: "";
    border-left: 13px solid transparent;
    width: 2px;
    height: 0;
    border-top: 13px solid #fcfcfc;
    left: -1%;
    position: absolute;
    top: 3px;
    transform: rotate(-133deg);
}

.JourBottomCenterBox ul li:hover .JourBottomCenterBoxTitle i {
    animation: tan linear 2s infinite alternate;
}




.page_message {
    background: rgb(240, 240, 240);
    padding-bottom: 1.2rem;
    padding-top: 0.8rem;
    overflow: hidden;
}

.page_message h4 {
    font-size: 0.4rem;
    text-align: center;
    padding-bottom: 0.4rem;
}

.page_messageCenter {
    background: #fff;
    padding: 4vw;
    box-sizing: border-box;
    border-radius: 3px;
}

.page_messageCenter h5 {
    text-align: center;
    font-size: 0.3rem;
}

.page_messageCenter ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.3rem;
}

.page_messageCenter ul li.page_message_row2 {
    width: 49%;
    margin-top: 0.3rem;
    position: relative;
}

.page_messageCenter ul li.page_message_row2 input {
    border: 1px solid rgb(234, 234, 234);
    width: 100%;
    height: 0.5rem;
    font-size: 0.16rem;
    padding: 0 0.15rem;
}

.page_messageCenter ul li.page_message_row1 {
    width: 100%;
    margin-top: 0.3rem;
}

.page_messageCenter ul li.page_message_row1 textarea {
    border: 1px solid rgb(234, 234, 234);
    width: 100%;
    height: 1.5rem;
    font-size: 0.16rem;
    padding: 0.15rem 0.15rem;
    display: block;
}

.page_messageCenter ul li.page_message_row2 button {
    border: 1px solid rgb(234, 234, 234);
    background: rgb(234, 234, 234);
    width: 100%;
    height: 0.5rem;
    font-size: 0.16rem;
    padding: 0 0.15rem;
    outline: none;
}

.page_messageCenter ul li.page_message_row2 #page_messageNameImgCode {
    position: absolute;
    top: 0.04rem;
    right: 0.04rem;
    background: #333;
    width: 1rem;
    height: 0.42rem;
    z-index: 9;
    cursor: pointer;
}



@media (max-width:1300px) {
    .caseMenu {
        width: 100%;
        height: auto;
        background: none;
        padding-bottom: .1rem;
    }

    .caseMenuTop {
        display: none;
    }

    .caseMenuBottom {
        padding-top: 0rem;
    }

    .caseMenuBottom .caseTitleL {
        padding-top: .12rem;
        padding-bottom: .12rem;
        text-align: center;
        font-size: .2rem;
        background: #f4f5f8;
    }

    .caseMenuBottom .caseTitleL i {
        padding-right: .05rem;
    }

    .caseMenuBottom .caseTitleR ul {
        padding-top: .3rem;
    }

    .caseMenuBottom .caseTitleR ul li {
        margin-top: .1rem;
        padding: .04rem .08rem;
    }

    .caseTab ul li span {
        width: 1.6rem;
        font-size: .15rem;
    }

    .proListTop img {
        display: none;
    }

    .proList {
        padding-top: .2rem;
    }

    .prouctsTitle h3 {
        color: #333;
    }

    .prouctsTitle p {
        color: #666;
    }

    .proList_classify ul li p {
        display: none;
    }

    .proHot,
    .newsHot {
        display: none;
    }

    .proListRtop {
        display: none;
    }

    .proListRsort {
        display: none;
    }

    .productsBorer {
        padding: .05rem;
    }

    .proListCenter ul {
        margin-right: -15px;
        margin-left: -15px;
    }

    .proListclass1 {
        background: #f1f1f1;
        border-bottom: 1px solid #fff;
    }

    .proListclass1 b {
        display: none;
    }

    .proListclass1 a {
        color: #333;
        width: 100%;
        display: block;
        text-align: center;
        font-weight: normal;
    }

    .proListclass2:hover {
        color: #333;
    }

    .proList_classify ul li i {
        display: none;
    }

    .proListclass1 span {
        width: 100%;
        font-size: 1.4rem;
        font-weight: normal;
        color: #333;
    }

    .proListCenter ul li:hover .productsBorer {
        border: 1px solid #dededd;
    }

    .proListCenter ul li:hover .caseListhide {
        top: -100%;
    }

    .proListCenter li {
        margin-top: .1rem;
        margin-bottom: .1rem;
    }

    .proListCenter ul li:hover a.proListTitle {
        color: #333;
        border-bottom: 1px solid #dededd;
    }

    .proListCenter ul li:hover a.proMore {
        color: #999;
    }

    .proListclass1 a {
        color: #fff;
    }
}

@media (max-width:992px) {
    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-2 {
        width: 16.6666666%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-5 {
        width: 41.66666666%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-8 {
        width: 66.66666666%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-11 {
        width: 91.666666666;
    }

    .col-md-12 {
        width: 100%;
    }

    .caseMenuTop {
        display: none;
    }

    .caseMenuBottom .caseTitleR ul {
        padding-top: .1rem;
    }

    .caseMenuBottom .caseTitleR ul li {
        padding-right: .05rem;
    }

    .caseTab ul li b {
        display: none;
    }

    .caseRel i {
        display: block;
        text-align: center;
        font-size: .2rem;
    }

    .proListclass1 a {
        color: #fff;
    }
}

@media (max-width:768px) {
    .proListclass1 a {
        color: #fff;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-2 {
        width: 16.6666666%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-5 {
        width: 41.66666666%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-8 {
        width: 66.66666666%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-11 {
        width: 91.666666666;
    }

    .col-sm-12 {
        width: 100%;
    }

    .caseMenuBottom .caseTitleR ul {
        padding-top: .1rem;
    }

    .caseMenuBottom .caseTitleR ul li {
        padding: .05rem 0.2rem;
    }

    .caseRer {
        display: none;
    }

    .caseList {
        padding-top: .2rem;
    }

    .caseTitleR ul li:hover {
        box-shadow: 0 0 0;
    }

    .caseList li:hover .caseText {
        background: #fff;
    }

    .caseList li .caseListTitle {
        font-size: .14rem;
        font-weight: normal;
    }

    .caseList li:hover .caseListTitle {
        font-weight: bold;
        font-weight: normal;
    }

    .caseList li {
        margin-bottom: .2rem;
    }

    .caseList li:hover .caseListTitle {
        color: #333;
    }

    .caseList li p {
        font-size: 1.2rem;
        line-height: 1.5rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        height: .6rem;
        font-size: .15rem;
        padding: 0 .05rem;
    }

    .caseText {
        padding-top: 0;
        padding-bottom: .05rem;
    }

    .caseList li .caseMore {
        display: none;
    }

    .caseLine {
        display: none;
    }

    .caseList li:hover p {
        color: #666;
    }

    .caseList li:hover .caseListhide {
        top: -102%;
    }

    .caseContainer {
        padding-bottom: .4rem;
    }

    .caseTab ul li img {
        display: none;
    }

    .caseTab ul li span {
        display: none;
    }

    .caseTab ul li i {
        display: block;
        margin: 0 auto;
    }

    .caseTab ul li i.caseCenterIco2 {
        display: block;
        float: right;
        padding: .25rem;
        background: url(../images/casecenterico2.png) no-repeat center;
    }

    .caseTab ul li {
        padding: 0 .2rem;
        background: #ededed;
    }

    .caseTab {
        margin-top: .2rem;
    }

    .caseCenter h3 {
        font-size: .24rem;
        line-height: .13rem;
    }

    .caseRecenter li .caseMore {
        display: none;
    }

    .caseRecenter li p {
        font-size: .14rem;
        line-height: .2rem;
        padding: 0 .1rem;
        line-height: .2rem;
        height: .8rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        color: #666;
    }

    .caseRecenter .caseText {
        background: #f2f2f2;
        padding-bottom: 1rem;
    }

    .caseRe i {
        display: block;
        text-align: center;
        font-size: .24rem;
    }

    .proListTop img {
        display: none;
    }

    .proList {
        padding-top: .2rem;
    }

    .prouctsTitle h3 {
        color: #333;
    }

    .prouctsTitle p {
        color: #666;
    }

    .proList_classify ul li p {
        display: none;
    }

    .proHot,
    .newsHot {
        display: none;
    }

    .proListRtop {
        display: none;
    }

    .proListRsort {
        display: none;
    }

    .productsBorer {
        padding: .05rem;
    }

    .proListCenter ul {
        margin-right: -15px;
        margin-left: -15px;
    }

    .proListclass1 {
        background: #f1f1f1;
    }

    .proList_classify ul li i {
        display: none;
    }

    .proListclass1 span {
        width: 100%;
        font-size: .14rem;
        font-weight: normal;
        color: #333;
    }

    .proListCenter ul li:hover .productsBorer {
        border: 1px solid #dededd;
    }

    .proListCenter ul li:hover .caseListhide {
        top: -100%;
    }

    .proListCenter li {
        margin-top: 0;
        margin-bottom: .1rem;
    }

    .proListCenter ul li:hover a.proListTitle {
        color: #333;
        border-bottom: 1px solid #dededd;
    }

    .proListCenter ul li:hover a.proMore {
        color: #999;
    }

    .pro_page {
        margin: 0;
        text-align: center;
    }

    .proList_sort ul li:hover .proHot_txt {
        color: #333;
    }

    .proList_classify {
        margin-left: 15px;
        margin-right: 15px;
    }

    .exzoom .exzoom_zoom_outer {
        display: none
    }

    .productRtopr h4 {
        display: none;
    }

    .productRtopr p {
        display: none;
    }

    .productRtopr h5 {
        display: none;
    }

    .relevant {
        display: none;
    }

    .relevantImg {
        display: none;
    }

    .details {
        display: none;
    }

    .detailsR {
        display: none;
    }

    .promessageBox input {
        margin-top: .1rem;
    }

    .textarea {
        min-height: .8rem;
    }

    .show {
        height: 1.4rem;
    }

    .show img {
        height: 1.4rem;
    }

    .smallshow>.middle_box {
        width: 78%;
    }

    .productRtopl {
        padding-left: -15px;
        padding-right: -15px;
    }

    .smallshow .middle>li {
        padding: 0 1%;
    }

    .bg_right {
        display: none;
    }

    .mask {
        display: none;
    }

    .smallshow .middle {
        overflow: hidden;
        transition: all 0.5s;
        height: .4rem;
    }

    .smallshow .middle>li {
        width: 21%;
    }

    .prolistImgd {
        padding: 0px;
        margin-bottom: .1rem;
    }

    .productsLil i {
        display: none;
    }

    .productsLil {
        margin-top: .1rem;
        margin-bottom: .1rem;
    }

    .productsLir i {
        margin-bottom: 0;
    }

    .productsLir {
        padding: 0;
    }

    .productss .proListRsort {
        border-bottom: 1px solid #dededd;
        box-shadow: 0 0 0;
        margin-bottom: 0rem;
    }

    .aboutTop {
        background: none;
    }

    .aboutL {
        padding-right: 0;
        padding-bottom: 0;
    }

    .aboutR h4 {
        font-size: .18rem;
    }

    .aboutR {
        padding-top: .1rem;
        color: #333;
    }

    .aboutR h4 {
        color: #333;
        text-align: center;
    }

    .aboutR span {
        display: block;
        color: #333;
        text-align: center;
        color: #999;
    }

    .aboutR p {
        color: #333;
        height: auto;
    }

    .aboutLine {
        margin: .4rem auto;
        background: #666;
    }

    .aboutTitle h3 {
        margin-top: .2rem;
        font-size: .2rem;
    }

    .aboutTitle span {
        padding-top: 0;
    }

    .honor ul li {
        margin-top: .1rem;
    }

    .contact ul li:hover .contactBottom {
        background: none;
    }

    .contact ul li:hover .contactTop {
        background: none;
    }

    .contact ul li:hover h4.contactmeg {
        background: url(../images/contactico1.png) no-repeat center .1rem;
    }

    .contact ul li:hover h4.contactNetwork {
        background: url(../images/contactico2.png) no-repeat center .1rem;
    }

    .contact ul li:hover h4.contactService {
        background: url(../images/contactico3.png) no-repeat center .1rem;
    }

    .contact ul li:hover .contactTop h4 {
        color: #333;
    }

    .contact ul li:hover .contactTop span {
        color: #666;
    }

    .contactBottom {
        padding: 0.1rem 0;
    }

    .contact ul li:first-child .contactBottom {
        padding: 0.1rem 0 .8rem;
    }

    .contact ul li {
        margin-top: .2rem;
    }

    .contactTop {
        padding: .1rem 0;
    }

    .contact {
        padding-bottom: .2rem;
    }

    .contactBox ul li {
        padding: 0 3%;
        margin: .2rem 0;
        height: auto;
    }

    .contactList ul li h4 {
        line-height: 2;
    }

    .contactBox {
        margin-top: 0;
    }

    .aboutTitle p {
        padding: .2rem 5%;
        text-align: left;
        text-indent: .2em;
    }

    .news_classify {
        padding-left: 15px;
        padding-right: 15px;
    }

    .news_classify ul li a {
        background: #f2f2f2;
    }

    .news_classify ul li b {
        display: none;
    }

    .news_classify ul li i {
        display: none;
    }

    .newsCenterTop {
        padding: .1rem;
        margin-top: .2rem;
        border-radius: .5px;
    }

    .newsCenterT,
    .newsCenterTopl,
    .newsCenterTopr {
        padding-left: 0;
        padding-right: 0;
    }

    .nwesCenterbText span {
        display: none;
    }

    .newsCenterbTextr {
        width: 100%;
        padding: 0 8% 1%;
    }

    .honorMore1 {
        margin-bottom: 0.2rem;
    }

    .bdshare-button-style1-16 {
        display: none;
    }

    .newsCenterb ul li {
        padding-left: 0;
        padding-right: 0;
        box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    }

    .news_classify ul li:hover span {
        color: #333;
        background: url(../images/newsico1.png) no-repeat 90% center;
    }

    .newsCenterb ul li:hover a {
        color: #333;
    }

    .newsTop ul li:hover .newsTopcenter {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: #fff;
        box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    }

    .newsTop ul li:hover .newsText {
        color: #333;
    }

    .newsTop ul li:hover .newsTopcenter span {
        color: #333;
        background: url(../images/newslistmore.png) no-repeat 96% center;
    }

    .newsTopcenter span {
        margin-top: .05rem;
        color: #999;
    }

    .newsTopcenter .newsText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .newsListRtop:hover .newsListRtopL {
        display: none;
        width: 0;
    }

    .newsListRtop:hover .newsListRtopR {
        width: 100%;
    }

    .newsQa {
        margin-top: .3rem;
    }

    .newsQa ul li a {
        width: 83%;
    }

    .newsQa ul li b {
        width: 83%;
    }

    .newsQa ul li:hover {
        color: #333;
    }

    .newsListRtop:hover {
        box-shadow: 0 0 0 rgb(255, 255, 255);
        border-bottom: 1px solid #f2f2f2;
    }

    .newsListLcenter:hover {
        box-shadow: 0 0 0 rgba(255, 255, 255, 1)
    }

    .newsListRtop:hover .newsListRtopR {
        padding: 0;
    }

    .newsListRtop:hover .newsListRtopR a {
        color: #333;
    }

    .productTopImg {
        padding: 0;
    }

    .pc-slide {
        margin: .2rem 0 0rem;
    }

    .driving-way .hd {
        display: none;
    }

    .driving-way .map-tab #result {
        top: 130%;
        width: 100%;
    }

    .content-show {
        overflow: hidden;
        padding-bottom: .4rem;
    }

    .wjdh-map #wmap {
        height: 5rem;
    }

    .caseRecommend {
        padding-bottom: .5rem;
    }

    .caseRecenter li:hover .caseListhide {
        display: none;
    }

    .caseRecenter li:hover .caseText {
        background: #f2f2f2;
    }

    .caseRecenter li:hover .caseListTitle {
        color: #333;
        font-weight: bold;
    }

    .caseRecenter li:hover p {
        color: #666;
    }

    .prolistImgd:hover .proMored {
        position: absolute;
        top: 84%;
        width: 100%;
        height: 0%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, .4) url(../images/productslist3.png) no-repeat 90% .8rem;
        color: #fff;
        line-height: 1.4rem;
        -webkit-transition: .5s;
        transition: .5s;
        padding: 3% 5%;
        text-align: left;
    }

    .aboutR p {
        height: auto
    }

    .aboutR p:hoveR {
        height: auto;
    }

    .newsdetails {
        margin-left: 0;
        margin-right: 0;
    }

    .productsCenter {
        padding-left: -15px;
        padding-right: -15px;
    }

    .productRtop .productRtopl {
        padding-left: -15px;
        padding-right: -15px;
    }

    .pro-textarea {
        text-indent: .25rem;
        line-height: 2.4;
    }

    .productsTTOP:hover .casemImg {
        display: none;
    }

    .caseTitleR ul li:hover a {
        color: #333;
    }

    .honor ul li:hover .honorImg span::before {
        opacity: 0;
    }

    .honor ul li:hover .honorMore {
        color: #333;
    }

    .contact ul li:hover .contactBottom::before,
    .contact ul li:hover .contactBottom::after {
        opacity: 0;
        content: "";
    }

    .contact ul li:hover {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    .caseList li:hover .caseListhide {
        display: none;
    }

    .newsCenterb ul li:hover .newsCenterbImg::before,
    .newsCenterb ul li:hover .newsCenterbImg::after {
        opacity: 0;
        content: "";
    }

    .newsCenterb ul li .newsCenterbImg i {
        opacity: 0;
    }

    .newsCenterb ul li:hover .newsCenterbImg i {
        opacity: 0;
    }

    .newsTopcenter .newsText {
        height: .2em;
        display: block;
    }

    .proListCenter li .productsBorer:hover .border-left {
        opacity: 0;
    }

    .proListCenter li .productsBorer:hover .border-right {
        opacity: 0;
    }

    .proListCenter li .productsBorer:hover .border-top {
        opacity: 0;
    }

    .proListCenter li .productsBorer:hover .border-bottom {
        opacity: 0;
    }

    .productsBorer:hover i a::before,
    .productsBorer:hover i a::after {
        display: none;
    }

    .newsCenterTop:hover a img {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    .newsCenterTopr h4 a {
        font-size: .16rem;
    }

    .newsCenterTop:hover h4 a {
        color: #333;
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    .newsCenterb ul li:hover .newsCenterbTextr a {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    .newsCenterb ul li .newsCenterbTextr {
        animation: newsd linear 3s infinite alternate;
    }

    .newsTop ul li:hover .newsImg::before {
        opacity: 0;
    }

    .prolistImgd:hover .proMored {
        height: 20%;
    }

    .productsCtl img {
        margin-left: .05rem;
    }

    .sidepromenu {
        padding-left: 2px;
        padding-right: 2px;
    }

    .JourTopLineL,
    .JourTopLineR {
        display: none;
    }

    .JourTopLineText {
        width: 100%;
    }

    .JourTopCenterL {
        display: none;
    }

    .JourCenterL {
        width: 100%;
    }

    .JourCenterR {
        width: 100%;
        margin-top: 0.5rem;
    }

    .JourTopLineText h4,
    .JourCenterTitle h3 {
        font-size: 0.2rem;
    }

    .JourBottom {
        margin-bottom: 0.5rem;
    }

    .JourCenterTitle h3::before,
    .JourCenterTitle h3::after {
        display: none;
    }

    .JourCenterTitle h3 {
        padding-left: 0;
    }

    .JourCenterTimeBox i {
        display: none;
    }

    .JourCenterText h4 a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        font-weight: normal;
        height: 0.22rem;
    }

    .JourCenterText {
        padding: 0.1rem;
    }

    .JourCenterText p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: inherit;
        white-space: initial;
        height: 0.66rem;
        margin-bottom: 0.1rem;
    }
}

.caseMenu {
    width: 100%;
    height: 150px;
    background: url(../images/casemenu.jpg) no-repeat center;
    color: #999;
}

.honorImg1 {
    display: block;
    position: relative;
    padding: 40%;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .1);
}

.honorMore1 {
    text-align: center;
    display: block;
    padding-top: .08rem;
    line-height: 3;
    font-size: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.honorImg1 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.productsText p span {
    font-size: .15rem;
}

.page-content span {
    font-size: .15rem;
}

.honorImg1 img {
    width: 100%;
    height: 100%;
    padding: 0%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    object-fit: contain;
}

.honorBox ul li:hover .honorImg1 span::before {
    width: 100%;
    left: 0;
    opacity: 1;
    background: rgba(0, 0, 0, .2) url(../images/sosuo.png) no-repeat center center;
}

.honorImg1 span::before {
    content: "";
    box-sizing: border-box;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, .2) url(../images/sosuo.png) no-repeat center -2rem;
    padding: 14px 18px;
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

.honorMore1 {
    text-align: center;
    display: block;
    padding-top: 0.08rem;
    line-height: 3;
    font-size: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    margin-bottom: 2rem;
}

.honorMore1::after,
.honorMore1::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid transparent;
    bottom: 0;
    content: " ";
    display: block;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all 280ms ease-in-out;
    transition: all 280ms ease-in-out;
    width: 0;
}

.honorBox ul li:hover .honorMore1::after,
.honorBox ul li:hover .honorMore1::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-color: #ddd;
    -webkit-transition: width 350ms ease-in-out;
    transition: width 350ms ease-in-out;
    width: 90%;
}

.caseRecommend .caseRecommend {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.honorBox {
    overflow: hidden;
}

.honorBox ul {
    margin-top: .2rem;
}

.searchBoxTitle {
    font-weight: bold;
    margin-top: .4rem;
    font-size: .2rem;
    letter-spacing: .2px;
    margin-bottom: .4rem;
}

.searchProducts h5 {
    border: 1px solid #ccc;
    padding: .1rem;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: .2rem;
}

.searchImg a.searchImgCenter {
    display: block;
    position: relative;
    padding: 50%;
    border: 1px solid #ccc;
}

.searchImg a.searchImgCenter img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    display: block;
    padding: 10%;
}

a.searchText {
    text-align: center;
    display: block;
    margin-top: .1rem;
    font-size: .12rem;
    font-weight: bold;
    color: #666;
}

a.searchText {
    margin-bottom: .2rem;
}

.searchNews h5 {
    border: 1px solid #ccc;
    padding: .1rem;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: .2rem;
}

.searchNews ul li a {
    color: #333;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .05rem 0;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: .15rem;
    font-weight: bold;
}

.searchNews ul li a:hover {
    color: #12a7eb;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.siteMapBox {
    overflow: hidden;
    border: 1px solid #ccc;
    margin-top: .3rem;
    padding-bottom: .3rem;
    margin-bottom: 0.3rem;
}

.text-right1 {
    float: right;
    padding: .05rem;
    background: #F8F8F8;
    color: #666;
    border: 1px solid #E0E0E0;
    z-index: 2;
}

.text-right1 a {
    color: #666;
    display: inline-block;
    padding: 0 5px;
}

.text-right1 a:hover {
    color: #333;
}

.siteMapBox ul li {
    padding: 0rem .2rem;
    line-height: .2rem;
    overflow: hidden;
}

.siteMapBox ul li a.siteTitle {
    font-weight: bold;
    display: block;
    line-height: .4rem;
    font-size: .16rem;
}

.siteMapBox ul li .siteMapMt {
    overflow: hidden;
    border: 1px solid #ccc;
    padding: .05rem;
}

.siteMapBox ul li .siteMapMt a.siteMore {
    padding: 0 20px;
}

.siteMapBox {
    position: relative;
}

.text-right1 {
    position: absolute;
    right: 0;
}

.siteMapBox ul li a.siteMore:hover {
    color: #333;
}

.siteMapBox ul li .siteMapMt b {
    display: block;
    width: 100%;
}

.searchMore {
    display: block;
}

.siteMore {
    display: block;
}

.siteMore i {
    display: block;
}

.siteMdd {
    display: block;
}

.siteMapMt span {
    display: block;
    text-align: center;
}

.siteMapMt p {
    float: left;
    margin-bottom: 0;
}

.webqq_left span {
    font-size: 18px;
}

.pro_addPageTitle {
    width: 100%;
    height: 0.7rem;
    background: #333;
    border-radius: 10px 10px 0 0;
    position: relative;
    padding: 0 20px;
}

.pro_addPageTitle h4 {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 0.24rem;
    z-index: 2;
    background: #333;
    margin-top: 0.22rem;
}

.pro_addPageTitle p {
    position: absolute;
    top: 0;
    left: 20px;
    line-height: 0.7rem;
    color: #fff;
    opacity: 0.2;
    z-index: 2;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.4rem;
    letter-spacing: -5px;
}

.pro_addPageTitle img {
    width: 0.3rem;
    height: 0.3rem;
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
}

.pro_addPagenr {
    border: 1px solid #eaeaea;
    border-top: 0;
    padding: 0 0.2rem 0.2rem;
}

.pro_addPagenr h5 {
    width: 100%;
    height: 0.5rem;
    display: block;
    background: #eaeaea;
}

.pro_addPagenr ul li h5 a {
    width: 80%;
    padding: 0 10px;
    display: block;
    padding-right: 0%;
    font-size: 0.18rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.pro_addPagenr ul li h5 b {
    width: 20%;
    background: url(../images/pro_addpagenrico.png) no-repeat center;
    float: left;
    height: 0.5rem;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.pro_addPagenr ul li h5 b.on {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.pro_addPagenr ul li:hover h5 {
    background: #333;
    -webkit-transition: .5s;
    transition: .5s;
}

.pro_addPagenr ul li:hover h5 a {
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s;
}

.pro_addPagenr ol li {
    border: 1px solid #ededed;
    border-top: 0;
    padding: 0 10px;
    line-height: 50px;
}

.pro_addPagenr ul>li {
    padding-top: 0.2rem;
}

.pro_addPagenr ol li {
    margin-top: 0;
}

.pro_addPagenr ol li a {
    width: 100%;
    padding: 0;
    display: block;
    padding-right: 20%;
    font-size: 0.14rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url(../images/pro_addpagenrico.png) no-repeat 95% center;
    -webkit-transition: .5s;
    transition: .5s;
    color: #666;
}

.pro_addPagenr ol li:hover a {
    color: #333;
    -webkit-transform: translateX(5px);
}

.pro_addNewsTitle {
    height: 0.46rem;
    width: 100%;
    background: #333333;
    padding: 0 20px;
    margin-top: 0.2rem;
}

.pro_addNewsTitle img {
    width: 0.21rem;
    height: 0.23rem;
    vertical-align: sub;
}

.pro_addNewsTitle i {
    font-size: 0.18rem;
    color: #fff;
    line-height: 0.46rem;
    padding-left: 0.1rem;
}

.pro_addNewsBox {
    width: 100%;
    padding: 0 0.2rem;
    border: 1px solid #ededed;
    border-top: 0;
}

.pro_addNewsImg {
    display: block;
    position: relative;
    padding: 32.6%;
    border: 4px solid #f0f0f0;
    margin: 0.1rem 0 0;
}

.pro_addNewsImg img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.pro_addNewsText {
    height: 0.38rem;
    border-bottom: 1px solid #ededed;
    display: block;
    text-align: center;
    line-height: 0.38rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

.pro_addNewsCenter {
    height: 30px;
    margin-top: 10px;
}

.pro_addNewsCenter .pro_addNewsBoxL {
    width: 50%;
    position: relative;
    float: left;
    height: 18px;
}

.pro_addNewsCenter .pro_addNewsBoxL img {
    display: block;
    margin: 2px 4px;
}

.pro_addNewsCenter .pro_addNewsBoxL i {
    position: absolute;
    right: 10px;
    width: 0.18rem;
    height: 0.18rem;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #ededed;
}

.pro_addNewsCenter .pro_addNewsBoxR i {
    position: absolute;
    left: 10px;
    width: 0.18rem;
    height: 0.18rem;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #ededed;
}

.pro_addNewsCenter .pro_addNewsBoxR {
    width: 50%;
    position: relative;
    float: left;
    height: 30px;
}

.pro_addNewsCenter .pro_addNewsBoxR img {
    display: block;
    margin: 2px 4px;
}

.pro_addNewsCenter .pro_addNewsBoxR:hover i,
.pro_addNewsCenter .pro_addNewsBoxL:hover i {
    background: #333;
}

.pro_addNewsTitle1 img {
    height: 0.19rem;
    width: 0.17rem;
}

.pro_addNewsBoxList ul li {
    border: 1px solid #ededed;
    border-top: 0;
    padding: 0 0.2rem;
    line-height: 0.4rem;
}

.pro_addNewsBoxList ul li a {
    padding-left: 0.2rem;
    line-height: 0.4rem;
    display: block;
    background: url(../images/pro_addnewsboxlistico.png) no-repeat center left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
    color: #666;
}

.pro_addNewsBoxList ul li a:hover {
    color: #333;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.proListR ul li .proListCenterBpx {
    border: 1px solid #ededed;
    padding: 5px 5px 0;
    /* box-shadow: 0 0 16px rgba(0, 0, 0, .1); */
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
    margin: 0 -6px 20px;
    background: #f7f7f7;
}

.proListR ul li .proListCenterBpx:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.proListR ul li .proListCenterBpx:hover .proListCenterTextL a {
    font-weight: 600;
    color: #333;
}

.proListR ul li .proListCenterBpx:hover .proListCenterTextR {
    background: #333;
}

.proListCenterTextL {
    width: 80%;
    float: left;
    display: block;
    background: #f9f9f9;
    padding-left: 0.2rem;
}

.proListCenterTextR {
    width: 20%;
    float: left;
    background: #e9e9e9;
    -webkit-transition: .5s;
    transition: .5s;
}

.proListCenterP {
    /* width: 105%;    height: 2px;    background-color: #f7f7f7;    clear: both;    margin: 0 -2px; */
}

.proListCenter1d {
    position: relative;
    display: block;
    border: 1px solid #f1f1f1;
    border-bottom: 0;
    padding: 30%;
}

.proListR ul li .proListCenterBpx:hover {
    border-color: #333;
    background: #fff;
}

.proListCenter1d img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.proListCenter1d {
    background: #fff;
}

.proListCenterTextL {
    height: 70px;
    overflow: hidden;
}

.proListCenterTextR {
    height: 70px;
}

.proListCenterTextR img {
    display: block;
    margin: 0.18rem auto;
}

.proListCenterText2 {
    font-size: 0.18rem;
    line-height: 1.8;
    font-weight: 500;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-top: 0.08rem;
}

.proListCenterTextL p {
    font-size: 0.14rem;
    color: #999;
    padding-right: 0.1rem;
    margin-bottom: 0.09rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width:768px) {
    .caseTitleR {
        margin-bottom: .2rem;
        overflow: hidden;
    }

    .caseMenuBottom .caseTitleR ul {
        padding-top: 0;
    }

    .caseMenu {
        background: none;
    }

    .caseMenu {
        height: auto;
    }

    .honorImg1 span {
        display: none;
    }

    .honorBox ul li:hover .honorMore1::after,
    .honorBox ul li:hover .honorMore1::before {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-color: transparent;
        -webkit-transition: width 350ms ease-in-out;
        transition: width 350ms ease-in-out;
        width: 90%;
        content: "";
    }

    .caseRecommend {
        padding-bottom: 0;
    }

    .caseTitleR ul li .ctc {
        display: none;
    }

    .caseTab ul li {
        padding: .2rem .2rem;
    }

    .caseTab ul li:last-child a {
        background: none;
    }

    .caseTab ul li a {
        background: none;
    }

    .caseTab ul li:hover {
        background: none;
    }

    .caseTab ul li:last-child:hover a {
        background: none;
    }

    .caseTab ul li:hover a {
        background: none;
    }

    .scan,
    .bdsharebuttonbox {
        display: none;
    }

    .proListCenter i a::after,
    .productsBorer i::after {
        display: none;
    }

    .border-left,
    .border-right,
    .border-top,
    .border-bottom,
    .border-proleft,
    .border-proright,
    .border-protop,
    .border-probottom {
        display: none;
    }

    .proListCenter ul li:hover a.proListTitle {
        color: #333 !important;
    }

    .pagination a,
    .pagination span {
        padding: 4px 7px;
        margin: 0 .05rem;
    }

    .proListclass2:hover {
        color: #fff;
    }

    .proMored {
        background: rgba(0, 0, 0, .4) url(../images/productslist3.png) no-repeat 90% 1rem;
    }

    .webqqs {
        display: none;
    }

    .caseRecenter .caseText {
        padding: 0;
    }

    .caseLdd .button_text_container {
        display: none;
    }

    .proList b {
        display: none !important;
    }

    .proListclass1 {
        overflow: hidden;
    }

    .aboutTop img {
        max-width: 100%;
        height: auto;
    }

    .contact ul li:hover .contactTop {
        background: #fff !important;
    }

    .contact ul li:hover .contactBottom::before,
    .contact ul li .contactBottom::before {
        display: none;
    }

    .row1 {
        margin: 0 -15px;
    }

    .proListCenter li {
        margin-top: .2rem;
        padding: 0 15px;
    }

    .productRtopr {
        height: auto;
    }

    .productsCenter img {
        max-width: 100%;
        height: auto;
    }

    .proListCenter {
        margin: 0 -15px;
    }

    .proListCenter li {
        padding: 0 15px;
    }

    .proList_classify {
        margin: 0 0px;
    }

    .proListL {
        margin-left: 0;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .proListclass1 i {
        display: none;
    }

    .proList_classify {
        margin-left: 15px;
        margin-right: 15px;
    }

    .proListCenter {
        margin: 0 15px;
    }

    .prolistImgd:hover .proMored {
        position: absolute;
        top: 83.5%;
        display: block;
        border-radius: 0 0 .03rem .03rem;
        left: 0;
        width: 96%;
        background: rgba(0, 0, 0, .4) url(../images/productslist3.png) no-repeat 90% .08rem;
        color: #fff;
        -webkit-transition: .5s;
        transition: .5s;
        padding: 0% 5%;
        font-size: .14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 20%;
        left: 2%;
        line-height: 1.8;
        height: .24rem;
    }

    .pc-slide .view {
        height: 217px;
    }

    .productRtopr,
    .productsMore {
        display: none;
    }

    .caseList li:hover .caseListTitle {
        color: #333 !important;
    }

    .caseList li p {
        display: none;
    }

    .caseMenu {}

    .caseMenuBottom {
        padding-top: 0;
    }

    .caseList {
        padding-top: .4rem;
    }

    .caseLdd:hover {
        box-shadow: 0 0 0;
    }

    .caseList li .caseListTitle {
        padding: 0.05rem 0;
    }

    .caseList li:hover .caseText {
        border-bottom: 1px solid #f2f2f2;
    }

    .caseContainer {
        padding: 0 15px;
    }

    .caseREimg img {
        display: none;
    }

    .caseRecenter li:hover .caseListTitle {
        font-weight: normal;
    }

    .caseTab {
        padding: 0 15px;
    }

    .newsTop li {
        padding: 0;
    }

    .newsTop ul li:hover .newsTopcenter {
        border-top: 1px solid #f2f2f2;
        background: #fff !important;
    }

    .newsListLcenter {
        box-shadow: 0 0 0;
    }

    .newsListR {
        margin-top: 0.2rem;
    }

    .honorMore1 {
        margin-bottom: 0.2rem;
    }

    .caseRe i {
        text-align: center;
        display: block;
    }

    .wjdh-map {
        position: relative;
        width: 100%;
        height: 500px;
    }

    .wjdh-map #r-result {
        width: 100%;
        height: 5rem;
    }

    .content-show {
        padding: 0;
    }

    .map-tab {
        display: none;
    }

    #wmap {
        height: 5rem;
    }

    #r-result {
        display: none;
    }

    .map-marker h4 {
        font-size: 0.16rem;
    }

    .map-marker dd span,
    .map-marker p {
        font-size: .14rem;
    }

    .newsListLImg::after {
        display: none;
    }

    .newsListLcenter:hover .newsListLtext a,
    .newsListRtop:hover span,
    .newsListRtop:hover b,
    .newsListRtop:hover .newsListRtopR a {
        color: #333 !important;
    }
}

.h1,
h1 {
    font-size: 100%;
    box-sizing: content-box;
}

.page-content p {
    margin-bottom: 10px;
}

.caseContainer p {
    margin-bottom: 10px;
}

@keyframes newsAiMore {
    0% {
        background: url(../images/pagearrow.png) no-repeat 100% center;
    }

    20% {
        background: url(../images/pagearrow.png) no-repeat 95% center;
    }

    40% {
        background: url(../images/pagearrow.png) no-repeat 100% center;
    }

    60% {
        background: url(../images/pagearrow.png) no-repeat 95% center;
    }

    80% {
        background: url(../images/pagearrow.png) no-repeat 100% center;
    }

    100% {
        background: url(../images/pagearrow.png) no-repeat 95% center;
    }
}

.newsAi ul li .newsAicenter {
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
    padding: 15px 30px;
    margin-top: 0.3rem;
}

.newsAi ul li .newsAicenter span {
    font-size: 0.2rem;
    color: #999;
    display: block;
}

.newsAi ul li .newsAicenter span i {
    font-size: 0.14rem;
    padding-left: 0.05rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.newsAiTitle {
    display: block;
    line-height: 3;
    font-size: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsAicenter p {
    font-size: 0.14rem;
    color: #666;
    line-height: 2;
    height: 0.56rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.newsAiMore {
    display: block;
    border-top: 1px solid #f5f5f5;
    margin-top: 0.1rem;
    font-size: 0.14rem;
    color: #b2b2b2;
    line-height: 3;
    background: url(../images/pagearrow.png) no-repeat 100% center;
    animation: newsAiMore linear 4s infinite alternate;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsAi ul li:hover a.newsAiTitle {
    color: #333;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.newsAiMore:hover {
    color: #333;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.nwesCenterbText1 {
    overflow-y: hidden;
}

.nwesCenterbText1 span {
    display: block;
    margin: 0.2rem 0.1rem;
    border: 1px solid #dededd;
    font-size: .25rem;
    line-height: 1;
    padding: .1rem .12rem;
    color: #999;
    float: left;
    line-height: 1.5;
    padding: 0.15rem 0.2rem;
}

.nwesCenterbText1 span i {
    font-size: .15rem;
    display: block;
    padding-top: .04rem;
    padding-bottom: 0rem;
}

.newsCenterbTextr1 {
    padding: 0 0 0 2%;
    width: 85%;
    float: left;
    background: url(../images/newsaic.png) no-repeat 117% 100% 54%;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    margin-top: 0.16rem;
    overflow: hidden;
    height: 1rem;
}

.newsCenterbTextr1 a.newsAiText {
    display: block;
    font-size: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
    width: 100%;
    line-height: 2;
    overflow-y: hidden;
    position: relative;
}

.newsAiMore1 {
    position: absolute;
    right: -10%;
    top: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsCenterbTextr1 p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 2;
    margin: 0;
    font-size: .14rem;
    width: 100%;
    color: #808080;
    -webkit-transition: .5s;
    transition: .5s;
    margin-top: 0.1rem;
}

.proListR1 .newsCenterb ul li {
    margin-top: 0;
    margin-bottom: 0rem;
}

.proListR1 .newsCenterb ul li .newsCenter {
    padding: 20px 30px;
}

.newsCenterb ul li:hover .newsAiMore1 {
    right: 0%;
}

.newsCenterb ul li:hover .newsCenterbTextr1 a.newsAiText,
.newsCenterb ul li:hover .newsCenterbTextr1 p {
    width: 100%;
}

.newsCenterb ul li:hover .newsCenterbTextr1 a.newsAiText {
    color: #333;
}

.proListR1 .newsCenter {
    border-bottom: 1px solid #f2f2f2;
}

.honorBox .honorMore1 {
    margin-bottom: 0.2rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.honorMore1:hover {
    color: #000;
}

.productCenterShow .ShowProductTitle {

    padding: 0 20px;
    border-radius: 10px 10px 0 0;
    height: 1.04rem;
    background-size: cover !important;
}

.productCenterShow .ShowProductTitleYY {
    display: block;
    width: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .5);
    height: 1px;
}

.productCenterShow .ShowProductTitle h4 {
    font-size: 0.22rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0.24rem 0.22rem 0;
}

.productCenterShow .ShowProductTitle p {
    font-size: 0.16rem;
    color: #fff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 1.7;
}

.productCenterShow .ShowProductTitle p::after,
.productCenterShow .ShowProductTitle p::before {
    content: "-";
    padding: 0 5px;
}

.productCenterShow .ShowProductTitle img {
    display: block;
    margin: 0 auto;
    padding-bottom: 0.1rem;
}

.ShowProductCenter {
    background-color: #f9f9f9;
    margin-top: 10px;
}

.ShowProductCenter ul li h6 {
    background-color: #333;
    padding: 10px 15px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.ShowProductCenter ul li h6 a {
    color: #fff;
    font-size: 0.16rem;
    font-weight: bold;
    line-height: 0.21rem;
    display: block;
    width: 90%;
    float: left;
}

.ShowProductCenter ul li h6 i {
    width: 0.21rem;
    margin-right: 10px;
}

.ShowProductCenter ul li h6 i img {
    width: 0.21rem;
    vertical-align: bottom;
}

.ShowProductCenter ul li h6 b {
    width: 10%;
    background: url(../images/showproductpevr.png) no-repeat center right;
    height: 0.21rem;
    display: block;
    float: left;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductCenter ul li h6 b.on {
    background: url(../images/showproductpevr.png) no-repeat center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ShowProductCenter ul li ol {
    padding: 0.1rem 0.1rem 0.1rem;
    overflow: hidden;
}

.ShowProductCenter ul li {
    margin-bottom: 0.1rem;
}

.ShowProductCenter ul li ol li {
    padding: 4px 10px;
    margin: 10px 0;
    position: relative;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .14);
    border-radius: 4px;
}

.ShowProductCenter ul li ol li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background: url(../images/showproductol.png) no-repeat 6px center;
    padding-left: 30px;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 0.15rem;
    color: #626161;
}

.ShowProductCenter ul li ol li i {
    width: 0%;
    height: 100%;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductCenter ul li ol li:hover a {
    color: #fff;
    background: url(../images/showproductol1.png) no-repeat 6px center;
}

.ShowProductCenter ul li ol li:hover i {
    width: 100%;
}

.HotproductShow,
.HotproductShow1 {
    border-top: 3px solid #333;
}

.HotproductShow1 ul li i {
    float: left;
    position: relative;
}

.HotproductShow1 ul li span {
    float: left;
    font-size: 0.14rem;
}

.HotproductShow1 ul li a i::after {
    content: "";
    width: 0.1rem;
    height: 1px;
    display: inline-block;
    background: #ccc;
    vertical-align: middle;
    margin: 0 5px 0 12px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
}

.HotproductShow1 ul li a:hover i::after {
    width: 0.2rem;
    margin: 0 5px 0 7px;
    background: #333;
}

.HotproductShow1 ul li {
    padding: 0 10px;
}

.ShowproductList .ShowProductListTitle {
    width: 100%;
    height: 60px;
    background: #f9f9f9;
}

.ShowProductTitleL {
    position: relative;
    overflow: hidden;
    width: 11%;
    float: left;
}

.ShowProductTitleL i {
    background: #ebebeb;
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    top: -140%;
    right: 0;
}

.ShowProductTitleText {
    float: left;
    margin-left: 2%;
}

.ShowProductTitleL b {
    height: 60px;
    display: block;
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 60px;
    font-size: 0.5rem;
    color: #fff;
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.ShowProductTitleText a,
.ShowProductTitleText span {
    font-size: 0.16rem;
    display: block;
    padding-top: 0.06rem;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductTitleText p {
    font-size: 0.14rem;
    color: #999;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showProductTitleMore {
    margin-right: 2%;
    float: right;
    width: 2em;
    box-sizing: content-box;
    border: 1px solid #999;
    padding: 1px 9px;
    color: #999;
    margin-top: 0.06rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.showProductTitleMore:hover {
    color: #333;
    border: 1px solid #333;
}

.ShowProductsListBoxImg {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductsListBoxImgD {
    position: relative;
    padding: 33.3%;
    display: block;
}

.ShowProductsListBoxImgBox {
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductsListBoxImgBox a.ShowProductsListBoxImgD img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: .5s;
    transition: .5s;
}

.showProductListMOredR {
    -webkit-transition: .5s;
    transition: .5s;
}

.showProductListMOredR a {
    display: block;
}

.showProductListMOred {
    overflow: hidden;
    margin-top: 0.1rem;
}

.showProductListMOredL {
    width: 80%;
    float: left;
    -webkit-transition: .5s;
    transition: .5s;
}

.tubiapo {
    padding-top: 0.14rem;
}

.showProductListMOredR {
    float: right;
    width: 10%;
    position: relative;
    padding: 2%;
}

.showProductListMOredR img {
    display: block;
    margin: 0 auto;
}

.ShowProductListBox {
    margin: 0 -10px;
}

.showProductListMOredL a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.16rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductListBox ul li:hover .showProductListMOredL a {
    color: #333;
}

.ShowProductListBox ul li:hover .showProductListMOredL p {
    color: #333;
}

.ShowProductCWC {
    border: 5px solid #f9f9f9;
    overflow: hidden;
    margin-top: 0.2rem;
    padding: 5px 0px;
}

.ShowProductListTitleTitle .ShowProductCWC {
    margin-top: 0;
    border-top: 0;
}

.ShowProductCWC a {
    padding-left: 25px;
    color: #858585;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
    line-height: 2;
}

.ShowProductCWC a i {
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    overflow: hidden;
}

.ShowProductCWC a img {
    display: inline-block;
}

.ShowproductList {
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.ShowProductCWC a:hover i img {
    border-left: 180px solid transparent;
    -webkit-filter: drop-shadow(-180px 0 0px #333);
    filter: drop-shadow(-180px 0 0px #333);
}

.ShowProductCWC a:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.showProductListMOredL p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductListBox ul li {
    margin-top: 0.16rem;
    padding: 0 10px;
}

.ShowProductCWC a:hover {
    color: #333;
}

.ShowProductsImgBox {
    padding: 0.1rem 0;
    background: #f9f9f9;
    margin: 0.2rem 0 0;
    overflow: hidden;
}

.ShowProductImgL a {
    position: relative;
    display: block;
    padding: 33.6%;
    border: 1px solid #f1f1f1;
}

.ShowProductImgL a img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.ShowProductImgRBox {
    width: 94%;
    height: 90%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #dedede;
    padding: 20px;
    margin: 10px;
}

.ShowProductImgRBoxTitle {
    display: block;
    font-size: .18rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductImgRLine {
    width: 100%;
    border-top: 1px solid #dedede;
    margin: 0 auto;
}

.ShowProductImgRBox p {
    color: #858585;
    line-height: 2;
    text-indent: 2em;
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 0.84rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductImgRLine1 {
    width: 10%;
    border-top: 1px solid #dedede;
    margin: 0.2rem auto;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductImgBoxCenterL {
    float: left;
    height: 0.44rem;
    animation: msClock 2s linear infinite;
    animation: msClock 2s linear infinite;
}

.ShowProductImgBoxCenterLText {
    margin-left: 0.1rem;
    float: left;
    height: 0.44rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductImgBoxCenterLText span {
    font-size: 0.14rem;
    color: #7f7f7f;
    display: block;
}

.ShowProductImgRBox:hover .ShowProductImgRBoxTitle {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.ShowProductImgRBox:hover p {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

@keyframes msClock {

    0%,
    70%,
    100% {
        transform: rotate(0) scale(1);
    }

    10%,
    30% {
        transform: rotate(-15deg) scale(1.05);
    }

    20%,
    40% {
        transform: rotate(15deg) scale(1.05);
    }
}

.ShowProductImgBoxCenterLText i {
    font-size: 0.18rem;
    color: #7f7f7f;
    font-weight: bold;
}

.ShowProductImgBoxCenterRMore {
    float: right;
    height: 0.44rem;
    width: 20%;
    border-left: 1px solid #a7a7a7;
    padding-left: 0.1rem;
    color: #999;
    line-height: 0.44rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.ShowProductImgBoxCenterRMore:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    color: #333;
    border-left: 1px solid #333;
}

@media(max-width:768px) {
    .nwesCenterbText1 span {
        display: none;
    }

    .proListL {
        display: none;
    }

    .newsCenterbTextr1 {
        width: 100%;
    }

    .proListR1 .newsCenterb ul li {
        margin-top: 0.3rem;
        margin-bottom: 0;
    }

    .newsCenterb ul li .newsAiMore1 {
        display: none;
    }

    .newsCenterb ul li:hover .newsCenterbTextr1 a.newsAiText,
    .newsCenterb ul li:hover .newsCenterbTextr1 p {
        width: 100%;
    }

    .newsCenterb ul li:hover .newsCenterbTextr1 a.newsAiText {
        color: #333;
    }

    .newsCenter {
        border-bottom: 1px solid #e6e6e6;
    }
}

.driving-way .map-go ul .d1 {
    top: 56px;
}

.driving-way .map-go ul .d2 {
    top: 0;
}

.ShowProductListBox ul li:hover .ShowProductsListBoxImg .ShowProductsListBoxImgBox {
    box-shadow: 0 0 16px rgba(0, 0, 0, .2);
}

.ShowProductListBox ul li:hover .ShowProductsListBoxImg img {
    display: block;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

.ShowProductListBox ul li:hover .showProductListMOredL {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

.ShowProductImgRBox:hover .ShowProductImgRLine1 {
    width: 30%;
}

.ShowProductImgRBox:hover .ShowProductImgBoxCenterLText {
    margin-left: 0.12rem;
}

.ShowProductImgRBox:hover .ShowProductImgBoxCenterRMore {
    margin-right: 0.02rem;
}

.ShowProductListBox ul li:hover .showProductListMOredR {
    margin-right: 0.04rem;
}

@media(max-width:768px) {
    .pro_addNews {
        display: none !important;
    }

    .pro_addNew,
    .pro_addNewsBoxList {
        display: none !important;
    }

    .pro_addPagenr {
        margin-bottom: 0.2rem;
    }

    .pro_addPage .row {
        margin: 0;
    }

    .ShowProductImgRBox {
        margin: 10px 15px;
    }

    .ShowProductImgBoxCenterRMore {
        width: 28%;
    }

    .showProductListMOredR {
        display: none;
    }

    .showProductListMOredL {
        width: 100%;
    }
}

@keyframes tan {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    25% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    75% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

/* 2020.5.13 */
.newsTOnewTop {
    background: #fbfbfb;
    padding: 0.5rem 0;
}

.newsTonewTopLBox {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 0.2rem;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.05);
}

.newsTonewTopLBox h4 a {
    display: block;
    text-align: center;
    font-size: 0.18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.newsTonewTopLBox h4 i {
    width: 0.3rem;
    height: 0.02rem;
    background: #cacaca;
    display: block;
    margin: 0.12rem auto;
}

.newsTonewsTopLImg {
    width: 100%;
    height: 2.2rem;
    display: block;
    position: relative;
}

.newsTonewsTopLImg a.newsTonewsTopLImgA {
    width: 100%;
    height: 2.2rem;
    display: block;
}

.newsTonewsTopLImg a.newsTonewsTopLImgA img {
    display: block;
    width: 100%;
    height: 2.2rem;
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
    object-fit: cover;
}

.newsTonewsTioTime {
    width: 0.8rem;
    height: 0.8rem;
    background: #0f4c81;
    position: absolute;
    bottom: -0.25rem;
    -webkit-transition: .5s;
    transition: .5s;
    left: 0;
}

.newsTonewsTioTime h4 {
    padding-top: 0.16rem;
    font-size: 30px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    padding-left: 0.06rem;
    padding-bottom: 0.08rem;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.newsTonewsTioTime span {
    padding-left: 0.06rem;
    line-height: 0.24rem;
    color: #fff;
}

.newsTOnewTopL p {
    padding-top: 0.4rem;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #999;
    text-indent: 2em;
}

.newsTOnewTopLMore {
    display: block;
    width: 1.7rem;
    height: 0.3rem;
    display: block;
    margin: 0.22rem auto 0;
    border: 1px solid #d0d0d0;
    line-height: 0.3rem;
    text-indent: .3rem;
    color: #515151;
    background: url('../images/newstonewtoplmore.png') no-repeat 74% center;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewTopL:hover .newsTonewsTopLImg a.newsTonewsTopLImgA img {
    transform: scale(1.02);
}

.newsTOnewTopL:hover .newsTonewsTioTime {
    left: 1%;
}

.newsTOnewTopL:hover .newsTOnewTopLMore {
    background: #0f4c81 url('../images/newstonewtoplmore.png') no-repeat 76% center;
    color: #fff;
    text-indent: .25rem;
}

.newsTOnewTopRTitle {
    width: 100%;
}

.newsTOnewTopRTitleL {
    float: left;
    width: 4%;
}

.newsTOnewTopRTitleL h4 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    color: #0f4c81;
    position: relative;
}

.newsTOnewTopRTitleL span {
    font-size: 13px;
    display: block;
    line-height: 1;
    position: absolute;
    bottom: -0.06rem;
    text-align: center;
}

.newsTOnewTopRTitleLTitle {
    float: left;
    font-size: 26px;
    line-height: 1;
    font-weight: bold;
    color: #0f4c81;
    margin-left: 2px;
    padding-top: 6px;
    border-bottom: 1px solid #0f4c81;
    height: 0.46rem;
}

.newsTonewTopRTitleR {
    float: right;
    width: 96%;
    height: 0.46rem;
    border-bottom: 1px solid #dcdcdc;
}

.newsTonewTopRTitleRMore {
    line-height: 1.2;
    border: 1px solid #999;
    border-left: 0;
    border-right: 0;
    float: right;
    margin-top: 0.16rem;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0 10px;
}

.newsTonewTopRTitleRMore:hover {
    border: 1px solid #0f4c81;
    color: #0f4c81;
    border-left: 0;
    border-right: 0;
    transform: translateX(-2px);
}

.newsTOnewTopRCenter ul li {
    width: 100%;
    height: 0.94rem;
    background: #fff;
    margin-top: 0.15rem;
    border: 1px solid #e4e4e4;
}

.newsTOnewTopRCenterL {
    float: left;
    width: 14%;
    height: 0.94rem;
    border: 1px solid #f2f2f2;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewTopRCenterR {
    float: left;
    width: 86%;
    padding: 0 0.17rem;
}

.newsTOnewTopRCenterL span {
    font-size: 30px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #0f4c81;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    position: relative;
    border-bottom: 1px solid #0f4c81;
    width: 60%;
    margin: 0 auto;
    line-height: 1.5;
    padding-top: 8%;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewTopRCenterL i {
    width: 60%;
    margin: 0 auto;
    line-height: 0.24rem;
    color: #0f4c81;
    display: block;
    padding-top: 0.05rem;
    line-height: 1.5;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewTopRCenterR a {
    display: block;
    line-height: 2;
    font-size: 0.16rem;
    padding-top: 0.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewTopRCenterR p {
    font-size: 0.14rem;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 0.42rem;
}

.newsTOnewTopRCenter ul li:hover .newsTOnewTopRCenterL {
    transform: translate(5px, 5px);
    background: #0f4c81;
}

.newsTOnewTopRCenter ul li:hover .newsTOnewTopRCenterL span {
    color: #fff;
    border-color: #fff;
}

.newsTOnewTopRCenter ul li:hover .newsTOnewTopRCenterL i {
    color: #fff;
}

.newsTOnewTopRCenter ul li:hover .newsTOnewTopRCenterR a {
    color: #0f4c81;
    padding-top: 0.1rem;
}

.newsToNewCenterL {
    padding: 0.6rem 15px;
}

.newsToNewCenterL .newsTOnewTopRTitleL {
    width: 8%;
}

.newsToNewCenterL .newsTonewTopRTitleR {
    width: 92%;
}

.newsToNewCenterL .JourCenterR {
    width: 100%;
}

.newsToNewCenterL .JourCenterR ul li {
    border-color: #fff;
}

.newsToNewCenterR {
    padding: 0.6rem 15px;
}

.newsToNewTopRRboxL {
    width: 24%;
    float: left;
    height: 1.26rem;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.05);
}

.newsToNewTopRRboxL img {
    width: 100%;
    height: 1.26rem;
    object-fit: cover;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewTopRRboxR {
    float: left;
    width: 74%;
    margin-left: 2%;
}

.newsToNewTopRRbox ul li {
    margin-top: 0.16rem;
}

.newsToNewTopRRboxRTitle {
    color: #0f4c81;
    display: block;
    padding-bottom: 1%;
    border-bottom: 1px solid #dcdcdc;
    padding-top: 2%;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
}

.newsToNewTopRRboxRTitle::after {
    content: "";
}

.newsToNewTopRRboxRTitle a {
    display: block;
    float: left;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.16rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewTopRRboxRTitle span {
    float: right;
    color: #b1b1b1;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewTopRRboxR p {
    padding-top: 1%;
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.newsToNeWStOPrRBoxMore {
    display: block;
    color: #c0c0c0;
    padding-left: 20px;
    background: url(../images/jourcentermore.png) no-repeat center left;
    margin-top: 0.13rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.12rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewTopRRbox ul li:hover .newsToNewTopRRboxL img {
    transform: scale(1.04);
}

.newsToNewTopRRbox ul li:hover .newsToNewTopRRboxRTitle a {
    color: #0f4c81;
    transform: translateX(5px);
}

.newsToNewTopRRbox ul li:hover .newsToNewTopRRboxRTitle span {
    transform: translateX(-5px);
}

.newsToNewTopRRboxRTitle::after {
    content: "";
    width: 0%;
    background-color: #0f4c81;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewTopRRbox ul li:hover .newsToNewTopRRboxRTitle::after {
    width: 100%;
}

.newsToNeWStOPrRBoxMore:hover {
    transform: translateX(5px);
}

.newsToNewCenter {
    border-bottom: 1px solid #f2f2f2;
}

.newsTOnewBottom {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.newsTOnewBottomtitle h3 {
    text-align: center;
    font-size: 0.26rem;
    font-weight: bold;
    color: #0f4c81;
}

.newsTOnewBottomtitle p {
    font-size: 0.2rem;
    text-align: center;
    color: #cdcdcd;
}

.newsTOnewBottomtitle p i {
    padding: 0 0.05rem;
    line-height: 1;
}

.newsTOnewBottomBox {
    margin-top: 0.5rem;
    border-bottom: 1px solid #f2f2f2;
    display: block;
    height: 2.62rem;
}

.newsTOnewBottomBox ul li {
    padding: 0;
    height: 1.3rem;
    border: 1px solid #e4e4e4;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewBottomBox ul li .newsTOnewBottomBoxTimeL {
    width: 29%;
    float: left;
    height: 1.3rem;
    background-color: #fbfbfb;
    -webkit-transition: .9s;
    transition: .9s;
}

.newsTOnewBottomBox ul li .newsToNewBottomBoxText {
    float: left;
    height: 1.3rem;
    width: 71%;
}

.newsTOnewBottomBoxTimeL h4 {
    font-size: 0.32rem;
    padding-left: 30%;
    margin-top: 0.4rem;
    color: #999;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewBottomBoxTimeL span {
    font-size: 0.16rem;
    padding-left: 30%;
    display: block;
    color: #999;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewBottomBoxText {
    padding: 0 6%;
}

.newsToNewBottomBoxText a {
    font-size: 0.16rem;
    line-height: 4;
    font-size: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsToNewBottomBoxText p {
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.newsTOnewBottomBox ul li:hover .newsTOnewBottomBoxTimeL {
    background: #0f4c81;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewBottomBox ul li:hover .newsTOnewBottomBoxTimeL h4,
.newsTOnewBottomBox ul li:hover .newsTOnewBottomBoxTimeL span {
    color: #fff;
}

.newsTOnewBottomBox ul li::after {
    content: "";
    width: 0%;
    height: 1px;
    background: #0f4c81;
    position: absolute;
    bottom: 0px;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewBottomBox ul li::before {
    content: "";
    width: 0%;
    height: 1px;
    background: #0f4c81;
    position: absolute;
    top: -1px;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsTOnewBottomBox ul li:hover::after,
.newsTOnewBottomBox ul li:hover::before {
    width: 100%;
}

.newsTOnewBottomBox ul li:hover .newsToNewBottomBoxText a {
    color: #0f4c81;
    transform: translateX(5px);
}

@media(max-width:768px) {
    .newsTOnewTopRTitleL {
        width: 15%;
    }

    .newsTonewTopRTitleR {
        width: 85%;
    }

    .newsTOnewTopRTitle {
        margin-top: 0.3rem;
    }

    .newsTOnewTopRCenterL {
        display: none;
    }

    .newsToNewTopRRboxL {
        display: none;
    }

    .newsToNewTopRRboxR {
        width: 100%;
    }

    .newsTOnewTopRCenterR {
        width: 100%;
    }

    .newsToNewCenterL,
    .newsToNewCenterR {
        padding: 0.2rem 15px;
    }

    .newsTOnewBottomBoxTimeL h4,
    .newsTOnewBottomBoxTimeL span {
        padding-left: 16%;
    }
}

.teamlist .caseLdd .caseListdd {
    height: 98%;
}

.tag a {
    display: inline-block;
    border: 1px solid #dededd;
    padding: .03rem .1rem;
    margin-bottom: .04rem;
    margin-right: .05rem;
    color: #808080;
    font-size: .14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseLdd {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 .03rem .03rem;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 5px;
    border-radius: 5px 5px 0 0;
}

.caseLdd:hover .caseText {
    border-radius: 0 0 .03rem .03rem;
}

.caseLdd:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, .1);
}

.caseLdd .button_text_container {
    width: 0%;
    height: 0%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0258b8;
    z-index: -1;
    -webkit-transition: 1.2s;
    transition: 1.2s;
    border-radius: 50%;
}

.caseLdd:hover .button_text_container {
    top: 0;
    left: -25%;
    width: 150%;
    height: 150%;
    background: #333;
}

.big_img_box {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 0;
    transition: 0.5s;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999999999999999999999999999999;
    overflow: hidden;
}

.big_img_box .item {
    width: 990px;
    height: 650px;
    background-color: #fff;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    overflow: hidden;
}

.big_img_box .item .prev {
    opacity: 0;
    transition: 0.5s;
    width: 20%;
    height: 100%;
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    line-height: 46px;
    color: #fff;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999999;
    cursor: url(../img/caseNewjiantouL.png), default;
}

.big_img_box .item .next {
    opacity: 0;
    transition: 0.5s;
    width: 20%;
    height: 100%;
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    line-height: 46px;
    color: #fff;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999999;
    cursor: url(../img/caseNewjiantouR.png), default;
}

.big_img_box .item .pnon {
    opacity: 1;
}

.big_img_box .item #big_close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    opacity: 0;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    transition: 0.5s;
    background: url(../images/close_black.png) no-repeat center;
    outline: none;
    cursor: pointer;
    transition: 0.7s;
    z-index: 999999999999999999;
    background-size: 20px;
}

.big_img_box .item #big_close:hover {
    color: #666;
}

.big_img_box .item_open1 {
    height: 650px;
}

.big_img_box .item_open2 {
    width: 990px;
}

.big_img_box .item_open2 #big_close {
    opacity: 1;
}

.big_img_box .item_box {
    position: relative;
    width: 990px;
    height: 550px;
}

.big_img_box .item_box>a.honorImg1Alert {
    width: 990px;
    height: 550px;
    display: block;
    box-shadow: 0 0 0 rgb(0 0 0 / 0%);
}

.big_img_box .item_box .img {
    width: 990px;
    height: 550px;
    position: relative;
    display: block;
}

.big_img_box .honorMore1 {
    padding: 0 30px;
    line-height: 50px;
    font-size: 0.16rem;
}

.big_img_box .item_box .img img {
    transition: 0.7s;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.big_img_menu {
    height: 50px;
    border-bottom: 1px solid #f2f2f2;
}

.big_img_box .item_box .img img {
    width: 750px;
    height: 430.5px;
    width: 100%;
}

.big_img_box .item_box .text {
    border-top: none;
    transition: 0.5s;
    padding: 0 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.big_img_box .item_box .text a {
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0px;
    color: #4d4d4d;
    transition: 0.5s;
    transition: 0.7s;
}

.big_img_box .item_box .text a:hover {
    color: #ff770f;
}

.big_img_box .item_box .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
}

.big_img_box .item_box:hover .text a {
    color: #ff770f;
}

.open {
    height: 100%;
}

.item_box .caseLdd i .caseListdd img.caseImgList1 {
    width: 100%;
    height: 100%;
}

.item_box .caseLdd .caseText {
    position: absolute;
    height: 1.2rem;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, .7);
    padding: 0.1rem 4%;
}

#imgBox img {
    display: block;
    width: 80%;
    margin: 30px auto;
}

.Honoryingcang {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.teamlist li i {
    display: block;
    position: relative;
    padding: 64% 34%;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    background: #fff;
    border-radius: 5px 5px 0 0;
}

.slider-pro {
    font-family: 'Open Sans', Arial;
}

/* Example 5 */
#example5 .sp-thumbnail-image-container {
    width: 140px;
    height: 80px;
    overflow: hidden;
    float: left;
}

#example5 .sp-thumbnail-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#example5 .sp-thumbnail-text {
    width: 140px;
    float: right;
    height: 80px;
    padding: 15px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#example5 .sp-thumbnail-title {
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #333;
}

#example5 .sp-thumbnail-description {
    font-size: 14px;
    color: #333;
}

@media (max-width: 500px) {
    #example5 .sp-thumbnail {
        text-align: center;
    }

    #example5 .sp-thumbnail-image-container {
        display: none;
    }

    #example5 .sp-thumbnail-text {
        width: 120px;
    }

    #example5 .sp-thumbnail-title {
        font-size: 12px;
        text-transform: uppercase;
    }

    #example5 .sp-thumbnail-description {
        display: none;
    }
}

.caseBimg {
    position: fixed;
    top: -300%;
    left: 0;
    background: #171717;
    z-index: 9999999999999;
    width: 100vw;
    height: 0vh;
    padding-top: 0.4rem;
    display: block;
    -webkit-transition: .8s;
    transition: .8s;
    overflow: hidden;
}

.sp-image {
    width: 100%;
    height: 500px !important;
    object-fit: contain;
    background: #fff;
    display: block;
}

.sp-thumbnail-container {
    height: 100px !important;
}

.caseBimg i {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 999999;
    cursor: pointer;
}

.caseBimg i img {
    width: 0.3rem;
    height: 0.3rem;
    display: block;
}

/* .sp-slides-container,.sp-mask,.sp-slides,.sp-slide,.sp-image-container{    width: 800px !important;    height: 500px !important;    display: block;    left: 0 !important;} */
#play {
    width: 990px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0px auto 25px;
    height: 632px;
    overflow: hidden;
}

#play .change_a {
    width: 10%;
    height: 552px;
    position: absolute;
    top: 60px;
    z-index: 1;
    cursor: pointer;
    display: block;
    overflow: hidden;
    /* background: url(about:blank); */
}

#play .prev_a {
    left: 0;
    cursor: url(../img/caseNewjiantouL.png), default;
}

#play .next_a {
    right: 0;
    cursor: url(../img/caseNewjiantour.png), default;
}

#play .change_a span {
    width: 24px;
    height: 43px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -21px;
    display: none
}

#play .prev_a span {
    cursor: url(../img/caseNewjiantouL.png) default;
}

#play .next_a span {}

#play .img_ul {
    position: relative;
    z-index: 1;
}

#play .img_ul li {
    width: 990px;
    height: 612px;
}

#play .img_ul li img {
    display: block;
    width: 100%;
    height: 572px;
    object-fit: cover;
}

.img_ulText {
    font-size: 16px;
    color: #7b7b7b !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 15px;
    display: block;
    line-height: 60px;
}

.img_hdBg {
    width: 990px;
    background-color: #222222;
    overflow: hidden;
    height: 66px;
    padding: 0px 0;
    height: 128px;
    margin-top: 15px;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
}

.img_hd {
    width: 830px;
    background-color: #222222;
    overflow: hidden;
    height: 66px;
    padding: 13px 0;
    height: 99px;
    margin-top: 15px;
    margin: 0px auto;
    position: relative;
    box-sizing: content-box;
    overflow: hidden;
}

.img_hd ul {
    position: absolute;
    z-index: 1;
}

.img_hd ul li {
    float: left;
    width: 132px;
    height: 98px;
    border: 4px solid #444;
    cursor: pointer;
    margin: 0 15px 0 1px;
    overflow: hidden;
    *display: inline;
    padding: 1px;
    text-align: center;
    border-radius: 4px;
}

.img_hd ul li a {
    display: block;
    width: 126px;
    height: 92px;
    transform: translate(-1px, -1px);
}

.img_hd ul li img {
    width: 100%;
    height: 92px;
    display: block;
}

.img_hd ul li.on {
    border-color: rgb(45, 150, 233);
}

.img_hdBg .bottom_a {
    width: 44px;
    height: 44px;
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -22px;
    cursor: pointer;
    z-index: 10;
    background: #333;
    border-radius: 50%;
}

.img_hdBg .prev_a {
    left: 20px;
    background: #444 url(../images/s_gallery_2012110702l.png) no-repeat center;
}

.img_hdBg .next_a {
    background: #444 url(../images/s_gallery_2012110702r.png) no-repeat center;
    right: 20px;
}

#caseListAlert .caseLine {
    display: none;
}

.playfanhuiliebiao {
    display: block;
    color: #9c9c9c;
    background: #444;
    width: 138px;
    height: 36px;
    border-radius: 18px;
    margin: 20px auto;
    position: relative;
    z-index: 99999999999999999999999999999999;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    cursor: pointer;
}

.xiangceAlert {
    width: 1070px;
    margin: 0 auto;
    background: #000;
    padding-bottom: 1px;
}

@media(max-width:1660px) {
    .caseBimg {
        padding-top: 0.1rem;
    }

    .fanhuiliebiao {
        display: none;
    }
}

#caseListAlert li .caseListTitle {
    text-align: left;
}

#caseListAlert li p {
    text-align: left;
}

#caseListAlert li p a {
    color: #999;
    display: inline-block;
    padding-left: 10px;
    -webkit-transition: .5s;
    transition: .5s;
}

#caseListAlert li:hover p a {
    color: #fff;
}

.picture-content span {
    position: absolute;
    width: 100%;
    height: 40px;
    display: block;
    text-align: center;
    color: #333;
    line-height: 40px;
    top: -40px;
    border-bottom: 1px solid #f2f2f2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 20px;
}

.big_img_box .honorImg1 {
    padding: 0;
}

.searchBox {
    padding-bottom: 0.5rem;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei', arial, helvetica, clean, sans-serif;
}

body {
    font: 14px/1.231 'Microsoft YaHei', arial, helvetica, clean, sans-serif;
    color: #333;
    margin: 0;
    line-height: 1.5;
    background: #fff;
}

html {
    font-size: 100px;
}

*:before,
*:after {
    box-sizing: content-box;
}

:focus {
    outline: 1;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

a {
    color: #333;
    text-decoration: none;
}

a:link,
a:hover,
a:active,
a:visited {
    text-decoration: none;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

li,
ul {
    list-style-type: none;
}

img {
    border: none;
}

input,
textarea {
    outline: 0;
    border: 0;
    resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
dt,
i,
em {
    font-weight: normal;
    font-style: normal;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clearboth {
    clear: both;
}

.pageAddJoinTitle h4 {
    font-size: 0.4rem;
    font-weight: bold;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1;
    margin-bottom: 0.1rem;
}

.pageAddJoinTitle p {
    text-align: center;
    font-size: 0.24rem;
    font-weight: normal;
    position: relative;
}

.pageAddJoinTitle p b {
    font-weight: normal;
    position: relative;
    z-index: 2;
}

.pageAddJoinTitle p span {
    width: 1.3rem;
    height: 0.14rem;
    background: #ddd;
    margin: 0 auto;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.pageAddJoin_container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.pageAddJoin {
    overflow: hidden;
}

.pageAddJoin .pageAddJoinTop {
    background: url(../images/pageaddjointopbg.jpg) no-repeat center top;
    padding-top: 0.42rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL {
    flex: 0 0 65%;
    justify-content: center;
    float: left;
    width: 65%;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
    padding-bottom: 1.9rem;
    position: relative;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd {
    flex: 0 0 32.5%;
    justify-content: center;
    float: left;
    width: 32.5%;
    background: #fff;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd h4 {
    height: 1.44rem;
    line-height: 1.44rem;
    text-align: center;
    font-size: 0.6rem;
    font-weight: bold;
    border-bottom: 1px solid #efefef;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.3rem 0.3rem;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i {
    flex: 0 0 0.29rem;
    justify-content: center;
    float: left;
    width: 0.29rem;
    height: 0.28rem;
    position: relative;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i img {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i img:nth-child(2) {
    width: 100%;
    height: 100%;
    display: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i::after {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    background: #119b84;
    position: absolute;
    bottom: -0.05rem;
    right: -0.05rem;
    border-radius: 50%;
    opacity: 0.5;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li b {
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 1.4;
    padding-left: 0.26rem;
    flex: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li b::before {
    content: "";
    width: 0.3rem;
    height: 0.03rem;
    display: block;
    background: #eeeeee;
    margin-bottom: 0.12rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on {
    background: #119b84;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on i {
    flex: 0 0 0.29rem;
    justify-content: center;
    float: left;
    width: 0.29rem;
    height: 0.28rem;
    position: relative;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on i img {
    display: none;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on i img:nth-child(2) {
    width: 100%;
    height: 100%;
    display: block;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on i::after {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    background: #fff;
    position: absolute;
    bottom: -0.05rem;
    right: -0.05rem;
    border-radius: 50%;
    opacity: 0.5;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li.on b {
    color: #fff;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd {
    flex: 0 0 67.5%;
    justify-content: center;
    float: left;
    width: 67.5%;
    background: #fff;
    position: relative;
    box-sizing: border-box;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList {
    width: 100%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.3rem 0.8rem 0.3rem;
    border-bottom: 1px solid #efefef;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle h4 {
    flex: 0 0 4em;
    justify-content: center;
    float: left;
    width: 4em;
    font-size: 0.24rem;
    font-weight: bold;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle b {
    font-size: 0.14rem;
    font-weight: normal;
    color: #bbbbbb;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle .pageAddJoin_containerLBoxListMenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle .pageAddJoin_containerLBoxListMenu i {
    margin-top: 0.18rem;
    font-size: 0.16rem;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 0.03rem 0.1rem;
    color: #777777;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListContent {
    padding: 0.4rem 0.8rem 0.3rem;
    line-height: 0.36rem;
    font-size: 0.16rem;
    color: #777;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerL::after {
    content: "";
    width: 4px;
    height: 100%;
    background: #efefef;
    position: absolute;
    top: 0;
    left: 32%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerR {
    flex: 0 0 29%;
    justify-content: center;
    float: left;
    width: 29%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop {
    padding-bottom: 2rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop h4 {
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 0.46rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop h5 {
    font-size: 0.28rem;
    line-height: 1;
    color: #555555;
    font-weight: bold;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop p {
    color: #666666;
    padding-top: 0.22rem;
    line-height: 1;
    font-size: 0.2rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom {
    width: 100%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom h5 {
    font-size: 0.2rem;
    font-weight: bold;
    width: 100%;
    padding: 0.52rem 0 0.42rem;
    line-height: 1;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.26rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomIco {
    flex: 0 0 0.3rem;
    justify-content: center;
    float: left;
    width: 0.3rem;
    height: 0.3rem;
    background: #119b84;
    border-radius: 50%;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomIco img {
    width: 0.16rem;
    height: 0.16rem;
    display: block;
    margin: 7px auto;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText {
    flex: 1;
    padding-left: 0.2rem;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox i {
    font-size: 0.16rem;
    line-height: 0.3rem;
    color: #888888;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox span {
    font-size: 0.24rem;
    line-height: 0.3rem;
    color: #555;
}

.pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox em {
    font-size: 0.18rem;
    line-height: 0.3rem;
    width: 73%;
    color: #555;
}

.pageAddJoin .pageAddJoinBottom {
    margin-top: 1rem;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox {
    margin-top: 0.5rem;
    width: 100%;
    background: #f9f9f9;
    padding: 0.001rem 0 0.48rem;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL {
    flex: 0 0 74.5%;
    justify-content: center;
    float: left;
    width: 74.5%;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li {
    flex: 0 0 31.4%;
    justify-content: center;
    float: left;
    width: 31.4%;
    position: relative;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input {
    width: 100%;
    height: 0.5rem;
    display: block;
    padding: 0 0.3rem 0 0.5rem;
    box-sizing: border-box;
    font-size: 0.16rem;
    color: #666666;
    margin-bottom: 0.2rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 15px center;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLName {
    background-image: url(../images/pageaddjoinbottomboxlname.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLTel {
    background-image: url(../images/pageaddjoinbottomboxltel.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLAge {
    background-image: url(../images/pageaddjoinbottomboxlage.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLSex {
    background-image: url(../images/pageaddjoinbottomboxlsex.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLEducation {
    background-image: url(../images/pageaddjoinbottomboxleducation.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLSchool {
    background-image: url(../images/pageaddjoinbottomboxlschool.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLMajor {
    background-image: url(../images/pageaddjoinbottomboxlmajor.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLPosition {
    background-image: url(../images/pageaddjoinbottomboxlposition.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input.pageAddJoinBottomBoxLVerification {
    background-image: url(../images/pageaddjoinbottomboxlverification.png);
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li .pageAddJoinBottomBoxLVerificationcode {
    background: #333;
    width: 0.9rem;
    height: 0.36rem;
    position: absolute;
    top: 6px;
    right: 5px;
    display: block;
    z-index: 2;
    cursor: pointer;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR {
    flex: 0 0 21.3%;
    justify-content: center;
    float: left;
    width: 21.3%;
    position: relative;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR img {
    display: block;
    width: 100%;
    position: absolute;
    top: -1.8rem;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR .pageAddJoinBottomBoxRButton {
    width: 100%;
    height: 0.5rem;
    border: 0;
    margin-top: 1.4rem;
    background: #119b84;
    color: #fff;
    font-size: 0.16rem;
    border-radius: 0.25rem;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR .pageAddJoinBottomBoxRButton:active {
    transform: translateY(-5px);
}

.productsDownload {}

.productsDownload h4 {
    font-size: 0.16rem;
    color: #666;
    line-height: 1;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}


.productsDownload ul {
    min-width: 4rem;
    justify-content: left;
    line-height: 0.4rem;
    position: relative;
    overflow: hidden;
}

.productsDownload ul:before {
    content:
        "";
    width: 1px;
    height: 24px;
    background: #ededed;
    position: absolute;
    top: 50%;
    left: 200px;
    transform: translateY(-50%);
}

.productsDownload ul::after {
    content: "";
    clear: both;
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
    vertical-align: middle;
}

.productsDownload ul li:nth-child(1) {
    float: left;
    min-width: 200px;
    border: 1px solid #ededed;
    border-right: 0;
}

.productsDownload ul li:nth-child(2) {
    float: left;
    min-width: 200px;
    border: 1px solid #ededed;
    border-left: 0;
}


.productsDownload p {}

.productsDownload ul li i {
    width: 6px;
    height: 6px;
    background: #999999;
    border-radius: 50%;
}

.productsDownload ul li img {
    height: 24px;
    align-items: center;
}

.productsDownload ul li span {
    color: #333333;
    padding: 0 0.3rem 0 0.1rem;
}

.productsDownload ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.productsDownload p {
    margin: 0.3rem 0;
    line-height: 0.3rem;
}

.productsDownload p i {
    color: #666666;
}

.productsDownload p a {
    font-size: 0.14rem;
    color: rgb(46, 85, 214);
    margin-right: 0.1rem;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
}

.productsDownload p a:hover {
    transform: translateY(-5px);
}

.search_boxCenter .container {
    max-width: 1200px;
    margin: 0 auto;
}

.search_boxCenter .container .search_boxCenterTop {
    margin-top: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.3rem;
}

.search_boxCenter .container .search_boxCenterTop p i {
    font-size: 0.14rem;
}

.search_boxCenter .container .search_boxCenterTop p a {
    color: #119b84;
    margin-right: 0.1rem;
    display: inline-block;
}

.search_boxCenter .container .search_boxCenterBox {
    margin-bottom: 0.5rem;
}

.search_boxCenter .container .search_boxCenterBox ul li {
    margin-top: 0.3rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.3rem;
    box-sizing: border-box;
    border: solid 1px #f5f5f5;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxImg {
    position: relative;
    flex: 0 0 27.4%;
    justify-content: center;
    float: left;
    width: 27.4%;
    padding: 10% 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxImg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText {
    flex: 0 0 70%;
    justify-content: center;
    float: left;
    width: 70%;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextTitle {
    display: block;
    font-weight: bold;
    font-size: 0.2rem;
    color: #119b84;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.2rem 0;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxL {
    flex: 0 0 26%;
    justify-content: center;
    float: left;
    width: 26%;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxL i {
    font-size: 0.14rem;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxL a {
    color: #119b84;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxR {
    flex: 0 0 70%;
    justify-content: center;
    float: left;
    width: 70%;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxR i {
    font-size: 0.14rem;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxR a {
    color: #119b84;
    margin-right: 0.1rem;
    display: inline-block;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox p {
    font-size: 0.14rem;
    line-height: 2;
    color: #999999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 0.84rem;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxRMore {
    width: 1.33rem;
    height: 0.36rem;
    display: block;
    border-radius: 0.05rem;
    line-height: 0.36rem;
    padding-left: 0.2rem;
    box-sizing: border-box;
    color: #fff;
    margin-top: 0.2rem;
    background: #cccccc url(../images/search_boxcenterboxtextboxrmore.png) no-repeat 80% center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxRMore:hover {
    transform: translateY(-5px);
    background: #119b84 url(../images/search_boxcenterboxtextboxrmore.png) no-repeat 80% center;
}

.search_boxCenter .container .search_boxCenterBox ul li:hover {
    box-shadow: 0px 0px 25px 0px rgba(3, 0, 0, 0.08);
}

.search_boxCenter .container .search_boxCenterBox ul li:hover .search_boxCenterBoxImg img {
    transform: scale(1.1);
}

@media (max-width: 980px) {
    .search_boxCenter .container .search_boxCenterTop {
        margin-top: 0;
        padding: 0.1rem;
    }

    .search_boxCenter .container .search_boxCenterTop p i {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .search_boxCenter .container .search_boxCenterBox ul {
        padding: 0 0.15rem;
    }

    .search_boxCenter .container .search_boxCenterBox ul li {
        margin-top: 0.15rem;
        padding: 0.1rem;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxImg {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
        padding: 36% 0;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxL {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter {
        padding: 0.1rem 0;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextBox .search_boxCenterBoxTextBoxCenter .search_boxCenterBoxTextBoxR {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
        margin-top: 0.1rem;
    }

    .search_boxCenter .container .search_boxCenterBox ul li .search_boxCenterBoxText .search_boxCenterBoxTextTitle {
        margin-top: 0.2rem;
    }
}



@media (max-width: 980px) {
    .pageAddJoin_container {
        padding: 0 0.15rem;
    }

    .pageAddJoinTitle h4 {
        font-size: 0.3rem;
    }

    .pageAddJoinTitle p {
        font-size: 0.2rem;
    }

    .pageAddJoinTitle p span {
        width: 1rem;
        height: 0.08rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
        padding-bottom: 0rem;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL::after {
        display: none;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li b::before {
        display: none;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li {
        padding: 0.1rem;
        width: 50%;
        float: left;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li i {
        display: none;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li b {
        padding: 0 0.1rem;
        font-size: 0.16rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd ul li:nth-child(2n-1) {
        border-right: 1px solid #efefef;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListTitle {
        padding: 0.3rem 0.15rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .bd .pageAddJoin_containerLBoxList .pageAddJoin_containerLBoxListContent {
        padding: 0.3rem 0.15rem;
    }

    .pageAddJoin .pageAddJoinTop {
        background: #f2f2f2;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
        margin-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop h4 {
        font-size: 0.24rem;
        padding-bottom: 0.2rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop p {
        font-size: 0.16rem;
        width: 100%;
        margin-top: 0.1rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop p::before {
        content: "";
        clear: both;
        visibility: hidden;
        display: block;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop {
        padding-bottom: 0.1rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText {
        padding-left: 0.1rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox em {
        font-size: 0.16rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom ul li .pageAddJoin_containerRBottomText .pageAddJoin_containerRBottomTextBox span {
        font-size: 0.18rem;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR img {
        display: none;
    }

    .pageAddJoin .pageAddJoinBottom {
        margin-top: 0.3rem;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox {
        margin-top: 0.3rem;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li input {
        height: 0.4rem;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxL ul li .pageAddJoinBottomBoxLVerificationcode {
        top: 2px;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR .pageAddJoinBottomBoxRButton {
        margin-top: 0.2em;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox .pageAddJoinBottomBoxR {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .pageAddJoin .pageAddJoinBottom .pageAddJoinBottomBox {
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerL .pageAddJoin_containerLBox .hd h4 {
        font-size: 0.3rem;
        line-height: initial;
        height: auto;
        padding: 0.15rem 0;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop h5 {
        display: inline-block;
        float: right;
        display: none;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerR .pageAddJoin_containerRTop h4 {
        display: inline-block;
        float: left;
    }

    .pageAddJoin .pageAddJoinTop .pageAddJoin_containerRBottom h5 {
        padding: 0.3rem 0;
    }
}


.pro_tel {
    display: inline-block;
    font-size: 0.15rem;
    color: #333;
    position: absolute;
    right: -40px;
    margin-top: .3rem;
}

.pro_tel i {
    font-size: 0.2rem;
    color: #333;
    font-weight: bold;
}


.caseproductTransform {
    float: right;
}

.caseproductTransform ul li {
    width: 0.32rem;
    height: 0.32rem;
    float: left;
    border: 1px solid #ddd;
    margin-right: 0.15rem;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransform ul li.caseproductTransform1 {
    background: #fff url(../images/caseproducttransform1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform1.on {
    border-color: #333;
    background: #333 url(../images/caseproducttransform1_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform1:hover {
    border-color: #333;
    background: #333 url(../images/caseproducttransform1_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform2 {
    background: #fff url(../images/caseproducttransform2.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform2:hover {
    border-color: #333;
    background: #333 url(../images/caseproducttransform2_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform2.on {
    border-color: #333;
    background: #333 url(../images/caseproducttransform2_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform3 {
    background: #fff url(../images/caseproducttransform3.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform3:hover {
    border-color: #333;
    background: #333 url(../images/caseproducttransform3_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform3.on {
    border-color: #333;
    background: #333 url(../images/caseproducttransform3_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform4 {
    background: #fff url(../images/caseproducttransform4.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform4:hover {
    border-color: #333;
    background: #333 url(../images/caseproducttransform4_1.png) no-repeat center;
}

.caseproductTransform ul li.caseproductTransform4.on {
    border-color: #333;
    background: #333 url(../images/caseproducttransform4_1.png) no-repeat center;
}

.caseproductTransformBox {
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul {
    padding-left: 0.2rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li:nth-child(2n) {
    background: #fbfbfb;
}

.caseproductTransformBox ul li .caseproductTransformBoxL {
    flex: 0 0 27.5%;
    justify-content: center;
    float: left;
    width: 27.5%;
    border: 1px solid #ddd;
    border-radius: 0.05rem;
    padding: 0.1rem;
    background: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxL a {
    display: block;
    position: relative;
    padding: 38%;
    background: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
}

.caseproductTransformBox ul li .caseproductTransformBoxL a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxR {
    flex: 0 0 69.4%;
    justify-content: center;
    float: left;
    width: 69.4%;
    padding-right: 3%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxR .caseproductTransformBoxRTitle {
    padding-top: 0.3rem;
    display: block;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.18rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxR p {
    padding-top: 0.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxR p i {
    flex: 0 0 4%;
    justify-content: center;
    float: left;
    width: 4%;
    height: 2px;
    background: #333;
    margin-top: 0.12rem;
}

.caseproductTransformBox ul li .caseproductTransformBoxR p span {
    flex: 0 0 92%;
    justify-content: center;
    float: left;
    width: 92%;
    font-size: 0.14rem;
    line-height: 0.28rem;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 0.6rem;
}

.caseproductTransformBox ul li .caseproductTransformBoxR .caseproductTransformBoxRMore {
    font-size: 0;
    display: block;
    width: 0.86rem;
    height: 0.32rem;
    float: right;
    margin-top: 0.2rem;
    background: url(../images/caseproducttransformboxjt1.png) no-repeat center;
    -webkit-transition: .5s;
    transition: .5s;
}

.caseproductTransformBox ul li .caseproductTransformBoxR::after {
    content: "";
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
    display: none;
    overflow: hidden;
}

.caseproductTransformBox.caseproductTransformBox2 ul {
    width: 100%;
    /* display: flex; */
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0;
}

.caseproductTransformBox.caseproductTransformBox2 ul li {
    flex: 0 0 31%;
    justify-content: center;
    float: left;
    width: 31%;
    border: 1px solid #eee;
    margin: 0;
    margin-top: 0.3rem;
    padding: 0.1rem;
    display: block;
    padding-bottom: 0;
    margin-right: 3.5%;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxL {
    border: 0;
    padding: 0;
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
}

.caseproductTransformBox.caseproductTransformBox2 ul li:nth-child(3n){
    margin-right:0;
}
.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxL img {
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR {
    border: 0;
    padding: 0;
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR .caseproductTransformBoxRTitle {
    display: block;
    padding-top: 0.16rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR p i {
    display: none;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR p span {
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR a.caseproductTransformBoxRMore {
    width: 1.17rem;
    height: 0.34rem;
    border-radius: 100% 100% 0 0;
    margin: 0.1rem auto 0.1rem;
    float: initial;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.caseproductTransformBox.caseproductTransformBox2 ul li .caseproductTransformBoxR a.caseproductTransformBoxRMore::after {
    content: "";
    background: #fff url(../images/caseproducttransformboxjt2.png) no-repeat center 25%;
    position: absolute;
    width: 100%;
    height: 200%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border-radius: 50%;
}

.caseproductTransformBox.caseproductTransformBox2 ul li:hover .caseproductTransformBoxL img {
    transform: scale(1.05);
}

.caseproductTransformBox.caseproductTransformBox2 ul li:hover .caseproductTransformBoxR a.caseproductTransformBoxRMore {
    margin: 0.2rem auto 0rem;
    overflow: hidden;
    position: relative;
}

.caseproductTransformBox.caseproductTransformBox2 ul li:nth-child(2n) {
    background: #fff;
}

.caseproductTransformBox.caseproductTransformBox3 ul {
    width: 100%;
    display: block;
    padding-left: 0;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) {
    flex: 0 0 31%;
    justify-content: center;
    float: left;
    width: 31%;
    border: 1px solid #eee;
    margin: 0;
    margin-top: 0.3rem;
    padding: 0.1rem;
    display: block;
    padding-bottom: 0;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxL {
    border: 0;
    padding: 0;
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxL img {
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR {
    border: 0;
    padding: 0;
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR .caseproductTransformBoxRTitle {
    display: block;
    padding-top: 0.16rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR p i {
    display: none;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR p span {
    flex: 0 0 100%;
    justify-content: center;
    float: left;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR a.caseproductTransformBoxRMore {
    width: 1.17rem;
    height: 0.34rem;
    border-radius: 100% 100% 0 0;
    margin: 0.2rem auto 0rem;
    float: initial;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2) .caseproductTransformBoxR a.caseproductTransformBoxRMore::after {
    content: "";
    background: #333 url(../images/caseproducttransformboxjt2.png) no-repeat center 25%;
    position: absolute;
    width: 100%;
    height: 200%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border-radius: 50%;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2):hover .caseproductTransformBoxL img {
    transform: scale(1.05);
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2):hover .caseproductTransformBoxR a.caseproductTransformBoxRMore {
    margin: 0.1rem auto 0.1rem;
    overflow: hidden;
    position: relative;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-2):hover .caseproductTransformBoxR a.caseproductTransformBoxRMore::after {
    content: "";
    background: #333 url(../images/caseproducttransformboxjt2-1.png) no-repeat center 25%;
    position: absolute;
    width: 100%;
    height: 200%;
    border-radius: 50%;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-1),
.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) {
    float: right;
    width: 67%;
    background: #fbfbfb;
    padding: 0.13rem;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-1) .caseproductTransformBoxL,
.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) .caseproductTransformBoxL {
    padding: 0;
    flex: 0 0 32.5%;
    justify-content: center;
    float: left;
    width: 32.5%;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-1) .caseproductTransformBoxR,
.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) .caseproductTransformBoxR {
    flex: 0 0 65.5%;
    justify-content: center;
    float: left;
    width: 65.5%;
    padding-right: 0%;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-1) .caseproductTransformBoxR p span,
.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) .caseproductTransformBoxR p span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n-1) .caseproductTransformBoxR .caseproductTransformBoxRMore,
.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) .caseproductTransformBoxR .caseproductTransformBoxRMore {
    background: url(../images/caseproducttransformboxjt2.png) no-repeat center;
    margin-top: 0;
}

.caseproductTransformBox.caseproductTransformBox4 ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0;
}

.caseproductTransformBox.caseproductTransformBox4 ul li {
    flex: 0 0 48%;
    justify-content: center;
    float: left;
    width: 48%;
    border: 1px solid #eee;
    margin: 0;
    margin-top: 0.3rem;
    padding: 0.2rem 0.1rem;
    display: block;
    border-radius: 0.1rem;
}

.caseproductTransformBox.caseproductTransformBox4 ul li:nth-child(2n) {
    background: transparent;
}

.caseproductTransformBox.caseproductTransformBox4 ul li::after {
    content: "";
    clear: both;
    visibility: hidden;
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxL {
    flex: 0 0 41%;
    justify-content: center;
    width: 41%;
    float: left;
    padding: 0;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR {
    padding-right: 0%;
    flex: 0 0 53%;
    justify-content: center;
    float: left;
    width: 53%;
    float: right;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR .caseproductTransformBoxRTitle {
    padding-top: 0.08rem;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR p {
    padding-top: 0.1rem;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR p i {
    display: none;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR p span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 0.24rem;
    height: 0.5rem;
}

.caseproductTransformBox.caseproductTransformBox4 ul li .caseproductTransformBoxR .caseproductTransformBoxRMore {
    float: left;
    margin-top: 0.1rem;
    background: url(../images/caseproducttransformboxjt4.png) no-repeat center left;
    padding-left: 0.3rem;
    font-size: 0.15rem;
    line-height: 0.32rem;
    color: #999999;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.caseproductTransformBox.caseproductTransformBox3 ul li:nth-child(3n) {
    margin-top: 0.28rem;
}


.caseproductTransformBox ul li:hover .caseproductTransformBoxL img {
    transform: scale(1.1);
}

.caseproductTransformBox ul li:hover .caseproductTransformBoxR .caseproductTransformBoxRTitle {
    color: #0258b8;
}

.caseproductTransformBox ul li:hover .caseproductTransformBoxR p i {
    background: #0258b8;
}

.caseproductTransformBox ul li:hover .caseproductTransformBoxR .caseproductTransformBoxRMore {
    transform: translateX(-5px);
}

.caseproductTransformBox.caseproductTransformBox2 ul li:hover .caseproductTransformBoxR a.caseproductTransformBoxRMore {
    transform: translateX(0);
}

.caseproductTransformBox.caseproductTransformBox2 ul li:hover .caseproductTransformBoxR a.caseproductTransformBoxRMore::after {
    content: "";
    background: #333 url(../images/caseproducttransformboxjt2-1.png) no-repeat center 25%;
    position: absolute;
    width: 100%;
    height: 200%;
    border-radius: 50%;

}




@media(max-width: 768px) {
    .page_message {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .page_message h4 {
        font-size: 0.24rem;
        padding-bottom: 0.3rem;
    }

    .page_messageCenter {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-top: 0.2rem;
    }

    .page_messageCenter h5 {
        font-size: 0.18rem;
    }

    .page_messageCenter ul {
        margin-top: 0;
    }

    .page_messageCenter ul li.page_message_row2 {
        width: 100%;
        margin-top: 0.2rem;
    }

    .page_messageCenter ul li.page_message_row1 {
        width: 100%;
        margin-top: 0.2rem;
    }
}




.listproduct5 {
    margin-top: 0.38rem;
    padding-bottom: 0.8rem;
}

.listproduct5 .container {
    padding: 0;
}

.listproduct5 .listproduct5Box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL {
    flex: 0 0 26.847%;
    justify-content: center;
    float: left;
    width: 26.847%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: url(../images/listproduct5lbg.png) no-repeat center bottom;
    background-size: cover;
    padding-bottom: 0.3rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL {
    flex: 0 0 24%;
    justify-content: center;
    float: left;
    width: 24%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL span {
    padding: 0.14rem 0;
    width: 100%;
    display: block;
    background: #fff;
    font-size: 0.14rem;
    display: inline-block;
    text-transform: uppercase;
    color: #999999;
    line-height: 0.24rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL a {
    display: block;
    background: #e9e9e9;
    padding: 0.3rem 0;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL a img {
    display: block;
    width: 0.21rem;
    height: 0.21rem;
    margin: 0 auto;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL a em {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    display: block;
    padding-top: 0.1rem;
    width: 1em;
    margin: 0 auto;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR {
    flex: 0 0 76%;
    justify-content: center;
    float: left;
    width: 73%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRL {
    padding: 0.15rem 0.1rem;
    box-sizing: border-box;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    flex: 0 0 80%;
    justify-content: center;
    float: left;
    width: 80%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRL i {
    font-size: 0.12rem;
    color: #c2c2c2;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRL a {
    font-size: 0.16rem;
    padding-top: 0.1rem;
    line-height: 1.4;
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRR {
    flex: 0 0 18%;
    justify-content: center;
    float: left;
    width: 18%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRR i {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: #d8d8d8;
    display: block;
    margin: 0.4rem auto 0;
    position: relative;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRR i::after {
    content: "";
    width: 0.1rem;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li h6 .listproduct5BoxLBoxRR i::before {
    content: "";
    height: 0.1rem;
    width: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox {
    padding: 0.1rem 0.15rem;
    display: none;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p {
    position: relative;
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin: 0.13rem 0 0;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p::after {
    content: "";
    width: 80%;
    height: 1px;
    background: #dddddd;
    position: absolute;
    left: 20%;
    top: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #dddddd;
    position: absolute;
    left: 0%;
    bottom: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p a {
    display: block;
    font-size: 0.14rem;
    color: #666666;
    position: relative;
    padding: 0.12rem 0.3rem 0.12rem 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background: url(../images/listproduct5boxlboxrboxjt.png) no-repeat 96% center;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p a::after {
    content: "";
    position: absolute;
    top: 40%;
    height: 60%;
    width: 1px;
    background: #ddd;
    left: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p a::before {
    content: "";
    position: absolute;
    top: 0%;
    height: 100%;
    width: 1px;
    background: #ddd;
    right: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p i {
    width: 100%;
    height: 100%;
    position: absolute;
    perspective: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p i::after {
    content: "";
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: absolute;
    top: 40%;
    transform: translateY(-0.07rem);
    left: -3px;
    z-index: 2;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p i::before {
    content: "";
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: absolute;
    left: 20%;
    transform: translateX(-0.07rem);
    top: -3px;
    z-index: 2;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover::after {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover::before {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover a {
    color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover a::after {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover a::before {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover i::after {
    border-color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li .listproduct5BoxLBoxRBox p:hover i::before {
    border-color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 {
    background: #555;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 .listproduct5BoxLBoxRL a {
    color: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 .listproduct5BoxLBoxRR i {
    background: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 .listproduct5BoxLBoxRR i::before {
    background: transparent;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active h6 .listproduct5BoxLBoxRR i::after {
    background: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active .listproduct5BoxLBoxRBox {
    display: block !important;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase {
    margin-top: 0.3rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL {
    height: 0.65rem;
    background: #333;
    width: 22%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL em {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL em img {
    width: 30%;
    display: block;
    margin: 0 auto;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR {
    width: 78%;
    border: 1px solid #e3e3e3;
    position: relative;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR a {
    display: block;
    line-height: 0.63rem;
    padding-left: 16%;
    font-size: 0.22rem;
    color: #333333;
    font-weight: bold;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR em {
    text-transform: uppercase;
    font-size: 0.12rem;
    color: #999999;
    padding: 0 0.1rem;
    position: absolute;
    right: 0.1rem;
    bottom: -0.06rem;
    background: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox {
    position: relative;
    padding-top: 0.15rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li {
    position: relative;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a {
    padding: 39% 0;
    display: block;
    overflow: hidden;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a .listproduct5BoxLboxCaseTitle {
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    padding: 0 2%;
    width: 100%;
    box-sizing: border-box;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a .listproduct5BoxLboxCaseTitle i {
    display: block;
    font-size: 0.18rem;
    line-height: 2;
    padding-right: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    position: relative;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a .listproduct5BoxLboxCaseTitle i::after {
    content: ">";
    width: 0.18rem;
    height: 0.18rem;
    display: block;
    background: #333;
    border-radius: 50%;
    position: absolute;
    right: 0;
    z-index: 2;
    top: 0.09rem;
    font-size: 0.12rem;
    font-family: Verdana;
    line-height: 0.18rem;
    text-align: center;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a .listproduct5BoxLboxCaseTitle em {
    font-size: 0.14rem;
    line-height: 0.2rem;
    color: #c9c7c7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a:hover img {
    transform: scale(1.05);
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase .listproduct5BoxLBoxCaseBox ul li a:hover .listproduct5BoxLboxCaseTitle {
    transform: translateY(-5px);
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews {
    margin-top: 0.3rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL {
    height: 0.65rem;
    background: #333;
    width: 22%;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL em {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleL em img {
    width: 30%;
    display: block;
    margin: 0 auto;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR {
    width: 78%;
    border: 1px solid #e3e3e3;
    position: relative;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR a {
    display: block;
    line-height: 0.63rem;
    padding-left: 16%;
    font-size: 0.22rem;
    color: #333333;
    font-weight: bold;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews .listproduct5BoxLBoxCaseTitle .listproduct5BoxLBoxCaseTitleR em {
    text-transform: uppercase;
    font-size: 0.12rem;
    color: #999999;
    padding: 0 0.1rem;
    position: absolute;
    right: 0.1rem;
    bottom: -0.06rem;
    background: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews ul {
    margin-top: 0.15rem;
    background: #fbfbfb;
    padding: 0.12rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews ul li {
    height: 0.56rem;
    border-bottom: 1px dashed #e0e0e0;
    line-height: 0.56rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews ul li a {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.16rem;
    color: #666666;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews ul li a::before {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    content: "—";
    color: #333;
    margin-right: 0.15rem;
    line-height: 0.56rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews ul li a:hover {
    color: #333;
    transform: translateX(5px);
}

.listproduct5 .listproduct5Box .listproduct5BoxR {
    flex: 0 0 70.5%;
    justify-content: center;
    float: left;
    width: 70.5%;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopL {
    flex: 0 0 38.2%;
    justify-content: center;
    float: left;
    width: 38.2%;
    padding: 5px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopL ul li {
    padding: 90% 0;
    position: relative;
    display: block;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopL ul li img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    background: #f2f2f2;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR {
    flex: 0 0 58.5%;
    justify-content: center;
    float: left;
    width: 58.5%;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop {
    background: #fbfbfb;
    padding: 0.3rem 0.3rem 0.2rem;
    box-sizing: border-box;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop h4 {
    font-size: 0.3rem;
    line-height: 1.5;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop span {
    line-height: 1;
    display: block;
    padding: 0.1rem 0 0.15rem;
    font-size: 0.16rem;
    color: #999999;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop i.listproduct5BoxRTopRTopLine {
    display: block;
    width: 100%;
    height: 1px;
    background: #eeeeee;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop p.listproduct5BoxRTopRTopText {
    font-size: 0.16rem;
    line-height: 0.36rem;
    color: #666666;
    padding-top: 0.1rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    justify-content: left;
    align-items: center;
    padding-top: 0.17rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageBth {
    height: 0.4rem;
    line-height: 0.4rem;
    border: 1px solid #dddddd;
    padding: 0 0.32rem;
    font-size: 0.16rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageBth span {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageBth span i {
    width: 0.22rem;
    height: 0.18rem;
    display: inline-block;
    margin-right: 0.1rem;
    background: url(../images/listproduct5boxrtoprtopmessagebth.png) no-repeat center;
    background-size: 0.2rem 0.18rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageBth:hover {
    transform: translateY(-5px);
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel {
    height: 0.4rem;
    line-height: 0.4rem;
    border: 1px solid #333;
    padding: 0 0.32rem;
    font-size: 0.16rem;
    margin-left: 0.1rem;
    background: #333;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel span {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    font-size: 0.2rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel span i {
    width: 0.22rem;
    height: 0.18rem;
    display: inline-block;
    margin-right: 0.1rem;
    background: url(../images/listproduct5boxrtoprtopmessagetel.png) no-repeat center;
    background-size: 0.17rem 0.17rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel:hover {
    transform: translateY(-5px);
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop i.listproduct5BoxRTopRTopLine2 {
    display: block;
    width: 100%;
    height: 1px;
    background: #eeeeee;
    margin-top: 0.34rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle h5 {
    padding: 0.2rem 0;
    font-size: 0.2rem;
    line-height: 1;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p {
    position: relative;
    flex: 0 0 30%;
    justify-content: center;
    float: left;
    width: 30%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin-right: 3.3333333%;
    margin-bottom: 0.1rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p::after {
    content: "";
    width: 70%;
    height: 1px;
    background: #dddddd;
    position: absolute;
    left: 30%;
    top: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #dddddd;
    position: absolute;
    left: 0%;
    bottom: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p a {
    display: block;
    font-size: 0.14rem;
    color: #666666;
    position: relative;
    padding: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-align: center;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p a::after {
    content: "";
    position: absolute;
    top: 40%;
    height: 60%;
    width: 1px;
    background: #ddd;
    left: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p a::before {
    content: "";
    position: absolute;
    top: 0%;
    height: 100%;
    width: 1px;
    background: #ddd;
    right: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p i {
    width: 100%;
    height: 100%;
    position: absolute;
    perspective: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p i::after {
    content: "";
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: absolute;
    top: 40%;
    transform: translateY(-0.07rem);
    left: -3px;
    z-index: 2;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p i::before {
    content: "";
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: absolute;
    left: 30%;
    transform: translateX(-0.07rem);
    top: -3px;
    z-index: 2;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover::after {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover::before {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover a {
    color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover a::after {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover a::before {
    background: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover i::after {
    border-color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p:hover i::before {
    border-color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.18rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomL {
    flex: 0 0 7.5%;
    justify-content: center;
    float: left;
    width: 7.5%;
    background: #f2f2f2 url(../images/listproduct5boxrtoprbottoml.png) no-repeat center;
    background-size: 0.15rem;
    position: relative;
    padding: 9.326% 0;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomL:hover {
    background: #333 url(../images/listproduct5boxrtoprbottoml2.png) no-repeat center;
    background-size: 0.15rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC {
    flex: 0 0 76%;
    justify-content: center;
    float: left;
    width: 76%;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li {
    cursor: pointer;
    border: 1px solid #dddddd;
    padding: 5px;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li  em{
    padding: 84% 0;
    position: relative;
    display: block; 
}


.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    background: #f2f2f2;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li.active-border img {
    border-color: #333;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomR {
    flex: 0 0 7.5%;
    justify-content: center;
    float: left;
    width: 7.5%;
    background: #f2f2f2 url(../images/listproduct5boxrtoprbottomr.png) no-repeat center;
    background-size: 0.15rem;
    position: relative;
    padding: 9.326% 0;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomR:hover {
    background: #333 url(../images/listproduct5boxrtoprbottomr2.png) no-repeat center;
    background-size: 0.15rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom {
    margin-top: 0.3rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle {
    width: 100%;
    height: 0.6rem;
    background: #fbfbfb;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT {
    background: #333;
    height: 100%;
    display: table;
    padding: 0 0.3rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT i {
    float: left;
    width: 0.28rem;
    height: 0.28rem;
    margin-top: 0.12rem;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT i img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT em {
    line-height: 0.6rem;
    padding-left: 0.2rem;
    font-size: 0.24rem;
    color: #fff;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomBox {
    margin-top: 0.3rem;
    border-bottom: 1px solid #dededd;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomBox img {
    max-width: 100%;
    display: inline-block;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomBox p {
    font-size: 0.15rem;
    color: #666;
    line-height: 2;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomBox span {
    font-size: 0.15rem;
    color: #666;
    line-height: 2;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li {
    float: left;
    width: 31.11111%;
    margin-right: 3.3333%;
    border: 1px solid #ddd;
    margin-bottom: 0.3rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li:nth-child(3n) {
    margin-right: 0;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListImg {
    padding: 76% 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    background: #f2f2f2;
    overflow: hidden;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListImg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    object-fit: contain;
    background: #f2f2f2;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText {
    display: block;
    padding: 0 0.15rem;
    box-sizing: border-box;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText b {
    display: block;
    font-weight: normal;
    padding: 0.1rem 0;
    line-height: 1.5;
    font-size: 0.18rem;
    border-bottom: 1px solid #eee;
    position: relative;
    overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText b::after {
    content: "";
    width: 30%;
    height: 1px;
    background: #333;
    position: absolute;
    right: 0;
    bottom: 0px;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText span {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.1rem 0;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText span em {
    font-size: 0.14rem;
    color: #999;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText span i {
    font-size: 0.14rem;
    color: #999;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li:hover .listproduct5BoxRListImg img {
    transform: scale(1.1);
}

.listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li:hover .listproduct5BoxRListText span i {
    color: #333;
    transform: translateX(5px);
}

@media (max-width: 998px) {
    .listproduct5 .listproduct5Box .listproduct5BoxL {
        flex: 100%;
        width: 100%;
        padding: 0 15px;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
        padding: 0 0.15rem;
        box-sizing: border-box;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxCase{
        display: none;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBoxNews{
        display: none;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL{
        display: block;
        flex: 0 0 100%;
        width: 100%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR{
        flex: 0 0 100%;
        width: 100%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL a{
        display: flex;
        width: 100%;
        align-items: center;
        padding: 0.3rem 0.15rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxL a em{
        width: auto;
        flex: 1;
        padding-top: 0;
        padding-left: 0.1rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li.active .listproduct5BoxLBoxRBox{
        display: none !important;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxL .listproduct5BoxLBox .listproduct5BoxLBoxR ul li{
        flex: 0 0 49%;
        width: 49%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li {
        margin-right: 0;
        width: 49%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopL {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR {
        flex: 0 0 100%;
        justify-content: center;
        float: left;
        width: 100%;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel {
        margin-left: 0;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop {
        padding: 0.2rem 0.15rem 0.2rem;
        margin-top: 0.3rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop h4 {
        font-size: 0.2rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop p.listproduct5BoxRTopRTopText {
        line-height: 1.5;
        padding-top: 0.2rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproduct5BoxRTopRTopMessage .listproduct5BoxRTopRTopMessageTel {
        margin-top: 0.1rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRTop .listproductBoxTopTitle .listproductBoxTopTitleBox p {
        flex: auto;
        width: auto;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        flex-direction: column-reverse;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT em {
        line-height: 0.4rem;
        font-size: 0.2rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle {
        height: 0.4rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT i {
        margin-top: 0.06rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRBottom .listproduct5BoxRBottomTitle .listproduct5BoxRBottomTitleT {
        padding: 0 0.15rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRTop .listproduct5BoxRTopR .listproduct5BoxRTopRBottom .listproduct5BoxRTopRBottomC ul li img {
        padding: 2px;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText span em {
        font-size: 0.12rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText span i {
        font-size: 0.12rem;
    }

    .listproduct5 .listproduct5Box .listproduct5BoxR .listproduct5BoxRList ul li .listproduct5BoxRListText b {
        font-size: 0.16rem;
    }
}






.newsPageBoxCenterFxshare {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e9e9e9;
    box-sizing: content-box;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareL span {
    margin-right: 0.2rem;
    display: flex;
    align-items: center;
    height: 0.14rem;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareL span i {
    color: #717171;
    font-size: 0.14rem;
    line-height: 0.14rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.newsPageBoxCenterFxshareLBox {
    display: flex;
    align-items: center;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareL span img {
    height: 0.14rem;
    margin-right: 0.1rem;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR{

}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component{
    display: flex;
    align-items: center;
    height: 0.14rem;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a{
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid #dbdcdf; 
    border-radius: 50%;
    margin-left: 0.1rem;
    position:relative;
    text-decoration:none;
    margin:4px;
    display:inline-block;
    outline:none;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
}
  
.social-share .icon-wechat .wechat-qrcode {
    display:none;
    border:1px solid #eee;
    position:absolute;
    z-index:9;
    top:-205px;
    left:-84px;
    width:200px;
    height:192px;
    color:#666;
    font-size:12px;
    text-align:center;
    background-color:#fff;
    box-shadow:0 2px 10px #aaa;
    transition:all 200ms;
    -webkit-tansition:all 350ms;
    -moz-transition:all 350ms
}
.social-share .icon-wechat .wechat-qrcode.bottom {
    top:40px;
    left:-84px
}
.social-share .icon-wechat .wechat-qrcode.bottom:after {
    display:none
}
.social-share .icon-wechat .wechat-qrcode h4 {
    font-weight:normal;
    height:26px;
    line-height:26px;
    font-size:12px;
    background-color:#f3f3f3;
    margin:0;
    padding:0;
    color:#777
}
.social-share .icon-wechat .wechat-qrcode .qrcode {
    width:105px;
    margin:10px auto
}
.social-share .icon-wechat .wechat-qrcode .qrcode table {
    margin:0 !important
}
.social-share .icon-wechat .wechat-qrcode .help p {
    font-weight:normal;
    line-height:16px;
    padding:0;
    margin:0
}
.social-share .icon-wechat .wechat-qrcode:after {
    content:'';
    position:absolute;
    left:50%;
    margin-left:-6px;
    bottom:-13px;
    width:0;
    height:0;
    border-width:8px 6px 6px 6px;
    border-style:solid;
    border-color:#fff transparent transparent transparent
}
.social-share .icon-wechat:hover .wechat-qrcode {
    display:block
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a::after{
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    position: absolute;
    top: 0.05rem;
    left: 0.05rem;
    -webkit-transition: .5s;
    transition: .5s;
} 

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-qzone::after{
    background: url(../images/newspageboxcenterfxsharer1.png) no-repeat center;
    background-size: 0.2rem;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-qq::after{
    background: url(../images/newspageboxcenterfxsharer2.png) no-repeat center;
    background-size: 0.2rem;
}
 
.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-weibo::after{
    background: url(../images/newspageboxcenterfxsharer3.png) no-repeat center;
    background-size: 0.2rem;
}
 
.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-wechat::after{
    background: url(../images/newspageboxcenterfxsharer4.png) no-repeat center;
    background-size: 0.2rem;
}
 
.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a:hover{
    background: #333;
    border-color: #333;
}


.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-qzone:hover::after{
    background: url(../images/newspageboxcenterfxsharer1_1.png) no-repeat center;
    background-size: 0.2rem;
}

.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-qq:hover::after{
    background: url(../images/newspageboxcenterfxsharer2_1.png) no-repeat center;
    background-size: 0.2rem;
}
 
.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-weibo:hover::after{
    background: url(../images/newspageboxcenterfxsharer3_1.png) no-repeat center;
    background-size: 0.2rem;
}
 
.newsPageBoxCenterFxshare .newsPageBoxCenterFxshareR .share-component a.icon-wechat:hover::after{
    background: url(../images/newspageboxcenterfxsharer4_1.png) no-repeat center;
    background-size: 0.2rem;
}