diff --git a/layouts/xedition/demo/welcome_sub3.html b/layouts/xedition/demo/welcome_sub3.html
index 8f0714b1c..1e120d082 100644
--- a/layouts/xedition/demo/welcome_sub3.html
+++ b/layouts/xedition/demo/welcome_sub3.html
@@ -1,7 +1,133 @@
-<!-- EXAMPLE -->
-<h1 style="margin-bottom:56px;font-size:21px;font-weight:400;color:#444;text-align:center">FULL PAGE EXAMPLE PAGE</h1>
-<p style="margin-bottom:53px;font-size:17px;color:#444;text-align:center">Carefully crafted elements come together into one amazing design.</p>
-<p style="font-size:15px;color:#444;line-height:23px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
-<p style="margin-top:32px;font-size:15px;color:#444;line-height:23px">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p>
-<p style="margin-top:32px;font-size:15px;color:#444;line-height:23px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
-<!-- /EXAMPLE -->
+<div class="XEicon">
+	<section class="main_title fixedwidth">
+		<h1>Beautiful iconic font &amp; CSS toolkit</h1>
+		<p>
+		XEIcon은 웹사이트 제작에 최적화된 백터 그래픽 아이콘 툴킷입니다.<br />
+		한국 웹서비스 문화에 적합한 디자인과 카테고리를 고려하여 제작되었습니다.<br />
+		XEIcon으로 아름답고 직관적인 웹페이지를 만들어보세요!<br />
+		</p>
+	</section>
+	<section class="feature fixedwidth">
+		<div class="tit"><h1>FEATURE</h1></div>
+		<ul>
+		<li>
+			<div class="ico"><i class="xe-pen"></i><span class="blind">사이트 제목 바꾸기</span></div>
+			<h2>한개의 폰트, 680개의 아이콘</h2>
+			<p>웹 콘텐츠의 목적에 맞는 아이콘을 다양한 구성에서 찾아볼 수 있습니다.<br /><a href="http://xpressengine.github.io/XEIcon/library_common.html" target="_blank">라이브러리</a>에서 필요한 아이콘을 찾아보세요!</p>
+		</li>
+		<li>
+			<div class="ico"><i class="xe-pen"></i><span class="blind">메뉴 구조 구성하기</span></div>
+			<h2>호환성</h2>
+			<p>XEIcon은 자바스크립트 없이 구현됩니다. <br />또한 다양한 브라우저에서도 동일한 뷰로 웹 페이지를 노출합니다.</p>
+		</li>
+		<li>
+			<div class="ico"><i class="xe-layout-left-two"></i><span class="blind">레이아웃 디자인 바꾸기</span></div>
+			<h2>최적화</h2>
+			<p>XpressEngine 뿐 아니라, 다양한 프레임워크에서 동일하게 구현됩니다. 다양한 프레임워크에서 자유롭게 이용해 보세요!</p>
+		</li>
+		<li>
+			<div class="ico"><i class="xe-pen"></i><span class="blind">초기화면 바꾸기</span></div>
+			<h2>확장성</h2>
+			<p>백터 아이콘으로 만들어진 XEIcon은 어떤 크기로도 확장이 가능하며 높은 해상도의 화면에서도 선명한 형태를 유지합니다.</p>
+		</li>
+		<li>
+			<div class="ico"><i class="xe-marquee-add"></i><span class="blind">기능과 디자인 추가하기</span></div>
+			<h2>자유로운 변형</h2>
+			<p>CSS를 통해 아이콘의 색상, 크기, 그림자 등을 손쉽게 변형할 수 있습니다. <a href="http://xpressengine.github.io/XEIcon/examples.html" target="_blank">LESS, SASS로 추가된 기능</a>으로 더 넓어진 활용범위를 확인하세요!</p>
+		</li>
+		<li>
+			<div class="ico"><i class="xe-brush"></i><span class="blind">레이아웃 꾸미기</span></div>
+			<h2>오픈소스</h2>
+			<p>XEIcon은 OFL 라이선스를 따르는 오픈소스입니다.<br />모든 사용자에게 무료로 제공됩니다. <a href="http://xpressengine.github.io/XEIcon/license.html" target="_blank">라이선스</a>를 확인해 보세요!</p>
+		</li>
+		</ul>
+	</section>
+	<section class="get_started">
+		<div class="fixedwidth">
+			<div class="tit"><h1>GET STARTED</h1></div>
+			<p class="cont">XEIcon 사용과 설치 방법은 매우 간단합니다. 자세한 사용방법을 <a href="#">XEIcon 공식사이트</a>에서 확인해보세요!</p>
+			<ul>
+				<li>
+					<h2>최신버전 다운로드</h2>
+					<p>가장 최신 버전 구성을 압축파일로<br />다운로드 받아볼 수 있습니다.</p>
+					<a href="http://xpressengine.github.io/XEIcon/"><i class="xeicon xe-download"></i> Download</a>
+				</li>
+				<li>
+					<h2>Git 저장소 복제</h2>
+					<p>Github에서 로컬 저장소로 복제하여 사용할 수 있습니다.</p>
+					<a href="https://github.com/xpressengine/XEIcon" target="_blank"><i class="xeicon xe-arrow-right"></i> check out</a>
+				</li>	
+				<li>
+					<h2>CDN by jsDelivr</h2>
+					<p>한줄의 코드만 작성하면 다운로드 없이 XEIcon을 사용할 수 있습니다.</p>
+					<a href="http://xpressengine.github.io/XEIcon/started.html" target="_blank"><i class="xeicon xe-arrow-right"></i> check out</a>
+				</li>
+				<li>
+					<h2>Install with Bower</h2>
+					<p>Bower 서비스에서 XEIcon 패키지를 바로 설치할 수 있습니다.</p>
+					<a href="#"><i class="xeicon xe-arrow-right"></i> check out</a>
+				</li>
+			</ul>
+		</div>
+	</section>
+	<section class="contribution fixedwidth">
+		<div class="tit"><h1>CONTRIBUTION</h1></div>
+		<p class="cont">새로운 아이콘 요청이나 XEICON에 대한 제안이 있다면 자유롭게 이야기해주세요!<br />앞으로의 이야기들을 함께 만들어갈 third party 참여 또한 환영합니다.</p>
+		<a href="https://github.com/xpressengine/XEIcon" target="_blank" class="btn_github">github</a>
+	</section>
+</div>
+
+<style type="text/css">
+/* reset parent style */
+.body.sub {width:100% !important; margin:0;}
+.body.sub.full_width .content {width:100% !important; padding-bottom:0px !important;}
+
+/* XEicon page common style */
+.XEicon .fixedwidth {width:1200px; margin:0 auto;}
+.XEicon .tit {position:relative;}
+.XEicon .tit h1 {font-size:29px; text-align:center; letter-spacing:2px;}
+.XEicon .tit h1:after {position:absolute; top:115%; left:49%; width:20px; height:3px; background-color:#cda25a; content: "";}
+
+/* a tag style */
+.XEicon p a{color:#444}
+.XEicon p a:hover,
+.XEicon p a:active,
+.XEicon p a:focus{color:#cda25a;border-bottom:1px solid #cda25a}
+
+/* section .main_title */
+.XEicon .main_title h1 {margin-bottom:47px;font-size:34px;font-weight:400;color:#cda25a;text-align:center;text-transform: uppercase}
+.XEicon .main_title p {font-size:15px;line-height:28px;color:#444;text-align:center}
+
+/* section .feature */
+.XEicon .feature{height:518px;padding-top:120px;}
+.XEicon .feature ul{padding-top:80px}
+.XEicon .feature li{position:relative;float:left;width:314px;min-height:140px;padding:0 16px 0 70px;margin:0 0 30px 0}
+.XEicon .feature h2{padding:7px 24px 13px 0;font-size:17px;font-weight:normal;line-height:23px;color:#333}
+.XEicon .feature p{padding:0 24px 0 0;font-size:14px;line-height:26px;color:#888}
+.XEicon .feature .ico{position:absolute;top:0;left:0;width:48px;height:48px;font-size:22px;text-align:center;line-height:50px;color:#555}
+
+/* section .get_started */
+.XEicon .get_started {height:550px; padding-top:80px; background: #f6f6f6; box-sizing:border-box;}
+.XEicon .get_started .cont {font-size:15px; margin-top:75px; color:#888;}
+.XEicon .get_started ul {margin-top:34px;}
+.XEicon .get_started li {position:relative; float:left; width:286px; height:212px; margin-right:15px; border:1px solid #e8e8e8; background:#fff; text-align:center;}
+.XEicon .get_started li:last-child {margin-right:0;}
+.XEicon .get_started li h2 {padding:33px 0 19px; font-size:17px; font-weight: normal}
+.XEicon .get_started li p {padding: 0 37px; font-size:14px; line-height: 26px; color:#888;}
+.XEicon .get_started li > a {position:absolute; display:block; bottom:0; width:100%; height:50px; background:#888; border-top:1px solid #e1e1e1; line-height: 50px; font-size:14px; font-weight:600; text-transform:uppercase; color:#fff; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
+.XEicon .get_started li > a:hover,
+.XEicon .get_started li > a:active,
+.XEicon .get_started li > a:focus {background-color:#cda25a;color:#fff;}
+
+.XEicon .get_started li > a .xeicon {display: none; margin-right:6px; font-size:140%; vertical-align: middle}
+.XEicon .get_started li > a:hover .xeicon {display: inline-block; margin-top:-4px;}
+
+/* section .contribution */
+.XEicon .contribution {height:442px; padding-top:93px; box-sizing:border-box; text-align:center;}
+.XEicon .contribution .cont {font-size:15px;line-height:26px;text-align:center; margin-top:58px; color:#888;}
+.XEicon .contribution .btn_github{display:inline-block;margin:50px 0;padding:0 42px;height:52px;border:2px solid #cda25a;background-color:#fff;font-size:16px;line-height:52px;letter-spacing:1px;color:#cda25a;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
+.XEicon .contribution .btn_github:hover,
+.XEicon .contribution .btn_github:active
+.XEicon .contribution .btn_github:focus{background-color:#cda25a;color:#fff}
+
+</style>
\ No newline at end of file