:root {
    --vh: 1vh;

    --color-white: #ffffff;
    --color-gray-100: #f2f2f2;
    --color-gray-200: #e6e6e6;
    --color-gray-300: #cccccc;
    --color-gray-400: #b3b3b3;
    --color-gray-500: #999999;
    --color-gray-600: #808080;
    --color-gray-700: #666666;
    --color-gray-800: #4d4d4d;
    --color-gray-900: #333333;
    --color-black: #000000;

    --color-blue-100: #f0f4fc;
    --color-blue-200: #caddff;
    --color-blue-300: #99b9ff;
    --color-blue-400: #5479f7;
    --color-blue-500: #184eae;

    --color-red-100: #ffb6b6;
    --color-red-200: #ff9792;
    --color-red-300: #ff8383;
    --color-red-400: #ff5f5f;
    --color-red-500: #c1272d;

    --color-yellow-100: #ffe6a9;
    --color-yellow-200: #ffda7d;
    --color-yellow-300: #ffd15f;
    --color-yellow-400: #ffc933;
    --color-yellow-500: #ffb703;

    --color-green-100: #caf9e4;
    --color-green-200: #9ff7d7;
    --color-green-300: #5fefc0;
    --color-green-400: #0dd698;
    --color-green-500: #04a56f;

    --fs-xxxl: 70px;
    --fs-xxl: 35px;
    --fs-xl: 30px;
    --fs-l: 26px;
    --fs-m: 22px;
    --fs-s: 18px;
    --fs-xs: 16px;
    --fs-xxs: 14px;
    --fs-xxxs: 12px;
}

/* general */
html {
    scroll-behavior: smooth;
    position: relative;
}
body {
    font-size: var(--fs-m);
    font-family: 'Noto Sans TC', Arial, 'Noto Sans CJK TC', 'PingFang TC', 'Heiti TC', source-han-sans-traditional, 'Microsoft JhengHei', sans-serif;
    color: var(--color-gray-900);
    position: relative;
}
img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}
p {
    line-height: 1.6;
}
a {
    cursor: pointer;
}
.show-sm {
    display: none !important;
}
/* color */
.text-blue { color: var(--color-blue-500); }
.text-gray { color: var(--color-gray-800); }

/* font */
.fs-xxxl { font-size: var(--fs-xxxl); }
.fs-xxl { font-size: var(--fs-xxl);; }
.fs-xl { font-size: var(--fs-xl);; }
.fs-l { font-size: var(--fs-l);; }
.fs-m { font-size: var(--fs-m);; }
.fs-s { font-size: var(--fs-s);; }
.fs-xs { font-size: var(--fs-xs);; }
.fs-xxs { font-size: var(--fs-xxs);; }
.fs-xxxs { font-size: var(--fs-xxxs);; }

.fw-regular { font-weight: normal; }
.fw-bold { font-weight: bold; }

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

/* preload */
#preloader {
	position: fixed;
	inset: 0;
	max-width: 100%;
	max-height: calc(var(--vh) * 100);
	background-color: #fff; /* change if the mask should have another color then white */
	z-index:100; /* makes sure it stays on top */
	display: flex;
	align-items: center;
	justify-content: center;
    transition: all 0.6s ease 0.4s;
}
#preloader.hide {
    opacity: 0;
    pointer-events: none;
}
#status {
	position: relative;
    transform: scale(0.5);
    transition: all 0.4s ease;
}
#preloader.hide #status {
    opacity: 0;
    transform: scale(0.5) translateY(-12px);
}
#status img:nth-child(1) {
	animation: shinning 3s linear infinite;
}
#status img:nth-child(2) {
    position: absolute;
    left: -6px;
    bottom: 10px;
    animation: circle 3s linear infinite;
}
@keyframes shinning {
    0% { opacity: 0.5; }
	50% { opacity: 1; }
    100% { opacity: 0.5; }
}
@keyframes circle{
  0%{
    transform:rotate(0deg)
              translate(-30px)
              rotate(0deg);
  
  }
  100%{
    transform:rotate(360deg)
              translate(-30px)
              rotate(-360deg);
  }
}


/* layout */
section {
    position: relative;
}
.container {
    max-width: 1260px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}
header .container {
    padding-top: 6px;
    padding-bottom: 6px;
}
footer .container {
    padding-top: 24px;
    padding-bottom: 24px;
}
/* header */
header {
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
}

.nav-top {
    display: flex;
    gap: 60px;
}
.nav-top .logo-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-top ul {
    display: flex;
    flex-wrap: wrap;
}
.nav-top ul li {
    position: relative;
}
.nav-top ul li + li::before {
    content: '';
    display: inline-block;
    height: 16px;
    border-left: 1px solid var(--color-black);
}
.nav-top ul li:last-child:before {
    content: none;
}
.nav-top ul a {
    display: inline-block;
    color: var(--color-black);
    padding: 10px 16px;
    font-weight: bold;
    font-size: var(--fs-s);
}
.nav-hbg {
	display: none;
	position: absolute;
	border-radius: 12px;
	right: 30px;
	top: 0;
	box-shadow: 7px 7px 8px rgba(16, 86, 21, 0.3);;
}
.hbg-btn {
	border: 0;
	padding: 0;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	vertical-align: top;
	transition: all 0.2s ease;
	position: absolute;
	top: 0px;
	right: -8px;
	text-align: center;
}
.icon-hbg,
.icon-hbg::before,
.icon-hbg::after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 4px;
	background-color: var(--color-blue-400);
	border-radius: 2px;
	position: absolute;
	transform-origin: center center;
	left: -15px;
	right: -15px;
}
.icon-hbg::before {
	position: absolute;
	top: -10px;
}
.icon-hbg::after {
	position: absolute;
	bottom: -10px;
}
.active .icon-hbg {
	width: 0;
}
.active .icon-hbg::before {
	top: 0;
	transform: rotate(45deg);
}
.active .icon-hbg::after {
	bottom: 0;
	transform: rotate(-45deg);
}

