:root {
  --blue-900: #003c7d;
  --blue-800: #004ea1;
  --blue-700: #0574d0;
  --blue-600: #1671ce;
  --blue-100: #e8f2fc;
  --sicau-green: #0d6844;
  --ink: #26384a;
  --muted: #7b8794;
  --line: #d8e3ef;
  --paper: #f6f9fd;
  --shadow: 0 14px 36px rgba(0, 78, 161, .10);}

* {
  box-sizing: border-box;}

[hidden] {
  display: none !important;}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(22, 113, 206, .08), transparent 30%),
    linear-gradient(180deg, #fff 0, var(--paper) 36%, #fff 100%);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;}

body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0 0 rgba(0, 40, 90, 0);
  transition: box-shadow .24s ease;}

body.is-scrolled > header {
  box-shadow: 0 10px 30px rgba(0, 46, 102, .16);}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 18% 92%, transparent 0 24%, rgba(0, 78, 161, .055) 24.2% 24.8%, transparent 25% 100%),
    radial-gradient(ellipse at 24% 94%, transparent 0 28%, rgba(13, 104, 68, .05) 28.2% 28.8%, transparent 29% 100%),
    radial-gradient(ellipse at 30% 96%, transparent 0 31%, rgba(0, 78, 161, .045) 31.2% 31.7%, transparent 32% 100%),
    repeating-linear-gradient(105deg, transparent 0 38px, rgba(0, 78, 161, .035) 39px 40px, transparent 41px 82px);
  opacity: .9;}

a {
  color: inherit;
  text-decoration: none;}

.w1280 {
  width: min(1280px, calc(100vw - 64px));
  margin: 0 auto;}

.topbar {
  height: 34px;
  color: #fff;
  background: var(--blue-900);
  font-size: 13px;
  overflow: hidden;
  transition: height .24s ease, opacity .24s ease;}

body.is-scrolled .topbar {
  height: 0;
  opacity: 0;}

.topbar .w1280 {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;}

.top-links {
  display: flex;
  gap: 26px;}

.header {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88)),
    linear-gradient(135deg, rgba(22, 113, 206, .10), rgba(13, 104, 68, .06));
  transition: background .24s ease;}

body.is-scrolled .header {
  background: #fff;}

.header .w1280 {
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  transition: height .24s ease;}

body.is-scrolled .header .w1280 {
  height: 82px;}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  transition: gap .24s ease;}

.brand-logo {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  transition: width .24s ease, height .24s ease;}

body.is-scrolled .brand-logo {
  width: 54px;
  height: 54px;}

.brand h1 {
  margin: 0;
  color: var(--blue-900);
  font-size: clamp(30px, 3.4vw, 43px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: font-size .24s ease;}

body.is-scrolled .brand h1 {
  font-size: clamp(25px, 2.6vw, 32px);}

.brand p {
  margin: 8px 0 0;
  color: #6c7d8f;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: margin .24s ease, opacity .2s ease, max-height .24s ease;}

body.is-scrolled .brand p {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  flex: 0 0 auto;}

.header-links {
  display: flex;
  gap: 28px;
  color: #687789;
  font-size: 14px;}

.search {
  width: 360px;
  height: 40px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: #f0f3f7;
  border: 1px solid #edf1f5;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;}

.search span {
  flex: 1;
  padding-left: 18px;
  color: #8b96a3;
  font-size: 14px;
  line-height: 38px;}

.search b {
  width: 58px;
  display: grid;
  place-items: center;
  color: var(--blue-800);
  border-left: 1px solid #d4dfeb;}

body.search-open {
  overflow: hidden;}

.search-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: start center;
  padding: 132px 20px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;}

.search-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;}

.search-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 50, .48);
  backdrop-filter: blur(10px);}

.search-panel-card {
  width: min(760px, 100%);
  position: relative;
  z-index: 1;
  padding: 38px 42px 34px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 72px rgba(0, 34, 78, .24);}

.search-panel-card h2 {
  margin: 0 0 22px;
  color: #102946;
  font-size: 30px;
  line-height: 1.2;}

.search-panel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  color: #456176;
  background: #edf4fb;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;}

.search-panel-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  border: 2px solid #0d559f;
  background: #fff;}

.search-panel-input {
  min-width: 0;
  height: 58px;
  border: 0;
  padding: 0 20px;
  color: #203448;
  background: transparent;
  font-size: 17px;
  outline: none;}

.search-panel-form button {
  border: 0;
  color: #fff;
  background: #0d559f;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;}

.search-panel-card p {
  margin: 14px 0 0;
  color: #778696;
  font-size: 14px;}

.menu-toggle,
.menu-close,
.mobile-nav-head,
.mobile-nav-search,
.nav-backdrop {
  display: none;}

.nav-box {
  position: relative;
  z-index: 20;
  background: var(--blue-800);}

.nav-list {
  height: 56px;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  transition: height .24s ease;}

body.is-scrolled .nav-list {
  height: 48px;}

.nav-item {
  position: relative;}

.nav-link {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  transition: height .24s ease, background .18s ease;}

body.is-scrolled .nav-link {
  height: 48px;}

.nav-item:last-child .nav-link {
  border-right: 1px solid rgba(255, 255, 255, .16);}

.nav-item:hover .nav-link,
.nav-item.is-open .nav-link {
  background: var(--blue-700);}

.dropdown {
  position: absolute;
  left: 50%;
  top: 56px;
  width: 154px;
  margin: 0 0 0 -77px;
  padding: 0;
  list-style: none;
  text-align: center;
  background: var(--blue-800);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  box-shadow: 0 16px 34px rgba(0, 45, 98, .22);}

body.is-scrolled .dropdown {
  top: 48px;}

.nav-item:hover .dropdown,
.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);}

.dropdown a {
  display: block;
  padding: 11px 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;}

.dropdown a:hover {
  background: var(--blue-700);}
