html{ scroll-behavior:smooth;}
body{ margin: 0; padding: 0;}
ul{ margin: 0; padding: 0;}
li{ list-style: none;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}
.cl:after{ content: ''; clear: both; display: table;}
a{ text-decoration: none !important;}

h1{ font-size: 2.25rem;}
h2{ font-size: 1.875rem;}
h3{ font-size: 1.5rem;}
h4{ font-size: 1.125rem;}
h5{ font-size: 1rem;}
h6{ font-size: 1rem;}

.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.absolute_img{
  position: relative;
  overflow: hidden;
}
.absolute_img img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}

/* 关于flex */
.flex{
  display: flex;
  position: relative;
}
.flex-start-center{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.flex-start-end{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.flex-center-start{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-center-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center-end{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-center-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-end-start{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.flex-end-center{
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.flex-end-end{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.flex-stretch-start{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}
.flex-stretch-center{
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.flex-stretch-end{
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.flex-stretch-between{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* 关于翻屏-动画 */
.ani-in{ opacity: 0; pointer-events: none; transition: all 0.5s;}
.ani-in.cur{ opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.ani-down{ transform: translateY(-60px); opacity: 0; pointer-events: none; transition: all 0.5s;}
.ani-down.cur{ transform: translateY(0); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.ani-up{ transform: translateY(60px); opacity: 0; pointer-events: none; transition: all 0.5s;}
.ani-up.cur{ transform: translateY(0); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.ani-left{ transform: translateX(60px); opacity: 0; pointer-events: none; transition: all 0.5s;}
.ani-left.cur{ transform: translateX(0); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.ani-right{ transform: translateX(-60px); opacity: 0; pointer-events: none; transition: all 0.5s;}
.ani-right.cur{ transform: translateX(0); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.ani-zoom{ transform: scale(0.5); opacity: 0; pointer-events: none; transition: all 0.6s;}
.ani-zoom.cur{ transform: scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}

.ani-3d-left{ transform: rotateY(120deg); transform-origin: left center; opacity: 0; pointer-events: none; transition: all 0.6s ease-out;}
.ani-3d-left.cur{ transform: rotateY(0); opacity: 1; pointer-events: auto; transition-delay:  0.6s;}

.ani-3d-down{ transform: rotateX(120deg); transform-origin: center bottom; opacity: 0; pointer-events: none; transition: all 0.6s ease-out;}
.ani-3d-down.cur{ transform: rotateX(0); opacity: 1; pointer-events: auto; transition-delay:  1s;}