@charset "utf-8";

#top{
	background-color:#FFF;	
}

#about_main_ad {
  /*background: white;
  overflow:hidden;
  height: calc(100vh - 190px);*/
  width:100%;
  max-width: 1280px;
  height:300px;
  padding:20px;
  position:absolute;
  top:150px;
  z-index:1;
  /*color:#add1e4;*/
  /*color:#f0ffff;*/
  color:#fff;
}

#about_main_ad_content {
  text-align:left;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:20px;
}

#about_main_ad_video {
	box-shadow: rgba(0, 0, 0, 0.70) 0px 0px 20px;
	width: 70%;
	border-radius: 15px;
	cursor:pointer;
}

#about_main_menu {
  position: sticky;
  top: 0; /* Stick to the top of the container */
  padding: 10px;
  z-index: 1; /* Ensure it stays above other content */
  color:#ebebf5;
  background: rgba(44, 25, 25, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-shadow: 0px 4px 4px #000;
}

#about_main_menu a {
	color: #ebebf5;
	font-weight:600;
}
#about_main_menu a:link {
	color: #ebebf5;
	text-decoration: none;
}
#about_main_menu a:visited {
	color: #ebebf5;
	text-decoration: none;
}
#about_main_menu a:hover {
    color:#FC0;
	text-decoration:none;
}
#about_main_menu a:active {
	text-decoration: none;
}

#about_main_content{
	width:100%;
	height:750px;
	overflow-y: auto;
	overflow-x: hidden;
}

.main_content_section{
	background-color:#fff;
	padding:24px;
	margin-bottom:22px;
	background: rgba(255, 255, 255, 0.99);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 1);
}

.content {
	padding:80px;
}

.content a {
	color: #000;
	font-size: 16px;
}
.content a:link {
	color: #000;
	text-decoration: none;
	font-weight:400;
}
.content a:visited {
	color: #000;
	text-decoration: none;
	font-weight:400;
}
.content a:hover {
    color: #000;
	text-decoration:none;
	font-weight:400;
}
.content a:active {
	text-decoration: none;
}

.content_float {
	width:100%;
	background: rgba(255, 255, 255, 0.99);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 1);
}
.content_to_right{
	display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 0px;
	width:100%;
	max-width:1280px;
	text-align:left;
	min-height:300px;
	position:relative;
}

.content_to_left{
	display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: 0px;
	vertical-align:central;
	width:100%;
	max-width:1280px;
	text-align:left;
	min-height:300px;
	position:relative;
}

.main_content_ad {
	color:#FFF;
	width:100%;
	padding-bottom:20px;
	min-height:160px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	cursor:pointer;
	z-index:1;
}

.main_content_ad_more{
	border-radius:30px;
	border:2px #fff solid;
	display:inline;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	font-size: -5px;
	margin-left: 20px;
}

.content_img{
	width:60%;
	aspect-ratio:1/1 !important;
	@media: (aspect-ratio: 1/1);
	margin-top:100px;
	height:auto;
	max-height:100%;
	height:300px;
	object-fit: contain !important;
	transform:translateX(-50%) translateY(-20%);
	left:50%;
	position:relative;
	margin-bottom: 20px;
}

#send a:link, #send a:visited {
  background-color: #0066ff;
  color: white;
  border: 2px solid #0066ff;
  border-radius: 30px;
  padding: 1px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

#send a:hover, #send a:active {
  background-color: white;
  color: #0066ff;
  font-size: 15px;
}


#recent_updates{
	height: 230px;
	width:100%;
	max-width: 640px;
	overflow:scroll;
	cursor:pointer;
}

.company_member_list{
	display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 10px;
	width:100%;
	max-width:1280px;
	text-align:left;
	min-height:300px;
	cursor:pointer;
	position:relative;
	padding:0px;
}

.member_avatar{
	width:140px;
	border-radius:50%;
	border-width:10px;
	border-color:#f5f5f5;
	border-style:solid;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;	
}

#content h3 {
font-size:19px;
font-weight:bold;
color:#000000;
line-height:22px;
}

#content h4 {
font-size:16px;
font-weight:500;
color:#000000;
line-height:22px;
}

#content a {
	color: #0066ff;
	font-size: 16px;
}
#content a:link {
	color: #0066ff;
	text-decoration: none;
	font-weight:400;
}
#content a:visited {
	color: #0066ff;
	text-decoration: none;
	font-weight:400;
}
#content a:hover {
    color: #0066ff;
	text-decoration:none;
	font-weight:400;
}
#content a:active {
	text-decoration: none;
}

.ad h2{
   font-size:23px;
   font-weight:600;
   letter-spacing: 0px;
   line-height:20px;
}
.ad h1{
   font-size:36px;
   font-weight:600;
   line-height:20px;
   letter-spacing: 0px;
   background-repeat:no-repeat;
   background-position: left bottom;
}

.ad h3{
   font-size:23px;
   font-weight:200;
   letter-spacing: 0px;
   line-height:30px;
}

.content_1{
max-width: 1280px;
}

.content_2{
background-image:url(img/background/2.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size: 60% auto;
max-width: 1280px;
height: 675px;
}
.content_3{
background-image:url(img/background/1.png);
background-repeat:no-repeat;
background-position:center left;
background-size: 53% auto;
max-width: 1280px;
height: 630px;
}
.content_4{
background-image:url(img/background/3.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size: 80% auto;
max-width: 1280px;
height: 555px;
}

.cs_1{
 float: left;
 width:19%;
 border: 1px solid #000;
 border-right-style:none;
 cursor: pointer;
}
.cs_1 td:hover { 
   background-color: #0066ff;
}
.cs_2{
 float: left;
 width:19%;
 border: 1px solid #000;
 cursor: pointer;
}
.cs_2 td:hover { 
   background-color: #0066ff;
}
.cs{
 float: left;
 width:19%;
 border: 1px solid #000;
 border-right-style:none;
 cursor: pointer;
}
.cs td:hover { 
   background-color: #0066ff;
}

@media screen and (max-width: 1000px) {
.ad h2{
   line-height:20px;
}
.ad h1{
   line-height:45px;
}

.ad h3{
   line-height:30px;
}

#content h3 {
font-size:15px;
font-weight:bold;
color:#000000;
line-height:22px;
}
#content h4 {
font-size:13px;
font-weight:500;
color:#000000;
line-height:22px;
}

.content_1{

}
.content_2{
background-image:url(img/background/2.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size: 60% auto;
height: 480px;
}
.content_3{
background-image:url(img/background/1.png);
background-repeat:no-repeat;
background-position:center left;
background-size: 53% auto;
height: 420px;
}
.content_4{
background-image:url(img/background/3.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size: 80% auto;
height: 410px;
}

.cs_1{
 float: left;
 width:100%;
 border: 1px solid #000;
 border-bottom-style:none;
}
.cs_1 td:hover { 
   background-color: #0066ff;
}
.cs_2{
 float: left;
 width:100%;
 border: 1px solid #000;
}
.cs_2 td:hover { 
   background-color: #0066ff;
}
.cs{
 float: left;
 width:100%;
 border: 1px solid #000;
 border-bottom-style:none;
}
.cs td:hover { 
   background-color: #0066ff;
}
}

@media screen and (min-width: 1331px) {
#about_main_ad {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 20px;
  /*margin-left:calc(50vw - (50vw/1.5));*/
    left: 0;
    right: 0;
    
    margin: auto;
}
#about_main_ad_content {
  /*width: 100%;
  padding-bottom: 56.25%;
  background: gold; /** <-- For the demo **/
}
#about_main_ad_video{
	border-radius: 15px;
	width: 100%;
}
}