/* footer */
footer {
    background-color: var(--color-gray-900);
    color: var(--color-white);
    padding-bottom: 40px;
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.social-links {
    display: flex;
    gap: 8px;
}
.fixed-right {
    position: fixed;
    right: 30px;
    bottom: 60px;
}
.top-btn {
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 8px 10px;
	position: relative;
	border-radius: 50%;
	background-color: #cccccccc;
    color: var(--color-white);
	font-size: 16px;
	transition: all 0.4s ease;
}
.top-btn:hover {
	background-color: #cccccc;
}
.icon-svg {
	height: 1em;
	width: auto;
	vertical-align: middle;
    margin-top: -4px;
}
.hideontop {
	opacity: 0;
	pointer-events: none;
	transition: all 0.6s ease;
	transform: translateY(-12px);
}
.hideontop.show {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0px);
}

/* fixed footer */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #97c72f;
    padding: 8px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 12px;
    z-index: 90;
}

/* article */
.article {
    max-width: 800px;
    margin: 0 auto;
}
.article p {
    text-align: justify;
}
.article p + p {
    margin-top: 0.5em;
}
.article h3 {
    margin-bottom: 1em;
}
.article hr {
    width: 100%;
    margin: 2em auto 1em;
    border: 0;
    height: 1px;
    background-color: var(--color-gray-400);
}
.last-article {
    padding: 40px 0 120px;
}
.note-inline {
    vertical-align: super;
    font-size: var(--fs-xxs);
    color: var(--color-gray-500);
}
.note {
    font-size: var(--fs-xs);
    color: var(--color-gray-500);
}
/* title */
.sec-title {
    letter-spacing: 0.025em;
    margin-top: 80px;
    margin-bottom: 40px;
}
.sec-title .dec-img {
    margin-bottom: 30px;
}

/* bg */
.bg-wrap {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.bg-wrap img {
    position: absolute;
}

/* data */
.data-wrap {
    font-family: 'Rajdhani', Arial, 'Noto Sans TC', sans-serif;
}

/* sec top */
#sec-top .bg-wrap img:nth-child(2) {
    left: 50%;
    top: 80px;
}
#sec-top .bg-wrap img:nth-child(3) {
    left: 70%;
    top: 320px;
}
#sec-top .container {
    min-height: calc(var(--vh) * 100);;
    display: flex;
    align-items: center;
}
#sec-top .sec-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.dec-liner {
    position: absolute;
    left: -60px;
    bottom: 6px;
}

/* sec from */
#sec-from {
    background-color: var(--color-gray-100);
}
#sec-from .article {
    padding: 2em 0;
}
/* sec-timeline */
#sec-timeline .data-wrap {
    padding: 4em 0;
}
#sec-timeline .data-wrap h4 {
    margin-bottom: 2em;
}
#sec-timeline .article {
    padding: 0 30px;
}
.timeline {

}
.time-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}
.time-bar span {
    display: inline-block;
    width: 2px;
    height: 12px;
    background-color: var(--color-gray-200);
    position: relative;
}
.time-bar .time-taller {
    height: 24px;
}
.time-bar .time-taller::before {
    content: attr(data-time);
    font-size: var(--fs-xxs);
    color: var(--color-gray-400);
    position: absolute;
    left: -30px;
    right: -30px;
    text-align: center;
    margin: auto;
}
.time-bar-top .time-taller::before {
    top: -20px;
}
.time-bar-bottom .time-taller::before {
    bottom: -20px;
}

.time-content {
    position: relative;
    margin: 6px 0;
}
.time-event {
    position: relative;
    padding-top: 12px;
}
.time-event::before {
    content: attr(data-time);
    font-size: var(--fs-xs);
    font-weight: bold;
    color: var(--color-blue-400);
    position: relative;
    padding-left: 48px;
}
.time-event i {
    position: absolute;
    width: 4px;
    height: calc(var(--vh) * 100);;
    background-color: var(--color-blue-100);
    z-index: 0;
    left: 26px;
    top: 0px;
    pointer-events: none;
}
.event-card {
    width: fit-content;
    max-width: 38vw;
    background-color: var(--color-blue-100);
    border-radius: 8px;
    padding: 10px 16px 6px 16px;
    border: 4px solid #fff;
}
.time-event p {
    font-size: var(--fs-xs);
    padding-left: 48px;
    position: relative;
    z-index: 1;
}
.event-card p {
    padding-left: 28px;
}
.event-card p + p {
    margin-top: 0.5em;
}
.event-card p::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--color-red-500);
    background: url('../img/icon-d.svg') no-repeat;
    background-size: 90% 90%;
    position: absolute;
    left: 0;
    top: 4px;
}

/* swiper timeline */
.swiper {
    overflow: hidden;
}
.swiper-wrapper {
    display: flex;
    width: fit-content;
}
.swiper-slide {
    display: inline-block;
    width: 100%;
    flex-shrink: 0;
}
#timeline .swiper-wrapper {
    align-items: center;
}
.time-progress {
    position: absolute;
    height: 3px;
    background-color: var(--color-blue-400);
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transition: width 0.4s ease;
    z-index: 2;
}
.time-bar {
    overflow: hidden;
    padding-bottom: 24px;
    padding-top: 24px;
}
.time-bar span.has-event {
    cursor: pointer;
}
.time-bar span.has-event::after {
    content: '';
    position: absolute;
    display: block;
    border: 8px solid transparent;
    border-bottom-color: var(--color-red-400);
    z-index: 3;
    inset: 0;
    left: -6px;
    bottom: -35px;
    width: 0;
    height: 0;
    margin: auto;
    transition: border-color 0.2s ease;
}
.time-bar span.has-event:hover::after {
    border-bottom-color: var(--color-red-500);
}
.time-bar span.has-event.on-progress::after {
    border-bottom-color: var(--color-blue-400);
}
.time-content {
    position: relative;
    margin-top: -36px;
}
.time-content .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../img/bg.png') no-repeat;
    background-size: 150%;
    background-position: 100% 50%;
    transition: background-position 0.4s ease;
}
.time-content .bg-mask {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--color-blue-100) 0%, #fafafa66 10%, #fafafa66 80%, #ffffff 100%);
}
.time-event {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 0;
    gap: 20px;
}
.time-event::before {
    content: none;
}
.time-event span {
    font-size: var(--fs-xxxl);
    font-weight: bold;
    color: var(--color-blue-400);
    position: relative;
    text-align: right;
    display: flex;
}
.time-event i {
    display: none;
}
.event-card {
    margin-top: calc(var(--fs-xxxl) * 1.1);
    padding: 20px 30px;
    border: 0;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.16);
    height: fit-content;
}
.event-card p {
    font-size: var(--fs-m);
}
.event-card p::before {
    top: 0.325em;
}
.event-card p.no-dot::before {
    content: none;
}

/* survey */
.survey-wrap {
    display: flex;
    position: relative;
    align-items: center;
    gap: 60px;
    margin: 100px 0;
}
.survey-data {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 80px;
}
.sticky-wrap {
    position: relative;
}
.sticky-wrap .sticky {
    max-width: 100%;
    overflow: hidden;
}
.sticky-wrap.on-sticky .sticky {
    position: fixed;
    top: 50px;
}
.sticky-wrap.on-bottom .sticky {
    position: absolute;
    bottom: 0;
    top: auto;
}
.survey-article {
    width: 50%;
}
.survey-article .article {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.survey-article .article {
}
.survey-article .article h3 {
    margin-bottom: 10px;
}
/* data */
.data-wrap {
    position: relative;
    width: 100%;
}
.data-info-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}
.data-title {
    font-size: var(--fs-l);
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
}
.data-info {
    font-size: var(--fs-xxs);
    color: var(--color-gray-600);
}
.data-info .brick {
    margin-right: 4px;
    margin-top: -3px;
    vertical-align: middle;
}
.tip-card {
    position: absolute;
    min-width: 200px;
    max-width: 300px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.16);
    padding: 12px 20px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 10;
}
.tip-card .brick {
    display: inline-block;
    margin: -2px 6px 0 0 !important;
    vertical-align: middle;
}
.tip-card h6 {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: bold;
}
.tip-card p {
    display: block;
    font-size: var(--fs-xs);
    margin-top: 6px;
    line-height: 1.4;
    color: var(--color-gray-700);
    text-align: justify;
}
.tip-card .icon-brick {
    margin-right: 6px;
}
.tip-card.show {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: initial;
}
.data-footer {
    margin: 1em auto;
}
.waffle + .data-footer {
    max-width: 400px;
}
#survey-2-2 .data-footer {
    max-width: 465px;
}
.data-question {
    font-size: var(--fs-xxs);
    color: var(--color-gray-500);
    text-align: justify;
}
.data-question::before {
    content: '題目';
    display: block;
    padding: 0px 6px;
    background-color: var(--color-gray-200);
    width: fit-content;
    margin-bottom: 6px;
}

#survey-1-1 .tip-card[data-type="1-1"] { left: 5%; top: 20%; }
#survey-1-1 .tip-card[data-type="1-2"] { left: 35%; top: 60%; }
#survey-1-1 .tip-card[data-type="1-3"] { right: 5%; top: 20%; }

#survey-1-2 .tip-card[data-type="2-1"] { left: 5%; top: 20%; }
#survey-1-2 .tip-card[data-type="2-2"] { left: 35%; top: 60%; }
#survey-1-2 .tip-card[data-type="2-3"] { right: 5%; top: 20%; }

#survey-2-2 .tip-card[data-type="2-1"] { left: 20%; top: 60%; }
#survey-2-2 .tip-card[data-type="2-2"] { right: 5%; top: 60%; }

#survey-5-1 .tip-card[data-type="1-1"] { left: 5%; top: 20%; }
#survey-5-1 .tip-card[data-type="1-2"] { left: 35%; top: 60%; }
#survey-5-1 .tip-card[data-type="1-3"] { right: 5%; top: 20%; }
#survey-5-1 .tip-card[data-type="1-4"] { right: 5%; top: 60%; }
#survey-5-1 .tip-card[data-type="1-5"] { right: 5%; top: 20%; }

#survey-5-2 .tip-card[data-type="2-1"] { left: 5%; top: 20%; }
#survey-5-2 .tip-card[data-type="2-2"] { right: 5%; top: 60%; }
#survey-5-2 .tip-card[data-type="2-3"] { left: 5%; top: 20%; }
#survey-5-2 .tip-card[data-type="2-4"] { right: 5%; top: 60%; }

