@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Francois+One&family=Noto+Sans+SC:wght@100..900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

body {
   background-color:#EFEFEF;

   h1{
    padding-left: 20px;
    padding-right: 20px;
   
    font-family:"Yantramanav", sans-serif;
    font-weight: 800;
    font-style: normal;
   }
}

.page-layout{
  margin-top: 20px;
  margin-left: 80px;
  margin-right: 80px;
  background-color: #ffffff;
}

.header-design{
 background-color: #ffffff;
 align-items: center;
}

.flex-container{
  display: flex;
  gap: 0px;
}

.img_logo{ 
  padding-top: 20px;
  margin-left: 20px;
  width: 190px;
  height: auto;
}

.container2{
  align-content: center;
  overflow: hidden; /* 控制超出容器的内容不显示 */
}

.carousel-slide{
  padding-left: 20px;
  padding-right: 20px;
}

.banner_video{
  align-items: center;
  width: 1100px;
  height: auto;
}

/*For 5 Main Service Design*/
.service-design{
  display: flex;
  flex-direction: row;
  column-gap: 2em;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  justify-content: space-between;
  background-color: #ffffff;
}

.content-container{
  line-height: 10px;
  height: 210px;
  width: 210px;
  padding-left: 25px;
  padding-top: 30px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 1px 1px 8px 1px #888888;
  transition: transform 0.5s ease;
}

.content-container:hover{
  transform: scale(1.1);
  z-index:2 ;
}

.explore-container{
  display:flex
}

.intro-container{
  margin-top: 10px;
  padding-left: 20px;
 
  video{ 
    width: 1000px;
  }
}

.side-bar{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 30px;
 
  video {
    width: 240px;
  }
}

.menu-bar{
  display: flex;
  flex-direction: column;
  width: 90px;
  background-color: #ffffff;
  
}
.menu-bar #video1,  
.menu-bar #video2 {
    padding-left: 7px;
    width: 80px;
  }
.menu-bar #video3,
.menu-bar #video4  {
    width: 95px;
  }
 
.pdf-container{
  display: flex;
  justify-content: center;
  

}

.side-bar-container{
 
}

.copyright-container{
  
}

/*Old Defination CSS are NEEDED*/
a img{border:none;}
a:link {color:#999999; text-decoration:none}
a:visited {color:#A46F00; text-decoration:none}
a:active {color:#999999; text-decoration:none}
a:hover {color:#A46F00;text-decoration:underline;}
.service{font-family:Arial; color:#CC0066; font-size:12px; font-weight:bold;}
.list{font-family:Arial; font-size:11px; color:#999999; }
.copy{font-family:Arial; font-size:9px; font-style:italic; color:#333333;}
.imc{font-family:Arial; font-size:xx-small; color:#999999; font-style:italic;}
.right{font-family:Arial; font-size:xx-small; color:#333333; font-style:italic;}
.add{font-family:Arial; font-size:8px; color:#333333;}
.line{font-family:Arial; font-size:14px; color:#333333; font-style:italic;}
.bottom{font-family:Arial; font-size:9px; color:#000000;}

.style6 {font-family: Arial; font-size: 15px; font-weight: bold; }
.style14 {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
}
.style18 {font-size: 12px; font-family: "Century Gothic"; font-weight: bold; color: #000000; }