:root {
    --color-white: #FFFFFF;
    --color-gray-100: #F1F1F1;
    --color-gray-150: #EFEFEF;
    --color-gray-200: #DEDEDE;
    --color-gray-250: #D9D9D9;
    --color-gray-300: #C3C3C3;
    --color-gray-400: #B5B5B5; 
    --color-gray-500: #9C9C9C;
    --color-gray-700: #525252;
    --color-black: #1A1A1A;

    --color-green-900: #19400C;
    --color-green-800: #006B4B;
    --color-green-700: #25620F;
    --color-green-700-op50: #25620F80;
    --color-green-550: #71AA37;
    --color-green-500: #87AE54;
    --color-green-300: #8F9D78;
    --color-green-200: #B2DA7F;
    --color-green-150: #BEDCA0;

    --color-yellow-200: #F3ECD8;
    --color-yellow-300: #F5E2B2;
    --color-yellow-300-op50: #F5E2B280;
    --color-yellow-400: #EFE26C;
	--color-yellow-500: #EEE743;
    --color-yellow-600: #FFC32B;
    --color-orange-500: #F69D17;
    --color-red-300: #EC7A81;
    --color-red-500: #F2755A;
    --color-red-600: #E86D39;
    --color-red-650: #EB5757;
    --color-red-700: #BE323B;
    --color-red-900: #864141;
    --color-brown-500: #96532D;
    --color-brown-700: #593F30;
    --color-blue-400: #40A9C1;
    --color-blue-500: #4787B6;
    
    --color-white-green-gradient: linear-gradient(to bottom, #FFFFFF, #E3F1B9);
    --color-white-blue-gradient: linear-gradient(to bottom, #FFFFFF 40%, #EDF5FF 70%);

    --fs-xxxl: 36px;
    --fs-xxl: 32px;
    --fs-xl: 24px;
    --fs-lg: 20px;
    --fs-md: 18px;
    --fs-sm: 16px;
    --fs-xs: 14px;
    --fs-xxs: 12px;

    --ff-grand: 'Grandstander', 'Arial', sans-serif;
    --ff-itim: 'Itim', 'Arial', sans-serif;

    --vh: 1vh;
    --100vh: 100vh;
}

/* fonts family */
.ff-grand {
	font-family: var(--ff-grand);
}
.ff-itim {
	font-family: var(--ff-itim);
}
.material-symbols-rounded {
    vertical-align: bottom;
    font-size: 1em;
}

/* general */
html, body {
    scroll-behavior: smooth;
}
body {
	font-family: 'Noto Sans TC', 'PingFang TC', source-han-sans-traditional, 'Microsoft JhengHei','Arial', sans-serif;
	background-color: var(--color-yellow-300);
	font-size: var(--fs-md);
}
body.on-popup-show {
    max-height: calc(var(--vh) * 100);
    overflow-y: hidden;
}
a {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
a, button, input[type="submit"], input[type="button"] {
	cursor: pointer;
}
input, select, textarea, button {
	font-family: 'Noto Sans TC', 'PingFang TC', source-han-sans-traditional, 'Microsoft JhengHei','Arial', sans-serif;
	font-size: var(--fs-md);
}
img {
	height: auto;
	max-width: 100%;
}
/* fonts */
.fs-xxxl { font-size: var(--fs-xxxl); }
.fs-xxl { font-size: var(--fs-xxl); }
.fs-xl { font-size: var(--fs-xl); }
.fs-lg { font-size: var(--fs-lg); }
.fs-md { font-size: var(--fs-md); }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }
.fs-xxs { font-size: var(--fs-xxs); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-nowrap { white-space: nowrap; }

.fw-lighter { font-weight: lighter; }
.fw-normal { font-weight: normal; }
.fw-bold { font-weight: bold; }
.fw-bolder { font-weight: bolder; }

.lh-1 { line-height: 1; }
.lh-2 { line-height: 1.25; }
.lh-3 { line-height: 1.5; }
.lh-4 { line-height: 1.75; }
.lh-5 { line-height: 2; }

.text-ellipsis-2 {
    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.text-shadow {
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.box-shadow {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* color */
.text-white { color: var(--color-white); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-700 { color: var(--color-gray-700); }
.text-black { color: var(--color-black); }
.text-green-800 { color: var(--color-green-800); }
.text-green-700 { color: var(--color-green-700); }
.text-green-550 { color: var(--color-green-550); }
.text-green-300 { color: var(--color-green-300); }
.text-yellow-300 { color: var(--color-yellow-300); }
.text-yellow { color: var(--color-yellow-500); }
.text-orange { color: var(--color-orange-500); }
.text-red-300 { color: var(--color-red-300); }
.text-red { color: var(--color-red-500); }
.text-red-650 { color: var(--color-red-650); }
.text-brown-700 { color: var(--color-brown-700); }
.text-blue { color: var(--color-blue-500); }

.bg-white { background-color: var(--color-white); }
.bg-gray-150 { background-color: var(--color-gray-150); }
.bg-black { background-color: var(--color-black); }
.bg-green-700 { background-color: var(--color-green-700); }
.bg-green-200 { background-color: var(--color-green-200); }
.bg-yellow-300 { background-color: var(--color-yellow-300); }
.bg-orange { background-color: var(--color-orange-500); }
.bg-red { background-color: var(--color-red-500); }

/* hr */
hr {
    display: inline-block;
    width: 100%;
    height: 1px;
    margin: 1rem 0;
    border: 0;
}
.hr-deep-green {
    height: 6px;
    border-radius: 6px;
    background-color: var(--color-green-900);
}
.hr-gray {
    height: 1px;
    border-radius: 6px;
    background-color: var(--color-gray-500);
}
/* size */
.w-fill { width: 100% !important; }
.w-half { width: 50% !important; }
.min-w-100 { min-width: 100px !important; }
.max-w-fill { max-width: 100% !important; }
.max-w-200 { max-width: 200px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-350 { max-width: 350px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-450 { max-width: 450px !important; }
.max-w-460 { max-width: 460px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-660 { max-width: 660px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-900 { max-width: 900px !important; }
.h-auto { height: auto; }

/* display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }
.flex-fill { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }

.d-grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.d-table { display: table; }
.d-row { display: table-row; }
.d-cell { display: table-cell; }

/* position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* space */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-18 { margin-top: 4.5rem; }
.mt-20 { margin-top: 5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-18 { margin-bottom: 4.5rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-30 { margin-bottom: 7.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-7 { margin-left: 1.75rem; }
.ml-8 { margin-left: 2rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-7 { margin-right: 1.75rem; }
.mr-8 { margin-right: 2rem; }

.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-18 { gap: 4.5rem; }
.gap-20 { gap: 5rem; }

/* layout */
section {
	position: relative;
}
.container {
	position: relative;
	max-width: 1120px;
	padding: 80px 40px;
	margin: 0 auto;
}

/* sec bg */
.sec-bg {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    height: 100%;
    inset: 0;
	/* overflow: hidden; */
}
.sec-bg img {
    position: absolute;
    margin: auto;
    inset: 0;
}
#sec-intro .sec-bg img {
	opacity: 0.3;
    top: 10%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#sec-advocacy .sec-bg img {
    width: 90%;
    height: auto;
    top: 8%;
}
#sec-advocacy .sec-bg img:nth-of-type(1) {
    opacity: 0.2;
    left: 2%;
}
#sec-advocacy .sec-bg img:nth-of-type(2) {
    opacity: 0.5;
    right: 2%;
}

/* sec dec */
.sec-dec {
    position: absolute;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    inset: 0;
}
.sec-dec img {
    position: absolute;
    margin: auto;
}

/* divider */
.divider-top {
    height: 0;
    pointer-events: none;
	margin-top: 0px;
}
.divider-top .divider-img {
    position: relative;
	width: 100%;
	height: auto;
    top: -9vw;
}
.divider-bottom {
    height: 0;
    pointer-events: none;
}
.divider-bottom .divider-img {
    position: relative;
    width: 100%;
	height: auto;
    top: -1px;
}

#sec-top {
	padding-bottom: 7%;
}

/* btn */
.btns {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}
.btn {
	display: inline-block;
	padding: 0.3em 1.5em 0.35em;
	border: 4px solid var(--color-white);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	text-align: center;
    font-size: 28px;
	font-weight: bold;
	background-color: var(--color-orange-500);
	color: var(--color-white);
	transition: all 0.2s ease;
	border-radius: 99px;
}
.btn.disabled, .btn.active {
    pointer-events: none;
    opacity: .75;
    /* background-color: var(--color-gray-500) !important; */
}
.btn:has(img) {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
a.btn {
    padding: 0.5em 1.5em 0.55em;
}
a.btn-sm {
    border: 3px solid var(--color-white);
}
.btn:hover {
	filter: brightness(1.125);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
}
.btn-circle {
	border-radius: 50%;
	width: 110px;
	height: 110px;
	padding: 14px 10px;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.15;
}
a.btn-circle {
    padding: 14px 10px;
}
a.btn-sm.btn-circle {
    width: 55px;
	height: 55px;
	padding: 0px 0px;
}
a.btn-sm .material-symbols-rounded {
	line-height: 1;
    font-size: 50px;
}
a.btn-xs.btn-circle {
    width: 40px;
	height: 40px;
    border-width: 2px;
	padding: 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-yellow {
	background-color: var(--color-yellow-600);
}
.btn-red {
	background-color: var(--color-red-500);
}
.btn-brown {
    background-color: var(--color-brown-500);
}
.btn-green {
    background-color: var(--color-green-500);
}
.btn-gray {
    background-color: var(--color-gray-200);
}
.btn.text-yellow-300 {
    border-color: var(--color-yellow-300);
    color: var(--color-yellow-300);
}
.btn-text {
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.btn-sub-green {
    border: 0;
    background-color: var(--color-green-150);
    color: var(--color-green-700);
}
.copy-url {
    position: relative;
}
.copy-url::after {
    content: '已複製連結網址';
    display: block;
    position: absolute;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #19400C80;
    color: var(--color-white);
    font-size: 14px;
    width: fit-content;
    white-space: nowrap;
    right: 130%;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: all 0.4s ease;
}
.copy-url.copied::after {
    opacity: 1;
    transform: translateX(0px);
}
/* list */
.list-number {
    list-style: decimal-leading-zero;
    padding-left: 2em;
}
.list-number li + li {
    margin-top: 1em;
}
.list-dot {
    list-style: disc;
    padding-left: 1em;
}
.list-dot li + li {
    margin-top: 0.5em;
}

/* list step */
.list-step {
    padding-left: 35px;
}
.list-step li {
    position: relative;
    padding: 16px 4px 16px 0;
}
.list-step li > span {
    position: relative;
    display: block;
    color: var(--color-red-700);
    margin-bottom: 6px;
}
.list-step li h5 {
    font-size: var(--fs-xl);
    font-weight: bold;
    color: var(--color-green-800);
    line-height: 1.2;
    margin-bottom: 4px;
}
.list-step li p {
    line-height: 1.3;
}
.list-step li > span::before {
    content: '';
    position: absolute;
    display: block;
    width: 11px;
    height: 11px;
    border: 2px solid var(--color-red-700);
    border-radius: 50%;
    top: 1px;
    left: -27px;
}
.list-step li::before,
.list-step li::after  {
    content: '';
    position: absolute;
    display: block;
    width: 0px;
    border: 1px dashed var(--color-red-700);
    top: 30px;
    bottom: 0;
    left: -20px;
}
.list-step li::before  {
    top: -1px;
    bottom: calc(100% - 18px);
}
.list-step li:first-child:before,
.list-step li:last-child:after {
    content: none;
}

/* header & menu */
#main-menu-wrap {
    position: fixed;
    inset: 0;
    z-index: 99;
}
#main-menu-wrap {
    background-color: var(--color-green-700);
    overflow: hidden;
    transition: all 0.6s ease 0.2s;
    max-height: 0;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.active #main-menu-wrap {
    max-height: calc(var(--vh) * 100);
    pointer-events: initial;
    overflow-y: hidden;
    transition: all 0.6s ease;
}
#main-menu-wrap > * {
    opacity: 0;
    transition: opacity 0.6s ease 0s;
}
.active #main-menu-wrap > * {
    opacity: 1;
    transition: opacity 0.6s ease 0.2s;
}
#main-menu-wrap nav {
    padding: 30px 20% 30px 36%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main-menu-wrap nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 70px;
}
#main-menu-wrap nav ul li {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#main-menu-wrap nav ul li h4 {
    color: var(--color-yellow-300);
    font-family: var(--ff-grand);
    font-size: var(--fs-xl);
    border-bottom: 1px solid var(--color-yellow-300);
    padding-bottom: 20px;
}
#main-menu-wrap nav ul li a {
    color: var(--color-white);
    font-weight: bold;
    font-size: var(--fs-lg);
}
#main-menu-wrap nav ul li a.disabled {
    pointer-events: none;
    opacity: 0.75;
}
.hbg-btn {
    position: fixed;
	border: 0;
	padding: 0;
	height: 70px;
	width: 80px;
	border-radius: 12px;
	transition: margin 0.2s ease;
	top: 16px;
	right: 16px;
	text-align: center;
    background-color: var(--color-white);
    z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.icon-hbg,
.icon-hbg::before,
.icon-hbg::after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 38px;
	height: 4px;
	background-color: var(--color-orange-500);
	border-radius: 4px;
	position: absolute;
	transform-origin: center center;
	left: -13px;
    right: -13px;
}
.icon-hbg::before {
	top: -15px;
}
.icon-hbg::after {
	bottom: -15px;
}
.active .icon-hbg {
	width: 0;
    left: -22px;
}
.active .icon-hbg::before {
	top: 0;
	transform: rotate(45deg);
}
.active .icon-hbg::after {
	bottom: 0;
	transform: rotate(-45deg);
}

/* menu bg */
#main-menu-wrap .sec-bg {
    z-index: -1;
}
#main-menu-wrap .sec-bg img:nth-of-type(1) {
    z-index: 0;
    inset: 0 auto -10% -20%;
    width: 60%;
}
#main-menu-wrap .sec-bg .dec-img:nth-of-type(2) {
    right: 20%;
    top: 25%;
}
#main-menu-wrap .sec-bg .dec-img:nth-of-type(3) {
    left: 10%;
    bottom: 2%;
}
#main-menu-wrap .sec-bg .dec-img:nth-of-type(4) {
    left: 65%;
    bottom: 55%;
}
#main-menu-wrap .sec-bg .dec-img:nth-of-type(5) {
    left: 60%;
    top: 70%;
}

/* title */
.title-leaf {
	position: relative;
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 0.25em 2em;
	width: fit-content;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.2;
}
.title-leaf span {
	display: block;
}

.title-leaf::before, .title-leaf::after {
	content: '';
	position: absolute;
	aspect-ratio: 1 / 1;
	inset: 0 auto 0;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
}
.title-leaf::before {
	left: -10%;
	background-image: url('../img/dec/leaf_g_l.svg');
}
.title-leaf::after {
	right: -11%;
    top: 11%;
    bottom: -8%;
	background-image: url('../img/dec/leaf_g_r.svg');
}
.title-leaf.text-yellow-300::before {
	background-image: url('../img/dec/leaf_y_l.svg');
}
.title-leaf.text-yellow-300::after {
	background-image: url('../img/dec/leaf_y_r.svg');
}
.title-leaf .ff-grand {
	font-size: 40px;
}

.icon-flower {
	vertical-align: bottom;
	width: 1em;
	height: 1em;
}
.text-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-green-700);
	color: var(--color-white);
	width: 1.6em;
	height: 1.6em;
	vertical-align: top;
	font-size: 24px;
	font-weight: 900;
	padding-bottom: 2px;
	margin-left: 6px;
	margin-top: -2px;
}

/* sec top */
#sec-top .container {
	position: relative;
	height: var(--100vh);
	padding-top: 40px;
	padding-bottom: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.main-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.main-bg img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
}
.main-title {
	width: 100%;
	max-width: 616px;
	height: calc(var(--vh) * 28);
	object-fit: contain;
}
.main-time {
    position: absolute;
    top: 10%;
    right: 85%;
    max-width: 252px;
    height: calc(var(--vh) * 14);
	object-fit: contain;
}
/* sec intro */
#sec-intro .container {
	padding-top: 0;
}
.intro-content {
	position: relative;
}
.intro-content .dec-img {
	position: absolute;
	inset: 50% 0 0;
	margin: auto;
	height: 120%;
	width: auto;
}
.intro-content .dec-img:nth-of-type(1) {
	right: 75%;
}
.intro-content .dec-img:nth-of-type(2) {
	left: 75%;
}
#main-signup-btn-wrap {
    position: relative;
    text-align: center;
    bottom: -40px;
    z-index: 1;
}
#main-signup-btn-wrap::before {
    content: '';
    position: absolute;
    inset: -35% 25% 5% 25%;
    background: url('../img/dec/btn_dec.svg') no-repeat;
    background-size: contain;
    background-position: center;
}
#main-signup-btn {
    width: 160px;
    height: 160px;
    padding: 28px 20px;
    font-size: 40px;
    border-width: 6px;
}
/* card */
.info-card {
    position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 600px;
	padding: 50px;
	border-radius: 12px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 50%, rgba(237, 255, 215, 1) 100%);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
