.controls{position: fixed; left:1.5%; top: 50%; transform: translateY(-50%); z-index: 999;}
.controls li{margin: 10px 0; display: flex; align-items: center;}
.controls li:hover span{background-color: #2564F7;}
.controls li a{font-size: 1.2em; color: #28FFAF; text-shadow: 1px 1px 2px black;}
.controls span{width: 10px; height: 10px; background-color: #FFF; border: 1px solid #FFF; left: 0; margin-right: 5px;}
.controls li.control_select span{background-color: #2564F7;}

#topBanner{position: relative; background-color: #000; overflow: hidden;}

#topBanner video{width: 1920px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-48%); }
.play{position: absolute; border: none;background: none; bottom: 30px; left: calc(50% + 20px) ; width:2%;}
.play img{width: 100%;}
.stop{position: absolute; border: none;background: none; bottom: 30px; left: calc(50% - 90px); width:2%; } 
.stop img{width: 100%;}

#midBanner1{position: relative; height: 100vh; background-image: url(../img/company_bg.jpg); background-position: center; background-size: cover; overflow: hidden;}
#midBanner1 .title_wrap1{position: absolute;  height:45%; display: flex; flex-direction: column; justify-content: space-between; left:0; top: 15%; opacity: 0;}
#midBanner1 .mid_logo{position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0;}
#midBanner1 h2{font-size: 4em; text-shadow: 1px 1px 2px black}
#midBanner1 h3{font-size: 2.5em;}
#midBanner1 p{font-size: 1.5em;}

#midBanner2{position: relative; height: 100vh; background-image: url(../img/business_bg.jpg); background-position: center; background-size: cover; overflow: hidden;}
.title_wrap2{position: absolute; top: 15%; right: 5%; height: 40%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
#midBanner2 h2{font-size: 4em; text-shadow: 1px 1px 2px black;  left: 100px; opacity: 0; position: relative;}
#midBanner2 h3{font-size: 2em; left: 100px; opacity: 0; position: relative;}
#midBanner2 p{font-size: 1.5em; left: 100px; opacity: 0; position: relative;}
#midBanner2 button{ left: 100px; opacity: 0; position: relative;}

#midBanner3{position: relative; height: 100vh; background-image: url(../img/esg_bg.jpg); background-position: center; background-size: cover; overflow: hidden;}
#midBanner3 .title_wrap3{position: absolute; left:0; top: 15%; height:40%; display: flex; flex-direction: column; justify-content: space-between;opacity: 0; }
#midBanner3 h2{font-size: 4em; text-shadow: 1px 1px 2px black;}
#midBanner3 h3{font-size: 2.5em;}
#midBanner3 p{font-size: 1.5em;}

.btn_wrap{position: absolute; display: flex; flex-direction: column; bottom: 0; right: -10%;}
#midBanner3 .more_btn{margin-bottom: 10%;}