.about-us-page { overflow: hidden; }

.about-hero-section { padding: 40px 0; text-align: center; }
.about-hero-section .hero-content h2 { font-size: var(--fs-46); font-weight: 700; font-family: var(--root-font-mont); }
.about-hero-section .hero-content p { margin-top: 8px; font-weight: 300; color:var(--root-color-secondary); font-size: var(--fs-18); }
.about-hero-section .hero-image { position: relative; max-width: 976px; margin: 30px auto 0; aspect-ratio: 1019/570; pointer-events: none; }
.about-hero-section .hero-image img { position: absolute; inset:0; }
.about-hero-section .hero-image > div { position: absolute; inset:0; }

.mission-section { padding: 110px 0; background: var(--root-color-secondary); }
.mission-section .inner,
.mission-section .inner-xl { display: flex; text-align: center; }
.mission-section .mission-questions { flex:1.7; display: flex; align-items: center; padding: 40px 60px; padding-right: 130px; border-radius: 500px; border:1px solid white; color:var(--root-color-secondary); }
.mission-section .mission-questions div { flex: 1; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 20px; font-size: var(--fs-18); font-weight: 700; background:white; }
.mission-section .mission-questions .plus-span { position: relative; flex-shrink: 0; width: 37px; aspect-ratio: 37/42; margin: 0 10px; }
.mission-section .mission-questions .plus-span::before { content: ''; position: absolute; left:50%; top:0; width: 1px; height: 100%; background: white; }
.mission-section .mission-questions .plus-span::after { content: ''; position: absolute; left:0; top:50%; width: 100%; height: 1px; background: white; }
.mission-section .mission-answer { flex:1; display: flex; align-items: center; justify-content: center; margin-left:-100px; padding: 20px 60px; padding-left: 30px; border: 1px solid white; border-radius: 500px; color:white; font-size: var(--fs-18); font-weight: 700; }
.mission-section .mission-answer div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:15px; }
.mission-section .mission-answer .equal-span { position: relative; flex-shrink: 0; width: 37px; aspect-ratio: 37/42; margin-right:60px; }
.mission-section .mission-answer .equal-span::before { content: ''; position: absolute; left:0; top:33%; width: 100%; height: 1px; background: white; }
.mission-section .mission-answer .equal-span::after { content: ''; position: absolute; left:0; top:66%; width: 100%; height: 1px; background: white; }


.story-section { padding: 130px 0 100px; }
.story-section .story-content { position: relative; display: flex; align-items: center; gap: 100px; margin-bottom: 130px; }
.story-section .story-content .story-left { flex: 1.2; }
.story-section .story-content .icon { width: 53px; margin-bottom: 12px; margin-left:3px; }
.story-section .story-content h3 { margin-bottom: 17px; font-size: var(--fs-32); font-weight: 700; color: var(--root-color-secondary); }
.story-section .story-content .h3-sub { margin-bottom: 42px; font-size: var(--fs-20); font-weight: 700; }
.story-section .story-content .subtitle { font-size: var(--fs-28); font-weight: 300; }
.story-section .story-content .subtitle p { line-height: 1.4; }
.story-section .story-content .story-right { flex: 1; border-radius: 12px; overflow: hidden; box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.1); }
.story-section .story-content .story-deco { z-index: -1; position: absolute; left:35%; bottom:-22%; width: 134px; aspect-ratio: 1/1; }

.story-section .story-description { display: flex; flex-direction: column; gap:30px; margin-bottom: 78px; }
.story-section .story-description p { font-size: var(--fs-17); line-height: 1.5; }

.story-section .story-image { position: relative; width: 100%; margin: 0 auto; padding-top: 91px; }
.story-section .story-image-overlay { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); height: 100%; aspect-ratio: 824/346; }
.story-section .story-image-overlay img { position: absolute; inset:0; }

.cta-section { padding: 100px 0; }
.cta-section .cta-box { position: relative; height: 320px; padding: 20px; background: url('/images/sub/about/1__cta.jpg') no-repeat center/cover; background-attachment: fixed; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cta-section .cta-box h3 { margin-bottom: 28px; font-size: var(--fs-26); font-weight: 700; color: #fff; line-height: 1.4; }
.cta-section .cta-box .btn { max-width:90%; width: 648px; }


@media screen and (max-width: 1199px) {
	.mission-section .mission-questions .plus-span { width: 20px; }
	.mission-section .mission-answer .equal-span { width: 20px; }
	.mission-section .mission-questions { padding-right: 80px; }
	.mission-section .mission-answer { margin-left:-60px; padding-left: 20px; }

	.story-section .story-content { gap:30px; }
	.story-section .story-content .story-deco { bottom:-33%; width: 110px; }
	.story-section .story-content h3 { margin-bottom: 12px; }
	.story-section .story-content .h3-sub { margin-bottom: 24px; }
	.story-section .story-content { margin-bottom: 110px; }
	.story-section .story-description { gap:24px; margin-bottom: 60px; }
}
@media screen and (max-width: 1023px) {
	.mission-section .mission-questions { flex:2; padding: 20px 30px; padding-right: 50px; }
	.mission-section .mission-questions .plus-span { margin:0 4px; }
	.mission-section .mission-answer { margin-left:-40px; padding: 20px 30px; padding-left: 10px; }
	.mission-section .mission-answer .equal-span { margin-right: 20px; }
}
@media screen and (max-width: 767px) {
	.mission-section { padding: 80px 0; }
	.mission-section .inner,
	.mission-section .inner-xl { flex-direction: column; max-width: 280px; }
	.mission-section .mission-questions { flex-direction: column; padding-right: 20px; padding-bottom: 60px; }
	.mission-section .mission-questions .plus-span { margin: 6px; }
	.mission-section .mission-answer { flex-direction: column; padding: 40px; margin-left:0; margin-top:-50px; padding-top: 5px; }
	.mission-section .mission-answer .equal-span { margin: 6px; margin-bottom: 30px; }

	.story-section { padding: 80px 0 80px; }
	.story-section .story-content { flex-direction: column; gap: 40px; margin-bottom: 80px; }
	.story-section .story-content .story-right { max-width: 320px; }
	.story-section .story-content .story-deco { bottom:8%; left:20%; }

	.cta-section { padding: 80px 0; }
	.cta-section .cta-box { height: 350px; }
	.cta-section .cta-box h3 { margin-bottom: 20px; }
}