/*global*/
* {
  margin: 0;
  padding: 0;
}

/* your styling */
 html {
   /* scrollbar-width: none;*/
}
body::-webkit-scrollbar {
  /*  display: none;*/
} 

body {
    -ms-overflow-style: none;

}
body {
	font-family: "Noto Sans TC";	
	position: relative;
	overflow-x: hidden;
}
.f-en {
	 font-family: "Playfair Display"!important;
}
/*menu*/
.menu {
	background-color: rgba(255, 255, 255, 0.3);

	z-index: 999;
	position: fixed;
	right: -80px;
	top: 30%;
	
	border-radius: 8px;
	color: black;
	transition: 0.3s;
}
#menu:hover {
	right: 0px;
	padding: 8px;
}
#menu .active {
	border-radius: 8px;
	background-color: rgba(96, 55, 19, 1);
}
#menu .nav-item {
	position: relative !important;
}

/*big_img*/
.big__img {
	overflow-x: hidden;
	background-color: black;
	background-image: url("../img/big_img/big_img.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 25%;
	height: 100vh;
	width: auto;
	position: relative;

	color:white;
}
.big__img__top__img {
	padding: 35px 0 0 35px;
}
.big__img__top__img > a > img,
.big__img__top__img > img {
	width: 170px;
	height: auto;
}
.big__img__dedicate__btn > button {
	color: white;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 100px;
	border: 3.5px solid white;
	height: 50px;
	font-size: 20px;
	margin: 40px 40px 0 40px;
	padding: 5px 10px;
}
.big__img__dedicate__btn > button > a {
	color: white;
	text-decoration: none;
}
.center__logo {
	position: absolute;
	bottom: 40vh;
}
.center__logo > img {
	width: 280px;
	height: auto;
}
.scroll__btn {
	position: absolute;
	bottom: 15vh;
}
.scroll__btn > button {
	background-color: rgba(0, 0, 0, 0);
	border: 0;
}
.scroll__btn img {
	width: 70px;
}

/*slide*/
.slide__block {
	height: 90vh;
}
.carousel-item {
	height: 90vh;
}


#carouselExampleIndicators .carousel-inner .carousel-item {
	height: auto;
}
.carousel-inner:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0 0 50px 30px #000000 inset;
}
.slide__block img {
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}
.slide__control__icon {
	width: 100px;
	height: 100px;
}

/*scripture*/
.scripture {
	background-color: #e8e0cf;
}
.scripture__title {
	color: #20262c;
	font-size: 35px;
	margin-top: 50px;
	margin-bottom: 20px;
}
.scripture__subtitle {
	color: #20262c;
	font-size: 20px;
	margin-bottom: 60px;
}

/*about*/
.about {
	overflow-x: hidden;
	background-color: #f7f6ef;
	padding-top: 20px;
	padding-bottom: 100px;
}
.about__block {
	padding-top: 20px;
	padding-bottom: 20px;
}
.about__title {
	color: #b4995a;
	font-size: 65px;
	letter-spacing: 7px;
	overflow: hidden;
}
.about__subtitle--top {
	color: #521200;
	font-size: 33px;
	padding-right: 75px;
}
.about__subtitle--bottom {
	color: #521200;
	font-size: 33px;
}
.about__describe--left {
	color: #521200;
}
.about__describe--right {
	color: #521200;
}
.about__describe--big--top {
	font-size: 30px;
	font-weight: 50;
	margin-top: 5px;
	margin-bottom: 5px;
	white-space: nowrap;
}
.about__describe--big--bottom {
	font-size: 40px;
	font-weight: 50;
	margin-top: 5px;
	margin-bottom: 5px;
	white-space: nowrap;
}
/*.about__describe--special {
	padding-right: 20%;
}*/
.about__describe--small {
	font-size: 1.05rem;
	margin-top: 20px;
}
.about__img > div {
	width: 500px;
}

