index_back.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <HTML lang="ko">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>UPRO</title>
  7. <meta name="format-detection" content="telephone=no">
  8. <link rel="stylesheet" type="text/css" href="/css/swiper.min.css">
  9. <link rel="stylesheet" type="text/css" href="/css/common.css">
  10. <link rel="stylesheet" type="text/css" href="/css/main.css">
  11. <script type="text/javascript" charset="utf-8" src="/js/jquery-1.11.2.min.js"></script>
  12. <script type="text/javascript" charset="utf-8" src="/js/swiper.min.js"></script>
  13. <script type="text/javascript" charset="utf-8" src="/js/ui.js"></script>
  14. </head>
  15. <body>
  16. <!-- s : header -->
  17. <? include("include/inc_header.html"); ?>
  18. <!-- // e : header -->
  19. <section id="wrap">
  20. <section id="visual" class="swiper-container">
  21. <ul class="swiper-wrapper">
  22. <li class="swiper-slide"><img src="/img/@main_visual.jpg"></li>
  23. <li class="swiper-slide"><img src="/img/@main_visual.jpg"></li>
  24. <li class="swiper-slide"><img src="/img/@main_visual.jpg"></li>
  25. <li class="swiper-slide"><img src="/img/@main_visual.jpg"></li>
  26. </ul>
  27. <div class="swiper-button-next"></div>
  28. <div class="swiper-button-prev"></div>
  29. <div class="swiper-pagination"></div>
  30. <div class="scroll"><span></span><span></span><span></span></div>
  31. </section>
  32. <section class="main_con1">
  33. <div class="bg"></div>
  34. <ul>
  35. <li><span></span>1분<br>간편신청</li>
  36. <li><span></span>최고가<br>경쟁입찰</li>
  37. <li><span></span>감가없이<br>판매완료</li>
  38. </ul>
  39. </section>
  40. <section class="main_con2">
  41. <dl class="mobile">
  42. <dt>스마트폰으로<br>쉽<em>/</em>고<em>/</em>빠<em>/</em>르<em>/</em>게</dt>
  43. <dd class="txt">중고차 딜러들의 경쟁 입찰로<br>타시던 차를 최고 매입가에 판매하세요</dd>
  44. <dd class="btn"><a href="#">Google Play</a><a href="#">App Store</a></dd>
  45. </dl>
  46. </section>
  47. <section class="main_con3">
  48. <h2>자주 묻는 질문</h2>
  49. <p class="more"><a href="#">+ 더 많은 질문보기</a></p>
  50. <ul class="faq">
  51. <li>
  52. <p>내 차의 가격은 어떻게 산정되나요?</p>
  53. <div class="a">홈서비스 담당자가 고객님이 원하시는 장소로 무료 방문 후 약 5~10분 정도 차량을 점검한 후 시세 대비 최고가를 산정하여 안내해 드립니다. 홈서비스 담당자가 고객님이 원하시는 장소로 무료 방문 후 약 5~10분 정도 차량을 점검한 후 시세 대비 최고가를 산정하여 안내해 드립니다.</div>
  54. </li>
  55. <li>
  56. <p>접수 후 방문까지 걸리는 시간은 어느 정도 인가요?</p>
  57. <div class="a">글쎄요</div>
  58. </li>
  59. <li>
  60. <p>전화로 대략적인 견적을 알 수 있을까요??</p>
  61. <div class="a">글쎄요</div>
  62. </li>
  63. <li>
  64. <p>방문 견적 요청 시 비용이 발생하나요?</p>
  65. <div class="a">글쎄요</div>
  66. </li>
  67. <li>
  68. <p>공휴일/ 주말에도 방문이 가능한가요?</p>
  69. <div class="a">글쎄요</div>
  70. </li>
  71. <li>
  72. <p>방문 견적 받은 후 차량 매각은 언제까지 결정해야 하나요?</p>
  73. <div class="a">글쎄요</div>
  74. </li>
  75. <li>
  76. <p>차량 매각 시 내 명의로 가입된 자동차 보험은 어떻게 해야 하나요?</p>
  77. <div class="a">글쎄요</div>
  78. </li>
  79. <li>
  80. <p>명의 이전은 내가 직접 해야 하나요?</p>
  81. <div class="a">글쎄요</div>
  82. </li>
  83. <li>
  84. <p>할부나 리스로 구입한 차량도 매각이 가능한가요?</p>
  85. <div class="a">글쎄요</div>
  86. </li>
  87. <li>
  88. <p>서비스 이용 제한 지역이 있나요?</p>
  89. <div class="a">글쎄요</div>
  90. </li>
  91. </ul>
  92. </section>
  93. <section class="main_con4">
  94. <div class="inner">
  95. <h2>실시간 접수 현황</h2>
  96. <p class="date">2018.10.17</p>
  97. <ul class="num_estimate">
  98. <li><em>5,658</em> 오늘의 견적 조회수</li>
  99. <li><em>23,431,845</em> 누적 견적 조회수</li>
  100. <li><em>80,659</em> 총 접수량</li>
  101. </ul>
  102. </div>
  103. </section>
  104. </section>
  105. <!-- s : footer -->
  106. <? include("include/inc_footer.html"); ?>
  107. <!-- // e : footer -->
  108. <script>
  109. var swiper = new Swiper('.swiper-container', {
  110. speed : 1000,
  111. autoplay: {
  112. delay: 4500,
  113. disableOnInteraction: false,
  114. },
  115. loop : true,
  116. navigation: {
  117. nextEl: '.swiper-button-next',
  118. prevEl: '.swiper-button-prev',
  119. },
  120. pagination: {
  121. el: '.swiper-pagination',
  122. clickable: true,
  123. },
  124. });
  125. function loopArr(){
  126. $(".scroll span:nth-child(1)").animate({ 'opacity' : '1'}, 200)
  127. .animate({ 'opacity' : '0.3'}, 200)
  128. .animate({ 'opacity' : '0.5'}, 200, loopArr);
  129. }
  130. function loopArr2(){
  131. $(".scroll span:nth-child(2)").animate({ 'opacity' : '0.5'}, 200)
  132. .animate({ 'opacity' : '1'}, 200)
  133. .animate({ 'opacity' : '0.3'}, 200, loopArr2);
  134. }
  135. function loopArr3(){
  136. $(".scroll span:nth-child(3)").animate({ 'opacity' : '0.3'}, 200)
  137. .animate({ 'opacity' : '0.5'}, 200)
  138. .animate({ 'opacity' : '1'}, 200, loopArr3);
  139. }
  140. loopArr();loopArr2();loopArr3();
  141. </script>
  142. </body>
  143. </html>