:root{
    --color: #0083cb;        
}

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

input[type='number'] {-moz-appearance:textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}

/* ---------------------------------------------------------------------- */

body {
  	color: #000;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
	letter-spacing: 0.5px;
	padding: 0; 
	margin: 0;	
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.wrapper{
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #f8fafb;
	z-index: 1;
	transition: transform .5s ease-in-out;
}

.wrapper_cover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.75);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}
ul, li{
    list-style: none;
}
a{
    text-decoration: none;
    transition: 0.5s;
}
a:hover, a:focus , a:visited{
    text-decoration: none;
    outline: none;	
}
p{margin-bottom: 15px;}
p a{text-decoration: underline; }
img{width: 100%;}
hr{border-top: 1px solid #aacde5; border-bottom: none; border-left: none; border-right: none; margin: 50px 0;}

.container{
	position: relative;
	width: 96%;
	margin: auto;
	padding: 60px 0;
	max-width: 1600px;
}
.web{display: block!important;}
.mo{display: none!important;}

/* ---------------------------------  header  ------------------------------------- */
header{
	background: #283a60;
	z-index: 110;
	position: relative;
}
header .container{
	max-width: inherit;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 15px 30px 15px 40px;
}
header .logo{
	width: 170px;
	display: flex;
}
/* ---------------------------------  header - fixed TOP  ------------------------------------- */
header.navbar-fixed-top{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
}
header.navbar-fixed-top .container{
	padding: 6px 30px;
}
header.navbar-fixed-top .logo{
	width: 140px;
}

/* ---------------------------------  menu_btu  ------------------------------------- */
.bt-menu {
  display: flex;
	align-items: center;
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 35px;
	transform: translateY(-50%);
	visibility: hidden;
	opacity: 0;
}
.ico-menu {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
}
.has-tablet{
	padding-left: 5px;
	font-weight: 300;
}
.ico-menu .bar {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
}
.ico-menu .bar:nth-child(1) { top: 0;}
.ico-menu .bar:nth-child(2) { top: 8px;}
.ico-menu .bar:nth-child(3) { top: 16px;}

.ico-menu .bar:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fbb166;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    transition: .3s;
}
.bt-menu:hover .ico-menu .bar:after {
	left: 0;
}
.ico-menu .bar:nth-child(1):after {
    transition-delay: .1s;
}
.ico-menu .bar:nth-child(2):after {
    transition-delay: .2s;
}
.ico-menu .bar:nth-child(3):after {
    transition-delay: .3s;
}
/* ---------------------------------  menu_btu - end  ------------------------------------- */

/* ---------------------------------  nav  ------------------------------------- */
.nav-main{
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}
.menu_link_sub{
	pointer-events: none;
}

.nav-main ul{
	display: flex;
	padding: 0;
	margin: 0 0px 0 0;
	align-items: center;
}
.nav-main ul li{
	position: relative;
	transition: 0.3s ease-in-out;
	margin-right: 35px;
	padding: 10px 0
}
.nav-main ul li:nth-child(5){
	margin-right: 10px;
}
.nav-main ul li:nth-child(6){
	margin-right: 10px;
}
.nav-main ul li a{
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
}
.nav-main ul li:hover a{
	color: #fff;
}
.nav-main ul li a i{
	padding: 0px 3px;
	font-size: 0.9rem;
	transition: .2s;
	display: flex;
	margin-top: 3px;
}
.nav-main ul li:hover a i{
	transform: rotate(180deg);
}

.nav-main ul li ul{
	display: block;
	min-width: 240px;
	background: #fff;	
	padding: 0;
	position: absolute;
	transform-origin: top;
	transition: all 0.3s ease-in-out;
	transform: translateY(30px);
	opacity: 0;
	visibility: hidden;
	z-index: 101;
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	overflow: hidden;
	border-radius: 2px;
}
.nav-main ul li:hover ul{
	opacity: 1;
	visibility: visible;
	transform: translateY(10px);
}
.nav-main ul li ul li{
	padding: 0;
	margin: 0;
	width: 100%;
}
.nav-main ul li ul li a{
	padding: 15px 15px;
	display: block;
	color: #000;
	font-size: 16px;
}
.nav-main ul li:hover ul li a{
	color: #000;
}
.nav-main ul li ul li a:hover{
	color: var(--color);
	background: #f3f3f3;
}
/* ---------------------------------  nav - end  ------------------------------------- */

/* ---------------------------------  close-btu  ------------------------------------- */

.nav-main .bt-close {
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: all .3s ease-in-out;
	width: 30px;
	height: 30px;
	position: relative;
}
.nav-main .bt-close::before, .nav-main .bt-close::after{
	content: "";
    position: absolute;
    top: 15px;
    right: 0px;
    width: 30px;
    height: 3px;
    background: #fff;
    transform: rotate(45deg);
    transition: all .3s ease-in-out;
}
.nav-main .bt-close:after {
    transform: rotate(-45deg);
}
.nav-main .bt-close:hover{
	transform:  rotate(90deg);	
}
.nav-main .pull-right:hover .bt-close::before, .nav-main .pull-right:hover .bt-close::after{
	background: #fff;
}

/* -------------------------------  close-btu - end  ----------------------------------- */


