You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

397 lines
15 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  6. <title>메인 페이지</title>
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
  8. <link rel="stylesheet" href="./assets/css/style.min.css">
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  10. <script src="./assets/js/common.min.js"></script>
  11. </head>
  12. <body>
  13. <!--S: 숨김 메뉴-->
  14. <ul class="sr-only sr-only-focusable">
  15. <li><a href="#contents">컨텐츠 바로가기</a></li>
  16. <li><a href="#nav">메뉴 바로가기</a></li>
  17. </ul>
  18. <!--E: 숨김 메뉴-->
  19. <!--S: 헤더 영역-->
  20. <header class="section">
  21. <div class="container">
  22. <div class="logo-group">
  23. <div class="logo">
  24. <img src="./images/logo.png" alt="로고">
  25. <a href="#">대한탐정연합회</a>
  26. </div>
  27. </div>
  28. <nav class="menu-group">
  29. <ul class="main-menu depth-1">
  30. <li class="depth-1-item item-list">
  31. <a href="#" class="first-target">협회소개</a>
  32. <ul class="depth-2">
  33. <li><a href="#">중앙회장 인사말</a></li>
  34. <li><a href="#">협회 연혁</a></li>
  35. <li><a href="#">협회 조직도</a></li>
  36. <li><a href="#">협회 정관</a></li>
  37. <li><a href="#">신조 및 윤리강령</a></li>
  38. <li><a href="#">대탐연 저서소개</a></li>
  39. <li><a href="#">협력기관</a></li>
  40. <li><a href="#">찾아오시는길</a></li>
  41. </ul>
  42. </li>
  43. <li class="depth-1-item item-list">
  44. <a href="#" class="first-target">정보탐색사란</a>
  45. <ul class="depth-2">
  46. <li><a href="#">정탐사자격시험 안내</a></li>
  47. <li><a href="#">정탐사 운영규정</a></li>
  48. <li><a href="#">민간자격 등록요건<br>및 이행조건</a></li>
  49. </ul>
  50. </li>
  51. <li class="depth-1-item item-list">
  52. <a href="#" class="first-target">시험공고</a>
  53. <ul class="depth-2">
  54. <li><a href="#">검정시험 공고문</a></li>
  55. <li><a href="#">공고문</a></li>
  56. <li><a href="#">최고위 과정 공고문</a></li>
  57. <li><a href="#">합격자발표</a></li>
  58. </ul>
  59. </li>
  60. <li class="depth-1-item ">
  61. <a href="#" class="first-target">원격강의</a>
  62. </li>
  63. <li class="depth-1-item item-list">
  64. <a href="#" class="first-target">자료실</a>
  65. <ul class="depth-2">
  66. <li><a href="">응시원서(매니저급)</a></li>
  67. <li><a href="">응시원서(1급)</a></li>
  68. <li><a href="#">최고위(CEO) 지원서</a></li>
  69. <li><a href="#">기본(보수)교육 <br>신청서</a></li>
  70. <li><a href="#">접수취소 및 환불 <br>신청서</a></li>
  71. </ul>
  72. </li>
  73. <li class="depth-1-item item-list">
  74. <a href="#" class="first-target">고객지원</a>
  75. <ul class="depth-2">
  76. <li><a href="#">공지사항</a></li>
  77. <li><a href="#">탐정관련 기고</a></li>
  78. <li><a href="#">보도자료</a></li>
  79. <li><a href="#">자주묻는질문</a></li>
  80. <li><a href="#">시험관련문의</a></li>
  81. </ul>
  82. </li>
  83. </ul>
  84. </nav>
  85. <div class="btn">
  86. <a href="#" class="sign-in">로그인</a>
  87. <a href="#" class="sign-up">회원가입</a>
  88. </div>
  89. </div>
  90. </header>
  91. <!--E: 헤더 영역-->
  92. <!--S: 컨텐츠 영역-->
  93. <section id="contents">
  94. <div class="body--container">
  95. <!-- VISUAL-->
  96. <section class="section section--visual">
  97. <div class="full-slide swiper-container">
  98. <ul class="swiper-wrapper">
  99. <li class="swiper-slide">
  100. <img src="images/main_bg.png" alt="">
  101. <a href="">
  102. <h2>탐정 <span>[</span>최고위 과정<span>]</span></h2>
  103. <p>여기에 들어갈 세부 내용이 있었으면 좋겠습니다.</p>
  104. </a>
  105. </li>
  106. <li class="swiper-slide">
  107. <img src="images/main_bg.png" alt="">
  108. <a href="">
  109. <h2>탐정 <span>[</span>최고위 과정<span>]</span></h2>
  110. <p>여기에 들어갈 세부 내용이 있었으면 좋겠습니다.</p>
  111. </a>
  112. </li>
  113. <li class="swiper-slide">
  114. <img src="images/main_bg.png" alt="">
  115. <a href="">
  116. <h2>탐정 <span>[</span>최고위 과정<span>]</span></h2>
  117. <p>여기에 들어갈 세부 내용이 있었으면 좋겠습니다.</p>
  118. </a>
  119. </li>
  120. </ul>
  121. <div class="swiper-pagination"></div>
  122. </div>
  123. <div class="container">
  124. <ul class="tails">
  125. <li>
  126. <a href="#">
  127. <img src="./images/apply.png" alt="">
  128. <p>원서접수</p>
  129. </a>
  130. </li>
  131. <li>
  132. <a href="#">
  133. <img src="./images/pass_notify.png" alt="">
  134. <p>합격자발표</p>
  135. </a>
  136. </li>
  137. <li>
  138. <a href="#">
  139. <img src="./images/test_sc.png" alt="">
  140. <p>시험공고</p>
  141. </a>
  142. </li>
  143. <li>
  144. <a href="#">
  145. <img src="./images/top_test.png" alt="">
  146. <p>최고위과정</p>
  147. </a>
  148. </li>
  149. <li>
  150. <a href="#">
  151. <img src="images/location_info.png" alt="">
  152. <p>고사장안내</p>
  153. </a>
  154. </li>
  155. </ul>
  156. </div>
  157. </section>
  158. <!--SECTION NEWS-->
  159. <div class="section section--news">
  160. <div class="container">
  161. <div class="notice">
  162. <div class="title">
  163. <h1>Notice </h1>
  164. <h2>협회소식</h2>
  165. <p>탐정연합회의 이슈와 <br>정보를 안내해 드립니다.</p>
  166. <a href="#">바로가기</a>
  167. </div>
  168. <div class="content">
  169. <ul class="news-btn">
  170. <li class="tab-btn1 border_bottom"><a href="">공지사항</a></li>
  171. <li class="tab-btn2 border_bottom"><a href="">탐정관련기고</a></li>
  172. <li class="tab-btn3 border_bottom"><a href="">보도자료</a></li>
  173. </ul>
  174. </div>
  175. <div class="news-list-container">
  176. <ul class="news-list ">
  177. <li class="content-news first-content">
  178. <h3><a href="">대한공인참정협회</br>2018 임시총회 개최 안내</a></h3>
  179. <p class="content-text">민족의 명절 '설'을 맞이하여 모든 회원님들 가정과 사업에 만복이 깃드시길 기원합니다.</p>
  180. <p class="date">2019 08 30</p>
  181. </li>
  182. <li class="content-news second-news">
  183. <h3><a href="">해외 6개국 현지인 회장 임명식</a></h3>
  184. <p class="content-text">금번에 임명된 해외 국가별 협회장은 모두 태권도 국제심판으로 오랜 세월 동안 우리나라 국기인 태권도를 수 33333</p>
  185. <p class="date">2019 08 30</p>
  186. </li>
  187. <li class="content-news second-news">
  188. <h3><a href="">해외 6개국 현지인 회장 임명식</a></h3>
  189. <p class="content-text ">금번에 임명된 해외 국가별 협회장은 모두 태권도 국제심판으로 오랜 세월 동안 우리나라 국기인 태권도를 수 333333</p>
  190. <p class="date">2019 08 30</p>
  191. </li>
  192. </ul>
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </section>
  198. <section class="section section--gallery">
  199. <div class="container">
  200. <div id="test-slide" class="gallery-container swiper-container">
  201. <h2>협회 갤러리</h2>
  202. <ul class="gallery-items swiper-wrapper">
  203. <li class="swiper-slide">
  204. <a href="#">
  205. <img src="./images/gallery_1.png" alt="사진1">
  206. <div class="text-container">
  207. <h3 class="gallery-title">2018년 11월 10일 탐정협회 행사</h3>
  208. <p class="">2019.08.03</p>
  209. </div>
  210. </a>
  211. </li>
  212. <li class="swiper-slide">
  213. <a href="#">
  214. <img src="./images/gallery_2.png" alt="사진1">
  215. <div class="text-container">
  216. <h3 class="gallery-title">대한공인탐정연합회,창립 기념 행사</h3>
  217. <p>2002.03.03</p>
  218. </div>
  219. </a>
  220. </li>
  221. <li class="swiper-slide">
  222. <a href="#">
  223. <img src="./images/gallery_3.png" alt="사진1">
  224. <div class="text-container">
  225. <h3 class="gallery-title">11월10일 탐정협회 행사</h3>
  226. <p>2019.08.11</p>
  227. </div>
  228. </a>
  229. </li>
  230. <li class="swiper-slide">
  231. <a href="#">
  232. <img src="./images/gallery_4.png" alt="사진1">
  233. <div class="text-container">
  234. <h3 class="gallery-title">10월 139일 탐정협회 행사</h3>
  235. <p>2019.08.30</p>
  236. </div>
  237. </a>
  238. </li>
  239. <li class="swiper-slide">
  240. <a href="#">
  241. <img src="./images/gallery_1.png" alt="사진1">
  242. <div class="text-container">
  243. <h3 class="gallery-title">gdgd</h3>
  244. <p>2019.08.30</p>
  245. </div>
  246. </a>
  247. </li>
  248. </ul>
  249. <div class="btn-box ">
  250. <a href="#" class="swiper-button-prev"><img src="images/gallery_btn-left.png" alt=""></a>
  251. <a href="" class="swiper-button-next"><img src="images/gallery_btn-right.png" alt=""></a>
  252. </div>
  253. </div>
  254. </div>
  255. </section>
  256. <section class="section section--cashinfo">
  257. <div class="container">
  258. <ul class="cash-question">
  259. <li class="cash-account">
  260. <strong>입금계좌 안내</strong>
  261. <!-- span <img src="images/kb_bank.png" alt="kb은행">-->
  262. <p class="bank-name"><img src="images/kb_logo.png" alt="">KB국민은행</p>
  263. <p class="bankbook-num">1002-345-302828</p>
  264. <p class="account-name">예금주:홍길동</p>
  265. <a href="#" class="btn-cash">실시간계좌이체</a>
  266. <img src="images/bankbook.png" alt="" class="question_img">
  267. </li>
  268. <li class="always-question">
  269. <strong>자주묻는질문</strong>
  270. <p class="question1"><a href="">탐정이 되려면 어떻게 해야하나요</a></p>
  271. <p class="question2"><a href="">회원가입했는데 로그인이 되지 않습니다</a></p>
  272. <p class="question3"><a href="">탐정이 되려면 어떻게 해야하나요</a></p>
  273. <a href="#" class="btn-cash">시험관련문의</a>
  274. <img src="images/question.png" alt="" class="question_img">
  275. </li>
  276. <li class="information">
  277. <strong>고객센터</strong>
  278. <p class="title-num">대표전화번호</p>
  279. <span class="company-number">1588-2020</span>
  280. <p class="open-time">월-토:9:00~18:00,일/공휴일 휴무</p>
  281. <p class="lunch">점심시간:12:00~13:00</p>
  282. <img src="images/call.png" alt="" class="question_img">
  283. </li>
  284. </ul>
  285. <div class="img-container">
  286. <ul class="bottom_img">
  287. <li>
  288. <a href="#"><img src="images/police.png" alt=""></a>
  289. </li>
  290. <li>
  291. <a href="#"><img src="images/krivet.png" alt=""></a>
  292. </li>
  293. <li>
  294. <a href="#"><img src="images/work1.png" alt=""></a>
  295. </li>
  296. <li>
  297. <a href="#"><img src="images/work2.png" alt=""></a>
  298. </li>
  299. <li>
  300. <a href="#"><img src="images/seogank_uni.png" alt=""></a>
  301. </li>
  302. <li>
  303. <a href="#"><img src="images/seowongak.png" alt=""></a>
  304. </li>
  305. </ul>
  306. </div>
  307. </div>
  308. </section>
  309. </div>
  310. <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  311. </section>
  312. <!--E: 컨텐츠 영역-->
  313. <!--S: 푸터 영역-->
  314. <footer class="footer_nav ">
  315. <div class="container">
  316. <ul class="footer_list">
  317. <li><a href="">개인정보보호정책</a></li>
  318. <li><a href="">이용약관</a></li>
  319. <li><a href="">정탐사 운영규정(시험일반규정)</a></li>
  320. <li><a href="">신분증규정</a></li>
  321. <li><a href="">부정행위 처리규정</a></li>
  322. <li><a href="">접수취소 및 환불규정</a></li>
  323. <li><a href="">고객센터</a></li>
  324. </ul>
  325. </div>
  326. <div class="footer_info">
  327. <div class="footer_container">
  328. <ul class="company_address">
  329. <li>주소:서울특별시마포구마포대로15</li>
  330. <li>대표자:정수상</li>
  331. <li>전화번호:02.333.5555</li>
  332. <li>팩스번호:02.6666.6666</li>
  333. </ul>
  334. <ul class="business_num">
  335. <li>사업자등록번호:384-90-00900</li>
  336. <li>통신판매번호:2910-00001 사업자정보</li>
  337. <li>전자우편</li>
  338. </ul>
  339. <p>Copyright@2019대한텀정연합회.All Right Reserved</p>
  340. <img src="images/footer_logo.png" alt="">
  341. </div>
  342. </div>
  343. </footer>
  344. <!--E: 푸터 영역-->
  345. </body>
  346. </html>