/*milestone*/
.milestone {
	overflow-x: hidden;
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #f7f6ef;
}
.milestone > .container {
	background-color: #e8e0cf;
}
.milestone__shift {
	position: relative;
	top: -105px;
}
.milestone__title {
	color: #b4995a;
	font-size: 120px;
	letter-spacing: 7px;
}
.milestone__subtitle--top {
	color: #521200;
	font-size: 28px;
	position: relative;
	top: -30px;
	text-align: right;
}
.milestone__subtitle--bottom {
	color: #521200;
	font-size: 28px;
	position: relative;
	top: -30px;
	text-align: right;
}
.milestone__quote {
	margin-bottom: 50px;
}
.milestone__divider {
	height: 300px;
	width: 2px;
	background-color: #c69b6d;
	margin: 0 50px;
}
.milestone__describe {
	line-height: 1.8;
}
.milestone__col__text--up{
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	font-size: 35px;
}
.milestone__col__text--down{
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	font-size: 35px;
}

.milestone__img--top {
	position: relative;
	height: 100%;
}
#milestone_1 {
	position: absolute;
	width: 80%;
	z-index: 5;top: 40%; right: 30%;
	box-shadow:3px 3px 12px gray;padding:3px;

	animation: milestone_1 14s paused infinite linear ;
	-webkit-animation: milestone_1 14s paused infinite linear;
	-o-animation: milestone_1 14s paused infinite linear;
	-moz-animation: milestone_1 14s paused infinite linear;
}
#milestone_2 {
	position: absolute;
	width: 80%;
	z-index: 4;top: 30%; right: 20%;
	box-shadow:3px 3px 12px gray;padding:3px;

	animation: milestone_2 14s paused infinite linear;
	-webkit-animation: milestone_2 14s paused infinite linear;
	-o-animation: milestone_2 14s paused infinite linear;
	-moz-animation: milestone_2 14s paused infinite linear;
}

#milestone_3 {
	position: absolute;
	width: 80%;
	z-index: 3;top: 20%; right: 10%;
	box-shadow:3px 3px 12px gray;padding:3px;

	animation: milestone_3 14s paused infinite linear;
	-webkit-animation: milestone_3 14s paused infinite linear;
	-o-animation: milestone_3 14s paused infinite linear;
	-moz-animation: milestone_3 14s paused infinite linear;
}
#milestone_4 {
	position: absolute;
	width: 80%;
	z-index: 2;top: 10%; right: 0%;
	box-shadow:3px 3px 12px gray;padding:3px;

	animation: milestone_4 14s paused infinite linear;
	-webkit-animation: milestone_4 14s paused infinite linear;
	-o-animation: milestone_4 14s paused infinite linear;
	-moz-animation: milestone_4 14s paused infinite linear;
}
@keyframes milestone_1 {
	0% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	15% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	24.99% {
		z-index: 5;
		top: 40%; right: 30%;
		opacity: 0;
	}
	25% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	40% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	50% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	65% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	75% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	90% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	100% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
}
@keyframes milestone_2 {
	0% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	15% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	25% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	40% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	49.99% {
		z-index: 5; 
		top: 40%; right: 30%;
		opacity: 0;
	}
	50% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	65% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	75% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	90% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	100% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
}
@keyframes milestone_3 {
	0% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	15% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	25% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	40% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	50% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	65% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	74.99% {
		z-index: 5; 
		top: 40%; right: 30%;
		opacity: 0;
	}
	75% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	90% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	100% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
}
@keyframes milestone_4 {
	0% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	15% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
	25% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	40% {
		z-index: 2; 
		top: 10%; right: 0%;
		opacity: 1;
	}
	50% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	65% {
		z-index: 3; 
		top: 20%; right: 10%;
		opacity: 1;
	}
	75% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	90% {
		z-index: 4; 
		top: 30%; right: 20%;
		opacity: 1;
	}
	99.99% {
		z-index: 5; 
		top: 40%; right: 30%;
		opacity: 0;
	}
	100% {
		z-index: 1; 
		top: 0%; right: -10%;
		opacity: 0;
	}
}

