#top_menu_group{position: absolute;bottom: 0;font-family: 'Pretendard';left: 50%;transform: translateX(-50%);width: 70%;}
#top_menu_group ul{display: flex;justify-content: center;}
#top_menu_group li{ padding: 24px 5%;}

#top_menu_group li>a{position: relative;color:#000;  transition:color .6s;  }
#top_menu_group li>a .tm-effect{height: 15px;position: absolute;top: 50%;transform: translateY(-50%);}
#top_menu_group li>a .tm-effect div{position: absolute;width: 5px;background: #000;height: 0%;  bottom: 0;left: -13px;transition: height ease 0.4s;}
#top_menu_group li>a,
#top_menu_group li>a:focus,
#top_menu_group li>a:hover .tm-effect  div{
	 top: 0;  
    height:100%;
}
#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-timing-function: ease; transition:opacity 3s,transform 3s;}


#top_menu{  
  width: 100%;
  position: fixed;
  top: -108px;
  height: 102px;
  opacity: 0;     
  transition: opacity 2s, top 2s, background-color .4s ;
  transition-timing-function: ease;
  z-index: 999;
}
.tm-show{top:0 !important;opacity: 1 !important;}
#top_menu #logo{background: url('/resources/image/logo.png');width: 42px;height: 51px;bottom: 0;position: absolute;left: 75px;
  transition: 'background' .6s;
  transition-delay: 1s;
}
#top_menu #static_menu_btn{background: url(/resources/image/menu_icon_new.png) no-repeat;
    width: 24px;
    height: 20px;
    top: 50%;
    position: absolute;
    right: 75px;
    transition: 'background' .6s;
    transition-delay: 1s;
}
#top_menu #static_menu_close{

background: url(/resources/image/menu_icon_close.png) no-repeat;
 width: 24px;
    height: 20px;
    top: 50%;
    position: absolute;
    right: 75px;


}
#top_menu.revert{
  transition: opacity 2s, top 2s, background-color .1s ;
}
#top_menu.revert #logo{
  background: url('/resources/image/logo_w.png');
}
#top_menu.revert #top_menu_group li>a{
  filter: invert(100%);
}

#static_menu{
	position: fixed;width: 100%;height: 100%;background: #fff;top: -200%;left: 0;z-index: 999;transition: opacity linear 0.5s; opacity: 0; 
}
.static_menu_show{
	opacity: 1 !important;
	
}

#static_menu #top_menu{
    width: 100%;
    position: fixed;
    top: -108px;
    height: 102px;
    opacity: 0;
    z-index: 999;
	    transition: none;
}

#static_menu #left_area{
	width: 50%;display: block;height: 100vh;float: left;position: relative;     transform: translateX(-50px); opacity:0; transition: all linear 0.5s;
}
#static_menu #right_area{
	width: 50%;display: block;height: 100vh;float: left;    transform: translateX(50px); opacity:0; transition: all linear 0.5s;
}
 .static_menu_show #right_area,.static_menu_show #left_area{

 
    transition-delay: 0.5s !important; 
	transform: translateX(0) !important;
	opacity:1 !important;
}
#static_menu #left_text{
	background: url('/resources/image/menu_text.png') no-repeat;width: 270px;height: 227px;background-size: contain;position: absolute;right: 120px;top: 50%;transform: translateY(-50%);
}
#static_menu #right_area > ul{
	position: absolute;top: 50%;transform: translateY(-50%);  
}
#static_menu #right_area > ul > li{
	margin-bottom:30px;
}

#static_menu #right_area #submenu  li{

	margin-right:35px;
	margin-bottom:20px;
}

#static_menu #right_area #about_btn {background: url('/resources/image/menus.png');width: 76px;height: 20px;}

#static_menu #right_area #project_btn {background: url('/resources/image/menus.png');width: 98px;height: 20px;background-position: -76px 0;}

#static_menu #right_area #metaverse_btn {background: url('/resources/image/menus.png');width: 160px;height: 20px;background-position: 0px -41px;}

#static_menu #right_area #mediaart_btn {background: url('/resources/image/menus.png');width: 119px;height: 20px;background-position: -267px -22px;}

