:root {
  --page-width: 168rem;
  --main-blue: #0065ff;
  --hover-main-blue: #0458d6;
  --border-col: #00000010;
  --menu-grey: rgba(0, 0, 0, 0.4);
  --main-grey: rgba(0, 0, 0, 0.4);
  --gutter-value: 4rem;
}
html {
  font-size: 10px;
}

html.lenis, html.lenis body {
  height: auto;
}
 
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.container {
  max-width: var(--page-width) !important;
  margin: 0 auto;
  padding: 0 4rem;
}
.gutter {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  html {
    font-size: 5px;
  }
}

.abs-full-link{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.absolute-x-center {
  right: unset;
  left: 50%;
  transform: translateX(-50%);
}
.absolute-y-center {
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
}
.absolute-center {
  right: unset;
  left: 50%;
  bottom: unset;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hw-border-b {
  border-bottom: 1px solid var(--border-col);
}
.hw-border-t {
  border-top: 1px solid var(--border-col);
}
.hw-border-l {
  border-left: 1px solid var(--border-col);
}
.hw-border-r {
  border-right: 1px solid var(--border-col);
}
.no-scroll{
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* hide scroll bar */
.no-scroll-bar::-webkit-scrollbar {
  display: none; /* Chrome、Safari&later */
}
.no-scroll-bar{
  /* IE&Edge */
  -ms-overflow-style: none;

  /* Firefox */
  scrollbar-width: none;
}

.icon {
  width: 2.4rem;
  height: 2.4rem;
}
.oicon {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.arrow-right-wrapper {
  width: 1.5rem;
}
@media screen and (max-width: 767px) {
  .arrow-right-wrapper {
    width: 2.289rem;
  }
}

/* swiper */
.nav-btn{
  transition: opacity 0.3s ease;
}
.swiper-button-disabled{
  opacity: .3;
  pointer-events: none;
}

/* effect */

/* .link-btn .arrow-right-wrapper {
  transition: all 0.3s ease;
}
.link-btn:hover .arrow-right-wrapper {
  transform: translateX(0.5rem);
} */

.link-btn:hover .arrow-right-wrapper {
  animation: iconShuttleHover .6s ease;
}
.arrow-right-wrapper{
  transition: background-color .3s ease;
}

.hover-move-right:hover {
  transition: all 0.3s ease;
  transform: translateX(0.5rem);
}

.hover-text-underline {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: transparent;
  text-align: left;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5em;
  letter-spacing: 0.02em;

  width: fit-content;

  color: var(--t-col);
  --t-col: black;
  --tw-content: "";
}

.hover-text-underline:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  content: var(--tw-content);
  width: 100%;
}

@keyframes out {
  0% {
    content: var(--tw-content);
    transform: translate(0);
  }

  to {
    content: var(--tw-content);
    transform: translate(101%);
  }
}
@keyframes in {
  0% {
    content: var(--tw-content);
    transform: translate(-101%);
  }

  to {
    content: var(--tw-content);
    transform: translate(0);
  }
}

.hover-text-underline:before {
  animation: out 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) both;
  background-color: var(--t-col);
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 1.2s;
  --tw-content: "";
  content: var(--tw-content);
}

.hover-text-underline:hover:before {
  animation: in 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) normal;
  opacity: 1;
  content: var(--tw-content);
  transition-duration: 0.33s;
}


/* 默认已经有下划线的文字 */
.hover-text-underline-already {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: transparent;
  text-align: left;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  width: fit-content;
  color: var(--t-col);
  --t-col: black;
}

/* 下划线动画（覆盖默认下划线） */
.hover-text-underline-already:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: var(--t-col);
  content: "";
  opacity: 1; /* 初始可见（模拟默认下划线） */
  transform: translateX(0);
}

/* 鼠标悬停时，播放动画 */
.hover-text-underline-already:hover:before {
  animation: 
    out 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99),
    in 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) 0.33s; /* 先消失，再出现 */
}

/* 下划线消失动画 */
@keyframes out {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(101%); opacity: 0; }
}

/* 下划线出现动画 */
@keyframes in {
  0% { transform: translateX(-101%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* btn effect like arrow shuttle in btn */
/* layout -->  .shuttle-effect > .shuttle-wrapper > .shuttle-icon */
.shuttle-effect:hover .shuttle-wrapper {
  animation: iconShuttleHover .6s ease;
}
.shuttle-wrapper{
  transition: background-color .3s ease;
}
.shuttle-icon{
  transition: fill .3s ease;
}
@keyframes iconShuttleHover {
  49% {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.shuttle-effect-neg:hover .shuttle-wrapper {
  animation: iconShuttleHoverNegative .6s ease;
}
.shuttle-wrapper{
  transition: background-color .3s ease;
}
.shuttle-icon{
  transition: fill .3s ease;
}
@keyframes iconShuttleHoverNegative {
  49% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(50%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .md-hide {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .sm-hide {
    display: none;
  }
}

.shuttle-effect-up:hover .shuttle-wrapper {
  animation: iconShuttleHoverUp .6s ease;
}
.shuttle-wrapper{
  transition: background-color .3s ease;
}
.shuttle-icon{
  transition: fill .3s ease;
}
@keyframes iconShuttleHoverUp {
  49% {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.shuttle-effect-down:hover .shuttle-wrapper {
  animation: iconShuttleHoverDown .6s ease;
}
@keyframes iconShuttleHoverDown {
  49% {
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
  
}

@media screen and (min-width: 768px) {
  .md-hide {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .sm-hide {
    display: none !important;
  }
}