/* A A A : A : A : A : */ #TitleMenu_centerLogo_search { width : 100%; height : auto; position : absolute; z-index : 100; top : 0; left : 0;} #TitleMenu_centerLogo_search .navTop { width : 100%; height : 100px; padding : 0 20px; background : #ffffffe6;} #TitleMenu_centerLogo_search .navTop .navTopWrap { width : 100%; height : 100%; max-width : 1200px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; position : relative; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar { width : auto; height : 100%; display : flex; justify-content : flex-start; align-items : center; position : relative; z-index : 2; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a:nth-child(2) { margin : 0 clamp(35px,3vw,50px); } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a:last-child { margin-right : 0; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a img { width : 100%; height : auto; max-width : 32px; transition : .1s; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a:hover img { filter : drop-shadow(2px 4px 3px #999); transition : .1s; } #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox { width : 100%; height : 100%; position : absolute; left : 0; top : 0; text-align : center; z-index : 1;} #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox a { display : inline; } /* #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox { width : 40%; height : 100%; text-align : center; flex-grow : 1; } */ #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox img { width : 100%; height : 100%; object-fit : contain; max-width : 200px; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar { width : auto; height : 100%; display : flex; justify-content : flex-end; align-items : center; z-index : 2; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar a { font-size : clamp(13px,1.5vw,16px); line-height : 1em; color : #555; transition : .2s; font-weight : 500; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar a:nth-child(2) { margin : 0 clamp(20px,2vw,25px); } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar a:hover { color : #2E3177; transition : .2s; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar p { margin : 0 clamp(10px,2.5vw,13px); } #TitleMenu_centerLogo_search .navBot { width : 100%; height : 45px; background : #777777e6; padding : 0 20px; position : relative; } #TitleMenu_centerLogo_search .navBot .navBotWrap { width : 100%; height : 100%; max-width : 1300px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; position : relative; } #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap { width : 100%; height : 100%; display : flex; align-items : center; justify-content : space-between; } #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList { width : calc(100% / 6); height : 100%; text-align : center; position : relative; } #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .menuList_a { width : 100%; height : 100%; font-size : clamp(15px,1.4vw,16px); font-weight : 500; display : inline-flex; justify-content : center; align-items : center; color : #fff; } #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList:hover .menuList_a { color : #FFE34D; } #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap { width : 100%; height : auto; position : absolute; overflow : hidden; top : 100%; left : 50%; transform : translateX(-50%); text-align : center; display : flex; flex-direction : column; z-index : 1; background : #e5e5e5; transition : .2s; opacity : 0; pointer-events : none; border-radius : 12px; padding : 0.7em 0.5em;} #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList:hover .subMenuListWrap { opacity : 1; pointer-events : auto; transition : .2s;} #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap a { font-size : clamp(13px,1.5vw,16px); color : #555; padding : 7px 0; line-height : 1em; display : block;} #TitleMenu_centerLogo_search .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap a:hover { color : #333; font-weight : 500; } #TitleMenu_centerLogo_search .subMenuBack { width : 100%; height : 0; background : #ebebebe6; position : absolute; top : 100%; left : 0; z-index : 0; transition : .4s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn { width : calc(100% / 7); display : flex; justify-content : flex-end; align-items : center; display : none; } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn .SearchBtnWrap { color : #313232; border-radius : 25px; font-size : clamp(12px,4.5vw,20px); cursor : pointer; width : 35px; height : 35px; display : flex; justify-content : center; align-items : center; transition : .3s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn:hover .SearchBtnWrap { background : #f3e8e8; box-shadow : 0px 0px 5px 0px #cdcdcd; transition : .5s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn .noSearch.on { display : none; } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn .searchClose.on { display : block } #TitleMenu_centerLogo_search .navBot .navBotWrap .SearchBtn .searchClose { display : none; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap { width : 100%; height : 0px; position : absolute; top : calc(100% + 8px); left : 0; z-index : -1; transition : .4s; display : flex; justify-content : center; align-items : center; border : 1px solid #c5c5c5; border-radius : 25px; padding-left : clamp(15px,2.5vw,35px); background : #fff; overflow : hidden; opacity : 0; pointer-events : none; transition : .4s; display : none; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap.on { height : 45px; opacity : 1; pointer-events : auto; transition : .4s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap:hover { box-shadow: 0px 0px 6px 0px #a3a3a3; transition : .4s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap:visited { box-shadow: 0px 0px 6px 0px #a3a3a3; transition : .4s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap .search { width : 95%; height : 90%; border : none; background : none; font-size : clamp(16px,2.5vw,20px); } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap .searchLabel { width : 5%; height : 100%; display : flex; justify-content : center; align-items : center; cursor : pointer; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap .searchLabel svg { font-size : clamp(15px,4.5vw,23px); color : #313232; line-height : 1em; transition : .4s; } #TitleMenu_centerLogo_search .navBot .navBotWrap .navSearchWrap .searchSubmit { display : none; } /*모바일 메뉴 버튼*/ #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn { color : #313232; font-size : clamp(20px,4.5vw,30px); cursor : pointer; display : none; justify-content : flex-end; align-items : center; width : auto; transition : .3s; z-index : 2;} #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack { width : auto; height : auto; border-radius : 25px; display : flex; justify-content : center; align-items : center; transition : .3s; } #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack svg { font-size : 22px;} /* #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack:hover { background : #f3e8e8; box-shadow : 0px 0px 5px 0px #cdcdcd; transition : .5s; } */ /***********모바일 & 테블릿 버전 메뉴***********/ #TitleMenu_centerLogo_search .backCover.on { display : none; transition : 1s; opacity : 1; pointer-events : auto; } #TitleMenu_centerLogo_search .backCover { width : 100%; height : 100vh; background : #00000075; position : fixed; top : 0; display : block; opacity : 0; pointer-events : none; transition : 1s; } #TitleMenu_centerLogo_search .mobile_navWrap { width : 500px; height : 100%; background : #ebe6e6; position : fixed; top : 0; right : -100%; padding : 70px 70px 0; z-index : 5; transition : 1s; display : none; } #TitleMenu_centerLogo_search .mobile_navWrap.on { right : 0; transition : 1s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobileNavCloseBtn { position : absolute; top : 2%; right : 5%; color : #000; font-size : 20px; cursor : pointer; display : block; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_logo { width : auto; height : auto; text-align : left; margin-bottom : 10%;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_logo img { width : 160px; height : auto; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; flex-wrap : wrap; margin : 40px 0 20px; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 14px; color : #000; display : flex; flex-direction : column; align-items : center; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .iconBox:last-child { margin-right : 0; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .iconBox svg { font-size : 28px; margin-bottom : 8px; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap a { width : 30px; margin-right : 30px; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap a:last-child { margin-right : 0; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap a img { width : 100%; height : auto; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .mobile_searchWrap { width : 100%; display : flex; justify-content : space-between; background : #fff; height : 35px; margin-top : 20px; align-items : center; transition : .4s; overflow : hidden; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobile_search { width : 90%; height : 90%; border : none; padding-left : 10px; font-size : 14px; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .searchLabel { width : 10%; display : flex; align-items : center; justify-content : center; cursor : pointer; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobileSubmit { display : none; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav { width : 100%; height : auto; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 18px; color : #0000006e; text-align : left; position : relative; cursor : pointer; transition : .3s; padding : 4px 0; font-weight : 500; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.active ,#TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #000; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.direct.active { color : #0000006e;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.direct a { color : #0000006e; width : 100%; display : block;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.direct a:hover { color : #000;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList.direct::after { content : ""; display : none;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #000; transition : .3s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList { width : 100%; height : auto; padding : 5px 0; max-height : 0px; overflow : hidden; transition : .3s; display : flex; flex-direction : row; flex-wrap : wrap; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; padding : 5px 0; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #0000009e; font-size : 14px; font-weight : 500; transition : .3s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a:hover { color : #000; transition : .3s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar { width : 100%; height : auto; border-top : 3px solid #0000009e; display : flex; justify-content : center; align-items : center; text-align : center; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar li { width : 50%; height : auto; padding : 30px 0 ; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #0000009e; font-weight : 500; transition : .3s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar li a:hover { color : #000; transition : .3s; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_centerLogo_search { top : 0; background : #fff; } #TitleMenu_centerLogo_search .navTop { border-bottom : 2px solid #d1d1d1; height : 80px; background : #fff; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a img { max-width : 25px; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar a:nth-child(2) { margin : 0 15px; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar { display : none; } #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn { display : flex; } #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox { width : 100%; height : 100%; position : absolute; left : 0; top : 0; } #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox img { max-width : 170px; } #TitleMenu_centerLogo_search .navBot { display : none; } #TitleMenu_centerLogo_search .mobile_navWrap { display : flex; flex-direction : column; justify-content : space-between; } #TitleMenu_centerLogo_search .backCover.on { display : block; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_centerLogo_search { top : 0; background : #fff;} #TitleMenu_centerLogo_search .navTop { border-bottom : 2px solid #d1d1d1; height : 65px; background : #fff; } #TitleMenu_centerLogo_search .navTop .navTopWrap .loginBar { display : none; } #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn { display : flex; } #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack { width : auto; height : auto; } #TitleMenu_centerLogo_search .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack:hover { background : none; box-shadow : unset; } #TitleMenu_centerLogo_search .navTop .navTopWrap .snsBar { display : none; } #TitleMenu_centerLogo_search .navTop .navTopWrap .logoBox { max-width : 115px; position : relative; } #TitleMenu_centerLogo_search .navBot { display : none; } #TitleMenu_centerLogo_search .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : -100%; transition : .6s; } #TitleMenu_centerLogo_search .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : 0%; transition : .6s; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_logo img { width : 140px;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 12px; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav .mobile_navList { font-size : 16px;} #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #TitleMenu_centerLogo_search .mobile_navWrap .mobile_iconWrap a { width : 30px; margin-right : 20px; } }