* {
    box-sizing: border-box;
}

.martyr-cover {
    height: 30.2rem;
    background: url('../images/martyr/mlcover.png') no-repeat center / cover;
}

.martyr-container {
    padding: 0 .6rem;
    margin-top: -11rem;
}

.martyr-page .flag {
    /* width: 30.7rem ;
    height: 11.2rem; */
    width: 22rem;
    height: 7rem;
    background:  url('../images/home/flag.gif') no-repeat center / cover;
    position: absolute;
}

.martyr-bd {
    background-color: #efeeed;
    border-radius: 1.2rem;
}

.martyr-bd .filter-wrap {
    padding: 1.6rem .6rem;
    padding-right: 3.5rem;
}

.martyr-bd .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.2rem;
}

.martyr-bd .filter-item {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 0.6em;
    background-color: #efeeed;
    color: #333;
    /*font-weight: bold;*/
    border-radius: 0.4rem 0.4rem 0 0;
    /*font-size: 1.5rem;*/
}

.martyr-bd .filter-item .filter-text {
    /*display: flex;*/
    align-items: center;
    /*height: 3rem;*/
    /*padding: 0 0.9em;*/
    /*background-color: #efeeed;*/
    /*color: #333;*/
    font-weight: bold;
    /*border-radius: 0.4rem 0.4rem 0 0;*/
    font-size: 1.5rem;
    max-width: 10rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.martyr-bd .filter-item.active {
    background-color: var(--primary-color);
    color: #fff;
}

.martyr-bd .search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    overflow: hidden;
    padding-left: 0.5em;
    background-color: #f5e8d2;
    border: 1px solid #c7ad6b;
    border-radius: 0.4rem;
}

.martyr-bd .search-bar .input {
    flex: 1;
    height: 100%;
    background-color: transparent;
}

.martyr-bd .search-bar .btn-search {
    overflow: hidden;
    height: 100%;
    padding: 0 1em;
    background-color: var(--primary-color);
    line-height: 3rem;
}

.search-bar .fa-search {
    color: #fff;
}

.martyr-list {
    padding-bottom: 5rem;
    margin-right: 2.4rem;
}

.martyr-list .martyr-item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0.6rem .6rem;
}

.martyr-list .martyr-item .avatar {
    overflow: hidden;
    width: 7rem;
    height: 9.4rem;
    background-color: #f5f6f7;
    border-radius: 0.4rem;
}

.martyr-list .martyr-item .avatar .img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.martyr-list .martyr-item .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    height: 8.2rem;
    padding: 0 1.2rem;
    background-color: #fff;
    border-radius: 0 0.4rem 0.4rem 0;
}

.martyr-item .info .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.martyr-item .info .name {
    color: #000;
    font-weight: bold;
}

.martyr-item .info .tag {
    margin-left: 0.8rem;
    font-size:1rem;
}

.martyr-item .info .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.martyr-item .info .top .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0.6em;
    background-color: var(--primary-color);
    border-radius: 0.4rem;
}

.martyr-item .info .btn-action .icon {
    width: 0.6rem;
    height: 1.3rem;
}

.martyr-item .info .btn-action .label {
    font-size: var(--font-11);
    margin-left: 0.4rem;
    color: #edc07b;
    line-height: normal;
}

.martyr-item .info .desc {
    margin-top: 0.6rem;
    font-size: 1rem;
    color: #000;
}

.letters-wrap {
    position: fixed;
    top: 30%;
    right: .6rem;
    padding: 0 0.6rem;
}

.letters {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.letter-item {
    height: 1.9rem;
    line-height: 1.9rem;
    font-weight: bold;
    font-size: 1.4rem;
    color: #000;
}

.letter-item.active {
    color: #c0040c;
}

.detail-cover {
    height: 30rem;
    background: url('../images/martyr/mlcover.png') no-repeat center / cover;
}

.detail-container {
    margin-top: -8rem;
    padding: 0 .6rem;
}

.detail-bd {
    position: relative;
    min-height: 70vh;
    padding: 0 1.2rem 6.6rem;
    background-color: #fff;
    border-radius: 0 0 0.8rem 0.8rem;
}

.detail-bd::before {
    position: absolute;
    top: -2.4rem;
    left: 0;
    width: 100%;
    height: 2.8rem;
    content: '';
    background-color: #f5f6f7;
    border-radius: 0.8rem 0.8rem 0 0;
}

.detail-bd .person {
    display: flex;
    align-items: flex-end;
}

.detail-bd .person .avatar {
    overflow: hidden;
    position: relative;
    z-index: 9;
    width: 11.6rem;
    height: 14.1rem;
    margin-top: -1.2rem;
    background-color: #f5f6f7;
    border-radius: 0.8rem;
}

.detail-bd .person .avatar .img {
    width: 100%;
    height: 100%;
}

.detail-bd .person .info {
    flex: 1;
    height: 11.8rem;
    margin-left: 1.2rem;
}

.detail-bd .person .grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.detail-bd .person .grid-item {
    flex: 0 0 50%;
    padding: 0.32rem 0;
}

.detail-bd .person .grid-item span {
    font-size: var(--font-12);
}

.detail-bd .person .grid-item:last-child {
    flex: 0 0 100%;
}

.detail-bd .title {
    display: flex;
    align-items: center;
    height: 3.6rem;
    font-size: var(--font-15);
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #e4e4e4;
}

.detail-bd .row {
    display: flex;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #e4e4e4;
}

.detail-bd .row span {
    font-size: var(--font-13);
}

.detail-bd .row.other .row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.6rem;
}

.detail-bd .row.other .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4em 2em;
    background-color: var(--primary-color);
    border-radius: 0.4rem;
}

.detail-bd .row.other .btn-action .icon {
    width: 0.6rem;
    height: 1.3rem;
}

.detail-bd .row.other .btn-action .label {
    margin-left: 0.3rem;
    color: #fff;
    font-size: var(--font-12);
}

.detail-bd .row.other .cell {
    display: flex;
    align-items: center;
    margin-left: 1.2rem;
}

.detail-bd .deeds {
    margin-top: 1.2rem;
}

.detail-bd .deeds .desc {
    margin-top: 1.2rem;
    font-size: var(--font-12);
    text-align: justify;
    color: #999;
}

.detail-bd .media {
    margin-top: 1.2rem;
}

.detail-bd .media .video-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.detail-bd .media .video-item,
.detail-bd .media video {
    overflow: hidden;
    width: 15.6rem;
    height: 9.2rem;
    border-radius: 0.8rem;
}

.detail-bd .media .video-item {
    margin-right: 1.2rem;
    margin-bottom: 1.2rem;
}

.detail-bd .media .video-item:nth-child(2n) {
    margin-right: 0;
}