#static_menu #right_area #webtoon_btn {background: url('/resources/image/menus.png');width: 143px;height: 20px;background-position: 0 -22px;}

#static_menu #right_area #deeptech_btn {background: url(/resources/image/menus.png);width: 244px;height: 20px;background-position: 0 -60px;}


#static_menu #right_area #archvie_btn {font-weight: bold; font-family: Pretendard; font-size: 20px; width: 69px;height: 20px;margin-left: 4px;}


#static_menu #right_area #news_btn {background: url('/resources/image/menus.png');width: 69px;height: 20px;background-position: -173px 0;}

#static_menu #right_area #recrult_btn {background: url('/resources/image/menus.png');width: 93px;height: 20px;background-position: -239px 0;}

#static_menu #right_area #contact_btn {background: url('/resources/image/menus.png');width: 102px;height: 20px;background-position: -330px 0;}

#static_menu #right_area #submenu{width: 530px; display: inline-flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;}





#start {position: relative; overflow: hidden;}
#start div:first-child{ position: absolute;top: 50%;left: 50%;}
#start div:first-child #start_image{z-index: 1;position: absolute;left: -200px;top: -75px;display: block; transition:all ease 1s;}


#step_1{overflow: hidden;}
#step_1 #text-line-area{  position: absolute;top: 50%;width: 100%;height: 25px;}
#step_1 #text-line-area #text-container{   position: relative;width: 100%;height: 100%;    overflow: hidden;} 

#step_1 #center_text_image{ position: absolute;width: 100%;top: 50%;;}
#step_1 .left{left: 50%;}
#step_1 .right{right:50%;}

#step_1 #center_text_image #textlineimg{ background: url('/resources/image/main_center_text_2.png');width: 0; height: 12px;
    position: absolute;;background-size:cover;background-repeat: no-repeat; }
#step_1 #center_text_image .linetext{  background: #fff;width: 100%;height: 17px;position: absolute;top: -12px; transition:all linear 2.5s;}
#step_1 #center_text_image .showin{transition: width linear 2.5s; width:2600px !important;}
#step_1 #center_text_image .showout{background-position: right !important;  transition: width linear 0.5s;}

#step_1 #bottom_icon{position: absolute;bottom: 0;width: 100%;height:100%; overflow:hidden;}
#step_1 #bottom_icon .mbottom{position: absolute;left: 50%;    top: 50%; transform: translateY(620px);}
.ms-trans{transform: translateY(-160px);}
.et-trans{transform: translateY(-100px); opacity:1 !important;}
.ms-trans .ms-icon{opacity:1 !important;}

#step_1 #bottom_icon .mbottom .ms-icon-set {width: 70px;height: 70px;background-size: contain;position: absolute;left: -35px;top: -150px;transition: all ease 1.5s;}
#step_1 #bottom_icon .mbottom .ms-icon{background: url('/resources/image/scroll_icon_line.png') no-repeat;width: 70px;height: 70px;background-size: contain;position: absolute;transition:all ease 1.5s;animation-name: rotate;
        animation-duration: 5s;animation-iteration-count:infinite;animation-timing-function:linear;}
#step_1 #bottom_icon .mbottom .arrow{    background: url(/resources/image/scroll_icon.png) no-repeat;width: 70px;height: 70px;background-size: contain;}

#step_1 #bottom_icon .mbottom .et-icon{background: url('/resources/image/enter.png') no-repeat;width: 106px;height: 31px;background-size: contain;position: absolute;left: -53px;bottom: 0;opacity: 0; transition:all ease 1.5s;cursor: pointer;}




@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




@media screen and (max-width: 1600px) {
	#canvas{width:1600px;}
	#video1 {width:1600px !important; }
	#video_text1 {width:1600px !important; }
	#video_text2 {width:1600px !important; }
	#video_text3 {width:1600px !important; }
	#media_video_navi{top:590px !important;left:800px !important;}	

	#step_1 #text-line-area #text-container{width: 1600px;}
	#step_1 #center_text_image{width:1600px;}
	#step_1 #bottom_icon{width:1600px;}
	#start {width:1600px;}
	#top_menu{width: 1600px;}
}