/* Premium visual layer for zikaocn.com - 2026-06-24 */
:root {
  --zk-ink: #132033;
  --zk-muted: #64748b;
  --zk-line: #e5edf6;
  --zk-soft: #f5f8fc;
  --zk-blue: #0f74d8;
  --zk-blue-2: #08a7e8;
  --zk-gold: #f2a51d;
  --zk-red: #ef4b3f;
  --zk-card: #ffffff;
  --zk-shadow: 0 14px 38px rgba(20, 47, 86, .10);
  --zk-shadow-hover: 0 20px 46px rgba(20, 47, 86, .16);
  --zk-radius: 8px;
}

html {
  background: #f7f9fc;
}

body {
  background:
    linear-gradient(180deg, #f7fbff 0, #fff 360px, #f7f9fc 760px, #fff 100%);
  color: var(--zk-ink);
}

* {
  letter-spacing: 0;
}

a,
button,
input,
select,
textarea,
li,
.img img {
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .22s ease, transform .22s ease, opacity .18s ease;
}

.center {
  width: 1200px;
}

#head {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 30px rgba(19, 32, 51, .05);
  position: relative;
  z-index: 30;
}

#head .register-wrap {
  background: #0f2036;
  height: 34px;
}

#head .register-wrap .center .left,
#head .register-wrap .center .right,
#head .register-wrap .center .left a,
#head .register-wrap .center .right a,
#head .register-wrap .center .left span,
#head .register-wrap .center .right span {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 13px;
  line-height: 34px;
}

#head .nav-wrap {
  background: rgba(255, 255, 255, .98);
}

#head .nav-wrap .search-box {
  align-items: center;
  padding: 22px 0 16px;
}

#head .nav-wrap .search-box .f-left .logo {
  width: 236px;
}

#head .nav-wrap .search-box .f-left .logo p {
  color: var(--zk-muted);
  margin-top: 3px;
}

#head .nav-wrap .search-box .f-right .search-inp .s-top .left {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 116, 216, .12), inset 0 0 0 1px rgba(15, 116, 216, .18);
  overflow: hidden;
}

#head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-option {
  background: #f5f9fe;
  border-right: 1px solid var(--zk-line);
}

#head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-search {
  height: 42px;
}

#head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-search form input {
  color: var(--zk-ink);
  font-size: 14px;
}

#head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-search .search-btn,
#head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-search div[onclick] {
  background: linear-gradient(135deg, var(--zk-blue), var(--zk-blue-2)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

#head .nav-wrap .search-box .f-right .search-inp .s-bottom > div a {
  color: #718096;
}

#head .nav-wrap .search-box .f-right .search-inp .s-bottom > div a:hover,
.a-hover:hover {
  color: var(--zk-gold) !important;
}

#head .nav-wrap .nav-box {
  background: linear-gradient(135deg, #0f74d8 0%, #08a7e8 100%);
  box-shadow: 0 10px 24px rgba(15, 116, 216, .20);
  height: 46px;
}

#head .nav-wrap .nav-box .menu-wrap {
  background: linear-gradient(135deg, #0d5fb4, #0b88d8);
  height: 46px;
}

#head .nav-wrap .nav-box .menu-wrap > .title > p,
#head .nav-wrap .nav-box .nav-tabs ul li > a {
  color: #fff;
  line-height: 46px;
}

#head .nav-wrap .nav-box .nav-tabs ul li {
  position: relative;
}

#head .nav-wrap .nav-box .nav-tabs ul li::after {
  background: rgba(255, 255, 255, .9);
  border-radius: 99px;
  bottom: 7px;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  width: 28px;
}

#head .nav-wrap .nav-box .nav-tabs ul li:hover::after {
  transform: translateX(-50%) scaleX(1);
}

#head .nav-wrap .nav-box .menu-wrap > .title .menu-info-wrap > ul {
  border-radius: 0 0 8px 8px;
  box-shadow: var(--zk-shadow);
  overflow: hidden;
}

#head .nav-wrap .nav-box .menu-wrap > .title .menu-info-wrap > ul > li:hover {
  background: #f4f9ff;
  border-color: #b9dcfb;
}