.nav-item .dropdown a:hover {
  color: #fff;}

body > header {
  background:
    linear-gradient(90deg, rgba(0, 42, 84, .94), rgba(0, 79, 134, .82)),
    var(--blue-900);}

.topbar {
  display: none;}

.header {
  background:
    linear-gradient(90deg, rgba(0, 30, 58, .92), rgba(0, 78, 130, .76)),
    linear-gradient(135deg, var(--blue-900), var(--blue-800));}

body.is-scrolled .header {
  background: rgba(255, 255, 255, .98);}

.header .w1280 {
  width: min(1440px, calc(100vw - 56px));
  height: 84px;
  gap: 18px;}

body.is-scrolled .header .w1280 {
  height: 70px;}

.brand {
  flex: 0 0 clamp(340px, 26vw, 430px);
  gap: 12px;}

.brand-logo {
  width: 56px;
  height: 56px;
  filter: brightness(0) invert(1);
  opacity: .96;}

body.is-scrolled .brand-logo {
  width: 46px;
  height: 46px;
  filter: none;
  opacity: 1;}

.brand h1 {
  color: #fff;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: 0;}

body.is-scrolled .brand h1 {
  color: var(--blue-900);
  font-size: clamp(20px, 1.7vw, 25px);}

.brand p {
  max-width: 360px;
  margin-top: 4px;
  color: rgba(255, 255, 255, .72);
  font-size: 8.5px;
  line-height: 1.15;
  letter-spacing: .03em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;}

body.is-scrolled .brand p {
  max-height: none;
  margin-top: 2px;
  color: #738397;
  opacity: 1;}

.nav-box {
  flex: 1 1 auto;
  min-width: 0;
  position: static;
  background: transparent;}

.nav-inner {
  width: 100%;}

.nav-list {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;}

body.is-scrolled .nav-list {
  height: 70px;}

.nav-link {
  height: 84px;
  padding: 0 clamp(7px, .7vw, 13px);
  color: rgba(255, 255, 255, .94);
  border-left: 0;
  font-size: clamp(14px, .9vw, 16px);
  font-weight: 700;
  white-space: nowrap;}

body.is-scrolled .nav-link {
  height: 70px;
  color: #21415f;}

.nav-item:last-child .nav-link {
  border-right: 0;}

.nav-item:hover .nav-link,
.nav-item.is-open .nav-link {
  color: #fff;
  background: rgba(0, 78, 161, .72);}

body.is-scrolled .nav-item:hover .nav-link,
body.is-scrolled .nav-item.is-open .nav-link {
  color: #fff;
  background: var(--blue-800);}

.dropdown {
  top: 84px;}

body.is-scrolled .dropdown {
  top: 70px;}

.header-actions {
  height: 84px;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 12px;}

body.is-scrolled .header-actions {
  height: 70px;}

.header-links {
  display: none;}

.search {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);}

body.is-scrolled .search {
  background: #f0f3f7;
  border-color: #edf1f5;}

.search span {
  display: none;}

.search b {
  width: 100%;
  color: #fff;
  border-left: 0;}

body.is-scrolled .search b {
  color: var(--blue-800);}

.menu-toggle {
  width: 68px;
  height: 84px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: rgba(0, 38, 76, .78);
  color: #fff;
  cursor: pointer;
  transition: height .24s ease, background .24s ease;}

body.is-scrolled .menu-toggle {
  height: 70px;
  background: var(--blue-900);}

.menu-toggle span {
  width: 29px;
  height: 3px;
  background: currentColor;}

@media (min-width: 981px) {
  body.nav-open {
    overflow: hidden;}

  body.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 84px 0 0;
    z-index: 110;
    background: rgba(0, 26, 56, .38);}

  body.is-scrolled.nav-open .nav-backdrop {
    inset: 70px 0 0;}

  body.nav-open .nav-box {
    position: fixed;
    left: 0;
    right: 0;
    top: 84px;
    bottom: 0;
    z-index: 120;
    overflow-y: auto;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .90)),
      radial-gradient(ellipse at 50% 40%, rgba(0, 78, 161, .14), transparent 48%),
      #fff;
    box-shadow: 0 28px 54px rgba(0, 42, 86, .22);}

  body.is-scrolled.nav-open .nav-box {
    top: 70px;}

  body.nav-open .nav-inner {
    width: min(1280px, calc(100vw - 96px));
    margin: 0 auto;
    padding: 52px 0 64px;}

  body.nav-open .nav-list {
    height: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 34px 46px;}

  body.nav-open .nav-link {
    height: auto;
    justify-content: flex-start;
    padding: 0 0 16px;
    color: #0e2740;
    border-bottom: 1px solid rgba(0, 78, 161, .18);
    font-size: 20px;
    font-weight: 900;}

  body.nav-open .nav-item:hover .nav-link,
  body.nav-open .nav-item.is-open .nav-link {
    color: var(--blue-800);
    background: transparent;}

  body.nav-open .dropdown {
    position: static;
    display: grid;
    gap: 10px;
    width: auto;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;}

  body.nav-open .dropdown a {
    padding: 0;
    color: #425160;
    font-size: 16px;
    line-height: 1.7;}

  body.nav-open .dropdown a:hover {
    color: var(--blue-800);
    background: transparent;}
}

@media (min-width: 981px) and (max-width: 1240px) {
  .header .w1280 {
    width: calc(100vw - 32px);
    gap: 10px;}

  .brand {
    flex-basis: 300px;
    gap: 8px;}

  .brand-logo {
    width: 44px;
    height: 44px;}

  .brand h1 {
    font-size: 21px;}

  .brand p {
    display: none;}

  .nav-link {
    padding: 0 4px;
    font-size: 13.5px;}

  .search {
    display: none;}

  .menu-toggle {
    width: 54px;}
}

.hero {
  position: relative;
  overflow: hidden;
  background: #fff;}

.hero-frame {
  width: 100%;
  height: max(560px, calc(100svh - 84px));
  min-height: calc(100svh - 84px);
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--blue-800);}

.hero-track,
.hero-slide {
  position: absolute;
  inset: 0;}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .72s ease, visibility .72s ease;
  background: var(--blue-800);}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left center;}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;}

.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;}

.hero-copy {
  width: min(760px, 62vw);
  color: #fff;}

.hero-copy .label {
  display: inline-block;
  margin-bottom: 22px;
  padding-left: 54px;
  position: relative;
  color: #d7ebff;
  font-size: 17px;
  font-weight: 700;}

.hero-copy .label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 3px;
  background: #fff;}

.hero-copy h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.12;
  font-weight: 900;}

.hero-copy p {
  margin: 20px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 1.9;}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;}

.hero-dots button {
  width: 30px;
  height: 4px;
  border: 0;
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  transition: width .18s ease, background .18s ease;}

.hero-dots button.active {
  width: 48px;
  background: #fff;}

.hero-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 42px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  background: rgba(0, 55, 120, .32);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;}

.hero-arrow:hover,
.hero-arrow:focus {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(0, 55, 120, .62);
  transform: translateY(-50%) scale(1.04);}

.hero-prev {
  left: max(18px, calc((100vw - 1360px) / 2));}

.hero-next {
  right: max(18px, calc((100vw - 1360px) / 2));}

.main {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .93)),
    radial-gradient(ellipse at 88% 92%, transparent 0 23%, rgba(13, 104, 68, .07) 23.2% 23.8%, transparent 24.1% 100%),
    radial-gradient(ellipse at 6% 100%, transparent 0 24%, rgba(0, 78, 161, .09) 24.2% 24.7%, transparent 25% 100%),
    repeating-linear-gradient(105deg, transparent 0 54px, rgba(0, 78, 161, .025) 55px 56px, transparent 57px 108px);}

[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .68s ease, transform .68s ease;
  will-change: opacity, transform;}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);}

.module-grid [data-reveal]:nth-child(2) {
  transition-delay: .08s;}

.module-grid [data-reveal]:nth-child(3) {
  transition-delay: .16s;}

