layout.css 75 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205
  1. @charset "utf-8";
  2. header{
  3. height:81px;
  4. }
  5. header .header--wrapper{
  6. width:100%;
  7. position:fixed;
  8. top:0px;
  9. left:0px;
  10. z-index: 10;
  11. border-bottom:1px solid #eee;
  12. display:flex;
  13. align-items:center;
  14. justify-content:center;
  15. background:#fff;
  16. }
  17. header .header--wrapper .header--contents{
  18. width:100%;
  19. max-width:1200px;
  20. height:81px;
  21. display:flex;
  22. align-items:center;
  23. justify-content:flex-start;
  24. }
  25. header .header--wrapper .header--contents .logo{
  26. width:132px;
  27. min-width:132px;
  28. height:40px;
  29. background:url(../img/logo.png) no-repeat center;
  30. }
  31. header .header--wrapper .header--contents .gnb--wrapper{
  32. margin-left:110px;
  33. width:100%;
  34. display: flex;
  35. }
  36. header .header--wrapper .header--contents .gnb--wrapper > a{
  37. font-weight: 500;
  38. font-size: 17px;
  39. text-align: center;
  40. letter-spacing: -0.03em;
  41. color: #222222;
  42. margin-right:50px;
  43. }
  44. header .header--wrapper .header--contents .gnb--wrapper > a:last-child{
  45. margin-right:0px;
  46. }
  47. header .header--wrapper .header--contents .gnb--wrapper > a.actv{
  48. color:#417FFA;
  49. font-weight:bold;
  50. }
  51. header .header--wrapper .header--contents .log--menu--wrap{
  52. display: flex;
  53. }
  54. header .header--wrapper .header--contents .log--menu--wrap a{
  55. display: inline-flex;
  56. align-items: center;
  57. justify-content: center;
  58. width:43px;
  59. height:43px;
  60. border-radius: 50px;
  61. margin-right:65px;
  62. }
  63. header .header--wrapper .header--contents .log--menu--wrap a.my--page--btn{
  64. background:url(../img/aap_log_btn01.svg) no-repeat center;
  65. }
  66. header .header--wrapper .header--contents .log--menu--wrap a.log--btn{
  67. background:url(../img/aap_log_btn02.svg) no-repeat center;
  68. }
  69. header .header--wrapper .header--contents .log--menu--wrap a:last-child{
  70. margin-right:0px;
  71. }
  72. .home--contents{
  73. background:url(../img/main_bg.png) no-repeat center 148px;
  74. }
  75. .main--search{
  76. padding-top:155px;
  77. }
  78. .main--search .main--search--wrap h2{
  79. font-weight: 700;
  80. font-size: 55px;
  81. text-align: center;
  82. letter-spacing: -0.03em;
  83. color: #333333;
  84. line-height: 1.5;
  85. }
  86. .main--search .main--search--wrap .main--search--form{
  87. display: flex;
  88. align-items: center;
  89. justify-content: center;
  90. margin-top:70px;
  91. }
  92. .main--search .main--search--wrap .main--search--form input{
  93. width:100%;
  94. max-width:450px;
  95. height: 72px;
  96. background: #FFFFFF;
  97. border: 2px solid #EEEEEE;
  98. border-radius: 12px;
  99. padding-left:30px;
  100. }
  101. .main--search .main--search--wrap .main--search--form input::placeholder{
  102. font-weight: 400;
  103. font-size: 17px;
  104. letter-spacing: -0.03em;
  105. color: #B7B7B7;
  106. }
  107. .main--search .main--search--wrap .main--search--form .search--btn{
  108. width: 150px;
  109. height: 72px;
  110. background: #417FFA;
  111. border-radius: 12px;
  112. display: flex;
  113. align-items: center;
  114. justify-content: center;
  115. font-weight: 700;
  116. font-size: 17px;
  117. text-align: center;
  118. letter-spacing: -0.03em;
  119. color: #FFFFFF;
  120. margin-left:20px;
  121. }
  122. .middle--contents{
  123. margin-top:228px;
  124. padding-bottom:160px;
  125. }
  126. .middle--contents .middle--contents--wrap{
  127. width:100%;
  128. display:flex;
  129. justify-content:center;
  130. }
  131. .middle--contents .middle--contents--wrap .step--wrap{
  132. width:100%;
  133. max-width:1200px;
  134. background: url(../img/phone_bg.png) no-repeat right center;
  135. padding-top:58px;
  136. padding-bottom:98px;
  137. }
  138. .middle--contents .middle--contents--wrap .step--wrap > h2{
  139. font-weight: 300;
  140. font-size: 40px;
  141. line-height: 100%;
  142. letter-spacing: -0.03em;
  143. color: #111111;
  144. }
  145. .middle--contents .middle--contents--wrap .step--wrap > h2 span{
  146. font-weight: 700;
  147. }
  148. .middle--contents .middle--contents--wrap .step--wrap > ul{
  149. position: relative;
  150. margin-top:80px;
  151. }
  152. .middle--contents .middle--contents--wrap .step--wrap > ul:after{
  153. content:'';
  154. display: block;
  155. width:1px;
  156. height:100%;
  157. position: absolute;
  158. top:0px;
  159. left:24px;
  160. z-index: -1;
  161. background: #eee;
  162. }
  163. .middle--contents .middle--contents--wrap .step--wrap > ul > li{
  164. display: flex;
  165. align-items: center;
  166. justify-content:flex-start;
  167. margin-bottom:55px;
  168. }
  169. .middle--contents .middle--contents--wrap .step--wrap > ul > li:last-child{
  170. margin-bottom:0px;
  171. }
  172. .middle--contents .middle--contents--wrap .step--wrap > ul > li .numb{
  173. width: 50px;
  174. height: 50px;
  175. border-radius: 50px;
  176. background: #EEEEEE;
  177. display: flex;
  178. align-items: center;
  179. justify-content: center;
  180. font-weight: 500;
  181. font-size: 13px;
  182. letter-spacing: -0.03em;
  183. color: #A0A0A0;
  184. }
  185. .middle--contents .middle--contents--wrap .step--wrap > ul > li .numb.on{
  186. color:#fff;
  187. background: #417FFA;
  188. }
  189. .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc{
  190. margin-left:25px;
  191. }
  192. .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc h2{
  193. font-weight: 500;
  194. font-size: 18px;
  195. line-height: 100%;
  196. letter-spacing: -0.03em;
  197. color: #111111;
  198. padding:0px;
  199. margin:0px;
  200. }
  201. .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc p{
  202. font-weight: 350;
  203. font-size: 16px;
  204. line-height: 100%;
  205. letter-spacing: -0.03em;
  206. color: #777777;
  207. margin-top:12px;
  208. }
  209. footer{
  210. width:100%;
  211. background: #FAFAFA;
  212. display: flex;
  213. justify-content:center;
  214. }
  215. footer > div{
  216. width:100%;
  217. max-width:1200px;
  218. display:flex;
  219. justify-content:flex-start;
  220. padding-top:35px;
  221. padding-bottom:45px;
  222. }
  223. footer > div .logo{
  224. width:161px;
  225. height:50px;
  226. background: url(../img/foot_logo.png) no-repeat center;
  227. margin-right:104px;
  228. }
  229. footer > div > div p span{
  230. font-weight: 350;
  231. font-size: 15px;
  232. letter-spacing: -0.03em;
  233. color: #333333;
  234. line-height:100%;
  235. padding-right:24px;
  236. position: relative;
  237. }
  238. footer > div > div p span:after{
  239. content:'';
  240. display: block;
  241. width:1px;
  242. height:13px;
  243. background:#c4c4c4;
  244. position: absolute;
  245. top:50%;
  246. transform: translateY(-50%);
  247. right:11px;
  248. margin-top:1px;
  249. }
  250. footer > div > div p span:last-child:after{
  251. display:none;
  252. }
  253. footer > div > div p.copy--right{
  254. margin-top:35px;
  255. font-weight: 350;
  256. font-size: 15px;
  257. line-height: 100%;
  258. text-transform: uppercase;
  259. color: #333333;
  260. }
  261. .main--visual{
  262. width:100%;
  263. height:600px;
  264. background:url(../img/main_slide.jpg) no-repeat center;
  265. }
  266. .main--visual .main--visual--title--wrap{
  267. width:100%;
  268. max-width:1200px;
  269. margin:0 auto;
  270. display: flex;
  271. align-items: flex-start;
  272. justify-content: flex-start;
  273. flex-direction: column;
  274. }
  275. .main--visual .main--visual--title--wrap > h2{
  276. font-weight: 700;
  277. font-size: 35px;
  278. letter-spacing: -0.03em;
  279. color: #FFFFFF;
  280. padding-top:182px;
  281. }
  282. .main--visual .main--visual--title--wrap > p{
  283. font-weight: 300;
  284. font-size: 15px;
  285. letter-spacing: -0.03em;
  286. line-height: 2;
  287. color: #EBEBEB;
  288. margin-top:35px;
  289. }
  290. .main--visual .main--visual--title--wrap .main--visual--contents{
  291. display:flex;
  292. align-items: center;
  293. justify-content: flex-end;
  294. margin-top:134px;
  295. width:100%;
  296. }
  297. .main--visual .main--visual--title--wrap .main--visual--contents .box--01{
  298. width: 76px;
  299. height: 76px;
  300. background: #00C2FF;
  301. box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5);
  302. border-radius: 15px;
  303. display: flex;
  304. align-items: center;
  305. justify-content: center;
  306. flex-direction: column;
  307. }
  308. .main--visual .main--visual--title--wrap .main--visual--contents .box--02{
  309. width: 76px;
  310. height: 76px;
  311. background: #1E75FF;
  312. box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5);
  313. border-radius: 15px;
  314. margin-left:15px;
  315. display: flex;
  316. align-items: center;
  317. justify-content: center;
  318. flex-direction: column;
  319. }
  320. .main--visual .main--visual--title--wrap .main--visual--contents .box--01 h2,
  321. .main--visual .main--visual--title--wrap .main--visual--contents .box--02 h2{
  322. font-weight: 400;
  323. font-size: 13px;
  324. line-height: 100%;
  325. text-align: center;
  326. letter-spacing: -0.03em;
  327. color: #FFFFFF;
  328. padding:0px;
  329. margin:0px;
  330. }
  331. .main--visual .main--visual--title--wrap .main--visual--contents .box--01 div,
  332. .main--visual .main--visual--title--wrap .main--visual--contents .box--02 div{
  333. font-weight: 700;
  334. font-size: 15px;
  335. line-height: 100%;
  336. text-align: center;
  337. color: #FFFFFF;
  338. padding:0px;
  339. margin:0px;
  340. margin-top:12px;
  341. }
  342. .main--visual .main--visual--title--wrap .main--visual--contents .car--find{
  343. width: 520px;
  344. height: 76px;
  345. background: #FFFFFF;
  346. box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5);
  347. border-radius: 12px;
  348. margin-left:45px;
  349. display: flex;
  350. align-items:center;
  351. justify-content: flex-start;
  352. position:relative;
  353. }
  354. .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div:nth-of-type(1){
  355. width:147px;
  356. padding-left:30px;
  357. box-sizing: border-box;
  358. border-right:1px solid #eee;
  359. height:76px;
  360. display: flex;
  361. align-items: flex-start;
  362. justify-content: center;
  363. flex-direction: column;
  364. }
  365. .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div:nth-of-type(2){
  366. padding-left:30px;
  367. }
  368. .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div >h2{
  369. font-weight: 400;
  370. font-size: 13px;
  371. line-height: 100%;
  372. letter-spacing: -0.03em;
  373. color: #7B838A;
  374. padding:0px;
  375. margin:0px;
  376. }
  377. .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div > div{
  378. font-weight: 400;
  379. font-size: 15px;
  380. line-height: 100%;
  381. color: #000000;
  382. margin-top:12px;
  383. }
  384. .main--visual .main--visual--title--wrap .main--visual--contents .car--find .car--find--btn{
  385. position: absolute;
  386. top:50%;
  387. transform: translateY(-50%);
  388. right:20px;
  389. width: 120px;
  390. height: 50px;
  391. background: #1E75FF;
  392. border-radius: 8px;
  393. font-weight: 700;
  394. font-size: 14px;
  395. color: #FFFFFF;
  396. }
  397. .main--visual .main--visual--title--wrap .main--visual--contents .car--find .car--find--btn .zoom--icon{
  398. display: inline-flex;
  399. min-width:13px;
  400. width:13px;
  401. height:13px;
  402. background:url(../img/sch_icon.png) no-repeat center;
  403. margin-left:9px;
  404. position: relative;
  405. top:1px;
  406. }
  407. .car--list--wrap{
  408. max-width:1200px;
  409. margin:0 auto;
  410. padding-top:80px;
  411. }
  412. .car--list--wrap .title--wrapper{
  413. display:flex;
  414. align-items: center;
  415. justify-content: space-between;
  416. }
  417. .car--list--wrap .title--wrapper h2{
  418. font-weight: 700;
  419. font-size: 22px;
  420. line-height: 100%;
  421. letter-spacing: -0.03em;
  422. color: #000000;
  423. }
  424. .car--list--wrap .title--wrapper .more--btn{
  425. font-weight: 700;
  426. font-size: 15px;
  427. line-height: 100%;
  428. letter-spacing: -0.03em;
  429. color: #8B919C;
  430. }
  431. .car--list--wrap .title--wrapper select,
  432. .car--list--wrap .title--wrapper input{
  433. height:45px;
  434. border: 1px solid #D8DEE8;
  435. border-radius:10px;
  436. }
  437. .car--list--wrap .title--wrapper button{
  438. border-radius:10px;
  439. }
  440. .car--list--wrap > ul{
  441. display: flex;
  442. align-items:center;
  443. gap : 45px;
  444. margin-top:40px;
  445. flex-wrap:wrap;
  446. }
  447. .car--list--wrap > ul > li{}
  448. .car--list--wrap > ul > li .car--box--wrap{
  449. background: #F8F8FA;
  450. border-radius: 40px;
  451. padding:40px 0px;
  452. width: 266px;
  453. /*height: 420px;*/
  454. display: flex;
  455. align-items:center;
  456. justify-content:flex-start;
  457. flex-direction:column;
  458. }
  459. .car--list--wrap > ul > li .car--box--wrap .car--name{
  460. width:186px;
  461. max-width:186px;
  462. text-overflow: ellipsis;
  463. white-space: nowrap;
  464. font-family: 'Montserrat';
  465. font-style: normal;
  466. font-weight: 700;
  467. font-size: 18px;
  468. line-height: 1.4;
  469. color: #333237;
  470. text-align: left;
  471. display: block;
  472. overflow:hidden;
  473. margin-bottom:10px;
  474. }
  475. .car--list--wrap > ul > li .car--box--wrap.on{
  476. border: 1px solid #1E75FF;
  477. box-sizing: border-box;
  478. background:#fff;
  479. }
  480. .car--list--wrap > ul > li .car--box--wrap .thumb--wrap{
  481. height:160px;
  482. min-height:160px;
  483. width:186px;
  484. display: flex;
  485. align-items: center;
  486. justify-content: center;
  487. overflow:hidden;
  488. margin-bottom:10px;
  489. }
  490. .car--list--wrap > ul > li .car--box--wrap .car--info{
  491. width:186px;
  492. }
  493. .car--list--wrap > ul > li .car--box--wrap .car--info dl{
  494. display: flex;
  495. justify-content: flex-start;
  496. margin-bottom:15px;
  497. }
  498. .car--list--wrap > ul > li .car--box--wrap .car--info dl:last-child{
  499. margin-bottom:0px;
  500. }
  501. .car--list--wrap > ul > li .car--box--wrap .car--info dl dt,
  502. .car--list--wrap > ul > li .car--box--wrap .car--info dl dd{
  503. font-weight: 350;
  504. font-size: 14px;
  505. line-height: 100%;
  506. color: #5C5B63;
  507. }
  508. .car--list--wrap > ul > li .car--box--wrap .car--info dl dt{
  509. margin-right:3px;
  510. }
  511. .car--list--wrap > ul > li .car--box--wrap .status--wrap{
  512. width:186px;
  513. margin-top:30px;
  514. }
  515. .car--list--wrap > ul > li .car--box--wrap .status--wrap span{
  516. height: 30px;
  517. display: inline-flex;
  518. align-items: center;
  519. background: #333237;
  520. border-radius: 50px;
  521. padding:0 15px;
  522. text-align: center;
  523. font-weight: 500;
  524. font-size: 13px;
  525. color: #FFFFFF;
  526. }
  527. .car--list--wrap > ul > li .car--box--wrap .status--wrap span.tr--delay{
  528. background: #ACBCCF;
  529. border-radius: 50px;
  530. }
  531. .car--list--wrap > ul > li .car--box--wrap .status--wrap span.tr--fail{
  532. background: #E12544;
  533. border-radius: 50px;
  534. }
  535. .car--list--wrap > ul > li .car--box--wrap .status--wrap span.sell--fail{
  536. background: #FB4F29;
  537. border-radius: 50px;
  538. }
  539. .car--list--wrap > ul > li .car--box--wrap .status--wrap span.ready{
  540. background: #A5AEBC;
  541. }
  542. .car--list--wrap > ul > li .car--box--wrap .btn--wrapper{
  543. margin-top:15px;
  544. }
  545. .car--list--wrap > ul > li .car--box--wrap .btn--wrapper button{
  546. width:186px;
  547. height: 50px;
  548. display:flex;
  549. align-items:center;
  550. justify-content:center;
  551. background: #1E75FF;
  552. border-radius: 15px;
  553. font-weight: 500;
  554. font-size: 14px;
  555. text-align: center;
  556. letter-spacing: -0.03em;
  557. color: #FFFFFF;
  558. }
  559. .car--list--wrap > ul > li .car--box--wrap .btn--wrapper .arrow--ic{
  560. display: inline-flex;
  561. min-width:14px;
  562. width:14px;
  563. height:14px;
  564. background:url(../img/button_arrow_ic.svg) no-repeat center;
  565. margin-left:10px;
  566. position: relative;
  567. top:1px;
  568. }
  569. .car--list--wrap.ty2 > ul{
  570. gap:34px;
  571. }
  572. .car--list--wrap.ty2 > ul > li .car--box--wrap{
  573. padding:0px;
  574. border-radius:0px;
  575. background:transparent;
  576. width:274px;
  577. }
  578. .car--list--wrap.ty2 > ul > li .car--box--wrap .thumb--wrap{
  579. background: #F7F7F7;
  580. width:100%;
  581. height:190px;
  582. position: relative;
  583. }
  584. .car--list--wrap.ty2 > ul > li .car--box--wrap .thumb--wrap img{
  585. position: absolute;
  586. top:50%;
  587. left:50%;
  588. transform:translate(-50%, -50%);
  589. max-width:274px;
  590. max-height:190px;
  591. width:auto;
  592. height:auto;
  593. }
  594. .car--list--wrap.ty2 > ul > li .car--box--wrap .car--name{
  595. width:100%;
  596. max-width:100%;
  597. text-align: left;
  598. padding-top:35px;
  599. padding-bottom:25px;
  600. }
  601. .car--list--wrap.ty2 > ul > li .car--box--wrap .car--info{
  602. width:100%;
  603. }
  604. .car--list--wrap.ty2 > ul > li .car--box--wrap .status--wrap{
  605. width:100%;
  606. justify-content: flex-start;
  607. }
  608. .car--list--wrap.ty2 > ul > li .car--box--wrap .status--wrap span{
  609. min-width:64px;
  610. justify-content: center;
  611. }
  612. .car--list--wrap.vertical--type > ul{
  613. flex-wrap:wrap;
  614. }
  615. .car--list--wrap.vertical--type > ul > li{
  616. width:calc(50% - 22.5px);
  617. }
  618. .car--list--wrap.vertical--type > ul > li .car--box--wrap{
  619. width:100%;
  620. height:auto;
  621. display:flex;
  622. align-items:flex-start;
  623. flex-direction: row;
  624. padding:25px;
  625. }
  626. .car--list--wrap.vertical--type > ul > li .car--box--wrap .thumb--wrap{
  627. width:230px;
  628. min-width:230px;
  629. min-height:230px;
  630. height:230px;
  631. background: #fff;
  632. border-radius: 15px;
  633. margin-right:45px;
  634. }
  635. .car--list--wrap.vertical--type > ul > li .car--box--wrap .car--name{
  636. margin-bottom:20px;
  637. }
  638. /** 서브 페잊 **/
  639. .sub--top--visual{
  640. height:150px;
  641. width:100%;
  642. background:url(../img/top_banner.jpg) no-repeat center;
  643. background-color: #1E75FF;
  644. display: flex;
  645. align-items:center;
  646. justify-content:center;
  647. }
  648. .sub--top--visual .contents--inner{
  649. width:100%;
  650. max-width:1200px;
  651. margin:0 auto;
  652. }
  653. .sub--top--visual .contents--inner > h2{
  654. font-weight: 700;
  655. font-size: 25px;
  656. line-height: 100%;
  657. letter-spacing: -0.02em;
  658. color: #FFFFFF;
  659. }
  660. .sub--top--visual .contents--inner > p{
  661. font-weight: 350;
  662. font-size: 15px;
  663. line-height: 100%;
  664. letter-spacing: -0.02em;
  665. color: #FFFFFF;
  666. margin-top:25px;
  667. }
  668. .top--nav--wrap{
  669. width:100%;
  670. border-bottom:1px solid #eee;
  671. }
  672. .top--nav--wrap .contents--inner{
  673. width:100%;
  674. max-width:1200px;
  675. margin:0 auto;
  676. }
  677. .top--nav--wrap .contents--inner .breadcrumbs--wrap{
  678. display: flex;
  679. align-items:center;
  680. }
  681. .top--nav--wrap .contents--inner .breadcrumbs--wrap > span{
  682. padding-left:20px;
  683. padding-right:30px;
  684. font-weight: 500;
  685. font-size: 14px;
  686. line-height: 100%;
  687. letter-spacing: -0.03em;
  688. color: #333333;
  689. background:url(../img/arrow_right_ic.svg) no-repeat right center;
  690. }
  691. .top--nav--wrap .contents--inner .breadcrumbs--wrap > span:nth-of-type(1){
  692. display:inline-flex;
  693. min-width:54px;
  694. width:54px;
  695. height:54px;
  696. border-right:1px solid #eee;
  697. border-left:1px solid #eee;
  698. background:url(../img/home_ic.svg) no-repeat center;
  699. padding:0px;
  700. }
  701. .top--nav--wrap .contents--inner .breadcrumbs--wrap > span:last-child{
  702. font-weight: 500;
  703. font-size: 14px;
  704. letter-spacing: -0.03em;
  705. color: #1E75FF;
  706. padding-right:0px;
  707. background: none;
  708. }
  709. .owner--information--wrap{
  710. width:100%;
  711. display: flex;
  712. align-items:center;
  713. justify-content:flex-start;
  714. flex-direction: column;
  715. padding-top:60px;
  716. }
  717. .owner--information--wrap .title--wrapper{
  718. max-width:1200px;
  719. }
  720. .bidding--count{
  721. white-space:nowrap;
  722. font-weight:700;
  723. }
  724. .owner--information--wrap .title--wrapper > h2,
  725. .owner--information--wrap > h2{
  726. text-align: left;
  727. width:100%;
  728. max-width:1200px;
  729. margin:0 auto;
  730. font-weight: 700;
  731. font-size: 18px;
  732. line-height: 100%;
  733. letter-spacing: -0.02em;
  734. color: #222222;
  735. }
  736. .owner--information--wrap .sch--modules--wrap{
  737. width:100%;
  738. max-width:1200px;
  739. height: 85px;
  740. background: #0063FF;
  741. border-radius: 20px;
  742. display: flex;
  743. align-items: center;
  744. justify-content: flex-start;
  745. margin-top:20px;
  746. padding:0 20px;
  747. }
  748. .owner--information--wrap .sch--modules--wrap > div input{
  749. height:45px;
  750. width:100%;
  751. font-weight: 350;
  752. font-size: 14px;
  753. letter-spacing: -0.02em;
  754. color:#222;
  755. border:0px;
  756. padding-left:42px;
  757. box-sizing: border-box;
  758. }
  759. .owner--information--wrap .sch--modules--wrap > div input::placeholder{
  760. font-weight: 350;
  761. font-size: 14px;
  762. letter-spacing: -0.02em;
  763. color: #B7B7B7;
  764. }
  765. .owner--information--wrap .sch--modules--wrap .user--info input{
  766. background:#fff url(../img/user_ic.svg) no-repeat 15px center;
  767. border-radius: 10px;
  768. }
  769. .owner--information--wrap .sch--modules--wrap .car--numb input{
  770. background:#fff url(../img/car_ic.svg) no-repeat 15px center;
  771. border-radius: 10px;
  772. }
  773. .owner--information--wrap .sch--modules--wrap label{
  774. font-weight: 500;
  775. font-size: 14px;
  776. line-height: 100%;
  777. letter-spacing: -0.02em;
  778. color: #FFFFFF;
  779. }
  780. .owner--information--wrap .sch--modules--wrap .phone--ftc--numb input{
  781. height:45px;
  782. width:100%;
  783. font-weight: 350;
  784. font-size: 14px;
  785. padding-left:15px;
  786. letter-spacing: -0.02em;
  787. border:0px;
  788. box-sizing: border-box;
  789. border-radius: 10px;
  790. }
  791. .owner--information--wrap .sch--modules--wrap .phone--ftc--numb select{
  792. height:45px;
  793. width:80px;
  794. font-weight: 350;
  795. font-size: 14px;
  796. padding-left:15px;
  797. letter-spacing: -0.02em;
  798. border:0px;
  799. box-sizing: border-box;
  800. border-radius: 10px;
  801. appearance:none;
  802. line-height: 100%;
  803. color: #333333;
  804. background: #fff url(../img/select_ic.svg) no-repeat calc(100% - 15px) center;
  805. }
  806. .owner--information--wrap .sch--modules--wrap button{
  807. width: 130px;
  808. height: 45px;
  809. background: #FF5C00;
  810. box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
  811. border-radius: 10px;
  812. font-weight: 700;
  813. font-size: 14px;
  814. text-align: center;
  815. letter-spacing: -0.02em;
  816. color: #FFFFFF;
  817. margin-left:20px;
  818. }
  819. .owner--information--wrap .sch--modules--wrap button .sch--ic{
  820. display: inline-flex;
  821. min-width:13px;
  822. width:13px;
  823. height:13px;
  824. background: url(../img/sch_ic.svg) no-repeat center;
  825. margin-left:10px;
  826. }
  827. .car--info--wrap{
  828. width:100%;
  829. max-width:1200px;
  830. margin:0 auto;
  831. padding-top:60px;
  832. }
  833. .car--info--wrap .title--wrapper > h2,
  834. .car--info--wrap > h2{
  835. font-weight: 700;
  836. font-size: 18px;
  837. line-height: 100%;
  838. letter-spacing: -0.02em;
  839. color: #222222;
  840. }
  841. .car--info--wrap .form--wrap{
  842. padding-top:40px;
  843. display: flex;
  844. align-items:flex-start;
  845. gap:40px;
  846. }
  847. .car--info--wrap .form--wrap .form--groups{
  848. display:flex;
  849. align-items:flex-start;
  850. justify-content: flex-start;
  851. width:100%;
  852. flex-direction: column;
  853. }
  854. .car--info--wrap .form--wrap .form--groups > h2{
  855. font-weight: 500;
  856. font-size: 14px;
  857. line-height: 100%;
  858. letter-spacing: -0.02em;
  859. color: #333333;
  860. }
  861. .car--info--wrap .form--wrap .form--groups .form--group{
  862. width:100%;
  863. height:53px;
  864. margin-top:15px;
  865. }
  866. .car--info--wrap .form--wrap .form--groups .form--group select{
  867. height:53px;
  868. width:100%;
  869. appearance:none;
  870. background: #fff url(../img/select_ic.svg) no-repeat calc(100% - 15px) center;
  871. border: 1px solid #D8DEE8;
  872. border-radius: 10px;
  873. font-weight: 350;
  874. font-size: 14px;
  875. letter-spacing: -0.02em;
  876. color: #333333;
  877. padding-left:20px;
  878. }
  879. .car--info--wrap .form--wrap .form--groups .form--group input:disabled,
  880. .car--info--wrap .form--wrap .form--groups .form--group select:disabled{
  881. background-color: #F5F9FE;
  882. }
  883. .car--info--wrap .form--wrap .form--groups .form--group.ty2{
  884. display: flex;
  885. align-items:center;
  886. flex-wrap:nowrap;
  887. }
  888. .car--info--wrap .form--wrap .form--groups .form--group input{
  889. height:53px;
  890. width:100%;
  891. appearance:none;
  892. background: #fff;
  893. border: 1px solid #D8DEE8;
  894. border-radius: 10px;
  895. font-weight: 350;
  896. font-size: 14px;
  897. letter-spacing: -0.02em;
  898. color: #333333;
  899. padding-left:20px;
  900. }
  901. .car--info--wrap .form--wrap .form--groups .form--group.file--wrap label{
  902. display:flex;
  903. align-items:center;
  904. justify-content: center;
  905. max-width:110px;
  906. width: 100%;
  907. height: 53px;
  908. margin-left:15px;
  909. border: 1px solid rgba(30, 117, 255, 0.5);
  910. border-radius: 10px;
  911. font-weight: 500;
  912. font-size: 14px;
  913. text-align: center;
  914. color: #1E75FF;
  915. }
  916. button.sch--btn--bl{
  917. width:100%;
  918. height: 53px;
  919. background: #FFFFFF;
  920. border: 1px solid rgba(30, 117, 255, 0.5);
  921. border-radius: 10px;
  922. font-weight: 500;
  923. font-size: 14px;
  924. letter-spacing: -0.02em;
  925. color: #1E75FF;
  926. }
  927. .car--info--wrap .form--wrap .form--groups .form--group .sch--ic--bl{
  928. display:inline-flex;
  929. width:15px;
  930. height:15px;
  931. margin-left:10px;
  932. background: url(../img/sch_ic_bl.svg) no-repeat center;
  933. position: relative;
  934. top:2px;
  935. }
  936. .car--info--wrap .btn--wrapper{
  937. width:100%;
  938. max-width:1200px;
  939. margin:0 auto;
  940. padding-top:70px;
  941. display:flex;
  942. align-items:center;
  943. justify-content: flex-end;
  944. }
  945. .car--info--wrap .btn--wrapper .next--btn{
  946. width: 240px;
  947. height: 65px;
  948. display: flex;
  949. align-items: center;
  950. justify-content: flex-start;
  951. background: #1E75FF;
  952. border-radius: 10px;
  953. padding-left:30px;
  954. box-sizing: border-box;
  955. font-weight: 500;
  956. font-size: 14px;
  957. letter-spacing: -0.02em;
  958. color: #FFFFFF;
  959. position: relative;
  960. }
  961. .car--info--wrap .btn--wrapper .next--btn .next--ic{
  962. display: flex;
  963. width:15px;
  964. height:15px;
  965. position: absolute;
  966. top:50%;
  967. transform: translateY(-50%);
  968. right:30px;
  969. background: url(../img/arrow_right_btn.svg) no-repeat center;
  970. }
  971. .car--info--wrap .fixed--positon button{
  972. border-radius:10px;
  973. }
  974. .modal--wrap{
  975. position:fixed;
  976. top:0px;
  977. left:0px;
  978. width:100%;
  979. height:100%;
  980. background: rgba(65, 66, 67, 0.5);
  981. z-index: 10;
  982. }
  983. .modal--wrap .modal--content{
  984. position:absolute;
  985. top:50%;
  986. left:50%;
  987. width:100%;
  988. transform: translate(-50%, -50%);
  989. background: #FFFFFF;
  990. box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
  991. border-radius: 30px;
  992. padding:30px;
  993. box-sizing: border-box;
  994. }
  995. .modal--wrap .modal--content.ty2{
  996. padding:0px;
  997. }
  998. .modal--wrap .modal--content .title--wrap{
  999. position:relative;
  1000. }
  1001. .modal--wrap .modal--content .title--wrap .close--btn{
  1002. width:36px;
  1003. height:36px;
  1004. border-radius:36px;
  1005. position: absolute;
  1006. top:0px;
  1007. right:0px;
  1008. background: url(../img/close_ic.svg) no-repeat center;
  1009. }
  1010. .modal .modal-content .icon--wrap{
  1011. width:100%;
  1012. display: flex;
  1013. align-items:center;
  1014. justify-content:center;
  1015. padding-top:45px;
  1016. }
  1017. .modal .modal-content .icon--wrap .thumb.pp--ic{
  1018. width:60px;
  1019. height:60px;
  1020. border-radius:60px;
  1021. background:#E2E4F0 url(../img/pp_ic.svg) no-repeat center;
  1022. }
  1023. .modal .modal-content .modal--body > h2{
  1024. font-weight: 500;
  1025. font-size: 18px;
  1026. line-height: 100%;
  1027. text-align: center;
  1028. letter-spacing: -0.03em;
  1029. color: #000000;
  1030. margin:0px;
  1031. padding:0px;
  1032. }
  1033. .check--box .form--group{
  1034. margin-bottom:15px;
  1035. }
  1036. .modal .modal-content .modal--body .captions{
  1037. text-align: center;
  1038. }
  1039. .modal .modal-content .modal--body > p{
  1040. font-weight: 350;
  1041. font-size: 15px;
  1042. text-align: center;
  1043. letter-spacing: -0.03em;
  1044. color: #666666;
  1045. margin-top:20px;
  1046. }
  1047. .modal--wrap .modal--content .inner--contents{
  1048. display: flex;
  1049. align-items: center;
  1050. justify-content:center;
  1051. flex-direction: column;
  1052. }
  1053. .modal--wrap .modal--content.ty2 .inner--contents{
  1054. padding:30px;
  1055. }
  1056. .modal--wrap .modal--content .inner--contents > h2{
  1057. font-weight: 700;
  1058. font-size: 18px;
  1059. text-align: center;
  1060. letter-spacing: -0.03em;
  1061. color: #333333;
  1062. margin:0px;
  1063. margin-top:22px;
  1064. line-height: 0px;
  1065. }
  1066. .modal--wrap .modal--content .inner--contents > p{
  1067. font-weight: 350;
  1068. font-size: 15px;
  1069. text-align: center;
  1070. letter-spacing: -0.02em;
  1071. color: #777777;
  1072. margin-top:20px;
  1073. }
  1074. .modal--wrap .modal--content .inner--contents .evt--thumb{
  1075. width: 80px;
  1076. height: 80px;
  1077. border-radius:80px;
  1078. background: #1E75FF url(../img/car_pl_ic.svg) no-repeat center;
  1079. }
  1080. .modal--wrap .modal--content .modal--btn--wrap{
  1081. display: flex;
  1082. align-items: center;
  1083. width:100%;
  1084. border-top:1px solid #eee;
  1085. }
  1086. .modal--wrap .modal--content .modal--btn--wrap button{
  1087. width:100%;
  1088. height:66px;
  1089. border-right:1px solid #eee;
  1090. font-weight: 400;
  1091. font-size: 14px;
  1092. text-align: center;
  1093. letter-spacing: -0.02em;
  1094. color: #000000;
  1095. }
  1096. .modal--wrap .modal--content .modal--btn--wrap button.on{
  1097. color: #1E75FF;
  1098. }
  1099. .modal--wrap .modal--content .modal--btn--wrap button:last-child{
  1100. border-right:0px;
  1101. }
  1102. .form--group input[type="radio"] + label{
  1103. position:relative;
  1104. display: flex;
  1105. align-items:center;
  1106. cursor: pointer;
  1107. font-weight: 350;
  1108. font-size: 14px;
  1109. color: #333333;
  1110. }
  1111. .form--group input[type="radio"] + label:before{
  1112. content:'';
  1113. display: block;
  1114. min-width:16px;
  1115. width:16px;
  1116. height:16px;
  1117. background:url(../img/radio_off.svg) no-repeat center;
  1118. margin-right:12px;
  1119. }
  1120. .form--group input[type="radio"]:checked + label:before{
  1121. background:url(../img/radio_on.svg) no-repeat center;
  1122. }
  1123. .car--accident--log{
  1124. width:100%;
  1125. max-width:1200px;
  1126. height: 190px;
  1127. margin: 0 auto;
  1128. background: #FFFFFF;
  1129. border: 1px solid rgba(30, 117, 255, 0.3);
  1130. border-radius: 20px;
  1131. padding:35px 50px;
  1132. }
  1133. .car--accident--log h2{
  1134. font-weight: 500;
  1135. font-size: 20px;
  1136. line-height: 100%;
  1137. letter-spacing: -0.03em;
  1138. color: #222222;
  1139. }
  1140. .car--accident--log .car--info{
  1141. display:flex;
  1142. align-items:center;
  1143. margin-top:28px;
  1144. }
  1145. .car--accident--log .car--info .thumb{
  1146. width: 64px;
  1147. height: 64px;
  1148. border-radius: 64px;
  1149. background: #0063FF url(../img/duc_ic.svg) no-repeat center;
  1150. margin-right:20px;
  1151. }
  1152. .car--accident--log .car--info .car--num--sch--info h2{
  1153. font-weight: 700;
  1154. font-size: 16px;
  1155. line-height: 100%;
  1156. letter-spacing: -0.02em;
  1157. color: #1E75FF;
  1158. }
  1159. .car--accident--log .car--info .car--num--sch--info p{
  1160. font-weight: 400;
  1161. font-size: 15px;
  1162. line-height: 100%;
  1163. letter-spacing: -0.02em;
  1164. color: #666666;
  1165. padding:0px;
  1166. margin:0px;
  1167. margin-top:15px;
  1168. }
  1169. .car--accident--column{
  1170. width:100%;
  1171. max-width:1200px;
  1172. margin:0 auto;
  1173. }
  1174. .car--accident--column > h2{
  1175. height:58px;
  1176. width:100%;
  1177. background: #F7F7F9;
  1178. display: flex;
  1179. align-items: center;
  1180. justify-content: flex-start;
  1181. font-weight: 500;
  1182. font-size: 15px;
  1183. letter-spacing: -0.03em;
  1184. color: #111111;
  1185. padding-left:30px;
  1186. }
  1187. .car--accident--column .items--box{
  1188. border:1px solid #eee;
  1189. border-top:0px;
  1190. padding:30px 30px 60px 30px;
  1191. gap:20px;
  1192. display:flex;
  1193. flex-wrap:wrap;
  1194. }
  1195. .car--accident--column .items--box .car--accident--box{
  1196. display:flex;
  1197. background: #FFFFFF;
  1198. border: 1px solid #EEEEEE;
  1199. box-shadow: 0px 5px 5px rgba(239, 240, 241, 0.5);
  1200. border-radius: 20px;
  1201. width:calc( (100% / 4) - (60px / 4) );
  1202. padding:25px;
  1203. }
  1204. .car--accident--column .items--box .car--accident--box .thumb{
  1205. width:59px;
  1206. height:59px;
  1207. border-radius: 59px;
  1208. margin-right:23px;
  1209. }
  1210. .car--accident--column .items--box .car--accident--box .thumb.log--01{background:#F7F7F9 url(../img/log_ic01.svg) no-repeat center;}
  1211. .car--accident--column .items--box .car--accident--box .thumb.log--02{background:#F7F7F9 url(../img/log_ic02.svg) no-repeat center;}
  1212. .car--accident--column .items--box .car--accident--box .thumb.log--03{background:#F7F7F9 url(../img/log_ic03.svg) no-repeat center;}
  1213. .car--accident--column .items--box .car--accident--box .thumb.log--04{background:#F7F7F9 url(../img/log_ic04.svg) no-repeat center;}
  1214. .car--accident--column .items--box .car--accident--box .thumb.log--05{background:#F7F7F9 url(../img/log_ic05.svg) no-repeat center;}
  1215. .car--accident--column .items--box .car--accident--box .thumb.log--06{background:#F7F7F9 url(../img/log_ic06.svg) no-repeat center;}
  1216. .car--accident--column .items--box .car--accident--box .thumb.log--07{background:#F7F7F9 url(../img/log_ic07.svg) no-repeat center;}
  1217. .car--accident--column .items--box .car--accident--box .thumb.log--08{background:#F7F7F9 url(../img/log_ic08.svg) no-repeat center;}
  1218. .car--accident--column .items--box .car--accident--box .desc{}
  1219. .car--accident--column .items--box .car--accident--box .desc h2{
  1220. font-weight: 400;
  1221. font-size: 14px;
  1222. letter-spacing: -0.03em;
  1223. color: #111111;
  1224. }
  1225. .car--accident--column .items--box .car--accident--box .desc > div{
  1226. display: inline-flex;
  1227. height: 22px;
  1228. background: #F7F7F9;
  1229. border-radius: 50px;
  1230. padding:0 15px;
  1231. font-weight: 350;
  1232. font-size: 12px;
  1233. color: #333333;
  1234. margin-top:14px;
  1235. }
  1236. .car--accident--column .items--box .caution--text{
  1237. background: #FBFBFD;
  1238. border: 1px dashed rgba(30, 117, 255, 0.5);
  1239. border-radius: 12px;
  1240. display: flex;
  1241. align-items:center;
  1242. justify-content:center;
  1243. width:100%;
  1244. height:58px;
  1245. font-weight: 350;
  1246. font-size: 15px;
  1247. text-align: center;
  1248. letter-spacing: -0.03em;
  1249. color: #333333;
  1250. margin-top:10px;
  1251. }
  1252. .car--accident--column .items--box .caution--text strong{
  1253. color: #1E75FF;
  1254. font-weight:700;
  1255. margin-left:5px;
  1256. }
  1257. .car--accident--column .items--box .caution--text .caution--ic{
  1258. display: inline-flex;
  1259. width:24px;
  1260. height:24px;
  1261. background:url(../img/caution_ic.svg) no-repeat center;
  1262. margin-right:15px;
  1263. }
  1264. .description--text--wrap{
  1265. border:1px solid #eee;
  1266. border-top:0px;
  1267. padding:30px 30px 0px 30px;
  1268. }
  1269. .description--text--wrap > h2{
  1270. font-weight: 350;
  1271. font-size: 14px;
  1272. line-height: 100%;
  1273. letter-spacing: -0.03em;
  1274. color: #1E75FF;
  1275. }
  1276. .description--text--wrap .desc--contents{
  1277. display: flex;
  1278. flex-wrap:wrap;
  1279. margin-top:40px;
  1280. }
  1281. .description--text--wrap .desc--contents dl{
  1282. width:calc( 100% / 5);
  1283. padding-bottom:60px;
  1284. }
  1285. .description--text--wrap .desc--contents dl dt{
  1286. font-weight: 700;
  1287. font-size: 14px;
  1288. line-height: 100%;
  1289. letter-spacing: -0.03em;
  1290. color: #333333;
  1291. }
  1292. .description--text--wrap .desc--contents dl dd{
  1293. font-weight: 350;
  1294. font-size: 14px;
  1295. line-height: 100%;
  1296. letter-spacing: -0.03em;
  1297. color: #444444;
  1298. margin-top:20px;
  1299. }
  1300. .options--wrapper{
  1301. width:100%;
  1302. max-width:1200px;
  1303. margin:0 auto;
  1304. }
  1305. .options--wrapper > h2{
  1306. font-weight: 700;
  1307. font-size: 18px;
  1308. line-height: 100%;
  1309. letter-spacing: -0.02em;
  1310. color: #222222;
  1311. }
  1312. .options--wrapper > h2 .astc--text{
  1313. font-weight: 700;
  1314. font-size: 18px;
  1315. letter-spacing: -0.02em;
  1316. color: #1E75FF;
  1317. }
  1318. .options--wrapper > h2 .astc--text.ty2{
  1319. color: #909EB5;
  1320. }
  1321. .options--wrapper .options--list{
  1322. width:100%;
  1323. border-top:1px solid #888;
  1324. margin-top:20px;
  1325. padding-top:40px;
  1326. }
  1327. .options--wrapper .options--list > h2{
  1328. font-weight: 500;
  1329. font-size: 14px;
  1330. line-height: 100%;
  1331. letter-spacing: -0.02em;
  1332. color: #111111;
  1333. }
  1334. .options--wrapper .options--list > ul{
  1335. display: flex;
  1336. align-items: center;
  1337. margin-top:30px;
  1338. margin-bottom:50px;
  1339. }
  1340. .options--wrapper .options--list > ul >li{
  1341. width:calc(100% / 4);
  1342. }
  1343. input[type="checkbox"] + label{
  1344. font-weight: 350;
  1345. font-size: 14px;
  1346. line-height: 100%;
  1347. color: #333333;
  1348. display: flex;
  1349. align-items:center;
  1350. cursor: pointer;
  1351. }
  1352. input[type="checkbox"] + label:before{
  1353. content:'';
  1354. display: block;
  1355. width:16px;
  1356. height:16px;
  1357. background:url(../img/check_off.svg) no-repeat center;
  1358. margin-right:12px;
  1359. }
  1360. input[type="checkbox"]:checked + label:before{
  1361. background:url(../img/check_on.svg) no-repeat center;
  1362. }
  1363. .options--wrapper .pic--add--wrap{
  1364. display: flex;
  1365. align-items: center;
  1366. justify-content:flex-start;
  1367. width:100%;
  1368. border-top:1px solid #888;
  1369. margin-top:20px;
  1370. padding-top:40px;
  1371. gap:10px;
  1372. }
  1373. .options--wrapper .pic--add--wrap.bd-0{
  1374. border:0px;
  1375. padding-top:0px;
  1376. }
  1377. .options--wrapper .pic--add--wrap .add--box{
  1378. width: 224px;
  1379. height: 224px;
  1380. display: flex;
  1381. align-items: center;
  1382. justify-content:center;
  1383. flex-direction: column;
  1384. background: #FFFFFF;
  1385. border: 1px solid #EEEEEE;
  1386. box-shadow: 0px 5px 5px rgba(239, 240, 241, 0.5);
  1387. border-radius: 20px;
  1388. }
  1389. .options--wrapper .pic--add--wrap .add--box .thumb{
  1390. width: 80px;
  1391. height: 80px;
  1392. border-radius: 80px;
  1393. background: #F7F7F9;
  1394. position: relative;
  1395. }
  1396. .options--wrapper .pic--add--wrap .add--box.actv .thumb,
  1397. .options--wrapper .pic--add--wrap.view--type .add--box .thumb{
  1398. width:200px;
  1399. height:140px;
  1400. border-radius:0px;
  1401. margin:0 auto;
  1402. overflow:hidden;
  1403. background: transparent!important;
  1404. }
  1405. .options--wrapper .pic--add--wrap .add--box.actv .thumb img,
  1406. .options--wrapper .pic--add--wrap.view--type .add--box .thumb img{
  1407. position: absolute;
  1408. top:50%;
  1409. left:50%;
  1410. transform: translate(-50%, -50%);
  1411. max-height:140px;
  1412. max-width:200px;
  1413. object-fit: cover;
  1414. }
  1415. .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard{
  1416. position: relative;
  1417. }
  1418. .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .thumb{
  1419. height:204px;
  1420. width:204px;
  1421. position:absolute;
  1422. top:50%;
  1423. left:50%;
  1424. transform: translate(-50%, -50%);
  1425. }
  1426. .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .thumb img{
  1427. width:100%;
  1428. height:100%;
  1429. max-width:204px;
  1430. max-height:204px;
  1431. }
  1432. .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .desc{
  1433. z-index: 2;
  1434. position: absolute;
  1435. bottom:20px;
  1436. }
  1437. .options--wrapper .pic--add--wrap .add--box .thumb .add--btn{
  1438. width: 26px;
  1439. height: 26px;
  1440. border-radius:26px;
  1441. border: 1px solid #EDEFF1;
  1442. box-shadow: 0px 2px 2px #DDE1E8;
  1443. background:#fff url(../img/add_ic.svg) no-repeat center;
  1444. position: absolute;
  1445. top:0px;
  1446. right:0px;
  1447. cursor: pointer;
  1448. }
  1449. .options--wrapper .pic--add--wrap .add--box .thumb.car--01{ background:#f7f7f9 url(../img/car_pic01.svg) no-repeat center;}
  1450. .options--wrapper .pic--add--wrap .add--box .thumb.car--02{ background:#f7f7f9 url(../img/car_pic02.svg) no-repeat center;}
  1451. .options--wrapper .pic--add--wrap .add--box .thumb.car--03{ background:#f7f7f9 url(../img/car_pic03.svg) no-repeat center;}
  1452. .options--wrapper .pic--add--wrap .add--box .thumb.car--04{ background:#f7f7f9 url(../img/car_pic04.svg) no-repeat center;}
  1453. .options--wrapper .pic--add--wrap .add--box .thumb.car--05{ background:#f7f7f9 url(../img/car_pic05.svg) no-repeat center;}
  1454. .options--wrapper .pic--add--wrap .add--box .desc{
  1455. font-weight: 350;
  1456. font-size: 15px;
  1457. line-height: 100%;
  1458. text-align: center;
  1459. letter-spacing: -0.02em;
  1460. color: #000000;
  1461. margin-top:10px;
  1462. }
  1463. .options--wrapper .pic--add--wrap.view--type .add--box .desc{
  1464. background: #F3F5F8;
  1465. border-radius: 50px;
  1466. height:35px;
  1467. display:inline-flex;
  1468. align-items: center;
  1469. padding:0 20px;
  1470. font-weight: 350;
  1471. font-size: 13px;
  1472. text-align: center;
  1473. letter-spacing: -0.02em;
  1474. color: #000000;
  1475. }
  1476. .options--wrapper .pic--add--wrap .addition--box .thumb{
  1477. background:#f7f7f9 url(../img/pic_ic.svg) no-repeat center;
  1478. }
  1479. .options--wrapper .pic--add--wrap .addition--box .add--btn{
  1480. font-weight: 500;
  1481. font-size: 12px;
  1482. text-align: center;
  1483. letter-spacing: -0.03em;
  1484. color: #1E75FF;
  1485. width: 100px;
  1486. height: 34px;
  1487. display: flex;
  1488. align-items: center;
  1489. justify-content: center;
  1490. border: 1px solid rgba(30, 117, 255, 0.3);
  1491. border-radius: 50px;
  1492. cursor: pointer;
  1493. }
  1494. .car--btn--wrapper{
  1495. width:100%;
  1496. max-width:1200px;
  1497. margin:0 auto;
  1498. padding-top:70px;
  1499. display:flex;
  1500. align-items:center;
  1501. justify-content: flex-end;
  1502. }
  1503. .car--btn--wrapper .next--btn{
  1504. width: 240px;
  1505. height: 65px;
  1506. display: flex;
  1507. align-items: center;
  1508. justify-content: flex-start;
  1509. background: #1E75FF;
  1510. border-radius: 10px;
  1511. padding-left:30px;
  1512. box-sizing: border-box;
  1513. font-weight: 500;
  1514. font-size: 14px;
  1515. letter-spacing: -0.02em;
  1516. color: #FFFFFF;
  1517. position: relative;
  1518. }
  1519. .car--btn--wrapper .next--btn .next--ic{
  1520. display: flex;
  1521. width:15px;
  1522. height:15px;
  1523. position: absolute;
  1524. top:50%;
  1525. transform: translateY(-50%);
  1526. right:30px;
  1527. background: url(../img/arrow_right_btn.svg) no-repeat center;
  1528. }
  1529. .options--wrapper .editor--wrapper{
  1530. display: flex;
  1531. align-items: center;
  1532. justify-content:space-between;
  1533. width:100%;
  1534. border-top:1px solid #888;
  1535. margin-top:20px;
  1536. padding-top:40px;
  1537. }
  1538. /*
  1539. .options--wrapper .editor--wrapper.ty2{
  1540. border-top:0px;
  1541. padding-top:0px;
  1542. }
  1543. */
  1544. /** 로그인 **/
  1545. .login--form--wrap{
  1546. width:100%;
  1547. max-width:100%;
  1548. margin:0 auto;
  1549. height:100vh;
  1550. display:flex;
  1551. align-items:center;
  1552. justify-content:center;
  1553. flex-direction:column;
  1554. background: url(../img/login_bg.jpg) no-repeat center;
  1555. background-size:cover;
  1556. }
  1557. .login--form--contents{
  1558. background: #FFFFFF;
  1559. box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  1560. border-radius: 50px;
  1561. width:520px;
  1562. height:485px;
  1563. box-sizing: border-box;
  1564. padding:60px;
  1565. }
  1566. .input--form--box {
  1567. border: 0px solid #ff0000;
  1568. display: flex;
  1569. margin-bottom: 5px;
  1570. }
  1571. .input--form--box > span {
  1572. display: block;
  1573. text-align: left;
  1574. padding-top: 5px;
  1575. min-width: 65px;
  1576. }
  1577. .button-login-box {
  1578. margin-bottom:35px;
  1579. }
  1580. .button-login-box button{
  1581. width:100%;
  1582. height:45px;
  1583. }
  1584. .login--box--title {
  1585. display: flex;
  1586. width:100%;
  1587. justify-content:space-between;
  1588. align-items: center;
  1589. margin-bottom:40px;
  1590. }
  1591. .login--box--title a{
  1592. display: inline-flex;
  1593. width:131px;
  1594. min-widtdh:131px;
  1595. height:40px;
  1596. background:url(../img/login_logo.png) no-repeat center;
  1597. font-size:0px;
  1598. }
  1599. .login--box--title h2{
  1600. font-weight: 700;
  1601. font-size: 18px;
  1602. line-height: 100%;
  1603. text-align: right;
  1604. letter-spacing: -0.03em;
  1605. color: #333333;
  1606. }
  1607. .input--box {
  1608. padding:0px;
  1609. border-radius:20px;
  1610. }
  1611. .input--box button {
  1612. padding: 3px 5px;
  1613. }
  1614. .loc--box{
  1615. width:100%;
  1616. display: flex;
  1617. align-items:center;
  1618. justify-content:space-between;
  1619. }
  1620. .loc--box a{
  1621. font-weight: 350;
  1622. font-size: 14px;
  1623. line-height: 100%;
  1624. letter-spacing: -0.03em;
  1625. color: #777777;
  1626. }
  1627. .loc--box .front--section a:after{
  1628. content:'';
  1629. display: inline-flex;
  1630. width:1px;
  1631. height:13px;
  1632. background: #e9e9e9;
  1633. margin-left:11px;
  1634. margin-right:11px;
  1635. position:relative;
  1636. top:1px;
  1637. }
  1638. .loc--box .front--section a:last-child:after{
  1639. display: none;
  1640. }
  1641. .loc--box .back--section a{
  1642. color: #1E75FF;
  1643. }
  1644. /** 회원가입 **/
  1645. .join--form--wrap{
  1646. width:100%;
  1647. max-width:1200px;
  1648. margin:0 auto;
  1649. display:flex;
  1650. flex-direction:column;
  1651. padding-top:70px;
  1652. }
  1653. .join--form--wrap > h2{
  1654. font-weight: 700;
  1655. font-size: 30px;
  1656. line-height: 100%;
  1657. text-align: center;
  1658. letter-spacing: -0.03em;
  1659. color: #111111;
  1660. margin:0px;
  1661. }
  1662. .join--form--wrap > h2 span{
  1663. font-weight: 700;
  1664. font-size: 30px;
  1665. line-height: 100%;
  1666. text-align: center;
  1667. letter-spacing: -0.03em;
  1668. color: #1E75FF;
  1669. }
  1670. .join--form--wrap > p{
  1671. font-weight: 350;
  1672. font-size: 16px;
  1673. line-height: 100%;
  1674. text-align: center;
  1675. letter-spacing: -0.03em;
  1676. color: #555555;
  1677. margin-top:35px;
  1678. margin-bottom:65px;
  1679. }
  1680. .join--form--wrap .join--form--contents table{
  1681. border-top:1px solid #555555;
  1682. }
  1683. .join--form--wrap .join--form--contents table tbody th{
  1684. width: 171px;
  1685. height: 67px;
  1686. background: #F9F9F9;
  1687. padding-left:30px;
  1688. border-bottom:1px solid #eee;
  1689. }
  1690. .join--form--wrap .join--form--contents table tbody td{
  1691. height: 67px;
  1692. padding-left:19px;
  1693. border-bottom:1px solid #eee;
  1694. font-weight: 350;
  1695. font-size: 14px;
  1696. color: #1F1F1F;
  1697. }
  1698. .join--form--wrap .join--form--contents > h2{
  1699. color:#000000;
  1700. font-weight: bold;
  1701. font-size: 32px;
  1702. text-transform: uppercase;
  1703. margin-bottom: 20px;
  1704. background: linear-gradient(to right, #270a09, #8ca6ce);
  1705. -webkit-background-clip: text;
  1706. -webkit-text-fill-color: transparent;
  1707. }
  1708. .join--form--wrap .join--form--contents select,
  1709. .join--form--wrap .join--form--contents input{
  1710. height: 43px;
  1711. border-radius:0px;
  1712. border: 1px solid #E8E8E8;
  1713. max-width:350px;
  1714. }
  1715. .join--btn--wrap button{
  1716. width:120px;
  1717. margin:0 5px;
  1718. border-radius:10px;
  1719. }
  1720. .join--btn--wrap button.cancel--btn{
  1721. background: #C8CFD9;
  1722. border-color:#C8CFD9;
  1723. }
  1724. /** 모달 중앙 컨텐츠 여백 : S **/
  1725. .modal-content{
  1726. border-radius:30px;
  1727. }
  1728. .modal-body{
  1729. padding:30px;
  1730. }
  1731. .modal-title{
  1732. font-weight: 500;
  1733. font-size: 18px;
  1734. color: #111111;
  1735. }
  1736. .modal-header{
  1737. border:0px;
  1738. padding-top:25px;
  1739. padding-left:30px;
  1740. padding-right:30px;
  1741. }
  1742. .modal-header .btn-close{
  1743. width: 36px!important;
  1744. height: 36px!important;
  1745. padding:0px;
  1746. border-radius: 30px!important;
  1747. background: url(../img/close_ic.svg) no-repeat center;
  1748. }
  1749. .modal-footer{
  1750. padding:0px;
  1751. flex-wrap: nowrap;
  1752. }
  1753. .modal-footer button{
  1754. padding:0px;
  1755. margin:0px;
  1756. border-radius: 0px;
  1757. }
  1758. .modal-footer button:nth-of-type(1){
  1759. border-radius:0px 0px 0px 30px;
  1760. }
  1761. .modal-footer button:nth-of-type(2){
  1762. border-radius:0px 0px 30px 0px;
  1763. }
  1764. .modal-footer .btn-secondary{
  1765. height:65px;
  1766. font-weight: 400;
  1767. font-size: 14px;
  1768. text-align: center;
  1769. letter-spacing: -0.02em;
  1770. color: #000000;
  1771. background: #fff;
  1772. border:0px;
  1773. border-right:1px solid #eee;
  1774. width:100%;
  1775. }
  1776. .modal-footer .btn-primary{
  1777. height:65px;
  1778. font-weight: 400;
  1779. font-size: 14px;
  1780. text-align: center;
  1781. letter-spacing: -0.02em;
  1782. color: #1E75FF;
  1783. background:#fff;
  1784. border:0px;
  1785. width:100%;
  1786. }
  1787. .modal-footer.ty2{
  1788. padding:20px 45px 50px 50px;
  1789. border-top:0px;
  1790. }
  1791. .modal-footer.ty2 button{
  1792. height:50px;
  1793. border: 1px solid rgba(200, 207, 217, 0.5);
  1794. border-radius: 10px;
  1795. }
  1796. .modal-footer.ty2 button.btn-primary{
  1797. background: #1E75FF;
  1798. color:#fff;
  1799. }
  1800. .modal-footer.ty2.ty--2{
  1801. padding-bottom:25px;
  1802. }
  1803. .modal-body .date--text{
  1804. font-weight: 350;
  1805. font-size: 14px;
  1806. color: #333333;
  1807. }
  1808. /** 모달 중앙 컨텐츠 여백 : E **/
  1809. /** 페이지링크 **/
  1810. .page-link{
  1811. color:#1E75FF;
  1812. }
  1813. .active>.page-link, .page-link.active{
  1814. border-color:#1E75FF;
  1815. background:#1E75FF;
  1816. }
  1817. .btn-primary{
  1818. background:#1E75FF;
  1819. }
  1820. .btn-outline-primary{
  1821. border-color:#1E75FF;
  1822. }
  1823. .btn-secondary{
  1824. background: #626262;
  1825. }
  1826. .btn-blank{
  1827. border: 1px solid rgba(98, 98, 98, 0.2);
  1828. border-radius: 12px;
  1829. font-weight: 500;
  1830. font-size: 15px;
  1831. text-align: center;
  1832. letter-spacing: -0.03em;
  1833. color: #626262!important;
  1834. }
  1835. .btn-blank:hover{
  1836. border: 1px solid rgba(98, 98, 98, 0.2);
  1837. }
  1838. .swiper--modal--wrap{
  1839. position:fixed;
  1840. top:0px;
  1841. left:0px;
  1842. z-index: 999;
  1843. background:rgba(0,0,0,.5);
  1844. width:100%;
  1845. height:100%;
  1846. display: flex;
  1847. align-items:center;
  1848. justify-content: center;
  1849. }
  1850. .swiper--modal--wrap .swiper--modal{
  1851. }
  1852. .swiper--modal--wrap .swiper--modal .vwswiper{
  1853. width:600px;
  1854. height:600px;
  1855. }
  1856. .swiper--modal--wrap .swiper--modal .vwswiper .car--thumb--wrap{
  1857. width:600px;
  1858. height:500px;
  1859. position: relative;
  1860. background:#fff;
  1861. }
  1862. .swiper--modal--wrap .swiper--modal .vwswiper .car--thumb--wrap img{
  1863. position:absolute;
  1864. top:50%;
  1865. left:50%;
  1866. transform: translate(-50%, -50%);
  1867. width:100%;
  1868. height:auto;
  1869. object-fit: cover;
  1870. }
  1871. .swiper--modal--wrap .swiper--modal .vwswiper h2{
  1872. color:#fff;
  1873. font-size:25px;
  1874. font-weight: bold;
  1875. margin-bottom:15px;
  1876. }
  1877. /** 테이블 **/
  1878. .data--table--wrap{
  1879. max-width:1200px;
  1880. margin:0 auto;
  1881. }
  1882. .data--table--wrap table td{
  1883. border:0px;
  1884. border-top: 1px solid #EEEEEE;
  1885. border-bottom 1px solid #EEEEEE;
  1886. font-weight: 350;
  1887. font-size: 15px;
  1888. letter-spacing: -0.03em;
  1889. color: #000000;
  1890. vertical-align: middle;
  1891. height:55px;
  1892. }
  1893. .data--table--wrap table td > div{
  1894. font-weight: 400;
  1895. font-size: 14px;
  1896. line-height: 100%;
  1897. color: #333333;
  1898. }
  1899. .data--table--wrap table th{
  1900. border:0px;
  1901. background: #F9F9F9;
  1902. border-top: 1px solid #EEEEEE;
  1903. font-weight: 350;
  1904. font-size: 15px;
  1905. letter-spacing: -0.03em;
  1906. color: #000000;
  1907. height:55px;
  1908. vertical-align: middle;
  1909. }
  1910. .data--table--wrap table th > div {
  1911. font-weight: 500;
  1912. font-size: 14px;
  1913. line-height: 100%;
  1914. /* identical to box height, or 14px */
  1915. text-align: center;
  1916. letter-spacing: -0.03em;
  1917. color: #333333;
  1918. }
  1919. .data--table--wrap table td:nth-of-type(1),
  1920. .data--table--wrap table th:nth-of-type(1){
  1921. border-left:0px;
  1922. }
  1923. .data--table--wrap table td:last-child,
  1924. .data--table--wrap table th:last-child{
  1925. border-right:0px;
  1926. }
  1927. .pagination--wrapper{
  1928. max-width:1200px;
  1929. margin:0 auto;
  1930. position:relative;
  1931. width:100%;
  1932. }
  1933. .pagination--wrapper .btn--right--wrap{
  1934. position: absolute;
  1935. left:0px;
  1936. }
  1937. .pagination--wrapper .btn--left--wrap{
  1938. position: absolute;
  1939. right:0px;
  1940. }
  1941. .data--table--wrap .title--wrapper > h2{
  1942. font-weight: 700;
  1943. font-size: 18px;
  1944. line-height: 100%;
  1945. letter-spacing: -0.02em;
  1946. color: #222222;
  1947. }
  1948. .join--ic{
  1949. display: inline-flex;
  1950. min-width:18px;
  1951. width:18px;
  1952. height:18px;
  1953. background:url(../img/join_ic.svg) no-repeat center;
  1954. position: relative;
  1955. top: 3px;
  1956. margin-left:10px;
  1957. }
  1958. /** 아이디 비밀번호 찾기 **/
  1959. .idpw--form--wrap{
  1960. width:100%;
  1961. max-width:430px;
  1962. margin:0 auto;
  1963. display:flex;
  1964. flex-direction:column;
  1965. padding-top:70px;
  1966. }
  1967. .idpw--form--wrap > h2{
  1968. font-weight: 700;
  1969. font-size: 30px;
  1970. line-height: 100%;
  1971. text-align: center;
  1972. letter-spacing: -0.03em;
  1973. color: #111111;
  1974. margin:0px;
  1975. }
  1976. .idpw--form--wrap > h2 span{
  1977. font-weight: 700;
  1978. font-size: 30px;
  1979. line-height: 100%;
  1980. text-align: center;
  1981. letter-spacing: -0.03em;
  1982. color: #1E75FF;
  1983. }
  1984. .idpw--form--wrap > p{
  1985. font-weight: 350;
  1986. font-size: 16px;
  1987. line-height: 100%;
  1988. text-align: center;
  1989. letter-spacing: -0.03em;
  1990. color: #555555;
  1991. margin-top:35px;
  1992. margin-bottom:65px;
  1993. }
  1994. .idpw--form--wrap .idpw--form--contents .tab .tab--items{
  1995. display: flex;
  1996. align-items:center;
  1997. justify-content:center;
  1998. width:100%;
  1999. }
  2000. .idpw--form--wrap .idpw--form--contents .tab .tab--items a{
  2001. display: flex;
  2002. align-items:center;
  2003. justify-content:center;
  2004. width:100%;
  2005. height: 55px;
  2006. background: #FFFFFF;
  2007. border: 1px solid #EEEEEE;
  2008. border-bottom-color:#1E75FF;
  2009. margin-right:-1px;
  2010. position:relative;
  2011. z-index: 1;
  2012. font-weight: 400;
  2013. font-size: 14px;
  2014. text-align: center;
  2015. letter-spacing: -0.03em;
  2016. color: #81878F;
  2017. }
  2018. .idpw--form--wrap .idpw--form--contents .tab .tab--items a.actv{
  2019. border: 1px solid #1E75FF;
  2020. border-bottom-color:#fff;
  2021. z-index: 2;
  2022. font-weight: 700;
  2023. color: #1E75FF;
  2024. }
  2025. .idpw--form--wrap .idpw--form--contents .tab .inner--contents{
  2026. padding:0 25px;
  2027. padding-top:55px;
  2028. }
  2029. .idpw--form--wrap .idpw--form--contents .tab .inner--contents > h2{
  2030. font-weight: 500;
  2031. font-size: 18px;
  2032. letter-spacing: -0.03em;
  2033. color: #000000;
  2034. }
  2035. .idpw--form--wrap .idpw--form--contents .tab .inner--contents > p{
  2036. font-weight: 350;
  2037. font-size: 14px;
  2038. letter-spacing: -0.03em;
  2039. color: #555555;
  2040. margin-top:20px;
  2041. }
  2042. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box{
  2043. margin-top:45px;
  2044. }
  2045. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div{
  2046. margin-bottom:35px;
  2047. }
  2048. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div > label{
  2049. margin-bottom:15px;
  2050. }
  2051. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div:last-child{
  2052. margin-bottom:0px;
  2053. }
  2054. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box select,
  2055. .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box input{
  2056. border-radius:0px;
  2057. height:45px;
  2058. border-color:#E8E8E8;
  2059. }
  2060. /* 페이지 네이션 */
  2061. .pagination{
  2062. padding-top:80px;
  2063. }
  2064. .pagination li a{
  2065. width: 40px;
  2066. height: 40px;
  2067. background: #FFFFFF;
  2068. border: 1px solid #E3E6EB;
  2069. border-radius: 12px!important;
  2070. margin:0 3.5px!important;
  2071. text-align: center;
  2072. padding:0px;
  2073. display: flex;
  2074. align-items:center;
  2075. justify-content:center;
  2076. }
  2077. .page-item .page-link[aria-label="Previous"]{
  2078. background:url(../img/pg_left.svg) no-repeat center;
  2079. font-size:0px;
  2080. }
  2081. .page-item .page-link[aria-label="Next"]{
  2082. background:url(../img/pg_right.svg) no-repeat center;
  2083. font-size:0px;
  2084. }
  2085. .car--info--wrap table{
  2086. border-top:1px solid #eee;
  2087. }
  2088. .car--info--wrap table tbody td{
  2089. height: 55px;
  2090. border-bottom:1px solid #eee;
  2091. font-weight: 400;
  2092. font-size: 14px;
  2093. letter-spacing: -0.03em;
  2094. color: #333333;
  2095. padding-left:25px;
  2096. }
  2097. .car--info--wrap table tbody th{
  2098. width: 220px;
  2099. height: 55px;
  2100. background: #F9F9F9;
  2101. border-bottom:1px solid #eee;
  2102. padding-left:25px;
  2103. font-weight: 500;
  2104. font-size: 14px;
  2105. letter-spacing: -0.03em;
  2106. color: #333333;
  2107. }
  2108. .excid--btn{
  2109. background: #1EAEFF;
  2110. border-color:#1EAEFF;
  2111. height:41px;
  2112. min-width:150px;
  2113. }
  2114. /** 차량 갤러리 **/
  2115. .gallery--wrappers{
  2116. position:fixed;
  2117. top:0px;
  2118. left:0px;
  2119. width:100%;
  2120. height:100%;
  2121. z-index: 90;
  2122. background: rgba(0,0,0,.5);
  2123. display:flex;
  2124. align-items:center;
  2125. justify-content:center;
  2126. }
  2127. .fotorama__caption{
  2128. bottom:auto;
  2129. top:0px;
  2130. width: 152px;
  2131. height: 55px;
  2132. background: #1E75FF;
  2133. border-radius: 0px 0px 15px 0px;
  2134. display: flex;
  2135. align-items: center;
  2136. justify-content: center;
  2137. }
  2138. .fotorama__caption__wrap{
  2139. background: transparent!important;
  2140. font-weight: 500;
  2141. font-size: 16px;
  2142. letter-spacing: -0.02em;
  2143. color: #FFFFFF;
  2144. }
  2145. .fotorama__stage{
  2146. background: #fff;
  2147. }
  2148. .fotorama__nav-wrap{
  2149. margin-top:35px;
  2150. }
  2151. .fotorama--fullscreen .fotorama__nav-wrap{
  2152. margin-top:0px;
  2153. }
  2154. .fotorama__arr--next{
  2155. width:60px!important;
  2156. height:60px!important;
  2157. background:url(/design/staff/assets/img/right_arrow.png) no-repeat center!important;
  2158. }
  2159. .fotorama__arr--prev{
  2160. width:60px!important;
  2161. height:60px!important;
  2162. background:url(/design/staff/assets/img/left_arrow.png) no-repeat center!important;
  2163. }
  2164. .list--btn{
  2165. text-align: left;
  2166. padding-left:30px;
  2167. background: #626262 url(../img/list_ic.png) no-repeat calc(100% - 30px) center;
  2168. border-radius: 10px;
  2169. }
  2170. .comp--btn{
  2171. text-align: left;
  2172. padding-left:30px;
  2173. background:#1E75FF url(../img/check-circle.png) no-repeat calc(100% - 30px) center;
  2174. border-radius: 10px;
  2175. margin-left:auto;
  2176. }
  2177. /** 진행상태 **/
  2178. .progress--wrap{
  2179. display:flex;
  2180. align-items:flex-start;
  2181. justify-content:space-between;
  2182. }
  2183. .progress--wrap > div{
  2184. position:relative;
  2185. }
  2186. .progress--wrap > div:after{
  2187. content:'';
  2188. width:25px;
  2189. height:25px;
  2190. background: url(../img/st_arrow.png) no-repeat center;
  2191. display: block;
  2192. position: absolute;
  2193. top:28px;
  2194. right:-45px;
  2195. }
  2196. .progress--wrap > div:last-child:after{
  2197. display:none;
  2198. }
  2199. .progress--wrap > div > .status--box{
  2200. width: 188px;
  2201. height: 80px;
  2202. background: #FFFFFF;
  2203. border: 1px solid #EEEEEE;
  2204. border-radius: 15px;
  2205. display: flex;
  2206. align-items: center;
  2207. justify-content:center;
  2208. font-weight: 500;
  2209. font-size: 14px;
  2210. text-align: center;
  2211. letter-spacing: -0.02em;
  2212. color: #A2A7B0;
  2213. }
  2214. .progress--wrap > div.actv .status--box{
  2215. border: 1px solid rgba(30, 117, 255, 0.5);
  2216. font-weight: 500;
  2217. font-size: 14px;
  2218. letter-spacing: -0.02em;
  2219. color: #1E75FF;
  2220. }
  2221. .progress--wrap > div.actv .status--box:before{
  2222. content:'';
  2223. width:26px;
  2224. height:26px;
  2225. display: inline-flex;
  2226. background:url(../img/check.svg) no-repeat center;
  2227. margin-right:5px;
  2228. }
  2229. .progress--wrap > div > .status--desc{}
  2230. .progress--wrap > div > .status--desc p{
  2231. font-weight: 400;
  2232. font-size: 13px;
  2233. text-align: center;
  2234. letter-spacing: -0.02em;
  2235. color: #333333;
  2236. margin-top:15px;
  2237. margin-bottom:20px;
  2238. }
  2239. .progress--wrap > div > .status--desc button{
  2240. font-weight: 500;
  2241. font-size: 12px;
  2242. letter-spacing: -0.03em;
  2243. color: #FFFFFF;
  2244. display: flex;
  2245. align-items: center;
  2246. justify-content: center;
  2247. width: 60px;
  2248. height: 26px;
  2249. background: #BBC4D3;
  2250. border-radius: 8px;
  2251. margin:0 auto;
  2252. }
  2253. /** 사고이력 레이어 팝업 **/
  2254. .layer_popup{padding:20px 28px 30px;background:#fff;}
  2255. .layer_popup .tit{margin-bottom:15px;font-size:18px;color:#464646;}
  2256. .layer_popup .cont{border-top:1px solid #000;border-bottom:1px solid #000;}
  2257. .layer_popup .cont2{padding:20px 0 0;}
  2258. .layer_popup .cont .return_msg{padding:33px 0 33px 65px;background:url('/admin/img/ic_return.png') 0 50% no-repeat;line-height:25px;}
  2259. .layer_popup .btn_center{margin-top:20px;}
  2260. .layer_popup .close{overflow:hidden;position:absolute;top:0;right:0;width:32px;height:32px;background:url('/admin/img/btn_popup_close.png') 50% no-repeat;text-indent:-9999px;cursor:pointer;}
  2261. .layer_popup .tbl_list2{border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;}
  2262. .layer_popup .tbl_list2 td .check_wrap{margin-right:20px;}
  2263. .history_popup{position:relative;padding:10px 50px 20px;width:1100px;font-size:13px;}
  2264. .history_popup h3{margin-top:20px;padding:0 0 22px;background:none;font-size:30px;color:#000;border-bottom:1px solid #000;}
  2265. .history_popup h4,
  2266. .history_popup h5{margin:25px 0 5px;font-size:15px;color:#000;}
  2267. .history_popup h4:first-child{margin-top:0;}
  2268. .history_popup .scr_cont{margin-top:30px;}
  2269. .history_popup .scr_cont2{overflow:auto;margin-top:25px;padding:0 20px 30px 0;height:660px;}
  2270. .history_popup .tbl_data{border:1px solid #d5d5d5;}
  2271. .history_popup .tbl_data th,
  2272. .history_popup .tbl_data td{padding-left:22px;border-top:1px solid #e5e5e5;text-align:left;vertical-align:middle;}
  2273. .history_popup .tbl_data tr:first-child th,
  2274. .history_popup .tbl_data tr:first-child td{border-top:none;}
  2275. .history_popup .tbl_data th{background:#f0f0f0;}
  2276. .history_popup .tbl_data td{height:38px;border-left:none;color:#808080;}
  2277. .history_popup .tbl_data td .inp_txt{color:#808080;}
  2278. .history_popup .tbl_data2{border:1px solid #d5d5d5;border-right:1px solid #d5d5d5;}
  2279. .history_popup .tbl_data2 th,
  2280. .history_popup .tbl_data2 td{height:39px;border-top:1px solid #e5e5e5;border-left:1px solid #c9c9c9;text-align:center;vertical-align:middle;}
  2281. .history_popup .tbl_data2 thead th{padding:0;background:#f0f0f0;font-weight:400;}
  2282. .history_popup .tbl_data2 thead tr:first-child th{border-top:none;}
  2283. .history_popup .tbl_data2 tbody th{padding:0;background:none;}
  2284. .history_popup .tbl_data2 td{color:#000;}
  2285. .history_popup .notice01{margin-top:10px;padding-left:36px;background:url('/admin/img/ico_notice01.gif') no-repeat;line-height:29px;}
  2286. .history_popup .notice02{margin-top:10px;padding-left:36px;background:url('/admin/img/ico_notice02.gif') no-repeat;line-height:30px;}
  2287. .history_popup .notice03 > li{margin-top:30px;line-height:23px;}
  2288. .history_popup .notice03 li ol li{padding-left:14px;list-style:decimal;list-style-position:inside;line-height:23px;text-indent:-14px;}
  2289. .history_popup .sign{margin-top:55px;text-align:center;}
  2290. .history_popup .performance_check{overflow:hidden;}
  2291. .history_popup .performance_check dt{float:none;clear:both;margin:70px 0 22px;font:700 15px/1 'NS';color:#000;}
  2292. .history_popup .scr_cont .performance_check:first-child dt{margin-top:0;}
  2293. .history_popup .performance_check dd{float:left;padding-right:50px;width:50%;}
  2294. .history_popup .performance_check dd span{display:block;border-bottom:1px solid #e5e5e5;line-height:40px;}
  2295. .history_popup .close{top:32px;right:48px;width:22px;height:17px;background:url('../img/btn_popup_close2.png') no-repeat;}
  2296. .collapse_area.popup{width:1000px;margin:0;overflow:auto;height:660px;padding:0 20px 30px 0;}
  2297. .collapse_area{width:1140px;margin:0 auto;}
  2298. .collapse_area .report_tit{background:#333;color:#fff;font-size:16px;width:100%;padding:20px 30px;text-align:left;line-height:19px;margin-top:30px;}
  2299. .collapse_area .report_con{width:100%;display:inline-block;border:1px solid #e0e0e0;padding:30px 20px;border-top:0;}
  2300. .collapse_area .report_con p.s_txt{font-size:13px;color:#333;margin-bottom:20px;}
  2301. .collapse_area .report_con .dol-md-6{width:48.6%;margin-right:30px;display:inline-block;float:left;}
  2302. .collapse_area .report_con .dol-md-6:last-child{margin-right:0;}
  2303. .collapse_area .report_con .report_row{margin-top:20px;width:100%;}
  2304. .col-sm-4{width:33.1%;text-align:center;display:inline-block;}
  2305. .dol-md-6 table.learn-box{}
  2306. .dol-md-6 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:40%;padding:15px 0;color:#222;font-weight:500;}
  2307. .dol-md-6 table.learn-box tbody tr td{border:1px solid #ddd;vertical-align:middle;width:60%;padding:15px 0 15px 25px;color:#189bfa;text-align:left;font-weight:500;}
  2308. .dol-md-5 table.learn-box{width:100%;}
  2309. .dol-md-5 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:25%;padding:20px 0;color:#222;font-weight:400;}
  2310. .dol-md-5 table.learn-box tbody tr td{border:1px solid #ddd;text-align:center;vertical-align:middle;width:25%;padding:20px 0;color:#189bfa;font-weight:600;}
  2311. .dol-md-5 table.learn-box tbody tr td.df_gray{color:#333;}
  2312. .guide-box-container{position:relative;width:100%;display:block;margin-top:40px;}
  2313. .guide-box-container .deco{z-index:3;width:140px;position:absolute;right:10px;bottom:-10px;}
  2314. .guide-box-container .deco img{display:block;max-width:100%;height:auto;}
  2315. .guide-box-container .guide-box{position:relative;z-index:2;padding:30px;padding-right:160px;background-color:#f5f5f5;}
  2316. .guide-box-container .guide-box span.guide-title{background-color:#189bfa;color:#fff;border-radius:18px;padding:10px 20px;line-height:12px;font-size:13px;position:absolute;top:-14px;}
  2317. .guide-box-container .guide-box ul.guide-list{}
  2318. .guide-box-container .guide-box ul.guide-list li{padding-left:10px;margin-top:10px;position:relative;}
  2319. .guide-box-container .guide-box ul.guide-list li strong.li-title{position:static;display:block;left:0;top:0;font-size:15px;line-height:24px;color:#222;letter-spacing:-1px;margin-bottom:5px;}
  2320. .guide-box-container .guide-box ul.guide-list li strong.li-title:before{content:"";display:inline-block;width:4px;height:4px;background-color:#189bfa;margin-right:10px;position:relative;top:-3px;}
  2321. .guide-box-container .guide-box ul.guide-list li .li-content{padding-left:13px;font-size:14px;line-height:24px;color:#777;margin-bottom:15px;}
  2322. ul.ex_box_wrap{display:block;}
  2323. ul.ex_box_wrap li{float:left;border:1px solid #e6e6e6;margin-right:30px;width:247px;margin-bottom:30px;padding-bottom:20px;text-align:center;}
  2324. ul.ex_box_wrap li:nth-child(4), .collapse_area .report_con ul.ex_box_wrap li:nth-child(8){margin-right:0;}
  2325. ul.ex_box_wrap li div.ico{width:100px;margin:auto;padding:20px 0 15px 0;}
  2326. ul.ex_box_wrap li div.ico img{text-align:center;width:100%;}
  2327. ul.ex_box_wrap li span{color:#333;font-size:15px;margin-bottom:5px;}
  2328. ul.ex_box_wrap li .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;}
  2329. ul.ex_box_wrap li .off{color:#777;}
  2330. .col-sm-4 div.ico{width:100px;margin:auto;padding:20px 0 15px 0;}
  2331. .col-sm-4 div.ico img{text-align:center;width:100%;}
  2332. .col-sm-4 span{color:#333;font-size:15px;margin-bottom:5px;}
  2333. .col-sm-4 .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;}
  2334. .col-sm-4 .off{color:#777;}
  2335. .report_con .message{font-size:20px;margin-top:25px;text-align:center;font-weight:300;color:#222;clear:both;}
  2336. .report_con .message strong.color-key{color:#189bfa;}
  2337. .report_con .message i.icon-font{margin-top:-3px;vertical-align:middle;}
  2338. .icon-font{font-family: 'Noto Sans KR', sans-serif;line-height:1;position:relative;display:inline-block;-webkit-font-smoothing:antialiased;margin-right:5px;}
  2339. .icon-siren:before{content:"";display:inline-block;width:36px;height:30px;background:no-repeat;background-position:center center;background:url(https://www.carhistory.or.kr/img/icon/siren.png);background-size:cover;}
  2340. .icon-angle-up:before{content:"\f106";}
  2341. .icon-siren.small:before{width:30px;height:25px;margin-right:5px;}
  2342. .message.small{font-size:16px;margin-bottom:20px;}
  2343. .message.small strong{font-weight:500;}
  2344. .report_con .bg-lightgray{background-color:#f5f5f5;font-size:16px;line-height:26px;text-align:center;border:1px solid #e8e8e8;padding:20px 0;margin-bottom:20px;}
  2345. span.color-sky{color:#189bfa;}
  2346. .report_con p{font-size:14px;color:#444;font-weight:400;line-height:25px;}
  2347. .report_con p.small{font-size:12px;margin-top:20px;}
  2348. .report_con p.small.color-gray{color:#787878;}
  2349. .report_con ul.dashed-line{margin-top:25px;}
  2350. .report_con ul.dashed-line li{padding:30px 0;border-top:1px dashed #b4b4b4;}
  2351. .report_con ul.dashed-line li:first-child{border-top:none;padding-top:0;}
  2352. .crash-info-list{display:table;table-layout:fixed;width:100%;}
  2353. .crash-info-list .row [class^="col-md-"]{display:inline-table;min-height:1px;float:none;}
  2354. .crash-info-list .row{display:table-row;}
  2355. .crash-info-list .row div{float:left;text-align:center;vertical-align:middle;width:100%;}
  2356. .crash-info-list .row .col-md-2{width:16.66666667%;}
  2357. .crash-info-list .row .col-md-4{width:30.6%;}
  2358. .crash-info-list .row .col-md-6{width:49%;margin-right:30px;}
  2359. .crash-info-list .date{vertical-align:middle;}
  2360. .xlarge{color:#189bfa;font-size:24px;line-height:26px;}
  2361. .table-head{color:#fff;text-align:center;padding:18px;margin-bottom:5px;}
  2362. .table-head.color-sky{background-color:#189bfa;}
  2363. .table-head.color-mint{background-color:#00b5b8;}
  2364. .crash_tb{width:100%;}
  2365. .crash_tb thead th{font-size:14px;height:50px;line-height:47px;background-color:#f5f5f5;border:1px solid #d2d2d2;color:#333;font-weight:400;width:50%;}
  2366. .crash_tb tbody td span.badge{font-size:13px;display:inline-block;vertical-align:middle;letter-spacing:-0.02em;border-radius:10px;background-color:#3c3c3c;color:#fff;line-height:20px;height:20px;padding:0 7px;font-weight:400;margin-bottom:5px;}
  2367. .crash_tb tbody td a.btn{display:inline-block;margin-bottom:0;font-weight:normal;letter-spacing:-0.02em;text-transform:uppercase;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #189bfa;color:#189bfa;background-color:#fff;font-size:12px;border-radius:13px;padding:0 10px;margin-bottom:12px;}
  2368. .crash_tb tbody td a.btn:hover{background:#006eb6;color:#fff;border:1px solid #006eb6;}
  2369. .crash_tb tbody td{text-align:center;font-size:14px;line-height:22px;border:1px solid #d2d2d2;color:#222;font-weight:700;width:50%;vertical-align:middle;padding:20px 0;}
  2370. .crash_tb tbody tr.long-1{height:90px;padding:0;}
  2371. .crash_tb tbody tr.long-2{height:190px;padding:0;}
  2372. .crash_tb tbody td strong.color-sky{color:#189bfa;}
  2373. .crash_tb tbody td strong.color-mint{color:#00b5b8;}
  2374. .bullet-list{}
  2375. .bullet-list li{position:relative;padding-left:10px;font-size:14px;line-height:25px;letter-spacing:-1px;}
  2376. .bullet-list li .bullet{position:absolute;left:0;top:0;}
  2377. .bullet-list li .color-key{color:#189bfa;}
  2378. .collapse_area.popup .report_con ul.ex_box_wrap li{width:22.5%;}
  2379. .collapse_area.popup .report_con ul.ex_box_wrap li:nth-child(4){margin-right:0;}
  2380. .collapse_area.popup .report_con ul.dashed-line li div.crash-info-list .row .col-md-2{width:18%;}
  2381. .collapse_area.popup .report_con ul.dashed-line li div.crash-info-list .row .col-md-6{width:45%;}
  2382. .dol-md-6 table.learn-box{}
  2383. .dol-md-6 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:40%;padding:15px 0;color:#222;font-weight:500;}
  2384. .dol-md-6 table.learn-box tbody tr td{border:1px solid #ddd;vertical-align:middle;width:60%;padding:15px 0 15px 25px;color:#189bfa;text-align:left;font-weight:500;}
  2385. .dol-md-5 table.learn-box{width:100%;}
  2386. .dol-md-5 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:25%;padding:20px 0;color:#222;font-weight:400;}
  2387. .dol-md-5 table.learn-box tbody tr td{border:1px solid #ddd;text-align:center;vertical-align:middle;width:25%;padding:20px 0;color:#189bfa;font-weight:600;}
  2388. .dol-md-5 table.learn-box tbody tr td.df_gray{color:#333;}
  2389. .guide-box-container{position:relative;width:100%;display:block;margin-top:40px;}
  2390. .guide-box-container .deco{z-index:3;width:140px;position:absolute;right:10px;bottom:-10px;}
  2391. .guide-box-container .deco img{display:block;max-width:100%;height:auto;}
  2392. .guide-box-container .guide-box{position:relative;z-index:2;padding:30px;padding-right:160px;background-color:#f5f5f5;}
  2393. .guide-box-container .guide-box span.guide-title{background-color:#189bfa;color:#fff;border-radius:18px;padding:10px 20px;line-height:12px;font-size:13px;position:absolute;top:-14px;}
  2394. .guide-box-container .guide-box ul.guide-list{}
  2395. .guide-box-container .guide-box ul.guide-list li{padding-left:10px;margin-top:10px;position:relative;}
  2396. .guide-box-container .guide-box ul.guide-list li strong.li-title{position:static;display:block;left:0;top:0;font-size:15px;line-height:24px;color:#222;letter-spacing:-1px;margin-bottom:5px;}
  2397. .guide-box-container .guide-box ul.guide-list li strong.li-title:before{content:"";display:inline-block;width:4px;height:4px;background-color:#189bfa;margin-right:10px;position:relative;top:-3px;}
  2398. .guide-box-container .guide-box ul.guide-list li .li-content{padding-left:13px;font-size:14px;line-height:24px;color:#777;margin-bottom:15px;}
  2399. ul.ex_box_wrap{display:block;}
  2400. ul.ex_box_wrap li{float:left;border:1px solid #e6e6e6;margin-right:30px;width:247px;margin-bottom:30px;padding-bottom:20px;text-align:center;}
  2401. ul.ex_box_wrap li:nth-child(4), .collapse_area .report_con ul.ex_box_wrap li:nth-child(8){margin-right:0;}
  2402. ul.ex_box_wrap li div.ico{width:100px;margin:auto;padding:20px 0 15px 0;}
  2403. ul.ex_box_wrap li div.ico img{text-align:center;width:100%;}
  2404. ul.ex_box_wrap li span{color:#333;font-size:15px;margin-bottom:5px;}
  2405. ul.ex_box_wrap li .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;}
  2406. ul.ex_box_wrap li .off{color:#777;}
  2407. /** 2023-03-02 상세 페이지 금액 스텝 **/
  2408. .price--info--wrap{
  2409. width:100%;
  2410. max-width:1200px;
  2411. margin:0 auto;
  2412. display: flex;
  2413. align-items: center;
  2414. justify-content: center;
  2415. gap:25px;
  2416. }
  2417. .price--info--wrap > div{
  2418. width:100%;
  2419. max-width:297px;
  2420. height:94px;
  2421. display: flex;
  2422. align-items:center;
  2423. justify-content:flex-start;
  2424. background: rgba(239, 242, 245, .8);
  2425. border-radius: 18px;
  2426. padding-left:20px;
  2427. }
  2428. .price--info--wrap > div .thumb{
  2429. width: 54px;
  2430. height: 54px;
  2431. border-radius: 10px;
  2432. background: #FFFFFF;
  2433. margin-right:22px;
  2434. }
  2435. .price--info--wrap > div .thumb.ic--01{background: #FFFFFF url(../img/tmb_ic01.svg) no-repeat center!important;}
  2436. .price--info--wrap > div .thumb.ic--02{background: #FFFFFF url(../img/tmb_ic02.svg) no-repeat center!important;}
  2437. .price--info--wrap > div .thumb.ic--03{background: #FFFFFF url(../img/tmb_ic03.svg) no-repeat center!important;}
  2438. .price--info--wrap > div .thumb.ic--04{background: #FFFFFF url(../img/tmb_ic04.svg) no-repeat center!important;}
  2439. .price--info--wrap > div .desc h2{
  2440. font-weight: 400;
  2441. font-size: 14px;
  2442. line-height: 100%;
  2443. letter-spacing: -0.03em;
  2444. color: #666666;
  2445. }
  2446. .price--info--wrap > div .desc p{
  2447. font-family: 'Montserrat';
  2448. font-style: normal;
  2449. font-weight: 600;
  2450. font-size: 17px;
  2451. letter-spacing: 0.03em;
  2452. color: #000000;
  2453. display: flex;
  2454. align-items:center;
  2455. margin-top:12px;
  2456. }
  2457. .price--info--wrap > div .desc p span{
  2458. font-family: 'Noto Sans KR';
  2459. font-style: normal;
  2460. font-weight: 400;
  2461. font-size: 12px;
  2462. letter-spacing: -0.03em;
  2463. color: #333333;
  2464. margin-left:5px;
  2465. }
  2466. .price--info--wrap > div:nth-of-type(1){
  2467. max-width:235px;
  2468. background: #37A0EA;
  2469. }
  2470. .price--info--wrap > div:nth-of-type(1) .desc p span,
  2471. .price--info--wrap > div:nth-of-type(1) .desc h2,
  2472. .price--info--wrap > div:nth-of-type(1) .desc p{
  2473. color:#fff;
  2474. }
  2475. .trading--finish{}
  2476. .trading--finish li{
  2477. font-weight: 350;
  2478. font-size: 14px;
  2479. color: #333333;
  2480. margin-bottom:5px;
  2481. }
  2482. .trading--finish li span{
  2483. display: inline-flex;
  2484. align-items:center;
  2485. justify-content:center;
  2486. min-width:50px;
  2487. width: 50px;
  2488. height: 28px;
  2489. background: #FFFFFF;
  2490. border: 1px solid rgba(30, 117, 255, 0.5);
  2491. border-radius: 50px;
  2492. margin-left:15px;
  2493. }
  2494. .status--text.tr--missed{
  2495. font-weight: 400;
  2496. font-size: 14px;
  2497. letter-spacing: -0.03em;
  2498. color: #8691A3;
  2499. }
  2500. .status--text.tr--delay{
  2501. font-weight: 400;
  2502. font-size: 14px;
  2503. letter-spacing: -0.03em;
  2504. color: #333333;
  2505. }
  2506. .status--text.tr--fail{
  2507. font-weight: 400;
  2508. font-size: 14px;
  2509. letter-spacing: -0.03em;
  2510. color: #E12544;
  2511. }
  2512. .bidding--content--wrappers{
  2513. width:100%;
  2514. max-width:1200px;
  2515. margin:0 auto;
  2516. height:343px;
  2517. display: flex;
  2518. align-items: center;
  2519. background: #FFF url(../img/sq_ban.jpg) no-repeat right center;
  2520. border: 1px solid #EEE;
  2521. padding-left:60px;
  2522. position: relative;
  2523. }
  2524. .bidding--content--wrappers .status--ic{
  2525. display:inline-flex;
  2526. align-items: center;
  2527. justify-content: center;
  2528. padding:0 14px;
  2529. height: 40px;
  2530. background: #FFFFFF;
  2531. border: 1px solid rgba(30, 117, 255, 0.5);
  2532. border-radius: 10px;
  2533. font-weight: 500;
  2534. font-size: 14px;
  2535. letter-spacing: -0.02em;
  2536. color: #1E75FF;
  2537. }
  2538. .bidding--content--wrappers .result--data{
  2539. font-weight: 500;
  2540. font-size: 30px;
  2541. letter-spacing: -0.02em;
  2542. color: #000000;
  2543. margin-top:25px;
  2544. }
  2545. .bidding--content--wrappers .result--data > span{
  2546. font-weight: 500;
  2547. font-size: 30px;
  2548. letter-spacing: -0.02em;
  2549. color: #1E75FF;
  2550. }
  2551. .bidding--content--wrappers .form--wrappers{
  2552. margin-top:40px;
  2553. }
  2554. .bidding--content--wrappers .form--wrappers label{
  2555. white-space:nowrap;
  2556. font-weight: 500;
  2557. font-size: 15px;
  2558. letter-spacing: -0.02em;
  2559. color: #000000;
  2560. }
  2561. .bidding--content--wrappers .form--wrappers input{
  2562. text-align: right;
  2563. font-weight: 500;
  2564. font-size: 14px;
  2565. color: #333333;
  2566. padding:0 20px;
  2567. letter-spacing: 0px;
  2568. border-radius: 10px;
  2569. width:350px;
  2570. }
  2571. .bidding--content--wrappers .form--wrappers >p{
  2572. font-weight: 350;
  2573. font-size: 15px;
  2574. color: #666666;
  2575. margin-top:25px;
  2576. }
  2577. .bidding--content--wrappers .form--wrappers > div button{
  2578. position: absolute;
  2579. bottom:59px;
  2580. right:59px;
  2581. width:160px;
  2582. height:57px;
  2583. display: flex;
  2584. align-items: center;
  2585. justify-content: center;
  2586. font-weight: 700;
  2587. font-size: 15px;
  2588. text-align: center;
  2589. letter-spacing: -0.03em;
  2590. color: #FFFFFF;
  2591. border-radius:12px;
  2592. }
  2593. .bidding--content--wrappers .form--wrappers.ty2 > div button{
  2594. position:static;
  2595. }
  2596. .trading--drop--down{
  2597. width:100%;
  2598. max-width:1200px;
  2599. margin:0 auto;
  2600. background: #FFF url(../img/sq_ban.jpg) no-repeat right top;
  2601. padding:60px;
  2602. border: 1px solid #EEE;
  2603. }
  2604. .trading--drop--down >h2{
  2605. font-weight: 500;
  2606. font-size: 30px;
  2607. letter-spacing: -0.02em;
  2608. color: #000000;
  2609. }
  2610. .trading--drop--down >h2 >span{
  2611. font-weight: 500;
  2612. font-size: 30px;
  2613. letter-spacing: -0.02em;
  2614. color: #1E75FF;
  2615. }
  2616. .trading--drop--down .accordion{
  2617. background:#fff;
  2618. margin-top:40px;
  2619. }
  2620. .trading--drop--down .accordion .accordion-item{
  2621. margin-bottom:15px;
  2622. border-radius: 10px;
  2623. overflow: hidden;
  2624. border: 1px solid #F3F3F3;
  2625. }
  2626. .trading--drop--down .accordion .accordion-item:last-child{
  2627. margin-bottom:0px;
  2628. }
  2629. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button{
  2630. height:58px;
  2631. background: #F9F9F9;
  2632. }
  2633. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button span{
  2634. position: absolute;
  2635. top:50%;
  2636. transform: translateY(-50%);
  2637. right:68px;
  2638. font-weight: 500;
  2639. font-size: 15px;
  2640. text-align: right;
  2641. letter-spacing: -0.03em;
  2642. color: #999999;
  2643. }
  2644. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button[aria-expanded="true"]{
  2645. background: #1E75FF;
  2646. font-weight: 500;
  2647. font-size: 15px;
  2648. letter-spacing: -0.03em;
  2649. color: #FFFFFF;
  2650. }
  2651. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button span.on{
  2652. color:#1E75FF!important;
  2653. }
  2654. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button[aria-expanded="true"] span.on,
  2655. .trading--drop--down .accordion .accordion-item .accordion-header .accordion-button[aria-expanded="true"] span{
  2656. color:#fff!important;
  2657. }
  2658. .trading--drop--down .accordion .accordion-item .user--info dl dd,
  2659. .trading--drop--down .accordion .accordion-item .user--info dl dt{
  2660. font-weight: 350;
  2661. font-size: 15px;
  2662. color: #666666;
  2663. padding:5px 0px;
  2664. }
  2665. .trading--drop--down .accordion .accordion-item .date--wrap{
  2666. position: relative;
  2667. max-width:220px;
  2668. }
  2669. .trading--drop--down .accordion .accordion-item .date--wrap input{
  2670. height:53px;
  2671. }
  2672. .trading--drop--down .accordion .accordion-item .date--wrap:after{
  2673. content:'';
  2674. display: block;
  2675. position: absolute;
  2676. top:1px;
  2677. right:1px;
  2678. z-index: 9;
  2679. pointer-events: none;
  2680. width:51px;
  2681. height:51px;
  2682. border-radius:10px;
  2683. background:#fff url(../img/date_ic.svg) no-repeat center;
  2684. }
  2685. .trading--drop--down .accordion .accordion-item .btn--wrapper button{
  2686. height:53px;
  2687. width:140px;
  2688. }
  2689. .accordion-button::after{
  2690. background:url(../img/arc_arrow_btm.svg) no-repeat center;
  2691. }
  2692. .accordion-button:not(.collapsed)::after{
  2693. background:url(../img/arc_arrow_top.svg) no-repeat center;
  2694. transform: rotate(0deg);
  2695. }
  2696. .trading--drop--down .accordion .accordion-item .title--small{
  2697. font-weight: 700;
  2698. font-size: 15px;
  2699. line-height: 100%;
  2700. letter-spacing: -0.03em;
  2701. color: #000000;
  2702. margin-top:30px;
  2703. }
  2704. .trading--drop--down .accordion .accordion-item .accordion-body textarea{
  2705. background: #F4F8FF;
  2706. border: 1px dashed #C5D8F5;
  2707. border-radius: 10px;
  2708. padding:15px;
  2709. }
  2710. .add--pic--sm--wrap{
  2711. width:100%;
  2712. display: flex;
  2713. align-items: center;
  2714. justify-content: flex-start;
  2715. gap:15px;
  2716. margin-top:20px;
  2717. position: relative;
  2718. }
  2719. .add--pic--sm--wrap > button{
  2720. width: 140px;
  2721. height: 53px;
  2722. display:flex;
  2723. align-items: center;
  2724. justify-content: center;
  2725. font-weight: 700;
  2726. font-size: 14px;
  2727. text-align: center;
  2728. letter-spacing: -0.03em;
  2729. position: absolute;
  2730. bottom:0px;
  2731. right:0px;
  2732. }
  2733. .add--pic--sm--wrap > div{
  2734. position: relative;
  2735. width: 80px;
  2736. height: 80px;
  2737. background: #F9F9F9;
  2738. border: 1px solid #ECECEC;
  2739. border-radius: 10px;
  2740. display: flex;
  2741. align-items: center;
  2742. justify-content: center;
  2743. }
  2744. .add--pic--sm--wrap > div >label{
  2745. font-weight: 400;
  2746. font-size: 13px;
  2747. text-align: center;
  2748. letter-spacing: -0.03em;
  2749. color: #A8A8A8;
  2750. width: 80px;
  2751. height: 80px;
  2752. cursor: pointer;
  2753. display:flex;
  2754. align-items:center;
  2755. justify-content:center;
  2756. }
  2757. .add--pic--sm--wrap .upload--file label{
  2758. opacity: 0;
  2759. }
  2760. .add--pic--sm--wrap.mtx{
  2761. padding-bottom:45px;
  2762. }
  2763. .add--pic--sm--wrap.mtx > div:after{
  2764. position:absolute;
  2765. left:50%;
  2766. top:90px;
  2767. transform: translateX(-50%);
  2768. }
  2769. .add--pic--sm--wrap.mtx > div:nth-of-type(1):after{
  2770. content:'상사이전등록증';
  2771. font-weight: 400;
  2772. font-size: 12px;
  2773. line-height: 100%;
  2774. text-align: center;
  2775. letter-spacing: -0.03em;
  2776. color: #333333;
  2777. white-space: nowrap;
  2778. }
  2779. .add--pic--sm--wrap.mtx > div:nth-of-type(2):after{
  2780. content:'성능지 등록';
  2781. font-weight: 400;
  2782. font-size: 12px;
  2783. line-height: 100%;
  2784. text-align: center;
  2785. letter-spacing: -0.03em;
  2786. color: #333333;
  2787. white-space: nowrap;
  2788. }
  2789. .add--pic--sm--wrap.mtx button{
  2790. bottom:20px;
  2791. }
  2792. .main--header--contents{
  2793. padding-top:50px;
  2794. }
  2795. .main--header--contents > div{
  2796. gap:20px;
  2797. }
  2798. .main--header--contents > div > div{
  2799. width: 224px;
  2800. height: 100px;
  2801. background: #F4F6F9;
  2802. border-radius: 15px;
  2803. display: flex;
  2804. align-items:flex-start;
  2805. justify-content:center;
  2806. flex-direction: column;
  2807. padding-left:25px;
  2808. position:relative;
  2809. }
  2810. .main--header--contents > div > div:after{
  2811. content:'';
  2812. display:block;
  2813. width:40px;
  2814. height:40px;
  2815. border-radius: 40px;
  2816. position: absolute;
  2817. top:18px;
  2818. right:18px;
  2819. }
  2820. .main--header--contents > div > div > div:nth-of-type(1){
  2821. font-weight: 500;
  2822. font-size: 14px;
  2823. letter-spacing: -0.03em;
  2824. color: #666666;
  2825. line-height: 100%;
  2826. }
  2827. .main--header--contents > div > div > div:nth-of-type(2){
  2828. font-family: 'Montserrat';
  2829. font-style: normal;
  2830. font-weight: 700;
  2831. font-size: 18px;
  2832. color: #333333;
  2833. line-height: 100%;
  2834. margin-top:18px;
  2835. }
  2836. .main--header--contents > div > div:nth-of-type(1):after{
  2837. background:#fff url(../img/aap_mic01.svg) no-repeat center;
  2838. }
  2839. .main--header--contents > div > div:nth-of-type(2):after{
  2840. background:#fff url(../img/aap_mic02.svg) no-repeat center;
  2841. }
  2842. .main--header--contents > div > div:nth-of-type(3):after{
  2843. background:#fff url(../img/aap_mic03.svg) no-repeat center;
  2844. }
  2845. .main--header--contents > div > div:nth-of-type(4):after{
  2846. background:#fff url(../img/aap_mic04.svg) no-repeat center;
  2847. }
  2848. .main--header--contents > div > div:nth-of-type(5):after{
  2849. background:#fff url(../img/aap_mic05.svg) no-repeat center;
  2850. }