/* 使用媒体查询来针对不同屏幕宽度应用不同的样式 */
@media (min-width: 768px) {
/* 如果屏幕宽度小于等于768px，则应用以下样式 */
.predict{
    width: 768px;
    margin: auto;
}
.top{
    width:100%;
    text-align: center;
    background-color: #eaf4fd;
    border: 1px solid #1975FF;
    color:  #1975FF;
}
}
.head {
    position: fixed;
    top: 0;
    left: 0;
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #fff;
    
}
.left-icon {
    width: 11px;
    height: 20px;
}
.title {
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.banner-list {
    margin-top: 44px;
    height: 210px;
    width: 100%;
}
.banner-item {
    height: 42px;
    width: 100%;
}
.tabs-list{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-shadow:  0 10px 20px -15px #999;
}
.tabs-item{
    height: 30px;
    width: 100px;
    background-color: #eef0f6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content:center;
    font-size: 14px;
    font-weight: bold;
    
}
.tabs-active {
    background: linear-gradient(-90deg, #1975FF 0%, #00CCFF 100%);
    color: #fff;
}
.tags-list{
    display: flex;
    flex-wrap: wrap;
    padding: 1px;
    align-items: center;
    justify-content: space-evenly;
}
.tags-item {
    height: 30px;
    padding: 0 18px;
    margin-bottom: 2px;
    border-radius: 16px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    margin-right: 8px;
}
.tags-active {
    background-color: #eaf4fd;
    border: 1px solid #1975FF;
    color:  #1975FF;
}
.award-inform {
    background-color: #f4f4f4;
    width: 100%;
    padding: 8px 12px;
    color: #fff;
}
.award-title {
    display: flex;
    padding: 6px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 72px;
    background: linear-gradient(-90deg, #1975FF 0%, #00CCFF 100%);
    border-radius: 6px;
}
.award-title-left{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.award-title-left-num{
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 4px;
    background-color: #fff;
    color: red;
}
.award-title-right{
    display: flex;
    align-items: center;
    padding: 6px;
    width: 200px;
    height: 48px;
    background-color: #fff;
    border-radius: 6px;
}
.ball{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: green;
}
.symbol {
    margin: 0 4px;
    color: #666;
}
.title-right-tag{
    width: 64px;
    padding: 6px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #eee;
    border-radius: 6px;
}
.award-list-head{
    width: 100%;
    margin: 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}
.period {
    width: 20%;
    text-align: center;
}
.times {
    width: 20%;
    text-align: center;
    color:#999;
}
.nums {
    width: 20%;
    text-align: center;
}
.award-list-item{
    background-color: #fff;
    padding: 6px 0;
    border-radius: 6px;
}
.award-list-item-nums{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.yuce{
    width: 20%;
    text-align: center;
    color:#999;
}
.r_w{
    width: 20%;
    text-align: center;
}