.main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='560' viewBox='0 0 920 560' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.12'%3E%3Ccircle cx='685' cy='160' r='72'/%3E%3Ccircle cx='685' cy='160' r='38'/%3E%3Cpath d='M685 60v-42M685 302v-42M585 160h-42M827 160h-42M614 89l-30-30M786 260l-30-30M614 231l-30 30M786 60l-30 30'/%3E%3Cpath d='M82 96h186v72h142M410 168v84h170M580 252h118M268 132h118M698 252v-58h96'/%3E%3Ccircle cx='82' cy='96' r='8'/%3E%3Ccircle cx='410' cy='168' r='8'/%3E%3Ccircle cx='580' cy='252' r='8'/%3E%3Ccircle cx='794' cy='194' r='8'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.10'%3E%3Cpath d='M36 430c98-42 190-42 276 0s182 42 288 0 198-42 284 0'/%3E%3Cpath d='M58 472c94-34 183-34 267 0s175 34 274 0 184-34 264 0'/%3E%3Cpath d='M88 512c86-26 167-26 244 0s159 26 248 0 166-26 238 0'/%3E%3C/g%3E%3C/svg%3E") right -90px top 22px / 760px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='560' viewBox='0 0 920 560' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.12'%3E%3Ccircle cx='685' cy='160' r='72'/%3E%3Ccircle cx='685' cy='160' r='38'/%3E%3Cpath d='M685 60v-42M685 302v-42M585 160h-42M827 160h-42M614 89l-30-30M786 260l-30-30M614 231l-30 30M786 60l-30 30'/%3E%3Cpath d='M82 96h186v72h142M410 168v84h170M580 252h118M268 132h118M698 252v-58h96'/%3E%3Ccircle cx='82' cy='96' r='8'/%3E%3Ccircle cx='410' cy='168' r='8'/%3E%3Ccircle cx='580' cy='252' r='8'/%3E%3Ccircle cx='794' cy='194' r='8'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.10'%3E%3Cpath d='M36 430c98-42 190-42 276 0s182 42 288 0 198-42 284 0'/%3E%3Cpath d='M58 472c94-34 183-34 267 0s175 34 274 0 184-34 264 0'/%3E%3Cpath d='M88 512c86-26 167-26 244 0s159 26 248 0 166-26 238 0'/%3E%3C/g%3E%3C/svg%3E") left -260px top 430px / 700px auto no-repeat,
    radial-gradient(circle at 50% 18%, rgba(0, 78, 161, .055) 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 54%, rgba(13, 104, 68, .045) 0 2px, transparent 2.5px),
    linear-gradient(115deg, transparent 0 34%, rgba(0, 78, 161, .045) 34.1% 34.45%, transparent 34.6% 100%),
    linear-gradient(64deg, transparent 0 62%, rgba(13, 104, 68, .042) 62.1% 62.45%, transparent 62.6% 100%),
    repeating-linear-gradient(90deg, rgba(0, 78, 161, .03) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(13, 104, 68, .022) 0 1px, transparent 1px 78px);
  background-size:
    760px auto,
    700px auto,
    170px 170px,
    220px 220px,
    auto,
    auto,
    auto,
    auto;}

.main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 520px;
  z-index: 0;
  pointer-events: none;
  opacity: .92;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='520' viewBox='0 0 1280 520' fill='none'%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.14' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M116 476C225 424 333 424 442 476C552 528 660 528 770 476C879 424 988 424 1098 476'/%3E%3Cpath d='M155 432C250 396 343 396 438 432C533 468 627 468 722 432C817 396 911 396 1006 432'/%3E%3Cpath d='M206 390C282 366 358 366 434 390C510 414 586 414 662 390C738 366 814 366 890 390'/%3E%3Cpath d='M108 438V276M146 428V302M184 416V284M222 430V316'/%3E%3Cpath d='M108 312c-26-12-38-30-38-54c28 5 46 21 54 48M108 340c-30-8-49-24-58-48c31 1 53 14 66 40M108 368c-28-2-51-13-70-34c31-5 56 3 76 24'/%3E%3Cpath d='M108 314c26-12 38-30 38-54c-28 5-46 21-54 48M108 342c30-8 49-24 58-48c-31 1-53 14-66 40M108 370c28-2 51-13 70-34c-31-5-56 3-76 24'/%3E%3Cpath d='M184 322c-24-12-36-28-38-50c27 4 44 19 52 45M184 350c-29-7-47-22-55-45c30 1 50 13 62 38M184 378c-27-2-49-12-67-31c30-5 53 3 72 22'/%3E%3Cpath d='M184 322c24-12 36-28 38-50c-27 4-44 19-52 45M184 350c29-7 47-22 55-45c-30 1-50 13-62 38M184 378c27-2 49-12 67-31c-30-5-53 3-72 22'/%3E%3Cpath d='M1098 432V296M1134 420V326M1170 434V308'/%3E%3Cpath d='M1098 330c-24-10-38-25-43-45c27 2 45 15 55 39M1098 358c-28-6-47-20-58-41c30-2 51 9 65 32M1098 386c-27 0-50-9-70-27c29-7 53-1 74 17'/%3E%3Cpath d='M1098 330c24-10 38-25 43-45c-27 2-45 15-55 39M1098 358c28-6 47-20 58-41c-30-2-51 9-65 32M1098 386c27 0 50-9 70-27c-29-7-53-1-74 17'/%3E%3C/g%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.13' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M730 130h88l34 28h96l34-28h88'/%3E%3Cpath d='M866 158h100v48H866z'/%3E%3Cpath d='M836 132l-34-34M836 184l-34 34M996 132l34-34M996 184l34 34'/%3E%3Ccircle cx='792' cy='88' r='28'/%3E%3Ccircle cx='792' cy='88' r='10'/%3E%3Ccircle cx='1040' cy='88' r='28'/%3E%3Ccircle cx='1040' cy='88' r='10'/%3E%3Ccircle cx='792' cy='228' r='28'/%3E%3Ccircle cx='792' cy='228' r='10'/%3E%3Ccircle cx='1040' cy='228' r='28'/%3E%3Ccircle cx='1040' cy='228' r='10'/%3E%3Cpath d='M916 206v48M916 254c-58 14-98 39-120 75M916 254c58 14 98 39 120 75'/%3E%3Cpath d='M820 330h192M852 360h128M884 390h64'/%3E%3Cpath d='M656 258h76v52h-76zM656 284h-52M732 284h52M604 284v60M784 284v60'/%3E%3Ccircle cx='604' cy='344' r='8'/%3E%3Ccircle cx='784' cy='344' r='8'/%3E%3C/g%3E%3C/svg%3E") center bottom / min(1280px, 100vw) auto no-repeat,
    radial-gradient(ellipse at 82% 52%, transparent 0 30%, rgba(0, 78, 161, .055) 30.4% 31%, transparent 31.4% 100%),
    repeating-linear-gradient(18deg, transparent 0 58px, rgba(0, 78, 161, .026) 59px 60px, transparent 61px 116px);}

