@charset "UTF-8";
/********************************************************
■ 사이트 초기 설정
********************************************************/
:root {
	/* 테마 전체 색상 */
    --main-color1:#f77100;
    --main-color2:#e49c00;
    --main-color3:#061635;
    --main-color1-rgb:4, 52, 143;
    --main-color2-rgb:255, 165, 15;
    --main-color3-rgb:11, 61, 153;
    --main-width:1200px;
	
	--primary-color: #44536a;
	--secondary-color: #e9edf2;
	--tertiary-color: #e84958;
	--point-color: #e84958;
	--darkgray-color: #c2c2c2;
	--lightgray-color: #f7f7f7;
	--white-color: #ffffff;
	--footerbg-color: #f9f9f9;
	--background-color: #f9f9f9;

	--line-color: #dddddd;
	--body-color: #212326;
	--text-color: #212326;

	--inner-size: 1200px;
	--w-inner-size: 1200px;
	
    /* sns 색상 */
    --kakao-color:#ffe800;
    --instagram-color:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
    --naver-color:#06be34;
    --facebook-color:#435e99;
    --youtube-color:#d4262c;
    --twiter-color:#27a9e0;

	/* 게시판 아이콘 색상 */
	--board-secret-color:#333;
	--board-new-color:#eeb506;
	--board-hot-color:#d91426;
	--board-file-color:#333;
	--board-link-color:#195dae;

	/* 컬러 */
    --color-red:#fd1f2a;
    --color-orange:#ff5f15;
    --color-yellow:#f8af11;
    --color-green:#63b417;
    --color-blue:#0041a3;
    --color-navy:#05102c;
    --color-purple:#53237a;
    --color-pink:#ec4f71;
    --color-beige:#ddc2ad;
    --color-brown:#381e13;
    --color-gray:#bfc2ca;
    --color-skyblue:#44abe7;

	/* .c padding값 */
    --c-padding:15px;

    /* 메인&서브 좌우 패딩 */
    --top-padding:3vw;
}
html{font-size: 62.5%;}

body,td,h1,h2,h3,h4,h5,div,p,li,ul,ol,dd,dt,section,input,textarea,select,button{margin:0;padding:0; font-size:13px; color:#333; line-height:1.6em; font-family: 'Pretendard GOV', sans-serif; font-weight:500; letter-spacing:-0.02em;}
ul,ol,li{margin:0;padding:0;list-style:none;}

input[type=password]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: "Pretendard GOV", sans-serif;
}
input[type=password]::-moz-placeholder { /* Firefox 19+ */
  font-family: "Pretendard GOV", sans-serif;
}
input[type=password]:-ms-input-placeholder { /* IE 10+ */
 font-family: "Pretendard GOV", sans-serif;
}
input[type=password]:-moz-placeholder { /* Firefox 18- */
  font-family: "Pretendard GOV", sans-serif;
}

a, img{border:0px; vertical-align:middle;}
a{text-decoration:none;}
/*a:hover{ color:#00529B;}*/
strong{font-weight:500;}
.list-unstyled {list-style:none}

*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* ===================================================================
   common.css — 헤더, 모바일메뉴, 서브비주얼, 공통 레이아웃
   =================================================================== */


