/* 公用样式 */
#c-placeholder {height: .8rem;}
header { background: #fff; position: fixed; left: 0; top: 0; z-index: 99; width: 100%;transition: .5s; box-shadow: 0 0 .1rem 0 rgba(0, 0, 0, 0.1);}
.headBox {transition: .5s; height: .8rem; position: relative; z-index: 1;}
.headBox .logo {padding:.1rem 0;height: 100%;}
.headBox .logo a {height: 100%; display: flex; align-items: center;}
.headBox .logo img {max-width: 100%; max-height: .49rem; object-fit: contain;}


/* 导航 */
nav {height: 100%; }
nav > ul {display: flex; height: 100%; align-items: center;justify-content: space-between; gap: .4rem;}
nav > ul > li {height: 100%; display: flex; align-items: center; position: relative;}
nav > ul > li > a {color: #000; font-size: var(--font15); position: relative;  display: flex; align-items: center;}
nav > ul > li.on  > a{  color: #0963ff;}
@media (any-hover: hover) {
  nav > ul > li:hover  > a{  color: #0963ff;}
}

.indexMain{background: url(../images/index-bg.jpg) no-repeat center top; background-size: cover; padding-bottom: .54rem;} 
.index-banner{padding: .97rem 0 .75rem;}
.banner-le{flex: 1;}
.banner-box .info h1{font-size: .56rem; line-height: 1.2;}
.banner-box .info h3{color: #666; margin: .38rem 0 .5rem;}
.banner-link a{border-radius: 100px; font-weight: bold;}
.banner-link .btn1{background: linear-gradient(135deg, #0A63FF 0%, #02A5ED 100%); padding: .11rem .245rem;}
.banner-link .btn1 img{width: .15rem; transition: .5s;}
.banner-link .btn2{border: 1px solid #C2C2C2; background: #FFFFFF; padding: .1rem .2rem; transition: .5s;}
@media (any-hover: hover) {
  .banner-link .btn1:hover img{transform: rotate(-45deg);}
  .banner-link .btn2:hover{background: #0963ff; border-color: #0963ff; color: #fff;}
}

.banner-box .note{gap: .26rem;}
.banner-box .note dl dd{color: #666;}
.banner-box .pic{width: 57.58%;}
.banner-box .pic img{display: block; max-width: 100%;}

.about-num{background: linear-gradient(135deg, #0A63FF 0%, #02A5ED 100%);  border-radius: 22px; height: 2.07rem; margin-bottom: 1.2rem;}
.about-num ul{width: 100%; text-align: center;}

.index-title h2{}
.index-title h3{color: #666666;}
.service-list{padding-top: .5rem;}
.service-list ul{gap: .32rem .26rem;}
.service-list ul li{position: relative; transition: .6s; border-radius: 10px; border:1px solid rgba(9, 99, 255, .2); padding: .34rem .34rem .31rem;}
.service-list ul li::before{content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(131deg, #0963FF 0%, #03A5ED 100%); border-radius: 10px; transition: .6s; z-index: 0;}
.service-list ul li a{display: block; height: 100%;}
.service-list ul li .icon{position: relative; z-index: 2;  width: .45rem; height: .45rem; background: linear-gradient(131deg, #0963FF 0%, #03A5ED 100%); border-radius: 10px; padding: .1rem; display: flex; align-items: center; justify-content: center;}
.service-list ul li .icon img{max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1);}
.service-list ul li h4{position: relative; z-index: 2; font-weight: bold; color: #333333; margin: .2rem 0 .06rem;}
.service-list ul li p{position: relative; z-index: 2;  margin-bottom: .08rem; color: #666666;}
.service-list ul li  em{position: relative; z-index: 2;  font-weight: bold;}
@media (any-hover: hover) {
  .service-list ul li:hover::before{width: 100%;}
  .service-list ul li:hover .icon{background: #FFFFFF;}
  .service-list ul li:hover .icon img{filter: brightness(1) invert(0);}
  .service-list ul li:hover h4{color: #FFFFFF;}
  .service-list ul li:hover p{color: #FFFFFF;}
  .service-list ul li:hover em{color: #FFFFFF;}
}


.why{padding-top: .8rem;}
.why-list{padding-top: .47rem;}
.why-list ul{gap: .15rem;}
.why-list ul li{ padding: .3rem .3rem .28rem; background: #FFFFFF; border-radius: .06rem; position: relative;}
.why-list ul li::before{content: ''; position: absolute; left: 0; top: 0; width: 0; height: .05rem; background: linear-gradient(131deg, #0963FF 0%, #03A5ED 100%); border-radius: .06rem; transition: .6s;}
.why-list ul li .icon{ width: .45rem; height: .45rem; background: #E8EFFF; border-radius: 10px; padding: .1rem; display: flex; align-items: center; justify-content: center;}
.why-list ul li .icon img{max-width: 100%; max-height: 100%; object-fit: contain;}
.why-list ul li h4{font-weight: bold; color: #333333; margin: .2rem 0 .06rem;}
.why-list ul li p{color: #666666;}
@media (any-hover: hover) {
  .why-list ul li:hover::before{width: 100%;}
}


.filez-box{box-shadow: 0px 5px 54px 7px rgba(9,99,255,0.04); margin: .94rem 0 .6rem;}
.filez-le{width: 63%; padding: .74rem .7rem .44rem;}
.filez-ri{width: 37%;background: linear-gradient(127deg, #0A63FF 0%, #02A5ED 100%); border-radius: 32px;}
.filez-le .index-title h2{margin: .13rem 0 .09rem;}
.filez-list{margin: .18rem 0 .65rem;}
.index-more { display: inline-block;position: relative; background: linear-gradient(135deg, #0A63FF 0%, #02A5ED 100%); border-radius: 100px; padding: .11rem .21rem; opacity: 1; transition: box-shadow .5s;}
.index-more::after {content: '';position: absolute;inset: 0;border-radius: inherit;pointer-events: none;}
@keyframes breath {
  0% { box-shadow: 0 0 0 0 rgba(0, 31, 245, 0.4); }
  70% { box-shadow: 0 0 0 14px rgba(22, 97, 199, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 97, 199, 0); }
}

@media (any-hover: hover) {
  .index-more:hover::after { animation: breath 2s infinite;}
}
.filez-ri b{font-size: .5rem; line-height: 1.25;}



.case-list{padding: .6rem 0 .79rem;}
.case-list ul{gap: .27rem; }
.case-list ul li{border-radius: .2rem; overflow: hidden; transition: .6s;}
.case-list ul li .pic{overflow: hidden; }
.case-list ul li .pic img{ display: block; width: 100%; transition: .6s;}
.case-list ul li .info{padding: .2rem .33rem .3rem; background: #FFFFFF;}
.case-list ul li .info h4{color: #007DF9; margin-bottom: .1rem;}
.case-list ul li .info p{margin-bottom: .2rem;}
.case-list ul li .info em{font-weight: bold;}

@media (any-hover: hover) {
  .case-list ul li:hover{ box-shadow: 0 0 .1rem 0 rgba(0, 0, 0, 0.1);}
  .case-list ul li:hover .pic img{transform: scale(1.05);}
}


.pannel{background: linear-gradient(135deg, #0A63FF 0%, #02A5ED 100%);  border-radius: 22px; padding: .7rem .51rem;}
.pannel-link a{background: #FFFFFF; border-radius: 100px; padding: .11rem .245rem; transition: .5s;}
.pannel-link  b{color: #0963FF;}
.pannel-link img{width: .15rem; transition: .5s;}
@media (any-hover: hover) {
  .pannel-link:hover a{transform: translateY(-.05rem);}
  .pannel-link:hover img{transform: rotate(-45deg);}
}



/* 公共底部 */
footer{background: #0A1525; }
.footer-top{padding: .52rem 0 .65rem;}
.footer-le{width: 26%;}
.footer-le .logo img{max-width: 100%; max-height: .47rem; object-fit: contain; margin-bottom: .35rem;}
.footer-middle strong,.footer-ri  strong{margin-bottom: .25rem; display: block;}
.footer-nav{gap: .79rem;}
.footer-nav ul li,.footer-ri dl {margin-bottom: .07rem;}
.footer-nav ul li em{color: #F2F2F2;}
.footer-ri dl dd,.footer-ri dl dd a{color: #F2F2F2;}
@media (any-hover: hover) {
  .footer-nav ul li:hover em{color: #0963FF;}
  .footer-ri dl dd:hover a{color: #0963FF;}
}

.footer-copy{border-top: 1px solid rgba(255, 255, 255, .1); padding: .1rem 0;}
.footer-copy p,.footer-copy p a{color: rgba(255, 255, 255, .2); }
.footer-copy span{margin-left: .54rem;}
@media (any-hover: hover) {
  .footer-copy p a:hover{color: #fff;}
}

/* 系统集成 */
.system{padding: .61rem 0 0.92rem; }
.system-bg{background: #FFFFFF; box-shadow: 0px 5px 54px 7px rgba(9,99,255,0.04); border-radius: .32rem;  overflow: hidden;}
.system-le{width: 62%;}
.system-le .info{padding: .5rem .68rem .41rem;flex-direction: column;align-items: flex-start;}
.system-le .info .icon img{width: .42rem; margin-bottom:.12rem}
.system-le .info h1{margin-bottom: .04rem;}
.system-le .info h2{margin-bottom: .3rem; color: #333333;}
.system-bg .pic{width: 38%; border-radius: .32rem; overflow: hidden;}
.system-bg .pic img{display: block; width: 100%; transition: .6s; object-fit: cover;}

.system-box{margin-bottom: .8rem; }
.system-list ul {gap: .55rem .44rem;}
.system-list ul li{transition: .6s;}
.system-list ul li a{display: flex;align-items: center;flex-direction: column;text-align: center;}
.system-list ul li .icon{width: .45rem; height: .45rem; background: #E8EFFF; border-radius: .1rem; padding: .1rem; display: flex; align-items: center; justify-content: center; transition: .6s;}
.system-list ul li .icon img{max-width: 100%; max-height: 100%; object-fit: contain; }
.system-list ul li h3{ color: #333333; margin:.1rem 0 .14rem}
.system-list ul li p{color: #666666; margin-bottom: .24rem;}
@media (any-hover: hover) {
  .system-list ul li:hover{transform: translateY(-.1rem);}
  .system-list ul li:hover .icon{background: linear-gradient(131deg, #0963FF 0%, #03A5ED 100%);}
  .system-list ul li:hover .icon img{filter: brightness(0) invert(1);}

}


.ny-about{padding: .61rem 0 0.92rem;}
.ny-title{margin-bottom: .4rem;}
.ny-title i{display: block; width: .5rem; height: .03rem; background: #0963FF; margin: .2rem auto 0; border-radius: .05rem;}




.tactForm .form input::placeholder {color: #5A5A5A;}
.tactForm .form input::-webkit-input-placeholder {color: #5A5A5A;}
.tactForm .form input::-moz-placeholder{color: #5A5A5A;}
.tactForm .form input::-moz-placeholder {color: #5A5A5A;}
.tactForm .form input::-ms-input-placeholder {color: #5A5A5A;}
.tactForm .form textarea::placeholder { color: #5A5A5A;}
.tactForm .form textarea::-webkit-textarea-placeholder { color: #5A5A5A;}
.tactForm .form {display: flex; flex-wrap: wrap; justify-content: space-between;}
.tactForm .form .inBox {margin-bottom: .2rem;width: 49%;position: relative;}
.tactForm .form .inBox label {position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);left: .25rem;font-size: var(--font14);color: #FF0000;}
.tactForm .form input , .tactForm .form textarea {border: 0;font-size: var(--font14);background: #fff;border-radius: .06rem;box-shadow: none;height: .55rem;padding: 0;padding-left: .4rem;color: #3d3d3d;}
.tactForm .form .inTxtBox , .tactForm .form .inSect {width: 100%;}
.tactForm .form .inSect dl dd {line-height: initial; padding: .1rem;}
.tactForm .form .inTxtBox textarea {resize: none;padding: 2%;height: 2rem;}
.tactForm .form .inCode {display: flex;width: 100%;background: #fff;}
.tactForm .form .inCode img {margin-left: .625rem; max-width: 9.375rem;}
.tactForm .form .sub {width: 100%;margin-top: .25rem;}
.tactForm .form .sub button {background: #0963FF;padding: 0.16rem .6rem;font-weight: 700;cursor: pointer;border-radius: .03rem;}
.tactForm .form .sub button i {transform: rotate(180deg); display: inline-block;}
#tactForm .layui-form-select dl {top: 100%;}
#tactForm .layui-form-selectup dl {top: auto; bottom: 100%;}