:root{
    --color: #d32e47;        
}

*, *::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{
    margin: 0px;
    padding: 0px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
	color: #fff;
	letter-spacing: 0.5px;
	background: #ffdfa4;
}
ul, li{
    list-style: decimal;
}
a{
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}
a:hover, a:focus{
    text-decoration: none;
    outline: none;
}
h1, h2, h3, h4{
	font-weight: 700;
}
p{margin-bottom: 25px; }
p a{text-decoration: underline; color: #000;}
p a:hover{ color: #000;}
img{width: 100%;}

.container{
    width: 90%;
	max-width: 1600px;
    margin: auto;
	padding: 100px 0px;
}

header{
    background: none;
    text-align: center;
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%; 
    transition: top 0.8s;
}
header .container {
  width: 100%;
  padding: 35px 45px;
	display: flex;
	position: relative;
	z-index: 100;
	justify-content: space-between;
	margin: 0;
	max-width: inherit;
}
.logo {
  width: 200px;
  display: flex;
	align-items: center;
  color: #fff;
  text-align: left;
  margin-right: 15px;
}

.logo_1{ display: none;}
.logo_2{display: flex;}

.gen_btu{
    background-color: #fff;
    display: inline-block;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    color: var(--color);
    padding: 15px 25px;
    font-weight: 700;
    transition: 0.5s;
	line-height: 1;
	text-align: center;
}

.gen_btu:hover, .gen_btu:focus{
	color: #fff;
	background-color: var(--color);
	opacity: 1;
}

nav{
    display: flex;
    justify-content: flex-start;
}

/* navigation style start*/
.nav-toggle{
    display: none;
}
.nav-toggle-label{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 30px;
    height: 90px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    display: block;
    background: var(--color);
    height: 4px;
    width: 30px;
    position: relative;
    transition: 0.2s;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    content: "";
    position: absolute;
}
.nav-toggle-label span::before{
    bottom: 9px;
}
.nav-toggle-label span::after{
    top: 9px;
}
.nav-toggle-label.close span{
    background: transparent;
}
.nav-toggle-label.close span:before{
    top: 0 ;
    bottom: 0;
    transform: rotateZ(45deg);
	background: #fff;
}
.nav-toggle-label.close span:after{
    top: 0;
    bottom:0;
    transform: rotateZ(-45deg);
	background: #fff;
}
nav{
    text-align: left;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;   
    position: relative;
    display: flex;
    align-items: center;
}
nav ul li{
    display: inline-block;
    transition: 0.3s ease-in-out;
    position: relative;
}
nav ul li a{
    color: var(--color);
    text-decoration: none;
    padding: 20px 20px;
    display: block;
    font-size: 19px;
	font-weight: 700;
    line-height: 1.2;
    text-transform: inherit;
	text-align: center;
	letter-spacing: -0.2px;
}
nav ul li a:hover{
    opacity: 0.5;
}

nav ul li a.dona_link{
	margin-left: 20px;
}
/** ----
nav ul li a.menu_link::before{
    content: "";
    display: block;
    height: 1px;
    background: rgba(255,255,255,1);
    transform: scale(0,1);
    transition: transform ease-in-out 250ms;
}
nav ul li a.menu_link::after{
    content: "";
    display: block;
    height: 1px;
    background: rgba(255,255,255,1);
    transform: scale(0,1);
    transition: transform ease-in-out 250ms;
}
nav ul li a.menu_link:hover::before, nav ul li a.menu_link:hover::after{
    transform: scale(1,1);
}
--- */
.link_g_2, .link_g_1{cursor: default;}

nav ul li i{
    float: right;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 1.2rem;
}
/* submenu start*/
nav ul ul{
    position: absolute;
    min-width: 200px;
    background: #fff;
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	padding: 10px 0;
}
.subm_arrow_up{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #ffffff transparent;
    position: absolute;
    padding: 0;
    bottom: 0px;
    left: 40%;
    transform: scale(1,0);
    transform-origin: bottom;
    transition: transform 400ms ease-in-out;
}
nav ul ul li{
    display: block;
    background: #fff;
}
nav ul ul li a{
    opacity: 1;
    color: #000;
    font-size: 16px;
    line-height: 18px;
    padding: 10px 15px;
	transition: .3s;
}
nav ul ul li:hover{
    background: #fff;
}
nav ul li:hover ul, nav ul li:hover .subm_arrow_up{
    transform: scale(1,1);
}
nav ul li ul li a:hover{
    opacity: 1;
	color: #438ee2;
}

.nav-toggle:checked ~ nav{
    transform: scale(1,1);
}
.nav-toggle:checked ~ nav a{
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

.nav-toggle-label{
    display: none;
}

.top_right{
	padding-left: 20px;
}

.top_right .lang{
	display: flex;
}
.top_right .lang a{
    font-size: 14px;
    font-weight: 400;
	line-height: 1;
    transition: all 0.5s;
	padding: 0px;
	display: flex;
	align-items: center;
	word-break: keep-all;
}
.top_right .lang a svg{
	fill: var(--color);
	height: 23px;
	width: 23px;
}

.top_right .lang a:hover{
    opacity: 0.5;
}
.top_right .lang a.on{
    cursor: default;
	background: #fff;
	color: #ffbd59;
	border-radius: 5px;
}
.top_right .lang a:hover.on{
    opacity: 1;
}
.top_right .lang .divi_l{
    margin: 0px 2px;
    display: inline-block;
}

.close{
    opacity: 1;
    font-size: 1.2rem;
}
.close:hover{
    opacity: 1;
}
.txt_link{
	text-decoration: none;
}
.txt_link:hover{
	text-decoration: none;
	opacity: .5;
}

header.navbar-fixed-top{
	background: var(--color);
	position: fixed;
}
header.navbar-fixed-top .container{
	padding: 15px 35px;
}
header.navbar-fixed-top .logo{
	width: 160px;
}
header.navbar-fixed-top .logo_1{ display: flex;}
header.navbar-fixed-top .logo_2{display: none;}
header.navbar-fixed-top nav ul li a{
	font-size: 18px;
	color: #fff;
}
header.navbar-fixed-top nav ul li a.dona_link{
	color: var(--color)
}
header.navbar-fixed-top nav ul li a.dona_link:hover{
	background: #ffdfa4;
}
header.navbar-fixed-top .top_right .lang a svg{
	fill: #fff;
}
header.navbar-fixed-top .nav-toggle-label span,
header.navbar-fixed-top .nav-toggle-label span::before,
header.navbar-fixed-top .nav-toggle-label span::after{
    background: #fff;
}
header.navbar-fixed-top .nav-toggle-label.close span{
	background: transparent;
}

.wrapper_cover {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.75);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease-in-out;
}

.body.nav-open {
  overflow: hidden;
}

/* ---------------------------------------------------------*/
.hero{
	background: #ffdfa4;
	position: relative;
	height: 100vh;
	overflow: hidden;
	padding-top: 60px;
	min-height: 850px;
	display: flex;
}

.sec_bg{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0.3;
}
.sec_bg img{
	object-fit: fill;
	height: 100%;
}
.hero .container{
	margin: auto;
	padding: 0px 0 0;
	position: relative;
	z-index: 10;
	width: 65%;
	max-width: 700px;
	min-height: 900px;
}

.hero_ele {
	position: absolute;
  top: 50%;
  left: 50%;
	z-index: 10;
}

.hero_year{ width: 100%; transform: translate(-50%, -64%);}
.hero_g1{  width: 31%; top: 63%; left: 58%; animation: horse_a1 1s linear infinite both; z-index: 11;}
@keyframes horse_a1{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-14deg);}
	100% { transform: rotate(0deg);}
}

