diff --git a/src/main/webapp/WEB-INF/jsp/_extra/web/user/mediation/checkMediationStep03.jsp b/src/main/webapp/WEB-INF/jsp/_extra/web/user/mediation/checkMediationStep03.jsp
index ad20bc47..71bf9624 100644
--- a/src/main/webapp/WEB-INF/jsp/_extra/web/user/mediation/checkMediationStep03.jsp
+++ b/src/main/webapp/WEB-INF/jsp/_extra/web/user/mediation/checkMediationStep03.jsp
@@ -343,7 +343,7 @@
             <dd>
               <div class="file_upload_wrap">
                 <div class="file_button">
-                  <label for="upFile_1" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+                  <label for="upFile_1" class="file btn btn_text btn_40 darkblue_border" style="display:flex;justify-content:center;align-items:center;">파일선택</label>
                 </div>
                 <ul class="file_list fill">
 					<div class="cs-files fl" id="upFileHtml1">
@@ -384,7 +384,7 @@
             <dd>
               <div class="file_upload_wrap">
                 <div class="file_button">
-                  <label for="upFile_2" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+                  <label for="upFile_2" class="file btn btn_text btn_40 darkblue_border" style="display:flex;justify-content:center;align-items:center;">파일선택</label>
                 </div>
                 <ul class="file_list fill">
 					<div class="cs-files fl" id="upFileHtml2">
@@ -406,7 +406,7 @@
             <dd>
               <div class="file_upload_wrap">
                 <div class="file_button">
-                  <label for="upFile_3" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+                  <label for="upFile_3" class="file btn btn_text btn_40 darkblue_border" style="display:flex;justify-content:center;align-items:center;">파일선택</label>
                 </div>
                 <ul class="file_list fill">
 					<div class="cs-files fl" id="upFileHtml3">
@@ -425,7 +425,7 @@
             <dd>
 											<c:forEach items="${trublreqstmngCaseFileList}" var="file" varStatus="status">
 													<c:if test="${file.fileGubun == '4812000000'}">
-														<div id="fileUploadP${status.count}">
+<%-- 														<div id="fileUploadP${status.count}"> --%>
 				                                 	 		<img src="/img/user/bbs/icon_file.gif" alt="gif" style="margin-top: 14px">&nbsp;&nbsp;<a href="/seed/extra/down/file.do?dataIdx=${file.seqNo}&funcType=${file.fileFunc}&pathKey1=${siteIdx}&downUserl=user">${file.fileName} (${file.regDt}, ${file.fileOwner})</a>
 					                                 	 </div>
 					                                </c:if>
@@ -435,7 +435,7 @@
             <dd>
               <div class="file_upload_wrap">
                 <div class="file_button">
-                  <label for="upFile_4" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+                  <label for="upFile_4" class="file btn btn_text btn_40 darkblue_border" style="display:flex;justify-content:center;align-items:center;">파일선택</label>
                 </div>
                 <ul class="file_list fill">
 					<div class="cs-files fl" id="upFileHtml3">
diff --git a/src/main/webapp/WEB-INF/views/_common/_css/addrlink.css b/src/main/webapp/WEB-INF/views/_common/_css/addrlink.css
index 5ba3958d..b62a06dc 100644
--- a/src/main/webapp/WEB-INF/views/_common/_css/addrlink.css
+++ b/src/main/webapp/WEB-INF/views/_common/_css/addrlink.css
@@ -69,7 +69,8 @@
 .pop-address-search .pop-address-search-inner .wrap:after {content:""; display:block; clear:both}		
 .pop-address-search .pop-address-search-inner .wrap *{height:39px; border:0 none}						
 .pop-address-search .pop-address-search-inner .wrap input[type="text"] {width:100%; line-height:39px; font-size: 14px;}						
