/* *****************************************************************
 * filename : contents.css
 * description : 콘텐츠 CSS
 * date : 2026-04-06
***************************************************************** */





/* **************************** 공통 **************************** */

/* ****************** 레이아웃 ****************** */

#wrap {
	position: relative;
    background-color: var(--color-b);
    overflow: visible; /* ⭐ 변경 */
}

#wrap .main-section {
	position: relative;
    z-index: 2;           /* 기존 유지 */
    background-color: var(--color-b);
    padding-bottom: var(--space-10);
}

#wrap .section {
	position: relative;
    z-index: 2;           /* 기존 유지 */
    background-color: var(--color-b);
}



/* ****************** 버튼 ****************** */

.arrow-btn-l {
  border: 0.15em solid var(--color-w);
  border-radius: var(--radius-xl);
  transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
  /* ⭐ 추가: 버튼 너비가 호버 시 변하지 않게 고정 */
  display: inline-flex;
  overflow: hidden;
}
.arrow-btn-l:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.arrow-btn-l:hover .view-btn {
  color: var(--color-b);
}

.arrow-btn-l a {
    padding: clamp(4px, 0.83vw, 12px) var(--space-5) clamp(4px, 0.83vw, 12px) var(--space-6);
    font-size: var(--fs-xl);
    gap: var(--gap-2);
    color: var(--color-w);
    transition: color 0.3s ease-in-out;
    white-space: nowrap;   
    min-width: max-content;   
}

.arrow-btn-l a img {
    max-width: 0;           /* ⭐ width 대신 max-width 사용 */
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.arrow-btn-l:hover a img {
    max-width: 0.75em;      /* ⭐ max-width로 트랜지션 */
    opacity: 1;
}



/* ****************** 스티커 ****************** */

.sticker {
	z-index:98;
	transform:scale(0);
	opacity: 0;
	transform: translateY(100px) scale(0.1);
}

/* ****************** 칩 ****************** */

.chip {
	font-size:var(--fs-xxs);
	padding:var(--space-1) var(--space-2-1);
	min-width:var(--space-7);
	min-height:32px;
	background-color:var(--color-dg);
	border-radius:var(--radius-lg);
	text-align:center;
}







/* **************************** 01. Home **************************** */

#section-01 {
	width:100%;
	height: calc(var(--vh) * 100);
	display:flex;
	justify-content:center;
	align-items:center;
}

#section-01 video {
	width:var(--width-2);
}

#section-02 {
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:var(--space-11) 0;
}

#section-02 h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-7-1);
	line-height:1.6;
}

#section-02 .content {
	padding:0 var(--space-7-1);
}

#section-02 .content > div {
	width:100%;
}

#section-02 .content > span {
	height:clamp(100px, 8.9vw, 171px);;
	width:0.1em;
	background-color:var(--color-g);
}

#section-02 .content > div span {
	font-size:var(--fs-lg);
	color:var(--color-g);
}

#section-02 .content > div h2 {
	font-size:var(--fs-xxxl);
}

#section-02 .content > div h2 span {
	font-size:var(--fs-xxl);
	color:var(--color-w);
}

#section-03 {
	padding:var(--space-11) 0;
	overflow:hidden;
}

#section-03 .sticker-01 {
	width:clamp(140px, 14.14vw, 270px);
	top:10.07vw;
	left:74.21vw;
}

#section-03 .sticker-02 {
	width:clamp(140px, 14.16vw, 272px);
	top:20.75vw;
	left:9.94vw;
	transform: rotate(0);
}

#section-03 .sticker-03 {
	width:clamp(80px, 10.29vw, 197px);
	top:32.32vw;
	left:55.25vw;
	transform: rotate(5.71deg);
}

#section-03 .sticker-04 {
	width:clamp(100px, 12.29vw, 236px);
	top:48.19vw;
	left:21.26vw;
	transform: rotate(-3.82deg);
}

#section-03 .sticker-05 {
	width:clamp(80px, 10.09vw, 193px);
	top:56.98vw;
	left:70.26vw;
	transform: rotate(7.31deg);
}

#section-03 .text-line-1 {
	height:clamp(240px, 23.95vw, 460px);
}

#section-03 .text-line-2 {
	height:clamp(150px, 16.14vw, 310px);
}

#section-03 .text-line-1 .line-motion-1 {
    background-color: var(--color-main);
    color: var(--color-b);
    font-size: clamp(60px, 8.85vw, 240px);
    line-height: 1.0;
    width: 114.58vw;
    min-height: clamp(80px, 8.85vw, 180px);

    /* 초기 상태 - 오른쪽에 숨어있음 */
    transform: translateX(110%) rotateZ(-7.42deg);
    transition: transform 0.5s ease-out; /* 부드럽게 이동 */
}

#section-03 .text-line-1 .line-motion-1.is-visible {
    transform: translateX(0) rotateZ(-7.42deg);
}

#section-03 .text-line-2 .line-motion-2 {
    background-color: var(--color-w);
    width: 114.58vw;
    min-height: clamp(80px, 8.85vw, 180px);
    margin-top: -10.33vw;

    /* 초기 상태 - 왼쪽에 숨어있음 */
    transform: translateX(-110%) rotateZ(3.4deg);
    transition: transform 0.5s ease-out;
}

#section-03 .text-line-2 .line-motion-2.is-visible {
    transform: translateX(0) rotateZ(3.4deg);
}

#section-03 .text-line-2 .font-eng-03 {
	color:var(--color-b);
	font-size:clamp(60px, 7.29vw, 200px);
	line-height:1.0;
	padding-top:8px;
}

#section-03 .text-line-2 div img {
	max-width:160px;
	width:clamp(60px, 6.56vw, 126px);
}

#section-04 > div {
	margin:var(--space-11) 0;
}

#section-04 div .head {
	margin-bottom:var(--space-7);
}


#section-04 div .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-3);
}

#section-04 div .head h4 {
	font-size:var(--fs-lg);
}

#section-04 div .content {
	padding:0 var(--space-7-1);
	gap:var(--gap-4);
}

#section-04 div .content .box {
	background-color:rgba(255,255,255,0.1);
	border-radius:var(--radius-md);
}

#section-04 div .content .box .left {
	padding:var(--space-7-1) var(--space-7);
	min-height:clamp(320px, 33.33vw, 640px);
}

#section-04 div .content .box .left .top h3 {
	font-size:var(--fs-xl);
	margin-bottom:var(--space-4);
}

#section-04 div .content .box .left .top p {
	font-size:var(--fs-md);
}

#section-04 div .content .box .left .bottom h5 {
	font-size:var(--fs-md);
	margin-bottom:var(--space-3);
}
#section-04 div .content .box .left .bottom div ul:nth-child(2) {
	margin-top:var(--space-1);
}

#section-04 div .content .box .left .bottom div ul li {
	font-size:var(--fs-xs);
	padding:var(--space-1) var(--space-3);
	max-height:48px;
	border-radius:var(--radius-xl);
	background-color: var(--color-dg);
	margin-right:var(--space-1);
	margin-bottom:var(--space-2);
}

#section-04 div .content .box .right img {
	height:clamp(320px, 33.33vw, 640px);
	width:100%;
	
}

