.p-homeHero { position: relative;} .p-homeHero__upper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: var(--spc-15) var(--spc-15); min-height: 50.3rem; position: relative; z-index: 2; @media (max-width: 1150px) { grid-template-columns: 1fr; padding-bottom: var(--spc-40); } @media (max-width: 834px) { gap: var(--spc-6); min-height: auto; padding: var(--spc-6) var(--spc-6) var(--spc-32); }} .p-homeHero__catchTitle { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-3);} .p-homeHero__catchTitle .c-catchLine:nth-child(2) { animation-delay: 0.15s;} .p-homeHero__logo { display: flex; justify-content: center; margin: 0; padding-top: var(--spc-12); img { width: 28rem; height: auto; } @media (max-width: 834px) { padding-top: var(--spc-2); img { width: 20rem; } }} .p-homeHero__nav { display: flex; justify-content: flex-end; @media (max-width: 1150px) { display: none; }} .p-homeHero__navList { display: flex; flex-direction: column; gap: var(--spc-4); padding-top: var(--spc-20);} .p-homeHero__navLink { display: flex; align-items: center; gap: var(--spc-2); font-weight: var(--fw-bold); color: var(--c-black-100); letter-spacing: var(--ls-body); white-space: nowrap; text-decoration: none; &:hover { opacity: 0.8; color: var(--c-black-100); }} @keyframes ribbonDraw { to { stroke-dashoffset: 0; }} .p-homeHero__ribbon { position: absolute; top: var(--spc-24); right: 0; left: 0; z-index: 1; pointer-events: none; margin: 0; overflow: hidden; display: flex; justify-content: center; @media (max-width: 1150px) { top: var(--spc-72); } @media (max-width: 834px) { top: var(--spc-44); } @media (max-width: 480px) { top: var(--spc-80); }} .p-homeHero__ribbon svg { display: block; width: 148rem; max-width: none; flex-shrink: 0; height: auto; @media (max-width: 1150px) { width: 120rem; } @media (max-width: 834px) { width: 88rem; } @media (max-width: 480px) { width: 110%; }} .p-homeHero__ribbon.is-visible path { animation: ribbonDraw 2s cubic-bezier(0.35, 0.46, 0.65, 0.94) forwards;} .p-homeHero__card { border-radius: var(--spc-8); margin: 0 var(--spc-16) var(--spc-16); position: relative; overflow: hidden; z-index: 0; @media (max-width: 1150px) { margin: 0 var(--spc-16); } @media (max-width: 834px) { border-radius: var(--spc-6); margin: 0 var(--spc-6); }} .p-homeHero__cardVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} .p-homeHero__card::after { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.15); z-index: 1;} .p-homeHero__cardInner { position: relative; z-index: 2; padding: var(--spc-36) var(--spc-28); @media (max-width: 834px) { padding: var(--spc-8); }} .p-homeHero__cardTitle { display: flex; flex-direction: column; font-weight: var(--fw-default); color: var(--c-white); margin-bottom: var(--spc-3);} .p-homeHero__cardBody { color: var(--c-white); & + & { margin-top: var(--spc-3); }} .p-homeHero__cardInner .c-btn { margin-top: var(--spc-6);} .p-homeMessage { position: relative;} .p-homeMessage__handLeft { position: absolute; top: 0; left: 0; width: 20rem; pointer-events: none; @media (max-width: 1150px) { display: none; }} .p-homeMessage__handRight { position: absolute; bottom: 0; right: 0; width: 21rem; pointer-events: none; z-index: -1; @media (max-width: 834px) { width: 9.6rem; }} .p-homeMessage__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--spc-20); align-items: center; @media (max-width: 1150px) { grid-template-columns: 1fr; gap: var(--spc-8); }} .p-homeMessage__visual { position: relative; margin: 0; z-index: -1; @media (max-width: 1150px) { grid-row: 2 / 3; max-width: 80rem; margin-left: auto; }} .p-homeMessage__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--spc-6);} .p-homeMessage__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-3); margin-bottom: var(--spc-6);} .p-homeMessage__title .c-catchLine:nth-child(2) { animation-delay: 0.15s;} .p-homeMessage__text { color: var(--c-black-600); & + & { margin-top: var(--spc-3); }} .p-homeSolution { position: relative; overflow: hidden; &::before { content: ''; position: absolute; inset: 0 var(--spc-12) 0 0; border-radius: 0 var(--spc-8) var(--spc-8) 0; background-color: var(--c-sand-200); z-index: -2; @media (max-width: 834px) { inset: 0 var(--spc-8) 0 0; } } & + * { margin-top: var(--spc-24); @media (max-width: 834px) { margin-top: var(--spc-12); } }} .p-homeSolution__ribbon { position: absolute; inset: var(--spc-60) 0 auto 0; margin: 0; pointer-events: none; z-index: -1; overflow: hidden; display: flex; justify-content: center; @media (max-width: 834px) { inset: var(--spc-44) 0 auto 0; } svg { display: block; max-width: 160rem; flex-shrink: 0; height: auto; }} .p-homeSolution__ribbon.is-visible path { animation: ribbonDraw 2s cubic-bezier(0.35, 0.46, 0.65, 0.94) forwards;} .p-homeSolution__intro { display: grid; grid-template-columns: 1fr auto; gap: var(--spc-16); margin-bottom: var(--spc-20); @media (max-width: 834px) { grid-template-columns: 1fr; margin-bottom: var(--spc-6); }} .p-homeSolution__introTitle { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-3); margin-bottom: var(--spc-6);} .p-homeSolution__introTitle .c-catchLine:nth-child(2) { animation-delay: 0.15s;} .p-homeSolution__introBody { color: var(--c-black-600);} .p-homeSolution__introCircle { margin: calc(var(--spc-12) * -1) 0 0 0; width: 24rem; flex-shrink: 0; @media (max-width: 1150px) { width: 20rem; } @media (max-width: 834px) { width: 16rem; } img { width: 100%; height: auto; display: block; animation: spin 30s linear infinite reverse; }} @keyframes spin { to { transform: rotate(360deg); }} .p-homeSolution__sections { display: flex; flex-direction: column; gap: var(--spc-8); @media (max-width: 834px) { gap: var(--spc-6); }} .p-homeSolution__section { display: grid; grid-template-columns: auto 1fr; border-radius: var(--spc-6); background-color: var(--c-white); @media (max-width: 834px) { border-radius: var(--spc-4) 0 0 var(--spc-4); }} .p-homeSolution__sectionSideLabel { writing-mode: vertical-rl; font-weight: var(--fw-default); color: var(--c-sand-300); align-self: start; padding: var(--spc-9) var(--spc-6); @media (max-width: 834px) { padding: var(--spc-6) var(--spc-2); }} .p-homeSolution__sectionContent { padding: var(--spc-8); display: flex; flex-direction: column; gap: var(--spc-6); border-left: solid .1rem var(--c-sand-200); @media (max-width: 834px) { padding: var(--spc-5); }} .p-homeSolution__sectionCard { display: flex; align-items: center; gap: var(--spc-6); opacity: 0; transform: translateY(2.4rem); @media (max-width: 834px) { flex-direction: column; align-items: flex-start; gap: var(--spc-2); }} .p-homeSolution__sectionCard--reverse { flex-direction: row-reverse; @media (max-width: 834px) { flex-direction: column; .p-homeSolution__sectionFigure { margin-left: auto; } }} .p-homeSolution__sectionFigure { width: 12rem; flex-shrink: 0; margin: 0; img { width: 100%; height: auto; display: block; } @media (max-width: 834px) { width: 7rem; }} .p-homeSolution__sectionCardText { flex: 1; display: flex; flex-direction: column; gap: var(--spc-1);} .p-homeSolution__sectionLabel { font-weight: var(--fw-default); letter-spacing: var(--ls-body);} .p-homeSolution__sectionLabel--facility { color: var(--c-coral-200);} .p-homeSolution__sectionLabel--university { text-align: right; color: var(--c-blue-200);} .p-homeSolution__sectionBubble { width: fit-content; color: var(--c-white); padding: var(--spc-4) var(--spc-6); @media (max-width: 834px) { padding: var(--spc-3) var(--spc-4); }} .p-homeSolution__sectionBubble--facility { background-color: var(--c-coral-200); border-radius: var(--spc-1) var(--spc-4) var(--spc-4) var(--spc-4);} .p-homeSolution__sectionBubble--university { background-color: var(--c-blue-200); border-radius: var(--spc-4) var(--spc-1) var(--spc-4) var(--spc-4); margin-left: auto;} @keyframes solutionCardReveal { from { opacity: 0; transform: translateY(2.4rem); } to { opacity: 1; transform: translateY(0); }} .p-homeSolution__sectionContent.is-visible .p-homeSolution__sectionCard:not(.p-homeSolution__sectionCard--reverse) { animation: solutionCardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;} .p-homeSolution__sectionContent.is-visible .p-homeSolution__sectionCard--reverse { animation: solutionCardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;} @keyframes waveLineReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); }} @keyframes statsContentReveal { from { opacity: 0; } to { opacity: 1; }} .p-homeSolution__sectionContent.is-visible .p-homeSolution__statsWrap::before,.p-homeSolution__sectionContent.is-visible .p-homeSolution__statsWrap::after { animation: waveLineReveal 0.7s ease 0.9s forwards;} .p-homeSolution__sectionContent.is-visible .p-homeSolution__statsLabel { animation: statsContentReveal 0.5s ease 1.4s forwards;} .p-homeSolution__sectionContent.is-visible .p-homeSolution__statList { animation: statsContentReveal 0.5s ease 1.5s forwards;} .p-homeSolution__statsWrap { padding-block: var(--spc-6); position: relative; &::before, &::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='7'%3E%3Cpath d='M0 3.5 Q5 0 10 3.5 Q15 7 20 3.5' fill='none' stroke='%23E5E5E5' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 20px 7px; clip-path: inset(0 100% 0 0); } &::before { top: 0; } &::after { bottom: 0; }} .p-homeSolution__statsLabel { text-align: center; color: var(--c-black-100); letter-spacing: var(--ls-body); margin-bottom: var(--spc-4); opacity: 0;} .p-homeSolution__statList { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spc-3); list-style: none; margin: 0; padding: 0; opacity: 0; @media (max-width: 834px) { grid-template-columns: repeat(1, 1fr); gap: var(--spc-2); }} .p-homeSolution__statItem { background-color: var(--c-gray-200); border-radius: var(--spc-2); padding: var(--spc-4) var(--spc-5);} .p-homeSolution__statValue { font-weight: var(--fw-bold); color: var(--c-black-600); margin-bottom: var(--spc-1);} .p-homeSolution__statName { color: var(--c-black-600); margin-bottom: var(--spc-1);} .p-homeSolution__statNote { color: var(--c-black-300);} .p-homeSolution__section--bridge { background-color: var(--c-green-300);} .p-homeSolution__section--bridge .p-homeSolution__sectionSideLabel { color: var(--c-gray-100);} .p-homeSolution__section--bridge .p-homeSolution__sectionContent { border-left-color: var(--c-green-200);} .p-homeSolution__bridgeSubTitle { color: var(--c-gray-100);} .p-homeSolution__cycleInner { display: flex; flex-direction: column; gap: .1rem;} .p-homeSolution__cycleInner-content,.p-homeSolution__cycleInner-bottom { background-color: var(--c-green-200);} .p-homeSolution__cycleInner-content { padding: var(--spc-8); border-radius: var(--spc-4) var(--spc-4) 0 0; @media (max-width: 834px) { padding: var(--spc-5); border-radius: var(--spc-3) var(--spc-3) 0 0; }} .p-homeSolution__cycleInner-bottom { padding-top: var(--spc-8); border-radius: 0 0 var(--spc-4) var(--spc-4); @media (max-width: 834px) { padding: var(--spc-5); }} .p-homeSolution__cycleDiagram { margin: 0 auto var(--spc-4); img { max-width: 72rem; margin-inline: auto; @media (max-width: 834px) { max-width: 24rem; } }} .p-homeSolution__cycleLabel { display: inline-block; background-color: var(--c-gray-100); color: var(--c-green-300); padding: var(--spc-2) var(--spc-6); border-radius: var(--spc-1);} .p-homeSolution__cycleNote { text-align: center; color: var(--c-gray-100);} .p-homeSolution__bridgeFigures { display: flex; justify-content: space-between; align-items: center; gap: var(--spc-4); position: relative; z-index: 1; @media (max-width: 834px) { justify-content: center; }} .p-homeSolution__bridgeDown { width: 6.4rem;} .p-homeSolution__bridgeFigure { flex: 1; @media (max-width: 834px) { display: none; } img { height: 12rem; }} .p-homeSolution__bridgeMessage { background-color: var(--c-sand-400); border-radius: var(--spc-4); margin-top: calc(var(--spc-6) * -1); padding: var(--spc-8) var(--spc-12); text-align: center; @media (max-width: 834px) { margin-top: var(--spc-4); padding: var(--spc-6); border-radius: var(--spc-3); text-align: left; }} .p-homeSolution__bridgeArrow { width: var(--spc-10); height: auto; display: block; margin: 0 auto var(--spc-4);} .p-homeSolution__bridgeMessageText { font-weight: var(--fw-default); color: var(--c-white);} .p-homeFor { --section-side-w: var(--spc-24); display: flex; flex-direction: row-reverse; position: relative; overflow: clip; @media (max-width: 834px) { flex-direction: column; }} .p-homeFor__side { display: flex; flex-direction: row-reverse; gap: var(--spc-1); padding: var(--spc-16) calc(var(--spc-8) + var(--frame-width)) var(--spc-16) var(--spc-8); @media (max-width: 834px) { flex-direction: column; padding: var(--spc-6) var(--spc-8); }} .p-homeFor__sideTitle { writing-mode: vertical-rl; font-weight: var(--fw-default); color: var(--c-white); @media (max-width: 834px) { writing-mode: horizontal-tb; }} .p-homeFor__sideSub { writing-mode: vertical-rl; color: var(--c-white); letter-spacing: var(--ls-body); @media (max-width: 834px) { writing-mode: horizontal-tb; }} .p-homeFor__intro { display: flex; flex-direction: column; gap: var(--spc-6); padding: var(--spc-24) var(--spc-24) var(--spc-16) var(--section-side-w); @media (max-width: 834px) { padding: var(--spc-6) var(--spc-8); }} .p-homeFor__catchTitle { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-2);} .p-homeFor__catchLine { font-weight: var(--fw-default); color: var(--c-white);} .p-homeFor__subTitle { font-weight: var(--fw-default); color: var(--c-white);} .p-homeFor__pillList { display: flex; flex-wrap: wrap; gap: var(--spc-3); list-style: none; margin: 0; padding: 0;} .p-homeFor__pillItem { display: flex; align-items: center; gap: var(--spc-3); padding: 0 var(--spc-8) 0 2rem; border-radius: 4.8rem; color: var(--c-white); min-height: 6.6rem; letter-spacing: var(--ls-body); line-height: var(--line-height);} .p-homeFor__pillIcon { width: 2.4rem; height: 2.4rem; flex-shrink: 0;} .p-homeFor__body { display: flex; flex-direction: column; gap: var(--spc-6); padding: var(--spc-12) var(--spc-24) var(--spc-24); @media (max-width: 834px) { padding: var(--spc-6) var(--spc-8) var(--spc-12); }} .p-homeFor__bodyHeader { display: flex; flex-direction: column; gap: var(--spc-1);} .p-homeFor__bodyTitle { font-weight: var(--fw-default); color: var(--c-white);} .p-homeFor__bodyLead { color: var(--c-white);} .p-homeFor--facility { background-color: var(--c-coral-200);} .p-homeFor--facility .p-homeFor__side { border-left: .1rem solid var(--c-coral-100); @media (max-width: 834px) { border-left: none; border-bottom: .1rem solid var(--c-coral-100); }} .p-homeFor--facility .p-homeFor__pillItem { background-color: var(--c-coral-100);} .p-homeFor--facility .p-homeFor__body { background-color: var(--c-coral-100);} .p-homeFor--university { padding-bottom: calc(var(--spc-24) + var(--spc-8)); background-color: var(--c-blue-200); @media (max-width: 834px) { padding-bottom: 0; }} .p-homeFor--university .p-homeFor__side { border-left: .1rem solid var(--c-blue-100); @media (max-width: 834px) { border-left: none; border-bottom: .1rem solid var(--c-blue-100); }} .p-homeFor--university .p-homeFor__pillItem { background-color: var(--c-blue-100);} .p-homeFor--university .p-homeFor__body { background-color: var(--c-blue-100);} .p-homeFacility__services { display: grid; grid-template-columns: 24rem 1fr; gap: var(--spc-6); align-items: start; @media (max-width: 1150px) { grid-template-columns: 1fr; }} .p-homeFacility__serviceMenu { background-color: var(--c-coral-200); border-radius: var(--spc-4); overflow: hidden; @media (max-width: 1150px) { display: none; }} .p-homeFacility__serviceMenuHeader { background-color: var(--c-coral-300); padding: var(--spc-3) var(--spc-5); color: var(--c-white); letter-spacing: var(--ls-body);} .p-homeFacility__serviceMenuList { list-style: none; margin: 0; padding: 0;} .p-homeFacility__serviceMenuItem { & + & { border-top: 1px solid var(--c-coral-300); }} .p-homeFacility__serviceMenuLink { display: flex; flex-direction: column; gap: var(--spc-1); padding: var(--spc-4) var(--spc-5) var(--spc-5); text-decoration: none; color: inherit; transition: opacity .2s ease; &:hover { opacity: 0.75; color: inherit; }} .p-homeFacility__serviceMenuName { font-weight: var(--fw-bold); color: var(--c-white);} .p-homeFacility__serviceMenuDesc { color: var(--c-white);} .p-homeFacility__serviceCards { display: flex; flex-direction: column; gap: var(--spc-4);} .p-homeFacility__serviceCard { display: flex; flex-direction: column; gap: var(--spc-4); background-color: var(--c-gray-100); border-radius: var(--spc-4); padding: var(--spc-9) var(--spc-10) var(--spc-10); @media (max-width: 834px) { padding: var(--spc-5) var(--spc-6); border-radius: var(--spc-3); }} .p-homeFacility__serviceCardHeader { display: flex; flex-direction: column; gap: var(--spc-1);} .p-homeFacility__serviceCardTitle { font-weight: var(--fw-bold); color: var(--c-coral-300);} .p-homeFacility__serviceCardLead { color: var(--c-coral-300); line-height: var(--p-line-height);} .p-homeFacility__serviceItems { display: flex; flex-direction: column; gap: var(--spc-2); margin: 0; padding: 0;} .p-homeFor__serviceItem { background-color: var(--c-white); border-radius: var(--spc-3); padding: var(--spc-6) var(--spc-8); @media (max-width: 834px) { border-radius: var(--spc-2); padding: var(--spc-4) var(--spc-5); }} .p-homeFor__serviceItemTitle { font-weight: var(--fw-bold); color: var(--c-black-300); margin-bottom: var(--spc-2);} .p-homeFor__serviceItemBody { ul { list-style: disc; padding-left: var(--spc-6); } li { color: var(--c-black-300); line-height: var(--p-line-height); }} .p-homeUniversity__card { background-color: var(--c-gray-100); border-radius: var(--spc-4); overflow: hidden;} .p-homeUniversity__programItem { padding: var(--spc-8) var(--spc-10); border-bottom: .1rem solid var(--c-gray-200); @media (max-width: 834px) { padding: var(--spc-5) var(--spc-6); }} .p-homeUniversity__programTitle { font-weight: var(--fw-bold); color: var(--c-blue-300);} .p-homeUniversity__programSub { color: var(--c-blue-300); line-height: var(--p-line-height);} .p-homeUniversity__programExamples { display: flex; flex-direction: column; gap: var(--spc-4); padding: var(--spc-8) var(--spc-10) var(--spc-10); @media (max-width: 834px) { padding: var(--spc-5) var(--spc-6) var(--spc-6); }} .p-homeUniversity__programExTitle { font-weight: var(--fw-bold); color: var(--c-blue-300);} .p-homeUniversity__serviceList { display: flex; flex-direction: column; gap: var(--spc-2); margin: 0; padding: 0;}