/* A A A : A : A : A : */ #LeftLogo_simpleNavi { width : 100%; height : 70px; background : #fff; text-align : center; position : sticky; top : 0; z-index : 3; transition : .2s; border-bottom : 1px solid #ddd; font-size : min(1.6vw,18px); display : flex; align-items : center; justify-content : center;} #LeftLogo_simpleNavi .navWrap { width : 95%; height : 100%; display : flex; align-items : center; justify-content : space-between; max-width : 1400px;} #LeftLogo_simpleNavi .navWrap .mainNav { width : 100%; height : 100%; display : flex; justify-content : space-between; align-items : center; } #LeftLogo_simpleNavi .navWrap .mainNav .logoBox { width : auto; height : 100%; display : flex; align-items : center; justify-content : flex-start; } #LeftLogo_simpleNavi .navWrap .mainNav .logoBox a { width : auto; height : 100%; display : flex; align-items : center; justify-content : flex-start; } #LeftLogo_simpleNavi .navWrap .mainNav .logoBox img { width : 100%; height : 45%; object-fit : contain; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { width : auto; height : 100%; display : flex; justify-content : flex-end; align-items : flex-end; gap : 3em; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList { width : auto; height : 100%; position : relative; display : flex; align-items : center; justify-content : center; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .mainList_a { width : auto; height : 100%; display : flex; align-items : center; justify-content : center; color : #000; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList:hover .mainList_a { color : #4d6e7f; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList { width : 8.5em; height : auto; position : absolute; top : 100%; left : 50%; text-align : left; background : #f7f7f7; pointer-events : none; opacity : 0; padding : 5% 0; transform : translateX(-50%); transition : .2s;} #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList:hover .subNavList { opacity : 1; pointer-events : auto; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li { width : 100%; height : auto; padding : 5% 0; text-align : center; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li a { font-size : calc(13px + 0.1vw); color : #0000009e; padding : 0 10%; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li a:hover { color : #000; padding : 0 15%; transition : .3s; } /***********모바일 버전 메뉴***********/ #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { width : auto; height : auto; display : none; flex-direction : column; justify-content : center; cursor : pointer; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn span { width : 24px; height : 3px; background : #70685e; display : block; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn span:nth-child(2) { margin : 5px 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn:hover span:nth-child(2) { margin : 8px 0; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobileCloseWrap { width : 100vw; height : 100vh; position : fixed; top : 0; left : 0; z-index : -1; display : none; background : #0000002b;} #LeftLogo_simpleNavi .navWrap .mainNav .mobileCloseWrap.on { display : none;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap { width : 380px; height : 100%; background : #f7f7f7; position : fixed; top : 0; right : -100%; z-index : 5; display : flex; flex-direction : column; align-items : center; justify-content : center; transition : .3s;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap.on { top : 0; right : 0; z-index : 5; display : none; box-shadow : -5px 0px 13px 0px #00000059; transition : .3s;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobileInnerWrap { width : 80%; height : 85%; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 8%; position : relative;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_closeBtn { font-size : 1.5em; color : #000; position : absolute; top : -1.2em; right : -0.5em; cursor : pointer; transition : .2s; z-index : 6; line-height : 1em;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_closeBtn:hover { color : #000; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo, #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo a { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo img { width : 80%; height : 2em; object-fit : contain;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; flex-grow : 1; overflow : auto; gap : 1.2em;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; color : #666; text-align : left; position : relative; cursor : pointer; transition : .3s; font-weight : 500; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.3em;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList.active { color : #002f47;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 0.9em; color : inherit; position : absolute; top : 0; right : 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 0.9em; color : inherit; position : absolute; top : 0; right : 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList { width : 100%; height : auto; max-height : 0px; padding-left : 0.5em; overflow : hidden; transition : .3s; display : flex; flex-wrap : wrap; gap : 0.3em 0;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; float : left; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #4d6e7f; font-size : 0.9em; font-weight : 400; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar { width : 240px; height : auto; border-top : 3px solid #ffffff9e; position : absolute; bottom : 0; left : 70px; display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li { width : 120px; height : auto; padding : 30px 0 60px; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #ffffff9e; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li a:hover { color : #fff; transition : .3s; } @media (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #LeftLogo_simpleNavi { font-size : min(2.6vw,16px);} #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { display : none; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobileCloseWrap.on { display : block;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap.on { display : flex;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #LeftLogo_simpleNavi { font-size : max(15px,3vw); height : 55px;} #LeftLogo_simpleNavi .navWrap .mainNav .logoBox img { width : 60%; height : 80%; object-fit : contain;} #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { display : none; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap { width : 90%; max-width : 380px;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } }