/* A A A : A : A : A : */ #TitleMenu_LeftLogo_1x2_login { width : 100%; height : auto; position : absolute; transition : .2s; z-index : 101; top : 0; font-size : min(1.4vw,16px); font-family : "nanum_square";} #TitleMenu_LeftLogo_1x2_login .navTop { width : 100%; height : 35px; background : #664024; padding : 0 20px; transition : .2s; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap { width : 100%; height : 100%; max-width : 1300px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_left { width : 50%; height : 100%; display : flex; justify-content : flex-start; align-items : center; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_left .navTop_leftList { color : #bfbfc0; line-height : 1em; margin-right : clamp(15px,2.5vw,50px); } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_left .navTop_leftList:hover { color : #fff; transition : .2s; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_left .navTop_leftList:last-child { margin-right : 0; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_right { width : 100%; height : 100%; display : flex; justify-content : flex-end; align-items : center; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_right a { font-size : max(14px,0.9em); color : #fff; line-height : 1em; margin-right : clamp(13px,1.5vw,18px); transition : .2s;} #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_right a:last-child { margin-right : 0;} #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_right a:hover { color : #ebebc1; transition : .2s; } #TitleMenu_LeftLogo_1x2_login .navBot { width : 100%; height : 70px; padding : 0 20px; background : #fff; z-index : 20; transition : .2s; } #TitleMenu_LeftLogo_1x2_login.on .navBot { position : fixed; top : 0; z-index : 101;} #TitleMenu_LeftLogo_1x2_login .navBot::after { content : ""; position : absolute; top : 0; left : 0; width : 100%; height : 100%; box-shadow : 0px 1px 5px 0px #0000002b; z-index : -1; } #TitleMenu_LeftLogo_1x2_login.on .navBot { height : 50px; transition : .2s;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap { width : 100%; height : 100%; max-width : 1300px; display : flex; justify-content : flex-start; align-items : center; margin : 0 auto; } #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap { max-width : 1000px; transition : .2s;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo { width : 30%; height : 100%; transition : .2s; overflow : hidden; display : flex; align-items : center;} #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap .navBot_logo { width : 0%; transition : .2s;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo a { height : 70%; max-width : 270px;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo img { width : 100%; height : 100%; object-fit : contain; max-width : 270px; transition : .3s; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap { width : 70%; height : 100%; display : flex; justify-content : space-between; align-items : center; transition : .2s; } #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap .navBot_menuListWrap { width : 100%; transition : .2s;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList { height : 100%; position : relative; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList:last-child { margin-right : 0; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList { width : 100%; height : 100%; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList .menuList_a { color : #231815; width : 100%; height : 100%; display : flex; align-items : center; transition : .1s; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList:hover .menuList .menuList_a { color : #664024; transition : .1s; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList .subMenuListWrap { width : 10em; height : auto; position : absolute; top : 100%; left : 50%; transform : translateX(-50%); text-align : center; display : flex; flex-direction : column; background : #f9f9f9; opacity : 0; pointer-events : none; transition : .3s; z-index : -1; padding : 0.45em 0;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList:hover .subMenuListWrap { opacity : 1; pointer-events : auto; transition : .3s;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList .subMenuListWrap li { padding : 0.5em 0; line-height : 1em;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList .subMenuListWrap a { font-size : max(15px,0.95em); color : #555; transition : .3s; line-height : 1em; display : inline-block;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap .navBot_menuList .menuList .subMenuListWrap a:hover { color : #664024; } /* 모바일 메뉴 버튼 */ #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .mobileNavBtn { cursor : pointer; display : none; font-size : 1.5em; justify-content : center; align-items : center; } /***********모바일 & 테블릿 버전 메뉴***********/ #TitleMenu_LeftLogo_1x2_login .backCover.on { display : none; transition : 1s; } #TitleMenu_LeftLogo_1x2_login .backCover { width : 100%; height : 100vh; background : #0000004d; position : fixed; top : 0; display : none; z-index : 15; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap { width : 100%; height : 100%; background : #e3d1c3; position : fixed; top : 0; left : -100%; padding : 70px 70px 0; z-index : 25; transition : .5s; display : none; max-width : 400px;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap.on { left : 0; box-shadow : 6px 0px 12px 0px #00000057; transition : .5s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobileNavCloseBtn { position : absolute; top : 2%; right : 5%; color : #654024; font-size : 20px; cursor : pointer; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_logo { width : auto; height : auto; text-align : left; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_logo img { width : 210px; height : auto; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; flex-wrap : wrap; margin : 40px 0; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 1em; color : #654024; display : flex; flex-direction : column; align-items : center; margin-right : 1em; line-height : 1em;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .iconBox:last-child { margin-right : 0; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .iconBox svg { font-size : 1.5em; margin-bottom : 0.3em; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .mobile_searchWrap.on { height : 30px; margin-top : 20px; transition : .4s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .mobile_searchWrap { width : 100%; display : flex; justify-content : space-between; background : #fff; height : 0; margin-top : 0; align-items : center; transition : .4s; overflow : hidden; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobile_search { width : 90%; height : 90%; border : none; padding-left : 10px; font-size : 14px; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .searchLabel { width : 10%; display : flex; align-items : center; justify-content : center; cursor : pointer; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobileSubmit { display : none; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav { width : 100%; height : auto; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 1.1em; color : #654024bd; text-align : left; position : relative; cursor : pointer; transition : .3s; padding : 4px 0; font-weight : 500; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList.active ,#TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #654024;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #674125; transition : .3s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_LeftLogo_1x2_login .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_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; padding : 5px 0; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #855c3d; font-size : 14px; font-weight : 400; transition : .3s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a:hover { color : #59371e; transition : .3s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar { width : 100%; height : auto; border-top : 3px solid #ffffff9e; position : absolute; bottom : 0; left : 0; display : flex; justify-content : center; align-items : center; text-align : center; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar li { width : 50%; height : auto; padding : 30px 0 ; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #ffffff9e; transition : .3s; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar li a:hover { color : #fff; transition : .3s; } @media (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_LeftLogo_1x2_login { font-size : min(2.3vw,15px); position : sticky; top : -35px;} #TitleMenu_LeftLogo_1x2_login .navBot { position : static; height : 70px;} #TitleMenu_LeftLogo_1x2_login.on .navBot { position : static; } #TitleMenu_LeftLogo_1x2_login.on .navBot { height : 60px;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap { justify-content : flex-start; position : relative; } #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap { max-width : unset;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap { display : none; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .mobileNavBtn { display : flex; z-index : 1;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo { width : 100%; height : 100%; text-align : center; justify-content : center; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); } #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap .navBot_logo { width : 100%;} #TitleMenu_LeftLogo_1x2_login.on .navBot .navBotWrap .navBot_logo { width : 100%;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo a { height : 65%;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap { display : block; } #TitleMenu_LeftLogo_1x2_login .backCover.on { display : block; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_LeftLogo_1x2_login { font-size : max(14px,3vw);} #TitleMenu_LeftLogo_1x2_login.on { top : -30px;} #TitleMenu_LeftLogo_1x2_login:hover { background : #00000000;} #TitleMenu_LeftLogo_1x2_login .navTop { height : 30px; } #TitleMenu_LeftLogo_1x2_login .navTop .navTopWrap .navTop_right a { font-size : 12px;} #TitleMenu_LeftLogo_1x2_login .navBot { height : 60px !important; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap { justify-content : space-between; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_menuListWrap { display : none; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_logo a { height : 55%;} #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_right { width : auto; flex-grow : unset; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_right .navBot_loginBar { display : none; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_right .navBot_cart { font-size : clamp(12px,1vw,16px); margin-left : 0; width : auto; height : 38px; display : flex; align-items : center; justify-content : center; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_right .navBot_cart svg { font-size : unset; } #TitleMenu_LeftLogo_1x2_login .navBot .navBotWrap .navBot_right .navBot_cart a { color : #fff; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap { padding : 30% 10% 0; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_logo img { width : 150px;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList.active, #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav .mobile_navList.active { margin-bottom : 0.5%;} #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #TitleMenu_LeftLogo_1x2_login .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } }