.header-content{width: 100%;height: 80px;background: #09aff3;position: fixed;top: 0;left: 0;z-index: 99}
.header{max-width: 1420px;margin: 0 auto;color: #fff;position: relative;display: flex;height: 100%}
.logo{width: 300px;height: 100%}
.logo img{height: 92%;position: absolute;top: 50%;transform: translate(0,-50%)}
.menu{flex: 1;margin: 0 8vw;display: flex;position: relative}
.menu p{color: #fff;width: 20%;line-height: 5;cursor: pointer;transition: color .2s;text-align: center}
.menu p.active{color: #fecc00}
.menu-toggle{display: none;width: 36px;height: 32px;position: relative;background: none;border: 0;cursor: pointer;margin-left: auto;align-self: center;padding: 0}
.menu-toggle span{display: block;position: absolute;left: 6px;right: 6px;height: 3px;background: #fff;border-radius: 2px;transition: .3s}
.menu-toggle span:nth-child(1){top: 7px}
.menu-toggle span:nth-child(2){top: 14px}
.menu-toggle span:nth-child(3){top: 21px}
.menu-toggle.open span:nth-child(1){top: 14px;transform: rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity: 0}
.menu-toggle.open span:nth-child(3){top: 14px;transform: rotate(-45deg)}
.menu-indicator{position: absolute;bottom: 0;left: 0;height: 4px;width: 0;background: #fecc00;border-radius: 2px;z-index: 2;transition: transform .3s ease, width .3s ease}
.header-contact{width: 140px;position: relative}
.top-right-btn{background: #fecc00;color: #333;padding: 8px 0;font-size: 14px;border-radius: 4px;width: 100%;text-align: center;position: absolute;top: 50%;transform: translate(0,-50%);cursor: pointer;transition: .2s}
.header-box{width: 100%;height: 80px}
.banner{width: 100%;height: 640px;background: url('/static/images/bg.jpg')}
.banner-content{max-width: 1420px;margin: 0 auto;height: 100%;display: flex}
.ban-txt{flex: 1}
.ban-txt p{font-size: 20px;padding-top: 178px;line-height: 1.6;color: #666}
.ban-text{display: block;font-size: 40px;padding-bottom: 8px}
.ban-text .bold{color: #09aff3;font-size: 48px}
.ban-txt a{display: inline-block;background: #fecc00;border-radius: 6px;padding: 14px 22px;font-size: 15px;margin-top: 36px;color: #222;transition: .2s}
.ban-pic{width: 560px;position: relative}
.ban-pic img{width: 100%;position: absolute;top: 50%;transform: translate(0,-50%)}
.ban-txt-btn a:last-child{background: #fff;margin-left: 20px}
.title{max-width: 1420px;position: relative;margin: 40px auto 10px;line-height: 1.2;text-align: center;text-align: center}
.small-title{width: 120px;color: #09aff3;height: 30px;line-height: 30px;position: relative;margin: 0 auto 4px;font-size: 19px}
.small-title::before {position: absolute;content: "";left: 0;top: 12px;width: 6px;height: 6px;border-radius: 6px;border-width: 1px;border-style: solid;border-image: none;border-color: #09aff3}
.small-title::after {position: absolute;content: "";right: 0;top: 12px;width: 6px;height: 6px;border-radius: 6px;border-width: 1px;border-style: solid;border-image: none;border-color: #09aff3}
.title-text{font-size: 36px;line-height: 1.3}
.title-text i{font-size: 36px;color: #09aff3}
.title-des{text-align: center;color: #666;padding: 10px 0;font-size: 15px}
.grey-bg{width: 100%;overflow: hidden;background: #f8f9fc}
.service-list{max-width: 1420px;margin: 30px auto 40px}
.service-ul{display: flex;flex-wrap: wrap;width: 100%}
.service-li{margin: 0 10px 18px;background: #fff;width: calc((100% - 60px) / 3);position: relative;border-radius: 10px;overflow: hidden}
.service-li *{transition: .4s}
.service-info{position: relative;z-index: 1}
.service-icon{border: 1px solid #bde6fc;width: 75px;height: 75px;position: relative;margin: 26px 0 0 26px;border-radius: 3px;background: #fff}
.service-icon img{width: 44px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.service-title{padding: 10px 0 10px 26px;font-size: 18px}
.service-txt{color: #555;font-size: 14px;padding: 0 26px;line-height: 1.4;height: 80px;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden}
.service-li .more-btn{font-size: 14px;color: #09aff3;margin: 16px 0 0 26px;height: 40px;display: block}
.service-li-bg{position: absolute;z-index: 0;width: 0;background: #09aff3;display: block;height: 100%;left: 50%;transform: translate(-50%,0)}
.reason-content{max-width: 1420px;margin: 40px auto 70px;display: flex;flex-wrap: wrap}
.reason-li{display: flex;width: 50%;border-bottom: 1px dotted #ccc;padding: 20px 30px}
.reason-icon{width: 60px;height: 60px;background: #e8f5f9;border-radius: 6px;margin-top: 8px;position: relative}
.reason-icon img{position: absolute;width: 40px;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.reason-info{line-height: 1.6;font-size: 14px;color: #666;margin-left: 18px;flex: 1}
.reason-info .bold{display: block;font-size: 20px;padding-bottom: 4px}
.reason-li:first-child,.reason-li:nth-child(3){border-right: 1px dotted #ccc}
.reason-li:nth-child(3),.reason-li:nth-child(4){border-bottom: 0}
.step-content{max-width: 1420px;margin: 0 auto 50px;display: flex;text-align: center;position: relative;padding: 0 20px}
.step-info{flex: 1;padding: 0 50px}
.step-info .bold{font-size: 19px;padding: 6px 0}
.step-info span{color: #666;line-height: 1.2;display: block;font-size: 14px}
.step-info img{width: 70px;border-radius: 8px}
.step-line{width: 8%}
.step-line img{width: 80%;margin-top: 120px}
.about-content{margin: 0 auto 40px;max-width: 1420px;}
.about-info{border-radius: 10px;margin-top: 14px}
.about-title{padding: 20px 0 6px 30px;font-size: 20px;color: #333}
.about-txt{padding: 6px 30px 12px;line-height: 1.8;color: #444;font-size: 14px}
.about-text{border-radius: 10px}
.about-text .bold{padding: 20px 0 6px 30px}
.about-text:first-child{margin-bottom: 16px}
.about-text-show{font-size: 14px;color: #444;padding: 0 30px 20px}
.about-text-show span,.about-txt span{font-size: 14px;color: #09aff3;font-weight: 600}
.flex-content{display: flex;margin: 0 -8px}
.flex-content .about-text{margin: 0 8px}
.stipulate-content{margin: 0 auto;max-width: 1420px;padding: 40px 0 50px;position: relative}
.tipulate-li{margin: 0 8px 20px;display: flex;position: relative;z-index: 1}
.tipulate-left{width: 46px;height: 46px;border-radius: 50%;background: #09aff3;position: relative;margin: 4px 14px 0 0}
.tipulate-left img{width: 28px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.tipulate-right{font-size: 14px;color: #555;flex: 1;text-shadow: 1px 1px 1px #fff}
.tipulate-right .bold{font-size: 15px;padding-bottom: 4px}
.tipulate-right i{color: #bc4b00;font-size: 12px}
.map-bg{position: absolute;z-index: 0;right: 1vw;height: 70%;opacity: 1;top: 50%;transform: translate(0,-50%)}
.footer{padding: 20px 0;background: #09aff3}
.footer-text-pc{font-size: 14px;font-size: 13px;text-align: center;line-height: 1.4;color: #fff}
.footer a{font-size: 14px;color: #fff}
.footer span{font-size: 12px;display: block;background: #18bbfe;color: #fff;padding: 10px 0;margin-bottom: 18px;text-align: center}
.footer-text-wap{display: none}
.company-ul{overflow: hidden}
.company-ul li{display: flex;border-bottom: 1px dotted #ccc;padding: 12px 0}
.company-ul li p:first-child{width: 120px;font-size: 14px}
.company-ul li p:last-child{flex: 1;color: #555;font-size: 14px}
.company-ul li:last-child{border: 0}
/* ===== 滚动出现动画 ===== */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal.show{opacity:1;transform:translateY(0,-50%)}
#stipulate{margin-top: 70px;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}
@media (min-width: 1280px){
	.menu p:hover{color: #fecc00}
	.top-right-btn:hover,.ban-txt-btn a:hover{background: #49c008;color: #fff}
	.service-li:hover .service-li-bg{width: 100%}
	.service-li:hover *{color: #fff}
	.footer a:hover{color: #eee}
}
/* 平板及以下：≤1024px */
@media (max-width: 1024px){
	.logo{width: 220px}
	.menu{margin: 0 3vw}
	.banner{height: 520px}
	.ban-txt p{padding-top: 120px;font-size: 18px}
	.ban-text{font-size: 32px}
	.ban-text .bold{font-size: 38px}
	.ban-pic{width: 420px}
	.service-li{width: calc((100% - 40px) / 2)}
	.reason-li{padding: 18px 20px}
	.step-info{padding: 0 24px}
	.title-text, .title-text i{font-size: 30px}
	.about-txt, .about-text-show, .about-title, .about-text .bold{padding-left: 22px;padding-right: 22px}
	.footer{padding: 0 16px 20px}
}
/* 手机：≤768px */
@media (max-width: 768px){
	*{font-weight: 400}
	.header-content,.header-box{height: 58px}
	.header{padding: 0}
	.logo{width: 160px;margin-left: 14px}
	.header-contact{display: none}
	.menu-toggle{display: block;margin-right: 14px}
	.menu{position: absolute;top: 58px;left: 0;width: 100%;flex-direction: column;background: #09aff3;margin: 0;max-height: 0;overflow: hidden;transition: max-height .3s ease;box-shadow: 0 8px 18px rgba(0,0,0,.12)}
	.menu.open{max-height: 360px}
	.menu p{width: 100%;line-height: 3.2;text-align: center;border-bottom: 1px solid rgba(255,255,255,.18)}
	.menu p.active{background: rgba(255,255,255,.16);color: #fff}
	.menu-indicator{display: none}
	.banner{height: auto;padding: 20px 16px 60px;background: url('/static/images/bg.jpg') no-repeat center/cover}
	.banner-content{flex-direction: column;height: auto}
	.ban-txt{flex: none}
	.ban-txt p{padding-top: 6px;font-size: 16px}
	.ban-text{font-size: 26px}
	.ban-text .bold{font-size: 30px}
	.ban-txt-btn{}
	.ban-txt-btn a{margin-top: 18px !important;display: block;width: 300px;text-align: center;margin: 0 auto}
	.ban-txt-btn a:last-child{margin: 12px auto !important}
	.ban-pic{width: 100%;height: 220px;margin-top: 22px}
	.ban-pic img{position: static;transform: none;display: block;margin: 0 auto;max-width: 100%}
	.service-li{width: calc(100% - 20px)}
	.service-txt{height: auto;-webkit-line-clamp: 6}
	.reason-li{width: 100%;border-right: 0 !important;border-bottom: 1px dotted #ccc !important;padding: 16px 14px}
	.reason-li:last-child{border-bottom: 0 !important}
	.step-content{flex-direction: column;padding: 0 16px;margin-bottom: 20px}
	.step-info{padding: 16px 0}
	.step-line{width: auto;height: 34px;display: flex;justify-content: center}
	.step-line img{width: 24px;margin: 0;transform: rotate(90deg)}
	.flex-content{flex-direction: column;margin: 0}
	.flex-content .about-text{margin: 8px 0}
	.about-content{padding: 0 14px}
	.about-info-last{margin-bottom: 40px;}
	.about-txt, .about-text-show, .about-title, .about-text .bold{padding-left: 18px;padding-right: 18px}
	.map-bg{display: none}
	.stipulate-content{padding: 24px 16px 30px}
	.tipulate-li{margin: 0 0 18px}
	.title{max-width: 100%;padding: 0 14px}
	.title-text, .title-text i{font-size: 24px}
	.footer{padding: 20px 0;font-size: 12px}
	.footer span{padding: 14px}
	.ban-pic{width: 80%;height: auto !important;margin: 0 auto}
	.service-icon{width: 54px;height: 54px}
	.service-icon img,.reason-icon img{width: 34px}
	.reason-content{margin: 0}
	.reason-icon{width: 50px;height: 50px}
	.reason-info{margin-left: 14px}
	.step-line{display: none}
	.step-info img{width: 60px}
	.tipulate-left{width: 40px;height: 40px}
	.tipulate-left img{width: 24px}
	.footer-text-pc{display: none}
	.footer-text-wap{display: block;color: #fff;font-size: 13px;padding: 0 30px;line-height: 1.8}
	.footer-text-wap a{color: #fff;font-size: 13px}
	#stipulate{margin-top: 0}
	.company-ul li p:first-child{width: 100px}
}
/* 小手机：≤480px */
@media (max-width: 480px){
  .logo{width: 130px}
  .ban-text{font-size: 22px}
  .ban-text .bold{font-size: 26px}
  .ban-txt a{padding: 12px 16px;font-size: 14px}
  .title-text, .title-text i{font-size: 21px}
  .service-title{font-size: 16px}
}