@charset "utf-8";
/* 
	common.css : 헤더, 푸터, 레이아웃 정의
*/

/******************************************************************************
 header { ******************************************************************************* */
		.header{position:fixed; top:0; left:0; width:100%; padding:18px 0; z-index:9999; transition: all .5s;}
		/* 로고는 absolute로 뷰(내부 박스) 기준 정중앙 — 좌·우 버튼 너비 달라도 중앙 유지. 미세 조정: .logo__wr 의 margin-left */
		.header__main__box{height: 60px; position:relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;}
		.header__main__box .ham__btn__wr,
		.header__main__box .contact__btn__wr{flex:0 0 auto;}
		
		.logo__wr{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-left:0;}

		.logo__wr .logo{
			height:61px;
		}

		body.move_hd .header{transform: translateY(-100%) !important; opacity:0 !important;}

		/* 헤더 모바일(1280px) */
		@media screen and (max-width:1280px){
			.header__main__box{height:44px;}

			.logo__wr .logo{
				height:51px;
				object-fit:contain;
			}

		}
		
		/* 헤더 모바일(820px) */
		@media screen and (max-width:820px){
			.header{padding:12px 0;}
			.header__main__box{height:44px;}
			
			.logo__wr .logo{
				width:97px;
				height:32px;
				object-fit:contain;
			}
			/* 모바일용 컨택트 버튼 이미지 교체 */
			.header__main__box .ham__btn__wr img{
				width:44px;
				height:24px;
				object-fit:contain;
			}
	
			/* 모바일용 컨택트 버튼 이미지 교체 */
			.header__main__box .contact__btn__wr img{
				content:url('/images/btn_contact_m.png');
			}
	
			/* 흰 로고 구간: 뉴스 게시판(JS: .header--board-news) / 서브·쇼케이스 스크롤(JS: .header--logo-light) */
			.header.header--board-news .header__main__box .contact__btn__wr img,
			.header.header--logo-light .header__main__box .contact__btn__wr img{
				content:url('/images/btn_contact_m_wt.png');
			}

		}

/* } header *****************************************************************************
***************************************************************************************/



