/* css reset */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;border:0;margin:0;padding:0;box-sizing:border-box;}body{-webkit-text-size-adjust:none;touch-action:manipulation}button,input,optgroup,select,textarea{color:inherit;font:inherit}li,ol,ul{list-style:none}button,img{border:0;outline:0}=a{outline:0;text-decoration:none}a:active,a:hover,a:visited{color:inherit}table,td,tr{border-collapse:collapse}input,textarea{outline:0}code,kbd,pre,samp{font-family:Menlo,Consolas}blockquote,body,button,caption,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,html,input,legend,li,menu,ol,p,pre,table,td,textarea,th,ul{margin:0;padding:0}address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{border-collapse:collapse;border-spacing:0}caption,th{font-weight:400;text-align:left}abbr,body,fieldset,html,iframe,img{border:0}address,cite,dfn,em,i,var{font-style:normal}[hidefocus],summary{outline:0}li{list-style:none}h1,h2,h3,h4,h5,h6,small{font-size:100%}sub,sup{font-size:83%}code,kbd,pre,samp{font-family:inherit}q:after,q:before{content:none}textarea{overflow:auto;resize:none}label,summary{cursor:default}a,button{cursor:pointer}b,em,h1,h2,h3,h4,h5,h6,strong{font-weight:400}a,a:hover{text-decoration:none}
body,button,input,keygen,legend,select,textarea{-webkit-font-smoothing:antialiased;color:#000;font:.24rem/1.14 SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;outline:0}
body{background:#fff}a{color:#333;}a:hover,a::after:hover{color:#000;transition:all .3s;}a:visited{color:#333}
/* 半像素底边线 */
.half-border{position:relative}
.half-border:after{background:#f2f2f2;bottom:0;content:"";display:block;height:.02rem;left:0;position:absolute;-webkit-transform:scaleY(.5);-moz-transform:scaleY(.5);-o-transform:scaleY(.5);transform:scaleY(.5);width:100%}
/* 间隔 */
.mt-1{margin-top:.1rem!important;}.mt-2{margin-top:.2rem!important;}.mt-3{margin-top:.3rem!important;}.mt-4{margin-top:.4rem!important;}.mt-5{margin-top:.5rem!important;}.mt-6{margin-top:.6rem!important;}
/* 控制显示行数超出... */
.text-ellipsis-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-ellipsis-2,.text-ellipsis-3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}
.text-ellipsis-2{-webkit-line-clamp:2}
.text-ellipsis-3{-webkit-line-clamp:3}
/* 缩略图处理方法 */
.thumb{position:relative;display:block;width:100%;padding:0;overflow:hidden;}
.thumb::before{display:block;content:"";}
.thumb-1by1::before{padding-top:100%;}
.thumb-2by1::before{padding-top:50%;}
.thumb-3by2::before{padding-top:66.66666667%;}
.thumb-16by9::before{padding-top:56.25%;}
.thumb-21by9::before{padding-top:42.85714286%;}
.thumb img,.thumb video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;}
/* 移动端横向滚动 */
.card-slider-box{-webkit-overflow-scrolling:touch;overflow-y:hidden;}
.card-slider{white-space:nowrap;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-transition:-webkit-transform .5s,transform .5s;transition:-ms-transform .5s,-webkit-transform .5s,transform .5s;}
/* 不显示滚动条 */
.card-slider::-webkit-scrollbar{-webkit-appearance:none;display:none;}
/* 小箭头 */
.arrow-line{border:solid #1e1e1e;border-width:0 .02rem .02rem 0;display:inline-block;padding: .06rem;margin-left: .1rem;}
.arrow-line.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);margin-left:.1rem;}
.arrow-line.left{transform:rotate(135deg);-webkit-transform:rotate(135deg);}
.arrow-line.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);}
.arrow-line.down{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-bottom:.06rem;}
.arrow-item{display:flex;align-items:center;}
/* 隐藏文字 */
.text-hide {font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.d-none{display:none!important;}
/* 文字字号 */
.text-small{font-size:.24rem!important;}
/* 文字颜色 */
.text-danger{color:#F93A4A;}
/* a标签拉伸 */
.position-relative{position:relative;}
.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0);}
/* 通用分割线 */
.bold-line{height:.2rem;background:#F7F7F7;margin-top:.6rem;}
.bold-line + .bold-line{display:none;}
/* SVG图标 */
.svg-icon{
    width: 100%;
    height: 100%;
}
/* 容器 */
.wrapper{margin-left:auto;margin-right:auto;width:100%;}
.wrapper-fluid{width: 100%;}
/* 导航 */
.main-nav{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    padding: .3rem;
    background: transparent;
    transition:all .5s ease;
}
.main-nav.scrolled{
    background-color: #fff;
    transition:all .5s ease;
}
.main-nav .wrapper{
    display: flex;
    align-items: center;
}
.brand{
    width: .7rem;
    height: .7rem;
    background: url('../img/ba-logo-w.png');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: .1rem;
    transition:all .2s ease;
}
.main-nav.scrolled .brand{
    background: url('../img/ba-logo-w.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition:all .5s ease;
    transition-delay: .2s;
}
.qrcode {
	width: 1.5rem;
	height: 1.5rem;
	position: fixed;
	top: 30%;
	right: 5%;
	z-index: 9999999;
}
.brand h1{
    font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;
}
.brand img{
    display: none;
}
.banner{
    z-index: 9;
}
.banner .mask{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(72,18,255,0.8);
}
.banner-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 11;
    width: 100%;
}
.banner-text .wrapper{
    padding:.5rem 0 0 1rem;
}
.banner-text h2{
    margin-top: .2rem;
    font-size: .3rem;
    color: rgba(255,255,255,.6);
}
.banner.thumb::before{padding-top:150%;}
.css-typing{
    margin-top: .8rem;
    color: #fff;
}
.css-typing p {
    margin-top: .2rem;
    border-right: .15em solid orange;
    font-family: "Courier";
    font-size: .5rem;
    white-space: nowrap;
    overflow: hidden;
}
.css-typing p:nth-child(1) {
    width: 8.3em;
    -webkit-animation: type1 2s steps(20, end);
    animation: type1 2s steps(20, end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
    width: 6em;
    opacity: 0;
    -webkit-animation: type1 2s steps(20, end);
    animation: type1 2s steps(20, end);
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
    width: 7.3em;
    opacity: 0;
    -webkit-animation: type4 2s steps(20, end), blink .5s step-end infinite alternate;
    animation: type4 2s steps(20, end), blink .5s step-end infinite alternate;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes type1 {
    0% {width: 0;}
    1% {opacity: 1;}
    99.9% {border-right: .15em solid orange;}
    100% {opacity: 1;border: none;}
}
@-webkit-keyframes type1 {
    0% {width: 0;}
    1% {opacity: 1;}
    99.9% {border-right: .15em solid orange;}
    100% {opacity: 1;border: none;}
}
@keyframes type4 {
    0% {width: 0;}
    1% {opacity: 1;}
    100% {opacity: 1;}
}
@-webkit-keyframes type4 {
    0% {width: 0;}
    1% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes blink {
    50% {border-color: transparent;}
}
@-webkit-keyframes blink {
    50% {border-color: tranparent;}
}

.row .col-4 .card{
    margin: 1rem;
}
.row .col-4 .card .icon{
    width: 1rem;
    height: 1rem;
    padding: .2rem;
    border-radius: 100%;
    background: rgba(72,18,255,0.8);
}
.row .col-4 .card .hd{
    font-size: .4rem;
    font-weight: 600;
}
.row .col-4 .card .icon + .hd{
    margin-top: .3rem;
}
.row .col-4 .card .hd + .bd{
    margin-top: .2rem;
    line-height: 1.6;
    font-size: .3rem;
}
.footer{
    padding: 1rem 0;
    background: linear-gradient(50deg, rgba(72,18,255,1) 0, rgba(72,18,255,0.8) 100%);
    color: rgba(255,255,255,.8);
    text-align: center;
    line-height: 1.6;
}
.footer a{
    color: rgba(255,255,255,.8);
}

@media (min-width:320px){
    html{font-size:266.667%;}
}
@media (min-width:375px){
    html{font-size:312.5%;}
}
@media (min-width:425px){
    html{font-size:354.167%;}
}
@media (min-width:768px){
    html{font-size:400%;}
}
@media (min-width: 992px){
    .wrapper{width:990px}
}
@media (min-width: 1200px){
    .wrapper{width:1140px}
    .banner.thumb::before{padding-top:42.85714286%;}
    .banner-text .wrapper{
        max-width: 10rem;
    }
    .banner-text p{
        font-size: .8rem;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .row .col-4{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
    }
    
}
@media (min-width:1440px){
    .wrapper{width:1400px}
}