2024/01/04 문자온 > 선거 20건문자 사용안내 팝업 퍼블리싱

src/main/webapp/WEB-INF/jsp/web/msgcampain/tw/MsgTWDataSMLView.jsp

@@ -3817,28 +3817,29 @@ function getMjMsgSentListAll(pageNo) {
 	</div>
 	<!--// 주소록에 등록 팝업 -->
 	
-	<!--선거문자 이용안내 팝업  -->
-	<div class="tooltip-wrap">
+	<!--선거 20건문자 이용안내 팝업 추가  -->
+	<div class="tooltip-wrap tw_wrap ">
 		<div class="popup-com ad_layer candidate_popup03" tabindex="0" data-tooltip-con="candidate_popup03" data-focus="candidate_popup03" data-focus-prev="candidate_popup03-close" style="width: 795px">
 			<div class="popup_heading">
-				<p>선거문자 안내</p>
+				<p>20건 문자(수동문자) 이용안내</p>
 				<button type="button" class="tooltip-close" data-focus="candidate_popup03-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
 			</div>
 			<div class="layer_in">
-				<img src="/publish/images/content/candidatePop_banner.png" alt="선거문자 이용안내 배너" class="candidate_banner">
+				<img src="/publish/images/popup/tw_popup/tw_banner.png" alt="문자온에서 후보님의 당선을 지원합니다. 20건 문자(수동문자) 이용안내" class="candidate_banner">
 				<ul class="info_list">
 		    		<li>- 90byte 초과 시, 자동으로 장문으로 전환됩니다.  장문 문자는 최대 2,000byte까지만 작성할 수 있습니다.</li>
 		    		<li>- 그림문자 1건당 최대 3장까지 이미지 첨부 가능  [권장 사이즈 : <strong>640 x 960</strong>픽셀 / 최대용량 : <strong>10MB</strong> 이내]</li>
-		    		<li>- 광고성 메시지는 <span>반드시 아래 유의사항을 사전 확인</span> 후 발송해 주시기 바랍니다.</li>
 		    	</ul>
 				<!-- 이용방법/혜택 -->
 				<div class="cdpop_cont current" id="listTab2_1">
-					<div>
+					<div class="con">
 						<p class="cdpop_title">
-							<i class="cdpop_title_icon1"></i>선거문자 이용방법
+							<i class="tw_title01_icon"></i>20건 문자 이용절차
+							<!--
 							<span class="customReq">
 								<button type="button" onclick="goToCustom();"><i></i>선거문자 맞춤제작</button>
 							</span>
+							-->
 						</p>
 						<ul class="cdpop_info">
 							<li>
@@ -3879,80 +3880,86 @@ function getMjMsgSentListAll(pageNo) {
 							</li>
 						</ul>
 					</div>
-					<div>
-						<p class="cdpop_title"><i class="cdpop_title_icon2"></i>문자온 선거문자만의 장점 및 혜택</p>
-						<ul class="cdpop_benefit">
-							<li>
-								<div>
-									<i class="benefit1"></i>
-									<p>한 번에 대량으로 보내야 한다면?<span>10만건까지 동시 전송 가능</span></p>
-								</div>
-								<p>문자온의 대량전송(엑셀·TXT) 모듈을 통해
-									10만건의 대량문자도 쉽고 빠르게 전송 가능합니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit2"></i>
-									<p>수신거부 번호가 필요하세요?<span>080 수신거부 번호 무료제공</span></p>
-								</div>
-								<p>선거문자 발송규정 준수를 위해
-									080 수신거부 번호를 무료로 제공해 드립니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit3"></i>
-									<p>주소록 등록이 번거로우신가요?<span>주소록 등록 무료대행</span></p>
-								</div>
-								<p>주소록 등록파일(엑셀·TXT)을 문자온에 제공해
-									주시면 무료로 빠르고 신속하게 등록해 드립니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit4"></i>
-									<p>홍보효과를 높이고 싶다면?<span>후보자만의 그림문자 맞춤제작</span></p>
-								</div>
-								<p>선거공약, 인사말, 후보자 사진 등을 넣어 그림문자를
-									맞춤 제작하여 홍보효과를 극대화할 수 있습니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit5"></i>
-									<p>오류·실패건의 문자를 보상받고 싶다면?<span>오류·실패건 문자 100% 환불</span></p>
-								</div>
-								<p>번호오류, 수신거부, 수신실패 등으로 인해 문자전송이
-									실패한 경우 100% 환불(자동충전)해 드립니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit6 "></i>
-									<p>전송결과가 궁금하다면?<span>실시간 전송결과 확인 가능</span></p>
-								</div>
-								<p>전송결과 및 실패사유를 실시간으로 제공해드립니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit7"></i>
-									<p>20건씩 나눠서 보내야한다면?<span>20건씩 분할 예약 전송 가능</span></p>
-								</div>
-								<p>누구나 쉽고 편리하게 20건씩 나눠서 분할 전송이 가능합니다.</p>
-							</li>
-							<li>
-								<div>
-									<i class="benefit8"></i>
-									<p>필요한 서류가 있다면?<span>문자온에서 간편하게 신청 가능</span></p>
-								</div>
-								<p>문자온에서 발송내역서 출력이 가능하며,
-									세금계산서는 메일로 자동으로 발행됩니다.</p>
-							</li>
-						</ul>
+					<div class="con">
+						<p class="cdpop_title tw_title"><i class="tw_title02_icon"></i>후보자 등록 방법</p>
+						<div class="tw_con">
+							<ul>
+								<li>- 선거관리위원회에 등록된 후보자 정보와 세금계산서 담당자 정보를 입력합니다.</li>
+								<li class="sub_te">세금계산서 발행을 위한 정보로만 사용됩니다.</li>
+							</ul>
+							<img src="/publish/images/popup/tw_popup/tw_con_01.jpg" alt="받는 사람 목록 불러오기">
+						</div>
 					</div>
-				</div><!--// 이용방법/혜택 -->
+					<div class="con">
+						<p class="cdpop_title tw_title"><i class="tw_title03_icon"></i>받는 사람 목록 불러오기</p>
+						<div class="tw_con">
+							<ul>
+								<li>- 주소록 관리 메뉴에서 등록한 주소록을 불러오거나 PC에 저장된 엑셀 파일을 불러올 수 있습니다.</li>
+								<li>- 주소록 불러오기
+									<ul class="sub_li">
+										<li>① 그룹을 선택합니다.</li>
+										<li>② 체크박스 개별 또는 전체 선택을 통해 받는 사람 목록을 선택합니다.</li>
+										<li>③ 추가 버튼을 클릭합니다.</li>
+									</ul>
+								</li>
+								<li class="li_02">- 엑셀 불러오기
+									<ul class="sub_li">
+										<li>① 찾아보기를 클릭하여 불러올 엑셀 파일을 선택합니다.</li>
+										<li>② 추가 버튼을 클릭합니다.</li>
+									</ul>
+								</li>
+							</ul>
+							<img src="/publish/images/popup/tw_popup/tw_con_02.jpg" alt="받는 사람 목록 불러오기 1">
+							<ul>
+								<li class="te">- 받는 사람 목록 선택이 완료되면 20건 씩 받는 사람을 선택할 수 있도록 화면에 표시되며, 불러온 받는 사람 목록 전체에 대한 전체 받는사람 수, 전송완료 수, 잔여 받는사람 수를 확인할 수 있습니다.</li>
+								<li class="sub_te">불러온 받는 사람 목록은 재접속, 재로그인 시에도 유지되오니 목록을 삭제하고 싶은 경우에는<br>초기화 버튼을 눌러주세요.</li>
+							</ul>
+							<img src="/publish/images/popup/tw_popup/tw_con_03.jpg" alt="받는 사람 목록 불러오기 2">
+						</div>
+					</div>
+					<div class="con">
+						<p class="cdpop_title tw_title"><i class="tw_title04_icon"></i>20명 수동 선택 후 발송하기</p>
+						<div class="tw_con">
+							<ul>
+								<li>- 수동 선택 방법 (4가지 방법 가능)
+									<ul class="sub_li">
+										<li>① 체크박스를 하나씩 차례로 선택</li>
+										<li>② 받는 사람 목록 전화번호 위에서 마우스 왼쪽을 길게 누르고 드래그하여 영역 선택</li>
+										<li>③ 1명씩 선택 버튼을 계속 누르고 있으면 20명이 모두 선택</li>
+										<li>④ 전체버튼을 누르면 20명이 한번에 선택</li>
+									</ul>
+								</li>
+								<li class="te" style="margin-top: 10px;">
+									- 발송하기 버튼을 클릭하면 선택한 20건 문자가 발송되고 받는 사람 목록에 있는 다음 20건이 자동으로 화면에 표시됩니다.
+								</li>
+							</ul>
+							<img src="/publish/images/popup/tw_popup/tw_con_04.jpg" alt="20명 수동 선택 후 발송하기">
+						</div>
+					</div>
+					<div class="con">
+						<p class="cdpop_title tw_title"><i class="tw_title05_icon"></i>예약문자 발송하기</p>
+						<div class="tw_con">
+							<ul>
+								<li class="te">- 선택한 20건 문자의 발송이 예약되고 받는 사람 목록에 있는 다음 20건이 자동으로 화면에 표시됩니다.
+									<ul class="sub_li" style="margin-top: 5px;">
+										<li>① 예약 라디오 버튼을 클릭합니다.</li>
+										<li>② 예약일자 및 시간을 선택합니다.</li>
+										<li>③ 예약하기 버튼을 클릭합니다.</li>
+									</ul>
+								</li>
+							</ul>
+							<img src="/publish/images/popup/tw_popup/tw_con_05.jpg" alt="예약문자 발송하기" style="margin-bottom: 0;">
+						</div>
+					</div>
+				</div>
+				<!--// 이용방법/혜택 -->
 			</div>
 			<div class="popup_btn_wrap2" style="margin: 0 auto 30px auto;">
 				<button type="button" class="tooltip-close" data-focus="candidate_popup03-close"  data-focus-next="candidate_popup03">닫기</button>                      
 			</div>
 		</div>
-	</div><!--// 선거문자 이용안내 팝업 -->
+	</div>
+	<!--//선거 20건문자 이용안내 팝업 추가 -->
 	
 		<!-- 이벤트 잔여 캐시 정보 표시 팝업 -->
 	<div class="tooltip-wrap">
@@ -4072,7 +4079,7 @@ function getMjMsgSentListAll(pageNo) {
 	        <h2>20건 문자(수동문자) 전송</h2>
 	        <div class="election_btnWrap">
 	        	<button type="button" class="button2 info" onclick="infoPop('selectMsgDataView2');">발송규정</button>
-	        	<!-- <button type="button" class="button2 info" data-tooltip="candidate_popup03">사용안내</button> -->
+	        	<button type="button" class="button2 info" data-tooltip="candidate_popup03">사용안내</button>
 	        	<c:choose>
 	        		<c:when test="${empty LoginVO}">
 						<button type="button" class="btnType" onclick="javascript:fn_candidateLoginChk(); return false;"><i class="election_btn1"></i>후보자 등록</button>	        		

src/main/webapp/publish/css/popupLayer.css

@@ -1132,6 +1132,20 @@
 .toast_popup .title{font-size:16px;font-weight:500;color:#fff;line-height:1.5;}
 .toast_popup .btn_close{display:inline-block;width:20px;height:20px;background:url(/publish/images/icon_toast_close.png) no-repeat center center;}
 
+/*20건 문자(수동문자) 이용안내 팝업*/
+.tw_wrap .con .tw_title{padding: 0 0 10px 0;}
+.tw_wrap .tw_title01_icon{background-image: url(/publish/images/popup/tw_popup/title01_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title02_icon{background-image: url(/publish/images/popup/tw_popup/title02_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title03_icon{background-image: url(/publish/images/popup/tw_popup/title03_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title04_icon{background-image: url(/publish/images/popup/tw_popup/title04_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title05_icon{background-image: url(/publish/images/popup/tw_popup/title05_icon.png); width: 28px; height: 24px; margin: 2px 5px 0 0;}
+.tw_wrap .con .tw_con ul li{font-size: 17px; color: #222; font-weight: 500; line-height: 1.8;}
+.tw_wrap .con .tw_con ul .te{line-height: 1.4; text-indent: -10px; word-break: keep-all; margin: 0 0 10px 13px;}
+.tw_wrap .con .tw_con ul .sub_te{font-size: 16px; color: #666; font-weight: 400; line-height: 1.5; margin: -5px 0 0 11px;}
+.tw_wrap .con .tw_con .sub_li li{font-size: 16px; color: #666; font-weight: 400; line-height: 1.6; margin: 0 0 0 11px;}
+.tw_wrap .con .tw_con .li_02{margin: 10px 0 0 0;}
+.tw_wrap .con .tw_con img{width: 100%; margin: 22px 0 40px 0;}
+
 
 /* ie */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {