/* A A A : A : A : A : */ #sideMenu { width : auto; height : 4em; display : flex; align-items : center; justify-content : center; font-size : min(1.4vw,15px); font-family : "nanum"; position : fixed; top : 50%; right : 0; transition : transform .4s; transform : translate(calc(100% - 2.5em), -50%); z-index : 101;} #sideMenu.on { transform : translate(0, -50%); height : 100vh !important; transition : transform .4s, height 0s;} #sideMenu.none { transform : translate(calc(100% - 2.5em), -50%); transition : unset ! important;} #sideMenu.none.on { transform : translate(0, -50%); transition : unset ! important;} #sideMenu.hidden { z-index : 90;} #sideMenu #sideToggle { width : 2.5em; height : 4em; background : #fefefe; display : flex; align-items : center; justify-content : center; color : #231815; opacity : .8; cursor : pointer;} #sideMenu #sideToggle:hover { opacity : 1;} #sideMenu #sideToggle svg { font-size : 1.5em; transition : .4s;} #sideMenu.on #sideToggle svg { transform : rotate(180deg); transition : .4s;} #sideMenu #sideMenuWrap { width : auto; height : 100%; display : flex; flex-direction : column; justify-content : flex-start; align-items : center; } #sideMenu #sideMenuWrap .wrap { width : 100%; height : auto; padding : 2.5em 2em; display : flex; flex-direction : column; justify-content : flex-start; align-items : center;} #sideMenu #sideMenuWrap .innerWrap { width : 200px; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 1.5em;} #sideMenu #sideMenuWrap .topWrap, #sideMenu #sideMenuWrap .botWrap { background : #fff; } #sideMenu #sideMenuWrap .midWrap { background : #ffffffb3; flex-grow : 1; overflow : auto;} #sideMenu #sideMenuWrap .topWrap .loginWrap { width : 100%; height : auto; display : flex; flex-direction : column; justify-content : flex-start; align-items : center; gap : 1em;} #sideMenu #sideMenuWrap .topWrap .loginWrap a { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #sideMenu #sideMenuWrap .topWrap .loginWrap a img { width : 100%; height : auto; max-height : 5em;} #sideMenu #sideMenuWrap .topWrap .loginWrap .loginBtnWrap, #sideMenu #sideMenuWrap .topWrap .snsWrap { width : 80%; height : auto; display : flex; align-items : center; justify-content : center; gap : 1em;} #sideMenu #sideMenuWrap .topWrap .loginWrap .loginBtnWrap .btn { width : 50%; height : auto; line-height : 1em; padding : 0.5em 0; border : 1px solid #231815; color : #231815; font-weight : 700; transition : color .2s, background .2s;} #sideMenu #sideMenuWrap .topWrap .loginWrap .loginBtnWrap .btn:hover { color : #fff; background : #231815; transition : color .2s, background .2s;} #sideMenu #sideMenuWrap .topWrap .snsWrap .snsBtn { width : 2.5em; height : 2.5em; display : flex; filter : drop-shadow(0px 0px 0px transparent); transition : filter .2s;} #sideMenu #sideMenuWrap .topWrap .snsWrap .snsBtn img { width : 100%; height : 100%; object-fit : contain;} #sideMenu #sideMenuWrap .topWrap .snsWrap .snsBtn:hover { filter : drop-shadow(0px 0px 3px #555); transition : filter .2s;} #sideMenu #sideMenuWrap .topWrap .line { width : 100%; height : 2px; background : #231815;} #sideMenu #sideMenuWrap .midWrap .btnWrap { width : 100%; height : auto; display : flex; flex-wrap : wrap; gap : 1.5em 1em;} #sideMenu #sideMenuWrap .midWrap .btnWrap .btn { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 0.5em; background : #fff; border-radius : 17px; padding : 1em 0; transition : background .2s, box-shadow .2s;} #sideMenu #sideMenuWrap .midWrap .btnWrap .btn:hover { background : #f9f9f9; box-shadow : 0px 0px 5px 0px #c5c5c5; transition : background .2s, box-shadow .2s;} #sideMenu #sideMenuWrap .midWrap .btnWrap .btn.half { width : calc(50% - 0.5em);} #sideMenu #sideMenuWrap .midWrap .btnWrap .btn img { height : 2em;} #sideMenu #sideMenuWrap .midWrap .btnWrap .btn p { line-height : 1em; color : #231815; font-weight : 700;} #sideMenu #sideMenuWrap .botWrap .innerWrap .infoList { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start;} #sideMenu #sideMenuWrap .botWrap .innerWrap .infoList .infoTit { color : #959595; font-weight : 700;} #sideMenu #sideMenuWrap .botWrap .innerWrap .infoList .infoVal { color : #333333; font-weight : 700;} /* #sideMenu #sideMenuWrap .botWrap .botTit { font-weight : 700; line-height : 1em; color : #231815;} #sideMenu #sideMenuWrap .botWrap .btnWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; gap : 2em;} #sideMenu #sideMenuWrap .botWrap .btnWrap a { width : 50%; height : auto; display : flex;} #sideMenu #sideMenuWrap .botWrap .btnWrap a img { width : 100%; height : auto;} */ @media(max-width : 1024px){ /* A A A : A : A : A : */ #sideMenu { font-size : min(1.8vw,14px);} } @media(max-width : 640px){ /* A A A : A : A : A : */ #sideMenu { width : 4em; height : 2em !important; font-size : max(12px, 2.2vw); top : unset; bottom : 0; left : 50%; transform : translateX(-50%); right : unset; transition : width .3s;} #sideMenu.on { width : 100%; height : 2em !important; transform : translateX(-50%); transition : width .3s;} #sideMenu #sideToggle { width : 100%; height : 100%; z-index : 2;} #sideMenu #sideToggle svg { transform : rotate(90deg);} #sideMenu.on #sideToggle svg { transform : rotate(270deg);} #sideMenu #sideMenuWrap { width : 100vw; height : calc(100vh - 2em); position : fixed; bottom : -100vh; z-index : 1; transition : bottom .3s;} #sideMenu.on #sideMenuWrap { width : 100vw; height : calc(100vh - 2em); position : fixed; bottom : 2em; transition : bottom .3s;} #sideMenu #sideMenuWrap .innerWrap { width : 90%; max-width : 200px;} }