@charset "utf-8";
/*
    author:PengJin;
    date:2021-04-02;
*/
body{background:#f1f1f1;}
.banner .swiper-slide a:hover { cursor: url(../images/Common/favicon2.ico), default;}
.design a:hover {cursor: url(../images/Common/favicon2.ico), default;}
#five-features a:hover {cursor: url(../images/Common/favicon.ico), default;}
.case a:hover {cursor: url(../images/Common/favicon2.ico), default;}
.video .video-con .item:hover {cursor: url(../images/Common/favicon2.ico), default;}
.video a:hover {cursor: url(../images/Common/favicon.ico), default;}
.news a:hover {cursor: url(../images/Common/favicon.ico), default;}
.footer a:hover {cursor: url(../images/Common/favicon2.ico), default;}
@media(max-width:1200px){
body{padding-bottom:60px;}
}

/*--banner--*/
.banner{position:relative;z-index:1;width:100%;overflow:hidden;clear:both;height:650px;}
.banner .swiper-slide{overflow:hidden; position: relative; height:650px;}
.banner .swiper-slide a,.banner .swiper-slide picture{display:block;width:100%;}
.banner .swiper-slide picture > img {display:block;position:relative;left:50%;width:1920px;transform: translateX(-960px) scale(1.1);transition:1s linear 2s;} 
.banner .swiper-slide.swiper-slide-active picture > img{transition:3s linear;transform:translateX(-960px) scale(1);}
.banner .swiper-slide .inner[data-pos="left"] { position:absolute; width: 1400px; left:50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: left;}
.banner .swiper-slide .inner[data-pos="center"] { position:absolute; width: 1400px; left:50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center;}
.banner .swiper-slide .inner[data-pos="right"] { position:absolute; width: 1400px; left:50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: right;}
.banner .swiper-slide .inner .swiper-logo { display: block; width: 220px;}
.banner .swiper-slide .inner[data-pos="right"] .swiper-logo { margin: 0;}
.banner .swiper-slide .inner[data-pos="center"] .swiper-logo { margin: 0 auto;}
.banner .swiper-slide .inner[data-pos="right"] .swiper-logo {float: right; margin-bottom: 20px;}
.banner .swiper-slide .inner h2 { clear: both;margin: 20px 0; font-size: 36px; color: #fefefe;}
.banner .swiper-slide .inner p { font-size: 20px; color: #fefefe;font-weight: 300;}
.banner .swiper-pager{position:absolute;top: auto;z-index:9;left:0;right: auto;bottom: 60px!important;width:100%;text-align:center;}
.banner .swiper-pager span{position:relative;display: inline-block!important;margin: 0 15px!important;width:9px;height:9px;background:#fff;opacity:1;border-radius: 0;}
.banner .swiper-pager span.swiper-pagination-bullet-active{background:#c7000b;}
.banner .prev,.banner .next{position:absolute;z-index:9;top:50%;width:60px;height:60px;line-height:58px;color:#fff;text-align:center;cursor:pointer;outline:none;transform:translateY(-50%); opacity:.7}
.banner .prev i,.banner .next i { font-size:42px; font-weight:normal;}
.banner .prev{left:5%;}
.banner .next{right:5%;}
.banner .prev:hover,.banner .next:hover{color:#fff;opacity:1;}
@media (max-width:1440px) {
  .banner .swiper-slide .inner { width: 1000px!important; }
}
@media(max-width:1200px){
.banner{margin-top:0;height:auto;}
.banner .prev,.banner .next{display:none;}
.banner .swiper-slide{height:auto;}
.banner .swiper-slide .inner {width: 100%!important;float: none!important;text-align: center!important;padding: 0 20px;}
.banner .swiper-slide .inner .swiper-logo { width:180px;margin: 0 auto!important;}
.banner .swiper-slide .inner h2 { margin:10px 0; font-size:20px;}
.banner .swiper-slide .inner p { font-size:14px;}
.banner .swiper-slide picture > img {position:static;width:100%;transform: none!important;transition: none;}
.banner .swiper-pager{left:0;width:100%;bottom:30px;text-align:center;width:100%;transform:translateX(0);}
.banner .swiper-pager span{margin: 0 6px!important;width:7px;height:7px;}
}
/*--end banner--*/

/* design */
.design { padding-top: 70px; overflow: hidden; background: #fff;}
.design .design-list:nth-child(1) { position: relative; float: left; width: 50%;animation:fadeinL 4s;}
.design .design-list:nth-child(2) { position: relative; float: left; width: 50%;animation:fadeinR 4s;}
.design .design-list:nth-child(1) img {  width: 960px;}
.design .design-list:nth-child(2) img {margin-left: -75px;width: 1055px;}
.design .design-list p { position: absolute; left: 0; top: 50%; width: 100%; margin-top:-12px; font-size: 24px; color: #fff; text-align: center;}
.design .design-list:hover img { opacity: .8;}
@media (max-width:1440px) {
  .design .design-list:nth-child(1) img { width:720px;}
  .design .design-list:nth-child(2) img {width: 792px; margin-left: -45px;}
}
@media (max-width:1400px) {
  .design .design-list:nth-child(1) img { width:704px;}
  .design .design-list:nth-child(2) img {width: 774px; margin-left: -45px;}
}
@media (max-width:1200px) {
  .design { padding:20px 0;}
  .design .design-list:nth-child(1),.design .design-list:nth-child(2) { margin: 10px 0; float: none; width: 100%;}
  .design .design-list:nth-child(2) img { margin-left:-200px;}
}
/* design end */


/* case */
.case { padding: 60px 0 100px;overflow: hidden; background: #333;}
.case .wrap-title h2 a { color: #fff;}
.case .wrap-title p { color: #fff; opacity: .5;}
.case .case-con {margin: 55px -2px 0;overflow: hidden;}
.case .caseTp,.case .caseBm  { overflow: hidden;}
.case .caseBm-lft .item:not(:nth-child(3)) { float: left; width: calc(100%/2 - 4px);}
.case  .caseTp-lft,.case  .caseTp-rigt,.case  .caseBm-lft, .case .caseBm-rigt{ float: left;width:calc(100%/2);}
.case .case-con .item { margin:2px; position: relative;float: left;}
.case .case-con .caseTp_rigt .item { height: calc(100%/2 - 4px);}
.case .case-con .item .pic { display: block; overflow: hidden;}
.case .case-con .item .text { position: absolute; left: 0; bottom: 0; width: 100%; padding: 30px 25px; box-sizing: border-box; background: rgba(0,0,0,.5);}
.case .case-con .item .text h3 { font-size: 18px; color: #fff;white-space: nowrap; text-overflow: ellipsis;  overflow: hidden;}
.case .case-con .item .text p { margin-top: 15px; font-size: 14px; color: rgba(255,255,255,.5);display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2; overflow: hidden;}
.case .case-con .item img { transition:all 1s; filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)}
.case .case-con .item:hover img { filter: none; transform: scale(1.05);}
.case .caseTp-lft .item {animation:fadeinL 1.2s;}
.case .caseTp-rigt .item:nth-child(1) {animation:fadeinR 1.2s;}
.case .caseTp-rigt .item:nth-child(2) {animation:fadeinR 1.5s;}
.case .caseBm-lft .item:nth-child(1) {animation:fadeinL 1.2s;}
.case .caseBm-lft .item:nth-child(2) {animation:fadeinR 1.5s;}
.case .caseBm-lft .item:nth-child(3) {animation:fadeinB 1.7s;}
.case .caseBm-rigt .item {animation:fadeinR 2s;}
@media (max-width:1200px) {
  .case {display: none;}
}

/* case end */


/* case_m */
.case_m { display: none;}
@media (max-width:1200px) {
.case_m { display: block; padding: 40px 10px; }
.case_m .case-con {margin-top: 25px;overflow: hidden;}
.case_m .caseTp-lft,.case_m .caseTp-rigt { float:left; width:calc(100%/2 - 4px); margin:0 2px;}
.case_m .caseBm .item {position: relative;float: left;margin: 0 2px;width: calc(100%/2 - 4px);}
.case_m .caseTp-lft .item,.case_m .caseTp-rigt .item {margin:4px 0;position: relative;}
.case_m .case-con .item .text {position: absolute;left: 0;bottom: 0;width: 100%;padding:5px 10px;box-sizing: border-box;background: rgba(0,0,0,.5);text-align: center;}
.case_m .case-con .item .text h3 {font-size: 14px;color: #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.case_m .item .pic img{filter:grayscale(100%);}
.case_m .item:hover .pic img{filter:grayscale(0);}
}
/* case_m end */

/* video */
.video { padding: 110px 0 0;overflow: hidden; background: #fff;}
.video .video-con { margin: 50px -2px;}
.video .video-con .video-fl { margin:0 2px; float: left; width: calc(100%/2 - 4px);animation:fadeinL 1.5s;}
.video .video-con .video-ri { margin:0 2px; float: left; width: calc(100%/2 - 4px);animation:fadeinR 1.5s;}
.video .video-con .item { position:relative; display: inline-block;width: 100%;overflow: hidden;}
.video .video-con .item p { font-size:18px; color:#fff; position:absolute; left:0; bottom:0; width:100%; text-align:center; padding:10px 0 20px; z-index:3;}
.video .video-con .item::after { content: ''; display: block; position: absolute;left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3) url(../images/Index/player.png) no-repeat center;}
.video .video-con .item img { transition:all 1s; filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)}
.video .video-con .item:hover img {filter: none; transform: scale(1.05);}
.video .video-con .item:hover::after { background:url(../images/Index/player.png) no-repeat center;}
@media (max-width:1200px) {
  .video {display: none; padding: 40px 10px;}
}
/* video end */

/* video_m */
.video_m { display: none; }
.video_m .video-con .item{position:relative;text-align:center;}
.video_m .video-con .item img{display:block;}
.video_m .video-con .item p{position:absolute;left:0;bottom:0;width:100%;padding:10px;font-size:14px;color:#fff;}
@media (max-width:1200px) {
  .video_m { display: block; padding: 40px 10px;background: #fff;}
  .video_m .video-con { margin:30px 0 0; overflow: hidden;}
  .video_m .video-con .item:nth-child(1) {margin-bottom: 2px;display: block;width: 100%;position: relative;}
   .video_m .video-con .item:nth-child(1)::after { content: ''; display: block; position: absolute;left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3) url(../images/Index/player.png) no-repeat center;background-size: 15%;}
  .video_m .video-con .item:nth-child(n+2) { position:relative; float: left;margin:2px;width: calc(100%/2 - 4px);}
  .video_m .video-con .item:nth-child(n+2)::after { content: ''; display: block; position: absolute;left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3) url(../images/Index/player.png) no-repeat center;background-size: 20%;}
}
/* video_m end */

/* indexHonor */
.indexHonor { margin-top: -4px; padding: 130px 0; display: block; background:#ededed;}
.indexHonor .container { position:relative;}
.indexHonor .honor-slide {overflow: hidden;}
.indexHonor .honor-slide .swiper-wrapper{transition-timing-function: linear;}
.indexHonor .honor-slide .pic { overflow: hidden;}
.indexHonor .honor-slide .pic img { transition: all 1s;}
.indexHonor .honor-slide p { padding:0  10px 15px;white-space: nowrap; text-overflow: ellipsis;  overflow: hidden; text-align: center; background: #fff; color: #666; font-size: 14px;}
.indexHonor .prev,.indexHonor .next{position:absolute;z-index:9;top: 50%;width: 50px;height: 50px;line-height: 50px;color:#666;text-align:center;cursor:pointer;outline:none;background: #e4e4e4;transform:translateY(-50%);border-radius: 50%;}
.indexHonor .prev{left: -100px;}
.indexHonor .next{right: -100px;}
.indexHonor .prev:hover,.indexHonor .next:hover{color:#fff;background:#c7000b;border-color:#c7000b;opacity:1;}

@media (max-width:1440px) {
    .indexHonor .prev{left: -50px;}
    .indexHonor .next{right: -50px;}
}
@media (max-width:1200px) {
    .indexHonor {padding:40px 10px;}
    .indexHonor .prev{left: 0;}
    .indexHonor .next{right: 0;}
}
/* indexHonor end */


/* --  video-pop -- */
.video-pop{display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:#0009;background:rgba(0,0,0,0.8);}
.video-inner{position:fixed;top:50%;left:50%;margin-top: -400px;margin-left: -700px;width: 1400px;height: 800px;background:#000;}
.video-inner iframe{display:block;width: 1400px;height: 800px;}
.video-close{position:absolute;left:100%;top:0;width: 32px;height:32px;text-align: center;line-height: 32px;cursor:pointer;background:#fff ;}
.video-close i {font-size: 24px;color: #000;font-weight: bold;}
.video-close:hover{background-color:#c7000b; }
.video-close:hover i { color: #fff;}
@keyframes shaow{
    0%{box-shadow: 0px 0 0 0 rgba(0, 0, 0, 0.2);}
    100%{box-shadow: 0px 7px 40px 0 rgba(0, 0, 0, 0.2);}
}
@media(max-width:1440px) {
    .video-inner { margin-left:-600px; margin-top:-325px; width:1200px; height:650px;}
    .video-inner iframe { width:1200px; height:650px;}
}
@media (max-width:992px) {
    .video-inner { width: 100%; height: 350px; left: 0; top: 25%; margin: 0;}
    .video-close { left: auto; right: 0; top: -32px;}
    .video-inner iframe { display: block; width: 100%; height: 350px;}
}
/* --end video-pop -- */


/* news */
.news { padding:50px 0 110px; overflow: hidden; background: #fff;}
.news .wrap-title {  text-align: left; width: auto;}
.news .wrap-title i { margin: 0 0 15px;}
.news .news-con { margin-top: 30px; overflow: hidden;}
.news .news-con .item { margin: 15px 0; float: left; width: calc(100%/3);}
.news .news-con .item:nth-child(1),.news .news-con .item:nth-child(4),.news .news-con .item:nth-child(7),.news .news-con .item:nth-child(10) {animation:fadeinR 1.5s;}
.news .news-con .item:nth-child(2),.news .news-con .item:nth-child(5),.news .news-con .item:nth-child(8),.news .news-con .item:nth-child(11) {animation:fadeinR 1.9s;}
.news .news-con .item:nth-child(3),.news .news-con .item:nth-child(6),.news .news-con .item:nth-child(9),.news .news-con .item:nth-child(12) {animation:fadeinR 2.6s;}
.news .news-con .item h3 {float: left;width: 70%;font-size: 16px;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.news .news-con .item em { float: left; margin-left: 15px; font-size: 14px; color: #999; line-height: 24px;}
.news .news-con .item:hover h3,.news .news-con .item:hover em { color: #c7000b;}
@media (max-width:1200px) {
  .news { padding: 40px 15px;}
  .news .wrap-title { text-align: center;}
  .news .wrap-title i { margin: 0 auto 10px;}
  .news .news-con .item { margin: 5px 0; width: calc(100%/1);}
  .news .news-con .item em { float: right;}
  .news .news-con .item:nth-child(n+10) { display: none;}
}
/* news end */


#five-features {
    padding: 60px 0;
    text-align: center;
    background: #fff;
  }
  
  #five-features .feature {
    float:left;
    width: 20%;
    display:block;
    animation: fadeinB 2s;
  }
  
  #five-features .feature:first-child {
    margin-left:0px;
  }
  
  #five-features .feature .feature-icon {
    width:110px;
    height: 110px;
    margin: 0 auto;
  }
  
  #five-features .feature .feature-icon.a {
    background:url(../images/Index/features01.png);
  }
  #five-features .feature:hover .block-title {color: #222;}

  #five-features .feature .feature-icon.a.animated {
    -webkit-animation:playa 4.33s steps(104);
    -moz-animation: playa 4.33s steps(104);
    -o-animation: playa 4.33s steps(104);
    animation: playa 4.33s steps(104);
  }
  @-webkit-keyframes playa{from{background-position:0px}to{background-position:-11440px}}
  @-moz-keyframes playa{from{background-position:0px}to{background-position:-11440px}}
  @-ms-keyframes playa{from{background-position:0px}to{background-position:-11440px}}
  @-o-keyframes playa{from{background-position:0px}to{background-position:-11440px}}
  @keyframes playa{from{background-position:0px}to{background-position:-11440px}}
  
  #five-features .feature .feature-icon.b {
    background:url(../images/Index/features02.png);
  }
  
  #five-features .feature .feature-icon.b.animated {
    -webkit-animation:playb 5.375s steps(129);
    -moz-animation: playb 5.375s steps(129);
    -o-animation: playb 5.375s steps(129);
    animation: playb 5.375s steps(129);
  }
  @-webkit-keyframes playb{from{background-position:0px}to{background-position:-14190px}}
  @-moz-keyframes playb{from{background-position:0px}to{background-position:-14190px}}
  @-ms-keyframes playb{from{background-position:0px}to{background-position:-14190px}}
  @-o-keyframes playb{from{background-position:0px}to{background-position:-14190px}}
  @keyframes playb{from{background-position:0px}to{background-position:-14190px}}
  
  #five-features .feature .feature-icon.c {
    background:url(../images/Index/features03.png);
  }
  
  #five-features .feature .feature-icon.c.animated {
    -webkit-animation:playc 5.5s steps(132);
    -moz-animation: playc 5.5s steps(132);
    -o-animation: playc 5.5s steps(132);
    animation: playc 5.5s steps(132);
  }
  @-webkit-keyframes playc{from{background-position:0px}to{background-position:-14520px}}
  @-moz-keyframes playc{from{background-position:0px}to{background-position:-14520px}}
  @-ms-keyframes playc{from{background-position:0px}to{background-position:-14520px}}
  @-o-keyframes playc{from{background-position:0px}to{background-position:-14520px}}
  @keyframes playc{from{background-position:0px}to{background-position:-14520px}}
  
  #five-features .feature .feature-icon.d {
    background:url(../images/Index/features04.png);
  }
  
  #five-features .feature .feature-icon.d.animated {
    -webkit-animation:playd 6.125s steps(147);
    -moz-animation: playd 6.125s steps(147);
    -o-animation: playd 6.125s steps(147);
    animation: playd 6.125s steps(147);
    border-right:1px solid #fff;
  }
  @-webkit-keyframes playd{from{background-position:0px}to{background-position:-16171px}}
  @-moz-keyframes playd{from{background-position:0px}to{background-position:-16171px}}
  @-ms-keyframes playd{from{background-position:0px}to{background-position:-16171px}}
  @-o-keyframes playd{from{background-position:0px}to{background-position:-16171px}}
  @keyframes playd{from{background-position:0px}to{background-position:-16171px}}
  
  #five-features .feature .feature-icon.e {
    background:url(../images/Index/features05.png);
  }
  
  #five-features .feature .feature-icon.e.animated {
    -webkit-animation:playe 3.08s steps(74);
    -moz-animation: playe 3.08s steps(74);
    -o-animation: playe 3.08s steps(74);
    animation: playe 3.08s steps(74);
  }
  @-webkit-keyframes playe{from{background-position:0px}to{background-position:-8140px}}
  @-moz-keyframes playe{from{background-position:0px}to{background-position:-8140px}}
  @-ms-keyframes playe{from{background-position:0px}to{background-position:-8140px}}
  @-o-keyframes playe{from{background-position:0px}to{background-position:-8140px}}
  @keyframes playe{from{background-position:0px}to{background-position:-8140px}}
  
  #five-features .feature .feature-icon img {
    display:block;
    position: absolute;
    max-width: none;
    left:0;
    top:0;
  }
  
  #five-features .block-title {
    margin:12px 0;
    font-size: 18px;
    color: #999;
    text-align: center;
  }
  @media (max-width:1200px) {
    #five-features { display: none;}
  }