/* ======== css for web main page ======== */

/* SPACE SIZE (px)
8px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px */

/* FONT SIZE (px)
 12px 14px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px  */

/* FONT WEIGHT 
400 500 600 700 */

/* LINE HEIGHT 
1 1.2 1.5 2   */

/* COLORS 
main color   #6461f6
shade main color  #504ec5
second color #fcf800
Gary color: #141331  #5c5c5c #f3f3f3 #cecece
*/
.article-section {
  color: #333;
  line-height: 1.6;

  padding: 6.4rem 0;
}

.article-container {
  max-width: 74rem;
  margin: 0 auto;

  padding: 0 3.2rem;
}

.article-header {
  margin-bottom: 6.4rem;

  position: relative;
}

.article-header::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;

  display: block;

  position: absolute;
  left: 0;
  bottom: -3.2rem;
}

.article-title {
  font-size: 4.8rem;
  color: #6461f6;
  font-weight: 300;

  margin-bottom: 2.4rem;
}

.article-auther-date {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.article-author:link,
.article-author:visited {
  font-style: italic;

  display: flex;

  gap: 1.2rem;
}

.article-author:link::before,
.article-author:visited::before {
  content: "作者：";
  font-style: normal;
  color: #5c5c5c;
}

.article-time {
  font-style: italic;
  color: #5c5c5c;

  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.article-time::before {
  content: "日期：";
  font-style: normal;
}

.article-h2 {
  font-size: 3.2rem;
  font-weight: 300;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

.article-paragraphy {
  font-size: 1.6rem;

  margin-bottom: 1.6rem;

  text-indent: 3.2rem;
}

.article-imgs {
  margin: 1.6rem 0;
}

.article-img {
  width: 100%;
}

.article-img-text {
  font-size: 1.4rem;
  font-style: italic;

  display: flex;
  gap: 1.2rem;
}

.article-img-text::before {
  content: "▲";
}

.article-ul {
  margin-left: 2.4rem;

  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.article-ul-list {
  line-height: 1.2;
}