.header-content{
    right: 10%;
    bottom: 50%;
    transform: translateY(50%);
    font-family: PingFang SC;
    font-weight: 400;
    font-style: Regular;
    font-size: calc(var(--ultriix-space-normal) * 4);
    line-height: 28px;
    letter-spacing: 0%;
    color: #FFFFFF;
}

.header-content img{
    height: calc(var(--ultriix-space-normal) * 8);
    width: calc(var(--ultriix-space-normal) * 8);
}

.bloglist article{
    padding: 40px 0;
    border-bottom: 1px solid #B8B8B8;
    font-family: Poppins;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
}

.bloglist .title{
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0%;
}

.bloglist .date{
    color: #B8B8B8;
}

.bloglist .article-tag{
    line-height: 30px;
    letter-spacing: 0%;
    color: #666666;
}

.bloglist article a{
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    text-decoration: underline;
    color: #333333;
}
.bloglist article a:hover{
    color: #0060EF;
}

.tag{
    width: 100%;
    margin-top: 40px;
}

.tag #searchTag{
    column-gap: calc(var(--ultriix-space-normal) * 2);
    row-gap: var(--ultriix-space-normal);
    & a{
        color: var(--ultriix-font-color-disabled2);
        font-size: var(--ultriix-font-size-text-normal1);
    }
    & a:hover{
        color: var(--ultriix-font-color-disabled2);
        opacity: 0.8;
    }
}

.tag label{
    font-family: Poppins;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
}

.tag .tag-input{
    margin: 10px 0 27px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #333333
}

.tag-input i{
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    
    &:hover{
        opacity: 0.8;
    }
}

.tag .form-control{
    border: none;
    height: 50px;
    border-radius: 10px;

    &:focus{
        box-shadow: none;
    }
}

.pagination{
    margin: 60px 0 80px;
}

.page-link{
    height: calc(var(--ultriix-space-normal) * 5);
    width: calc(var(--ultriix-space-normal) * 5);
    border-radius: 4px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-left: 5px;
    font-family: Open Sauce Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    color: #2D2D2D;
}

.page-link:hover{
    border: 1px solid #000000;
}

.pagination .opPage .page-link {
    min-width: 90px;
    width: auto;
    margin-left: calc(var(--ultriix-space-normal) * 3);
    margin-right: calc(var(--ultriix-space-normal) * 3);
}

@media (min-width: 768px) {
    .tag{
        max-width: 260px;
        min-width: 200px;
    }
    .pagination .opPage .page-link{
        min-width: calc(var(--ultriix-space-normal) * 14);
    }
}