* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
	text-decoration:none;
	outline:0;
	color:inherit;
	cursor: pointer;
}

a, button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:focus, button:focus {
    outline: none !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
  -moz-appearance: textfield;
}

html, body {
  font-family: 'Roboto', 'Noto Sans TC', sans-serif;
  font-weight: 400;
	color: #333;
	line-height: 1.25;
	overflow:auto;
}

body.CHI,
.hant {
	font-family: 'Noto Sans TC', 'Roboto', sans-serif !important;
	letter-spacing: 1px;
}

body.ENG {
	line-height: 1.5;
}

.body-container {
	max-width:1200px;
	padding: 40px 25px;
	margin:0 auto;
}

img {
	width:100%;
	max-width: 100%;
	display: block;
}

h1 {
	text-align:center;
	color:#39406a;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 2.2em;
}

h1::after {
	display:block;
	content:"";
	color:#39406a;
	margin:15px auto;
	width:30px;
	border-bottom: 4px solid #e89322;
}

h1.no-center {
	text-align: left;
	margin: 0;
}

h1.no-center::after {
	margin:15px 0;
}

h2 {
	font-size: 1.5em;
	font-weight: 500;
	margin-bottom:20px;
}

h3 {
	text-decoration: underline;
	font-weight: 500;
	margin-bottom: 10px;
}

h4 {
	font-weight: 300;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}

h6 {
	font-weight: 300;
	color:#666;
}

ol, ul {
  padding-left: 1em;

}

ol li, ul li {
  padding-left: 0.5em;
  margin-bottom:0.5em;
}

.breadcrumb {
	font-weight: 300;
	font-size: 1em;
	color: #333;
	margin:20px auto 0;
	padding-left:20px;
	max-width: 1200px;
}

.social-share-grid {
  display: flex;
  justify-content: flex-end;
  margin:20px auto 0;
	padding-right:20px;
	max-width: 1200px;
 }

.error-msg {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color:red;
  position: absolute;
  bottom:-1.675em;
  display: none;
}
.error-msg.th2{
	bottom: 0;
    position: unset;
    width: 100%;
}


.error ~ .error-msg, .error .error-msg {
  display: block;
}



.invisible-child {
    display: inline-block;
    height: 0px;
    margin: 0;
    padding: 0 !important;
}

.page-container {
	min-height: 70vh;
}

.nowrap {
	white-space: nowrap;
}

@media only screen and (min-width:768px) {
	.nowrap-d {
		white-space: nowrap;
	}
}

.email-break {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

}


/*---------- Flex Column ----------*/

.flex-column-grid {
	display:flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.flex-column-grid .item {
	display:flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.flex-column-grid .item .label {
	font-weight: 400;
}

.flex-column-grid .item .desc {
 
}

@media only screen and (min-width:601px) {
	.flex-column-grid .item {
		flex-direction: row;
		justify-content: space-between;
	}
}

/*---------- Text Field ----------*/


.field-wrapper {
  position: relative;
  white-space: nowrap;
  margin-bottom: 25px;
}

@media only screen and (min-width:768px) {

}

.field-wrapper label {
	font-size:16px;
	margin-bottom: 5px;
}


.field-wrapper .data-field {
  white-space: nowrap;
  position: relative;
  margin-top:8px;
}

.field-wrapper .data-field input {
  box-sizing:border-box;
  border: none;
  outline: none;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  font-weight: 300;
  color:#39406a;
  display: inline;
  background: none;
  width:100%;
}

#form-grid-donate .field-wrapper .data-field input {
  color:#ffffff;
}

.field-wrapper .data-field input::-webkit-input-placeholder {font-weight: 300; color:#39406a;opacity:0.5;}
.field-wrapper .data-field input:-ms-input-placeholder {font-weight: 300; color:#39406a;opacity:0.5;}
.field-wrapper .data-field input::-moz-placeholder {font-weight: 300; color:#39406a;opacity:0.5;}
.field-wrapper .data-field input::placeholder {font-weight: 300; color:#39406a;opacity:0.5;}

.field-wrapper .data-field .border-wrap {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-color: #39406a;
  position: absolute;
  bottom: -3px;
  left: 0;
  will-change: width;
}

.field-wrapper .data-field input:focus ~ .border-wrap {
  height: 2px;
}

.field-wrapper.white .data-field input {
  color:#fff;
}

.field-wrapper.white .data-field input::-webkit-input-placeholder {color:#fff;}
.field-wrapper.white .data-field input:-ms-input-placeholder {color:#fff;}
.field-wrapper.white .data-field input::-moz-placeholder {color:#fff;}
.field-wrapper.white .data-field input::placeholder {color:#fff;}

.field-wrapper.white .data-field .border-wrap {
  background-color: #fff;
}

.field-wrapper .data-field.error .border-wrap {
  height: 2px;
  background-color: red !important;
}

.data-field input[type="password"] {
/*    font-family: Verdana !important;*/
    letter-spacing: 0.5em !important;
    font-size: 10px !important;
}

.data-field.pw i {
	margin-left: -30px; 
	cursor: pointer;
}


/*---------- Options ----------*/

.field-wrapper .data-field.options {
	position: relative;
  font-family: 'Roboto', 'Noto Sans TC', sans-serif;
}

.field-wrapper .data-field.options select {
	display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #fff;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #394069 transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #394069 transparent;
  top: 5px;
}

/* style the items (options), including the selected item: */
.select-selected {
  cursor: pointer;
  height:24px;
}

.select-items div {
	background-color: #eee;
	padding:8px;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-color: #aaa;
}

.select-items div:last-child {
  border-bottom:1px solid #aaa;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #eee;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  height:24px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #ddd;
}

/*---------- Buttons ----------*/

.textlink {
	color:inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.btn-wrapper {
	display: flex;
	margin-top:40px;
}

.btn {
	padding:0.375em 1em;
	background:#9f271c;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	color:white;
	border:none;
	cursor:pointer;
	text-align:center;
	border-radius:50px;
	border: 3px solid #e89322;
	box-shadow:inset 0 0 0 3px #fff;
	font-size: 1.25em;
	margin:0 auto 20px;
	max-width: 300px;
	flex:1;
	white-space: nowrap;
	font-family: inherit;
}

.btn a {
	color:inherit;
}

.btn.blue {
	background-color:#39406a;
}

.btn.small {
		font-size: 1em;
		border-radius: 25px;
		border-width: 2px;
		box-shadow:inset 0 0 0 2px #fff;
		max-width: 120px;
		margin: 0 0 20px;
	}

@media only screen and (max-width:767px) {
	.btn.responsive {
		font-size: 1em;
		border-radius: 25px;
		border-width: 2px;
		box-shadow:inset 0 0 0 2px #fff;
	}
}


.btn-v1 {
	padding:5px;
	background:#9f271c;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	color:white;
	border:none;
	cursor:pointer;
	text-align:center;
	border-radius:50px;
	border: 3px solid #9f271c;
	box-shadow:inset 0 0 0 3px #fff;
	font-size: 1.25em;
}

.btn-v2 {
	padding:3px;
	background:#9f271c;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	color:white;
	border:none;
	cursor:pointer;
	text-align:center;
	border-radius:50px;
	border: 2px solid #e89322;
	box-shadow:inset 0 0 0 2px #fff;
}


.btn-v1.orange {
	padding:5px;
	background:#e89322;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	color:white;
	border:none;
	cursor:pointer;
	text-align:center;
	border-radius:50px;
	border: 3px solid #e89322;
	box-shadow:inset 0 0 0 3px #fff;
	font-size: 1.25em;
}

#btn_layer div {
	max-width:150px !important;
	max-height:50px !important;
}

.paypal-button {
	position: relative;
	max-width:150px;
	max-height:50px;
	overflow:hidden;
}


.btn.fake-paypal-button {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #e89322;
    color: white;
    pointer-events: none;
	min-width:100%;
	min-height:100%;
	font-weight:400;
}

.paypal-button iframe.visible {
	border-radius: 100%;
}

/*---------- Checkbox ----------*/


:root {
  --CheckborderWidth: 2px;
  --Checkheight: 12px;
  --Checkwidth: 5px;
  --CheckborderColor: #39406a;
}

.checkbox-wrapper {
	position: relative;
  margin-bottom:25px;
}

.checkbox-wrapper .btn-mc {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

.checkbox-wrapper .btn-mc.align-c {
  align-items: center;
}

.checkbox-wrapper .btn-mc .checkbox{
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
  border: 2px solid var(--CheckborderColor);
  margin-right:10px;
  margin-top:2px;
  display:flex;
  justify-content: center;
}


/*.checkbox-wrapper .btn-mc .checkbox:focus::after,  Only for Front-End Demo */
.checkbox-wrapper .btn-mc.selected .checkbox::after,
.checkbox-wrapper .btn-mc .selected .checkbox::after {
  content: '';
  display: block;
  margin-top:1px;
  transform: rotate(45deg);
  height: var(--Checkheight);
  width: var(--Checkwidth);
  border-bottom: var(--CheckborderWidth) solid var(--CheckborderColor);
  border-right: var(--CheckborderWidth) solid var(--CheckborderColor);
}

.checkbox-wrapper .btn-mc.error .checkbox{
  background-color: rgba(255, 255, 255, 0.5);
  border-color: red !important;
}

.checkbox-wrapper .btn-mc.error .checkbox{
  background-color: rgba(255, 255, 255, 0.5);
  border-color: red !important;
}

/*---------- Modal ----------*/

.modal {
	position: relative;
}

.modal .modal-cover{
	position: fixed;
	z-index: 999998;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(255, 255, 255, 0.7);
}

.modal .modal-content {
	position: fixed;
	z-index: 999999;
	top:50%;
	left:calc(50% - 20px);
	transform: translate(-50%, -50%);
	margin:0 20px;
	padding:40px 20px 10px;
	width:calc(100% - 40px);
	max-width:500px;
	min-height: 200px;
	background-color: #f5f5f5;
	border: 1px solid #39406a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.modal .modal-content .modal-close {
	position: absolute;
	top:0;
	right: 0;
	font-size: 1.5em;
	line-height: 1;
	padding:6px 12px;
}

.modal .modal-content .btn-wrapper {
	margin-top: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.modal .modal-content .btn {
	margin:0 5px 10px;
}


/*---------- Header ----------*/


header {
	width:100%;
	z-index: 10000;
	background-color:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
	position: fixed;
	top:0;
	box-shadow: 0px 2px 4px 0px rgba(101, 98, 98, 0.75);
	z-index: 99999;
}

.header-container {
	width:100%;
	max-width: 1200px;
	padding:0px 20px;
	color:#333;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.header-container .logo img {
	min-width: 80px;
	max-width: 80px;
	padding-right: 10px;
}

.header-container .menu-grid {
	flex:1;
	padding:0 15px;

}

.header-container .menu {
	display: flex;
	justify-content: flex-start;
}

.header-container .menu .menu-item {
	cursor:pointer;
	font-weight: 400;
	white-space: nowrap;
}

.header-container .nav-grid {
	display: flex;
	align-items: center;
	position: relative;
}

.header-container .nav-grid .login a {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.header-container .nav-grid .login img {
	min-height: 24px;
	max-height: 24px;
	margin-right: 6px;
}

.header-container .nav-grid .lang {
	display: flex;
  align-items: center;
  font-weight: 400;
}

.header-container .nav-grid a {
	padding:4px;
	margin:2px;
}

.header-container .lang a u {
	text-underline-offset: 4px;
}

.header-container .nav-grid #MemberMenu {
	background-color: #e89322;
  color:#fff;
  font-size: 0.875em;
	font-weight: 700;
	padding:8px 12px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	margin-right: 10px;
	position: relative;
}

.header-container .nav-grid #MemberMenu img {
	min-width: 22px;
	max-width: 22px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: #fff;
	padding:2px;
	border: 2px solid #445dad;
	margin-right: 8px;
	object-fit: cover;
}

.header-container .nav-grid #MemberMenu span {
	white-space: nowrap;
	margin-top:2px;
}

body.chi .header-container .nav-grid #MemberMenu span {
	margin-top:0;
}

.header-container #MemberMenu + .member-menu-list {
	display: none;
	position: absolute;
	top:calc(100% + 20px);
	left: 50%;
  transform: translateX(-50%);
	background-color: #e89322;
	border-radius: 6px;
	z-index:1001;
}

.header-container #MemberMenu.active + .member-menu-list {
	display: block !important;
}

.header-container #MemberMenu.active + .member-menu-list::before {
	content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 16px solid transparent;
  border-bottom-color: #e89322;
}


.header-container .member-menu-list .member-menu-item {
	background-color: #fff;
	border-radius: 6px;
	margin:6px;
	padding:0;
	font-size: 0.875em;
	font-weight: 500;
	color:#333;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}

.header-container .member-menu-list .member-menu-item:hover {
	background-color: #9f271c;
	color:#fff;
}

.header-container .member-menu-list .member-menu-item a {
	display: block;
	padding:15px;
	min-width: 150px;
	font-size: 1.125em;
}

.header-container .mobile-lang {
	width: 100%;
}

.header-container .mobile-lang a {
	display:block;
  padding: 15px;
  text-align: center;
  background-color: #000;
}

@media only screen and (max-width:1059px){
	

	.page-container {
		padding-top:60px !important;	
	}

	.menu-container {
		display: none;
	}

	.header-container {
		position: relative;
		padding-left: 0;
		min-height: 60px;
		max-height: 60px;
	}

	.header-container .logo {
		position: absolute;
		top:50%;
		left:20px;
		transform: translate(0, -50%);
	}

	.header-container .logo img {
		max-width: 60px;
		min-width: 60px;
	}

	.header-container #Hamburger {
		display: block;
		width:60px;
		max-width: 60px;
		height:60px;
		padding:10px 20px 10px 8px;
		position: absolute;
		right: 0;
	  cursor: pointer;
	  -webkit-tap-highlight-color: transparent;
	}

	.header-container #Hamburger .hamburger-wrapper {
		width:32px;
		max-width: 32px;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .5s ease-in-out;
	  -moz-transition: .5s ease-in-out;
	  -o-transition: .5s ease-in-out;
	  transition: .5s ease-in-out;
	}

	.header-container #Hamburger .hamburger-wrapper div {
	  display: block;
	  position: absolute;
	  height: 4px;
	  width: 100%;
	  background: #39406a;
	  border-radius: 8px;
	  opacity: 1;
	  left: 0;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}
	
	.header-container #Hamburger .hamburger-wrapper div:nth-child(1) {
	  top: 8px;
	  -webkit-transform-origin: left center;
	  -moz-transform-origin: left center;
	  -o-transform-origin: left center;
	  transform-origin: left center;
	}

	.header-container #Hamburger .hamburger-wrapper div:nth-child(2) {
	  top: 18px;
	  -webkit-transform-origin: left center;
	  -moz-transform-origin: left center;
	  -o-transform-origin: left center;
	  transform-origin: left center;
	}

	.header-container #Hamburger .hamburger-wrapper div:nth-child(3) {
	  top: 28px;
	  -webkit-transform-origin: left center;
	  -moz-transform-origin: left center;
	  -o-transform-origin: left center;
	  transform-origin: left center;
	}

	#MobileMenu.active #Hamburger .hamburger-wrapper div:nth-child(1) {
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	  top: 8px;
	  left: 4px;
	}

	#MobileMenu.active #Hamburger .hamburger-wrapper div:nth-child(2) {
	  width: 0%;
	  opacity: 0;
	}

	#MobileMenu.active #Hamburger .hamburger-wrapper div:nth-child(3) {
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	  top: 30px;
	  left: 4px;
	}

	.header-container .nav-grid {
		position: absolute;
		right:70px;
	}

	.header-container .nav-grid a {
		padding:0;
		margin:0;
	}

	.header-container .nav-grid .lang {
		display: none;
	}

	.header-container .nav-grid #MemberMenu {
		margin-right: 0;
	}

		#MobileMenu.active {
		position: fixed;
	}

	#MobileMenu.active::after {