.info-card .btn {
	border: 0;
	letter-spacing: 4px;
	width: 80%;
	max-width: 280px;
	margin: 0 auto;
}
.card-dec-grass {
    position: absolute;
    inset: auto 0 -15px 0;
    width: 95%;
    margin: auto;
}
.list-title li {
	display: flex;
	gap: 16px;
}
.list-title li + li {
	margin-top: 24px;
}
.list-title li h3 {
	font-weight: bold;
    flex-shrink: 0;
}

/* sec advocacy */
#sec-advocacy .container {
    padding-top: 15%;
    padding-bottom: 10%;
}
.list-icon-detail {
}
.list-icon-detail li {
    display: flex;
    align-items: center;
    gap: 40px;
}
.list-icon-detail li + li {
    margin-top: 60px;
}
.list-icon-detail li h4 {
    font-weight: bold;
    font-size: var(--fs-xxxl);
    margin-bottom: 0.4em;
    color: var(--color-green-800);
}
.list-icon-detail li h5 {
    font-weight: bold;
    font-size: var(--fs-xl);
    line-height: 1.2;
    margin-bottom: 0.4em;
}
.list-icon-detail li p {
    line-height: 1.3;
    text-align: justify;
}

/* mission */
#sec-mission-1 {
    background: var(--color-white-blue-gradient);
}
#sec-mission-1 .container {
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;
}
.divider-top.divider-cloud {
    margin-top: 5%;
}
.divider-top.divider-cloud .divider-img {
    top: -12vw;
}
.divider-bottom.divider-cloud {
    position: relative;
    z-index: 1;
}
.divider-bottom.divider-cloud .divider-img {
    top: -20vw;
}
#sec-mission-1 .sec-dec {
    z-index: 2;
}
#sec-mission-1 .sec-dec img:nth-of-type(1) {
    left: 75%;
    top: 20%;
}
#sec-mission-1 .sec-dec img:nth-of-type(2) {
    right: 75%;
    bottom: -5%;
}
#sec-mission-2 {
    background: var(--color-white-green-gradient);
}
#sec-mission-1 + section {
    padding-top: 12%;
}
#sec-mission-2 .sec-dec img:nth-of-type(1) {
    right: 75%;
    top: 32%;
}
#sec-mission-2 .sec-dec img:nth-of-type(2) {
    left: 75%;
    bottom: 10%;
}

