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



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

#media_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/mediaArt/MediaArt_text_01_re.png') no-repeat;width: 140px;height: 78px;background-size: contain;margin: 64px auto;transition-property: opacity;    transition-duration: 1.5s;}
.line{     width: 0;height: 5px;background: #000;    margin: 0 auto;opacity:0;  transition-property: width; transition-duration:0.5s; }
.meadia_text2{ background: url('/resources/image/project/mediaArt/MediaArt_text_05_re.png') no-repeat;width: 312px;height:55px;background-size: contain;margin: auto; margin-top: 90px;opacity:0;transition-property: opacity, margin-top; transition-duration: 0.8s, 0.8s;}
.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:1.5s,1.5s; transition-timing-function: ease;}
.text_area > div{ position: absolute;width: 100%;top: 50%;    height: 0;transform: translateY(-50%);  transition-property: height;    transition-duration: 1.5s;}

#video1 {display:block;    width: 100%;margin-top: 50px;z-index: 4;position: absolute;opacity:0;transition-property: opacity;    transition-duration:0.3s;}
.video_text{display:block;    width: 100%;z-index: 4;position: absolute;opacity:0;transition-property: opacity;    transition-duration:0.3s;}



.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:2s; opacity:1;width:90px;}
.text_bottom_show{transition-delay:2s;margin-top:64px; opacity:1;}




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