/******************************************************************************
side menu { ******************************************************************************* */
	/* 햄버거 메뉴 */
		.header__main__box .ham__btn__wr .main__nav__a{
			/* 햄버거 버튼: 기본 버튼 스타일 제거 */
			background:transparent;
			border:0;
			padding:0;
			cursor:pointer;
		}

		.global-menu-panel{
			/* 전체 화면 오버레이 패널 기본 상태(닫힘) */
			position:fixed;
			inset:0;
			z-index:10000;
			background:transparent;
			color:#fff;
			opacity:0;
			visibility:hidden;
			pointer-events:none;
			overflow:hidden;
			/* 패널 자체의 페이드 인/아웃 */
			transition:opacity .2s ease, visibility .2s ease;
		}
		.global-menu-panel::before{
			/* 원형 확장되는 실제 배경 레이어 */
			content:'';
			position:absolute;
			inset:0;
			background:#05070c;
			/* 시작점: 좌측 상단의 점 */
			clip-path:circle(0 at 0 0);
			/* 메뉴 열고 닫을 때 원형 확장/축소를 더 느리게 */
			transition:clip-path 2s cubic-bezier(.19,1,.22,1);
			will-change:clip-path;
		}
		.global-menu-panel::after{
			/* 광원 레이어 완전 비활성화 */
			content:'';
			position:absolute;
			inset:0;
			background:transparent;
			opacity:0;
			pointer-events:none;
			display:none;
		}
		body.menu-open{
			overflow:hidden;
		}
		.global-menu-panel.is-active{
			opacity:1;
			visibility:visible;
			pointer-events:auto;
		}
		.global-menu-panel.is-closing{
			/* 닫힘 애니메이션 동안 뒤쪽 메뉴 버튼 클릭 허용 */
			pointer-events:none;
		}
		.global-menu-panel.is-open::before{
			clip-path:circle(180vmax at 0 0);
		}
		.global-menu-panel__inner{
			position:relative;
			z-index:1;
			height:100%;
			padding:18px 0 32px;
			display:flex;
			flex-direction:column;
			opacity:0;
			transition:opacity .4s ease;
		}
		.global-menu-panel.is-open .global-menu-panel__inner{
			opacity:1;
			/* 나타날 때만 살짝 늦춰 원 펼침과 겹치도록 */
			transition:opacity .55s ease .12s;
		}
		.global-menu-panel__top{
			position:relative;
			transform:none;
		}
		.global-menu-panel__logo{
			position:absolute;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
			margin-left:0;
		}
		.global-menu-panel__logo img{object-fit:contain;}
		/* 헤더와 동일 3단(햄·로고·컨택) — 패널은 왼쪽에 닫기, 오른쪽은 너비만 맞춤 */
		.global-menu-panel__top .ham__btn__wr{
			display:flex;
			align-items:center;
			flex:0 0 auto;
		}
		.global-menu-panel__right-spacer .main__nav__a{
			visibility:hidden;
			display:inline-flex;
		}
		.global-menu-panel__close{
			border:1px solid rgba(255,255,255,.4);
			background:#fff;
			color:#111;
			border-radius:20px;
			height:40px;
			padding:0 14px;
			display:inline-flex;
			align-items:center;
			justify-content:center;
			cursor:pointer;
			font-size:16px;
			line-height:1;
			box-sizing:border-box;
		}
		.global-menu-panel__body{
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:60px;
			width:100%;
			margin:auto 0;
			transform:translateY(10px);
			transition:transform .2s ease;
		}
		.global-menu-panel.is-open .global-menu-panel__body{
			transform:none;
			transition:transform .65s cubic-bezier(.19,1,.22,1) .22s;
		}

		.global-menu-panel__cta{
			align-self:flex-end;
			display: flex;
			flex-direction: column;
			gap:24px;
		}

		.global-menu-panel__cta .btn__box__st01{
			align-self:flex-end;
		}

		.global-menu-panel__nav ul{
			margin:0;
			padding:0;
			list-style:none;
		}

		.global-menu-panel__nav li{
			margin-top:24px;
			display: flex;
			align-items: center;
			gap:24px;
		}
		
		.global-menu-panel__nav li:first-child{
			margin-top:0;
		}

		.global-menu-panel__nav li .menu_num{
			font-size: 16px;
			width: 24px;
			color:var(--color__main);
			font-family:'ClashDisplay-Variable';
		}

		.global-menu-panel__nav a{
			font-size:90px;
			line-height:1;
			color:rgba(255,255,255,.35);
			font-family:'ClashDisplay-Variable';
			transition:color .2s ease;
		}
		.global-menu-panel__nav a:hover{
			color:#fff;
		}

		.global-menu-panel__cta .btn__box__a{
			display:inline-flex;
			align-items:center;
			gap:8px;
			color:#fff;
		}

		.menu__video__wr{
			width:490px;
			height:400px;
			position:relative;
			overflow:visible;
			background:transparent;
		}


		.menu__video{
			width:100%;
			height:100%;
			object-fit:cover;
			opacity:.92;
			filter:saturate(.9) brightness(.92);
			/* 세로 타원 마스크: 좌우 가장자리를 더 강하게 0(투명) 처리 */
			mask-image: radial-gradient(circle at 50% 50%, #000 17%, rgba(0, 0, 0, .92) 23%, rgba(0, 0, 0, .45) 49%, rgba(0, 0, 0, .08) 67%, transparent 52%);
		}

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

			.global-menu-panel__nav a{
				font-size:60px;
			}

			.menu__video__wr {
				width: 380px;
				height: 250px;
			}
		}



		@media screen and (max-width:820px){
			.global-menu-panel__inner{
				padding:12px 0 24px;
			}
			.global-menu-panel__close{
				width:32px;
				height:32px;
				padding:0;
				border:0;
				background:transparent;
				color:transparent;
				font-size:0;
				line-height:0;
				border-radius:0;
				position:relative;
			}
			.global-menu-panel__close::before{
				content:"\00D7";
				position:absolute;
				inset:0;
				display:flex;
				align-items:center;
				justify-content:center;
				color:#fff;
				font-size:34px;
				line-height:1;
				font-weight:300;
			}
			.global-menu-panel__body{
				flex-direction:column;
				align-items:flex-start;
				justify-content:center;
				gap:32px;
			}
			.global-menu-panel__nav a{
				font-size:48px;
			}

			.global-menu-panel__nav li{
				gap:12px;
			}

			.global-menu-panel__cta {
				flex-direction: column-reverse;
			}


			.menu__video__wr{
				display:none;
				width: 100%;
				height: 140px;
			}

			.menu__video{
				-webkit-mask-image: radial-gradient(ellipse 68% 42% at 50% 50%, #000 18%, rgba(0,0,0,.95) 28%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.16) 54%, transparent 60%);
				mask-image: radial-gradient(ellipse 68% 42% at 50% 50%, #000 18%, rgba(0,0,0,.95) 28%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.16) 54%, transparent 60%);
			}

			.global-menu-panel__cta{
				align-self:flex-start;
				width: 100%;
			}

			.global-menu-panel__cta .btn__box__st01 {
				align-self: flex-start;
			}

			
		}

/* } side menu *****************************************************************************
***************************************************************************************/


/* roopimgs { ******************************************************************************* */

	.roopimgs::after {content:''; display:block; width:100%; height:16px; background: #e04004;}
	.roopimgs .marquee__text__list__wr { display:flex; width: 100%;overflow: hidden;  white-space: nowrap; left:0; bottom:-60px; padding-top:100px;}
	.roopimgs .marquee__text__list__wr .marquee__tx__container { display: flex; white-space: nowrap; animation: txmarquee 50s linear infinite; }
	.roopimgs .marquee__text__list__wr .marquee__tx__container .tx{ display: flex; flex-shrink: 0; margin:0 20px;}

	@keyframes txmarquee {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(-50%); 
		}
	}

	@keyframes txmarquee_m {
		0% { transform: translateX(0%); }
		100% { transform: translateX(-100%); }
	}

	/* 820px 이하: 썸네일 링크·이미지 100% 채움 + 슬라이드 크기에 맞춘 마퀴 속도·여백 */
	@media screen and (max-width: 820px) {

		.roopimgs .marquee__text__list__wr { padding-top:0px;}
	
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx {
			margin: 0 12px;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr{height: 100px; object-fit: contain;}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr a {
			width: 100%;
			height: 100%;
			display: block;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr a img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container {
			animation: txmarquee_m 10s linear infinite;
		}
		.roopimgs::after {
			height: 10px;
		}
	}

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

		.roopimgs .marquee__text__list__wr { padding-top:0px;}
	
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx {
			margin: 0 12px;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr{height: 100px; object-fit: contain;}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr a {
			width: 100%;
			height: 100%;
			display: block;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container .tx .img__wr a img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.roopimgs .marquee__text__list__wr .marquee__tx__container {
			animation: txmarquee_m 10s linear infinite;
		}
		.roopimgs::after {
			height: 10px;
		}
	}

/* } roopimgs *****************************************************************************
***************************************************************************************/


/******************************************************************************
footer { ******************************************************************************* */
	/* 푸터 */
		.footer{position:relative; background:#fff; padding:120px 0;color:#111;}
		.ft__top__box{color:#111; margin-bottom: 80px;}
		.ft__top__box p{font-size:60px; line-height:60px; font-weight:400; font-family:'ClashDisplay-Variable'; word-break: keep-all;}
		.ft__bottom__box{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; justify-content: space-between; align-items: flex-end;}
		.ft__bottom__box a{color:#111;}
		.ft__bottom__box__left li{margin-bottom:16px;}
		.ft__bottom__box__left a{font-size:18px; font-weight:400; font-family:'Inter', dotum, sans-serif;}
		.ft__bottom__box__left .ft__copy__wr{margin-top:80px; opacity:0.3; font-size:18px; font-weight:400;}
		.ft__bottom__box__right li{margin-top:24px; text-align: right;}
	/* 푸터 반응형 */
		@media screen and (max-width:570px){
			.footer{
				padding:72px 0 56px;
			}

			.ft__top__box{
				margin-bottom:48px;
			}
			.ft__top__box p{
				font-size:42px;
				line-height:52px;
			}

			/* 모바일은 버튼 그룹을 먼저 노출 */
			.ft__bottom__box{
				flex-direction: column-reverse;
				align-items: flex-start;
				gap:40px;
			}

			.ft__bottom__box__right{
				width:100%;
			}
			.ft__bottom__box__right .ft__btn__ul{
				width:100%;
			}
			.ft__bottom__box__right li{
				margin-top:0;
				margin-bottom:24px;
				text-align:left;
			}
			.ft__bottom__box__right li:last-child{
				margin-bottom:0;
			}

			.ft__bottom__box__left{
				width:100%;
			}
			.ft__bottom__box__left a{
				font-size:16px;
				line-height:1.15;
			}
			.ft__bottom__box__left li{
				margin-bottom:14px;
			}
			.ft__bottom__box__left .ft__copy__wr{
				margin-top:44px;
				font-size:16px;
			}
		}

/* } footer *****************************************************************************
***************************************************************************************/

/* 게시판 뉴스일때 wrapper 배경색 변경 */
#wrapper.wrap-board-news {
    background: #333; 
}
/* } 게시판 뉴스일때 wrapper 배경색 변경 *****************************************************************************
***************************************************************************************/