/* ==============================
   HEADER
   ============================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid #ededed;
    font-size: 15px;
    transition: all 0.5s;
}
#header.hover,
#header:hover { background: var(--white-color); }
#header.gnb-all { background: var(--white-color); }

#header .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    position: relative;
}
#header_bar img, #mobile-menu-btn img { max-width: 25px; }
#header_top_logo { max-width: 100px; }
#header_bar.hidden {
	display: none;
}

/* ==============================
   HEADER NAV (1차 메뉴)
   ============================== */
#header_nav ul#gnb_1dul {
    display: flex;
    font-size: 17px;
}
#header_nav .gnb_1dli {
    flex: 1 1 auto;
    min-width: 120px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}
#header_nav .gnb_1dli > a.active {
    padding-bottom: 4px;
    font-weight: bold !important;
    text-decoration: none;
    color: transparent;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, #58b530, #0097e1);
    background-clip: text;
    -webkit-background-clip: text;
    border-image: linear-gradient(90deg, #58b530, #0097e1) 2;
    transition: all 0.1s ease;
}
#header_nav.hidden {
	display: none;
}

/* ==============================
   SUBMENU (2차, 3차 메뉴)
   ============================== */
#header_nav .gnb_2dul_wrap {
	display: flex;
}	
   
#header_nav .gnb_2dul {
    position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    height: 240px;
    padding: 0 12px;
    background: #fff;
    color: #333;
    box-shadow: rgba(113,113,113,0.28) 0 4px 7px;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.2s;
}
#header_nav .gnb_2dul.visible {
    visibility: visible;
    opacity: 1;
}

#header_nav .gnb_2dli {
    flex: 1;
    height: 240px;
    padding: 28px 12px;
    font-size: 16px;
    text-align: left;
    line-height: normal;
    transition: background 0.2s;
}
#header_nav .gnb_2dli:hover { background: #f1f1f1; }
#header_nav .gnb_2dli.grouped {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#header_nav .gnb_2da {
    display: block;
    font-size: 17px;
    color: #373737;
    transition: color 0.2s;
}
#header_nav .gnb_2da:hover,
.gnb_all_2dli > a:hover,
.gnb_all_2da:hover { color: #58b530; }

#header_nav .gnb_2dul .gnb_2dul_box {
    display: flex;
    border: none;
    box-shadow: none;
    overflow: hidden;
	width: 100%;
}
#header_nav .gnb_2group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- 3차 메뉴 ---- */
#header_nav .gnb_3dul.thefamtv {
	display: flex;
	gap: 30px;
}
#header_nav .gnb_3dul_box {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 0;
    border: none;
    box-shadow: none;
}
#header_nav .gnb_3dli {
    padding: 4px 0;
    font-size: 15px;
    text-align: left;
}
#header_nav .gnb_3dli a {
    color: #878787;
    font-weight: 300;
    transition: color 0.2s;
}
#header_nav .gnb_3dli a:hover,
.gnb_all_3dli > a:hover { color: #000; }

/* ---- 서브메뉴 타이틀 ---- */
#header_nav .gnb_2dul_title {
    width: 100px;
    padding: 28px 0;
    font-size: 25px;
    font-weight: bold;
    line-height: 25px;
    /* color: #34A735; */
    text-align: left;
}

/* ==============================
   FOOTER
   ============================== */
footer {
    position: relative;
    padding: 30px 0;
    background: var(--layout-gray-bg-color);
    z-index: 1;
}
#footer_logo {
    display: block;
    max-width: 165px;
}
footer .footer-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .footer-left {
    display: flex;
    gap: 25px;
    font-size: 13px;
    line-height: 1.7;
    color: #777;
    align-items: center;
}
footer .footer-left strong {
    font-size: 15px;
    color: #616161;
}
footer .footer-left a { color: #777; }
footer .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    font-size: 15px;
}
footer .footer-right .wrap {
    display: flex;
    gap: 12px;
}
footer .footer-right .wrap > a:last-child {
	border-right: none;
}
footer .footer-right .wrap a {
    color: #616161;
    transition: font-weight 0.3s;
	border-right: 1px solid #bdbdbd;
	padding-right: 12px;
	line-height: 1;
}
footer .footer-right .wrap a:hover { font-weight: 600; }
footer .footer-right p {
    font-size: 13px;
    line-height: 1.7;
    color: #777;
}
.sub_wrap { margin: 100px 0 80px; }

