/* 基础样式 */
* {
    margin:0;
    padding: 0;
    box-sizing:border-box;
}

.xhc-body {
    width: 100%;
    min-width: 860px;
    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC" 
    "Micorosoft Yahei","Hiragino sans GB","Heiti SC",
    "WenQuanYi Micro Hei",sans-serif;
    font-size:1rem;
    color:#6a6a6a;
}
.xhc-fr{
    float:right;
}

.xhc-fl{
    float:left;
}
/* 头部区域 */
.xhc-header{
    width:89.0625rem;
    height:40rem;
    margin:0 auto;
    overflow: hidden;
    background: url(../image/header/top-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size:  89.0625rem 38.5rem; 
    /* border:1px yellow solid; */
}

.nav-outmost{
    width: 89.0625rem;
    height: 4.2rem;
    margin:0 auto;
}
    .nav-out{
        width: 89.0625rem;
        height: 4.2rem;
        margin:0 auto;
        padding-top:1.8rem;
        padding-left:7.5rem;
        padding-right: 7.5rem;
    }
        
        .xhc-logo {
            width: 9.37rem;
            height: 2.1875rem;
            background:url(../image/header/logo2.png) no-repeat 0 0/8rem; 
        }

        .xhc-land{
        height: 2.1875rem;
        }
            .xhc-land-a{
                display:block;
                height: 2.1875rem;
                border-radius:1.09375rem 1.09375rem;
                font-size: 1rem;
                text-align: center;
                line-height: 2.1875rem;
                text-decoration: none;
            }
            .xhc-land-a:first-child{
                width: 4.375rem;
                margin-right: 0.625rem;
                color:#eb6622;
                background-color: #ffffff;
                border:1px #eb6622 solid;
            }
            .xhc-land-a:first-child:hover{ 
                background-color:#f4f4f4; 
            }
            .xhc-land-a:last-child{
                width: 4.375rem;
                color:#ffffff;
                background-color:#ff5500;
            }
            .xhc-land-a:last-child:hover{
                background-color: #fd722c;
            }
        
        .xhc-nav{
            margin-left: 6rem;
            padding-top:0.8rem;  
        }
            .nav-a{
                margin-right:2rem;
                font-size:1rem;
                color:#ff6f36; 
                text-decoration: none;     
            }
            .nav-a:hover{
               color:#ff5500;
               font-weight: 700;
            }

    .header-title-pic{
        width: 74.0625rem;
        height: 34.5rem;
        margin:0 auto;
        /* border:1px blue solid; */
    }
    .header-title{
        width: 28rem;
        /* border:1px red solid; */
    }   
    .header-maintitle{
      margin-left:3.75rem;
      margin-top:13rem;
      color:#505050;
      font-size: 2.8125rem;
      font-weight: 700; 
    }
     .header-subtitle{
        margin-left:3.75rem;
        margin-top:1rem;
        color:#7c7c7c;
        font-size:1.25rem;  
    }   
  

/* 核心功能介绍部分 */

.intr-maintitle{
    width: 74.0625rem;
    margin:0 auto;
    color:#505050;
      font-size: 2.8125rem;
      font-weight: 700;
      text-align: center;
      /* border:1px #464646 solid; */
}
.intr-subtitle{
    width: 74.0625rem;
    text-align: center;
    margin:0.8rem auto;
    color:#bababa;
    font-size:1rem;
}
.intr-top {
    width: 74.0625rem;
    height: 8.4375rem;
    margin:0 auto;
    /* border:1px red solid; */
    }

        .xhc-ul{
            width: 70.9375rem;
            list-style: none;
            margin:0 auto;
        }

            .xhc-tab{
               position:relative;
               width: 8.85rem;
               height: 8.4375rem;
               padding-top:6rem;
               font-weight: 700;
               text-align: center;
               color:#464646;
               /* border:1px blue solid; */
            }

            .xhc-tab:hover{
               cursor:pointer;
            }

               .xhc-div{  
                    position:absolute;
                    z-index: -1;
                    width: 8.85rem;
                    height: 8.4375rem;
                    background:url(../image/intr/tab选中.png) no-repeat center/8.85rem 8.4375rem;
                    display: none;
                }

                .xhc-div1{ 
                    top:0.39rem; 
                    display: block;
                }

                .xhc-tab:first-child{
                    color:#ec6b2a;
                    background: url(../image/intr/招聘管理.png) no-repeat center 1.4rem/3.85rem ;
                }
                .xhc-tab:nth-child(2){
                    background:url(../image/intr/信息发布.png) no-repeat center 1.48rem/3.71rem;
                }
                .xhc-tab:nth-child(3){
                    background:url(../image/intr/智能人事.png) no-repeat center 1.48rem/3.71rem; 
                }
                .xhc-tab:nth-child(4){
                    background:url(../image/intr/智能提醒.png) no-repeat center 1.48rem/3.71rem;  
                }
                .xhc-tab:nth-child(5){
                    background:url(../image/intr/薪酬管理.png) no-repeat center 1.48rem/3.6rem; 
                }
                .xhc-tab:nth-child(6){
                    background:url(../image/intr/考勤管理.png) no-repeat center 1.48rem/3.71rem;  
                }
                .xhc-tab:nth-child(7){
                    background:url(../image/intr/统计图表.png) no-repeat center 1.48rem/3.71rem; 
                }
                .xhc-tab:nth-child(8){
                    background:url(../image/intr/电子档案.png) no-repeat center 1.48rem/3.71rem;
                }

                .xhc-tab:first-child:hover {
                    color:#ec6b2a  !important;
                    background: url(../image/intr/招聘管理.png) no-repeat center 1.4rem/4.235rem ;
                }
                .xhc-tab:nth-child(2):hover{
                   color:#ec6b2a  !important;
                    background:url(../image/intr/信息发布.png) no-repeat center 1.48rem/4.081rem;
                }
                .xhc-tab:nth-child(3):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/智能人事.png) no-repeat center 1.48rem/4.081rem; 
                }
                .xhc-tab:nth-child(4):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/智能提醒.png) no-repeat center 1.48rem/4.081rem;  
                }
                .xhc-tab:nth-child(5):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/薪酬管理.png) no-repeat center 1.48rem/3.96rem; 
                }
                .xhc-tab:nth-child(6):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/考勤管理.png) no-repeat center 1.48rem/4.081rem;  
                }
                .xhc-tab:nth-child(7):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/统计图表.png) no-repeat center 1.48rem/4.081rem; 
                }
                .xhc-tab:nth-child(8):hover{
                    color:#ec6b2a  !important;
                    background:url(../image/intr/电子档案.png) no-repeat center 1.48rem/4.081rem;
                }