/* .milestone__img--top > img:hover {
	width: 150%;
	z-index: 100 !important;
} */

/*dedicate*/
.dedicate {
	overflow-x: hidden;
	background-color: #e8e0cf;
	padding-bottom: 100px;
}
.dedicate > .container {
	padding-right: 6%;
	padding-left: 6%;
}
.dedicate__title {
	color: #b4995a;
	font-size: 120px;
	letter-spacing: 7px;
}
.dedicate__subtitle {
	color: #521200;
	font-size: 28px;
	position: relative;
	top: -15px;
}
.dedicate__block__title {
	color: #333334;
	font-size: 35px;
	margin-top: 30px;
}
.dedicate__block__content {
	color: #333334;
	font-size: 20px;
	margin-top: 25px;
	margin-bottom: 60px;
	line-height: 1.8;
}
.dedicate__bar--outer {
	background-color: white;
	width: 100%;
	height: 33px;
	border-radius: 17px;
	position: relative;
	margin-top: 150px;
}
.dedicate__bar--inner {
	background-color: #b4985b;
	width: 41%;
	height: 100%;
	border-radius: 18px;
}
.dedicate__bar__text {
	color: white;
	font-size: 22px;
	font-weight: lighter;
	/* margin-left: 5%; */
}
.dedicate__bar__num {
	margin-bottom: 100px;
}
.dedicate__bar__num > div {
	color: #333334;
	font-size: 22px;
	padding-top: 2%;
	white-space: nowrap;

	position: relative;
}

/*dedicate__thank*/
.dedicate__thank__title {
	color: #521200;
	font-size: 40px;
	padding: 40px 0 25px 0;

}
.dedicate__thank__subtitle {
	color: #333334;
	font-size: 30px;
	padding: 25px 0;
}
.dedicate__thank__content {
	color: #333334;
	font-size: 20px;
	padding: 25px 0 ;
}
.dedicate__thank__content > span {
	font-weight: 900;
	font-size: 1.05em;
}
.souvenir__block__subtitle {
	color: #333334;
	font-size: 30px;
	padding: 25px 0;
}
.souvenir__block__content {
	color: #333334;
	font-size: 20px;
}
.souvenir__img > img {
	height: auto;
}
.souvenir__span {
	margin-top:7px;
	font-size: 10px;
}

/*support*/
.support {
	overflow-x: hidden;
	background-color: #ffffff;
	padding: 70px 0 90px 0;
}
.support > .container {
	padding: 0 3%;
}
.support__title {
	color: #521200;
	font-size: 50px;
}
.support__method--two {
	margin-top: 100px;
}
.support__subtitle {
	margin-bottom: 20px;
}
.support__member__btn {
	width: 200px;
	height: 65px;
	background-color: #e8e0cf;
	border: none;
	border-radius: 20px;
	font-size: 20px;
	margin-top: 35px;
}
.support__subtitle > div {
	color: #521200;
	font-size: 35px;
	padding-bottom: 20px;
}
.support__subtitle > span {
	color: #521200;
	font-size: 23px;
}
.support__button__block {
	min-height: 330px;
}
.support__button__block > button {
	width: 140px;
	height: 80px;
	background-color: #e8e0cf;
	border: none;
	margin-bottom: 10px;
	border-radius: 20px;
	font-size: 20px;
}
.support__bank {
	color: #521200;
	font-size: 18px;
	line-height: 30px;
	
}
.support__bank--middle {
	margin-top: 40px;
}
.support__bank--bottom > button {
	width: 200px;
	height: 65px;
	background-color: #e8e0cf;
	border: none;
	border-radius: 20px;
	font-size: 20px;
	margin-top: 35px;
}
.support__bank--bottom a {
	color: black;
	text-decoration: none;
}
/* modal */
#modal_second_step {
	display: none;
}
#support__back {
	display: none;
}
#support__submit {
	display: none;
}
#modal_spinner {
	display: none;
}