.main > .w1280 {
  position: relative;
  z-index: 1;}

.main {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .965)),
    radial-gradient(ellipse at 86% 16%, rgba(0, 78, 161, .085), transparent 33%),
    radial-gradient(ellipse at 8% 28%, rgba(0, 78, 161, .052), transparent 28%),
    radial-gradient(ellipse at 16% 96%, rgba(13, 104, 68, .065), transparent 38%);}

.main::before {
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1320' height='900' viewBox='0 0 1320 900' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.115' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M880 146h90l28 24h104l28-24h90'/%3E%3Cpath d='M1000 170h100v46h-100z'/%3E%3Cpath d='M970 148l-36-36M970 194l-36 36M1130 148l36-36M1130 194l36 36'/%3E%3Ccircle cx='924' cy='104' r='26'/%3E%3Ccircle cx='924' cy='104' r='9'/%3E%3Ccircle cx='1176' cy='104' r='26'/%3E%3Ccircle cx='1176' cy='104' r='9'/%3E%3Ccircle cx='924' cy='242' r='26'/%3E%3Ccircle cx='924' cy='242' r='9'/%3E%3Ccircle cx='1176' cy='242' r='26'/%3E%3Ccircle cx='1176' cy='242' r='9'/%3E%3Cpath d='M1050 216v54M1050 270c-76 22-128 60-156 114M1050 270c76 22 128 60 156 114'/%3E%3Cpath d='M846 386h408M900 420h300M954 454h192'/%3E%3Cpath d='M548 258h86v54h-86zM548 286h-82M634 286h84M466 286v84M718 286v84'/%3E%3Ccircle cx='466' cy='370' r='7'/%3E%3Ccircle cx='718' cy='370' r='7'/%3E%3Cpath d='M228 302h116v66h152M496 368v74h170'/%3E%3Ccircle cx='228' cy='302' r='6'/%3E%3Ccircle cx='496' cy='368' r='6'/%3E%3Ccircle cx='666' cy='442' r='6'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.13' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 766c112-50 222-50 334 0s224 50 336 0s224-50 336 0s112 50 224 0'/%3E%3Cpath d='M112 812c98-38 198-38 296 0s198 38 296 0s198-38 296 0s98 38 196 0'/%3E%3Cpath d='M168 854c78-28 156-28 234 0s156 28 234 0s156-28 234 0s78 28 156 0'/%3E%3Cpath d='M112 730V566M150 720V590M188 728V548M226 718V604'/%3E%3Cpath d='M112 606c-30-12-48-31-54-58c34 1 56 16 68 45M112 638c-34-7-58-22-72-46c37-4 64 8 80 34M112 670c-34 0-62-11-84-32c36-9 66-2 88 22'/%3E%3Cpath d='M112 606c30-12 48-31 54-58c-34 1-56 16-68 45M112 638c34-7 58-22 72-46c-37-4-64 8-80 34M112 670c34 0 62-11 84-32c-36-9-66-2-88 22'/%3E%3Cpath d='M1172 720V580M1208 708V612M1244 722V596'/%3E%3Cpath d='M1172 616c-26-11-42-27-48-50c30 1 50 14 62 40M1172 648c-32-6-54-20-66-44c34-3 58 8 74 34M1172 680c-30 0-56-9-78-28c32-8 60-2 82 18'/%3E%3Cpath d='M1172 616c26-11 42-27 48-50c-30 1-50 14-62 40M1172 648c32-6 54-20 66-44c-34-3-58 8-74 34M1172 680c30 0 56-9 78-28c-32-8-60-2-82 18'/%3E%3C/g%3E%3C/svg%3E") center bottom / min(1320px, 100vw) auto no-repeat;}

.main::after {
  inset: 0;
  width: auto;
  height: auto;
  opacity: .82;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420' viewBox='0 0 520 420' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 86h122v58h84v64h116'/%3E%3Cpath d='M92 144v86h122M214 230v62h88M302 292h78'/%3E%3Ccircle cx='38' cy='86' r='6'/%3E%3Ccircle cx='160' cy='144' r='6'/%3E%3Ccircle cx='244' cy='208' r='6'/%3E%3Ccircle cx='302' cy='292' r='6'/%3E%3Cpath d='M342 88h42l18 16h54l18-16h34'/%3E%3Cpath d='M404 104h52v30h-52z'/%3E%3Cpath d='M382 90l-22-22M382 132l-22 22M478 90l22-22M478 132l22 22'/%3E%3Ccircle cx='358' cy='66' r='17'/%3E%3Ccircle cx='500' cy='66' r='17'/%3E%3Ccircle cx='358' cy='156' r='17'/%3E%3Ccircle cx='500' cy='156' r='17'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.105' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 338c64-28 128-28 192 0s128 28 192 0'/%3E%3Cpath d='M42 372c55-20 110-20 165 0s110 20 165 0'/%3E%3Cpath d='M68 402c42-14 86-14 128 0s86 14 128 0'/%3E%3Cpath d='M72 316V210M108 306V228M144 316V198'/%3E%3Cpath d='M72 242c-22-9-36-24-42-44c25 1 42 12 52 34M72 268c-26-5-44-17-54-36c28-3 48 6 60 26M72 294c-25 0-46-8-64-24c27-7 50-2 66 16'/%3E%3Cpath d='M72 242c22-9 36-24 42-44c-25 1-42 12-52 34M72 268c26-5 44-17 54-36c-28-3-48 6-60 26M72 294c25 0 46-8 64-24c-27-7-50-2-66 16'/%3E%3C/g%3E%3C/svg%3E") left calc(50% - 820px) top 74px / 430px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='430' viewBox='0 0 560 430' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.125' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M100 118h82l28 22h84l28-22h82'/%3E%3Cpath d='M214 140h88v42h-88z'/%3E%3Cpath d='M184 120l-34-34M184 178l-34 34M322 120l34-34M322 178l34 34'/%3E%3Ccircle cx='136' cy='78' r='25'/%3E%3Ccircle cx='136' cy='78' r='8'/%3E%3Ccircle cx='370' cy='78' r='25'/%3E%3Ccircle cx='370' cy='78' r='8'/%3E%3Ccircle cx='136' cy='222' r='25'/%3E%3Ccircle cx='136' cy='222' r='8'/%3E%3Ccircle cx='370' cy='222' r='25'/%3E%3Ccircle cx='370' cy='222' r='8'/%3E%3Cpath d='M258 182v62M258 244c-52 15-88 44-110 88M258 244c58 17 100 48 126 94'/%3E%3Cpath d='M108 334h286M144 364h214M180 394h142'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.095' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M408 246V142M444 236V166M480 246V154'/%3E%3Cpath d='M408 174c-22-9-36-23-42-42c25 1 42 12 52 33M408 202c-27-5-45-17-55-36c29-3 50 7 62 27M408 226c-25 0-47-8-64-24c27-7 50-2 66 16'/%3E%3Cpath d='M408 174c22-9 36-23 42-42c-25 1-42 12-52 33M408 202c27-5 45-17 55-36c-29-3-50 7-62 27M408 226c25 0 47-8 64-24c-27-7-50-2-66 16'/%3E%3C/g%3E%3C/svg%3E") right calc(50% - 860px) top 82px / 470px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='260' viewBox='0 0 1280 260' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.09' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='584' y='88' width='112' height='78' rx='4'/%3E%3Cpath d='M606 108h68M606 128h68M606 148h38'/%3E%3Cpath d='M584 104H438V66H238M584 128H386v38H90M584 152H480v50H270'/%3E%3Cpath d='M696 104h148V66h198M696 128h196v40h298M696 152h112v50h212'/%3E%3Cpath d='M620 88V48M648 88V28M676 88V54M620 166v42M648 166v66M676 166v38'/%3E%3Ccircle cx='238' cy='66' r='6'/%3E%3Ccircle cx='90' cy='166' r='6'/%3E%3Ccircle cx='270' cy='202' r='6'/%3E%3Ccircle cx='1042' cy='66' r='6'/%3E%3Ccircle cx='1190' cy='168' r='6'/%3E%3Ccircle cx='1020' cy='202' r='6'/%3E%3Ccircle cx='648' cy='28' r='5'/%3E%3Ccircle cx='648' cy='232' r='5'/%3E%3Cpath d='M126 118h96M222 118l28-28h74M1058 116h96M1058 116l-30-28h-72'/%3E%3Ccircle cx='324' cy='90' r='5'/%3E%3Ccircle cx='956' cy='88' r='5'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.055' stroke-linecap='round'%3E%3Cpath d='M118 222c132-42 264-42 396 0s264 42 396 0'/%3E%3Cpath d='M764 230c74-22 148-22 222 0s148 22 222 0'/%3E%3C/g%3E%3C/svg%3E") center 118px / min(1280px, 96vw) auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='220' viewBox='0 0 900 220' fill='none'%3E%3Cg stroke='%23004EA1' stroke-width='2' opacity='.075' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 164C170 92 302 92 438 164S706 236 866 144'/%3E%3Cpath d='M102 124h126v-42h94v76h128M450 158h88v-54h112v42h124'/%3E%3Ccircle cx='102' cy='124' r='5'/%3E%3Ccircle cx='322' cy='82' r='5'/%3E%3Ccircle cx='450' cy='158' r='5'/%3E%3Ccircle cx='650' cy='104' r='5'/%3E%3Ccircle cx='774' cy='146' r='5'/%3E%3Cpath d='M694 56h44l16 14h54l16-14h42'/%3E%3Cpath d='M754 70h58v30h-58z'/%3E%3Cpath d='M736 58l-22-22M736 98l-22 22M826 58l22-22M826 98l22 22'/%3E%3C/g%3E%3Cg stroke='%230D6844' stroke-width='2' opacity='.06' stroke-linecap='round'%3E%3Cpath d='M64 194c92-26 184-26 276 0s184 26 276 0'/%3E%3Cpath d='M122 210c70-16 140-16 210 0s140 16 210 0'/%3E%3C/g%3E%3C/svg%3E") center 10px / min(900px, 72vw) auto no-repeat,
    radial-gradient(ellipse at 12% 22%, transparent 0 42%, rgba(0, 78, 161, .038) 42.4% 43%, transparent 43.4% 100%),
    radial-gradient(ellipse at 92% 28%, transparent 0 38%, rgba(13, 104, 68, .034) 38.4% 39%, transparent 39.4% 100%);}

.section-title {
  height: 60px;
  margin: 0 0 14px;
  padding-left: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #b8c7d8;
  color: var(--blue-800);
  font-size: 21px;
  font-weight: 800;
  min-width: 0;}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 22px;
  margin-top: -11px;
  background: var(--blue-600);}

.section-title span {
  margin-left: 8px;
  color: #9aa8b7;
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;}

.more {
  color: #8b98a6;
  font-size: 14px;
  font-weight: 500;}

.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  gap: 30px;}

.pic-news {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 22px;}

.pic-card {
  min-height: 280px;
  border: 1px solid #bfcfe0;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 78, 161, .15), rgba(13, 104, 68, .06)),
    linear-gradient(125deg, #d7e7f7, #f4faff 58%, #afc9df);}

.pic-card::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(0, 78, 161, .20);
  background:
    repeating-linear-gradient(90deg, rgba(0, 78, 161, .16) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(0, 78, 161, .10) 0 1px, transparent 1px 25px);}

.pic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #fff;
  background: rgba(0, 38, 85, .68);
  font-size: 15px;}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;}

.list li {
  border-bottom: 1px solid #e6edf4;}

.list:not(.date-list) > li:nth-child(n+7) {
  display: none;}

.list a {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #3c4652;
  font-size: 15px;
  position: relative;
  padding-left: 16px;}

.list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8d3df;}

.list a h3,
.list a h4 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;}

.list time {
  flex: 0 0 48px;
  color: #98a4b0;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  word-break: keep-all;}

.list a:hover h3,
.list a:hover h4 {
  color: var(--blue-800);}

.notice-panel {
  background: #fff;
  box-shadow: var(--shadow);
  padding: 0 18px 16px;}

.notice-tabs {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e4edf6;}

.notice-tabs button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid #d5e3f1;
  background: #fff;
  color: #526477;
  font: inherit;
  font-size: 13px;
  cursor: pointer;}

.notice-tabs button.active {
  color: #fff;
  border-color: var(--blue-800);
  background: var(--blue-800);}

.date-list li a {
  display: grid;
  grid-template-columns: 62px 1fr;
  min-height: 58px;
  padding-left: 0;}

.date-list li a::before {
  display: none;}

.date-block {
  text-align: center;
  color: #8a99aa;}

.date-block b {
  display: block;
  color: var(--blue-800);
  font-size: 22px;
  line-height: 1.1;}

.date-block span {
  font-size: 12px;}

.date-list p {
  margin: 0;
  color: #3c4652;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;}

.feature-switch {
  margin-top: 4px;
  padding: 28px 28px 32px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);}

.feature-head,
.list-switch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4ecf3;}

.feature-tabs,
.list-switch-tabs {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  color: #8d97a3;
  font-size: 28px;
  font-weight: 500;}

.feature-tabs button,
.list-switch-tabs button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color .18s ease, font-size .18s ease;}

.feature-tabs button.active,
.list-switch-tabs button.active {
  color: #28384a;
  font-size: 34px;
  font-weight: 800;}

.feature-sep,
.list-switch-tabs span {
  color: #d4dae1;
  font-size: 42px;
  line-height: 1;}

.feature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;}

.feature-plus {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #0f2d53;
  background: #f6f8fc;
  font-size: 38px;
  line-height: 1;}

.feature-panels,
.list-switch-panels {
  min-width: 0;}

.feature-panel,
.list-switch-panel {
  display: none;}