/*		display:none;*/
		content: "";
		position: fixed;
		z-index: 999;
		top:60px;
		left: 0;
		right: 0;
		bottom:-200px;
		background-color: #394369;
	}

	#MobileMenu.active .menu-grid {
		position: absolute;
		left:0;
		width: 100%;
		top:60px;
		z-index: 1000;
		padding:0;
	}

	#MobileMenu.active .menu-container {
		display: block !important;
		color:#fff;
	}

	#MobileMenu.active .menu {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#MobileMenu.active .menu .menu-item {
		width:100%;
		text-align: center;
		border-bottom:1px solid #fff;
	}

	#MobileMenu.active #submenu-container {
		display: none;
	}

	#MobileMenu.active .menu-item.active {
		order:-1;
	}

	#MobileMenu.active .menu-item .menu-title, 	#MobileMenu.active .menu-item a {
		display: block;
		width: 100%;
		padding:15px;
	}

	#MobileMenu.active .menu-item.active .menu-title::before {
		content:"";
		position: absolute;
		left:20px;
		border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
	}

	#MobileMenu.active .menu-item.active #submenu-container {
		display: block;
		padding:0 10px;
		position: fixed;
		top:110px;
		left: 100%;
		right: 0;
		bottom:0;
		background-color: #394369;
		animation: slide 0.5s forwards;
		transition: transform 0.5s ease;
		cursor: default;
	}

	#MobileMenu.active .menu-item.active #submenu-container .col-grid,
	#MobileMenu.active .menu-item.active #submenu-container .col {
		display: flex;
		flex-direction: column;
	}

	#MobileMenu.active .menu-item.active #submenu-container .col > a,
	#MobileMenu.active .menu-item.active #submenu-container .col > span {
		width:100%;
		padding:15px;
		text-align: center;
		color:#394369;
		background-color: #fff;
		border:5px solid #394369;
		border-bottom:none;
	}

	#MobileMenu.active .menu-item.active #submenu-container .col > span a {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

}

@media only screen and (min-width:1060px){

	#Hamburger,
	.header-container .mobile-lang {
		display: none !important;
	}

	.header-container {
		min-height: 70px;
		max-height: 70px;
	}

	.page-container {
		padding-top:70px !important;
	}

	.header-container .menu .menu-item {
		padding: 24px 8px;
		max-width: 100%;
	}

	.header-container .menu .menu-item.arrow span {
		position: relative;
	}

	.header-container .menu .menu-item.arrow > span::after{
		position: absolute;
		z-index: 40;
	  left: 50%;
	  transform: translateX(-50%);
	  top: 47px;
	  content: '';
	  width: 0;
	  height: 0;
	  border-style: solid;
	  border-width: 15px 15px 0 15px;
	  border-color: #e9e9e8 transparent transparent transparent;
	}

	.ENG .header-container .menu .menu-item.arrow > span::after {
		top:44px;
	}

	.header-container .menu .menu-item:hover::after {
		position: absolute;
	  top: calc(100% - 20px);
	  left: 0;
	  right: 0;
	  content: '';
	  width: 100%;
	  height: 20px;
	  z-index: 30;
	}

	.header-container .menu .menu-item:hover + #submenu-container,
	.header-container .menu #submenu-container:hover {
		display: block !important;
	}

	.header-container .menu .menu-item:hover #submenu-container {
		display: block !important;
	}

	#submenu-container {
		display: none;
		width: 100%;
	  background-color: rgba(54, 59, 97, 0.9);
	  color: white;
	  position: absolute;
	  top:100%;
	  left: 0;
	  right:0;
	  z-index: 20;
	  font-size: 16px;
	}

	.header-container .menu .submenu-grid {
		padding:20px 100px;
		margin:0 auto;
		width:100%;
		max-width: 1200px;
	}

	.header-container .menu .submenu-grid .col-grid {
		display: flex;
/*		justify-content: space-between;*/
	}

	.header-container .menu .submenu-grid .col-grid .col {
		flex-basis:30%;
		display: flex;
		flex-direction: column;
		border-left: 1px solid rgba(255, 255, 255, 0.2);
		padding-left:3%;
		margin-left:2%;
	}

	.header-container .menu .submenu-grid .col-grid .col:not(:first-child) {
		
	}

	.header-container .menu .submenu-grid .col-grid .col > a,
	.header-container .menu .submenu-grid .col-grid .col > span {
		padding:10px;
		margin:5px 0;
	}

	.header-container .menu .submenu-grid .col-grid .col a:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.header-container #MemberMenu + .member-menu-list {
	  left: calc(50% - 30px);
	}

}