#section-05 {
	margin-bottom:var(--space-11);
}

#section-05 div .head {
	margin-bottom:var(--space-7);
}

#section-05 div .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-3);
}

#section-05 div .head h4 {
	font-size:var(--fs-lg);
}

#section-05 div .content {
	padding: 0 var(--space-7-1);
}

#section-05 div .content ul {
	gap:var(--gap-4);
	grid-template-columns:1fr 1fr;
	grid-template-rows: auto auto;
	margin-bottom: var(--space-10);
	align-items: stretch;
}

#section-05 div .content ul li {
	border-radius:var(--radius-xl);
	overflow:hidden;
}

#section-05 div .content ul li:nth-child(2n) {
	transform:translateY(clamp(44px, 5.20vw, 100px));
}

#section-05 div .content ul li:nth-child(3) {
}

#section-05 div .content ul li:nth-child(4) {
}

#section-05 div .content ul li img, #section-05 div .content ul li video {
	transition: transform 0.3s ease-out;
	transform:scale(1);
	width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#section-05 div .content ul li h4 {
	bottom:var(--space-4-1);
	left:var(--space-4-1);
	font-size:var(--fs-lg);
	z-index:2;
}

#section-05 div .content ul li:hover img, #section-05 div .content ul li:hover video {
	transform:scale(1.1);
}

#section-06 div .head {
	margin-bottom:var(--space-7);
}

#section-06 div .head h2 {
	font-size:var(--fs-xxxl);
	margin-bottom:var(--space-3);
}

#section-06 div .head h2 p {
  /* p 자체의 padding-bottom 으로 잘림 방지 */
}

#section-06 div .head h4 {
	font-size:var(--fs-lg);
	line-height:1.6;
}

#section-06 .sticker-06 {
	width:clamp(120px, 13.51vw, 259px);
	top:clamp(-100px, -7.29vw, -140px);
	right:6.21vw;
}

#section-06 .sticker-07 {
	width:clamp(100px, 11.75vw, 225px);
	top:clamp(100px, 21.56vw, 413px);
	left:11.04vw;
}

#section-06 .marquee-wrapper {
	margin-top:var(--space-10);
}








/* **************************** 02. About **************************** */

.about .head {
	height:var(--height-4);
	padding:var(--space-10-1) var(--space-7-1);
}

.about .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-7-1);
}

.about .head h4 {
	font-size:var(--fs-md);
}

.about .head h4 p {
	margin-bottom:var(--space-1);
}

.about .head .sticker-08 {
	width:clamp(80px, 10.42vw, 200px);
	top:clamp(-100px, -3.38vw, -64px);
	left:clamp(100px, 41.51vw, 796px);
}

.about .content .about-video {
    width: 100%;                        /* 부모 너비에 꽉 참 */
    height: clamp(400px, 41.67vw, 800px); /* 800 / 1920 = 41.67% */
    object-fit: cover;                  /* 비율 유지하며 꽉 채움 */
    object-position: center;
    display: block;                     /* 하단 여백 제거 */
    pointer-events: none;               /* 클릭/드래그로 컨트롤 접근 차단 */
}

:root {
	/* 스크롤 줌 리빌 변수 */
	--color-mask-bg: var(--color-main);		/* 마스크 배경 (검정) */
	--color-text-zoom: var(--color-b);		/* 줌 텍스트 색상 (흰색) */
	--color-inner-bg: var(--color-b);				/* 줌 후 내부 배경색 */
	--zoom-origin-x: 44%;					/* 확대 기준점 X (0%=좌, 50%=중앙, 100%=우) */
	--zoom-origin-y: 48%;					/* 확대 기준점 Y (0%=상단, 50%=중앙, 100%=하단) */

	/* --- 줌 배율 --- */
	--zoom-start-scale: 1;					/* 줌 시작 크기 */
	--zoom-end-scale: 100;					/* 줌 최종 크기 (클수록 더 깊이 들어가는 효과) */
	
	/* --- 스크롤 길이 (vh 배수: 높을수록 천천히 진행) --- */
	--scroll-duration: 2;					/* 핀 섹션 스크롤 길이 배수 */

}


.about .content .zoom-section {
	position: sticky; 
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background: var(--color-inner-bg);
	isolation: isolate;
}

.about .content .mask-wrap h2 {
	font-size:var(--fs-max);
}

.about .content .inner-content {
	position: absolute;
	inset: 0;
	background: transparent;           /* 배경 제거 — zoom-section 배경이 보임 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;                        /* mask-wrap 아래 */
	opacity: 1;                        /* 항상 보임으로 변경 */
	overflow: hidden;
}

.about .content .sticker-22 {
	width:clamp(120px, 11.04vw, 212px);
	top:clamp(-120px, -6.25vw, -64px);
	right:clamp(180px, 19.27vw, 370px);
	z-index:99;
}

.about .content .sticker-23 {
	width:clamp(102px, 10.72vw, 206px);
	bottom:clamp(-102px, -5.31vw, -64px);
	left:clamp(72px, 8.90vw, 171px);
	z-index:99;
}

.about .content .zoom-section-01 {
		--color-mask-bg: #BBFF00;
		--color-inner-bg: #000;
		--zoom-origin-x: 44%;
		--zoom-origin-y: 48%;
}

.about .content .zoom-section-02 {
		--color-mask-bg: #000;
		--color-inner-bg: #fff;
		--zoom-origin-x: 48.5%;
		--zoom-origin-y: 50%;
}

.about .content .inner-content-01 h3 {
	font-size:var(--fs-xxl);
	margin-bottom:var(--space-4);
}

.about .content .inner-content-01 p {
	font-size:var(--fs-lg);
}

.about .content .inner-content-02 {
	grid-template-columns:1fr 1fr;
	padding:var(--space-10-1) var(--space-7-1) var(--space-8);
}

.about .content .inner-content-02 .left h2 {
	font-size:var(--fs-hero);
}

.about .content .inner-content-02 .right ul li {
	margin-bottom:var(--space-7-1);
}

.about .content .inner-content-02 .right ul li:last-child {
	margin-bottom:0;
}


.about .content .inner-content-02 .right h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-3);
}

.about .content .inner-content-02 .right h5 {
	font-size:var(--fs-md);
	line-height:1.6;
}

.about .content .zoom-section2 .mask-wrap h2 {
	font-size:var(--fs-max);
	color:var(--color-w);
}

.about .content .inner-content-03 h3, .about .content .inner-content-03 p {
	color:var(--color-b);
}

.about .content .inner-content-03 h3 {
	font-size:var(--fs-xxl);
	margin-bottom:var(--space-4);
}

.about .content .inner-content-03 p {
	font-size:var(--fs-lg);
}

.about .content .zoom-section-02 .zoom-text h2 {
	color:var(--color-w);
}


.about .content .inner-content-04 {
	padding:var(--space-10) var(--space-7-1);
	background-color:var(--color-w);
	grid-template-columns:0.5fr 1fr;
}

.about .content .inner-content-04 .left h2 {
	font-size:var(--fs-hero);

}

.about .content .inner-content-04 .right ul {
	grid-template-columns:1fr 1fr;
	gap:var(--gap-4);
}

