<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<script language=javascript>
	$(document).ready(function() {

	});
</script>
<!-- content 영역 -->
<div class="inner">
	<!-- send top -->
	<div class="send_top">
		<c:import url="./top_tepMenu.jsp" />

		<!-- tab button -->
		<div class="api_guide_cont current">
			<div class="heading">
				<h2>연동 서비스 안내</h2>
			</div>

			<!--소개 내용-->
			<div class="api_visual_image">
				<img
					src="<c:url value='/publish/images/api_intro_cont/api_intro_visual.jpg' />"
					alt="문자연동(API)도 이제 '문자온!'' 별도의 프로그램 설치 없이 누구나 쉽고 편리하게 문자를 발송할 수 있습니다."
					usemap="#image-map">
				<map name="image-map">
					<area target="_self" alt="문자연동(API)신청하기" title="문자연동(API)신청하기"
						href="<c:out value='/web/api/appMgmt.do' />"
						coords="338,266,88,216" shape="rect">
				</map>
			</div>

			<div class="pay_tab_wrap">
				<ul class="tabType1">
					<li class="tab active"><button type="button"
							onclick="TabType5(this,'1');">문자</button></li>
					<li class="tab"><button type="button"
							onclick="TabType5(this,'2');">카카오톡</button></li>
				</ul>
			</div>

			<!--사용 절차 설명 -->
			<div class="api_intro api_guide current" id="tab5_1">
				<div class="title">
					<h3>문자 API 사용 절차</h3>
				</div>

				<div class="title-line">
					<div class="left-line"></div>
					<div class="right-line"></div>
				</div>

				<div class="con">
					<ul class="api_process_guide">
						<li class="guide">
							<a href="/web/user/sendNumberManage.do">
								<p class="step_title">
									STEP <span>01</span>
								</p>
								<div class="step_con">
									<div class="icon">
										<img src="/publish/images/api_intro_cont/api_guide_00.png"
											alt="문자 API 신청 아이콘">
									</div>
									<dl>
										<dt>발신번호 사전 등록</dt>
										<dd>
											발송에 필요한 발신번호<br>등록 필요
										</dd>
									</dl>
								</div>
							</a>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>02</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_01.jpg"
										alt="관리자 승인 아이콘">
								</div>
								<dl>
									<dt>문자 연동 API 신청</dt>
									<dd>관리자 승인 후 사용 가능</dd>
								</dl>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>03</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_02.jpg"
										alt="아이피(IP) 등록 아이콘">
								</div>
								<dl>
									<dt>관리자 승인</dt>
									<dd>승인 완료 시 문자 안내</dd>
								</dl>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>04</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_03.jpg"
										alt="API 연동 아이콘">
								</div>
								<dl>
									<dt>아이피(IP) 등록</dt>
									<dd>
										문자 API를 통해<br>문자 발송 서버 IP 등록
									</dd>
									</dt>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>05</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_04.jpg"
										alt="API 연동 아이콘">
								</div>
								<dl>
									<dt>API 연동</dt>
									<dd>
										API 사용 매뉴얼 및 샘플링을<br>통해 누구나 손쉽게 연동 가능
									</dd>
									</dt>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--// 사용 절차 설명-->


			<div class="api_intro api_guide kakao_intro" id="tab5_2">
				<div class="title">
					<h3>카카오톡 연동(API) 사용 절차</h3>
				</div>

				<div class="title-line">
					<div class="left-line"></div>
					<div class="right-line"></div>
				</div>

				<div class="con">
					<ul class="api_process_guide">
						<li class="guide">
							<a href="/web/user/sendNumberManage.do">
							<p class="step_title">
								STEP <span>01</span>
							</p>
								<div class="step_con">
									<div class="icon">
										<img src="/publish/images/api_intro_cont/api_guide_00.png"
											alt="문자 API 신청 아이콘">
									</div>
									<dl>
										<dt>발신프로필 사전 등록</dt>
										<dd>
											발송에 필요한 발신프로필<br>등록 필요
										</dd>
									</dl>
								</div>
							</a>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>02</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_01.jpg"
										alt="관리자 승인 아이콘">
								</div>
								<dl>
									<dt>
										카카오톡 연동<br>API 신청
									</dt>
									<dd>관리자 승인 후 사용 가능</dd>
								</dl>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>03</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_02.jpg"
										alt="아이피(IP) 등록 아이콘">
								</div>
								<dl>
									<dt>관리자 승인</dt>
									<dd>승인 완료 시 문자 안내</dd>
								</dl>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>04</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_03.jpg"
										alt="API 연동 아이콘">
								</div>
								<dl>
									<dt>아이피(IP) 등록</dt>
									<dd>
										카카오톡 API를 통해<br>문자 발송 서버 IP 등록
									</dd>
									</dt>
							</div>
						</li>
						<li class="guide">
							<p class="step_title">
								STEP <span>05</span>
							</p>
							<div class="step_con">
								<div class="icon">
									<img src="/publish/images/api_intro_cont/api_guide_04.jpg"
										alt="API 연동 아이콘">
								</div>
								<dl>
									<dt>API 연동</dt>
									<dd>
										API 사용 매뉴얼 및 샘플링을<br>통해 누구나 손쉽게 연동 가능
									</dd>
									</dt>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<!--// 소개 내용-->
		</div>


	</div>
</div>
