*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

.main_box{
    width: 100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

.type_box{
    width: 100%;
    height: 333px;
    margin-bottom: 50px;
    position: relative;
}

/*颜色类型组*/
.character_group{
    display: flex;
    flex-direction: row;
    /*align-items: center;*/
    /*justify-content: center;*/
    margin: 0 50px;
}

/*每一行的标题文字*/
.title{
    /*width: 100% ;*/
    /*display: inline-block;*/
    text-align: center;
    /*background-color: mediumpurple;*/
    font-size: 32px;
    font-weight: 800;
    opacity:0.25;
    margin-bottom: 0.5rem;
}

/*紫人组标题文字*/
.purple_title{
    color:#8965cf;

}

/*绿人组标题文字*/
.green_title{
    color:#3f8e6f;
}

/*蓝人组标题文字*/
.blue_title{
    color:#5ebfd8;
}

/*黄人组标题文字*/
.yellow_title{
    color:#9d7700;
}


/*各色人种标题*/
.puple_name{
    color:#8965cf;
}

.green_name{
    color: #3f8e6f;
}

.blue_name{
    color:#5ebfd8;
}

.yellow_name{
    color:#9d7700;
}

/*各色人种简介*/
.purple_text{
    color: #8965cf;
}

.green_text{
    color:#3f8e6f;
}

.blue_text{
    color:#5ebfd8;
}

.yellow_text{
    color:#9d7700;
}


/*一对组*/
.couple{
    width: 25%;
    margin-top:12px;
    padding:0 16px;
    cursor: pointer;
}


/*图片*/
.type-pic{
    width: 100%;
    height: 128px;
    display: flex;
    justify-content: center;
}

/*小标题*/
h3{
    margin-top: 20px;
    text-align: center;
}

/*p{*/
/*    margin-top: 0.25rem;*/
/*    text-align: center;*/
/*    font-size: 14px;*/
/*    opacity: 0.6;*/

/*}*/

/*单行背景色块*/
.background-pic{
    height: 156px;
    position: absolute;
    top:170px;
    width: 100%;
    z-index: -1;
}

.purple_background{
    background: linear-gradient(180deg,rgba(137,101,207,.25),transparent);
}

.green_background{
    background: linear-gradient(180deg, rgba(63,142,111,.25), transparent);
}

.blue_background{
    background: linear-gradient(180deg, rgba(94,191,216,.25), transparent);
}

.yellow_background{
    background: linear-gradient(180deg, rgba(157,119,0,.25), transparent);
}


.bottom_button{
    /*background-color: #5ebfd8;*/
}

.determine{
    width: 240px;
    /*height: 48px;*/
    height: 3rem;
    background-color:#3f7cff;
    cursor:pointer;
    border-radius: 3rem;
    color:#fff;
    text-align: center;
    line-height: 3rem;
    display: block;
    margin: 0 auto;



}