/* load */
#loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: all 2s;
}
#loader.leave{
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
}
#loader:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
}
#loader > div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#loadFirst svg{
    width: 12vw;
    height: 12vw;
    transition: opacity 1s;
}
#loadFirst.leave svg{
    opacity: 0;
}
#loadsec svg{
    width: 12vw;
    height: auto;
    fill: #666;
    transition: opacity 1s;
}
#loadsec.leave svg{
    opacity: 0;
}
#loadThird svg{
    width: 12vw;
    height: auto;
    fill: #78a6c4;
}
.logoload{fill:#7DB3C2;}
.load_lines line{
    fill:none;stroke:#7DB3C2;stroke-width:2;stroke-miterlimit:10;}
.load_lines line:nth-child(1){
    animation: loadLine1 2s both;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
}
.load_lines line:nth-child(2){
    animation: loadLine2 2s .3s both;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
}
.load_lines line:nth-child(3){
    animation: loadLine3 2s .6s both;
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
}
.load_circle{
    transform-origin: 50% 50%;
    animation: loadCircle 2s .3s both;
}
.loadtext-1, .loadtext-2{
    transform-origin: 50% 50%;
    opacity: 0;
    animation: loadtext_a 1s 2s both;
}
.loadtext-2{
    animation-delay: 2.2s;
}
#loadThird path{
    transform-origin: 50% 50%;
    opacity: 0;
    animation: loadtext_a 1s both;
}
#loadThird path:nth-child(1){ animation-delay: 3s; }
#loadThird path:nth-child(2){ animation-delay: 3.2s; }
#loadThird path:nth-child(3){ animation-delay: 3.4s; }
#loadThird path:nth-child(4){ animation-delay: 3.6s; }

@keyframes loadtext_a {
    from{
        opacity: 0;
        transform: scale(.8);
    }to{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes loadCircle {
    from{
        transform: rotate(-45deg);
        opacity: 0;
    }to{
        transform: rotate(0);
        opacity: 1;
    }
}
@keyframes loadLine1 {
    from{
        stroke-dashoffset: 34;
    }to{
        stroke-dashoffset: 0;
    }
}
@keyframes loadLine2 {
    from{
        stroke-dashoffset: 19;
    }to{
        stroke-dashoffset: 0;
    }
}
@keyframes loadLine3 {
    from{
        stroke-dashoffset: 10;
    }to{
        stroke-dashoffset: 0;
    }
}
/* page */
#pageBox{
    transition: all 1s;
}
#pageBox.leave{
    opacity: 0;
    transform: translate3d(5rem, 0, 0);
}
@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);
    }
}
.squareAni div:before,
.squareAni div:after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
    z-index: -1;
	transform: translate3d(-100%,0,0);
	transition: transform .3s;
}
.squareAni div{
	overflow: hidden;
	position: relative;
}
.squareAni div:after{
	background-color: #78a6c4;
	transition: transform 1s .3s;
}
.squareAni.is-inview div:before{
    transform: translate3d(0,0,0);
}
.squareAni.is-inview div:after{
    transform: translate3d(100%,0,0);
}
.squareAni i{
    opacity: 0;
    transition: opacity 0.1s .6s;
}
.squareAni.is-inview i{
    opacity: 1;
}
.hover_show_image{
    position: relative;
}
.hover_show_image img:nth-child(2){
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.1);
    opacity: 0;
    filter: blur(10px);
    transition: all 1s;
}
.hover_show_image:hover img:nth-child(2){
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
}
.separateAni div{
    opacity: 0;
    transform: translate3d(0,2rem,0);
    transition: all 1s;
}
.mvgal_text h1 i,
.separateAni.hori div{
    opacity: 0;
    transform: translate3d(2rem, 0 ,0);
    transition: all 1s;
}
.mvgal_wrap.is-inview i,
.mvgal_wrap.is-inview .separateAni div,
.separateAni.is-inview div{
    opacity: 1;
    transform: translate3d(0,0,0);
}
/* 先暫時這樣寫 */

.schedule .dot:nth-child(1),
.separateAni div:nth-child(2),
.mvgal_text h1 div:nth-child(2) i{
    transition-delay: .3s;
}

.schedule .dot:nth-child(2),
.separateAni div:nth-child(3),
.mvgal_text h1 div:nth-child(3) i{
  transition-delay: .4s;
}

.schedule .dot:nth-child(3),
.separateAni div:nth-child(4),
.mvgal_text h1 div:nth-child(4) i{
  transition-delay: .5s;
}

.schedule .dot:nth-child(4),
.separateAni div:nth-child(5),
.mvgal_text h1 div:nth-child(5) i{
  transition-delay: .6s;
}

.schedule .dot:nth-child(5),
.separateAni div:nth-child(6),
.mvgal_text h1 div:nth-child(6) i{
  transition-delay: .7s;
}

.schedule .dot:nth-child(6),
.separateAni div:nth-child(7),
.mvgal_text h1 div:nth-child(7) i{
  transition-delay: .8s;
}

.schedule .dot:nth-child(7),
.separateAni div:nth-child(8),
.mvgal_text h1 div:nth-child(8) i{
  transition-delay: .9s;
}
.separateAni div:nth-child(9),
.mvgal_text h1 div:nth-child(9) i{
  transition-delay: 1s;
}
.separateAni div:nth-child(10),
.mvgal_text h1 div:nth-child(10) i{
  transition-delay: 1.1s;
}
.mvgal_text h1 div:nth-child(11) i{
  transition-delay: 1.2s;
}
.mvgal_text h1 div:nth-child(12) i{
  transition-delay: 1.3s;
}

/* schedule */
.schedule .circle_btn{
	opacity: 0;
	transform: scale(.5);
	transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.schedule.is-inview .circle_btn{
	opacity: 1;
	transform: scale(1);
}
.schedule .dot{
	opacity: 0;
	transform: scale(0);
	transition: all 1s;
}
.schedule.is-inview .dot{
	opacity: 1;
	transform: scale(1);
}