/*------------------------------------------------------------------------------------------- */
/*翻轉 flip-down */
.heading_main.js-scroll .heading-text,
.heading_main.js-scroll .heading-subtext,
.heading_contact.js-scroll .heading-text,
.contact-phone.js-scroll{
	opacity: 0;

	transform: perspective(2500px) rotateX(300deg);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}

.contact-phone.js-scroll{
	transition-delay: 1s;
}

.heading_main.js-scroll.is-active .heading-text,
.heading_main.js-scroll.is-active .heading-subtext,
.heading_contact.js-scroll.is-active .heading-text,
.contact-phone.js-scroll.is-active{
	opacity: 1;
	transform: perspective(2500px) rotateX(0);
}







/*------------------------------------------------------------------------------------------- */
.js-scroll-fade.js-scroll{
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1);
}

.js-scroll-fade.js-scroll.is-active{
	opacity: 1;
}




/*------------------------------------------------------------------------------------------- */
.heading_left_line.js-scroll:before,
.heading_left_line.js-scroll:after{
	height:0;
	transition: height 1s ease;
}

.heading_left_line.js-scroll.is-active:before{
	height:80px;
}
.heading_left_line.js-scroll.is-active:after{
	height:40px;
	transition-delay: 0.7s;
}
@media (min-width: 992px){
	.heading_left_line.js-scroll.is-active:before{
		height:200px;
	}
	.heading_left_line.js-scroll.is-active:after{
		height:70px;
	}
}
@media (min-width: 1500px){
	.heading_left_line.js-scroll.is-active:before{
		height:300px;
	}
	.heading_left_line.js-scroll.is-active:after{
		height:90px;
	}
}



/*------------------------------------------------------------------------------------------- */
.js-scroll-fade-left.js-scroll{
	opacity: 0;
    transform: translateX(10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-scroll-fade-left.js-scroll.is-active{
	opacity: 1;
    transform: translateX(0);
}




/*------------------------------------------------------------------------------------------- */
.js-scroll-fade-right.js-scroll{
	opacity: 0;
    transform: translateX(-10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-scroll-fade-right.js-scroll.is-active{
	opacity: 1;
    transform: translateX(0);
}



/*------------------------------------------------------------------------------------------- */
.js-scroll-fade-up.js-scroll{
	opacity: 0;
    transform: translateY(10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-scroll-fade-up.js-scroll.is-active{
	opacity: 1;
    transform: translateY(0);
}



/*------------------------------------------------------------------------------------------- */
.js-scroll-fade-down.js-scroll{
	opacity: 0;
    transform: translateY(-10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-scroll-fade-down.js-scroll.is-active{
	opacity: 1;
    transform: translateY(0);
}




/*------------------------------------------------------------------------------------------- */
.breadcrumb-nav.js-scroll{
	opacity: 0;
    transform: translateX(-10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.breadcrumb-nav.js-scroll.is-active{
    opacity: 1;
    transform: translateX(0);
}



/*------------------------------------------------------------------------------------------- */
.category_box.js-scroll{
    opacity: 0;
    transform: translateX(-10rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
			
	transition-delay: 2s;
}
.category_box.js-scroll.is-active{
    opacity: 1;
    transform: translateX(0);
}



/*------------------------------------------------------------------------------------------- */
.heading_page.js-scroll{
	opacity:0;
    transform: scale(.3);
	transition:opacity 1s ease , transform 1s ease;
}
.heading_page.js-scroll.is-active{
    opacity: 1;
	transform: translateZ(0) scale(1)
}




/*------------------------------------------------------------------------------------------- */
.row > li.js-scroll,
.contact-mapbox.js-scroll{
	opacity:0;
	transform: perspective(2500px) translateY(10rem);
	transition:opacity 1s ease , transform 1s ease;
}
.row > li.js-scroll.is-active,
.contact-mapbox.js-scroll.is-active{
    opacity: 1;
	transform: translateZ(0) translateY(0);
}




.formlist > li.js-scroll{
	opacity:0;
	transform: perspective(2500px) translateX(10rem);
	transition:opacity 1s ease , transform 1s ease;
}
.formlist > li.js-scroll.is-active{
	opacity: 1;
	transform: translateZ(0) translateY(0);
}






/*------------------------------------------------------------------------------------------- */
.menu.js-scroll > li{
	opacity: 0;
    transform: translateX(-2rem);
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.menu.js-scroll.is-active > li{
	opacity: 1;
    transform: translateX(0);
}