@charset "utf-8"; /* 폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900; 1,100..900&display=swap'); @font-face { font-family: 'NanumHuman'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/NanumHumanTTFExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; } 

@font-face { font-family: 'NanumHuman'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/NanumHumanTTFHeavy.woff2') format('woff2'); font-weight: 900; font-display: swap; } 
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } 

/* ******************* *
* GLOBAL
* ******************* */
:root { --font-Pretendard: "Pretendard", sans-serif; --font-NotoSans: "Noto Sans", sans-serif; --font-NanumHuman: "NanumHuman"; --color-main: #2D3386; --color1: #F6EBD7; --color-gray: #696969; } 

html, body { font-size: 20px; font-family: var(--font-Pretendard); letter-spacing: -0.038rem; line-height: 1.4; word-break: keep-all; word-wrap: break-word; color:#000; touch-action: auto; overscroll-behavior: auto; text-size-adjust:100%; /* overflow-x: hidden; */scroll-behavior: smooth; } 
html { overflow-x: hidden; } 
body { overflow-x: visible; } 
html.locked, 
body.locked { overflow: hidden; } 
body::after { content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; transition: .35s; z-index:100 } 
body.locked::after { opacity: 1; pointer-events: auto; } 
body { } 
.cinner { max-width: 1400px; width: 92%; margin: 0 auto; } 
.line-br { display: block; } 

@media all and (max-width: 1399px){
}
@media all and (max-width: 1024px) { html, body { font-size: 18px; } 
 }
@media all and (max-width: 640px) { html, body { font-size: 16px; } 
 }

/* scroll Bar */
body::-webkit-scrollbar { width: 10px; } 
body::-webkit-scrollbar-thumb { background-color: var(--color-main); } 
body::-webkit-scrollbar-track { background-color: #f9f9f9; } 

.nomal_img { display:block } 
.sub_img { display:none } 
#header.sub_hd { background:#fffbf3 } 
#header.sub_hd .nomal_img { display:none } 
#header.sub_hd .sub_img { display:block } 
#header.sub_hd .nav__btn a { background:url(../img/main/menu_icon_sub.png) } 
/* ******************* *
* HEADER
* ******************* */
#header { width: 100%; position:relative; top: 0; left: 0; right: 0; margin: auto; z-index: 999; display:flex; flex-direction: column; } 
.hd_top { display: flex; align-items: center; justify-content: space-between; padding:30px 0 } 
#header .cinner { display: flex; flex-direction: column; } 
#header__nav { display: flex; gap: 20px; align-items: center; width: 100%; justify-content: space-between; position: relative; } 
.hd_nav_left { display: flex; align-items: center; } 
.header__logo { position:relative } 
.main-nav__depth1 .mn-ul1 { display: flex; align-items: center; gap: 40px; padding: 0 40px; } 
.main-nav__depth1 .mn-li1 { line-height: 1.0 } 
.main-nav__depth1 .mn-a1 { display: inline-block; color: #111; font-size: 18px; font-weight: 500; position: relative; } 
.main-nav__depth1 .mn-a1::before { content: ''; display: block; width: 4px; aspect-ratio: 1 / 1; border-radius: 50%; background: #111; position: absolute; top: -7px; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .35s; } 
.main-nav__depth1 .mn-a1:hover::before,
.main-nav__depth1 .mn-a1:focus::before { opacity: 1; } 
.main-nav__depth2 { display: none; position: absolute; top: 100px; left: 0; width: 100%; background: transparent; z-index: 991; } 
#util > ul { display: flex; gap: 20px; align-items:center } 
#util > ul > li > a { color: #111; font-size: 15px; text-align: center; } 
#util > ul > li > a p { display: flex; flex-direction: column; gap: 10px; } 
#util > ul > li > a > .ico > img { margin: 0 auto; } 

.hd_nav_right { display: flex; gap: 20px; } 
.hd_nav_right > div { } 
.hd_nav_right > div a { display: flex; align-items: center; gap: 10px; font-size: 16px; } 
.mo_nav__btn { display: none; } 
.nav__btn { align-self: center; } 
.nav__btn.active { opacity: 1; visibility: visible; } 

.nav__btn a { display: flex; width: 50px; aspect-ratio: 1 / 1; background: var(--color-main) url(../img/main/menu_icon.png) no-repeat center center; position: relative; } 
.nav-bg { width: 100%; height: 0; background: #fff; position: absolute; top: 100px; left: 0; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease; z-index: 990; } 

@media all and (max-width: 1199px){
 #util > ul { gap: 15px } 
 .main-nav__depth1 .mn-ul1 {gap:20px; padding:0 20px}
 }
@media all and (max-width: 1024px){
 #main-nav { display: none; } 
 .header__logo img { height:40px; } 
 #util { display: flex; align-items: center; gap: 20px; } 
 #util > ul > li > a > .txt { display: none; } 
 .nav__btn { display: block; opacity: 1 !important; visibility: visible !important; } 
 .nav__btn a { background:  url(../img/main/mo_menu_icon.png) no-repeat center center}
 }
@media all and (max-width: 768px){
 .hd_line_banner p { font-size:12px; } 
 }
@media all and (max-width: 640px){
 .nav__btn a { width:20px; height:18px } 
 .header__logo > a > img { max-width: none; height: 30px; } 
 #util > ul { gap: 12px; } 
 #util > ul > li > a p {gap:0}
 #util > ul > li > a > .ico > img { width: 20px; } 
 #util { gap: 12px; } 
 }
@media all and (max-width: 480px) { } 




@media(max-width:1399px) {
    .hd_nav_right > div a {font-size:16px}
}
@media(max-width:1199px) { 
    .hd_nav_right > div a { font-size: 0; } 
} 
@media(max-width:1024px){
 .center_logo,
 .hd_nav_right,
 .hd_login { display:none } 
 #util > ul > li > a p { font-size: 0; } 
 
 #header .cinner { flex-direction: row-reverse; justify-content: flex-end; gap:10px } 
 #header__nav { width:auto } 
 .hd_top { width:100% } 


 }
@media(max-width:768px) { 

 .hd_nav_right > div a { font-size: 0; } 
 .hd_top { padding:20px 0 } 
 }
@media(max-width:640px) { } 
@media(max-width:500px) { } 

/* ******************* *
* SIDEBAR
* ******************* */
#sidebar { max-width: 450px; width: 100%; height:100%; padding: 20px; box-sizing: border-box; background: #fff; position: fixed; top:0; left: -450px; right: 100%; z-index: 9999; transition: .35s ease; visibility: hidden; opacity: 0; } 
#sidebar.active { left: 0; visibility: visible; opacity: 1; } 
.sidebar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } 
.sidebar__header > .btn-adm { display: block; width: 60px; padding: 3px 0; background: #E04545; color: #fff; font-size: 16px; text-align: center; } 
.sidebar__header > .sidebar-btn_close { display: block; width: 24px; aspect-ratio: 1 / 1; border: 0; background: no-repeat; position: relative; } 
.sidebar__header > .sidebar-btn_close::before,
.sidebar__header > .sidebar-btn_close::after { content: ''; display: block; width: 100%; height: 3px; background: var(--color-main); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } 
.sidebar__header > .sidebar-btn_close::before { transform: rotate(45deg); } 
.sidebar__header > .sidebar-btn_close::after { transform: rotate(-45deg); } 


.sidebar__cont { max-height: 92%; padding-right: 10px; padding-bottom: 20px; box-sizing: border-box; overflow-y: scroll; } 
.sidebar__cont::-webkit-scrollbar { width: 4px; } 
.sidebar__cont::-webkit-scrollbar-thumb { background-color: #bfbfbf; border-radius: 2px; } 
.sidebar__cont::-webkit-scrollbar-track { background-color: transparent; } 
.sidebar_user { margin-bottom: 20px; } 
.sidebar_user > ul { display: flex; flex-wrap: wrap; gap: 12px; } 
.sidebar_user > ul > li { width: calc(50% - 6px); } 
.sidebar_user > ul > li > a { display: flex; justify-content: center; align-items: center; width: 100%; height: 45px; border: 1px solid var(--color-main); border-radius: 5px; color: var(--color-main); font-size: 16px; font-weight: 500; } 
.sidebar_user > ul > li > a.color { background: var(--color-main); color: #fff; } 


.sidebar__menu_depth1 a { color: #111; font-weight: 500; transition: .35s; } 
.sidebar__menu_depth1 a:hover { color: var(--color-main); } 
.sidebar__menu_depth1 .mn-li1 { border-top: 1px solid rgba(255,255,255,.3); position: relative; } 
.sidebar__menu_depth1 .mn-li1:not(:last-child) { margin-bottom: 20px; } 
.sidebar__menu_depth1 .mn-a1 { font-family: var(--font-NanumHuman); font-weight: 600; } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow { display: block; width: 12px; height: 12px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); position: absolute; top: 10px; right: 10px; transform: translateY(-50%) rotate(135deg); cursor: pointer; transition: transform 0.3s ease-in-out; } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2).active > .toggle-arrow { transform: rotate(-45deg); } 
.sidebar__menu_depth2 { margin: 10px auto; padding: 10px 15px; background: #f7f7f7; } 
.sidebar__menu_depth2 .mn-li2:not(:last-child) { margin-bottom: 10px; } 
.sidebar__menu_depth2 .mn-li2:has(.sidebar__menu_depth3) > .toggle-arrow { display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 29px; right: 10px; transform: translateY(-50%) rotate(135deg); cursor: pointer; transition: transform 0.3s ease-in-out; } 
.sidebar__menu_depth2 .mn-li2:has(.sidebar__menu_depth3).active > .toggle-arrow { transform: rotate(-45deg); } 
.sidebar__menu_depth2 .mn-a2 { font-size: 16px; } 
.sidebar__menu_depth3 { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } 
.sidebar__menu_depth3 .mn-li3 { padding: 6px 0; } 
.sidebar__menu_depth3 .mn-a3 { color: rgba(255,255,255,.4); font-size: 16px; } 


@media all and (max-width: 1024px){
 #sidebar {  max-width:100% } 
 }
@media all and (max-width: 640px){
 .sidebar__header > .sidebar-btn_close { width: 30px; } 
 }

/* ******************* *
* FOOTER
* ******************* */
#footer { border-top:1px solid #eee; background:#fff; padding:45px 0 } 
#footer .cinner { display: flex; justify-content: space-between; } 
#footer .footer_wrap { } 
#footer .footer_wrap .footer_top { } 
#footer .footer_wrap .footer_top .menu { display: flex; align-items: center; gap: 10px 40px; margin-bottom: 30px; flex-wrap:wrap} 
#footer .footer_wrap .footer_top .menu a { color: #666; position: relative; font-size: 0.9em; } 
#footer .footer_wrap .footer_top .menu a:before { content:''; position:absolute; left:-20px; width:1px; height:12px; background:#666; top:50%; transform:translateY(-50%) } 
#footer .footer_wrap .footer_top .menu a:first-child:before { display: none; } 
#footer .footer_wrap .footer_mid { margin-bottom: 20px; display: flex; flex-direction: column; gap:5px; } 
#footer .footer_wrap .footer_mid div { display: flex; gap: 25px; } 
#footer .footer_wrap .footer_mid div span { font-size: 0.8em; color: #666; } 
#footer .footer_wrap .footer_bottom { } 
#footer .footer_wrap .footer_bottom .copyright { font-size: 0.8em; color: #b9b9b9; } 
.fixed_link_wrap {position:fixed; top:50%; right:50px; transform: translateY(-50%);z-index: 9999;}
.fixed_link_wrap img {max-width:110px;}
@media (max-width:1000px){
 #footer .footer_wrap .footer_mid div:first-child,
 #footer .footer_wrap .footer_mid div { flex-wrap: wrap; justify-content: flex-start;gap:10px } 
 #footer .footer_wrap .footer_mid div span { text-align: left; } 
 }


/* ******************* *
* CONTAINER
* ******************* */
#container { margin-top: 130px; } 

@media all and (max-width: 1024px){
    #container { margin-top: 100px; } 
    #footer .cinner { flex-direction: column; gap:30px } 
    .footer__cont .ft_right { gap:30px; flex-wrap: wrap; } 
    .fixed_link_wrap {right:30px}
    .fixed_link_wrap img {max-width:80px;}
}

@media all and (max-width: 640px){
    #container { margin-top: 80px; }
    .fixed_link_wrap {right:20px; transform:none;bottom:40px;top:unset}
    .fixed_link_wrap img {max-width:70px;}
 }



/* ******************* *
* 전체 검색
* ******************* */
#headerSearchBox { position:absolute; left:0; top:130px; width:100%; z-index:10000; background:var(--color-main); } 
#headerSearchBox .cinner { display: flex; align-items: center; justify-content: center; padding:100px 0 } 
#headerSearchBox .cinner button { background: transparent; border: 0; } 
#headerSearchBox .cinner input { background: transparent; color: #fff; border: none; border-bottom: 2px solid #fff; padding: 10px; width: 350px; } 
#headerSearchBox .cinner input::placeholder { color:#fff } 
.msearch > form { display: flex; align-items: center; gap: 14px; } 
.msearch .search-cont { width: 100%; height: 80px; padding: 16px 50px; border: 2px solid var(--color1); border-radius: 40px; box-sizing: border-box; background: #fff; position: relative; cursor: pointer; } 
.msearch .search-cont.active { box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1); } 
.msearch .search-cont > .txt { margin-bottom: 3px; color: var(--color-main); font-size: 16px; font-weight: 500; line-height: 1.0; } 
.msearch .search-cont > input[type="text"] { width: 100%; border: none; color: #999; font-size: 18px; } 
.msearch #sch_submit { flex: 0 0 auto; display: block; width: 78px; aspect-ratio: 1 / 1; border: 0; border-radius: 15px; background: var(--color-main) url('../img/main/msec01-ico_search.svg') center center / cover no-repeat; } 
.msearch .search-popup { display: none; width: 100%; border-radius: 20px; padding: 40px 50px; box-sizing: border-box; background: #fff; font-size: 16px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1); position: absolute; top: 100px; left: 0; z-index: 999; } 
.msearch .search-filter-cont > div:not(:last-child) { margin-bottom: 30px; } 
.msearch .search-filter-cont .tit { margin-bottom: 10px; color: var(--color-main); font-weight: 700; } 
.msearch .search-filter-cont .filter-keyword { display: flex; flex-wrap: wrap; gap: 14px; } 
.msearch .search-filter-cont .filter-keyword > .keyword { padding: 11px 36px; border: 1px solid #B3B3B3; border-radius: 20px; box-sizing: border-box; color: #B3B3B3; line-height: 1.0; } 
.msearch .search-filter-cont .filter-keyword > .keyword.active { border-color: var(--color-main); color: var(--color-main); } 
.msearch .search-auto-cont > .tit { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #D4D4D4; color: #000; font-weight: 600; } 

@media all and (max-width: 1199px){
 .msearch { margin-bottom: 40px; } 
 }
@media all and (max-width: 1024px){
 #headerSearchBox { top:100px; } 
 .msearch .search-cont { height: 60px; padding: 9px 30px; } 
 .msearch .search-cont > .txt { margin-bottom: 0; font-size: 14px; } 
 .msearch .search-cont > input[type="text"] { font-size: 16px; } 
 .msearch #sch_submit { width: 60px; } 
 .msearch .search-popup { padding: 30px; border-radius: 15px; top: 80px; } 
 .msearch .search-filter-cont .filter-keyword { gap: 10px; } 
 .msearch .search-filter-cont .filter-keyword > .keyword { padding: 8px 24px; } 
 }
@media all and (max-width: 768px){
 .msearch .search-cont { display: flex; align-items: center; gap: 10px; } 
 .msearch .search-cont > .txt { width: 46px; margin-bottom: 0; } 
 .msearch .search-cont > input[type="text"] { width: calc(100% - 56px); } 
 }
@media all and (max-width: 640px){
 #headerSearchBox { top:80px; } 
 .msearch { margin-bottom: 30px; } 
 .msearch > form { gap: 5px; } 
 .msearch .search-cont { height: 50px; padding: 6px 20px; } 
 .msearch .search-cont > input[type="text"] { font-size: 15px; } 
 .msearch #sch_submit { width: 50px; } 
 .msearch .search-popup { padding: 20px 20px; font-size: 15px; top: 70px; } 
 .msearch .search-filter-cont .filter-keyword > .keyword { padding: 8px 20px; } 
 }