html,body{
    margin:0;
    padding:0;
    font-family: 'SourceHanSansCN-Regular','Microsoft YaHei';
}
ul{
    margin:0;
    padding:0;
    list-style: none;
}
h3,h4,p{
    margin:0;
}
h3,h4{
  font-weight: bold;
}
div{
    box-sizing: border-box;
}
button{
    border:none;
    background-color:#fff;
}
a{
    text-decoration: none;
    color:#323232;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
input{
    outline:none;
}
input:focus{
    outline: none;
}
textarea{
    outline:none;
}
textarea:focus{
    outline:none;
}
/********** 公共样式 **********/
/***** 标题 *****/
.section-title{
    font-size:2rem;
    line-height:3rem;
    text-align: center;
    color:#ff494c;
}
.section-nav-section{
    margin-bottom:3.75rem;
    text-align: center;
}
.section-nav{
    display: inline-block;
    height:1.5rem;
    margin:0.5rem auto;
}
.section-nav-leftback{
    float:left;
    width:3rem;
    height:1.5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.section-nav p{
    float: left;
    padding:0 0.5rem;
    font-size: 0.9rem;
    line-height:1.5rem;
    color:#909090;
}
.section-nav-rightback{
    float:left;
    width:3rem;
    height:1.5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bg-orange{
    background: linear-gradient(to bottom right, #ff494c , #ff9a52); /* 标准的语法（必须放在最后） */
}
.bg-blue{
    background: linear-gradient(to bottom right, #67caff , #2efaf9);
}
/********** 0.顶部导航 **********/
.home-top{
    position: fixed;
    width:100%;
    height:4rem;
    background-color:#fff;
    box-shadow: 0 0 5px #ccc;
    z-index:3;
  }
  .home-top-logo{
    width:17.5rem;
    height:3.5rem;
    margin-top:0.25rem;
    margin-left:14rem;
    background-image:url('../img/images/background/logo.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .home-top-logo a{
    display:block;
    width:100%;
    height:100%;
  }
  .home-top-list{
    position:absolute;
    top:1.2rem;
    /* left:44rem; */
    right:16rem;
  }
  .home-top li{
    float:left;
    margin-right:1rem;
    font-size: 1rem;
    line-height:1.6rem;
    color:#323232;  
    cursor:pointer;
  }
  .home-top li:hover{
    margin-left:-0.3rem;
    margin-right:0.7rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: 0.3s;
  }
  .fontBold{
    margin-left:-0.3rem;
    margin-right:0.7rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: 0.3s;
  }
/********** 1.顶部平台展示 **********/
.top-banner{
    width:100%;
    height: 38.4rem;
    padding-top:10rem;
    background-repeat: no-repeat;
    background-position: 0 -1rem;
    background-size: 100%;
}
.top-banner-section{
    width:69.7rem;
    margin:0 auto;
}
.top-banner-left{
    float:left;
    width:31rem;
    height:20rem;
}
.top-banner-left h3{
    margin-bottom:2rem;
    font-size: 2.4rem;
    line-height:3rem;
    text-align: center;
}
.top-banner-left-list{
    overflow: hidden;
}
.top-banner-left-list li{
    float:left;
    /*width:10rem;*/
    height:1.5rem;
    margin-bottom:1.2rem;
    margin-right:6.8rem;
    padding-left:2rem;
    background-image: url('../img/integration/icon/banner_star.png');
    background-repeat: no-repeat;
    background-size: 1.7rem 1.5rem;
    font-size:1.2rem;
    line-height:1.5rem;
}
.top-banner-left-list li:nth-of-type(2n){
    margin-right:0;
}
.top-banner-right{
    float:left;
    width:32rem;
    height:20rem;
    margin-top:-2rem;
    margin-left:3rem;
}
.top-banner-right img{
    width:100%;
    height:100%;
}

/********** 2.产品定义 **********/
.definition{
    width:56rem;
    height:40.5rem;    
    margin:0 auto;
    margin-top:4.5rem;
    margin-bottom:5rem;
}
/***** 定位导航 *****/
.definition-navigation{
    width:56rem;
    height:5rem;
    margin-bottom:3.75rem;
}
.definition-navigation li{
    float:left;
    box-sizing: border-box;
    width:27.95rem;
    height:5rem;
    padding:0.05rem;
}
.definition-navigation-section{
    width:27.9rem;
    height:4.9rem;
    background-color:#fff;
}
@media(max-width:1400px){
    .definition-navigation-section{
        height:4.85rem;
    }
}
.definition-nav-img{
    float:left;
    width:3.5rem;
    height:2.8rem;
    margin:1.1rem 1.5rem 0 7.1rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.definition-nav-title{
    float:left;
    margin-top:1.2rem;
    color:#fff;
}
.definition-nav-title-cha{
    font-weight: bold;
    font-size: 0.9rem;
    line-height:1.3rem;
}
.definition-nav-title-eng{
    font-size: 0.6rem;
    line-height:1.5rem;
}
@media(max-width:1560px){
    .definition-nav-title-cha,
    .definition-nav-title-eng{
        width:10rem;
        height:1.5rem;
        overflow: hidden;
    }
}
.nav-right{
    margin-left:-0.05rem;
}
/* 默认样式 */
.definition-nav-left{
    border-right:none;
}
.definition-nav-left .definition-nav-img{
    background-image: url('../img/integration/icon/icon_oa_normal.png');
}
.definition-nav-right{
    border-left:none;
}
.definition-nav-right .definition-nav-img{
    background-image: url('../img/integration/icon/icon_eap_normal.png');
}

.nav-left .definition-nav-title{
    color:#ff494c;
}
.nav-right .definition-nav-title{
    color:#67caff;
}
/* 点击后 */
.nav-select .definition-navigation-section{
    background-color:transparent;
}
.nav-select .nav-left .definition-nav-title,
.nav-select .nav-right .definition-nav-title{
    color:#fff;
}
.nav-select .nav-left .definition-nav-img{
    background-image: url('../img/integration/icon/icon_oa_select.png');
}
.nav-select .nav-right .definition-nav-img{
    background-image: url('../img/integration/icon/icon_eap_select.png');
}

.definition-content-desc{
    margin-bottom:2.75rem;
    font-size: 0.8rem;
    line-height:1.5rem;
    color:#818181;
}
.definition-content-content{
    width:54rem;
    height:20rem;
    margin:0 auto;
}
.definition-content-left,
.definition-content-right{
    float:left;
    position: relative;
    width:27rem;
    height:19.25rem;
    box-sizing: border-box;
    overflow: hidden;
}
.definition-content-left img{
    width:22rem;
    height:16.8rem;
    margin-top:0.7rem;
    margin-left:3rem;
}
.definition-content-right{
    padding-left:5rem;
}
.definition-content-right h4{
    margin-bottom:2rem;
    font-size: 1.4rem;
    line-height:1.6rem;
}
.definition-content-right li{
    /* width:300px; */
    height:1.5rem;
    margin-bottom:0.7rem;
    padding-left:2.3rem;
    background-repeat: no-repeat;
    background-position: 0 0.3rem;
    background-size: 1.2rem 1.1rem;
    font-size: 0.8rem;
    line-height:1.5rem;
}
.definition-btn{
    position: absolute;
    bottom:0;
    left:5rem;
    display:block;
    width:10.75rem;
    height:2.75rem;
    font-size: 0.8rem;
    line-height:2.75rem;
    text-align: center;
    color:#fff;
}

/********** 3.系统特色 **********/
.system{
    height:40rem;
    padding-top:8rem;
    background-color:#f6f6f6;
}
.system-list{
    width:72.3rem;
    height:22rem;
    margin:0 auto;
}
.system-item{
    float:left;
    width:10rem;
    height:22rem;
    margin-right:5.5rem;
    background-repeat: no-repeat;
    background-size:7.7rem 7.7rem;
    background-position: center 0;
    transition: 0.3s;
}
.system-item:nth-last-of-type(1){
    margin-right: 0;;
}
.system-item p{
    font-size: 1.2rem;
    line-height:1.5rem;
    margin-top:10rem;
    text-align: center;
}
.system-item-1{
    background-image: url('../img/integration/system/item-1-normal.png');
}
.system-item-1:hover{
    margin-top:-0.5rem;
    background-image: url('../img/integration/system/item-1-select.png');
}
.system-item-2{
    background-image: url('../img/integration/system/item-2-normal.png');
}
.system-item-2:hover{
    margin-top:-0.5rem;
    background-image: url('../img/integration/system/item-2-select.png');
}
.system-item-3{
    background-image: url('../img/integration/system/item-3-normal.png');
}
.system-item-3:hover{
    margin-top:-0.5rem;
    background-image: url('../img/integration/system/item-3-select.png');
}
.system-item-4{
    background-image: url('../img/integration/system/item-4-normal.png');
}
.system-item-4:hover{
    margin-top:-0.5rem;
    background-image: url('../img/integration/system/item-4-select.png');
}
.system-item-5{
    background-image: url('../img/integration/system/item-5-normal.png');
}
.system-item-5:hover{
    margin-top:-0.5rem;
    background-image: url('../img/integration/system/item-5-select.png');
}

/********** 4.功能介绍 **********/
.introduction{
    position: relative;
    height:57.75rem;
    padding-top:6.2rem;
    background-image: url('../img/integration/background/introduction_bg.png');
    background-repeat: no-repeat;
    background-size:100%;
    background-position: 0 -2.5rem;
}
.introduction-content{
    width:55.5rem;
    height:27rem;
    margin:0 auto;
    background-color:#fff;
    box-shadow: 0 0 0.5rem #ccc;
}
.intro-con-left{
    float:left;
    width:41rem;
    height:27rem;
}
.intro-con-left-list{
    height:10rem;
    height:50%;
    /*padding-top:3.5rem;*/
    /*background-color: #eee;*/
    /*border-bottom:0.05rem solid #ccc;*/
}
.intro-con-left-item{
    float:left;
    width:10rem;
    /*padding-top: 3.5rem;*/
    height:100%;
    margin-right:0.25rem;
    /*background-color: #eee;*/
}

.intro-con-left-item img{
    display:block;
    width:4rem;
    height:4rem;
    margin:0 auto;
    margin-bottom:0.8rem;
}
.intro-con-left-item p{
    font-size: 0.6rem;
    line-height:0.8rem;
    text-align: center;
}

.intro-con-right{
    position: relative;
    float:left;
    width:14.5rem;
    height:27rem;
    /* padding-top:11rem; */
    background-size: 100% 100%;
    box-shadow: 0 0 0.25rem #ccc;
    text-align: center;
    text-shadow: 2px 2px 4px #fff;
}
.intro-con-right-box{
    position: absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    z-index:1;
}
.intro-con-right-opacity{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: url('../img/integration/background/introduction_con_right.png');
    background-repeat: no-repeat;
    opacity: 0.3;
}
.intro-con-right-title{
    display:block;
    height:4rem;
    margin-top:11rem;
    /* opacity: 1; */
}
.intro-right-box-top{
    height:1rem;
    margin:0 auto;
    /* opacity: 1; */
}
.intro-right-box-top img{
    display:inline-block;
    vertical-align: middle;
    width:1rem;
    height:1rem;
    margin-right:0.5rem;
}
.intro-right-box-top span{
    display:inline-block;
    vertical-align: middle;
    font-weight: bold;
    font-size: 0.9rem;
    line-height:1rem;
    color:#FF494C
}

.intro-right-box-bottom{
    font-weight: bold;
    font-size: 0.9rem;
    line-height:1.5rem;
    margin-top:1.1rem;
    color:#818181;
    /* opacity: 1; */
}

.intro-con-right-desc{
    display:none;
    padding:3rem 0.4rem;

}
.intro-con-right-box:hover .intro-con-right-title{
    display:none;
}

.intro-con-right-box:hover .intro-con-right-desc{
    display:block;
}

/********** 4.5 服务资讯 **********/
.hotline{
    position: absolute;
    bottom:-5rem;
    /*left:20.1rem;*/
    left:50%;
    transform: translate(-50%);
    width:55.8rem;
    height:9.8rem;
    margin:0 auto;
    margin-top:8.4rem;
    background-image: url('../img/integration/background/hotline_bg.png');
    background-repeat: no-repeat;
    background-size:55.8rem 9.8rem;
    color:#fff;
}
.hotline-content{
    min-width:20rem;
    height:5rem;
    margin:0 auto;
    margin-top:2rem;
    text-align: center;
}
.hotline-content-phone{
    font-size: 1.3rem;
    line-height: 2rem;
}
.hotline-content-us{
    display:block;
    width:9rem;
    height:2.4rem;
    margin:0 auto;
    margin-top:1rem;
    background-color:#F9B135;
    border-radius: 0.3rem;
    font-size: 0.9rem;
    line-height:2.4rem;
    text-align: center;
    color:#fff;
}

.hotline-tips{
    position: absolute;
    top:1.2rem;
    right:6.5rem;
    width:6.5rem;
    height:9rem;
}
.hotline-tips img{
    width:6.5rem;
    height:6.5rem;
}
.hotline-tips div{
    font-size:0.7rem;
    line-height:1.65rem;
    text-align: center;
}

/********** 5.公司优势 **********/
.advantage{
    height:47.5rem;
    padding-top:13.25rem;
    background-repeat: no-repeat;
    /*background-size:96rem 47.5rem;*/
}
.advantage-content{
    width:57.6rem;
    height:15rem;
    margin:0 auto;
    margin-top:4.3rem;
}
.advantage-content-item{
    float:left;
    width:12.75rem;
    height:16rem;
    margin-right:1.5rem;
    padding-top:2.5rem;
    background-color:#fff;
    border-radius: 0.5rem;
    box-shadow: 0 5px 12px #ccc;
    transition: 0.3s;
}
.advantage-content-item:hover{
    margin-top:-1.5rem;
}
.advantage-content-item img{
    display:block;
    width:2.4rem;
    height:2.05rem;
    margin:0 auto;    
}
.advantage-content-item div{
    font-weight: bold;
    font-size: 1.2rem;
    line-height:4rem;
    text-align: center;
    color:#FF494C
}
.advantage-content-item p{
    font-size:0.8rem;
    line-height:1.5rem;
    text-align: center;
    color:#666;
}

/********** 6.案例展示 **********/
.case{
    height:47.5rem;
    padding-top:7.5rem;
}
.case-content{
    height:31.5rem;
    padding-top:4rem;
    background-repeat: no-repeat;
    /*background-size:96rem 23.4rem;*/
}
.case-content-title{
    font-size:1.2rem;
    line-height:1.5rem;
    text-align: center;
    color:#fff;
}

.case-content-navbtnlist{
    width:43rem;
    height:12rem;
    margin:0 auto;
    margin-top:15.6rem;
}
.case-content-navbtnitem{
    position: relative;
    float:left;
    width:6.5rem;
    height:9rem;
    margin-right:2.5rem;
    text-align: center;
    color:#fff;
    transition: 0.3s;
}
.case-content-navbtnitem:nth-last-of-type(1){
    margin-right: 0;;
}
.navbtn-item-image{
    width:4rem;
    height:4rem;
    margin:0 auto;
    padding:0.5rem;
    background-color:#fff;
    border-radius: 50%;
}
.navbtn-item-image img{
    width:3rem;
    height:3rem;
}
.navbtn-item-company{
    margin-top:0.5rem;
    transition: 0.3s;
    opacity: 0;
}
.navbtn-item-company-name{
    font-size: 0.9rem;
    line-height: 1.5rem;
}
.navbtn-item-company-name2{
    font-size:0.6rem;
    line-height:0.6rem;
}
.navbtn-item-tips{
    position: absolute;
    top:-10.75rem;
    left:-7.5rem;
    width:21.5rem;
    height:9.5rem;
    padding:1.5rem 2rem;
    background-color:#fff;
    border-radius: 0.6rem;
    text-align: left;
    color:#323232;
    transition: 0.3s;
    opacity: 0;
}
.navbtn-item-tips::before{
    content:"";
    position: absolute;
    bottom:-0.5rem;
    left:10.35rem;
    display:block;
    width:1rem;
    height:1rem;
    background-color:#fff;
    transform:rotate(45deg);
}
.navbtn-item-tips-title{
    margin-bottom:0.8rem;
    font-weight: bold;
    font-size:0.9rem;
    line-height:1.2rem;
}
.navbtn-item-tips-desc{
    height:3.6rem;
    font-size:0.75rem;
    line-height:1.2rem;
    overflow: hidden;
}

/* 选中 */
.case-content-navbtnitem:hover {
    margin-top:-1.9rem;
}
.case-content-navbtnitem:hover .navbtn-item-image{
    width:6rem;
    height:6rem;
    padding:1rem;
}
.case-content-navbtnitem:hover .navbtn-item-image img{
    width:4rem;
    height:4rem;
}
.case-content-navbtnitem:hover .navbtn-item-company,
.case-content-navbtnitem:hover .navbtn-item-tips{
    opacity: 1;
}

.case-content-navbtnitem.navbtnitem-actived{
    margin-top:-1.9rem;
}
.case-content-navbtnitem.navbtnitem-actived .navbtn-item-image{
    width:6rem;
    height:6rem;
    padding:1rem;
}
.case-content-navbtnitem.navbtnitem-actived .navbtn-item-image img{
    width:4rem;
    height:4rem;
}
.case-content-navbtnitem.navbtnitem-actived .navbtn-item-company,
.case-content-navbtnitem.navbtnitem-actived .navbtn-item-tips{
    opacity: 1;
}

/********** 7.服务 **********/
.service{
    height:41rem;
    margin-top:-7.2rem;
    padding-top:9rem;
    background-color:#07111F;
}
.service-title{
    font-size:1.8rem;
    line-height:2rem;
    text-align: center;
    color:#999;
}
.service-content-inputlist{
    width:70rem;
    height:4rem;
    margin:0 auto;
    margin-top:4.25rem;
    margin-bottom:2.25rem;
    color:#999;
}
.service-content-inputitem{
    float:left;
    width:20.5rem;
    height:3rem;
    margin-right:1rem;
    padding:0 1rem;
    border:1px solid rgb(112, 107, 107);
    border-radius: 0.6rem;
    font-size:1rem;
    line-height:3rem;
}
.service-content-inputitem:nth-last-of-type(1){
    margin:0;
}
.service-content-inputitem input{
    display:inline-block;
    width:10rem;
    height:2.5rem;
    margin-top: -0.25rem;
    padding: 0 0.5rem;
    background-color: transparent;
    border: none;
    font-size:1rem;
    color:#999;
    vertical-align: middle;
    outline: none;
}

.service-content-inputitem span{
    display:inline-block;
    margin-top: -0.25rem;
    vertical-align: middle;
}

.service-content-textbox{
    width:70rem;
    height:8.75rem;
    margin:0 auto;
    padding:1rem;
    border:1px solid #999;
    border-radius: 0.6rem;
}
.service-content-textbox span{
    display:inline-block;
    width:4.5rem;
    height:2rem;
    margin-right:0.5rem;
    color:#999;
    vertical-align: top;
}
.service-content-textbox textarea{
    display:inline-block;
    width:62rem;
    height:6.5rem;
    background-color:transparent;
    border:none;
    font-size:1rem;
    line-height:1.4rem;
    color:#999;
    vertical-align: top;
}
.service-content-btnbox{
    height:3rem;
    margin-top:3.25rem;
}
.service-content-btn{
    display:block;
    width:20rem;
    height:3rem;
    margin:0 auto;
    border-radius: 0.4rem;
    font-size:1rem;
    font-family: 'SourceHanSansCN-Medium';
    color:#fff;
}

/********** 8.了解更多 **********/
.thanmore{
    height:15rem;
    padding-top:3.6rem;
}
.thanmore-title{
    margin-bottom:2.8rem;
    font-size:1.4rem;
    line-height:1.5rem;
    text-align: center;
    color:#444;
}
.thanmore-productlist{
    width:60rem;
    height:5rem;
    margin:0 auto;
}
.thanmore-productitem{
    float:left;
    width:15rem;
    height:2rem;
    font-size:1rem;
    line-height:2rem;
    text-align: center;
    color:#B6B7B9;
}

/********** 9.联系我们 **********/
.contact{
    height:14.65rem;
    padding-top:1rem;
    padding-left:20rem;
    color:#fff;
}
/* OA */
.contact-red{
    background-color:#FF494C;
}
/* EAP */
.contact-blue{
    background-color:#15BEFE  ;
}
.contact-content{
    float:left;
    width:30rem;
    height:6rem;
    margin-right:1.15rem;
}
.contact-content-title{
    margin-bottom:1.6rem;
}
.contact-content-title img{
    display:inline-block;
    width:1.8rem;
    height:1.8rem;
    margin-right:1rem;
    vertical-align: bottom;
}
.contact-content-title span{
    display: inline-block;
    margin-right:0.6rem;
    font-size:1.4rem;
    vertical-align: bottom;
    color: #fff;
}
.contact-content-title .contact-title-eng{
    font-weight:bold;
    font-size: 1.1rem;
}
.contact-content-desc{
    font-size:0.9rem;
    line-height:1.6rem;
}

.contact-image{
    float:left;
    height:6rem;
    margin-top:1rem;
}
.contact-image img{
    float:left;
    width:10.5rem;
    height:10.5rem;
    margin-right:2.5rem;
}
.contact-footer{
    height:4.8rem;
    font-size:0.8rem;
    line-height:4.8rem;
    text-align: center;
    color:#bcbcbc;
}

/********** OA样式 - app-orange **********/
/* 公共样式 */
.app-orange .section-nav-leftback{
    background-image: url('../img/integration/icon/titlebg_left_red.png');
}
.app-orange .section-nav-rightback{
    background-image: url('../img/integration/icon/titlebg_right_red.png');
}
.app-orange .section-title{
    color:#FF494C;
}
/* 1.顶部平台展示 */
.app-orange .top-banner{
    background-image: url('../img/integration/background/top-banner_redbg.png');
}
/* 2.产品定义 */
.app-orange .definition-content-right{
    color:#FF494C;
}
.app-orange .definition-content-right li{
    background-image: url('../img/integration/icon/icon_yes_red.png');
}
.app-orange .definition-content-right .definition-btn{
    background: linear-gradient(to bottom right, #ff494c , #ff9a52);
}
.app-orange .definition-content-left{
    background:#fffbfb;
}
/* 4.功能介绍 */
.app-orange .intro-right-box-top span{
    color:#ff494c;
}
/* 5.公司优势 */
.app-orange .advantage{
    background-image:url('../img/integration/background/advantage_bg_red.png');
}
.app-orange .advantage-content-item div{
    color:#FF494C;
}
/* 6.案例展示 */
.app-orange .case-content{
    background-image: url('../img/integration/background/cases_bg_red.png');
    background-size: cover;
}
/* 7.服务-按钮 && 9.联系我们 */
.app-orange .service-content-btn,
.app-orange .contact{
    background: linear-gradient(to bottom right, #ff494c , #ff9a52);
}


/********** OA样式 - app-blue **********/
/* 公共样式 */
.app-blue .section-nav-leftback{
    background-image: url('../img/integration/icon/titlebg_left_blue.png');
}
.app-blue .section-nav-rightback{
    background-image: url('../img/integration/icon/titlebg_right_blue.png');
}
/* 1.顶部平台展示 */
.app-blue .top-banner{
    background-image: url('../img/integration/background/top-banner_bluebg.png');
}
.app-blue .section-title{
    color:#15BEFE;
}
/* 2.产品定义 */
.app-blue .definition-content-right{
    color:#15BEFE;
}
.app-blue .definition-content-right li{
    background-image: url('../img/integration/icon/icon_yes_blue.png');
}
.app-blue .definition-content-right .definition-btn{
    background: linear-gradient(to bottom right, #67caff , #2efaf9);
}
.app-blue .definition-content-left{
    background: #F8FDFF;
}
/* 4.功能介绍 */
.app-blue .intro-right-box-top span{
    color:#15BEFE;
}
/* 5.公司优势 */
.app-blue .advantage{
    background-image:url('../img/integration/background/advantage_bg_blue.png');
}
.app-blue .advantage-content-item div{
    color:#15BEFE;
}
/* 6.案例展示 */
.app-blue .case-content{
    background-image: url('../img/integration/background/cases_bg_blue.png');
    background-size: cover;
}
/* 7.服务 - 按钮 */
.app-blue .service-content-btn,
.app-blue .contact{
    background: linear-gradient(to bottom right, #67caff , #2efaf9);
}


.system_jieshao{
    position: relative;
    display: none;
    font-size: 14px;
    padding: 5px 10px;
    background: #fff
}
.system_jieshao::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    left: 47.5%;
    top: -5px;
}
/*控制鼠标悬浮显示*/
.system-item:hover .system_jieshao{
    display: inline-block;
}
.add_jieshao{
    background-color: #555;
    height: 0rem;
    width: 0rem;
    margin: -7rem 4.5rem;
    color: #fff;
    overflow: hidden;
}
.add_jieshao_bj{
    background-color: rgba(0,0,0,.5);
    height: 13.5rem;
}
.intro_add{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #eee;
    padding-top: 3.5rem;
}
.add_jieshao p{
line-height: 4rem;
    margin:0;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600;
}
.add_jieshao span{
    line-height: 1.3rem;
    padding: 0 20px;
    font-size: 0.8rem;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;      /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}
.add_jieshao spanp:after{
    content: "···";
    position:absolute;
    bottom:0;right:0;
    padding:0 20px 1px 45px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

}
.intro-con-left-item:hover .intro_add{
    width: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.intro-con-left-item:hover img{
    display: none;
}
.intro-con-left-item:hover .add_jieshao{
    width: 10rem;
    height: 13.5rem;
    background-color: #333;
    margin: -13.5rem 0 0;
    transition: all .3s;
}

.container_add_text{
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;

}
.container_add_text p{
    margin-right: 2.5rem;
}
@media (max-width: 500px) {
    .top-banner-left-list{
        height: calc(3.5rem*5 + 1px);
    }
    .top-banner-left-list li ,.definition-nav-title-cha ,.definition-content-right li {
        height: 3.5rem;
        line-height: 3.5rem;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
    .definition-content-content{
        display: none;
    }
    .definition-nav-title-eng{
        display: none;
    }
    .definition-content-desc{
        line-height: 4.5rem;
        font-size: 12px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }

    .system{
    height: 250px;
    }
    .system-list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .system-item{
        width: 100px;
        height: 90px;
    }

    .system-item:hover .system_jieshao{
        display: none;
    }

    .definition{
        width: 90%;
    }
    .definition-navigation ,.definition-navigation-section , .definition-nav-title-cha{
        width: 100%;
    }
    .definition-navigation li ,.definition-nav-title{
        width: 50%;
    }
    .definition-navigation li{
        height: 25px;
    }
    .introduction{
        height: 470px;
    }
    .introduction-content ,.intro-con-left{
        width: 100%;
        height: 302px;
    }
    .intro-con-left-list{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
    }
    .intro-con-left-item{
        width: 24.5%;
        height: 150px;
        box-sizing: border-box;
    }
    .intro_add{
        width: 100%;
        height: 100%;
    }
    .add_jieshao span{
        -webkit-line-clamp:4;
        padding: 5px ;
        line-height: 3.5rem;
        height: calc(3.5rem*4 + 1px);
    }
    .add_jieshao_bj{
        height: 100%;
        padding-top: 20px;
    }
    .intro-con-right{
        display: none;
    }

    .intro-con-left-item:hover .add_jieshao{
        width: 100%;
        height: 150px;
        margin: -150px 0 0;
    }

    .hotline{
        width: 100%;
        height: 66px;
        background-size:100%;
        position: relative;
        margin: 0;
        bottom: 0;

    }
    .hotline-content{
        text-align: start;
    }
    .hotline-content-phone{
        line-height: 25px;
        margin-left: 8%;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .hotline-content-us{
        display: inline;
        padding: 3px 8px;
        margin-left: 45%;
        font-size: 12px;
    }
    .hotline-tips{
        width: 58px;
        height: 58px;
    }
    .hotline-tips img{
        width: 100%;
        height: 100%;
    }
    .hotline-tips div{
   display: none;
    }



    .advantage{
        height: 220px;
    }
    .advantage-content{
        width: 100%;
        height: auto;
        margin: 0;
    }
    .advantage-content-item{
        margin-bottom: 20px;
        width: 23.4%;
        height: 80px;
    }
    .advantage-content-item p{
        line-height: 3.5rem;
        overflow: hidden;
        font-size: 0.7rem;
    }
    .advantage-content-item p:before{
        content: '· ';
        font-size: 3rem;
    }
    .advantage-content-item img{
        width: 20px;
        height: 20px;
        margin-top:10px;
    }
    .advantage-content-item div{
        font-size: 14px;
    }


    .case{
        height: 355px;
    }
    .case-content{
        height: 220px;
        margin-top: 25px;
    }
    .case-content-navbtnlist{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .definition-nav-title{
        width: 70%;
    }
    .definition-navigation-section{
        height: 25px;
    }
    .case-content-navbtnitem{
        /*width: 80px;*/
        /*height: 80px;*/
        width: 17%;
        height: 17%;
    }
    .navbtn-item-image {
        width: 50%;
        height: 50%;
    }
    .definition-nav-img{
        width: 14px;
        height: 14px;
    }
   .case-content-navbtnitem.navbtnitem-actived .navbtn-item-image{
        width: 60%;
        height: 60%;
    }
    .navbtn-item-company-name{
        line-height: 3.5rem;
        margin-top: 5px;
        font-size: 12px;
    }
    .case-content-navbtnitem.navbtnitem-actived .navbtn-item-image img ,.navbtn-item-image img{
        width: 100%;
        height: 100%;
    }
    .navbtn-item-tips{
        display: none;
    }
    .case-content-navbtnitem.navbtnitem-actived{
        margin-top: 0;
        transform: scale(1.2);
    }
    .navbtn-item-company-name2{
        opacity: 0;
    }

    .system-item{
        background-size: 40px 40px;
    }
    .intro-con-left-item img{
        width: 40px;
        height: 40px;
    }


    .thanmore{
        height: calc(4rem*8 + 1px);
    }
    .thanmore-productitem{
        width: 100px;
        line-height: 4.5rem;
        height: 4.5rem;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        text-align: start;
        margin-left: 20px;
    }


    .thanmore-productlist{
        width: 75rem;
    }
    .contact{
        height: 140px;
        padding-left: 0;
    }
    .contact-content{
        width: 60%;
        height: 100%;
    }
    .contact-content-title img{
        width: 3.5rem;
        height: 3.5rem;
    }
    .contact-content-desc{
        line-height: 20px;
    }
    .contact-image{
        width: 38%;
        height: 38%;
        margin-top: 20px;
    }
    .contact-image img{
        width: 90%;
        height: 70%;
    }
    .contact-footer{
        margin-bottom: 75px;
        font-size: 12px;
    }
    .container_add_text{
        width: 50%;
        height: 90px;
        float: left;
    }



    .section-title ,.top-banner-left h3 ,.case-content-title ,.thanmore-title , .contact-content-title span{
        font-size: 15px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

    }
    .section-nav p ,.system-item p ,.intro-con-left-item p ,.add_jieshao span  ,.contact-content-desc {
        font-size: 12px;
    }
.container_add_text p{
    font-size: 8px;
 }
    .system-item p ,.intro-con-left-item p ,.advantage-content-item div{
        line-height: 25px;
    }
    .advantage-content-item p{
        font-size: 10px;
        text-align: start;
        display: none;
    }
}