@media screen and (min-width: 1380px) {
  .head .header-item .header-item-txt {
    color: #283F65;
  }
  .banner-bg {
    width: 100%;
  }
  .topnav {
    width: 100%;
    height: 100px;
    background: #FFFFFF;
  }
  .topnav .topnav-list {
    display: flex;
    height: 100%;
    padding: 20px;
  }
  .topnav .topnav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
  }
  .topnav .topnav-item:not(:last-child) {
    margin-right: 16px;
  }
  .topnav .topnav-ico {
    width: 24px;
    margin-right: 8px;
  }
  .topnav .topnav-txt {
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #283F65;
  }
  .topnav .topnav-items {
    border-radius: 8px;
    background: linear-gradient(180deg, #00D3FD 0%, #0079D7 100%);
  }
  .topnav .topnav-items .topnav-txt {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
  }
  .mian {
    margin: 24px auto 0;
    display: flex;
    flex-wrap: wrap;
  }
  .mian .mian-item {
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 16px;
    width: calc((100% - 36px * 1) / 4);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .mian .mian-item:not(:nth-child(3n+3)) {
    margin-right: 12px;
  }
  .mian .mian-banner {
    display: block;
    border-radius: 6px;
  }
  .mian .title {
    margin: 4px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    letter-spacing: 0.02em;
    color: #283F65;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .mian .txt {
    font-size: 16px;
    font-weight: normal;
    color: #FF9A33;
    display: flex;
    align-items: center;
  }
  .mian .ico {
    width: 15px;
    margin-right: 6px;
  }
  .pager {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 1380px) {
  .head .header-item .header-item-txt {
    color: #283F65;
  }
  .banner-bg {
    width: 100%;
  }
  .topnav {
    width: 100%;
    height: 90px;
    background: #FFFFFF;
  }
  .topnav .topnav-list {
    display: flex;
    height: 100%;
    padding: 18px;
  }
  .topnav .topnav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
  }
  .topnav .topnav-item:not(:last-child) {
    margin-right: 14.4px;
  }
  .topnav .topnav-ico {
    width: 21.6px;
    margin-right: 7.2px;
  }
  .topnav .topnav-txt {
    font-size: 16.2px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #283F65;
  }
  .topnav .topnav-items {
    border-radius: 7.2px;
    background: linear-gradient(180deg, #00D3FD 0%, #0079D7 100%);
  }
  .topnav .topnav-items .topnav-txt {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
  }
  .mian {
    margin: 21.6px auto 0;
    display: flex;
    flex-wrap: wrap;
  }
  .mian .mian-item {
    padding: 18px;
    margin-bottom: 10.8px;
    border-radius: 14.4px;
    width: calc((100% - 36px * 0.9) / 4);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .mian .mian-item:not(:nth-child(3n+3)) {
    margin-right: 10.8px;
  }
  .mian .mian-banner {
    display: block;
    border-radius: 5.4px;
  }
  .mian .title {
    margin: 3.6px 0;
    font-size: 16.2px;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0.02em;
    color: #283F65;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .mian .txt {
    font-size: 14.4px;
    font-weight: normal;
    color: #FF9A33;
    display: flex;
    align-items: center;
  }
  .mian .ico {
    width: 13.5px;
    margin-right: 5.4px;
  }
  .pager {
    margin-bottom: 28.8px;
  }
}
@media screen and (max-width: 1200px) {
  .head .header-item .header-item-txt {
    color: #283F65;
  }
  .banner-bg {
    width: 100%;
  }
  .topnav {
    width: 100%;
    height: 80px;
    background: #FFFFFF;
  }
  .topnav .topnav-list {
    display: flex;
    height: 100%;
    padding: 16px;
  }
  .topnav .topnav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
  }
  .topnav .topnav-item:not(:last-child) {
    margin-right: 12.8px;
  }
  .topnav .topnav-ico {
    width: 19.2px;
    margin-right: 6.4px;
  }
  .topnav .topnav-txt {
    font-size: 14.4px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #283F65;
  }
  .topnav .topnav-items {
    border-radius: 6.4px;
    background: linear-gradient(180deg, #00D3FD 0%, #0079D7 100%);
  }
  .topnav .topnav-items .topnav-txt {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
  }
  .mian {
    margin: 19.2px auto 0;
    display: flex;
    flex-wrap: wrap;
  }
  .mian .mian-item {
    padding: 16px;
    margin-bottom: 9.6px;
    border-radius: 12.8px;
    width: calc((100% - 36px * 0.8) / 4);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .mian .mian-item:not(:nth-child(3n+3)) {
    margin-right: 9.6px;
  }
  .mian .mian-banner {
    display: block;
    border-radius: 4.8px;
  }
  .mian .title {
    margin: 3.2px 0;
    font-size: 14.4px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #283F65;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .mian .txt {
    font-size: 12.8px;
    font-weight: normal;
    color: #FF9A33;
    display: flex;
    align-items: center;
  }
  .mian .ico {
    width: 12px;
    margin-right: 4.8px;
  }
  .pager {
    margin-bottom: 25.6px;
  }
}
body {
  background-color: #eef2fd;
}
/*# sourceMappingURL=./course.css.map */