/* @font-face {
  font-family: 'TWKLausanne-250';
  src: url("../font/TWKLausanne-250.ttf") format('truetype'),
       url("../font/TWKLausanne-250.woff") format('woff'),
       url("../font/TWKLausanne-250.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'TWKLausanne-300';
  src: url("../font/TWKLausanne-300.ttf") format('truetype'),
       url("../font/TWKLausanne-300.woff") format('woff'),
       url("../font/TWKLausanne-300.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'TWKLausanne-500';
  src: url("../font/TWKLausanne-500.ttf") format('truetype'),
       url("../font/TWKLausanne-500.woff") format('woff'),
       url("../font/TWKLausanne-500.woff2") format('woff2');
  font-display: swap;
}
 */
:root{
  --background-color: #fff;
  --background-color-back: #000000;
  /* --text-color: #383838; */
}

.index{
  overflow: hidden;
 }
#inner{ font-family:'SOURCEHANSANSCN-REGULAR'; background-color: var(--color-white); height: 100vh; position: relative; z-index: 1;}
#inner .page0{width: 100%;height: 100vh;}
#inner .page0 img{width: 100%;height: 100%; object-fit:cover; }
#inner .page0-text{position: absolute;width: 4.39rem;left: 50%; transform: translateX(3.45rem); top:4.07rem;border-top:1px solid rgba(255, 255, 255, 0.4); padding-top: 0.45rem;}
#inner .page0-text .textbox-title-container{display: flex; justify-content: space-between;color: #eb9201; }
#inner .page0-text .textbox-title{ font-size: 0.36rem;display: flex;
  align-items: center; gap: 0.12rem;}
#inner .page0-text .textbox-title::before{display: inline-block; content: ''; width: 0.1rem; height: 0.1rem; background-color: #eb9201; }
#inner .page0-text .textbox-title span{position: relative;}
#inner .page0-text .textbox-title span::after{display: block; content: ''; background: url(/data/tms/website/html/images/brand/kv_j.png) no-repeat center center; background-size: auto 100%; width: 100%; height: 0.09rem; position: absolute; bottom: 0; left: 0; opacity: 0; transition: all 0.3s ease;}
#inner .page0-text .textbox-title.on span::after{bottom: -0.27rem; opacity: 1; }
#inner .page0-text .textbox-text-container{position: absolute;top:1.35rem;left:0;width: 4.39rem;font-size: 0.17rem; line-height: 0.3rem; display: block; color: #fff;width: 100%;}
#inner .page0-text .text-center{position: absolute;top:0;left:0; width: 100%;}

#inner .pageContent{width: 100%; height: 100vh; background-color: var(--background-color-back); display: flex; align-items: center; background-repeat: no-repeat; background-size: cover; }
#inner  .con{width:8.43rem;padding-left: 1.63rem;}
#inner  .con .title{font-size: 0.4rem;font-weight: 500;color: #eb9201;line-height: 0.55rem;}
#inner  .con .text{font-size: 0.18rem;  color:#fff; line-height:0.3rem; margin-top: 0.6rem;}
#inner  .page1{background-image: url( /data/tms/website/html/images/brand/bg_new_0.jpg) ;}
#inner  .page2{background-image: url( /data/tms/website/html/images/brand/bg_new_1.jpg); }
#inner  .page3{background-image: url( /data/tms/website/html/images/brand/bg_new_2.jpg);}
#inner  .page4{background-image: url( /data/tms/website/html/images/brand/bg_new_3.jpg);}
#inner  .page2,#inner  .page4{justify-content: flex-end;}

#inner  .page2 .con{ padding-left: 0;padding-right: 1.63rem; text-align: right;}
#inner  .page4 .con{ padding-left: 0;padding-right: 1.63rem; text-align: right;}
#inner  .page5{ background-size:cover;position: relative;}
#inner  .page5 .title{font-size: 0.5rem; line-height: 0.55rem;text-transform:none;    margin-top: 0.6rem;}
#inner  .page5 .text{    margin-top: 0.3rem;}
#inner  .page5 .line{width: 1px;height: .85rem; background-color: #e3e3e3; margin: 0.5rem auto 0.4rem; transform-origin: 50% 50%; transform: scale();}
#inner  .page5 .con{width: 100%;padding: 0; text-align: center; font-size: 0.5rem;position: relative;}
#inner  .page5 video{width: 100%;height: 100%; position: absolute; top: 0;left: 0; height: 100vh; width: 100%; object-fit: cover;}

