.navbar{
    background: #000000;
}
.banner-con{
    background: #0d1117 url(../images/about-banner.png) no-repeat top right;
    min-height: 899px;
}
.banner-con .banner{
    width: 100%;
}
.banner-con .banner .content{
    max-width: 580px;
}
.banner-con .banner .b1{
    color: var(--yellow-color);
    background: rgba(34, 25, 5, 0.5);
    border: 1px solid var(--yellow-color);
    width: fit-content;
    /* margin: 100px auto 20px; */
    font-size: 14px;
    padding: 5px 30px;
    border-radius: 30px;
}
.banner-con .banner h1{
    line-height: 1.5;
}
.banner-con .banner h1 span{
    color: var(--yellow-color);
}

.ability-con{
    background: #0d1117;
}

.ability-con .list{
    gap:var(--gap30)
}
.ability-con .list>li{
    background: #161b22;
    padding: var(--gap50) var(--gap20);
    border-radius: 20px;
    gap: var(--gap30);
    width: calc((100% - var(--gap30)) / 2);
}
.ability-con .list>li .icon{
    width: 90px;
    height: 90px;
    background: #282827;
    border-radius: 20px;
    position: relative;
    flex-shrink: 0;
}
.ability-con .list>li:nth-child(1) .icon:before{
    content: "";
    background: url(../images/zone.png) no-repeat;
    width: 48px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ability-con .list>li:nth-child(2) .icon:before{
    content: "";
    background: url(../images/zhijian.png) no-repeat;
    width: 41px;
    height: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ability-con .list>li:nth-child(3) .icon:before{
    content: "";
    background: url(../images/zhuanye.png) no-repeat;
    width: 50px;
    height: 35px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ability-con .list>li:nth-child(4) .icon:before{
    content: "";
    background: url(../images/lvyou.png) no-repeat;
    width: 39px;
    height: 39px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ability-con .list .item li:first-child{
    font-size: 20px;
}
.ability-con .list .item li:first-child span{
    color: var(--yellow-color);
    font-weight: bold;
}
.ability-con .list .item li:last-child{
    color: #a6a6a6;
    margin-top: 15px;
}

.introduction-con{
    background: #161b22;
    color: #e5e5e5;
}
.introduction-con .introduction .text-list{
    gap: var(--gap80);

}
.introduction-con .introduction .text-list .text{
    color: #e5e5e5;
    max-width: 50%;
}
.introduction-con .introduction .text-list .list{
    gap: var(--gap30) var(--gap80);
}
.introduction-con .introduction .text-list .list li{
    width: calc((100% - var(--gap80)) / 2);
    background: #1c232c;
    border: 1px solid #27303c;
    border-radius: 20px;
    padding: 30px;
    flex-shrink: 0;
}
.introduction-con .introduction .text-list .list li span{
    color: var(--yellow-color);
    font-size: 30px;
    font-weight: bold;
}
.introduction-con .introduction .text-list .list li p{
    margin-bottom: 0;
}
.history-con {
    background: #0d1117;
}
.history-con .history .list{
    margin-left: 135px;
}
.history-con .history .list ul{
    gap: 10px;
}
.history-con .history .list ul:not(:last-child){
    margin-bottom: 40px;
}
.history-con .history .list ul li{
    padding-left: 40px;
}
.history-con .history .list ul li:first-child{
    position: relative;
    font-size: 20px;
    color: var(--yellow-color);
    font-weight: bold;
}
.history-con .history .list ul li:first-child:before{
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--yellow-color);
    position: absolute;
    top: 9px;
    left: 0;
    border-radius: 7px;
}
.history-con .history .list ul li:nth-child(2){
    font-size: 18px;
}
.visit-con{
    background: #161b22;
    padding: clamp(30px , 5.25vw, 100px) 30px;
    text-align: center;
    border:1px solid #373737;
    border-radius: 50px;
    margin-top: clamp(30px , 5.25vw, 100px);
    position: relative;
}
.visit-con:before{
    content: "";
    background: linear-gradient(to right,transparent,var(--yellow-color),transparent);
    width: 40%;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.visit-con:after{
    content: "";
    background: linear-gradient(to right,transparent,var(--yellow-color),transparent);
    width: 40%;
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.visit-con p{
    color: #a6a6a6;
}
.visit-con a{
    color: #0d1016;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: var(--yellow-color);
    width: 200px;
    height: 50px;
    border-radius: 25px;
    margin: 50px auto 0;
}
.visit-con a:after{
    content: "";
    background: url(../images/arrow.png) no-repeat;
    width: 30px;
    height: 11px;
    background-size: contain;
}
@media (max-width:1080px){
    .introduction-con .introduction .text-list .list li span{
        font-size: clamp(20px,2.5vw,30px);
    }
}
@media (max-width:768px){
    .banner-con{
        background: #0d1117 url(../images/about-banner.png) no-repeat bottom right;
        min-height: auto;
    }
    .ability-con .list{
        gap: 15px;
    }
    .ability-con .list>li{
        flex-wrap: wrap;
        width: calc((100% - 15px) / 2);
    }
    .introduction-con .introduction .text-list{
        flex-direction: column;

    }
    
    .introduction-con .introduction .text-list .list{
        gap: 15px;
    }
    .introduction-con .introduction .text-list .list li{
        padding: 15px;
    }
    .introduction-con .introduction .text-list .text{
        max-width: 100%;
    }
    .history-con .history .list{
        margin-left: 0;
    }
    
    
}