html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
input,
textarea,
select,
button {
outline: none;
}
input {
line-height: normal;
}
label,
button {
cursor: pointer;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
.hero {
background-image: url(/img/theme-chipchip/c1-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
overflow: hidden;
margin-top: -80px;
}
@media screen and (max-width: 768px) {
.hero {
background-image: url(/img/theme-chipchip/c1-bg-mobile.svg);
background-size: cover;
background-position: bottom;
padding-top: 80px;
}
}
.hero-container {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.hero-container {
flex-direction: column;
}
}
.hero-content {
flex: 1 1 0%;
max-width: 653px;
width: 100%;
}
@media screen and (min-width: 1180px) {
.hero-content {
padding: 40px 0;
}
}
.hero-content-sub-title {
font-size: 28.58px;
font-weight: 600;
line-height: 41.45px;
color: black;
margin-bottom: 12px;
}
@media screen and (max-width: 1180px) {
.hero-content-sub-title {
font-size: 18px;
font-weight: 600;
line-height: 23.2px;
text-align: left;
padding-top: 24px;
margin-bottom: 0px;
}
}
.hero-content-title {
color: #339316;
font-family: "SF Pro Rounded", sans-serif;
font-size: 62px;
font-style: normal;
font-weight: 800;
line-height: 64px;
}
@media screen and (max-width: 1180px) {
.hero-content-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px;
}
}
.hero-content-title-img {
width: 295px;
}
@media screen and (max-width: 1180px) {
.hero-content-title-img {
width: 148px;
}
}
.hero-content-title-item {
background: linear-gradient(90deg, #ef673a 0.1%, #ffba1a 184.62%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content-lines {
position: absolute;
bottom: -20px;
left: 0;
max-width: 595px;
width: 100%;
z-index: -1;
}
@media screen and (max-width: 1180px) {
.hero-content-lines {
bottom: -12px;
}
}
.hero-content-desc {
font-size: 28.58px;
font-weight: 400;
line-height: 47.16px;
color: #000000;
}
@media screen and (max-width: 1180px) {
.hero-content-desc {
font-size: 16px;
font-weight: 400;
line-height: 26.4px;
text-align: center;
padding-top: 16px;
}
}
.hero-content-desc-item {
color: #272b30;
text-align: left;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
@media screen and (max-width: 1180px) {
.hero-content-desc-item {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
}
.hero-content-btn {
margin-top: 42px;
}
@media screen and (max-width: 1180px) {
.hero-content-btn {
margin: 20px 0;
display: flex;
justify-content: center;
}
}
.hero-image {
flex: 1 1 0%;
aspect-ratio: 1/1;
margin-top: 12px;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.hero-image {
margin-left: -60px;
margin-top: 164px;
margin-bottom: 0;
}
}
.footer {
display: flex;
justify-content: space-between;
padding: 32px 0;
}
@media screen and (max-width: 768px) {
.footer {
display: block;
padding: 24px 0;
}
.footer > :not(:last-child) {
margin-bottom: 32px;
}
}
.footer-name {
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
.footer-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.footer-icon {
height: 24px;
width: 24px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
svg:not(#other-icon) > path {
fill: currentColor;
}
p {
margin: 0;
}
.container, .contact-body, .about-proud-body, .about-proof-body, .proud-body, .celebrity-container, .program-body, .online-class-body, .teacher-body, .student-container, .chip-body {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 768px) {
.container, .contact-body, .about-proud-body, .about-proof-body, .proud-body, .celebrity-container, .program-body, .online-class-body, .teacher-body, .student-container, .chip-body {
padding-left: 24px;
padding-right: 24px;
}
}
.commit {
width: 100%;
}
@media (min-width: 1023px) {
.commit {
display: flex;
justify-content: center;
align-items: center;
}
}
.commit-desc {
font-size: 28px;
font-weight: 500;
line-height: 40.6px;
text-align: center;
color: rgba(0, 0, 0, 0.8);
margin-top: 11px;
margin-bottom: 12px;
}
@media (max-width: 767px) {
.commit-desc {
font-size: 16px;
font-weight: 400;
line-height: 23.2px;
text-align: center;
margin-top: 4px;
}
}
.commit-title, .celebrity-title, .feedback-title, .student-title {
font-size: 48px;
font-weight: 700;
line-height: 64.8px;
text-align: center;
color: #000000;
}
@media screen and (max-width: 768px) {
.commit-title, .celebrity-title, .feedback-title, .student-title {
margin-top: 12px;
font-size: 22px;
font-weight: 700;
line-height: 29.7px;
text-align: center;
}
}
.chip-title {
color: #ff9914;
text-align: center;
/* h3 */
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.chip-title {
margin-top: 36px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 40px;
padding: 0 16px;
}
}
.chip-title-line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-75%, 50%);
width: 267px;
}
@media screen and (max-width: 1180px) {
.chip-title-line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-75%, 50%);
width: 163px;
}
}
.chip-body {
padding: 100px 0;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 780px) {
.chip-body {
display: block;
padding: 52px 0;
}
}
.chip-body-wrapper {
padding: 24px 0;
background-image: url(/img/theme-chipchip/c2-bg.png);
width: 100%;
background-size: cover;
width: 100%;
background-position: center;
}
@media screen and (max-width: 1180px) {
.chip-body-wrapper {
padding: 0;
background-image: url(/img/theme-chipchip/c2-bg-mobile.svg);
width: 100%;
background-size: cover;
background-position: left;
background-position: top;
}
}
.chip-body-right {
margin-top: 90px;
}
@media screen and (max-width: 1180px) {
.chip-body-right {
margin-top: 48px;
padding: 0 16px 0 32px;
}
}
@media screen and (max-width: 1180px) {
.chip-body-left {
padding: 0 32px 0 16px;
}
}
.chip-card {
background-color: white;
width: 100%;
padding: 32px;
max-width: 300px;
border-radius: 24px;
box-shadow: 16px 16px 0px 0px #ffdfce;
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
.chip-card.first {
box-shadow: 16px 16px 0px 0px #ffdfce;
}
.chip-card.second {
box-shadow: 16px 16px 0px 0px #dfd7ff;
}
.chip-card.third {
box-shadow: -16px 16px 0px 0px #b5e4ca;
}
.chip-card.fourth {
box-shadow: -16px 16px 0px 0px #ffefd0;
}
@media screen and (max-width: 780px) {
.chip-card {
padding: 24px;
max-width: 780px;
}
}
.chip-card-title {
color: #f57032;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
@media screen and (max-width: 1180px) {
.chip-card-title {
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.chip-card-desc {
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
@media screen and (max-width: 1180px) {
.chip-card-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.student {
position: relative;
}
.student-content {
margin: 40px 0 24px 0;
}
@media screen and (max-width: 768px) {
.student-content {
margin: 24px 0;
}
}
.student-content-arrows {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
}
.student-content-arrows > :not(:last-child) {
margin-right: 15px;
}
@media screen and (max-width: 768px) {
.student-container {
padding: 0 0 0 16px !important;
}
}
.student-title {
max-width: 1018px;
width: 100%;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.student-title {
margin-bottom: 24px;
}
}
.student-card {
display: flex;
align-items: center;
flex-direction: column;
}
.student-card-img {
width: 320px;
height: 320px;
border-radius: 100%;
aspect-ratio: 1/1;
}
@media screen and (max-width: 768px) {
.student-card-img {
width: 240px;
height: 240px;
}
}
.student-card-content {
margin-top: 24px;
display: flex;
align-items: center;
flex-direction: column;
}
.student-card-name {
color: #272b30;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 133.333% */
}
.student-card-desc {
color: #57595c;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.student-card-width > * {
width: 21.7391304348%;
}
@media screen and (max-width: 768px) {
.student-card-width > * {
width: 76.9230769231%;
}
}
.student-video {
position: relative;
flex: 1 1 0%;
width: 100%;
aspect-ratio: 330/426;
}
.student-iframe {
width: 100%;
object-fit: cover;
display: none;
aspect-ratio: 330/426;
}
.student-card-content {
padding: 24px 0;
}
@media screen and (max-width: 768px) {
.student-card-content {
padding: 16px 0;
}
}
.student-img {
aspect-ratio: 330/426;
object-fit: cover;
width: 100%;
}
.student-name {
font-size: 20px;
font-weight: 600;
line-height: 29px;
text-align: center;
color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 768px) {
.student-name {
font-size: 16px;
font-weight: 600;
line-height: 23.2px;
}
}
.student-lesson {
color: #3db54a;
font-size: 23px;
font-weight: 700;
line-height: 33.35px;
text-align: center;
}
@media screen and (max-width: 768px) {
.student-lesson {
font-size: 18px;
font-weight: 700;
line-height: 26.1px;
}
}
.feedback {
position: relative;
}
@media screen and (max-width: 768px) {
.feedback {
margin: 24px 0;
}
}
.feedback-content {
margin: 64px 0 60px 0;
}
@media screen and (max-width: 768px) {
.feedback-content {
margin: 24px 0;
}
}
.feedback-container {
padding: 100px 0;
}
@media screen and (max-width: 768px) {
.feedback-container {
padding: 24px 0 !important;
}
}
.feedback-title {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.feedback-title {
margin-bottom: 24px;
}
}
.feedback-img {
aspect-ratio: 1/1;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.uk-child-width-mobile > * {
width: 80%;
}
}
.platform {
position: relative;
background-image: url(/img/theme-chipchip/c5-bg.png);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: center;
overflow: hidden;
}
@media screen and (max-width: 780px) {
.platform {
padding: 40px 0 83px 0;
background-image: url(/img/theme-chipchip/c5-bg-mobile.svg);
background-size: cover;
background-position: bottom;
}
}
.platform-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 72px 0 100px 0;
gap: 14px;
}
@media screen and (max-width: 768px) {
.platform-container {
display: flex;
flex-direction: column-reverse;
margin: 16px 0 0 0;
}
.platform-container > :not(:last-child) {
margin: 24px 16px 0;
}
}
.platform-title {
color: #4ab749;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.platform-title {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
padding: 0 16px;
}
}
.platform-title-line {
position: absolute;
bottom: 0px;
left: 0;
width: 200px;
}
@media screen and (max-width: 1180px) {
.platform-title-line {
position: absolute;
top: 32px;
left: 0;
width: 120px;
}
}
.platform-desc {
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
margin: 16px 0 26px 0;
text-align: center;
}
@media screen and (max-width: 1180px) {
.platform-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
text-align: center;
padding: 0 16px;
}
}
.platform-img {
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.platform-img {
width: 100%;
padding: 0 16px;
}
}
.platform-content {
background-color: white;
padding: 16px;
border-radius: 12px;
max-width: 520px;
width: 100%;
}
.platform-content > :not(:last-child) {
margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
.platform-content {
margin-right: 32px;
}
}
@media screen and (min-width: 1180px) {
.platform-break {
display: none;
}
}
@media screen and (max-width: 1180px) {
.platform-break-desktop {
display: none;
}
}
.platform-card {
display: flex;
}
.platform-card-desc {
color: #9fa59e;
font-size: 24px;
display: flex;
font-weight: 500;
line-height: 34.8px;
padding: 16px 16px 16px 0;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.platform-card-desc {
font-size: 16px;
font-weight: 500;
line-height: 23.2px;
padding: 16px 16px 16px 0;
}
}
.platform-card-desc.active {
color: #4ab749;
background-color: #fbfbfb;
cursor: default;
border-radius: 8px;
}
.platform-card-desc.active::before {
background-color: #4ab749;
}
.platform-card-desc::before {
content: "";
width: 6px;
flex: none;
margin-right: 24px;
height: 100%;
background-color: #9fa59e;
border-radius: 24px;
display: block;
}
.teacher {
padding: 60px 0 51px 0;
background-image: url(/img/theme-chipchip/c4-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: contain;
overflow: hidden;
}
@media screen and (max-width: 780px) {
.teacher {
padding: 40px 0 83px 0;
background-image: url(/img/theme-chipchip/c4-bg-mobile.svg);
background-size: cover;
background-position: bottom;
}
}
.teacher-title {
color: #ff9914;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.teacher-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.teacher-title-line {
position: absolute;
bottom: -10px;
left: 0;
width: 320px;
}
@media screen and (max-width: 1180px) {
.teacher-title-line {
position: absolute;
top: 32px;
left: 0;
width: 190px;
}
}
.teacher-desc {
color: #5f8d52;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
margin: 16px 0 26px 0;
text-align: center;
}
@media screen and (max-width: 1180px) {
.teacher-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
text-align: center;
padding: 0 16px;
}
}
.teacher-img {
width: 735px;
padding: 0 !important;
}
@media screen and (max-width: 1180px) {
.teacher-img {
padding: 0;
}
}
@media screen and (min-width: 1180px) {
.teacher-break {
display: none;
}
}
.teacher-body {
display: grid;
grid-template-columns: auto auto auto;
gap: 16px;
}
@media screen and (max-width: 780px) {
.teacher-body {
display: block;
gap: 16px;
}
}
.teacher-body > :not(:last-child) {
margin-bottom: 16px;
}
.teacher-img {
padding: 32px 0 36px 0;
}
@media screen and (max-width: 1180px) {
.teacher-img {
padding: 16px 0;
}
}
.teacher-card {
height: fit-content;
width: 100%;
border-radius: 16px;
display: flex;
align-items: center;
flex-direction: column;
padding: 24px;
color: white;
display: flex;
flex-direction: column;
background-color: #64d563;
}
@media screen and (max-width: 780px) {
.teacher-card {
padding: 16px;
width: 100%;
max-width: 100%;
}
}
.teacher-card > :not(:last-child) {
margin-bottom: 8px;
}
@media screen and (max-width: 780px) {
.teacher-card > :not(:last-child) {
margin-bottom: 0px;
}
}
.teacher-card-icon {
width: 80px;
height: 80px;
}
@media screen and (max-width: 780px) {
.teacher-card-icon {
width: 48px;
height: 48px;
}
}
.teacher-card-title {
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
@media screen and (max-width: 1180px) {
.teacher-card-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.teacher-card-desc {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
@media screen and (max-width: 1180px) {
.teacher-card-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.online-class-title {
color: #ff9914;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px;
}
@media screen and (max-width: 1180px) {
.online-class-title {
margin-top: 36px;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 40px;
padding: 0 16px;
}
}
.online-class-title-line {
position: absolute;
bottom: -10px;
left: 0;
width: 320px;
}
@media screen and (max-width: 1180px) {
.online-class-title-line {
position: absolute;
top: 32px;
left: 0;
width: 190px;
}
}
@media screen and (min-width: 1180px) {
.online-class-break {
display: none;
}
}
.online-class-body {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 780px) {
.online-class-body {
display: block;
}
}
@media screen and (max-width: 780px) {
.online-class-body > :not(:last-child) {
margin-bottom: 24px;
}
}
.online-class-body-right {
margin-top: 90px;
}
@media screen and (max-width: 1180px) {
.online-class-body-right {
margin-top: 48px;
padding: 0 16px 0 32px;
}
}
@media screen and (max-width: 1180px) {
.online-class-body-left {
padding: 0 32px 0 16px;
}
}
.online-class-img {
padding: 32px 0 36px 0;
object-fit: cover;
width: 100%;
}
@media screen and (max-width: 1180px) {
.online-class-img {
padding: 16px 0;
height: 183px;
}
}
.online-class-card {
width: 100%;
max-width: 278px;
}
@media screen and (max-width: 780px) {
.online-class-card {
padding: 0 8px;
width: 100%;
max-width: 100%;
}
}
.online-class-card.first {
color: #ff9914;
}
.online-class-card.second {
color: #4ab749;
}
.online-class-card.third {
color: #8e59ff;
}
.online-class-card-number {
font-size: 80px;
line-height: 80px;
font-weight: 900;
}
@media screen and (max-width: 780px) {
.online-class-card-number {
font-size: 48px;
line-height: 48px;
}
}
.online-class-card-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
padding: 24px 0 8px 0;
}
@media screen and (max-width: 1180px) {
.online-class-card-title {
padding-top: 16px;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.online-class-card-desc {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
color: #57595c;
}
@media screen and (max-width: 1180px) {
.online-class-card-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.program {
padding: 60px 0 0 0;
background-image: url(/img/theme-chipchip/c6-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: contain;
overflow: hidden;
}
@media screen and (max-width: 780px) {
.program {
padding: 40px 0 83px 0;
background-size: contain;
background-position: bottom;
}
}
.program-title {
color: #ff9914;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 780px) {
.program-title {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.program-title-line {
position: absolute;
bottom: -10px;
left: 0;
width: 320px;
}
@media screen and (max-width: 1180px) {
.program-title-line {
position: absolute;
top: 32px;
left: 0;
width: 190px;
}
}
@media screen and (min-width: 1180px) {
.program-break {
display: none;
}
}
.program-body {
display: grid;
grid-template-columns: auto auto auto;
gap: 16px;
}
@media screen and (max-width: 780px) {
.program-body {
display: block;
gap: 16px;
}
}
.program-body > :not(:last-child) {
margin-bottom: 16px;
}
.program-img {
padding: 40px 0 200px 0;
max-width: 1080px;
width: 100%;
}
@media screen and (max-width: 780px) {
.program-img {
padding: 16px 0;
display: none;
}
}
.program-img-mobile {
padding: 0 16px 0 16px;
width: 100%;
}
@media screen and (min-width: 780px) {
.program-img-mobile {
display: none;
}
}
.program-level {
display: grid;
grid-template-columns: auto auto auto;
gap: 12px;
padding: 0 16px;
}
.program-level-item {
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
padding: 12px 16px;
color: #57595c;
background-color: transparent;
border-color: transparent;
}
.program-level-item a {
text-decoration: none;
color: #57595c;
}
.program-level-item.active {
font-weight: 700;
border-radius: 8px;
background-color: rgba(185, 228, 181, 0.3);
}
.program-level-item.active a {
color: #4ab749;
}
.uk-switcher-container {
display: flex;
flex-direction: column-reverse; /* Reverse the order visually */
}
@media screen and (min-width: 780px) {
.uk-switcher-container {
display: none;
}
}
.uk-switcher-container > ul {
margin-bottom: 16px; /* Add spacing if needed */
}
.uk-subnav-pill > .uk-active > a {
font-weight: 700;
border-radius: 8px;
color: #4ab749;
background-color: rgba(185, 228, 181, 0.3);
}
.uk-subnav > * {
padding: 0;
color: #57595c;
background-color: transparent;
border-color: transparent;
}
.uk-subnav > li > a {
display: block !important;
text-align: center !important;
text-transform: capitalize !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 500 !important;
line-height: 24px !important;
padding: 12px 0 !important;
}
.uk-subnav {
display: grid;
grid-template-columns: auto auto auto;
gap: 12px;
padding: 0 16px 0 32px;
}
@media screen and (min-width: 780px) {
.uk-subnav {
display: none;
}
}
.commit {
width: 100%;
}
@media (min-width: 1023px) {
.commit {
display: flex;
justify-content: center;
align-items: center;
}
}
.commit-wrapper {
padding: 24px 0 0 0;
background-image: url(/img/theme-chipchip/c7-bg.svg);
width: 100%;
background-size: cover;
width: 100%;
}
@media screen and (min-width: 694px) {
.commit-wrapper {
padding: 24px 0 0 0;
background-image: url(/img/theme-chipchip/c7-bg.svg);
width: 100%;
background-size: cover;
}
}
.commit-image {
width: 100%;
max-height: 764px;
height: fit-content;
object-fit: contain;
}
@media (min-width: 768px) {
.commit-image {
max-width: 562px;
margin-right: 30px;
width: 100%;
height:fit-content;
}
}
.commit-desc {
font-size: 28px;
font-weight: 500;
line-height: 40.6px;
text-align: center;
color: rgba(0, 0, 0, 0.8);
margin-top: 11px;
margin-bottom: 12px;
}
@media (max-width: 767px) {
.commit-desc {
font-size: 16px;
font-weight: 400;
line-height: 23.2px;
text-align: center;
margin-top: 4px;
}
}
.commit-title {
font-size: 48px;
font-weight: 700;
line-height: 64.8px;
text-align: center;
color: #000000;
}
@media screen and (max-width: 768px) {
.commit-title {
margin-top: 12px;
font-size: 22px;
font-weight: 700;
line-height: 29.7px;
text-align: center;
}
}
.commit-content > :not(:last-child) {
margin-bottom: 40px;
}
.commit-content-item {
padding: 6px 32px;
display: block;
}
@media (max-width: 767px) {
.commit-content-item {
padding: 9px 12px;
}
}
.commit-content-icon {
width: 48px;
height: 48px;
}
@media (max-width: 767px) {
.commit-content-icon {
width: 32px;
height: 32px;
}
}
.commit-content-desc {
color: #f57032;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 160% */
margin-top: 16px;
margin-top: 16px;
}
@media (max-width: 767px) {
.commit-content-desc {
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
}
}
.commit-bottom {
color: white;
background-image: url(/img/theme-chipchip/c7-bg-bottom-mobile.svg);
width: 100%;
background-size: cover;
background-position: top;
padding: 132px 0 280px 0;
}
@media screen and (min-width: 780px) {
.commit-bottom {
background-image: url(/img/theme-chipchip/c7-bg-bottom.svg);
width: 100%;
background-size: cover;
padding: 110px 0 178px 0;
}
}
.commit-bottom-title {
text-align: center;
font-size: 64px;
font-style: normal;
font-weight: 800;
line-height: 64px; /* 100% */
}
@media screen and (max-width: 780px) {
.commit-bottom-title {
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
}
.commit-bottom-desc {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
padding-top: 20px;
}
@media screen and (max-width: 780px) {
.commit-bottom-desc {
padding-top: 12px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.celebrity {
position: relative;
}
@media screen and (max-width: 768px) {
.celebrity {
margin: 24px 0;
}
}
.celebrity-content {
margin: 40px 0 24px 0;
}
@media screen and (max-width: 768px) {
.celebrity-content {
margin: 40px 16px 24px 0;
}
}
.celebrity-content-arrows {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
}
.celebrity-content-arrows > :not(:last-child) {
margin-right: 15px;
}
.celebrity-container {
padding: 100px 0;
}
@media screen and (max-width: 768px) {
.celebrity-container {
padding: 0 0 0 16px !important;
}
}
.celebrity-title {
max-width: 1018px;
width: 100%;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.celebrity-title {
margin-bottom: 24px;
}
}
.celebrity-card {
border-radius: 20px;
background: linear-gradient(86deg, #ffef88 0.39%, #94d35b 25.7%, #47be3a 99.66%);
display: flex;
align-items: center;
}
@media screen and (max-width: 1080px) {
.celebrity-card {
flex-direction: column-reverse;
}
}
.celebrity-card-img {
flex: 1 1 0%;
object-fit: contain;
}
.celebrity-card-content {
flex: 1 1 0%;
padding: 24px 48px;
}
.celebrity-card-desc {
color: #fff;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
@media screen and (max-width: 768px) {
.celebrity-card-desc {
color: #fff;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
}
.celebrity-card-desc-sub {
color: #fff;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
@media screen and (max-width: 768px) {
.celebrity-card-desc-sub {
color: #fff;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.celebrity-dots {
position: absolute;
bottom: 0;
right: 0;
}
.register {
z-index: 1;
border-radius: 8px;
display: flex;
align-items: center;
width: 100%;
}
@media (max-width: 1023px) {
.register {
flex-direction: column-reverse;
}
}
.register-wrapper {
z-index: 9;
padding: 80px 0 0 0;
background: linear-gradient(180deg, #54c033 0%, #72e350 100%);
}
@media screen and (max-width: 768px) {
.register-wrapper {
padding: 24px 0 0 0;
}
}
.register-modal {
background: linear-gradient(180deg, #54c033 0%, #72e350 100%);
max-width: 736px;
width: 100%;
border-radius: 24px;
}
.register-background {
position: absolute;
top: 0;
left: 0%;
opacity: 0.1;
height: 100%;
width: 100%;
overflow: hidden;
object-fit: cover;
z-index: -1;
background: #0aa807;
}
.register-content {
max-width: 540px;
width: 100%;
flex: 1 1 0%;
flex: none;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 768px) and (max-width: 1023px) {
.register-content {
width: 100%;
padding: 48px;
}
}
@media (max-width: 767px) {
.register-content {
width: 100%;
padding: 20px;
}
}
.register-content.exeption {
margin-bottom: 80px;
}
.register-title {
color: #fff;
text-align: center;
font-size: 36px;
font-style: normal;
font-weight: 700;
display: flex;
justify-content: space-between;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.register-title {
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 166.667% */
}
}
.register-title.modal {
margin-bottom: 24px;
}
.register-title-line {
position: absolute;
bottom: 0px;
right: 50px;
width: 133px;
}
@media screen and (max-width: 1180px) {
.register-title-line {
position: absolute;
bottom: 0;
left: 62%;
width: 105px;
}
}
.register-title-line-modal {
position: absolute;
bottom: 0px;
right: 0;
width: 133px;
}
@media screen and (max-width: 1180px) {
.register-title-line-modal {
position: absolute;
bottom: 0;
left: 43%;
width: 105px;
}
}
.register-img {
flex: 1 1 0%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
flex: none;
width: 50%;
}
@media (max-width: 1023px) {
.register-img {
width: 100%;
border-bottom-left-radius: none;
border-top-right-radius: 8px;
max-height: 400px;
object-fit: cover;
}
}
@media (min-width: 1023px) {
.register-img.modal {
margin-left: -30px;
margin-bottom: -30px;
}
}
@media (max-width: 1023px) {
.register-img.modal {
display: none;
}
}
.register-form {
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.register-form {
margin-top: 24px;
margin-bottom: 8px;
}
}
.register-form > :not(:last-child) {
margin-bottom: 14px;
}
.register-form > :last-child {
margin-top: 25px !important;
}
.register-form-select {
display: flex;
width: 100%;
align-items: center;
padding: 0 24px;
height: 60px;
justify-content: space-between;
background-color: transparent;
border: 1px solid rgb(235, 236, 240);
color: rgba(0, 0, 0, 0.6);
}
.register-form-label {
font-size: 14px;
font-weight: 500;
line-height: 22px;
margin-bottom: 6px;
color: #13161a;
color: white;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.register-form-input {
padding: 0 24px;
height: 60px;
border-radius: 9999px;
border: 1px solid rgb(235, 236, 240);
}
.register-form-input ::placeholder {
color: rgba(0, 0, 0, 0.6);
}
.program-hero {
background-image: url(/img/theme-chipchip/program/1-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
overflow: hidden;
margin-top: -80px;
}
@media screen and (max-width: 768px) {
.program-hero {
background-image: url(/img/theme-chipchip/program/1-bg-mobile.svg);
background-size: cover;
background-position: bottom;
padding-top: 80px;
}
}
.program-hero-container {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.program-hero-container {
flex-direction: column;
}
}
.program-hero-content {
flex: 1 1 0%;
max-width: 500px;
width: 100%;
}
@media screen and (min-width: 1180px) {
.program-hero-content {
padding: 40px 0;
}
}
.program-hero-content-title {
color: #ff9914;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 64px;
}
@media screen and (max-width: 768px) {
.program-hero-content-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px;
}
}
.program-hero-content-desc {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
margin-top: 12px;
}
@media screen and (max-width: 768px) {
.program-hero-content-desc {
margin-top: 12px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.program-hero-content-btn {
margin-top: 42px;
}
@media screen and (max-width: 1180px) {
.program-hero-content-btn {
margin: 20px 0;
display: flex;
justify-content: center;
}
}
.program-hero-image {
flex: 1 1 0%;
aspect-ratio: 1/1;
margin-top: 12px;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.program-hero-image {
margin-left: -60px;
margin-top: 80px;
margin-bottom: 0;
}
}
.level-container {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.level-container {
flex-direction: column;
}
}
.level-stair {
display: flex;
gap: 12px;
align-items: end;
overflow-x: auto;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.level-stair::-webkit-scrollbar {
display: none;
}
.level-stair-item {
min-width: 91px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
background-color: #e8f3e2;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
color: #57595c;
width: 100%;
}
.level-stair-item.active {
color: #fff;
background-color: #4ab749;
}
.level-bottom {
background-color: #fff;
border-radius: 20px;
}
.level-bottom-header {
display: flex;
padding: 16px 32px;
align-items: center;
border-bottom: 1px solid #e5e5e5;
background-color: #f4f4f4;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
@media screen and (max-width: 768px) {
.level-bottom-header {
padding: 16px 24px;
}
}
.level-bottom-title {
color: #272b30;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 166.667% */
padding: 16px 32px;
display: flex;
align-items: center;
border-bottom: 1px dashed #e4e4e4;
}
@media screen and (max-width: 768px) {
.level-bottom-title {
padding: 16px 24px;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 160% */
display: block;
}
}
.level-bottom-title-tag {
color: #fff;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
border-radius: 20px;
background: #ff9914;
margin-right: 16px;
width: fit-content;
padding: 8px 16px;
}
@media screen and (max-width: 768px) {
.level-bottom-title-tag {
margin-right: 0x;
margin-bottom: 8x;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.level-bottom-title-tag > :not(:last-child) {
margin-top: 8px;
}
}
.level-bottom-content {
padding: 32px;
display: flex;
gap: 24px;
}
@media screen and (max-width: 1080px) {
.level-bottom-content {
padding: 24px;
display: block;
}
}
.level-bottom-content-left {
max-width: 440px;
width: 100%;
}
.level-bottom-content-left-tag {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
display: flex;
align-items: center;
}
.level-bottom-content-left-tag > :not(:last-child) {
margin-right: 48px;
}
@media screen and (max-width: 768px) {
.level-bottom-content-left-tag {
display: block;
}
.level-bottom-content-left-tag > :not(:last-child) {
margin-right: 0px;
margin-bottom: 8px;
}
}
.level-bottom-content-left-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
padding: 16px 0 24px 0;
}
.level-bottom-content-left-title {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.level-bottom-content-right {
flex: 1 1 0%;
}
@media screen and (max-width: 1080px) {
.level-bottom-content-right {
margin-top: 24px;
}
}
.level-bottom-content-right > img {
object-fit: contain;
width: 100%;
height: 100%;
object-position: top;
}
.active-level-name {
color: #000;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 120% */
}
@media screen and (min-width: 768px) {
.level-navigation {
display: none;
}
}
.next-level,
.prev-level {
background-color: transparent;
border: none;
}
@media screen and (max-width: 768px) {
.hero-content-desc-wrapper {
position: relative;
overflow: hidden;
max-height: 200px; /* Initial height of the content */
transition: max-height 0.3s ease-in-out;
}
}
@media screen and (max-width: 768px) {
.hero-content-desc-wrapper.expanded {
max-height: max-content; /* Enough height to show all content */
}
}
#toggle-button img {
transition: transform 0.3s ease;
}
#toggle-button img.rotated {
transform: rotate(180deg);
}
.button-see {
display: block; /* Ensure the button is a block-level element */
margin-top: 10px; /* Adjust spacing */
position: absolute;
bottom: 0;
right: 0;
height: 64px;
width: 100%;
background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.98) 55%, rgba(255, 255, 255, 0.8) 82.5%, rgba(255, 255, 255, 0) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.button-see.less {
margin-top: 0px;
position: relative;
}
.button-see > button {
display: flex;
align-items: center;
color: #4ab749;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
background-color: transparent;
border: none;
}
@media screen and (min-width: 768px) {
.button-see {
display: none;
}
}
.activity {
position: relative;
background-image: url(/img/theme-chipchip/program/3-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom;
overflow: hidden;
padding: 65px 0 370px 0;
margin-bottom: -76px;
}
@media screen and (max-width: 780px) {
.activity {
padding: 40px 0 285px 0;
margin-bottom: -40px;
background-image: url(/img/theme-chipchip/program/3-bg-mobile.svg);
background-size: cover;
background-position: bottom;
}
}
.activity-container {
display: flex;
gap: 54px;
}
@media screen and (max-width: 768px) {
.activity-container {
flex-direction: column-reverse;
margin: 16px 0 0 0;
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.activity-container.top {
flex-direction: column;
}
}
.activity-title {
color: #339316;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.activity-title {
color: #339316;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.activity-desc {
margin-top: 24px;
margin-bottom: 76px;
color: #57595c;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
@media screen and (max-width: 1180px) {
.activity-desc {
margin-bottom: 49px;
color: #57595c;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 177.778% */
padding: 0 16px;
}
}
.activity-img {
height: 100%;
object-fit: contain;
max-width: 540px;
}
@media screen and (max-width: 768px) {
.activity-img {
width: 100%;
}
}
.activity-img2 {
height: 100%;
object-fit: contain;
max-width: 540px;
}
@media screen and (max-width: 768px) {
.activity-img2 {
width: 100%;
}
}
.activity-content {
background-color: white;
padding: 32px;
border-radius: 12px;
}
.activity-content > :not(:last-child) {
margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
.activity-content {
padding: 16px;
}
}
@media screen and (min-width: 1180px) {
.activity-break {
display: none;
}
}
@media screen and (max-width: 1180px) {
.activity-break-desktop {
display: none;
}
}
.activity-card {
display: flex;
}
.activity-card-desc {
color: #9fa59e;
font-size: 24px;
display: flex;
font-weight: 500;
line-height: 34.8px;
padding: 16px 16px 16px 0;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.activity-card-desc {
font-size: 16px;
font-weight: 500;
line-height: 23.2px;
padding: 16px 16px 16px 0;
}
}
.activity-card-desc.active {
color: #4ab749;
background-color: #fbfbfb;
cursor: default;
border-radius: 8px;
}
.activity-card-desc.active::before {
background-color: #4ab749;
}
.activity-card-desc::before {
content: "";
width: 6px;
flex: none;
margin-right: 24px;
height: 100%;
background-color: #9fa59e;
border-radius: 24px;
display: block;
}
.capacity-evaluation {
position: relative;
width: 100%;
background-color: #fcfcfd;
}
@media screen and (max-width: 780px) {
.capacity-evaluation {
background-size: cover;
background-position: bottom;
}
}
.capacity-evaluation-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media screen and (max-width: 768px) {
.capacity-evaluation-container {
display: flex;
flex-direction: column;
}
.capacity-evaluation-container > :not(:last-child) {
margin: 24px 16px 0;
}
}
.capacity-evaluation-title {
color: #339316;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 768px) {
.capacity-evaluation-title {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.capacity-evaluation-desc {
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
margin-top: 24px;
}
@media screen and (max-width: 768px) {
.capacity-evaluation-desc {
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 177.778% */
}
}
.capacity-evaluation-img {
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.capacity-evaluation-img {
width: 100%;
}
}
.capacity-evaluation-content {
padding: 16px;
max-width: 520px;
width: 100%;
}
.capacity-evaluation-content > :not(:last-child) {
margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
.capacity-evaluation-content {
margin-right: 0;
}
}
.gif {
position: relative;
background-image: url(/img/theme-chipchip/program/5-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
overflow: hidden;
padding: 56px 0;
}
.gif.about-us {
background-image: url(/img/theme-chipchip/about-us/6-bg.svg);
}
@media screen and (max-width: 780px) {
.gif.about-us {
background-image: url(/img/theme-chipchip/about-us/6-bg-mobile.svg);
}
}
@media screen and (max-width: 780px) {
.gif {
padding: 40px 0;
background-image: url(/img/theme-chipchip/program/5-bg-mobile.svg);
background-size: cover;
}
}
.gif-title {
color: #ff9914;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.gif-title {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.gif-desc {
color: #57595c;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
}
@media screen and (max-width: 1180px) {
.gif-desc {
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 200% */
}
}
.proud {
position: relative;
background-image: url(/img/theme-chipchip/teacher/2-bg.png);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom;
overflow: hidden;
padding: 80px 0 120px 0;
}
@media screen and (max-width: 780px) {
.proud {
padding: 40px 0 88px 0;
background-image: url(/img/theme-chipchip/teacher/2-bg-mobile.png);
background-size: cover;
background-position: bottom;
}
}
.proud-container {
display: flex;
align-items: end;
gap: 54px;
}
@media screen and (max-width: 768px) {
.proud-container {
flex-direction: column-reverse;
margin: 16px 0 0 0;
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.proud-container.top {
flex-direction: column;
}
}
.proud-title {
color: #339316;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.proud-title {
color: #339316;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.proud-desc {
margin-top: 24px;
margin-bottom: 76px;
color: #57595c;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
@media screen and (max-width: 1180px) {
.proud-desc {
margin-bottom: 49px;
color: #57595c;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 177.778% */
padding: 0 16px;
}
}
.proud-body {
display: grid;
grid-template-columns: auto auto auto;
gap: 16px;
}
@media screen and (max-width: 780px) {
.proud-body {
display: block;
gap: 16px;
}
}
@media screen and (max-width: 780px) {
.proud-body > :not(:last-child) {
margin-bottom: 16px;
}
}
.proud-card {
height: fit-content;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding: 24px;
color: white;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 780px) {
.proud-card {
padding: 16px;
width: 100%;
max-width: 100%;
}
}
.proud-card > :not(:last-child) {
margin-bottom: 8px;
}
@media screen and (max-width: 780px) {
.proud-card > :not(:last-child) {
margin-bottom: 0px;
}
}
.proud-card-icon {
width: 80px;
height: 80px;
}
@media screen and (max-width: 780px) {
.proud-card-icon {
width: 48px;
height: 48px;
}
}
.proud-card-title {
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
color: #4ab749;
}
@media screen and (max-width: 1180px) {
.proud-card-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.proud-card-desc {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
color: #272b30;
}
@media screen and (max-width: 1180px) {
.proud-card-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.proud-teacher-card {
display: flex;
align-items: center;
flex-direction: column;
border-radius: 12px;
background-color: white;
}
.proud-teacher-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.proud-teacher-card-content {
width: 100%;
}
.proud-teacher-card-name {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.proud-teacher-card-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.proud-teacher-card-role {
margin-top: 8px;
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
min-height: 48px;
}
.proud-teacher-card-width > * {
width: 21.7391304348%;
}
@media screen and (max-width: 768px) {
.proud-teacher-card-width > * {
width: 76.9230769231%;
}
}
.teacher-padding {
padding-top: 90px;
}
@media screen and (max-width: 768px) {
.teacher-padding {
padding-top: 70px;
}
}
.about-proud {
position: relative;
width: 100%;
overflow: hidden;
padding: 80px 0 0 0;
}
@media screen and (max-width: 780px) {
.about-proud {
padding: 40px 0 0 0;
}
}
.about-proud-container {
display: flex;
align-items: end;
gap: 54px;
}
@media screen and (max-width: 768px) {
.about-proud-container {
flex-direction: column-reverse;
margin: 16px 0 0 0;
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.about-proud-container.top {
flex-direction: column;
}
}
.about-proud-body {
display: grid;
grid-template-columns: auto auto auto;
gap: 16px;
}
@media screen and (max-width: 780px) {
.about-proud-body {
display: block;
gap: 16px;
}
}
@media screen and (max-width: 780px) {
.about-proud-body > :not(:last-child) {
margin-bottom: 16px;
}
}
.about-proud-card {
height: fit-content;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding: 24px;
color: white;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 780px) {
.about-proud-card {
padding: 16px;
width: 100%;
max-width: 100%;
}
}
.about-proud-card > :not(:last-child) {
margin-bottom: 8px;
}
@media screen and (max-width: 780px) {
.about-proud-card > :not(:last-child) {
margin-bottom: 0px;
}
}
.about-proud-card-icon {
width: 80px;
height: 80px;
}
@media screen and (max-width: 780px) {
.about-proud-card-icon {
width: 48px;
height: 48px;
}
}
.about-proud-card-title {
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
color: #4ab749;
}
@media screen and (max-width: 1180px) {
.about-proud-card-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.about-proud-card-desc {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
color: #272b30;
}
@media screen and (max-width: 1180px) {
.about-proud-card-desc {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.about-proud-teacher-card {
display: flex;
align-items: center;
flex-direction: column;
border-radius: 12px;
background-color: white;
}
.about-proud-teacher-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.about-proud-teacher-card-content {
width: 100%;
}
.about-proud-teacher-card-name {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.about-proud-teacher-card-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.about-proud-teacher-card-role {
margin-top: 8px;
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
min-height: 48px;
}
.about-proud-teacher-card-width > * {
width: 21.7391304348%;
}
@media screen and (max-width: 768px) {
.about-proud-teacher-card-width > * {
width: 76.9230769231%;
}
}
.about-proof {
position: relative;
background-image: url(/img/theme-chipchip/about-us/2-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom;
overflow: hidden;
padding: 85px 0 120px 0;
}
@media screen and (max-width: 780px) {
.about-proof {
padding: 68px 0 88px 0;
background-image: url(/img/theme-chipchip/about-us/2-bg-mobile.svg);
background-size: cover;
background-position: bottom;
}
}
.about-proof-container {
display: flex;
align-items: end;
gap: 54px;
}
@media screen and (max-width: 768px) {
.about-proof-container {
flex-direction: column-reverse;
margin: 16px 0 0 0;
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.about-proof-container.top {
flex-direction: column;
}
}
.about-proof-body {
display: grid;
grid-template-columns: auto auto;
gap: 24px;
}
@media screen and (max-width: 780px) {
.about-proof-body {
grid-template-columns: auto;
}
}
.about-proof-card {
display: flex;
padding: 48px 32px;
flex-direction: column;
gap: 20px;
flex: 1 0 0;
border-radius: 20px;
background: #fff;
}
.about-proof-card-title {
color: #339316;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 1180px) {
.about-proof-card-title {
color: #339316;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.about-proof-card-desc {
color: #57595c;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 160% */
}
@media screen and (max-width: 1180px) {
.about-proof-card-desc {
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.about-proof-teacher-card {
display: flex;
align-items: center;
flex-direction: column;
border-radius: 12px;
background-color: white;
}
.about-proof-teacher-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.about-proof-teacher-card-content {
width: 100%;
}
.about-proof-teacher-card-name {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.about-proof-teacher-card-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.about-proof-teacher-card-role {
padding-top: 8px;
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
min-height: 48px;
}
.about-proof-teacher-card-width > * {
width: 21.7391304348%;
}
@media screen and (max-width: 768px) {
.about-proof-teacher-card-width > * {
width: 76.9230769231%;
}
}
.story {
position: relative;
background-image: url(/img/theme-chipchip/about-us/4-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom;
overflow: hidden;
padding: 183px 0 163px 0;
margin-top: -120px;
}
@media screen and (max-width: 780px) {
.story {
padding: 120px 0 184px 0;
background-image: url(/img/theme-chipchip/about-us/4-bg-mobile.svg);
background-size: cover;
background-position: bottom;
margin-top: -40px;
margin-bottom: -40px;
}
}
.story-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media screen and (max-width: 768px) {
.story-container {
display: flex;
flex-direction: column;
}
}
.story-title {
color: #339316;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 768px) {
.story-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.story-desc {
color: #57595c;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
margin-top: 24px;
}
@media screen and (max-width: 768px) {
.story-desc {
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.story-img {
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.story-img {
width: 100%;
}
}
.value {
background-color: #fcfcfc;
padding: 48px 0 65px 0;
}
@media screen and (max-width: 768px) {
.value {
padding: 32px 0 46px 0;
}
}
.value-title {
color: #339316;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.value-title {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.value-body {
display: grid;
grid-template-columns: auto auto auto;
gap: 24px;
}
@media screen and (max-width: 768px) {
.value-body {
grid-template-columns: auto;
}
}
.value-card {
display: flex;
padding: 32px;
flex-direction: column;
border-radius: 12px;
background: #d5f6d3;
}
.value-card-icon {
width: 48px;
height: 48px;
}
.value-card-title {
color: #272b30;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 145.455% */
padding: 16px 0 12px 0;
}
@media screen and (max-width: 768px) {
.value-card-title {
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 160% */
}
}
.value-card-desc {
color: #272b30;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
}
.value-card-number {
width: 100%;
display: flex;
justify-content: end;
}
.value-card-number > img {
margin-bottom: -6px;
width: 67px;
height: 41px;
margin-right: 41px;
}
.recommend-body {
background-image: url(/img/theme-chipchip/recommned/bg.webp);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 24px 0;
}
@media screen and (max-width: 780px) {
.recommend-body {
background-image: url(/img/theme-chipchip/recommned/bg-mobile.png);
padding: 16px 0;
}
}
.recommend-container {
max-width: 1392px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
gap: 24px;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 780px) {
.recommend-container {
padding-left: 16px;
padding-right: 16px;
gap: 16px;
}
}
.recommend-card {
backdrop-filter: blur(30px);
display: flex;
padding: 48px 64px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 16px;
}
@media screen and (max-width: 780px) {
.recommend-card {
padding: 32px 24px;
}
}
.recommend .first {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media screen and (max-width: 960px) {
.recommend .first {
grid-template-columns: auto;
gap: 16px;
}
}
.recommend .first-card {
background-image: url(/img/theme-chipchip/recommned/1-bg.png);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
overflow: hidden;
}
.recommend .first-logo {
width: 175px;
}
@media screen and (max-width: 960px) {
.recommend .first-logo {
width: 114px;
}
}
.recommend .first-title {
color: #ff9914;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 133.333% */
padding: 32px 0 12px 0;
}
@media screen and (max-width: 960px) {
.recommend .first-title {
padding: 24px 0 12px 0;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.recommend .first-desc {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
padding-bottom: 32px;
}
@media screen and (max-width: 960px) {
.recommend .first-desc {
padding-bottom: 24px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.recommend .first-image {
width: 100%;
height: 100%;
border-radius: 16px;
object-fit: cover;
}
.recommend .second {
padding: 64px 0;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(30px);
border-radius: 12px;
}
@media screen and (max-width: 960px) {
.recommend .second {
padding: 32px 0;
}
}
.recommend .second-title {
color: #ff9914;
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
@media screen and (max-width: 960px) {
.recommend .second-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.recommend .second-desc {
color: #ff9914;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 48px; /* 150% */
padding: 8px 0 48px 0;
}
@media screen and (max-width: 960px) {
.recommend .second-desc {
padding: 8px 0 24px 0;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.recommend .second-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
@media screen and (max-width: 960px) {
.recommend .second-content {
grid-template-columns: 1fr;
}
}
.recommend .second-card {
padding: 0 48px;
}
@media screen and (max-width: 960px) {
.recommend .second-card {
padding: 0 40px;
}
}
.recommend .second-card.dashed {
border-left: 1.5px dashed #9fa59e;
border-right: 1.5px dashed #9fa59e;
}
@media screen and (max-width: 960px) {
.recommend .second-card.dashed {
border: none;
}
}
.recommend .second-card-icon {
width: 64px;
height: 64px;
}
@media screen and (max-width: 960px) {
.recommend .second-card-icon {
width: 48px;
height: 48px;
}
}
.recommend .second-card-title {
padding-top: 16px;
color: #4ab749;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
}
@media screen and (max-width: 960px) {
.recommend .second-card-title {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 160% */
}
}
.recommend .second-card-desc {
color: #272b30;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
@media screen and (max-width: 960px) {
.recommend .second-card-desc {
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
.recommend .third {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media screen and (max-width: 960px) {
.recommend .third {
grid-template-columns: auto;
gap: 16px;
}
}
.recommend .third-card {
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.75);
}
.recommend .third-title {
color: #4ab749;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
@media screen and (max-width: 960px) {
.recommend .third-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.recommend .third-desc {
padding-top: 32px;
color: #272b30;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 150% */
}
@media screen and (max-width: 960px) {
.recommend .third-desc {
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.recommend .third-image {
width: 100%;
height: 100%;
border-radius: 16px;
object-fit: cover;
}
.recommend .fourth {
padding: 64px 156px;
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.75);
border-radius: 12px;
}
@media screen and (max-width: 960px) {
.recommend .fourth {
padding: 24px;
}
}
.recommend .fourth-title {
color: #ff9914;
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
@media screen and (max-width: 960px) {
.recommend .fourth-title {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.recommend .fourth-link {
display: flex;
align-items: center;
gap: 24px;
padding: 48px 0;
border-bottom: 1.5px dashed #9fa59e;
}
@media screen and (max-width: 960px) {
.recommend .fourth-link {
gap: 16px;
flex-direction: column;
padding: 24px 0;
}
}
.recommend .fourth-link-input {
flex: 1 1 0%;
display: flex;
padding: 24px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
border-radius: 50px;
border: 2px solid #e2e2e2;
background: #fff;
height: 72px;
color: black !important;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 180% */
}
@media screen and (max-width: 960px) {
.recommend .fourth-link-input {
height: 64px;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 177.778% */
}
}
.recommend .fourth-btn {
width: fit-content;
display: flex;
padding: 24px;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 100px;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px;
height: 72px;
}
@media screen and (max-width: 960px) {
.recommend .fourth-btn {
width: 100%;
height: 68px;
}
}
.recommend .fourth-btn.primary {
background: #4ab749;
color: #fff;
border: none;
}
.recommend .fourth-btn.secondary {
color: #57595c;
border: 2px solid #9fa59e;
}
.recommend .fourth-desc {
padding: 48px 0 24px 0;
color: #272b30;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
max-width: 650px;
}
@media screen and (max-width: 960px) {
.recommend .fourth-desc {
padding: 24px 0;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.recommend .fourth-form {
display: flex;
align-items: end;
gap: 24px;
}
@media screen and (max-width: 960px) {
.recommend .fourth-form {
flex-direction: column;
gap: 16px;
}
}
.recommend .fourth-form > div {
width: 100%;
}
.recommend .fourth-form-label {
color: #272b30;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
padding-bottom: 8px;
}
.recommend .fourth-form-input {
flex: 1 1 0%;
display: flex;
padding: 16px 24px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 100px;
border: 1.5px solid #e2e2e2;
background: #fff;
height: 56px;
}
.recommend .fourth-form-btn {
display: flex;
width: 120px;
height: 56px;
padding: 24px;
justify-content: center;
align-items: center;
flex-shrink: 0;
color: #fff;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 160% */
border-radius: 100px;
border: none;
background: #4ab749;
}
@media screen and (max-width: 960px) {
.recommend .fourth-form-btn {
width: 100%;
}
}
.recommend .fourth-icon {
width: 32px;
height: 32px;
margin-right: 16px;
}
@media screen and (max-width: 960px) {
.recommend .fourth-icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
}
.in-recommend-hero {
background-image: url(/img/theme-chipchip/in-recommended/1-bg.png);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom center;
overflow: hidden;
margin-top: -80px;
}
@media screen and (max-width: 768px) {
.in-recommend-hero {
background-image: url(/img/theme-chipchip/in-recommended/1-bg-mobile.png);
background-size: cover;
background-position: bottom center;
padding-top: 80px;
}
}
.in-recommend-hero-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
@media screen and (max-width: 768px) {
.in-recommend-hero-container {
flex-direction: column;
}
}
.in-recommend-hero-content {
flex: 1 1 0%;
max-width: 800px;
width: 100%;
padding: 104px 0 472px 0;
}
@media screen and (max-width: 768px) {
.in-recommend-hero-content {
padding: 24px 0 238px 0;
}
}
.in-recommend-hero-content-title {
color: #4ab749;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
}
@media screen and (max-width: 768px) {
.in-recommend-hero-content-title {
color: #4ab749;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.in-recommend-hero-content-desc {
color: #272b30;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
padding: 24px 0;
}
@media screen and (max-width: 768px) {
.in-recommend-hero-content-desc {
color: #272b30;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
}
.in-recommend-hero-content-btn {
margin-top: 42px;
}
@media screen and (max-width: 1180px) {
.in-recommend-hero-content-btn {
margin: 20px 0;
display: flex;
justify-content: center;
}
}
.in-recommend-hero-image {
flex: 1 1 0%;
aspect-ratio: 1/1;
margin-top: 12px;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.in-recommend-hero-image {
margin-left: -60px;
margin-top: 80px;
margin-bottom: 0;
}
}
.why {
padding: 76px 0 253px 0;
background-image: url(/img/theme-chipchip/in-recommended/2-bg.png);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom center;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.why {
background-image: url(/img/theme-chipchip/in-recommended/2-bg-mobile.png);
background-size: cover;
background-position: bottom center;
padding: 76px 0 150px 0;
}
}
.why-title {
color: #ff9914;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 160% */
padding-bottom: 64px;
}
@media screen and (max-width: 960px) {
.why-title {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.why-desc {
color: #ff9914;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 48px; /* 150% */
padding: 8px 0 48px 0;
}
@media screen and (max-width: 960px) {
.why-desc {
padding: 8px 0 24px 0;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.why-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
@media screen and (max-width: 960px) {
.why-content {
grid-template-columns: 1fr;
}
}
.why-card {
display: flex;
padding: 24px;
flex-direction: column;
align-items: center;
flex: 1 0 0;
align-self: stretch;
border-radius: 16px;
background: #fff;
box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.03), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.02), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.02), 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.01);
}
.why-card-icon {
width: 64px;
height: 64px;
}
@media screen and (max-width: 960px) {
.why-card-icon {
width: 48px;
height: 48px;
}
}
.why-card-title {
padding: 16px 0 8px 0;
color: #4ab749;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
}
@media screen and (max-width: 960px) {
.why-card-title {
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 160% */
}
}
.why-card-desc {
color: #272b30;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
}
@media screen and (max-width: 960px) {
.why-card-desc {
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 200% */
}
}
.commit1-bottom {
color: white;
background-image: url(/img/theme-chipchip/c7-bg-bottom-mobile.svg);
width: 100%;
background-size: cover;
background-position: top;
padding: 132px 0 234px 0;
}
@media screen and (min-width: 780px) {
.commit1-bottom {
background-image: url(/img/theme-chipchip/c7-bg-bottom.svg);
width: 100%;
background-size: cover;
}
}
.commit1-bottom > .container {
display: grid;
grid-template-columns: 1fr;
gap: 51px;
}
@media screen and (min-width: 780px) {
.commit1-bottom > .container {
grid-template-columns: 1fr 1fr;
gap: 0;
}
}
.commit1-bottom-title {
text-align: center;
font-size: 64px;
font-style: normal;
font-weight: 800;
line-height: 64px; /* 100% */
}
@media screen and (max-width: 780px) {
.commit1-bottom-title {
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 100% */
}
}
.commit1-bottom-desc {
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
padding-top: 20px;
}
@media screen and (max-width: 780px) {
.commit1-bottom-desc {
padding-top: 12px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
}
.contact {
position: relative;
width: 100%;
overflow: hidden;
padding: 0;
}
@media screen and (max-width: 780px) {
.contact {
padding: 0 0 8px 0;
}
}
.contact-container {
display: flex;
align-items: end;
gap: 54px;
}
@media screen and (max-width: 768px) {
.contact-container {
flex-direction: column-reverse;
margin: 16px 0 0 0;
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.contact-container.top {
flex-direction: column;
}
}
.contact-body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 780px) {
.contact-body {
display: block;
}
}
@media screen and (max-width: 780px) {
.contact-body > :not(:last-child) {
margin-bottom: 16px;
}
}
.contact-card {
height: fit-content;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding: 24px;
color: white;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 780px) {
.contact-card {
padding: 16px;
width: 100%;
max-width: 100%;
}
}
@media screen and (min-width: 780px) {
.contact-card.second {
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
}
.contact-card-icon {
width: 48px;
height: 48px;
}
.contact-card-title {
color: #57595c;
margin-top: 8px;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 133.333% */
}
.contact-card-desc {
margin-top: 12px;
color: #272b30;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.contact-teacher-card {
display: flex;
align-items: center;
flex-direction: column;
border-radius: 12px;
background-color: white;
}
.contact-teacher-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.contact-teacher-card-content {
width: 100%;
}
.contact-teacher-card-name {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}
.contact-teacher-card-desc {
color: #57595c;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.contact-teacher-card-role {
margin-top: 8px;
color: #57595c;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
min-height: 48px;
}
.contact-teacher-card-width > * {
width: 21.7391304348%;
}
@media screen and (max-width: 768px) {
.contact-teacher-card-width > * {
width: 76.9230769231%;
}
}
.contact-map {
margin-bottom: 46px;
}
@media screen and (max-width: 768px) {
.contact-map {
margin-bottom: 40px;
}
}
.contact-hero {
background-image: url(/img/theme-chipchip/program/1-bg.svg);
background-repeat: no-repeat;
width: 100%;
background-size: 100% auto;
overflow: hidden;
margin-top: -80px;
padding-top: 77px;
}
@media screen and (max-width: 768px) {
.contact-hero {
background-image: url(/img/theme-chipchip/program/1-bg-mobile.svg);
}
}
.contact-hero-container {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.contact-hero-container {
flex-direction: column;
}
}
.contact-hero-content {
flex: 1 1 0%;
max-width: 550px;
width: 100%;
padding: 32px 0 0 0;
}
@media screen and (min-width: 1180px) {
.contact-hero-content {
padding: 40px 0 78px 0;
}
}
.contact-hero-content-title {
color: #339316;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 64px; /* 133.333% */
}
@media screen and (max-width: 768px) {
.contact-hero-content-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 150% */
}
}
.contact-hero-content-desc {
color: #272b30;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 180% */
margin-top: 12px;
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
.contact-hero-content-desc {
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
margin-bottom: 20px;
}
}
.contact-hero-content-btn {
margin-top: 42px;
}
@media screen and (max-width: 1180px) {
.contact-hero-content-btn {
margin: 20px 0;
display: flex;
justify-content: center;
}
}
.contact-hero-image {
flex: 1 1 0%;
aspect-ratio: 1/1;
margin-top: 40px;
margin-bottom: 28px;
transform: scale(1.3);
}
@media screen and (min-width: 768px) {
.contact-hero-image {
margin-left: -60px;
margin-top: 80px;
margin-bottom: 0;
transform: scale(1);
}
}
.contact-form {
padding: 32px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 490px;
width: 100%;
border-radius: 20px;
background: #fff;
box-shadow: 0px 28px 50px 0px rgba(0, 0, 0, 0.03), 0px 11.698px 20.889px 0px rgba(0, 0, 0, 0.02), 0px 6.254px 11.168px 0px rgba(0, 0, 0, 0.02), 0px 3.506px 6.261px 0px rgba(0, 0, 0, 0.01), 0px 1.862px 3.325px 0px rgba(0, 0, 0, 0.01), 0px 0.775px 1.384px 0px rgba(0, 0, 0, 0.01);
}
@media screen and (max-width: 768px) {
.contact-form {
padding: 24px;
}
}
.contact-form.mobile {
display: block;
margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
.contact-form.mobile {
display: none;
}
}
.contact-form.desktop {
display: block;
}
@media screen and (max-width: 768px) {
.contact-form.desktop {
display: none;
}
}
.contact-form-label {
color: #272b30;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
flex: none;
order: 0;
flex-grow: 0;
}
.contact-form-input {
display: flex;
padding: 16px 24px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 100px;
width: 100%;
height: 56px;
margin-top: 8px;
border-radius: 100px;
border: 1.5px solid #e2e2e2;
}
.contact-form-text-area {
padding: 16px 24px;
border-radius: 16px;
border: 1.5px solid #e2e2e2;
min-height: 96px;
margin-top: 8px;
resize: none;
}
@font-face {
font-family: "SF Pro Rounded";
src: url("fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
font-weight: 400; /* Regular */
font-style: normal;
}
@font-face {
font-family: "SF Pro Rounded";
src: url("fonts/SF-Pro-Rounded-Medium.otf") format("opentype");
font-weight: 500; /* Medium */
font-style: normal;
}
@font-face {
font-family: "SF Pro Rounded";
src: url("fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
font-weight: 600; /* Semibold */
font-style: normal;
}
@font-face {
font-family: "SF Pro Rounded";
src: url("fonts/SF-Pro-Rounded-Bold.otf") format("opentype");
font-weight: 700; /* Bold */
font-style: normal;
}
html {
scroll-behavior: smooth;
font-family: "SF Pro Rounded", sans-serif;
}
.header {
z-index: 1000;
}
@media screen and (max-width: 768px) {
.header-logo {
width: 131px;
}
}
.header-item-mobile {
font-size: 16px;
font-weight: 600;
color: #272b30;
text-decoration: none;
text-decoration: inherit;
}
.header-item-mobile:focus {
color: #272b30;
text-decoration: none;
text-decoration: inherit;
}
.no-scroll {
overflow: hidden !important; /* Prevent scrolling */
}
#header > div > nav > div > ul > li > a {
color: #272b30;
text-transform: none;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
.header-new {
background-color: transparent;
transition: background-color 0.3s ease;
}
.header-new.scrolled {
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
svg:not(#other-icon) > path {
fill: currentColor;
}
.uk-modal-close-default svg {
color: white; /* Changes the color of the SVG */
}
p {
margin: 0;
}
ul {
list-style: none;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 768px) {
.container {
padding-left: 16px;
padding-right: 16px;
}
}
.header {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
@media screen and (max-width: 768px) {
.header {
height: 64px;
}
}
.header-logo {
height: 60px;
}
@media screen and (max-width: 768px) {
.header-logo {
height: 48px;
}
}
.header-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 24px;
gap: 4px;
width: fit-content;
height: 48px;
color: white;
background: radial-gradient(100% 100% at 0% 0%, #ffc007 0%, #ff5723 100%);
border-radius: 1000px;
cursor: pointer;
font-size: 20px;
flex: none;
order: 1;
flex-grow: 0;
text-decoration: none;
}
.header-button:hover {
text-decoration: none;
color: #f7f7f7;
}
@media screen and (max-width: 768px) {
.header-button {
font-size: 16px;
}
}
.button-primary {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 52px;
gap: 4px;
width: fit-content;
height: 72px;
color: white;
background: #4ab749;
border-radius: 1000px;
cursor: pointer;
font-size: 20px;
flex: none;
order: 1;
flex-grow: 0;
text-decoration: none;
animation: crescendo 1s alternate infinite ease-in;
}
@media screen and (max-width: 768px) {
.button-primary {
font-size: 16px;
}
}
.button-primary-big {
height: 86px;
padding: 0 61px;
font-size: 23.82px;
font-weight: 700;
line-height: 34.54px;
}
@media screen and (max-width: 768px) {
.button-primary-big {
height: 52px;
font-size: 16px;
font-weight: 700;
line-height: 23.2px;
color: #ffffff;
}
}
.button-primary:hover {
color: #c8f2ff;
text-decoration: none;
}
@media (max-width: 767px) {
.button-primary {
height: 52px;
width: 100%;
}
}
@keyframes crescendo {
/* 0% {transform: scale(.8);} */
100% {
transform: scale(1.03);
}
}
.icon-max-md {
z-index: 10;
}
@media (max-width: 1023px) {
.icon-max-md {
display: none;
}
}
.bg-pattern {
background-image: url(/img/theme-chipchip/bg.png);
background-repeat: repeat-y;
width: 100%;
background-size: contain;
}
.footer__list-link > li > a {
color: #565656;
font-size: 0.875rem;
}
#footer .uk-background-muted {
background-color: #f7f7f7;
}
.footer__title {
color: #171717;
font-size: 0.875rem;
}
.footer__title--fz-24 {
font-size: 15.75px;
}
@media screen and (min-width: 375px) {
.footer__title--fz-24 {
font-size: calc(15.75px + 5.25 * (100vw - 375px) / 825);
}
}
@media screen and (min-width: 1200px) {
.footer__title--fz-24 {
font-size: 21px;
}
}
.is-max-md {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.is-max-md {
display: none;
}
}
@media screen and (max-width: 640px) {
.uk-child-width-1-1-5 > * {
width: 75%;
}
}
/*# sourceMappingURL=app.css.map */