.feature-panel.is-active,
.list-switch-panel.is-active {
  display: block;}

.feature-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 36px;
  align-items: stretch;}

.feature-hero {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  color: #fff;
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(2, 29, 58, 0) 44%, rgba(2, 29, 58, .46) 100%),
    linear-gradient(135deg, #d5e2ed, #f4f9fd 58%, #b7cbe0);}

.feature-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .18) 18.5% 19%, transparent 19.5% 100%),
    repeating-linear-gradient(90deg, rgba(0, 78, 161, .08) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, rgba(0, 78, 161, .06) 0 1px, transparent 1px 32px);
  opacity: .8;}

.feature-hero-date,
.feature-hero-caption,
.feature-story,
.feature-story-arrow,
.feature-story time,
.feature-story p,
.notice-card,
.notice-tag,
.notice-date,
.notice-page-head,
.notice-kind-tabs {
  position: relative;
  z-index: 1;}

.feature-hero-date {
  font-size: 16px;}

.feature-hero-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 700;}

.feature-stories {
  display: grid;
  gap: 14px;
  min-width: 0;}

.feature-story {
  padding: 16px 0 18px;
  border-bottom: 1px solid #e3eaf1;
  min-width: 0;}

.feature-story time {
  color: var(--blue-800);
  font-size: 14px;
  font-weight: 700;}

.feature-story a {
  display: block;
  color: #2b3642;}

.feature-story h3,
.feature-story h4 {
  margin: 8px 0 0;
  font-weight: 500;
  line-height: 1.42;
  overflow: hidden;}

.feature-story.feature-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px 16px;
  align-items: start;
  padding-top: 10px;
  border-top: 4px solid var(--blue-900);}

.feature-story.feature-lead h3 {
  font-size: 24px;}

.feature-story.feature-lead .feature-story-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  font-size: 24px;
  color: #7d8792;}

.feature-story.feature-lead p {
  grid-column: 1 / 3;
  margin: 4px 0 0;
  color: #687789;
  font-size: 15px;
  line-height: 1.75;}

.feature-story:not(.feature-lead) h4 {
  font-size: 18px;}

.feature-story:not(.feature-lead) p {
  margin: 6px 0 0;
  color: #687789;
  font-size: 14px;
  line-height: 1.65;}

.notice-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;}

.home-notice-filter {
  margin: -8px 0 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;}

.home-notice-filter button {
  min-width: 86px;
  height: 34px;
  border: 1px solid #d8e3ef;
  border-radius: 17px;
  color: #516173;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;}

.home-notice-filter button.active {
  color: #fff;
  background: #0d2c54;
  border-color: #0d2c54;}

.notice-grid li,
.notice-page-grid li {
  border: 0;}

.notice-card {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 22px 20px;
  background: #f7f8fa;
  border: 1px solid #f0f1f3;
  box-shadow: none;
  color: #303844;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;}

.notice-card:hover {
  background: #fff;
  border-color: rgba(0, 78, 161, .18);
  box-shadow: 0 10px 24px rgba(0, 78, 161, .08);}

.notice-tag {
  display: inline-flex;
  width: 68px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #fff;
  background: #0d2c54;
  font-size: 14px;
  font-weight: 700;}

.notice-date {
  color: #7f8993;
  font-size: 14px;
  font-weight: 600;}

.notice-card h3 {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.48;
  font-weight: 500;}

.list-switch-head {
  margin-bottom: 18px;}

.list-switch-tabs {
  color: #8d97a3;}

.list-switch-tabs button.active {
  color: #28384a;}

.notice-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--blue-600);}

.notice-page-title {
  display: grid;
  gap: 6px;}

.notice-page-title h1 {
  margin: 0;
  color: #28384a;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;}

.notice-page-title p {
  margin: 0;
  color: #9cabbc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;}

.notice-kind-tabs {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;}

.notice-kind-tabs button {
  height: 34px;
  padding: 0 16px;
  border: 1px solid #d9e2eb;
  background: #fff;
  color: #596674;
  font-size: 14px;
  cursor: pointer;}

.notice-kind-tabs button.active {
  color: #fff;
  border-color: var(--blue-800);
  background: var(--blue-800);}

.notice-page-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;}

.notice-page-grid[hidden] {
  display: none !important;}

.notice-page-grid .notice-card {
  min-height: 170px;}

.quick {
  margin: 36px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;}

.quick a {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  font-size: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent),
    var(--blue-800);}

.quick a:nth-child(2n) {
  background-color: #077982;}

.quick a:nth-child(3n) {
  background-color: var(--sicau-green);}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;}

.module {
  background: rgba(255, 255, 255, .92);
  padding: 0 20px 16px;
  box-shadow: var(--shadow);
  min-width: 0;}

.style-row {
  margin-top: 40px;}

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;}

.style-card {
  height: 210px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, rgba(0, 40, 85, .72)),
    linear-gradient(135deg, #b6d1e7, #f4f9fd);}

.style-card h3 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;}

.footer {
  --footer-wave-width: 1440px;
  --footer-wave-height: 170px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 176px 0 54px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 0 154px, #004ea1 154px, #004d9f 48%, #00458f 76%, #003f84 100%);}

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  pointer-events: none;}

.footer::before {
  height: var(--footer-wave-height);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='170' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0 104C240 154 480 54 720 104C960 154 1200 54 1440 104V170H0V104Z' fill='%23004EA1'/%3E%3C/svg%3E") 0 top / var(--footer-wave-width) var(--footer-wave-height) repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='170' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0 78C240 122 480 34 720 78C960 122 1200 34 1440 78V170H0V78Z' fill='%2389B4D8' fill-opacity='.58'/%3E%3C/svg%3E") 0 top / var(--footer-wave-width) var(--footer-wave-height) repeat-x;
  animation: footerWaveDrift 18s linear infinite;
  will-change: background-position;}

.footer::after {
  top: 154px;
  height: 100%;
  opacity: .34;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1120' height='270' viewBox='0 0 1120 270' fill='none'%3E%3Cg stroke='%23FFFFFF' stroke-width='2' opacity='.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 232h1048M78 214h964'/%3E%3Cpath d='M76 214V150c0-20 42-34 100-34h92c56 0 96 14 96 34v64'/%3E%3Cpath d='M96 150c42-14 218-14 248 0M116 172h54M196 172h54M276 172h50M116 194h54M196 194h54M276 194h50M154 126v88M238 126v88'/%3E%3Cpath d='M352 214V132h348v82M324 132h404M366 154h320M366 178h320M410 214v-58M488 214v-58M566 214v-58M644 214v-58'/%3E%3Cpath d='M492 126V72M492 72l36 14l-36 14'/%3E%3Cpath d='M700 214V70l78-8v152M718 86h44M718 108h44M718 130h44M718 152h44M718 174h44M718 196h44M724 70v144M746 68v146'/%3E%3Cpath d='M778 214V40L964 6l42 24v184H778Z'/%3E%3Cpath d='M822 214V58M864 214V50M906 214V42M948 214V34M986 42v172M794 76h194M794 102h194M794 128h194M794 154h194M794 180h194'/%3E%3Cpath d='M838 70h64M838 82h64M838 94h64M838 106h64M838 118h64M838 130h64M838 142h64M838 154h64M838 166h64M838 178h64' opacity='.72'/%3E%3Cpath d='M700 70L778 40M778 40l36-30M964 6l42 24'/%3E%3Cpath d='M66 232c80-28 144-28 224 0s150 28 242 0s176-28 286 0s176 28 286 0' opacity='.5'/%3E%3C/g%3E%3Cg stroke='%23FFFFFF' stroke-width='1.5' opacity='.56' stroke-linecap='round'%3E%3Cpath d='M238 234c32-38 94-38 128 0M366 234c42-48 114-48 158 0M570 234c34-42 100-42 136 0M58 246h994M146 258h810'/%3E%3C/g%3E%3C/svg%3E") center bottom 165px / min(940px, 72vw) auto no-repeat,
    repeating-linear-gradient(168deg, transparent 0 30px, rgba(255, 255, 255, .045) 31px 32px, transparent 33px 64px),
    repeating-linear-gradient(12deg, transparent 0 38px, rgba(255, 255, 255, .035) 39px 40px, transparent 41px 78px),
    repeating-radial-gradient(ellipse at 26% 98%, transparent 0 22px, rgba(255, 255, 255, .04) 23px 24px, transparent 25px 46px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .46) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .46) 76%, transparent 100%);}

