@import "font.css";

/* ========================================
   전역 스타일
   - 기본 body 설정
   - 폰트 및 스크롤 설정
======================================== */

* {font-family: 'Pretendard', sans-serif; box-sizing: border-box; font-weight: 400; }
html,body {font-size: 62.5%;}
body {overflow-x: hidden; margin: 0; padding: 0;  -webkit-font-smoothing: antialiased; word-break: break-all;}

/* ========================================
   헤더 영역
   - 상단 고정 헤더
   - 로고 및 네비게이션 컨테이너
======================================== */
.site-header {width: 100%; background: transparent !important;  justify-content: center; z-index: 1000;}
/* 투명 헤더용 메뉴 글씨색 */
.site-header .gnb a {color: #000; transition: color 0.3s ease;}
body.main-page .gnb a {color: #000;}
body.main-page .top-logo-img {filter: none;}
/* 서브 페이지 글씨 흰색 */
body.sub-page .gnb a {color:#000;}

.nav-container {max-width: 174.5rem; width: 100%; padding: 2.9rem 2rem; margin: 0 auto; display: flex; align-items: flex-end; }

/* 헤더 로고 */
.top-logo-img {height: auto; height:3.8rem; display: block;}
.logo-text {}
.logo-text a {display: block; }
.new_h_box {display: flex; align-items: center; justify-content: space-between; max-width: 174.5rem; width: 100%;}



/* ========================================
   네비게이션 메뉴 (GNB)
   - 데스크톱 메뉴 스타일
   - 호버 효과 및 활성 상태
   - 메뉴 링크 하단 라인 애니메이션
======================================== */
.gnb ul {display: flex; align-items: center;  list-style: none; margin: 0; padding: 0;}
.gnb li {position: relative; font-size: 1.4rem; font-weight: 700;}
.gnb li ~ li {margin-left: 13rem; }
.gnb a {position: relative; display: inline-block; text-decoration: none; color: #000; font-size: 1.9rem; line-height: 1.7rem; font-weight: 700; padding-bottom: .8rem; transition: color 0.3s ease;}

/* 메뉴 호버 시 하단 라인 애니메이션 */
.gnb a::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: .3rem; background-color: #E8465A; transition: width 0.3s ease;}

/* 활성 메뉴 스타일 */
.gnb li.active a {color: #E8465A; border-bottom: .2rem solid #E8465A; padding-bottom: .4rem;}
.gnb a:hover {color: #E8465A !important;  }
.gnb a:hover::after {width: 100%;}
 
/* 모바일 메뉴 토글 버튼 */
.menu-toggle {display: none;background: url('/re/images/new/menu_btn.svg') no-repeat center; width: 2.4rem; height: 2.4rem; font-size: 0; border: none; cursor: pointer;}

/* 닫기 버튼 */
.mobile-menu .close-btn {font-size: 2rem; border: none; background: none; cursor: pointer;}
.mobile-menu {position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: #fff; transition: right 0.3s ease; z-index: 2000; padding: 2rem; overflow-y: auto;}
.mobile-menu.open {right: 0;}

/* 메뉴 항목 */
.mobile-menu ul {list-style: none; padding: 0; margin: 7rem 0 0;  }

/* 상위 메뉴 아이템 간 여백 */
.mobile-menu > ul > .menu-item {margin-bottom: 2rem; }
.mobile-menu .submenu {margin: 0; padding-left: 2rem;}
.mobile-menu .submenu.open {}
.mobile-menu .submenu li {padding: .5rem 0;  }
.mobile-menu .menu-item {margin-bottom: 3rem;}
.mobile-menu .menu-item > a {font-size: 1.8rem; font-weight: 600; line-height: 3.8rem; display: flex; justify-content: space-between; align-items: center; color: #000; text-decoration: none; }
.mobile-menu .menu-item.active > a {color: #E8465A;}

/* 화살표 아이콘 */
.mobile-menu .arrow {width: 3rem; height: 3rem; transition: transform 0.2s ease;}

/* 서브메뉴 */
.submenu {display: none; padding-left: 20px; margin-top: 10px;}
.submenu.open {display: block;}
.submenu li {}
.submenu a {font-size: 1.6rem; color: #666; text-decoration: none; line-height: 3.2rem; display: block; }

/* ========================================
   인트로 화면
   - 페이지 로드 시 표시되는 전체화면 오버레이
   - 로고 애니메이션
   - 페이드아웃 효과
======================================== */
#intro-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #E8465A; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.8s ease;}
#intro-overlay.fade-out {opacity: 0; pointer-events: none;}



/* 인트로 로고 컨테이너 */
.logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; transition: top 1s ease-in-out, left 1s ease-in-out, transform 1s ease-in-out;}
.logo-img {width: 55rem; height: auto; display: block; max-width: 90vw;}

/* ========================================
   메인 비주얼 섹션
   - 전체 화면 높이의 히어로 섹션
   - 중앙 정렬된 타이틀
   - Wobble 텍스트 애니메이션
======================================== */
.main-visual {width: 100%; height: calc(100vh - 9rem); display: flex; align-items: center; justify-content: center; padding: 0 2rem; background: #ffffff; text-align: center; position: relative;}
.visual-inner {display: flex; flex-direction: column; justify-content: center; align-items: center;}

/* 메인 타이틀 */
.visual-inner h2 {font-size: 13rem; font-weight: 700; color: #E8465A; line-height: 1.2; margin: 0;}
.mo-br { display: none; }
.hero-title {font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 600; line-height: 1.2; margin: 0; text-align: center; }

/*  아래에서 위로 슬라이드 */
.title-ko { display: inline-block; color: #E8465A; }
.title-ko .seg {display: inline-block; transform: translateY(120%); opacity: 0; will-change: transform, opacity;  font-weight: 700; color: #E8465A;}
/*  애니메이션 시작 */
.hero-ready .title-ko .seg {animation: koSlideUp .8s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-ready .title-ko .seg:nth-of-type(1) { animation-delay: .05s; }
.hero-ready .title-ko .seg:nth-of-type(2) { animation-delay: .20s; }
.hero-ready .title-ko .seg:nth-of-type(3) { animation-delay: .35s; }


.title-en {display:inline-block; transform:translateY(120%); opacity:0; font-size: 2.4rem; color:#333;}
.hero-ready .title-en {animation: koSlideUp .8s cubic-bezier(.2,.7,.2,1) forwards .15s; }
.en-ch { display:inline-block; color:#fff;}     /* 초기: 검정 */
.hero-ready .en-ch {animation: enColor .6s ease forwards; animation-delay: calc(var(--i) * 0.03s + 0.25s); /* 글자별 지연 */ font-size: 3rem; font-weight: 700;}
@keyframes enColor { 
	to { color:#333; } 
}
@keyframes koSlideUp {
	to { transform: translateY(0%); opacity: 1; }
}

/* 세 줄이 번갈아 아주 살짝 위아래로 둥실둥실 */
/* 1) 초기 표시: hero-ready 시 한 번 위로 슬라이드되며 보이기 */
/* .hero-ready .title-ko .seg {
animation: koSlideUp .7s cubic-bezier(.2,.7,.2,1) forwards;
} */
/* 2) 루프가 켜졌을 때, 최소 보이는 상태 보장 */
/* .hero-loop .title-ko .seg {
opacity: 1;                    
transform: translateY(0);     
animation: koBob 3.2s ease-in-out infinite;
} */
/* 3) (권장) 둘 다 켜진 상황에서: 먼저 슬라이드업 → 곧바로 루프 이어붙이기 */
/* .hero-ready.hero-loop .title-ko .seg {
animation: koSlideUp .8s cubic-bezier(.2,.7,.2,1) forwards,
			koBob 3.2s ease-in-out infinite .85s; 
} */

/* @keyframes koBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
} */ 

/* EN: 글자별로 검정 -> 빨강 -> 검정으로 파도처럼 번져감 */
/* .hero-loop .en-ch {
	animation: enWave 3.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.05s);
} */

/* @keyframes enWave {
	0%, 100% { color: #111; transform: translateY(0); }
	40%      { color:rgb(221, 221, 221); transform: translateY(-2px); }
	60%      { color: #111; transform: translateY(0); }
} */

/* 사용자가 모션 줄이기 설정시 정지 */
/* @media (prefers-reduced-motion: reduce) {
	.hero-loop .title-ko .seg,
	.hero-loop .en-ch { animation: none !important; }
} */

/* 메인 첫 화면 스크롤 이미지 영역 */
.main-visual {position: relative; /* 기준이 되는 부모 */}
.title-scroll {position: absolute;bottom: 7rem;left: 50%;transform: translateX(-50%);display: flex; /* 가로 배치 */align-items: center; justify-content: center; gap: 1rem; animation: fadeInUp 1s ease 1.2s both; }
.title-scroll img {height: auto;width: auto;  max-height: 3rem;animation: backtotop-bounce 2.5s ease infinite !important; }

  
/* ========================================
   OUR WORKS 타이틀 영역
   - 왼쪽 고정 타이틀
   - 스티키 포지션
======================================== */

.ourworks-section {position: relative; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; transition: top 0.4s ease;}
.ourworks-section.sticky {position: fixed; top: 0; transform: translateY(-2rem);}
.ainner {position: relative; max-width: 170.8rem; margin: 0 auto; padding: 15rem 0 8rem 0; }
.tit_box {width: 40%; display: flex; flex-direction: column; color: white; padding-top: 10rem; }
.tit_box .tit_depth1 {font-size: 4rem; font-weight: 700; margin-bottom: 2rem; color: #fff; }
.tit_box .desc {font-size: 2.1rem; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.2; }
.scroll_area {width: 65%;  height: auto; overflow: visible;}
.service_cont { display: flex; justify-content: space-between; height: 80rem; max-width: 170.8rem; margin: 0 auto; gap:30rem;}
.list_box {display: flex; flex-direction: column; gap: 4rem; width: 72rem;}
.service_cont .list_box {display: flex; flex-direction: row; flex-wrap: wrap; width: 76rem; padding: 0 0 40rem 0; min-height: 210rem; gap: 6rem 4rem; }
/* .service_cont .list_box li {height: 48rem; width: 31.2rem; list-style: none;} */
.service_cont .list_box li {
	width: 360px;
	height: 512px;
	list-style: none;
	margin-bottom: 2rem; /* 카드 간격 */

  }
.service_cont .list_box li:nth-child(2n) a {margin-top: 25rem;}
.list_box li.on a { border: solid 1px red; transform: scale(1.05); transition: all 0.3s ease;}
.list_box li a {display: block; background: #fff; border-radius: 1rem; overflow: hidden; height: 48rem; transition: box-shadow 0.3s ease;}
.ourworks-section.sticky {position: fixed; top: 0; left: 0; z-index: 1000; }
.ourworks-section.placeholder { height: 100vh;}
/* .ourworks-section  {background: url('/re/images/new/our_bg.png') no-repeat 50% 50% / cover; min-height: 100vh;}   */
.ourworks-section .works_bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.ourworks-section .works_bg li {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: no-repeat 50% 50% / cover;background-attachment: fixed;transition: .35s linear;opacity: 0;}
.ourworks-section .works_bg .bg1 {background-image:  url('/re/images/new/our_bg_marketing.png');}
.ourworks-section .works_bg .bg2 {background-image:  url('/re/images/new/our_bg_content.png');}
.ourworks-section .works_bg .bg3 {background-image:  url('/re/images/new/our_bg_data.png');}
.ourworks-section .works_bg .bg4 {background-image:  url('/re/images/new/our_bg_media.png');}
.ourworks-section .works_bg .bg5 {background-image:  url('/re/images/new/our_bg_manage.png');}
.ourworks-section .works_bg .bg6 {background-image:  url('/re/images/new/our_bg_enter.png');}
.ourworks-section.active01 .works_bg .bg1, .ourworks-section.active02 .works_bg .bg2, .ourworks-section.active03 .works_bg .bg3, .ourworks-section.active04 .works_bg .bg4, .ourworks-section.active05 .works_bg .bg5, .ourworks-section.active06 .works_bg .bg6, .ourworks-section.active07 .works_bg .bg7 {opacity: 1;}

.list_box li.card a {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;  height: 100%; border-radius: 2rem; background: #fff; /* 비활성 기본 배경 */ box-shadow: 0 .4rem .8rem rgba(0, 0, 0, 0.15); text-decoration: none; transition: all 0.3s ease; padding: 4rem 2rem; box-sizing: border-box;}

/* 비활성 상태 */
.list_box li.card:not(.active) a {background: #555; opacity: 0.6;}
.list_box li.card:not(.active) .card-title,
.list_box li.card:not(.active) .card-desc {text-align: center; color: #ccc;}

/* 활성 상태 */
.list_box li.card.active a {background: #fff; opacity: 1;}
.list_box li.card.active .card-title {color: #000; font-weight: 700; text-align: center;}
.list_box li.card.active .card-desc {color: #444;}

/* 아이콘 영역 */
.card-icon {width: 13rem; height: 13rem; border-radius: 50%; background: #838383; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; transition: background 0.3s ease; }

/* 활성화 시 아이콘 배경 강조 */
.list_box li.card.active .card-icon {background: #e8465a;}

/* 아이콘 이미지 */
.card-icon img {width: 6rem; height: 6rem; }

/* 제목 */
.card-title {font-size: 3.2rem;  margin-bottom: 1rem;display: block;}

/* 설명 */
.card-desc {font-size: 2.2rem; line-height: 1.5; text-align: center; display: block; margin-bottom: 4rem; width:80%; word-break: keep-all; overflow-wrap: break-word;  line-break: strict; text-wrap: balance;}

.card-content {display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 2rem;}

/* 버튼 위 줄 */
.card-more::before { content: ""; display: block; width: 100%; height: .1rem; background: #ddd; position: absolute; top: -1.6rem; left: 0;}

/* 자세히 보기 버튼 영역 */
.card-more {display: flex; justify-content: space-between; align-items: center; width: 100%; padding-left: 1rem; gap: .8rem; position: relative; }

/* 자세히 보기 텍스트 */
.card-more span {font-size: 2.4rem; font-weight: 600; color: #e8465a; margin-left : .4rem;}

/* 아이콘 */
.card-more img { width: 3.2rem; height: 3.2rem; }


/* ========================================
   파트너 섹션
   - 파트너사 로고 이미지 표시
   - 전체 화면 높이
======================================== */
.partners-section {min-height: 100vh;overflow: visible;display: flex; align-items: flex-start; justify-content: flex-start; background: #fff; scroll-snap-align: start; padding: 12rem 0 6rem 0; overflow: hidden;}

/* 파트너 섹션 컨테이너 */
.partners-section .container {max-width: 170.8rem; margin: 0 auto; padding: 0 2.4rem; }

/* 파트너 섹션 타이틀 */
.partners-section .section-title {font-size: 4rem; font-weight: 700; color: #333; margin: .8rem 0 2rem 0px; letter-spacing: -0.016rem; line-height: 4.8rem; text-align: left;}

/* 파트너 섹션 서브타이틀 */
.partners-section .section-subtitle {font-size: 2.1rem; margin-left: 0px; font-weight: 600; color: #000; margin-bottom: 8rem; line-height: 2.4rem; letter-spacing: -0.008rem; text-align: left;}

/* 파트너 로고 이미지 */
.partners-image {display: block; width: 100%; height: auto; object-fit: contain; max-height: none;  margin: 0; }
  

/* ========================================
   Contact 섹션
   - 배경 이미지 + 오버레이
======================================== */
.contact-section {margin: 8rem auto; border-radius: 2.8rem; overflow: hidden; width: 100%; max-width: 174.8rem; overflow: hidden; padding: 0 2rem; }


/* 컨택트 콘텐츠 컨테이너 */
.contact-content {position: relative; z-index: 2; height:60rem; padding: 22rem 4rem; max-width: 170.8rem; width: 100%; background: url('/re/images/new/contact2.png') no-repeat center; background-size: cover; border-radius: 2.8rem; text-align: center;}

/* 컨택트 타이틀 */
.contact-section .section-title {font-size: 5.6rem; font-weight: 900; margin-bottom: 2.4rem; letter-spacing: -0.02em; text-shadow: .2rem .2rem .4rem rgba(0, 0, 0, 0.3);}

/* 컨택트 서브타이틀 */
.contact-section .section-subtitle {font-size: 2.6rem; font-weight: 700; color : #e8465a; text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.3); margin-bottom: 1rem; line-height: 4.1rem;  }

/* 컨택트 설명 텍스트 */
.contact-section .section-description { font-size: 3.5rem; font-weight: 700; line-height: 139.535%; margin-bottom: 5rem;}
.contact-section .section-description em {display: block; }
.contact-section .section-description em, 
.contact-section .section-description span {font-size: 4.3rem; font-weight: 700; line-height: 139.535%; opacity: 0.9; text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.3); color: #fff;  }

/* CTA 버튼 */
.contact-button {display: inline-flex; align-items: center; gap: 2rem; padding: 1.45rem 3.5rem; background-color: rgba(0, 0, 0, 0.2);  color: white; text-decoration: none; font-size: 2.2rem; font-weight: 700; border-radius: 5rem; border: .2rem solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); transition: all 0.3s ease; text-shadow: none;}

/* CTA 버튼 호버 효과 */
.contact-button:hover {background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-.2rem); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);}

/* CTA 버튼 화살표 */
.contact-button::after {content: ''; display: inline-block; width: 2rem; height: 2rem; background: url('/re/images/new/right_button.png') no-repeat center center / contain; transition: transform 0.3s ease;}
.contact-button:hover::after {transform: translateX(.5rem);}

/* ====================about페이지 CSS 시작 
  - 섹션 4부분
================================*/


.pc_type {display: block;}
.moble_type {display: none;}


/* 푸터 공통 */
.site-footer {font-size:1.2rem; background: #F7F7F7; color: #313131; padding: 8rem 0 7rem 0; }

/* 상단 레이아웃: 로고 + 정보 컨테이너 */
.footer-container {max-width: 174.8rem; width: 100%; margin: 0 auto; padding: 0 2.4rem; display: flex; align-items: flex-start; gap: 6rem; position: relative; }

/* 로고 */
.footer-left .footer-logo {width: 21rem; height: auto;}

/* 회사 정보 + 연락처 + 카피라이트 */
.footer-info {display: flex; flex-direction: column;}

/* 연락처 */
.footer-contact {display: flex; align-items: center; gap: 3rem; margin-top: 3rem;}
.footer-contact h4 {font-size: 1.8rem; font-weight: 600; }
.footer-contact p {font-size: 1.8rem; font-weight: 300; }

.divider {background: #313131; width: .1rem; height: 4.6rem; }

/* 카피라이트 (로고 라인 기준 왼쪽 정렬) */
.footer-copyright {font-size: 1.8rem; color: #999; margin-top: 4.6rem; font-weight: 400;}

/* 패밀리 사이트 버튼: 오른쪽 끝 */
.footer-family {position: relative;}
.family-btn {display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 2.4rem; line-height: 1; border: .1rem solid darkgrey; background: #fff; color: darkgrey; font-size: 2rem; border-radius: .6rem; cursor: pointer; width: 100%; }
.family-btn img {width: 1.8rem; height: 1.8rem; display: block; object-fit: contain;}
.family-list {display: none; position: absolute; right: 0; bottom: 4.2rem; background: #fff; color: #333; border-radius: .6rem; list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; border: .1rem solid darkgrey; overflow: hidden; }
.footer-family.open .family-list {display: block;}
.family-list li a {display: block; padding: 1rem 2rem;text-decoration: none; color: #333; font-size: 2rem; line-height: 4rem;}
.family-list li a:hover {background: #f2f2f2; color: #E8465A;}
.footer-family.open .family-list {display: block;}

/* 카피라이트 */
.footer-bottom { max-width: 23.7rem; width: 100%; font-size: 1.2rem; color: #999; text-align: center; position: absolute; right: 2rem; bottom: 0; }
.footer-company-info p {font-size: 2.2rem;}
.footer-company-info p ~ p {margin-top: 1rem;}
.contact-item p {margin-top: 1rem;}
.company-name {font-weight: bold; font-size: 2.4rem;}

/* 맨 위로 버튼 */
.back-to-top {position: absolute; top: -11rem; right: .1rem; width: 4.8rem; height: 4.8rem; padding: 0; border: none; background: transparent; cursor: pointer; z-index: 1000; opacity: 1; transform: none; pointer-events: auto; transition: none; animation: backtotop-bounce 2s ease infinite !important;}
.back-to-top img {display: block; object-fit: contain;}

/* 스크롤 내려오면 나타남 */
.back-to-top.show {opacity: 1; transform: translateY(0); pointer-events: auto;}

/* 호버 시 통통 튀는 효과 */
/* .back-to-top:hover {
  animation: backtotop-bounce .6s ease infinite;
} */
@keyframes backtotop-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-.8rem); }
  60% { transform: translateY(-.4rem); }
}

/* 키보드 포커스 접근성 */
.back-to-top:focus-visible {outline: .3rem solid #9ac5ff;outline-offset: .3rem;}

/* 사용자가 모션 줄임 설정 시 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top:hover {transition: none; animation: none; }
}

/* 메인 프로젝트 */
.project_box {background: url(/re/images/new/project_bg.png) no-repeat 0 0; background-size: 100%; padding: 5.6rem 0 8.3rem 0; height: 60.1rem; }
.project_box .tit { text-align: center; margin-bottom: 1.2rem; display: flex; align-items: center; flex-direction: column;}
.project_box .tit .tit_depth1 {font-size: 2.6rem; color: #fff; font-weight: 700; margin-bottom: 10px; line-height: 1; }
.project_box .tit .desc {font-size: 1.4rem; color: #fff; line-height: 1.8rem; }
.project_box .project_slide {padding: 0 2.4rem 4.2rem 2.4rem;  margin-top: 6rem; }
.project_box .project_slide .item {width: 22rem; border-radius: 2rem; background: #fff; box-shadow: 0 1rem 1.42rem  rgba(65, 65, 65, 0.70); padding: 3.3rem 2rem 2.7rem 2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: 2.2rem; min-height: 29rem; opacity: .5;}
.project_box .project_slide .item .pj_box .tit {font-size: 2rem; color: #000; font-weight: 700; line-height: 3.2rem;}
.project_box .project_slide .item .pj_box .txt {font-size: 1.4rem; line-height: 2rem; font-weight: 400; text-align: center;  }
.project_box .project_slide .item a {display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem; font-weight: 700;  line-height: 3.2rem; padding-top: 2rem; border-top: solid .1rem #E1E1E1; width: 100%; }
.project_box .project_slide .item a::after {content:''; display: block; width: 2.4rem; height: 2.4rem; background: url(/re/images/new/right_icon.png) no-repeat 0 0; background-size: 100%; }
.project_box .project_slide .item.swiper-slide-active {opacity: 1;}

.project_box .project_slide .item .pj_box .tit::before {content:''; display: block; height: 4.5rem; width: 4.5rem; margin-bottom: .5rem; }
.project_box .project_slide .item .pj_box .tit.marketing::before {content:'';  background: url(/re/images/new/pj_icon01.svg) no-repeat 0 0; }
.project_box .project_slide .item .pj_box .tit.content::before {content:'';  background: url(/re/images/new/pj_icon02.svg) no-repeat 0 0; }
.project_box .project_slide .item .pj_box .tit.data::before {content:'';  background: url(/re/images/new/pj_icon03.svg) no-repeat 0 0; }
.project_box .project_slide .item .pj_box .tit.media::before {content:'';  background: url(/re/images/new/pj_icon04.svg) no-repeat 0 0; }
.project_box .project_slide .item .pj_box .tit.manage::before {content:'';  background: url(/re/images/new/pj_icon05.svg) no-repeat 0 0; }
.project_box .project_slide .item .pj_box .tit.entert::before {content:'';  background: url(/re/images/new/pj_icon06.svg) no-repeat 0 0; }

.project_slide .swiper-horizontal>.swiper-pagination-progressbar {position: absolute;left: 0; bottom: 0; }
/* .project_box .project_slide .item.swiper-slide-prev {opacity: 0;} */



/* ====================
	/re/about페이지 CSS 시작 
================================*/


/* ====================
	/re/about페이지 CSS 끝
================================*/



/* ================================
===================================
 /re/ourworks  페이지 CSS 시작
==================================
================================*/

.ourworks-main{position:relative;max-width:174.5rem;width:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;margin:20rem auto 0;}
.ourworks-main .overlay{width:100%;height:100%;background:#ffffff;display:flex;align-items:center;justify-content:center;}
.ourworks-main .text-container{width:100%;padding:0 2.4rem;color:#fff;text-align:left;margin:0 auto;}
.ourworks-main .sub-title{font-size:3rem;font-weight:700;margin-bottom:20px;color:#fff;}
.ourworks-main .main-title{font-size:5.8rem;font-weight:700;line-height:1.8;text-align:left;}
.ourworks-main .text-line{display:block;position:relative;color:#333;overflow:hidden;font-weight:700;line-height:9rem;}
.ourworks-main .text-line02{font-size:3rem;display:block;position:relative;color:#333;overflow:hidden;font-weight:700;line-height:4.6rem;}
.highlight-animate{position:relative;display:inline-block;font-weight:700;color:#000;}
.highlight-animate::before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;color:#E8465A;clip-path:inset(0 100% 0 0);animation:highlightReveal 1.2s ease forwards;}
.highlight-animate:nth-of-type(1)::before{animation-delay:.5s;}
@keyframes highlightReveal{0%{clip-path:inset(0 100% 0 0);}100%{clip-path:inset(0 0 0 0);}}
.profile-panel.active .profile-panel-left h2,.profile-panel.active .profile-panel-right p,.profile-panel.active .profile-download-btn{opacity:0;animation:fadeUp .8s ease forwards;}
.profile-panel-right p{white-space:normal;word-break:keep-all;overflow-wrap:break-word;line-break:loose;hyphens:auto;font-size:1.8rem;line-height:3.4rem;color:#333;}
.profile-panel.active .profile-panel-right p:nth-of-type(1){animation-delay:.3s;}
.profile-panel.active .profile-panel-right p:nth-of-type(2){animation-delay:.5s;}
.profile-panel.active .profile-panel-right p:nth-of-type(3){animation-delay:.7s;}
.profile-panel.active .profile-panel-right p:nth-of-type(4){animation-delay:.9s;}
.profile-tabs{max-width:170.8rem;margin:0 auto;padding:9.2rem 0 2rem;}
.profile-tabs-nav{display:flex;gap:40px;border-bottom:1px solid #e5e5e5;margin-bottom:9.2rem;}
.profile-tab-btn{background:none;border:none;font-size:2rem;font-weight:600;cursor:pointer;color:#999;padding-bottom:10px;position:relative;}
.profile-tab-btn.active{color:#E8465A;}
.profile-tab-btn.active::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:#E8465A;}
.profile-tabs-panels{display:flex;flex-direction:column;gap:40px;min-height:30rem;}
.profile-panel{display:none;gap:12rem;flex-wrap:wrap;}
.profile-panel.active{display:flex;}
.profile-panel-left{flex:0 0 30%;}
.profile-panel-left h2{font-weight:500;line-height:4.6rem;font-size:3.2rem;}
.profile-panel-right{flex:1;}
.profile-download-btn:hover{background:#E8465A;color:#fff;}
.profile-panel-right p:last-of-type{display:inline-block;background:#E8465A;color:#fff;padding:2px 6px;border-radius:2px;font-size:1.8rem;line-height:3.4rem;margin-top:2.6rem;}
@keyframes fadeUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.process-section{max-width:170.8rem;margin:8rem auto 5rem;padding:0 2.4rem;}
.process-steps{display:flex;justify-content:space-between;gap:20px;margin-bottom:10rem;}
.process-step{flex:1;height:60rem;background-size:contain;background-repeat:no-repeat;}
.divider-line{width:100%;height:1px;background-color:#ddd;margin-bottom:30px;display:none;}
.container h2{margin-top:14.2rem;margin-bottom:7rem;font-size:3.2rem;font-weight:500;line-height:4.6rem;}
.process-step.step1{background-image:url(/re/images/new/ourworks/marketing_1.png)}
.process-step.step2{background-image:url(/re/images/new/ourworks/marketing_2.png)}
.process-step.step3{background-image:url(/re/images/new/ourworks/marketing_3.png)}
.process-step.step4{background-image:url(/re/images/new/ourworks/marketing_4.png)}
.works-slider .slider-container{max-width:170.8rem;margin:0 auto;}
.slider-viewport{position:relative;height:auto;border-radius:25px;overflow:hidden;background:#000;touch-action:pan-y;}
.slides{position:relative;width:100%;height:100%;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.slide.active{opacity:1;z-index:1;}
.slide-inner{height:100%;}
.slide-img{width:101%;height:auto;display:block;border-radius:24px;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}
.slide-card{width:100%;border-radius:20px;color:#fff;padding:36px 100px;display:grid;grid-template-columns:280px 1fr;gap:28px;}
.slide-left h4{font-size:18px;margin:0 0 8px;opacity:.9;}
.slide-left h2{font-size:28px;margin:0;font-weight:700;}
.slide-right h3{font-size:24px;margin:0 0 10px;font-weight:700;}
.slide-left p{font-size:18px;margin:0 0 14px;}
.slide-left .desc{font-size:15px;line-height:1.6;opacity:.95;}
.slide-left .sns{display:flex;gap:14px;margin-top:16px;}
.slide-left .sns img{width:20px;height:20px;}
.slide-right h3:nth-of-type(2){margin:0 0 18px;padding-bottom:0;position:relative;}
.slide-right h3:nth-of-type(2)::after{content:"";display:block;height:1px;width:60%;margin-top:12px;}
.slider-progress{margin-top:16px;width:100%;height:3px;background:#e5e5e5;border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;width:0;background:#E8465A;transition:width .35s ease;border-radius:999px;}
.slider-index{margin-top:8px;font-weight:700;color:#222;}
.slider-index .cur{color:#E8465A;}
.pause-toggle{font-size:16px;color:#fff;background:none;border:1px solid #fff;padding:5px 10px;cursor:pointer;}
.sns-icons{display:flex;gap:16px;margin-top:40px;}
.sns-icons img{width:20px;height:20px;}
.banner-bottom{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;padding:0 20px;display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;font-weight:bold;z-index:5;box-sizing:border-box;}
.banner-bottom .arrow{font-size:24px;background:none;border:none;color:#fff;cursor:pointer;}
.banner-bottom .slide-index{font-size:16px;}
.banner-bottom .pause-toggle{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;}
.banner-slide .banner-content .sns-icons{display:flex;gap:16px;margin-top:40px;}
.banner-slide .banner-content .sns-icons img{width:20px;height:20px;}
.slider-actions{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;flex:1 0 auto;}
.slider-bottom{display:flex;align-items:center;gap:12px;margin-top:4rem;}
.slider-bottom .slider-progress{margin-top:0;flex:0 0 90%;}
.pause.icon-btn img{width:10px;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;cursor:pointer;padding:0;}
.icon-btn img{width:2rem;display:block;}
.works-slider.dark .icon-btn{border-color:#fff;color:#fff;}
.current{color:#E8465A;}

/* ================================
===================================
   /re/ourworks 페이지 CSS 끝
==================================
================================*/


/* ================================
===================================
 /re/contact  페이지 CSS 시작
==================================
================================*/

.contact-main{position:relative;max-width:174.5rem;width:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;margin:20rem auto 0;}
.contact-main .overlay{width:100%;height:100%;background:#ffffff;display:flex;align-items:center;justify-content:center;}
.contact-main .text-container{width:100%;padding:0 2rem;color:#fff;text-align:left;margin:0 auto;}
.contact-main .sub-title{font-size:3rem;font-weight:700;margin-bottom:20px;color:#fff;}
.contact-main .main-title{font-size:5.8rem;font-weight:700;line-height:1.8;text-align:left;}
.contact-main .text-line{display:block;position:relative;color:#333;overflow:hidden;font-weight:700;line-height:9rem;}
.contact-main .text-line02{font-size:3rem;display:block;position:relative;color:#333;overflow:hidden;font-weight:700;line-height:4.6rem;}
input::placeholder{color:#aaaaaa;}
textarea::placeholder{color:#aaaaaa;}
.contact-main .text-line::before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;clip-path:inset(0 100% 0 0);animation:revealText 1.2s ease forwards;}
.highlight-animate{position:relative;display:inline-block;color:#000;font-weight:600;}
.highlight-animate::before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;color:#E8465A;clip-path:inset(0 100% 0 0);animation:highlightReveal 1.2s ease forwards;}
.highlight-animate:nth-of-type(1)::before{animation-delay:.5s;}
.contact-main .text-line:nth-child(1)::before{animation-delay:.3s;}
.contact-main .text-line:nth-child(2)::before{animation-delay:1s;}
.contact-main .text-line:nth-child(3)::before{animation-delay:1.7s;}
@keyframes highlightReveal{0%{clip-path:inset(0 100% 0 0);}100%{clip-path:inset(0 0 0 0);}}
@keyframes revealText{0%{clip-path:inset(0 100% 0 0);}100%{clip-path:inset(0 0 0 0);}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
.contact-location{max-width:174.5rem;padding:0 2rem;margin:0 auto;}
.location-tabs{display:flex;border-bottom:1px solid #e5e5e5;gap:4rem;font-size:2rem;padding:9.2rem 0 0 0;}
.location-tabs .tab{cursor:pointer;font-weight:600;color:#999;}
.location-tabs .tab.active{color:#e60033;border-bottom:4px solid #e60033;padding-bottom:1rem;}
.kakao_map{width:100%;height:71rem;position:relative;}
.contact-info{border-top:1px solid #eee;padding:12rem 0 5rem;max-width:170.8rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;display:grid;grid-template-columns:220px 1fr;column-gap:50rem;align-items:start;}
.transport-info{border-top:1px solid #eee;padding:8rem 0 30rem;max-width:170.8rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;display:grid;grid-template-columns:220px 1fr;column-gap:50rem;align-items:start;}
.contact-info h3,.transport-info h3{font-size:3.2rem;font-weight:500;color:#222;margin:0;line-height:4.6rem;}
.info-body{font-size:2rem;color:#333;line-height:4rem;}
.info-flex{display:flex;gap:50px;flex-wrap:wrap;}
.kv{display:flex;gap:20px;margin:6px 0;font-weight:bold;}
.kv>strong{width:70px;color:#000;font-weight:600;display:inline-block;flex:0 0 auto;}
.kv>span{flex:1;}
.tp{margin-bottom:18px;}
.tp-title{font-weight:700;color:#222;margin-bottom:8px;}
.dot-list{list-style:none;margin:0;padding:0;}
.dot-list li{position:relative;margin:6px 0;}
.subway{display:inline-block;padding:3px 7px;border-radius:14px;color:#fff;font-size:14px;line-height:1.2;vertical-align:middle;margin-right:6px;margin-top:-3px;}
.bus{display:inline-block;padding:3px 7px;border-radius:7px;color:#fff;font-size:14px;line-height:1.2;vertical-align:middle;margin-right:6px;margin-top:-3px;}
.subway.green{background-color:#2db400;}
.subway.brown{background-color:#CD7C2F;}
.bus.blue{background-color:#0052cc;}
.bus.green{background-color:#2db400;margin-left:15px;}
.bus-text{margin:6px 0;}
.bus-badges{margin:6px 0 0;}
.contact-info,.transport-info{--side-pad:1.5rem;padding-left:var(--side-pad);padding-right:var(--side-pad);}
.transport-info .tp-subway{position:relative;padding-bottom:18px;margin-bottom:18px;}
.transport-info .tp-subway::after{content:"";position:absolute;left:0;right:calc(var(--side-pad)*-1);bottom:0;height:1px;background:#eee;}
.map-buttons{float:right;position:static;display:flex;gap:8px;z-index:100;margin:15px 0 25px;}
.map-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid #ccc;border-radius:50px;background:#fff;text-decoration:none;transition:all .2s ease;}
.map-btn img{width:24px;height:24px;object-fit:contain;}
.map-btn span{font-size:16px;color:#000;font-weight:500;}
.map-btn:hover{border-color:#999;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.map-buttons img{display:block;width:2.5rem;height:2.5rem;border-radius:4px;transition:transform .2s ease;background:#fff;}
.map-buttons img:hover{transform:scale(1.05);}

.tab-panel{display:none;margin-top:9.2rem;}
.tab-panel.active{display:block;}
.inquiry-layout{display:grid;grid-template-columns:300px 1fr;gap:45rem;padding:0 0 20rem 0;max-width:170.8rem;margin:0 auto;}
.inquiry-left h2{font-size:3.2rem;line-height:4.6rem;margin:0;color:#000;font-weight:500;}
.inquiry-right{width:100%;}
.form-row{margin:0 0 5rem 0;}
.form-row.required>label::after{content:"* ";color:#e60033;font-weight:700;margin-left:.4rem;}
.form-row label{display:block;font-weight:700;color:#000;margin-bottom:8px;font-size:2.2rem;}
.form-row label .en{font-weight:400;color:#000;margin-left:6px;}
.field{position:relative;}
input,select,textarea{width:100%;border:2px solid #ddd;border-radius:6px;padding:1.4rem 4.4rem 1.4rem 1.4rem;font-size:2rem;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff;}
textarea{resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:#bbb;}
.is-invalid{border-color:#E8465A!important;}
.hint.error{display:none;margin:6px 0 0;font-size:1.4rem;color:#E8465A;}
.hint.error.show{display:block;}
.clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:transparent;font-size:18px;line-height:28px;text-align:center;color:#666;cursor:pointer;display:none;}
.field.filled .clear-btn{display:block;}
.count{position:absolute;right:12px;bottom:10px;font-size:15px;color:#999;}
.policy-box{border:1px solid #eee;border-radius:12px;background:#f8f8f8;padding:14px 16px;height:28.3rem;overflow:auto;font-size:1.8rem;color:#898989;line-height:3.4rem;}
.agree{display:flex;align-items:center;gap:8px;margin:5rem 0;color:#333;font-size:14px;}
.actions{margin-top:18px;text-align:center;}
.btn-primary{padding:1.5rem 5rem;border-radius:999px;border:0;font-size:2.8rem;background:#E8465A;color:#fff;font-weight:700;cursor:pointer;}
.btn-primary[disabled]{opacity:.45;cursor:not-allowed;background:#cfcfcf;}
.agree { margin: 2rem 0 6rem 0 !important }
.agree input{position:absolute;width:auto;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;}
.agree .agree-label{position:relative;display:inline-block;padding-left:36px;line-height:28px;cursor:pointer;}
.agree .agree-label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:28px;height:28px;background:url(/re/images/new/contact/checkbox_off.png) no-repeat center/contain;}
.agree input:checked+.agree-label::before{background-image:url(/re/images/new/contact/checkbox_on.png)}
.agree input:focus-visible+.agree-label::after{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:8px;outline:2px solid #222;}
.agree input:disabled+.agree-label{opacity:.5;cursor:not-allowed;}
.privacy{color:#E8465A;text-decoration:underline;}
.inquiry-right .form-row .field,.inquiry-right .form-row .policy-box,.inquiry-right .form-row .agree{width:100%;}
.inquiry-right input,.inquiry-right select,.inquiry-right textarea,.inquiry-right .policy-box{box-sizing:border-box;}
.inquiry-right select{appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.inquiry-right .policy-box{padding-right:16px;}
*,*::before,*::after{box-sizing:border-box;}

/* ================================
===================================
 /re/contact  페이지 CSS 끝
==================================
================================*/


/* ========================================
========================================
========================================
   모바일 반응형 (768px 이하)
   - 모바일 네비게이션
   - 레이아웃 조정
   - 폰트 사이즈 조정
 ========================================
 ========================================
======================================== */
@media screen and (max-width: 768px) {

	.pc_type {display: none;}
	.moble_type {display: block;}
	.pc-br { display: none; }

	.gnb li ~ li {margin-left: .8rem; }
	.gnb a {font-size: 1.6rem;  padding-bottom: .8rem;}
	.top-logo-img{height:auto;}

	.nav-container {padding: 1.5rem 2.4rem;} 
	
	.main-visual {height: calc(100vh - 5.5rem);}
	
	/**/
	.mobile-menu {padding: 0;}
	.mobile_top {display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2.4rem; margin-bottom: 2.6rem; border-bottom : 1px solid #eeeeee;}
	.mobile_top a {display: block; width: 13rem;  }
	.mobile_top a img {max-width: 100%;}
	.mobile_top .close-btn {display: block; background: url('/re/images/new/close_btn.svg') no-repeat center; width: 2.4rem; height: 2.4rem; font-size: 0;  }
	.mobile-menu ul {padding: 0 2.4rem; margin: 0; }
	.visual-inner {margin-bottom:12rem;}
	.visual-inner h2 {line-height: 0.2rem;}
	/* ===== 모바일 네비게이션 ===== */
	.gnb {display: none; position: absolute; top: 64px; left: 0; width: 100%; background: #fff; padding: 1rem 2rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,0.05); z-index: 999;}

	/* 모바일 메뉴 오픈 상태 */
	.gnb.open {display: block;}

	/* 모바일 메뉴 리스트 */
	.gnb ul {flex-direction: column; gap: 20px;}
	.gnb li {margin: 0; padding: 0;}
	.gnb li::after {display: none;}

	/* 모바일 메뉴 토글 버튼 표시 */
	.menu-toggle {display: block;}

	/* ===== 모바일 로고 크기 조정 ===== */
	.logo-img {width: 28rem;}
	.top-logo-img {width: 13rem; margin-left: 0;}

	/* ===== 모바일 main title 섹션 ===== */

	/* <br>이 실제 줄바꿈으로 동작 */
	.mo-br { display: inline; }      
	.hero-title {font-size: 4rem; line-height: 130%;}
	.hero-title .title-ko { display: inline-block; font-size: 5.5rem; line-height: 100%; word-break: keep-all; }
	.hero-title .title-ko span {font-size: 5.5rem; line-height: 130%;}
	.hero-ready .en-ch {font-size:1.4rem; }
	.hero-title .title-en {color:black; font-size:1.6rem;  }
	.title-scroll img {width:80%;}
	.scroll_arrow {width:20px !important;}
	

	/* ===== 모바일 OUR WORKS 섹션 ===== */

	/* 모바일 카드 크기 */
	.list_category {width: 90%; max-width: 31rem; }
	.service_cont {height: auto; padding-bottom: 10rem; display: contents; flex-direction: column; align-items: center; height: auto; padding: 0 0 5rem 0; }
	.card-more span {font-size: 1.4rem; font-weight: 600; color: #e8465a; white-space: nowrap; }
	.card-more img {width: 2rem; height: 2rem; margin-left: 0; }
	.card-more {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 1rem; position: relative; gap: 0; }
	.ourworks-section {position: relative; top: 0; left: 0; width: 100%; height: auto; }
	.tit_box {width: 100%; text-align: center; padding-top: 5rem; margin-bottom: 8rem;}
	.scroll_area {width: 100%;}
	.list_box { width: 100% !important; padding: 0 !important; gap: .5rem !important; flex-direction: column;  flex-wrap: nowrap; min-height: auto; }
	.list_box li.card a {padding : 2.5rem 2rem !important; height : 70% !important;}
	.service_cont .list_box li {width: 75% !important; margin-top: 0 !important;}
	.service_cont .list_box li:nth-child(2n) a {margin-top: 0px;}
	.list_box li a {height: auto;}
	.list_box li {width: 90%; margin: 0 auto; height: auto;}

	/* ===== 모바일 파트너 섹션 ===== */
	.partners-section {padding: 6rem 0 6rem 0; height: auto; min-height:auto;}
	.partners-section .container {text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2rem;}

	/* 모바일 파트너 타이틀 */
	.partners-section .section-title {font-size: 2.6rem; margin: 0 0 1rem 0; line-height: 2.4rem; text-align:center;}

	/* 모바일 파트너 서브타이틀 */
	.partners-section .section-subtitle {font-size: 1.4rem; margin-bottom: 3rem; font-weight: 500; color: #000; line-height: 150%;text-align:center; }
	.partners-section .partners-image {margin: 2rem auto 0; display: block; max-width: 100%; width:42.7rem; }
	.partners-section .section-title,
	.partners-section .section-subtitle { width: 100%;}

	/* ===== 모바일 Contact 섹션 ===== */
	.contact-section {height: auto; padding: 0; min-height:auto; width: calc(100% - 4.8rem); margin: 0 auto 6rem auto; border-radius: 2rem;}
	.contact-content {padding: 5rem 0 0rem 0; height:18rem;}

	/* 모바일 컨택트 타이틀 */
	.contact-section .section-title {font-size: 3.6rem; margin-bottom: 2rem;}

	/* 모바일 컨택트 서브타이틀 */
	.contact-section .section-subtitle {font-size: 2rem; margin-bottom: 1.2rem; display: none; }

	/* 모바일 컨택트 설명 */
	.contact-section .section-description {margin-bottom: 1.4rem;}
	.contact-section .section-description em {display: block; font-size: 1.5rem;  font-weight: 700; line-height: 2rem; } 
	.contact-section .section-description span {display: block; font-size: 1.5rem; font-weight: 700; opacity: 0.9; text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.3); color: #fff; line-height: 125%;  }
	/* 모바일 CTA 버튼 */
	.contact-button {background-color: rgba(0, 0, 0, 0.2); padding: 0.8rem 0; font-size: 1.4rem; font-weight: 700; border: .1rem solid #fff; gap: .4rem; max-width: 14.6rem; width: 100%;         justify-content: center;}
	
	/* 풋터영역 */
	.footer-info {width: 100%; }
	.footer-left .footer-logo {width: 14.5rem; }
	.site-footer {font-size:1.2rem; background: #F7F7F7; color: #313131; padding: 3.6rem 0 3rem 0; }
	.footer-container {flex-direction: column; gap: 5.4rem; }
    .footer-contact { flex-direction: column; align-items: self-start; gap: 0; }
    .footer-family {margin-top: 1rem;}
    .back-to-top {right: 2rem; top: -6rem; }
    .family-btn {padding: .8rem 1.2rem; gap: .6rem; height: 3.4rem; font-size: 1.2rem;}
	.footer-company-info .company-name {font-size: 1.2rem; font-weight: 700; line-height: 1.4rem;} 
	.footer-company-info .company-address {font-size: 1.2rem; font-weight: 400; line-height: 1.4rem;} 
	.contact-item ~ .contact-item  {margin-top: 3rem; }
	
	.family-list {display: none; position: absolute; right: 0; bottom: 4.2rem; background: #fff; color: #333; border-radius: .6rem; list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; border: .1rem solid darkgrey; overflow: hidden; }
	.footer-family.open .family-list {display: block;}
	.family-list li a {display: block; padding: 0 1rem;text-decoration: none; color: #333; font-size: 1.2rem; line-height: 3rem;}
	
	/* 연락처 */
	.footer-contact h4 {font-size: 1.2rem; font-weight: 600; }
	.footer-contact p {font-size: 1.2rem; font-weight: 300; margin-bottom: 1rem;}
	.footer-contact .divider {background: #313131; width: 13.2rem; height: .1rem; }
	
	/* 카피라이트 (로고 라인 기준 왼쪽 정렬) */
	.footer-copyright {font-size: 1.1rem; color: #999; margin-top: 3rem; font-weight: 400; margin-bottom: 5.4rem;}
	.footer-bottom {position: static; max-width: 100%;}
	
	.back-to-top img {width:3.5rem;height:3.5rem;}

	/* ================================
	===================================
		/re/about 모바일 페이지 CSS 시작
	==================================
	================================*/

	/* ================================
	===================================
		/re/about 모바일 페이지 CSS 끝
	==================================
	================================*/
  

	/* ================================
	===================================
	/re/ourworks 모바일 페이지 CSS 시작
	==================================
	================================*/

	.profile-tabs-nav {display: flex;gap: 25px !important;margin-bottom: 4rem !important;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;scroll-snap-type: x proximity;scrollbar-width: none;}

	.banner-content-container { padding: 40px 20px; }
	.banner-top,
	.banner-bottom {flex-direction: column;align-items: flex-start;}
	.banner-right {text-align: left !important;margin-top: 20px;}
  
	.pause-toggle { margin: 10px 0; }
	.sns-icons { margin-top: 10px; }
	.process-steps {flex-wrap: wrap;margin-bottom: 5rem;}
	.process-step {flex: 1 1 calc(50% - 10px);height: 250px;}
  
	.profile-panel { gap: 2rem; }
	.icon-btn { width: 28px; height: 28px; }
	.icon-btn img { width: 16px; height: 16px; }
  
	.slider-viewport { height: 440px; }
	.slide-card { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
	.slide-left h2 { font-size: 24px; }
	.slide-right h3 { font-size: 20px; }
	.slide-right p { font-size: 16px; }
	.slider-bottom { gap: 10px; }
	.slider-bottom .slider-progress { flex-basis: 100%; }
	.slide-right h3:nth-of-type(2) { margin-bottom: 14px; }
	.slider-actions { display: none; }
  
	.works-slider { padding: 0 2.4rem; }
  
	.profile-tab-btn {flex: 0 0 auto;font-size: 1.4rem;white-space: nowrap;scroll-snap-align: center;padding-bottom: 1rem;}
	.profile-panel-left h2 { font-size: 1.6rem; line-height: 2.2rem; }
	.profile-panel-right p { font-size: 1.2rem; line-height: 2.4rem; }
	.profile-panel.active { flex-direction: column; padding-right: 2.4rem; }
	.profile-panel-right p:last-of-type { font-size: 1.2rem; line-height: 2.4rem; }
	.profile-tabs-panels { min-height: 24rem; }
  
	.ourworks-main { margin: 6rem auto 0; }
	.ourworks-main .text-line { font-weight: 700; line-height: 2.2rem; font-size: 2.4rem; }
	.ourworks-main .text-line02 { font-weight: 700; line-height: 2.2rem; font-size: 1.6rem; margin-top: 2rem; }
	.profile-tabs { padding: 4rem 0 2rem 2.4rem; position: relative; }
  
	.container h2 { margin: 10.3rem 0 4rem 0; font-size: 1.6rem; line-height: 2.2rem; }
	.divider-line { display: none; }

	/* ================================
	===================================
	/re/ourworks 모바일 페이지 CSS 끝
	==================================
	================================*/

	
	/* ================================
	===================================
	/re/contact 모바일 페이지 CSS 시작
	==================================
	================================*/

	.contact-info {padding: 0 0 4rem 0;grid-template-columns: 1fr;margin-top: 8rem;}
	.contact-main .text-container { padding: 0 2.4rem; }
	.transport-info {padding: 0 0 8rem 0;grid-template-columns: 1fr;row-gap: 12px;}
	.contact-info h3,
	.transport-info h3 { font-size: 1.6rem; line-height: 6.6rem; }
	.transport-info .tp-subway { padding-bottom: 14px; margin-bottom: 14px; }
	.tp.tp-bus,
	.tp.tp-subway { line-height: 3rem; }
	.kv > strong { font-size: 1.2rem; font-weight: 700; height: 2rem; }
	.kv > span    { font-size: 1.1rem; }
	.kv { gap: 0; margin: 1.2rem 0; flex-direction: column; }
	.inquiry-layout { display: block !important; padding: 0 !important; }
	.inquiry-left h2 { font-size: 1.6rem !important; line-height: 2.2rem !important; padding: 2rem 0 3rem !important; }
	.info-body { line-height: 2rem; }
	.form-row label { font-size: 1.4rem !important; }
	.form-row { margin: 0 0 3rem 0 !important; }
	input,
	select,
	textarea { font-size: 1.3rem !important; }
	.count { font-size: 1.2rem !important; }
	.policy-box { font-size: 1.1rem !important; line-height: 2.2rem !important; height: 15rem !important; }
	.agree { text-align: center !important; margin: 2rem 0 !important; }
	.field textarea { height: 17rem; }
	.g-recaptcha { margin-left: 2rem; }
	.btn-primary { font-size: 1.6rem !important; padding: 1.2rem 3.8rem !important; margin: 0 0 10rem 0 !important; }
	.contact-main { margin: 6rem auto 0; }
	.contact-main .text-line { font-weight: 700; line-height: 2.2rem; font-size: 2.4rem; }
	.contact-main .text-line02 { font-weight: 700; line-height: 2.2rem; font-size: 1.6rem; margin-top: 2rem; }
	.contact-location { padding: 0 2.4rem; }
	.location-tabs { padding: 4rem 0 0 0; font-size: 1.4rem; }
	.tab-panel { margin-top: 4rem !important; }
	.map-btn { padding: .4rem .8rem; }
	.map-btn span { font-size: 1.1rem; }
	.map-buttons img { width: 2rem; height: 2rem; }
	#kakao_map { height: 17rem !important; }
	.dot-list li { font-size: 1.1rem; }
	.bus-text { font-size: 1.1rem; }
	.bus.green { margin-left: 0; }
	.subway,
	.bus { font-size: 1.2rem; }
	.tp-title { font-size: 1.2rem; }
	.bus-badges { font-size: 1.1rem; }
		
	/* ================================
	===================================
	/re/contact 모바일 페이지 CSS 끝
	==================================
	================================*/
  
  
	
}