@keyframes fadeIn{
    from{
        opacity: 0;
    }to{
        opacity: 1;
    }
}
@keyframes fadeInDown{
    from{
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translate3d(0, 3rem, 0);
    }to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes rotateIn {
    from{
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }to{
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}
@keyframes appPoint{
    from{
        opacity: 1;
        transform: scale(.5);
    }to{
        opacity: 0;
        transform: scale(1);
    }
}
.hmc_sec1, 
.h_event_lists a,
.fadeInUp{
	overflow: hidden;
}
.events_wrap a,
.event_title.exhi h1 span,
.h_event_lists a > div,
.hmc_sec1 > div,
.fadeInUp > div, .line_block > div,
.fadeInUp > h1{
	opacity: 0;
	transform: translate3d(0,2rem,0);
	transition: all 1s;
}

.events_wrap > div.is-inview a,
.event_title.exhi.is-inview h1 span,
.h_event_lists a.is-inview > div,
.hmc_sec1.is-inview > div,
.fadeInUp.is-inview > div, .line_block.is-inview > div,
.fadeInUp.is-inview > h1{
	opacity: 1;
	transform: translate3d(0,0,0);
}
.event_title.exhi h1 span,
.hmc_sec1 > div:nth-child(1),
.hmc_sec1 > div:nth-child(3){
	transition-delay: .5s;
}

.foot_infos > div > div:nth-child(2){
	transition-delay: .3s;
}
.foot_infos > div > div:nth-child(3){
	transition-delay: .5s;
}
/* 主視覺動畫 */

#preloading{
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    top: 0;left: 0;
    z-index: 998;
    transition: opacity 1s;
}
#preloading.leave{
    opacity: 0;
    pointer-events: none;
}
.prelaod_bg{
    width: 100vw;
    height: 100vw;
    left: 50%;
    top: 50%;
    margin: -50vw 0 0 -50vw;
    z-index: 0;
    position: absolute;
    background-image: url('../imgs/visual/repload_bg.jpg');
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: center;
    animation: preloadbg 4s both cubic-bezier(0.76, 0, 0.24, 1);
}
#preload_numb{
    position: absolute;
    z-index: 1;
    font-size: 6vw;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: preloadNumb 3s both cubic-bezier(0.76, 0, 0.24, 1);
    transition: opacity .3s;
}
#preload_numb.leave{
    opacity: 0;
    transform: scale(.7);
}
#proload_text{
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#proload_text img{
    width: 60vw;
    animation: preloadText 1s 2.2s both;
}
@keyframes preloadText {
    from{
        opacity: 0;
        transform: scale(.7);
    }to{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes preloadNumb {
    from{
        transform: translate(-50%, -50%) scale(.5);
    }to{
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes preloadbg {
    from{
        filter: blur(0);
        transform: rotate(0deg) scale(1);
    }to{
        filter: blur(15px);
        transform: rotate(360deg) scale(5);
    }
}
.hmv_text h1 img,
.main_visual,
.hmv_tag,
.hmv_text span img{
	opacity: 0;
	filter: blur(10px);
	transition: all 1.5s;
}
.main_visual,
.hmv_tag{
	transition-delay: 1.5s;
}
.hmv_text span img{
	transition-delay: 1s;
}

.hmv_text h1 img{
	transition-delay: .5s;
}
.sec_main_visual.getin .hmv_text h1 img,
.sec_main_visual.getin .main_visual,
.sec_main_visual.getin .hmv_tag,
.sec_main_visual.getin .hmv_text span img{
	opacity: 1;
	filter: blur(0);
}
.mvnav.stop{
	pointer-events: none;
}
#tagpop .mvnav.get{
	pointer-events: none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	width: 30vw;
	animation: mvGetScale 1.5s both cubic-bezier(0, 0.55, 0.45, 1);
}
#tagpop .mvnav.get:hover div{
	transform: none;
}
#tagpop img{
	width: 100%;
}
.mvnav.get > div{
	animation: mvGet 1.5s both;
	z-index: 1;
}
#tagpop{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 992;
	display: none;
	transition: all 2s;
}
#tagpop.leave{
	opacity: 0;
	pointer-events: none;
	filter: blur(10rem);
}
@keyframes mvGetScale{
	from{
		transform: scale(0) translate(-50%, -50%) rotate(0deg);
	}to{
		transform: scale(.7) translate(-50%, -50%) rotate(0deg);
	}
}
@keyframes mvGet{
	0%{
		transform: scaleX(1);
	}10%{
		transform: scaleX(0);
	}20%{
		transform: scaleX(1);
	}30%{
		transform: scaleX(0);
	}40%{
		transform: scaleX(1);
	}50%{
		transform: scaleX(0);
	}60%{
		transform: scaleX(1);
	}70%{
		transform: scaleX(0);
	}80%{
		transform: scaleX(1);
	}90%{
		transform: scaleX(0);
	}100%{
		transform: scaleX(1);
	}
}

/* 預設版型進場 */
@keyframes updownIn{
	20%{
		transform: translate3d(-2.5rem,0,0);
	}40%{
		transform: translate3d(-2rem,.5rem,0);
	}60%{
		transform: translate3d(-1.5rem,0,0);
	}80%{
		transform: translate3d(-1rem,.5rem,0);
	}100%{
		transform: translate3d(0,0,0);
	}
}
.defa_title.is-inview .dtd_deco img{
	animation: updownIn 2s both;
}
.defa_title_text h1{
	transition-delay: .7s;
}
.dtd_text > div{
	transition-delay: 1s;
}
/* 展覽版型進場 */
.exhi_title_deco img{
	opacity: 0;
	margin: 2rem 0 0;
	transition: all 1s;
}
.exhi_title_deco img:nth-child(1){
	transition-delay: .7s;
}
.exhi_title_deco img:nth-child(2){
	transition-delay: 1s;
}
.exhi_title_deco img:nth-child(3){
	transition-delay: 1.3s;
}
.exhi_title_deco img:nth-child(4){
	transition-delay: 1.6s;
}
.exhi_title_deco.is-inview img{
	opacity: 1;
	margin: 0;
}
/* 活動陳列動畫 */
.eve_circle > div{
	opacity: 0;
	transform: scale(0);
	transition: all .3s .7s;
}
.eve_circle > div:last-child{
	transition-delay: .9s;
}
.eve_bigtitle h1{
	filter: blur(20px);
	transform: scale(0);
	transition: all 1s .5s;
}
.evedis_title.is-inview .eve_circle > div{
	opacity: 1;
	transform: scale(1);
}
.evedis_title.is-inview h1{
	filter: blur(0);
	transform: scale(1);
}