/* ----- 공통 유틸리티 ----- */
.all_wrap{overflow: hidden; position: relative;}
.width{width: 92%; max-width: 1200px; margin: 0 auto;}
.common{padding: 140px 0;}
.pc{display: block;}
.mob{display: none;}
.label{display: inline-block; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 500; color: var(--color, #004E73); letter-spacing: 2px; line-height: 100%; margin-bottom: 16px;}

/* ===================================================================
   관리자 퀵메뉴
   =================================================================== */
.main_admin{position: fixed; top: 0; right: 0; z-index: 10000; display: flex; gap: 0;}
.main_admin li a{display: block; padding: 8px 16px; font-size: 12px; color: #fff; background: #333;}
.main_admin li:nth-child(2) a{background: var(--color, #004E73);}
.main_admin li:last-child a{background: #c00;}


/* ===================================================================
   PC 헤더  (고정, 투명 → 스크롤시 불투명)
   =================================================================== */
#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 9000; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06);}
#header .head_menu{display: flex; align-items: center; justify-content: space-between; height: 100px;}

/* 로고 */
#header .logo{flex-shrink: 0;}
#header .logo a{display: inline-block;}
#header .logo img{height: 48px; width: auto;}
#header .logo .logo_w{display: none;}
#header .logo .logo_c{display: block;}

/* 스크롤시 */
#header.scrolled{box-shadow: 0 2px 12px rgba(0,0,0,0.06);}
#header.scrolled .head_menu{height: 80px;}

/* 메인 메뉴 */
.main_menu{display: flex; gap: 0;}
.main_menu > .dept1{position: relative;}
.main_menu > .dept1 > a{display: block; padding: 0 45px; font-size: var(--fs18, 18px); font-weight: 700; color: #333; line-height: 100px; transition: color 0.3s, line-height 0.3s;}
#header.scrolled .main_menu > .dept1 > a{line-height: 80px;}
.main_menu > .dept1 > a:hover,
/*.main_menu > .dept1 > a.on{opacity: 0.7;}*/
.main_menu > .dept1 > a.on{color: var(--color, #004E73);}

/* 서브 메뉴 (드롭다운) */
.main_menu .sub_menu{position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 180px; padding: 16px 0; background: #fff; border-radius: 0 0 12px 12px; border-top: 3px solid var(--color, #004E73); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;}
.main_menu > .dept1:hover .sub_menu{opacity: 1; visibility: visible;}
.main_menu .sub_menu .dept2 a{display: block; padding: 10px 28px; font-size: 15px; font-weight: 600; color: #555; white-space: nowrap; transition: color 0.2s;}
.main_menu .sub_menu .dept2 a:hover,
.main_menu .sub_menu .dept2 a.on{color: var(--color, #004E73);}

/* 햄버거 버튼 (PC) */
.menu_bar{display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;}
.menu_bar i{font-size: 28px; color: #333;}


/* ===================================================================
   PC 사이트맵 (전체메뉴 오버레이)
   =================================================================== */
.menu_open{position: fixed; top: 0; right: -500px; width: 460px; height: 100vh; background: #fff; z-index: 9500; transition: right 0.4s; overflow-y: auto;}
.menu_open.on{right: 0;}
.menu_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9400; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.menu_bg.on{opacity: 1; visibility: visible;}

.site_map_wrap{padding: 40px 0;}
.site_map_top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.site_map_top .logo img{height: 36px; width: auto;}
.menu_close{font-size: 18px; color: #333; line-height: 100%; letter-spacing: -1px;}

.site_map > .dept1{margin-bottom: 30px;}
.site_map > .dept1 > a{display: block; font-size: var(--fs22, 22px); font-weight: 600; color: #222; padding-bottom: 14px;}
.site_map > .dept1:has(.site_menu) > a{border-bottom: 1px solid #e5e5e5;}
.site_menu{padding-top: 14px;}
.site_menu .dept2 a{display: block; padding: 8px 0; font-size: 15px; color: #777;}
.site_menu .dept2 a:hover,
.site_menu .dept2 a.on{color: var(--color, #004E73); font-weight: 600;}

.site_foot{margin-top: 50px; padding-top: 30px; border-top: 1px solid #e5e5e5;}
.site_login{display: flex; gap: 12px;}
.site_login a{font-size: 14px; color: #888;}
.site_login a:hover{color: #333;}


/* ===================================================================
   모바일 헤더
   =================================================================== */
.mobile_head{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #fff; z-index: 9000; box-shadow: 0 1px 6px rgba(0,0,0,0.06); align-items: center; justify-content: space-between; padding: 0 4%;}
.mobile_head .mobile_logo img{height: 30px; width: auto;}

/* 모바일 햄버거 */
.mobile_open{display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 26px;}
.mobile_open span{display: block; width: 100%; height: 2px; background: #333;}

/* 모바일 사이드 메뉴 */
.mobile_menu{position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; background: #fff; z-index: 9600; transition: left 0.35s; overflow-y: auto;}
.mobile_menu.on{left: 0;}
.mob_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9500; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.mob_bg.on{opacity: 1; visibility: visible;}

/* 모바일 메뉴 상단 */
.mob_top{display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;}
.mob_top .mob_logo img{height: 28px; width: auto;}
.mobile_close{font-size: 18px; color: #333; line-height: 100%; letter-spacing: -1px;}

/* 모바일 로그인 영역 */
.mob_login{padding: 16px 24px; background: #f8f8f8;}
.mob_login span{display: block; font-size: 14px; color: #555; margin-bottom: 10px;}
.mob_login_btn{display: flex; gap: 8px;}
.mob_login_btn a{display: inline-block; padding: 8px 16px; font-size: 13px; border: 1px solid #ddd; border-radius: 6px; color: #555;}

/* 모바일 네비게이션 */
.mob_nav{padding: 10px 0;}
.mob_nav .top_menu{display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 16px; font-weight: 600; color: #333; border-bottom: 1px solid #f0f0f0;}
.mob_nav .top_menu:not(.no_sub)::after{content: '+'; font-size: 20px; font-weight: 300; color: #999; transition: transform 0.3s;}
.mob_nav .top_menu.on:not(.no_sub)::after{transform: rotate(45deg);}
.mob_nav .sub_menu{display: none; background: #fafafa;}
.mob_nav .sub_menu li a{display: block; padding: 12px 24px 12px 36px; font-size: 14px; color: #666; border-bottom: 1px solid #f0f0f0;}
.mob_nav .sub_menu li a:hover,
.mob_nav .sub_menu li a.on{color: var(--color, #004E73);}


/* ===================================================================
   서브 비주얼
   =================================================================== */
.sub_visual{position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 180px 0 80px;}
.sub_visual::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.sub_top_text{position: relative; z-index: 1; text-align: center;}
.sub_top_text h3{font-size: 4.2rem; font-weight: 600; color: #fff; line-height: 130%;}

/* 브레드크럼 */
.lnb{position: relative; z-index: 1; margin-top: 24px;}
.lnb .lnb_map{display: flex; align-items: center; gap: 0; border-radius: 100px; background: rgba(0,0,0,0.35); padding: 10px 24px;}
.lnb_map .home{display: flex; align-items: center;}
.lnb_map .home i{font-size: 16px; color: rgba(255,255,255,0.8);}
.lnb_map .dep,
.lnb_map .dep2{position: relative; padding-left: 24px; margin-left: 12px; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 100%;}
.lnb_map .dep::before,
.lnb_map .dep2::before{content: '>'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: 'SUIT', sans-serif; font-weight: 200; font-size: 12px; color: rgba(255,255,255,0.5);}
.lnb_map .dep2{color: #fff;}

/* 서브 탭 (2차 메뉴) */
/* 서브 네비게이션 */
.sub_nav{border-bottom: 1px solid #e5e5e5;}
.sub_nav_wrap{display: flex; align-items: stretch;}
.sub_nav_home{display: flex; align-items: center; justify-content: center; width: 56px; background: var(--color, #004E73); color: #fff; font-size: 18px; flex-shrink: 0;}
.sub_nav_dep{position: relative; border-right: 1px solid #e5e5e5; width: 240px; flex-shrink: 0;}
.sub_nav_btn{display: flex; align-items: center; width: 100%; padding: 0 24px; height: 56px; font-size: 15px; font-weight: 500; color: #333; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; justify-content: space-between;}
.sub_nav_btn i{font-size: 12px; color: #aaa; transition: transform 0.2s;}
.sub_nav_dep.open .sub_nav_btn i{transform: rotate(180deg);}
.sub_nav_drop{display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #e5e5e5; border-top: 0; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.06);}
.sub_nav_dep.open .sub_nav_drop{display: block;}
.sub_nav_drop li{}
.sub_nav_drop a{display: block; padding: 14px 24px; font-size: 14px; color: #666; transition: all 0.15s;}
.sub_nav_drop a:hover, .sub_nav_drop a.on{background: #f5f7f9; color: var(--color, #004E73); font-weight: 600;}


/* ===================================================================
   메인 비주얼 (Swiper)
   =================================================================== */
.visual{position: relative; height: 85vh; overflow: hidden;}
.visualSwiper, .visualSwiper .swiper-wrapper, .visualSwiper .swiper-slide{height: 100%;}
.visualSwiper .swiper-slide{position: relative;}

/* 배경 (이미지 / 비디오 / 유튜브 공통) */
.visual_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.visual_bg img{width: 100%; height: 100%; object-fit: cover;}
.visual_bg video{width: 100%; height: 100%; object-fit: cover;}

/* 유튜브 배경 (jarallax) */
.visual_bg.jarallax{z-index: 0;}

/* 어두운 오버레이 */
.visual .swiper-slide::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); z-index: 1;}

/* 텍스트 — 좌측 정렬 */
.visual_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 92%; max-width: 1200px;}
.visual_text h2{font-family: 'Pretendard', sans-serif; font-size: 68px; font-weight: 800; color: #fff; line-height: 140%;}
.visual_text p{margin-top: 28px; font-size: 20px; color: rgba(255,255,255,0.7); line-height: 160%;}

/* Splitting.js 글자 애니메이션 */
.visual_text h2 .char{display: inline-block; opacity: 0; filter: blur(4px); transform: translateX(-8px); transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);}
.visual_text h2.split-animate .char{opacity: 1; filter: blur(0); transform: translateX(0); transition-delay: calc(0.05s * var(--char-index));}

/* 탭형 페이지네이션 */
.visual_tab{position: absolute; bottom: 0; left: 0; width: 100%; z-index: 100; border-top: 1px solid rgba(255,255,255,0.2);}
.visual_tab_wrap{display: flex;}
.visual_tab_item{position: relative; flex: 1; padding: 22px 28px; cursor: pointer; transition: background 0.3s;}
.visual_tab_item + .visual_tab_item{border-left: 1px solid rgba(255,255,255,0.2);}
.visual_tab_item span{display: block; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.4); margin-bottom: 8px; line-height: 100%;}
.visual_tab_item p{font-size: 14px; color: rgba(255,255,255,0.4); line-height: 150%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 탭 활성 상태 */
.visual_tab_item.on span{color: #fff;}
.visual_tab_item.on p{color: rgba(255,255,255,0.9);}

/* 탭 상단 프로그레스 바 */
.visual_tab_bar{position: absolute; top: -1px; left: 0; width: 0; height: 3px; background: var(--color, #f9f9f9);}
.visual_tab_item.on .visual_tab_bar{animation: tabProgress 5s linear forwards;}

@keyframes tabProgress{
    from{width: 0;}
    to{width: 100%;}
}


/* ===================================================================
   메인 — 회사 소개 (m1_intro)
   =================================================================== */
.m1_intro_wrap{display: flex; justify-content: space-between; align-items: center;}
.m1_intro_text{width: 50%;}
.m1_intro_text h2{font-size: var(--fs42, 42px); font-weight: 700; color: #222; line-height: 140%; margin-bottom: 32px;}
.m1_intro_text p{font-size: var(--fs18, 18px); color: #666; line-height: 180%;}
.m1_intro_img{width: 44%;}
.m1_intro_img img{width: 100%; border-radius: 20px;}

/* 마키 트랙 */
.marquee_track{overflow: hidden; margin-top: 100px;}
.marquee_inner{display: flex; gap: 60px; white-space: nowrap; animation: marqueeScroll 20s linear infinite;}
.marquee_inner span{font-family: 'Outfit', sans-serif; font-size: 80px; font-weight: 600; color: #f7f7f7; line-height: 100%; flex-shrink: 0;}

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


/* ===================================================================
   메인 — 테마 특징 (m2_feature)
   =================================================================== */
.m2_feature{background: #f9f9f9;}
.m2_top{margin-bottom: 60px;}
.m2_top h2{font-size: var(--fs42, 42px); font-weight: 700; color: #222; line-height: 140%;}
.m2_feature .box_wrap{display: flex; flex-wrap: wrap; gap: 24px 3%;}
.m2_feature .box{width: 31.3%; background: #fff; border-radius: 20px; padding: 48px 40px; transition: background 0.4s ease, transform 0.4s ease;}
.m2_feature .box:hover{background: var(--color, #004E73); transform: translateY(-8px);}
.m2_feature .box:hover i{color: #fff;}
.m2_feature .box:hover strong{color: #fff;}
.m2_feature .box:hover p{color: rgba(255,255,255,0.7);}
.m2_feature .box i{font-size: 32px; color: var(--color, #004E73); margin-bottom: 28px; display: block; transition: color 0.4s ease;}
.m2_feature .box strong{display: block; font-size: var(--fs22, 22px); font-weight: 600; color: #222; margin-bottom: 16px; line-height: 130%; transition: color 0.4s ease;}
.m2_feature .box p{font-size: var(--fs18, 18px); color: #888; line-height: 150%; transition: color 0.4s ease;}


/* ===================================================================
   메인 — 테마 쇼케이스 (m3_showcase)
   =================================================================== */
.m3_showcase{background: #111; padding: 140px 0 !important; overflow: hidden; position: relative;}
.m3_top{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px;}
.m3_top_text .label{color: rgba(255,255,255,0.5);}
.m3_top_text h2{font-size: var(--fs42, 42px); font-weight: 700; color: #fff; line-height: 140%;}
.m3_control{display: flex; align-items: center; gap: 20px;}
.m3_counter{font-family: 'Outfit', sans-serif; font-size: 16px; color: rgba(255,255,255,0.4); letter-spacing: 2px;}
.m3_counter .m3_current{color: #fff; font-weight: 600;}
.m3_nav{display: flex; gap: 8px;}
.m3_prev, .m3_next{width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s;}
.m3_prev:hover, .m3_next:hover{background: #fff; border-color: #fff;}
.m3_prev span, .m3_next span{font-family: 'SUIT', sans-serif; font-size: 18px; font-weight: 200; color: rgba(255,255,255,0.6); line-height: 100%;}
.m3_prev:hover span, .m3_next:hover span{color: #111;}

.m3_slider{padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2);}
.m3Swiper{overflow: visible;}
.m3Swiper .swiper-slide{overflow: hidden; border-radius: 16px; position: relative;}
.m3Swiper .swiper-slide a{display: block; position: relative;}
.m3Swiper .m3_img{overflow: hidden; aspect-ratio: 8/5;}
.m3Swiper .m3_img img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.m3Swiper .swiper-slide a:hover .m3_img img{transform: scale(1.08);}

/* 오버레이 */
.m3Swiper .m3_overlay{position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 36px; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity 0.4s ease;}
.m3Swiper .swiper-slide a:hover .m3_overlay{opacity: 1;}
.m3Swiper .m3_overlay .m3_num{font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.5); letter-spacing: 2px;}
.m3Swiper .m3_overlay strong{font-size: var(--fs22, 22px); font-weight: 600; color: #fff; line-height: 140%;}
.m3Swiper .m3_overlay .m3_more{font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 3px; margin-top: 8px;}

.m3_empty{text-align: center; color: rgba(255,255,255,0.4); padding: 60px 0;}


/* ===================================================================
   메인 — 숫자로 보는 성과 (m4_stats)
   =================================================================== */
.m4_story{background: #fff; padding: 140px 0 120px; text-align: center;}
.m4_story_inner h2{font-size: 46px; font-weight: 700; color: #222; line-height: 150%; margin-bottom: 28px;}
.m4_story_inner p{font-size: var(--fs18, 18px); color: #888; line-height: 180%;}

.m4_count{background: #fff; border-top: 1px solid #eee;}
.m4_stats .box_wrap{display: flex; gap: 0;}
.m4_stats .box{flex: 1; text-align: center; padding: 60px 20px; position: relative;}
.m4_stats .box + .box::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60px; background: #e8e8e8;}
.m4_stats .box i{font-size: 28px; color: var(--color, #004E73); margin-bottom: 20px; display: block;}
.m4_stats .box strong{display: block; font-family: 'Outfit', sans-serif; font-size: 48px; font-weight: 700; color: #222; line-height: 100%; margin-bottom: 12px;}
.m4_stats .box .count{font-family: 'Outfit', sans-serif;}
.m4_stats .box p{font-size: 15px; color: #999; line-height: 140%;}


/* ===================================================================
   메인 — 이용 프로세스 (m5_process)
   =================================================================== */
.m5_process{background: #f9f9f9;}
.m5_top{margin-bottom: 60px;}
.m5_top h2{font-size: var(--fs42, 42px); font-weight: 700; color: #222; line-height: 140%;}
.m5_process .box_wrap{display: flex; gap: 0; counter-reset: step;}
.m5_process .box{flex: 1; padding: 48px 36px; background: #fff; position: relative; border-right: 1px solid #eee;}
.m5_process .box:first-child{border-radius: 20px 0 0 20px;}
.m5_process .box:last-child{border-radius: 0 20px 20px 0; border-right: 0;}
.m5_num{display: block; font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 700; color: var(--color, #004E73); opacity: 0.15; line-height: 100%; margin-bottom: 24px;}
.m5_process .box strong{display: block; font-size: var(--fs22, 22px); font-weight: 600; color: #222; margin-bottom: 14px; line-height: 130%;}
.m5_process .box p{font-size: var(--fs18, 18px); color: #888; line-height: 150%;}
.m5_process .box::after{content: ''; position: absolute; top: 50%; right: -14px; width: 28px; height: 28px; background: #f9f9f9; border-right: 1px solid #eee; border-bottom: 1px solid #eee; transform: translateY(-50%) rotate(-45deg); z-index: 1;}
.m5_process .box:last-child::after{display: none;}


/* ===================================================================
   메인 — 공지사항 (m6_notice)
   =================================================================== */
.m6_notice{position: relative; overflow: hidden; background: #fff;}
.m6_notice::before{content: ''; position: absolute; top: -120px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,78,115,0.06) 0%, transparent 70%); pointer-events: none;}
.m6_notice::after{content: ''; position: absolute; bottom: -100px; left: -60px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,78,115,0.04) 0%, transparent 70%); pointer-events: none;}
.m6_wrap{display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1;}
.m6_left{width: 35%;}
.m6_left h2{font-size: var(--fs42, 42px); font-weight: 700; color: #222; line-height: 140%; margin-bottom: 20px;}
.m6_left p{font-size: var(--fs18, 18px); color: #888; line-height: 150%; margin-bottom: 36px;}
.m6_btn{display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 0; border-radius: 100px; font-size: 15px; font-weight: 500; color: #fff; background: var(--color, #004E73); position: relative; overflow: hidden; z-index: 1; transition: all 0.4s;}
.m6_btn::before{content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: #222; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; z-index: -1;}
.m6_btn:hover::before{width: 300px; height: 300px;}
.m6_btn i{transition: transform 0.3s;}
.m6_btn:hover i{transform: translateX(4px);}
.m6_right{width: 58%;}
.m6_list{list-style: none; margin: 0; padding: 0;}
.m6_list li{}
.m6_list li + li{margin-top: 12px;}
.m6_list li a{display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; background: #fff; border-radius: 12px; transition: all 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.04);}
.m6_list li a:hover{transform: translateX(8px); box-shadow: 0 4px 16px rgba(0,78,115,0.08);}
.m6_list li a:hover .m6_subject{color: var(--color, #004E73);}
.m6_subject{font-size: var(--fs18, 18px); color: #333; font-weight: 400; line-height: 140%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; padding-right: 20px; transition: color 0.3s;}
.m6_date{font-family: 'Outfit', sans-serif; font-size: 14px; color: #bbb; flex-shrink: 0;}
.m6_empty{padding: 40px 0; text-align: center; color: #999;}


/* ===================================================================
   메인 — CTA (m7_cta)
   =================================================================== */
.m7_cta{position: relative; padding: 160px 0; overflow: hidden; background: url('../img/m7_bg.png') center / cover no-repeat;}
.m7_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); pointer-events: none;}
.m7_inner{position: relative; z-index: 1; text-align: center;}
.m7_inner .label{color: rgba(255,255,255,0.6);}
.m7_inner h2{font-size: 48px; font-weight: 700; color: #fff; line-height: 140%; margin-bottom: 24px;}
.m7_inner p{font-size: var(--fs18, 18px); color: rgba(255,255,255,0.7); line-height: 180%; margin-bottom: 48px;}
.m7_btns{display: flex; justify-content: center; gap: 16px;}
.m7_btn_primary{display: inline-flex; align-items: center; gap: 8px; padding: 16px 40px; background: #fff; color: var(--color, #004E73); border-radius: 100px; font-size: 16px; font-weight: 600; position: relative; overflow: hidden; z-index: 1; transition: all 0.4s;}
.m7_btn_primary::before{content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: #222; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; z-index: -1;}
.m7_btn_primary:hover::before{width: 400px; height: 400px;}
.m7_btn_primary:hover{color: #fff;}
.m7_btn_primary i{transition: transform 0.3s;}
.m7_btn_primary:hover i{transform: translateX(4px);}
.m7_btn_secondary{display: inline-flex; align-items: center; padding: 16px 40px; border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); border-radius: 100px; font-size: 16px; font-weight: 500; transition: all 0.3s;}
.m7_btn_secondary:hover{border-color: #fff; color: #fff;}


/* ===================================================================
   인사말 (a1_greeting)
   =================================================================== */
.a1_greeting{position: relative; overflow: hidden;}
.a1_greeting .width, .a1_info .width{max-width: 1200px;}
.a1_greeting .label{display: block;}
.a1_row{display: flex; gap: 0 5%;}
.a1_row_left{width: 45%; padding-top: 8px;}
.a1_row_left .a1_img{margin-top: 32px; width: 85%; border-radius: 12px; overflow: hidden;}
.a1_row_left .a1_img img{width: 100%;}
.a1_row h3{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 140%; letter-spacing: -0.8px;}
.a1_row_right{width: 50%; display: flex; flex-direction: column; gap: 28px;}
.a1_row_right p{font-size: var(--fs18, 18px); font-weight: 400; color: #444; letter-spacing: -0.4px; line-height: 150%;}
.a1_row_right p:first-child{font-size: var(--fs20, 20px); font-weight: 600; color: #111;}
.a1_sign{margin-top: 12px; display: flex; flex-direction: column; gap: 4px;}
.a1_sign span{font-size: 16px; font-weight: 400; color: #767676; line-height: 150%;}
.a1_sign strong{display: block; font-size: var(--fs24, 24px); font-weight: 700; color: #111; letter-spacing: -0.6px; line-height: 150%;}

/* 회사 정보 테이블 */
.a1_info{padding-top: 80px; padding-bottom: 120px; background: #f9fafb;}
.a1_info .label{display: block;}
.a1_info_table{display: flex; flex-wrap: wrap; gap: 20px;}
.a1_info_table dl{flex: 1; min-width: calc(50% - 20px); padding: 28px 28px; background: #fff; border-radius: 12px; border: 1px solid #e8e8e8; display: flex; align-items: center; gap: 20px; transition: border-color 0.3s, box-shadow 0.3s;}
.a1_info_table dl:hover{border-color: var(--color, #004E73); box-shadow: 0 4px 16px rgba(0,78,115,0.06);}
.a1_info_table dt{font-size: 14px; font-weight: 600; color: #888; flex-shrink: 0; position: relative; padding-left: 14px; letter-spacing: -0.3px;}
.a1_info_table dt::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; background: var(--color, #004E73); border-radius: 2px;}
.a1_info_table dd{font-size: 17px; color: #222; margin: 0; font-weight: 600; letter-spacing: -0.3px;}
.a1_info_table dd a{color: #222;}


/* ===================================================================
   인사말02 (a2) — 인용 + 이미지 통합형
   =================================================================== */
.a2_top{margin-bottom: 60px;}
.a2_top .label{display: block;}
.a2_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; letter-spacing: -0.8px;}

.a2_wrap{display: flex; gap: 5%; align-items: flex-start;}
.a2_img{width: 42%; flex-shrink: 0; border-radius: 16px; overflow: hidden; position: sticky; top: 120px;}
.a2_img img{width: 100%;}
.a2_text{width: 53%;}
.a2_lead{font-size: var(--fs20, 20px); font-weight: 600; color: #111; line-height: 150%; margin-bottom: 28px;}
.a2_text p{font-size: 17px; color: #444; line-height: 150%; letter-spacing: -0.3px; margin-bottom: 24px;}
.a2_text p:last-of-type{margin-bottom: 0;}
.a2_sign{margin-top: 40px;}
.a2_sign span{display: block; font-size: 14px; color: #888; margin-bottom: 20px;}
.a2_sign strong{display: block; font-size: var(--fs24, 24px); font-weight: 700; color: #111; letter-spacing: -0.5px;}

/* 회사 정보 — a2 스타일 */
.a2_info{background: #1a1a1a;}
.a2_info .label{display: block; color: rgba(255,255,255,0.7) !important;}
.a2_info .box_wrap{display: flex; flex-wrap: wrap; gap: 0;}
.a2_info .box{width: calc(100% / 3); padding: 36px 32px; border: 1px solid rgba(255,255,255,0.08); margin-top: -1px; margin-left: -1px;}
.a2_info .box span{display: block; font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 12px; letter-spacing: 1px; text-transform: uppercase;}
.a2_info .box strong{display: block; font-size: var(--fs18, 18px); font-weight: 600; color: #fff; letter-spacing: -0.3px; line-height: 150%;}


/* ===================================================================
   CI 페이지
   =================================================================== */
.ci_intro{margin-bottom: 80px;}
.ci_intro h2{font-size: var(--fs32, 32px); font-weight: 700; color: #222; line-height: 150%; margin-bottom: 24px;}
.ci_intro p{font-size: var(--fs18, 18px); color: #888; line-height: 180%;}

.ci_section{margin-bottom: 80px;}
.ci_section:last-child{margin-bottom: 0;}
.ci_section h3{font-size: var(--fs22, 22px); font-weight: 600; color: #222; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid #222;}

.ci_logo_wrap{display: flex; gap: 3%;}
.ci_logo_box{width: 48.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; border-radius: 16px;}
.ci_logo_box img{max-width: 200px; width: 100%; margin-bottom: 24px;}
.ci_logo_box span{font-size: 14px; color: #999;}
.ci_light{background: #f5f5f5;}
.ci_dark{background: #222;}
.ci_dark span{color: rgba(255,255,255,0.5);}

.ci_desc{font-size: 16px; color: #888; line-height: 150%; margin-bottom: 32px;}

/* CI 로고 사용 규정 */
.ci_page .box_wrap{display: flex; flex-wrap: wrap; gap: 20px;}
.ci_page .box{width: calc(50% - 10px); padding: 28px 32px; border: 1px solid #e8e8e8; border-radius: 12px; transition: border-color 0.2s;}
.ci_page .box:hover{border-color: var(--color, #004E73);}
.ci_page .box strong{display: block; font-size: 16px; font-weight: 600; color: #222; margin-bottom: 8px;}
.ci_page .box p{font-size: 14px; color: #888; line-height: 150%;}

/* CI 컬러 */
.ci_color_wrap{display: flex; gap: 3%;}
.ci_color_box{width: 22.75%; text-align: center;}
.ci_color_swatch{border-radius: 12px; padding: 50px 0; margin-bottom: 16px;}
.ci_color_box strong{display: block; font-size: 15px; font-weight: 600; color: #222; margin-bottom: 8px;}
.ci_color_box span{display: block; font-size: 13px; color: #999; line-height: 180%;}

/* CI 서체 */
.ci_typo_wrap{display: flex; gap: 3%;}
.ci_typo_box{width: 48.5%; padding: 40px; background: #f9fafb; border-radius: 16px;}
.ci_typo_label{display: inline-block; font-size: 13px; color: var(--color, #004E73); font-weight: 600; letter-spacing: 1px; margin-bottom: 16px;}
.ci_typo_name{font-size: 32px; font-weight: 700; color: #222; margin-bottom: 12px; line-height: 130%;}
.ci_typo_sample{font-size: 18px; color: #666; margin-bottom: 24px; line-height: 150%; letter-spacing: 1px;}
.ci_typo_weights{display: flex; flex-wrap: wrap; gap: 8px;}
.ci_typo_weights span{display: inline-block; padding: 6px 14px; background: #fff; border: 1px solid #e0e0e0; border-radius: 100px; font-size: 13px; color: #666;}


/* ========== a3 연혁 ========== */
.a3_history{padding: 140px 0;}
.a3_history .label{display: block;}
.a3_title{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 16px;}
.a3_desc{font-size: 16px; color: #777; line-height: 150%; margin-bottom: 80px;}
.a3_timeline{position: relative;}
.a3_timeline::before{content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #e0e0e0; transform: translateX(-50%);}
.a3_item{display: flex; align-items: stretch; gap: 5%; position: relative; margin-bottom: 80px;}
.a3_item:last-child{margin-bottom: 0;}
.a3_item::before{content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: #fff; border: 2px solid var(--color, #004E73); border-radius: 50%; transform: translate(-50%, -50%); z-index: 1;}
.a3_item_img{width: 47.5%; border-radius: 16px; overflow: hidden;}
.a3_item_img img{width: 100%; display: block;}
.a3_item_text{width: 47.5%; display: flex; flex-direction: column; justify-content: center; padding: 20px 0;}
.a3_year{font-size: 48px; font-weight: 800; color: var(--color, #004E73); letter-spacing: -1px; line-height: 100%; margin-bottom: 24px;}
.a3_item .box_wrap{display: flex; flex-direction: column; gap: 0;}
.a3_item .box{display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f0f0f0;}
.a3_item .box:last-child{border-bottom: none;}
.a3_month{font-size: 15px; font-weight: 700; color: var(--color, #004E73); min-width: 30px;}
.a3_item .box p{font-size: 16px; color: #444; line-height: 150%;}

/* 지그재그 */
.a3_item.reverse{flex-direction: row-reverse;}


/* ===================================================================
   푸터
   =================================================================== */
#ft{background: #111;}
.ft_top{padding: 80px 0 60px; border-bottom: 1px solid rgba(255,255,255,0.08);}
.ft_inner{display: flex; justify-content: space-between; gap: 60px;}
.ft_info{width: 40%; text-align: left;}
.ft_logo{margin-bottom: 24px;}
.ft_logo img{height: 36px; width: auto;}
.ft_desc{font-size: 15px; color: rgba(255,255,255,0.4); line-height: 180%; margin-bottom: 28px;}
.ft_contact_row{display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 6px;}
.ft_contact_row:last-child{margin-bottom: 0;}
.ft_contact_row span{font-size: 14px; color: rgba(255,255,255,0.5);}
.ft_contact_row em{font-style: normal; color: rgba(255,255,255,0.3); margin-right: 4px;}

.ft_menu_wrap{display: flex; gap: 60px;}
.ft_menu strong a{display: block; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 20px;}
.ft_menu ul{list-style: none; margin: 0; padding: 0;}
.ft_menu li{margin-bottom: 12px;}
.ft_menu a{font-size: 15px; color: rgba(255,255,255,0.4); transition: color 0.2s;}
.ft_menu a:hover{color: #fff;}

.ft_bottom{padding: 28px 0;}
.ft_bottom_inner{display: flex; justify-content: space-between; align-items: center;}
.ft_copy{font-size: 13px; color: rgba(255,255,255,0.25);}
.ft_links{display: flex; gap: 20px;}
.ft_links a{font-size: 13px; color: rgba(255,255,255,0.35); transition: color 0.2s;}
.ft_links a:hover{color: #fff;}
.ft_links a:first-child{font-weight: 600; color: rgba(255,255,255,0.5);}


/* ===================================================================
   사업소개 (b1_intro, b1_value)
   =================================================================== */
.b1_top{margin-bottom: 60px;}
.b1_top .label{display: block;}
.b1_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; letter-spacing: -0.8px;}
.b1_wrap{display: flex; gap: 5%; align-items: flex-start;}
.b1_img{width: 45%; border-radius: 16px; overflow: hidden;}
.b1_img img{width: 100%;}
.b1_text{width: 50%;}
.b1_lead{font-size: var(--fs20, 20px); font-weight: 600; color: #111; line-height: 150%; margin-bottom: 28px;}
.b1_text p{font-size: 17px; color: #444; line-height: 170%; letter-spacing: -0.3px; margin-bottom: 20px;}
.b1_text p:last-child{margin-bottom: 0;}

/* 선택해야 하는 이유 */
.b1_stat{background: #111;}
.b1_stat_top{margin-bottom: 40px;}
.b1_stat_top .label{display: block; color: rgba(255,255,255,0.5) !important;}
.b1_stat_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #fff; line-height: 150%;}
.b1_stat .box_wrap{display: flex; gap: 3%;}
.b1_stat .box{flex: 1; padding: 36px 28px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; transition: border-color 0.3s;}
.b1_stat .box:hover{border-color: rgba(255,255,255,0.25);}
.b1_stat .box i{font-size: 28px; color: var(--color, #004E73); margin-bottom: 20px; display: block; line-height: 100%;}
.b1_stat .box strong{display: block; font-size: var(--fs18, 18px); font-weight: 700; color: #fff; margin-bottom: 10px;}
.b1_stat .box p{font-size: 14px; color: rgba(255,255,255,0.5); line-height: 160%;}


/* 핵심 가치 */
.b1_value{background: #f9fafb;}
.b1_value_top{margin-bottom: 40px;}
.b1_value_top .label{display: block;}
.b1_value_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%;}
.b1_value .box_wrap{display: flex; gap: 3%;}
.b1_value .box{width: 31.3%; padding: 40px 32px; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; transition: border-color 0.3s;}
.b1_value .box:hover{border-color: var(--color, #004E73);}
.b1_value .box span{display: block; font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 700; color: var(--color, #004E73); margin-bottom: 20px; line-height: 100%;}
.b1_value .box strong{display: block; font-size: var(--fs20, 20px); font-weight: 700; color: #111; margin-bottom: 12px;}
.b1_value .box p{font-size: 15px; color: #666; line-height: 160%;}


/* 서비스 프로세스 */
.b1_process_top{margin-bottom: 40px;}
.b1_process_top .label{display: block;}
.b1_process_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 16px;}
.b1_process_top p{font-size: 16px; color: #777; line-height: 150%;}
.b1_process .box_wrap{display: flex; gap: 0; counter-reset: step;}
.b1_process .box{flex: 1; padding: 36px 28px; background: #fff; border: 1px solid #e8e8e8; border-right: none; position: relative;}
.b1_process .box:first-child{border-radius: 16px 0 0 16px;}
.b1_process .box:last-child{border-radius: 0 16px 16px 0; border-right: 1px solid #e8e8e8;}
.b1_process .box span{display: block; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--color, #004E73); margin-bottom: 16px; letter-spacing: 1px; line-height: 100%;}
.b1_process .box strong{display: block; font-size: var(--fs18, 18px); font-weight: 700; color: #111; margin-bottom: 10px;}
.b1_process .box p{font-size: 14px; color: #888; line-height: 160%;}
.b1_process .box::after{content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 18px; height: 18px; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; background: #fff; z-index: 1;}
.b1_process .box:last-child::after{display: none;}


/* CTA */
.b1_cta{padding: 100px 0; background: var(--color, #004E73);}
.b1_cta_inner{display: flex; align-items: center; justify-content: space-between;}
.b1_cta_text h2{font-size: var(--fs28, 28px); font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 140%;}
.b1_cta_text p{font-size: 16px; color: rgba(255,255,255,0.7); line-height: 150%;}
.b1_cta_btns{display: flex; gap: 12px; flex-shrink: 0;}
.b1_cta_btn{display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; background: #fff; color: var(--color, #004E73); font-size: 16px; font-weight: 600; border-radius: 100px; transition: opacity 0.3s;}
.b1_cta_btn:hover{opacity: 0.9;}
.b1_cta_outline{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4);}
.b1_cta_outline:hover{border-color: #fff;}


/* ===================================================================
   사업분야 (b2_field)
   =================================================================== */
.b2_top{margin-bottom: 60px;}
.b2_top .label{display: block;}
.b2_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 16px;}
.b2_top p{font-size: 16px; color: #777; line-height: 150%;}
.b2_field .box_wrap{display: flex; flex-wrap: wrap; gap: 24px;}
.b2_field .box{width: calc(50% - 12px); padding: 36px 32px; background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; transition: border-color 0.3s, box-shadow 0.3s;}
.b2_field .box:hover{border-color: var(--color, #004E73); box-shadow: 0 8px 24px rgba(0,78,115,0.06);}
.b2_head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.b2_head i{font-size: 32px; color: var(--color, #004E73); line-height: 100%;}
.b2_num{font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: #ccc; line-height: 100%;}
.b2_field .box strong{display: block; font-size: var(--fs20, 20px); font-weight: 700; color: #111; margin-bottom: 12px;}
.b2_field .box p{font-size: 15px; color: #666; line-height: 160%; margin-bottom: 20px;}
.b2_features{list-style: none; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px;}
.b2_features li{font-size: 14px; color: #555; padding-left: 18px; position: relative; line-height: 150%;}
.b2_features li::before{content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--color, #004E73);}
.b2_badge{display: inline-block; padding: 6px 14px; background: #f2f7fa; color: var(--color, #004E73); font-size: 12px; font-weight: 600; border-radius: 100px; letter-spacing: -0.3px;}

/* b2 CTA */
.b2_cta{padding: 100px 0; background: var(--color, #004E73);}
.b2_cta_inner{display: flex; align-items: center; justify-content: space-between;}
.b2_cta_text h2{font-size: var(--fs28, 28px); font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 140%;}
.b2_cta_text p{font-size: 16px; color: rgba(255,255,255,0.7); line-height: 150%;}
.b2_cta_btns{display: flex; gap: 12px; flex-shrink: 0;}
.b2_cta_btn{display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; background: #fff; color: var(--color, #004E73); font-size: 16px; font-weight: 600; border-radius: 100px; transition: opacity 0.3s;}
.b2_cta_btn:hover{opacity: 0.9;}
.b2_cta_outline{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4);}
.b2_cta_outline:hover{border-color: #fff;}


/* ===================================================================
   주요실적 (b3_record)
   =================================================================== */
.b3_top{margin-bottom: 60px;}
.b3_top .label{display: block;}
.b3_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 16px;}
.b3_top p{font-size: 16px; color: #777; line-height: 150%;}
.b3_record .box_wrap{display: flex; flex-direction: column; gap: 0;}
.b3_record .box{display: flex; align-items: flex-start; gap: 5%; padding: 32px 0; border-bottom: 1px solid #eee;}
.b3_record .box:first-child{border-top: 2px solid #222;}
.b3_year{font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; color: var(--color, #004E73); flex-shrink: 0; width: 80px; padding-top: 2px;}
.b3_record .box .text{flex: 1;}
.b3_badges{display: flex; gap: 6px; margin-bottom: 10px;}
.b3_badge{display: inline-block; padding: 4px 12px; background: #f2f7fa; color: var(--color, #004E73); font-size: 12px; font-weight: 600; border-radius: 100px; letter-spacing: -0.3px;}
.b3_record .box .text strong{display: block; font-size: var(--fs18, 18px); font-weight: 700; color: #111; margin-bottom: 10px; letter-spacing: -0.3px;}
.b3_record .box .text p{font-size: 15px; color: #666; line-height: 160%;}



/* ===================================================================
   파트너사 (b4_partner)
   =================================================================== */
.b4_top{margin-bottom: 60px;}
.b4_top .label{display: block;}
.b4_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 16px;}
.b4_top p{font-size: 16px; color: #777; line-height: 150%;}
.b4_partner .box_wrap{display: flex; flex-wrap: wrap; gap: 20px;}
.b4_partner .box{width: calc(25% - 15px); padding: 32px 20px; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 0.3s, box-shadow 0.3s;}
.b4_partner .box:hover{border-color: var(--color, #004E73); box-shadow: 0 6px 20px rgba(0,78,115,0.06);}
.b4_logo{display: flex; align-items: center; justify-content: center; margin-bottom: 16px;}
.b4_logo img{max-width: 120px; width: 100%;}
.b4_partner .box span{font-size: 13px; color: #999; letter-spacing: -0.3px;}


/* ===================================================================
   오시는길 (a5_map)
   =================================================================== */
.a5_top{margin-bottom: 40px;}
.a5_map .label{display: block;}
.a5_title{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%;}
.a5_content{display: flex; gap: 0; align-items: stretch; border-radius: 16px; overflow: hidden; border: 1px solid #e8e8e8;}
.a5_map_wrap{width: 65%;}
.a5_map_wrap .root_daum_roughmap{width: 100% !important; height: 520px !important;}
.a5_map_wrap .root_daum_roughmap .wrap_map{width: 100% !important; height: 520px !important;}
.a5_map_wrap .root_daum_roughmap .wrap_controllers{display: none;}
.a5_info{width: 35%; background: #fafafa;}
.a5_info_head{padding: 36px 32px; border-bottom: 1px solid #e8e8e8;}
.a5_info_head strong{display: block; font-size: var(--fs22, 22px); font-weight: 700; color: #111; margin-bottom: 10px; letter-spacing: -0.5px;}
.a5_info_head p{font-size: 15px; color: #666; line-height: 150%;}
.a5_info .box_wrap{display: flex; flex-direction: column; gap: 0;}
.a5_info .box{display: flex; align-items: center; gap: 16px; padding: 22px 32px; border-bottom: 1px solid #eee;}
.a5_info .box:last-child{border-bottom: none;}
.a5_icon{width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.a5_icon i{font-size: 18px; color: var(--color, #004E73); line-height: 100%;}
.a5_info .box span{display: block; font-size: 12px; color: #999; margin-bottom: 4px; font-weight: 500;}
.a5_info .box strong{display: block; font-size: 15px; font-weight: 600; color: #222; letter-spacing: -0.3px; line-height: 140%;}


/* ===================================================================
   제품소개 페이지 (p1)
   =================================================================== */

/* 공통 섹션 타이틀 */
.c1_section_top{margin-bottom: 48px;}
.c1_section_top .label{display: block;}
.c1_section_top h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 12px;}
.c1_section_top p{font-size: 16px; color: #666; line-height: 160%;}

/* 1. 메인 비주얼 */
.c1_hero_wrap{display: flex; align-items: center; gap: 5%;}
.c1_hero_text{width: 48%;}
.c1_hero_text .label{display: block;}
.c1_hero_text h2{font-size: var(--fs32, 32px); font-weight: 800; color: #111; line-height: 145%; margin-bottom: 20px; letter-spacing: -1px; word-break: keep-all;}
.c1_hero_text p{font-size: 16px; color: #555; line-height: 175%; margin-bottom: 36px;}
.c1_hero_btns{display: flex; gap: 10px;}
.c1_hero_btn{display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; background: var(--color, #004E73); color: #fff; font-size: 15px; font-weight: 600; border-radius: 100px; transition: opacity 0.3s; line-height: 100%;}
.c1_hero_btn:hover{opacity: 0.9; color: #fff;}
.c1_hero_outline{background: #fff; color: #222; border: 1px solid #d0d0d0;}
.c1_hero_outline:hover{border-color: #222; color: #222; opacity: 1;}
.c1_hero_img{width: 47%; border-radius: 20px; overflow: hidden;}
.c1_hero_img img{width: 100%; display: block;}

/* 2. 제품 핵심 소개 */
.c1_core{background: #f5f5f7;}
.c1_core .box_wrap{display: flex; gap: 3%;}
.c1_core .box{flex: 1; padding: 36px 28px; background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; transition: border-color 0.3s;}
.c1_core .box:hover{border-color: var(--color, #004E73);}
.c1_core .box i{font-size: 28px; color: var(--color, #004E73); margin-bottom: 20px; display: block; line-height: 100%;}
.c1_core .box strong{display: block; font-size: 16px; font-weight: 700; color: #111; margin-bottom: 10px;}
.c1_core .box p{font-size: 14px; color: #666; line-height: 165%;}

/* 3. 이런 분께 추천 */
.c1_recommend_wrap{display: flex; align-items: center; gap: 6%;}
.c1_recommend_img{width: 45%; border-radius: 20px; overflow: hidden;}
.c1_recommend_img img{width: 100%; display: block;}
.c1_recommend_right{width: 49%;}
.c1_recommend_right .label{display: block;}
.c1_recommend_right h2{font-size: var(--fs32, 32px); font-weight: 700; color: #111; line-height: 150%; margin-bottom: 28px;}
.c1_recommend .box_wrap{display: flex; flex-direction: column; gap: 0;}
.c1_recommend .box{display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid #eee;}
.c1_recommend .box:last-child{border-bottom: 0;}
.c1_recommend .box i{font-size: 22px; color: var(--color, #004E73); flex-shrink: 0;}
.c1_recommend .box p{font-size: 16px; color: #333; font-weight: 500; line-height: 150%;}

/* 4. 주요 기능 */
.c1_feature{background: #f5f5f7;}
.c1_feature .box_wrap{display: flex; flex-wrap: wrap; gap: 20px 3%;}
.c1_feature .box{width: calc(50% - 1.5%); padding: 32px 28px; background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; transition: border-color 0.3s;}
.c1_feature .box:hover{border-color: var(--color, #004E73);}
.c1_feature .box strong{display: block; font-size: 16px; font-weight: 700; color: #111; margin-bottom: 8px;}
.c1_feature .box p{font-size: 14px; color: #666; line-height: 165%;}

/* 5. 제품의 강점 */
.c1_strength .box_wrap{display: flex; gap: 3%;}
.c1_strength .box{width: 22.7%; padding: 40px 28px; background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; transition: border-color 0.3s;}
.c1_strength .box:hover{border-color: var(--color, #004E73);}
.c1_strength .box span{display: block; font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 700; color: var(--color, #004E73); margin-bottom: 20px; line-height: 100%;}
.c1_strength .box strong{display: block; font-size: 16px; font-weight: 700; color: #111; margin-bottom: 10px;}
.c1_strength .box p{font-size: 14px; color: #666; line-height: 165%;}

/* 6. 실제 화면 미리보기 */
.c1_preview{background: #f5f5f7;}
.c1_preview .box_wrap{display: flex; gap: 3%;}
.c1_preview .box{width: 31.3%; border-radius: 16px; overflow: hidden; border: 1px solid #e8e8e8; background: #fff; transition: border-color 0.3s;}
.c1_preview .box:hover{border-color: var(--color, #004E73);}
.c1_preview .box .img{overflow: hidden;}
.c1_preview .box .img img{width: 100%; display: block; transition: transform 0.4s;}
.c1_preview .box:hover .img img{transform: scale(1.05);}
.c1_preview .box .text{padding: 16px 20px;}
.c1_preview .box .text strong{font-size: 15px; font-weight: 600; color: #333;}

/* 7. 기본 제공 범위 */
.c1_scope_wrap{display: flex; gap: 3%;}
.c1_scope_col{width: 31.3%; padding: 36px 32px; background: #f5f5f7; border-radius: 16px;}
.c1_scope_col h3{font-size: 16px; font-weight: 700; color: #111; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid #222;}
.c1_scope_col ul{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;}
.c1_scope_col li{display: flex; align-items: center; gap: 10px; font-size: 15px; color: #444; line-height: 150%;}
.c1_scope_col li i{font-size: 16px; color: var(--color, #004E73); flex-shrink: 0;}

/* 8. 구매 전 안내 */
.c1_notice{background: #f5f5f7;}
.c1_notice .box_wrap{display: flex; flex-wrap: wrap; gap: 20px 3%;}
.c1_notice .box{width: calc(50% - 1.5%); padding: 32px 28px; background: #fff; border: 1px solid #e8e8e8; border-radius: 16px;}
.c1_notice .box strong{display: block; font-size: 16px; font-weight: 700; color: #111; margin-bottom: 10px;}
.c1_notice .box p{font-size: 14px; color: #666; line-height: 170%;}

/* 9. FAQ */
.c1_faq .c1_section_top{text-align: center;}
.c1_faq_list{max-width: 1000px; margin: 0 auto;}
.c1_faq_item{border-bottom: 1px solid #e8e8e8;}
.c1_faq_q{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit;}
.c1_faq_q span{font-size: 16px; font-weight: 600; color: #222;}
.c1_faq_q i{font-size: 18px; color: #999; transition: transform 0.3s; flex-shrink: 0; margin-left: 16px;}
.c1_faq_item.on .c1_faq_q i{transform: rotate(180deg);}
.c1_faq_a{display: none; padding: 0 0 22px;}
.c1_faq_a p{font-size: 15px; color: #555; line-height: 175%;}

/* 10. CTA */
.c1_cta{padding: 100px 0; background: var(--color, #004E73);}
.c1_cta_inner{display: flex; align-items: center; justify-content: space-between;}
.c1_cta_text h2{font-size: var(--fs28, 28px); font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 150%;}
.c1_cta_text p{font-size: 16px; color: rgba(255,255,255,0.7); line-height: 150%;}
.c1_cta_btns{display: flex; gap: 12px; flex-shrink: 0;}
.c1_cta_btn{display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; background: #fff; color: var(--color, #004E73); font-size: 16px; font-weight: 600; border-radius: 100px; transition: opacity 0.3s;}
.c1_cta_btn:hover{opacity: 0.9;}
.c1_cta_outline{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4);}
.c1_cta_outline:hover{border-color: #fff;}


/* ===================================================================
   반응형 — 1200px
   =================================================================== */
@media screen and (max-width: 1200px) {
    html{font-size: 90%;}
    .main_menu > .dept1 > a{padding: 0 30px; font-size: 17px;}
    .sub_nav .width{width: 100%;}
}

/* ===================================================================
   반응형 — 1024px
   =================================================================== */
@media screen and (max-width: 1024px) {
    .common{padding: 60px 0;}
    #header{display: none;}
    .mobile_head{display: flex;}
    .visual{height: 70vh;}
    .visual_text{padding-left: 5%;}
    .visual_text h2{font-size: 32px;}
    .visual_text p{font-size: 15px; margin-top: 16px;}
    .visual_tab_item{padding: 16px 14px;}
    .visual_tab_item span{font-size: 12px; margin-bottom: 4px;}
    .visual_tab_item p{font-size: 12px;}
    .m1_intro_wrap{flex-direction: column; gap: 40px;}
    .m1_intro_text{width: 100%;}
    .m1_intro_img{width: 100%;}
    .m1_intro_text h2{font-size: 28px;}
    .m1_intro_text p{font-size: 15px;}
    .label{font-size: 14px;}
    .marquee_inner span{font-size: 50px;}
    .m2_top h2{font-size: 28px;}
    .m2_feature .box{width: 48%;}
    .m2_feature .box{padding: 36px 28px;}
    .m2_feature .box strong{font-size: 18px;}
    .m2_feature .box p{font-size: 15px;}
    .m3_showcase{padding: 80px 0 !important;}
    .m3_top_text h2{font-size: 28px;}
    .m3_top{margin-bottom: 40px;}
    .m3_prev, .m3_next{width: 40px; height: 40px;}
    .m3_slider{padding-left: 4%;}
    .m4_story{padding: 80px 0 60px;}
    .m4_story_inner h2{font-size: 26px;}
    .m4_story_inner p{font-size: 15px;}
    .m4_stats .box_wrap{flex-wrap: wrap;}
    .m4_stats .box{flex: none; width: 50%; padding: 36px 20px;}
    .m4_stats .box + .box::before{display: none;}
    .m4_stats .box strong{font-size: 32px;}
    .m5_top h2{font-size: 28px;}
    .m5_process .box_wrap{flex-direction: column; gap: 0;}
    .m5_process .box{border-right: 0; border-bottom: 1px solid #eee; padding: 32px 28px;}
    .m5_process .box:first-child{border-radius: 20px 20px 0 0;}
    .m5_process .box:last-child{border-radius: 0 0 20px 20px; border-bottom: 0;}
    .m5_process .box::after{display: none;}
    .m5_num{font-size: 28px; margin-bottom: 16px;}
    .m5_process .box strong{font-size: 18px;}
    .m5_process .box p{font-size: 15px;}
    .m6_wrap{flex-direction: column; gap: 40px;}
    .m6_left{width: 100%;}
    .m6_left p{margin-bottom: 24px;}
    .m6_right{width: 100%;}
    .m7_cta{padding: 80px 0;}
    .m7_inner h2{font-size: 28px;}
    .m7_inner p{font-size: 15px; margin-bottom: 32px;}
    .m7_btns{flex-direction: column; align-items: center; gap: 12px;}
    .m7_btn_primary, .m7_btn_secondary{width: 100%; max-width: 280px; justify-content: center; padding: 14px 0;}
    .ft_inner{flex-direction: column; gap: 40px;}
    .ft_info{width: 100%;}
    .ft_menu_wrap{flex-wrap: wrap; gap: 32px;}
    .ft_menu{width: calc(50% - 16px);}
    .ft_bottom_inner{flex-direction: column; gap: 12px; text-align: center;}
    .m3Swiper .m3_overlay{opacity: 1; padding: 24px 20px;}
    .m3Swiper .m3_overlay strong{font-size: 16px;}
    /* 서브페이지 타이틀 반응형 */
    .a1_row h3, .a2_top h2, .a5_title, .a3_title, .ci_intro h2, .b1_top h2, .b1_stat_top h2, .b1_value_top h2, .b1_process_top h2, .b2_top h2, .b3_top h2, .b4_top h2, .c1_section_top h2, .c1_hero_text h2, .c1_recommend_right h2{font-size: 28px;}
    .ci_intro{margin-bottom: 50px;}
    .ci_intro p{font-size: 15px;}
    .a2_top{margin-bottom: 40px;}
    .b1_top, .b2_top, .b3_top, .b4_top{margin-bottom: 40px;}
    .a5_top{margin-bottom: 30px;}
    .sub_visual{padding: 120px 0 60px;}
    .sub_top_text h3{font-size: 2.8rem;}
    .sub_nav_home{width: 42px; font-size: 16px;}
    .sub_nav_dep{width: auto; flex: 1;}
    .sub_nav_btn{padding: 0 14px; height: 46px; font-size: 14px;}

    .c1_core .box_wrap{flex-wrap: wrap; gap: 16px;}
    .c1_core .box{flex: none; width: calc(50% - 8px); padding: 28px 20px;}
    .c1_strength .box_wrap{flex-wrap: wrap; gap: 16px;}
    .c1_strength .box{width: calc(50% - 8px); padding: 32px 24px;}
    .c1_preview .box_wrap{flex-wrap: wrap; gap: 16px;}
    .c1_preview .box{width: calc(50% - 8px);}
    .c1_scope_wrap{flex-wrap: wrap; gap: 20px;}
    .c1_scope_col{width: calc(50% - 10px);}
}

/* ===================================================================
   반응형 — 768px
   =================================================================== */
@media screen and (max-width: 768px) {
    .a1_row{flex-direction: column; gap: 40px;}
    .a1_row_left{width: 100%;}
    .a1_row_left .a1_img{width: 100%;}
    .a1_row_right{width: 100%;}
    .a1_row_right p{font-size: 15px;}
    .a1_sign{margin-top: 30px;}
    .a1_info_table{gap: 12px;}
    .a1_info_table dl{min-width: 100%; padding: 20px 20px;}

    .a2_top h2 br{display: none;}
    .a2_wrap{flex-direction: column; gap: 36px;}
    .a2_img{width: 100%; position: static; border-radius: 12px;}
    .a2_text{width: 100%;}
    .a2_lead{font-size: var(--fs18, 18px);}
    .a2_text p{font-size: 15px;}
    .a2_info .box{width: 50%; padding: 24px 20px;}
    .a2_sign{text-align: right;}

    .a3_timeline::before{display: none;}
    .a3_item, .a3_item.reverse{flex-direction: column; gap: 24px; margin-bottom: 60px;}
    .a3_item::before{display: none;}
    .a3_item_img{width: 100%; border-radius: 12px;}
    .a3_item_text{width: 100%; padding: 0;}
    .a3_year{font-size: 32px; margin-bottom: 16px;}

    .b1_stat .box_wrap{flex-wrap: wrap; gap: 16px;}
    .b1_stat .box{flex: none; width: calc(50% - 8px); padding: 28px 20px;}

    .b1_wrap{flex-direction: column; gap: 36px;}
    .b1_img{width: 100%; border-radius: 12px;}
    .b1_text{width: 100%;}
    .b1_lead{font-size: var(--fs18, 18px);}
    .b1_text p{font-size: 15px;}
    .b1_value .box_wrap{flex-direction: column; gap: 16px;}
    .b1_value .box{width: 100%; padding: 32px 24px;}

    .b1_process .box_wrap{flex-direction: column; gap: 0;}
    .b1_process .box{border-right: 1px solid #e8e8e8; border-bottom: none;}
    .b1_process .box:first-child{border-radius: 12px 12px 0 0;}
    .b1_process .box:last-child{border-radius: 0 0 12px 12px; border-bottom: 1px solid #e8e8e8;}
    .b1_process .box::after{display: none;}

    .b1_cta{padding: 60px 0;}
    .b1_cta_inner{flex-direction: column; text-align: center; gap: 28px;}
    .b1_cta_text h2{font-size: var(--fs22, 22px);}
    .b1_cta_btns{justify-content: center; flex-wrap: wrap; gap: 10px;}
    .b1_cta_btn{justify-content: center; padding: 13px 24px; font-size: 14px;}

    .b2_field .box{width: 100%; padding: 28px 24px;}
    .b2_cta{padding: 60px 0;}
    .b2_cta_inner{flex-direction: column; text-align: center; gap: 28px;}
    .b2_cta_btns{flex-direction: column; align-items: center; gap: 12px;}
    .b2_cta_btn{width: 100%; max-width: 240px; justify-content: center; padding: 14px 0;}

    .b3_record .box{flex-direction: column; gap: 8px; padding: 24px 0;}
    .b3_year{width: auto;}

    .b4_partner .box{width: calc(50% - 10px); padding: 24px 16px;}

    .a5_content{flex-direction: column; border-radius: 12px;}
    .a5_map_wrap{width: 100%;}
    .a5_map_wrap .root_daum_roughmap, .a5_map_wrap .root_daum_roughmap .wrap_map{height: 320px !important;}
    .a5_info{width: 100%;}
    .a5_info_head{padding: 28px 24px;}
    .a5_info .box{padding: 18px 24px;}

    .pc{display: none;}
    .mob{display: block;}
    .visual{height: 100vh;}
    .visual_text h2{font-size: 28px;}
    .visual_tab_item p{display: none;}
    .visual_tab_item{padding: 14px 0; text-align: center;}
    .visual_tab_item span{margin-bottom: 0;}
    .marquee_inner span{font-size: 36px;}
    .m2_feature .box{width: 100%;}
    .m3_control{gap: 12px;}
    .m3_counter{font-size: 14px;}
    .ft_top{padding: 50px 0 40px;}
    .ft_inner{flex-direction: column; gap: 40px;}
    .ft_info{width: 100%; text-align: left;}
    .ft_menu_wrap{display: none;}
    .ft_contact_row{flex-direction: column; gap: 6px;}
    .ft_bottom{padding: 20px 0;}
    .ft_bottom_inner{flex-direction: column; gap: 10px; text-align: center;}
    /* 서브페이지 타이틀 반응형 */
    .a1_row h3, .a2_top h2, .a5_title, .a3_title, .ci_intro h2, .b1_top h2, .b1_stat_top h2, .b1_value_top h2, .b1_process_top h2, .b2_top h2, .b3_top h2, .b4_top h2, .c1_section_top h2, .c1_hero_text h2, .c1_recommend_right h2{font-size: 25px;}
    .ft_links{justify-content: center;}

    .c1_hero_wrap{flex-direction: column; gap: 36px;}
    .c1_hero_text{width: 100%;}
    .c1_hero_img{width: 100%; border-radius: 16px;}
    .c1_hero_btns{flex-direction: column; gap: 10px;}
    .c1_hero_btn{justify-content: center;}
    .c1_core .box{width: 100%;}
    .c1_recommend_wrap{flex-direction: column; gap: 32px;}
    .c1_recommend_img{width: 100%; border-radius: 16px;}
    .c1_recommend_right{width: 100%;}
    .c1_feature .box{width: 100%;}
    .c1_strength .box{width: 100%;}
    .c1_preview .box{width: 100%;}
    .c1_scope_wrap{flex-direction: column;}
    .c1_scope_col{width: 100%;}
    .c1_notice .box{width: 100%;}
    .c1_faq_q span{font-size: 15px;}
    .c1_cta{padding: 60px 0;}
    .c1_cta_inner{flex-direction: column; text-align: center; gap: 28px;}
    .c1_cta_text h2{font-size: var(--fs22, 22px);}
    .c1_cta_btns{flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px;}
    .c1_cta_btn{justify-content: center; padding: 13px 24px; font-size: 14px;}
}