/* ==============================
   GNB ALL (모바일 전체 메뉴)
   ============================== */
#gnb_all {
    position: fixed;
    top: 47px;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 20px;
    background: #fff;
    display: none;
    overflow: hidden;
    z-index: 1000;
    transition: transform 0.2s ease;
}
#gnb_all.open { transform: translate(0); }

#gnb_all .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
}
#gnb_all_1dul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f2f2f2;
    overflow: hidden;
}
#gnb_all_1dul > li {
    flex: 1;
    list-style: none;
    margin: 0;
    text-align: left;
	display: flex;
}
#gnb_all_1dul > li:first-child > a { border-top: none; }
#gnb_all_1dul > li:last-child { border-right: none; }

.gnb_all_wrap {
    height: calc(100% - 27px);
    overflow-y: scroll;
}
.gnb_all_1da {
    display: block;
    padding: 5px 0;
    font-weight: bold;
    /* color: #333; */
    text-decoration: none;
    transition: color 0.3s, padding-left 0.3s;
}
.gnb_all_1dli { list-style: none; }
.gnb_all_1dli > a {
    width: 100px;
    padding: 28px 0;
    font-size: 25px;
    font-weight: bold;
    line-height: 25px;
    /* color: #34A735; */
    text-align: left;
}

/* ---- 2차 전체메뉴 ---- */
.gnb_all_2dul { margin: 8px 0; }
.gnb_all_2dli {
    width: 220px;
    height: 240px;
    padding: 28px 12px;
    font-size: 16px;
    line-height: normal;
    text-align: left;
}
.gnb_all_2dli > a {
    display: block;
    font-size: 17px;
    color: #373737;
    transition: color 0.2s;
}

/* ---- 3차 전체메뉴 ---- */
.gnb_all_3dul.thefamtv {
	display: flex;
	gap: 30px;
	width: 230px;
}
.gnb_all_3dul {
    display: block;
    margin: 12px 0 0;
    padding-left: 0;
}
.gnb_all_3dul_box {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.gnb_all_3dli {
    padding: 4px 0;
    font-size: 15px;
    text-align: left;
}
.gnb_all_3dli > a {
    color: #878787;
    font-weight: 300;
    transition: color 0.2s;
}

/* ---- 전체메뉴 닫기 버튼 ---- */
.gnb_close_btn {
    background: none;
    border: none;
    max-width: 19px;
    color: #333;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.gnb_close_btn:hover {
    background: linear-gradient(90deg, #58b530, #0097e1);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.gnb_all_2dul_box { display: flex; }
.gnb_all_2group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gnb_all_login {
	position: absolute;
	top: 15px;
	right: 20px;
    display: flex;
    gap: 8px;	
}

/* ==============================
   MODAL (모달창)
   ============================== */
.sdm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    font-family: 'Noto Sans KR', sans-serif;
}
.sdm-modal .sdm-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
}
.sdm-modal .sdm-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 600px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 24px 0 rgba(0,29,58,0.18), 0 8px 16px 0 rgba(2,32,71,0.05);
    transform: translate(-50%, -50%);
    animation: modalFadeIn 0.2s ease-in-out;
    z-index: 10;
}
.sdm-modal .sdm-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 11;
}
.sdm-modal .sdm-modal-body {
    padding: 20px 15px;
    max-height: 70vh;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}
