/* A A A : A : A : A : */ #TitleMenu_leftLogo_search { width : 100%; height : 80px; font-size : min(1.4vw,15px); font-family : "nanum"; display : flex; align-items : center; justify-content : center; position : fixed; top : 0; left : 0; background : #fff3; z-index : 100; color : #fff; transition : .2s;} #TitleMenu_leftLogo_search.on, #TitleMenu_leftLogo_search:hover { color : #000; background : #fffc; transition : .2s;} #TitleMenu_leftLogo_search .wrap { width : 95%; height : 100%; display : flex; align-items : center; justify-content : center; max-width : 1500px;} #TitleMenu_leftLogo_search .wrap .logoWrap, #TitleMenu_leftLogo_search .wrap .rightWrap { width : 10%; height : 100%; max-width : 150px; display : flex; align-items : center; justify-content : center; } #TitleMenu_leftLogo_search .wrap .logoWrap { min-width : 150px;} #TitleMenu_leftLogo_search .wrap .rightWrap { justify-content : flex-end; flex-shrink: 50;} #TitleMenu_leftLogo_search .wrap .logoWrap a { width : 100%; height : 100%; display : flex; align-items : center; justify-content : center;} #TitleMenu_leftLogo_search .wrap .logoWrap a img { width : 100%; height : auto;} #TitleMenu_leftLogo_search .wrap .navWrap { width : 80%; height : 100%; display : flex; justify-content : center; align-items : center; flex-grow : 1; z-index : 1;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap { width : 100%; height : 100%; display : flex; justify-content : center; align-items : center; margin : 0 2.5%; gap : 5%;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav { width : auto; height : 100%; display : flex; align-items : center; justify-content : center; position : relative; } #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .mainLink { width : 100%; height : 100%; line-height : 1em; display : flex; align-items : center; justify-content : center; color : inherit; font-weight : 700;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap { width : auto; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; position : absolute; top : 100%; left : 50%; background : #fefefecc; padding : 1.5em 0; opacity : 0; pointer-events : none; transition : oacity .2s; min-width : 100%; transform : translateX(-50%);} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap.siteOn { background : none; pointer-events : auto; opacity : 1; transition : opacity .2s;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav:hover .subListWrap { top : 100%; opacity : 1; pointer-events : auto; transition : .2s;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap .subNav { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; margin-bottom : 1em; } #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap .subNav:last-child { margin-bottom : 0;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap .subNav .subLink { width : 100%; height : auto; line-height : 1em; display : flex; justify-content : center; padding : 0 1.2em; color : #555; transition : .2s; white-space : nowrap;} #TitleMenu_leftLogo_search .wrap .navWrap .navListWrap .mainNav .subListWrap .subNav .subLink:hover { color : #000; transition : .2s;} #TitleMenu_leftLogo_search .wrap .rightWrap { gap : 10%;} #TitleMenu_leftLogo_search .wrap .rightWrap #searchBtn { width : auto; height : 100%; display : flex; align-items : center; cursor : pointer; position : relative;} #TitleMenu_leftLogo_search .wrap .rightWrap #searchBtn img { height : 40%; max-height : 30px; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); transition : .2s; pointer-events :none;} #TitleMenu_leftLogo_search .wrap .rightWrap #searchBtn .searchClose { opacity : 0; font-size : 1.8em; color : #333;} #TitleMenu_leftLogo_search .wrap .rightWrap #searchBtn.on .searchClose { opacity : 1; transition : .2s;} #TitleMenu_leftLogo_search .wrap .rightWrap #searchBtn.on .searchIcon { opacity : 0; transition : .2s;} #TitleMenu_leftLogo_search .wrap .rightWrap .line { width : 2px; height : 40%; max-height : 25px; background : #dadbdb; } #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn { width : auto; height : 40%; max-height : 22px; aspect-ratio : 1.1 / 1; display : flex; flex-direction : column; align-items : center; justify-content : center; cursor : pointer; position : relative; transition : all 0.4s ease;} #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn p { width : 100%; height : 3px; transition : .2s;} #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn p:first-child { background : #c5c5c5; top : 0; transform : rotate(0deg); position : absolute;} #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn p:nth-child(2) { background : #fff; } #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn p:last-child { background : #c5c5c5; top : 100%; transform : rotate(0deg); position : absolute;} #TitleMenu_leftLogo_search:hover .wrap .rightWrap #siteMapBtn p:first-child, #TitleMenu_leftLogo_search.on .wrap .rightWrap #siteMapBtn p:first-child { background : #939393; transition : .2s;} #TitleMenu_leftLogo_search:hover .wrap .rightWrap #siteMapBtn p:nth-child(2), #TitleMenu_leftLogo_search.on .wrap .rightWrap #siteMapBtn p:nth-child(2) { background : #4c4b4c; transition : .2s;} #TitleMenu_leftLogo_search:hover .wrap .rightWrap #siteMapBtn p:last-child, #TitleMenu_leftLogo_search.on .wrap .rightWrap #siteMapBtn p:last-child { background : #939393; transition : .2s; } #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn.on p:first-child { transform : rotate(225deg); top : calc(50% - 1.5px); background : #333;} #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn.on p:nth-child(2) { opacity : 0;} #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn.on p:last-child { transform : rotate(-225deg); top : calc(50% - 1.5px); background : #333;} /* 태블릿 & 모바일 메뉴 */ #TitleMenu_leftLogo_search #mobNavBtn { font-size : 2em; display : none; color : #555; } #TitleMenu_leftLogo_search #mobNavBack { width : 100vw; height : 100vh; position : fixed; top : 0; left : 0; display : none; z-index : 102;} #TitleMenu_leftLogo_search #mobNavBack.on { display : block;} #TitleMenu_leftLogo_search #mobNav { width : 100%; height : 100vh; position : fixed; top : 0; left :calc(-100% - 15px); max-width : 400px; background : #fff; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 1.5em; box-shadow : 3px 0px 15px 0px #00000052; transition : .4s; z-index : 103;} #TitleMenu_leftLogo_search #mobNav.on { left : 0; transition : .2s;} #TitleMenu_leftLogo_search #mobNav .mobNavHeader { width : 100%; height : auto; display : flex; align-items : flex-start; justify-content : space-between; padding : 1.5em 2em; border-bottom : 1px solid #ddd;} #TitleMenu_leftLogo_search #mobNav .mobNavHeader a { width : auto; height : 3em;} #TitleMenu_leftLogo_search #mobNav .mobNavHeader a img { width : auto; height : 100%; object-fit : contain;} #TitleMenu_leftLogo_search #mobNav .mobNavHeader #mobNavCloseBtn { font-size : 1.5em; color : #555; cursor : pointer; position : absolute; top : 0.5em; right : 0.7em;} #TitleMenu_leftLogo_search #mobNav .mobNavBody { width : 100%; height : auto; flex-grow : 1; padding : 0em 2em; overflow : auto;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 1.2em;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList { width : 100%; height : auto;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobNavName { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between; line-height : 1em; font-weight : 600; font-size : 1.1em; cursor : pointer;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobNavName svg { transition : .2s;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobNavName.on svg { transform : rotate(180deg); transition : .2s;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobSubNavListWrap { width : 100%; height : 0; overflow : hidden; padding-top : 0.5em; transition : .2s;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobSubNavListWrap .mobSubNavList { width : 100%; height : auto; background : #f7f7f7; padding : 0.5em;} #TitleMenu_leftLogo_search #mobNav .mobNavBody .mobNavListWrap .mobNavList .mobSubNavListWrap .mobSubNavList a { line-height : 1em; color : #777; } #TitleMenu_leftLogo_search #mobNav .mobNavFooter { width : 100%; height : auto; display : flex; justify-content : center; align-items : center; padding : 1.5em 2em; gap : 1.5em; padding-top : 0;} #TitleMenu_leftLogo_search #mobNav .mobNavFooter a { line-height : 1em; color : #555;} /* 검색폼 & 사이트맵 */ #TitleMenu_leftLogo_search #subWrapBack { width : 100%; height : 0; display : flex; justify-content : center; align-items : center; position : absolute; top : 100%; left : 0; background : #fefefecc; box-shadow : 0px 0px 2px 0px #000000; transition : .2s; overflow : hidden; } #TitleMenu_leftLogo_search #navSearchForm { width : 90%; height : 0; max-width : 1400px; display : flex; align-items : center; justify-content : center; overflow : hidden; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); opacity : 0; pointer-events : none; transition : .2s;} #TitleMenu_leftLogo_search #navSearchForm.on { opacity : 1; pointer-events : auto; transition : .2s;} #TitleMenu_leftLogo_search #navSearchForm .searchWrap { width : 100%; height : 3em; display : flex; align-items : center; justify-content : center; gap : 1em;} #TitleMenu_leftLogo_search #navSearchForm .searchWrap input { background : #fff; width : 50%; height : 100%; border : 1px solid #ddd; padding : 1em;} #TitleMenu_leftLogo_search #navSearchForm .searchWrap button { font-size : 1.5em; color : #777; cursor : pointer; transition : .2s;} #TitleMenu_leftLogo_search #navSearchForm .searchWrap button:hover { color : #333; transition : .2s;} #TitleMenu_leftLogo_search #siteMap { width : 90%; height : 0; overflow : hidden; display : block; position : absolute; top : 0; left : 50%; transform : translateX(-50%); transition : .2s; opacity : 0; pointer-events : none;} #TitleMenu_leftLogo_search #siteMap.on { opacity : 1; pointer-events : auto; transition : .2s;} #TitleMenu_leftLogo_search #siteMap .siteMapInnerWrap { width : 100%; height : auto; max-width : 1000px; display : flex; flex-direction : column; gap : 2em; align-items : center; justify-content : flex-end; margin : 0 auto;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap { width : 100%; height : auto; display : flex; align-items : flex-start; justify-content : space-between; } #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList { width : auto; display : flex; flex-direction : column; align-items : center; justify-content : flex-start; text-align : center; flex-grow : 1;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMap_mainLink { width : auto; height : auto; line-height : 1em; font-weight : 800; } #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMapSubNavListWrap { width : 100%; display : flex; flex-direction : column; align-items : center; justify-content : flex-start; text-align : center; padding-top : 0.8em; margin-top : 0.8em; border-top : 1px solid #777;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMapSubNavListWrap .siteMapSubNavList { display : flex; align-items : center; justify-content : center; margin-bottom : 0.7em;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMapSubNavListWrap .siteMapSubNavList:last-child { margin-bottom : 0;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMapSubNavListWrap .siteMapSubNavList a { line-height : 1em; color : #444; transition : .2s;} #TitleMenu_leftLogo_search #siteMap .siteMapNavWrap .siteMapNavListWrap .siteMapNavList .siteMapSubNavListWrap .siteMapSubNavList a:hover { color : #000; transition : .2s;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-between; gap : 2em;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap { display : flex; align-items : center; justify-content : center; gap : 1em;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .snsBtn { transition : .2s;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .snsBtn:hover { filter : drop-shadow(0px 0px 3px #777); transition : .2s;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .snsBtn img { height : 3em;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .vrBtn { background : #fff; line-height : 1em; display : flex; align-items : center; justify-content : center; gap : 0.6em; color : #221714; border-radius : 12px; transition : .2s; padding : 0 1.2em; font-weight : 800; height : 3em;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .vrBtn:hover { background : #f7f7f7; box-shadow : 0px 0px 4px 0px #999;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .vrBtn img { height : 60%;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .familyBtn { width : 6em; height : auto;} #TitleMenu_leftLogo_search #siteMap .familySiteWrap .familywrap .familyBtn img { width : 100%; height : atuo; object-fit : contain;} @media(max-width : 1024px){ /* A A A : A : A : A : */ #TitleMenu_leftLogo_search { height : 75px; font-size : min(2.2vw,15px); color : #000; background : #fffc;} #TitleMenu_leftLogo_search .wrap .navWrap, #TitleMenu_leftLogo_search .wrap .rightWrap .line, #TitleMenu_leftLogo_search .wrap .rightWrap #siteMapBtn, #TitleMenu_leftLogo_search #siteMap .siteMapInnerWrap { display : none;} #TitleMenu_leftLogo_search .wrap { width : 95%; justify-content : space-between;} #TitleMenu_leftLogo_search .wrap .logoWrap { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; max-width : 10em;} #TitleMenu_leftLogo_search .wrap .rightWrap { width : auto;} #TitleMenu_leftLogo_search #navSearchForm .searchWrap input { width : 80%;} #TitleMenu_leftLogo_search #mobNavBtn { display : flex;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #TitleMenu_leftLogo_search { height : 60px; font-size : max(13px,3vw);} }