#survey-6-1 .tip-card[data-type="1-1"] { left: 5%; top: 20%; }
#survey-6-1 .tip-card[data-type="1-2"] { left: 5%; top: 60%; }
#survey-6-1 .tip-card[data-type="1-3"] { left: 15%; top: 20%; }
#survey-6-1 .tip-card[data-type="1-4"] { right: 5%; top: 60%; }
#survey-6-1 .tip-card[data-type="1-5"] { right: 5%; top: 20%; }
#survey-6-1 .tip-card[data-type="1-6"] { right: 5%; top: 60%; }

#survey-2-1 .tip-card[data-type="1"] { left: 35%; top: 20%; }
#survey-2-1 .tip-card[data-type="2"] { left: 35%; top: 30%; }
#survey-2-1 .tip-card[data-type="3"] { left: 35%; top: 40%; }
#survey-2-1 .tip-card[data-type="4"] { left: 35%; top: 50%; }
#survey-2-1 .tip-card[data-type="5"] { left: 35%; top: 60%; }
#survey-2-1 .tip-card[data-type="6"] { left: 35%; top: 70%; }

#survey-3-1 .tip-card[data-type="2"] { left: 3%; top: 60%; }
#survey-3-1 .tip-card[data-type="3"] { left: 45%; top: 60%; }

#survey-3-2 .tip-card[data-type="1"] { left: 35%; top: 20%; }
#survey-3-2 .tip-card[data-type="2"] { left: 35%; top: 40%; }
#survey-3-2 .tip-card[data-type="3"] { left: 35%; top: 60%; }

#survey-3-2 .tip-card[data-type="1-1"] { left: 5%; top: 30%; }
#survey-3-2 .tip-card[data-type="1-2"] { left: 15%; top: 30%; }
#survey-3-2 .tip-card[data-type="1-3"] { left: 25%; top: 30%; }

#survey-3-2 .tip-card[data-type="2-1"] { left: 5%; top: 55%; }
#survey-3-2 .tip-card[data-type="2-2"] { left: 15%; top: 55%; }
#survey-3-2 .tip-card[data-type="2-3"] { left: 25%; top: 55%; }
#survey-3-2 .tip-card[data-type="2-4"] { left: 35%; top: 55%; }
#survey-3-2 .tip-card[data-type="2-5"] { left: 45%; top: 55%; }

#survey-3-2 .tip-card[data-type="3-1"] { left: 5%; top: 80%; }
#survey-3-2 .tip-card[data-type="3-2"] { left: 15%; top: 80%; }
#survey-3-2 .tip-card[data-type="3-3"] { left: 25%; top: 80%; }

#survey-5-4 .tip-card[data-type="1-1"] { left: 5%; top: 30%; }
#survey-5-4 .tip-card[data-type="1-2"] { left: 15%; top: 30%; }
#survey-5-4 .tip-card[data-type="1-3"] { left: 25%; top: 30%; }

#survey-5-4 .tip-card[data-type="2-1"] { left: 5%; top: 55%; }
#survey-5-4 .tip-card[data-type="2-2"] { left: 15%; top: 55%; }
#survey-5-4 .tip-card[data-type="2-3"] { left: 25%; top: 55%; }
#survey-5-4 .tip-card[data-type="2-4"] { left: 35%; top: 55%; }
#survey-5-4 .tip-card[data-type="2-5"] { left: 45%; top: 55%; }

#survey-5-4 .tip-card[data-type="3-1"] { left: 5%; top: 80%; }
#survey-5-4 .tip-card[data-type="3-2"] { left: 15%; top: 80%; }
#survey-5-4 .tip-card[data-type="3-3"] { left: 25%; top: 80%; }

#survey-4-1 .tip-card[data-type="1"] { left: 35%; top: 0%; }
#survey-4-1 .tip-card[data-type="2"] { left: 30%; top: 9%; }
#survey-4-1 .tip-card[data-type="3"] { left: 25%; top: 18%; }
#survey-4-1 .tip-card[data-type="4"] { left: 20%; top: 27%; }
#survey-4-1 .tip-card[data-type="5"] { left: 15%; top: 36%; }
#survey-4-1 .tip-card[data-type="6"] { left: 35%; top: 54%; }
#survey-4-1 .tip-card[data-type="7"] { left: 30%; top: 63%; }
#survey-4-1 .tip-card[data-type="8"] { left: 25%; top: 72%; }
#survey-4-1 .tip-card[data-type="9"] { left: 20%; top: 81%; }
#survey-4-1 .tip-card[data-type="10"] { left: 15%; top: 90%; }

#survey-5-3 .tip-card[data-type="1"] { left: 35%; top: 10%; }
#survey-5-3 .tip-card[data-type="2"] { left: 30%; top: 20%; }
#survey-5-3 .tip-card[data-type="3"] { left: 25%; top: 30%; }
#survey-5-3 .tip-card[data-type="4"] { left: 35%; top: 40%; }
#survey-5-3 .tip-card[data-type="5"] { left: 30%; top: 50%; }
#survey-5-3 .tip-card[data-type="6"] { left: 25%; top: 60%; }
#survey-5-3 .tip-card[data-type="7"] { left: 20%; top: 70%; }
#survey-5-3 .tip-card[data-type="8"] { left: 20%; top: 80%; }
#survey-5-3 .tip-card[data-type="9"] { left: 15%; top: 90%; }

