/* ================== 폰트 & 베이스 ================== */
@font-face { font-family:'SEBANG_Gothic_Bold'; src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff'); font-weight:normal; font-style:normal }
.lat_title, .section-title, #gnb .gnb_1dli { font-family:'SEBANG_Gothic_Bold'; font-size:clamp(20px,4vw,36px); padding-bottom:12px; color:#333;}
.section-sub { font-size:clamp(14px,1.8vw,16px); font-family:"Pretendard Medium"; color:#555; }
.lat_title { font-size:24px !important; }
#hd { width:100%; max-width:1440px; background:#fff !important; height:120px; margin:0 auto !important; }
#gnb { width:100%; margin:0 auto; }
#gnb .gnb_menu_btn { color:#222; background:#f4f4f4; border-radius:8px; }

/* ========== 하단 배너 영역 ========== */
#contact { width:100%; position:relative; margin:0 auto; }
#contact img { display:block; width:100%; height:266px; object-fit:cover; object-position:center; }
#contact_cnt { position:absolute; top:50%; left:50%; width:90%; transform:translate(-50%,-50%); text-align:center; color:#fff; padding:20px; box-sizing:border-box; font-size:2rem; font-family:"Pretendard Medium"; }
#contact_cnt h2 { font-family:"Pretendard ExtraBold"; }
.contact-btn, .contact-btn2 { display:inline-block; margin:10px 24px; padding:12px 68px; border:1px solid #fff; background:transparent; color:#fff; border-radius:100px; text-decoration:none; transition:background-color .3s, color .3s, border-color .3s; font-size:clamp(.6rem,5vw,1.2rem); }
.contact-btn:hover, .contact-btn2:hover { background-color:#f07b27; color:#fff; border-color:transparent; }

/* ================== Hero(메인배너) ================== */
.section-hero { position:relative; z-index:1; }
.section-hero .hero-swiper { width:100%; aspect-ratio:1920/866; position:relative; overflow:hidden; }
.swiper-slide { position:relative; width:100%; height:auto !important; }
.swiper-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slide-caption { position:absolute; left:50%; top:24%; transform:translate(-50%,-50%); width:min(92%,1100px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(16px,4vw,56px); }
.slide-caption h3 { margin:0 0 .2em; line-height:1.15; font-weight:700; font-size:clamp(20px,3.2vw,55px); font-family:'SEBANG_Gothic_Bold'; color:#0448a0; }
.slide-caption h2 { margin:0 0 .4em; line-height:1.2; font-weight:600; opacity:.95; font-size:clamp(18px,2.4vw,44px); color:#3aaacf; font-family:'SEBANG_Gothic_Bold'; }
.slide-caption p { margin:0; line-height:1.5; opacity:.9; max-width:60ch; font-size:clamp(14px,1.6vw,20px); color:#3aaacf; font-family:"Pretendard Medium"; }
.section-hero .swiper-pagination { bottom:12px !important; }
.section-hero .swiper-pagination-bullet { background:rgba(255,255,255,.7); opacity:1; }
.section-hero .swiper-pagination-bullet-active { background:#fff; }
.slide-caption h2, .slide-caption h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ================== 섹션: 제품/카드 그리드 & 스와이퍼 ================== */
.section-products { position:relative; z-index:20; margin-top:-100px; }
.section-products .section-deco { pointer-events:none; z-index:0; position:absolute; inset:0 auto auto 0; width:100%; height:auto; }
.section-products .container { width:100%; max-width:1704px; padding:68px 48px; margin:0 auto; text-align:center; height:auto; position:relative; z-index:2; }
.products-swiper { width:100%; height:auto; overflow:visible; touch-action:pan-y; }
.products-swiper .swiper-wrapper { overflow:visible; }
.products-swiper .swiper-slide { height:auto !important; }
.products-swiper-wrap { width:100%; max-width:1560px; padding: 0 48px; position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:clamp(16px,2vw,24px); z-index:21; }
.nav-btn { width:46px; height:46px; border-radius:50%; border:1px solid #fff; background:#fff; cursor:pointer; position:relative; }
.nav-btn::before { content:""; position:absolute; inset:0; margin:auto; width:28px; height:28px; border-top:4px solid #ddd; border-right:4px solid #ddd; border-radius:2px; transform:rotate(45deg); }
.main2-prev::before { transform:rotate(225deg); }
.main2-next::before { transform:rotate(45deg); }
.card { background:#fff; overflow:hidden; display:flex; flex-direction:column; height:auto; }
.card-media { position:relative; aspect-ratio:3/3; overflow:hidden; background:#f5f6f8; border-radius:16px; }
.card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .35s ease; }
.card:hover .card-media img { transform:scale(1.04); }
.card-body { padding:clamp(14px,2.2vw,18px) clamp(14px,2.2vw,20px) clamp(18px,2.4vw,22px); text-align:left; }
.card-title { margin:0 0 10px; font-size:clamp(18px,1.4vw,24px); font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; font-family:'SEBANG_Gothic_Bold'; padding:6px 0; justify-content:space-between; }
.title-dot { display:inline-block; width:36px; height:36px; border-radius:50%; background:#e5e7eb; position:relative; text-align:center; line-height:36px; font-size:24px; color:#fff; }
.title-dot::before { content:'→'; }
.card-desc { margin:0; color:#333; font-size:clamp(14px,1vw,16px); line-height:1.55; font-family:"Pretendard Medium"; }
.main2-pagination { margin-top:18px; }
.main2-pagination .swiper-pagination-bullet { background:#c7cbd1; opacity:1; }
.main2-pagination .swiper-pagination-bullet-active { background:#333; }

/* ================== 섹션: 메인 #main1 ================== */
#main1 { width:100%; box-sizing:border-box; padding:clamp(24px,6vw,56px) 0; background:#f5f7fa; --gap:20px; }
#main1 .main1_ul { width:100%; list-style:none; margin:0 auto; padding:0 48px; max-width:1560px; display:flex; flex-wrap:wrap; gap:var(--gap); justify-content:center; }
#main1 .main1_ul > li { box-sizing:border-box; flex:1 1 100%; }
#main1 .main1_cnt1 { width:100%; max-width:330px; padding-top:clamp(16px,2vw,22px); }
#main1 .main1_cnt2 { width:100%; max-width:848px; background:#fff; border-radius:12px; box-shadow:0 8px 22px rgba(17,24,39,.06); border:1px solid rgba(0,0,0,.06); padding:24px 36px 12px 36px ; display:flex; flex-direction:column; gap:16px; }
.main1_cnt2 .card-title { padding: 12px 0 0 42px; margin:0 0 4px; font-size:24px; font-weight:bold;color:#333; }
.main1_cnt2 .project-list { display:flex; flex-direction:row; flex-wrap:nowrap; gap:36px; width:100%; align-items:flex-start; justify-content: center}
.main1_cnt2 .project-item {min-width:0; text-align:center; background:#fff; border-radius:2px; overflow:hidden; }
.main1_cnt2 .project-item img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; max-width:288px;; }
.main1_cnt2 .project-item .card-desc { margin-top:8px; padding:8px; font-size:18px; line-height:1.5; font-family:"Pretendard Medium"; }
#main1 .main1_cnt3 { width:100%; max-width:348px; background:#fff; border-radius:12px; box-shadow:0 8px 22px rgba(17,24,39,.06); border:1px solid rgba(0,0,0,.06); padding:clamp(16px,2vw,22px); }
#main1 .overlay-btn1 {margin-top:12px; padding:12px 44px; background:#2b66d9; border-radius:2px; font-size:18px; font-family:"Pretendard Medium"; color:#fff; text-align:left }
#main1 .overlay-btn2 {margin-top:12px; padding:12px 52px; background:#47a6f5; border-radius:2px; font-size:18px; font-family:"Pretendard Medium"; color:#fff; text-align:left }

/* ===== 겹침 방지: 섹션 간 간격/레이어 재정의 =====
.section-products { margin-top:0 !important; padding-top:clamp(24px,6vw,80px) !important; }
.section-hero { margin-bottom:clamp(16px,4vw,48px); }
.section-products .section-deco { z-index:-1 !important; pointer-events:none; }
.products-swiper, .products-swiper .swiper-wrapper { height:auto !important; overflow:visible !important; }
#main1 { margin-top:clamp(24px,5vw,64px); }
.products-swiper-wrap .nav-btn { z-index:2; }

/* ================== Responsive (모아서 하단 정리) ================== */


/* Max 1210 */
@media (max-width:1210px) { #main1 .main1_cnt3 { width:90%; max-width:840px; } }

/* Max 1024 */
@media (max-width:1024px) { .nav-btn { display:none; } #ft { padding:68px 4%; font-size:90%; flex-wrap:wrap; } #ft_company { padding-left:20px; } }

/* Max 986 */
@media (max-width:986px) { #main1 .main1_ul { width:96%; } }

/* Max 788 */
@media (max-width:788px) { 
  .main1_cnt2 { overflow:visible; }
  .main1_cnt2 > .project-list { display:flex !important; flex-wrap:nowrap !important; gap:12px !important; overflow-x:auto !important; overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 12px; touch-action:pan-x pan-y !important; }
  .main1_cnt2 > .project-list .project-item { flex:0 0 calc(50% - 6px) !important; scroll-snap-align:start; min-width:0; }
  .main1_cnt2 .project-item img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }
}

/* Max 712 */
@media (max-width:712px) { .section-products .section-deco { display:none; } .section-products .container { margin-top:68px !important; } }

/* Max 640 */
@media (max-width:640px) { .products-swiper-wrap { display:block; } .nav-btn { display:none; } }

/* Max 488 */
@media (max-width:488px) { .main1_cnt2 > .project-list .project-item { flex-basis:100% !important; } }

/* Max 480 */
@media (max-width:480px) { .slide-caption h2 { line-height:1.2; } .slide-caption h3 { line-height:1.25; } .slide-caption p { line-height:1.55; } }

/* Max 468 */
@media (max-width:468px) { .section-hero .hero-swiper { aspect-ratio:1/1; min-height:360px; } }

/* Max 1439.98 (데스크톱 축소 구간) */
@media (max-width:1439.98px) { #main1 .main1_ul > li { flex:1 1 100%; } #main1 .main1_cnt3 { width:90%; max-width:1200px; padding:0 24px; } .lat_title { padding-top:12px; } }

/* Min 1440 (대형 해상도) */
@media (min-width:1440px) { #main1 .main1_ul { flex-wrap:nowrap; } #main1 .main1_cnt2 { flex:0 0 848px; } #main1 .main1_cnt1, #main1 .main1_cnt3 { flex:0 0 calc((100% - 848px - (var(--gap) * 2))/2); min-width:260px; } }