#body,
#home .content {
  background: transparent;
}

#home .banner {
  animation: zkFadeUp .5s ease both;
  margin-bottom: 34px;
}

#home .banner > .right {
  gap: 14px;
  margin-left: 12px;
  margin-top: 16px;
}

#home .banner > .right .main {
  width: 730px;
}

#home .banner > .right .main .top,
#home .banner > .right .main .top .device,
#home .banner > .right .main .top .swiper-container,
.device .swiper-slide img {
  border-radius: var(--zk-radius);
  overflow: hidden;
}

#home .banner > .right .main .top {
  box-shadow: var(--zk-shadow);
  position: relative;
}

#home .banner > .right .main .top::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .34) 42%, transparent 62%);
  content: "";
  height: 100%;
  left: -80%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: skewX(-16deg);
  width: 55%;
}

#home .banner > .right .main .top:hover::after {
  animation: zkShine 1.2s ease;
}

#home .banner > .right .main .bottom li,
#home .banner > .right .article .baoming,
#home .banner > .right .article .news,
#home .banner > .right .article .gg,
#home .hot-zy .h-body .left,
#home .hot-zy .h-body .right li,
#home .content .worker-school .w-body .hot,
#home .content .five-year .w-body .hot,
#home .content .worker-school .w-body .issue,
#home .content .five-year .w-body .issue,
#home .content .worker-school .w-body .sch ul li,
#home .content .five-year .w-body .sch ul li,
.fine,
.recommend-zy,
.list-tab-wrap,
#school-list .school-filter,
#school-list .list-wrap .left,
#school-list .list-wrap .right1 .signUp,
#school-list .list-wrap .right1 .r-hot-zy,
#school-list .list-wrap .right1 .fine {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(229, 237, 246, .95);
  border-radius: var(--zk-radius);
  box-shadow: var(--zk-shadow);
}

#home .banner > .right .main .bottom li:hover,
#home .hot-zy .h-body .right li:hover,
#home .content .worker-school .w-body .sch ul li:hover,
#home .content .five-year .w-body .sch ul li:hover,
.fine:hover,
.recommend-zy:hover,
#school-list .list-wrap .left .l-body ul li:hover {
  box-shadow: var(--zk-shadow-hover);
  transform: translateY(-4px);
}

#home .banner > .right .main .bottom li {
  height: 150px;
  margin-right: 7px;
}

#home .banner > .right .main .bottom li .text p:first-child {
  color: var(--zk-ink);
  font-weight: 700;
}

#home .banner > .right .main .bottom li .text .a1 {
  color: var(--zk-muted);
}

#home .banner > .right .article {
  margin-left: 0;
  width: 250px;
}

#home .banner > .right .article .baoming {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  height: 202px;
  padding: 12px;
}

#home .banner > .right .article .baoming form > div,
.fine .f-body .from > div,
.bottom-form form input {
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: 6px;
}

#home .banner > .right .article .baoming form > div:focus-within,
.fine .f-body .from > div:focus-within,
.bottom-form form input:focus {
  border-color: rgba(15, 116, 216, .55);
  box-shadow: 0 0 0 3px rgba(15, 116, 216, .10);
}

#home .banner > .right .article .baoming form button,
.fine .f-body .from > button,
.bottom-form form button,
#school-list .list-wrap .left .l-body ul li .con .btn button,
#school-list .list-wrap .left .l-body ul li .con .btn a:first-child {
  background: linear-gradient(135deg, #ef4b3f, #f2a51d) !important;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(239, 75, 63, .22);
  color: #fff !important;
  font-weight: 700;
}

#home .banner > .right .article .baoming form button:hover,
.fine .f-body .from > button:hover,
.bottom-form form button:hover,
#school-list .list-wrap .left .l-body ul li .con .btn button:hover,
#school-list .list-wrap .left .l-body ul li .con .btn a:hover {
  box-shadow: 0 14px 28px rgba(239, 75, 63, .28);
  transform: translateY(-2px);
}

#home .banner > .right .article .news,
#home .banner > .right .article .gg {
  overflow: hidden;
}

#home .banner > .right .article .news .title p,
#home .content .con-title .left span:nth-of-type(1),
#home .content .con-title .left .s1 {
  color: var(--zk-ink);
  font-weight: 800;
}

