* {
  box-sizing: border-box;
  scrollbar-width: thin;
}

html {
  height: 100%;
  font-size: 100px;
}

body {
  height: 100%;
  margin: 0;
  font-size: 14px;
}

ul.raw-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a.link-btn {
  color: #fff;
  background-color: #444;
  padding: 0.3em 2em;
  border-radius: 0.1rem;
  text-decoration: none;
  font-size: 10px;
  line-height: 2em;
}

/*----------------------------------------------------------------
  页眉
----------------------------------------------------------------*/
header {
  max-width: 15rem;
  margin: 0 auto;
  padding: 0 0.3rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
header ul {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
}

header ul > li {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
}

header ul > li a {
  display: block;
  color: #444;
  text-decoration: none;
  padding: 0.2rem;
  margin: 0;
  font-size: 0.18rem;
  border-bottom: 5px solid transparent;
}

header ul > li a:hover {
  color: #87ca2d;
  border-bottom-color: #87ca2d;
}
/*----------------------------------------------------------------
  广告图
----------------------------------------------------------------*/
section.page-slider {
  width: 100%;
  height: 6rem;
  overflow: hidden;
  background: url(img/head-00.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  color: #fff;
}
section.page-slider blockquote {
  max-width: 12rem;
  margin: .6rem auto;
  padding: 0 0.8rem;
  font-size: 0.16rem;
}
section.page-slider h2 {
  font-size: 2em;
  font-weight: normal;
}
section.page-slider p {
  font-size: 1.2em;
  line-height: 2em;
  margin: 0;
  padding: 0;
}
/*----------------------------------------------------------------
  大使列表
----------------------------------------------------------------*/
section.amb-list {
  max-width: 10rem;
  margin: 0 auto;
  padding: 0.8rem 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
section.amb-list > div.amb-head {
  font-size: 1.5em;
  font-weight: bolder;
  white-space: nowrap;
  margin-right: 0.4rem;
}

section.amb-list > ul {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
}

section.amb-list > ul > li {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.1rem;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 0.06rem;
}

section.amb-list > ul > li[name="marco"] {
  background-image: url("img/marco-avatar.jpg");
}
section.amb-list > ul > li[name="kris"] {
  background-image: url("img/kris-avatar.jpg");
}
section.amb-list > ul > li[name="nick"] {
  background-image: url("img/nick-avatar.jpg");
}
section.amb-list > ul > li[name="shiho"] {
  background-image: url("img/shiho-avatar.jpg");
}
section.amb-list > ul > li[name="ccy"] {
  background-image: url("img/ccy-avatar.jpg");
}
section.amb-list > ul > li[name="valerie"] {
  background-image: url("img/valerie-avatar.jpg");
}
section.amb-list > ul > li[name="lulu"] {
  background-image: url("img/lulu-avatar.jpg");
}


section.amb-list > ul > li a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 500ms;
  opacity: 0;
}
section.amb-list > ul > li a:hover {
  opacity: 1;
}
/*----------------------------------------------------------------
  详细介绍
----------------------------------------------------------------*/
main.amb-detail {
  letter-spacing: 1px;
}

article {
  font-size: 16px;
  display: none;
}

article.is-current {
  display: block;
}

article h1 {
  text-align: center;
  line-height: 1.6em;
  margin: 0.4rem 0;
}
article h1 img {
  width: 0.4rem;
}

article blockquote {
  padding: 0.2rem;
  max-width: 10rem;
  margin: 0.2rem auto;
  text-align: center;
  line-height: 2em;
}

article > img {
  width: 100%;
  display: block;
  max-width: 10rem;
  margin: 0.2rem auto;
}

article div.p-col-2 {
  max-width: 9rem;
  margin: 0.5rem auto;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

article div.p-col-2 > div.col-right {
  background-color: #f9f9f9;
  color: #aaa;
  padding: 1em;
  border-radius: 1em;
}

article div.p-col-2 > div.col-right img {
  display: block;
  margin: 0 auto;
}

article div.part-says {
  letter-spacing: 1px;
  line-height: 1.8em;
}

article div.part-says h2 {
  margin-top: 0;
}

article div.part-says p {
  margin: 2em 0;
}

article div.ins-view-more {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
}

article div.ins-view-more span {
  margin: 0 0.1rem;
}

article div.view-more-story {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  background-color: #f9f9f9;
}

article div.view-more-story > .story-grid-con {
  max-width: 9rem;
  display: grid;
  gap: 0.2rem;
  grid-template-columns: 38% 1fr 1fr;
  grid-template-rows: 62% 1fr;
}

article div.view-more-story > .story-grid-con > .grid-cell.for-video {
  background-color: #aaa;
  border: 3px solid #aaa;
}

article div.view-more-story > .story-grid-con > .grid-cell.row-span-2 {
  grid-row: 1 / span 2;
}

article div.view-more-story > .story-grid-con > .grid-cell.col-span-2 {
  grid-column: 2 / span 2;
}

article div.view-more-story > .story-grid-con > .grid-cell video,
article div.view-more-story > .story-grid-con > .grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
article div.view-more-story > .story-grid-con > .grid-cell img {
  object-fit: cover;
}

article div.view-more-story > .story-grid-con > .grid-cell.story-brief {
  padding: 1em 2em 1em 3.6em;
  line-height: 2em;
}

article div.view-more-story > .story-grid-con > .grid-cell.story-brief h3 {
  font-size: 1.6em;
}

/*----------------------------------------------------------------
  页脚
----------------------------------------------------------------*/
footer {
  padding: 0.2rem 0.2rem 1rem 0.2rem;
  background-color: #e0e0e0;
  color: #aaa;
}
footer > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  max-width: 12rem;
  margin: 0 auto;
}
footer img.footer-logo {
  margin: 0.3rem 1rem 0 0;
}
footer p {
  flex: 1 1 auto;
  letter-spacing: 1px;
  line-height: 1.8em;
}
footer a {
  color: #9eca28;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}