/* event */
#sec-events .container {
    padding-top: 40px;
}
.divider-top.divider-green-teeth {
    position: relative;
}
.divider-top.divider-green-teeth .divider-img {
    top: -14vw;
}
.divider-top.divider-green-teeth .dec-img {
    position: absolute;
    inset: auto 0 4.5vw;
    margin: auto;
}
.divider-top.divider-green-teeth .dec-img:nth-of-type(2) {
    right: 70%;
}
.divider-top.divider-green-teeth .dec-img:nth-of-type(3) {
    left: 70%;
}

.events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 80px;
}
.event {
    position: relative;
    text-align: center;
    padding-bottom: 80px;
}
.event img {
    margin-bottom: 5%;
}
.event:nth-of-type(1) img {
    width: calc(307/389 * 100%);
    margin-top: 7%;
    margin-bottom: 3%;
}
.event:nth-of-type(2) img {
    width: calc(100%);
    margin-top: 7%;
    margin-bottom: 4%;
}
.event:nth-of-type(3) img {
    width: calc(383/389 * 100%);
}

.event h5, .single-event h5 {
    font-weight: bold;
    font-size: var(--fs-xxl);
    color: var(--color-yellow-300);
}
.event h4, .single-event h4 {
    font-weight: bold;
    font-size: var(--fs-xxxl);
    color: var(--color-yellow-300);
    margin-bottom: 20px;
}
.event p {
    color: var(--color-white);
    line-height: 1.3;
    width: 86%;
    margin: 0 auto 20px;
    text-align: left;
}
.event .btn {
    width: fit-content;
    position: absolute !important;
    inset: auto 0 0 0;
    margin: auto;
}
.single-event {
    display: flex;
    align-items: center;
    gap: 80px;
}
.single-event img {
    width: 50%;
}
.single-event h5 {
    margin-bottom: 12px;
}
.single-event p {
    color: var(--color-white);
    line-height: 1.3;
    max-width: 420px;
}

/* sec program */
#sec-program .container {
    padding-top: 0;
}
#sec-program .sec-dec img:nth-of-type(1) {
    left: 2%;
    top: 0%;
}
#sec-program .sec-dec img:nth-of-type(2) {
    right: 7%;
    top: 0%;
}

.program-wrap {
    position: relative;
    margin-top: 200px;
}
.program-timeline {
    position: relative;
    width: 100%;
    top: 40px;
    display: flex;
    flex-direction: column;
}
.program-timeline > span {
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--ff-itim);
    color: #87AC63;
    height: 80px;
    width: 100%;
}
.program-timeline > span::after {
    content: '';
    position: absolute;
    left: 60px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1px;
    background-color: #467734;
}
.program-timeline > span:nth-of-type(3n + 1) {
    color: var(--color-white);
    font-size: var(--fs-lg);
    text-indent: -0.225em;
}
.program-timeline > span:nth-of-type(3n + 1)::after {
    background-color: var(--color-white);
    opacity: 0.5;
}
.program-content {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    grid-template-rows: 80px;
    grid-auto-rows: 20px;
    gap: 0 10px;
    padding-left: 60px;
}
.program-type, .program-item {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-green-700);
    border-radius: 6px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0.75em;
}
.program-blue {
    background-color: #D2F0F4;
}
.program-yellow {
    background-color: #FFD976;
}
.program-green {
    background-color: #B2D685;
}
.program-red {
    background-color: #EA5353;
    color: var(--color-white);
}
.program-type {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--fs-xxxl);
}
.program-type::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--color-green-700);
    border-radius: 4px;
}
.program-type img {
    position: absolute;
    bottom: calc(100% - 1px);
}
#program-type-2 img {
    bottom: calc(100% - 12px);
}
#program-type-3 img {
    bottom: calc(100% - 8px);
}
.program-item {
    min-height: 26px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-green-700);
}
#program-3 {
    flex-direction: column;
}
#program-3 .program-title {
    position: sticky;
    top: 0;
    padding-left: 0;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 48px;
    z-index: 1;
}
#program-3 .program-title span {
    position: relative;
    font-size: var(--fs-md);
    margin-bottom: 6px;
}
#program-3 .program-title .program-dec {
    position: absolute;
    z-index: 1;
    top: calc(100% + 24px);
    left: calc(100% - 36px);
    max-width: none;
}
#program-0-1, #program-0-2, #program-4 {
    justify-content: center;
}
#program-0-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; }
#program-0-2 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 20; grid-row-end: 22; }
#program-type-1 { grid-column-start: 1; grid-row-start: 1; }
#program-1-1 { grid-column-start: 1; grid-row-start: 22; grid-row-end: 29; }
#program-1-2 { grid-column-start: 1; grid-row-start: 30; grid-row-end: 38; }
#program-1-3 { grid-column-start: 1; grid-row-start: 45; grid-row-end: 52; }
#program-type-2 { grid-column-start: 2; grid-row-start: 1; }
#program-2-1 { grid-column-start: 2; grid-row-start: 14; grid-row-end: 20; }
#program-2-2 { grid-column-start: 2; grid-row-start: 39; grid-row-end: 45; }
#program-2-3 { grid-column-start: 2; grid-row-start: 62; grid-row-end: 68; }
#program-type-3 { grid-column-start: 3; grid-row-start: 1; }
#program-3 { grid-column-start: 3; grid-row-start: 2; grid-row-end: 68; }
#program-4 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 68; grid-row-end: 70; }