#home .content .center > div,
#home .hot-zy,
#home .content .worker-school,
#home .content .five-year {
  animation: zkFadeUp .58s ease both;
}

#home .content .con-title {
  border-bottom: 1px solid var(--zk-line);
  margin-top: 8px;
  padding-bottom: 14px;
  padding-top: 18px;
}

#home .content .con-title .left .s2,
#home .content .con-title .left span:nth-of-type(2) {
  color: #91a0b4;
  font-style: normal;
  margin-left: 8px;
}

#home .content .con-title .right p a,
#home .content .con-title .right a {
  color: var(--zk-blue);
  font-weight: 700;
}

#home .content .slogan {
  border-radius: var(--zk-radius);
  box-shadow: var(--zk-shadow);
  margin: 18px 0 24px;
  overflow: hidden;
}

#home .hot-zy .h-body {
  gap: 18px;
}

#home .hot-zy .h-body .left {
  background-color: #0f74d8;
  background-image: linear-gradient(150deg, rgba(15, 116, 216, .95), rgba(8, 167, 232, .78)), url(../images/tu1.jpg);
  border: 0;
  overflow: hidden;
  position: relative;
}

#home .hot-zy .h-body .left::before {
  background: rgba(255, 255, 255, .16);
  content: "";
  height: 180px;
  position: absolute;
  right: -70px;
  top: -80px;
  transform: rotate(26deg);
  width: 150px;
}

#home .hot-zy .h-body .left .t-list li a {
  border-radius: 6px 0 0 6px;
}

#home .hot-zy .h-body .left .t-list .active a,
#home .hot-zy .h-body .left .t-list li:hover a {
  background: #fff;
  box-shadow: 0 10px 24px rgba(6, 72, 130, .18);
}

#home .hot-zy .h-body .left .t-list .active a p,
#home .hot-zy .h-body .left .t-list li:hover a p {
  color: var(--zk-blue);
}

#home .hot-zy .h-body .right {
  flex: 1;
}

#home .hot-zy .h-body .right li {
  overflow: hidden;
}

#home .hot-zy .h-body .right li .img {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

#home .hot-zy .h-body .right li:hover .img img,
#home .content .worker-school .w-body .sch ul li:hover .img img,
#home .content .five-year .w-body .sch ul li:hover .img img {
  transform: scale(1.06);
}

#home .hot-zy .h-body .right li .con .c-name,
#home .content .worker-school .w-body .sch ul li .img p,
#home .content .five-year .w-body .sch ul li .img p {
  color: var(--zk-ink);
  font-weight: 700;
}

#home .content .worker-school .w-body,
#home .content .five-year .w-body {
  gap: 18px;
}

#home .content .worker-school .w-body .hot .title,
#home .content .five-year .w-body .hot .title,
.fine .title,
.recommend-zy .title {
  border-bottom-color: var(--zk-line);
}

#home .content .worker-school .w-body .hot .title p span:nth-of-type(1),
#home .content .five-year .w-body .hot .title p span:nth-of-type(1) {
  border-bottom-color: var(--zk-blue);
  color: var(--zk-ink);
  font-weight: 800;
}

#home .content .worker-school .w-body .issue .title ul .active,
#home .content .five-year .w-body .issue .title ul .active {
  background: linear-gradient(135deg, var(--zk-blue), var(--zk-blue-2));
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(15, 116, 216, .20);
}

#home .content .worker-school .w-body .sch ul li .btn a,
#home .content .five-year .w-body .sch ul li .btn a {
  border-radius: 5px;
}

#home .content .worker-school .w-body .sch ul li .btn .b1,
#home .content .five-year .w-body .sch ul li .btn .b1,
#school-list .list-wrap .left .l-body ul li .con .btn a.b1,
#school-list .list-wrap .left .l-body ul li .con .btn a:first-child {
  background: linear-gradient(135deg, var(--zk-blue), var(--zk-blue-2)) !important;
  color: #fff !important;
}