.sdm-modal .sdm-modal-content h3 {
    margin: 0 0 15px;
    padding-bottom: 12px;
    font-size: 16px;
    color: #34A735;
    border-bottom: 1px solid #eee;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ==============================
   MM-Menu
   ============================== */
.mm-menu { background:#fff !important; color:#333 !important; } 
.mm-menu .mm-navbar { background:#f9f9f9 !important; border-bottom:1px solid #ddd; } 
.mm-menu .mm-listview>li>a { color:#333 !important; } 
.mm-menu .mm-listview>li>a:hover { background:#f0f0f0 !important; } 
.mm-menu .mm-list>li>a.mm-subclose:before, .mm-menu .mm-list>li>a.mm-subopen:after { border-color:#333 !important; } 
.mm-menu .mm-list>li>a.mm-subclose { background:#fff !important; color:#333 !important; } 
.mm-subtitle { border-bottom:1px solid #f2f2f2; } 
.mm-subtitle a { font-size: 16px!important; }
.mm-menu .mm-list#mm-0 { padding-top:50px !important; } 
.mobile-menu-title { position:absolute; top:0; left:0; right:0; height:50px; line-height:50px; padding:0 15px; font-weight:bold; font-size:16px; border-bottom:1px solid #f2f2f2; z-index:9999; background: #ffffff; }
.mm-list>li>a, .mm-list>li>span { font-size: 15px; }
.mm-list a.mm-subclose:before { margin-bottom: -13px!important; }
.mm-menu.mm-vertical .mm-list .mm-panel { padding: 0!important; }
.mm-menu .mm-panel ul { background-color: #e7f7ff!important; }
.mm-menu .mm-panel ul ul { background-color: #f1fde9!important; }
.mm-menu .mm-panel ul ul ul { background-color: #e7e7e7!important; }
.mm-menu .mm-list>li:after { margin-left: 0!important; }

/* ==============================
   MEDIA QUERY
   ============================== */
@media (min-width:1200px) and (max-width:1399px) {
    #header_nav .gnb_2dul_title { font-size: 24px; }
    #header_nav .gnb_2da { font-size: 17px; }
    #header_nav .gnb_3dli { font-size: 15px; }
	.gnb_all_2dli { width: 205px; }
}

@media (min-width:992px) and (max-width:1119px) {
    #header_nav .gnb_2dul_title { font-size: 22px; width: 70px; }
    #header_nav .gnb_2da { font-size: 15px; }
    #header_nav .gnb_3dli { font-size: 13px; }
	#header_nav ul#gnb_1dul { font-size: 16px; }
	.gnb_all_2dli { width: 172px; }
	.gnb_all_2dli > a { font-size: 15px; }
	.gnb_all_3dli { font-size: 14px; }
}

/* ---- Tablet ---- */
@media (min-width:768px) and (max-width:991px) {
    #footer_logo { max-width: 120px; }
    footer .footer-wrap { flex-direction: column; align-items: flex-start; gap: 5px; }
    footer .footer-left { flex-direction: column; gap: 10px; align-items: flex-start; }
    footer .footer-right { gap: 5px; align-items: flex-start; font-size: 13px; }
    #header_nav { display: none; }
    #gnb_all { padding: 0; }
    .gnb_all_1da { padding: 5px 0; }
    .gnb_all_1dli > a { font-size: 20px; }
    .gnb_all_2dli > a { font-size: 18px; }
    .gnb_all_3dli > a { font-size: 16px; }
    .gnb_all_3dul { margin-top: 0; }
    .gnb_all_3dli { padding: 3px 0; }
	.gnb_all_login { top: 0; font-size: 15px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    #footer_logo { max-width: 120px; }
    footer .footer-wrap { flex-direction: column; align-items: flex-start; gap: 5px; }
    footer .footer-left { flex-direction: column; gap: 10px; align-items: flex-start; }
    footer .footer-right { gap: 5px; align-items: flex-start; font-size: 12px; }
    footer .footer-right .wrap { gap: 6px; }
    #header_nav { display: none; }
    #gnb_all { padding: 0; }
    .gnb_all_1da { padding: 5px 0; }
    .gnb_all_1dli > a { font-size: 18px; }
    .gnb_all_2dli > a { font-size: 16px; }
    .gnb_all_3dli > a { font-size: 14px; }
    .gnb_all_3dul { margin-top: 0; }
    .gnb_all_3dli { padding: 0; }
    .gnb_all_2dli { flex-direction: column; align-items: flex-start; gap: 4px; }
    .gnb_all_3dul_box { flex-wrap: wrap; gap: 4px; }
    .gnb_all_wrap { height: 100%; }
	.sub_wrap { margin: 70px 0 30px; }
	.page-header h2 { font-size: 22px; }
	.gnb_all_login { top: 0; right: 15px; font-size: 14px; }
	footer .footer-right .wrap a { padding-right: 6px; }
}