.about .content .inner-content-04 .right ul li {
	border-radius: var(--radius-lg);
	border: 0.15em solid var(--color-b);
	padding:var(--space-5) var(--space-4-1) var(--space-4);
	transition: background-color 0.2s ease, color 0.2s ease;
	gap:var(--gap-4);
	background-color:var(--color-w);
}

.about .content .inner-content-04 .right ul li:hover {
	background-color:var(--color-main);
}


.about .content .inner-content-04 .right ul li:hover img {
	transform:scale(1.1) rotate(5deg);
}

.about .content .inner-content-04 .right ul li img {
	max-height:clamp(120px, 10.41vw, 200px);
	max-width:clamp(120px, 10.41vw, 200px);
	transition: 0.2s ease;
}

.about .content .inner-content-04 .right ul li h4, .about .content .inner-content-04 .right ul li h5 {
	color:var(--color-b);
}

.about .content .inner-content-04 .right ul li:nth-child(2n) {
	transform: translateY(clamp(32px, 3.33vw, 60px));
}

.about .content .inner-content-04 .right h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-3);
}

.about .content .inner-content-04 .right h5 {
	font-size:var(--fs-md);
	line-height:1.6;
}


.about .content .inner-content-05 {
	padding:var(--space-7) var(--space-7-1) var(--space-10);
}

.about .content .inner-content-05 h2 {
	font-size:var(--fs-hero);
	margin-bottom: var(--space-7);
}

.about .content .inner-content-05 ul {
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}




/* **************************** 03-1. Portfolio list  **************************** */

.portfolio .head {
	height:var(--height-4);
	padding:var(--space-10-1) var(--space-7-1);
}

.portfolio .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-7-1);
}

.portfolio .head h4 {
	font-size:var(--fs-md);
}

.portfolio .head h4 p {
	margin-bottom:var(--space-1);
}

.portfolio .head .sticker-10 {
	width:clamp(40px, 5.83vw, 112px);
	top:clamp(100px, 11.9vw, 228px);
	left:clamp(100px, 21.51vw, 413px);
}

.portfolio .head .sticker-11 {
	width:clamp(64px, 9.06vw, 174px);
	top:clamp(100px, 24.62vw, 472px);
	left:clamp(100px, 63.51vw, 1219px);
}

.portfolio .content {
	padding:var(--space-7-1) var(--space-7-1) 0 var(--space-7-1);
}

.portfolio .content > div:nth-child(1) ul {
	gap:var(--gap-4);
	grid-template-columns:1fr 1fr;
	margin-bottom: var(--space-8);
}

.portfolio .content > div:nth-child(1) ul li {
	border-radius:var(--radius-xl);
}

.portfolio .content > div:nth-child(1) ul li img, .portfolio .content > div:nth-child(1) ul li video {
	transition: transform 0.3s ease-out;
	transform:scale(1);
}

.portfolio .content > div:nth-child(1) ul li h4 {
	bottom:var(--space-4-1);
	left:var(--space-4-1);
	font-size:var(--fs-lg);
	z-index:2;
}

.portfolio .content > div:nth-child(1) ul li:hover img {
	transform:scale(1.1);
}

.portfolio .content > div:nth-child(2) {
	padding-bottom: var(--space-10);
}

.portfolio .content > div:nth-child(2) > div:first-child {
	gap:var(--gap-4);
	padding-bottom:var(--space-7-1);
}

.portfolio .content > div:nth-child(2) .box-list {
	gap:var(--gap-4);
	grid-template-columns:1fr var(--width-6);
	padding:var(--space-4-1);
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-md);	
}

.portfolio .content > div:nth-child(2) .box-list > div:nth-child(1) ul {
	gap:var(--gap-1);
	margin-bottom: var(--space-4);
}

.portfolio .content > div:nth-child(2) .box-list > div:nth-child(1) h4 {
	font-size:var(--fs-lg);
	margin-bottom: var(--space-1);
}

.portfolio .content > div:nth-child(2) .box-list > div:nth-child(1) p {
	font-size:var(--fs-xs);
}


.portfolio-list .logo-text {
	font-size:var(--fs-md);
	font-weight:bold;
	color:var(--color-g);
}







/* **************************** 03-2. Portfolio Read  **************************** */

.portfolio-read img {
	border-radius:var(--radius-md);	
}

.portfolio-read .head {
	padding:var(--space-10-1) var(--space-7-1) 0;
}

.portfolio-read .head h3 {
	font-size:var(--fs-xl);
	margin-bottom:var(--space-4-1);
}

.portfolio-read .head > div:nth-child(3) {
	padding:0 var(--space-7-1) var(--space-10);
	grid-template-columns:1fr 1fr;
	gap:var(--gap-4);
}

.portfolio-read .head > div:nth-child(3) .left > ul {
	gap:var(--space-6);
}

.portfolio-read .head > div:nth-child(3) .left ul li span {
	font-size:var(--fs-xs);
	margin-bottom:var(--space-1);
}


.portfolio-read .head > div:nth-child(3) .left > ul li h4 {
	font-size:var(--fs-lg);
	line-height:1.0
}

.portfolio-read .head > div:nth-child(3) .left > ul li.keyword ul {
	gap:var(--gap-1);
}

.portfolio-read .head > div:nth-child(3) .left > ul li.keyword ul li {
	font-size:var(--fs-xs);
	padding:var(--space-1) var(--space-3);
	max-height:48px;
	border-radius:var(--radius-xl);
	background-color: var(--color-dg);
}

.portfolio-read .head > div:nth-child(3) .right p {
	margin-bottom:var(--space-2-1);
	font-size:var(--fs-sm);
	line-height:1.8;
}

.portfolio-read .head > div:nth-child(3) .right p:last-child {
	margin-bottom:0;
}

.portfolio-read .content {
	gap:var(--gap-4);
	padding:0 var(--space-7-1);
}

.portfolio-read .content .block-02 {
	gap:var(--gap-4);
	grid-template-columns:1fr 1fr;
}

.portfolio-read .content > div:last-child {
	margin-bottom: var(--space-10);
}

.portfolio-read .bottom {
	padding:0 var(--space-7-1) var(--space-10);
}

.portfolio-read .bottom h2 {
	font-size:var(--fs-xxxl);
	margin-bottom:var(--space-5-1);
}

.portfolio-read .bottom ul {
	font-size:var(--fs-xxxl);
	margin-bottom:var(--space-4-1);
	gap:var(--gap-4);
	grid-template-columns:1fr 1fr 1fr;
}





/* **************************** 04. Contact **************************** */

.contact .head {
	height:var(--height-4);
	padding:var(--space-10-1) var(--space-7-1);
}

.contact .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-7-1);
}

.contact .head h4 {
	font-size:var(--fs-md);
}

.contact .head h4 p {
	margin-bottom:var(--space-1);
}

.contact .head .sticker-12 {
	width:clamp(80px, 10vw, 192px);
	top:clamp(100px, 6.9vw, 132px);
	left:clamp(100px, 33.51vw, 643px);
}

.contact .head .sticker-13 {
	width:clamp(64px, 8.54vw, 164px);
	top:clamp(100px, 25.16vw, 483px);
	left:clamp(100px, 53.48vw, 1026px);
}


