/* ============ 首页：Banner 轮播 ============ */
.hero { position: relative; background: var(--c-dark); }
.hero .slides { position: relative; width: 100%; aspect-ratio: 1920 / 600; max-height: 400px; overflow: hidden; }
.hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; display: flex; align-items: center; }
.hero .slide.active { opacity: 1; }
.hero .slide .ph { width: 100%; height: 100%; display: flex; align-items: center;
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-primary-d) 100%); }
.hero .slide .txt { max-width: var(--container); margin: 0 auto; padding: 0 16px; color: #fff; width: 100%; }
.hero .slide h2 { font-family: var(--font-serif); font-size: 40px; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.hero .slide p { font-size: 18px; margin-top: 14px; letter-spacing: 2px; opacity: .92; }
.hero .dots { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; z-index: 5; }
.hero .dots span { display: inline-block; width: 26px; height: 4px; margin: 0 4px; background: rgba(255,255,255,.45); border-radius: 2px; cursor: pointer; }
.hero .dots span.active { background: var(--c-gold); }

/* ============ 首页：快捷入口 ============ */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quick-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 16px; text-align: center; transition: all .2s; border-top: 3px solid transparent; }
.quick-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-top-color: var(--c-primary); }
.quick-item .ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--c-primary-l); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.quick-item .t { font-size: 16px; color: var(--c-dark); }
.quick-item .s { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }

/* ============ 首页：双栏（要闻 + 通知） ============ */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.news-list { background: #fff; padding: 8px 24px 18px; box-shadow: var(--shadow); border-radius: var(--radius); }
.news-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px dashed var(--c-border); }
.news-list li:last-child { border-bottom: 0; }
.news-list .tt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 14px; position: relative; }
.news-list .tt::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: var(--c-primary); border-radius: 50%; }
.news-list .top-tag { display: inline-block; background: var(--c-primary); color: #fff; font-size: 11px; padding: 0 5px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.news-list .date { color: var(--c-text-3); font-size: 12px; margin-left: 12px; flex-shrink: 0; }

/* ============ 专家卡片网格 ============ */
.expert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.expert-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: all .2s; text-align: center; }
.expert-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.expert-card .photo { width: 100%; aspect-ratio: 1024 / 756; background: linear-gradient(135deg, #eef2f7, #dde5ef); display: flex; align-items: center; justify-content: center; color: var(--c-text-3); font-size: 13px; }
.expert-card .body { padding: 16px; }
.expert-card .name { font-size: 18px; color: var(--c-dark); }
.expert-card .title { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }
.expert-card .fields { margin-top: 10px; }
.expert-card .fields .badge { margin: 0 3px 4px 0; }

/* ============ 培训卡片 ============ */
.training-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.training-card { display: flex; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: all .2s; }
.training-card:hover { box-shadow: var(--shadow-hover); }
.training-card .cover { width: 180px; flex-shrink: 0; background: linear-gradient(135deg, var(--c-dark), var(--c-dark-2)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 13px; }
.training-card .info { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.training-card .info h3 { font-size: 17px; color: var(--c-dark); }
.training-card .info .meta { font-size: 12px; color: var(--c-text-3); margin-top: 8px; line-height: 1.9; }
.training-card .info .meta b { color: var(--c-text-2); font-weight: normal; }
.training-card .info .ft { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.training-card .price { color: var(--c-primary); font-size: 18px; font-weight: 600; }

/* ============ 资讯列表（列表页） ============ */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar a { padding: 6px 16px; border-radius: 20px; background: #f1f3f6; color: var(--c-text-2); font-size: 13px; }
.filter-bar a.active, .filter-bar a:hover { background: var(--c-primary); color: #fff; }
.article-list li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--c-border); }
.article-list .cover { width: 200px; height: 130px; flex-shrink: 0; border-radius: var(--radius); background: linear-gradient(135deg, #eef2f7, #dde5ef); display: flex; align-items: center; justify-content: center; color: var(--c-text-3); font-size: 12px; overflow: hidden; }
.article-list .body { flex: 1; display: flex; flex-direction: column; }
.article-list .body h3 { font-size: 17px; color: var(--c-dark); }
.article-list .body h3:hover { color: var(--c-primary); }
.article-list .body .sum { color: var(--c-text-2); margin-top: 8px; }
.article-list .body .meta { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--c-text-3); display: flex; gap: 16px; }

/* ============ 文章详情 ============ */
.article { padding: 10px 0 0; }
.article h1 { font-size: 26px; color: var(--c-dark); text-align: center; line-height: 1.5; }
.article .meta { text-align: center; color: var(--c-text-3); font-size: 13px; margin: 16px 0 24px; padding: 12px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.article .meta span { margin: 0 12px; }
.article .content { font-size: 16px; line-height: 2; color: #333; }
.article .content p { margin-bottom: 16px; }
.article-near { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--c-border); font-size: 13px; }
.article-nar-item { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 专家详情 ============ */
.expert-profile { display: flex; gap: 30px; }
.expert-profile .avatar { width: 320px; aspect-ratio: 1024 / 756; height: auto; flex-shrink: 0; border-radius: var(--radius); background: linear-gradient(135deg, #eef2f7, #dde5ef); display: flex; align-items: center; justify-content: center; color: var(--c-text-3); }
.expert-profile .h h1 { font-size: 26px; color: var(--c-dark); }
.expert-profile .h .title { color: var(--c-text-2); margin: 6px 0 14px; }
.profile-section { margin-top: 26px; }
.profile-section h3 { font-size: 17px; color: var(--c-dark); border-left: 4px solid var(--c-primary); padding-left: 10px; margin-bottom: 12px; }
.profile-section ul li { padding: 5px 0 5px 16px; position: relative; color: var(--c-text-2); }
.profile-section ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: var(--c-gold); border-radius: 50%; }

/* ============ 证书查验 ============ */
.verify-box { max-width: 640px; margin: 0 auto; background: #fff; padding: 34px; border-radius: var(--radius); box-shadow: var(--shadow); }
.verify-box h2 { text-align: center; color: var(--c-dark); margin-bottom: 6px; }
.verify-box .sub { text-align: center; color: var(--c-text-3); font-size: 13px; margin-bottom: 24px; }
.verify-row { display: flex; gap: 10px; }
.verify-row .form-control { flex: 1; }
.verify-result { margin-top: 24px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--c-border); }
.verify-result.ok { background: #f6fffb; border-color: #b7ebcc; }
.verify-result.fail { background: #fff5f5; border-color: #ffccc7; }
.cert-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 6px; }
.cert-meta .k { color: var(--c-text-3); }
.cert-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cert-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cert-card .img { aspect-ratio: 3 / 2; background: linear-gradient(135deg, #fbf3e8, #f3e6cf); display: flex; align-items: center; justify-content: center; color: var(--c-gold); font-family: var(--font-serif); font-size: 18px; border-bottom: 2px solid var(--c-gold); }
.cert-card .body { padding: 14px; }
.cert-card .body h4 { color: var(--c-dark); }
.cert-card .body .meta { font-size: 12px; color: var(--c-text-3); margin-top: 6px; }

/* ============ 研究成果 ============ */
.research-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--c-border); }
.research-list .body h3 { color: var(--c-dark); font-size: 16px; }
.research-list .body .abs { color: var(--c-text-2); margin-top: 6px; font-size: 13px; }
.research-list .body .meta { font-size: 12px; color: var(--c-text-3); margin-top: 8px; display: flex; gap: 14px; }

/* ============ 关于我们 ============ */
.about-section { margin-bottom: 30px; }
.about-section h2 { font-size: 20px; color: var(--c-dark); border-left: 5px solid var(--c-primary); padding-left: 12px; margin-bottom: 14px; }
.about-section p { color: var(--c-text-2); }
.org-tree { padding-left: 10px; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--c-border); }
.timeline li { position: relative; padding: 0 0 22px 6px; }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c-primary); }
.timeline .yr { color: var(--c-primary); font-weight: 600; margin-right: 10px; }

/* ============ 联系/留言 ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-info li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--c-border); }
.contact-info .k { width: 90px; color: var(--c-text-3); flex-shrink: 0; }

/* ============ 响应式（页面级） ============ */
@media (max-width: 980px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .cols-2 { grid-template-columns: 1fr; }
  .expert-grid { grid-template-columns: repeat(2, 1fr); }
  .training-grid { grid-template-columns: 1fr; }
  .training-card .cover { width: 120px; }
  .cert-wall { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .expert-profile { flex-direction: column; align-items: center; text-align: center; }
  .article .content { font-size: 15px; }
}
@media (max-width: 560px) {
  .hero .slides { height: auto; }
  .hero .slide h2 { font-size: 26px; }
  .hero .slide p { font-size: 14px; }
  .expert-grid, .cert-wall, .quick-grid { grid-template-columns: 1fr; }
  .article-list .cover { width: 120px; height: 80px; }
  .cert-meta { grid-template-columns: 1fr; }
}

/* ============ 课程报名模态框 (Modal) ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-30px);
  transition: transform 0.3s ease;
  overflow: hidden;
  border-top: 4px solid var(--c-primary);
}
.modal-backdrop.show .modal-card {
  transform: translateY(0);
}
.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}
.modal-header h3 {
  font-size: 18px;
  color: var(--c-dark);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--c-text-3);
  line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover {
  color: var(--c-primary);
}
.modal-body {
  padding: 20px 24px;
  max-height: 70vh;
  overflow-y: auto;
}
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fafafa;
}

/* ============ 电子证书页面级渲染 (Certificate HTML Template) ============ */
.e-cert-wrapper {
  margin-top: 24px;
  perspective: 1000px;
  animation: floatIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.e-cert-border {
  position: relative;
  background: #fdfaf4;
  border: 16px double var(--c-gold);
  padding: 35px 45px;
  box-shadow: var(--shadow-hover), 0 15px 40px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  color: #3f3b30;
  max-width: 660px;
  margin: 0 auto;
}
.e-cert-border::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid var(--c-gold);
  pointer-events: none;
}
.e-cert-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  font-family: var(--font-serif);
  color: rgba(200, 164, 92, 0.05);
  font-weight: bold;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.e-cert-header h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--c-primary);
  letter-spacing: 10px;
  font-weight: bold;
  margin: 10px 0 2px;
}
.e-cert-header .sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.e-cert-body {
  font-size: 15px;
  line-height: 2.3;
  margin: 25px auto;
  max-width: 520px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.e-cert-body p {
  margin-bottom: 12px;
  text-indent: 2em;
}
.e-cert-body strong {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--c-dark);
  border-bottom: 1.5px solid #3f3b30;
  padding: 0 4px;
  font-weight: 600;
}
.e-cert-footer {
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  position: relative;
}
.e-cert-info {
  text-align: left;
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.8;
}
.e-cert-signatures {
  text-align: right;
  line-height: 2;
  font-size: 13px;
  margin-right: 120px;
}
.e-cert-signatures .president {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: bold;
  color: #111;
  margin-top: 4px;
}
.e-cert-seal-box {
  position: absolute;
  right: 15px;
  bottom: -15px;
  pointer-events: none;
  width: 110px;
  height: 110px;
  z-index: 10;
}
/* CSS 模拟公章 */
.e-cert-seal {
  width: 110px;
  height: 110px;
  border: 3px solid rgba(176, 28, 46, 0.85);
  border-radius: 50%;
  color: rgba(176, 28, 46, 0.85);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  box-sizing: border-box;
}
.e-cert-seal::before {
  content: "★";
  font-size: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.e-cert-seal-text {
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.e-cert-seal-text span {
  position: absolute;
  transform-origin: bottom center;
  height: 48px;
  top: 5px;
}
.e-cert-status-tag {
  position: absolute;
  top: 25px;
  right: 35px;
  border: 3px solid;
  padding: 4px 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(12deg);
  border-radius: 4px;
  opacity: 0.85;
}
.e-cert-status-tag.valid {
  color: #2e9e5b;
  border-color: #2e9e5b;
}
.e-cert-status-tag.lost {
  color: #c8870c;
  border-color: #c8870c;
}
.e-cert-status-tag.revoked {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* ============ 图片加载过渡与卡片美化 ============ */
.expert-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.training-card .cover img, .article-list .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.expert-card:hover .photo img, .training-card:hover .cover img, .article-list:hover .cover img {
  transform: scale(1.05);
}
.expert-card .photo, .training-card .cover, .article-list .cover {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.expert-profile .avatar {
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.expert-profile .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ 新闻详情两栏布局 (News Detail Layout) ============ */
.news-layout {
  display: grid;
  grid-template-columns: 2.8fr 1.2fr;
  gap: 28px;
}
.news-main {
  min-width: 0;
}
.news-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-side-widget {
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  border-top: 3px solid var(--c-primary);
}
.news-side-widget h3 {
  font-size: 16px;
  color: var(--c-dark);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-weight: 600;
}
.news-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-side-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-side-list li:last-child {
  border-bottom: 0;
}
.news-side-list a {
  color: var(--c-text-2);
  transition: color 0.2s;
}
.news-side-list a:hover {
  color: var(--c-primary);
}

@media (max-width: 980px) {
  .news-layout {
    grid-template-columns: 1fr;
  }
}

/* ============ 书画作品 (Artworks) ============ */
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.artwork-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--c-border);
}
.artwork-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.artwork-card .img-box {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #fdfaf6; /* 仿宣纸温暖底色 */
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.artwork-card .img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}
.artwork-card:hover .img-box img {
  transform: scale(1.05);
}
.artwork-card .body {
  padding: 16px;
}
.artwork-card .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--c-dark);
  margin-bottom: 8px;
  font-family: var(--font-serif);
}
.artwork-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.artwork-card .meta span {
  font-size: 14px;
  color: var(--c-text-2);
}
.artwork-card .size {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}
.artwork-card .intro {
  font-size: 13px;
  color: var(--c-text-3);
  margin-top: 8px;
  line-height: 1.6;
  border-top: 1px dashed var(--c-border);
  padding-top: 8px;
}

@media (max-width: 980px) {
  .artwork-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .artwork-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ 图片放大查看器 (Image Viewer) ============ */
.artwork-card .img-box img,
.cert-card .img img {
  cursor: zoom-in;
}

.image-viewer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.image-viewer-mask.show {
  opacity: 1;
  pointer-events: auto;
}

.image-viewer-box {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-viewer-mask.show .image-viewer-box {
  transform: scale(1);
}

.image-viewer-box img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  border: 4px solid #fff;
  background: #fff;
}

.image-viewer-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
}

.image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .image-viewer-close {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
  }
}