.program-item span {
    font-size: var(--fs-sm);
    height: var(--fs-md);
}
.program-title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-left: 96px;
}
.program-title span {
    font-family: var(--ff-itim);
    position: absolute;
    top: 0.25em;
    left: 0;
}
.program-title h5 {
    font-size: var(--fs-lg);
    font-weight: bold;
}
.program-title h5 + h6 {
    margin-top: 6px;
}
.program-title h6 {
    font-weight: bold;
}
.program-title .tab-red {
    background-color: var(--color-red-650);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    width: fit-content;
}
.program-title .tab-blue {
    background-color: var(--color-blue-500);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    width: fit-content;
}
.program-decs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.program-decs .program-dec {
    position: absolute;
}
.program-decs .program-dec:nth-of-type(1) {
    top: 37%;
    left: 45%;
}
.program-decs .program-dec:nth-of-type(2) {
    top: 86%;
    left: 28%;
}
.program-decs .program-dec:nth-of-type(3) {
    top: 10%;
    left: 10%;
}
.program-decs .program-dec:nth-of-type(4) {
    top: 59%;
    left: 10%;
}

/* sec line */
#sec-line {
}
#sec-line .sec-bg {
    z-index: 1;
    overflow: visible;
}
#sec-line .sec-bg img:nth-of-type(1) {
    inset: auto auto -4% 2%;
}
#sec-line .sec-bg img:nth-of-type(2) {
    inset: auto 2% -6% auto;
}
.line-card {
    position: relative;
    background: var(--color-white);
    border-radius: 32px;
    display: flex;
    align-items: stretch;
    z-index: 2;
}
.line-card > div {
    padding: 32px;
}
.line-card > div:first-child {
    padding-left: 60px;
    border-right: 1px solid var(--color-gray-200);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.line-card .dec-img {
    position: absolute;
    bottom: 85%;
}

/* sec map */
#sec-map .container {
}
#sec-map .sec-bg img:nth-of-type(1) {
    top: 10%;
    bottom: auto;
}
#sec-map .sec-bg img:nth-of-type(2) {
    top: 65%;
    bottom: auto;
}
#map-img {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
}

/* sec info */
#sec-info .info-card {
    position: relative;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 251, 231, 1) 100%);
}
.info-card.card-wide {
    max-width: none;
    padding: 10% 15%;
}
#sec-info .info-card .dec-img {
    position: absolute;
    bottom: 94%;
    right: 0;
}

/* sec traffic */
.map-wrap {
    width: 47%;
}
.google-map {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}
#sec-traffic .dec-img {
    position: absolute;
    top: -1em;
}

/* sec movie */
#sec-movie .sec-bg img:nth-of-type(1) {
    inset: auto auto -15% 0;
}
#sec-movie .sec-bg img:nth-of-type(2) {
    inset: auto 0 -15% auto;
}
#sec-movie .dec-img {
    position: absolute;
    top: -1em;
    right: 0;
}

/* sec living */
#sec-living .dec-img {
    position: absolute;
    top: -1.5em;
    left: 10%;
}

/* swiper */
.swiper {
    margin: 0 60px;
}
.swiper-wrapper {
    height: auto;
}
.swiper-button-prev:after, .swiper-button-next:after {
    content: none;
}
.swiper-button-prev, .swiper-button-next {
    background: transparent;
    border: 0;
    color: var(--color-green-800);
    z-index: 5;
}
.popup-card .swiper-button-prev, .popup-card .swiper-button-next {
    color: #CCCCCC;
    opacity: 0.7;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0.3;
}
.swiper-button-prev span, .swiper-button-next span {
    font-size: 50px;
}
.swiper-slide {
    max-height: 450px;
    object-fit: contain;
    -o-object-fit: contain;
    border-radius: 8px;
}
.shop-swiper {
    overflow: hidden;
}
.swiper-pagination-bullet {
    background-color: #CCCCCC;
    opacity: 0.3;
}
.swiper-pagination-bullet-active {
    opacity: 0.8;
}

/* post */
.post-card-img {
    aspect-ratio: 3 / 2;
    padding-bottom: 66%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 8px;
    position: relative;
}
.post-card-img > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    transition: all 0.4s ease;
}
.post-card-img:hover > * {
    transform: scale(1.1);
}
.shop-list .post-card {
    border-radius: 12px;
}
.shop-list .post-card-img {
    aspect-ratio: 1 / 1;
    padding-bottom: 100%;
    margin-bottom: 16px;
}