.horse_1, .horse_2{ position: relative; width: 100%; aspect-ratio: 1;}
.horse1_body{ 
	position: absolute;
	width: 100%;
}
.horse1_head{
	position: absolute;
  width: 87%;
  top: -46.5%;
  left: -34.5%;
  transform-origin: right;
	 animation: horse_a1_head 1s linear infinite both;
}
@keyframes horse_a1_head{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-11deg); top: -54.5%; left: -38.5%;}
	100% { transform: rotate(0deg);}
}

.horse1_tail{
	position: absolute;
  width: 37%;
  top: 23%;
  right: -29%;
	z-index: 1;
	transform-origin: left;
	animation: horse_a1_tail 1s linear infinite both;
}
@keyframes horse_a1_tail{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-42deg); top: 16%; right: -41%;}
	100% { transform: rotate(0deg);}
}

.horse1_f_foot{
	position: absolute;
  width: 57%;
  top: 20%;
  left: -22%;
	transform-origin: top;
	animation: horse_a1_f_foot 1s linear infinite both;
}
@keyframes horse_a1_f_foot{
	0% { transform: rotate(0deg);}
	30%{ transform: rotate(54deg); top: 4%; left: -19%;}
	100% { transform: rotate(0deg);}
}

.horse1_b_foot{
	position: absolute;
  width: 35%;
  top: 32%;
  right: 2%;
	transform-origin: top;
	animation: horse_a1_b_foot 1s linear infinite both;
}
@keyframes horse_a1_b_foot{
	0% { transform: rotate(0deg);}
	70%{ transform: rotate(-40deg); top: 32%; right: 4%;}
	100% { transform: rotate(0deg);}
}

.hero_g2{  width: 33%; top: 59%; left: 12%; animation: horse_a2 0.8s linear infinite both;}
@keyframes horse_a2{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-10deg);}
	100% { transform: rotate(0deg);}
}
.horse2_body{ 
	position: absolute;
	width: 100%;
}
.horse2_head{
	position: absolute;
  width: 87%;
  top: -40.5%;
  left: -46.5%;
  transform-origin: right;
	 animation: horse_a2_head 0.8s linear infinite both;
}
@keyframes horse_a2_head{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-15deg); top: -46.5%; left: -51.5%;}
	100% { transform: rotate(0deg);}
}

.horse2_tail{
	position: absolute;
  width: 30%;
  top: 17%;
  right: -22%;
	z-index: 1;
	transform-origin: left;
	animation: horse_a2_tail 0.8s linear infinite both;
}
@keyframes horse_a2_tail{
	0% { transform: rotate(0deg);}
	50%{ transform: rotate(-57deg); top: 7%; right: -37%;}
	100% { transform: rotate(0deg);}
}

.horse2_f_foot{
	position: absolute;
  width: 48%;
  top: 25%;
  left: -1%;
	transform-origin: top;
	animation: horse_a2_f_foot 0.8s linear infinite both;
}
@keyframes horse_a2_f_foot{
	0% { transform: rotate(0deg);}
	30%{ transform: rotate(72deg); top: 27%; left: -1%;}
	100% { transform: rotate(0deg);}
}

.horse2_b_foot{
	position: absolute;
  width: 38%;
  top: 25%;
  right: 5%;
	transform-origin: top;
	animation: horse_a2_b_foot 0.8s linear infinite both;
}
@keyframes horse_a2_b_foot{
	0% { transform: rotate(0deg);}
	70%{ transform: rotate(-62deg); top: 35%; right: 8%;}
	100% { transform: rotate(0deg);}
}

