@charset "utf-8";

/* 20250324 스크롤모션 */

.mainPage .contentWrap {padding-bottom:0;}

.scroll-arrow {position:absolute;bottom:50px;left:calc(50% - 15px);width:30px;height:30px;background:url("../images/scroll_down.svg") no-repeat center / cover;z-index:10;}
[class*="scrollMotion"] {position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;}
[class*="scrollMotion"] .innerWrap {position:relative;width:1280px;margin:0 auto;z-index:20;display:flex;}
.content-wrap {position:relative;width:500px;}
.content-wrap .title-area h2 {font-size:50px;font-weight:700;line-height:120%;color:#000;}
.content-wrap .title-area p {margin-top:30px;font-size:24px;line-height:140%;}
.content-wrap .link {margin-top:100px;display:inline-flex;align-items:center;justify-content:center;height:75px;width:280px;border-radius:100vw;background-color:var(--primary);color:#fff;border:2px solid var(--primary);transition:0.3s ease-in-out;}
.content-wrap .link span {
	padding-right:48px;
	color:#fff;
	font-size:20px;
	font-weight:700;
	background:url("../images/link_arrow_l.svg") no-repeat right center / auto 9px;
}
.content-wrap .link:hover {background-color:#fff;color:#000;border-color:#000;}
.content-wrap .link:hover span {color:#000;background-image:url("../images/link_arrow_l_dark.svg");}
.scrollMotion01 {justify-content:center;text-align:center;}
.scrollMotion01 .title-wrap {position:relative;width:100%;height:100%;font-size:60px;font-weight:700;color:#fff;z-index:10;}
.scrollMotion01 .title-wrap p {margin-top:35px;font-size:32px;font-weight:500;color:#fff;line-height:130%;}
.scrollMotion01 .bg {position:absolute;top:0;left:0;width:100%;height:100%;background:url("../images/main_motion_bg01.jpg") no-repeat center 0 / cover;}
.scrollMotion01 .bg::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:10;}

.scrollMotion02 {background:#d5f3fe url("../images/main_motion_bg02.png") no-repeat center bottom / 100% auto;}
.scrollMotion02 .content-wrap h2 {color:#000;}
.scrollMotion02 .content-wrap p {color:#000;}
.scrollMotion02 .obj {position:absolute;bottom:-30px;left:calc(50% - 250px);width:1200px;height:1040px;transform:scale(0.8);transform-origin:center bottom;}
.scrollMotion02 .obj .char {position:absolute;bottom:0;left:0;width:1200px;height:1040px;background:url("../images/main_motion_illust_01.png") no-repeat center center / cover;}
/* .scrollMotion02 .obj .char::before {content:"";position:absolute;bottom:260px;right:20px;width:461px;height:288px;background:url("../images/main_motion_char_01_shadow.png") no-repeat center center / cover;} */
/* .scrollMotion02 .obj01 {position:absolute;top:59px;left:calc(50% - 396px);width:200px;height:200px;background:url("../images/main_sec03_obj.svg") no-repeat 0 0 / cover;}
.scrollMotion02 .obj02 {position:absolute;bottom:33px;left:calc(50% + 480px);width:188px;height:201px;background:url("../images/main_sec03_obj01.svg") no-repeat 0 0 / cover;} */
.scrollMotion03 {background:#bdf1ff url("../images/main_motion_bg03.png") no-repeat center bottom / 100% auto;}
.scrollMotion03 .link {background-color:#000;color:#fff;border-color:#000;}
.scrollMotion03 .innerWrap {justify-content:flex-end;z-index:20;}
.scrollMotion03 .content-wrap {opacity:0;}
.scrollMotion03 .obj {position:absolute;bottom:0;left:calc(50% - 800px);width:1000px;height:531px;}
.scrollMotion03 .obj .char {position:absolute;bottom:0;left:0;width:100%;height:100%;background:url("../images/main_motion_illust_02.png") no-repeat center center / cover;}
/* .scrollMotion03 .obj .char::before {content:"";position:absolute;bottom:260px;right:20px;width:412px;height:288px;background:url("../images/main_motion_char_02_shadow.png") no-repeat center center / cover;} */

@media screen and (max-height:900px) {
	.scrollMotion02 .obj {transform:scale(0.5) !important;transform-origin:center bottom !important;}
	.scrollMotion03 .obj {transform:scale(0.7) !important;transform-origin:center bottom !important;}
	/* .scrollMotion03 .obj {transform:scale(0.8) translateY(-50%) !important;transform-origin:center top !important;} */
}

@media screen and (max-width:1024px) and (max-height:720px) {
	.scrollMotion02 .obj01 {transform:scale(0.6) !important;transform-origin:center bottom !important;}
	/* .scrollMotion03 .obj {transform:scale(0.6) translateY(-50%) !important;transform-origin:center top !important;} */
}

@media screen and (max-width:1280px) {
	.scrollMotion02 .obj01 {transform:scale(0.7) !important;transform-origin:center center !important;}
	/* .scrollMotion03 .obj {transform:scale(0.7) translateY(-50%) !important;transform-origin:left top !important;background-position:left center !important;} */
	.scrollMotion03 .content-wrap {width:400px;}
	[class*="scrollMotion"] .innerWrap {width:100%;}
}

@media screen and (max-width:1024px) {
	.headingWrap {height:100vh;}
	.scrollMotion01 .title-wrap {font-size:40px;}
	.scrollMotion01 .title-wrap p {font-size:24px;}
	.content-wrap {width:auto;}
	.content-wrap .title-area h2 {font-size:36px;}
	.content-wrap .title-area p {font-size:20px;}
	.content-wrap .link {margin-top:80px;width:200px;height:50px;font-size:16px;}
	.content-wrap .link span {font-size:16px;}
	.scrollMotion02,
	.scrollMotion03 {background-size:auto 60%;}
	.scrollMotion02 .content-wrap {position:absolute;top:calc(50% - 250px);}
	.scrollMotion02 .obj {left:50% !important;bottom:-30px;transform:translateX(-50%) scale(0.4) !important;transform-origin:center bottom;}
	.scrollMotion03 .content-wrap {position:absolute;top:calc(50% - 250px);left:0;width:auto;}
	.scrollMotion03 .obj {left:50% !important;bottom:-30px;transform:translateX(-50%) scale(0.55) !important;transform-origin:center bottom;}
	/* .scrollMotion03 .content-wrap {left:50%;top:calc(50% + 250px);width:300px;} */
}

@media screen and (max-width:600px) {
	.scrollMotion01 .title-wrap {font-size:30px;}
	.scrollMotion01 .title-wrap p {font-size:18px;}
	.scrollMotion01 .obj {background-position:center center !important;}
	.scrollMotion02 .obj {transform:translateX(-50%) scale(0.35) !important;transform-origin:center bottom !important;}
	.scrollMotion03 {align-items:flex-start;}
	.scrollMotion03 .innerWrap {height:100%;}
	.scrollMotion03 .obj01 {opacity:0.4 !important;}
	/* .scrollMotion03 .content-wrap {position:absolute;top:calc(50% + 100px);left:15%;width:200px;} */
	.content-wrap .title-area h2 {font-size:28px;}
	.content-wrap .title-area p {margin-top:15px;font-size:14px;}
	.content-wrap .link {margin-top:40px;width:160px;height:40px;}
	.content-wrap .link span {font-size:12px;}
}