.brand_introduction  .logo-fill{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
.brand_introduction   .video-mask{
  position: absolute; top:0;left:0;  
  width: 4.58rem;
  height: 0.81rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
  background-color: #000;
}
.brand_introduction .logo-page1   .video-mask{
-webkit-mask-image: url( /data/tms/website/html/images/brand/logo.svg);
  mask-image: url( /data/tms/website/html/images/brand/logo.svg);
  /* background: url( /data/tms/website/html/images/brand/logo.svg) no-repeat; */
  /* background-size:100% 100%; */
}
.brand_introduction   .logo-page{width: 100vw;height: 100%; position: absolute; top: 0;left: 0;}
.brand_introduction  .logo-page1 .video-mask{top: 3.02rem; left: 50%; transform: translateX(3.30rem);}

.brand_introduction .video-mask .videoItem1{width: 100%; height: 100%; object-fit: cover; position: relative;}
.brand_introduction .video-mask .videoItem2{width:18.08rem; height: 9.74rem; object-fit: cover; position: absolute;    top: 6rem; left: -3.84rem;}
.brand_introduction .video-mask .videoItem3{    width: 14.26rem; height: 12.19rem; object-fit: cover; position: relative; top: 2rem;}
.brand_introduction .video-mask .videoItem4{   width: 10.54rem; height: 9.57rem; object-fit: cover; position: relative;}
.brand_introduction .video-mask .videoItem5{   width: 15.22rem; height: 7.86rem; object-fit: cover; position: absolute;right: 0; top: 50%;}
.logo-page2 .video-mask{-webkit-mask-image: url( /data/tms/website/html/images/brand/logo2.png); mask-image: url( /data/tms/website/html/images/brand/logo2.png); width: 14.26rem; height: 13.19rem; top: 54.96rem; left: -59.42rem;}
.logo-page3 .video-mask{-webkit-mask-image: url( /data/tms/website/html/images/brand/logo3.png);mask-image: url( /data/tms/website/html/images/brand/logo3.png); width: 10.54rem; height: 9.57rem; right: -10.54rem; left: auto; top: -9.57rem;}
.logo-page4 .video-mask{-webkit-mask-image: url( /data/tms/website/html/images/brand/logo.svg);mask-image: url( /data/tms/website/html/images/brand/logo.svg); width: 193.69rem; height: 33.94rem;left: -193.69rem; top: -14.3rem; background-color: var(--color-white); position: relative;}

/* Hide window scrollbars but keep scrolling */
html, body{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0; /* Safari/Chrome */
  height: 0;
}
@media (max-width: 900px) {
  .brand_introduction .logo-page1 .video-mask {
    transform: translateX(-40vw);
    top: 7.56rem;
    width: 80%;
  }

  #inner .page0-text {
    transform: translateX(-40vw);
    top: 8.93rem;
    width: 80%;
  }
  #inner .page0-text .textbox-title {
    font-size: 0.41rem;
  }
  #inner .page0-text .textbox-text-container {
    font-size: 0.26rem;
    line-height: 0.48rem;
  }

  #inner .con {
    width: calc(100vw - 1.46rem);
    padding-left: 0.33rem;
  }
  #inner .con .title{font-size: 0.28rem;line-height: 0.38rem;}
  #inner .con .text{
     font-size: 0.22rem;line-height: 0.28rem; margin-top:0.3rem;}
  #inner .pageContent{width: 100vw; }
  #inner .page1  .con {
    width: 4rem;
    padding-left: 0.33rem;
  }

  .logo-page2 .video-mask {
    transform: scale(0.59);
    transform-origin: top left;
  }


  #inner .page2 .con ,#inner .page4 .con{
    padding-right: 0.83rem;
    padding-top: 3rem;
  }

  .logo-page3 .video-mask {
    transform: scale(0.75);
    transform-origin: right top;
  }
  .page3 .con{padding-top: 4rem;}


  .logo-page4 .video-mask{transform-origin: right center;  background:var(--color-white) ;}
  #inner .page4 .con{padding-top: 4.5rem;}
}