.head {
    width: 19.2rem;
    height: 8.03rem;
    background: url('./../img/top_banner_bj.jpg') 0 0 no-repeat;
    background-size: 19.2rem 8.03rem;
    position: relative;
}
.download-btns {
    width: 6rem;
    margin: 0 auto;
    position: relative;
    top: 6.23rem;
}
.download-btns img {
    width: 2.68rem;
    height: 0.87rem;
}

.main {
    width: 100%;
    background-color: #353b50;
    position: relative;
}
.wrapper {
    width: 18.71rem;
    overflow: hidden;
    box-sizing: border-box;
    width: 98%;
    position: relative;
    top: -0.37rem;
    padding: 0.20rem;
    margin: 0 auto;
    background: url('./../img/content_box_bj.png') center no-repeat;
}
.info-box {
    background: url('./../img/texture_l.png'),
    url('./../img/texture_2.png'),
    url('./../img/texture_4.png'),
    url('./../img/texture_3.png');
    background-position: top 0.15rem left 0.17rem, top 0.15rem right 0.14rem, bottom 0.13rem left 0.23rem, bottom 0.13rem right 0.14rem;
    background-repeat: no-repeat no-repeat;
}
.info-box .box-title {
    color: #fff;
    height: 1.11rem;
    font-size: 0.58rem;
    background: url('./../img/tittle_banner.png') left -0.7rem no-repeat;
    background-size: 1.56rem 1.75rem;
}
.info-box .box-title span {
    position: relative;
    left: 1rem;
    top: 0.2rem;
}
.se-intro {
    float: left;
    box-sizing: border-box;
    background-color: #8b7042;
    color: #fff;
    width: 8.94rem;
    height: 11.24rem;
    padding: 0.4rem 0.45rem 0.6rem 0.52rem;
}
.intro-main {
    box-sizing: border-box;
    padding: 0.29rem 0.27rem 0 0.32rem;
    width: 7.97rem;
    height: 8.01rem;
    background: url('./../img/content_box.png') 0 0 no-repeat;
    background-size: 7.97rem 8.01rem;
}
.intro-main img {
    width: 7.38rem;
    height: 4.15rem;
}
.intro-main .intro-content {
    margin-top: 0.33rem;
    font-size: 0.24rem;
    color: #d3d3d3;
    letter-spacing: 0.04rem;
    line-height: 0.6rem;
}
.se-intro a{
    display: block;
    margin: 0 auto;
    width: 3.3rem;
    height: 0.81rem;
}
.se-intro .rule-btn {
    margin: 0.24rem auto 0.47rem;
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
    background-color: #859900;
    font-size: 0.41rem;
    line-height: 0.81rem;
    text-align: center;
    letter-spacing: 0.02rem;
}
.se-desc {
    float: left;
    width: 9.06rem;
    height: 4.85rem;
    background-color: #697e4e;
    margin-left: 0.16rem;
    box-sizing: border-box;
    padding: 0.4rem 0.48rem 0.35rem 0.42rem;
    color: #fff;
}
.desc-gallery {
    width: 8.16rem;
    height: 2.91rem;
    background: url('./../img/content_box1.png') 0 0 no-repeat;
    background-size: 100%;
    padding: 0.45rem 0.45rem 0.44rem 0.51rem;
    box-sizing: border-box;
    position: relative;
}
.desc-gallery .desc-item {
    display: inline-block;
    width: 1.69rem;
    height: 2rem;
}
.desc-seprator {
    border-left: 0.02rem solid #98a18e;
    height: 1.27rem;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.desc-item span {
    display: block;
    width: 130%;
    text-align: center;
    font-size: 0.24rem;
    letter-spacing: 0.02rem;
    position: relative;
    left: -14%;
    top: 2.02rem;
}
.desc-item .item-link {
    display: block;
    width: 1.69rem;
    height: 2rem;
}
.desc-gallery .desc-item:nth-of-type(1) {
    background: url('./../img/desc-pc-1.png') 0 0 no-repeat;
    background-size: 100%;
    margin-right: 0.29rem;
}
.desc-gallery .desc-item:nth-of-type(2) {
    background: url('./../img/desc-pc-2.png') 0 0 no-repeat;
    background-size: 100%;
    margin: 0 0.2rem 0 0.44rem;
}
.desc-gallery .desc-item:nth-of-type(3) {
    background: url('./../img/desc-pc-3.png') 0 0 no-repeat;
    background-size: 100%;
    margin-left: 0.55rem;
}
.se-highlight {
    float: left;
    width: 9.06rem;
    height: 6.25rem;
    background-color: #64796a;
    margin-left: 0.16rem;
    margin-top: 0.14rem;
    padding: 0.4rem 0.35rem 0.56rem 0.42rem;
    box-sizing: border-box;
    color: #fff;
}
.highlight-gallery {
    width: 8.29rem;
    height: 4.34rem;
    background: url('./../img/content_box2.png') 0 0 no-repeat;
    padding: 0.25rem 0.25rem 0.19rem 0.22rem;
    box-sizing: border-box;
}
.highlight-gallery .highlight-item {
    width: 2.51rem;
    height: 1.9rem;
    float: left;
    margin-right: 0.09rem;
}
.highlight-item img {
    width: 2.51rem;
    height: 1.41rem;
}
.highlight-item span {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 0.21rem;
    margin-top: 0.09rem;
    margin-bottom: 0.2rem;
}
.se-skill {
    float: left;
    width: 18.22rem;
    background-color: #5d678f;
    margin-top: 0.21rem;
    padding: 0.4rem 0.2rem 0.5rem 0.42rem;
    box-sizing: border-box;
}
.skill-cards {
    width: 17.35rem;
    background: url('./../img/content_box3.png');
    padding: 0 0 0 0.2rem;
    box-sizing: border-box;
}
.card {
    display: inline-block;
    position: relative;
    top: -0.36rem;
}
.card .card-title {
    width: 6rem;
    height: 1.9rem;
}
.card2 {
    position: relative;
    left: -0.44rem;
}
.card3 {
    width: 4.5rem;
    position: relative;
    left: -0.9rem;
}
.card1 .card-title {
    background: url('./../img/content_banner7.png') 0 0 no-repeat;
    background-size: 100%;
}
.card2 .card-title {
    background: url('./../img/content_banner8.png') 0 0 no-repeat;
    background-size: 100%;
}
.card3 .card-title {
    background: url('./../img/content_banner9.png') 0 0 no-repeat;
    background-size: 100%;
}
.card-title span {
    color: #fff;
    font-size: 0.53rem;
    position: relative;
    left: 0.47rem;
    top: 0.8rem;
}
.card-content {
    background-color: #fff;
    width: 5.28rem;
    padding-bottom: 0.36rem;
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}
.card-content li {
    list-style-type: none;
    font-size: 0.28rem;
    color: #383838;
}
.card-content li span {
    width: 5rem;
    display: block;
    margin: 0 auto;
    padding: 0.29rem 0 0.08rem;
    border-bottom: 0.01rem solid #ebebeb;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.card-content span::before {
    display: inline-block;
    content: '';
    width: 0.12rem;
    height: 0.12rem;
    background-color: #383838;
    margin: 0 0.2rem 0 0.06rem;
    transform: rotate(45deg);
    position: relative;
    top: -0.03rem;
}
.se-illustrate {
    margin-top: 0.2rem;
    float: left;
    width: 18.22rem;
    background-color: #8d5f83;
    padding: 0.4rem 0.24rem 0.94rem 0.32rem;
    box-sizing: border-box;
}
.illustrate-box {
    float: left;
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
}
.illustrate-box-title {
    margin-top: 0.57rem;
    margin-left: 0.1rem;
    width: 7.15rem;
    height: 0.62rem;
}
.illustrate-box-title span {
    color: #fff;
    font-size: 0.43rem;
    margin-left: 0.27rem;
}
.commander {
    display: inline-block;
    margin-top: 0.18rem;
    width: 9.71rem;
    background-color: #162441;
}
.commander .illustrate-box-title {
    
    background: url('./../img/tittle_1.png') 0 0 no-repeat;
}

.commander-items {
    margin: 0.24rem 1.12rem 0.67rem 0.92rem;
    width: 7.94rem;
    height: 7.11rem;
    overflow: hidden;
}
.commander-item {
    margin-right: 0.3rem;
    width: 1.64rem;
    height: 2.28rem;
    position: relative;
    float: left;
    color: #fff;
}
.commander-item a {
    display: block;
    width: 1.64rem;
    height: 2.28rem;
}
.commander-item-head span {
    font-size: 0.18rem;
    position: absolute;
    top: 0.34rem;
    left: 0.08rem;
    z-index: 100;
}
.commander-item-head .commander-type-icon {
    width: 0.4rem;
    height: 0.45rem;
    position: absolute;
    top: 0.26rem;
    left: -0.02rem;
    z-index: 99;
}
.commander-item-head .commander-avatar {
    width: 1.76rem;
    height: 1.92rem;
    position: absolute;
    z-index: 98;
}
.commander-name {
    width: 1.8rem;
    text-align: center;
    font-size: 0.27rem;
    position: absolute;
    z-index: 100;
    top: 1.54rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.commander-rate {
    width: 1.44rem;
    height: 0.33rem;
    position: absolute;
    z-index: 100;
    top: 1.94rem;
    left: 0.2rem;
}
.artial {
    margin: 0.2rem 0 0 0.2rem;
    display: inline-block;
    width: 7.67rem;
    height: 4.78rem;
}
.artial .illustrate-box-title {
    background: url('./../img/tittle_2.png');
    margin: 0.35rem 0 0 0;
}
.artial .artial-items {
  margin: 0.44rem 0.6rem 0.9rem 0.6rem;  
}
.artial-items .artial-item {
    margin-right: 0.14rem;
    margin-bottom: 0.22rem;
    display: inline-block;
    width: 0.88rem;
}
.artial .artial-item span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.18rem;
}
.artial-item img {
    width: 0.89rem;
    height: 0.89rem;
}
.artial-item a {
    display: block;
    color: #000;
    display: flex;
    flex-flow: column;
}
.illustarte-strategy {
    width: 7.67rem;
    height: 4.15rem;
    margin-top: 0.26rem;
    margin-left: 0.2rem;
}
.illustarte-strategy .illustrate-box-title {
    background: url('./../img/tittle_3.png');
    margin: 0.35rem 0 0 0;
}
.strategy-items {
    margin: 0.6rem 0.46rem 1.28rem 0.46rem;
}
.strategy-item {
    width: 1.04rem;
    display: inline-block;
    margin-right: 0.06rem;
}
.strategy-item img {
    width: 1.04rem;
    height: 1.04rem;
}
.strategy-item a {
    display: block;
    width: 100%;
    height: 100%;
    color: #000;
    font-size: 0.2rem;
}
.strategy-items span {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.09rem;
}
.arm {
    margin-top: 0.36rem;
    width: 17.62rem;
    height: 7.25rem;
    padding-bottom: 0.2rem;
}
.arm .illustrate-box-title {
    background: url('./../img/tittle_4.png');
    margin: 0.43rem 0 0 0;
}
.arm-item {
    display: inline-block;
    width: 7.68rem;
}
.arm-items .arm-item .arm-type {
    display: block;
    width: 100%;
    height: 1.08rem;
    font-size: 0.38rem;
    background: url('./../img/tittle_3_1.png') 0 0 no-repeat;
    background-size: 100%;
}
.arm-type span {
    /* color: #fff; */
    position: relative;
    left: 3.8rem;
    top: 0.28rem;
    color: #fff;
    letter-spacing: 0.04rem;
}
.arm-kinds {
    margin-left: 1.4rem;
}
.arm-kind {
    display: inline-block;
    width: 1.18rem;
    margin-right: 0.12rem;
}
.arm-kind img {
    width: 1.18rem;
    height: 1.36rem;
}
.arm-kind a {
    display: block;
    color: #000;
}
.arm-kind span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.2rem;
}
.footer {
    width: 100%;
    height: 1.6rem;
    background-color: #000;
    overflow: hidden;
}
.footer_c {
    width: 10rem;
    margin: 0 auto;
    overflow: hidden;
}
.footer_c .f_left{
    width: 2rem;
    height: 0.56rem;
    margin-top: 0.45rem;
    float: left;
}
.footer_c .f_left img {
    width: 2rem;
    height: 0.56rem;
}
.footer_c .f_center {
    float: left;
    overflow: hidden;
    margin: 0.5rem 0 0 0.2rem;
}
.f_center>p {
    font-size: 0.16rem;
    color: #a3aab2;
    margin-bottom: 0.12rem;
}
.f_center span {
    display: flex;
}
.f_center span a {
    color: #4e5256;
    text-decoration: none;
    vertical-align: middle;
    font-size: 0.16rem;
}