From bd7a8bfc4c111142321159bfdf5950fb149a5fa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Thu, 8 May 2025 16:15:29 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=EC=9E=AC=20=EC=A0=81?=
 =?UTF-8?q?=ED=95=A9=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/layout/modal_header_icon03.svg     |   5 +
 .../assets/images/sub/compliance_bx_icon.svg  |   4 +
 .../images/sub/compliance_check_icon.svg      |   4 +
 .../images/sub/compliance_quest_icon.svg      |   4 +
 .../assets/images/sub/compliance_tip_icon.svg |   4 +
 .../assets/images/sub/compliance_x_icon.svg   |   4 +
 src/app/main/page.tsx                         |   2 +-
 src/app/roofcompliance/page.tsx               |  29 ++++
 src/components/PublishList/PublishList.tsx    |  12 ++
 .../roofcompliance/RoofCompliance.tsx         |  80 ++++++++++
 .../RoofComplianceCheckData.tsx               |  64 ++++++++
 .../RoofComplianceDetailPop.tsx               |  32 ++++
 .../nodata/RoofCompliaceNodata.tsx            |   7 +
 .../nosearch/RoofComplianceNoSearch.tsx       |  11 ++
 src/styles/components/_pop-contents.scss      |   7 +
 src/styles/components/_sub.scss               | 147 ++++++++++++++++++
 16 files changed, 415 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/images/layout/modal_header_icon03.svg
 create mode 100644 public/assets/images/sub/compliance_bx_icon.svg
 create mode 100644 public/assets/images/sub/compliance_check_icon.svg
 create mode 100644 public/assets/images/sub/compliance_quest_icon.svg
 create mode 100644 public/assets/images/sub/compliance_tip_icon.svg
 create mode 100644 public/assets/images/sub/compliance_x_icon.svg
 create mode 100644 src/app/roofcompliance/page.tsx
 create mode 100644 src/components/roofcompliance/RoofCompliance.tsx
 create mode 100644 src/components/roofcompliance/RoofComplianceCheckData.tsx
 create mode 100644 src/components/roofcompliance/RoofComplianceDetailPop.tsx
 create mode 100644 src/components/roofcompliance/nodata/RoofCompliaceNodata.tsx
 create mode 100644 src/components/roofcompliance/nosearch/RoofComplianceNoSearch.tsx