.contact .content > div {
	padding:0 var(--space-7-1);
	grid-template-columns:1fr 1fr;
}

.contact .content > div .left ul {
	gap:var(--space-7-1);
}

.contact .content > div .left ul li a {
	font-size:var(--fs-lg);
	line-height:1.0;
}

.contact .content > div .left ul li:first-child a {
	gap:var(--gap-1);
}

.contact .content > div .left ul li span {
	font-size:var(--fs-xs);
}

.contact .content > div .left .sticker-14 {
	width:clamp(90px, 10.67vw, 205px);
	top:clamp(100px, 33.75vw, 648px);
	left:clamp(100px, 5.83vw, 112px);
}

.contact .content > div .left .sticker-15 {
	width:clamp(80px, 9.42vw, 181px);
	top:clamp(100px, 58.9vw, 1130px);
	left:clamp(100px, 24.51vw, 470px);
}

.contact .content > div .left .sticker-16 {
	width:clamp(100px, 12.96vw, 249px);
	top:clamp(100px, 92vw, 1766px);
	left:clamp(100px, 10.51vw, 201px);
}

.contact .content > div .right form {
	gap:var(--space-7-1);
}

.contact .content > div .right form h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-4-1);
}

.contact .content > div .right form .form-01 input {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
}

.contact .content > div .right form .form-01 input:valid {
	color:var(--color-w);
	background-color:var(--color-b);
}

.contact .content > div .right form .form-01 input::placeholder,
.contact .content > div .right form .form-01 input::-webkit-input-placeholder,
.contact .content > div .right form .form-01 input::-moz-placeholder,
.contact .content > div .right form .form-01 input:-ms-input-placeholder {
	font-weight: 700;
    color: var(--color-g);
	opacity: 1; /* 일부 브라우저에서 흐림 방지 */
	 -webkit-font-smoothing: antialiased;
}

.contact .content > div .right form .form-01 ul {
	gap:var(--gap-2-1);
}

.contact .content > div .right form .form-01 ul li:last-child {
	grid-template-columns:1fr 1fr;
	gap:var(--gap-2-1);
}

.contact .content > div .right form .form-01 ul li:last-child select {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	color:var(--color-g);
}

.contact .content > div .right form .form-01 ul li:last-child select:valid {
	color:var(--color-w);
}

.contact .content > div .right form .form-01 ul li.code .field {
border: 0.15em solid var(--color-w);
border-radius: var(--radius-sm);
}

.contact .content > div .right form .form-01 ul li.code .field input {
padding: var(--space-3);
 border:unset;
}

.contact .content > div .right form .form-02 ul {
	flex-wrap: wrap;
	gap:var(--gap-2-1);
}


.contact .content > div .right form .form-02 ul li label {
    border: 0.15em solid var(--color-w);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    min-width: 120px;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.contact .content > div .right form .form-02 ul li:hover label,
.contact .content > div .right form .form-02 ul li.is-active label {
    background-color: var(--color-w);
    color: var(--color-b);
}

.contact .content > div .right form .form-02 ul li input {
	opacity:0;
	top:0;
	left:0;
}

.contact .content > div .right form .form-03 > div:nth-child(2) {
    border: 0.15em solid var(--color-w);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    overflow: visible;  /* ← hidden을 visible로 변경 */
}

.contact .content > div .right form .form-03 > div:nth-child(2) textarea {
    resize: none;
    border: none;
    padding: 0;
    overflow: auto;
    width: 100%;
    height: var(--height-5);
    font-size: var(--fs-xs);
    line-height: 1.6;
    outline: none;
}


.contact .content > div .right form .form-03 > .file > div:nth-child(1) {
	padding:var(--space-3) 0;
	font-size:var(--fs-xs);
	gap:var(--gap-1);
}

.contact .content > div .right form .form-03 > .file > div:nth-child(1) .fileset {
	color:var(--color-g);
}

.contact .content > div .right form .form-03 > .file > div:nth-child(1) .fileset span {
	display:inline-block;
}

.contact .content > div .right form .form-03 > .file > div:nth-child(1) .fileset em {
	display:flex; align-items:center;
}

.contact .content > div .right form .form-03 > .file > div:nth-child(1) .fileset .file_len {
	display:inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width:20.83vw;
}

.contact .content > div .right form .form-03 > .file label {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	min-width:120px;
}

.contact .content > div .right form .form-03 > .file input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.contact .content > div .right form .form-04 > div:nth-child(2) {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	overflow:hidden;
}

.contact .content > div .right form .form-04 > div:nth-child(2) > div {
	width:100%;
	font-size:var(--fs-xs);
	line-height:1.6;
	height:var(--height-6);
	overflow:auto;
	gap:var(--gap-4);
}

.contact .content > div .right form .form-04 > div:nth-child(2) > div ul {
	gap:var(--gap-1);
}

.contact .content > div .right form .form-04 > div:nth-child(2) > div  {
    overflow-y: auto;
    max-height: clamp(160px, 16.67vw, 320px);
	padding-right:var(--space-1-1);
	line-height:1.8;
}

.contact .content > div .right form .form-04 > p {
	padding:var(--space-3) 0;
}

.contact .content > div .right form .form-04 > p input[type=checkbox]  {
	opacity: 0;
    position: absolute;
	width: var(--space-4);
    height: var(--space-4);
}

.contact .content > div .right form .form-04 > p input[type=checkbox] + label {
	padding-left:var(--space-4-1);
	height: var(--space-4);
}

.contact .content > div .right form .form-04 > p input[type=checkbox] + label:before {
	display: block;
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    background: url(/assets/img/00_common/icon_check-box_off.svg) left center no-repeat;
    background-size: contain;
}

.contact .content > div .right form .form-04 > p input[type=checkbox]:checked + label:before {
	background: url(/assets/img/00_common/icon_check-box_on.svg) left center no-repeat;
    background-size: contain;
}

.contact .content > div .right form .form-05 {
	padding-bottom:var(--space-10);
}

.contact .content > div .right form .form-05 button div {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	font-size:var(--fs-xs);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.contact .content > div .right form .form-05 button div:hover {
	border:0.15em solid var(--color-main);
	background-color:var(--color-main);
	color:var(--color-b);
}


.contact .content > div .right form .form-04 .table {
	grid-template-columns:1fr 1fr;
}

.contact .content > div .right form .form-04 .table ul li {
	border:0.1em solid var(--color-w);
	font-size:var(--fs-xxs);
}





/* **************************** 05. Maintenance **************************** */

.maintenance .head {
	height:var(--height-4);
	padding:var(--space-10-1) var(--space-7-1);
}

.maintenance .head h2 {
	font-size:var(--fs-hero);
	margin-bottom:var(--space-7-1);
}

.maintenance .head h4 {
	font-size:var(--fs-md);
}

.maintenance .head h4 p {
	margin-bottom:var(--space-1);
}

.maintenance .head .sticker-17 {
	width:clamp(72px, 9.06vw, 174px);
	top:clamp(100px, 10.9vw, 209px);
	left:clamp(100px, 16vw, 307px);
}

.maintenance .head .sticker-18 {
	width:clamp(60px, 7.39vw, 142px);
	top:clamp(100px, 24.16vw, 463px);
	left:clamp(100px, 61.64vw, 1183px);
}

.maintenance .content form h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-4-1);
}

