@charset "UTF-8";

@import url('main.css');

/*
@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'); }

@font-face { font-family: 'CircularXXWeb'; font-weight: 300; src: url("../fonts/CircularXXWeb-Light.woff2") format('woff2'), url("../fonts/CircularXXWeb-Light.woff") format('woff'); }
@font-face { font-family: 'CircularXXWeb'; font-weight: 400; src: url("../fonts/CircularXXWeb-Regular.woff2") format('woff2'), url("../fonts/CircularXXWeb-Regular.woff") format('woff'); }
@font-face { font-family: 'CircularXXWeb'; font-weight: 500; src: url("../fonts/CircularXXWeb-Book.woff2") format('woff2'), url("../fonts/CircularXXWeb-Book.woff") format('woff'); }
@font-face { font-family: 'CircularXXWeb'; font-weight: 600; src: url("../fonts/CircularXXWeb-Bold.woff2") format('woff2'), url("../fonts/CircularXXWeb-Bold.woff") format('woff'); }
@font-face { font-family: 'CircularXXWeb'; font-weight: 700; src: url("../fonts/CircularXXWeb-Black.woff2") format('woff2'), url("../fonts/CircularXXWeb-Black.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%; }
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:'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: 1200px; }
.wrap { position: relative; width: 1200px; margin-right: auto; margin-left: auto; }

@media all and (max-width:1240px) {
    #wrapper { min-width: 1000px; }
    .wrap { width: 1000px; }
}
@media all and (max-width:1100px) {
    #wrapper { min-width: 0; }
    .wrap { width: auto; 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:230px; height:inherit; background:url('../images/common/logo_new_white.svg') no-repeat center 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-family: 'CircularXXWeb'; 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) {
    #header .menu .li:hover .anchor{color:#00ffff;}
}

@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.active .logo {z-index: 100;}
    #header.active .logo .anchor{background:url('../images/common/logo_new_b.svg') no-repeat center center / contain;}
    #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 { width: 100%; background-color: #fff; padding: 60px 0 40px; }
.footer .footer_inner { display: flex; gap: 40px; margin-bottom: 50px; }
.footer .footer_col { flex: 1; }
.footer .col_title { font-size: 12px; font-weight: 700; color: #333; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer .col_list { list-style: none; padding: 0; }
.footer .col_list li { margin-bottom: 20px; }
.footer .col_link { font-size: 14px; color: #666; }
.footer .col_link:hover { color: #333; }
.footer .sns_list { display: flex; gap: 25px; flex-wrap: wrap; }
.footer .sns_icon img { width: 16px; height: 16px; object-fit: contain; }
.footer .footer_bottom { border-top: 1px solid #e8e8e8; padding-top: 28px; }
.footer .policy_list { display: flex; gap: 20px; list-style: none; padding: 0; margin-bottom: 14px; flex-wrap: wrap; }
.footer .policy_list a { font-size: 13px; color: #555; }
.footer .policy_list a:hover { color: #333; }
.footer .family_site { display: inline-block; font-size: 13px; color: #111; font-weight:600; margin-bottom: 14px; letter-spacing: 0.1em;}
.footer .footer_copy { font-size: 13px; color: #999; }
@media all and (max-width: 768px) {
    .footer { padding: 40px 0 30px; }
    .footer .footer_inner { flex-wrap: wrap; gap: 30px; }
    .footer .footer_col { flex: 0 0 calc(50% - 15px); }
}




/* 모달 전체 배경 (오버레이) */
.modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(5px); }
.modal_overlay.active { display: flex; }

/* 모달 컨텐츠 박스 */
.modal_content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1000px; max-height: 90vh; background: #fff; border-radius: 30px; color: #2d2d2d; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

/* 모달 내부 스크롤 영역 */
.modal_scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 60px; }
.modal_scroll::-webkit-scrollbar { width: 5px; }
.modal_scroll::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }

/* 닫기 버튼 */
.btn_modal_close { position: absolute; top: 60px; right: 65px; width: 30px; height: 30px; background: url('../images/icon/close_b.svg') no-repeat center center / contain; border: none; cursor: pointer; transition: 0.3s; z-index: 50; }

/* 하단 지원하기 버튼 영역 */
.modal_apply_wrap { text-align: center; padding: 20px 60px; border-top: 1px solid #eee; background: #fff; }
.modal_apply { display: inline-flex; align-items: center; gap: 10px; padding: 0 44px; height: 58px; background: #000; border-radius: 50px; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.02em; transition: background 0.2s; text-decoration: none; }
.modal_apply:hover { background: #333; }
.modal_apply span {position:relative; display:inline-block; padding-right:25px; color:#fff;}
.modal_apply span::after{position:absolute; right:0; top:50%; transform:translateY(-50%); content:''; display:block; width:18px; height:18px; background:url('../images/icon/share_w.svg') no-repeat center center / contain;}

/* 미디어 쿼리 정리 */
@media all and (max-width:1200px){
    .modal_apply_wrap { padding: 18px 50px; }
    .modal_apply { height: 54px; padding: 0 40px; font-size: 17px; }
    .modal_apply svg { width: 16px; height: 16px; }
}

@media all and (max-width:768px){
    .modal_overlay{padding:0;}
    .modal_content{max-height:100dvh; border-radius:0;}

    .modal_scroll { padding-left: 20px; padding-right: 20px; }
    .btn_modal_close { width: 20px; height: 20px; top: 23px; right: 20px; }
    .modal_apply_wrap { padding: 16px 30px; }
    .modal_apply {display:flex; justify-content: center; align-items: center; width:100%; height: 50px; padding: 0 34px; font-size: 16px; }
    .modal_apply span {padding-right:20px;}
    .modal_apply span::after{width:15px; height:15px;}
}

@media all and (max-width:640px){
    .modal_apply_wrap { padding: 14px 20px; }
    .modal_apply { height: 46px; padding: 0 28px; font-size: 15px; }
    .modal_apply svg { width: 14px; height: 14px; }
}


/* Family Site 팝업 */
.family_modal .family_modal_wrap { position: relative; width: 100%; max-width: 340px; }
.family_modal .family_modal_box { width: 100%; background: #fff; border-radius: 4px; padding: 28px 40px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); max-height: 90vh; overflow-y: auto; }
.family_modal .btn_modal_close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #aaa !important; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; opacity: 1; z-index: 1; }
.family_modal .family_modal_list { list-style: none; padding: 0; margin: 0; }
.family_modal .family_modal_list a { display: block; padding: 22px 0; font-size: 15px; font-weight: 700; color: #111; letter-spacing: 0.04em; transition: color 0.2s; }
.family_modal .family_modal_list a:hover { color: #555; }
@media all and (max-width: 640px) {
    .family_modal { padding: 20px 40px 20px 20px; } /* 우측 여백 확보 (버튼 돌출 영역) */
    .family_modal .family_modal_wrap { max-width: 100%; }
    .family_modal .family_modal_box { padding: 24px 24px 16px; max-height: 78vh; }
    .family_modal .btn_modal_close { top: -14px; right: -14px; width: 30px; height: 30px; font-size: 15px; }
    .family_modal .family_modal_list a { font-size: 14px; padding: 16px 0; }
}