/*  height: 100vh; */
#about{ width: 100%;}
.msg{  width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}

 .msg .items {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

#about  .msg .items .list {
	position: absolute;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat; 
  }
  #about  .msg .items .list .pic {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
  }
  #about  .msg .items .list:nth-of-type(1) {
	width: 400px;
	height: 400px;
	left: 50px;
	top:150px;
  }
  #about  .msg .items .list:nth-of-type(1) .pic {
	animation-name: scrP1;
  }
  #about .msg .items .list:nth-of-type(2) {
	width: 280px;
	height: 280px;
	right: 150px;
	bottom: 80px;
  }
  #about  .msg .items .list:nth-of-type(2) .pic {
	animation-name: scrP2;
  }

.scrFx{
    animation-play-state: paused;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: calc(var(--go) * -1s);
    animation-timing-function: ease-in-out;
}

#about  .msg .txt {
	  position: absolute;
	 width: 100%;
 	height: 50%;
	 display: flex; justify-content: center;
	 top: 0;
	left: 0;
	 
	margin: 0 auto;
	 

	
	pointer-events: none;
	text-align: center;
 
 
	line-height: 2;
	animation-name: scrOut;
  }
  #about .msg .scr {
	position: absolute;
	bottom: 5vh;
	width: 120px;
	left: 0;
	right: 0;
	margin: 0 auto;
  }
  #about .msg .scr > img {
	animation-name: scrImg;
  }
  #about .msg .scr > svg {
	width: 23px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
  }
  #about .msg .scr > svg path {
	fill: #8e9091;
  }

  #about > .pic {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-mask: url(img/bs.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 45.8%;
	-webkit-mask-position: 50% 41%;
	z-index: 10;
	animation-name: aboutFn;
  }
 

.bg-0{ background: url(img/bg-map.png) no-repeat center top ; background-size: 100% auto; }

.about_video_logo{-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;-webkit-mask-position:center center;position:sticky;top:0;width:100%;height:100vh;z-index:10;}
.about_video_ht{width:100%;height:200vh;  }
.videoBg{width:100%;height:100%;object-fit:cover;}
.videoBg::-webkit-media-controls-enclosure{display:none;}

.clause{ margin-top: -100vh; height: 100vh; position: relative; z-index: 10;}
.clause .line{ width: 5%; height: 4px; margin: 0 auto;}
.clause ul{ position: absolute; bottom: 5vh;  width: 100%; left: 0;}
.clause li{ width: 33.3%; text-align: center;}

@media screen and (max-width:1440px) {
     
  #about  .msg .items .list:nth-of-type(1) {
	width: 300px;
	height: 300px;
	left: 50px; 
  }
  
  #about .msg .items .list:nth-of-type(2) {
	width: 200px;
	height: 200px;
	right: 50px; 
  }

}

@media screen and (max-width:1280px) { 
}

@media screen and (max-width:1000px) {
    
}
@media screen and (max-width:750px) {
    
	.about_video_logo{ height: 300px;}

	#about  .msg .items .list:nth-of-type(1) {
		width:80px;
		height: 80px;
		left: 20px;  top: 20px;
	  }
	  
	  #about .msg .items .list .pic{ background-size: cover;}
	  #about .msg .items .list:nth-of-type(2) {
		width: 50px;
		height: 50px; bottom: auto; top: 200px;
		right: 20px; 
	  }
	  .msg,.msg .items{ height: 300px;}
	  .about_video_ht{ height: 300px; display: none;}
	
	  .clause{ height: auto; margin-top: 0;}
	  #about .msg .scr{ display: none;}
	  #about .msg .txt{ top: auto; bottom:0 ; height: 20%;}

	  .clause .f70{ font-size: 22px;}
	  .clause ul{position: relative;
		bottom: auto;
		left: auto; margin-top: 20px;}
		.clause{ color:#333; background: url(img/bg-map.png) no-repeat center center  #f1f1f1; background-size: 100% auto; padding: 15px 0;}
		.clause li{  font-size: 16px;}
		.clause .line{ width: 10%; height: 2px;}
}

@media screen and (max-width:420px) { }