#home .content .worker-school .w-body .sch ul li .btn .b2,
#home .content .five-year .w-body .sch ul li .btn .b2 {
  background: #fff7e8 !important;
  border: 1px solid #ffe1a2;
  color: #c98300 !important;
}

#school-list .school-filter {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border-color: rgba(210, 225, 242, .95);
}

#school-list .school-filter .filter-kicker {
  color: var(--zk-gold);
}

#school-list .school-filter h2,
#school-list .list-wrap .left .title p,
#school-list .list-wrap .right1 .signUp .title p,
#school-list .list-wrap .right1 .r-hot-zy .title p,
#school-list .list-wrap .right1 .fine .title p {
  color: var(--zk-ink);
}

#school-list .school-filter .filter-options a {
  border-radius: 999px;
  min-height: 32px;
  padding: 0 13px;
}

#school-list .school-filter .filter-options a:hover {
  background: #eef7ff;
  border-color: #c9e4fb;
  transform: translateY(-1px);
}

#school-list .school-filter .filter-options a.active {
  background: linear-gradient(135deg, #fff6e5, #ffe7ae);
  border-color: #ffd981;
  box-shadow: 0 8px 18px rgba(242, 165, 29, .14);
  color: #a86c00;
}

#school-list .list-wrap .left .l-body ul li {
  border-color: var(--zk-line);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

#footer {
  background: #0f2036;
  margin-top: 40px;
}

#footer,
#footer p,
#footer a,
#footer span,
#footer li {
  color: rgba(255, 255, 255, .78) !important;
}

#footer .center .go-top > li {
  border-color: rgba(15, 116, 216, .18);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(19, 32, 51, .12);
  margin-bottom: 8px;
  overflow: hidden;
}

#footer .center .go-top > li:hover {
  background: linear-gradient(135deg, var(--zk-blue), var(--zk-blue-2));
  border-color: transparent;
  transform: translateY(-2px);
}

.bottom-form {
  background: rgba(15, 32, 54, .88);
  backdrop-filter: blur(8px);
  box-shadow: 0 -12px 34px rgba(15, 32, 54, .18);
}

.bottom-form .text p {
  color: #fff;
}

@keyframes zkFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zkShine {
  from { left: -80%; }
  to { left: 130%; }
}

@media (max-width: 760px) {
  .center {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
  }

  #head .register-wrap {
    display: none;
  }

  #head .nav-wrap .search-box,
  #home .banner > .right,
  #home .hot-zy .h-body,
  #home .content .worker-school .w-body,
  #home .content .five-year .w-body {
    display: block;
  }

  #head .nav-wrap .search-box .f-left .logo,
  #head .nav-wrap .search-box .f-right,
  #home .banner > .right .main,
  #home .banner > .right .article,
  #home .hot-zy .h-body .left,
  #home .hot-zy .h-body .right,
  #home .content .worker-school .w-body .hot,
  #home .content .five-year .w-body .hot,
  #home .content .worker-school .w-body .issue,
  #home .content .five-year .w-body .issue,
  #home .content .worker-school .w-body .sch,
  #home .content .five-year .w-body .sch {
    margin-left: 0;
    width: 100% !important;
  }

  #head .nav-wrap .search-box .f-right {
    margin-top: 12px;
  }

  #head .nav-wrap .search-box .f-right .search-inp .s-top .left .l-search {
    width: calc(100vw - 156px);
  }

  #head .nav-wrap .nav-box {
    overflow-x: auto;
  }

  #head .nav-wrap .nav-box .menu-wrap {
    flex: 0 0 150px;
  }

  #home .banner > .right .main .top,
  #home .banner > .right .main .top .swiper-container,
  #home .banner > .right .main .top .swiper-slide img {
    height: auto !important;
  }

  #home .banner > .right .main .bottom ul,
  #home .hot-zy .h-body .right ul {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #home .banner > .right .main .bottom li,
  #home .hot-zy .h-body .right li {
    height: auto;
    margin: 0;
    width: 100% !important;
  }

  #home .banner > .right .article > div,
  #home .content .slogan,
  #home .hot-zy .h-body .left,
  #home .content .worker-school .w-body > div,
  #home .content .five-year .w-body > div {
    margin-top: 12px;
  }

  .bottom-form {
    display: none;
  }
}