:root {
    --h1: ;
    --h2: ;
    --h3: ;
    --h4: ;
    --h5: ;
    --h6: ;
    --body: ;
	--container-padding: 80px;
	--blue: #13BFFB;
	--pink: #FF9CFA;
	--silver: #DEE3E4;
	--bronze: #9E988C;
}

.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-70 { padding: 70px; }
.p-80 { padding: 80px; }
.p-90 { padding: 90px; }
.p-100 { padding: 100px; }
.p-110 { padding: 110px; }
.p-120 { padding: 120px; }
.p-130 { padding: 130px; }
.p-140 { padding: 140px; }
.p-150 { padding: 150px; }
.p-160 { padding: 160px; }
.p-170 { padding: 170px; }
.p-180 { padding: 180px; }
.p-190 { padding: 190px; }
.p-200 { padding: 200px; }

.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pt-110 { padding-top: 110px; }
.pt-120 { padding-top: 120px; }
.pt-130 { padding-top: 130px; }
.pt-140 { padding-top: 140px; }
.pt-150 { padding-top: 150px; }
.pt-160 { padding-top: 160px; }
.pt-170 { padding-top: 170px; }
.pt-180 { padding-top: 180px; }
.pt-190 { padding-top: 190px; }
.pt-200 { padding-top: 200px; }

.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-110 { padding-bottom: 110px; }
.pb-120 { padding-bottom: 120px; }
.pb-130 { padding-bottom: 130px; }
.pb-140 { padding-bottom: 140px; }
.pb-150 { padding-bottom: 150px; }
.pb-160 { padding-bottom: 160px; }
.pb-170 { padding-bottom: 170px; }
.pb-180 { padding-bottom: 180px; }
.pb-190 { padding-bottom: 190px; }
.pb-200 { padding-bottom: 200px; }

.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-60 { margin: 60px; }
.m-70 { margin: 70px; }
.m-80 { margin: 80px; }
.m-90 { margin: 90px; }
.m-100 { margin: 100px; }
.m-110 { margin: 110px; }
.m-120 { margin: 120px; }
.m-130 { margin: 130px; }
.m-140 { margin: 140px; }
.m-150 { margin: 150px; }
.m-160 { margin: 160px; }
.m-170 { margin: 170px; }
.m-180 { margin: 180px; }
.m-190 { margin: 190px; }
.m-200 { margin: 200px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }
.mb-110 { margin-bottom: 110px; }
.mb-120 { margin-bottom: 120px; }
.mb-130 { margin-bottom: 130px; }
.mb-140 { margin-bottom: 140px; }
.mb-150 { margin-bottom: 150px; }
.mb-160 { margin-bottom: 160px; }
.mb-170 { margin-bottom: 170px; }
.mb-180 { margin-bottom: 180px; }
.mb-190 { margin-bottom: 190px; }
.mb-200 { margin-bottom: 200px; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }
.mt-110 { margin-top: 110px; }
.mt-120 { margin-top: 120px; }
.mt-130 { margin-top: 130px; }
.mt-140 { margin-top: 140px; }
.mt-150 { margin-top: 150px; }
.mt-160 { margin-top: 160px; }
.mt-170 { margin-top: 170px; }
.mt-180 { margin-top: 180px; }
.mt-190 { margin-top: 190px; }
.mt-200 { margin-top: 200px; }


/* TYPOGRAPHY */
body, html {
	background: #DEE3E4;
    font-family: "", sans-serif;
    font-size: var(--body);
    line-height: ;
}
h1, .h1 {
    font-size: var(--h1);
    line-height: ;
}
h2, .h2 {
    font-size: var(--h2);
    line-height: ;
}
h3, .h3 {
    font-size: var(--h3);
    line-height: ;
}
h4, .h4 {
    font-size: var(--h4);
    line-height: ;
}
h5, .h5 {
    font-size: var(--h5);
    line-height: ;
}
h6, .h6 {
    font-size: var(--h6);
    line-height: ;
}
small {
    font-size: ;
    line-height: ;
}
.elementor-button, .btn.btn-default {
    font-size: ;
    line-height: ;
}
/* END TYPOGRAPHY */

