layout.css 87 KB

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