body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: #666666;
}
p{
        text-align:justify;
}
a {
	font-weight: bold;
	color: #666666;
        text-decoration: none;
}
a:hover {
        color: #0041cc;
}
img {
        border-top-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-right-style: none;
}
.err {
	color: #cc0000;
	font-weight:bold;
        background: url(images/error.png) no-repeat;
        padding-left: 20px;
}
.error {
	color: #cc0000;
	font-weight: bold;
}
.ok {
	color: #009966;
	font-weight: bold;
        background: url(images/ok.png) no-repeat;
        padding-left: 20px;
    }

.center {
        margin-top: 20px;
        margin-left: 10%;
        margin-right: 10%;
}

@media (max-width: 700px) {
    .center { width: 100% !important; float: none !important; margin: 0 auto !important; }

}

  .container {
    max-width: 1100px;

    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
  }

  .banner1 {
    background: #f7f7f7;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 300px;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .banner1:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .banner img {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }

  .banner-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .banner-desc {
    font-size: 1em;
    color: #555;
  }

  .archive-banner {
    background: #f7f7f7;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px 28px;
    margin: 30px auto;
    max-width: 900px;
  }

  .archive-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
  }

  .archive-banner-img {
    width: 96px;
    min-width: 64px;
    max-width: 120px;
    height: auto;
    display: block;
    margin-bottom: 0;
  }

  .archive-banner-text {
    flex: 1 1 0;
    min-width: 220px;
  }

  @media (max-width: 700px) {
    .archive-banner-content {
      flex-direction: column !important;
      align-items: center;
      text-align: center;
      gap: 16px;
    }

    .archive-banner-img {
      margin-bottom: 0;
    }

    .archive-banner-text {
      min-width: 0;
    }
  }


.btn {
            background-color: #0073e6;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 12px 32px;
            font-size: 1.1em;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            transition: background 0.2s;
       
}

    .terms { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height: 1.6; color:#222; padding:24px; max-width:900px; margin:0 auto; background:#f9f9fb; }
    .terms header { margin-bottom:18px; }
    .terms h1 { margin:0 0 6px 0; font-size:28px; }
    .terms h2 { margin-top:22px; font-size:18px; }
    .terms p, .terms li { font-size:15px; }
    .terms .muted { color:#555; font-size:13px; }
    .terms .section { background:#fff; padding:18px; border-radius:8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom:14px; }
    .terms footer { margin-top:22px; text-align:center; color:#666; font-size:13px; }
    .terms code { background:#eef; padding:2px 6px; border-radius:4px; font-family:monospace; }
    .terms a { color:#0066cc; }
    .terms ul { margin-left:18px; }