@charset "UTF-8";


@font-face { font-family: 'AppleSDGothicNeo'; font-weight: 300; src: url("../fonts/AppleSDGothicNeoL.woff2") format('woff2'), url("../fonts/AppleSDGothicNeoL.woff") format('woff'); }
@font-face { font-family: 'AppleSDGothicNeo'; font-weight: 400; src: url("../fonts/AppleSDGothicNeoR.woff2") format('woff2'), url("../fonts/AppleSDGothicNeoR.woff") format('woff'); }
@font-face { font-family: 'AppleSDGothicNeo'; font-weight: 500; src: url("../fonts/AppleSDGothicNeoSB.woff2") format('woff2'), url("../fonts/AppleSDGothicNeoSB.woff") format('woff'); }
@font-face { font-family: 'AppleSDGothicNeo'; font-weight: 600; src: url("../fonts/AppleSDGothicNeoB.woff2") format('woff2'), url("../fonts/AppleSDGothicNeoB.woff") format('woff'); }
@font-face { font-family: 'AppleSDGothicNeo'; font-weight: 700; src: url("../fonts/AppleSDGothicNeoEB.woff2") format('woff2'), url("../fonts/AppleSDGothicNeoEB.woff") format('woff'); }


/*
@font-face { font-family: 'Pretendard'; font-weight: 300; src: url("../fonts/Pretendard_Light.woff2") format('woff2'), url("../fonts/Pretendard_Light.woff") format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; src: url("../fonts/Pretendard_Regular.woff2") format('woff2'), url("../fonts/Pretendard_Regular.woff") format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; src: url("../fonts/Pretendard_SemiBold.woff2") format('woff2'), url("../fonts/Pretendard_SemiBold.woff") format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; src: url("../fonts/Pretendard_Bold.woff2") format('woff2'), url("../fonts/Pretendard_Bold.woff") format('woff'); }
*/