#survey-5-5 .tip-card[data-type="1"] { left: 35%; top: 20%; }
#survey-5-5 .tip-card[data-type="2"] { left: 30%; top: 40%; }
#survey-5-5 .tip-card[data-type="3"] { left: 25%; top: 60%; }
#survey-5-5 .tip-card[data-type="4"] { left: 35%; top: 80%; }

/* waffle */
.waffle {
    position: relative;
    display: grid;
    grid-template-rows: repeat(18, minmax(0, auto));
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}
#survey-2-2 .waffle {
    grid-template-columns: repeat(40, minmax(0, auto));
    grid-auto-flow: row;
}
.brick {
    display: inline-block;
    width: 19px;
    padding: 3px;
    height: auto;
    line-height: 0;
    --color-fill: var(--color-white);
    --color-stroke: var(--color-gray-300);
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.brick svg {
    width: 100%;
    height: auto;
}
.waffle.hover .brick {
    opacity: 0.25;
}
.waffle.hover .brick.hover {
    opacity: 1;
}
.brick[data-type="1-1"] {
    --color-fill: var(--color-blue-300);
    --color-stroke: var(--color-blue-500);
}
.brick[data-type="1-2"] {
    --color-fill: var(--color-green-200);
    --color-stroke: var(--color-blue-400);
}
.brick[data-type="1-3"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}

.brick[data-type="2-1"] {
    --color-fill: var(--color-blue-400);
    --color-stroke: var(--color-blue-500);
}
.brick[data-type="2-2"] {
    --color-fill: var(--color-blue-300);
    --color-stroke: var(--color-blue-500);
}
.brick[data-type="2-3"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}
.brick[data-type="2-4"] {
    --color-fill: var(--color-green-200);
    --color-stroke: var(--color-blue-400);
}
.brick[data-type="2-5"] {
    --color-fill: var(--color-gray-400);
    --color-stroke: var(--color-gray-800);
}

#survey-2-2 .brick[data-type="2-1"] {
    --color-fill: var(--color-gray-100);
    --color-stroke: var(--color-gray-400);
}
#survey-2-2 .brick[data-type="2-2"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}
#survey-2-2 .waffle {
    margin-left: 21px;
    margin-top: 42px;
}
#survey-2-2 .waffle .brick {
    position: relative;
    margin-left: -7px;
    margin-top: -21px;
    z-index: 0;
}
#survey-2-2 .waffle .brick:nth-of-type(1){
    grid-column: 9 / 10;
}
#survey-2-2 .waffle .brick:nth-of-type(118) {
    grid-column: 9 / 10;
}
#survey-2-2 .waffle .brick:nth-of-type(23) {
    grid-column: 31 / 41;
}
#survey-2-2 .waffle .brick:nth-of-type(142) {
    grid-column: 31 / 41;
}
#survey-2-2 .waffle .brick:nth-of-type(24),
#survey-2-2 .waffle .brick:nth-of-type(85) {
    grid-column: 4 / 5;
}
#survey-2-2 .waffle .brick:nth-of-type(56),
#survey-2-2 .waffle .brick:nth-of-type(117) {
    grid-column: 36 / 41;
}
#survey-2-2 .waffle .brick:nth-of-type(n + 90) {
    z-index: 1;
}
#survey-2-2 .waffle .brick:nth-of-type(n + 140) {
    z-index: 0;
}
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(140) { grid-area: 3 / 15 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(141) { grid-area: 3 / 16 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(142) { grid-area: 3 / 17 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(143) { grid-area: 3 / 18 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(144) { grid-area: 3 / 19 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(145) { grid-area: 3 / 20 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(146) { grid-area: 3 / 21 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(147) { grid-area: 3 / 22 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(148) { grid-area: 3 / 23 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(149) { grid-area: 3 / 24 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(150) { grid-area: 3 / 25 / auto / auto; }
#survey-2-2 .brick[data-type="2-2"]:nth-of-type(151) { grid-area: 3 / 26 / auto / auto; }


#survey-5-1 .brick[data-type="1-1"] {
    --color-fill: var(--color-blue-400);
    --color-stroke: var(--color-blue-500);
}
#survey-5-1 .brick[data-type="1-2"] {
    --color-fill: var(--color-blue-300);
    --color-stroke: var(--color-blue-400);
}
#survey-5-1 .brick[data-type="1-3"] {
    --color-fill: var(--color-green-200);
    --color-stroke: var(--color-blue-400);
}
#survey-5-1 .brick[data-type="1-4"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}
#survey-5-1 .brick[data-type="1-5"] {
    --color-fill: var(--color-gray-200);
    --color-stroke: var(--color-gray-600);
}

#survey-5-2 .brick[data-type="2-1"] {
    --color-fill: var(--color-blue-400);
    --color-stroke: var(--color-blue-500);
}
#survey-5-2 .brick[data-type="2-2"] {
    --color-fill: var(--color-blue-300);
    --color-stroke: var(--color-blue-500);
}
#survey-5-2 .brick[data-type="2-3"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}
#survey-5-2 .brick[data-type="2-4"] {
    --color-fill: var(--color-green-200);
    --color-stroke: var(--color-blue-400);
}

#survey-6-1 .brick[data-type="1-1"] {
    --color-fill: var(--color-blue-400);
    --color-stroke: var(--color-blue-500);
}
#survey-6-1 .brick[data-type="1-2"] {
    --color-fill: var(--color-blue-300);
    --color-stroke: var(--color-blue-500);
}
#survey-6-1 .brick[data-type="1-3"] {
    --color-fill: var(--color-blue-200);
    --color-stroke: var(--color-blue-400);
}
#survey-6-1 .brick[data-type="1-4"] {
    --color-fill: var(--color-green-200);
    --color-stroke: var(--color-blue-400);
}
#survey-6-1 .brick[data-type="1-5"] {
    --color-fill: var(--color-gray-400);
    --color-stroke: var(--color-gray-800);
}
#survey-6-1 .brick[data-type="1-6"] {
    --color-fill: var(--color-gray-200);
    --color-stroke: var(--color-gray-600);
}