/* HEADER */

header {
	padding: 60px var(--container-padding);
}
#adm-ntu-logo img {
	height: 60px;
}

/* END HEADER */

/* CONTENT */

.container-padding {
	padding: 0 var(--container-padding);
}

#top-row, #middle-row, header {
	max-width: 1440px;
	margin: 0 auto;
}

#top-row {
	display: flex;
	gap: 16px;
	position: relative;
}
#top-row > div {
	width: 100%;
}
#top-row #top-left .title-c, #top-row #top-right .title-c {
	background: var(--bronze);	
	width: 100%;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#top-row #top-right .title-c  {
	background: var(--pink);
}
#top-row #top-left .title-c svg, #top-row #top-right .title-c svg {
	z-index: 1;
	max-width: 100%;
	position: relative;
}
#top-row::before {
	content: '';
	position: absolute;
	width: 1px; height: 100%;
	background: url('data:image/svg+xml,<svg width="2" height="76" viewBox="0 0 2 76" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="3.27835e-08" x2="0.749997" y2="76" stroke="black" stroke-width="1.5" stroke-dasharray="3.68 3.68"/></svg>') no-repeat center top 2px;
	background-size: coerv;
	left: 50%;
	top: 0;
	transform: tranlsateX(-50%);
}
#top-left .title-c, #top-right .title-c { position: relative; }
#top-left .top-bg {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
}
#top-right .top-bg {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: end;
	background: var(--pink);
}

#top-right .top-bg svg {
	height: 66px;
	width: auto;
}
#top-row .blue-line {
	background: var(--blue);
	height: 4px;
	width: 100%;
	margin-bottom: 10px;
}
#top-row .title-c::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: black;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}

#top-row {
	margin-bottom: 38px;
}

#middle-row {
	padding: 0 var(--container-padding);
	display: flex;
	gap: 16px;
	width: 100%;
}
#middle-row .middle-c {
	width: 100%;
	height: auto;
	overflow-x: clip;
}
#middle-row .number-c {
	background: var(--blue);
	width: 100%;
	height: 15px;
	margin-bottom: 10px;
}
#middle-row .lottie-c {
	height: 245px;
	overflow-x: clip;
}
#middle-row #a .lottie-c, #middle-row #d .lottie-c, #middle-row #m .lottie-c {
	background: var(--pink);
}
#middle-row #s .lottie-c, #middle-row #h .lottie-c, #middle-row #o .lottie-c, #middle-row #w .lottie-c {
	background: var(--bronze);
}
.lottie-c { position: relative; }
.lottie-wrapper {
	height: 245px;
	width: 100%;
	min-width: 245px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

#a {
	max-width: calc((6.5% - ((7 - 1) * 16px) / 7));
	flex: 0 0 calc((6.5% - ((7 - 1) * 16px) / 7));
}
#d {
	max-width: calc((12% - ((7 - 1) * 16px) / 7));
	flex: 0 0 calc((12% - ((7 - 1) * 16px) / 7));
}
#m {
	max-width: calc((24% - ((7 - 1) * 16px) / 7));
	flex: 0 0 calc((24% - ((7 - 1) * 16px) / 7));
}
#s {
	flex: 0 0 calc((9% - ((7 - 1) * 16px) / 7));
}
#h {
	flex: 0 0 calc((11% - ((7 - 1) * 16px) / 7));
}
#o {
	flex: 0 0 calc((15% - ((7 - 1) * 16px) / 7));
}
#w {
	flex: 0 0 calc((22.5% - ((7 - 1) * 16px) / 7));
}

.progress-container {
	position: relative;
	width: calc(100% - 12px);
}
.circle {
	border-radius: 50%;
	width: 12px;
	height: 12px;
	background: black;
	position: absolute;
	transition: all .05s ease;

}

/* END CONTENT */

/* FOOTER */



/* END FOOTER */