/*contact*/
.contact {
	overflow-x: hidden;
	background-color: #e8e0cf;
	padding: 30px 0 100px 0;
}
.contact > .container {
	padding: 0 30px;
}
.contact__title {
	color: #b4995a;
	font-size: 110px;
	letter-spacing: 7px;
}
.contact__subtitle {
	color: #521200;
	font-size: 28px;
	letter-spacing: 0;
	text-align: right;	
}
.contact__content {
	color: #521200;
	font-size: 25px;
	padding: 70px 0 40px 0;
}
.contact__callout {
	color: #521200;
	font-size: 25px;
}
.contact__callout > button {
	background-color: #e8e0cf;
	color: #521200;
	border: none;
	height: 75px;
/*	width: 200px;*/
	padding: 0 20px;
	margin-right: 40px;
	border-radius: 20px;

	transition: 0.3s; 
}
.contact__callout > button:hover {
	background-color: #521200;
	color: #e8e0cf;
}
.contact__callout > button > i {
	font-size: 50px;
}
.contact__map {
	margin-top: 75px;
}

/*footer*/
.footer {
	background-color: #e8e0cf;
	padding: 100px 15% 30px 15%;
	font-size: 16px;
	color: #8b613c;
	letter-spacing: 2px;
}
.footer--top > span {
	padding-left: 20px;
}
.footer--middle {
	padding: 0 40%;
	color: black;
}

/*RWD block*/
/*normal*/
@media (min-width: 768px) {
	#collapse {
		display: none;
	}
	.about__describe--left {
		padding: 70px 100px 40px 0;
	}
	.about__describe--right {
		padding: 70px 0 40px 60px;
	}
	.about__video  {
		padding-right: 70px;
	}
	.milestone > .container {
		padding: 0 70px;
	}
	.milestone__block--top {
		padding-right: 10%;
	}
	.milestone__block--bottom {
		padding-right: 10%;
	}
	.milestone__subtitle--top {
		right: -50px;
	}
	.hope__quote {
		position: relative;
		top:-60px;
	}
	.milestone__img--top {
		min-height: 500px;
		margin-top: 25px;
	}
	.milestone__header--bottom {
		margin-top: 10%;
	}
	.milestone__img--bottom {
		margin-top: 60px;
	}
	.dedicate__bar__num > div {
		padding-left: 20%;
	}
	.dedicate__bar__num > div > i {
		font-size: 45px;
		position: absolute;
		top: -100px;
		right: 10px;
	}
	.souvenir__block {
		padding: 100px 0 30px 0;
	}
	.souvenir__block__content {
		padding: 25px 70px 70px 0;
	}
	.support__method--one {
		margin-top: 100px;
		padding: 0 6%;
	}
	.support__bank--top {
		margin-top: 80px;
	}
	.contact__subtitle {
		position: relative;
		top: -20px;
		right: -30px;
	}
}