.maintenance .content form > div {
	padding:0 var(--space-7-1);
	grid-template-columns:1fr 1fr;
	gap:var(--gap-4);
}

.maintenance .content form .left {
	gap:var(--gap-7);
}


.maintenance .content form .left .form-01 ul {
	gap:var(--gap-2-1);
}


.maintenance .content form .left .form-01 ul li > div {
	grid-template-columns:1fr 1fr;
	gap:var(--gap-2-1);
	
}

.maintenance .content form .left .form-01 ul li .field {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
}

.maintenance .content form .left .form-01 ul li .field input {
	padding:var(--space-3);
	border-radius:var(--radius-sm);
}

.maintenance .content form .left .form-01 ul li .field input {
	padding:var(--space-3);
	border-radius:var(--radius-sm);
}

.maintenance .content form .left .form-01 ul li .field input[type=checkbox] {
    position: absolute;
    width: var(--space-4);
    height: var(--space-4);
    background-color: transparent;
    right: var(--space-1);
    appearance: none;         
    -webkit-appearance: none;  
    border: none;                 
}

.maintenance .content form .left .form-01 ul li .field input[type=checkbox]:before {
	display: block;
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    background: url(/assets/img/00_common/icon_check-box_off.svg) left center no-repeat;
    background-size: contain;
}

.maintenance .content form .left .form-01 ul li .field input[type=checkbox]:checked:before {
	background: url(/assets/img/00_common/icon_check-box_on.svg) left center no-repeat;
    background-size: contain;
}

.maintenance .content form .left .form-01 p {
	margin-top:var(--space-1);
	color:var(--color-lg);
	font-size:var(--fs-xxs);
}

.maintenance .content form .left .form-02 > div:nth-child(2) {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	overflow:hidden;
}

.maintenance .content form .left .form-02 > div:nth-child(2) > div {
	width:100%;
	font-size:var(--fs-xs);
	line-height:1.6;
	height:var(--height-6);
	overflow:auto;
	gap:var(--gap-4);
}

.maintenance .content form .left .form-02 > div:nth-child(2) > div ul {
	gap:var(--gap-1);
}

.maintenance .content form .left .form-02 > div:nth-child(2) > div  {
    overflow-y: auto;
    height: clamp(120px, 7.67vw, 320px);
	padding-right:var(--space-1-1);
	line-height:1.8;
}

.maintenance .content form .left .form-02 > p {
	padding:var(--space-3) 0;
}

.maintenance .content form .left .form-02 > p input[type=checkbox]  {
	opacity: 0;
    position: absolute;
	width: var(--space-4);
    height: var(--space-4);
}

.maintenance .content form .left .form-02 > p input[type=checkbox] + label {
	padding-left:var(--space-4-1);
	height: var(--space-4);
}

.maintenance .content form .left .form-02 > p input[type=checkbox] + label:before {
	display: block;
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    background: url(/assets/img/00_common/icon_check-box_off.svg) left center no-repeat;
    background-size: contain;
}

.maintenance .content form .left .form-02 > p input[type=checkbox]:checked + label:before {
	background: url(/assets/img/00_common/icon_check-box_on.svg) left center no-repeat;
    background-size: contain;
}

.maintenance .content form .left .form-02 .table {
	grid-template-columns:1fr 1fr;
}

.maintenance .content form .left .form-02 .table ul li {
	border:0.1em solid var(--color-w);
	font-size:var(--fs-xxs);
}

.maintenance .content form .right .form-03 {
	flex:1;
}


.maintenance .content form .right .form-03 > div:nth-child(2) {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	flex:1;
}

.maintenance .content form .right .form-03 > div:nth-child(2) textarea {
	padding:var(--space-3);
	resize: none;
	border:none;
	padding:0;
	overflow:auto;
	width:100%;
	line-height:1.6;
	outline:none;
	flex:1;
}

.maintenance .content form .right .form-03 > .file {
	gap:var(--gap-2);
}

.maintenance .content form .right .form-03 > .file > div:nth-child(1) {
	padding:var(--space-3) 0;
	gap:var(--gap-1);
}

.maintenance .content form .right .form-03 > .file > div:nth-child(1) .fileset {
	color:var(--color-g);
}

.maintenance .content form .right .form-03 > .file > div:nth-child(1) .fileset span {
	display:inline-block;
}

.maintenance .content form .right .form-03 > .file > div:nth-child(1) .fileset em {
	display:flex; align-items:center;
}

.maintenance .content form .right .form-03 > .file > div:nth-child(1) .fileset .file_len {
	display:inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width:20.83vw;
}

.maintenance .content form .right .form-03 > .file label {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	min-width:120px;
}

.maintenance .content form .right .form-03 > .file input {
	opacity:0;
	top:0;
	left:0;
}

.maintenance .content form .form-04 {
	padding:var(--space-4-1) 0 var(--space-10) 0;
}

.maintenance .content form .form-04 button div {
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-sm);
	padding:var(--space-3);
	font-size:var(--fs-xs);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.maintenance .content form .form-04 button div:hover {
	border:0.15em solid var(--color-main);
	background-color:var(--color-main);
	color:var(--color-b);
}






/* 태블릿 & 모바일에서 호버 멈춤 */

@media (hover: hover) {

  .arrow-btn-l:hover {
    background-color: var(--color-main);
    border-color: var(--color-main);
  }
  .arrow-btn-l:hover .view-btn {
    color: var(--color-b);
  }
  .arrow-btn-l:hover a img {
    max-width: 0.75em;
    opacity: 1;
  }
  
  #section-05 div .content ul li:hover img,
  #section-05 div .content ul li:hover video {
    transform: scale(1.1);
  }
  
  .portfolio .content > div:nth-child(1) ul li:hover img {
    transform: scale(1.1);
  }
  
}






