@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");

.cofo-raffine-regular{
font-family: "cofo-raffine", sans-serif;
font-weight: 400;
font-style: normal;
}
.cofo-raffine-bold{
font-family: "cofo-raffine", sans-serif;
font-weight: 900;
font-style: normal;
}

body{
    overflow-x: hidden;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
/*LOAD*/
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
}


/* Loading Screen */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: transparent;
}

/* 上下遮罩 */
.loading-top,
.loading-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  background: #897e79; /* 深色遮罩 */
  z-index: 2;
}

.loading-top {
  top: 0;
  height: 50%;
}
.loading-bottom {
  bottom: 0;
  height: 50%;
}

/* 跑條 */
.loading-bar-container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 3;
}

.loading-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #fff, #fff); /* 淡色系漸層 */
  /*transition: width 0.5s linear;*/
}

.loading-title {
  position: absolute;
  top: calc(50% - 30px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff; /* loading文字改白色 */
  font-family: "cofo-raffine", serif;
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  z-index: 3;
}

.loading-percentage {
  position: absolute;
  bottom: 2%;
  left: 5%;
  font-family: "cofo-raffine";
  font-weight: 400;
  color: #fff; /* loading文字改白色 */
  font-size: 10vw;
  line-height: 12vw;
  letter-spacing: 0.5rem;
  z-index: 3;
}