@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/NanumHumanTTFLight.woff2') format('woff2'); font-weight: 300; font-display: swap; } 

@font-face { font-family: 'NanumHuman'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/NanumHumanTTFRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; } 

@font-face { font-family: 'NanumHuman'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/NanumHumanTTFBold.woff2') format('woff2'); font-weight: 700; font-display: swap; } 

@font-face { font-family: 'NanumHuman'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/NanumHumanTTFExtraBold.woff2') format('woff2'); font-weight: 800; 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: #284637; --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: 1800px; width: 95%; margin: 0 auto; } 
.line-br { display: block; } 

@media all and (max-width: 1399px) {.cinner { width: auto; margin: 0 50px; } 
 }
@media all and (max-width: 1024px) { html, body { font-size: 18px; } 
.cinner { margin: 0 30px; } 
 }
@media all and (max-width: 640px) { html, body { font-size: 16px; } 
 .cinner { margin: 0 20px; } 
 }

/* 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/common/menu_icon_sub.png)}
/* ******************* *
* HEADER
* ******************* */
#header { width: 100%; height: 130px; background: var(--color-main); position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 999; } 
.hd_line_banner { height:30px; } 
.hd_line_banner p { background:var(--color1); color:#000; font-size: 14px; font-weight:600; width:100%; padding:10px 0; text-align: center; position:relative; top:0; height: 100%; display: flex; align-items: center; justify-content: center; } 
#header .cinner { display: flex; justify-content: space-between; align-items: center; height:calc(100% - 30px); } 
#header__nav { display: flex; gap: 20px; align-items: center; width: 100%; justify-content: space-between; position:relative } 
.header__logo { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); } 
.main-nav__depth1 .mn-ul1 { display: flex; align-items: center; gap: 30px; } 
.main-nav__depth1 .mn-li1 { line-height: 1.0 } 
.main-nav__depth1 .mn-a1 { display: inline-block; color: #fff; 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: #fff; 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 { display: flex; flex-direction: column; gap: 10px; color: #fff; font-size: 15px; font-weight: 600; text-align: center; } 
#util > ul > li > a > .ico > img { margin: 0 auto; } 

.mo_nav__btn { display: none; } 
.nav__btn { align-self: center; } 
.nav__btn.active { opacity: 1; visibility: visible; } 

.nav__btn a { display: flex; align-items: center; width: 30px; height: 26px; background: url(../img/common/menu_icon.png) center center / cover no-repeat; position: relative; transition:.5s } 
.locked .nav__btn a { transform: rotateZ(90deg); transition:.5s } 
.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 } 
 }
@media all and (max-width: 1024px){
 #header { height: 100px; } 
 #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; } 
 .mypagelist {display:none}
 }
@media all and (max-width: 768px) {
    .hd_line_banner p {font-size:12px;}
    
 } 
@media all and (max-width: 640px){
 #header { height: 80px; } 
 .nav__btn a {width:20px;height:18px}
 .header__logo > a > img { max-width: none; height: 30px; } 
 #util > ul { gap: 12px; } 
 #util > ul > li > a > .ico > img { width: 20px; } 
 #util { gap: 12px; } 

 }
@media all and (max-width: 480px) { } 


/* ******************* *
* SIDEBAR
* ******************* */
#sidebar { max-width: 450px; width: 100%; height:calc(100% - 130px); padding: 20px; box-sizing: border-box; background: #fff; position: fixed; top: 130px; 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{top:100px; height:calc(100% - 100px); max-width:100%}
}
@media all and (max-width: 640px){
    #sidebar{top:80px; height:calc(100% - 80px); } 
 .sidebar__header > .sidebar-btn_close { width: 30px; } 
 }

/* ******************* *
* FOOTER
* ******************* */
#footer { background: #F6EBD7; border: 1px solid #000;} 
.footer__cont { } 
#footer .cinner { display: flex; justify-content: space-between; padding: 50px 0; } 
.footer__cont .ft_left { display: flex; flex-direction: column; gap: 35px; align-items: flex-start; } 
.footer__cont .ft_left .img_wrap { } 
.footer__cont .ft_left .img_wrap img { } 
.footer__cont .ft_left .list_wrap { } 
.footer__cont .ft_left .list_wrap ul { display: flex; flex-wrap: wrap; gap: 10px 20px; } 
.footer__cont .ft_left .list_wrap ul li { display: inline-block; color: #4B4B4B; font-size: 14px; } 
.footer__cont .ft_right { display: flex; gap: 120px; } 
.footer__cont .ft_right .ft_list { } 
.footer__cont .ft_right .ft_list h4 { } 
.footer__cont .ft_right .ft_list p { margin-top: 20px; font-size: 16px; font-weight: bold; } 
.footer__cont .ft_right .ft_list ul { margin-top: 20px; } 
.footer__cont .ft_right .ft_list ul li { color: #4B4B4B; font-size: 14px; line-height: 2; } 
.footer__cont .ft_right .ft_list ul li span {font-size:12px; line-height: 1.5; color:#6d6d6d;padding-left:10px}
.ft_copy { background: #F6E1BA; font-size: 16px; text-align: center; padding: 10px; border-top: 1px solid #000; } 
#top_btn { position:fixed; bottom: 10px; right: 10px; width:50px; height:50px; line-height:46px; border:2px solid #333; color:#333; text-align:center; font-size:15px; z-index:90; background:rgba(255,255,255,0.5) } 
#top_btn:hover { border-color:var(--color-main); background: var(--color-main); color:#fff } 


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

@media all and (max-width: 640px){
 #container { margin-top: 80px; } 
 }



/* ******************* *
* 전체 검색
* ******************* */
#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; } 
 }