/* chart bar */
.chart-bar {
    position: relative;
    padding: 30px 0;
    margin-left: 80px;
    width: calc(100% - 80px);
}
.data-info-wrap + .chart-bar {
    margin-top: 32px;
}
.chart-bar.no-bar-title {
    margin-left: 0;
    width: calc(100%);
}
.chart-line {
    position: absolute;
    inset: 0;
}
.chart-line i {
    position: absolute;
    display: inline-block;
    width: 1px;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-gray-300);
}
.chart-line i:nth-child(2) {
    left: 50%;
}
.chart-line i::before {
    content: attr(data-amount);
    position: absolute;
    font-size: var(--fs-xxs);
    text-align: center;
    color: var(--color-gray-600);
    left: -10px;
    right: -10px;
    top: -20px;
    margin: 0 auto;
}
.chart-line .chart-unit {
    position: absolute;
    font-size: var(--fs-m);
    color: var(--color-gray-300);
    right: 0;
    bottom: 0;
}
.bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bar {
    position: relative;
    display: flex;
    height: 40px;
    background-color: transparent;
}
.bar-data {
    transition: all 0.4s ease;
}

.bar h5 {
    position: absolute;
    display: block;
    font-size: var(--fs-xs);
    line-height: 1;
    top: 0;
    bottom: 0;
    height: 100%;
    right: calc(100% + 10px);
    margin: auto;
    width: 80px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.bar::after {
    content: attr(data-amount);
    position: absolute;
    display: block;
    font-size: var(--fs-xs);
    font-weight: bold;
    line-height: 1;
    color: var(--color-gray-900);
    top: 0;
    bottom: 0;
    height: 1em;
    margin: auto;
    right: -36px;
}


.icon-brick {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--color-fill);
}

.inline-bar {
    height: 100%;
    display: flex;
    align-items: center;
}
.inline-bar.auto {
    flex-grow: 1;
}
.inline-bar h6 {
    font-size: var(--fs-xs);
    color: var(--color-white);
    padding: 6px 12px;
}

.chart-bar.hover .bar-data {
    opacity: 0.3;
    filter: grayscale(0.3);
}
.chart-bar.hover .bar-data.hover {
    opacity: 1;
    filter: grayscale(0);
}

.bar[data-type="1"],
.icon-brick[data-type="1"] {
    background-color: var(--color-blue-500);
}
.bar[data-type="2"],
.icon-brick[data-type="2"] {
    background-color: var(--color-blue-400);
}
.bar[data-type="3"],
.icon-brick[data-type="3"] {
    background-color: var(--color-blue-300);
}

.inline-bar[data-type="1"] {
    background-color: var(--color-gray-300);
}
.inline-bar[data-type="2"] {
    background-color: var(--color-green-100);
}
.inline-bar[data-type="3"] {
    background-color: var(--color-green-200);
}
.inline-bar[data-type="4"] {
    background-color: var(--color-green-300);
}
.inline-bar[data-type="5"] {
    background-color: var(--color-green-400);
}
.inline-bar[data-type="6"] {
    background-color: var(--color-green-500);
}
.inline-bar[data-type="7"] {
    background-color: var(--color-gray-500);
}

#survey-2-1 .bar[data-type="1"],
#survey-2-1 .icon-brick[data-type="1"] {
    background-color: var(--color-blue-500);
}
#survey-2-1 .bar[data-type="2"],
#survey-2-1 .icon-brick[data-type="2"] {
    background-color: var(--color-blue-400);
}
#survey-2-1 .bar[data-type="3"],
#survey-2-1 .icon-brick[data-type="3"] {
    background-color: var(--color-blue-300);
}
#survey-2-1 .bar[data-type="4"],
#survey-2-1 .icon-brick[data-type="4"] {
    background-color: var(--color-blue-300);
}
#survey-2-1 .bar[data-type="5"],
#survey-2-1 .icon-brick[data-type="5"] {
    background-color: var(--color-blue-200);
}
#survey-2-1 .bar[data-type="6"],
#survey-2-1 .icon-brick[data-type="6"] {
    background-color: var(--color-blue-200);
}

#survey-3-1 .icon-brick[data-type="1"] {
    background-color: var(--color-gray-300)
}
#survey-3-1 .icon-brick[data-type="2"] {
    background-color: var(--color-green-100)
}
#survey-3-1 .icon-brick[data-type="3"] {
    background-color: var(--color-green-200)
}
#survey-3-1 .icon-brick[data-type="4"] {
    background-color: var(--color-green-300)
}
#survey-3-1 .icon-brick[data-type="5"] {
    background-color: var(--color-green-400)
}
#survey-3-1 .icon-brick[data-type="6"] {
    background-color: var(--color-green-500)
}
#survey-3-1 .icon-brick[data-type="7"] {
    background-color: var(--color-gray-500)
}

