<%@ 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>문자연동(API) 소개</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="api_intro">
                        <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">
                                    <p class="step_title">STEP <span>01</span></p>
                                    <div class="step_con">
                                        <div class="icon"><img src="<c:url value='/publish/images/api_intro_cont/api_guide_01.jpg' />" alt="문자 API 신청 아이콘"></div>
                                        <dl>
                                            <dt>문자연동(API) 신청</dt>
                                            <dd>관리자 승인 후 사용 가능</dd>
                                        </dl>
                                    </div>    
                                </li>
                                <li class="guide">
                                    <p class="step_title">STEP <span>02</span></p>
                                    <div class="step_con">
                                        <div class="icon"><img src="<c:url value='/publish/images/api_intro_cont/api_guide_02.jpg' />" alt="관리자 승인 아이콘"></div>
                                        <dl>
                                            <dt>관리자 승인</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="<c:url value='/publish/images/api_intro_cont/api_guide_03.jpg' />" alt="아이피(IP) 등록 아이콘"></div>
                                        <dl>
<!--                                             <dt>아이피<span>(IP)</span> 등록</dt> -->
                                            <dt>아이피(IP) 등록</dt>
                                            <dd>문자연동(API)를 통해 문자 발송 서버 IP 등록</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="<c:url value='/publish/images/api_intro_cont/api_guide_04.jpg' />" alt="API 연동 아이콘"></div>
                                        <dl>
                                            <dt>API 연동</dt>
                                            <dd>API 사용 매뉴얼 및 샘플링을 통해 누구나 손쉽게 연동 가능</dd>
                                        </dt>
                                    </div>    
                                </li>                                
                            </ul>
                        </div>                          
                    </div>
                    <!--// 사용 절차 설명-->
                    <!--// 소개 내용-->  
                </div>   
		
	
	</div>
</div>
