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

/* ******************  메인 비주얼 ********************** */
@media all and (min-width:1921px){
	#mainVisual .mv-headline{top:50%; margin-top: -21rem;}
	#mainVisual .mv-copy{top:50%; margin-top: 20rem;}
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:4rem}
	/* 메인 비주얼 :: Dots */
	.main-visual-con .slick-dots-wrapper{text-align:center; bottom:10px;}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow{display:none !important;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:24px;}
	.main-tit-box .main-sub-tit{font-size:13px;}
	.main-tit-box .main-sub-tit span{display:block;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
  @media all and (max-width:1220px){
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{font-size:20px}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{font-size:14px; margin-bottom:0; line-height:18px;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-txt{display:none}
	.main-quick-menu-list .quick-menu-item .over-thum::before,
	.main-quick-menu-list .quick-menu-item .over-thum::after {
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
	}
 }
 @media all and (max-width:800px){
	.main-quick-menu-list{margin:0 -1%;}
	.main-quick-menu-list .quick-menu-item {width:48%; margin:1%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box{bottom:10%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{margin-bottom:0; font-size:18px; text-align:center;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{display:none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(갤러리) -------- */
@media all and (max-width:1220px){
	.main-news-list li .bbs-inner-con{margin:-60px 15px 0 15px; padding:15px;}
	.main-news-list li .bbs-inner-con .bbs-category{font-size:12px;}
	.main-news-list li .bbs-inner-con .bbs-tit{font-size:18px; margin:10px 0;}
	.main-news-list li .bbs-inner-con .bbs-content{font-size:13px; line-height:18px;}
	.main-news-list li a:hover .bbs-inner-con{padding:15px;}
}
@media all and (max-width:800px){
	.main-news-list{max-width:480px; margin:0 auto;}
	.main-news-list li{float:none; width:100%; margin:0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(갤러리 슬라이드) -------- */
@media all and (max-width:1220px){
	.main-gallery-rolling-con .bbs-basic-gallery-con{margin:0 10px}
	.main-gallery-rolling-con .slick-arrow.slick-prev{left:-24px; }
	.main-gallery-rolling-con .slick-arrow.slick-next{right:-24px; }
}
@media all and (max-width:480px){
	.main-gallery-rolling-con .bbs-basic-gallery-con{ margin:0 -2px;}
	.main-gallery-rolling-con .bbs-basic-gallery-con li{margin:0 2px;}
	.main-gallery-rolling-con .slick-arrow{display:none !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(갤러리 + 설명 슬라이드) -------- */
@media (max-width:800px) {
	.main-slide-photo-con{float:none; width:100%;}
	.main-slide-text-con{float:none; width:100%; margin:0; margin-top:15px; }
	.main-slide-text-item .main-slide-tit{font-size:20px; margin-bottom:15px;}
	.main-slide-text-item .main-slide-txt{font-size:13px; line-height:20px; margin-bottom:40px;}
	.main-slide-text-item .main-slide-btn{display:block; margin:0px auto; font-size:13px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
@media all and (max-width:800px){
	.main-fixed-con{font-size:10px;}
}
/* -------- 메인 컨텐츠 :: 컨텐츠6(사각, 원 배너들) -------- */
/* 배너 :: 사각배너 */
@media all and (max-width:800px){
	.main-banner-list-con li .banner-inner-box{font-size:12px;}
	.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:none;}
}
@media all and (max-width:640px){
	.main-banner-list-con{margin:0;}
	.main-banner-list-con li{float:none; width:100%; margin:0; margin-bottom:15px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠7(100% 풀배너) -------- */
@media (max-width:1220px) {
	.main-full-banner-box .main-full-banner-left,
	.main-full-banner-box .main-full-banner-right{
		position:static; float:left; width:50%; padding:0;
	}
}
@media (max-width:800px) {
	.main-full-banner-box .full-banner-inner{width:auto; padding:50px 15px;}
	.main-full-banner-box .full-banner-inner strong{font-size:18px; padding-bottom:15px;}
	.main-full-banner-box .full-banner-inner p{font-size:13px; line-height:20px; word-break:keep-all;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠8(Global Network) -------- */
@media all and ( max-width: 1220px ){
	.global-map-con{display:none;}
	.global-map-con-m{display:block;}
	.global-map-con-m img{width:100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠9(공지사항 게시판 + 배너) -------- */
@media all and (max-width:1220px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box .main-board-tit{font-size:17px; padding-bottom:18px; }
	.main-board-con{padding-top:15px;}
	.main-board-con li{margin-top:10px}
	.main-board-con li .bbs-tit{font-size:13px;}
	.main-board-con li .bbs-date{font-size:12px;}
}
@media all and (max-width:800px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box{float:none; width:100%; margin-bottom:15px;}
	/* 컨텐츠 9 :: 배너 */
	.main-board-banner-con{float:none; width:100%;}
	.main-board-banner-con ul{margin:0 -1%;}
	.main-board-banner-con ul li{width:48%; margin:0 1%;}
	.main-board-banner-con ul li a .main-board-thumb-cover p strong{font-size:14px}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;}
}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}
/* ========================================================
 * PERCEPT MAIN 반응형
======================================================== */
@media all and (max-width:1280px){
	#mainQuick{right:var(--area-padding); bottom:4rem;}
	#mainVisual .mv-scroll{left:var(--area-padding); bottom:4rem;}
	
	#mainVisual .mv-symbol{width:40rem; height:40rem;}
	#mainVisual .mv-headline{right:calc(50% + 14.7rem); top: 25rem; font-size:6rem;}
	#mainVisual .mv-copy{left: calc(50% + 1rem); top: 50.5rem;}
	#mainVisual .mv-copy .copy-base{font-size:2.8rem;}
	#mainVisual .mv-copy .chip{width: 5rem; height: 3.2rem; -webkit-mask-size: 44rem 6.55rem; mask-size: 44rem 6.55rem;}
	#mainVisual .mv-copy .c1{left: 0; top: 1.1rem;}
	#mainVisual .mv-copy .c2{left: 0; top: 5.5rem; -webkit-mask-position: 0.29rem -3.96rem; mask-position: 0.29rem -3.96rem;}
	#mainVisual .mv-copy .c3{left: 8.2rem; top: 1.1rem; -webkit-mask-position: -7.61rem 0.34rem; mask-position: -7.61rem 0.34rem;}
	#mainVisual .mv-copy .c4{left: 8.2rem; top: 5.5rem; -webkit-mask-position: -8.81rem -4.56rem; mask-position: -7.61rem -3.96rem;}
	#mainVisual .mv-copy .c5{left: 26.8rem; top: 1.1rem; width: 5.3rem; -webkit-mask-position: -30.51rem 0.34rem; mask-position: -25.51rem 0.34rem;}
	#mainVisual .mv-copy .c6{left: 26.6rem; top: 5.5rem; width: 5.3rem; -webkit-mask-position: -30.41rem -4.56rem; mask-position: -25.31rem -3.96rem;}
	
	/* Works 블록: 미디어 위 + 텍스트 아래 적층 */
	.main-works-block{display: flex; flex-direction: column; justify-content: flex-end; padding: 4rem var(--area-padding); max-height: 100vh; box-sizing: border-box;}
	.main-works-block .block-cate{left:var(--area-padding)}
	.main-works-block .block-text{left:var(--area-padding); position: relative; inset: auto !important; width: 100%; gap:3rem;}
	.main-works-block .block-text .tit{font-size:5rem;}
	.main-works-block .block-text .sub{font-size:2rem;}
	.main-works-block .block-info{position: relative; inset: auto !important; width: 100%; margin-top:3rem;}
	
	/* 비주얼: 중앙기준 절대배치 → 플로우 적층 */
	#mainVisual .mv-sns{right:calc(var(--area-padding) + 2.7rem);}
}
@media all and (max-width:1024px){
	/* 인트로: 카드 세로 적층 (중앙기준 절대배치가 1024 이하에서 좌측 돌출 — 태블릿부터 적층) */
	#introCover .intro-card-con{position:static; transform:none; flex-direction:column; gap:2rem; align-items:center; justify-content:center; padding:14rem 5vw 0;}
	#introCover .intro-card{width:100%; max-width:64rem; height:auto; aspect-ratio:640/360;}
	#introCover .card-text .big{font-size:7rem;}
	#introCover .card-text .label{font-size:1.8rem;}
	#introCover .intro-copy{bottom:4rem; font-size:1.3rem; width:100%; text-align:center;}

	/* 비주얼: 중앙기준 절대배치 → 플로우 적층 */
	#mainVisual{height:auto; padding:14rem 5vw 8rem; box-sizing:border-box;}
	#mainVisual .mv-symbol{position:relative; left:auto; top:auto; width:34rem; height:34rem; margin:0 auto; transform: none !important;}
	#mainVisual .mv-headline{position:relative; right:auto; top:auto; margin-top:-6rem; font-size:5.4rem; line-height:1.15; text-align:left;}
	#mainVisual .mv-copy{position:relative; left:auto; top:auto; width:auto; height:auto; margin-top:3rem;}
	#mainVisual .mv-copy .copy-base{position:static; transform:none; font-size:2rem; line-height:1.5; white-space:normal;}
	#mainVisual .mv-copy .chip{display:none;}
	#mainVisual .mv-sns{position:relative; top:auto; bottom:auto; right:auto; left:auto; transform:none; display:flex; gap:2.8rem; margin-top:3.2rem;}	/* 모바일: 카피 아래 가로 행 (우측 플로팅은 카피와 겹침 — 09-10) */
	#mainVisual .mv-sns li{margin-top:0;}
	body.mv-entrance #mainVisual .mv-sns{animation-name:entRight;}	/* 이 구간은 기본 transform:none — translateY(-50%) 키프레임(entRightSns)을 쓰면 등장 중 수직 튐 */
	#mainVisual .mv-scroll{display:none;}
}
@media all and (max-width:800px){
	/* Works 블록: 미디어 위 + 텍스트 아래 적층 */
	.main-works-block{height:auto; margin-top:8rem; padding-inline:0;}
	.main-works-block .block-media{position:relative; top:auto; height:auto; aspect-ratio:1840/840;}
	.main-works-block .block-cate{position:relative; left:0; top:0; transform:none; display:block; margin-bottom:1.6rem;}
	.main-works-block .block-media{margin-top:0;}
	.main-works-block .block-text{position:relative; left:auto; bottom:auto; width:auto; margin-top:2.4rem; gap:2rem;}
	.main-works-block .block-text .tit{font-size:3.6rem;}
	.main-works-block .block-text .sub{font-size:1.8rem; line-height:1.4;}
	.main-works-block .block-text .desc{font-size:1.4rem;}
	.main-works-block .block-info{position:relative; left:auto; right:auto; bottom:auto; margin-top:2.4rem;}
	.main-works-block:first-of-type .block-info{left:auto; right:auto;}
	.main-works-block .block-info dt,
	.main-works-block .block-info dd{font-size:1.4rem;}
	/* 모바일 최적화 (사용자 지시 09-10): 카테고리+타이틀만 노출, 간격 축소 */
	.main-works-block{margin-top:6rem;}
	.main-works-block .block-cate{margin-top:20px; margin-bottom:1.2rem;}	/* 이미지↔텍스트 실측 40px (기본 규칙 오프셋 20px 포함 — 사용자 지시 09-10 2차) */
	/* 스크롤 진입 시 텍스트 살짝 떠오름 — 스크롤 연동 애니(view()) 지원 브라우저만, 미지원은 정지 상태(모바일 전용) */
	@supports (animation-timeline: view()){
		.main-works-block .block-cate,
		.main-works-block .block-text{animation:mwTextUp linear both; animation-timeline:view(); animation-range:entry 0% entry 70%;}
		.main-works-block .block-text{animation-range:entry 10% entry 85%;}
	}
	@keyframes mwTextUp{from{opacity:0; transform:translateY(2.4rem);} to{opacity:1; transform:translateY(0);}}
	.main-works-block .block-text{margin-top:1.6rem; gap:0;}
	.main-works-block .block-text .tit{font-size:3rem; line-height:1.25;}
	.main-works-block .block-text .sub,
	.main-works-block .block-text .desc,
	.main-works-block .block-info{display:none;}

	/* Article: 1열 */
	#mainArticle{margin-top:10rem; margin-bottom:8rem;}
	.main-article-tit{gap:2.4rem; margin-bottom:4rem;}
	.main-article-tit h2{font-size:3.2rem;}
	.main-article-list{grid-template-columns:1fr; gap:2rem;}
	.main-article-list > li > a{padding:3rem; gap:1.6rem;}
	.main-article-list .img{height:auto; aspect-ratio:350/197;}
	/* Article 마퀴: 화면 양끝까지 (area-box 패딩 상쇄 — 사용자 지시 09-10) */
	#mainArticle .main-article-swiper{margin-left:calc(-1 * var(--area-padding)); margin-right:calc(-1 * var(--area-padding));}

	/* 퀵 버튼 */
	#mainQuick{width:6rem; height:6rem;}
	#mainQuick img{width:3rem; height:2.55rem;}
}
@media all and (max-width:1024px) and (min-width:801px){
	.main-article-list{grid-template-columns:repeat(2, 1fr);}
}