@charset "utf-8";

@font-face {
    font-family: 'Avion';
    src: url('font/Avion-Semibold.woff2') format('woff2'),
        url('font/Avion-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Scotch';
	src: url('font/Scotch-Display.woff2') format('woff2'),
	url('Scotch-Display.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}



/* ==============================================
   layout
   ============================================== */

html,
body.fullHeght {height: 100%;}

html { overflow:auto; overflow-y:scroll;}
body { color:#000; line-height: 24px; font-size:12px; font-family: 'Arial', '맑은 고딕','Malgun Gothic','나눔고딕','Nanum Gothic',돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; }

/*body.no-scroll { height: 100%; overflow: hidden; }*/

/* header */

#maisonWrap { height: 100%; }
#maisonWrap.black { position: relative; color: #fff; background-color: #000; }

#maisonWrap header { position: relative; height: 115px; }
#maisonWrap header h1 { position: absolute; right: 70px; top: 50px; line-height: 26px; font-size: 12px; color: #fff; font-family: 'Avion'; }
#maisonWrap.white header h1 { display: none; color: #797979; }

.menu-toggle {
	position: absolute; left: 45px; top: 50px;
	width: 36px;
	height: 20px;
	cursor: pointer;
	z-index: 200;
}
.menu-toggle span {
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #fff;
	left: 0;
	top: 9px;
	transition: all 0.3s ease;
}
.menu-toggle:before { content: " "; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #fff; transition: all 0.3s ease; }
.menu-toggle:after { content: " "; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #fff; transition: all 0.3s ease; }

/* X 아이콘으로 변환 */
.menu-toggle.active { position: fixed; }
.menu-toggle.active:before {
	transform: rotate(45deg);
	top: 10px;
	background: #000;
}
.menu-toggle.active span {
	opacity: 0;
}
.menu-toggle.active:after {
	transform: rotate(-45deg);
	bottom: 9px;
	background: #000;
}

#maisonWrap.white .menu-toggle span,
#maisonWrap.white .menu-toggle:before,
#maisonWrap.white .menu-toggle:after { background: #000; }

/* 글로벌 메뉴 (풀스크린 오버레이) */
.global-menu {
	position: fixed;
	width: 456px;
	inset: 0;
	background: rgba(255,255,255,.95);
	backdrop-filter:blur(6px);
	color: #2c2c2c;
	display: none; /* 처음에는 숨김 */
	padding-top: 150px;
	z-index: 101;
	-moz-box-shadow: 2px 0px 16px rgba(0,0,0,.1);
	-webkit-box-shadow: 2px 0px 16px rgba(0,0,0,.1);
	box-shadow: 2px 0px 16px rgba(0,0,0,.1);
}
.global-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.global-menu li {
	margin-bottom: 15px;
}
.global-menu .primary ul li:nth-child(3) {
	margin-bottom: 60px;
}
.global-menu ul.maison {
	margin-top: 60px;
}
.global-menu a {
	display: block;
	font-family: 'ConneqtRegular';
	line-height: 40px;
	color: #2c2c2c;
	font-size: 20px;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding-left: 130px;
	transition: color 0.2s ease;
}
.global-menu a:hover {
	color: #c4c4c4;
}

.global-menu p.copy { display: block; font-family: 'ConneqtRegular'; line-height: 36px; font-size: 15px; color: #c3c3c3; text-transform: uppercase; letter-spacing: 0.07em; padding-left: 130px; margin-top: 100px; }

/* footer */

#maisonWrap footer { padding: 70px 0 140px; }
#maisonWrap footer p.title { font-family: 'Avion'; line-height: 30px; font-size: 16px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; }
#maisonWrap footer ul.link { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
#maisonWrap footer ul.link li {}
#maisonWrap footer ul.link li a { color: #fff; text-decoration: none; }
#maisonWrap footer ul.link li a svg {}
#maisonWrap footer ul.link li a svg path {}


@media only screen and (max-width: 1200px) {

	/* header */

	#maisonWrap header { height: 40px; }
	#maisonWrap header h1 { right: 30px; top: 18px; line-height: 26px; font-size: 10px; }

	.menu-toggle {
		left: 20px; top: 12px;
		width: 26px;
		height: 17px;
	}
	.menu-toggle span {
		left: 0;
		top: 8px;
	}

	.menu-toggle.active:before {
		transform: rotate(45deg);
		top: 8px;
		background: #000;
	}
	.menu-toggle.active:after {
		bottom: 8px;
	}

	/* 글로벌 메뉴 (풀스크린 오버레이) */
	.global-menu {
		padding-top: 80px;
		width: 320px;
	}
	.global-menu ul {}
	.global-menu li {
		margin-bottom: 4px;
	}
	.global-menu .primary ul li:nth-child(3) {
		margin-bottom: 26px;
	}
	.global-menu ul.maison {
		margin-top: 26px;
	}
	.global-menu a {
		line-height: 30px;
		font-size: 13px;
		padding-left: 40px;
	}

	.global-menu p.copy { font-size: 11px; margin-top: 40px; padding-left: 40px; }

	/* footer */

	#maisonWrap footer { padding: 80px 0 100px; }
	#maisonWrap footer p.title { font-size: 13px; }

}



/* ==============================================
   main
   ============================================== */

/* layout */

#maisonBody {}
#maisonBody .bodyTop { padding-top: 64px; margin-bottom: 74px; }
#maisonBody .bodyTop p.title { line-height: 90px; font-size: 83px; font-family: 'Avion'; color: #fff; text-transform: uppercase; text-align: center; }
#maisonBody .bodyTop .info { padding-left: 50%; margin-top: 22px; }
#maisonBody .bodyTop .info ul {}
#maisonBody .bodyTop .info ul li { line-height: 30px; font-family: 'Scotch'; font-size: 20px; color: #fff; }
#maisonBody .bodyTop .info ul li span.name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em; }

/* gallery */

.mainGallery { display: flex; justify-content: center; padding: 0 90px; }
.mainGallery ul { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; align-items: center; justify-content: flex-start; gap: 15px; width: 100%;  aspect-ratio: 28 / 14.7; }
.mainGallery ul li { position: relative; width: auto; height: calc((100% - 30px) / 3); }
.mainGallery ul li.center { width: auto; height: 100%; }
.mainGallery ul li a {}
.mainGallery ul li a span { display: block; width: auto; height: 100%; }
.mainGallery ul li a span.color { position: absolute; left: 0; top: 0; opacity: 0; 
	transition: opacity 0.3s ease;
}
.mainGallery ul li a span.black {}
.mainGallery ul li a span img { width: auto; height: 100%; }


/*.mainGallery { padding: 0 45px; }
.mainGallery ul { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 15px; width: 100%; }
.mainGallery ul li { position: relative; width: calc((100% - 60px) / 7); aspect-ratio: 4 / 5; overflow: hidden; }
.mainGallery ul li:nth-child(2),
.mainGallery ul li:nth-child(6),
.mainGallery ul li:nth-child(10) { margin-right: calc((100% - 60px) / 7 * 3 + 15px); }
.mainGallery ul li:last-child { position: absolute; left: calc((100% - 60px) / 7 * 2 + 30px); top: 0; width: calc((100% - 60px) / 7 * 3); }
.mainGallery ul li a {}
.mainGallery ul li a span { display: block; width: 100%; height: auto; }
.mainGallery ul li a span.color { position: absolute; left: 0; top: 0; opacity: 0; 
	transition: opacity 0.3s ease;
}
.mainGallery ul li:hover a span.color { opacity: 1; }
.mainGallery ul li a span.gray {}
.mainGallery ul li a span img { width: 100%; height: auto; }
*/

/* video */

.mainVideo { width: 90%; max-width: 1730px; aspect-ratio: 1730 / 1080; background-size: cover; margin: 100px auto 0; }

/* 컨테이너: 16:9 유지 + 썸네일 배경 */
.yt-cover {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
}
	/* 구형 브라우저 대안
	.yt-cover::before { content:""; display:block; padding-top:56.25%; }
	.yt-cover > * { position:absolute; inset:0; }
	*/

.yt-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,0.25);          /* 어두운 오버레이 */
	transition: background .2s ease, transform .2s ease;
}

/* ⭐ 여기서 플레이 버튼 이미지를 원하는 PNG/SVG로 교체하세요 */
.yt-play::after {
	content: "";
	width: 84px; height: 84px;
	background: url("/assets/img/custom-play.png") no-repeat center / contain;
	/* 예: 원형 버튼 스타일을 쓰고 싶다면 아래 예시
	background: #e33;
	-webkit-mask: url('/assets/img/triangle.svg') no-repeat center / 48% 48%;
	mask: url('/assets/img/triangle.svg') no-repeat center / 48% 48%;
	border-radius: 999px;
	*/
}

.yt-cover:hover .yt-play { background: rgba(0,0,0,0.35); }
.yt-cover:active .yt-play { transform: scale(0.98); }

/* 생성된 iframe도 동일한 라운드 적용 */
.yt-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	border-radius: 12px;
	overflow: hidden;
}
.yt-player,
.yt-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.yt-player {
  position: relative;
  width: 100%;
  height: 100%; /* 부모 요소의 높이를 채움 */
  overflow: hidden;
}

@media only screen and (min-width: 1201px) {

.mainGallery ul li:hover a span.color { opacity: 1; }

}

@media only screen and (max-width: 1200px) {

	/* layout */

	#maisonBody .bodyTop { padding-top: 60px; margin-bottom: 50px; }
	#maisonBody .bodyTop p.title { line-height: 60px; font-size: 46px; }
	#maisonBody .bodyTop .info { display: flex; justify-content: flex-end; padding-left: 0; padding-right: 30px; margin-top: 14px; }
	#maisonBody .bodyTop .info ul li { line-height: 22px; font-size: 14px; }

	/* gallery */

	.mainGallery { padding: 0 20px; }
	.mainGallery ul { flex-direction: row; align-content: flex-start; align-items: center; justify-content: flex-start; gap: 10px; aspect-ratio: 28 / 14.7; }
	.mainGallery ul li { width: calc(33.3% - 7px); height: auto; }
	.mainGallery ul li.center { width: 100%; height: auto; }
	.mainGallery ul li a span { width: 100%; height: auto; }
	.mainGallery ul li a span img { width: 100%; height: auto; }

	/*.mainGallery ul li:active a span.color { opacity: 1; }*/

	/* video */

	.mainVideo { margin: 60px auto 0; }

}




/* ==============================================
   detail
   ============================================== */

/* layout */

#maisonDetail { display: flex; height: 100%; padding-left: 8%; margin-top: -115px; }

#maisonDetail .mainCon { position: relative; height: 100%; min-height: 100%; }
#maisonDetail .mainCon img { width: auto; height: 100%; min-height: 100%; }
#maisonDetail .mainCon .overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
#maisonDetail .mainCon .overlay.show { opacity: 1; }

#maisonDetail .detailCon { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 40%; width: 60%; }
#maisonDetail .detailCon p.title { font-family: 'Avion'; line-height: 80px; font-size: 50px; color: #000; text-transform: uppercase; text-align: center; margin-bottom: 80px; }

#maisonDetail .detailCon ul.detailList { position: absolute; right: 34px; bottom: 34px; display: flex; justify-content: flex-start; gap: 0 24px; z-index: 100; }
#maisonDetail .detailCon ul.detailList li { position: relative; width: 140px; height: 182px; }
#maisonDetail .detailCon ul.detailList li img { position: absolute; left: 50%; bottom: 0; width: 140px; height: auto; cursor: pointer; margin-left: -70px;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
#maisonDetail .detailCon ul.detailList li.active img { width: 160px; height: auto; margin-left: -80px; }

#maisonDetail .detailCon a.goBack { position: absolute; right: 30px; top: 26px; font-family: 'Avion'; width: 80px; height: 80px; line-height: 80px; font-size: 70px; color: #000; text-align: center; text-decoration: none; }
#maisonDetail .detailCon a.goBack:hover { text-indent: -30px; }


/*#maisonDetail { display: flex; height: 100%; padding-left: 8%; margin-top: -115px; }

#maisonDetail .mainCon { height: 100%; min-height: 100%; }
#maisonDetail .mainCon p { display: block; height: 100%; }
#maisonDetail .mainCon p img { width: auto; height: 100%; min-height: 100%; opacity: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#maisonDetail .mainCon p img.fade { opacity: 0; }

#maisonDetail .detailCon { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 40%; width: 60%; }
#maisonDetail .detailCon p.title { font-family: 'Avion'; line-height: 80px; font-size: 50px; color: #000; text-transform: uppercase; text-align: center; }
#maisonDetail .detailCon ul.detailList { position: absolute; right: 20px; bottom: 20px; display: flex; justify-content: flex-start; gap: 0 40px; z-index: 100; }
#maisonDetail .detailCon ul.detailList li {}
#maisonDetail .detailCon ul.detailList li p img { width: 145px; height: auto; cursor: pointer; }
#maisonDetail .detailCon a.goBack { position: absolute; right: 30px; top: 26px; font-family: 'Avion'; width: 80px; height: 80px; line-height: 80px; font-size: 70px; color: #000; text-align: center; text-decoration: none; }
#maisonDetail .detailCon a.goBack:hover { text-indent: -30px; }*/


@media only screen and (max-width: 1200px) {

	/* layout */

	#maisonDetail { flex-direction: column; height: auto; width: 100%; padding-left: 0; padding-bottom: 0; margin-top: 0; }

	#maisonDetail .mainCon { height: auto; min-height: auto; }
	#maisonDetail .mainCon img { width: 100%; height: auto; min-height: auto; }

	#maisonDetail .detailCon { position: static; flex-direction: column-reverse; justify-content: center; min-width: auto; width: auto; padding: 0 20px; }
	#maisonDetail .detailCon p.title { position: absolute; left: 0; bottom: 14px; width: 100%; line-height: 28px; font-size: 16px; text-align: center; margin-bottom: 0; z-index: 99; }

	#maisonDetail .detailCon ul.detailList { position: relative; right: auto; bottom: auto; justify-content: center; align-items: flex-end; gap: 0 10px; margin-top: 4px; }
	#maisonDetail .detailCon ul.detailList li { flex: 1; width: auto; max-width: 25%; height: 132px; }
	#maisonDetail .detailCon ul.detailList li img { position: relative; left: 50%; bottom: 0; width: 100%; height: auto; cursor: pointer; margin-left: -50%;
		-webkit-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	#maisonDetail .detailCon ul.detailList li.active img { width: 110%; height: auto; margin-left: -55%; }

	#maisonDetail .detailCon a.goBack { right: 0; top: 0; font-family: 'Avion'; width: 56px; height: 40px; line-height: 38px; font-size: 36px; }
	#maisonDetail .detailCon a.goBack:hover { text-indent: -20px; }

}