.post-card h4 {
    font-weight: 600;
    font-size: var(--fs-lg);
    margin-bottom: 0.5em;
    line-height: 1.2;
    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.post-card p {
    margin-bottom: 0.5em;
    line-height: 1.3;
}
.post-card .tags {
    color: var(--color-yellow-400);
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.tags span {
    display: inline-block;
}
.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(38, 86, 21, 0.75);
    color: var(--color-yellow-300);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding-top: 24px;
    transition: all 0.4s ease;
    opacity: 0;
}
.img-hover:hover {
    opacity: 1;
}
#sec-living .img-hover {
    gap: 6px;
}
.img-hover span {
    transition: all 0.4s ease 0s;
}
.shop-list {
    gap: 72px 48px;
}
.shop-list .img-hover:hover span {
    transform: translateX(16px);
}
.shop-logo {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-logo img {
    width: 75%;
    height: auto;
}
.shop-img {
    aspect-ratio: 1 / 1;
    padding-bottom: 100%;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
}
.shop-list .shop-img {
    margin-bottom: 16px;
}

/* shop page */
#sec-top-shop .container {
    padding-top: 30px;
    padding-bottom: 35px;
}
#sec-top-shop .sec-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-content {
    padding: 20px;
    margin-left: auto;
    margin-bottom: auto;
    display: flex;
    gap: 20px;
}
.shop-content > div:last-child {
    padding-right: 12px;
}
.shop-content h4 {
    font-size: var(--fs-lg);
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}
.shop-content h5 {
    font-size: var(--fs-sm);
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    line-height: 1.2;
}
.shop-content p {
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-size: var(--fs-sm);
    text-align: justify;
}
.shop-content p a {
    color: var(--color-blue-400);
}
.shop-content .tags {
    color: var(--color-blue-400);
    margin-bottom: 2em;
}
/* popup */
.popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 200;
    background: rgba(37, 98, 15, 0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}
.popup-wrap.active {
    opacity: 1;
    pointer-events: initial;
}
.popup-block {
    position: absolute;
    max-width: 1140px;
    padding: 60px 30px;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}
.popup-block.active {
    opacity: 1;
    max-height: none;
    pointer-events: initial;
}
.popup-close-wrap {
    margin: 0 auto;
    z-index: 201;
}
.popup-close-btn {
    position: absolute;
	border: 0;
	padding: 0;
	height: 58px;
	width: 58px;
	border-radius: 50%;
	top: 36px;
    right: -66px;
	text-align: center;
    background: transparent;
}
.popup-close-btn::before,
.popup-close-btn::after {
	content: "";
	display: block;
	margin: auto;
	width: 38px;
	height: 3px;
	background-color: var(--color-white);
	border-radius: 4px;
	position: absolute;
	transform-origin: center center;
	left: -19px;
    right: -19px;
	top: 0;
    bottom: 0;
    transition: all 0.4s ease;
}
.popup-close-btn::before {
	transform: rotate(45deg);
}
.popup-close-btn::after {
    transform: rotate(-45deg);
}
.popup-close-btn:hover::before {
    transform: rotate(0deg);
}
.popup-close-btn:hover::after {
	transform: rotate(0deg);
}
.popup-card {
    width: 100%;
    position: relative;
    border-radius: 12px;
    background-color: var(--color-yellow-200);
}
.card-content {
    padding: 40px 60px 40px;
}
.card-header-dec + .card-content {
    padding-top: 80px;
}
.card-header-dec {
    position: absolute;
    inset: 0 0 auto 0;
}
.card-header-dec .dec-badge {
    position: absolute;
    top: -55px;
    left: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: var(--color-red-600);
    background-image: url('../img/dec/dec-badge.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% 90%;
    color: var(--color-red-900);
    font-size: 22px;
    font-weight: bold;
    padding: 23px;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.2;
}
.card-header-dec .dec-tap {
    position: absolute;
    background-color: var(--color-white);
    color: var(--color-green-800);
    font-weight: bold;
    font-family: var(--ff-grand);
    padding: 16px 32px 6px;
    font-size: 44px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
    transform: rotate(4.25deg);
    top: -20px;
    right: -16px;
}
.card-title {
    font-size: var(--fs-xxl);
    font-weight: bold;
    text-align: center;
    padding: 16px 0;
    border: 2px solid var(--color-green-800);
    border-width: 2px 0;
    color: var(--color-green-800);
    width: fit-content;
    margin: 0 auto 1em;
}
.card-sub-title {
    font-size: var(--fs-xl);
    font-weight: bold;
    text-align: center;
    color: var(--color-green-800);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-green-800);
    width: fit-content;
    margin: 3rem auto 1.5rem;
}
.form-wrap {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 30px 40px;
}

/* present */
.present-item {
    text-align: center;
}
.present-item img {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 6px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.present-item.auto-height img {
    aspect-ratio: initial;
}
.present-item h5 {
    font-size: var(--fs-md);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 6px;
}
.present-item p {
    font-size: var(--fs-xxl);
    font-weight: bold;
    line-height: 1.2;
}
/* form */
.form-item > label {
    padding-right: 30px;
}
.form-item + .form-item > label:first-of-type {
	padding-top: 1.4em;
	padding-bottom: 0.4em;
}
.form-item input {
	padding: 4px 10px 4px;
	border-radius: 5px;
	border: 1px solid #333;
	box-sizing: border-box;
	opacity: 1;
    width: 100%;
}
.form-item input:focus,
.form-item input:hover {
	opacity: 1;
}
.form-item input:focus {
    border: 1px solid var(--color-green-500);
}
label.required::after {
	content: "*";
	color: var(--color-red-500);
	padding-left: 3px;
}
.form-item input.invalid {
    border-color: var(--color-red-300);
}
.form-item input[type=radio] {
	display: inline;
	width: auto;
	position: absolute;
    opacity: 0;
    cursor: pointer;
}
.form-item input[type=checkbox] {
    width: 24px;
    height: 24px;
}

.form-item .radio-label {
	margin-right: 1.2em;
	padding-top: 0.5em;
}

.form-item > .radio-label {
	display: flex;
    max-width: 100%;
    padding-right: 0;
}
.radio-label p {
    white-space: initial;
    max-width: calc(100% - 45px);
}
.radio-label span {
	display: inline-block;
	position: relative;	
	border: 1px solid #AAAAAA;
	border-radius: 100%;
	height: 23px;
	width: 23px;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
	margin-bottom: -4px;
    margin-right: 7px;
    background: #fff;
}
.radio-label.checkbox span {
	border-radius: 5px;
}


input[type=radio]:hover + .radio-label span,
input[type=checkbox]:hover + .radio-label span,
.radio-label span:hover {
  border: 1px solid #666;
}
input[type=radio]:focus + .radio-label span,
input[type=checkbox]:focus + .radio-label span,
.radio-label span:hover {
  border: 1px solid var(--color-green-400);
}

.radio-label span::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 100%;
	height: 15px;
	width: 15px;
	top: 3px;
	left: 3px;
	margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}
