/* 全局配置 */
body{
    background-color: #FFC857;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
*{
    margin: 0;
    padding: 0;
}
/* 动画效果 */
.animation{
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #fff;
}
.loader-left {
    width: 80px;
    height: 40px;
    border-radius: 100px 100px 0 0;
    position: relative;
    overflow: hidden;
  }
  .loader-left:before {
    content: "";
    position: absolute;
    inset: 0 0 -100%;
    background: 
      radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top    20%/15px 15px,
      radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,
      radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,
      linear-gradient(#9eddfe 50%,#020308 0);
    background-repeat: no-repeat;
    animation: l5 2s infinite;
  }
  @keyframes l5 {
    0%,20%   {transform: rotate(0)}
    40%,60%  {transform: rotate(.5turn)}
    80%,100% {transform: rotate(1turn)}
  }

.loader-right {
    width: 40px;
    aspect-ratio: 1;
    border:2px solid;
    box-sizing: border-box;
    color: #000;
    background: 
      radial-gradient(circle 3px, currentColor 95%,#0000),
      linear-gradient(      currentColor 50%,#0000 0) 50%/3px 80% no-repeat,
      linear-gradient(90deg,currentColor 50%,#0000 0) 50%/60% 3px no-repeat;
    position: relative;
  }
  .loader-right:before {
    content: "";
    position: absolute;
    height: 50px;
    inset: 100% 10% auto;
    background:
      radial-gradient(circle closest-side at 50% calc(100% - 10px), currentColor 94%,#0000),
      linear-gradient(currentColor 0 0) top/3px 80% no-repeat;
    transform-origin: top;
    animation: l2 2s infinite cubic-bezier(0.5,200,0.5,-200);
  }
  @keyframes l2 {
    100% {transform: rotate(0.4deg)}
  }

.loader-top {
    display: inline-grid;
    width: 80px;
    aspect-ratio: 1;
    background: 
     conic-gradient(from 146deg at 50% 1%,#0000, #91492A 2deg 65deg,#0000 68deg)
     -5% 100%/20% 27% repeat-x;
    animation: l5-0 .5s linear infinite;
  }
  .loader-top:before {
    content:"";
    grid-area: 1/1;
    margin: 12.5%;
    animation: inherit;
    animation-name: l5-1;
    clip-path: polygon(100% 50%,78.19% 60.26%,88.3% 82.14%,65% 75.98%,58.68% 99.24%,44.79% 79.54%,25% 93.3%,27.02% 69.28%,3.02% 67.1%,20% 50%,3.02% 32.9%,27.02% 30.72%,25% 6.7%,44.79% 20.46%,58.68% 0.76%,65% 24.02%,88.3% 17.86%,78.19% 39.74%);
    background: #CF6F46;
  }
  @keyframes l5-0 {to{background-position: 20% 100%}}
  @keyframes l5-1 {to{rotate: -40deg}}
/* 内容部分 */
.wrap{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 950px;
    height: 100vh;
    background-color: #fff;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.bg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 150px;
}
.nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 50px;
    background-color: #F78F1E;
}
.nav>li{
    font-weight: bold;
    width: 16.5%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav>li:hover{
    background-color: #2A9D8F;
    font-weight: bolder;
    font-size: x-large;
    transition: all 1;
}
.nav>li:hover a{
    color: white;
}