/* 태블릿 */
@media all and (max-width: 1024px) {

	/* **************************** 공통 **************************** */

	.chip {
		font-size:var(--fs-xxs);
		padding:var(--space-1) var(--space-2);
		min-width:var(--space-6);
		min-height:28px;
	}
	
	.about .head,
	.portfolio .head,
	.contact .head,
	.maintenance .head {
		height: auto;
		padding: var(--space-11) var(--space-7-1) var(--space-8);
	}
	
	.about .head h2,
	.portfolio .head h2,
	.contact .head h2,
	.maintenance .head h2 {
		font-size:6.25vw;
		margin-bottom: var(--space-6);
	}
	
	
	
	/* **************************** 01. Home **************************** */

	.main-section .head h2.font-eng-01 {
		font-size: var(--fs-xxxl);
		margin-bottom: var(--space-2);
	}
	
	.main-section .head h4 span, .main-section .head h4 p, #section-02 h4 p {
		font-size: var(--fs-md);
	}
	
	#section-01 {
		height: 100vw;
		min-height: unset;
	}
	
	#section-01 video {
		width: 63.875vw
	}

	#section-02 {
		min-height:960px;
		padding-top: var(--space-7-1);
	}
	
	#section-03 {
		margin-top:-200px;
	}
	
	#section-04 div .content {
		gap: var(--gap-6);
	}

	#section-04 div .content .box {
		display:grid;
		flex-direction: column-reverse;
	}

	#section-04 div .content .box > div:first-child {
		width:100%;
		order:2;
	}

	#section-04 div .content .box > div:last-child {
		width:100%;
		order:1;
	}
	
	#section-04 div .content .box .left {
		padding: var(--space-6) var(--space-5);
		min-height: unset;
		justify-content: unset;
		gap:var(--gap-4);
	}
	
	#section-04 div .content .box .left .top p {
		font-size: var(--fs-sm);
	}
	
	#section-04 div .content .box .right {
		height: clamp(480px, 46.87vw, 900px);
	}
	
	#section-04 div .content .box .right img {
		height: auto;
	}
	
	#section-05 div .content ul {
		grid-template-columns: 1fr;
	}
	
	#section-05 div .content ul li {
		border-radius: var(--radius-xl);
		max-width: unset;
		max-height: unset;
		width: auto;
		height: auto;
	}
	
	#section-05 div .content ul li:nth-child(2n) {
		transform:unset;
	}
	
	#section-05 div .content ul li img, #section-05 div .content ul li video {
		height:auto;
		max-height: unset;
		width:100%;
	}
	
	#section-05 div .content ul li h4 {
		font-size: var(--fs-md);
	}
	
	
	
	/* **************************** 02. About **************************** */
	
	.about .head .fl_jc_end {
		justify-content:flex-start;
	}
	
	.about .head .fl_jc_end h4 {
		width:100%;
	}

	.about .content {
        overflow: visible;
    }

	.about .content .zoom-section-01 .mask-text, .about .content .zoom-section-02 .mask-text  {
		width: 80vw;
	}

	.about .content .zoom-section-01 {
		--zoom-origin-x: 43.5%;
        --zoom-origin-y: 50%;
	}

	.about .content .zoom-section-02 {
		--zoom-origin-x: 48.2%;
		--zoom-origin-y: 50%;
	}

	.about .content .sticker-22 {
		top: -7.25vw;
		right: 5.67vw;
	}

	.about .content .sticker-23 {
		bottom: -2.65vw;
		left: 6.90vw;
	}
	
	
	.about .content .inner-content-04 {
		padding:var(--space-10-1) var(--space-7-1);
	}



	/* **************************** 03. Portfolio **************************** */

	.portfolio .head .sticker-10 {
		top:16.9vw;
	}

	.portfolio .head .sticker-11 {
		top:29.62vw;
		left:60.51vw;
	}
	
	.portfolio .content > div:nth-child(1) ul  {
		grid-template-columns: 1fr;
	}
	
	.portfolio .content > div:nth-child(1) ul li {
		border-radius: var(--radius-xl);
		max-width: unset;
		max-height: unset;
		width: auto;
		height: auto;
	}
	
	.portfolio .content > div:nth-child(1) ul li h4 {
		font-size: var(--fs-xl);
		bottom: var(--space-6);
		left: var(--space-6);
	}

	.portfolio .content > div:nth-child(1) ul li img, .portfolio .content > div:nth-child(1) ul li video {
		height:auto;
		max-height: unset;
		width:100%;
	}
	
	.portfolio-read .head > div:nth-child(3) .left > ul {
		gap: var(--space-4);
		grid-template-columns: 1fr 1fr;
	}
	
	.portfolio-read .head > div:nth-child(3) {
		padding: var(--space-7-1) var(--space-7-1) var(--space-10);
		grid-template-columns: 1fr;
		gap: var(--space-7-1);
	}
	
	.portfolio-read .head > div:nth-child(3) .left > ul li.keyword ul li {
		margin-bottom:var(--space-1-1);
	}
	
	
	
	/* **************************** 04. Contact **************************** */
	
	.contact .head .sticker-12 {
		width:clamp(80px, 10vw, 192px);
		top:11.16vw;
		left:29.64vw;
	}

	.contact .head .sticker-13 {
		width:clamp(64px, 8.54vw, 164px);
		top:29.9vw;
		left:53.51vw;
	}

	.contact .content > div .right form .form-04 > p input[type=checkbox] + label:before {
		width: var(--space-4-1);
		height: var(--space-4-1);
	}

	.contact .content > div .right form .form-04 > p input[type=checkbox] + label {
		padding-left: var(--space-5);
	}
	
	
	
	/* **************************** 05. Mantenance **************************** */

	.maintenance .head .sticker-17 {
		width:clamp(72px, 9.06vw, 174px);
		top:16vw;
		left:28vw;
	}

	.maintenance .head .sticker-18 {
		width:clamp(60px, 7.39vw, 142px);
		top:26.16vw;
		left:63.64vw;
	}

	.maintenance .content form .left .form-01 p {
		margin-top:var(--space-2);
		font-size:var(--fs-xs);
	}
		
	.maintenance .content form .left .form-01 ul li .field input[type=checkbox]:before,
	.maintenance .content form .left .form-02 > p input[type=checkbox] + label:before {
		width: var(--space-4-1);
		height: var(--space-4-1);
	}
	
	.maintenance .content form .left .form-02 > p input[type=checkbox] + label {
		padding-left: var(--space-5);
	}

}











