@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:500; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ******************  회사소개 ********************** */
@media all and (max-width:1220px){
	
}
/* ******************  PERCEPT :: Board ********************** */
@media all and (max-width:1024px){
	.article-list{grid-template-columns:repeat(2, 1fr);}
}
@media all and (max-width:800px){
	/* 타이틀 + 탭: 세로 적층 */
	.board-top{flex-direction:column; align-items:flex-start; gap:3rem; margin:12rem auto 3rem;}
	.board-tit{font-size:8rem;}
	.board-tab{gap:3rem; flex-wrap:wrap;}
	/* Article 카드: 1열 */
	.article-list{grid-template-columns:1fr; gap:2rem;}
	.article-list > li > a{padding:3rem; gap:1.6rem;}
	.article-list .img{height:auto; aspect-ratio:386/217;}
	/* IR 리스트 */
	.ir-list li a{height:auto; min-height:8rem; padding:2rem; gap:2rem;}
	.ir-list .tit{font-size:1.8rem; line-height:1.4; white-space:normal;}
	.ir-list .date{flex-shrink:0;}
	.ir-paging{margin-bottom:6rem;}
	/* 더보기 */
	.board-more .board-more-btn{height:6rem; font-size:1.6rem; letter-spacing:0.4em; text-indent:0.4em;}
}

/* ******************  PERCEPT :: Contact ********************** */
@media all and (max-width:1024px){
	.contact-con{flex-direction:column; gap:2rem; margin-bottom:0;}
	.contact-info{width:100%; padding:0;}
	.contact-banner{width:100%;}
	.contact-form{width:100%; padding:2rem 0 0;}
}
@media all and (max-width:800px){
	.contact-con .contact-top-bar{display: none;}
	.contact-headline{font-size:3rem; line-height:1.5;}
	.contact-desc{font-size:1.6rem;}
	.contact-banner{height:auto; padding:2.4rem; flex-direction:column; gap:1.6rem;}
	.contact-banner .val{align-items:flex-start; text-align:left;}
	.contact-form .field-half-wrap{flex-direction:column; gap:3.2rem;}
	.contact-form .form-bottom{flex-direction:column; align-items:flex-start; gap:2.4rem;}
	.contact-submit-btn{width:100%;}
}

/* ******************  PERCEPT :: Works ********************** */
@media all and (max-width:1024px){
	.wv-info{flex-direction:column; gap:5rem;}
	.wv-left{width:100%; padding-left:0;}
	.wv-right{width:auto;}
}
@media all and (max-width:800px){
	/* 목록: 그리드 1열 스택 */
	.works-top{flex-direction:column; align-items:flex-start; gap:3rem;}
	.works-top .works-top-right{width:100%; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
	.works-grid{grid-template-columns:1fr; grid-auto-rows:auto; gap:1.6rem;}
	.works-grid .tile.large,
	.works-grid .tile.large.col2{grid-column:auto; grid-row:auto;}
	.works-grid .tile > a{aspect-ratio:480/270;}
	.works-grid .tile.large > a{aspect-ratio:980/560;}
	.works-grid .cate,
	.works-grid .tile.large .cate{top:2.4rem; left:2.4rem;}
	.works-grid .tile-text{left:2.4rem; bottom:2.4rem;}
	.works-grid .tile-text strong{font-size:2.4rem;}
	.works-grid .tile-text p{font-size:1.4rem; line-height:1.4; margin-top:1rem;}
	.works-grid .hover-text strong{font-size:2.2rem;}
	.works-grid .hover-text p{font-size:1.4rem;}
	.works-grid .hover-text{padding:0 2.4rem 2.4rem;}	/* 소형도 좌하단 정렬 — 모바일은 2.4rem */
	.works-grid .hover-bg,
	.wv-more-list .hover-bg{display: none;}	/* 2026-09-03: 터치 환경은 배경 슬라이드 없음 — 전 카드 공통 */
	/* 2026-09-03b: inset:0 오버레이에 걸린 backdrop-filter가 썸네일 전체를 블러시키던 잔재 제거 — 텍스트 가독은 하단 그라데이션 스크림으로 */
	.works-grid .tile > a .hover-text,
	.works-grid .tile.large > a .hover-text,
	.wv-more-list > li > a .hover-text{visibility: visible; transform: none; opacity:1; filter:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:none; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);}
	.works-grid .tile.large > a .hover-text{gap:1rem; padding:2.4rem;}
	.works-grid .tile.large > a .hover-text strong{font-size:2.2rem;}
	.works-grid .tile.large > a .hover-text p{font-size:1.4rem; line-height:1.4;}
	/* 상세 */
	.wv-top{height:40rem;}
	.wv-info{padding-top:5rem;}
	.wv-tit{font-size:2.8rem;}
	.wv-sub-tit{font-size:1.8rem; line-height:1.4;}
	.wv-right{grid-template-columns:1fr 1fr; width:100%;}
	.wv-video, .wv-gallery, .wv-more{margin-top:5rem;}
	.wv-sec-tit h4{font-size:2.6rem;}
	.wv-more-list{grid-template-columns:1fr; gap:1.6rem;}
	.wv-more-list > li{height:auto;}
	.wv-more-list > li > a{aspect-ratio:730/410;}
	.wv-more-list .cate{top:2.4rem; left:2.4rem;}
	.wv-more-list .hover-text{padding:0 2.4rem 2.4rem;}
	.wv-more-list .hover-text strong{font-size:2.2rem; line-height:1;}
	.wv-more-list .hover-text p{font-size:1.4rem; line-height:1.4; margin-top:1rem;}
	.wv-more{margin-bottom:6rem;}
	
}

/* ******************  뉴스레터 구독 배너 (2026-09-03) ********************** */
@media all and (max-width:800px){
	.nl-banner{flex-direction:column; align-items:stretch; gap:2.4rem; height:auto; padding:3.2rem 2.4rem;}
	.nl-tit{margin-top:1.2rem; font-size:2.2rem; line-height:1.4;}
	.nl-btn{width:100%; height:5.6rem; font-size:1.8rem;}
}