/* #survey-3-2 .chart-line i:nth-child(2) {
    left: 17.7%;
}
#survey-3-2 .chart-line i:nth-child(3) {
    left: 35.4%;
}
#survey-3-2 .chart-line i:nth-child(4) {
    left: 53.1%;
}
#survey-3-2 .chart-line i:nth-child(5) {
    left: 70.8%;
}
#survey-3-2 .chart-line i:nth-child(6) {
    left: 88.5%;
}
#survey-3-2 .bar:nth-child(1) {
    width: 59.96%;
}
#survey-3-2 .bar:nth-child(3) {
    width: 63.04%;
} */

#survey-5-4 .chart-line i:nth-child(2) {
    left: 37.28%;
}
#survey-5-4 .chart-line i:nth-child(3) {
    left: 74.57%;
}
#survey-5-4 .bar:nth-child(1) {
    width: 60.55%;
}
#survey-5-4 .bar:nth-child(3) {
    width: 53.24%;
}
#survey-5-4 .inline-bar {
    flex-grow: 1;
}

#survey-3-2 .bar[data-type="1"],
#survey-3-2 .icon-brick[data-type="1"] {
    background-color: var(--color-green-400)
}
#survey-3-2 .bar[data-type="2"],
#survey-3-2 .icon-brick[data-type="2"] {
    background-color: var(--color-green-300)
}
#survey-3-2 .bar[data-type="3"],
#survey-3-2 .icon-brick[data-type="3"] {
    background-color: var(--color-green-200)
}

#survey-3-2 .inline-bar[data-type="1-1"],
#survey-3-2 .icon-brick[data-type="1-1"] {
    background-color: var(--color-green-400)
}
#survey-3-2 .inline-bar[data-type="1-2"],
#survey-3-2 .icon-brick[data-type="1-2"] {
    background-color: var(--color-gray-400)
}
#survey-3-2 .inline-bar[data-type="1-3"],
#survey-3-2 .icon-brick[data-type="1-3"] {
    background-color: var(--color-gray-300)
}

#survey-3-2 .inline-bar[data-type="2-1"],
#survey-3-2 .icon-brick[data-type="2-1"] {
    background-color: var(--color-green-400)
}
#survey-3-2 .inline-bar[data-type="2-2"],
#survey-3-2 .icon-brick[data-type="2-2"] {
    background-color: var(--color-green-300)
}
#survey-3-2 .inline-bar[data-type="2-3"],
#survey-3-2 .icon-brick[data-type="2-3"] {
    background-color: var(--color-gray-400)
}
#survey-3-2 .inline-bar[data-type="2-4"],
#survey-3-2 .icon-brick[data-type="2-4"] {
    background-color: var(--color-gray-300)
}
#survey-3-2 .inline-bar[data-type="2-5"],
#survey-3-2 .icon-brick[data-type="2-5"] {
    background-color: var(--color-gray-200)
}

#survey-3-2 .inline-bar[data-type="3-1"],
#survey-3-2 .icon-brick[data-type="3-1"] {
    background-color: var(--color-green-400)
}
#survey-3-2 .inline-bar[data-type="3-2"],
#survey-3-2 .icon-brick[data-type="3-2"] {
    background-color: var(--color-gray-400)
}
#survey-3-2 .inline-bar[data-type="3-3"],
#survey-3-2 .icon-brick[data-type="3-3"] {
    background-color: var(--color-gray-300)
}

#survey-5-4 .inline-bar[data-type="1-1"],
#survey-5-4 .icon-brick[data-type="1-1"] {
    background-color: var(--color-yellow-400)
}
#survey-5-4 .inline-bar[data-type="1-2"],
#survey-5-4 .icon-brick[data-type="1-2"] {
    background-color: var(--color-gray-400)
}
#survey-5-4 .inline-bar[data-type="1-3"],
#survey-5-4 .icon-brick[data-type="1-3"] {
    background-color: var(--color-gray-300)
}

#survey-5-4 .inline-bar[data-type="2-1"],
#survey-5-4 .icon-brick[data-type="2-1"] {
    background-color: var(--color-yellow-400)
}
#survey-5-4 .inline-bar[data-type="2-2"],
#survey-5-4 .icon-brick[data-type="2-2"] {
    background-color: var(--color-yellow-300)
}
#survey-5-4 .inline-bar[data-type="2-3"],
#survey-5-4 .icon-brick[data-type="2-3"] {
    background-color: var(--color-gray-400)
}
#survey-5-4 .inline-bar[data-type="2-4"],
#survey-5-4 .icon-brick[data-type="2-4"] {
    background-color: var(--color-gray-300)
}
#survey-5-4 .inline-bar[data-type="2-5"],
#survey-5-4 .icon-brick[data-type="2-5"] {
    background-color: var(--color-gray-200)
}

#survey-5-4 .inline-bar[data-type="3-1"],
#survey-5-4 .icon-brick[data-type="3-1"] {
    background-color: var(--color-yellow-400)
}
#survey-5-4 .inline-bar[data-type="3-2"],
#survey-5-4 .icon-brick[data-type="3-2"] {
    background-color: var(--color-gray-400)
}
#survey-5-4 .inline-bar[data-type="3-3"],
#survey-5-4 .icon-brick[data-type="3-3"] {
    background-color: var(--color-gray-300)
}

