/* banner */
.vb-header{ margin-top:-80px; width:100%;height:580px; overflow: hidden;
  background-position: top center;background-size: cover; background-repeat: no-repeat;
  background-image: url("https://cdn.vcbeat.top/upload/danhuangtech/Computer/other/img/banner.png"); z-index: 4; position: relative;background-attachment: fixed;
}
.vb-header .vb-header-mask{background: #000000;opacity: 0.4;position: absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.vb-header .vb-banner-img{height:580px;width:100%; overflow: hidden; object-fit:cover; }
.vb-header .banner-content{ width:100%;position: absolute;left:0;bottom:80px; z-index:1;}
.vb-header .banner-content-center{width:1200px;margin:0 auto; position: relative;}
.vb-header .banner-tips{ position:absolute;display:inline-block;left:0;line-height:64px;height: 64px;font-size:36px;font-weight:Medium;letter-spacing:10px;background:#FFFFFF;box-shadow:0 3px 10px rgba(0,0,0,.2);transition: all .4s ease;overflow: hidden;}
.vb-header .banner-tips .banner_tle_mask{position: absolute;left: 0;top: 0;bottom: 0;width: 200%;;transition: all .5s linear;transform: translateX(-50%);}
.vb-header .banner-tips .banner_tle_mask::before{content: '';display: inline-block;width: 50%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255,1));}
.vb-header .banner-tips .banner_tle_mask::after{content: '';display: inline-block;width: 50%;height: 100%;position: absolute;left: 50%;top: 0;background: rgba(255, 255, 255,1);}
.vb-header .banner-tle{bottom:84px;color:#606366;}
.vb-header .banner-msg{bottom:0;color:#EF7E00}
.vb-header .b-text-cnt{padding:0 30px;}
.vb-header .b-text-cnt img{ margin-top:16px;max-width: 100%;max-height: 36px;}
.vb-header .banner-tle .banner_tle_mask{ animation: showText 1s linear; animation-fill-mode: both; animation-delay: .5s;}
.vb-header .banner-msg .banner_tle_mask{ animation: showText 1s linear; animation-fill-mode: both; animation-delay: .7s;}
@keyframes showText{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(50%);
    }
}

/* 面包屑 */
.crumbs{width:1200px;margin:34px auto;}
.crumbs span{font-size: 14px;font-weight: 500;color: #666666;margin-right:15px; }
.crumbs span i{font-size: 12px;}
.crumbs span:last-child{ font-weight: bold; color: #343434;}
.crumbs a{color: #666666;position: relative;}
.crumbs a.bot-line::before{content: '';position: absolute;bottom: -5px;width: 100%;height: 1px;background: #F07E00;display: inline-block;transition: all .4s cubic-bezier(1,0,0,1);transform: scaleX(0);transform-origin: top left;}
.crumbs span:hover a.bot-line::before{transform: scaleX(1);transform-origin: top right;}

/* 联系我们 */
.module-eight{ margin-bottom: 120px;margin-top:70px;}
.module-body{display: flex; justify-content: space-between;padding-top:50px;}
.contact-left{ width: 890px;}
.contact-left .contact-type{margin-top: 53px;}
.contact-left .contact-type:nth-child(1){margin-top: 0;}
.contact-title{animation-name:fadeIn;margin-bottom:4px; }
.contact-left .contact-title p{  font-size: 34px;font-weight: bold; color: #333333;}
.contact-left .title-line{width: 46px;height: 1px; background: #EF7E00;margin-top:30px;  animation: progress 1s ease-in-out;}
.contact-title .title-line{animation-name: progress; -webkit-animation-name:progress; animation-duration: 2s; animation-fill-mode: both; }
@keyframes progress {
    from {
      width: 0;
    }
    to {
      width: 46px;
    }
  }
  .contact-left-content{margin-top:30px;}
  .contact-left-content .s-item {padding-bottom:80px;position: relative;width: 273px;background: url("https://cdn.vcbeat.top/upload/danhuangtech/Computer/index/img/noise-light-gray.png");box-shadow: 0 0 20px rgba(0, 0, 0, .15);margin:0 35px 35px 0;}
  .contact-left-content .s-item:nth-child(3n) {margin:0 0 35px 0;}
  .contact-left-content .s-item >div {position: relative;padding: 20px;}
  .contact-left-content .s-item >div:last-child {position: relative;padding: 20px;position: absolute; bottom:0;left:0;right: 0;}
  .contact-left-content .s-item .s-head{width: 100%;height: 280px;display: flex;flex-flow: column wrap;}
  .contact-left-content .s-head .s-bg{position: absolute;height: 100%;width: 100%;top: 0;left: 0;object-fit: cover;object-position: 50% 50%}
  .contact-left-content .s-head .s-mask{position: absolute;height: 100%;width: 100%;top: 0;left: 0;background: linear-gradient(transparent,#000);opacity: 0.8;z-index:1;}
  .contact-left-content .s-head .s-logo{height: 30px;}
  .contact-left-content .s-head p{position: relative;z-index: 1;color: #FFFFFF;text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);}
  .contact-left-content .s-head .s-tle{font-size: 16px;margin-top: auto;font-weight: Bold;}
  .contact-left-content .s-head .s-summary{font-size: 12px;margin-top: 18px;line-height: 18px;}
  .contact-left-content .client {color: #000;}
  .contact-left-content  .client-item + .client-item{margin-top: 18px;}
  .contact-left-content .client .c-tle{font-size: 14px;font-weight: bold;}
  .contact-left-content .c-tle >img{width: 13px;height: 13px;margin-right: 6px;vertical-align: top;}
  .contact-left-content .c-tags{font-size: 12px;font-weight: bold;color: #F88912;display: flex;flex-flow: row wrap;margin-top: 15px;cursor: pointer;line-height: 18px;}
  .contact-left-content .c-tags p a{color: #F88912;}
  .contact-left-content .c-tags i{color: #999999;font-weight: normal}
  .contact-left-content .c-case{font-size: 12px;color: #F88912;line-height: 18px;font-weight: 500;margin-top: 15px;}
  .contact-left-content .c-case span{color: #333;}
  .contact-left-content .c-case a{color: #F88912;}
  .contact-left-content .go-more{text-align: center; }
  .contact-left-content .go-more a{position: relative;display: inline-block;text-align: center;line-height: 50px;font-size: 13px;font-weight: bold;color: #333333;width: 180px;height: 50px;border: 1px solid #333333;border-radius: 25px;}
  .contact-left-content .go-more .btn-right{position:absolute;top: 50%;right: -18px;width: 36px;margin-top: -4.5px;}
  .contact-left-content .go-more a:hover .btn-right{transition: all .6s;transform: translateX(10px);}


/* 锚点 */
.contact-right{ width: 222px; overflow-y: auto;overflow-x: hidden; overscroll-behavior-y: contain;}
.anchor-m{ top: 130px;position: fixed;}
.contact-right::-webkit-scrollbar{width: 6px; height: 100%;  border-radius: 3px;/*滚动条整体样式*/}
.contact-right::-webkit-scrollbar-thumb{ background: #fff; border-radius: 3px;/*滚动条里面小方块*/}
.contact-right::-webkit-scrollbar-track{ background: #EBEBEB; border-radius: 3px;/*滚动条里面轨道*/}
.contact-right .right-title p{ font-size: 20px; font-weight: bold; color: #333333;}
.contact-right .right-title-line{width: 222px; height: 1px; background: #FFFFFF;margin-top:30px;}
.contact-right .anchor{margin-top:44px;border-left:1px solid #fff;}
.contact-right .anchor-item{ padding-bottom: 18px;cursor: pointer;}
.contact-right .anchor-item:last-child{  padding-bottom: 0;}
.contact-right .anchor-item p{font-size: 14px;font-weight: 500;color: #333333;padding-left:20px;margin-left:-1px;margin-bottom:11px;}
.contact-right .anchor-item .active-p{border-left:1px solid #EF7E00;color:#F07E00;}
.contact-right .anchor-line{ width: 64px;height: 1px;background: #EF7E00;margin-left:20px;animation:progress2 2s linear}
@keyframes progress2 {
  from {
    width: 0;
  }
  to {
    width: 64px;
  }
}