.cloub_bg{
	position: absolute;
	width: 2000px;
	top: 50%;
	left: 0;
	z-index: -3;
	transform: translateY(-50%);
}
.cloub_bg img{
	width: 380%;
	animation: cloub_bg 60s linear infinite;
	float: right;
}
@keyframes cloub_bg{
	0% { transform: translateX(0%);}
	100%{ transform: translateX(50%);}
}

.firework_g1{
	width: 20%;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-50%, -225%);
}
.firework_g1 img{
	animation: fire_g1 5s linear infinite;
}
@keyframes fire_g1{
	0% { transform: scale(0.1); opacity: 0;}
	10% { transform: scale(1.5); opacity: 1;}
	50% { transform: scale(1.8); opacity: 1;}
	100%{ transform: scale(2.5); opacity: 0}
}

.firework_g2{
	width: 20%;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(227%, -163%);
}
.firework_g2 img{
	animation: fire_g2 8s linear infinite;
}
@keyframes fire_g2{
	0% { transform: scale(0.1); opacity: 0;}
	10% { transform: scale(1.3); opacity: 1;}
	50% { transform: scale(1.5); opacity: 1;}
	100%{ transform: scale(1.8); opacity: 0}
}

.firework_g3{
	width: 20%;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-324%, -123%);
}
.firework_g3 img{
	animation: fire_g3 4.3s linear infinite;
}
@keyframes fire_g3{
	0% { transform: scale(0.01); opacity: 0;}
	5% { transform: scale(0.01); opacity: 0;}
	12% { transform: scale(0.8); opacity: 1;}
	50% { transform: scale(1); opacity: 1;}
	100%{ transform: scale(1.2); opacity: 0}
}

.firework_g4{
	width: 20%;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-254%, -260%);
}
.firework_g4 img{
	animation: fire_g4 3.3s linear infinite;
}
@keyframes fire_g4{
	0% { transform: scale(0.01); opacity: 0;}
	12% { transform: scale(0.8); opacity: 1;}
	50% { transform: scale(1); opacity: 1;}
	100%{ transform: scale(1.2); opacity: 0}
}



.hero_20{
  transform: translate(-230%, -10%);
  width: 30%;
	max-width: 230px;
}
.hero_25{
  transform: translate(132%, -10%);
  width: 29%;
	max-width: 230px;
}
.hero_tagline{
  transform: translate(68%, 350%);
  width: 29%;
  max-width: 200px;
}
.hero_h1{
  transform: translate(-170%, -165%);
  width: 40%;
  max-width: 360px;
}
.hero_h2{
  transform: translate(71%, -165%);
  width: 40%;
  max-width: 360px;
}


.hero_g3{
transform: translate(160%, 102%);
  width: 21%;
  max-width: 150px;
  z-index: 0;
}
.hero_g4{
transform: translate(-234%, 130%);
  width: 25%;
  max-width: 160px;
  z-index: 0;
}

.left_bottom_c{
	position: fixed;
  width: 28%;
  bottom: 0;
  left: 0;
  max-width: 320px;
	min-width: 220px;
	display: flex;
	z-index: 45;
}
.right_bottom_c{
	position: fixed;
  width: 26%;
  bottom: 0;
  right: 0;
  max-width: 260px;
	min-width: 160px;
	display: flex;
	z-index: 40;
}
.don_now{
	position: fixed;
	width: 14%;
	max-width: 160px;
	min-width: 110px;
	bottom: 2%;
  left: 5%;
  z-index: 60;
}



.newyear_lion{
	position: absolute;
	bottom: -395px;
	left: 50%;
	transform: translateX(-50%);
	width: 570px;
	transition: .2s cubic-bezier(0.5, 0.8, 1.0, 0.8);
}

.top_call_act{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	transform: translate(80%, 0%);
}

.newyear_lion:hover{
	bottom: -300px;
}
.red_luck{
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 190px;
}
.boom{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 160%);
	width: 10%;
	transition: .8s;
	opacity: 0;
}
.cny_bg{
	position: absolute;
	width: 105%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}
.top_hl{
	position: absolute;
	width: 82%;
	max-width: 1000px;
	top: 230px;
	left: 50%;
	transform: translateX(-53%);
}
.top_gix{
	position: absolute;
	width: 2000px;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}
.top_space{
	height: 70px;
	background: #fff;
}

.bottom_gix{
	position: absolute;
	width: 2100px;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}
.pure_dona{
	display: flex;
	justify-content: center;
}
.pure_dona:hover{
	transform: scale(1.1);
}

.intro_c{
	position: relative;
	background: none;
	text-align: center;
	color: #fff;
}
.intro_c .container{
	padding: 80px 0px 80px;
	width: 95%;
}
.intro_c h2{
	line-height: 1.6;
}
.intro_c h2.section_hl{
	line-height: 1.2;
}

.intro_c h2 b{
	font-size: 1.5em;
	line-height: 1;
	color: #b82320;
}
.intro_c h1{
	font-size: 35px;
	line-height: 1.3;
	margin: 30px 0 25px;
	font-weight: 500;
}
.wish_list{
	position: relative;
	background: none;
	text-align: center;
	color: #222;
}
.wish_list .container{
	max-width: 1600px;
	padding: 100px 0px 100px;
	width: 95%;
	position: relative;
}
.wish_list .section_hl{
	max-width: 650px;
  margin: 40px auto;
}
.section_hl{
	font-size: 40px;
	line-height: 1.2;
	font-weight: 900;
	color: var(--color);
	letter-spacing: -0.5px;
	padding: 0 20px;
}
.section_sub_hl_r{
	line-height: 1.4;
	color: #b82320;
}
.section_sub_hl_r small{
	font-size: 1rem;
	font-weight: 400;
}
.section_sub_hl{
	font-size: 25px;
	line-height: 1.4;
}

