/* A A A : A : A : A : */ #TitleMenu_centerTopLogo { width : 100%; height : auto; position : relative; z-index : 30; background : #fff; } #TitleMenu_centerTopLogo .navTop { width : 100%; height : 110px; background : inherit; padding : 20px; position : relative; background : #e5e5e5; } #TitleMenu_centerTopLogo .navTopLoginWrap { width : 100%; height : 30px; padding : 0 20px; background : #0080ca; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar { width : 100%; height : 100%; max-width : 1500px; display : flex; justify-content : flex-end; align-items : center; margin : 0 auto; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a { font-size : clamp(12px,1.5vw,14px); line-height : 1em; transition : .2s; color : #fff; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a:hover { color : #0080ca; transition : .2s; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar p { margin : 0 clamp(8px,2.5vw,10px); color : #fff; opacity : 0.5; } #TitleMenu_centerTopLogo .navTop .navTopWrap { width : 100%; height : 100%; max-width : 1500px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar { width : 30%; height : 100%; display : flex; justify-content : flex-start; align-items : center; } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar a { margin-right : clamp(3px,1.5vw,10px); } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar a:last-child { margin-right : 0; } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar a img { width : 100%; height : auto; max-width : 28px; transition : .1s; } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar a:hover img { filter : drop-shadow(2px 2px 3px #000); transition : .1s; } #TitleMenu_centerTopLogo .navTop .navTopWrap .logoBox { width : 40%; height : 100%; text-align : center; flex-grow : 1; } #TitleMenu_centerTopLogo .navTop .navTopWrap .logoBox img { width : 100%; height : 100%; object-fit : contain; max-width : 280px; } #TitleMenu_centerTopLogo .navTop .navTopWrap .loginBar { width : 30%; height : 100%; display : flex; justify-content : flex-end; align-items : center; } #TitleMenu_centerTopLogo .navBot { width : 100%; height : 40px; background : #fff; padding : 0 20px; background : #0080ca; border-bottom : 1px solid #0080ca; position : relative; } #TitleMenu_centerTopLogo .navBot .navBotWrap { width : 100%; height : 100%; max-width : 1500px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; position : relative; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap { width : 100%; height : 100%; display : flex; align-items : center; justify-content : space-evenly; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList { width : auto; height : 100%; text-align : center; position : relative; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .menuList { width : 100%; height : 100%; text-align : center; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .menuList .menuList_a { width : 100%; height : 100%; font-size : clamp(14px,2.5vw,16px); font-weight : 400; color : #fff; display : inline-flex; justify-content : center; align-items : center; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .menuList:hover .menuList_a { color : #fff000; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap { width : clamp(150px,10vw,190px); height : auto; position : absolute; opacity : 0; top : 100%; left : 50%; transform : translateX(-50%); text-align : center; display : flex; flex-direction : column; z-index : 1; pointer-events : none; transition : .4s; border-top : 1px solid #0080ca; background : #fff; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList:hover .subMenuListWrap { opacity : 1; pointer-events : auto; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap a { width : 100%; height : auto; display : inline-block; font-size : clamp(13px,1.5vw,16px); color : #000; padding : clamp(5px,2.5vw,10px) 0; border : 1px solid #ddd; border-top : none; transition : .2s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap a:hover { color : #fff; background : #9999CC; transition : .2s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap { width : 100%; height : auto; position : relative; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap:hover { background : #9999CC; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap:hover a { color : #fff; transition : .2s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap .thirdMenuWrap { width : 100%; height : auto; position : absolute; top : 25%; left : 95%; opacity : 0; pointer-events : none; z-index : 2; background : #fff; box-shadow : 0px 0px 10px 0px #0000005c; transition : .2s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap:hover .thirdMenuWrap { opacity : 1; pointer-events : auto; transition : .4s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap .thirdMenuWrap a { color : #000; border-top : 1px solid #ddd; transition : .2s; } #TitleMenu_centerTopLogo .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList .subMenuListWrap .secondMenuWrap .thirdMenuWrap a:hover { color : #fff; transition : .2s; } /*모바일 메뉴 버튼*/ #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn { color : #313232; cursor : pointer; display : none; justify-content : flex-end; align-items : center; width : 30%; transition : .3s; } #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack { width : 45px; height : 45px; border-radius : 25px; display : flex; justify-content : center; align-items : center; transition : .3s; font-size : clamp(20px,4.5vw,25px);} #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack:hover { background : #f3e8e8; box-shadow : 0px 0px 5px 0px #cdcdcd; transition : .5s; } /***********모바일 & 테블릿 버전 메뉴***********/ #TitleMenu_centerTopLogo .backCover.on { display : none; transition : 1s; } #TitleMenu_centerTopLogo .backCover { width : 100%; height : 100vh; background : #00000075; position : absolute; top : 0; display : none; } #TitleMenu_centerTopLogo .mobile_navWrap { width : 500px; height : 100%; background : #fff; position : fixed; top : 0; right : -100%; padding : 70px 70px 0; z-index : 5; transition : 1s; display : none; } #TitleMenu_centerTopLogo .mobile_navWrap.on { right : 0; transition : 1s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobileNavCloseBtn { position : absolute; top : 2%; right : 5%; color : #000; font-size : 20px; cursor : pointer; display : block; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_logo { width : auto; height : auto; text-align : left; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_logo img { width : 270px; height : auto; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; flex-wrap : wrap; margin : 40px 0; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 14px; color : #000; display : flex; flex-direction : column; align-items : center; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .iconBox:last-child { margin-right : 0; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .iconBox svg { font-size : 28px; margin-bottom : 8px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap a { width : 40px; margin-right : 30px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap a:last-child { margin-right : 0; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap a img { width : 100%; height : auto; } #TitleMenu_centerTopLogo .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_centerTopLogo .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobile_search { width : 90%; height : 90%; border : none; padding-left : 10px; font-size : 14px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .searchLabel { width : 10%; display : flex; align-items : center; justify-content : center; cursor : pointer; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobileSubmit { display : none; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav { width : 100%; height : auto; flex-grow : 1; margin-top : 22px; padding-top : 10px; border-top : 3px ridge #bbb; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 18px; color : #000; text-align : left; position : relative; cursor : pointer; transition : .3s; margin-bottom : 0px; font-weight : 500; display : flex; align-items : center; justify-content : space-between; padding : 6px 10px; border-radius : 8px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList.active ,#TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #fff; background : #9999CC; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▶"; font-size : 14px; color : inherit; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #fff; transition : .3s; background : #9999CC; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▶"; font-size : 14px; color : inherit; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList { width : 100%; height : auto; max-height : 0px; overflow : hidden; transition : .3s; display : flex; flex-direction : row; flex-wrap : wrap; margin-bottom : 15px; margin-top : 5px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList div { width : 100%; height : auto; padding : 5px 0; margin-left : 18px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList div a { color : #0000007a; font-size : 16px; font-weight : 500; transition : .3s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList div a:hover { color : #000; transition : .3s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_second { font-size : 16px; margin-left : 18px; cursor : pointer; font-weight : 500; transition : .3s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_second.active, #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_second:hover { color : #9999CC;} #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_thirdWrap { max-height : 0px; overflow : hidden; padding : 1px 0 6px; transition : .3s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_thirdWrap.on { max-height : none; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_SubNavList .mobile_thirdWrap div { padding : 0 0 2px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_loginBar { width : 500px; height : auto; border-top : 3px solid #0000009e; display : flex; justify-content : center; margin-left : -70px; align-items : center; text-align : center; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_loginBar li { width : 50%; height : auto; padding : 30px 0 ; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #0000009e; font-weight : 500; transition : .3s; } #TitleMenu_centerTopLogo .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_centerTopLogo .navTopLoginWrap { background : #0080ca; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a { color : #fff; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a:hover { color : #fff000; } #TitleMenu_centerTopLogo .navTop { border-bottom : 1px solid #d1d1d1; height : 80px; } #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn { display : flex; width : auto;} #TitleMenu_centerTopLogo .navTop .navTopWrap .logoBox img { max-width : 225px; } #TitleMenu_centerTopLogo .navBot { display : none; } #TitleMenu_centerTopLogo .mobile_navWrap { display : flex; flex-direction : column; } #TitleMenu_centerTopLogo .backCover.on { display : block; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_centerTopLogo .navTopLoginWrap { background : #0080ca; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a { color : #fff; justify-content : center; } #TitleMenu_centerTopLogo .navTopLoginWrap .loginBar a:hover { color : #fff000; } #TitleMenu_centerTopLogo .navTop { border-bottom : 1px solid #d1d1d1; height : 70px; } #TitleMenu_centerTopLogo .navTopLoginWrap { height : 30px; } #TitleMenu_centerTopLogo .navTop .navTopWrap { justify-content : center; } #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn { display : flex; width : auto; position : absolute; right : 5%; } #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack { width : auto; height : auto; } #TitleMenu_centerTopLogo .navTop .navTopWrap .mobileNavBtn .mobileNavBtnBack:hover { background : none; box-shadow : unset; } #TitleMenu_centerTopLogo .navTop .navTopWrap .snsBar { display : none; } #TitleMenu_centerTopLogo .navTop .navTopWrap .logoBox { max-width : 180px; } #TitleMenu_centerTopLogo .navBot { display : none; } #TitleMenu_centerTopLogo .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 20% 5% 0; right : -100%; transition : .6s; } #TitleMenu_centerTopLogo .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 20% 5% 0; right : 0%; transition : .6s; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_logo img { width : 200px;} #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 12px; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList { font-size : 16px;} #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #000; background : none;} #TitleMenu_centerTopLogo .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_loginBar { width : 100%; position : static; margin-left : 0; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #TitleMenu_centerTopLogo .mobile_navWrap .mobile_iconWrap a { width : 30px; margin-right : 20px; } }