/* @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:'TWKLausanne-300'; 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}

#inner .pageContent{width: 100%; height: 100vh; background-color: var(--background-color); height: 100vh; width: 100%; display: flex; align-items: center;  background-image: url( /data/tms/website/html/images/brand/bg_w.jpg);}
#inner  .con{width:8.43rem;padding-left: 1.63rem;}
#inner  .con .title{font-size: 0.4rem;font-weight: 500;color: #3c7dd2;line-height: 0.55rem;}
#inner  .con .text{font-size: 0.18rem;  color: var(--color-gray-54585a); line-height:0.3rem; margin-top: 0.6rem;}
#inner  .page2{background-color:  var(--background-color-back);justify-content: flex-end; background-image: url( /data/tms/website/html/images/brand/bg.jpg);}
#inner  .page2 .text{color: var(--color-gray-dcdcde);}
#inner  .page2 .con{ padding-left: 0;padding-right: 1.63rem; text-align: right;}
#inner  .page2 .title{color: #eb9201;}
#inner  .page3 .title{color: #dd3125;}
#inner  .page4{background-color:  var(--background-color-back);justify-content: flex-end;background-image: url( /data/tms/website/html/images/brand/bg.jpg); }
#inner  .page4 .con{ padding-left: 0;padding-right: 1.63rem; text-align: right;}
#inner  .page4 .title{color: #00a985;}
#inner  .page4 .text{color: var(--color-gray-dcdcde);}
#inner  .page5{ background-size:cover;position: relative;}
#inner  .page5 .title{color: #eb9201;font-size: 0.5rem; line-height: 0.55rem;text-transform:none;}
#inner  .page5 .line{width: 1px;height: .85rem; background-color: #e3e3e3; margin: 0.5rem auto 0.4rem; transform-origin: 50% 50%; transform: scale();}
#inner  .page5 .text{color: #eb9201;font-size: 0.5rem; line-height: 0.55rem; margin-top: 0;}
#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;}
.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(-30vw);
  }

  #inner .page0-text {
    transform: translateX(-30vw);
  }

  #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;}
}