#survey-4-1 .bar[data-type="1"],
#survey-4-1 .icon-brick[data-type="1"] {
    background-color: var(--color-red-500)
}
#survey-4-1 .bar[data-type="2"],
#survey-4-1 .icon-brick[data-type="2"] {
    background-color: var(--color-red-400)
}
#survey-4-1 .bar[data-type="3"],
#survey-4-1 .icon-brick[data-type="3"] {
    background-color: var(--color-red-300)
}
#survey-4-1 .bar[data-type="4"],
#survey-4-1 .icon-brick[data-type="4"] {
    background-color: var(--color-red-300)
}
#survey-4-1 .bar[data-type="5"],
#survey-4-1 .icon-brick[data-type="5"] {
    background-color: var(--color-red-200)
}
#survey-4-1 .bar[data-type="6"],
#survey-4-1 .icon-brick[data-type="6"] {
    background-color: var(--color-red-200)
}
#survey-4-1 .bar[data-type="7"],
#survey-4-1 .icon-brick[data-type="7"] {
    background-color: var(--color-red-200)
}
#survey-4-1 .bar[data-type="8"],
#survey-4-1 .icon-brick[data-type="8"] {
    background-color: var(--color-red-100)
}
#survey-4-1 .bar[data-type="9"],
#survey-4-1 .icon-brick[data-type="9"] {
    background-color: var(--color-red-100)
}
#survey-4-1 .bar[data-type="10"],
#survey-4-1 .icon-brick[data-type="10"] {
    background-color: var(--color-gray-200)
}

#survey-5-3 .bar[data-type="1"],
#survey-5-3 .icon-brick[data-type="1"] {
    background-color: var(--color-yellow-500)
}
#survey-5-3 .bar[data-type="2"],
#survey-5-3 .icon-brick[data-type="2"] {
    background-color: var(--color-yellow-400)
}
#survey-5-3 .bar[data-type="3"],
#survey-5-3 .icon-brick[data-type="3"] {
    background-color: var(--color-yellow-400)
}
#survey-5-3 .bar[data-type="4"],
#survey-5-3 .icon-brick[data-type="4"] {
    background-color: var(--color-yellow-400)
}
#survey-5-3 .bar[data-type="5"],
#survey-5-3 .icon-brick[data-type="5"] {
    background-color: var(--color-yellow-400)
}
#survey-5-3 .bar[data-type="6"],
#survey-5-3 .icon-brick[data-type="6"] {
    background-color: var(--color-yellow-300)
}
#survey-5-3 .bar[data-type="7"],
#survey-5-3 .icon-brick[data-type="7"] {
    background-color: var(--color-yellow-200)
}
#survey-5-3 .bar[data-type="8"],
#survey-5-3 .icon-brick[data-type="8"] {
    background-color: var(--color-yellow-200)
}
#survey-5-3 .bar[data-type="9"],
#survey-5-3 .icon-brick[data-type="9"] {
    background-color: var(--color-yellow-100)
}
#survey-5-3 .bar[data-type="10"],
#survey-5-3 .icon-brick[data-type="10"] {
    background-color: var(--color-yellow-100)
}

#survey-5-5 .bar[data-type="1"],
#survey-5-5 .icon-brick[data-type="1"] {
    background-color: var(--color-yellow-500)
}
#survey-5-5 .bar[data-type="2"],
#survey-5-5 .icon-brick[data-type="2"] {
    background-color: var(--color-yellow-400)
}
#survey-5-5 .bar[data-type="3"],
#survey-5-5 .icon-brick[data-type="3"] {
    background-color: var(--color-yellow-400)
}
#survey-5-5 .bar[data-type="4"],
#survey-5-5 .icon-brick[data-type="4"] {
    background-color: var(--color-yellow-400)
}
/* anime */
.anime.time-event {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease;
}
.anime.time-event.active {
    opacity: 1;
    transform: translateY(0);
}

.anime.waffle {
    filter: grayscale(1);
}
.anime.waffle.active {
    filter: grayscale(0);
}

@keyframes jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.anime.bar.hide {
    width: 0 !important;
}
.anime.bar {
    transition: all 0.6s ease;
}

.anime.bar.hide .inline-bar {
    width: 0 !important;
    padding: 0;
}
.anime.bar .inline-bar {
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.6s ease;
}
.anime.bar .inline-bar:nth-of-type(1) { transition-delay: 0s; }
.anime.bar .inline-bar:nth-of-type(2) { transition-delay: 0.1s; }
.anime.bar .inline-bar:nth-of-type(3) { transition-delay: 0.2s; }
.anime.bar .inline-bar:nth-of-type(4) { transition-delay: 0.3s; }
.anime.bar .inline-bar:nth-of-type(5) { transition-delay: 0.4s; }
.anime.bar .inline-bar:nth-of-type(6) { transition-delay: 0.5s; }
.anime.bar.hide::after {
    opacity: 0;
    transform: translateX(-6px);
}
.anime.bar::after {
    opacity: 1;
    transform: translateX(0px);
    transition: all 0.6s ease 0.6s;
}

.sec-title .anime {
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.4s ease;
}
.sec-title .anime.active {
    opacity: 1;
    transform: translateY(0px);
}

#sec-top .bg-wrap img.anime {
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.6s ease;
}
#sec-top .bg-wrap img.anime.active {
    opacity: 1;
    transform: translateY(0);
}
#sec-top .sec-title .anime {
    opacity: 0;
    transform: translateX(-12px);
    transition: all 1s ease 0.4s;
}
#sec-top .sec-title .anime:nth-child(1) {
    transform: translateX(20px);
    transition-delay: 1.2s;
}
#sec-top .sec-title .anime:nth-child(2) {
    transition-delay: 0.4s;
}
#sec-top .sec-title .anime:nth-child(3) {
    transition-delay: 0.6s;
}
#sec-top .sec-title .anime:nth-child(4) {
    transition-delay: 0.8s;
}

#sec-top .sec-title .anime.active {
    opacity: 1;
    transform: translateX(0px);
}