-.pop-address-search .pop-address-search-inner .wrap input[type="button"] {position:absolute; right:0; top:0; width:39px; background:url(../img/btn-search.png) 50% 50% no-repeat}						
+/* .pop-address-search .pop-address-search-inner .wrap input[type="button"] {position:absolute; right:0; top:0; width:39px; background:url(../img/btn-search.png) 50% 50% no-repeat} */
+.pop-address-search .pop-address-search-inner .wrap input[type="button"] {position:absolute; right:0; top:0; width:39px; background:url(/kofair_case_seed/usr/images/component/icon_search_black_m.png) 50% 50% no-repeat;background-size:20px;}						
 .pop-address-search .pop-address-search-inner .guide {display:inline-block; margin-top:14px; color:#186bb9; padding-right:39px}
 .pop-address-search .pop-address-search-inner .logo {text-align:center; margin-top:15px;}
 .pop-address-search .pop-address-search-inner .exam {text-align:left; margin-top:5px}
diff --git a/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction.png b/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction.png
new file mode 100644
index 00000000..d3619844
Binary files /dev/null and b/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction.png differ
diff --git a/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction_m.png b/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction_m.png
new file mode 100644
index 00000000..2ae2c549
Binary files /dev/null and b/src/main/webapp/kofair_case_seed/usr/images/component/icon_satisfaction_m.png differ
diff --git a/src/main/webapp/kofair_case_seed/usr/request/apl_06.html b/src/main/webapp/kofair_case_seed/usr/request/apl_06.html
index 7f175016..42a6c27c 100644
--- a/src/main/webapp/kofair_case_seed/usr/request/apl_06.html
+++ b/src/main/webapp/kofair_case_seed/usr/request/apl_06.html
@@ -143,6 +143,21 @@
 							<button type="button" class="btn btn_text btn_45 darkblue_fill" onclick="location.href='/kofair_case_seed/usr/request/apl_07.html'">신청</button>
 						</div>
 					</div>
+
+					<div class="satisfaction_area">
+						<div class="title"><i class="icon satisfation"></i><p>온라인분쟁조정시스템 서비스에 대하여 어느 정도 만족하셨습니까?</p></div>
+						<div class="satisfation_radio">
+							<ul class="radio_wrap">
+								<li><input type="radio" class="radio" id="satisfation_01" name="satisfation"><label for="satisfation_01">매우만족</label></li>
+								<li><input type="radio" class="radio" id="satisfation_02" name="satisfation"><label for="satisfation_02">만족</label></li>
+								<li><input type="radio" class="radio" id="satisfation_03" name="satisfation"><label for="satisfation_03">보통</label></li>
+								<li><input type="radio" class="radio" id="satisfation_04" name="satisfation"><label for="satisfation_04">불만족</label></li>
+								<li><input type="radio" class="radio" id="satisfation_05" name="satisfation"><label for="satisfation_05">매우불만족</label></li>
+							</ul>
+							<button class="btn btn_text btn_35 darkgray_border gray_fill btn_satisfation">등록</button>
+						</div>
+					</div>
+
 				</div>
 				
 
diff --git a/src/main/webapp/kofair_case_seed/usr/style/common.css b/src/main/webapp/kofair_case_seed/usr/style/common.css
index 38648f54..09d7b3df 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/common.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/common.css
@@ -39,6 +39,7 @@
 .btn.orange_fill{background:#f96502;color:#fff;}
 .btn.orange_fill:hover{background:#eb5e00;}
 .btn.orange_border{border:1px solid #f96502;color:#f96502;}
+.btn.darkgray_border.gray_fill{border:1px solid #888888;background:#f0f0f0;color:#666;}
 
 /* input, select, textarea */
 .input_box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
diff --git a/src/main/webapp/kofair_case_seed/usr/style/index.css b/src/main/webapp/kofair_case_seed/usr/style/index.css
index 3f85f9d1..ef142f88 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/index.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/index.css
@@ -1,10 +1,10 @@
 @charset "utf-8";
 
-.main .icon.arrow.left{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_prev.png) no-repeat center center;margin:0 0 0 -2.5px;}
-.main .icon.pause{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_pause.png) no-repeat center center;}
-.main .icon.play{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_play.png) no-repeat center center;}
-.main .icon.arrow.right{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_next.png) no-repeat center center;margin:0 0 0 3px;}
-.main .footer .icon.arrow.right{width:7px;height:13px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_right.png) no-repeat center center;margin:-3px 0 0 6px;}
+.icon.arrow.left{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_prev.png) no-repeat center center;margin:0 0 0 -2.5px;}
+.icon.pause{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_pause.png) no-repeat center center;}
+.icon.play{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_play.png) no-repeat center center;}
+.icon.arrow.right{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_next.png) no-repeat center center;margin:0 0 0 3px;}
+.footer .icon.arrow.right{width:7px;height:13px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_right.png) no-repeat center center;margin:-3px 0 0 6px;}
 
 /* 팝업 */
 
diff --git a/src/main/webapp/kofair_case_seed/usr/style/popup.css b/src/main/webapp/kofair_case_seed/usr/style/popup.css
index 628319c0..8582e875 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/popup.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/popup.css
@@ -61,7 +61,7 @@
 
 .idf.window_popup.case_popup .box.gray_fill{width:calc(100% - 60px);margin:20px auto 0 auto;}
 .idf.window_popup.case_popup .input_box li{display:flex;width:100%;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}
-.idf.window_popup.case_popup .input_box li p{width:100%;}
+/* .idf.window_popup.case_popup .input_box li p{width:100%;} */
 .idf.window_popup.case_popup .input_box input::placeholder{font-size:1.5rem;}
 
 .layer_popup.cert_popup .box.gray_border>p{margin:0 0 10px 0;}
