--- src/main/webapp/publish/css/mem.css
+++ src/main/webapp/publish/css/mem.css
... | ... | @@ -597,6 +597,13 @@ |
| 597 | 597 |
.security_login .qmMark{width:20px;height:20px;margin:-4px 0 0 8px;font-size:14px;font-weight:bold;font-family:'GmarketSansBold';background:#d7d7d9;border-radius:5px;color:#666;text-align:center;line-height:22px;cursor:pointer;}
|
| 598 | 598 |
.security_login .title_area .hover_cont{display:none;display: none; position:absolute;width:320px;padding:15px;font-size:15px;line-height:1.2;z-index:80;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 0 8px rgba(0,0,0,0.5);}
|
| 599 | 599 |
.security_login .title_area .qmMark:hover+.hover_cont{display:block;}
|
| 600 |
+ |
|
| 601 |
+.mem_cont_in.security_login .input_list .input_list_item .input_left{width:125px;;}
|
|
| 602 |
+.mem_cont_in.security_login .welcome{font-size:26px;}
|
|
| 603 |
+.mem_cont_in.security_login .mem_bottom{display:flex;align-items:center;font-size:15px;color:#444;gap:8px;justify-content:space-between;}
|
|
| 604 |
+.mem_cont_in.security_login .mem_bottom button{/* background:#ffe7e7; */font-size:15px;font-weight:500;padding:3px 10px;color:#e40000;border:1px solid #e40000;border-radius:5px;}
|
|
| 605 |
+.mem_cont_in.security_login .mem_btnWrap2{display:flex;gap:8px;}
|
|
| 606 |
+.mem_cont_in.security_login .mem_btnWrap2 button{width:50%;}
|
|
| 600 | 607 |
/* //보안로그인 */ |
| 601 | 608 |
|
| 602 | 609 |
/* 서류 인증 */ |
+++ src/main/webapp/publish/security_login.html
... | ... | @@ -0,0 +1,313 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 7 | + <title>문자온</title> | |
| 8 | + | |
| 9 | + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | |
| 10 | + <link rel="stylesheet" href="/publish/css/reset.css"> | |
| 11 | + <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css"> | |
| 12 | + <link rel="stylesheet" href="/publish/css/common.css"> | |
| 13 | + <link rel="stylesheet" href="/publish/css/button.css"> | |
| 14 | + <link rel="stylesheet" href="/publish/css/content.css"> | |
| 15 | + <link rel="stylesheet" href="/publish/css/mem.css"> | |
| 16 | + <link rel="stylesheet" href="/publish/css/font.css"> | |
| 17 | + <link rel="stylesheet" href="/publish/css/popupLayer.css"> | |
| 18 | + | |
| 19 | + | |
| 20 | + <script src="/publish/js/jquery-3.5.0.js"></script> | |
| 21 | + <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script> | |
| 22 | + <script src="/publish/js/common.js"></script> | |
| 23 | + <script src="/publish/js/content.js"></script> | |
| 24 | + <script src="/publish/js/popupLayer.js"></script> | |
| 25 | + | |
| 26 | + <script> | |
| 27 | + $(function () { | |
| 28 | + timer(); | |
| 29 | + }) | |
| 30 | + //인증번호 타이머 | |
| 31 | + function timer() { | |
| 32 | + var time = 180; //기준시간 작성 | |
| 33 | + var min = ""; //분 | |
| 34 | + var sec = ""; //초 | |
| 35 | + //setInterval(함수, 시간) : 주기적인 실행 | |
| 36 | + var x = setInterval(function () { | |
| 37 | + //parseInt() : 정수를 반환 | |
| 38 | + min = parseInt(time / 60); | |
| 39 | + sec = time % 60; //나머지를 계산 | |
| 40 | + | |
| 41 | + document.getElementById("timer").innerHTML = min + "분" + sec + "초"; | |
| 42 | + time--; | |
| 43 | + | |
| 44 | + //타임아웃 시 | |
| 45 | + if (time < 0) { | |
| 46 | + clearInterval(x); //setInterval() 실행을 끝냄 | |
| 47 | + document.getElementById("timer").innerHTML = "시간초과"; | |
| 48 | + } | |
| 49 | + | |
| 50 | + }, 1000); | |
| 51 | + | |
| 52 | + if (time != 180) { | |
| 53 | + time = 180; | |
| 54 | + clearInterval(x); | |
| 55 | + } | |
| 56 | + } | |
| 57 | + </script> | |
| 58 | + | |
| 59 | +</head> | |
| 60 | + | |
| 61 | +<body> | |
| 62 | + <div class="mask"></div> | |
| 63 | + <!-- skip 메뉴 --> | |
| 64 | + <div class="skip_menu"> | |
| 65 | + <a href="#cont" title="본문 바로가기" class="contGo">본문 바로가기</a> | |
| 66 | + </div> | |
| 67 | + <!--// skip 메뉴 --> | |
| 68 | + <!-- quick 메뉴 --> | |
| 69 | + <div class="quickMenu"> | |
| 70 | + <div> | |
| 71 | + <p class="quick_title">QUICK<br>MENU</p> | |
| 72 | + <p class="quick_title2">QUICK</p> | |
| 73 | + <ul class="quickMenuIn"> | |
| 74 | + <li> | |
| 75 | + <a href="/publish/index.html"><i class="quick1"></i><span>이용안내</span></a> | |
| 76 | + <div class="hover_cont">이용안내</div> | |
| 77 | + </li> | |
| 78 | + <li> | |
| 79 | + <a href="#"><i class="quick2"></i><span>채팅상담</span></a> | |
| 80 | + <div class="hover_cont">채팅상담</div> | |
| 81 | + </li> | |
| 82 | + <li> | |
| 83 | + <a href="#"><i class="quick3"></i><span>원격지원</span></a> | |
| 84 | + <div class="hover_cont">원격지원</div> | |
| 85 | + </li> | |
| 86 | + <li> | |
| 87 | + <a href="#"><i class="quick4"></i><span>맞춤제작</span></a> | |
| 88 | + <div class="hover_cont">맞춤제작</div> | |
| 89 | + </li> | |
| 90 | + <li> | |
| 91 | + <a href="#"><i class="quick5"></i><span>주소록 등록</span></a> | |
| 92 | + <div class="hover_cont">주소록 등록</div> | |
| 93 | + </li> | |
| 94 | + <li> | |
| 95 | + <a href="#"><i class="quick6"></i><span>엑셀 전송</span></a> | |
| 96 | + <div class="hover_cont">엑셀 대량전송</div> | |
| 97 | + </li> | |
| 98 | + <li> | |
| 99 | + <a href="#"><i class="quick7"></i><span>견적서</span></a> | |
| 100 | + <div class="hover_cont">견적서</div> | |
| 101 | + </li> | |
| 102 | + <li> | |
| 103 | + <a href="#"><i class="quick8"></i><span>결제</span></a> | |
| 104 | + <div class="hover_cont">결제</div> | |
| 105 | + </li> | |
| 106 | + <li> | |
| 107 | + <a href="#"><i class="quick9"></i><span>영수증/계산서</span></a> | |
| 108 | + <div class="hover_cont">영수증/계산서</div> | |
| 109 | + </li> | |
| 110 | + </ul> | |
| 111 | + <button type="button" class="goTop" title="맨 위로 이동">TOP<i></i></button> | |
| 112 | + </div> | |
| 113 | + </div> | |
| 114 | + <!--// quick 메뉴 --> | |
| 115 | + <!-- header 영역 --> | |
| 116 | + <header id="header" class="header"> | |
| 117 | + <!-- header top 영역 --> | |
| 118 | + <div class="header_top"> | |
| 119 | + <div class="inner"> | |
| 120 | + <ul class="menu_left"> | |
| 121 | + <li><a href="#"><i class="hdTop_fav"></i>즐겨찾기추가</a></li> | |
| 122 | + <li><a href="#"><i class="hdTop_mypage"></i>마이페이지</a></li> | |
| 123 | + <li><a href="#"><i class="hdTop_center"></i>고객센터</a></li> | |
| 124 | + </ul> | |
| 125 | + <ul class="menu_right"> | |
| 126 | + <li><a href="#">충전하기</a></li> | |
| 127 | + <li class="SortLine"><a href="#">요금안내</a></li> | |
| 128 | + <li class="SortLine"><a href="#">이용안내</a></li> | |
| 129 | + <li class="SortLine"><a href="#">1:1고객상담</a></li> | |
| 130 | + </ul> | |
| 131 | + </div> | |
| 132 | + </div><!-- header top 영역 --> | |
| 133 | + <!-- header body 영역 --> | |
| 134 | + <div class="header_body"> | |
| 135 | + <div class="inner table"> | |
| 136 | + <h1 class="logo"><a href="/publish/index.html" alt="문자온 메인 바로가기"><img src="/publish/images/CI.png" alt="문자온 CI"></a></h1> | |
| 137 | + <ul class="gnbWrap table_cell"> | |
| 138 | + <li><a href="#">문자발송</a></li> | |
| 139 | + <li><a href="#">선거문자</a></li> | |
| 140 | + <li><a href="#">맞춤제작</a></li> | |
| 141 | + <li><a href="#">비즈톡</a></li> | |
| 142 | + <li><a href="#">주소록 관리</a></li> | |
| 143 | + <li><a href="#">발송결과</a></li> | |
| 144 | + <li><a href="#">예약관리</a></li> | |
| 145 | + <li><a href="#">결제내역</a></li> | |
| 146 | + </ul> | |
| 147 | + <div class="s_menu"> | |
| 148 | + <i class="allSearch_info"><span>문자검색</span></i> | |
| 149 | + <button type="button" title="전체검색" class="allSearch" onclick="searchToggle();"><img src="/publish/images/search.png" alt="검색영역 열기" class="allMenu"></button> | |
| 150 | + <button type="button" title="전체메뉴"><img src="/publish/images/all_menu.png" alt="전체메뉴 열기"></button> | |
| 151 | + </div> | |
| 152 | + </div> | |
| 153 | + <!-- search popup 영역 --> | |
| 154 | + <div class="pop_search"> | |
| 155 | + <div class="inner"> | |
| 156 | + <div class="area_search"> | |
| 157 | + <select name="" id=""> | |
| 158 | + <option value="">그림문자</option> | |
| 159 | + <option value="">단문문자</option> | |
| 160 | + <option value="">장문문자</option> | |
| 161 | + <option value="">GIF</option> | |
| 162 | + </select> | |
| 163 | + <input type="text" placeholder="문자샘플 검색하기"> | |
| 164 | + <button><img src="/publish/images/search02.png" alt=""></button> | |
| 165 | + </div> | |
| 166 | + <div class="area_popular"> | |
| 167 | + <p><i></i>인기검색어</p> | |
| 168 | + <ul class="popular_tag"> | |
| 169 | + <li><a href="#">#정월대보름</a></li> | |
| 170 | + <li class="on"><a href="#">#추석</a></li> | |
| 171 | + <li><a href="#">#가을인사</a></li> | |
| 172 | + <li><a href="#">#좋은하루</a></li> | |
| 173 | + </ul> | |
| 174 | + </div> | |
| 175 | + <button class="btn_close" onclick="searchToggle();"><img src="/publish/images/btn_searchclose.png" alt=""></button> | |
| 176 | + </div> | |
| 177 | + </div> | |
| 178 | + <!--// search popup 영역 --> | |
| 179 | + </div> | |
| 180 | + <!--// header body 영역 --> | |
| 181 | + <div id="login" class="login"> | |
| 182 | + <div class="inner table"> | |
| 183 | + <div class="login_left table_cell"> | |
| 184 | + <div class="login_put"> | |
| 185 | + <label for="id_text" class="label"></label> | |
| 186 | + <input type="text" placeholder="아이디를 입력해주세요" id="id_text" class="id_text" maxlength="30" size="18"> | |
| 187 | + <label for="password_text" class="label"></label> | |
| 188 | + <input type="password" placeholder="비밀번호를 입력해주세요" id="password_text" class="password_text" maxlength="30" size="18"> | |
| 189 | + <label for="login_button" class="label"></label> | |
| 190 | + <button type="submit" class="btnType btnType1" class="login_button">로그인</button> | |
| 191 | + </div> | |
| 192 | + <div class="login_save"> | |
| 193 | + <input type="checkbox" id="save_id"> | |
| 194 | + <label for="save_id">아이디 저장</label> | |
| 195 | + </div> | |
| 196 | + <div class="login_find"> | |
| 197 | + <a href="#">아이디찾기 /</a> | |
| 198 | + <a href="#">비밀번호 찾기</a> | |
| 199 | + </div> | |
| 200 | + <div> | |
| 201 | + <button type="button" class="btnType btnType2">회원가입</button> | |
| 202 | + <button type="button" class="btnType btnType3">둘러보기</button> | |
| 203 | + </div> | |
| 204 | + </div> | |
| 205 | + <div class="login_right"> | |
| 206 | + <span><i></i>이달의 이벤트</span> | |
| 207 | + <button type="button" class="btnType btnType4">바로가기</button> | |
| 208 | + </div> | |
| 209 | + </div> | |
| 210 | + </div> | |
| 211 | + <!--// login 영역 --> | |
| 212 | + </header> | |
| 213 | + <!--// header 영역 --> | |
| 214 | + <!-- login 영역 --> | |
| 215 | + <!-- content 영역 --> | |
| 216 | + <div id="container" class="cont sub"> | |
| 217 | + <div class="inner"> | |
| 218 | + <!-- send top --> | |
| 219 | + <div class="send_top"> | |
| 220 | + <!-- 마이페이지 - 로그인 --> | |
| 221 | + <div class="mypage_content current"> | |
| 222 | + <div class="heading"> | |
| 223 | + <h2>보안 로그인</h2> | |
| 224 | + </div> | |
| 225 | + <div class="mem_cont_in widthS login_wrap security_login"> | |
| 226 | + <div class="input_list"> | |
| 227 | + <p class="welcome"><span>안전한 서비스 이용</span>을 위해 <span class="c_222 fwBold">가입자 인증</span>이 필요합니다.</p> | |
| 228 | + <div class="input_list_item" id="input_list_item_4"> | |
| 229 | + <div class="input_left">휴대폰번호</div> | |
| 230 | + <div class="input_right"> | |
| 231 | + <label for="list_inputType1" class="label">휴대폰번호</label> | |
| 232 | + <select id="hp_text2" class="list_selType1" style="width:70%;"> | |
| 233 | + <option value="01057058729">01057058729(대표번호)</option> | |
| 234 | + </select> | |
| 235 | + </div> | |
| 236 | + <div class="login_del"> | |
| 237 | + <button type="button" class="btnType btnType3" onclick="sendMsgYn();">인증번호 받기</button> | |
| 238 | + </div> | |
| 239 | + </div> | |
| 240 | + <div class="input_list_item" id="input_list_item_5"> | |
| 241 | + <div class="input_left">인증번호 입력</div> | |
| 242 | + <div class="input_right"> | |
| 243 | + <label for="list_inputType1" class="label">인증번호 입력</label> | |
| 244 | + <input type="text" id="num_text2" class="list_inputType1" placeholder="인증번호를 입력해주세요" maxlength="6" onfocus="this.placeholder=''" onblur="this.placeholder='인증번호를 입력해주세요'" onkeypress="if(event.keyCode==13) {return false;}"> | |
| 245 | + | |
| 246 | + <div id="timer">3분00초</div> | |
| 247 | + </div> | |
| 248 | + <div class="login_del"> | |
| 249 | + <!-- <i class="password_protect"></i> --> | |
| 250 | + <button type="button" onclick="textClear('num_text2')" tabindex="-1"> | |
| 251 | + <img src="/publish/images/content/login_del.png" alt="입력 삭제"> | |
| 252 | + </button> | |
| 253 | + </div> | |
| 254 | + </div> | |
| 255 | + <div class="mem_bottom"> | |
| 256 | + <p class="cf_text">휴대폰번호로 전송된 인증번호를 입력해주세요 </p> | |
| 257 | + <button type="button" class="red_box">휴대폰번호가 변경된 경우</button> | |
| 258 | + </div> | |
| 259 | + | |
| 260 | + <div class="mem_btnWrap2"> | |
| 261 | + <button type="button" class="mem_btn5">로그인</button> | |
| 262 | + <button type="button" class="mem_btn2">취소</button> | |
| 263 | + </div> | |
| 264 | + </div> | |
| 265 | + </div> | |
| 266 | + <!--// 비밀번호 확인 --> | |
| 267 | + | |
| 268 | + </div> | |
| 269 | + <!--// 마이페이지 - 회원정보 변경 --> | |
| 270 | + | |
| 271 | + </div> | |
| 272 | + <!--// send top --> | |
| 273 | + </div> | |
| 274 | + </div> | |
| 275 | + <!--// content 영역 --> | |
| 276 | + <!-- footer 영역 --> | |
| 277 | + <!-- footer 영역 --> | |
| 278 | + <footer id="footer" class="footer"> | |
| 279 | + <div class="footer_top"> | |
| 280 | + <div class="inner table"> | |
| 281 | + <ul class="table_cell"> | |
| 282 | + <li><a href="#">이용약관</a></li> | |
| 283 | + <li class="SortLine fwRg c_white"><a href="#">개인정보취급방침</a></li> | |
| 284 | + <li class="SortLine fwRg c_white"><a href="#">스팸관리정책</a></li> | |
| 285 | + <li class="SortLine"><a href="#">불법스팸예방안내</a></li> | |
| 286 | + </ul> | |
| 287 | + </div> | |
| 288 | + </div> | |
| 289 | + <div class="footer_body"> | |
| 290 | + <div class="inner table"> | |
| 291 | + <div class="table_cell"> | |
| 292 | + <a href="#" class="footer_logo"><img src="/publish/images/CI_white.png" alt="문자온 CI"></a> | |
| 293 | + <div class="footer_info"> | |
| 294 | + <p>주소 : 경기도 남양주시 다산중앙로 19번길 21 1027호, 1028호(블루웨일 지식산업센터 1차)</p> | |
| 295 | + <p>사업자번호 : 653-87-00858 | 대표 : 유인식 | 통신판매등록번호 : 제 다산-12345호 | 문의전화 : 070-4786-0007</p> | |
| 296 | + <p>Copyright 2020 ⓒ MUNJAON co. Ltd, All rights reserved.</p> | |
| 297 | + </div> | |
| 298 | + <div class="footer_service_center"> | |
| 299 | + <i></i> | |
| 300 | + <div> | |
| 301 | + <p>고객센터</p> | |
| 302 | + <span class="footer_service_num">070-4786-0008</span> | |
| 303 | + <span>E-mail : help@iten.co.kr</span> | |
| 304 | + </div> | |
| 305 | + </div> | |
| 306 | + </div> | |
| 307 | + </div> | |
| 308 | + </div> | |
| 309 | + </footer> | |
| 310 | + <!--// footer 영역 --> | |
| 311 | +</body> | |
| 312 | + | |
| 313 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?