.radio-label.checkbox span::before {
	border-radius: 3px;
}

input[type=radio]:checked + .radio-label span,
input[type=checkbox]:checked + .radio-label span {
  border: 1px solid #fff;
}

input[type=radio]:checked + .radio-label span::before{
  background: #666;
}

input[type=checkbox]:checked + .radio-label span::before,
input[type=radio]:checked + .radio-label.checkbox span::before {
  content: '';
    background: transparent;
    border-color: #264428;
    border-style: solid;
    border-width: 0px 3px 3px 0;
    width: 5px;
    height: 10px;
    border-radius: 0;
    transform: rotate(45deg);
    left: 7px;
    top: 3px;
}

/* actor */
.actor-list {
    max-height: 100vh;
    overflow-y: auto;
}
.actor-list .sticky {
    position: sticky;
    top: 0;
    left: 0;
    max-height: 0;
}
.actor-list::-webkit-scrollbar {
    width: 0px;
    background-color: transparent; /* or add it to the track */
}
.actor-list::-webkit-scrollbar-thumb {
    background: var(--color-gray-100);
    border-radius: 4px;
}
.actors {
    padding-left: 200px;
    padding-bottom: 200px;
}
.actor-btn {
    display: block;
    width: 200px;
    padding: 12px 24px;
}
.actor-btn.active {
    background-color: var(--color-green-500);
    color: var(--color-white);
}
.actor-img {
    position: relative;
    padding-bottom: 66%;
}
.actor-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    object-fit: cover;
    -o-object-fit: cover;
}

.collapse {
    position: relative;
    min-height: 90px;
    max-height: 90px;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
}
.collapse.active {
    max-height: 800px;
}
.collapse::after {
    content: '';
    display: block;
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: linear-gradient(to top, #ffffff, #ffffff00);
    transition: opacity 0.4s ease;
}
.collapse.active::after {
    opacity: 0;
    pointer-events: none;
}
.collapse-toggler::before {
    content: 'Read more';
}
.collapse-toggler.active::before {
    content: 'Read less';
}
.collapse-toggler.active .material-symbols-rounded {
    transform: rotate(180deg);
}
.paragraph > * {
    margin-bottom: 0.75em;
}

/* video */
.video-wrap {
    position: relative;
    padding-bottom: 56%;
    max-width: 960px;
    margin: 0 auto;
}
.video-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* captcha */
.grecaptcha-badge {
    display: none !important;
}

/* table winlist */
.table-winlist .d-cell {
    padding: 1rem 2rem 1rem 0;
    vertical-align: middle;
}

/* float right */
.float-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    position: fixed;
    gap: 16px;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    transform-origin: right bottom;
}
#go-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
    border: 0;
    background-color: var(--color-green-500);
    color: var(--color-white);
    box-shadow: none;
    font-size: 60px;
}
#go-top .material-symbols-rounded {
    margin-top: 8px;
}
#go-top::after {
    content: '';
    position: absolute;
    display: block;
    width: 24px;
    top: 16px;
    left: 0;
    right: 0;
    margin: auto;
    height: 3.5px;
    border-radius: 3px;
    background-color: var(--color-white);
}
/* footer */
footer .container {
    padding-bottom: 1.5em;
}
.footer-logos {
    display: flex;
    gap: 2em;
    align-items: center;
}
.logo {
    height: auto;
}
:root {
    --logo-grid-colums: 7;
}
.logos-grid {
    display: grid;
    grid-template-columns: repeat(var(--logo-grid-colums), 1fr);
    gap: 0;
    align-items: center;
    justify-content: center;
}
.grid-x3 {
    grid-template-columns: repeat(calc(var(--logo-grid-colums) * 3), 1fr);
}
.grid-x6 {
    grid-template-columns: repeat(calc(var(--logo-grid-colums) * 6), 1fr);
}
.logos-grid .logo {
    margin: auto;
    padding: 1em;
}
.logos-grid {
    width: calc(100% + 2em);
    margin-left: -1em;
}
.logos-grid.grid-x3 .logo {
    grid-column: span 3;
}
.logos-grid.grid-x6 .logo {
    grid-column: span 6;
}
.logos-grid .logo.col-2 {
    grid-column: span 2;
}
.logos-grid .logo.col-3 {
    grid-column: span 3;
}
.logos-grid .logo.col-4 {
    grid-column: span 4;
}
.logos-grid .logo.col-5 {
    grid-column: span 5;
}
.logos-grid .logo.col-6 {
    grid-column: span 6;
}

/* animetion */
.anime-breathe {
    animation: breathe 3s infinite ease-in-out;
}
@keyframes breathe {
    0% { transform: scale(0.9); }
    50% { transform: scale(1); }
    100% { transform: scale(0.9); }
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

@keyframes bounce {
    from,
    20%,
    53%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    40%,
    43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
      transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
  
    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -7px, 0) scaleY(1.025);
      transform: translate3d(0, -7px, 0) scaleY(1.025);
    }
  
    80% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0) scaleY(0.975);
      transform: translate3d(0, 0, 0) scaleY(0.975);
    }
  
    90% {
      -webkit-transform: translate3d(0, -2px, 0) scaleY(1.01);
      transform: translate3d(0, -2px, 0) scaleY(1.01);
    }
}
.hover_bounce:hover, .animate__bounce {
    position: relative;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
.hover_bounce::after {
    content: '';
    position: absolute;
    inset: 0 0 -15px 0;
    pointer-events: none;
}
.hover_bounce:hover::after {
    pointer-events: initial;
}

/* page voice */
#sec-top-voice-main {
    min-height: calc(var(--vh) * 90);
    display: flex;
    align-items: center;
}
#sec-top-voice-main .container {
    padding-top: 40px;
    padding-bottom: 120px;
}
#sec-top-voice-main .sec-bg img {
    top: 120px;
}
#sec-top-voice-main .card-title {
    font-size: var(--fs-xxxl);
    margin-top: 16px;
}

