Commit @2dfb2fed27a47da8f5c2fc22b337b26fc3e80f6d

정수빈 2025-07-09

카톡발송 > 카카오톡 소개 > 친구톡 소개 추가

@2dfb2fed27a47da8f5c2fc22b337b26fc3e80f6d

4feb34d

2dfb2fe

src/main/webapp/publish/css/content.css

--- src/main/webapp/publish/css/content.css

+++ src/main/webapp/publish/css/content.css


 .kakao_intro_cont .note .note-title p span{padding-right: 10px;}
 /*유의사항_목록*/
 .kakao_intro_cont .note ul{line-height: 26px; font-weight: 300; font-size: 16px; color: #666; background-color: #fff; border-radius: 10px; padding: 25px 53px;}
-.kakao_intro_cont .note ul li:nth-child(4){font-size: 15px; color: #999; padding-left: 10px; margin-top: -3px;}
-.kakao_intro_cont .note ul li:nth-child(5){font-weight: 400; font-size: 14px; color: #fff; margin: 3px 0 7px 10px; background-color: #002c9a; width: 260px; height: 32px; line-height: 31px; text-align: center; border-radius: 5px;} 
-.kakao_intro_cont .note ul li:nth-child(5):hover{box-shadow: 0 0 8px rgba(0,0,0,0.5);}
+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(4){font-size: 15px; color: #999; padding-left: 10px; margin-top: -3px;}
+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(5){font-weight: 400; font-size: 14px; color: #fff; margin: 3px 0 7px 10px; background-color: #002c9a; width: 260px; height: 32px; line-height: 31px; text-align: center; border-radius: 5px;} 
+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(5):hover{box-shadow: 0 0 8px rgba(0,0,0,0.5);}
+
+/* 친구톡 소개 */
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li:nth-child(1){margin:0 0 45px 0;}
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li{margin:0 0 19px 0;}
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2){display:flex;line-height:1;height:auto;justify-content:center;align-items:center;padding:22px 0 18px 0;font-family:'GmarketSansMedium';}
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2) span{display:inline-block;font-family:'GmarketSansBold';margin:0 4px;}
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li:nth-child(4) p:nth-child(2){height:auto;line-height:1;padding:24px 0 18px 0;}
+.kakao_intro_cont .friendtalk .kakao_intro .con .intro .phone{width:auto;height:100%;margin:-20px 0 0 -15px;}
+
+.kakao_intro_cont .friendtalk .kakao_intro .fight .wrap{max-width:1024px;gap:50px;justify-content:center;}
+.kakao_intro_cont .friendtalk .kakao_intro .con .fight .fight-title{width:250px;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs{display:flex;width:calc((100% - 200px) / 2);flex-direction:column;align-items:center;gap:20px;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title{width:100px;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs .title{height:34px;padding:5px 30px 3px;border-radius:35px;background:#E4E6EA;font-family:'GmarketSansBold';color:#666;font-size:20px;line-height:35px;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title ul{padding:20px 0;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title .title{background:transparent;font-family:'GmarketSansMedium';}
+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title ul li{background:transparent;font-family:'GmarketSansMedium';}
+.kakao_intro_cont .friendtalk .kakao_intro .fight .vs .box{display:flex;width:100%;padding:20px;background:#fff;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,0.1);align-items:center;flex-direction:column;box-sizing:border-box;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs ul li{display:flex;height:51px;margin:4px 0;font-size:20px;font-family:'GmarketSansBold';color:#666;letter-spacing:-.85px;text-align:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;}
+.kakao_intro_cont .friendtalk .kakao_intro .vs .box ul li span{display:block;width:100%;font-size:16px;font-weight:400;margin:-10px 0 0 0;}
+
+.kakao_intro_cont .friendtalk .kakao_intro .friendtalk_vs .title{background:#ffcc33;color:#222;}
+.kakao_intro_cont .friendtalk .friendtalk_vs .box{border:1px solid #222;}
+.kakao_intro_cont .friendtalk .friendtalk_vs .box ul li{color:#222;}
+.kakao_intro_cont .friendtalk .friendtalk_vs .box ul li span{color:#666;}
+
+.friendtalk_use{display:flex;max-width:1024px;margin:50px 0;justify-content:space-between;}
+.friendtalk_use li{text-align:center;width:calc((1024px / 3) - 20px);}
+.friendtalk_use .title{display:inline-flex;height:43px;font-size:20px;font-weight:bold;color:#002c9a;text-align:center;background:#fff;padding:0 23px;margin:0 auto 20px auto;border:2px solid #002c9a;border-radius:35px;justify-content:center;align-items:center;}
+.friendtalk_use img{margin:0 0 20px 0;}
+.friendtalk_use .explan_text{display:table-cell;width:100%;height:100px;line-height:1.4;padding:0 20px;background:#fff;border-radius:10px;box-sizing:border-box;vertical-align:middle;}
+.friendtalk_use li:first-child .explan_text{display:flex;align-items:center;justify-content:center;}
+.friendtalk_use .explan_text span{font-weight:bold;}
+
+.friendtalk .service .kakao_use_guide{display: flex; margin: 50px 0; gap: 30px;}
+.friendtalk .service .kakao_use_guide li{position: relative; display:flex; width: calc((100% - 60px)/3); background-color: #fff; border-radius: 20px; padding: 0 0 30px 0; text-align: center; overflow: hidden;flex-direction: column;gap: 20px;}
+.friendtalk .service .kakao_use_guide .title{display:flex;width:100%;height:50px;font-size:19px;background:#002c9a;color:#fff;justify-content:center;align-items:center;letter-spacing:1px;}
+.friendtalk .service .kakao_use_guide .title span{font-weight:bold;font-size:22px;}
+.friendtalk .service .kakao_use_guide li i{display: block; width: 128px; height: 128px; margin: 10px auto 10px auto; background-color: #F3F6FB; border-radius: 100%; background-repeat: no-repeat; background-position: center;}
+.friendtalk .service .kakao_use_guide li.guide_01 i{background-image: url(/publish/images/content/icon_kakao_guide01.png);}
+.friendtalk .service .kakao_use_guide li.guide_02 i{background-image: url(/publish/images/content/icon_kakao_guide02.png);}
+.friendtalk .service .kakao_use_guide li.guide_03 i{background-image: url(/publish/images/content/icon_kakao_guide04.png);}
+.friendtalk .service .kakao_use_guide li .guide_title{font-family: 'GmarketSansBold'; font-size: 24px;}
+.friendtalk .service .kakao_use_guide li .guide_info{display: block; height: 120px;  font-size: 18px; font-weight: 300; color: #444; line-height: 1.3; padding: 0 20px;}
+
+.kakao_intro_cont .friendtalk .note b{font-weight:400;color:#e40000;}
+
 
 /* api - 소개 */
 .send_top .api_guide_cont {background-color: #fff;padding: 30px 40px;border-radius: 10px;}

 	.kakao_intro_cont .service .con .service-03 .text .icon img{margin-top: 24px;}
 	.kakao_intro_cont .service .con .service-04 .text .icon img{margin-top: 24px;}
 
+	/* 친구톡 소개 */
+	.kakao_intro_cont .friendtalk .kakao_intro .con .intro{gap:30px;}
+	.kakao_intro_cont .friendtalk .kakao_intro .con .intro .phone{width:42%;height:auto;}
+	.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2){font-size:18px;;}
+	.kakao_intro_cont .friendtalk .kakao_intro .vs ul li{font-size:18px;}
+	.kakao_intro_cont .friendtalk .kakao_intro .vs .box ul li span{font-size:14px;}
+	.friendtalk_use{gap:20px;}
+	.friendtalk_use .title{height:36px;font-size:16px;}
+	.friendtalk_use img{width:100%;}
+	.friendtalk_use li:first-child .explan_text{white-space:nowrap;}
+
+	.friendtalk .service .kakao_use_guide .title{font-size:16px;}
+	.friendtalk .service .kakao_use_guide .title span{font-size:20px;}
+	.friendtalk .service .kakao_use_guide li .guide_title{font-size:22px;}
+	.friendtalk .service .kakao_use_guide li .guide_info{font-size:16px;}
+	.kakao_intro_cont .service .guide a{font-size: 20px;}
+
 	/*발송결과_select버튼*/
 	.select_btnWrap .btn_right .search .send_text{width: 170px;}
 	

2dfb2fe

src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use1.png (Binary) (added)

+++ src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use1.png

Binary file is not shown

2dfb2fe

src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use2.png (Binary) (added)

+++ src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use2.png

Binary file is not shown

2dfb2fe

src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use3.png (Binary) (added)

+++ src/main/webapp/publish/images/kakao_intro_cont/friendtalk_use3.png

Binary file is not shown

2dfb2fe

src/main/webapp/publish/images/kakao_intro_cont/phone_friendtalk.png (Binary) (added)

+++ src/main/webapp/publish/images/kakao_intro_cont/phone_friendtalk.png

Binary file is not shown

2dfb2fe

src/main/webapp/publish/images/kakao_intro_cont/text_friendtalk.png (Binary) (added)

+++ src/main/webapp/publish/images/kakao_intro_cont/text_friendtalk.png

Binary file is not shown

4feb34d

2dfb2fe

src/main/webapp/publish/kakao_allimtalk_intro.html

--- src/main/webapp/publish/kakao_allimtalk_intro.html

+++ src/main/webapp/publish/kakao_allimtalk_intro.html

...	...	@@ -23,161 +23,7 @@
23	23	</head>
24	24
25	25	<body>
26		- <div class="skip_menu">
27		- <a href="#cont" title="본문 바로가기" class="contGo">본문 바로가기</a>
28		- </div>
29		- <!--// skip 메뉴 -->
30		- <!-- quick 메뉴 -->
31		- <div class="quickMenu">
32		- <div>
33		- <p class="quick_title">QUICK<br>MENU</p>
34		- <p class="quick_title2">QUICK</p>
35		- <ul class="quickMenuIn">
36		- <li>
37		- <a href="/publish/index.html"><i class="quick1"></i><span>이용안내</span></a>
38		- <div class="hover_cont">이용안내</div>
39		- </li>
40		- <li>
41		- <a href="#"><i class="quick2"></i><span>채 팅상담</span></a>
42		- <div class="hover_cont">채팅상담</div>
43		- </li>
44		- <li>
45		- <a href="#"><i class="quick3"></i><span>원격지원</span></a>
46		- <div class="hover_cont">원격지원</div>
47		- </li>
48		- <li>
49		- <a href="#"><i class="quick4"></i><span>맞춤제작</span></a>
50		- <div class="hover_cont">맞춤제작</div>
51		- </li>
52		- <li>
53		- <a href="#"><i class="quick5"></i><span>주소록 등록</span></a>
54		- <div class="hover_cont">주소록 등록</div>
55		- </li>
56		- <li>
57		- <a href="#"><i class="quick6"></i><span>엑셀 전송</span></a>
58		- <div class="hover_cont">엑셀 대량전송</div>
59		- </li>
60		- <li>
61		- <a href="#"><i class="quick7"></i><span>견적서</span></a>
62		- <div class="hover_cont">견적서</div>
63		- </li>
64		- <li>
65		- <a href="#"><i class="quick8"></i><span>결제</span></a>
66		- <div class="hover_cont">결제</div>
67		- </li>
68		- <li>
69		- <a href="#"><i class="quick9"></i><span>영수증/계산서</span></a>
70		- <div class="hover_cont">영수증/계산서</div>
71		- </li>
72		- </ul>
73		- <button type="button" class="goTop" title="맨 위로 이동">TOP<i></i></button>
74		- </div>
75		- </div>
76		- <!--// quick 메뉴 -->
77		- <!-- header 영역 -->
78		- <header id="header" class="header sub ">
79		- <!-- header top 영역 -->
80		- <div class="header_top">
81		- <div class="inner">
82		- <ul class="menu_left">
83		- <li><a href="#"><i class="hdTop_fav"></i>즐겨찾기추가</a></li>
84		- <li><a href="#"><i class="hdTop_mypage"></i>마이페이지</a></li>
85		- <li><a href="#"><i class="hdTop_center"></i>고객센터</a></li>
86		- </ul>
87		- <ul class="menu_right">
88		- <li><a href="#">충전하기</a></li>
89		- <li class="SortLine"><a href="#">요금안내</a></li>
90		- <li class="SortLine"><a href="#">이용안내</a></li>
91		- <li class="SortLine"><a href="#">1:1고객상담</a></li>
92		- </ul>
93		- </div>
94		- </div><!-- header top 영역 -->
95		- <!-- header body 영역 -->
96		- <div class="header_body">
97		- <div class="inner table">
98		- <h1 class="logo"><a href="/publish/index.html" alt="문자온 메인 바로가기"><img src="/publish/images/CI.png"
99		- alt="문자온 CI"></a></h1>
100		- <ul class="gnbWrap table_cell">
101		- <li><a href="#">문자발송</a></li>
102		- <li><a href="#">선거문자</a></li>
103		- <li><a href="#">맞춤제작</a></li>
104		- <li><a href="#">비즈톡</a></li>
105		- <li><a href="#">주소록 관리</a></li>
106		- <li><a href="#">발송결과</a></li>
107		- <li><a href="#">예약관리</a></li>
108		- <li><a href="#">결제내역</a></li>
109		- </ul>
110		- <div class="s_menu">
111		- <i class="allSearch_info"><span>문자검색</span></i>
112		- <button type="button" title="전체검색" class="allSearch" onclick="searchToggle();"><img
113		- src="/publish/images/search.png" alt="검색영역 열기" class="allMenu"></button>
114		- <button type="button" title="전체메뉴"><img src="/publish/images/all_menu.png" alt="전체메뉴 열기"></button>
115		- </div>
116		- </div>
117		- <!-- search popup 영역 -->
118		- <div class="pop_search">
119		- <div class="inner">
120		- <div class="area_search">
121		- <select name="" id="">
122		- <option value="">그림문자</option>
123		- <option value="">단문문자</option>
124		- <option value="">장문문자</option>
125		- <option value="">GIF</option>
126		- </select>
127		- <input type="text" placeholder="문자샘플 검색하기">
128		- <button><img src="/publish/images/search02.png" alt=""></button>
129		- </div>
130		- <div class="area_popular">
131		- <p><i></i>인기검색어</p>
132		- <ul class="popular_tag">
133		- <li><a href="#">#정월대보름</a></li>
134		- <li class="on"><a href="#">#추석</a></li>
135		- <li><a href="#">#가을인사</a></li>
136		- <li><a href="#">#좋은하루</a></li>
137		- </ul>
138		- </div>
139		- <button class="btn_close" onclick="searchToggle();"><img src="/publish/images/btn_searchclose.png"
140		- alt=""></button>
141		- </div>
142		- </div>
143		- <!--// search popup 영역 -->
144		- </div>
145		- <!--// header body 영역 -->
146		- <div id="login" class="login">
147		- <div class="inner table">
148		- <div class="login_left table_cell">
149		- <div class="login_put">
150		- <label for="id_text" class="label"></label>
151		- <input type="text" placeholder="아이디를 입력해주세요" id="id_text" class="id_text" maxlength="30"
152		- size="18">
153		- <label for="password_text" class="label"></label>
154		- <input type="password" placeholder="비밀번호를 입력해주세요" id="password_text" class="password_text"
155		- maxlength="30" size="18">
156		- <label for="login_button" class="label"></label>
157		- <button type="submit" class="btnType btnType1" class="login_button">로그인</button>
158		- </div>
159		- <div class="login_save">
160		- <input type="checkbox" id="save_id">
161		- <label for="save_id">아이디 저장</label>
162		- </div>
163		- <div class="login_find">
164		- <a href="#">아이디찾기 /</a>
165		- <a href="#">비밀번호 찾기</a>
166		- </div>
167		- <div>
168		- <button type="button" class="btnType btnType2">회원가입</button>
169		- <button type="button" class="btnType btnType3">둘러보기</button>
170		- </div>
171		- </div>
172		- <div class="login_right">
173		- <span><i></i>이달의 이벤트</span>
174		- <button type="button" class="btnType btnType4">바로가기</button>
175		- </div>
176		- </div>
177		- </div>
178		- <!--// login 영역 -->
179		- </header>
180		- <!--// header 영역 -->
	26	+ <div data-include-path="/publish/layout/_header.html"></div>
181	27	<!-- login 영역 -->
182	28	<!-- content 영역 -->
183	29	<div id="container" class="cont sub">
...	...	@@ -186,295 +32,510 @@
186	32	<div class="send_top">
187	33	<!-- tab button -->
188	34	<ul class="tabType4">
189		- <li class="tab"><button type="button" onclick="location.href='/publish/kakao_allimtalk_send.html'">알림톡</button></li>
	35	+ <li class="tab"><button type="button" onclick="location.href='/publish/kakao_allimtalk_send.html'">알림톡</button></li>
190	36	<li class="tab"><button type="button" onclick="TabType5(this,'2');">친구톡</button></li>
191	37	<li class="tab"><button type="button" onclick="location.href='/publish/kakao_use_guide.html'">카카오톡 설정</button></li>
192		- <li class="tab active"><button type="button" onclick="TabType5(this,'4');">알림톡 소개</button></li>
	38	+ <li class="tab active"><button type="button" onclick="TabType5(this,'4');">카카오톡 소개</button></li>
193	39	</ul>
194	40	<!--// tab button -->
195		-
196		- <div class="top_content kakao_intro_cont current">
	41	+
	42	+ <div class="top_content kakao_intro_cont pay_tab_wrap current">
197	43	<div class="heading">
198		- <h2>알림톡 소개</h2>
	44	+ <h2>카카오톡 소개</h2>
199	45	</div>
200	46
201		- <div class="kakao_intro">
202		- <div class="title">
203		- <h3>알림톡이란?</h3>
	47	+ <ul class="tabType1">
	48	+ <li class="tab active"><button type="button" onclick="contentTab(this,'1');">알림톡</button></li>
	49	+ <li class="tab"><button type="button" onclick="contentTab(this,'2');">친구톡</button></li>
	50	+ </ul>
	51	+
	52	+ <!-- 알림톡 소개 -->
	53	+ <div class="tab_content current" id="tab_content_1">
	54	+ <div class="kakao_intro">
	55	+ <div class="title">
	56	+ <h3>알림톡이란?</h3>
	57	+ </div>
	58	+
	59	+
	60	+ <div class="title-line">
	61	+ <div class="left-line"></div>
	62	+ <div class="right-line"></div>
	63	+ </div>
	64	+
	65	+ <div class="con">
	66	+ <!--설명-->
	67	+ <div class="intro">
	68	+ <img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
	69	+ <!--<div class="text">
	70	+ <p>카카오톡 전용 기업 메시지 서비스<span>"알림톡"</span></p>
	71	+ <img src="./images/kakao_intro_cont/on.png" alt="on이미지">
	72	+ </div>-->
	73	+
	74	+ <ul class="list">
	75	+ <li>
	76	+ <img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
	77	+ </li>
	78	+ <li>
	79	+ <p>1</p>
	80	+ <p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
	81	+ </li>
	82	+ <li>
	83	+ <p>2</p>
	84	+ <p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
	85	+ </li>
	86	+ <li>
	87	+ <p>3</p>
	88	+ <p>
	89	+ <span>카톡 채널아이디를 추가하지 않은 이용자에게도</span><br>
	90	+ 전화번호만 있으면 메시지 전송 가능
	91	+ </p>
	92	+ </li>
	93	+ <li>
	94	+ <p>4</p>
	95	+ <p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
	96	+ </li>
	97	+ <li>
	98	+ <p>5</p>
	99	+ <p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
	100	+ </li>
	101	+ <li>
	102	+ <p>6</p>
	103	+ <p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
	104	+ </li>
	105	+ </ul>
	106	+ </div>
	107	+
	108	+ <!--문자vs알림톡-->
	109	+ <div class="fight">
	110	+ <div class="line"></div>
	111	+ <div class="fight-title">
	112	+ <h4>문자 <span>VS</span> 알림톡</h4>
	113	+ <div class="circle"></div>
	114	+ </div>
	115	+
	116	+ <div class="wrap">
	117	+ <div class="box box-01">
	118	+ <div class="fight-img">
	119	+ <p class="name">문자</p>
	120	+ <div class="icon">
	121	+ <img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
	122	+ <p class="price">18원</p>
	123	+ </div>
	124	+ </div>
	125	+ <p class="vs">VS</p>
	126	+ <div class="fight-img kakao">
	127	+ <p class="name">알림톡</p>
	128	+ <div class="icon">
	129	+ <img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
	130	+ <p class="price">6.9원</p>
	131	+ </div>
	132	+ </div>
	133	+ <div class="text">
	134	+ <p>문자 대비 <span>65% 저렴</span></p>
	135	+ </div>
	136	+ </div>
	137	+ <div class="fight-line"></div>
	138	+ <div class="box box-02">
	139	+ <div class="fight-img">
	140	+ <p class="name">문자</p>
	141	+ <div class="icon">
	142	+ <img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
	143	+ <p class="price">90Byte</p>
	144	+ </div>
	145	+ </div>
	146	+ <p class="vs">VS</p>
	147	+ <div class="fight-img kakao">
	148	+ <p class="name">알림톡</p>
	149	+ <div class="icon">
	150	+ <img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
	151	+ <p class="price">1,000글자</p>
	152	+ </div>
	153	+ </div>
	154	+ <div class="text">
	155	+ <p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
	156	+ </div>
	157	+ </div>
	158	+ </div>
	159	+ <!-- <div class="fight-text-wrap">
	160	+ <div class="text">
	161	+ <p>문자 대비 <span>75% 저렴</span></p>
	162	+ </div>
	163	+ <div class="text">
	164	+ <p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
	165	+ </div>
	166	+ </div> -->
	167	+ </div>
	168	+ </div>
204	169	</div>
205	170
206		- <div class="title-line">
207		- <div class="left-line"></div>
208		- <div class="right-line"></div>
209		- </div>
	171	+ <!--알림톡 활용 방법-->
	172	+ <div class="use">
	173	+ <div class="title">
	174	+ <h3>알림톡 활용 방법</h3>
	175	+ </div>
210	176
211		- <div class="con">
212		- <!--설명-->
213		- <div class="intro">
214		- <img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
215		- <!--<div class="text">
216		- <p>카카오톡 전용 기업 메시지 서비스<span>"알림톡"</span></p>
217		- <img src="./images/kakao_intro_cont/on.png" alt="on이미지">
218		- </div>-->
219		-
220		- <ul class="list">
221		- <li>
222		- <img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
223		- </li>
224		- <li>
225		- <p>1</p>
226		- <p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
227		- </li>
228		- <li>
229		- <p>2</p>
230		- <p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
231		- </li>
232		- <li>
233		- <p>3</p>
234		- <p>
235		- <span>카톡 채널아이디를 추가하지 않은 이용자에게도</span><br>
236		- 전화번호만 있으면 메시지 전송 가능
237		- </p>
238		- </li>
239		- <li>
240		- <p>4</p>
241		- <p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
242		- </li>
243		- <li>
244		- <p>5</p>
245		- <p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
246		- </li>
247		- <li>
248		- <p>6</p>
249		- <p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
250		- </li>
	177	+ <div class="title-line">
	178	+ <div class="left-line"></div>
	179	+ <div class="right-line"></div>
	180	+ </div>
	181	+
	182	+ <div class="tab-wrap">
	183	+ <ul class="tabs">
	184	+ <li class="tab-link current" data-tab="tab-1">금융/보험</li>
	185	+ <li class="tab-link" data-tab="tab-2">기관/단체</li>
	186	+ <li class="tab-link" data-tab="tab-3">여행</li>
	187	+ <li class="tab-link" data-tab="tab-4">예약/예매</li>
	188	+ <li class="tab-link" data-tab="tab-5">배송/배달</li>
	189	+ <li class="tab-link" data-tab="tab-6">안내/이벤트</li>
251	190	</ul>
	191	+
	192	+ <div id="tab-1" class="tab-content current"><img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험"></div>
	193	+ <div id="tab-2" class="tab-content"><img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체"></div>
	194	+ <div id="tab-3" class="tab-content"><img src="/publish/images/kakao_intro_cont/travel.png" alt="여행"></div>
	195	+ <div id="tab-4" class="tab-content"><img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약"></div>
	196	+ <div id="tab-5" class="tab-content"><img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달"></div>
	197	+ <div id="tab-6" class="tab-content"><img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트"></div>
252	198	</div>
253	199
254		- <!--문자vs알림톡-->
255		- <div class="fight">
256		- <div class="line"></div>
257		- <div class="fight-title">
258		- <h4>문자 <span>VS</span> 알림톡</h4>
259		- <div class="circle"></div>
260		- </div>
	200	+ </div>
261	201
262		- <div class="wrap">
263		- <div class="box box-01">
264		- <div class="fight-img">
265		- <p class="name">문자</p>
266		- <div class="icon">
267		- <img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
268		- <p class="price">18원</p>
269		- </div>
270		- </div>
271		- <p class="vs">VS</p>
272		- <div class="fight-img kakao">
273		- <p class="name">알림톡</p>
274		- <div class="icon">
275		- <img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
276		- <p class="price">6.9원</p>
277		- </div>
278		- </div>
279		- <div class="text">
280		- <p>문자 대비 <span>65% 저렴</span></p>
281		- </div>
	202	+ <!--서비스이용방법-->
	203	+ <div class="service">
	204	+ <div class="title">
	205	+ <h3>서비스 이용 방법</h3>
	206	+ </div>
	207	+
	208	+ <div class="title-line">
	209	+ <div class="left-line"></div>
	210	+ <div class="right-line"></div>
	211	+ </div>
	212	+
	213	+ <div class="con first-line">
	214	+ <div class="service-01 common">
	215	+ <div class="step">
	216	+ <p>STEP <span>01</span></p>
282	217	</div>
283		- <div class="fight-line"></div>
284		- <div class="box box-02">
285		- <div class="fight-img">
286		- <p class="name">문자</p>
287		- <div class="icon">
288		- <img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
289		- <p class="price">90Byte</p>
290		- </div>
	218	+ <div class="text">
	219	+ <div class="btn">
	220	+ <a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
291	221	</div>
292		- <p class="vs">VS</p>
293		- <div class="fight-img kakao">
294		- <p class="name">알림톡</p>
295		- <div class="icon">
296		- <img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
297		- <p class="price">1,000글자</p>
298		- </div>
	222	+ <div class="text-line"></div>
	223	+ <div class="type">
	224	+ <p>
	225	+ 카카오톡 채널을 먼저 가입해주신 다음 <br>
	226	+ 비즈니스 채널 전환 신청을 해주세요.
	227	+ </p>
	228	+ <p>
	229	+ ※ 가입 후 카카오톡 채널 설정에서 <br>
	230	+ 공개, 검색허용 설정을 하셔야 합니다.
	231	+ </p>
299	232	</div>
300		- <div class="text">
301		- <p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
302		- </div>
	233	+ <div class="icon"><img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘"></div>
303	234	</div>
304	235	</div>
305		- <!-- <div class="fight-text-wrap">
306		- <div class="text">
307		- <p>문자 대비 <span>75% 저렴</span></p>
	236	+ <div class="service-02 common">
	237	+ <div class="step">
	238	+ <p>STEP <span>02</span></p>
308	239	</div>
309	240	<div class="text">
310		- <p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
	241	+ <div class="btn">
	242	+ <a href="#">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
	243	+ </div>
	244	+ <div class="text-line"></div>
	245	+ <div class="type">
	246	+ <p>
	247	+ 가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
	248	+ 채널ID 등록 메뉴에 등록해주세요.
	249	+ </p>
	250	+ </div>
	251	+ <div class="icon"><img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘"></div>
311	252	</div>
312		- </div> -->
	253	+ </div>
313	254	</div>
	255	+
	256	+ <div class="con second-line">
	257	+ <div class="service-03 common">
	258	+ <div class="step">
	259	+ <p>STEP <span>03</span></p>
	260	+ </div>
	261	+ <div class="text">
	262	+ <div class="btn">
	263	+ <a href="#">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
	264	+ </div>
	265	+ <div class="text-line"></div>
	266	+ <div class="type">
	267	+ <p>
	268	+ 알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
	269	+ 대한 카카오의 승인이 반드시 필요합니다.
	270	+ 템플릿을 작성하신 후 심사요청을 진행해주세요.
	271	+ </p>
	272	+ <p>
	273	+ ※ 템플릿 승인까지 최대 3일 소요
	274	+ </p>
	275	+ </div>
	276	+ <div class="icon"><img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘"></div>
	277	+ </div>
	278	+ </div>
	279	+ <div class="service-04 common">
	280	+ <div class="step">
	281	+ <p>STEP <span>04</span></p>
	282	+ </div>
	283	+ <div class="text">
	284	+ <div class="btn">
	285	+ <a href="#">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
	286	+ </div>
	287	+ <div class="text-line"></div>
	288	+ <div class="type">
	289	+ <p>
	290	+ 템플릿이 승인되셨다면 문자온 알림톡을 <br>
	291	+ 통해 메시지를 발송하실 수 있습니다.
	292	+ </p>
	293	+ </div>
	294	+ <div class="icon"><img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘"></div>
	295	+ </div>
	296	+ </div>
	297	+ </div>
	298	+
	299	+ <!--이용가이드 버튼-->
	300	+ <div class="guide">
	301	+ <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>
	302	+ </div>
	303	+ </div>
	304	+
	305	+ <!--유의사항-->
	306	+ <div class="note">
	307	+ <div class="note-title">
	308	+ <p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
	309	+ </div>
	310	+ <ul>
	311	+ <li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
	312	+ <li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
	313	+ <li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
	314	+ <li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
	315	+ <li>
	316	+ <a href="https://spam.kisa.or.kr/common/nttFileDownload.do?fileKey=f3de0346e5010755186576fa45b37be2" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
	317	+ </li>
	318	+ <li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
	319	+ </ul>
314	320	</div>
315	321	</div>
	322	+ <!-- // 알림톡 소개 -->
316	323
317		- <!--알림톡 활용 방법-->
318		- <div class="use">
319		- <div class="title">
320		- <h3>알림톡 활용 방법</h3>
	324	+ <!-- 친구톡 소개 -->
	325	+ <div class="tab_content friendtalk" id="tab_content_2">
	326	+ <div class="kakao_intro">
	327	+ <div class="title">
	328	+ <h3>친구톡이란?</h3>
	329	+ </div>
	330	+
	331	+
	332	+ <div class="title-line">
	333	+ <div class="left-line"></div>
	334	+ <div class="right-line"></div>
	335	+ </div>
	336	+
	337	+ <div class="con">
	338	+ <!--설명-->
	339	+ <div class="intro">
	340	+ <img class="phone" src="/publish/images/kakao_intro_cont/phone_friendtalk.png" alt="핸드폰">
	341	+
	342	+ <ul class="list">
	343	+ <li>
	344	+ <img src="/publish/images/kakao_intro_cont/text_friendtalk.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
	345	+ </li>
	346	+ <li>
	347	+ <p>1</p>
	348	+ <p><span>광고성 메시지</span> 발송 가능(광고 표기 및 수신거부 안내 포함)</p>
	349	+ </li>
	350	+ <li>
	351	+ <p>2</p>
	352	+ <p>채널 친구 추가된 사용자라면 <span>누구에게나</span> 발송 가능</p>
	353	+ </li>
	354	+ <li>
	355	+ <p>3</p>
	356	+ <p>
	357	+ <span>1,000자 이내</span> 텍스트 및 <span>이미지</span> 전송 가능
	358	+ </p>
	359	+ </li>
	360	+ <li>
	361	+ <p>4</p>
	362	+ <p><span>맞춤형 메시지 및 쿠폰, 링크</span> 버튼 제공 가능</p>
	363	+ </li>
	364	+ <li>
	365	+ <p>5</p>
	366	+ <p>문자 메시지 대비 <span>O % 이상</span> 저렴</p>
	367	+ </li>
	368	+ <li>
	369	+ <p>6</p>
	370	+ <p>발송실패 시 <span>대체문자 발송</span> 기능 지원</p>
	371	+ </li>
	372	+ <li>
	373	+ <p>7</p>
	374	+ <p>클릭률/도달률 분석을 통한 <span>마케팅 효율 강화</span></p>
	375	+ </li>
	376	+ <li>
	377	+ <p>8</p>
	378	+ <p>브랜드 친화적인 <span>이미지 커스터마이징</span> 가능</p>
	379	+ </li>
	380	+ </ul>
	381	+ </div>
	382	+
	383	+ <!--문자vs알림톡-->
	384	+ <div class="fight">
	385	+ <div class="line"></div>
	386	+ <div class="fight-title">
	387	+ <h4>알림톡 <span>VS</span> 친구톡</h4>
	388	+ <div class="circle"></div>
	389	+ </div>
	390	+
	391	+ <div class="wrap">
	392	+ <div class="vs allimtalk_vs">
	393	+ <div class="title">알림톡</div>
	394	+ <div class="box">
	395	+ <ul>
	396	+ <li>전화번호 보유자</li>
	397	+ <li>정보성 <span>(예 : 주문, 예약, 안내 등)</span></li>
	398	+ <li>텍스트, 이미지 등</li>
	399	+ <li>최대 5개</li>
	400	+ <li>사전 승인 필요</li>
	401	+ <li>6.9원</li>
	402	+ <li>1,000자</li>
	403	+ <li>로고, 아이콘 형식만 가능</li>
	404	+ </ul>
	405	+ </div>
	406	+ </div>
	407	+
	408	+ <div class="vs vs_title">
	409	+ <div class="title">VS</div>
	410	+ <ul>
	411	+ <li>전송대상</li>
	412	+ <li>발송목적</li>
	413	+ <li>메세지 형태</li>
	414	+ <li>버튼 사용</li>
	415	+ <li>템플릿 승인</li>
	416	+ <li>비용</li>
	417	+ <li>길이제한</li>
	418	+ <li>이미지</li>
	419	+ </ul>
	420	+ </div>
	421	+
	422	+ <div class="vs friendtalk_vs">
	423	+ <div class="title">친구톡</div>
	424	+ <div class="box">
	425	+ <ul>
	426	+ <li>채널 친구</li>
	427	+ <li>광고 및 마케팅성<span>(예 : 이벤트, 쿠폰 등)</span></li>
	428	+ <li>텍스트, 기본이미지, 와이드 이미지형 등</li>
	429	+ <li>최대 5개</li>
	430	+ <li>별도 승인 없음 <span>야간 발송 제한(20:50 ~ 익일 08:00)</span></li>
	431	+ <li>0.0원 ~ 0.0원</li>
	432	+ <li>1,000자</li>
	433	+ <li>가능</li>
	434	+ </ul>
	435	+ </div>
	436	+ </div>
	437	+ </div>
	438	+ </div>
	439	+ </div>
321	440	</div>
322	441
323		- <div class="title-line">
324		- <div class="left-line"></div>
325		- <div class="right-line"></div>
326		- </div>
	442	+ <!-- 친구톡 유형 -->
	443	+ <div class="use">
	444	+ <div class="title">
	445	+ <h3>친구톡 유형</h3>
	446	+ </div>
327	447
328		- <div class="tab-wrap">
329		- <ul class="tabs">
330		- <li class="tab-link current" data-tab="tab-1">금융/보험</li>
331		- <li class="tab-link" data-tab="tab-2">기관/단체</li>
332		- <li class="tab-link" data-tab="tab-3">여행</li>
333		- <li class="tab-link" data-tab="tab-4">예약/예매</li>
334		- <li class="tab-link" data-tab="tab-5">배송/배달</li>
335		- <li class="tab-link" data-tab="tab-6">안내/이벤트</li>
	448	+ <div class="title-line">
	449	+ <div class="left-line"></div>
	450	+ <div class="right-line"></div>
	451	+ </div>
	452	+
	453	+ <ul class="friendtalk_use">
	454	+ <li>
	455	+ <div class="title">텍스트형</div>
	456	+ <img src="/publish/images/kakao_intro_cont/friendtalk_use1.png" alt="">
	457	+ <p class="explan_text">한/영 구분없이 <span>1,000자</span> + 버튼 <span>최대 5개</span></p>
	458	+ </li>
	459	+ <li>
	460	+ <div class="title">기본 이미지형</div>
	461	+ <img src="/publish/images/kakao_intro_cont/friendtalk_use2.png" alt="">
	462	+ <p class="explan_text">한/영 구분없이 <span>400자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 5개</span></p>
	463	+ </li>
	464	+ <li>
	465	+ <div class="title">와이드 이미지형</div>
	466	+ <img src="/publish/images/kakao_intro_cont/friendtalk_use3.png" alt="">
	467	+ <p class="explan_text">한/영 구분없이 <span>76자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 1개</span></p>
	468	+ </li>
336	469	</ul>
337	470
338		- <div id="tab-1" class="tab-content current"><img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험"></div>
339		- <div id="tab-2" class="tab-content"><img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체"></div>
340		- <div id="tab-3" class="tab-content"><img src="/publish/images/kakao_intro_cont/travel.png" alt="여행"></div>
341		- <div id="tab-4" class="tab-content"><img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약"></div>
342		- <div id="tab-5" class="tab-content"><img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달"></div>
343		- <div id="tab-6" class="tab-content"><img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트"></div>
344	471	</div>
345	472
346		- </div>
347		-
348		- <!--서비스이용방법-->
349		- <div class="service">
350		- <div class="title">
351		- <h3>서비스 이용 방법</h3>
352		- </div>
353		-
354		- <div class="title-line">
355		- <div class="left-line"></div>
356		- <div class="right-line"></div>
357		- </div>
358		-
359		- <div class="con first-line">
360		- <div class="service-01 common">
361		- <div class="step">
362		- <p>STEP <span>01</span></p>
363		- </div>
364		- <div class="text">
365		- <div class="btn">
366		- <a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
367		- </div>
368		- <div class="text-line"></div>
369		- <div class="type">
370		- <p>
371		- 카카오톡 채널을 먼저 가입해주신 다음 <br>
372		- 비즈니스 채널 전환 신청을 해주세요.
373		- </p>
374		- <p>
375		- ※ 가입 후 카카오톡 채널 설정에서 <br>
376		- 공개, 검색허용 설정을 하셔야 합니다.
377		- </p>
378		- </div>
379		- <div class="icon"><img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘"></div>
380		- </div>
	473	+ <!--서비스이용방법-->
	474	+ <div class="service">
	475	+ <div class="title">
	476	+ <h3>서비스 이용 방법</h3>
381	477	</div>
382		- <div class="service-02 common">
383		- <div class="step">
384		- <p>STEP <span>02</span></p>
385		- </div>
386		- <div class="text">
387		- <div class="btn">
388		- <a href="#">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
389		- </div>
390		- <div class="text-line"></div>
391		- <div class="type">
392		- <p>
393		- 가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
394		- 채널ID 등록 메뉴에 등록해주세요.
395		- </p>
396		- </div>
397		- <div class="icon"><img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘"></div>
398		- </div>
	478	+
	479	+ <div class="title-line">
	480	+ <div class="left-line"></div>
	481	+ <div class="right-line"></div>
399	482	</div>
400		- </div>
401		-
402		- <div class="con second-line">
403		- <div class="service-03 common">
404		- <div class="step">
405		- <p>STEP <span>03</span></p>
406		- </div>
407		- <div class="text">
408		- <div class="btn">
409		- <a href="#">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
410		- </div>
411		- <div class="text-line"></div>
412		- <div class="type">
413		- <p>
414		- 알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
415		- 대한 카카오의 승인이 반드시 필요합니다.
416		- 템플릿을 작성하신 후 심사요청을 진행해주세요.
417		- </p>
418		- <p>
419		- ※ 템플릿 승인까지 최대 3일 소요
420		- </p>
421		- </div>
422		- <div class="icon"><img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘"></div>
423		- </div>
424		- </div>
425		- <div class="service-04 common">
426		- <div class="step">
427		- <p>STEP <span>04</span></p>
428		- </div>
429		- <div class="text">
430		- <div class="btn">
431		- <a href="#">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
432		- </div>
433		- <div class="text-line"></div>
434		- <div class="type">
435		- <p>
436		- 템플릿이 승인되셨다면 문자온 알림톡을 <br>
437		- 통해 메시지를 발송하실 수 있습니다.
438		- </p>
439		- </div>
440		- <div class="icon"><img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘"></div>
441		- </div>
	483	+
	484	+ <ul class="kakao_use_guide">
	485	+ <li class="guide_01">
	486	+ <div class="title">STEP <span>01</span></div>
	487	+ <i></i>
	488	+ <p class="guide_title">카카오톡 채널 가입</p>
	489	+ <span class="guide_info">카카오톡 채널 생성을 위한 <br> 계정이 없으시다면, 카카오에서 <br> 카카오톡 비즈니스 회원가입을<br> 먼저
	490	+ 진행해주세요.</span>
	491	+ </li>
	492	+ <li class="guide_02">
	493	+ <div class="title">STEP <span>02</span></div>
	494	+ <i></i>
	495	+ <p class="guide_title">채널 ID 등록하러 가기</p>
	496	+ <span class="guide_info">가입하신 카카오톡 채널의 채널 ID(채널이름)를 채널 ID 등록 메뉴에 등록해주세요.</span>
	497	+ </li>
	498	+ <li class="guide_03">
	499	+ <div class="title">STEP <span>03</span></div>
	500	+ <i></i>
	501	+ <p class="guide_title">친구톡 전송</p>
	502	+ <span class="guide_info">친구톡은 별도의 템플릿 심사 절차 없이, 즉시 발송 가능합니다.</span>
	503	+ </li>
	504	+ </ul>
	505	+
	506	+ <!--이용가이드 버튼-->
	507	+ <div class="guide">
	508	+ <a href="https://kakaobusiness.gitbook.io/main/ad/brandmessage" target="_blank">친구톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
442	509	</div>
443	510	</div>
444	511
445		- <!--이용가이드 버튼-->
446		- <div class="guide">
447		- <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>
	512	+ <!--유의사항-->
	513	+ <div class="note">
	514	+ <div class="note-title">
	515	+ <p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
	516	+ </div>
	517	+ <ul>
	518	+ <li>- (광고) 표기 여부는 선택 가능하나 , (광고)표기 해제에 따른 법령상 의무사항을 미 준수시에는 메시지 발송이 중단될 수 있습니다.</li>
	519	+ <li>- 광고성 친구톡 메시지에는 “(광고) 표시 및 수신거부 방식”이 표시되며, 대체 문자의 경우에는 “(광고) 문구 및 080 무료수신거부 번호”가 자동으로 포함됩니다.</li>
	520	+ <li><b>- 광고성 메시지의 발송 가능 시간은 08:00 ~ 20:50(한국시간) 입니다.</b></li>
	521	+ <li>- 친구톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
	522	+ <li>- 카카오정책 및 심의기준을 반드시 준수하여야 합니다.</li>
	523	+ </ul>
448	524	</div>
449	525	</div>
	526	+ <!-- // 친구톡 소개 -->
450	527
451		- <!--유의사항-->
452		- <div class="note">
453		- <div class="note-title">
454		- <p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
455		- </div>
456		- <ul>
457		- <li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
458		- <li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
459		- <li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
460		- <li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
461		- <li>
462		- <a href="https://spam.kisa.or.kr/common/nttFileDownload.do?fileKey=f3de0346e5010755186576fa45b37be2" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
463		- </li>
464		- <li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
465		- </ul>
466		- </div>
467	528	</div>
468	529	</div>
469		-
	530	+
470	531	</div>
471	532	<!--// send top -->
472	533	</div>
473	534	</div>
474	535	<!--// content 영역 -->
475	536	<!-- footer -->
476		- <div data-include-path="/publish/layout/_footer.html"></div>
477		- <!--// footer 영역 -->
	537	+ <div data-include-path="/publish/layout/_footer.html"></div>
	538	+ <!--// footer 영역 -->
478	539	</body>
479	540
480	541	</html> (No newline at end of file)

4feb34d

2dfb2fe

src/main/webapp/publish/layout/_header.html

--- src/main/webapp/publish/layout/_header.html

+++ src/main/webapp/publish/layout/_header.html


               <dd>
                 <ul>
                   <li><a href="/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do">알림톡</a></li>
+                  <li><a href="#none">친구톡</a></li>
                   <li><a href="/web/mjon/kakao/stepinfo/selectKaKaoStepInfo.do">카카오톡 설정</a></li>
-                  <li><a href="/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do">알림톡 소개</a></li>
+                  <li><a href="/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do">카카오톡 소개</a></li>
                 </ul>
               </dd>
             </dl>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2048,9 +2048,56 @@
2048	2048	.kakao_intro_cont .note .note-title p span{padding-right: 10px;}
2049	2049	/유의사항_목록/
2050	2050	.kakao_intro_cont .note ul{line-height: 26px; font-weight: 300; font-size: 16px; color: #666; background-color: #fff; border-radius: 10px; padding: 25px 53px;}
2051		-.kakao_intro_cont .note ul li:nth-child(4){font-size: 15px; color: #999; padding-left: 10px; margin-top: -3px;}
2052		-.kakao_intro_cont .note ul li:nth-child(5){font-weight: 400; font-size: 14px; color: #fff; margin: 3px 0 7px 10px; background-color: #002c9a; width: 260px; height: 32px; line-height: 31px; text-align: center; border-radius: 5px;}
2053		-.kakao_intro_cont .note ul li:nth-child(5):hover{box-shadow: 0 0 8px rgba(0,0,0,0.5);}
	2051	+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(4){font-size: 15px; color: #999; padding-left: 10px; margin-top: -3px;}
	2052	+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(5){font-weight: 400; font-size: 14px; color: #fff; margin: 3px 0 7px 10px; background-color: #002c9a; width: 260px; height: 32px; line-height: 31px; text-align: center; border-radius: 5px;}
	2053	+.kakao_intro_cont :not(.friendtalk) .note ul li:nth-child(5):hover{box-shadow: 0 0 8px rgba(0,0,0,0.5);}
	2054	+
	2055	+/* 친구톡 소개 */
	2056	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li:nth-child(1){margin:0 0 45px 0;}
	2057	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li{margin:0 0 19px 0;}
	2058	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2){display:flex;line-height:1;height:auto;justify-content:center;align-items:center;padding:22px 0 18px 0;font-family:'GmarketSansMedium';}
	2059	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2) span{display:inline-block;font-family:'GmarketSansBold';margin:0 4px;}
	2060	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li:nth-child(4) p:nth-child(2){height:auto;line-height:1;padding:24px 0 18px 0;}
	2061	+.kakao_intro_cont .friendtalk .kakao_intro .con .intro .phone{width:auto;height:100%;margin:-20px 0 0 -15px;}
	2062	+
	2063	+.kakao_intro_cont .friendtalk .kakao_intro .fight .wrap{max-width:1024px;gap:50px;justify-content:center;}
	2064	+.kakao_intro_cont .friendtalk .kakao_intro .con .fight .fight-title{width:250px;}
	2065	+.kakao_intro_cont .friendtalk .kakao_intro .vs{display:flex;width:calc((100% - 200px) / 2);flex-direction:column;align-items:center;gap:20px;}
	2066	+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title{width:100px;}
	2067	+.kakao_intro_cont .friendtalk .kakao_intro .vs .title{height:34px;padding:5px 30px 3px;border-radius:35px;background:#E4E6EA;font-family:'GmarketSansBold';color:#666;font-size:20px;line-height:35px;}
	2068	+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title ul{padding:20px 0;}
	2069	+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title .title{background:transparent;font-family:'GmarketSansMedium';}
	2070	+.kakao_intro_cont .friendtalk .kakao_intro .vs.vs_title ul li{background:transparent;font-family:'GmarketSansMedium';}
	2071	+.kakao_intro_cont .friendtalk .kakao_intro .fight .vs .box{display:flex;width:100%;padding:20px;background:#fff;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,0.1);align-items:center;flex-direction:column;box-sizing:border-box;}
	2072	+.kakao_intro_cont .friendtalk .kakao_intro .vs ul li{display:flex;height:51px;margin:4px 0;font-size:20px;font-family:'GmarketSansBold';color:#666;letter-spacing:-.85px;text-align:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;}
	2073	+.kakao_intro_cont .friendtalk .kakao_intro .vs .box ul li span{display:block;width:100%;font-size:16px;font-weight:400;margin:-10px 0 0 0;}
	2074	+
	2075	+.kakao_intro_cont .friendtalk .kakao_intro .friendtalk_vs .title{background:#ffcc33;color:#222;}
	2076	+.kakao_intro_cont .friendtalk .friendtalk_vs .box{border:1px solid #222;}
	2077	+.kakao_intro_cont .friendtalk .friendtalk_vs .box ul li{color:#222;}
	2078	+.kakao_intro_cont .friendtalk .friendtalk_vs .box ul li span{color:#666;}
	2079	+
	2080	+.friendtalk_use{display:flex;max-width:1024px;margin:50px 0;justify-content:space-between;}
	2081	+.friendtalk_use li{text-align:center;width:calc((1024px / 3) - 20px);}
	2082	+.friendtalk_use .title{display:inline-flex;height:43px;font-size:20px;font-weight:bold;color:#002c9a;text-align:center;background:#fff;padding:0 23px;margin:0 auto 20px auto;border:2px solid #002c9a;border-radius:35px;justify-content:center;align-items:center;}
	2083	+.friendtalk_use img{margin:0 0 20px 0;}
	2084	+.friendtalk_use .explan_text{display:table-cell;width:100%;height:100px;line-height:1.4;padding:0 20px;background:#fff;border-radius:10px;box-sizing:border-box;vertical-align:middle;}
	2085	+.friendtalk_use li:first-child .explan_text{display:flex;align-items:center;justify-content:center;}
	2086	+.friendtalk_use .explan_text span{font-weight:bold;}
	2087	+
	2088	+.friendtalk .service .kakao_use_guide{display: flex; margin: 50px 0; gap: 30px;}
	2089	+.friendtalk .service .kakao_use_guide li{position: relative; display:flex; width: calc((100% - 60px)/3); background-color: #fff; border-radius: 20px; padding: 0 0 30px 0; text-align: center; overflow: hidden;flex-direction: column;gap: 20px;}
	2090	+.friendtalk .service .kakao_use_guide .title{display:flex;width:100%;height:50px;font-size:19px;background:#002c9a;color:#fff;justify-content:center;align-items:center;letter-spacing:1px;}
	2091	+.friendtalk .service .kakao_use_guide .title span{font-weight:bold;font-size:22px;}
	2092	+.friendtalk .service .kakao_use_guide li i{display: block; width: 128px; height: 128px; margin: 10px auto 10px auto; background-color: #F3F6FB; border-radius: 100%; background-repeat: no-repeat; background-position: center;}
	2093	+.friendtalk .service .kakao_use_guide li.guide_01 i{background-image: url(/publish/images/content/icon_kakao_guide01.png);}
	2094	+.friendtalk .service .kakao_use_guide li.guide_02 i{background-image: url(/publish/images/content/icon_kakao_guide02.png);}
	2095	+.friendtalk .service .kakao_use_guide li.guide_03 i{background-image: url(/publish/images/content/icon_kakao_guide04.png);}
	2096	+.friendtalk .service .kakao_use_guide li .guide_title{font-family: 'GmarketSansBold'; font-size: 24px;}
	2097	+.friendtalk .service .kakao_use_guide li .guide_info{display: block; height: 120px; font-size: 18px; font-weight: 300; color: #444; line-height: 1.3; padding: 0 20px;}
	2098	+
	2099	+.kakao_intro_cont .friendtalk .note b{font-weight:400;color:#e40000;}
	2100	+
2054	2101
2055	2102	/* api - 소개 */
2056	2103	.send_top .api_guide_cont {background-color: #fff;padding: 30px 40px;border-radius: 10px;}
...	...	@@ -2520,6 +2567,23 @@
2520	2567	.kakao_intro_cont .service .con .service-03 .text .icon img{margin-top: 24px;}
2521	2568	.kakao_intro_cont .service .con .service-04 .text .icon img{margin-top: 24px;}
2522	2569
	2570	+ /* 친구톡 소개 */
	2571	+ .kakao_intro_cont .friendtalk .kakao_intro .con .intro{gap:30px;}
	2572	+ .kakao_intro_cont .friendtalk .kakao_intro .con .intro .phone{width:42%;height:auto;}
	2573	+ .kakao_intro_cont .friendtalk .kakao_intro .con .intro ul li p:nth-child(2){font-size:18px;;}
	2574	+ .kakao_intro_cont .friendtalk .kakao_intro .vs ul li{font-size:18px;}
	2575	+ .kakao_intro_cont .friendtalk .kakao_intro .vs .box ul li span{font-size:14px;}
	2576	+ .friendtalk_use{gap:20px;}
	2577	+ .friendtalk_use .title{height:36px;font-size:16px;}
	2578	+ .friendtalk_use img{width:100%;}
	2579	+ .friendtalk_use li:first-child .explan_text{white-space:nowrap;}
	2580	+
	2581	+ .friendtalk .service .kakao_use_guide .title{font-size:16px;}
	2582	+ .friendtalk .service .kakao_use_guide .title span{font-size:20px;}
	2583	+ .friendtalk .service .kakao_use_guide li .guide_title{font-size:22px;}
	2584	+ .friendtalk .service .kakao_use_guide li .guide_info{font-size:16px;}
	2585	+ .kakao_intro_cont .service .guide a{font-size: 20px;}
	2586	+
2523	2587	/발송결과_select버튼/
2524	2588	.select_btnWrap .btn_right .search .send_text{width: 170px;}
2525	2589

...	...	@@ -156,8 +156,9 @@
156	156	<dd>
157	157	<ul>
158	158	<li><a href="/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do">알림톡</a></li>
	159	+ <li><a href="#none">친구톡</a></li>
159	160	<li><a href="/web/mjon/kakao/stepinfo/selectKaKaoStepInfo.do">카카오톡 설정</a></li>
160		- <li><a href="/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do">알림톡 소개</a></li>
	161	+ <li><a href="/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do">카카오톡 소개</a></li>
161	162	</ul>
162	163	</dd>
163	164	</dl>

Delete comment