:root{
  --main-block-padding:min(100px,4vw);
}

html{
  overflow-x: hidden;
}

body{
  display: flex;
  justify-content: center;
  width: 100vw;
  overflow-x: hidden;
}
.container {
  width: 100%;
  /* height: 100px; */
  /* border: 2px solid red; */
  max-width: 1280px;
  /* overflow-x: hidden; */
}
.part{
  width: 100%;
  height: 200px;
  /* border: 2px solid green; */
  padding: 0px var(--main-block-padding);
}
.footer{
  height: 100vh;
  width: 100px;
}

/* .part-title{

} */

.part-title{
  /* height: 100px; */
  width: 100%;
  /* border: 2px solid blue; */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.part-title > span:first-child{
  font-size: 1.1rem;
  text-transform: capitalize;
  color: rgb(96, 96, 96);
}
.part-title > span:last-child{
  font-size: 2.8rem;
  /* text-transform: capitalize; */
  white-space: pre-line;
  font-weight: 500;
  letter-spacing: 1px;
}

@media screen and (min-width: 1280px) {
  :root{
    --main-block-padding:51.2px;
  }
}

@media screen and (max-width: 480px) {
  .part-title > span:last-child{
    font-size: 2.4rem;
  }
}



/* loading部分 */
.loading-box{
  width: 100vw;
  height: 100dvh;
  background-color: white;
  position: fixed;
  /* border: 10px solid red; */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* pointer-events: none; */
  animation: disappear 1s 4s ease-in-out forwards;
}


.loading-box > img{
  animation: logoAni 1s ease-in-out alternate infinite;
}

.loading-bar{
  width: 100%;
  height: 6px;
  background-color: rgb(255, 130, 41);
  position: absolute;
  top: 0;
  transform: translate(-100%);
  animation: barMoving 4s ease-in-out forwards ;
}

@keyframes logoAni {
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

@keyframes barMoving {
  0%{
    transform: translate(-100%);
  }
  20%{
    transform: translate(-50%);
  }
  70%{
    transform: translate(-30%);
  }
  100%{
    transform: translate(0%);
  }
}

@keyframes disappear {
  from{
    opacity: 1;
    display: flex;
  }
  to{
    opacity: 0;
    display: none;
  }
}