/* voice guide */
#sec-voice-guide .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* list step voice */
.list-step-voice {
    padding-left: 14%;
    max-width: 680px;
    margin-top: -140px;
}
.list-step-voice .dec-img {
    position: absolute;
    left: -140px;
    top: 24px;
}
.list-step-voice li {
    position: relative;
    padding: 16px 4px 16px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--color-yellow-300);
}
.list-step-voice li > span {
    position: relative;
    display: block;
    flex-shrink: 0;
    color: var(--color-yellow-300);
    font-size: 48px;
    font-family: var(--ff-grand);
    border: 6px solid var(--color-yellow-300);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    text-align: center;
    padding-top: 9px;
    padding-left: 1px;
    background-color: var(--color-green-700);
    z-index: 1;
}
.list-step-voice li > span.active {
    background-color: var(--color-brown-500);
}
.list-step-voice li p {
    line-height: 1.3;
    font-size: var(--fs-xl);
    font-weight: bold;
}
.list-step-voice .btn {
    border-color: var(--color-yellow-300);
    color: var(--color-yellow-300);
}
.list-step-voice li::before,
.list-step-voice li::after  {
    content: '';
    position: absolute;
    display: block;
    width: 0px;
    border: 3px solid var(--color-yellow-300);
    top: 30px;
    bottom: 0;
    left: 32px;
    z-index: 0;
}
.list-step-voice li::before  {
    top: -1px;
    bottom: calc(100% - 18px);
}
.list-step-voice li:first-child:before,
.list-step-voice li:last-child:after {
    content: none;
}

/* voice card list */
#sec-card-list .container {
}
.voice-card-list {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.voice-card-list img {
    border-radius: 6px;
}
.list-pagenation {
    padding-top: 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
}
.list-pagenation a.active {
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: none;
}
/* page voice */
#sec-top-voice {
    border-bottom: 9px solid var(--color-yellow-300);
    background-color: var(--color-yellow-300);
}
#sec-top-voice .container {
    padding-top: 20px;
    padding-bottom: 40px;
}
#sec-top-voice .sec-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#sec-voice-step .container {
    padding-top: 0px;
    padding-bottom: 0;
}
.voice-step-btns {
    position: relative;
    top: -35px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.step-btn {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 6px solid var(--color-yellow-300);
    background-color: var(--color-green-700);
    font-family: var(--ff-grand);
    font-size: 42px;
    text-align: center;
    padding: 7px 0;
    transition: all 0.4s ease;
    transform: scale(0.8);
    flex-shrink: 0;
}
.step-btn:hover {
    transform: scale(0.9);
}
.step-btn.active {
    background-color: var(--color-brown-500);
    pointer-events: none;
    transform: scale(1);
}
.step-btn.completed {
    background-color: var(--color-brown-500);
    color: var(--color-yellow-300-op50);
    border-color: var(--color-yellow-300-op50);
}
.step-btn.disabled {
    pointer-events: none;
}
/* voice-step-wrap */
.step-navigation {
    display: flex;
    align-items: center;
    margin-top: 2em;
}
.voice-step-wrap {
    position: relative;
    transition: all 0.6s ease;
    overflow: hidden;
}
.voice-step {
    position: absolute;
    pointer-events: none;
    transition: all 0.6s ease;
    transform: translateX(16px);
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: 40px;
    max-width: 900px;
    margin: auto;
}
.voice-step.active {
    position: relative;
    pointer-events: initial;
    transform: translateX(0);
    opacity: 1;
}
.voice-step.completed {
    transform: translateX(-16px);
}
/* step 2 */
.img-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
    padding: 3px;
}
.img-btn {
    background-color: transparent;
    border: 0;
    color: var(--color-white);
    padding: 0;
}
.img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 6;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 4px;
}
.img-btn img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}
.img-btn:hover {
    color: var(--color-yellow-300);
}
.img-btn:hover .img-wrap {
    outline: 3px solid var(--color-yellow-300);
}
.img-btn:hover img {
    transform: scale(1.1);
}
.img-btn.active {
    color: var(--color-yellow-300);
}
.img-btn.active .img-wrap {
    outline: 3px solid var(--color-yellow-300);
}
.img-btn.active .img-wrap img {
    transform: scale(1.1);
}
.img-btn .img-wrap::after {
    content: 'check';
    font-family: 'Material Symbols Rounded';
    font-size: 70px;
    position: absolute;
    inset: 0;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-yellow-300);
    background-color: var(--color-green-700-op50);
    opacity: 0;
    transition: all 0.2s ease;
}
.img-btn.active .img-wrap::after {
    opacity: 1;
}
/* step 3 */
.card-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
}
.card-form .form-item {
    flex-shrink: 1;
    flex-grow: 1;
}
.card-form .form-item.w-half {
    width: calc(50% - 0.5em) !important;
}
.card-form .form-item label {
    position: relative;
    display: block;
    padding-bottom: 0.4em;
}
.form-item + .form-item > label:first-of-type {
    padding-top: 0;
}
.card-form .form-item + .form-item {
    margin-top: 0;
}
.card-review-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.card-canvas canvas {
    width: 100%;
    max-width: 487px;
    height: auto;
    border-radius: 12px;
}
/* step 4 */
#step-4 .btns {
    gap: 24px;
}

.card-result {
    max-width: 663px;
    height: auto;
    border-radius: 12px;
}

/* card upload */
.card-upload-status {
    position: absolute;
    inset: 0;
    background-color: var(--color-green-700-op50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--fs-xxl);
    color: var(--color-white);
    transition: all 0.6s ease;
    opacity: 0;
}
.card-upload-status.uploading {
    opacity: 1;
}
.card-upload-status.uploaded {
    opacity: 0 !important;
    transition: all 0.6s ease 0.4s;
}