@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000 }
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:6rem; font-weight:500; letter-spacing:-0.065em; color:#fff; margin-bottom:0.66em;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; letter-spacing:-0.065em; color:#fff; margin-bottom:1.25em; }
.main-visual-txt-box .main-visual-txt3{font-size:1.8rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); line-height:1.5; margin-bottom:1.66em; }
.main-visual-txt-box .main-visual-more-btn{display:inline-block; font-size:1.6rem; color:#333; padding:1.5rem 3rem; border-radius:3rem; background-color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:20px; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:5px; }
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:12px; height:12px; background-color:#fff; font-size:0; opacity:0.8;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.main-visual-con .slick-dots li.slick-active button{background-color:#000; opacity:1.0; }

/* 메인 비주얼 :: pause,play */
.main-visual-con .slick-control-btns{display:inline-block; vertical-align:top; margin-left:5px; }
.main-visual-con .slick-control-btns button{color:#fff; vertical-align:top;}
.main-visual-con .slick-control-btns button i{vertical-align:top; font-size:14px; position:relative; top:-1px;}
.main-visual-con .slick-control-btns .slick-play-btn{display:none;}

/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{	position:absolute; width:50px; top:50%;transform:translateY(-50%); border:0; cursor:pointer; z-index:9; font-size:50px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
.main-visual-con .slick-arrow.slick-prev{left:10px;}
.main-visual-con .slick-arrow.slick-next{right:10px;}

/* 메인 비주얼 :: 카운터 */
.main-visual-conuter{position:absolute; bottom:55px; left:0; width:100%; z-index:11; font-size:14px; color:#fff; letter-spacing:-0.5px; }
.main-visual-conuter span,
.main-visual-conuter .middle{display:inline-block; vertical-align:middle;}
.main-visual-conuter .middle{margin:0 10px}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-40px; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:block; color:#fff; padding-bottom:5px; letter-spacing:-0.5px; font-weight:300; }
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:center;}
.main-tit-box .main-tit{color:#040404; font-size:40px; font-weight:300; }
.main-tit-box .main-tit strong{font-weight:500;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#aaa; font-size:15px; letter-spacing:-0.75px; font-weight:300; line-height:1.5; }
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainContent1{padding:60px 0; }
.main-quick-menu-list{margin:0 -0.2%;}
.main-quick-menu-list .quick-menu-item{float:left; width:24.6%; margin:0 0.2%;}
.main-quick-menu-list .quick-menu-item a{display:block; position:relative; width:100%; padding-top:137.5%; height:0; background-color:#000; background-size:cover !important;}
.main-quick-menu-list .quick-menu-item .quick-menu-item-inner{overflow:hidden; display:block; position:absolute; top:15px; left:15px; bottom:15px; right:15px;}
.main-quick-menu-list .quick-menu-item .item-icon{display:block; position:relative; top:20%;text-align:center;}
.main-quick-menu-list .quick-menu-item .item-txt-box {position:absolute; bottom:10px; left:5%; right:5%; }
.main-quick-menu-list .quick-menu-item .item-txt-box span, 
.main-quick-menu-list .quick-menu-item .item-txt-box strong{display:block; letter-spacing:-0.25px; color:#fff; margin-bottom:10px; word-break:keep-all; text-shadow:1px 1px 1px rgba(0,0,0,0.3)}
.main-quick-menu-list .quick-menu-item .item-tit{font-size:30px; font-weight:400; }
.main-quick-menu-list .quick-menu-item .item-sub-tit{font-size:18px; font-weight:300;}
.main-quick-menu-list .quick-menu-item .item-sub-txt{font-size:14px; opacity:0.5;filter:Alpha(opacity=50); line-height:20px;}
/* over style */
.main-quick-menu-list .quick-menu-item .over-thum{
    position:absolute; top:0px; left:0px; width:100%; height:100%; 
    opacity:0;filter:Alpha(opacity=0);
    transition:var(--transition-custom);
}
.main-quick-menu-list .quick-menu-item .over-thum::before,
.main-quick-menu-list .quick-menu-item .over-thum::after {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    content: '';
    opacity: 0;
	transition:var(--transition-custom);
	transition-property: opacity, transform;
}
.main-quick-menu-list .quick-menu-item .over-thum::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.main-quick-menu-list .quick-menu-item .over-thum::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

.main-quick-menu-list .quick-menu-item a:hover .over-thum{opacity:1.0;filter:Alpha(opacity=100);}
.main-quick-menu-list .quick-menu-item a:hover .over-thum::before,
.main-quick-menu-list .quick-menu-item a:hover .over-thum::after {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.main-quick-menu-list .quick-menu-item a:hover .gal-thum img{transform: scale(1.1) rotate(0.02deg);}

/* -------- 메인 컨텐츠 :: 컨텐츠2(갤러리) -------- */
#mainContent2{padding:60px 0; background-color:#f2f2f2;}
.main-news-list{margin:0 -0.5%;}
.main-news-list li{float:left; width:32.33%; margin:0 0.5%;}
.main-news-list li a{display:block; padding-bottom:20px; transition:var(--transition-custom);}
.main-news-list li .bbs-inner-thumb{overflow:hidden; position:relative; display:block; height:0; padding-top:67.5%; background-color:#2f2f2f}
.main-news-list li .bbs-inner-thumb img{
	position:absolute; top:0px; left:0px; width:100%; height:100%; 
	transition:var(--transition-custom);
}
.main-news-list li .bbs-inner-con{
	position:relative; z-index:1; background:#fff; margin:-60px 20px 0; padding:15px 20px 40px; border-bottom:1px solid #c9c9c9; letter-spacing:-0.5px;
	transition:var(--transition-custom);
}
.main-news-list li .bbs-inner-con .bbs-category{display:inline-block; padding:5px 10px 7px; color:#fff; font-weight:300; font-size:14px; letter-spacing:-0.3px; background-color:#383838;}
.main-news-list li .bbs-inner-con .bbs-tit{overflow:hidden; display:block; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#17100c; font-size:24px; line-height:30px; font-weight:400; margin:18px 0;}
.main-news-list li .bbs-inner-con .bbs-content{overflow:hidden; height:88px; color:#727272; font-size:14px; letter-spacing:-0.75px; line-height:22px; word-break:keep-all;}
.main-news-list li a:hover{}
.main-news-list li a:hover .bbs-inner-thumb img{transform:scale(1.06);}
.main-news-list li a:hover .bbs-inner-con{padding-left:25px; padding-right:15px;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(갤러리 슬라이드) -------- */
#mainContent3{padding:60px 0;}
.main-gallery-rolling-con .bbs-basic-gallery-con{overflow:visible; margin:0 -8px;}
.main-gallery-rolling-con .bbs-basic-gallery-con li{width:auto; margin:0 8px;}
/* 컨텐츠3 :: 화살표 */
.main-gallery-rolling-con .slick-arrow{position:absolute; top:50%; margin-top:-18px; cursor:pointer; border:0; cursor:pointer; z-index:9; font-size:0;}
.main-gallery-rolling-con .slick-arrow i{font-size:36px; color:#2f2f2f}
.main-gallery-rolling-con .slick-arrow.slick-prev{left:-36px; }
.main-gallery-rolling-con .slick-arrow.slick-next{right:-36px; }


/* -------- 메인 컨텐츠 :: 컨텐츠4(갤러리 + 설명 슬라이드) -------- */
#mainContent4{padding:60px 0;}
.main-slide-photo-con{float:left; width:50%}
.main-slide-photo-item .slide-photo-inner{position:relative; height:0; padding-top:60%; background-color:#111; }
.main-slide-text-con{float:left; width:43%; margin-left:5%; margin-right:2%; z-index:1;}
.main-slide-text-item .main-slide-tit{display:block; color:#17100c; font-size:24px; font-weight:400; margin-bottom:25px}
.main-slide-text-item .main-slide-txt{color:#727272; font-size:14px; line-height:24px; letter-spacing:-0.75px; word-break:keep-all; margin-bottom:65px;}
.main-slide-text-item .main-slide-btn{display:inline-block; width:90px; height:30px; font-size:14px; border:1px solid #383838; color:#fff; background-color:#383838; text-align:center; line-height:30px; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.main-slide-text-item .main-slide-btn:hover{color:#333; background-color:#fff;}
/* 컨텐츠3 :: 화살표 */
.main-slide-photo-con .slick-arrow{position:absolute; top:50%; margin-top:-18px; cursor:pointer; border:0; cursor:pointer; z-index:9; font-size:0;}
.main-slide-photo-con .slick-arrow i{font-size:36px; color:#fff}
.main-slide-photo-con .slick-arrow.slick-prev{left:0; }
.main-slide-photo-con .slick-arrow.slick-next{right:0; }


/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
#mainContent5{padding:110px 0 120px; background:url(/images/main/main_visual_01.jpg) no-repeat 50% 50%; background-size:cover; }
body:not(.ie-browser) #mainContent5{background-attachment:fixed}
.main-fixed-con{text-align:center; padding:0 15px; font-size:13px; letter-spacing:-0.55px;}
.main-fixed-con .main-fixed-sub-tit{color:#fff; font-size:1.923em; padding-bottom:1.6em}
.main-fixed-con .main-fixed-tit{color:#fff; font-size:2.923em; font-weight:300; letter-spacing:-1px; padding-bottom:1.0em;}
.main-fixed-con .main-fixed-txt{color:#fff; font-size:1.154em; letter-spacing:-0.75px; line-height:2; opacity:0.7;filter:Alpha(opacity=70); padding-bottom:1.0em; word-break:keep-all}
.main-fixed-con .main-fixed-more-btn{display:block; width:200px; height:48px; line-height:48px; color:#fff; font-size:1.231em; font-weight:300; margin:0px auto; border:1px solid #fff; border-color:rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.2)}
.main-fixed-con .main-fixed-more-btn:hover{background-color:#333;}

/* -------- 메인 컨텐츠 :: 컨텐츠6(사각, 원 배너들) -------- */
/* 배너 :: 사각배너 */
.main-banner-list-con{overflow:hidden; margin:0 -2%;}
.main-banner-list-con li{float:left; width:46%; margin:2%;}
.main-banner-list-con li a{display:block; position:relative; height:0; padding-top:47%; background-color:#111;}
.main-banner-list-con li .banner-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-banner-list-con li .banner-thumb img{width:100%; height:100%;}
.main-banner-list-con li .banner-inner-box{position:absolute; bottom:10%; left:20px; font-size:16px; letter-spacing:-0.55px; color:#fff;}
.main-banner-list-con li .banner-inner-box .banner-tit{font-size:1.563em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-tit{display:block; font-size:1.125em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:block; font-size:0.813em; opacity:0.5;filter:Alpha(opacity=50);}

/* -------- 메인 컨텐츠 :: 컨텐츠7(100% 풀배너) -------- */
#mainContent7{padding:60px 0;}
.main-full-banner-box{position:relative; width:100%; overflow:hidden; background-color:#3c3c3c;}
.main-full-banner-box .main-full-banner-left{}
.main-full-banner-box .main-full-banner-right{position:absolute; top:0px; left:50%; width:100%; height:100%; background:#080808;}
.main-full-banner-box .full-banner-inner{width:100%; max-width:600px; padding:100px 0; text-align:center; color:#fff; letter-spacing:-0.25px;}
.main-full-banner-box .full-banner-inner strong{display:block; font-weight:300; font-size:24px; padding-bottom:25px;}
.main-full-banner-box .full-banner-inner p{font-size:15px; line-height:26px; letter-spacing:-0.75px; opacity:0.4;filter:Alpha(opacity=40);}


/* -------- 메인 컨텐츠 :: 컨텐츠8(Global Network) -------- */
#mainContent8{padding:60px 0; background-color:#2f2f2f;}
#mainContent8 .main-tit strong{color:#fff;}
.global-map-con{position:relative;}
.global-map-con-m{display:none;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
@keyframes nation-circle {
 0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}
.nation-circle{position:absolute; left:50%; top:0; display:inline-block; width:80px; height:80px;}
.nation-circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle > span {
	border:1px solid rgba(255, 255, 255, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.nation-circle i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:#fff; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
	opacity:0.7;filter:Alpha(opacity=70);
}
.nation-circle p{position:absolute; top:50%; left:50%; width:300px; height:30px; margin:-8px 0 0 20px; color:#fff; opacity:0.7;filter:Alpha(opacity=70);}



/* -------- 메인 컨텐츠 :: 컨텐츠9(공지사항 게시판 + 배너) -------- */
#mainContent9{padding:60px 0; }
/* 컨텐츠 9 :: 공지사항 */
.main-board-box{position:relative; float:left; width:47%}
.main-board-box .main-board-tit{color:#17100c; font-size:24px; letter-spacing:-0.1px; font-weight:400; padding-bottom:25px; border-bottom:2px solid #333;}
.main-board-con{padding-top:25px;}
.main-board-con li{overflow:hidden; position:relative; padding-left:15px; margin-top:20px;}
.main-board-con li:first-child{margin-top:0;}
.main-board-con li:before{display:block; content:""; width:3px; height:3px; background-color:#2a2a2a; position:absolute; top:7px; left:0px;}
.main-board-con li .bbs-tit{display:block; float:left; width:80%; color:#727272; font-size:15px; letter-spacing:-0.75px; height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-board-con li .bbs-date{float:right; width:20%; color:#727272; letter-spacing:-0.5px; text-align:right;}
.main-board-box .board-more-btn{position:absolute; top:0px; right:0px; color:#000;  }
.main-board-box .board-more-btn i{font-size:30px}
/* 컨텐츠 9 :: 배너 */
.main-board-banner-con{float:right; width:47%;}
.main-board-banner-con ul{overflow:hidden; margin:0 -2%;}
.main-board-banner-con ul li{float:left; width:46%; margin:0 2%;}
.main-board-banner-con ul li a{display:block; position:relative; }
.main-board-banner-con ul li a .main-board-banner-thumb{display:block; overflow:hidden; position:relative; height:0; padding-top:100%; background:#333;}
.main-board-banner-con ul li a .main-board-banner-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-board-banner-con ul li a:hover .main-board-banner-thumb img{transform:scale(1.06);}
.main-board-banner-con ul li a .main-board-thumb-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.main-board-banner-con ul li a .main-board-thumb-cover p{display:table; width:100%; height:100%; }
.main-board-banner-con ul li a .main-board-thumb-cover p strong{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; color:#fff; font-size:16px; font-weight:300;}


/* -------- 메인 컨텐츠 :: 컨텐츠10(Swiper 예제) -------- */
#mainContent10{padding:60px 0; background-color:#f2f2f2;}
.main-gallery-rolling-con2 .bbs-basic-gallery-con{overflow:visible;}
.main-gallery-rolling-con2 .bbs-basic-gallery-con,
.main-gallery-rolling-con2 .bbs-basic-gallery-con li {margin:0}
.main-gallery-rolling-con2 .bbs-basic-gallery-con li a .gallery-txt-con{background-color:#fff;}
/* 메인 갤러리 :: Swiper Controls */
.main-news-swiper-controls {display:flex; justify-content:space-between; align-items:center; margin-top:30px;}
.main-news-swiper-controls .swiper-scrollbar {position:relative; width:calc(100% - 100px); height:1px; background-color:#d5d5d5; margin-right:30px;}
.main-news-swiper-controls .swiper-scrollbar-drag {height:5px; background-color:#505050; margin-top:-1.5px; cursor:pointer;}
.main-news-swiper-controls i {font-size:30px; color: #5a5a5a;}
.main-news-swiper-controls .swiper-button-disabled{opacity:0.5; cursor:default;}

/* -------- 메인 컨텐츠 :: 컨텐츠11(배경애니메이션) -------- */
#mainContent11:not(.section){height:100vh; display:flex; align-items:center;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; }
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; 
	top:55%; right:2%; 
	z-index:99; 
	margin-top:-142px;
	opacity:0;
	visibility:hidden;
	transition:var(--transition-custom2);
}
#rightBar.fixed{visibility:visible; opacity:1.0; top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff; transition:var(--transition-custom);}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:50px;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; opacity:0.2;filter:Alpha(opacity=20);}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	transition:var(--transition-custom);
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

/* Black Style */
#fp-nav.black ul li a span{background-color:#000}
#fp-nav.black ul li .fp-tooltip{color:#222;}
/* ========================================================
 * PERCEPT MAIN (Figma 실측 기반 — 1920 시안, 중앙기준 calc(50%±Nrem) 배치)
======================================================== */
#mainContainer{position:relative;}	/* 배경 투명 — 사이트 공통 fixed 영상 레이어(.site-bg)가 비치도록 */

/* -------- 인트로 (Intro A 실측: 1920×960) -------- */
#introCover{position:fixed; inset:0; z-index:100000; background-color:#000; overflow:hidden;}
#introCover.hide{opacity:0; visibility:hidden; transition:opacity 0.8s ease, visibility 0.8s ease;}
/* 시안(1091:914) 실측: 영상(Firefly 대체)은 1414×796 중앙 박스(y112) — 풀블리드 아님 */
#introCover .intro-bg{position:absolute; left:50%; top:11.2rem; transform:translateX(-50%); width:141.4rem; height:79.6rem; overflow:hidden; background-color:#000;}
#introCover .intro-bg .intro-bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* 커버 ① (시안 1129:256 실측 — 영상 박스 위): 상단 13%·하단 14% 블랙 페이드 + 타원 비네트(620×1103)
   → 영상 경계가 배경 어둠에 자연스럽게 녹아듦 */
#introCover .intro-bg:after{
	position:absolute; inset:0; content:"";
	background:
		linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 13.3%),
		linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 14.3%),
		radial-gradient(62rem 110.3rem at 50% 50%, rgba(0,0,0,0) 0%, #000 100%);
}
/* 커버 ② (시안 1091:917 — 화면 전체): hue #BD8F6E 70% — 검정 위에선 무변화, 영상 색조만 통일 */
#introCover .intro-hue{position:absolute; inset:0; background-color:#bd8f6e; mix-blend-mode:hue; opacity:0.7;}

/* -------- 인트로 입장 시퀀스 --------
   영상(확대→정착 시네마틱) → 로고 하강 → EX/TS 카드 좌우 결합 → 오렌지 엣지 점화 → 카피 페이드업.
   각 요소의 base transform(-50% 센터링)을 키프레임에 포함해 위치 튐 방지. fill은 backwards만 사용 */
#introCover .intro-bg{animation:introBg 1.5s cubic-bezier(0.22,0.61,0.36,1) 0.2s backwards;}
@keyframes introBg{
	from{opacity:0; transform:translateX(-50%) scale(1.06);}
	to{opacity:1; transform:translateX(-50%) scale(1);}
}
#introCover .intro-logo{animation:introLogo 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.7s backwards;}
@keyframes introLogo{
	from{opacity:0; transform:translate(-50%, -300%);}
	to{opacity:1; transform:translate(-50%, -50%);}
}
#introCover .intro-ex{animation:introCardL 0.9s cubic-bezier(0.34,1.2,0.64,1) 0.95s backwards;}
#introCover .intro-ts{animation:introCardR 0.9s cubic-bezier(0.34,1.2,0.64,1) 0.95s backwards;}
@keyframes introCardL{
	from{opacity:0; transform:translateX(-7rem);}
	to{opacity:1; transform:translateX(0);}
}
@keyframes introCardR{
	from{opacity:0; transform:translateX(7rem);}
	to{opacity:1; transform:translateX(0);}
}
#introCover .intro-card:before{animation:introEdge 0.9s ease 1.6s backwards, introEdgeSpin 1.6s cubic-bezier(0.37,0,0.63,1) 1.6s backwards;}	/* 결합 직후 엣지 점화 + 그라데이션 1회전 (sine in-out — 양끝 소프트) */
@keyframes introEdge{
	from{opacity:0;}
	to{opacity:1;}
}
/* 엣지 그라데이션 회전각 (등록 프로퍼티 — 미지원 브라우저는 회전 없이 정지 상태로 폴백) */
@property --edge-angle{syntax:"<angle>"; initial-value:0deg; inherits:false;}
@keyframes introEdgeSpin{
	from{--edge-angle:-360deg;}
	to{--edge-angle:0deg;}
}
#introCover .intro-copy{animation:introCopy 0.8s cubic-bezier(0.22,0.61,0.36,1) 1.45s backwards;}
@keyframes introCopy{
	from{opacity:0; transform:translate(-50%, 2rem);}
	to{opacity:1; transform:translate(-50%, 0);}
}
@media (prefers-reduced-motion: reduce){
	#introCover .intro-bg, #introCover .intro-logo, #introCover .intro-ex, #introCover .intro-ts,
	#introCover .intro-card:before, #introCover .intro-copy{animation:none;}
	#introCover .intro-card:before{transition:none;}	/* 엣지 회전(호버 포함) 정지 */
}
#introCover .intro-logo{position:absolute; top:8rem; left:50%; transform:translate(-50%,-50%); width:16.4rem;}
#introCover .intro-logo img{display:block; width:100%;}
/* EX/TS 카드 (실측: 640×360 radius30 border 오렌지 + 그라데이션, gap40, hover 시 이미지 노출) */
#introCover .intro-card-con{position:absolute; top:32.7%; left:50%; transform:translateX(-50%); display:flex; gap:4rem;}
#introCover .intro-card{
	position:relative; width:64rem; height:36rem; box-sizing:border-box; overflow:hidden; cursor:pointer;	/* 클릭 = 메인 이동 버튼 */
	border-radius:3rem;
	background-image:linear-gradient(144deg, rgba(241,90,44,0.2) 0%, rgba(241,90,44,0) 100%);
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);	/* 사이트 공통 경량 글라스 */
}
/* 시안 렌더 실측: 엣지는 통보더가 아니라 모서리에서만 밝아지는 오렌지 그라데이션 1px —
   다른 글라스 엣지와 동일한 마스크 XOR 방식 (좌상 밝음 → 중간 소멸 → 우하 재점화) */
#introCover .intro-card:before{
	position:absolute; inset:0; z-index:3; border-radius:3rem; padding:1px; content:""; pointer-events:none;
	--edge-angle:0deg;
	/* 폴백 (conic 미지원 구형): 기존 고정 linear 엣지 */
	background:linear-gradient(145deg,
		rgba(241,90,44,0.95) 0%, rgba(241,90,44,0.3) 16%, rgba(241,90,44,0) 38%,
		rgba(241,90,44,0) 60%, rgba(241,90,44,0.35) 82%, rgba(241,90,44,0.8) 100%);
	/* conic 재구성 (linear 145deg 대비 동일 휴지 상태: 좌상 최대 피크 299deg + 우하 재점화 119deg — 640×360 코너 각도 실측)
	   --edge-angle 회전으로 등장/호버 시 한 바퀴 돌림 */
	background:conic-gradient(from var(--edge-angle),
		rgba(241,90,44,0.22) 0deg, rgba(241,90,44,0) 25deg,
		rgba(241,90,44,0) 75deg, rgba(241,90,44,0.8) 119deg, rgba(241,90,44,0) 165deg,
		rgba(241,90,44,0) 220deg, rgba(241,90,44,0.95) 299deg, rgba(241,90,44,0.22) 360deg);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
	transition:--edge-angle 1.8s cubic-bezier(0.37,0,0.63,1);	/* 호버 1회전 — 느긋한 sine in-out (아웃 시 역방향 되감김) */
}
#introCover .intro-card:hover:before{--edge-angle:360deg;}
#introCover .intro-card .card-img{position:absolute; inset:0; background-size:cover; background-position:50% 50%; opacity:0; transition:opacity 0.5s ease;}
#introCover .intro-card:hover .card-img{opacity:1;}
#introCover .intro-card.intro-ts .card-img:after{position:absolute; inset:0; background-color:rgba(0,0,0,0.2); content:"";}
#introCover .card-text{position:relative; display:flex; align-items:center; justify-content:center; gap:3.6rem; height:100%; color:#fff;}
#introCover .card-text .big{font-size:10rem; font-weight:600; line-height:1;}
#introCover .card-text .label{font-size:2.4rem; font-weight:600; letter-spacing:0.02em; line-height:1.2; text-transform:uppercase;}
#introCover .card-text .label em{color:var(--main-color); font-style:normal; font-weight:600;}
#introCover .intro-copy{position:absolute; bottom:8rem; left:50%; transform:translateX(-50%); color:#fff; font-size:1.6rem; font-weight:500; line-height:1;}

/* -------- 메인 비주얼 (실측 1920×960) -------- */
#mainVisual{position:relative; height:100vh; overflow:hidden;}
/* 심볼 (실측: P+ union 마스크 600×600 + 영상 텍스처 1067×600 + 오렌지 피스 132×133) */
#mainVisual .mv-symbol{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:60rem; height:60rem;}
#mainVisual .mv-symbol .symbol-texture{
	display:block; position:absolute; inset:0; overflow:hidden;
	-webkit-mask:url("../images/main/symbol_mask.svg") no-repeat 50% 50%/100% 100%; mask:url("../images/main/symbol_mask.svg") no-repeat 50% 50%/100% 100%;
}
#mainVisual .mv-symbol .symbol-texture img,
#mainVisual .mv-symbol .symbol-texture .symbol-gl{position:absolute; left:-20.9rem; top:0; width:106.7rem; height:60rem; max-width:none;}	/* 실측: 텍스처 1067×600 at x-209 */
#mainVisual .mv-symbol .symbol-gl video{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; max-width:none;}
/* 관리자 메인 영상 관리(2026-09-16): 업로드 이미지 / Vimeo·YouTube iframe — 같은 1067×600(16:9) 슬롯에 채움. 외부 영상은 3D 미가동이라 마스크 안 2D 로 표시(포인터 차단) */
#mainVisual .mv-symbol .symbol-gl img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; max-width:none;}
#mainVisual .mv-symbol .symbol-gl iframe{position:absolute; left:0; top:0; width:100%; height:100%; border:0; pointer-events:none; background:#000;}
#mainVisual .mv-symbol .symbol-texture.mv-embed{background:#000;}
#mainVisual .mv-symbol .symbol-piece{
	position:absolute; left:0; top:30.57rem; width:13.26rem; height:13.29rem;
	background:url("../images/main/symbol_piece.svg") no-repeat 50% 50%/contain;
}
/* -------- 메인 진입 시퀀스 (body.mv-entrance — 메인에서만, 첫 페인트 전 인라인 스크립트로 부여) --------
   B안 조립형: 텍스처(영상)가 P 마스크 안에서 아래→위 와이프로 차오르고,
   오렌지 피스가 좌하단에서 날아와 스냅 결합 → 헤더(위→아래) / Scroll down(좌→우) / SNS·문의(우→좌) 캐스케이드.
   ※ 전부 fill:backwards만 사용 — forwards/both는 애니 종료 후에도 그룹핑이 남아
     내부 backdrop-filter(헤더 글라스 등)를 죽인다 (pageFadeIn 사고와 동일 원리). */
body.mv-entrance #mainVisual .mv-symbol{
	animation:entSymbolFade 0.5s ease-out 0.15s backwards,
		symbolFloat 7s ease-in-out 2.4s infinite;	/* 조립 완료 후 미세 부유 (심볼엔 글라스 없음 — 그룹핑 무해) */
}
@keyframes entSymbolFade{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes symbolFloat{
	0%, 100%{transform:translate(-50%, -50%);}
	50%{transform:translate(-50%, calc(-50% -0.8rem));}
}
/* 피스 진입 (B안 조립 스냅) */
body.mv-entrance #mainVisual .mv-symbol .symbol-piece{animation:entPiece 0.9s cubic-bezier(0.34,1.56,0.64,1) 0.85s backwards;}

/* -------- 히어로 → Works 연결 전환 (PC) --------
   히어로가 sticky로 제자리에 머물고 Works가 위로 덮어 올라옴. main.js가 스크롤 진행도(--hx 0~1)를
   실시간 주입 → 요소별로 "진입의 역방향"으로 흩어지며 물러나는 안무 (되감으면 역순 복귀).
   심볼(3D)은 모듈이 진행도를 받아 뒤로 후퇴+역회전. 전체 컨테이너는 마지막에만 가볍게 디졸브 */
@media all and (min-width:1281px){
	#mainVisual{position:sticky; top:0; z-index:0;}
	#mainWorks{position:relative; z-index:2;}
	#mainArticle{position:relative; z-index:2;}
	/* 요소별 퇴장 안무 — 진입 방향의 역재생 (entRise/entLeft/entRightSns 종료 후 base transform으로 적용됨) */
	#mainVisual .mv-headline{transform:translateX(calc(var(--hx, 0) * -16rem)); opacity:calc(1 - var(--hx, 0) * 1.6);}
	#mainVisual .mv-copy{transform:translate(calc(var(--hx, 0) * 12rem), calc(var(--hx, 0) * 5rem)); opacity:calc(1 - var(--hx, 0) * 1.6);}
	#mainVisual .mv-sns{transform:translateY(-50%) translateX(calc(var(--hx, 0) * 10rem)); opacity:calc(1 - var(--hx, 0) * 1.9);}
	#mainVisual .mv-scroll{transform:translateX(calc(var(--hx, 0) * -10rem)); opacity:calc(1 - var(--hx, 0) * 2.2);}
}
/* -------- 심볼 WebGL 유체 디스토션 (curtains.js — js/common/cm_symbol_gl.js) --------
   마우스 궤적을 따라 영상 텍스처가 유체처럼 일렁임. gl-on이면 원본 video는 텍스처 소스로만 쓰고 숨김.
   WebGL 실패/모바일/reduced-motion은 video 폴백 그대로. */
#mainVisual .mv-symbol .symbol-texture.gl-on video{opacity:0;}
#mainVisual .mv-symbol .symbol-texture canvas{position:absolute; inset:0; pointer-events:none;}
/* 헤드라인: 글자별 캐스케이드 (2026-08-19 사용자 지시 — 한 글자씩 촤라락). 컨테이너 entRise 대신 .ch 각각이 --i 순차 지연으로 떠오름 (P 정착 활강 1.0~2.0s에 겹쳐 시작) */
#mainVisual .mv-headline .word{display:inline-block; white-space:nowrap;}
#mainVisual .mv-headline .ch{display:inline-block; will-change:transform, opacity;}
body.mv-entrance #mainVisual .mv-headline .ch{animation:chRise 0.75s cubic-bezier(0.22,0.61,0.36,1) calc(1.05s + var(--i, 0) * 0.05s) backwards;}
@keyframes chRise{
	from{opacity:0; transform:translateY(0.6em) rotate(6deg); filter:blur(6px);}
	60%{filter:blur(0);}
	to{opacity:1; transform:translateY(0) rotate(0); filter:blur(0);}
}
body.mv-entrance #mainVisual .mv-copy{animation:entRise 1.1s cubic-bezier(0.22,0.61,0.36,1) 1.25s backwards;}
@keyframes entRise{
	from{opacity:0; transform:translateY(4rem);}
	to{opacity:1; transform:translateY(0);}
}
/* 카피 본문: 처음부터 반투명(25%) 상태로 떠오르고(컨테이너 entRise), 흰색은 칩(c1~c6)의 차오름이 담당 — 2026-08-19 사용자 지시 (구 copySettle: 흰색→25% 가라앉음 제거) */
body.mv-entrance #mainVisual .mv-copy .copy-base{animation:none;}
/* 카피 본문 글자별 캐스케이드 (헤드라인과 동일 계열, 더 빠른 간격 25ms) — 반투명 상태 그대로 한 글자씩 떠오름 (2026-08-19 사용자 지시) */
#mainVisual .mv-copy .copy-base .ch{display:inline-block; will-change:transform, opacity;}
body.mv-entrance #mainVisual .mv-copy .copy-base .ch{animation:copyCh 0.5s cubic-bezier(0.22,0.61,0.36,1) calc(1.25s + var(--i, 0) * 0.025s) backwards;}
@keyframes copyCh{
	from{opacity:0; transform:translateY(0.5em); filter:blur(4px);}
	to{opacity:1; transform:translateY(0); filter:blur(0);}
}
/* 칩(하이라이트 단어): 반투명 본문 위로 흰색이 아래에서 차오르는 필 — 읽는 순서(윗줄 c1→c3→c5, 아랫줄 c2→c4→c6)로 순차 (2026-08-19 사용자 지시) */
body.mv-entrance #mainVisual .mv-copy .chip{animation:chipFill 0.9s cubic-bezier(0.22,0.61,0.36,1) 2.4s backwards;}	/* 글자 캐스케이드(1.25~2.75s) 뒤이어 차오름 */
body.mv-entrance #mainVisual .mv-copy .c1{animation-delay:2.4s;}
body.mv-entrance #mainVisual .mv-copy .c3{animation-delay:2.6s;}
body.mv-entrance #mainVisual .mv-copy .c5{animation-delay:2.8s;}
body.mv-entrance #mainVisual .mv-copy .c2{animation-delay:3.0s;}
body.mv-entrance #mainVisual .mv-copy .c4{animation-delay:3.2s;}
body.mv-entrance #mainVisual .mv-copy .c6{animation-delay:3.4s;}
@keyframes chipFill{
	from{opacity:0.35; clip-path:inset(100% 0 0 0);}
	to{opacity:1; clip-path:inset(0 0 0 0);}
}
body.mv-entrance #mainVisual .mv-symbol .symbol-texture{animation:entSymbolWipe 1.3s cubic-bezier(0.65,0,0.35,1) 0.25s backwards;}
@keyframes entSymbolWipe{	/* 마스크 와이프 — 아래에서 차오름 (P 마스크와 clip-path 합성) */
	from{clip-path:inset(100% 0 0 0);}
	to{clip-path:inset(0 0 0 0);}
}
/* (피스 진입 애니는 아래 "3D 레이어 패럴랙스" 절에서 pieceGlow와 함께 선언) */
@keyframes entPiece{	/* 좌하단에서 날아와 결합 (백아웃 스냅) */
	from{opacity:0; transform:translate(-14rem, 6rem) rotate(-6deg) scale(1.12);}
	to{opacity:1; transform:translate(0, 0) rotate(0deg) scale(1);}
}
body.mv-entrance #header{animation:entDown 0.9s cubic-bezier(0.22,0.61,0.36,1) 1.45s backwards;}
@media all and (max-width:1280px){
	/* 모바일: 하강 대신 순수 페이드 — 3D 초기화와 겹칠 때 프레임 드랍이 위치 점프("띡")로 보이는 것 차단 */
	body.mv-entrance #header{animation-name:entFadeOnly;}
}
@keyframes entFadeOnly{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes entDown{
	from{opacity:0; transform:translateY(-100%);}
	to{opacity:1; transform:translateY(0);}
}
body.mv-entrance #mainVisual .mv-scroll{animation:entLeft 0.9s cubic-bezier(0.22,0.61,0.36,1) 1.6s backwards;}
@keyframes entLeft{
	from{opacity:0; transform:translateX(-6rem);}
	to{opacity:1; transform:translateX(0);}
}
body.mv-entrance #mainVisual .mv-sns{animation:entRightSns 0.9s cubic-bezier(0.22,0.61,0.36,1) 1.6s backwards;}
body.mv-entrance #mainQuick{animation:entRight 0.9s cubic-bezier(0.22,0.61,0.36,1) 1.75s backwards;}
@keyframes entRight{
	from{opacity:0; transform:translateX(6rem);}
	to{opacity:1; transform:translateX(0);}
}
@keyframes entRightSns{	/* mv-sns는 기본 transform이 translateY(-50%) — 수직 센터 유지한 채 우→좌 */
	from{opacity:0; transform:translateY(-50%) translateX(6rem);}
	to{opacity:1; transform:translateY(-50%) translateX(0);}
}
@media (prefers-reduced-motion: reduce){
	body.mv-entrance #mainVisual .mv-symbol, body.mv-entrance #mainVisual .mv-symbol .symbol-texture,
	body.mv-entrance #mainVisual .mv-symbol .symbol-piece,
	body.mv-entrance #mainVisual .mv-headline, body.mv-entrance #mainVisual .mv-headline .ch, body.mv-entrance #mainVisual .mv-copy,
	body.mv-entrance #mainVisual .mv-copy .copy-base, body.mv-entrance #mainVisual .mv-copy .copy-base .ch, body.mv-entrance #mainVisual .mv-copy .chip,
	body.mv-entrance #mainVisual .mv-copy:after,
	body.mv-entrance #header, body.mv-entrance #mainVisual .mv-scroll,
	body.mv-entrance #mainVisual .mv-sns, body.mv-entrance #mainQuick,
	#mainVisual .mv-symbol .symbol-texture:after,
	#mainVisual .mv-symbol:hover .symbol-piece{animation:none;}
}

/* 대형 타이포 (실측 ExtraBold 72 uppercase 우측정렬, gap10) */
#mainVisual .mv-headline{
	position:absolute; right:calc(50% + 20.7rem); top:28rem;
	color:#fff; font-size:7.2rem; font-weight:800; line-height:1.13; text-align:right; text-transform:uppercase;
}
/* 우하단 카피 (실측: Bold 32 lh1.5 op25 + 텍스트마스크 화이트 칩 6개) */
#mainVisual .mv-copy{position:absolute; left:calc(50% + 2.2rem); top:68.5rem; width:52.4rem; height:9.6rem;}
#mainVisual .mv-copy .copy-base{
	position:absolute; left:0.2rem; top:50%; transform:translateY(-50%);
	color:#fff; opacity:0.25; font-size:3.2rem; font-weight:600; letter-spacing:0.02em; line-height:1.5; text-transform:uppercase; white-space:nowrap;
}
#mainVisual .mv-copy .chip{
	position:absolute; width:5.9rem; height:3.4rem; background-color:#fff;
	-webkit-mask:url("../images/main/banner_txt_mask.svg") no-repeat; mask:url("../images/main/banner_txt_mask.svg") no-repeat;
	-webkit-mask-size:51.9rem 7.65rem; mask-size:51.9rem 7.65rem;
}
#mainVisual .mv-copy .c1{left:0; top:0.7rem; -webkit-mask-position:0.29rem 0.34rem; mask-position:0.29rem 0.34rem;}
#mainVisual .mv-copy .c2{left:0; top:5.6rem; -webkit-mask-position:0.29rem -4.56rem; mask-position:0.29rem -4.56rem;}
#mainVisual .mv-copy .c3{left:9.1rem; top:0.7rem; -webkit-mask-position:-8.81rem 0.34rem; mask-position:-8.81rem 0.34rem;}
#mainVisual .mv-copy .c4{left:9.1rem; top:5.6rem; -webkit-mask-position:-8.81rem -4.56rem; mask-position:-8.81rem -4.56rem;}
#mainVisual .mv-copy .c5{left:30.8rem; top:0.7rem; width:5.8rem; -webkit-mask-position:-30.51rem 0.34rem; mask-position:-30.51rem 0.34rem;}
#mainVisual .mv-copy .c6{left:30.7rem; top:5.6rem; width:5.8rem; -webkit-mask-position:-30.41rem -4.56rem; mask-position:-30.41rem -4.56rem;}
/* SNS (실측: right85 중앙, 24px, gap24, CF 뱃지) */
#mainVisual .mv-sns{position:absolute; right:8.5rem; top:50%; transform:translateY(-50%);}	/* 시안 실측 x1806 — 메인 헤더 80px 인셋 그리드(사이트맵 중심 1820)와 정렬 */
#mainVisual .mv-sns li{margin-top:2.4rem; text-align:center;}
#mainVisual .mv-sns li:first-child{margin-top:0;}
#mainVisual .mv-sns li a{display:block; color:#fff;}
#mainVisual .mv-sns li a i{font-size:2.4rem; line-height:1; transition:var(--transition-custom);}
#mainVisual .mv-sns li a:hover i{color:var(--main-color);}
#mainVisual .mv-sns .cf-badge{
	display:block; padding:0.6rem 0.4rem; background-color:#fff; border:1px solid #fff;
	color:#000; font-family:var(--font-family2); font-size:1.6rem; font-weight:600; line-height:1;
	transition:var(--transition-custom);
}
#mainVisual .mv-sns .cf-badge:hover{background-color:var(--main-color); border-color:var(--main-color); color:#fff;}
/* Scroll down (실측: left80 top800 80×80, 세로라인 1px) */
#mainVisual .mv-scroll{position:absolute; left:8rem; bottom:8rem; width:8rem; height:8rem; overflow:hidden;}
#mainVisual .mv-scroll .line{position:absolute; left:0; top:0; width:1px; height:8rem; background-color:#fff;}
#mainVisual .mv-scroll .line:after{
	position:absolute; left:0; top:-100%; width:100%; height:100%; background-color:var(--main-color); content:"";
	animation:mvScrollLine 2.2s ease-in-out infinite;
}
#mainVisual .mv-scroll b{
	position:absolute; left:1.7rem; bottom:-0.7rem;
	color:#fff; font-size:1.4rem; font-weight:600; letter-spacing:0.02em; line-height:1.7; text-transform:uppercase;
}
@keyframes mvScrollLine{
	0%{top:-100%;}
	50%{top:0;}
	100%{top:100%;}
}

/* -------- Works 쇼케이스 (실측: 1840 밴드, 블록 880h, 간격 120) -------- */
#mainWorks{position:relative;}
.main-works-block{position:relative; height:88rem; margin-top:12rem; z-index:1;}
/* 스택 커버 스크롤: 블록이 뷰포트 중앙에 핀 고정 → 다음 블록이 덮어씀 (JS가 덮이는 블록에 scale·밝기 후퇴감 부여) */
@media all and (min-width:801px){
	.main-works-block{
		position:-webkit-sticky; position:sticky; top:max(0rem, calc(50vh - 44rem));
		will-change:transform;
	}
}
.main-works-block:first-of-type{margin-top:0;}
.main-works-block .block-media{position:absolute; left:0; right:0; top:4rem; height:84rem; overflow:hidden; background-color:#000;}
.main-works-block .block-media img{
	width:100%; height:100%; object-fit:cover;
	transition:transform 1.2s cubic-bezier(0.22,0.61,0.36,1), filter 0.6s ease;	/* 배너=버튼 피드백 (View 커서와 세트) */
}
.main-works-block:hover .block-media img{transform:scale(1.04); filter:brightness(1.08);}
.main-works-block .block-media:after{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%); content:"";}
.main-works-block .block-cate{
	position:absolute; left:8rem; top:12rem; transform:translateY(-100%); z-index:2;
	color:#fff; font-family:var(--font-family2); font-size:1.8rem; font-weight:600; letter-spacing:-0.01em; line-height:1.2;
}
.main-works-block .block-text{position:absolute; left:8rem; bottom:10rem; z-index:2; display:flex; flex-direction:column; gap:4rem; width:94rem; text-transform:uppercase;}
.main-works-block .block-text .tit{color:#fff; font-size:6.4rem; font-weight:600; line-height:1.2;}
.main-works-block .block-text .sub{color:#fff; font-size:2.4rem; font-weight:600; line-height:1.2;}
.main-works-block .block-text .desc{color:#fff; font-size:1.6rem; font-weight:300; line-height:1.6;}
.main-works-block .block-info{position:absolute; right:19rem; bottom:10rem; z-index:2; display:flex; gap:4rem;}	/* 실측 우측기준 190 (좌측기준 rem 고정은 1366 이하에서 컨테이너 밖 돌출) */
.main-works-block:first-of-type .block-info{right:16.6rem;}
.main-works-block .block-info dt,
.main-works-block .block-info dd{color:#fff; font-size:1.6rem; font-weight:600; line-height:2;}
.main-works-block .block-info dl:first-child dt{text-transform:uppercase;}

/* -------- Article 최신글 (실측: 중앙 타이틀 Bold 40 + 탭, 카드 430×457 4열 gap40) -------- */
#mainArticle{position:relative; margin-top:24rem; margin-bottom:14.9rem; z-index:1;}
.main-article-tit{display:flex; flex-direction:column; align-items:center; gap:4rem; margin-bottom:8rem;}
.main-article-tit h2{color:#fff; font-size:4rem; font-weight:600; letter-spacing:-0.01em; line-height:1;}
.main-article-tit .board-tab li a{font-weight:600;}
.main-article-list{display:grid; grid-template-columns:repeat(4, 1fr); gap:4rem;}
/* 루프 마퀴(Swiper freeMode 티커): 미초기화(캡처/폴백) 시 시안 그리드 유지, 초기화 후 linear 흐름 */
.main-article-swiper:not(.swiper-container-initialized) .main-article-list{display:grid !important;}	/* plugin swiper.css(flex)가 main.css 뒤에 로드되므로 강제 */
/* 커스텀 rAF 마퀴 (2026-08-15 Swiper 교체) — 그리드 폴백보다 뒤에 선언해 flex 강제 */
.main-article-swiper.marquee-on{overflow:hidden;}
.main-article-swiper.marquee-on .main-article-list{
	display:flex !important; gap:4rem; grid-template-columns:none;
	/* will-change/backface 금지 — 트랙이 backdrop root가 되어 카드 글라스가 배경을 못 봄 (translate3d 인라인으로 레이어 충분) */
	touch-action:pan-y;	/* 세로 스크롤은 통과, 가로 드래그만 마퀴가 소비 */
	cursor:grab;
}
.main-article-swiper.marquee-on .main-article-list:active{cursor:grabbing;}
.main-article-swiper.marquee-on .main-article-list > li{flex:0 0 43rem; width:43rem;}	/* 시안 카드 430 */
.main-article-swiper.marquee-on .main-article-list a{-webkit-user-drag:none; user-select:none;}
@media all and (max-width:1024px){
	.main-article-swiper.marquee-on .main-article-list{gap:3rem;}
	.main-article-swiper.marquee-on .main-article-list > li{flex:0 0 36rem; width:36rem;}
}
@media all and (max-width:800px){
	.main-article-swiper.marquee-on .main-article-list{gap:2rem;}
	.main-article-swiper.marquee-on .main-article-list > li{flex:0 0 30rem; width:30rem;}
}
.main-article-swiper.swiper-container-initialized .swiper-wrapper{transition-timing-function:linear; display:flex;}
.main-article-swiper .swiper-slide{height:auto; display:flex; flex-direction:column;}
.main-article-swiper .swiper-slide > a{flex:1;}
.main-article-list li > a{
	display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;	/* 2026-08-15: 2rem→1.5rem — 카드 430×430 정사각 (이미지 19.7rem 유지, 잔여 1.6px는 img margin-top:auto가 흡수) */
	aspect-ratio:1/1.06;
	padding:4rem; box-sizing:border-box;
	/* 글라스 복원 (2026-08-15): 커스텀 rAF 마퀴 전환 후 재측정 — 시안 원값 bg 3% + blur 20 */
	background-color:rgba(255,255,255,0.03);
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
	transition:var(--transition-custom); transition-property:background-color;
}
.main-article-list li > a > *{flex-shrink:0;}	/* aspect-ratio 제약이 이미지/텍스트를 수축시키지 못하게 — 내용이 넘치면 카드가 세로로 자람 (이미지 비율 보존) */
.main-article-list li > a:hover{background-color:var(--main-color);}
.main-article-list .cate{color:#fff; font-size:1.4rem; font-weight:600; line-height:1;}
.main-article-list .tit{
	color:#fff; font-size:2.8rem; font-weight:400; letter-spacing:-0.02em; line-height:1.4;
	/* 최대 2줄 + 말줄임, 2줄 높이 고정 — 내용 길이와 무관하게 카드 높이 균일 (2026-08-15: 3줄→2줄, 카드 정사각형화 방지) */
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	height:2.8em;	/* 1.4 × 2줄 */
}
.main-article-list li > a .img{margin-top:auto;}	/* 이미지 하단 고정 */
.main-article-list .date{color:#fff; font-size:1.4rem; letter-spacing:-0.02em; line-height:1;}	/* pb1.4rem 제거 — 정사각 카드 수지 맞춤 */
.main-article-list .img{display:block; overflow:hidden; width:100%; height:19.7rem; background-color:#fff;}
.main-article-list .img img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.main-article-list li > a:hover .img img{transform:scale(1.05);}

/* -------- 메인 퀵 버튼 (실측 80×80, right60) — 2026-09-03: 아이콘 원복 (Contact Us 교체 대상은 푸터 CTA 문구였음) -------- */
#mainQuick{
	position:fixed; right:6rem; bottom:8rem; z-index:98;	/* 시안 실측 right60 — 메인 헤더 80px 인셋 그리드(중심 1820)와 정렬 */
	display:flex; align-items:center; justify-content:center;
	width:8rem; height:8rem; box-sizing:border-box;
	/* background-color:rgba(255,255,255,0.05); */
	-webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);	/* 푸터 말풍선과 동일 글라스 */
	transition:var(--transition-custom); transition-property:background-color;	/* 2026-08-19: transform은 main.js 도킹이 프레임마다 갱신 — 트랜지션 제외 */
	will-change:transform;
}
#mainQuick:before{position: absolute; content:''; inset:0; width:100%; height:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,0.25); transition:var(--transition-custom); opacity:0;}
#mainQuick img{width:4rem; height:3.4rem;}
/* 메인 퀵 도킹 (main.js): 푸터 quick 자리는 슬롯으로만 남기고 숨김 — 서브페이지는 body.has-main-quick이 없어 그대로 노출 */
body.has-main-quick .footer-quick{visibility:hidden; pointer-events:none;}
#mainQuick.docked{position:absolute; right:auto; bottom:auto; transform:none;}	/* 슬롯 도달 후: main.js가 left/top(슬롯 문서좌표) 지정 — 페이지와 함께 스크롤 */
#mainQuick:hover{background-color:rgba(255,255,255,0.1);}
#mainQuick.docked:before{opacity:1;}

/* Works 블록 이미지 크롭 위치 (실측: 원본 이미지의 시안 프레임 오프셋 환산) */
.main-works-block:nth-of-type(1) .block-media img{object-position:50% 54%;}
.main-works-block:nth-of-type(2) .block-media img{object-position:50% 8%;}
.main-works-block:nth-of-type(3) .block-media img{object-position:50% 26%;}
.main-works-block:nth-of-type(4) .block-media img{object-position:50% 26%;}
.main-works-block.is-db .block-media img{object-position:50% 50%;}	/* 관리자 Works 대표이미지(2026-09-23): 위 오프셋은 정적 샘플 이미지 전용 → DB 이미지는 중앙 크롭 */