main.scss 93 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464
  1. @charset "UTF-8";
  2. @import 'reset';
  3. @import 'mixin';
  4. section{
  5. overflow-x: hidden;
  6. }
  7. br{
  8. &.mo{
  9. display: none;
  10. }
  11. }
  12. header{
  13. position: fixed;
  14. width: 100%;
  15. top: 0;
  16. left: 0;
  17. z-index: 1000;
  18. background: #fff;
  19. .header--line--banner--wrap{
  20. background-image: url(../img/top_line_bg.svg);
  21. background-size: cover;
  22. background-repeat: no-repeat;
  23. background-position: center;
  24. background-color: #2ECC71;
  25. width:100%;
  26. padding:0px;
  27. @include flex-center;
  28. overflow: hidden;
  29. transition: all linear .2s;
  30. height:100px;
  31. &.actv{
  32. padding:0px 0px;
  33. height:0px;
  34. &+.header--contents--wrap{
  35. .header--dim{
  36. top: 170px;
  37. }
  38. }
  39. }
  40. .inner--contents{
  41. width:100%;
  42. max-width: 1200px;
  43. display: flex;
  44. padding: 0 20px;
  45. flex-direction: column;
  46. align-items: center;
  47. justify-content: center;
  48. text-align: center;
  49. position: relative;
  50. .close--btn{
  51. width: 44px;
  52. height: 44px;
  53. background-color: transparent;
  54. background-size: 20px 20px;
  55. background-repeat: no-repeat;
  56. background-position: center;
  57. background-image: url(../img/ico--close.svg);
  58. border: 1px solid #fff;
  59. border-radius: 50%;
  60. position: absolute;
  61. top: calc(50% - 22px);
  62. right:20px;
  63. }
  64. h3{
  65. color: #FFF;
  66. text-align: center;
  67. font-size: 20px;
  68. font-style: normal;
  69. font-weight: 700;
  70. margin-bottom: 10px;
  71. letter-spacing: -0.4px;
  72. }
  73. p{
  74. color: #FFF;
  75. font-size: 15px;
  76. letter-spacing: -0.3px;
  77. font-weight: 500;
  78. }
  79. }
  80. }
  81. .header--contents--wrap{
  82. width:100%;
  83. @include flex-center;
  84. min-height:80px;
  85. .hnb--wrap{
  86. @include flex-center;
  87. gap:10px;
  88. button{
  89. padding:0px;
  90. border:0px;
  91. background: none;
  92. width:30px;
  93. height:30px;
  94. @include flex-center;
  95. &.hmb--btn{
  96. display: none;
  97. }
  98. }
  99. }
  100. .header--contents{
  101. width:100%;
  102. display: flex;
  103. flex-direction: column;
  104. .header--logo--wrap{
  105. border-bottom: 1px solid #d9d9d9;
  106. .logo--wrap{
  107. height: 100px;
  108. align-items: center;
  109. margin: 0 auto;
  110. width: 100%;
  111. max-width:1200px;
  112. display: flex;
  113. justify-content: space-between;
  114. padding: 20px 0;
  115. .logo{
  116. max-width: 210px;
  117. display: flex;
  118. align-items: center;
  119. width: 25%;
  120. height: 58px;
  121. a{
  122. display: inline-block;
  123. img{
  124. width: 100%;
  125. }
  126. }
  127. }
  128. .txt{
  129. width: calc(70% - 20px);
  130. display: flex;
  131. flex-direction: column;
  132. gap: 15px;
  133. justify-content: center;
  134. p{
  135. color: #000;
  136. font-size: 15px;
  137. font-weight: 300;
  138. letter-spacing: -0.15px;
  139. line-height: 1;
  140. span{
  141. color: #1aaf59;
  142. font-weight: 600;
  143. }
  144. &:last-child{
  145. font-size: 18px;
  146. span{
  147. font-weight: 700;
  148. }
  149. }
  150. }
  151. }
  152. .ham--btn{
  153. display: none;
  154. width: 30px;
  155. min-width: 30px;
  156. height: 30px;
  157. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cline y1='11' x2='22' y2='11' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='18' x2='22' y2='18' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='4' x2='22' y2='4' stroke='black' stroke-width='2'%3E%3C/line%3E%3C/svg%3E");
  158. background-repeat: no-repeat;
  159. background-size: 22px 22px;
  160. background-position: center;
  161. cursor: pointer;
  162. }
  163. }
  164. }
  165. &.actv{
  166. .header--gnb--wrap{
  167. .sub--wrap{
  168. max-height: 500px;
  169. }
  170. }
  171. }
  172. .header--gnb--wrap{
  173. .gnb--wrap{
  174. width: 100%;
  175. max-width: 1200px;
  176. margin: 0 auto;
  177. >ul{
  178. width: 100%;
  179. @include flex-center;
  180. li{
  181. width: 20%;
  182. position: relative;
  183. text-align: center;
  184. a{
  185. width: 100%;
  186. color: #000;
  187. font-size: 17px;
  188. height: 70px;
  189. display: inline-block;
  190. line-height: 70px;
  191. font-style: normal;
  192. font-weight: 600;
  193. letter-spacing: -0.34px;
  194. }
  195. ul{
  196. /*!2025-07-23 추가 */
  197. pointer-events: none;
  198. position: absolute;
  199. top:-500px;
  200. left:50%;
  201. opacity: 0;
  202. transform: translateX(-50%) translateY(-20px);
  203. transition: transform linear .2s, opacity linear .4s;
  204. background: transparent;
  205. padding:10px;
  206. z-index: 1000;
  207. li{
  208. padding:5px;
  209. a{
  210. color: #191919;
  211. font-size: 17px;
  212. font-style: normal;
  213. font-weight: 500;
  214. letter-spacing: -0.34px;
  215. white-space: nowrap;
  216. strong{
  217. color: #5D1BB8;
  218. font-size: 17px;
  219. font-style: normal;
  220. font-weight: 700;
  221. letter-spacing: -0.34px;
  222. }
  223. }
  224. }
  225. }
  226. }
  227. }
  228. }
  229. .sub--wrap{
  230. max-height: 0;
  231. transition: max-height 0.3s;
  232. overflow: hidden;
  233. >ul{
  234. max-width: 1200px;
  235. padding-bottom: 10px;
  236. margin: 0 auto;
  237. width: 100%;
  238. display: flex;
  239. li{
  240. width: 20%;
  241. a{
  242. display: inline-block;
  243. text-align: center;
  244. width: 100%;
  245. line-height: 1;
  246. font-size: 16px;
  247. font-weight: 400;
  248. padding: 10px 0;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. }
  255. }
  256. .header--ham--wrap{
  257. background-color: #ffffff;
  258. position: fixed;
  259. left: 100%;
  260. top: 0;
  261. width: 100%;
  262. height: 100vh;
  263. transition: all 0.3s;
  264. z-index: 10001;
  265. display: flex;
  266. flex-direction: column;
  267. &.actv{
  268. left: 0%;
  269. }
  270. .header--ham--top{
  271. background-color: #2ecc71;
  272. padding: 20px;
  273. display: flex;
  274. align-items: center;
  275. justify-content: space-between;
  276. .logo--wrap{
  277. display: inline-block;
  278. max-width: 210px;
  279. width: 25%;
  280. img{
  281. width: 100%;
  282. }
  283. }
  284. .login--menu{
  285. display: flex;
  286. gap: 20px;
  287. .ico--user{
  288. display: inline-block;
  289. width: 24px;
  290. height: 24px;
  291. background-repeat: no-repeat;
  292. background-image: url(../img/ico_user.svg);
  293. }
  294. .ico--close{
  295. display: inline-block;
  296. cursor: pointer;
  297. background-repeat: no-repeat;
  298. width: 24px;
  299. height: 24px;
  300. background-image: url(../img/ico_close2.svg);
  301. }
  302. }
  303. }
  304. .header--ham--menu{
  305. display: flex;
  306. .ham--l{
  307. position: relative;
  308. width: 51%;
  309. height: calc(100vh - 84px);
  310. overflow-y: auto;
  311. background-color: #F5F5F5;
  312. ul{
  313. padding: 0;
  314. margin-bottom: 0;
  315. li{
  316. list-style: none;
  317. cursor: pointer;
  318. padding: 30px 10px;
  319. color: #222222;
  320. line-height: 1;
  321. letter-spacing: -0.3px;
  322. border-bottom: 1px solid #E3E3E3;
  323. font-weight: 400;
  324. background-color: #F5F5F5;
  325. font-size: 15px;
  326. text-align: center;
  327. &.actv{
  328. background-color: #ffffff;;
  329. }
  330. }
  331. }
  332. .menu--login{
  333. text-decoration: none;
  334. color: #555;
  335. width: 100%;
  336. font-size: 16px;
  337. font-weight: 500;
  338. margin: 50px 0;
  339. line-height: 1;
  340. letter-spacing: -0.32px;
  341. display: flex;
  342. align-items: center;
  343. justify-content: center;
  344. text-align: center;
  345. gap: 12px;
  346. .ico{
  347. width: 16px;
  348. height: 16px;
  349. &.login{
  350. background-image: url(../img/ico_login.svg);
  351. }
  352. &.logout{
  353. background-image: url(../img/ico_logout.svg);
  354. }
  355. }
  356. }
  357. }
  358. .ham--r{
  359. width: 49%;
  360. padding: 0 15px;
  361. height: calc(100vh - 84px);
  362. overflow-y: auto;
  363. ul{
  364. padding: 0;
  365. display: none;
  366. &.actv{
  367. display: block;
  368. }
  369. li{
  370. list-style: none;
  371. a{
  372. width: 100%;
  373. font-size: 15px;
  374. display: inline-block;
  375. color: #222222;
  376. line-height: 1;
  377. padding: 30px 15px;
  378. letter-spacing: -0.3px;
  379. border-bottom: 1px solid #F6F6F6;
  380. text-decoration: none;
  381. &.actv{
  382. color: #315BFF;
  383. font-weight: 500;
  384. }
  385. }
  386. }
  387. }
  388. }
  389. }
  390. }
  391. }
  392. main{
  393. padding-top: 270px!important;
  394. &.actv{
  395. padding-top: 170px!important;
  396. }
  397. .main--visual--section{
  398. overflow: hidden;
  399. position: relative;
  400. .main--visual--wrap{
  401. width:100%;
  402. .main--visual--img{
  403. width:100%;
  404. overflow: hidden;
  405. height:500px;
  406. position: relative;
  407. img{
  408. position: absolute;
  409. left:50%;
  410. transform: translateX(-50%);
  411. }
  412. .main--visual--txt{
  413. position: absolute;
  414. width: 100%;
  415. left: 50%;
  416. transform: translateX(-50%);
  417. height: 100%;
  418. padding: 0 20px;
  419. display: flex;
  420. align-items: center;
  421. justify-content: center;
  422. flex-direction: column;
  423. max-width: 1200px;
  424. gap: 40px;
  425. text-align: center;
  426. .sub--title{
  427. display: none;
  428. }
  429. h3{
  430. color: #191919;
  431. font-size: 50px;
  432. font-weight: 700;
  433. }
  434. p{
  435. font-size: 18px;
  436. color: #191919;
  437. font-weight: 400;
  438. margin-bottom: 30px;
  439. }
  440. }
  441. }
  442. }
  443. .main--visual--pager{
  444. position: absolute;
  445. left: 50%;
  446. transform: translateX(-50%);
  447. bottom:30px;
  448. z-index: 9;
  449. display: flex;
  450. justify-content: center;
  451. align-items: center;
  452. height: 90px;
  453. padding: 20px 35px;
  454. border-radius: 1000px;
  455. background: rgba(255, 255, 255, 0.60);
  456. backdrop-filter: blur(2px);
  457. .prev--next--wrap{
  458. padding-top: 20px;
  459. @include flex-center;
  460. display: flex;
  461. gap: 15px;
  462. align-items: center;
  463. justify-content: center;
  464. button{
  465. @include flex-center;
  466. width: 18px;
  467. height: 18px;
  468. border: none;
  469. background-color: transparent;
  470. background-image: url(../img/ico--swiper--left.svg);
  471. background-repeat: no-repeat;
  472. background-position: center;
  473. &.next--btn{
  474. background-image: url(../img/ico--swiper--right.svg);
  475. }
  476. }
  477. }
  478. .play--pause{
  479. @include flex-center;
  480. gap:11px;
  481. button{
  482. @include flex-center;
  483. width: 50px;
  484. height: 50px;
  485. border-radius: 50px;
  486. border:0px;
  487. background: rgba(255, 255, 255, 0.80);
  488. backdrop-filter: blur(2px);
  489. }
  490. }
  491. .main--visual--fraction{
  492. display: flex;
  493. align-items: center;
  494. justify-content: center;
  495. span{
  496. font-size: 13px;
  497. font-style: normal;
  498. line-height: 1;
  499. letter-spacing: -0.32px;
  500. font-weight: 500;
  501. color: rgba(0, 0, 0, 0.50);
  502. &.swiper-pagination-current{
  503. color:#000;
  504. font-weight: 800;
  505. }
  506. &.fraction-separator{
  507. background-color: #000;
  508. width: 1px;
  509. height: 12px;
  510. display: inline-block;
  511. margin: 0 10px;
  512. }
  513. }
  514. }
  515. .main--visual--pagination{
  516. display: flex;
  517. margin-right: 20px;
  518. gap: 5px;
  519. align-items: center;
  520. justify-content: center;
  521. padding-top: 20px;
  522. .swiper-pagination-bullet{
  523. width: 34px;
  524. height: 34px;
  525. border-radius: 50%;
  526. border: none;
  527. opacity: 1;
  528. background-color: transparent;
  529. cursor: pointer;
  530. position: relative;
  531. &::after{
  532. position: absolute;
  533. content: '';
  534. width: 4px;
  535. height: 4px;
  536. background-color: #000;
  537. border-radius: 50%;
  538. left: calc(50% - 2px);
  539. top: calc(50% - 2px);
  540. display: inline-block;
  541. }
  542. &.swiper-pagination-bullet-active{
  543. border: 1px solid rgba(0, 0, 0, 0.50);
  544. }
  545. }
  546. }
  547. .main--visual--progress{
  548. display: flex;
  549. justify-content: center;
  550. flex-direction: column;
  551. margin-right: 20px;
  552. .main--visual--progress--bar{
  553. display: flex;
  554. align-items: center;
  555. }
  556. .progress-title{
  557. padding-left: 30px;
  558. width: 230px;
  559. color: #000;
  560. white-space: nowrap;
  561. overflow: hidden;
  562. text-overflow: ellipsis;
  563. font-size: 16px;
  564. font-weight: 500;
  565. line-height: 1;
  566. margin-bottom: 4px;
  567. }
  568. .progress-bar{
  569. width: 200px;
  570. height: 2px;
  571. background-color: rgba(0, 0, 0, 0.2)!important;
  572. border-radius: 100px;
  573. position: relative;
  574. overflow: hidden;
  575. }
  576. .progress-text{
  577. color: #000;
  578. font-size: 15px;
  579. font-weight: 500;
  580. width: 30px;
  581. }
  582. }
  583. }
  584. }
  585. .mna--reason--wrap{
  586. overflow-x: hidden;
  587. .btn--wrap{
  588. display: flex;
  589. justify-content: center;
  590. padding: 40px 0;
  591. gap: 10px;
  592. button{
  593. border: 1px solid #dadada;
  594. background-color: #fff;
  595. width: 50px;
  596. height: 50px;
  597. border-radius: 50%;
  598. background-repeat: no-repeat;
  599. background-position: center;
  600. &.play--btn{
  601. background-image: url(../img/ico--swiper--pause.svg);
  602. &.pause{
  603. background-image: url(../img/ico--swiper--play.svg);
  604. }
  605. }
  606. &.prev--btn{
  607. background-image: url(../img/ico--swiper--left2.svg);
  608. }
  609. &.next--btn{
  610. background-image: url(../img/ico--swiper--right2.svg);
  611. }
  612. }
  613. }
  614. .swiper-slide{
  615. transform: translateX(50%);
  616. height: auto;
  617. .reason--box{
  618. border-radius: 30px;
  619. border: 1px solid #EEE;
  620. background: #FFF;
  621. box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
  622. height: 100%;
  623. display: flex;
  624. padding: 40px 45px 70px;
  625. flex-direction: column;
  626. >span{
  627. color: #1aaf59;
  628. font-size: 18px;
  629. font-weight: 700;
  630. line-height: 1;
  631. text-decoration-line: underline;
  632. text-decoration-style: solid;
  633. text-decoration-skip-ink: auto;
  634. text-decoration-thickness: auto;
  635. text-underline-offset: auto;
  636. text-underline-position: from-font;
  637. margin-bottom: 45px;
  638. }
  639. dt{
  640. color: #000;
  641. font-size: 20px;
  642. font-weight: 700;
  643. letter-spacing: -0.2px;
  644. margin-bottom: 35px;
  645. }
  646. dd{
  647. color: #333;
  648. font-size: 15px;
  649. font-weight: 300;
  650. letter-spacing: -0.15px;
  651. }
  652. }
  653. }
  654. }
  655. .mna--prof--wrap{
  656. display: flex;
  657. justify-content: center;
  658. align-items: center;
  659. flex-direction: column;
  660. .nav--wrapper{
  661. display: flex;
  662. align-items: center;
  663. justify-content: center;
  664. gap:10px;
  665. padding-bottom:50px;
  666. padding-top:40px;
  667. button{
  668. display: flex;
  669. width: 50px;
  670. height: 50px;
  671. border-radius: 50px;
  672. border-radius: 100px;
  673. border: 1px solid #DADADA;
  674. background: #fff;
  675. justify-content: center;
  676. align-items: center;
  677. &.play--btn{
  678. display: none;
  679. }
  680. }
  681. }
  682. .prof--man--swiper{
  683. width:100%;
  684. .swiper-slide{
  685. max-width:494px;
  686. .prof--card{
  687. display: flex;
  688. width:100%;
  689. padding:30px 40px;
  690. border-radius: 30px;
  691. border: 1px solid #E2E2E2;
  692. background: #FFF;
  693. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  694. align-items: center;
  695. justify-content: flex-start;
  696. gap:30px;
  697. .thumb{
  698. min-width: 150px;
  699. overflow: hidden;
  700. width:150px;
  701. height:150px;
  702. border-radius: 150px;
  703. }
  704. .desc--wrap{
  705. >h2{
  706. color: #191919;
  707. font-size: 20px;
  708. font-style: normal;
  709. font-weight: 800;
  710. line-height: 100%; /* 20px */
  711. span{
  712. color: #1AAF59;
  713. font-size: 15px;
  714. font-style: normal;
  715. font-weight: 600;
  716. line-height: 100%; /* 15px */
  717. margin-left:12px;
  718. }
  719. }
  720. .key--word{
  721. display: flex;
  722. padding-top:30px;
  723. flex-wrap: wrap;
  724. gap:5px;
  725. span{
  726. color: #1AAF59;
  727. text-align: center;
  728. font-size: 13px;
  729. font-style: normal;
  730. font-weight: 500;
  731. line-height: 100%; /* 13px */
  732. border-radius: 100px;
  733. border: 1px solid rgba(46, 204, 113, 0.50);
  734. padding:8px 10px;
  735. }
  736. }
  737. }
  738. }
  739. }
  740. }
  741. }
  742. .faq--wrapper{
  743. width: 100%;
  744. display: flex;
  745. justify-content: center;
  746. .inner--contents{
  747. width:100%;
  748. max-width:1200px;
  749. .section--title{
  750. color: #191919;
  751. text-align: center;
  752. font-size: 35px;
  753. font-style: normal;
  754. font-weight: 800;
  755. line-height: 100%; /* 35px */
  756. letter-spacing: -0.7px;
  757. }
  758. .faq--list--wrap{
  759. width:100%;
  760. max-width:1200px;
  761. padding-top:70px;
  762. ul{
  763. width: 100%;
  764. border-bottom:1px solid #E6E6E6;
  765. li{
  766. width: 100%;
  767. text-align: left;
  768. border-top:1px solid #E6E6E6;
  769. position: relative;
  770. @for $i from 1 through 9 {
  771. &:nth-of-type(#{$i}) {
  772. .faq--item--title {
  773. &::before {
  774. content: 'Q#{$i}';
  775. }
  776. }
  777. }
  778. }
  779. .faq--item--title{
  780. padding:30px 20px;
  781. position: relative;
  782. cursor: pointer;
  783. transition: background-color 0.3s ease;
  784. &:after{
  785. content:'';
  786. display: block;
  787. width:100%;
  788. height:1px;
  789. width:18px;
  790. height:18px;
  791. background: url(../img/chv_down.svg) no-repeat center center / contain;
  792. position: absolute;
  793. top:50%;
  794. right:20px;
  795. transform: translateY(-50%);
  796. }
  797. &.active{
  798. &:after{
  799. background: url(../img/chv_up.svg) no-repeat center center / contain;
  800. transform: translateY(-50%) rotate(0deg);
  801. }
  802. }
  803. > p{
  804. padding-left:60px;
  805. color: #222;
  806. font-size: 18px;
  807. font-style: normal;
  808. font-weight: 400;
  809. line-height: 100%; /* 18px */
  810. letter-spacing: -0.36px;
  811. }
  812. &::before{
  813. content:'';
  814. display:inline-flex;
  815. align-items: center;
  816. justify-content: center;
  817. position: absolute;
  818. top:50%;
  819. left:20px;
  820. transform: translateY(-50%);
  821. width:40px;
  822. min-width:40px;
  823. height:40px;
  824. border-radius: 40px;
  825. border-radius: 100px;
  826. border: 1px solid #E6E6E6;
  827. background: #FFF;
  828. color: #2ECC71;
  829. text-align: center;
  830. font-size: 15px;
  831. font-style: normal;
  832. font-weight: 700;
  833. line-height: 100%; /* 15px */
  834. letter-spacing: -0.3px;
  835. }
  836. }
  837. .faq--item--content{
  838. position: relative;
  839. padding:30px 20px;
  840. border-top: 1px solid #E6E6E6;
  841. background: #F6F6F6;
  842. display: none;
  843. > p{
  844. padding-left:60px;
  845. color: #333;
  846. font-size: 16px;
  847. font-style: normal;
  848. font-weight: 400;
  849. letter-spacing: -0.32px;
  850. }
  851. &::before{
  852. content:'A';
  853. position: absolute;
  854. top: 30px;
  855. left:20px;
  856. color: #FFF;
  857. text-align: center;
  858. font-size: 17px;
  859. font-style: normal;
  860. font-weight: 700;
  861. line-height: 100%; /* 17px */
  862. letter-spacing: -0.34px;
  863. display: inline-flex;
  864. align-items: center;
  865. justify-content: center;
  866. width:40px;
  867. min-width:40px;
  868. height:40px;
  869. border-radius: 100px;
  870. background: linear-gradient(180deg, #65CC2E 0%, #2ECC71 52.4%, #2597D0 100%);
  871. }
  872. }
  873. }
  874. }
  875. }
  876. }
  877. }
  878. .gray--section{
  879. background-color: #f9f9f9;
  880. }
  881. .green--section{
  882. background-color: #2ECC71;
  883. }
  884. .light--green--section{
  885. background-color: #e9f7ef;
  886. }
  887. .impt--section{
  888. background: url(../img/dear_bg.png) no-repeat center center / cover;
  889. }
  890. .section--container{
  891. max-width: 1200px;
  892. width: 100%;
  893. margin: 0 auto;
  894. &.p--120{
  895. padding: 120px 0;
  896. }
  897. &.p--100{
  898. padding: 100px 0;
  899. }
  900. .title--wrap{
  901. >h2{
  902. text-align: center;
  903. color: #000;
  904. font-size: 35px;
  905. font-weight: 300;
  906. strong{
  907. font-weight: 700;
  908. }
  909. }
  910. >p{
  911. text-align: center;
  912. }
  913. &.big{
  914. >h2{
  915. color: #000;
  916. font-size: 50px;
  917. font-weight: 300;
  918. letter-spacing: -0.5px;
  919. margin-bottom: 60px;
  920. line-height: 1.4;
  921. strong{
  922. font-weight: 700;
  923. }
  924. }
  925. >p{
  926. color: #000;
  927. font-weight: 300;
  928. line-height: 1.7;
  929. font-size: 18px;
  930. }
  931. }
  932. &.le{
  933. >h2, >p{
  934. text-align: left;
  935. }
  936. }
  937. }
  938. .now--box--wrap{
  939. .box--top{
  940. display: flex;
  941. margin-bottom: 90px;
  942. justify-content: space-between;
  943. .box{
  944. gap: 40px;
  945. width: 33.333%;
  946. display: flex;
  947. flex-direction: column;
  948. align-items: center;
  949. text-align: center;
  950. >p{
  951. color: #000;
  952. font-size: 18px;
  953. font-weight: 300;
  954. strong{
  955. font-weight: 700;
  956. }
  957. }
  958. }
  959. }
  960. .box--bot{
  961. display: flex;
  962. gap: 40px;
  963. .box{
  964. width: 50%;
  965. border-radius: 20px;
  966. padding: 0 40px;
  967. display: flex;
  968. align-items: center;
  969. height: 120px;
  970. background-size: cover;
  971. background-repeat: no-repeat;
  972. background-position: right bottom;
  973. background-image: url(../img/bg--now1.svg);
  974. &:last-child{
  975. background-image: url(../img/bg--now2.svg);
  976. }
  977. }
  978. }
  979. }
  980. .growth--logic--wrap{
  981. display: flex;
  982. flex-wrap: wrap;
  983. gap: 40px;
  984. >div{
  985. width: calc((100% - 120px) / 3);
  986. }
  987. .title--box{
  988. width: calc((100% - 120px) / 3 + 40px);
  989. h2{
  990. color: #fff;
  991. font-size: 45px;
  992. font-weight: 300;
  993. letter-spacing: -0.45px;
  994. strong{
  995. font-weight: 800;
  996. color: #fff;
  997. }
  998. }
  999. .btn--wrap{
  1000. display: flex;
  1001. flex-wrap: wrap;
  1002. gap: 15px;
  1003. a{
  1004. display: inline-block;
  1005. padding: 20px 30px;
  1006. color: #fff;
  1007. border-radius: 1000px;
  1008. border: 1px solid #fff;
  1009. line-height: 1;
  1010. }
  1011. }
  1012. }
  1013. .logic--box{
  1014. border-radius: 25px;
  1015. background-color: #fff;
  1016. min-height: 350px;
  1017. padding: 50px 45px 70px;
  1018. dt{
  1019. color: #333;
  1020. font-size: 22px;
  1021. font-weight: 700;
  1022. letter-spacing: -0.22px;
  1023. margin-bottom: 30px;
  1024. strong{
  1025. color :#1aaf59;
  1026. font-weight: 700;
  1027. }
  1028. }
  1029. dd{
  1030. color: #444;
  1031. font-size: 15px;
  1032. font-weight: 400;
  1033. letter-spacing: -0.15px;
  1034. line-height: 1.7;
  1035. }
  1036. &.special{
  1037. width: calc((100% - 120px) / 3 + 40px);
  1038. background-color: #139e4e;
  1039. background-image: url(../img/ico--logic.svg);
  1040. background-repeat: no-repeat;
  1041. background-position: right bottom;
  1042. dt{
  1043. color :#fff;
  1044. text-decoration-line: underline;
  1045. text-decoration-style: solid;
  1046. text-decoration-skip-ink: auto;
  1047. text-decoration-thickness: auto;
  1048. text-underline-offset: auto;
  1049. text-underline-position: from-font;
  1050. }
  1051. dd{
  1052. color: #fff;
  1053. }
  1054. }
  1055. }
  1056. }
  1057. .best--service--wrap{
  1058. display: flex;
  1059. gap: 40px;
  1060. .service--box{
  1061. padding: 40px 45px 70px;
  1062. border: 1px solid #e5e5e5;
  1063. border-radius: 25px;
  1064. position: relative;
  1065. width: calc((100% - 80px) / 3);
  1066. .service--img{
  1067. img{
  1068. width: 70%;
  1069. max-width: 140px;
  1070. }
  1071. }
  1072. &:nth-child(2){
  1073. .service--numb{
  1074. background-image: url(../img/numb--service2.svg);
  1075. }
  1076. }
  1077. &:nth-child(3){
  1078. .service--numb{
  1079. background-image: url(../img/numb--service3.svg);
  1080. }
  1081. }
  1082. .service--numb{
  1083. position: absolute;
  1084. right: 0;
  1085. display: inline-block;
  1086. width: 25%;
  1087. max-width: 100px;
  1088. background-size: 100%;
  1089. height: 100px;
  1090. background-repeat: no-repeat;
  1091. background-position: top right;
  1092. top: 10px;
  1093. background-image: url(../img/numb--service1.svg);
  1094. }
  1095. h3{
  1096. margin-top: 40px;
  1097. margin-bottom: 30px;
  1098. font-size: 22px;
  1099. color: #191919;
  1100. font-weight: 300;
  1101. letter-spacing: -0.22px;
  1102. line-height: 1.4;
  1103. strong{
  1104. font-weight: 700;
  1105. }
  1106. }
  1107. p{
  1108. color: #333;
  1109. font-size: 16px;
  1110. letter-spacing: -0.16px;
  1111. line-height: 1.7;
  1112. font-weight: 300;
  1113. }
  1114. }
  1115. }
  1116. .process--plan--wrap{
  1117. .title--wrap{
  1118. margin-bottom: 70px;
  1119. span{
  1120. color: #1aaf59;
  1121. font-size: 15px;
  1122. text-transform: uppercase;
  1123. display: inline-block;
  1124. margin-bottom: 25px;
  1125. }
  1126. h2{
  1127. font-size: 30px;
  1128. font-weight: 400;
  1129. margin-bottom: 25px;
  1130. }
  1131. p{
  1132. font-size: 18px;
  1133. font-weight: 300;
  1134. }
  1135. }
  1136. .content--wrap{
  1137. h3{
  1138. .ico{
  1139. width: 20px;
  1140. height: 20px;
  1141. background-image: url(../img/ico--heart.svg);
  1142. display: inline-block;
  1143. background-repeat: no-repeat;
  1144. background-position: center;
  1145. margin-right: 15px;
  1146. }
  1147. color: #000;
  1148. font-size: 20px;
  1149. font-weight: 700;
  1150. letter-spacing: -0.2px;
  1151. display: flex;
  1152. align-items: center;
  1153. margin-bottom: 40px;
  1154. }
  1155. .direct--wrap{
  1156. display: flex;
  1157. justify-content: space-between;
  1158. align-items: center;
  1159. gap: 20px;
  1160. .circle{
  1161. display: flex;
  1162. min-width: 190px;
  1163. justify-content: center;
  1164. gap: 12px;
  1165. padding: 20px 40px;
  1166. background-color: #2ECC71;
  1167. align-items: center;
  1168. border-radius: 100px;
  1169. p{
  1170. color: #fff;
  1171. font-size: 16px;
  1172. font-weight: 600;
  1173. line-height: 1;
  1174. letter-spacing: -0.17px;
  1175. }
  1176. .ico{
  1177. width: 25px;
  1178. min-width: 25px;
  1179. height: 25px;
  1180. display: inline-block;
  1181. background-position: center;
  1182. background-repeat: no-repeat;
  1183. background-size: 100%;
  1184. background-image: url(../img/ico--direct1.svg);
  1185. }
  1186. &:nth-of-type(2){
  1187. background-color: #188345;
  1188. .ico{
  1189. background-image: url(../img/ico--direct2.svg);
  1190. }
  1191. }
  1192. &:nth-of-type(3){
  1193. .ico{
  1194. background-image: url(../img/ico--direct3.svg);
  1195. }
  1196. }
  1197. &:nth-of-type(4){
  1198. background-color: #188345;
  1199. .ico{
  1200. background-image: url(../img/ico--direct4.svg);
  1201. }
  1202. }
  1203. }
  1204. .bar{
  1205. width: 70px;
  1206. height: 1px;
  1207. border-bottom: 3px dashed #2ecc71;
  1208. }
  1209. }
  1210. .process--wrap{
  1211. /*! 20250904 수정 : S */
  1212. .process--title{
  1213. width: 100%;
  1214. display: flex;
  1215. align-items: center;
  1216. gap: 15px;
  1217. .process--circle{
  1218. position: relative;
  1219. padding: 25px 30px;
  1220. text-align: center;
  1221. width: fit-content;
  1222. background-image: url(../img/bg--process.svg);
  1223. background-repeat: no-repeat;
  1224. background-size: cover;
  1225. color: #222;
  1226. font-size: 16px;
  1227. margin: 12px auto;
  1228. border-radius: 1000px;
  1229. letter-spacing: -0.16px;
  1230. font-weight: 600;
  1231. &::after{
  1232. content: '';
  1233. width: calc(100% + 24px);
  1234. height: calc(100% + 24px);
  1235. border: 5px solid #DDEE81;
  1236. position: absolute;
  1237. display: inline-block;
  1238. border-radius: inherit;
  1239. top: -12px;
  1240. left: -12px;
  1241. }
  1242. }
  1243. .arrow{
  1244. flex: 1;
  1245. margin-left: 53px;
  1246. margin-right: 25px;
  1247. height: 20px;
  1248. background-color: #2ecc71;
  1249. position: relative;
  1250. .arrow--bar{
  1251. width: 100%;
  1252. display: inline-block;
  1253. background-position: right center;
  1254. background-repeat: no-repeat;
  1255. width: 100%;
  1256. height: 20px;
  1257. background-image: url(../img/ico--rainbow--arrow7.svg);
  1258. }
  1259. .arrow--tail{
  1260. display: inline-block;
  1261. position: absolute;
  1262. width: 20px;
  1263. height: 110px;
  1264. top: 0;
  1265. left: 0;
  1266. background-color: #2ECC71;
  1267. background-repeat: no-repeat;
  1268. &::before{
  1269. content: '';
  1270. position: absolute;
  1271. bottom: -20px;
  1272. left: -6.5px;
  1273. width: 33px;
  1274. height: 20px;
  1275. background-image: url(../img/ico--arrow.svg);
  1276. }
  1277. }
  1278. &.right{
  1279. margin-right: 53px;
  1280. margin-left: 25px;
  1281. .arrow--bar{
  1282. background-position: left center;
  1283. background-image: url(../img/ico--rainbow--arrow8.svg);
  1284. }
  1285. .arrow--tail{
  1286. left: auto;
  1287. right: 0;
  1288. }
  1289. }
  1290. }
  1291. }
  1292. /*! 20250904 수정 : E */
  1293. .process--cont{
  1294. padding-top: 60px;
  1295. .process--top{
  1296. display: flex;
  1297. align-items: center;
  1298. justify-content: space-between;
  1299. .process--side{
  1300. width: 123px;
  1301. display: flex;
  1302. gap: 15px;
  1303. flex-direction: column;
  1304. justify-content: center;
  1305. position: relative;
  1306. &::after{
  1307. content: '';
  1308. display: inline-block;
  1309. width: 70px;
  1310. height: 100%;
  1311. z-index: 3;
  1312. background-repeat: no-repeat;
  1313. background-position: center;
  1314. background-image: url(../img/ico--rainbow--arrow1.svg);
  1315. position: absolute;
  1316. top: 0;
  1317. left: calc(100% + 20px);
  1318. }
  1319. &:last-child{
  1320. &::after{
  1321. left: auto;
  1322. right: calc(100% + 20px);
  1323. background-image: url(../img/ico--rainbow--arrow2.svg);
  1324. }
  1325. }
  1326. .circle{
  1327. color: #444;
  1328. font-size: 16px;
  1329. text-align: center;
  1330. padding: 19px 0;
  1331. border-radius: 100px;
  1332. border: 2px solid #ddee81;
  1333. font-weight: 600;
  1334. line-height: 1;
  1335. letter-spacing: -0.16px;
  1336. strong{
  1337. font-weight: 600;
  1338. color: #1aaf59;
  1339. }
  1340. }
  1341. .line{
  1342. height: 50px;
  1343. width: 50%;
  1344. border-right: 3px dashed #ddee81;
  1345. }
  1346. &.right{
  1347. }
  1348. }
  1349. .process--circle{
  1350. width: calc(100% - 300px);
  1351. height: 410px;
  1352. display: flex;
  1353. background-image: url(../img/bg--process--circle.svg);
  1354. background-repeat: no-repeat;
  1355. background-position: center;
  1356. align-items: center;
  1357. justify-content: center;
  1358. background-size: 100%;
  1359. position: relative;
  1360. &::after{
  1361. content: '';
  1362. background-repeat: no-repeat;
  1363. background-position: center;
  1364. display: inline-block;
  1365. width: 33px;
  1366. height: 71px;
  1367. background-image: url(../img/ico--rainbow--arrow3.svg);
  1368. position: absolute;
  1369. top: calc(100% - 40px);
  1370. }
  1371. .circle{
  1372. width: 28%;
  1373. display: flex;
  1374. flex-direction: column;
  1375. gap: 35px;
  1376. align-items: center;
  1377. position: relative;
  1378. &::after{
  1379. content: '';
  1380. position: absolute;
  1381. right: -7.5px;
  1382. display: inline-block;
  1383. top: calc(50% - 15px);
  1384. width: 30px;
  1385. height: 30px;
  1386. background-image: url(../img/ico--process--arrow.svg);
  1387. }
  1388. &:last-child{
  1389. &::after{
  1390. display: none;
  1391. }
  1392. }
  1393. .ico{
  1394. width: 80px;
  1395. height: 80px;
  1396. background-position: center;
  1397. background-size: 100%;
  1398. background-repeat: no-repeat;
  1399. display: inline-block;
  1400. }
  1401. p{
  1402. font-size: 18px;
  1403. font-weight: 400;
  1404. color: #000;
  1405. strong{
  1406. font-weight: 700;
  1407. }
  1408. }
  1409. &:nth-child(1){
  1410. .ico{
  1411. background-image: url(../img/ico--process--circle1.svg);
  1412. }
  1413. }
  1414. &:nth-child(2){
  1415. .ico{
  1416. background-image: url(../img/ico--process--circle2.svg);
  1417. }
  1418. }
  1419. &:nth-child(3){
  1420. .ico{
  1421. background-image: url(../img/ico--process--circle3.svg);
  1422. }
  1423. }
  1424. }
  1425. }
  1426. }
  1427. .process--bot{
  1428. padding-top: 50px;
  1429. padding-bottom: 120px;
  1430. display: flex;
  1431. flex-direction: column;
  1432. justify-content: center;
  1433. align-items: center;
  1434. gap: 20px;
  1435. .process--side{
  1436. width: 100%;
  1437. display: flex;
  1438. gap: 15px;
  1439. align-items: center;
  1440. justify-content: center;
  1441. .arrow{
  1442. flex: 1;
  1443. margin-left: 53px;
  1444. margin-right: 25px;
  1445. height: 20px;
  1446. position: relative;
  1447. background-color: #2ECC71;
  1448. &::after{
  1449. position: absolute;
  1450. bottom: -6.7px;
  1451. right: -13px;
  1452. background-size: 137px 33px;
  1453. background-position: right center;
  1454. background-repeat: no-repeat;
  1455. content: '';
  1456. width: 100%;
  1457. height: 33px;
  1458. background-image: url(../img/ico--rainbow--arrow5.svg);
  1459. }
  1460. &::before{
  1461. content: '';
  1462. display: inline-block;
  1463. position: absolute;
  1464. width: 20px;
  1465. height: 90px;
  1466. bottom: 0;
  1467. left: 0;
  1468. background-color: #2ECC71;
  1469. background-repeat: no-repeat;
  1470. background-image: url(../img/ico--rainbow--arrow--bar.svg);
  1471. }
  1472. &.right{
  1473. margin-right: 53px;
  1474. margin-left: 25px;
  1475. &::after{
  1476. right: auto;
  1477. left: -13px;
  1478. bottom: -6px;
  1479. background-position: left center;
  1480. background-image: url(../img/ico--rainbow--arrow6.svg);
  1481. }
  1482. &::before{
  1483. left: auto;
  1484. right: 0;
  1485. }
  1486. }
  1487. }
  1488. .circle{
  1489. width: 123px;
  1490. color: #444;
  1491. font-size: 16px;
  1492. text-align: center;
  1493. padding: 19px 0;
  1494. border-radius: 100px;
  1495. border: 2px solid #B0D48C;
  1496. font-weight: 600;
  1497. line-height: 1;
  1498. letter-spacing: -0.16px;
  1499. strong{
  1500. font-weight: 600;
  1501. color: #1aaf59;
  1502. }
  1503. }
  1504. .line{
  1505. width: 50px;
  1506. height: 1px;
  1507. border-bottom: 3px dashed #B0D48C;
  1508. }
  1509. }
  1510. .line{
  1511. display: inline-block;
  1512. width: 33px;
  1513. height: 71px;
  1514. background-image: url(../img/ico--rainbow--arrow4.svg);
  1515. }
  1516. .process--txt{
  1517. text-align: center;
  1518. font-weight: 700;
  1519. font-size: 25px;
  1520. line-height: 1;
  1521. color: #333;
  1522. strong{
  1523. color: #188345;
  1524. }
  1525. }
  1526. .process--blue--circle{
  1527. color: #fff;
  1528. letter-spacing: -0.18px;
  1529. font-size: 18px;
  1530. font-weight: 400;
  1531. position: relative;
  1532. padding: 36px 80px;
  1533. border-radius: 1000px;
  1534. background-color: #5281FF;
  1535. &::after{
  1536. content: '';
  1537. position: absolute;
  1538. width: 85px;
  1539. height: 104px;
  1540. top: 20px;
  1541. left: calc(100% - 50px);
  1542. background-image: url(../img/ico--process.svg);
  1543. }
  1544. strong{
  1545. color: #fff;
  1546. font-weight: 700;
  1547. }
  1548. }
  1549. }
  1550. .process--box{
  1551. display: flex;
  1552. flex-direction: column;
  1553. gap: 30px;
  1554. .box{
  1555. padding: 55px 200px 55px 70px;
  1556. background-color: #f0f3f5;
  1557. background-repeat: no-repeat;
  1558. background-position: right 40px bottom -20px;
  1559. &:nth-child(1){
  1560. background-image: url(../img/img--process1.svg);
  1561. background-position: right 40px center;
  1562. }
  1563. &:nth-child(2){
  1564. background-image: url(../img/img--process2.svg);
  1565. }
  1566. &:nth-child(3){
  1567. background-image: url(../img/img--process3.svg);
  1568. }
  1569. h4{
  1570. color: #000;
  1571. margin-bottom: 30px;
  1572. font-size: 20px;
  1573. font-weight: 700;
  1574. letter-spacing: -0.2px;
  1575. strong{
  1576. color: #009840;
  1577. }
  1578. }
  1579. li{
  1580. position: relative;
  1581. padding-left: 15px;
  1582. &::before{
  1583. position: absolute;
  1584. left: 0px;
  1585. top: 12px;
  1586. content: '';
  1587. width: 2px;
  1588. height: 2px;
  1589. background-color: #000;
  1590. border-radius: 50%;
  1591. }
  1592. }
  1593. p, li{
  1594. font-size: 15px;
  1595. color: #000;
  1596. font-weight: 300;
  1597. line-height: 1.7;
  1598. letter-spacing: -0.15px;
  1599. strong{
  1600. color: #009840;
  1601. font-weight: 600;
  1602. }
  1603. }
  1604. }
  1605. }
  1606. }
  1607. }
  1608. }
  1609. }
  1610. .four--strategy--wrap{
  1611. .strategy--cont1{
  1612. display: flex;
  1613. gap: 120px;
  1614. margin-bottom: 140px;
  1615. .cont--left{
  1616. width: 50%;
  1617. position: relative;
  1618. &::before{
  1619. content: '';
  1620. position: absolute;
  1621. height: 400px;
  1622. width: 1000%;
  1623. border-radius: 0 1000px 1000px 0;
  1624. background-color: rgba(53, 201, 149, 0.10);
  1625. right: 0;
  1626. top: 50%;
  1627. transform: translateY(-50%);
  1628. z-index: -1;
  1629. }
  1630. .box--wrap{
  1631. width: 440px;
  1632. display: flex;
  1633. flex-wrap: wrap;
  1634. gap: 40px;
  1635. position: relative;
  1636. &::before{
  1637. content: '';
  1638. position: absolute;
  1639. width: 346px;
  1640. height: 346px;
  1641. border-radius: 30px;
  1642. border: 1px solid rgba(53, 201, 149, 0.50);
  1643. transform: rotate(-45deg);
  1644. top: 0;
  1645. left: 45px;
  1646. z-index: -1;
  1647. }
  1648. li{
  1649. display: flex;
  1650. justify-content: center;
  1651. text-align: center;
  1652. flex-direction: column;
  1653. padding: 25px;
  1654. align-items: center;
  1655. width: 200px;
  1656. max-width: 200px;
  1657. height: 150px;
  1658. border-radius: 30px;
  1659. border: 1px solid #1BB57F;
  1660. gap: 10px;
  1661. background-color: #35C995;
  1662. span{
  1663. color: #fff;
  1664. font-size: 15px;
  1665. letter-spacing: -0.3px;
  1666. font-weight: 600;
  1667. }
  1668. div{
  1669. color: #fff;
  1670. font-size: 15px;
  1671. font-weight: 500;
  1672. letter-spacing: -0.3px;
  1673. }
  1674. strong{
  1675. color: #fff;
  1676. font-size: 50px;
  1677. font-weight: 800;
  1678. line-height: 1;
  1679. }
  1680. &:nth-child(3){
  1681. height: 170px;
  1682. }
  1683. &:last-child{
  1684. height: 170px;
  1685. border: 1px solid #079C68;
  1686. background-color: #1AAC78;
  1687. strong{
  1688. font-weight: 800;
  1689. font-size: 20px;
  1690. }
  1691. div{
  1692. font-size: 15px;
  1693. font-weight: 600;
  1694. span{
  1695. font-size: 14px;
  1696. display: block;
  1697. }
  1698. &.percent--wrap{
  1699. display: flex;
  1700. width: 100%;
  1701. flex-direction: column;
  1702. }
  1703. &.percent{
  1704. display: flex;
  1705. align-items: center;
  1706. width: 100%;
  1707. gap: 5px;
  1708. .line{
  1709. flex: 1;
  1710. border-bottom: 1px dashed #fff;
  1711. }
  1712. strong{
  1713. color: #ff0;
  1714. font-size: 14px;
  1715. font-weight: 800;
  1716. letter-spacing: -0.28px;
  1717. }
  1718. }
  1719. }
  1720. }
  1721. }
  1722. }
  1723. }
  1724. .cont--right{
  1725. width: 40%;
  1726. display: flex;
  1727. align-items: center;
  1728. dl{
  1729. dt{
  1730. color: #222;
  1731. font-size: 35px;
  1732. font-weight: 700;
  1733. margin-bottom: 15px;
  1734. }
  1735. dd{
  1736. div{
  1737. margin-bottom: 40px;
  1738. font-weight: 300;
  1739. font-size: 20px;
  1740. color: #333;
  1741. strong{
  1742. color: #1aaf59;
  1743. font-weight: 800;
  1744. }
  1745. }
  1746. span{
  1747. color: #222;
  1748. font-size: 18px;
  1749. font-weight: 300;
  1750. }
  1751. }
  1752. }
  1753. }
  1754. }
  1755. .strategy--cont2{
  1756. margin-bottom: 60px;
  1757. display: flex;
  1758. align-items: center;
  1759. flex-direction: column;
  1760. .question, .question2{
  1761. color: #333;
  1762. font-size: 25px;
  1763. font-weight: 300;
  1764. letter-spacing: -0.5px;
  1765. margin-bottom: 20px;
  1766. strong{
  1767. color: #191919;
  1768. font-weight: 800;
  1769. }
  1770. }
  1771. .question2{
  1772. margin-bottom: 40px;
  1773. strong{
  1774. color: #1AAF59;
  1775. }
  1776. }
  1777. .answer, .answer2{
  1778. letter-spacing: -0.36px;
  1779. text-align: center;
  1780. color: #555;
  1781. font-size: 18px;
  1782. margin-bottom: 40px;
  1783. font-weight: 300;
  1784. }
  1785. .answer2{
  1786. color: #222;
  1787. margin-bottom: 50px;
  1788. }
  1789. .result{
  1790. padding: 20px 30px;
  1791. border-radius: 100px;
  1792. background-color: rgba(26, 175, 89, 0.1);
  1793. font-weight: 300;
  1794. font-size: 19px;
  1795. strong{
  1796. font-weight: 600;
  1797. }
  1798. }
  1799. }
  1800. .strategy--cont3{
  1801. display: flex;
  1802. flex-direction: column;
  1803. gap: 35px;
  1804. .box{
  1805. padding: 30px 50px;
  1806. border-radius: 40px;
  1807. border: 1px solid #EEE;
  1808. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
  1809. background-repeat: no-repeat;
  1810. background-position: right 40px bottom;
  1811. dt{
  1812. margin-bottom: 20px;
  1813. color: #1aaf59;
  1814. font-size: 30px;
  1815. font-weight: 700;
  1816. }
  1817. dd{
  1818. ul{
  1819. display: flex;
  1820. flex-direction: column;
  1821. gap: 18px;
  1822. }
  1823. li{
  1824. color: #333;
  1825. font-size: 15px;
  1826. font-weight: 300;
  1827. padding-left: 15px;
  1828. position: relative;
  1829. &::before{
  1830. background-color: #8b8b8b;
  1831. width: 5px;
  1832. height: 5px;
  1833. display: inline-block;
  1834. border-radius: 50%;
  1835. content: '';
  1836. position: absolute;
  1837. top: 8px;
  1838. left: 3px;
  1839. }
  1840. }
  1841. }
  1842. &:nth-child(1){
  1843. background-image: url(../img/img--strategy1.svg);
  1844. }
  1845. &:nth-child(2){
  1846. background-position: right 100px bottom;
  1847. background-image: url(../img/img--strategy2.svg);
  1848. }
  1849. &:nth-child(3){
  1850. background-image: url(../img/img--strategy3.svg);
  1851. }
  1852. }
  1853. }
  1854. }
  1855. .mna--dream--wrap{
  1856. display: flex;
  1857. gap: 40px;
  1858. justify-content: center;
  1859. .dream--cont{
  1860. width: 50%;
  1861. background-color: #d1eede;
  1862. padding: 60px 50px 80px;
  1863. border-radius: 30px;
  1864. h4{
  1865. letter-spacing: -0.6px;
  1866. font-size: 30px;
  1867. color: #191919;
  1868. font-weight: 300;
  1869. line-height: 1.4;
  1870. margin-bottom: 35px;
  1871. strong{
  1872. font-weight: 700;
  1873. }
  1874. }
  1875. .sub--txt{
  1876. margin-bottom: 40px;
  1877. font-size: 18px;
  1878. font-weight: 300;
  1879. color: #333;
  1880. }
  1881. .box{
  1882. padding: 30px;
  1883. background-color: #B4DAC4;
  1884. margin-bottom: 50px;
  1885. border-radius: 20px;
  1886. .box--title{
  1887. color: #397251;
  1888. font-size: 18px;
  1889. font-weight: 700;
  1890. letter-spacing: -0.36px;
  1891. margin-bottom: 15px;
  1892. }
  1893. .box--desc{
  1894. font-weight: 400;
  1895. font-size: 15px;
  1896. color: #333;
  1897. li{
  1898. position: relative;
  1899. padding-left: 12px;
  1900. font-size: 15px;
  1901. color: #333;
  1902. &::before{
  1903. position: absolute;
  1904. left: 0;
  1905. top: 0;
  1906. content: '-';
  1907. }
  1908. }
  1909. }
  1910. }
  1911. .chat{
  1912. display: flex;
  1913. gap: 30px;
  1914. .chat--img{
  1915. min-width: 90px;
  1916. width: 90px;
  1917. height: 90px;
  1918. border-radius: 50%;
  1919. background-image: url(../img/img--dream.svg);
  1920. background-repeat: no-repeat;
  1921. background-position: bottom center;
  1922. background-color: #bde8cf;
  1923. }
  1924. .chat--bubble{
  1925. border-radius: 20px;
  1926. padding: 25px;
  1927. border: 1px solid #EEE;
  1928. width: 100%;
  1929. background: #FFF;
  1930. margin-bottom: 40px;
  1931. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  1932. span{
  1933. color: #1aaf59;
  1934. font-size: 15px;
  1935. font-weight: 500;
  1936. }
  1937. }
  1938. }
  1939. .chat--answer{
  1940. margin-bottom: 50px;
  1941. line-height: 1.7;
  1942. color: #111;
  1943. font-size: 16px;
  1944. font-weight: 400;
  1945. letter-spacing: -0.32px;
  1946. ul{
  1947. margin-top: 10px;
  1948. display: flex;
  1949. flex-direction: column;
  1950. gap: 10px;
  1951. li{
  1952. position: relative;
  1953. padding-left: 10px;
  1954. line-height: 1.4;
  1955. color: #111;
  1956. font-size: 15px;
  1957. font-weight: 400;
  1958. letter-spacing: -0.3px;
  1959. &::before{
  1960. content: '';
  1961. width: 3px;
  1962. height: 3px;
  1963. border-radius: 50%;
  1964. display: inline-block;
  1965. background-color: #111;
  1966. position: absolute;
  1967. left: 0;
  1968. top: 7px;
  1969. }
  1970. }
  1971. }
  1972. &:last-child{
  1973. margin-bottom: 0;
  1974. }
  1975. }
  1976. &.purple{
  1977. background-color: #e4e9ff;
  1978. .box{
  1979. background-color: #D0D9FF;
  1980. .box--title{
  1981. color: #3A54C5;
  1982. }
  1983. }
  1984. .chat{
  1985. .chat--img{
  1986. background-color: #cfd8ff;
  1987. }
  1988. }
  1989. }
  1990. }
  1991. }
  1992. .family--business--wrap{
  1993. .family--cont--wrap{
  1994. margin-bottom: 80px;
  1995. display: flex;
  1996. gap: 20px;
  1997. justify-content: space-between;
  1998. .cont--left{
  1999. display: flex;
  2000. flex-direction: column;
  2001. position: relative;
  2002. h2{
  2003. color: #333;
  2004. font-size: 40px;
  2005. font-weight: 300;
  2006. letter-spacing: -0.45px;
  2007. margin-bottom: 50px;
  2008. strong{
  2009. font-weight: 700;
  2010. color: #191919;
  2011. }
  2012. }
  2013. span{
  2014. color: #333;
  2015. font-size: 20px;
  2016. font-weight: 300;
  2017. letter-spacing: -0.4px;
  2018. margin-bottom: 80px;
  2019. }
  2020. .btn--wrap{
  2021. display: flex;
  2022. gap: 15px;
  2023. a{
  2024. display: inline-block;
  2025. padding: 20px 30px;
  2026. background-color: #fff;
  2027. color: #1aaf59;
  2028. font-weight: 500;
  2029. border-radius: 1000px;
  2030. border: 1px solid rgba(46, 204, 113, 0.50);
  2031. line-height: 1;
  2032. }
  2033. }
  2034. .family--img{
  2035. position: absolute;
  2036. bottom: 80px;
  2037. right: 0;
  2038. }
  2039. }
  2040. .cont--right{
  2041. width: 700px;
  2042. gap: 60px;
  2043. display: flex;
  2044. .family--box--wrap{
  2045. width: 50%;
  2046. display: flex;
  2047. flex-direction: column;
  2048. gap: 50px;
  2049. }
  2050. .family--box{
  2051. display: flex;
  2052. border-radius: 30px;
  2053. background-color: #f6f6f6;
  2054. padding: 35px 35px 60px 35px;
  2055. flex-direction: column;
  2056. .ico{
  2057. width: 70px;
  2058. height: 70px;
  2059. background-size: 35px 35px;
  2060. background-color: #2ecc71;
  2061. border-radius: 15px;
  2062. background-position: center;
  2063. background-repeat: no-repeat;
  2064. margin-bottom: 50px;
  2065. }
  2066. p{
  2067. font-size: 23px;
  2068. color: #000;
  2069. letter-spacing: -0.46px;
  2070. font-weight: 500;
  2071. margin-bottom: 25px;
  2072. }
  2073. span{
  2074. color: #000;
  2075. font-size: 16px;
  2076. font-weight: 300;
  2077. letter-spacing: -0.32px;
  2078. }
  2079. .ico{
  2080. &.ico1{
  2081. background-image: url(../img/ico--family1.svg);
  2082. }
  2083. &.ico2{
  2084. background-image: url(../img/ico--family2.svg);
  2085. }
  2086. &.ico3{
  2087. background-image: url(../img/ico--family3.svg);
  2088. }
  2089. &.ico4{
  2090. background-image: url(../img/ico--family4.svg);
  2091. }
  2092. &.ico5{
  2093. background-image: url(../img/ico--family5.svg);
  2094. }
  2095. }
  2096. }
  2097. }
  2098. }
  2099. .family--table--wrap{
  2100. .table--title{
  2101. margin-bottom: 30px;
  2102. width: fit-content;
  2103. border-radius: 1000px;
  2104. padding: 15px 30px;
  2105. color: #1aaf59;
  2106. letter-spacing: -0.32px;
  2107. font-size: 16px;
  2108. font-weight: 600;
  2109. border: 1px solid rgba(46, 204, 113, 0.50);
  2110. }
  2111. .table--wrap{
  2112. margin-bottom: 50px;
  2113. &:last-child{
  2114. margin-bottom: 0;
  2115. }
  2116. }
  2117. table{
  2118. width: 100%;
  2119. text-align: center;
  2120. tr{
  2121. &:first-child{
  2122. th{
  2123. border-bottom: none;
  2124. .ico{
  2125. background-image: url(../img/ico--strategy1.svg);
  2126. }
  2127. }
  2128. }
  2129. th{
  2130. border: 1px solid #d7d7d7;
  2131. background-color: #f3f3f3;
  2132. color: #222;
  2133. font-size: 16px;
  2134. font-weight: 600;
  2135. padding: 25px 20px;
  2136. &:nth-of-type(2){
  2137. background-color: #2ecc71;
  2138. border-color: #17b55a;
  2139. color: #fff;
  2140. }
  2141. }
  2142. td{
  2143. color: #111;
  2144. padding: 25px 20px;
  2145. background-color: #fff;
  2146. font-size: 16px;
  2147. font-weight: 400;
  2148. letter-spacing: -0.32px;
  2149. border: 1px solid #e0e0e0;
  2150. &.color--green{
  2151. color: #0f9247;
  2152. strong{
  2153. color: #0f9247;
  2154. font-weight: 700;
  2155. }
  2156. }
  2157. ul{
  2158. li{
  2159. text-align: left;
  2160. color: #111;
  2161. font-size: 16px;
  2162. font-weight: 400;
  2163. position: relative;
  2164. padding-left: 10px;
  2165. &::before{
  2166. content: '';
  2167. width: 3px;
  2168. height: 3px;
  2169. border-radius: 50%;
  2170. background-color: #111;
  2171. display: inline-block;
  2172. top: 10px;
  2173. left: 0;
  2174. position: absolute;
  2175. }
  2176. }
  2177. }
  2178. }
  2179. }
  2180. }
  2181. }
  2182. }
  2183. .impt--search--wrap{
  2184. display: flex;
  2185. align-items: center;
  2186. justify-content: center;
  2187. flex-direction: column;
  2188. > ul{
  2189. display: flex;
  2190. align-items: center;
  2191. justify-content: center;
  2192. gap:40px;
  2193. row-gap: 35px;
  2194. padding-top:70px;
  2195. width:100%;
  2196. max-width:1200px;
  2197. flex-wrap: wrap;
  2198. li{
  2199. display: flex;
  2200. align-items: center;
  2201. justify-content: space-between;
  2202. gap:25px;
  2203. width:calc( (100% - 80px ) / 3);
  2204. border-radius: 100px;
  2205. padding:20px 30px;
  2206. position: relative;
  2207. &:nth-of-type(odd){
  2208. background: linear-gradient(134deg, #52ABFF 6.76%, #5281FF 50.56%, #AE52FF 93.53%);
  2209. }
  2210. &:nth-of-type(even){
  2211. background: linear-gradient(134deg, #6DF3C4 6.76%, #2ECC71 50.56%, #25AD92 93.53%);
  2212. }
  2213. &:after{
  2214. content: '';
  2215. display: block;
  2216. width:18px;
  2217. height:18px;
  2218. background: url(../img/ic_arrow_02.svg) no-repeat center;
  2219. }
  2220. .title{
  2221. color: #FFF;
  2222. font-size: 18px;
  2223. width: calc(100% - 110px);
  2224. font-style: normal;
  2225. font-weight: 600;
  2226. line-height: 100%; /* 18px */
  2227. letter-spacing: -0.36px;
  2228. }
  2229. .thumbs{
  2230. display: inline-flex;
  2231. min-width:34px;
  2232. width: 34px;
  2233. height: 34px;
  2234. background: url(../img/thumbs_ic.png) no-repeat center;
  2235. }
  2236. }
  2237. }
  2238. .section--title--center{
  2239. color: #333;
  2240. text-align: center;
  2241. font-size: 35px;
  2242. font-style: normal;
  2243. font-weight: 300;
  2244. line-height: 100%; /* 35px */
  2245. letter-spacing: -0.7px;
  2246. strong{
  2247. color: #191919;
  2248. font-size: 35px;
  2249. font-style: normal;
  2250. font-weight: 800;
  2251. line-height: 100%;
  2252. letter-spacing: -0.7px;
  2253. }
  2254. }
  2255. }
  2256. .impt--list--wrap{
  2257. width:100%;
  2258. padding-top:50px;
  2259. ul{
  2260. display: flex;
  2261. align-items: stretch;
  2262. justify-content: center;
  2263. gap:50px;
  2264. li{
  2265. display: flex;
  2266. flex-direction: column;
  2267. border-radius: 30px;
  2268. background: #FFF;
  2269. padding:55px 50px;
  2270. width: 50%;
  2271. h3{
  2272. color: #000;
  2273. font-size: 20px;
  2274. font-style: normal;
  2275. font-weight: 600;
  2276. line-height: 100%;
  2277. strong{
  2278. color: #225DFF;
  2279. }
  2280. }
  2281. .captions{
  2282. padding-top:30px;
  2283. color: #000;
  2284. font-size: 16px;
  2285. font-style: normal;
  2286. margin-bottom: 60px;
  2287. font-weight: 300;
  2288. line-height: 2.1; /* 16px */
  2289. }
  2290. .thumb{
  2291. width: 100%;
  2292. max-width: 204px;
  2293. height:130px;
  2294. margin-top: auto;
  2295. &.thumb--01{
  2296. background: url(../img/dear_bg_ic01.png) no-repeat center center / contain;
  2297. }
  2298. &.thumb--02{
  2299. background: url(../img/dear_bg_ic02.png) no-repeat center center / contain;
  2300. }
  2301. }
  2302. }
  2303. }
  2304. }
  2305. .all--progress--wrap{
  2306. .title--wrap{
  2307. h2{
  2308. color: #333;
  2309. letter-spacing: -1px;
  2310. strong{
  2311. font-weight: 800;
  2312. color: #1AAF59;
  2313. }
  2314. }
  2315. }
  2316. .month--text--contents{
  2317. >p{
  2318. color: #191919;
  2319. font-size: 17px;
  2320. font-style: normal;
  2321. font-weight: 300;
  2322. letter-spacing: -0.34px;
  2323. display: flex;
  2324. }
  2325. .month--gap{
  2326. margin-bottom: 30px;
  2327. > span{
  2328. &:nth-of-type(1){
  2329. border-radius: 1000px;
  2330. border: 1px dashed #2ECC71;
  2331. color: #1AAF59;
  2332. font-size: 16px;
  2333. font-style: normal;
  2334. font-weight: 600;
  2335. line-height: 100%; /* 16px */
  2336. letter-spacing: -0.32px;
  2337. display: inline-flex;
  2338. align-items: center;
  2339. justify-content: center;
  2340. padding:20px;
  2341. margin-right:25px;
  2342. }
  2343. &:nth-of-type(2){
  2344. color: #111;
  2345. font-size: 20px;
  2346. font-style: normal;
  2347. font-weight: 500;
  2348. line-height: 100%; /* 20px */
  2349. letter-spacing: -0.4px;
  2350. strong{
  2351. font-weight: 800;
  2352. }
  2353. }
  2354. }
  2355. }
  2356. }
  2357. .compatibility--inner--conls{
  2358. width:100%;
  2359. display: flex;
  2360. align-items: flex-start;
  2361. justify-content: flex-start;
  2362. height: 280px;
  2363. flex-direction: column;
  2364. border-radius: 30px;
  2365. background: #2ECC71 url(../img/line_more_bg.png) no-repeat 100% bottom;
  2366. padding: 30px 50px 30px 50px;
  2367. position: relative;
  2368. >h2{
  2369. color: #FFF;
  2370. font-size: 25px;
  2371. font-style: normal;
  2372. font-weight: 700;
  2373. line-height: 100%; /* 25px */
  2374. letter-spacing: -0.5px;
  2375. margin-bottom:17px;
  2376. margin-left: -50px;
  2377. display: flex;
  2378. align-items: center;
  2379. padding-left: 50px;
  2380. position: relative;
  2381. background: url(../img/dot_more_bg.png) no-repeat center;
  2382. width:301px;
  2383. height:64px;
  2384. }
  2385. .captions{
  2386. color: #FFF;
  2387. font-size: 16px;
  2388. font-style: normal;
  2389. font-weight: 500;
  2390. line-height: 1.9;
  2391. letter-spacing: -0.32px;
  2392. }
  2393. .desc{
  2394. color: #EF0;
  2395. font-size: 16px;
  2396. font-style: normal;
  2397. font-weight: 600;
  2398. line-height: 1.9;
  2399. letter-spacing: -0.32px;
  2400. margin-top: 25px;
  2401. }
  2402. .btn--wrapper{
  2403. position: absolute;
  2404. top: 50px;
  2405. right:55px;
  2406. display: flex;
  2407. gap:15px;
  2408. button{
  2409. border-radius: 1000px;
  2410. background: #FFF;
  2411. color: #1AAF59;
  2412. font-size: 15px;
  2413. font-style: normal;
  2414. font-weight: 600;
  2415. display: flex;
  2416. align-items: center;
  2417. justify-content: center;
  2418. letter-spacing: -0.3px;
  2419. line-height: 100%;
  2420. padding:20px;
  2421. border:0px;
  2422. }
  2423. }
  2424. }
  2425. .step--section{
  2426. &:last-child{
  2427. padding-bottom:0px;
  2428. }
  2429. .inner--s--title{
  2430. span{
  2431. &:nth-of-type(1){
  2432. color:#1AAF59;
  2433. font-size: 25px;
  2434. font-style: normal;
  2435. font-weight: 700;
  2436. letter-spacing: -0.5px;
  2437. margin-right:30px;
  2438. em{
  2439. font-style: normal;
  2440. }
  2441. }
  2442. &:nth-of-type(2){
  2443. color: #444;
  2444. font-size: 17px;
  2445. font-style: normal;
  2446. font-weight: 300;
  2447. letter-spacing: -0.34px;
  2448. }
  2449. }
  2450. }
  2451. .inner--grid{
  2452. display: flex;
  2453. align-items:flex-start;
  2454. justify-content: space-between;
  2455. margin-top:40px;
  2456. position: relative;
  2457. &:after{
  2458. content:'';
  2459. display: block;
  2460. width:calc(100% - 180px);
  2461. left: 90px;
  2462. height:1px;
  2463. background: rgba(46, 204, 113, 0.50);
  2464. position: absolute;
  2465. top:55px;
  2466. z-index: -1;
  2467. }
  2468. .grid{
  2469. display: flex;
  2470. justify-content: center;
  2471. align-items: center;
  2472. flex-direction: column;
  2473. &.mo{
  2474. display: none;
  2475. }
  2476. .thumb{
  2477. width:110px;
  2478. height:110px;
  2479. border-radius: 110px;
  2480. border: 2px solid rgba(46, 204, 113, 0.50);
  2481. background: #FFF;
  2482. display: flex;
  2483. align-items: center;
  2484. justify-content: center;
  2485. box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.20);
  2486. }
  2487. .desc{
  2488. padding-top:20px;
  2489. color: #000;
  2490. text-align: center;
  2491. font-size: 15px;
  2492. font-style: normal;
  2493. font-weight: 300;
  2494. line-height: 1.5; /* 15px */
  2495. letter-spacing: -0.6px;
  2496. strong{
  2497. font-weight: 700;
  2498. letter-spacing: -0.3px;
  2499. }
  2500. }
  2501. }
  2502. }
  2503. }
  2504. .progress--section{
  2505. $color_1: #222222;
  2506. $color_2: #191919;
  2507. $font-family_1: Pretendard, var(--default-font-family);
  2508. .progress--title{
  2509. .step--label {
  2510. display: block;
  2511. position: relative;
  2512. color: #222;
  2513. font-size: 25px;
  2514. font-weight: 700;
  2515. letter-spacing: -0.5px;
  2516. }
  2517. }
  2518. .progress--container {
  2519. overflow: hidden;
  2520. box-sizing: border-box;
  2521. position: relative;
  2522. width: 1200px;
  2523. height: 316px;
  2524. margin: 0 auto;
  2525. &.mo{
  2526. display: none;
  2527. overflow: visible;
  2528. flex-direction: column;
  2529. width: 100%;
  2530. gap: 40px;
  2531. height: auto;
  2532. .progress--box{
  2533. padding: 15px 30px 15px 20px;
  2534. align-items: center;
  2535. border-radius: 100px;
  2536. border: 1px solid rgba(46, 204, 113, 0.60);
  2537. background: #FFF;
  2538. box-shadow: 0 0 15px 0 rgba(46, 204, 113, 0.30);
  2539. display: flex;
  2540. gap: 30px;
  2541. position: relative;
  2542. .ico{
  2543. width: 60px;
  2544. height: 60px;
  2545. border-radius: 50%;
  2546. background-color: #2ecc71;
  2547. background-position: center;
  2548. background-repeat: no-repeat;
  2549. &.ico1{
  2550. background-image: url(../img/blk_03.svg);
  2551. }
  2552. &.ico2{
  2553. background-image: url(../img/blk_02.svg);
  2554. }
  2555. &.ico3{
  2556. background-image: url(../img/blk_04.svg);
  2557. }
  2558. &.ico4{
  2559. background-image: url(../img/blk_01.svg);
  2560. }
  2561. }
  2562. .progress--txt{
  2563. display: flex;
  2564. gap: 10px;
  2565. flex-direction: column;
  2566. span{
  2567. color: #191919;
  2568. font-size: 17px;
  2569. font-weight: 400;
  2570. line-height: 1;
  2571. letter-spacing: -0.34px;
  2572. }
  2573. strong{
  2574. color: #191919;
  2575. line-height: 1;
  2576. font-size: 18px;
  2577. font-weight: 700;
  2578. letter-spacing: -0.34px;
  2579. }
  2580. }
  2581. &:nth-child(1){
  2582. &::after{
  2583. display: inline-block;
  2584. width: 12px;
  2585. height: 12px;
  2586. border-radius: 50%;
  2587. content: '';
  2588. bottom: -18px;
  2589. left: -5px;
  2590. background-color: #ffd034;
  2591. position: absolute;
  2592. }
  2593. }
  2594. &:nth-child(2){
  2595. &::before{
  2596. display: inline-block;
  2597. width: 12px;
  2598. height: 12px;
  2599. border-radius: 50%;
  2600. content: '';
  2601. top: -14px;
  2602. right: -6px;
  2603. background-color: #ac7fe2;
  2604. position: absolute;
  2605. }
  2606. &::before{
  2607. display: inline-block;
  2608. width: 12px;
  2609. height: 12px;
  2610. border-radius: 50%;
  2611. content: '';
  2612. top: -14px;
  2613. right: -6px;
  2614. background-color: #ac7fe2;
  2615. position: absolute;
  2616. }
  2617. &::after{
  2618. display: inline-block;
  2619. width: 95px;
  2620. height: 95px;
  2621. background-size: 100%;
  2622. background-repeat: no-repeat;
  2623. content: '';
  2624. top: 23px;
  2625. right: -40px;
  2626. background-image: url(../img/blue_ic01.svg);
  2627. position: absolute;
  2628. z-index: -1;
  2629. }
  2630. }
  2631. &:nth-child(3){
  2632. &::before{
  2633. display: inline-block;
  2634. width: 61px;
  2635. height: 61px;
  2636. content: '';
  2637. left: -30px;
  2638. background-size: 100%;
  2639. background-repeat: no-repeat;
  2640. z-index: -1;
  2641. top: 60%;
  2642. background-image: url(../img/purple_ic01.svg);
  2643. position: absolute;
  2644. }
  2645. &::after{
  2646. display: inline-block;
  2647. width: 12px;
  2648. height: 12px;
  2649. border-radius: 50%;
  2650. content: '';
  2651. left: -22px;
  2652. bottom: -50px;
  2653. background-color: #59d8c8;
  2654. position: absolute;
  2655. }
  2656. }
  2657. &:nth-child(4){
  2658. &::before{
  2659. display: inline-block;
  2660. width: 79px;
  2661. height: 79px;
  2662. content: '';
  2663. right: -30px;
  2664. background-size: 100%;
  2665. background-repeat: no-repeat;
  2666. z-index: -1;
  2667. top: 60%;
  2668. background-image: url(../img/clovar_ic.svg);
  2669. position: absolute;
  2670. }
  2671. &::after{
  2672. display: inline-block;
  2673. width: 12px;
  2674. height: 12px;
  2675. border-radius: 50%;
  2676. content: '';
  2677. top: 4px;
  2678. right: -18px;
  2679. background-color: #f96ba5;
  2680. position: absolute;
  2681. }
  2682. }
  2683. &:last-child{
  2684. margin-top: 62px;
  2685. &::after{
  2686. content: '';
  2687. left: calc(50% - 80px);
  2688. bottom: 100%;
  2689. width: 160px;
  2690. height: 82px;
  2691. position: absolute;
  2692. background-size: 100%;
  2693. background-image: url(../img/man_arrow_bg.svg);
  2694. display: inline-block;
  2695. }
  2696. }
  2697. }
  2698. }
  2699. * {
  2700. box-sizing: border-box;
  2701. }
  2702. }
  2703. // Step 01 - 사전 진행
  2704. .progress--step.step--01 {
  2705. position: absolute;
  2706. width: 110px;
  2707. height: 266px;
  2708. top: 10px;
  2709. left: 0;
  2710. font-size: 0px;
  2711. z-index: 27;
  2712. .step--circle {
  2713. position: relative;
  2714. width: 110px;
  2715. height: 110px;
  2716. background: rgba(46, 204, 113, 0.1);
  2717. z-index: 3;
  2718. overflow: visible auto;
  2719. border-radius: 1000px;
  2720. .step--circle--inner {
  2721. position: relative;
  2722. width: 72px;
  2723. height: 72px;
  2724. margin: 19px 0 0 19px;
  2725. background: rgba(46, 204, 113, 0.2);
  2726. z-index: 4;
  2727. overflow: visible auto;
  2728. border-radius: 1000px;
  2729. .step--circle--core {
  2730. position: relative;
  2731. width: 36px;
  2732. height: 36px;
  2733. margin: 18px 0 0 18px;
  2734. background: #2ecc71;
  2735. z-index: 5;
  2736. border-radius: 1000px;
  2737. }
  2738. }
  2739. }
  2740. .step--desc {
  2741. position: relative;
  2742. width: 70px;
  2743. height: 40px;
  2744. margin: 20px 0 0 20px;
  2745. font-family: $font-family_1;
  2746. font-size: 15px;
  2747. font-weight: 400;
  2748. text-align: center;
  2749. text-overflow: initial;
  2750. white-space: nowrap;
  2751. letter-spacing: -0.3px;
  2752. z-index: 6;
  2753. .desc--main {
  2754. position: relative;
  2755. color: $color_2;
  2756. font-family: $font-family_1;
  2757. font-size: 15px;
  2758. font-weight: 400;
  2759. text-align: center;
  2760. letter-spacing: -0.3px;
  2761. }
  2762. .desc--sub {
  2763. position: relative;
  2764. color: $color_2;
  2765. font-family: $font-family_1;
  2766. font-size: 15px;
  2767. font-weight: 700;
  2768. text-align: center;
  2769. letter-spacing: -0.3px;
  2770. }
  2771. }
  2772. }
  2773. // Step 06 - M&A진행결정시
  2774. .progress--step.step--06 {
  2775. position: absolute;
  2776. width: 222px;
  2777. height: 162px;
  2778. top: 0px;
  2779. right: 0;
  2780. z-index: 28;
  2781. .step--arrow {
  2782. position: relative;
  2783. width: 160px;
  2784. height: 82px;
  2785. margin: 0 0 0 32px;
  2786. background: url(../img/man_arrow_bg.svg) no-repeat center;
  2787. background-size: cover;
  2788. z-index: 28;
  2789. }
  2790. .step--box {
  2791. display: flex;
  2792. align-items: center;
  2793. flex-wrap: nowrap;
  2794. gap: 20px;
  2795. position: relative;
  2796. width: 222px;
  2797. margin: 0 0 0 0;
  2798. padding: 15px 30px 15px 20px;
  2799. background: #ffffff;
  2800. border: 1px solid rgba(46, 204, 113, 0.5);
  2801. z-index: 21;
  2802. border-radius: 100px;
  2803. box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3);
  2804. .step--icon {
  2805. flex-shrink: 0;
  2806. position: relative;
  2807. width: 50px;
  2808. height: 50px;
  2809. background: #2ecc71;
  2810. z-index: 22;
  2811. border-radius: 1000px;
  2812. .icon--img {
  2813. position: relative;
  2814. width: 24px;
  2815. height: 19px;
  2816. margin: 16px 0 0 13px;
  2817. background: url(../img/blk_01.svg) no-repeat center;
  2818. background-size: cover;
  2819. z-index: 23;
  2820. overflow: hidden;
  2821. }
  2822. }
  2823. .step--desc {
  2824. flex-shrink: 0;
  2825. position: relative;
  2826. width: 102px;
  2827. font-family: $font-family_1;
  2828. font-size: 15px;
  2829. font-weight: 400;
  2830. text-align: left;
  2831. text-overflow: initial;
  2832. white-space: nowrap;
  2833. letter-spacing: -0.3px;
  2834. z-index: 24;
  2835. .desc--main {
  2836. position: relative;
  2837. color: $color_2;
  2838. font-family: $font-family_1;
  2839. font-size: 15px;
  2840. font-weight: 400;
  2841. text-align: left;
  2842. letter-spacing: -0.3px;
  2843. }
  2844. .desc--sub {
  2845. position: relative;
  2846. color: $color_2;
  2847. font-family: $font-family_1;
  2848. font-size: 15px;
  2849. font-weight: 700;
  2850. text-align: left;
  2851. letter-spacing: -0.3px;
  2852. }
  2853. }
  2854. }
  2855. }
  2856. // 나머지 Progress Steps와 Line 연결 요소들
  2857. // Step 03 - M&A 상담
  2858. .progress--step.step--03 {
  2859. position: absolute;
  2860. width: 313px;
  2861. height: 308px;
  2862. top: 8px;
  2863. left: 365px;
  2864. z-index: 29;
  2865. .step--badge {
  2866. &.badge--blue {
  2867. position: relative;
  2868. width: 79px;
  2869. height: 79px;
  2870. margin: 229px 0 0 0;
  2871. background: url(../img/blue_ic01.svg) no-repeat center;
  2872. background-size: cover;
  2873. overflow: hidden;
  2874. }
  2875. &.badge--purple {
  2876. position: absolute;
  2877. width: 57px;
  2878. height: 57px;
  2879. top: 0;
  2880. left: 41px;
  2881. background: url(../img/purple_ic01.svg) no-repeat center;
  2882. background-size: cover;
  2883. z-index: 1;
  2884. overflow: hidden;
  2885. }
  2886. }
  2887. .step--box {
  2888. display: flex;
  2889. align-items: center;
  2890. flex-wrap: nowrap;
  2891. gap: 20px;
  2892. position: absolute;
  2893. width: 239px;
  2894. height: 80px;
  2895. top: 26px;
  2896. left: 74px;
  2897. padding: 15px 30px 15px 20px;
  2898. background: #ffffff;
  2899. border: 1px solid rgba(46, 204, 113, 0.5);
  2900. z-index: 11;
  2901. border-radius: 100px;
  2902. box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3);
  2903. .step--icon {
  2904. flex-shrink: 0;
  2905. position: relative;
  2906. width: 50px;
  2907. height: 50px;
  2908. background: #2ecc71;
  2909. z-index: 12;
  2910. border-radius: 1000px;
  2911. .icon--img {
  2912. position: relative;
  2913. width: 21px;
  2914. height: 22px;
  2915. margin: 14px 0 0 15px;
  2916. background: url(../img/blk_02.svg) no-repeat center;
  2917. background-size: cover;
  2918. z-index: 13;
  2919. overflow: hidden;
  2920. }
  2921. }
  2922. .step--desc {
  2923. flex-shrink: 0;
  2924. position: relative;
  2925. width: 119px;
  2926. font-family: $font-family_1;
  2927. font-size: 15px;
  2928. font-weight: 400;
  2929. text-align: left;
  2930. text-overflow: initial;
  2931. white-space: nowrap;
  2932. letter-spacing: -0.3px;
  2933. z-index: 14;
  2934. .desc--sub {
  2935. position: relative;
  2936. color: $color_2;
  2937. font-family: $font-family_1;
  2938. font-size: 15px;
  2939. font-weight: 700;
  2940. text-align: left;
  2941. letter-spacing: -0.3px;
  2942. }
  2943. .desc--main {
  2944. position: relative;
  2945. color: $color_2;
  2946. font-family: $font-family_1;
  2947. font-size: 15px;
  2948. font-weight: 400;
  2949. text-align: left;
  2950. letter-spacing: -0.3px;
  2951. }
  2952. }
  2953. }
  2954. .step--dot.dot--purple {
  2955. position: absolute;
  2956. width: 10px;
  2957. height: 10px;
  2958. top: 153px;
  2959. left: 19px;
  2960. background: url(../img/purple_dot01.svg) no-repeat center;
  2961. background-size: cover;
  2962. z-index: 29;
  2963. border-radius: 50%;
  2964. }
  2965. }
  2966. // Step 02 - M&A궁합 담당자 전화
  2967. .progress--step.step--02 {
  2968. position: absolute;
  2969. width: 228px;
  2970. height: 218px;
  2971. top: 51px;
  2972. left: 180px;
  2973. z-index: 30;
  2974. .step--dot.dot--green {
  2975. position: relative;
  2976. width: 10px;
  2977. height: 10px;
  2978. margin: 0 0 0 164px;
  2979. background: url(../img/green_dot01.svg) no-repeat center;
  2980. background-size: cover;
  2981. z-index: 30;
  2982. border-radius: 50%;
  2983. }
  2984. .step--box {
  2985. display: flex;
  2986. align-items: center;
  2987. flex-wrap: nowrap;
  2988. gap: 20px;
  2989. position: relative;
  2990. width: 228px;
  2991. margin: 128px 0 0 0;
  2992. padding: 15px 30px 15px 20px;
  2993. background: #ffffff;
  2994. border: 1px solid rgba(46, 204, 113, 0.5);
  2995. z-index: 7;
  2996. border-radius: 100px;
  2997. box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3);
  2998. .step--icon {
  2999. flex-shrink: 0;
  3000. position: relative;
  3001. width: 50px;
  3002. height: 50px;
  3003. background: #2ecc71;
  3004. z-index: 8;
  3005. border-radius: 1000px;
  3006. .icon--img {
  3007. position: relative;
  3008. width: 18px;
  3009. height: 18px;
  3010. margin: 16px 0 0 16px;
  3011. background: url(../img/blk_03.svg) no-repeat center;
  3012. background-size: cover;
  3013. z-index: 9;
  3014. overflow: hidden;
  3015. }
  3016. }
  3017. .step--desc {
  3018. flex-shrink: 0;
  3019. position: relative;
  3020. width: 108px;
  3021. font-family: $font-family_1;
  3022. font-size: 15px;
  3023. font-weight: 400;
  3024. text-align: left;
  3025. text-overflow: initial;
  3026. white-space: nowrap;
  3027. letter-spacing: -0.3px;
  3028. z-index: 10;
  3029. .desc--main {
  3030. position: relative;
  3031. color: $color_2;
  3032. font-family: $font-family_1;
  3033. font-size: 15px;
  3034. font-weight: 400;
  3035. text-align: left;
  3036. letter-spacing: -0.3px;
  3037. }
  3038. .desc--sub {
  3039. position: relative;
  3040. color: $color_2;
  3041. font-family: $font-family_1;
  3042. font-size: 15px;
  3043. font-weight: 700;
  3044. text-align: left;
  3045. letter-spacing: -0.3px;
  3046. }
  3047. }
  3048. }
  3049. }
  3050. // Step 05 - 진행 여부 결정
  3051. .progress--step.step--05 {
  3052. position: absolute;
  3053. width: 252.5px;
  3054. height: 154px;
  3055. top: 105px;
  3056. left: 726px;
  3057. z-index: 32;
  3058. .step--dot.dot--pink {
  3059. position: relative;
  3060. width: 10px;
  3061. height: 10px;
  3062. margin: 0 0 0 173px;
  3063. background: url(../img/pink_dot01.svg) no-repeat center;
  3064. background-size: cover;
  3065. z-index: 32;
  3066. border-radius: 50%;
  3067. }
  3068. .step--line.line--04 {
  3069. position: absolute;
  3070. width: 49.5px;
  3071. height: 61.5px;
  3072. top: 16.5px;
  3073. left: 203px;
  3074. background: url(../img/line_05.svg) no-repeat center;
  3075. background-size: cover;
  3076. z-index: 16;
  3077. }
  3078. .step--box {
  3079. display: flex;
  3080. align-items: center;
  3081. flex-wrap: nowrap;
  3082. gap: 20px;
  3083. position: absolute;
  3084. width: 203px;
  3085. height: 80px;
  3086. top: 37px;
  3087. left: 0;
  3088. padding: 15px 30px 15px 20px;
  3089. background: #ffffff;
  3090. border: 1px solid rgba(46, 204, 113, 0.5);
  3091. z-index: 17;
  3092. border-radius: 100px;
  3093. box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3);
  3094. .step--icon {
  3095. flex-shrink: 0;
  3096. position: relative;
  3097. width: 50px;
  3098. height: 50px;
  3099. background: #2ecc71;
  3100. z-index: 18;
  3101. border-radius: 1000px;
  3102. .icon--img {
  3103. position: relative;
  3104. width: 20px;
  3105. height: 22px;
  3106. margin: 14px 0 0 15px;
  3107. background: url(../img/blk_04.svg) no-repeat center;
  3108. background-size: cover;
  3109. z-index: 19;
  3110. overflow: hidden;
  3111. }
  3112. }
  3113. .step--desc {
  3114. flex-shrink: 0;
  3115. position: relative;
  3116. width: 83px;
  3117. font-family: $font-family_1;
  3118. font-size: 15px;
  3119. font-weight: 400;
  3120. text-align: left;
  3121. text-overflow: initial;
  3122. white-space: nowrap;
  3123. letter-spacing: -0.3px;
  3124. z-index: 20;
  3125. .desc--sub {
  3126. position: relative;
  3127. color: $color_2;
  3128. font-family: $font-family_1;
  3129. font-size: 15px;
  3130. font-weight: 700;
  3131. text-align: left;
  3132. letter-spacing: -0.3px;
  3133. }
  3134. .desc--main {
  3135. position: relative;
  3136. color: $color_2;
  3137. font-family: $font-family_1;
  3138. font-size: 15px;
  3139. font-weight: 400;
  3140. text-align: left;
  3141. letter-spacing: -0.3px;
  3142. }
  3143. }
  3144. }
  3145. .step--badge.badge--clover {
  3146. position: absolute;
  3147. width: 63px;
  3148. height: 63px;
  3149. top: 91px;
  3150. left: 165px;
  3151. background: url(../img/clovar_ic.svg) no-repeat center;
  3152. background-size: cover;
  3153. z-index: 2;
  3154. overflow: hidden;
  3155. }
  3156. }
  3157. // Step Line - 연결선
  3158. .progress--step.step--line {
  3159. position: absolute;
  3160. width: 70px;
  3161. height: 199px;
  3162. top: 31px;
  3163. left: 110px;
  3164. z-index: 31;
  3165. .step--dot.dot--yellow {
  3166. position: relative;
  3167. width: 10px;
  3168. height: 10px;
  3169. margin: 0 0 0 14px;
  3170. background: url(../img/yellow_dot01.svg) no-repeat center;
  3171. background-size: cover;
  3172. z-index: 31;
  3173. border-radius: 50%;
  3174. }
  3175. .step--line.line--02 {
  3176. position: relative;
  3177. width: 70px;
  3178. height: 164px;
  3179. margin: 25.5px 0 0 0;
  3180. background: url(../img/line_03.svg) no-repeat center;
  3181. background-size: cover;
  3182. z-index: 25;
  3183. }
  3184. }
  3185. // 전역 라인 요소들
  3186. .step--line.line--01 {
  3187. position: absolute;
  3188. width: 90.5px;
  3189. height: 155px;
  3190. top: 67.5px;
  3191. left: 44px;
  3192. background: url(../img/line_02.svg) no-repeat center;
  3193. background-size: cover;
  3194. z-index: 26;
  3195. }
  3196. .step--line.line--03 {
  3197. position: absolute;
  3198. width: 47px;
  3199. height: 108px;
  3200. top: 74.5px;
  3201. left: 679px;
  3202. background: url(../img/line_04.svg) no-repeat center;
  3203. background-size: cover;
  3204. z-index: 15;
  3205. }
  3206. }
  3207. }
  3208. }
  3209. }
  3210. footer{
  3211. display: flex;
  3212. align-items: center;
  3213. justify-content: center;
  3214. width:100%;
  3215. background: #191919;
  3216. section{
  3217. width:100%;
  3218. padding-top:40px;
  3219. padding-bottom:55px;
  3220. max-width:1200px;
  3221. display: flex;
  3222. gap: 20px;
  3223. align-items: flex-end;
  3224. justify-content: space-between;
  3225. .footer--left{
  3226. >a{
  3227. display: block;
  3228. width: 35%;
  3229. min-width: 100px;
  3230. max-width: 163px;
  3231. img{
  3232. width: 100%;
  3233. }
  3234. }
  3235. .copy--text{
  3236. display: flex;
  3237. flex-direction: column;
  3238. gap:20px;
  3239. margin-top:30px;
  3240. p{
  3241. color: #FFF;
  3242. font-size: 16px;
  3243. font-style: normal;
  3244. font-weight: 500;
  3245. line-height: 1.4;
  3246. letter-spacing: -0.32px;
  3247. display: flex;
  3248. flex-wrap: wrap;
  3249. span{
  3250. color: #FFF;
  3251. font-size: 16px;
  3252. font-style: normal;
  3253. font-weight: 500;
  3254. line-height: 1.4;
  3255. letter-spacing: -0.32px;
  3256. margin-right:31px;
  3257. position: relative;
  3258. &::after{
  3259. content:'';
  3260. display: block;
  3261. width:1px;
  3262. height:100%;
  3263. background: #535353;
  3264. position: absolute;
  3265. top:50%;
  3266. width:1px;
  3267. height:15px;
  3268. right:-16px;
  3269. transform: translateY(-50%);
  3270. }
  3271. &:last-child{
  3272. margin-right:0px;
  3273. &::after{
  3274. display: none;
  3275. }
  3276. }
  3277. }
  3278. }
  3279. }
  3280. }
  3281. .footer--right{
  3282. min-width: 320px;
  3283. display: flex;
  3284. gap:50px;
  3285. a{
  3286. color: #FFF;
  3287. font-size: 16px;
  3288. font-style: normal;
  3289. font-weight: 500;
  3290. line-height: 1.4;
  3291. letter-spacing: -0.32px;
  3292. text-transform: uppercase;
  3293. }
  3294. }
  3295. }
  3296. }
  3297. .top--btn{
  3298. background-color: #2ECC71;
  3299. border-radius: 50%;
  3300. position: fixed;
  3301. right: 30px;
  3302. width: 70px;
  3303. cursor: pointer;
  3304. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  3305. height: 70px;
  3306. bottom: 30px;
  3307. z-index: 100;
  3308. background-repeat: no-repeat;
  3309. background-position: center;
  3310. background-image: url(../img/ico--top.svg);
  3311. opacity: 0;
  3312. transition: opacity 0.3s ease;
  3313. &.actv{
  3314. opacity: 1;
  3315. }
  3316. }
  3317. /*! 20250904 수정 */
  3318. main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar{
  3319. position: relative;
  3320. &::after{
  3321. position: absolute;
  3322. right: 0;
  3323. content: '';
  3324. display: inline-block;
  3325. background-image: url(../img/ico--bar.svg);
  3326. width: 12px;
  3327. height: 12px;
  3328. background-repeat: no-repeat;
  3329. transform: rotate(45deg);
  3330. top: -4.5px;
  3331. }
  3332. &.mo2{
  3333. display: none;
  3334. }
  3335. }
  3336. main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle{
  3337. &:nth-of-type(2){
  3338. &::before{
  3339. content: '';
  3340. width: 12px;
  3341. height: 12px;
  3342. background-image: url(../img/ico--bar.svg);
  3343. display: inline-block;
  3344. transform: rotate(135deg);
  3345. position: absolute;
  3346. top: calc(100% + 32px);
  3347. left: calc(50% - 4.5px);
  3348. }
  3349. }
  3350. &.mo{
  3351. display: none;
  3352. &:nth-of-type(5){
  3353. background-color: #188345;
  3354. }
  3355. }
  3356. }
  3357. main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap{
  3358. display: none;
  3359. }