diff --git a/public/assets/images/layout/modal_header_icon03.svg b/public/assets/images/layout/modal_header_icon03.svg
new file mode 100644
index 0000000..e15a12c
--- /dev/null
+++ b/public/assets/images/layout/modal_header_icon03.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 2.00372C10.6049 1.99039 9.7047 2.01289 8.8294 2.07107C4.64639 2.34913 1.31441 5.72838 1.04024 9.97072C0.986587 10.8009 0.986587 11.6607 1.04024 12.4909C1.1401 14.036 1.82343 15.4666 2.62791 16.6746C3.09501 17.5203 2.78674 18.5758 2.30021 19.4978C1.94941 20.1626 1.77401 20.495 1.91484 20.7351C2.05568 20.9752 2.37026 20.9829 2.99943 20.9982C4.24367 21.0285 5.08268 20.6757 5.74868 20.1846C6.1264 19.9061 6.31527 19.7668 6.44544 19.7508C6.5756 19.7348 6.83177 19.8403 7.34401 20.0513C7.8044 20.2409 8.33896 20.3579 8.8294 20.3905C10.2536 20.4852 11.7435 20.4854 13.1706 20.3905C17.3536 20.1125 20.6856 16.7332 20.9598 12.4909C21.0021 11.836 21.011 11.1627 20.9866 10.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 14H14.5M7.5 9H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 4.5H21M17.5 1L17.5 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/sub/compliance_bx_icon.svg b/public/assets/images/sub/compliance_bx_icon.svg
new file mode 100644
index 0000000..57c5593
--- /dev/null
+++ b/public/assets/images/sub/compliance_bx_icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="#A8B6C7"/>
+<path d="M7 13L11 9L15 13" stroke="#A8B6C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/sub/compliance_check_icon.svg b/public/assets/images/sub/compliance_check_icon.svg
new file mode 100644
index 0000000..4943e6f
--- /dev/null
+++ b/public/assets/images/sub/compliance_check_icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#F1FFF4" stroke="#6CB67C"/>
+<path d="M7 11.5875L9.5625 14.15L15.2 8" stroke="#6CB67C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/sub/compliance_quest_icon.svg b/public/assets/images/sub/compliance_quest_icon.svg
new file mode 100644
index 0000000..b168463
--- /dev/null
+++ b/public/assets/images/sub/compliance_quest_icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#EFF7FF" stroke="#67A9EF"/>
+<path d="M10.9219 14.7871C11.3002 14.8253 11.5956 15.1448 11.5957 15.5332C11.5957 15.9217 11.3002 16.2411 10.9219 16.2793L10.8457 16.2832H10.833C10.419 16.283 10.083 15.9473 10.083 15.5332C10.0831 15.1192 10.4191 14.7834 10.833 14.7832H10.8457L10.9219 14.7871ZM10.835 5C12.4218 5.00022 13.6687 6.32107 13.6689 7.90039C13.6689 8.4001 13.545 8.87321 13.3252 9.28613L13.2256 9.45898C13.0473 9.74483 12.8377 10.0187 12.6436 10.2676C12.4417 10.5263 12.2576 10.7567 12.0908 10.9932C11.7534 11.4716 11.5851 11.8465 11.585 12.2002V12.7383C11.5847 13.1522 11.2489 13.4881 10.835 13.4883C10.4209 13.4883 10.0852 13.1523 10.085 12.7383V12.2002C10.0851 11.3669 10.4817 10.6716 10.8652 10.1279C11.059 9.85327 11.2756 9.58331 11.4609 9.3457C11.6538 9.09844 11.8192 8.87814 11.9521 8.66504L12.0439 8.49316C12.1238 8.3143 12.1689 8.11368 12.1689 7.90039C12.1687 7.10541 11.55 6.50023 10.835 6.5C10.1198 6.50002 9.50021 7.10528 9.5 7.90039C9.49985 8.31448 9.16412 8.65039 8.75 8.65039C8.33589 8.65037 8.00015 8.31447 8 7.90039C8.00021 6.32095 9.24791 5.00002 10.835 5Z" fill="#67A9EF"/>
+</svg>
diff --git a/public/assets/images/sub/compliance_tip_icon.svg b/public/assets/images/sub/compliance_tip_icon.svg
new file mode 100644
index 0000000..6d7524c
--- /dev/null
+++ b/public/assets/images/sub/compliance_tip_icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#F6F6F6" stroke="#999999"/>
+<path d="M11.0088 13.75C11.5611 13.75 12.0088 14.1977 12.0088 14.75C12.0088 15.3023 11.5611 15.75 11.0088 15.75H11C10.4477 15.75 10 15.3023 10 14.75C10 14.1977 10.4477 13.75 11 13.75H11.0088ZM11 6C11.4142 6 11.75 6.33579 11.75 6.75V11.75C11.75 12.1642 11.4142 12.5 11 12.5C10.5858 12.5 10.25 12.1642 10.25 11.75V6.75C10.25 6.33579 10.5858 6 11 6Z" fill="#999999"/>
+</svg>
diff --git a/public/assets/images/sub/compliance_x_icon.svg b/public/assets/images/sub/compliance_x_icon.svg
new file mode 100644
index 0000000..1b6268c
--- /dev/null
+++ b/public/assets/images/sub/compliance_x_icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#FFF3F7" stroke="#EB6F94"/>
+<path d="M8 8L11 11M11 11L14 14M11 11L14 8M11 11L8 14" stroke="#EB6F94" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index 26ce6d3..5c0375e 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -14,7 +14,7 @@ export default function MainPage(){
       <Footer/>
     </div>
     {/* 회원정보 팝업 */}
-    <MemberInformationPop/>
+    {/* <MemberInformationPop/> */}
     </>
   )
 }