.intr-line{
    border-top:1px #dddddd solid;
    position: relative;
    z-index: -2;
    width:74.0625rem;
    margin:0 auto;
}

.intr-centent{
    position: relative;
    z-index: -3;
    width:89.0625rem;
    height: 40.625rem;
    margin:0 auto;
    background:url(../image/intr/centre-bg.png) no-repeat center 0 /89.0625rem 28.945rem;
    /* border:1px black solid; */
}

.centent-border{
    position: relative;
    z-index: -2;
    width: 74.0625rem;
    margin:0 auto;
    height: 33.125rem;
    display:none;
   /* border:1px red solid; */
   
}

    .xhc-firsttab{
       display:block;
    }

    .centent-left{
       position: absolute;
       top: 0;
       left:0;
       z-index: -1;
       width: 43rem;
       height: 33.125rem;
       /* border:1px blue solid; */
    }

    .tab-left1{
       background:url(../image/intr/招聘管理（图）.png) no-repeat 1.75rem 6.25rem/35rem 25.625rem;
    }
    .tab-left2{
       background:url(../image/intr/信息发布（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left3{
       background:url(../image/intr/智能人事（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left4{
       background:url(../image/intr/智能提醒（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left5{
       background:url(../image/intr/薪酬管理（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left6{
       background:url(../image/intr/考勤管理（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left7{
       background:url(../image/intr/统计图表（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }
    .tab-left8{
       background:url(../image/intr/电子档案（图）.png) no-repeat 1rem 5.5rem/35rem 25.625rem;
    }

    .centent-right{
       position: absolute;
       top:0;
       right:0;
       width: 28.125rem;
       height: 33.125rem;
       /* border:#ff5500 1px solid; */
    }

       .centent-right-p{
           font-size: 2rem;
           font-weight: 700;
           margin-bottom: 1.5rem;
           margin-top:8.5rem;
           /* border:#ff5500 1px solid; */
        }
           .centent-right-li{
                height: 2.625rem;
                margin-left:0.875rem;
                font-size:1rem;
                color:#6a6a6a;
            }

           .centent-right-li::marker{
                color:#eb6622;
            }

           
/* 服务保障部分 */

.assure-title{
    width: 74.0625rem;
    height: 5rem;
    margin:0 auto;
    text-align: center;
    color:#505050;
    font-size: 2.8125rem;
    font-weight: 700;
    /* border:1px green solid; */
}
 .xhc-asu{
    width: 89.0625rem;
    height: 35rem;
    margin:0 auto;
    background:url(../image/assure/assure-right.png) no-repeat center  0/89.0625rem 35rem;
    /* border:1px blue solid; */
}

.assure-centent{
    width: 74.0625rem;
    height: 30rem;
    margin:0 auto;
    padding-top:3rem;
   /* border:1px red solid; */
}

    .xhc-details{
        width: 36rem;
        height: 12rem;
        /* padding-left: 10.625rem;
        padding-top:1.75rem; */
        /* border:1px blue solid; */
    }
 
    .xhc-span{
        font-size:1.875rem;
        font-weight:700;
        width: 25rem;
        height: 4rem;
        line-height: 4rem;
        margin-top:1rem;
        /* border:1px blue solid; */
    }
    .xhc-p{
        width: 25rem;
        height: 6rem;
        line-height:1.6;
        font-size:0.9rem;
        padding-right: 3rem;
        /* border:1px blue solid; */
    } 

    .xhc-details:first-child{
        background: url(../image/assure/团队保障背景.png) no-repeat 0 0/36rem 12rem;  
    }
    .xhc-details:nth-child(2){
        background: url(../image/assure/产品保障背景.png) no-repeat  0 0/36rem 12rem;    
    }
    .xhc-details:nth-child(3){
        background: url(../image/assure/质量保障背景.png) no-repeat  0 0/36rem 12rem;  
        margin-top: 2rem;
    }
    .xhc-details:last-child{ 
        background: url(../image/assure/售后保障背景.png) no-repeat  0 0/36rem 12rem; 
        margin-top: 2rem;
    }
 

/* 底部 */
.xhc-footer{
    width: 89.0625rem;
    height: 10.625rem;
    margin:0 auto;
    background-color: #333333;
    }

.footer-border{
    width: 74.0625rem;
    height: 10.625rem;
    margin:0 auto;
    
}

    .footer-left{
        width:56rem;
        height:10.625rem;
        background: url(../image/footer/橙火虫logo.png) no-repeat 0 1.875rem/8.75rem;
        /* border:1px red solid; */
    }

        .xhc-copyright{
            margin-top: 6.625rem;
            font-size:0.875rem;
        }
        .xhc-icp{
            font-size:0.875rem;
        }
        .xhc-icp::before{
            content:"";
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            vertical-align: middle;
            background:url(../image/footer/police.png) no-repeat 0 0/1.1rem ;
        }

.footer-right{
    width:16rem;
    height:9.6875rem;
    /* border:1px red solid; */
    overflow: hidden;
}
    .footer-right-top{
        width: 16rem;
        overflow: hidden;
        /* border:1px red solid; */
    }

        .xhc-scode{
            width: 5.9375rem;
            height: 5.9375rem;
            border-radius: 0.625rem;
            margin-top:1.5625rem;
            background: url(../image/footer/底部公众号.png) no-repeat 0 0/5.9375rem 5.9375rem;
        }

        .xhc-gcode{
            width: 5.9375rem;
            height: 5.9375rem;
            border-radius: 0.625rem;
            margin-top:1.5625rem;
            background-color: #ffffff;
            background:url(../image/footer/qrcode.jpg) no-repeat center center/5.9375rem 5.9375rem; 
        }

        .xhc-spanleft{
            font-size:0.8rem;
            margin-top:0.5rem;
        }

        .xhc-spanright{
            font-size:0.8rem;
            margin-top:0.5rem;
            /* border:1px red solid; */
        }

/* 动画部分 */
@keyframes move{
    0% { top :-3rem}
    100%{top:0rem}
    }
    .nav-sticky{
        position:fixed;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 100; 
        background-color:rgba(255, 255, 255, 0.8);
        box-shadow:0 0 1.125rem rgba(0,0,0,0.2);
        animation-name:move;
        animation-duration:0.5s;
        animation-timing-function: ease-in-out;
        height: 3.2rem;
        padding-top:0.8rem;   
    }
    .nav-sticky .nav-a{
        margin-right:1.8rem;
        font-size:0.875rem;
        color:#464646;
        font-weight: 500; 
     }
     .nav-sticky .nav-a:hover{
        color:#eb6622;
        font-weight: 700;
    }


@keyframes moveTab{
    0%{ 
        opacity: 0 ;
        bottom:-2rem;
}
    100%{ opacity: 1;
    bottom:0rem;
}
}
    
.xhc-graduals {
    animation-name: moveTab;
    animation-duration:0.8s;
    animation-timing-function: ease-in-out;
}     
        


@keyframes appear-nav{
        0%{ 
            opacity: 0 ;
    }
        100%{ opacity: 1;
    }
    }
    
    
    .nav-appear{
        animation-name: appear-nav;
        animation-duration:0.8s;
        animation-timing-function: ease-in-out;
    }