.deco_bot{
	overflow: hidden;
	position: absolute;
	width: 100%;
	top: -140px;
}
.deco_img{
	background: bottom center url("../images/deco_bottom.png") repeat-x;
	width: 100%;
	height: 250px;
}
.don_btu{
	padding: 15px 30px; background: #ffd200; color: #000; border-radius: 50px; 
	display: inline-block; font-weight: 700; font-size: 25px;
}
.don_btu:hover{color: #000; background: #fff71c;}
.call_action_t{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
	margin: 15px 0;
}


.wish_area {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  padding: 20px 0 50px;
}
.wish_box {
  flex: 0 0 320px;
  position: relative;
  margin-bottom: 0px;
  padding: 0px;
}
.donor_name_area {
  position: absolute;
  left: 50%;
	top: 71%;
  transform: translate(-50%, -42%);
  padding: 0px 50px;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  line-height: 1.3;
	text-align: center;
	color: #000;
}
.donor_name_area p{
	margin: 2px 0;
}
.donor_name{
	font-weight: 700;
	font-size: 18px;
}
.link_to{
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	color: #603813;	
}
.link_to b{
	font-weight: 700;
}


.rating_area{
	position: relative;
	background: 0px 0px url("../images/wish_bg.jpg") repeat;
}
.rating_area .container{
	padding: 60px 0 100px;
}
.rating_area h2{
	text-align: center;
	font-size: 50px;
}
.rating_row{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 60px;
	
}
.rating_box{
	flex: 0 0 25%;
	min-width: 300px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	flex-direction: column;
}
.rate_img{
	flex: 0 0 150px;
	margin-right: 8px;
	margin-bottom: -130px;
	z-index: 1;
	max-width: 260px;
}
.rate_info{
	background: #fff;
  padding: 120px 20px 30px;
  border-radius: 50px;
  text-align: center;
	width: 100%;
}
.rating_box h3{
	margin: 10px 0 10px;
	color: #222;
	font-size: 20px;
}
.rating_box p{
	margin: 5px 0;
	line-height: 1.6;
	font-weight: 400;
}
.rating_box p b{
	font-weight: 700;
	font-size: 180%;
	line-height: 1;
	color: #d13930;
}
.rating_box .action_b a{
	background: #57c6b9;
	border-radius: 20px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	padding: 6px 6px 6px 20px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
}
.rating_box .action_b a:hover{
	background: var(--color);
}

.rating_box .know_more{	margin-top: 15px;  line-height: 1.4;  color: #666;  font-size: 14px;}
.rating_box .know_more a{ color: #666; font-weight: 700;}
.rating_box .know_more a:hover{ color: #d13930;}

.web{display: block;}
.mo{display: none;}


.all_wish{ max-width: 1200px; margin: auto;}
.all_wish .wish_box{ flex: 0 0 22%; padding: 30px 40px;}
.all_wish .wish_box .wish_img img{ transform: rotate(10deg);}

.content{ max-width: 1200px; margin: auto; padding: 0px 30px;}
.content p{ color: #fff; line-height: 1.6; }

.hi-txt{ font-size: 180%; font-style: italic; padding: 0 10px; }

.call_dona_row { margin: 40px 0; display: flex; justify-content: center; align-items: center; position: relative; gap: 10px;}
.call_dona_row .gen_btu{
	background: #eb3a54; color: #fff; padding: 12px 35px; font-size: 25px; display: flex; align-items: center;
}
.call_dona_row .gen_btu:hover{
	background: var(--color);
}
.call_dona_row .gen_btu svg{
	margin-right: -15px;
}

.on_pop{
	display: block;
	position: relative;
	cursor: pointer;
	transition: .2s;
}
.on_pop .on_popup{
	background: #fff;
	color: #b82320;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 10px 15px;
	border-radius: 30px;
	opacity: 0;
	transition: .5s;
}
.on_pop:hover{
	transform: scale(1.2);
}
.on_pop:hover .on_popup{
	opacity: 1;
	top: 50%;
	z-index: 50;
}

.on_pop .on_popup h3{
	margin: 10px 0;
	font-size: 18px;
	font-weight: 900;
}
.on_pop .on_popup p{
	font-size: 13px;
	margin: 10px 0;
	color: #000;
	line-height: 1.4;
}

.p_fun_r{ display: flex; justify-content: space-between; margin-top: 15px;}
.sec_contact{ background: #d13930; color: #fff; width: 100%; height: auto; text-align: center; padding: 20px 0px; position: relative;}
.sec_contact .container{margin: 30px auto; padding: 0px}
.sec_contact h3, .sec_contact h4{color: #fff;}
.sec_contact h3{ margin-bottom: 40px; padding: 0 30px;}
.sec_contact h4{ margin: 5px 0; line-height: 1;}
.step_area{display: flex; justify-content: center;}
.step_area .col_3{margin: 0 60px;}
.step_no{font-size: 30px; color: #fff; margin: 5px 0;}
.sec_contact p{font-size: 18px; margin-top: 0px; margin-bottom: 0px; font-weight: 700; }
.sec_contact .contact_no{font-size: 23px;}
.contact_ico{width: 70px; height: 70px; display: inline-block; background: #fff; border-radius: 50%; padding: 15px; margin-bottom: 25px;}
.contact_col{ text-align: center; flex: 0 0 24%; line-height: 1.4;}
.contact_col i{width: 32px; height: 32px; display: inline-block; margin-bottom: 10px;}
.sec_contact .contact_col a{ color: #fff; line-height: 1.4; font-weight: 700;}
.sec_contact .contact_col a:hover{ opacity: 0.5;}

.footer{ background: #d13930; color: #fff; font-size: 14px; position: relative; line-height: 1.2; }
.footer .container{ display: flex; width: 90%; margin: auto; padding:20px 15px 60px; }
.colf_2{ flex: 1;}
.footer a{color: #fff; text-decoration: underline;}
.footer a:hover{opacity: .5; text-decoration: none;}
.fb_area .icon_fb{width: 30px; height: 30px; display: inline-block; float: right; margin-left: 10px; cursor: pointer;}
.icon_fb img{width: 100%;}
.fb_area{display: flex; align-items: center; justify-content: flex-end;}
.fb_area a{margin-left: 5px}
.footer p{
	margin: 10px 0px;
}

.footer .colf_2 i { width: 23px; display: inline-block; margin-right: 10px; vertical-align: middle;}


.story{ position: relative; text-align: center;  background: #fff4e6;}
.story .container{ position: relative;}
.story .section_hl, .story h4{ color: var(--color);}
.story h4{ font-size: 24px; margin-bottom: 10px; text-align: left;}

.story p{ line-height: 1.6; color: #222; font-weight: 400; text-align: justify; text-justify: inter-character;}

.story_img{ max-width: 600px; margin: auto;}

.meno_img{ display: inline-block; max-width: 250px; width: 80%; vertical-align: middle; margin: 20px; box-shadow: 0px 8px 12px #a6511d;}


.row {
	display: flex;
	flex-wrap: wrap;
}
.story .row{
	margin: 50px 0 50px;
}

.step_box {
	text-align: left;
	flex: 0 0 65%;
	
}

.step_top_hl {
	color: #000;
	font-weight: 400;
	font-size: 30px;
	margin: 0 0 15px;
}

.step_row {
	display: flex;
	margin: 15px 0;
}

.step_nu {
	display: flex;
	flex: 0 0 65px;
	height: 65px;
	border-radius: 50%;
	border: 4px solid #000;
	color: #000;
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
}

.story .step_hl {
	margin: 5px 0 10px;
	line-height: 1;
	color: #000;
	font-weight: 500;
	font-size: 35px;
}

.step_cont {
	margin: 6px 0;
}
.step_cont p{
	margin: 10px 0;
}

.r_photo_area {
	flex: 0 0 35%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;	
	align-items: flex-end;
}
.r_photo_area img{
	max-width: 305px;
	margin-bottom: 10px;
	margin-left: 30px;
}

.row_c {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.c_photo {
	padding: 30px ;
	max-width: 400px;
}

.dona_purpose {
	position: relative;
	text-align: center;
	color: #000;
}
.dona_purpose .container{
	width: 95%;
	padding: 60px 0 120px;
}

.dona_purpose .row_c{
	margin-top: 4%;
}
.col_2 {
	flex: 0 0 25%;
	padding: 20px 10px;
}

.luck_p_img {
	max-width: 280px;
	margin: -36px auto 20px;
	transform: rotate(-8deg);
}

.purpose_box{
	height: 100%;
	background: #fff;
	border-radius: 50px;
	padding: 20px 30px 30px;
}
.purpose_box h3{
	font-size: 32px;
	font-weight: 900;
	color: #4bc1b3;
	margin: 0px;
	line-height: 1.2;
	padding: 0 0px;
	letter-spacing: -0.5px;
}
.purpose_box h4{
	color: #b82320;
	font-size: 21px;
	font-weight: 900;
	margin: 10px 0 5px;
	padding: 0 20px;
	line-height: 1.2;
}
.purpose_box p{
	color: #000;
	margin: 10px 0;
	padding: 0px;
	font-size: 15px;
	font-weight: 400;
}


.dona_gift{
	position: relative;
	background: #fff;
}
.dona_gift .container{
	position: relative;
	padding: 100px 0px;
	max-width: 1200px;
}
.dona_gift .row_c{
	align-items: center;
	gap: 40px;
}
.dona_gift .col_2{
	flex: 0 0 36%;
	padding: 0;
}
.dona_gift .col_2:last-child{
	background: #fff;
  border-radius: 20px;
  padding: 20px;
}
.dona_gift .section_hl{
	color: var(--color);
	padding: 0;
}
.dona_gift p{
	color: #000;
	line-height: 1.6;
}
.dona_gift p b{
	font-weight: 900;
	color: var(--color);
}
.dona_gift p small{
	line-height: 1.4;
	display: block;
	font-weight: 400;
}
.dona_gift .call_dona_row{
	justify-content: flex-start;
}
.call_dona_row .gen_btu{
	margin: 0;
}
.gift_img{
	max-width: 250px;
	margin: auto;
	transform: translate(-20px, -30px) rotate(10deg);
}
.Hello{
	display: inline-block;
}

.side_graphic_g1{
	position: absolute;
	width: 400px;
  top: -293px;
  right: 0px;
	overflow: hidden;
	z-index: 10;
}
.side_graphic_g2{
	position: absolute;
	width: 205px;
  top: -100px;
  left: 0px;
	overflow: hidden;
}
.snake_top_l img{
	margin-left: -5px;
}

.side_graphic_g3{
	position: absolute;
	width: 180px;
  bottom: -106px;
  left: 0px;
	overflow: hidden;
	z-index: 1;
}
.side_graphic_g4{
	position: absolute;
	width: 170px;
  bottom: -187px;
  right: 0px;
	overflow: hidden;
	z-index: 1;
}

.why_dona, .why_dona .container{
	position: relative;
	text-align: center;
	background: #51c5cc;
}
.why_dona .container{
	padding: 120px 0 120px;
	max-width: 1200px;
	width: 75%;
}
.why_dona .sec_bg{
	display: none;
}
.icon_ach {
  max-width: 140px;
  margin: auto;
  display: flex;
	align-items: center;
	background: #fff;
	padding: 25px;
	border-radius: 1000px;
}
.ach_p {
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.ach_p b {
  font-size: 2.6em;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -1px;
	margin: 10px 0;
	display: inline-block;
}
.why_dona p{
	color: #000;
}
.why_dona p small{
	font-weight: 400;
}
.why_dona .section_hl{
	margin-bottom: 25px;
  font-size: 30px;
  max-width: 600px;
  margin: auto;
	color: #fff;
}
.why_dona .col_2{
	padding: 20px;
}

.story .col_2{
	flex: 0 0 50%;
}
.story .row_c{
	align-items: center;
	flex-direction: row-reverse;
}

sup{ font-size: 70%; line-height: 1;}

.sub_title {
	color: #b82320;
}










.row_f{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.row_f .col_2{
	flex: 0 0 48%;
	padding: 0;
}
.row_f .col_2 h3{
	margin: 0 0 5px;
}
.row_f .col_2 p{
	margin-top: 5px;
	text-align: left
}

#tnc ol, #tnc li{
	list-style: decimal;
}
#tnc ol{
	margin: 30px 0
}
#tnc ol li{
	margin: 6px 0;
	font-size: 90%;
	line-height: 1.4;
}
#tnc ol li a{
	color: #000;
	text-decoration: underline;
}
#tnc ol li a:hover{
	color: #000;
	text-decoration: none;
}

.remark{
	text-align: center;
  font-weight: 400;
  max-width: 240px;
  margin: auto;
  font-size: 14px;
  line-height: 1.3;
}



/* ------------------------ TC ---------------------------------*/
body.tc{ font-size: 18px;}
body.tc nav ul li a{ font-size: 24px; letter-spacing: 1px; padding: 15px 25px;}
body.tc header.navbar-fixed-top nav ul li a{ font-size: 20px;}
body.tc header.navbar-fixed-top .top_right .lang a{ font-size: 14px;}
body.tc header .container{padding: 25px 40px;}
body.tc header.navbar-fixed-top .container{padding: 20px 40px;}

body.tc .purpose_box p{ font-size: 16px;}
body.tc .purpose_box h4{ font-size: 23px; font-weight: 700;}

body.tc .section_hl{ font-size: 45px; font-weight: 700; letter-spacing: 1px;}
body.tc .why_dona .section_hl{ font-size: 35px; max-width: 630px;}

body.tc .story h4{ font-size: 28px;}



/* ------------------------ TC - end ---------------------------------*/




/* ------------------------ mobile ---------------------------------*/
@media(max-width: 1400px){
	nav ul li a{ font-size: 1.35vw; padding: 20px 10px; color: var(--color);}
	nav ul li a.dona_link{ padding: 12px 18px; margin-left: 10px;}
	.top_right .lang a{ font-size: 13px;}
	.logo{ width: 160px;}
	header .container{ padding: 20px 30px;}
	
	header.navbar-fixed-top nav ul li a{ font-size: 1.35vw; color: #fff;}
	header.navbar-fixed-top nav ul li a.dona_link{ color: var(--color);}
	
	body.tc nav ul li a{ font-size: 1.7vw; padding: 15px 25px;}	
	
}

@media(max-width: 1100px){	
	.hero{ height: inherit; min-height: inherit; width: 100%;}
	.hero .container{ aspect-ratio:0.65; min-height: inherit;}
	
	body.tc nav ul li a{ font-size: 1.9vw; padding: 15px 20px;}	
}

@media(max-width: 1030px){	
	
    header .container{
        width: 100%;
		padding: 0px 30px;
		justify-content: center;
		flex-direction: column;
    }
    nav ul li a {
        font-size: 16px;
        padding: 20px 10px;
		line-height: 18px;
    }

    header.top_open{
        padding-bottom: 180px;
		background: var(--color);
   		height: 100vh;		
    }
	header.top_open .container{
		display: block;
	}
    header{
        grid-template-columns: unset;
    }

    .logo{
        grid-column: unset;
        text-align: center;
		margin: 0 auto;
		width: 180px;
		padding: 28px 0;
    }
	
    .nav-toggle-label{
        display: flex;
    }
    nav{
        grid-column: unset;		
    }
    nav ul{
        display: none;
        width: 100%;
        position: static;
    }
    nav ul li{
        display: block;
		border-top: 1px solid rgba(243,155,155,.5);
		text-align: center;
		letter-spacing: 1px;
    }
	nav ul li.btu_li{ border: none;}
	nav ul li:last-child{ border: none;}
    nav ul ul{
        position: static;
        display: block;
        background: rgba(243,255,255,0);
        box-shadow: none;
        transform: scale(1,1);
		padding: 0 0 20px;
    }
    nav ul ul li{
        background: rgba(255,255,255,0);
		border: none;
    }
    nav ul li:hover ul{
        display: block;
    }
    nav ul ul li a{
        opacity: 1;
        color: #438ee2;
    }
    nav ul ul li:hover{
        background: rgba(255,255,255,0);
        opacity: 0.5;
    }
    nav ul li i {
    float: inherit;
    padding-left: 10px;
    padding-top: 2px;
    vertical-align: text-top;
    }
    nav ul li a , header.navbar-fixed-top nav ul li a{
		font-size: 25px;
		padding: 18px 0px;
		line-height: 1.4;
        text-align: center;
		font-weight: 900;
    }
	nav ul li a.enrol_link{
		margin-top: 20px;
	}
	nav ul li.btu_li a.enrol_link{
		margin-top: 10px;
	}
	.top_right .lang a{
		font-size: 16px;
		padding: 12px 12px;
	}
	.top_right .lang .divi_l{
		margin: 0px 10px;
	}
	.top_right .lang a.on{
		padding: 12px 12px;
		color: #ffbd59;
		background:#fff;
	}
	nav ul li a.dona_link, header.navbar-fixed-top nav ul li a.dona_link{
		font-size: 25px;
		padding: 20px 35px;
		margin: 30px 0;
	}
	
	header.navbar-fixed-top .logo{
		padding: 10px 0;
		width: 150px;
	}
	header.navbar-fixed-top .nav-toggle-label{
		height: 88px;
	}
	.top_right{
		display: flex;
		justify-content: center;
		padding: 0;
		margin-top: 10px;
		color: #fff;
	}
	
	.nav-open .wrapper_cover {
	  opacity: 1;
	  visibility: visible;
	}
	.nav-open nav{
		margin-top: 10%;
	}
	.nav-open nav ul li a{ color: #fff;}
	.nav-open nav ul li a.dona_link{ color: var(--color);}
	.nav-open nav ul li a.dona_link:hover{ background: #ffdfa4; }
	.nav-open .logo_1{ display: flex;}
	.nav-open .logo_2{ display: none;}
	.nav-open .logo{ margin-bottom: 30px; padding: 28px 0 10px;}
	
	
	
	.scene .snake_kv{
		aspect-ratio: 0.6;
	}
	.hero_h1{
		transform: translate(-50%, -400%);
  		width: 62%;
		max-width: inherit;
	}
	.hero_h2{
		transform: translate(-50%, 440%);
  		width: 62%;
		max-width: inherit;
	}
	.hero_tagline {
	  transform: translate(66%, 386%);
	  width: 29%;
	}
	.hero_20 {
	  transform: translate(91%, 70%);
	  width: 18%;
	}
	.hero_25 {
	  transform: translate(204%, 70%);
	  width: 17%;
	}
	.hero_g4{
		transform: translate(-226%, 112%);
	}
	.hero_g3 {
	  transform: translate(158%, 102%);
	  width: 21%;
	}	
	
	.top_hl{ width: 85%;}
	
	.top_call_act{width: 27%; transform: translate(49%, -47%);}	
	
	.all_wish .wish_box{ padding: 20px 20px; flex: 0 0 33%;}
	.on_pop .on_popup{ position: inherit; transform: none; margin-top: -7px; opacity: 1; background: none; padding: 10px 0;}
	.on_pop .on_popup h3{ font-size: 22px; font-weight: 900;}
	.on_pop .on_popup p{ font-size: 15px;}
	.on_pop:hover{	transform: scale(1);}
	.all_wish .wish_box .wish_img img{ max-width: 160px;}
	
	
	#en nav ul li a{ font-size: 20px;}
	#en .intro_c h1{ font-size: 35px; padding: 0 20px;}
	#en .intro_c h2{ font-size: 18px;}
	
	#en .intro_c .section_hl, #en .section_hl{ font-size: 30px; line-height: 1.4;}
	
	#en .story h2{ font-size: 35px;}
	#en .story .step_hl{ font-size: 30px;}
	#en .step_nu {  font-size: 30px;  flex: 0 0 61px;  height: 60px;}
	#en header.navbar-fixed-top nav ul li a{ font-size: 20px;}
	#en .call_dona_row .gen_btu{ font-size: 22px;}
	
	.top_gix {width: 1400px;}
	.top_space{ height: 73px;}
	
	.dona_purpose .row_c { margin-top: 5%;}
	.dona_purpose .col_2{ flex:0 0 50%; margin-bottom: 1%; padding: 15px 10px;}
	.dona_purpose .call_dona_row{ margin-top: 0px;}
	.row_f .col_2 {  flex: 0 0 100%;  padding: 0 0 20px;}
	
	.why_dona .col_2{
		flex: 0 0 50%;
		margin-bottom: 20px;
		padding: 20px 40px;
	}
	
	.story .row_c{
		flex-direction: column-reverse;
	}
	.story_img{
		max-width: 500px;
	}
	
	.hero{ padding-top: 10px;}
	.hero_g1{ top: 70%}
	.hero_g2{ top: 69%;}
	
	
	body.tc header .container{padding: 0px 30px;}
	body.tc header.navbar-fixed-top .container {   padding: 15px 35px;}
	body.tc nav ul li a, body.tc header.navbar-fixed-top nav ul li a{ font-size: 26px; padding: 12px 25px;}	
	body.tc header.navbar-fixed-top nav ul li a.gen_btu{ line-height: 1;}
	body.tc header.navbar-fixed-top .top_right .lang a{ font-size: 16px;}
	

}

@media(max-width: 786px){		
	.top_call_act{ width: 24%; transform: translate(18%, 21%);}
	.red_luck{ top: 60px; width: 100px;}
	.cny_bg{ width: 150%;}
	.top_hl{ width: 55%;  top: 50%; transform: translate(-50%, -66%);}
	.wish_list .container{ padding: 60px 30px; width: 100%;}
	.wish_list h1{ font-size: 35px;}
	
	.white-popup{ width: 90%;}
	.white-popup img{ width: 70%;}
	.don_btu{ font-size: 22px;}
	.web{display: none;}
	.mo{display: block;}	
	
	.hero .container{ width: 70%;}
	
	.intro_c .container{padding-top: 0px;}	
	
	.top_call_act {  width: 26%;  transform: translate(73%, 86%);}
	.p_fun_r { flex-direction: column;}
	.p_fun_r .contact_col { margin: 30px 0px;}
	.footer .container {  display: block;  text-align: center;}
	.fb_area {  display: flex;  justify-content: center; padding-top: 40px;}
	
	.all_wish .wish_box{ flex: 0 0 32%;}
	
	
	.story .row{ flex-direction: column;}
	.r_photo_area{ flex-direction: row; flex-wrap: wrap; justify-content: center;}
	.r_photo_area img{ margin: 0 5px 0px;}
	.step_nu{ flex: 0 0 60px; height: 60px; font-size: 38px; width: 60px; margin: 0px auto 10px;}
	.step_cont{ margin: 5px 0 10px;}
	.story .step_hl{ font-size: 35px;}
	
	.step_row{ display: block; text-align: center; margin: 40px 0;}
	.step_top_hl{ text-align: center;}
	.view_more{ width: 50px; height: 50px;}
	
	.intro_c h2{ font-size: 1.4em; line-height: 1.4;}
	.intro_c h2.section_hl, .section_hl{ font-size: 40px;}
	.chin_separater{ width: 200px;}	
	
	.footer .colf_2 i { width: 100%; margin: 0 auto 10px;}
	.footer .colf_2 i img{ width: 32px;}
	.footer p{ margin: 10px 0 50px;}	
	
	.dona_gift .row_c{
		flex-direction: column-reverse; gap: 0px;
	}
	.gift_img {
	  max-width: 260px;
	  margin: auto;
	  width: 90%;
		transform: translate(5px, 16px) rotate(10deg);
	}
	.dona_gift .col_2{
		padding: 10px 20px;
		text-align: center;
	}
	.dona_gift .container{
		padding: 80px 0 220px;
	}
	.dona_gift .call_dona_row {
	  justify-content: center;
	}
	
	.why_dona .col_2{
		padding: 20px 25px;
	}
	.ach_p{
		max-width: 320px;
		margin: auto;
	}
	.why_dona .container{
		padding: 140px 0;
	}
	.side_graphic_g1{ width: 340px; top: -249px;}
	
	#en .intro_c .section_hl, #en .section_hl{ font-size: 30px; line-height: 1.4;}
}

@media(max-width: 586px){	
	
	.cny_bg{ width: 295%; transform: translate(-80%, -35%);}
	.top_hl{ width: 65%;  top: 50%; transform: translate(-50%, -75%);}
	.logo, header.navbar-fixed-top .logo{ width: 35%; min-width: 140px;}
	.top_gix{ width: 1200px;}
	.top_space{ height: 65px;}
	.bottom_gix{ width: 1800px;}
	
	.top_call_act {  width: 30%;  transform: translate(55%, 71%);}
	.all_wish .wish_box{ flex: 0 0 48%;}
	.section_sub_hl{ font-size: 25px;}
	
	.content p{ font-size: 18px;}
	.intro_c h2.section_hl, .section_hl{ font-size: 7vw;}
	.section_sub_hl {  font-size: 22px; align-items: center;}
	.story .container {  padding: 50px 20px 80px;}
	
	.intro_c h1{ font-size: 35px; padding: 0 20px;}
	.section_sub_hl_r{ font-size: 22px;}
	
	.r_photo_area{ display: block;}
	
	.row_c{ flex-direction: column;}
	.col_2{ padding: 40px;}

	.purpose_box h3{ margin: 0;}
	
	.dona_purpose .container{ padding: 50px 20px 120px;}
	
	.hero .container{
		width: 80%;
		margin-top: 30px;
		aspect-ratio: 0.6;
	}
	
	.story .col_2{
		padding: 10px 0px;
	}
	.story p{
		text-align: left;
	}
	
	.dona_purpose .col_2{
		margin: 0% 0;
    	padding: 5% 0px;
	}
	.purpose_box{
		padding: 8% 25px 8%;
	}
	.luck_p_img{ max-width: 289px; margin: -63px auto 20px;}
	
	.call_dona_row .gen_btu{
		justify-content: center;
		width: 100%;
	}
	
	.snake_top_r {
	  width: 220px;
	  top: -67px;
	}
	.snake_top_r img{
		margin-right: -20px;
	}
	.snake_top_l{
		width: 120px;
	}
	
	.snake_r_tl{
		width: 190px;
 		top: -51px;
	}
	.snake_r_tr{
		width: 210px;
  		bottom: -76px;
	}
	.why_dona .container{
		width: 90%;
		padding: 120px 0 175px;
	}
	.why_dona .section_hl{
		font-size: 6vw;
	}
	
	.rating_box{
		min-width: inherit;
		flex: 0 0 100%;
		padding: 5px 0;
		max-width: 350px;
	}	
	.cloub_bg{ width: 1600px;}
	
	header .container, body.tc header .container{ padding: 0px 20px;}
	body.tc .section_hl{ font-size: 9vw;}
	body.tc .why_dona .section_hl{ font-size: 5.2vw; }
	
}