\ No newline at end of file
diff --git a/src/app/roofcompliance/page.tsx b/src/app/roofcompliance/page.tsx
new file mode 100644
index 0000000..12c2bb4
--- /dev/null
+++ b/src/app/roofcompliance/page.tsx
@@ -0,0 +1,29 @@
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+import RoofCompliance from "@/components/roofcompliance/RoofCompliance";
+import RoofComplianceDetailPop from "@/components/roofcompliance/RoofComplianceDetailPop";
+
+export default function RoofCompliancePage(){
+  return(
+    <>
+      <div className="wrap">
+        <Header name={"屋根材適合性の確認"} backBtn={true}/>
+        <div className="container">
+          <div className="sale-contents">
+            <div className="border-frame">
+              <div className="pw-guide">
+                <div className="pw-guide-txt">この適合表は参考資料として使用してください.</div>
+                <div className="pw-guide-txt">詳細やお問い合わせは1：1お問い合わせをご利用ください.</div>
+                <div className="pw-guide-txt">屋根材の選択or屋根材名を直接入力してください.</div>
+              </div>
+            </div>
+            <RoofCompliance/>
+          </div>
+        </div>
+        <Footer/>
+        <button className="top-btn"></button>
+      </div>
+      <RoofComplianceDetailPop/>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx
index cd3574f..8e0c822 100644
--- a/src/components/PublishList/PublishList.tsx
+++ b/src/components/PublishList/PublishList.tsx
@@ -188,6 +188,18 @@ export default function PublishList (){
                     </td>
                     <td className='c red'>2025/04/30</td>
                   </tr>
+                  <tr>
+                    <td>지붕재 적합성성</td>
+                    <td>지붕재 적합성 페이지</td>
+                    <td>
+                      <Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c red'>2025/05/08</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
diff --git a/src/components/roofcompliance/RoofCompliance.tsx b/src/components/roofcompliance/RoofCompliance.tsx
new file mode 100644
index 0000000..419d1b5
--- /dev/null
+++ b/src/components/roofcompliance/RoofCompliance.tsx
@@ -0,0 +1,80 @@
+'use client'
+import { useState } from "react"
+import RoofComplianceNodata from "./nodata/RoofCompliaceNodata";
+import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch";
+import RoofComplianceCheckData from "./RoofComplianceCheckData";
+
+export default function RoofCompliance(){
+  const [reference, setReference] = useState(false);
+  return(
+    <div className="border-frame">
+      <div className="sale-form-bx">
+        <select className="select-form" name="" id="">
+          <option value="">屋根材を選択してください.</option>
+          <option value="">屋根材を選択してください.</option>
+          <option value="">屋根材を選択してください.</option>
+          <option value="">屋根材を選択してください.</option>
+          <option value="">屋根材を選択してください.</option>
+        </select>
+      </div>
+      <div className="sale-form-bx">
+        <div className="search-input">
+          <input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください."/>
+          <button className="search-icon"></button>
+        </div>
+      </div>
+      <div className="compliance-check-wrap">
+        <div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
+          <div className="check-name-wrap">
+            <div className="check-name">凡例</div>
+            <div className="check-name-btn">
+              <button className="bx-btn" onClick={() => setReference(!reference)}></button>
+            </div>
+          </div>
+          <ul className= "reference-list">
+            <li className="reference-item">
+              <div className="reference-item-bx">
+                <i className="compliance-icon check"></i>設置可能
+              </div>
+            </li>
+            <li className="reference-item">
+              <div className="reference-item-bx">
+                <i className="compliance-icon x"></i>設置可能
+              </div>
+            </li>
+            <li className="reference-item">
+              <div className="reference-item-bx"> 
+                <i className="compliance-icon quest"></i>設置可能
+              </div>
+            </li>
+            <li className="reference-item">
+              <div className="reference-item-bx">
+                <i className="compliance-icon tip"></i>設置可能
+              </div>
+            </li>
+          </ul>
+        </div>
+        {/* checkData */}
+        <RoofComplianceCheckData/>
+        <RoofComplianceCheckData/>
+        <RoofComplianceCheckData/>
+        <RoofComplianceCheckData/>
+      </div>
+      <div className="btn-flex-wrap com">
+        <div className="btn-bx">
+          <button className="btn-frame n-blue icon">全選択<i className="btn-arr"></i></button>
+        </div>
+        <div className="btn-bx">
+          <button className="btn-frame red icon">詳細を見る<i className="btn-arr"></i></button>
+        </div>
+        <div className="btn-bx">
+          <button className="btn-frame n-blue icon">選択ダウンロード<i className="btn-arr"></i></button>
+        </div>
+      </div>
+      {/* 데이터 없을때 */}
+      {/* <RoofComplianceNodata/> */}
+      {/* 검색기록 없을떄 */}
+      {/* <RoofComplianceNoSearch/> */}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/roofcompliance/RoofComplianceCheckData.tsx b/src/components/roofcompliance/RoofComplianceCheckData.tsx
new file mode 100644
index 0000000..7762c3a
--- /dev/null
+++ b/src/components/roofcompliance/RoofComplianceCheckData.tsx
@@ -0,0 +1,64 @@
+export default function RoofComplianceCheckData(){
+  return(
+    <div className={`compliance-check-bx act`}>
+      <div className="check-name-wrap">
+          <div className="check-form-box com-tit">
+            <input type="checkbox" id="ch01"/>
+            <label htmlFor="ch01">アースティ４０</label>
+          </div>
+        <div className="check-name-btn">
+          <button className="bx-btn"></button>
+        </div>
+      </div>
+      <ul className= "reference-list check">
+        <li className="reference-item">
+          <div className="check-item-wrap">
+            <div className="check-form-box com-txt">
+              <input type="checkbox" id="ch02"/>
+              <label htmlFor="ch02">屋根技研 支持瓦</label>
+            </div>
+            <div className="compliance-icon-wrap">
+              <i className="compliance-icon check"></i>
+              <i className="compliance-icon x"></i>
+            </div>
+          </div>
+        </li>
+        <li className="reference-item">
+          <div className="check-item-wrap">
+            <div className="check-form-box com-txt">
+              <input type="checkbox" id="ch03"/>
+              <label htmlFor="ch03">屋根技研 支持金具</label>
+            </div>
+            <div className="compliance-icon-wrap">
+              <i className="compliance-icon x"></i>
+              <i className="compliance-icon tip"></i>
+            </div>
+          </div>
+        </li>
+        <li className="reference-item">
+          <div className="check-item-wrap">
+            <div className="check-form-box com-txt">
+              <input type="checkbox" id="ch04"/>
+              <label htmlFor="ch04">屋根技研YGアンカー</label>
+            </div>
+            <div className="compliance-icon-wrap">
+              <i className="compliance-icon tip"></i>
+              <i className="compliance-icon quest"></i>
+            </div>
+          </div>
+        </li>
+        <li className="reference-item">
+          <div className="check-item-wrap">
+            <div className="check-form-box com-txt">
+              <input type="checkbox" id="ch05"/>
+              <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
+            </div>
+            <div className="compliance-icon-wrap">
+              <i className="compliance-icon check"></i>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/roofcompliance/RoofComplianceDetailPop.tsx b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
new file mode 100644
index 0000000..2c8e001
--- /dev/null
+++ b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
@@ -0,0 +1,32 @@
+export default function RoofComplianceDetailPop(){
+  return(
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <div className="modal-header-inner">
+              <div className="modal-name-wrap">
+                <div className="modal-img"> 
+                  <img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
+                </div>
+                <div className="modal-name">屋根材適合性詳細 </div>
+              </div>
+              <button className="modal-close"></button>
+            </div>
+          </div>
+          <div className="modal-body">
+          <div className={`compliance-check-bx act`}>
+              <div className="check-name-wrap">
+                <div className="check-name">アースティ４０</div>
+                <div className="check-name-btn">
+                  <button className="bx-btn"></button>
+                </div>
+              </div>
+              <div className="compliance-check-pop-contents"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/roofcompliance/nodata/RoofCompliaceNodata.tsx b/src/components/roofcompliance/nodata/RoofCompliaceNodata.tsx
new file mode 100644
index 0000000..f586288
--- /dev/null
+++ b/src/components/roofcompliance/nodata/RoofCompliaceNodata.tsx
@@ -0,0 +1,7 @@
+export default function RoofComplianceNodata(){
+  return(
+    <div className="compliace-nodata">
+      屋根材の選択or屋根材名を直接入力してください.
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/roofcompliance/nosearch/RoofComplianceNoSearch.tsx b/src/components/roofcompliance/nosearch/RoofComplianceNoSearch.tsx
new file mode 100644
index 0000000..45512ac
--- /dev/null
+++ b/src/components/roofcompliance/nosearch/RoofComplianceNoSearch.tsx
@@ -0,0 +1,11 @@
+export default function RoofComplianceNoSearch(){
+  return(
+    <div className="compliace-nosearch">
+      <span className="mb10">検索結果はありません。</span>
+      <span className="mb10">屋根材適合性表にない製品の情報を入力してください。 今後返信いたします。</span>
+      <span>
+        <button className="btn-frame n-blue icon">お問い合わせ登録<i className="btn-arr"></i></button>
+      </span>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/styles/components/_pop-contents.scss b/src/styles/components/_pop-contents.scss
index 88180a2..3eb796b 100644
--- a/src/styles/components/_pop-contents.scss
+++ b/src/styles/components/_pop-contents.scss
@@ -33,4 +33,11 @@
   .btn-flex-wrap{
     margin-top: 20px;
   }
+}
+
+// 지붕재 적합성 상세
+.compliance-check-pop-contents{
+  padding: 14px;
+  border-top: 1px solid #ECECEC;
+  margin-top: 10px;
 }
\ No newline at end of file
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
index 9e4d04f..9f52715 100644
--- a/src/styles/components/_sub.scss
+++ b/src/styles/components/_sub.scss
@@ -29,6 +29,14 @@
   .btn-bx{
     flex: 1;
   }
+  &.com{
+    .btn-bx{
+      flex: 1 1 auto;
+      button{
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 // 매물 common
@@ -462,6 +470,145 @@
   }
 }
 
+// 지붕재 적합성
+.compliance-icon{
+  display: block;
+  width: 22px;
+  height: 22px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  &.check{
+    background-image: url(/assets/images/sub/compliance_check_icon.svg);
+  }
+  &.x{
+    background-image: url(/assets/images/sub/compliance_x_icon.svg);
+  }
+  &.quest{
+    background-image: url(/assets/images/sub/compliance_quest_icon.svg);
+  }
+  &.tip{
+    background-image: url(/assets/images/sub/compliance_tip_icon.svg);
+  }
+}
+.compliance-check-wrap{
+  padding-top: 10px;
+}
+.compliance-check-bx{
+  position: relative;
+  padding: 14px 18px;
+  border: 1px solid #EFEFEF;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  &:last-child{
+    margin-bottom: 0;
+  }
+  &.act{
+    .bx-btn{
+      transform: rotate(0) !important;
+    }
+    .reference-list{
+      display: block
+    }
+  }
+}
+.check-name-wrap{
+  @include flex(0px);
+  align-items: center;
+  .check-name{
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+  }
+  .check-name-btn{
+    margin-left: auto;
+    .bx-btn{
+      display: block;
+      width: 22px;
+      height: 22px;
+      background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
+      transform: rotate(180deg);
+    }
+  }
+}
+.reference-list{
+  display: none;
+  margin-top: 10px;
+  padding-top: 14px;
+  border-top: 1px solid #ECECEC;
+  transition: all .15s ease-in-out;
+  .reference-item{
+    margin-bottom: 8px;
+    padding-left: 14px;
+    .reference-item-bx{
+      @include flex(10px);
+      @include defaultFont($font-s-13, $font-w-400, $font-c);
+      align-items: center;
+    }
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+  &.check{
+    .reference-item{
+      margin-bottom: 14px;
+    }
+  }
+}
+.compliace-nodata{
+  margin-top: 24px;
+  padding: 30px 0;
+  @include defaultFont($font-s-13, $font-w-400, $font-c);
+  text-align: center;
+}
+.compliace-nosearch{
+  padding: 30px 0;
+  span{
+    display: block;
+    @include defaultFont($font-s-13, $font-w-400, $font-c);
+    text-align: center;
+  }
+}
+.check-form-box{
+  &.com-tit{
+    label{
+      &:before{
+        width: 20px;
+        height: 20px;
+        top: 0;
+      }
+    }
+    input[type="checkbox"]:checked + label{
+      font-weight: 500;
+      &::after{
+        left: -1px;
+      }
+    }
+  } 
+  &.com-txt{
+    label{
+      @include defaultFont($font-s-13, $font-w-400, #8595A7);
+      &:before{
+        width: 20px;
+        height: 20px;
+        top: 0;
+      }
+    }
+    input[type="checkbox"]:checked + label{
+      &::after{
+        left: -1px;
+      }
+    }
+  } 
+}
+.check-item-wrap{
+  display: flex; 
+  align-items: center;
+}
+.compliance-icon-wrap{
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
 @media screen and (max-width: 360px){
   .btn-flex-wrap{
     flex-direction: column;