/* ---------------------------------  nav_header  ------------------------------------- */
.nav_header{ 
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nav_header .pull-right{
	display: none;
}
.lang{
	display: flex;
}
.lang a{
	font-size: 0.8rem;
	padding: 5px 6px 5px 5px;
	margin-right: 2px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	display: flex;
	align-items: center;
}
.lang a i{
	font-size: 0.5rem;
	vertical-align: middle;
	transition: 0.5s;
	display: flex;
	padding-top: 2px;
}
.lang a:hover i{
	transform: translateX(2px);
}
.pull-left{
	margin-left: 0px;
}

/* -------------------------------  nav_heade - end  ----------------------------------- */

/* -------------------------------  gen_btu  ----------------------------------- */
.gen_btu{
	padding: 12px 17px;
	text-align: center;
	background: #fbb166;
	color: #000;
	border-radius: 5px;
	line-height: 1;
	font-weight: 700;
}
.gen_btu:hover{
	background: #ffff87;
	color: #000;
}
.nav-main ul li a.gen_btu{
	display: block;
	color: #000;
}
.nav-main ul li a.gen_btu:hover{
	color: #000;
}
.nav-main ul li a.gen_btu i{
	font-size: 1rem;
	padding-left: 0px;
}
.don_btu{
	background: #8fd2e6;
}
.don_btu:hover{
	background: #aae8fa;
}

.nav-main ul li.btu_li{
	margin-right: 5px;
}

/* -------------------------------  gen_btu - end  ----------------------------------- */




/* -------------------------------  Hero  ----------------------------------- */
.hero{
	position: relative;
	overflow: hidden;
background: #283a60;
}
.hero .container{
	width: 95%;
	max-width: 1600px;
	margin: 0px auto;
	padding: 10px 0 0 ;
}

.kv_top{
	display: flex;
}

.enrol_now{
	width: 50%;
	max-width: 380px;
	position: absolute;
	bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
}


/* -------------------------------  Hero - end  ----------------------------------- */

.sec_intro{
	background: #283a60;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.sec_intro .intro p{ text-align: center; font-weight: 400; padding: 0 20px; max-width: 990px;}
.sec_intro .container{padding: 60px 0px 120px;}
.footstep_bg{
	background: center center url("../images/footstep.svg") repeat-y;
	opacity: 0.08;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.footstep_2_bg{
	background: center center url("../images/footstep_2.svg") repeat-y;
	opacity: 0.05;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.intro .container{
	position: relative;
}
.spca_hills_logo{
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 42%;
	max-width: 240px;
}
.intro{
	font-size: 18px;
	font-weight: 600;
	margin-top: 40px;
}
.intro h1 {
  font-size: 55px;
  font-weight: 900;
  line-height: 1.2;
  margin: 5px auto 30px;
  color: #fbb166;
  letter-spacing: -0.5px;
  text-align: center;
	max-width: 620px;
}
.intro h2{
	font-size: 25px;
  line-height: 1.6;
  margin: 40px auto 40px;
  letter-spacing: 0px;
  text-align: center;
  max-width: 600px;
  font-weight: 900;
}
.intro h3{
  font-weight: 500;
  margin: 10px auto 45px;
  font-size: 25px;
  color: #fff;
  letter-spacing: 0px;
  text-align: center;
  max-width: 600px;
}
.intro h3 u{
	font-weight: 700;
	color: #fcb062;
	display: inline-block;
}
.intro p a{
	text-decoration: underline;
	color: #fcb062;
	font-weight: 700;
	display: inline-block;
}
.intro p a:hover{
	color: #fff;
	text-decoration: none;
}
.intro p{
	margin: 15px auto;
  letter-spacing: 0px;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
	max-width: 980px;
}
.intro p b{
	font-weight: 900;
}

.intro h1.into_t2{
	font-size: 35px;
  margin-bottom: 50px;
  color: #fbb166;
  font-weight: 900;
  max-width: 750px;
	line-height: 1.4;
}
.intro ul{ padding-left: 25px; margin-bottom: 30px;}
.intro ul li{ list-style: disc; margin: 10px 0; line-height: 1.3;}

.theme_row{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5vw;
	flex-wrap: wrap;
	margin-top: 40px;
}
.theme_row .col_3{
	flex: 0 0 30%;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
	margin-bottom: 40px;
}
.theme_img_bg{
	background: center center url("../images/theme_p1.jpg") no-repeat;
  background-size: cover;
  width: 100%;
	max-width: 320px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theme_img_bg_2{
	background: center center url("../images/theme_p2.jpg") no-repeat;
	background-size: cover;
}
.theme_img_bg_3{
	background: center center url("../images/theme_p3.jpg") no-repeat;
	background-size: cover;
}
.theme_row .col_3 h3{
	padding: 0 3.5vw;
  font-size: 22px;
  line-height: 1.5;
}

.hi_txt{
	color: #fcb062; display: inline-block;
}
.headline{
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: -1px;
	margin: 30px 0;
	line-height: 1.4;
}

.content_col{
	margin: 150px 0;
	text-align: center;
}
.content_col:last-child{
	margin-bottom: 0px;
}

.callforaction{
	margin: 60px auto 60px;
  max-width: 1000px;
}

.callforaction .gen_btu{
	font-size: 20px;
	padding: 25px 30px;
	display: block;
	cursor: pointer;
	color: #000;
}
.callforaction .f_act_area .gen_btu{ padding: 30px;}

.callforaction.enrol_col{
	text-align: center;
	position: relative;
}
.callforaction.enrol_col .gen_btu{
	display: inline-block;
}

.row{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.col_2{
	flex: 0 0 50%;
}

.sec_intro .col_2{
	flex: 0 0 48%;
}

.sub_headline{
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 25px;
	line-height: 1.3;
	text-align: center;
}
h2.sub_headline{
	color: #fff;
}

.profile_area .sub_headline{
	color: #fff;
}

.sec_rank h2.sub_headline{
	color: #fff;
}
.sec_enrol_home h2.sub_headline{
	color: #fff;
}
.sec_enrol_home .dis_flex, .sec_enrol_home .dis_flex a{
	color: #fff;
}

.sec_gift{
	text-align: center;
	color: #000;
	background: rgba(255,255,255,0.8);
	position: relative;
}
.sec_gift .sub_headline{
	color: #195b8e;
}
.gift_row{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 100px;
}
.stat_gift{
	flex: 0 0 50%;
	min-width: 200px;
	padding: 0 25px;
	margin: 15px 0;
	max-width: 520px;
}
.gift_img{
	width: 100%;
	padding: 0px 0px;
	border-radius: 3px;
}
.stat_gift p{
	font-size: 18px;
	margin-top: 2px;
}

.f_act_area{
	display: flex;
	justify-content: center;
	column-gap: 20px;
}
.f_act_area a.col_en_2{
	overflow: hidden;
	border-radius: 10px;
}
.f_act_area a.col_en_2 .f_img img{
	transition: 0.5s;
}
.f_act_area a.col_en_2:hover .f_img img{
	transform: scale(1.1);
}
.f_act_area .gen_btu{
  background: #fff;
  color: #094a7d;
	font-size: 22px;
	font-weight: 900;
}
.f_act_area .gen_btu:visited, .f_act_area .gen_btu:focus{
	color: #000;
}
.f_act_area .f_img{
	display: flex;
	overflow: hidden;
}
.f_act_area .gen_btu{
	border-radius: 0px;
}

.small_t{
	font-size: 14px;
}

.p_fun_r{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 25px 0;
}
.line_t{
	flex: 0 0 18%;
	background: none;
	padding: 25px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
}
.line_t:visited, .line_t:hover, .line_t:focus{
	color: #fff;
}
a.line_t .team_photo{
	transition: 0.5s;
	width: 100%;
  height: fit-content;
  aspect-ratio: 1;
  max-width: 200px;
}
a.line_t:hover .team_photo{
	transform: scale(1.1);
}

.sec_rank{
	position: relative;
	text-align: center;
	margin: 40px 0;
}
.sec_rank .container{
	width: 90%;
	padding-bottom: 20px;
}
.metal_icon {
  width: 25%;
  margin: 0px auto 0;
	display: flex;
}
.p_fun_r .line_t h3{
  margin-top: 10px;
  padding: 0 20px;
  margin-bottom: 0px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}
.ranking {
  margin: 10px 0 5px;
  font-size: 25px;
  font-weight: 900;
	line-height: 1;
	color: #fcb062;
}
.p_fun_r .line_t p {
  margin: 10px 0 0;
	font-weight: 400;
	font-size: 13px;
	opacity: 0.7;
}
.p_fun_r .line_t h2 {
  margin: 0px 0 5px;
  padding: 0 25px;
  font-size: 24px;
	line-height: 1.2;
}
.p_fun_r .line_t h2 small{
	font-size: 60%;	
}

.footer_enrol{
	position: relative;
	background: rgba(66, 122, 161, 0.8);
}
.inner .footer_enrol{
	background: linear-gradient(0deg, rgba(16,74,141,0.3) 50%, rgba(16,74,141,0) 100%);
}
.footer_enrol .container{
	padding-bottom: 220px;
	padding-top: 100px
}
.col_en_2{
	flex: 0 0 45%;
	flex-grow: 1;
}
.footer_enrol .f_act_area{
	margin-top: 30px;
}

.f_act_area .gen_btu small {
  font-weight: 400;
  font-size: 65%;
}
.dis_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  padding: 0 15px 0px;
  font-size: 1.1em;
  line-height: 1.6em;
	color: #fff;
}
.dis_flex i {
  flex: 0 0 80px;
  margin-right: 10px;
}
.dis_flex a {
  text-decoration: underline;
	color: #fff;
}
.dis_flex a:HOVER{
	text-decoration: none;
}

.city_wapper{
	overflow: hidden;
	position: absolute;
	width: 100%;
	bottom: 0px;
}
.sliding_bg{
	background: bottom center url("../images/footer_hk_city.png") repeat-x;
	width: 100%;
	height: 260px;
}


.achieve{
	background: rgba(80, 50, 0, 0.3);
	position: relative;
	color: #fff;
	text-align: center;
}
.achieve h2.sub_headline{
	color: #fff;
	margin-bottom: 60px;
}
.row_flex{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.achieve .row_flex .col_4{
	flex: 0 0 20%;
	text-align: center;
}
.ach_p{
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	margin-top: 10px;
}
.ach_p b{
	font-size: 2.5em;
	font-weight: 900;
	color: #ffe334;
	line-height: 1;
	letter-spacing: -1px;
}
.icon_ach{
	max-width: 120px;
	margin: auto;
	display: flex;
}


.footer{
	background: #35547e;
	color: #fff;
	position: relative;
}
.footer .container{
	padding: 30px 40px 30px;
	max-width: inherit;
	width: auto;
}
.content_con {
  text-align: center;
  color: #fff;
	max-width: 1200px;
	margin: 0 auto 45px;
}
.content_con .sub_head {
  font-size: 20px;
  margin: 20px 0 20px;
}

.contact_col {
  text-align: center;
  flex: 0 0 30%;
}
.contact_col i {
  width: 35px;
  height: 35px;
  display: inline-block;
}
.p_fun_r .contact_col h4 {
  margin: 5px 0 5px;
  font-size: 18px;
	font-weight: 500;
}
.p_fun_r .contact_col p {
  margin-top: 0;
  font-size: 15px;
}
.footer .p_fun_r a {
  color: #fff;
  font-size: 15px;
	text-decoration: underline;
}
.footer .p_fun_r a:hover{
	text-decoration: none;
}

.hr_line_s1 {
  border-top: 1px dotted rgba(255,255,255,.9);
  border-bottom: none;
  margin: 20px 0;
}

.footer_l {
  display: flex;
  width: 100%;
  padding: 10px 5px 20px;
  font-size: 14px;
}
.footer_l .colf_2{
	flex: 1;
}
.footer_l p {
  margin-bottom: 15px;
  display: flex;
  line-height: 1.5em;
  color: rgba(255,255,255,1);
}
.footer_l i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  flex: 0 0 25px;
}
.footer_l a {
  color: #fff;
  margin-left: 10px;
	text-decoration: underline;
}
.footer_l a:hover{
	text-decoration: none;
}
.fb_area {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.fb_area a {
  margin-left: 5px;
}
.fb_area a i{
	width: 25px;
	height: 25px;
	display: flex;
	vertical-align: middle;
	margin: 0 0px 0px 5px;
}
.footer_l .copyr{
	margin-top: 30px;
	margin-bottom: 0;
}


.inside_page{
	position: relative;
}
.inside_page .container{
	padding-top: 140px;
	padding-bottom: 0px;
}

.event_lis {
  padding: 40px;
  background: #fff;
  margin-bottom: 20px;
	border-radius: 3px;
}
.event_lis .line_t_row {
  align-items: flex-start;
  padding: 15px 0;
	display: flex;
	border-top: 1px solid #c7e0f0;
}
.line_t_row:last-child {
  border-bottom: 1px solid #c7e0f0;
}
.event_lis .lt_col_he {
  flex: 0 0 30%;
  padding: 0 20px 0 0px;
  font-weight: 500;
}
.event_lis .lt_col_he .hi_t{
	color: var(--color);
}
.lt_col_body {
  padding-right: 0px;
}

.subhead_c{
	text-align: center;
}

.bg_overf{
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	z-index: 0;
}
.circle_hk{
	position: absolute;
	top: 110px;
	left: 50%;
	transform: translateX(-50%);
	width: 83%;
	max-width: 900px;
}
.inside_page .sub_headline{
	font-size: 40px;
	margin-bottom: 30px;
}
.inside_page ul, .inside_page li{
	list-style: disc;
}
.inside_page ul{
	margin: 0;
	padding-left: 20px;
}

.time_ta {
  padding: 5px 0;
}
.time_ta b {
  padding-right: 10px;
}
.hi_t {
  color: #e56107;
	font-size: 1.2em;
}

.gro_logo{
	margin: 0px auto 20px;
	width: 220px;
}


.team_in_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.full_team_row{
	margin-bottom: 40px;
}

.event_lis .sub_t_s {
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0px;
  color: #195b8e;
  padding: 20px 20px;
  line-height: 1.4;
}
.team_in_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.team_in_area .team_li {
  margin: 0 20px;
  flex: 0 0 25%;
}
.team_li img {
  width: 85%;
	max-width: 250px;
	min-width: 220px;
}
.team_in_area .team_li h4, .full_team_row h4{
	margin: 5px 0;
	line-height: 1.2;
	text-align: center;
	color: #195b8e;
  font-size: 22px;
}
.team_in_area .team_li p{
	margin: 10px 0;
	line-height: 1.2;
}

.kid_hl, h4.kid_hl small {
  color: #195b8e;
}
.event_lis p {
  margin: 10px 0;
	line-height: 1.6;
	text-align: center;
}
.event_lis .lt_col_body p{
	margin: 0;
	text-align: left;
}
.big_t {
  font-size: 150%;
}
.full_team_row img {
  width: 55%;
	max-width: 500px;
  display: block;
  margin: auto;
}
.full_team_row .housedog {
  width: 35%;
	max-width: 250px;
}

.awards_p1{
	width: 70%;
	max-width: 400px;
	margin: 0 auto 10px;
}
.aword_hi_t{
	font-size: 25px;
	text-align: center;
	margin-bottom: 20px;
	margin-top: 0px;
	color: var(--color);
	padding: 0 20px;
}
.step_h_area {
  text-align: center;
  margin: 30px 0;
}
.step_h_line {
  position: relative;
  width: 15px;
  height: 160px;
  border-radius: 8px;
  background: #e56107;
  display: inline-block;
}
.step_end {
  background: #fff;
  height: 80px;
}
.step_stop {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  top: -10px;
  left: -42px;
  background: #e56107;
  border-radius: 50%;
  color: #fff;
  padding: 25px 0;
  font-weight: 700;
  font-size: 30px;
	letter-spacing: -0.5px;
}
.step_tail {
  width: 15px;
  height: 15px;
  background: #e56107;
  position: absolute;
  bottom: -20px;
  left: 0px;
  border-radius: 50%;
}

.award_c .event_lis .sub_t_s{
	font-size: 25px;
	margin-bottom: 10px;
	color:  var(--color);
}
.award_c .event_lis p {
  font-size: 25px;
	line-height: 1.4;
	font-weight: 700;
}
.event_lis .remark_area {
  margin: 50px 0 0px;	
	line-height: 1.2;
}
.event_lis .remark_area li{
	margin: 10px 0;
	font-weight: 300;
}

.route_map{
	width: 100%;
	max-width: 900px;
	margin: auto;
}

.travel_icon {
	max-width: 260px;
}
.travel_table{
	margin-bottom: 0px;
}
.tab_header_row {
  border: none;
  display: flex;
  padding: 15px 0 15px;
  font-weight: 700;
  font-size: 18px;
  background: #fff;
	color: var(--color);
	line-height: 1.2;
}
.col_fr {
  flex: 0 0 25%;
  padding: 0 10px 0 5px;
}
.col_sec {
  flex: 0 0 55%;
  padding: 0 20px;
}
.col_th {
  flex: 0 0 20%;
  padding: 0 10px 0 10px;  
}
.tab_body_row{
	display: flex;
	padding: 15px 0;
	align-items: flex-start;
	border-top: 1px solid #c7e0f0;
	font-weight: 300;
}
.tab_body_row:last-child {
  border-bottom: 1px solid #c7e0f0;
}
.event_lis .tab_body_row p{
	text-align: left;
	margin-top: 0px;
	line-height: 1.6;
}

.foot_note{
	text-align: center;
	color: #000;	
}
.foot_note a{
	color: var(--color);
}
.foot_note.hi_txt{
	color: #000;
	font-weight: bold;
}

ul.list_number, .list_number li {
  list-style: decimal;
	font-weight: 400;
	font-size: 16px;
}
.list_number li {
  padding-left: 6px;
  margin: 10px 0;
}
ul.list_number ul, .list_number li ul li {
  list-style: disc;
}
.list_number li a{
	font-weight: 400;
	text-decoration: underline;
}
.list_number li a:hover{
	text-decoration: none;
}

.video_box{
	border: 2px solid #fff;
	display: flex;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.gallery a {
  flex: 0 0 24%;
  display: flex;
  max-width: 250px;
  overflow: hidden;
  margin: 1px;
  position: relative;
}
.gallery a:hover img{
	transform: scale(1.1);
	filter: brightness(40%);
}
.gallery img {
  transition: .5s;
}
.gallery a .icon_view {
  color: #fff;
  font-weight: 400;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  transition: 1s;
  line-height: 1;
}
.gallery a:hover .icon_view{
	opacity: 1;
}

.spon_logo{
	max-width: 1200px;
	margin: auto;
	display: flex;
}

.r_box_container .row_f_active .remark{
	font-weight: 300;
	color: #999;
}
.r_box_container .row_f_active.s_on .remark{
	color: #666;
}

.txt_hi{
	color: #d8f769;
	font-weight: 500;
}

.profile_top_img{
	max-width: 900px;
	margin: 0 auto -10px;
}

.coming_soon{
	background: #fff;
	border-radius: 3px;
	padding: 50px;
	text-align: center;
	margin-bottom: 60px;
}
.coming_soon img{
	width: 200px;
	margin: auto;
}

.cro_logo{
	max-width: 400px;
	min-width: 250px;
	width: 60%;
	margin: 25px auto 25px;
}

.lower_sponsor_logo{
	max-width: 400px;
	margin: 40px auto 20px;
	width: 50%;
	min-width: 280px;
}

.blue_cross{ width: 220px; margin: 20px 0 0 ;}

.alert_row{background: #6fac39; }
.alert_row .container{ padding: 0; margin: 0px auto;}
.alert_row p{margin: 0px; text-align: center; padding: 20px 25px; background: #ffffe9; border-radius: 5px; color: red; line-height: 1.8;}
.alert_row p b{font-size: 1.2em;}

.alert_text_box{color: red; line-height: 1.8; background: #fff; text-align: center; padding: 15px 25px; border-radius: 2px; font-size: .9em;}



/* ---------------------------------  fundraising  ------------------------------------- */
.fundraising{
	background: #f8fafb;
}
.fundraising .container{	
	padding: 20px 30px 40px 30px;
	width: 100%;
	min-height: 100vh;
	max-width: inherit;
}
.fundraising .container .col_wrapper{
	display: flex;
	gap: 30px;
}
.content_left{
	flex: 0 0 calc(70% - 30px);
}
.content_right{
	flex: 0 0 30%;
}
.content_right .sticky{
	position: sticky;
	top: 120px;
	margin-bottom: 30px;
}
.content_right .card{
	border: 1px solid #eee;
}
.card{
	background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
	margin-bottom: 30px;
}
.card p{
	color: #666;
}
.card h4{
	margin: 8px 0;
	font-weight: 400;
}
.card .txt_num{
	font-size: 25px;
	color: var(--color);
	line-height: 1.2;
	font-weight: 500;
}
.card hr{
	margin: 25px 0;
}
.card .c_button{
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	align-items: center;
	text-align: left;
	padding: 15px 20px;
	color: #fff;
	background: var(--color);
	border: 1px solid var(--color);
	border-radius: 5px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
}
.card .row_flex{
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 5px 0 15px;
}
.card .c_button svg{
	transition: 0.5s;
	flex: 0 0 30px;
}
.card .c_button:hover{
	background: #fff;
	color: var(--color);
}
.card .c_button:hover svg{
	fill: var(--color);
}

.intro_card{
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	padding: 0px;
}
.intro_card .intro_img{
	background: center 85% url("../images/How-to-support-page_topbanner.jpg") no-repeat;
	background-size: cover;
	aspect-ratio: 2.5;
	position: relative;
}
.intro_card .intro_img h3{
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 60px;
	font-weight: 700;
	margin: 0px;
	letter-spacing: -0.5px;
}
.intro_card p a{
	color: var(--color);
}


.intro_card .content{
	padding: 20px 30px;
}
.intro_card .content ul{padding-left: 25px; margin-bottom: 30px;}
.intro_card .content ul li{ list-style: decimal; margin: 10px 0; line-height: 1.3;}

.intro_card p{
	color: #000;
	font-weight: 400;
	position: relative;
	z-index: 1;
}


.list_table{
	margin-bottom: 20px;
}
.line_t_h, .line_t_d{
	display: flex;
	align-items: center;
	padding: 15px 0;
	line-height: 1.2;
	border-bottom: 1px solid #efefef;
}
.line_t_h, .fr_list .line_t_h .col_d, .spon_list .line_t_h .col_c{
	color: #666;
	font-weight: 500;
}
.lt_col{
	padding: 0 15px;
}

.fr_list .col_a{
	flex:0 0 95px; text-align: center;
}
.fr_list .col_b{
	flex: 0 0 135px; text-align: center;
}
.fr_list .col_c{
	flex:0 0 calc(75% - 220px);
}
.fr_list .col_d{
	flex: 0 0 25%;
	margin-left: auto;
	text-align: right;
	color: var(--color);
	font-weight: 600;
}
.list_table a{
	color: var(--color);
}
.list_table .line_t_d .team_photo{
	transition: 0.5s;
}
.list_table .line_t_d:hover .team_photo{
	transform: scale(1.15);
}


.spon_list .col_a{
	flex: 0 0 25%;
}
.spon_list .col_me{
	flex: 0 0 40%
}
.spon_list .col_b{
	flex: 0 0 17%;
}
.spon_list .col_c{
	flex: 0 0 18%;
	margin-left: auto;
	text-align: right;
	color: var(--color);
    font-weight: 600;
}


.team_photo{
	border-radius: 99999px;
	object-fit: cover;
	width: 220px;
	height: 220px;
}

.fr_list .team_photo{
	width: 95px;
	height: 100%;
	aspect-ratio: 1;
}

.paging_area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.paging_area .p_cap {
  margin: 0 5px;
  color: #ccc;
  font-size: 18px;
  line-height: 1;
  background: rgba(255,255,255,0);
  padding: 3px 6px 5px;
  border-radius: 5px;
}
.paging_area .on {
  color: var(--color);
  background: rgba(255,255,255,1);
  padding: 3px 6px 5px;
  border-radius: 5px;
}

.breadcrumb{
	display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.breadcrumb a{
	color: #666;
}
.breadcrumb a.on{
	color: #000;
}
.breadcrumb a:hover{
	color: var(--color);
}




/* ---------------------------------  fundraising - end  ------------------------------------- */





/* checkbox style */
.checkmark {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -18px;
    height: 40px;
    width: 40px;
    background-color:#eee;
border-radius: 50%;
border: 3px solid  #fff; transition: 0.5s;
}
.sele-toggle-label .checkmark{
	margin: inherit;
    right: inherit;
    bottom: inherit;
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
}

.sele-toggle-label input{
	display: block;
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
	cursor: pointer;
}
.checkmark:after{
	content: "";
	position: absolute;
	display: none;
}
.for_checkbox input:checked ~ .checkmark{
	background-color: #75D337;
}
.for_checkbox .checkmark:after {
  left: 11px;
  top: 6px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.for_checkbox input:checked ~ .checkmark:after {
  display: block;
}
/* checkbox style -END */

/* Radio button style */
.for_radio .checkmark{
	width: 26px;
	height: 26px;
	margin: 5px 10px 0 0;
	flex: 0 0 26px;
}
.for_radio input:checked ~ .checkmark{
	background-color: #75D337;
}
.for_radio .checkmark:after{
	background: #fff;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	top: 5px;
	left: 5px;
}
.for_radio input:checked ~ .checkmark:after{
	display: block;
}
/* Radio button style -END */

/* small checkbox style */
.for_s_checkbox .checkmark{
	width: 26px;
	height: 26px;
	margin-right: 10px;
	border-radius: 5px;
	flex: 0 0 26px;
}
.for_s_checkbox input:checked ~ .checkmark{
	background-color: #75D337;
}
.for_s_checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.for_s_checkbox input:checked ~ .checkmark:after {
  display: block;
}
/* small checkbox style - END */
.sele-toggle-label{
	cursor: pointer;
	margin: 12px 0;
	display: flex;
	align-items: flex-start;
	position: relative;
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sele-toggle-label.close{
	float: none;
	opacity: 1;
	text-shadow: none;
}
.sele-toggle-label .r_textf, .row_f_active .r_textf_3{
	width: 100%;
	height: auto;
	position: relative;
	margin-left: 0px;
	font-weight: 300;
	cursor: auto;
	background: #fff;
	border: none;
	opacity: .7;
	font-size: 1em;
  padding: 2px;
  font-family: 'Noto Sans TC';
	margin-top: 6px;
}
.row_f_active .r_textf_3{margin: 0px;}
.sele-toggle-label .r_textf.s_on, .row_f_active.s_on .r_textf_3{
	opacity: 1;
	border-bottom: 1px solid #279ec2;
	margin-bottom: -1px;
	outline: none;	
}

/* small checkbox style */
.for_s_checkbox .checkmark{
	width: 26px;
	height: 26px;
	margin-right: 0px;
	border-radius: 5px;
	flex: 0 0 26px;
}
.for_s_checkbox span{
	font-weight: 400;
	padding-top: 8px;
}
.for_s_checkbox input:checked ~ .checkmark{
	background-color: #75D337;
}
.for_s_checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.for_s_checkbox input:checked ~ .checkmark:after {
  display: block;
}
.form_row_c { margin: 10px 0;}
.form_row_c .for_s_checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: normal;
}
.form_row_c .for_s_checkbox span{ font-weight: 400; padding-top: 8px;}
/* small checkbox style - END */


/* -------------------- text box - animation ------------------------*/
.form{width: 100%; position: relative; margin: 15px 0 5px; overflow: hidden;} 
.form input{width: 100%; height: 100%; color: #3a3a3a; padding: 25px 0 3px; border: none; outline: none; font-size: 1em; font-family: 'Noto Sans TC', sans-serif;}
.form label{position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; border-bottom: 1px solid #d2def2; margin: 0; display: inherit; color: var(--color); font-size: 16px;}
.form label::after{content: ""; position: absolute; left: 0px; bottom: -1px; height: 100%; width: 100%; border-bottom: 1px solid #279ec2; transform: translateX(-100%); transition: transform 0.3s ease;}
.content_name{position: absolute; bottom: 6px; left: 0px; font-weight: 400; transition: all 0.3s ease;}

.fundraising .content_name{ font-weight: 700;}
.fundraising .login_card .content_name{ font-weight: 400;}

/* -- .form input:focus + .label_name .content_name, 
.form input:valid + .label_name .content_name{ transform: translateY(-85%); font-size: 15px; color: #1c85a5;}
.form input:focus + .label_name::after,
.form input:valid + .label_name::after { transform: translateX(0%);}  --*/

.form input:focus + .label_name .content_name{ transform: translateY(-85%); font-size: 15px; color: #1c85a5;}
.form input:focus + .label_name::after{ transform: translateX(0%);} 

/* -------------------- text box - animation ------------------------*/

.form_t {
  margin-top: 0px;
}

.row_f_active {
  opacity: 1;
  padding-left: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1em;
  transition: .5s;
}
.row_f_active.s_on {
  opacity: 1;
}
.for_s_checkbox span {
  padding-top: 2px;
  line-height: 1.4;
}

.r_box_container .remark {
  font-size: 14px;
  margin-bottom: 5px;
	margin-top: 0px;
	color: #666;
}
.f_action {
  text-align: center;
	margin: 30px 0 10px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.f_action button {
  border-radius: 5px;
	border: 1px solid var(--color);
  background: var(--color);
  color: #fff;
  padding: 12px 30px;
  font-size: 20px;
  transition: .3s;
  font-family: 'Noto Sans TC';
  cursor: pointer;
	font-weight: 500;
	width: 100%;
}
.f_action button:hover {
  background: #fff;
	color:  var(--color);
}
.f_action button.back_btu {
  background: #d1d3d4;
	color: #666;
}
.f_action button.back_btu:hover {
  background: #e8e8e8;
}

.alert_box {
  display: flex;
  align-items: center;
  padding: 0px;
  line-height: 1.4;
  font-size: 20px;
  font-weight: 500;
  color: #61a806;
}
.alert_box i {
  font-size: 200%;
  margin-right: 10px;
}

.col_en_1 {
  flex: 0 0 100%;
	padding: 0 5px;
}

.search_result .lt_col_he {
  flex: 0 0 20%;
  padding: 0 10px 0 25px;
}
.search_result .lt_col_second {
  flex: 0 0 30%;
}
.search_result .lt_col_tri {
  flex: 0 0 25%;
}
.search_result .lt_col_td {
  flex: 0 0 25%;
}
.alert_red {
  color: #cb5a3c;
}

.form_row {
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
}
.f_col_r {
  flex: 1;
}
.f_col_r_f {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
}
.f_col_r_f .row_item {
  flex: 0 0 25%;
}
.f_col_r_f .row_item .sele-toggle-label {
  padding-right: 60px;
	align-items: center;
}
.f_col_r_f .row_item .sele-toggle-label .sele_img{
	max-width: 180px;
}

.active_upload.s_on .r_textf_3{
	border: none;
}

.addon{
	margin: 30px 0
}
.addon p{
	margin: 5px 0;
	font-size: 14px;
	color: #666;
}



.sub_form{
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
.sub_form textarea{
	width: 100%;
	border: 1px solid #d2def2;
	resize: vertical;
	padding: 3px 6px 3px 6px;
	font-family: 'Noto Sans TC', sans-serif;
}
.f_col_2 .form_row_b{
	flex: 0 0 23%;
}
.f_col_2 .form_row_b:last-child{
	flex: 0 0 100%;
}
.sele-toggle-label{
	display: flex;
	align-items: center;
	margin: 0px;
	gap: 5px;
}
.for_radio .checkmark{
	margin: 0 0px 0 0;
}

.f_col_2 .form_row_b:last-child .sele-toggle-label{
	flex-wrap: wrap;
}
.row_f_active_2{
	display: flex;
	align-items: center;
	gap: 5px;
}
.row_f_active_2 span{
	color: #666;
	display: block ruby;
}
.sele-toggle-label .r_textf{
	margin-top: 0px;
}
h5.form_label{
	font-size: 18px;
	margin: 20px 0 12px;
	color: var(--color);
}
.bigtx_2{
	font-weight: 400;
}

.form_row_b{
	width: 100%;
}

.for_s_checkbox{
	align-items: start;
}

a.s_btu{
	color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 8px 15px;
  border-radius: 5px;
	display: inline-flex;
	align-items: center;
}
a.s_btu:hover{
	background: #fff;
	color: #283a60;
}
a.s_btu:hover svg{
	fill: #283a60;
}

a.s_btu svg{
	vertical-align: middle;
}


.share_item{
	position: relative;
}
.share_item a{
	width: 52px;
  display: inline-flex;
  aspect-ratio: 1;
  background: #efefef;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.share_item a:hover{
	background: var(--color);
}
.share_item a svg{
	transition: 0.5s;
}
.share_item a:hover svg{
	fill: #fff
}
.share_item p{
	font-size: 12px;
  color: #000;
  margin: 5px 0;
}

.share_area{
	text-align: center;
	margin: 20px 0;
}
.share_row_flex{
	display: flex;
	justify-content: space-around;
	gap: 10px;
	text-align: center;
}

.copy_txt{
	background: rgba(0,0,0,0.7);
  color: #fff;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 16px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
	opacity: 0;
	
}

.copy_txt.copy-open{
	display: block;
	animation: copy-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes copy-fade-in {
  0% { opacity: 0;}
  100% { opacity: 1;}
}



.profile_detail{
	display: flex;
  gap: 30px;
  align-items: center;
}
.profile_detail .profile_photo{
	display: flex;
}
.info_row{
	display: flex;
	margin: 10px 0;
	column-gap: 10px;
}
.info_row label{
	color: #000;
	flex: 0 0 160px;
	font-weight: 700;
}
.info_row span{
	font-weight: 500;
}
.profile_info{
	width: 100%;
}

.edit_text input, .edit_text textarea{
	border: 1px solid #fff;
  background: #efefef;
  width: 100%;
  font-size: 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  padding: 3px 6px 3px 6px;
  border-radius: 3px;
}
.edit_text textarea{
	resize: none;
}
.edit_text:hover input, .edit_text:hover textarea{
	background: #fff;
	border: 1px solid #279ec2;
	padding: 3px 80px 3px 6px;
}
.edit_text{
	position: relative;
	width: 100%;
	display: flex;
}
.edit_text button{
	position: absolute;
	right: 2px;
	top: 2px;
	bottom: 2px;
	display: none;
	font-family: 'Noto Sans TC', sans-serif;
	outline: none;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 500;
	padding: 0px 8px;
	border: 1px solid var(--color);
	background: var(--color);
	color: #fff;
}
.edit_textarea button{
	top: 3px;
	bottom: 3px;
}
.edit_text button:hover{
	border: 1px solid #279ec2;
	background: #fff;
	color: #279ec2;
}
.edit_text:hover button{
	display: block;
}

.form_row_b .photo_upload{
	width: 100%;
  display: block;
  text-align: center;
  margin: 10px 0;
  background: #efefef;
  padding: 8px;
  cursor: pointer;
  color: var(--color);
	font-weight: 500;
}
.photo_upload svg{
	display: inline-block;
	vertical-align: bottom;
}

.edit_photo{
	position: relative;
}
.edit_photo img{
	transition: 0.5s;
}
.edit_photo:hover img{
	filter: brightness(50%);
}
.edit_photo h3{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #fff;
	opacity: 0;
	transition: 0.5s;
	text-align: center;
	font-size: 16px;
  line-height: 1.4;
}
.edit_photo:hover h3{
	opacity: 1;
}

.edit_goal .f_col_2 .form_row_b{
	flex: 0 0 45%;
}
.edit_goal .f_col_2 .form_row_b:last-child{
	flex: 0 0 100%;
}


.alert_message{
	background: #fabbb9;
	padding: 20px;
	color: #000;
	font-weight: 500;
	margin: 20px 0;
	border-radius: 3px;
}
.alert_message p{
	margin: 0;
	display: flex;
	align-items: center;
	gap:8px;
}
.alert_message p svg{
	flex: 0 0 50px;
}


.rescue_team .container{
	padding: 0;
  margin: 0;
  width: 100%;
  max-width: inherit;
}
.rescue_team .swiper-fade .swiper-slide{
	display: flex;
}
.rescue_team .swiper-wrapper{
	max-height: 100vh;
	height: calc(100vh - 95px);
	overflow: hidden;
	min-height: 600px;
}
.swiper-fade .swiper-slide img{
	object-fit: cover;
}



.why_supoort{
	background: #283a60;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.why_supoort .container {
  padding: 20px 0px 80px;
}
.why_supoort .intro h2{
	line-height: 1.6;
	margin-top: 40px;
}
.why_supoort .intro h2 b{
	color: #fbb166;
}

.why_supoort .full_row{
	display: flex;
  background: #fbb166;
  position: relative;
  justify-content: center;
  align-items: center;
}

.why_supoort .intro{
	margin-bottom: 0px;
	padding: 0 25px;
	max-width: 1100px;
   margin: 0 auto 120px;
}
.why_supoort .intro p{
	text-align: left;
	max-width: 1100px;
}

.why_supoort .swiper-wrapper{
	aspect-ratio:1.3;
	border-radius: 30px;
	overflow: hidden;
}
.why_supoort .col_content{
	text-align: center;
	padding: 50px;
	width: 100%;
}
.why_supoort .swiper-fade .swiper-slide img{
	height: 100%;
}
.why_supoort .swiper-slide{
	display: flex;
}
.why_supoort .col_content h2{
	color: var(--color);
  font-weight: 900;
  font-size: 50px;
  line-height: 1.2;
  margin: 20px 0;
}
.why_supoort .col_content p{
	color: #000;
  font-weight: 500;
  max-width: 500px;
  margin: auto;
}

.why_supoort .row_content{
	display: flex;
	justify-content: center;
	margin: 60px 0;
}
.why_supoort .row_content .col_3{
	width: 33%;
	padding: 0 10px;
}

.c_sub_title{
	margin-bottom: 20px;
}
.c_sub_title h2{
	color: #fff;
	line-height: 1.2;
	text-align: center;
	font-size: 23px;
	margin: 10px 0;
}
.c_sub_title h2 b{
	font-size: 30px;
	display: inline-block;
	margin: 8px 0 10px;
	color: #fbb166;
}
.why_supoort .row_content p{
	margin: 30px 0;
	font-weight: 500;
	text-align: center;
	padding: 0 20px;
	line-height: 1.7;
}
.icon_fs{
	width: 60px;
	display: flex;
	margin-top: -10px; display: none;
}



/* ---------------------------------  Goal  ------------------------------------- */

.team_goal{
	text-align: center;
}
.pie_chart {
  /* percentage to degree  */
  --v: calc( ((18/5) * var(--p) - 180)*1deg); 
  width: 100%;
	max-width: 220px;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to right, yellowgreen 50%, #655 0);
	background: linear-gradient(to right, #eee 50%, var(--color) 0);
	justify-content: center;
	align-items: center;
	position: relative;
}

.pie_chart::before,
.pie_chart::after {
  content: "";
  width: 50%;
  padding-top:100%;
  transform: rotate(var(--v));
}

.pie_chart::before {
  background: 
    linear-gradient(#eee 0 0) 
    0 / calc((50 - var(--p))*1%);
  transform-origin: right;
}

.pie_chart::after {
  background: 
    linear-gradient(var(--color) 0 0)       
    0 / calc((var(--p) - 50)*1%);
  transform-origin: left;
}

.inner_c{
	position: absolute;
  background: #fff;
  width: 88%;
  height: 88%;
  border-radius: 100%;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-direction: column;
	gap: 5px;
	z-index: 5;
}
.inner_c h3{
	font-size: 45px;
	color: var(--color);
	margin: 0;
	line-height: 1.2;
}
.inner_c p{
	margin: 0;
	line-height: 1.2;
	margin-bottom: 5px;
}

.inner_c a{
	border-radius: 3px;
	padding: 3px 8px 4px;
	font-size: 13px;
	line-height: 1.2;
	background: #efefef;
	color:  var(--color);
}
.inner_c a:hover{
	background: var(--color);
	color: #fff;
}

/* ---------------------------------  Goal - end  ------------------------------------- */


.login .container{
	max-width: 1300px;
	min-height: 750px;
  display: flex;
  align-items: center;
}

.login_card{
	padding: 0;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	margin-top: 20px;
	gap: 5px;
	background: none;
}
.login_card .login_img{
	display: inline-flex
}
.login_card .login_img img{
	object-fit: cover;
}
.login_card .login_form{
	padding: 130px 50px;
  flex: 0 0 50%;
  background: #fff;
  border-radius: 10px;
	color: #283a60;
}
.login_card .login_form h3{
	font-size: 25px;
	margin-top: 0px;
	margin-bottom: 15px;
}
.login_form p{
	color: var(--color);
}


.search_result .col_a{
	flex: 0 0 20%;
}
.search_result .col_b{
	flex: 0 0 30%;
}
.search_result .col_c{
	flex: 0 0 30%;
}
.search_result .col_d{
	flex: 0 0 20%;
}
.search_re_card .alert{
	color: #EA3323;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
	margin-bottom: 20px;
}

.recsue_content{
	 background: rgb(0,0,0);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%);
background: linear-gradient(to top, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%); 
	position: absolute;
	bottom: 0px;
	text-align: center;
	color: #fff;
	z-index: 10;
	padding: 40px 0 40px;
	width: 100%;
	height: 100%;
	display: flex;
}
.recsue_content .re_container{
	width: 90%;
	max-width: 550px;
	margin: auto;
}
.recsue_content h1{
	font-size: 65px;
	line-height: 1.2;
	letter-spacing: -1px;
	margin: 10px 0 40px;
	padding: 0 20px;
}
.recsue_content p{
	font-weight: 500;
}
.recsue_content .callforaction .gen_btu{
	display: inline-block;
}




.event_details {
  background: #283a60;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.event_details .container {
  padding: 20px 25px 120px;
	max-width: 1200px;
}

.event_details .content_col{
	margin: 80px 0 0px;
}
.event_details .event_lis{
	margin: 40px 0 0;
	padding: 0;
	text-align: left;
}
.event_details .event_lis .line_t_row{
	padding: 22px 30px;
	align-items: center;
}
.event_details .event_lis .lt_col_he{
	display: flex;
	align-items: center;
	gap: 10px;
}
.event_details .event_lis .lt_col_he svg{
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	fill: #0083cb;
}
.event_details .event_lis .lt_col_he .hi_t{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: #0083cb;
}
.event_details .event_lis .lt_col_he .hi_t small{
	font-weight: 400;
	font-size: 14px;
	display: block;
}
.event_details .event_lis .line_t_row .lt_col_body{
	color: #000; font-size: 18px;
}

.grid_row{ display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 10px;}

.event_details .container.transportation{
	max-width: 1400px;
}
.event_details .transportation .event_lis{
	display: flex; align-items: center;
	width: 50%;
	padding: 40px;
	color: #000;
	flex-direction: column;
	flex: 1;
	border-radius: 10px;
	margin-top: 0px;
}
.travel_icon{
	min-width: 400px;
	padding-bottom: 15px;
}
.event_lis .travel_detail_col h2{
	font-size: 22px;
	font-weight: 900;
  margin-top: 0px;
	margin-bottom: 15px;
	color: #0083cb;
	text-align: center;
}
.event_lis .travel_detail_col h2 small{
	font-size: 18px;
  font-weight: 500;
}
.event_lis .travel_detail_col{
	flex: 1; width: 100%;
}
.event_lis .travel_detail_col p{
	text-align: left;
	line-height: 1.8;
}
.event_lis .travel_detail_col p a{
	color: #0083cb;
}
.event_lis .travel_detail_col ul{
	padding-left: 20px;
	margin-bottom: 25px;
}
.event_lis .travel_detail_col ul li{
	list-style: disc;
	margin: 5px 0;
}
.event_lis .travel_detail_col .row_flex{
	justify-content: flex-start;
	flex-wrap: nowrap;
	padding: 10px 0;
  border-bottom: 1px solid #c7e0f0;
}
.event_lis .travel_detail_col .row_flex:first-child{
	border-top: 1px solid #c7e0f0;
}
.event_lis .travel_detail_col .row_flex .col_2{
	font-weight: 700;
	flex: 0 0 180px;
}
.bus_table{	margin: 20px 0 30px;}
.bus_table:last-child{ margin-bottom: 20px;}

.bus_table .row_flex .col_3 ul{	margin: 0px;}
.bus_table .row_flex .col_3 ul li{ line-height: 1.2; margin: 12px 0px;}
.bus_table .row_flex .col_3 ul li:first-child{ margin-top: 5px;}
.bus_table .row_flex .col_3 ul li:last-child{ margin-bottom: 5px;}

.travel_detail_col .callforaction{ margin: 40px auto 20px;}


.event_lis .line_t_row .col_flex{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.event_lis .line_t_row .col_flex .wp_image{
	flex: 0 0 160px;
	background: #eee;
}
.event_lis .line_t_row .col_flex .wp_image a{
	display: flex;
	position: relative;
	overflow: hidden;
}
.event_lis .line_t_row .col_flex .wp_image a .vlew_over{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.5);
	transition: 0.5s;
	opacity: 0;
}
.event_lis .line_t_row .col_flex .wp_image a:hover .vlew_over{
	opacity: 1;
}
.event_lis .line_t_row .col_flex .wp_image a img{
	transition: 0.5s;
}
.event_lis .line_t_row .col_flex .wp_image a:hover img{
	transform: scale(1.2);
}
.event_lis .line_t_row ul{
	padding-left: 25px;
	margin: 5px 0;
}
.event_lis .line_t_row ul li{
	list-style: disc;
	margin: 8px 0;
	line-height: 1.2;
}

#pet_festival, #charity_wallk{ scroll-margin-top: 80px; }

.tnc .container{
	padding: 40px 25px;
	width: 100%;
	max-width: 1600px;
}
.tnc h1{
	text-align: center;
	font-size: 40px;
	letter-spacing: -0.005em;
	line-height: 1.4;
  margin: 20px 0;
	color: var(--color);
}
.tnc .row_div{
	margin: 40px 0;
}
.tnc .row_div h3{
	margin: 12px 0;
}
.tnc ul{
	padding-left: 25px;
	margin: 10px 0;
}
.tnc ul li{
	list-style: decimal;
	margin: 15px 0;
}

.remark{
	font-size: 14px;
	padding: 5px 0;
	color: #666;
}

.container_prize{
	background: #d78430;
	padding: 80px 0 100px;
	position: relative;
	
}
.container_prize .row_flex{
	display: flex;
	justify-content: center;
}
.container_prize .row_flex .headline{
	font-size: 30px;
	margin: 30px 0 0px;
	word-break: keep-all;
}
.container_prize .p_col_3{
	flex: 0 0 66.66%;
	position: relative;
}

.container_prize .p_col_1{
	flex: 0 0 33.33%;
}
.container_prize .p_col_1 .img_t{
	padding: 0 2.99%;
	margin: auto;
}
.cent_txt{
	margin-top: -25px;
  text-align: center;
  font-size: 13px;
}

.p_row_flex {
  display: flex;
	gap:45px;
  justify-content: center;
  align-items: center;
	max-width: 1800px;
	margin: auto
}
.p_col_2{
	flex: 0 0 47%;
	position: relative;
}
.img_t{
	display: flex;
}
.container_prize .p_col_2, .container_prize .p_col_1{
	text-align: center;
}
.container_prize .p_col_2 p, .container_prize .p_col_1 p{
	margin: 0px;
	font-size: 18px;
	font-weight: 500;
}

.man_dog_w{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-63%, -44%);
	opacity: 0.6;
	width: 46%;
	z-index: 10;
}

.container_medal{
	background: rgba(44, 157, 191, 0.5);
}
.img_medal{
	max-width: 650px;
  margin: auto;
  padding-bottom: 100px;
}
.container_medal .p_col_2 p{
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}


.container_route{
	background: #a1dbe8;
	position: relative;
	padding: 40px 0 40px;
}
.container_route .headline{
	color: #283a60;
}
.event_details .container_route .content_col{
	margin: 40px 0;
}
.container_route .r_map{
	padding: 0 25px;
  margin: auto;
  max-width: 1200px;
}

.sponsor .container {
  padding: 40px 25px;
  width: 100%;
  max-width: 1400px;
}
.sponsor h1 {
  text-align: center;
  font-size: 35px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 20px 0;
  color: var(--color);
}
.sponsor .row_div{
	margin: 40px 0; background: #fff; padding: 20px 40px; border-radius: 10px;
}
.sponsor .row_div h3 {
  margin: 12px 0;
  text-align: center;
  padding-bottom: 5px;
}
.sponsor_row{
	display: flex;
  flex-wrap: wrap;
  margin: 20px -10px;
  justify-content: flex-start;
}
.sponsor_logo {
  flex: 0 0 16.65%;
  padding: 10px 10px;
  display: flex;
}


.container_header{
	position: relative;
	background: center center url("../images/header_title_eventdetail.jpg") no-repeat;
	background-size: cover;
	height: 360px;	
}
.g_bg{
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%);
  background: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%);
  background: linear-gradient(to top, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 100%);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
  height: 100%;
}
.g_bg .intro{
	padding: 0 40px 40px;
}
.container_header h1{
	text-align: center;
	font-size: 50px;
	letter-spacing: -1px;
	line-height: 1.2;
}
.why_supoort .container_header{
	background: center center url("../images/header_title_whysupport.jpg") no-repeat;
	background-size: cover;
}

.img_row{
	display: flex;
	justify-content: space-between;
}
.img_row img{
	flex: 1;
	width: 33.33333%;
}

#charity_wallk .swiper, #pet_festival .swiper{ display: none;}

.swiper-button-next, .swiper-button-prev{
	color: #fff;
	
}
.swiper-button-next::after, .swiper-button-prev::after{
	font-size: 30px;
}
.swiper-pagination-bullet-active{
	background: #fff;
}

.why_supoort .swiper-button-next::after, .why_supoort .swiper-button-prev::after{
	font-size: 20px; font-weight: 700;
}

.login{ background: #283a60;}





/* ---------------------------------  TC  ------------------------------------- */
body.tc{
	letter-spacing: 0;
}
body.tc .info_row label{
	flex: 0 0 85px;
}
body.tc .why_supoort .intro h2{
	max-width: 690px;
}
body.tc .c_sub_title h2 b{
	font-size: 24px;
	font-weight: 600;
	padding: 0 30px;
}

body.tc .theme_row .col_3 h3{padding: 0 1vw;}
body.tc .sec_intro .intro p{ max-width: 1000px;}
body.tc .why_supoort .intro{ max-width: 730px;}

body.tc .event_lis .travel_detail_col .row_flex .col_2{ flex: 0 0 130px;}






/* ---------------------------------  nav-mobile  ------------------------------------- */
@media(max-width: 1350px){
	header .container{ padding: 15px 15px 15px 25px;}
	.nav-main ul li{ margin-right: 40px;}
	header .logo{ width: 140px; margin-right: 20px;}
	
	.theme_img_bg h3{ font-size: 3.2vw; padding: 0 25px;}
	.theme_row{ gap: 3vw;}
	
	.line_t{ flex: 0 0 22%;}
	
	.why_supoort .swiper-wrapper{ aspect-ratio: 1; }
	
	
}

@media(max-width: 1030px){	
	.web{display: none!important;} 
	.mo{display: block!important;}
	
	header .logo{ width: 140px; margin-right: 0px;}
	header .container{
		justify-content: center;
	}
	header.navbar-fixed-top .container{
		padding: 15px 25px;
	}
	.bt-menu{
		visibility: visible;
		opacity: 1;
	}
	.nav_header{
		padding: 20px;
		position: sticky;
		top: 0px;
		z-index: 102;
		border-bottom: 1px solid #34547d;
		background: #283a60;
	}
	.nav_header .pull-right{ 
		display: block;
		margin-right: 5px;
	}
	.nav-sidebar-open .wrapper {
    position: fixed;
    transform: translateX(550px);
	}
	.nav-sidebar-open .wrapper_cover {
		opacity: 1;
		visibility: visible;
		display: block;
	}
	.nav-main{
		position: fixed;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		height: 100vh;
		background: #283a60;
		width: 550px;		
		transform: translateX(-550px);
		overflow-y: auto;
		padding-bottom: 150px;
	}
	.nav-main ul{
		flex-direction: column;
		align-items: unset;
	}
	.nav-main ul li{
		padding: 18px 25px;
		border-bottom: 1px solid #34547d;
		margin: 0;
	}
	.nav-main ul li a{
		font-size: 22px;
	}
	.nav-main ul li a.gen_btu{
		padding: 18px 20px;
	}
	.nav-main ul li.btu_li{
		margin-right: 0;
		border: none;
		padding: 20px 25px 0px;
	}

	.nav-main ul li ul{
		background: none;
		border: none;
		position: relative;
		opacity: inherit;
		visibility: visible;
		transform: translateX(0px);
		transition: none;
		margin-top: 7px;
		display: none;
		box-shadow: none;
		min-width: inherit;
	}
	.nav-main ul li:hover ul{
		transform: translateY(0px);
	}
	.nav-main ul li ul li, .nav-main ul li ul li:first-child{
		border: none;
	}
	.nav-main ul li ul{
		padding-left: 25px;
	}
	.nav-main ul li ul li{
		color: #fff;
	}
	.nav-main ul li ul li::marker{
		content: "-";
	}
	.nav-main ul li ul li a{
		padding: 10px 5px;
		font-size: 1.1rem;
		font-weight: 400;
	}
	
	.nav-main ul li ul li a{
		color: #fff;
	}
	.nav-main ul li:hover ul li a{
		color: #fff;
	}
	
	.nav-main ul li ul li a{
		color: #fff;
	}
	.nav-main ul li ul li a:hover{
		color: #fff;
		background: none;
	}
	.lang a{
		font-size: 1rem;
	}
	
	.sec_intro h3, .sec_intro h1, .sec_intro h2{ text-align: center;}	
	.sec_intro h1{padding: 0;}
	
	.row{ flex-direction: column;}
	
	.stat_gift p{ font-size: 18px; line-height: 1.2;}
	.line_t{ flex: 0 0 30%; }
	
	.gallery a {  flex: 0 0 32%;}
	
	.menu_link_sub {  pointer-events: auto;}
	
	.cro_logo{	margin: 10px auto 10px;}
	
	.blue_cross{ margin: 20px auto 30px ;}
	body#en .blue_cross{ margin: 20px auto 30px ;}
	
	.bg_overf{ height: 280px;}
	.circle_hk{ width: 75%;  max-width: inherit;  top: inherit;  bottom: 0px; display: flex;  align-items: end;}
	.inside_page .container{ padding-top: 75px;}
	
	.sec_intro .col_2:first-child{
		margin-bottom: -25px;
	}
	
	.theme_row .col_3{ flex: 0 0 42%;}
	.theme_img_bg h3{ font-size: 4.4vw;}
	
	.fundraising .container{		
		padding: 40px 30px;
		min-height: inherit;
	}
	.fundraising .container .col_wrapper{
		flex-direction: column-reverse;
	}
	.card .row_flex{
		flex-direction: row;
	}
	.card .row_flex .c_button{
		flex: 1;
	}
	.content_right .sticky{ margin-bottom: 0px; position: relative;  top: auto;}
	.content_right .sticky .card:last-child{ margin-bottom: 0px;}
	
	.share_row_flex{ justify-content: center; gap: 25px;}
	
	.login_card{ flex-direction: column; margin: 0px;}
	.login_card .login_form{ width: 100%;}
	
	.why_supoort .row_content{flex-direction: column;}
	.why_supoort .row_content .col_3{ width: 100%; max-width: 650px; padding: 50px 25px; margin: auto;}
	 .why_supoort .swiper-wrapper {   aspect-ratio: 1.3; }
	
	.man_dog_w{ display: none;}
	.p_row_flex{ flex-direction: column-reverse;}
	.container_prize .p_col_2{ max-width: 600px;}
	
	.container_medal .p_row_flex{ flex-direction: column-reverse; gap: 20px;}
	.img_medal{ padding-bottom: 0px;}
	.container_medal .content{ padding-bottom: 120px;}
	
	.container_header{ height: auto; aspect-ratio: 2;}
	.container_header h1{ font-size: 6vw;}
	.container_header .g_bg{ padding: 60px 30px 60px;}
	.cent_txt{ margin-top: -15px;}
	
	.container_prize .row_flex{ flex-direction: column;}
	.container_prize .p_col_1{max-width: 600px;  margin: 80px auto 0;}
	
	.sponsor_logo{ flex: 0 0 20%;}
	
	.why_supoort .swiper-button-next::after, .why_supoort .swiper-button-prev::after{
		font-size: 30px; font-weight: normal;
	}
	
	.event_details .transportation .event_lis{ display: block;}
	.travel_icon{ margin: 0 auto 0px;}
	.event_lis .travel_detail_col h2{margin-bottom: 20px; text-align: center;}
	.event_lis .travel_detail_col{ padding: 0px;}
	
	.img_row img:last-child{ display: none;}
	
}

@media(max-width: 786px){	
	.container, .sec_intro .container{width: 100%; padding: 100px 40px;}
	.sec_intro .container{ padding: 50px 40px 100px;}
	.main_headline{ width: 55%; top: 14%;}	
	.bg_hk{ bottom: 207px;}
	.bg_hk img{ min-width: 450%;}
	.bg_sea{ height: 347px;}
	.kv_dog { width: 30%; top: inherit; bottom: 10vh;}
	.kv_an2 { width: 40%;}
	.kv_an1 { width: 26%;}
	.bg_mplus img {  min-width: 1800px;}
	.early_bird { right: 3%;  width: 22%;  top: 222px;}
	
	.hero .container{ width: 90%;}
	
	.intro h2{font-size: 3.5vw; line-height: 1.2;}
	.intro h1{font-size: 6.5vw; padding: 0 4vw;}
	.intro h2.into_t2{font-size: 4.2vw;}
	.intro h3{ font-size: 3.5vw}
	.headline{ font-size: 50px; line-height: 1.2;}
	.theme_img_bg h3{ font-size: 6.4vw;}
	
	.sub_headline{ font-size: 25px;}
	.stat_gift{ flex: 0 0 50%;}
	.line_t{ flex: 0 0 47%; }
	.f_act_area{ flex-direction: column;}
	.col_en_2{ margin: 10px 0; padding: 0px;}
	.contact_col{ flex: 0 0 100%; margin: 30px 0;}
	.footer .container{ padding: 60px 40px;}
	.footer_l{ flex-direction: column-reverse; padding: 0px 5px 20px;}
	.footer_l .colf_2{ margin: 30px 0 20px; text-align: center; align-items: center; gap: 10px;}
	.fb_area a{ margin: 0;}
	.footer_l i{margin: 0;}
	.fb_area a i{ font-size: 18px; margin: 0;}
	.footer_l p{ justify-content: center; text-align: center; flex-direction: column; align-items: center; margin: 0px 0 40px;}
	.fb_area {  align-items: flex-start;  justify-content: center;}
	.content_con .sub_head{ font-size: 20px;}
	.dis_flex{ padding: 0;}
	
	.event_lis .line_t_row { flex-direction: column; padding: 20px 0;}
	.event_lis .lt_col_he{ font-size: 18px; padding-bottom: 5px;}
	.event_lis{ padding: 30px 25px 60px;}
	
	.circle_hk{ top: -10px; width: 700px;}
	
	.team_in_area .team_li{ flex: 0 0 30%; margin: 20px;}
	.team_li img{ width: 250px;}
	.full_team_row img{ width: 80%;}
	.full_team_row .housedog{ width: 250px;}
	
	.inside_page .sub_headline{ font-size: 32px;}
	
	.travel_table{ font-size: 80%; line-height: 1.4;}
	.tab_header_row{ font-size: 14px;}
	.col_fr{ padding: 0 5px 0 0 ;}
	.col_sec{ padding: 0 5px;}
	.col_th{ padding: 0 0 0 5px;}
	
	.gallery a {  flex: 0 0 48%;}
	
	.alert_row .container{padding: 0px 40px;}
	
	.achieve .row_flex .col_4{	flex: 0 0 35%;	margin-bottom: 60px;}
	
	.bg_overf {    height: 262px;  }
	.circle_hk{ width: 85%;}
	.event_lis .sub_t_s{ font-size: 25px;}
	
	hr{ margin: 40px 0;}
	
	.fundraising .container{ padding: 40px 25px; width: 100%;}
	.theme_row{ flex-direction: column; align-items: center;}
	.card .row_flex{
		flex-direction: column;
	}
	
	.headline{ font-size: 5.6vw;}
	.theme_img_bg{ max-width: 250px;}
	
	.intro_card .dog_img {
	  position: absolute;
	  bottom: -22px;
	  display: flex;
	  left: 50%;
	  width: 235px;
	  transform: translateX(-50%);
	}
	
	.f_col_2 .form_row_b {
	  flex: 0 0 47%;
	}
	
	.profile_detail{ flex-direction: column;}
	
	.login_card .login_form{ padding: 40px 30px;}
	
	.event_lis .line_t_row .col_flex{ margin-top: 5px;}
	.event_details .event_lis .lt_col_he .hi_t{ font-size: 20px; display: block;}
	
	.event_details .event_lis .line_t_row{ align-items: flex-start; gap: 8px; padding: 25px;}
	
	.container_prize .p_row_flex, .container_medal .p_row_flex{ padding: 0 30px;}
	
	.container_header{ height: auto;}
	.container_header h1{ font-size: 9vw;}
	
	#charity_wallk .img_row, #pet_festival .img_row{ display: none;}
	#charity_wallk .swiper, #pet_festival .swiper{ display: block;}
	
	.sponsor_logo{ flex: 0 0 33.33333%;}
	
	.event_lis .travel_detail_col .row_flex{ display: block; padding: 15px 0;}
	.event_lis .travel_detail_col .row_flex .col_2{ margin-bottom: 5px;}
	.g_bg .intro{ padding: 0px 10px 40px;}
	
	.event_details .transportation .event_lis{ padding: 30px 25px;}
	.travel_detail_col .callforaction .gen_btu{ width: 100%;}
	.bus_table .row_flex .col_3 ul{ margin: 12px 0;}
}

@media(max-width: 586px){
	header .logo{ width: 130px;}
	.nav-sidebar-open .wrapper{
		transform: translateX(85%);
	}
	.nav-main{
		width: 85%;
		transform: translateX(-100%);
	}

	.bg_hk {  bottom: 33%;}
	.bg_sea {  height: 51%;}
	.bg_mplus img {  min-width: 610%;}
	.bg_hk img {  min-width: 445%;}
	.kv_an1 {  width: 32%;  z-index: 10;  bottom: 45px; transform: translateX(51%);}
	.kv_an2 {  width: 48%;  z-index: 10;  bottom: 35px; transform: translateX(-100%);}
	.kv_dog{ width: 35%; }
	.bg_moon{ width: 65%; transform: translate( -50%, -44%);}
	.bg_mplus{ bottom: -24px;}
	
	.container{ padding: 80px 25px 80px;}
	.sec_intro .container{ padding: 80px 40px 80px;}
	.intro h1 {  font-size: 7.5vw;  padding: 0; letter-spacing: 0px;}
	.intro h2, .intro h3 {  font-size: 4.2vw;   padding: 0;}

	.f_act_area .gen_btu{ font-size: 4.5vw;}
	
	.headline{ font-size: 5.6vw;}
	.container_prize .row_flex .headline{ font-size: 28px;}
	
	.early_bird{ width: 26%; top: 39%; right: 2%;}
	.bg_star_1, .bg_star_2{ bottom: 10vh;}
	
	.stat_gift{ flex: 0 0 100%; max-width: inherit;}	
	.line_t{ flex: 0 0 100%; }
	a.line_t .team_photo{ max-width: 200px;}
	
	.footer_enrol .container{ padding-bottom: 220px; padding-top: 50px;}
	.sliding_bg{ background-size: 345%;}
	
	.gallery a {  flex: 0 0 100%;  max-width: 350px;  margin: 0 0 20px;}
	.sec_intro p{ letter-spacing: 0px;}
	
	.alert_row .container{padding: 0px 20px 30px;}
	
	body#en .sec_intro h1{ font-size: 60px;}
	
	
	.main_headline {
		width: 100%;
		top: 5px;
		left: inherit;
		padding: 0 50px;
	  }
	.subhead_t{ width: 80%; margin-top: 5px;}
	.hero_sea{ margin-top: 60%;}
	.hero_dog{ top: 34%;}
	.hero_building{ top: 50%;}
	.dog_d1{ top: 65%;}
	.dog_d2{ top: 69%;}
	.dog_d3{ top: 79%;}
	.dog_d4{ top: 80%;}
	
	
	.achieve .row_flex .col_4{ flex: 0 0 100%; max-width: 300px; padding: 0 30px;}
	.icon_ach{ max-width: 100px;}
	
	.bg_overf { height: 230px; }
	.circle_hk { width: 100%;  }
	 .inside_page .container {  padding-top: 87px; }
	.inside_page .sub_headline{ margin-bottom: 10px;}
	
	.event_lis .sub_t_s{ font-size: 20px; margin: 0; padding: 15px 20px;}
	
	
	.theme_img_bg h3{ font-size: 9.4vw;}
	
	.card h3{ text-align: center;}
	
	.fr_list .line_t_h, .fr_list .col_a, .spon_list .line_t_h{ display: none;}
	.fr_list .line_t_d, .spon_list .line_t_d{ flex-direction: column;}
	.fr_list, .spon_list{ border-top: 1px solid #efefef;}
	.fr_list .col_b, .fr_list .col_c, .fr_list .col_d{flex: auto;}
	.fr_list .col_b{ padding: 20px 0;}
	.fr_list .col_d, .spon_list .col_c{ padding: 10px 0; margin: inherit; text-align: center; font-size: 22px;}
	.fr_list .team_photo{ width: 165px;}
	
	.f_col_2 .form_row_b { flex: 0 0 100%; }
	.spon_list .col_a{ padding: 10px 5px; font-weight: 600;}
	.spon_list .col_me{ padding: 10px 5px 20px; text-align: center;}
	
	.info_row{ margin: 12px 0; flex-direction: column;}
	.info_row label{ flex: 0 0 auto;}
	.info_row span{ font-weight: 600;}
	
	.intro_card .intro_img h3{ font-size: 7vw;}
	.recsue_content h1{ font-size: 13vw;}
	
	.img_row{ flex-direction: column;}
	.img_row img{ width: 100%;}
	
	.why_supoort .row_content p{ padding: 0px;}
	
	.sponsor_logo{ flex: 0 0 50%;}
	
}