@charset "utf-8";

/* 메인 - 상단(로그인/아웃) */
#_main > [m-area=top] > div > [type=member] { width:25%; height:100%; background:#fff; box-sizing:border-box; padding:2% 1% 1%; }

#_main > [m-area=top] > div > [type=member] > [top] { width:100%; height:30px; line-height:30px; overflow:hidden; /* display:flex; justify-content:space-between; align-items:center; */ }
#_main > [m-area=top] > div > [type=member] > [top] > strong { width:19%; margin-right:1%; float:left; font-size:16px; color:#000; letter-spacing:-0.05em; }
#_main > [m-area=top] > div > [type=member] > [top] > ul { float:left; width:80%; overflow:hidden; }
#_main > [m-area=top] > div > [type=member] > [top] > ul > li { float:left; margin-left:5px; }
#_main > [m-area=top] > div > [type=member] > [top] > ul > li:first-child { margin-left:0; }
#_main > [m-area=top] > div > [type=member] > [top] > ul > li#naver_id_login > a { display:block; width:30px; height:30px; background:url(/img/main/sns_login_naver.png) no-repeat 0 0;  }
#_main > [m-area=top] > div > [type=member] > [top] > ul > li#naver_id_login > a > img { display:none; }

/* 입력 폼 */
#_main > [m-area=top] > div > [type=member] > [input] { margin-top:10px; }
#_main > [m-area=top] > div > [type=member] > [input] ul > li > input { border:1px solid #eee; height:28px; width:100%; box-sizing:border-box; padding:0 4px; font-size:12px; color:#333; letter-spacing:-0.025em; outline:none; transition:border-color 0.1s ease-in-out; }
#_main > [m-area=top] > div > [type=member] > [input] ul > li > input:focus { border-color:#999; }
#_main > [m-area=top] > div > [type=member] > [input] ul > li > input[type=password] { margin-top:5px; }

/* 자동 로그인 */
#_main > [m-area=top] > div > [type=member] > [input] [auto] { margin-top:10px; display:flex; justify-content:flex-end; }
#_main > [m-area=top] > div > [type=member] > [input] [auto] > input { display:none; }
#_main > [m-area=top] > div > [type=member] > [input] [auto] > input+label { position:relative; padding-left:22px; cursor:pointer; font-size:12px; color:#333; }
#_main > [m-area=top] > div > [type=member] > [input] [auto] > input+label::before { content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:14px; height:14px; border:1px solid #333; margin:auto 0; }
#_main > [m-area=top] > div > [type=member] > [input] [auto] > input+label::after { content:''; display:none; position:absolute; left:5px; top:0; bottom:2px; width:3px; height:8px; border:3px solid #fff; border-top:0; border-left:0; margin:auto 0; transform:rotate(45deg); }

#_main > [m-area=top] > div > [type=member] > [input] [auto] > input:checked+label::before { background:#333; }
#_main > [m-area=top] > div > [type=member] > [input] [auto] > input:checked+label::after { display:block; }

/* 로그인/회원가입 버튼 */
#_main > [m-area=top] > div > [type=member] > [btns] { margin-top:10px; }
#_main > [m-area=top] > div > [type=member] > [btns] > button { width:100%; box-sizing:border-box; height:33px; color:#fff; font-size:15px; font-weight:bold; border:0; border-radius:50px; transition:background 0.1s ease-in-out; outline:none; }
#_main > [m-area=top] > div > [type=member] > [btns] > button[btnType=login] { border-color:#0a69e1; background:#0a69e1; }
#_main > [m-area=top] > div > [type=member] > [btns] > button[btnType=join] { border-color:#1da1f2; background:#1da1f2; margin-top:7px; }

#_main > [m-area=top] > div > [type=member] > [btns] > button[btnType=login]:hover { background:#fff; color:#0a69e1; box-shadow:0 0 1px #0a69e1; }
#_main > [m-area=top] > div > [type=member] > [btns] > button[btnType=join]:hover { background:#fff; color:#1da1f2; box-shadow:0 0 1px #1da1f2; }

/* 비밀번호 찾기 */
#_main > [m-area=top] > div > [type=member] > [btns] > span { display:flex; justify-content:space-between; font-size:12px; letter-spacing:-0.075em; margin-top:12px; }
#_main > [m-area=top] > div > [type=member] > [btns] > span > p { color:#666; }
#_main > [m-area=top] > div > [type=member] > [btns] > span > a { color:#0072b8; font-weight:bold; }