﻿
/* ===================首页样式========================== */
/* common */
.indTitle{width: 100%;text-align: center;}
.indTitle .name{font-size:40px;color:#000;line-height:1;text-align:center}
.indTitle .desc{max-width:770px;text-align:center;margin: 16px auto 0;line-height:32px;font-size:16px}
.indTitle.white .name, .indTitle.white .desc{color: #fff;}

/* banner */
.banner{position:relative;width: 100%;background: #1f3638;}
.banner-bg img{width:100%;object-fit:cover}
.banner-bg img.pc{display:block;height:100vh;}
.banner-bg img.mb{display:none}
.banner-cont{position:absolute;width:100%;height:100%;left:0;top:0}
.banner-cont .contain{height:100%;display:flex;flex-direction:column;justify-content:top;align-items:center;position:relative;z-index:1;margin-top:180px}
.banner-cont .desc{font-family: "思源宋体", "Source Han Serif SC";font-style:italic;color:#fff;font-weight:300;font-size:30px;line-height:1;margin-bottom:30px}
.banner-cont .title{font-family:'宋体';color:#fff;font-size:60px;text-align:center;line-height: 1.2;}
.banner-cont .title span{font-family:'宋体';display:block;font-weight:700}
.banner-ring{position:absolute;z-index: 3;user-select: none;pointer-events: none;left:50%;top:50%;animation: 30s ring linear both infinite;transition:all 1s ease;width:580px;height:580px;margin: -290px 0 0 -290px;border: 2px dotted rgba(255,255,255,.5);border-radius:50%}
.banner-ring>div{display:block;width:10px;height:10px;border-radius:50%;position:absolute;transform-origin: 0 290px;left: 50%;top: -6px;margin-left: -5px;}
.banner-ring>div.red{background:#e6002d;}
.banner-ring>div.blue{background:#00479d;transform: rotate(120deg);margin-left: 2px;top: 2px;}
.banner-ring>div.gray{background:#a7a9ac;transform: rotate(240deg);margin-left: -2px;top: 3px;}
@keyframes ring{0%{transform: rotate(0)} 100%{transform:rotate(365deg)} }
/* -- */
.banner-cont .desc, .banner-cont .title{opacity: 0;}
.swiper-slide-active .banner-cont .desc{animation: bannerRun 1s ease both .2s;}
.swiper-slide-active .banner-cont .title{animation: bannerRun 1s ease both .5s;}
@keyframes bannerRun {
    0%{animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}
    40%{animation-timing-function:ease-in;;transform:perspective(400px) rotateX(-20deg)}
    60%{opacity:1;transform:perspective(400px) rotateX(10deg)}
    80%{opacity:1;transform:perspective(400px) rotateX(-5deg)}
    to{opacity:1;transform:perspective(400px)}
}
/* -- */
.banner-nav{position:absolute;z-index:5;right:4.5%;bottom:46px;display:flex;align-items:center}
.banner-line i{width:300px;background:rgba(255,255,255,.3);position:relative;height:1px;overflow:hidden;display:block}
.banner-line i:after{content:'';width:0%;height:100%;position:absolute;left:0;top:0;background:#fff;z-index:1}
.banner-line i.active:after{animation: lineRun 4.2s linear both;}
@keyframes lineRun{0%{width: 0;}100%{width: 100%;}}
.banner-play{display:flex;width:9px;height:12px;margin-left:22px;}
.banner-play i{display:block;background:url("../image/banner-pause.png") no-repeat center;width:12px;height:12px;}
.banner-play.on i{background-image:url("../image/banner-play.png")}
.banner-nav-btn:last-child{margin-left:15px;padding-left:15px;position:relative}
.banner-nav-btn:last-child:after{content:'';width:1px;background:rgba(255,255,255,.5);height:10px;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.banner-pagin{position:static;width:auto;line-height:1;margin:0 18px 0 26px}
.banner-pagin span{color:#fff;opacity:.3;font-family:"Roboto";font-size:16px}
.banner-pagin span.on{opacity:1}
.banner-pagin span.mid{padding:0 5px}

.banner-line, .banner-play{display: none !important;}


/* 走进华发 */
.data{padding:96px 0;overflow: hidden;}
.data ul{display:flex;justify-content:center;margin-top:50px}
.data li+li{margin-left:200px}
.data-icon{width: 74px;height:84px;display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1;margin: 0 auto;}
.data-icon.one:after{content:'';width:4px;height: 2px;background:#f52c1a;position:absolute;top: auto;bottom:12px;left:35px;animation: dataRun1 4s ease infinite;z-index:-1}
@keyframes dataRun1 {0%{height: 2px;bottom: 12px;top: auto;}50%{height: 49px;bottom: 12px;top: auto;}100%{height: 2px;}}
.data-icon.two:after{content:'';width:9px;height:9px;animation: dataRun2 8s ease infinite;background:#f52c1a;position:absolute;bottom:24px;left:41px;transform:skewY(-27deg);z-index:-1}
@keyframes dataRun2 {0%{bottom:24px;}16%{bottom: 35px;}32%{bottom: 42px;}50%{bottom: 50px;}66%{bottom: 42px;}84%{bottom: 35px;}100%{bottom:24px;}}
.data-icon.three:after{content:'';width:24px;height:14px;background:#f52c1a;position:absolute;bottom:39px;left:25px;animation: dataRun3 4s ease infinite;z-index:-1}
@keyframes dataRun3 {0%{transform: scale(0.6);}50%{transform: scale(1.1);}100%{transform: scale(0.6);}}
.data li .title{font-size:18px;color:#333;margin:26px 0 20px;text-align:center}
.data li .num{line-height:1;font-size:18px;text-align: center;color: #333;}
.data li .num p{font-size:50px;font-family:"Roboto";color:#333;line-height:1;padding-right:8px;font-weight:700;display: inline-block;}

/* 业务领域 */
.business{padding:162px 0 210px;overflow: hidden;background: #949290;position: relative;}
.business-bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.business-bg-li{position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;transition: all .6s linear;}
.business-bg-li.active{opacity: 1;}
.business .contain{position: relative;z-index: 5;}
.business ul{display:flex;justify-content:space-between;margin-top:120px;position:relative}
.business ul:before{content:'';height:2px;width:0%;left:-50%;background:#b2aea9;position:absolute;top:130px;transition: all 2.8s ease .2s;}
.business ul.active:before{width: 200%;}
.business li{width:238px;height:238px;position:relative;}
.business li a{display: block;width: 100%;height: 100%;padding-top:40px;position: relative;z-index: 10;}
.business li::before{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius:50%;border:1px dashed rgba(255,255,255,.5);}
.business li:after{content:'';width:8px;height:8px;border-radius:50%;background:#fff;position:absolute;left:50%;top:126px;z-index:1;transform:translateX(-50%);transition: all .4s ease 3s}
.business li i{width:100%;height:66px;display:flex;justify-content:center;align-items:flex-end;transition: all .4s ease}
.business li h3{color:#fff;font-size:20px;text-align:center;margin-top:48px}
.business li h3 span{display: inline-block;}
.business li svg{position: absolute;top: -1px;left: -1px;width: calc(100% + 2px);height: calc(100% + 2px);transform: rotate(6deg);}
.business li svg circle{fill: none;stroke: #b8b4af;stroke-width: 2px;}
.business li svg.business-svg-1 circle{stroke-dasharray:550;stroke-dashoffset:752;transition: all .6s linear;}
.business li svg.business-svg-2 circle{stroke-dasharray:752;stroke-dashoffset:752;transition: all .6s linear .6s;}
.business li:hover svg.business-svg-1 circle{stroke-dasharray: 752;}
.business li:hover svg.business-svg-2 circle{stroke-dasharray: 1102;}
.business li.active h3 span{animation: busRun 1s linear both;}
@keyframes busRun {0%{transform: translateY(0);}50%{transform: translateY(-8px);}100%{transform: translateY(0);}}

/* 新闻 */
.news{padding:100px 0;overflow: hidden;}
.news-list{display:flex;justify-content:space-between;margin-top:50px;flex-wrap: wrap;}
.news-li{position:relative;width:32.7%;overflow:hidden;}
.news-lft h2{max-width:82%;}
.news-lft .see{display: inline-block;margin-top:24px;padding-right: 20px;font-size: 16px;background: url('../image/arrow-rgt.png') no-repeat right center;transition: all .4s ease;}
.news-lft:hover img ,.news-mid a:hover img{transform:scale(1.1)}
/* .news-lft:hover .see{color: #e6002d;background-image: url('../images/index/arrow-rgtH.png');} */
.news-cont{position:absolute;width:100%;height:100%;left:0;top:0;padding:34px;color:#fff}
.news-cont h2{font-size:18px;line-height:28px;transition: all .8s ease;max-height: 56px;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.news-cont .time{font-size:16px;margin-top:14px}
.news-mid{display:flex;flex-direction:column;justify-content:space-between;}
.news-lft img{height: 488px;}
.news-mid a img{height: 238px;}
.news-lft img, .news-mid a img{width:100%;object-fit:cover;transition: all .6s ease;filter: brightness(0.6);}
.news-mid a{display: block;position:relative;transition:all .6s ease;overflow: hidden;width: 100%;}
.news-rgt{padding:8px 40px;position:relative;top:0;transition:all .6s ease;background:#edeef0}
.news-rgt .tit{font-size:18px;color:#666;line-height:26px;transition: all .4s ease;max-height: 52px;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.news-rgt .time{font-size:16px;color:#666;margin-top:10px;display:block}
.news-rgt li a{display: block;padding: 32px 0;}
.news-rgt li:not(:last-child){border-bottom:1px solid #dcdcdc}
.news-rgt li a:hover .tit{color:#246ee1}


/* -------------------------PC端--------------------------- */
@media all and (max-width:90700px) {
    /* 1600 × (900) */
	.banner-cont .title{font-size: 34px}
}

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .banner-cont .title{font-size: 34px}
    .banner-cont .desc{margin-bottom: 20px}
    .indTitle .name{font-size: 36px}
    .indTitle .desc{line-height: 30px}
    .data {padding: 80px 0;}
    .business {padding: 120px 0 160px;}
    .data li .num p{font-size: 44px;}
    .business ul{margin-top: 80px}
    .business li h3{margin-top: 44px;font-size: 18px;}
    .business li{width:210px;height: 210px;}
    .business li a{padding-top: 26px;}
    .business li svg.business-svg-1 circle {stroke-dasharray: 484;stroke-dashoffset: 660;}
    .business ul:before{top: 114px;}
    .business li svg.business-svg-2 circle {stroke-dasharray: 660;stroke-dashoffset: 660;}
    .business li:hover svg.business-svg-2 circle {stroke-dasharray: 968;}
    .business li:after{top: 111px;}
    .banner-ring{width:500px;height: 500px;margin: -250px 0 0 -250px;}
    .banner-ring>div {transform-origin: 0 250px;}
    .banner-ring .dot.red{left: 192px}
    .banner-ring .dot.blue{left: 192px}
    .banner-ring .dot.gray{top: 192px}
    .news {padding: 80px 0;}
    .news-rgt {padding: 0 32px;}
    .news-rgt li a {padding: 26px 0;}
    .news-cont {padding: 28px;}
    .news-mid a img{height: 204px;}
    .news-lft img {height: 420px;}
    .banner-line i {width: 250px;}
}

@media all and (max-width:1439px) {
    /* 1360 */
}

@media all and (max-width:1359px) {
    /* 1280 */
}

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .banner-cont .title{font-size: 44px}
    .banner-cont .desc{font-size: 28px;margin-bottom: 15px}
    .banner-line i{width: 250px}
    .indTitle .name{font-size: 32px}
    .indTitle .desc{font-size: 15px;line-height: 28px}
    .data {padding: 70px 0;}
    .data li .title {margin: 20px 0 16px;}
    .data li .num p{font-size: 38px;}
    .business {padding: 90px 0 110px;}
    .business ul{margin-top: 60px}
    .business li{width: 168px;height: 168px;}
    .business li a{padding-top: 12px}
    .business ul:before {top: 92px;}
    .business li:after{top: 89px}
    .business li svg.business-svg-1 circle {stroke-dasharray: 388;stroke-dashoffset: 530;}
    .business li svg.business-svg-2 circle {stroke-dasharray:530;stroke-dashoffset: 530;}
    .business li:hover svg.business-svg-2 circle {stroke-dasharray: 776;}
    .business li i img{width: 55px}
    .business li h3{margin-top: 30px;font-size: 15px}
    .news-list{margin-top: 40px}
    .news-cont{padding: 20px}
    .news-cont p,.news-rgt .tit{font-size: 16px;line-height: 26px}
    .news-rgt{padding: 0 20px}
    .banner-nav {right: 4%;bottom: 32px;}
    .news-rgt li a {padding: 22px 0;}
    .news-cont h2 {font-size: 16px;line-height: 26px;max-height: 52px;}
    .news-lft h2 {max-width: 100%;}
}

@media all and (max-width:1151px) {
    /* 1024 */
    .banner-bg img.pc {height: 70vh;}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .data li+li {margin-left: 100px;}
    .business ul:before, .business li svg{display: none;}
    .business ul{flex-wrap: wrap;}
    .business li {width: 138px;height: 138px;}
    .business li a{padding-top: 6px;}
    .business li h3 {margin-top: 16px;font-size: 14px;}
    .business li:after {top: 78px;width: 6px;height: 6px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner{overflow:hidden}
    .banner-pagin {margin: 0 10px 0 14px;}
    .banner-nav-btn:last-child {margin-left: 10px;padding-left: 10px;}
    .banner-line i {width: 100px;}
    .banner-play {margin-left: 12px;}
    .banner-cont .desc {font-size: 20px;margin-bottom: 14px;}
    .banner-cont .title {font-size: 24px;}
    .banner-ring {width: 280px;height: 280px;margin: -160px 0 0 -140px;}
    .banner-ring>div {transform-origin: 0 140px;}
    .banner-bg img.pc{display: none;}
    .banner-bg img.mb{display: block;min-height: 440px;}
    .banner-cont {padding-bottom: 40px;}
    .banner-nav {bottom: 28px;}
    .indTitle .name {font-size: 24px;}
    .indTitle .desc {font-size: 15px;margin-top: 12px;line-height: 23px;}
    .data {padding: 40px 0;}
    .data li+li {margin-left: 0;}
    .data li .title {margin: 10px 0;font-size: 15px;}
    .data li .num {font-size: 14px;}
    .data li .num p {font-size: 28px;padding-right: 4px;}
    .data ul {margin-top: 30px;justify-content: space-between;}
    .business {padding: 40px 0 50px;}
    .business ul {margin-top: 12px;}
    .business li {margin-top: 20px;width: 158px;height: 158px;}
    .business li a{padding-top: 16px;}
    .business li h3 {margin-top: 18px;font-size: 15px;}
    .news-lft img{height: auto;}
    .news-li{width: 100%;margin-top: 16px;}
    .news-list {margin-top: 16px;}
    .news-cont .time {font-size: 14px;margin-top: 10px;}
    .news-lft .see {margin-top: 8px;padding-right: 14px;}
    .news-mid a img {height: auto;}
    .news-mid{display: block;}
    .news-mid a{margin-top: 16px;}
    .news-mid a:first-child{margin-top: 0;}
    .news {padding: 40px 0;}
    .business li:after{top: 90px;}
}