<%@ 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="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>
<%@ page import="itn.com.cmm.LoginVO" %>


<form id="bizForm" name="bizForm" method="post">
	<input type="hidden" id="menuTopTab" name="menuTopTab" value="tabIntro">
</form>

<div class="inner">
	<!-- send top -->
	<div class="send_top">
		<!-- tab button -->
		<%@include file="/WEB-INF/jsp/web/kakao/include/KaKaoAlimtalkTopMenuTap.jsp" %>
		<!--// tab button -->
	
	
		
		<div class="top_content kakao_intro_cont pay_tab_wrap current">
			<div class="heading">
				<h2>카카오톡 소개</h2>
			</div>
	
			<ul class="tabType1">
				<li class="tab active"><button type="button" onclick="contentTab(this,'1');">알림톡</button></li>
				<li class="tab"><button type="button" onclick="contentTab(this,'2');">브랜드메시지</button></li>
			</ul>
			
			<!-- 알림톡 소개 -->
			<div class="tab_content current" id="tab_content_1">
				<div class="kakao_intro">
					<div class="title">
						<h3>알림톡이란?</h3>
					</div>
		
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
		
					<div class="con">
						<!--설명-->
						<div class="intro">
							<img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
							<ul class="list">
								<li>
									<img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스  “알림톡”">
								</li>
								<li>
									<p>1</p>
									<p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
								</li>
								<li>
									<p>2</p>
									<p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
								</li>
								<li>
									<p>3</p>
									<p>
										<span>카톡 채널아이디를 추가하지 않은 이용자에게도</span>
										<br>전화번호만 있으면 메시지 전송 가능
									</p>
								</li>
								<li>
									<p>4</p>
									<p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
								</li>
								<li>
									<p>5</p>
									<p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
								</li>
								<li>
									<p>6</p>
									<p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
								</li>
							</ul>
						</div>
		
						<!--문자vs알림톡-->
						<div class="fight">
							<div class="line"></div>
							<div class="fight-title">
								<h4>문자 <span>VS</span> 알림톡</h4>
								<div class="circle"></div>
							</div>
							<div class="wrap">
								<div class="box box-01">
									<div class="fight-img">
										<p class="name">문자</p>
										<div class="icon">
											<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
											<p class="price">18원</p>
										</div>
									</div>
									<p class="vs">VS</p>
									<div class="fight-img kakao">
										<p class="name">알림톡</p>
										<div class="icon">
											<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
											<p class="price">6.9원</p>
										</div>
									</div>
									<div class="text">
										<p>문자 대비&nbsp;<span>65% 저렴</span></p>
									</div>
								</div>
								<div class="fight-line"></div>
								<div class="box box-02">
									<div class="fight-img">
										<p class="name">문자</p>
										<div class="icon">
											<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
											<p class="price">90Byte</p>
										</div>
									</div>
									<p class="vs">VS</p>
									<div class="fight-img kakao">
										<p class="name">알림톡</p>
										<div class="icon">
											<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
											<p class="price">1,000글자</p>
										</div>
									</div>
									<div class="text">
										<p>바이트(byte)에 관계없이&nbsp;<span>무조건 1,000자(한/영) 발송</span></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		
				<!--알림톡 활용 방법-->
				<div class="use">
					<div class="title">
						<h3>알림톡 활용 방법</h3>
					</div>
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
					<div class="tab-wrap">
						<ul class="tabs">
							<li class="tab-link current" data-tab="tab-1">금융/보험</li>
							<li class="tab-link" data-tab="tab-2">기관/단체</li>
							<li class="tab-link" data-tab="tab-3">여행</li>
							<li class="tab-link" data-tab="tab-4">예약/예매</li>
							<li class="tab-link" data-tab="tab-5">배송/배달</li>
							<li class="tab-link" data-tab="tab-6">안내/이벤트</li>
						</ul>
						<div id="tab-1" class="tab-content current">
							<img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험">
						</div>
						<div id="tab-2" class="tab-content">
							<img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체">
						</div>
						<div id="tab-3" class="tab-content">
							<img src="/publish/images/kakao_intro_cont/travel.png" alt="여행">
						</div>
						<div id="tab-4" class="tab-content">
							<img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약">
						</div>
						<div id="tab-5" class="tab-content">
							<img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달">
						</div>
						<div id="tab-6" class="tab-content">
							<img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트">
						</div>
					</div>
				</div>
				
				<!--서비스이용방법-->
				<div class="service">
					<div class="title">
						<h3>서비스 이용 방법</h3>
					</div>
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
					<div class="con first-line">
						<div class="service-01 common">
							<div class="step">
								<p>STEP <span>01</span></p>
							</div>
							<div class="text">
								<div class="btn">
									<a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
								</div>
								<div class="text-line"></div>
								<div class="type">
									<p>
										카카오톡 채널을 먼저 가입해주신 다음 <br>
										비즈니스 채널 전환 신청을 해주세요.
									</p>
									<p>
										※ 가입 후 카카오톡 채널 설정에서 <br>
										공개, 검색허용 설정을 하셔야 합니다.
									</p>
								</div>
								<div class="icon">
									<img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘">
								</div>
							</div>
						</div>
						<div class="service-02 common">
							<div class="step">
								<p>STEP <span>02</span></p>
							</div>
							<div class="text">
								<div class="btn">
	<%-- 								<a href="<c:url value='/web/mjon/kakao/profile/selectKaKaoProfileList.do'/>">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
									<a href="javascript:cntntBtnInfo('step02');">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
								</div>
								<div class="text-line"></div>
								<div class="type">
									<p>
										가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
										채널ID 등록 메뉴에 등록해주세요.
									</p>
								</div>
								<div class="icon">
									<img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘">
								</div>
							</div>
						</div>
					</div>
					<div class="con second-line">
						<div class="service-03 common">
							<div class="step">
								<p>STEP <span>03</span></p>
							</div>
							<div class="text">
								<div class="btn">
	<%-- 								<a href="<c:url value='/web/mjon/kakao/template/selectKaKaoTemplateList.do'/>">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
									<a href="javascript:cntntBtnInfo('step03');">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
								</div>
								<div class="text-line"></div>
								<div class="type">
									<p>
										알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
										대한 카카오의 승인이 반드시 필요합니다.
										템플릿을 작성하신 후 심사요청을 진행해주세요.
									</p>
									<p>
										※ 템플릿 승인까지 최대 3일 소요
									</p>
								</div>
								<div class="icon">
									<img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘">
								</div>
							</div>
						</div>
						<div class="service-04 common">
							<div class="step">
								<p>STEP <span>04</span></p>
							</div>
							<div class="text">
								<div class="btn">
									<a href="<c:url value='/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do'/>">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
								</div>
								<div class="text-line"></div>
								<div class="type">
									<p>
										템플릿이 승인되셨다면 문자온 알림톡을 <br>
										통해 메시지를 발송하실 수 있습니다.
									</p>
								</div>
								<div class="icon">
									<img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘">
								</div>
							</div>
						</div>
					</div>
					<!--이용가이드 버튼-->
					<div class="guide">
						<a href="https://kakaobusiness.gitbook.io/main/ad/bizmessage/notice-friend" target="_blank">알림톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
					</div>
				</div>
		
				<!--유의사항-->
				<div class="note">
					<div class="note-title">
						<p>
							<span>
								<img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘">
							</span>유의사항
						</p>
					</div>
					<ul>
						<li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
						<li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
						<li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
						<li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
						<li>
							<a href="/download/msg/K003_불법스팸_방지_안내서_제6차_개정판(수정_2024년).pdf" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
						</li>
						<li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
					</ul>
				</div>
			</div>
			<!-- // 알림톡 소개 -->
		
			<!-- 브랜드메시지 소개 -->
			<div class="tab_content friendtalk" id="tab_content_2">
				<div class="kakao_intro">
					<div class="title">
						<h3>브랜드메시지란?</h3>
					</div>
			
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
			
					<div class="con">
						<!--설명-->
						<div class="intro">
							<img class="phone" src="/publish/images/kakao_intro_cont/phone_friendtalk.png" alt="핸드폰">
			
							<ul class="list" style="width:57%;">
								<li>
									<img src="/publish/images/kakao_intro_cont/text_brandmsg.png" alt="카카오톡 전용 기업 메시지 서비스  “알림톡”">
								</li>
								<li>
                                    <p>1</p>
                                    <p><span>광고성 메시지</span> 발송 가능(광고 표기 및 수신거부 안내 포함)</p>
                                </li>
                                <li>
                                    <p>2</p>
                                    <p>채널 친구 추가된 사용자라면 <span>누구에게나</span> 발송 가능<strong>(타깃 설정 미지원)</strong></p>
                                </li>
                                <li>
                                    <p>3</p>
                                    <p>
                                        <span>1,000자 이내</span> 텍스트 및 <span>이미지</span> 전송 가능
                                    </p>
                                </li>
                                <li>
                                    <p>4</p>
                                    <p><span>맞춤형 메시지 및 쿠폰, 링크</span> 버튼 제공 가능</p>
                                </li>
                                <li>
                                    <p>5</p>
                                    <p>문자 메시지 대비 <span>저렴한</span> 단가</p>
                                </li>
                                <li>
                                    <p>6</p>
                                    <p>발송실패 시 <span>대체문자 발송</span> 기능 지원</p>
                                </li>
                                <li>
                                    <p>7</p>
                                    <p>클릭률/도달률 분석을 통한 <span>마케팅 효율 강화</span></p>
                                </li>
                                <li>
                                    <p>8</p>
                                    <p>브랜드 친화적인 <span>이미지 커스터마이징</span> 가능</p>
                                </li>
							</ul>
						</div>
			
						<!--문자vs알림톡-->
						<div class="fight">
							<div class="line"></div>
							<div class="fight-title">
								<h4>알림톡 <span>VS</span> 브랜드메시지</h4>
								<div class="circle"></div>
							</div>
			
							<div class="wrap">
								<div class="vs allimtalk_vs">
									<div class="title">알림톡</div>
									<div class="box">
										<ul>
											<li>전화번호 보유자</li>
											<li>정보성 <span>(예 : 주문, 예약, 안내 등)</span></li>
											<li>텍스트, 이미지 등</li>
											<li>최대 5개</li>
											<li>사전 승인 필요</li>
											<li>6.9원</li>
											<li>1,000자</li>
											<li>로고, 아이콘 형식만 가능</li>
										</ul>
									</div>
								</div>
			
								<div class="vs vs_title">
									<div class="title">VS</div>
									<ul>
										<li>전송대상</li>
										<li>발송목적</li>
										<li>메세지 형태</li>
										<li>버튼 사용</li>
										<li>템플릿 승인</li>
										<li>비용</li>
										<li>길이제한</li>
										<li>이미지</li>
									</ul>
								</div>
			
								<div class="vs friendtalk_vs">
									<div class="title">브랜드메시지</div>
									<div class="box">
										<ul>
											<li>채널 친구<span>(타깃 설정 미지원)</span></li>
                                            <li>광고 및 마케팅성<span>(예 : 이벤트, 쿠폰 등)</span></li>
                                            <li>텍스트, 기본이미지, 와이드 이미지형 등</li>
                                            <li>최대 5개</li>
                                            <li>별도 승인 없음 <span>야간 발송 제한(20:50 ~ 익일 08:00)</span></li>
                                            <li>20원</li>
                                            <li>1,000자</li>
                                            <li>가능</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			
				<!-- 친구톡 유형 -->
				<div class="use">
					<div class="title">
						<h3>브랜드메시지 유형</h3>
					</div>
			
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
			
					<ul class="friendtalk_use">
						<li>
							<div class="title">텍스트형</div>
							<img src="/publish/images/kakao_intro_cont/friendtalk_use1.png" alt="">
							<p class="explan_text">한/영 구분없이&nbsp;<span>1,000자</span>&nbsp;+ 버튼&nbsp;<span>최대 5개</span></p>
						</li>
						<li>
							<div class="title">기본 이미지형</div>
							<img src="/publish/images/kakao_intro_cont/friendtalk_use2.png" alt="">
							<p class="explan_text">한/영 구분없이 <span>400자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 5개</span></p>
						</li>
						<li>
							<div class="title">와이드 이미지형</div>
							<img src="/publish/images/kakao_intro_cont/friendtalk_use3.png" alt="">
							<p class="explan_text">한/영 구분없이 <span>76자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 1개</span></p>
						</li>
					</ul>
				</div>
			
				<!--서비스이용방법-->
				<div class="service">
					<div class="title">
						<h3>서비스 이용 방법</h3>
					</div>
			
					<div class="title-line">
						<div class="left-line"></div>
						<div class="right-line"></div>
					</div>
			
					<ul class="kakao_use_guide">
						<li class="guide_01">
							<div class="title">STEP <span>01</span></div>
							<i></i>
							<p class="guide_title">카카오톡 채널 가입</p>
							<span class="guide_info">카카오톡 채널 생성을 위한 <br> 계정이 없으시다면, 카카오에서 <br> 카카오톡 비즈니스 회원가입을<br> 먼저 진행해주세요.</span>
						</li>
						<li class="guide_02">
							<div class="title">STEP <span>02</span></div>
							<i></i>
							<p class="guide_title">채널 ID 등록하러 가기</p>
							<span class="guide_info">가입하신 카카오톡 채널의 채널 ID(채널이름)를 채널 ID 등록  메뉴에 등록해주세요.</span>
						</li>
						<li class="guide_03">
							<div class="title">STEP <span>03</span></div>
							<i></i>
							<p class="guide_title">브랜드메시지 전송</p>
							<span class="guide_info">브랜드메시지는 별도의 템플릿 심사 절차 없이, 즉시 발송 가능합니다.</span>
						</li>
					</ul>
			
					<!--이용가이드 버튼-->
					<div class="guide">
						<a href="https://kakaobusiness.gitbook.io/main/ad/brandmessage" target="_blank">브랜드메시지 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
					</div>
				</div>
			
				<!--유의사항-->
				<div class="note">
					<div class="note-title">
						<p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
					</div>
					<ul>
						<li>- 브랜드메시지에는 "(광고) 문구 및 수신거부 방식"이 자동으로 표시되며, 대체 문자 발송 시에는 “(광고) 문구 및 080 무료수신거부 번호”가 자동으로 적용됩니다.</li>
                        <li><b>- 광고성 메시지의 발송 가능 시간은 08:00 ~ 20:50(한국시간) 입니다.</b></li>
                        <li>- 브랜드메시지 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
                        <li>- 카카오정책 및 심의기준을 반드시 준수하여야 합니다.</li>
					</ul>
				</div>
			</div>
			<!-- // 브랜드메시지 소개 -->

		</div>
	</div>
</div>
<!--// send top -->