@keyframes footerWaveDrift {
  from {
    background-position:
      0 top,
      0 top;}

  to {
    background-position:
      calc(var(--footer-wave-width) * -1) top,
      var(--footer-wave-width) top;}
}

@media (prefers-reduced-motion: reduce) {
  .footer::before {
    animation: none;}
}

.footer .w1280 {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 56px;
  align-items: center;}

.footer-info {
  display: grid;
  gap: 9px;
  max-width: 760px;}

.footer-info strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.35;}

.footer-info span {
  display: block;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.7;}

.footer-qr {
  width: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;}

.qr {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border: 10px solid rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .95);}

.sub-hero {
  height: 220px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 60, 125, .92), rgba(0, 91, 172, .70)),
    linear-gradient(135deg, #0f66b5, #cde7f8);
  position: relative;
  overflow: hidden;}

.sub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 86% 92%, transparent 0 30%, rgba(255, 255, 255, .20) 30.2% 30.8%, transparent 31% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 36px);}

.sub-hero .w1280 {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;}

.sub-hero h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 900;}

.sub-hero p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .86);
  letter-spacing: .08em;
  text-transform: uppercase;}

.path {
  background: #fff;
  border-bottom: 1px solid var(--line);}

.path .w1280 {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #687789;
  font-size: 14px;}

.path a {
  color: var(--blue-800);}

.article-wrap {
  padding: 38px 0 58px;
  background: var(--paper);}

.article-grid {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 32px;}

.article-grid > * {
  min-width: 0;}

.side {
  background: #fff;
  box-shadow: var(--shadow);}

.side-title {
  padding: 24px 28px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent),
    var(--blue-600);}

.side-title h3 {
  margin: 0;
  font-size: 24px;}

.side-title p {
  margin: 6px 0 0;
  font-size: 13px;
  text-transform: uppercase;}

.side ul {
  margin: 0;
  padding: 0;
  list-style: none;}

.side a {
  display: block;
  padding: 15px 36px 15px 34px;
  border-bottom: 1px solid #e7edf4;
  color: #536171;
  position: relative;}

.side a::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 25px;
  width: 5px;
  height: 5px;
  background: var(--blue-600);}

