Merge branch 'sub'

This commit is contained in:
subsub 2024-12-09 15:04:16 +09:00
commit 797e4d22b1
10 changed files with 572 additions and 12 deletions

View File

@ -343,7 +343,7 @@
<dd> <dd>
<div class="file_upload_wrap"> <div class="file_upload_wrap">
<div class="file_button"> <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> </div>
<ul class="file_list fill"> <ul class="file_list fill">
<div class="cs-files fl" id="upFileHtml1"> <div class="cs-files fl" id="upFileHtml1">
@ -384,7 +384,7 @@
<dd> <dd>
<div class="file_upload_wrap"> <div class="file_upload_wrap">
<div class="file_button"> <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> </div>
<ul class="file_list fill"> <ul class="file_list fill">
<div class="cs-files fl" id="upFileHtml2"> <div class="cs-files fl" id="upFileHtml2">
@ -406,7 +406,7 @@
<dd> <dd>
<div class="file_upload_wrap"> <div class="file_upload_wrap">
<div class="file_button"> <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> </div>
<ul class="file_list fill"> <ul class="file_list fill">
<div class="cs-files fl" id="upFileHtml3"> <div class="cs-files fl" id="upFileHtml3">
@ -425,7 +425,7 @@
<dd> <dd>
<c:forEach items="${trublreqstmngCaseFileList}" var="file" varStatus="status"> <c:forEach items="${trublreqstmngCaseFileList}" var="file" varStatus="status">
<c:if test="${file.fileGubun == '4812000000'}"> <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> <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> </div>
</c:if> </c:if>
@ -435,7 +435,7 @@
<dd> <dd>
<div class="file_upload_wrap"> <div class="file_upload_wrap">
<div class="file_button"> <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> </div>
<ul class="file_list fill"> <ul class="file_list fill">
<div class="cs-files fl" id="upFileHtml3"> <div class="cs-files fl" id="upFileHtml3">

View File

@ -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: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 *{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="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 .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 .logo {text-align:center; margin-top:15px;}
.pop-address-search .pop-address-search-inner .exam {text-align:left; margin-top:5px} .pop-address-search .pop-address-search-inner .exam {text-align:left; margin-top:5px}

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

View File

@ -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> <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> </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> </div>

View File

@ -39,6 +39,7 @@
.btn.orange_fill{background:#f96502;color:#fff;} .btn.orange_fill{background:#f96502;color:#fff;}
.btn.orange_fill:hover{background:#eb5e00;} .btn.orange_fill:hover{background:#eb5e00;}
.btn.orange_border{border:1px solid #f96502;color:#f96502;} .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, select, textarea */
.input_box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .input_box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

View File

@ -1,10 +1,10 @@
@charset "utf-8"; @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;} .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;} .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;} .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;} .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;} .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;}
/* 팝업 */ /* 팝업 */

View File

@ -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 .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{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;} .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;} .layer_popup.cert_popup .box.gray_border>p{margin:0 0 10px 0;}

View File

@ -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 .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{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_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_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;} .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 .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%);} .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){ @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{margin:60px 0 0 0;justify-content:center;}
.total_search .btn_wrap.right button{width:25%;} .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{margin:30px 0 0 0;}
.total_search .btn_wrap.right button{width:25%;} .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){ @media screen and (max-width: 499px){

View File

@ -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>