/* 초기화 */
a:active, a:hover, a:link, a:visited { color: #333; text-decoration: none; }
a:focus { text-decoration: underline; }
button, input, optgroup, select, textarea { border-width: 0; }

/* 레이아웃 공통 */
body, html { position: relative; height: 100%; }
/* 모든 텍스트 단어 단위 줄바꿈(한글 keep-all). 긴 영문/URL은 word-wrap:break-word(body)로 넘치지 않게 끊김 */
*, *::before, *::after { word-break: keep-all; overflow-wrap: break-word; }
body { overflow-x: hidden; background-color: #fff; color: #333; font-size: 14px; line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; font-family:'AppleSDGothicNeo', 'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-wrap: break-word; -webkit-text-size-adjust: none; }

@media all and (max-width:640px) { body { font-size: 14px; line-height: 22px; } }

#wrapper { overflow: hidden; position: relative; width: 100%; min-width: 0; }
/* .wrap: 화면 폭에서 좌우 20px씩 뺀 폭, 최대 1400px. 1440px 이상에서는 예전과 같은 1400px.
   (예전엔 1400px 고정 → 1241~1399px 화면(1280/1366 노트북)에서 오른쪽이 잘렸고, 1240px 이하에선 1000px 고정이라 좌우가 크게 비었음) */
.wrap { position: relative; width: calc(100% - 40px); max-width: 1400px; margin-right: auto; margin-left: auto; }

@media all and (max-width:1100px) {
    .wrap { width: auto; max-width: none; margin-right: 0; margin-left: 0; padding-right: 20px; padding-left: 20px; }
}

#header { position: fixed; z-index: 30; width: 100%; height: 60px; background-color: transparent; transition: background-color 0.3s ease; }
#header.scroll {background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
#header .wrap { height: 100%; }
#header .group { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
#header .logo {position:relative; display: flex; height:inherit; align-items: center; }
#header .logo .anchor{display:block; width:190px; height:inherit; background:url('../images/common/d3_logo_w.png') no-repeat left center / contain;}
#header .logo img { height: 13px; }
#header .menu .ul { display: flex; align-items: center; }
#header .menu .li { position: relative; padding: 0 40px; }
#header .menu .li:last-child { padding-right: 0; }
#header .menu .anchor {font-size: 15px; color: #eeeeee; font-weight: 500;  text-decoration: none !important; transition:all 0.2s; letter-spacing: 0;}
#header .menu .li.active .anchor {font-weight: 600;}

#header .menu.active { right: 0; }
#header .btn_menu { display: none; }
@media all and (min-width: 1001px) {
    /* hover: 밝은 파랑 + 아래쪽 밑줄이 왼쪽에서 오른쪽으로 그려짐 (어두운 메인 배경에서도 눈에 띄도록) */
    #header .menu .anchor{position:relative;}
    #header .menu .anchor::after{content:""; display:block; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:currentColor; transition:width 0.3s ease;}
    #header .menu .li:hover .anchor{color:var(--key-color-light);}
    #header .menu .li:hover .anchor::after{width:100%;}
}

@media all and (max-width: 1400px) {
    #header .menu .li{padding:0 30px;}
}
@media all and (max-width: 1000px) {
    #header .wrap{padding-left:20px; padding-right:20px;}
    #header .logo .anchor{width:150px;}
    #header.active .logo {z-index: 100;}
    #header.active .logo .anchor{background-image:url('../images/common/d3_logo_b.png');}
    #header .btn_menu { display: block; position: relative; width: 24px; height: 24px; z-index: 100; cursor: pointer; background:   url('../images/icon/m_menu_w.svg') no-repeat center center / contain; }

    #header .btn_menu.active{ background:   url('../images/icon/close_b.svg') no-repeat center center / contain; }
    #header .menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; padding-top:60px; background-color: #fff; z-index: 90; transition: none; display: flex;  justify-content: center; }
    #header .menu .ul { flex-direction: column; text-align: center; width: 100%; }
    #header .menu .li { padding: 15px 20px; width: 100%; text-align:left;}
    #header .menu .li:not(:last-child)::after { display: none; }
    #header .menu .li.active{background-color:#000;}
    #header .menu .li.active .anchor{color:#fff;}
    #header .menu .anchor { font-size: 17px; color:#000; font-weight:400;}
}

#container { position: relative; z-index: 10; width: 100%; background-color: #fff; }
#container:focus { border: 1px solid #000; }






/* Footer (전 페이지 공통, inc/footer.php) — 메인/서브 모두 어두운 톤. default.css가 :before/:after를 숨기므로 구분선은 display를 직접 지정 */
#footer {position: relative; z-index: 3; padding: 56px 0 64px; border-top: 1px solid rgba(255, 255, 255, 0.12); background: #111; color: rgba(255, 255, 255, 0.6); letter-spacing: 0;}
#footer .group {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;}
#footer .name {display: block; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: #fff;}
#footer .row {display: flex; flex-wrap: wrap; margin: 0; font-size: 14px; line-height: 1.5;}
#footer .row + .row {margin-top: 8px;}
#footer .row span + span::before {content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: rgba(255, 255, 255, 0.25); vertical-align: -1px;}
#footer a {color: inherit; text-decoration: none !important; transition: color 0.25s ease;}
#footer a:hover {color: var(--key-color-light);}
#footer .util {display: flex; flex: none; align-items: center; gap: 28px; font-size: 14px;}
#footer .btn_privacy {padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: 14px; color: #fff; cursor: pointer; transition: color 0.25s ease;}
#footer .btn_privacy:hover {color: var(--key-color-light);}
#footer .copy {margin: 0;}

/* 패밀리 사이트 셀렉트 (푸터가 화면 맨 아래라 목록은 위로 열림). default.css가 :before/:after를 숨기므로 화살표는 display를 직접 지정 */
#footer .family {position: relative; flex: none; width: 190px;}
#footer .family_btn {position: relative; display: block; width: 100%; height: 44px; padding: 0 44px 0 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: transparent; text-align: left; font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease;}
#footer .family_btn::after {content: ""; display: block; position: absolute; top: 50%; right: 18px; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); transition: transform 0.3s ease, margin-top 0.3s ease;}
#footer .family_btn:hover, #footer .family.active .family_btn {border-color: var(--key-color-light);}
#footer .family.active .family_btn::after {margin-top: -2px; transform: rotate(45deg);}
#footer .family_list {position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; background: #1c1c1c; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;}
#footer .family.active .family_list {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
#footer .family_list a {display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); transition: background-color 0.2s ease, color 0.2s ease;}
#footer .family_list a:hover {background: rgba(255, 255, 255, 0.08); color: var(--key-color-light);}

@media all and (max-width: 1100px) {
    #footer .group {flex-direction: column; gap: 32px;}
    #footer .util {flex-direction: column; align-items: flex-start; gap: 14px;}
    #footer .family {order: 3; margin-top: 6px;}
}
@media all and (max-width: 640px) {
    #footer {padding: 44px 0 52px;}
    #footer .row {flex-direction: column; gap: 6px;}
    #footer .row span + span::before {display: none;}
}


/* 공통 모달 (inc/modal.php) — 열기/닫기는 main.js가 .active만 토글. 흰 카드 + 키컬러 포인트 + 검정 버튼 (사이트 서브페이지와 같은 톤) */
.modal_overlay {position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s;}
.modal_overlay.active {opacity: 1; visibility: visible; transition-delay: 0s;}
.modal_box {position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 56px 48px 44px; border-radius: 24px; background: #fff; color: #111; letter-spacing: -0.02em; transform: translateY(28px) scale(0.97); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);}
.modal_overlay.active .modal_box {transform: none;}
.modal_box:focus {outline: 0;}
.modal_x {position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f2f3f5; cursor: pointer; transition: background-color 0.25s ease;}
.modal_x:hover {background: #e4e6ea;}
.modal_x::before, .modal_x::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #111;}
.modal_x::before {transform: rotate(45deg);}
.modal_x::after {transform: rotate(-45deg);}
.modal_eyebrow {display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--key-color);}
.modal_tit {margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3;}
.modal_list {margin: 32px 0 0; border-top: 1px solid #111;}
.modal_list .row {display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid #e5e5e5;}
.modal_list dt {flex: 0 0 76px; font-size: 15px; font-weight: 700; color: #111;}
.modal_list dd {flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.6; color: #444;}
.modal_note {margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: #8a8f98;}
.modal_ok {display: block; width: 100%; height: 60px; margin-top: 32px; padding: 0; border: 0; border-radius: 12px; background: #111; font-size: 17px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color 0.3s ease;}
.modal_ok:hover {background: var(--key-color);}

@media all and (max-width: 640px) {
    .modal_box {padding: 52px 24px 28px; border-radius: 20px;}
    .modal_tit {font-size: 24px;}
    .modal_list .row {flex-direction: column; gap: 6px; padding: 16px 0;}
    .modal_list dt {flex: none;}
    .modal_ok {height: 54px; margin-top: 24px; font-size: 16px;}
}


/* 퀵메뉴 (inc/quick.php): 우측 하단 고정 "문의하기" 버튼. 메인은 히어로를 지나 스크롤하면(.is-show) 아래에서 올라오며 나타나고, 푸터가 보이면(.is-hide) 푸터 글자를 가리지 않게 숨김 */
.quick {position: fixed; right: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px 0 20px; border-radius: 999px; background: var(--key-color); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #fff !important; text-decoration: none !important; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.5s, background-color 0.25s ease;}
.quick.is-show {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
.quick.is-show.is-hide {opacity: 0; visibility: hidden; transform: translateY(16px); transition-delay: 0s, 0s, 0.5s, 0s, 0s;}
.quick .ico {display: block; flex: none; width: 22px; height: 22px;}
.quick:hover {background: var(--key-color-dark, #256eef);}
.quick:hover .ico {animation: quickWiggle 0.6s ease;}
@keyframes quickWiggle {0%, 100% {transform: rotate(0);} 25% {transform: rotate(-12deg);} 60% {transform: rotate(10deg);}}

@media all and (max-width: 640px) {
    .quick {right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 48px; gap: 8px; padding: 0 18px 0 15px; font-size: 14px;}
    .quick .ico {width: 20px; height: 20px;}
}
@media (prefers-reduced-motion: reduce) {
    .quick, .quick.is-show {transition: none;}
    .quick:hover .ico {animation: none;}
}