/* 모바일 */
@media all and (max-width: 768px) {


	/* **************************** 공통 **************************** */

	/* ****************** 스티커 ****************** */

	.about .sticker,
	.portfolio .sticker,
	.contact .sticker,
	.maintenance .sticker {
		display:none;
	}

	.about .head,
	.portfolio .head,
	.contact .head,
	.maintenance .head {
		padding: var(--space-11) var(--space-5) var(--space-8);
	}

	.about .head h2.font-eng-01 p,
	.portfolio .head h2.font-eng-01 p,
	.contact .head h2.font-eng-01 p,
	.maintenance .head h2.font-eng-01 p {
		font-size: var(--fs-xxl);
	}
	
	.about .head h4,
	.portfolio .head h4,
	.contact .head h4,
	.maintenance .head h4 {
		font-size: var(--fs-sm);
		line-height:1.6;
	}
	
	
	
	/* **************************** 01. Main **************************** */
	
	#section-01 {
		width: 100%;
		height: calc(var(--vh) * 100);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#section-02 {
		min-height:unset;
		padding:0 var(--space-5) var(--space-11);
		height:100vh;
	}
	
	#section-02 h4 p {
        font-size:5.20vw;
    }
	
	#section-01 video {
		width: 104.74vw;
	}
			
	#section-02 .content {
		 display:block;
	}
	
	#section-02 .content > div {
		margin-bottom:var(--space-6);
	}
	
	#section-02 .content > div span {
		font-size: var(--fs-xl);
	}
		
	#section-02 .content > div span.dp_inb  {
		display:none;
	}
	
	
	#section-02 .content > div h2 {
		font-size:21.25vw;
	}
			
	#section-03 {
		padding: var(--space-11) 0 var(--space-12);
		margin-top: -100px;
	}
	
	#section-03 .sticker-01 {
		width:160px;
		top: 90px;
        left: 80px;
		
	}

	#section-03 .sticker-02 {
		width:160px;
		top: 305px;
        left: unset;
        right: 50px;
	}

	#section-03 .sticker-03 {
		width:100px;
		top: 480px;
        left: 50px;
	}

	#section-03 .sticker-04 {
		width:140px;
		top: 600px;
        left: unset;
        right: 40px;
	}

	#section-03 .sticker-05 {
		width:130px;
		top: 780px;
        left: 110px;
	}

	
	
	#section-03 .text-line-mo-1, #section-03 .text-line-mo-2 {
		height:clamp(240px, 23.95vw, 460px);
	}

	#section-03 .text-line-mo-3, #section-03 .text-line-mo-4 {
		height:clamp(150px, 16.14vw, 310px);
	}

	#section-03 .text-line-mo-1 .line-motion-mo-1 {
		background-color: var(--color-main);
		color: var(--color-b);
		font-size: 23vw;
		line-height: 1.0;
		width: 114.58vw;
		min-height: clamp(80px, 8.85vw, 180px);

		/* 초기 상태 - 오른쪽에 숨어있음 */
		transform: translateX(110%) rotateZ(-16.42deg);
		transition: transform 0.5s ease-out; /* 부드럽게 이동 */
	}
	
	#section-03 .text-line-mo-2 .line-motion-mo-2 {
		background-color: var(--color-main);
		color: var(--color-b);
		font-size: 23vw;
		line-height: 1.0;
		width: 238.58vw;
		min-height: clamp(80px, 8.85vw, 180px);

		/* 초기 상태 - 오른쪽에 숨어있음 */
		transform: translateX(-110%) rotateZ(8.4deg);
		transition: transform 0.5s ease-out; /* 부드럽게 이동 */
	}

	#section-03 .text-line-mo-1 .line-motion-mo-1.is-visible {
		transform: translateX(0) rotateZ(-7.42deg);
	}
	
	#section-03 .text-line-mo-2 .line-motion-mo-2.is-visible {
		transform: translateX(0) translateY(-50px)  rotateZ(3.4deg);
	}

	#section-03 .text-line-mo-3 .line-motion-mo-3 {
		background-color: var(--color-w);
		width: 114.58vw;
		min-height: clamp(80px, 8.85vw, 180px);
		margin-top: -10.33vw;

		/* 초기 상태 - 왼쪽에 숨어있음 */
		transform: translateX(110%) rotateZ(3.4deg);
		transition: transform 0.5s ease-out;
	}

	#section-03 .text-line-mo-4 .line-motion-mo-4 {
		background-color: var(--color-w);
		width: 114.58vw;
		min-height: clamp(80px, 8.85vw, 180px);
		margin-top: -10.33vw;

		/* 초기 상태 - 왼쪽에 숨어있음 */
		transform: translateX(-110%) rotateZ(3.4deg);
		transition: transform 0.5s ease-out;
	}

	#section-03 .text-line-mo-3 .line-motion-mo-3.is-visible {
		transform: translateX(0) translateY(-80px) rotateZ(-11.42deg);
	}
	
	#section-03 .text-line-mo-4 .line-motion-mo-4.is-visible {
		transform: translateX(0) translateY(-60px) rotateZ(3.4deg);
	}

	#section-03 .text-line-mo-3 .font-eng-03, #section-03 .text-line-mo-4 .font-eng-03 {
		color:var(--color-b);
		font-size: 15vw;
		line-height:1.0;
		padding-top:8px;
	}

	#section-03 .text-line-mo-3 div img, #section-03 .text-line-mo-4 div img {
		max-width:160px;
		width:clamp(60px, 6.56vw, 126px);
	}
	
	#section-04 div .head h2 {
		font-size: 12vw;
		margin-bottom: var(--space-2);
	}
		
	#section-04 div .content {
		padding: 0 var(--space-5);
		gap: var(--gap-4);
	}
	
	.main-section .head h4 span, .main-section .head h4 p {
        font-size: var(--fs-sm);
    }
	
	#section-04 div .content .box > div:first-child {
        width: 100%;
        order: 2;
		gap:var(--gap-6);
    }
	
	#section-04 div .content .box .left .top h3 {
		font-size: var(--fs-sm);
		margin-bottom: var(--space-2-1);
	}
		
		
	#section-04 div .content .box .left .top p {
        font-size: var(--fs-sm);
    }
	
	
	#section-04 div .content .box .left {
        padding: var(--space-5) var(--space-4-1);
        min-height: unset;
        justify-content: unset;
        gap: var(--gap-4);
    }
	
	#section-04 div .content .box .left .bottom div ul li {
		font-size: var(--fs-xxs);
		margin-right: 0;
		margin-bottom: var(--space-1);
	}
	
	#section-04 div .content .box .right {
		height: auto;
	}
	
	#section-04 div .content .box .right img {
		height: auto;
		width: 100%;
	}
		
	#section-05 div .head h2 {
		font-size: 12vw;
		margin-bottom: var(--space-2);
	}
		
	#section-05 div .content {
		padding: 0 var(--space-5);
	}	
	
	#section-05 div .content ul li {
        border-radius: var(--radius-md);
    }
	
	#section-05 div .content ul li h4 {
		bottom: var(--space-4);
		left: var(--space-4);
	}
	
	#section-06 .m_w_1920 {
		padding: 0 var(--space-5);
	}
	
	
	
	#section-06 > div {
		padding: 0 var(--space-5);
	}
	
	#section-06 div .head h2 {
		font-size: 12vw;
		margin-bottom: var(--space-7-1);
	}
	
	
	#section-06 .head h4 p, #section-06 .head h4 span {
		font-size:5.20vw;
	}
	
	#section-06 .sticker-06, #section-06 .sticker-07 {
		display:none;
	}

	
	/* **************************** 02. About **************************** */

	.about .content .about-video {
		height: 65.67vw;
	}

	:root {
		--zoom-end-scale: 26;
		--scroll-duration: 5;	
	 }

	 .zoom-target {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		transform: translateZ(0);
		backface-visibility: hidden;
	}

	.about .content .zoom-section-01 .mask-text, .about .content .zoom-section-02 .mask-text  {
		width: 80vw;
	}

	
	.about .content .zoom-section-01 {
		--zoom-origin-x: 40.75%;
        --zoom-origin-y: 49%;
	}

	.about .content .zoom-section-02 {
		--zoom-origin-x: 49%;
		--zoom-origin-y: 70%;
	}

	.inner-content {
		padding:var(--space-5);
	}

	 .about .content .sticker-22 {
        top:-64px;
        width: 21.5vw;
    }

	.about .content .sticker-23 {
        bottom: -40px;
        width: 21vw;
    }

	.about .content .inner-content-01 h3 {
		font-size: 8.16vw;
		line-height:1.4;
	}

	.about .content .inner-content-01 p {
		font-size: 5.20vw;
	}
	
	.about .content .inner-content-02 {
		grid-template-columns: 1fr;
		padding: var(--space-11) var(--space-5) var(--space-8);
	}
	
	.about .content .inner-content-02 .left h2 {
		font-size: 12vw;
        margin-bottom: var(--space-6);
	}

	.about .content .inner-content-02 .right h4 {
		font-size:var(--fs-lg);
		margin-bottom:var(--space-3);
	}

	.about .content .inner-content-02 .right h4 {
		font-size: var(--fs-lg);
	}

	.about .content .inner-content-02 .right h5 {
		font-size: var(--fs-sm);
	}

	.about .content .inner-content-04 {
        padding: var(--space-10) var(--space-5) var(--space-8);
		grid-template-columns:1fr;
    }
	
	.about .content .inner-content-04 .left h2 {
		font-size: 12vw;
        margin-bottom: var(--space-6);
	}

	.about .content .inner-content-04 .right ul {
		grid-template-columns: 1fr;
		gap: var(--gap-4);
	}

	.about .content .inner-content-04 .right ul li:nth-child(2n) {
		transform: unset;
	}

	.about .content .inner-content-05 {
        padding: var(--space-10) var(--space-5) var(--space-8);
    }

	.about .content .inner-content-05 h2 {
		font-size: 12vw;
        margin-bottom: var(--space-6);
		text-align:left;
	}

	.about .content .inner-content-05 ul {
		grid-template-columns:1fr 1fr;
	}
		
	
	/* **************************** 03. Portfolio **************************** */
	
	.portfolio .content {
		padding: 0 var(--space-5);
	}
	
	.portfolio .content > div:nth-child(2) .box-list {
		grid-template-columns: 1fr;
		padding: var(--space-4-1);
		border: 0.1em solid var(--color-w);
	}
	
	
	.portfolio .content > div:nth-child(1) ul li {
        border-radius: var(--radius-md);
    }
	
	.portfolio .content > div:nth-child(1) ul li h4 {
		font-size: var(--fs-md);
		bottom: var(--space-4-1);
		left: var(--space-4-1);
		width: 76vw;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
	}
	
	.arrow-btn-l {
		border: 0.1em solid var(--color-w);
		width:100%;
		border-radius: var(--radius-2xl);
	}
	
	.arrow-btn-l a {
		display:block;
		padding: 0;
		font-size: var(--fs-xl);
		min-width: unset;
		width:100%;
		height:56px;
		line-height:56px;
		text-align:center;
	}
	
	
	.portfolio-read .head {
		padding: var(--space-10-1) var(--space-5) 0;
	}
	
	.portfolio-read .head > div:nth-child(3) .left > ul {
		gap: var(--space-6);
		grid-template-columns: 1fr;
	}
	
	
	.portfolio-read .head > div:nth-child(3) {
		padding:0 0 var(--space-10);
		gap: var(--space-6);
	}
	
	.portfolio-read .head-img img {
		border-radius:unset;
	}

	.portfolio-read .content {
		gap: var(--gap-2);
		padding: 0 var(--space-5);
	}

	.portfolio-read img {
		border-radius: var(--radius-md);
	}		

	.portfolio-read .content .block-02 {
		gap: var(--gap-2);
	}

	.portfolio-read .bottom {
		padding: 0 var(--space-5) var(--space-10);
	}

	.portfolio-read .bottom ul {
		gap: var(--gap-4);
		grid-template-columns: 1fr;
	}

	.portfolio-read .bottom .font-eng-01 {
		font-size:var(--fs-xxl);
		text-align:center;
	}
	
	.portfolio-read .bottom h2 {
		margin-bottom: var(--space-4-1);
	}
	
	

	
	
	
	
	
	/* **************************** 04. Contact **************************** */
	
	.contact .content > div {
		padding: 0 var(--space-5);
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	
	.contact .content > div .left ul {
		gap: var(--space-6);
	}
	
	.contact .content > div .right form .form-01 input {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		height:48px;
	}
	
	.contact .content > div .right form .form-01 ul li:last-child select {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		height:48px;
	}

		
	.contact .content > div .right form .form-01 ul li:last-child {
		grid-template-columns: 1fr;
	}

	.contact .content > div .right form .form-01 ul li.code .field {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}

	.contact .content > div .right form .form-02 ul {
		flex-wrap: wrap;
		display:grid;
	}

	.contact .content > div .right form .form-02 ul li label {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		padding: 0 var(--space-3);
		min-width: unset;
		height:48px;
		line-height:48px;
	}
	
	.contact .content > div .right form .form-03 > div:nth-child(2) {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}

	.contact .content > div .right form .form-03 > div:nth-child(2) textarea {
		height: auto;
		min-height:240px;
	}
	
	.contact .content > div .right form .form-03 > .file {
		display:grid;
		grid-template-columns: 1fr;
	}
	
	.contact .content > div .right form .form-03 > .file label {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		min-width: 120px;
	}

	.contact .content > div .right form .form-03 > .file > div:nth-child(1) .fileset .file_len {
		width:50vw;
		max-width: unset;
	}

	.contact .content > div .right form .form-03 > .file input {
		width: auto;
	}

	.contact .content > div .right form .form-04 > div:nth-child(2) {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}

	.contact .content > div .right form .form-04 > div:nth-child(2) > div {
		max-height: unset;
		min-height:160px;
		padding-right: var(--space-1-1);
		line-height: 1.8;
	}

	.contact .content > div .right form .form-05 button {
		width:100%;
	}

	.contact .content > div .right form .form-05 button div {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		width:100%;
		height:56px;
		line-height:56px;
		font-size: var(--fs-md);
		padding:0;
	}








	/* **************************** 05. Maintenance **************************** */ 

	
	.maintenance .content form > div {
		padding: 0 var(--space-5);
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.maintenance .content form .left .form-01 ul li .field {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}
	
	.maintenance .content form .left .form-01 ul li .field input {
		padding: var(--space-3);
		border-radius: var(--radius-xs);
		height:48px;
	}
	
	.maintenance .content form .left .form-01 ul li > div {
		grid-template-columns: 1fr;
	}
	
	.maintenance .content form .right .form-03 > .file > div:nth-child(1) .fileset .file_len {
		max-width:80vw;
	}

	.maintenance .content form .left .form-02 > div:nth-child(2) {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}
	
	.maintenance .content form .left .form-02 > div:nth-child(2) > div {
		max-height: unset;
        min-height: 160px;
        padding-right: var(--space-1-1);
        line-height: 1.8;
	}
	
	.maintenance .content form .right .form-03 > div:nth-child(2) {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
	}

	.maintenance .content form .right .form-03 > div:nth-child(2) textarea {
		height: auto;
		min-height:240px;
	}
	
	.maintenance .content form .right .form-03 > .file {
		display:grid;
		grid-template-columns: 1fr;
	}
	
	.maintenance .content form .right .form-03 > .file label {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		min-width: 120px;
	}
	
	.maintenance .content form .right .form-03 > .file input {
		width: auto;
	}
	
	.maintenance .content form .form-04 {
		padding: var(--space-8) var(--space-5) var(--space-10);
	}
	
	.maintenance .content form .form-04 button {
		width:100%;
	}

	.maintenance .content form .form-04 button div {
		border: 0.1em solid var(--color-w);
		border-radius: var(--radius-xs);
		width:100%;
		height:56px;
		line-height:56px;
		font-size: var(--fs-md);
		padding:0;
	}
	
	
	
	
}