@-webkit-keyframes slide {100% {left: 0;}}
@keyframes slide {100% {left: 0;}}


@media only screen and (min-width:1367px){
	.header-container {
		min-height:85px;
		max-height: 85px;
		max-width: unset;
		padding:0 40px;
	}

	.page-container {
		padding-top:85px !important;
	}

	.header-container .logo img {
	  min-width: 100px;
	  max-width: 100px;
	  margin-right: calc(40px + 2%);
	}

	.header-container .menu .menu-item {
    padding: 24px 1.25%;
    font-size: 1.125em;
  }

  .header-container .nav-grid #MemberMenu {
	  font-size: 1em;
	  margin-right: 15px;
	}

	.header-container .nav-grid a {
  	padding: 8px;
  }

  .header-container .login a {
  	font-size: 1.125em;
  }

  .header-container .menu .submenu-grid {
    margin-left: 100px;
  }

  .header-container .menu .menu-item.arrow > span::after{
	  top: 55px;
	}

	.ENG .header-container .menu .menu-item.arrow > span::after{
	  top: 53px;
	}

}



/*---------- Footer ----------*/
footer {
    background-color: #C79928;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
    border-top: 15px solid #7A3A2B;
    padding: 50px 0 30px;
}

footer, footer a {
	color:#fff;
}

footer .left-panel {
	text-align: center;
}

footer .left-panel .contact {
	white-space: nowrap;
}

footer .left-panel .ft-icon {
	width: 1.2em;
	display: inline;
	margin-right: 5px;
	vertical-align: middle;
}

footer .right-panel div {
	padding-bottom: 10px;
}

footer .right-panel .page {
	display:flex;
}

footer .right-panel .social-icon {
	display:flex;
}

footer .right-panel .social-icon a {
	width: 35px;
	padding: 2px 4px;
	margin: 15px 3px 0;
}

footer .right-panel .page a {
	display:inline-block;
}

footer .right-panel .page a:not(:first-child):before{
	content:"";
	display:inline-block;
	width:1px;
	height:50%;
	background-color:#fff;
	margin:0 20px;
}

footer .container{
	display:flex;
	flex-direction:column;
	margin:auto;
}

	footer .right-panel {
	display:flex;
	flex-direction:column;
	align-items:center;
}


@media only screen and (max-width:767px){
	footer .left-panel {
		display:flex;
		flex-direction: column;
		justify-content:center;
		align-items:center;
		text-align: center;
	}

	footer .left-panel .logo {
		margin-bottom: 20px;
	}
}


@media only screen and (min-width:768px) {

	footer {
		padding: 120px 0 90px;
	}

	footer .container{
		flex-direction:row;
		justify-content:space-between;
		max-width:1200px !important;
		padding:0 40px;
	}

	footer .left-panel {
		display:flex;
		justify-content:flex-start;
		align-items:center;
	}

	footer .left-panel .logo {
		margin-right:10%;
	}

	footer .left-panel .contact {
		text-align:left;
	}

	footer .right-panel {
		align-items:flex-end;
	}

}


/*---------- Common ----------*/


@media only screen and (max-width: 767px) {
	.hide-xs {
	  display: none;
	}
}

@media only screen and (min-width: 768px) {
	.hide-m {
	  display: none;
	}
}

.banner-container .banner {
  width: 100%;
  position: relative;
  border-bottom: 16px solid #e89322;
}

.banner-container .banner img {
  width: 100%;
}

.banner-container .title {
  position: absolute;
  left: 10%;
  bottom: 15%;
  color: #fff;
  text-shadow: #000 0px 0px 10px;
  font-size: 40px !important;
  font-weight: 500;
  font-family: 'Roboto', 'Noto Sans TC', sans-serif !important;
}

@media only screen and (max-width: 1059px) {
	.banner-container .title {
	  bottom:10%;
	  font-size: 30px !important;
	}
}

@media only screen and (max-width: 767px) {
	.banner-container .title {
	  bottom:5%;
	  font-size: 26px !important;
	}
}


