#top_menu {    transition-property: opacity, top,filter;    transition-duration: 3s, 2s,0.3s;}



#metaverse_center{position: fixed;top: 0%;left: 0;width: 100%;height: 100%;transition: all ease 1.5s;}

#metaverse_canvas{width:100%;position: absolute;background-color: #ccc;display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%; opacity:0; transition-property: top,opacity;  transition-duration: 1.5s,1.5s;transition-timing-function: ease;}

.logo_invert{filter:invert(100%);}

#canvas_next_group{position: absolute; top: 100%;left: 0;right: 0;bottom: 0;width: 100%;height: 100%; transition-property: top; transition-duration:1.5s; transition-timing-function: ease;}
#canvas_next{width:100%;position: absolute;background-color: #fff;display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%; opacity:1; transition-delay:1s;  transition-property: opacity;    transition-duration: 0.3s;}


.media_text1{ background: url('/resources/image/project/metaverse/metaverse_text_01.png') no-repeat;width: 170px;height: 26px;background-size: contain; position: absolute;top: -10px;left: 50%;transform: translateX(-50%); transition-property: opacity,left;  transition-duration: 1.5s,1.5s;}
.media_text1-1{ background: url('/resources/image/project/metaverse/metaverse_text_02.png') no-repeat;width: 18px;height: 23px;background-size: contain;position: absolute;top: 28px;left: 50%;transform: translateX(-50%);transition-property: opacity,left;   transition-duration: 1.5s,1.5s;}
.media_text1-2{ background: url('/resources/image/project/metaverse/metaverse_text_03.png') no-repeat;width: 140px;height: 15px;background-size: contain;position: absolute;top: 67px;left: 50%;transform: translateX(-50%);transition-property: opacity,left; transition-duration: 1.5s,1.5s;}


.line{     width: 0;height: 5px;background: #000;   position: absolute;top: 150px;left: 50%;transform: translateX(-50%); opacity:0;  transition-property: width,left; transition-duration:0.5s,1.5s; }
.meadia_text2{ background: url('/resources/image/project/metaverse/metaverse_text_05.png') no-repeat;width: 418px;height:21px;background-size: contain; position: absolute;top: 250px;left: 50%;transform: translateX(-50%); opacity:0;transition-property: opacity, top,left;transition-duration: 0.8s, 0.8s,1.5s;}
.meadia_text3{ background: url('/resources/image/project/metaverse/metaverse_text_06.png') no-repeat;width: 264px;height:21px;background-size: contain; position: absolute;top: 280px;left: 50%;transform: translateX(-50%); opacity:0;transition-property: opacity,top,left; transition-duration: 0.8s, 0.8s,1.5s;}


.media_text_group{position: relative;width: 100%;height: 100%;}
.text_area{ position: absolute;top: 0;left: 0;width: 100%;height: 0; transition-property: height,transform; transition-duration:0.5s,1.5s; transition-timing-function: ease;}
.text_area > div{ position: absolute;width: 100%;top: 50%;    height: 0;transform: translateY(-50%); opacity:0; transition-property: height,opacity;    transition-duration:1.5s,0.5s;}

#video1 {display:block;    width: 100%;height: 100%;z-index: 4;position: absolute;opacity:0;transition-property: opacity,transform;    transition-duration:0.3s,1s;}
.video_text{display:block;    width: 100%;height: 100%;z-index: 4;position: absolute;opacity:0;transition-property: opacity;    transition-duration:0.3s;}




.text_left_1 .media_text1{left: 230px; }
.text_left_1 .media_text1-1{left: 212px;  }
.text_left_1 .media_text1-2{left:242px; }  
.text_left_1 .line{transition-delay:0s !important; left:230px;}
.text_left_1 .meadia_text2{transition-delay:0s !important; left: 320px;}
.text_left_1 .meadia_text3{transition-delay:0s !important; left:290px;}








.text_left .media_text1{left: 0; }
.text_left .media_text1-1{left: -35px;  }
.text_left .media_text1-2{left:27px; }  
.text_left .line{transition-delay:0s !important; left:0;}
.text_left .meadia_text2{transition-delay:0s !important; left: 165px;}
.text_left .meadia_text3{transition-delay:0s !important; left:88px;}
.text_area_move{top: 50% !important;transform: translateY(-50%);}

.next{top:0% !important;}
.canvas_out{top:-50% !important;}
.text_area_in{height:100% !important;}
.line_show{transition-delay:0.5s; opacity:1;width:90px;}
.text_bottom_show{transition-delay:1s;top:235px; opacity:1;}
.text_bottom_show1{transition-delay:1.5s;top:269px; opacity:1;}

.metaverse_video1{top:0; right:0px;transform: translateX(100%);}
.metaverse_video1_move1{transform: translateX(20%); }
.metaverse_video1_move1_1{transform: translateX(30%); }
.metaverse_video1_move2{transform: translateX(0);  transition-duration:0.3s,1.5s !important;}



.video1_top_text1{background: url(/resources/image/project/metaverse/metaverse_text_07.png) no-repeat;width: 480px;height: 140px;position: absolute;top: 0;right: 250px;background-size: contain;opacity: 0;transition-delay:0.5s;transition-property: opacity,top;    transition-duration:0.5s,1s;}
.video1_top_text1_move1{top: -120px;opacity: 1;}
.video1_top_text1_move2{transition-delay:0 !important; top: -45px;opacity: 0;}

.video1_top_text2{background: url(/resources/image/project/metaverse/metaverse_text_08.png) no-repeat;width: 490px;height: 177px;position: absolute;top: -;right: 250px;background-size: contain;opacity: 0;transition-delay:1s;transition-property: opacity,top;    transition-duration:0.5s,1s;}
.video1_top_text2_move1{top: -120px;opacity: 1;}
.video1_top_text2_move2{transition-delay:0 !important; top: 45px;opacity: 0;}


@media screen and (max-width: 1600px) {
	#video1{width: 1600px;}
	#video_text{width: 1600px;}
}