style.css 78 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659
  1. <<<<<<< HEAD
  2. @keyframes animate-top {
  3. 0% {
  4. background: #8b2ef4; /* Old browsers */
  5. }
  6. 100% {
  7. color: #474747;
  8. transform: translateX(0px) translateY(50%) translateZ(5px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  9. }
  10. }
  11. @keyframes animate-bottom {
  12. 0% {
  13. color: #474747;
  14. opacity: 1;
  15. }
  16. 100% {
  17. transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  18. opacity: 1;
  19. }
  20. }
  21. .number {
  22. position: relative;
  23. }
  24. .number span {
  25. position: absolute;
  26. display: block;
  27. font-weight: bold;
  28. text-align: center;
  29. box-sizing: border-box;
  30. -moz-box-sizing: border-box;
  31. -webkit-box-sizing: border-box;
  32. color: white;
  33. width: 100%;
  34. height: 100%;
  35. perspective: 7.14em;
  36. }
  37. .number span:before {
  38. display: block;
  39. height: 50%;
  40. overflow: hidden;
  41. border-radius: 20% 20% 0 0;
  42. background: #8b2ef4; /* Old browsers */
  43. }
  44. .number span:after {
  45. display: block;
  46. height: 50%;
  47. overflow: hidden;
  48. line-height: 0;
  49. border-radius: 0 0 20% 20%;
  50. transition: color 100ms, background-color 100ms;
  51. background: #7F1BF2; /* Old browsers */
  52. }
  53. .flip .primary:before {
  54. animation: animate-top 250ms;
  55. -moz-animation-fill-mode: forwards;
  56. -webkit-animation: animate-top 250ms;
  57. -webkit-animation-fill-mode: forwards;
  58. background: #7F1BF2; /* Old browsers */
  59. }
  60. .flip .primary:after {
  61. animation: animate-bottom 250ms;
  62. -moz-animation-fill-mode: forwards;
  63. animation-delay: 250ms;
  64. -webkit-animation: animate-bottom 250ms;
  65. -webkit-animation-fill-mode: forwards;
  66. -webkit-animation-delay: 250ms;
  67. }
  68. .primary:after {
  69. opacity: 0;
  70. transform: translateX(0) translateY(0em) translateZ(0.35em) rotateX(91deg) rotateY(0deg) rotateZ(0deg);
  71. }
  72. .primary {
  73. z-index: 2;
  74. }
  75. .secondary {
  76. z-index: 1;
  77. }
  78. /* Number 0 */
  79. [data-number="0"] span.primary:before {
  80. content: "0";
  81. }
  82. [data-number="0"] span.secondary:after {
  83. content: "0";
  84. }
  85. [data-number="0"] span.secondary:before {
  86. content: attr(title);
  87. }
  88. [data-number="0"] span.primary:after {
  89. content: attr(title);
  90. }
  91. /* Number 9 */
  92. [data-number="9"] span.primary:before {
  93. content: "9";
  94. }
  95. [data-number="9"] span.secondary:after {
  96. content: "9";
  97. }
  98. [data-number="9"] span.secondary:before {
  99. content: attr(title);
  100. }
  101. [data-number="9"] span.primary:after {
  102. content: attr(title);
  103. }
  104. /* Number 8 */
  105. [data-number="8"] span.primary:before {
  106. content: "8";
  107. }
  108. [data-number="8"] span.secondary:after {
  109. content: "8";
  110. }
  111. [data-number="8"] span.secondary:before {
  112. content: attr(title);
  113. }
  114. [data-number="8"] span.primary:after {
  115. content: attr(title);
  116. }
  117. /* Number 7 */
  118. [data-number="7"] span.primary:before {
  119. content: "7";
  120. }
  121. [data-number="7"] span.secondary:after {
  122. content: "7";
  123. }
  124. [data-number="7"] span.secondary:before {
  125. content: attr(title);
  126. }
  127. [data-number="7"] span.primary:after {
  128. content: attr(title);
  129. }
  130. /* Number 6 */
  131. [data-number="6"] span.primary:before {
  132. content: "6";
  133. }
  134. [data-number="6"] span.secondary:after {
  135. content: "6";
  136. }
  137. [data-number="6"] span.secondary:before {
  138. content: attr(title);
  139. }
  140. [data-number="6"] span.primary:after {
  141. content: attr(title);
  142. }
  143. /* Number 5 */
  144. [data-number="5"] span.primary:before {
  145. content: attr(title);
  146. }
  147. [data-number="5"] span.secondary:after {
  148. content: attr(title);
  149. }
  150. [data-number="5"] span.secondary:before {
  151. content: attr(title);
  152. }
  153. [data-number="5"] span.primary:after {
  154. content: attr(title);
  155. }
  156. /* Number 4 */
  157. [data-number="4"] span.primary:before {
  158. content: "4";
  159. }
  160. [data-number="4"] span.secondary:after {
  161. content: "4";
  162. }
  163. [data-number="4"] span.secondary:before {
  164. content: attr(title);
  165. }
  166. [data-number="4"] span.primary:after {
  167. content: attr(title);
  168. }
  169. /* Number 3 */
  170. [data-number="3"] span.primary:before {
  171. content: attr(title);
  172. }
  173. [data-number="3"] span.secondary:after {
  174. content: attr(title);
  175. }
  176. [data-number="3"] span.secondary:before {
  177. content: attr(title);
  178. }
  179. [data-number="3"] span.primary:after {
  180. content: attr(title);
  181. }
  182. /* Number 2 */
  183. [data-number="2"] span.primary:before {
  184. content: "2";
  185. }
  186. [data-number="2"] span.secondary:after {
  187. content: "2";
  188. }
  189. [data-number="2"] span.secondary:before {
  190. content: attr(title);
  191. }
  192. [data-number="2"] span.primary:after {
  193. content: attr(title);
  194. }
  195. /* Number 1 */
  196. [data-number="1"] span.primary:before {
  197. content: "1";
  198. }
  199. [data-number="1"] span.secondary:after {
  200. content: "1";
  201. }
  202. [data-number="1"] span.secondary:before {
  203. content: attr(title);
  204. }
  205. [data-number="1"] span.primary:after {
  206. content: attr(title);
  207. }
  208. img {
  209. width: 100%;
  210. }
  211. .evt--section01 {
  212. background-color: #00b6ff;
  213. background-repeat: no-repeat;
  214. background-size: 100%;
  215. position: relative;
  216. overflow: hidden;
  217. }
  218. .evt--section01 .palm--img1 {
  219. position: absolute;
  220. top: -3%;
  221. left: 0;
  222. max-width: 495px;
  223. width: 50%;
  224. z-index: 10;
  225. }
  226. .evt--section01 .palm--img2 {
  227. z-index: 10;
  228. position: absolute;
  229. right: -60px;
  230. top: -3%;
  231. width: 50%;
  232. max-width: 500px;
  233. }
  234. .evt--section01 .bubble--bg {
  235. z-index: 10;
  236. position: absolute;
  237. background-image: url(../img/img_bg_3.png);
  238. width: 231px;
  239. height: 95px;
  240. bottom: -500px;
  241. left: -231px;
  242. }
  243. .evt--section01 .wave--bg {
  244. position: absolute;
  245. background-size: 100%;
  246. background-position: 0 -120px;
  247. background-image: url(../img/bg_2.png);
  248. width: 100%;
  249. height: 5000px;
  250. }
  251. .evt--section01 .section--container {
  252. max-width: 1440px;
  253. margin: 0 auto;
  254. position: relative;
  255. }
  256. .evt--section01 .section--container .section--title {
  257. margin-top: 150px;
  258. margin-bottom: 150px;
  259. display: flex;
  260. flex-direction: column;
  261. position: relative;
  262. z-index: 11;
  263. align-items: center;
  264. }
  265. .evt--section01 .section--container .section--title .logo {
  266. max-width: 290px;
  267. width: 40%;
  268. margin-bottom: 80px;
  269. }
  270. .evt--section01 .section--container .section--title > h1 {
  271. margin-bottom: 30px;
  272. }
  273. .evt--section01 .section--container .section--title > h2 {
  274. margin-bottom: 100px;
  275. }
  276. .evt--section01 .section--container .section--title > h3 {
  277. max-width: 716px;
  278. width: 80%;
  279. }
  280. .evt--section01 .section--container .section--title .bg1 {
  281. position: absolute;
  282. left: -200px;
  283. top: 0px;
  284. }
  285. .evt--section01 .section--container .section--title .bg2 {
  286. position: absolute;
  287. left: -230px;
  288. bottom: -200px;
  289. }
  290. .evt--section01 .section--container .section--title .bg4 {
  291. position: absolute;
  292. right: -200px;
  293. bottom: -60px;
  294. }
  295. .evt--section01 .section--container .section--title .bg--wave--wrap {
  296. position: absolute;
  297. right: -90px;
  298. top: 50px;
  299. }
  300. .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave {
  301. position: relative;
  302. width: 900px;
  303. height: 550px;
  304. }
  305. .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave1 {
  306. position: absolute;
  307. z-index: -1;
  308. }
  309. .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2 {
  310. position: absolute;
  311. width: 316px;
  312. right: 60px;
  313. top: 103px;
  314. }
  315. .evt--section01 .section--container .video--wrap {
  316. max-width: 1440px;
  317. margin: 0 auto 120px;
  318. overflow: hidden;
  319. max-height: 90vh;
  320. background-color: black;
  321. border: 3px solid #ffffff;
  322. border-radius: 2px;
  323. display: flex;
  324. justify-content: center;
  325. align-items: center;
  326. box-sizing: border-box;
  327. position: relative;
  328. z-index: 5;
  329. }
  330. .evt--section01 .section--container .video--wrap video {
  331. aspect-ratio: 4/3;
  332. z-index: 5;
  333. width: 100%;
  334. position: relative;
  335. vertical-align: top;
  336. }
  337. .evt--section01 .section--container .video--wrap .bg5 {
  338. position: absolute;
  339. top: -100px;
  340. left: -340px;
  341. z-index: 2;
  342. }
  343. .evt--section01 .section--container .video--wrap .video--btn {
  344. display: none;
  345. position: absolute;
  346. top: 50%;
  347. left: 50%;
  348. transform: translate(-50%, -50%);
  349. max-width: 230px;
  350. max-height: 230px;
  351. width: 20vw;
  352. height: 20vw;
  353. z-index: 10;
  354. height: 230px;
  355. cursor: pointer;
  356. background-repeat: no-repeat;
  357. background-position: center;
  358. background-size: 100%;
  359. background-image: url(../img/ico_play.png);
  360. }
  361. .evt--section01 .section--container .video--wrap .video--btn.play {
  362. display: block;
  363. }
  364. .evt--section01 .section--container .swiper--wrap {
  365. position: relative;
  366. margin-bottom: 200px;
  367. box-shadow: 16px 12px 32px rgba(68, 68, 68, 0.15);
  368. }
  369. .evt--section01 .section--container .swiper--wrap .bg1 {
  370. position: absolute;
  371. right: -180px;
  372. top: -30px;
  373. }
  374. .evt--section01 .section--container .swiper--wrap .bg2 {
  375. position: absolute;
  376. left: -160px;
  377. top: 50%;
  378. }
  379. .evt--section01 .section--container .swiper--wrap .bg3 {
  380. position: absolute;
  381. right: -260px;
  382. bottom: 30%;
  383. }
  384. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap {
  385. display: flex;
  386. gap: 5px;
  387. }
  388. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
  389. background-color: #fff;
  390. border: none;
  391. border-top-left-radius: 15px;
  392. border-top-right-radius: 15px;
  393. text-align: center;
  394. width: 100%;
  395. position: relative;
  396. font-weight: 500;
  397. font-family: "GmarketSans";
  398. height: 80px;
  399. display: flex;
  400. align-items: center;
  401. justify-content: center;
  402. font-size: 28px;
  403. padding: 0;
  404. color: #787878;
  405. box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.15) inset;
  406. }
  407. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before, .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(2)::before, .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(3)::before {
  408. content: "NEW";
  409. font-size: 14px;
  410. margin-top: -5px;
  411. margin-right: 5px;
  412. }
  413. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn::after {
  414. content: "";
  415. display: inline-block;
  416. width: 100%;
  417. bottom: 0;
  418. position: absolute;
  419. }
  420. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn.active {
  421. background-color: #0000ff;
  422. font-weight: 700;
  423. color: #ffde00;
  424. }
  425. .evt--section01 .section--container .swiper--wrap .swiper-slide {
  426. display: flex;
  427. justify-content: center;
  428. }
  429. .evt--section01 .section--container .swiper--wrap .slide--img {
  430. position: relative;
  431. }
  432. .evt--section01 .section--container .swiper--wrap .slide--img .new--icon {
  433. display: inline-block;
  434. position: absolute;
  435. width: 10%;
  436. padding-bottom: 11%;
  437. background-repeat: no-repeat;
  438. bottom: 5%;
  439. right: 6%;
  440. background-image: url(../img/ico_new.png);
  441. max-width: 130px;
  442. max-height: 130px;
  443. background-size: 100%;
  444. }
  445. .evt--section01 .section--container .swiper--wrap .slide--desc {
  446. padding: 70px 100px;
  447. height: 380px;
  448. background-color: #fff;
  449. }
  450. .evt--section01 .section--container .swiper--wrap .slide--desc.type2 {
  451. padding: 40px 100px;
  452. }
  453. .evt--section01 .section--container .swiper--wrap .slide--desc.type2 h4 {
  454. margin-bottom: 0px;
  455. }
  456. .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
  457. font-family: "GmarketSans";
  458. font-weight: 700;
  459. font-size: 42px;
  460. margin-bottom: 20px;
  461. }
  462. .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
  463. font-size: 28px;
  464. }
  465. .evt--section01 .section--container .swiper--wrap .slide--desc p {
  466. font-family: "Pretendard Variable";
  467. font-size: 28px;
  468. line-height: 1.4;
  469. font-weight: 500;
  470. margin-bottom: 30px;
  471. }
  472. .evt--section01 .section--container .swiper--wrap .slide--desc p:last-child {
  473. margin-bottom: 0px;
  474. }
  475. .evt--section01 .section--container .swiper--wrap .swiper-pagination {
  476. bottom: -100px;
  477. }
  478. .evt--section01 .section--container .swiper--wrap .swiper-pagination span {
  479. width: 32px;
  480. height: 32px;
  481. margin: 0 12px;
  482. background-color: #008be6;
  483. opacity: 0.6;
  484. }
  485. .evt--section01 .section--container .swiper--wrap .swiper-pagination .swiper-pagination-bullet-active {
  486. background-color: #0047bb;
  487. opacity: 1;
  488. }
  489. .evt--section01 .section--container .swiper--wrap .swiper-button-next, .evt--section01 .section--container .swiper--wrap .swiper-button-prev {
  490. width: 50px;
  491. background-image: url(../img/ico_arrow.png);
  492. height: 90px;
  493. top: 30%;
  494. right: -100px;
  495. }
  496. .evt--section01 .section--container .swiper--wrap .swiper-button-next::after, .evt--section01 .section--container .swiper--wrap .swiper-button-prev::after {
  497. display: none;
  498. }
  499. .evt--section01 .section--container .swiper--wrap .swiper-button-prev {
  500. transform: rotate(180deg);
  501. left: -100px;
  502. }
  503. .evt--section02-1 {
  504. position: relative;
  505. overflow: hidden;
  506. background: linear-gradient(to bottom, #004dee, #007ff6);
  507. }
  508. .evt--section02-1::before {
  509. content: "";
  510. background-image: url(../img/bg_4.png);
  511. background-repeat: no-repeat;
  512. background-position: bottom;
  513. display: inline-block;
  514. top: 0;
  515. z-index: 1;
  516. left: 0;
  517. position: absolute;
  518. width: 100%;
  519. height: 100%;
  520. }
  521. .evt--section02-1 .cloud--img1 {
  522. position: absolute;
  523. left: 0;
  524. z-index: 10;
  525. max-width: 20%;
  526. top: 100px;
  527. }
  528. .evt--section02-1 .cloud--img2 {
  529. position: absolute;
  530. right: 0;
  531. z-index: 10;
  532. max-width: 30%;
  533. top: 50px;
  534. }
  535. .evt--section02-1 .section--container {
  536. max-width: 1920px;
  537. margin: 0 auto;
  538. }
  539. .evt--section02-1 .section--container .evt--1 {
  540. padding: 100px 0 130px;
  541. position: relative;
  542. background-position: bottom;
  543. background-repeat: no-repeat;
  544. z-index: 1;
  545. display: flex;
  546. flex-direction: column;
  547. justify-content: center;
  548. align-items: center;
  549. }
  550. .evt--section02-1 .section--container .evt--1 h2 {
  551. max-width: 682px;
  552. width: 70%;
  553. }
  554. .evt--section02-1 .section--container .evt--1 .bg1 {
  555. position: absolute;
  556. left: 15%;
  557. top: 30%;
  558. }
  559. .evt--section02-1 .section--container .evt--1 .bg2 {
  560. position: absolute;
  561. right: 5%;
  562. top: 30%;
  563. }
  564. .evt--section02-1 .section--container .evt--1 .bg3 {
  565. left: 7%;
  566. bottom: 25%;
  567. position: absolute;
  568. }
  569. .evt--section02-1 .section--container .evt--1 .bg4 {
  570. position: absolute;
  571. bottom: 25%;
  572. right: 5%;
  573. }
  574. .evt--section02-1 .section--container .evt--1 .evt--box {
  575. margin-top: 50px;
  576. font-weight: 600;
  577. text-align: center;
  578. font-size: 45px;
  579. font-family: "Pretendard Variable";
  580. color: #ffffff;
  581. line-height: 1.2;
  582. }
  583. .evt--section02-1 .section--container .evt--circle {
  584. font-family: "Pretendard Variable";
  585. font-weight: 800;
  586. font-size: 30px;
  587. padding: 20px 40px;
  588. background-color: #00175f;
  589. color: #ffffff;
  590. border-radius: 50%;
  591. margin-bottom: 50px;
  592. display: inline-block;
  593. }
  594. .evt--section02-1 .section--container h3 {
  595. color: #ffffff;
  596. font-weight: 700;
  597. margin-bottom: 0;
  598. text-align: center;
  599. font-size: 56px;
  600. font-family: "Pretendard Variable";
  601. }
  602. .evt--section02-2 {
  603. background-color: #007ff6;
  604. position: relative;
  605. overflow: hidden;
  606. }
  607. .evt--section02-2 .bg1 {
  608. position: absolute;
  609. left: 0;
  610. z-index: 2;
  611. bottom: 20%;
  612. max-width: 575px;
  613. width: 40%;
  614. }
  615. .evt--section02-2 .bg2 {
  616. max-width: 690px;
  617. width: 40%;
  618. position: absolute;
  619. right: 0;
  620. z-index: 2;
  621. bottom: 10%;
  622. }
  623. .evt--section02-2::after {
  624. content: "";
  625. display: inline-block;
  626. bottom: 0;
  627. z-index: 1;
  628. left: 0;
  629. position: absolute;
  630. background: linear-gradient(to bottom, #007ff6, #004dee);
  631. width: 100%;
  632. height: 100%;
  633. }
  634. .evt--section02-2 .section--container {
  635. max-width: 1500px;
  636. margin: 0 auto;
  637. }
  638. .evt--section02-2 .section--container .evt--circle {
  639. font-family: "Pretendard Variable";
  640. font-weight: 800;
  641. font-size: 30px;
  642. padding: 20px 40px;
  643. background-color: #00175f;
  644. color: #ffffff;
  645. border-radius: 50%;
  646. margin-bottom: 50px;
  647. display: inline-block;
  648. }
  649. .evt--section02-2 .section--container h3 {
  650. color: #ffffff;
  651. font-weight: 700;
  652. font-size: 56px;
  653. font-family: "Pretendard Variable";
  654. }
  655. .evt--section02-2 .section--container .evt--2 {
  656. padding: 120px 0 130px;
  657. position: relative;
  658. background-repeat: no-repeat;
  659. z-index: 20;
  660. display: flex;
  661. flex-direction: column;
  662. justify-content: center;
  663. align-items: center;
  664. }
  665. .evt--section02-2 .section--container .evt--2 h2 {
  666. max-width: 789px;
  667. width: 90%;
  668. }
  669. .evt--section02-2 .section--container .evt--2 h3 {
  670. text-align: center;
  671. margin-bottom: 30px;
  672. }
  673. .evt--section02-2 .section--container .evt--2 .evt--box {
  674. margin-top: 60px;
  675. margin-bottom: 70px;
  676. border-radius: 25px;
  677. background-color: rgba(0, 152, 249, 0.4);
  678. box-shadow: 0px 2px 9.5px 0.5px rgba(0, 0, 0, 0.23);
  679. font-weight: 600;
  680. padding: 75px 90px;
  681. font-size: 36px;
  682. font-family: "Pretendard Variable";
  683. color: #ffffff;
  684. line-height: 1.2;
  685. display: flex;
  686. flex-direction: column;
  687. gap: 25px;
  688. }
  689. .evt--section02-2 .section--container .evt--2 .evt--box li {
  690. list-style: none;
  691. font-size: 36px;
  692. display: flex;
  693. align-items: center;
  694. width: 100%;
  695. font-weight: 400;
  696. gap: 25px;
  697. }
  698. .evt--section02-2 .section--container .evt--2 .evt--box li .circle {
  699. padding: 10px 40px;
  700. width: 168px;
  701. display: inline-block;
  702. height: 60px;
  703. border-radius: 30px;
  704. background-color: #00A2FB;
  705. text-align: justify;
  706. }
  707. .evt--section02-2 .section--container .evt--2 .evt--box li .circle::after {
  708. content: "";
  709. display: inline-block;
  710. width: 100%;
  711. }
  712. .evt--section02-2 .section--container .evt--2 .evt--box2 {
  713. max-width: 470px;
  714. width: 60%;
  715. }
  716. .evt--section02-2 .section--container .evt--2 .evt--btn {
  717. border-style: solid;
  718. border-width: 3px;
  719. border-color: rgb(255, 255, 255);
  720. border-radius: 50px;
  721. display: flex;
  722. align-items: center;
  723. justify-content: center;
  724. background-color: #00175f;
  725. box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
  726. max-width: 416px;
  727. width: 100%;
  728. height: 95px;
  729. font-family: "Pretendard Variable";
  730. font-size: 40px;
  731. font-weight: 800;
  732. text-decoration: none;
  733. color: #ffffff;
  734. }
  735. .evt--section03 {
  736. overflow: hidden;
  737. background: linear-gradient(to bottom, #5DBBFF 0%, #00A8FF 50%, #5DBBFF 100%);
  738. padding: 150px 0 150px;
  739. position: relative;
  740. }
  741. .evt--section03::before {
  742. content: "";
  743. width: 100%;
  744. height: 100%;
  745. position: absolute;
  746. top: 0;
  747. right: 0;
  748. background-position: top;
  749. z-index: 0;
  750. background-repeat: no-repeat;
  751. display: inline-block;
  752. background-image: url(../img/bg_color_2.png);
  753. }
  754. .evt--section03::after {
  755. content: "";
  756. width: 100%;
  757. height: 100%;
  758. position: absolute;
  759. bottom: 0;
  760. left: 0;
  761. background-position: bottom;
  762. z-index: 0;
  763. background-repeat: no-repeat;
  764. display: inline-block;
  765. background-image: url(../img/bg_color_1.png);
  766. }
  767. .evt--section03 .section--container {
  768. max-width: 1280px;
  769. z-index: 10;
  770. position: relative;
  771. margin: 0 auto;
  772. }
  773. .evt--section03 .section--container .section--title {
  774. text-align: center;
  775. display: flex;
  776. flex-direction: column;
  777. align-items: center;
  778. margin-bottom: 80px;
  779. }
  780. .evt--section03 .section--container .section--title h3 {
  781. max-width: 750px;
  782. width: 60%;
  783. }
  784. .evt--section03 .section--container .section--title h2 {
  785. max-width: 945px;
  786. width: 70%;
  787. }
  788. .evt--section03 .section--container .section--title .circle {
  789. margin-top: 20px;
  790. max-width: 832px;
  791. width: 70%;
  792. }
  793. .evt--section03 .section--container .promotion--wrap {
  794. display: flex;
  795. justify-content: center;
  796. margin-bottom: 120px;
  797. gap: 140px;
  798. }
  799. .evt--section03 .section--container .promotion--wrap .promotion {
  800. width: 400px;
  801. height: 580px;
  802. background-image: url(../img/img_bg_9.png);
  803. background-size: 100%;
  804. background-repeat: no-repeat;
  805. display: flex;
  806. align-items: center;
  807. flex-direction: column;
  808. color: #ffffff;
  809. }
  810. .evt--section03 .section--container .promotion--wrap .promotion h4 {
  811. font-family: "Pretendard Variable";
  812. font-size: 56px;
  813. font-weight: 700;
  814. line-height: 210px;
  815. margin-bottom: 0;
  816. }
  817. .evt--section03 .section--container .promotion--wrap .promotion p {
  818. font-family: "gmarketSans";
  819. font-size: 45px;
  820. margin-bottom: 0;
  821. }
  822. .evt--section03 .section--container .promotion--wrap .promotion h5 {
  823. line-height: 1.1;
  824. font-family: "gmarketSans";
  825. font-size: 86px;
  826. font-weight: 800;
  827. margin-bottom: 0;
  828. }
  829. .evt--section03 .section--container .promotion--wrap .promotion h5 span {
  830. font-size: 44px;
  831. }
  832. .evt--section03 .section--container .promotion--detail--wrap {
  833. display: flex;
  834. flex-direction: column;
  835. gap: 80px;
  836. margin-bottom: 460px;
  837. position: relative;
  838. }
  839. .evt--section03 .section--container .promotion--detail--wrap .detail {
  840. color: #373737;
  841. background-color: #fff;
  842. border: 3px solid black;
  843. padding: 70px;
  844. border-radius: 68px;
  845. z-index: 3;
  846. position: relative;
  847. display: flex;
  848. }
  849. .evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(1)::before {
  850. content: "";
  851. position: absolute;
  852. display: inline-block;
  853. width: 318px;
  854. height: 314px;
  855. top: -91px;
  856. left: -48px;
  857. background-repeat: no-repeat;
  858. background-image: url(../img/bg_wave_3.png);
  859. }
  860. .evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(2)::before {
  861. content: "";
  862. position: absolute;
  863. display: inline-block;
  864. width: 286px;
  865. right: -125px;
  866. top: -36px;
  867. z-index: 10;
  868. height: 380px;
  869. background-repeat: no-repeat;
  870. background-image: url(../img/bg_wave_4.png);
  871. }
  872. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l {
  873. width: 70%;
  874. }
  875. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
  876. font-size: 44px;
  877. font-weight: 700;
  878. display: inline-block;
  879. font-family: "Pretendard Variable";
  880. text-decoration: underline;
  881. margin-bottom: 40px;
  882. }
  883. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
  884. font-family: "Pretendard Variable";
  885. font-size: 54px;
  886. font-weight: 900;
  887. margin-bottom: 40px;
  888. }
  889. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 > span {
  890. color: #6d21ed;
  891. }
  892. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
  893. line-height: 1.2;
  894. font-family: "Pretendard Variable";
  895. font-weight: 500;
  896. font-size: 38px;
  897. }
  898. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r {
  899. width: 30%;
  900. display: flex;
  901. flex-direction: column;
  902. align-items: flex-end;
  903. justify-content: flex-end;
  904. text-align: right;
  905. }
  906. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
  907. box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.4);
  908. background: linear-gradient(135deg, #8324ff, #5a3dfd, #0a5aff);
  909. font-family: "Pretendard Variable";
  910. font-size: 44px;
  911. font-weight: 800;
  912. width: 130px;
  913. height: 140px;
  914. line-height: 1.2;
  915. display: flex;
  916. align-items: center;
  917. right: 100px;
  918. top: 0;
  919. justify-content: center;
  920. color: #ffffff;
  921. position: absolute;
  922. }
  923. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
  924. font-size: 28px;
  925. font-family: "Pretendard Variable";
  926. font-weight: 500;
  927. margin-bottom: 10px;
  928. }
  929. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
  930. font-size: 44px;
  931. font-weight: 700;
  932. font-family: "Pretendard Variable";
  933. position: relative;
  934. }
  935. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
  936. content: "";
  937. display: inline-block;
  938. width: 267px;
  939. height: 62px;
  940. position: absolute;
  941. top: 50%;
  942. left: -30px;
  943. background-image: url(../img/ico_arrow2.png);
  944. }
  945. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
  946. font-family: "Pretendard Variable";
  947. font-size: 66px;
  948. color: #6d21ed;
  949. font-weight: 900;
  950. }
  951. .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
  952. z-index: 2;
  953. position: absolute;
  954. font-size: 38px;
  955. top: calc(100% - 55px);
  956. width: 100%;
  957. border-bottom-left-radius: 50px;
  958. border-bottom-right-radius: 50px;
  959. font-family: "Pretendard Variable";
  960. background-color: #9EC3FE;
  961. padding: 100px 60px 60px;
  962. font-weight: 500;
  963. margin-bottom: 0;
  964. }
  965. .evt--section03 .section--container .promotion--detail--wrap .detail--plus li {
  966. list-style: none;
  967. position: relative;
  968. padding-left: 30px;
  969. }
  970. .evt--section03 .section--container .promotion--detail--wrap .detail--plus li::before {
  971. top: 0px;
  972. left: 0px;
  973. position: absolute;
  974. content: "*";
  975. }
  976. .evt--section03 .section--container .promotion--detail--wrap .detail--plus strong {
  977. font-weight: 800;
  978. text-decoration: underline;
  979. }
  980. .evt--section03 .section--container .count--wrap {
  981. display: flex;
  982. flex-direction: column;
  983. position: relative;
  984. z-index: 10;
  985. align-items: center;
  986. }
  987. .evt--section03 .section--container .count--wrap .count--txt {
  988. display: flex;
  989. align-items: flex-end;
  990. justify-content: center;
  991. gap: 20px;
  992. margin-bottom: 90px;
  993. }
  994. .evt--section03 .section--container .count--wrap .count--txt .img--wrap {
  995. position: relative;
  996. }
  997. .evt--section03 .section--container .count--wrap .count--txt .img--wrap::before {
  998. content: "";
  999. display: inline-block;
  1000. width: 144px;
  1001. height: 80px;
  1002. background-repeat: no-repeat;
  1003. background-size: 100%;
  1004. left: -40%;
  1005. top: 30px;
  1006. position: absolute;
  1007. background-image: url(../img/img_15_bg1.png);
  1008. }
  1009. .evt--section03 .section--container .count--wrap .count--txt .img--wrap::after {
  1010. content: "";
  1011. display: inline-block;
  1012. width: 242px;
  1013. height: 177px;
  1014. background-repeat: no-repeat;
  1015. background-size: 100%;
  1016. right: -70%;
  1017. bottom: 100px;
  1018. position: absolute;
  1019. background-image: url(../img/img_15_bg2.png);
  1020. }
  1021. .evt--section03 .section--container .count--wrap .count--txt > p {
  1022. color: #ffffff;
  1023. font-family: "gmarketSans";
  1024. text-align: center;
  1025. font-size: 46px;
  1026. font-weight: 800;
  1027. margin-bottom: 0;
  1028. text-align: center;
  1029. text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  1030. }
  1031. .evt--section03 .section--container .count--wrap .count--num {
  1032. display: flex;
  1033. font-family: "gmarketSans";
  1034. gap: 10px;
  1035. margin-bottom: 140px;
  1036. position: relative;
  1037. }
  1038. .evt--section03 .section--container .count--wrap .count--num .number {
  1039. position: relative;
  1040. display: inline-block;
  1041. font-size: 120px;
  1042. color: #ffffff;
  1043. width: 140px;
  1044. line-height: 1.75;
  1045. font-weight: 800;
  1046. height: 210px;
  1047. border-radius: 20%;
  1048. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  1049. }
  1050. .evt--section03 .section--container .count--wrap .count--num .number:nth-child(4) {
  1051. margin-left: 80px;
  1052. }
  1053. .evt--section03 .section--container .count--wrap .count--num .number:nth-child(5) {
  1054. margin-right: 80px;
  1055. }
  1056. .evt--section03 .section--container .count--wrap .count--num .number span {
  1057. display: inline-block;
  1058. width: 100%;
  1059. height: 100%;
  1060. }
  1061. .evt--section03 .section--container .count--wrap .count--num::before {
  1062. content: "";
  1063. width: 210px;
  1064. left: -300px;
  1065. top: calc(50% - 500px);
  1066. height: 1000px;
  1067. position: absolute;
  1068. background-repeat: no-repeat;
  1069. background-position: center;
  1070. background-image: url(../img/img_bg_10.png);
  1071. }
  1072. .evt--section03 .section--container .count--wrap .count--num::after {
  1073. content: "";
  1074. width: 210px;
  1075. right: -300px;
  1076. top: calc(50% - 500px);
  1077. height: 1000px;
  1078. position: absolute;
  1079. background-repeat: no-repeat;
  1080. background-position: center;
  1081. transform: rotate(180deg);
  1082. background-image: url(../img/img_bg_10.png);
  1083. }
  1084. .evt--section03 .section--container .count--wrap .evt--btn {
  1085. border-style: solid;
  1086. border-width: 3px;
  1087. border-color: rgb(255, 255, 255);
  1088. border-radius: 50px;
  1089. display: flex;
  1090. align-items: center;
  1091. z-index: 10;
  1092. justify-content: center;
  1093. background-color: #00175f;
  1094. box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
  1095. max-width: 416px;
  1096. width: 100%;
  1097. height: 95px;
  1098. font-family: "Pretendard Variable";
  1099. font-size: 40px;
  1100. font-weight: 800;
  1101. text-decoration: none;
  1102. color: #ffffff;
  1103. }
  1104. @media (max-width: 1480px) {
  1105. .section--container {
  1106. padding: 0 20px;
  1107. }
  1108. .evt--section01 .section--container .swiper--wrap .swiper-button-next,
  1109. .evt--section01 .section--container .swiper--wrap .swiper-button-prev {
  1110. display: none;
  1111. }
  1112. .evt--section01 .section--container .swiper--wrap .slide--desc {
  1113. padding: 25px 50px !important;
  1114. min-height: 300px;
  1115. height: auto;
  1116. }
  1117. .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
  1118. font-size: 32px;
  1119. }
  1120. .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
  1121. font-size: 20px;
  1122. }
  1123. .evt--section01 .section--container .swiper--wrap .slide--desc p {
  1124. font-size: 18px;
  1125. }
  1126. .evt--section02-1 .section--container .evt--1 .bg1 {
  1127. left: 0;
  1128. }
  1129. .evt--section02-1 .section--container .evt--1 .bg1 img {
  1130. width: 80%;
  1131. }
  1132. .evt--section02-1 .section--container .evt--1 .bg2 {
  1133. right: -10%;
  1134. }
  1135. .evt--section02-1 .section--container .evt--1 .bg2 img {
  1136. width: 80%;
  1137. }
  1138. .evt--section02-1 .section--container .evt--1 .bg3 {
  1139. left: 0;
  1140. bottom: 45%;
  1141. }
  1142. .evt--section02-1 .section--container .evt--1 .bg3 img {
  1143. width: 80%;
  1144. }
  1145. .evt--section02-1 .section--container .evt--1 .bg4 {
  1146. bottom: 40%;
  1147. right: -10%;
  1148. }
  1149. .evt--section02-1 .section--container .evt--1 .bg4 img {
  1150. width: 80%;
  1151. }
  1152. }
  1153. @media (max-width: 1200px) {
  1154. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
  1155. font-size: 18px;
  1156. height: 68px;
  1157. }
  1158. .evt--section02-1 .section--container h3 {
  1159. font-size: 36px;
  1160. }
  1161. .evt--section02-1 .section--container .evt--1 .bg1 img {
  1162. width: 50%;
  1163. }
  1164. .evt--section02-1 .section--container .evt--1 .bg2 {
  1165. top: 40%;
  1166. right: -30%;
  1167. }
  1168. .evt--section02-1 .section--container .evt--1 .bg2 img {
  1169. width: 50%;
  1170. }
  1171. .evt--section02-1 .section--container .evt--1 .bg3 img {
  1172. width: 50%;
  1173. }
  1174. .evt--section02-1 .section--container .evt--1 .bg4 {
  1175. right: -240px;
  1176. }
  1177. .evt--section02-1 .section--container .evt--1 .bg4 img {
  1178. width: 50%;
  1179. }
  1180. .evt--section02-2 .bg1 {
  1181. bottom: auto;
  1182. top: 5%;
  1183. }
  1184. .evt--section02-2 .bg2 {
  1185. bottom: auto;
  1186. top: 5%;
  1187. }
  1188. .evt--section02-2 .section--container h3 {
  1189. font-size: 36px;
  1190. }
  1191. .evt--section02-2 .section--container .evt--2 .evt--box {
  1192. padding: 30px;
  1193. }
  1194. .evt--section02-2 .section--container .evt--2 .evt--box li {
  1195. font-size: 30px;
  1196. }
  1197. .evt--section03 .section--container .promotion--detail--wrap {
  1198. gap: 40px;
  1199. }
  1200. .evt--section03 .section--container .promotion--detail--wrap .detail {
  1201. padding: 50px;
  1202. }
  1203. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
  1204. font-size: 32px;
  1205. margin-bottom: 20px;
  1206. }
  1207. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
  1208. font-size: 48px;
  1209. line-height: 1.4;
  1210. }
  1211. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul {
  1212. padding-left: 24px;
  1213. }
  1214. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
  1215. font-size: 24px;
  1216. line-height: 1.4;
  1217. }
  1218. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
  1219. right: 50px;
  1220. }
  1221. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
  1222. font-size: 24px;
  1223. }
  1224. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
  1225. font-size: 32px;
  1226. }
  1227. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
  1228. transform: scaleX(-1);
  1229. left: auto;
  1230. right: -10px;
  1231. }
  1232. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
  1233. font-size: 48px;
  1234. }
  1235. .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
  1236. font-size: 24px;
  1237. }
  1238. .evt--section03 .section--container .promotion--detail--wrap .detail--plus li {
  1239. padding-left: 20px;
  1240. }
  1241. .evt--section03 .section--container .count--wrap > p {
  1242. font-size: 30px;
  1243. }
  1244. .evt--section03 .section--container .count--wrap .count--txt > p {
  1245. font-size: 30px;
  1246. }
  1247. .evt--section03 .section--container .count--wrap .count--num {
  1248. width: 100%;
  1249. justify-content: center;
  1250. gap: 5%;
  1251. }
  1252. .evt--section03 .section--container .count--wrap .count--num div {
  1253. width: 33%;
  1254. gap: 5%;
  1255. justify-content: center;
  1256. }
  1257. .evt--section03 .section--container .count--wrap .count--num div span {
  1258. font-size: 120px;
  1259. width: 50%;
  1260. height: auto;
  1261. }
  1262. }
  1263. @media (max-width: 1000px) {
  1264. .evt--section01 .section--container .bg2 {
  1265. display: none;
  1266. }
  1267. .evt--section01 .section--container .bg4 {
  1268. display: none;
  1269. }
  1270. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap {
  1271. overflow-x: auto;
  1272. white-space: nowrap;
  1273. width: auto;
  1274. }
  1275. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
  1276. width: -moz-fit-content;
  1277. width: fit-content;
  1278. height: auto;
  1279. padding: 15px 15px 10px;
  1280. flex-shrink: 0;
  1281. }
  1282. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before {
  1283. font-size: 10px;
  1284. }
  1285. .evt--section01 .section--container .swiper--wrap .swiper-pagination span {
  1286. width: 24px;
  1287. height: 24px;
  1288. }
  1289. .evt--section01 .section--container .swiper--wrap .slide--desc {
  1290. padding: 25px 15px !important;
  1291. min-height: 240px;
  1292. }
  1293. .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
  1294. font-size: 24px;
  1295. margin-bottom: 15px;
  1296. }
  1297. .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
  1298. font-size: 16px;
  1299. }
  1300. .evt--section01 .section--container .swiper--wrap .slide--desc p {
  1301. margin-bottom: 15px;
  1302. font-size: 14px;
  1303. }
  1304. .evt--section03 .section--container .promotion--wrap {
  1305. gap: 20px;
  1306. }
  1307. .evt--section03 .section--container .promotion--wrap .promotion h4 {
  1308. font-size: 32px;
  1309. }
  1310. .evt--section03 .section--container .promotion--wrap .promotion p {
  1311. font-size: 32px;
  1312. }
  1313. .evt--section03 .section--container .promotion--wrap .promotion h5 {
  1314. font-size: 72px;
  1315. }
  1316. .evt--section03 .section--container .promotion--detail--wrap {
  1317. gap: 20px;
  1318. }
  1319. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
  1320. font-size: 24px;
  1321. margin-bottom: 15px;
  1322. }
  1323. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
  1324. font-size: 36px;
  1325. }
  1326. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
  1327. font-size: 18px;
  1328. }
  1329. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
  1330. font-size: 24px;
  1331. width: 80px;
  1332. height: 90px;
  1333. }
  1334. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
  1335. font-size: 18px;
  1336. }
  1337. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
  1338. font-size: 24px;
  1339. }
  1340. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
  1341. right: -10px;
  1342. height: 50px;
  1343. top: 15px;
  1344. background-size: cover;
  1345. width: 210px;
  1346. background-position: left;
  1347. transform: scaleX(1);
  1348. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='50' viewBox='0 0 88 20' fill='none'%3E%3Cpath d='M1 1V0.5H0.265087L0.534922 1.18358L1 1ZM8.5 20L9.34929 14.2893L3.97904 16.4091L8.5 20ZM87.5 1V0.5H1V1V1.5H87.5V1ZM1 1L0.534922 1.18358L6.38267 15.9979L6.84775 15.8143L7.31283 15.6307L1.46508 0.816417L1 1Z' fill='%23373737'/%3E%3C/svg%3E");
  1349. }
  1350. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
  1351. font-size: 36px;
  1352. }
  1353. .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
  1354. padding: 80px 30px 30px;
  1355. font-size: 18px;
  1356. }
  1357. .evt--section03 .section--container .count--wrap .count--txt {
  1358. margin-bottom: 50px;
  1359. flex-direction: column;
  1360. align-items: center;
  1361. }
  1362. .evt--section03 .section--container .count--wrap .count--txt .img--wrap {
  1363. width: 50%;
  1364. }
  1365. .evt--section03 .section--container .count--wrap .count--txt .img--wrap::before {
  1366. width: 70px;
  1367. top: 0px;
  1368. }
  1369. .evt--section03 .section--container .count--wrap .count--txt .img--wrap::after {
  1370. bottom: auto;
  1371. width: 100px;
  1372. right: -50%;
  1373. top: 50%;
  1374. transform: translateY(-50%);
  1375. }
  1376. .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
  1377. width: 30px;
  1378. right: auto;
  1379. left: calc(100% + 10px);
  1380. background-size: 100%;
  1381. }
  1382. .evt--section03 .section--container .count--wrap .count--num div span {
  1383. font-size: 100px;
  1384. }
  1385. }
  1386. @media (max-width: 767px) {
  1387. .evt--section01 .section--container .section--title .bg--wave--wrap {
  1388. top: 120px;
  1389. }
  1390. .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave {
  1391. height: 300px;
  1392. width: 450px;
  1393. }
  1394. .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2 {
  1395. display: none;
  1396. }
  1397. .evt--section02-1 .section--container .evt--1 .bg1 {
  1398. top: 10%;
  1399. }
  1400. .evt--section02-1 .section--container .evt--1 .bg2 {
  1401. right: -320px;
  1402. top: 5%;
  1403. }
  1404. .evt--section02-1 .section--container .evt--1 .bg3 {
  1405. bottom: auto;
  1406. top: 30%;
  1407. }
  1408. .evt--section02-1 .section--container .evt--1 .bg4 {
  1409. bottom: auto;
  1410. right: -240px;
  1411. top: 35%;
  1412. }
  1413. .evt--section02-1 .section--container .evt--1 .evt--circle {
  1414. font-size: 18px;
  1415. padding: 10px 20px;
  1416. margin-bottom: 30px;
  1417. }
  1418. .evt--section02-1 .section--container .evt--1 h3 {
  1419. font-size: 20px;
  1420. }
  1421. .evt--section02-2 .section--container .evt--2 .evt--box {
  1422. width: 100%;
  1423. }
  1424. .evt--section02-2 .section--container .evt--2 .evt--box li {
  1425. gap: 10px;
  1426. font-size: 18px;
  1427. }
  1428. .evt--section02-2 .section--container .evt--2 .evt--box li .circle {
  1429. padding: 10px 30px;
  1430. height: auto;
  1431. width: auto;
  1432. }
  1433. .evt--section02-2 .section--container .evt--2 .evt--box li .circle::after {
  1434. display: none;
  1435. }
  1436. .evt--section02-2 .section--container .evt--2 .evt--circle {
  1437. font-size: 18px;
  1438. padding: 10px 20px;
  1439. margin-bottom: 30px;
  1440. }
  1441. .evt--section02-2 .section--container .evt--2 h3 {
  1442. font-size: 20px;
  1443. }
  1444. .evt--section02-2 .section--container .evt--2 .evt--btn {
  1445. font-size: 24px;
  1446. height: 80px;
  1447. }
  1448. .evt--section03 .section--container .promotion--wrap {
  1449. margin-bottom: 40px;
  1450. }
  1451. .evt--section03 .section--container .promotion--wrap .promotion {
  1452. height: 450px;
  1453. }
  1454. .evt--section03 .section--container .promotion--wrap .promotion h4 {
  1455. font-size: 20px;
  1456. line-height: 24vw;
  1457. }
  1458. .evt--section03 .section--container .promotion--wrap .promotion p {
  1459. font-size: 20px;
  1460. }
  1461. .evt--section03 .section--container .promotion--wrap .promotion h5 {
  1462. font-size: 48px;
  1463. }
  1464. .evt--section03 .section--container .promotion--detail--wrap .detail {
  1465. flex-direction: column;
  1466. padding: 30px;
  1467. gap: 15px;
  1468. border-radius: 20px;
  1469. }
  1470. .evt--section03 .section--container .promotion--detail--wrap .detail::before {
  1471. display: none !important;
  1472. }
  1473. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l {
  1474. width: 100%;
  1475. }
  1476. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
  1477. font-size: 18px;
  1478. }
  1479. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
  1480. font-size: 24px;
  1481. margin-bottom: 20px;
  1482. }
  1483. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r {
  1484. width: 100%;
  1485. }
  1486. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
  1487. font-size: 18px;
  1488. width: 60px;
  1489. height: 70px;
  1490. right: 30px;
  1491. }
  1492. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
  1493. margin-bottom: 0;
  1494. }
  1495. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
  1496. font-size: 18px;
  1497. }
  1498. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
  1499. width: 140px;
  1500. height: 30px;
  1501. top: 12px;
  1502. }
  1503. .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
  1504. font-size: 24px;
  1505. }
  1506. .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
  1507. border-bottom-left-radius: 20px;
  1508. border-bottom-right-radius: 20px;
  1509. font-size: 14px;
  1510. }
  1511. .evt--section03 .section--container .count--wrap .evt--btn {
  1512. font-size: 24px;
  1513. height: 80px;
  1514. }
  1515. .evt--section03 .section--container .count--wrap .count--txt > p {
  1516. font-size: 20px;
  1517. }
  1518. .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
  1519. width: 20px;
  1520. }
  1521. .evt--section03 .section--container .count--wrap .count--num div span {
  1522. border-radius: 8px;
  1523. font-size: 48px;
  1524. padding: 20px 0;
  1525. }
  1526. .evt--section03 .section--container .count--wrap .count--num div span::before {
  1527. border-top-left-radius: 8px;
  1528. border-top-right-radius: 8px;
  1529. }
  1530. }
  1531. @media (max-width: 500px) {
  1532. .evt--section01 .section--container .swiper--wrap {
  1533. margin-bottom: 50px;
  1534. }
  1535. .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
  1536. font-size: 16px;
  1537. }
  1538. .evt--section01 .section--container .swiper--wrap .swiper-pagination span {
  1539. width: 14px;
  1540. height: 14px;
  1541. margin: 0 5px;
  1542. }
  1543. .evt--section01 .section--container .swiper--wrap .slide--desc {
  1544. padding: 25px 15px !important;
  1545. min-height: 200px;
  1546. height: 100%;
  1547. }
  1548. .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
  1549. font-size: 18px;
  1550. }
  1551. .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
  1552. font-size: 12px;
  1553. }
  1554. .evt--section01 .section--container .swiper--wrap .slide--desc p {
  1555. font-size: 14px;
  1556. }
  1557. .evt--section02-1 .section--container .evt--1 .bg2 {
  1558. top: 2%;
  1559. right: -360px;
  1560. }
  1561. .evt--section02-1 .section--container .evt--1 .bg2 img {
  1562. width: 45%;
  1563. }
  1564. .evt--section02-1 .section--container .evt--1 .bg3 {
  1565. top: 32%;
  1566. }
  1567. .evt--section02-2 .section--container .evt--2 .evt--box {
  1568. padding: 20px;
  1569. }
  1570. .evt--section02-2 .section--container .evt--2 .evt--box li {
  1571. font-size: 14px;
  1572. }
  1573. .evt--section02-2 .section--container .evt--2 .evt--box li .circle {
  1574. padding: 5px 15px;
  1575. white-space: nowrap;
  1576. }
  1577. .evt--section03 .section--container .promotion--wrap .promotion {
  1578. height: 300px;
  1579. }
  1580. .evt--section03 .section--container .promotion--wrap .promotion h4 {
  1581. font-size: 16px;
  1582. margin-bottom: 0px;
  1583. line-height: 22vw;
  1584. }
  1585. .evt--section03 .section--container .promotion--wrap .promotion p {
  1586. font-size: 16px;
  1587. margin-bottom: 0px;
  1588. }
  1589. .evt--section03 .section--container .promotion--wrap .promotion h5 {
  1590. font-size: 36px;
  1591. }
  1592. .evt--section03 .section--container .promotion--wrap .promotion h5 span {
  1593. font-size: 24px;
  1594. }
  1595. .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
  1596. width: 10px;
  1597. }
  1598. .evt--section03 .section--container .count--wrap .count--num div span {
  1599. font-size: 24px;
  1600. padding: 15px 0;
  1601. }
  1602. }/*# sourceMappingURL=style.css.map */
  1603. =======
  1604. img{width:100%}.evt--section01{background-color:#00b6ff;background-repeat:no-repeat;background-size:100%;position:relative;overflow:hidden}.evt--section01 .palm--img1{position:absolute;top:-3%;left:0;max-width:495px;width:50%;z-index:10}.evt--section01 .palm--img2{z-index:10;position:absolute;right:-60px;top:-3%;width:50%;max-width:500px}.evt--section01 .bubble--bg{z-index:10;position:absolute;background-image:url(../img/img_bg_3.png);width:231px;height:95px;bottom:-500px;left:-231px}.evt--section01 .wave--bg{position:absolute;background-size:100%;background-position:0 -120px;background-image:url(../img/bg_2.png);width:100%;height:5000px}.evt--section01 .section--container{max-width:1440px;margin:0 auto;position:relative}.evt--section01 .section--container .section--title{margin-top:150px;margin-bottom:150px;display:flex;flex-direction:column;position:relative;z-index:11;align-items:center}.evt--section01 .section--container .section--title .logo{max-width:290px;width:40%;margin-bottom:80px;opacity:0;transform:translateY(60px);animation:fadeUpLogo 2s cubic-bezier(0.22, 1, 0.36, 1) forwards}.evt--section01 .section--container .section--title>h1{margin-bottom:30px;opacity:0;transform:translateX(-60px);animation:fadeInRightH1 1.2s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards}.evt--section01 .section--container .section--title>h2{opacity:0;transform:translateX(60px);animation:fadeInLeftH2 1.2s cubic-bezier(0.22, 1, 0.36, 1) .6s forwards;margin-bottom:100px}.evt--section01 .section--container .section--title>h3{opacity:0;transform:translateY(60px);animation:fadeUpH3 1.2s cubic-bezier(0.22, 1, 0.36, 1) .9s forwards;max-width:716px;width:80%}.evt--section01 .section--container .section--title .bg1{position:absolute;left:-200px;top:0px}.evt--section01 .section--container .section--title .bg2{position:absolute;left:-230px;bottom:-200px}.evt--section01 .section--container .section--title .bg4{position:absolute;right:-200px;bottom:-60px}.evt--section01 .section--container .section--title .bg--wave--wrap{position:absolute;right:-90px;top:50px}.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave{position:relative;width:900px;height:550px}.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave1{position:absolute;z-index:-1;opacity:0;transform:translateX(-100px);animation:waveInRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards}.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2{position:absolute;width:316px;right:60px;top:103px;opacity:0;transform:translateX(-100px);animation:waveInRight 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards}.evt--section01 .section--container .video--wrap{max-width:1440px;margin:0 auto 120px;overflow:hidden;max-height:90vh;background-color:#000;border:3px solid #fff;border-radius:2px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;position:relative;z-index:5}.evt--section01 .section--container .video--wrap video{aspect-ratio:4/3;z-index:5;width:100%;position:relative;vertical-align:top}.evt--section01 .section--container .video--wrap .bg5{position:absolute;top:-100px;left:-340px;z-index:2}.evt--section01 .section--container .video--wrap .video--btn{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:230px;max-height:230px;width:20vw;height:20vw;z-index:10;height:230px;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:100%;background-image:url(../img/ico_play.png)}.evt--section01 .section--container .video--wrap .video--btn.play{display:block}.evt--section01 .section--container .swiper--wrap{position:relative;margin-bottom:200px;box-shadow:16px 12px 32px rgba(68,68,68,.15)}.evt--section01 .section--container .swiper--wrap .bg1{position:absolute;right:-180px;top:-30px}.evt--section01 .section--container .swiper--wrap .bg2{position:absolute;left:-160px;top:50%}.evt--section01 .section--container .swiper--wrap .bg3{position:absolute;right:-260px;bottom:30%}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap{display:flex;gap:5px}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn{background-color:#fff;border:none;border-top-left-radius:15px;border-top-right-radius:15px;text-align:center;width:100%;position:relative;font-weight:500;font-family:"GmarketSans";height:80px;display:flex;align-items:center;justify-content:center;font-size:28px;padding:0;color:#787878;box-shadow:0px -2px 5px 0px rgba(0,0,0,.15) inset}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before,.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(2)::before,.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(3)::before{content:"NEW";font-size:14px;margin-top:-5px;margin-right:5px}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn::after{content:"";display:inline-block;width:100%;bottom:0;position:absolute}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn.active{background-color:blue;font-weight:700;color:#ffde00}.evt--section01 .section--container .swiper--wrap .swiper-slide{display:flex;justify-content:center}.evt--section01 .section--container .swiper--wrap .slide--img{position:relative}.evt--section01 .section--container .swiper--wrap .slide--img .new--icon{display:inline-block;position:absolute;width:10%;padding-bottom:11%;background-repeat:no-repeat;bottom:5%;right:6%;background-image:url(../img/ico_new.png);max-width:130px;max-height:130px;background-size:100%}.evt--section01 .section--container .swiper--wrap .slide--desc{padding:70px 100px;height:380px;background-color:#fff}.evt--section01 .section--container .swiper--wrap .slide--desc.type2{padding:40px 100px}.evt--section01 .section--container .swiper--wrap .slide--desc.type2 h4{margin-bottom:0px}.evt--section01 .section--container .swiper--wrap .slide--desc h4{font-family:"GmarketSans";font-weight:700;font-size:42px;margin-bottom:20px}.evt--section01 .section--container .swiper--wrap .slide--desc h4 span{font-size:28px}.evt--section01 .section--container .swiper--wrap .slide--desc p{font-family:"Pretendard Variable";font-size:28px;line-height:1.4;font-weight:500;margin-bottom:30px}.evt--section01 .section--container .swiper--wrap .slide--desc p:last-child{margin-bottom:0px}.evt--section01 .section--container .swiper--wrap .swiper-pagination{bottom:-100px}.evt--section01 .section--container .swiper--wrap .swiper-pagination span{width:32px;height:32px;margin:0 12px;background-color:#008be6;opacity:.6}.evt--section01 .section--container .swiper--wrap .swiper-pagination .swiper-pagination-bullet-active{background-color:#0047bb;opacity:1}.evt--section01 .section--container .swiper--wrap .swiper-button-next,.evt--section01 .section--container .swiper--wrap .swiper-button-prev{width:50px;background-image:url(../img/ico_arrow.png);height:90px;top:30%;right:-100px}.evt--section01 .section--container .swiper--wrap .swiper-button-next::after,.evt--section01 .section--container .swiper--wrap .swiper-button-prev::after{display:none}.evt--section01 .section--container .swiper--wrap .swiper-button-prev{transform:rotate(180deg);left:-100px}.evt--section02-1{position:relative;overflow:hidden;background:linear-gradient(to bottom, #004dee, #007ff6)}.evt--section02-1::before{content:"";background-image:url(../img/bg_4.png);background-repeat:no-repeat;background-position:bottom;display:inline-block;top:0;z-index:1;left:0;position:absolute;width:100%;height:100%}.evt--section02-1 .cloud--img1{position:absolute;left:0;z-index:10;max-width:20%;top:100px;animation:cloudMoveLeftToRight 20s linear infinite}.evt--section02-1 .cloud--img2{position:absolute;right:0;z-index:10;max-width:30%;top:50px;animation:cloudMoveLeftToRight 30s linear infinite}.evt--section02-1 .section--container{max-width:1920px;margin:0 auto}.evt--section02-1 .section--container .evt--1{padding:100px 0 130px;position:relative;background-position:bottom;background-repeat:no-repeat;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.evt--section02-1 .section--container .evt--1 h2{max-width:682px;width:70%}.evt--section02-1 .section--container .evt--1 .bg1{position:absolute;left:15%;top:30%;animation:floating-diag-1 4s ease-in-out infinite alternate}.evt--section02-1 .section--container .evt--1 .bg2{position:absolute;right:5%;top:30%;animation:floating-diag-2 5s ease-in-out infinite alternate}.evt--section02-1 .section--container .evt--1 .bg3{left:7%;bottom:25%;position:absolute;animation:floating-diag-3 4.5s ease-in-out infinite alternate}.evt--section02-1 .section--container .evt--1 .bg4{position:absolute;bottom:25%;right:5%;animation:floating-diag-4 6s ease-in-out infinite alternate}.evt--section02-1 .section--container .evt--1 .evt--box{margin-top:50px;font-weight:600;text-align:center;font-size:45px;font-family:"Pretendard Variable";color:#fff;line-height:1.2}.evt--section02-1 .section--container .evt--circle{font-family:"Pretendard Variable";font-weight:800;font-size:30px;padding:20px 40px;background-color:#00175f;color:#fff;border-radius:50%;margin-bottom:50px;display:inline-block}.evt--section02-1 .section--container h3{color:#fff;font-weight:700;margin-bottom:0;text-align:center;font-size:56px;font-family:"Pretendard Variable"}.evt--section02-2{background-color:#007ff6;position:relative;overflow:hidden}.evt--section02-2 .bg1{position:absolute;left:0;z-index:2;bottom:20%;max-width:575px;width:40%}.evt--section02-2 .bg2{max-width:690px;width:40%;position:absolute;right:0;z-index:2;bottom:10%}.evt--section02-2::after{content:"";display:inline-block;bottom:0;z-index:1;left:0;position:absolute;background:linear-gradient(to bottom, #007ff6, #004dee);width:100%;height:100%}.evt--section02-2 .section--container{max-width:1500px;margin:0 auto}.evt--section02-2 .section--container .evt--circle{font-family:"Pretendard Variable";font-weight:800;font-size:30px;padding:20px 40px;background-color:#00175f;color:#fff;border-radius:50%;margin-bottom:50px;display:inline-block}.evt--section02-2 .section--container h3{color:#fff;font-weight:700;font-size:56px;font-family:"Pretendard Variable"}.evt--section02-2 .section--container .evt--2{padding:120px 0 130px;position:relative;background-repeat:no-repeat;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center}.evt--section02-2 .section--container .evt--2 h2{max-width:789px;width:90%}.evt--section02-2 .section--container .evt--2 h3{text-align:center;margin-bottom:30px}.evt--section02-2 .section--container .evt--2 .evt--box{margin-top:60px;margin-bottom:70px;border-radius:25px;background-color:rgba(0,152,249,.4);box-shadow:0px 2px 9.5px .5px rgba(0,0,0,.23);font-weight:600;padding:75px 90px;font-size:36px;font-family:"Pretendard Variable";color:#fff;line-height:1.2;display:flex;flex-direction:column;gap:25px}.evt--section02-2 .section--container .evt--2 .evt--box li{list-style:none;font-size:36px;display:flex;align-items:center;width:100%;font-weight:400;gap:25px}.evt--section02-2 .section--container .evt--2 .evt--box li .circle{padding:10px 40px;width:168px;display:inline-block;height:60px;border-radius:30px;background-color:#00a2fb;text-align:justify}.evt--section02-2 .section--container .evt--2 .evt--box li .circle::after{content:"";display:inline-block;width:100%}.evt--section02-2 .section--container .evt--2 .evt--box2{max-width:470px;width:60%}.evt--section02-2 .section--container .evt--2 .evt--btn{border-style:solid;border-width:3px;border-color:#fff;border-radius:50px;display:flex;align-items:center;justify-content:center;background-color:#00175f;box-shadow:0px 15px 16px 0px rgba(0,0,0,.14);max-width:416px;width:100%;height:95px;font-family:"Pretendard Variable";font-size:40px;font-weight:800;text-decoration:none;color:#fff}.evt--section03{overflow:hidden;background:linear-gradient(to bottom, #5DBBFF 0%, #00A8FF 50%, #5DBBFF 100%);padding:150px 0 150px;position:relative}.evt--section03::before{content:"";width:100%;height:100%;position:absolute;top:0;right:0;background-position:top;z-index:0;background-repeat:no-repeat;display:inline-block;background-image:url(../img/bg_color_2.png)}.evt--section03::after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;background-position:bottom;z-index:0;background-repeat:no-repeat;display:inline-block;background-image:url(../img/bg_color_1.png)}.evt--section03 .section--container{max-width:1280px;z-index:10;position:relative;margin:0 auto}.evt--section03 .section--container .section--title{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:80px}.evt--section03 .section--container .section--title h3{max-width:750px;width:60%}.evt--section03 .section--container .section--title h2{max-width:945px;width:70%}.evt--section03 .section--container .section--title .circle{margin-top:20px;max-width:832px;width:70%}.evt--section03 .section--container .promotion--wrap{display:flex;justify-content:center;margin-bottom:120px;gap:140px}.evt--section03 .section--container .promotion--wrap .promotion{width:400px;height:580px;background-image:url(../img/img_bg_9.png);background-size:100%;background-repeat:no-repeat;display:flex;align-items:center;flex-direction:column;color:#fff}.evt--section03 .section--container .promotion--wrap .promotion h4{font-family:"Pretendard Variable";font-size:56px;font-weight:700;line-height:210px;margin-bottom:0}.evt--section03 .section--container .promotion--wrap .promotion p{font-family:"gmarketSans";font-size:45px;margin-bottom:0}.evt--section03 .section--container .promotion--wrap .promotion h5{line-height:1.1;font-family:"gmarketSans";font-size:86px;font-weight:800;margin-bottom:0}.evt--section03 .section--container .promotion--wrap .promotion h5 span{font-size:44px}.evt--section03 .section--container .promotion--detail--wrap{display:flex;flex-direction:column;gap:80px;margin-bottom:460px;position:relative}.evt--section03 .section--container .promotion--detail--wrap .detail{color:#373737;background-color:#fff;border:3px solid #000;padding:70px;border-radius:68px;z-index:3;position:relative;display:flex}.evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(1)::before{content:"";position:absolute;display:inline-block;width:318px;height:314px;top:-91px;left:-48px;background-repeat:no-repeat;background-image:url(../img/bg_wave_3.png)}.evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(2)::before{content:"";position:absolute;display:inline-block;width:286px;right:-125px;top:-36px;z-index:10;height:380px;background-repeat:no-repeat;background-image:url(../img/bg_wave_4.png)}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l{width:70%}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>span{font-size:44px;font-weight:700;display:inline-block;font-family:"Pretendard Variable";text-decoration:underline;margin-bottom:40px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>h5{font-family:"Pretendard Variable";font-size:54px;font-weight:900;margin-bottom:40px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>h5>span{color:#6d21ed}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>ul li{line-height:1.2;font-family:"Pretendard Variable";font-weight:500;font-size:38px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r{width:30%;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;text-align:right}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>span{box-shadow:inset -10px -10px 20px rgba(0,0,0,.4);background:linear-gradient(135deg, #8324ff, #5a3dfd, #0a5aff);font-family:"Pretendard Variable";font-size:44px;font-weight:800;width:130px;height:140px;line-height:1.2;display:flex;align-items:center;right:100px;top:0;justify-content:center;color:#fff;position:absolute}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>p{font-size:28px;font-family:"Pretendard Variable";font-weight:500;margin-bottom:10px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price{font-size:44px;font-weight:700;font-family:"Pretendard Variable";position:relative}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after{content:"";display:inline-block;width:267px;height:62px;position:absolute;top:50%;left:-30px;background-image:url(../img/ico_arrow2.png)}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price{font-family:"Pretendard Variable";font-size:66px;color:#6d21ed;font-weight:900}.evt--section03 .section--container .promotion--detail--wrap .detail--plus{z-index:2;position:absolute;font-size:38px;top:calc(100% - 55px);width:100%;border-bottom-left-radius:50px;border-bottom-right-radius:50px;font-family:"Pretendard Variable";background-color:#9ec3fe;padding:100px 60px 60px;font-weight:500;margin-bottom:0}.evt--section03 .section--container .promotion--detail--wrap .detail--plus li{list-style:none;position:relative;padding-left:30px}.evt--section03 .section--container .promotion--detail--wrap .detail--plus li::before{top:0px;left:0px;position:absolute;content:"*"}.evt--section03 .section--container .promotion--detail--wrap .detail--plus strong{font-weight:800;text-decoration:underline}.evt--section03 .section--container .count--wrap{display:flex;flex-direction:column;position:relative;z-index:10;align-items:center}.evt--section03 .section--container .count--wrap .count--txt{display:flex;align-items:flex-end;justify-content:center;gap:20px;margin-bottom:90px}.evt--section03 .section--container .count--wrap .count--txt .img--wrap{position:relative}.evt--section03 .section--container .count--wrap .count--txt .img--wrap .wch--l{position:absolute;top:0px;left:0px;width:139px;height:122px;background:url(../img/wch_l.png) no-repeat center;animation:bellRing 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;transform-origin:50% 80%}.evt--section03 .section--container .count--wrap .count--txt .img--wrap .wch--r{position:absolute;top:0px;right:0px;width:159px;height:121px;background:url(../img/wch_r.png) no-repeat center;animation:bellRing 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;transform-origin:50% 80%}.evt--section03 .section--container .count--wrap .count--txt .img--wrap::before{content:"";display:inline-block;width:144px;height:80px;background-repeat:no-repeat;background-size:100%;left:-40%;top:30px;position:absolute;background-image:url(../img/img_15_bg1.png)}.evt--section03 .section--container .count--wrap .count--txt .img--wrap::after{content:"";display:inline-block;width:242px;height:177px;background-repeat:no-repeat;background-size:100%;right:-70%;bottom:100px;position:absolute;background-image:url(../img/img_15_bg2.png)}.evt--section03 .section--container .count--wrap .count--txt>p{color:#fff;font-family:"gmarketSans";text-align:center;font-size:46px;font-weight:800;margin-bottom:0;text-align:center;text-shadow:0px 3px 7px rgba(0,0,0,.35)}.evt--section03 .section--container .count--wrap .count--num{display:flex;font-family:"gmarketSans";gap:80px;margin-bottom:140px;position:relative}.evt--section03 .section--container .count--wrap .count--num .bbl--eft01{position:absolute;top:50%;transform:translateY(-50%);left:-154px;width:62px;height:266px;background:url(../img/bbl_01.png) no-repeat center;animation:shakeX .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num .bbl--eft02{position:absolute;top:50%;transform:translateY(-50%);left:-226px;width:106px;height:427px;background:url(../img/bbl_02.png) no-repeat center;animation:shakeX .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num .bbl--eft03{position:absolute;top:50%;transform:translateY(-50%);left:-303px;width:146px;height:550px;background:url(../img/bbl_03.png) no-repeat center;animation:shakeX .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num .bbl--eft04{position:absolute;top:50%;transform:rotate(180deg) translateY(-50%);transform-origin:top;right:-154px;width:62px;height:266px;background:url(../img/bbl_01.png) no-repeat center;animation:shakeX2 .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num .bbl--eft05{position:absolute;top:50%;transform:rotate(180deg) translateY(-50%);transform-origin:top;right:-226px;width:106px;height:427px;background:url(../img/bbl_02.png) no-repeat center;animation:shakeX2 .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num .bbl--eft06{position:absolute;top:50%;transform:rotate(180deg) translateY(-50%);transform-origin:top;right:-303px;width:146px;height:550px;background:url(../img/bbl_03.png) no-repeat center;animation:shakeX2 .8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite}.evt--section03 .section--container .count--wrap .count--num div{display:flex;gap:30px;align-items:center}.evt--section03 .section--container .count--wrap .count--num div span{font-size:120px;color:#fff;background-color:#7f1bf2;width:140px;font-weight:800;height:210px;display:inline-block;line-height:2;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,.25);border-radius:30px;position:relative;z-index:30;perspective:600px;overflow:hidden}.evt--section03 .section--container .count--wrap .count--num div span.flip{animation:flipDown .5s ease-in-out}.evt--section03 .section--container .count--wrap .count--num div span::before{content:"";width:100%;z-index:-1;display:inline-block;left:0;top:0;border-top-left-radius:30px;border-top-right-radius:30px;height:50%;background-color:#8b2ef4;position:absolute}.evt--section03 .section--container .count--wrap .evt--btn{border-style:solid;border-width:3px;border-color:#fff;border-radius:50px;display:flex;align-items:center;z-index:10;justify-content:center;background-color:#00175f;box-shadow:0px 15px 16px 0px rgba(0,0,0,.14);max-width:416px;width:100%;height:95px;font-family:"Pretendard Variable";font-size:40px;font-weight:800;text-decoration:none;color:#fff}@media(max-width: 1480px){.section--container{padding:0 20px}.evt--section01 .section--container .swiper--wrap .swiper-button-next,.evt--section01 .section--container .swiper--wrap .swiper-button-prev{display:none}.evt--section01 .section--container .swiper--wrap .slide--desc{padding:25px 50px !important;min-height:300px;height:auto}.evt--section01 .section--container .swiper--wrap .slide--desc h4{font-size:32px}.evt--section01 .section--container .swiper--wrap .slide--desc h4 span{font-size:20px}.evt--section01 .section--container .swiper--wrap .slide--desc p{font-size:18px}.evt--section02-1 .section--container .evt--1 .bg1{left:0}.evt--section02-1 .section--container .evt--1 .bg1 img{width:80%}.evt--section02-1 .section--container .evt--1 .bg2{right:-10%}.evt--section02-1 .section--container .evt--1 .bg2 img{width:80%}.evt--section02-1 .section--container .evt--1 .bg3{left:0;bottom:45%}.evt--section02-1 .section--container .evt--1 .bg3 img{width:80%}.evt--section02-1 .section--container .evt--1 .bg4{bottom:40%;right:-10%}.evt--section02-1 .section--container .evt--1 .bg4 img{width:80%}}@media(max-width: 1200px){.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn{font-size:18px;height:68px}.evt--section02-1 .section--container h3{font-size:36px}.evt--section02-1 .section--container .evt--1 .bg1 img{width:50%}.evt--section02-1 .section--container .evt--1 .bg2{top:40%;right:-30%}.evt--section02-1 .section--container .evt--1 .bg2 img{width:50%}.evt--section02-1 .section--container .evt--1 .bg3 img{width:50%}.evt--section02-1 .section--container .evt--1 .bg4{right:-240px}.evt--section02-1 .section--container .evt--1 .bg4 img{width:50%}.evt--section02-2 .bg1{bottom:auto;top:5%}.evt--section02-2 .bg2{bottom:auto;top:5%}.evt--section02-2 .section--container h3{font-size:36px}.evt--section02-2 .section--container .evt--2 .evt--box{padding:30px}.evt--section02-2 .section--container .evt--2 .evt--box li{font-size:30px}.evt--section03 .section--container .promotion--detail--wrap{gap:40px}.evt--section03 .section--container .promotion--detail--wrap .detail{padding:50px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>span{font-size:32px;margin-bottom:20px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>h5{font-size:48px;line-height:1.4}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>ul{padding-left:24px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>ul li{font-size:24px;line-height:1.4}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>span{right:50px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>p{font-size:24px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price{font-size:32px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after{transform:scaleX(-1);left:auto;right:-10px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price{font-size:48px}.evt--section03 .section--container .promotion--detail--wrap .detail--plus{font-size:24px}.evt--section03 .section--container .promotion--detail--wrap .detail--plus li{padding-left:20px}.evt--section03 .section--container .count--wrap>p{font-size:30px}.evt--section03 .section--container .count--wrap .count--txt>p{font-size:30px}.evt--section03 .section--container .count--wrap .count--num{width:100%;justify-content:center;gap:5%}.evt--section03 .section--container .count--wrap .count--num div{width:33%;gap:5%;justify-content:center}.evt--section03 .section--container .count--wrap .count--num div span{font-size:120px;width:50%;height:auto}}@media(max-width: 1000px){.evt--section01 .section--container .bg2{display:none}.evt--section01 .section--container .bg4{display:none}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap{overflow-x:auto;white-space:nowrap;width:auto}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn{width:fit-content;height:auto;padding:15px 15px 10px;flex-shrink:0}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before{font-size:10px}.evt--section01 .section--container .swiper--wrap .swiper-pagination span{width:24px;height:24px}.evt--section01 .section--container .swiper--wrap .slide--desc{padding:25px 15px !important;min-height:240px}.evt--section01 .section--container .swiper--wrap .slide--desc h4{font-size:24px;margin-bottom:15px}.evt--section01 .section--container .swiper--wrap .slide--desc h4 span{font-size:16px}.evt--section01 .section--container .swiper--wrap .slide--desc p{margin-bottom:15px;font-size:14px}.evt--section03 .section--container .promotion--wrap{gap:20px}.evt--section03 .section--container .promotion--wrap .promotion h4{font-size:32px}.evt--section03 .section--container .promotion--wrap .promotion p{font-size:32px}.evt--section03 .section--container .promotion--wrap .promotion h5{font-size:72px}.evt--section03 .section--container .promotion--detail--wrap{gap:20px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>span{font-size:24px;margin-bottom:15px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>h5{font-size:36px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>ul li{font-size:18px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>span{font-size:24px;width:80px;height:90px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>p{font-size:18px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price{font-size:24px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after{right:-10px;height:50px;top:15px;background-size:cover;width:210px;background-position:left;transform:scaleX(1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='50' viewBox='0 0 88 20' fill='none'%3E%3Cpath d='M1 1V0.5H0.265087L0.534922 1.18358L1 1ZM8.5 20L9.34929 14.2893L3.97904 16.4091L8.5 20ZM87.5 1V0.5H1V1V1.5H87.5V1ZM1 1L0.534922 1.18358L6.38267 15.9979L6.84775 15.8143L7.31283 15.6307L1.46508 0.816417L1 1Z' fill='%23373737'/%3E%3C/svg%3E")}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price{font-size:36px}.evt--section03 .section--container .promotion--detail--wrap .detail--plus{padding:80px 30px 30px;font-size:18px}.evt--section03 .section--container .count--wrap .count--txt{margin-bottom:50px;flex-direction:column;align-items:center}.evt--section03 .section--container .count--wrap .count--txt .img--wrap{width:50%}.evt--section03 .section--container .count--wrap .count--txt .img--wrap::before{width:70px;top:0px}.evt--section03 .section--container .count--wrap .count--txt .img--wrap::after{bottom:auto;width:100px;right:-50%;top:50%;transform:translateY(-50%)}.evt--section03 .section--container .count--wrap .count--num div .day--text::after{width:30px;right:auto;left:calc(100% + 10px);background-size:100%}.evt--section03 .section--container .count--wrap .count--num div span{font-size:100px}}@media(max-width: 767px){.evt--section01 .section--container .section--title .bg--wave--wrap{top:120px}.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave{height:300px;width:450px}.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2{display:none}.evt--section02-1 .section--container .evt--1 .bg1{top:10%}.evt--section02-1 .section--container .evt--1 .bg2{right:-320px;top:5%}.evt--section02-1 .section--container .evt--1 .bg3{bottom:auto;top:30%}.evt--section02-1 .section--container .evt--1 .bg4{bottom:auto;right:-240px;top:35%}.evt--section02-1 .section--container .evt--1 .evt--circle{font-size:18px;padding:10px 20px;margin-bottom:30px}.evt--section02-1 .section--container .evt--1 h3{font-size:20px}.evt--section02-2 .section--container .evt--2 .evt--box{width:100%}.evt--section02-2 .section--container .evt--2 .evt--box li{gap:10px;font-size:18px}.evt--section02-2 .section--container .evt--2 .evt--box li .circle{padding:10px 30px;height:auto;width:auto}.evt--section02-2 .section--container .evt--2 .evt--box li .circle::after{display:none}.evt--section02-2 .section--container .evt--2 .evt--circle{font-size:18px;padding:10px 20px;margin-bottom:30px}.evt--section02-2 .section--container .evt--2 h3{font-size:20px}.evt--section02-2 .section--container .evt--2 .evt--btn{font-size:24px;height:80px}.evt--section03 .section--container .promotion--wrap{margin-bottom:40px}.evt--section03 .section--container .promotion--wrap .promotion{height:450px}.evt--section03 .section--container .promotion--wrap .promotion h4{font-size:20px;line-height:24vw}.evt--section03 .section--container .promotion--wrap .promotion p{font-size:20px}.evt--section03 .section--container .promotion--wrap .promotion h5{font-size:48px}.evt--section03 .section--container .promotion--detail--wrap .detail{flex-direction:column;padding:30px;gap:15px;border-radius:20px}.evt--section03 .section--container .promotion--detail--wrap .detail::before{display:none !important}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l{width:100%}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>span{font-size:18px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l>h5{font-size:24px;margin-bottom:20px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r{width:100%}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>span{font-size:18px;width:60px;height:70px;right:30px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r>p{margin-bottom:0}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price{font-size:18px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after{width:140px;height:30px;top:12px}.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price{font-size:24px}.evt--section03 .section--container .promotion--detail--wrap .detail--plus{border-bottom-left-radius:20px;border-bottom-right-radius:20px;font-size:14px}.evt--section03 .section--container .count--wrap .evt--btn{font-size:24px;height:80px}.evt--section03 .section--container .count--wrap .count--txt>p{font-size:20px}.evt--section03 .section--container .count--wrap .count--num div .day--text::after{width:20px}.evt--section03 .section--container .count--wrap .count--num div span{border-radius:8px;font-size:48px;padding:20px 0}.evt--section03 .section--container .count--wrap .count--num div span::before{border-top-left-radius:8px;border-top-right-radius:8px}}@media(max-width: 500px){.evt--section01 .section--container .swiper--wrap{margin-bottom:50px}.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn{font-size:16px}.evt--section01 .section--container .swiper--wrap .swiper-pagination span{width:14px;height:14px;margin:0 5px}.evt--section01 .section--container .swiper--wrap .slide--desc{padding:25px 15px !important;min-height:200px;height:100%}.evt--section01 .section--container .swiper--wrap .slide--desc h4{font-size:18px}.evt--section01 .section--container .swiper--wrap .slide--desc h4 span{font-size:12px}.evt--section01 .section--container .swiper--wrap .slide--desc p{font-size:14px}.evt--section02-1 .section--container .evt--1 .bg2{top:2%;right:-360px}.evt--section02-1 .section--container .evt--1 .bg2 img{width:45%}.evt--section02-1 .section--container .evt--1 .bg3{top:32%}.evt--section02-2 .section--container .evt--2 .evt--box{padding:20px}.evt--section02-2 .section--container .evt--2 .evt--box li{font-size:14px}.evt--section02-2 .section--container .evt--2 .evt--box li .circle{padding:5px 15px;white-space:nowrap}.evt--section03 .section--container .promotion--wrap .promotion{height:300px}.evt--section03 .section--container .promotion--wrap .promotion h4{font-size:16px;margin-bottom:0px;line-height:22vw}.evt--section03 .section--container .promotion--wrap .promotion p{font-size:16px;margin-bottom:0px}.evt--section03 .section--container .promotion--wrap .promotion h5{font-size:36px}.evt--section03 .section--container .promotion--wrap .promotion h5 span{font-size:24px}.evt--section03 .section--container .count--wrap .count--num div .day--text::after{width:10px}.evt--section03 .section--container .count--wrap .count--num div span{font-size:24px;padding:15px 0}}.floating{animation:floating 3s ease-in-out infinite}@keyframes floating{0%{transform:translateY(0px)}50%{transform:translateY(-20px)}100%{transform:translateY(0px)}}@keyframes fadeUpLogo{to{opacity:1;transform:translateY(0)}}@keyframes fadeInRightH1{to{opacity:1;transform:translateX(0)}}@keyframes fadeInLeftH2{to{opacity:1;transform:translateX(0)}}@keyframes fadeUpH3{to{opacity:1;transform:translateY(0)}}@keyframes waveInRight{0%{opacity:0;transform:translateX(-100px)}60%{opacity:1;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}@keyframes cloudMoveLeftToRight{0%{transform:translateX(0px)}100%{transform:translateX(100px)}}@keyframes floating-diag-1{0%{transform:translate(0, 0)}20%{transform:translate(-10px, 10px)}40%{transform:translate(10px, -10px)}60%{transform:translate(-10px, -10px)}80%{transform:translate(10px, 10px)}100%{transform:translate(0, 0)}}@keyframes floating-diag-2{0%{transform:translate(0, 0)}25%{transform:translate(12px, -8px)}50%{transform:translate(-12px, 8px)}75%{transform:translate(8px, 12px)}100%{transform:translate(0, 0)}}@keyframes floating-diag-3{0%{transform:translate(0, 0)}30%{transform:translate(-8px, 12px)}60%{transform:translate(8px, -12px)}100%{transform:translate(0, 0)}}@keyframes floating-diag-4{0%{transform:translate(0, 0)}20%{transform:translate(10px, 10px)}40%{transform:translate(-10px, -10px)}60%{transform:translate(10px, -10px)}80%{transform:translate(-10px, 10px)}100%{transform:translate(0, 0)}}@keyframes shakeX{0%{transform:translateY(-50%) translateX(0)}10%,30%,50%,70%,90%{transform:translateY(-50%) translateX(-8px)}20%,40%,60%,80%{transform:translateY(-50%) translateX(8px)}100%{transform:translateY(-50%) translateX(0)}}@keyframes shakeX2{0%{transform:rotate(180deg) translateY(-50%) translateX(0)}10%,30%,50%,70%,90%{transform:rotate(180deg) translateY(-50%) translateX(-8px)}20%,40%,60%,80%{transform:rotate(180deg) translateY(-50%) translateX(8px)}100%{transform:rotate(180deg) translateY(-50%) translateX(0)}}@keyframes bellRing{0%{transform:rotate(0deg)}10%{transform:rotate(-18deg)}20%{transform:rotate(16deg)}30%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}50%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}80%,100%{transform:rotate(0deg)}}/*# sourceMappingURL=style.css.map */
  1605. >>>>>>> 68e94517d6f897c8fa42310a36d0bfaf2639941f