/* Add a black background color to the top navigation */
.responsive-dropdown {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

/* Style the links inside the navigation bar */
.responsive-dropdown .menu {
  flex-grow: 1;
  color: #fff;
  max-width: 150px;
  text-align: center;
  padding: 8px 0px;
  margin:0 5px;
  text-decoration: none;
  font-size: 1em;
  background-color: #39406a;
  position: relative;
}

/* Add an active class to highlight the current page */
.responsive-dropdown .menu.active, .responsive-dropdown a.icon {
  background-color: #ea3c30;
}

.responsive-dropdown .menu.active::after {
  content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translate(-50%,0);
	border-width: 12px 6px 0;
	border-style: solid;
	border-color: #ea3c30 transparent;
	display: block;
	width: 0;
}

/* Hide the link that should open and close the responsive-dropdown on small screens */
.responsive-dropdown .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the responsive-dropdown (.icon) */
@media screen and (max-width: 600px) {
  .responsive-dropdown .menu {
    display: none;
    width: 100%;
    max-width: 100%;
    margin:0;
  }
  .responsive-dropdown .menu.active {
    display: block;
  }

  .responsive-dropdown .menu.active::after {
  	display: none;
  }


  .responsive-dropdown a.icon {
    display: block;
    position: absolute;
    top:20px;
    right: 0;
		width: 40px;
		padding:11px;
		transform: translate(0% , -50%);
		text-align: center;
		color: #fff;
		font-size: 0.75em;
  }

  .page-fund-raising .fr-list .fr-item h3 {
		min-height:0px!important;
	}
}

/* The "responsive" class is added to the responsive-dropdown with JavaScript when the user clicks on the icon. This class makes the responsive-dropdown look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .responsive-dropdown.responsive {
  	flex-direction: column;
  }

  .responsive-dropdown.responsive a.icon {

  }
  .responsive-dropdown.responsive .menu {
  	display: block;
  }

  .responsive-dropdown.responsive .menu:not(:first-child) {
  	border-top:1px solid #fff;
  }
}

.fee-section {
  margin: 20px 15px;
  text-align: center;
}

.fee-section h3 {
	font-size: 1.5em;
  color: #39406a;
  font-weight: 500;
  text-decoration: none;
}

.fee-section h3 span {
	white-space: nowrap;
}

.fee-section .doublestrike {
  position: relative;
  display: inline-block;
}

.fee-section .doublestrike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 45%;
  height: 20%;
  width: 100%;
  border: 2px solid #39406a;
  border-width: 2px 0;
}

.earlybird-deadline {
	text-align:center;
	margin:20px 15px;
}

/*---------- Member ----------*/


.page-member {
	background-color: #175689;
	background-image: url('/img/texture_bg.png');
	color:#fff;
}

.page-member .login-banner {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.page-member .login-banner img {
	max-width: 250px;
}

.page-member h2 {
	margin-top:40px;
	text-align: center;
}

.page-member .intro {
	margin-top:20px;
	text-align: center;
}

.page-member .login-grid {
	margin:40px auto;
}

.page-member .controls {
	text-align: center;
}

.page-member .textlink {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.page-member .tnc-grid {
	margin-top: 40px;
}

.page-member .tnc-grid .btn-mc{
	font-size: 14px;
}

.page-member .checkbox-wrapper .btn-mc .checkbox{
  border: 2px solid #fff;
}

/*.page-member .checkbox-wrapper .btn-mc .checkbox:focus::after,  Only for Front-End Demo */
.page-member .checkbox-wrapper .btn-mc.selected .checkbox::after,
.page-member .checkbox-wrapper .btn-mc .selected .checkbox::after {
  border-bottom: var(--CheckborderWidth) solid #fff;
  border-right: var(--CheckborderWidth) solid #fff;
}

.page-member .checkbox-wrapper .btn-mc .textlink{
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media only screen and (min-width:768px) {
	.page-member .login-banner img {
		max-width: 350px;
	}

	.page-member .login-grid {
		max-width: 500px;
	}

	.page-member .tnc-grid .btn-mc{
		font-size: 16px;
	}

}



/*---------- Dashboard ----------*/

.page-dashboard .body-container {
	max-width: 1200px;
}

.page-dashboard .no-record-msg {
	margin:40px auto;
	text-align:center;
}

.page-dashboard .reg-table, {
	display: flex;
	flex-direction: column;
	margin-top:25px;
}

.page-dashboard .reg-table .reg-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid #39406a;
	padding:10px 10px;
	min-height: 40px;
}

.page-dashboard .reg-table .reg-item:last-child {
	border-bottom: 1px solid #39406a;
}

.page-dashboard .reg-table .reg-item > div {
	margin-top:10px;
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.page-dashboard .reg-table .reg-item .label {
	font-weight: 500;
	min-width: 120px;
	margin-right: 20px;
	text-align: left;
}

.page-dashboard .reg-table .reg-item .desc {
	text-align: right;
}


.page-dashboard .reg-table .reg-item .reg-control {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	margin:20px 0 10px;
}

.page-dashboard .reg-table .reg-item .reg-control .reg-status {
	justify-content: flex-end;
}

.page-dashboard .reg-table .reg-item .reg-control .reg-status span {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.page-dashboard .reg-table .reg-item .reg-action {
	color:#9f271c;
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-top:10px;
}

.page-dashboard .reg-table .reg-item .reg-status.confirmed .desc {color:#e89322;}
.page-dashboard .reg-table .reg-item .reg-status.processing .desc {color:#39406a;}
.page-dashboard .reg-table .reg-item .reg-status.draft .desc {color:#ea3c30;font-weight: 500;}
.page-dashboard .reg-table .reg-item .reg-status.cancelled .desc {color:#aaa;font-weight: 500;}

.page-dashboard .reg-table .reg-item .reg-control .btn {
	margin:0 auto;
	max-width: unset;
	flex: unset;
	min-width:150px;
}

.page-dashboard .reg-table .reg-item .reg-control .btn.small {
	min-width:45%;
}

.page-dashboard .reg-table .reg-item .reg-control .btn.upload {
	margin-right: 10px;
}

.page-dashboard .reg-table .reg-item.head{
	display: none;
}

.page-dashboard .reg-item .desc span {
	font-family:arial;
	font-size:0.75em;
	font-weight: 900;
	vertical-align: top;
	padding-left: 1px;
	color:#0000f2;
}

.page-dashboard .legend {
	padding:5px 10px;
	font-size: 14px;
}

.page-dashboard .legend span {
	margin-right:4px;
	font-family:arial;
	font-weight: 900;
	color:#0000f2;
}

@media only screen and (max-width:767px) {
	.page-dashboard .reg-table .reg-item .reg-control {
		flex-direction: column;
	}

	.page-dashboard .reg-table .reg-item .reg-control .btn.upload {
	  margin-right: auto;
	  margin-bottom: 10px;
	}
}

@media only screen and (min-width:768px) {
	.page-dashboard .reg-table .reg-item.head{
		display: flex;
		font-weight: 500;
		min-height: unset;
	}

.page-dashboard .reg-table .reg-item {
		flex-direction: row;
		justify-content: space-between;
		min-height: 70px;
	}

	.page-dashboard .reg-table .reg-item > div {
		display: block;
		margin:0;
	}

	.page-dashboard .reg-table .reg-item .reg-no {
		min-width: 120px;
		max-width: 140px;
		margin-right: 20px;
		text-align: left;
		white-space: nowrap;
	}

	.page-dashboard .reg-table .reg-item .reg-cate {
		max-width: 150px;
		margin-right: 20px;
		text-align: left;
	}

	.page-dashboard .reg-table .reg-item .reg-name {
		margin-right: 20px;
		text-align: left;
	}

	.page-dashboard .reg-table .reg-item .desc {
		text-align: left;
	}

	.page-dashboard .reg-table .reg-item .label {
		display: none;
	}

	.page-dashboard .reg-table .reg-item .reg-control {
		min-width: 220px;
		display:flex;
		flex-direction: row;
		justify-content: flex-end;
		margin:0;
		flex-grow:1;
	}

	.page-dashboard .reg-table .reg-item .reg-status {
		max-width:100px;
		margin-right:20px;
	}

	.page-dashboard .reg-table .reg-item .reg-control .reg-action {
		text-align: center;
		margin-right:20px;
		margin-top:0;
	}

	.page-dashboard .reg-table .reg-item .reg-control .btn {
		margin:0;
	}

}

.ENG .page-dashboard .reg-table .reg-item .reg-control {min-width: 280px;}
/* .ENG .page-dashboard .reg-table .reg-item .reg-control .btn {min-width: 220px;} */

.page-dashboard .fr-table {
	display: flex;
	flex-direction: column;
	margin-top:25px;
}

.page-dashboard .fr-table .fr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid #39406a;
	padding:10px 10px;
	min-height: 40px;
}

.page-dashboard .fr-table .fr-item:last-child {
	border-bottom: 1px solid #39406a;
}

.page-dashboard .fr-table .fr-item > div {
	margin-top:10px;
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.page-dashboard .fr-table .fr-item .label {
	font-weight: 500;
	min-width: 100px;
	margin-right: 20px;
	text-align: left;
}

.page-dashboard .fr-table .fr-item .desc {
	text-align: right;
}


.page-dashboard .fr-table .fr-item .fr-control {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	margin:20px 0 10px;
}

.page-dashboard .fr-table .fr-item .fr-pic .desc {
	max-width: 120px;
}

.page-dashboard .fr-table .fr-item .fr-goal .desc {
	white-space: nowrap;
}


.page-dashboard .fr-table .fr-item .fr-action {
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-top:10px;
}

.page-dashboard .fr-table .fr-item .fr-control .btn {
	margin:0 auto;
	max-width: unset;
	flex: unset;
	min-width:60px;
}

.page-dashboard .fr-table .fr-item.head{
	display: none;
}

.page-fund-raising .status-bar {
	font-family: 'Roboto Condensed';
	letter-spacing: -1px;
	font-weight: 300;
 }

.page-fund-raising .status-bar .bar {
	content: "";
	width: 100%;
	background-color: #e89322;
	display: inline-block;
	height: 10px;
	margin-right: 5px;
	position: relative;
}

.page-fund-raising .status-bar .bar span {
  content: "";
  background-color: #f5f5f5;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

@media only screen and (min-width:768px) {
	.page-dashboard .fr-table .fr-item.head{
		display: flex;
		font-weight: 500;
		min-height: unset;
	}

.page-dashboard .fr-table .fr-item {
		flex-direction: row;
		justify-content: space-between;
		min-height: 70px;
	}

	.page-dashboard .fr-table .fr-item > div {
		display: block;
		margin:0;
	}

	.page-dashboard .fr-table .fr-item .fr-name {
		min-width: 120px;
		max-width: 150px;
		margin-right: 20px;
		text-align: left;
		white-space: nowrap;
	}

	.page-dashboard .fr-table .fr-item .fr-pic {
		max-width: 80px;
		margin-right: 15px;
		text-align: left;
	}

	.page-dashboard .fr-table .fr-item .fr-cause {
		margin-right: 40px;
		text-align: left;
	}

	.page-dashboard .fr-table .fr-item .desc {
		text-align: left;
	}

	.page-dashboard .fr-table .fr-item .label {
		display: none;
	}

	.page-dashboard .fr-table .fr-item .fr-goal {
		min-width:180px;
		margin-right:20px;
	}

	.page-dashboard .fr-table .fr-item .fr-control {
		display:flex;
		flex-direction: row;
		justify-content: flex-end;
		margin:0;
		flex-grow:1;
	}

	.page-dashboard .fr-table .fr-item .fr-control .fr-action {
		text-align: center;
		margin-right:20px;
		margin-top:0;
	}

	.page-dashboard .fr-table .fr-item .fr-control .btn {
		margin:0;
	}

}

/*---------- Cause ----------*/

.page-cause .body-container {
	max-width: 1200px;
}

.page-cause .grid {
	margin: 150px auto;
	max-width: 1000px;
}

.page-cause .item {
	margin: 100px auto;
	padding-left: 250px;
}

.page-cause .tile {
	position:relative;
	background-color:#39406a;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	max-width:100%;
	padding:30px 40px 30px 150px;
	color:#fff;
}

.page-cause .tile h2{
	font-weight: 400;
	font-size: 1.7em;

}


.page-cause .icon {
	position:absolute;
	left: -280px;
	top: -70px;
	width: 400px;
	z-index:10;
	/*border-image: radial-gradient(red 69%, #0000 70%) 84.5%/50%;
  clip-path: polygon(-41% 0, 50% 91%, 141% 0);*/
}

.page-cause .label {
	position:absolute;
	bottom: 9%;
	text-align:center;
	color:#fff;
	font-size:12px;
	z-index:100;
}

.page-cause .label span {
	font-size:1.2em;
	font-weight:bold;
}


.page-cause .donate-cta .btn-v1{
	width:150px;
}

.page-cause .dual-button {
	display:flex;
	margin-top:10px;
}

.page-cause .dual-button .donate-cta:not(:first-child) {
	margin-left:20px;
}

.page-cause .donate-cta {
	display: inline-block;
	margin-top: 20px;
}


@media only screen and (max-width:767px) {
	.page-cause .grid {
		margin: 100px auto;
	}

	.page-cause .item {
		margin: 110px auto;
		padding: 0 15px;
	}

	.page-cause .tile {
		padding:40px 25px 25px;
		border-top: 80px solid #e89322;
		text-align: right;
	}

	.page-cause .icon {
	    position: absolute;
	    left: -20px;
	    top: -140px;
	    width: 44%;
	    min-width: 150px;
	    max-width: 20%;
	}

	.page-cause .icon img {
		margin-top:15px;
	}

	.page-cause .label {
		position:absolute;
		left: 120%;
		top:70px;
		white-space: nowrap;
		text-align:left;
		font-size:16px;
		transform: translate(0,0);
	}

	.page-cause .label span {
		font-size:1.5em;
	}

	.page-cause .donate-cta{
		display:flex;
		justify-content:flex-end;
	}

}


@media only screen and (max-width:480px) {
	.page-cause .grid {
		margin: 80px auto;
	}

	.page-cause .item {
		margin: 50px auto;
		padding: 0;
	}

	.page-cause .icon {
		left: -15px;
		min-width: 100px;
		max-width: 20%;
		top:-90px;
	}

	.page-cause .icon img {
		margin-top:10px;
	}

	.page-cause .tile {
		border-top: 60px solid #e89322;
		font-size:12px;
	}

	.page-cause .label {
		font-size:12px;
		bottom: 0;
		top: 38px;
	}

	.page-cause .donate-cta .btn-v1{
		width:100px;
		padding:6px 5px;
	}

}

@media only screen and (max-width:767px) {
	.page-cause .item .icon img {
		border: 6px solid #e89322;
		border-radius: 50%;
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.page-cause .dual-button {
		justify-content: flex-end;
	}

}

@media only screen and (min-width:768px) {
	.page-cause .item:nth-child(odd) {
		padding-left: 0px;
		padding-right: 250px;
	}

	.page-cause .item:nth-child(odd) .icon {
		left:unset;
		right: -240px;
	}

	.page-cause .item:nth-child(odd) .tile {
		padding:40px 170px 40px 40px;
	}

	.page-cause .item .icon {
		border:6px solid #e89322;
	}

	.page-cause .label {
		bottom: 0;
		left:unset;
		width:100%;
		background-color: #e89322;
		color:#fff;
		padding:4px 10px;
		font-size:12px;		
	}

}


.page-cause-detail .body-container {
	padding:20px;
	max-width: 1200px;
}

.page-cause-detail .profile {
	position: relative;
	margin: 80px auto 0;
	max-width:1000px;
}

.page-cause-detail .profile .tile {
	background-color: #39406a;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	max-width: 100%;
	padding: 40px 40px 40px 50%;
	color: #fff;
	font-weight:300;
}

.page-cause-detail .profile .tile h2 {
	font-weight: 500;
	font-size: 2.5em;
	margin-bottom: 0;
}

.page-cause-detail .profile .tile .label {
	font-size: 1.25em;
	margin-bottom: 0;
}

.page-cause-detail .profile .tile .label::after {
	content: "";
	border-bottom: 5px solid #e89322;
	width: 30px;
	display: block;
	margin: 15px 0;
}

.page-cause-detail .profile .tile .headline {
	font-size: 1.5em;
	margin-bottom:10px;
}

.page-cause-detail .profile .tile .donate-cta {
	display:block;
	margin-top: 20px;
}

.page-cause-detail .profile .tile .donate-cta .btn-v1 {
	width: 150px;
}

.page-cause-detail .profile .icon {
	position: absolute;
	left: 0%;
	top: -10%;
	width: calc(55vw - 80px);
	max-width: 450px !important;
	z-index: 10;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items:center;
	border: 8px solid #e89322;
	border-radius: 50%;
	overflow: hidden;
}

.page-cause-detail .profile .icon img {
	min-height:100%;
	min-width:100%;
	object-fit:cover;
}

@media only screen and (min-width:1200px) {
	.page-cause-detail .profile .icon {
		left: -10%;
	}
	.page-cause-detail .profile .tile {
		padding-left: 42%;
	}
}

.page-cause-detail .cause-editor {
	margin:50px auto;
	color: #333;
}

.page-cause-detail .cause-editor .video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

.page-cause-detail .cause-editor .video-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}

.page-cause-detail .cause-editor p {
	line-height: 1.8;
	letter-spacing: 1.5px;
	font-weight: 300;
}

.page-cause-detail .cause-editor h4 {
	line-height: 1.8;
	letter-spacing: 1.5px;
	font-weight: 400;
	color:#e93c2e;
	text-align:left;
}

.page-cause-detail .more-wrap {
	color: #eb4c3f;
	font-size: 16px;
	text-align: right;
}

.page-cause-detail .more-wrap a {
	color: inherit;
}

.page-cause-detail .other-cause {
	margin:60px auto;
}



.page-cause-detail .other-cause .grid {
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
}

.page-cause-detail .other-cause .item {
	margin: 25px auto;
	padding: 0;
	flex-basis: calc(100%/3 - 30px);
}

.page-cause-detail .other-cause .tile {
	position:relative;
	background-color:#39406a;
	background-image:url('/img/texture_bg.png');
	background-repeat: repeat;
	max-width:100%;
	color:#fff;
	padding:40px 25px 25px;
	border-top: 80px solid #e89322;
	text-align: left;
	font-size: 14px;
}

.page-cause-detail .other-cause .tile h2{
	font-weight: 400;
	font-size: 1.6em;
	min-height:100px;
	max-height:100px;
	overflow:hidden;
}


.page-cause-detail .other-cause .icon {
	position:absolute;
	right: -15px;
	min-width: 100px;
	max-width: 150px;
	top:-120px;
	z-index:101;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items:center;
	border: 4px solid #e89322;
	border-radius: 50%;
	overflow: hidden;
}

.page-cause-detail .other-cause .icon img {
	min-height:100%;
	min-width:100%;
	object-fit:cover;
}

.page-cause-detail .other-cause .label {
	position:absolute;
	color:#fff;
	z-index:100;
	left: 25px;
	white-space: nowrap;
	text-align:left;
	transform: translate(0,0);
	font-size:14px;
	top: -65px;
}

.page-cause-detail .other-cause .label span {
	font-size:1.5em;
	font-weight:bold;
}

.page-cause-detail .other-cause .donate-cta {
	display: flex;
	justify-content: flex-end;
	margin-top:20px;
}

.page-cause-detail .other-cause .donate-cta .btn-v1{
	width:120px;
	padding:6px 5px;
}

.page-cause-detail .other-cause .tile.invisible {
	display: inline-block;
	height: 0px;
	margin: 0;
}

@media only screen and (max-width:1059px) {
	.page-cause-detail .other-cause .item {
		flex-basis: calc(100%/2 - 30px);
	}
}

@media only screen and (max-width:768px) {
	.page-cause-detail .profile {
		padding: 0;
	}

	.page-cause-detail .profile .tile {
		padding: 200px 40px 40px 40px;
	}

	.page-cause-detail .profile .icon {
		width:280px;
		left: -10px;
		top: -90px;
	}

}

@media only screen and (max-width:767px) {
	.page-cause-detail .other-cause .item {
		flex-basis:100%;
	}

}


@media only screen and (max-width:480px) {
	.page-cause-detail .profile .tile {
		padding: 200px 20px 40px 20px;
	}

}

/*---------- Donate ----------*/

.page-donate .body-container{
	max-width: 900px;
}

.page-donate .donation-form .form-grid #field-receipt .field-wrapper .checkbox-wrapper{
	margin-bottom: 5px;
	display: inline-block;
	padding-right: 20px;
    vertical-align: middle;
}


.page-donate .donation-form .icon-container {
	position: relative;
	display: flex;
	justify-content: center;
	z-index: 999;
}

.page-donate .donation-form .icon {
	border-radius: 400px;
	overflow: hidden;
	width: 300px;
	height: 300px;
	border: 10px solid #e99222;
	position: relative;
}


.page-donate .donation-form .hearts {
  width: 81px;
  height: 98px;
  position: absolute;
  bottom: -30px;
	left: calc(50% - 150px);
}

.page-donate .donation-form .form-headerwrap {
	background-color: #363b61;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	color:#fff;
	margin-top: -100px;
	height: auto;
	padding-top: 58px;
	position:relative;
	z-index: 990;
}

.page-donate .donation-form .form-headerwrap::before {
	content: '';
	width: 100%;
	height: 300px;
	position: absolute;
	background-color: inherit;
	top: 0;
	transform: skew(0deg, -10deg) translateY(-75px);
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
}

.page-donate .donation-form .form-headerwrap.long::before {
	content: '';
	height: 820px;
}


.page-donate .donation-form .form-grid {
	background-color: #363b61;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	color:#fff;
	position: relative;
	z-index: 992;
	padding: 100px 20px 40px;
}

.page-donate .donation-form .form-grid .title {
	font-size: 30px;
	font-weight: 400;
}

.page-donate .donation-form .form-grid .field-wrapper  {
	margin-top: 40px;
}

.page-donate .donation-form .form-grid .field-wrapper label  {
	font-size: 18px;
	font-weight: 400;
}

.page-donate .donation-form .form-grid .field-wrapper .data-field input {
	color:#fff;
}

.page-donate .donation-form .form-grid .field-wrapper .data-field .border-wrap {
	background-color: #fff;
}

.page-donate .donation-form .form-grid .separator {
	margin:40px 0;
}

.page-donate .donation-form .form-grid .checkbox-wrapper .btn-mc .checkbox,
.page-donate .donation-form .form-grid .checkbox-wrapper .btn-mc.selected .checkbox::after,
.page-donate .donation-form .form-grid .checkbox-wrapper .btn-mc .selected .checkbox::after {
	border-color: #fff;
}

.page-donate .donation-form .form-grid .remarks {
	font-size: 14px;
	font-weight: 500;
}

.page-donate .donation-form .form-grid .donate-btn-wrapper {
	margin-top:40px;
	display:flex;
	justify-content: center;
}

.page-donate .donation-form .form-grid .donate-cta {
		width:100%;
		max-width:200px;
	}


.page-donate .intro {
	margin:40px 0;
}

.page-donate .donation-receipt-grid {
	margin:20px auto;
}

.page-donate .donation-receipt-grid .donation-receipt-head {
	background-color: #38416a;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	border-radius: 10px 10px 0 0;
	padding: 10px 20px;
	font-size: 20px;
	color: #fff;
}


.page-donate .donation-receipt-grid .donation-receipt-body {
	background-color: #f5f5f5;
	border-radius: 0 0 10px 10px;
	padding: 15px 20px 40px;
	color: #333;
}

.page-donate .donation-receipt-grid .donation-receipt-body h2 {
	color: #39406a;
}

.page-donate .donation-receipt-grid .donation-receipt-body .note {

}

@media only screen and (min-width:601px) {

	.page-donate .donation-receipt-grid .donation-receipt-head {
		padding: 10px 30px;
	}


	.page-donate .donation-receipt-grid .donation-receipt-body {
		padding: 15px 30px 40px;
	}

}

@media only screen and (min-width:769px) {

	.page-donate .donation-form .form-grid .donate-btn-wrapper {
		display:flex;
		justify-content: flex-start;
	}

	.page-donate .donation-form .form-grid .donate-cta {
		width:150px;
	}

	.page-donate .donation-form .form-grid {
		padding: 0px 40px 40px 280px;
		background-color:unset;
	}

	.page-donate .donation-form {
		min-height: 1000px;
		margin-top:-80px;
	}

	.page-donate .donation-form .form-headerwrap {
		padding-top:0;
	}

	.page-donate .donation-form .icon-container {
		justify-content: flex-start;
	}

	.page-donate .donation-form .icon {
		left:-50px;
		bottom:-50px;
	}

	.page-donate .donation-form .hearts {
		left:-50px;
		bottom:-80px;
	}

	.page-donate .donation-form .form-headerwrap::before {
	  width: calc(100% + 50px);
	  height: 635px;
	  top: 40px;
	  transform: skew(-5deg, -3deg) translateY(-100px);
	}

}


/*---------- Fund Raising ----------*/

.page-fund-raising .fund-raising-form h2 {
	text-align: center;
	margin-top:20px;
}

.page-fund-raising .fund-raising-form .cause-selection {
	margin-bottom: 40px;
}

.page-fund-raising .fund-raising-form .cause-item {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	padding:20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.page-fund-raising .fund-raising-form .cause-item div {
	
}

.page-fund-raising .fund-raising-form .cause-item .checkbox-wrapper {
	margin: 0 10px 0 0;
}

.page-fund-raising .fund-raising-form .cause-item .pic {
	max-width: 60px;
	margin-right: 15px;
}

.page-fund-raising .fund-raising-form .cause-item .name {
	margin-right: 20px;
	flex-grow: 1;
}

.page-fund-raising .fund-raising-form .cause-item .action {
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
	width:100%;
	margin-top:20px;
}

.page-fund-raising .fund-raising-form .section-body {
	display: flex;
	flex-direction: column;
}

.page-fund-raising .fund-raising-form .section-body textarea {
	width: 100%;
	height: 112px;
	padding:4px;
	font-family: inherit;
	line-height: 1.5;
	background-color: transparent;
	border: 1px solid #39406a;
	color: inherit;
	resize: none;
}

.page-fund-raising .fund-raising-form .section-body .field-wrapper.desc-text {
	margin-bottom:5px;
}

@media only screen and (min-width:768px) {

	.page-fund-raising .fund-raising-form .cause-selection {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.page-fund-raising .fund-raising-form .cause-item {
		flex-basis:calc(50% - 10px);
	}

	.page-fund-raising .fund-raising-form .section-body {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap:wrap;
	}

	.page-fund-raising .fund-raising-form .section-body .field-wrapper {
		flex-basis: calc(50% - 10px);
	}

	.page-fund-raising .fund-raising-form .section-body .field-wrapper.desc-text {
		flex-basis: 100%;
	}


}

@media only screen and (min-width:600px) {

	.page-fund-raising .fund-raising-form .cause-item .action {
		text-align: right;
		width:unset;
		margin-top:unset;
	}

}

.page-fund-raising .body-container {
	max-width: 1200px;
}

.page-fund-raising .fr-campaign .fr-donate {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	background-color: #40bcd6;
	color:#fff;
	margin-top:25px;
	border-top-right-radius: 50px;
}

.page-fund-raising .fr-campaign .fr-donate.yellow {background-color:#fac847 !important;}
.page-fund-raising .fr-campaign .fr-donate.orange {background-color:#ea3c30 !important;}
.page-fund-raising .fr-campaign .fr-donate.blue {background-color:#40bcd6 !important;}
.page-fund-raising .fr-campaign .fr-donate.red {background-color:#e52760 !important;}

.page-fund-raising .fr-campaign .fr-donate .fr-cause {
	display: flex;
	justify-content: space-between;
	position: relative;
}

.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-name {
	padding-right:110px;
}

.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-name span {
	font-size: 1.25em;
	font-weight: 400;
}

.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-pic {
	max-width: 120px;
	margin-left: 20px;
	border:4px solid #e99222;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	right: -25px;
	top: -40px;
	aspect-ratio:1/1;
}

.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-pic img {
	min-width:100%;
	min-height:100%;
	object-fit:cover;
}

.page-fund-raising .fr-campaign .fr-donate .fr-goal {
	margin-top:20px;
}

.page-fund-raising .fr-campaign .fr-donate .fr-goal .goal-value {
	font-weight: 500;
}

.page-fund-raising .fr-campaign .fr-donate .btn-wrapper {
	justify-content: center;
	margin-top:20px;
}

.page-fund-raising .fr-campaign .fr-donate .btn-wrapper .btn {
	max-width: 150px;
	margin-bottom:5px;
}


@media only screen and (min-width:600px) {

	.page-fund-raising .fr-campaign .fr-donate {
		border-top-right-radius: unset;
		min-height: 250px;
		padding:40px 40px 20px;
	}

	.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-name {
		padding-right: 220px;
	}

	.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-name span {
		font-size: 1.5em;
	}

	.page-fund-raising .fr-campaign .fr-donate .fr-cause .fr-pic {
		max-width: 200px;
		border:8px solid #e99222;
		top:-20px;
		right: -20px;
	}

	.page-fund-raising .fr-campaign .fr-donate .fr-goal {
		padding-right:220px;
	}

	.page-fund-raising .fr-campaign .fr-donate .btn-wrapper {
		justify-content: flex-start;
		margin-top:40px;
	}

	.page-fund-raising .fr-campaign .fr-donate .btn-wrapper .btn {
		margin: 0 0 5px;
	}


}


.page-fund-raising .fr-campaign .form-grid {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	background-color: #363b61;
	color:#fff;
}

.page-fund-raising .fr-campaign .form-grid .border-wrap {
	background-color: #fff;
}

/*.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc .checkbox:focus::after,  Only for Front-End Demo */
.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc.selected .checkbox::after,
.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc .selected .checkbox::after {
  border-bottom: var(--CheckborderWidth) solid #fff;
  border-right: var(--CheckborderWidth) solid #fff;
}

.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc .checkbox,
.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc.selected .checkbox::after,
.page-fund-raising .fr-campaign .form-grid .checkbox-wrapper .btn-mc .selected .checkbox::after {
	border-color: #fff;
}

.page-fund-raising .fr-campaign .form-grid .donate-btn-wrapper {
	position: relative;
	min-height: 50px;
	margin: 40px auto 0;
	width: 150px;
}

.page-fund-raising .fr-campaign .form-grid .title {
	font-size: 1.25em;
	font-weight: 400;
}

.page-fund-raising .fr-campaign .form-grid .field-wrapper {
  margin-top: 20px;
}

.page-fund-raising .fr-campaign .form-grid .donate-option {
	display: flex;
	justify-content: space-between;
	margin:20px 0 0;
}

.page-fund-raising .fr-campaign .form-grid .donate-option .item {
	border-radius: 10px;
	border: 1px #e89322 solid;
	color:#9f271c;
	background-color:#fff;
	flex-basis: 22%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.page-fund-raising .fr-campaign .form-grid .donate-option .item.selected {
	background-color:#9f271c;
	color:#fff;
}

.page-fund-raising .fr-campaign .form-grid textarea {
	width: 100%;
	height: 58px;
	padding:4px;
	font-family: inherit;
	line-height: 1.5;
	background-color: transparent;
	border: 1px solid #fff;
	color: inherit;
	resize: none;
}

.page-fund-raising .fr-campaign .form-grid .remarks {
  font-size: 14px;
  font-weight: 500;
  margin-bottom:20px;
}

.page-fund-raising .fr-campaign .form-grid .donate-receipt label {
	display: block;
}

.page-fund-raising .fr-campaign .form-grid .donate-receipt .checkbox-wrapper {
	margin-bottom: 5px;
	display: inline-block;
	padding-right: 20px;
	vertical-align: middle;
}

.page-fund-raising .fr-campaign .form-grid .donate-receipt {
	margin-bottom:0;
}


@media only screen and (min-width:600px) {

	.page-fund-raising .fr-campaign .form-grid {
		padding: 40px;
	}

	.page-fund-raising .fr-campaign .form-grid .donate-option {
		display: flex;
		justify-content: flex-start;
		margin:40px 0 0;
	}

	.page-fund-raising .fr-campaign .form-grid .donate-option .item {
		min-width: 100px;
		max-width: 100px;
		margin-right: 20px;
	}

}



.page-fund-raising .fr-campaign .description-wrapper {
	margin: 60px auto;
	padding: 0 50px;
	position: relative;
}


.page-fund-raising .fr-campaign .description-wrapper .text-msg {
	font-size: 1em;
	color: #333;
	letter-spacing: 1px;
}



.page-fund-raising .fr-campaign .description-wrapper .openquote {
  position: absolute;
  left: 12px;
  top: -15px;
  width: 25px;
}

.page-fund-raising .fr-campaign .description-wrapper .closequote {
  position: absolute;
  right: 12px;
  top: -15px;
  width: 25px;
}

@media only screen and (min-width:600px) {

	.page-fund-raising .fr-campaign .description-wrapper {
		padding: 0 100px;
	}


	.page-fund-raising .fr-campaign .description-wrapper .text-msg {
		font-size: 1.25em;
	}

	.page-fund-raising .fr-campaign .description-wrapper .openquote {
		position: absolute;
		left: 20px;
		top: -20px;
		width: 50px;
	}

	.page-fund-raising .fr-campaign .description-wrapper .closequote {
		position: absolute;
		right: 20px;
		top: -20px;
		width: 50px;
	}
}



.page-fund-raising .fr-campaign .donation-wrapper .donation-list {
	display:flex;
	flex-direction:column;
}

.page-fund-raising .fr-campaign .donation-item {
	display:flex;
	margin-top: 10px;
	margin-bottom:20px;
	border-radius:20px;
}

.page-fund-raising .fr-campaign .donation-item .left {
	min-width:150px;
	border-radius: 15px 0 0 15px;
	background-color: #39406a;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	color:#fff;
	padding:20px 15px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.page-fund-raising .fr-campaign .donation-item .left .date {
	font-weight:300;
	font-size:1em;
	margin-bottom:10px;
}

.page-fund-raising .fr-campaign .donation-item .left .amount {
	display: flex;
	align-items: center;
	font-weight:400;
	font-size:1.25em;
}

.page-fund-raising .fr-campaign .donation-item .left .heart-wrapper {
	position:relative;
	width:40px;
	margin-right:5px
}

.page-fund-raising .fr-campaign .donation-item .left .heart-wrapper span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 400;
	font-size: 13px;
	white-space: nowrap;
}

.page-fund-raising .fr-campaign .donation-item .right {
	flex-grow:1;
	border-radius: 0 15px 15px 0;
	background-color: #eee;
	color:#333;
	font-size:1em;
	font-weight:300;
	letter-spacing:1px;
	padding:20px 15px;
	display:flex;
	align-items:center;
}


@media only screen and (min-width:600px) {

	.page-fund-raising .fr-campaign .donation-item .left {
		min-width:200px;
		padding:20px;
	}

	.page-fund-raising .fr-campaign .donation-item .right {
		font-size:1.25em;
		padding:20px 30px;
	}

	.page-fund-raising .fr-campaign .donation-item .left .heart-wrapper {
		width:50px;
		margin-right:10px
	}

	.page-fund-raising .fr-campaign .donation-item .left .heart-wrapper span {
		font-size: 14px;
	}


}

.page-fund-raising.page-fr-list .body-container {
	max-width: 1400px;
	padding-bottom: 80px;
}

.page-fund-raising.page-fr-list .intro {
	text-align: center;
	color:#39406a;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 1.5em;
	margin-bottom: 20px;
}

.page-fund-raising .fr-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.page-fund-raising .fr-list .fr-item {
	background-color: #39406a;
	background-image: url('/img/texture_bg.png');
	background-repeat: repeat;
	color:#fff;
	padding:20px;
	display:flex;
	flex-direction:column;
	position: relative;
	margin-top: 20px;
	flex-basis: 100%;
}


.page-fund-raising .fr-list .fr-item .fr-item-head {
	display: flex;
	align-items: center;
}

.page-fund-raising .fr-list .fr-item .fr-pic {
	max-width: 60px;
	border: 2px solid #e99222;
	border-radius: 50%;
	overflow: hidden;
}

.page-fund-raising .fr-list .fr-item .fr-pic img {
	object-fit: cover;
  aspect-ratio: 1/1;
}


.page-fund-raising .fr-list .fr-item h3 {
	text-decoration: none;
	font-size: 1.5em;
	margin-bottom: 20px;
	min-height:75px;
}

.page-fund-raising .fr-list .fr-item .fr-cause {
	margin-left:15px;
}

.page-fund-raising .fr-list .fr-item .fr-goal {
	margin-top:20px;
}

.page-fund-raising .fr-list .fr-item .fr-goal .status-bar {
	display: flex;
	align-items: center;
}

.page-fund-raising .fr-list .fr-item .fr-goal .status-bar .bar {
	height: 12px;
}

.page-fund-raising .fr-list .fr-item .fr-goal .status-bar .fr-percent {
	font-size: 1.75em;
	font-weight: 300;
}

.page-fund-raising .fr-list .fr-item .btn-wrapper {
	margin-top:20px;
}

.page-fund-raising .fr-list .fr-item .btn-wrapper .btn {
	max-width: 150px;
	margin-bottom: 5px;
}

@media only screen and (min-width:600px) {
	.page-fund-raising .fr-list .fr-item {
		flex-basis: calc(50% - 10px);
	}
}

@media only screen and (min-width:1000px) {

	.page-fund-raising .fr-list .fr-item {
		flex-basis: calc(33% - 10px);
	}

}

@media only screen and (min-width:1200px) {

	.page-fund-raising .fr-list .fr-item {
		flex-basis: calc(25% - 10px);
	}

	.page-fund-raising .fr-list-pastevent .fr-item {
		flex-basis: calc(33% - 10px);
	}

}

.page-fund-raising .fr-item.yellow {background-color:#fac847 !important;}
.page-fund-raising .fr-item.orange {background-color:#ea3c30 !important;}
.page-fund-raising .fr-item.blue {background-color:#40bcd6 !important;}
.page-fund-raising .fr-item.red {background-color:#e52760 !important;}



/*---------- Homepage ----------*/

.page-home .promo-bar {
	background-color: #39406a;
  background-image: url('/img/texture_bg.png');
  background-repeat: repeat;
  max-width: 100%;
  color:#fff;
  display: flex;
  justify-content: center;
  padding:15px 20px;
}

.page-home .promo-bar .promo-msg {
	max-width: 1000px;
	text-align: center;
	font-weight: 400;
}


.page-home .banner-container .banner-desc {
	background-color: #e89322;
	padding:25px 20px;
	color: #fff;
	display: flex;
	justify-content: center;
}

.page-home .banner-container .banner-desc #counter-grid {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.page-home .banner-container .banner-desc .counter-label {
	font-weight: 500;
	white-space: nowrap;
}

.page-home .banner-container .banner-desc .counter-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-home .banner-container .banner-desc .counter-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	line-height: 1.25;
}

.page-home .banner-container .banner-desc .counter-info .digit {
	font-size: 2.5em;
}

.page-home .banner-container .banner-desc .counter-separator {
	margin:0 25px;
	transform: scale(2,4);
}

.page-home .banner-container .banner-cta .btn-v1 {
  min-width:150px;
  max-width: 200px;
  margin-top:20px;
  font-size: 1em;
  font-weight: 400;
 }


 @media only screen and (min-width:768px) {

 	.page-home .banner-container .banner-desc {
 		padding:25px 40px;
 	}

 	.page-home .banner-container .banner-desc #counter-grid {
		display: flex;
		flex-direction: row;
		justify-content: center;
		max-width: 800px;
		flex:1;
	}

	.page-home .banner-container .banner-desc .counter-wrap {
		margin:-10px 5vw 0;
	}

	.page-home .banner-container .banner-cta .btn-v1 {
	  margin-top:0px;
	 }

 }

.page-home .container {
	max-width: 800px;
	margin:0 auto;
}

.page-home h1 {
	margin-top:40px;
}

.page-home .information-wrap {
	color: white;
  padding-top: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
}


.page-home .information-wrap a {
  margin: 10px;
  min-width: 120px;
  max-width: 150px;
}

.page-home .information-wrap .info-item {
	border-radius: 50%;
	width:100%;
  padding-bottom:100%;
  overflow: hidden;
  font-size: 18px;
  position: relative;
}


.page-home .information-wrap a:nth-child(2n) .info-item {
  background-color: #C7563C;
}

.page-home .information-wrap a:nth-child(2n+1) .info-item {
  background-color: #32A9C6;
}

.page-home .information-wrap .info-item .bg {
  background-image: url('../../assets/img/racing.png');
  background-size: cover;
  position: absolute;
  opacity: 0.15;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-home .information-wrap .info-item .label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  white-space: nowrap;
  font-size: 0.875em;
}

.page-home .intro .intro-desc {
	font-weight: 300;
  line-height: 1.8;
  text-align: center;
}

.page-home .news-photo-grid .news-list,
.page-home .news-photo-grid .photo-list {
	margin-top:20px;
}

.page-home .news-photo-grid .photo-list {
	padding: 15px;
  background-color: #f5f5f5;
  border-radius: 15px;
}

.page-home .news-grid .news-item {
  margin-bottom: 25px;
  border-radius: 10px;
  overflow: hidden;
}

.page-home .news-grid .news-item .news-title {
	color: white;
  padding: 10px 15px;
  font-size: 20px;
  font-weight: 400;
}

.page-home .news-grid .news-item:nth-child(2n) .news-title {
  background: #eb4c3f;
 }

.page-home .news-grid .news-item:nth-child(2n+1) .news-title {
  background: #363b61;
 }

.page-home .news-grid .news-item .news-body {
	background-color: #f5f5f5;
  padding: 20px 15px;
  position: relative;
}

.page-home .news-grid .news-item .news-thumbnail {
	padding-bottom: 10px;
}

.page-home .news-grid .news-item .news-content {
	font-weight: 400;
}

.page-home .news-grid .news-item .news-content br {
	display: block;
	margin-bottom: 1em;
}

.page-home .news-grid .news-item .news-content a {
	color:#0066cc;
}

.page-home .news-grid .news-item .news-date {
	text-align: right;
	font-weight: 500;
	font-size: 0.875em;
	margin-top:16px;
}

.page-home .news-grid .news-more{
	color:#eb4c3f;
	font-weight: 500;
	margin-top: -15px;
  text-align: right;
}

.page-home .photo-grid .photo-more {
	color:#eb4c3f;
	font-weight: 500;
	margin-top: 15px;
  text-align: right;
}


 @media only screen and (max-width:767px) {
 	.page-home .news-list .news-item:not(:first-child) {
 		display: none;
 	}

 	.page-home .photo-grid .photo-list {
 		position: relative;
		overflow: hidden;

 	}

 	.page-home .slick-dots {
 		display: flex;
	  justify-content: space-between;
	  font-size: 1.5em;
	  max-width: 300px;
  	margin: 10px auto 0;
  	padding:0;
  	list-style-type: none;
 	}

 	.page-home .slick-dots li {
    padding:0;
    margin: 0 4px;
	}
 		
	.page-home .slick-dots li button {
		display: block;
		width: 10px;
		height: 10px;
		padding: 0;
		border: none;
		border-radius: 100%;
		background-color: #aaa;
		text-indent: -9999px;
		cursor: pointer;
	}

	.page-home .slick-dots li.slick-active button {
		background-color: #666;
	}


 }

 @media only screen and (min-width:768px) {

 	.page-home .news-photo-grid {
		display: flex;
		justify-content: space-between;
	}

	.page-home .news-photo-grid h1 {
		font-size: 1.8em;
	}

	.page-home .news-photo-grid .news-grid {
		flex:1;
		margin-right:25px;
	}

	.page-home .news-photo-grid .photo-grid {
		flex-basis:30%;
	}

	.page-home .news-list .news-item:not(:first-child) .news-body {
		display: flex;
		flex-direction: row-reverse;
	}

	.page-home .news-list .news-item:not(:first-child) .news-content {
		margin-right: 25px;
	}

	.page-home .news-list .news-item:not(:first-child) .news-thumbnail {
		max-width: 150px;
		margin-top:-40px;
		padding-bottom:40px;
	}

	.page-home .news-list .news-item:not(:first-child) .news-date {
		position: absolute;
		bottom: 20px;
	}

	.page-home .news-photo-grid .photo-list {
		padding: 2px 15px;
	}

	.page-home .photo-list .photo-slider img {
		margin:15px 0;
		object-fit: cover;
		overflow: hidden;
    aspect-ratio: 3/2;
	}

}


.page-home .about .about-grid {
	margin-top:25px;
}

.page-home .about .about-icon {
	float:left;
	max-width: 35%;
	margin-right: 20px;
}

 @media only screen and (max-width:767px) {
 	.page-home .about .about-grid {
		min-height: 300px;
	}
 }

 @media only screen and (min-width:768px) {
 	.page-home .about {
		position: relative;
		padding-top:10px;
		padding-left:280px;
		margin:40px auto 120px;
	}

	.page-home .about .about-icon {
		float:unset;
		max-width: 250px;
		position:absolute;
		left:0;
		top:0;
	}

}


.page-home .shortcut-grid {
	margin-top:80px;
}

.page-home .shortcut-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.page-home .shortcut-list .shortcut-item {
	position: relative;
	margin-bottom: 40px;
	max-width: calc(50% - 10px);
}

.page-home .shortcut-list .shortcut-item .thumbnail img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

.page-home .shortcut-list .shortcut-item .title {
	font-size:18px;
	font-weight: 500;
	padding-left: 30px;
	margin-top:4px;
}

.page-home .shortcut-list .shortcut-item .line {
	position: absolute;
  bottom: -5px;
  left: 15px;
  width: 2px;
  height: 50px;
  background-color: #eb4c3f;
}


 @media only screen and (min-width:768px) {

 	.page-home .shortcut-list .shortcut-item {
		max-width: calc(100%/3 - 15px);
	}

 }


/*---------- Cert ----------*/

.page-dashboard .cert-table {
	display: flex;
	flex-direction: column;
	margin-top:25px;
}

.page-dashboard .cert-table .cert-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid #39406a;
	padding:10px 10px;
	min-height: 40px;
}

.page-dashboard .cert-table .cert-item:last-child {
	border-bottom: 1px solid #39406a;
}

.page-dashboard .cert-table .cert-item > div {
	margin-top:10px;
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.page-dashboard .cert-table .cert-item .label {
	font-weight: 500;
	min-width: 120px;
	margin-right: 20px;
	text-align: left;
}

.page-dashboard .cert-table .cert-item .desc {
	text-align: right;
}


.page-dashboard .cert-table .cert-item .cert-control {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	margin:20px 0 10px;
}

.page-dashboard .cert-table .cert-item .cert-action {
	color:#9f271c;
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-top:10px;
}

.page-dashboard .cert-table .cert-item .cert-control .btn {
	margin:0 auto;
	max-width: unset;
	flex: unset;
	min-width:150px;
}

.page-dashboard .cert-table .cert-item .cert-control .btn.small {
	min-width:150px;
}

.page-dashboard .cert-table .cert-item.head{
	display: none;
}

.page-dashboard .cert-item .desc span {
	font-family:arial;
	font-size:0.75em;
	font-weight: 900;
	vertical-align: top;
	padding-left: 1px;
	color:#0000f2;
}


@media only screen and (max-width:767px) {
	.page-dashboard .cert-table .cert-item .cert-control {
		flex-direction: column;
	}
}

@media only screen and (min-width:768px) {
	.page-dashboard .cert-table .cert-item.head{
		display: flex;
		font-weight: 500;
		min-height: unset;
	}

	.page-dashboard .cert-table .cert-item {
		flex-direction: row;
		justify-content: space-between;
		min-height: 70px;
	}

	.page-dashboard .cert-table .cert-item > div {
		display: block;
		margin:0;
	}

	.page-dashboard .cert-table .cert-item .cert-bib {
		min-width: 80px;
		max-width: 100px;
		margin-right: 20px;
	}

	.page-dashboard .cert-table .cert-item .cert-cate {
		min-width: 100px;
		max-width: 160px;
		margin-right: 20px;
	}

	.page-dashboard .cert-table .cert-item .cert-team {
		min-width: 80px;
		max-width: 260px;
		margin-right: 20px;
	}

	.page-dashboard .cert-table .cert-item .cert-name {
		min-width: 100px;
		margin-right: 20px;
	}

	.page-dashboard .cert-table .cert-item .cert-time {
		min-width: 100px;
		max-width: 120px;
		margin-right: 20px;
	}

	.page-dashboard .cert-table .cert-item .desc {
		text-align: left;
	}

	.page-dashboard .cert-table .cert-item .label {
		display: none;
	}

	.page-dashboard .cert-table .cert-item .cert-control {
		min-width: 120px;
		display:flex;
		flex-direction: row;
		justify-content: flex-end;
		margin:0;
	}

	.page-dashboard .cert-table .cert-item .cert-control .cert-action {
		text-align: center;
		margin-right:20px;
		margin-top:0;
	}

	.page-dashboard .cert-table .cert-item .cert-control .btn {
		margin:0;
	}

}

.ENG .page-dashboard .cert-table .cert-item .cert-control {min-width: 180px;}
.ENG .page-dashboard .cert-table .cert-item .cert-control .btn {min-width: 160px;}



/*---------- Past Events ----------*/

.past-event-grid {
	
}


.past-event-grid .item {
	position:relative;
	display:flex;
	justify-content:center;
	align-items: flex-end;
	margin:40px auto;
}

.past-event-grid .item:nth-child(even) {
	flex-direction:row-reverse;
}


.past-event-grid .item .thumbnail {
	min-width:120px;
	width:25%;
	max-width:220px;
	border:4px solid #e89322;;
	margin-bottom: -10px;
}

.past-event-grid .item .tile {
	background-color: #39406a;
	color:#fff;
	padding:25px;
	min-width: 500px;
	width: 50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.past-event-grid .item .tile .dual-button,
.past-event-grid .item .tile .trio-button{
	display: flex;
	margin-top: 10px;
}

.past-event-grid .item .tile .dual-button .btn-v1 {
	width:150px;
}

.past-event-grid .item .tile .dual-button a:not(:first-child) {
	margin-left: 20px;
}

.past-event-grid .item .tile .trio-button .btn-pair {
	white-space: nowrap;
  width: unset;
  cursor:default;
}

.past-event-grid .item .tile .trio-button .btn-pair {
	margin-left:20px;
}

.past-event-grid .item .tile .trio-button .btn-v1 {
	padding: 5px 25px;
}

.past-event-grid .item .tile .trio-button .btn-v1 a {
	text-decoration:underline;
	text-underline-offset: 2px;
}


@media only screen and (max-width:767px) {

	.past-event-grid .item {
		align-items: flex-start;
		margin-bottom:60px;
	}

	.past-event-grid .item .thumbnail {
		width:28%;
		position:absolute;
		left: -2%;
		top: -8%;
	}

	.past-event-grid .item .tile {
		min-width:unset;
		width:100%;
		max-width: 100%;
	}

	.past-event-grid .item .tile h2 {
		min-height:100px;
		padding-left:28%;
	}

	.past-event-grid .item .tile .dual-button,
	.past-event-grid .item .tile .trio-button{
		justify-content:flex-end;
	}

}


@media only screen and (max-width:580px) {

	.past-event-grid .item .thumbnail {
		min-width: 120px;
		width: 120px;
		left: -2%;
		top: -8%;
	}

	.past-event-grid .item .tile {
		padding:20px;
		margin-left:10px;
	}


	.past-event-grid .item .tile h2 {
		min-height:100px;
		padding-left:110px;
		font-size:1.25em;
	}

	
	.past-event-grid .item .tile .dual-button .btn-v1 {
		padding: 6px 5px;
		font-size:1em;
		width:125px;
	}

	.past-event-grid .item .tile .trio-button {
		flex-wrap:wrap;
		margin-bottom:-10px;
	}

	.past-event-grid .item .tile .trio-button .btn-v1 {
		font-size:1em;
		margin-bottom:10px;
	}

}

.how-to h3{
	font-size: 1.5em;
}

.how-to a {
	word-break: break-word;
}

.how-to .tab-note, .how-to .tab-note li, .how-to .tab-note table, .how-to .tab-note p, .how-to .btn-v1.orange{
	font-size: 16px;
}

.how-to .tab-note table td:not(:first-child){
	border-left: 1px solid #f5f5f5;
}

.how-to .tab-note table th:not(:first-child){
	border-left: 1px solid white;
}

.how-to .tab-note .table-wrapper{
	margin: 0; 
	padding: 0;
}

.how-to .tab-note .table-wrapper td:first-child, .how-to .tab-note .table-wrapper td:last-child{
	min-width: 100px;
}

.text-center{
	text-align: center;
}

.pl-20{
	padding-left: 20px;
}

.mt-20{
	margin-top: 20px;
}

.how-to .tab-note{
	margin-top: 30px !important;
    border-top: 1px solid #d5d5d5;
    padding-top: 30px;
}

.how-to .tab-note:first-child{
	margin-top: 0 !important;
	border-top: none;
	padding-top: 0;
}

.how-to .btn-v1.orange{
	padding: 5px 10px;
}