/* A A A : A : A : A : */ #TitleMenu_LeftLogo_search { width : 100%; height : 120px; background : #fff; position : fixed; top : 0; left : 0; font-family : "SUIT"; display : flex; align-items : center; justify-content : center; font-size : 16px; z-index : 50; transition : .2s;} #TitleMenu_LeftLogo_search .wrap { width : 95%; height : auto; display : flex; align-items : baseline; justify-content : space-between; max-width : 1600px; position : relative; } #TitleMenu_LeftLogo_search .wrap .logo { width : 20%; height : 100%; display : flex; align-items : center; } #TitleMenu_LeftLogo_search .wrap .logo img { width : 100%; height : 100%; object-fit : contain; max-width : 200px;} #TitleMenu_LeftLogo_search .wrap .menuListWrap { width : auto; height : 100%; display : flex; align-items : center; font-size : inherit; flex-grow : 1; justify-content : flex-end;} #TitleMenu_LeftLogo_search .wrap .menuListWrap .menuList { width : auto; height : auto; margin-left : 2em; font-size : inherit; position : relative; } #TitleMenu_LeftLogo_search .wrap .menuListWrap .menuList a { color : #777777; line-height : 1em; transition : .2s; display : block; cursor : pointer;} #TitleMenu_LeftLogo_search .wrap .menuListWrap .menuList a:hover, #TitleMenu_LeftLogo_search .wrap #searchBtn:hover { color : #000; transition : .2s;} #TitleMenu_LeftLogo_search .wrap .menuListWrap .menuList a.on { color : #000; font-weight : 500; text-decoration : underline !important;} #TitleMenu_LeftLogo_search .wrap #searchBtn { color : #b4b5b5; line-height : 1em; transition : .2s; display : block; cursor : pointer; font-size : 1.2em; margin-left : 2em; position : relative;} #TitleMenu_LeftLogo_search .wrap #searchBtn .fa-x { opacity : 0; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); transition : .2s;} #TitleMenu_LeftLogo_search .wrap #searchBtn.on .fa-magnifying-glass { opacity : 0; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #searchBtn.on .fa-x { opacity : 1; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm { font-size : 1.2em; width : 100%; max-width : 400px; background : #eeefef; border-radius : 10px; display : flex; justify-content : center; align-items : center; box-shadow : 10px 10px 10px 0px #8a8a8a66; position : absolute; right : 0; top : calc(100% + 1em); z-index : 10; opacity : 0; pointer-events : none; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm.on { opacity : 1; pointer-events : auto; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap { width : 90%; display : flex; align-items : center; justify-content : center; border-bottom : 1px solid #c9c9ca; margin : 1.5em 0; max-width : 300px; padding : 0 0.5em;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap svg { font-size : 1.2em; color : #9f9fa0; line-height : 1em;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap input { font-size : inherit; border : none; outline : none; background : #eeefef; padding : 0.5em; color : #555; width : 50%; flex-grow : 1;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap button { font-size : 0.8em; color : #b4b5b5; font-family : 'SUIT'; font-weight : 400; cursor : pointer; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap button:hover { color : #333; transition : .2s;} #TitleMenu_LeftLogo_search .wrap #mobileNavBtn { display : none;} #TitleMenu_LeftLogo_search #mobileNav { width : 100vw; height : 100vh; flex-direction : column; align-items : center; position : fixed; top : 0; left : 0; background : #fff; display : none; } #TitleMenu_LeftLogo_search #mobileNav.on { display : none;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop { width : 100%; height : 70px; border-bottom : 1px solid #e5e5e5; display : flex; align-items : center; justify-content : center; position : sticky; top : 0; left : 0;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop .tit { font-size : 24px; font-weight : 800; line-height : 1em;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop #mobileNavCloseBtn { position : absolute; top : 50%; right : 3%; transform : translateY(-50%); font-size : 20px; cursor : pointer; color : #666;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavListWrap { width : 100%; height : calc(100% - 70px); display : flex; overflow-y : auto; flex-direction : column; align-items : center; font-size : 24px; padding : 2em 0;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavListWrap a { font-weight : 600; color : #333; line-height : 1em; margin-bottom : 2em;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavListWrap a:last-child { margin-bottom : 0;} @media(max-width : 1024px) { #TitleMenu_LeftLogo_search { height : 70px;} #TitleMenu_LeftLogo_search .wrap { align-items : center; height : 100%;} #TitleMenu_LeftLogo_search .wrap .logo { justify-content : center; min-width : 140px;} #TitleMenu_LeftLogo_search .wrap .logo img { height : 50%;} #TitleMenu_LeftLogo_search .wrap .menuListWrap { display : none;} #TitleMenu_LeftLogo_search .wrap #mobileNavBtn { display : block; font-size : 1.5em;} #TitleMenu_LeftLogo_search .wrap #searchBtn { color : #000; cursor : pointer; margin-left: 0;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm { top : 70px; border-top : 1px solid #e5e5e5; box-shadow : 0px 10px 10px #0000007d; max-width : unset; width : 100vw; position : fixed; left : 0; background : #fff; border-radius : 0;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm { font-size : 1em;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap { max-width : 900px;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap input { background : #fff;} #TitleMenu_LeftLogo_search .wrap #mainSearchForm .inputWrap button { font-size : 1em;} #TitleMenu_LeftLogo_search #mobileNav.on { display : flex;} } @media(max-width : 640px) { #TitleMenu_LeftLogo_search { height : 60px;} #TitleMenu_LeftLogo_search .wrap { width : 90%;} #TitleMenu_LeftLogo_search .wrap .logo { width : 44vw; min-width : unset;} #TitleMenu_LeftLogo_search .wrap #mobileNavBtn, #TitleMenu_LeftLogo_search .wrap #searchBtn { font-size : calc(1em + 1vw);} #TitleMenu_LeftLogo_search .wrap #mainSearchForm { top : 60px;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop { height : 60px;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop .tit { font-size : 18px;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavTop #mobileNavCloseBtn { font-size : 16px; right : 5%;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavListWrap { height : calc(100% - 60px); padding : 1em 0;} #TitleMenu_LeftLogo_search #mobileNav .mobileNavListWrap a { font-size : 16px; margin-bottom : 1.5em;} } /* 스크롤 */ #TitleMenu_LeftLogo_search.on { height : 70px; opacity : .8; border-bottom : 1px solid #e5e5e5; transition : .2s;} #TitleMenu_LeftLogo_search.on:hover { opacity : 1; transition : .2s;} #TitleMenu_LeftLogo_search.on.active { opacity : 1; transition : .2s;} #TitleMenu_LeftLogo_search.on .wrap { padding-bottom : 2em; transition : .2s;} #TitleMenu_LeftLogo_search.on .wrap .logo { opacity : 0; transition : .2s;} #TitleMenu_LeftLogo_search.on .wrap #mainSearchForm { top : calc(100% - 0.5em);}