/*mobile*/
@media (max-width: 767px) {
	.menu {
		display: none;
	}
	.big__img {
		height: 90vh;
	}
	.big__img__top__img > img {
		display: none !important;
	}
	.big__img__church__logo {
		display: none !important;
	}
	.big__img__dedicate__btn {
		display: none !important;
	}
	.center__logo {
		margin-top: 70px;
	}
	.center__logo > img {
		width: 200px;
		height: auto;
	}
	.scroll__btn {
		margin-top: 150px;
	}
	.slide__block {
		height: 45vh;
	}
	.carousel-item {
		height: 45vh;
	}

	#carouselExampleIndicators .carousel-item {
		height: auto;
	}
	.slide__block img {
		height: 45vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		object-fit: cover;
	}
	.about__block {
		padding-left: 10px;
		padding-right: 10px;
	}
	.about__describe--left {
		padding: 30px 0 60px 0;
	}
	.about__describe--right {
		padding: 30px 0 60px 0;
	}
	.milestone__shift {
		padding-left: 10px;
		padding-right: 10px;
	}
	.milestone__img--top {
		height: calc(77vh - 200px);
		margin: 30px 40px 0 40px;
	}
	.milestone__img--bottom {
		margin-top: 60px;
	}
	.dedicate__bar__num > div {
		margin-left: 15%;
		margin-top: 10px;
		writing-mode: vertical-lr;
		vertical-align: bottom;
	}
	.dedicate__thank {
		padding-left: 10px;
		padding-right: 10px;
	}
	.dedicate__bar__num > div > i {
		font-size: 45px;
		position: absolute;
		top: -100px;
		right: 0px;
	}
	.souvenir__block {
		padding: 50px 0 10px 0;
	}
	.souvenir__block__content {
		padding: 25px 0 50px 0;
	}
	.support__method--one {
		margin-top: 50px;
		padding: 0 6%;
	}
	.support__bank--top {
		margin-top: 40px;
	}
	.support__method--two {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.contact__subtitle {
		position: relative;
		top: -20px;
		right: 10px;
	}
}
/*phone*/
@media (max-width: 550px) {
	.center__logo {
		position: absolute;
		bottom: 50vh;
	}
	.scroll__btn {
		position: absolute;
		bottom: 15vh;
	}
	.scripture__title {
		font-size: 30px;
	}
	.scripture__subtitle {
		font-size: 16px;
	}
	.about__title {
		font-size: 40px;
		letter-spacing: 2px;
		text-align: center !important;
	}
	.about__subtitle--top,
	.about__subtitle--bottom {
		text-align: right !important;
		font-size: 25px;
		padding-right: 40px;
	}
	.about__describe--big--top {
		font-size: 27px;
	}
	.about__describe--small {
		font-size: 1rem;
	}
	.about__describe--big--bottom {
		font-size: 27px;
	}
	.milestone__shift {
		top: -55px;
	}
	.milestone__block--top,
	.milestone__block--bottom {
		margin-top: 20px;
	}
	.milestone__title {
		font-size: 60px;
		text-align: center !important;
	}
	.milestone__subtitle--top,
	.milestone__subtitle--bottom {
		text-align: center !important;
		top: -10px;
	}
	.milestone__col__text--up,
	.milestone__col__text--down {
		font-size: 30px;
	}
	.milestone__divider {
		margin: 0 40px;
	}
	.dedicate__title {
		font-size: 60px;
	}
	.dedicate__block__title {
		font-size: 25px;
	}
	.dedicate__block__content {
		font-size: 18px;
	}
	.dedicate__thank__title {
		font-size: 30px;
	}
	.dedicate__thank__subtitle {
		font-size: 25px;
	}
	.dedicate__bar--outer {
		margin-top: 40px;
	}
	.dedicate__thank__content {
		font-size: 18px;
		line-height: 1.8;
	}
	.dedicate__thank__subtitle {
		padding-bottom: 0px;
	}
	.support__subtitle {
		margin-bottom: 20px;
	}
	.support__bank--top {
		margin-top: 0;
	}
	.support__title {
		font-size: 35px;
	}
	.contact {
		padding-bottom: 0px;
	}
	.contact__title {
		font-size: 50px;
		text-align: center;
	}
	.contact__subtitle {
		margin-top: 10px;
		text-align: center;
	}
	.contact__content {
		padding-top: 20px;
		font-size: 18px;
	}
	.contact__callout > span {
		display: none;
	}
	.contact__callout > button {
		margin: 0;
	}
	.contact__map {
		margin-top: 20px;
	}
	.footer {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 12px;
	}
}
/*laptop*/
@media (min-width: 551px) and (max-width: 767px) {
	.milestone__shift {
		top: -85px;
	}
	.milestone__title {
		font-size: 100px;
	}
	.milestone__subtitle--top {
		right: 10px;
	}
	.dedicate__title {
		font-size: 100px;
	}
	.dedicate__block__title {
		font-size: 30px;
	}
}
/* special */
@media (max-width: 991px) {
	.dedicate__bar__text {
		color: #603713;
		position: absolute;
		left: 25%;
	}
	.support__subtitle > div {
		font-size: 25px;
	}
	.support__subtitle > span {
		font-size: 17px;
	}
}