diff --git a/src/main/webapp/kofair_case_seed/usr/style/style.css b/src/main/webapp/kofair_case_seed/usr/style/style.css
index af18c40e..98327138 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/style.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/style.css
@@ -184,6 +184,8 @@
 .file_upload_wrap .file_list{display:flex;width:calc(100% - 100px);margin:0 0 0 10px;flex-direction:column;gap:8px;}
 .file_upload_wrap li{display:flex;}
 .file_upload_wrap li a{display:flex;max-width:calc(100% - 30px);font-size:1.5rem;color:#333;padding:0 15px 0 0;background:#f4f5f7;border-radius:5px;align-items:center;}
+.file_list>div>div{display:flex;min-height:40px;font-size:1.5rem;color:#333;padding:10px 15px 10px 30px;;background:#f4f5f7 url(/kofair_case_seed/usr/images/component/icon_file_clip.png) no-repeat left center;border-radius:5px;align-items:center;}
+.file_list div img{display:none;}
 .file_upload_wrap li a .file_name{max-width:calc(100% - 130px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
 .file_upload_wrap li a .file_size{font-size:1.4rem;font-weight:300;color:#666;margin:0 0 0 35px;}
 
@@ -290,6 +292,15 @@
 .total_search .search_list li .category{display:block;margin:8px 0 0 0;font-size:1.6rem;color:#666;}
 .total_search .search_list li .date{position:absolute;font-size:1.6rem;color:#888;right:0;top:50%;transform:translateY(-50%);}
 
+/* 만족도 조사 */
+.satisfaction_area{position:relative;width:100%;margin:100px 0 0 0;border:1px solid #d8d8d8;border-radius:5px;}
+.satisfaction_area::after{position:absolute;content:"";width:100%;height:1px;background:#e4e4e4;top:-50px;}
+.satisfaction_area .title{display:flex;height:52px;padding:0 0 0 24px;font-size:1.5rem;background:#f8f9fa;border-bottom:1px solid #d8d8d8;border-radius:5px 5px 0 0;align-items:center;gap:6px;}
+.satisfaction_area .icon.satisfation{width:17px;height:17px;margin:2px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction.png) no-repeat center center;}
+.satisfaction_area .satisfation_radio{display:flex;height:72px;padding:0 32px 0 48px;justify-content:space-between;align-items:center;}
+.satisfaction_area .radio_wrap{display:flex;gap:27px;} 
+.satisfaction_area .radio_wrap .radio+label{font-size:1.5rem;}
+
 
 /* ==================== 테블릿 ==================== */
 @media screen and (max-width: 1199px){
@@ -482,6 +493,16 @@
   .total_search .btn_wrap.right{margin:60px 0 0 0;justify-content:center;}
   .total_search .btn_wrap.right button{width:25%;}
 
+  /* 만족도 조사 */
+  .satisfaction_area{margin:160px 0 0 0;border:2px solid #d8d8d8;border-radius:10px;}
+  .satisfaction_area::after{height:2px;top:-80px;}
+  .satisfaction_area .title{height:auto;padding:38px 40px;font-size:3rem;border-bottom:2px solid #d8d8d8;align-items:flex-start;border-radius:10px 10px 0 0;gap:12px;}
+  .satisfaction_area .icon.satisfation{width:29px;height:29px;margin:7px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction_m.png) no-repeat center center;}
+  .satisfaction_area .title p{width:calc(100% - 29px);}
+  .satisfaction_area .satisfation_radio{height:auto;padding:50px 76px;flex-wrap:wrap;}
+  .satisfaction_area .radio_wrap{display:flex;width:100%;gap:43px 54px;flex-wrap:wrap;} 
+  .satisfaction_area .radio_wrap .radio+label{font-size:3rem;}
+  .satisfaction_area .btn_satisfation{width:100%;margin:50px 0 0 0;}
 
 }
 
@@ -638,6 +659,18 @@
 
   .total_search .btn_wrap.right{margin:30px 0 0 0;}
   .total_search .btn_wrap.right button{width:25%;}
+  
+  /* 만족도 조사 */
+  .satisfaction_area{margin:80px 0 0 0;border:1px solid #d8d8d8;border-radius:5px;}
+  .satisfaction_area::after{height:1px;top:-40px;}
+  .satisfaction_area .title{padding:19px 20px;font-size:1.5rem;border-bottom:1px solid #d8d8d8;border-radius:5px 5px 0 0;gap:6px;}
+  .satisfaction_area .icon.satisfation{width:17px;height:17px;margin:3px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction.png) no-repeat center center;}
+  .satisfaction_area .title p{width:calc(100% - 17px);}
+  .satisfaction_area .satisfation_radio{padding:25px 38px;}
+  .satisfaction_area .radio_wrap{width:100%;gap:20px 27px;} 
+  .satisfaction_area .radio_wrap .radio+label{font-size:1.5rem;}
+  .satisfaction_area .btn_satisfation{width:100% !important;margin:25px 0 0 0;}
+  
 }
 
 @media screen and (max-width: 499px){
diff --git a/src/main/webapp/kofair_case_seed/usr/style_guide.html b/src/main/webapp/kofair_case_seed/usr/style_guide.html
new file mode 100644
index 00000000..16ff0827
--- /dev/null
+++ b/src/main/webapp/kofair_case_seed/usr/style_guide.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>한국공정거래조정원 온라인분쟁조정시스템 > 스타일 가이드</title>
+
+  <!-- css -->
+  <link rel="stylesheet" href="/kofair_case_seed/css/reset.css">
+  <link rel="stylesheet" href="/kofair_case_seed/css/font.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/common.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/index.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/layout.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/popup.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/style.css">
+  <link rel="stylesheet" href="/kofair_case_seed/usr/style/request.css">
+
+  <!-- js -->
+  <script src="/kofair_case_seed/script/lib/jquery-3.5.0.js"></script>
+  <script src="/kofair_case_seed/usr/scripts/common.js"></script>
+  <script src="/kofair_case_seed/usr/scripts/layout.js"></script>
+  <script src="/kofair_case_seed/usr/scripts/popup.js"></script>
+  <script src="/kofair_case_seed/usr/scripts/ui.js"></script>
+  <script src="/kofair_case_seed/usr/scripts/request.js"></script>
+
+
+  <style>
+    .navi{position:sticky; top:0; border-bottom: 1px solid #666; background-color: #f8f8f8; padding:15px 0 10px 20px; z-index:500;}
+    .navi a {font-size:18px; padding:10px 20px; display: inline;}
+    .navi a:hover {text-decoration: underline;}
+    h2 {font-size:25px; font-weight: 700; padding:30px 0 20px 0; text-decoration: underline; text-underline-position: under;}    
+    p {padding:0 0 10px 0;}
+    dl {padding:20px 0 20px 20px;}
+    dl dt {font-size:16px; font-weight: 500; padding:0 0 5px 0;}
+    dl dd {padding: 0 0 5px 0;}
+    textarea {font-size:14px; width:100%; border:1px solid #ddd; font-weight: 400; background-color: #f8f8f8;}
+</style>
+</head>
+
+<body>
+    <div class="navi"><a href="#button">button</a><a href="#form">form</a><a href="#tab">tab</a><a href="#fu">file upload</a><a href="#pn">pagenation</a><a href="#list">list</a><a href="#mbc">메인 콘텐츠-조정사례 유형별 박스 색상</a></div>
+    <div style="margin:10px;">
+        <h2 id="button">button</h2>
+        <dl>
+            <dt>버튼 타입1 (height 35px)</dt>
+            <dd><p><button type="button" class="btn btn_text btn_35 orange_border">사건조회</button></p>
+                <textarea><button type="button" class="btn btn_text btn_35 orange_border">사건조회</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn btn_35 darkblue_border btn_edit">수정하기</button></p>
+                <textarea><button type="button" class="btn btn btn_35 darkblue_border btn_edit">수정하기</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn_text btn_35 gray_fill">분쟁조정 단계별 절차 안내보기</button></p>
+                <textarea><button type="button" class="btn btn_text btn_35 gray_fill">분쟁조정 단계별 절차 안내보기</button></textarea>
+            </dd>
+            <dd>
+                <p><button type="button" class="btn btn_text btn_35 darkblue_fill btn_search">button</button></p>
+                <textarea><button type="button" class="btn btn_text btn_35 darkblue_fill btn_search">button</button></textarea>
+            </dd>
+            <dd>
+                <p><button type="button" class="btn btn_text btn_35 skyblue_fill">button</button></p>
+                <textarea><button type="button" class="btn btn_text btn_35 skyblue_fill">button</button></textarea>
+            </dd>
+        </dl>
+        <dl>
+            <dt>버튼 타입2 (height 40px)</dt>
+            <dd><p><button type="button" class="btn btn_text btn_40 orange_border">button</button></p>
+                <textarea><button type="button" class="btn btn_text btn_40 orange_border">button</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn btn_40 darkblue_border btn_edit">button</button></p>
+                <textarea><button type="button" class="btn btn btn_40 darkblue_border btn_edit">button</button></textarea>
+            </dd>
+            <dd>
+                <p><button type="button" class="btn btn_text btn_40 darkblue_fill btn_search">검색</button></p>
+                <textarea><button type="button" class="btn btn_text btn_40 darkblue_fill btn_search">검색</button></textarea>
+            </dd>
+            <dd>
+                <p><button type="button" class="btn btn_text btn_40 gray_fill">목록</button></p>
+                <textarea><button type="button" class="btn btn_text btn_40 gray_fill">목록</button></textarea>
+            </dd>
+            <dd>
+                <p><button type="button" class="btn btn_text btn_40 skyblue_fill">전체보기</button></p>
+                <textarea><button type="button" class="btn btn_text btn_40 skyblue_fill">전체보기</button></textarea>
+            </dd>
+        </dl>
+        <dl>
+            <dt>
+                버튼 타입3 (height 45px)
+            </dt>
+            <dd><p><button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button></p>
+                <textarea><button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn_text btn_45 orange_fill">신청하기</button></p>
+                <textarea><button type="button" class="btn btn_text btn_45 orange_fill">신청하기</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn_text btn_45 darkgray_border">취소</button></p>
+                <textarea><button type="button" class="btn btn_text btn_45 darkgray_border">취소</button></textarea>
+            </dd>
+            <dd><p><button type="button" class="btn btn_text btn_45 gray_fill">목록</button></p>
+                <textarea><button type="button" class="btn btn_text btn_45 gray_fill">목록</button></textarea>
+            </dd>
+        </dl>
+
+        <dl>
+            <dt>버튼 위치 : 가운데</dt>
+            <dd><p>
+                <div class="btn_wrap center">
+                    <button type="button" class="btn btn_text darkblue_fill btn_45">뉴스레터 신청하기</button>
+                </div>
+                </p>
+                <textarea style="height:70px; margin:10px 0 0 0;"><div class="btn_wrap center">
+                    <button type="button" class="btn btn_text darkblue_fill btn_45">뉴스레터 신청하기</button>
+                  </div>
+                </textarea>
+            </dd>
+        </dl>
+
+        <dl>
+            <dt>버튼 위치 : 우측</dt>
+            <dd><p>
+                <div class="btn_wrap right">
+                    <button type="button" class="btn btn_text btn_45 darkgray_border">취소</button>
+                    <button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button>
+                  </div>
+                </p>
+                <textarea style="height:90px;">
+                    <div class="btn_wrap right">
+                        <button type="button" class="btn btn_text btn_45 darkgray_border">취소</button>
+                        <button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button>
+                    </div>
+                </textarea>                
+            </dd>
+        </dl>
+
+        <dl>
+            <dt>버튼 위치 : 좌/우측</dt>
+            <dd><p>
+                <div class="btn_wrap">
+                    <div class="area_left">
+                      <button type="button" class="btn btn_text btn_45 gray_fill">이전단계</button>
+                    </div>
+                    <div class="area_right">
+                      <button type="button" class="btn btn_text btn_45 darkgray_border">임시저장</button>
+                      <button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button>
+                    </div>
+                </div>
+                </p>
+                <textarea style="height:130px;">
+                    <div class="btn_wrap">
+                        <div class="area_left">
+                          <button type="button" class="btn btn_text btn_45 gray_fill">이전단계</button>
+                        </div>
+                        <div class="area_right">
+                          <button type="button" class="btn btn_text btn_45 darkgray_border">임시저장</button>
+                          <button type="button" class="btn btn_text btn_45 darkblue_fill">다음단계</button>
+                        </div>
+                    </div>
+                </textarea>                
+            </dd>
+        </dl>
+        
+        <dl>
+            <dt>메인 콘텐츠 슬라이드 버튼</dt>
+            <dd><p><div class="case_slide_util">
+                <button type="button" class="btn only_icon btn_40 round gray_border btn_prev" title="이전" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-b46d0a4130d527f4"><i class="icon arrow left"></i></button>
+                <button type="button" class="btn only_icon btn_40 round gray_border btn_pause" title="일시정지"><i class="icon pause"></i></button>
+                <button type="button" class="btn only_icon btn_40 round gray_border hide btn_play" title="재생"><i class="icon play"></i></button>
+                <button type="button" class="btn only_icon btn_40 round gray_border btn_next" title="다음" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-b46d0a4130d527f4"><i class="icon arrow right"></i></button>
+              </div></p>
+                <textarea style="height:150px;">
+                <div class="case_slide_util">
+                    <button type="button" class="btn only_icon btn_40 round gray_border btn_prev" title="이전" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-b46d0a4130d527f4"><i class="icon arrow left"></i></button>
+                    <button type="button" class="btn only_icon btn_40 round gray_border btn_pause" title="일시정지"><i class="icon pause"></i></button>
+                    <button type="button" class="btn only_icon btn_40 round gray_border hide btn_play" title="재생"><i class="icon play"></i></button>
+                    <button type="button" class="btn only_icon btn_40 round gray_border btn_next" title="다음" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-b46d0a4130d527f4"><i class="icon arrow right"></i></button>
+                </div></textarea>
+            </dd>
+        </dl>
+        <h2 id="form">form</h2>
+        <dl>
+            <dt>checkbox</dt>
+            <dd><p>
+                <ul class="input_box">
+                <li><input type="checkbox" class="checkbox" name="" id=""><label for="">check</label></li>
+                </ul>
+                </p>
+                <textarea>
+                    <input type="checkbox" class="checkbox" name="" id=""><label for="">check</label>
+                </textarea>
+            </dd>
+            <dd><p>
+                <ul class="input_box">
+                <li><input type="checkbox" class="checkbox" name="" id="" disabled><label for="">check-disabled</label></li>
+                </ul>
+                </p>
+                <textarea>
+                    <input type="checkbox" class="checkbox" name="" id="" disabled><label for="">check-disabled</label>
+                </textarea>
+            </dd>
+        </dl>
+      
+        <dl>
+            <dt>radio</dt>
+            <dd><p>
+                <input type="radio" class="radio" id="" name=""><label for="">radio1</label>
+                </p>
+                <textarea>
+                    <input type="radio" class="radio" id="" name=""><label for="">radio1</label>
+                </textarea>
+            </dd>
+            <dd><p>
+                <input type="radio" class="radio" id="" name="" disabled><label for="">radio-disabled</label>
+                </p>
+                <textarea>
+                    <input type="radio" class="radio" id="" name="" disabled><label for="">radio-disabled</label>
+                </textarea>
+            </dd>
+        </dl>
+        <dl>
+            <dt>select</dt>
+            <dd><p>
+                <select name="" id="" title="선택" class="select">
+                    <option value="">선택1</option>
+                    <option value="">선택2</option>
+                </select>
+                </p>
+                <textarea style="height:110px;">
+                    <select name="" id="" title="선택" class="select">
+                        <option value="">선택1</option>
+                        <option value="">선택2</option>
+                    </select>    
+                </textarea>     
+            </dd>
+        </dl>
+        <dl>
+            <dt>select (width 100%)</dt>
+            <dd><p>
+                <select name="" id="" title="선택" class="select w100per">
+                    <option value="">선택1</option>
+                    <option value="">선택2</option>
+                </select>
+                </p>
+                <textarea style="height:110px;">
+                    <select name="" id="" title="선택" class="select w100per">
+                        <option value="">선택1</option>
+                        <option value="">선택2</option>
+                    </select>    
+                </textarea>     
+            </dd>
+        </dl>
+        <dl>
+            <dt>input</dt>
+            <dd><p>
+                <input type="text" class="input_text" title="" placeholder="input text">
+                </p>
+                <textarea><input type="text" class="input_text" title="" placeholder="input text"></textarea>     
+            </dd>
+        </dl>
+    </dl>
+    <dl>
+        <dt>input (width 100%)</dt>
+        <dd><p>
+            <input type="text" class="input_text w100per" placeholder="ex) 가맹사업거래 상담 신청합니다.">
+            </p>
+            <textarea><input type="text" class="input_text w100per" placeholder="ex) 가맹사업거래 상담 신청합니다."></textarea>     
+        </dd>
+    </dl>
+    <h2 id="fu">file upload</h2>
+    <dl>
+        <dt></dt>
+        <dd><p><div class="file_upload_wrap">
+            <div class="file_button">
+              <input type="file" id="file" class="input_file">
+              <label for="file" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+            </div>
+            <ul class="file_list fill">
+              <li><a href="#none" download="download"><i class="icon file clip"></i><span class="file_name">분쟁조정신청 관련_필요한 첨부이미지_10310.png </span><span class="file_size">457kb</span></a> <button type="button" class="btn btn_only_icon round"><i class="icon delete gray_fill"></i></button></li>
+              <li><a href="#none" download="download"><i class="icon file clip"></i><span class="file_name">분쟁조정신청 관련_필요한 첨부이미지_10311.png </span><span class="file_size">457kb</span></a> <button type="button" class="btn btn_only_icon round"><i class="icon delete gray_fill"></i></button></li>
+            </ul>
+          </div>
+        </p>
+        <textarea style="height:250px;">
+            <div class="file_upload_wrap">
+                <div class="file_button">
+                  <input type="file" id="file" class="input_file">
+                  <label for="file" class="file btn btn_text btn_40 darkblue_border">파일선택</label>
+                </div>
+                <ul class="file_list fill">
+                  <li><a href="#none" download="download"><i class="icon file clip"></i><span class="file_name">분쟁조정신청 관련_필요한 첨부이미지_10310.png </span><span class="file_size">457kb</span></a> <button type="button" class="btn btn_only_icon round"><i class="icon delete gray_fill"></i></button></li>
+                  <li><a href="#none" download="download"><i class="icon file clip"></i><span class="file_name">분쟁조정신청 관련_필요한 첨부이미지_10311.png </span><span class="file_size">457kb</span></a> <button type="button" class="btn btn_only_icon round"><i class="icon delete gray_fill"></i></button></li>
+                </ul>
+              </div>
+        </textarea>
+        </dd>
+    </dl>
+
+    <h2 id="tab">tab</h2>
+    <dl>
+        <dt>
+            탭스타일
+        </dt>
+        <dd><p>
+            <ul class="tabs blue_fill tab_02">
+                <li><button type="button" class="tab active" onclick="">뉴스레터 신청</button></li>
+                <li><button type="button" class="tab" onclick="">뉴스레터 해지</button></li>
+              </ul>
+            </p>
+            <textarea style="height:100px;">
+                <ul class="tabs blue_fill tab_02">
+                    <li><button type="button" class="tab active" onclick="">뉴스레터 신청</button></li>
+                    <li><button type="button" class="tab" onclick="">뉴스레터 해지</button></li>
+                </ul>
+            </textarea>
+        </dd>
+    </dl>
+
+    <h2 id="pn">pagenation</h2>
+    <dl style="margin:-60px 0 0 0;">
+        <dt></dt>
+        <dd><p>
+            <ul class="page">
+                <li><a href="#" class="btn only_icon btn_40 btn_page_first" title="첫 페이지 이동"><i class="icon page_first"></i></a></li>
+                <li><a href="#" class="btn only_icon btn_40 btn_page_prev" title="이전 페이지 이동"><i class="icon page_prev"></i></a></li>
+                <li><a href="#" class="btn btn_40" title="1 페이지 이동">1</a></li>
+                <li><a href="#" class="btn btn_40" title="2 페이지 이동">2</a></li>
+                <li><a href="#" class="btn btn_40" title="3 페이지 이동">3</a></li>
+                <li><a href="#" class="btn btn_40" title="4 페이지 이동">4</a></li>
+                <li><a href="#" class="btn btn_40" title="5 페이지 이동">5</a></li>
+                <li><a href="#" class="btn btn_40" title="6 페이지 이동">6</a></li>
+                <li><a href="#" class="btn btn_40" title="7 페이지 이동">7</a></li>
+                <li><a href="#" class="btn btn_40" title="8 페이지 이동">8</a></li>
+                <li><a href="#" class="btn btn_40" title="9 페이지 이동">9</a></li>
+                <li><a href="#" class="btn btn_40 active" title="10 페이지 이동">10</a></li>
+                <li><a href="#" class="btn only_icon btn_40 btn_page_next" title="다음 페이지 이동"><i class="icon page_next"></i></a></li>
+                <li><a href="#" class="btn only_icon btn_40 btn_page_last" title="마지막 페이지 이동"><i class="icon page_last"></i></a></li>    
+            </ul>
+            </p>
+            <textarea style="height:350px;">
+                <ul class="page">
+                    <li><a href="#" class="btn only_icon btn_40 btn_page_first" title="첫 페이지 이동"><i class="icon page_first"></i></a></li>
+                    <li><a href="#" class="btn only_icon btn_40 btn_page_prev" title="이전 페이지 이동"><i class="icon page_prev"></i></a></li>
+                    <li><a href="#" class="btn btn_40" title="1 페이지 이동">1</a></li>
+                    <li><a href="#" class="btn btn_40" title="2 페이지 이동">2</a></li>
+                    <li><a href="#" class="btn btn_40" title="3 페이지 이동">3</a></li>
+                    <li><a href="#" class="btn btn_40" title="4 페이지 이동">4</a></li>
+                    <li><a href="#" class="btn btn_40" title="5 페이지 이동">5</a></li>
+                    <li><a href="#" class="btn btn_40" title="6 페이지 이동">6</a></li>
+                    <li><a href="#" class="btn btn_40" title="7 페이지 이동">7</a></li>
+                    <li><a href="#" class="btn btn_40" title="8 페이지 이동">8</a></li>
+                    <li><a href="#" class="btn btn_40" title="9 페이지 이동">9</a></li>
+                    <li><a href="#" class="btn btn_40 active" title="10 페이지 이동">10</a></li>
+                    <li><a href="#" class="btn only_icon btn_40 btn_page_next" title="다음 페이지 이동"><i class="icon page_next"></i></a></li>
+                    <li><a href="#" class="btn only_icon btn_40 btn_page_last" title="마지막 페이지 이동"><i class="icon page_last"></i></a></li>        
+                </ul>
+            </textarea>
+        </dd>
+    </dl>
+    <h2 id="list">list</h2>
+    <dl>
+        <dt>Web화면</dt>
+        <dd><p><div class="table_type_cols">
+            <table>
+              <colgroup>
+                <col style="width:68px;">
+                <col style="width:25%;">
+                <col style="width:auto;">
+                <col style="width:5%;">
+                <col style="width:10%;">
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>번호</th>
+                  <th>유형</th>
+                  <th>제목</th>
+                  <th>결과</th>
+                  <th>조회수</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="tr_list_none">
+                  <td colspan="5" class="list_none">등록된 데이터가 없습니다.</td>
+                </tr>
+                <tr>
+                  <td class="table_number">330</td>
+                  <td><i class="icon td_type hide td_icon"></i>기타의 불이익제공-③ 기타 분쟁</td>
+                  <td class="td_title"><a href="#none" class="list_title">(가맹) 법에서 조정제외대상으로 지정한 것은 무엇입니까?</a></td>
+                  <td><i class="icon td_result hide td_icon"></i>성립</td>
+                  <td><i class="icon td_view hide td_icon"></i>110</td>
+                </tr>
+                <tr>
+                  <td class="table_number">330</td>
+                  <td><i class="icon td_type hide td_icon"></i>불공정거래행위-부당한 손해배상의무 부담</td>
+                  <td class="td_title"><a href="#none" class="list_title">(가맹)(2021)(편의점 가맹본부의 부당한 손해배상 의무 부담 관련 분쟁조정 사례)</a></td>
+                  <td><i class="icon td_result hide td_icon"></i>성립</td>
+                  <td><i class="icon td_view hide td_icon"></i>110</td>
+                </tr>
+              </tbody>
+            </table>
+          </div></p>
+          <textarea style="height:300px;">
+            <div class="table_type_cols">
+                <table>
+                  <colgroup>
+                    <col style="width:68px;">
+                    <col style="width:25%;">
+                    <col style="width:auto;">
+                    <col style="width:5%;">
+                    <col style="width:10%;">
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th>번호</th>
+                      <th>유형</th>
+                      <th>제목</th>
+                      <th>결과</th>
+                      <th>조회수</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr class="tr_list_none">
+                      <td colspan="5" class="list_none">등록된 데이터가 없습니다.</td>
+                    </tr>
+                    <tr>
+                      <td class="table_number">330</td>
+                      <td><!-- 모바일화면 유형 아이콘 --><i class="icon td_type hide td_icon"></i>기타의 불이익제공-③ 기타 분쟁</td>
+                      <td class="td_title"><a href="#none" class="list_title">(가맹) 법에서 조정제외대상으로 지정한 것은 무엇입니까?</a></td>
+                      <td><!-- 모바일화면 결과 아이콘--><i class="icon td_result hide td_icon"></i>성립</td>
+                      <td><!-- 모바일화면 조회수 아이콘--><i class="icon td_view hide td_icon"></i>110</td>
+                    </tr>
+                    <tr>
+                      <td class="table_number">330</td>
+                      <td><i class="icon td_type hide td_icon"></i>불공정거래행위-부당한 손해배상의무 부담</td>
+                      <td class="td_title"><a href="#none" class="list_title">(가맹)(2021)(편의점 가맹본부의 부당한 손해배상 의무 부담 관련 분쟁조정 사례)</a></td>
+                      <td><i class="icon td_result hide td_icon"></i>성립</td>
+                      <td><i class="icon td_view hide td_icon"></i>110</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+          </textarea>
+        </dd>
+    </dl>
+
+    <h2 id="mbc">메인 콘텐츠 - 조정사례 유형별 박스 색상</h2>
+    <dl>
+        <dt>공정거래 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0;"><p><div class="case_content">
+            <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 6" style="width:200px;">
+              <p class="case_type_box orange">공정거래</p>
+        </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box orange">공정거래</p></textarea></p>
+        </dd>
+    </dl>
+    <dl>
+        <dt>가맹사업거래 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0"><p><div class="case_content">
+            <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 6" style="width:200px;">
+                  <p class="case_type_box red">가맹사업거래</p>
+              </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box red">가맹사업거래</p></textarea></p>
+        </dd>
+    </dl>
+    <dl>
+        <dt>하도급거래 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0;"><p><div class="case_content">
+            <div class="swiper-slide" role="group" aria-label="3 / 6" style="width:200px;">
+                  <p class="case_type_box yellow">하도급거래</p>
+              </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box yellow">하도급거래</p></textarea></p>
+        </dd>
+    </dl>
+    <dl>
+        <dt>대규모유통업거래 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0;"><p><div class="case_content">
+            <div class="swiper-slide" role="group" aria-label="4 / 6" style="width:200px;">
+                  <p class="case_type_box darkorange">대규모유통업거래</p>
+              </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box darkorange">대규모유통업거래</p></textarea></p>
+        </dd>
+    </dl>
+    <dl>
+        <dt>불공정약관 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0;"><p><div class="case_content">
+            <div class="swiper-slide" role="group" aria-label="5 / 6" style="width:200px;">
+              <p class="case_type_box darkred">불공정약관</p>
+            </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box darkred">불공정약관</p></textarea></p>
+        </dd>
+    </dl>
+    <dl>
+        <dt>대리점거래 - 타입 박스 색상</dt>
+        <dd style="margin:-70px 0 0 0;"><p><div class="case_content">
+            <div class="swiper-slide" role="group" aria-label="6 / 6" style="width:200px;">
+              <p class="case_type_box darkyellow">대리점거래</p>
+            </div>
+        </div></p>
+        <p style="margin:-70px 0 0 0;"><textarea><p class="case_type_box darkyellow">대리점거래</p></textarea></p>
+        </dd>
+    </dl>
+
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file