.side .active a {
  color: var(--blue-800);
  font-weight: 800;
  background: #f1f7fd;}

.article {
  min-height: 620px;
  padding: 38px 48px 46px;
  background: #fff;
  box-shadow: var(--shadow);}

.article-head {
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px dashed #cfd9e4;}

.article-head h1 {
  margin: 0;
  color: #28384a;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 500;}

.meta {
  margin-top: 12px;
  color: #97a2ae;
  font-size: 14px;}

.meta span {
  margin: 0 8px;}

.article-body {
  padding-top: 30px;
  color: #344657;
  font-size: 16px;
  line-height: 2.05;}

.article-body p {
  margin: 0 0 18px;
  text-indent: 2em;}

.article-image {
  max-width: 820px;
  height: 340px;
  margin: 0 auto 22px;
  background:
    linear-gradient(135deg, rgba(0, 78, 161, .13), rgba(13, 104, 68, .06)),
    linear-gradient(125deg, #d7e7f7, #f7fbff 58%, #bfd5e9);
  border: 1px solid #ccdae8;
  position: relative;
  overflow: hidden;}

.article-image::after {
  content: "";
  position: absolute;
  inset: 34px 48px;
  border: 1px solid rgba(0, 78, 161, .20);
  background:
    repeating-linear-gradient(90deg, rgba(0, 78, 161, .16) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(0, 78, 161, .10) 0 1px, transparent 1px 28px);}

.article-links {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #e3eaf1;
  color: #536171;
  line-height: 2;}

.article-links a {
  color: var(--blue-800);}

.list-page {
  padding-top: 34px;}

.list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--blue-600);}

.list-head h1 {
  margin: 0;
  color: #28384a;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;}

.list-head p {
  margin: 0;
  color: #9cabbc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;}

.article-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;}

.article-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  border-bottom: 1px solid #e3eaf1;}

.article-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--blue-600);}

.article-list a {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #344657;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;}

.article-list a:hover {
  color: var(--blue-800);}

.article-list time {
  flex: 0 0 auto;
  color: #8d9bad;
  font-size: 14px;
  white-space: nowrap;}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;}

.pagination a,
.pagination span {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #d7e2ee;
  color: #52677d;
  background: #fff;
  font-size: 14px;
  font-weight: 700;}

.pagination a.active {
  border-color: var(--blue-600);
  color: #fff;
  background: var(--blue-600);}

.pagination .disabled {
  color: #a7b3bf;
  background: #f5f8fb;}

@media (max-width: 980px) {
  body > header {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88)),
      linear-gradient(135deg, rgba(22, 113, 206, .10), rgba(13, 104, 68, .06));}

  .w1280 {
    width: min(calc(100vw - 28px), 1280px);}

  .topbar,
  .nav-box {
    display: none;}

  .header {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88)),
      linear-gradient(135deg, rgba(22, 113, 206, .10), rgba(13, 104, 68, .06));}

  .header-actions {
    height: auto;
    display: flex;
    gap: 0;}

  body.is-scrolled .header-actions {
    height: auto;}

  .search {
    display: none;}

  .header .w1280 {
    width: min(calc(100vw - 28px), 1280px);
    height: 92px;
    justify-content: space-between;
    gap: 12px;}

  body.is-scrolled .header .w1280 {
    height: 82px;}

  .brand {
    flex: 1 1 auto;
    gap: 12px;}

  .brand-logo {
    width: 50px;
    height: 50px;}

  .brand h1 {
    color: var(--blue-900);
    white-space: normal;
    white-space: nowrap;
    font-size: clamp(17px, 4.85vw, 19px);}

  .brand p {
    color: #6c7d8f;
    max-width: 300px;
    font-size: 10px;
    line-height: 1.32;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;}

  body.is-scrolled .brand-logo {
    width: 46px;
    height: 46px;}

  body.is-scrolled .brand h1 {
    font-size: clamp(17px, 4.7vw, 18px);}

  .brand-logo {
    filter: none;
    opacity: 1;}

  body.is-scrolled .brand p {
    max-height: 0;
    opacity: 0;}

  .menu-toggle {
    width: 46px;
    height: 46px;
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--blue-800);}

  body.is-scrolled .menu-toggle {
    height: 46px;
    background: transparent;
    color: var(--blue-800);}

  .menu-toggle span {
    width: 27px;
    height: 3px;
    background: currentColor;}

  .nav-box {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 330px);
    display: block;
    transform: translateX(-100%);
    transition: transform .22s ease;
    background: #f8fbff;
    box-shadow: 18px 0 44px rgba(0, 45, 98, .26);
    overflow-y: auto;
    z-index: 120;}

  body.nav-open {
    overflow: hidden;}

  body.nav-open .nav-box {
    transform: translateX(0);}

  body.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 34, 74, .48);
    z-index: 110;}

  .mobile-nav-head {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #fff;
    background: var(--blue-800);}

  .mobile-nav-head strong {
    font-size: 18px;}

  .menu-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;}

  .mobile-nav-search {
    height: 44px;
    width: calc(100% - 36px);
    margin: 16px 18px 10px;
    display: flex;
    align-items: center;
    border: 1px solid #d6e4f2;
    background: #fff;
    padding: 0;
    font: inherit;
    cursor: pointer;}

  .mobile-nav-search span {
    flex: 1;
    padding-left: 12px;
    color: #8793a1;
    font-size: 14px;}

  .mobile-nav-search b {
    width: 44px;
    display: grid;
    place-items: center;
    color: var(--blue-800);}

  .search-panel {
    align-items: start;
    padding: 112px 16px 28px;}

  .search-panel-card {
    padding: 28px 18px 24px;}

  .search-panel-card h2 {
    padding-right: 42px;
    font-size: 24px;}

  .search-panel-form {
    grid-template-columns: 1fr;}

  .search-panel-input {
    height: 52px;
    font-size: 16px;}

  .search-panel-form button {
    height: 48px;}

  .nav-list {
    display: block;
    height: auto;}

  body.is-scrolled .nav-list {
    height: auto;}

  .nav-link {
    height: 52px;
    justify-content: space-between;
    padding: 0 18px;
    color: #35495c;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e2ebf4;
    font-size: 16px;}

  body.is-scrolled .nav-link {
    height: 52px;}

  .nav-item.has-dropdown > .nav-link::after {
    content: "›";
    color: #9aa8b7;
    font-size: 24px;
    transform: rotate(90deg);}

  .nav-item.is-open > .nav-link {
    color: var(--blue-800);
    background: #eef6ff;}

  .nav-item.is-open > .nav-link::after {
    transform: rotate(-90deg);}

  .dropdown {
    position: static;
    display: none;
    width: 100%;
    margin: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: #f1f7fd;}

  .nav-item.is-open .dropdown {
    display: block;}

  .dropdown a {
    padding: 10px 18px 10px 34px;
    color: #536171;
    text-align: left;}

  .hero-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 8;
    background:
      linear-gradient(90deg, #003a7a 0%, #0a68af 46%, #bdefff 100%);}

  .hero-image {
    object-fit: cover;
    object-position: left center;}

  .hero-arrow {
    display: none;}

  .hero-dots {
    bottom: 9px;}

  .hero-dots button {
    width: 22px;}

  .hero-dots button.active {
    width: 38px;}

  .main {
    padding: 36px 0 42px;}

  .main::after {
    opacity: .58;
    background-position:
      left -230px top 36px,
      right -255px top 300px,
      center 112px,
      center 24px,
      12% 22%,
      92% 28%;
    background-size:
      330px auto,
      360px auto,
      760px auto,
      520px auto,
      auto,
      auto;}

  .feature-news-layout,
  .notice-grid,
  .notice-page-grid,
  .module-grid,
  .style-grid,
  .article-grid,
  .footer .w1280 {
    grid-template-columns: 1fr;}

  .feature-head,
  .list-switch-head,
  .notice-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;}

  .feature-switch {
    padding: 18px 14px 22px;}

  .feature-tabs,
  .list-switch-tabs {
    font-size: 20px;}

  .feature-tabs button.active,
  .list-switch-tabs button.active {
    font-size: 28px;}

  .feature-sep,
  .list-switch-tabs span {
    font-size: 30px;}

  .feature-plus {
    width: 48px;
    height: 48px;
    font-size: 30px;}

  .feature-news-layout {
    gap: 18px;}

  .feature-hero {
    min-height: 280px;}

  .feature-hero-caption {
    font-size: 17px;
    line-height: 1.45;}

  .notice-grid,
  .notice-page-grid {
    grid-template-columns: 1fr;}

  .home-notice-filter {
    margin: -2px 0 14px;
    justify-content: stretch;}

  .home-notice-filter button {
    flex: 1;}

  .notice-card,
  .notice-page-grid .notice-card {
    min-height: 148px;}

  .notice-kind-tabs {
    width: 100%;}

  .notice-page-title h1 {
    font-size: 24px;}

  .footer .w1280 {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;}

  .footer {
    --footer-wave-width: 960px;
    --footer-wave-height: 126px;
    margin-top: 0;
    padding: 132px 0 42px;
    background:
      linear-gradient(180deg, transparent 0 114px, #004ea1 114px, #004d9f 48%, #00458f 76%, #003f84 100%);}

  .footer::before {
    height: var(--footer-wave-height);
    background-size:
      var(--footer-wave-width) var(--footer-wave-height),
      var(--footer-wave-width) var(--footer-wave-height);
    background-position: center top;}

  .footer::after {
    top: 114px;
    background-size:
      104vw auto,
      auto,
      auto,
      auto;
    background-position:
      center bottom 30px,
      0 0,
      0 0,
      0 0;}

  .footer-qr {
    align-items: flex-start;
    text-align: left;}

  .quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));}

  .article {
    padding: 28px 20px 36px;}

  .list-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;}

  .article-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 13px 0 13px 16px;
    position: relative;}

  .article-list li::before {
    position: absolute;
    left: 0;
    top: 24px;}

  .article-list a {
    width: 100%;}

  .article-list time {
    font-size: 13px;}

  .article-image {
    height: 220px;}
}