/********************************************* 현대S라이프 온라인 독도지점 CSS ***********************************************/
/* =====================================================
메인
======================================================*/
/* 기본 설정 및 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; color: #333; line-height: 1.6; background-color: /*#f8f9fa*/ #fff; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
h1, h2, h3, h4, h5 { font-family: 'Noto Sans KR', sans-serif; }
:root { --primary-blue: #004c99; --sky-blue: #0077c8; --brand-blue: #005bb5; --point-gold: #c69f46; --light-gray: #f4f4f4; --border-color: #e0e0e0; --hero-text-overlay: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); }
/* 상단 헤더 영역 */
header { background-color: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
.sdoc-header-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 5px 20px; }
.sdoc-logo a { display: flex; align-items: center; text-decoration: none; }
.sdoc-logo img { max-height: 80px; width: auto; display: block; }
.sdoc-logo span { color: var(--sky-blue); font-size: 18px; font-weight: 900; font-family: 'Noto Sans KR', sans-serif; margin-left: 7px; letter-spacing: -0.5px; }
/* 메인 내비게이션 (PC용) */
.sdoc-gnb { display: flex; gap: 55px; margin-left: auto; margin-right: 10px; margin-top:10px;}
.sdoc-gnb > li { position: relative; padding: 25px 0; }
.sdoc-gnb > li > a { font-size: 18px; font-weight: 600; color: #333; transition: color 0.3s; display: block; }
.sdoc-gnb > li:hover > a { color: var(--sky-blue); }
/* 하위 드롭다운 메뉴 (PC용) */
.sdoc-depth2 { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background-color: #fff; min-width: 200px; box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-top: 7px solid var(--primary-blue); border-radius: 0 0 8px 8px; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 0; z-index: 100; overflow: hidden; }
.sdoc-gnb > li:hover .sdoc-depth2 { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sdoc-depth2 li a { display: block; padding: 14px 20px; font-size: 16px; color: #393939; text-align: center; transition: background 0.2s, color 0.2s; border-bottom: 1px solid #f4f4f4; }
.sdoc-depth2 li:last-child a { border-bottom: none; }
.sdoc-depth2 li a:hover { background-color: var(--primary-blue); color: #fff; font-weight: 500; }
/* 햄버거 메뉴 버튼 (PC에서는 숨김) */
.sdoc-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; z-index: 1002; position: relative; }
.sdoc-hamburger span { display: block; width: 100%; height: 3px; background-color: var(--primary-blue); transition: all 0.3s ease; border-radius: 3px; }
.sdoc-hamburger.sdoc-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.sdoc-hamburger.sdoc-active span:nth-child(2) { opacity: 0; }
.sdoc-hamburger.sdoc-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* 모바일 메뉴 열림 시 반투명 배경 */
.sdoc-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: none; opacity: 0; transition: opacity 0.3s; }
.sdoc-menu-overlay.sdoc-active { display: block; opacity: 1; }
/* 메인 비주얼 슬라이드 영역 */
.sdoc-hero-slider-wrap { position: relative; height: 95vh; min-height: 700px; overflow: hidden; background-color: #000; }
.sdoc-hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; z-index: 1; }
.sdoc-hero-slide.sdoc-active { opacity: 1; z-index: 2; }
.sdoc-hero-inner { max-width: 1400px; height: 100%; margin: auto; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
.sdoc-hero-card { width: 1050px; max-width: 100%; padding: 70px 50px; } /* 메인 비주얼 고정 너비 해제 (전체 화면 공통) */
.sdoc-hero-subtitle { display: inline-block; font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: #88d4ff; margin-bottom: 18px; }
.sdoc-main-text { font-size: 62px; line-height: 1.2; font-weight: 700; letter-spacing: -2px; }
.sdoc-main-text span { color: #4FC3FF; }
.sdoc-hero-divider { width: 90px; height: 4px; background: #4FC3FF; margin: 35px auto; border-radius: 20px; }
.sdoc-desc-text { font-size: 20px; line-height: 1.8; color: rgba(255,255,255,.88); margin-bottom: 45px; }
.sdoc-btn-wrap { display: flex; justify-content: center; gap: 18px; }
.sdoc-btn-wrap a { padding: 16px 40px; border-radius: 100px; font-weight: 700; transition: .35s; }
.sdoc-btn-primary { background: #0A74DA; color: #fff; }
.sdoc-btn-primary:hover { transform: translateY(-3px); }
.sdoc-btn-outline { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; }
.sdoc-btn-outline:hover { background: rgba(255,255,255,.18); }
.sdoc-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: rgba(255,255,255,0.6); font-size: 80px; font-weight: 200; font-family: 'Montserrat', sans-serif; cursor: pointer; z-index: 10; transition: all 0.3s; display: flex; align-items: center; justify-content: center; text-shadow: 0 2px 10px rgba(0,0,0,0.2); width: 80px; height: 100px; }
.sdoc-slider-arrow:hover { background: transparent; color: #fff; transform: translateY(-50%) scale(1.1); text-shadow: 0 4px 15px rgba(0,0,0,0.4); }
.sdoc-arrow-prev { left: 30px; }
.sdoc-arrow-next { right: 30px; }
.sdoc-slider-indicators { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; }
.sdoc-slider-indicators .sdoc-dot { width: 30px; height: 4px; background-color: rgba(255, 255, 255, 0.4); border-radius: 2px; cursor: pointer; transition: all 0.3s ease; }
.sdoc-slider-indicators .sdoc-dot:hover { background-color: rgba(255, 255, 255, 0.7); }
.sdoc-slider-indicators .sdoc-dot.sdoc-active { width: 60px; background-color: #fff; }
/* 메인 비주얼 슬라이드 영역 - 3번째 슬라이드의 3개 배너 CSS */
.sdoc-hero-card { background: transparent !important; box-shadow: none !important; color: #fff !important; max-width: 1200px !important; }
.sdoc-main-text, .sdoc-hero-subtitle { color: #fff !important; }
.sdoc-transparent-banners { display: flex; gap: 20px; list-style: none; padding: 0; margin: 20px 0 0 0; width: 100%; }
.sdoc-transparent-banners li { flex: 1; }
.sdoc-transparent-banners a { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); padding: 50px 30px; text-decoration: none; color: #fff; height: 100%; box-sizing: border-box; transition: all 0.3s ease; }
.sdoc-transparent-banners a:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.8); transform: translateY(-5px); }
.sdoc-transparent-banners .icon-circle { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); margin-bottom: 25px; }
.sdoc-transparent-banners .icon-circle svg { width: 40px; height: 40px; stroke: #fff; }
.sdoc-transparent-banners dl { margin: 0; padding: 0; }
.sdoc-transparent-banners dt { font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 15px; word-break: keep-all; }
.sdoc-transparent-banners dd { font-size: 14px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 0; word-break: keep-all; }
.sdoc-transparent-banners .nb { white-space: nowrap; }
@media screen and (max-width: 900px) {
.sdoc-transparent-banners { flex-direction: column; gap: 15px; }
.sdoc-transparent-banners a { padding: 40px 20px; }
}
/* 회사 정보 안내 영역 */
.sdoc-info-section { background-color: #fff; padding: 60px 0; }
.sdoc-info-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.sdoc-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.sdoc-info-grid::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background-color: #eee; left: calc(25% - 0.5px); }
.sdoc-info-grid .sdoc-grid-line-1 { position: absolute; top: 0; bottom: 0; width: 1px; background-color: #eee; left: calc(50% - 0.5px); }
.sdoc-info-grid .sdoc-grid-line-2 { position: absolute; top: 0; bottom: 0; width: 1px; background-color: #eee; left: calc(75% - 0.5px); }
.sdoc-info-item { text-align: center; padding: 0 30px; }
.sdoc-info-item .sdoc-info-icon { font-size: 40px; color: var(--primary-blue); margin-bottom: 25px; }
.sdoc-info-item .sdoc-info-title { font-size: 15px; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
.sdoc-info-item .sdoc-info-value { font-size: 38px; font-weight: 700; color: var(--primary-blue); font-family: 'Montserrat', sans-serif; margin-bottom: 12px; }
.sdoc-info-item .sdoc-info-desc { font-size: 15px; font-weight: 400; color: #777; }
/* 독도 기부 캠페인 상품 영역 */
.sdoc-new-product-section { background-color: #f3f5f8; padding: 80px 0; }
.sdoc-prod-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.sdoc-prod-header { margin: 0 auto 40px auto; display: flex; justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.sdoc-prod-title-wrap h2 { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 10px; }
.sdoc-prod-title-wrap p { font-size: 16px; color: #666; }
.sdoc-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sdoc-prod-card { background: #fff; border-radius: 24px; padding: 40px 35px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.02); border: 2px solid transparent; transition: transform 0.3s, box-shadow 0.3s; }
.sdoc-prod-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); border-color: #e5f0fa; }
.sdoc-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.sdoc-card-badge { padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; background: #e5f0fa; color: var(--brand-blue); }
.sdoc-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #0F76BB; margin-left: 6px; }
.sdoc-card-icon svg { width: 30px; height: 30px; }
.sdoc-card-body h3 { font-size: 30px; font-weight: 700; color: #222; margin-bottom: 15px; }
.sdoc-card-body p { font-size: 16px; color: #666; line-height: 1.6; min-height: 50px; margin-bottom: 20px; word-break: keep-all; text-align: left; }
.sdoc-card-bottom { margin-top: auto; border-top: 1px solid #f0f0f0; padding-top: 15px; text-align: left; }
.sdoc-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sdoc-price-label { font-size: 15px; color: #666; font-weight: 500; }
.sdoc-price-value { text-align: right; }
.sdoc-price-value strong { display: block; font-size: 25px; font-weight: 700; color: var(--brand-blue); font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; }
.sdoc-price-value span { display: block; font-size: 13px; color: #888; margin-top: 4px; }
.sdoc-btn-card { display: block; width: 50%; text-align: center; padding: 12px 0; border-radius: 10px; font-weight: 700; font-size: 16px; transition: background 0.3s, color 0.3s; background: #222; color: #fff; }
.sdoc-btn-card:hover { background: var(--brand-blue); color: #fff; }
.sdoc-btn-gray{ display: block; width: 50%; text-align: center; padding: 12px 0; border-radius: 10px; font-weight: 700; font-size: 16px; transition: background 0.3s, color 0.3s; background: #ccc; color: #000; }
.sdoc-btn-group { display: flex; gap: 10px; justify-content: center; }
/* 독도지점 소개 배너 */
.sdoc-dokdo-intro-section { background: linear-gradient(135deg, #003366 0%, #0066cc 100%); padding: 70px 20px; color: #fff; text-align: center; position: relative; overflow: hidden; box-shadow: inset 0 0 50px rgba(0,0,0,0.2); }
.sdoc-dokdo-intro-section::before { content: 'DOKDO'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25vw; font-weight: 900; color: rgba(255,255,255,0.05); z-index: 0; pointer-events: none; letter-spacing: 15px; }
.sdoc-dokdo-intro-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.sdoc-dokdo-intro-icon { margin-bottom: 25px; font-size: 35px; line-height: 1.8; font-weight: 600; color: #aed733; }
.sdoc-dokdo-intro-icon svg { width: 48px; height: 48px; color: #ffffff; }
.sdoc-dokdo-intro-text { font-size: 22px; line-height: 1.6; font-weight: 300; word-break: keep-all; }
.sdoc-dokdo-intro-text strong { font-weight: 700; color: #ffffff; }
.sdoc-btn-intro-join { display: inline-block; background-color: #ffffff; color: #003366; padding: 14px 65px; font-size: 24px; font-weight: 700; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.2); margin-top: 40px; }
.sdoc-btn-intro-join:hover { background-color: #fff; color: #0066cc; transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.3); }
/* 커뮤니티 및 명예의 전당 영역 */
.sdoc-new-comm-section { max-width: 1400px; margin: 100px auto; padding: 0 20px; }
.sdoc-new-comm-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.sdoc-new-comm-title h2 { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 12px; }
.sdoc-new-comm-title p { font-size: 15px; color: #666; }
.sdoc-new-comm-more { font-size: 15px; color: var(--brand-blue); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.sdoc-new-comm-more:hover { text-decoration: underline; }
.sdoc-new-comm-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 30px; }
.sdoc-event-card { border-radius: 24px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%), url('/image/community-event.jpg') no-repeat center center/cover; padding: 50px 40px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; min-height: 520px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.sdoc-event-badge-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.sdoc-event-badge { background: #28a745; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.sdoc-event-date { font-size: 14px; opacity: 0.9; font-family: 'Montserrat', sans-serif; font-weight: 500; }
.sdoc-event-card h3 { font-size: 32px; font-weight: 700; margin-bottom: 15px; line-height: 1.3; }
.sdoc-event-card p { font-size: 16px; font-weight: 300; opacity: 0.9; line-height: 1.6; margin-bottom: 30px; max-width: 80%; }
.sdoc-btn-event { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #222; padding: 14px 28px; border-radius: 12px; font-weight: 700; font-size: 15px; align-self: flex-start; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.sdoc-btn-event:hover { background: #f0f0f0; }
.sdoc-right-side-stack { display: flex; flex-direction: column; gap: 20px; }
.sdoc-fame-card { background: #fff; border: 1px solid #eef2f0; border-radius: 24px; padding: 30px; flex-grow: 1; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
.sdoc-fame-title { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; color: #222; margin-bottom: 8px; letter-spacing: -1px; }
.sdoc-fame-desc { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.5; }
.sdoc-fame-list-viewport { height: 180px; overflow: hidden; position: relative; }
.sdoc-fame-list { position: absolute; width: 100%; top: 0; left: 0; padding-right: 5px; }
.sdoc-fame-list li { background: #fff; border-radius: 12px; padding: 12px 20px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; }
.sdoc-fame-list li .sdoc-fame-num { background: #eef4fc; color: var(--brand-blue); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: 'Montserrat', sans-serif; }
.sdoc-fame-list li .sdoc-fame-name { flex-grow: 1; margin-left: 15px; font-size: 15px; font-weight: 600; color: #333; }
.sdoc-fame-list li .sdoc-fame-product { color: #0f882b; border: 1px solid #71c484; font-size: 12px; padding: 3px 10px; border-radius: 16px; font-weight: 600; background: rgba(40,167,69,0.07); }
.sdoc-cs-card-new { background: linear-gradient(135deg, #f0f8ff, #e6f2ff); border-radius: 24px; padding: 30px; color: #333; position: relative; overflow: hidden; border: 1px solid #ddecfa; }
.sdoc-cs-card-new h4 { font-size: 22px; font-weight: 700; margin-bottom: 10px; color: var(--brand-blue); letter-spacing: -1px;}
.sdoc-cs-card-new p { font-size: 14px; color: #555; margin-bottom: 20px; line-height: 1.5; }
.sdoc-btn-cs { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-blue); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background 0.2s; border: none; }
.sdoc-btn-cs:hover { background: var(--primary-blue); }
/* 고객센터 및 공지사항 영역 */
.sdoc-cs-board-section { background-color: #ffffff; padding: 90px 0; color: #333; border-top: 1px solid #f0f0f0; }
.sdoc-cs-board-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: stretch; min-width: 0; } /* min-width 버그 해결 포함 */
.sdoc-cs-info-wrap { display: flex; flex-direction: column; justify-content: center; text-align: left; min-width: 0; } /* min-width 버그 해결 포함 */
.sdoc-cs-info-wrap .sdoc-sub-title { font-size: 14px; font-weight: 700; color: var(--primary-blue); letter-spacing: 1.5px; margin-bottom: 15px; font-family: 'Montserrat', sans-serif; }
.sdoc-cs-info-wrap .sdoc-main-title { font-size: 38px; font-weight: 800; line-height: 1.3; margin-bottom: 25px; color: #222; letter-spacing: -1px; }
.sdoc-cs-info-wrap .sdoc-desc { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 45px; word-break: keep-all; }
.sdoc-cs-info-wrap .sdoc-phone-number { font-size: 70px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--primary-blue); margin-bottom: 5px; }
.sdoc-cs-info-wrap .sdoc-phone-sub { font-size: 13px; color: #888; font-weight: 600; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; }
/* 게시판 영역 축소 막힘 현상 방지 (플렉스/그리드 아이템 강제 축소 허용) */
.sdoc-board-grid-wrap, .sdoc-b-box, .sdoc-board-notice-box { min-width: 0; }
.sdoc-board-grid-wrap { display: flex; flex-direction: column; gap: 20px; }
.sdoc-board-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sdoc-b-box { background: #0066cc; border: none; border-radius: 20px; padding: 30px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 160px; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 102, 204, 0.15); }
.sdoc-b-box:hover { background: #005bb5; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3); }
.sdoc-b-box .sdoc-b-icon-svg { width: 40px; height: 40px; color: #fff; margin-bottom: 15px; z-index: 2; }
.sdoc-b-box .sdoc-b-title { font-size: 22px; font-weight: 700; color: #fff; z-index: 2; letter-spacing: -0.5px; }
.sdoc-b-box .sdoc-bg-icon-svg { position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; color: #fff; opacity: 0.1; z-index: 1; pointer-events: none; stroke-width: 1.5; }
.sdoc-board-notice-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px 30px; color: #333; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.sdoc-notice-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--primary-blue); padding-bottom: 10px; margin-bottom: 10px; }
.sdoc-notice-header h3 { font-size: 18px; color: var(--primary-blue); font-weight: 700; }
.sdoc-notice-header a { font-size: 13px; color: #888; transition: color 0.2s; }
.sdoc-notice-header a:hover { color: var(--primary-blue); }
.sdoc-notice-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dotted #e0e0e0; font-size: 14px; color: #444; gap: 10px; }
.sdoc-notice-list li:last-child { border-bottom: none; padding-bottom: 0; }
/* 긴 텍스트 말줄임표 처리 (화면 밖 삐져나감 방지) */
.sdoc-notice-list li a { font-weight: 400; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; flex: 1; min-width: 0; }
/* 우측 날짜가 좁은 화면에서 찌그러지지 않게 방지 */
.sdoc-notice-list li span { font-size: 13px; color: #999; font-family: 'Montserrat', sans-serif; flex-shrink: 0; }
/* 푸터 (하단 영역) */
footer { background: #132e49; color: #a9bccc; padding: 80px 20px 40px 20px; font-size: 14px; }
.sdoc-footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.sdoc-footer-top-grid { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 0.6fr; gap: 30px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sdoc-footer-brand-col .sdoc-footer-logo-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.sdoc-footer-brand-col .sdoc-footer-logo-title span { color: var(--sky-blue); background: rgba(0, 119, 200, 0.15); padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.sdoc-footer-brand-col .sdoc-footer-brand-desc { font-size: 14px; color: #a9bccc; line-height: 1.6; margin-bottom: 25px; max-width: 380px; }
.sdoc-footer-col-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.sdoc-footer-links-list { display: flex; flex-direction: column; gap: 10px; }
.sdoc-footer-links-list a { font-size: 13px; color: #a9bccc; transition: color 0.2s; }
.sdoc-footer-links-list a:hover { color: #fff; text-decoration: underline; }
.sdoc-footer-bottom-bar { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 40px; }
.sdoc-footer-info-col p { margin-bottom: 6px; line-height: 1.5; font-size: 13px; color: #7890a8; }
.sdoc-footer-copyright { margin-top: 15px !important; color: #5b758d !important; font-family: 'Montserrat', sans-serif; font-size: 12px !important; }
.sdoc-footer-cs-col { text-align: right; }
.sdoc-footer-cs-col p.sdoc-cs-label { font-size: 13px; color: #a9bccc; margin-bottom: 5px; }
.sdoc-footer-cs-col h3 { font-size: 26px; color: #fff; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.sdoc-footer-cs-col p.sdoc-cs-time { color: #7890a8; font-size: 13px; margin-bottom: 15px; }
.sdoc-sns-wrap { display: flex; gap: 8px; justify-content: flex-end; }
.sdoc-sns-wrap a { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; transition: opacity 0.3s; }
.sdoc-sns-wrap a:hover { opacity: 0.8; }
.sdoc-sns-blog { background-color: #03c75a; color: #fff; }
.sdoc-sns-kakao { background-color: #fae100; color: #3c1e1e; }
/* 우측 하단 플로팅 퀵 메뉴 */
.sdoc-quick-menu { position: fixed; bottom: 40px; right: 40px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; }
.sdoc-quick-menu a { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: #fff; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.08); font-size: 12px; font-weight: 700; text-align: center; color: #444; line-height: 1.2; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.sdoc-quick-menu a:hover { transform: translateY(-5px); background-color: var(--brand-blue); color: #fff; border-color: var(--brand-blue); box-shadow: 0 8px 20px rgba(0, 91, 181, 0.2); }
.sdoc-quick-menu .sdoc-btn-top { background-color: #333; color: #fff; border-color: #333; font-size: 14px; }
.sdoc-quick-menu .sdoc-btn-top:hover { background-color: #111; border-color: #111; }
.sdoc-quick-menu .sdoc-btn-top span { display: block; font-size: 10px; margin-top: 2px; font-weight: 500; }
/* ---------------- 반응형 미디어 쿼리 ---------------- */
/* 상품 슬라이더 해상도 (1400px 이하) */
@media (max-width: 1400px) {
.sdoc-logo img { max-height: 50px; }
.sdoc-logo span { font-size: 15px; margin-left: 3px; letter-spacing: -0.5px; }
.sdoc-gnb { display: flex; gap: 30px; margin-left: auto; }
.sdoc-gnb > li { position: relative; padding: 30px 0; letter-spacing: -0.5px; }
.sdoc-gnb > li > a { font-size: 16px; }
.sdoc-b-box .sdoc-b-title { font-size: 18px; }
}
/* 태블릿 해상도 (1024px 이하) */
@media (max-width: 1024px) {
.sdoc-logo img { max-height: 40px; }
.sdoc-logo span { font-size: 17px; margin-left: 3px; letter-spacing: -0.5px; }
.sdoc-gnb { display: flex; gap: 25px; margin-left: auto; }
.sdoc-gnb > li { position: relative; padding: 30px 0; letter-spacing: -0.5px; }
.sdoc-gnb > li > a { font-size: 16px; }
.sdoc-info-grid { grid-template-columns: 1fr 1fr; }
.sdoc-info-grid::after, .sdoc-info-grid .sdoc-grid-line-1, .sdoc-info-grid .sdoc-grid-line-2 { display: none; }
.sdoc-new-comm-grid { grid-template-columns: 1fr; }
.sdoc-event-card { min-height: 400px; }
.sdoc-cs-board-inner { grid-template-columns: 1fr; gap: 40px; }
.sdoc-footer-top-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.sdoc-footer-brand-col { grid-column: 1 / -1; }
.sdoc-hero-slide .sdoc-main-text { font-size: 48px; }
.sdoc-prod-grid { grid-template-columns: 1fr; gap: 20px; }
.sdoc-quick-menu { display: none; }
}
/* 햄버거 메뉴 전환 해상도 (912px 이하) */
@media (max-width: 912px) {
.sdoc-header-inner { position: relative; padding: 15px 10px; }
.sdoc-hamburger { display: flex; }
/* 메인 메뉴를 모바일 슬라이드 메뉴로 변경 */
.sdoc-gnb { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background-color: #fff; flex-direction: column; gap: 0; margin: 0; padding: 80px 20px 20px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 1001; transition: right 0.3s ease; overflow-y: auto; display: block; }
.sdoc-gnb.sdoc-active { right: 0; }
.sdoc-gnb > li { padding: 0; border-bottom: 1px solid #eee; }
.sdoc-gnb > li > a { padding: 15px 0; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.sdoc-gnb > li > a::after { content: '+'; font-size: 18px; color: #999; }
.sdoc-gnb > li.sdoc-open > a::after { content: '-'; color: var(--primary-blue); }
/* 2차 메뉴 아코디언 형태로 초기화 (PC용 호버 기능 비활성화) */
.sdoc-depth2 { position: static; transform: none !important; opacity: 1 !important; visibility: visible !important; display: none; box-shadow: none; border: none; background: #f8f9fa; border-radius: 0; min-width: 100%; padding: 5px 0; }
.sdoc-gnb > li:hover .sdoc-depth2 { display: none; }
.sdoc-depth2 li a { text-align: left; padding: 12px 15px; font-size: 14px; border-bottom: none; color: #555; }
}
/* 모바일 해상도 (768px 이하) */
@media (max-width: 768px) {
/* 전체적인 폰트 크기 최적화 및 레이아웃 재조정 */
.sdoc-hero-card { padding: 40px 20px; width: 100%; }
.sdoc-hero-slide .sdoc-main-text { font-size: 30px; word-break: keep-all; }
.sdoc-hero-slide .sdoc-desc-text { font-size: 15px; word-break: keep-all; }
.sdoc-info-value { font-size: 26px; }
.sdoc-prod-title-wrap h2 { font-size: 24px; word-break: keep-all; }
.sdoc-card-body h3 { font-size: 22px; word-break: keep-all; }
.sdoc-price-value strong { font-size: 20px; }
.sdoc-dokdo-intro-text { font-size: 16px; word-break: keep-all; }
.sdoc-btn-intro-join { padding: 14px 40px; font-size: 18px; }
.sdoc-new-comm-title h2 { font-size: 24px; word-break: keep-all; }
.sdoc-event-card h3 { font-size: 24px; word-break: keep-all; line-height: 1.4; }
.sdoc-fame-title { font-size: 20px; }
.sdoc-cs-card-new h4 { font-size: 20px; }
.sdoc-cs-info-wrap .sdoc-main-title { font-size: 26px; word-break: keep-all; }
.sdoc-b-box .sdoc-b-title { font-size: 18px; }
.sdoc-board-notice-box { padding: 20px 15px; }
.sdoc-dokdo-intro-icon { font-size: 25px;}
/* 기존 스타일 모바일 조정 */
.sdoc-board-boxes { grid-template-columns: 1fr; }
.sdoc-footer-top-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
.sdoc-footer-bottom-bar { flex-direction: column; gap: 25px; }
.sdoc-footer-cs-col { text-align: left; }
.sdoc-sns-wrap { justify-content: flex-start; }
.sdoc-hero-slide .sdoc-btn-wrap { flex-direction: column; gap: 10px; }
.sdoc-slider-arrow { display: none; }
.sdoc-slider-indicators { bottom: 20px; }
.sdoc-info-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.sdoc-info-item { padding: 0 10px; }
.sdoc-new-comm-header { flex-direction: column; align-items: flex-start; gap: 15px; }
.sdoc-quick-menu { bottom: 20px; right: 20px; gap: 8px; }
.sdoc-quick-menu a { width: 54px; height: 54px; font-size: 11px; }
.sdoc-dokdo-intro-section::before { font-size: 35vw; letter-spacing: 10px; }
.sdoc-footer-inner { padding: 0; }
/* 대표 전화번호 글자 크기를 화면 너비(vw)에 비례해서 유연하게 조절 */
.sdoc-cs-info-wrap .sdoc-phone-number {
font-size: min(45px, 12vw) !important;
}
/* 좁은 화면에 맞춰 파란색 박스의 좌우 안쪽 여백 축소 */
.sdoc-b-box {
padding: 24px 20px;
}
/* 푸터(하단)의 '이용약관' 등 링크가 가로로 꽉 찰 경우 밑으로 줄바꿈 */
.sdoc-footer-info-col > div[style*="display: flex"] {
flex-wrap: wrap;
}
}
/* ===============================================================================================================================================================
서브페이지 공통
================================================================================================================================================================*/
/* -------------------------------------------
서브 상단 이미지
------------------------------------------- */
/* 서브 비주얼 (상단 배너 공통) */
.sdoc-sub-visual { padding: 80px 20px; text-align: center; color: #fff; position: relative; }
.sdoc-sub-visual::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.15; z-index: 0; pointer-events: none; }
.sdoc-sub-visual-inner { position: relative; z-index: 1; }
.sdoc-sub-title-sm { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #88d4ff; margin-bottom: 15px; display: inline-block; font-weight: 600; font-family: 'Montserrat', sans-serif; }
.sdoc-sub-title-lg { font-size: 40px; font-weight: 700; letter-spacing: -1px; }
/* 1. 온라인 독도지점 소개 (/about) */
.visual-about { background: linear-gradient(135deg, #002d5e 0%, var(--primary-blue) 100%); }
.visual-about::before { background: url('/image/sub-bg-about.jpg?ver=new2') no-repeat center center/cover; }
/* 2. 독도 기부 캠페인 상품 (/product) */
.visual-product { background: linear-gradient(135deg, #00465a 0%, #007399 100%); }
.visual-product .sdoc-sub-title-sm { color: #88ffed; }
.visual-product::before { background: url('/image/sub-bg-product.jpg?ver=new2') no-repeat center center/cover; }
/* 3. 독도 기부 활동 (/activity) */
.visual-activity { background: linear-gradient(135deg, #09472e 0%, #118153 100%); }
.visual-activity .sdoc-sub-title-sm { color: #88ffae; }
.visual-activity::before { background: url('/image/sub-bg-activity.jpg?ver=new2') no-repeat center center/cover; }
/* 4. 독도수호 커뮤니티 (/community) */
.visual-community { background: linear-gradient(135deg, #473209 0%, #855c11 100%); }
.visual-community .sdoc-sub-title-sm { color: #ffd288; }
.visual-community::before { background: url('/image/sub-bg-community.jpg?ver=new2') no-repeat center center/cover; }
/* 5. 고객센터 (/cs) */
.visual-cs { background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); }
.visual-cs .sdoc-sub-title-sm { color: #d4d4d4; }
.visual-cs::before { background: url('/image/sub-bg-cs.jpg?ver=new2') no-repeat center center/cover; }
.visual-member { background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); }
.visual-member .sdoc-sub-title-sm { color: #d4d4d4; }
.visual-member::before { background: url('/image/sub-bg-cs.jpg?ver=new2') no-repeat center center/cover; }
.visual-policy { background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); }
.visual-policy .sdoc-sub-title-sm { color: #d4d4d4; }
.visual-policy::before { background: url('/image/sub-bg-cs.jpg?ver=new2') no-repeat center center/cover; }
/* -------------------------------------------
서브 네비게이션
------------------------------------------- */
.sdoc-breadcrumb-wrap { background-color: #f8f9fa; border-bottom: 1px solid #eee; }
.sdoc-breadcrumb-inner { max-width: 1400px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; height: 50px; font-size: 14px; }
.sdoc-bc-home { display: flex; align-items: center; color: #555; transition: color 0.2s; }
.sdoc-bc-home:hover { color: var(--brand-blue); }
.sdoc-bc-home svg { width: 16px; height: 16px; fill: currentColor; }
.sdoc-bc-arrow { margin: 0 12px; color: #ccc; font-size: 12px; display: flex; align-items: center; }
.sdoc-bc-arrow svg { width: 12px; height: 12px; fill: currentColor; }
.sdoc-bc-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.sdoc-bc-btn { background: none; border: none; font-size: 14px; color: #555; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 100%; font-family: inherit; font-weight: 500; transition: color 0.2s; }
.sdoc-bc-btn.active-color { color: var(--brand-blue); } /* 현재 위치는 파란색 */
.sdoc-bc-btn:hover { color: var(--brand-blue); }
.sdoc-bc-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.sdoc-bc-btn.open svg { transform: rotate(180deg); }
.sdoc-bc-list { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ddd; width: 180px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); display: none; z-index: 100; border-radius: 4px; overflow: hidden; }
.sdoc-bc-list li { border-bottom: 1px solid #f0f0f0; }
.sdoc-bc-list li:last-child { border-bottom: none; }
.sdoc-bc-list a { display: block; padding: 12px 15px; color: #444; transition: background 0.2s, color 0.2s; font-size: 13px; }
.sdoc-bc-list a:hover { background: #f4f8ff; color: var(--brand-blue); font-weight: 500; }
.sdoc-bc-list a.current { background: #eef4fc; color: var(--brand-blue); font-weight: 600; }
/* 서브 탭 네비게이션 (LNB) */
.sdoc-sub-nav-wrap { border-bottom: 1px solid var(--border-color); background-color: #fff; position: sticky; top: 58px; z-index: 99; }
.sdoc-sub-nav { max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; }
.sdoc-sub-nav a { display: block; flex: 1; text-align: center; padding: 18px 10px; font-size: 16px; font-weight: 500; color: #666; transition: all 0.3s; position: relative; max-width: 250px; }
.sdoc-sub-nav a:hover { color: var(--primary-blue); }
.sdoc-sub-nav a.active { color: var(--primary-blue); font-weight: 700; }
.sdoc-sub-nav a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--primary-blue); }
/* 서브 컨텐츠 wrap & 타이틀 */
.sdoc-sub-content-wrap { max-width: 1200px; margin: 0 auto; padding: 80px 20px 120px; }
.sdoc-sub-content-wrap-pro { max-width: 1400px; margin: 0 auto; padding: 80px 20px 120px; }
.sdoc-page-title { font-size: 40px; font-weight: 700; color: #111; text-align: center; margin-bottom: 60px; letter-spacing: -1.5px; position: relative; padding-bottom: 25px; }
.sdoc-page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background-color: var(--primary-blue); }
/* ==============================================
온라인 독도지점 소개 > 인사말 및 소개 이미지
============================================== */
/* 소개글 박스 (위아래 테두리 선 및 여백) */
.dokdo-wrap .intro-box { max-width: 1200px; margin: 0 auto; padding: 40px 20px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; }
/* 내부 이미지 2장 영역 (가로 배치) */
.dokdo-wrap .intro-img-wrap { display: flex; gap: 20px; margin-bottom: 30px; }
.dokdo-wrap .intro-img { flex: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.dokdo-wrap .intro-img img { width: 100%; height: 350px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.dokdo-wrap .intro-img:hover img { transform: scale(1.03); }
/* 내부 텍스트 영역 */
.dokdo-wrap .intro-box .intro-txt { text-align: left; line-height: 1.8; color: #555; font-size: 15px; margin: 0; word-break: keep-all; }
/* 인사말 박스 및 좌우 레이아웃 (Flex) */
.dokdo-wrap .greeting-box { border: 1px solid #e1e1e1; padding: 50px; background: #fff; max-width: 1200px; margin: 0 auto; }
.dokdo-wrap .greeting-box .g-layout { display: flex; gap: 50px; align-items: stretch; }
/* 좌측 세로 이미지 */
.dokdo-wrap .greeting-box .g-img { width: 320px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.dokdo-wrap .greeting-box .g-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 우측 텍스트 영역 */
.dokdo-wrap .greeting-box .g-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dokdo-wrap .greeting-box .g-lead { font-size: 22px; color: #222; font-weight: 300; margin-bottom: 35px; line-height: 1.6; text-align: left; }
.dokdo-wrap .greeting-box .g-lead strong { font-weight: 700; color: #0a62b0; display: block; margin-top: 10px; }
.dokdo-wrap .greeting-box .g-text p { font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 20px; word-break: keep-all; }
.dokdo-wrap .greeting-box .g-text p:last-child { margin-bottom: 0; }
/* 하단 서명 영역 */
.dokdo-wrap .greeting-box .g-sign { margin-top: 40px; text-align: right; border-top: 1px solid #e1e1e1; padding-top: 30px; }
.dokdo-wrap .greeting-box .g-sign span { display: block; font-size: 15px; color: #888; margin-bottom: 10px; }
.dokdo-wrap .greeting-box .g-sign strong { font-size: 20px; font-weight: 700; color: #222; letter-spacing: -0.5px; }
/* 모바일 반응형 */
@media screen and (max-width: 900px) {
/* 모바일 소개 영역 조절 */
.dokdo-wrap .intro-box { padding: 30px 15px; }
.dokdo-wrap .intro-img-wrap { flex-direction: column; gap: 20px; margin-bottom: 25px; }
.dokdo-wrap .intro-img img { height: auto; max-height: 300px; }
.dokdo-wrap .intro-box .intro-txt { text-align: center; }
/* 인사말 모바일 조절 유지 */
.dokdo-wrap .greeting-box { padding: 40px 30px; }
.dokdo-wrap .greeting-box .g-layout { flex-direction: column; gap: 30px; }
.dokdo-wrap .greeting-box .g-img { width: 100%; height: 300px; }
.dokdo-wrap .greeting-box .g-lead { font-size: 20px; text-align: center; }
}
/* ==============================================
온라인독도지점 설립취지 (에디토리얼 스타일) CSS
============================================== */
.purpose-modern-wrap { width: 100%; max-width: 1200px; margin: 0 auto; font-family: 'Noto Sans KR', sans-serif; color: #222; line-height: 1.6; word-break: keep-all; padding: 100px 20px; }
/* 1. 상단 타이틀 */
.pm-hero { text-align: left; margin-bottom: 80px; }
.pm-sub { font-size: 16px; color: #0a62b0; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px; }
.pm-title { font-size: 48px; font-weight: 300; color: #111; margin: 0; letter-spacing: -1.5px; }
.pm-title strong { font-weight: 800; }
/* 2. 본문 레이아웃 (좌우 분할) */
.pm-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; padding: 40px 0; }
.pm-divider { width: 100%; height: 1px; background: #e1e1e1; }
/* 좌측: 번호 및 소제목 */
.pm-head { width: 250px; flex-shrink: 0; }
.pm-num { display: block; font-size: 18px; font-weight: 700; color: #0a62b0; font-family: 'Montserrat', sans-serif; margin-bottom: 5px; }
.pm-head h3 { font-size: 28px; font-weight: 700; color: #222; margin: 0; letter-spacing: -1px; }
/* 우측: 상세 내용 */
.pm-body { flex: 1; }
/* 01. 설립 목적 텍스트 */
.pm-body .lead-txt { font-size: 24px; font-weight: 300; color: #333; line-height: 1.7; margin: 0; }
.pm-body .lead-txt strong { font-weight: 700; color: #0a62b0; box-shadow: inset 0 -12px 0 rgba(10, 98, 176, 0.1); }
/* 02. 설립 배경 텍스트 */
.pm-body .bg-txt-1 { font-size: 18px; color: #333; line-height: 1.8; margin-bottom: 20px; }
.pm-body .bg-txt-1 strong { font-weight: 600; color: #111; }
.pm-body .bg-txt-2 { font-size: 16px; color: #666; line-height: 1.8; margin: 0; }
/* 03. 공익적 목적 리스트 */
.pm-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #222; }
.pm-list li { display: flex; align-items: flex-start; padding: 40px 0; border-bottom: 1px solid #eaeaea; transition: background 0.3s; }
.pm-list li:hover { background: #f8fafc; padding-left: 20px; padding-right: 20px; margin-left: -20px; margin-right: -20px; border-radius: 10px; border-bottom-color: transparent; }
.list-icon { width: 50px; height: 50px; flex-shrink: 0; margin-right: 30px; display: flex; justify-content: center; align-items: center; background: #f0f6ff; border-radius: 50%; }
.list-icon svg { width: 24px; height: 24px; fill: none; stroke: #0a62b0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.list-txt h4 { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 10px; }
.list-txt p { font-size: 16px; color: #555; line-height: 1.6; margin: 0; }
/* 3. 모바일 반응형 */
@media screen and (max-width: 900px) {
.pm-section { flex-direction: column; gap: 20px; padding: 50px 0; }
.pm-head { width: 100%; border-bottom: 2px solid #222; padding-bottom: 20px; margin-bottom: 10px; }
.pm-head h3 { font-size: 24px; }
.pm-body .lead-txt { font-size: 20px; }
}
@media screen and (max-width: 568px) {
.purpose-modern-wrap { padding: 60px 20px; }
.pm-title { font-size: 36px; }
.pm-body .lead-txt { font-size: 18px; }
.pm-body .bg-txt-1 { font-size: 16px; }
.pm-body .bg-txt-2 { font-size: 15px; }
.pm-list li { flex-direction: column; padding: 30px 0; }
.pm-list li:hover { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; background: transparent; border-bottom-color: #eaeaea; }
.list-icon { margin-bottom: 20px; }
}
/* ==============================================
온라인독도지점 캠페인 (에디토리얼 스타일) CSS
============================================== */
.purpose-modern-wrap { width: 100%; max-width: 1200px; margin: 0 auto; font-family: 'Noto Sans KR', sans-serif; color: #222; line-height: 1.6; word-break: keep-all; padding: 100px 20px; }
/* 1. 상단 타이틀 */
.pm-hero { text-align: left; margin-bottom: 80px; }
.pm-sub { font-size: 16px; color: #0a62b0; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px; }
.pm-title { font-size: 48px; font-weight: 300; color: #111; margin: 0; letter-spacing: -1.5px; }
.pm-title strong { font-weight: 800; }
/* 2. 본문 레이아웃 (좌우 분할) */
.pm-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; padding: 50px 0; }
.pm-divider { width: 100%; height: 1px; background: #e1e1e1; }
/* 좌측: 번호 및 소제목 */
.pm-head { width: 250px; flex-shrink: 0; }
.pm-num { display: block; font-size: 18px; font-weight: 700; color: #0a62b0; font-family: 'Montserrat', sans-serif; margin-bottom: 5px; }
.pm-head h3 { font-size: 28px; font-weight: 700; color: #222; margin: 0; letter-spacing: -1px; }
/* 우측: 상세 내용 */
.pm-body { flex: 1; width: 100%; }
/* 01. 캠페인 개요 */
.pm-body .lead-txt { font-size: 24px; font-weight: 300; color: #333; line-height: 1.7; margin: 0; }
.pm-body .lead-txt strong { font-weight: 700; color: #0a62b0; box-shadow: inset 0 -12px 0 rgba(10, 98, 176, 0.1); }
/* 02. 슬로건 박스 */
.slogan-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 50px; position: relative; }
.slogan-quote { width: 40px; height: 40px; fill: #0a62b0; opacity: 0.1; position: absolute; top: 30px; left: 40px; }
.slogan-txt-1 { font-size: 26px; font-weight: 300; color: #111; margin-bottom: 15px; position: relative; z-index: 2; }
.slogan-txt-1 strong { font-weight: 800; color: #0a62b0; }
.slogan-txt-2 { font-size: 20px; font-weight: 400; color: #555; line-height: 1.6; margin: 0; position: relative; z-index: 2; }
/* 03. 캠페인 목표 (그리드) */
.goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.goal-item { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 30px; display: flex; align-items: flex-start; transition: 0.3s; }
.goal-item:hover { border-color: #0a62b0; box-shadow: 0 10px 20px rgba(10, 98, 176, 0.05); transform: translateY(-3px); }
.check-icon { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; background: #0a62b0; color: #fff; border-radius: 50%; font-style: normal; font-weight: bold; font-size: 14px; margin-right: 15px; flex-shrink: 0; mt: 3px; }
.goal-item p { font-size: 16px; color: #666; line-height: 1.6; margin: 0; }
.goal-item p strong { font-size: 18px; color: #111; display: block; margin-top: 5px; }
/* 04. 캠페인 활동 리스트 */
.pm-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #222; }
.pm-list li { display: flex; align-items: flex-start; padding: 40px 0; border-bottom: 1px solid #eaeaea; transition: background 0.3s; }
.pm-list li:hover { background: #f8fafc; padding-left: 20px; padding-right: 20px; margin-left: -20px; margin-right: -20px; border-radius: 10px; border-bottom-color: transparent; }
.list-icon { width: 50px; height: 50px; flex-shrink: 0; margin-right: 30px; display: flex; justify-content: center; align-items: center; background: #f0f6ff; border-radius: 50%; }
.list-icon svg { width: 24px; height: 24px; fill: none; stroke: #0a62b0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.list-txt h4 { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 10px; }
.list-txt p { font-size: 16px; color: #555; line-height: 1.6; margin: 0; }
/* 5. 모바일 반응형 */
@media screen and (max-width: 900px) {
.pm-section { flex-direction: column; gap: 20px; padding: 50px 0; }
.pm-head { width: 100%; border-bottom: 2px solid #222; padding-bottom: 20px; margin-bottom: 10px; }
.pm-head h3 { font-size: 24px; }
.pm-body .lead-txt { font-size: 20px; }
.goal-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 568px) {
.purpose-modern-wrap { padding: 60px 20px; }
.pm-title { font-size: 36px; }
.pm-body .lead-txt { font-size: 18px; }
.slogan-box { padding: 30px 20px; }
.slogan-quote { width: 30px; height: 30px; top: 20px; left: 20px; }
.slogan-txt-1 { font-size: 20px; }
.slogan-txt-2 { font-size: 16px; }
.goal-item { padding: 20px; }
.goal-item p { font-size: 15px; }
.goal-item p strong { font-size: 16px; }
.pm-list li { flex-direction: column; padding: 30px 0; }
.pm-list li:hover { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; background: transparent; border-bottom-color: #eaeaea; }
.list-icon { margin-bottom: 20px; }
}
/* ==============================================
독도 기부 캠페인 상품 > 독도 기부 캠페인 안내
============================================== */
/* 1. 공통 레이아웃 */
.contents.dokdo-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 20px; font-family: 'Noto Sans KR', sans-serif; color: #333; }
.dokdo-wrap .page-wrap { margin-bottom: 80px; }
.dokdo-wrap .fb32 { font-size: 28px; font-weight: 700; color: #111; text-align: center; margin-bottom: 50px; letter-spacing: -1px; }
.dokdo-wrap .fb32:after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #222; margin: 25px auto 0; }
.dokdo-wrap .fr28 { font-size: 24px; font-weight: 700; color: #222; margin: 40px 0 20px; text-align: left; }
.dokdo-wrap hr { border: 0; height: 2px; background: #222; margin: 60px 0; }
/* 2. 상단 요약 (prd-info) */
.dokdo-wrap .prd-info { text-align: center; }
.dokdo-wrap .prd-info h3 { font-size: 45px; font-weight: 700; color: #222; margin-bottom: 50px; letter-spacing: -1px; }
.dokdo-wrap .prd-info h3 em { display: block; font-size: 16px; font-weight: 400; color: #666; font-style: normal; margin-top: 15px; }
.dokdo-wrap .prd-info ul { display: flex; justify-content: center; align-items: center; position: relative; }
.dokdo-wrap .prd-info ul li { display: flex; align-items: center; font-size: 15px; color: #666; padding: 0 40px; position: relative; }
.dokdo-wrap .prd-info ul li:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: #e1e1e1; }
.dokdo-wrap .prd-info ul li span { text-align: right; margin-right: 20px; line-height: 1.4; color: #333; }
.dokdo-wrap .prd-info ul li em { font-size: 32px; font-weight: 700; color: #05b6c9; font-style: normal; letter-spacing: -1px; font-family: 'Montserrat', sans-serif; }
.dokdo-wrap .prd-info .discount { margin: 40px auto 0; padding: 20px 0; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; max-width: 600px; color: #888; font-size: 15px; word-break: keep-all; line-height: 1.6; }
.dokdo-wrap .bt-prd-lnk { margin-top: 50px; display: flex; justify-content: center; gap: 10px; }
.dokdo-wrap .bt-prd-lnk a { display: inline-block; width: 300px; padding: 20px 0; font-size: 16px; font-weight: 500; color: #fff; text-align: center; text-decoration: none; transition: background 0.2s; }
.dokdo-wrap .bt-prd-lnk a.bt-service { background: #05b6c9; }
.dokdo-wrap .bt-prd-lnk a.bt-service:hover { background: #049ba9; }
.dokdo-wrap .bt-prd-lnk a.bt-all { background: #0a62b0; }
.dokdo-wrap .bt-prd-lnk a.bt-all:hover { background: #084c8a; }
/* 3. 특장점 영역 (hs-good) */
.dokdo-wrap .hs-good { text-align: center; }
.dokdo-wrap .hs-good ul { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; }
.dokdo-wrap .hs-good ul li { width: calc(25% - 15px); margin-bottom: 50px; }
.dokdo-wrap .hs-good ul li img { width: 100%; height: auto; display: block; margin-bottom: 25px; border-radius: 4px; }
.dokdo-wrap .hs-good ul li mark { display: block; background: transparent; font-size: 18px; font-weight: 500; color: #222; margin-bottom: 15px; word-break: keep-all; line-height: 1.4; }
.dokdo-wrap .hs-good ul li em { display: block; font-size: 14px; color: #888; font-style: normal; line-height: 1.6; word-break: keep-all; }
/* 4. 상세 품목 테이블 (prd-detail) */
.dokdo-wrap .prd-detail table { width: 100%; border-top: 2px solid #05b6c9; border-collapse: collapse; margin-bottom: 40px; }
.dokdo-wrap .prd-detail table th, .dokdo-wrap .prd-detail table td { padding: 25px 20px; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; vertical-align: middle; font-size: 15px; word-break: keep-all; color: #555; line-height: 1.6; }
.dokdo-wrap .prd-detail table th:first-child, .dokdo-wrap .prd-detail table td:first-child { border-left: none; }
.dokdo-wrap .prd-detail table .tb-th { background: #f3f8f9; text-align: center; color: #333; font-weight: 500; }
/* 5. 유의사항/혜택 (prd-guide) */
.dokdo-wrap .prd-guide .bul-circle { border: 1px solid #e1e1e1; padding: 40px; background: #fff; text-align: left; }
.dokdo-wrap ul.bul-circle li, .dokdo-wrap .prd-guide .bul-circle ul li { position: relative; padding-left: 15px; font-size: 15px; color: #555; line-height: 2; margin-bottom: 5px; font-weight: 500; }
.dokdo-wrap ul.bul-circle li::before, .dokdo-wrap .prd-guide .bul-circle ul li::before { content: '·'; position: absolute; left: 0; top: 0; color: #05b6c9; font-weight: bold; font-size: 20px; line-height: 1.4; }
/* 6. 모바일 반응형 처리 */
@media screen and (max-width: 900px) {
/* 상단 요약 정보: 1,2번 항목 첫 줄 / 3번 항목 두 번째 줄 배치 */
.dokdo-wrap .prd-info ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 25px 0; padding: 0; }
.dokdo-wrap .prd-info ul li { width: 50%; flex-direction: column; justify-content: center; padding: 0 5px; box-sizing: border-box; }
.dokdo-wrap .prd-info ul li:nth-child(3) { width: 100%; margin-top: 10px; } /* 세 번째 항목은 100% 넓이로 다음 줄 중앙에 배치 */
/* 구분선 세팅 (1번과 2번 사이에만 긋고 3번 앞에는 숨김) */
.dokdo-wrap .prd-info ul li:not(:first-child)::before { display: block; height: 35px; }
.dokdo-wrap .prd-info ul li:nth-child(3)::before { display: none; }
.dokdo-wrap .prd-info ul li span { margin-right: 0; margin-bottom: 5px; text-align: center; font-size: 14px; display: block; }
.dokdo-wrap .prd-info ul li em { font-size: 28px; text-align: center; display: block; line-height: 1; }
.dokdo-wrap .bt-prd-lnk { flex-direction: column; align-items: center; }
.dokdo-wrap .bt-prd-lnk a { width: 100%; max-width: 400px; }
.dokdo-wrap .hs-good ul li { width: calc(50% - 10px); margin-bottom: 40px; }
/* 테이블 가로 스크롤 처리 */
.dokdo-wrap .tb-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.dokdo-wrap .tb-scroll::-webkit-scrollbar { height: 6px; }
.dokdo-wrap .tb-scroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.dokdo-wrap .prd-detail table { min-width: 650px; margin-bottom: 0; }
}
@media screen and (max-width: 568px) {
.dokdo-wrap .prd-info h3 { font-size: 28px; }
/* 모바일 작은 화면 폰트 최적화 */
.dokdo-wrap .prd-info ul li span { font-size: 13px; }
.dokdo-wrap .prd-info ul li em { font-size: 22px; }
.dokdo-wrap .hs-good ul li { width: 100%; }
.dokdo-wrap .prd-detail table { min-width: 550px; }
}
/* ==============================================
독도 기부 캠페인 상품 > 현대S 390, 450, 480 CSS
============================================== */
/* 1. 공통 및 레이아웃 */
.contents.prd-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 0; font-family: 'Noto Sans KR', sans-serif; color: #333; }
.page-wrap { margin-bottom: 80px; }
.fb32 { font-size: 28px; font-weight: 700; color: #111; text-align: center; margin-bottom: 50px; letter-spacing: -1px; }
.fb32:after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #222; margin: 25px auto 0; }
.fr28 { font-size: 24px; font-weight: 700; color: #222; margin: 40px 0 20px; text-align: left; }
hr { border: 0; height: 2px; background: #222; margin: 60px 0; }
/* 2. 상품 요약 상단 (prd-info) */
.prd-info { text-align: center; }
.prd-info h3 { font-size: 45px; font-weight: 700; color: #222; margin-bottom: 50px; letter-spacing: -1px; }
.prd-info h3 em { display: block; font-size: 16px; font-weight: 400; color: #666; font-style: normal; margin-bottom: 15px; }
.prd-info ul { display: flex; justify-content: center; align-items: center; position: relative; }
.prd-info ul li { display: flex; align-items: center; font-size: 15px; color: #666; padding: 0 40px; position: relative; }
.prd-info ul li:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: #e1e1e1; }
.prd-info ul li span { text-align: right; margin-left: 20px; line-height: 1.4; color: #333; }
.prd-info ul li em { font-size: 32px; font-weight: 700; color: #05b6c9; font-style: normal; letter-spacing: -1px; font-family: 'Montserrat', sans-serif; }
.prd-info ul li:nth-child(3) em { color: #222; }
.prd-info .discount { margin: 40px auto 0; padding: 20px 0; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; max-width: 600px; color: #888; font-size: 15px; }
.bt-prd-lnk { margin-top: 50px; display: flex; justify-content: center; gap: 10px; }
.bt-prd-lnk a { display: inline-block; width: 260px; padding: 20px 0; font-size: 16px; font-weight: 500; color: #fff; text-align: center; text-decoration: none; transition: background 0.2s; }
.bt-prd-lnk a.bt-service { background: #05b6c9; }
.bt-prd-lnk a.bt-service:hover { background: #049ba9; }
.bt-prd-lnk a.bt-amount { background: #05c982; }
.bt-prd-lnk a.bt-amount:hover { background: #04a908; }
.bt-prd-lnk a.bt-all { background: #0a62b0; }
.bt-prd-lnk a.bt-all:hover { background: #084c8a; }
/* 3. 특장점 영역 (prd-good) */
.prd-good ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.prd-good ul li { width: 32%; padding: 40px; border: 1px solid #e1e1e1; box-sizing: border-box; text-align: left; width: 400px; margin-right: 40px; }
.prd-good ul li em { display: block; font-size: 30px; font-weight: 700; color: #05b6c9; font-style: italic; margin-bottom: 20px; }
.prd-good ul li .fr28 { font-size: 20px; font-weight: 300; line-height: 1.4; color: #222; margin: 0 0 40px; word-break: keep-all; }
.prd-good ul li p { font-size: 13px; color: #888; line-height: 1.6; word-break: keep-all; }
.prd-good ul li mark { background: transparent; color: #05b6c9; text-decoration: underline; }
.prd-good .pagination { display: none; }
.prd-good .pagination span { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; cursor: pointer; }
.prd-good .pagination .swiper-pagination-bullet-active { background-color: #333; }
/* 4. 고객 리뷰 영역 (prd-people) */
.prd-people > p { font-size: 15px; color: #888; text-align: center; margin-top: -30px; margin-bottom: 40px; }
.prd-people ul { display: flex; justify-content: center; flex-wrap: wrap; }
.prd-people ul li { width: 25%; text-align: center; padding: 0 15px; box-sizing: border-box; width: 300px; }
.prd-people ul li > span { display: block; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; }
.prd-people ul li > span img { width: 100%; height: 100%; object-fit: cover; }
.prd-people ul li h4 { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 10px; }
.prd-people ul li p { font-size: 13px; color: #888; line-height: 1.6; word-break: keep-all; }
.hs-note { text-align: right; font-size: 12px; color: #999; margin-top: 30px; }
.prd-people .pagination { display: none; }
.prd-people .pagination span { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; cursor: pointer; }
.prd-people .pagination .swiper-pagination-bullet-active { background-color: #333; }
/* 5. 상세 품목 탭 및 테이블 (prd-detail) */
.prd-detail .tab { display: flex; width: 100%; background: #f3f8f9; border-bottom: 1px solid #05b6c9; }
.prd-detail .tab li { flex: 1; }
.prd-detail .tab li button { width: 100%; padding: 20px 0; background: transparent; color: #888; font-size: 15px; font-weight: 500; border: none; cursor: pointer; }
.prd-detail .tab li button.active { background: #fff; color: #05b6c9; border: 1px solid #05b6c9; border-bottom: 1px solid #fff; position: relative; top: 1px; }
.tab-cont { display: none; }
.tab-cont.active, .tab-cont0 { display: block; }
.prd-detail table { width: 100%; border-top: 2px solid #05b6c9; border-collapse: collapse; margin-bottom: 40px; }
.prd-detail table th, .prd-detail table td { padding: 25px 20px; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; vertical-align: middle; font-size: 14px; word-break: keep-all; color: #555; }
.prd-detail table th:first-child, .prd-detail table td.tb-1 { border-left: none; }
.prd-detail table td.tb-1 { padding: 0; }
.prd-detail table .tb-th { background: #f3f8f9; text-align: center; color: #333; font-weight: 500; }
.prd-detail table td img { display: block; max-width: 100%; height: auto; }
.prd-detail img { display: block; max-width: 100%; height: auto; }
/* 6. 유의사항 및 안내사항 (prd-guide) */
.prd-guide .bul-circle { border: 1px solid #e1e1e1; padding: 40px; background: #fff; text-align: left; }
ul.bul-circle li { position: relative; padding-left: 15px; font-size: 14px; color: #888; line-height: 2; margin-bottom: 5px; }
ul.bul-circle li::before { content: '·'; position: absolute; left: 0; top: 0; color: #05b6c9; font-weight: bold; font-size: 20px; line-height: 1.4; }
div.bul-circle { font-size: 14px; color: #888; line-height: 2; }
/* 7. 서비스 절차 팝업 모달 (service-layer) */
.service-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.service-layer .inner { width: 100%; max-width: 800px; background: #fff; padding: 40px; box-sizing: border-box; position: relative; }
.service-layer h4.fr28 { text-align: center; font-size: 30px; margin: 0 0 30px; }
.service-layer .service-close { position: absolute; top: 25px; right: 25px; font-size: 0; background: none; border: none; cursor: pointer; width: 35px; height: 35px; }
.service-layer .service-close .i-close { display: block; position: relative; width: 100%; height: 100%; }
.service-layer .service-close .i-close::before, .service-layer .service-close .i-close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #333; }
.service-layer .service-close .i-close::before { transform: rotate(45deg); }
.service-layer .service-close .i-close::after { transform: rotate(-45deg); }
.service-layer .ser-tab { display: flex; margin-bottom: 20px; }
.service-layer .ser-tab li { flex: 1; }
.service-layer .ser-tab button { width: 100%; padding: 20px 0; font-size: 16px; font-weight: 500; background: #f3f8f9; border: none; cursor: pointer; color: #333; }
.service-layer .ser-tab button.active { background: #0a62b0; color: #fff; }
.service-layer .ser-tab-cont { border: 1px solid #e1e1e1; border-top: none; height: 450px; overflow-y: auto; }
.service-layer table { width: 100%; border-collapse: collapse; }
.service-layer caption { display: none; }
.service-layer thead th { padding: 15px; background: #f8f9fa; border-top: 2px solid #0a62b0; border-bottom: 1px solid #e1e1e1; font-weight: 700; font-size: 15px; color: #222; text-align: center; }
.service-layer tbody th { padding: 15px; background: #f0f6fa; border-bottom: 1px solid #e1e1e1; font-weight: 600; font-size: 14px; color: #222; text-align: center; }
.service-layer td { padding: 20px; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; font-size: 14px; color: #666; line-height: 1.6; text-align: left; }
.service-layer td:first-child { border-left: none; }
.service-layer mark { background: transparent; color: #0a62b0; font-weight: 500; display: block; margin-top: 10px; }
.service-layer ol { padding-left: 20px; margin-top: 15px; }
.service-layer ol li { list-style: decimal; color: #888; font-size: 13px; margin-bottom: 5px; }
/* 8. 모바일 반응형 처리 (레이아웃, 슬라이더, 스크롤바 최적화) */
@media screen and (max-width: 1417px) {
.prd-good ul li { width: 28%;}
}
@media screen and (max-width: 900px) {
/* 상품 상단 (월 납입금, 횟수 등) */
.prd-info ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
.prd-info ul li { width: 50%; padding: 0 10px; flex-direction: column; text-align: center; box-sizing: border-box; }
.prd-info ul li:not(:first-child)::before { display: none; }
.prd-info ul li:nth-child(2)::before { display: block; left: 0; top: 50%; transform: translateY(-50%); height: 40px; }
.prd-info ul li:nth-child(3) { width: 100%; margin-top: 30px; }
.prd-info ul li span { margin-left: 0; margin-top: 10px; display: block; }
/* 버튼 3개 나란히 */
.bt-prd-lnk { flex-direction: row; flex-wrap: nowrap; gap: 5px; }
.bt-prd-lnk a { width: 33.33%; padding: 15px 5px; font-size: 13px; line-height: 1.3; display: flex; align-items: center; justify-content: center; word-break: keep-all; }
/* 슬라이더(Swiper) 도트 표시 및 여백 설정 */
.prd-good .pagination, .prd-people .pagination { display: block; text-align: center; margin-top: 30px; }
.prd-people ul li { padding-left: 20px; padding-right: 20px; }
.prd-good ul li { width: 400px; margin-right: 0; margin-bottom: 40px; }
/* 탭 및 표 가로 스크롤 설정 */
.mo-scroll { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.prd-detail .tab { min-width: 600px; }
.prd-detail .inner { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.prd-detail table { min-width: 700px; }
/* 모바일 테이블 커스텀 스크롤바 (이미지와 동일한 회색 스크롤바) */
.mo-scroll::-webkit-scrollbar, .prd-detail .inner::-webkit-scrollbar { height: 8px; }
.mo-scroll::-webkit-scrollbar-thumb, .prd-detail .inner::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.mo-scroll::-webkit-scrollbar-track, .prd-detail .inner::-webkit-scrollbar-track { background: #f1f1f1; }
/* 팝업 모달창 모바일 크기 맞춤 */
.service-layer .inner { width: 95%; padding: 20px; }
.service-layer .ser-tab-cont { height: 350px; }
}
/* ==============================================
독도 기부 캠페인 상품 > 상품 가입 절차 CSS
============================================== */
/* 1. 공통 및 레이아웃 */
.contents.prd-member { width: 100%; max-width: 1400px; margin: 0 auto; padding: 60px 20px; font-family: 'Noto Sans KR', sans-serif; color: #333; }
.fb32 { font-size: 32px; font-weight: 700; color: #222; text-align: center; margin-bottom: 30px; letter-spacing: -1px; }
.fb32:after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #222; margin: 30px auto; }
.fr28 { font-size: 22px; font-weight: 500; color: #222; margin-bottom: 15px; letter-spacing: -0.5px; }
.nb { display: block; }
/* 2. 탭 메뉴 (참고용 기본 스타일) */
.prd-member .tab-wrap { margin-bottom: 60px; }
.prd-member .tab { display: flex; border: 1px solid #ddd; list-style: none; padding: 0; margin: 0; }
.prd-member .tab li a { display: block; padding: 20px 0; text-align: center; color: #666; text-decoration: none; font-size: 16px; font-weight: 500; }
.prd-member .tab li a.active { background: #009ade; color: #fff; }
/* 3. 상품 가입 절차 영역 (prd-step) */
.prd-step { text-align: center; margin-bottom: 80px; }
.prd-step .fb32 mark.point { color: #009ade; background: none; font-size: 36px; font-weight: 700; margin: 0 10px; }
.prd-step .fb32 mark.point::before { content: '[ '; color: #009ade; font-weight: 300; }
.prd-step .fb32 mark.point::after { content: ' ]'; color: #009ade; font-weight: 300; }
.prd-step > p { font-size: 15px; color: #888; line-height: 1.6; margin-bottom: 60px; word-break: keep-all; }
.prd-step ul { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; }
.prd-step ul li { width: calc(33.33% - 20px); background: #f8f9fa; padding: 40px 35px; box-sizing: border-box; margin-bottom: 30px; position: relative; }
.prd-step ul li:not(:nth-child(3n+1))::before { content: ''; position: absolute; left: -16px; top: 50%; width: 12px; height: 1px; background: #222; }
.prd-step ul li em { display: block; font-size: 24px; font-weight: 800; color: #222; font-style: normal; margin-bottom: 25px; }
.prd-step ul li .fr28::before { content: ''; display: block; width: 35px; height: 35px; margin-bottom: 15px; background-size: contain; background-repeat: no-repeat; }
.prd-step ul li:nth-child(1) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step1.svg'); }
.prd-step ul li:nth-child(2) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step2.svg'); }
.prd-step ul li:nth-child(3) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step3.svg'); }
.prd-step ul li:nth-child(4) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step4.svg'); }
.prd-step ul li:nth-child(5) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step5.svg'); }
.prd-step ul li:nth-child(6) .fr28::before { background-image: url('https://hyundaislife.com/theme/hs_life/image/sub/ico_step6.svg'); }
.prd-step ul li p { font-size: 14px; color: #888; line-height: 1.6; word-break: keep-all; }
/* 4. 이래서 좋습니다 영역 (hs-good) 및 하단 버튼 */
.hs-good { text-align: center; }
.hs-good ul { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; }
.hs-good ul li { width: calc(33.33% - 20px); margin-bottom: 50px; }
.hs-good ul li img { width: 100%; height: auto; display: block; margin-bottom: 25px; }
.hs-good ul li mark { display: block; background: transparent; font-size: 18px; font-weight: 500; color: #222; margin-bottom: 15px; word-break: keep-all; line-height: 1.4; }
.hs-good ul li em { display: block; font-size: 14px; color: #888; font-style: normal; line-height: 1.6; word-break: keep-all; }
/* 하단 가입신청 버튼 (max-btns 스타일 적용) */
.hs-good-btn { display: flex; justify-content: center; margin-top: 60px; }
.hs-good-btn .bt-all { display: inline-block; width: 300px; padding: 15px 0; font-size: 16px; font-weight: 500; color: #0a62b0; background: #fff; border-bottom: 2px solid #0a62b0; text-align: center; text-decoration: none; transition: all 0.2s; box-sizing: border-box; }
.hs-good-btn .bt-all:hover { background: #0a62b0; color: #fff; }
/* 5. 모바일 반응형 처리 */
@media screen and (max-width: 900px) {
.fb32 { font-size: 26px; }
.prd-step .fb32 mark.point { font-size: 30px; }
.prd-step ul li, .hs-good ul li { width: calc(50% - 10px); }
.prd-step ul li:not(:nth-child(3n+1))::before { display: none; }
.prd-step ul li:nth-child(even)::before { display: block; content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 1px; background: #222; }
}
@media screen and (max-width: 568px) {
.prd-step ul li, .hs-good ul li { width: 100%; margin-bottom: 20px; }
.prd-step ul li::before { display: none !important; }
}
/* ==============================================
독도 기부 캠페인 상품 > 가입 신청서 작성 폼 CSS
============================================== */
/* 1. 상단 안내 영역 (hs-memo) */
.contents.subscription { max-width: 1200px; margin: 0 auto; padding: 60px 20px; font-family: 'Noto Sans KR', sans-serif; color: #333; }
.contents.subscription .hs-memo.sign { display: flex; align-items: flex-start; border-bottom: 1px solid #666; padding-bottom: 40px; margin-bottom: 60px; }
.contents.subscription .hs-memo.sign .fr28 { width: 30%; font-size: 24px; font-weight: 500; color: #222; margin: 0; }
.contents.subscription .hs-memo.sign .bul-circle { width: 70%; list-style: none; padding: 0; margin: 0; }
.contents.subscription .hs-memo.sign .bul-circle li { position: relative; padding-left: 15px; color: #888; font-size: 14px; margin-bottom: 10px; line-height: 1.6; word-break: keep-all; }
.contents.subscription .hs-memo.sign .bul-circle li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #009ade; }
/* 2. 폼 공통 레이아웃 및 입력창 (register-frm) */
.contents.subscription fieldset { border: none; padding: 0; margin: 0; }
.contents.subscription legend { display: none; }
.register-frm { display: flex; margin-bottom: 20px; border-top: 1px solid #fff; }
.register-frm .fr28 { width: 250px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: #222; margin: 0; padding: 40px 20px; box-sizing: border-box; }
.register-frm .frm-box { width: calc(100% - 250px); padding: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 30px; box-sizing: border-box; margin: 0; list-style: none; }
.register-frm .frm-box li { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.register-frm .frm-box li > label, .register-frm .frm-box li > .regi_tit { width: 120px; padding-top: 10px; font-size: 15px; font-weight: 500; color: #333; position: relative; }
.register-frm .frm-box li > select, .register-frm .frm-box li > .radio-form, .register-frm .frm-box li > input.max_it { width: calc(100% - 120px); }
.register-frm .max_it, .register-frm .max_select { border: none; border-bottom: 1px solid #ddd; padding: 10px 0; font-size: 15px; width: 100%; outline: none; background: transparent; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
.register-frm .max_it::placeholder { color: #bbb; }
.register-frm .max_select { appearance: none; background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; }
/* 3. 필수 항목 (빨간 점) 및 라디오 버튼 */
.req { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #ff3b3b; color: transparent; overflow: hidden; vertical-align: top; margin-left: 5px; margin-top: 6px; }
.req i { display: none; }
.radio-form { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding-top: 10px; }
.max_radio { display: flex; align-items: center; font-size: 15px; color: #666; gap: 8px; margin: 0; cursor: pointer; }
.max_radio input[type="radio"] { appearance: none; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 50%; position: relative; cursor: pointer; margin: 0; background: #fff; }
.max_radio input[type="radio"]:checked { border-color: #0a62b0; }
.max_radio input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #0a62b0; border-radius: 50%; }
/* 4. 2단 구성 (고객정보) 및 우편번호 영역 */
.register-frm .frm-box li > p.fltw49, .register-frm .frm-box li > p.frtw49 { width: 48%; display: flex; align-items: center; margin: 0; }
.register-frm .frm-box li > p.fltw49 label, .register-frm .frm-box li > p.frtw49 label, .register-frm .frm-box li > p.fltw49 .regi_tit, .register-frm .frm-box li > p.frtw49 .regi_tit { width: 100px; font-size: 15px; font-weight: 500; }
.register-frm .frm-box li > p.fltw49 input, .register-frm .frm-box li > p.frtw49 input { width: calc(100% - 100px); }
.inp-addr { width: calc(100% - 120px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px 0; }
.inp-area-zip { width: 100%; display: flex; align-items: center; gap: 15px; margin: 0; }
.inp-area-zip input { width: 200px !important; }
.inp-area-zip .bt-ckit { padding: 12px 30px; border: 1px solid #333; background: #fff; color: #333; cursor: pointer; font-size: 14px; transition: 0.2s; }
.inp-area-zip .bt-ckit:hover { background: #333; color: #fff; }
.inp-addr .inp-area-text { width: 48%; display: block; margin: 0; }
.inp-addr .inp-area-text label { display: none; }
.inp-addr .inp-area-text input { width: 100%; }
/* 5. 가입약관 동의 영역 (chk_agree) */
.chk_agree { margin-top: 80px; }
.chk_agree .fr28 { font-size: 24px; font-weight: 500; margin-bottom: 20px; color: #222; }
.agree-box { background: #f8f9fa; border: 1px solid #e1e1e1; border-radius: 10px 10px 0 0; padding: 40px; height: 280px; overflow-y: auto; }
.agree-box::-webkit-scrollbar { width: 8px; }
.agree-box::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
.mbs-user > p { text-align: center; color: #888; font-size: 14px; margin-bottom: 30px; word-break: keep-all; }
.user-tab { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; padding: 0; list-style: none; }
.user-tab li { width: calc(33.33% - 7px); }
.user-tab li a { display: block; border: 1px solid #e1e1e1; background: #fff; padding: 15px; text-align: center; font-size: 13px; color: #888; text-decoration: none; border-radius: 4px; transition: 0.2s; }
.user-tab li a:hover { border-color: #999; color: #333; }
.mbs-user div[id] { display: none; }
.all-ckit { background: #f0f2f5; text-align: center; padding: 25px; border-radius: 0 0 10px 10px; border: 1px solid #e1e1e1; border-top: none; }
.ckit_label { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: #555; }
.ckit_label input[type="checkbox"] { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #ccc url('data:image/svg+xml;utf8,') center/14px no-repeat; cursor: pointer; outline: none; border: none; }
.ckit_label input[type="checkbox"]:checked { background-color: #888; }
/* 6. 하단 제출 버튼 */
.max-btns { display: flex; justify-content: center; gap: 20px; margin-top: 60px; }
.max-btns button { width: 200px; padding: 15px 0; font-size: 16px; font-weight: 500; background: #fff; border: none; border-bottom: 2px solid; cursor: pointer; outline: none; transition: 0.2s; }
.max-btns .bt-lnk.skyblue { border-color: #009ade; color: #009ade; }
.max-btns .bt-lnk.skyblue:hover { background: #009ade; color: #fff; }
.max-btns .bt-lnk.black { border-color: #333; color: #333; }
.max-btns .bt-lnk.black:hover { background: #333; color: #fff; }
/* ==============================================
가입약관동의 연속 스크롤 및 텍스트 스타일
============================================== */
/* 클릭된(활성화된) 탭 버튼 스타일 */
.user-tab li a.active { border-color: #0a62b0; color: #0a62b0; font-weight: 600; box-shadow: 0 2px 10px rgba(10, 98, 176, 0.1); }
/* 약관 박스 및 커스텀 스크롤바 (첨부 이미지 반영) */
.agree-box { background: #f5f5f5; border: 1px solid #e1e1e1; border-radius: 8px 8px 0 0; padding: 30px; height: 350px; overflow-y: auto; }
.agree-box::-webkit-scrollbar { width: 8px; }
.agree-box::-webkit-scrollbar-thumb { background: #999; border-radius: 10px; }
.agree-box::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
/* 약관 본문 텍스트 스타일 (숨김처리 없이 전부 표시) */
.mbs-user div[id] { display: block !important; background: transparent; border: none; padding: 0; margin-top: 35px; border-radius: 0; animation: none; }
.mbs-user div[id]:first-of-type { margin-top: 10px; } /* 첫 번째 항목은 상단 여백 축소 */
.mbs-user div[id] dt.fr28 { font-size: 18px; font-weight: 500; color: #222; margin-bottom: 12px; border: none; padding: 0; display: block; }
.mbs-user div[id] dd { font-size: 13px; color: #777; line-height: 1.6; word-break: keep-all; margin: 0; }
.mbs-user div[id] dd ul { padding-left: 0; margin-top: 10px; }
.mbs-user div[id] dd ul li { list-style: none; margin-bottom: 5px; color: #777; }
.mbs-user div[id] dd .box { background: #e9ecef; padding: 20px; border-radius: 6px; margin-top: 15px; }
.mbs-user div[id] dd .box em { display: block; font-style: normal; color: #333; margin-bottom: 5px; }
/* 7. 모바일 반응형 처리 */
@media screen and (max-width: 900px) {
.contents.subscription .hs-memo.sign, .register-frm { flex-direction: column; }
.contents.subscription .hs-memo.sign .fr28, .contents.subscription .hs-memo.sign .bul-circle { width: 100%; }
.contents.subscription .hs-memo.sign .fr28 { margin-bottom: 20px; text-align: center; }
.register-frm .fr28 { width: 100%; padding: 20px; justify-content: flex-start; font-size: 18px; }
.register-frm .frm-box { width: 100%; padding: 30px 20px; }
.register-frm .frm-box li > label, .register-frm .frm-box li > .regi_tit { width: 100%; margin-bottom: 10px; }
.register-frm .frm-box li > select, .register-frm .frm-box li > .radio-form, .register-frm .frm-box li > input.max_it { width: 100%; }
.register-frm .frm-box li > p.fltw49, .register-frm .frm-box li > p.frtw49 { width: 100%; flex-wrap: wrap; margin-bottom: 20px; }
.register-frm .frm-box li > p.fltw49 label, .register-frm .frm-box li > p.frtw49 label, .register-frm .frm-box li > p.fltw49 .regi_tit, .register-frm .frm-box li > p.frtw49 .regi_tit { width: 100%; margin-bottom: 10px; }
.register-frm .frm-box li > p.fltw49 input, .register-frm .frm-box li > p.frtw49 input { width: 100%; }
.inp-addr { width: 100%; }
.inp-area-zip input { width: calc(100% - 110px) !important; }
.inp-addr .inp-area-text { width: 100%; }
.user-tab li { width: calc(50% - 5px); }
.max-btns { flex-direction: column; gap: 10px; align-items: center; }
.max-btns button { width: 100%; max-width: 300px; }
}
/* ==============================================
기부금 안내 단독 페이지 디자인 CSS
============================================== */
/* 1. 전체 래퍼 및 헤더 (네이비 배경) */
.donation-guide-standalone { width: 100%; min-height: 700px; background: #f4f7fa; font-family: 'Noto Sans KR', sans-serif; color: #333; padding-bottom: 100px; }
.guide-header { background: linear-gradient(135deg, #13243f 0%, #0a62b0 100%); padding: 100px 20px 180px; text-align: center; color: #fff; border-radius: 0 0 50px 50px; }
.guide-badge { display: inline-block; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.2); padding: 8px 24px; border-radius: 50px; font-size: 15px; color: #00d2ff; margin-bottom: 25px; letter-spacing: 1px; font-weight: 500; }
.guide-header h2 { font-size: 45px; font-weight: 300; margin: 0 0 20px 0; letter-spacing: -1.5px; }
.guide-header h2 strong { font-weight: 800; }
.guide-header p { font-size: 18px; font-weight: 300; color: #d0dcf0; max-width: 600px; margin: 0 auto; line-height: 1.6; }
/* 2. 카드 영역 (헤더 영역으로 끌어올려 입체감 부여) */
.guide-cards-wrap { max-width: 1200px; margin: -100px auto 0; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; z-index: 10; }
.g-card { background: #fff; border-radius: 24px; padding: 50px 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 5px solid #0a62b0; transition: transform 0.3s; }
.g-card:hover { transform: translateY(-10px); }
/* 3. 카드 내부 아이콘 및 텍스트 */
.card-icon { width: 80px; height: 80px; background: #f0f6ff; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.card-icon svg { width: 40px; height: 40px; fill: none; stroke: #0a62b0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-content h3 { font-size: 24px; font-weight: 700; color: #13243f; margin-bottom: 20px; }
.card-content p { font-size: 16px; color: #555; line-height: 1.6; word-break: keep-all; margin-bottom: 0; }
.card-content .hl-blue { color: #0a62b0; font-weight: 700; font-size: 18px; }
/* 4. 예시(ex) 박스 포인트 디자인 */
.ex-box { background: #f8fafc; border: 1px solid #dce4ee; border-radius: 12px; padding: 20px; margin-top: 25px; width: 100%; text-align: left; position: relative; overflow: hidden; }
.ex-box::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #00d2ff; }
.ex-tag { display: inline-block; background: #13243f; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.ex-box strong { display: block; font-size: 16px; color: #222; margin-bottom: 8px; }
.ex-calc { display: flex; align-items: center; font-size: 14px; color: #666; font-weight: 500; }
.ex-calc .arrow { width: 16px; height: 16px; stroke: #aaa; stroke-width: 2; margin: 0 8px; }
.ex-calc em { font-style: normal; color: #ff5722; font-weight: 700; font-size: 16px; }
/* 추가 설명 박스 */
.note-box { background: #f4f7fa; border-radius: 8px; padding: 15px; margin-top: 25px; width: 100%; }
.note-box span { font-size: 14px; color: #777; font-weight: 500; }
/* 5. 모바일 반응형 */
@media screen and (max-width: 1024px) {
.guide-cards-wrap { gap: 20px; }
.g-card { padding: 40px 25px; }
.card-content h3 { font-size: 20px; }
.card-content p { font-size: 15px; }
.ex-calc { flex-wrap: wrap; gap: 5px; }
}
@media screen and (max-width: 768px) {
.guide-header { padding: 80px 20px 140px; border-radius: 0 0 30px 30px; }
.guide-cards-wrap { grid-template-columns: 1fr; gap: 30px; margin-top: -60px; max-width: 500px; }
.g-card { padding: 40px 30px; }
}
@media screen and (max-width: 568px) {
.guide-header h2 { font-size: 32px; }
.guide-header p { font-size: 15px; }
.g-card { padding: 30px 20px; }
.ex-calc { flex-direction: column; align-items: flex-start; }
.ex-calc .arrow { transform: rotate(90deg); margin: 5px 0; }
}
/* ==============================================
독도 기부 활동 > 기부업체 안내
============================================== */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
/* 공통 레이아웃 */
.dokdo-partner-wrap { width: 100%; max-width: 1200px; margin: 0 auto; font-family: 'Noto Sans KR', sans-serif; color: #333; line-height: 1.6; word-break: keep-all; padding-bottom: 100px; }
/* 1. 상단 인사말 영역 (독도 배경 포함) */
.partner-greeting-top { position: relative; background: #fff; margin-bottom: 60px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; }
.greeting-content-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; padding: 60px 50px; position: relative; z-index: 2; }
.greeting-text-area { flex: 1; }
.greeting-text-area .badge { display: inline-block; background: #0a62b0; color: #fff; font-size: 14px; padding: 6px 16px; border-radius: 30px; margin-bottom: 20px; font-weight: 500; letter-spacing: 1px; }
.quote-large { font-size: 22px; color: #777; line-height: 1.6; font-weight: 300; margin-bottom: 40px; position: relative; padding: 0 40px; }
.quote-mark { font-size: 100px; color: #d1d5db; position: absolute; font-family: serif; }
.quote-mark.left { top: -20px; left: -20px; }
.quote-mark.right { bottom: -40px; right: 0; }
.quote-large strong { color: #f44336; font-weight: 500; }
.g-tit { font-size: 22px; color: #437ea8; font-weight: 700; margin-bottom: 15px; }
.g-sub { font-size: 17px; color: #666; line-height: 1.6; margin-bottom: 25px; }
.g-desc { font-size: 16px; color: #444; line-height: 1.8; margin-bottom: 30px; }
.g-sign { text-align: right; margin-top: 30px; }
.g-sign span { font-size: 16px; color: #555; margin-right: 5px; }
.g-sign .name { font-family: 'Nanum Pen Script', cursive; font-size: 38px; font-weight: 400; color: #111; letter-spacing: 5px; margin-left: 10px; vertical-align: middle; }
.greeting-photo-area { width: 200px; flex-shrink: 0; background: #fff; margin-top: 200px; margin-right: 100px; padding: 10px; border: 1px solid #e2e2e2; box-shadow: 10px 15px 30px rgba(0,0,0,0.15); border-radius: 5px; }
.greeting-photo-area img { width: 100%; display: block; border: 1px solid #eee; }
.greeting-bottom-bg { width: 100%; position: relative; z-index: 1; margin-top: -100px; }
.greeting-bottom-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 2; }
.greeting-bottom-bg img { width: 100%; display: block; object-fit: cover; }
/* 2. 히어로 (소개) 섹션 */
.partner-hero { background: #f0f4f8; padding: 100px 20px; text-align: center; border-radius: 0 0 40px 40px; margin-bottom: 80px; }
.partner-hero .badge { display: inline-block; background: #0a62b0; color: #fff; font-size: 14px; padding: 6px 16px; border-radius: 30px; margin-bottom: 20px; font-weight: 500; letter-spacing: 1px; }
.partner-hero h2 { font-size: 42px; font-weight: 800; color: #111; margin: 0 0 25px 0; letter-spacing: -1px; }
.partner-hero p { font-size: 17px; color: #555; max-width: 800px; margin: 0 auto; line-height: 1.8; }
/* 3. 시상식 사진 3장 영역 */
.partner-ceremony-photos { display: flex; gap: 20px; margin-bottom: 80px; }
.c-photo { flex: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.c-photo img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.c-photo:hover img { transform: scale(1.05); }
/* 4. 주요 사업 안내 (카드 그리드) */
.partner-activities { padding: 0 20px; margin-bottom: 120px; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h3 { font-size: 32px; font-weight: 300; color: #111; margin-bottom: 10px; }
.section-header h3 strong { font-weight: 800; color: #0a62b0; }
.section-header p { font-size: 16px; color: #777; }
.activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.act-card { background: #fff; border: 1px solid #eaeaea; padding: 40px 25px; border-radius: 20px; text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; }
.act-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(10, 98, 176, 0.08); border-color: #0a62b0; }
.act-card .icon { margin-bottom: 25px; }
.act-card .icon svg { width: 50px; height: 50px; fill: none; stroke: #0a62b0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: 0.3s; }
.act-card:hover .icon svg { stroke: #05b6c9; }
.act-card h4 { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 20px; }
.act-card p { background-color: #f7f9fa; padding: 20px 15px; border-radius: 12px; font-size: 15px; color: #555; margin: 0; line-height: 1.6; word-break: keep-all; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
/* 5. 사업 추진 실적 (타임라인) */
.partner-history { padding: 0 20px; }
.history-container { display: flex; align-items: flex-start; gap: 80px; }
.history-visual { position: sticky; top: 100px; width: 400px; flex-shrink: 0; }
.history-visual img { width: 100%; height: 550px; object-fit: cover; border-radius: 20px; position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.history-visual .deco-box { position: absolute; bottom: -30px; left: -30px; width: 80%; height: 80%; background: #f0f4f8; border-radius: 20px; z-index: 1; }
.history-content { flex: 1; padding-top: 20px; }
.history-tit { font-size: 16px; font-weight: 700; color: #0a62b0; margin-bottom: 20px; letter-spacing: 2px; }
.history-lead { font-size: 28px; font-weight: 300; color: #222; margin-bottom: 50px; line-height: 1.5; }
.history-lead strong { font-weight: 700; display: block; margin-top: 5px; }
.timeline-wrap { position: relative; padding-left: 30px; }
.timeline-wrap::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 0; width: 2px; background: #e1e1e1; }
.tl-item { position: relative; margin-bottom: 50px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-year { position: absolute; left: -38px; top: 0; width: 60px; font-size: 18px; font-weight: 800; color: #0a62b0; font-family: 'Montserrat', sans-serif; background: #fff; padding: 5px 0; display: flex; align-items: center; }
.tl-year::before { content: ''; display: inline-block; width: 12px; height: 12px; background: #0a62b0; border-radius: 50%; margin-right: 15px; border: 3px solid #fff; box-shadow: 0 0 0 2px #0a62b0; }
.tl-info { padding-left: 50px; }
.tl-info h4 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 15px; }
.tl-info ul { list-style: none; padding: 0; margin: 0; background: #f8fafc; border: 1px solid #eaeaea; border-radius: 12px; padding: 25px; }
.tl-info ul li { font-size: 15px; color: #555; margin-bottom: 10px; padding-left: 50px; position: relative; line-height: 1.6; }
.tl-info ul li:last-child { margin-bottom: 0; }
.tl-info ul li strong { position: absolute; left: 0; top: 0; font-weight: 600; color: #222; background: #eef2f6; padding: 2px 8px; border-radius: 4px; font-size: 13px; }
.tl-info ul li span { color: #888; font-size: 13px; }
/* ==============================================
6. 모바일 반응형 처리
============================================== */
@media screen and (max-width: 1024px) {
.greeting-content-inner { flex-direction: column; text-align: center; padding: 40px 30px; }
.g-sign { text-align: center; }
.greeting-photo-area { margin: 30px auto 0; }
.greeting-bottom-bg { margin-top: -50px; }
.activity-grid { grid-template-columns: repeat(2, 1fr); }
.history-container { gap: 50px; }
.history-visual { width: 350px; }
}
@media screen and (max-width: 768px) {
.partner-hero { padding: 80px 20px; border-radius: 0 0 30px 30px; }
.partner-ceremony-photos { flex-direction: column; }
.c-photo img { height: auto; }
.history-container { flex-direction: column; gap: 60px; }
.history-visual { position: relative; top: 0; width: 100%; max-width: 450px; margin: 0 auto; }
.history-visual .deco-box { bottom: -20px; left: -20px; }
.history-content { padding-top: 0; width: 100%; }
}
@media screen and (max-width: 568px) {
.quote-large { font-size: 18px; padding: 0 15px; }
.g-tit { font-size: 18px; }
.g-desc { font-size: 14px; }
.partner-hero h2 { font-size: 32px; }
.partner-hero p { font-size: 15px; }
.activity-grid { grid-template-columns: 1fr; }
.history-lead { font-size: 24px; }
.timeline-wrap { padding-left: 20px; }
.tl-year { left: -28px; width: auto; font-size: 16px; }
.tl-year::before { width: 10px; height: 10px; margin-right: 10px; }
.tl-info { padding-left: 10px; padding-top: 40px; }
.tl-info h4 { font-size: 20px; }
.tl-info ul { padding: 20px 15px; }
.tl-info ul li { padding-left: 0; padding-top: 25px; }
.tl-info ul li strong { top: 0; }
}
/* =====================================================
게시판 공통
======================================================*/
.sdoc-sub-board { height: auto; justify-content: center; align-items: center; }
/* 1. 헤더 이너 컨테이너에 기준점 설정 (필수) */
.sdoc-header-inner {
position: relative; /* sdoc-user-links의 절대 위치 기준점이 됩니다 */
}
/* 2. 유저 메뉴 위치 및 레이아웃 설정 */
.sdoc-user-links {
position: absolute;
top: 10px; /* 헤더 상단에서부터의 여백 (빨간 동그라미 높이에 맞게 조절) */
right: 30px; /* 우측 끝으로 밀착 */
display: flex;
align-items: center;
gap: 12px; /* 메뉴 간격 */
z-index: 100;
}
/* 3. 유저 메뉴 텍스트 스타일링 */
.sdoc-user-links a {
font-size: 13px; /* 메인 메뉴보다 살짝 작게 */
color: #666; /* 덜 튀도록 차분한 회색 */
text-decoration: none;
letter-spacing: -0.5px;
transition: color 0.2s ease;
}
/* 4. 마우스 오버(Hover) 시 포인트 컬러 */
.sdoc-user-links a:hover {
color: #0A2540; /* 딥블루 포인트 컬러 */
font-weight: 600;
}
/* 5. 메뉴 사이에 구분선(|) 추가 (옵션) */
.sdoc-user-links a:not(:last-child)::after {
content: '|';
display: inline-block;
margin-left: 12px;
color: #ddd;
font-weight: 400;
}
/* --- 모바일 해상도 (768px 이하) 대응 --- */
@media (max-width: 768px) {
.sdoc-user-links {
/* 모바일에서는 햄버거 메뉴 안으로 넣거나, 상단 중앙 등으로 위치를 변경해야 할 수 있습니다.
만약 모바일 헤더에 공간이 부족하다면 숨김 처리하는 것도 방법입니다. */
display: none;
}
}